<style>

    

    body {
                
        margin: 0;
        padding: 0;
        font-family: 'Roboto', sans-serif;
        
        overflow-x: hidden;
    }
    a {
    text-decoration: none;
    color: inherit;
}
    html {
    overflow-x: hidden;
    }
    @font-face {
        font-family: 'Bold';
        src: url('/static/bold.ttf') format('truetype'); /* TTF format */
        font-weight: normal;
        font-style: normal;
    }
    @font-face {
        font-family: 'Artines';
        src: url('/static/Arthines.otf') format('truetype'); /* TTF format */
        font-weight: normal;
        font-style: normal;
    }
    @font-face {
        font-family: 'chico';
        src: url('/static/Chicharito.ttf') format('truetype'); /* TTF format */
        font-weight: normal;
        font-style: normal;
    }
    @font-face {
        font-family: 'Calton';
        src: url('/static/Caltons.otf') format('truetype'); /* TTF format */
        font-weight: normal;
        font-style: normal;
    }
    

    /* Default header style */
    header {
        display: flex;
        justify-content: space-between;
        /* Space between items */
        align-items: center;
        /* Align items vertically */
        padding: 10px;
        background-color: white;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        z-index: 1000;
        font-family: 'Roboto', sans-serif;
        
        transition: padding 0.3s, transform 0.3s, top 0.5s ease;
    }

    


    /* Style for when header becomes smaller on scroll */
    header.shrink {
        padding: 5px 10pAx;
        /* Adjust padding as needed */
        transform: scaleY(0.8) scaleX(0.8);
        /* Adjust vertical and horizontal scaling */
        transform-origin: top;
        /* Ensures scaling starts from the top */
        margin-top: 20px;
        border-radius: 50px;
        background-color: rgba(255, 255, 255, 0.7);
        transition: padding 0.3s, transform 0.3s, top 0.5s ease;

    }

    .brand {
        display: flex;
        align-items: center; /* Center the image vertically within the navbar */
        height: 100%; /* Ensure it uses the full navbar height */
    }
    




    .brand img {
        width: auto; /* Set the desired width for the logo in the navbar */
        height: 100%; /* Set the desired height for the logo in the navbar */
        max-height:80px;
        margin-left:40px;
        transform: scale(2.5); /* Scale up the image */
        transform-origin: center;
    }
    
    

    


    

    /* Oval Button Styles */
    .button a {
        display: inline-block;
        padding: 12px 24px;
        margin-right: 30px;
        background-color:#3b6403;
        /* Main background color */
        color: white;
        /* Text color */
        text-decoration: none;
        border-radius: 50px;
        /* Makes the button oval */
        font-size: 1em;
        font-weight: bold;
        text-align: center;
        border: 3px solid #ffd450;
        /* Center text horizontally */
        transition: background-color 0.3s, border-color 0.3s, box-shadow 0.3s;
    }
    .button a:hover {
        background-color:#3b6403; /* Yellow blends into the border */
        color:white; /* Change text color to green for contrast */
        border-color: #ffd450; /* Change border color to green */
        box-shadow: 0 0 20px 5px #ffd450; /* Glow effect around the button */
    }

    


    


    

    #navbar {
        list-style-type: none;
        margin: 0;
        padding: 14px 20px;
        display: flex;
        justify-content: center;
        transition: border-radius 0.3s, padding 0.3s, background-color 0.3s;

        /* Ensure background color is set */
    }

    #navbar li {
        margin: 0;
    }

    #navbar a {
        display: block;
        padding: 14px 20px;
        color:#3b6403;
        text-decoration: none;
        text-align: center;
        font-weight:bold;
    }

   

    

    #navbar a:hover {

        border-radius: 15px;
        font-weight: bold;
        color:#ffd450;
        



    }
    .image-container {
        text-align: center; /* Center the image */
        margin: 20px 0 80px 0;
        color:white;
    }
    
    .image-container video {
        margin-top: 0px;
        max-width: 95%; /* Maintain the width */
        width: 100%; /* Ensure the image takes up the full width */
        max-height: 80vh; /* Decrease the height (adjust this value as needed) */
        object-fit: cover; /* Adjusts how the image fits within its bounds */
        border-radius: 70px; /* Optional: Add rounded corners */
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.8); /* Optional: Add a shadow */
    }
    
    .image-container .overlay {
        position:absolute;
        top:40%;
        left:50%;
        transform:translate(-50%,-50%);
        text-align:center;
    }
    .image-container .overlay .description {
        font-size: 2em; /* Adjust font size */
        font-family: 'calton', sans-serif;
        color: #ffd450; /* Text color */
        margin-bottom: 20px; /* Space between description and button */
        text-align: center; /* Center the text */
        max-width: 80%; /* Optional: Control text width */
        margin: 0 auto; /* Center the description within the container */
    }

    .image-container .overlay h1{
        font-size:6em;
        font-family: 'calton', sans-serif;
        font-weight:bold;
        
        
        margin-bottom: 5px;

    }
    .image-center {
        position: absolute;
        bottom: -150px; /* Adjust to place between the texts */
        left: 70%;
        transform: translate(-50%, 50%);
    }
    
    
    
    .image-center img.neon-flower {
        width: 60px; /* Adjust size as needed */
        height: auto;
    
        /* Apply filter for neon green and add neon glow */
        filter: invert(33%) sepia(100%) saturate(4000%) hue-rotate(120deg) 
            brightness(1.5) contrast(1.5) saturate(3) 
             
            drop-shadow(0 0 10px #00ff00) 
            drop-shadow(0 0 30px #32ff32)
            drop-shadow(0 0 40px #4eff4e)
            drop-shadow(0 0 50px #66ff66);
        
        /* Optional: Add flickering animation for dynamic glow */
        animation: neon-flicker-green 1.5s infinite alternate;
    }
    
    /* Neon flicker effect */
    
    
    
    
    
    .bottom-right {
        position: absolute;
        bottom: -300px; /* Adjust distance from the bottom */
        right: -350px; /* Adjust distance from the right */
        font-size: 3em; /* Adjust size of the text */
        font-weight: bold;
        color: white;
        text-shadow: 
            0 0 5px #ff0000,  /* Red glow */
            0 0 10px #ff0000, /* Stronger red glow */
            0 0 15px #ff0000; /* Red neon glow */
    }
    .bottom-rightt {
        position: absolute;
        bottom: -370px; /* Adjust distance from the bottom */
        right: -360px; /* Adjust distance from the right */
        font-size: 3em; /* Adjust size of the text */
        font-weight: bold;
        color: white;
        text-shadow: 
            0 0 5px #ff0000,  /* Red glow */
            0 0 10px #ff0000, /* Stronger red glow */
            0 0 15px #ff0000; /* Red neon glow */
    }
    .image-container .overlay h2{
        font-size: 3em;
        font-family: 'calton', sans-serif;
        color: #ffd700; /* Neon yellow color */
        text-align: center;
        margin-bottom:250px;
        text-shadow: 
            0 0 5px #ffd700, 
            0 0 10px #ffd700, 
            0 0 20px #ffea70, 
            0 0 40px #ffe84e, 
            0 0 80px #ffe84e, 
            0 0 100px #ffdc00;
        animation: neon-flicker-yellow 1.5s infinite alternate;
    }
    
    @keyframes neon-flicker-yellow {
        0% {
            text-shadow: 
                0 0 5px #ffd700, 
                0 0 10px #ffd700, 
                0 0 20px #ffea70, 
                0 0 40px #ffe84e, 
                0 0 80px #ffe84e, 
                0 0 100px #ffdc00;
        }
        50% {
            text-shadow: 
                0 0 3px #ffd700, 
                0 0 8px #ffd700, 
                0 0 15px #ffea70, 
                0 0 30px #ffe84e, 
                0 0 60px #ffe84e, 
                0 0 70px #ffdc00;
        }
        100% {
            text-shadow: 
                0 0 6px #ffd700, 
                0 0 12px #ffd700, 
                0 0 25px #ffea70, 
                0 0 50px #ffe84e, 
                0 0 100px #ffe84e, 
                0 0 120px #ffdc00;
        }

    }
    .image-container .overlay img:nth-of-type(1){
        position: absolute; /* Position the overlay image within the container */
    top: -90px; /* Adjust for spacing from the top */
    right: -350px; /* Adjust for spacing from the right */
    max-width: 400px; /* Set the width of the overlay image */
    height: auto; /* Maintain aspect ratio */
    border-radius: 10px; /* Optional: Add rounded corners */
    box-shadow: none;
    transform: rotate(-10deg);
    transform-origin: center;

    }
    .image-container .overlay img:nth-of-type(2){
        position: absolute; /* Position the overlay image within the container */
    top: 30px; /* Adjust for spacing from the top */
    right: 510px; /* Adjust for spacing from the right */
    max-width: 500px; /* Set the width of the overlay image */
    height: auto; /* Maintain aspect ratio */
    border-radius: 10px; /* Optional: Add rounded corners */
    box-shadow: none;

    }
    .image-container .overlay img:nth-of-type(3){
        position: absolute; /* Position the overlay image within the container */
    top: 335px; /* Adjust for spacing from the top */
    right: -20px; /* Adjust for spacing from the right */
    max-width: 200px; /* Set the width of the overlay image */
    height: auto; /* Maintain aspect ratio */
    border-radius: 10px; /* Optional: Add rounded corners */
    box-shadow: none;
    filter: brightness(0) invert(1);

    }
    .image-container .overlay img:nth-of-type(4){
        position: absolute; /* Position the overlay image within the container */
    top: 350px; /* Adjust for spacing from the top */
    right: 200px; /* Adjust for spacing from the right */
    max-width: 170px; /* Set the width of the overlay image */
    height: auto; /* Maintain aspect ratio */
    border-radius: 10px; /* Optional: Add rounded corners */
    box-shadow: none;
    filter: brightness(0) invert(1);

    }
    .image-container .overlay img:nth-of-type(5){
        position: absolute; /* Position the overlay image within the container */
    top: 360px; /* Adjust for spacing from the top */
    right: 400px; /* Adjust for spacing from the right */
    max-width: 150px; /* Set the width of the overlay image */
    height: auto; /* Maintain aspect ratio */
    border-radius: 10px; /* Optional: Add rounded corners */
    box-shadow: none;
    filter: brightness(0) invert(1);    

    }
    .image-container .overlay img:nth-of-type(6){
        position: absolute; /* Position the overlay image within the container */
    top: 90px; /* Adjust for spacing from the top */
    right: -490px; /* Adjust for spacing from the right */
    max-width: 650px; /* Set the width of the overlay image */
    height: auto; /* Maintain aspect ratio */
    border-radius: 10px; /* Optional: Add rounded corners */
    box-shadow: none;
    filter: invert(100%) sepia() saturate(10000%) hue-rotate(0deg);

      

    }
   
    .image-container .overlay p {
        font-size: 1.5em;
        text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.7);
        margin-bottom: 20px;
    }
    .image-container .cta-button {
        display: inline-block;
        padding: 10px 20px;
        margin-top:20px;
        background-color:#3b6403;
        color:white;
        text-decoration: none;
        font-size: 1.2em;
        font-weight: bold;
        border-radius: 25px;
        transition: all 0.3s ease;
        font-family: "calton",sans-serif;
    }
    
    .image-container .cta-button:hover {
        background-color:#ffd450;
        color:white;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    }
    
    h2 {
        font-family: 'calton', sans-serif; /* Use a clean, professional font */
        font-size: 2.5rem; /* Set a large, attention-grabbing font size */
        font-weight: bold; /* Make the text bold */
        text-align: left;
         /* Center the text */
        color: #333; /* Set a dark gray color */
         margin-left:100px;
        margin-top:60px;
        margin-bottom:60px;
        text-transform: uppercase; /* Make the text uppercase */
        letter-spacing: 2px; /* Add some spacing between letters */
        background: linear-gradient(to right,#3b6403,white); /* Add a gradient effect */
        -webkit-background-clip: text; /* Use the gradient as the text color */
        -webkit-text-fill-color: transparent; /* Make the gradient visible */
    }
    .product{
        width: 1000px; /* Define a fixed width for the container */
  height: 500px; /* Define a fixed height for the container */
  overflow: hidden; /* Ensures the zoomed image doesn't overflow the container */
  border-radius: 20px; /* Matches the image's rounded corners */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.7); /* Optional: shadow around the container */
  position: relative;
  
  display:flex;
  align-items: stretch; /* Ensures both elements are the same height */
  gap: 0; 
  margin-left:250px;
       
    }
    .product-image img{
        width: 100%;
  height: 100%; /* Ensures the image covers the container */
  object-fit: cover;
        
    }
    .product-description {
        padding: 20px; /* Adds space inside the description card */
        background-color:#fef8dd; /* Sets a clean white background */#f2ffb1
        color: #333; /* Sets a dark text color for readability */
        font-family: 'Arial', sans-serif; /* Sets a modern font */
        width: 50%; /* Ensures equal space for description */
      }
      
      .product-description h7 {
        font-size: 30px; /* Makes the title prominent */
        color: #ffd450; /* Sets a standout color for the product name */
        margin-bottom: 10px; /* Adds spacing below the title */
        text-transform: uppercase; /* Makes the title uppercase */
        letter-spacing: 1px;
        font-weight:bold;
        font-family: "calton",sans-serif; /* Adds spacing between letters */
      }
      .product-description h8 {
        font-size: 20px; /* Makes the title prominent */
        color: #ffd450; /* Sets a standout color for the product name */
        margin-bottom: 20px; /* Adds spacing below the title */
        text-transform: uppercase; /* Makes the title uppercase */
        letter-spacing: 1px;
        font-weight:bold;
        display:block;
        font-family: "calton",sans-serif;

         /* Adds spacing between letters */
      }
      .product-description h9 {
        font-size: 20px; /* Makes the title prominent */
        color: #3b6403; /* Sets a standout color for the product name */
        margin-bottom: 40px; /* Adds spacing below the title */
        text-transform: uppercase; /* Makes the title uppercase */
        letter-spacing: 1px;
        font-weight:bold;
        display:block;
         /* Adds spacing between letters */
      }
      .product-description h6 {
        font-size: 20px; /* Makes the title prominent */
        color: #555; /* Sets a standout color for the product name */
        margin-bottom: 20px; /* Adds spacing below the title */
        text-transform: uppercase; /* Makes the title uppercase */
        letter-spacing: 1px;
        font-weight:bold; 
        font-family: "Calton",sans-serif;/* Adds spacing between letters */
      }
      
      .product-description p {
        font-size: 20px; /* Sets a comfortable font size for reading */
        line-height: 1.6; /* Improves text readability */
        color: #555; /* A softer shade for paragraph text */
        margin-bottom: 20px;
        font-weight:bold; 
        font-family: "bold",sans-serif;/* Adds spacing below the paragraph */
      }
      
      .buy-now {
        display: inline-block;
        padding: 10px 20px;
        background-color:#3b6403;
        color:white;
        text-decoration: none;
        font-size: 1.2em;
        font-weight: bold;
        border-radius: 25px;
        font-family: "Bold",sans-serif;
        transition: all 0.3s ease;/* Smooth hover effect */
      }
      
      .buy-now:hover {
        background-color:#ffd450;
         /* Intensifies shadow on hover */
      }
   
    
    h3 {
        font-size:13vw;
        background: url('/static/a.jpg') no-repeat center; 
        background-size: cover;
        background-clip:text;
        position:relative;
        margin:0;
        -webkit-background-clip: text;
        color:transparent;
        font-family: "Bold",sans-serif;

    }
    h9 {
        font-size: 13vw;
        font-family: 'calton', sans-serif;
        color: #ffd700; /* Neon yellow color */
        text-align: center;
        margin-bottom:250px;
        text-shadow: 
            0 0 5px #ffd700, 
            0 0 10px #ffd700, 
            0 0 20px #ffea70, 
            0 0 40px #ffe84e, 
            0 0 80px #ffe84e, 
            0 0 100px #ffdc00;
        animation: neon-flicker-yellow 1.5s infinite alternate;
    }
    
    @keyframes neon-flicker-yellow {
        0% {
            text-shadow: 
                0 0 5px #ffd700, 
                0 0 10px #ffd700, 
                0 0 20px #ffea70, 
                0 0 40px #ffe84e, 
                0 0 80px #ffe84e, 
                0 0 100px #ffdc00;
        }
        50% {
            text-shadow: 
                0 0 3px #ffd700, 
                0 0 8px #ffd700, 
                0 0 15px #ffea70, 
                0 0 30px #ffe84e, 
                0 0 60px #ffe84e, 
                0 0 70px #ffdc00;
        }
        100% {
            text-shadow: 
                0 0 6px #ffd700, 
                0 0 12px #ffd700, 
                0 0 25px #ffea70, 
                0 0 50px #ffe84e, 
                0 0 100px #ffe84e, 
                0 0 120px #ffdc00;
        }
    }
    
    h4{
        font-size:6vw;
        margin:0;
        color:#3b6403;
        font-family: 'Calton', sans-serif;
    }
    .buttona {
        display: inline-block;
        padding: 10px 20px;
        background-color:#ffd450;
        color:white;
        text-decoration: none;
        font-size: 1.2em;
        font-weight: bold;
        border-radius: 25px;
        transition: all 0.3s ease;
        margin-top:40px;
        margin-left:750px;
        font-family: "calton",sans-serif;
        
    }
    .buttona:hover{
        background-color:#3b6403;
    }
    /* Style for when navbar is oval */
    

    main {
        padding: 80px 20px 20px;
        /* Add top padding to avoid content being hidden under the fixed header */
        text-align: center;
    }
    .about {
        display: flex;
        align-items: flex-start;
        gap: 70px;
        margin-bottom:150px;
    }
    .about-content h6 {
        color:#3b6403;
        font-size:3.5vw;
        margin-bottom:20px;
        font-family: "Calton",sans-serif;
    }
    
    .about-image img {
        max-width: 100%;
        height: auto;
        margin-left:40px;
        border-radius: 20px;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    }
    
    .about-content {
        max-width: 60%;
        margin-top:-100px;
    }
    
    .about-content h2 {
        font-size: 1.8rem;
        margin-bottom: 10px;
        color: #333;
    }
    
    .about-content ul {
        list-style: none;
        padding: 0;
        margin: 0;
    }
    
    .about-content li {
        margin-bottom: 15px;
        font-size: 1.5rem;
        display: flex;
        align-items: center;
        gap: 15px;
        font-family: "Roboto",sans-serif;
        font-weight: bold;
        color:#3b6403;
        padding: 10px 15px;
        background-color: #fffaf1;
        border-radius: 5px;
        box-shadow: 0 3px 6px rgba(0, 0, 0, 0.1);
        transition: transform 0.3s, box-shadow 0.3s;
    }
    
    
    
    .about-content li i {
        font-size: 1.5rem;
        color: #f39c12;
    }
    
    

    .service-container {
        display: flex; /* Creates a horizontal layout */
        align-items: center; /* Aligns items vertically */
        justify-content: space-between; /* Spaces the items evenly */
        margin: 10px auto; /* Centers the container on the page */
        max-width: 1200px; /* Optional: limits the container width */
    }
    
    .caption-left, .caption-right {
        width: 30%; /* Adjust width as needed */
        text-align: left; /* Aligns text on the left or right */
    }
    
    .caption-right {
        text-align: right;
    }
    
    .service-container img {
        width: 40%; /* Adjust width to your preference */
        max-width: 600px;
        height: auto;
        border-radius: 70px; /* Optional: rounded corners */
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Optional: subtle shadow */
    }
    
    .image-caption, .image-captionn {
        margin: 0;
        font-size: 2.5rem; /* Adjust font size */
        font-weight: bold;
        line-height: 1.5;
        font-family: "Calton",sans-serif;
    }
    
    .image-caption {
        color: #3b6403;
    }
    
    .image-captionn {
        color: #ffd450;
    }
    

    .hamburger {
        display: none;
        flex-direction: column;
        justify-content: space-between;
        width: 30px;
        height: 20px;
        cursor: pointer;
        margin-right: 10px;
        
        
        
    }
    

    .hamburger div {
        height: 3px;
        background-color: black;
        border-radius: 3px;
        
        
        
    }
    .about-us {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 50px;
    gap: 30px;
    border-radius: 50px;
    background-color: #fff8e7; /* Optional */
}

.about-text {
    flex: 1;
    margin-left: 60px;
    
    font-family: 'calton', sans-serif;
}

.about-text h2 {
    font-size: 36px;
    color: #3b6403;
    margin-bottom: 15px;
}

.about-text p {
    font-size: 25px;
     text-align: left;
    line-height: 1.6;
    color: #333;
    font-family:"bold",sans-serif;
}

.about-imagee{
    flex: 1;
    text-align: right;
}

.about-imagee img {
    max-width: 100%;
    max-height: 600px;
    border-radius: 10px;
}
@media (max-width: 480px) {
    .about-us {
        flex-direction: column;
        padding: 25px 15px;
        gap: 20px;
        border-radius: 30px;
    }

    .about-text {
       
        flex: unset;
        width: 100%;   
        margin:0;
        text-align: center;
    }

    .about-text h2 {
        font-size: 28px;
    }

    .about-text p {
        font-size: 18px;
        text-align: center;
    }

    .about-imagee {
        flex: unset;
        text-align: center;
    }

    .about-imagee img {
        max-width: 90%;
        border-radius: 10px;
    }
}


   form{
        padding-bottom: 15px;
        display: flex;
        align-items: center;
            
        border-bottom:1px solid #ccc;
        margin-bottom: 30px;
    
        }

    form .far{
        font-size:18px;
        margin-right:10px;
        margin-top:20px;
        color:#ffd450;

    }
    form input{
        width:100%;
        background-color: transparent;
        color:#402021;
        border:0;
        margin-top:20px;
        outline: none;

    }
    form button{
        background-color: transparent;
        border:0;
        outline: none;
        cursor: pointer;
        margin-top:20px;

    }
    form button .fas{
        font-size:16px;
        color: #ffd450;
        
        
    }
    .footer-text {
        text-align: center;
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    .footer-text h6{
        font-size:70px;
         margin-top:40px;

    }
    .footer-text h5{
        font-size:150px;
         margin-top:120px;
         margin-bottom:20px;

    }
    
    .social-icons .fab{
        width:40px;
        height: 40px;
        border-radius: 50%;
        text-align: center;
        line-height: 50px;
        font-size: 20px;
        color:white;
        background: #3b6403;
        margin-right: 15px;
        margin-top:-40px;
        

    }
    .social-icons .fab:hover{
        color:#ffd450;
    }
    .newsletter-form {
        display: flex;
        flex-direction: column;
        gap: 10px;
        margin-top: 60px;
    }
    
    .newsletter-form input {
        padding: 10px;
        border: none;
        border-radius: 0px;
        font-size: 14px;
        outline: none;
       
    }
    
    .newsletter-form button {
        padding: 10px;
        background-color: #ffd450;
        color: black;
        border: none;
        border-radius: 0px;
        cursor: pointer;
        font-size: 24px;
        transition: background-color 0.3s ease;
       
    }
    
    .newsletter-form button:hover {
        background-color: black;
        color:white;
        font-size: 28px; 
        

    }
    
    
    .footer {
        width: 100%;
        background:white;
        color: black;
        padding: 50px 20px;
        
        font-size: 13px;
        line-height: 20px;
        border-top: 4px solid #3b6403;
        bottom:0;
        font-family: 'roboto',sans-serif;
        
    }
   
.footer-bottom h1 {
    margin-top: 30px;
    font-size: 44px;
    text-align: center;
}
.footer-bottom h3 {
    margin-top:150px;
    font-size: 244px;
    text-align: center;
    margin-bottom:100px;;
}
.footer h4 {
    font-size: 25px;
    width:fit-content;
    position:relative;
    margin-bottom: 40px;
    color: #3b6403;
    
}
.crafted-by {
    text-align: center;
}


    
    .row {
        width: 85%;
        display: flex;
        margin:auto;
        flex-wrap: wrap;
        justify-content: space-between;
        align-items: flex-start;
        gap:20px;
        
    }
    .footer p {
        font-size: 18px;
        margin: 5px 0;
        font-weight: Bold;
        color:#ffd450;
        font-family: "roboto",sans-serif;
        
        
    }
    
    
    
    .footer-logo{
        max-width: 80px;
        margin-bottom: 0px;
        transform:scale(3);
        

    }
    hr{
        width:90%;
        border:0;
        border-bottom: 1px solid#ccc;
        margin:20px auto;
    }
    .copyright{
        text-align:center;
    }
    
    @keyframes moving{
        0%{
            left:-20px;
        }
        100%{
            left:100%;
        }
    }
    
    
    
    
   
    
   
    .social-media{
        position: absolute;
        bottom: 70px;
        left: 93%;
        transform: translateX(-50%);
        display: flex;
        gap: 15px;
    }
    
    .social-media a {
        color: green;
        font-size: 95px;
        transition: color 0.3s ease;
    }
    
    .social-media a:hover {
        color: #9ffd32; /* Change to your preferred hover color */
    }
    .underline {
    width:100%;
    height:5px;
    background:#3b6403;
    border-radius: 3px;
    position: relative;
    top: 12px;
    left: 0;
}

.underline span {
    width:15px;
    height:100%;
    background: #ffd450;
    border-radius: 3px;
    position: absolute;
    top: 0;
    left: 10px;
    animation: moving 2s linear infinite;
}

@keyframes moving {
    0% { left:-20px; }
    100% { left:100%; }
}



    @media (max-width: 480px) {
        body {
            font-size: 14px; /* Adjust text size for better readability */
            padding: 0;
            margin:0;
            overflow-x: hidden;
           
        }
        html{
            padding: 0;
            margin:0;
            overflow-x: hidden;

        }
        
        header {
            padding: 5px 10px;
            transform: scale(1); /* Avoid scaling for small screens */
        }
        
        .brand img {
            max-height: 50px; /* Reduce logo size */
            transform: scale(4.5); /* Adjust scaling for logo */
        }
        
        .button a {
            padding: 10px 15px;
            font-size: 0.9em; /* Adjust button text size */
        }
        
        .image-container video {
            max-width: 100%;
            height:640px; /* Ensure image fits smaller screens */
            border-radius: 70px;
            margin-top:0px;
            object-fit:cover;
             /* Adjust border radius */
        }
        .image-container .overlay img:nth-of-type(1) {
        top: 310px; /* Adjust spacing for overlay images */
        right: -100px;
        max-width: 250px;
        transform: rotate(0deg);
        transform-origin: center; /* Reduce width */
    }

    .image-container .overlay img:nth-of-type(2) {
        top: 60px;
        right: -20px;
        max-width: 250px;
    }

    .image-center {
        bottom: -100px; /* Adjust positioning for smaller screens */
        left: 50%;
    }

    .image-center img.neon-flower {
        width: 40px;
        display:none; /* Reduce size for smaller screens */
    }

    .image-container .overlay .bottom-right
 {
    top: 200px; /* Adjust for better placement */
    right: 0px; /* Adjust distance from the right */
    font-size: 2em; /* Decrease font size */
}

.image-container .overlay .bottom-rightt {
    top: 233px; /* Adjust for better placement */
    right: 0px; /* Adjust distance from the right */
    font-size: 2em; /* Decrease font size */
}


    .image-container .overlay img:nth-of-type(3)
    {
        top: 290px; /* Adjust placement */
        right: -50px;
        max-width: 120px; /* Scale down */
    }
    
    .image-container .overlay img:nth-of-type(4)
     {
        top: 300px; /* Adjust placement */
        right: 50px;
        max-width: 100px; /* Scale down */
    }
    
    .image-container .overlay img:nth-of-type(5) {
        top: 310px; /* Adjust placement */
        right: 150px;
        max-width: 85px; /* Scale down */
    }

    .image-container .overlay img:nth-of-type(6) {
        top: 340px;
        right: 250px;
        max-width: 300px;
    }
    
    .image-container .overlay .description {
        font-size: 1.5em; /* Adjust font size */
    }
        
        
        .image-container .overlay h1 {
            font-size: 4em;
            
            margin-top:-20vh; /* Scale down overlay text */
        }
        .description:first-of-type {
        display: none;
    }
        .description {
        font-size:5px; /* Adjust font size for small screens */
         /* Reduce margins for small screens */
    }
        
        .product {
            flex-direction: column; /* Stack elements vertically */
            width: 100%; /* Make it full-width */
            height: auto; /* Let the height adjust automatically */
            margin-left: 0;
        }
        
        .product-description {
            padding: 10px;
            width: 100%;
            align-items: center;
            text-align: center;
        }
        
        .product-description h7, 
        .product-description h8, 
        .product-description h9 {
            font-size: 1.2em; /* Reduce heading sizes */
        }
        
        h2 {
            font-size: 1.5rem; /* Scale down heading */
            margin-left: 20px; /* Adjust margins */
            margin-right: 20px;
        }
        
        .buttona {
            margin-left: 0;
            margin-right: 0;
            text-align: center; /* Center the button */
        }
        
        .about {
            flex-direction: column; /* Stack content vertically */
            gap: 20px;
        }
        
        .about-image img {
            width: 80%; /* Scale down image */
            margin: 0 auto; /* Center it */
        }
        
        .about-content {
            max-width: 90%;
            margin: 0 auto; /* Center content */
        }
        
        .about-content h6 {
            font-size: 1.5em; /* Reduce heading size */
        }
        .service-container {
            flex-direction: column;
            text-align: center;
        }
        
        .caption-left, .caption-right {
            width: 100%;
        }
        .buy-now {
            position: relative; /* Allows fine-tuning with top property */
            top: -20px; /* Moves the button upward by 10px */
            margin-top: 0; /* Ensures no conflicting margins */
        }
        .footer-logo {
            max-width: 60px;
        }
        .footer-bottom h1 {
            font-size: 40px;
        }
    
        .footer-bottom h7 {
            font-size: 60px;
        }
         .newsletter-form {
        margin-left: 0;
        margin-top: 20px;
    }

    .newsletter-form input {
        font-size: 12px;
    }

    .newsletter-form button {
        font-size: 18px;
    }
    .footer h4 {
        margin-top: 30px;
    }

    
    

    }
    
    
    
    
    @media (max-width: 768px) {
        /* Adjust the header padding */
        header {
            padding: 20px 20px;
            
            
        }
       
        

        .navbar {
            position: absolute;
            top: 60px;
            right: 0;
            background-color: transparent;
            flex-direction: column;
            width: 100%;
            height: 0;
            overflow: hidden;
            transition: height 0.3s ease;
            z-index: 99;
            display:none;
            
            
        }
        

        .navbar.show {
            
            height: 300px; /* Adjust based on content */
    background-color: rgba(255, 255, 255, 0.7); /* Add a dark semi-transparent background */
    opacity: 1;
    
    
        }

        .navbar li {
            text-align: center;
            padding: 15px 0;
            
        }
        header:hover #navbar a {
            color: #3b6403;
            text-align:left;
            margin-left:100px;
        }
        
        
        .hamburger {
            display: flex;
            margin-right: 40px;
            
        }

        .button {
            display: none;
        }
    }

    
        @media (max-width: 768px) {
            header.shrink {
                margin-left: -20px;
                background-color: rgba(255, 255, 255, 0.7);
            }
        
            header .brand a {
                font-size: 20px; /* Adjust logo size */
            }
        
            .navbar li a {
                font-size: 16px; /* Adjust font size */
            }
        }
        
        
        @media (max-width: 768px) {
    .footer-bottom h1 {
        font-size: 1.5rem;
        margin-top:20px;
    }

    .footer-bottom h3 {
        font-size: 7.25rem;
    }
    .footer h4 {
        font-size: 15px;
        margin-bottom: 20px;
    }
    footer{
        bottom:unset;
    }
    .col{
        flex-basis:100%;
    }
    .footer-text h6{
        font-size:30px;
         

    }
    .footer-text h5{
        font-size:60px;
         margin-top:20px;

    }
    
   
}
.logo-section {
    padding: 60px 20px;
    background: #fff; /* changed to white */
    text-align: center;
}

.logo-header h2 {
    font-size: 36px;
    color: #3b6403;
    margin-bottom: 15px;
}

.logo-header p {
    font-size: 20px;
    color: #555;
    max-width: 650px;
    margin: 0 auto 45px;
}

.logo-container {
    display: flex;
    justify-content: center;
    gap: 150px;
    flex-wrap: wrap;
}

.logo-item {
    text-align: center;
    max-width: 260px;
}

.logo-item:nth-child(1) img {
    width: 180px;
    margin-bottom: -20px; /* slightly bigger first image */
}

.logo-item:nth-child(2) img {
    width: 150px;
    margin-bottom: -20px;  /* slightly bigger second image */
}
.logo-item:nth-child(3) {
    margin-top: 20px;
}

@media (max-width: 480px) {
    .logo-container {
        flex-direction: column;
        gap: 40px; /* smaller gap vertically */
        align-items: center;
    }

    .logo-item {
        max-width: 100%;
    }

    .logo-item:nth-child(1) img {
        width: 140px;
        margin-bottom: -15px;
    }

    .logo-item:nth-child(2) img {
        width: 120px;
        margin-bottom: -15px;
    }

    .logo-item img {
        width: 100px;
        margin-bottom: 15px;
    }

    .logo-item h3 {
        font-size: 20px;
    }

    .logo-item p {
        font-size: 16px;
    }

    /* Move third item 20px lower */
    .logo-item:nth-child(3) {
        margin-top: 20px;
    }
}

.logo-item img {
    width: 120px; /* default size for all */
    height: auto;
    margin-bottom: 18px;
}

.logo-item h3 {
    font-size: 24px;
    color: #3b6403;
    margin-bottom: 10px;
}

.logo-item p {
    font-size: 18px;
    color: #333;
    margin: 0;
    font-weight: bold;
    font-family: "roboto",sans-serif;
}
.mission-section {
    background: #fff;
    padding: 50px 20px;
    text-align: center;
    max-width: 900px;
    margin: 0 auto;
}

.mission-section h2 {
    font-size: 32px;
    text-align: center;
    color: #3b6403;
    margin-bottom: 15px;
    
}

.mission-section p {
    font-size: 25px;
    color: #555;
    line-height: 1.6;
    max-width: 900px;
    font-weight: bold;
    font-family: "roboto",sans-serif;
    margin: 0 auto;
}



    
</style>

