.about-banner{
    height:350px;
    background:url('../assets/images/about-us-banner.jpg') center/cover no-repeat;
    position:relative;
    background-position: top;
}

.banner-overlay{
    height:100%;
    background:rgba(2, 16, 44, 0.7);
    display:flex;
    align-items:center;
    justify-content:center;
}

.banner-overlay h1{
    color:#fff;
    font-size:42px;
    font-weight:700;
}
.about-page-section{
    padding:100px 0;
    background:linear-gradient(135deg,#ffffff,#f3f9ff);
}

.about-page-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:60px;
    align-items:center;
}

.about-page-text h2{
    color:#0f3d91;
    font-size:32px;
    margin-bottom:20px;
}

.about-page-text p{
    color:#555;
    line-height:1.8;
    margin-bottom:15px;
}

.about-page-image img{
    width:100%;
    border-radius:15px;
    box-shadow:0 20px 40px rgba(0,0,0,0.15);
}


.vision-mission-section{
    padding:100px 0;
    background:linear-gradient(135deg,#ffffff,#f3f9ff);
}

.vm-heading{
    text-align:center;
    margin-bottom:80px;
}

.vm-heading h2{
    font-size:34px;
    color:#0f3d91;
}


.vm-block{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:60px;
    align-items:center;
    margin-bottom:100px;
}


.vm-block.reverse{
    direction:rtl;
}

.vm-block.reverse .vm-content{
    direction:ltr;
}


.vm-image img{
    width:100%;
    border-radius:20px;
    box-shadow:0 25px 50px rgba(0,0,0,0.15);
    transition:0.5s ease;
}

.vm-image img:hover{
    transform:scale(1.05);
}


.vm-content h3{
    font-size:28px;
    color:#0f3d91;
    margin-bottom:25px;
}


.vm-card{
    background:#fff;
    padding:20px;
    border-radius:12px;
    margin-bottom:20px;
    box-shadow:0 15px 30px rgba(0,0,0,0.08);
    transition:0.4s ease;
    border-left:4px solid #00a9c9;
}

.vm-card:hover{
    transform:translateY(-6px);
    box-shadow:0 20px 40px rgba(0,0,0,0.12);
}

.vm-card h4{
    color:#0f3d91;
    margin-bottom:8px;
    font-size:18px;
}

.vm-card p{
    color:#555;
    font-size:14px;
    line-height:1.7;
}
.values-section{
    padding:100px 0;
    background:linear-gradient(135deg,#f3f9ff,#ffffff);
}

.values-heading{
    text-align:center;
    margin-bottom:60px;
}

.values-heading h2{
    font-size:32px;
    color:#0f3d91;
}

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

.value-card{
    background:#fff;
    padding:30px;
    border-radius:12px;
    text-align:center;
    box-shadow:0 15px 35px rgba(0,0,0,0.08);
    transition:0.4s ease;
}

.value-card:hover{
    transform:translateY(-8px);
}

.value-card h4{
    color:#0f3d91;
    margin-bottom:10px;
}

.value-card p{
    color:#555;
    font-size:14px;
}
@media(max-width:1024px){
    .about-page-grid,
    .vm-grid{
        grid-template-columns:1fr;
    }

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

@media(max-width:768px){
    .values-grid{
        grid-template-columns:1fr;
    }

    .banner-overlay h1{
        font-size:28px;
    }
}
@media(max-width:1024px){
    .vm-block{
        gap:40px;
    }
}

@media(max-width:768px){

    .vm-block,
    .vm-block.reverse{
        grid-template-columns:1fr;
        direction:ltr;
        text-align:center;
    }

    .vm-content{
        margin-top:30px;
    }

    .vm-content h3{
        font-size:24px;
    }
}

@media(max-width:568px){
    .vm-heading h2{
        font-size:26px;
    }
}