:root {
  --dark-color: hsl(var(--hue), 100%, 9%);
  --light-color: hsl(var(--hue), 95%, 98%);
  --base: hsl(var(--hue), 95%, 50%);
  --complimentary1: hsl(var(--hue-complimentary1), 95%, 50%);
  --complimentary2: hsl(var(--hue-complimentary2), 95%, 50%);

  --font-family: "Poppins", system-ui;

  --bg-gradient: linear-gradient(
    to bottom,
    hsl(var(--hue), 95%, 99%),
    hsl(var(--hue), 95%, 84%)
  );
}
/* ==========
    HOME PAGE
    ==========*/
    .banner-home{
        display:flex;
        flex-flow:row wrap;
        justify-content:space-evenly;
        /* background: url('../assets/banner/main-bg.png') center no-repeat;
        background-size:cover; */
        align-items: center;

            /* background: radial-gradient(circle, rgba(255,214,145,1) 0%, rgba(121,9,60,0.57) 35%, rgba(255,255,255,1) 100%); */
            background: radial-gradient(circle, rgba(255,214,145,1) 0%, rgba(255,255,255,1) 35%, rgba(121,9,60,0.57) 100%);
            background-size: 400% 400%;
        
            -webkit-animation: GoldnGoAnimation 25s ease infinite;
            -moz-animation: GoldnGoAnimation 25s ease infinite;
            animation: GoldnGoAnimation 25s ease infinite;

        position:relative;
        overflow:hidden;
        z-index:0
    }
    @-webkit-keyframes GoldnGoAnimation {
        0%{background-position:7% 0%}
        50%{background-position:94% 100%}
        100%{background-position:7% 0%}
    }
    @-moz-keyframes GoldnGoAnimation {
        0%{background-position:7% 0%}
        50%{background-position:94% 100%}
        100%{background-position:7% 0%}
    }
    @keyframes GoldnGoAnimation {
        0%{background-position:7% 0%}
        50%{background-position:94% 100%}
        100%{background-position:7% 0%}
    }
    .banner-home .abs{
        position:absolute;
        background: url('../assets/banner/img-abs.png') center no-repeat;
        width: 528px;
        height:499px;
        display:block;
        top:0;
        right:0;
        z-index: -1;
    }
    .banner-home h1{
        font-size: 4em;
        font-weight:500;
    }
    .banner-home h1 span{
        text-decoration: line-through;
    }
    .banner-home p{
        font-size:1.5em;
    }
    .banner-home button{
        background-color:#000;
        color:#fff;
        padding:.5em 1em;
        border:0;
        font-size:1.5em;
        text-transform:uppercase;
        transition: all .8s;
        border: 2px solid #000;
    }
    .banner-home button:hover{
        box-shadow: 300px 0 0 0 #fff inset;
        background-color:#fff;
        color:#000;
        z-index:10;
    }

    /* =======
     CAROUSEL 
     ========*/
     .fade-slick{
        position:relative;
        margin-top:-122px;
     }
     .slick-arrow{
        position:absolute;
        z-index:2;
        display:flex;
        flex-direction:row;
        gap:10px;

        width:2em;
        height:2em;
        border-radius:50%;
        border:2px solid #fff;
        background-color:transparent;
     }
     .slick-prev{
        bottom:4em;
        right:7em;

        background: url('../assets/home/next-prev.svg') center no-repeat;
        background-size: 0.6em;
     }
     .slick-next{
        bottom:4em;
        right:2em;

        background: url('../assets/home/next-prev.svg') center no-repeat;
        background-size: 0.6em;
        transform: rotate(180deg);
     }
     .custom_paging{
        position: absolute;
        bottom: 3.5em;
        right: 4.7em;
     }
     .custom_paging li{
        display:none;
     }
     .custom_paging li.slick-active{
        display:flex;
        color:#fff;
     }
     .slide-bg{
        height: 80vh;
        width:100%;
        /* Parallax */
        background-attachment: fixed;
        background-position: center;
        background-repeat: no-repeat;
        background-size:cover !important;

        display:flex !important;
        justify-content: center ;
        align-items: flex-start;
        flex-flow: column wrap;
     }
     .slide-bg h2{
        color:#fff;
        font-weight:bold;
        letter-spacing: 1px;
        font-size:3em;
     }
     .slide-bg h3{
        color:#fff;
        margin:.2em
     }


     .slick-active .slide-bg h2, .slick-active .slide-bg h3{
        animation: fadeInUpSD 1s 1;
     }
     .inView{
      animation: fadeInUpSD 1s 1;
     }

      @keyframes fadeInUpSD {
        0% {
          opacity: 0;
          -webkit-transform: translateY(-100px);
          transform: translateY(-100px);
        }
      
        100% {
          opacity: 1;
          -webkit-transform: none;
          transform: none;
        }
      }

      .home-about{
        text-align: center;
        height:450px;
        display:flex;
        align-items: center;

        position:relative;
        overflow: hidden;
        background:url(../assets/home/goldngo-bg.png) center no-repeat;
        background-size:cover;
      }
      .elipse-1{
        position:absolute;
        top:30%;
        left:-100px;
        width:400px;
        height:400px;
        display:flex;
        background:url('../assets/home/elipsebanner.svg') center no-repeat;
        background-size:contain;
      }
      .elipse-2{
        position:absolute;
        bottom: -60%;
        right:100px;
        width:400px;
        height:400px;
        display:flex;
        background:url('../assets/home/elipsebanner.svg') center no-repeat;
        background-size:contain;
      }
      .home-about h2{
        font-size:3em;
        font-weight:700;
      }
      .home-about p{
        font-size:1.5em;
      }

      .video-home{
        display:flex;
        background:url('../assets/home/video.png') center no-repeat;
        background-size: cover;
        height:540px;

        background-color: rgba(0, 0, 0, 0.3); /* Tint color */
        background-blend-mode: multiply;
        margin-top:6em;
        margin-bottom:4em;
      }
      .video-home .container{
        position:relative;
        height:100%;
        flex-flow:column wrap;
        justify-content: center;
        display:flex;
      }
      .video-text{
        position: absolute;
        left:0px;
        bottom:3em;
        color:#fff;
      }
      .video-text h2{
        font-weight:bold;
        font-size:2.5em;
      }
      .video-text p{
        font-size:1.5em;
      }
      .play-button{
        width:10em;
        height:8em;
        background:url(../assets/home/play-button.svg) center no-repeat;
        background-size: contain;
        border: 0;
        margin: 0 auto;
        display: block;
      }

/*==============================
  Piel dorada, humectada y suave
  ==============================*/

  .piel-dorada-section{
    display:flex;
    flex-flow: row wrap;
    gap:2%;
    padding-top:2em;
    margin-top:2em;
    justify-content:space-evenly;
  }
  .piel-dorada-section img{
    width:55%;
    margin-bottom:-120px;
    z-index:10;
  }
  .piel-dorada-section .comprar{
    width:32%;
    display:flex;
    justify-content: center;
    flex-direction:column;
  }
  .piel-dorada-section .comprar h2{
    font-size:3em;
    font-weight:500;
    color: #492818;
  }
  .piel-dorada-section .comprar button{
    padding: .5em 2em;
    border-radius: 25px;
    background-color: #98694C;
    border:0;
    color:#fff;
    margin-top:1em;
    font-size:1.3em;
    transition: all .2s;
  }
  .piel-dorada-section .comprar button:hover{
    background-color:#492818
  }

/*============
  Modo de Uso
  ============*/

  .m-uso, .values{
    padding:3em 0;
    margin-bottom:2em;
  }
  .m-uso h2, .m-uso h3, .values h2, .values h3{
    text-align: center;
    /* text-transform: uppercase; */
    font-weight:bold;
    
  }
  .m-uso h2, .values h2{
    font-size:1.5em;
    margin-bottom:1.5em;
  }
  .m-uso h3, .values h3{
    font-size:1.5em;
    margin-top:1.5em;
    margin-bottom:1.5em;
  }
  .m-uso .container, .values .container{
    display:flex;
    flex-flow: row wrap;
    justify-content: space-between;
    text-align: center;
  }
  .m-uso .container div, .values .container div{
    width:30%;
  }
  .m-uso .number{
    font-weight: bold;
    font-size: 1.5em;
    background-color: #f8f0eb;
    border-radius: 50%;
    width: 3.5em;
    height: 3.5em;
    display: flex;
    margin: 0 auto;
    justify-content: center;
    align-items: center;
    margin-bottom:1.5em;
  }

/* ============
   Home Gallery
   ============*/

  .home-gallery{
    margin:6em 0 4em 0;
  }
  
  .home-gallery .container{
    column-count: 3;
    column-gap: 1em;
  }
  .home-gallery img{
    margin: 0 0 1em;
  }
/* ================
   Nuestros Valores
   ================*/
  .value-circle{
    font-weight: bold;
    font-size: 1.5em;
    background-color: antiquewhite;
    border-radius: 50%;
    width: 3.5em;
    height: 3.5em;
    display: flex;
    margin: 0 auto;
    justify-content: center;
    align-items: center;
    margin-bottom:1.5em;
  }
  .cruelty-free{
    background:url(../assets/home/cruelty-free.svg) center no-repeat;
    background-size:contain;
  }
  .values .reciclable{
    background:url(../assets/home/reciclable.svg) center no-repeat;
    background-size:contain;
  }
  .values .clean{
    background:url(../assets/home/clean.svg) center no-repeat;
    background-size:contain;
  }