@media(max-width: 1440px) {
    #steps-container{
        gap: 24px;
    }

    #home-container{
        height: 800px;
        margin-bottom: 0;
    }

    .why-us-container{
        gap: 64px;
    }

    .why-us-container > .text{
        width: 55%;
    }
    .line1{
        top: 0;
        left: 17%;
    }
    .line2{
        top: 0;
        right: 17%;
    }
}

@media(max-width: 1330px) {
    #join-us{
        padding-inline: 40px;
    }

    .cards > .card{
        padding-inline: 10px;
        width: 33%;
    }    
}

@media(max-width: 1270px){
    #steps{
        padding-inline: 60px;
    }

    #why-us, #benefits, #testimonials, #faq{
        padding-inline: 60px;
    }

    #steps-container > .card{
        width: 30%;
    }
    #steps-container > .card > img{
        width: 100%;
        height: 80%;
    }

    .card-text > p{
        font-size: 20px;
    }

    #recommendations{
        padding: 60px;
    }

    .recommendation-container > .card{
        width: 100%;
    }
}

@media(max-width: 1160px) {

    #why-us, #benefits, #testimonials, #faq{
        padding-inline: 40px;
    }

    .card-container > .card{
        width: 30%;
        height: 200px;
    }

    .lines > .line, .top > .circle{
        width: 30%;
    }

    .top > .line > img{
        width: 100%;
    }

    .top > .line{
        width: 35%;
    }

    .cards > .card{
        width: 30%;
    }

    .why-us-container > .image >img{
        width: 95%;
        height: 100%;
    }

    .why-us-container > .text{
        width: 65%;
    }

    .card-text > p, .card-body{
        font-size: 15px;
    }

    .card-text > span, .heading{
        font-size: 40px;
    }

    .card-title, .questions > .card > span{
        font-size: 25px;
    }

    .icon{
        width: 36px;
        height: 36px;
    }

    .video-container{
        width: 500px;
    }

    .top, .lines{
        gap: 10px;
    }

    .cards{
        gap: 10px;
    }

    .banner > .card{
        width: 80%;
    }

    #start-now > img{
        width: 100%;
    }

}

@media(max-width: 1000px){

    #home-container{
        height: 700px;
        
    }

    .content{
        margin-top: 0px;
    }

    #home-container > img{
        height: 100%;
    }

    .content{
        margin-top: 60px;
    }

    .main-text, .app-name{
        font-size: 60px;
        line-height: 70px;
    }

    .sub-text{
        font-size: 19px;
    }

    #steps, #benefits, #why-us, #faq, #testimonials, #join-us, #start-now{
        padding-block: 55px;
    }

    #steps-container{
        display: grid;
        grid-template-columns: repeat(2, 1fr); /* Two columns of equal width */
        grid-template-rows: auto auto; /* Two rows */
        gap: 40px 10px;
        place-items: center;
    }

    #steps-container > .card{
        width: 75%;
        height: 100%;
    }

    #steps-container > .card:nth-child(3) {
        width: 36%;
        grid-column: span 2; /* Make the third item span both columns */
    }

    .join-us-container{
        gap: 60px;
    }

    .guide{
        gap: 10px;
    }

    .why-us-container{
        flex-direction: column;
    }

    .why-us-container > .text{
        width: 85%;
    }

    .card-text > span, .heading{
        font-size: 35px;
    }

    .heading > span{
        font-size: 40px;
    }

    .points > div > p{
        font-size: 25px;
    }

    .card-container{
        display: grid;
        grid-template-columns: repeat(2, 1fr); /* Two columns of equal width */
        grid-template-rows: auto auto; /* Two rows */
        gap: 40px 10px;
        place-items: center;
    }

    .card-container > .card{
        width: 75%;
    }

    .card-container > .card:nth-child(3) {
        width: 36%;
        grid-column: span 2; /* Make the third item span both columns */
    }

    .card-inner{
        gap: 20px;
    }

    .table-heading > span, .row > div > span, .row > span, .card-title{
        font-size: 15px;
    }

    .testimonial-container > div{
        text-align: center;
    }

    .questions > .card{
        padding: 40px;
    }

    .questions > .card > span{
        font-size: 20px;
    }

    .star2{
        top: 30%;
        left: 0%;
    }
}

@media(max-width:900px){
    .cards > .card{
        height: 196px;
    }
}

@media(max-width:800px){
    #navbar{
        padding-inline: 55px;
    }

    .main-text, .app-name{
        font-size: 50px;
        line-height: 60px;
    }

    .sub-text{
        font-size: 16px;
    }

    #steps-container > .card{
        width: 90%;
    }

    .cards > .card{
        height: 220px;
    }

    #steps-container > .card:nth-child(3){
        width: 45%;
    }

    .header{
        flex-direction: column;
        align-items: center;
        gap: 20px;
    }

    .header > .text, .text > .sub-text{
        text-align: center;
    }

    .banner > .card{
        padding: 20px;
        gap: 20px;
    }

    .review{
        font-size: 20px;
    }

    .profile > span, .points > div > p{
        font-size: 20px;
    }

    .arrow{
        width: 50px;
        height: 50px;
    }

    .recommendation-container > .card{
        padding: 20px 25px;
    }
    
    .card-inner > .table-heading, .row , hr{
        width: 650px;
    }

    #footer > span{
        font-size: 20px;
    }
}

@media(max-width: 674px){

    #steps-container{
        display: flex;
        flex-direction: column;
    }

    #steps-container > .card, #steps-container > .card:nth-child(3){
        width: 50%;
    }

    .card-container{
        display: flex;
        flex-direction: column;
    }

    .card-container > .card:nth-child(3), .card-container > .card{
        width: 50%;
    }

    .why-us-container > .image > img{
        width: 90%;
    }

    .guide{
        width: 90%;
    }

    .video-container{
        width: 100%;
        height: 300px;
    }
    
    .top > .circle{
        width: 24px;
    }

    .process{
        display: none;
    }

    .process2{
        display: block;
        position: relative;
    }

    .top{
        margin-top: 10px;
        
    }

    .top > .line, .top > .horizontal-line{
        transform: rotate(90deg);
    }

    .top > .horizontal-line{
        width: 15px;
        display: flex;
        justify-content: center;
    }

    .line1{
        top: 92%;
        left: -3%;
    }

    .line2{
        top: 92%;
        left: -3%;
    }

    .top > .card::before{
        padding: 1px;
        background: var(--border-bg);
    }
}

@media(max-width:500px){

    #navbar{
        padding: 10px;
    }

    .main-text, .app-name{
        font-size: 40px;
    }

    .sub-text{
        font-size: 14px;
    }

    #why-us, #benefits, #testimonials, #faq {
        padding-inline: 8px;
    }

    .card-text > span, .heading {
        font-size: 25px;
    }

    .pfp-container{
        margin-left:32px;
    }

    .pfp{
        width: 40px;
        height: 40px;
    }
    .pfp1{
        margin-left: 32px;
    }
    .pfp2{
        left: 60px;
    }
    .pfp3{
        left: 90px;
    }
    .pfp4{
        left: 120px;
    }
    .pfp5{
        left: 150px;
    }
    .pfp6{
        left: 180px;
    }

    .profile > span, .points > div > p {
        font-size: 16px;
    }

    .heading > span{
        font-size: 33px;
    }

    .video-container {
        width: 100%;
        height: 231px;
    }

    .thumbnail > span {
        font-family: Urbanist;
        font-size: 37px;
        font-weight: 600;
        line-height: 42.6px;
    }

    .video-container > img{
        width: 50px;
        height: 50px;
    }

    .top > .line{
        width: 200px;
    }

    .line1{
        top: 95%;
        left: -20%;
    }

    .line2{
        top: 95%;
        left: -20%;
    }

    .card > .card-title{
        font-size: 20px;
    }

    .card-container > .card, .card-container > .card:nth-child(3){
        width: 90%;
    }

    #steps-container > .card, #steps-container > .card:nth-child(3){
        width: 90%;
    }

    #start-now, #recommendations{
        padding-inline: 40px;
    }

    #footer{
        height: 80px;
        padding-inline: 40px;
    }

    #footer > span {
        font-size: 18px;
        
    }

    .line1 {
        top: 95%;
        left: -25%;
    }

    .line2 {
        top: 95%;
        left: -25%;
    }

    .thumbnail > img {
        width: 90%;
        height: 80%;
    }
}

@media(max-width:400px){
    .main-text, .app-name {
        font-size: 33px;
    }

    .line1 {
        top: 95%;
        left: -29%;
    }

    .line2 {
        top: 95%;
        left: -29%;
    }

    .video-container {
        width: 100%;
        height: 182px;
    }

    #app-logo {
        gap: 3px;
    }

    #buttons {
        gap: 10px;
    }

    #buttons > a {
        padding: 8px 12px;
        font-size: 12px;
        line-height: 14.8px;
        
    }
}