* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    scroll-behavior: smooth;
    font-family: 'poppins', sans-serif;
}

body {
    color: rgb(0, 0, 0);
    background: #caf8e2;
}

header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    padding: 20px 50px 20px 30px;
    background: #0a6900;
    border-radius: 5px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    z-index: 100;
}

.logo {
    position: relative;
    font-size: 25px;
    color: rgb(255, 255, 255);
    text-decoration: none;
    font-weight: 600;
    cursor: default;
    opacity: 0;
    animation: slideRight 1s ease forwards;
}

.navbar a {
    display: inline-block;
    font-size: 20px;
    color: rgb(255, 255, 255);
    text-decoration: none;
    font-weight: 500;
    margin-left: 25px;
    transition: .5s;
    opacity: 0;
    animation: slideTop 0.75s ease forwards;
    animation-delay: calc(.1s * var(--i));
}

.navbar a:hover {
    color: rgb(15, 217, 227);
}

.home {
    position: relative;
    width: 100%;
    justify-content: space-between;
    height: 100vh;
    background: url("images/agriculture-3732476.jpg")no-repeat;
    background-size: cover;
    background-position: center;
    backdrop-filter: blur(2px);
    display: flex;
    align-items: center;
    padding: 70px 10% 0;
    color: #ffffff;
    
}

.home::before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.5);
    backdrop-filter: blur(3px);
    z-index: -1;
}

.home-content {
    max-width: 600px;
}

.home-content h3 {
    font-size: 25px;
    font-weight: 700;
    margin-bottom: 15px;
    margin-left: 50px;
    opacity: 0;
    color: #e0e1e0;
    animation: slideRight 1s ease forwards;
    animation: clignote 5s infinite ease-in-out;
}

.slogan::before {
    content: "";
    visibility: hidden;
    display: block;
}

.home-content h1 {
    font-size: 40px;
    font-weight: 700;
    margin: -3px 0;
    opacity: 0;
    animation: slideBottom 1s ease forwards;
}

.home-content h1:nth-last-of-type(2) {
    margin-bottom: 10px;
    animation: slideTop 1s ease forwards;
    animation-delay: .25s;
}

.home-content h1 span {
    color: rgb(0, 180, 117);
    text-shadow: 0 0 5px rgba(0, 180, 117, 0.452),
        0 0 25px rgba(0, 180, 117, 0.505);
}

.home-content p {
    font-size: 1.1em;
    font-weight: 450;
    opacity: 0;
    animation: slideLeft 1s ease forwards;
    line-height: 1.5;
}

.home-social a {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    background: rgba(255, 255, 255, 0.829);
    border: 2px solid rgb(249, 249, 249);
    border-radius: 50%;
    padding: 5px;
    font-size: 20px;
    text-decoration: none;
    margin: 30px 25px 30px 0;
    transition: 0.5s ease;
    opacity: 0;
    animation: slideLeft 1s ease forwards;
    animation-delay: calc(.1s * var(--i));
}

.home-social a:hover {
    background: rgba(255, 255, 255, 0.644);
    box-shadow: 0 0 20px rgba(255, 255, 255, 0.653);
}

.btn-box {
    display: inline-block;
    padding: 12px 28px;
    background: rgba(251, 251, 251, 0.847);
    border-radius: 40px;
    font-size: 16px;
    color: rgb(0, 54, 75);
    letter-spacing: 0.5px;
    text-decoration: none;
    font-weight: 600;
    transition: 0.5s;
    opacity: 0;
    animation: slideTop 1s ease forwards;
    animation-delay: 0.75s;
    box-shadow: 0 0 5px rgba(251, 251, 251, 0.635),
        0 0 25px rgba(251, 251, 251, 0.537);
}

.btn-box:hover {
    box-shadow: 0 0 5px rgba(255, 255, 255, 0.25), 0 0 25px rgba(255, 255, 255, 0.25),
        0 0 50px rgba(255, 255, 255, 0.35), 0 0 100px rgba(255, 255, 255, 0.35), 0 0 200px rgba(255, 255, 255, 0.35);
}

.about {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    align-items: center;
    gap: 1.5rem;
    padding:3rem 0;
}

.about::before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(209, 211, 209, 0.5);
    backdrop-filter: blur(3px);
    z-index: -1;
}

.about-image img {
    padding-bottom: 20%;
    max-width: 630px;
    height: auto;
    width: 100%;
    border-radius: 8px;
}

.about-text h2 {
    font-size: 60px;
    animation: clignote 2s infinite ease-in-out;
}

.about-text h2 span {
    color: rgb(6, 154, 87);
    text-shadow: 0 0 5px rgba(6, 154, 87, 0.452),
        0 0 25px rgba(6, 154, 87, 0.292);
}

.about-text h4 {
    font-size: 25px;
    font-weight: 600;
    color: #04506e;
    line-height: 1.1;
    margin: 10px 0 10px;    ;
}

.about-text p {
    font-size: 1.1em;
    font-weight: 450;
    line-height: 1.4;
    margin-bottom: 1.5rem;
    margin-right: 4rem;
}

.about-text .value {
    display: block;
    justify-content: center;
    align-items: center;
    font-size: 1.1em;
    font-weight: 650;
    line-height: 1.4;
    margin-bottom: 2rem;
    margin-left: 2rem;
    margin-right: 4rem;
    list-style: disc;
    list-style: none;
}

.about-text .btn-box {
    background: rgba(6, 154, 87);
    color: white;
    box-shadow: 0 0 5px rgba(6, 154, 87, 0.635),
        0 0 25px rgba(4, 220, 123, 0.537);
}

.about-text .btn-box:hover {
    box-shadow: 0 0 5px rgba(6, 154, 87, 0.25), 0 0 25px rgba(6, 154, 87, 0.25),
        0 0 50px rgba(6, 154, 87, 0.35), 0 0 100px rgba(6, 154, 87, 0.35), 0 0 200px rgba(6, 154, 87, 0.35);
}

#services {
    font-size: 20px;
    line-height: 1.4;
    margin-bottom: 4rem;
}

.sub-title {
    text-align: center;
    font-size: 60px;
    padding-bottom: 70px;
    animation: clignote 2s infinite ease-in-out;
}

.sub-title span {
    color: rgb(2, 87, 73);
    text-shadow: 0 0 5px rgba(2, 79, 87, 0.452),
        0 0 25px rgba(2, 79, 87, 0.505);
}

.container {
    padding: 90px;
}

.services-list {
    display: grid;
    grid-template-columns: repeat(auto-fit,minmax(259px,1fr));
    grid-gap: 40px;
    margin-top: 20px;
}

.services-list div {
    background-color: transparent;
    padding: 40px;
    font-size: 13px;
    font-weight: 13px;
    border-right: 10px;
    border-radius: 20px;
    transition: background 0.5s, transform 0.5s;
    box-shadow: 1px 1px 20px rgb(2, 79, 87, 0.85), 1px 1px 20px rgb(2, 79, 87, 0.5);
}

.services-list div h2 {
    font-size: 30px;
    font-weight: 600;
    margin-bottom: 15px;
    color: #04506e;
}

.services-list div a {
    text-decoration: none;
    color: #ffffff;
    font-size: 12px;
    margin-top: 20px;
    display: inline-block;
}

.read {
    display: inline-block;
    padding: 12px 28px;
    background: rgb(2, 79, 87);
    border-radius: 40px;
    font-size: 16px;
    color: #ffffff;
    letter-spacing: 1px;
    text-decoration: none;
    font-weight: 600;
    opacity: 0;
    animation: slideTop 1s ease forwards;
    animation-delay: 2s;
    box-shadow: 0 0 5px rgb(2, 79, 87, 0.75), 0 0 25px rgb(2, 79, 87, 0.5);
}

.read:hover {
    box-shadow: 0 0 5px rgb(2, 79, 87, 0.75), 0 0 25px rgb(2, 79, 87, 0.5), 0 0 50px rgb(2, 79, 87, 0.5),0 0 100px rgb(2, 79, 87, 0.5), 0 0 200px rgb(2, 79, 87, 0.5);
    
}

.services-list div:hover {
    transform: translateY(-10px);
}

.sub-title1 {
    text-align: center;
    font-size: 60px;
    padding-bottom: 50px;
    animation: clignote 2s infinite ease-in-out;
}

.sub-title1 span {
    color: rgb(2, 87, 73);
    text-shadow: 0 0 5px rgba(2, 79, 87, 0.452),
        0 0 25px rgba(2, 79, 87, 0.50);
}

#team {
    font-size: 20px;
    line-height: 1.4;
    margin-bottom: 4rem;
}

.sub-title {
    text-align: center;
    font-size: 60px;
    padding-bottom: 70px;
    animation: clignote 2s infinite ease-in-out;
}

.sub-title span {
    color: rgb(2, 87, 73);
    text-shadow: 0 0 5px rgba(2, 79, 87, 0.452),
        0 0 25px rgba(2, 79, 87, 0.505);
}

.container {
    padding: 90px;
}

.team-list {
    display: grid;
    grid-template-columns: repeat(auto-fit,minmax(259px,1fr));
    grid-gap: 40px;
    margin-top: 20px;
}

.team-list div {
    background-color: transparent;
    padding: 40px;
    font-size: 13px;
    font-weight: 13px;
    border-right: 10px;
    border-radius: 50px;
    transition: background 0.5s, transform 0.5s;
    box-shadow: 1px 1px 20px rgb(2, 79, 87, 0.85), 1px 1px 20px rgb(2, 79, 87, 0.5);
}

.team-list div h2 {
    font-size: 30px;
    font-weight: 600;
    margin-bottom: 5px;
    color: #04506e;
}

.team-list div h4 {
    font-weight: 550;
    margin-bottom: 15px;
}

.team-list div p {
    font-size: 1.2em;
}
.team-list div a {
    text-decoration: none;
    color: #ffffff;
    font-size: 12px;
    margin-top: 20px;
    display: inline-block;
}

.read {
    display: inline-block;
    padding: 12px 28px;
    background: rgb(2, 79, 87);
    border-radius: 40px;
    font-size: 16px;
    color: #ffffff;
    letter-spacing: 1px;
    text-decoration: none;
    font-weight: 600;
    opacity: 0;
    animation: slideTop 1s ease forwards;
    animation-delay: 2s;
    box-shadow: 0 0 5px rgb(2, 79, 87, 0.75), 0 0 25px rgb(2, 79, 87, 0.5);
}

.read:hover {
    box-shadow: 0 0 5px rgb(2, 79, 87, 0.75), 0 0 25px rgb(2, 79, 87, 0.5), 0 0 50px rgb(2, 79, 87, 0.5),0 0 100px rgb(2, 79, 87, 0.5), 0 0 200px rgb(2, 79, 87, 0.5);
    
}

.team-list div:hover {
    transform: translateY(-10px);
}



.main-text {
    padding: 0px 100px 75px;
}

.main-text h2 {
    font-size: 40px;
    line-height: 2;
    text-align: center;
    padding-top: 50px;
    padding-bottom: 20px;
}

.main-text h2 span {
    color: rgb(2, 87, 73);
}

.project-content {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(359px, auto));
}

.row {
    position: relative;
    overflow: hidden;
    border-radius: 8px;
    cursor: pointer;    
}

.row img {
    width: 100%;
    border-radius: 20px;
    display: block;
    transition: transform 0.5s;
    padding: 10px;
}

.layer {
    width: 100%;
    height: 0;
    background: linear-gradient(rgba(204, 252, 244, 0.7));
    position: absolute;
    border-radius: 8px;
    left: 0;
    bottom: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 0 40px;
    transition: height 0.5s;
}

.layer h5 {
    color: rgb(0, 50, 72);
    font-size: 20px;
    font-weight: 600;
    margin-bottom: 15px;
}

.layer p {
    color: black;
    font-size: 1rem;
    line-height: 1.8;
    font-weight: 500;
}

.layer svg {
    margin-top: 20px;
    font-size: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50px;
}

.row:hover img {
    transform: scale(1.1);
}

.row:hover .layer {
    height: 100%;
}

.contact {
    display: grid;
    grid-template-columns: repeat(2,1fr);
    align-items: center;
    gap: 3rem;
    padding-left: 40px;
    margin-top: 130px;
    margin-bottom: 30px;
}

.contact-text h2 {
    font-size: 60px;
    line-height: 1;
    text-align: center;
    animation: clignote 2s infinite ease-in-out;
}

.contact-text h2 span {
    color: rgb(6, 154, 87);
    text-shadow: 0 0 5px rgba(6, 154, 87, 0.452),
        0 0 25px rgba(6, 154, 87, 0.292);
}

.contact-text h4 {
    margin: 50px 0 35px;
    color: rgb(6, 154, 87);
    font-size: 25px;
    font-weight: 600;
}

.contact-text p {
    color: black;
    font-size: 20px;
    line-height: 30px;
    margin-bottom: 2rem;
}

.contact-list {
    margin-bottom: 2rem;
}

.contact-list li {
    margin-bottom: 10px;
    display: block;
    font-weight: 600;
}

.contact-list svg {
    display: inline-block;
    transition: all .40s ease;
    padding-top: 5px;
    margin-bottom: -4px;
    margin-right: 5px;
}

.contact-icons a {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    background: transparent;
    border-radius: 50%;
    color: #ffffff;
    text-decoration: none;
    margin: 20px 15px 30px 0;
    transition: .5s ease;
    opacity: 0;
    animation: slideLeft 1s ease forwards;
    animation-delay: calc(.2s * var(--i));
    padding: 8px;
}

.contact-icons a:hover {
    background: rgba(255, 255, 255, 0.973);
    box-shadow: 0 0 5px rgba(255, 255, 255, 0.527),
        0 0 25px rgb(255, 255, 255),
        0 0 50px rgba(255, 255, 255),
        0 0 100px rgba(255, 255, 255),
        0 0 200px rgba(255, 255, 255, 0.502);
}

.contact-form form {
    position: relative;
    margin-top: 80px;
}

.contact-form form input, form textarea {
    border: none;
    outline: none;
    width: 90%;
    padding: 18px;
    background: #ffffffb1;
    color: rgb(0, 0, 0);
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
    border-radius: 0.5rem;
    padding-left: 20px;
}

.contact-form form input::placeholder, textarea::placeholder {
    color: #002d5c;
    font-size: 0.85em;
    font-weight: 600;
}

.contact-form textarea {
    resize: none;
    height: 175px;
    font-weight: 500;
}

.contact-form form .send {
    display: inline-block;
    padding: 12px 28px;
    background: rgb(2, 79, 87);
    border-radius: 40px;
    font-size: 18px;
    color: #ffffff;
    letter-spacing: 1px;
    text-decoration: none;
    font-weight: 600;
    opacity: 0;
    animation: slideTop 1s ease forwards;
    box-shadow: 0 0 5px rgb(2, 79, 87, 0.75), 0 0 25px rgb(2, 79, 87, 0.5);
    margin-top: 10px;
    cursor: pointer;
}

.contact-form form .send:hover {
    box-shadow: 0 0 5px rgb(2, 79, 87, 0.75), 0 0 25px rgb(2, 79, 87, 0.5), 0 0 50px rgb(2, 79, 87, 0.5);
}

.signature {
    width: 100%;
    text-align: center;
    padding: 25px, 0;
    background: #005cb989;
    color: #ffffff;
    font-weight: 300;
    margin-top: 70px;
    font-size: 0.75em;
}
.signature span {
    color: rgb(0, 93, 93);
    font-weight: 600;
}
.top {
    position: fixed;
    bottom: 0.5rem;
    right: 0;
}


@keyframes slideRight {
    0% {
        transform: translateX(-100px);
        opacity: 0;
    }

    100% {
        transform: translateX(0px);
        opacity: 1;
    }
}

@keyframes slideLeft {
    0% {
        transform: translateX(200px);
        opacity: 0;
    }

    100% {
        transform: translateX(0px);
        opacity: 1;
    }
}

@keyframes slideTop {
    0% {
        transform: translateY(100px);
        opacity: 0;
    }

    100% {
        transform: translateY(0px);
        opacity: 1;
    }
}

@keyframes slideBottom {
    0% {
        transform: translateY(-100px);
        opacity: 0;
    }

    100% {
        transform: translateY(0px);
        opacity: 1;
    }
}

@keyframes clignote {
      0%   { opacity: 1; }
      50%  { opacity: 0; }
      100% { opacity: 1; }
    }


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

/* ----------------------------- */
/* Responsive adjustments (added)
     Improves layout across all device widths without changing HTML/JS */
/* ----------------------------- */

/* make container padding fluid */
.container {
    padding: clamp(20px, 5vw, 90px);
}

/* allow navbar items to wrap on smaller widths */
.navbar {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
}

/* General responsive tweaks for medium screens (tablets/desktops) */
@media (max-width: 1024px) {
    header {
        padding: 14px 22px;
    }

    .logo { font-size: 22px; }
    .navbar a { font-size: 18px; margin-left: 14px; }

    .home { padding: 70px 6% 0; }
    .home-content h1 { font-size: clamp(30px, 4.5vw, 40px); }
    .home-content h3 { font-size: clamp(18px, 2.5vw, 25px); }

    .about { grid-template-columns: 1fr; padding: 2rem 1rem; }
    .about-image img { padding-bottom: 0; max-width: 100%; }
    .about-text p, .about-text .value { margin-left: 0; margin-right: 0; }

    .services-list, .team-list, .project-content { grid-template-columns: 1fr; }
    .main-text { padding: 0 20px 40px; }
    .contact { grid-template-columns: 1fr; padding-left: 0; margin-top: 60px; }
    .contact-form form input, .contact-form form textarea { width: 100%; }
}

/* Small screens (phones) */
@media (max-width: 768px) {
    header { padding: 12px 16px; border-radius: 4px; }
    .logo { font-size: 20px; }
    .navbar a { font-size: 16px; margin-left: 10px; }

    .home { height: auto; min-height: 60vh; padding: 100px 6% 30px; }
    .home-content { max-width: 100%; }
    .home-content h1 { font-size: clamp(24px, 6vw, 36px); }
    .home-content p { font-size: 1rem; }

    .about-text h2 { font-size: clamp(32px, 8vw, 56px); }
    .sub-title, .sub-title1 { font-size: clamp(28px, 6vw, 48px); padding-bottom: 20px; }

    /* reduce some heavy shadows/transforms for performance */
    .home-social a, .btn-box, .read, .contact-icons a { box-shadow: none; }
    .row img { padding: 6px; }
}

/* Extra small screens (narrow phones) */
@media (max-width: 480px) {
    header { padding: 10px 12px; border-radius: 0; }
    .logo { font-size: 18px; }
    .navbar a { margin-left: 8px; font-size: 15px; }

    .home { padding: 110px 5% 30px; min-height: 55vh; }
    .home::before, .about::before { display: none; }

    .about-text h4 { font-size: 18px; }
    .about-text p, .about-text .value { font-size: 1rem; margin-right: 0; }

    .contact-text h2 { font-size: clamp(22px, 7vw, 40px); }
    .contact { gap: 1.5rem; padding-left: 0; }

    .contact-form form { margin-top: 40px; }
    .contact-form textarea { height: 140px; }

    .home-content h3, .home-content h1 { margin-left: 0; }
    .btn-box { padding: 10px 18px; font-size: 14px; }
}

/* small accessibility and layout safety helpers */
:root {
    -webkit-text-size-adjust: 100%;
}