:root {
    --primary-color: #F89434;
    --secondary-color: #06B0BF;
    --heading-color: #1a1a1a;       /* Darker heading color */
    --text-color: #1a1a1a;
   
    --light-grey: #f8f9fa;
    --medium-grey: #e9ecef;
    --white: #ffffff;
    --border-color: #dee2e6;
    --heading-font: 'Montserrat', sans-serif;
    --body-font: 'Montserrat', sans-serif;
    --section-padding-y: 30px; /* Vertical padding */
    --layout-gap: 20px;        /* Gap for layouts */
}

/* Global Reset / Base */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}



/* --- Container --- */
.container {
    width: 100%; /* Take full width */
    max-width: 1235px; /* Maximum width constraint */
    margin-left: auto;
    margin-right: auto;
    padding-left: 15px;  /* Consistent horizontal padding */
    padding-right: 15px;
}

/* --- Utilities --- */
.section-padding {
    padding-top: var(--section-padding-y);
    padding-bottom: var(--section-padding-y);
}

.text-center {
    text-align: center;
}

.responsive-image {
    max-width: 100%; /* Ensure images don't overflow container */
    height: auto;   /* Maintain aspect ratio */
    display: block; /* Remove extra space below image */
}

.desktop-only { display: block; }
.mobile-only { display: none; }

/* --- Layout --- */
.two-column-layout {
    display: flex;
    flex-wrap: wrap; /* Allow wrapping on smaller screens before breakpoint */
    gap: var(--layout-gap);
    align-items: center; /* Default vertical alignment */
}

.two-column-layout .column {
    /* Aim for 50% width minus half the gap */
    flex: 1 1 calc(50% - (var(--layout-gap) / 2));
    min-width: 280px; /* Prevent columns from getting too narrow before wrapping */
}

/* --- Typography --- */
h1, h2, h3, h4, h5, h6 {
    color: var(--text-color);
    line-height: 1.3;
    margin-bottom: 0.75em; /* Consistent bottom margin */
    font-weight: 700; /* Default bold headings */
}

/* Adjust sizes as needed */
h1 { font-size: 2.5rem; }
h2 { font-size: 2rem; }
h3 { font-size: 1.5rem; }
h4 { font-size: 1.25rem; }

p {
    margin-bottom: 1em;
    color: var(--text-color);
}

a {
    color: var(--primary-color);
    text-decoration: none; /* Optional: remove underline */
    transition: color 0.3s ease;
}
a:hover, a:focus {
    color: #1a1a1a; /* Example hover color */
}

ul, ol {
    padding-left: 1.2em; /* Indentation for bullets/numbers */
    margin-bottom: 1em;
}
li {
/*    margin-bottom: 0.5em;*/
    color: var(--text-color);
}

/* --- Buttons --- */
.button-wrapper {
    margin-top: 25px; /* More space before buttons */
}

.button {
    display: inline-block;
    padding: 12px 28px; /* Slightly larger padding */
    text-decoration: none;
    border-radius: 5px;
    transition: background-color 0.3s ease, transform 0.2s ease;
    text-align: center;
    font-weight: 600; /* Slightly less bold */
    font-family: var(--heading-font);
    border: none; /* Assume buttons don't need borders by default */
    cursor: pointer;
}

.button-primary {
    background-color: var(--primary-color);
    color: var(--white);
}
.button-primary:hover,
.button-primary:focus {
    background-color: #d37c2c; /* Darker shade of primary */
    color: #1a1a1a;
/*    transform: translateY(-2px); /* Slight lift */*/
    outline: none; /* Remove default focus outline if customizing */
}
/* Add focus style for accessibility if removing outline */
.button-primary:focus-visible {
     box-shadow: 0 0 0 3px rgba(var(--primary-color), 0.4); /* Example focus ring */
}

.button-secondary {
    background-color: var(--secondary-color);
    color: var(--white);
}
.button-secondary:hover,
.button-secondary:focus {
    background-color: #058a97; /* Darker shade of secondary */
    color: var(--white);
    transform: translateY(-2px);
    outline: none;
}
.button-secondary:focus-visible {
     box-shadow: 0 0 0 3px rgba(var(--secondary-color), 0.4);
}


/* --- Section Specific Styles --- */


/* Highlights Section (Example structure) */
.highlight-banner {
    background-color: var(--medium-grey); /* Use a subtle background */
    padding: 20px;
    border-radius: 8px;
    margin: var(--layout-gap) 0; /* Consistent spacing */
    text-align: center;
}
.highlight-details {
    margin-top: var(--layout-gap);
}

/* Primary Products Section */
.primary-products-section .section-subtitle {
    color: var(--secondary-color); /* Lighter color for subtitle */
    margin-bottom: 1.5em;
    font-size: 1.8rem;
    text-align: center; /* Assuming subtitle is centered */
}
.feature-blocks {
    display: flex;
    flex-wrap: wrap;
    gap: var(--layout-gap);
    justify-content: center; /* Center blocks if they don't fill row */
    margin-top: 30px;
}
.feature-blocks .feature-block {
    flex: 1 1 250px; /* Allow blocks to grow, base size, wrap */
    text-align: center; /* Center content within block */
    background-color: var(--light-grey); /* Optional background */
    padding: 20px;
    border-radius: 8px;
}
.feature-icon-wrapper {
    margin-bottom: 15px;
    height: 60px; /* Fixed height */
    display: flex; /* Use flex to center icon */
    align-items: center;
    justify-content: center;
}
.feature-icon-wrapper img {
    max-height: 100%; /* Ensure icon fits height */
    width: auto;
    /* display: inline-block; */ /* Not needed with flex */
}
.feature-divider {
    border: none;
    border-top: 2px solid var(--primary-color); /* Use primary color for divider */
    width: 40px;
    margin: 15px auto; /* Center divider */
}
.feature-block h3 {
    font-size: 1.25rem; /* Slightly larger */
    color: var(--secondary-color);
    margin-bottom: 0.5em;
}

/* Market Point Sections */
.market-point-section .two-column-layout {
    align-items: flex-start; /* Align image top with text top */
}
.market-point-section .market-image {
    text-align: center;
    /* Adjust flex properties as needed based on desired image size relative to text */
    flex-basis: 200px; /* Give image a base width */
    flex-grow: 0;       /* Don't let image column grow */
    flex-shrink: 0;     /* Don't let image column shrink excessively */
    padding-top: 10px; /* Small padding to visually align better */
}
.market-point-section .market-image img {
    max-width: 100%; /* Max width relative to column */
    height: auto;
    margin: 0 auto; /* Center within column */
}
.market-point-section .market-content h3 {
    margin-bottom: 0.5em;
    color: var(--secondary-color); /* Use secondary color for these headings */
}

/* Why Visit Section */
.why-visit-content {
    margin-top: 30px;
    max-width: 800px; /* Limit text width for readability */
    margin-left: auto;
    margin-right: auto;
    text-align: center; /* Center the text block */
}
.why-visit-content h2 {
    color: var(--primary-color); /* Example color override */
}

/* Bottom CTA Section */
.cta-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    color: var(--white);
    padding: 30px;
    border-radius: 8px;
}
.cta-text {
    flex: 1 1 60%;
    min-width: 250px; /* Ensure text doesn't get too squished */
}
.cta-text h3 { /* Style heading inside CTA */
    color: var(--white);
    margin-bottom: 0.5em;
}
.cta-button-wrapper { /* Wrapper specifically for the button */
    flex-shrink: 0; /* Prevent button wrapper from shrinking */
}
/* Use a different button style for contrast? */
.cta-container .button-primary {
     /* Already defined, ensure it contrasts with CTA background */
}

.highlights-title {
         font-family: var(--heading-font);
         font-size: 24px;
         font-weight: 700;
         color: var(--secondary-color);
     }

/* --- Responsive Adjustments --- */
@media (max-width: 767px) {
    :root {
        --section-padding-y: 40px; /* Reduced padding on mobile */
        --layout-gap: 20px;       /* Reduced gap on mobile */
    }

    h1 { font-size: 2rem; }
    h2 { font-size: 1.75rem; }
    h3 { font-size: 1.3rem; }
    h4 { font-size: 1.1rem; }

    .desktop-only { display: none; }
    .mobile-only { display: block; }

    /* Stack columns */
    .two-column-layout .column {
        flex-basis: 100%; /* Make columns full width */
        flex-grow: 1; /* Ensure they take full width */
        padding-top: 30px;
    }
    /* Reverse order on mobile if needed */
     .two-column-layout.reverse-on-mobile {
        flex-direction: column-reverse;
     }

    .primary-products-section .column-text {
        /* Add margin if image comes first on desktop but second on mobile */
        /* margin-top: 30px; */
    }
     .feature-blocks .feature-block {
        flex-basis: 100%; /* Stack feature blocks */
    }


    .market-point-section .two-column-layout {
        align-items: center; /* Center items when stacked */
        flex-direction: column; /* Ensure stacking */
    }
     .market-point-section .market-image {
        flex-basis: auto; /* Reset basis */
        width: 100%;     /* Allow full width */
        margin-bottom: var(--layout-gap);
     }
     .market-point-section .market-image img {
         width: 120px; /* Smaller icon on mobile */
     }
     .market-point-section .market-content {
         text-align: center; /* Center text content on mobile */
     }

    .cta-container {
        justify-content: center;
        text-align: center;
        padding: 25px 20px; /* Adjust padding */
    }
    .cta-text {
        flex-basis: 100%; /* Full width */
        margin-bottom: 20px; /* Space before button */
    }
    .cta-button-wrapper {
        width: 100%;
    }
    .cta-container .button { /* Make button potentially full width */
        width: 100%;
        max-width: 300px; /* Optional: limit max button width */
    }
}

/* --- Custom List Styling --- */
ul.list-secondary-bullets {
    list-style: none; /* Remove default browser bullets */
    padding-left: 0;  /* Remove default indentation */
    margin-bottom: 1em; /* Keep bottom margin consistent */
}

ul.list-secondary-bullets li {
    position: relative;       /* Needed for absolute positioning of the bullet */
    padding-left: 20px;     /* Create space for the custom bullet (adjust as needed) */
    margin-bottom: 0.6em;   /* Space between list items */
    color: var(--text-color); /* Ensure text color is set */
    line-height: 1.5;       /* Adjust line-height for better spacing if needed */
}

ul.list-secondary-bullets li::before {
    content: '';              /* Essential for pseudo-elements */
    position: absolute;
    left: 0;                  /* Position the bullet at the start of the padding */
    top: 0.6em;               /* Vertically align roughly with the text (adjust as needed) */
    transform: translateY(-50%); /* More precise vertical centering */
    width: 8px;               /* Size of the bullet */
    height: 8px;              /* Size of the bullet */
    background-color: var(--secondary-color); /* Use the secondary color */
    border-radius: 50%;       /* Make it a circle */
}

.hero-decor-title {
  font-family: var(--heading-font);
  font-size: 60px;
  font-weight: 700;
  color: var(--secondary-color);
  line-height: 1.2;
  margin-bottom: 1rem;
  text-transform: uppercase;
}

.hero-decor-subtitle {
  font-family: var(--heading-font);
  font-size: 1.1rem;
  font-weight: 500;
  color: var(--text-color);
  margin-bottom: 0.5rem;
}

.main-heading {
  font-size: 30px;
  font-weight: 900;
  color: var(--secondary-color);
  margin-bottom: 30px;
}

/* --- Primary Products Section --- */
.primary-products-section {
    padding-top: var(--section-padding-y);
    padding-bottom: var(--section-padding-y);
    background-color: var(--light-grey); /* Optional: Light background for contrast */
    overflow: hidden; /* Prevent potential overflow issues */
}

.primary-products-grid {
    display: flex;
    flex-wrap: wrap; /* Allow wrapping on smaller screens */
    gap: var(--layout-gap, 40px); /* Use variable, provide fallback */
    align-items: center; /* Vertically align image and content block */
}

.primary-products-image {
    flex: 1 1 40%; /* Image takes ~40% width */
    min-width: 280px; /* Minimum width before wrapping */
    text-align: center; /* Center image if column is wider */
}

.primary-products-image img {
    max-width: 100%;
    height: auto;
    border-radius: 10px; /* Soften corners */
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1); /* Subtle shadow */
    display: inline-block; /* Allows text-align center to work */
}

.primary-products-content {
    flex: 1 1 55%; /* Content takes ~55% width */
    min-width: 300px; /* Minimum width before wrapping */
}

.primary-products-title {
    font-size: clamp(1.8rem, 4vw, 2.2rem); /* Responsive font size */
    font-weight: 700;
    color: var(--text-color); /* Default heading color */
    margin-bottom: 1.5em;
    line-height: 1.3;
}
/* Optional: Highlight part of the title */
/* .primary-products-title span { color: var(--primary-color); } */
/* Add <span> around "primary ones" in HTML if using above */


.primary-products-items {
    display: flex;
    flex-direction: column;
    gap: 30px; /* Space between product items */
}

.product-item {
    display: flex;
    gap: 20px; /* Space between icon and text */
    align-items: flex-start; /* Align top of icon with top of text */
}

.product-item-icon {
    flex: 0 0 50px; /* Icon area fixed width: Don't grow, don't shrink, base width 50px */
    height: 50px; /* Match width for square area */
    display: flex; /* Center icon inside */
    align-items: center;
    justify-content: center;
    /* background-color: var(--medium-grey); Optional background */
    /* border-radius: 50%; Optional circle background */
}

.product-item-icon img {
    max-width: 100%; /* Ensure icon fits */
    max-height: 100%;
    height: auto; /* Maintain aspect ratio */
    object-fit: contain; /* Ensure icon isn't distorted */
}

.product-item-text {
    flex: 1; /* Take remaining space */
}

.product-item-text h3 {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--secondary-color); /* Use secondary color for item titles */
    margin-bottom: 0.5em;
}

.product-item-divider {
    width: 40px;
    height: 3px; /* Make divider thicker */
    background-color: var(--primary-color); /* Use primary color for divider */
    margin: 10px 0; /* Space around divider */
    border: none; /* Remove default border if it was hr */
    border-radius: 2px; /* Slightly rounded ends */
}

.product-item-text p {
    color: var(--text-color);
    font-size: 0.95rem; /* Slightly smaller paragraph text */
    line-height: 1.7; /* More spacing for readability */
    margin-bottom: 0; /* Remove margin from last element in item */
}

/* --- Responsive Adjustments for Primary Products --- */
@media (max-width: 991px) { /* Tablet breakpoint */
    .primary-products-grid {
        gap: 30px;
    }
    .primary-products-image {
        flex-basis: 45%;
    }
    .primary-products-content {
        flex-basis: 50%;
    }
}


@media (max-width: 767px) { /* Mobile breakpoint */
    .primary-products-grid {
        flex-direction: column; /* Stack image and content */
        gap: 40px; /* Increase gap when stacked */
    }

    .primary-products-image {
        flex-basis: auto; /* Reset basis */
        width: 80%;     /* Control image width when stacked */
        max-width: 350px; /* Max width for image */
        margin: 0 auto; /* Center image */
        order: 1;       /* Display image first */
    }
    .primary-products-image img {
        box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1); /* Slightly smaller shadow */
    }

    .primary-products-content {
        flex-basis: auto; /* Reset basis */
        width: 100%;    /* Full width */
        order: 2;       /* Display content second */
        text-align: center; /* Center text content */
    }

    .primary-products-title {
        margin-bottom: 1.2em;
    }

    .primary-products-items {
        gap: 25px; /* Slightly reduce gap between items */
    }

    .product-item {
        flex-direction: column; /* Stack icon and text */
        align-items: center; /* Center items horizontally */
        gap: 15px; /* Adjust gap for stacked layout */
    }

    .product-item-icon {
        flex-basis: auto; /* Reset basis */
        margin-bottom: 5px; /* Space below icon when stacked */
    }

    .product-item-text {
        text-align: center; /* Ensure text is centered */
    }

    .product-item-divider {
        margin: 10px auto; /* Center divider */
    }
}

/* Market Overview Section */
    .market-overview-heading {
        padding-top: 30px; /* Add padding above heading */
        padding-bottom: 0px;
         background-color: var(--white);
    }
     .market-overview-heading h2 {
         font-family: var(--heading-font);
         font-size: 55px;
         font-weight: 700;
         color: var(--primary-color);
         text-align: center;
     }
     .market-overview-section {
        padding: calc(var(--section-padding) / 2) 0; /* Reduced padding for these */
        overflow: hidden;
        padding-top: 25px;
        margin-top: 25px;
        padding-bottom: 15px;
     }
     .market-overview-section:nth-of-type(odd) { background-color: var(--light-grey); }
     .market-overview-section:nth-of-type(even) { background-color: var(--white); }

     .market-overview-grid {
         display: flex;
         gap: 40px;
         align-items: center;
     }
     .market-overview-content { flex: 1; }
     .market-overview-image { flex: 0 0 260px; /* Fixed image width */ text-align: center; }
     .market-overview-image img { max-width: 100%; height: auto; border-radius: 8px; }
     .layout-image-left .market-overview-image { order: -1; }
     .market-overview-title { font-family: var(--heading-font); font-size: 1.6rem; font-weight: 700; color: var(--secondary-color); margin-bottom: 1rem; }
     .market-overview-text p, .market-overview-text strong { font-size: 16px; margin-bottom: 1rem; color: var(--text-color); }
     .market-overview-text strong { font-weight: 600; color: var(--text-color); }
     .market-overview-text p:last-child { margin-bottom: 0; }
     .market-overview-highlight { font-family: var(--heading-font); font-size: 1.1rem; font-weight: 600; color: var(--secondary-color); margin-top: 1.5rem; }

.why-visit-title {
 font-family: var(--heading-font);
 font-size: 24px;
 font-weight: 700;
 color: var(--secondary-color);
 margin-bottom: 1rem;
}

.why-visit-content strong {
  font-weight: 600;
  color: var(--secondary-color);
  display: block;
  margin-top: 0.5rem;
  margin-bottom: 0.25rem;
}

/* Bottom CTA Section (Re-usable style) */
 .bottom-cta-section {
    padding: 40px 0;
    background-color: var(--light-grey); /* Dark background */
    color: var(--white);
}
.bottom-cta-content { display: flex; justify-content: space-between; align-items: center; gap: 20px; }
.bottom-cta-text { flex-grow: 1; font-size: 1.1rem; line-height: 1.5; }
.bottom-cta-text strong { font-weight: 600; }
.bottom-cta-button .cta-button {
 background-color: var(--primary-color);
 color: var(--white);
 border-color: var(--primary-color);
}
.bottom-cta-button .cta-button:hover {
  color: #1a1a1a;
}

.bottom-cta-text p {
  color: #1a1a1a;
  font-size: 16px;
}

 .cta-button.outline {
     background-color: transparent;
     color: var(--primary-color);
 }
 .cta-button.outline:hover {
     background-color: var(--primary-color);
     color: var(--white);
 }

.cta-button {
  display: inline-block;
  padding: 10px 25px;
  background-color: var(--primary-color);
  color: var(--white);
  border: 2px solid var(--primary-color);
  border-radius: 5px;
  font-family: var(--heading-font);
  font-size: 0.9rem;
  font-weight: 600;
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  cursor: pointer;
  transition: background-color 0.3s ease, color 0.3s ease, transform 0.2s ease;
  text-align: center;
}


/*fffffffffffffffff*/
.image-container {
    position: relative;
/*    width: 500px;  /* Adjust as needed */
    height: 410px; /* Adjust as needed */
/*    border: 1px solid #ccc;*/
    overflow: hidden; /* Crucial for Ken Burns effect */
/*    box-shadow: 0 5px 15px rgba(0,0,0,0.2);*/
    border-radius: 15px; /* Optional rounded corners */
}

.image-container .image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0; /* Start transparent */

    /* --- Apply MULTIPLE animations --- */
    /* Format: animation: name duration timing-function delay iteration-count direction fill-mode; */
    /* We list both animations separated by commas */
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
    /* Set a faster total duration for the cycle */
    animation-duration: 8s; /* e.g., 8 seconds total cycle (4s per image) */
}

/* --- Keyframe Definitions --- */

/* Faster Crossfade Keyframes */
/* Image 1: Visible 0% -> 48%, Fades Out 48% -> 52%, Hidden 52% -> 100% */
@keyframes crossfade1 {
    0%    { opacity: 1; }
    48%   { opacity: 1; }
    52%   { opacity: 0; }
    100%  { opacity: 0; }
}

/* Image 2: Hidden 0% -> 48%, Fades In 48% -> 52%, Visible 52% -> 100% */
@keyframes crossfade2 {
    0%    { opacity: 0; }
    48%   { opacity: 0; }
    52%   { opacity: 1; }
    100%  { opacity: 1; }
}

/* Ken Burns Effect Keyframes */
/* Effect 1: Slow zoom in and pan slightly to bottom right */
@keyframes kenburns1 {
    0% {
        transform: scale(1.0) translate(0, 0);
    }
    100% {
        transform: scale(1.1) translate(-5px, 5px); /* Adjust scale and translate values */
    }
}

/* Effect 2: Slow zoom in and pan slightly to top left */
@keyframes kenburns2 {
    0% {
        transform: scale(1.0) translate(0, 0);
    }
    100% {
        transform: scale(1.1) translate(5px, -5px); /* Different direction */
    }
}


/* --- Apply Specific Animations to Images --- */

.image-container .image1 {
    /* Apply crossfade1 AND kenburns1 */
    animation-name: crossfade1, kenburns1;
    /* Start visible because crossfade1 starts at opacity 1 */
}

.image-container .image2 {
    /* Apply crossfade2 AND kenburns2 */
    animation-name: crossfade2, kenburns2;
    /* Start hidden because crossfade2 starts at opacity 0 */
}

/* --- ADDED: Light Grey Overlay --- */
.image-container::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(220, 220, 220, 0.55); /* Light Grey (Gainsboro) at 55% opacity */
    /* Adjust RGBA for different grey shade or opacity */
    /* e.g., rgba(192, 192, 192, 0.45) for Silver at 45% */
    z-index: 1; /* Position it above the images (which are z-index: auto/0) */
    pointer-events: none; /* Allow clicks/hovers to pass through */
}
/* --- End Overlay --- */

.top-button {
    display: inline-block;
    padding: 5px 10px;
    background-color: #fff;
    color: #171717;
    border: 2px solid var(--secondary-color);
    font-size: 12px;
    font-weight: 600;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    cursor: pointer;
    transition: background-color 0.3s ease, color 0.3s ease, transform 0.2s ease;
    text-align: center;
    margin-top: 10px;
}

.top-button:hover {
     background-color: var(--secondary-color);
     color: var(--white);
 }

.second-top-button {
    display: inline-block;
    padding: 5px 10px;
    background-color: var(--secondary-color);
    color: var(--white);
    border: 2px solid var(--secondary-color);
    font-size: 12px;
    font-weight: 600;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    cursor: pointer;
    transition: background-color 0.3s ease, color 0.3s ease, transform 0.2s ease;
    text-align: center;
    margin-top: 10px;
}

.second-top-button:hover {
     background-color: var(--white);
     color: #171717;
 }