/* Smartphones (portrait and landscape) ----------- */
@media only screen and (max-width: 480px) {
    
    html, body {
        overflow-x: hidden;
    }

    #menuToggle {
        top: -42px;
    }
    
    .black-ribbon {
        height: 60px;
    }
    
    .schedule {
        font-size: 10px;
        padding-right: 12px;
    }

    .working-hours {
        font-size: 3.3vw;
        margin: 0 0 0 20vw;
        padding-right: 12px;
    }

    .svg-bg {
        margin: auto;
        top: 0;
        width: 100%;
        margin-top: 260px;
    }

    .landing-logo {
        width: 80%;
        margin: auto;
        margin-bottom: 26.5vh;
        display: block;
    }

    h1 {
        font-size: 4vh;
        line-height: 4.5vh;
        text-align: center;
    }

    h2 {
        font-size: 2.8vh;
        line-height: 3.2vh;
        text-align: center;
    }

    h3 {
        font-size: 5.5vh;
        line-height: 6.5vh;
        text-align: center;
    }

    .down-icon {
        margin: 23px auto 10px;
    }

    .icon-svg {
        width: 12vw;
        padding-bottom: 9px;
    }

    .whatsapp-fixed {
        bottom:20px;
        right:20px;
    }

    .section-titles {
        font-size: 8.5vw;
    }

    .st1 {
        margin-top: 90px;
    }

    .who-we-are-content {
        display: block;
        margin-top: 72px;
    }

    .who-we-are-png {
        width: 90%;
        margin: auto;
        display: block;
    }

    .text1 {
        line-height: 32px;
        font-size: 4.5vw;
        width: 70vw;
        display: block;
        margin: 60px auto 40px;
        text-align: center;
    }

    .st2 {
        margin-top: 55px;
    }

    .our-services {
        height: 1665px;
    }

    .services {
        grid-template-columns: repeat(2, 1fr);
        max-width: 390px;
        margin-top: 34px;
    }

    .commitment-title {
        font-size: 10.7vw;
        line-height: 50px;
        text-align: center;
    }

    .commitment-content {
        margin-top: -73vh;
        height: 99vh;
    }

    .commitment-bg {
        height: 68vh;
    }

    .scooter-png {
        height: 47vh;
        display: flex;
        margin-top: -51vh;
        margin-left: -11vw;
    }

    .text2 {
        line-height: 22px;
        font-size: 4.5vw;
        width: 78vw;
        display: flex;
        text-align: center;
        margin: 42vh auto 3vh;
    }

    .contact-us-form {
        max-width: 400px;
        display: block;
        margin: 4vh auto;
    }

    .form-input {
        height: 36px;
        width: 75vw;
        display: block;
        margin: 0 auto 10px;
    }

    .form-submit {
        border-radius: 50px;
        height: 38px;
        width: 40vw;
        display: block;
        margin: 20px auto;
    }

    .contact-us-button {
        font-size: 4.5vw;
        width: 80vw;
        height: 39px;
        padding: 11px 6px;
    }
    
    .alert-success{
        font-size: 14px;
        min-width: 50px;
        padding: 15px 10px;
        width: 90vw;
        top: 70px;
    }

    .alert-danger{
        font-size: 14px;
        min-width: 50px;
        padding: 10px 10px;
        width: 90vw;
        top: 70px;
    }

    .whatsapp-contact {
        margin-top: -19vh;
    }

    .st3 {
        margin-top: 0px;
        font-size: 8vw;
    }

    .text3 {
        line-height: 20px;
        font-size: 4vw;
        width: 74vw;
        margin-top: 16px;
    }

    .general-plan {
        margin-top: 25px;
    }

    .office-plans {
        max-width: 350px;
        width: 400px;
        height: 794px;
    }

    .options-grid {
        grid-template-columns: repeat(1, 1fr);
        grid-auto-rows: 384px;
    }

    .fixed-plans {
        max-width: 350px;
        width: 400px;
        height: 1185px;
    }

    .fixed-options-grid {
        grid-template-columns: repeat(1, 1fr);
        grid-auto-rows: 384px;
    }

    .outside-border2 {
        width: 250px;
    }

    .text4 {
        line-height: 18px;
        font-size: 4vw;
        width: 84vw;
    }

    .truck-banner {
        height: 50vh;
    }
    
    .truck-banner-content {
        max-width: 420px;
    }

    .truck-title {
        font-size: 10vw;
        text-align: center;
        line-height: 48px;
    }

    .truck-img {
        width: 95vw;
        display: block;
        margin: -3vh auto;
        float: none;
    }

    .st4 {
        margin-top: 60px;
    }

    .delivery-area-map {
        width: 95vw;
        margin-top: 26px;
    }

    .locations {
        grid-template-columns: repeat(2, 1fr);
        grid-auto-rows: 24px;
        margin-top: 40px;
        justify-items: center;
    }

    .location {
        font-size: 3.5vw;
        width: 45vw;
    }

    .municipal-affairs {
        padding: 0 0 50px 0;
    }
    
    .st5 {
        margin: 89px 3vw 60px;
        font-size: 8.4vw;
    }

    .municipal-affairs-img1 {
        display: none;
    }
    
    .municipal-affairs-img2 {
        display: block;
    }

    .st6 {
        margin: 50px 0 0;
    }

    .benefits {
        padding: 0 0 0px 0;
    }

    .benefit {
        width: 85vw;
    }

    .benefits-list {
        grid-template-columns: repeat(1, 1fr);
        margin-top: 37px;
    }

    .benefits-list1 {
        grid-template-columns: repeat(1, 1fr);
    }

    .benefits-list2 {
        grid-template-columns: repeat(1, 1fr);
    }

    .contact-us-bg {
        width: 95%;
        margin: 0 auto;
    }

    .form-input2 {
        width: 80vw;
    }

    .form-input3 {
        width: 80vw;
    }

    .form-submit2 {
        margin: 31px auto;
    }

    .footer {
        display: block;
        height: 650px;
    }

    .footer-grid1 {
        max-width: 418px;
        display: block;
        margin: auto;
    }

    .footer-logo {
        width: 80vw;
        margin: auto;
        display: block;
    }

    .google-map{
        display: block;
        margin: 40px auto;
    }

    .footer-title {
        text-align: center;
        font-size: 4.3vw;
        line-height: 5vw;
    }

    .footer-content {
        text-align: center;
        font-size: 3.4vw;
        line-height: 4vw;
    }

    .footer-content1 {
        text-align: center;
        font-size: 3.4vw;
        margin-bottom: 4vw;
        line-height: 4vw;
    }

    .insta-link {
        font-size: 6vw;
        text-align: center;
    }
}





/* Smartphones (landscape) and tablets (portrait) ----------- */
@media only screen and (min-width: 481px) and (max-width: 768px) {
    
    html, body {
        overflow-x: hidden;
    }

    #menuToggle {
        top: -37px;
    }
    
    .svg-bg {
        margin: auto;
        top: 0;
        width: 100%;
        margin-top: 260px;
    }

    .landing-logo {
        width: 80%;
        margin: auto;
        margin-bottom: 26vh;
        display: block;
    }

    h1 {
        font-size: 6vh;
        line-height: 6.5vh;
        text-align: center;
    }

    h2 {
        font-size: 3.8vh;
        line-height: 4.2vh;
        text-align: center;
    }

    h3 {
        font-size: 6.5vh;
        line-height: 7.5vh;
        text-align: center;
    }

    .down-icon {
        margin: 23px auto 10px;
    }

    .icon-svg {
        width: 12vw;
        padding-bottom: 9px;
    }

    .whatsapp-fixed {
        bottom:20px;
        right:20px;
    }

    .section-titles {
        font-size: 8.5vw;
    }

    .st1 {
        margin-top: 90px;
    }

    .who-we-are-content {
        display: block;
        margin-top: 72px;
    }

    .who-we-are-png {
        width: 90%;
        margin: auto;
        display: block;
    }

    .text1 {
        line-height: 5.5vw;
        font-size: 4.5vw;
        width: 70vw;
        display: block;
        margin: 60px auto 40px;
        text-align: center;
    }

    .st2 {
        margin-top: 55px;
    }

    .our-services {
        height: 1665px;
    }

    .services {
        grid-template-columns: repeat(2, 1fr);
        max-width: 390px;
        margin-top: 34px;
    }

    .commitment-title {
        font-size: 10.7vw;
        line-height: 11vw;
        text-align: center;
    }

    .commitment-content {
        margin-top: -93vh;
        height: 118vh;
    }

    .commitment-bg {
        height: 90vh;
    }

    .scooter-png {
        height: 65vh;
        display: flex;
        margin-top: -67vh;
        margin-left: 0vw;
    }

    .text2 {
        line-height: 5vw;
        font-size: 4.5vw;
        width: 78vw;
        display: flex;
        text-align: center;
        margin: 57vh auto 3vh;
    }

    .contact-us-form {
        max-width: 600px;
        display: block;
        margin: 4vh auto;
    }

    .form-input {
        height: 36px;
        width: 75vw;
        display: block;
        margin: 0 auto 10px;
    }

    .form-submit {
        border-radius: 50px;
        height: 38px;
        width: 40vw;
        display: block;
        margin: 20px auto;
    }

    .contact-us-button {
        font-size: 18px;
        width: 375px;
        height: 39px;
        padding: 11px 6px;
    }

    .alert-success{
        font-size: 14px;
        min-width: 50px;
        padding: 15px 10px;
        width: 90vw;
        top: 70px;
    }

    .alert-danger{
        font-size: 14px;
        min-width: 50px;
        padding: 10px 10px;
        width: 90vw;
        top: 70px;
    }

    .whatsapp-contact {
        margin-top: -19vh;
    }

    .st3 {
        margin-top: 0px;
        font-size: 8vw;
    }

    .text3 {
        line-height: 4.5vw;
        font-size: 3vw;
        width: 74vw;
        margin-top: 16px;
    }

    .general-plan {
        margin-top: 25px;
    }

    .office-plans {
        max-width: 350px;
        width: 400px;
        height: 794px;
    }

    .options-grid {
        grid-template-columns: repeat(1, 1fr);
        grid-auto-rows: 384px;
    }

    .fixed-plans {
        max-width: 350px;
        width: 400px;
        height: 1185px;
    }

    .fixed-options-grid {
        grid-template-columns: repeat(1, 1fr);
        grid-auto-rows: 384px;
    }

    .outside-border2 {
        width: 250px;
    }

    .text4 {
        line-height: 4vw;
        font-size: 3vw;
        width: 84vw;
    }

    .truck-banner {
        height: 70vh;
    }
    
    .truck-banner-content {
        max-width: 700px;
    }

    .truck-title {
        font-size: 9vw;
        margin: auto;
        text-align: center;
        line-height: 11vw;
    }

    .truck-img {
        width: 95vw;
        display: block;
        margin: -3vh auto;
        float: none;
    }

    .st4 {
        margin-top: 60px;
    }

    .delivery-area-map {
        width: 95vw;
        margin-top: 26px;
    }

    .locations {
        grid-template-columns: repeat(2, 1fr);
        grid-auto-rows: 4vh;
        margin-top: 40px;
        justify-items: center;
    }

    .location {
        font-size: 3.2vw;
        width: 45vw;
    }

    .municipal-affairs {
        padding: 0 0 50px 0;
    }
    
    .st5 {
        margin: 89px 3vw 60px;
        font-size: 8.4vw;
    }

    .municipal-affairs-img1 {
        display: none;
    }
    
    .municipal-affairs-img2 {
        display: block;
    }

    .st6 {
        margin: 50px 0 0;
    }

    .benefits {
        padding: 0 0 0px 0;
    }

    .benefit {
        width: 85vw;
    }

    .benefit-text {
        font-size: 3.35vw;
    }

    .benefits-list {
        grid-template-columns: repeat(1, 1fr);
        margin-top: 37px;
    }

    .benefits-list1 {
        grid-template-columns: repeat(1, 1fr);
    }

    .benefits-list2 {
        grid-template-columns: repeat(1, 1fr);
    }

    .contact-us-bg {
        width: 95%;
        margin: 0 auto;
    }

    .contact-us-form2 {
        max-width: 667px;
    }

    .form-input2 {
        width: 80vw;
    }

    .form-input3 {
        width: 80vw;
    }

    .form-submit2 {
        margin: 31px auto;
    }

    .footer {
        display: block;
        height: 950px;
    }

    .footer-grid1 {
        max-width: 700px;
        display: block;
        margin: auto;
    }

    .footer-logo {
        width: 80vw;
        margin: auto;
        display: block;
    }

    .google-map{
        display: block;
        margin: 40px auto;
    }

    .footer-title {
        text-align: center;
        font-size: 4.3vw;
        line-height: 5vw;
    }

    .footer-content {
        text-align: center;
        font-size: 3.4vw;
        line-height: 4vw;
    }

    .footer-content1 {
        text-align: center;
        font-size: 3.4vw;
        margin-bottom: 4vw;
    }

    .insta-link {
        font-size: 4vw;
    }
}





/* Tablets (landscape) and SM Desktops ----------- */
@media only screen and (min-width: 769px) and (max-width: 992px) {
    
    html, body {
        overflow: visible;
    }

    #menuToggle {
        top: -38px;
    }
    
    .svg-bg {
        margin-top: 75px;
    }

    .text1 {
        width: 33vw;
    }

    .time-commitment {
        max-width: 800px;
    }

    .commitment-bg {
        height: 540px;
    }

    .commitment-content {
        margin-top: -553px;
        height: 538px;
    }

    .commitment-title {
        font-size: 63px;
        line-height: 67px;
    }

    .scooter-png {
        height: 100%;
        margin-top: -280px;
        margin-left: 235px;
    }

    .text2 {
        line-height: 30px;
        font-size: 26px;
    }

    .contact-us-form {
        margin-top: -280px;
    }

    .form-input {
        width: 350px;
    }

    .text3 {
        width: 70vw;
    }
    
    .text4 {
        width: 65vw;
    }

    .truck-banner {
        height: 506px;
    }

    .truck-banner-content {
        max-width: 800px;
    }

    .truck-title {
        font-size: 70px;
        max-width: 622px;
        line-height: 80px;
    }

    .truck-img {
        margin-top: -186px;
    }

    .delivery-area-map {
        width: 843px;
    }

    .footer {
        max-width: 890px;
    }

    .footer-title {
        font-size: 2.8vw;
        line-height: 3.2vw;
    }
    
    .footer-content {
        font-size: 2.2vw;
        line-height: 2.6vw;
    }
    
    .footer-content1 {
        font-size: 2.2vw;
        line-height: 2.6vw;
    }

    .insta-link {
        font-size: 3.5vw;
    }
}





/* M Desktops ----------- */
@media only screen and (min-width: 993px) and (max-width: 1200px) {

    html, body {
        overflow-x: hidden;
    }
    
    #menuToggle {
        top: -37px;
    }
    
    .landing-content {
        margin-top: 3vh;
    }
    
    .svg-bg {
        margin-top: 150px;
    }
    
    h1 {
        font-size: 5vh;
        line-height: 5.3vh;
    }

    h2 {
        font-size: 3.25vh;
        line-height: 3.7vh;
    }

    h3 {
        font-size: 6.6vh;
        line-height: 7vh;
    }

    .st1 {
        margin-top: 115px;
    }

    .text1 {
        width: 28vw;
    }
    
    .text2 {
        width: 35vw;
    }
    
    .text4 {
        width: 55vw;
    }

    .truck-banner-content {
        max-width: 1100px;
    }

    .truck-img {
        margin-top: -245px;
    }

    .footer {
        max-width: 1100px;
    }

    .footer-title {
        font-size: 2.2vw;
        line-height: 2.8vw;
    }
    
    .footer-content {
        font-size: 1.6vw;
        line-height: 2vw;
    }
    
    .footer-content1 {
        font-size: 1.6vw;
        line-height: 2vw;
    }

    .insta-link {
        font-size: 3vw;
    }
}





/* L Desktops ----------- */
@media only screen and (min-width: 1201px) and (max-width: 1440px){

    html, body {
        overflow-x: hidden;
    }
    
    .svg-bg {
        margin-top: 124px;
    }
    
    h1 {
        font-size: 5.5vh;
        line-height: 6vh;
    }

    h2 {
        font-size: 3.5vh;
        line-height: 4vh;
    }

    h3 {
        font-size: 7vh;
        line-height: 7.8vh;
    }
    
    .whatsapp-contact {
        margin-top: -140px;
    }

    .text3 {
        width: 48vw;
    }
    
    .text4 {
        width: 48vw;
    }

    .footer {
        max-width: 1250px;
    }

    .footer-title {
        font-size: 1.8vw;
        line-height: 2.5vw;
    }
    
    .footer-content {
        font-size: 1.2vw;
        line-height: 1.6vw;
    }
    
    .footer-content1 {
        font-size: 1.2vw;
        line-height: 1.6vw;
    }

    .insta-link {
        font-size: 2.5vw;
    }
}