html {
    font-size: 14px;
}

@media (min-width: 768px) {
    html {
        font-size: 16px;
    }
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
    box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

html {
    position: relative;
    min-height: 100%;
    font-family: 'roboto-regular';
}

a, a:visited, a:focus, a:hover {
    text-decoration: none;
}



.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
    color: var(--bs-secondary-color);
    text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
    text-align: start;
}



.container-fluid {
    max-width: 1550px;
}

@font-face {
    font-family: 'roboto-regular';
    src: url('../fonts/roboto/roboto-regular.ttf') format('truetype');
}

@font-face {
    font-family: 'ubuntu-regular';
    src: url('../fonts/ubuntu/ubuntu-regular.ttf') format('truetype');
}

@font-face {
    font-family: 'arimo-regular';
    src: url('../fonts/arimo/static/arimo-regular.ttf') format('truetype');
}

/* Custom CSS for the Image Template */

/* 1. Top Bar & Navigation Styling */
.top-bar {
    background-color: #0d1e2e; /* Dark blue/black from the image */
    color: white;
}

    .top-bar a {
        color: #ffc107; /* Primary color for links (yellow/gold) */
    }

.navbar-brand {
    font-family: 'arimo-regular';
    color: #199aba !important; /* Blue for the brand name */
}

.navbar-nav .nav-link {
    font-weight: 500;
    font-family: 'ubuntu-regular';
    color: #343a40 !important; /* Dark text for links */
}

    .navbar-nav .nav-link.active {
        color: #199aba !important; /* Primary blue for active link */
    }

/* HERO BANNER */
.hero-banner {
    background-color: #dededc; /* fallback color */
    border-bottom: 5px solid #e9ecef; /* Light grey separator */
    display: flex;
    justify-content: center; /* centers container-fluid */
    min-height: 450px;
}

    /* Apply background to container-fluid, which keeps Bootstrap width */
    .hero-banner .container-fluid {
        background-image: url('../images/homeslide.png');
        background-repeat: no-repeat;
        background-position: right center;
        background-size: contain; /* keep aspect ratio */
        align-items: center;
        width: 100%;
        padding: 0 20px !important;
    }

    /* Hero text on left */
    .hero-banner .hero-content {
        padding: 3rem 0 !important;
        max-width: 50%;
    }

/* MOBILE: adjust for smaller screens */
@media (max-width: 991.98px) {
    .hero-banner .container-fluid {
        background-position: bottom right;
        background-size: 50%;
        padding: 0 20px !important;
    }

    .hero-banner .hero-content {
        max-width: 100%;
    }

    .hero-banner .container-fluid {
        background-image: none;
    }
}




/* 3. Product Section Styling */

/* Styling for the large featured card in the first row */
.featured-card {
    background-color: #f8f9fa; /* Light grey background */
    border: none !important;
    border-radius: 0;
}

    .featured-card img {
        max-height: 200px;
        object-fit: contain;
        display: block;
        margin-left: auto;
        margin-right: auto;
    }

/* Styling for the horizontal product card section (5 items) */
.product-card-horizontal {
    border: 1px solid #dee2e6;
    border-radius: 0;
}

    .product-card-horizontal img {
        height: 100%;
        object-fit: contain;
    }

/* Custom CSS to approximate 5 columns in a row (lg screen) */
/* This overrides Bootstrap's standard 12-column grid to make 5 items fit */
@media (min-width: 992px) {
    .custom-col-5 {
        width: 20%; /* 100% / 5 = 20% */
        flex: 0 0 auto;
        padding-left: 0.45rem; /* Apply g-3 spacing */
        padding-right: 0.45rem; /* Apply g-3 spacing */
    }
}

.product-section .row.g-3 {
    margin-left: -0.75rem;
    margin-right: -0.75rem;
}
/* End of 5-column customization */


/* Standard Product Card Styling */
.product-card {
    transition: transform 0.2s;
    border-radius: 0;
    padding-bottom: .7rem !important;
}

    .product-card:hover {
        transform: translateY(-2px);
        box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
    }

    .product-card img {
        max-height: 150px;
        object-fit: contain;
    }


/* Styling for the second featured card (side image) */
.featured-card-2 {
    background-color: #e9ecef; /* Slightly darker light grey */
    padding: 2rem !important;
    border-radius: 0;
}

    .featured-card-2 img {
        max-height: 250px;
    }


.btn-primary {
    background-color: #199aba !important;
    border-color: #199aba !important;
}

    .btn-primary.p-0 {
        padding-top: 5px !important;
        padding-bottom: 5px !important;
    }

.btn-outline-primary {
    color: #199aba !important;
    border-color: #199aba !important;
}

    .btn-outline-primary:hover {
        background-color: #199aba !important;
        color: white !important;
    }

.bg-categories {
    padding: 1rem 0 !important;
    background-color: #dae5e7 !important;
}

    .bg-categories .btn {
        padding: 0.3rem 2rem !important;
    }

.text-primary {
    color: #199aba !important;
}

.deal-card {
    border: 1px solid #e3e3e3;
    padding: 20px;
    transition: 0.3s;
    background: #fff;
}

    .deal-card:hover {
        box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    }

.deal-badge {
    position: absolute;
    top: 12px;
    right: 12px;
    background: #e63946;
    color: #fff;
    padding: 4px 10px;
    font-size: 12px;
    border-radius: 0px !important;
}

.deal-timer span {
    display: inline-block;
    background: #f5f5f5;
    padding: 8px 10px;
    border-radius: 6px;
    margin-right: 5px;
    font-size: 13px;
    font-weight: 600;
}

footer {
    background-color: #0d1e2e;
    color: white;
    padding: 2rem 0;
    margin-top: 2rem;
}

    footer li {
        border-bottom: 1px solid #5f6f7e !important;
        padding-bottom: 5px !important;
        margin-bottom: 5px !important;
    }

        footer li a, footer li p {
            color: white !important;
            font-size: 14px !important;
        }

    footer a:hover {
        text-decoration: underline;
    }

.footer-copy {
    text-align: center !important;
    padding: 1rem 0 !important;
}

.btn:focus {
    outline: none !important;
    -moz-box-shadow: none !important;
    -webkit-box-shadow: none !important;
    box-shadow: none !important;
}

.btn-account {
    color: #fff !important;
    background-color: #6c757d !important;
}

.hero-banner h1 {
    font-size: 1.8rem !important;
}

.hero-banner p {
    font-size: 1.059rem !important;
}

.hero-banner .btn {
    font-size: 1.049rem !important;
    padding: 0.50rem 1.3rem !important;
    background-color: #199aba !important;
    border-color: #199aba !important;
}
/* --- Custom Navbar Collapse Breakpoint: 1165px --- */

/* Expanded ABOVE 1165px */
@media (min-width: 1166px) {
    .navbar-expand-lg .navbar-collapse {
        display: flex !important;
        flex-basis: auto;
    }

    .navbar-expand-lg .navbar-toggler {
        display: none !important;
    }
}

/* Collapsed BELOW 1165px */
@media (max-width: 1165px) {

    .navbar {
        position: relative;
        flex-wrap: nowrap !important;
    }

    .navbar-expand-lg .navbar-collapse {
        display: none !important;
    }

    .navbar-expand-lg .navbar-toggler {
        display: block !important;
    }

    /* ❗ RIGHT-SIDE SLIDING MENU */
    .navbar-collapse {
        position: fixed !important;
        top: 93px;
        right: -250px; /* hidden off-screen */
        width: 250px;
        height: calc(100vh - 93px);
        background: #fff;
        z-index: 9999;
        overflow-y: auto;
        transition: right 0.3s ease-in-out;
        box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    }

        /* When menu is opened */
        .navbar-collapse.show {
            right: 0 !important; /* slide in */
            display: block !important;
        }

        /* Vertical menu list */
        .navbar-collapse ul {
            display: block;
            width: 100%;
            padding-left: 0;
            margin: 0;
        }

        .navbar-collapse li.nav-item {
            width: 100%;
        }

        .navbar-collapse a.nav-link {
            display: block;
            width: 100%;
            padding: 12px 20px;
            border-bottom: 1px solid #eee;
        }
}

@media (max-width: 1165px) {

    /* Default sidebar position */
    .navbar-collapse {
        top: 93px;
    }

        /* When scrolled */
        .navbar-collapse.scrolled {
            top: 0 !important;
            height: 100vh !important;
        }
}

@media (min-width:768px) {
    .top-bar {
        position: fixed !important;
        top: 0px;
        left: 0;
        width: 100%;
        z-index: 10000;
    }

    .navbar {
        position: fixed !important;
        top: 29px;
        left: 0;
        width: 100%;
        z-index: 10000;
    }

    .top-90 {
        margin-top: 90px !important;
        display: block !important;
        position: relative !important;
        overflow: hidden;
    }
}

@media (max-width:767.9px) {
    .navbar {
        position: fixed !important;
        top: 0;
        left: 0;
        width: 100%;
        z-index: 10000;
    }

    .navbar-collapse {
        position: fixed !important;
        top: 60px;
        right: -250px; /* hidden off-screen */
        width: 250px;
        height: calc(100vh - 60px);
        background: #fff;
        z-index: 9999;
        overflow-y: auto;
        transition: right 0.3s ease-in-out;
    }

    .top-90 {
        margin-top: 60px !important;
        display: block !important;
        position: relative !important;
        overflow: hidden;
    }
}

@media (min-width:992px) and (max-width:1165px) {
    .navbar-collapse ul li.nav-item a {
        padding-left: 20px !important;
        padding-right: 20px !important;
    }
}

.navbar-toggler {
    outline: none !important;
}

    .navbar-toggler:focus {
        box-shadow: none !important;
        outline: none !important;
    }