* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    font-family: "Poppins", sans-serif;
}

html {
    scroll-behavior: smooth;
}

body {
    display: flex;
    flex-direction: column;
    align-items: center;
    background: linear-gradient(199deg, #E8E8E8 -0.59%, #EAF3FA 100%);
}


.navbar {
    width: 64%;
    padding: 1rem 2rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-radius: 3.125rem;
    background: rgba(255, 255, 255, 0.95);
    box-shadow: 0 1px 18.3px 0 rgba(0, 0, 0, 0.25);
    position: sticky;
    top: 1rem;
    z-index: 10;

}

.logo {
    display: flex;
    align-items: center;
    gap: .5rem;
}

.logo img {
    width: 9rem;
}

.logotext {
    color: #000;
    font-family: Poppins;
    font-size: 1.5rem;
    font-style: normal;
    font-weight: 600;
    line-height: 1.25rem;
    /* 71.429% */

}

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

.navlinks {
    display: flex;
    align-items: center;
    gap: 1.875rem;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}

.navlinks a {
    text-decoration: none;
    color: #1D1919;
    font-size: 1rem;
    font-weight: 400;
}

#active-nav-link {
    font-weight: 600;
}

.primary-button {
    display: flex;
    font-size: 1rem;
    padding: .8rem 1.5rem;
    justify-content: center;
    border: none;
    color: #fff;
    border-radius: 1.875rem;
    background: #096;
    cursor: pointer;
    text-align: center;

}

.primary-button:hover {
    background: rgb(0, 92, 61);
}

.primary-button a {
    text-decoration: none;
    color: #fff;
}

.nav-menu {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 1.875rem;

    flex-grow: 1;
}

.nav-cta {
    /* same as primary-button, but scoped to navbar if you want later */
}

/* hamburger (hidden on desktop) */
.hamburger {
    display: none;
    width: 2rem;
    height: 2rem;
    border: none;
    background: transparent;
    cursor: pointer;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
    padding: 0;
}

.hamburger span {
    display: block;
    width: 1.5rem;
    height: 2px;
    border-radius: 999px;
    background: #1D1919;
    transition: transform 0.25s ease, opacity 0.25s ease;
}

/* X animation */
.navbar.open .hamburger span:nth-child(1) {
    transform: translateY(6px) rotate(45deg);
}

.navbar.open .hamburger span:nth-child(2) {
    opacity: 0;
}

.navbar.open .hamburger span:nth-child(3) {
    transform: translateY(-6px) rotate(-45deg);
}

.hero {
    width: 96%;
    height: 90vh;
    border-radius: 1.25rem;
    background: #FBF9F5;
    box-shadow: 0 12px 16px 0 rgba(0, 0, 0, 0.06);
    margin-top: -1.8rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 1rem;
    position: relative;
    overflow: hidden;
    padding-bottom: 6rem;

    z-index: 1;
    /* hero content stays above waves */
}

.search-tag {
    padding: .8rem 1.5rem;
    border-radius: 1.875rem;
    border: 1px solid #C19552;
    background: rgba(193, 149, 82, 0.05);
}

.search-tag p {
    color: #C19552;
    text-align: center;
}

.hero-text {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.hero-text h1 {
    font-size: 4.25rem;
    font-style: normal;
    font-weight: 700;
    line-height: 5.3125rem;
    /* 125% */
    text-align: center;
}

.hero-text h1 span {
    color: #096;

}

.sub-text p {
    color: #2D2323;
    text-align: center;
    font-size: 1.25rem;
    font-weight: 400;
    line-height: 1.5rem;
    /* 120% */
}


/* waves wrapper */
.waves {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 60%;
    pointer-events: none;

    z-index: -1;
    /* ⬅ pushes waves behind all content */
}

/* base wave style */
.wave {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 900%;
    height: 100%;
    background-repeat: repeat-x;
    background-position: 0 100%;
    background-size: auto 100%;
    /* keeps the PNG shape but allows tiling */
}

.wave-light {
    background-image: url("../assets/images/water_wave_light.png");
    animation: waveScrollLeft 70s linear infinite;
    z-index: 1;
    opacity: 0.65;

}

.wave-dark {
    background-image: url("../assets/images/water_wave_dark.png");
    animation: waveScrollRight 34s linear infinite;
    z-index: 2;
    opacity: 0.60;
    height: 65%;

}

/* keyframes */
@keyframes waveScrollLeft {
    0% {
        background-position: 0% 100%;
    }

    100% {
        background-position: -100% 100%;
    }
}

@keyframes waveScrollRight {
    0% {
        background-position: 0% 100%;
    }

    100% {
        background-position: 100% 100%;
    }
}

.seaweed {
    position: absolute;
    bottom: -40px;

    background-size: contain;
    background-repeat: no-repeat;
    z-index: 3;
    transform-origin: bottom center;
    animation: seaweedSway 4s ease-in-out infinite alternate;
    opacity: 0.8;
}

.seaweed-1 {
    background-image: url("../assets/images/seaweed-left.png");
    left: 3%;
    width: 8rem;
    height: 12rem;
    animation-delay: 0s;
    animation-duration: 5s;
}



.seaweed-2 {
    background-image: url("../assets/images/seaweed-right.png");
    right: 0%;
    width: 8rem;
    height: 12rem;
    animation-delay: 1s;
    animation-duration: 6s;
}

.seaweed-3 {
    background-image: url("../assets/images/seaweed-mid.png");
    right: 20%;
    bottom: -2%;
    width: 18rem;
    height: 8rem;
    animation-delay: 1s;
    animation-duration: 4.5s;

}

.seaweed-4 {
    background-image: url("../assets/images/seaweed-mid.png");
    left: 25%;
    bottom: -5%;
    width: 10rem;
    height: 10rem;
    animation-delay: 1s;
    animation-duration: 5.5s;

}

@keyframes seaweedSway {
    0% {
        transform: rotate(-4deg);
    }

    100% {
        transform: rotate(4deg);
    }
}



.intro-img {
    width: 70%;
    height: 40rem;
    background-image: url("../assets/images/introimg.jpg");
    background-size: cover;
    /* makes image fill the box */
    background-position: center;
    /* keeps subject centered */
    background-repeat: no-repeat;
    /* prevents tiling */

    border-radius: 1.25rem;
    margin-top: -10rem;

    border-radius: 1.25rem;
    margin-top: -10rem;
    z-index: 5;
}


.section {
    width: 80%;
    display: flex;
    flex-direction: column;
    align-items: center;
    /* border: 1px solid red; */


}

.sec {
    padding: 4rem 2rem;
    gap: 1rem;
}

.about {}

.header {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.6875rem;

}

.header-text {
    color: #2D2323;
    text-align: center;
    font-size: 2.375rem;

    font-weight: 600;
    line-height: 2.25rem;
}

.underline {
    width: 12.4375rem;
    height: 0.25rem;
    border-radius: 6.25rem;
    background: #096;
}

.prline {
    width: 25rem;
}

.description {
    color: #000;
    text-align: center;
    font-family: Poppins;
    font-size: 1.25rem;
    font-style: normal;
    font-weight: 400;
    line-height: 2.125rem;
    margin-bottom: 3rem;
    /* 170% */
}

.mission {
    display: flex;
    flex-direction: row;
    align-items: start;
    gap: 1rem;
    align-items: stretch;

}

.vision-card {
    border-radius: 1.3125rem;
    border: 1px solid #D9D9D9;
    background: rgb(255, 255, 255);
    padding: 2rem 4rem;
    flex: 1;
}

.title {
    display: flex;
    align-items: center;
    gap: 1.0625rem;
    margin-bottom: 1rem;

}

.title img {
    /* width: 20%; */
}

.title h2 {
    color: #000;
    font-family: Poppins;
    font-size: 1.5rem;
    font-style: normal;
    font-weight: 500;
    line-height: 1.25rem;
    /* 83.333% */
}

.vision-p {
    color: #1A1A1A;
    font-size: 1.125rem;
    font-style: normal;
    font-weight: 300;
    line-height: 2rem;
    /* 177.778% */
}

.vision-pdiv ul li {
    color: #1A1A1A;
    font-size: 1.125rem;
    font-style: normal;
    font-weight: 300;
    line-height: 2rem;
    /* 177.778% */
    margin: .5rem;
}


.core-value {
    padding: 4rem 2rem;
    gap: 1.5rem;
}

.core-value-desc {
    width: 85%;
}

.core {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 2rem;
    align-self: stretch;
}

.core-card {
    display: flex;
    flex-direction: column;
    width: 16.375rem;
    height: 9rem;
    padding: 0.9375rem 1.6875rem;
    justify-content: center;
    align-items: center;
    border-radius: 1.25rem;
    text-decoration: none;
    cursor: pointer;
    transition: transform 0.2s;
}

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

.core-card p {
    font-size: 1.1rem;
}

.core-card img {
    /* border: 1px solid red; */
    /* margin-bottom: .5rem; */
    padding: .5rem;
}

.innovation {

    background: rgba(255, 255, 255, 0.1);
    box-shadow: 0 1px 10px 0 rgba(0, 0, 0, 0.15);
}

.innovation p {
    color: #897329;
    text-align: center;
    font-weight: 600;
}

.Sustainability {
    padding: 1.6875rem 1.65625rem 1.0625rem 1.65625rem;
    justify-content: center;
    align-items: center;
    background: rgba(76, 208, 85, 0.10);
    box-shadow: 0 1px 10px 0 rgba(0, 0, 0, 0.15);
}

.Sustainability p {
    color: #29742F;
    text-align: center;
    font-family: Poppins;
    font-style: normal;
    font-weight: 600;


}

.Equity {
    padding: 1.4375rem 1.6875rem 1.3125rem 1.6875rem;
    justify-content: center;
    align-items: center;

    border-radius: 1rem;
    background: rgba(87, 158, 216, 0.10);
    box-shadow: 0 1px 10px 0 rgba(0, 0, 0, 0.15);
}

.Equity p {
    color: #34648C;
    text-align: center;
    font-family: Poppins;
    font-style: normal;
    font-weight: 600;

}

.Scientific {
    padding: 1.5rem 1.5rem 1.75rem 1.6875rem;
    justify-content: center;
    align-items: center;
    border-radius: 1.25rem;
    background: rgba(170, 91, 255, 0.10);
    box-shadow: 0 1px 10px 0 rgba(0, 0, 0, 0.15);
}

.Scientific p {
    color: #492372;
    text-align: center;
    font-family: Poppins;
    font-style: normal;
    font-weight: 600;

}

.Impact-card {
    padding: 1.5625rem 1.625rem 1.5625rem 1.6875rem;
    justify-content: center;
    align-items: center;

    border-radius: 1.25rem;
    background: rgba(224, 90, 56, 0.10);
    box-shadow: 0 1px 10px 0 rgba(0, 0, 0, 0.15);
}

.Impact-card p {
    color: #913C27;
    text-align: center;
    font-weight: 600;

}



.technology {}




.tech-section {}

/* top tabs card */
.tech-tabs {
    display: flex;

    padding: 1.125rem;
    justify-content: space-around;
    align-items: center;


    gap: 1rem;
    border-radius: 1.25rem;
    background: #fff;
    box-shadow: 0 1px 10px 0 rgba(0, 0, 0, 0.15);
    cursor: pointer;
}

.tab-btn {
    display: flex;
    flex-direction: column;
    width: 26rem;
    padding: 1.1875rem 4.0625rem 1.125rem 4.0625rem;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
    border-radius: 1.25rem;
    background: rgba(255, 255, 255, 0.1);
}

.tab-btn p {
    font-size: 1.1rem;

}

.tab-btn.active {
    background: #0099661A;
    color: #000000;

}


/* bottom card */
.tech-content {
    margin-top: 1rem;
    border-radius: 1.5rem;
    background: #fff;
    box-shadow: 0 0 0 1px #ececec;
    /* padding: .5rem; */
}

.tab-panel {
    display: none;
    align-items: stretch;
    padding: 3.5rem 3.25rem;
    justify-content: center;
    align-items: flex-start;
    gap: 2.625rem;
}


.tab-panel.active {
    display: flex;

}

.panel-left {
    display: flex;
    flex-direction: column;
    gap: .85rem;
}

.panel-lable {
    display: flex;
    align-items: center;
    gap: 1rem;

}

.panel-lable img {
    padding: 1rem;
    border-radius: 0.625rem;
    background: #0099661A;

}

.lable-texts {}

.panel-lable h3 {
    color: #000;
    font-family: Poppins;
    font-size: 1.5rem;
    font-style: normal;
    font-weight: 500;

}

.panel-lable p {
    color: #000;
    font-family: Poppins;
    font-size: 01rem;
    font-style: normal;
    font-weight: 300;
}

.panel-desc {
    color: #000;
    font-family: Poppins;
    font-size: 1rem;
    font-style: normal;
    font-weight: 400;
    line-height: 1.5rem;
    /* 150% */
}

.tag-row {
    margin-top: 1rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.tag {
    display: flex;
    padding: 0.0625rem 1.5625rem;
    justify-content: center;
    align-items: center;
    gap: 0.625rem;
    border-radius: 0.625rem;
    border: 1px solid #096;

    color: #096;
    text-align: center;
    font-family: Poppins;
    font-size: 0.9375rem;
    font-style: normal;
    font-weight: 400;
    line-height: 2rem;
    /* 213.333% */
}

.panel-card {
    display: flex;
    padding: 1.125rem 1.25rem;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.75rem;
    align-self: stretch;
    min-height: 7.5rem;
    border-radius: 0.625rem;
    background: rgba(0, 153, 102, 0.10);
}

.panel-card-lable {
    display: flex;
    gap: 1rem;
}

.panel-card-lable p {
    color: #000;
    font-family: Poppins;
    font-size: 1rem;
    font-style: normal;
    font-weight: 500;
    line-height: 1.5rem;
    /* 150% */
}

.panel-text {
    color: #5D5D5D;
    font-family: Poppins;
    font-size: 0.875rem;
    font-style: normal;
    font-weight: 400;
    line-height: 1.25rem;
    /* 142.857% */
}

.panel-btn {
    width: 10rem;

}

/* right grey box */

.panel-right {
    height: 100%;
}

.panel-media {}

.impact {}

.impact-box {
    display: flex;
    /* align-items: center; */
    justify-content: space-between;
    margin-top: 2rem;
    /* border: 1px solid red; */
    gap: 4rem;
}

.impact-img {
    width: 40%;
}

.impact-right {}

.impact-box-title {
    margin-bottom: 1.5rem;
}

.impact-box-title h2 {
    color: #2D2323;

    font-family: Poppins;
    font-size: 2rem;
    font-style: normal;
    font-weight: 600;
    line-height: 2.25rem;
    /* 112.5% */
}

.impact-card {
    min-height: 0;
    width: 90%;
    background: rgba(0, 153, 102, 0.034)
}

.impact-text {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.prods {
    /* gap: 2rem; */
}

.products {
    margin-top: 2rem;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 2.5rem;

}

.product-card {
    width: 18.75rem;
    height: 14.875rem;
    padding: 1.8rem;
    border-radius: 1.25rem;
    background: #FFF;
    box-shadow: 0 1px 10px 0 rgba(0, 0, 0, 0.10);
}

.product-card h2 {
    color: #000;
    font-family: Poppins;
    font-size: 1.1rem;
    font-style: normal;
    font-weight: 500;
    line-height: 2;

}

.product-card p {
    color: #000;
    font-family: Poppins;
    font-size: 0.875rem;
    font-style: normal;
    font-weight: 300;
    line-height: 1.25rem;
    /* 142.857% */
}

.line-partner {
    width: 18rem;
}

.joinb {
    width: 70%;
    margin: 6rem 0;
    flex-direction: row;
    justify-content: space-around;
    padding: 5rem;
    gap: 3rem;
    border-radius: 1.25rem;
    background: #FFF;
    box-shadow: 0 1px 10px 0 rgba(0, 0, 0, 0.10);
}

.query {
    width: 40%;
}

.part-right-form {}

.part-right-text h3 {
    color: #000;
    font-family: Poppins;
    font-size: 2rem;
    font-style: normal;
    font-weight: 600;
    line-height: 2.4375rem;
    /* 121.875% */
}

.part-right-text p {
    color: #737373;

    font-family: Poppins;
    font-size: 1rem;
    font-style: normal;
    font-weight: 400;
    line-height: 1.5rem;
    /* 150% */
}

.part-right-form input {
    width: 90%;
    margin: 1rem 0;
    display: flex;
    /* flex-direction: column; */
    padding: 0.9375rem 0.875rem;
    align-items: center;

    border-radius: 0.625rem;
    border: 1px solid #B3B3B3;
    background: #FFF;
}

.part-btn {
    width: 8rem;
}


.join {
    gap: 0;
    flex-direction: row;

}

.join-sec {
    width: 90%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;

}

.join-link {
    /* text-decoration: none; */
    color: #096;
}

.join-sec h1 {

    font-family: Poppins;
    font-size: 2rem;
    font-style: normal;
    font-weight: 600;
    line-height: 2.4375rem;
    /* 121.875% */
    text-align: center;

}

.join-sec p {
    color: #737373;
    text-align: center;
    font-family: Poppins;
    font-size: 1.25rem;
    font-style: normal;
    font-weight: 400;
    line-height: 2rem;
    /* 150% */
}


.secondary-button {
    display: flex;
    font-size: 1rem;
    padding: .8rem 1.5rem;
    justify-content: center;
    border: none;
    color: #096;
    border-radius: 1.875rem;
    background: #fff;
    border: 1px solid #096;
    cursor: pointer;
}

.ver-line {
    width: 4px;
    height: 20rem;
    background-color: rgba(187, 187, 187, 0.377);
    border-radius: 1rem;
}

.footer {
    width: 100%;
    background: #FFF;
    display: flex;
    padding: 3.9375rem 3rem 2.25rem 2.9375rem;
    flex-direction: column;
    align-items: center;
    gap: 2rem;
}

.footer-upper {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 90%;
    gap: 10rem;

}

.com-info {
    width: 40%;
    display: flex;
    flex-direction: column;
    gap: .5rem;
}

.com-info p {
    color: #000;
    font-family: Poppins;
    font-size: 1rem;
    font-style: normal;
    font-weight: 300;
    line-height: 1.25rem;
    /* 125% */
}

.contacts {}

.contact-info {
    align-items: center;
    display: flex;
    gap: .6rem;
    margin: .5rem 0;
}

.contact-info img {}

.footer-links {
    display: flex;
    gap: 8rem;
}

.footer-list {
    display: flex;
    flex-direction: column;
    gap: .75rem;

}

.footer-list p {
    color: #000;
    font-family: Poppins;
    font-size: 0.875rem;
    font-style: normal;
    font-weight: 600;
    line-height: 1.25rem;
    /* 142.857% */
}

.footer-list a {
    color: #000;
    font-family: Poppins;
    font-size: 0.875rem;
    font-style: normal;
    font-weight: 400;
    line-height: 1.25rem;
    /* 142.857% */
    text-decoration: none;
}

.footer-line {
    width: 90%;
    height: .125rem;
    background: #E9EBF1;
}

.footer-lower {
    width: 90%;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.footer-lower p {
    color: #454545;
    text-align: center;
    font-size: 0.875rem;
    font-style: normal;
    font-weight: 400;
    line-height: 1.5rem;
    /* 171.429% */
}

.socials {
    display: flex;
    align-items: center;
    gap: 1.625rem;
}



/* responsive */
@media (max-width: 900px) {
    .tab-panel.active {
        grid-template-columns: 1fr;
    }

    .media-placeholder {
        margin-top: 1.5rem;
    }
}