*{
    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;
}
.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;
}
.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;

}
.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: space-between;
    gap: 1.875rem;

    width: 72%;
}

.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: -1rem;
    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;
}

.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.90;
    
}

.wave-dark{
    background-image: url("../assets/images/water_wave_dark.png");
    animation: waveScrollRight 34s linear infinite;
    z-index: 2;
        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%; }
}



.intro-img {
    width: 70%;
    height: 30rem;
    background-image: url("../assets/images/heroimg.png");
    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: 9.4375rem;
height: 0.25rem;
border-radius: 6.25rem;
background: #096;
}
.description{
    color: #000;
    text-align: center;
    font-family: Poppins;
    font-size: 1.25rem;
    font-style: normal;
    font-weight: 400;
    line-height: 2.125rem; /* 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: 1.75rem;
    align-self: stretch;
}

.core-card{
    display: flex;
    flex-direction: column;
    width: 14.375rem;
    padding: 0.9375rem 1.6875rem;
    justify-content: center;
    align-items: center;
    border-radius: 1.25rem;
}
.core-card p{

}
.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-size: 1rem;
    font-weight: 600;
    line-height: 2.25rem;
}

.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-size: 1rem;
    font-style: normal;
    font-weight: 600;
    line-height: 2.25rem; /* 180% */

}
.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-size: 1rem;
    font-style: normal;
    font-weight: 600;
    line-height: 2.25rem; /* 180% */
}

.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 img{
margin-bottom: .6rem;
}
.Scientific p{
    color: #492372;
    text-align: center;
    font-family: Poppins;
    font-size: 1rem;
    font-style: normal;
    font-weight: 600;
    line-height: 1.375rem; /* 110% */
}

.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-size: 1.25rem;
    font-weight: 600;
    line-height: 2.25rem; /* 180% */
}



.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{
    display: flex;
    align-items: center;
    gap: 1.5rem;

}
.product-card{
    width: 18.75rem;
    height: 14.875rem;
    padding: 2rem;
    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.25rem;
font-style: normal;
font-weight: 500;
line-height: 2.25rem; /* 180% */
}
.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;
}
.partner-box{

    width: auto;
    display: flex;
    align-items: start;
    gap: 1rem;
}
.partner-left{
    /* width: 50%; */
    display: flex;
    flex-direction: column;
    gap: 1rem;


}
.part-card{
    width: 100%;
    display: flex;
    align-items: start;
    padding: 1.25rem 1.25rem;
    gap: 0.75rem;
    height: 9rem;
    border-radius: 1.25rem;
    background: #FFF;
    box-shadow: 0 1px 10px 0 rgba(0, 0, 0, 0.10);
}

.part-card-text h3{
    color: #000;
    font-family: Poppins;
    font-size: 1.25rem;
    font-style: normal;
    font-weight: 500;
    line-height: 2rem; /* 160% */
}
.part-card-text p{
    color: #000;
    font-family: Poppins;
    font-size: 1rem;
    font-style: normal;
    font-weight: 300;
    line-height: 2rem; /* 200% */
}

.partner-right{
    /* width: 50%; */
    display: flex;
    flex-direction: column;
    /* justify-content: center; */

    gap: 1rem;
    padding: 2.21875rem 2rem 2.78125rem 2rem;
    flex-shrink: 0;

    border-radius: 1.25rem;
    background: #FFF;
    box-shadow: 0 1px 10px 0 rgba(0, 0, 0, 0.10);
}

.partner-right h3{
    color: #000;
    font-family: Poppins;
    font-size: 1.5rem;
    font-style: normal;
    font-weight: 500;
    line-height: 2rem; /* 133.333% */
}
.partner-right p{
    color: #000;
    font-family: Poppins;
    font-size: 1rem;
    font-style: normal;
    font-weight: 300;
    line-height: 1.375rem; /* 137.5% */
    width: 30rem;
}
.part-right-form{

}
.partner-right input{
    width: 90%;
    margin: 1rem 0;
    display: flex;
    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;

}

.join-sec{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 6rem 8rem;
    gap: 2rem;

    border-radius: 1.25rem;
    background: #FFF;
    box-shadow: 0 1px 10px 0 rgba(0, 0, 0, 0.10);
}

.join-sec h1{
    color: #000;
    text-align: center;
    font-family: Poppins;
    font-size: 2rem;
    font-style: normal;
    font-weight: 600;
    line-height: 2.4375rem; /* 121.875% */

}
.join-sec p{
    color: #737373;
    text-align: center;
    font-family: Poppins;
    font-size: 1rem;
    font-style: normal;
    font-weight: 400;
    line-height: 1.5rem; /* 150% */
}
.join-btns{
    display: flex;
    gap: 2rem;
}
.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;
}


.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: 8rem;

}
.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{
    display: flex;
    gap: .6rem;
    margin: .5rem 0;
}
.footer-links{
    display: flex;
    gap:5rem;
}
.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;
  }
}