@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');
/* font-family: "Montserrat", sans-serif; */
@import url('https://fonts.googleapis.com/css2?family=Your+Artistic+Font&display=swap');

:root{
--header-height: 3.5rem;
--first-color:rgb(0, 101, 0);
--first-color-alt:rgb(29, 138, 29);
--first-color-light:lightgreen;
--title-color:white;
--text-color: hsl(228, 8%, 70%);
--container-color:hsl(228, 6%, 12%);
--shadow-img:0 0 48px hsl(93, 54%, 54% .4);
--gradient-card : linear-gradient(180deg, 
                                  hsla(93, 8%, 8%)
                                  hsla(93, 40%, 30%) );


--body-font: "montserrat", sans-serif;
--biggest-font-size: 2.25rem;
--h1-font-size : 1.5rem;
--h2-font-size : 1.25rem;
--h3-font-size : 1rem;
--normal-font-size: .938rem;
--small-font-size : .813rem;

--font-regular : 400;
--font-semi-bold: 600;
--font-bold: 700;

--z-tooltip: 10;
--z-fixed : 100;
                           
}

@media screen and (min-width: 1150px){
    :root{
        --biggest-font-size : 4.25rem;
        --h1-font-size: 2.25rem;
        --h2-font-size : 1.5rem;
        --h3-font-size : 1.25rem;
        --normal-font-size : 1rem;
        --small-font-size: .875rem;

    }
 
}

*{
    box-sizing: border-box;
    padding: 0;
    margin: 0;
}
html{
    scroll-behavior: smooth;
}
body{
    font-family:var(--body-font);
    font-size: var(--normal-font-size);
    background-color:rgb(88, 101, 85);
    color: var(--text-color);
}
h1, h2, h3, h4{
    color: var(--title-color);
    font-weight: var(--font-semi-bold);
}
ul{
    list-style: none;
}
a{
    text-decoration: none;

}
img{
    display: block;
    max-width: 100%;
    height: auto;
}
.container{
    max-width: 1120px;
    margin-inline:1.5rem ;

}
.grid{
    display: grid;
    gap: 1.5rem;
}
.section{
    padding-block: 5rem 1rem;
}
.section__title{
    font-size: var(--h1-font-size);
    font-weight: var(--font-bold);
    text-align: center;
    margin-bottom: 1rem;
}
.header{
    background-color: #c2c2c247;
    border-bottom: 2px solid rgba(82, 82, 82, 0.544);
    height: 75px !important;
}
.main{
    overflow: hidden;
}

/* about.css */


/* Hero section styles */
.profile {
    background-image: url('images/greenhouse\ production\ 2.jpg');
    background-size: cover;
    background-position: center;
    padding-top: 150px; /* Adjusted padding to accommodate the fixed header */
    text-align: center;
}

.profile__container {
    max-width: 800px;
    margin: 0 auto;
}

.profile__title {
    font-size: 3rem;
    color: #ffffff;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
    margin-bottom: 20px;
}

.company__profile {
    font-size: 1.2rem;
    color: #ffffff;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
    line-height: 1.6;
}


/* Media Query for smaller screens */
@media (max-width: 768px) {
    .profile__title {
        font-size: 2.5rem;
    }

    .company__profile {
        font-size: 1rem;
    }
}
.history {
    position: relative;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 50px 0;
    background-color:rgb(63, 78, 60);
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 95%); 
    box-shadow:1px 1px 2px rgba(0, 0, 0, 0.5); ;
}

.history__details,
.history__image {
    flex: 1;
}

.history__details {
    padding: 0 20px;
}

.history__title {
    font-size: 2.5rem;
    text-transform: uppercase;
    margin-bottom: 20px;
    letter-spacing: 2px;
    font-weight: bold;
    /* Triple gradient effect */
    background: linear-gradient(to right, #5ddf61, #ffc371, #00b2ff);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    /* Text shadow */
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
    /* 3D effect */
    transform: perspective(1000px) rotateY(5deg);
}

.history__description {
    font-size: 1.2rem;
    line-height: 1.6;
    color: #ffffff;
    margin-top: 20px;
    /* Color blocking */
    background-color: rgba(255, 255, 255, 0.1);
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    font-family: "Montserrat", sans-serif;
}

.history__image {
    position: relative;
    overflow: hidden;
    text-align: center;
}

.history__img {
    max-width: 80%;
    height: auto;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    transition: transform 0.5s ease-out; /* Transition for parallax effect */
}

.parallax {
    transform: translateZ(-50px) scale(1.1); /* Adjust scale and translation for parallax effect */
}

.what {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 50px 0;
    perspective: 1000px; /* Introduce perspective for 3D effect */
}

.what__image,
.what__details {
    flex: 1;
}

.what__title {
    font-size: 2.5rem;
    text-transform: uppercase;
    margin-bottom: 20px;
    letter-spacing: 2px;
    font-weight: bold;
    /* Triple gradient effect */
    background: linear-gradient(to right, #00ff00, #ece6e6, #ffffff);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    /* Text shadow */
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
}

.what__description {
    font-size: 1.2rem;
    line-height: 1.6;
    color: #ffffff;
    margin-top: 20px;
    /* Color blocking */
    background-color: rgba(255, 255, 255, 0.1);
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.what__image {
    transform: rotateY(-20deg); /* Apply 3D tilt effect */
}

.what__img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(4, 4, 4, 0.377);
    transition: transform 0.5s ease-out; /* Transition for animation effect */
}

.what__details {
    padding: 0 20px;
}

/* Animation effect */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.what__title,
.what__description {
    animation: fadeIn 5s ease forwards;
}
/* Dodge and burn effect */
.what__img::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.15); /* Adjust opacity for dodge effect */
    mix-blend-mode: overlay; /* Apply dodge effect */
}

.what__img::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(32, 109, 96, 0.1); /* Adjust opacity for burn effect */
    mix-blend-mode: multiply; /* Apply burn effect */
}
.what__img:hover {
    filter: grayscale(100%); /* Grayscale effect on hover */
}

.industry {
    position: relative; /* Set position to relative for parallax effect */
    overflow: hidden; /* Hide overflow to prevent unwanted scrolling */
    padding: 50px 0;
}

.industry__container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 80%; /* Adjust width as needed */
    max-width: 1200px;
    margin: 0 auto; /* Center the container horizontally */
    position: relative; /* Set position to relative for parallax effect */
    z-index: 1; /* Ensure the container is above the background */
}

.industry__title {
    font-size: 2.5rem;
    text-transform: uppercase;
    margin-bottom: 20px;
    letter-spacing: 2px;
    font-weight: bold;
    background: linear-gradient(to right, #00ff00, #ffffff); /* Duotone gradient with green emphasis */
    -webkit-background-clip: text; /* Apply text gradient */
    -webkit-text-fill-color: transparent; /* Hide original text color */
    z-index: 2; /* Ensure the title is above the background */
}

.industry__details {
    flex: 1;
    padding: 0 20px;
    position: relative; /* Set position to relative for parallax effect */
    z-index: 2; /* Ensure the details are above the background */
}


.industry__description {
    font-size: 1.2rem;
    line-height: 1.6;
    color: #333; /* Set text color */
    background: #f9f9f9; /* Color blocking effect */
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    position: relative; /* Set position to relative for parallax effect */
    z-index: 2; /* Ensure the description is above the background */
    transform-style: preserve-3d; /* Enable 3D transformations */
    transform: perspective(1000px) rotateY(7deg); /* Apply 3D effect */
}

/* Parallax effect */
.industry::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('your-background-image.jpg'); /* Add your background image */
    background-size: cover;
    background-position: center;
    z-index: -1;
    transform: translateZ(-1px) scale(1.5); /* Adjust scale for desired parallax effect */
}

/* Lockups */

/* Common Styles */
.traceability__container {
    max-width: 800px;
    margin: 0 auto;
    text-align: center;
    position: sticky;
    z-index: -1;
}

.traceability__title {
    font-size: 2.5rem;
    margin-bottom: 20px;
    color: #ffffff;
}

.traceability__description {
    font-size: 1.1rem;
    line-height: 1.6;
    color: #555;
}

.traceability__image {
    max-width: 100%;
    border-radius: 10px;
    margin-bottom: 20px;
}

.traceability__details {
    background-color: rgba(255, 255, 255, 0.9);
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
    margin-top: 30px;
    transition: transform 0.3s ease;
}

/* Creative Styles */
.traceability__title {
    text-transform: uppercase;
    letter-spacing: 2px;
}

.traceability__description:hover {
    transform: translateY(-5px);
}

/* Additional Creative Styles */

/* Gradient Overlay */
.traceability__image {
    position: relative;
}

.traceability__image::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.2)); /* Adjust gradient colors and opacity as desired */
    border-radius: 10px; /* Ensure the overlay matches the image border radius */
}

/* Animated Effects */
@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

.traceability__container {
    animation: fadeIn 1s ease; /* Apply fade-in animation to the container */
}

/* Iconography */
.traceability__icon {
    font-size: 3rem;
    color: #007bff;
}

/* Text Shadows */
.traceability__title {
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3); /* Add text shadow for the title */
}

/* Custom Borders */
.traceability__container {
    border: 2px solid #1e531645; /* Add a border around the container */
    border-radius: 15px; /* Adjust border radius */
    padding: 30px; /* Add padding to the container */
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1); /* Add a subtle box shadow */
}

/* Hover Effects */
.traceability__container:hover {
    transform: translateY(-3px); /* Apply a slight upward movement on hover */
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2); /* Increase box shadow on hover */
}

/* Parallax Styles */
.parallax-bg {
    display: flex;
    justify-content: center;
    align-items: center;
    background-position: center;
    background-size: cover;
    background-attachment: fixed;
    height: 100vh;
}
/* Compliance Section */
.compliance {
    padding: 80px 0;
    background-color: #f8f9fa;
 
}

.compliance__container {
    max-width: 800px;
    margin: 0 auto;
    text-align: center;
}

.compliance__title {
    font-size: 2.5rem;
    color: #0b550d;
    margin-bottom: 20px;
}

.compliance__images {
    display: flex;
    justify-content: center;
    margin-bottom: 20px;
}

.compliance__image {
    width: 200px;
    height: auto;
    margin: 0 10px;
    border-radius: 10px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

.compliance__description {
    font-size: 1.1rem;
    line-height: 1.6;
    color: #555;
    background-color: rgba(255, 255, 255, 0.9);
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

.compliance__description ul {
    list-style-type: none;
    padding: 0;
}

.compliance__description li {
    padding: 8px 0;
}

/* Creative Styles */
.compliance__title {
    text-transform: uppercase;
    letter-spacing: 2px;
}

.compliance__description {
    transition: transform 0.3s ease;
}

.compliance__description:hover {
    transform: translateY(-5px);
}

.compliance__certifications {
    list-style-type: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  
  .compliance__certifications li {
    font-size: 18px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
    position: relative;
    padding: 10px 20px;
    color: #fff;
    background: linear-gradient(135deg, #45b69c, #0f6830);
    border-radius: 10px;
    width: fit-content;
    text-decoration: none;
    
  }
  .cert{
  
width: 100px;
}
  
  .compliance__certifications li:before {
    content: ""; /* Bullet point */
    color: #fff; /* Change the color of the bullet point */
    font-size: 20px;
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
  }
  
  /* Hover effect */
  .compliance__certifications li:hover {
    background: linear-gradient(135deg, #ffc107, #ff5722);
  }
  
    
  @keyframes gradientAnimation {
    0% {
      background-position: 0% 0%;
    }
    50% {
      background-position: 100% 0%;
    }
    100% {
      background-position: 0% 0%;
    }
  }
  
  .compliance__certifications li:before {
    content: "\2022"; /* Bullet point */
    color: #fff; /* Change the color of the bullet point */
    font-size: 20px;
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
  }
  
  /* Hover effect */
  .compliance__certifications li:hover {
    color: #fff;
    background: linear-gradient(135deg, #ffc107, #744908, #1c8607);
    background-size: 600% 600%;
    animation: gradientAnimationHover 10s ease infinite;
  }
  
  .compliance__description span{
    color: #000000;
    background-color:rgba(39, 105, 58, 0.152) ;
    padding-left: 10px;
    padding-right: 10px;
    padding-bottom: 10px;
    margin-top: 20px;
    border-radius: 4rem;
  }
  @keyframes gradientAnimationHover {
    0% {
      background-position: 0% 0%;
    }
    50% {
      background-position: 100% 0%;
    }
    100% {
      background-position: 0% 0%;
    }
  }
  
  .footer {
    background-color: #333;
    color: #fff;
    padding: 50px 0;
  }
  
  .footer__container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
  }
  
  .footer__logo {
    font-size: 24px;
    font-weight: bold;
    text-decoration: none;
    color: #fff;
    display: inline-flex;
    align-items: center;
  }
  
  .footer__description {
    font-size: 14px;
    margin-top: 10px;
  }
  
  .footer__content {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin-top: 30px;
  }
  
  .footer__title {
    font-size: 18px;
    margin-bottom: 10px;
  }
  
  .footer__links {
    list-style-type: none;
    padding: 0;
  }
  
  .footer__link {
    text-decoration: none;
    color: #fff;
    font-size: 16px;
    margin-bottom: 10px;
    display: block;
  }
  
  .footer__social {
    display: flex;
  }
  
  .footer__social-link {
    color: #fff;
    font-size: 24px;
    margin-right: 15px;
    text-decoration: none;
  }
  
  .footer__copy {
    display: flex;
    justify-content: center; /* Center the text horizontally */
    margin-top: 30px;
    font-size: 14px;
  }
  
  
  .scrollup {
    position: fixed;
    bottom: 20px;
    right: 20px;
    background-color: #45b69c;
    color: #fff;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    text-align: center;
    line-height: 50px;
    text-decoration: none;
    transition: background-color 0.3s ease;
  }
  
  .scrollup:hover {
    background-color: #1f9d86;
  }

  @media screen and (max-width: 767px){
    .history {
        position: relative;
        overflow: hidden;
        display: flex;
        flex-direction: column-reverse;
        justify-content: center;
        align-items: center;
        padding: 50px 0;
        background-color: rgb(63, 78, 60);
        clip-path: polygon(0 0, 100% 0, 100% 100%, 0 95%);
        box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
    }
    .what {
        display: flex;
        flex-direction: column-reverse;
        justify-content: center;
        align-items: center;
        padding: 50px 0;
        perspective: 1000px;
    }
    .industry__container {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: center;
        width: 80%;
        max-width: 1200px;
        margin: 0 auto;
        position: relative;
        z-index: 1;
    }
    .industry__description {
        font-size: 1.2rem;
        line-height: 1.6;
        color: #333;
        background: #f9f9f9;
        padding: 20px;
        border-radius: 8px;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        position: relative;
        z-index: 2;
        transform-style: preserve-3d;
        transform: perspective(1000px) rotateY(7deg);
    }
    .compliance {
        display: flex;
        flex-direction: column;
        padding: 30px 0;
        background-color: #f8f9fa;
    }
    .compliance__images{
        display: flex;
        flex-wrap: wrap;
    }
    .compliance__certifications {
        list-style: none;
        padding: 0;
        margin: 0;
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    .compliance__certifications li {
        font-size: 18px;

        margin-bottom: 10px;
        position: relative;
        padding: 5px 10px;
        color: #fff;
        background: linear-gradient(135deg, #45b69c, #0f6830);
        border-radius: 10px;
        width: 80%;
        text-decoration: none;
        
    }
  }