.header{
    background-color: #fff;
    position: sticky;
    top: 0;
}

.services-section{
    position: relative;
    overflow: hidden;
}
.services-section .heading{
    padding: clamp(35px, 5.52vw, 106px) 0 clamp(20px, 5.21vw, 101px ) clamp(20px, 3.5vw, 68px);
    background: linear-gradient(to right, #E6EDEC 1%, #99DDC9 100%);
}
.services-section h2{
    font-size: clamp(20px, 4.167vw, 80px);
}
.services-section .heading img{
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    width: clamp(100px, 58.1vw, 1114px);
    height: auto;
}

.services-section .services-content-container{
    padding: clamp(20px, 5.5vw, 105px) clamp(20px, 15.63vw, 300px) 0;
}

.services-section .services-content-container h3{
    font-size: clamp(18px, 2.54vw, 48px);
    margin-bottom: clamp(5px, 0.7vw, 12px);
    color: var(--black-color);
}

.services-section .services-content-container .services-content-desc{
    font-size: var(--medium-font-size);
    width: 91%;
    margin-bottom: clamp(8px, 0.53vw, 10px);
}
.service-card-container{
    margin-top: clamp(20px, 3.2vw, 60px);
}
.services-content-container .service-card{
    margin-bottom: clamp(35px, 5.21vw, 100px);
    gap: clamp(15px, 3.2vw, 60px);
}
.services-content-container .service-card .service-card-img-container{
    position: relative;
    width: max-content;
}

.services-content-container .service-card .service-card-img-container .service-card-main-img{
    width: clamp(120px, 31.5vw, 601px);
    height: auto;
}
.services-content-container .service-card .service-card-img-container .service-card-sub-img{
    position: absolute;
    bottom:clamp(7px, 1.6vw, 30px);
    right: clamp(7px, 1.6vw, 30px);
    width: clamp(22px,3.25vw, 62px);
    height: auto;
    transition: transform 0.6s ease-in;
}
.services-content-container .service-card .service-card-img-container .service-card-sub-img:hover{
    transform: scale(1.2);
}
.services-content-container .service-card .service-card-content-container{
    display: flex;
    flex-direction: column;
    gap: clamp(9px, 0.95vw, 18px);
}
.services-content-container .service-card:nth-of-type(even) .service-card-content-container{
    margin-left: clamp(5px, 2.35vw, 45px);
}

.service-card .service-card-content-container .service-card-header h4{
    font-size: clamp(16px, 1.9vw, 36px);
    color: var(--black-color);
    margin-bottom: clamp(5px, 0.8vw, 15px);
}
.service-card .service-card-content-container .service-card-header .sub-header{
    display: inline-flex;
    align-items: center;
    gap: clamp(5px, 0.55vw, 10px);
    font-size: clamp(12px, 0.84vw, 16px);
    line-height: clamp(12px,1.2vw, 22px);
}
.service-card-container .service-card:nth-child(1) .service-card-content-container .service-card-header .sub-header img {
    width: clamp(14px, 1.065vw, 20px);
}
.service-card-container .service-card:nth-child(2) .service-card-content-container .service-card-header .sub-header img {
    width: clamp(18px, 2.1vw, 40px);
}
.service-card-container .service-card:nth-child(3) .service-card-content-container .service-card-header .sub-header img {
    width: clamp(14px, 1.065vw, 20px);
}

.service-card .service-card-content-container .service-card-body p{
    font-size: var(--medium-font-size);
    
}
.service-card-container .service-card:nth-child(4) .service-card-content-container .service-card-body p{
    width: 97%;
}
.service-card-content-container .service-card-body .learn-more-btn{ 
    margin-top: clamp(30px, 5.5vw, 105px);
    padding: clamp(4px, 0.55vw, 9px)  clamp(12px, 1.2vw, 23px);
    font-size: var(--medium-font-size);
    width: fit-content;
}


/*Connect */
.connect-section{
    padding: clamp(20px, 5.5vw, 5.5vw) clamp(20px, 6.2vw, 118px) ;
    background-color: var(--banner-color);
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    gap: clamp(20px, 19.07vw, 366px);
}
.connect-section .connect-content-container{
    position: relative;
    z-index: 3;
}

.connect-section h2{
    font-size: clamp(16px, 2.2vw, 42px);
}
.connect-section p{
    font-size: clamp(12px, 0.84vw, 16px);
    margin: 5px 0 clamp(15px, 3vw, 55px);
}

.connect-btn-container .btn{
    font-size: var(--medium-font-size);
    padding: clamp(4px, 0.47vw, 9px)  clamp(14px, 2vw, 38px);
    display: inline-flex;
    align-items: center;
}


.connect-section .connect-bg{
    position: absolute;
    bottom: 0;
    width: 100%;
    max-height: 100%;
    z-index: 0;
    pointer-events: none;
}

@media screen and (max-width:1400px){
    .navbar .dropdown-menu {
        border-bottom: 2px solid var(--green-color);
    }
    .connect-section {
        gap: clamp(20px, 16vw, 366px);
    }
}
@media screen and (max-width:1024px){
    .navbar .dropdown-menu {
        border-bottom: 1px solid var(--green-color);
    }
    .services-section .services-content-container {
        padding: clamp(20px, 5.5vw, 105px) clamp(20px, 5vw, 300px) 0;
    }
    .service-card-content-container .service-card-body .learn-more-btn {
        margin-top: clamp(30px, 4vw, 105px);
    }
    .connect-section{
            padding: clamp(20px, 5.5vw, 5.5vw) clamp(20px, 4.5vw, 118px) ;
        gap: 0;
    }
    .connect-section p {
        width: 87%;
        font-size: 11px;
    }
}
@media screen and (max-width:768px){
    .services-section .heading img {
        width: 60vw;
    }

     .services-section .services-content-container {
        padding: clamp(20px, 5.5vw, 105px) clamp(20px, 5vw, 300px) 0;
    }
    .navbar .dropdown-menu {
        position: absolute ;
    }
    .services-section .services-content-container h3 {
        margin-bottom: 12px;
    }
    .services-section .services-content-container .services-content-desc {
        width: 100%;
    }
    .services-content-container .service-card {
        flex-direction: column;
    }
    .services-content-container .service-card .service-card-img-container .service-card-main-img {
        width: 300px;
    }
    
    .services-content-container .service-card:nth-child(even) {
        flex-direction: column-reverse;
    }
    .services-content-container .service-card:nth-child(even) .service-card-content-container{
        margin-left: 0;
    }
    .service-card-container .service-card:nth-child(4) .service-card-content-container .service-card-body p{
        width: 100%
    }
    .connect-section {
        padding: clamp(45px, 5.5vw, 5.5vw) clamp(20px, 4.5vw, 118px)  clamp(55px, 5.5vw, 5.5vw);
        gap: clamp(30px, 5.3vw, 40px);
        flex-direction: column;
    }
    .connect-section h2{
        text-align: center;
    }
    .connect-section p {
        width: 87%;
        text-align: center;
        margin: 5px auto clamp(15px, 3vw, 55px);
        font-size: 12px;
    }
    .connect-btn-container{
       text-align: center;
    }
}

@media screen and (max-width:576px){
    .services-section .heading img {
        height: clamp(92px, 17.36vw, 104px);
    }
    .services-content-container .service-card .service-card-img-container .service-card-main-img {
        width: 260px;
    }

}

@media screen and (max-width:480px){
    .services-section .heading img {
        width: 65vw;
        height: clamp(87px, 19.17vw, 92px);
    }
    .services-content-container .service-card .service-card-img-container {
        width: 100%;
    }
    .services-content-container .service-card .service-card-img-container .service-card-main-img {
        width: 99.9%;
        max-height: 340px;
        object-fit: cover;
        object-position: top;
    }
    .services-content-container .service-card .service-card-img-container .service-card-sub-img {
        width: clamp(25px, 5vw, 20px);
        bottom: clamp(15px, 4.55vw, 20px);
        right: clamp(15px, 4.55vw, 20px);
    }
    .service-card-content-container .service-card-body .learn-more-btn{ 
        margin-top: 25px;
    }
}

@media screen and (max-width:390px){
    .services-section .heading img {
        width: 80vw;
    }
    .services-section .services-content-container {
        padding: clamp(20px, 5.5vw, 105px) clamp(20px, 6vw, 300px) 0;
    }
    .services-content-container .service-card .service-card-img-container .service-card-sub-img {
        width: clamp(25px, 5vw, 20px);
        bottom: clamp(12px, 3.5vw, 20px);
        right: clamp(12px, 3.5vw, 20px);
    }
    .connect-section p {
        width: 100%;
    }
}