*, *::after, *::before{
  box-sizing: border-box;
}

body, html {
  padding: 0;
  margin:0;
  background: black;
  color: #f1f1f1;
  scroll-behavior: smooth;
  font-family: 'Titillium Web', sans-serif;
}

:root {
  --navbar-height: 5rem;
  --footer-height: 15px;
  --main-height: calc(100svh - ( (var(--navbar-height)) + (var(--footer-height)) ))
}

h2{
  padding: 0 0 0 0;
  margin: 0 0 0 0;
  font-size: 5em;
}


p{
  margin: 0 0 0 0;
}

/*Navbar*/
.navbar{
    padding-left: 2em;
    padding-right: 2em;
    height: var(--navbar-height);
    position: sticky;
    top: 0;
    width: 100svw;
    background: black;
    color: #f1f1f1;
    z-index: 2;

    display: flex;
    justify-content: space-between;
    align-items: center;
}

.navbar-logo{
  height: 4rem;
  margin: 0 0 0 0; 
}

.navbar-links{
  font-size: 1.5em;
}

.navbar-links ul{
  margin: 0;
  padding:0;
  display: flex;
}

.navbar-links li{
  list-style:none;
  border: 2px solid black;  
}

.navbar-links li a{
  text-decoration: none;
  color: #f1f1f1;
  padding: 1rem;
  display: block;
}

.navbar-links li:hover{
  color:#cccccc;
  border: 2px solid #f1f1f1;
  border-radius: 2px;   
  transition: 500ms ease-in-out; 
}


footer{
  width: 100vw;
  height: var(--footer-height);
  font-size: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
}





/* Parallax effect*/
.wrapper{
    height: var(--main-height);
    width: 100vw;
    overflow-y: auto;
    overflow-x: hidden;
    perspective: 10px;
    scroll-behavior: smooth;
}

.background{
  position: absolute;
  height:100%;
  width: 100%;
  object-fit : cover;
  transform: translateZ(-10px) scale(2);
  z-index:-1;
}

.hero-section{
  position:relative;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 80%;
  transform-style: preserve-3d;
  z-index: -1;
}

.hero-logo{
  filter: drop-shadow(0 0 5px black);
  width: 80vw;
  max-height: 30vh;
}

/* Content */
section{
  padding: 4rem;
  min-height: 60svh;
  display: flex;
  
  justify-content: center;
  align-items: center;
}

.section-dark{
  background: black;
}

.section-light{
  background: #f1f1f1;
  color: black;
}

.section-content{
  max-width: 1800px;
}



/* About Us */
.about-us-flex{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10rem;
  text-align: center;
  
}
.about-us-content{  
  font-size: 1.5rem;
  text-align: left;
  
}

.tagline{
  font-size: 3rem;
  text-align: right;

}


.abt-pic1{
  height: 40vh;
  border-radius: 42% 58% 70% 30% / 30% 50% 50% 70% ;
}








/* Services */
.services{
  margin-top: 2em;
  width: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr auto;
  gap: 5em;  
}

.service-card{
  padding: 1em 1em 1em 1em;
  font-size: 1.5em;
  border: solid 2px #f1f1f1;
  border-radius: 15px;
  display: flex;
  gap:1em;
  flex-direction: column;
  align-items: center;
  justify-content:flex-start;
  text-align: justify;
}

.service-card:hover{
  border: solid 2px #186BB5;
  transition: 50ms ease-in-out; 

}


.services-icon{
  margin: 0 0 0 0;
  z-index:1;
  height: 10rem;
  filter: invert(100%) sepia(3%) saturate(722%) hue-rotate(199deg) brightness(114%) contrast(89%);
}

h3{
  margin: 0 0 0 0;
  font-size: 2rem;
}

.brands-card{
  grid-column-start: 1;
  grid-column-end: 4;
  padding: 1em;
  color: black;
  background: #f1f1f1;
  border-radius: 15px;
}

.brands-flex{
  padding: 1em;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  justify-items: center;
  align-items:center;
  gap: 1em;
}


.brand-logo{
  height: 5vh;
  max-width: 20vw;
}

/* Contact Us */
.contact-us-content{
  display: flex;
  justify-items: center;
  align-items:center;
  gap: 4em;
}

.contact-us-details{
  font-size: 2em;
  display: flex;
  flex-direction: column;
  justify-items: center;
  align-items:flex-start;
  gap: 1em;

}


.contact-us-details a{
  text-decoration: none;
  color:#cccccc;
}

.contact-us-details a:hover{
  color:#186BB5;
  transition: 500ms ease-in-out; 
}

/*Animations*/
.hidden{
  opacity: 0;
  transition: all 1.5s;
}

.show{
  opacity: 1;
}

.hidden-slide{
  opacity: 0;
  filter: blur(5px);
  transform: translateX(-100%);
  transition: all 1.5s;
}

.slide{
  opacity: 1;
  filter: blur(0);
  transform: translateX(0);
}

.service-card:nth-child(2){
  transition-delay: 300ms;

}

.service-card:nth-child(3){
  transition-delay: 600ms;  
}

#our-projects{
  display: none;
}




@media (max-width:900px){

  :root {
    --navbar-height: 3rem;
    --footer-height: 2rem;
    --main-height: calc(100svh - ( (var(--navbar-height)) + (var(--footer-height)) ))
  }

  .navbar{
    justify-content: center;
  }
  .navbar-logo{
    height: 2.3rem;
  }

  .navbar-links{
    display: none;
  }

  .section-content{
    width: 100vw;
  }

  h2{
    font-size: 3em;
  }

  .tagline{
    font-size: 1.5rem;  
  }

  .about-us-flex{
    width: 80vw;
    flex-direction: column-reverse;
    gap: 1em;
  }

  .abt-pic1{
    display: none;

  }

  .about-us-content{
    font-size: 1em;
    text-align: justify;
  }

  .services{
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 1em;    
  }

  .service-card{
    font-size: 1em;;
  }

  .services-icon{
    height: 5rem;

  }

  .brands-card h3{
    font-size: 1.5em;
  }

  .brands-flex{
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr 1fr;
  }

  .brand-logo{
      height: 2vh;
      max-width: 40vw;
  }

  .contact-us-content{
    width: 80vw;
    flex-direction: column;
  }

  .contact-us-details{
    font-size: 1.5em;
    align-items: center;
  }

  footer{
    padding-left: 1em;

  }









  .services{
    flex-direction: column;
  }
  
  .service-card{
    width: 80vw;
  } 

}