.section1 {
    background-image: url("/assets/images/HOME/banner.png");
    background-position: center;
    background-size: cover;
    width: 100%;
    height: 50rem;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: flex-start; /* Alinea el contenido a la izquierda */
    align-items: flex-start; /* Alinea el contenido arriba */
    padding: 20px; /* Agrega un poco de espacio alrededor del contenido */
}

.section1 div p {
    font-size: 50px;
    line-height: 55px;
    color: white;
    margin-top: 200px; 
    margin-left: 100px;
}

@media screen and (max-width: 767px) {
    .section1 {
        height: 40rem;
    }
    .section1 div p {
        font-size: 30px;
        line-height: 35px;
        color: white;
        margin-top: 200px; 
        margin-left: 0px;
    }
}
.section2 {
    background-image: url("/assets/images/CORPORATIVO/banner.png");
    background-position: center;
    background-size: cover;
    width: 100%;
    height: 50rem;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: flex-start; /* Alinea el contenido a la izquierda */
    align-items: flex-start; /* Alinea el contenido arriba */
    padding: 20px; /* Agrega un poco de espacio alrededor del contenido */
}

.section2 div p {
    font-size: 50px;
    line-height: 55px;
    color: white;
    margin-top: 200px; 
    margin-left: 100px;
}

@media screen and (max-width: 767px) {
    .section2 {
        height: 40rem;
    }
    .section2 div p {
        font-size: 30px;
        line-height: 35px;
        color: white;
        margin-top: 200px; 
        margin-left: 0px;
    }
}
.section3 {
    background-image: url("/assets/images/DEPORTES/banner.png");
    background-position: center;
    background-size: cover;
    width: 100%;
    height: 50rem;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: flex-start; /* Alinea el contenido a la izquierda */
    align-items: flex-start; /* Alinea el contenido arriba */
    padding: 20px; /* Agrega un poco de espacio alrededor del contenido */
}

.section3 div p {
    font-size: 50px;
    line-height: 55px;
    color: white;
    margin-top: 200px; 
    margin-left: 100px;
}
.imagen-footer{
    height: 700px;
    width: 100%;
}
@media screen and (max-width: 767px) {
    .imagen-footer {
        height: 205px;
    }
}

@media screen and (max-width: 767px) {
    .section3 {
        height: 40rem;
    }
    .section3 div p {
        font-size: 30px;
        line-height: 35px;
        color: white;
        margin-top: 200px; 
        margin-left: 0px;
    }
}
.section4 {
    background-image: url("/assets/images/BODAS/banner.png");
    background-position: center;
    background-size: cover;
    width: 100%;
    height: 50rem;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: flex-start; /* Alinea el contenido a la izquierda */
    align-items: flex-start; /* Alinea el contenido arriba */
    padding: 20px; /* Agrega un poco de espacio alrededor del contenido */
}

.section4 div p {
    font-size: 50px;
    line-height: 55px;
    color: white;
    margin-top: 450px; 
    margin-left: 100px;
}

@media screen and (max-width: 767px) {
    .section4 {
        height: 40rem;
    }
    .section4 div p {
        font-size: 30px;
        line-height: 35px;
        color: white;
        margin-top: 200px; 
        margin-left: 0px;
    }
}
.section5 {
    background-image: url("/assets/images/NewBlog/banner.png");
    background-position: center;
    background-size: cover;
    width: 100%;
    height: 50rem;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center; /* Alinea el contenido a la izquierda */
    align-items: center; /* Alinea el contenido arriba */
    padding: 20px; /* Agrega un poco de espacio alrededor del contenido */
}

.section5 div p {
    font-size: 80px;
    line-height: 85px;
    color: white;
    
}

@media screen and (max-width: 767px) {
    .section5 {
        height: 40rem;
    }
    .section5 div p {
        font-size: 30px;
        line-height: 35px;
        color: white;
        
    }
}
.section6 {
    background-image: url("/assets/images/CONTACTANOS/banner.png");
    background-position: center;
    background-size: cover;
    width: 100%;
    height: 50rem;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center; /* Alinea el contenido a la izquierda */
    align-items: center; /* Alinea el contenido arriba */
    padding: 20px; /* Agrega un poco de espacio alrededor del contenido */
}

.section6 div p {
    font-size: 80px;
    line-height: 85px;
    color: white;
    
}

@media screen and (max-width: 767px) {
    .section6 {
        height: 40rem;
    }
    .section6 div p {
        font-size: 30px;
        line-height: 35px;
        color: white;
        
    }
}

/* Estilos específicos para pantallas pequeñas */
@media screen and (max-width: 768px) {
    .navbar__menu {
        display: none; /* Oculta el menú en pantallas pequeñas */
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
        background-color: #424e4e;
        padding: 20px;
    }

    .navbar__menu.active {
        display: block; /* Muestra el menú cuando el botón de hamburguesa está activo */
    }

    .navbar__toggle-btn {
        display: block; /* Muestra el botón de hamburguesa en pantallas pequeñas */
        background: none;
        border: none;
        cursor: pointer;
        position: relative;
        margin-right: 30px;
    }

    .hamburger {
        display: block;
        width: 30px;
        height: 2px;
        background-color: white;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }

    .hamburger::before, .hamburger::after {
        content: '';
        display: block;
        width: 100%;
        height: 100%;
        background-color: white;
        position: absolute;
        transition: transform 0.3s ease;
    }

    .hamburger::before {
        top: -8px;
    }

    .hamburger::after {
        bottom: -8px;
    }

    /* Cambia el aspecto del botón de hamburguesa cuando está activo */
    .navbar__toggle-btn.active .hamburger::before {
        transform: translateY(8px) rotate(45deg);
    }

    .navbar__toggle-btn.active .hamburger::after {
        transform: translateY(-8px) rotate(-45deg);
    }
    .navbar__list {
        flex-direction: column;
    }

    .navbar__item {
        margin-right: 0;
    }
    .primary-navbar .navbar__item a {
        padding: 20px 0px;
        font-weight: 500;
        width: 100%;
        color: var(--white);
      }
}

.image-container {
    position: relative;
    width: 100%;
    height: 550px;
}

.image-wrapper {
    position: absolute;
    width: 100%;
    height: 100%;
}

@media screen and (max-width: 768px) {
    .image-container {
        position: relative;
        width: 100%;
        height: 150px;
    }
}

.section9 {

    padding: 0px; /* Agrega un poco de espacio alrededor del contenido */
}


.section8 {
    padding: 0px;
    height: 300vh;
    background-image: url(/assets/images/SOBRE-NOSOTROS/patron.png); /* Agrega un poco de espacio alrededor del contenido */
}

.section8 img.team1 {
    width: 281px;
    height: auto;
    position: absolute;
    left: 15%;
    top: 32.5%;
}
.section8 img.team2 {
    width: 281px;
    height: auto;
    position: absolute;
    left: 63%;
    top: 50%
}
.section8 img.team3 {
    width: 281px;
    height: auto;
    position: absolute;
    left: 15%;
    top: 62.5%
}
.section8 img.team4 {
    width: 281px;
    height: auto;
    position: absolute;
    left: 15%;
    top: 47%
}
.section8 img.team5 {
    width: 281px;
    height: auto;
    position: absolute;
    left: 63%;
    top: 35%
}

.section8 p.team1 {
    font-size: 16px;
    position: absolute;
    left: 38%;
    top: 33%;
    color:#424e4e;
}
.section8 p.team11 {
    font-size: 12px;
    position: absolute;
    left: 38%;
    top: 35%;
    color: black;
}

.section8 p.team2 {
    font-size: 16px;
    position: absolute;
    left: 46%;
    top: 56.5%;
    color:#424e4e;
}
.section8 p.team22 {
    font-size: 12px;
    position: absolute;
    left: 46%;
    top: 58.5%;
    color: black;
}
.section8 p.team3 {
    font-size: 16px;
    position: absolute;
    left: 38%;
    top: 63.5%;
    color:#424e4e;
}
.section8 p.team33 {
    font-size: 12px;
    position: absolute;
    left: 38%;
    top: 65.5%;
    color: black;
}
.section8 p.team4 {
    font-size: 16px;
    position: absolute;
    left: 38%;
    top: 48%;
    color:#424e4e;
}
.section8 p.team44 {
    font-size: 12px;
    position: absolute;
    left: 38%;
    top: 50%;
    color: black;
}
.section8 p.team5 {
    font-size: 16px;
    position: absolute;
    left: 46%;
    top: 42%;
    color:#424e4e;
}
.section8 p.team55 {
    font-size: 12px;
    position: absolute;
    left: 46%;
    top: 43%;
    color: black;
}

@media screen and (max-width: 768px) {
    .section8{
        display: none;
    }
}

.section10 {
    display: none;
}

@media (max-width: 600px) {
    .section10 {
        background-image: url(/assets/images/SOBRE-NOSOTROS/patrón.png); 
        display: grid;
    }
    .section10 img.image
    {
        width: 300px;
        height: auto;
    }
    .section10 p {
        font-size: 16px;
        color: #424e4e;
        padding: 10px;
    }
}

.service-slider-wrapper {
    position: relative;
}

.prev-arrow, .next-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background-color: rgba(0, 0, 0, 0.5);
    color: white;
    border: none;
    font-size: 2rem;
    padding: 10px;
    cursor: pointer;
    z-index: 10;
    display: none; /* Por defecto, las flechas están ocultas */
}

.prev-arrow {
    left: 10px;
}

.next-arrow {
    right: 10px;
}

.prev-arrow:hover, .next-arrow:hover {
    background-color: rgba(0, 0, 0, 0.7);
}

@media (max-width: 768px) {
    .prev-arrow, .next-arrow {
        display: block; /* Mostrar las flechas solo en pantallas pequeñas */
    }
    
}
