#maindiv,#detaildiv{padding:1%;}
.face{font-weight:normal;font-size:12px;color:#333;}
img{border:0px;}
.itemdiv img{max-width:210px;max-height:160px;}
.has_detail:hover{border:2px solid lightblue;box-shadow:5px 5px 10px lightblue;}
.itemdiv:hover h3,.itemdiv:hover .face {color:blue;}
.itemdiv{float:left;text-align:center;border:2px solid silver;position:relative;overflow:hidden;box-shadow:5px 5px 5px #ddd;width:220px;height:210px;margin:10px;}
.item_img{display:flex;height:170px;justify-content:center;align-items:center;}
.has_detail{border:2px solid coral;cursor:pointer;background-image:url(./pics/detail.gif);background-repeat:no-repeat;background-position:99% 99%;z-index:90;}
.has_detail span{color:green;}
.itemspec{font-size:14px;width:100%;position:absolute;line-height:15px;bottom:5px;color:#555;}
.remark{font-size:15px;color:#333;font-weight:normal;}
.title{font-size:16px;font-weight:bold;}
#bread{font-size:13px;color:#777;font-weight:bold;margin-top:5px;}
.sort_spec{font-size:15px;color:teal;font-style:italic;}
.error{color:red;font-weight:bold;text-decoration:underline;font-size:20px;}
table,td{border:1px solid silver;padding:1px;border-collapse:collapse;font-size:14px;text-align:center;}
table{margin: 0 auto;}
td{margin:0px;}
.oddrow td:first-child,.evenrow td:first-child{text-align:left;}
.oddrow{background-color:white;}
.evenrow{background-color:#f5f5f5;}
.tbhead{background-color:#dddddd;font-weight:bold;}
.black{color:black;}
.subtitle{font-size:14px;font-weight:bold;}

h3{font-weight:bold;text-align:center;margin:0px;}
#container{min-height:97%;position:relative;}

#items{overflow:hidden;position:relative;display:table;}
#dbg{position:absolute;bottom:20px;left:20px;font-size:10px;color:red;}
h1{font-size:18px;}
h2{font-size:15px;}
.note{font-weight:normal;font-size:14px;color:#666;}
.note::before{content:"* ";}
.note::after{content:" * ";}
.back{font-weight:bold;position:absolute;right:10px;text-decoration:underline;color:blue;}

#address{font-weight:12px;padding-top:10px;}
li{list-style:outside;margin-top:5px;}
ul{margin-left:3%;padding-inline-start:30px!important;}

.process{display:flex;flex-direction:column;align-items:center;}
.process div{display:flex;flex-wrap:wrap;border:1px dashed gray;margin:5px;padding:5px;background-color:#fbfbfb;justify-content:space-around;text-align:center;}
.process span{background-color:silver!important;font-weight:bold;color:teal;border:1px solid gray;margin:5px;padding:5px;}
h4::after{content:'\2193';font-size:3rem;color:green;font-weight:bold;padding-left:50%;width:100%;}
.extrapics{display:flex;flex-direction:column;}
.extrapics img{margin:2px;width:fit-content;}
.brief img{margin:5px;}
u{color:blue;}
.cloud_container{display:flex;justify-content:space-around;}
.ind{color:#8887a9;font-size:12px;font-style:italic;}
.icons a{margin:20px;}
.dropdown-menu a{font-weight:bold;}

/* --- VARIABLES & RESET --- */
:root {
    --navy: #1B263B;
    --slate: #415A77;
    --accent: #F3722C;
    --light-bg: #F8F9FA;
    --border: #E0E6ED;
}

body {
    margin: 0;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    color: #2D3436;
    line-height: 1.6;
}

/* --- NAVIGATION --- */
#header-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 5%;
    background: white;
    border-bottom: 3px solid var(--navy);
    position: sticky;
    top: 0;
    z-index: 1000;
}

.nav-links { display: flex; gap: 20px; align-items: center; }

.nav-search {
    display: flex;
    border: 1px solid var(--border);
    border-radius: 4px;
    overflow: hidden;
}

.nav-search input { width:95%;border: none; padding: 8px 12px; outline: none; }
.nav-search button { background: var(--navy); color: white; border: none; padding: 0 15px; cursor: pointer; }

/* --- HERO SECTION --- */
.hero-section {
    background: linear-gradient(rgba(27, 38, 59, 0.8), rgba(27, 38, 59, 0.8)), 
                url('pics/web/banner.jpg') center/cover no-repeat;
    color: white;
    padding: 100px 5%;
    text-align: center;
}

.hero-content h1 { font-size: 2.5rem; text-transform: uppercase; letter-spacing: 1px; margin: 0; }
.hero-content p { font-size: 1.2rem; opacity: 0.9; margin: 15px 0; }

.hero-badges { display: flex; justify-content: center; gap: 20px; margin-top: 25px; font-weight: 600; font-size: 0.9rem; }

/* --- FEATURES GRID --- */
.value-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 25px;
    padding: 50px 3%;
    background: var(--light-bg);
}

.value-card {
    background: white;
    padding: 40px;
    border-radius: 4px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.05);
    border-top: 4px solid var(--navy);
    text-align: center;
    transition: 0.3s;
}

.value-card:hover { transform: translateY(-5px); border-top-color: var(--accent); }
.value-card .icon { font-size: 2.5rem; margin-bottom: 15px; }
.value-card h3 { color: var(--navy); margin-bottom: 15px; }

/* --- FOOTER & MISC --- */
#foot { background: var(--navy); color: #BDC3C7; text-align: center; padding: 40px 20px; font-size: 0.9rem; }
.note { text-align: center; padding: 20px; font-size: 0.8rem; }
.note a { color: var(--slate); text-decoration: none; }

/* --- MOBILE SPECIFIC --- */
.mobile-cta {
    display: none; /* Hidden on desktop */
    position: fixed;
    bottom: 20px;
    right: 20px;
    background: var(--accent);
    color: white;
    padding: 15px 25px;
    border-radius: 50px;
    text-decoration: none;
    font-weight: bold;
    box-shadow: 0 4px 15px rgba(0,0,0,0.2);
    z-index: 999;
}

@media (max-width: 768px) {
    #header-nav { flex-direction: column; gap: 15px; }
    .nav-links { flex-direction: column; width: 100%; text-align: center; }
    .hero-content h1 { font-size: 1.8rem; }
    .hero-badges { flex-direction: column; gap: 10px; }
    .mobile-cta { display: block; } /* Show only on mobile */
    .value-grid { padding: 30px 20px; }
}
/* --- NAVIGATION LAYOUT --- */
#header-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #fff;
    padding: 10px 5%;
    border-bottom: 2px solid #1B263B;
    position: sticky;
    top: 0;
    z-index: 1000;
}

#navi { display: flex; align-items: center; }
.nav-links { display: flex; list-style: none; gap: 25px; align-items: center; }

/* --- DROPDOWN LOGIC (Desktop) --- */
.nav-item { position: relative; cursor: pointer; padding: 10px 0; }
.t1 { font-weight: 700; color: #1B263B; font-size: 14px; text-transform: uppercase; }

.dropdown-menu {
    position: absolute;
    top: 100%;
    left: 0;
    background: white;
    min-width: 220px;
    box-shadow: 0 8px 15px rgba(0,0,0,0.1);
    border-top: 3px solid #F3722C;
    display: none; /* Hidden by default */
    padding: 15px;
    z-index: 100;
}

.nav-item:hover .dropdown-menu { display: block; }

.dropdown-subgroup { margin-bottom: 10px; }
.sub-title { display: block; font-size: 11px; color: #7f8c8d; font-weight: 800; border-bottom: 1px solid #eee; margin-bottom: 5px; }
.mn { display: block; padding: 8px 0; color: #415A77; text-decoration: none; font-size: 14px; transition: 0.2s; }
.mn:hover { color: #F3722C; padding-left: 5px; }

/* --- MOBILE MENU (Hamburger) --- */
/* Hide the actual checkbox */
.menu-toggle {
    display: none;
}

/* Style the Hamburger Icon */
.menu-icon {
    cursor: pointer;
    display: none; /* Hidden on desktop */
    padding: 20px 10px;
    position: relative;
    user-select: none;
}

.menu-icon .navicon {
    background: #1B263B;
    display: block;
    height: 2px;
    position: relative;
    transition: background .2s ease-out;
    width: 24px;
}

.menu-icon .navicon:before,
.menu-icon .navicon:after {
    background: #1B263B;
    content: '';
    display: block;
    height: 100%;
    position: absolute;
    transition: all .2s ease-out;
    width: 100%;
}

.menu-icon .navicon:before { top: 7px; }
.menu-icon .navicon:after { top: -7px; }

/* --- MOBILE LOGIC (Triggered by Checkbox) --- */
@media (max-width: 992px) {
    .menu-icon { display: block; } /* Show icon */

    #navi {
        display: none; /* Hide menu by default */
        position: absolute;
        top: 60px; /* Adjust based on header height */
        left: 0;
        width: 100%;
        background: #fff;
        z-index: 9999; /* Ensure it's on top */
        box-shadow: 0 10px 20px rgba(0,0,0,0.1);
    }

    /* THE TRIGGER: If checkbox is checked, show #navi */
    #menu-btn:checked ~ #navi {
        display: block !important;
    }

    /* Optional: Turn the Hamburger into an 'X' when open */
    #menu-btn:checked ~ .menu-icon .navicon {
        background: transparent;
    }
    #menu-btn:checked ~ .menu-icon .navicon:before {
        transform: rotate(-45deg);
        top: 0;
    }
    #menu-btn:checked ~ .menu-icon .navicon:after {
        transform: rotate(45deg);
        top: 0;
    }

    .nav-links {
        flex-direction: column;
        padding: 20px;
    }
}

/* --- SEARCH STYLING --- */
.nav-search {
    display: flex;
    border: 1px solid #ddd;
    border-radius: 20px;
    padding: 2px 10px;
}
.nav-search input { border: none; outline: none; padding: 5px; font-size: 13px; }
.nav-search button { background: none; border: none; cursor: pointer; font-weight: bold; color: #F3722C; }