*{
 margin: 0;
 padding: 0;
} 

body{
 background-color: #FFFFFF;
 height: auto;
 width: 100%;
}

h1{
    height: 3vw;
    min-height: 30px;
    display: flex;
    align-items: center;
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    font-size: 2vw;
    background-color: rgba(105,105,105,0.3);
    color:#fffdfd;
    text-align: left;
    padding-left: 2vw;
    padding-bottom: 1vw;
    padding-top: 0.5vw;
    gap: 10px;
    width: 100%;
    position: fixed;
    top: 0%;
   left: 0%;
   right: 0%;
   flex-wrap: nowrap;
   z-index: 2;
  
}

.explore {height: 4vw;
  min-height: 40px;
width: 30vw;
text-align: center;
color: #fffdfd;
font-family: sans-serif;
font-size: 20px;
padding: 3px;
background-color: rgb(0, 0, 246);
margin: 20px;
border-radius: 30px;
border: 3px solid transparent;
transition: border-color 0.1s ease-in, background-color 0.1s ease-in;
z-index: 1;

animation: reveal both;
animation-duration: 1s;
}

@keyframes reveal {
  from {
    translate: 0 100px;
    opacity: 0;
  }

  to {
    translate: 0 0px;
    opacity: 1;
  }
}

.logo {width: 3vw;
 height: auto;
 max-height: 3vw;
 z-index: 1;
}

.background { 
position: absolute;
top:0%;
left:0%;
height: 100%;
width: 100%;
max-width: 2000px;
z-index: -1;
}

.hero-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex-wrap: nowrap;
  align-content: space-evenly;
  position: absolute;
  top:50%;
  left: 50%;
  transform: translate(-50%, -50%);
  max-height: 100%;
  max-width: 80%;
  
}
.tagline1 {
    font-family:'Inter', 'Helvetica Neue', Arial, sans-serif;
    color:rgb(58, 53, 53);
    font-size:4vw;
    max-width: 80vw;
    height: auto;
    white-space: nowrap;
    margin-top: 100px;
    z-index: -1;
    
    
}

.or { 
    font-family:'Caveat', cursive, sans-serif;
    font-style: italic;
    color:#EFBF04; 
    font-size: 6vw;
    white-space: nowrap;
   z-index: -1;
  }

  .Tagline3 {
    font-family:'Inter', 'Helvetica Neue', Arial, sans-serif;
    color:rgb(255, 0, 0);
    font-size:4vw;
    max-width: 80vw;
    height: auto;
    white-space: nowrap;
    z-index: -1;
  }
  .explore:hover{
    border-color: black;
    background-color: rgb(2, 2, 122) 
  }

  .sign-in {
    font-family: sans-serif;
    font-size: 2vw;
    color:#444040;
    border-radius: 15px ;
    border-width: 3px;
    background: hsla(0, 0%, 0%, 0);
    border: 3px solid;
    border-color: darkorange;
    padding-left: 3px;
    padding-right: 3px;
    z-index: 2;
    transition: border-color 0.1s ease-in, background 0.1s ease-in;
    margin-left: 10px;
    margin-right: 35px;
    
  }

  .sign-in:hover {
    border-color: rgb(0, 0, 0);
    background: rgb(233, 67, 6);
  }

  .log-in { font-family: sans-serif;
    font-size: 2vw;
    color:#444040;
    border-radius: 15px ;
    border-width: 3px;
    background: rgba(0, 195, 255, 0);
    border: 3px solid;
    border-color: #00fff2;
    padding-left: 3px;
    padding-right: 3px;
    z-index: 2;
    transition: border-color 0.1s ease-in, background 0.1s ease-in;
    margin-left: auto;
    
    }

    .log-in:hover{
      border-color: rgb(0, 0, 0);
    background: rgb(13, 138, 177);}

    .Upload {
      font-family: sans-serif;
      font-size: 20px;
      width: 30vw;
      min-width: fit-content;
      min-height: fit-content;
      padding: 5px;
      padding-bottom: 5px;
      background: #D3AF37;
      color: #fffdfd;
      border-radius: 30px;
      height: 4vw;
      min-height: 40px;
      border: 3px solid transparent;
      transition: border-color 0.1s ease-in, background 0.1s ease-in;
      animation: upload-rise both;
      animation-duration: 1s;
      z-index: 3;
      
      
    }

    @keyframes upload-rise {

      from {
        translate: 0 100px;
        opacity: 0;
      }

      to {

        translate: 0 0px;
        opacity: 1;
      }
    }

    .Upload:hover { 
      border-color: #000000 ;
      background: #ac8e2e;
    }

    .description {
       font-size: 3vw;
       text-align: center;
       margin-top: 10px;
       margin-bottom: 10px;
       color: #646363;
       z-index: -1;
    }


    .heading {
   color: #C0C0C0;
   background: #5a5858;
   border-radius: 100px;
   border: 5px solid;
   border-color: #242323;
    font-family:'Caveat', cursive, sans-serif;
    font-style: italic;
   font-size: 4vw;
   text-align: center;
   align-self: center;
   width: 80vw;
   height: auto;
   z-index: -1;
   
   padding-bottom: 20px;
   padding-top: 10px;
   z-index: -1;
   
   animation: feat-1 both;
   animation-timeline: view();
   animation-range: entry 100% contain 40%;
   
    }

    @keyframes feat-1 {
     from {
       opacity: 0;
       translate: 0 100px;
     }

     to {
      opacity: 1;
      translate: 0 0;
     }
    }

    .user-guide {
      display: flex;
      flex-direction: column;
   
   justify-content: center;
   align-items: center;
   
   background: #e9fdfbdc;
   z-index: -1;
   padding-bottom: 20px;
   padding-top: 20px;
   padding-left: 3vw;
   padding-right: 3vw;
   border: 3px solid;
   border-color: #464545;
   border-radius: 4vw;
    }

    .stfeature { 
      font-size: 3vw;
      white-space: nowrap;
      color:#2e2d2d;
      margin-top: 20px;
      animation: side both;
      animation-timeline: view();
      animation-range: entry 100% contain 40%;
      z-index: -1;
    }

    @keyframes side{
      from {
        opacity: 0;
        translate: -100px 0;
      }

      to {
        opacity: 1;
        translate: 0 0;
      }
      }

      .stfeature-description {
       font-size: 2vw;
       margin-top: 10px;
       color:#000000;
       animation: slide both;
       animation-timeline: view();
       animation-range: entry 100% contain 40%;
       z-index: -1;
       text-align: center;
      }
    
      @keyframes slide {
        from {
          opacity: 0;
          translate: -100px 0;
        }

        to {
          opacity: 1;
          translate: 0 0;
        }
      }

      .nd-feature {
       text-align: center;
font-size: 3vw;
      white-space: nowrap;
      color:#2e2d2d;
      margin-top: 20px;
      animation: nd-slide both;
      animation-timeline: view();
      animation-range: entry 100% contain 40%;
      border-color: #242323;
       border-top: 3px solid;
       padding-top: 8px;
       width: 108%;
       z-index: -1;

      }

      @keyframes nd-slide {
        from {
          opacity: 0;
          translate: -100px 0;
        }

        to {
          opacity: 1;
          translate: 0 0;
        }

      }


      .nd-feature-description {

font-size: 2vw;
       margin-top: 10px;
       color:#000000;
       animation: nd-slide2 both;
       animation-timeline: view();
       animation-range: entry 100% contain 40%;
       border-bottom: 3px solid;
       border-color: #242323;
       width: 107.5%;
       text-align: center;
       padding-bottom: 8px;
       z-index: -1;

      }

      @keyframes nd-slide2 {
         from {
          opacity: 0;
          translate: -100px 0;
        }

        to {
          opacity: 1;
          translate: 0 0;
        }
      }

      .rd-feature {
font-size: 3vw;
      white-space: nowrap;
      color:#2e2d2d;
      margin-top: 20px;
      animation: rd-slide both;
      animation-timeline: view();
      animation-range: entry 100% contain 20%;
      z-index: -1;
      }

      @keyframes rd-slide {
             from {
          opacity: 0;
          translate: -100px 0;
        }

        to {
          opacity: 1;
          translate: 0 0;
        }

      }

      .rd-feature-description {
         font-size: 2vw;
       margin-top: 10px;
       color:#000000;
       animation: nd-slide3 both;
       animation-timeline: view();
       animation-range: entry 100% contain 5%;
       z-index: -1;
       text-align: center;

      }

      @keyframes nd-slide3 {
       from {
          opacity: 0;
          translate: -100px 0;
        }

        to {
          opacity: 1;
          translate: 0 0;

      }
    }

    .safety-feat {
      grid-column: 2/3;
      display: flex;
      width:80vw;
      height: max-content;
      flex-wrap: nowrap;
      flex-direction: row;
      background-color: #e9fdfbdc;
      border: 3px solid;
      border-radius: 4vw;
      border-color: #000000;
      padding-left: 2vw;
      padding-right: 2vw;
      z-index: -1;
      
     
    }

    .safety {
      font-size: 30px;
      color: #2b2b2b;
      width: 98%;
      grid-column: 2/3;
      animation: slide-left both;
      animation-timeline: view();
      animation-range: entry 100% contain 20%;
      margin-left: 2vw;
      z-index: -1;
      
}

@keyframes slide-left{

  from {
    opacity: 0;
    translate: -100px 0;
  }

  to {

    opacity: 1;
    translate:  0 0
  }
}

.st-measure {
  font-size: 20px;
  color: #050505;
  width: 32%;
  animation: slideleft both;
  animation-timeline: view();
  animation-range: entry 100% contain 20%;
  text-align: center;
 border-right: 3px solid;
 border-color: #000000;
 z-index: -1;
 
 

}

@keyframes slideleft {
  from {
    opacity: 0;
    translate: -100px 0;
  }
  to {
    opacity: 1;
    translate: 0 0;
  }
}
      
.st-measure-description {
  color: #1b1b1b;
  font-size:1.5vw;
  width:100%;
  text-align: centre;
  font: message-box;
animation: description-slide both;
 animation-range: entry 100% contain 40%;
 animation-timeline: view ();
 height: 110%;
 z-index: -1;
 
  
}

@keyframes description-slide {
  from {
    opacity:0;
    translate: -100px 0
  
  }

  to {
    opacity: 1;
    translate: 0 0;
  }
}
  
.nd-measure {
  font-size: 20px;
  color: #050505;
  width: 32%;
  text-align: center;
 border-right: 3px solid;
 border-color: #000000;
 margin-left: 10px;
 margin-right: 3px;
  animation: nd-measure-description-slide both;
  animation-timeline: view();
  animation-range: entry 100% contain 40%;
  z-index: -1;
}

.nd-measure-description {
  color: #1b1b1b;
  width:100%;
  text-align: centre;
  font: caption;
  z-index:-1;
 
}

@keyframes nd-measure-description-slide {
  from{
    opacity: 0;
    translate: -100px 0;
  }

  to {
    opacity: 1;
    translate: 0 0;
  }
}

.rd-measure {
  font-size: 20px;
  color: #050505;
  width: 32%;
  text-align: center;
 
 height: 110%;

 padding-bottom: 8px;
 margin-left: 10px;
 margin-right: 5px;
 animation: rd-measure-slide both;
  animation-timeline: view();
  animation-range: entry 100% contain 40%;
  z-index: -1;
}

.rd-measure-description {
  color: #1b1b1b;
  font-size:1.5vw;
  text-align: centre;
  font: message-box;
  z-index: -1;
  
}

@keyframes rd-measure-slide {
  from{
    opacity:0;
    translate: -100px 0;

  }

  to{
    opacity: 1;
    translate: 0 0;
  }
}

.grid {
  display: grid;
  grid-template-columns: auto;
  grid-template-rows: auto;
  z-index: -1;
  
  
  

}

.faq-sec {
  display: grid;
  grid-template-columns: auto;
  grid-template-rows: auto auto;
  z-index: -1;

 
}

.faq-heading {
  font-size: 40px;
  color: #2b2929;
  font: bolder;
  grid-column: 1/2;
  grid-row: 1/2;
  animation: s-left both;
  animation-timeline: view();
  animation-range: entry 100% contain 30%;
  z-index: -1;
}

.faq {
  grid-column: 1/2;
  grid-row: 2/3;
  background: #e9fdfbdc;
  border: 3px solid;
  border-radius: 20px;
  border-color: #000000;
  height: fit-content;
  width: 80vw;
  align-self: center;
   display: grid;
  grid-template-columns: auto auto;
  grid-template-rows: auto auto auto auto auto auto;
  z-index: -1;
  
  
}

.s-ques {
 font-size: 20px;
 font: bold;
 color: #201f1f;
 grid-column: 1/2;
 grid-row: 1/2;
 border-right: 3px solid;
 border-bottom: 3px solid;
 border-color: #000000;
 width: 100%;
 animation: s-left both;
 animation-timeline: view();
 animation-range: entry 100% contain 30%;
 padding-left: 10px;
 z-index: -1;
}

.s-ans {
  font-size: 15px;
 font: caption;
 color: #383636;
 animation: s-left both;
 animation-timeline: view();
 animation-range: entry 100% contain 30%;
 z-index: -1;
}

.st-ques {
  font-size: 20px;
 font: bold;
 color: #201f1f;
 grid-column: 2/3;
 grid-row: 1/2;
 border-bottom: 3px solid;
 border-color: #000000;
 animation: s-left both;
 animation-timeline: view();
 animation-range: entry 100% contain 30%;
 padding-left:20px;
 z-index: -1;
}

.st-ans {
  font-size: 15px;
 font: caption;
 color: #383636;
 animation: s-left both;
 animation-timeline: view();
 animation-range: entry 100% contain 30%;
 z-index: -1;
}

.nd-ques {
  font-size: 20px;
 font: bold;
 color: #201f1f;
 grid-column: 1/2;
 grid-row: 2/3;
 border-right: 3px solid;
 border-bottom: 3px solid;
 border-color: #000000;
 width: 100%;
 animation: s-left both;
 animation-timeline: view();
 animation-range: entry 100% contain 30%;
 padding-left: 10px;
 z-index: -1;
}

.nd-ans {
  font-size: 15px;
 font: caption;
 color: #383636;
 animation: s-left both;
 animation-timeline: view();
 animation-range: entry 100% contain 30%;
 z-index: -1;
}

.rd-ques {
  font-size: 20px;
 font: bold;
 color: #201f1f;
 grid-column: 2/3;
 grid-row: 2/3;
 border-bottom: 3px solid;
 border-color: #000000;
 animation: s-left both;
 animation-timeline: view();
 animation-range: entry 100% contain 30%;
 padding-left:20px;
 z-index: -1;
}

.rd-ans {
  font-size: 15px;
 font: caption;
 color: #383636;
 animation: s-left both;
 animation-timeline: view();
 animation-range: entry 100% contain 30%;
 z-index: -1;
}

.th-ques {
  font-size: 20px;
 font: bold;
 color: #201f1f;
 grid-column: 1/2;
 grid-row: 3/4;
 border-right: 3px solid;
 border-bottom: 3px solid;
 border-color: #000000;
 width: 100%;
 animation: s-left both;
 animation-timeline: view();
 animation-range: entry 100% contain 30%;
 padding-left: 10px;
 z-index: -1;
}

.th-ans {
  font-size: 15px;
 font: caption;
 color: #383636;
 animation: s-left both;
 animation-timeline: view();
 animation-range: entry 100% contain 30%;
 z-index: -1;
}


.six-ques {
   font-size: 20px;
 font: bold;
 color: #201f1f;
 grid-column: 2/3;
 grid-row: 3/4;
 border-bottom: 3px solid;
 border-color: #000000;
 animation: s-left both;
 animation-timeline: view();
 animation-range: entry 100% contain 30%;
 padding-left:20px;
 z-index: -1;
}

.six-ans {
   font-size: 15px;
 font: caption;
 color: #383636;
 animation: s-left both;
 animation-timeline: view();
 animation-range: entry 100% contain 30%;
 z-index: -1;
}

.sev-ques {
  font-size: 20px;
 font: bold;
 color: #201f1f;
 grid-column: 1/2;
 grid-row: 4/5;
 border-right: 3px solid;
 border-color: #000000;
 width: 100%;
 padding-left: 10px;
 z-index: -1;
}

.sev-ans {
  font-size: 15px;
 font: caption;
 color: #383636;
 z-index: -1;
 
}

.eig-ques {
  font-size: 20px;
 font: bold;
 color: #201f1f;
 grid-column: 2/3;
 grid-row: 4/5;
 border-color: #000000;
 padding-left:20px;
 z-index: -1;
}

.eig-ans {
   font-size: 15px;
 font: caption;
 color: #383636;
 z-index: -1;
 

}

@keyframes s-left {
  from {
    opacity: 0;
    translate: -100px 0;
  }

  to {
    opacity: 1;
    translate: 0 0;
  }
}

.start-page {
  display: flex;
  flex-direction: column;
  row-gap: 150px;
  position: absolute;
  top: 120%;
  left: 50%;
  right: 50%;
  text-align: center;
  align-items: center;
  z-index: 0;
}


.ending1 {
  border: 3px solid;
  border-radius: 20px;
  border-color: #D4AF37;
  display: grid;
  grid-template-rows: auto auto;
  grid-template-columns: 60% 40%;
  width: 60vw;
  height: auto;
  z-index: -1;
}

.ending2 {
  font-size: 30px;
  font-family:'Caveat', cursive, sans-serif;
  font-style: italic;
  color: #d80e0e;
  grid-row: 1/2;
  grid-column: 1/2;
  animation: slide-left2 both;
  animation-timeline: view();
  animation-range: entry 100% contain 40%;
  z-index: -1;

}

@keyframes slide-left2{
  from {
    opacity: 0;
    translate: -100px 0;

    to {
      opacity: 1;
      translate: 0 0;
    }
  }
}


.buttons2 {
  display: flex;
  flex-direction: column;
   grid-row: 1/2;
  grid-column: 2/3;
  gap: 5px;
  flex-wrap: nowrap;
  justify-content: center;
  justify-self: middle;
  align-self: middle;
  z-index: 2;
}
.Explore2 {
  font-size: 20px;
  background-color: cadetblue;
  height: fit-content;
  border: 3px solid;
  border-color: #2b2929;
  border-radius: 10px;
  z-index: 2;
  

 padding-left: 4vw;
 padding-right: 4vw;
 color: #FFFFFF;
 
 
animation: slide-up2 both;
 animation-timeline: view();
 animation-range: entry 100% contain 20%;
}

.Explore2:hover {
  background-color: rgb(65, 109, 110);
  padding-left: 4.5vw;
  padding-right: 4.5vw;
  padding-top: 0.2vw;
  padding-bottom: 0.2vw;
  border: 3px solid;
  border-color: #000000;
  
}

.Upload2 {
   font-size: 20px;
  background-color: rgb(255, 187, 0);
  
  height: fit-content;
  border: 3px solid;
  border-color: #2b2929;
  border-radius: 10px;
  
  
 z-index: 2;
 padding-left: 4vw;
 padding-right: 4vw;
 color: #FFFFFF;
 animation: slide-up2 both;
 animation-timeline: view();
 animation-range: entry 100% contain 20%;
}

.Upload2:hover {
   background-color: rgb(177, 134, 15);
  padding-left: 4.5vw;
  padding-right: 4.5vw;
  padding-top: 0.2vw;
  padding-bottom: 0.2vw;
  border: 3px solid;
  border-color: #000000;
}

@keyframes slide-up2 {
  from {
    opacity: 0;
    translate: 0 100px;
  }

  to {
    opacity: 1;
    translate: 0 0;
  }
}

.end-banner {
  width: 98.9vw;
  height: 100px;
  border-top: 5px solid;
  border-color: #bebebe;
  background-color: #b4b4b4;
  display: grid;
  grid-template-columns: 60% 33%;
  grid-template-rows: auto auto;
  align-items: start;
  justify-content: start;
  justify-items: start;
  z-index: -1;
  
}

.foot-logo {
  width: 3vw;
  height: 3vw;
  margin-left: 0.9vw;
  vertical-align: bottom;
  z-index: 2;

}

.footer-head {
  grid-row: 1/2;
  grid-column: 1/2;
  font-size: 25px;
  z-index: -1;

}



.footer-def {
  font-size: 3vw;
  color: #f7f6f6;
  margin-left: 0.9vw;
  grid-row: 2/3;
  grid-column:1/2;
z-index: -1;
  
}

.yt {
  font-size: 2vw;
  background-color: #ff0000;
  border-radius: 10px;
  border: 3px solid;
  border-color: #000000;
  padding-left: 5px;
  padding-right: 5px;
  z-index: 2;
  
  
  
}



.insta {
  font-size: 2vw;
  background-color: #ff00ff;
  border-radius: 10px;
  border: 3px solid;
  border-color: #000000;
  padding-left: 5px;
  padding-right: 5px;
  z-index: 2;

}


.dc {
  font-size: 2vw;
  background-color: #8400ff;
  border-radius: 10px;
  border: 3px solid;
  border-color: #000000;
  padding-left: 5px;
  padding-right: 5px;
  margin-right: 10px;
  z-index: 2;
  
  
}

.gay {
  grid-column: 2/3;
  grid-row: 2/3;
 justify-self: end;
 width: 100%;
 z-index: 0;
}

.yt:hover {
  background-color: #b80404;
  color: #ffffff;
  border: 4px solid;
  border-color: goldenrod;
}

.dc:hover {
  background-color: #4e0196;
  color: #ffffff;
  border: 4px solid;
  border-color: goldenrod;
  
}

.insta:hover {
  background-color: #a502a5;
 color: #ffffff;
 border: 4px solid;
 border-color: goldenrod;
}