/* ======================================================= MEDIA QUERIES */
/* Breakpoints: 1200, 1000, 1000 landscape, 800, 650, 500 =================*/
@media (max-width: 1600px ) {
    html {
        font-size: 15px;
    }
}

@media (max-width: 1200px) {
    /* ============= WHOLE PAGE STYLES */
    html {
        font-size: 15px;
    }
    section, footer {
        padding: 100px 10%;
    }

    header, .hero-text {
        padding: 0 10%;
    }

    .service-card {
        font-size: 2.2vw;
    }

    /* ======================== FOOTER */
    footer {
        padding-bottom: 0;
    }

    .accreditations-container {
        padding: 0 10%;
    }
} 

@media (max-width: 1000px) {

    :root {
        --gradient-6: linear-gradient(150deg, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0.7) 100%);
    }
    /* =========================== NAV */
    .hamburger {
        display: block;
    }

   header nav {
        position: absolute;
        top: 0;
        left: 0;
        display: flex;
        align-items: center;
        height: 100vh;
        width: 100%;
        padding-top: var(--header-height);
        background-color: var(--accent-color-1);
        text-align: center;
        transform: translateX(200vw);
        overflow-x: hidden;
        overflow-y: scroll;
        transition: 1s ease;
    }

    header nav ul {
        flex-direction: column;
        height: auto;
        width: 100%;
        gap: 1.5em;
    }

    header nav ul li {
        width: 100%;
        margin: 0;
        padding: 0;
    }

    header nav a {
        font-size: 1.6rem;
        color: var(--accent-color-2);
    }

    header nav a:hover {
        text-decoration-color: transparent;
    }

    header nav ul ul {
        width: auto;
        height: auto;
        max-height: 0;
        margin: 0 0 0 -1em;
        padding: 0;
        position: static;
        overflow: hidden;
        opacity: 1;
        border: none;
        transition: 0.5s ease;
    }

    header nav ul ul li {
        margin: 1em;
    }

    header nav ul ul li:first-child {
        display: block;
    }

    header nav ul ul li a {
        font-size: 1.3rem;
    }

    li:has(ul) > a {
        margin: 0 0 0 0.5em;
        pointer-events: none;
    }

    li:has(ul) > a::after {
        display: inline-block;
        content: '>';
        font-family: 'Quicksand', sans-serif;
        font-weight: 700;
        font-size: 0.8em;
        transform: rotate(90deg) translate(0em,-0.3em) scaleX(0.7);
        color: var(--medium-grey);
    }

    .slide-nav {
        transform: translateX(0vw);
    }

    .dropdown-accordian {
        max-height: 300px;
        padding: 0.4em 0;
        overflow: visible;
        pointer-events: auto;
        background-color: rgba(110, 110, 110, 0.1);
    }

    .dark-nav-text {
        color: var(--accent-color-2);
    }

    .dark-nav-text:hover {
        text-decoration-color: transparent;
    }

    .dropdown-shadow {
        box-shadow: inset 0px 13px 18px -10px rgba(0,0,0,0.2);
    }


    /* ================ FLEX CONTAINER */

    .hero-text h2 {
        width: 100%;
    }

    .flex-container {
        flex-direction: column;
    }

    .latest-work .flex-container {
        flex-direction: column-reverse;
    }
  
    .flex-item-left, .flex-item-right {
        width: 100%;
    }

  
    .gallery-col {
        width: 100%;
    }

    .service-card-container {
        grid-template-columns: 1fr 1fr;
        gap: 3vw;
    }
    
    .service-card {
        aspect-ratio: 1.2;
        font-size: 3vw;
    }


    .quote p {
        width: 100%;
    }

    .accreditation-container {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 5%;
    }

    .accreditation-container {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: center;
        gap: 5vh;
    }
    
    .accreditation-img-container {
        width: 100%;
        text-align: center;
    }
    
    .accreditation-img-container img {
        height: 20vw;
    }
    
    /* ================= WHY CHOOSE US */
    .why-choose-us-item {
        display: block;
        width: 100%;
    }

    .icon {
        font-size: 70px;
    }

    /* ====================== REVIEWS */
    .review-text {
        padding: 1em 0%;
        font-size: 1.3rem;
        text-align: left;
    }

    /* ================= LATEST WORK */
    .latest-work-img-grid {
        text-align: center;
        padding-bottom: 0px;
     }

     /* ================= SERVICES */
    .services p {
        width: 100%;
    }


      /* ================= CONTACT FORM */
     .field-wrapper, .contact-elements-container {
        flex-direction: column;
    }


    /* ================= FOOTER */
 
    footer {
        text-align: center;
    }
    
    .footer-icon {
        margin: 25px  25px 0 25px;
    }

    .footer-col-container {
        flex-direction: column;
    }

    .footer-col {
        width: 100%;
    }

    .footer-bottom p {
        width: 100%;
        text-align: center;
        margin: 5px;
     }
    .footer-accreditations img {
        height: 15vw;
    }

    .accreditations-container {

    }
}

 @media (max-width: 1000px) and (orientation: landscape) {

}

@media (max-width: 800px) {
    section, footer {
        padding: 70px 10%;
    }

    .hero-logo {
        width: 70dvw;
        height: auto;
    }
   .why-choose-us-container {
        flex-direction: column;
   }

    .why-choose-us-item img {
        display: block;
        height: 100px;
        width: auto;
    }

   .icon {
        font-size: 5rem;
    }

    .map {
        height: auto;
        aspect-ratio: 1;
        filter: grayscale(0);
    }

    .logo-mask {
        width: 50%;
    }

    .footer-copyright, .footer-built-by {
        font-size: 0.8rem;
    }


}

@media (max-width: 650px) {
    /* ========== WHOLE PAGE STYLES */
    p, ul, button {
        font-size: 1.2rem;
    }

    section > p {
        text-align: left;
    }

    .why-choose-us p {
        text-align: center;
    }

    .hide-on-mobile {
        display: none;
    }

    .mobile-full-width {
        display: block;
    }

    /* ======================= HERO */
    .hero {
        height: 90vh;
    }

    .hero-button-container {
        text-align: center;
    }

    .accreditations-container {
        padding: 0 5%;
        /* gap: 0; */
        justify-content: space-between;
    }
    
    .accreditations-container img {
        height: 10vw;
        max-height: 10000px;
    }


    /* ==================== BUTTONS */
    button {
        width: 100%;
     
    }
    
    .hero-button-light, .hero-button-dark {
        margin: 0 0 16px 0;
    }

     /* ================= SERVICES */



    .CTA h2 {
        font-size: 2rem;
    }

    .accreditations-section {
        grid-template-columns: repeat(2, 1fr);
        gap: 30px;
    }

    .accreditations-section img {
        height: 12vw;
    }
}  

@media (max-width: 600px) {
    :root {
        --header-height: 50px;
        --header-height-reduced: 50px;
    }


    .hero-accreditations {
        text-align: center;
    }

    .hero-accreditations img {
        height: 80px;
    }

    .hero-text h1 {
        text-align: center;
        text-wrap: auto;
    }

    .hero-text h2 {
        font-size: 5vw;
        text-align: center;
    }

    section, footer {
        padding: 70px 5%;
    }

    header, .hero-text {
        padding: 0 5%;
    }

    .intro p {
        text-align: left;
    }


    .service-card-container {
        grid-template-columns: 1fr;
    }

    .service-card {
        font-size: 6vw;
        aspect-ratio: 2;
    }

    .service-card:nth-child(1), .service-card:nth-child(4) {
        aspect-ratio: 2;
    }
    
    .quote p {
        font-size: 1.4rem;
        text-align: left;
    }

    footer {
        padding-bottom: 0;
    }

    .footer-copyright, .footer-built-by {
        line-height: 1.4em;
    }
}