/* =========================================================
    UDOOGU WEBSITE
   MAIN STYLESHEET
   ========================================================= */


/* =========================================================
   1. RESET
   ========================================================= */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}


html {
    scroll-behavior: smooth;
}


body {
    font-family: "Inter", sans-serif;
    background: #050507;
    color: #ffffff;
    line-height: 1.6;
}


a {
    text-decoration: none;
    color: inherit;
}


button,
input {
    font-family: inherit;
}


/* =========================================================
   2. DESIGN VARIABLES
   ========================================================= */

/*
   CSS VARIABLES

   Instead of writing the same colour everywhere, we create
   variables here.

   If you later want to change the entire website's accent
   colour, you can do it from this one location.

   Example:

   --accent: #8b5cf6;

   Change it to:

   --accent: #d4af37;

   and the purple elements will become gold.
*/

:root {

    --bg-dark: #050507;

    --bg-secondary: #0a0a0f;

    --bg-card: #101016;

    --border: rgba(255, 255, 255, 0.10);

    --text-white: #ffffff;

    --text-muted: #9999a3;

    --accent: #8b5cf6;

    --accent-light: #a78bfa;

    --max-width: 1250px;
}


/* =========================================================
   3. REUSABLE CONTAINER
   ========================================================= */

.section-container {

    width: min(92%, var(--max-width));

    margin: 0 auto;
}


.section {
    padding: 120px 0;
}


/* =========================================================
   4. HEADER / NAVBAR
   ========================================================= */

.header {

    position: absolute;

    top: 0;
    left: 0;

    width: 100%;

    z-index: 1000;
}


.navbar {

    width: min(94%, 1450px);

    margin: 0 auto;

    min-height: 90px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 30px;
}


/* Logo */

.logo {

    font-family: "Cinzel", serif;

    font-size: 22px;

    font-weight: 700;

    letter-spacing: 3px;

    display: flex;

    flex-direction: column;
}


.logo span {

    font-family: "Inter", sans-serif;

    font-size: 7px;

    letter-spacing: 5px;

    color: var(--text-muted);

    margin-top: -3px;
}


/* Navigation links */
.login-link {

    color: #aaa;

    text-decoration: none;

    font-size: 9px;

    text-transform: uppercase;

    letter-spacing: 1px;

    transition: 0.3s ease;

}


.login-link:hover {

    color: white;

}
.nav-links {

    display: flex;

    align-items: center;

    gap: 28px;
}


.nav-links a {

    font-size: 12px;

    font-weight: 500;

    color: rgba(255, 255, 255, 0.70);

    transition: 0.3s ease;
}


.nav-links a:hover,
.nav-links a.active {

    color: #ffffff;
}


/*
   Small line underneath the active navigation link.
*/

.nav-links a.active::after {

    content: "";

    display: block;

    width: 15px;

    height: 2px;

    background: var(--accent);

    margin-top: 5px;
}


/* Right navigation area */

.nav-actions {

    display: flex;

    align-items: center;

    gap: 15px;
}


.icon-button {

    background: transparent;

    border: none;

    color: #ffffff;

    cursor: pointer;

    font-size: 15px;
}


.cart-link {

    position: relative;

    font-size: 15px;
}


.cart-link span {

    position: absolute;

    top: -9px;

    right: -10px;

    width: 15px;

    height: 15px;

    border-radius: 50%;

    background: var(--accent);

    font-size: 9px;

    display: flex;

    align-items: center;

    justify-content: center;
}


/* Main button */

.primary-button,
.nav-button {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 12px;

    background: #ffffff;

    color: #050507;

    padding: 14px 22px;

    border-radius: 50px;

    font-size: 12px;

    font-weight: 700;

    transition: 0.3s ease;
}


.primary-button:hover,
.nav-button:hover {

    transform: translateY(-3px);

    background: var(--accent);

    color: #ffffff;
}


.nav-button {

    padding: 10px 17px;

    font-size: 11px;
}


/* Mobile menu button */

.menu-toggle {

    display: none;

    background: transparent;

    border: none;

    color: #ffffff;

    font-size: 22px;

    cursor: pointer;
}


/* =========================================================
   5. HERO
   ========================================================= */

.hero {

    min-height: 100vh;

    position: relative;

    display: flex;

    align-items: center;

    overflow: hidden;

    /*
       Temporary background image.

    We can replace this later with your own UdoOgu image.
    */

    background-image:
        linear-gradient(
            90deg,
            rgba(5, 5, 7, 0.95) 0%,
            rgba(5, 5, 7, 0.60) 50%,
            rgba(5, 5, 7, 0.30) 100%
        ),
        url("https://images.unsplash.com/photo-1555597673-b21d5c935865?auto=format&fit=crop&w=2000&q=85");

    background-size: cover;

    background-position: center;
}


.hero::after {

    /*
       Bottom gradient.

       This gives the hero a smooth transition into the
       next dark section.
    */

    content: "";

    position: absolute;

    bottom: 0;
    left: 0;

    width: 100%;

    height: 180px;

    background: linear-gradient(
        transparent,
        var(--bg-dark)
    );
}


.hero-content {

    width: min(92%, var(--max-width));

    margin: 0 auto;

    padding-top: 80px;

    position: relative;

    z-index: 2;
}


.hero-small-text {

    color: var(--accent-light);

    font-size: 10px;

    font-weight: 600;

    letter-spacing: 4px;

    margin-bottom: 22px;
}


.hero h1 {

    font-family: "Cinzel", serif;

    font-size: clamp(55px, 9vw, 125px);

    line-height: 0.95;

    max-width: 900px;

    letter-spacing: -3px;
}


.hero h1 span {

    display: block;

    color: transparent;

    -webkit-text-stroke: 1px rgba(255, 255, 255, 0.7);
}


.hero-description {

    max-width: 500px;

    color: rgba(255, 255, 255, 0.65);

    font-size: 16px;

    margin: 30px 0;
}


.hero-buttons {

    display: flex;

    align-items: center;

    gap: 15px;
}


.secondary-button {

    display: inline-flex;

    align-items: center;

    gap: 10px;

    padding: 13px 21px;

    border: 1px solid var(--border);

    border-radius: 50px;

    font-size: 12px;

    transition: 0.3s ease;
}


.secondary-button:hover {

    border-color: var(--accent);

    background: rgba(139, 92, 246, 0.1);
}


.hero-bottom {

    position: absolute;

    bottom: 35px;

    left: 50%;

    transform: translateX(-50%);

    width: min(92%, var(--max-width));

    z-index: 5;

    display: flex;

    justify-content: space-between;

    color: rgba(255, 255, 255, 0.35);

    font-size: 9px;

    letter-spacing: 3px;
}


/* =========================================================
   6. SECTION LABELS
   ========================================================= */

.section-label {

    display: flex;

    align-items: center;

    gap: 10px;

    font-size: 10px;

    letter-spacing: 3px;

    color: var(--accent-light);

    font-weight: 600;

    margin-bottom: 20px;
}


.section-label span {

    width: 25px;

    height: 1px;

    background: var(--accent);
}


.section-heading {

    margin-bottom: 60px;
}


.section-heading.centered {

    text-align: center;
}


.section-heading.centered .section-label {

    justify-content: center;
}


.section-heading h2,
.story-heading h2 {

    font-family: "Cinzel", serif;

    font-size: clamp(38px, 5vw, 70px);

    line-height: 1.05;

    letter-spacing: -1px;
}


.section-heading h2 span,
.story-heading h2 span {

    color: var(--accent-light);
}


.section-heading > p {

    color: var(--text-muted);

    max-width: 550px;

    margin-top: 20px;
}


/* =========================================================
   7. STORY
   ========================================================= */

.story {

    background: var(--bg-dark);
}


.story-grid {

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 100px;

    align-items: start;
}


.story-text {

    color: var(--text-muted);

    font-size: 15px;
}


.story-text p {

    margin-bottom: 20px;
}


.story-text .large-text {

    font-size: 20px;

    color: #ffffff;

    line-height: 1.6;
}


.text-link {

    display: inline-flex;

    align-items: center;

    gap: 10px;

    margin-top: 15px;

    color: #ffffff;

    font-size: 12px;

    font-weight: 600;

    border-bottom: 1px solid var(--accent);

    padding-bottom: 5px;
}


/* =========================================================
   8. PILLARS
   ========================================================= */

.pillars {

    background: var(--bg-secondary);
}


.pillar-grid {

    display: grid;

    grid-template-columns: repeat(4, 1fr);

    border-top: 1px solid var(--border);

    border-bottom: 1px solid var(--border);
}


.pillar-card {

    position: relative;

    padding: 45px 30px;

    min-height: 300px;

    border-right: 1px solid var(--border);

    transition: 0.4s ease;
}


.pillar-card:last-child {

    border-right: none;
}


.pillar-card:hover {

    background: rgba(139, 92, 246, 0.06);
}


.pillar-number {

    position: absolute;

    top: 25px;
    right: 25px;

    font-size: 11px;

    color: #55555f;
}


.pillar-card > i {

    font-size: 25px;

    color: var(--accent-light);

    margin: 30px 0;
}


.pillar-card h3 {

    font-family: "Cinzel", serif;

    font-size: 20px;

    margin-bottom: 12px;
}


.pillar-card p {

    color: var(--text-muted);

    font-size: 13px;
}


/* =========================================================
   9. VIDEO SECTION
   ========================================================= */

.video-section {

    min-height: 650px;

    position: relative;

    display: flex;

    align-items: center;

    justify-content: center;

    text-align: center;

    background-image:
        linear-gradient(
            rgba(5, 5, 7, 0.65),
            rgba(5, 5, 7, 0.80)
        ),
        url("https://images.unsplash.com/photo-1517438476312-10d79c077509?auto=format&fit=crop&w=2000&q=85");

    background-size: cover;

    background-position: center;

    background-attachment: fixed;
}


.video-content {

    position: relative;

    z-index: 2;
}


.video-content .section-label {

    justify-content: center;
}


.video-content h2 {

    font-family: "Cinzel", serif;

    font-size: clamp(45px, 7vw, 90px);

    line-height: 1;

    margin-bottom: 35px;
}


.video-content h2 span {

    color: var(--accent-light);
}


.play-button {

    background: transparent;

    border: none;

    color: #ffffff;

    cursor: pointer;

    display: inline-flex;

    align-items: center;

    gap: 15px;

    font-size: 10px;

    font-weight: 700;

    letter-spacing: 2px;
}


.play-button span {

    width: 60px;

    height: 60px;

    border: 1px solid rgba(255, 255, 255, 0.5);

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

    transition: 0.3s ease;
}


.play-button:hover span {

    background: #ffffff;

    color: #000000;

    transform: scale(1.1);
}


/* =========================================================
   10. DISCIPLINES
   ========================================================= */

.discipline-grid {

    display: grid;

    grid-template-columns: repeat(3, 1fr);

    gap: 15px;
}


.discipline-card {

    min-height: 400px;

    position: relative;

    overflow: hidden;

    display: flex;

    align-items: flex-end;

    background-size: cover;

    background-position: center;

    transition: 0.5s ease;
}


/*
   Each discipline has its own background image.

   Later you can replace these URLs with your own local
   images:

   url("../images/combat.jpg")
*/

.combat {
    background-image:
        linear-gradient(transparent, rgba(0,0,0,0.9)),
        url("https://images.unsplash.com/photo-1555597673-b21d5c935865?auto=format&fit=crop&w=900&q=80");
}


.wrestling {
    background-image:
        linear-gradient(transparent, rgba(0,0,0,0.9)),
        url("https://images.unsplash.com/photo-1599058917212-d750089bc07e?auto=format&fit=crop&w=900&q=80");
}


.forms {
    background-image:
        linear-gradient(transparent, rgba(0,0,0,0.9)),
        url("https://images.unsplash.com/photo-1555597408-26bc8e48e3a7?auto=format&fit=crop&w=900&q=80");
}


.dance {
    background-image:
        linear-gradient(transparent, rgba(0,0,0,0.9)),
        url("https://images.unsplash.com/photo-1504609813442-a8924e83f76e?auto=format&fit=crop&w=900&q=80");
}


.weapons {
    background-image:
        linear-gradient(transparent, rgba(0,0,0,0.9)),
        url("https://images.unsplash.com/photo-1568822617270-2c1579f8dfe2?auto=format&fit=crop&w=900&q=80");
}


.archery {
    background-image:
        linear-gradient(transparent, rgba(0,0,0,0.9)),
        url("https://images.unsplash.com/photo-1549719386-74dfcbf7dbed?auto=format&fit=crop&w=900&q=80");
}


.discipline-card:hover {

    transform: translateY(-5px);
}


.discipline-info {

    padding: 30px;

    position: relative;

    z-index: 2;
}


.discipline-info > span {

    color: var(--accent-light);

    font-size: 10px;
}


.discipline-info h3 {

    font-family: "Cinzel", serif;

    font-size: 30px;

    margin: 7px 0;
}


.discipline-info p {

    color: rgba(255,255,255,0.65);

    font-size: 12px;

    margin-bottom: 15px;
}


.discipline-info i {

    font-size: 13px;

    color: #ffffff;
}


.center-button {

    display: flex;

    justify-content: center;

    margin-top: 40px;
}


/* =========================================================
   11. ACADEMY
   ========================================================= */

.academy-preview {

    background: var(--bg-secondary);
}


.academy-box {

    min-height: 550px;

    display: flex;

    align-items: center;

    padding: 70px;

    position: relative;

    overflow: hidden;

    background:
        linear-gradient(
            90deg,
            rgba(5,5,7,0.95),
            rgba(5,5,7,0.45)
        ),
        url("https://images.unsplash.com/photo-1571019614242-c5c5dee9f50b?auto=format&fit=crop&w=1800&q=85");

    background-size: cover;

    background-position: center;
}


.academy-content {

    max-width: 650px;
}


.academy-content h2 {

    font-family: "Cinzel", serif;

    font-size: clamp(45px, 6vw, 80px);

    line-height: 1;

    margin-bottom: 25px;
}


.academy-content h2 span {

    color: var(--accent-light);
}


.academy-content p {

    color: rgba(255,255,255,0.65);

    max-width: 550px;

    margin-bottom: 30px;
}


/* =========================================================
   12. EVENTS
   ========================================================= */

.events {

    background: var(--bg-dark);
}


.event-list {

    border-top: 1px solid var(--border);
}


.event-item {

    display: grid;

    grid-template-columns: 150px 1fr 50px;

    gap: 40px;

    align-items: center;

    padding: 35px 10px;

    border-bottom: 1px solid var(--border);

    transition: 0.3s ease;
}


.event-item:hover {

    background: rgba(255,255,255,0.02);

    padding-left: 20px;

    padding-right: 20px;
}


.event-date {

    display: flex;

    align-items: center;

    gap: 12px;
}


.event-date strong {

    font-family: "Cinzel", serif;

    font-size: 45px;

    line-height: 1;
}


.event-date span {

    color: var(--text-muted);

    font-size: 10px;

    line-height: 1.3;
}


.event-details > span {

    font-size: 9px;

    letter-spacing: 3px;

    color: var(--accent-light);
}


.event-details h3 {

    font-family: "Cinzel", serif;

    font-size: 24px;

    margin: 5px 0;
}


.event-details p {

    color: var(--text-muted);

    font-size: 12px;
}


.event-arrow {

    width: 40px;

    height: 40px;

    border: 1px solid var(--border);

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

    transition: 0.3s ease;
}


.event-item:hover .event-arrow {

    background: #ffffff;

    color: #000000;
}


/* =========================================================
   13. FINAL CTA
   ========================================================= */

.final-cta {

    min-height: 600px;

    display: flex;

    align-items: center;

    justify-content: center;

    text-align: center;

    background:
        radial-gradient(
            circle at center,
            rgba(139,92,246,0.18),
            transparent 55%
        ),
        var(--bg-secondary);
}


.final-cta-content {

    max-width: 800px;

    padding: 40px;
}


.final-cta .section-label {

    justify-content: center;
}


.final-cta h2 {

    font-family: "Cinzel", serif;

    font-size: clamp(55px, 8vw, 100px);

    line-height: 0.95;

    margin-bottom: 25px;
}


.final-cta h2 span {

    color: var(--accent-light);
}


.final-cta p:not(.section-label) {

    color: var(--text-muted);

    max-width: 500px;

    margin: 0 auto 30px;
}


/* =========================================================
   14. FOOTER
   ========================================================= */

.footer {

    background: #030304;

    padding-top: 80px;
}


.footer-top {

    display: grid;

    grid-template-columns: 2fr 1fr 1fr 1.5fr;

    gap: 50px;

    padding-bottom: 70px;
}


.footer-brand > p {

    color: var(--text-muted);

    max-width: 300px;

    font-size: 13px;

    margin: 25px 0;
}


.social-links {

    display: flex;

    gap: 8px;
}


.social-links a {

    width: 35px;

    height: 35px;

    border: 1px solid var(--border);

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 12px;

    transition: 0.3s ease;
}


.social-links a:hover {

    background: #ffffff;

    color: #000000;
}


.footer-column {

    display: flex;

    flex-direction: column;

    gap: 12px;
}


.footer-column h4,
.footer-newsletter h4 {

    font-size: 10px;

    letter-spacing: 3px;

    margin-bottom: 10px;
}


.footer-column a {

    color: var(--text-muted);

    font-size: 12px;

    transition: 0.3s ease;
}


.footer-column a:hover {

    color: #ffffff;

    padding-left: 5px;
}


.footer-newsletter p {

    color: var(--text-muted);

    font-size: 12px;

    margin-bottom: 20px;
}


.newsletter-form {

    display: flex;

    border: 1px solid var(--border);

    border-radius: 50px;

    padding: 5px;
}


.newsletter-form input {

    background: transparent;

    border: none;

    outline: none;

    color: #ffffff;

    padding: 10px 15px;

    min-width: 0;

    flex: 1;

    font-size: 12px;
}


.newsletter-form button {

    width: 38px;

    height: 38px;

    border-radius: 50%;

    border: none;

    background: #ffffff;

    cursor: pointer;
}


.footer-bottom {

    border-top: 1px solid var(--border);

    min-height: 70px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    color: #55555f;

    font-size: 10px;
}


.footer-bottom div {

    display: flex;

    gap: 20px;
}


.footer-bottom a:hover {

    color: #ffffff;
}


/* =========================================================
   15. RESPONSIVE DESIGN
   ========================================================= */

/*
   Everything above works mainly for desktop.

   Here we tell the website how to behave on tablets
   and mobile phones.

   This is called a MEDIA QUERY.
*/

@media (max-width: 1050px) {

    .nav-links {

        gap: 15px;
    }

    .nav-actions .icon-button {

        display: none;
    }

    .pillar-grid {

        grid-template-columns: repeat(2, 1fr);
    }

    .pillar-card:nth-child(2) {

        border-right: none;
    }

    .pillar-card:nth-child(1),
    .pillar-card:nth-child(2) {

        border-bottom: 1px solid var(--border);
    }

    .discipline-grid {

        grid-template-columns: repeat(2, 1fr);
    }

    .footer-top {

        grid-template-columns: 2fr 1fr 1fr;
    }

    .footer-newsletter {

        grid-column: span 3;
    }
}


/* Tablet/mobile */

@media (max-width: 800px) {

    .navbar {

        min-height: 75px;
    }


    /*
       Hide normal desktop navigation.

       JavaScript will add the "show" class when the
       hamburger button is clicked.
    */

    .nav-links {

        display: none;

        position: absolute;

        top: 75px;

        left: 4%;

        width: 92%;

        background: rgba(10,10,15,0.98);

        border: 1px solid var(--border);

        border-radius: 15px;

        padding: 25px;

        flex-direction: column;

        align-items: flex-start;

        gap: 20px;
    }


    .nav-links.show {

        display: flex;
    }


    .menu-toggle {

        display: block;

        margin-left: auto;
    }


    .nav-actions {

        display: none;
    }


    .hero h1 {

        letter-spacing: -2px;
    }


    .hero-bottom {

        display: none;
    }


    .story-grid {

        grid-template-columns: 1fr;

        gap: 40px;
    }


    .pillar-grid {

        grid-template-columns: 1fr;
    }


    .pillar-card {

        border-right: none;

        border-bottom: 1px solid var(--border);
    }


    .pillar-card:last-child {

        border-bottom: none;
    }


    .discipline-grid {

        grid-template-columns: 1fr;
    }


    .discipline-card {

        min-height: 350px;
    }


    .academy-box {

        padding: 40px 30px;

        min-height: 500px;
    }


    .event-item {

        grid-template-columns: 90px 1fr 40px;

        gap: 15px;
    }


    .footer-top {

        grid-template-columns: 1fr 1fr;
    }


    .footer-newsletter {

        grid-column: span 2;
    }
}


/* Small phones */

@media (max-width: 500px) {

    .section {

        padding: 80px 0;
    }


    .hero {

        min-height: 800px;
    }


    .hero-content {

        padding-top: 60px;
    }


    .hero-small-text {

        font-size: 8px;

        letter-spacing: 2px;
    }


    .hero h1 {

        font-size: 50px;
    }


    .hero-description {

        font-size: 14px;
    }


    .hero-buttons {

        flex-direction: column;

        align-items: flex-start;
    }


    .event-item {

        grid-template-columns: 1fr;

        gap: 15px;
    }


    .event-arrow {

        display: none;
    }


    .footer-top {

        grid-template-columns: 1fr;
    }


    .footer-newsletter {

        grid-column: span 1;
    }


    .footer-bottom {

        flex-direction: column;

        justify-content: center;

        gap: 10px;

        padding: 20px 0;
    }

}

/* =========================================================
   ABOUT PAGE
   ========================================================= */


/* =========================================================
   ABOUT HERO
   ========================================================= */

.about-hero {

    min-height: 75vh;

    position: relative;

    display: flex;

    align-items: center;

    overflow: hidden;

    background:
        linear-gradient(
            90deg,
            rgba(5,5,7,0.95),
            rgba(5,5,7,0.45)
        ),
        url("https://images.unsplash.com/photo-1517836357463-d25dfeac3438?auto=format&fit=crop&w=2000&q=85");

    background-size: cover;

    background-position: center;
}


.about-hero-content {

    width: min(92%, var(--max-width));

    margin: 0 auto;

    padding-top: 80px;

    position: relative;

    z-index: 2;
}


.about-hero h1 {

    font-family: "Cinzel", serif;

    font-size: clamp(48px, 8vw, 100px);

    line-height: 0.95;

    max-width: 900px;

    letter-spacing: -2px;
}


.about-hero h1 span {

    display: block;

    color: var(--accent-light);
}


.about-hero-content > p:last-child {

    color: rgba(255,255,255,0.65);

    margin-top: 30px;

    max-width: 450px;
}


/* =========================================================
   ABOUT INTRODUCTION
   ========================================================= */

.about-intro-grid {

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 100px;
}


.about-intro-grid h2 {

    font-family: "Cinzel", serif;

    font-size: clamp(40px, 5vw, 70px);

    line-height: 1;
}


.about-intro-grid h2 span {

    color: var(--accent-light);

    display: block;
}


.about-text {

    color: var(--text-muted);

    font-size: 15px;
}


.about-text p {

    margin-bottom: 22px;
}


.about-text .large-text {

    font-size: 20px;

    color: #ffffff;

    line-height: 1.5;
}


.about-text strong {

    color: #ffffff;
}


/* =========================================================
   ABOUT IMAGE / QUOTE
   ========================================================= */

.about-image-section {

    min-height: 600px;

    position: relative;

    display: flex;

    align-items: center;

    justify-content: center;

    text-align: center;

    background:
        url("https://images.unsplash.com/photo-1518611012118-696072aa579a?auto=format&fit=crop&w=2000&q=85");

    background-size: cover;

    background-position: center;
}


.about-image-overlay {

    position: absolute;

    inset: 0;

    background: rgba(5,5,7,0.65);
}


.about-quote {

    position: relative;

    z-index: 2;

    max-width: 850px;

    padding: 30px;
}


.about-quote > i {

    color: var(--accent-light);

    font-size: 30px;

    margin-bottom: 25px;
}


.about-quote blockquote {

    font-family: "Cinzel", serif;

    font-size: clamp(30px, 4vw, 55px);

    line-height: 1.2;
}


.about-quote blockquote span {

    color: var(--accent-light);

    display: block;
}


.about-quote small {

    display: block;

    margin-top: 30px;

    font-size: 9px;

    letter-spacing: 3px;

    color: var(--text-muted);
}


/* =========================================================
   UDO OGU SECTION
   ========================================================= */

.udo-section {

    background: var(--bg-secondary);
}


.udo-grid {

    display: grid;

    grid-template-columns: repeat(3, 1fr);

    gap: 15px;
}


.udo-card {

    border: 1px solid var(--border);

    padding: 45px 35px;

    min-height: 320px;

    transition: 0.3s ease;
}


.udo-card:hover {

    transform: translateY(-5px);

    border-color: rgba(139,92,246,0.4);

    background: rgba(139,92,246,0.04);
}


.udo-icon {

    width: 50px;

    height: 50px;

    display: flex;

    align-items: center;

    justify-content: center;

    border: 1px solid var(--border);

    border-radius: 50%;

    color: var(--accent-light);

    margin-bottom: 35px;
}


.udo-card h3 {

    font-family: "Cinzel", serif;

    font-size: 25px;

    margin-bottom: 15px;
}


.udo-card p {

    color: var(--text-muted);

    font-size: 13px;
}


/* =========================================================
   MISSION & VISION
   ========================================================= */

.mission-section {

    background: var(--bg-dark);

    padding: 120px 0;
}


.mission-grid {

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 15px;
}


.mission-card {

    min-height: 450px;

    position: relative;

    border: 1px solid var(--border);

    padding: 50px;

    overflow: hidden;
}


.mission-card::after {

    content: "";

    position: absolute;

    width: 250px;

    height: 250px;

    right: -100px;

    bottom: -100px;

    border-radius: 50%;

    background: rgba(139,92,246,0.08);
}


.mission-number {

    position: absolute;

    top: 25px;

    right: 30px;

    color: #44444d;

    font-size: 12px;
}


.mission-card h2 {

    font-family: "Cinzel", serif;

    font-size: clamp(35px, 4vw, 55px);

    line-height: 1;

    margin: 30px 0;
}


.mission-card h2 span {

    color: var(--accent-light);

    display: block;
}


.mission-card > p:last-child {

    color: var(--text-muted);

    max-width: 450px;

    font-size: 14px;
}


/* =========================================================
    THE UDOOGU WAY
   ========================================================= */

.udoogu-way {

    background: var(--bg-secondary);
}


.way-grid {

    display: grid;

    grid-template-columns: repeat(4, 1fr);

    border-top: 1px solid var(--border);

    border-bottom: 1px solid var(--border);
}


.way-item {

    padding: 40px 30px;

    min-height: 280px;

    border-right: 1px solid var(--border);

    transition: 0.3s ease;
}


.way-item:last-child {

    border-right: none;
}


.way-item:hover {

    background: rgba(139,92,246,0.05);
}


.way-item > span {

    color: var(--accent-light);

    font-size: 10px;
}


.way-item h3 {

    font-family: "Cinzel", serif;

    font-size: 22px;

    margin: 35px 0 15px;
}


.way-item p {

    color: var(--text-muted);

    font-size: 13px;
}


/* =========================================================
   ABOUT PAGE RESPONSIVE
   ========================================================= */

@media (max-width: 900px) {

    .about-intro-grid {

        grid-template-columns: 1fr;

        gap: 45px;
    }


    .udo-grid {

        grid-template-columns: 1fr;
    }


    .mission-grid {

        grid-template-columns: 1fr;
    }


    .way-grid {

        grid-template-columns: repeat(2, 1fr);
    }


    .way-item:nth-child(2) {

        border-right: none;
    }


    .way-item:nth-child(1),
    .way-item:nth-child(2) {

        border-bottom: 1px solid var(--border);
    }
}


@media (max-width: 600px) {

    .about-hero {

        min-height: 650px;
    }


    .about-hero h1 {

        font-size: 48px;
    }


    .about-image-section {

        min-height: 500px;
    }


    .mission-card {

        padding: 35px;

        min-height: 400px;
    }


    .way-grid {

        grid-template-columns: 1fr;
    }


    .way-item {

        border-right: none;

        border-bottom: 1px solid var(--border);
    }


    .way-item:last-child {

        border-bottom: none;
    }
}

/* =========================================================
   DISCIPLINE PAGE
   ========================================================= */


/* =========================================================
   DISCIPLINE HERO
   ========================================================= */

.discipline-hero {

    min-height: 75vh;

    position: relative;

    display: flex;

    align-items: center;

    overflow: hidden;

    background:
        linear-gradient(
            90deg,
            rgba(5,5,7,0.95),
            rgba(5,5,7,0.40)
        ),
        url("https://images.unsplash.com/photo-1555597673-b21d5c935865?auto=format&fit=crop&w=2000&q=85");

    background-size: cover;

    background-position: center;
}


.discipline-hero-content {

    width: min(92%, var(--max-width));

    margin: 0 auto;

    padding-top: 80px;

    position: relative;

    z-index: 2;
}


.discipline-hero h1 {

    font-family: "Cinzel", serif;

    font-size: clamp(50px, 8vw, 105px);

    line-height: 0.95;

    max-width: 900px;

    letter-spacing: -2px;
}


.discipline-hero h1 span {

    display: block;

    color: var(--accent-light);
}


.discipline-hero-content > p:last-child {

    color: rgba(255,255,255,0.65);

    max-width: 500px;

    margin-top: 30px;
}


/* =========================================================
   DISCIPLINE INTRO
   ========================================================= */

.discipline-intro {

    background: var(--bg-dark);
}


.discipline-intro-grid {

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 100px;
}


.discipline-intro-grid h2 {

    font-family: "Cinzel", serif;

    font-size: clamp(40px, 5vw, 70px);

    line-height: 1;
}


.discipline-intro-grid h2 span {

    display: block;

    color: var(--accent-light);
}


.discipline-intro-text {

    color: var(--text-muted);

    font-size: 15px;
}


.discipline-intro-text p {

    margin-bottom: 20px;
}


.discipline-intro-text .large-text {

    font-size: 20px;

    color: #ffffff;

    line-height: 1.5;
}


/* =========================================================
   SIX DISCIPLINES SECTION
   ========================================================= */

.disciplines-main {

    background: var(--bg-secondary);
}


/*
   Large discipline card.

   Instead of six small cards, each discipline gets
   a large horizontal section.

   This gives the page a more premium/editorial feeling.
*/

.discipline-large-card {

    display: grid;

    grid-template-columns: 1.1fr 1fr;

    min-height: 550px;

    border: 1px solid var(--border);

    margin-bottom: 20px;

    overflow: hidden;

    background: #08080c;
}


/*
   "reverse" swaps the image and text positions.

   Normal:

   IMAGE | TEXT

   Reverse:

   TEXT | IMAGE
*/

.discipline-large-card.reverse {

    grid-template-columns: 1fr 1.1fr;
}


.discipline-large-card.reverse .discipline-large-image {

    order: 2;
}


.discipline-large-card.reverse .discipline-large-content {

    order: 1;
}


/* =========================================================
   DISCIPLINE IMAGES
   ========================================================= */

.discipline-large-image {

    min-height: 550px;

    position: relative;

    background-size: cover;

    background-position: center;
}


/*
   Temporary images.

   Later we can replace these with your actual
    UdoOgu photography.
*/

.combat-large {

    background-image:
        linear-gradient(
            90deg,
            transparent,
            rgba(5,5,7,0.15)
        ),
        url("https://images.unsplash.com/photo-1555597673-b21d5c935865?auto=format&fit=crop&w=1200&q=85");
}


.wrestling-large {

    background-image:
        linear-gradient(
            90deg,
            transparent,
            rgba(5,5,7,0.15)
        ),
        url("https://images.unsplash.com/photo-1599058917212-d750089bc07e?auto=format&fit=crop&w=1200&q=85");
}


.forms-large {

    background-image:
        linear-gradient(
            90deg,
            transparent,
            rgba(5,5,7,0.15)
        ),
        url("https://images.unsplash.com/photo-1555597408-26bc8e48e3a7?auto=format&fit=crop&w=1200&q=85");
}


.dance-large {

    background-image:
        linear-gradient(
            90deg,
            transparent,
            rgba(5,5,7,0.15)
        ),
        url("https://images.unsplash.com/photo-1504609813442-a8924e83f76e?auto=format&fit=crop&w=1200&q=85");
}


.weapons-large {

    background-image:
        linear-gradient(
            90deg,
            transparent,
            rgba(5,5,7,0.15)
        ),
        url("https://images.unsplash.com/photo-1568822617270-2c1579f8dfe2?auto=format&fit=crop&w=1200&q=85");
}


.archery-large {

    background-image:
        linear-gradient(
            90deg,
            transparent,
            rgba(5,5,7,0.15)
        ),
        url("https://images.unsplash.com/photo-1549719386-74dfcbf7dbed?auto=format&fit=crop&w=1200&q=85");
}


/* Large number on the image */

.discipline-large-number {

    position: absolute;

    top: 30px;

    left: 30px;

    font-family: "Cinzel", serif;

    font-size: 45px;

    color: rgba(255,255,255,0.7);
}


/* =========================================================
   DISCIPLINE CONTENT
   ========================================================= */

.discipline-large-content {

    padding: 70px;

    display: flex;

    flex-direction: column;

    justify-content: center;
}


.discipline-large-content h3 {

    font-family: "Cinzel", serif;

    font-size: clamp(40px, 5vw, 65px);

    line-height: 1;

    margin-bottom: 25px;
}


.discipline-large-content > p:not(.section-label) {

    color: var(--text-muted);

    font-size: 14px;

    max-width: 500px;

    line-height: 1.8;

    margin-bottom: 25px;
}


/* =========================================================
   DISCIPLINE TAGS
   ========================================================= */

.discipline-tags {

    display: flex;

    flex-wrap: wrap;

    gap: 8px;

    margin-bottom: 30px;
}


.discipline-tags span {

    border: 1px solid var(--border);

    border-radius: 50px;

    padding: 7px 13px;

    font-size: 9px;

    color: var(--text-muted);

    text-transform: uppercase;

    letter-spacing: 1px;
}


/* =========================================================
   DISCIPLINE PHILOSOPHY
   ========================================================= */

.discipline-philosophy {

    min-height: 550px;

    display: flex;

    align-items: center;

    position: relative;

    background:
        radial-gradient(
            circle at 70% 50%,
            rgba(139,92,246,0.15),
            transparent 45%
        ),
        var(--bg-dark);
}


.discipline-philosophy-content {

    max-width: 800px;
}


.discipline-philosophy-content h2 {

    font-family: "Cinzel", serif;

    font-size: clamp(45px, 7vw, 85px);

    line-height: 1;

    margin-bottom: 30px;
}


.discipline-philosophy-content h2 span {

    display: block;

    color: var(--accent-light);
}


.discipline-philosophy-content > p:not(.section-label) {

    color: var(--text-muted);

    max-width: 550px;

    margin-bottom: 30px;
}


/* =========================================================
   DISCIPLINE RESPONSIVE DESIGN
   ========================================================= */

@media (max-width: 900px) {

    .discipline-intro-grid {

        grid-template-columns: 1fr;

        gap: 45px;
    }


    .discipline-large-card,
    .discipline-large-card.reverse {

        grid-template-columns: 1fr;
    }


    /*
       On smaller screens we don't need to alternate
       the image position anymore.

       Everything becomes:

       IMAGE
       TEXT
    */

    .discipline-large-card.reverse .discipline-large-image {

        order: 1;
    }


    .discipline-large-card.reverse .discipline-large-content {

        order: 2;
    }


    .discipline-large-image {

        min-height: 450px;
    }


    .discipline-large-content {

        padding: 50px 40px;
    }
}


@media (max-width: 600px) {

    .discipline-hero {

        min-height: 650px;
    }


    .discipline-hero h1 {

        font-size: 48px;
    }


    .discipline-large-image {

        min-height: 350px;
    }


    .discipline-large-content {

        padding: 40px 25px;
    }


    .discipline-large-content h3 {

        font-size: 42px;
    }


    .discipline-large-number {

        font-size: 35px;

        top: 20px;

        left: 20px;
    }
}
/* =========================================================
   ACADEMY PAGE
   ========================================================= */


/* =========================================================
   ACADEMY HERO
   ========================================================= */

.academy-hero {

    min-height: 75vh;

    position: relative;

    display: flex;

    align-items: center;

    overflow: hidden;

    background:
        linear-gradient(
            90deg,
            rgba(5,5,7,0.95),
            rgba(5,5,7,0.35)
        ),
        url("https://images.unsplash.com/photo-1555597673-b21d5c935865?auto=format&fit=crop&w=2000&q=85");

    background-size: cover;

    background-position: center;
}


.academy-hero-content {

    width: min(92%, var(--max-width));

    margin: 0 auto;

    padding-top: 80px;

    position: relative;

    z-index: 2;
}


.academy-hero h1 {

    font-family: "Cinzel", serif;

    font-size: clamp(50px, 8vw, 105px);

    line-height: 0.95;

    max-width: 950px;

    letter-spacing: -2px;
}


.academy-hero h1 span {

    display: block;

    color: var(--accent-light);
}


.academy-hero-content > p:last-child {

    color: rgba(255,255,255,0.65);

    max-width: 500px;

    margin-top: 30px;
}


/* =========================================================
   ACADEMY INTRO
   ========================================================= */

.academy-intro {

    background: var(--bg-dark);
}


.academy-intro-grid {

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 100px;
}


.academy-intro-grid h2 {

    font-family: "Cinzel", serif;

    font-size: clamp(40px, 5vw, 70px);

    line-height: 1;
}


.academy-intro-grid h2 span {

    display: block;

    color: var(--accent-light);
}


.academy-intro-text {

    color: var(--text-muted);

    font-size: 15px;
}


.academy-intro-text p {

    margin-bottom: 20px;
}


.academy-intro-text .large-text {

    color: #ffffff;

    font-size: 20px;

    line-height: 1.5;
}


/* =========================================================
   COURSE SECTION
   ========================================================= */

.academy-courses {

    background: var(--bg-secondary);
}


/* =========================================================
   FILTER BUTTONS
   ========================================================= */

.academy-filters {

    display: flex;

    flex-wrap: wrap;

    justify-content: center;

    gap: 8px;

    margin: 50px 0;
}


.academy-filter {

    background: transparent;

    border: 1px solid var(--border);

    color: var(--text-muted);

    padding: 11px 20px;

    border-radius: 50px;

    cursor: pointer;

    font-family: "Inter", sans-serif;

    font-size: 10px;

    text-transform: uppercase;

    letter-spacing: 1px;

    transition: 0.3s ease;
}


.academy-filter:hover {

    border-color: var(--accent-light);

    color: #ffffff;
}


.academy-filter.active {

    background: var(--accent);

    border-color: var(--accent);

    color: #ffffff;
}


/* =========================================================
   COURSE GRID
   ========================================================= */

.academy-grid {

    display: grid;

    grid-template-columns: repeat(3, 1fr);

    gap: 18px;
}


/* =========================================================
   COURSE CARD
   ========================================================= */

.course-card {

    background: #08080c;

    border: 1px solid var(--border);

    overflow: hidden;

    transition: 0.35s ease;
}


.course-card:hover {

    transform: translateY(-7px);

    border-color: rgba(139,92,246,0.45);
}


/* =========================================================
   COURSE IMAGE
   ========================================================= */

.course-image {

    height: 260px;

    position: relative;

    background-size: cover;

    background-position: center;
}


.combat-course {

    background-image:
        linear-gradient(
            rgba(5,5,7,0.25),
            rgba(5,5,7,0.45)
        ),
        url("https://images.unsplash.com/photo-1555597673-b21d5c935865?auto=format&fit=crop&w=900&q=85");
}


.wrestling-course {

    background-image:
        linear-gradient(
            rgba(5,5,7,0.25),
            rgba(5,5,7,0.45)
        ),
        url("https://images.unsplash.com/photo-1599058917212-d750089bc07e?auto=format&fit=crop&w=900&q=85");
}


.forms-course {

    background-image:
        linear-gradient(
            rgba(5,5,7,0.25),
            rgba(5,5,7,0.45)
        ),
        url("https://images.unsplash.com/photo-1555597408-26bc8e48e3a7?auto=format&fit=crop&w=900&q=85");
}


.dance-course {

    background-image:
        linear-gradient(
            rgba(5,5,7,0.25),
            rgba(5,5,7,0.45)
        ),
        url("https://images.unsplash.com/photo-1504609813442-a8924e83f76e?auto=format&fit=crop&w=900&q=85");
}


.weapons-course {

    background-image:
        linear-gradient(
            rgba(5,5,7,0.25),
            rgba(5,5,7,0.45)
        ),
        url("https://images.unsplash.com/photo-1568822617270-2c1579f8dfe2?auto=format&fit=crop&w=900&q=85");
}


.archery-course {

    background-image:
        linear-gradient(
            rgba(5,5,7,0.25),
            rgba(5,5,7,0.45)
        ),
        url("https://images.unsplash.com/photo-1549719386-74dfcbf7dbed?auto=format&fit=crop&w=900&q=85");
}


/* Number displayed on image */

.course-number {

    position: absolute;

    top: 18px;

    left: 18px;

    font-family: "Cinzel", serif;

    font-size: 25px;

    color: rgba(255,255,255,0.7);
}


/* Category displayed on image */

.course-category {

    position: absolute;

    bottom: 18px;

    left: 18px;

    background: rgba(5,5,7,0.75);

    backdrop-filter: blur(8px);

    padding: 7px 12px;

    border: 1px solid rgba(255,255,255,0.15);

    font-size: 8px;

    letter-spacing: 1.5px;
}


/* =========================================================
   COURSE CONTENT
   ========================================================= */

.course-content {

    padding: 25px;
}


.course-meta {

    display: flex;

    justify-content: space-between;

    color: #6f6f78;

    font-size: 9px;

    text-transform: uppercase;

    letter-spacing: 0.8px;

    margin-bottom: 15px;
}


.course-meta i {

    color: var(--accent-light);

    margin-right: 5px;
}


.course-content h3 {

    font-family: "Cinzel", serif;

    font-size: 24px;

    margin-bottom: 12px;
}


.course-content > p {

    color: var(--text-muted);

    font-size: 12px;

    line-height: 1.7;

    margin-bottom: 20px;
}


/* =========================================================
   COURSE TOPICS
   ========================================================= */

/*
    These topics are hidden initially.

    JavaScript will add the "show" class
    when the user clicks "View Topics".
*/

.course-topics {

    display: none;

    border-top: 1px solid var(--border);

    border-bottom: 1px solid var(--border);

    padding: 20px 0;

    margin-bottom: 18px;
}


/*
    JavaScript adds this class when the
    user opens the topics.
*/

.course-topics.show {

    display: block;

    animation: topicsAppear 0.3s ease;
}


@keyframes topicsAppear {

    from {

        opacity: 0;

        transform: translateY(-5px);

    }

    to {

        opacity: 1;

        transform: translateY(0);

    }

}


.course-topics h4 {

    font-size: 9px;

    letter-spacing: 1.5px;

    color: var(--accent-light);

    margin-bottom: 12px;
}


.course-topics ul {

    list-style: none;

    padding: 0;

    margin: 0;
}


.course-topics li {

    color: var(--text-muted);

    font-size: 11px;

    margin-bottom: 8px;

    padding-left: 15px;

    position: relative;
}


.course-topics li::before {

    content: "—";

    position: absolute;

    left: 0;

    color: var(--accent-light);
}


/* =========================================================
   TOPICS BUTTON
   ========================================================= */

.topics-button {

    background: none;

    border: none;

    color: #ffffff;

    font-size: 10px;

    text-transform: uppercase;

    letter-spacing: 1px;

    cursor: pointer;

    padding: 0;

    display: flex;

    align-items: center;

    gap: 8px;

    margin-bottom: 25px;
}


.topics-button i {

    color: var(--accent-light);

    transition: 0.3s ease;
}


/*
    When the topics are open, JavaScript adds
    the "open" class to the button.

    We rotate the arrow to show that it is open.
*/

.topics-button.open i {

    transform: rotate(180deg);
}


/* =========================================================
   COURSE BOTTOM
   ========================================================= */

.course-bottom {

    border-top: 1px solid var(--border);

    padding-top: 20px;

    display: flex;

    justify-content: space-between;

    align-items: center;
}


.course-bottom strong {

    font-family: "Cinzel", serif;

    font-size: 22px;
}


.course-bottom a {

    color: var(--accent-light);

    text-transform: uppercase;

    font-size: 9px;

    letter-spacing: 1px;

    display: flex;

    align-items: center;

    gap: 8px;
}


.course-bottom a i {

    transition: 0.3s ease;
}


.course-bottom a:hover i {

    transform: translateX(4px);
}


/* =========================================================
   ACADEMY PHILOSOPHY
   ========================================================= */

.academy-philosophy {

    min-height: 550px;

    display: flex;

    align-items: center;

    background:
        radial-gradient(
            circle at 70% 50%,
            rgba(139,92,246,0.14),
            transparent 45%
        ),
        var(--bg-dark);
}


.academy-philosophy-content {

    max-width: 800px;
}


.academy-philosophy-content h2 {

    font-family: "Cinzel", serif;

    font-size: clamp(45px, 7vw, 85px);

    line-height: 1;

    margin-bottom: 30px;
}


.academy-philosophy-content h2 span {

    display: block;

    color: var(--accent-light);
}


.academy-philosophy-content > p:not(.section-label) {

    max-width: 550px;

    color: var(--text-muted);

    margin-bottom: 30px;
}


/* =========================================================
   ACADEMY RESPONSIVE DESIGN
   ========================================================= */

@media (max-width: 1000px) {

    .academy-grid {

        grid-template-columns: repeat(2, 1fr);
    }

}


@media (max-width: 900px) {

    .academy-intro-grid {

        grid-template-columns: 1fr;

        gap: 45px;
    }

}


@media (max-width: 600px) {

    .academy-hero {

        min-height: 650px;
    }


    .academy-hero h1 {

        font-size: 48px;
    }


    .academy-grid {

        grid-template-columns: 1fr;
    }


    .academy-filters {

        justify-content: flex-start;

        overflow-x: auto;

        flex-wrap: nowrap;

        padding-bottom: 10px;
    }


    .academy-filter {

        flex-shrink: 0;
    }


    .course-image {

        height: 240px;
    }

}
/* =========================================================
   SHOP PAGE
   ========================================================= */


/* =========================================================
   SHOP HERO
   ========================================================= */

.shop-hero {

    min-height: 75vh;

    position: relative;

    display: flex;

    align-items: center;

    overflow: hidden;

    background:
        linear-gradient(
            90deg,
            rgba(5,5,7,0.95),
            rgba(5,5,7,0.35)
        ),
        url("https://images.unsplash.com/photo-1517836357463-d25dfeac3438?auto=format&fit=crop&w=2000&q=85");

    background-size: cover;

    background-position: center;
}


.shop-hero-content {

    width: min(92%, var(--max-width));

    margin: 0 auto;

    padding-top: 80px;
}


.shop-hero h1 {

    font-family: "Cinzel", serif;

    font-size: clamp(50px, 8vw, 105px);

    line-height: 0.95;

    max-width: 900px;
}


.shop-hero h1 span {

    display: block;

    color: var(--accent-light);
}


.shop-hero-content > p:last-child {

    color: rgba(255,255,255,0.65);

    max-width: 500px;

    margin-top: 30px;
}


/* =========================================================
   SHOP INTRO
   ========================================================= */

.shop-intro {

    background: var(--bg-dark);
}


.shop-intro-grid {

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 100px;
}


.shop-intro-grid h2 {

    font-family: "Cinzel", serif;

    font-size: clamp(40px, 5vw, 70px);

    line-height: 1;
}


.shop-intro-grid h2 span {

    display: block;

    color: var(--accent-light);
}


.shop-intro-text {

    color: var(--text-muted);

    font-size: 15px;
}


.shop-intro-text p {

    margin-bottom: 20px;
}


.shop-intro-text .large-text {

    color: #ffffff;

    font-size: 20px;

    line-height: 1.5;
}


/* =========================================================
   SHOP PRODUCTS
   ========================================================= */

.shop-products {

    background: var(--bg-secondary);
}


/* =========================================================
   SHOP FILTERS
   ========================================================= */

.shop-filters {

    display: flex;

    justify-content: center;

    flex-wrap: wrap;

    gap: 8px;

    margin: 50px 0;
}


.shop-filter {

    background: transparent;

    border: 1px solid var(--border);

    color: var(--text-muted);

    padding: 11px 20px;

    border-radius: 50px;

    cursor: pointer;

    font-size: 10px;

    text-transform: uppercase;

    letter-spacing: 1px;

    transition: 0.3s ease;
}


.shop-filter:hover {

    color: #ffffff;

    border-color: var(--accent-light);
}


.shop-filter.active {

    background: var(--accent);

    border-color: var(--accent);

    color: #ffffff;
}


/* =========================================================
   PRODUCT GRID
   ========================================================= */

.product-grid {

    display: grid;

    grid-template-columns: repeat(3, 1fr);

    gap: 18px;
}


/* =========================================================
   PRODUCT CARD
   ========================================================= */

.product-card {

    background: #08080c;

    border: 1px solid var(--border);

    overflow: hidden;

    transition: 0.35s ease;
}


.product-card:hover {

    transform: translateY(-7px);

    border-color: rgba(139,92,246,0.45);
}


/* =========================================================
   PRODUCT IMAGE
   ========================================================= */

.product-image {

    height: 300px;

    position: relative;

    background-size: cover;

    background-position: center;
}


.gi-product {

    background-image:
        linear-gradient(
            rgba(5,5,7,0.15),
            rgba(5,5,7,0.45)
        ),
        url("https://images.unsplash.com/photo-1574680178050-55c6a6a96e0a?auto=format&fit=crop&w=900&q=85");
}


.gloves-product {

    background-image:
        linear-gradient(
            rgba(5,5,7,0.15),
            rgba(5,5,7,0.45)
        ),
        url("https://images.unsplash.com/photo-1549719386-74dfcbf7dbed?auto=format&fit=crop&w=900&q=85");
}


.shirt-product {

    background-image:
        linear-gradient(
            rgba(5,5,7,0.15),
            rgba(5,5,7,0.45)
        ),
        url("https://images.unsplash.com/photo-1521572163474-6864f9cf17ab?auto=format&fit=crop&w=900&q=85");
}


.belt-product {

    background-image:
        linear-gradient(
            rgba(5,5,7,0.15),
            rgba(5,5,7,0.45)
        ),
        url("https://images.unsplash.com/photo-1555597673-b21d5c935865?auto=format&fit=crop&w=900&q=85");
}


.bag-product {

    background-image:
        linear-gradient(
            rgba(5,5,7,0.15),
            rgba(5,5,7,0.45)
        ),
        url("https://images.unsplash.com/photo-1553062407-98eeb64c6a62?auto=format&fit=crop&w=900&q=85");
}


.bottle-product {

    background-image:
        linear-gradient(
            rgba(5,5,7,0.15),
            rgba(5,5,7,0.45)
        ),
        url("https://images.unsplash.com/photo-1602143407151-7111542de6e8?auto=format&fit=crop&w=900&q=85");
}


/* =========================================================
   PRODUCT BADGE
   ========================================================= */

.product-badge {

    position: absolute;

    top: 18px;

    left: 18px;

    background: var(--accent);

    padding: 7px 10px;

    font-size: 8px;

    letter-spacing: 1px;
}


.product-category-label {

    position: absolute;

    bottom: 18px;

    left: 18px;

    background: rgba(5,5,7,0.75);

    backdrop-filter: blur(8px);

    padding: 7px 12px;

    border: 1px solid rgba(255,255,255,0.15);

    font-size: 8px;

    letter-spacing: 1.5px;
}


/* =========================================================
   PRODUCT CONTENT
   ========================================================= */

.product-content {

    padding: 25px;
}


.product-content h3 {

    font-family: "Cinzel", serif;

    font-size: 23px;

    margin-bottom: 10px;
}


.product-content > p {

    color: var(--text-muted);

    font-size: 12px;

    line-height: 1.7;

    margin-bottom: 25px;
}


.product-bottom {

    display: flex;

    align-items: center;

    justify-content: space-between;

    border-top: 1px solid var(--border);

    padding-top: 20px;
}


.product-bottom strong {

    font-family: "Cinzel", serif;

    font-size: 22px;
}


.add-cart {

    border: 1px solid var(--border);

    background: transparent;

    color: #ffffff;

    padding: 10px 14px;

    cursor: pointer;

    font-size: 9px;

    text-transform: uppercase;

    letter-spacing: 1px;

    transition: 0.3s ease;
}


.add-cart:hover {

    background: var(--accent);

    border-color: var(--accent);
}


.add-cart i {

    margin-left: 5px;
}


/* =========================================================
   SHOP PHILOSOPHY
   ========================================================= */

.shop-philosophy {

    min-height: 500px;

    display: flex;

    align-items: center;

    background:
        radial-gradient(
            circle at 70% 50%,
            rgba(139,92,246,0.14),
            transparent 45%
        ),
        var(--bg-dark);
}


.shop-philosophy-content {

    max-width: 800px;
}


.shop-philosophy-content h2 {

    font-family: "Cinzel", serif;

    font-size: clamp(45px, 7vw, 85px);

    line-height: 1;

    margin-bottom: 30px;
}


.shop-philosophy-content h2 span {

    display: block;

    color: var(--accent-light);
}


.shop-philosophy-content > p:not(.section-label) {

    max-width: 550px;

    color: var(--text-muted);
}


/* =========================================================
   CART SIDEBAR
   ========================================================= */


/*
    The cart is positioned fixed to the right side
    of the browser.

    It is initially moved completely outside
    the screen using translateX().
*/

.cart-sidebar {

    position: fixed;

    top: 0;

    right: 0;

    width: min(450px, 92vw);

    height: 100vh;

    background: #09090d;

    border-left: 1px solid var(--border);

    z-index: 9999;

    display: flex;

    flex-direction: column;

    transform: translateX(100%);

    transition: transform 0.4s ease;
}


/*
    JavaScript adds "open" when the cart
    should become visible.
*/

.cart-sidebar.open {

    transform: translateX(0);

}


/* =========================================================
   CART OVERLAY
   ========================================================= */

.cart-overlay {

    position: fixed;

    inset: 0;

    background: rgba(0,0,0,0.7);

    backdrop-filter: blur(5px);

    z-index: 9998;

    opacity: 0;

    visibility: hidden;

    transition: 0.3s ease;
}


.cart-overlay.open {

    opacity: 1;

    visibility: visible;
}


/* =========================================================
   CART HEADER
   ========================================================= */

.cart-header {

    padding: 30px;

    border-bottom: 1px solid var(--border);

    display: flex;

    justify-content: space-between;

    align-items: center;
}


.cart-header h3 {

    font-family: "Cinzel", serif;

    font-size: 28px;

    margin-top: 8px;
}


.cart-header button {

    width: 40px;

    height: 40px;

    border: 1px solid var(--border);

    background: transparent;

    color: #ffffff;

    cursor: pointer;

    border-radius: 50%;
}


/* =========================================================
   CART ITEMS
   ========================================================= */

.cart-items {

    flex: 1;

    overflow-y: auto;

    padding: 20px;
}


.empty-cart {

    height: 100%;

    display: flex;

    flex-direction: column;

    justify-content: center;

    align-items: center;

    text-align: center;

    color: var(--text-muted);
}


.empty-cart i {

    font-size: 40px;

    color: var(--accent-light);

    margin-bottom: 20px;
}


.empty-cart p {

    color: #ffffff;

    margin-bottom: 5px;
}


/* =========================================================
   CART ITEM
   ========================================================= */

.cart-item {

    display: grid;

    grid-template-columns: 65px 1fr auto;

    gap: 15px;

    padding: 15px 0;

    border-bottom: 1px solid var(--border);
}


.cart-item-image {

    width: 65px;

    height: 65px;

    background: #16161d;

    background-size: cover;

    background-position: center;
}


.cart-item-info h4 {

    font-size: 12px;

    margin-bottom: 6px;
}


.cart-item-info span {

    font-size: 11px;

    color: var(--accent-light);
}


.cart-quantity {

    display: flex;

    align-items: center;

    gap: 8px;

    margin-top: 10px;
}


.cart-quantity button {

    width: 24px;

    height: 24px;

    border: 1px solid var(--border);

    background: transparent;

    color: #ffffff;

    cursor: pointer;
}


.cart-quantity span {

    color: #ffffff;

    min-width: 15px;

    text-align: center;
}


.remove-cart-item {

    border: none;

    background: none;

    color: #666;

    cursor: pointer;

    font-size: 12px;
}


.remove-cart-item:hover {

    color: #ffffff;
}


/* =========================================================
   CART FOOTER
   ========================================================= */

.cart-footer {

    padding: 25px;

    border-top: 1px solid var(--border);

    background: #08080c;
}


.cart-total {

    display: flex;

    justify-content: space-between;

    align-items: center;

    margin-bottom: 20px;
}


.cart-total span {

    color: var(--text-muted);

    text-transform: uppercase;

    font-size: 10px;

    letter-spacing: 1px;
}


.cart-total strong {

    font-family: "Cinzel", serif;

    font-size: 25px;
}


.checkout-button {

    width: 100%;

    padding: 16px;

    background: var(--accent);

    border: none;

    color: #ffffff;

    cursor: pointer;

    font-size: 10px;

    text-transform: uppercase;

    letter-spacing: 1px;
}


/* =========================================================
   SHOP RESPONSIVE
   ========================================================= */

@media (max-width: 1000px) {

    .product-grid {

        grid-template-columns: repeat(2, 1fr);
    }

}


@media (max-width: 900px) {

    .shop-intro-grid {

        grid-template-columns: 1fr;

        gap: 45px;
    }

}


@media (max-width: 600px) {

    .shop-hero {

        min-height: 650px;
    }


    .shop-hero h1 {

        font-size: 48px;
    }


    .product-grid {

        grid-template-columns: 1fr;
    }


    .shop-filters {

        justify-content: flex-start;

        flex-wrap: nowrap;

        overflow-x: auto;

        padding-bottom: 10px;
    }


    .shop-filter {

        flex-shrink: 0;
    }


    .product-image {

        height: 280px;
    }

}

/* =========================================================
   EVENTS PAGE
   ========================================================= */


/* =========================================================
   EVENTS HERO
   ========================================================= */

.events-hero {

    min-height: 72vh;

    position: relative;

    display: flex;

    align-items: center;

    overflow: hidden;

    background:
        linear-gradient(
            90deg,
            rgba(5,5,7,0.94),
            rgba(5,5,7,0.38)
        ),
        url("https://images.unsplash.com/photo-1555597673-b21d5c935865?auto=format&fit=crop&w=2000&q=85");

    background-size: cover;

    background-position: center;
}


.events-hero-content {

    width: min(92%, var(--max-width));

    margin: 0 auto;

    padding-top: 80px;
}


.events-hero h1 {

    font-family: "Cinzel", serif;

    font-size: clamp(50px, 8vw, 105px);

    line-height: 0.95;

    max-width: 950px;
}


.events-hero h1 span {

    display: block;

    color: var(--accent-light);
}


.events-hero-content > p:last-child {

    max-width: 550px;

    color: rgba(255,255,255,0.65);

    margin-top: 30px;

    line-height: 1.8;
}


.events-hero-bottom {

    position: absolute;

    bottom: 30px;

    left: 50%;

    transform: translateX(-50%);

    width: min(92%, var(--max-width));

    display: flex;

    justify-content: space-between;

    border-top: 1px solid rgba(255,255,255,0.2);

    padding-top: 15px;

    color: rgba(255,255,255,0.55);

    font-size: 9px;

    letter-spacing: 2px;
}


/* =========================================================
   FEATURED EVENT
   ========================================================= */

.featured-event-section {

    background: var(--bg-dark);
}


.featured-event {

    display: grid;

    grid-template-columns: 1.1fr 0.9fr;

    min-height: 600px;

    margin-top: 40px;

    border: 1px solid var(--border);

    background: #09090d;
}


.featured-event-image {

    min-height: 550px;

    position: relative;

    background:
        linear-gradient(
            0deg,
            rgba(5,5,7,0.85),
            transparent 60%
        ),
        url("https://images.unsplash.com/photo-1552072092-7f9b8d63ef7e?auto=format&fit=crop&w=1200&q=85");

    background-size: cover;

    background-position: center;
}


.featured-event-overlay {

    position: absolute;

    bottom: 35px;

    left: 35px;

    display: flex;

    flex-direction: column;

    gap: 8px;
}


.featured-event-overlay span {

    font-size: 9px;

    letter-spacing: 2px;

    color: var(--accent-light);
}


.featured-event-overlay strong {

    font-family: "Cinzel", serif;

    font-size: 20px;
}


.featured-event-content {

    padding: 65px 55px;

    display: flex;

    flex-direction: column;

    justify-content: center;
}


.event-number {

    color: var(--accent-light);

    font-size: 9px;

    letter-spacing: 2px;

    margin-bottom: 25px;
}


.featured-event-content h2 {

    font-family: "Cinzel", serif;

    font-size: clamp(40px, 5vw, 65px);

    line-height: 1;

    margin-bottom: 25px;
}


.featured-event-content h2 span {

    display: block;

    color: var(--accent-light);
}


.featured-event-content > p {

    color: var(--text-muted);

    line-height: 1.8;

    max-width: 450px;
}


/* =========================================================
   EVENT DETAILS
   ========================================================= */

.event-details {

    display: grid;

    gap: 20px;

    margin: 35px 0;
}


.event-details > div {

    display: flex;

    align-items: center;

    gap: 15px;
}


.event-details i {

    width: 40px;

    height: 40px;

    display: grid;

    place-items: center;

    border: 1px solid var(--border);

    color: var(--accent-light);
}


.event-details small {

    display: block;

    font-size: 8px;

    letter-spacing: 1.5px;

    color: #777;

    margin-bottom: 4px;
}


.event-details strong {

    display: block;

    font-size: 12px;

    font-weight: 500;
}


/* =========================================================
   UPCOMING EVENTS
   ========================================================= */

.upcoming-events {

    background: var(--bg-secondary);
}


.events-heading-row {

    display: flex;

    justify-content: space-between;

    align-items: end;

    gap: 50px;

    margin-bottom: 60px;
}


.events-heading-row h2 {

    font-family: "Cinzel", serif;

    font-size: clamp(45px, 6vw, 75px);

    line-height: 1;

    margin-top: 15px;
}


.events-heading-row h2 span {

    color: var(--accent-light);
}


.events-heading-row > p {

    max-width: 380px;

    color: var(--text-muted);

    line-height: 1.7;
}


/* =========================================================
   EVENT CARD
   ========================================================= */

.event-card {

    display: grid;

    grid-template-columns: 100px 280px 1fr;

    min-height: 220px;

    border-top: 1px solid var(--border);

    padding: 20px 0;

    transition: 0.3s ease;
}


.event-card:last-child {

    border-bottom: 1px solid var(--border);
}


.event-card:hover {

    background: rgba(255,255,255,0.015);

    padding-left: 10px;

    padding-right: 10px;
}


/* =========================================================
   EVENT DATE
   ========================================================= */

.event-date {

    display: flex;

    flex-direction: column;

    justify-content: center;

    border-right: 1px solid var(--border);

    padding-right: 20px;
}


.event-date span {

    font-size: 9px;

    color: var(--accent-light);

    letter-spacing: 2px;
}


.event-date strong {

    font-family: "Cinzel", serif;

    font-size: 55px;

    line-height: 1;
}


.event-date small {

    color: #666;

    font-size: 9px;
}


/* =========================================================
   EVENT IMAGES
   ========================================================= */

.event-card-image {

    margin: 0 25px;

    background-size: cover;

    background-position: center;

    position: relative;
}


.event-image-one {

    background-image:
        linear-gradient(
            rgba(0,0,0,0.15),
            rgba(0,0,0,0.35)
        ),
        url("https://images.unsplash.com/photo-1549719386-74dfcbf7dbed?auto=format&fit=crop&w=800&q=80");
}


.event-image-two {

    background-image:
        linear-gradient(
            rgba(0,0,0,0.15),
            rgba(0,0,0,0.35)
        ),
        url("https://images.unsplash.com/photo-1517838277536-f5f99be50105?auto=format&fit=crop&w=800&q=80");
}


.event-image-three {

    background-image:
        linear-gradient(
            rgba(0,0,0,0.15),
            rgba(0,0,0,0.35)
        ),
        url("https://images.unsplash.com/photo-1555597673-b21d5c935865?auto=format&fit=crop&w=800&q=80");
}


.event-image-four {

    background-image:
        linear-gradient(
            rgba(0,0,0,0.15),
            rgba(0,0,0,0.35)
        ),
        url("https://images.unsplash.com/photo-1528164344705-47542687000d?auto=format&fit=crop&w=800&q=80");
}


.event-card-image > span {

    position: absolute;

    left: 12px;

    bottom: 12px;

    background: rgba(5,5,7,0.8);

    padding: 7px 10px;

    font-size: 8px;

    letter-spacing: 1px;
}


/* =========================================================
   EVENT CARD CONTENT
   ========================================================= */

.event-card-content {

    display: flex;

    flex-direction: column;

    justify-content: center;

    padding-left: 20px;
}


.event-card-top {

    display: flex;

    justify-content: space-between;

    margin-bottom: 15px;

    font-size: 8px;

    letter-spacing: 1.5px;

    color: var(--accent-light);
}


.event-card-content h3 {

    font-family: "Cinzel", serif;

    font-size: 24px;

    margin-bottom: 12px;
}


.event-card-content > p {

    max-width: 550px;

    color: var(--text-muted);

    font-size: 12px;

    line-height: 1.7;
}


.event-card-bottom {

    display: flex;

    justify-content: space-between;

    align-items: center;

    margin-top: 20px;

    padding-top: 15px;

    border-top: 1px solid var(--border);

    font-size: 10px;

    color: #777;
}


.event-card-bottom a {

    color: #ffffff;

    text-decoration: none;

    text-transform: uppercase;

    letter-spacing: 1px;

    font-size: 9px;
}


.event-card-bottom a i {

    color: var(--accent-light);

    margin-left: 7px;

    transition: 0.3s ease;
}


.event-card-bottom a:hover i {

    margin-left: 12px;
}


/* =========================================================
   EVENTS CTA
   ========================================================= */

.events-cta {

    min-height: 550px;

    display: flex;

    align-items: center;

    background:
        radial-gradient(
            circle at 75% 50%,
            rgba(139,92,246,0.16),
            transparent 40%
        ),
        var(--bg-dark);
}


.events-cta-content {

    max-width: 800px;
}


.events-cta-content h2 {

    font-family: "Cinzel", serif;

    font-size: clamp(50px, 7vw, 90px);

    line-height: 0.95;

    margin: 20px 0 25px;
}


.events-cta-content h2 span {

    display: block;

    color: var(--accent-light);
}


.events-cta-content > p:not(.section-label) {

    color: var(--text-muted);

    max-width: 500px;

    line-height: 1.8;

    margin-bottom: 30px;
}


/* =========================================================
   EVENTS RESPONSIVE
   ========================================================= */

@media (max-width: 1000px) {

    .featured-event {

        grid-template-columns: 1fr;
    }


    .featured-event-image {

        min-height: 450px;
    }


    .event-card {

        grid-template-columns: 80px 220px 1fr;
    }

}


@media (max-width: 800px) {

    .events-heading-row {

        flex-direction: column;

        align-items: flex-start;
    }


    .event-card {

        grid-template-columns: 75px 1fr;

        gap: 20px;
    }


    .event-card-image {

        display: none;
    }


    .event-card-content {

        padding-left: 0;
    }

}


@media (max-width: 600px) {

    .events-hero {

        min-height: 650px;
    }


    .events-hero h1 {

        font-size: 48px;
    }


    .events-hero-bottom {

        gap: 15px;

        overflow: hidden;

        white-space: nowrap;
    }


    .featured-event-content {

        padding: 40px 25px;
    }


    .featured-event-image {

        min-height: 350px;
    }


    .event-card {

        grid-template-columns: 65px 1fr;

        padding: 20px 0;
    }


    .event-date strong {

        font-size: 40px;
    }


    .event-card-top {

        gap: 10px;
    }


    .event-card-content h3 {

        font-size: 19px;
    }


    .event-card-bottom {

        flex-direction: column;

        align-items: flex-start;

        gap: 12px;
    }

}
/* =========================================================
   MEDIA PAGE
   ========================================================= */


/* =========================================================
   MEDIA HERO
   ========================================================= */

.media-hero {

    min-height: 72vh;

    position: relative;

    display: flex;

    align-items: center;

    overflow: hidden;

    background:
        linear-gradient(
            90deg,
            rgba(5,5,7,0.95),
            rgba(5,5,7,0.30)
        ),
        url("https://images.unsplash.com/photo-1555597673-b21d5c935865?auto=format&fit=crop&w=2000&q=85");

    background-size: cover;

    background-position: center;
}


.media-hero-content {

    width: min(92%, var(--max-width));

    margin: 0 auto;

    padding-top: 70px;
}


.media-hero h1 {

    font-family: "Cinzel", serif;

    font-size: clamp(55px, 9vw, 110px);

    line-height: 0.9;

    max-width: 900px;
}


.media-hero h1 span {

    display: block;

    color: var(--accent-light);
}


.media-hero-content > p:last-child {

    max-width: 560px;

    margin-top: 30px;

    color: rgba(255,255,255,0.65);

    line-height: 1.8;
}


.media-scroll {

    position: absolute;

    bottom: 30px;

    left: 50%;

    transform: translateX(-50%);

    display: flex;

    flex-direction: column;

    align-items: center;

    gap: 10px;

    color: #777;

    font-size: 8px;

    letter-spacing: 2px;
}


.media-scroll i {

    color: var(--accent-light);
}


/* =========================================================
   FEATURED VIDEO
   ========================================================= */

.featured-video-section {

    background: var(--bg-dark);
}


.featured-video {

    margin-top: 40px;

    display: grid;

    grid-template-columns: 1.4fr 0.6fr;

    min-height: 500px;

    border: 1px solid var(--border);

    background: #09090d;
}


.featured-video-image {

    position: relative;

    min-height: 500px;

    display: grid;

    place-items: center;

    background:
        linear-gradient(
            rgba(0,0,0,0.30),
            rgba(0,0,0,0.55)
        ),
        url("https://images.unsplash.com/photo-1552072092-7f9b8d63ef7e?auto=format&fit=crop&w=1400&q=85");

    background-size: cover;

    background-position: center;
}


/* Large circular play button */

.play-button {

    width: 90px;

    height: 90px;

    border-radius: 50%;

    border: 1px solid rgba(255,255,255,0.5);

    background: rgba(5,5,7,0.65);

    color: white;

    cursor: pointer;

    font-size: 22px;

    transition: 0.3s ease;
}


.play-button:hover {

    transform: scale(1.08);

    background: var(--accent);

    border-color: var(--accent);
}


.video-duration {

    position: absolute;

    right: 20px;

    bottom: 20px;

    padding: 7px 10px;

    background: rgba(0,0,0,0.75);

    font-size: 9px;

    letter-spacing: 1px;
}


.featured-video-info {

    padding: 55px 45px;

    display: flex;

    flex-direction: column;

    justify-content: space-between;
}


.video-category {

    color: var(--accent-light);

    font-size: 8px;

    letter-spacing: 2px;
}


.featured-video-info h2 {

    font-family: "Cinzel", serif;

    font-size: clamp(38px, 4vw, 55px);

    line-height: 1;

    margin: 20px 0;
}


.featured-video-info h2 span {

    display: block;

    color: var(--accent-light);
}


.featured-video-info p {

    color: var(--text-muted);

    line-height: 1.8;

    font-size: 12px;
}


.video-meta {

    display: flex;

    flex-direction: column;

    gap: 12px;

    border-top: 1px solid var(--border);

    padding-top: 20px;

    color: #777;

    font-size: 9px;
}


.video-meta i {

    color: var(--accent-light);

    margin-right: 8px;
}


/* =========================================================
   MEDIA LIBRARY
   ========================================================= */

.media-library {

    background: var(--bg-secondary);

    padding: 120px 0;
}


.media-heading {

    display: flex;

    justify-content: space-between;

    align-items: end;

    gap: 50px;

    margin-bottom: 50px;
}


.media-heading h2 {

    font-family: "Cinzel", serif;

    font-size: clamp(45px, 6vw, 75px);

    line-height: 1;

    margin-top: 15px;
}


.media-heading h2 span {

    color: var(--accent-light);
}


.media-heading > p {

    max-width: 400px;

    color: var(--text-muted);

    line-height: 1.7;
}


/* =========================================================
   FILTER BUTTONS
   ========================================================= */

.media-filters {

    display: flex;

    flex-wrap: wrap;

    gap: 10px;

    margin-bottom: 40px;
}


.media-filter {

    background: transparent;

    border: 1px solid var(--border);

    color: #888;

    padding: 11px 18px;

    text-transform: uppercase;

    font-size: 8px;

    letter-spacing: 1.5px;

    cursor: pointer;

    transition: 0.3s ease;
}


.media-filter:hover,
.media-filter.active {

    background: var(--accent);

    border-color: var(--accent);

    color: white;
}


/* =========================================================
   VIDEO GRID
   ========================================================= */

.video-grid {

    display: grid;

    grid-template-columns: repeat(3, 1fr);

    gap: 25px;
}


.video-card {

    border: 1px solid var(--border);

    background: #09090d;

    transition: 0.3s ease;
}


.video-card:hover {

    transform: translateY(-6px);

    border-color: rgba(139,92,246,0.5);
}


.video-thumbnail {

    height: 230px;

    position: relative;

    display: grid;

    place-items: center;

    background-size: cover;

    background-position: center;
}


.thumbnail-one {

    background-image:
        linear-gradient(rgba(0,0,0,0.2),rgba(0,0,0,0.45)),
        url("https://images.unsplash.com/photo-1549719386-74dfcbf7dbed?auto=format&fit=crop&w=900&q=80");
}


.thumbnail-two {

    background-image:
        linear-gradient(rgba(0,0,0,0.2),rgba(0,0,0,0.45)),
        url("https://images.unsplash.com/photo-1518611012118-696072aa579a?auto=format&fit=crop&w=900&q=80");
}


.thumbnail-three {

    background-image:
        linear-gradient(rgba(0,0,0,0.2),rgba(0,0,0,0.45)),
        url("https://images.unsplash.com/photo-1517838277536-f5f99be50105?auto=format&fit=crop&w=900&q=80");
}


.thumbnail-four {

    background-image:
        linear-gradient(rgba(0,0,0,0.2),rgba(0,0,0,0.45)),
        url("https://images.unsplash.com/photo-1555597673-b21d5c935865?auto=format&fit=crop&w=900&q=80");
}


.thumbnail-five {

    background-image:
        linear-gradient(rgba(0,0,0,0.2),rgba(0,0,0,0.45)),
        url("https://images.unsplash.com/photo-1566241142559-40e1dab266c6?auto=format&fit=crop&w=900&q=80");
}


.thumbnail-six {

    background-image:
        linear-gradient(rgba(0,0,0,0.2),rgba(0,0,0,0.45)),
        url("https://images.unsplash.com/photo-1506126613408-eca07ce68773?auto=format&fit=crop&w=900&q=80");
}


.small-play {

    width: 55px;

    height: 55px;

    border-radius: 50%;

    border: 1px solid rgba(255,255,255,0.5);

    background: rgba(0,0,0,0.65);

    color: white;

    cursor: pointer;

    transition: 0.3s ease;
}


.small-play:hover {

    transform: scale(1.1);

    background: var(--accent);

    border-color: var(--accent);
}


.video-time {

    position: absolute;

    right: 12px;

    bottom: 12px;

    background: rgba(0,0,0,0.8);

    padding: 6px 8px;

    font-size: 8px;
}


.video-card-info {

    padding: 22px;
}


.video-card-info > span {

    color: var(--accent-light);

    font-size: 8px;

    letter-spacing: 1.5px;
}


.video-card-info h3 {

    font-family: "Cinzel", serif;

    font-size: 19px;

    margin: 10px 0;
}


.video-card-info p {

    color: var(--text-muted);

    font-size: 11px;

    line-height: 1.6;
}


/* =========================================================
   YOUTUBE SECTION
   ========================================================= */

.youtube-section {

    padding: 100px 0;

    background:
        radial-gradient(
            circle at 80% 50%,
            rgba(139,92,246,0.15),
            transparent 40%
        ),
        var(--bg-dark);
}


.youtube-content {

    display: grid;

    grid-template-columns: 100px 1fr auto;

    align-items: center;

    gap: 40px;

    border: 1px solid var(--border);

    padding: 55px;
}


.youtube-icon {

    width: 75px;

    height: 75px;

    display: grid;

    place-items: center;

    border: 1px solid var(--border);

    font-size: 30px;

    color: #ff0033;
}


.youtube-content h2 {

    font-family: "Cinzel", serif;

    font-size: clamp(35px, 5vw, 60px);

    line-height: 1;

    margin: 15px 0;
}


.youtube-content h2 span {

    color: var(--accent-light);
}


.youtube-content p:not(.section-label) {

    max-width: 550px;

    color: var(--text-muted);

    line-height: 1.7;

    font-size: 12px;
}


.youtube-button {

    white-space: nowrap;

    padding: 15px 22px;

    border: 1px solid var(--border);

    color: white;

    text-decoration: none;

    text-transform: uppercase;

    letter-spacing: 1px;

    font-size: 8px;

    transition: 0.3s ease;
}


.youtube-button:hover {

    background: var(--accent);

    border-color: var(--accent);
}


.youtube-button i {

    margin-left: 10px;
}


/* =========================================================
   VIDEO MODAL
   ========================================================= */

/*

    The modal is initially invisible.

    JavaScript adds the "show" class when
    someone clicks a video.

*/

.video-modal {

    position: fixed;

    inset: 0;

    z-index: 9999;

    display: flex;

    align-items: center;

    justify-content: center;

    padding: 25px;

    background: rgba(0,0,0,0.9);

    opacity: 0;

    visibility: hidden;

    transition: 0.3s ease;
}


.video-modal.show {

    opacity: 1;

    visibility: visible;
}


.video-modal-content {

    position: relative;

    width: min(1000px, 95vw);

    aspect-ratio: 16 / 9;

    background: black;
}


.video-modal iframe {

    width: 100%;

    height: 100%;

    border: none;
}


.close-video {

    position: absolute;

    right: -45px;

    top: -45px;

    width: 40px;

    height: 40px;

    border: 1px solid rgba(255,255,255,0.3);

    background: rgba(0,0,0,0.7);

    color: white;

    cursor: pointer;

    font-size: 18px;

    z-index: 2;
}


/* =========================================================
   MEDIA RESPONSIVE
   ========================================================= */

@media (max-width: 1000px) {

    .featured-video {

        grid-template-columns: 1fr;
    }


    .featured-video-image {

        min-height: 450px;
    }


    .video-grid {

        grid-template-columns: repeat(2, 1fr);
    }


    .youtube-content {

        grid-template-columns: 70px 1fr;
    }


    .youtube-button {

        grid-column: 2;
        width: fit-content;
    }

}


@media (max-width: 700px) {

    .media-heading {

        flex-direction: column;

        align-items: flex-start;
    }


    .video-grid {

        grid-template-columns: 1fr;
    }


    .youtube-content {

        grid-template-columns: 1fr;

        padding: 35px 25px;
    }


    .youtube-button {

        grid-column: auto;
    }


    .close-video {

        right: 0;

        top: -50px;
    }

}


@media (max-width: 500px) {

    .media-hero {

        min-height: 620px;
    }


    .media-hero h1 {

        font-size: 50px;
    }


    .featured-video-image {

        min-height: 330px;
    }


    .featured-video-info {

        padding: 35px 25px;
    }


    .media-filters {

        gap: 7px;
    }


    .media-filter {

        padding: 9px 12px;
    }

}
/* =========================================================
   CONTACT PAGE
   ========================================================= */


/* =========================================================
   CONTACT HERO
   ========================================================= */

.contact-hero {

    min-height: 70vh;

    position: relative;

    display: flex;

    align-items: center;

    overflow: hidden;

    background:
        linear-gradient(
            90deg,
            rgba(5,5,7,0.96),
            rgba(5,5,7,0.35)
        ),
        url("https://images.unsplash.com/photo-1555597673-b21d5c935865?auto=format&fit=crop&w=2000&q=85");

    background-size: cover;

    background-position: center;
}


.contact-hero-content {

    width: min(92%, var(--max-width));

    margin: auto;

    padding-top: 70px;
}


.contact-hero h1 {

    font-family: "Cinzel", serif;

    font-size: clamp(55px, 9vw, 110px);

    line-height: 0.9;

    max-width: 1000px;
}


.contact-hero h1 span {

    display: block;

    color: var(--accent-light);
}


.contact-hero-content > p:last-child {

    max-width: 570px;

    color: rgba(255,255,255,0.65);

    line-height: 1.8;

    margin-top: 30px;
}


.contact-hero-mark {

    position: absolute;

    right: 5%;

    bottom: 35px;

    writing-mode: vertical-rl;

    color: rgba(255,255,255,0.15);

    letter-spacing: 8px;

    font-size: 10px;
}


/* =========================================================
   CONTACT GRID
   ========================================================= */

.contact-section {

    background: var(--bg-dark);
}


.contact-grid {

    display: grid;

    grid-template-columns: 0.8fr 1.2fr;

    gap: 80px;

    align-items: start;
}


.contact-information {

    padding-top: 20px;
}


.contact-information h2 {

    font-family: "Cinzel", serif;

    font-size: clamp(45px, 6vw, 70px);

    line-height: 0.95;

    margin: 20px 0;
}


.contact-information h2 span {

    display: block;

    color: var(--accent-light);
}


.contact-information > p {

    max-width: 470px;

    color: var(--text-muted);

    line-height: 1.8;

    font-size: 13px;
}


/* =========================================================
   CONTACT DETAILS
   ========================================================= */

.contact-details {

    margin-top: 50px;

    display: flex;

    flex-direction: column;

    gap: 28px;
}


.contact-detail {

    display: flex;

    align-items: center;

    gap: 18px;
}


.contact-icon {

    width: 48px;

    height: 48px;

    flex-shrink: 0;

    display: grid;

    place-items: center;

    border: 1px solid var(--border);

    color: var(--accent-light);
}


.contact-detail small {

    display: block;

    color: #666;

    font-size: 8px;

    letter-spacing: 2px;

    margin-bottom: 5px;
}


.contact-detail strong {

    display: block;

    font-size: 12px;

    font-weight: 600;

    margin-bottom: 4px;
}


.contact-detail span {

    display: block;

    color: #666;

    font-size: 10px;
}


/* =========================================================
   CONTACT SOCIALS
   ========================================================= */

.contact-socials {

    margin-top: 55px;

    padding-top: 25px;

    border-top: 1px solid var(--border);
}


.contact-socials > p {

    font-size: 8px;

    letter-spacing: 2px;

    color: #666;

    margin-bottom: 15px;
}


/* =========================================================
   CONTACT FORM
   ========================================================= */

.contact-form-wrapper {

    background: #09090d;

    border: 1px solid var(--border);

    padding: 50px;
}


.form-heading > span {

    color: var(--accent-light);

    font-size: 8px;

    letter-spacing: 2px;
}


.form-heading h3 {

    font-family: "Cinzel", serif;

    font-size: 30px;

    line-height: 1.1;

    margin: 15px 0 40px;
}


.form-heading h3 strong {

    color: var(--accent-light);

    display: block;
}


/* =========================================================
   FORM GROUP
   ========================================================= */

.contact-form {

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 25px;
}


.form-group {

    display: flex;

    flex-direction: column;

    gap: 10px;
}


.form-group:nth-child(5) {

    grid-column: 1 / -1;
}


.form-group label {

    color: #777;

    font-size: 8px;

    letter-spacing: 1.5px;
}


.form-group input,
.form-group select,
.form-group textarea {

    width: 100%;

    border: 1px solid var(--border);

    outline: none;

    background: #050507;

    color: white;

    padding: 15px;

    font-family: "Inter", sans-serif;

    font-size: 12px;

    transition: 0.3s ease;
}


.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {

    border-color: var(--accent);
}


.form-group textarea {

    resize: vertical;

    min-height: 140px;
}


.form-group select {

    cursor: pointer;
}


/* =========================================================
   FORM BUTTON
   ========================================================= */

.form-submit {

    margin-top: 5px;

    border: none;

    cursor: pointer;

    width: fit-content;
}


.form-note {

    grid-column: 1 / -1;

    color: #555;

    font-size: 9px;

    line-height: 1.6;
}


/* =========================================================
   TRAINING INFORMATION
   ========================================================= */

.training-info {

    padding: 100px 0;

    background: var(--bg-secondary);
}


.training-info-grid {

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 80px;

    align-items: center;
}


.training-info-grid h2 {

    font-family: "Cinzel", serif;

    font-size: clamp(45px, 6vw, 70px);

    line-height: 0.95;

    margin-top: 20px;
}


.training-info-grid h2 span {

    display: block;

    color: var(--accent-light);
}


.training-schedule {

    border-top: 1px solid var(--border);
}


.schedule-row {

    display: flex;

    justify-content: space-between;

    gap: 20px;

    padding: 22px 0;

    border-bottom: 1px solid var(--border);

    font-size: 9px;

    letter-spacing: 1px;
}


.schedule-row span {

    color: #666;
}


.schedule-row strong {

    color: white;

    font-weight: 500;
}


/* =========================================================
   FINAL CTA
   ========================================================= */

.contact-final-cta {

    min-height: 650px;

    display: flex;

    align-items: center;

    position: relative;

    overflow: hidden;

    background:
        radial-gradient(
            circle at 70% 50%,
            rgba(139,92,246,0.20),
            transparent 35%
        ),
        linear-gradient(
            135deg,
            #08080c,
            #050507
        );
}


.contact-final-content {

    max-width: 850px;
}


.contact-final-content h2 {

    font-family: "Cinzel", serif;

    font-size: clamp(55px, 8vw, 105px);

    line-height: 0.9;

    margin: 25px 0;
}


.contact-final-content h2 span {

    display: block;

    color: var(--accent-light);
}


.contact-final-content > p:not(.hero-small-text) {

    color: var(--text-muted);

    max-width: 500px;

    line-height: 1.8;

    margin-bottom: 30px;
}


/* =========================================================
   CONTACT RESPONSIVE
   ========================================================= */

@media (max-width: 1000px) {

    .contact-grid {

        grid-template-columns: 1fr;

        gap: 60px;
    }


    .training-info-grid {

        grid-template-columns: 1fr;

        gap: 50px;
    }

}


@media (max-width: 700px) {

    .contact-hero {

        min-height: 620px;
    }


    .contact-hero h1 {

        font-size: 50px;
    }


    .contact-form-wrapper {

        padding: 30px 22px;
    }


    .contact-form {

        grid-template-columns: 1fr;
    }


    .form-group:nth-child(5) {

        grid-column: auto;
    }


    .form-note {

        grid-column: auto;
    }


    .schedule-row {

        flex-direction: column;

        gap: 8px;
    }

}


@media (max-width: 500px) {

    .contact-hero-mark {

        display: none;
    }


    .contact-information h2 {

        font-size: 45px;
    }


    .contact-final-cta {

        min-height: 550px;
    }


    .contact-final-content h2 {

        font-size: 48px;
    }

}

/* =====================================================
   UPCOMING EVENTS
   ===================================================== */

.events-preview {
    padding: 130px 0;
    background: #090b0d;
}


.events-grid {
    display: grid;

    grid-template-columns: repeat(3, 1fr);

    margin-top: 65px;

    border-top: 1px solid rgba(255,255,255,0.1);
}


.event-card {
    display: grid;

    grid-template-columns: 75px 1fr;

    gap: 25px;

    padding: 35px 25px;

    border-bottom: 1px solid rgba(255,255,255,0.1);

    border-right: 1px solid rgba(255,255,255,0.1);
}


.event-card:last-child {
    border-right: none;
}


.event-date {
    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    height: 75px;

    border: 1px solid rgba(255,255,255,0.15);

    border-radius: 10px;
}


.event-date strong {
    color: #fff;

    font-size: 25px;

    line-height: 1;
}


.event-date span {
    margin-top: 5px;

    color: rgba(255,255,255,0.4);

    font-size: 9px;

    letter-spacing: 2px;
}


.event-type {
    color: rgba(255,255,255,0.4);

    font-size: 9px;

    font-weight: 700;

    letter-spacing: 2px;
}


.event-info h3 {
    margin: 12px 0;

    color: #fff;

    font-size: 20px;

    line-height: 1.25;
}


.event-info p {
    color: rgba(255,255,255,0.5);

    font-size: 13px;

    line-height: 1.6;
}


.event-location {
    display: block;

    margin-top: 18px;

    color: rgba(255,255,255,0.35);

    font-size: 11px;
}


/* =====================================================
   JOIN UDO OGU
   ===================================================== */

.join-section {
    padding: 130px 0;

    background: #0d1012;
}


.join-grid {
    display: grid;

    grid-template-columns: repeat(3, 1fr);

    margin-top: 65px;
}


.join-card {
    position: relative;

    min-height: 300px;

    padding: 35px;

    border: 1px solid rgba(255,255,255,0.08);

    color: #fff;

    text-decoration: none;

    transition:
        background 0.3s ease,
        transform 0.3s ease;
}


.join-card:hover {
    background: rgba(255,255,255,0.04);

    transform: translateY(-6px);
}


.join-card > span {
    color: rgba(255,255,255,0.3);

    font-size: 11px;
}


.join-card h3 {
    margin-top: 80px;

    font-size: 25px;
}


.join-card p {
    max-width: 300px;

    color: rgba(255,255,255,0.5);

    font-size: 13px;

    line-height: 1.7;
}


.join-card > i {
    position: absolute;

    right: 30px;
    bottom: 30px;

    color: rgba(255,255,255,0.4);
}


/* =====================================================
   NEWS
   ===================================================== */

.news-section {
    padding: 130px 0;

    background: #090b0d;
}


.news-grid {
    display: grid;

    grid-template-columns: repeat(3, 1fr);

    gap: 20px;

    margin-top: 65px;
}


.news-card {
    background: #101316;

    border: 1px solid rgba(255,255,255,0.07);

    overflow: hidden;
}


.news-image {
    aspect-ratio: 16 / 10;

    overflow: hidden;

    background: #171a1c;
}


.news-image img {
    width: 100%;
    height: 100%;

    object-fit: cover;

    transition: transform 0.5s ease;
}


.news-card:hover .news-image img {
    transform: scale(1.05);
}


.news-content {
    padding: 28px;
}


.news-content > span {
    color: rgba(255,255,255,0.4);

    font-size: 9px;

    font-weight: 700;

    letter-spacing: 2px;
}


.news-content h3 {
    margin: 15px 0;

    color: #fff;

    font-size: 21px;

    line-height: 1.3;
}


.news-content p {
    color: rgba(255,255,255,0.5);

    font-size: 13px;

    line-height: 1.7;
}


.news-content a {
    display: inline-flex;

    gap: 10px;

    margin-top: 15px;

    color: #fff;

    font-size: 11px;

    font-weight: 700;

    text-decoration: none;

    text-transform: uppercase;

    letter-spacing: 1px;
}


/* =====================================================
   VIDEO
   ===================================================== */

.video-section {
    position: relative;

    min-height: 650px;

    display: flex;

    align-items: center;

    overflow: hidden;
}


.video-background {
    position: absolute;

    inset: 0;

    background: #080a0c;
}


.video-placeholder {
    width: 100%;
    height: 100%;

    display: grid;

    place-items: center;

    background:
        radial-gradient(
            circle,
            rgba(255,255,255,0.08),
            transparent 45%
        );
}


.video-placeholder i {
    width: 80px;
    height: 80px;

    display: grid;

    place-items: center;

    border: 1px solid rgba(255,255,255,0.3);

    border-radius: 50%;

    color: #fff;

    font-size: 22px;
}


.video-overlay {
    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            90deg,
            rgba(5,7,8,0.95),
            rgba(5,7,8,0.55),
            rgba(5,7,8,0.35)
        );
}


.video-content {
    position: relative;

    z-index: 2;

    width: min(650px, 90%);

    margin-left: 7%;
}


.video-content h2 {
    color: #fff;

    font-size: clamp(45px, 6vw, 80px);

    line-height: 0.98;

    letter-spacing: -3px;
}


.video-content h2 span {
    display: block;

    color: rgba(255,255,255,0.45);
}


.video-content > p:not(.section-label) {
    max-width: 550px;

    margin: 30px 0;

    color: rgba(255,255,255,0.6);

    line-height: 1.8;
}


/* =====================================================
   FINAL CTA
   ===================================================== */

.final-cta {
    padding: 160px 20px;

    background: #ffffff;

    text-align: center;
}


.final-cta-content {
    max-width: 900px;

    margin: 0 auto;
}


.final-cta .section-label {
    color: rgba(0,0,0,0.4);
}


.final-cta h2 {
    margin: 0;

    color: #090b0d;

    font-size: clamp(45px, 7vw, 90px);

    line-height: 0.95;

    letter-spacing: -4px;
}


.final-cta h2 span {
    display: block;

    color: rgba(0,0,0,0.35);
}


.final-cta p:not(.section-label) {
    max-width: 600px;

    margin: 30px auto;

    color: rgba(0,0,0,0.55);

    line-height: 1.7;
}


/*
    The primary button was designed for the dark
    sections, so we give it a dark version here.
*/

.final-cta .btn-primary {
    background: #090b0d;

    color: #fff;
}


.final-cta .btn-primary:hover {
    background: #202326;
}


.final-cta .btn-outline {
    border-color: rgba(0,0,0,0.2);

    color: #090b0d;

    background: transparent;
}


.final-cta .btn-outline:hover {
    background: rgba(0,0,0,0.05);
}