body {
    margin: 0px;
    font-family: Arial, sans-serif;
    background-color: rgb(102, 81, 49);
    color: white;
  }
  h1{
    margin-left: 35%; padding: 20px; font-size: 70px;
  }
  
  .navbar {
    background-color: rgba(102, 81, 49,0.8);
    padding: 15px;
    color: white;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: sticky;
    top: 0px;
    z-index: 1;

  }
  
  .company-name {
    font-size: 45px; margin-left: 38%; font-family: 'Times New Roman', Times, serif;
  }
  
  .navbar-links {
    display: flex;
  }
  
  .navbar-links a {
    color: white;
    text-decoration: none;
    margin: 0 15px;
  }
  
  .navbar-toggle {
    display: none;
    cursor: pointer;
  }
  
  .bar {
    width: 25px;
    height: 3px;
    background-color: white;
    margin: 6px 0;
  }
  
  
  
  
  .slideshow-container {

    margin:0px;
    overflow: hidden;
    max-height: 620px;
    top: 0%;
  }
  
  .slide {
    display: none; 
  }
  
  .slide img{
    width: 100%; height: 650px;
  }
  
  .fade {
    animation: fade 1.5s ease-in-out infinite;
  }
  
.slideshow{
    position: relative;
}
.heading{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    color: white;
}

  
  .heading p {
    font-size: 30px; margin-left: 27%; font-family: 'math sans'; margin-top: 7%;
  }
  .heading h1{
    font-size:45px;  margin: 0; text-align: center; height: 180px; width: 900px; 
     word-spacing: 5px; font-family: 'math sans';
  }
  .headingbutton a{ text-decoration: none;background-color: white; color: black; margin: 10px;font-size: 15px; border-radius: 5px; font-weight: bolder; font-family: helvetica;
  padding-top: 20px;
padding-bottom: 20px;
padding-right: 30px;
padding-left: 30px;}
  .headingbutton{
    margin-left: 30%;  height: 60px; margin-top: 5%;
  }
 
  .imgtxt {
    display: flex; margin-right: 10px;
  }
  .imgtxt img{
   margin-left: 25px; height: 300px; width: 440px; padding: 10px; border-radius: 7%;
  }
  #imgtxtrev {
    flex-direction: row-reverse; margin: 3%;
  }

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}



.photo-gallery {
  display: flex;
  flex-wrap: wrap;
  gap:0;
}

.photo {
  flex: 1 1  calc(30% - 10px); /* Two photos per row, with 20px gap */
  margin: 28px;
}

.photo img {
  max-width: 100%;
  height: auto;
  display: block;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.caption {
  padding: 10px;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.caption h2 {
  font-size: 1.2rem;
  margin-bottom: 5px;
}

.caption p {
  line-height: 1.6;
}




.sslideshow-container {
  position: relative;
  max-width: 900px;
  margin-left: 17%;
}

.sslide {
  display: none;
  text-align: center;
}



.prev, .next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  margin-top: -30px;
  padding: 16px;
  color: white;
  font-weight: bold;
  font-size: 20px;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
  background-color: rgba(0, 0, 0, 0.5);
}

.next {
  
  right: 0;
  border-radius: 3px 0 0 3px;
}

.prev:hover, .next:hover {
  background-color: rgba(0, 0, 0, 0.8);

}

.contact a{
  background-color: white; text-decoration: none; color: black; border-radius: 5px; font-size: 15px; padding: 16px;   font-weight:bold ;margin-left: 17px;
}
.contact p{
  padding:10px;margin-left:7px;
}
.contact h2{
  padding: 2px; margin-left:3%;
}
.contact{
  display: flex; flex-direction: row;margin-left: 20PX;
}

.gmap{
  margin: 10PX;
}
.gmap iframe{
  width: 20cm;height: 14cm;
}

.headingbutton a:hover{
  background-color: rgba(239, 231, 231, 0.9);
}


.navbar-links a:hover{
  color: rgba(238, 232, 232, 0.7);
}
.secondslide{
  margin-left: 0px;
}

#rawproduct {
  margin-left: 10%;margin-right: 10%; font-size:45px; text-align: center;
}
.contentxt p{
  font-size: 25px;  margin-top: 25px;
}
.contentxt h3{
  font-size: 25px;margin: 2%;

}

#contactus {
   font-size:50px ;
}
.content h1 { width: 20cm; margin-left: 30%;}

/* Floating button styles */
.whatsapp-button {
  position: fixed;
  bottom: 20px;
  right: 20px;
  background-color: rgb(246, 244, 242);
  border-radius: 100%;
  padding: 15px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  z-index: 1000;
  transition: transform 0.3s;
}

.whatsapp-button:hover {
  transform: scale(1.1);
}
.photo img{
  height: 300px; width: 500px;
}
.sslide img{
  height: 430px; width: 900px;
}
.contact2 h1{
  font-size: 30px;
  margin-left: 0px;
  margin-top: 4%;
}
.contact2 h3{
  margin-left: 3%;margin-top: 5%;
}
.wp{
  margin-bottom: 18px;
}
@media(max-width:1106px){
 
  
  .contact{
    flex-direction: column-reverse; margin: 0;
  }
  .gmap{
    margin-top: 15px; margin:50px;
  }
  .contact h1{ font-size: 20px;}
  .content h1{
    margin-left: 30%; font-size: 50px;
  
  }
  .gmap iframe{
    width:100%;  ;}
  #ourproduct {
    margin-left: 20% ;
  }
  .heading h1{max-width: 22cm; height: 270px;
  }
}
@media (max-width: 800px) {
  .photo {
    flex: 1 1 100%; /* Single column layout on mobile */
    
  }
  
  h1{
    font-size: 20px;
    
  }
  .gmap{
    margin: 5px; padding: 0px;
  }
  .heading p {
    font-size: 24px; 
  }
  .heading h1{
      font-size:30px; margin-top: 70px; height: 150px;
  }
  .content h1{
    font-size: 40px;
  }
  .heading a{ font-size: 20px;margin: 7%;} 
  .contentxt p{
    font-size: 22px;
  }
  .contentxt h3{
    font-size: 30px;
  }
  .navbar-links {
    display: none;
    flex-direction: column;
    width: 100%;
    position: absolute;
    top: 60px;
    left: 0;
    background-color: #333;
    padding: 15px;
  }

  .navbar-links a {
    margin: 10px 0;
  }

  .navbar-toggle {
    display: block;
  }
  .imgtxt{
    display:block;

  
}
.headingbutton{
  display: flex; flex-direction: column;
}

.headingbutton a{ text-decoration: none;background-color: white; color: black; margin: 10px;font-size: 15px; border-radius: 5px; font-weight: bolder; font-family: helvetica;
  padding-top: 20px;
padding-bottom: 20px;
padding-right: 0px;
padding-left: 7cm;}
  .headingbutton{
    margin-left: 2%;  height: 150px; margin-top: 5%;
  width: 19cm;
  }
  .heading h1{
    max-width:20.4cm ; 

  }
  .sslide img{
    height: 300px; width: 450px;
  }
  .sslideshow-container {
    position: relative;
    max-width: 450px;
    margin-left: 3%;
  }
  body{
    overflow-x: hidden;
  }
  
}


@media screen and (max-width: 768px) {
  .heading h1{
    max-width:16.3cm ; margin-left: 3%;
  }
  .headingbutton{
    margin-left: 7%;  height: 150px; margin-top: 5%;
  width: 15cm;
  }
}

@media screen and (max-width:600px) {
  
  body{
    overflow-x: scroll;
  }
  .navbar p{
    margin-left: 30px;
  }
  .slideshow{
     height: 450px;overflow: hidden;
  }
  .slideshow-container {
    max-height: 800px;
}
.slideimg {
  height: 500px;
}

.content h1{
  margin-left: 5%; font-size: 30px;
}
.imgtxt{
  display:block;
}
.content h3{ margin-left: 10%;}
.heading{
  height: 300px;
}
.heading p {
  font-size: 17px; width: auto;margin-left: 24%;
}
.heading h1{
  font-size:26px;  font-weight: 700; height:150px; width: 420px; margin-top: 0%;
  
}
.headingbutton a{ text-decoration: none;background-color: white; color: black; margin: 10px;font-size: 15px; border-radius: 5px; font-weight: bolder; font-family: helvetica;
  padding-top: 20px;
padding-bottom: 20px;
padding-right: 0px;
padding-left: 4.3cm;}
  .headingbutton{
    margin-left: 1%;height: 150px; margin-top: 5%;
  width: 12cm;
  }
  .gmap{
    width:auto; overflow:scroll;
  }
  .contact2 h1{
    font-size: 30px;
  }
  
#ourproduct {
  font-size: 40px; margin: 1%;
}
.company-name{
  margin-left: 18%;
}
#rawproduct {
  margin-left: 10%;margin-right: 10%; font-size:27px; text-align: center;

}
.contentxt h3{
  font-size: 20px; margin-left: 20%;
}
#contactus{
  font-size: 30px; margin-left: 20%;
}
.imgtxt img{
  margin-left: 2px; height: 300px; width: 380px; padding: 10px; border-radius: 7%;
 }
 .whatsapp-button {
  position: fixed;
  bottom: 20px;
  right: 10px;
  background-color: rgb(246, 244, 242);
  border-radius: 100%;
  padding: 15px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  z-index: 1000;
  transition: transform 0.3s;
}
#ouroperation{
  padding: 0px;width: 400px;font-size:40px;
}
.sslideshow-container {
  position: relative;
  max-width: 600px;
  margin-left: 1%;
}
.sslide img{
  height: 300px; width: 375px;
}

}