:root {
    --blanco: #ffffff;
    --oscuro: #212121;
    --gris: #757575;
    --rosa-paleta: #FF77B7;
    --skyblue: #B9E5E8;
    --acua-paleta: #5B99C2;
    --strong-yellow: #FADA7A;
    --vesh-paleta: #FEFAE0;
    --morado-paleta: #9932cc;
    --yellow: #CCDF92;
    --anaranjado-paleta: #FFD18E;
    --amarillo-oscuro: #1F509A;
    --celeste: #D4EBF8;
    --morado-claro: #F5EFFF;
    --anaranjado-oscuro: #FFB200;
    --azul-oscuro: #001A6E;
    --light-purple: #FADAFA;
    --lluvia: #5BAEC1;
    --lluvia2: #FFCFB3;
    --celeste-lluvia: #d6e6f2;
    --celesta-claro-lluvia: #eaf4f8;
    --azul-lluvia: lightskyblue;
}


html {
    font-size: 62.5%;
    box-sizing: border-box;
    /* hack para box model */
    /*scroll-snap-type: y mandatory; /* para el scroll de arriba hacia abajo */
}


*,
*:before,
*:after {
    box-sizing: inherit;
}

body {
    /* 1 rem = 10px */
    background-color: var(--vesh-paleta);
}

nav {
    font-weight: 700;
    font-size: 1.5rem;
}

/*  colores */

.bg-celesta-claro-lluvia {
    background-color: var(--celesta-claro-lluvia);
}

.bg-celeste-lluvia {
    background-color: var(--celeste-lluvia);
}

.bg-azul-lluvia {
    background-color: var(--azul-lluvia);
}



.bg-morado-claro {
    background-color: var(--morado-claro);
}

.bg-anaranjado-oscuro {
    background-color: var(--anaranjado-oscuro);
}

.font-rosa-paleta {
    color: var(--rosa-paleta);
}

.font-morado-paleta {
    color: var(--morado-paleta);
}

.font-azul-oscuro {
    color: var(--azul-oscuro);
}




.font-Josefin {
    font-family: 'Josefin Sans';
    color: var(--strong-yellow);
}

.font-Josefin2 {
    font-family: 'Josefin Sans';
    color: var(--acua-paleta);
}

.font-dancing {
    font-family: "Dancing Script", cursive;
    font-weight: 400;
    font-size: 3rem;
    color: var(--rosa-paleta);
}

.font-ede {
    font-family: "Edu NSW ACT Foundation", cursive;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
}


@media (min-width: 990px) {
    .nav-principal {
        height: 6rem;
    }
}

nav ul li {
    white-space: nowrap;
    /* No permitir que el texto se divida en varias líneas */
    display: flex;
    align-items: center;
    justify-content: center;
}


.nav-principal a:hover {
    color: var(--skyblue);
}

.nav-principal a {
    color: var(--gris);
}

ul {
    flex-direction: row;
    /* coloca los elementos en una sola linea de manera horizontal uno despues del otro */
    justify-content: space-between;
    /*mover contenido horizontalmente en este caso se movieron hacia el centro con un espaiciado uniforme*/
}

.custom-navbar {
    background-color: var(--vesh-paleta);
}


/* Estilo para el contenedor del logo */
.nav-logo {
    position: relative;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Estilo para la imagen de fondo */
.nav-logo::before {
    content: "";
    background-image: url('https://storage.googleapis.com/imageslluvia/Logo-Acua-sin-fondo.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    width: 9rem;
    /* Ajusta el ancho según tus necesidades */
    height: 9rem;
    /* Ajusta la altura según tus necesidades */
    display: block;
}


.contenido-header {
    position: relative;
    display: inline-block;
}

.contenido-header .overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /*background-color: rgba(0, 0, 0, 0.5); /* Fondo semitransparente */
}

.contenido-header img {
    display: block;
    width: 100%;
}


.contenido-principal h3 {
    color: var(--strong-yellow);
    font-size: 2rem;
}

.contenido-principal h4 {
    color: var(--rosa-paleta);
    font-size: 2rem;
}

.bg-anaranjado {
    background-color: var(--anaranjado-paleta);
}

.bg-anaranjado-oscuro {
    background-color: var(--anaranjado-oscuro);
}

.bg-celeste {
    background-color: var(--light-purple);
}

.bg-grisclaro {
    background-color: var(--lluvia2c);
}

.bg-morado-claro {
    background-color: var(--morado-claro);
}


@media (min-width: 480px) {
    .contenedor {
        max-width: 90rem;
        margin: 0 auto;
        /* Centra el contenedor */
    }
}

@media (max-width: 1019px) {

    .color-bg-grid-principal {
        background-color: var(--yellow);
    }

    .grid-izquierdo {
        display: block;
    }

    .grid-izquierdo img {
        width: 100%;
        margin-bottom: 2rem;
    }

    .grid-derecho img {
        width: 100%;
        margin-bottom: 2rem;
    }

    .grid-item6 {
        height: 50rem;
        object-fit: cover;
        /* Ajusta la imagen para que no se deforme */
    }

    .grid-item1 {
        margin-top: 3rem;
    }

    .home-final p {
        font-size: 3rem;
    }


}


@media (min-width: 1020px) {

    .nav-logo {
        position: relative;
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        content: "";
        background-image: url('../img/Logo-blanco-sin-fondo.png');
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center;
        width: 9rem;
        /* Ajusta el ancho según tus necesidades */
        height: 9rem;
        /* Ajusta la altura según tus necesidades */
        display: block;
    }

    .color-bg-grid-principal {
        background-color: var(--yellow);
        padding: 1rem;
        max-width: 100%;
        margin: 0 auto;
        /* Centra el contenedor */
    }

    .grid-principal {
        display: block;
        align-items: center;
    }

    .grid-principal img {
        display: block;
        max-width: 100%;
        /* Evita que exceda el tamaño de la celda */
    }

    .grid-izquierdo {
        display: flex;
        justify-content: space-between;
        position: absolute;
    }

    .grid-derecho {
        display: flex;
        justify-content: space-around;
    }

    .grid-item1 {
        width: 20rem;
        /* Ancho fijo */
        height: 25rem;
        /* Alto fijo */
        object-fit: cover;
        /* Ajusta la imagen para que no se deforme */
        margin-right: 2rem;
    }

    .grid-item2 {
        width: 20rem;
        /* Ancho fijo */
        height: 25rem;
        /* Alto fijo */
        object-fit: cover;
        /* Ajusta la imagen para que no se deforme */
        margin-right: 2rem;
    }

    .grid-item3 {
        width: 46rem;
        /* Ancho fijo */
        height: 38rem;
        /* Alto fijo */
        object-fit: cover;
        /* Ajusta la imagen para que no se deforme */
    }

    .grid-item4 {
        width: 42rem;
        /* Ancho fijo */
        height: 48rem;
        /* Alto fijo */
        object-fit: cover;
        /* Ajusta la imagen para que no se deforme */
        margin-top: 26rem;
    }

    .grid-item5 {
        width: 20rem;
        /* Ancho fijo */
        height: 35rem;
        /* Alto fijo */
        object-fit: cover;
        /* Ajusta la imagen para que no se deforme */
        margin-top: 39rem;
    }

    .grid-item6 {
        width: 20rem;
        /* Ancho fijo */
        height: 35rem;
        /* Alto fijo */
        object-fit: cover;
        /* Ajusta la imagen para que no se deforme */
        margin-top: 39rem;
    }

    .layout-inferior {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        column-gap: 1rem;
        margin-top: 8rem;
    }

    .layout-inferior img {
        max-width: 100%;
        object-fit: cover;
    }

    .home-layout-final {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }

    .home-final {
        display: block;
        align-items: end;
        margin-left: 4rem;
    }

    .home-final p {
        font-size: 4rem;
    }

    .home-final img {
        width: 50rem;
        object-fit: cover;
        margin-left: 10rem;
    }

    .home-final button {
        padding: 2rem;
    }


}

.about-section {
    padding: 4rem 2rem;
    background-color: #f4f4f4;
    position: relative;
}

.about-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    clip-path: polygon(0 10%, 100% 0, 100% 90%, 0 100%);
    background: #eaeaea;
    z-index: -1;
}

.about-section h2 {
    color: #333;
    margin-bottom: 1.5rem;
}

.about-section p {
    color: #555;
    line-height: 1.6;
}

.about-section img {
    border-radius: 10px;
    box-shadow: 0 4px 6px rgba(127, 127, 127, 0.8);
}


.footer {
    margin-top: 5rem;
    background-color: var(--vesh-paleta);
    color: #bbb;
    padding: 1.5rem 0;
    text-align: center;
}

.footer a {
    color: #bbb;
    text-decoration: none;
}

.footer a:hover {
    text-decoration: underline;
}

.font-blue {
    color: #001A6E;
}

.font-green {
    color: #E1FFBB;
}


.history-layout-final {
    display: grid;
    grid-template-columns: 1fr 1fr;
}

.history-final {
    display: block;
    align-items: center;
    margin-left: 2rem;
}

.history-final p {
    font-size: 20px;
    margin-left: 5px;
    margin-top: 100px;
    margin-right: 100px;
}

.history-final img {
    width: 50rem;
    object-fit: cover;
    margin-left: 10rem;
}

.bg-history {
    background-color: var(--lluvia2);
    border: 10px solid var(--lluvia2);
    /* Add the blue border */
    padding: 20px;
    /* Optional: adds padding inside the border */
}

.bg-history2 {
    background-color: var(--light-purple);
    height: 100px;
    /* Aumenta la altura de la sección */
    padding: 20px;
    /* Aumenta el espaciado interno */
}

.bg-history2 h1 {
    font-size: 4rem;
    /* Aumenta el tamaño del texto */
    text-align: center;
    /* Centra el texto */
}

.bg-history3 {
    background-color: var(--lluvia);
    height: 500px;
    /* Aumenta la altura de la sección */
    padding: 200px;
    /* Aumenta el espaciado interno */
}

.container-xxl {
    background-color: lightskyblue;
}

.bg-lightskyblue {
    background-color: lightskyblue !important;
}

.bg-oranges {
    background-color: var(--anaranjado-paleta) !important;
}

.bg-lpurple {
    background-color: var(--light-purple) !important;
}


/* CONTACT ME  */

.contact-me {
    background-color: var(--celesta-claro-lluvia);
    color: #333;
}

.contact-me .section-title {
    font-weight: bold;
    color: var(--azul-lluvia);
}

.contact-me .icon-box {
    font-size: 2.5rem;
    color: var(--azul-lluvia);
    margin-bottom: 15px;
}

.contact-box {
    background-color: var(--celeste-lluvia);
    padding: 20px;
    margin: 10px;
    border-radius: 10px;
    transition: transform 0.3s ease;
}

.contact-box:hover {
    transform: translateY(-5px);
    background-color: var(--azul-lluvia);
    color: white;
}

.contact-box i {
    display: inline-block;
}


.contact-box:hover .icon-box,
.contact-box a:hover {
    color: var(--azul-oscuro);
}