@import url('https://fonts.googleapis.com/css2?family=Changa:wght@200..800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
:root{
  --var-black : #011627;
  --var-whitegreen : #FDFFFC;
  --var-green : #2EC4B6;
  --var-red : #e71d36;
  --var-orange : #FF9F1C;
}
html{
  font-size: 16px;
}
*{
  padding: 0;
  margin: 0;
  font-family: "Changa", sans-serif;
}
a,ul,li{
  text-decoration: none;
  list-style-type: none;
}
body{
  background-color: #F2F6F6;
}
header{
  overflow: hidden;
  padding-left: 10%;
  padding-right: 10%;
  height: 92px;
  background-color: var(--var-black);
  color: #FDFFFC;
  display: flex;
  justify-content: center;
  justify-content: space-between;
  align-items: center;
}
header > ol > li > a{
  font-size: 1.6rem;
  color: #FDFFFC;
}
header img{
  width: 150px;
}
.flex{
  padding: 2rem 5rem;
  display: flex;
  justify-content: center;
  justify-content: space-between;
  align-items: center;
}
.flex1 > .frame > .share{
  display: flex;
  justify-content:space-between;
  align-items: center;
}
.flex1 .frame > .share h1{
  font-size: 1.4rem;
  font-weight: 400;
}
.flex1 .frame > .share a i{
  font-size: 1.9rem;
}
.flex1 > .frame{
  padding: 2rem;
  padding-top: 4rem;
  padding-bottom: 6rem;
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  background-color: var(--var-whitegreen);
  box-shadow: 3px -2px 61px -30px rgba(0,0,0,0.28);
  -webkit-box-shadow: 3px -2px 61px -30px rgba(0,0,0,0.28);
  -moz-box-shadow: 3px -2px 61px -30px rgba(0,0,0,0.28);
}
.flex1{
  width: 35%;
}
.flex1 > .frame input{
  border: 1px solid black;
  text-align: center;
  font-size: 1.1rem;
}
.flex1 > .frame input:focus{
  border: 1px solid --var-orange;
}
.flex1 > .frame input::placeholder{
  text-align: center;
}
.flex1 > .frame input[type=submit]{
  width: 7rem;
  border: none;
  padding: 0.3rem;
  background-color: var(--var-orange);
  font-weight: 500;
  font-size: 1.1rem;
  cursor: pointer;
  transition: 1s;
}
.flex1 > .frame input[type=submit]:hover{
  background-color: #ffba1a;
}
.flex2{
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.flex2 h1{
  font-size: 3.7rem;
  color: var(--var-black);
}
.flex2 p{
  font-size: 1.5rem;
  color: var(--var-green);
}
.hidden{
  opacity: 0;
}
.show{
  opacity: 1;
}
.bxl-facebook-square{
  color: #1877F2;
}
.bxl-whatsapp-square{
  color: 	#128c7e;
}
.bxl-instagram-alt{
  color: #d62976;
}
i{
  transition: 0.5s;
}
i:hover{
  scale: 1.4;
}
.by{
  position: absolute;
  right: 30px;
  bottom: 5px;
}
.by a h1{
  font-family: "Poppins", sans-serif;
  font-weight: 400;
  font-size: 1.2rem;
  letter-spacing: 2px;
  border-bottom: 2px solid var(--var-black);
  color: #011627;
}
@media screen and (max-width:430px) {
  html{
    font-size: 10px;
  }
  .flex{
    flex-direction: column;
    padding: 8rem 2.5rem;
  }
  .flex2{
    text-align: center;
    margin-bottom: 25px;
  }
  .flex1 .frame{
    padding: 2rem;
  }
  .flex1{
    width: 100%;
  }
  .flex1 .frame > .share a i{
    font-size: 3rem;
  }
  .flex1 .frame > .share h1{
    font-size: 2rem;
  }
  .flex1 .frame p{
    font-size: 1.6rem;
  }
  .flex1 > .frame input[type=submit]{
    width: 10rem;
    font-size: 1.8rem;
  }
}