/* =========================================================
   SANATAN RATAN ACADEMY
   COURSES PAGE
========================================================= */

.sra-courses-page{
    --sra-brown:#75451f;
    --sra-dark:#3d2618;
    --sra-copper:#a66a35;
    --sra-gold:#bd884c;
    --sra-cream:#fbf7f0;
    --sra-light:#f5eee4;
    --sra-border:#e7d8c5;
    --sra-text:#5a4636;

    background:#fff;
    color:var(--sra-dark);
    overflow:hidden;
}


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

.sra-courses-hero{
    position:relative;
    padding:105px 20px 95px;
    text-align:center;
    background:
        linear-gradient(
            180deg,
            #fffdf9 0%,
            #fbf7f0 100%
        );
}

.sra-courses-hero::before{
    content:"";
    position:absolute;
    width:420px;
    height:420px;
    border-radius:50%;
    background:rgba(189,136,76,.08);
    top:-230px;
    left:-170px;
}

.sra-courses-hero::after{
    content:"";
    position:absolute;
    width:340px;
    height:340px;
    border-radius:50%;
    background:rgba(117,69,31,.05);
    right:-150px;
    bottom:-190px;
}

.sra-courses-hero-inner{
    position:relative;
    z-index:2;
    max-width:850px;
    margin:auto;
}

.sra-courses-eyebrow{
    display:inline-block;
    margin-bottom:18px;

    font-size:12px;
    font-weight:800;
    letter-spacing:2.5px;

    color:var(--sra-copper);
}

.sra-courses-hero h1{
    margin:0;

    font-size:56px;
    line-height:1.12;
    font-weight:800;

    color:var(--sra-dark);
}

.sra-courses-hero h1 span{
    display:block;
    color:var(--sra-brown);
}

.sra-courses-hero p{
    max-width:700px;
    margin:25px auto 0;

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

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


/* =========================================================
   COURSES SECTION
========================================================= */

.sra-courses-section{
    padding:95px 20px;
    background:#fff;
}

.sra-courses-container{
    max-width:1180px;
    margin:auto;
}

.sra-courses-heading{
    max-width:720px;
    margin:0 auto 55px;
    text-align:center;
}

.sra-courses-heading > span{
    display:block;

    margin-bottom:13px;

    font-size:11px;
    font-weight:800;
    letter-spacing:2.3px;

    color:var(--sra-copper);
}

.sra-courses-heading h2{
    margin:0;

    font-size:40px;
    line-height:1.2;
    font-weight:800;

    color:var(--sra-dark);
}

.sra-courses-heading h2 strong{
    color:var(--sra-brown);
}

.sra-courses-heading p{
    margin:18px auto 0;

    max-width:650px;

    font-size:16px;
    line-height:1.7;

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


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

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


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

.sra-course-card{
    position:relative;

    min-height:355px;
    padding:34px 30px 30px;

    background:#fff;

    border:1px solid var(--sra-border);
    border-radius:18px;

    box-shadow:
        0 8px 25px rgba(77,49,26,.06);

    overflow:hidden;

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

.sra-course-card::before{
    content:"";

    position:absolute;
    top:0;
    left:0;

    width:100%;
    height:4px;

    background:
        linear-gradient(
            90deg,
            var(--sra-brown),
            var(--sra-gold)
        );
}

.sra-course-card:hover{
    transform:translateY(-8px);

    border-color:#d6b991;

    box-shadow:
        0 18px 40px rgba(77,49,26,.12);
}


/* =========================================================
   NUMBER
========================================================= */

.sra-course-number{
    position:absolute;

    top:18px;
    right:22px;

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

    color:#cbb69d;
}


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

.sra-course-icon{
    width:62px;
    height:62px;

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

    margin-bottom:22px;

    border-radius:15px;

    background:var(--sra-cream);

    border:1px solid #eadbc8;

    color:var(--sra-brown);

    font-size:16px;
    font-weight:900;
    letter-spacing:.5px;
}


/* =========================================================
   TAG
========================================================= */

.sra-course-tag{
    display:block;

    margin-bottom:9px;

    font-size:10px;
    font-weight:800;
    letter-spacing:1.5px;

    color:var(--sra-copper);
}


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

.sra-course-card h3{
    margin:0 0 13px;

    font-size:24px;
    line-height:1.25;
    font-weight:800;

    color:var(--sra-dark);
}


/* =========================================================
   DESCRIPTION
========================================================= */

.sra-course-card p{
    margin:0;

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

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


/* =========================================================
   READ MORE
========================================================= */

.sra-course-read-more{
    position:absolute;

    left:30px;
    bottom:27px;

    display:inline-flex;
    align-items:center;
    gap:9px;

    color:var(--sra-brown) !important;

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

    text-decoration:none !important;

    transition:
        gap .25s ease,
        color .25s ease;
}

.sra-course-read-more span{
    font-size:20px;
    line-height:1;
}

.sra-course-read-more:hover{
    gap:14px;
    color:var(--sra-copper) !important;
}


/* =========================================================
   FEATURED CARD
========================================================= */

.sra-course-featured{
    background:
        linear-gradient(
            145deg,
            #fffdf9,
            #f8f0e6
        );
}


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

.sra-courses-cta{
    padding:90px 20px;

    background:
        linear-gradient(
            135deg,
            #f8f0e6 0%,
            #fffaf4 100%
        );

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

.sra-courses-cta-inner{
    max-width:800px;
    margin:auto;

    text-align:center;
}

.sra-courses-cta-inner > span{
    display:block;

    margin-bottom:14px;

    font-size:11px;
    font-weight:800;
    letter-spacing:2px;

    color:var(--sra-copper);
}

.sra-courses-cta h2{
    margin:0;

    font-size:40px;
    line-height:1.2;
    font-weight:800;

    color:var(--sra-dark);
}

.sra-courses-cta h2 strong{
    color:var(--sra-brown);
}

.sra-courses-cta p{
    max-width:620px;
    margin:20px auto 28px;

    font-size:16px;
    line-height:1.7;

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

.sra-courses-cta-button{
    display:inline-flex;
    align-items:center;
    gap:12px;

    padding:14px 24px;

    border-radius:8px;

    background:var(--sra-brown);

    color:#fff !important;

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

    text-decoration:none !important;

    box-shadow:0 8px 20px rgba(117,69,31,.18);

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

.sra-courses-cta-button:hover{
    transform:translateY(-3px);
    background:var(--sra-copper);
}

.sra-courses-cta-button span{
    font-size:19px;
}


/* =========================================================
   EXISTING ANIMATION
========================================================= */

.sra-courses-page .animate{
    opacity:0;
    transform:translateY(25px);

    transition:
        opacity .7s ease,
        transform .7s ease;
}

.sra-courses-page .animate.show{
    opacity:1;
    transform:translateY(0);
}


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

@media (max-width:950px){

    .sra-courses-hero h1{
        font-size:46px;
    }

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

}


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

@media (max-width:600px){

    .sra-courses-hero{
        padding:75px 18px 70px;
    }

    .sra-courses-hero h1{
        font-size:36px;
    }

    .sra-courses-hero p{
        font-size:15px;
        line-height:1.7;
    }

    .sra-courses-section{
        padding:70px 16px;
    }

    .sra-courses-heading{
        margin-bottom:38px;
    }

    .sra-courses-heading h2{
        font-size:31px;
    }

    .sra-courses-heading p{
        font-size:15px;
    }

    .sra-courses-grid{
        grid-template-columns:1fr;
        gap:18px;
    }

    .sra-course-card{
        min-height:350px;
        padding:30px 25px;
    }

    .sra-course-read-more{
        left:25px;
        bottom:25px;
    }

    .sra-courses-cta{
        padding:70px 18px;
    }

    .sra-courses-cta h2{
        font-size:31px;
    }

}