/* =====================================================
   GLOBAL
===================================================== */

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    padding: 0;

    font-family: Arial, Helvetica, sans-serif;

    background: #f8fafc;

    color: #172554;
}


/* =====================================================
   BRAND NAME
===================================================== */

.brand-name {
    font-size: 30px;
    font-weight: 700;
    white-space: nowrap;
}


/* =====================================================
   NAVBAR
===================================================== */

.navbar {
    background: #1268e8 !important;

    min-height: 75px;
}


.navbar-brand {
    display: flex;
    align-items: center;
}


.navbar-brand img {
    object-fit: contain;
}


/* Navigation links */

.navbar .nav-link {
    position: relative;

    color: rgba(255, 255, 255, 0.75) !important;

    font-weight: 500;

    margin-left: 5px;
    margin-right: 5px;

    transition:
        color 0.25s ease,
        transform 0.25s ease;
}


/* Active link */

.navbar-dark .navbar-nav .nav-link.active {
    color: #ffffff !important;

    font-weight: 700;
}


/* Active underline */

.navbar-dark .navbar-nav .nav-link.active::after {

    content: "";

    position: absolute;

    left: 12px;
    right: 12px;

    bottom: 2px;

    height: 3px;

    background: #ffffff;

    border-radius: 5px;
}


/* Hover */

.navbar-dark .navbar-nav .nav-link:hover {

    color: #ffffff !important;

    transform: translateY(-1px);
}


/* =====================================================
   MAIN HERO
===================================================== */

.main-hero {

    position: relative;

    overflow: hidden;

    background:
        linear-gradient(
            135deg,
            #eaf2ff 0%,
            #ffffff 50%,
            #eef6ff 100%
        );

    color: #172554;

    border: 1px solid #dbeafe;

    min-height: 350px;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    padding: 50px !important;
}


/* Decorative blue circle */

.main-hero::before {

    content: "";

    position: absolute;

    width: 250px;

    height: 250px;

    border-radius: 50%;

    background: #1268e8;

    opacity: 0.05;

    top: -120px;

    left: -100px;
}


/* Decorative light circle */

.main-hero::after {

    content: "";

    position: absolute;

    width: 300px;

    height: 300px;

    border-radius: 50%;

    background: #60a5fa;

    opacity: 0.07;

    bottom: -150px;

    right: -120px;
}


/* Hero content */

.main-hero > * {

    position: relative;

    z-index: 2;
}


/* =====================================================
   HERO LABEL
===================================================== */

.hero-label {

    color: #1268e8;

    font-size: 14px;

    font-weight: 800;

    letter-spacing: 3px;

    margin-bottom: 10px;
}


/* =====================================================
   HERO HEADING
===================================================== */

.main-hero h1 {

    color: #123c8c;

    font-weight: 800;

    margin-bottom: 10px;
}


/* =====================================================
   HERO DESCRIPTION
===================================================== */

.main-hero .lead {

    color: #374151;

    font-size: 21px;
}


/* =====================================================
   25 YEARS ANNIVERSARY
===================================================== */

.anniversary-badge {

    display: inline-block;

    margin-top: 18px;

    padding: 10px 25px;

    border-radius: 30px;

    background: #ffffff;

    border: 2px solid #1268e8;

    color: #123c8c;

    font-size: 18px;

    font-weight: 800;

    letter-spacing: 1px;

    box-shadow:
        0 4px 12px rgba(18, 104, 232, 0.15);
}


/* =====================================================
   HERO SUPPORTING TEXT
===================================================== */

.hero-description {

    margin-top: 15px;

    color: #4b5563;

    font-size: 16px;
}


/* =====================================================
   HERO BUTTON
===================================================== */

.hero-button {

    display: inline-block;

    margin-top: 15px;

    padding: 12px 30px;

    border-radius: 30px;

    background: #1268e8;

    color: #ffffff;

    text-decoration: none;

    font-weight: 700;

    transition: all 0.3s ease;
}


.hero-button:hover {

    background: #0b4fb5;

    color: #ffffff;

    transform: translateY(-2px);

    box-shadow:
        0 5px 15px rgba(18, 104, 232, 0.25);
}


/* =====================================================
   SEARCH
===================================================== */

.form-control,
.form-select {

    min-height: 45px;

    border: 1px solid #d1d5db;

    border-radius: 8px;
}


.form-control:focus,
.form-select:focus {

    border-color: #1268e8;

    box-shadow:
        0 0 0 0.2rem rgba(18, 104, 232, 0.15);
}


/* Search button */

.btn-success {

    background: #198754;

    border-color: #198754;

    min-height: 45px;

    font-weight: 600;
}


/* =====================================================
   PRODUCT SECTION
===================================================== */

#products {

    scroll-margin-top: 90px;
}


#products h2 {

    color: #123c8c;
}


/* =====================================================
   PRODUCT CARD
===================================================== */

.product-card {

    border-radius: 12px;

    overflow: hidden;

    background: #ffffff;

    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease;
}


.product-card:hover {

    transform: translateY(-5px);

    box-shadow:
        0 10px 25px rgba(0, 0, 0, 0.12) !important;
}


/* Product image */

.product-image {

    width: 100%;

    height: 250px;

    object-fit: contain;

    padding: 15px;

    background: #ffffff;
}


/* No image */

.no-image {

    height: 250px;

    display: flex;

    align-items: center;

    justify-content: center;

    color: #6b7280;

    background: #f9fafb;
}


/* Product name */

.product-card h5 {

    color: #172554;
}


/* =====================================================
   PRODUCT BUTTON
===================================================== */

.product-card .btn-primary {

    background: #1268e8;

    border-color: #1268e8;

    font-weight: 600;
}


.product-card .btn-primary:hover {

    background: #0b4fb5;

    border-color: #0b4fb5;
}


/* =====================================================
   FOOTER
===================================================== */

.site-footer {

    background: #071b4d;

    color: #ffffff;
}


.site-footer h4,
.site-footer h5 {

    color: #ffffff;
}


.site-footer p {

    color: rgba(255, 255, 255, 0.85);

    line-height: 1.7;
}


/* Footer links */

.footer-link {

    color: rgba(255, 255, 255, 0.85);

    text-decoration: none;

    transition: color 0.2s ease;
}


.footer-link:hover {

    color: #60a5fa;
}


/* Footer anniversary */

.anniversary-footer {

    color: #93c5fd !important;

    font-weight: 700;

    font-size: 15px;
}


/* =====================================================
   TABLET
===================================================== */

@media (max-width: 768px) {

    .brand-name {

        font-size: 21px;

    }


    .main-hero {

        padding: 40px 25px !important;

    }


    .main-hero h1 {

        font-size: 35px;

    }


    .main-hero .lead {

        font-size: 18px;

    }

}


/* =====================================================
   MOBILE
===================================================== */

@media (max-width: 480px) {

    .navbar {

        min-height: 68px;

    }


    .navbar-brand img {

        width: 35px !important;

        height: 48px !important;

        margin-right: 8px !important;

    }


    .brand-name {

        font-size: 16px;

    }


    /* Mobile navbar */

    .navbar-dark .navbar-nav .nav-link.active::after {

        left: 0;

        right: auto;

        width: 35px;

        bottom: 3px;

    }


    .main-hero {

        min-height: 350px;

        padding: 35px 20px !important;

    }


    .hero-label {

        font-size: 11px;

        letter-spacing: 1.5px;

    }


    .main-hero h1 {

        font-size: 30px;

        line-height: 1.2;

    }


    .main-hero .lead {

        font-size: 17px;

    }


    .anniversary-badge {

        font-size: 13px;

        padding: 9px 15px;

        letter-spacing: 0.5px;

    }


    .hero-description {

        font-size: 14px;

    }


    .hero-button {

        padding: 10px 22px;

        font-size: 14px;

    }


    #products h2 {

        font-size: 25px;

    }


    .product-image {

        height: 220px;

    }

}


/* =====================================================
   VERY SMALL MOBILE
===================================================== */

@media (max-width: 360px) {

    .brand-name {

        font-size: 14px;

    }


    .navbar-brand img {

        width: 32px !important;

        height: 44px !important;

    }


    .main-hero h1 {

        font-size: 26px;

    }


    .anniversary-badge {

        font-size: 12px;

    }

}

.footer-address {
    white-space: nowrap;
}

@media (max-width: 768px) {
    .footer-address {
        white-space: normal;
    }
}