/*/////////////////////// MEDIA QUERIES /////////////////////*/

/* 95em = 1510px / 16 */

/*========== Below 1400 px ==========*/
/*========= For Desktops =========*/

@media (max-width: 88em) {

    /*------- Why Us -------*/

    .why-us__heading{
        margin-bottom: 1.8rem;
    }

    .why-us-section__content{
        gap: 1.4rem;
    }

    .why-us-card {
        max-height: 28rem;

    }

    .why-us-card__wrapper{
        font-size: 1.4rem;
    }

    .why-us-img{
        height: 6rem;
        width: auto;
    }

}

/*========== Below 1200 px ==========*/
/*========= For Smaller Laptops and Bigger Tablets =========*/

@media (max-width: 75em){

    /*---- Top Brands Slider ----*/

    .brands-belt__container{
        height: 20rem;
    }

    .slide {
        width: 30rem;
        height: 14rem;

    }

    .more-info__brand-img {
        height: 12rem;
    }

    /*---- Section 2 ----*/

    .section-2__content-box-text,
    .section-3__content-box-text{
        font-size: 2.4rem;

    }

    .section-2-text__sub-headline,
    .section-3-text__sub-headline{
        font-size: 1.4rem;

    }

    .section-2__content-box-text p,
    .section-3__content-box-text p {
        font-size: 1.4rem;

    }

    /*---- Projects Section ----*/

    .project-card {
        height: 22rem;
        max-width: 28rem;
        padding: 0.6rem;

    }

    .project__divider {
        width: 10rem;

    }

    /*---- Footer ----*/

    .footer__main-logo{
        height: 12rem;

    }

    .footer-box-2__text{
        font-size: 1.6rem;
    }

    .footer__sec-logo{
        height: 5rem;
        margin-left: 3rem;
    }

    /********* About *********/

    /*----Hero ----*/

    .about-text-heading{
        font-size: 1.8rem;

    }

    .core-values-heading {
        font-size: 1.4rem;

    }

    /*---- More Info ----*/

    .about-more-info__container .swiper-slide .title{
        font-size: 2.4rem;
    }

    .about-more-info__container .swiper-slide .subtitle{
        font-size: 1.6rem;
    }

    .founder-img-frame,
    .founder-img{
        width: 14rem;
        height: 14rem;

    }

    .founder-details {
        font-size: 1.6rem;

    }

}

/*========== Below 996 px ==========*/
/*========= For Bigger Tablets =========*/

@media (max-width: 63em) {

    /*========= Mobile Nav ===========*/

    .main-nav__list{
        display: none;
    }

    .nav-logo__container{
        width: var(--container-full);

    }

    .nav-empty-box{
        display: block;
        background: transparent;
        pointer-events: none;
        visibility: hidden;
        width: 2rem;
        height: 4rem;
    }

    .mobile-navigation{
        display: initial;
    }

    .nav__button,
    .nav__background{
        top: 2% !important;
    }

    /*---- Buttons ----*/

    .btn,
    .btn:link,
    .btn:visited{
        font-size: 1.4rem;
        padding: 0.8rem 1.2rem;

    }

    /*---- Hero ----*/

    .swiper-slide--1 .hero__img-message-box {
        gap: 4rem;

    }
    .top-brands__container p{
        font-size: 1.8rem;
    }

    .top-brand-img-box{
        height: 6rem;
        width: 6rem;
    }

    .top-brand-img{
        height: 5rem;
        object-fit: cover;
    }

    .hero__swiper-slide__btn{
        position: absolute;
        bottom: 10rem;
    }

    .main-text__headline--2,
    .main-text__headline--3{
        font-size: 2rem;

    }

    /*---- More Info ----*/

    .more-info-headline{
        font-size: 1.8rem;

    }

    .more-info-sub-headline{
        font-size: 1.6rem;
        margin-bottom: 6rem;

    }

    .more-info-text-heading{
        font-size: 1.6rem;

    }

    .more-info-text{
        font-size: 2.8rem;
    }

    /*---- Top Brands Slider ----*/

    .slide {
        width: 22rem;
        height: 12rem;

    }

    .more-info__brand-img {
        height: 10rem;
    }

    /*---- Section 2 ----*/

    .section-2__content-box-text,
    .section-3__content-box-text{
        font-size: 1.8rem;

    }

    .section-2-text__sub-headline,
    .section-3-text__sub-headline{
        font-size: 1.4rem;

    }

    .section-2__content-box-text p,
    .section-3__content-box-text p {
        font-size: 1.2rem;

    }

    /*---- Services ----*/

    .services-grid{
        gap: 1rem;
    }

    .service-card{
        width: 22rem;
        height: 34rem;
    }

    .front-details-box .title,
    .back-details-box .title{
        font-size: 1.6rem;
        height: 4rem;

    }

    .front-details-box,
    .back-details-box{
        font-size: 1rem;

    }

    .back-details-box .title {
        font-size: 1.4rem;

    }

    .front-details-box .description,
    .back-details-box .description{
        height: 4rem;

    }

    .features-heading{
        font-size: 1.4rem;
    }

    /*---- Projects Section ----*/

    .project-card {
        height: 20rem;
        max-width: 22rem;
        padding: 0.6rem;

    }
    
    .project__divider {
        width: 10rem;

    }

    .project__title a:link,
    .project__title a:visited,
    .project__sub-title a:link,
    .project__sub-title a:visited{
        font-size: 1.6rem;
    }

    .project__sub-title a:link,
    .project__sub-title a:visited{
        font-size: 1rem;
    }


    /*---- Footer ----*/

    .footer__main-logo{
        height: 11rem;

    }

    .footer-box-2__text{
        font-size: 1.4rem;
    }

    .footer__sec-logo{
        height: 4rem;
        margin-left: 2rem;
    }

    /*---- Featured Products ----*/

    .product-card{
        max-height: 28rem;
    }

    /********* About *********/

    /*---- More Info ----*/

    .about-content-box{
        padding: 4rem 0;
    }

    .about-box-right{
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 1rem;
    }

}

/*========== Below 768 px ==========*/
/*========= For Bigger Phones and Smaller Tablets =========*/

@media (max-width: 48em){

    /*===============PAGE LOADER==============*/

    .page-loader::after {
        content: "";
        width: 8.2rem;
        height: 8.2rem;

    }

    .page-loader__img-box {
        height: 7.5rem;
        width: 7.5rem;

    }

    .page-loader__img{
        margin-top: 0.15rem;
        height: 7rem;
        width: 7rem;

    }

    /*========= Mobile Nav ===========*/

    /*.mobile-navigation .nav__menu{*/
    /*    font-size: 1.4rem;*/
    /*}*/

    /*---- Hero ----*/

    .main-text__sub-headline {
        font-size: 1.6rem;

    }

    .main-text-box,
    .section-2__content-box-text,
    .section-3__content-box-text,
    .more-info__content-text-box,
    .more-info-swiper-heading,
    .img-message__text {
        font-size: 2.4rem;

    }

    .swiper-slide--1 .hero__img-message-box{
        width: var(--container-width-small);
        gap: 2rem;
    }

    .hero__img-message:link,
    .hero__img-message:visited {
        height: 12rem;
        width: 12rem;
    }

    .hero__img-message-box p {
        font-size: 1.6rem;
    }

    .hero__swiper-slide-content--2,
    .hero__swiper-slide-content--3{
        display: flex;
        flex-direction: column;
    }

    .swiper-slide-content__img-box{
        max-height: 38rem;
        max-width: 38rem;
        width: var(--container-full);

    }

    .hero__swiper-slide-content--3{
        flex-direction: column-reverse;

    }

    .swiper-slide-content__box--right .main-text-box{
        margin-bottom: -1rem;
    }

    .main-text__headline--2,
    .main-text__headline--3{
        font-size: 1.8rem;
        margin-bottom: 2rem;

    }

    .main-text__sub-headline--2,
    .main-text__sub-headline--3{
        font-size: 1.4rem;

    }

    .swiper-slide--3 .swiper-slide-content__box--right{
        margin-top: 8rem;
    }

    .hero__swiper-slide__btn--2{
        position: absolute;
        bottom: 4rem;
    }

    .swiper-slide--2 .main-text-box{
        margin-bottom: 2rem;

    }

    .top-brands__container{
        margin-bottom: 4rem;

    }

    /*------- Why Us -------*/

    .why-us-card__wrapper{
        font-size: 1.2rem;
    }

    .why-us-card__headline{
        text-align: center;
    }

    /*---- More Info ----*/

    .more-info-headline{
        font-size: 1.6rem;

    }

    .more-info-sub-headline{
        font-size: 1.4rem;
        margin-bottom: 4rem;

    }

    .more-info-text-heading{
        font-size: 1.4rem;

    }

    .more-info-text{
        font-size: 2.4rem;
        gap: 2rem;

    }

    .more-info__content-text-box p{
        font-size: 1.4rem;
        height: 5rem;

    }

    .more-info-text div{
        height: 12rem;
        width: 14rem;
    }

    /*---- Top Brands Slider ----*/

    .slide {
        width: 20rem;
        height: 10rem;

    }

    .more-info-swiper-heading p{
        font-size: 1.4rem;
    }

    .more-info__brand-img {
        height: 10rem;
    }

    /*---- Section 2 ----*/

    .section-2__container,
    .section-3__container{
        height: fit-content;
    }

    .section-2__content{
        padding: 6rem 0;

    }

    .section-2__content,
    .section-3__content{
        height: fit-content;
        display: flex;
        justify-content: center;
        flex-direction: column;

    }

    .section-3__content{
        flex-direction: column-reverse;
    }

    .section-2__content-box--right,
    .section-3__content-box--right {
        padding: 2rem;

    }

    .section-3__content-box--right{
        position: relative;
    }

    .section-3__swiper-slide__btn:link{
        position: absolute;
        bottom: 4rem;
    }

    /*---- Services ----*/

    .services-section__container{
        height: fit-content;
        padding: 4rem 0;
    }

    .services-grid{
        display: grid;
        grid-template-columns:1fr 1fr;
    }

    /*---- Projects Section ----*/

    .projects-section__container{
        height: fit-content;
        padding: 4rem 0;

    }

    .projects__grid{
        grid-template-columns: repeat(2, 1fr);

    }

    /*---- Footer ----*/

    .footer-section__container{
        height: fit-content;
        padding: 4rem 0;
    }

   .footer-box__content{
       grid-template-columns: repeat(2, 1fr);

   }

   .footer-box--1{

   }

   .footer-box--4{
       height: 30rem;

   }

   .footer-box--2{

   }

   .footer-box--3{
       text-align: center;
       padding: 0 2rem;
   }

    /*---- Featured Products ----*/

    .product-card{
        max-height: 44rem;
    }

    .featured-products-section__container{
        height: fit-content;
        padding: 4rem 0;
    }

    .products-box{
        display: grid;
        grid-template-columns: repeat(2, 1fr);
    }

    /********* About *********/

    /*---- Hero ----*/

    .about-hero__container{
        height: fit-content;
    }

    .about-box-right{
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        justify-content: center;
        gap: 1rem;

    }

    .hero-main-info-box{
        flex-direction: column;
    }

    .about-info-box{
        min-height: 20rem;
    }

    /*---- More Info ----*/

    .about-more-info__container{
        height: fit-content;
        padding: 4rem 0;
    }

    .more-info__swiper .swiper-slide{
        min-height: 40rem;
    }

    .about-more-info__content{
        flex-direction: column;
        gap: 4rem;
    }

    /********* Contact *********/

    /*---- Hero ----*/

    .contact-hero__container{
        height: fit-content;
        padding: 6rem 0;
    }

    .contact-hero__content{
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 2rem;
        flex-direction: column;
    }

    .contact-form__container{
        max-width: 80rem;
    }

    textarea{
        max-width: 46rem;
        width: var(--container-full);
    }

    .contact-details__container{
        gap: 0.8rem;
    }

    .contact-detail-box{
        font-size: 1rem;
        padding: 1rem;
        overflow: hidden;

    }

    .contact-company-logo-box{
        height: 9rem;
        width: 9rem;
    }

    .contact-company-logo{
        height: 8rem;
        width: 8rem;
    }

    .b-academy-logo{
        margin-top: 2rem;
        height: 10rem;
        width: 10rem;
    }

    .a-logo{
        height: 7rem;
        width: 7rem;
    }

}

/*========== Below 576 px ==========*/
/*========= For Smaller Phones =========*/

@media (max-width: 36em){

    /*---- Nav ----*/

    .nav-logo__container{
        height: 5rem;
        padding: 0.4rem 0 0 0;

    }

    .nav-logo__img {
        height: 3.5rem;

    }

    .nav-search__area-box{
        top: 4.5rem;
        padding: 1rem;
    }

    .nav-search__area-box-wrapper{
        gap: 1rem;
    }

    .nav-search__search-area{
        height: 4rem;
        padding: 0 1rem;
        font-size: 1.4rem;
    }

    .nav-search-results,
    .nav-search-results:link,
    .nav-search-results:visited{
        padding: 2rem 1rem;
        font-size: 1.4rem;

    }

    /*===== Mobile Nav ======*/

    .nav__background{

    }

    .nav__button{
        height: 4.5rem !important;
        width: 4.5rem !important;
    }

    .mobile-navigation .nav__link:link,
    .mobile-navigation .nav__link:visited{
        font-size: 1.4rem;
    }

    /*---- Buttons ----*/

    .section__heading{
        font-size: 1.4rem;

    }

    .why-us-box,
    .services-underline-box,
    .sales-underlines-box,
    .featured-products-box,
    .card-underline,
    .reviews-underline-box,
    .review-divider,
    .contact-hero-box,
    .support-files-products-box{
        height: 0.2rem;
        background: var(--color-tint_gray);
    }

    .services-underline-box{
        width: 14rem;
    }

    .sales-underlines-box{
        width: 4rem;
    }

    .why-us-box{
        width: 6rem;
    }

    .featured-products-box{
        width: 7rem;
    }

    .card-underline{
        width: 2rem;

    }

    .reviews-underline-box{
        width: 9rem;

    }

    .contact-hero-box{
        width: 5rem;

    }

    .support-files-products-box{
        width: 7rem;
    }

    /*---- Buttons ----*/

    .btn,
    .btn:link,
    .btn:visited{
        font-size: 1.2rem;
        padding: 0.6rem 0.8rem;

    }

    /*---- Hero ----*/

    .hero__img-message:link,
    .hero__img-message:visited {
        height: 8rem;
        width: 8rem;
    }

    .hero__img-message-box p {
        font-size: 1.2rem;
    }

    .swiper-slide--1 .hero__img-message-box{
        width: var(--container-width-xlarge);
        gap: 1rem;
    }

    .main-text-box,
    .section-2__content-box-text,
    .section-3__content-box-text,
    .more-info__content-text-box,
    .more-info-swiper-heading,
    .img-message__text {
        font-size: 1.8rem;

    }

    .main-text__sub-headline,
    .main-text__sub-headline--2,
    .main-text__sub-headline--3{
        font-size: 1.2rem;

    }

    .main-text__headline--2,
    .main-text__headline--3{
        font-size: 1.4rem;
        margin-bottom: 2rem;

    }

    .main-text-box p{
        font-size: 1.2rem;
    }

    .swiper-slide-content__box--right .main-text-box{
        margin-bottom: 1rem;
    }

    .top-brands__container p{
        font-size: 1.4rem;
    }

    .top-brand-img-box {
        height: 4.5rem;
        width: 4.5rem;

    }

    .top-brand-img {
        height: 4.5rem;

    }

    .main-text__sub-headline--3{
        font-weight: initial;
        font-size: 1.2rem !important;
    }

    .swiper-slide--3 .swiper-slide-content__text-box{
        margin-bottom: 5rem;
    }

    .hero__swiper-slide__btn--2{
        position: absolute;
        bottom: 6rem;
    }

    .top-brands__container{
        margin-bottom: 4rem;
    }

    /*------- Why Us -------*/

    .why-us-section__container,
    .why-us-section__wrapper,
    .why-us-section__content{
        height: fit-content;
    }

    .why-us-section__container{
        padding: 8rem 0 4rem 0;
    }

    .why-us-section__content{
        grid-template-columns: repeat(1, 1fr);

    }

    /*---- More Info ----*/

    .more-info-headline{
        font-size: 1.4rem;

    }

    .more-info-sub-headline{
        font-size: 1.2rem;

    }

    .more-info-text-heading{
        font-size: 1.2rem;

    }

    .more-info-text{
        font-size: 2.8rem;

    }

    .more-info__content-text-box p{
        font-size: 1.2rem;
        height: 6rem;

    }

    .more-info-text div{
        height: 12rem;
        width: 12rem;
    }

    /*---- Top Brands Slider ----*/

    .brands-belt__container{
        height: 16rem;
    }

    .slide {
        width: 18rem;
        height: 9rem;

    }

    .more-info__brand-img {
        height: 8rem;
    }

    /*---- Services ----*/

    .services__heading{
        font-size: 1.4rem;
    }

    .services-grid{
        display: grid;
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    /*---- Projects Section ----*/

    .project-card {
        height: 22rem;
        max-width: 22rem;

    }

    .project-detail-box{
        width: fit-content;
    }


    /********* About *********/

    /*---- Hero ----*/

    .about-text-heading{
        font-size: 1.6rem;
    }


    .about-box-left .about-text {
        font-size: 1.2rem;

    }

    .core-values-heading{
        font-size: 1.4rem;
    }

    .core-values-box{
        gap: 1rem;
    }

    .value-box{
        height: 9rem;
        width: 9rem;
    }


    .value-img-wrapper,
    .value-img{
        height: 5rem;
        width: 5rem;

    }

    .value-text {
        font-size: 1rem;

    }

    .about-info-box{
        font-size: 1rem;
        padding: 0.8rem;
    }

    /********* Support *********/

    /*---- Hero ----*/

    .support-documentation-box{
        gap: 1rem;
    }

    .doc-box{
        height: 10rem;
        padding: 0.8rem;
    }

    .doc-box a:link,
    .doc-box a:visited{
        font-size: 1.2rem;
        padding: 0;
    }

}

/*========== Below 448 px ==========*/
/*========= For Extra Smaller Phones =========*/

@media (max-width: 28em){

    /*---- More Info ----*/

    .more-info-section__content{
        margin-top: 6rem;
        padding: 0 1.5rem;
    }

    .more-info-text{
        font-size: 2.2rem;
        gap: 0.1rem;
    }

    .more-info__content-text-box p{
        font-size: 1rem;
        height: 6rem;

    }

    .more-info-text div{
        height: 8rem;
        width: 9rem;
    }

    /*---- Top Brands Slider ----*/

    .brands-belt__container{
        height: 12rem;
    }

    .more-info-swiper-heading p{
        font-size: 1.2rem;
    }

    .slide {
        width: 12rem;
        height: 6rem;
        border-radius: 1rem;
    }

    .more-info__brand-img {
        height: 5rem;
    }

    /*---- Projects Section ----*/

    .projects__grid {
        column-gap: 1rem;

    }

    .project-card {
        height: 18rem;
        max-width: 15rem;
        padding: 0.6rem;

    }

    .project__divider {
        width: 6rem;

    }

    .project__title a:link,
    .project__title a:visited,
    .project__sub-title a:link,
    .project__sub-title a:visited{
        font-size: 1.2rem;
    }

    .project__sub-title a:link,
    .project__sub-title a:visited{
        font-size: 0.8rem;
    }

    /*---- Featured Products ----*/

    .shop-notice{
        border-radius: 2rem;
        height: 10rem;
    }

    .shop-notice p,
    .shop-notice a:link,
    .shop-notice a:visited{
        font-size: 1rem;
        text-align: left;

    }

    /*---- Footer ----*/

    .footer-box__content{
        grid-template-columns: repeat(1, 1fr);

    }

    .footer-box-2__text{
        font-size: 1.2rem;
    }

    /********* About *********/

    /*---- Hero ----*/

    .about-text-heading{
        padding: 1rem 4rem;
    }

    /*---- More Info ----*/

    .meet-the-founder__title {
        font-size: 1.6rem;

    }

    .founder-img-frame,
    .founder-img{
        height: 10rem;
        width: 10rem;
    }


    .founder-details {
        font-size: 1.4rem;

    }

    .founder-title{
        font-size: 1.2rem;
    }

    .founder-info{
        font-size: 1.2rem;
    }

    .more-info__content-box--left .swiper-slide .title{
        font-size: 1.8rem;
    }

    .more-info__content-box--left .swiper-slide .subtitle{
        font-size: 1.2rem;
    }

    .more-info__content-box--left .swiper-slide .text{
        font-size: 1.2rem;
    }

    /********* Contact *********/

    /*---- Hero ----*/

    .contact-detail-box{
        max-width: 28rem;
    }

    .contact-hero__content .title{
        line-height: 2rem;
        font-size: 1.4rem;
        padding: 0 2rem;
    }

    .contact-detail-box{
        font-size: 0.8rem;
    }

    /********* Support *********/

    /*---- Hero ----*/

    .support-documentation-box{
        grid-template-columns: repeat(2, 1fr);

    }


}