/* 
["INFORMATION REGARDING THE STYLE SHEET"]

#Use of colors:
 1. Primary Color: #222222;
 2. Secondary Color: #7B7B7B;
 3. Tertiary Color: #F8F8F8;
 4. White: #FFFFFF;

 Uses of these colors:
  1. PRIMARY:
    *Brand Identity=
      -Logos
      -Headers
      -Navs
    * Call To Action Buttons
      -Buy
      -Sign Up
    *Error
      -Error Messages
      -Notifications


  2. SECONDARY:
    -Hoverstates
    -Info alerts
    -Discounts


  3. TERTIARY:
    -Gradients
    -Icons
    -Illustrations
    -Borders
    
  #Use of fonts:
   -Inter
    Use[
        .inter-<uniquifier> {
         font-family: "Inter", sans-serif;
         font-optical-sizing: auto;
         font-weight: <weight>;
         font-style: normal;
        ]
    
}

# FONT SIZE SYSTEM (px);
    10/12/14/16/18/20/24/28/32/36/40/48/56/64/72

# FONT WEIGHT SYSTEM:
    Default: 400
*/

@import url("header.css");
@import url("footer.css");
@import url("hero.css");
@import url("projects.css");
@import url("about.css");
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  font-size: 62.5%; /* 1rem = 10px */
  /* overflow-x: hidden; */
  scroll-behavior: smooth;
  background-color: #f8f8f8;
}

body {
  font-family: "Inter", sans-serif;
  font-weight: 400;
  color: #222222;
  background-color: #f8f8f8;
  line-height: 1;
  /* overflow: hidden; */
}

body.nav-open {
  overflow: hidden;
  position: fixed;
  width: 100%;
  height: 100%;
}
.hero-container {
  /* overflow-y:auto;
  overflow-x:hidden; */
  scroll-behaviour: smooth;
}
/* Queries to adapt to the different screen sizes. */

/* For devices below 1344px smaller desktops and laptops. */

@media (max-width: 84em) {
  .hero {
    max-width: 120rem;
  }
  .projects {
    max-width: 120rem;
  }
}

/* For devices below 1200px (Landscape Tablets)*/

@media (max-width: 75em) {
}

/* query for 997px break point converting it into em */
/* 927px/16=57.93em */
/* media query for tablets */

@media (max-width: 62em) {
  html {
    font-size: 50%;
  }
}

/* query for smaller screens starting from 800   */
/* This query is written according to the design of the navbar */

@media (max-width: 50em) {
  .header {
    padding: 1rem 0.5rem 0 1rem;
    width: 100%;
  }
  .logo {
    padding: 1rem 1rem 1rem 0;
  }
  .navbar {
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    display: flex;
    padding: 12rem 0 0 6rem;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 5rem;
    transition: all 0.5s ease-in-out;
    z-index: 8;
    height: 0vh;
    overflow: hidden;
  }

  .nav-item:link,
  .nav-item:visited {
    color: #ffffff;
    text-shadow: 0 0 1.1px #ffffff;
  }
  .navbar-list {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 3rem;
    width: 100%;
    font-size: 2rem;
  }

  .nav-open .navbar {
    height: 100vh;
    background-color: #7b7b7b;
    width: 100vw;
    z-index: 8;
  }

  .nav-open .icon-mobile-nav[name="close-outline"] {
    display: block;
  }

  .nav-open .icon-mobile-nav[name="menu-outline"] {
    display: none;
  }

  .book-call {
    padding: 0;
  }
  .book-call .call,
  .call-icon {
    font-size: 3rem;
  }

  .btn-mobile-nav {
    display: block;
    padding-right: 1rem;
  }

  .hero {
    width: 100%;
    grid-template-columns: 1fr;
    gap: 1rem;
    padding: 0 2rem 0 2rem;
  }
  .hello {
    font-size: 20rem;
  }

  .profile-pic {
    width: 100%;
    margin: 0;
    position: static;
  }

  .projects {
    flex-direction: column;
    align-items: flex-start;
    padding-left: 2rem;
  }
  .footer-wrapper {
    grid-template-columns: 1fr 1fr;
  }

  .logo-col,
  .address-col {
    grid-column: span 2;
  }

  .nav-col{
    grid-row:2;
  }
}