@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&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');
@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');

*{
  margin: 0px;
  padding: 0px;
  box-sizing: border-box;
}
html{
  scroll-behavior: smooth;
  font-size: 62.5%;

}
body{
  overflow: hidden;
  height: 100vh;
  width: 100vw;
  background-image: url("./images/weather_back.avif");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
}
:root{
  --black-light:rgb(55, 51, 51);
  --white-light:hsl(0, 10%, 86%);
  --font-roboto:"Roboto", sans-serif;
  --font-poppins: "Poppins", sans-serif;
   --font-inter: "Inter", sans-serif;
}
.sections{
  max-width: 50vw;
  margin: auto;
}
.container{
  position: relative;
  padding: 1.4rem;
  box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 2px 6px 2px;
  border-radius: 1.4rem;
  margin-top: 12rem;
  width: 100%;
  height: 53rem;
  background-color: rgb(187, 186, 186);
   opacity: 0;
  transform: translateY(40px);
  animation: fadeInUp 0.8s ease forwards;
}

@keyframes fadeInUp {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

                                                       /* search boc here */
.search_box{
  display: flex;
  flex-wrap: nowrap;
  padding: .4rem;
  border-radius: .4rem;
  height: 3.5rem;
  max-width: 30%;
  width: 40%;
  background-color:var(--black-light);
}
.search_box i{
  color: var(--white-light);
  padding-top: .5rem;
  font-size: 1.4rem;
  margin-right: .3rem;
}
.search_box input{
  padding-left: .6rem;
  font-family: var(--font-inter);
  font-weight: 400;
  color: var(--white-light);
  background-color: var(--black-light);
  width: 95%;
  height: 95%;
  border: none;
  outline: none;
}
input::placeholder{
  color: var(--white-light);
}
.search_box input:focus {
  transition: all 0.3s ease;
  background-color: #3a3a3a;
  box-shadow: 0 0 8px rgba(255, 255, 255, 0.5);
}


                                             /* MIDDLE SECTION HERE */
  
.main_box{
  display: grid;
  place-items: center;
  position: absolute;
  left: 0px;
  right: 0px;
  top: 8rem;
  width: 100%;
  /* background-color: orange; */
  height: 25rem;
}
.main_child{
  display: grid;
  place-items: center;
width: 55%;
height: 80%;
/* background-color: hotpink; */
}
.main_child h1{
  font-family: var(--font-poppins);
  font-size: 2rem;
  font-weight: 600;
  word-spacing: .3rem;
  color: var(--black-light);
  text-transform: capitalize;
}
.main_child p{
  color: var(--black-light);
  font-family: var(--font-inter);
  font-size: 1.2rem;
  font-weight: 600;
  margin-bottom: 2rem;
  text-transform: capitalize;
}
.main_child button{
  margin-bottom: 2rem;
  background-color: var(--black-light);
  color: var(--white-light);
  width: 9rem;
  text-transform: capitalize;
  font-size: 1.5rem;
  height: 2.7rem;
  border-radius: 5rem;
  border: none;
}
.main_child i{
  font-size: 3.5rem;
  font-weight: 800;
   animation: popUp 0.6s ease-out forwards;
}
@keyframes popUp {
  0% {
    transform: scale(0.2);
    opacity: 0;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}
.main_child h2{
  font-family: var(--font-inter);
  font-weight: 700;
  font-size: x-large;
  margin-bottom: 2rem;
}
.main_child p .sp1 ,.sp2{
  font-family: var(--font-poppins);
  font-weight: 600;
  font-size: small;
}

                                                  /* Bottom section here  */

.bottom_box{

  padding: .8rem;
  position: absolute;
  /* background-color: gold; */
  width: 100%;
  left: 0rem;
  right: 0rem;
  height: 13rem;
  bottom: 0;
  display: grid;
  grid-template-columns: repeat(2,1fr);
  grid-template-rows: repeat(2,1fr);
  gap: 1rem;
}
.b_box{
  box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px;
  align-items: center;
  padding-left: 2rem;
  display: flex;
  /* background-color: purple; */
  border-radius: .8rem;
  transform: translateY(50px);
  opacity: 0;
  animation: slideUp 0.8s ease-out forwards;
  animation-delay: 0.3s;
}

@keyframes slideUp {
  to {
    transform: translateY(0);
    opacity: 1;
  }
}
.b_box i{
  font-size: 2.2rem;
  color: var(--black-light);
  margin-right: 2rem;
}
.b_box .about h4{
  text-transform: capitalize;
color: var(--black-light);
font-family: var(--font-roboto);
font-weight: 500;
font-size: 1.7rem;
}
.b_box .about p{
  color: var(--black-light);
  font-family: var(--font-poppins);
  font-size: 1.4rem;
}
.b_box .about p sup{
  font-size: 1rem;
  font-family: var(--font-roboto);
  font-weight: 900;
}