/* Mobile (max 767px) */
@media (max-width: 767px) {

    /* Hero Section Style Starts -------------------------------------------- */
    section.hero_section {
        width: 100%;
        height: auto;
        display: flex;
        flex-direction: column-reverse;
        justify-content: center;
        align-items: center;
        gap: 25px;

        position: relative;
    }

    section.hero_section .hero_left {
        width: 100%;
        gap: 15px;
    }

    section.hero_section .hero_left h1 {
        font-size: 32px;
        line-height: 40px;
    }

    section.hero_section .hero_left h1 span {
        font-size: 45px;
    }

    section.hero_section .hero_left p {
        font-size: 14px;
    }

    section.hero_section .hero_left a {
        font-size: 13px;
        width: 150px;
        height: 33px;
    }

    section.hero_section .hero_right {
        width: 100%;
        height: 200px;
        position: relative;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    /* Hero Section Style Ends -------------------------------------------- */

    /* About Us Section Style Starts ---------------------------------------- */
    section.about_us {
        margin-block: 50px;
    }

    section.about_us .about_left {
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;

        display: none;
    }

    section.about_us .about_right {
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 10px;
    }

    section.about_us .about_right h2 {
        text-align: center;
    }

    section.about_us .about_right h1 {
        text-align: center;
    }

    section.about_us .about_right p {
        font-size: 14px;
        text-align: center;
    }

    section.about_us .about_right a {
        padding: 7px 25px;
        font-size: 12px;
        align-self: flex-end;
    }

    /* About Us Section Style Starts ---------------------------------------- */

    /* Our Products Section Style Starts --------------------------------------*/
    section.our_products .products_container {
        gap: 15px;
    }

    section.our_products .products_container .product_card {
        padding: 7px;
        height: auto;
        gap: 7px;
    }

    section.our_products .products_container .product_card .image_container {
        width: 140px;
    }

    section.our_products .products_container .product_card .content h3 {
        font-size: 15px;
    }

    section.our_products .products_container .product_card .content p {
        font-size: 10px;
    }

    section.our_products .products_container .product_card .content a {
        padding: 5px 17px;
        font-size: 10px;
    }

    /* Our Products Section Style Ends --------------------------------------*/

    /* Our Features Section Style Starts ----------------------------------------*/
    section.our_features {
        padding-block: 25px;
        margin-block: 50px;
        margin-bottom: 0px;
        gap: 20px;
    }

    section.our_features .card_container {
        gap: 12px;
    }

    section.our_features .card_container .info_card {
        flex: 1 0 calc((100% - 15px) / 1);
        height: 200px;
    }

    section.our_features .card_container .info_card h3 {
        font-size: calc(var(--subheading-font-size) + 1px);
    }

    section.our_features .card_container .info_card p {
        font-size: 10px;
    }

    section.our_features .card_container .info_card img {
        width: 50px;
        height: 50px;
        object-fit: contain;
    }

    /* Our Features Section Style Ends ----------------------------------------*/

    /* Why Choose Us Section  Style Starts ----------------------------------- */
    section.chooseus_section {
        height: 40rem;
        gap: 10px;
        margin: 0px;
    }

    section.chooseus_section .chooseus_left {
        flex: 1 0;
        height: 100%;
        padding-inline: var(--paddingHorizontal);
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 25px;
    }

    section.chooseus_section .chooseus_left .heading {
        align-items: center;
        gap: 3px;
    }

    section.chooseus_section .chooseus_left .heading h2 {
        text-align: center;
    }

    section.chooseus_section .chooseus_left .heading h1 {
        text-align: center;
    }

    section.chooseus_section .chooseus_left .heading h1 span {
        color: var(--primary-color);
        font-size: 18px;
    }

    section.chooseus_section .chooseus_left .card_container {
        gap: 12px;
    }

    section.chooseus_section .chooseus_left .card_container .info_card {
        height: 200px;
        gap: 10px;
    }

    section.chooseus_section .chooseus_left .card_container .info_card h3 {
        width: 100%;
        font-family: var(--font-family-sbold);
        font-size: 13px;
        color: var(--secondary-color);
        text-wrap: wrap;
    }

    section.chooseus_section .chooseus_left .card_container .info_card p {
        width: 100%;
        font-family: var(--font-family-light);
        font-size: 10px;
        color: var(--text-color);
        text-wrap: wrap;
    }

    section.chooseus_section .chooseus_left .card_container .info_card img {
        width: 40px;
        height: 40px;
    }

    section.chooseus_section .chooseus_right {
        display: none;
    }

    /* Why Choose Us Section  Style Starts ----------------------------------- */

    section.faq_section {
        margin-block: 45px;
    }

    section.faq_section .faq_right {
        display: none;
    }

    section.faq_section .faq_left {
        width: 100%;
        align-items: center;
        gap: 10px;
    }

    section.faq_section .faq_left h2 {
        width: 100%;
        text-align: center;
    }

    section.faq_section .faq_left h1 {
        width: 100%;
        font-size: 17px;
        text-align: center;
    }

    section.faq_section .faq_left p {
        width: 100%;
        font-family: var(--font-family-light);
        font-size: 16px;
        color: var(--text-color);
        text-wrap: wrap;
    }

    /* FAQ Section Style End ------------------------------------------------*/

    /* Contact Us Section Style Starts ---------------------------------------- */
    section.contact_section {
        height: auto;
        padding-inline: calc(var(--paddingHorizontal));
        gap: 5px;
        flex-direction: column;
        align-items: center;
        margin-block: 30px;
        margin-bottom: 0px;

        overflow: hidden;
    }

    section.contact_section .background {
        display: none;
    }

    section.contact_section .contactus_left {
        width: 100%;
        padding: 15px 20px;
        gap: 15px;
    }

    section.contact_section .contactus_left h2 {
        font-size: 30px;
    }

    section.contact_section .contactus_left .contact_info {
        gap: 18px;
    }

    section.contact_section .contactus_left .contact_info .info {
        gap: 14px;
    }

    section.contact_section .contactus_left .contact_info .info img {
        width: 20px;
        height: 20px;
    }

    section.contact_section .contactus_left .contact_info .info p {
        font-size: 10px;
    }

    section.contact_section .contactus_left .social_links {
        gap: 15px;
        margin-top: 20px;
    }

    section.contact_section .contactus_left .social_links .link {
        width: 40px;
        height: 40px;
    }

    section.contact_section .contactus_right {
        width: 100%;
        padding: 15px 0px;
        gap: 15px;
    }

    section.contact_section .contactus_right .heading h2 {
        font-size: 30px;
    }

    section.contact_section .contactus_right .contact_form {
        gap: 10px;
        padding: 15px;
    }

    section.contact_section .contactus_right .contact_form .row {
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 10px;
    }

    section.contact_section .contactus_right .contact_form .row input {
        flex: 1 0 calc((100% / 2) - 10px);

    }

    section.contact_section .contactus_right .contact_form input,
    section.contact_section .contactus_right .contact_form textarea {
        font-size: 12px;
        padding: 8px 15px;
    }

    section.contact_section .contactus_right .contact_form button {
        padding: 8px 22px;
        border-radius: 25px;
        ;
        font-size: 10px;
    }

    /* Contact Us Section Style End ---------------------------------------- */
}

/* Tablet (768px–1023px) */
@media (min-width: 768px) and (max-width: 1023px) {

    /* Hero Section Style Starts -------------------------------------------- */
    section.hero_section .hero_left {
        width: 45%;
        gap: 20px;
    }

    section.hero_section .hero_left h1 {
        font-size: 37px;
        line-height: 50px;
    }

    section.hero_section .hero_left h1 span {
        font-size: 50px;
    }

    section.hero_section .hero_left p {
        font-size: 14px;
    }

    section.hero_section .hero_left a {
        border-radius: 50px;
        font-size: 15px;
        letter-spacing: .04em;
        width: 175px;
        height: 38px;
    }

    section.hero_section .hero_right {
        width: 48%;
        height: 100%;
        position: absolute;
        top: 0px;
        right: 0px;
        display: flex;
        justify-content: center;
        align-items: center;
        box-shadow: -10px 0px 25px rgba(0, 0, 0, 0.200);
    }

    /* Hero Section Style Ends -------------------------------------------- */

    /* About Us Section Style Starts ---------------------------------------- */
    section.about_us .about_left {
        width: 50%;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    section.about_us .about_right {
        width: 45%;
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: flex-start;
        gap: 15px;
    }

    section.about_us .about_right p {
        font-size: 14px;
    }

    section.about_us .about_right a {
        padding: 7px 28px;
        padding-left: 30px;
        font-size: 14px;
    }

    /* About Us Section Style Starts ---------------------------------------- */

    /* Our Products Section Style Starts --------------------------------------*/
    section.our_products .products_container {
        gap: 15px;
    }

    section.our_products .products_container .product_card {
        padding: 7px;
        height: 260px;
        gap: 7px;
    }

    section.our_products .products_container .product_card .image_container {
        width: 140px;
    }

    section.our_products .products_container .product_card .content h3 {
        font-size: 15px;
    }

    section.our_products .products_container .product_card .content p {
        font-size: 10px;
    }

    section.our_products .products_container .product_card .content a {
        padding: 5px 17px;
        font-size: 10px;
    }

    /* Our Products Section Style Ends --------------------------------------*/

    /* Our Features Section Style Starts ----------------------------------------*/
    section.our_features {
        padding-block: 25px;
        margin-block: 50px;
        gap: 20px;
    }

    section.our_features .card_container {
        gap: 12px;
    }

    section.our_features .card_container .info_card {
        flex: 1 0 calc((100% - 15px) / 3);
        height: 225px;
    }

    section.our_features .card_container .info_card h3 {
        font-size: calc(var(--subheading-font-size) + 4px);
    }

    section.our_features .card_container .info_card p {
        font-size: 12px;
    }

    section.our_features .card_container .info_card img {
        width: 55px;
        height: 55px;
        object-fit: contain;
    }

    /* Our Features Section Style Ends ----------------------------------------*/

    /* Why Choose Us Section  Style Starts ----------------------------------- */
    section.chooseus_section {
        height: 40rem;
        gap: 10px;
    }

    section.chooseus_section .chooseus_left .heading h1 span {
        color: var(--primary-color);
        font-size: 18px;
    }

    section.chooseus_section .chooseus_left .card_container {
        gap: 12px;
    }

    section.chooseus_section .chooseus_left .card_container .info_card {
        height: 200px;
        gap: 10px;
    }

    section.chooseus_section .chooseus_left .card_container .info_card h3 {
        width: 100%;
        font-family: var(--font-family-sbold);
        font-size: 13px;
        color: var(--secondary-color);
        text-wrap: wrap;
    }

    section.chooseus_section .chooseus_left .card_container .info_card p {
        width: 100%;
        font-family: var(--font-family-light);
        font-size: 10px;
        color: var(--text-color);
        text-wrap: wrap;
    }

    section.chooseus_section .chooseus_left .card_container .info_card img {
        width: 45px;
        height: 45px;
        object-fit: contain;
    }

    section.chooseus_section .chooseus_right {
        width: 50%;
    }

    section.chooseus_section .chooseus_right video {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    /* Why Choose Us Section  Style Starts ----------------------------------- */

    /* FAQ Section Style Starts ----------------------------------------------*/

    section.faq_section .faq_left h1 {
        font-size: 17px;
    }

    section.faq_section .faq_left p {
        width: 100%;
        font-family: var(--font-family-light);
        font-size: 16px;
        color: var(--text-color);
        text-wrap: wrap;
    }

    /* ---------- Accordion Styles ---------- */

    .accordion-label {
        padding: 15px;
        font-size: .85rem;
    }

    .accordion-label::after {
        content: "+";
        font-size: 1.0rem;
        transition: transform 0.3s ease;
    }

    .accordion-content {
        font-size: 0.50rem;
        padding: 0 15px;
        transition: all 0.3s ease;
    }

    /* FAQ Section Style End ------------------------------------------------*/

    /* Contact Us Section Style Starts ---------------------------------------- */
    section.contact_section {
        height: 485px;
        padding-inline: calc(var(--paddingHorizontal) + 35px);
        gap: 5px;
    }

    section.contact_section .background {
        right: calc(var(--paddingHorizontal) + 35px);
    }

    section.contact_section .contactus_left {
        padding: 20px 15px;
        gap: 20px;
    }

    section.contact_section .contactus_left h2 {
        font-size: 35px;
    }

    section.contact_section .contactus_left .contact_info {
        gap: 18px;
    }

    section.contact_section .contactus_left .contact_info .info {
        gap: 14px;
    }

    section.contact_section .contactus_left .contact_info .info img {
        width: 25px;
        height: 25px;
    }

    section.contact_section .contactus_left .contact_info .info p {
        font-size: 10px;
    }

    section.contact_section .contactus_left .social_links {
        gap: 15px;
        margin-top: 20px;
    }

    section.contact_section .contactus_left .social_links .link {
        width: 40px;
        height: 40px;
    }

    section.contact_section .contactus_right {
        padding: 20px 25px;
        gap: 20px;
    }

    section.contact_section .contactus_right .heading h2 {
        font-size: 35px;
    }

    section.contact_section .contactus_right .contact_form {
        gap: 10px;
    }

    section.contact_section .contactus_right .contact_form .row {
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 10px;
    }

    section.contact_section .contactus_right .contact_form .row input {
        flex: 1 0 calc((100% / 2) - 10px);

    }

    section.contact_section .contactus_right .contact_form input,
    section.contact_section .contactus_right .contact_form textarea {
        font-size: 12px;
        padding: 8px 15px;
    }

    section.contact_section .contactus_right .contact_form button {
        padding: 8px 25px;
        border-radius: 25px;
        ;
        font-size: 12px;
    }

    /* Contact Us Section Style End ---------------------------------------- */
}

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) and (max-width: 1199.98px) {

    /* Our Products Section Style Starts --------------------------------------*/
    section.our_products .products_container {
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        gap: 20px;
        justify-content: center;
    }

    section.our_products .products_container .product_card {
        padding: 7px;
        height: 300px;
        gap: 7px;
    }

    section.our_products .products_container .product_card .image_container {
        width: 175px;
    }

    section.our_products .products_container .product_card .content p {
        font-size: 13px;
    }

    section.our_products .products_container .product_card .content a {
        padding: 7px 20px;
        font-size: 12px;
    }

    /* Our Products Section Style Ends --------------------------------------*/

    /* Why Choose Us Section  Style Starts ----------------------------------- */
    section.chooseus_section {
        margin: 100px 0px;
        width: 100%;
        height: 45rem;
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 15px;
    }

    section.chooseus_section .chooseus_left .heading h1 span {
        color: var(--primary-color);
        font-size: 22px;
    }

    section.chooseus_section .chooseus_left .card_container {
        gap: 12px;
    }

    section.chooseus_section .chooseus_left .card_container .info_card {
        height: 225px;
        gap: 10px;
    }

    section.chooseus_section .chooseus_left .card_container .info_card h3 {
        width: 100%;
        font-family: var(--font-family-sbold);
        font-size: var(--subheading-font-size);
        color: var(--secondary-color);
        text-wrap: wrap;
    }

    section.chooseus_section .chooseus_left .card_container .info_card p {
        width: 100%;
        font-family: var(--font-family-light);
        font-size: 14px;
        color: var(--text-color);
        text-wrap: wrap;
    }

    section.chooseus_section .chooseus_left .card_container .info_card img {
        width: 55px;
        height: 55px;
        object-fit: contain;
    }

    section.chooseus_section .chooseus_right {
        width: 48%;
    }

    section.chooseus_section .chooseus_right video {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    /* Why Choose Us Section  Style Starts ----------------------------------- */

    /* Contact Us Section Style Starts ---------------------------------------- */
    section.contact_section {
        width: 100%;
        height: 575px;
        padding-inline: calc(var(--paddingHorizontal) + 45px);
        padding-block: 25px;
        gap: 10px;
    }

    section.contact_section .background {
        right: calc(var(--paddingHorizontal) + 45px);
    }

    section.contact_section .contactus_left {
        width: 45%;
        height: 100%;
        padding: 20px 30px;
        background-color: var(--secondary-color);
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: flex-start;
        gap: 30px;
        box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.250);
    }

    section.contact_section .contactus_left h2 {
        width: 100%;
        font-family: var(--font-family-bold);
        font-size: var(--heading-font-size);
        color: white;
        text-wrap: wrap;
    }

    section.contact_section .contactus_left .contact_info {
        gap: 22px;
    }

    section.contact_section .contactus_left .contact_info .info {
        gap: 18px;
    }

    section.contact_section .contactus_left .contact_info .info img {
        width: 40px;
        height: 40px;
    }

    section.contact_section .contactus_left .contact_info .info p {
        font-size: 14px;
    }

    section.contact_section .contactus_left .social_links {
        gap: 17px;
        margin-top: 20px;
    }

    section.contact_section .contactus_left .social_links .link {
        width: 45px;
        height: 45px;
    }

    /* Contact Us Section Style End ---------------------------------------- */
}