@import url('https://fonts.googleapis.com/css2?family=Philosopher:ital@0;1&display=swap');
*{
    margin: 0;
    padding: 0;
}
*::before, *::after{
    box-sizing: border-box;
}


button{
    cursor: pointer;
}

.btn:hover{
    cursor: pointer !important;
}

body{
    overflow-x: hidden;
}
/* Banner*/

.main-section{
    display: flex;
    /* align-items: center; */
    width: 100%;
    font-family: 'Philosopher', sans-serif;
}

.main-section .left-side{
    margin-left: 6.3rem;
    margin-top: 6.3rem;
    width: 60%;
}

.main-section .left-side .main-section-heading{
    color: rgba(0, 0, 0, 0.85);
    font-family: Philosopher;
    font-size: 2rem;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
}

.main-section .left-side .main-section-heading span{
    color: #1A73E8;
}

.main-section .left-side .main-section-text{
    margin-top: 1rem;
    color: rgba(0, 0, 0, 0.50);
    font-family: Philosopher;
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    width: 80%;
}

.main-section .left-side .button-group{
    margin-top: 4rem;
    display: flex;
    gap: 2.5rem;
}

.main-section .left-side .button-group button{
    background-color: #1A73E8;
    border: none;
    border-radius: 5px;
    padding: 15px 30px;
    color: white;
    font-weight: 500;
    font-family: 'philosopher', sans-serif;
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: large;
}

.main-section .left-side .button-group .video-link a{
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    color: #1A73E8;
    font-size: 1rem;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
}

.right{ 
    margin-top: 3.5em;
}

.right img{
    width: 95%
}


.main-sub-section{
    display: flex;
    justify-content: space-between;
    width: 80%;
    margin: -1rem auto 5rem;
    gap: 3.5rem;
    z-index: 10;
}

.main-sub-section .box{
    width: 30%;
    border-left: 4px solid rgba(26, 115, 232, 0.10);
    box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
    padding: 20px;
    background-color: white !important;
    border-radius: 10px;
    z-index: 10;

}

.main-sub-section .box svg{
    width: 100%;
    margin-top: 2rem;
}

.main-sub-section .box h3{
    color: #1A73E8;
    text-align: center;
    font-size: 1.5rem;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    margin-top: 30px;
}

.main-sub-section .box p{
    color: rgba(0, 0, 0, 0.50);
    text-align: center;
    font-size: 1rem;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    width: 88%;
    margin: 1.5rem auto 2rem;
}

.main-section .left-side img{
    display: none;
}


@media screen  and (max-width:756px){
    .main-section{
        flex-direction: column;
        align-items: center;
    }
    .main-section .left-side{
        margin: 3rem 0;
        width: 100%;
    }
    .main-section .right img{
        margin-top: 3rem;
        width: 100%;
        display: none;
    }

    .main-section .main-section-heading h2{
        font-size: 2rem;
        margin-left: 20px;
    }

    .main-section .main-section-text{
        width: 100%;
        margin-left: 20px;
    }

    .main-section .left-side img{
        display: block;
        width: 95%;
        margin: 2rem auto;
    }

    .button-group{
        /* margin-left: 20px ; */
        width: 90%;
        margin: 0 auto;
    }

    .main-section .left-side .button-group button{
        padding: 10px 25px;
        font-size: 1rem;
    }

    .main-section .left-side .button-group .video-link a{
        font-size: 1rem;
    }

    .main-section .left-side .button-group .video-link a svg{
        width: 2.2rem;
    }

    .main-sub-section{
        flex-direction: column;
        width: 100%;
        margin: 0 auto;
        gap: 2rem;
    }

    .main-sub-section .box{
        width: 90%;
        margin: 0 auto;
        padding: 0;
    }

    .main-sub-section .box svg{
        width: 100%;
    }

    .main-sub-section .box h3{
        font-size: 1.2rem;
    }

    .main-sub-section .box p{
        font-size: 1rem;
        width: 100%;
    }
}

/* Banner Section End here */





/* Why Choose Us */

.why-choose-us{
    display: flex;
    gap:4rem;
    margin-top: 6rem;
}

.why-choose-us .left-side{
    width: 45%;
    margin-left: 6.3rem;
}

.why-choose-us .left-side h2{
    color: #000;
    font-size: 2.5rem;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    letter-spacing: 1.2px;
}


.why-choose-us .left-side .pointer h3{
    color: #000;
    font-size: 1.4rem;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    margin-top: 2.5rem;
    margin-left: 4.6rem;
}

.desp{
    display: flex;
    gap: 2rem;
    margin-top: 1rem;
    align-items: center;
    width: 90%;
    color: rgba(0, 0, 0, 0.40);
    font-size: 1.2rem;
    text-align: justify;

}


.ibox{
    border-radius: 20px;
    background: #FFF;
    height: 30px;
    width: 135px;
    display: flex;
    justify-content: center;
    align-items: center;
    transform: rotate(-29.275deg);
}

.box-red{
    border: 1px solid rgba(234, 67, 53, 0.20);
}

.box-green{
    border: 1px solid rgba(52, 167, 82, 0.40);

}

.box-yellow{
    border: 1px solid rgba(251, 188, 4, 0.40);
}

.ibox svg{
    transform: rotate(29.275deg);
}

.right{
    position: relative;

}

.right img{
    width: 100%;
    margin-top: 5px;
}

.right .play{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    height: auto;
    width: 4.5rem;
}

.right .dots{
    display: flex;
    flex-direction: column;
    gap: 1rem;
    position: absolute;
    top: -40px;
    left: -40px;
    z-index: -1;
    animation: dots-animation 2s linear infinite;
}

@keyframes dots-animation{
    0%{
        transform: translate(0, 0);
    }
    50%{
        transform: translate(0, 10px);
    }
    100%{
        transform: translate(0, 0);
    }
}
.dots-row{
    display: flex;
    gap: 1rem;
}

.right .blue-box{
    position: absolute;
    top: -6.5rem;
    right: 1rem;
    z-index: -1;
}

.right .react1{
    animation: react1 5s linear infinite;
}



@keyframes react1{
    50%{
        scale: 1.2;
    }
}

.right .react2{
    animation: react2 5s linear infinite;
}

@keyframes react2{
    50%{
        scale: 1.2;
    }
}

@media screen and (max-width:1050px) {
    .why-choose-us{
        flex-direction: column;
        align-items: center;
        gap: 2rem;
    }
    .why-choose-us .left-side{
        width: 90%;
        margin: 0 auto;
    }
    .why-choose-us .left-side h2{
        font-size: 1.5rem;
        margin-left: 0;
    }
    .why-choose-us .left-side .pointer h3{
        font-size: 1.2rem;
        margin-left: 2.5rem;
    }
    .ibox{
        width: 100px;
        height: 25px;
        padding: 4px 16px;
    }
    .desp{
        width: 100%;
        gap:0.8rem;
    }

    .right{
        width: 88%;
        margin: 0 auto;
    }
    .right img{
        width: 100%;
        margin-top: 5px;
        border-radius: 10px;
    }
    .blue-box{
        display: none;
    }

    .dots-row:nth-child(1){
        display: none;
    }
    .dots-row svg:nth-child(1){
        display: none;
    }

    .right .dots{
        margin-top: 20px;
    }

}



.why-choose-us2{
    display: flex;
    display: flex;
    gap:4rem;
    margin-top: 9rem;
}

.why-choose-us2 .left{
    
}

.why-choose-us2 .right-side{
    width: 50%;
    margin-top: 1rem;
    margin-left: 3rem;
}


.why-choose-us2 .right-side .pointer h3{
    color: #000;
    font-size: 1.4rem;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    /* margin-top: 2.5rem; */
    margin-left: 4.9rem;
}

.why-choose-us2 .right-side .desp{
    display: flex;
    gap: 2rem;
    margin-top: 1rem;
    margin-bottom: 2.8rem;
    align-items: center;
    width: 100%;
    color: rgba(0, 0, 0, 0.40);
    font-size: 1.2rem;
    width: 90%;
    text-align: justify;
}

.left{
    position: relative;    
}

.left img{
    width: 100%;
    margin-top: 5px;
}

.left .play{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    height: auto;
    width: 4.5rem;
}

.left .dots{
    display: flex;
    flex-direction: column;
    gap: 1rem;
    position: absolute;
    top: -40px;
    right: -40px;
    z-index: -1;
    animation: dots-animation 2s linear infinite;
}

.left .dots-row{
    display: flex;
    gap: 1rem;
}

.left .blue-box{
    position: absolute;
    bottom: -5rem;
    left: 1rem;
    z-index: -1;
    /* width: 100%; */
}

.left .react1{
    animation: left-react1 5s linear infinite;
}

@keyframes left-react1 {
    
    50%{
        scale: .9;
    }
}

.left .react2{
    animation: left-react2 5s linear infinite;
}

@keyframes left-react2 {
        
        50%{
            scale: .9;
        }
}


@media screen and (max-width:1050px) {
    .why-choose-us2{
        flex-direction: column;
        align-items: center;
        gap: 2rem;
        margin-top: 3rem;
    }
    .why-choose-us2 .right-side{
        width: 90%;
        margin: 0 auto;
        order: 1;
    }
    .why-choose-us2 .right-side h2{
        font-size: 1.5rem;
        margin-left: 0;
    }
    .why-choose-us2  .right-side .pointer h3{
        font-size: 1.2rem;
        margin-left: 2.5rem;
    }
    .ibox{
        width: 100px;
        height: 25px;
        padding: 4px 16px;
    }
    .desp{
        width: 100%;
        gap:0.8rem;
    }

    .why-choose-us2 .left{
        width: 88%;
        margin: 0 auto;
        order: 2;
    }
    .left img{
        width: 100%;
        margin-top: 5px;
        border-radius: 10px;
    }
    .blue-box{
        display: none;
    }

    .dots-row:nth-child(1){
        display: none;
    }
    .dots-row svg:nth-child(1){
        display: none;
    }

    .left .dots{
        margin-top: 20px;
        right: -15px;
    }
}

/* Why Choose Us End */

/* Service Tab */

.all-services{
    margin-top: 7rem;
    font-family: 'Philosopher', sans-serif;
    font-style: normal;
    line-height: normal;
}

.all-services .heading{
    text-align: center
}

.all-services .heading h3{
    color: #000;
    font-size: 2.2rem;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    letter-spacing: 1.2px;
}

.all-services .heading p{
    color: rgba(0, 0, 0, 0.40);
    text-align: center;
    font-size: 1.3rem;
    font-style: normal;
    line-height: normal;
    margin-top: 1rem;
}

.services-tab{
    display: flex;
    justify-content: space-between;
    margin-top: 4rem;
    width: 45%;
    margin: 4rem auto;
    border-radius: 10px;
    background: #FFF;
    box-shadow: 5px 8px 14px 9px rgba(0, 0, 0, 0.10);
    padding:20px 30px;
}

.tab {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
    cursor: pointer;
}

.tab svg{
    fill: rgba(0, 0, 0, 0.40);
    margin-bottom: -5px;
}

.active-tab svg{
    fill: #1A73E8;
}

.active-tab p{
    color: #1A73E8;
}

.active-tab::after{
    content: "";
    position: absolute;
    width: 120%;
    height: 3px;
    background: #1A73E8;
    bottom: -10px;
    border-radius: 20px;
}

.service-info{
    width: 90%;
    margin: 0 auto;
    display: flex;
    gap: 4rem;
}

.service-info h3{
    font-size: 1.5rem;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    margin-top: 1rem;
    display: flex;
    gap: 15px;
    color: #1A73E8;
    
}

.service-left{
    width: 45%;
}

.service-left video{
    /* width: 100%; */
    border-radius: 10px;
    border: none;
    outline: none;
    background-color: white;
}

.service-right {
    margin-top: 6rem; 
}

.service-right p{
    color: rgba(0, 0, 0, 0.40);
    text-align: justify;
    font-size: 1.2rem;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    margin-top: 2.2rem;
    width: 90%
}

.service-right a{
    display: flex;
    margin-top: 2.5rem;
    text-decoration: none;
    color: #1A73E8;
    align-items: center;
    gap: 10px;
    font-size: 1.2rem;
    position: relative;
}

.service-right a::after{
    content: "";
    position: absolute;
    width: 18%;
    height: 1.3px;
    background: #1A73E8;
    bottom: -5px;
    left: 0;
    border-radius: 10px;
}


@media screen and (max-width:1050px) {
    .all-services{
        width: 95%;
        margin: 4rem auto 0;
    }
    .all-services .heading{
        width: 95%;
        margin: 0 auto;
    }
    .all-services .heading h3{
        font-size: 1.8rem;
    }
    .all-services .heading p{
        font-size: 1.2rem;

    }
    .services-tab{
        width: 75%;
        margin: 2rem auto;
        overflow: hidden;
        gap: 25px;
        padding: 15px 25px 10px;
    }

    .service-info{
        flex-direction: column;
        gap: 2rem;
    }

    .service-info .service-right{
        width: 90%;
        margin: 0 auto;
        order: 1;
    }

    .service-info .service-right p{
        width: 100%;;
    }

    .service-info .service-left{
        width: 100%;
        order: 2;
    }

    .service-info .service-left video{
        width: 100%;
        margin-bottom: -90px;
    }
}


/* Service Tab End */




/* Categories */

.category-section{
    width:  85%;
    margin: 5rem auto 5rem;
}

.category-section-heading{
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.category-section-heading h2{
    color: #000;
    font-family: Philosopher;
    font-size: 2.5rem;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    letter-spacing: 1.2px;
}

.category-section-heading button{
    border-radius: 10px;
    background: #1A73E8;
    color: #FFF;
    text-align: center;
    font-family: Philosopher;
    font-size: 1rem;
    font-style: normal;
    font-weight: 700;
    line-height: normal;    
    padding: 15px 50px;
    border: none;    
}


.category-section .row{
    margin-top: 3rem;
    display: flex;
    gap: 2.2rem;
    align-items: center;
    width: 100%;
}

.singe-category{
    display: flex;
    align-items: center;
    gap: 1rem;
    width: 33%;
    box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
    border-radius: 10px;
    padding: 15px;

}

.singe-category .category-img{
    border-radius: 10px;
}

.singe-category .content{
    width: 70%;
    margin-right: 10px;
}

.singe-category .content h3{
    color: rgba(0, 0, 0, 0.85);
    font-family: Philosopher;
    font-size: 1.5rem;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
}


.singe-category .content p{
    color: rgba(0, 0, 0, 0.40);
    font-family: Philosopher;
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}
@media screen and (max-width:1050px) {
    .category-section{
        width: 90%;
        margin: 5rem auto 5rem;
    }
    .category-section-heading{
        justify-content: space-between;
        margin-bottom: 2rem;
    }
    .category-section-heading h2{
        font-size: 1.5rem;
    }
    .category-section-heading button{
        font-size: 1rem;
        padding: 8px 40px;
    }
    .category-section .row{
        flex-direction: column;
        gap: 2rem;
        margin: 2rem auto;
    }
    .singe-category{
        width: 90%;
        margin: 0 auto;
    }
    
}

/* Categories End */



/* Testimonial  */

.testimonials{
    display: flex;
    gap: 5rem;
    margin-top: 5rem;
    margin-bottom: 10rem;
}

.testimonials-left{
    width: 50%;
    margin-left: 6rem;
}

.testimonials-left h2{
    color: #000;
    font-family: Philosopher;
    font-size: 3rem;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    letter-spacing: 1.2px;
}

.testimonials-left a{
    display: inline-flex;
    margin-top: 2rem;
    font-family: Philosopher;
    font-size: 1.5rem;
    font-weight: 400;
    line-height: 29px;
    letter-spacing: 0em;
    text-align: left;
    color: #1A73E8;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    position: relative;
}

.testimonials-left a::after{
    content:"";
    display: block;
    width: 100%;
    height: 2px;
    background: #1A73E8;
    transition: width 0.3s;
    position: absolute;
    bottom: -5px;
    left: 0;
}


.testimonials-rights{
    width: 100%;
    position: relative;
}


.testimonials-main{
    position: relative;
}

.swiper {
    padding: 0rem  0 7rem!important;
}

.testimonials-main .content{
    width:60%;
    background-color: #1A73E8;
    color: white;
    font-family: Philosopher;
    font-size: 1.5rem;
    font-weight: 400;
    line-height: 29px;
    letter-spacing: 0em;
    text-align: left;
    padding: 40px 70px;
    border-radius: 10px;
    box-shadow: 5px 9px 14px 5px rgba(26, 115, 232, 0.10), -5px -9px 14px 5px rgba(26, 115, 232, 0.10);
    margin-left: 3rem;
}   

.testimonials-main .content .view{
    margin-bottom: 2rem;
}

.testimonials-main .content .user-content{
    color: rgba(255, 255, 255, 0.80);
    font-size: 1.2rem;
}

.testimonials-main .user{
    position: absolute;
    bottom: -40%;
    right: 3rem;
    z-index: 100;
}

.testimonials-main img{
    z-index: 100;
    box-shadow: 5px 9px 14px 5px rgba(26, 115, 232, 0.10), -5px -9px 14px 5px rgba(26, 115, 232, 0.10);
    border-radius: 5px;
}

.swiper-pagination{
    bottom: 70px !important;
    transform: translateX(-10%) !important;
}

@media screen and (max-width:1050px) {
    .testimonials{
        flex-direction: column;
        align-items: center;
        gap: 2rem;
    }
    .testimonials-left{
        width: 90%;
        margin: 0 auto;
    }
    .testimonials-left h2{
        font-size: 1.5rem;
    }
    .testimonials-left a{
        margin-top: 0.5rem;
        font-size: 1rem;
    }

    .testimonials-rights{
        width: 90%;
        margin: 0 auto;
        order: 2;
    }

    .testimonials-main{
        width: 100%;
        margin: 0 auto;
    }

    .testimonials-main .content{
        width: 100%;
        margin-left: 0;
        padding: 8rem 0 3rem;
        line-height: normal;
        font-size: 1rem;
    }

    .testimonials .content p{
        width: 90%;
        margin: 0 auto;
    }
    
    .testimonials-main .user{
        top: -30%;
        right: 50%;
        transform: translateX(50%);
    }

    .swiper{
        padding: 10rem  0 6rem!important;
        /* center */
    }
    .swiper-pagination{
        margin-left: 10%;
    }

}

/* End Testimonial */


/* why support  */
.why-support{
    display: flex;
    /* justify-content: space-between; */
    align-items: center;

}

.why-support .support-left{
    width: 50%;
    margin-left: 6rem;
    position: relative;
    height: 100vh;
}

.why-support .support-left .earth{ 
    position: absolute;
    height: auto;
    left: -95%;
    top: -10%;
}
.why-support .support-left .rotate-frame{ 
    position: absolute;
    height: auto;
    left: -1%;
    top: 16%;
    animation: rotate360 60s linear infinite;
}

/* rotate 360 */

@keyframes rotate360 {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

.why-support .support-left .user-image{ 
    position: absolute;
    height: auto;
    left: -1%;
    top:12%;
}

.support-right{
    width: 60%;
}

.support-right .support-title{
   
}

.support-right .support-title h2{
    color: #000;
    font-family: Philosopher;
    font-size: 2.5rem ;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    letter-spacing: 1.2px;
    margin-right: 12rem;
}

.support-right .support-title p{
    color: rgba(0, 0, 0, 0.40);
    font-family: Philosopher;
    font-size: 1.2  rem;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    margin-top: 1.8rem;
    margin-right: 12rem;
}

.support-info{
    display: flex;
    margin-top: 3rem;
    margin-right: 12em;
    gap:10px;
}

.support-info  .logo-text{
    display: flex;
    gap: 10px;
    align-items: center;
    align-content: center;
    color: #000;
    font-family: Philosopher;
    font-size: 1.5rem;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    letter-spacing: 0.84px;
}


.support-info .info-text{
    color: rgba(0, 0, 0, 0.40);
    font-family: Philosopher;
    font-size: 1rem;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    margin-top: 1rem;
    margin-left: 2.5rem;
    margin-right: 1rem;

}

.support-button-group {
    display: flex;
    margin-top: 4rem;
    margin-right: 20rem;
    gap: 5rem;
    /* justify-content: space-between; */
    align-items: center;

}

.support-button-group button{
    color: #FFF;
    text-align: center;
    font-family: Philosopher;
    font-size: 1rem;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    border-radius: 10px;
    background: #1A73E8;
    padding: 13px 40px;
    border: none;
    cursor: pointer;
}

.support-button-group button:hover{
    background: #1A73E8;
    opacity: 0.8;
}

.support-button-group a{
    display: inline-flex;
    color: #1A73E8;
    font-family: Philosopher;
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    gap: 5px;
    align-items: center;
    text-decoration: none;
    position: relative;
}

.support-button-group a::after{
    content:"";
    display: block;
    width: 100%;
    height: 2px;
    background: #1A73E8;
    transition: width 0.3s;
    position: absolute;
    bottom: -5px;
    left: 0;
}

/* Why support End */

@media screen and (max-width:1400px) {
    .why-support{
        width: 100%;
        flex-wrap: wrap;
        flex-direction: column;
    }
    .why-support .support-left{
        width: 100%;
        height: 450px;
        background-color: #1A73E8;
        margin: -10rem 0 0;
        background-image: url('../assets/svg/earth.svg');
        background-repeat: no-repeat;
        background-position: center;
        background-size: 93%;
        overflow: hidden;
    }
    .why-support .support-left .earth{ 
       display: none;
    }
    .why-support .support-left .rotate-frame{ 
        width: 100%;
        margin-top: -5px;
        margin-left: 3px;
        overflow: hidden;
    }
    .why-support .support-left .user-image{ 
        width: 100%;
        margin-top: -5px;
        margin-left: 3px;
        overflow: hidden;
    }

    .support-right{
        width: 90%;
        margin: 0 auto;
    }

    .support-right .support-title h2{
        font-size: 1.5rem;
        margin:2rem 0 0;
    }

    .support-right .support-title p{
        font-size: 1rem;
        margin: 1rem 0 0;
    }

    .support-info{
        flex-direction: column;
        gap: 1rem;
        margin: 2rem 0 0;
    }

    .support-info .logo-text{
        font-size: 1.2rem;
        justify-content: center;
    }

    .support-info .info-text{
        font-size: 1rem;
        margin: 1rem 0 0;
        text-align: center;
    }

    .support-button-group{
        gap: 1rem;
        margin: 2rem 0 2rem;
        justify-content: space-between;
    }

    .support-button-group button{
        font-size: 0.8rem;
        padding: 15px 30px;
    }

    .support-button-group a{
        font-size: 0.8rem;
    }
    
    .spacer{
        display: none;
    }

}

/* how-it-work Start */

.how-it-work{
    margin: 0 0 10rem;
}

.work-title{
    width: 90%;
    margin: 10rem auto 3rem;
}

.work-title h2{
    color: #000;
    font-family: Philosopher;
    font-size: 2.5rem;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    letter-spacing: 1.2px;
}

.posts{
    width: 90%;
    margin: 0 auto;
    display: flex;
    /* justify-content: center; */
    align-items: center;
    gap: 20px;
}

.single-post{
    background-color: rgba(26, 115, 232, 0.70);;
    border-radius: 10px;
    text-align: center;
    width: 30%;

}

.single-post .post-content{
    padding: 5px 20px 20px;
}

.single-post .post-content h3{
    color: #FFF;
    text-align: center;
    font-family: Philosopher;
    font-size: 1.8rem;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
}

.single-post .post-content p{
    color: rgba(255, 255, 255, 0.80);
    text-align: center;
    font-family: Philosopher;
    font-size: 1.1rem;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    width: 80%;
    margin: 20px auto 5px;
}

@media screen and (max-width:960px) {
    .how-it-work{
        margin:0;
    }
    .posts{
        flex-direction: column;
    }

    .posts .rotate{
        rotate: 90deg;
        margin: 2rem;

    }
    .single-post{
        width: 100%;
        margin: 0 auto;
    }

}

/* how-it-work End */

.spacer{
    height: 12rem;
    width: 100%;
}

.spacer-20{
    height: 3rem;
    width: 100%;
}

/* Pricing and FAQ */

.page-header{
    background: linear-gradient(78.98deg, rgba(26, 115, 232, 0.8) 57.9%, rgba(255, 255, 255, 0.8) 105.02%, rgba(26, 115, 232, 0.4) 116.93%);
    padding-bottom: 80px;
    position: relative;
}

.page-header .title-container{
    text-align: center;
    font-family: Philosopher;
    font-style: normal;
    line-height: normal;
    letter-spacing: 1.2px;
    padding-top: 70px;
}

.page-header .title{
    font-weight: 700;
    color: #FFF;
    font-size: 2.4rem;
}

.page-header .subtitle{
    color: rgba(255, 255, 255, 0.80);
    font-size: 1rem;
    width: 35%;
    margin: 0 auto;
    line-height: 1rem;
    font-style: normal;
    font-weight: 400;
    line-height: 1rem;
    padding-top: 14px;
}

.page-header .row{
    width: 85%;
    margin: 50px auto;
    display: flex;
    flex-wrap: wrap;
    gap: 40px;
}

.price-box{
    width: 25%;
    border-radius: 20px;
    background: #FFF;
    box-shadow: 5px 8px 14px 9px rgba(0, 0, 0, 0.10);
    padding: 30px;
}

.price-box h3{
    color: #1A73E8;
    text-align: center;
    font-family: Philosopher;
    font-size: 32px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
}

.price-box p{
    color: rgba(0, 0, 0, 0.40);
    font-family: Philosopher;
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    padding-top: 20px;
}

.page-header .pointers{
    margin-top: 2rem;
    display: flex;
    flex-direction: column;
    gap: 15px;
    color: rgba(0, 0, 0, 0.70);
    font-family: Philosopher;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}

.price-box .pointers div{
    display: flex;
    gap: 10px;
    align-items: center;
}

.price-box .price{
    margin-top: 26px;
    color: rgba(0, 0, 0, 0.80);
    font-family: Philosopher;
    font-size: 26px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
}

.price-box .price span{
    color: rgba(0, 0, 0, 0.70);
    font-family: Philosopher;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}

.page-header .buy-button{
    margin-top: 30px;
    display: flex;
    justify-content: space-between;
    align-content: center;
}

 .page-header .buy-button button{
    padding: 12px 50px;
    border-radius: 10px;
    border: none;
    background: #1A73E8;
    color: white;
    cursor: pointer;
}

.buy-button button:hover{
    background: #1A73E8;
    opacity: 0.8;
}

.buy-button a{
    display: flex;
    gap: 2px;
    align-items: center;
    color: #1A73E8;
    font-family: Philosopher;
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    position: relative;
    text-decoration: none;
}

/* under line below a tag */
.buy-button a::after{
    content:"";
    display: block;
    width: 100%;
    height: 2px;
    background: #1A73E8;
    transition: width 0.3s;
    position: absolute;
    bottom: 5px;
    left: 0;

}

.buy-button a:hover::after{
    width: 50%;
    transition: width 0.3s;
}

.balloon{
    position: absolute;
    top: 50%;
    left: 18px;
    transform: translateY(-50%);
    animation: balloon 4s infinite;
}

@keyframes balloon{
    0%{
        transform: translateY(-50%);
    }
    50%{
        transform: translateY(-60%);
        scale: 1.1;
    }
    100%{
        transform: translateY(-50%);
    }
}

.line-design{
    position: absolute;
    top: 10%;
    left: 28%;
    transform: translateY(-50%);
    animation: line-design 4s infinite;
}

@keyframes line-design{
   50%{
        scale: 1.1;
   }
}

.line-design-1{
    position: absolute;
    top: 50%;
    left: 34%;
    transform: translateY(-50%);
    animation: line-design-1 4s infinite;
}

@keyframes line-design-1{
   50%{
        scale: 0.9;
   }
}

.dot-1{
    position: absolute;
    top: 10%;
    right: 11%;
    transform: translateY(-50%);
    animation: shine 2s infinite;

}

.dot-2{
    position: absolute;
    top: 9%;
    right: 7%;
    transform: translateY(-50%);
    animation: shine 4s infinite;

}

.dot-3{
    position: absolute;
    top: 7.5%;
    right: 8.5%;
    transform: translateY(-50%);
    animation: shine 5s infinite;
}

@keyframes shine{
    0%{
        opacity: 0;
    }
    50%{
        opacity: 1;
    }
    100%{
        opacity: 0;
    }
}

.star-1{
    position: absolute;
    top: 20%;
    left: 7%;
    transform: translateY(-50%);
    animation: star 4s infinite;
}
.star-2{
    position: absolute;
    top: 12%;
    left: 4%;
    transform: translateY(-50%);

    rotate: 90deg;
    animation: star 4s infinite;
}

/* move left and right and shine */

@keyframes star{
    0%{
        transform: translateY(-50%);
        opacity: 0.7;
    }
    50%{
        transform: translateY(-60%);
        opacity: 1;
    }
    100%{
        transform: translateY(-50%);
        opacity: 0.7;
    }
}


.star-3{
    position: absolute;
    bottom: 8%;
    right: 7%;
    transform: translateY(-50%);
    rotate: 90deg;
    animation: star 4s infinite;
}

.dot-b1{
    position: absolute;
    bottom: 8%;
    left: 9.5%;
    transform: translateY(-50%);
    animation: shine 2s infinite;

}

.dot-b2{
    position: absolute;
    bottom: 7%;
    left: 6.5%;
    transform: translateY(-50%);
    animation: shine 4s infinite;

}

.dot-b3{
    position: absolute;
    bottom: 8%;
    left: 8%;
    transform: translateY(-50%);
    animation: shine 5s infinite;
}



/* FAQ CSS */


.faq-section{
    width: 85%;
    margin: 0 auto;
    padding: 50px 0;
    display: flex;
}

.faq-section .left{
  width: 50%;
}

.faq-section .left h2{
    color: #000;
    font-family: Philosopher;
    font-size: 2.5rem;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    letter-spacing: 1.2px;
}

.faq-section .left p{
    margin-top: 12px;
    color: rgba(0, 0, 0, 0.40);
    font-family: Philosopher;
    font-size: 1.5rem;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}

.faq{
    margin-top: 5rem;
}

.faq-question-answer-container{
    position: relative;

}

.faq-question{
    color: #000;
    font-family: Philosopher;
    font-size: 1.5rem;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    margin-top: 2rem;
    display: flex;
    gap: 20px;
    align-items: center;
    cursor: pointer;
    justify-content: space-between;
}

.faq-question-answer-container::after{
    content:"";
    display: block;
    width: 100%;
    height: 1px;
    background: rgba(0, 0, 0, 0.40);
    transition: width 0.3s;
    position: absolute;
    bottom: -20px;
    left: 0;
}

.faq-answer{
    margin-top: 20px;
    color: rgba(0, 0, 0, 0.40);
    text-align: justify;
    font-family: Philosopher;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    display: none;
    transition: all 1s ease-in-out;
}

.faq-answer:first-child{
    display: block;
}

.faq-section .right{
    width: 50%;
    margin-top: -70px;
    margin-left: 3rem;
}

.faq-section .right .contact{
    margin-top: 2rem;
    display: flex;
    gap: 20px;
    margin-top: -60px;
    justify-content: space-around;
}

.faq-section .right .contact h3{
    color: #000;
    font-family: Philosopher;
    font-size: 1.5rem;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    letter-spacing: 0.72px;
}

.faq-section .right .contact p{
    color: rgba(0, 0, 0, 0.40);
    font-family: Philosopher;
    font-size: 1rem;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    margin-top: 4px;
}

.faq-section .right .contact button{
    border-radius: 10px;
    background: #1A73E8;
    color: #FFF;
    font-family: Philosopher;
    font-size: 1rem;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    padding: 10px 40px;
    padding: 10px 50px;
    outline: none;
    border: none;
    border: none;
}

.faq-section .right h2{
    display: none;
} 

.faq-section .right p{
    display: none;
}

@media screen and (max-width: 1024px){
    .page-header .subtitle{
        width: 50%;
    }
    .page-header .row{
        width: 90%;
    }
    .price-box{
        width: 40%;
    }
    .price-box .right{
        margin-top: 0;
        margin-left: 0;
    }
    .faq .right .contact{
        flex-direction: column;
        gap: 10px;
        margin-top: 0;
    }
    .faq .right .contact button{
        padding: 10px 30px;
    }
}

@media screen and (max-width: 768px){
    .page-header{
        background: linear-gradient(79deg, rgba(255, 255, 255, 0.80) -12.3%, rgba(26, 115, 232, 0.80) 25.17%, rgba(41, 124, 234, 0.80) 75.27%, rgba(255, 255, 255, 0.80) 111.11%, rgba(26, 115, 232, 0.40) 116.95%);
    }
    .page-header .title{
        font-size: 1.5rem;
    }
    .page-header .subtitle{
        width: 90%;
    }
    .page-header .row{
        width: 90%;
    }
    .price-box{
        width: 80%;
    }
    .faq .right{
        margin-top: 0;
        margin-left: 0;
    }
    .faq .right .contact{
        flex-direction: column;
        gap: 10px;
        margin-top: 0;
    }
    .faq .right .contact button{
        padding: 10px 30px;
    }
    .dot-1{
        top: 1%;
        left: 8.5%;

    }
    
    .dot-2{
        top: 2%;
        left: 11%;
    }
    
    .dot-3{
        top: 3.5%;
        left: 7%;
    }

    .star-1{
        top: 94%;
        left: 75%;
    }
    .star-2{
        top: 12%;
        left: 4%;
    }

    .star-3{
        top: 38%;
        right: 50%;
    }
    
    .dot-b1{
        bottom: 3%;
        left: 20.5%;
    }
    
    .dot-b2{
        bottom: 2%;
        left: 8.5%;
    
    }
    
    .dot-b3{
        bottom: 3%;
        left: 10%;
    }
    
    .balloon{
        top: 95%;
        left: 30%;
        
    }
    .line-design{
        top: 5%;
        left: 50%;
    }

    .faq-section{
        flex-direction: column;
    }

    .faq-section .left{
        width: 100%;
        order:2
    }

    .faq-section .right{
        width: 100%;
        padding: 0;
        margin-top: 0;
        margin-left: 0;
        order:1;
    }


    .faq-section .left h2{
        display: none;
    }
    .faq-section .left p{
        display: none;
    }


    .faq-section .right h2{
        display: block;
        font-size: 1.5rem;
    } 

    .faq-section .right p{
        display: block;
        margin-top: 15px;
        font-size: 0.8rem;
    }

    .faq-section .right img{
        width: 100%;
    }

    .faq-section .right .contact{
        display: none;
    }
    .faq{
        margin-top: 1rem;
        margin-bottom: 2rem;
    }

}