body {
  margin: 0;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  background-color: #0b1120;
  color: #EAEAEA;
  line-height: 1.6;
 /* overflow: hidden;*/
  position: relative;
  color:#004080; /* Dark Blue for body text */
  background-color: #0c1837;
  line-height: 1.2;
}

body::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 300px;
  height: 300px;

  opacity: 0.5;
  pointer-events: none;
  z-index: 0;
}

body > * {
  position: relative;
  z-index: 1;
}

body > main > div.banner-container > img {
opacity: .6;
}
h1 {
    color: #0B4F6C; /* Deep Cerulean Blue for headings */
    text-align: center;
}
/* #background {
    opacity: .5;
} */
/* Top Bar Styles */
#contact{
    color: white;
    text-align: center;
    }
#top-bar {
    background-color: #0B4F6C; /* Deep Cerulean Blue */
    color: #FFFFFF; /* White text */
    padding: 1rem 2rem;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    position: sticky; /* Makes the top bar stick on scroll */
    top: 0;
    z-index: 1100; /* Ensures it's above stars and other content */
}

#top-bar nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 1200px; /* Constrain width of nav content */
    margin: 0 auto; /* Center nav content */
}

.breathingStar {
    animation: breathing 3s ease-in-out infinite;
}

@keyframes breathing {
    0% {
        opacity: 0.6;
        transform: scale(1);
    }
    50% {
        opacity: 1;
        transform: scale(1.2);
    }
    100% {
        opacity: 0.6;
        transform: scale(1);
    }
}

.breathingStar {
    animation: breathing 3s ease-in-out infinite;
}

.logo-placeholder {
    font-size: 1.5rem;
    font-weight: bold;
}

.navigation-links {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
}

.navigation-links li {
    margin-left: 25px; /* Spacing between links */
}

.navigation-links a {
    color: #FFFFFF; /* White */
    text-decoration: none;
    font-weight: 500;
    padding: 0.5rem 0.75rem;
    border-radius: 4px;
    transition: background-color 0.3s ease, color 0.3s ease;
}

.navigation-links a:hover,
.navigation-links a:focus {
    background-color: #A0CED9; /* Powder Blue - Accent */
    color: #0B4F6C; /* Deep Cerulean Blue - for contrast on hover */
}

/* Main Content Styles */
main {
    padding: 2rem; /* Padding around the content area */
}

/* Banner Styles */
.banner-container {
    text-align: left;
    margin-bottom: 2rem;
    position: relative;
    z-index: 1100; /* Ensure banner is above background elements */
}

.banner-image {
    max-width: 100%;
    height: 250px;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    display: block;
    margin: 0 auto;
}

#content {
    max-width: 960px; /* Maximum width for the content block */
    margin: 2rem auto; /* Top/bottom margin and auto left/right for centering */
    background-color: #808080; /* Grey background for the carousel */
    padding: 2rem;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    position: relative; /* Add position for z-index to work */
    z-index: 1100; /* Higher than stars (max 1000) and nav bar (1000) */
}

/* Carousel Styles */
.carousel-container {
    position: relative;
    width: 100%;
    max-width: 940px; /* Exactly 3 cards: 3×300px + 2×20px gaps = 940px */
    margin: 0 auto; /* Center the carousel */
    overflow: hidden;
}

.carousel-track-container {
    overflow: hidden;
    width: 100%;
}

.carousel-track {
    display: flex;
    transition: transform 0.3s ease-in-out;
    gap: 20px;
}

.product-card {
  flex: 0 0 calc(33.333% - 13.33px);
  background-color: transparent;
  border-radius: 8px;
  padding: 1rem;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  text-align: left; /* Left align content */
  color: #EAEAEA;
  display: flex;
  flex-direction: column;
  position: relative; /* Added position relative for ::after pseudo-element */
  max-width: 300px;
  opacity: 1; /* Neutral by default */
  transform: scale(1); /* Neutral by default */
  transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out;
}

/* Center item styling */
.product-card.center {
  opacity: 1;
  transform: scale(1);
  z-index: 2;
}

/* Side items styling */
.product-card.side {
  opacity: 0.9; /* Subtle de-emphasis */
  transform: scale(0.98); /* Subtle size difference */
  z-index: 1;
}

.product-card img {
    width: 100%;
    aspect-ratio: 1/1; /* Force 1:1 aspect ratio (square) */
    object-fit: contain; /* Ensure entire image is visible without cropping */
    border-radius: 4px;
    margin-bottom: 1rem;
    background-color: rgba(30, 40, 60, 0); /* Translucent dark background for images */
}

.product-card h3 {
    margin: 0 0 0.5rem 0;
    color: #A0CED9; /* Light blue that matches the theme */
    font-size: 1.1rem;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5); /* Add shadow for readability */
}

.product-card p {
    margin: 0;
    font-size: 0.9rem;
    line-height: 1.4;
    color: #EAEAEA; /* Match the body text color for better readability */
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5); /* Add shadow for readability */
}

/* Add a subtle background just for the content area */
.product-card::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 40%; /* Cover approximately the text area */
    background: rgba(11, 20, 50, 0.5); /* Semi-transparent dark blue */
    border-radius: 0 0 8px 8px; /* Round bottom corners to match card */
    z-index: -1; /* Place behind the content */
}

.carousel-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background-color: #0B4F6C;
    color: white;
    border: none;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    cursor: pointer;
    font-size: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
    transition: background-color 0.3s ease, transform 0.2s ease;
}

.carousel-arrow:hover {
    background-color: #A0CED9;
    transform: translateY(-50%) scale(1.1);
}

.carousel-arrow:active {
    transform: translateY(-50%) scale(0.95);
}

.left-arrow {
    left: 4px;
}

.right-arrow {
    right: 4px;
}

.carousel-arrow.is-hidden {
    display: none;
}

/* Manufacturer Section Styles */
.manufacturers-container {
    padding: 2rem 0;
}

.manufacturer-section {
    margin: 3rem 0;
    padding: 1rem 0;
}

.manufacturer-title {
    text-align: center;
    color: #A0CED9;
    font-size: 1.8rem;
    margin-bottom: 1.5rem;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
    font-weight: 600;
    letter-spacing: 1px;
}

/* Ensure each manufacturer carousel is properly spaced */
.manufacturer-section .carousel-container {
    margin-bottom: 2rem;
}

/* Add subtle separator between manufacturer sections */
.manufacturer-section:not(:last-child)::after {
    content: '';
    display: block;
    width: 60%;
    height: 1px;
    background: linear-gradient(to right, transparent, #A0CED9, transparent);
    margin: 2rem auto;
    opacity: 0.3;
}

/* Responsive adjustments for manufacturer titles */
@media (max-width: 768px) {
    .manufacturer-title {
        font-size: 1.5rem;
        margin-bottom: 1rem;
    }
    
    .manufacturer-section {
        margin: 2rem 0;
    }
    
    .manufacturers-container {
        padding: 1rem 0;
    }
}

@media (max-width: 480px) {
    .manufacturer-title {
        font-size: 1.3rem;
        letter-spacing: 0.5px;
    }
    
    .manufacturer-section {
        margin: 1.5rem 0;
    }
}

/* Contact Form Modal Styles */
.modal {
    display: none;
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0, 0, 0, 0.7);
}

.modal-content {
    position: absolute;
    top: 5%;
    background-color: #FFFFFF;
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
    max-width: 600px;
    width: 90%;
    max-height: 80vh;
    overflow-y: auto;
}


.close {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
    cursor: pointer;
    padding: 5px 10px;
    position: relative;
    top: -10px;
    right: -5px;
    transition: color 0.3s;
}

.close:hover,
.close:focus {
    color: black;
    text-decoration: none;
}

.form-group {
    margin-bottom: 15px;
}

.form-group label {
    display: block;
    margin-bottom: 5px;
    font-weight: bold;
}

.form-group input,
.form-group textarea {
    width: 100%;
    padding: 8px;
    border: 1px solid #ddd;
    border-radius: 4px;
    box-sizing: border-box;
}

.form-actions {
    text-align: right;
    margin-top: 20px;
}

.form-actions button {
    background-color: #4CAF50;
    color: white;
    padding: 10px 15px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 16px;
}

.form-actions button:hover {
    background-color: #45a049;
}

.form-status {
    margin-top: 15px;
    padding: 10px;
    border-radius: 4px;
    display: none;
}

.form-status.success {
    display: block;
    background-color: #d4edda;
    color: #155724;
    border: 1px solid #c3e6cb;
}

.form-status.error {
    display: block;
    background-color: #f8d7da;
    color: #721c24;
    border: 1px solid #f5c6cb;
}

.product-title {
    color: #0066cc;
    transition: color 0.3s;
}

.product-title:hover {
    color: #004080;
    text-decoration: underline;
}

/* Modal Styles */
.modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 2000;
    padding: 20px;
    box-sizing: border-box;
    pointer-events: auto;
}

.modal.hidden {
    display: none;
}

.modal-content {
    background-color: #FFFFFF;
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
    max-width: 600px;
    width: 100%;
    max-height: 90vh;
    overflow-y: auto;
    position: relative;
    margin: auto;
    transform: translateZ(0); /* Force hardware acceleration for smooth centering */
    pointer-events: auto; /* Ensure modal content is clickable */
    z-index: 10000;
}

/* Responsive modal centering */
@media (max-width: 768px) {
    .modal {
        padding: 10px;
    }
    
    .modal-content {
        max-width: 95vw;
        width: 95%;
        max-height: 95vh;
    }
}

@media (max-width: 480px) {
    .modal {
        padding: 5px;
    }
    
    .modal-content {
        max-width: 98vw;
        width: 98%;
        max-height: 98vh;
        border-radius: 4px;
    }
}

/* Ensure perfect centering for contact modal specifically */
#contactModal {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
}

#contactModal .modal-content {
    position: relative !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    bottom: auto !important;
    margin: auto !important;
}

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.5rem 2rem 1rem 2rem;
    border-bottom: 1px solid black;
}

.modal-header h2 {
    margin: 0;
    color: #0B4F6C;
    font-size: 1.5rem;
}

.close-modal {
    font-size: 2rem;
    color: #666;
    cursor: pointer;
    line-height: 1;
    transition: color 0.3s ease;
    background: none;
    border: none;
    padding: 5px;
    position: relative;
    z-index: 10001;
}

.close-modal:hover {
    color: #0B4F6C;
}

.modal-body {
    padding: 2rem;
}

/* Form layout with 2-column grid for first 4 inputs */
.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    margin-bottom: 1rem;
}

.form-group {
    margin-bottom: 1rem;
}

.form-group label {
    display: block;
    margin-bottom: 0.5rem;
    color: #333;
    font-weight: 500;
}

.form-group input {
    width: 100%;
    padding: 0.75rem;
    border: 2px solid #E0E0E0;
    border-radius: 4px;
    font-size: 1rem;
    transition: border-color 0.3s ease;
    box-sizing: border-box;
}

.form-group textarea {
    width: 100%;
    padding: 0.75rem;
    border: 2px solid #E0E0E0;
    border-radius: 4px;
    font-size: 1rem;
    transition: border-color 0.3s ease;
    box-sizing: border-box;
    resize: vertical;
}

.form-group input:focus,
.form-group textarea:focus {
    outline: none;
    border-color: #0B4F6C;
}

/* Calendar and availability styles */
.availability-group {
    margin-top: 1.5rem;
    margin-bottom: 1.5rem;
    border: 1px solid #E0E0E0;
    border-radius: 8px;
    padding: 1rem;
    background-color: #f9f9f9;
}

.availability-group h3 {
    margin-top: 0;
    margin-bottom: 1rem;
    color: #0B4F6C;
    font-size: 1.1rem;
}

.calendar-container {
    margin-bottom: 1.5rem;
}

.time-slots {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.5rem;
}

.time-slot {
    display: flex;
    align-items: center;
}

.time-slot input[type="checkbox"] {
    margin-right: 0.5rem;
}

.time-slot label {
    font-size: 0.9rem;
    color: #333;
}

.form-actions {
    display: flex;
    gap: 1rem;
    justify-content: flex-end;
    margin-top: 2rem;
}

.btn {
    padding: 0.75rem 1.5rem;
    border: none;
    border-radius: 4px;
    font-size: 1rem;
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.2s ease;
    position: relative;
    z-index: 10001;
}

.btn:hover {
    transform: translateY(-1px);
}

.btn-primary {
    background-color: #0B4F6C;
    color: white;
}

.btn-primary:hover {
    background-color: #094059;
}

.btn-secondary {
    background-color: #808080;
    color: white;
}

.btn-secondary:hover {
    background-color: #666666;
}

/* Tablet Styles (e.g., screens up to 768px wide) */
@media (max-width: 768px) {
    #top-bar {
        padding: 1rem 1.5rem;
    }

    #top-bar nav {
        flex-direction: column; /* Stack logo and nav links */
        align-items: center; /* Center items when stacked */
    }

    .logo-placeholder {
        margin-bottom: 1rem; /* Space below logo when stacked */
    }

    .navigation-links {
        flex-direction: column; /* Stack links vertically */
        align-items: center; /* Center links */
        width: 100%;
    }

    .navigation-links li {
        margin-left: 0;
        margin-bottom: 0.5rem; /* Space between stacked links */
        width: 100%; /* Make list items take full width */
        text-align: center;
    }

    .navigation-links a {
        display: block; /* Make links take full width of li */
        padding: 0.75rem 1rem;
    }

    main {
        padding: 1rem;
    }

    .banner-container {
        margin-bottom: 1rem;
    }

    #content {
        padding: 1.5rem;
        margin: 1.5rem auto;
    }

    .product-card {
        flex: 0 0 calc(33.333% - 13.33px); /* Keep 3-item display on tablets */
    }
    
    .product-card img {
        aspect-ratio: 1/1; /* Maintain square ratio on tablets */
    }

    .carousel-arrow {
        width: 35px;
        height: 35px;
        font-size: 16px;
    }

    .left-arrow {
        left: -15px;
    }

    .right-arrow {
        right: -15px;
    }
}

/* Mobile Styles (e.g., screens up to 480px wide) */
@media (max-width: 480px) {
    #top-bar {
        padding: 0.75rem 1rem;
    }

    .logo-placeholder {
        font-size: 1.2rem;
    }

    .navigation-links a {
        padding: 0.5rem 0.75rem;
        font-size: 0.9rem;
    }

    main {
        padding: 0.5rem;
    }

    #content {
        padding: 1rem;
        margin: 1rem auto;
    }
    
    .carousel-container {
        max-width: 620px; /* Exactly 3 cards: 3×200px + 2×10px gaps = 620px */
    }
    
    /* Keep 3-item display on mobile with smaller cards */
    .product-card {
        flex: 0 0 calc(33.333% - 7px); /* Adjusted for mobile gap */
        padding: 0.75rem;
        max-width: 200px; /* Smaller max-width for mobile */
    }
    
    .product-card h3 {
        font-size: 0.9rem; /* Smaller font for mobile */
    }
    
    .product-card p {
        font-size: 0.8rem; /* Smaller description text */
    }

    /* Show and size carousel arrows on small screens */
    .carousel-arrow {
        display: flex; /* ensure arrows are visible on mobile */
        width: 32px;
        height: 32px;
        font-size: 14px;
    }
    /* Keep arrows inside the carousel on mobile */
    .left-arrow { left: 4px; }
    .right-arrow { right: 4px; }

    /* Swap to mobile banner: hide img and use container background */
    .banner-image { display: none; }
    .banner-container {
        /* Ensure the background image area has height on mobile */
        min-height: 238px; /* matches desktop banner height */
        background-image: url('/photos/bannerMobile.png');
        background-size: cover;
        background-position: top center; /* keep top text visible */
        background-repeat: no-repeat;
        border-radius: 8px; /* match desktop banner rounding */
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    }

    /* Prevent horizontal scroll on phones */
    html, body { overflow-x: hidden; }
}

/* High Resolution Display Styles */
/* Large Desktop Screens (1200px and up) */
@media (min-width: 1200px) {
    .carousel-container {
        max-width: 1240px; /* Exactly 3 cards: 3×400px + 2×20px gaps = 1240px */
    }
    
    .product-card {
        flex: 0 0 calc(33.333% - 13.33px);
        max-width: 400px; /* Increase from 300px */
        padding: 1.5rem; /* Increase padding */
    }
    
    .product-card img {
        margin-bottom: 1.5rem;
    }
    
    .product-card h3 {
        font-size: 1.3rem; /* Increase font size */
        margin-bottom: 1rem;
    }
    
    .product-card p {
        font-size: 1rem; /* Increase font size */
        line-height: 1.5;
    }
    
    .carousel-track {
        gap: 20px; /* Increase gap between cards */
        max-width: 650px;
    }
}

/* Extra Large Desktop Screens (1600px and up) */
@media (min-width: 1600px) {
    .carousel-container {
        max-width: 1540px; /* Exactly 3 cards: 3×500px + 2×20px gaps = 1540px */
    }
    
    .product-card {
        flex: 0 0 calc(33.333% - 13.33px);
        max-width: 500px; /* Even larger for very high res */
        padding: 2rem;
    }
    
    .product-card h3 {
        font-size: 1.5rem;
        margin-bottom: 1.2rem;
    }
    
    .product-card p {
        font-size: 1.1rem;
        line-height: 1.6;
    }
    
    .carousel-track {
        gap: 15px;
    }
    
    .carousel-arrow {
        width: 50px;
        height: 50px;
        font-size: 20px;
    }
}

/* Ultra High Resolution Screens (2000px and up) */
@media (min-width: 2000px) {
    .carousel-container {
        max-width: 1840px; /* Exactly 3 cards: 3×600px + 2×20px gaps = 1840px */
    }
    
    .product-card {
        flex: 0 0 calc(33.333% - 13.33px); /* Keep 3 cards, not 4 */
        max-width: 600px;
        padding: 2.5rem;
    }
    
    .product-card h3 {
        font-size: 1.7rem;
        margin-bottom: 1.5rem;
    }
    
    .product-card p {
        font-size: 1.2rem;
        line-height: 1.7;
    }
    
    .carousel-track {
        gap: 50px;
    }
    
    .carousel-arrow {
        width: 60px;
        height: 60px;
        font-size: 24px;
    }
    
    /* Adjust arrow positioning for larger cards */
    .left-arrow {
        left: -30px;
    }
    
    .right-arrow {
        right: -30px;
    }
}

/*
===== DEBUGGING METHODOLOGY (CARRY-OVER REFERENCE) =====
Before making any changes, SLOW DOWN and follow this process:
1. Read the error messages/logs provided carefully.
2. Ask clarifying questions about what specific issue to focus on.
3. Look at existing working code patterns to copy the same approach.
4. Make minimal, targeted changes to fix ONE issue at a time.
5. If confused about scope or priority, ASK user before proceeding.
6. Use console logs and actual error output to understand the problem state.
7. Don't assume—gather context first, then act.
Focus on: What is the SPECIFIC issue to fix right now?
*/