/* =========================================================
   CO-CURRICULAR ACTIVITIES
   Premium Responsive CSS
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800&display=swap');


/* =========================================================
   ROOT
   ========================================================= */

:root{
    --primary:#0b2341;
    --primary-light:#123b68;
    --secondary:#c89b3c;
    --accent:#00a8ff;

    --text:#172033;
    --muted:#667085;
    --white:#ffffff;
    --light:#f5f8fc;

    --border:rgba(11,35,65,0.10);

    --shadow-sm:0 10px 30px rgba(11,35,65,0.08);
    --shadow-md:0 20px 50px rgba(11,35,65,0.12);
    --shadow-lg:0 30px 80px rgba(11,35,65,0.16);

    --gradient:linear-gradient(
        135deg,
        #0b2341 0%,
        #123b68 50%,
        #0077b6 100%
    );

    --gold-gradient:linear-gradient(
        135deg,
        #c89b3c,
        #f1d17a
    );
}


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

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

html{
    scroll-behavior:smooth;
}

body{
    font-family:'Poppins',sans-serif;
    color:var(--text);
    background:#ffffff;
    overflow-x:hidden;
}

img{
    max-width:100%;
    display:block;
}

button,
a{
    font-family:inherit;
}

a{
    text-decoration:none;
}


/* =========================================================
   COMMON CONTAINER
   ========================================================= */

.curricular-container{
    width:min(1180px,92%);
    margin:0 auto;
}


/* =========================================================
   INTRO SECTION
   ========================================================= */

.curricular-intro{
    position:relative;
    padding:100px 0;
    background:
        radial-gradient(
            circle at 10% 20%,
            rgba(0,168,255,0.08),
            transparent 28%
        ),
        radial-gradient(
            circle at 90% 80%,
            rgba(200,155,60,0.10),
            transparent 28%
        ),
        #ffffff;
    overflow:hidden;
}

.curricular-intro::before{
    content:"";
    position:absolute;
    width:420px;
    height:420px;
    border-radius:50%;
    border:1px solid rgba(11,35,65,0.06);
    top:-200px;
    left:-200px;
}

.curricular-intro::after{
    content:"";
    position:absolute;
    width:300px;
    height:300px;
    border-radius:50%;
    border:1px solid rgba(200,155,60,0.12);
    bottom:-150px;
    right:-100px;
}

.curricular-intro .curricular-container{
    position:relative;
    z-index:2;
    display:grid;
    grid-template-columns:0.95fr 1.05fr;
    align-items:center;
    gap:80px;
}


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

.curricular-image{
    position:relative;
}

.image-frame{
    position:relative;
    padding:14px;
    background:rgba(255,255,255,0.75);
    border-radius:28px;
    box-shadow:var(--shadow-lg);
}

.image-frame::before{
    content:"";
    position:absolute;
    width:110px;
    height:110px;
    border-radius:22px;
    background:var(--gold-gradient);
    left:-25px;
    bottom:-25px;
    z-index:-1;
    opacity:.85;
}

.image-frame::after{
    content:"";
    position:absolute;
    width:80px;
    height:80px;
    border-radius:50%;
    border:14px solid rgba(0,168,255,0.12);
    right:-35px;
    top:-35px;
}

.image-frame img{
    width:100%;
    height:500px;
    object-fit:cover;
    border-radius:20px;
}


/* =========================================================
   FLOATING BADGE
   ========================================================= */

.floating-badge{
    position:absolute;
    right:-35px;
    bottom:45px;

    min-width:145px;
    padding:18px 20px;

    background:rgba(255,255,255,0.92);
    backdrop-filter:blur(15px);
    -webkit-backdrop-filter:blur(15px);

    border:1px solid rgba(255,255,255,0.8);
    border-radius:18px;

    box-shadow:0 20px 45px rgba(11,35,65,0.16);

    text-align:center;
    z-index:5;

    animation:floatBadge 4s ease-in-out infinite;
}

.floating-badge i{
    display:block;
    color:var(--secondary);
    font-size:25px;
    margin-bottom:7px;
}

.floating-badge span{
    display:block;
    color:var(--primary);
    font-size:12px;
    font-weight:700;
    letter-spacing:.8px;
    text-transform:uppercase;
}

@keyframes floatBadge{

    0%,
    100%{
        transform:translateY(0);
    }

    50%{
        transform:translateY(-12px);
    }
}


/* =========================================================
   INTRO CONTENT
   ========================================================= */

.curricular-content{
    position:relative;
}

.section-label{
    display:inline-flex;
    align-items:center;
    gap:9px;

    padding:8px 15px;

    border-radius:30px;

    background:rgba(11,35,65,0.06);
    color:var(--primary);

    font-size:12px;
    font-weight:700;

    letter-spacing:1.5px;
    text-transform:uppercase;

    margin-bottom:18px;
}

.section-label::before{
    content:"";
    width:7px;
    height:7px;
    border-radius:50%;
    background:var(--secondary);
    box-shadow:0 0 0 5px rgba(200,155,60,0.12);
}

.curricular-content h1{
    color:var(--primary);
    font-size:clamp(36px,4vw,58px);
    line-height:1.12;
    font-weight:800;
    letter-spacing:-1.5px;
    margin-bottom:22px;
}

.title-line{
    display:block;
    color:#168ad0;
}

.curricular-content > p{
    color:var(--muted);
    font-size:16px;
    line-height:1.9;
    margin-bottom:30px;
    max-width:650px;
}


/* =========================================================
   INTRO POINTS
   ========================================================= */

.intro-points{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:15px;
}

.intro-point{
    display:flex;
    align-items:center;
    gap:13px;

    padding:15px 16px;

    background:#ffffff;
    border:1px solid var(--border);
    border-radius:15px;

    box-shadow:var(--shadow-sm);

    transition:
        transform .35s ease,
        box-shadow .35s ease,
        border-color .35s ease;
}

.intro-point:hover{
    transform:translateY(-5px);
    box-shadow:var(--shadow-md);
    border-color:rgba(0,168,255,0.25);
}

.intro-point i{
    flex:0 0 38px;

    width:38px;
    height:38px;

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

    border-radius:11px;

    background:rgba(0,168,255,0.10);
    color:#008fd4;

    font-size:15px;
}

.intro-point span{
    color:#344054;
    font-size:13px;
    line-height:1.5;
    font-weight:500;
}


/* =========================================================
   ACTIVITIES OVERVIEW
   ========================================================= */

.activities-overview{
    position:relative;
    padding:110px 0;

    background:
        linear-gradient(
            180deg,
            #f7faff 0%,
            #ffffff 100%
        );
}

.activities-heading{
    text-align:center;
    max-width:750px;
    margin:0 auto 55px;
}

.activities-heading .section-label{
    margin-bottom:15px;
}

.activities-heading h2{
    color:var(--primary);
    font-size:clamp(30px,4vw,48px);
    line-height:1.2;
    font-weight:800;
    margin-bottom:15px;
}

.activities-heading p{
    color:var(--muted);
    font-size:15px;
    line-height:1.8;
}


/* =========================================================
   ACTIVITIES GRID
   ========================================================= */

.activities-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:25px;
}

.activity-card{
    position:relative;
    min-height:260px;

    padding:35px 30px;

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

    border:1px solid rgba(11,35,65,0.08);
    border-radius:24px;

    box-shadow:var(--shadow-sm);

    overflow:hidden;

    transition:
        transform .45s ease,
        box-shadow .45s ease,
        border-color .45s ease;
}

.activity-card::before{
    content:"";
    position:absolute;

    width:150px;
    height:150px;

    border-radius:50%;

    background:rgba(0,168,255,0.07);

    top:-70px;
    right:-60px;

    transition:transform .5s ease;
}

.activity-card::after{
    content:"";
    position:absolute;

    width:4px;
    height:0;

    left:0;
    top:0;

    background:linear-gradient(
        180deg,
        #00a8ff,
        #c89b3c
    );

    transition:height .4s ease;
}

.activity-card:hover{
    transform:translateY(-10px);
    box-shadow:var(--shadow-lg);
    border-color:rgba(0,168,255,0.20);
}

.activity-card:hover::before{
    transform:scale(1.5);
}

.activity-card:hover::after{
    height:100%;
}


/* =========================================================
   ACTIVITY ICON
   ========================================================= */

.activity-icon{
    width:62px;
    height:62px;

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

    border-radius:18px;

    background:linear-gradient(
        135deg,
        rgba(0,168,255,0.12),
        rgba(11,35,65,0.06)
    );

    color:#008fd4;

    font-size:24px;

    margin-bottom:25px;

    transition:
        transform .4s ease,
        background .4s ease,
        color .4s ease;
}

.activity-card:hover .activity-icon{
    transform:rotate(-6deg) scale(1.08);

    background:var(--gradient);
    color:#ffffff;
}

.activity-card h3{
    position:relative;
    z-index:2;

    color:var(--primary);

    font-size:19px;
    font-weight:700;

    margin-bottom:12px;
}

.activity-card p{
    position:relative;
    z-index:2;

    color:var(--muted);

    font-size:13px;
    line-height:1.75;
}

.card-number{
    position:absolute;
    right:25px;
    bottom:15px;

    color:rgba(11,35,65,0.055);

    font-size:58px;
    font-weight:800;

    line-height:1;

    transition:color .4s ease;
}

.activity-card:hover .card-number{
    color:rgba(0,168,255,0.10);
}


/* =========================================================
   EXPERIENCE SECTION
   ========================================================= */

.curricular-experience{
    position:relative;
    padding:110px 0;

    background:#ffffff;
}

.curricular-experience .curricular-container{
    display:grid;
    grid-template-columns:1.05fr .95fr;
    align-items:center;
    gap:80px;
}

.experience-content{
    max-width:620px;
}

.experience-content h2{
    color:var(--primary);
    font-size:clamp(30px,4vw,46px);
    line-height:1.2;
    font-weight:800;
    margin-bottom:20px;
}

.experience-content > p{
    color:var(--muted);
    font-size:15px;
    line-height:1.9;
    margin-bottom:30px;
}


/* =========================================================
   EXPERIENCE LIST
   ========================================================= */

.experience-list{
    display:flex;
    flex-direction:column;
    gap:14px;
}

.experience-list li{
    list-style:none;

    display:flex;
    align-items:flex-start;
    gap:14px;

    color:#344054;

    font-size:14px;
    line-height:1.6;

    padding:14px 16px;

    background:#f8fafc;

    border-radius:14px;

    border:1px solid rgba(11,35,65,0.06);

    transition:
        transform .3s ease,
        background .3s ease;
}

.experience-list li:hover{
    transform:translateX(7px);
    background:#f2f8fc;
}

.experience-list li i{
    flex:0 0 25px;

    width:25px;
    height:25px;

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

    border-radius:50%;

    background:rgba(0,168,255,0.12);
    color:#008fd4;

    font-size:11px;

    margin-top:2px;
}


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

.experience-image{
    position:relative;
}

.experience-image::before{
    content:"";

    position:absolute;

    width:85%;
    height:85%;

    background:linear-gradient(
        135deg,
        rgba(0,168,255,0.15),
        rgba(200,155,60,0.12)
    );

    border-radius:35px;

    right:-25px;
    bottom:-25px;

    z-index:0;
}

.experience-image img{
    position:relative;
    z-index:1;

    width:100%;
    height:500px;

    object-fit:cover;

    border-radius:28px;

    box-shadow:var(--shadow-lg);
}

.experience-tag{
    position:absolute;
    z-index:3;

    left:-25px;
    bottom:35px;

    display:flex;
    align-items:center;
    gap:12px;

    padding:14px 20px;

    background:#ffffff;

    border-radius:16px;

    box-shadow:var(--shadow-md);

    color:var(--primary);

    font-size:13px;
    font-weight:700;
}

.experience-tag i{
    color:var(--secondary);
    font-size:20px;
}


/* =========================================================
   SKILLS SECTION
   ========================================================= */

.skills-section{
    padding:100px 0;

    background:
        linear-gradient(
            135deg,
            #0b2341 0%,
            #102f53 55%,
            #0b2341 100%
        );

    position:relative;
    overflow:hidden;
}

.skills-section::before{
    content:"";

    position:absolute;

    width:450px;
    height:450px;

    border-radius:50%;

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

    top:-220px;
    right:-150px;
}

.skills-section::after{
    content:"";

    position:absolute;

    width:350px;
    height:350px;

    border-radius:50%;

    border:1px solid rgba(200,155,60,0.10);

    bottom:-180px;
    left:-130px;
}

.skills-section .curricular-container{
    position:relative;
    z-index:2;
}

.skills-section .section-label{
    color:#ffffff;
    background:rgba(255,255,255,0.08);
}

.skills-section h2{
    color:#ffffff;

    text-align:center;

    font-size:clamp(30px,4vw,45px);
    font-weight:800;

    margin-bottom:55px;
}


/* =========================================================
   SKILLS GRID
   ========================================================= */

.skills-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:22px;
}

.skill-box{
    padding:32px 22px;

    text-align:center;

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

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

    border-radius:22px;

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

    transition:
        transform .4s ease,
        background .4s ease,
        border-color .4s ease;
}

.skill-box:hover{
    transform:translateY(-10px);

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

    border-color:rgba(255,255,255,0.20);
}

.skill-icon{
    width:64px;
    height:64px;

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

    margin:0 auto 18px;

    border-radius:18px;

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

    color:#ffffff;

    font-size:24px;

    transition:
        transform .4s ease,
        background .4s ease;
}

.skill-box:hover .skill-icon{
    transform:scale(1.1) rotate(5deg);
    background:var(--gold-gradient);
    color:var(--primary);
}

.skill-box h3{
    color:#ffffff;
    font-size:17px;
    font-weight:600;
    margin-bottom:8px;
}

.skill-box p{
    color:rgba(255,255,255,0.65);
    font-size:12px;
    line-height:1.7;
}


/* =========================================================
   GALLERY SECTION
   ========================================================= */

.curricular-gallery{
    padding:110px 0;

    background:#f8fafc;
}

.curricular-gallery .activities-heading{
    margin-bottom:50px;
}

.gallery-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    grid-auto-rows:240px;
    gap:18px;
}

.gallery-item{
    position:relative;

    border-radius:22px;

    overflow:hidden;

    box-shadow:var(--shadow-sm);

    background:#e9eef5;
}

.gallery-item.large{
    grid-column:span 2;
    grid-row:span 2;
}

.gallery-item img{
    width:100%;
    height:100%;

    object-fit:cover;

    transition:
        transform .7s cubic-bezier(.2,.7,.2,1),
        filter .5s ease;
}

.gallery-item:hover img{
    transform:scale(1.09);
    filter:brightness(.75);
}

.gallery-overlay{
    position:absolute;

    inset:0;

    display:flex;
    align-items:flex-end;

    padding:24px;

    background:
        linear-gradient(
            180deg,
            transparent 45%,
            rgba(0,0,0,0.75) 100%
        );

    opacity:0;

    transition:opacity .4s ease;
}

.gallery-item:hover .gallery-overlay{
    opacity:1;
}

.gallery-overlay span{
    color:#ffffff;

    font-size:15px;
    font-weight:600;

    transform:translateY(15px);

    transition:transform .4s ease;
}

.gallery-item:hover .gallery-overlay span{
    transform:translateY(0);
}


/* =========================================================
   CTA SECTION
   ========================================================= */

.curricular-cta{
    position:relative;

    padding:110px 0;

    background:var(--primary);

    overflow:hidden;
}

.cta-glow{
    position:absolute;

    border-radius:50%;

    filter:blur(5px);

    pointer-events:none;
}

.glow-one{
    width:400px;
    height:400px;

    background:rgba(0,168,255,0.16);

    left:-180px;
    top:-180px;
}

.glow-two{
    width:350px;
    height:350px;

    background:rgba(200,155,60,0.13);

    right:-150px;
    bottom:-170px;
}

.cta-content{
    position:relative;
    z-index:2;

    max-width:800px;

    margin:0 auto;

    text-align:center;
}

.cta-content .section-label{
    color:#ffffff;
    background:rgba(255,255,255,0.08);
}

.cta-content h2{
    color:#ffffff;

    font-size:clamp(30px,4vw,48px);
    line-height:1.2;

    font-weight:800;

    margin-bottom:18px;
}

.cta-content p{
    color:rgba(255,255,255,0.70);

    font-size:15px;
    line-height:1.8;

    max-width:650px;

    margin:0 auto 30px;
}


/* =========================================================
   CTA BUTTON
   ========================================================= */

.cta-button{
    display:inline-flex;

    align-items:center;
    justify-content:center;
    gap:10px;

    min-width:180px;

    padding:15px 25px;

    border-radius:50px;

    background:var(--gold-gradient);

    color:var(--primary);

    font-size:14px;
    font-weight:700;

    box-shadow:
        0 12px 30px rgba(200,155,60,0.25);

    transition:
        transform .35s ease,
        box-shadow .35s ease;
}

.cta-button:hover{
    transform:translateY(-4px);

    box-shadow:
        0 18px 40px rgba(200,155,60,0.35);
}

.cta-button i{
    transition:transform .3s ease;
}

.cta-button:hover i{
    transform:translateX(5px);
}


/* =========================================================
   AOS / GENERAL ANIMATION SUPPORT
   ========================================================= */

[data-aos]{
    will-change:transform,opacity;
}


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

@media(max-width:1100px){

    .curricular-intro{
        padding:80px 0;
    }

    .curricular-intro .curricular-container{
        gap:55px;
    }

    .image-frame img{
        height:430px;
    }

    .floating-badge{
        right:-20px;
        bottom:30px;
    }

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

    .curricular-experience .curricular-container{
        gap:55px;
    }

    .experience-image img{
        height:430px;
    }

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

    .gallery-grid{
        grid-auto-rows:210px;
    }

}


/* =========================================================
   TABLET / SMALL LAPTOP
   ========================================================= */

@media(max-width:900px){

    .curricular-intro .curricular-container{
        grid-template-columns:1fr;
        gap:55px;
    }

    .curricular-image{
        max-width:650px;
        width:100%;
        margin:auto;
    }

    .curricular-content{
        max-width:700px;
        margin:auto;
    }

    .curricular-content h1{
        font-size:46px;
    }

    .curricular-experience .curricular-container{
        grid-template-columns:1fr;
        gap:55px;
    }

    .experience-content{
        max-width:750px;
    }

    .experience-image{
        max-width:650px;
        width:100%;
        margin:auto;
    }

    .gallery-grid{
        grid-template-columns:repeat(2,1fr);
        grid-auto-rows:250px;
    }

}


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

@media(max-width:600px){

    .curricular-intro{
        padding:60px 0 75px;
    }

    .curricular-container{
        width:90%;
    }

    .curricular-intro .curricular-container{
        gap:42px;
    }

    .image-frame{
        padding:9px;
        border-radius:20px;
    }

    .image-frame img{
        height:340px;
        border-radius:15px;
    }

    .image-frame::before{
        width:75px;
        height:75px;
        left:-15px;
        bottom:-15px;
        border-radius:15px;
    }

    .image-frame::after{
        width:55px;
        height:55px;
        border-width:9px;
        right:-20px;
        top:-20px;
    }

    .floating-badge{
        right:12px;
        bottom:18px;

        min-width:auto;

        padding:12px 14px;

        border-radius:13px;
    }

    .floating-badge i{
        font-size:19px;
        margin-bottom:4px;
    }

    .floating-badge span{
        font-size:9px;
    }


    /* INTRO CONTENT */

    .section-label{
        font-size:10px;
        letter-spacing:1px;
        padding:7px 12px;
    }

    .curricular-content h1{
        font-size:34px;
        line-height:1.18;
        letter-spacing:-.7px;
    }

    .curricular-content > p{
        font-size:13px;
        line-height:1.8;
    }

    .intro-points{
        grid-template-columns:1fr;
        gap:11px;
    }

    .intro-point{
        padding:12px;
    }

    .intro-point i{
        width:34px;
        height:34px;
        flex-basis:34px;
        font-size:13px;
    }

    .intro-point span{
        font-size:12px;
    }


    /* ACTIVITIES */

    .activities-overview{
        padding:70px 0;
    }

    .activities-heading{
        margin-bottom:35px;
    }

    .activities-heading h2{
        font-size:30px;
    }

    .activities-heading p{
        font-size:13px;
        line-height:1.75;
    }

    .activities-grid{
        grid-template-columns:1fr;
        gap:16px;
    }

    .activity-card{
        min-height:220px;
        padding:28px 23px;
        border-radius:20px;
    }

    .activity-icon{
        width:54px;
        height:54px;
        border-radius:15px;
        font-size:20px;
        margin-bottom:20px;
    }

    .activity-card h3{
        font-size:17px;
    }

    .activity-card p{
        font-size:12px;
    }

    .card-number{
        font-size:48px;
    }


    /* EXPERIENCE */

    .curricular-experience{
        padding:75px 0;
    }

    .curricular-experience .curricular-container{
        gap:40px;
    }

    .experience-content h2{
        font-size:30px;
    }

    .experience-content > p{
        font-size:13px;
        line-height:1.8;
    }

    .experience-list{
        gap:10px;
    }

    .experience-list li{
        padding:12px;
        font-size:12px;
    }

    .experience-list li i{
        flex-basis:22px;
        width:22px;
        height:22px;
        font-size:9px;
    }

    .experience-image img{
        height:340px;
        border-radius:20px;
    }

    .experience-image::before{
        right:-12px;
        bottom:-12px;
        border-radius:25px;
    }

    .experience-tag{
        left:12px;
        bottom:18px;
        padding:11px 14px;
        border-radius:12px;
        font-size:11px;
    }

    .experience-tag i{
        font-size:16px;
    }


    /* SKILLS */

    .skills-section{
        padding:75px 0;
    }

    .skills-section h2{
        font-size:30px;
        margin-bottom:35px;
    }

    .skills-grid{
        grid-template-columns:1fr 1fr;
        gap:12px;
    }

    .skill-box{
        padding:24px 12px;
        border-radius:17px;
    }

    .skill-icon{
        width:50px;
        height:50px;
        border-radius:14px;
        font-size:19px;
        margin-bottom:13px;
    }

    .skill-box h3{
        font-size:14px;
    }

    .skill-box p{
        font-size:10px;
    }


    /* GALLERY */

    .curricular-gallery{
        padding:75px 0;
    }

    .gallery-grid{
        grid-template-columns:1fr 1fr;
        grid-auto-rows:160px;
        gap:10px;
    }

    .gallery-item{
        border-radius:14px;
    }

    .gallery-item.large{
        grid-column:span 2;
        grid-row:span 2;
    }

    .gallery-overlay{
        padding:14px;
    }

    .gallery-overlay span{
        font-size:11px;
    }


    /* CTA */

    .curricular-cta{
        padding:75px 0;
    }

    .cta-content h2{
        font-size:30px;
    }

    .cta-content p{
        font-size:13px;
        line-height:1.75;
    }

    .cta-button{
        min-width:160px;
        padding:13px 20px;
        font-size:12px;
    }

}


/* =========================================================
   VERY SMALL MOBILE
   ========================================================= */

@media(max-width:380px){

    .curricular-container{
        width:92%;
    }

    .image-frame img{
        height:290px;
    }

    .curricular-content h1{
        font-size:29px;
    }

    .activities-heading h2,
    .experience-content h2,
    .skills-section h2,
    .cta-content h2{
        font-size:27px;
    }

    .skills-grid{
        gap:9px;
    }

    .skill-box{
        padding:20px 8px;
    }

    .gallery-grid{
        grid-auto-rows:135px;
    }

}


/* =========================================================
   REDUCE MOTION ACCESSIBILITY
   ========================================================= */

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

    html{
        scroll-behavior:auto;
    }

    *,
    *::before,
    *::after{
        animation-duration:.01ms !important;
        animation-iteration-count:1 !important;
        transition-duration:.01ms !important;
    }

}