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

.body{
    background-color: #fefefe;
}

#hero-section {
    height: calc(100vh - 0px);
    background-repeat: no-repeat;
    background-size: 100% 100%;
}

#hero-section h1 span{
    background: -webkit-linear-gradient(0deg, rgba(0,41,255,1) 0%, rgba(224,75,176,1) 55%, rgba(238,34,150,1) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: text1 20s linear  infinite;
    background-size: 500%;

}



/* === Product Overview ====*/

#product-overview .card{
   border-radius: 15px;
}

#product-overview .icon-box{
    height: 40px;
    width: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 8px;
}
#product-overview .icon-box img{
    height: 20px;
    width: 20px;
}

#product-overview a{
   text-decoration:underline;
}






.modal-content{
    border-radius: 16px;
}



/* ---- Top Scroll Btn --- */
#top-scroll-btn{
    background: rgb(255,255,255);
    background: linear-gradient(0deg, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%);
    margin-top: -134px;
}



/* --- Testimonials --- */
#testimonials .card{
    box-shadow: 0px 28.93px 61.56px 0px #15151526;
    border-radius: 16px;
}

#testimonials .card .quote-icon{
   height: 30px;
   width: 30px;
}
#testimonials .card .icon-box{
    max-height: 100px;
    background-color: transparent;
}

#testimonials .card .icon-box img{
    height: 80px;
}


/* ============ Pricing Card ======= */
.pricing-card .card{
    box-shadow: 0px 28.93px 61.56px 0px #15151526;
    border-radius: 60px;
    background-color: #fff;
}

.pricing-card .card .header{
   background-size: cover;
   background-repeat: no-repeat;
   border-radius: 60px 60px 0px 0px;
   min-height: 180px;
}

.pricing-card .card .feature-list .list-icon .icon-box{
   width: 25px;
   height: 25px;
   border-radius: 25px;
   font-size: 1.2rem;
   color: var(--primary);
   background: rgba(91, 112, 175, 0.1);
   display: flex;
   justify-content: center;
   align-items: center;

 }

 .pricing-card .card .feature-list .toogle-btn {
   padding: 1% 10%;
 }

 .pricing-card .card .feature-list .toogle-btn .button-box{
    border: 1px solid var(--primary);
    border-radius: 40px;
 }

 .pricing-card .card .feature-list .toogle-btn .button-box .btn{
    border-radius: 40px;
    width: 50%;
 }

 .space-section .space-box{
    position: relative;
    width: 100%;
 }

/* =========== RESPONSIVE ============ */
@media screen and (max-width: 768px) {

#hero-section {
    /* max-height: calc(100vh - 100px) !important; */
    height: 100%;
}

#hero-section img{
   margin-top: 20%;
}

/* #top-scroll-btn{
    margin-top: 0px;
} */

.banner-img{
    margin-top: 20%;
}

.pricing-card .card .card-body{
    padding: 15px !important;
}




}

@media screen and ((min-width: 991px) and (max-width: 1199px)) {
    #what-we-do .tabs #button-fill.tab-btn-1{
        width: 34%;
        left: 8%;
    }
    
    #what-we-do .tabs #button-fill.tab-btn-2{
        width: 24%;
        left: 41%;
    }
    
    #what-we-do .tabs #button-fill.tab-btn-3{
        width: 28%;
        left: 64%;
    }

    .pricing-card .card .card-body{
        padding: 15px !important;
    }

}

@media screen and (min-width: 1399px) {
    #what-we-do .tabs #button-fill.tab-btn-1{
        width: 35%;
        left: 9%;
    }
    
    #what-we-do .tabs #button-fill.tab-btn-2{
        width: 24%;
        left: 41%;
    }
    
    #what-we-do .tabs #button-fill.tab-btn-3{
        width: 30%;
        left: 61%;
    }

}

@media screen and (max-width: 990px) {
    #what-we-do .tabs #button-fill.tab-btn-1{
        width: 31%;
        left: 13%;
    }
    
    #what-we-do .tabs #button-fill.tab-btn-2{
        width: 23%;
        left: 41%;
    }
    
    #what-we-do .tabs #button-fill.tab-btn-3{
        width: 26%;
        left: 61%;
    }

}