body {
    background-color: #f7f3f6; /* Light pink background */
    font-family: 'Roboto', sans-serif;
}

.header-banner {
    background-color: #b02a37;
    color: white;
    text-align: center;
    position: relative;
    overflow: hidden;
    width: 736px;
    border-radius: 10px;
    margin-top: 15px;
}

@media (max-width: 768px) {
    .header-banner {
        width: 98%;
        margin-left: auto;
        margin-right: auto;
        border-radius: 8px;
        padding-left: 8px;
        padding-right: 8px;
    }
}

@media (max-width: 480px) {
    .header-banner {
        width: 100%;
        border-radius: 0;
        margin-top: 10px;
        padding-left: 4px;
        padding-right: 4px;
    }
}

.header-banner .logo-small {
    height: 40px; /* Adjust as needed */
    margin-right: 15px;
}

.header-banner .banner-main-image {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    height: 100px; /* Adjust as needed to match the image */
    object-fit: contain;
    mix-blend-mode: multiply; /* To blend with the red background like the image */
    opacity: 0.9;
}

.form-container {
    max-width: 760px; /* Google Forms typical width */
    margin-top: 20px;
}

.form-title {
    font-size: 1.8rem;
    font-weight: 500;
    color: #333;
    margin-bottom: 25px;
    padding-bottom: 10px;
    border-bottom: 1px solid #ddd; /* Subtle line below title */
}

.form-section {
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 20px;
    margin-bottom: 20px;
    background-color: #fff;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05); /* Subtle shadow */
}

.email-info {
    background-color: #f8f9fa !important; /* Lighter background for email section */
    border: 1px solid #e9ecef;
}

.email-info p {
    font-size: 0.9rem;
    margin-bottom: 5px;
}

.email-info .change-account {
    color: #1a73e8; /* Google blue link color */
    text-decoration: none;
}

.email-info .change-account:hover {
    text-decoration: underline;
}

.required-label {
    font-weight: 500;
    margin-bottom: 15px;
    display: block;
}

.form-check {
    margin-bottom: 8px;
}

.form-check-input {
    margin-top: 0.3em;
    margin-right: 0.5em;
    border-color: #ced4da;
}

.form-check-input:checked {
    background-color: #e60023; /* Red radio button */
    border-color: #e60023;
}

.form-check-label {
    font-size: 0.95rem;
}

.rating-scale {
    margin-top: 10px;
    font-size: 0.9rem;
    color: #555;
}

.rating-scale .form-check-inline {
    margin-right: 0.5rem; /* Reduce space between numbers */
}

.rating-scale .form-check-inline .form-check-input {
    margin-top: 0.25rem;
    width: 1.25em; /* Make radio buttons slightly larger */
    height: 1.25em;
}

.rating-scale .form-check-inline .form-check-label {
    font-size: 0.85rem;
    padding-left: 0.1em; /* Adjust label position */
}

textarea.form-control {
    border-radius: 4px;
    border: 1px solid #ced4da;
}

.btn-danger {
    background-color: #e60023;
    border-color: #e60023;
    padding: 10px 25px;
    font-size: 1.1rem;
    font-weight: 500;
}

.btn-danger:hover {
    background-color: #c4001c;
    border-color: #c4001c;
}

.btn-link {
    color: #6c757d;
    font-size: 1rem;
}

.btn-link:hover {
    color: #495057;
}



/* Slider Marcas - Responsive */
@media (max-width: 768px) {
  .marcas-slider-container {
    padding: 10px 0;
  }
  .marcas-slider-track {
    gap: 24px;
    animation-duration: 18s; /* Más lento en móvil */
  }
  .marcas-slider-logo {
    height: 36px;
    min-width: 80px;
    max-width: 90px;
  }
}

@media (max-width: 480px) {
  .marcas-slider-container {
    padding: 6px 0;
  }
  .marcas-slider-track {
    gap: 16px;
    animation-duration: 22s; /* Más lento en móvil pequeño */
  }
  .marcas-slider-logo {
    height: 28px;
    min-width: 60px;
    max-width: 70px;
  }
  .d-flex {
    display: inline list-item!important; /* Asegura que el slider se muestre correctamente en móviles */
    }
}

/* Ajusta el contenedor si tienes un título */
@media (max-width: 480px) {
  .marcas-slider-title {
    font-size: 1.1rem;
    margin-bottom: 8px;
  }
}

/* Optional: Styles for the header image and logo if they are separate files */
/* Make sure you have 'sego_logo.png' and 'banner_image.png' in the same directory as your HTML file */
/* The banner_image.png should depict the computer, person, and stars as seen in the top right of your image */