/*====================================================
                ABOUT PAGE HERO
====================================================*/

.page-header{

    background:linear-gradient(rgba(15,23,42,.75),rgba(15,23,42,.75)),
    url("../images/about-banner.jpg") center/cover no-repeat;

    min-height:55vh;

    display:flex;

    justify-content:center;

    align-items:center;

    text-align:center;

    color:#fff;

}

.page-header-content{

    max-width:800px;

    margin:auto;

}

.page-header span{

    color:var(--primary);

    font-size:15px;

    font-weight:600;

    letter-spacing:2px;

    text-transform:uppercase;

}

.page-header h1{

    font-size:60px;

    margin:20px 0;

    line-height:72px;

}

.page-header p{

    color:#ddd;

    font-size:18px;

    line-height:32px;

}

.breadcrumb{

    margin-top:35px;

}

.breadcrumb a{

    color:#fff;

    text-decoration:none;

    transition:.3s;

}

.breadcrumb a:hover{

    color:var(--primary);

}

.breadcrumb span{

    margin:0 8px;

    color:#fff;

}

/*====================================================
                TEAM
====================================================*/

.team{

    padding:120px 0;

    background:#fff;

}

.team-grid{

    display:grid;

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

    gap:35px;

    margin-top:70px;

}

.team-card{

    background:#fff;

    border-radius:18px;

    overflow:hidden;

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

    transition:.4s;

}

.team-card:hover{

    transform:translateY(-10px);

}

.team-card img{

    width:100%;

    height:380px;

    object-fit:cover;

}

.team-content{

    padding:30px;

    text-align:center;

}

.team-content h3{

    margin-bottom:8px;

    font-size:25px;

}

.team-content span{

    color:var(--primary);

    font-size:15px;

}

.social{

    display:flex;

    justify-content:center;

    gap:14px;

    margin-top:25px;

}

.social a{

    width:42px;

    height:42px;

    border-radius:50%;

    display:flex;

    justify-content:center;

    align-items:center;

    background:#f5f5f5;

    color:#555;

    transition:.3s;

}

.social a:hover{

    background:var(--primary);

    color:#fff;

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

.why{

    padding:120px 0;

    background:#f8fafc;

}

.why-container{

    display:grid;

    grid-template-columns:1fr 1fr;

    align-items:center;

    gap:80px;

}

.why-image{

    position:relative;

}

.why-image img{

    width:100%;

    border-radius:20px;

    box-shadow:0 20px 45px rgba(0,0,0,.12);

    transition:.4s;

}

.why-image img:hover{

    transform:scale(1.03);

}

.why-content span{

    display:inline-block;

    color:var(--primary);

    font-weight:600;

    letter-spacing:2px;

    margin-bottom:18px;

}

.why-content h2{

    font-size:48px;

    line-height:60px;

    color:#111827;

    margin-bottom:25px;

}

.why-content p{

    font-size:17px;

    color:#6b7280;

    line-height:32px;

    margin-bottom:40px;

}

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

.why-item{

    display:flex;

    align-items:flex-start;

    gap:20px;

    margin-bottom:30px;

}

.why-item i{

    width:55px;

    height:55px;

    min-width:55px;

    border-radius:50%;

    background:var(--primary);

    color:#fff;

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:22px;

    box-shadow:0 10px 20px rgba(79,70,229,.25);

}

.why-item h4{

    font-size:22px;

    color:#111827;

    margin-bottom:8px;

}

.why-item p{

    margin:0;

    line-height:28px;

    color:#6b7280;

}

/*======================================
            HOVER EFFECT
======================================*/

.team-card,
.why-image img{

    transition:.4s;

}

.team-card:hover{

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

}

.team-card:hover img{

    transform:scale(1.05);

}

.team-card{

    overflow:hidden;

}

.team-card img{

    transition:.5s;

}

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

.team-card{

    animation:fadeUp .8s ease;

}

.why-content{

    animation:fadeLeft 1s ease;

}

.why-image{

    animation:fadeRight 1s ease;

}

@keyframes fadeRight{

    from{

        opacity:0;

        transform:translateX(60px);

    }

    to{

        opacity:1;

        transform:translateX(0);

    }

}

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

@media(max-width:992px){

.team-grid{

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

}

.why-container{

    grid-template-columns:1fr;

}

.why-content{

    text-align:center;

}

.why-item{

    text-align:left;

}

}

@media(max-width:768px){

.page-header{

    min-height:45vh;

    padding:120px 20px 80px;

}

.page-header h1{

    font-size:42px;

    line-height:54px;

}

.team-grid{

    grid-template-columns:1fr;

}

.team-card img{

    height:320px;

}

.why-content h2{

    font-size:38px;

    line-height:48px;

}

}

@media(max-width:576px){

.page-header h1{

    font-size:34px;

    line-height:44px;

}

.page-header p{

    font-size:16px;

    line-height:28px;

}

.why-content h2{

    font-size:30px;

    line-height:40px;

}

.why-item{

    gap:15px;

}

.why-item i{

    width:48px;

    height:48px;

    min-width:48px;

    font-size:18px;

}

.team{

    padding:80px 0;

}

.why{

    padding:80px 0;

}

}