.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;
}

.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;
}

.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;
}

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

.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 span{
    color: rgba(0, 0, 0, 0.70);
    font-family: Philosopher;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}

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

.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;
}

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

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

.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;
}

.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;
}

.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%;
    }
    .row{
        width: 90%;
    }
    .price-box{
        width: 40%;
    }
    .right{
        margin-top: 0;
        margin-left: 0;
    }
    .right .contact{
        flex-direction: column;
        gap: 10px;
        margin-top: 0;
    }
    .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%;
    }
    .row{
        width: 90%;
    }
    .price-box{
        width: 80%;
    }
    .right{
        margin-top: 0;
        margin-left: 0;
    }
    .right .contact{
        flex-direction: column;
        gap: 10px;
        margin-top: 0;
    }
    .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;
    }

}