/* GLOBAL */

:root {
    --primary: #011A82;
    --primary-dark: #4661cf;
    --primary-light: #445cbe;
    --menu: #fff;
    --menufont: #011A82;
    --herobg: #fff;
    --hero-shadow: rgba(139,110,92,.75);
    --hero-shadow-2: rgba(139,110,92,.75);
    --faq-header: #eee;
    --faq-body: #f9f9f9;
    --sale-badge: #011A82;
}

/* Btn Light  */
.btn-hero-light {
    transition: all .25s ease;
    background-color: var(--primary); /* follow bootstrap primary */
    color: #fff;
}

/* Hover follow primary-light style */
    .btn-hero-light:hover,
    .btn-hero-light:focus {
        background-color: var(--primary-light); /* follow bootstrap primary */
        color: #393737;
    }

/* Btn Light  */
.btn-hero {
    transition: all .25s ease;
    background-color: var(--primary-light); /* follow bootstrap primary */
    color:#fff;
}

    /* Hover follow primary-light style */
    .btn-hero:hover,
    .btn-hero:focus {
        background-color: var(--primary-light); /* follow bootstrap primary */
        color: #393737;
    }

.salebadge {
    background-color: var(--sale-badge);
}

.salebadgefont {
    color: var(--sale-badge);
}

.category-badge {
    background: var(--primary); /* your primary color */
    color: #fff;
    border: none;
    padding: 6px 14px;
    border-radius: 999px;
    font-size: 13px;
    cursor: pointer;
    transition: all .2s ease;
}

    /* hover effect */
    .category-badge:hover {
        opacity: 0.85;
    }

    /* ACTIVE STATE */
    .category-badge.active {
        background: #000; /* or darker brand color */
    }

html, body {
    height: 100%;
}

body {
    font-family: -apple-system, sans-serif;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    background: #fafafa;
    /* padding-top: 70px;*/
}

.gradient-text {
    color: var(--primary);
    opacity:1;
}

.pagepadding {
    padding-top: 120px;
    padding-bottom: 60px;
}


.fontmain {
    color: var(--primary);
}

.menubg {
    background-color: var(--menu);
}

.menufont {
    color: var(--menufont);
}

.bg {
    background-color: var(--primary);
}

#pageContent {
    flex: 1;
}

.shadowmy {
  
    text-shadow: 0 2px 6px var(--hero-shadow-2), 0 18px 18px rgba(0,0,0,.35);
}


.green {
    color: var(--primary);
}

.logosizemenu {
    width: 140px;
    height: 100%;
}

.logosize{
    width:140px;
    height:100%;
}

.info-card {
    background: #ffffff;
    border-radius: 16px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.05);
    transition: all 0.3s ease;
}

    .info-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 15px 35px rgba(0, 0, 0, 0.08);
    }

.about-section {
    background-color: #f8f9fa; /* optional light background */
}

/* WHY US CARD STYLE */
.why-card {
    background-color: #ffffff; /* White background */
    border-radius: 16px; /* Rounded corners */
    padding: 30px 20px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.05); /* Soft shadow */
    transition: all 0.3s ease;
}

    /* Optional: Hover effect */
    .why-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 15px 35px rgba(0, 0, 0, 0.08);
    }

/* Optional: Icon styling */
.why-icon {
    font-size: 28px;
    color: var(--primary);
}

.why-us {
    position: relative;
    overflow: hidden;
    /* soft blue base */
    background: linear-gradient(180deg, #ffffff, #eef1ff);
}

    /* CLOUD GLOW LAYERS */
    .why-us::before,
    .why-us::after {
        content: "";
        position: absolute;
        width: 420px;
        height: 420px;
        border-radius: 50%;
        filter: blur(80px);
        z-index: 0;
    }

    /* TOP LEFT GLOW */
    .why-us::before {
        top: -120px;
        left: -120px;
        background: rgba(68, 92, 190, 0.25);
    }

    /* BOTTOM RIGHT GLOW */
    .why-us::after {
        bottom: -150px;
        right: -150px;
        background: rgba(68, 92, 190, 0.18);
    }

    /* KEEP CONTENT ABOVE */
    .why-us .container {
        position: relative;
        z-index: 2;
    }

/* ======================
   HEADER
====================== */
.navbar-brand {
    font-weight: 800;
    letter-spacing: .5px
}

.nav-link {
    color: var(--menufont) !important;
    font-weight: 500
}

    .nav-link:hover {
        color: var(--primary) !important
    }

.navbar {
    z-index: 1050;
}

/* BUTTONS */

.gradient-btn {
    background: linear-gradient(135deg,#3f6212,#65a30d,#facc15);
    border: none;
    color: white
}

.send-btn {
    background: var(--primary);
    border: none;
    color: white;
    padding: 12px;
    border-radius: 10px;
    width: 100%;
    font-weight: 600
}

.send-btn-hero {
    background: var(--primary);
    color: #fff;
    border: none;
    padding: 8px 20px;
    border-radius: 999px;
    font-weight: 600;
    transition: .2s ease;
}

    .send-btn-hero:hover {
        background: var(--primary-dark);
        color: #fff;
        transform: translateY(-1px);
    }

/* HERO */

.herobg {
    opacity: 1;
}

.hero .container {
    position: relative;
    z-index: 2;
   
}

.hero img {
    position: relative;
    z-index: 1;
}

.hero {
    display: flex;
    align-items: center;
    text-align: center;
    color: var(--primary);
    min-height: 600px;
}

    .hero h1 {
        color: var(--hero-title);
        font-size: 40px;
    }

    .hero::after {
        min-height: 60vh;
        content: "";
        position: absolute;
        inset: 0;
    }


/* CTA SECTION */

.cta-section {
    background: var(--primary);
    min-height: 400px;
    display: flex;
    align-items: center; /* vertical center */
    justify-content: center; /* horizontal center */
}

    .cta-section p {
        max-width: 600px;
        margin: auto;
        opacity: .9;
    }

    .cta-section .btn-outline-light:hover {
        background: white;
        color: var(--primary);
    }

/* Category */

.category-card {
    border-radius: 24px;
    overflow: hidden;
    box-shadow: 0 10px 25px rgba(0,0,0,.15);
    transition: .25s ease;
    background: #fff;
}

.category-img {
    border-radius: 24px;
    transition: .35s ease;
}

.category-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 18px 40px rgba(0,0,0,.25);
}

    .category-card:hover .category-img {
        transform: scale(1.05);
    }


/* Product */
.product-card {
    background: #fff;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 10px 25px rgba(0,0,0,.12);
    transition: .25s ease;
    border: none !important;
}

    .product-card:hover {
        transform: translateY(-6px);
        box-shadow: 0 18px 40px rgba(0,0,0,.2);
    }

.img-wrapper {
    padding-top:10px;
    display: flex;
    justify-content: center !important; /* horizontal */
    align-items: center !important; /* vertical */
    height: 100% !important; /* IMPORTANT */
  
}

.product-img {
    width: 60%;
    object-fit: contain;
}

.badge {
    font-size: 12px;
}

.product-desc {
    font-size: 14px;
    color: #6b7280;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 40px;
}

.product-image-frame {
    background: #fff;
    border-radius: 20px;
    height: 420px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 12px 30px rgba(0,0,0,.12);
    position: relative;
}

/* Real image size preserved */

.product-main-img {
    max-width: 85%;
    max-height: 85%;
    object-fit: contain;
    display: block;
}


.product-card:focus,
.product-card:active,
.product-card:hover,
a:focus,
a:active {
    outline: none !important;
    box-shadow: none !important;
}

/* FEATURES */

.feature {
    background: #fff;
    border-radius: 16px;
    padding: 25px;
    text-align: center;
    box-shadow: 0 8px 20px rgba(0,0,0,.05);
    height: 100%
}

    .feature i {
        font-size: 32px;
        color: var(--primary);
        margin-bottom: 10px
    }

/* ABOUT */

.mission-box {
    background: #f5f5f5;
    border-radius: 16px;
    padding: 40px;
    margin-top: 60px
}

/* CONTACT */

.contact-box {
    background: #fff;
    border-radius: 16px;
    padding: 30px;
    box-shadow: 0 10px 25px rgba(0,0,0,.05)
}

.icon {
    color: var(--primary);
    font-size: 20px;
    margin-right: 10px
}

.uen-box {
    background: #f5f5f5;
    border-radius: 10px;
    padding: 15px;
    margin-top: 20px
}

/* POLICY */

.policy-box {
    max-width: 900px;
    margin: auto
}

.policy-card {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 16px;
    padding: 30px;
    text-align: left;
    box-shadow: 0 10px 25px rgba(0,0,0,.05)
}

    .policy-card p {
        text-align: justify;
        line-height: 1.7
    }

.accordion-button {
    font-weight: 600
}

.send-btn:hover,
.send-btn:focus {
    background: var(--primary-dark);
    color: #fff;
}


/* ======================
   FOOTER
====================== */
footer {
    background: #000 !important;
    color: #fff !important
}

    footer h4,
    footer h6 {
        color: #fff !important
    }

    footer p,
    footer a,
    footer .small,
    footer .text-muted {
        color: white !important;
        text-decoration:none;
    }

        footer a:hover {
            color: var(--primary-light) !important
        }

    footer ul {
        padding-left: 0
    }

    footer li {
        margin-bottom: 8px
    }

    footer hr {
        border-color: #2a2a2a !important
    }

.footer-bottom {
    padding-top: 20px;
    padding-bottom: 20px;
    justify-content: center !important;
    text-align: center;
    font-size:13px;
        
}

/* FAQ Accordion Custom Style */

#faqAccordion .accordion-button {
    text-align: left;
    justify-content: flex-start;
    align-items: flex-start;
    box-shadow: none;
}

    /* When expanded (Bootstrap adds :not(.collapsed)) */
    #faqAccordion .accordion-button:not(.collapsed) {
        background-color: var(--faq-header) !important;
        color: inherit;
        box-shadow: none;
    }

    /* Remove blue focus glow */
    #faqAccordion .accordion-button:focus {
        box-shadow: none;
        border-color: transparent;
    }

/* Body background */
#faqAccordion .accordion-body {
    background-color: var(--faq-body);
}


@media(max-width:768px) {

    
    #pageContent {
        padding-left: 15px;
        padding-right: 15px;
    }

    .logosizemenu {
        width: 80px;
        height: 100%;
    }


    /* Left align everything */
    footer {
        padding-left: 15px;
        padding-right: 15px;
        text-align: left;
    }

        /* Reduce spacing */
        footer .row > div {
            margin-bottom: 20px;
        }

        /* BRAND block full width */
        footer .col-md-4 {
            width: 100%;
        }

        /* HELP goes beside contact (same row feel) */
        footer .col-md-2:nth-of-type(2) {
            width: 50%;
            float: left;
        }

        /* SHOP + POLICIES side by side */
        footer .col-md-2:nth-of-type(1),
        footer .col-md-2:nth-of-type(3) {
            width: 50%;
            float: left;
        }

        /* Section titles */
        footer h6 {
            font-size: 15px;
            margin-bottom: 8px;
        }

        /* Tighten list */
        footer ul li {
            margin-bottom: 6px;
        }

    /* Bottom copyright */
    .footer-bottom {
        clear: both;
        margin-top: 20px;
        padding-top: 12px;
        border-top: 1px solid #2a2a2a;
        text-align: center;
    }

    .cta-section {
        margin-left: -15px;
        margin-right: -15px;
    }

    .hero {
        
        margin-left: -15px;
        margin-right: -15px;
    }

        .hero h1 {
            color: var(--hero-title);
            font-size: 34px;
        }

    .why-us {
        margin-left: -15px;
        margin-right: -15px;
    }

    .pmobile {
        padding-top: 100px !important;
        padding-bottom: 80px !important;
    }

    .heropadhd {
        margin-top: -25px;
    }

    .heropad {
        padding-top: 20px;
        padding-bottom: 20px;
    }

    .heroTitle {
       
        font-size: 24px;
    }

    .pd20 {
        padding-left:20px;
    }
}