@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Raleway:wght@300&display=swap');

.slider-button {
  position: fixed;
  top: 50%;
  background-color: rgba(0,0,0,0.01);
  color: white;
  border: none;
  font-size: 16px;
  cursor: none;
  transition: background-color 0.3s;
  z-index: 9999;
}

.arrow-right,
.arrow-left{
  display: block;
  width: 25px;
  height: 25px;
  border-top: 2px solid #fff;
  border-left: 2px solid #fff;
  background-color: rgba(0,0,0,0.01);
  z-index: 9999;
}
.arrow-right{
 transform: rotate(135deg);
 margin-right:10px;
 right:0;
}

.arrow-left{
 transform: rotate(-45deg);
 margin-left: 10px;
}

#slider {
  width: 100%;
  height: 100%;
  overflow: hidden;
  position: relative;
}


.slide {
  width: 100%;
  display: flex;
  position: absolute;
  opacity: 0;
  width: 100%;
  height: 100vh; 
  background-size: cover;
  margin-top:6rem;
  font-family: 'Raleway', sans-serif;
}


.text-overlay {
  position: absolute;
  top: 40%; 
  left: 50%; 
  transform: translate(-50%, -50%);
  text-align: center;
  color: white;
}

.text-overlay h2 {
  font-size: 4rem;  
  font-weight: bolder;
  margin-bottom: 1rem; 
  text-transform: uppercase;
}

.text-overlay p {
  font-size: 1.65rem; 
  word-wrap: break-word;
}

.text1{
  left: 20%;
  right: 45%;
}

.text2{
  top: 52%;
}

.text3 {
  left: 28%;
right: 27%;
}

.text3half{
  top: 65%;
}

.text4{
  top: 20%;
  left: 48%;
  transform: translate(-40%, -50%);
}

.text5{
  top: 55%;
}

.text6{
  top:60%;
}

.text6half{
  top:20%;
}

.text7{
  top:56%;
  left: 55%;
}

.text8{
  top: 20%;
} 
.text9{
  top: 58%;
}


.circle {
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: white;
}

header{
  cursor:pointer;
}
body{
  cursor:none;
  font-family: "proxima-nova",sans-serif
}

#circle-cursor {
  display: block;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 2px solid white;
  background-color: rgba(0, 0, 0, 0); 
  position: absolute;
  pointer-events: none;
  z-index: 9999;
}

#circle-cursor .left {
  display: none;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) rotate(135deg);
}

#circle-cursor .right {
  display: none;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) rotate(-45deg);
}

@media screen and (max-width:570px){
  .slide{
    padding-top: 5rem;
    background-size: contain;
    background-repeat: no-repeat;
  }

  .text1{
    left: 45%;
    top: 40%;
    right: 10%;
  }

  .text2{
    top: 40%;
  }

}

@media screen and (min-width: 570px) and (max-width: 770px){
  .slide{
    padding-top: 5rem;
    background-size: contain;
    background-repeat: no-repeat;
  }
  
  .text1{
    left: 45%;
    top: 50%;
    right: 10%;
  }
  
  .text2{
    top: 50%;
  }
  
  .text3 {
    left: 45%;
    right: 15%;
    top: 65%;
  }
  
  .text3half{
    top: 65%;
  }
  
  .text4{
    top: 22%;
    left: 48%;
    transform: translate(-40%, -50%);
  }
  
  .text5{
    top: 55%;
  }
  
  .text6{
    top:60%;
  }
  
  .text6half{
    top:20%;
  }
  
  .text7{
    top:56%;
    left: 55%;
  }
  
  .text8{
    top: 25%;
  } 
  .text9{
    top: 58%;
  }
}

@media screen and (min-width: 770px) and (max-width: 1024px){
  .slide{
    padding-top: 5rem;
    background-size: contain;
    background-repeat: no-repeat;
  }

  .text1{
    left: 45%;
    top: 60%;
    right: 10%;
  }

  .text2{
    top: 60%;
  }

  .text3 {
    left: 50%;
    right: 10%;
    top: 80%;
  }
}