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

.page-banner{
    position:relative;
    width:100%;
    height:320px;
    background:url("../images/about-banner.webp") center center/cover no-repeat;
    display:flex;
    justify-content:center;
    align-items:center;
    overflow:hidden;
}

.banner-overlay{
    position:absolute;
    inset:0;
    background:rgba(0,0,0,.55);
}

.banner-content{
    position:relative;
    z-index:2;
    text-align:center;
    color:#fff;
}

.banner-content h1{
    font-size:46px;
    font-weight:700;
    margin-bottom:12px;
    font-family:'Playfair Display',serif;
}

.banner-content p{
    font-size:18px;
    max-width:650px;
    margin:auto;
}


/* ==========================================================
   MAIN SECTION
   ========================================================== */

.presence-section{
    padding:90px 20px;
    background:#fff;
}

.container{
    width:100%;
    max-width:1300px;
    margin:auto;
}

.presence-grid{
    display:grid;
    grid-template-columns:1.1fr 1fr;
    gap:70px;
    align-items:center;
}


/* ==========================================================
   MAP
   ========================================================== */

.map-column{
    display:flex;
    justify-content:center;
    align-items:center;
}

#india-map{
    width:100%;
    max-width:620px;
    height:650px;
    border:none;
}


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

.content-column{
    display:flex;
    flex-direction:column;
    justify-content:center;
}

.section-subtitle{

    color:#1D4ED8;

    text-transform:uppercase;

    font-size:14px;

    font-weight:600;

    letter-spacing:2px;

    margin-bottom:18px;
}

.content-column h2{

    font-size:40px;

    color:#173F8A;

    margin-bottom:25px;

    line-height:1.3;

    font-family:'Playfair Display',serif;
}

.content-column p{

    color:#555;

    font-size:17px;

    margin-bottom:35px;

    text-align:justify;
}


/* ==========================================================
   STATES
   ========================================================== */

.state-box{

    display:flex;

    flex-direction:column;

    gap:18px;
}

.state-item{

    display:flex;

    align-items:center;

    font-size:17px;

    font-weight:500;

    color:#333;
}

.dot{

    width:14px;

    height:14px;

    border-radius:50%;

    margin-right:15px;

    background:#CBD5E1;

    transition:.3s;
}

.active .dot{

    background:#173F8A;
}

.inactive .dot{

    background:#BDBDBD;
}


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

.state-item{

    transition:.3s;
}

.state-item:hover{

    transform:translateX(8px);

    color:#173F8A;
}

.state-item:hover .dot{

    transform:scale(1.2);
}


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

.map-column{

    animation:slideLeft 1s ease;
}

.content-column{

    animation:slideRight 1s ease;
}

@keyframes slideLeft{

    from{

        opacity:0;

        transform:translateX(-40px);
    }

    to{

        opacity:1;

        transform:translateX(0);
    }

}

@keyframes slideRight{

    from{

        opacity:0;

        transform:translateX(40px);
    }

    to{

        opacity:1;

        transform:translateX(0);
    }

}


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

@media(max-width:1100px){

    .presence-grid{

        gap:40px;
    }

    .content-column h2{

        font-size:34px;
    }

}


@media(max-width:992px){

    .presence-grid{

        grid-template-columns:1fr;
    }

    .map-column{

        order:1;
    }

    .content-column{

        order:2;

        text-align:center;
    }

    .content-column p{

        text-align:center;
    }

    .state-box{

        align-items:center;
    }

    #india-map{

        max-width:500px;

        height:auto;
    }

}


@media(max-width:768px){

    .page-banner{

        height:250px;
    }

    .banner-content h1{

        font-size:36px;
    }

    .banner-content p{

        font-size:16px;
    }

    .presence-section{

        padding:70px 18px;
    }

    .content-column h2{

        font-size:30px;
    }

    .content-column p{

        font-size:16px;
    }

}


@media(max-width:576px){

    .banner-content h1{

        font-size:30px;
    }

    .banner-content p{

        width:90%;
    }

    .content-column h2{

        font-size:26px;
    }

    .section-subtitle{

        font-size:13px;
    }

    #india-map{

        max-width:100%;
    }

}