/*************************************/
/* BELOW 1440px (Large Laptops)  */
/*************************************/

@media (max-width: calc(1/16*1440em)) {
    .right-icon:link,
    .right-icon:visited {
        right: -3%;
    }

    .left-icon:link,
    .left-icon:visited  {
        left: -3%;
    }

    html {
        font-size: 55% ;        /* 50% before */
    }
    
}

/*************************************/
/* BELOW 1250px (Laptops)  */
/*************************************/
@media (max-width: 1250px) {
    .heading-1 {
        font-size: 5.8rem;
    }
    .heading-testimonial {
        font-size: 2.8rem;
    }
    
    /* main section */
    .main-text-container {
        max-width: 85rem;
        right: 10rem;
    }
    .main-text-heading-1 {
        padding-right: 0;
        margin-bottom: 2.4rem;
    }
    .main-text {
        padding: 3.8rem 3.8rem;
    }

    .section-main {
        /* margin-bottom: 38rem; */
    }
    .why-main-section.section-main {
        margin-bottom: 20rem;
    }

    /* modal */
    .modal-heading {
        /* font-size: 7.4rem; */
    }

    /* read more section */
    .read-more-heading {
        margin-bottom: 2.4rem;
    }
    .more-text-container {
        max-width: 80%;
    }
    .more-text {
        padding: 4.8rem 3.8rem;
    }

    /* logo */
    .logo {
        position: static;
    }
}


/*************************************/
/* BELOW 1024px (Laptops)  */
/*************************************/

@media (max-width: calc(1/16*1024em)) {
    html {
        font-size: 50%;
    }
    .heading-1 {
        font-size: 5.2rem;
        font-weight: 700;
    }

    /* testimonial section */
    .right-icon:link,
    .right-icon:visited {
        right: 0%;
    }
    
    .left-icon:link,
    .left-icon:visited  {
        left: 0%;
    }
    .heading-testimonial {
        font-size: 3rem;
    }
    
    /* main section */
    .main-text-container {
        max-width: 80rem;
        right: 5rem;
    }

    
    /* modal */
    .modal-heading {
        /* font-size: 7.4rem; */
    }
    .modal-content {
        padding: 2.4rem;
    }

    
}




/*************************************/
/* BELOW 850px (Tablets)  */
/*************************************/

@media (max-width: calc(1/16*850em)) {

    .header {
        padding-right: 2.4rem;
    }
    .container {
        padding: 0 6.4rem;
    }

    .main-text-container {
        /* right: 10rem; */
        max-width: 70rem;
    }

    .para-text, .service-text, .btn:link, .btn:visited {
        font-size: 1.8rem;
    }

    /* logo */
    .logo {
        position: static;
    }
    .logo-link {
        
        margin-left: 1rem;
    }

    /* service section */
    .service-header {
        margin-bottom: 6.4rem;
    }
    .service-para {
        width: 100%;
    }
    .service-container {
        grid-template-columns: 1fr 1fr;
        column-gap: 3.2rem;
    }
    .service-box-container:nth-child(even) {
        justify-self: center;
    }
    .service-box-container:nth-child(odd) {
        justify-self: center;
    }

    /* testimonial section */
    /* .cus-info {
        margin-bottom: 0;
    }
    .heading-testimonial {
        margin-bottom: 0;
    } */

    /* read more section */
    .more-text-container {
        max-width: 100%;
    }


    /* CTA form */
    .section-cta {
        /* padding-bottom: 2.4rem; */
    }
    .cta-form {
        grid-template-columns: 1fr;
    }
    
    .address-container {
        padding: 2.4rem 2.4rem 0 2.4rem;
    }
    .copyright {
        margin-top: auto;
    }
    .cta-heading {
        font-size: 4rem;
    }

    /* modal */
    .modal-content {
        max-width: 100rem;
        padding: 3.2rem 0;
    }
    .modal-address {
        margin-bottom: 0;
    }


    /* Making Nav Bar responsive */
    .nav {
        background-color: var(--primary-color);
        top:0 ;
        left:0 ;
        position: fixed ;
        transform: translateX(100vw);

        width: 100% ;
        height: 100vh ;
        display: flex;
        justify-content: center;
        align-items: center;
        
        z-index: 2;

        

        /* display: none;  /* Allow now transitions at all */

        /* 1) Hide it visually */
        opacity: 0;

        /* 2) Make it unaccessible to mouse and keyboard */
        pointer-events: none;

        /* 3) Hide it from screen readers */
        visibility: none;

    }
    .main-nav-list {
        display: flex;
        flex-direction: column;
        gap: 6.4rem;
    }
    .main-nav-link:link,
    .main-nav-link:visited {
        color: white;
        font-size: 6.2rem;
        font-weight: 300;
    }

    .main-nav-link:hover,
    .main-nav-link:active {
        color: #d41317;
    }

    .nav-open .nav{
        transition: all 0.5s ease-in;
        opacity: 1;
        pointer-events: auto ;
        visibility: visible ;
        transform: translateX(0) ;
        
    }

    .btn-mobile-nav {
        display: block ;
        z-index: 2;
    }

    .nav-open .icon-mobile-nav[name='close-btn'] {
        display: block;
        /* position: fixed;
        top: 5rem;
        right: 5rem; */
    }

    .nav-open .icon-mobile-nav[name='hamburger-icon'] {
        display: none ;
    }


   


}


/*************************************/
/* BELOW 768px (Tablets)  */
/*************************************/

@media (max-width: calc(1/16*768em)) {
    .service-container {
        grid-template-columns: 1fr 1fr;
        column-gap: 3.2rem;
    }
    .service-box-container:nth-child(even) {
        justify-self: end;
    }
    .service-box-container:nth-child(odd) {
        justify-self: start;
    }
}


/*****************************************************/
/* BELOW 650px (Large Mobiel & Small Tablets)  */
/*****************************************************/

@media (max-width: calc(1/16*650em)) {          /* Change to 425*/

    html {
        /* font-size: 43.75% ; */
    }

    .container {
        padding: 0 4.8rem;
    }
    .heading-1 {
        font-size: 4.4rem;
        line-height: 1.2;
        margin-bottom: 2.4rem;
    }
    

    /* logo */


    /* Main section adjustments */
    .main-text-container {
        position: static;
        max-width: 100%;
    }

    .section-main {
        margin-bottom: 10rem;
    }
    .why-main-section.section-main {
        margin-bottom: 5rem;
    }
    .text-container {
        display: flex;
        flex-direction: column;
        gap: 1.2rem;
    }


    /* Service section adjustments */
    .service-para {
        width: 100%;
        
    }

    .service-container {
        display: flex;
        flex-direction: column;
        gap: 2rem;
        padding: 0

    }
     

    .section-service {
        /* background-color: var(--primary-color); */
        padding-bottom: 4.8rem;
    }

    .service-box {
        transform: none;
        max-width: 100%;

        padding: 4.8rem 4.8rem;
    }

    .service-box-container {
        border: none;
        max-width: 100%;
        margin-left: 0;
    }


    /* testimonial section */

    .cus-info {
        /* font-size: 2rem; */
    }
    .carousel-icon {
        font-size: 5.2rem !important;
    }
    .testimonial-text {
        font-size: 3rem;
        max-width: 80%;
    }
    .heading-testimonial {
        font-size: 2.4rem;
        margin-bottom: 3.2rem;
    }
    


    /* read more section */
    .read-more-container {
        padding: 0;
    }
    .read-more-text-container {
        display: flex;
        flex-direction: column;
        gap: 1.2rem;
    }
    .horizontal-bar {
        width: 30%;
        margin-top: 0;
    }


    .more-text-container {
        max-width: 100%;
    }

    /* CTA Section */
    .address {
       align-items: start;
       gap: 2rem;
    }
    .copyright {
        align-self: start;
    }
    .address-container {
        padding: 2.4rem 2.4rem;
    }

    /* modal */
    .modal-content {
        grid-template-columns: none;
        max-width: 70rem;
        height: 75rem;
        /* overflow-y: scroll; */
        padding: 3.2rem 0;
    }

    .modal-form {
        /* margin-bottom: 4.8rem; */

    }
    .modal-address-container {
        padding-top: 0;
    }
    .modal-address-container .form-btn-container {
        margin-bottom: 4.8rem;
    }

    .modal-heading {
        /* font-size: 4.8rem; */
        text-align: center;
        padding-right: 0;
    }


    /* LEARN MORE PAGE MEDIA QUERIES */
    .content-box {
        display: flex;
        flex-direction: column;
        gap: 2.4rem;

    }
    .paras {
        padding: 0;
    }
    .back-link:link,
    .back-link:visited {
        padding-left: 0;
        margin-left: -0.5rem;
    }
    .flex-container {
        padding: 0;
    }

    .learn-more-heading {
        transform: translate(0, -9.5rem);
        background-color: rgb(242, 242, 242);
        padding: 2.4rem 2.4rem 0 2.4rem;
    }
    .content-box {
        transform: translate(0, -9.5rem);
        padding: 0 2.4rem 2.4rem 2.4rem;
    }

    /* WHY CHOOSE US PAGE QUERIES */
     .why-main-text .main-text-heading-1 {
        text-align: center;
    }
    
}


/*************************************/
/* BELOW 425px (Mobile)  */
/*************************************/

@media (max-width: calc(1/16*425em)) { 

    
    .para-text {
        text-align: left;
    }

    /* nav bar adjustmenets */
    .main-nav-link:link,
    .main-nav-link:visited {
        font-size: 5.2rem;
    }

    /* service section */
    .service-box {
        padding: 3.2rem 2.4rem;
    }

    /* testimonial section */
    .testimonial-text {
        font-size: 2.4rem;
    }
    .carousel-icon {
        font-size: 3.2rem !important;
    }
    .right-icon:link,
    .right-icon:visited
    {
        right: 4%;
    }
    .heading-testimonial {
        font-size: 2.2rem;
    }

    .left-icon:link,
    .left-icon:visited {
        left: 4%;
    }
    .testimonial-text {
        margin-bottom: 2.4rem;
    }
    .cus-info {
        margin-bottom: 2.4rem;
    }



    /* modal */
    .modal-content {
        max-width: 40rem;
        height: 60rem;
        overflow-y:scroll;
    }
    .modal-heading {
        line-height: 1.2;
    }


    /* CTA Section */
    .cta-container {
        padding: 0 3.2rem;
    }

}



/*************************************/
/* BELOW 320px (Small Mobile)  */
/*************************************/

@media (max-width: calc(1/16*375em)) { 

    .heading-1 {
        font-size: 4rem;
    }

    /* logo */
    .logo-link  {
        margin-left: 2rem;
    }

    /* nav bar adjustmenets */
    .main-nav-link:link,
    .main-nav-link:visited {
        font-size: 3.6rem;
    }
    .nav-open .icon-mobile-nav[name='close-btn'] {
        /* top: 4rem;
        right: 2rem; */
    }

    /* testimonial section */
    .carousel-icon {
        font-size: 2.2rem !important;
    }
    .right-icon:link,
    .right-icon:visited {
        right:2%;
    }

    .left-icon:link,
    .left-icon:visited  {
        left: 2%;
    }
    .heading-testimonial {
        margin-bottom: 2.2rem;
        font-size: 2rem;
    }
    .testimonial-text {
        font-size: 2.2rem;
    }
    .cus-info {
        font-size: 1.8rem;
        margin-bottom: 0.8rem;
    }
    

    /* service section */
    .service-box {
        padding: 3.2rem 3.2rem;
    }

    /* modal */
    .modal-content {
        max-width: 35rem;
        height: 55rem;
        padding: 2.4rem 0;
    }

    /* LEARN MORE PAGE MEDIA QUERIES */
    .learn-more-service-box {
        padding: 2rem;
    }


    /* PRIVACY AND T&C MEDIA QURIES */
    .privacy-container {
        padding: 0 2.4rem;
    }
}



/*************************************/
/* BELOW 270px  */
/*************************************/

@media (max-width: calc(1/16*270em))  {
    html {
        font-size: 40%;
    }
}


/*************************************/
/* BELOW 220px  */
/*************************************/

@media (max-width: calc(1/16*220em))  {
    html {
        font-size: 30%;
    }
}