.service-page{

    display: flex;

    flex-direction: column;

    align-items: center;

}



.service-page section{

    max-width: 1400px;

}



.service-page .sec-1{

    display: grid;

    grid-template-columns: 1.2fr .8fr;

    gap: 4rem;

    /* height:700px; */

    background-repeat:no-repeat;

    background-position: calc(50% + 212px) calc(100% - 124px);

    background-size: 70% auto;

     margin-top:24px;

}





.service-page .sec-1 .grid-col:first-child{

    display: flex;

    flex-direction: column;

    justify-content: center;

    gap: 24px;

}



.service-page  .hero-text{
    font-family: "Playfair display", serif;

    font-size: 64px;

    margin: 0;

}



.service-page .sec-1 .hero-desc{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:24px;

    

}



.service-page .sec-1 .hero-desc img{

    position:absolute;

    right: -22px;

}



.service-page  .hero-head{

    font-family: "Playfair display", serif;

    font-size: 32px;

    width:fit-content;

    padding:4px 24px;

    border:1px solid #ddd;

    border-radius:150px;

    position:relative;

}



.service-page .hero-head img{
    font-family: '';

    position:absolute;

    width:40px;

    bottom: -10px;

    right: -21px;

}



.service-page  .hero-caption{
    font-family: 'inter', sans-serif;

    font-size: 14px;

    margin: 0;

    text-align: start;

}



.service-page .sec-1 .grid-col:nth-child(2){

    display: flex;

    justify-content: center;

    align-items: center;

    gap: 32px;

   

}



/* .service-page .sec-1 .img-col{

    height: 700px;

} */





.service-page .sec-1 .image-wrapper{

    overflow: hidden;

    border-radius: 20px;

    display: flex;

    align-items: center;

    /* width: ; */

}



.service-page .sec-1 .image-wrapper.image-1{

    height: fit-content;

    justify-content: center;

    margin-bottom: 64px;

}



.service-page .sec-1 .image-wrapper.image-2, .service-page .sec-1 .image-wrapper.image-3{

    height: 50%;

    

}



.service-page .sec-1 .img-col:nth-child(2){

    display: flex;

    flex-direction: column;

    gap: 32px;

    height: 60%;

}



.service-page .sec-1 .img-col:nth-child(1){

    display: flex;

    flex-direction: column;

    justify-content: center;

    align-items: center;

    gap: 32px;

}





.service-page .sec-2 .nav-item img{

    width:28px;

    

}

.service-page .sec-2 .nav-item button{

    font-family:inter;

    border-radius:40px;

    border:1px solid #ddd;

    background:var(--basewhite);

    padding:8px 8px !important;

    font-size:16px;

    font-family: "inter", san-serif !important;

    white-space:nowrap;

    overflow: hidden;

    text-overflow:ellipsis;

    max-width:315px;

}

.service-nav-link.active{

    color:#fff !important;

    background:var(--blue) !important;

    

}

.service-page .sec-2{

    width:100%;

}



.service-page .service-card{



    overflow:hidden;

    border-radius:12px;

    

}

.service-page .service-card img{

    display:flex;

    align-items:center;

    justify-content:center;

    /*width:100%;*/

    height:100%;

}



.service-page .service-card img{

    display:flex;

    align-items:center;

    justify-content:center;

    /*width:100%;*/

    height:100%;

    animation: scaleOut 0.3s ease-in-out forwards;

}



.service-page .service-card img:hover{



    animation: scaleIn 0.3s ease-in-out forwards;

}







.service-page .service-card .card-details-holder {

    position: absolute;

    bottom: 0;

    padding: 20px;

    background: rgba(0, 0, 0, .5) !important;

    backdrop-filter: blur(10px);

    color: white !important;

    opacity: 0;

    transform: translateY(20px);

    transition: opacity 0.5s ease, transform 0.5s ease;

}



.service-page .service-card .card-details-holder >*{

    font-family: "Inter", sans-serif;

}



.service-page .service-card:hover .card-details-holder {

    opacity: 1;

    transform: translateY(0);

}



.service-page .service-card .service-card-title{

    font-size:24px;

    font-weight:600;

}



.service-page .sec-2 .card-wrapper{

    display:flex;

    justify-content:space-between;

}



.service-page .sec-2 .tab-content{

    padding:24px;

    background:#fbfbfb;

    border:1px solid #ddd;

    border-radius:16px;

    height:fit-content;

}



.service-page .sec-2 .tab-pane>*{

    padding-bottom:20px !important;

    margin:0;

    

}



.service-page .sec-2 .service-card .image-wrapper{

    height:400px;

    display:flex;

    justify-content:center;

}



.swiper-slide{

    width:400px;

}

@media (max-width:1500px){

    .service-page .sec-1, .service-page .sec-2{

        grid-template-columns: 1fr 1fr;

        padding:0 40px;

    }

    .service-page .sec-1 .grid-col:first-child, .service-page .sec-1 .grid-col:nth-child(2){

        max-height:500px;

    }

    .service-page .sec-1 .img-col:nth-child(2){

        height: 65%;

    }

    .service-page .sec-1 .image-wrapper.image-1{

        margin:64px 0 0 0 ;

    }

    .service-page .hero-head{

    font-size:20px;

    }

    .service-page .hero-text{

        font-size:40px;

    }

    .service-page .sec-1 .hero-desc .image-wrapper{

        display:none;

        grid-template-columns: unset;

        

    }

    .service-page .sec-1 .hero-desc{

        grid-template-columns: unset;

        

    }

    .service-page .hero-caption{

        font-size:12px;

    }

    .service-page .sec-1 .hero-desc{

        gap:12px;

    }

    .service-page .sec-1 .grid-col:first-child{

        gap:16px;

    }

}



@media only screen and (max-width: 991px) {

    

    .service-page .sec-1 {

        margin-top: 100px;

    }

    

    .service-page .sec-1{

        grid-template-columns: unset;

        padding:0 40px;

    }

    

    .service-page .hero-head {

        font-size: 16px;

    }

    

    .service-page .hero-text {

        font-size: 32px;

    }

    

    .service-page .hero-caption {

        font-size: 12px;

        text-align:center;



    }

    

    .service-page .hero-desc{

        display:flex !important;

        flex-direction:column !important;

        align-items:center !important;

    }

    

    .service-page .sec-1 .grid-col:first-child{

        align-items:center;

        text-align:center;

    }

    

    .service-page .sec-1 .grid-col:nth-child(2) {

        max-height: 300px;

    }

    

    .service-page .sec-1 .img-col{

        height:100% !important;

    }

    

    

    

    .service-page .sec-1 .image-wrapper.image-1{

        margin:0;

    }

    

    .service-page .service-card .card-details-holder {

        max-width:100%;

        font-size:14px;

    }

    

    .service-page .service-card .service-card-title{

        font-size:20px;

    }

    

}



@media only screen and (max-width: 769px){

    .service-page .sec-2{

        margin-top:40px;

    }    

    .service-page .sec-1 .grid-col:nth-child(2){

        gap: 8px;

    }

    .service-page .sec-1 .img-col:nth-child(2){

        gap: 8px;

    }

    .service-page .sec-1 .grid-col:nth-child(2) {

        max-height: 200px;

    }

    .service-page .sec-2 .nav-item{

        width:fit-content;

    }

    

   .service-page .sec-2 .nav-item button{

       width: 128px;
       font-size:10px;

   }

   .service-page .sec-1, .service-page .sec-2{

       padding:0 24px !important;

   }

   .service-page .sec-2 .tab-pane>p{

       font-size:12px;

   }

   .service-page .sec-1{

       gap:16px;

   }

}