@media (max-width: 768px) {
    .navbar {
        width: 90%;

        padding-inline: 1.5rem;
        justify-content: space-between;
        position: relative;
        /* important */
    }

.logo img {
    width: 6rem;
}
    .logotext {
        color: #000;
        font-family: Poppins;
        font-size: 1.2rem;
        font-style: normal;
        font-weight: 600;
        line-height: 1.25rem;
        /* 71.429% */
    }

    /* show hamburger */
    .hamburger {
        display: flex;
    }

    /* centered dropdown menu */
    .nav-menu {
        position: absolute;
        top: 100%;
        left: 50%;
        /* center horizontally */
        transform: translateX(-50%) translateY(-10px);
        margin-top: 0.75rem;

        background: rgba(255, 255, 255, 0.98);
        border-radius: 1rem;
        box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);

        padding: 1.25rem 1.5rem;
        width: 90%;
        /* centered fixed width */

        flex-direction: column;
        align-items: center;
        /* center menu items */
        gap: 1.5rem;

        opacity: 0;
        pointer-events: none;
        transition:
            opacity 0.25s ease,
            transform 0.25s ease;
        z-index: 9;
    }

    /* when menu is open */
    .navbar.open .nav-menu {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
        pointer-events: auto;
    }

    .navlinks {
        flex-direction: column;
        align-items: center;
        /* center links */
        gap: 1.5rem;
        position: static;
        transform: none;
    }

    .navlinks a {
        font-size: 1rem;
        text-align: center;
    }

    .nav-cta {
        width: 100%;
        justify-content: center;
    }

    .primary-button {
        font-size: .8rem;
    }

    .secondary-button {
        font-size: .8rem;
    }

    .hero {
        width: 94%;
        gap: 1rem;
        height: 80vh;

    }




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


    }

    .search-tag p {
        color: #C19552;
        font-size: .7rem;
    }


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

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

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

    }

    .sub-text p {
        font-size: .9rem;
        line-height: 1.4rem;
        /* 120% */
        padding: .1rem 1rem;
    }

    /* Seaweed responsive */
    .seaweed {
        bottom: -20px;
    }

    .seaweed-1 {
        left: 5%;
        width: 5rem;
        height: 8rem;
    }

    .seaweed-2 {
        right: -4%;
        width: 5rem;
        height: 8rem;
    }

    .seaweed-3 {
display: none;
    }

    .seaweed-4 {
display: none;
    }

    .intro-img {
        width: 90%;
        height: 12rem;
        /* Reduce height slightly to show more content */
        margin-top: -6rem;
        z-index: 5;
        background-position: center top;
        /* Focus on top if it's a person/scene */
    }

    .section {
        width: 90%;

    }

    .about {
        padding: 2rem 0.5rem;
        gap: 1rem;
    }

    .header-text {
        font-size: 2rem;
    }

    .description {

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



    .mission {
        flex-direction: column;
        gap: 1rem;
    }

    .vision-card {
        padding: 2rem 2rem;

    }

    .title {

        gap: .6rem;

    }

    .title img {
        width: 2rem;
    }

    .title h2 {
        font-size: 1.2rem;

    }

    .vision-p {
        font-size: 1rem;
        line-height: 1.6rem;
        /* 177.778% */
    }

    .vision-pdiv ul li {
        font-size: 1rem;
        line-height: 1.6rem;
        /* 177.778% */
        margin: .7rem .5rem;
    }

    .core-value {
        padding: 3rem 1rem;
    }

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

    .core {
        display: flex;
        flex-direction: column;
        gap: 1rem;

    }

    .core-card {

        width: 100%;
        height: auto;
        min-height: 7rem;
        padding: 1.5rem;
        display: flex;
        flex-direction: row;
        /* Icon and text side-by-side */
        justify-content: flex-start;
        gap: 1.5rem;
    }

    .core-card p {
        font-size: 1rem;
        text-align: left;
    }

    .core-card img {
        width: 3rem;
        /* Fixed width for icon */
        padding: 0;
    }


    .technology {
        width: 100%;
        padding: 2rem 1rem;
    }

    .tech-section {
        width: 100%;
    }

    .tech-tabs {
        padding: .5rem;
        gap: 0rem;

    }

    .tab-btn {
        width: 1rem;
        padding: 1rem 3.5rem;
    }

    .tab-icon {
        width: 1.5rem;
    }

    .tab-btn p {
        display: none;

    }

    .tab-panel {
        padding: 2rem 1.5rem;
        justify-content: center;
        align-items: flex-start;
        flex-direction: column;
        gap: 2.625rem;
    }

    .panel-lable img {
        width: 4rem;
        padding: .8rem;
        border-radius: 0.625rem;

    }

    .lable-texts {
        display: flex;
        align-items: start;
        flex-direction: column;
    }

    .panel-lable h3 {
        font-size: 1rem;
    }

    .panel-lable p {
        font-size: 0.6rem;

    }

    .panel-desc {

        font-size: .8rem;
        line-height: 1.2rem;
        /* 150% */
    }

    .tag-row {
        margin: .4rem 0;

    }

    .tag {

        padding: 0.0625rem 1.1625rem;
        font-size: 0.6rem;
    }

    .panel-card-lable p {

        font-size: .8rem;

    }

    .panel-text {
        font-size: 0.7rem;

    }

    .panel-right img {
        width: 100%;
    }


    .impact {
        width: 100%;

    }

    .impact-box {
        flex-direction: column;
        margin-top: 2rem;
        gap: 2rem;
    }

    .impact-img {
        width: 100%;
    }

    .impact-box-title h2 {
        font-size: 1.5rem;

    }

    .impact-text {
        width: 100%;
    }

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

    .impact-box-mob {
        flex-direction: column-reverse;

    }

    .prods {
        width: 100%;
        gap: 1.5rem;
    }

    .products {
        gap: 1.5rem;
        flex-direction: column;

    }

    .product-card {
        width: 100%;
        height: 12.5rem;
    }

    .product-card img {
        width: 3rem;
    }

    .product-card h2 {
        font-size: 1.1rem;
    }

    .joinb {
        width: 90%;
        flex-direction: column;
        padding: 3rem;

    }

    .query {
        width: 100%;
    }

    .join-sec {
        width: 100%;

    }

    .ver-line {
        display: none;
    }


    .footer {
        width: 100%;
        padding: 2rem;
        gap: 1rem;
    }

    .footer-upper {
        display: flex;
        justify-content: center;
        align-items: start;
        flex-direction: column;
        width: 100%;
        gap: 1rem;

    }

    .com-info {
        width: 100%;
        gap: .5rem;
    }

    .com-info p {
        font-size: .8rem;
    }

    .footerlogo {
        width: 2rem;
    }

    .footer-links {
        display: none;
    }

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

    .footer-lower {
        width: 100%;
        display: flex;
        flex-direction: column-reverse;
        align-items: center;
        justify-content: space-between;
        gap: 0rem;
    }

    .socials a img {
        width: 1.5rem;


    }

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



    /* about page */



    .about-hero {
        width: 100%;
        height: 100%;
        padding: 16rem 2rem 16rem 2rem;
        flex-direction: column;
        justify-content: flex-end;
        align-items: center;
        margin-top: -5.2rem;
        gap: 1rem;

    }





    /* impact page */
    .header-text-impact {
        font-size: 1.5rem;
    }

    .description-impact {
        width: 100%;

    }

    .impact-card-small {
        width: 100%;
        gap: 0.5rem;
    }

    .impact-card-wraper {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 1rem;

    }

    .sdgs {
        gap: .625rem;
        width: 100%;
    }

    /* technology page */
    .tech-sec {
        width: 100%;
        padding: 1rem;
    }


    /* contact page */
    .con-section {
        flex-direction: column;
        align-items: start;
        padding: 1rem;
    }

    .con-left {
        width: 100%;
        padding: 2rem 1.5rem;
        gap: 1rem;
    }

    .inp-row {
        flex-direction: column;
        gap: .8rem;


    }

    .con-right {
        width: 100%;

    }

    /* Tech Page Fixes */
    .rec-paper {
        width: 100%;
        margin: 1rem 0;
        padding: 1.5rem;
    }

    .rec-paper h1 {
        font-size: 1.3rem;
        line-height: 1.4;
    }

    .rec-paper p {
        font-size: 1rem;
        line-height: 1.6rem;
    }

    /* Join Link Size */
    .join-link h1 {
        font-size: 1.8rem;
    }

}

/* Tablet: 769px – 1024px */
@media (min-width: 769px) and (max-width: 1241px) {
    .navbar {
        width: 75%;
        padding: 1rem 2rem;
        border-radius: 2.5rem;
    }

    .logotext {
        font-size: 1.25rem;
    }

    .nav-menu {
        position: static;
        /* reset mobile dropdown behavior */
        width: auto;
        padding: 0;
        margin: 0;
        flex-direction: row;
        align-items: center;
        gap: 1.5rem;
        background: transparent;
        box-shadow: none;
        opacity: 1;
        transform: none;
        pointer-events: auto;
        width: 72%;
    }

    .navlinks {
        flex-direction: row;
        align-items: center;
        gap: 1.25rem;
    }

    .navlinks a {
        font-size: 0.95rem;
    }

    .nav-cta {
        padding: 0.6rem 1.4rem;
        font-size: 0.95rem;
        width: auto;
    }

    .hamburger {
        display: none;
        /* hide burger on tablet */
    }
}