/* =========================================
   SCHOLASTIC SECTION
========================================= */

.scholastic-section {
    position: relative;
    padding: 100px 20px;

    background: #f7f8fa;

    overflow: hidden;
}


/* Decorative Background */

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

    position: absolute;

    width: 400px;
    height: 400px;

    border-radius: 50%;

    background: rgba(217, 146, 74, 0.07);

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


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

    position: absolute;

    width: 350px;
    height: 350px;

    border-radius: 50%;

    background: rgba(30, 38, 64, 0.04);

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


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

.scholastic-container {
    max-width: 1200px;

    margin: auto;

    position: relative;

    z-index: 2;
}


/* =========================================
   SECTION HEADING
========================================= */

.scholastic-heading {
    max-width: 700px;

    margin: 0 auto 60px;

    text-align: center;
}


.scholastic-heading span {
    display: inline-block;

    color: #d9924a;

    font-size: 14px;

    font-weight: 700;

    letter-spacing: 2px;

    margin-bottom: 12px;
}


.scholastic-heading h2 {
    margin: 0 0 18px;

    color: #1e2640;

    font-size: 44px;

    font-weight: 700;
}


.scholastic-heading h2 strong {
    color: #d9924a;
}


.scholastic-heading p {
    margin: 0;

    color: #666;

    font-size: 16px;

    line-height: 1.7;
}


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

.scholastic-grid {

    display: grid;

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

    gap: 30px;
}


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

.scholastic-card {

    background: #ffffff;

    border-radius: 16px;

    overflow: hidden;

    border: 1px solid #eeeeee;

    box-shadow:
        0 8px 25px rgba(30, 38, 64, 0.08);

    transition:
        transform 0.35s ease,
        box-shadow 0.35s ease;

}


/* Card Hover */

.scholastic-card:hover {

    transform: translateY(-10px);

    box-shadow:
        0 18px 40px rgba(30, 38, 64, 0.15);
}


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

.scholastic-image {

    width: 100%;

    height: 230px;

    overflow: hidden;

    position: relative;
}


.scholastic-image img {

    width: 100%;

    height: 100%;

    object-fit: cover;

    display: block;

    transition: transform 0.5s ease;
}


/* Image Hover */

.scholastic-card:hover
.scholastic-image img {

    transform: scale(1.08);
}


/* =========================================
   GOLD IMAGE LINE
========================================= */

.scholastic-image::after {

    content: "";

    position: absolute;

    bottom: 0;

    left: 0;

    width: 100%;

    height: 4px;

    background: #d9924a;
}


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

.scholastic-content {

    padding: 28px 25px 30px;
}


.scholastic-content h3 {

    margin: 0 0 12px;

    color: #1e2640;

    font-size: 21px;

    font-weight: 700;
}


.scholastic-content p {

    margin: 0;

    color: #666;

    font-size: 15px;

    line-height: 1.7;
}


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

.scholastic-card:hover
.scholastic-content h3 {

    color: #d9924a;

    transition: color 0.3s ease;
}


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

@media (max-width: 950px) {

    .scholastic-grid {

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

    }

}


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

@media (max-width: 600px) {

    .scholastic-section {

        padding: 65px 18px;

    }


    .scholastic-heading {

        margin-bottom: 40px;

    }


    .scholastic-heading h2 {

        font-size: 34px;

    }


    .scholastic-heading p {

        font-size: 15px;

    }


    .scholastic-grid {

        grid-template-columns: 1fr;

        gap: 22px;

    }


    .scholastic-image {

        height: 220px;

    }


    .scholastic-content {

        padding: 24px 22px 28px;

    }


    .scholastic-content h3 {

        font-size: 19px;

    }

}




/* HERO */





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

.hero{

    position:relative;

    width:100%;

    min-height:85vh;

    background:url("../home/school.jpeg") center center/cover no-repeat;

    display:flex;

    justify-content:center;

    align-items:center;

    text-align:center;

    overflow:hidden;
}

/* Dark overlay */

.overlay{

    position:absolute;

    top:0;
    left:0;

    width:100%;
    height:100%;

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

    z-index:1;
}

/* Content */

.hero-content{

    position:relative;

    z-index:2;

    max-width:850px;

    padding:20px;

    color:#fff;
}

.hero-content h1{

    font-size:3.5rem;

    margin-bottom:20px;

    font-weight:700;

    line-height:1.2;
}



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

@media (max-width:992px){

.hero{

    min-height:75vh;
}

.hero-content h1{

    font-size:2.8rem;
}


}

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

@media (max-width:768px){

.hero{

    min-height:65vh;

    padding:80px 20px;
}

.hero-content h1{

    font-size:2rem;
}



}