html, body{ 
  scroll-behavior: smooth;

}

:root{
  --b1: #242424;
  --b2: #121212;
  --b3: #1D1D1D;
  --w1: #E9E9E9;
  --y1: #FFE451;
  --y2: #FFCE11;
  --y3: #EDBC00;
  --g1: #0B222A;

  --one1: #F8B837;
  --one2: #424243;
  --one3: #00B2AC;
  --one4: #F1F1F1;
}

.max-w-9xl{
  max-width: 100rem;
}

.text-shadow{
  text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.20);
}


.hero-bg{
  position: absolute;
  height: calc(100vh - 80px);
  width: 100%;
  background-repeat: no-repeat;
  background-size: cover;
}

.oops-img{
  background-image: url("../img/slide1.webp");
}
.ouch-img{
  background-image: url("../img/slide2.webp");
}
.omg-img{
  background-image: url("../img/slide3.webp");
}
.yeah-img{
  background-image: url("../img/slide4.webp");
}

.reminder{
  background-image: url("../img/iStock-1207203441_gradient_inverted.jpg");
  min-height: calc(50vh);
  background-repeat: no-repeat;
  background-size: cover;
}


.bg-y1{
  background-color: var(--one1);
}

.color-g1{
  color: var(--one2);
}

.one3{
  color: var(--one3);
}

.one4{
  background-color: var(--one4);
}

.one5{
  background-color: var(--one3);
}

.round-b{
  border-radius: 0 0 100px 100px;
}
 
#before{
  top: 24vw;
}

#after{
  right: 0;
  top: 24vw;
}

@media(max-width: 410px){
  .zoom-min { 
    zoom: 0.9; 
    -moz-transform: scale(0.8); 
    -moz-transform-origin: 0 0;
  }
}


@media (min-width: 600px){
  .wvar{
    width: 28% !important;
  }
}

@media (min-width: 760px){
  .wvar{
    width: 28% !important;
  }
}

@media (min-width: 1540px){

  .max-w-var{
    max-width: 105rem !important;
  }

  .wvar{
    width: 37% !important;
  }

}

@media (min-width: 1921px){
  .zoom { 
    zoom: 1.2; 
    -moz-transform: scale(1.2); 
    -moz-transform-origin: 0 0;
  }
  #before{
    top: 20vw !important;
  }
  
  #after{
    top: 20vw !important;
  }
}

@media (min-width: 2540px){
  .zoom { 
    zoom: 1.5; 
    -moz-transform: scale(1.5); 
    -moz-transform-origin: 0 0;
  }
  #before{
    top: 15vw !important;
  }
  
  #after{
    top: 15vw !important;
  }
}

@media (min-width:3840px){
  .zoom { 
    zoom: 2.2; 
    -moz-transform: scale(2.2); 
    -moz-transform-origin: 0 0;
  }
  #before{
    top: 10vw !important;
  }
  
  #after{
    top: 10vw !important;
  }
}

@media (max-width: 860px){
  #before{
    top: 60vw !important;
  }
  
  #after{
    top: 60vw !important;
  }
}

@media (max-width: 900px){
  #before{
    top: 50vw !important;
  }
  
  #after{
    top: 50vw !important;
  }
}

@media (max-width: 1200px){
  #before{
    top: 60vw !important;
  }
  
  #after{
    top: 60vw !important;
  }

  .oops-img, .ouch-img, .omg-img, .yeah-img{
    background-position: center;
  }

}

@media (max-width: 760px){
  .round-b{
    border-radius: 0 0 30px 30px;
  }
  .oops-img{
    background-position: center !important;
    background-image: url("../img/mobile-slide1.jpg");
  }
  .ouch-img{
    background-image: url("../img/mobile-slide2.jpg");
  }
  .omg-img{
    background-image: url("../img/mobile-slide3.jpg");
  }
  .yeah-img{
    background-image: url("../img/mobile-slide4.jpg");
  }
  .hero-bg{
    height: calc(100vh - 55px) !important;
  }
  .reminder{
    background-position: center;
  }
}

@media(max-width: 370px){
  .btn-hid{
    display: none;
  }
}

@media (min-width: 1280px) { 
  .var-top{
    top: 14% !important;
  }
}

@media (min-width: 1560px) { 
  .var-top{
    top: 20% !important;
  }
}