:root {
  --color-primary: #25282b;
  --color-secondary: #7b7d80;
  --h2-family: neue-haas-grotesk-display, Aeonik, helvetica neue, helvetica, arial, roboto, serif;
  --p-family:roboto, sans-serif;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  height: auto;
  font-family: system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans","Liberation Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
}

a{
  text-decoration: none;
}

nav {
  background-color: #030303;
  width: 100vw;
  height: 75px;
  display: flex;
  justify-content: center;
  position: fixed;
  z-index: 5;
}
.full-nav{
    /* border: 1px solid white; */
    max-width: 1300px;
    width:90vw;
    height: 100%;
    display: flex;
    justify-content: space-between;
}
.nav1{
  /* border: 1px solid white; */
    height: 100%;
    display: flex;
    align-items: center;
    cursor: pointer;
    
}
.nav2-ham{
    height: 100%;
    display: flex;
    align-items: center;
    display: none;
    
}
.nav2-ham button{
    background-color:#030303;
    border: none;
    cursor: pointer;
}
.nav1 img{
    height: 50px;
}
.nav2-ham img{
    height: 17px;
    width: 25px;
}
.nav2{
  /* border: 1px solid white; */
  display: flex;
  /* justify-content: space-evenly; */
  align-items: center;
 
}
.nav2 ul{
  display: flex;
  justify-content: space-evenly;
  gap: 2.5rem;
}
.nav2 ul a{
  color: rgb(231, 228, 228);
  font-size: 0.8rem;
}
.nav2 ul a:hover{
  color: white;
}
.nav3{
  /* border: 1px solid white; */
  display: flex;
  align-items: center;
  gap: 2.5rem;
}
.login{
  width: 85px;
  height: 40px;
  font-size: 0.8rem;
  cursor: pointer;
}
.login:hover{
  transform: translateY(-0.1rem);
}
#login1{
  background-color: #030303;
  border: 0.05rem solid white;
  color: white;
}
#login2{
  background-color: white;
  border: none;
}

main{
  width: 100vw;
  height: auto;
  /* overflow-x: hidden; */
  background-color:#E8E8E8;
}

.section1{
  width: 100vw;
  height: 780px;
  background: url(/assets/bg.jpg);
  object-fit: cover;
  background-size: 100vw 780px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  /* padding: 4rem; */
}
.hardest{
  /* border: 1px solid white; */
  width: 90%;
  height: auto;
  /* margin-top: 7rem; */
  display: flex;
  flex-direction: column;
  justify-self: center;
  margin: auto;
 
}
.hardest h1{
    color: white;
    font-size: 6rem;
    
    /* font-family: futura-pt-bold; */
}
.hardest h2{
  color: white;
  font-size: 2.7rem;
  /* line-height: 4rem; */
  margin-top: 2rem;
}
.hard-btn1{
  width: 110px;
  height: 45px;
  margin-top: 1rem;
  border: none;
}
.hard-btn2{
  width: 200px;
  height: 45px;
  margin-top: 1rem;
  margin-left: 1rem;
  background-color: transparent;
  border: 0.05rem solid white;
  color: white;
}
.hard-btn1:hover{
  transform: translateY(-0.1rem);
  box-shadow: 0rem 0.1rem 0.5rem black;
  cursor: pointer;
}

.hard-btn2:hover{
  transform: translateY(-0.1rem);
  box-shadow: 0rem 0.1rem 0.5rem black;
  cursor: pointer;
}
.hardest2{
  /* border: 1px solid white; */
  width: 100%;
  height: 100px;
  backdrop-filter: blur(10px);
}
.paid-section{
  /* border: 1px solid white; */
  max-width: 800px;
  width: 60%;
  height: 100%;
  display: flex;
  justify-self: center;
}
.paid{
  width: 50%;
  height: 100%;
  text-align: center;
  color: white;
  font-size: 1.2rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.paid h2{
  font-size: 2.5rem;
}
.section2{
  /* border: 1px solid black; */
  max-width: 1100px;
  width: 90vw;
  /* height: 100vh; */
  display: flex;
  flex-direction: column;
  justify-self: center;
  align-items: center;
  margin: auto;
  margin-top: 2rem;
  padding-top: 1rem;
}
.section2 h2{
  font-size: 2.5rem;
  font-family: neue-haas-grotesk-display, Aeonik, helvetica neue, helvetica, arial, roboto, serif;
  /* line-height: 1rem; */
}
.sect2-it{
  font-size: 1.5rem;
  color: var(--color-secondary);
  margin-top: 1rem;
  /* line-height: 1rem; */
}
.download{
  width: 180px;
  height: 45px;
  margin-top: 2.5rem;
  background-color: transparent;
  border: 0.05rem solid black;
  transition: 0.2s ease;
}
.download:hover{
  transform: translateY(-0.32rem);
  box-shadow:  0.1rem 0.1rem rgba(0, 0, 0, 0.5);
  cursor: pointer;
}

.section2-1{
  width: 875px;
  object-fit: cover;
  margin-top: 4rem;
}
.section2-1 img{
  width: 875px;
}
.sect2-each{
  font-size: 1rem;
  margin-top: 2rem;
  color: #7b7d80;
  line-height: 1.2rem;
}
.section3{
  /* border: 1px solid black; */
  max-width: 1250px;
  width: 90vw;
  height: auto;
  display: flex;
  justify-self: center;
  margin: auto;
  padding-bottom: 3rem;
  margin-top: 4rem;
}
.sect3{
  /* border: 1px solid blue; */
  width: 625px;
  height: auto;


}
.sect3 h2{
  font-size: 2.5rem;
}
.sect3 p{
  font-size: 1.5rem;
  margin-top: 1rem;
  color: #7b7d80;
}
.clone{
  width: 220px;
  height: 45px;
  margin-top: 1.5rem;
  background-color: transparent;
  border: 0.01rem solid black;
  transition: 0.2s ease;
}
.clone:hover{
  transform: translateY(-0.32rem);
  box-shadow:  0.1rem 0.1rem rgba(0, 0, 0, 0.5);
  cursor: pointer;
}
#sect3-2 {
  object-fit: cover;
 
}
#sect3-2 img{
  cursor: text;
}
#sect3-2 p{
   font-size: 1rem;
   text-align: center;
}

.section4{
  /* border: 1px solid black; */
  max-width: 1250px;
  width: 80vw;
  height: auto;
  display: flex;
  justify-self: center;
  margin: auto;
  padding-bottom: 3rem;
  margin-top: 5rem;
}
.sect4-1{
  /* border: 1px solid black; */
  width: 40%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  font-size: 1.2rem;
  color: #7b7d80;
}
.sect4-1 img{
    box-shadow: 0.2rem 0.2rem 0.8rem ;
}
.sect4-1 p{
  margin-top: 1rem;
}
.sect4-2{
  /* border: 1px solid black; */
  width: 60%;
}
.sect4-2 h2{
  font-size: 2.5rem;
  font-family: neue-haas-grotesk-display, Aeonik, helvetica neue, helvetica, arial, roboto, serif;;
}
.sect4-2 p{
  font-size: 1.5rem;
  color: #7b7d80;
  margin-top: 1rem;
  letter-spacing: normal;
  font-family: roboto, sans-serif;
  line-height: 2rem;
}
.sect4-2 a{
  text-decoration: underline;
  color: #030303;
}

footer{
  background-color: #E8E8E8;
  width: 100vw;
  height: auto;
}

.foot1{
  /* border: 1px solid black; */
  max-width: 1250px;
  width: 90vw;
  height: auto;
  display: flex;
  flex-direction: column;
  justify-self: center;
  padding: 1rem;
}
.foot1 h2{
  font-family: var(--h2-family);
  font-size: 2.5rem;
  margin-top: 3rem;
  text-align: center;
}
.yt{
  width: 100%;
  height: auto;
  /* border: 1px solid black; */
  display: flex;
  justify-content: space-between;
  margin-top: 2.5rem;
}
.yt1{
  /* border: 1px solid black; */
  /* height: auto; */
    width: 32%;
}
.yt1 iframe{
  height: 200px;
  width: 100%;
}
.yt1 p{
  font-family: var(--p-family);
  color: #7b7d80;
  line-height: 1.5rem;
  margin-top: 0.8rem;
}

.foot2{
  /* border: 1px solid black; */
  max-width: 1250px;
  width: 80vw;
  height: auto;
  margin-top: 5rem;
  display: flex;
  flex-direction: column;
  justify-self: center;
  align-items: center;
  text-align: center;
}
.foot2 h1{
  font-family: var(--h2-family);
  font-size: 5rem;
  font-weight: 500;
}
.foot2 p{
  font-family: var(--p-family);
  color: #7b7d80;
  font-size: 1.5rem;
  margin-top: 1rem;
}
.receive{
  /* border: 1px solid blue; */
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 3rem;
  padding-bottom: 2rem;
  padding-top: 2rem;
}
.receive h3{
  font-family: var(--h2-family);
  font: 400;
  font-size: 1.3rem;
}
.receive input{
  margin-top: 1rem;
  width: 400px;
  height: 50px;
  padding: 15px;
  font-size: 1.1rem;
}
.receive button{
  width: 400px;
  height: 50px;
  font: 600;
  font-size: 1rem;
  background-color: #25282B;
  color: white;
  transition: 0.3s ease;
}
.receive button:hover{
  transform: translateY(-0.32rem);
  box-shadow:  0.1rem 0.1rem rgba(0, 0, 0, 0.5);
  cursor: pointer;
}
.foot3{
  /* border: 1px solid black; */
  max-width: 1250px;
  width: 90vw;
  /* height: 40vh; */
  display: flex;
  flex-direction: column;
  justify-self: center;
  margin: auto;
  margin-top: 2rem;
  padding-bottom: 3rem;
}
.foot31{
  /* border: 1px solid black; */
  /* height: 20vh; */
  display: flex;
  flex-wrap: wrap;
  /* gap: 6rem; */
  justify-content: space-between;
}
.foot31-2{
  display: flex;
  flex-direction: column;
}
.foot31-1{
  margin-top: 0.5rem;
}
.foot31-2 a{
    color:#030303;
    text-decoration: underline;
    margin-top: 0.5rem;
}
.foot31-3{
  width: 70%;
  margin-top: 0.5rem;
}
.foot31-3 p{
  font-size: 0.8rem;
  color: var(--color-secondary);
}
.foot32{
  margin-top: 2rem;
  gap: 0.5rem;
}
.foot32 img{
  width: 40px;
  height: 40px;
}



@media (max-width:1140px){
    .nav2{
      display: none;
    }
}

@media (max-width:1050px){
  .section1{
    height: 500px;
  }
  .section1 h1{
    font-size: 2rem;
  }
  .section1 h2{
    font-size: 1.5rem;
    margin-top: 1rem;
  }
  .section2{
   padding-top: 2rem;
  }
  .section2 h2{
    font-size: 2rem;
  }
  .section2 p{
    font-size: 1.2rem;
  }
  .section2 img{
    width: 650px;
    height: 380px;
    display: flex;
    justify-self: center;
  }
  .section2-1{
    width: 80vw;
  }
  .section2-1 p{
    font-size: 0.9rem
  }
  .section3{
    flex-direction: column;
    gap: 1rem;
  }
  
  .sect3 h2{
    font-size: 2rem;
  }
  .sect3 p{
    font-size: 1.2rem;
  }
  .sect3 img{
    width: 650px;
  }
  #sect3-2 p{
    font-size: 0.9rem
  }
  .section4 h2{
    font-size: 2rem;
  }
  .section4 p{
    font-size: 1.2rem;
  }
  .section4 img{
    width: 250px;
    height: ;
  }
  .foot1 h2{
    font-size: 2rem;
  }
  .foot1 p{
    font-size: 0.9rem;
  }
  .foot2 h1{
    font-size: 2.3rem;
  }
  .foot2 p{
    font-size: 1.2rem;
  }
}

@media (max-width:768px){
  .hardest2 p{
    font-size: 1rem;
  }
  .section2 img{
    width:  500px;
    height: 270px;
  }
  .section3{
    padding: 1rem;
    width: 90vw;
  }
  .section3 img{
    width: 500px;
    height: 400px;
  }
  .sect3{
    width: 100%;
  }
  .section4{
    flex-direction: column;

  }
  .sect4-1{
    order: 2;
    width: 100%;
  }
  .sect4-2{
    width: 100%;
  }
  .foot31-3{
    margin-top: 1rem;
  }
}

@media (max-width:450px){
  .nav1 img{
    width: 170px;
    height: 40px;
  }
  .nav3{
    gap: 1rem;
  }
  .login{
    width: 75px;
    height: 35px;
    font-size: 0.7rem
  }
  .section1 h1{
    margin-top: 3.5rem;
    line-height: normal;
  }
  .sign{
    margin-top: 2rem;
  }
  .hardest2{
    flex-direction: column;
    /* height: 200px; */
  }
  .paid-section{
    width: 100%;
  }
  .paid{
    width: 100%;
  }
  .section2 img{
    width: 95vw;
  }
  .section3{
    width: 95vw;
  }
  .section3 h2{
    line-height: normal;
    font: 600;
  }
  .section3 img{
    width: 100%;
  }
  .foot2 input{
    width: 100%;
  }
  .foot2 button{
    width: 100%;
  }
}