/*Extra Small devices (phones, 350px to 100)*/
@media only screen and (max-width: 350px) and (min-width: 100px){
    html,
    body { font-size: 12px; }
    p { max-width: 100%; }
    h2 { font-size: 2em; }
    
    /*HEADER*/
    
    section { padding: 50px 20px; }
    .cta-button { font-size: 0.9em; }
    nav { padding: 10px; }
    .sticky { padding: 10px; }
    .nav { display: none; }
    nav .logo { flex: 1; max-width: 100%; height: 45px; }
    .sticky .logo { flex: 1; }
    .mobile_nav_icon { display: block; }
    .top_nav { display: none; }
    nav .cta-button { display: none; }
    
    .hero_content {
        align-items: center;
        padding: 30px 10px 0 10px;
        text-align: center;
    }
    
    .hero_content h2 { max-width: 100%; font-size: 1.8em; }
    .hero_content h4 { font-size: 0.8em; }
    
    .hero_content p {
        font-size: 0.9em;
        max-width: 80%;
    }
    
    .slider_nav { display: none; }
    
    /* ABOUT */
    
    .about-us-section { flex-direction: column; }
    .about-us-img { max-height: 400px;}
    
    .about-us-img img {
        -o-object-fit: cover;
           object-fit: cover;
        border-radius: 10px;
        width: 100%;
        height: 100%;
        transition: 0.3s ease;
    }
    
    /* SECTION */
    
    .services-section { background: none; }
    
    .services-header,
    .services-header p { max-width: 100%; word-break: break-all; }
    .services-body { max-width: 100%; }
    .service-content { padding: 20px 15px; }
    .service { flex: 100%; }
    .service-icon { top: 15rem; }
    
    /* Why-Choose-Us */
    
    .why-choose-us::before { background: none; }
    .why-choose-us-header { align-items: flex-start; justify-content: center; max-width: 100%; }
    .why-choose-us-header h2 { max-width: 100%;  word-break: break-all; text-align: justify;}
    
    .why-choose-us-header p {
        max-width: 95%;
        word-break: keep-all;
    }
    
    .why-us-icon { margin-top: 6px; gap: 1.5em; }
    .why { gap: 0.4em; }
    
    .why-body {
        flex-direction: column;
        max-width: 100%;
    }
    
    .why-content { padding: 20px 15px; }
    .why-icon { top: 15rem; }
    
    .why-icon img {
        width: 100%;
        height: 100%;
        transition: 0.5s linear;
    }
    
    .features-container {
        flex-direction: column;
        align-items: flex-start;
        word-break: break-all;
    }
    
    /* CTA */
    
    .cta-content { max-width: 100%; }
    .cta-content h2 { font-size: 2em; }
    .cta-content p {
        font-size: 0.8em;
        max-width: 100%;
        text-align: center;
    }
    
    /* WORKING PROCESS */
    
    .working-process-header h2 { max-width: 100%; }
    .working-process p { max-width: 100%; }
    
    /* TESTIMONIALS */
    
    .testimonials-header h4 { text-align: center; max-width: 100%; }
    .testimonials-header h2 { max-width: 100%; }
    .testimonials-header p { max-width: 100%; }
    .client-details h3 { font-size: 1.2em; }
    
    .testimonial-card {
        flex-direction: column;
        text-align: center;
    }
    
    /* TEAM MEMBERS */
    
    .team-header h4 { text-align: center; max-width: 100%; }
    .team-header h2 { max-width: 100%; }
    .team-header p { max-width: 100%; }
    .team-content { padding: 20px 15px; }
    .team-body-content { flex: 100%; }
    
    .team-content h3 {
        color: #0b3d2e;
        font-size: 1.3em;
        font-weight: 700;
        margin-bottom: 5px;
    }
    
    /* FAQ */
    .faq-section { flex-direction: column; }
    
    /* CONTACT */
    
    .contact-section {
        flex-direction: column;
        position: relative;
        background: none;
        background-size: 55%;
        display: flex;
        justify-content: center;
        gap: 2em;
        color: #585858;
        transition: 0.3s ease;
    }
    
    .contact-section::before { display: none; }
    .contact-header { order: 1; }
    .contact-body { order: 2; }
    .contact-details { flex-direction: column; gap: 2em; }
    .contact-infos { flex-direction: column; }
    .contact-content h3 { font-size: 1.3em; }
    .contact-content p { font-size: 0.9em; }
    .contact-content a:link,
    .contact-content a:visited { font-size: 0.9em; }
    .contact-socials { flex-direction: row; gap: 1em; }
    .contact-socials ion-icon { font-size: 2em; }
    input,
    textarea { padding: 15px; margin-bottom: 10px; }
    
    /* SUBSCRIBE */
    
    .subscribe { 
        flex-direction: column;
        padding: 40px; 
    }
    
    .subscribe-logo {
        width: 150px;
        height: auto;
    }
    
    .subscribe-nav-items {
        flex-direction: row;
        flex-wrap: wrap;
        max-width: 80%;
        gap: 1em;
        align-items: center;
        justify-content: center;
        margin-bottom: 30px;
    }

    .subscribe-container form {
        flex-direction: column;
        gap: 0;
      }
    
    /* FOOTER */
    
    footer {
        flex-direction: column;
        padding: 30px;
        align-items: center;
        justify-content: center;
        text-align: center;
    }   
    
    footer ul { flex-direction: column; }
    footer li a:link,
    footer li a:visited { margin-left: 0; }
    
}


/*Extra Small devices (phones, 350px to 600)*/
@media only screen and (max-width: 600px) and (min-width: 350px){
    html,
    body { font-size: 16px; }
    
    p { max-width: 100%; }
    
    /*HEADER*/
    
    section { padding: 80px 30px; }
    nav { padding: 10px 20px; }
    .nav { display: none; }
    nav .logo { flex: 1; }
    .sticky .logo { flex: 1; }
    .mobile_nav_icon { display: block; }
    
    .top_nav { display: none; }
    nav .cta-button { flex-basis: 15%; text-align: center; padding: 5px 15px; }
    
    .hero_content {
        align-items: center;
        padding: 100px 30px 0 30px;
        text-align: center;
    }
    
    .hero_content h2 { max-width: 100%; }
    
    .hero_content p {
        font-size: 1em;
        max-width: 80%;
    }
    
    .slider_nav { display: none; }
    
    /* ABOUT */
    
    .about-us-section { flex-direction: column; }
    .about-us-img { max-height: 400px;}
    
    .about-us-img img {
        -o-object-fit: cover;
           object-fit: cover;
        border-radius: 10px;
        width: 100%;
        height: 100%;
        transition: 0.3s ease;
    }
    
    /* SECTION */
    
    .services-section {
        background: url('img/logistics-services.png') no-repeat;
        background-position: center;
        background-size: 200% 100%;
    }
    
    .services-header,
    .services-header p { max-width: 100%; }
    .services-body { max-width: 85%; }
    .service-content { padding: 30px 25px; }
    .service { flex: 100%; }
    .service-icon { top: 12rem; }
    
    /* Why-Choose-Us */
    
    .why-choose-us::before {
        background: url('img/logistics-services.png') no-repeat;
        background-size: 200% 100%;
        background-position: 45%;
    }
    
    .why-choose-us-header { max-width: 100%; }
    
    .why-choose-us-header h2 { max-width: 100%;  word-break: break-all;}
    
    .why-choose-us-header p {
        max-width: 95%;
        word-break: keep-all;
    }
    
    .why-body {
        flex-direction: column;
        max-width: 85%;
    }
    
    .why-content { padding: 30px 25px; }
    .why-icon { top: 12rem; }
    
    .why-icon img {
        width: 100%;
        height: 100%;
        transition: 0.5s linear;
    }
    
    .features-container {
        flex-direction: column;
        align-items: flex-start;
    }
    
    /* CTA */
    
    .cta-content { max-width: 100%; }
    .cta-content h2 { font-size: 2.1em; }
    .cta-content p {
        font-size: 0.9em;
        max-width: 90%;
        text-align: center;
    }
    
    /* WORKING PROCESS */
    
    .working-process-header h2 { max-width: 95%; }
    .working-process-header p { max-width: 80%; }
    
    /* TESTIMONIALS */
    
    .testimonials-header h4 { text-align: center; max-width: 70%; }
    .testimonials-header h2 { max-width: 100%; }
    .testimonials-header p { max-width: 85%; }
    .client-details h3 { font-size: 1.2em; }
    
    /* TEAM MEMBERS */
    
    .team-header h4 { text-align: center; max-width: 70%; }
    .team-header h2 { max-width: 100%; }
    .team-header p { max-width: 85%; }
    .team-content { padding: 30px 25px; }
    .team-body-content { flex: 1 0 100%; }
    
    .team-content h3 {
        color: #0b3d2e;
        font-size: 1.3em;
        font-weight: 700;
        margin-bottom: 5px;
    }
    
    /* FAQ */
    .faq-section { flex-direction: column; }
    
    /* CONTACT */
    
    .contact-section {
        flex-direction: column;
        position: relative;
        background: url('img/logi-cart.png') no-repeat left 15.5%;
        background-size: 55%;
        display: flex;
        justify-content: center;
        gap: 2em;
        color: #585858;
        transition: 0.3s ease;
    }
    
    .contact-section::before { bottom: -3%; }
    .contact-header { order: 1; }
    .contact-body { order: 2; }
    .contact-infos { flex-direction: column; }
    .contact-content h3 { font-size: 1.3em; }
    .contact-content p { font-size: 1em; }
    .contact-content a:link,
    .contact-content a:visited { font-size: 1em; }
    .contact-socials { gap: 2em; }
    .contact-socials ion-icon { font-size: 3em; }
    input,
    textarea { padding: 15px; }
    
    /* SUBSCRIBE */
    
    .subscribe { 
        flex-direction: column;
        padding: 40px; 
    }
    
    .subscribe-logo {
        width: 150px;
        height: auto;
    }
    
    .subscribe-nav-items {
        flex-direction: row;
        flex-wrap: wrap;
        max-width: 80%;
        gap: 1em;
        align-items: center;
        justify-content: center;
        margin-bottom: 30px;
    }
    
    /* FOOTER */
    
    footer {
        flex-direction: column;
        padding: 30px;
        align-items: center;
        justify-content: center;
    }   
}


/*Small devices (portrait tablets and large phones, 600 to 768)*/
@media only screen and (max-width: 768px) and (min-width: 600px) {
    html,
    body { font-size: 18px; }
    
    /*HEADER*/
    
    section { padding: 80px 30px; }
    nav { padding: 10px 20px; }
    .nav { display: none; }
    nav .logo { flex: 1; }
    .sticky .logo { flex: 1; }
    .mobile_nav_icon { display: block; }
    .top_nav { display: none; }
    nav .cta-button { flex-basis: 15%; text-align: center; padding: 5px 15px; }
    
    .hero_content {
        align-items: center;
        padding: 100px 30px 0 30px;
        text-align: center;
    }
    
    .hero_content h2 { max-width: 100%; }
    
    .hero_content p {
        font-size: 1em;
        max-width: 80%;
    }
    
    .slider_nav { display: none; }
    
    /* ABOUT */
    
    .about-us-section { flex-direction: column; }
    .about-us-img { max-height: 400px;}
    
    .about-us-img img {
        -o-object-fit: cover;
           object-fit: cover;
        border-radius: 10px;
        width: 100%;
        height: 100%;
        transition: 0.3s ease;
    }
    
    /* SECTION */
    
    .services-section {
        background: url('img/logistics-services.png') no-repeat;
        background-position: center;
        background-size: 200% 100%;
    }
    
    .services-header,
    .services-header p { max-width: 100%; }
    .services-body { max-width: 85%; }
    .service-content { padding: 30px 25px; }
    .service { flex: 100%; }
    .service-icon { top: 10.5rem; }
    
    /* Why-Choose-Us */
    
    .why-choose-us::before {
        background: url('img/logistics-services.png') no-repeat;
        background-size: 200% 100%;
        background-position: 45%;
    }
    
    .why-choose-us-header { max-width: 100%; }
    
    .why-choose-us-header h2 { max-width: 100%;  word-break: break-all;}
    
    .why-choose-us-header p {
        max-width: 95%;
        word-break: keep-all;
    }
    
    .why-body {
        flex-direction: column;
        max-width: 85%;
    }
    
    .why-content { padding: 30px 25px; }
    .why-icon { top: 10.5rem; }
    
    .why-icon img {
        width: 100%;
        height: 100%;
        transition: 0.5s linear;
    }
    
    .features-container {
        flex-direction: column;
        align-items: flex-start;
    }
    
    /* CTA */
    
    .cta-content { max-width: 100%; }
    .cta-content h2 { font-size: 2.1em; }
    .cta-content p {
        font-size: 0.9em;
        max-width: 90%;
        text-align: center;
    }
    
    /* WORKING PROCESS */
    
    .working-process-header h2 { max-width: 95%; }
    .working-process-header p { max-width: 80%; }
    
    /* TESTIMONIALS */
    
    .testimonials-header h4 { text-align: center; max-width: 70%; }
    .testimonials-header h2 { max-width: 100%; }
    .testimonials-header p { max-width: 85%; }
    .client-details h3 { font-size: 1.2em; }
    
    /* TEAM MEMBERS */
    
    .team-header h4 { text-align: center; max-width: 70%; }
    .team-header h2 { max-width: 100%; }
    .team-header p { max-width: 85%; }
    .team-content { padding: 30px 25px; }
    .team-body-content { flex: 1 1 45%; }
    
    .team-content h3 {
        color: #0b3d2e;
        font-size: 1.3em;
        font-weight: 700;
        margin-bottom: 5px;
    }
    
    /* FAQ */
    .faq-section { flex-direction: column; }
    
    /* CONTACT */
    
    .contact-section {
        flex-direction: column;
        position: relative;
        background: url('img/logi-cart.png') no-repeat left 15%;
        background-size: 55%;
        display: flex;
        justify-content: center;
        gap: 2em;
        color: #585858;
        transition: 0.3s ease;
    }
    
    .contact-section::before { bottom: -3%; }
    .contact-header { order: 1; }
    .contact-body { order: 2; }
    .contact-infos { flex-direction: column; }
    .contact-content h3 { font-size: 1.3em; }
    .contact-content p { font-size: 1em; }
    .contact-content a:link,
    .contact-content a:visited { font-size: 1em; }
    .contact-socials { gap: 2em; }
    .contact-socials ion-icon { font-size: 3em; }
    input,
    textarea { padding: 15px; }
    
    /* SUBSCRIBE */
    
    .subscribe { 
        flex-direction: column;
        padding: 40px; 
    }
    
    .subscribe-logo {
        width: 150px;
        height: auto;
    }
    
    .subscribe-nav-items {
        flex-direction: row;
        flex-wrap: wrap;
        max-width: 80%;
        gap: 1em;
        align-items: center;
        justify-content: center;
        margin-bottom: 30px;
    }
    
    /* FOOTER */
    
    footer {
        flex-direction: column;
        padding: 30px;
        align-items: center;
        justify-content: center;
    }   
    
}


/*Medium devices (landscapen tablets, 768 to 992)*/
@media only screen and (max-width: 992px) and (min-width: 768px) {
    
    html,
    body { font-size: 16px; }
    
    /*HEADER*/
    
    section { padding: 80px 30px; }
    nav { padding: 10px 20px; }
    .nav { display: none; }
    nav .logo { flex: 1; }
    .sticky .logo { flex: 1; }
    .mobile_nav_icon { display: block; }
    
    .top_nav { padding: 10px 30px; }
    .top_nav_contents p { margin-right: 30px; }
    .top_nav p { font-size: 0.9em; }
    nav .cta-button { flex-basis: 30%; text-align: center; padding: 15px;}
    
    /* SERVICE */
    
    .services-section {
        background: url('img/logistics-services.png') no-repeat;
        background-position: center;
        background-size: 200% 100%;
    }
    .services-body { max-width: 85%; }
    .service-icon { top: 12rem; }
    
    /* Why-Choose-Us */
    
    .why-choose-us::before {
        background: url('img/logistics-services.png') no-repeat;
        background-size: 200% 100%;
        background-position: 45%;
    }
    
    .why-body { max-width: 85%; }
    .why-icon { top: 12rem; } 
    .team-body-content { flex: 1 0 50%; }

    .team-body-content { flex: 1 1 21%; }
    
}


/*Large devices (laptops/destops, 992 to 1200px)*/
@media only screen and (max-width: 1200px) and (min-width: 992px){
    html,
    body { font-size: 18px; }
    
    /* SERVICE */
    
    .services-body { max-width: 80%; }
    .service-icon { top: 11rem; }
    
    /* Why-Choose-Us */
    
    .why-body { max-width: 80%; }
    .why-icon { top: 11rem; } 
    .team-body-content { flex: 1 0 25%; }

    .team-body-content { flex: 1 1 21%; }
    
}


/*Extra Large devices (large laptops/destops, 1200px and up)*/
@media only screen and (min-width: 1200px) {
    html,
    body { width: 100%;}
}


@media only screen and (min-height: 1200px) {
    header { height: 50vh; }
}