body {
            margin: 0;
            padding: 0;
            font-family: Arial, sans-serif;
        }

        .header1 {
            background-color: #3b473e;
            /*--background-color:hsla(290,10%,80%,0.3); --*/
            color: #fff;
            padding: 5px;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .contact-info {
            display: flex;
            align-items: center;
			margin-left: 40px;
        }

        .contact-info i {
            margin-right: 5px;
        }

        .social-icons {
            display: flex;
			margin-right: 60px;
			font-size:20px;
			
        }

        .social-icons a {
            color: #fff;
            text-decoration: none;
            margin-left:10px;
        }

    @media screen and (max-width: 768px) {
    .contact-info {
        display: none;
    }

    .social-icons {
        display: flex;
        justify-content: center;
        align-items: center;
        margin-left: 110px;
    }

    .social-icons a {
         /* Adjust the spacing between social icons as needed */
          margin: 5px;
    }
}
		
		
		
/* ######################################*/
body {
   background-image: url('https://img.freepik.com/premium-photo/minimal-pink-roses-pink-background_606587-54.jpg?w=740');
  background-size: 1600px ;
      margin: 0;
    margin: 0;
      font-family: 'Arial', sans-serif;
    }

   header {
      background-color: #424744;
      padding: 15px;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

    .logo {
      color: #fff;
      text-decoration: none;
      font-size: 24px;
      font-weight: bold;
      margin-left: 40px;
    }

    nav {
      display: flex;
      justify-content: flex-end;
      align-items: center;
      margin-top:  40px;
    }

    nav a {
      color: #fff;
      text-decoration: none;
      padding: 10px 15px;
      transition: background-color 0.3s;
    }
     nav i {
      color: #fff;
      margin-right: 10px;
      
    }

    nav a:hover {
      background-color: #555;
    }

    .nav-toggle {
      display: none;
      cursor: pointer;
      font-size: 24px;
      color: #fff;
    }

    /* Media Query for responsiveness */
    @media screen and (max-width: 600px) {
      nav {
        display: none;
        flex-direction: column;
        position: absolute;
        top: 100px;
        left: 0;
        width: 100%;
        background-color: #333;
        z-index: 1;
      }

      nav.active {
        display: flex;
      }

      .nav-toggle {
        display: block;
      }

      .logo {
        order: -6; /* Move the logo to the top on small screens */
      }
    }

/*###############Slider Start #################*/
.slider {
      position: relative;
      width: 100%;
      overflow: hidden;
    }

    .slides {
      display: flex;
      transition: transform 0.5s ease-in-out;
    }

    .slide {
      min-width: 100%;
      box-sizing: border-box;
    }

    img {
      width: 100%;
      height: fixed;
    }

    .headline {
  position: absolute;
  top:50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-family: 'Your Desired Font', sans-serif; /* Replace 'Your Desired Font' with the actual font name */
  font-size: 3em;
  color: #ffffff; /* Specify the desired text color */
  text-align: center;
  z-index: 1;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); /* Add text shadow for better visibility */

  /* Animation for text shadow */
  animation: textShadowAnimation 2s infinite alternate;
}

@keyframes textShadowAnimation {
  0% {
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
  }
  100% {
    text-shadow: 4px 4px 8px rgba(0, 0, 0, 0.8);
  }
}
    

    .subtext {
      position: absolute;
      top: 75%;
      left: 50%;
      transform: translate(-50%, -50%);
      font-size: 1.5em;
      color: #fff;
      text-align: center;
      z-index: 1;

       animation: textShadowAnimation 2s infinite alternate;
}

@keyframes textShadowAnimation {
  0% {
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
  }
  100% {
    text-shadow: 4px 4px 8px rgba(0, 0, 0, 0.8);
  }
    }

    /* Navigation buttons */
    .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;
      user-select: none;
      z-index: 2;
    }

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

    /* On hover, add a black background color with a little bit see-through */
    .prev:hover, .next:hover {
      background-color: rgba(0, 0, 0, 0.8);
    }


    @media screen and (max-width: 768px) {
      .next   {
        display: none;
      }

      .prev {
        display: none;
      }
    }

    /* Media Query for responsiveness */
    @media screen and (max-width: 768px) {
      .headline {
        display: none;
      }

      .subtext {
        display: none;
      }
    }

    @media screen and (max-width: 480px) {
      .headline {
        font-size: 1.5em;
      }

      .subtext {
        font-size: 0.8em;
      }
    }

  /*###############Slider End #################*/
/* Styles for the container div */
        .container {
            display: flex;
            justify-content: center;
            align-items: center;
            height: auto;/* Set container height to 47% of viewport height */
            flex-wrap: wrap; /* Allow cards to wrap to the next line on smaller screens */
        }

        /* Styles for the cards */
        .card {
            width: 110px;
            height: 220px;
            background-color: #ecf0f1;
            border-radius: 8px;
            padding: 20px;
            margin: 10px; /* Margin between the cards */
            text-align: center;
            transition: background-color 0.3s ease, transform 0.3s ease;
        }

        /* Styles for hover effect and zoom */
        .card:hover {
           
            transform: scale(1.1);
        }

        /* Styles for card title */
        .card-title {
            font-size: 1.5em;
            margin-bottom: 10px;
        }

        /* Styles for card subtitle */
        .card-subtitle {
            font-size: 1em;
        }

        /* Styles for the icon */
        .fa-dna {
            margin-bottom: 10px;
        }

        /* Media query for smaller screens */
        @media (max-width: 768px) {
            .container {
                height: auto; /* Adjust container height for smaller screens */

            }

            .card {
                width: 30%; /* Take up full width on smaller screens */
                 padding: 20px;
            margin: 10px; /* Margin between the cards *//* Adjust margin for spacing between cards */
            }
        }

/*###############Contain End #################*/

 section {
            font-family: Arial, sans-serif;
            
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            background-color:#f0f5f2;
          
        }

        .row {
            flex: 10;
            min-width: 70%;
            margin-bottom: 20px;
      
      
        }

        h1, p {
            color: #000;
        }

        p {
            color: #666;
        }

        img {
            max-width: 100%;
            height: auto;
        }

        @media only screen and (min-width: 600px) {
            .row {
                flex: 0 0 %; /* Two columns, each taking up 48% of the container */
                max-width: 8%;
                margin-left: 20px; /* Add a small gap between columns */
            }


        }


/* ===================================== Start Footer css ================================== */ 

  body {
      margin: 0;
      padding: 0;
      font-family: Arial, sans-serif;
    }

    footer {
      background-color: #333;
      color: #fff;
      padding: 20px;
      text-align: center;
    }

    .footer-sections {
      display: flex;
      justify-content: space-around;
      flex-wrap: wrap;
    }

    .footer-left,
    .footer-center,
    .footer-right {
      flex: 1;
      margin: 10px;
    }
  
  .footer-links{
    color:  #ffffff;
    margin: 20px 0 12px;
    padding: 0;
  }
  .footer-links a{
    display:inline-block;
    line-height: 1.8;
    font-weight:400;
    text-decoration: none;
    color:  inherit;
  }
  .footer-company-name{
    color:  #b8acab;
    font-size: 14px;
    font-weight: normal;
    margin: 0;
  }
  .footer-company-name a{
    color:  #b8acab;
    font-size: 16px;
    font-weight: normal;
    margin: 0;
  }
  
   .footer-left img {
  max-width: 100%; /* Adjust as needed */
  max-height: 10px; /* Adjust as needed */
  border-radius: 20px;
  padding: 10px;
  background-color: #e8cac8;
  }

    /* Media Query for tablets and larger devices */
    @media (min-width: 768px) {
      .footer-sections {
        flex-direction: row;
      }
    
    .footer-center{
      width: 35%;
    }
    .footer-distributed .footer-center i{
      background-color:  #33383b;
      color: #ffffff;
      font-size: 25px;
      width: 38px;
      height: 38px;
      border-radius: 50%;
      text-align: center;
      line-height: 42px;
      margin: 10px 15px;
      vertical-align: middle;
    }
    .footer-center i.fa-map-marker{   
      font-size: 30px;
      line-height: 20px;
    }
    .footer-center i.fa-envelope{
      font-size: 20px;
      line-height: 50px;
      color: lightseagreen;
    }

    .footer-center a{
      color: #fff;
      
      }
    .footer-center p{
      display: inline-block;
      color: #ffffff;
      font-weight:400;
      line-height: 50px;
      vertical-align: middle;
      margin:0;
    }

    .footer-center p span{
      display:block;
      font-weight: normal;
      font-size:13px;
      line-height:2;
      
    }

    .footer-center p a{
      color:  lightseagreen;
      text-decoration: none;;

    }
    .footer-right p{
    font-weight: normal;
      font-size:13px;
      margin-left: 30px;
              
      }
    
    .footer-icons{
      margin-top: 15px;
      margin-left: 30px
    }

    .footer-icons a{
      display: inline-block;
      width: 35px;
      height: 35px;
      cursor: pointer;
      background-color:  #33383b;
      border-radius: 2px;

      font-size: 20px;
      color: #ffffff;
      text-align: center;
      line-height: 35px;

      margin-right: 3px;
      margin-bottom: 5px;
    }
      .footer-left,
      .footer-center,
      .footer-right {
        max-width: 30%; /* Adjust as needed */
      }
    }
  
    /* Media Query for smaller screens (mobile) */
    @media (max-width: 767px) {
      .footer-sections {
        flex-direction: column;
      }

      .footer-left,
      .footer-center,
      .footer-right {
        max-width: 100%; /* Occupy full width on smaller screens */
      }
    .footer-icons{
      margin-top: 15px;
      margin-left: 30px
    }

    .footer-icons a{
      display: inline-block;
      width: 35px;
      height: 35px;
      cursor: pointer;
      background-color:  #33383b;
      border-radius: 2px;

      font-size: 20px;
      color: #ffffff;
      text-align: center;
      line-height: 35px;

      margin-right: 3px;
      margin-bottom: 5px;
    }
    .footer-center i.fa-envelope{
      font-size: 20px;
      line-height: 50px;
      color: lightseagreen;
      }
      .footer-center p a{
      color:  lightseagreen;
      text-decoration: none;;
      }
    }


/* ===================================== End  Footer css ================================== */ 

/* ===================================== Contact from css ================================== */ 

        .container1 {
            display: flex;
            max-width: 1200px;
            margin: 50px auto;
            background: rgba(255, 255, 255, 0.7);
            padding: 20px;
            border-radius: 10px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        }

        .column {
            flex: 1;
            padding: 10px;
        }

        .contact-form {
            background-color: transparent;
            padding: 20px;
            border-radius: 8px;
            margin-right: 0;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        }

        label {
            display: block;
            margin-bottom: 8px;
        }

        input,
        textarea {
            width: 100%;
            padding: 8px;
            margin-bottom: 16px;
            box-sizing: border-box;
            border: 1px solid #ccc;
            border-radius: 4px;
        }

        button {
            background-color: #4caf50;
            color: #fff;
            padding: 10px;
            border: none;
            border-radius: 4px;
            cursor: pointer;
        }

        /* Media Queries */
        @media only screen and (max-width: 600px) {
            .container1 {
                flex-direction: column;
                max-width: 100%;
            }

            .column {
                width: 100%;
                margin-bottom: 20px;
            }
        }

/* ===================================== Contact from css ================================== */ 

/* ===================================== Product from css ================================== */ 

  .container2 {
            display: flex;
            max-width: 1200px;
              margin: 50px  ;
            background: rgba(255, 255, 255, 0.7);
            padding: 20px;
            border-radius: 10px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        }

  .Product img {
      width: 300px;
      height: auto;
      margin-left: 70px;
      margin-bottom: 20px
      transition: transform 0.3s ease-in-out; /* Add smooth transition effect */
    }

    .Product img:hover {
      transform: scale(1.2); /* Zoom in on hover by increasing the scale */
    }

    .Product1 {
      margin-left: 90px;
    }   


    .custom-table {
      width: 70%;
      border-collapse: collapse;
      margin-top: 1px;
    }

    th,
    td {
      border: 1px solid #000;
      padding: 5px; /* Increase padding for better readability on smaller screens */
      text-align: left;
    }

    /* First table styling */
    .table1 th {
      background-color: #fce5cd; /* Set the background color of the header to a light color */
    }

    /* Second table styling */
    .table2 th {
      background-color: #c2e0c6; /* Set the background color of the header to a different light color */
    }

    @media (max-width: 768px) {
      .Product img {
      width: 100%; /* Make images take up full width on smaller screens */
      margin-left: 0; /* Remove left margin on smaller screens */
      margin-bottom: 10px; /* Adjust margin for better spacing on smaller screens */
      }

      .Product1 {
      margin-left: 0; /* Remove left margin on smaller screens */
      }

      .custom-table {
      width: 100%; /* Make the table take up full width on smaller screens */
      }

      th {
      background-color: #fff; /* Set background color for header in small screens */
      }
    }
    
   
  @media only screen and (max-width: 600px) {
            .container2 {
                flex-direction: column;
                max-width: 100%;
            }
            .Product img:hover {
            transform: none; /* Remove the hover effect on small screens */
        }
           
        }


/* ===================================== Product from css ================================== */ 




/* ===================================== ABout Us css ================================== */ 
      
    


#section1 {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    background-color: #f8f8f8;
}

.container {
    max-width: 1050px;
    margin: 0 auto;
    padding: 10px;

}

.about-section {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}

.about-section img {
    max-width: 30%; /* Set the width of the image */
    border-radius: 8px;
}

.text-section {
    max-width: 66%; /* Set the width of the text section */
}

h1 {
    font-size: 36px;
    color: #333;
    margin-bottom: 20px;
}

p {
    font-size: 16px;
    color: #666;
    line-height: 1.6;
}

@media only screen and (max-width: 768px) {
    .about-section {
        flex-direction: column;
        text-align: center;
    }

    .about-section img {
        max-width: 100%;
        margin-bottom: 20px;
    }

    .text-section {
        max-width: 100%;
    }
}

/* ===================================== ABout Us css ================================== */

	
.partners-container {
      display: flex;
      justify-content: space-around;
      width:70%;
    }

    .partner-label {
      background-color: #fff;
      color: #fff;
      font-size: 14px;
      padding: 1px;
      margin: px;
	  margin-bottom:20px;
      border-radius: 5px;
      text-align: center;
      width: 210px;
      height: 80px;
      cursor: pointer;
      transition: background-color 0.3s ease;
    }

    .partner-label img {
	  filter: grayscale(100%);
      width: 90%;
      height: 100%;
      object-fit: cover;
      border-radius: 5px;
    }

	.partner-label:hover img {
	   filter: grayscale(0%);
	}
	
 	  @media screen and (max-width: 768px) {
      .partners-container {
        
        width: 90%;
      }

      .partner-label {
        width: 80%;
        max-width: none; /* Remove the maximum width */
        font-size: 14px;
        padding: 10px;
        margin: 5px;
        height: auto; /* Adjust height for smaller screens */
      }

      .partner-label img {
        height: 100%; /* Adjust image height for smaller screens */
      }
    }



/* ===================================== partner Us css ================================== */