html,
body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  overflow-x: hidden;
  all: unset;
}
a {
  all: unset;
}

h1 {
    all: unset;
}

h2 {
    all: unset;
}

p {
     all: unset; 
}



button,
input[type="submit"] {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;

  border: none;
  background: none;
  padding: 0;
  margin: 0;



  outline: none;
  box-shadow: none;
}

input {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;

  border: none;
  outline: none;
  background: none;

  box-shadow: none;
}

@font-face {
    font-family: 'Inter';
    src: url('fonts/Inter_18pt-Thin.ttf') format('truetype');
}

@font-face {
    font-family: 'InterBold';
    src: url('fonts/Inter_18pt-Regular.ttf') format('truetype');
}



.banner {
  position: relative;
  width: 100vw;
  height: 56vw;
  padding: 0;
  margin: 0;
}

.layer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* Bottom layer */
.background {
  z-index: 1;

}



/* Top layer */
.top {
  z-index: 3;
 
}

.background-image {
  display: block;
  width: 100vw;
  object-fit: scale-down;
}
.necklace {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 100vw;
  object-fit: scale-down;
  z-index: 999;
  pointer-events: none;
}
.learn-more {
    position: absolute;
  top: 28vw;         
  left: 6vw;
  width: 10vw;
  height: 10vw;
  font-family: 'Inter', sans-serif;
  font-size: 1.5vw;
  color: #468ff9;
  text-decoration: underline;
  text-decoration-thickness: 0.5px;
  text-underline-offset: 4px;
  opacity: 0;
  
}

.learn-more:hover {
    position: absolute;
  top: 28vw;         
  left: 6vw;
  font-family: 'Inter', sans-serif;
  font-size: 1.5vw;
  color: #00327e;
  text-decoration: underline;
  text-decoration-thickness: 0.5px;
  text-underline-offset: 4px;
  cursor: pointer;
}

.power-button {
    position: absolute;
    opacity: 0;
    top: 45vw;  
    left: 73.2vw;
     filter: drop-shadow(1px 1px 1px rgba(0, 0, 0, 0.0));
    width: 4.5vw;
 transition:
        transform 0.3s ease,
        filter 0.3s ease,
        opacity 0.3s ease;

        animation: float1 2s ease-in-out infinite;
        
}
@keyframes float1 {
    0% {
        transform: translateY(0);
    }

  
    35% {
        transform: translateY(-0.5vw); 
    }

    70% {
        transform: translateY(0);
    }

    100% {
        transform: translateY(0);
    }
}
@keyframes float2 {
    0% {
        transform: translateY(0);
    }

  
    41% {
        transform: translateY(-0.5vw); 
    }

    76% {
        transform: translateY(0);
    }

    100% {
        transform: translateY(0);
    }
}
@keyframes float3 {
    0% {
        transform: translateY(0);
    }

  
    47% {
        transform: translateY(-0.5vw); 
    }

    82% {
        transform: translateY(0);
    }

    100% {
        transform: translateY(0);
    }
}
@keyframes float4 {
    0% {
        transform: translateY(0);
    }

  
    53% {
        transform: translateY(-0.5vw); 
    }

    88% {
        transform: translateY(0);
    }

    100% {
        transform: translateY(0);
    }
}
@keyframes float5 {
    0% {
        transform: translateY(0);
    }

  
    59% {
        transform: translateY(-0.5vw); 
    }

    94% {
        transform: translateY(0);
    }

    100% {
        transform: translateY(0);
    }
}
/* Desktop hover */
.power-button:hover {
    transform: scale(1.1);

    filter: drop-shadow(1px 1px 1px rgba(0, 0, 0, 0.0));
}

/* Mobile tap */
.power-button:active {
    transform: scale(1.08);

    filter: drop-shadow(0px 6px 12px rgba(0, 0, 0, 0.45));
}
.speaker {
    position: absolute;
    top: 40vw;  
    left: 79.2vw;
     filter: drop-shadow(1px 1px 1px rgba(0, 0, 0, 0.0));
    width: 3.8vw;
 transition:
        transform 0.3s ease,
        filter 0.3s ease,
          opacity 0.3s ease;
          opacity: 0;
        animation: float2 2s ease-in-out infinite;
}
/* Desktop hover */
.speaker:hover {
    transform: scale(1.1);

    filter: drop-shadow(1px 1px 1px rgba(0, 0, 0, 0.0));
}

/* Mobile tap */
.speaker:active {
    transform: scale(1.08);

    filter: drop-shadow(0px 6px 12px rgba(0, 0, 0, 0.45));
}
.voice {
    position: absolute;
    top: 35vw;  
    left: 83.5vw;
     filter: drop-shadow(1px 1px 1px rgba(0, 0, 0, 0.0));
    width: 3vw;
   transition:
        transform 0.3s ease,
        filter 0.3s ease,
          opacity 0.3s ease;
          opacity: 0;
        animation: float3 2s ease-in-out infinite;

}
/* Desktop hover */
.voice:hover {
    transform: scale(1.1);

    filter: drop-shadow(1px 1px 1px rgba(0, 0, 0, 0.0));
}

/* Mobile tap */
.voice:active {
    transform: scale(1.08);

    filter: drop-shadow(0px 6px 12px rgba(0, 0, 0, 0.45));
}
.cardiogram {
    position: absolute;
    top: 30vw;  
    left: 87.5vw;
     filter: drop-shadow(1px 1px 1px rgba(0, 0, 0, 0.0));
    width: 2.9vw;
       transition:
        transform 0.3s ease,
        filter 0.3s ease,
          opacity 0.3s ease;
          opacity: 0;
        animation: float4 2s ease-in-out infinite;


}
/* Desktop hover */
.cardiogram:hover {
    transform: scale(1.1);

    filter: drop-shadow(1px 1px 1px rgba(0, 0, 0, 0.0));
}

/* Mobile tap */
.cardiogram:active {
    transform: scale(1.08);

    filter: drop-shadow(0px 6px 12px rgba(0, 0, 0, 0.45));
}
.location {
    position: absolute;
    top: 24vw;  
    left: 89.5vw;
     filter: drop-shadow(1px 1px 1px rgba(0, 0, 0, 0.0));
    width: 3.1vw;
       transition:
        transform 0.3s ease,
        filter 0.3s ease,
          opacity 0.3s ease;
          opacity: 0;
    animation: float5 2s ease-in-out infinite;

}
/* Desktop hover */
.location:hover {
    transform: scale(1.1);

    filter: drop-shadow(1px 1px 1px rgba(0, 0, 0, 0.0));
}

/* Mobile tap */
.location:active {
    transform: scale(1.08);

    filter: drop-shadow(0px 6px 12px rgba(0, 0, 0, 0.45));
}
.logoSection {
    position: absolute;
    top: 2.7vw;
    left: 50vw;
    transform: translateX(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px; /* spacing between the logos */
 fill: #4da6ff;
 cursor: pointer;
}
.textLogo {
    width: 9vw;
    
}
.imageLogo {
    width: 2.5vw;
}


.navBar {
      position: absolute;
  top: 2.7vw;          /* 30% down from top */

  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px; /* spacing between the logos */
  padding-left: 10vw;
  padding-right: 10vw;

}
.contactUs {


    position: absolute;
    top: 3vw;
    left: 9vw;
font-size: 1.5vw;

  font-family: 'Inter', sans-serif;
  
  color: gray;
  opacity: 0.6;
  cursor: pointer;
    transition:
    transform 0.2s ease,
    opacity 0.2s ease;
}

.contactUs:hover {


  font-family: 'Inter', sans-serif;
  
  color: gray;
  opacity: 1;
  cursor: pointer;
  transform: scale(1.03);
  
}


.joinTheWaitlist {

      position: absolute;
    top: 3vw;
    left: 25vw;
font-size: 1.5vw;
  font-family: 'Inter', sans-serif;

  color: gray;
  opacity: 0.6;
    cursor: pointer;
    transition:
    transform 0.2s ease,
    opacity 0.2s ease;
}

.joinTheWaitlist:hover {


  font-family: 'Inter', sans-serif;
  
  color: gray;
  opacity: 1;
  cursor: pointer;
  transform: scale(1.03);
  
}

.investors {


          position: absolute;
    top: 3vw;
    left: 65vw;
font-size: 1.5vw;
  font-family: 'Inter', sans-serif;

  color: gray;
  opacity: 0.6;
      cursor: pointer;
    transition:
    transform 0.2s ease,
    opacity 0.2s ease;
}

.investors:hover {


  font-family: 'Inter', sans-serif;

  color: gray;
  opacity: 1;
  cursor: pointer;
  transform: scale(1.03);
  transform: translateX(-0.1vw);
}


.careers {

              position: absolute;
    top: 3vw;
    left: 82vw;
font-size: 1.5vw;

  font-family: 'Inter', sans-serif;

  color: gray;
  opacity: 0.6;
        cursor: pointer;
    transition:
    transform 0.2s ease,
    opacity 0.2s ease;


}

.careers:hover {


  font-family: 'Inter', sans-serif;

  color: gray;
  opacity: 1;
  cursor: pointer;
  transform: scale(1.03);
  transform: translateX(-0.1vw);
}



.batteryIcon {
    position: absolute;
    top: 221vw;  
    left: 63vw;
     filter: drop-shadow(0px 0px 1px rgba(0, 0, 0, 0.2));
    width: 7vw;
             transition:
        transform 0.3s ease,
        filter 0.3s ease;
      animation: jump4 2s ease-in-out infinite;
        

}
.signalIcon {
    position: absolute;
    top: 194vw;  
    left: 66vw;
    filter: drop-shadow(0px 0px 1px rgba(0, 0, 0, 0.2));
    width: 7vw;
             transition:
        transform 0.3s ease,
        filter 0.3s ease;
    animation: jump3 2s ease-in-out infinite;
       

}
.healthIcon {
    position: absolute;
    top: 200.5vw;  
    left: 22vw;
     filter: drop-shadow(0px 0px 1px rgba(0, 0, 0, 0.2));
    width: 7vw;
             transition:
        transform 0.3s ease,
        filter 0.3s ease,
        scale 0.2s ease;
        
        animation: jump2 2s ease-in-out infinite;

}


.speakerIcon {
    position: absolute;
    top: 228vw;  
    left: 32.5vw;
    filter: drop-shadow(0px 0px 1px rgba(0, 0, 0, 0.2));
    width: 7vw;
             transition:
        transform 0.3s ease,
        filter 0.3s ease;
    
       animation: jump1 2s ease-in-out infinite;

}

@keyframes jump1 {
    0% {
        transform: translateY(0);
    }

    60% {
        transform: translateY(0);
    }

    80% {
        transform: translateY(-1vw); /* jumps upward */
    }

    100% {
        transform: translateY(0);
    }
}

@keyframes jump2 {
    0% {
        transform: translateY(0);
    }

    55% {
        transform: translateY(0);
    }

    75% {
        transform: translateY(-1vw); /* jumps upward */
    }

    95% {
        transform: translateY(0);
    }

    100% {
        transform: translateY(0);
    }
}

@keyframes jump3 {
    0% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(0);
    }

    70% {
        transform: translateY(-1vw); /* jumps upward */
    }

    90% {
        transform: translateY(0);
    }

    100% {
        transform: translateY(0);
    }
}

@keyframes jump4 {
 

    0% {
        transform: translateY(0);
    }

      45% {
        transform: translateY(0);
    }

    65% {
        transform: translateY(-1vw); /* jumps upward */
    }

    85% {
        transform: translateY(0);
    }

    100% {
        transform: translateY(0);
    }
}

.sixMonths {

        position: absolute;
    top: 222vw;  
    left: 55.6vw;
    
   
    padding: 5vw;
             transition:
        transform 0.3s ease,
        filter 0.3s ease;
    
  font-family: 'Inter', sans-serif;
  font-size: 1.5vw;
  color: #4da6ff;
   filter: blur(3px);
}
.independentNetwork {
   
        position: absolute;
    top: 195vw;  
    left: 57.3vw;
    
   padding: 5vw;
             transition:
        transform 0.3s ease,
        filter 0.3s ease;
    
  font-family: 'Inter', sans-serif;
  font-size: 1.5vw;
  color: #4da6ff;
   filter: blur(3px);

}

.healthMonitoring {

            position: absolute;
    top: 201.5vw;  
    left: 1vw;
    
   width: 40vw;
  padding: 5vw;
   text-align: center;

             transition:
        transform 0.3s ease,
        filter 0.3s ease;
    
  font-family: 'Inter', sans-serif;
  font-size: 1.5vw;
  color: #4da6ff;
   filter: blur(3px);


}


.liveVoiceCalls {

                position: absolute;
    top: 228.9vw;  
    left: 26vw;
    
    padding: 5vw;
        text-align: center;
   
             transition:
        transform 0.2s ease,
        filter 0.2s ease;
    
  font-family: 'Inter', sans-serif;
  font-size: 1.5vw;
  color: #4da6ff;
   filter: blur(3px);

}



.textBoxPopUp {

      pointer-events: none;

                    position: absolute;
    top: 173.5vw;  
    left: 55vw;
    
   
             transition:
        transform 0.3s ease,
        filter 0.3s ease,
        opacity 0.2s ease;
    
        opacity: 0;
  font-family: 'Inter', sans-serif;
  font-size: 1.3vw;
  color: rgb(152, 152, 152);
   width: 20vw;

  background-color: rgba(255, 255, 255, 0.71);



box-shadow:
  inset 0 1px 1px rgba(255,255,255,0.7),
  inset 0 1px 1px rgba(255,255,255,0.15),
  0 1px 1px rgba(77,166,255,0.35);

border: 1px solid rgba(255,255,255,0.25);
    border-radius: 3vw; 
    padding: 1.5vw;
}

.bold {

      font-family: 'InterBold', sans-serif;

}


.joinCallToAction {

                        position: absolute;
    top: 73vw;  
    left: 6vw;
    width: 90vw;

    font-size: 3vw;
    font-family: 'Inter', sans-serif;
    color: #4da6ff;
}

.textUnderCallToAction {
                            position: absolute;
    top: 78vw;  
    left: 6vw;
    width: 90vw;

    font-size: 2vw;
    font-family: 'Inter', sans-serif;
    color: #4da6ff;
}

.preparing {
        position: absolute;
    top: 81.5vw;  
    left: 6vw;
    width: 90vw;

    font-size: 1.5vw;
    font-family: 'Inter', sans-serif;
    color: #acacac;
}

.firstName {

            position: absolute;
    top: 88vw;  
    left: 6vw;
    width: 12vw;
    height: 3vw;
    border-radius: 2vw;
      border: 0.2vw solid #b8b8b8;
      padding: 1vw;
     transition: 
     box-shadow 0.3s ease,
     border 0.3s ease;

    font-size: 1.5vw;
    font-family: 'Inter', sans-serif;
    color: #4c4c4c;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.0);
    

}
.firstName::placeholder {
  color: gray;
}
.firstName:focus {

            position: absolute;
    top: 88vw;  
    left: 6vw;
    width: 12vw;
    height: 3vw;
    border-radius: 2vw;
      border: 0.2vw solid #4da6ff;
      padding: 1vw;
     transition: 0.2s ease;
    font-size: 1.5vw;
    font-family: 'Inter', sans-serif;
    color: #4c4c4c;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    

}
.lastName {

            position: absolute;
    top: 88vw;  
    left: 21vw;
    width: 12vw;
    height: 3vw;
    border-radius: 2vw;
      border: 0.2vw solid #b8b8b8;
      padding: 1vw;
     transition: 
     box-shadow 0.3s ease,
     border 0.3s ease;

    font-size: 1.5vw;
    font-family: 'Inter', sans-serif;
    color: #4c4c4c;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.0);
    

}
.lastName::placeholder {
  color: gray;
}
.lastName:focus {

            position: absolute;
    top: 88vw;  
   left: 21vw;
    width: 12vw;
    height: 3vw;
    border-radius: 2vw;
      border: 0.2vw solid #4da6ff;
      padding: 1vw;
     transition: 0.2s ease;
    font-size: 1.5vw;
    font-family: 'Inter', sans-serif;
    color: #4c4c4c;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    

}

.email {

            position: absolute;
    top: 88vw;  
    left: 36vw;
    width: 24vw;
    height: 3vw;
    border-radius: 2vw;
      border: 0.2vw solid #b8b8b8;
      padding: 1vw;
     transition: 
     box-shadow 0.3s ease,
     border 0.3s ease;

    font-size: 1.5vw;
    font-family: 'Inter', sans-serif;
    color: #4c4c4c;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.0);
    

}
.email::placeholder {
  color: gray;
}
.email:focus {

            position: absolute;
    top: 88vw;  
   left: 36vw;
    width: 24vw;
    height: 3vw;
    border-radius: 2vw;
      border: 0.2vw solid #4da6ff;
      padding: 1vw;
     transition: 0.2s ease;
    font-size: 1.5vw;
    font-family: 'Inter', sans-serif;
    color: #4c4c4c;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    

}

.submit {
    position: absolute;
    top: 88vw;  
    left: 63vw;

    width: 28vw;
    height: 5.25vw;

    border-radius: 2vw;
    

    padding: 1vw;

    transition: 0.2s ease;

    font-size: 2vw;
    font-family: 'Inter', sans-serif;
    color: #ffffff;

    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);

    background: linear-gradient(90deg, #bfe3ff 0%, #4da6ff 100%);
}
.submit:hover {
    position: absolute;
    top: 88vw;  
    left: 63vw;

    width: 28vw;
    height: 5.25vw;

    border-radius: 2vw;
    cursor: pointer;

    padding: 1vw;

    transition: 0.2s ease;

    font-size: 2vw;
    font-family: 'Inter', sans-serif;
    color: #ffffff;

    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);

    background: linear-gradient(90deg, #bfe3ff 0%, #4da6ff 100%);
}

.successMsg {

    opacity: 0;
        position: absolute;
    top: 95vw;  
    left: 6vw;

   
    height: 5.25vw;

 
    
    transition: opacity 0.2s ease;
    

    

    font-size: 2vw;
    font-family: 'Inter', sans-serif;
    color: #00c334;


}

.capabilities {

           position: absolute;
    top: 189vw;  
    left: 50vw;

   transform: translateX(-50%);
   
    height: 5.25vw;

 
    
    transition: opacity 0.2s ease;
    
    color: rgb(41, 41, 41);

    opacity: 1;

    font-size: 2vw;
    font-family: 'Inter', sans-serif;
    


}

.howItWorks {

           position: absolute;
    top: 105vw;  
    left: 6vw;

  
   
    height: 5.25vw;

 
    
    transition: opacity 0.2s ease;
    
    color: rgb(41, 41, 41);

    opacity: 1;

    font-size: 2vw;
    font-family: 'Inter', sans-serif;

}

.missionTitle {
   
               position: absolute;
    top: 260vw;  
    left: 6vw;

   
   
    height: 5.25vw;

 
    
    transition: opacity 0.2s ease;
    
    color: #4da6ff;

    opacity: 1;

    font-size: 3vw;
    font-family: 'Inter', sans-serif;

}



.emptyForPositiongScroll {

               position: absolute;
    top: 60vw;  
    left: 50vw;


    width: 100px;
    height: 100px;
    background-color: transparent;
}



.missionBody {

                   position: absolute;
    top: 268vw;  
    left: 6vw;

    
   
    height: 5.25vw;
    width: 80vw;
 
    
    transition: opacity 0.2s ease;
    
    color: #4da6ff;

    opacity: 1;

    font-size: 2.5vw;
    font-family: 'Inter', sans-serif;


}

.BattleTitle {
       
               position: absolute;
    top: 280vw;  
    left: 6vw;

   
   
    height: 5.25vw;

 
    
    transition: opacity 0.2s ease;
    
    color: rgb(168, 0, 0);

    opacity: 1;

    font-size: 3vw;
    font-family: 'InterBold', sans-serif;
}

.battleBody {

                       position: absolute;
    top: 290vw;  
    left: 6vw;

   
   
    height: 5.25vw;
    width: 80vw;
 
    
    transition: opacity 0.2s ease;
    
    color: rgb(168, 0, 0);

    opacity: 1;

    font-size: 2.5vw;
    font-family: 'Inter', sans-serif;



}


.saChart {

                       position: absolute;
    top: 310vw;  
    left: 6vw;
    width: 80vw;
 
  

}

.endingTitle {

                   position: absolute;
    top: 370vw;  
    left: 6vw;

   
   
    height: 5.25vw;

 
    
    transition: opacity 0.2s ease;
    
    color: white;

    opacity: 1;

    font-size: 3vw;
    font-family: 'InterBold', sans-serif;


}
.endingBody {

                           position: absolute;
    top: 376vw;  
    left: 6vw;

   
   
    height: 5.25vw;
    width: 80vw;
 
    
    transition: opacity 0.2s ease;
    
    color: white;

    opacity: 1;

    font-size: 2.5vw;
    font-family: 'Inter', sans-serif;


}

.endingEmail {
                              position: absolute;
    top: 392vw;  
    left: 6vw;

   
   
    height: 5.25vw;
    width: 80vw;
 
    
    transition: opacity 0.2s ease;
    
    color: white;

    opacity: 1;

    font-size: 2vw;
    font-family: 'InterBold', sans-serif; 
}

.endingName {
                              position: absolute;
    top: 397vw;  
    left: 6vw;

   
   
    height: 5.25vw;
    width: 80vw;
 
    
    transition: opacity 0.2s ease;
    
    color: white;

    opacity: 1;

    font-size: 2vw;
    font-family: 'InterBold', sans-serif; 
}

.endingRole {
     position: absolute;
    top: 402vw;  
    left: 6vw;

   
   
    height: 5.25vw;
    width: 80vw;
 
    
    transition: opacity 0.2s ease;
    
    color: white;

    opacity: 1;

    font-size: 2vw;
    font-family: 'InterBold', sans-serif; 
}

.footer {
     position: absolute;
    top: 367vw;  
    width: 100vw;
    height: 45vw;
    background-color: #4da6ff;
    z-index: -1;
}

.rightReserved {
         position: absolute;
    top: 420vw;  
    left: 50vw;

   transform: translateX(-50%);
   
    height: 5.25vw;
    
 
    
    transition: opacity 0.2s ease;
    
    color: black;

    opacity: 1;

    font-size: 1.5vw;
    font-family: 'Inter', sans-serif; 
}

.topWhite {
            position: absolute;
    top: 0;  
    left: 0; 
    width: 100vw;
    height: 7vw;
    background-color: white;
    opacity: 1;
}


.firstSentance {

             position: absolute;
    top: 37vw;  
    left: 6vw;

 
   
    
    
 
    
    transition: opacity 0.2s ease;
    
    color: rgb(72, 72, 72);

    opacity: 0;

    font-size: 1.8vw;
    font-family: 'Inter', sans-serif; 


}
.secondSentance {

             position: absolute;
    top: 40vw;  
    left: 6vw;

 
   
    
    
 
    
    transition: opacity 0.2s ease;
    
    color: rgb(72, 72, 72);

    opacity: 0;

    font-size: 1.8vw;
    font-family: 'Inter', sans-serif; 


}
.thirdSentance {

             position: absolute;
    top: 43vw;  
    left: 6vw;

 
   
    
    
 
    
    transition: opacity 0.2s ease;
    
    color: rgb(72, 72, 72);

     opacity: 0;

    font-size: 1.8vw;
    font-family: 'Inter', sans-serif; 


}

.more {

                 position: absolute;
    top: 46vw;  
    left: 6vw;

 
   
    
    
 
    
    transition: opacity 0.2s ease;
    
    color: #4da6ff;

     opacity: 0;

    font-size: 2.5vw;
    font-family: 'Inter', sans-serif; 


}

.bell {
   
                position: absolute;
    top: 147vw;  
    left: 57vw;

   width: 6vw;

    animation: ring 2s ease-in-out infinite;

}

@keyframes ring {
    0% {
        transform: rotate(0deg);
    }

    60% {
        transform: rotate(0deg);
    }

    65% {
        transform: rotate(-10deg);
    }

    70% {
        transform: rotate(10deg);
    }
       75% {
        transform: rotate(-10deg);
    }

    80% {
        transform: rotate(10deg);
    }
      85% {
        transform: rotate(0deg);
    }
}


.arrowDown {


                   position: absolute;
    top: 46vw;  
    left: 20vw;

   width: 4vw;

   opacity: 0;

    transition: opacity 0.2s ease;

        animation: pointDown 4s ease-in-out infinite;

}

@keyframes pointDown {
   
    50% {
         transform: translateY(0vw);
    }

     60% {
         transform: translateY(1vw);
    }
      70% {
         transform: translateY(0);
    }

     80% {
         transform: translateY(1vw);
    }
     90% {
        transform: translateY(0vw);
    }

  
}

.titlePage {

       color: #000000;

       position: absolute;
     
    top: 10vw;
    left: 10vw;
    
    font-size: 2.5vw;
    font-family: 'Inter', sans-serif; 


}

.page {
    background-color: #d9ecff;
}

.bodyPage {
   
    
       color: #000000;

     
       position: absolute;
     
    top: 15vw;
    left: 10vw;
    font-size: 1.8vw;
    font-family: 'Inter', sans-serif; 

}