﻿/* ==========================================================
   RADIO TAXI AL MINUTO
   RESPONSIVE.CSS
   Bootstrap 5
   Dreamweaver 2021
   ========================================================== */


/* ==========================================================
   DESKTOP XL
   1400px+
   ========================================================== */

@media (min-width: 1400px) {

    .container {

        max-width: 1320px;

    }

    .carousel-caption h1 {

        font-size: 4.5rem;

    }

    .carousel-caption p {

        font-size: 1.4rem;

    }

}


/* ==========================================================
   DESKTOP
   1200px - 1399px
   ========================================================== */

@media (max-width: 1399.98px) {

    h1 {

        font-size: 3.2rem;

    }

    .carousel-caption h1 {

        font-size: 3.8rem;

    }

}


/* ==========================================================
   NOTEBOOK
   992px - 1199px
   ========================================================== */

@media (max-width: 1199.98px) {

    .section-padding {

        padding: 85px 0;

    }

    h1 {

        font-size: 3rem;

    }

    h2 {

        font-size: 2.1rem;

    }

    .carousel-caption h1 {

        font-size: 3.2rem;

    }

    .company-box {

        height: 360px;

    }

    .video-box {

        height: 450px;

    }

    .coverage-box {

        height: 420px;

    }

}


/* ==========================================================
   TABLET
   768px - 991px
   ========================================================== */

@media (max-width: 991.98px) {

    .section-padding {

        padding: 75px 0;

    }

    .custom-navbar {

        background: var(--verde-footer-dark);

        padding: 15px 0;

    }

.navbar-collapse {

    margin-top: 15px;

    padding: 20px;

    border-radius: 12px;

    background: var(--verde-footer-dark);

    border: 1px solid rgba(255,255,255,.08);

}

    .navbar-nav {

        align-items: flex-start !important;

    }

    .nav-link {

        margin: 8px 0;

    }

    .navbar .btn-whatsapp,
    .navbar .btn-taxi {

        width: 100%;

        margin-top: 10px;

        text-align: center;

    }

    .carousel-caption {

        width: 90%;

        left: 50%;

        transform:
            translateX(-50%)
            translateY(50%);

    }

    .carousel-caption h1 {

        font-size: 2.8rem;

    }

    .carousel-caption p {

        font-size: 1.1rem;

    }

    .hero-buttons {

        justify-content: center;

    }

    .company-box {

        margin-bottom: 35px;

    }

    #empresas-home .col-lg-6 {

        text-align: center;

    }

    .testimonial-card {

        padding: 45px;

    }

    .cta-section h2 {

        font-size: 2.6rem;

    }

    .cta-section h4 {

        font-size: 1.4rem;

    }

    .social-icons {

        justify-content: center;

    }

}


/* ==========================================================
   MOVIL GRANDE
   576px - 767px
   ========================================================== */

@media (max-width: 767.98px) {

    .section-padding {

        padding: 65px 0;

    }

    h1 {

        font-size: 2.5rem;

    }

    h2 {

        font-size: 1.9rem;

    }

    h3 {

        font-size: 1.5rem;

    }

    .section-title {

        margin-bottom: 40px;

    }

    #hero .carousel-item {

        min-height: 650px;

    }

    .carousel-caption {

        bottom: 45%;

    }

    .carousel-caption h1 {

        font-size: 2.4rem;

    }

    .carousel-caption p {

        font-size: 1rem;

    }

    .hero-buttons {

        flex-direction: column;

        align-items: center;

    }

    .hero-buttons .btn {

        width: 100%;

        max-width: 320px;

    }

    .service-card {

        padding: 30px 20px;

    }

    .step-box {

        padding: 30px 20px;

    }

    .step-box span {

        width: 60px;

        height: 60px;

        font-size: 1.5rem;

    }

    .advantage-card {

        min-height: auto;

        padding: 22px;

    }

    .video-box {

        height: 320px;

    }

    .coverage-box {

        height: 320px;

    }

    .fleet-box {

        height: 220px;

    }

    .testimonial-card {

        padding: 35px 25px;

    }

    .testimonial-card p {

        font-size: 1rem;

    }

    .cta-section {

        padding: 80px 0;

    }

    .cta-section h2 {

        font-size: 2.2rem;

    }

    .cta-buttons {

        flex-direction: column;

        align-items: center;

    }

    .cta-buttons .btn {

        width: 100%;

        max-width: 320px;

    }

    .resource-category h3 {

        font-size: 1.3rem;

    }

    .footer-area {

        text-align: center;

    }

    .footer-title::after {

        margin-left: auto;
        margin-right: auto;

    }

}


/* ==========================================================
   MOVIL PEQUEÑO
   MENOR A 576px
   ========================================================== */

@media (max-width: 575.98px) {

    body {

        font-size: .95rem;

    }

    .navbar-brand {

        font-size: 1.4rem;

    }

    .section-padding {

        padding: 55px 0;

    }

    h1 {

        font-size: 2rem;

    }

    h2 {

        font-size: 1.7rem;

    }

    .carousel-caption {

        width: 95%;

    }

    .carousel-caption h1 {

        font-size: 2rem;

        margin-bottom: 15px;

    }

    .carousel-caption p {

        margin-bottom: 20px;

    }

    .btn {

        padding: 12px 20px;

    }

    .hero-box {

        width: 95%;

        height: 75%;

    }

    .company-box {

        height: 260px;

    }

    .video-box {

        height: 260px;

    }

    .logo-box {

        height: 100px;

        font-size: .8rem;

    }

    .coverage-box {

        height: 260px;

    }

    .fleet-box {

        height: 180px;

    }

    .testimonial-card {

        padding: 30px 20px;

    }

    .accordion-button {

        padding: 18px;

        font-size: .95rem;

    }

    .accordion-body {

        padding: 18px;

    }

    .cta-section h2 {

        font-size: 1.9rem;

    }

    .cta-section h4 {

        font-size: 1.1rem;

    }

    .resource-card {

        padding: 15px;

    }

    .social-placeholder {

        min-width: 100%;

    }

    .floating-whatsapp {

        width: 58px;

        height: 58px;

        right: 15px;

        bottom: 15px;

        font-size: 1.8rem;

    }

    .btn-top {

        width: 50px;

        height: 50px;

        right: 18px;

        bottom: 85px;

    }

}


/* ==========================================================
   ORIENTACION HORIZONTAL MOVILES
   ========================================================== */

@media (max-height: 500px) and (orientation: landscape) {

    #hero .carousel-item {

        min-height: 550px;

    }

    .carousel-caption {

        bottom: 40%;

    }

    .carousel-caption h1 {

        font-size: 2rem;

    }

    .carousel-caption p {

        font-size: .95rem;

    }

}


/* ==========================================================
   IMPRESION
   ========================================================== */

@media print {

    .custom-navbar,
    .floating-whatsapp,
    .btn-top,
    .carousel-control-prev,
    .carousel-control-next {

        display: none !important;

    }

    body {

        background: #ffffff !important;

        color: #000000 !important;

    }

    a {

        text-decoration: none;

        color: #000000 !important;

    }

}


/* ==========================================================
   FIN RESPONSIVE.CSS
   RADIO TAXI AL MINUTO
   ========================================================== */