:root {
    --header-height: 3.5rem;
  
    /*====Colors===== */
    --first-color: hsl(228, 66%, 53%);
    --first-color-alt: hsl(228, 66%, 47%);
    --first-color-light: hsl(228, 62%, 59%);
    --first-color-lighten: hsl(228, 100%, 97%);
    --second-color: hsl(25, 83%, 53%);
    --title-color: hsl(228, 57%, 28%);
    --text-color: hsl(288, 15%, 50%);
    --text-color-light: hsl(228, 12%, 75%);
    --border-color: hsl(288, 99%, 98%);
    --body-color: #fff;
    --container-color: #fff;
  
    /*===Font and Typography===*/
    --body-font: 'Poppins', sans-serif;
    --biggest-font-size: 2.25rem;
    --h1-font-size: 1.5rem;
    --h2-font-size: 1.25rem;
    --h3-font-size: 1rem;
    --normal-font-size: 1rem;  
    --small-font-size: 0.875rem;
    --smaller-font-size: 0.75rem;
  
    /*===Font Weight===*/
    --font-medium: 500;
    --font-semi-bold: 600;
  
    /*==Z-index===*/
    --z-tooltip: 10;
    --z-fixed: 100;
  }
  
  /*===Responsive Typography Media Query===*/
  @media screen and (min-width: 1024px) {
    :root {
      --biggest-font-size: 4rem;
      --h1-font-size: 2.25rem;
      --h2-font-size: 1.5rem;
      --h3-font-size: 1.25rem;
      --normal-font-size: 1rem;
      --small-font-size: 0.875rem;
      --smaller-font-size: 0.813rem;
    }
  }
  
  /*====Base Styles====*/
  * {
    box-sizing: border-box;
    padding: 0;
    margin: 0;
  }
  
  html {
    scroll-behavior: smooth;
  }
  
  body {
    font-family: var(--body-font);
    font-size: var(--normal-font-size);
    background-color: var(--body-color);
    color: var(--text-color);
  }
  
  h1,
  h2,
  h3 {
    color: var(--title-color);
    font-weight: var(--font-semi-bold);
  }
  
  ul {
    list-style: none;
  }
  
  a {
    text-decoration: none;
    font-size: 1rem;
  }
  
  img {
    max-width: 100%;
    height: auto;
  }
  
  input,
  button {
    font-family: var(--body-font);
    outline: none;
    border: none;
  }
  
  /*===Reusable CSS Classes=== */
  .container {
    max-width: 1024px;
    margin: 1.5rem auto;
  }
  
  .grid {
    display: grid;
  }
  
  .section {
    padding: 4.5rem 0 2rem;
  }
  
  .section__title {
    font-size: var(--h2-font-size);
    margin-bottom: 1rem;
  }
  
  .section__title span {
    color: var(--second-color);
  }
  
  .section__subtitle {
    display: block;
    font-size: var(--small-font-size);
    color: var(--second-color);
}
.main{
    overflow: hidden;
}

.header{
    position:fixed;
    top:0;
    left:0;
    width:100%;
    background-color: transparent;
    z-index:var(--z-fixed);
    transition: 4s;
}

ul{
    list-style-type: none;
}



/*============ HOME =============*/
.home {
  background: linear-gradient(170deg, hsl(0, 0%, 22%) 0%, hsl(0, 0%, 6%) 30%);
  padding-bottom: 0;
} 
.home__container{
    padding-top: 4rem;
    row-gap: 3.5rem;
}
.home__title,.home__value-number{
  color:#fff;
}
.home__title{
  font-size: var(--biggest-font-size);
  line-height: 120%;
  margin-bottom: 1.25rem;
}
.home__description{
  color:var(--text-color-light);
  margin-bottom: 2rem;
}
.home__search{
  background-color: var(--body-color);
  padding: .35rem,.35rem,.25rem,.75rem;
  display: flex;
  align-items: center;
  border-radius: .75rem;
  border:3px solid var(--text-color-light);
  margin-bottom: 2rem;
}
.home__search i{
  font-size: 1.25rem;
  color:var(--first-color);
}
.home__search-input{
  width: 90%;
  background-color: var(--body-color);
  color: var(--text-color);
  margin:0.5rem ;
}
.home__search-input::placeholder{
  color:var(--text-color-light);
}
.home__value{
  display: flex;
  column-gap: 2.5rem;
}
.home__value-number{
  font-size: var(--h1-font-size);
  font-weight: var(--font-medium);
}
.home__value-number span{
  color:var(--second-color);
}
.home__value-description{
  display: flex;
  color:var(--text-color-light);
  font-size: var(--smaller-font-size);
}
.home__images{
  position: relative;
  display: flex;
  justify-content: center;
 
 
}
.home__orbe{
  width: 1000px;
  height: 550px;
  background: linear-gradient(180deg,
              hsl(0,0%,16%)93%,
              hsl(0,0%,67%)100%);
  /*border-radius: 125px 125px 12px 12px;*/

}
.home__img{
  position: absolute;
  width: 550px;
  height: 500px;
  overflow: hidden;
  /*border-radius: 125px 125px 5px 5px;*/
  display: inline-flex;
  align-items: flex-end;
  bottom: -1.5rem;
  box-shadow: 0 16px 32px hsla(228,66%,25%,0.25) ;
  
}

/*================ BUTTON =============*/
.button{
  display: inline-block;
  background: linear-gradient(101deg,
            hsl(228,66%,53%) ,
            hsl(228,66%,47%));
  color:#fff;
  padding: 14px 28px;
  border-radius: .5rem;
  font-size: var(--normal-font-size);
  font-weight: var(--font-medium);
  box-shadow: 0 4px 8px hsla(228,66%,45%,.25);
  transition: .3s;
  cursor: pointer;
}
.button:hover{
  box-shadow: 0 4px 12px hsla(228,66%,45%,.25);
}
.nav__button{
  display:none;
}
/*========== LOGOS========*/
.logos__container{
  padding-top: 2rem;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem 2rem;
  justify-items:center;
}
.logos_img1 .logos_img2 .logos_img3 .logos_img{
  height:150px;
  width:350px;
  transition: .3s;
  opacity: 0.2;
}
img:hover{
  opacity: 0.6;
}