@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@100;300;400;500;600;700&family=Open+Sans:wght@300;400;500;600;700&family=PT+Sans:wght@400;700&family=Roboto:wght@100;300;400;500;700&display=swap');


/* global */
*{
    margin:0;
    padding:0;
    box-sizing: border-box;
    list-style: none;
    text-decoration:none;
    transition: all 0.4s ease;
    font-family: "Open Sans",sans-serif;
}

html{
    font-size: 62.5%;
}

:root{
    --clr-bluish:#858df0;
    --clr-blue-lighter:#f2f3fe;
    --clr-black:#111111;
    --clr-white:#fff;
    --clr-greyish:#e5e5e5;
    --clr-dark-grey:#a1a1a1;}


.font-size-1{
    font-size: 1.4rem;
}
.font-size-2{
    font-size: 1.6rem;  
}
.font-size-3{
    font-size: 1.8rem;
}
.font-size-4{
    font-size: 2rem;
}
.font-size-4_{
    font-size: 2.4rem;
}
.font-size-5{
    font-size: clamp(3.6rem,5vw,4.8rem);
}
.font-size-6{
    font-size: 6rem;
}
.font-size-7{
    font-size: 7.2rem;
}


.flex{
    display: flex;
}

.flex-col{
    flex-direction: column;
}


.flex-main-center{
    justify-content: center;
}

.flex-cross-center{
    align-items: center;
}


.container{
    width: 115.2rem;
    padding:0 0.8rem;
    margin:0 auto;
}

.line-height-sm{
    line-height: 1.6;}


.img-source{
font-family: "Open Sans",sans-serif;
font-weight: 500;
}

.img-source > a{
    color: var(--clr-black);
    border-bottom: .1rem solid var(--clr-black);
}

.img-source > a:hover{
    border-bottom-color: var(--clr-bluish);
}

.learn_more_btn{
    display: inline-block;
    font-family: "Open Sans",sans-serif;
    font-weight: 500;
    color:var(--clr-white);
    background-color: var(--clr-bluish);
    width: fit-content;
    padding:2.2rem 4.8rem;
    letter-spacing: 0.2rem;
}

.learn_more_btn:hover{
    background: var(--clr-black);}


/*about us and purchase list */

.list{
    gap:1.8rem;
}

.list > li{
    gap:1.6rem;
}

.list i{
    color:var(--clr-bluish);
}

/* global end */

/* header start */

header{
    position: relative;
}

header > .container {
    padding-top:2rem;
    padding-bottom:2rem;
}

header > .container > img{
    cursor: pointer;
}

header > nav{
    position: absolute;
    top:0;
    left: -100%;
    background-color: var(--clr-black);
    width: 26rem;
    height: 100vh;
    opacity: 0.9;
    padding: 2.6rem 2rem;
    z-index: 999;
}

.show_nav{
    left: 0;
}

header > nav > ul { gap:2.4rem; }


header > nav > ul > .nav_close{
    text-align:right;
}

header > nav > ul > .nav_link{
    text-align:center;
}

header > nav > ul > * > *{
    cursor: pointer;
}

header > nav > ul > .nav_link > a{
    color:white;
    font-family: "Open Sans",sans-serif;
}

header > .nav_support{
    position: absolute;
    top:0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0,0,0,0.4);
    opacity: 0;
    z-index: -1;
}

.show_nav_support{
    opacity: 1 !important;
    z-index: 998 !important;
}

/* header end */

body{
    overflow-x: hidden !important;
}

/* hero section */
.hero{
    background-color: var(--clr-blue-lighter);
    padding: 1.6rem 0 0 0 ;
}

.hero > .container{
    height:auto;
    position: relative;
    min-height: 90rem;
    overflow: hidden;
}

.hero > .container > .content-1{
    padding:3rem;
    gap:3rem;
    width:100%;
    max-width:64.9rem;
}

.hero > .container > .content-1 h1{
    color:var(--clr-bluish);
    font-weight: 700;
    font-family: 'Roboto',sans-serif;
}

 .hero > .container > .content-1 p{
    font-family: "Open Sans",sans-serif;
    font-weight: 400;}

.hero > .container > .content-2{
    width: 64.6rem;
    height: 57.8rem;
    background-image: url("./images/svgs/img_support.svg");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    position: absolute;
    top:28%;
    right: 0;
}

.hero > .container > .content-2 > *{
    width: 58.6rem;
    height: 45rem;
    object-fit: contain;
    margin-top: 5.7rem;
    margin-right: 2rem;
}


/* newsletter */
.newsletter{
    background-color: var(--clr-white);
}

.newsletter > .container {
    min-height: 34.6rem;
}


.newsletter > .container > .newsletter_box{
    max-width: 75.4rem;
    width: 100%;
    min-height: 39.7rem;
    box-shadow: .5rem .5rem 2rem 0 rgba(0,0,0,0.1);
    border-radius: 5rem;
    gap:2rem;
    padding:6rem 4rem;
    margin-top: -18rem;
    background-color: var(--clr-white);
    z-index: 10;
    text-align: center;
}

.newsletter > .container > .newsletter_box > h1{
    font-weight: 700;
    font-family: 'Roboto',sans-serif;
    color: var(--clr-bluish);
}

.newsletter > .container > .newsletter_box > form{
    gap:2rem;
    width: 100%;
}

.newsletter > .container > .newsletter_box > form > button{
    padding:1rem 1.6rem;
    font-weight: 600;
    color:white;
    background-color: var(--clr-bluish);
    border:none;
    outline: none;
}

.newsletter > .container > .newsletter_box > form > button:hover{
    background-color: var(--clr-black);
}


.newsletter > .container > .newsletter_box > form > input[type="email"]{
    font-size: 2rem;
    padding:1.2rem 1.4rem;
    background-color: var(--clr-greyish);
    border:none;
    outline-color: var(--clr-black);
}


.newsletter > .container > .newsletter_box > .newsletter_info{

    font-weight: 500;
}


/* features and services */
.features{
    background-color: var(--clr-blue-lighter);
    padding: 4rem 0;
}
.features .container{
    gap:2rem;
    min-height: 93.3rem;
    text-align:center;
}

.features .container > h4,h1{
    font-family: 'Roboto',sans-serif;
}

.features .container > h1{
    color:var(--clr-bluish);
}

.features .container > .card-container{
    gap:2rem;
    flex-wrap: wrap;
}

.features .container > .card-container .card{
    background-color: var(--clr-white);
    border-radius: 3rem;
    padding:2rem;
    gap:2rem;
    text-align: center;
    flex:1;
    min-width:29.533rem;
}

.features .container > .card-container .card > img{
    width: 18.5rem;
    height: 21.3rem;
}


/*levrage*/
.levrage{
    padding:5rem 0;
    background-color: var(--clr-blue-lighter);
    text-align: center;
}

.levrage .container{
    gap:2.5rem;
}

.levrage .container > h1{
    font-family: 'Roboto',sans-serif;
    color:var(--clr-bluish);
    max-width: 57rem;
}

.levrage .container > p{
    max-width:73.3rem;
}

.levrage .container > .card-container{
    margin-top: 3rem;
    gap:2rem;
    text-align: left;
    flex-wrap: wrap;
}

.levrage .container > .card-container .card{
    flex: 1;
    min-width: 30.133rem;
    max-width: 30.133rem;
    padding:1rem;
}


/* about us */

.about-us .container{
    padding-top: 5rem;
    padding-bottom: 5rem;
    gap:2rem;
    flex-wrap: wrap;
}


.about-us .container > .col{
    flex:1;
    padding:1rem;
    gap:2.2rem;
}

.about-us .container > .col-1{
    padding:3rem 1rem;
}

.about-us .container > .col-1 > p{
    text-align: justify;
}

.about-us .container > .col-1 > ul{
    margin-top:8rem;
}



.about-us .container > .col-1 h3{
    font-family: 'Roboto',sans-serif;
}

.about-us .container > .col-1 h3,
.about-us .container > .col-2 h5 > a
{
    color:var(--clr-bluish);
}

.about-us .container > .col-2 > img{
    object-fit: cover;
    width: 100%;
}

/* purchase */
.purchase .container{
    padding-top: 4rem;
    padding-bottom: 4rem; 
    gap:2rem;
}

.purchase .container > h4{
    font-family: 'Roboto',sans-serif;
}

.purchase .container > .row-1{
    gap:2rem;
 }

.purchase .container > .row-1 > .card{
    padding: 3rem;
 }

 .purchase .container > .row-1 > .card-1{
    flex: 1;
    text-align: justify;
    line-height: 1.6;
 }


.purchase .container > .row-2 {
    width:100%;
    margin:1.6rem 0;
}

.purchase .container > .row-2 > .card{
    background-color: var(--clr-white);
    color:var(--clr-bluish);
    padding:3rem;
    gap:4rem;
    flex: 1;
    flex-shrink: 0;
    border-radius: 2rem;
    min-height: 44.1rem;
    justify-content:flex-start;
    position: relative;
}

.purchase .container > .row-2 > .card .plan-info{
    color:var(--clr-black);
}


.purchase .container > .row-2 > .card.active{
    background-color: var(--clr-bluish);
    color:var(--clr-white);
}

.purchase .container > .row-2 > .card.active .plan-info{
    color:inherit;
}

.purchase .container > .row-2 > .card.discount::before{
    position:absolute;
    right: 2rem;
    content: "SAVE 25%";
    font-weight: 700;
    font-size: 1.2rem;
    background-color: var(--clr-bluish);
    color:var(--clr-white);
    padding:.5rem 2.3rem;
    border-radius: 3rem;
}


.purchase .container > .row-2 > .card > h4{
    font-family: "Roboto",sans-serif;
    font-weight: 400;
}

.purchase .container > .row-2 > .card > h1{
    font-family: "PT Sans",sans-serif;
    font-weight: 700;
}

.purchase .container > .row-2 > .card > a{
    font-family: "Montserrat",sans-serif;
    font-weight: 700;
    padding:2rem 3rem;
    width: fit-content;
    background-color: var(--clr-bluish);
    border-radius: 1rem;
    color:var(--clr-white);
} 

.purchase .container > .row-2 > .card.active > a{
    background-color: var(--clr-white);
    color:var(--clr-bluish);  
}


.purchase .container > .row-2 > .card > a > i{
    color:var(--clr-black);
}

/*planning*/
.planning{
    background-color: var(--clr-blue-lighter);
}

.planning .container{
    min-height: 50rem;
    gap:1rem;
    padding-bottom: 10rem;
}


.planning .container > div{
    flex:1;
    padding:2rem;
    gap:2rem;
}

.planning .container > div:nth-child(1){
    text-align: center;
    padding-left: 7.8rem;
    justify-content: flex-end;
}

.planning .container .left__div img{
    height: 28.5rem;
    width: 100%;
    object-fit: contain;
}


.planning .container .left__div h4,
.planning .container .right__div h2{
    font-family: 'Roboto',sans-serif;
}

.planning .container .left__div h4{
     font-weight: 400;
    letter-spacing: .2rem;
}

.planning .container .left__div p,
.planning .container .right__div p{
    line-height: 3.2rem;
}

.planning .container .left__div p{
    width: 41rem;
}

.planning .container .left__div .down_arrow_box{
    background-color: var(--clr-bluish);
    padding: 1.4rem 2rem;
    border-radius: 50%;
    color:var(--clr-white);
    font-size: 2rem;
    width: fit-content;
    margin-top: 1.1rem;
}

.planning .container .right__div{
    text-align: center;
    padding-top: 4rem;
    padding-bottom: 6rem;
}



.planning .container .right__div img{
    width: 39.67rem;
}

/* acheiviments */
.acheivements{
    background-color: var(--clr-white);
    min-height: 30.7rem;
}

.acheivements .container .content{
    gap:3rem;
    margin-top: -5rem;
    flex-wrap: wrap;
}

.acheivements .container .content > div{
    background-color: var(--clr-white);
    border-radius: 3rem;
    flex: 1;
    padding:1rem 1rem 5rem 1rem;
    gap:2rem;
    text-align: center;
}

.acheivements .container .content > div > h2{
    color: var(--clr-bluish);
    font-family: 'Montserrat',sans-serif;
}

.acheivements .container .content > div > h3{
    font-family: 'Roboto',sans-serif;
    letter-spacing: .2rem;
    font-weight: 400;
}

/* contact us*/

.contact_bottom{
    background-color: var(--clr-blue-lighter);
}

.contact_bottom .container{
    min-height: 64.9rem;
    padding-top:2rem;
    padding-bottom:2rem;
}
.contact_bottom .container .col{
    width: 50% !important;
    padding: 2rem;
}
.contact_bottom .container .col-2{
    gap:2rem;
}

.contact_bottom .container .col-2 img{
    width: 100%;
    max-width: 37.7rem;
}


.contact_bottom .container .col-1 > form{
    gap:1.8rem;
}

.contact_bottom .container .col-1 > form > *{
    border:none;
    border-radius: 1.2rem;
    padding:1.3rem 1.2rem;
    font-size: 1.6rem;
}

.contact_bottom .container .col-1 > form input,textarea{
    outline-color:var(--clr-black);
}


/*.contact_bottom .container .col-1 > form input::placeholder{
    font-weight: 600;
}*/

.contact_bottom .container .col-1 > form textarea{
    resize: none;
}


.contact_bottom .container .col-1 > form button[type="submit"]{
    background-color: var(--clr-bluish);
    font-weight: 700;
    color: var(--clr-white);
}
.contact_bottom .container .col-1 > form button[type="submit"]:hover{
    background-color:rgba(0,0,0,0.7);
    cursor: pointer;
}


/*====== media queries ======*/


@media(max-width: 1199px){
    .container{
        width: 96rem;
    }
}

@media(max-width: 991px){
    .container{
        width: 72rem;
    }

    .hero > .container > .content-2 {
        width: 57.4rem;
        height: 51.4rem;
        top:31%;
    }
    .hero > .container > .content-2 > * {
        width: 47.5rem;
        height: 38.6rem;
    }
    .about-us .container > .col{
        flex-basis: 100%;
    }
    .purchase .container > .row-1 > .card {
        padding: 1.6rem;
    }
    .purchase .container > .row-2 > .card.discount::before {
        top: 6rem;
        right:initial !important;
    }
    .planning .container{
        flex-direction: column;
        padding-top:3rem;
    }

    .planning .container > div{
        padding: 2rem 0 !important;
    }

    .planning .container > div:nth-child(1){
        justify-content: center;
        padding:initial;
    }
    .planning .container .left__div img{
        height: 42.8rem;
    }

    .planning .container .right__div img{
        width:88%;
    }
    .planning .container .left__div p{
        width: 100%;
    }
    .acheivements .container .content > div{
        flex-basis: 47%;
    }
}

@media(max-width: 767px){
    .container{
        width: 54rem;
    }
    .hero > .container > .content-1{
        padding: 2rem 1rem;
    }
    .hero > .container > .content-2 {
        width: 41.9rem;
        height: 38.8rem;
        top:49%;
    }
    .hero > .container > .content-2 > * {
        width: 41.5rem;
        height: 35.5rem;
        margin-top: -3.3rem;
        margin-right: 6rem;
    }
    .levrage .container > .card-container .card{
        min-width: 100%;
    }
    .purchase .container > .row-1{
        flex-direction: column;
    }
    .purchase .container > .row-2 {
        flex-direction: column;
    }
    .contact_bottom .container{
        flex-direction: column;
        padding-top:4rem;
        padding-bottom:4rem;
    }
    .contact_bottom .container .col{
        width: 100% !important;
        padding-right: 0;
        padding-left: 0;
    }
    .planning .container .left__div img{
        height: 33.7rem;
    }
}

@media(max-width: 575px){
    .container{
        width:34rem; 
    }

    .hero > .container {
        min-height:50vh;
    }   

    .hero > .container > .content-2 {
       background: none;
       width: 100%;
       position:static;
       height: 7.4rem;
    }
    .hero > .container > .content-2 > * {
        width:100%;
        height: 100%;
        object-fit: cover;
        object-position:50% 0%;
        margin-top:0;
        margin-right:0;
    }

    .newsletter > .container > .newsletter_box{
        margin-top: -12rem;
        padding:6rem 2rem;
    }
    .planning .container .left__div img{
        height: 20.7rem;
    }
    .acheivements .container .content > div{
        flex-basis: 100%;
    }

}

@media(max-width: 371px){
    .container{
        width: 100%;
    }
}