/*hoja de estilo de Jardines Olivina, desing and develoved by Sofy Frontend*/
:root {
    --azul-oscuro: #0e305d;
    --marron: #353237;
    --azul-flojo: #39a9db;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

html {
    background: url(../imagenes/bg.png) repeat-y;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/*aqui empieza el código del slider copiado de how to*/
.mySlides {
    display: none
}

img {
    vertical-align: middle;
}

.slideshow-container {
    max-width: 1000px;
    position: relative;
    margin: auto;
    margin-top: 20px;
    /* margin-bottom: -150px; */
}

.prev,
.next {
    cursor: pointer;
    position: absolute;
    top: 50%;
    width: auto;
    padding: 16px;
    margin-top: -22px;
    color: white;
    font-weight: bold;
    font-size: 18px;
    transition: 0.6s ease;
    border-radius: 0 3px 3px 0;
    user-select: none;
}

.next {
    right: 0;
    border-radius: 3px 0 0 3px;
}

.prev:hover,
.next:hover {
    background-color: rgba(0, 0, 0, 0.8);
}

.dot {
    cursor: pointer;
    height: 15px;
    width: 15px;
    margin: 0 2px;
    background-color: #bbb;
    border-radius: 50%;
    display: inline-block;
    transition: background-color 0.6s ease;
}

.active,
.dot:hover {
    background-color: #717171;
}

.fade {
    animation-name: fade;
    animation-duration: 1.5s;
}

@keyframes fade {
    from {
        opacity: .4
    }

    to {
        opacity: 1
    }
}

/*aqui termina el código del slider copiado de how to*/
/* 
+
+
+
+
+ 
  */
/*Estos son los estilo para movil */
@media screen and (max-width:600px) {
    body {
        display: grid;
        grid-template-areas: "header"
            "nosotros"
            "servicios"
            "contacto"
            "footer";
        max-width: 100vw;

    }

    header,
    section,
    footer {
        width: 100%;
    }

    header {
        grid-area: header;
        display: grid;
        grid-template-columns: 1fr;
        grid-template-areas: "logo"
            "menu"
            "cabecera";
    }

    #logo {
        grid-area: logo;
        width: 20%;
        margin-left: auto;
        margin-right: auto;
    }

    #logo img {
        width: 100%;
    }

    #menu {
        grid-area: menu;

    }

    #menu button {
        margin-left: 3.5%;
        margin-right: 4.5%;
    }

    button {
        margin: 9px;
        height: 50px;
        width: 70px;
        border-radius: 10px;
        background: var(--azul-oscuro);
        justify-content: center;
        align-items: center;
        box-shadow: -5px -5px 15px var(--azul-oscuro), 5px 5px 15px var(--azul-oscuro) inset 5px 5px 10px var(--azul-oscuro),
            inset -5px -5px 10px var(--azul-oscuro);
        cursor: pointer;
        border: none;
        font-size: 16px;
        color: white;
        transition: 500ms;
    }

    button:hover {
        box-shadow: -5px -5px 15px #353237, 5px 5px 15px #353237, inset 5px 5px 10px #353237,
            inset -5px -5px 10px #353237;
        color: #353237;
        transition: 500ms;
    }

    button a {
        color: white;
    }

    button a:visited {
        color: white;
    }

    #cabecera {
        grid-area: cabecera;
    }

    .mySlides {
        width: 100%;
        height: 300px;
    }

    .mySlides img {
        height: 100%;
    }

    h1 {
        color: white;
        background-color: var(--azul-oscuro);
        padding-left: 15px;
    }

    #cabecera p {
        margin-top: -5%;
        background-color: var(--azul-oscuro);
        padding-left: 15px;
        padding-top: 3%;
        color: white;
    }

    h2 {
        text-align: center;
        color: var(--azul-oscuro);
        margin-top: 5%;
        margin-bottom: 5%;
    }

    #nosotros {
        grid-area: nosotros;
    }

    #nosotros p {
        margin-left: 5%;
        margin-right: 5%;
    }

    #servicios {
        grid-area: servicios;
    }

    .none {
        display: none;
    }

    .valores {
        color: var(--azul-oscuro);
        font-size: 2em;
        text-align: center;
        font-family: 'Times New Roman', Times, serif;
    }

    #valores-img {
        width: 100%;
    }

    .beneficios-item {
        text-align: center;
        text-decoration: underline;
    }

    .galeria-container {
        display: grid;
        grid-template-rows: repeat(9, auto);
        gap: 2vh;
    }

    .galeria-container div img {
        width: 100%;
    }

    .flip-card-back {
        background-color: var(--azul-oscuro);
        color: white;
        padding: 10px 15px;

    }

    #contacto {
        grid-area: contacto;
    }

    #contacto p {
        margin: 0 5%;
        text-align: center;
    }

    footer {
        grid-area: footer;
        background-color: var(--azul-oscuro);
        color: white;
        text-align: center;

    }

    footer a {
        color: white;
    }

    .iconos-redes img {
        width: 10%;
        margin-bottom: 10px;
        padding-left: 10px;
    }
    aside{
    width: 50px;
    position: fixed;
    right:20px;
    top:500px;
    z-index: 1;
    margin-right: 2px;
    
}
.flotante-text{
    color: white;
    background-color: var(--azul-oscuro);
    padding: 5px;
}
    .flotante-icon{
        width: 100%;
    }
    
}

/* aqui terminan los estilos para movil */
/* 
+
+
+
+
+
+ 
  */
/* aqui empiezon los estilos para pantalla grande */
@media screen and (min-width:600px) {
    
    nav {
        display: flex;
        background-color: var(--azul-oscuro);
        height: 100px;
    }

    #logo {
        width: 10%;
    }

    #logo img {
        height: 100%;
    }

    #menu {
        display: flex;
        width: 90%;
        align-items: center;
        justify-content: end;
        margin-right: 100px;
    }

    #menu button {
        border: none;
        background-color: var(--azul-oscuro);
    }

    #menu button a {
        margin-left: 100px;
        font-size: 1.2em;
        color: white;
        background-color: var(--azul-oscuro);
    }

    #menu button a:hover {
        color: var(--marron);
    }

    #cabecera {
        display: block;
        position: relative;
        background-color: var(--azul-oscuro);
        padding: 20px;
        top: -7vw;
        left: 50vw;
        max-width: 50%
    }

    #cabecera h1,
    #cabecera p {
        display: inline;
        margin: 2px;
    }

    #cabecera h1 {
        font-size: 2.2em;
        background-color: var(--azul-oscuro);
        color: white;
    }

    #cabecera p {
        color: white;
    }

    .mySlides {
        width: 100%;
        height: 450px;
    }

    .mySlides img {
        height: 100%;
        width: 100%;
    }

    #nosotros {
        /* margin: 5% 10%;  */
        max-width: 60%;
        margin: 0 auto;
    }

    h2 {
        color: var(--azul-oscuro);
        margin-bottom: 2%;
        font-size: 2em;
        text-align: center;
        font-family: 'Times New Roman', Times, serif;
    }

    p {
        font-size: 18px;
    }

    .valores {
        color: var(--azul-oscuro);
        font-size: 2em;
        text-align: center;
        font-family: 'Times New Roman', Times, serif;
    }

    #valores-img {
        width: 100%;
        /* transform: translateX(25%);
        transform-origin: center center; */
    }

    .beneficios-item {
        text-align: center;
        text-decoration: underline;
    }

    .galeria-container {
        margin-left: 5vw;
        ;
        display: grid;
        grid-template-columns: 30% 30% 30%;
        grid-template-rows: 300px 300px 300px;
        gap: 2%;
        grid-template-areas: "hierbas movimiento riego"
            "siega desing abono"
            "plantas arboles fito";
    }

    #img1-1 {
        width: 100%;
        grid-area: desing;
    }

    #img1-2 {
        width: 100%;
        grid-area: movimiento;
    }

    #img1-3 {
        width: 100%;
        grid-area: riego;
    }

    #img2-1 {
        width: 100%;
        grid-area: siega;
    }

    #img2-2 {
        width: 100%;
        grid-area: hierbas;
    }

    #img2-3 {
        width: 100%;
        grid-area: abono;
    }

    #img3-1 {
        width: 100%;
        grid-area: plantas;
    }

    #img3-2 {
        width: 100%;
        grid-area: arboles;
    }

    #img3-3 {
        width: 100%;
        grid-area: fito;
    }

    .flip-card-back {
        align-content: center;
    }

    #servicios div img {
        width: 100%;
        height: 100%;
    }

    #contacto {
        margin-top: 5%;
        width: 100%;
    }

    #contacto p {
        max-width: 60%;
        text-align: center;
        margin: 0 auto;
    }

    /*codigo para que aparezca el texto en las imagenes de la galeria*/
    /* The flip card container - set the width and height to whatever you want. We have added the border property to demonstrate that the flip itself goes out of the box on hover (remove perspective if you don't want the 3D effect */
    .flip-card {
        background-color: transparent;
        border: 1px solid #f1f1f1;
        perspective: 1000px;
        /* Remove this if you don't want the 3D effect */
    }

    /* This container is needed to position the front and back side */
    .flip-card-inner {
        position: relative;
        width: 100%;
        height: 100%;
        text-align: center;
        transition: transform 0.8s;
        transform-style: preserve-3d;
    }

    /* Do an horizontal flip when you move the mouse over the flip box container */
    .flip-card:hover .flip-card-inner {
        transform: rotateY(180deg);
    }

    /* Position the front and back side */
    .flip-card-front,
    .flip-card-back {
        position: absolute;
        width: 100%;
        height: 100%;
        -webkit-backface-visibility: hidden;
        /* Safari */
        backface-visibility: hidden;
    }

    /* Style the front side (fallback if image is missing) */
    .flip-card-front {
        background-color: #bbb;
        color: black;
    }

    /* Style the back side */
    .flip-card-back {
        background-color: var(--azul-oscuro);
        color: white;
        font-size: 32px;
        text-align: center;
        transform: rotateY(180deg);
    }

    footer {
        background-color: var(--azul-oscuro);
        color: white;
        text-align: center;
        width: 100%;
    }

    footer a {
        color: white;
    }

    .iconos-redes img {
        width: 40px;
        margin-bottom: 20px;
    }

    .img-redes {
        margin-left: 20px;
    }
aside{
    width: 50px;
    position: fixed;
    left: 20px;
    top:500px;
    z-index: 1;
}
.flotante-text{
    background-color: var(--azul-oscuro);
    color:white;
    padding: 5px;
    border-radius: 50px;
}
    .flotante-icon{
        width: 100%;
    }
    #Galeria{
         max-width: 60%;
        margin: 0 auto;
    }
    #proyecto1 ul li{
        list-style: none;
    }
}