:root{
    --mainColor: #5034fc; 
    --secondaryColor: #061e5c; 
    --lightsecondaryColor: #09339e; 
    --subColor: rgb(136, 136, 136); 
    --lightColor: white; 
    --mainFontSize: 15px;
    --secondaryFontSize: 20px;  
    --mainTransition: .3s; 
    --sectionBackground: #F0F3FA; 
}
*{
    box-sizing: border-box;
}
html{
    scroll-behavior: smooth;
}

main{
    overflow: hidden;
}
.container{
    box-sizing: border-box;
    padding-left: 15px; 
    padding-right: 15px;
    margin-left: auto;
    margin-right: auto;
}
ul{
    list-style: none; 
    margin: 0;
    padding: 0; 

}
a:visited{
 
}
a{
    text-decoration: none;
}
button{
    all:unset; 
    display: inline-block;
}
::selection{
    color: white;
    background-color: var(--mainColor);
}
/* Small */
@media (min-width: 768px){
    .container{
        width: 750px; 
    }

}
/* Medium Screens */
@media (min-width: 992px){
    .container{
        width: 970px; 
    }
}
/* Big Screens */
@media (min-width: 1200px){
    .container{
        width: 1170px; 
    }
}
/* BTN Strats */
.btn{
    display: inline-block;
    color: var(--lightColor); 
    background-color: var(--mainColor);
    font-weight: 700;
    font-size: 15px;
    padding: 18px 35px; 
    border-radius: 4px;
    transition: var(--mainTransition);
    cursor: pointer;
    &:hover{
        background-color: var(--secondaryColor);
        color: var(--lightColor);
    }
}
.btn.white{
    color: var(--secondaryColor); 
    background-color: var(--lightColor);
    &:hover{
        background-color: var(--mainColor);
        color: var(--lightColor); 
    }

}
.btn.secondary{
    &:hover{
        background-color: var(--lightColor);
        color: var(--mainColor)
    }
}
.btn.sub{
    color: var(--lightColor); 
    background-color: var(--secondaryColor);
    &:hover{
        background-color: var(--mainColor);
    }
}
.seperator{
    text-align: center;
}
.seperator .heading{
    background-color: var(--mainColor);
    font-size: 14px;
    font-weight: 700;
    padding: 8px 15px; 
    border-radius: 15px;
    width: fit-content;
    margin: 0 auto; 
    color: var(--lightColor); 
    text-transform: uppercase;
}
.seperator h1{
    color: var(--secondaryColor); 
    font-size: 34px;
    max-width: 500px; 
    margin-top: 15px;
    margin-left: auto; 
    margin-right: auto; 
    margin-bottom: 30px; 
    font-weight: 800;
    line-height: 1.4;
}
.seperator p:not(.heading){
    color: var(--subColor); 
    font-size: 14px;
    margin: 0 auto; 
    max-width: 500px; 
    line-height: 1.7;
}
.icon.main i{
    background-color: var(--mainColor);
    color: var(--lightColor); 
    font-size: 28px;
    padding: 20px; 
    border-radius: 10px;
    transition: .5s;
}
.secpad{
    padding: 100px 0; 
}
.pagination-page{
    background-color: var(--secondaryColor) !important;
    top: 50px; 
    width: 10px !important; 
    height: 10px !important;
    scale: 1 !important; 
    transition: all .3s !important;
}
.pagination-page.is-active{
    background-color: var(--mainColor) !important;
    width: 20px !important; 
    border-radius: 15px;
    transform: scale(1) !important;
    opacity: 1 !important;
}
.splide__arrow{
    display: none !important;
}
hr{
    border-color: var(--subColor); 
    border-top: none; 
    opacity: .3; 
}
.preloader{
    position: fixed; 
    background-color: var(--lightColor);
    width: 100%; 
    height: 100%; 
    top: 0; 
    left: 0; 
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 20;
    transition: all .1s;
    transition-timing-function: cubic-bezier(0.47, 0.49, 1, 3.61);
}
.preloader .circle{
    background-color: var(--lightColor);
    border: 5px solid var(--sectionBackground); 
    border-top: var(--mainColor) 5px solid; 
    border-radius: 50%;
    width: 60px; 
    height: 60px; 
    animation: rotation .8s infinite ease-in-out;
    user-select: none;
    caret-color: transparent;
}
@keyframes rotation{
    from {
        rotate: 0; 
    }
    to{
        rotate: 360deg; 
    }
}
/* ********************************* Header Start ********************************* */

header{
    background-color: var(--secondaryColor);
    position: sticky; 
    top: 0;
    z-index: 5;
    transition: background-color .3s;
}
header .flex{
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 90px;
    transition: height .1s ;

}
header img{
    width: 170px; 
    transition: width .3s;
}
header ul{
    display: flex;
    align-items: center;
    font-size: var(--mainFontSize);
    font-weight: 500;
    gap: 35px; 
}

header ul li a{
    color: var(--lightColor); 
    transition: var(--mainTransition);
    font-weight: 600;
    font-size: 15px;
    &:hover{
        color: var(--mainColor); 
    }
}
header ul li a.active{
    color: var(--mainColor); 
}

header ul.scrolled li a{
    color: var(--secondaryColor); 
    &:hover{
        color: var(--mainColor); 
    }
}
header ul.scrolled li a.active{
    color: var(--mainColor); 
}
header ul.scrolled .btn{
    background-color: var(--mainColor);
}

.bars{
    width: 50px;
    height: 40px; 
    position: relative;
    background-color: var(--lightColor);
    transition: background-color .3s;
    display: none;
}

.bars span{
    width: 70%; 
    height: 4px;
    position: absolute; 
    background-color: var(--secondaryColor);
    left: 50%; 
    transform: translate(-50%);
    transition: .3s;
    user-select: none;
    caret-color: transparent;
}
.bars span:nth-child(1){
    top: 10px; 

}
.bars span:nth-child(2){
    top: 19px; 

}
.bars span:nth-child(3){
    top: 28px; 
}
.bars.active{
    background-color: var(--mainColor);
}
.bars.active span{
    background-color: var(--lightColor); 
}
.bars.active span:nth-child(2){
    transform: translate(-30px);
    opacity: 0; 
}
.bars.active span:nth-child(1){
    top: 18px; 
    width: 50%;

}
.bars.active span:nth-child(3){
    top: 18px; 
    width: 50%;

}
@media (max-width: 992px){
    header .btn{
        display: none;
    }
}
@media (max-width: 767px){
    header ul{
        position: absolute;
        top: 100%; 
        flex-direction: column;
        right: 0; 
        align-items: flex-start;
        background-color: var(--secondaryColor);
        color: var(--secondaryColor); 
        height: calc(100svh - 90px);
        width: 100vw; 
        text-align: right; 
        gap: 15px; 
        align-items: stretch;
        justify-content: center;
        visibility: hidden;
        z-index: 5;
        opacity: 0;
        transition: .3s;
    }
    header .bars.active ~ ul{
        visibility: visible;
        opacity: 1;
    }
    header ul li a{
        color: var(--secondaryColor);
        display: block;
        max-width: 400px;
        padding: 25px 0px; 
        width: 80%; 
        margin-left: auto;
        margin-right: auto; 
        font-size: 22px;
        background-color: var(--mainColor);
        color: var(--lightColor);
        border-radius: 5px;
        text-align: center;
            &:hover{
                color: var(--lightColor); 
                filter: brightness(1.7)
            }
        
    }
    header ul li a.active{
        filter: brightness(1.7);
        color: var(--lightColor); 
    }
    header ul.scrolled li a.active{
        color: var(--lightColor); 
        filter: brightness(1.7)
    }
    .bars{
            display: block;
    }
}

/* *********************** Hero Starts *********************** */

.hero{
    height:calc(100vh - 90px); 
    background-color: var(--secondaryColor);
    color: var(--lightColor); 
    display: flex;
    align-items: center;
    
}
.hero .grid{
    display: grid;
    grid-template-columns: repeat(auto-fit,minmax(400px,1fr));
    gap: 50px; 
}
.hero img{
    max-width: 100%;
}
.hero .info{
    display: flex; 
    flex-direction: column;
    justify-content: center;

}
.hero .info span{
    color: var(--mainColor);
}
.hero .info h1{
    font-size: clamp(38px,8vw, 48px); 
    margin: 0;
    line-height: 1.3;
}
.hero .info p{
    font-size: 18px; 
    line-height: 1.7; 
    font-weight: 600; 
    margin-bottom: 45px; 

}
.hero form{
    display: flex;
    gap: 15px; 
    flex-wrap: wrap;
    max-width: 450px;
}
.hero form input{
    padding: 15px; 
    font-size: 14px;
    color: var(--secondaryColor); 
    border-radius: 4px;
    border: none; 
    outline: none; 
    flex-grow: 99999;
    max-width: 280px; 
    display: block;
}
.hero form button{
    text-align: center;
}
.hero #hero-video{
    margin-top: 25px; 
    font-size: 15px;
    cursor: pointer;
    &:hover i{
        color: var(--lightColor); 
        background-color: var(--mainColor);
    }
}
.hero #hero-video i{
    padding: 10px; 
    color: var(--mainColor); 
    background-color: var(--lightColor);
    border-radius: 50%;
    font-weight: 600;
    margin-right: 5px;
    transition: var(--mainTransition);
    font-size: 14px;
}
@media (max-width: 991px){
    .hero img{
        display: none;
    }
    .hero .grid{
        grid-template-columns: 1fr;
    }
}
@media (max-width: 767px) {

    .hero .info{
        text-align: center;
    }
    .hero .info h1{
        font-size: 32px;
        max-width: 450px; 
        margin-left: auto; 
        margin-right: auto; 
    }
    .hero .info p{
        font-size: 14px;
        max-width: 450px; 
        margin-left: auto; 
        margin-right: auto; 
    }
    .hero form input{
        max-width: 100%; 
        flex-basis: 350px;
    }
    .hero form button{
        flex-grow: 1;
    }
}
.video{
    position: fixed; 
    display: flex;
    top: 0; 
    left: 0;
    align-items: center;
    justify-content: center;
    background-color: rgba(0, 0, 0, 0.302);
    width: 100%;
    height: 100%;
    display: none;
    z-index: 9; 
}
.video *{
    width: 80vw; 
}

/* ********************************* Features Section ********************************* */

.features {
    background-color: var(--sectionBackground);
}
.features .grid{
    display: grid; 
    grid-template-columns: repeat(auto-fill,minmax(300px,1fr));
    align-items: center;
    flex-wrap: wrap;
    gap: 30px; 
    margin-top: 30px; 
}
.features .card{
    flex-basis: 300px;
    background-color: var(--lightColor);
    flex-grow: 1;
    text-align: center;
    padding: 40px 25px; 
    border-radius: 10px;
    border: .3px solid rgb(238, 238, 238); 
    transition: var(--mainTransition);
    &:hover .icon i{
        rotate: 360deg;
        border-radius: 50%;
    }
    &:hover{
        box-shadow: 0 0 45px 0 rgba(0, 0, 0, 0.05);
        transform: translateY(-5px);
    }
}

.features .card h3{
    color: var(--secondaryColor); 
    text-transform: capitalize;
    font-weight: 800;
    margin-top: 30px; 
    font-size: 20px;
}
.features .card p{
    color: var(--subColor); 
    line-height: 1.7;
    font-size: 14px;
    max-width: 270px;
    margin-left: auto; 
    margin-right: auto; 
    font-weight: 600;
}
/* ********************************* Overview Section ********************************* */
.overview .flex{
    display: flex; 
    flex-wrap: wrap;
    gap: 130px; 
    padding: 70px;
}
.overview  .flex > *{
    flex-basis: 400px;
    flex-grow: 1;
}
.overview img{
    max-width: 100%; 
    width: 100px; 
}
.overview a{
    display: inline-block; 
}

.overview h2{
    color: var(--secondaryColor); 
    font-size: 35px;
    font-weight: 800;
    line-height: 1.3;
    margin-bottom: 0; 
}
.overview p {
    color: var(--subColor); 
    font-size: 15px;
    line-height: 1.7;
    margin-top: 1em; 
    margin-bottom: 2em; 
}
.overview .icon i{
    font-size: 28px;
}

@media (max-width: 767px) {
    .overview .flex{
        padding: 25px;
    }
}
/* ********************************* Acheivements Section ********************************* */

.achievements{
    background-color: var(--secondaryColor);
}

.achievements .grid{
    display: grid;
    grid-template-columns: repeat(auto-fill,minmax(250px,1fr));
    color: var(--lightColor); 
    text-align: center;
    gap: 30px; 
}
.achievements h3{
    font-size: 32px;
    font-weight: 800;
    margin-bottom: 0;
}
.achievements .icon i{
    background-color: var(--lightColor);
    color: var(--mainColor)
}
.achievements p{
    font-weight: 800;
    font-size: 15px;
}
.achievements .icon{
    transition: var(--mainTransition);
    transition-delay: .3s;
}
.achievements .card:hover .icon{
    translate: 0 -5px;
}
/* ********************************* Pricing Section ********************************* */
.pricing{
    background-color: var(--sectionBackground);
}
.pricing .flex{
    display: flex;
    flex-wrap: wrap;
    gap: 30px; 
    margin-top: 50px; 
}
.pricing .card{
    flex-basis: 300px;
    flex-grow: 1; 
    background-color: var(--lightColor);
    padding: 30px 0;  
    border-radius: 5px;
    transition: var(--mainTransition);
    &:hover{
        box-shadow: 0 0 25px 2px rgba(0, 0, 0, 0.07);
        translate: 0 -5px; 
    }
}
.pricing .card > *{
    margin-left: 50px; 
    margin-right: 50px; 
}
.pricing .card hr{
    margin: 2.2em 0; 
    border-top: 0; 
    border-color: var(--subColor);
    opacity: .2; 
}
.pricing .card .heading{
    font-weight: 600;
    color: var(--secondaryColor); 
    font-size: 16px;
}
.pricing .card .info{
    color: var(--subColor); 
    line-height: 1.7; 
    font-size: 15px;
}
.pricing .card h2{
    color: var(--secondaryColor); 
    font-size: 34px;
    font-weight: 900;
    margin-top: 0; 
    margin-bottom: 0; 
}
.pricing .card h2 span{
    color: var(--subColor); 
    font-weight: 600;
    font-size: 14px;
}
.pricing .card ul{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    color: var(--subColor); 
    font-size: 15px;
    gap: 15px; 
    margin-bottom: 35px; 
}
.pricing .card ul li{
    display: flex;
    align-items: center;
    flex-direction: row-reverse;
    justify-items: flex-end;
    gap: 15px; 
}
.pricing .card ul li i{
    color: var(--mainColor); 
    font-size: 16px;
}
.pricing .card .btn{
    display: block; 
    text-align: center;
}
/* ********************************* team Section ********************************* */

.team .grid{
    display: grid;
    grid-template-columns: repeat(auto-fit,minmax(200px,1fr));
    margin-top: 50px; 
    gap: 30px; 
}
.team .card{
    text-align: center;
    border: 1px solid var(--sectionBackground); 
    border-radius: 8px;
    overflow: hidden;
    transition: var(--mainTransition);
    &:hover{
        box-shadow: 0 0 25px 2px rgba(0, 0, 0, 0.07);
        translate: 0 -5px; 
    }
}
.team .card:hover .info{
    opacity: 1;
    visibility: visible;
}
.team .card:hover .info .links{
    translate: 0 -30px;
}
.team .shape{
    position: relative;
}
.team img{
    max-width: 100%; 
    vertical-align: middle;
    /* width: 100px;  */
}
.team .card h3{
    color: var(--secondaryColor); 
    font-size: 17px;
    font-weight: 600;
    margin-bottom: .5em;
    transition: var(--mainTransition);
    cursor: pointer; 
    &:hover{
        color: var(--mainColor); 
    }
}
.team .card p{
    margin: 0; 
    color: var(--subColor);
    font-size: 13px;
    margin-bottom: 1.5em; 
}
.team .info{
    opacity: 0;
    visibility: hidden;
    transition: var(--mainTransition);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%; 
    height: 100%; 
    display: flex;
    align-items: flex-end;
    justify-content: center;
    color: var(--lightColor); 
    z-index: 2;
    overflow: hidden;
}
.team .info .links{
    display: flex;
    gap: 8px;
    translate: 0 40px;
    transition: var(--mainTransition);
}
.team .info .links i{
    padding: 10px;
    background-color: var(--lightColor);
    color: var(--secondaryColor); 
    border-radius: 4px;
    font-size: 14px; 
    transition: var(--mainTransition);
    cursor: pointer;
    &:hover{
        color: var(--mainColor);
    }
}
.team .info::after{
    content: ''; 
    position: absolute;
    top: 0; 
    left: 0;
    width: 100%;
    height: 100%; 
    background-color: var(--mainColor);
    opacity: .7;
    z-index: -1;
}
@media (max-width: 991px) {
    .team .grid{
        grid-template-columns: repeat(auto-fill,minmax(330px,1fr));
    }
}

/* ********************************* Testimonials Section ********************************* */
.testimonials{
    background-color: var(--sectionBackground);
}
.testimonials .slides{
    margin-top: 50px;
}

.testimonials .card {
    background-color: var(--lightColor);
    border-radius: 5px;
    padding: 25px 45px; 
    color: var(--subColor); 
    transition: var(--mainTransition);
    &:hover{
    background-color: var(--mainColor);
    color: var(--lightColor); 
    }
    &:hover h2{
        color: var(--lightColor); 
    }
}
.testimonials .card > p{
    line-height: 1.7; 
    font-size: 15px;
    font-weight: 600;
}

.testimonials  .heading{
    display: flex;
    align-items: center;
    gap: 15px; 
}
.testimonials  .heading img{
    width: 80px; 
    height: auto; 
    border-radius: 50%;
}
.testimonials  .heading h2{
    color: var(--secondaryColor); 
    font-size: 17px;
    margin: 0; 
    transition: var(--mainTransition);
}
.testimonials  .heading p{
    font-size: 12px;
    margin: 8px 0 10px 0; 
}
.testimonials  .heading .stars{
    display: flex; 
    gap: 5px; 
}
.testimonials  .heading .stars i{
    color: #f8e71c; 
}

/* ********************************* News Letter Section ********************************* */
.news-letter{
    background-color: var(--secondaryColor);
    padding-top: 100px; 
}
.news-letter .grid{
    display: grid; 
    grid-template-columns: repeat(auto-fit,minmax(350px,1fr));
    align-items: center;
    column-gap: 50px; 
}
.news-letter img{
    max-width: 100%; 
}
.news-letter .info{
    background-color: var(--lightColor);
    padding: 50px; 
    border-radius: 10px;

}
.news-letter .info .heading{
    color: var(--mainColor); 
    margin: 0; 
    font-weight: 700;
}
.news-letter .info h2{
    color: var(--secondaryColor); 
    font-size: clamp(1rem, 6vw, 2rem);
    text-wrap: nowrap;
    font-weight: 800;
    margin-top: 15px; 
    line-height: 1.4; 
}
.news-letter .info form .inner{
    display: flex;
    border: 1px solid #eeee; 
    max-width: 360px; 
    padding: 5px; 
    border-radius: 5px;
    flex-wrap: wrap;
}
.news-letter .info input{
    border: none; 
    padding:  0 15px; 
    outline: none; 
    font-size: 15px;
    flex-grow: 1;
    color: var(--secondaryColor);
}
.news-letter .btn{
    padding: 15px 25px; 
    flex-basis: max-content; 
}

@media (max-width: 991px) {
    .news-letter .info{
        text-align: center;
        max-width: 550px; 
        margin-bottom: 50px; 
        margin-left: auto; 
        margin-right: auto; 
    }
    .news-letter .info{
        padding-bottom: 50px; 
    }
}
@media (max-width: 500px) {
    .news-letter .info form .inner{
        border: none; 
        gap: 15px; 
    }
    .news-letter .info form input{
        border: 1px solid #eee; 
        padding: 15px; 
    }
    .news-letter .info form button{
        flex-grow: 1; 
    }
}

/* ********************************* Call-us Section ********************************* */
.call-us{
    background-color: var(--sectionBackground);
    padding: 50px 0; 
}
.call-us .grid{
    display: grid;
    grid-template-columns: repeat(auto-fit,minmax(300px,1fr));
    align-items: center;
    gap: 35px; 
}
.call-us h2{
    font-size: clamp(1.25rem, 4vw, 34px);
    color: var(--secondaryColor);
    margin-bottom: 15px; 
    font-weight: 800;
}
.call-us h3{
    font-size: clamp(24px, 4vw, 38px);
    color: var(--mainColor);
    margin: 0; 
    font-weight: 800;
}
.call-us .info{
    text-align: right;
}
.call-us .info .btn{
    font-size: clamp(12px, 2vw, 15px);

}
@media (max-width: 991px) {
    .call-us .grid{
        text-align: center;
        grid-template-columns: 1fr;
    }
    .call-us .info {
        text-align: center;
    }
}

/* ********************************* footer Section ********************************* */

footer img{
    width: 170px; 
}
footer .top,footer .bottom{ 
    display: flex;
    justify-content: space-between;
    padding: 25px 0;
}

footer ul{
    display: flex;
    justify-content: center;
    gap: 25px; 
}
footer a,footer i{
    color: var(--secondaryColor); 
    font-weight: 600;
    font-size: 15px;
    transition: var(--mainTransition);
    cursor: pointer;
    &:hover{
        color: var(--mainColor);
    }
}
footer .dev span{
    color: var(--mainColor); 
    font-weight: 700;
    padding: 0 5px; 
}
@media (max-width: 767px) {
    footer .top,footer .bottom{
        flex-direction: column;
        text-align: center;
        align-items: center;
        gap: 25px; 
    }
}
/* Scroll to top */
.scroll-to-top{
    background-color: var(--mainColor);
    padding: 10px 13px; 
    border-radius: 3px;
    position: fixed;
    bottom: 20px;
    transition: bottom .6s ease, background-color .4s ease,right .5s ease; 
    cursor: pointer;
    right: -60px; 
    &:hover{
        bottom: 25px; 
        background-color: var(--secondaryColor);
    }
}
.scroll-to-top.active{
    right: 20px; 
}

.scroll-to-top i{
    color: var(--lightColor); 
    font-size: 18px;
    font-weight: 400;
}
/* Js Classes Used in functions */
.overflow-hide{
    overflow: hidden;
}
/* reveal */
.go-top,.go-left,.go-right{
    opacity: 0; 
}
.go-top{
    translate: 0 30px;

}
.go-left{
    translate: 30px 0;
}
.go-right{
    translate: -30px 0;
}
.active-reveal{
    transition: .5s !important;
    opacity: 1 !important;
    translate: 0 0 !important;
}
.pricing .card.active-reveal{
    &:hover{
        translate: 0 -5px!important;
        transition: .3s !important;
    }
}
.team .card.active-reveal{
    &:hover{
        translate: 0 -5px!important;
        transition: .3s !important;
    }
}
.scale-up{
    scale: 0 0;
}
.scale-up.active-reveal{
    scale: 1 1; 
}