@import url('nav.css');
@media only screen and (min-width: 541px) and (max-width: 912px) {
    .container {
        max-width: 80%;
    }

    .active {
        padding: 0.5rem 2rem;
    }
    /* Showcase */
    .showcase {height: 70vh; padding: 0; margin: 0;}
    .showcase-content {padding: 0;}
    .showcase-content h1 {
        font-size: 2rem;
        line-height: 1;
    }
    
    .showcase-content p {
        font-size: 0.8rem;
        margin-bottom: 1rem;
    }
    
    .showcase-img img {
        min-height: 30vh;
    }
    
    .showcase .flex-container {
        height: 70vh;
    }
    
    
    /* About Us */
    #about .about-content h1 {
        font-size: 2rem;
    }
    
    #about .flex-container {
        height: 60vh;
    }
    
    #about .about-content p {font-size: 0.9rem; line-height: 1.2;}
    #about .about-img img {min-height: 35vh;}
    #about::before {
        top: 10.5vh;
        right: 5.5vh;
        width: 15rem;
    }
    
    #about::after {
        height: 8rem;
    }
    
    .grid-container {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Teams */
    #team .team-container {flex-direction: column;}
    #team .team-container > * {width: 100%;}

    /* 
########################################
-- ABOUT US --
########################################
 */
    #about-desc .about-desc-content {
        width: 100%;
        margin-bottom: 3rem;
        text-align: justify;
    }
    
    #why-trust-us .flex-container, #why-trust-us .trust-content .trust-card {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .trust-title {
        margin-bottom: 2rem;
        text-align: center;
    }

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

 .sections-heading {
    width: 70ch;
 }
 .sections-heading h2 {font-size: 2rem;}
 .sections-heading h3 {font-size: 1.2rem;}

 .services-card {
    padding: 2rem 0.8rem;
 }
 #services-cards .grid-container {gap: 0.5rem;}

         /* 
########################################
-- Contact Us --
########################################
 */
 #contact .flex-container {
    flex-direction: column;
    gap: 3rem;
 }

 #contact .contact-details {
    padding: 3rem 2rem;
 }
 #contact .contact-details, #contact .contact-form {width: 100%;}

}

@media screen and (max-width: 540px) {
    /* utility */
    .section-heading {
        width: 38ch;
    }
    .section-heading h2 {
        font-size: 2.3rem;
    }

    .grid-container {
        grid-template-columns: 1fr;
    }
    .partner-containter {grid-template-columns: repeat(2, 1fr);}
    /* navbar */
    .container {
        max-width: 90%;
    }

    .navbar .flex-container h2{
        font-size: 1rem;
    }

    .showcase .showcase-content h1 {
        font-size: 2rem;
    }

    #test-section .carousel-wrapper {
        width: 90%;
    }
    /* Showcase */
    .showcase-img {
        display: none;
    }

    .showcase-content {
        width: 100%;
        text-align: center;
    }

    .showcase-content h1, .showcase-content p {animation-name: fadeIn;}

    /* about */
    #about .flex-container {
    padding: 5rem 0;
    display: block;
    height: 100%;
    }
    #about .about-img, #about:before, #about:after {
    display: none;
    }

    #about .flex-container>:first-child {
    width: 100%;
    text-align: center;
    }

    /* Teams */
    #team .team-container {flex-direction: column;}
    #team .team-container > * {width: 100%;}

    #team .team-card {
        grid-template-columns: 1fr;
    }

    #team .team-img {height: 15rem;}

    /* services */
    #services .grid-container {
        display: block;
        position: relative;
    }

    #services {
        margin-bottom: 20rem;
    }

    #services .grid-container .card {
        position: absolute;
        top: 0;
        width: 100%;
        left: 0;
        opacity: 0;
        animation: display 12s infinite;
    }

    
#services .grid-container .card:nth-child(2) {
    animation-delay: 3s;
  }
  #services .grid-container .card:nth-child(3) {
    animation-delay: 6s;
  }
  #services .grid-container .card:nth-child(4) {
    animation-delay: 9s;
  }

    /* footer */
    #partner .partner-container {
        grid-template-columns: 1fr 1fr;
        text-align: center;
    }

    .partner-container img {
        width: 100%;
    }
    #footer .footer-container {
        grid-template-columns: 1fr;
        text-align: center;
    }


    /* 
########################################
-- ABOUT US --
########################################
 */
    #about-heading::after {
        border-top: 3rem solid var(--primary-color);
    }

    .about-desc-img {
        display: none;
    }

    #about-desc .about-desc-content {
        width: 100%;
        text-align: justify;
    }

    #why-trust-us .grid-container {
        grid-template-columns: 1fr;
    }

    #why-trust-us .flex-container {gap: 0;}

    #why-trust-us .flex-container, #why-trust-us .trust-content .trust-card {
        flex-direction: column;
    }

    #why-trust-us .trust-title{margin-bottom: 3rem;}

        /* 
########################################
-- ABOUT US --
########################################
 */

 .sections-heading {
    width: 36ch;
 }

 .sections-heading h2 {font-size: 1.4rem;}
 .sections-heading h3 {font-size: 1rem;}
 .sections-heading p {font-size: 1rem;}

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

 .tab-panels .tab-card-img {width: 100%; height: 10rem;}
 .tab-panels .tab-card-img img {height: 10rem;}

 .tabset-tabs {
    overflow-y: scroll;
    overflow-y: hidden;
    white-space: nowrap;
 }

 .tabset .tabset-tabs > label {
    border-right: solid 1px #ccc;
 }

 .tabset .tabset-tabs > input:checked + label {
    border-top: none;
    border-left: none;
 }

 #services-cards .grid-container {grid-template-columns: 1fr;}
 
          /* 
########################################
-- Contact Us --
########################################
 */

 #contact {
    padding: 2rem 0 3rem;
 }
 #contact .flex-container {
    flex-direction: column;
    gap: 3rem;
 }

 #contact .contact-details {
    padding: 3rem 2rem;
 }
 #contact .contact-details, #contact .contact-form, .contact-form .btn {width: 100%;}


 /* Get a quote */
 .required-services > * {display: inline-block;}
 .required-services, .services-desc {width: 100%;}
 .form-container .flex-container {
    flex-direction: column;
 }

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