/* ---------- IMAGE SCROLL SECTION ---------- */
.cw_image_section {
  width: 100%;
  padding: 40px 20px;
  background: #f8f8f8;
}

/* horizontal scroll row */
.cw_image_row {
  display: flex;
  gap: 20px;
  overflow-x: auto;
  overflow-y: hidden;
  padding-bottom: 10px;
  scroll-behavior: smooth;
}

/* image card */
.cw_image_card {
  flex: 0 0 auto;
  width: 380px;
  height: 520px;
  border-radius: 12px;
  overflow: hidden;
  background: #ddd;
}

/* image fit */
.cw_image_card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ---------- THIN BLACK SCROLLBAR ---------- */
.cw_image_row::-webkit-scrollbar {
  height: 6px;
}

.cw_image_row::-webkit-scrollbar-track {
  background: #e0e0e0;
}

.cw_image_row::-webkit-scrollbar-thumb {
  background: #000;
  border-radius: 10px;
}

/* Firefox */
.cw_image_row {
  scrollbar-width: thin;
  scrollbar-color: #000 #e0e0e0;
}

/* ---------- RESPONSIVE ---------- */
@media (max-width: 900px) {
  .cw_image_card {
    width: 80vw;
    height: 420px;
  }
}

@media (max-width: 420px) {
  .cw_image_card {
    width: 90vw;
    height: 360px;
  }
}

    /* =========================================================================
   1. BASE STYLES & LAYOUT
   ========================================================================= */

/* Use a background image or color for the hero section */
.hero-section {
    padding: 100px 0; /* Vertical padding */
    background-color: #f8f8f8; /* Light background for contrast */
    color: #333;
    min-height: 80vh; /* Ensure it takes up most of the viewport height */
    display: flex;
    align-items: center; /* Vertically center content */
}

/* Ensure the content container uses flexbox for the main text/image split */
.hero-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 40px; /* Space between the text and image */
    max-width: 1200px; /* Assuming a standard max container width */
    margin: 0 auto;
    padding: 0 20px; /* Horizontal padding for container */
}

.hero-text {
    flex: 1; /* Allows text to take up available space */
    max-width: 550px;
}

/* Contact Page Specific Adjustments */
.contact-hero {
    background: linear-gradient(135deg, #e9ecef 0%, #ffffff 100%);
    color: #000;
}

/* =========================================================================
   2. TYPOGRAPHY AND DETAIL STYLING
   ========================================================================= */

.hero-text h1 {
    font-size: 3.5rem; /* Large, modern title */
    font-weight: 700;
    line-height: 1.1;
    margin-bottom: 20px;
}

.hero-text p {
    font-size: 1.15rem;
    line-height: 1.6;
    margin-bottom: 40px;
    color: #555;
}

/* =========================================================================
   3. BUTTON STYLING (ASSUMING GLOBAL CLASSES)
   ========================================================================= */

.hero-buttons {
    display: flex;
    gap: 15px; /* Space between buttons */
}

.btn {
    padding: 12px 25px;
    text-decoration: none;
    border-radius: 4px;
    font-weight: 600;
    transition: all 0.3s ease;
    text-align: center;
}

.btn-primary {
    background-color: #000000;
    color: #ffffff;
    border: 1px solid #000000;
}

.btn-primary:hover {
    background-color: #333333;
    transform: translateY(-2px);
}

.btn-outline {
    background-color: transparent;
    color: #000000;
    border: 1px solid #000000;
}

.btn-outline:hover {
    background-color: #000000;
    color: #ffffff;
    transform: translateY(-2px);
}

/* =========================================================================
   4. IMAGE PLACEHOLDER (VISUAL ELEMENT)
   ========================================================================= */

.hero-image-placeholder {
    flex: 1; /* Takes the other half of the space */
    height: 400px; /* Fixed height for visual consistency */
    max-width: 45%;
    border-radius: 8px;
    background-color: #cccccc; /* Placeholder grey */
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    /* For the contact page, you might want a clean, simple illustration */
}

/* Example: Specific styling for the contact hero image */
.contact-image {
    background-image: url('path/to/your/contact/illustration.jpg'); 
    background-size: cover;
    background-position: center;
    /* Optional: Add a simple, abstract SVG background if no image is used */
    background-color: #ddd;
}

/* =========================================================================
   5. RESPONSIVENESS (Mobile and Tablet)
   ========================================================================= */

/* Tablet and smaller desktops */
@media (max-width: 992px) {
    .hero-text h1 {
        font-size: 2.8rem;
    }
    
    .hero-content {
        flex-direction: column; /* Stack text and image vertically */
        text-align: center;
    }

    .hero-text, 
    .hero-image-placeholder {
        max-width: 100%; /* Allows elements to take full width */
    }

    .hero-image-placeholder {
        order: -1; /* Place image above text on mobile */
        height: 300px;
        margin-bottom: 30px;
    }

    .hero-buttons {
        justify-content: center; /* Center buttons on mobile */
    }
}

/* Small mobile devices */
@media (max-width: 576px) {
    .hero-text h1 {
        font-size: 2rem;
    }

    .hero-section {
        padding: 60px 0;
        min-height: auto;
    }

    .hero-buttons {
        flex-direction: column; /* Stack buttons vertically for tiny screens */
    }

    .btn {
        width: 100%;
        margin-top: 5px;
    }
}