/*=====================================
            PAGE BANNER
======================================*/

.page-banner{

    position: relative;

    height: 350px;

    background: url("../images/building2.jpeg") center/cover no-repeat;

    display: flex;

    justify-content: center;

    align-items: center;

}

.banner-overlay{

    position: absolute;

    inset: 0;

      background:linear-gradient(rgba(30,27,75,.75),rgba(49,46,129,.70));

}

.banner-content{

    position: relative;

    z-index: 2;

    text-align: center;

    color: #fff;

}

.banner-content h1{

    font-size: 52px;

    margin-bottom: 15px;

    font-weight: 700;

}

.banner-content p{

    font-size: 18px;

}

.banner-content a{

    color: #06B6D4;

    text-decoration: none;

    font-weight: 600;

}

.banner-content span{

    margin: 0 10px;

    color: #fff;

}

/*=====================================
        COMMON HEADING
======================================*/

.section-heading{

    text-align: center;

    margin-bottom: 60px;

}

.section-heading h4{

    color: #06B6D4;

    font-size: 18px;

    text-transform: uppercase;

    letter-spacing: 2px;

    margin-bottom: 10px;

}

.section-heading h2{

    color: #312E81;

    font-size: 42px;

    margin-bottom: 18px;

}

.title-line{

    width: 90px;

    height: 4px;

    background: #06B6D4;

    margin: auto;

    border-radius: 20px;

}

/*=====================================
        ABOUT COLLEGE
======================================*/

.about-college{

    padding: 90px 8%;

    background: #F8FAFC;

}

.about-container{

    max-width: 1200px;

    margin: auto;

    display: flex;

    align-items: center;

    gap: 60px;

}

.about-image{

    flex: 1;

}

.about-image img{

    width: 100%;

    height: 480px;

    object-fit: cover;

    border-radius: 20px;

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

}

.about-content{

    flex: 1;

}

.about-content h3{

    color: #312E81;

    font-size: 36px;

    margin-bottom: 25px;

}

.about-content p{

    color: #555;

    font-size: 17px;

    line-height: 1.9;

    margin-bottom: 20px;

}

.about-btn{

    display: inline-block;

    margin-top: 15px;

    background: #312E81;

    color: #fff;

    text-decoration: none;

    padding: 14px 34px;

    border-radius: 40px;

    transition: .35s;

    font-weight: 600;

}

.about-btn:hover{

    background: #06B6D4;

    transform: translateY(-3px);

}

/*=====================================
        MANAGEMENT SECTION
======================================*/

.management-card{
    display:flex;
    gap:40px;
    align-items:flex-start;
    background:#fff;
    padding:40px;
    border-radius:20px;
    box-shadow:0 10px 30px rgba(0,0,0,.08);
    margin-bottom:50px;
}

.management-image{
    flex:0 0 260px;
}

.management-image img{
    width:260px;
    border-radius:15px;
    border:5px solid #22D3EE;
}

.management-content{
    flex:1;
}

.management-content h3{
    color:#312E81;
    margin-bottom:20px;
    font-size:30px;
}

.management-content p{
    line-height:1.9;
    color:#555;
    text-align:justify;
    margin-bottom:18px;
}

.management-sign{
    margin-top:30px;
}

.management-sign h4{
    color:#312E81;
    font-size:24px;
    margin-bottom:5px;
}

.management-sign span{
    color:#06B6D4;
    font-weight:600;
    font-size:17px;
}


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

.vision-mission{

    padding:90px 8%;

    background:#F8FAFC;

}

.vision-container{

    max-width:1200px;

    margin:auto;

    display:grid;

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

    gap:35px;

}

.vision-card{

    background:#fff;

    padding:45px 35px;

    text-align:center;

    border-radius:20px;

    box-shadow:0 10px 30px rgba(0,0,0,.08);

    transition:.35s;

}

.vision-card:hover{

    transform:translateY(-10px);

    box-shadow:0 18px 35px rgba(0,0,0,.12);

}

.vision-card i{

    width:90px;

    height:90px;

    line-height:90px;

    border-radius:50%;

    background:#312E81;

    color:#06B6D4;

    font-size:34px;

    margin-bottom:25px;

}

.vision-card h3{

    color:#312E81;

    font-size:30px;

    margin-bottom:18px;

}

.vision-card p{

    color:#666;

    line-height:1.9;

    font-size:16px;

}

/*=====================================
        WHY CHOOSE US
======================================*/

.why-us{

    padding:90px 8%;

    background:#fff;

}

.features-grid{

    max-width:1200px;

    margin:auto;

    display:grid;

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

    gap:30px;

}

.feature-card{

    background:#F8FAFC;

    padding:35px 25px;

    text-align:center;

    border-radius:18px;

    transition:.35s;

    box-shadow:0 8px 20px rgba(0,0,0,.08);

}

.feature-card:hover{

    background:#312E81;

    transform:translateY(-8px);

}

.feature-card i{

    font-size:40px;

    color:#06B6D4;

    margin-bottom:20px;

}

.feature-card h3{

    color:#312E81;

    margin-bottom:15px;

    transition:.35s;

}

.feature-card p{

    color:#666;

    line-height:1.8;

    transition:.35s;

}

.feature-card:hover h3,

.feature-card:hover p{

    color:#fff;

}

/*=====================================
        HIGHLIGHTS
======================================*/

.highlights{

    padding:90px 8%;

    background:linear-gradient(135deg,#312E81,#4338CA);

}

.highlights .section-heading h4,

.highlights .section-heading h2{

    color:#fff;

}

.highlights .title-line{

    background:#06B6D4;

}

.highlight-grid{

    max-width:1200px;

    margin:auto;

    display:grid;

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

    gap:30px;

}

.highlight-box{

    background:rgba(255,255,255,.08);

    backdrop-filter:blur(6px);

    border-radius:18px;

    padding:40px 20px;

    text-align:center;

    transition:.35s;

}

.highlight-box:hover{

    transform:translateY(-8px);

    background:#06B6D4;

}

.highlight-box h2{

    color:#fff;

    font-size:46px;

    margin-bottom:12px;

}

.highlight-box p{

    color:#fff;

    font-size:18px;

}

/*=====================================
        INFRASTRUCTURE
======================================*/

.infrastructure{

    padding:90px 8%;

    background:#F8FAFC;

}

.infra-grid{

    max-width:1200px;

    margin:auto;

    display:grid;

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

    gap:30px;

}

.infra-card{

    background:#fff;

    border-radius:18px;

    overflow:hidden;

    box-shadow:0 10px 25px rgba(0,0,0,.08);

    transition:.35s;

}

.infra-card:hover{

    transform:translateY(-10px);

}

.infra-card img{

    width:100%;

    height:230px;

    object-fit:cover;

}

.infra-card h3{

    text-align:center;

    padding:22px;

    color:#312E81;

    font-size:22px;

}