:root {
    --primary-color: #06768e;
    /* Deep Brown */
    --secondary-color: #D4AF37;
    /* Gold */
    --accent-color: #800000;
    /* Maroon */
    --background-color: #FDF5E6;
    /* Cream */
    --text-color: #333333;
    --font-heading: 'Times New Roman', serif;
    --font-body: 'Arial', sans-serif;
}

body {
    background-color: var(--background-color);
    color: var(--text-color);
    font-family: var(--font-body);
}

a {
    color: var(--primary-color);
    text-decoration: none;
    transition: color 0.3s ease;
}

a:hover {
    color: var(--accent-color);
}

/* Override existing classes */
.bg-pale-primary {
    background-color: var(--accent-color) !important;
    /* Replacing the purple */
    color: #fff;
}

.navbar-light .navbar-nav .nav-link {
    color: var(--primary-color);
    font-weight: 600;
}

.navbar-light .navbar-nav .nav-link:hover,
.navbar-light .navbar-nav .nav-link:focus {
    color: var(--accent-color);
}

.btn-primary,
.btn-primary:disabled {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
    color: #fff;
}

.btn-primary:hover {
    background-color: var(--accent-color);
    border-color: var(--accent-color);
}

.text-inverse {
    color: #fff !important;
}

.bg-dark {
    background-color: #2c1e18 !important;
    /* Dark Chocolate */
}

.badge-cart {
    background-color: var(--secondary-color) !important;
    color: #000;
}

/* Typography Enhancements */
h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--font-heading);
    color: var(--primary-color);
}


.navbar-brand img {
    max-height: 80px;
    /* Adjust logo size */
}

/* ============================
   Timeline Styles
   ============================ */
.timeline-container {
    position: relative;
    display: flex;
    justify-content: space-between;
    padding-top: 60px;
    margin-top: 20px;
}

/* The horizontal line itself */
.timeline-line {
    position: absolute;
    top: 78px;
    /* Adjusted to align with dots */
    left: 0;
    width: 100%;
    height: 4px;
    background: #e0e0e0;
    z-index: 0;
    background: linear-gradient(90deg, var(--primary-color) 0%, var(--secondary-color) 50%, var(--primary-color) 100%);
    border-radius: 4px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.timeline-item {
    position: relative;
    z-index: 1;
    width: 16%;
    text-align: center;
    padding: 0 10px;
    transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.timeline-item:hover {
    transform: translateY(-10px);
}

/* Year/Date Box */
.timeline-date {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 1.2rem;
    color: var(--primary-color);
    margin-bottom: 25px;
    background: #ffffff;
    display: inline-block;
    padding: 8px 18px;
    border-radius: 30px;
    box-shadow: 0 4px 10px rgba(93, 64, 55, 0.15);
    border: 2px solid var(--secondary-color);
    position: relative;
    top: -5px;
}

/* The Dot */
.timeline-dot {
    width: 24px;
    height: 24px;
    background: var(--primary-color);
    border: 4px solid #fff;
    border-radius: 50%;
    margin: 0 auto 20px;
    box-shadow: 0 0 0 3px var(--secondary-color);
    transition: all 0.3s ease;
    position: relative;
}

/* Hover effect on Dot */
.timeline-item:hover .timeline-dot {
    background: var(--secondary-color);
    box-shadow: 0 0 0 5px var(--primary-color);
    transform: scale(1.1);
}

/* Content below */
.timeline-content h5 {
    color: var(--primary-color);
    font-size: 1.1rem;
    margin-bottom: 8px;
}

.timeline-content p {
    font-size: 0.9rem;
    line-height: 1.5;
    color: #555;
}

/* ============================
   Responsive Timeline (Vertical)
   ============================ */
@media (max-width: 991px) {
    .timeline-container {
        flex-direction: column;
        padding-top: 0;
        padding-left: 0;
    }

    /* Vertical Line */
    .timeline-line {
        width: 4px;
        height: 100%;
        top: 0;
        left: 20px;
        /* Position the line */
        background: linear-gradient(180deg, var(--primary-color) 0%, var(--secondary-color) 100%);
    }

    .timeline-item {
        width: 100%;
        text-align: left;
        margin-bottom: 40px;
        padding-left: 60px;
        /* Space for the line */
        display: flex;
        flex-direction: column;
        align-items: flex-start;
    }

    .timeline-item:hover {
        transform: translateX(10px);
    }

    /* Reposition Date for Mobile */
    .timeline-date {
        order: -1;
        margin-bottom: 10px;
        margin-left: 0;
        top: 0;
        font-size: 1rem;
        padding: 5px 15px;
    }

    /* Reposition Dot */
    .timeline-dot {
        position: absolute;
        left: 10px;
        /* (Line Left 20px + Line Width 4px / 2) - (Dot Width 24px / 2) = 22 - 12 = 10px */
        top: 45px;
        /* Adjust to align with date or content start */
        margin: 0;
    }

    /* Align dot with the date or title */
    .timeline-date {
        /* If we want date next to dot, we need more structure changes. 
           Let's align dot with the title (h5) usually better visually in vertical stack
           OR align with the Date if date is top.
        */
        margin-bottom: 5px;
    }

    .timeline-dot {
        top: 5px;
        /* Aligns with the Date approximately */
    }
}

/* ============================
   Home Page Company History
   ============================ */
.history-section {
    padding: 80px 0;
    position: relative;
    background: #fff;
    overflow: hidden;
}

.history-timeline {
    position: relative;
    margin-top: 60px;
    padding-bottom: 20px;
}

/* Horizontal Line */
.history-line {
    position: absolute;
    top: 13px;
    /* Center of 25px marker roughly */
    left: 0;
    width: 100%;
    height: 4px;
    background: var(--primary-color);
    z-index: 0;
    border-radius: 2px;
}

.history-items {
    display: flex;
    justify-content: space-between;
    position: relative;
    z-index: 1;
}

.history-item {
    flex: 1;
    text-align: center;
    padding: 0 10px;
    position: relative;
}

/* Diamond Marker */
.history-marker {
    width: 26px;
    height: 26px;
    background: var(--primary-color);
    border: 3px solid #fff;
    transform: rotate(45deg);
    margin: 0 auto 25px;
    box-shadow: 0 0 0 2px var(--primary-color);
    transition: all 0.3s ease;
    cursor: pointer;
    position: relative;
    z-index: 2;
}

.history-item:hover .history-marker {
    background: var(--secondary-color);
    transform: rotate(45deg) scale(1.2);
    box-shadow: 0 0 0 2px var(--secondary-color);
}

.history-details {
    transition: transform 0.3s ease;
}

.history-item:hover .history-details {
    transform: translateY(-5px);
}

.history-year-box {
    background: var(--primary-color);
    color: #fff;
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 1.1rem;
    display: inline-block;
    padding: 8px 20px;
    border-radius: 6px;
    margin-bottom: 15px;
    position: relative;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.history-year-box::after {
    /* Arrow pointing up */
    content: '';
    position: absolute;
    top: -8px;
    left: 50%;
    transform: translateX(-50%);
    border-width: 0 8px 8px 8px;
    border-style: solid;
    border-color: transparent transparent var(--primary-color) transparent;
}

.history-content p {
    font-size: 0.95rem;
    color: #555;
    line-height: 1.5;
    max-width: 220px;
    margin: 0 auto;
}

img.history-main-img {
    border-radius: 12px;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
    margin-bottom: 0;
    max-height: auto;
    width: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

img.history-main-img:hover {
    transform: scale(1.02);
}

/* Responsive Vertical Timeline */
@media (max-width: 991px) {
    .history-items {
        flex-direction: column;
        padding-left: 0;
    }

    .history-line {
        width: 4px;
        height: 100%;
        left: 20px;
        /* Vertical line position */
        top: 0;
    }

    .history-item {
        display: flex;
        text-align: left;
        margin-bottom: 40px;
        align-items: flex-start;
        padding-left: 50px;
        /* Space for line */
    }

    .history-marker {
        position: absolute;
        left: 9px;
        /* (20px line left + 2px line half) - 13px marker half = ~9px */
        top: 0px;
        margin: 0;
    }

    .history-details {
        width: 100%;
    }

    .history-year-box {
        margin-bottom: 10px;
        display: inline-block;
    }

    .history-year-box::after {
        /* Arrow pointing left */
        border-width: 8px 8px 8px 0;
        border-color: transparent var(--primary-color) transparent transparent;
        left: -8px;
        top: 50%;
        transform: translateY(-50%);

        .history-content p {
            max-width: 100%;
            margin: 0;
        }
    }


    /* ============================
   Skeleton Loading
   ============================ */
    .lazy-product-section {
        min-height: 480px;
        /* Prevent cumulative layout shift */
    }

    /* Skeleton Effect Animation */
    @keyframes shimmer {
        0% {
            background-position: -468px 0;
        }

        100% {
            background-position: 468px 0;
        }
    }

    .skeleton-img,
    .skeleton-btn,
    .skeleton-text,
    .skeleton-rating,
    .skeleton-title,
    .skeleton-price {
        background: #f6f7f8;
        background-image: linear-gradient(to right, #f6f7f8 0%, #edeef1 20%, #f6f7f8 40%, #f6f7f8 100%);
        background-repeat: no-repeat;
        background-size: 800px 104px;
        display: inline-block;
        position: relative;
        animation-duration: 1s;
        animation-fill-mode: forwards;
        animation-iteration-count: infinite;
        animation-name: shimmer;
        animation-timing-function: linear;
        border-radius: 4px;
    }

    .skeleton-img {
        width: 100%;
        padding-bottom: 120%;
        /* Keep aspect ratio roughly 4:5 or 1:1.2 */
        display: block;
    }

    .skeleton-btn {
        height: 40px;
        background-color: #e2e2e2;
    }

    .skeleton-text {
        height: 14px;
        background-color: #e2e2e2;
        margin-right: 18px;
        /* Simulate text break */
    }

    .skeleton-rating {
        height: 14px;
        background-color: #e2e2e2;
    }

    .skeleton-title {
        height: 24px;
        background-color: #e2e2e2;
    }

    .skeleton-price {
        height: 20px;
        background-color: #e2e2e2;
    }
}

/* ============================
   Product Range Section
   ============================ */
.product-range-section {
    background: #fff;
    position: relative;
    padding-bottom: 0 !important;
}

.product-range-title {
    color: #3b6e65;
    /* Premium Deep Teal */
    font-weight: 700;
    letter-spacing: 1px;
    margin-bottom: 1.5rem;
}

.product-range-text {
    font-size: 1.25rem;
    /* ~20px */
    line-height: 1.8;
    color: #444;
}

.product-range-highlight {
    color: #3b6e65;
    font-weight: 700;
}

.product-range-highlight-dark {
    color: #111;
    font-weight: 700;
}

.product-range-img-wrapper {
    width: 100%;
    margin-top: 2rem;
    line-height: 0;
    /* Remove gap */
}

.product-range-img {
    width: 100%;
    height: auto;
    max-height: 400px;
    object-fit: cover;
    object-position: bottom;
    /* Ensure the pile is visible */
    display: block;
}