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

/* 95em = 1510px / 16 */

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

@media (max-width: 88em) {

    /*---------- Contact -----------*/



    /*---------- Gallery -----------*/


}


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

@media (max-width: 75em){

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



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

    .why-us-section__container{
        height: fit-content;

    }

    .why-us-section__wrapper{
        height: fit-content;

    }

    .why-us-section__content{
        height: fit-content;

    }

    .why-us__core-value{
        height: 24rem;
        max-width: 20rem;
        width: var(--container-full);

    }

    .core-value__image-box,
    .core-value__image-wrapper{
        height: 10rem;
        width: 10rem;

    }

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

    .core-value__title strong {
        font-size: 1.6rem;

    }

    .core-value__title{
        font-size: 1.4rem;
        height: 12rem;

    }

    .core-value__description{
    }

    .portfolio-gallery__image-box{

    }

    .gallery-image__box{
        height: 24rem;
    }

}

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

@media (max-width: 63em) {

    /*---------- General -----------*/

    .main-nav__list{
        display: none;
    }

    .btn,
    .btn:link,
    .btn:visited{
        height: 7rem;
        font-size: 1.4rem;

    }

    .hero__main-text{
        font-size: 2rem;

    }

    .hero__sub-text{
        font-size: 1.4rem;

    }

    .about-us-box{
        font-size: 1.6rem;

    }

    .service-card__wrapper{
        flex-direction: column;
    }

    .footer-list-div h3{
        font-size: 2rem;
    }

    .footer-brandis-logo{
        height: 4rem;
        width: 4rem;

    }

    .contact-section__content{
        gap: 4rem;
        padding: 4rem;
        flex-direction: column;
    }

    .contact-details__box-wrapper{
        width: var(--container-full);
    }

    .contact-page__logo-img{
        height: 5rem;
    }

    .contact-details__box{
        font-size: 1.4rem;
    }

    .contact-form__container{
        padding: 1rem;
    }

    .contact-form__input-field{
        font-size: 1.4rem;
    }

    .gallery-image__box{
        height: 22rem;
    }

    /*!*-------------- Mobile Nav ----------------*!*/

    /*.nav__icons{*/
    /*    display: block;*/

    /*}*/

    /*.menu-toggle__icon-div{*/
    /*    display: block;*/
    /*}*/

    /*.menu-bar__icon--close{*/
    /*    display: none;*/
    /*}*/

    /*== MOBILE NAV ==*/

    .nav__icons{
        display: block;
        right: 0;
        position: absolute;
        top: 2.5rem;

    }

    .menu-toggle__icon-div{
        display: block;
    }

    .menu-bar__icon--open{
        display: block;
    }

    .menu-bar__icon--close{
        display: none;
    }

    .main-nav__list{
        pointer-events: none;
        visibility: hidden;
        opacity: 0;
        display: none;
    }

    .nav__container.nav--open{
        height: 100vh;
        background-color: var(--color-light_black);
        opacity: 0.9;

        display: flex;
        align-items: center;

        overflow: hidden;
    }

    .nav--open .main-nav__list{
        height: 80vh;
        margin-top: 1rem;
        width: var(--container-full);

        pointer-events: all;
        visibility: visible;
        opacity: 100;

        transition: all 1s ease;

        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        gap: 1rem;

    }

    .nav--open .main-nav__list-item{
        height: 6rem;
        width: var(--container-width-large);
        padding: 0;

        display: flex;
        justify-content: center;
        align-items: center;
    }

    .nav--open .main-nav__link:link,
    .nav--open .main-nav__link:visited{
        width: var(--container-full);
        height: var(--container-full);

        display: flex;
        justify-content: center;
        align-items: center;

        font-size: 2rem;

    }

    .nav--open .menu-bar__icon--open{
        display: none;
    }

    .nav--open .menu-bar__icon--close{
        display: block;
    }

    .nav--open .menu-toggle__icon-div{
        display: block;
    }

    .nav--open .nav__icons{
        position: absolute;
        top: 0.8rem;
    }

    .menu-bar__icon--close{
        position: absolute;
        top: -27rem;
        right: 0;
    }


    .nav--open .nav-logo__container {
        display: none;
    }

    .hidden{
        display: none;
    }

    .no-scroll {
        overflow: hidden;
    }

    /*==============*/


}

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

@media (max-width: 48em){

    /*---------- General -----------*/

    .section__heading{
        font-size: 2.8rem;
    }

    .nav__content{
        height: 8rem;

    }

    .nav-logo__container {
        height: 5rem;
        width: 5rem;
    }

    .nav-logo__img {
        height: 6rem;

    }

    .nav__icons{
        top: 2rem;

    }

    .menu-bar__icon--close{
        top: -28rem;
    }

    /*---------- Home -----------*/

    .about-us-section__container{
        height: fit-content;

        padding: 8rem 0;
    }

    .about-us-section__wrapper{
        height: fit-content;
    }

    .about-us-section__content{
        height: fit-content;

        flex-direction: column;
    }

    .about-us-box,
    .gallery-hero__message-text{
        font-size: 1.4rem;

    }

    .core-value__title strong {
        font-size: 1.4rem;
    }

    .why-us__core-values{
        gap: 1rem;
    }

    .core-value__image-box,
    .core-value__image-wrapper {
        height: 8rem;
        width: 8rem;
    }

    .why-us__core-values{
        display: grid;
        grid-template-columns: repeat(2, 1fr);
    }

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

    }

    .footer-logo{
        height: 8rem;
    }

    .footer-list{
        gap: 4rem;
    }

    .footer-list li a:link,
    .footer-list li a:visited,
    .footer-list li a,
    .footer-list li{
        font-size: 1.4rem;
    }

    .footer-sub-section {
        font-size: 0.8rem

    }

    .gallery-images__box{
        grid-template-columns: repeat(3, 1fr);
        gap: 1rem;

    }

}

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

@media (max-width: 36em){

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

    }

    /*---------- Home -----------*/

    .services-section__container{
        padding: 8rem 0;
    }

    .hero__open-text{
        width: var(--container-width-medium);
    }

    .service-card{
        padding: 2rem;
    }

    .service-card__info-box{
        width: 90%;
        padding: 2rem 1rem;
        border-left: none;
        border-top: 0.1rem solid var(--color-temp);

    }

    .service-card__info-box .text{
        font-size: 1.4rem;
    }

    .service-card__image-box,
    .service-card__image-box-wrapper{
        width: 26rem;
    }

    .service-card__image{
        width: var(--container-full);
    }

    .footer-logo{
        height: 6rem;
    }

    .footer-list{
        flex-direction: column;
    }

    .footer-main-section{
        height: 42rem;
    }

    .contact-details__box,
    .contact-form__input-field{
        font-size: 1.4rem !important;
    }

    .contact-page__logo-img{
        height: 6rem  !important;;
    }

    .contact-form__submit-btn{
        right: -4rem !important;
    }

    .gallery-image__box{
        height: 16rem;
        border: 2px solid black; /* Moved the border to the container box */

    }

}

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

@media (max-width: 28em){

    /*---------- General -----------*/

    .section__heading{
        font-size: 2.4rem;
    }

    .nav__content{
        height: 7rem;

    }

    .nav__icons{
        top: 1.6rem;

    }

    .menu-bar__icon--close{
        top: -29rem;
    }

    .nav-logo__container {
        height: 4rem;
        width: 4rem;
    }

    .nav-logo__img {
        height: 5rem;

    }

    /*---------- Home -----------*/

    .hero__open-text{
        width: var(--container-width-medium);
    }

    .hero__main-text{
        font-size: 1.8rem;
    }

    .btn,
    .btn:link,
    .btn:visited{
        padding: 1rem;
        height: 6rem;

    }

    .about-us-box{
        font-size: 1.2rem;

    }

    .core-value__title{
        font-size: 1.2rem;
    }

    .service-card{
        padding: 1rem;
    }

    .service-card__info-box{
        width: 90%;
        padding: 2rem 1rem;
        border-left: none;
        border-top: 0.1rem solid var(--color-temp);

    }

    .service-card__image-box,
    .service-card__image-box-wrapper{
        width: 18rem;
    }

    .title h3{
        font-size: 1.6rem;

    }

    .service-card__info-box .text{
        font-size: 1.2rem;
    }

    .contact-page__logo-img{
        height: 5rem  !important;;
    }

    .contact-details__container{
        padding: 0 !important;
    }

    .contact-details__box{
        font-size: 1.4rem !important;
        width: var(--container-full) !important;
        max-width: 40rem;
    }

    .contact-details__box-wrapper{
        padding: 1rem !important;
        width: var(--container-full) !important;
    }

    .contact-detail p{
        margin-left: 1rem !important;
        border-left: 0.2rem var(--color-temp-darker) solid;
        padding-left: 1rem !important;

    }

    .gallery-image__box{
        height: 14rem;
        border: 1px solid black; /* Moved the border to the container box */

    }


}