/* DESKTOP VIEW */


@media only screen and (min-width: 1024px){

.img{
  height: 400px;
  padding: 80px;
}

.imgmedium{
  height: 450px;
}
.imgbig{
  height: 800px;
}
body {
  background-color: #ffffff;
}
@viewport{
  width: device-width;
  zoom: 1;
}

.iframe-container{
  width: 100%;
  padding: 80px;
  height: 100%;
}

.titles1 {
  color: #f29160;
  font-size: 70px;
  font-family: primot, sans-serif, Century-Gothic,CenturyGothic,AppleGothic,sans-serif ;
  font-weight: 400;
  font-style: normal;
  margin: 80px;
}

.titles2 {
  color: #f29160;
  font-size: 55px;
  font-family: primot, sans-serif, Century-Gothic,CenturyGothic,AppleGothic,sans-serif;
  font-weight: 400;
  font-style: normal;
  margin: 80px;
}
.titles3 {
  color: white;
  font-size: 55px;
  font-family: primot, sans-serif,  Century-Gothic,CenturyGothic,AppleGothic,sans-serif;
  font-weight: 400;
  font-style: normal;
  margin: 80px;
}
.text1 {
  color: #ffffff;
  font-size: 45px;
  font-family: greycliff-cf,sans-serif,  Century-Gothic,CenturyGothic,AppleGothic,sans-serif;
  font-weight: 600;
  font-style: normal;
  margin: 80px;

}

.text1 a{
  text-decoration: none;
  color: #ffffff;
}

.text1 a:hover{
  text-decoration: underline;
}

.text1 a:visited{
  color: #7a6429;
}
.text2 {
  color: #7a6429;
  font-size: 45px;
  font-family: greycliff-cf,sans-serif,  Century-Gothic,CenturyGothic,AppleGothic,sans-serif;
  font-weight: 600;
  font-style: normal;
  margin-left: 80px;

}

.text2 a{
  color:#f29160;
  text-decoration: none;
}

.text2 a:hover{
 
  text-decoration: underline;
}

.text2 a:visited{
  color:#eb6826;
}



ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

/* Navigation */



.nav{
  font-family: primot, sans-serif,  Century-Gothic,CenturyGothic,AppleGothic,sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 45px;

}
navigation a {
  display: block;
  text-align: center;
  text-decoration: none;
  padding: 15px 25px;
  color: #f29160;
  text-transform: lowercase;
  float: left;
  width: auto;
  justify-content: space-between;
 /*  width: 100%; */
}

navigation a:hover {
  color: #eb6826;
  text-decoration: none;
} 
navigation ul{
	width: auto;
}
.dropdown-content{
  font-family: greycliff-cf,sans-serif,  Century-Gothic,CenturyGothic,AppleGothic,sans-serif;
  display: none;
  margin: 0%;
  padding: 0%;
  font-size: 35px;
  font-weight: 500px;
  color:#f29160;
  float: left;
  border-color:#f29160;
  position: absolute;
  text-align: center;
  background-color: rgba(251, 222, 208, 0.64);

}

.dropdown:hover .dropdown-content,
.dropdown:active .dropdown-content{
 display: inline-block;

}



.website-name a{
  display: block;
  text-align: center;
  text-decoration: none;
  padding: 20px 70px;
  font-size: 40px;
  color: #f29160;
  text-transform: lowercase;
  line-height: 80%;
  float: left;
  font-family: primot, sans-serif;
  font-weight: 400;

}

.website-name  a:hover {
  color: #eb6826;
  text-decoration: none;
}



/* Footer  */

.website-logo {
  font-family: primot, sans-serif, Century-Gothic,CenturyGothic,AppleGothic,sans-serif;
  font-weight: 400;
  font-style: normal;
  text-align: left;
  line-height: 80%;
  position: relative;
  color:#f29160;
  font-size: 30px;
  text-decoration: none;
 
}

.website-logo a:hover{
  text-decoration: none;
  color:#f29160;

}

.footer  {
  font-size: 30px;
  color:#f29160;
  font-family: greycliff-cf,sans-serif,  Century-Gothic,CenturyGothic,AppleGothic,sans-serif;
  font-weight: 600;
  font-style: normal;
  float: left;
  display: flex;
 padding: 20px;
 margin: 20px;
 margin-left: 50px;
 position: relative;
 

}
.footertxt{
  font-weight: 400;
}
.footer a{
  text-decoration: none;
  color:#f29160;
  font-weight: 400;
  
}

.footer a:hover{
  text-decoration: underline;
  color:#eb6826;
}

/* Home */

.heads{
display: grid;
position: relative;
grid-gap: 5%;
grid-template-columns: 1fr 1fr 1fr 1fr;
grid-template-rows: auto auto;
color: #7a6429;
font-size: 45px;
font-family: greycliff-cf,sans-serif,  Century-Gothic,CenturyGothic,AppleGothic,sans-serif;
font-weight: 600;
font-style: normal;
padding: 5%;
text-align: center;
}

.heads a{
  text-decoration: none;
  color:#7a6429
}

/* About us */

.aboutus{
  display: grid;
  grid-template-columns: auto auto;
  grid-template-rows: auto auto;
 
}

#aboutus-img{
grid-row-start: 1;
grid-row-end: 2;
grid-column: 1;
}


#aboutus-text{
  grid-row: 1;
  grid-column: 2;
  text-align: justify;
}



/* Hair */

/* Introduction */
#intro-text{
  grid-row: 1;
  grid-column-start: 1;
  grid-column-end: 2;
}

#intro-img{
  grid-row: 2;
  grid-column: 2;

}

#intro-link{
  grid-row: 2;
  grid-column: 1;
  border: none;
  color: white;
  text-align: center;
  text-decoration: none;
  display: block;
  font-size: 55px;
  font-family: primot, sans-serif,  Century-Gothic,CenturyGothic,AppleGothic,sans-serif;
  font-weight: 400;
  font-style: normal;
  height:fit-content;
  width:fit-content;
  border-radius: 25px;
  margin-left: 80px;
  padding: 5px;
  animation-name: myKeyframes;
  animation-duration: 3s;
  animation-delay: 1s;
  animation-iteration-count: infinite;

}


/* Type/Texture */

.hair-container{
  display: grid;
  grid-template-columns: auto auto;
  grid-template-rows: auto auto;
  text-align: justify;
  position: relative;
}
.hair-box{
  background: rgb(255,127,80);
  background: linear-gradient(90deg, rgba(255,127,80,1) 0%, rgba(228,77,46,1) 50%, rgba(226,61,40,1) 100%);
  border: none;
  text-align: justify;
  border-radius: 25px;
  padding: 30px;
  margin-left: 80px;
  width:fit-content;
  height:fit-content;
  display:grid;
  position: relative;
  grid-template-columns: auto auto auto;
  grid-template-rows: auto auto;
  text-align: center;
  
}

#clickporosity{
 
  border: none;
  text-align: center;
  border-radius: 25px;
  height: fit-content;
  width: fit-content;
  padding: 5px;
  margin-left: 80px;
  margin-right: 80px;
  color: white;
  font-size: 55px;
  font-family: primot, sans-serif,  Century-Gothic,CenturyGothic,AppleGothic,sans-serif;
  font-weight: 400;
  font-style: normal;
  text-decoration: none;
  animation-name: myKeyframes;
  animation-duration: 3s;
  animation-delay: 1s;
  animation-iteration-count: infinite;

 
  
 
}
@keyframes myKeyframes{
  from{
    background: #FF7F50
  }
  to{
    background:#E23D28
  }
}

/* Porosity */

#porosity-box{
  background: rgb(255,127,80);
  background: linear-gradient(90deg, rgba(255,127,80,1) 0%, rgba(228,77,46,1) 50%, rgba(226,61,40,1) 100%);
  border: none;
  text-align: center;
  border-radius: 25px;
  height: fit-content;
  width: fit-content;
  padding: 5px;
  margin-left: 80px;
  margin-right: 80px;

}

#low{
  background: #FF7F50;
  border: none;
  text-align: left;
  border-radius: 25px;
  height: fit-content;
  width: fit-content;
  padding: 5px;
  margin-left: 80px;
  margin-right: 80px;
  list-style: circle;

}


#medium{
  background: #E44D2E;
  border: none;
  text-align: left;
  border-radius: 25px;
  height: fit-content;
  width: fit-content;
  padding: 5px;
  margin-left: 80px;
  margin-right: 80px;
  list-style: circle;
}


#high{
  background: #E23D28;
  border: none;
  text-align: left;
  border-radius: 25px;
  height: fit-content;
  width: fit-content;
  padding: 5px;
  margin-left: 80px;
  margin-right: 80px;
  list-style: circle;
}


/* Skin */

#products{
  display: grid;
  grid-template-columns: 600px 600px;
  grid-template-rows: auto auto;
  row-gap: 5px;
  column-gap: 5px;


}

#skin-box{
  background: rgb(255,127,80);
  background: linear-gradient(90deg, rgba(255,127,80,1) 0%, rgba(228,77,46,1) 50%, rgba(226,61,40,1) 100%);
  border: none;
  border-radius: 25px;
  height: fit-content;
  width: fit-content;
  padding: 15px;
  margin: 80px;


}

#product-details{
  text-align:center;
  grid-column: 1/-1;


}

}

/* TABLET VIEW */

@media only screen and (min-width: 768px) and (max-width: 1023px){
  body {
    background-color: #ffffff;
  }
  @viewport{
    width: device-width;
    zoom: 1;
  }
.img{
  height: 200px;
}
.imgmedium{
  height: 250px;
}

.imgbig{
  height: 400px;
}
  .titles1 {
    color: #f29160;
    font-size: 70px;
    font-family: primot, sans-serif,  Century-Gothic,CenturyGothic,AppleGothic,sans-serif;
    font-weight: 400;
    font-style: normal;
    margin: 20px;
  }
  
  .titles2 {
    color: #f29160;
    font-size: 55px;
    font-family: primot, sans-serif, Century-Gothic,CenturyGothic,AppleGothic,sans-serif;
    font-weight: 400;
    font-style: normal;
    margin: 20px;
  }
  .titles3 {
    color: white;
    font-size: 55px;
    font-family: primot, sans-serif,  Century-Gothic,CenturyGothic,AppleGothic,sans-serif;
    font-weight: 400;
    font-style: normal;
    margin: 20px;
  }
  .text1 {
    color: #ffffff;
    font-size: 45px;
    font-family: greycliff-cf,sans-serif,  Century-Gothic,CenturyGothic,AppleGothic,sans-serif;
    font-weight: 600;
    font-style: normal;
    margin: 20px;
  
  }
  
  .text1 a{
    text-decoration: none;
    color: #ffffff;
  }
  
  .text1 a:hover{
    text-decoration: underline;
  }
  
  .text1 a:visited{
    color: #7a6429;
  }
  .text2 {
    color: #7a6429;
    font-size: 45px;
    font-family: greycliff-cf,sans-serif,  Century-Gothic,CenturyGothic,AppleGothic,sans-serif;
    font-weight: 600;
    font-style: normal;
    margin-left: 20px;


  }


  .text2 a{
    color:#f29160;
    text-decoration: none;
  }
  
  .text2 a:hover{
   
    text-decoration: underline;
  }
  
  .text2 a:visited{
    color:#eb6826;
  }
  
  ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
  }
 

  /* Navigation */
  
  
  
  .nav{
    font-family: primot, sans-serif,  Century-Gothic,CenturyGothic,AppleGothic,sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 35px;
  
  }
  navigation a {
    display: inline-block;
    text-align: center;
    text-decoration: none;
    padding: 20px;
    margin-left: 20px;
  
    color: #f29160;
    text-transform: lowercase;
    width: 25%;
    justify-content: space-between;
  }
  
  navigation a:hover {
    color: #eb6826;
    text-decoration: none;
  } 
  navigation ul{
    width: auto;
  }
  .dropdown-content{
    font-family: greycliff-cf,sans-serif;
    display: none;
    margin: 0%;
    padding: 0%;
    font-size: 35px;
    font-weight: 500px;
    color:#f29160;
    float: left;
    border-color:#f29160;
    position: absolute;
    text-align: center;
    background-color: rgba(251, 222, 208, 0.64);
  
  }
  
  .dropdown:hover .dropdown-content,
  .dropdown:active .dropdown-content{
   display: inline-block;
  
  }
  
  
  
  .website-name a{
    display: block;
    text-align: center;
    text-decoration: none;

    font-size: 40px;
    color: #f29160;
    text-transform: lowercase;
    line-height: 80%;
    float: left;
    font-family: primot, sans-serif,  Century-Gothic,CenturyGothic,AppleGothic,sans-serif;
    font-weight: 400;
    margin-right: 600px;
  
  }
  
  .website-name  a:hover {
    color: #eb6826;
    text-decoration: none;
  }
  
  
  
  /* Footer  */
  
  .website-logo {
    font-family: primot, sans-serif,  Century-Gothic,CenturyGothic,AppleGothic,sans-serif;
    font-weight: 400;
    font-style: normal;
    text-align: left;
    line-height: 80%;
    position: relative;
    color:#f29160;
    font-size: 30px;
    text-decoration: none;
   
  }
  
  .website-logo a:hover{
    text-decoration: none;
    color:#f29160;
  
  }
  
  .footer  {
    font-size: 30px;
    color:#f29160;
    font-family: greycliff-cf,sans-serif;
    font-weight: 600;
    font-style: normal;
    float: left;
    display: flex;
   padding: 20px;
   margin: 20px;
   margin-left: 50px;
   position: relative;
   
  
  }
  .footertxt{
    font-weight: 400;
  }
  .footer a{
    text-decoration: none;
    color:#f29160;
    font-weight: 400;
    
  }
  
  .footer a:hover{
    text-decoration: underline;
    color:#eb6826;
  }
  
  /* Home */
  
  .heads{
  display: grid;
  position: relative;
  grid-gap: 5%;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-template-rows: auto auto;
  color: #7a6429;
  font-size: 45px;
  font-family: greycliff-cf,sans-serif,  Century-Gothic,CenturyGothic,AppleGothic,sans-serif;
  font-weight: 600;
  font-style: normal;
  padding: 5%;
  text-align: center;
  }
  
  .heads a{
    text-decoration: none;
    color:#7a6429
  }
  
  /* About us */
  
  .aboutus{
    display: grid;
    grid-template-columns: auto auto;
    grid-template-rows: auto auto;
   
  }
  
  #aboutus-img{
  grid-row-start: 1;
  grid-row-end: 2;
  grid-column: 1;
  }
  
  
  #aboutus-text{
    grid-row: 1;
    grid-column: 2;
    text-align: justify;
  }
  
  
  
  /* Hair */
  
  /* Introduction */
  #intro-text{
    grid-row: 1;
    grid-column-start: 1;
    grid-column-end: 2;
  }
  
  #intro-img{
    grid-row: 2;
    grid-column: 2;
  }
  
  #intro-link{
    grid-row: 2;
    grid-column: 1;
    border: none;
    color: white;
    text-align: center;
    text-decoration: none;
    display: block;
    font-size: 55px;
    font-family: primot, sans-serif,  Century-Gothic,CenturyGothic,AppleGothic,sans-serif;
    font-weight: 400;
    font-style: normal;
    height:fit-content;
    width:fit-content;
    border-radius: 25px;
    margin-left: 80px;
    padding: 5px;
    animation-name: myKeyframes;
    animation-duration: 3s;
    animation-delay: 1s;
    animation-iteration-count: infinite;
  
  }
  
  
  /* Type/Texture */
  
  .hair-container{
    display: grid;
    grid-template-columns: auto auto;
    grid-template-rows: auto auto;
    text-align: justify;
    position: relative;
  }
  .hair-box{
    background: rgb(255,127,80);
    background: linear-gradient(90deg, rgba(255,127,80,1) 0%, rgba(228,77,46,1) 50%, rgba(226,61,40,1) 100%);
    border: none;
    text-align: justify;
    border-radius: 25px;
    padding: 30px;
    margin-left: 80px;
    width:fit-content;
    height:fit-content;
    display:grid;
    position: relative;
    grid-template-columns: auto auto auto;
    grid-template-rows: auto auto;
    text-align: center;
    
  }
  
  #clickporosity{
   
    border: none;
    text-align: center;
    border-radius: 25px;
    height: fit-content;
    width: fit-content;
    padding: 5px;
    margin-left: 80px;
    margin-right: 80px;
    color: white;
    font-size: 55px;
    font-family: primot, sans-serif,  Century-Gothic,CenturyGothic,AppleGothic,sans-serif;
    font-weight: 400;
    font-style: normal;
    text-decoration: none;
    animation-name: myKeyframes;
    animation-duration: 3s;
    animation-delay: 1s;
    animation-iteration-count: infinite;
  
   
    
   
  }
  @keyframes myKeyframes{
    from{
      background: #FF7F50
    }
    to{
      background:#E23D28
    }
  }
  
  /* Porosity */
  
  #porosity-box{
    background: rgb(255,127,80);
    background: linear-gradient(90deg, rgba(255,127,80,1) 0%, rgba(228,77,46,1) 50%, rgba(226,61,40,1) 100%);
    border: none;
    text-align: center;
    border-radius: 25px;
    height: fit-content;
    width: fit-content;
    padding: 5px;
    margin-left: 80px;
    margin-right: 80px;
  
  }
  
  #low{
    background: #FF7F50;
    border: none;
    text-align: left;
    border-radius: 25px;
    height: fit-content;
    width: fit-content;
    padding: 5px;
    margin-left: 80px;
    margin-right: 80px;
    list-style: circle;
  
  }
  
  
  #medium{
    background: #E44D2E;
    border: none;
    text-align: left;
    border-radius: 25px;
    height: fit-content;
    width: fit-content;
    padding: 5px;
    margin-left: 80px;
    margin-right: 80px;
    list-style: circle;
  }
  
  
  #high{
    background: #E23D28;
    border: none;
    text-align: left;
    border-radius: 25px;
    height: fit-content;
    width: fit-content;
    padding: 5px;
    margin-left: 80px;
    margin-right: 80px;
    list-style: circle;
  }
  
  
  /* Skin */
  
  #products{
    display: grid;
    grid-template-columns: 600px 600px;
    grid-template-rows: auto auto;
    row-gap: 5px;
    column-gap: 5px;
  
  
  }
  
  #skin-box{
    background: rgb(255,127,80);
    background: linear-gradient(90deg, rgba(255,127,80,1) 0%, rgba(228,77,46,1) 50%, rgba(226,61,40,1) 100%);
    border: none;
    border-radius: 25px;
    height: fit-content;
    width: fit-content;
    padding: 15px;
    margin-left: 10px;
    margin-right: 10px;
  
  }
  
  #product-details{
    text-align:left;
    grid-column: 1/-1;
    max-width: 80%;
  
  
  }

}

/* SMARTPHONE VIEW */
@media only screen and (max-width: 767px) and (orientation: portrait){ 
  body {
    background-color: #ffffff;

  }
  @viewport{
    width: device-width;
    zoom: 1;
  }
  .img{
    width: 250px;
    
  }
  .imgmedium{
    width: 300px;
  }
  
  .imgbig{
    height: 350px;

  }
  .iframe-container{
    position: relative;
    width: 100%;
    padding-bottom: 56.25%;
    height: 0;

  }
  .iframe-container iframe{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
  .titles1 {
    color: #f29160;
    font-size: 40px;
    font-family: primot, sans-serif,  Century-Gothic,CenturyGothic,AppleGothic,sans-serif;
    font-weight: 400;
    font-style: normal;
    margin: 10px;
    max-width: 100%;
  }
  
  .titles2 {
    color: #f29160;
    font-size: 40px;
    font-family: primot, sans-serif,  Century-Gothic,CenturyGothic,AppleGothic,sans-serif;
    font-weight: 400;
    font-style: normal;
    margin: 10px;
    max-width: 100%;
  }
  .titles3 {
    color: white;
    font-size: 40px;
    font-family: primot, sans-serif, Century-Gothic,CenturyGothic,AppleGothic,sans-serif;
    font-weight: 400;
    font-style: normal;
    margin: 10px;
    max-width: 100%;
  }
  .text1 {
    color: #ffffff;
    font-size: 30px;
    font-family: greycliff-cf,sans-serif, Century-Gothic,CenturyGothic,AppleGothic,sans-serif;
    font-weight: 600;
    font-style: normal;
    margin: 10px;
    max-width: 100%;
  }
  
  .text1 a{
    text-decoration: none;
    color: #ffffff;
  }
  
  .text1 a:hover{
    text-decoration: underline;
  }
  
  .text1 a:visited{
    color: #7a6429;
  }
  .text2 {
    color: #7a6429;
    font-size: 30px;
    font-family: greycliff-cf,sans-serif, Century-Gothic,CenturyGothic,AppleGothic,sans-serif;
    font-weight: 600;
    font-style: normal;
    margin: 10px;
    max-width: 100%;
    
  }
  
  .text2 a{
    color:#f29160;
    text-decoration: none;
  }
  
  .text2 a:hover{
   
    text-decoration: underline;
  }
  
  .text2 a:visited{
    color:#eb6826;
  }
  
  ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
  }
  
  /* Navigation */
  
  
  
  .nav{
    font-family: primot, sans-serif, Century-Gothic,CenturyGothic,AppleGothic,sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 30px;
  
  }
  navigation a {
    display: inline-block;
    text-align: center;
    text-decoration: none;
    padding: 10px;
    margin-left: 20px;
  
    color: #f29160;
    text-transform: lowercase;
    width: auto;
    justify-content: space-between;
   /*  width: 100%; */
  }
  
  navigation a:hover,
  navigation a:active
  {
    color: #eb6826;
    text-decoration: none;
  } 
  navigation ul{
    width: auto;
  }
  .dropdown-content{
    font-family: greycliff-cf,sans-serif,Century-Gothic,CenturyGothic,AppleGothic,sans-serif;
    display: none;
    margin: 0%;
    padding: 0%;
    font-size: 25px;
    font-weight: 500px;
    color:#f29160;
    float: left;
    border-color:#f29160;
    position: absolute;
    text-align: center;
    background-color: rgba(251, 222, 208, 0.64);
  
  }
  
  .dropdown:hover .dropdown-content,
  .dropdown:active .dropdown-content{
   display: inline-block;
  
  }
  
  
  
  .website-name a{
    display: block;
    text-align: center;
    text-decoration: none;
    padding: 5px 60px ;
    font-size: 30px;
    color: #f29160;
    text-transform: lowercase;
    line-height: 80%;
    float: left;
    font-family: primot, sans-serif, Century-Gothic,CenturyGothic,AppleGothic,sans-serif;
    font-weight: 400;
    margin-left: 0;
  
  }
  
  .website-name  a:hover,
  .website-name  a:active
   {
    color: #eb6826;
    text-decoration: none;
  }
  
  
  
  /* Footer  */
  
  .website-logo {
    font-family: primot, sans-serif, Century-Gothic,CenturyGothic,AppleGothic,sans-serif;
    font-weight: 400;
    font-style: normal;
    text-align: left;
    line-height: 80%;
    position: relative;
    color:#f29160;
    font-size: 30px;
    text-decoration: none;
   
  }
  
  .website-logo a:hover{
    text-decoration: none;
    color:#f29160;
  
  }
  .footertxt{
    font-weight: 400;
  }
  .footer  {
    font-size: 30px;
    color:#f29160;
    font-family: greycliff-cf,sans-serif, Century-Gothic,CenturyGothic,AppleGothic,sans-serif;
    font-weight: 600;
    font-style: normal;
    float: left;
    display: flex;
   padding: 20px;
   margin: 20px;
   margin-left: 50px;
   position: relative;
   
  
  }
  
  .footer a{
    text-decoration: none;
    color:#f29160;
    font-weight: 400;
    
  }
  
  .footer a:hover{
    text-decoration: underline;
    color:#eb6826;
  }

  footer{
    margin-top: 600px;
  }
  

  /* Home */
  
  .heads{
  display: grid;
  position: relative;
  grid-gap: 5%;
  grid-template-columns: 1fr ;
  grid-template-rows: auto auto auto auto;
  color: #7a6429;
  font-size: 20px;
  font-family: greycliff-cf,sans-serif, Century-Gothic,CenturyGothic,AppleGothic,sans-serif;
  font-weight: 600;
  font-style: normal;
  padding: 5%;
  text-align: center;
  max-width: 100%;
  }
  
  .heads a{
    text-decoration: none;
    color:#7a6429
  }

  #head1{
    grid-row: 1;
    grid-column: 1;
    height: 50px;
    width: 50px;


  }
  
  
  /* About us */
  
  .aboutus{
    display: grid;
    grid-template-columns: auto auto;
    grid-template-rows: auto auto;
   
  }
  
  #aboutus-img{
  grid-row-start: 1;
  grid-row-end: 2;
  grid-column: 1;
  }
  
  
  #aboutus-text{
    grid-row: 1;
    grid-column: 2;
    text-align: justify;
  }
  
  
  
  /* Hair */
  
  /* Introduction */
  #intro-text{
    grid-row: 1;
    grid-column-start: 1;
    grid-column-end: 2;
  }
  
  #intro-img{
    grid-row: 2;
    grid-column: 2;
  }
  
  #intro-link{
    grid-row: 2;
    grid-column: 1;
    border: none;
    color: white;
    text-align: center;
    text-decoration: none;
    display: block;
    font-size: 55px;
    font-family: primot, sans-serif, Century-Gothic,CenturyGothic,AppleGothic,sans-serif;
    font-weight: 400;
    font-style: normal;
    height:fit-content;
    width:fit-content;
    border-radius: 25px;
    margin-left: 80px;
    padding: 5px;
    animation-name: myKeyframes;
    animation-duration: 3s;
    animation-delay: 1s;
    animation-iteration-count: infinite;
  
  }
  
  
  /* Type/Texture */
  
  .hair-container{
    display: grid;
    grid-template-columns: auto auto;
    grid-template-rows: auto auto;
    text-align: justify;
    position: relative;
  }
  .hair-box{
    background: rgb(255,127,80);
    background: linear-gradient(90deg, rgba(255,127,80,1) 0%, rgba(228,77,46,1) 50%, rgba(226,61,40,1) 100%);
    border: none;
   
    border-radius: 25px;
    padding: 30px;
    margin-left: 10px;
    width:fit-content;
    height:fit-content;
    display:grid;
    position: relative;
    grid-template-columns: auto ;
    grid-template-rows: auto auto auto auto auto auto;


    
  }

  #typea{
    grid-row: 2;
  }
  #typeb{
    grid-row: 4;
  }
  #clickporosity{
   
    border: none;
    text-align: center;
    border-radius: 25px;
    height: fit-content;
    width: fit-content;
    padding: 5px;
    margin-left: 10px;
    margin-right: 10px;
    color: white;
    font-size: 25px;
    font-family: primot, sans-serif, Century-Gothic,CenturyGothic,AppleGothic,sans-serif;
    font-weight: 300;
    font-style: normal;
    text-decoration: none;
    animation-name: myKeyframes;
    animation-duration: 3s;
    animation-delay: 0s;
    animation-iteration-count: infinite;
  
 
  
  }
  @keyframes myKeyframes{
    from{
      background: #FF7F50
    }
    to{
      background:#E23D28
    }
  }
  
  /* Porosity */
  
  #porosity-box{
    background: rgb(255,127,80);
    background: linear-gradient(90deg, rgba(255,127,80,1) 0%, rgba(228,77,46,1) 50%, rgba(226,61,40,1) 100%);
    border: none;
    text-align: left;
    border-radius: 25px;
    height: fit-content;
    width: fit-content;
    padding: 30px;
    margin-left: 10px;
    margin-right: 10px;
  
  }
  
  #low{
    background: #FF7F50;
    border: none;
    text-align: left;
    border-radius: 25px;
    height: fit-content;
    width: fit-content;
    padding: 30px;
    margin-left: 10px;
    margin-right: 10px;
    list-style: circle;
  
  }
  
  
  #medium{
    background: #E44D2E;
    border: none;
    text-align: left;
    border-radius: 25px;
    height: fit-content;
    width: fit-content;
    padding: 30px;
    margin-left: 10px;
    margin-right: 10px;
    list-style: circle;

  }
  
  
  #high{
    background: #E23D28;
    border: none;
    text-align: left;
    border-radius: 25px;
    height: fit-content;
    width: fit-content;
    padding: 30px;
    margin-left: 10px;
    margin-right: 10px;
    list-style: circle;
  }
  
  
  /* Skin */
  
  #products{
    display: grid;
    grid-template-columns: 500px ;
    grid-template-rows: 1fr 1fr 1fr;
    row-gap: 5px;
    column-gap: 5px;
    max-width: 100%;
  
  
  }
  
  #skin-box{
    background: rgb(255,127,80);
    background: linear-gradient(90deg, rgba(255,127,80,1) 0%, rgba(228,77,46,1) 50%, rgba(226,61,40,1) 100%);
    border: none;
    border-radius: 25px;
    height: fit-content;
    width: fit-content;
    padding: 15px;
    margin-left: 10px;
    margin-right: 10px;
    max-width: 100%;

  
  }
  
  #product-details{
    text-align:center;
    grid-row: 3;
    max-width: 50%;
    text-align: left;
  
  
  }
}