/* ================= RESET ================= */
*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    font-family:"Arial", Times, serif;
}

body{
    background:#0b0b0b;
    color:#111;
}

/* ================= COMMON LAYOUT ================= */
.container{
    width:100%;
    padding:0 6%;
}

.main-content{
    background:#a7a4a4;
    padding:50px 0;
    min-height:70vh;
}

/* ================= HEADER ================= */
.site-header{
    background:linear-gradient(135deg,#e6c200,#00bf76);
    border-bottom:3px solid #00bf76;
    padding:12px 0;
}
.main-nav{
    display:flex;
    align-items:center;
}

.header-flex{
    display:flex;
    justify-content:space-between;
    align-items:center;
}

.logo{height:55px;}

.brand{
    display:flex;
    align-items:center;
    gap:12px;
}

.brand-text{
    font-size:50px;
    font-weight:700;
    color:#000;
}

.accent{
    font-size:50px;
    font-weight:700;
    color:#007b96;
}

.main-nav a{
    color:#000;
    text-decoration:none;
    font-weight:600;
    position:relative;
    padding:0 16px;
}
.main-nav a:hover{
    opacity:.7;
}


/* ================= FOOTER ================= */
.site-footer{
    background:linear-gradient(135deg,#e6c200,#00bf76);
    color:#fff;
    text-align:center;
    padding:22px 0;
}

/* ================= GALLERY ================= */
.gallery{
    position:relative;
    width:100%;
}

.slide{
    display:none;
    width:100%;
    height:700px;
    object-fit:cover;
}

.gallery-controls{
    position:absolute;
    bottom:15px;
    left:50%;
    transform:translateX(-50%);
    display:flex;
    gap:12px;
}

.gbtn{
    background:rgba(0,0,0,0.6);
    color:#fff;
    border:none;
    padding:10px 14px;
    font-size:20px;
    cursor:pointer;
}

/* ================= HERO OVERLAY ================= */
.hero-overlay{
    position:absolute;
    inset:0;
    background:rgba(0,0,0,0.45);
    color:#fff;
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    text-align:center;
    z-index:5;
}

.hero-logo{height:70px;margin-bottom:15px;}

/* ================= MD SECTION ================= */
.md-section{
    display:flex;
    gap:40px;
    margin:60px 0;
    align-items:flex-start;
    background:#00bf76;
    padding:40px;
    border-radius:6px;
}

.md-photo{flex:0 0 150px;}
.md-photo img{width:100%;border:4px solid #00bf76;}
.md-text{flex:1;}
.md-text p{line-height:1.7;text-align:justify;}

/* ================= WHY US ================= */
.why-us{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:30px;
    margin:50px 0;
}

.wu-card{
    background:#fff;
    padding:30px 20px;
    border-radius:8px;
    border-bottom:3px solid #00bf76;
    box-shadow:0 6px 15px rgba(0,0,0,0.08);
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:15px;
    min-height:160px;
    font-weight:600;
}

.wu-img{height:55px;object-fit:contain;}

/* ================= PRODUCTS ================= */
.section-title{
    margin:50px 0 20px;
    text-align:center;
}


.product-grid{
    display:grid;
    grid-template-columns:repeat(5,1fr); /* was 4 */
    gap:18px;                            /* tighter */
}


.product-card{
    background:#f4f7f9;
    padding:16px;                 /* ↓ from ~25px */
    border-radius:8px;            /* ↓ slightly */
    border-top:3px solid #c3ad07; /* thinner */
    box-shadow:0 8px 18px rgba(0,0,0,0.08); /* lighter */
    font-size:14px;               /* more compact */
}

.product-card h3{
    font-size:15px;
    margin-bottom:8px;
    text-align:center;
}
.product-card p{
    margin-bottom:6px;
    line-height:1.4;
}
.product-card p strong{
    color:#333;
    font-weight:600;
}
.product-search-wrap input:focus{
    outline:none;
    border-color:#00bf76;
    box-shadow:0 0 0 3px rgba(0,191,118,0.15);
}

/* ================= CERTIFICATIONS ================= */
.cert-grid{
    display:grid;
    grid-template-columns:repeat(6,1fr);
    gap:30px;
    margin:40px 0 60px;
    align-items:center;
    padding:35px;
    border:2px solid #00bf76;
    border-radius:8px;
    background:#fff;
}

.cert-logo{
    width:100%;
    max-height:90px;
    object-fit:contain;
}

.cert-logo:hover{filter:grayscale(0%);}
.cta-btn{
    background:#000;
    color:#fff;
    padding:14px 30px;
    text-decoration:none;
    font-weight:700;
    display:inline-block;
    margin-top:20px;
    border-radius:4px;
}

/* ================= TABLES (public + admin) ================= */
.admin-table,
.notice-table{
    width:100%;
    border-collapse:collapse;
    background:#fff;
    margin-top:20px;
}

.admin-table th,
.admin-table td,
.notice-table th,
.notice-table td{
    border:1px solid #ddd;
    padding:12px;
    text-align:center;
}

.admin-table th,
.notice-table th{
    background:#0280ad;
    color:#fff;
}

/* ================= ADMIN PANEL ================= */
.admin-layout{display:flex;min-height:100vh;}

.admin-sidebar{
    width:240px;
    background:#00bf76;
    color:#fff;
    padding-top:20px;
    position:fixed;
    height:100%;
}

.admin-sidebar a{
    display:block;
    padding:12px 20px;
    color:#fff;
    text-decoration:none;
}

.admin-sidebar a:hover{background:#1c1c1c;}

.admin-content{
    margin-left:240px;
    padding:30px;
    width:100%;
    background:#f4f7f9;
}

.admin-card{
    background:#fff;
    padding:25px;
    margin-bottom:30px;
    border-left:4px solid #0280ad;
}

/* Legacy admin pages using .container */
.admin-content .container{
    width:100%;
    max-width:100%;
    margin:0;
    padding:0;
}

.admin-content form input,
.admin-content form textarea,
.admin-content form button{
    width:100%;
    padding:12px;
    margin-bottom:12px;
}

/* ================= CONTACT PAGE ================= */
.contact-strip{
    display:flex;
    justify-content:space-between;
    background:#fff;
    padding:18px 25px;
    margin-bottom:40px;
    border-radius:8px;
    box-shadow:0 6px 15px rgba(0,0,0,0.08);
    font-weight:600;
}

.contact-flex{
    display:grid;
    grid-template-columns:1.2fr 1fr;
    gap:40px;
    margin-bottom:60px;
}

.contact-form{
    background:#fff;
    padding:30px;
    border-radius:8px;
    box-shadow:0 6px 15px rgba(0,0,0,0.08);
}

.success-msg{
    background:#d4edda;
    padding:12px;
    margin-bottom:15px;
    border-radius:5px;
    color:#155724;
}

.contact-address{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:30px;
    margin-bottom:50px;
    background:#fff;
    padding:25px;
    border-radius:8px;
    box-shadow:0 6px 15px rgba(0,0,0,0.08);
}

.address-info{display:flex;flex-direction:column;gap:10px;}

.addr-icon{color:#00bf76;margin-right:8px;}

/* ================= RESPONSIVE ================= */
@media(max-width:1200px){
    .product-grid{grid-template-columns:repeat(4,1fr);}
}

@media(max-width:992px){
    .product-grid{grid-template-columns:repeat(3,1fr);}
    .why-us{grid-template-columns:repeat(2,1fr);}
    .cert-grid{grid-template-columns:repeat(3,1fr);}
}

@media(max-width:600px){
    .product-grid,
    .why-us,
    .cert-grid{grid-template-columns:1fr;}
    .md-section{flex-direction:column;text-align:center;}
    .contact-flex,
    .contact-address{grid-template-columns:1fr;}
}

.auth-box{
    background:#fff;
    padding:40px;
    width:100%;
    max-width:420px;
    border-top:4px solid #00bf76;
    box-shadow:0 10px 25px rgba(0,0,0,0.25);
    border-radius:6px;
}

.auth-brand{
    text-align:center;
    margin-bottom:20px;
}

.auth-logo{
    height:60px;
    margin-bottom:10px;
}

.auth-brand-text{
    font-size:20px;
    font-weight:700;
    color:#000;
}

.auth-box input{
    width:100%;
    padding:12px;
    margin-bottom:15px;
    border:1px solid #ccc;
}

.auth-box button{
    width:100%;
    padding:12px;
    background:#00bf76;
    color:#000;
    border:none;
    font-weight:700;
    cursor:pointer;
}
/* ================= PUBLIC FORM ELEMENTS ================= */
.contact-form input,
.contact-form textarea{
    width:100%;
    padding:12px;
    margin-bottom:15px;
    border:1px solid #ccc;
    border-radius:4px;
}

.contact-form button{
    background:#00bf76;
    color:#000;
    border:none;
    padding:12px 25px;
    font-weight:700;
    cursor:pointer;
    border-radius:4px;
}
/* ===== PRODUCTION STRENGTH STRIP ===== */

.strength-strip{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    background:linear-gradient(135deg,#00bf76,#e6c200);
    color:#fff;
    text-align:center;
    padding:25px 6%;
    font-weight:700;
    font-size:22px;
    margin:60px 0;
}

.strength-strip div{
    border-right:1px solid rgba(255,255,255,0.2);
}

.strength-strip div:last-child{
    border-right:none;
}

@media(max-width:768px){
    .strength-strip{
        grid-template-columns:1fr;
        gap:20px;
    }
}


.gallery-controls{
    position:absolute;
    bottom:15px;
    left:50%;
    transform:translateX(-50%);
    z-index:10;            /* above overlay */
}
/* ================= CONTACT PAGE PROFESSIONAL UPGRADE ================= */

.contact-hero{
    background:linear-gradient(135deg,#00bf76,#e6c200);
    color:#fff;
    padding:30px 6%;
    text-align:center;
    border-radius:6px;
    margin-bottom:40px;
}

.contact-hero h1{
    font-size:36px;
    margin-bottom:10px;
}

.contact-hero p{
    opacity:.85;
    font-size:18px;
}

.pro-strip{
    border:2px solid #00bf76;
    border-radius:8px;
    margin-bottom:40px;
}

.cs-title{
    font-weight:700;
    font-size:13px;
    color:#888;
}

.cs-text{
    font-size:18px;
    font-weight:700;
}

.contact-info{
    background:#f9f7ef;
    padding:35px;
    border-left:5px solid #00bf76;
    margin-bottom:40px;
    border-radius:6px;
}

.contact-form{
    background:#fff;
    padding:40px;
    border-radius:8px;
    border-top:5px solid #00bf76;
    box-shadow:0 10px 30px rgba(0,0,0,.08);
}

.contact-form button{
    background:#111;
    color:#fff;
    font-size:16px;
    letter-spacing:1px;
}

.contact-divider{
    margin:70px 0;
    border:none;
    height:2px;
    background:#00bf76;
}

.contact-address{
    border:2px solid #eee;
    border-left:6px solid #00bf76;
    transition:.3s;
}

.contact-address:hover{
    transform:translateY(-6px);
    box-shadow:0 12px 25px rgba(0,0,0,.08);
}

.addr-title{
    font-size:22px;
    margin-bottom:12px;
    color:#111;
}
/* ===== PRODUCT SEARCH ===== */
.product-search-wrap{
    max-width:500px;
    margin:20px auto 30px;
    text-align:center;
}

.product-search-wrap input{
    width:100%;
    padding:14px;
    font-size:16px;
    border-radius:6px;
    border:1px solid #ccc;
}

/* ===== PRODUCTS CTA ===== */
.products-cta{
    text-align:center;
    margin-top:40px;
}

/* ================= HEADER RESPONSIVE ================= */

.main-nav a:not(:last-child)::after{
    content:"";
    position:absolute;
    right:0;
    top:50%;
    transform:translateY(-50%);
    height:16px;
    width:1px;
    background:rgba(255,255,255,0.45);
}

.main-nav a.active{
    font-weight:700;
}

.main-nav a.active::before{
    content:"";
    position:absolute;
    left:0;
    right:0;
    bottom:-6px;
    height:3px;
    background:#000;
    border-radius:2px;
}

/* ===== MOBILE HEADER ===== */
@media (max-width:768px){

    .header-flex{
        flex-direction:column;
        align-items:center;
        gap:10px;
    }

    .brand{
        justify-content:center;
    }

    .main-nav{
        width:100%;
        display:flex;
        gap:12px;
        overflow-x:auto;          /* ✅ ENABLE SWIPE */
        overflow-y:hidden;
        white-space:nowrap;       /* ✅ PREVENT WRAP */
        -webkit-overflow-scrolling:touch;
        scrollbar-width:none;     /* Firefox */
    }

    .main-nav::-webkit-scrollbar{
        display:none;             /* Chrome / Android */
    }

    .main-nav a{
        flex:0 0 auto;            /* ✅ DO NOT SHRINK */
        padding:8px 14px;
        font-size:14px;
        text-align:center;
    }

    /* remove separators on mobile */
    .main-nav a::after{
        display:none;
    }

    /* remove active underline on mobile */
    .main-nav a.active::before{
        display:none;
    }
}
/* ===== HOME PAGE PRODUCTS ===== */
.home-products .product-grid{
    display:grid;
    grid-template-columns:repeat(5,1fr);
    gap:18px;
}

/* limit height to 2 rows on home */
.home-products .product-grid{
    max-height:calc(2 * 230px); /* card height */
    overflow:hidden;
}

/* ===== PRODUCTS PAGE ===== */
.products-page .product-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:18px;
}
@media (max-width:992px) and (orientation:landscape){

    /* HOME PAGE */
    .home-products .product-grid{
        grid-template-columns:repeat(3,1fr);
        max-height:calc(2 * 230px); /* 3 × 2 = 6 */
    }

    /* PRODUCTS PAGE */
    .products-page .product-grid{
        grid-template-columns:repeat(3,1fr);
    }
}
@media (max-width:768px) and (orientation:portrait){

    /* HOME PAGE */
    .home-products .product-grid{
        grid-template-columns:repeat(2,1fr);
        max-height:calc(3 * 230px); /* 2 × 3 = 6 */
    }

    /* PRODUCTS PAGE */
    .products-page .product-grid{
        grid-template-columns:repeat(2,1fr);
    }
}
.auth-page{
    min-height:100vh;
    display:flex;
    justify-content:center;
    align-items:center;
    background:#0b0b0b;
}