@media  screen and (min-width: 768px) and (max-width: 1024px) {
    .header-nav > a {
        font-size: 1rem;
    }

    .faq {
        gap: 100px;
    }

    .faq-content1 h3 {
        font-size: clamp(10px, 1rem , 43px);
    }

    .faq-cont1 {
        padding-top: 10%;
        height: auto;
    }

    .faq-content1 h2 {
        font-size: clamp(1rem, 45px, 90px);
    }

    .faq-content1 p {
        font-size: 1rem;
    }

    .qa > .question > h3 {
        width: 87.34%;
    }
    .hta-bg-video {
        width: 100%;
        height: 400px;
    }
    .hta-video {
        width: 100%;
    }
}

@media  screen and (min-width: 481px) and (max-width: 767px) {
    .br-desk {
        display: none;
    }
    
    .br-mobile {
        display: block;
    }

    .faq-content1 {
        display: flex;
        flex-direction: column;
        width: 92%;
        gap: 70px;
    }

    .faq-content1 h2 {
        color: #409;
        font-family: "Clash Grotesk Semibold";
        font-size: clamp(40px, 60px, 75px);
        font-style: normal;
        font-weight: 600;
        line-height: 90%;
        text-transform: capitalize;
        margin: 10px 0;
    }

    .faq-content1 h3 {
        color: #409;
        font-family: "Clash Grotesk";
        font-size: clamp(14px, 22px, 28px);
        font-style: normal;
        font-weight: 400;
        line-height: normal;
        text-transform: capitalize;
    }

    .faq-content1 p {
        color: #409;
        font-family: "Clash Grotesk";
        font-size: clamp(12px, 18px, 25px);
        font-style: normal;
        font-weight: 400;
        line-height: 30.376px;
        text-transform: capitalize;
    }

    .faq-cont1 {
        padding-top: 10%;
        height: auto;
    }

    .faq-content1 > div {
        width: 100%;
        padding: 0;
    }

    .faq-content1 > img {
        height: auto;
        width: 108%;
        margin-top: 27.86px;
        position: relative;
        right: 2.5%;
    }

    .faq-cont1 {
        margin-top: 89px;
    }

    .faq-cont2 {
        width: 92%;
        margin-top: 43.98px;
    }

    .faq-content2 {
        display: flex;
        flex-direction: column;
        gap: 17.45px;
    }

    .hero-faq-mobile-cont {
        display: block;
        background-color: #211747;
        position: relative;
        border-radius: 10.855px;
    }

    .hero-faq-mobile-bg {
        width: 100%;
        height: 100%;
        object-fit: cover;
        position: relative;
        z-index: 1;
        top: 0;
        left: 0;
        opacity: 1;
        mix-blend-mode: luminosity;
    }

    .hero-faq-mobile {
        position: absolute;
        z-index: 2;
        bottom: 0;
        right: 0;
        width: 100%;
        height: auto;
        border-radius: 10.855px;
    }

    .hero-faq-desk {
        display: none;
    }

    .qa {
        gap: 12.27px;
    }

    .qa > .question > h3 {
        color: #409;
        font-family: "Clash Grotesk Medium";
        font-size: clamp(8px, 16px, 25px);
        font-style: normal;
        font-weight: 500;
        line-height: normal;
        text-transform: capitalize;
        width: 87.34%;
    }

    .qa > .answer > p {
        color: #409;
        font-family: "Clash Grotesk";
        font-size: clamp(10px, 16px, 22px);
        font-style: normal;
        font-weight: 400;
        line-height: 20px;
        text-transform: capitalize;
    }

    .open-answer {
        width: 18px;
        height: 18px;
    }

    .close-answer {
        width: 18px;
        height: 18px;
    }
    .hta-bg-video {
        width: 100%;
        height: 300px;
    }
    .hta-video {
        width: 100%;
    }
}

@media  screen and (max-width: 480px){
    .br-desk {
        display: none;
    }
    
    .br-mobile {
        display: block;
    }
    
    .faq-content1 {
        display: flex;
        flex-direction: column;
        width: 92%;
        gap: 70px;
    }

    .faq-content1 h2 {
        color: #409;
        font-family: "Clash Grotesk Semibold";
        font-size: clamp(40px, 60px, 75px);
        font-style: normal;
        font-weight: 600;
        line-height: 90%;
        text-transform: capitalize;
        margin: 10px 0;
    }

    .faq-content1 h3 {
        color: #409;
        font-family: "Clash Grotesk";
        font-size: clamp(14px, 22px, 28px);
        font-style: normal;
        font-weight: 400;
        line-height: normal;
        text-transform: capitalize;
    }

    .faq-content1 p {
        color: #409;
        font-family: "Clash Grotesk";
        font-size: clamp(12px, 18px, 25px);
        font-style: normal;
        font-weight: 400;
        line-height: 30.376px;
        text-transform: capitalize;
    }

    .faq-cont1 {
        padding-top: 8%;
        height: auto;
    }


    .faq-content1 > div {
        width: 100%;
        padding: 0;
    }

    .faq-content1 > img {
        height: auto;
        width: 103%;
        right: 2.5%;
        margin-top: 27.86px;
    }

    .faq-cont1 {
        margin-top: 89px;
    }

    .faq-cont2 {
        width: 92%;
        margin-top: 43.98px;
    }

    .faq-content2 {
        display: flex;
        flex-direction: column;
        gap: 17.45px;
    }

    .hero-faq-mobile-cont {
        display: block;
        background-color: #211747;
        position: relative;
        border-radius: 10.855px;
    }

    .hero-faq-mobile-bg {
        width: 100%;
        height: 100%;
        object-fit: cover;
        position: relative;
        z-index: 1;
        top: 0;
        left: 0;
        opacity: 1;
        mix-blend-mode: luminosity;
    }

    .hero-faq-mobile {
        position: absolute;
        z-index: 2;
        bottom: 0;
        right: 0;
        width: 100%;
        height: auto;
        border-radius: 10.855px;
    }

    .hero-faq-desk {
        display: none;
    }

    .qa {
        gap: 12.27px;
        overflow: unset;
    }

    .qa::before {
        border-radius: 6.425px;
        padding: 1px;
    }

    .qa > .question > h3 {
        color: #409;
        font-family: "Clash Grotesk Medium";
        font-size: clamp(8px, 16px, 25px);
        font-style: normal;
        font-weight: 500;
        line-height: normal;
        text-transform: capitalize;
        width: 87.34%;
    }

    .qa > .answer > p {
        color: #409;
        font-family: "Clash Grotesk";
        font-size: clamp(10px, 16px, 22px);
        font-style: normal;
        font-weight: 400;
        line-height: 20px;
        text-transform: capitalize;
    }

    .open-answer {
        width: 18px;
        height: 18px;
    }

    .close-answer {
        width: 18px;
        height: 18px;
    }

    .hta-video {
        width: 100%;
    }

    .hta-bg-video {
        width: 100%;
        height: auto;
    }
}