body {
    font-family: 'Titillium Web', sans-serif;
    margin: 0;
    background-color: #f4f4f4;
    background-image: url('../assets/splash-screen-bg.jpg');
    background-size: cover;
    background-position: center;
}

header {
    position: sticky;
    top: 0;
    z-index: 1500;
    background: rgba(26,35,126,0.98);
    backdrop-filter: blur(4px);
}

.top-nav { max-width:1200px; margin:0 auto; display:flex; align-items:center; justify-content:space-between; padding:0.6rem 1rem; }

.logo img{ width:120px; }

.nav-links ul{ display:flex; gap:1.25rem; list-style:none; margin:0; padding:0; }
.nav-links a{ color:#fff; text-decoration:none; text-transform:uppercase; font-weight:700; letter-spacing:1px; padding:0.6rem 0.4rem; display:inline-block; border-bottom:2px solid transparent; transition:all .18s ease; }
.nav-links a:hover, .nav-links a:focus{ border-bottom-color:#ffc107; color:#fff; transform:translateY(-2px); }

.nav-toggle{
    display:none;
    background:rgba(255,255,255,0.08);
    border:1px solid rgba(255,255,255,0.15);
    color:#fff;
    padding:0.4rem 0.6rem;
    border-radius:8px;
    font-size:1.1rem;
    cursor:pointer;
    backdrop-filter: blur(4px);
    transition: transform .16s ease, box-shadow .2s ease, background .2s ease;
}
.nav-toggle:hover,
.nav-toggle:focus-visible{
    background:rgba(255,255,255,0.16);
    box-shadow:0 6px 16px rgba(0,0,0,0.18);
    outline:none;
    transform:translateY(-1px);
}
.nav-toggle:active{ transform:translateY(0); }

@media(max-width:900px){
    .nav-toggle{ display:inline-flex; }

    /* prevent horizontal scroll caused by offcanvas */
    body{ overflow-x:hidden; }

    /* simple dropdown menu */
    .nav-links{
        position:absolute;
        top:100%;
        right:1rem;
        left:1rem;
        width:auto;
        background: linear-gradient(180deg,#123a5a,#0f2a43);
        z-index:2200;
        margin-top:0.6rem;
        padding:1rem 0.75rem;
        border-radius:14px;
        box-shadow:0 12px 30px rgba(0,0,0,0.28);
        display:none;
    }

    /* show dropdown when nav-open */
    body.nav-open .nav-links{
        display:block;
    }

    .nav-links ul{
        display:flex;
        flex-direction:column;
        gap:1.25rem;
        align-items:center;
        padding:0;
        margin:0;
        list-style:none;
    }

    .nav-links a{
        color:#fff;
        font-size:1.05rem;
        padding:0.85rem 1rem;
        display:block;
        text-decoration:none;
        font-weight:700;
        letter-spacing:1px;
        text-transform:uppercase;
        width:100%;
        text-align:left;
        border-radius:10px;
        background:linear-gradient(90deg, rgba(255,255,255,0.06), rgba(255,255,255,0));
        transition:background .18s ease, transform .18s ease, padding-left .18s ease;
    }

    .nav-links a:hover,
    .nav-links a:focus-visible{
        background: rgba(255,255,255,0.08);
        outline:none;
        transform:translateX(2px);
        padding-left:1.2rem;
    }
    .nav-links a:active{ transform:translateX(0); }
    header { position:relative; z-index:2300; }
}


main {
    padding: 2rem;
}

section {
    margin-bottom: 2rem;
}

h1, h2 {
    color: #ffc107;
}

.hero {
    min-height: 80vh;
    display: grid;
    grid-template-columns: 1fr 420px;
    gap: 2rem;
    align-items: center;
    padding: 4rem 2rem;
    background: linear-gradient(180deg, rgba(0,0,0,0.25), rgba(0,0,0,0));
    color: #fff;
}

.hero-content { max-width: 640px; }
.hero-title{
    font-size: clamp(2.6rem, 5vw + 1rem, 4.6rem);
    margin: 0 0 0.6rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: -1px;
    line-height: 1.05;
    color:#fff;
    text-shadow: 0 8px 30px rgba(0,0,0,0.5);
}
.hero-title-popz{
    display:block;
    color:#f5a000;
    letter-spacing:1px;
}
.hero-title-sub{
    display:block;
    color:#fff;
}
.hero-title-sub em{
    font-style:italic;
    font-weight:900;
}
.hero p { color: rgba(255,255,255,0.95); font-size:1.1rem; }
.cta { display:inline-block; margin-top:1.25rem; background:#ffc107; color:#1a1a1a; padding:0.9rem 1.4rem; border-radius:999px; text-decoration:none; font-weight:700; box-shadow: 0 8px 24px rgba(0,0,0,0.25); }
.hero-image img { width:100%; max-width:380px; transform: translateY(0); transition: transform .6s ease; }

.popcorn-layer {
    position: absolute;
    inset: 0 0 auto 0;
    height: 60vh;
    pointer-events: none;
    opacity: 0.12;
    background-image: radial-gradient(circle at 10% 20%, rgba(255,230,150,0.95) 6px, transparent 7px), radial-gradient(circle at 60% 40%, rgba(255,240,200,0.9) 6px, transparent 7px), radial-gradient(circle at 40% 70%, rgba(255,220,120,0.9) 6px, transparent 7px);
    background-size: 140px 140px, 180px 180px, 120px 120px;
    background-repeat: repeat;
    animation: popcornDrift 12s linear infinite;
}

@keyframes popcornDrift {
    from { background-position: 0 0, 0 0, 0 0; }
    to { background-position: 800px -120px, -600px 200px, 400px 300px; }
}

@media (max-width: 800px) {
    .hero { grid-template-columns: 1fr; padding: 2rem 1rem; }
    .hero h1 { font-size: 2rem; }
    .hero-image { order: -1; text-align:center; }
}

.about {
    display: grid;
    grid-template-columns: 1fr 420px;
 /*   gap: 1.25rem; */
    align-items: start;
  padding: 2rem 2rem; 
    background: linear-gradient(180deg, rgba(11,54,82,0.85), rgba(11,54,82,0.35));
    color: #fff;
}

.about .about-image { grid-column: 2; grid-row: 1 / 3; justify-self: center; }
.about h2 { grid-column: 1; margin: 0 0 0.75rem; color: #ffc107; text-transform: uppercase; }
.about p { grid-column: 1; color: rgba(255,255,255,0.9); margin: 0 0 0.25rem; line-height:1.45; }

.about-image img {
    width: 200px;
    border-radius: 50%;
    box-shadow: 0 8px 24px rgba(0,0,0,0.35);
}

.features {
    display: flex;
    gap: 2rem;
    justify-content: center;
}

.feature {
    text-align: center;
}

.feature img {
    width: 100px;
}

.facebook {
    display: grid;
    grid-template-columns: 1fr 420px;
    gap: 2rem;
    align-items: center;
    padding: 3rem 2rem;
    background: #1f4f7a;
    color: #fff;
}
.facebook .facebook-image { grid-column: 2; justify-self: center; }
.facebook h2, .facebook p, .facebook a { grid-column: 1; }

footer {
    background-color: #1a237e;
    color: white;
    padding: 2rem;
    display: flex;
    justify-content: space-around;
}

.footer-links ul {
    list-style: none;
    padding: 0;
}

.footer-links a {
    color: white;
    text-decoration: none;
}

.social-media img {
    width: 30px;
}

/* small helper for micro-interactions */
.hero-image img:hover { transform: translateY(-8px) scale(1.03); }

/* fixed social buttons */
.social-fixed { position: fixed; left: 12px; top: 40%; transform: translateY(-50%); display: flex; flex-direction: column; gap: .5rem; z-index: 1200; }
.social-fixed .sf{ display:inline-flex; width:44px; height:44px; align-items:center; justify-content:center; border-radius:6px; color:#fff; text-decoration:none; font-weight:700; box-shadow:0 6px 18px rgba(0,0,0,0.15); }
.social-fixed .fb{ background:#3b5998; }
.social-fixed .mail{ background:#6c757d; }

/* accessibility: reduce motion preference respects */
@media (prefers-reduced-motion: reduce) {
    .popcorn-layer, .hero-image img { animation: none; transition: none; }
}

@media (max-width: 900px) {
    .about, .facebook { grid-template-columns: 1fr; }
    .about .about-image, .facebook .facebook-image { grid-column: 1; grid-row: auto; justify-self: center; }
}

/* Products list styles (matching design) */
.products-hero { text-align:center; padding:4rem 1rem 2rem; background:transparent; }
.products-title { font-size:3rem; color:#0b3652; letter-spacing:2px; font-weight:900; margin:0 0 .25rem; text-transform:uppercase; }
.products-sub { margin:0 0 .5rem; color:#6b7b86; font-weight:700; }
.products-stars { color:#f1c40f; font-size:1.6rem; margin-bottom:2rem; text-shadow:0 2px 6px rgba(0,0,0,0.15); }

.products-list { padding:2.5rem 2rem 4rem; }
.products-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:4rem; align-items:start; max-width:1200px; margin:0 auto; }
.pl-card { background: rgba(255,255,255,0.92); padding:1.25rem; border-radius:12px; text-align:center; box-shadow: 0 6px 18px rgba(0,0,0,0.08); }
.product-icon-img { width:56px; display:block; margin:0 auto 0.6rem; }
.product-title { font-weight:900; color:#0b3652; font-size:1.05rem; margin:0.25rem 0; text-transform:uppercase; }
.pack { color:#6b7b86; font-size:0.9rem; margin-bottom:1rem; }
.product-img { width:220px; max-width:60%; margin:0 auto 1.25rem; display:block; }
.pl-card .product-desc { color:#444; margin-bottom:0.75rem; }
.nutrition { display:inline-block; background:#ffc107; color:#1a1a1a; padding:0.55rem 0.9rem; border-radius:999px; text-decoration:none; font-weight:700; box-shadow: 0 8px 24px rgba(0,0,0,0.25); border:none; cursor:pointer; transition:transform .18s ease; }
.nutrition:hover { transform:translateY(-2px); }
.nutrition:active { transform:translateY(0); }

@media (max-width:900px){ .products-grid{grid-template-columns:1fr; gap:2.25rem;} .products-title{font-size:1.6rem;} }

/* contact layout + card styling */
.contact-grid{
    display:flex;
    gap:2rem;
    flex-wrap:wrap;
    align-items:flex-start;
    justify-content:center;
    width:100%;
    margin:0 auto;
}
.contact-card {
    background: rgba(255,255,255,0.95);
    padding:1.25rem;
    border-radius:12px;
    text-align:left;
    box-shadow: 0 6px 18px rgba(0,0,0,0.08);
    border-left:4px solid #0b6659;
    color: #123;
    width:100%;
    max-width:360px;
    flex: 0 0 30%;
}
.contact-card .product-title { color:#0b3652; margin:0 0 .5rem; }
.contact-card .pack { color:#444; font-size:0.9rem; }
.contact-card a { color:#0b6659; text-decoration:underline; font-weight:700; }
@media (max-width:900px){ .contact-card{max-width:100%; margin:0 auto;} }

/* map styles */
.map-wrapper { display:block; flex:1 0 70%; min-width:320px; max-width:820px; }
.map-iframe { width:100%; height:360px; border:0; border-radius:8px; box-shadow: 0 8px 24px rgba(0,0,0,0.12); }
@media (max-width:900px){ .map-iframe{ height:260px; } .map-wrapper{max-width:100%;} .contact-grid{flex-direction:column;} }

/* tighter mobile sizing to avoid overflow */
@media (max-width:640px){
    .map-wrapper{
        width:100%;
        min-width:0;
        max-width:100%; /* match contact card width on mobile */
        margin:0 auto;
        flex:none;
    }
    .map-iframe{ height:220px; }
}

/* ensure products heading is yellow like contact */
.products h2, .products-hero h1, .products-list h1, .products-title { color: #ffc107 !important; }

/* ingredients banner similar to popz.com */
.ingredients-banner { position:relative; padding:5rem 1rem; text-align:center; color:#fff; overflow:hidden; }
.ingredients-banner::before { content:''; position:absolute; inset:0; background: linear-gradient(135deg, rgba(11,54,82,0.9) 0%, rgba(18,58,90,0.95) 40%, rgba(8,30,50,0.95) 100%); mix-blend-mode: normal; opacity:1; }
.ingredients-inner{ position:relative; z-index:1; max-width:1100px; margin:0 auto; }
.ingredients-grid{ display:flex; align-items:center; gap:2rem; justify-content:center; }
.ingredients-banner h2{ font-size:2.6rem; line-height:1; margin:0 0 .5rem; font-weight:900; letter-spacing:2px; text-transform:uppercase; color:#fff; text-align:left; }
.ingredients-text{ text-align:left; max-width:720px; }
.ingredients-banner p{ margin:0 auto; color:rgba(255,255,255,0.9); font-weight:600; }

/* badge */
.ingredients-grid .badge{
    width:clamp(160px,28vw,320px);
    max-height:260px;
    height:auto;
    flex:0 0 auto;
    object-fit:contain;
    align-self:center;
}

/* list */
.ingredients-list{ margin:1rem 0 0; padding:0; list-style:none; color:rgba(255,255,255,0.95); font-weight:700; }
.ingredients-list li{ margin:0.45rem 0; padding-left:0; position:relative; padding-left:1.6rem; }
.ingredients-list li::before{ content:'•'; position:absolute; left:0; color:#ffc107; font-size:1.2rem; top:0; }

/* decorative subtle rays like popz.com */
.ingredients-banner .rays{ position:absolute; inset:0; background-image: radial-gradient(circle at center, rgba(255,255,255,0.06) 0%, transparent 20%); opacity:0.18; mix-blend-mode:overlay; }

@media(max-width:900px){
    .ingredients-banner{ padding:3rem 1rem; }
    .ingredients-banner h2{ font-size:1.6rem; }
    .ingredients-grid{flex-direction:column; text-align:center;}
    .ingredients-banner h2,.ingredients-text{ text-align:center;}
    .ingredients-grid .badge{ width:170px; max-height:180px; }
}