/* =========================================================
   ZENITH KARATE ACADEMY
   GLOBAL DESIGN STYLES
========================================================= */


/* =========================================================
   GLOBAL RESET
========================================================= */

html {

    scroll-behavior:
        smooth;

    overflow-x:
        hidden;

}


* {

    box-sizing:
        border-box;

    user-select:
        none;

    -webkit-user-drag:
        none;

}


html,
body {

    width:
        100%;

    max-width:
        100%;

    overflow-x:
        hidden;

}


body {

    margin:
        0;

    min-width:
        0;

    background-color:
        rgb(
            8,
            8,
            8
        );

    color:
        white;

    font-family:
        'Trebuchet MS',
        'Lucida Sans Unicode',
        'Lucida Grande',
        'Lucida Sans',
        Arial,
        sans-serif;

    overflow-x:
        hidden;

}


a {

    color:
        inherit;

    text-decoration:
        none;

}


img {

    display:
        block;

    max-width:
        100%;

    height:
        auto;

}


input,
textarea,
select {

    user-select:
        text;

    -webkit-user-select:
        text;

}


button,
input,
textarea,
select {

    font:
        inherit;

}


/* =========================================================
   ZENITH TYPOGRAPHY
========================================================= */

.zenith {

    font-family:
        'Bebas Neue',
        sans-serif;

    font-weight:
        900;

    background-image:
        linear-gradient(
            135deg,
            #d35c25 0%,
            #fdb203 50%,
            #c2ad35 100%
        );

    -webkit-background-clip:
        text;

    background-clip:
        text;

    -webkit-text-fill-color:
        transparent;

}


.sectionTitle {

    font-weight:
        900;

    text-transform:
        uppercase;

    background-image:
        linear-gradient(
            135deg,
            #ee4060 0%,
            #fa073c 50%,
            #a50527 100%
        ) !important;

    -webkit-background-clip:
        text;

    background-clip:
        text;

    -webkit-text-fill-color:
        transparent;

}


/* =========================================================
   SHARED SHOTOKAN EMBLEM
========================================================= */

.shotokanEmblem {

    position:
        fixed;

    width:
        min(
            35vw,
            40rem
        );

    height:
        auto;

    right:
        clamp(
            -10rem,
            -8vw,
            -4rem
        );

    top:
        10rem;

    z-index:
        0;

    pointer-events:
        none;

    filter:
        invert(42%)
        sepia(55%)
        saturate(1069%)
        hue-rotate(2deg)
        brightness(54%)
        contrast(96%);

}


/* =========================================================
   GLOBAL ANIMATIONS
========================================================= */

@keyframes rippleEffect {

    0% {

        width:
            0;

        height:
            0;

        opacity:
            1;

    }

    100% {

        width:
            100px;

        height:
            100px;

        opacity:
            0;

    }

}


@keyframes slideIn {

    0% {

        opacity:
            0;

        transform:
            translateX(
                -6rem
            );

    }

    100% {

        opacity:
            1;

        transform:
            translateX(
                0
            );

    }

}


@keyframes tertiaryTextGlow {

    0% {

        box-shadow:
            0
            0
            10px
            rgba(
                230,
                15,
                50,
                0.3
            ),
            0
            0
            25px
            rgba(
                230,
                15,
                50,
                0.1
            );

    }

    50% {

        box-shadow:
            0
            0
            20px
            rgba(
                230,
                15,
                50,
                1
            ),
            0
            0
            45px
            rgba(
                230,
                15,
                50,
                0.5
            );

    }

    100% {

        box-shadow:
            0
            0
            10px
            rgba(
                230,
                15,
                50,
                0.5
            ),
            0
            0
            25px
            rgba(
                230,
                15,
                50,
                0.2
            );

    }

}


@keyframes pulseLogo {

    0%,
    100% {

        transform:
            scale(
                1
            );

        filter:
            drop-shadow(
                0
                0
                25px
                rgba(
                    230,
                    15,
                    50,
                    0
                )
            );

    }

    50% {

        transform:
            scale(
                1.08
            );

        filter:
            drop-shadow(
                0
                0
                25px
                rgba(
                    230,
                    15,
                    50,
                    0.6
                )
            );

    }

}


/* =========================================================
   SCROLL REVEAL
========================================================= */

.slide-animation {

    opacity:
        0;

    transform:
        translateX(
            -6rem
        );

    visibility:
        hidden;

}


.slide-animation.reveal-active {

    visibility:
        visible;

    animation:
        slideIn
        0.8s
        ease-out
        forwards;

}


/* =========================================================
   ANIMATION DELAYS
========================================================= */

.primaryTitleText1,
.titleText {

    animation-delay:
        0.1s;

}


.primaryTitleText2,
.secondaryInfoText {

    animation-delay:
        0.3s;

}


.secondaryTitleText,
.informationDescription {

    animation-delay:
        0.4s;

}


.descriptionText {

    animation-delay:
        0.6s;

}


.homeAboutButton {

    animation-delay:
        1s;

}


.homeTimetableButton {

    animation-delay:
        1.5s;

}


/* =========================================================
   CLICK RIPPLE
========================================================= */

.click-ripple {

    position:
        fixed;

    width:
        0;

    height:
        0;

    border:
        3px
        solid
        #e09810;

    border-radius:
        50%;

    pointer-events:
        none;

    transform:
        translate(
            -50%,
            -50%
        );

    animation:
        rippleEffect
        0.6s
        ease-out
        forwards;

    z-index:
        3000;

}


/* =========================================================
   HOMEPAGE
========================================================= */

.home {

    position:
        relative;

    width:
        100%;

    min-height:
        100vh;

    min-height:
        100dvh;

    display:
        flex;

    flex-direction:
        column;

    justify-content:
        center;

    align-items:
        flex-start;

    padding:
        clamp(
            7rem,
            12vh,
            9rem
        )
        clamp(
            1.5rem,
            8vw,
            6.875rem
        )
        4rem;

    background-image:
        url(
            "/images/HomepageImage.png"
        );

    background-size:
        cover;

    background-repeat:
        no-repeat;

    background-position:
        center;

    overflow:
        hidden;

}


.home::before {

    content:
        "";

    position:
        absolute;

    inset:
        0;

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

    z-index:
        1;

}


.home > * {

    position:
        relative;

    z-index:
        2;

}


.home .button-group {

    display:
        flex;

    flex-wrap:
        wrap;

    gap:
        1.25rem;

    margin-top:
        2rem;

}


.home .secondaryTitleText {

    margin-bottom:
        0.5rem;

    color:
        rgb(
            230,
            15,
            50
        );

    font-size:
        clamp(
            1rem,
            2vw,
            1.25rem
        );

    font-weight:
        550;

    letter-spacing:
        0.1125rem;

}


.home .primaryTitleText1 {

    color:
        white;

    font-family:
        'Bebas Neue',
        sans-serif;

    font-size:
        clamp(
            3rem,
            8vw,
            6.25rem
        );

    font-weight:
        700;

    line-height:
        1;

}


.home .primaryTitleText2 {

    margin-bottom:
        1.5rem;

    color:
        rgb(
            223,
            26,
            26
        );

    font-family:
        'Bebas Neue',
        sans-serif;

    font-size:
        clamp(
            4rem,
            11vw,
            8.75rem
        );

    font-weight:
        900;

    line-height:
        0.9;

}


.home .descriptionText {

    max-width:
        31.875rem;

    color:
        white;

    font-size:
        clamp(
            1rem,
            1.8vw,
            1.25rem
        );

    font-style:
        italic;

    letter-spacing:
        0.0625rem;

    line-height:
        1.6;

}


.home .tertiaryText {

    margin-bottom:
        2rem;

    padding-inline:
        1rem;

    color:
        rgb(
            248,
            184,
            22
        );

    background-color:
        rgba(
            22,
            21,
            21,
            0.959
        );

    border:
        0.125rem
        solid;

    border-radius:
        2rem;

    font-size:
        clamp(
            0.5rem,
            4vw,
            1rem
        );

    font-weight:
        bolder;

    letter-spacing:
        0.2rem;

    line-height:
        2rem;

    animation:
        tertiaryTextGlow
        1.5s
        ease-in-out
        infinite;

}


.home .homeAboutButton,
.home .homeTimetableButton {

    height:
        3.125rem;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    color:
        white;

    font-size:
        1.0625rem;

    cursor:
        pointer;

    transition:
        0.2s
        all
        ease;

}


.home .homeAboutButton {

    width:
        15.625rem;

    background-color:
        rgba(
            230,
            22,
            22,
            0.747
        );

    border:
        3px
        solid
        rgba(
            230,
            22,
            22,
            0.447
        );

}


.home .homeAboutButton:hover {

    color:
        rgba(
            230,
            22,
            22,
            0.747
        );

    background:
        white;

}


.home .homeTimetableButton {

    width:
        11.25rem;

    background-color:
        rgba(
            247,
            184,
            9,
            0.747
        );

    border:
        3px
        solid
        rgba(
            247,
            184,
            9,
            1
        );

}


.home .homeTimetableButton:hover {

    color:
        rgba(
            247,
            184,
            9,
            1
        );

    background:
        white;

}


/* =========================================================
   WHY JOIN US
========================================================= */

.why-join-us {

    position:
        relative;

    width:
        100%;

    min-height:
        80vh;

    display:
        flex;

    flex-direction:
        column;

    padding-top:
        clamp(
            5rem,
            12vh,
            10rem
        );

    background-size:
        cover;

    background-repeat:
        no-repeat;

    background-position:
        center;

    overflow:
        hidden;

}


.why-join-us .information {

    width:
        min(
            100%,
            80rem
        );

    display:
        flex;

    flex-direction:
        column;

    margin:
        0
        auto;

    padding-inline:
        clamp(
            1.5rem,
            8vw,
            6.875rem
        );

}


.why-join-us .information .titleText {

    margin-bottom:
        0.5rem;

    font-family:
        'Bebas Neue',
        sans-serif;

    font-size:
        clamp(
            2rem,
            4vw,
            3.5rem
        );

    font-weight:
        900;

    letter-spacing:
        0.125rem;

    line-height:
        1;

}


.why-join-us .information .secondaryInfoText {

    margin:
        0
        0
        0.75rem;

    color:
        white;

    font-family:
        'Arial Black',
        Arial,
        sans-serif;

    font-size:
        clamp(
            1.3rem,
            2.5vw,
            2.2rem
        );

    font-weight:
        900;

    letter-spacing:
        0.05rem;

    line-height:
        1.2;

}


.why-join-us .information .informationDescription {

    max-width:
        38rem;

    margin:
        0;

    color:
        white;

    font-family:
        Arial,
        sans-serif;

    font-size:
        clamp(
            1rem,
            1.5vw,
            1.2rem
        );

    font-style:
        italic;

    letter-spacing:
        0.05rem;

    line-height:
        1.6;

}


.why-join-us .cards {

    width:
        min(
            100%,
            80rem
        );

    display:
        flex;

    align-items:
        stretch;

    justify-content:
        center;

    flex-wrap:
        wrap;

    margin:
        clamp(
            5rem,
            14vw,
            20rem
        )
        auto
        4rem;

    padding-inline:
        clamp(
            1rem,
            5vw,
            2rem
        );

    color:
        white;

    z-index:
        1;

}


.why-join-us .cards
.tradition,
.why-join-us .cards
.respect,
.why-join-us .cards
.focus,
.why-join-us .cards
.excellence {

    display:
        flex;

    flex:
        1 1
        16rem;

    flex-direction:
        column;

    align-items:
        center;

    justify-content:
        flex-start;

    padding:
        2.5rem
        1rem;

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

}


.why-join-us .cards .tradition {

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

}


.why-join-us .cards .title {

    margin:
        0
        0
        1rem;

    font-size:
        clamp(
            1.25rem,
            2vw,
            1.75rem
        );

    font-weight:
        700;

    letter-spacing:
        0.2rem;

    text-transform:
        uppercase;

}


.why-join-us .cards p {

    margin:
        0;

    color:
        #b3b3b3;

    font-size:
        0.9rem;

    letter-spacing:
        0.05rem;

    line-height:
        1.6;

    text-align:
        center;

}


.why-join-us .cards .icon {

    width:
        auto;

    margin-bottom:
        1rem;

    padding:
        0;

    flex-shrink:
        0;

    background:
        transparent;

    font-size:
        clamp(
            3rem,
            3vw,
            7rem
        );

    object-fit:
        contain;

}


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

.training {

    position:
        relative;

    width:
        100%;

    min-height:
        80vh;

    display:
        flex;

    flex-direction:
        column;

    align-items:
        flex-end;

    margin-top:
        15vh;

    padding-bottom:
        5rem;

    overflow:
        hidden;

}


.training .information {

    width:
        100%;

    display:
        flex;

    flex-direction:
        column;

    align-items:
        flex-end;

    padding-right:
        clamp(
            1.5rem,
            8vw,
            6.875rem
        );

    text-align:
        right;

    z-index:
        2;

}


.training .information .titleText {

    margin-bottom:
        0.5rem;

    font-family:
        'Bebas Neue',
        sans-serif;

    font-size:
        clamp(
            2rem,
            4vw,
            3.5rem
        );

    font-weight:
        900;

    letter-spacing:
        0.125rem;

    line-height:
        1;

}


.training .information .secondaryInfoText {

    margin:
        0
        0
        0.75rem;

    color:
        white;

    font-family:
        'Arial Black',
        Arial,
        sans-serif;

    font-size:
        clamp(
            1.3rem,
            2.5vw,
            2.2rem
        );

    font-weight:
        900;

    letter-spacing:
        0.05rem;

    line-height:
        1.2;

}


.training .information .informationDescription {

    max-width:
        38rem;

    margin:
        0;

    align-self:
        flex-end;

    color:
        #cccccc;

    font-family:
        Arial,
        sans-serif;

    font-size:
        clamp(
            1rem,
            1.5vw,
            1.2rem
        );

    font-style:
        italic;

    letter-spacing:
        0.05rem;

    line-height:
        1.6;

}


.training .cards {

    width:
        100%;

    display:
        flex;

    flex-direction:
        row;

    align-items:
        stretch;

    justify-content:
        center;

    flex-wrap:
        wrap;

    gap:
        2rem;

    margin:
        5rem
        auto
        4rem;

    padding-inline:
        clamp(
            1.5rem,
            5vw,
            3rem
        );

    z-index:
        1;

}


.training .cards
.kihon,
.training .cards
.kata,
.training .cards
.kumite,
.training .cards
.conditioning {

    flex:
        1 1
        18rem;

    min-height:
        18rem;

    display:
        flex;

    flex-direction:
        column;

    align-items:
        center;

    justify-content:
        flex-start;

    padding-bottom:
        2rem;

    overflow:
        hidden;

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

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

    border-radius:
        1rem;

    backdrop-filter:
        blur(
            12px
        );

    -webkit-backdrop-filter:
        blur(
            12px
        );

    transition:
        transform
        0.3s
        cubic-bezier(
            0.25,
            0.8,
            0.25,
            1
        ),
        border-color
        0.3s
        ease;

}


.training .cards
.kihon:hover,
.training .cards
.kata:hover,
.training .cards
.kumite:hover,
.training .cards
.conditioning:hover {

    transform:
        translateY(
            -8px
        );

    border-color:
        rgba(
            230,
            15,
            50,
            0.4
        );

    box-shadow:
        0
        15px
        30px
        rgba(
            90,
            66,
            66,
            0.5
        );

}


.training .cards .title {

    width:
        100%;

    min-height:
        4rem;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    margin:
        0
        0
        1.5rem;

    color:
        white;

    font-family:
        'Bebas Neue',
        sans-serif;

    font-size:
        clamp(
            1.25rem,
            2vw,
            1.55rem
        );

    font-weight:
        700;

    letter-spacing:
        0.2rem;

    text-align:
        center;

    text-transform:
        uppercase;

    background:
        linear-gradient(
            135deg,
            #B45309 0%,
            #D97706 50%,
            #FBBF24 100%
        );

    border-bottom:
        2px
        solid
        rgba(
            0,
            0,
            0,
            0.2
        );

}


.training .cards p {

    margin:
        0;

    padding:
        0
        1.5rem;

    color:
        #e0e0e0;

    font-family:
        Arial,
        sans-serif;

    font-size:
        0.9rem;

    letter-spacing:
        0.04rem;

    line-height:
        1.6;

    text-align:
        center;

}


/* =========================================================
   STATS
========================================================= */

.stats {

    position:
        relative;

    width:
        100%;

    min-height:
        70vh;

    display:
        flex;

    flex-direction:
        column;

    align-items:
        center;

    overflow:
        hidden;

}


.stats .information {

    width:
        min(
            100%,
            60rem
        );

    display:
        flex;

    flex-direction:
        column;

    align-items:
        center;

    padding-inline:
        1.5rem;

    text-align:
        center;

    z-index:
        2;

}


.stats .information .titleText {

    margin-bottom:
        0.5rem;

    font-family:
        'Bebas Neue',
        sans-serif;

    font-size:
        clamp(
            2rem,
            4vw,
            3.5rem
        );

    font-weight:
        900;

    letter-spacing:
        0.125rem;

    line-height:
        1;

}


.stats .information .secondaryInfoText {

    margin:
        0
        0
        0.75rem;

    color:
        white;

    font-family:
        'Arial Black',
        Arial,
        sans-serif;

    font-size:
        clamp(
            1.3rem,
            2.5vw,
            2.2rem
        );

    font-weight:
        900;

    letter-spacing:
        0.05rem;

    line-height:
        1.2;

}


.stats .information .informationDescription {

    max-width:
        38rem;

    margin:
        0;

    color:
        #cccccc;

    font-family:
        Arial,
        sans-serif;

    font-size:
        clamp(
            1rem,
            1.5vw,
            1.2rem
        );

    font-style:
        italic;

    letter-spacing:
        0.05rem;

    line-height:
        1.6;

}


.stats .cards {

    width:
        100%;

    max-width:
        100rem;

    display:
        flex;

    align-items:
        stretch;

    justify-content:
        center;

    flex-wrap:
        wrap;

    margin:
        5rem
        auto
        4rem;

    padding-inline:
        clamp(
            1.5rem,
            5vw,
            3rem
        );

    z-index:
        1;

}


.stats .cards
.active-students,
.stats .cards
.awards,
.stats .cards
.experience,
.stats .cards
.tournaments {

    flex:
        1 1
        18rem;

    min-width:
        0;

    display:
        flex;

    flex-direction:
        column;

    align-items:
        center;

    justify-content:
        center;

    min-height:
        14rem;

    padding:
        2rem
        2.5rem;

    overflow:
        hidden;

    text-align:
        center;

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

    transition:
        transform
        0.3s
        cubic-bezier(
            0.25,
            0.8,
            0.25,
            1
        );

}


.stats .cards
.active-students:hover,
.stats .cards
.awards:hover,
.stats .cards
.experience:hover,
.stats .cards
.tournaments:hover {

    transform:
        translateY(
            -8px
        );

}


.stats .cards .title {

    width:
        100%;

    min-height:
        4rem;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    margin:
        0
        0
        0.2rem;

    color:
        white;

    font-family:
        'Bebas Neue',
        sans-serif;

    font-size:
        clamp(
            1.25rem,
            3vw,
            3rem
        );

    font-weight:
        800;

    letter-spacing:
        0.2rem;

    text-align:
        center;

    text-transform:
        uppercase;

    background:
        linear-gradient(
            135deg,
            #B45309 0%,
            #D97706 50%,
            #FBBF24 100%
        );

    background-clip:
        text;

    -webkit-background-clip:
        text;

    -webkit-text-fill-color:
        transparent;

}


.stats .cards p {

    width:
        100%;

    margin:
        0;

    padding:
        0
        1rem;

    color:
        #e0e0e0;

    font-size:
        1.2rem;

    letter-spacing:
        0.04rem;

    line-height:
        1.6;

    text-align:
        center;

}


/* =========================================================
   INSTRUCTOR SECTION
========================================================= */

.meet-our-instructor {
    position: relative;
    width: 100%;
    min-height: 90vh;

    display: flex;
    align-items: center;
    justify-content: center;

    padding:
        clamp(5rem, 10vh, 8rem)
        clamp(1.5rem, 8vw, 6.875rem);

    overflow: hidden;
}

.meet-our-instructor .container {
    width: min(100%, 80rem);
    margin: 0 auto;
}

.meet-our-instructor .instructor-information {
    width: 100%;

    display: flex;
    flex-direction: column;
}


/* =========================================================
   SECTION TITLE
========================================================= */

.meet-our-instructor .instructor-information > .sectionTitle {
    margin-bottom: 3rem;

    font-family: 'Bebas Neue', sans-serif;
    font-size: clamp(2rem, 4vw, 3.5rem);
    font-weight: 900;

    letter-spacing: 0.125rem;
    line-height: 1;

    text-align: left;
}


/* =========================================================
   PROFILE
========================================================= */

.instructor-profile {
    display: flex;
    align-items: center;
    justify-content: center;

    gap: clamp(3rem, 2vw, 5rem);

    width: 100%;
}


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

.instructor-image {
    flex: 0 0 auto;

    width: clamp(16rem, 30vw, 25rem);

    display: flex;
    align-items: center;
    justify-content: center;
}

.instructor-image img {
    display: block;

    width: 100%;
    height: auto;

    object-fit: contain;

    filter:
        drop-shadow(
            0 1.5rem 2.5rem
            rgba(0, 0, 0, 0.5)
        );
}


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

.instructor-details {
    flex: 1;

    display: flex;
    flex-direction: column;
    justify-content: center;

    max-width: 25rem;

    text-align: left;
}

.instructor-details .secondaryInfoText {
    margin-bottom: 0.75rem;

    color: rgb(255, 255, 255);

    font-family: 'Arial Black', Arial, sans-serif;
    font-size: clamp(1.4rem, 3vw, 2rem);

    line-height: 1.2;
}

.instructor-details .title {
    margin-bottom: 0.35rem;

    color: rgb(224, 178, 24);

    font-size: clamp(1rem, 1.5vw, 1.3rem);
    font-family: 'Arial Black', Arial, sans-serif;

    letter-spacing: 0.04rem;
}

.instructor-details p {
    margin: 1.5rem 0 0;

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

    font-size: clamp(1rem, 1.5vw, 1.1rem);
    line-height: 1.75;
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 900px) {

    .instructor-profile {
        gap: 3rem;
    }

    .instructor-image {
        width: clamp(14rem, 35vw, 20rem);
    }
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 700px) {

    .meet-our-instructor {
        padding-inline: 1rem;
    }

    .meet-our-instructor .instructor-information > .sectionTitle {
        margin-bottom: 2.5rem;
    }

    .instructor-profile {
        flex-direction: column;

        gap: 2rem;

        text-align: center;
    }

    .instructor-image {
        width: min(75vw, 20rem);
    }

    .instructor-details {
        align-items: center;

        max-width: 32rem;

        text-align: center;
    }

    .instructor-details p {
        margin-top: 1.25rem;
    }
}


/* =========================================================
   REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

    .instructor-image img {
        transition: none;
    }
}


/* =========================================================
   LOGIN
========================================================= */

.login {

    position:
        relative;

    width:
        100%;

    min-height:
        100vh;

    min-height:
        100dvh;

    display:
        flex;

    align-items:
        flex-start;

    justify-content:
        center;

    padding:
        0
        clamp(
            1rem,
            4vw,
            3rem
        );

    background:
        #080808;

    overflow:
        hidden;

}


.login .login-title {

    position:
        absolute;

    top:
        clamp(
            2rem,
            5vh,
            4rem
        );

    left:
        50%;

    transform:
        translateX(
            -50%
        );

    display:
        flex;

    flex-direction:
        column;

    align-items:
        center;

    justify-content:
        center;

    max-width:
        calc(
            100% - 2rem
        );

    text-align:
        center;

    white-space:
        nowrap;

}


.login .login-title .zenith {

    font-size:
        clamp(
            3rem,
            5vw,
            5rem
        );

    letter-spacing:
        2px;

}


.login .login-title .secondaryText {

    margin-top:
        0.3rem;

    color:
        rgb(
            201,
            17,
            17
        );

    font-size:
        clamp(
            1rem,
            2vw,
            2rem
        );

    font-weight:
        800;

    letter-spacing:
        2px;

}


.login .login-content {

    position:
        absolute;

    top:
        55%;

    left:
        50%;

    transform:
        translate(
            -50%,
            -50%
        );

    width:
        min(
            90%,
            75rem
        );

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        clamp(
            2rem,
            6vw,
            7rem
        );

}


.login .login-info {

    width:
        min(
            100%,
            25rem
        );

    display:
        flex;

    flex-direction:
        column;

    align-items:
        flex-end;

    text-align:
        right;

}


.login .login-info .login-label {

    margin-bottom:
        1rem;

    color:
        #fdb203;

    font-size:
        0.75rem;

    font-weight:
        700;

    letter-spacing:
        4px;

}


.login .login-info h2 {

    margin:
        0;

    color:
        white;

    font-size:
        clamp(
            2rem,
            4vw,
            4rem
        );

    line-height:
        0.95;

    letter-spacing:
        2px;

}


.login .login-info p {

    max-width:
        22rem;

    margin:
        1.5rem
        0
        0;

    color:
        #888;

    font-size:
        0.9rem;

    line-height:
        1.7;

}


.login .divider {

    width:
        3px;

    height:
        24rem;

    flex-shrink:
        0;

    background-image:
        linear-gradient(
            180deg,
            transparent 0%,
            #d35c25 20%,
            #fdb203 50%,
            #c2ad35 80%,
            transparent 100%
        );

    box-shadow:
        0
        0
        10px
        rgba(
            253,
            178,
            3,
            0.5
        ),
        0
        0
        30px
        rgba(
            211,
            92,
            37,
            0.25
        );

}


.login .login-card {

    width:
        min(
            100%,
            26rem
        );

    padding:
        clamp(
            1.25rem,
            3vw,
            2rem
        );

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

    border:
        1px
        solid
        #292929;

    border-radius:
        5px;

    box-shadow:
        0
        20px
        50px
        rgba(
            0,
            0,
            0,
            0.5
        );

    backdrop-filter:
        blur(
            10px
        );

    -webkit-backdrop-filter:
        blur(
            10px
        );

}


.login-card-header {

    margin-bottom:
        1.5rem;

    text-align:
        center;

}


.login-card-header h2 {

    margin:
        0;

    color:
        white;

    font-size:
        1.5rem;

    letter-spacing:
        3px;

}


.login-card-header p {

    margin:
        0.5rem
        0
        0;

    color:
        #777;

    font-size:
        0.85rem;

}


.login-type {

    width:
        100%;

    display:
        flex;

    margin-bottom:
        1.5rem;

    border:
        1px
        solid
        #333;

}


.login-type-btn {

    flex:
        1;

    min-width:
        0;

    padding:
        0.8rem;

    border:
        none;

    background:
        transparent;

    color:
        #777;

    font-size:
        0.75rem;

    font-weight:
        700;

    letter-spacing:
        1px;

    cursor:
        pointer;

    transition:
        0.25s
        ease;

}


.login-type-btn:hover {

    color:
        white;

}


.login-type-btn.active {

    background:
        rgb(
            201,
            17,
            17
        );

    color:
        white;

}


.input-group {

    display:
        flex;

    flex-direction:
        column;

    margin-bottom:
        1.2rem;

}


.input-group label {

    margin-bottom:
        0.5rem;

    color:
        #ddd;

    font-size:
        0.7rem;

    font-weight:
        700;

    letter-spacing:
        1px;

}


.input-group input {

    width:
        100%;

    padding:
        0.9rem
        1rem;

    background:
        #0b0b0b;

    border:
        1px
        solid
        #333;

    border-radius:
        3px;

    outline:
        none;

    color:
        white;

    font-size:
        0.9rem;

    user-select:
        text;

    -webkit-user-select:
        text;

    transition:
        0.25s
        ease;

}


.input-group input::placeholder {

    color:
        #555;

}


.input-group input:focus {

    border-color:
        rgb(
            201,
            17,
            17
        );

    box-shadow:
        0
        0
        0
        2px
        rgba(
            201,
            17,
            17,
            0.12
        );

}


.login-options {

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        1rem;

    margin-bottom:
        1.5rem;

    font-size:
        0.7rem;

}


.login-options label {

    display:
        flex;

    align-items:
        center;

    gap:
        0.4rem;

    min-width:
        0;

    color:
        #777;

    cursor:
        pointer;

}


.login-options a {

    color:
        rgb(
            201,
            17,
            17
        );

    white-space:
        nowrap;

    transition:
        0.2s
        ease;

}


.login-options a:hover {

    color:
        #fdb203;

}


.login-button {

    width:
        100%;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        1rem;

    padding:
        1rem;

    border:
        none;

    background:
        linear-gradient(
            135deg,
            #a80e0e,
            #c91111
        );

    color:
        white;

    font-size:
        0.8rem;

    font-weight:
        800;

    letter-spacing:
        2px;

    cursor:
        pointer;

    transition:
        0.25s
        ease;

}


.login-button span {

    font-size:
        1.2rem;

    transition:
        transform
        0.25s
        ease;

}


.login-button:hover {

    background:
        linear-gradient(
            135deg,
            #c91111,
            #e51a1a
        );

    box-shadow:
        0
        0
        20px
        rgba(
            201,
            17,
            17,
            0.25
        );

}


.login-button:hover span {

    transform:
        translateX(
            5px
        );

}


.login-footer {

    display:
        flex;

    flex-direction:
        column;

    align-items:
        center;

    gap:
        0.8rem;

    margin-top:
        1.5rem;

    padding-top:
        1.5rem;

    border-top:
        1px
        solid
        #292929;

    color:
        #666;

    font-size:
        0.7rem;

    text-align:
        center;

}


.login-footer a {

    color:
        #fdb203;

    font-weight:
        700;

    letter-spacing:
        1px;

}


.login-footer a:hover {

    color:
        white;

}


/* =========================================================
   PUBLIC INNER PAGES
========================================================= */


.public-page {

    position:
        relative;

    width:
        100%;

    min-height:
        100vh;

    padding-top:
        80px;

    overflow:
        hidden;

}


.public-page .page-hero {

    position:
        relative;

    width:
        100%;

    min-height:
        52vh;

    display:
        flex;

    flex-direction:
        column;

    justify-content:
        center;

    align-items:
        flex-start;

    padding:
        7rem
        clamp(
            1.5rem,
            8vw,
            6.875rem
        )
        5rem;

    overflow:
        hidden;

}


.public-page .page-hero::before {

    content:
        "";

    position:
        absolute;

    inset:
        0;

    background:
        linear-gradient(
            90deg,
            rgba(
                8,
                8,
                8,
                0.96
            ),
            rgba(
                8,
                8,
                8,
                0.70
            ),
            rgba(
                8,
                8,
                8,
                0.35
            )
        );

    z-index:
        0;

}


.public-page .page-hero > * {

    position:
        relative;

    z-index:
        1;

}


.public-page .page-hero .login-label {

    margin-bottom:
        1rem;

    color:
        #fdb203;

    font-size:
        0.78rem;

    font-weight:
        700;

    letter-spacing:
        0.25rem;

}


.public-page .page-hero h1 {

    margin:
        0;

    color:
        #fff;

    font-family:
        'Bebas Neue',
        sans-serif;

    font-size:
        clamp(
            4rem,
            10vw,
            8rem
        );

    font-weight:
        900;

    line-height:
        0.9;

}


.public-page .page-hero p {

    max-width:
        38rem;

    margin:
        1.5rem
        0
        0;

    color:
        #c7c7c7;

    font-size:
        clamp(
            0.9rem,
            1.5vw,
            1.15rem
        );

    line-height:
        1.7;

}


.public-page .page-content,
.public-page .card-grid {

    width:
        min(
            100%,
            80rem
        );

    margin:
        0
        auto;

    padding:
        3rem
        clamp(
            1rem,
            6vw,
            5rem
        )
        7rem;

}


.public-page .page-content,
.public-page .card-grid {

    display:
        grid;

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

    gap:
        1.5rem;

}


.public-page .page-block,
.public-page .page-card {

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

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

    border-radius:
        1rem;

    backdrop-filter:
        blur(
            12px
        );

    -webkit-backdrop-filter:
        blur(
            12px
        );

    transition:
        transform
        0.3s
        ease,

        border-color
        0.3s
        ease,

        background
        0.3s
        ease;

}


.public-page .page-block {

    min-height:
        18rem;

    padding:
        2rem;

}


.public-page .page-card {

    min-height:
        17rem;

    display:
        flex;

    flex-direction:
        column;

    padding:
        2rem;

}


.public-page .page-block:hover,
.public-page .page-card:hover {

    transform:
        translateY(
            -6px
        );

    border-color:
        rgba(
            253,
            178,
            3,
            0.28
        );

}


.public-page .page-block .login-label,
.public-page .page-card .number {

    color:
        #fdb203;

    font-size:
        0.75rem;

    font-weight:
        800;

    letter-spacing:
        0.18rem;

}


.public-page .page-block h2,
.public-page .page-card h2 {

    margin:
        1rem
        0;

    color:
        #fff;

    font-family:
        'Bebas Neue',
        sans-serif;

    font-size:
        clamp(
            2rem,
            4vw,
            3.4rem
        );

    line-height:
        0.95;

}


.public-page .page-block p,
.public-page .page-card p {

    margin:
        0;

    color:
        #bdbdbd;

    font-size:
        0.94rem;

    line-height:
        1.7;

}


/* =========================================================
   PUBLIC SCHEDULE
========================================================= */

.public-page .schedule {

    width:
        min(
            100%,
            70rem
        );

    margin:
        0
        auto;

    padding:
        3rem
        clamp(
            1.5rem,
            6vw,
            5rem
        )
        7rem;

}


.public-page .schedule-row {

    display:
        grid;

    grid-template-columns:
        11rem
        1fr;

    gap:
        2rem;

    padding:
        1.5rem
        0;

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

}


.public-page .schedule-day {

    color:
        #D97706;

    font-family:
        'Bebas Neue',
        sans-serif;

    font-size:
        1.3rem;

    letter-spacing:
        0.1rem;

}


.public-page .schedule-session {

    color:
        #ddd;

    font-size:
        1rem;

}


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

.public-page .about-milestone-list {

    display:
        grid;

    gap:
        0.2rem;

    margin-top:
        1.2rem;

}


.public-page .about-milestone {

    display:
        grid;

    grid-template-columns:
        7rem
        1fr;

    gap:
        1rem;

    padding:
        0.9rem
        0;

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

}


.public-page .about-milestone strong {

    color:
        #D97706;

    font-size:
        0.75rem;

    letter-spacing:
        0.1rem;

}


.public-page .about-milestone span {

    color:
        #bdbdbd;

    font-size:
        0.9rem;

    line-height:
        1.6;

}


.public-page .about-belt-list {

    display:
        flex;

    flex-wrap:
        wrap;

    gap:
        0.55rem;

    margin-top:
        1.2rem;

}


.public-page .about-belt-list span {

    padding:
        0.55rem
        0.7rem;

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

    border-radius:
        999px;

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

    color:
        #ddd;

    font-size:
        0.68rem;

    font-weight:
        800;

    letter-spacing:
        0.05rem;

}


/* =========================================================
   HOMEPAGE ANNOUNCEMENTS
========================================================= */

.announcements {

    position:
        relative;

    width:
        100%;

    min-height:
        65vh;

    display:
        flex;

    flex-direction:
        column;

    align-items:
        center;

    padding:
        6rem
        clamp(
            1.5rem,
            8vw,
            6.875rem
        )
        6rem;

    overflow:
        hidden;

}


.announcement-header {

    width:
        min(
            100%,
            80rem
        );

    display:
        flex;

    flex-direction:
        column;

    align-items:
        center;

    margin-bottom:
        4rem;

    text-align:
        center;

    z-index:
        2;

}


.announcement-header .titleText {

    margin-bottom:
        0.5rem;

    font-family:
        'Bebas Neue',
        sans-serif;

    font-size:
        clamp(
            2rem,
            4vw,
            3.5rem
        );

    font-weight:
        900;

    letter-spacing:
        0.125rem;

    line-height:
        1;

}


.announcement-header .secondaryInfoText {

    color:
        white;

    font-family:
        'Arial Black',
        Arial,
        sans-serif;

    font-size:
        clamp(
            1.3rem,
            2.5vw,
            2.2rem
        );

    font-weight:
        900;

    letter-spacing:
        0.05rem;

}


.announcement-list {

    width:
        min(
            100%,
            80rem
        );

    display:
        grid;

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

    gap:
        1.5rem;

    z-index:
        2;

}


.announcement-card {

    position:
        relative;

    min-height:
        17rem;

    display:
        flex;

    flex-direction:
        column;

    padding:
        2rem;

    background:
        rgba(
            18,
            18,
            18,
            0.72
        );

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

    border-radius:
        1rem;

    backdrop-filter:
        blur(
            12px
        );

    -webkit-backdrop-filter:
        blur(
            12px
        );

    overflow:
        hidden;

    transition:
        transform
        0.3s
        ease,

        border-color
        0.3s
        ease,

        box-shadow
        0.3s
        ease;

}


.announcement-card::before {

    content:
        "";

    position:
        absolute;

    top:
        0;

    left:
        0;

    width:
        3px;

    height:
        100%;

    background:
        #fdb203;

    opacity:
        0.65;

    transition:
        opacity
        0.3s
        ease;

}


.announcement-card:hover {

    transform:
        translateY(
            -7px
        );

    border-color:
        rgba(
            253,
            178,
            3,
            0.35
        );

    box-shadow:
        0
        15px
        35px
        rgba(
            0,
            0,
            0,
            0.45
        );

}


.announcement-card:hover::before {

    opacity:
        1;

}


.announcement-card-label {

    color:
        #fdb203;

    font-size:
        0.7rem;

    font-weight:
        800;

    letter-spacing:
        0.15rem;

    text-transform:
        uppercase;

}


.announcement-card-date {

    margin-top:
        0.45rem;

    color:
        #777;

    font-size:
        0.75rem;

    font-weight:
        700;

    letter-spacing:
        0.08rem;

}


.announcement-card h3 {

    margin:
        1rem
        0
        0.8rem;

    color:
        white;

    font-family:
        'Bebas Neue',
        sans-serif;

    font-size:
        2rem;

    line-height:
        0.95;

    letter-spacing:
        0.08rem;

}


.announcement-card p {

    margin:
        0;

    color:
        #bdbdbd;

    font-size:
        0.9rem;

    line-height:
        1.65;

}


.announcement-card-read {

    display:
        inline-flex;

    align-items:
        center;

    margin-top:
        auto;

    padding-top:
        1.5rem;

    color:
        #fdb203;

    font-size:
        0.7rem;

    font-weight:
        800;

    letter-spacing:
        0.12rem;

    text-decoration:
        none;

    transition:
        transform
        0.25s
        ease,

        color
        0.25s
        ease;

}


.announcement-card-read:hover {

    color:
        white;

    transform:
        translateX(
            5px
        );

}


/* =========================================================
   ANNOUNCEMENT POPUP
========================================================= */

#announcementOverlay {

    position:
        fixed;

    inset:
        0;

    z-index:
        10000;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    padding:
        1rem;

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

    backdrop-filter:
        blur(
            10px
        );

    -webkit-backdrop-filter:
        blur(
            10px
        );

    opacity:
        0;

    visibility:
        hidden;

    pointer-events:
        none;

    transition:
        opacity
        0.35s
        ease,

        visibility
        0.35s
        ease;

}


#announcementOverlay.active {

    opacity:
        1;

    visibility:
        visible;

    pointer-events:
        auto;

}


#announcementOverlay
.announcement-popup {

    position:
        relative;

    isolation:
        isolate;

    width:
        min(
            100%,
            42rem
        );

    max-height:
        calc(
            100vh - 2rem
        );

    overflow-y:
        auto;

    padding:
        clamp(
            2rem,
            5vw,
            3.5rem
        );

    background:
        linear-gradient(
            145deg,
            rgba(
                24,
                24,
                24,
                0.97
            ),
            rgba(
                10,
                10,
                10,
                0.95
            )
        );

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

    border-radius:
        1rem;

    backdrop-filter:
        blur(
            12px
        );

    -webkit-backdrop-filter:
        blur(
            12px
        );

    box-shadow:
        0
        2rem
        5rem
        rgba(
            0,
            0,
            0,
            0.45
        );

    transform:
        translateY(
            1.5rem
        )
        scale(
            0.97
        );

    transition:
        transform
        0.4s
        ease;

}


#announcementOverlay.active
.announcement-popup {

    transform:
        translateY(
            0
        )
        scale(
            1
        );

}


#announcementOverlay
.announcement-popup::before {

    content:
        "";

    position:
        absolute;

    inset:
        0;

    background:
        linear-gradient(
            90deg,
            rgba(
                253,
                178,
                3,
                0.035
            ),
            transparent 35%,
            transparent 65%,
            rgba(
                230,
                15,
                50,
                0.035
            )
        );

    pointer-events:
        none;

    z-index:
        -1;

}


#announcementOverlay
.announcement-popup::after {

    content:
        "";

    position:
        absolute;

    top:
        0;

    left:
        0;

    width:
        4px;

    height:
        100%;

    background:
        #fdb203;

    opacity:
        0.9;

}


.announcement-popup-label {

    position:
        relative;

    z-index:
        1;

    display:
        block;

    color:
        #fdb203;

    font-size:
        0.7rem;

    font-weight:
        800;

    letter-spacing:
        0.15rem;

    text-transform:
        uppercase;

}


#announcementPopupDate {

    position:
        relative;

    z-index:
        1;

    display:
        block;

    margin-top:
        0.5rem;

    color:
        #777;

    font-size:
        0.75rem;

    font-weight:
        700;

    letter-spacing:
        0.08rem;

}


#announcementPopupTitle {

    position:
        relative;

    z-index:
        1;

    margin:
        1rem
        2.5rem
        1rem
        0;

    color:
        white;

    font-family:
        'Bebas Neue',
        sans-serif;

    font-size:
        clamp(
            2.8rem,
            7vw,
            4.5rem
        );

    line-height:
        0.9;

    letter-spacing:
        0.08rem;

}


#announcementPopupMessage {

    position:
        relative;

    z-index:
        1;

    margin:
        0;

    color:
        #c5c5c5;

    font-size:
        1rem;

    line-height:
        1.9;

    white-space:
        pre-line;

}


.announcement-popup-actions {

    position:
        relative;

    z-index:
        1;

    display:
        flex;

    align-items:
        center;

    margin-top:
        2.5rem;

}


#announcementReadButton {

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    min-height:
        2.75rem;

    padding:
        0.8rem
        1.2rem;

    color:
        #fdb203;

    background:
        transparent;

    border:
        1px
        solid
        rgba(
            253,
            178,
            3,
            0.35
        );

    border-radius:
        0.25rem;

    text-decoration:
        none;

    font-size:
        0.7rem;

    font-weight:
        800;

    letter-spacing:
        0.12rem;

    transition:
        color
        0.25s
        ease,

        background
        0.25s
        ease,

        border-color
        0.25s
        ease,

        transform
        0.25s
        ease;

}


#announcementReadButton:hover {

    color:
        #0a0a0a;

    background:
        #fdb203;

    border-color:
        #fdb203;

    transform:
        translateY(
            -2px
        );

}


#announcementClose {

    position:
        absolute;

    top:
        1rem;

    right:
        1rem;

    z-index:
        3;

    width:
        2.25rem;

    height:
        2.25rem;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    padding:
        0;

    color:
        #999;

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

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

    border-radius:
        50%;

    cursor:
        pointer;

    transition:
        color
        0.25s
        ease,

        background
        0.25s
        ease,

        border-color
        0.25s
        ease,

        transform
        0.25s
        ease;

}


#announcementClose:hover {

    color:
        white;

    background:
        rgba(
            253,
            178,
            3,
            0.12
        );

    border-color:
        rgba(
            253,
            178,
            3,
            0.35
        );

    transform:
        rotate(
            90deg
        );

}


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

@media (max-width: 1266px) {

    .home {

        padding-left:
            5vw;

        padding-right:
            5vw;

    }


    .training .cards {

        gap:
            1.25rem;

    }


    .training .cards
    .kihon,
    .training .cards
    .kata,
    .training .cards
    .kumite,
    .training .cards
    .conditioning {

        flex-basis:
            16rem;

    }


    .meet-our-instructor {

        padding-inline:
            2rem;

    }


    .stats .cards .awards {

        border-right:
            none;

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

    }

}


@media (max-width: 950px) {

    .public-page .page-content,
    .public-page .card-grid {

        grid-template-columns:
            1fr;

        padding-bottom:
            5rem;

    }


    .announcement-list {

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

    }


    .home {

        min-height:
            100dvh;

        justify-content:
            center;

        padding:
            7rem
            1.5rem
            4rem;

    }


    .home .primaryTitleText1 {

        font-size:
            clamp(
                2.8rem,
                11vw,
                5rem
            );

    }


    .home .primaryTitleText2 {

        font-size:
            clamp(
                3.8rem,
                15vw,
                7rem
            );

    }


    .home .descriptionText {

        max-width:
            32rem;

    }


    .home .button-group {

        width:
            100%;

        flex-direction:
            column;

        align-items:
            flex-start;

    }


    .home .homeAboutButton,
    .home .homeTimetableButton {

        width:
            min(
                100%,
                21rem
            );

    }


    .why-join-us {

        padding-top:
            6rem;

    }


    .why-join-us .information {

        padding-inline:
            1.5rem;

        align-items:
            center;

        text-align:
            center;

    }


    .why-join-us .cards {

        flex-direction:
            column;

        align-items:
            center;

        margin-top:
            5rem;

        padding-inline:
            1.25rem;

    }


    .why-join-us .cards
    .tradition,
    .why-join-us .cards
    .respect,
    .why-join-us .cards
    .focus,
    .why-join-us .cards
    .excellence {

        width:
            min(
                100%,
                28rem
            );

        border-left:
            none !important;

        border-right:
            none !important;

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

    }


    .why-join-us .cards .excellence {

        border-bottom:
            none;

    }


    .training {

        margin-top:
            8vh;

        align-items:
            center;

    }


    .training .information {

        padding-inline:
            1.5rem;

        align-items:
            center;

        text-align:
            center;

    }


    .training .information
    .informationDescription {

        align-self:
            center;

    }


    .training .cards {

        padding-inline:
            1.25rem;

        flex-direction:
            column;

        align-items:
            center;

    }


    .training .cards
    .kihon,
    .training .cards
    .kata,
    .training .cards
    .kumite,
    .training .cards
    .conditioning {

        width:
            min(
                100%,
                30rem
            );

        flex:
            none;

    }


    .stats .information {

        padding-inline:
            1.25rem;

    }


    .stats .cards {

        flex-direction:
            column;

        align-items:
            center;

        padding-inline:
            1.25rem;

    }


    .stats .cards
    .active-students,
    .stats .cards
    .awards,
    .stats .cards
    .experience,
    .stats .cards
    .tournaments {

        width:
            min(
                100%,
                30rem
            );

        min-height:
            12rem;

        padding:
            2rem
            2.5rem;

        border-left:
            none !important;

        border-right:
            none !important;

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

    }


    .stats .cards .awards {

        border-bottom:
            none;

        border-right:
            none;

    }


    .meet-our-instructor {

        padding-inline:
            1.5rem;

        min-height:
            auto;

    }


    .meet-our-instructor
    .container
    .instructor-information {

        grid-template-columns:
            1fr;

        gap:
            0.4rem;

        margin-top:
            3rem;

        text-align:
            center;

    }


    .meet-our-instructor
    .container
    .instructor-information
    .instructor-image,
    .meet-our-instructor
    .container
    .instructor-information
    .titleText,
    .meet-our-instructor
    .container
    .instructor-information
    .secondaryInfoText,
    .meet-our-instructor
    .container
    .instructor-information
    .title,
    .meet-our-instructor
    .container
    .instructor-information
    p {

        grid-column:
            1;

        grid-row:
            auto;

    }


    .meet-our-instructor
    .container
    .instructor-information
    .instructor-image {

        justify-content:
            center;

        margin-bottom:
            0;

    }


    .meet-our-instructor
    .container
    .instructor-information
    .instructor-image
    img {

        width:
            min(
                100%,
                22rem
            );

    }


    .meet-our-instructor
    .container
    .instructor-information
    .titleText,
    .meet-our-instructor
    .container
    .instructor-information
    .secondaryInfoText,
    .meet-our-instructor
    .container
    .instructor-information
    .title,
    .meet-our-instructor
    .container
    .instructor-information
    p {

        max-width:
            40rem;

        margin-inline:
            auto;

    }


    .shotokanEmblem {

        width:
            50vw;

        right:
            -8rem;

        top:
            8rem;

        opacity:
            0.6;

    }


    .login {

        min-height:
            100dvh;

        overflow-y:
            auto;

        padding-inline:
            1.2rem;

    }


    .login .login-title {

        position:
            relative;

        top:
            2rem;

        left:
            auto;

        transform:
            none;

        white-space:
            normal;

    }


    .login .login-title .zenith {

        font-size:
            clamp(
                2.8rem,
                12vw,
                4rem
            );

    }


    .login .login-title .secondaryText {

        font-size:
            clamp(
                0.85rem,
                4vw,
                1.4rem
            );

    }


    .login .login-content {

        position:
            relative;

        top:
            auto;

        left:
            auto;

        transform:
            none;

        width:
            min(
                100%,
                32rem
            );

        margin-top:
            8rem;

        padding-bottom:
            3rem;

        flex-direction:
            column;

        gap:
            2rem;

    }


    .login .login-info {

        width:
            100%;

        align-items:
            center;

        text-align:
            center;

    }


    .login .login-info h2 {

        font-size:
            clamp(
                2rem,
                9vw,
                3rem
            );

    }


    .login .login-info p {

        max-width:
            30rem;

        text-align:
            center;

    }


    .login .divider {

        width:
            80%;

        height:
            2px;

        background-image:
            linear-gradient(
                90deg,
                transparent,
                #fdb203,
                transparent
            );

    }


    .login .login-card {

        width:
            100%;

        max-width:
            30rem;

    }

}


@media (max-width: 600px) {

    .home {

        min-height:
            100dvh;

        padding:
            7rem
            1.1rem
            3rem;

        justify-content:
            center;

    }


    .home .secondaryTitleText {

        font-size:
            0.82rem;

        letter-spacing:
            0.1rem;

    }


    .home .primaryTitleText1 {

        font-size:
            clamp(
                2.6rem,
                13vw,
                4rem
            );

    }


    .home .primaryTitleText2 {

        font-size:
            clamp(
                3.5rem,
                17vw,
                5.6rem
            );

    }


    .home .descriptionText {

        font-size:
            0.9rem;

        line-height:
            1.6;

    }


    .home .tertiaryText {

        max-width:
            100%;

        padding-inline:
            0.8rem;

        font-size:
            0.65rem;

        letter-spacing:
            0.12rem;

        line-height:
            1.7;

    }


    .home .button-group {

        gap:
            0.8rem;

        margin-top:
            1.5rem;

    }


    .home .homeAboutButton,
    .home .homeTimetableButton {

        width:
            100%;

        max-width:
            20rem;

        height:
            48px;

        font-size:
            0.92rem;

    }


    .why-join-us
    .information
    .titleText,
    .training
    .information
    .titleText,
    .stats
    .information
    .titleText {

        font-size:
            clamp(
                2rem,
                11vw,
                3rem
            );

    }


    .why-join-us
    .information
    .secondaryInfoText,
    .training
    .information
    .secondaryInfoText,
    .stats
    .information
    .secondaryInfoText {

        font-size:
            1.25rem;

    }


    .why-join-us
    .information
    .informationDescription,
    .training
    .information
    .informationDescription,
    .stats
    .information
    .informationDescription {

        font-size:
            0.85rem;

    }


    .why-join-us .cards {

        margin-top:
            3.5rem;

        padding-inline:
            1rem;

    }


    .why-join-us .cards
    .tradition,
    .why-join-us .cards
    .respect,
    .why-join-us .cards
    .focus,
    .why-join-us .cards
    .excellence {

        width:
            100%;

        padding:
            2rem
            1rem;

    }


    .training .cards {

        margin-top:
            3rem;

        padding-inline:
            1rem;

        gap:
            1rem;

    }


    .training .cards
    .kihon,
    .training .cards
    .kata,
    .training .cards
    .kumite,
    .training .cards
    .conditioning {

        width:
            100%;

        min-height:
            16rem;

        border-radius:
            0.75rem;

    }


    .training .cards .title {

        min-height:
            3.5rem;

        margin-bottom:
            1rem;

    }


    .training .cards p {

        font-size:
            0.82rem;

        padding-inline:
            1.1rem;

    }


    .stats .cards {

        margin-top:
            3rem;

        padding-inline:
            1rem;

        align-items:
            center;

    }


    .stats .cards
    .active-students,
    .stats .cards
    .awards,
    .stats .cards
    .experience,
    .stats .cards
    .tournaments {

        width:
            100%;

        min-height:
            9rem;

        padding:
            1.8rem
            1.5rem;

    }


    .stats .cards .title {

        width:
            100%;

        min-height:
            auto;

        margin:
            0
            0
            0.5rem;

        font-size:
            2rem;

        text-align:
            center;

    }


    .stats .cards p {

        width:
            100%;

        margin:
            0;

        padding:
            0
            0.75rem;

        font-size:
            0.9rem;

        text-align:
            center;

    }


    .meet-our-instructor {

        min-height:
            auto;

        padding:
            3rem
            1rem;

    }


    .meet-our-instructor
    .container
    .instructor-information {

        grid-template-columns:
            1fr;

        gap:
            0.15rem;

        margin-top:
            1.5rem;

        text-align:
            center;

    }


    .meet-our-instructor
    .container
    .instructor-information
    .instructor-image {

        margin-bottom:
            0;

        padding-bottom:
            0;

    }


    .meet-our-instructor
    .container
    .instructor-information
    .instructor-image
    img {

        width:
            min(
                100%,
                20rem
            );

        margin-bottom:
            -0.15rem;

    }


    .meet-our-instructor
    .container
    .instructor-information
    .titleText {

        margin-top:
            0;

        margin-bottom:
            0.15rem;

        font-size:
            2.5rem;

    }


    .meet-our-instructor
    .container
    .instructor-information
    .secondaryInfoText {

        margin-top:
            0;

        margin-bottom:
            0.1rem;

        font-size:
            1.2rem;

    }


    .meet-our-instructor
    .container
    .instructor-information
    .title {

        margin-top:
            0;

        margin-bottom:
            0.4rem;

        font-size:
            1rem;

    }


    .meet-our-instructor
    .container
    .instructor-information
    p {

        margin-top:
            0;

        font-size:
            0.9rem;

        line-height:
            1.5;

    }


    .shotokanEmblem {

        width:
            70vw;

        right:
            -10rem;

        top:
            7rem;

        opacity:
            0.35;

    }


    .login {

        min-height:
            100dvh;

    }


    .login .login-content {

        margin-top:
            7rem;

    }


    .login .login-card {

        padding:
            1.25rem;

    }


    .login .login-options {

        align-items:
            flex-start;

        flex-direction:
            column;

        gap:
            0.75rem;

    }


    .public-page {

        padding-top:
            66px;

    }


    .public-page .page-hero {

        min-height:
            32vh;

        padding:
            5rem
            1.1rem
            3rem;

    }


    .public-page .page-hero h1 {

        font-size:
            clamp(
                2.1rem,
                7vw,
                5.2rem
            );

    }


    .public-page .page-content,
    .public-page .card-grid,
    .public-page .schedule{

        padding-inline:
            1rem;

    }


    .public-page .page-block,
    .public-page .page-card {

        padding:
            1.5rem;

    }


    .public-page .schedule-row {

        grid-template-columns:
            1fr;

        gap:
            0.4rem;

    }


    .announcement-list {

        grid-template-columns:
            1fr;

    }


    .announcement-card {

        min-height:
            15rem;

        padding:
            1.5rem;

    }


    #announcementOverlay {

        padding:
            0.75rem;

    }


    #announcementOverlay
    .announcement-popup {

        max-height:
            calc(
                100dvh - 1.5rem
            );

        padding:
            2rem
            1.5rem;

    }


    #announcementPopupTitle {

        margin-right:
            2.25rem;

        font-size:
            clamp(
                2.7rem,
                12vw,
                4rem
            );

    }


    #announcementPopupMessage {

        font-size:
            0.9rem;

        line-height:
            1.75;

    }


    .announcement-popup-actions {

        margin-top:
            2rem;

    }


    #announcementReadButton {

        width:
            100%;

    }

}


@media (max-width: 380px) {

    .home {

        padding-inline:
            0.9rem;

    }


    .home .primaryTitleText1 {

        font-size:
            2.45rem;

    }


    .home .primaryTitleText2 {

        font-size:
            3.25rem;

    }


    .home .descriptionText {

        font-size:
            0.82rem;

    }


    .home .homeAboutButton,
    .home .homeTimetableButton {

        max-width:
            100%;

    }


    .training .cards,
    .why-join-us .cards,
    .stats .cards {

        padding-inline:
            0.8rem;

    }


    .stats .cards
    .active-students,
    .stats .cards
    .awards,
    .stats .cards
    .experience,
    .stats .cards
    .tournaments {

        min-height:
            8.5rem;

        padding:
            1.5rem
            1rem;

    }


    #announcementOverlay
    .announcement-popup {

        padding:
            1.75rem
            1.25rem;

    }


    #announcementPopupTitle {

        font-size:
            2.5rem;

    }


    .announcement-popup-label {

        font-size:
            0.65rem;

        letter-spacing:
            0.12rem;

    }

}


/* =========================================================
   TOUCH DEVICES
========================================================= */

@media (hover: none) and (pointer: coarse) {

    .homeAboutButton,
    .homeTimetableButton,
    button,
    a {

        -webkit-tap-highlight-color:
            transparent;

    }


    .training .cards
    .kihon:hover,
    .training .cards
    .kata:hover,
    .training .cards
    .kumite:hover,
    .training .cards
    .conditioning:hover {

        transform:
            none;

    }


    .why-join-us
    .cards > div:hover,
    .stats
    .cards > div:hover {

        transform:
            none;

    }

}


/* =========================================================
   REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {

        scroll-behavior:
            auto !important;

        transition-duration:
            0.01ms !important;

        animation-duration:
            0.01ms !important;

        animation-iteration-count:
            1 !important;

    }

}


/* =========================================================
   ZENITH KARATE ACADEMY
   ZENITH ACRONYM SECTION
========================================================= */

.zenith-acronym {
    position: relative;
    width: 100%;
    padding: clamp(5rem, 10vh, 8rem) clamp(1.5rem, 8vw, 6.875rem);
    overflow: hidden;
    background:
        radial-gradient(
            circle at 50% 0%,
            rgba(212, 175, 55, 0.08),
            transparent 45%
        );
}

.zenith-acronym::before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    width: min(70rem, 90%);
    height: 1px;
    transform: translateX(-50%);
    background: linear-gradient(
        90deg,
        transparent,
        rgba(212, 175, 55, 0.65),
        transparent
    );
}

.zenith-acronym .acronym-information {
    position: relative;
    z-index: 1;
    width: min(100%, 80rem);
    margin: 0 auto 3rem;
    text-align: center;
}

.zenith-acronym .acronym-eyebrow {
    display: block;
    margin-bottom: 0.65rem;
    color: rgba(255, 255, 255, 0.62);
    font-size: clamp(0.8rem, 1.5vw, 1rem);
    font-weight: 700;
    letter-spacing: 0.22rem;
}

.zenith-acronym .acronym-title {
    display: block;
    margin-bottom: 0.7rem;
    font-family: 'Bebas Neue', sans-serif;
    font-size: clamp(2.5rem, 6vw, 5rem);
    font-weight: 900;
    letter-spacing: 0.2rem;
    line-height: 0.95;
    background-image: linear-gradient(
        135deg,
        #ee4060 0%,
        #fa073c 50%,
        #a50527 100%
    );
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.zenith-acronym .acronym-tagline {
    display: block;
    color: #d4af37;
    font-size: clamp(1rem, 2vw, 1.3rem);
    font-style: italic;
    letter-spacing: 0.04rem;
}

.zenith-acronym .acronym-grid {
    position: relative;
    z-index: 1;
    width: min(100%, 80rem);
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 1rem;
}

.zenith-acronym .acronym-card {
    position: relative;
    min-height: 12rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 1.5rem 1rem;
    text-align: center;
    background: rgba(20, 20, 20, 0.78);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-top: 2px solid rgba(212, 175, 55, 0.55);
    border-radius: 1rem;
    box-shadow: 0 1rem 2.5rem rgba(0, 0, 0, 0.28);
    transition:
        transform 0.3s ease,
        border-color 0.3s ease,
        box-shadow 0.3s ease;
}

.zenith-acronym .acronym-card:hover {
    transform: translateY(-0.4rem);
    border-color: rgba(212, 175, 55, 0.45);
    box-shadow:
        0 1.5rem 3rem rgba(0, 0, 0, 0.42),
        0 0 2rem rgba(212, 175, 55, 0.08);
}

.zenith-acronym .acronym-letter {
    display: block;
    margin-bottom: 0.45rem;
    color: #d4af37;
    font-family: 'Bebas Neue', sans-serif;
    font-size: clamp(2.8rem, 5vw, 4.2rem);
    font-weight: 900;
    line-height: 0.9;
}

.zenith-acronym .acronym-word {
    display: block;
    color: white;
    font-size: clamp(0.9rem, 1.4vw, 1.1rem);
    font-weight: 800;
    letter-spacing: 0.08rem;
    text-transform: uppercase;
}

.zenith-acronym .acronym-statement {
    position: relative;
    z-index: 1;
    width: min(100%, 60rem);
    margin: 3rem auto 0;
    padding: 1.5rem 2rem;
    text-align: center;
    color: rgba(255, 255, 255, 0.82);
    font-size: clamp(1rem, 1.7vw, 1.2rem);
    font-style: italic;
    line-height: 1.7;
    border-left: 2px solid rgba(212, 175, 55, 0.7);
    border-right: 2px solid rgba(212, 175, 55, 0.7);
    background: rgba(255, 255, 255, 0.025);
}

@media (max-width: 900px) {
    .zenith-acronym .acronym-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 600px) {
    .zenith-acronym {
        padding-inline: 1rem;
    }

    .zenith-acronym .acronym-information {
        margin-bottom: 2rem;
    }

    .zenith-acronym .acronym-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.75rem;
    }

    .zenith-acronym .acronym-card {
        min-height: 9.5rem;
        padding: 1.25rem 0.75rem;
    }

    .zenith-acronym .acronym-statement {
        margin-top: 2rem;
        padding: 1.25rem 1rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .zenith-acronym .acronym-card {
        transition: none;
    }
}


/* =========================================================
   HOMEPAGE INSTRUCTOR FEATURE UPGRADE
========================================================= */

.meet-our-instructor {
    isolation: isolate;
    min-height: 78vh;
    padding-top: clamp(6rem, 11vh, 9rem);
    padding-bottom: clamp(6rem, 11vh, 9rem);
}

.meet-our-instructor::before {
    content: "";
    position: absolute;
    width: 34rem;
    height: 34rem;
    left: -17rem;
    top: 50%;
    transform: translateY(-50%);
    border-radius: 50%;
    background: rgba(230, 15, 50, 0.07);
    filter: blur(5rem);
    pointer-events: none;
    z-index: -2;
}

.meet-our-instructor::after {
    content: "SENSEI";
    position: absolute;
    right: -2rem;
    bottom: -3rem;
    color: rgba(255, 255, 255, 0.018);
    font-family: 'Bebas Neue', sans-serif;
    font-size: clamp(8rem, 22vw, 19rem);
    font-weight: 900;
    letter-spacing: 0.12rem;
    line-height: 0.8;
    pointer-events: none;
    z-index: -1;
}

.meet-our-instructor .container {
    position: relative;
    z-index: 1;
}

.meet-our-instructor .instructor-information > .sectionTitle {
    position: relative;
    width: fit-content;
    margin-bottom: clamp(2.5rem, 5vw, 4rem);
    font-size: clamp(2.2rem, 4.5vw, 4rem);
    letter-spacing: 0.16rem;
}

.meet-our-instructor .instructor-information > .sectionTitle::after {
    content: "";
    display: block;
    width: 4rem;
    height: 3px;
    margin-top: 0.85rem;
    background: linear-gradient(90deg, #fdb203, rgba(253, 178, 3, 0));
}

.instructor-profile {
    display: grid;
    grid-template-columns: minmax(18rem, 0.9fr) minmax(20rem, 1.1fr);
    align-items: center;
    gap: clamp(3rem, 7vw, 7rem);
    width: 100%;
}

.instructor-image {
    position: relative;
    width: min(100%, 28rem);
    min-height: 28rem;
    justify-self: center;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding: 1.2rem;
}

.instructor-image::before {
    content: "";
    position: absolute;
    inset: 0.2rem;
    border: 1px solid rgba(253, 178, 3, 0.22);
    background:
        linear-gradient(145deg, rgba(253, 178, 3, 0.08), transparent 28%),
        linear-gradient(315deg, rgba(230, 15, 50, 0.08), transparent 30%);
    clip-path: polygon(0 0, 78% 0, 100% 22%, 100% 100%, 22% 100%, 0 78%);
    pointer-events: none;
}

.instructor-image::after {
    content: "4TH DAN";
    position: absolute;
    left: 0;
    bottom: 1.35rem;
    padding: 0.5rem 0.75rem;
    background: rgba(8, 8, 8, 0.92);
    border-left: 3px solid #fdb203;
    color: #fdb203;
    font-size: 0.65rem;
    font-weight: 900;
    letter-spacing: 0.16rem;
    box-shadow: 0 0.8rem 2rem rgba(0, 0, 0, 0.32);
    z-index: 2;
}

.instructor-image img {
    position: relative;
    z-index: 1;
    width: min(100%, 25rem);
    filter: drop-shadow(0 2rem 3rem rgba(0, 0, 0, 0.58));
    transition: transform 0.45s ease, filter 0.45s ease;
}

.instructor-image:hover img {
    transform: translateY(-0.35rem) scale(1.015);
    filter: drop-shadow(0 2rem 3rem rgba(0, 0, 0, 0.64));
}

.instructor-details {
    position: relative;
    width: 100%;
    max-width: 38rem;
    padding: clamp(1.5rem, 3vw, 2.4rem);
    background:
        linear-gradient(145deg, rgba(24, 24, 24, 0.9), rgba(11, 11, 11, 0.86));
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-left: 3px solid rgba(230, 15, 50, 0.8);
    box-shadow: 0 1.5rem 3.5rem rgba(0, 0, 0, 0.34);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}

.instructor-details::before {
    content: "TRADITION • DISCIPLINE • GUIDANCE";
    display: block;
    margin-bottom: 1.15rem;
    color: rgba(253, 178, 3, 0.8);
    font-size: 0.61rem;
    font-weight: 900;
    letter-spacing: 0.15rem;
}

.instructor-details .secondaryInfoText {
    margin-bottom: 0.5rem;
    font-family: 'Bebas Neue', sans-serif;
    font-size: clamp(2.4rem, 5vw, 4.4rem);
    font-weight: 900;
    letter-spacing: 0.07rem;
    line-height: 0.92;
}

.instructor-details .title {
    position: relative;
    display: inline-block;
    margin-bottom: 0;
    padding: 0.35rem 0.65rem;
    background: rgba(253, 178, 3, 0.08);
    border: 1px solid rgba(253, 178, 3, 0.23);
    color: #fdb203;
    font-family: 'Arial Black', Arial, sans-serif;
    font-size: clamp(0.82rem, 1.3vw, 1rem);
    letter-spacing: 0.12rem;
    text-transform: uppercase;
}

.instructor-details p {
    position: relative;
    margin: 1.8rem 0 0;
    padding-top: 1.5rem;
    color: rgba(255, 255, 255, 0.76);
    font-size: clamp(0.98rem, 1.45vw, 1.08rem);
    line-height: 1.85;
}

.instructor-details p::before {
    content: "“";
    position: absolute;
    top: -0.4rem;
    left: 0;
    color: rgba(230, 15, 50, 0.75);
    font-family: Georgia, serif;
    font-size: 3.2rem;
    line-height: 1;
}

@media (max-width: 900px) {
    .instructor-profile {
        grid-template-columns: 1fr;
        gap: 2.5rem;
    }

    .instructor-image {
        min-height: 0;
        width: min(100%, 26rem);
    }

    .instructor-details {
        justify-self: center;
        max-width: 42rem;
        text-align: center;
        border-left: 0;
        border-top: 3px solid rgba(230, 15, 50, 0.8);
    }

    .instructor-details::before {
        text-align: center;
    }

    .instructor-details .title {
        align-self: center;
    }

    .instructor-details p::before {
        left: 50%;
        transform: translateX(-50%);
    }
}

@media (max-width: 700px) {
    .meet-our-instructor {
        padding-top: 4.5rem;
        padding-bottom: 5rem;
    }

    .meet-our-instructor .instructor-information > .sectionTitle {
        margin-bottom: 2.25rem;
        font-size: 2.45rem;
    }

    .instructor-image {
        width: min(88vw, 21rem);
        padding: 0.8rem;
    }

    .instructor-image::after {
        left: -0.1rem;
        bottom: 0.9rem;
    }

    .instructor-details {
        padding: 1.35rem;
    }

    .instructor-details .secondaryInfoText {
        font-size: clamp(2.2rem, 11vw, 3.2rem);
    }

    .instructor-details p {
        margin-top: 1.5rem;
        padding-top: 1.35rem;
        font-size: 0.9rem;
        line-height: 1.7;
    }
}

@media (prefers-reduced-motion: reduce) {
    .instructor-image img {
        transition: none;
    }
}