.inter-100 {
  font-family: "Inter", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
}
body {
  font-family: "Inter", sans-serif;

  margin: 0;
  left: 0;
   overflow: hidden;
  
}

.loading{
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  flex-direction: column;
  
}
.loading h1{
  background-color: #FF6B6B;
  padding: 40px;
  border: solid  #000000;
}


:root {
  /* fonts */

  --h1: 2.986rem;
  --h2: 2.488rem;
  --h3: 2.074rem;
  --h4: 1.728rem;
  --h5: 1.44rem;
  --h6: 1.2rem;
  --p: 1rem;
  --s: 0.833rem;
  /* colors */

  --primary: #2c3d55;
  --secondary: #536271;
  --background-main: whitesmoke;
  --font-color-main: black;
  --font-color-secondary: white;

  /*radius render*/

  --button-radius: 20px;
}

h1 {
  font-size: var(--h1);
}

h2 {
  font-size: var(--h2);
}

h3 {
  font-size: var(--h3);
}

h4{
  font-size: var(--h4);
}
p {
  font-size: var(--p);
}

.header {
  display: grid;
  grid-template-columns: 1fr 1fr;
  justify-content: center;
  align-items: center;
  border-bottom: solid #2c3d55;

}

.header-logo h2 {
  padding: 0 0 0 30px;
}
.header-items {
  display: grid;
  align-items: center;
  justify-content: center;
  grid-template-columns: 1fr 1fr 1fr;
}

.header-items h3{
  display: flex;
  justify-content: center;
  align-items: center;
  
}
.hero {
  display: flex;
  background-color: #457B9D;
  height: 80vh;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  border-bottom: solid #2c3d55;
}


.header-items-mobile{
  display: none;
}
.hero-learn-more{
  display: flex;
  align-items: center;
  background-color: black;
  color: white;
  padding: 10px;
}


.project{
  padding: 0 20% 0 20%;
}
.project-inner{
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 10px;
}
.project-sub{
  background-color: #FF6B6B;
  padding: 20px;
  border: solid black;
  
}

.project-sub:hover {
  box-shadow: 8px 8px 0 #000000;
}
.footer{
  display: flex;
  margin-top: 40px;
  border-top:solid #2c3d55;
  align-items: center;
  justify-content: center;
}

.menu{
  display: none;
  grid-template-rows: 0.5fr 1fr ;
}

#menu-close{
  font-size: 3rem;
  align-items: center;
  justify-content: center;
  display: flex;
  font-weight: bolder;
}

.menu-items{
  font-weight: bold;
  font-size: var(--h1);
  padding: 0 0 0 80px;

}

.menu-items li{
  list-style: none;
}




@media (max-width: 767px) {
  .hero-inner{
    padding: 0  2px 0 2px;
  }
  .project-inner{
    display: flex;
    flex-direction: column;
  }
  .header-items{
    display: none;

  }
    .header-items-mobile{
    display: flex;

    align-items: center;
    justify-content: center;
  }
  .header-items-mobile i{
    font-size: var(--h4);
  }
}