html { scroll-behavior:smooth; }
.hero-bg { background-image:url('../intro-bgc.jpg'); background-size:cover; }
.ngg-3col { display:flex; gap:30px; }
.ngg-3col div { flex:0 1 470px; min-height:200px; }

.ngg-para p { padding-top:1.2em; }

.nggtab-container {
    display: flex;
    justify-content: center;
    position: sticky;
    top: 0;
    background: #002248;
    padding: 5px 0;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    z-index: 10; 
    width: 100%; 
}

.nggtab, .nggtab2 {
    position: relative;
    cursor: pointer;
    padding: 10px 20px;
    font-size: clamp(14px, 1.2vw, 1.2rem);
    color: #fff;
    margin: 0 10px;
    transition: color 0.3s;
    font-weight: bold;
}

.nggtab a, .nggtab2 a { color:#fff; border-bottom:0 !important; }
.nggtab a:hover, .nggtab:hover, .nggtab2 a:hover, .nggtab2:hover {
    color: orange;
}


.nggtab a:active, .nggtab2 a:active { color:orange !important; border-bottom:0 !important; }
.nggtab.active, .nggtab2.active {
    color: orange !important;
    border-bottom:0;
}


.nggtab-container.fixed {
 position: fixed;
 top: 0;
 left: 0;
 width: 100%;
 box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* Optional: Add shadow for visual effect */
}

.placeholder {
 display: block;
}

.submenu {
    display: none; /* Hidden by default */
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    background: #fff;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    border-radius: 4px;
    z-index: 1001;
    flex-direction: row; /* Horizontal layout */
    padding: 5px;
}

.submenu.active {
    display: flex; /* Show only when active */
}

.submenu a {
    padding: 10px 15px;
    color: #333;
    text-decoration: none;
    transition: background 0.3s;
    white-space: nowrap; /* Prevent text wrapping */
    font-size:clamp(14px, 1vw, 1rem);
}

.submenu a:hover {
    background: #333;
    border-radius: 4px;
    color: #fff;
}

.btn-orange {
	float: none;
	display: inline-block;
	padding: 10px 15px;
	border: 0;
	background: #F90;
	color: #000;
	border-radius: 3px;
	text-transform: uppercase;
	font-weight: bold;
    font-size: clamp(14px, 1vw, 1rem);
	font-family:'Open Sans', Helvetica, Arial, sans-serif;
}

.btn-orange:hover {
	background: #333;
    color:#fff;
	border: none!important;
}
.ngg-brochure { display:flex; gap:30px; justify-content:center; align-items:center; color:#fff; }
.ngg-brochure-img img { max-height:500px; border-top-left-radius: 5px; border-top-right-radius: 5px; }
.ngg-brochure h3 { font-size:clamp(2rem,2.5vw,2.5rem); }
.ngg-brochure p { font-size:clamp(16px,1.5vw,1.5rem); padding:2% 0; }
.ngg-rm-paddb { padding-bottom:0 !important; }

.ngg-sku { display:flex; justify-content:center; }


@media only screen and ( max-width:1000px ) {
    .nggtab-container {
        display: flex;
        flex-direction: column; /* Stack tabs vertically */
        align-items: stretch; /* Full width for each tab */
    }

    .nggtab, .nggtab2 {
        width: 96%; /* Full width for each tab */
        text-align: left; /* Align text to the left for better readability */
        padding: 7px; /* Increase padding for touch targets */
        border-bottom: 1px solid #ddd; /* Optional: Add separator between tabs */
    }

    .submenu {
        position: relative; /* Remove absolute positioning for submenus */
        width: 87%; /* Full width to match parent tab */
        padding: 10px 20px; /* Indent submenu items for hierarchy */
        background: #f5f5f5; /* Slightly different background for contrast */
        box-shadow: none; /* Remove shadow for cleaner look */
        transform: translate(0%);
        top:0;
        left:0;
    }

    .submenu.active {
        display: block; /* Ensure submenu is visible when active */
        margin-top:5px; 
    }

    .submenu a {
        display: block; /* Stack submenu links vertically */
        padding: 10px; /* Spacing for submenu items */
        border-bottom: 1px solid #eee; /* Optional: Separator for submenu items */
    }
}


 /* Mobile/Tablet styles (≤768px) */
@media (max-width: 768px) {
    .nggtab, .nggtab2 {
        width: 92%; /* Full width for each tab */
    }    
    .nggtab-container.fixed {
        position: static;
        box-shadow:none;  
    }
    .ngg-brochure { flex-direction:column; padding:3%; }

    .placeholder { height:0 !important; }
    .ngg-3col { flex-direction:column; gap:10px; }
    .ngg-3col div { flex:1; min-height:auto; padding:0; }
    #main .item-grid .items { padding:5%; }


}


@media only screen and ( min-width:769px ) {
    .altW { width:50% !important; }
}