body {
            font-family: 'Roboto', sans-serif;
            margin: 0;
            padding: 0;
            background-color: #f0f0f0;
        }
        header {
            background-color: #003366;
            color: white;
            padding: 20px 0;
            text-align: center;
        }
        nav {
            background-color: #00509e;
            display: flex;
            justify-content: center;
            padding: 10px 0;
        }
        nav a {
            color: white;
            margin: 0 15px;
            text-decoration: none;
            font-weight: bold;
        }
        .hero {
            background: url('/img/fondos/monterrey-nl-3.webp') no-repeat center center/cover;
            height: 400px;
            display: flex;
            justify-content: center;
            align-items: center;
            color: white;
            text-align: center;
        }
        .services {
            padding: 50px 0;
            background-color: white;
            position: relative;
        }
        .service-slider {
            display: flex;
            overflow-x: auto;
            scroll-snap-type: x mandatory;
            scroll-behavior: smooth;
        }
        .service {
            background-color: #e0e0e0;
            padding: 20px;
            min-width: 300px;
            margin: 0 10px;
            text-align: center;
            border-radius: 10px;
            scroll-snap-align: start;
        }
        .service img {
            width: 100%;
            border-radius: 10px;
        }
        .service h2 {
            color: #003366;
        }
        .slider-button {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            background-color: rgba(0, 0, 0, 0.5);
            color: white;
            border: none;
            padding: 10px;
            cursor: pointer;
            z-index: 10;
        }

        .about {
            padding: 50px 0;
            background-color: #f0f0f0;
            text-align: center;
        }
        .about h2 {
            color: #003366;
            font-weight: bold;
            font-size:1.5em;
        }
        .about h3 {
            color: #003366;
            font-weight: bold;
            font-size:1.2em;
        }
        .about p{
            font-size: medium;
        }
        .about p em {
            font-weight: bold;
        }
        .news {
            padding: 50px 0;
            background-color: #f0f0f0;
        }

        .titulosnot {
            padding-left: 50px;
            font-size: 30px;
            color: #00509e;
            font-weight: bolder;
        }

        .news-item {
            display: flex;
            margin-bottom: 20px;
            background-color: white;
            padding: 20px;
            border-radius: 10px;
        }
        .news-item img {
            width: 200px;
            height: 150px;
            border-radius: 10px;
            margin-right: 20px;
        }
        .news-item h3 {
            color: #003366;
        }
        footer {
            background-color: #003366;
            color: white;
            text-align: center;
            padding: 20px 0;
        }
        .accordion {
        background-color: #eee;
        color: #003366;
        cursor: pointer;
        padding: 18px;
        width: 100%;
        border: none;
        text-align: center;
        outline: none;
        font-size: 20px;
        transition: 0.4s;
        }

        .active, .accordion:hover {
        background-color: #959595; 
        }

        .accordion:after {
        content: '\02795'; /* Unicode character for "plus" sign (+) */
        font-size: 13px;
        color: #003366;
        float: right;
        margin-left: 5px;
        }

        .active:after {
        content: "\2796"; /* Unicode character for "minus" sign (-) */
        }

        .panel {
        padding: 0 18px;
        display: none;
        background-color: white;
        overflow: hidden;
        }
        .btn {
        background-color: #003366;
        border: none;
        color: white;
        padding: 6px 15px;
        cursor: pointer;
        font-size: 20px;
        }
        .btn:hover {
        background-color: RoyalBlue;
        }
        /* Scroll to Top Button */
        #myBtn {
        display: none; /* Hidden by default */
        position: fixed; /* Fixed/sticky position */
        bottom: 20px; /* Place the button at the bottom of the page */
        right: 30px; /* Place the button 30px from the right */
        z-index: 99; /* Make sure it does not overlap */
        border: none; /* Remove borders */
        outline: none; /* Remove outline */
        background-color: #003366; /* Set a background color */
        color: white; /* Text color */
        cursor: pointer; /* Add a mouse pointer on hover */
        padding: 15px; /* Some padding */
        border-radius: 10px; /* Rounded corners */
        font-size: 18px; /* Increase font size */
        }

        #myBtn:hover {
        background-color: #555; /* Add a dark-grey background on hover */
        }

        .trescajas{
            display: flex;
            justify-content: space-between;
        }

        .letraredes {
            color: #00509e;
            font-size: larger;
            font-weight: bold;
            font-style: italic;
            text-align: center;
        }