@charset "utf-8";
/* CSS Document */


        :root {
            --sos-orange: #ff5100;
            --sos-orange-dark: #cc4100;
        }

        body {
            font-family: 'Inter', sans-serif;
            scroll-behavior: smooth;
        }
        .navbar-brand img {
            height: 60px; /* Adjust logo size */
        }
        .hero-section {
            background: linear-gradient(rgba(11, 36, 63, 0.6), rgba(11, 36, 63, 0.2)), url("../assets/images/sosmx_hero_banner.jpg") no-repeat center center; /* Placeholder, replace with actual image */
            background-size: cover;
            color: white;
            padding: 100px 0;
            min-height: 80vh;
            display: flex;
            align-items: center;
            justify-content: center;
            text-align: center;
        }
        .section-padding {
            padding: 80px 0;
        }
        .bg-light-gray {
            background-color: #f8f9fa;
        }
        .whatsapp-button {
            position: fixed;
            bottom: 20px;
            left: 20px; /* Moved to left */
            right: auto; /* Removed right positioning */
            background-color: #25D366;
            color: white;
            border-radius: 50%;
            width: 60px;
            height: 60px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 2rem;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
            z-index: 1000;
            transition: transform 0.3s ease;
        }
        .whatsapp-button:hover {
            transform: scale(1.1);
            color: white;
        }

.email-button { /* New style for email button */
            position: fixed;
            bottom: 20px;
            right: 20px;
            background-color: #007bff; /* Blue color */
            color: white;
            border-radius: 50%;
            width: 60px;
            height: 60px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 2rem;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
            z-index: 1000;
            transition: transform 0.3s ease;
        }
        .brand-logo {
            max-height: 80px;
            width: auto;
            margin: 15px;
            filter: grayscale(100%); /* For a more uniform look */
            transition: filter 0.3s ease, transform 0.3s ease; /* Added transition for transform */
        }
        .brand-logo:hover {
            filter: grayscale(0%); /* Color on hover */
            transform: scale(1.05); /* Slightly larger on hover */
        }
        .testimonial-card {
            background-color: #fff;
            border-radius: 10px;
            padding: 30px;
            box-shadow: 0 0 20px rgba(0,0,0,0.05);
            margin-bottom: 30px;
            height: 100%; /* Ensure cards in carousel have consistent height */
        }

        /* Updated navbar background color */
        .navbar-dark.bg-dark {
            background-color: #173255 !important;
        }
        .footer {
            background-color: #173255; /* Updated footer background color */
            color: white;
            padding: 40px 0;
        }
        .footer a {
            color: #adb5bd;
            text-decoration: none;
        }
        .footer a:hover {
            color: white;
        }
        .social-icons a {
            color: white;
            font-size: 1.5rem;
            margin: 0 10px;
            transition: color 0.3s ease;
        }
        .social-icons a:hover {
            color: #25D366; /* Reverted social icon hover color to WhatsApp green */
        }
        .card {
            border-radius: 10px;
            border: none;
            box-shadow: 0 0 15px rgba(0,0,0,0.08);
            /* Subtle animation for service cards */
            transition: transform 0.3s ease, box-shadow 0.3s ease;
        }
        .card:hover {
            transform: translateY(-5px); /* Slightly up */
            box-shadow: 0 10px 25px rgba(0,0,0,0.15); /* More pronounced shadow */
        }
        .card-img-top {
            border-top-left-radius: 10px;
            border-top-right-radius: 10px;
        }
        /* Primary button color remains orange */
        .btn-primary {
            background-color: var(--sos-orange);
            border-color: var(--sos-orange);
            border-radius: 50rem; /* Rounded buttons */
            padding: 10px 30px;
            font-weight: 600;
            transition: background-color 0.3s ease, border-color 0.3s ease;
        }
        .btn-primary:hover {
            background-color: var(--sos-orange-dark);
            border-color: var(--sos-orange-dark);
        }
        .accordion-item {
            border-radius: 10px;
            margin-bottom: 15px;
            overflow: hidden;
            border: 1px solid rgba(0,0,0,.125);
        }
        .accordion-button {
            border-radius: 10px !important;
        }
        .accordion-button:not(.collapsed) {
            background-color: #e9ecef;
            color: #495057;
            box-shadow: none;
        }
        .accordion-body {
            padding: 20px;
        }

        /* Styles for 1:1 video container */
        .video-container {
            position: relative;
            width: 100%;
            padding-bottom: 100%; /* 1:1 Aspect Ratio */
            height: 0;
            overflow: hidden;
            border-radius: 10px; /* Apply rounding */
            box-shadow: 0 0 15px rgba(0,0,0,0.08); /* Shadow similar to cards */
        }
        .video-container iframe {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            border: 0;
        }

         /* Client Carousel Styles */
        .client-carousel-container {
            overflow: hidden;
            position: relative;
            width: 100%;
            padding: 20px 0; /* Add some vertical padding */
        }

        .client-carousel-track {
            display: flex;
            width: max-content; /* Allow content to dictate width */
            animation: scroll-left 70s linear infinite; /* Adjusted duration for slower speed */
        }

        .client-carousel-track:hover {
            animation-play-state: paused; /* Pause on hover */
        }

        .client-carousel-item {
            flex-shrink: 0; /* Prevent items from shrinking */
            margin: 0 15px; /* Spacing between items */
            padding: 10px 20px;
            background-color: #ffffff; /* Light background for badges */
            border-radius: 10px; /* Rounded pill shape */
            font-weight: 500;
            color: #495057;
            white-space: nowrap; /* Prevent text wrapping */
            box-shadow: 0 2px 5px rgba(0,0,0,0.05);
            transition: transform 0.2s ease-in-out;
        }

        .client-carousel-item:hover {
            transform: translateY(-3px); /* Slight lift on hover */
        }

        /* Keyframes for continuous scroll */
        @keyframes scroll-left {
            0% {
                transform: translateX(0%);
            }
            100% {
                transform: translateX(-50%); /* Scroll half the track width to loop */
            }
        }

        /* Testimonial Carousel adjustments */
        #testimonialCarousel .carousel-inner {
            padding-bottom: 50px; /* Space for controls */
        }
        #testimonialCarousel .carousel-item .row {
            justify-content: center; /* Center cards within the row */
        }
        #testimonialCarousel .carousel-control-prev,
        #testimonialCarousel .carousel-control-next {
            width: 5%; /* Make controls narrower */
            opacity: 0.8; /* Slightly visible when not hovered */
            transition: opacity 0.3s ease;
        }
        #testimonialCarousel .carousel-control-prev:hover,
        #testimonialCarousel .carousel-control-next:hover {
            opacity: 1; /* Fully visible on hover */
        }
        /* Reverted carousel control icon color to primary blue */
        #testimonialCarousel .carousel-control-prev-icon,
        #testimonialCarousel .carousel-control-next-icon {
            background-color: #007bff; /* Primary blue for icons */
            border-radius: 50%;
            padding: 15px;
            background-size: 50%; /* Adjust icon size */
        }
        /* Responsive adjustments for testimonial cards in carousel */
        @media (max-width: 991.98px) { /* Medium devices and smaller */
            #testimonialCarousel .carousel-item .col-md-4 {
                flex: 0 0 100%; /* Make each card take full width */
                max-width: 100%;
            }
        }
        @media (min-width: 992px) { /* Large devices and up */
            #testimonialCarousel .carousel-item .col-md-4 {
                flex: 0 0 33.333333%; /* 3 cards per row */
                max-width: 33.333333%;
            }
        }

        /* Map specific styles */
        .google-map-container {
            position: relative;
            padding-bottom: 56.25%; /* 16:9 Aspect Ratio (for responsive iframe) */
            height: 0;
            overflow: hidden;
            border-radius: 10px;
            box-shadow: 0 0 15px rgba(0,0,0,0.08);
            margin-top: 30px;
        }
        .google-map-container iframe {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            border: 0;
        }

        /* Message box for form submissions */
        .message-box {
            display: none; /* Hidden by default */
            padding: 15px;
            margin-top: 20px;
            border-radius: 8px;
            font-weight: bold;
            text-align: center;
        }
        .message-box.success {
            background-color: #d4edda;
            color: #155724;
            border: 1px solid #c3e6cb;
        }
        .message-box.error {
            background-color: #f8d7da;
            color: #721c24;
            border: 1px solid #f5c6cb;
        }

 /* Tawk.to Widget Adjustment */
        /* This targets the Tawk.to widget container that is usually injected directly into the body */
        /* Adjust the 'bottom' value as needed to move it up */
        #tawkchat-iframe-wrapper { /* This is a common ID Tawk.to uses for its main container */
            bottom: 120px !important; /* Move it up by 70px to clear reCAPTCHA */
        }
        /* Alternative targeting if the above doesn't work consistently */
         div[data-v-b51f08f8] {
            bottom: 120px !important;
        } */




/* Specific styles for this page */
        .rational-icon {
            font-size: 4rem;
            color: #007bff; /* Primary blue for RATIONAL specific icons */
            margin-bottom: 20px;
        }
        .rational-model-list li {
            font-size: 1.1rem;
            margin-bottom: 8px;
        }
        .rational-model-list i {
            color: #007bff; /* Primary blue for checkmarks */
        }
        .parts-accessories-section .img-fluid {
            max-height: 250px;
            object-fit: contain;
            margin: 0 auto;
            display: block;
        }
        /* New section styles */
        .rational-media-section {
            background-color: #f8f9fa; /* Light gray background */
        }
        .video-square-container {
            position: relative;
            width: 100%;
            padding-bottom: 150%; /* 4:6 Aspect Ratio (6/4 = 1.5 = 150%) */
            height: 0;
            overflow: hidden;
            border-radius: 10px;
            box-shadow: 0 0 15px rgba(0,0,0,0.08);
            display: flex; /* Use flex to center content vertically */
            align-items: center; /* Center content vertically */
            justify-content: center; /* Center content horizontally */
        }
        .video-square-container video { /* Style for the video tag */
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            object-fit: cover; /* Ensures the video covers the container */
        }
        .carousel-item-content {
            text-align: center;
            padding: 20px;
        }
        .carousel-item-content img {
            max-height: 200px; /* Adjust as needed */
            width: auto;
            margin-bottom: 15px;
            border-radius: 8px;
            box-shadow: 0 5px 15px rgba(0,0,0,0.1);
        }
        .carousel-item-content h4.fs-5 { /* Target h4 with fs-5 for carousel titles */
            font-weight: bold;
            margin-bottom: 10px;
            color: #343a40;
            font-size: 1.25rem !important; /* Ensure fs-5 overrides default h4 size */
        }
        .carousel-item-content .btn {
            margin-top: 10px;
        }
        .carousel-control-prev-icon,
        .carousel-control-next-icon {
            background-color: #007bff; /* Blue for carousel controls */
            border-radius: 50%;
            padding: 15px;
            background-size: 50%;
        }
        .cta-special-accessories {
            text-align: center;
            /* Removed margin-top as it will be in a column now */
            padding: 40px;
            background-color: #e9ecef; /* Slightly darker than bg-light-gray */
            border-radius: 10px;
            box-shadow: 0 5px 15px rgba(0,0,0,0.05);
            height: 100%; /* Ensure it fills the column height */
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
        }
        .cta-special-accessories p {
            font-size: 1.3rem;
            font-weight: 500;
            margin-bottom: 25px;
            color: #343a40;
        }
        .btn-whatsapp-blue {
            background-color: #007bff; /* Bootstrap primary blue */
            border-color: #007bff;
            color: white;
            border-radius: 50rem;
            padding: 12px 30px;
            font-size: 1.1rem;
            font-weight: 600;
            transition: background-color 0.3s ease, border-color 0.3s ease;
        }
        .btn-whatsapp-blue:hover {
            background-color: #0056b3;
            border-color: #0056b3;
            color: white;
        }
        /* Custom styles for semantic headings to preserve visual size */
        h3.fs-5 { /* For RATIONAL models and benefits */
            font-size: 1.25rem !important; /* Override default h3 size */
        }



.cookie-banner {
    z-index: 1060; /* Asegura que esté por encima de otros elementos, pero debajo de modales si los hubiera */
    width: 100%;
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.2);
    padding: 15px 0;
}
.cookie-banner p {
    font-size: 0.9rem;
    line-height: 1.4;
}
.cookie-banner .btn {
    white-space: nowrap; /* Evita que los botones se rompan en varias líneas */
}
/* Ajustes responsivos para botones */
@media (max-width: 767.98px) { /* Small devices (sm) and down */
    .cookie-banner .col-md-9,
    .cookie-banner .col-md-3 {
        text-align: center !important;
    }
    .cookie-banner .btn {
        width: 100%; /* Botones de ancho completo en móvil */
        margin-bottom: 10px; /* Espacio entre botones */
    }
    .cookie-banner .me-2 {
        margin-right: 0 !important; /* Elimina margen derecho en móvil */
    }
}