@charset "utf-8";
/* CSS Document */
a{
text-decoration:none;
}
a:hover, a:active, a:focus {
  text-decoration: none;
  color: #F44336;
  cursor: pointer;
}

a, a:focus, a:active, a:hover, object, embed {
  outline: none
}

:-moz-any-link:focus {
  outline: none
}

body{
background:#f5f7fa;
font-family:ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji",Segoe UI Symbol,"Noto Color Emoji";
/*font-family:system-ui,-apple-system,"Segoe UI",Roboto;*/
font-size:14px;
color:#333;
}

.scroll-progress {
    position: fixed;
    bottom: 25px;
    right: 25px;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: #fff;
    border: none;
    color: #333;
    font-size: 18px;
    cursor: pointer;
    display: none;
    justify-content: center;
    align-items: center;
    box-shadow: 0 4px 10px rgba(0,0,0,0.25);
    z-index: 999;
}

.scroll-progress svg {
    position: absolute;
    top: 0;
    left: 0;
    transform: rotate(-90deg);
}

.progress-ring-circle {
    stroke-dasharray: 138;   /* 2πr = 2 * 3.14 * 22 */
    stroke-dashoffset: 138;
    transition: stroke-dashoffset 0.2s linear;
}

/* TOP NOTICE */

.top-notice{
background:#f1f1f1;
font-size:13px;
text-align:center;
padding:6px 0;
color:#555;
}

/* HEADER */

.main-header{
background:#1E2836;
color:#fff;
position:sticky;
top:0;
z-index:1000;
}

.logo{
font-size:24px;
font-weight:700;
letter-spacing:.5px;
}

.logo span{
color:#2ecc71;
}

/* SEARCH */

.search-input{
border-radius:0 6px 6px 0;
height:40px;
}

.input-group-text{
border-radius:6px 0 0 6px;
background:#fff;
}

/* HEADER LINKS */

.header-links a{
color:#fff;
margin-left:20px;
font-size:14px;
transition:.3s;
}

.header-links a:hover{
color:#2ecc71;
}

/* SECOND NAV */

.secondary-nav{
background:#fff;
border-bottom:1px solid #ddd;
}

.secondary-nav .nav-link{
font-size:14px;
font-weight:600;
color:#333;
padding:14px 15px;
}

.secondary-nav .nav-link:hover{
color:#2ecc71;
}

/* MEGA MENU */

.secondary-nav .nav{
justify-content:center;
}

.mega-menu{
left:0;
right:0;
top:100%;
border:none;
padding:30px;
margin-top:0;
box-shadow:0 8px 25px rgba(0,0,0,.12);
}

.mega-menu h6{
font-weight:600;
margin-bottom:12px;
}

.mega-menu a{
display:block;
color:#555;
font-size:13px;
margin-bottom:6px;
}

.mega-menu a:hover{
color:#2ecc71;
}

@media (min-width: 992px){

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

}

/* Smooth Slide Animation for Mobile */
@media (max-width: 991px) {
    .secondary-nav {
        /* Reset display none from previous code so it can animate */
        display: block !important; 
        max-height: 0;
        overflow: hidden;
        opacity: 0;
        transition: max-height 0.4s ease-in-out, opacity 0.3s ease;
        background: #ffffff;
        border-bottom: none;
    }

    .secondary-nav.show-mobile-nav {
        max-height: 500px; /* High enough to fit all links */
        opacity: 1;
        border-bottom: 1px solid #ddd;
    }
    
    .secondary-nav .nav {
        flex-direction: column;
        align-items: flex-start;
        padding: 10px 20px;
    }

    .secondary-nav .nav-link {
        width: 100%;
        padding: 12px 0;
        border-bottom: 1px solid #f0f0f0;
    }
}

/* WARNING */

.warning-banner{
background:#131B2A;
text-align:center;
padding:20px 10px;
color:#fff;
}

.warning-banner h5{
color:#ffc107;
font-weight:700;
}

.warning-banner p{
 font-size: 20px;
 color: #d1d5db;
}

/* BREADCRUMB */

.breadcrumb-section{
font-size:14px;
padding:15px 0;
}

/* CARD */

.form-card{
background:#fff;
border-radius:10px;
box-shadow:0 4px 12px rgba(0,0,0,.06);
margin-bottom:25px;
overflow:hidden;
}

.form-card-header{
background:#111827;
color:#fff;
padding:14px 20px;
font-weight:600;
}

.form-card-header div{
 color:#9ca3af;
 font-size: 14px;
}

.form-card-body{
padding:25px;
}

.form-card-body label{
 color: #374151;
 font-size: 14px;
 font-weight: 500;
 padding-bottom: 3px;
}

/* INPUT */

.input-group-text{
background:#f5f5f5;
}

/* BUTTON */

.btn-register{
background:#16A34A;
color: #ffffff;
border:none;
padding:12px 28px;
font-weight:600;
border-radius:6px;
}

.btn-register:hover{
background:#15803D;
}

.btn-register:disabled{
background:#a5d6b8;
cursor:not-allowed;
opacity:0.7;
}

/* SIDEBAR */

.account-sidebar{
background:#fff;
border-radius:10px;
box-shadow:0 4px 12px rgba(0,0,0,.05);
}

.account-title{
background:#121928;
color:#fff;
padding:15px;
font-weight:600;
border-radius:10px 10px 0 0;
}

.account-sidebar a{
display:block;
padding:12px 16px;
border-bottom:1px solid #eee;
font-size:14px;
color:#444;
}

.account-sidebar a:hover{
background:#eaf7f0;
color:#28a745;
}

/* FEATURES */

.features{
background:#111827;
color:#fff;
padding:40px 0;
margin-top:50px;
}

.features i{
font-size:28px;
color:#2ecc71;
margin-bottom:10px;
}

/* FOOTER */

.footer{
background:linear-gradient(180deg,#081626,#06101f);
color:#cbd5e1;
padding:50px 0 30px;
}

.footer h6{
color:#fff;
margin-bottom:16px;
font-weight:600;
}

.footer a{
display:block;
color:#cbd5e1;
font-size:14px;
margin-bottom:6px;
}

.footer a:hover{
color:#2ecc71;
}

.footer-bottom{
border-top:1px solid rgba(255,255,255,.1);
margin-top:30px;
padding-top:15px;
font-size:13px;
text-align:center;
}

/* RESPONSIVE */

@media(max-width:991px){

.header-links{
margin-top:10px;
}

.secondary-nav{
display:none;
}

.account-sidebar{
margin-top:30px;
}

}

/* MOBILE HEADER */

.mobile-phone{
font-size:13px;
color:#fff;
padding-top:6px;
}

.header-mobile .logo{
font-size:22px;
font-weight:700;
}

/* MOBILE MENU */

.mobile-menu-links{
background:#1E2836;
border-top:1px solid rgba(255,255,255,.1);
}

.mobile-menu-links a{
display:block;
color:#fff;
padding:12px 10px;
border-bottom:1px solid rgba(255,255,255,.08);
font-size:15px;
}

.mobile-menu-links a i{
margin-right:8px;
}

.mobile-menu-links a:hover{
background:#16202c;
color:#2ecc71;
}

/* MOBILE CART */

.mobile-cart{
font-size:20px;
}

.cart-badge{
position:absolute;
top:-6px;
right:-8px;
background:#2ecc71;
color:#fff;
font-size:11px;
padding:2px 5px;
border-radius:50%;
font-weight:600;
}

/*SIDEBAR*/

.account-sidebar a{
display:flex;
align-items:center;
gap:8px;
padding:12px 16px;
border-bottom:1px solid #eee;
font-size:14px;
color:#444;
position:relative;
}

.account-sidebar a::after{
content:"\F285";
font-family:"bootstrap-icons";
position:absolute;
right:15px;
opacity:0;
transition:.2s;
}

.account-sidebar a:hover::after{
opacity:1;
}

.account-sidebar a:hover{
background:#eaf7f0;
color:#28a745;
} 

/* ACTIVE LINK */
.account-sidebar a.active-link{
color:#28a745;
border-right:3px solid #28a745;
background:#eaf7f0;
}

/* always show chevron for active */
.account-sidebar a.active-link::after{
opacity:1;
}

/*FEATURES*/
.features i{
font-size:32px;
color:#2ecc71;
}

.feature-item{
gap:10px;
}
.feature-subtitle{
  color: #9ca3af;
}

/*FOOTER*/

.social-icons a{
display:inline-flex;
align-items:center;
justify-content:center;
width:38px;
height:38px;
margin-right:8px;
border-radius:50%;
background:#0c1e35;
color:#cbd5e1;
font-size:18px;
transition:.3s;
}

/* Facebook */
.social-icons a:nth-child(1):hover{
background:#1877f2;
color:#fff;
}

/* Instagram */
.social-icons a:nth-child(2):hover{
background:#e4405f;
color:#fff;
}

/* X (Twitter) */
.social-icons a:nth-child(3):hover{
background:#000;
color:#fff;
}

/*EVERYDAY DEALS*/

/* HERO */

.hero{
background:#192130;
color:#fff;
padding:100px 0;
}

.hero h1{
font-size:56px;
font-weight:700;
line-height:1.2;
}

.hero h1 span{
color:#22c55e;
}

.hero p{
color:#9ca3af;
font-size: 18px;
max-width:500px;
}

.badge-hero{
color: rgb(74 222 128);
background:#16a34a33;
padding:8px 14px;
border-radius:30px;
font-size:13px;
}

/* FEATURE CARDS */
.feature-card{
padding:24px;
border-radius:14px;
color:#fff;
min-height:120px;
display:flex;
flex-direction:column;
justify-content:center;
}

.feature-card i{
font-size:26px;
margin-bottom:8px;
}

.feature-card small{
color:#9ca3af;
font-size: 16px;
}

.bg-green{background:linear-gradient(135deg,#166534,#065f46);}
.bg-purple{background:linear-gradient(135deg,#4c1d95,#312e81);}
.bg-blue{background:linear-gradient(135deg,#1e3a8a,#1e40af);}
.bg-orange{background:linear-gradient(135deg,#7c2d12,#9a3412);}

/* CATEGORY */

.category-section{
background:#f3f4f6;
padding:60px 0;
}

.category-card{
height:180px;
border-radius:14px;
overflow:hidden;
position:relative;
color:#fff;
}

.category-card img{
width:100%;
height:100%;
object-fit:cover;
}

.category-overlay{
position:absolute;
bottom:0;
left:0;
right:0;
padding:18px;
background:linear-gradient(transparent,rgba(0,0,0,.75));
}

.category-card:hover{
transform:translateY(-4px);
transition:.3s;
}

/* BRANDS */

.brands{
padding:60px 0;
}

.brand-card{
background:#f1f5f9;
padding:22px;
text-align:center;
border-radius:10px;
font-weight:600;
transition:.3s;
}

.brand-card:hover{
background:#e2e8f0;
transform:translateY(-3px);
}

/* CTA */

.cta{
background:#15873F;
color:#fff;
padding:80px 0;
text-align:center;
}

.cta p{
color:#dcfce7;
max-width:650px;
margin:auto;
}