* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: Montserrat,sans-serif;

}


.header-hero{
    width: 100%;
    height: 100vh;
     background-repeat: no-repeat;
    background-size: cover;
    background-image:url(assets/herobg.png) ;
    background-attachment: fixed;
}

/* ............................header........................ */

.header {
   width: 100%;
   height: 70px;
   display: flex;
   justify-content: center;
}
.header-main {
    background-color: rgb(255, 255, 255);
    width: 95%;
    height: 100%;
    display: flex;
    justify-content: space-around;
    align-items: center;
}

.header-logo a {
   color: #FF6600;
   text-decoration: none;
   font-size: 30px ;
   font-weight: bolder;
}
.header-logo a:hover {
   color: #3acbf0;
 
}
.header-nav{
    /* background-color: blue; */
    /* padding: 20px 250px; */
    width: 65%;
}
.header-nav nav ul{
    list-style: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.header-nav ul li a {
    text-decoration: none;
    color: rgb(0, 0, 0);
    font-family: sans-serif;
    font-size: 16px;
    overflow: hidden;
    transition:all 0.3s ease;

     
}
.header-nav ul li a:hover{
 color: #FF6600;

}

.header-bot a{
     color: #ffffff;
   text-decoration: none;
   font-size: 15px ;
   padding: 15px 20px;
   background-color: #FF6600;
    border-radius: 30px;
    font-weight: 100;
   transition:all 0.50s ease;
}

.header-bot a:hover {
     /* transform: scale(2); */
     background-color: #3bbae8;
     color: #000000;
     /* box-shadow: 1px 1px 2px 1px #ffffff ; */
    
}



/* ................fixed nav............... */

.fixed-nav{
    background-color: rgb(255, 255, 255);
   width: 95%;
   height: 70px;
    position: fixed;
    z-index: 100000;
    box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.854);
    padding: 0;
    margin: 0;
     transform: scale(0.7);
     transform-origin: top center;
}


/* ............................section-hero........................ */



.hero {
    width: 100%;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    flex-direction: column;

}


.hero-content {
    padding-left: 10%; 

}

.hero-customer{
    
    display: flex;
    margin-right: -20px;
}

.hero-customer img{
    object-fit: cover;
    margin-left: -10px;
    z-index: 10;
    transition: all 0.4s ease;
}
.hero-customer img:hover{
   transform: scale(1.5);
    z-index: 12;
}
.hero-customer h3{
    background-color:white ;
    object-fit: cover;
    margin-left: -10px;
    font-size: 13px;
  padding: 5px 10px;
  border-radius: 20px;
  margin-left: -8px;
  transition: all 0.4s ease;
  z-index: 300;
}
.hero-customer h3:hover{
    background-color:rgb(47, 193, 226) ;
    color: rgb(0, 0, 0);
    
}




.hero-content div h1{
    color: rgb(255, 255, 255);
   font-size: 50px;
}

.hero-content div h5 {
    color: rgb(255, 255, 255);
    font-weight: 100;

}

.hero-content div a{
     color: #ffffff;
   text-decoration: none;
   font-size: 15px ;
   padding: 15px 20px;
   background-color: #FF6600;
    border-radius: 30px;
    font-weight: 100;
 
}

.hero-bot a:hover {
     
     background-color: #32cbed;
     color: #000000;
     /* box-shadow: 1px 1px 2px 1px #ffffff ; */
    font-weight: bold;
    border: 2px solid #ffffff; 
}

#hero-bot{
 transition: all 0.3s ease ;
  margin: 30px 20px 0px 20px;
}
#hero-bot:hover{
    transform: scale(1.001) rotatex(360deg);
   
}


/* ...................product-section............... */

.product{
    width: 100%;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}

.pro-1{
    width: 50%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;}


 .pro-2{
    width: 50%;
    display: flex;
    justify-content: space-around;
    align-items: center;
    flex-direction: column;
    padding: 8%;

}
    

 
.gallery {
    
      padding: 2rem;
      border-radius: 20px;
      text-align: center;
    }
    .main-image {
        background-size:cover ;
        background-color: #ffeee0;
      width: 500px;
      height: 500px;
    }
    .thumbnails {
        
      display: flex;
      justify-content: center;
      gap: 1rem;
      margin-top: 1rem;
    }
    .thumbnail {
      width: 60px;
      height: 60px;
      background: #f4f4f4;
      border-radius: 10px;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      border: 3px solid transparent;
    }
    .thumbnail.active {
      border-color: #6b2b004f;
      background: #6b2b0052;
    }
    .thumbnail img {
      width: 80%;
    }



   .star-main{
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    gap: 10px;
   }

    .stars {
      color: rgb(0, 0, 0);
      font-size: 1.2rem;
    }

    .price {
      /* display: flex; */
      /* align-items: center; */
      gap: 1rem;
      font-size: 1.5rem;
      font-weight: bold;
      color: #5b2c06;
    }
    .price del {
      color: gray;
      font-size: 1rem;
    }
    .save-tag {
      background: #FF6600;
      color: white;
      padding: 0.2rem 0.5rem;
      border-radius: 4px;
      font-size: 0.8rem;
    }
    .save-tag:hover {
      background: #3ac3f1;
      color: rgb(0, 0, 0);
      
    }
    .features {
      display: flex;
      flex-wrap: wrap;
      gap: 1rem;
      margin: 1rem 0;
    }
    .features div {
      
      padding: 10px 20px;
      /* border-radius: 8px; */
      font-weight: 600;
      
    }
     
   
    button {
      background: #FF6600;
      color: white;
      border: none;
      padding: 1rem;
      font-size: 1rem;
      width: 100%;
      border-radius: 999px;
      cursor: pointer;
      margin: 1rem 0;
    }
 button:hover {
      background: #19c9f0;
      color: rgb(0, 0, 0);
     
      
    }



    .payments {
      display: flex;
      gap: 1rem;
      justify-content: space-between;
      flex-wrap: wrap;
    }
    .details {
      margin-top: 1rem;
      border-top: 1px solid #ccc;
      padding-top: 1rem;
      
    }
    .details div {
      margin-bottom: 0.5rem;
      cursor: pointer;
      font-weight: 600;
      color: #333;
      border-bottom: 1px solid rgb(239, 135, 37);
    }



/* ...........................footer...................... */
.footer{
    width: 100%;
    height: 50vh;
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    background-color:#6B2B00 ;
    /* margin-bottom: ; */
    
}
.footer-header{
    
    display: flex;
    text-align: center;
    justify-content: center;
    flex-direction: column;
    align-items: center;
}

.footer-header h2{
color: white;
}

.footer-header h6{
    font-weight: 100;
    color: white;
}



.footer-header a{
     color: #ffffff;
   text-decoration: none;
   font-size: 15px ;
   padding: 15px 20px;
   background-color: #FF6600;
    border-radius: 30px;
    font-weight: 100;
   transition:all 0.50s ease;
   /* margin-top: 30px; */
}

.footer-header a:hover {
     /* transform: scale(2); */
     background-color: #3bbae8;
     color: #000000;
     /* box-shadow: 1px 1px 2px 1px #ffffff ; */
    


}


.footer-nav{
    width: 80% ;
    border-top:2px solid #ffffff;
    display: flex;
    justify-content: space-between;
    
}

.footer-nav div ul {
    padding: 20px;
    /* background: #f726df; */
    /* width: 100px; */
    display: flex;
    list-style: none;
    justify-content: space-between;


}
.footer-nav div ul li{
  /* padding: 0px 40px 10px 0px; */
   /* background-color: #3bbae8; */
    display: flex;
    list-style: none;
    justify-content: space-between;
    list-style: none;
   text-decoration: none;
   /* width: 80px; */
}


.footer-nav div ul li a{
  /* padding-left: 15px; */
   /* background-color: #3bbae8; */
    display: flex;
   
    list-style: none;
   font-size: 15px;
    text-decoration: none;
    color: aliceblue;
    transition: all 0.4s ease;
    margin: 5px;
    font-weight: 50;
}

.footer-nav div ul li a:hover{
  
    color: rgb(43, 208, 230);
}


.footer-icone ul li a {
    border:1px solid #ffffff;
    padding: 8px 8px;
    border-radius: 5px;

}


.footer-icone ul li a:hover {
    background-color: #000000;
}






/* .........................responsive................................ */


 
/* -------------------- Mobile Small (≤ 480px) -------------------- */
@media (max-width: 480px) {
 

 .header{
    visibility: hidden;
 }   
 
   
.header-hero{
    width: 100%;
    height: auto;
     background-repeat: no-repeat;
    background-size: cover;
    background-image:url(assets/herobg.png) ;
    background-attachment: fixed;
}

.product{
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

 
.pro-2{
  display: flex;
 width: auto;
}

.footer-nav{
    height: auto;
    display: flex;
    flex-direction: column;
    margin: 1px;
}
 
}

/* -------------------- Mobile Large & Tablets Portrait (≤ 768px) -------------------- */
@media (max-width: 768px) {
 
    
.header-hero{
    width: 100%;
    height: auto;
     background-repeat: no-repeat;
    background-size: cover;
    background-image:url(assets/herobg.png) ;
    background-attachment: fixed;
}

.product{
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}
 
 
.pro-2{
  display: flex;
 width: auto;
}

.footer-nav{
    height: auto;
    display: flex;
    flex-direction: column;
    margin: 1px;
}
}

/* -------------------- Tablets Landscape (≤ 1024px) -------------------- */
@media (max-width: 1024px) {
  
  
.header-hero{
    width: 100%;
    height: auto;
     background-repeat: no-repeat;
    background-size: cover;
    background-image:url(assets/herobg.png) ;
    background-attachment: fixed;
}

.product{
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}
 
 
.pro-2{
  display: flex;
 width: auto;
}

.footer-nav{
    height: auto;
    display: flex;
    flex-direction: column;
    margin: 1px;
}

}

/* -------------------- Small Desktop (≤ 1280px) -------------------- */
@media (max-width: 1280px) {
  

    
.header-hero{
    width: 100%;
    height: auto;
     background-repeat: no-repeat;
    background-size: cover;
    background-image:url(assets/herobg.png) ;
    background-attachment: fixed;
}

.product{
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}
 
 
.pro-2{
  display: flex;
 width: auto;
}

.footer-nav{
    height: auto;
    display: flex;
    flex-direction: column;
    
}

}