/*
---01 Typography system

-FONT SIZE (px)
10 / 12 / 14 / 16 / 18 / 20 / 24 / 30 / 36 / 44 / 52 / 62 / 74 / 86 / 98

-FONT weights:
default :400

-Line heights:
default:1

---02 Colors

-Primary: Brand color: #fc9925 / #fd7e14
-Tints:#fafafa
-Shades:
-Accents:
-Grays:
#333
#111
#000



--- 05 Shadows

---06  Border-radius

--- 07 Whitespace

 SPACING SYSTEM (px)
2 / 4 / 8 / 12 / 16 / 24 / 32 / 48 / 64 / 80 / 96 / 128 / 160
*/
*{
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}
html{
  font-size: 62.5%;
  /* font-size: 10px; */
  /* 10px/16=0.625 = 62.5 */
}
body {
  font-family: "Figtree", sans-serif;
  line-height: 1;
  font-weight: 400;
   color:#333; 
}

/* ***************** */
/* GENERAL COMPONENT */
/* ***************** */
.heading-primary{
  font-size: 3.0rem;
  font-weight:500;
  line-height: 3.2rem;
   color: #333;  
  letter-spacing:-0.5px;
  margin-bottom: 3.2rem;
}

/* ***************** */
/* HEADER*/
/* ***************** */



/* ***************** */
/* NAVBAR*/
/* ***************** */
.navbar{
  display:flex;
  justify-content: space-between;
  align-items: center;
  height: 9.6rem;
  padding: 0 9.6rem;
  border-bottom: 0.2rem solid #333;
}
.logo-name{
  text-decoration: none;
  color: #333;
  height: 2.4rem; 
  font-weight: 500;
  font-size: 3.0rem;
}

.primary-button{
  width: 17.1rem;
  height: 5.1rem;
  color: #000;
  text-align: center;
  white-space: normal;
  background-color: #fafafa;
  border: 0.3rem solid #000;
  border-radius: 1rem;
  font-size: 1.6rem;
  font-weight: 500;
  line-height: 4.2rem;
  display:inline-block;
  box-shadow: 0 0.5rem #fc9925;
  text-decoration: none;
  cursor: pointer;

}

/* ***************** */
/* Side navbar*/
/* ***************** */
.menu{
  font-weight: 300;
  font-size: 3.0rem;
  text-align: left;
  padding-top: 3.2rem;
  padding-bottom: 3.2rem;
  padding-left: 2.0rem;
  color: #fafafa;
  
}
.side-navbar{
position: fixed;
right: 0;
top: 0;
width: 50vw;
height: 100vh;
background-color: #333;
overflow-y: auto;
transition: 0.3s;
display: none;
backdrop-filter: blur(5px);
  z-index: 1;
}

.side-navbar ul{
  list-style-type: none;
}

.side-navbar ul li{
text-decoration:none;
padding: 2.0rem;
border-bottom: 0.1rem solid rgba(0, 0, 0, 0.01);
border-top: 0.2rem solid rgba(255, 255, 255, 0.05);
}
 .project-name{
  color: #fafafa;
  text-decoration: none;
  font-size: 1.8rem;
}

.project-name :hover{
  color: #111;
  background-color: #fd7e14;
  
}

.menu-header{
  border-bottom: 0.3rem solid #fc9925;
  display: flex;
  justify-content: space-between;
}
.close-menu-icon {
width: 4.8rem;
padding-right: 2.0rem;
filter: invert(100%)
 sepia(3%) saturate(10%)
  hue-rotate(79deg) brightness(105%) 
  contrast(96%);
}
.close-menu-icon:hover {
  cursor: pointer;
  filter: invert(74%) sepia(48%)
  saturate(6661%) hue-rotate(351deg)
  brightness(101%) contrast(98%);
}

/* ***************** */
/* HERO SECTION */
/* ***************** */


.section-hero{
  padding: 12.8rem 0 12.8rem 0;

}
.hero{
  max-width: 120em;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 9.6rem;
  align-items: center;
  
}
.hero-description{
  font-weight: 300;
  font-size: 1.8rem;
  line-height: 2.5rem;
  margin-bottom: 4.8rem;

}
.hero-img{
  width: 100%;
  border-radius: 1rem;

}
.container{
  max-width:120rem ;
  padding: 0 3.2rem;
  margin: 0 auto;
}
.grid{
  display: grid;
  column-gap: 6.4rem;
  row-gap: 16.0rem;
  
}
.grid--2cols{
  grid-template-columns: 2fr 1fr;
}

.heading-secondary{
  letter-spacing:-0.5px;
  color: #333; 
  font-weight:400;
  font-size: 3.6rem;
  line-height: 3.5rem;
  margin-bottom: 9.6rem;
  text-align: center;
}
.heading-tertiary{
  font-weight: 400;
  font-size: 2.4rem;
  line-height: 3.0rem;
  color: #333;
  margin-bottom: 2.4rem;
}
.project-description{
  font-weight: 300;
  font-size: 1.6rem;
  line-height: 2.4rem;
  color: #333;
  margin-bottom: 9.4rem;
}
  
.project-img{
  width: 100%;
  border-radius: 1rem;

}

.text-box{
display: flex;
  flex-direction: column;
  justify-content: center;
}

.about-me-img{
  height: 25rem;
  width: 25rem;
  border-radius: 1rem;
}

.about-me{
  display: grid;
  justify-items: center;
  align-items: center;
  grid-template-columns: 1fr 1fr;
  max-width:120rem ;
  margin: 0 auto;
  margin-top: 12.8rem;
   
}

.introduction{
  font-weight: 300;
  font-size: 1.6rem;
  line-height: 2.4rem;
  color: #333;
  margin-bottom: 9.6rem;
  
}

.footer-menu-list{
  list-style-type: none;
  margin-top: 12.8rem;
  margin-bottom: 2.4rem; 
  padding-bottom: 2.4rem;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 6.4rem;
  border-bottom: 0.2rem solid #333; 
}
  

.footer-name:link, 
.footer-name:visited{
  display: inline-block;
  text-decoration: none;
  color: #333;
  font-weight: 400;
  font-size: 1rem; }
   
.footer-name{
  text-decoration: none;
  text-transform: uppercase;
}

.socials{
  color: #333;
  display: flex;
  text-align: center;
  justify-content: center;
  gap: 8.0rem;
  margin-bottom: 6.4rem;
}
.socials-img{
  width: 2.4rem;
  filter: invert(17%) sepia(21%) 
  saturate(5%) hue-rotate(5deg)
   brightness(97%) contrast(90%);
  
}


/* *************************** */
/* PROJECTS */
/* *************************** */
/* Tajrish */


.container-project{
  padding: 0 3.2rem;
  margin: 0 auto;
}
.project-title{
  padding:3.2rem 9.6rem 3.2rem 6.4rem;
  font-weight: 400;
  font-size: 2.4rem;
  line-height: 3.0rem;
  color: #333;
}
.description-text{
  padding: 0 9.6rem;
  font-weight: 300;
  font-size: 1.8rem;
  line-height: 2.5rem; 
  margin-bottom: 6.4rem;
}
.img-container{
  display: flex;
  flex-direction: column;
 row-gap: 6.4rem;
  border-radius: 1rem;
  padding: 0 9.6rem;
}

.side-by-side{
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 3.2rem;
  
}

.img--breakout{ 
  left: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  max-width: 100vw;
  position: relative;
  width: 100vw;
}

img{
  width: 100%;
}