/* Google Fonts */

@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

* {
 font-family: "Poppins", sans-serif;
 margin: 0;
 padding: 0;
 box-sizing: border-box;
 scroll-behavior: smooth;
 scroll-padding-top: 4rem;
 list-style: none;
 text-decoration: none;



}



:root{
  /* Variables */
 --main-color:#ff6d46;
 --second-color:#ecfdf8;
 --text-color:#121011;
 --bg-color:#fff;
 --bage-color:#eeeee6;
 --button-bk-color:#2f2f2f;
 --bk-black-color:#111827;
--icon-color:rgb(134,141,151);
--hover1-color:#253047;
--hover2-color: #F3F4F6;

/* Box Shadow */
--box-shadow:0 0 16px 1px rgb(14 52 54 / 15%);

--dark1:#0000004d;
  --dark2:#181c20;
  --dark3:#212529;
  --dark4:#2d3135;
  --dark5:#424549;
  --dark6:#404346;
  --dark7:#9c9c9c;
  --dark8:#dae0e7;
  --dark9:#262a2e;
  --red1:#902e31;

}

section{
  padding: 50px 100px;
}

img{
  width: 100%;
}

body{
  color: var(--text-color);
  
}

header{
  position: fixed;
  width: 100%;
  top: 0;
  right: 0;
  background:  var(--text-color);
  display: flex;
  align-items: center;
  justify-content: space-between;
  z-index: 1000;
  padding: 5px 100px;
  transition: 0.5;
  box-shadow: 0 5px 30px  rgba(237, 241, 241, 0.3);
}
header.active{
  box-shadow: var(--box-shadow);
}
.header-left-section{
   width: 180px; 
  padding-top: 4px; 
  

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

.header-h2{
  
  color: var(--second-color);
  margin-left: 8px;
}

.logo{
  width: 100%; 
}

.logo img{
  
border-radius: 50%;
background: var(--bg-color);
  
}

.navbar{
  display: flex;
  align-items: center;
   
  
}

.navbar a{
 
  padding: 8px 10px;
  color: var(--icon-color);
  font-size: 0.90rem;
  text-transform: uppercase;
  font-weight: 500;
  
}

.navbar a:hover{
  
   color: var(--hover2-color);
  background: var(--dark4);
  border-radius: 20px;
}

#menu-icon{
  font-size: 34px;
  color: var(--second-color);
  z-index: 10001;
  cursor: pointer;
  display: none;
}
.header-right-section {
  width: 180px;
  flex-shrink: 0;
  display: flex;
  justify-content: end;
}

.header-icon{
   font-size: 20px;
   cursor: pointer;
   z-index: 1000;
   display: flex;
   column-gap: 0.8rem;
   align-items: center;
}


.header-icon .bx{ 
  color: var(--dark8);
  background: var(--dark4);
 padding: 7px;
 border-radius: 0.4rem ;
}

.header-icon .bx:hover{ 
  background: var(--main-color);
 color: var(--second-color); 
 box-shadow: 0 10px 20px  rgba(237, 241, 241, 0.4);
  border: none ;
}

.header-icon i{
  position: relative;
}

.header-icon span{
  position: absolute;
  top: -7px;
  right: -7px;
  width: 18px;
  height: 18px;
  display: flex;
   align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgb(255, 81, 0);
  color: var(--bg-color);
  font-size: 0.6rem;
  font-weight: 500;
}




.search-box{
  position: absolute;
  top: 110%;
  right: -100%;
  background: var(--bg-color);
  width: 280px;
  box-shadow: var(--box-shadow);
}

.search-box input{
  border: none;
  outline: none;
  width: 100%;
  font-size: 1rem;
  padding: 20px;
  color: var(--main-color);
}

.search-box input::placeholder{
  font-size: 1rem;
  font-weight: 500;

}

.search-box.active{
    right: 1rem;
    transition: 0.2s all linear;
}




.home{
  width: 100%;
  min-height: 740px;
  display: grid;
  align-items: center;
  grid-template-columns: repeat(auto-fit,minmax(17rem,auto));
  gap: 1.5rem;
  background: var(--text-color);
}

.home-text h3{
 font-size: 1rem;
 font-weight: 500;
 text-transform: uppercase;
 color: var(--main-color);
}

.home-text h1{
 font-size: 3.4rem;
 letter-spacing: 1px;
 color: var(--second-color);
}
.home-text span{
  color: var(--main-color);
}


.home-text p{
 max-width: 80%;
 font-size: 0.938em;
 margin: 00.5rem 0 1.5rem;
}

.btn{
  padding: 10px 40px;
  border-radius: 0.3rem;
  font-weight: 500;
  color: var(--dark8);
  background: var(--dark4);
}

.btn:hover{
  background: var(--main-color);
  color: var(--bg-color);
   box-shadow: 0 10px 20px  rgba(237, 241, 241, 0.4);
   border: none ;
}

.home-img{
  animation:  float 3s linear infinite;
  border-radius: 40px;
 box-shadow: 0 15px 30px  rgba(237, 241, 241, 0.4);
 margin-top: 120px;
 width: 80%;
}

@keyframes float {
  0%,100%{
    transform: translateY(-3.5rem);
  }
   50%{
    transform: translateY(1rem);
  }
}

.about{
  display: grid;
  align-items: center;
  grid-template-columns: repeat(auto-fit,minmax(17rem,auto));
  gap: 1.5rem;
  background: var(--button-bk-color);
  color: var(--second-color);
}

.about-text h2{
  font-size: 1.8rem;
  text-transform: uppercase;
}

.about-text p{
  font-size: 0.938rem;
  margin: 00.5rem 0 1.1rem;
}

.heading{
  text-align: center;
}
.heading h2{
   font-size: 1.8rem;
  text-transform: uppercase;
}

#abotBtn{
color: var(--dark8);
  background: var(--dark3);
}

.products-container{
  display: grid;
  align-items: center;
  grid-template-columns: repeat(auto-fit,minmax(280px,auto));
  gap: 1.5rem;
  margin-top: 2rem;
  
}
.products{
  background: var(--text-color);
  color: var(--second-color);
}

.products-container .box{
  position: relative;
  padding: 10px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  border-radius: 0.5rem;
  /* box-shadow: var(--box-shadow); */
   background:var(--button-bk-color);
  
}

.products-container .box img{
  width: 100%;
  height: 250px;
  object-fit: contain;
  object-position: center;
  padding: 20px;
   background: var(--bage-color); 
  border-radius: 0.5rem;
}
.products-container .box:hover img{
  -webkit-transform: scaleX(-1);
  -moz-transform: scaleX(-1);
  -o-transform: scaleX(-1);
  transform: scaleX(-1);
  transition: 0.4s all linear ;
}
.products-container .box h2{
  font-size: 1rem;
  font-weight: 600;
  text-transform: uppercase;
  margin: 0.5rem 0 0.5rem;
}
.products-container .box span{
  font-size: 1rem;
  font-weight: 600;
  color: var(--main-color);
}
.products-container .box .bx{
  position: absolute;
  bottom: 0;
  right: 0;
  padding: 10px;
  font-size: 20px;
  color: var(--bg-color);
  background: var(--main-color);
  border-radius: 0.5rem 0 0.5rem 0;
  cursor: pointer;
}
.products-container .box .bx:hover{
   background:#ff8664;
}
.customers{
   background: var(--button-bk-color);
   color: var(--second-color)
}
.customers-container{
  display: grid;
  align-items: center;
  grid-template-columns: repeat(auto-fit,minmax(280px,auto));
  gap: 1.5rem;
  margin-top: 2rem;
 
}
.customers-container .box{
  padding: 20px;
  box-shadow: var(--box-shadow);
  border-radius: 0.5rem ;
  text-align: center;
  background: var(--text-color);
}




.stars .bx{
  color: var(--main-color);
}

.customers-container .box img{
  width: 70px;
  height: 70px;
   border-radius: 50%;
  object-fit: cover;
  object-position: center;
  
  
}

.customers-container .box h2{
  font-size: 1.2rem;
  font-weight: 600;
  
}

.customers-container .box p{
  font-size: 0.938rem;
  margin: 0.5 0 0.5rem;
  
}

.customers-container .box:hover{
  background: var(--second-color);
  color: var(--text-color);
  box-shadow: 0 10px 20px  rgba(237, 241, 241, 0.4);
  transition: 0.2s all linear;
  cursor: pointer;
}

.newsletter{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  row-gap: 2rem;
  
}

.newsletter h2{
  font-size: 1.8rem;
 text-transform: uppercase;
  
}

.newsletter  form{
  background: var(--bg-color);
  padding: 10px;
  border-radius: 0.5rem;
  box-shadow: var(--box-shadow);
}

.newsletter form input{
  width: 200px;
  border: none;
  outline: none;
  background: transparent;
}
.newsletter form .email-btn{
color: var(--dark8);
  background: var(--dark4);
padding: 8px 14px;
text-transform: uppercase;
font-size: 1rem;
font-weight: 500;
max-width: 115px;
border-radius: 0.5rem;
}

.footer{
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(240px,auto));
  gap: 1.5rem;
  background-color: var(--bage-color);
  
}



.footer-box a{
  margin-bottom: 10px;
  font-size: 1rem;
  color: var(--text-color);
  
}
.footer-box .logo-social img{
  width: 100px;
  
}

.footer-box a:hover{
  color: var(--main-color);
}

.footer-box p{
 font-size: 0.938rem;
  margin: 10px;
  
}
.social{
  display: flex;
  align-items: center;
  column-gap: 0.5rem;
}
.social a .bx{
  font-size: 24px;
  color: var(--text-color);
  padding: 10px;
  background: var(--bage-color);
  border-radius: 5rem;
}
.social a .bx:hover{
  background: var(--main-color);
  color: var(--bg-color);
}
.footer-box h3{
  font-weight: 600;
  margin-bottom: 10px;
}
.contact{
  display: flex;
  flex-direction: column;
  row-gap: 0.5rem;
}
.contact span{
  display: flex;
  align-items: center;
}
.contact i{
  font-size: 20px;
  margin-right: 1rem;
}

.copyright{
  display: flex;
  justify-content:center;
  align-items: center;
  padding: 20px;
  text-align: center;
 background: var(--text-color);
 color: var(--second-color);
}
.form-control{
  margin-right: 20px;
}


.copyright select{
  padding: 5px 10px;
  border: 1px solid var(--dark5);
  color: var(--dark8);
  background: var(--dark4);
  border-radius: 5px;
  outline: none;
  transition: 0.3s ease;
  cursor: pointer;
  margin-right: 10px;
}





@media (max-width: 1058px){
  header {
    padding: 16px 60px;
  }
  section {
  padding: 50px 60px;
  }
  .home-text h1{
    font-size: 2.4rem;
  }

}

@media (max-width: 991px){
header {
    padding: 16px 4%;
  }
  section {
  padding: 50px 4%;
  }
  .products-container{
    grid-template-columns: repeat(auto-fit,minmax(240px,auto));
  }
}

@media (max-width: 768px){
  header {
    padding: 12px 4%;
  }
  #menu-icon{
    display: inline;
  }
  .navbar{
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    display: flex;
    flex-direction: column;
    background: var(--bg-color);
    row-gap: 1.4rem;
    padding: 20px;
    transition: 0.4s all linear;
    text-align: center;
    clip-path: circle(0% at 100% 1%);
    
  }

.navbar.active{
clip-path: circle(144% at 100% 1%);
}


}

@media (max-width: 614px){
  .home-text{
    padding: 15px;
  }
  .home-text h1{
    font-size: 2rem;
  }
  .about{
    text-align: center;
  }
  .about-img{
    order: 2;
  }

  
}

/* *************************** */
@media (max-width: 360px){
  header{
    padding: 11px 4%;
  }
  
  .header-icon .bx{
  padding: 4px ;
  }
  

.header-middle-section i{
  /* background: rgb(177, 214, 9); */
  
 position: fixed;
 top: 5%; 
  
}

.header-left-section{
  /* background: violet; */
  position: relative;
  margin-right: 10px;
  
}


.header-h2{
  visibility: initial;
}

.home-text{
  /* background: var(--bg-color); */
   text-align: center;
 margin-top: 50px;
}


.home-text h3{
 font-size: 1.5rem;
 font-weight: 400;
 
}

.home-text h1{
 font-size: 3.4rem;
 letter-spacing: 1px;
 color: var(--second-color);
}
.home-text span{
  color: var(--main-color);
}


.home-text p{
 max-width: 100%;
 font-size: 0.938em;
 margin: 00.5rem 0 1.5rem;
 color: var(--second-color);
}

.btn{
  padding: 10px 40px;
  border-radius: 0.3rem;
  font-weight: 500;
  color: var(--dark8);
  background: var(--dark4);
}

.btn:hover{
  background: var(--main-color);
  color: var(--bg-color);
   box-shadow: 0 10px 20px  rgba(237, 241, 241, 0.4);
   border: none ;
}

.home-img{
  /* animation:  float 3s linear infinite; */
  animation:  none;
  border-radius: 40px;
 /* box-shadow: 0 15px 30px  rgba(237, 241, 241, 0.4); */
 box-shadow: none;
 margin-top: 40px;
 width: 100%;

}


  .newsletter form input{
    width: auto;
  }
  .support{
    text-align: center;
  }
  .guides{
    text-align: center;
  }
  .contact {
 
  justify-content: center;

}
.copyright{
  font-size: 0.7rem;
}
.social{
  justify-content: center;
}
a.logo-social{
  display: flex;
  flex-direction: column;
  text-align: center;
  align-items: center;
}

.footer-box.contact{
  display: flex;
  flex-direction: column;
  text-align: center;
  align-items: center;
}
}

/* *************************** */
@media (max-width: 375px){
  header{
    padding: 11px 4%;
  }
  
  .header-icon .bx{
  padding: 4px ;
  }
  
.header-middle-section i{
  /* background: rgb(177, 214, 9); */
  
 position: fixed;
 top: 5%; 
  
}

.header-left-section{
  /* background: violet; */
  position: relative;
  margin-right: 10px;
  
}


.header-h2{
  visibility: initial;
}

.home-text{
  /* background: var(--bg-color); */
   text-align: center;
 margin-top: 50px;
}


.home-text h3{
 font-size: 1.5rem;
 font-weight: 400;
 
}

.home-text h1{
 font-size: 3.4rem;
 letter-spacing: 1px;
 color: var(--second-color);
}
.home-text span{
  color: var(--main-color);
}


.home-text p{
 max-width: 100%;
 font-size: 0.938em;
 margin: 00.5rem 0 1.5rem;
 color: var(--second-color);
}

.btn{
  padding: 10px 40px;
  border-radius: 0.3rem;
  font-weight: 500;
  color: var(--dark8);
  background: var(--dark4);
}

.btn:hover{
  background: var(--main-color);
  color: var(--bg-color);
   box-shadow: 0 10px 20px  rgba(237, 241, 241, 0.4);
   border: none ;
}

.home-img{
  /* animation:  float 3s linear infinite; */
  animation:  none;
  border-radius: 40px;
 /* box-shadow: 0 15px 30px  rgba(237, 241, 241, 0.4); */
 box-shadow: none;
 margin-top: 40px;
 width: 100%;

}


  .newsletter form input{
    width: auto;
  }
  .support{
    text-align: center;
  }
  .guides{
    text-align: center;
  }
  .contact {
 
  justify-content: center;

}
.copyright{
  font-size: 0.7rem;
}
.social{
  justify-content: center;
}
a.logo-social{
  display: flex;
  flex-direction: column;
  text-align: center;
  align-items: center;
}

.footer-box.contact{
  display: flex;
  flex-direction: column;
  text-align: center;
  align-items: center;
}
}
/* *************************** */
@media (max-width: 414px){
  header{
    padding: 11px 4%;
  }
  
  .header-icon .bx{
  padding: 4px ;
  }
  

.header-middle-section i{
  /* background: rgb(177, 214, 9); */
  
 position: fixed;
 top: 5%; 
  
}

.header-left-section{
  /* background: violet; */
  position: relative;
  margin-right: 10px;
  
}


.header-h2{
  visibility: initial;
}

.home-text{
  /* background: var(--bg-color); */
   text-align: center;
 margin-top: 60px;
}


.home-text h3{
 font-size: 1.5rem;
 font-weight: 400;
 
}

.home-text h1{
 font-size: 3.4rem;
 letter-spacing: 1px;
 color: var(--second-color);
}
.home-text span{
  color: var(--main-color);
}


.home-text p{
 max-width: 100%;
 font-size: 0.938em;
 margin: 00.5rem 0 1.5rem;
 color: var(--second-color);
}

.btn{
  padding: 10px 40px;
  border-radius: 0.3rem;
  font-weight: 500;
  color: var(--dark8);
  background: var(--dark4);
}

.btn:hover{
  background: var(--main-color);
  color: var(--bg-color);
   box-shadow: 0 10px 20px  rgba(237, 241, 241, 0.4);
   border: none ;
}

.home-img{
  /* animation:  float 3s linear infinite; */
  animation:  none;
  border-radius: 40px;
 /* box-shadow: 0 15px 30px  rgba(237, 241, 241, 0.4); */
 box-shadow: none;
 margin-top: 40px;
 width: 100%;


}



  .newsletter form input{
    width: auto;
  }
  .support{
    text-align: center;
  }
  .guides{
    text-align: center;
  }
  .contact {
 
  justify-content: center;

}
.copyright{
  font-size: 0.7rem;
}
.social{
  justify-content: center;
}
a.logo-social{
  display: flex;
  flex-direction: column;
  text-align: center;
  align-items: center;
}

.footer-box.contact{
  display: flex;
  flex-direction: column;
  text-align: center;
  align-items: center;
}
}