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

.page-banner {

    position: relative;
    height: 420px;

    background: url("../images/about/banner.jpg") center center/cover no-repeat;

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

    color: #fff;

}

.page-banner .overlay {

    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, #081C3A, #143A5E, #205072);

}

.page-banner .container {

    position: relative;
    z-index: 2;

}

.page-banner h1 {

    font-size: 58px;
    font-weight: 700;
    margin-bottom: 15px;

}

.page-banner p {

    font-size: 18px;
    letter-spacing: 2px;

}

/*=========================================
            COMPANY
=========================================*/

.company {

    padding: 110px 0;

}

.company .grid {

    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 70px;
    align-items: center;

}

.company img {

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

}

.company h2 {

    font-size: 42px;
    margin: 20px 0;
    color: #0E1A2B;

}

.company p {

    margin-bottom: 20px;
    color: #666;

}

/*=========================================
        VISION
=========================================*/

.vision {

    padding: 110px 0;
    background: #f8f9fc;

}

.vision-grid {

    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 40px;

}

.vision-card {

    background: #fff;
    padding: 50px;
    border-radius: 12px;
    text-align: center;
    box-shadow: 0 15px 30px rgba(0, 0, 0, .08);
    transition: .4s;

}

.vision-card:hover {

    transform: translateY(-10px);

}

.vision-card i {

    font-size: 65px;
    color: #00C897;
    margin-bottom: 25px;

}

.vision-card h3 {

    margin-bottom: 20px;
    color: #0E1A2B;

}

/*=========================================
        WHY
=========================================*/

.why-about {

    padding: 110px 0;

}

.about-grid {

    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 30px;

}

.about-grid div {

    background: #fff;
    border-radius: 10px;
    padding: 40px;
    text-align: center;
    box-shadow: 0 10px 25px rgba(0, 0, 0, .08);
    transition: .4s;

}

.about-grid div:hover {

    transform: translateY(-8px);

}

.about-grid i {

    font-size: 55px;
    color: #00C897;
    margin-bottom: 20px;

}

.about-grid h3 {

    margin-bottom: 15px;
    color: #0E1A2B;

}

/*=========================================
            PROCESS
=========================================*/

.process {

    padding: 110px 0;
    background: #0A4D68;

}

.process .title h2,
.process .title span {

    color: #fff;

}

.process-grid {

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

}

.process-grid div {

    background: #fff;
    text-align: center;
    padding: 50px 20px;
    border-radius: 12px;

}

.process-grid span {

    width: 70px;
    height: 70px;

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

    margin: auto;
    margin-bottom: 20px;

    border-radius: 50%;
    background: #00C897;
    color: #fff;

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

}

.process-grid h3 {

    color: #0E1A2B;

}

.team-section{
    padding:100px 0;
    background:#f8fbfd;
}

.section-title{
    text-align:center;
    margin-bottom:60px;
}

.section-title span{
    color:#0b8c8c;
    font-weight:600;
    text-transform:uppercase;
    letter-spacing:1px;
}

.section-title h2{
    font-size:40px;
    margin:15px 0;
    color:#002b45;
}

.section-title p{
    max-width:700px;
    margin:auto;
    color:#666;
}

.team-grid{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:40px;
}

.team-card{
    background:#fff;
    border-radius:18px;
    overflow:hidden;
    box-shadow:0 10px 30px rgba(0,0,0,.08);
    transition:.4s;
}

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

.team-img{
    height:350px;
    overflow:hidden;
}

.team-img img{
    width:100%;
    height:100%;
    object-fit:cover;
}

.team-content{
    padding:35px;
}

.team-content h3{
    font-size:28px;
    color:#002b45;
    margin-bottom:5px;
}

.team-content span{
    display:inline-block;
    color:#0b8c8c;
    font-weight:600;
    margin-bottom:20px;
}

.team-content p{
    color:#555;
    line-height:1.8;
    margin-bottom:20px;
}

.team-content h4{
    margin:25px 0 15px;
    color:#002b45;
}

.team-content ul{
    padding-left:20px;
}

.team-content ul li{
    margin-bottom:10px;
    color:#555;
    line-height:1.6;
}



/*=========================================
        RESPONSIVE
=========================================*/

@media(max-width:991px){

.team-grid{
    grid-template-columns:1fr;
}

.team-img{
    height:300px;
}

.section-title h2{
    font-size:32px;
}

}

@media(max-width:992px) {

    .company .grid {

        grid-template-columns: 1fr;

    }

    .vision-grid {

        grid-template-columns: 1fr;

    }

    .about-grid {

        grid-template-columns: 1fr;

    }

    .process-grid {

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

    }

}

@media(max-width:768px) {

    .page-banner {

        height: 300px;

    }

    .page-banner h1 {

        font-size: 42px;

    }

    .company {

        padding: 80px 0;
        text-align: center;

    }

    .vision {

        padding: 80px 0;

    }

    .why-about {

        padding: 80px 0;

    }

    .process {

        padding: 80px 0;

    }

}

@media(max-width:576px) {

    .process-grid {

        grid-template-columns: 1fr;

    }

    .page-banner h1 {

        font-size: 34px;

    }

    .company h2 {

        font-size: 32px;

    }

}