/* General Styles */
body {
    font-family: Arial, sans-serif;
    line-height: 1.6;
    margin: 0;
    padding: 0;
    background-color: #4f7942;
    color: mintcream;
}

header {
    background-color: #ffffff;
    color: #fff;
    padding-top: 10px;
    padding-bottom: 10px;
    text-align: center;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

img.logo {
    width: 250px; /* Increase the logo size */
    height: auto;
    margin-left: 60px; /* Move the logo to the left */
    padding-top: 23px;
    padding-bottom: -60px;
    display: block;
    border-radius: 10px;
    position: absolute;
}

header p {
    display: block;
    height: 65px;
    font-size: 20px;
    padding-top: 40px;
    text-align: center;
    margin-top: auto;
    margin-bottom: auto;
    color: #000000; /* Gray text color */

}

/* Style the navigation bar */
nav {
    background-color: #ffffff;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Light shadow */
    border-radius: 10px; /* Rounded edges */
    display: flex; /* Centered navigation */
    justify-content: center;
    margin: 20px auto; /* Center the navigation bar */
    max-width: 900px;

}

/* Style the navigation links */
nav a {
    display: block;
    font-size: 14px;
    color: #000000; /* Dark gray text color */
    padding: 10px 10px; /* Adjust padding */
    text-decoration: none;
   /* transition: background-color 0.3s; /* Smooth transition on hover */
}

/* Add a hover effect for navigation links */
nav a:hover {
    background-color: #4f794271; /* Light gray background on hover */
    color: #ffffff;
    border-radius: 5px;
    margin: 2px;


}

.nav a.active {
    background-color: #4f7942; /* Your chosen color for active link */
    color: #ffffff; /* Text color for active link */
    border-radius: 5px;
    margin: 2px;
}

/* sunflower wrap */
.sunflower-container {
    position: relative; /* Change to relative positioning */
    text-align: center; /* Center the content */
    margin-top: none; /* Adjust the margin as needed */
    padding: none; /* Add some padding for spacing */
}

.sunflower-image {
    width: 100%;
    /* Take up full width of parent container */
    height: auto;
    display: block;
    z-index: -1; /* Place image behind other content */
    border-radius: none; /* Add border radius for a softer look */
}

    .sunflower-text {
        background-color: rgba(255, 255, 255, 0.8);
        text-align: center;
        padding: 10px 20px;
        border-radius: 10px;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        margin-top: 10px; /* Add some spacing between text boxes */
        color: #000;
        max-width: 500px;
        display: block;
        z-index: 2;
        position: absolute;
        left: 460px;
        top: 400px;


    }

    .sunflower-text h3 {
        font-size: 28px;
        padding:none;
    }

    .sunflower-text p {
        font-size: 18px;
        line-height: 1.6;
        margin-bottom: 1dvh;
    }

.company-description {
    color: #000;
    text-align: center;
    align-items: center;
    font-size: 18px;
    line-height: 1.6;
    max-width: 800px;
    margin: auto; /* Center the box horizontally */
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    background-color: rgba(255, 255, 255, 0.8);
    padding-left: 20px;
    padding-right: 20px;
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    z-index: 2;
    display: block;
    position: absolute;
    left: 315px;
    top: 220px;


}

main {
    padding: none;
}





/* Show the tooltip text when button is hovered */
.info-button:hover + .tooltip {
    visibility: visible;
    opacity: 1;
    z-index: 5;
}




/* Tree Page Styles */


.tree-image {
    width: 100%;
    max-width: 700px;
    border-radius: 20px;
    max-height: 800px;
    display: block;
    position: relative;
    left: 41px;
    z-index: -1;
    border-radius: none;
}

.tree-care-intro {
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    background-color: rgba(255, 255, 255, 0.8);
    border-radius: 10px;
    padding: 24px;
    padding-top: 10px;
    padding-bottom: 24px;
    margin: 20px auto;
    max-width: 805px;
    width: 500px;
    color: #333;
    font-size: 14px;
    line-height: 1.8;
    position: absolute;
    top: 262px;
    left: 53%;
    margin-left: 20px;
    margin-right: 95px;

}

/* Styles for normal links */
.tree-care-intro a {
    color: #007bff; /* Change to your desired link color */
    text-decoration: none; /* Removes default underline */
  }

  /* Styles for hovered links */
  .tree-care-intro a:hover {
    text-decoration: underline; /* Underline on hover */
  }

  /* Styles for visited links */
  .tree-care-intro a:visited {
    color: #800080; /* Change to your desired visited link color */
  }




#product-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
    align-items: flex-start;
    padding: 0;
    margin: auto;
    margin-top: 40px;
    margin-bottom: 40px;
    margin-left: 40px;
    margin-right: 40px;

}

#product-list li {
    flex: 0 0 calc(30% - 20px);
    max-width: 500px;
    background-color: #ffffff;
    margin: 20px;
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    margin-left: 10px;
}

#product-list h3 {
    background-color: #ffffff;
    color: #000000;
    font-size: 16px;
    padding: 10px;
    margin: 0;
    cursor: pointer;
    align-items: baseline;
    display: flex;
}

#product-list h3 a {
    color: #000000;
    text-decoration: none;
    font-size: 16px;
}


.product-details {
    display: none;
}

.product-details img{
    width: auto;
    height: 275px;
    display: block;
    margin: auto;
    padding: 10px;
    max-width: 300px;
    max-height: 300px;
    object-fit: cover;
    object-position: center;
}

.product-details.show {
    display: block;
    background-color: #f0f0f0;
    padding: 10px;

}

/* White Background Content Styles */

.white-background {
    color: black;
    background-color: #f0f0f0;
    font-size: 14px;
    line-height: 1.8;


}

/*Contact Form Styles*/
.contact-container {
    background-color: #ffffff;
    border-radius: 10px;
    padding: 40px;
    margin: 20px auto;
    max-width: 600px;
    text-align: center; /* Centering the content */
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);

}
.contact-container h1 {
    color: #000;
}


#contact-form {
    background-color: #fff;
    padding: 30px;
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

#contact-form label {
    display: block;
    font-weight: bold;
    margin-bottom: 5px;
    color: #333;
}

#contact-form input,
#contact-form textarea {
    width: 100%;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
    margin-bottom: 20px;
}

#contact-form button {
    background-color: #4f7942;
    color: #fff;
    padding: 15px 30px;
    border: none;
    cursor: pointer;
    font-size: 18px;
    border-radius: 5px;
    transition: background-color 0.3s;
}

#contact-form button:hover {
    background-color: #2c5234;
}

/* .bodybg{
    background-color: #000;
} */


/* Footer Styles */
footer {
    background-color: #ffffff;
    padding: 20px;
    text-align: center;
    color: #fff;


}


.contact-box {
    text-align: center;
    color: #000;
    padding: 20px;
    font-size: 14px;
    overflow: hidden;
    word-wrap: break-word;
    margin: 20px auto;
    max-width: 100%;
}

.contact-box p {
    margin-bottom: 10px;
}

.contact-box i {
    margin-right: 10px;
    color: #4f7942;
}

.contact-box a {
    color: #000;
    text-decoration: none;
}

.contact-box a:hover {
    text-decoration: underline;
}



/* ... existing styles ... */

h3 {
    text-align: center;
    color: black; /* Making the text black */
}


/* Centering the heading */
h1 {
    text-align: center;
    color: #ffffff;
    letter-spacing:  1px;
    font-family: Georgia, 'Times New Roman', Times, serif;
}

/* Styles for the addition button */
.toggle-button{
    background-color: #4f7942; /* Green background color */
    color: white; /* Text color */
    padding: 10px 20px; /* Padding around the button content */
    border: none; /* No border */
    border-radius: 5px; /* Rounded corners */
    cursor: pointer; /* Change cursor to indicate interactivity */
    font-size: 16px; /* Font size */
    transition: background-color 0.3s ease; /* Smooth color transition on hover */
    display: flex;
    margin-right: 20px;
}

  /* Hover effect */
  .toggle-button:hover {
    background-color:#2c5234; /* Darker green background on hover */
  }


/* responisive design*/

/* mobile nav design*/
    /* Style the dropdown button */
.menu-container{
    margin-top: 120px;
    margin-bottom: -100px;
    z-index: 11;
}
.dropbtn {
    background-color: #4f7942;
    color: white;
    padding: 10px;
    border: none;
    cursor: pointer;
    z-index: 11;

}

#hamburger i.fa-bars {
    font-size: 26px; /* Adjust the font size to make the icon larger */
  }

/* The container <div> - needed to position the dropdown content */
.dropdown {
    position: relative;
    display: inline-block;

}

/* Dropdown content (hidden by default) */
.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
    z-index: 11;
    border-radius: 0 0 10px 0;
}

/* Links inside the dropdown */
.dropdown-content a {
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    z-index: 11;
    font-size: 14px;
    color: #000000; /* Dark gray text color */

}

/* Change color of dropdown links on hover */
.dropdown-content a:hover {

    background-color: #4f7942; /* Light gray background on hover */
    color: #ffffff;
    border-radius: 5px;
    margin: 2px;
}


/* Existing styles */

/* Add media query for screens smaller than 768px (typical mobile width) */
@media (max-width: 480px){


    body {
        font-family: Arial, sans-serif;
        line-height: 1.6;
        margin: 0;
        padding: 0;
        background-color: #4f7942;
        color: mintcream;
    }


    /* Header */
    img.logo {
        width: 500px;
        border-radius: 0px;
        position: absolute;
        top: 0px;
        z-index: 7;
        margin: 0px;
        padding-top: 0px;

        }



    header p {
        font-size: 14px;
        position: absolute;
        top: 325px;
        left: 266px;
        width: 180px;
        height: 45px;
        z-index: 10;
        color: #ffffff;
        padding-bottom: 0px;
        padding: 10px;
        background-color: #4f7942;
        border-radius: 10px;
        }


    .nav{
        display: none;
    }



    /* Sunflower section */
    .sunflower-text {

        left: 250px;
        top: 396px;
        transform: translateX(-50%);
        width: 500px;
        padding: 0px;
        border-radius: 0px;
        background-color: #ffffff;


    }
    .sunflower-text h3 {

        font-size: 16px;
        padding-top: 10px;
        margin: 10px;
        border-radius: 0px;
        font-family: Georgia, 'Times New Roman', Times, serif;
        background-color: #ffffff;

    }

    .sunflower-text p {
        background-color: #ffffff;

        font-size: 14px;

        margin: 10px;
        border-radius: 0px;
        text-align: center;
        padding-bottom: 2px;
    }

    h1{
        font-family: Georgia, 'Times New Roman', Times, serif;
        font-size: 14px;
        z-index: 111;
        position: absolute;
        top: 125px;
        left: 160px;
        text-align: center;
        color:#ffffff;
        white-space: nowrap;


    }
    .tree-care-intro {

        position: absolute;
        top: 399px;
        left: 230px;
        z-index: 7;
        width: 460px;
        text-align: center;
        color: #000000;
        font-size: 14px;
        transform: translateX(-50%);

        padding: 20px;
        border-radius: 0px;
        background-color: #ffffff;


    }
   .tree-image{
    position: absolute;
    top: 85px;
    left: 0px;
    width: 500px;
    height: auto;
    border-radius: 0px;
    display: block;
    max-height: 300px;

   }




    header{
        padding: 0px;
    }

    /* Company description */
    .company-description {
        font-size: 14px;
        left: 250px;
        top: 645px;
        transform: translateX(-50%);
        width: 480px;
        padding: 10px;
        border-radius: 0px;
        background-color: #ffffff;

    }


    .sunflower-image {
        max-height: 240px;
        width: auto;
        margin-top: 100px;
    }


    /* Product list */


    #product-list li {
        flex: 0 0 calc(100% - 20px); /* Full width for list items */
        z-index: 6;
    }
    #product-list {
        position: relative;
        top: 950px;
        width: 430px;
        z-index: 10;




    }

    /* Product details */
    .product-details img {
        width: 80%;
        height: auto;
        max-height: none;
        margin: 10px auto;
    }




    /* Footer */
    .contact-container {
        background-color: #ffffff;
        border-radius: 10px;
        padding: 49px;
        margin-right: 5px;
        width: 400px;
        max-width: 344px;
        text-align: center;
        box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
        position: absolute;
        top: 146px;
        left: 31px;
        font-size: 12px;
        z-index: 10;
    }
    .contact-container h1 {
        color: #000;
        position: absolute ;
        top: 0px;
        left: 170px;
        font-size: 14px;
    }
    #contact-form button {
        font-size: 14px;
    }

    .contact-box {
        font-size: 10px; /* Smaller font size */
        padding: 10px;
        position: relative;
    }
    footer{
        position: relative;
        width: 459px;
        top: 1100px;
        background-color: #ffffff;
        padding: 20px;
        text-align: center;
        color: #fff;


    }
}






@media (min-width: 500px){

    .menu-container{
        display: none;
    }





}
@media (max-width: 500px){
    .nav{
        display: none;
    }
}



/* CSS for screens up to 480px (mobile) */


  /* CSS for screens between 481px and 1024px (tablets) */
  @media (min-width: 481px) and (max-width: 1024px) {
    /* Header */
    img.logo {
      width: 300px; /* Adjust the width for tablets */

    }
    .nav{
        margin-left: 20px;
    }
    .sunflower-image {
        max-height: 491px;
        width: auto;
        margin-top: 10px;
    }
    header{
    background-color: #ffffff;
    color: #fff;
    padding-top: 10px;
    padding-bottom: 10px;
    text-align: center;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    max-width: 1023px;
    width: 1159px;
    }

    header p {
      font-size: 16px; /* Adjust font size for tablets */
      top: 200px; /* Adjust top position for tablets */
      left: 166px; /* Adjust left position for tablets */
    }

    /* Sunflower section */
    .sunflower-text h3 {
        font-size: 14px;
        padding: 0px;
        margin: 0px;
        margin-bottom: 10px;
    }
    .sunflower-text {
        background-color: #ffffff;
        position: absolute;
        left: 155px;
        font-size: 12px;
        margin: 10px;
        border-radius: 0px;
        text-align: center;
        padding-bottom: 2px;
        top: 400px;
        width: 675px;
        max-width: 900px;
        border-radius: 10px;

    }
    .sunflower-text p {
        font-size: 14px;
        line-height: 1.6;
        margin-bottom: 1dvh;
    }

    .company-description {
        font-size: 14px;
        left: 530px;
        top: 250px;
        transform: translateX(-50%);
        width: 480px;
        padding: 10px;
        border-radius: 0px;
        background-color: #ffffff;
        border-radius: 10px;

    }

    .tree-image {
        width: 100%;
        max-width: 500px;
        border-radius: 20px;
        max-height: 500px;
        display: block;
        position: relative;
        left: 20px;
        z-index: -1;
        margin-bottom: 150px;
    }

    .tree-care-intro{
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        background-color: rgba(255, 255, 255, 0.8);
        border-radius: 10px;
        padding: 10px;
        padding-top: 10px;
        padding-bottom: 24px;
        margin: 20px auto;
        max-width: 400px;
        width: 400px;
        color: #333;
        font-size: 12px;
        line-height: 1.8;
        position: absolute;
        top: 230px;
        left: 550px;

    }
    .nav{
        max-width: 1075px;
        width: 980px;


    }

    .product-details img {
        width: 80%;
        height: auto;
        max-height: none;
        margin: 10px auto;
    }


    h1{
    text-align: center;
    color: #ffffff;
    letter-spacing: 1px;
    font-family: Georgia, 'Times New Roman', Times, serif;
    font-size: 16px;
    }

    /* Adjust other elements as needed */

    /* Product list */
    #product-list {
      top: 600px; /* Adjust top position for tablets */
      max-width: 900px;
      width:900px ;
    }

    /* Footer */
    footer {
      width: 459px;
      top: 2000px; /* Adjust top position for tablets */
      width: 984px;
      max-width: 1200px;
    }
  }

  /* CSS for screens larger than 1024px (desktop) */
  @media (min-width:1024)and (max-width: 1600px)  {

    .tree-image {
        width: 100%;
        max-width: 1150px;
        border-radius: 20px;
        max-height: 800px;
        display: block;
        position: relative;
        left: 50px;
        z-index: -1;
    }

    .tree-care-intro{
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        background-color: rgba(255, 255, 255, 0.8);
        border-radius: 10px;
        padding: 24px;
        padding-top: 10px;
        padding-bottom: 24px;
        margin: 20px auto;
        max-width: 990px;
        color: #333;
        font-size: 24px;
        line-height: 1.8;
        position: absolute;
        top: 262px;
        left: 1249px;
        margin-left: 20px;
        margin-right: 95px;
    }
    .company-description {

        max-width: 1000px;
        margin: auto;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        background-color: rgba(255, 255, 255, 0.8);
        padding-left: 20px;
        padding-right: 20px;
        font-size: 28px;
        position: absolute;
        left: 760px;
        top: 240px;
    }
    .sunflower-text {
        background-color: rgba(255, 255, 255, 0.8);
        text-align: center;
        padding: 10px 20px;
        border-radius: 10px;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        margin-top: 10px;
        color: #000;
        max-width: 800px;
        display: block;
        z-index: 2;
        position: absolute;
        left: 860px;
        top: 500px;
        font-size: 58px;
    }

    .sunflower-text h3 {
        font-size: 32px;
    }
    .sunflower-text p {
        font-size: 28px;
        line-height: 1.6;
        margin-bottom: 1dvh;
    }

    /* Adjust other elements as needed */

    /* Product list */
    #product-list {
      top: 600px; /* Adjust top position for tablets */
    }


  }

  @media (min-width:1600px) {

        .sunflower-text {
            max-width: 800px;
            position: absolute;
            font-size: 28px;
            left: 33%;
            top: 520px;
        }

        .sunflower-text h3 {
            font-size: 32px;
        }
        .sunflower-text p {
            font-size: 28px;
            line-height: 1.6;
            margin-bottom: 1dvh;
        }
        .company-description{
            position: absolute;
            font-size: 28px;
            left: 33%;
            top: 220px;
        }

        .tree-image {
            width: 100%;
            max-width: 1150px;
            border-radius: 20px;
            max-height: 800px;
            display: block;
            position: relative;
            left: 50px;
            z-index: -1;
        }

        .tree-care-intro{
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
            background-color: rgba(255, 255, 255, 0.8);
            border-radius: 10px;
            padding: 24px;
            padding-top: 10px;
            padding-bottom: 24px;
            margin: 20px auto;
            max-width: 990px;
            max-height: 800px;
            color: #333;
            font-size: 24px;
            line-height: 1.8;
            position: absolute;
            top: 262px;
            left: 50%;
            margin-left: 20px;
            margin-right: 95px;
            width: 100%;
            display: block;
        }


    }