@font-face {
  font-family: 'HK Grotesk';
  src: url('../assets/fonts/HKGrotesk/HKGrotesk-Regular.otf') format('truetype');
  font-weight: 400;
  font-style: normal;
}
@font-face {
  font-family: 'HK Grotesk';
  src: url('../assets/fonts/HKGrotesk/HKGrotesk-Medium.otf') format('truetype');
  font-weight: 500;
  font-style: normal;
}
@font-face {
  font-family: 'HK Grotesk';
  src: url('../assets/fonts/HKGrotesk/HKGrotesk-Bold.otf') format('truetype');
  font-weight: 700;
  font-style: normal;
}

@font-face {
  font-family: 'HK Grotesk';
  src: url('../assets/fonts/HKGrotesk/HKGrotesk-Light.otf') format('truetype');
  font-weight: 300;
  font-style: normal;
}

:root {
  --main-color: #F8F8F8;
  --green: #94E0EB;
  --orange:  #FFAF96;
  --purple: #E3BFFC;
  --distance: -4px;/*-12px; */
  --item-margin: 20px;/*-12px; */
  --hightlight-color: #FAC3C3;
  --font-family: "HK Grotesk";
}


html{

  padding:0px;
  margin:0px;
  overflow-x: hidden;

}
body{
  /*cursor: none; */
  width:100vw;
  height:100%;
  padding:0px;
  margin:0px;
  top:0px;
  -webkit-overflow-scrolling: touch;

   background-color: #fff;
}

main{
  position:absolute;
  z-index: -10;
  top:0px;
  left:0px;
  width:100%;
  height:100%;
}
div{
  font-weight: 300;
  line-height: 1.34rem;

}

::selection{
  color: black;
  background-color: var(--green);
}


.custom-cursor {
  position: fixed;
  opacity: 0;
  pointer-events: none;
  mix-blend-mode: difference;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background-color: white;
  transition: transform 350ms ease;
  transform: translate(-50%, -50%) scale(.3);
  z-index: 1000;
}
.custom-cursor--link {
  transform: translate(-50%, -50%) scale(1);
}


.noscroll::-webkit-scrollbar {
    display: none;
}

/* Hide scrollbar for IE, Edge and Firefox */
.noscroll {
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;  /* Firefox */
}
/*--------------------------------*/

.titles{
  margin-top:20vh;
}
.mtitle{
  font-family: var(--font-family);
  font-weight: 400;
  font-size: 3.5rem;
  line-height: 1.4;
  color: black;
  margin-top:20vh;
  position:relative;
  animation: waitFor 0.6s 0s, faceUpDown 2s 0.6s ;
  max-width:800px;
  animation-timing-function: ease-out;
  min-width:200px;
}
.ptitle{
  font-family: var(--font-family);
  font-weight: 400;
  font-size: 3.5rem;
  line-height: 1.4;
  color: black;
  margin-top:12rem;
  margin-bottom:10rem;
  position:relative;
}

.pdetails{
  font-family: var(--font-family);
  font-weight: 300;
}
.pdescription{
  font-size:1rem;
  font-family: var(--font-family);
  font-weight: 300;
  margin-top:2rem;
  margin-bottom:2rem;
  max-width:550px;
}

.mButton{
  position:relative;
  text-decoration: underline;

}
.mButton:hover{
  cursor:pointer;
}


.mButtonH{
  cursor:pointer;
  background-color: var(--hightlight-color);
  color: var(--hightlight-color);
  top:0px;
  left:0px;
  width:0;
  height:100%;
  /*transform-origin: center;
  transform: rotate(1deg); */
  transition: width 0.4s;
}

.mButton:hover .mButtonH{
  width:calc(100% + 8px);
  transition: width 0.4s;
}

.bottitle:hover{
  opacity: 0.7;
  transition: opacity 0.1s;
}

.clones{
  text-decoration: none;
  position: absolute;
  z-index:-1;
}



#floater{
  width:16px;
  height:16px;
  background-color: black;
}
.arrow{
  cursor:pointer;
  color: var(--green);
  margin-top:1rem;
  position:fixed;
  width:auto;
}
.arrow:hover svg path {
  fill: var(--green);
}


.bubbles{
  cursor:pointer;
  border: 2px solid black;
  font-family: var(--font-family);
  background-color: white;
  font-size:1.4rem;
  position:relative;

  display: flex;
  align-items: center;
  justify-content:center;
  font-weight: 400;

  animation: floating 30s infinite;

  right:-7rem;
  top:2rem;
  height:180px;
  width:180px;
  border-radius:180px;
  margin:1rem;
  margin-right:2rem;
}

.tinyB{
  right:2rem;
  top:5rem;
  margin-right:2rem;
  height:140px;
  width:140px;
  animation: floatingTiny 25s 0.4s infinite;

}


.bubbles:hover{
  background-color:black;
  color:white;
  transform: rotate();
  animation-play-state: paused;
}

@keyframes floating {
    0% { transform: translate(0,  0px) rotate(0deg); }
    50%  {
      transform: translate(0, 100px) rotate(30deg);
    } /* -15*/
    100%   {
      transform: translate(0, -0px) rotate(0deg);
   }
}
@keyframes floatingTiny {
    0% { transform: translate(0,  0px) rotate(0deg); }
    50%  {
      transform: translate(0, 80px) rotate(-40deg);
    } /* -15*/
    100%   {
      transform: translate(0, -0px) rotate(0deg);
   }
}
/*----------------------------------------------------------------------------ABOUT*/
/*----------------------------------------------------------------------------*/
/*----------------------------------------------------------------------------*/
.aboutTextBox{
  font-family: var(--font-family);
  font-size:1rem;
  margin-top:2rem;
}

.aboutText{
  max-width:500px;
}

.aboutTextCont{
  margin-bottom: 6rem;
  max-width: 700px;
}

.aboutTextTitle{
  font-weight: 400;
  font-size: 1.4rem;
  position: relative;
  bottom:0.13rem; /* 0.4rem**/
  min-width:180px;
  margin-bottom:0.8rem;
}
.aboutText{
  min-width:350px;
}
.aboutcol{
  min-width:100px;
  margin-bottom:1rem;
}
.smoltitle{
  font-weight: 400;
}

.viewerPDF{
  position:fixed;
  width:100vw;
  height:100vh;
  z-index: 6;
  background-color:black;
  opacity:1;
  top:0px;
  left:0px;
  background-color: rgb(100,100,100,0.5);
  display:flex;
  justify-content: center;
  align-items: center;

}
.viwerPDF iframe{
  opacity:1;
  width:80%;
  height:80%;
}
/*----------------------------------------------------------------------------CONTACT*/
/*----------------------------------------------------------------------------*/
/*----------------------------------------------------------------------------*/
.contactTextCont{
  margin-bottom:0.8rem;
}

.contactTextTitle{
  font-weight: 400;
  font-size: 1.4rem;
  position: relative;
  bottom:0.13rem; /* 0.4rem**/
  min-width:180px;
    margin-bottom:1.2rem;
}

.contacticonCont{
  display: flex;
  flex-direction: row;
}
.contacticon img{
  width:28px;
}
.contacticon {
  margin-right:1rem;
}
.contacticon:hover{
  opacity:0.5;
}

#contact-form{
  position:relative;
  outline: 1px solid black;
  border-radius: 16px;
  min-width:280px;
  max-width:480px;
  height:200px;
  box-sizing: border-box;
  margin-top:0.4rem;
}

#contact-form:focus-within {
  outline: 2px solid var(--green);
}

#send{
  position:absolute;
  bottom:12px;
  right:16px;
  text-decoration: none;
  background-color: white;
  border: 1px solid black; border-radius:50px;
  padding:6px; padding-right:20px; padding-left:20px;
  cursor:pointer;
}
#send:hover{
  background-color:black;
  color:white;
}
.messageBox{
  color:black;
  font-family: var(--font-family);
  font-size:1rem;
  font-weight: 300;
  position: relative;
  width:calc(100% - 40px);
  border:none;
  resize: none;
  padding:8px;
    padding-left:20px;
    padding-right:20px;
    background-color:transparent;
}
.messageBox::placeholder{
  color: rgb(210,210,210);
}
.messageBox:focus {
  outline: none;
}

#messageCont{
  margin-top:80px;
}
#namemessage{
  border-bottom: 1px solid rgb(220,220,220);
}

/*----------------------------------------------------------------------------*/
/*----------------------------------------------------------------------------*/
/*----------------------------------------------------------------------------*/

.notes{
  background-color: black;

}
/*----------------------------------------------------------------------------*/
/*----------------------------------------------------------------------------*/
/*----------------------------------------------------------------------------*/
.links{
  color:black;
  font-weight: 700;
}
.links:hover{
  color: var(--purple);
}

.textHyp{
}
.initText{
    /*height:50vh; */
    min-height:35vw;
}

.buttonContainer{
  box-sizing:border-box;
  height:auto;
  position:relative;
  margin-top:1.3rem;
}
.button{
  text-decoration: none;
  color:black;
  font-family: var(--font-family);
  font-weight:300;
  font-size: 0.98rem;
  background-color: white;
  border: 1px solid black; border-radius:50px;
  padding:6px; padding-right:16px; padding-left:16px;
  cursor:pointer;
  margin-top:1rem;
  margin-right:1rem;
  box-sizing:border-box;
  text-transform: uppercase;
}

.button:hover{
  background-color: black;
  color:white;
}