:root {
    --primary-color: #000;
    --secondary-color: #1a1a1a;
    --heading-color: #000;       /* 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 */
    --text-bg-color: #212529;
}


/* 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(--white);
}

.nav-item.active{
/*    background-color: var(--text-bg-color)!important;*/
 background-color: #979797 !important;
}
/* --- 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;
 }

.header-area .top-header-area{background-color: #d99e2a!important;}
.top-button{border: 2px solid #000!important;}
.top-button:hover{background-color: #000000!important; border: 2px solid #000!important;}
.second-top-button{background-color: #000000!important; border: 2px solid #000000!important;}
.second-top-button:hover{background-color: #fff!important; border: 2px solid #fff!important;}
.social-icon-img { filter: grayscale(100%);  -webkit-filter: grayscale(100%);}
.logo.ihgf-logo-outer-box img.ihgf-logo-img { height: 97px!important; margin: 8px 0!important;}
.logo.date-outer-box img.ihgf-date-img { height: 94px!important; margin: 8px 0!important;}
.nav-area.nav-area-three .main-nav nav .navbar-nav .nav-item a{color: #000;}
.nav-area .navbar-area .main-nav nav .navbar-nav .nav-item a:hover{color: #000000!important;}
h2.card-header-top{background-color: #d99e2a!important;}
main.my-form-outer-box .card-header{background-color: #d99e2a!important; color: #000000!important;}
.disabled-link {pointer-events: none; opacity: 0.6; cursor: not-allowed; }


.prg-count-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--grid-gap-vertical, 30px) var(--grid-gap-horizontal, 20px);
  padding: 30px 15px;
  background-color: #ae832d;
}


.container { /* Reusable container */
    max-width: 1235px;
    margin:0 auto;
    padding: 0 20px;
    width: 100%;
}

/* --- .prg-count Component --- */


/* Individual Count Item */
.prg-count {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  position: relative;
/*  background-color: #444; /* Optional background */*/
/*  padding: 15px 10px;*/
  border-radius: 5px; /* Optional rounded corners */

  /* --- DEFAULT: Large Screens (4 columns) --- */
  /* Calculate width for 4 columns, accounting for horizontal gap */
  /* Width = (100% - 3 * gap) / 4 */
  flex-basis: calc(25% - (var(--grid-gap-horizontal, 20px) * 3 / 4));
  /* Alternative simpler calc (adjust gap if needed): flex-basis: calc(25% - var(--grid-gap-horizontal, 20px)); */
  flex-grow: 0; /* Prevent items from growing */
  min-width: 130px; /* Prevent items from becoming too narrow */
}

/* Vertical Separator Line (Desktop - between columns) */
/* Apply to items that are NOT the last in a row of 4 */
.prg-count:not(:nth-child(4n))::after {
  content: '';
  position: absolute;
  top: 15%;
  bottom: 15%;
  /* Position separator in the middle of the horizontal gap */
  right: calc(-1 * var(--grid-gap-horizontal, 20px) / 2 - 1px); /* Adjusted slightly */
  width: 1px;
  background-color: var(--separator-color, #fff);
  z-index: 1;
}
/* Hide separator after the very last item regardless */
.prg-count:last-child::after {
    content: none;
}


/* Count Wrapper */
.prg-count .count-wrapper {
  display: flex;
  align-items: baseline;
  order: 1;
  margin-bottom: 8px;
}

/* Count Number */
.prg-count .count {
  color: var(--text-color-light, #fff);
  font-size: 30px; /* Base font size */
  font-weight: 600;
  line-height: 1.1;
}

/* Heading Text */
.prg-count .prg-count-heading {
  font-size: 15px; /* Base font size */
  color: var(--text-color-light, #fff);
  display: block;
  line-height: 1.4;
  margin: 0;
  text-transform: uppercase;
  font-weight: 400;
  order: 2;
}

/* --- Responsive Styles --- */

/* Medium Screens & Smaller (Switch to 2 columns) */
@media screen and (max-width: 992px) {
  :root {
      /* Can adjust gap specifically for this breakpoint if needed */
      /* --grid-gap-horizontal: 25px; */
      /* --grid-gap-vertical: 25px; */
  }

  .prg-count-container {
       /* Adjust container padding if needed */
       padding: 25px 10px;
  }

  .prg-count {
    /* --- Calculate width for 2 columns --- */
    flex-basis: calc(50% - (var(--grid-gap-horizontal, 20px) / 2));
    min-width: 120px; /* Adjust min-width if needed */
  }

  /* --- Adjust Separators for 2 columns --- */
  /* 1. Remove the default separators (that were applied to non-4th items) */
  .prg-count:not(:nth-child(4n))::after {
    content: none;
  }
   /* 2. Add separators ONLY after ODD items (left column items) */
  .prg-count:nth-child(odd)::after {
    content: ''; /* Re-add content */
    position: absolute;
    top: 15%;
    bottom: 15%;
    right: calc(-1 * var(--grid-gap-horizontal, 20px) / 2 - 1px); /* Recalculate based on current gap */
    width: 1px;
/*    background-color: var(--separator-color, #fff);*/
    z-index: 1;
  }
  /* 3. Ensure the last item still has no separator */
   .prg-count:last-child::after {
       content: none;
   }

  /* Adjust font sizes */
  .prg-count .count {
    font-size: 26px;
  }

  .prg-count .prg-count-heading {
    font-size: 14px;
  }
}

/* Small Screens (Maintain 2 columns, adjust fonts/padding) */
@media screen and (max-width: 576px) {
    :root {
        /* Further adjust gaps if needed for small screens */
        --grid-gap-horizontal: 15px;
        --grid-gap-vertical: 20px;
    }

    .prg-count-container {
        padding: 20px 5px; /* Reduce padding */
    }

    .prg-count {
        /* Recalculate width based on potentially smaller gap */
        flex-basis: calc(50% - (var(--grid-gap-horizontal, 15px) / 2));
        padding: 12px 8px; /* Reduce padding */
        min-width: 100px; /* Further reduce min-width */
    }

    /* Recalculate separator position */
     .prg-count:nth-child(odd)::after {
         right: calc(-1 * var(--grid-gap-horizontal, 15px) / 2 - 1px);
     }

    /* Adjust font sizes */
    .prg-count .count {
        font-size: 22px;
    }

    .prg-count .prg-count-heading {
        font-size: 12px; /* Smaller heading */
    }
}

/* --- Fullscreen Popup --- */
.popup {
    display: none; /* Initially hidden */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.85); /* Dark overlay */
    justify-content: center;
    align-items: center;
    z-index: 9999; /* High z-index */
    opacity: 0;
    transition: opacity 0.5s ease;
    overflow: hidden; /* Prevent potential scrollbars */
}

.popup.show {
    display: flex; /* Use flex to enable alignment */
    opacity: 1;
}

.popup .close-btn {
    position: absolute;
    top: 20px; /* Slightly more space */
    right: 20px;
    font-size: 28px; /* Adjust size */
    line-height: 1;
    color: #fff;
    background-color: rgba(0, 0, 0, 0.5); /* Semi-transparent background */
    border: none;
    /* border-radius: 50%; */ /* Uncomment for circular button */
    width: 40px;
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    z-index: 10001; /* Above image */
    transition: background-color 0.3s ease, transform 0.2s ease;
}

.popup .close-btn:hover {
    background-color: rgba(0, 0, 0, 0.8);
    transform: scale(1.1); /* Slight scale on hover */
}

.popup .animated-image {
    width: 85vw;  /* Use vw for width relative to viewport */
    max-width: 1200px; /* Max width to prevent excessive size on large screens */
    height: 85vh; /* Use vh for height relative to viewport */
    max-height: 800px; /* Max height */
    object-fit: contain;  /* Maintain aspect ratio */
    /* border-radius: 10px; */ /* Uncomment if desired */
    animation: zoomWithEffect 1s ease-in-out forwards; /* Shorten duration, adjust timing */
}

@keyframes zoomWithEffect {
    0% {
        transform: scale(0.8) rotate(-2deg); /* Start smaller and slightly rotated */
        opacity: 0;
    }
    /* Removed midpoint - simpler 2-step animation */
    100% {
        transform: scale(1) rotate(0deg); /* End at normal size */
        opacity: 1;
    }
}

/* Mobile adjustments for Popup */
@media (max-width: 768px) {
    .popup {
        /* Keep centered alignment */
         /* align-items: flex-start; */ /* Original - remove if center is okay */
         /* padding-top: 10px; */ /* Original - remove if center is okay */
    }

    .popup .animated-image {
        width: 90vw;  /* Slightly larger viewport width percentage */
        height: 70vh; /* Adjust height */
        max-width: 90%; /* Ensure it fits */
        max-height: 70%;
    }

    .popup .close-btn {
        font-size: 24px;
        top: 15px;
        right: 15px;
        width: 35px;
        height: 35px;
    }
}

/* --- Category Slider (Swiper) --- */
.category-slider-section {
    max-width: 1300px;
    margin: 0px auto; /* More vertical margin */
    position: relative;
    padding: 0 50px; /* Space for outside buttons */
}

.swiper.category-swiper {
    width: 100%;
    height: auto;
    overflow: hidden; /* Hide slides outside container */
    position: static; /* Ensure it doesn't interfere with button positioning */
}

.swiper.category-swiper .swiper-wrapper {
     align-items: stretch; /* Make slides same height if needed */
}

.swiper.category-swiper .swiper-slide {
    text-align: center;
    font-size: 14px;
    height: auto; /* Let content define height */
    display: flex; /* Use flex for alignment within slide */
    justify-content: center;
    align-items: center; /* Vertically center content */
}

.swiper.category-swiper .swiper-slide figure.swiper-slide-inner {
    margin: 0;
    padding: 15px 5px; /* More vertical padding */
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    height: 100%; /* Allow figure to fill slide height */
    justify-content: center; /* Center content vertically within figure */
}

.swiper.category-swiper .swiper-slide img.swiper-slide-image {
    display: block;
    height: 60px; /* Slightly smaller? Adjust as needed */
    width: auto;
    max-width: 100%;
    object-fit: contain;
    margin-bottom: 10px; /* More space */
    /* Removed font-weight: 800; - not applicable to img */
}

.swiper.category-swiper .swiper-slide figcaption.swiper-slide-caption {
    color: var(--text-color-medium);
    font-weight: 500;
    line-height: 1.4; /* Improved line height */
    width: 100%;
    font-size: 13px; /* Slightly larger caption */
}

/* Custom Navigation Buttons (Consolidated & Positioned) */
.category-slider-section .custom-nav-button { /* Specific to this section */
    position: absolute;
    top: 65%;
    transform: translateY(-50%);
    z-index: 10;
    cursor: pointer;
    width: 32px;  /* Match SVG width */
    height: 50px; /* Match SVG height */
    display: flex;
    align-items: center;
    justify-content: center;
    /* Add subtle background/styling if needed */
    /* background-color: rgba(255, 255, 255, 0.7); */
    /* border-radius: 50%; */
    transition: opacity 0.3s ease;
}

.category-slider-section .swiper-button-prev.custom-nav-button {
    left: 10px; /* Position inside the padding */
}

.category-slider-section .swiper-button-next.custom-nav-button {
    right: 10px; /* Position inside the padding */
}

/* Hide default Swiper arrows pseudo-elements */
.swiper.category-swiper .swiper-button-next::after,
.swiper.category-swiper .swiper-button-prev::after {
    display: none;
}

.category-slider-section .custom-nav-button svg {
    display: block;
    width: 100%;
    height: 100%;
    /* Optional: Style SVG fill/stroke */
    /* fill: var(--primary-color); */
}

.category-slider-section .swiper-button-disabled {
    opacity: 0.35;
    cursor: auto;
    pointer-events: none;
}

/* Hide custom buttons on smaller screens */
 @media (max-width: 767px) {
    .category-slider-section .custom-nav-button {
        display: none; /* Hide buttons */
    }
     .category-slider-section {
        padding: 0 15px; /* Adjust padding when buttons are hidden */
     }
     .swiper.category-swiper .swiper-slide img.swiper-slide-image {
         height: 50px; /* Smaller icons on mobile */
     }
     .swiper.category-swiper .swiper-slide figcaption.swiper-slide-caption {
         font-size: 12px; /* Smaller caption */
     }
}

/* Swiper Pagination Styles (If used) */
 .swiper.category-swiper .swiper-pagination {
    position: static; /* Default or adjust as needed */
    margin-top: 20px; /* Space above pagination */
 }
 .swiper.category-swiper .swiper-pagination-bullet {
    background: #ccc;
    opacity: 1;
    width: 8px;
    height: 8px;
    transition: background-color 0.3s ease, transform 0.3s ease;
}
.swiper.category-swiper .swiper-pagination-bullet-active {
    background: var(--primary-color); /* Use theme color */
    transform: scale(1.2);
}


/* --- Why Visit Us Section --- */
.visit-us-section {
    padding: 40px 0; /* Increased padding */
    /* background-color: var(--background-light); */ /* Optional background */
    overflow: hidden;
}

/* Using the reusable .container */
.visit-us-section .container {
     /* container handles max-width, padding */
}

.visit-us-grid {
    display: flex;
    gap: 40px;
    align-items: flex-start;
}

.visit-us-left {
    flex: 0 0 280px; /* Slightly wider fixed width */
    font-family: var(--heading-font);
    line-height: 1.0; /* Tighter line height for large text */
    padding-top: 5px; /* Fine-tune vertical alignment */
    color: var(--heading-color); /* Use heading color variable */
}

.visit-us-left .section-subtitle {
    font-size: clamp(3rem, 8vw, 4.375rem); /* Responsive font size (70px large) */
    font-weight: 700;
    margin: 0;
    color: var(--primary-color); /* Accent color */
    display: block; /* Ensure it takes its own line */
}

.visit-us-left .section-title-large {
    font-size: clamp(4rem, 11vw, 5.625rem); /* Responsive font size (90px large) */
    font-weight: 800;
    margin: 0;
    text-transform: uppercase;
    color: var(--heading-color); /* Use heading color variable */
    display: block; /* Ensure it takes its own line */
}

.visit-us-right {
    flex: 1;
    min-width: 0;
}

.visit-us-right .content-title {
    font-family: var(--heading-font);
    font-size: clamp(1.5rem, 4vw, 1.75rem); /* Responsive font size (28px large) */
    font-weight: 700;
    color: var(--heading-color);
    margin-top: 0;
    margin-bottom: 15px; /* Space below title */
    line-height: 1.3;
}

.visit-us-right .content-text p,
.visit-us-right .content-text ul {
    font-size: 1rem; /* 16px base */
    color: var(--text-color-medium); /* Use variable */
    margin-bottom: 1em; /* Consistent paragraph spacing */
    line-height: 1.7; /* More readable line height */
}
.visit-us-right .content-text p:last-child,
.visit-us-right .content-text ul:last-child {
    margin-bottom: 0;
}

.visit-us-right .content-text strong {
    font-weight: 700; /* Bolder */
    color: var(--text-color-dark); /* Use variable */
    /* Removed display: inline-block; margin: 0; */
}

.visit-us-right .content-text ul {
    list-style: none;
    padding-left: 0; /* Remove default padding */
    margin-top: 1em; /* Space before list */
}

.visit-us-right .content-text li {
    position: relative;
    padding-left: 25px; /* Space for custom bullet + text */
    margin-bottom: 10px; /* Space between list items */
    font-size: 1rem; /* Match paragraph font size */
    color: var(--text-color-dark);
    line-height: 1.2;
}

.visit-us-right .content-text li::before {
    content: '';
    position: absolute;
    left: 5px; /* Position bullet */
    top: 0.6em; /* Align vertically */
    transform: translateY(-50%);
    width: 6px; /* Slightly larger bullet */
    height: 6px;
    background-color: var(--primary-color);
    border-radius: 50%;
}

.button-wrapper {
    text-align: right; /* Default alignment */
    margin-top: 30px;
}

.cta-button {
    display: inline-flex;
    align-items: center;
    padding: 12px 25px; /* Adjust padding */
    background-color: var(--primary-color);
    color: var(--white);
    border: none;
    border-radius: 5px;
    font-family: var(--heading-font);
    font-size: 0.9rem; /* 14.4px */
    font-weight: 600;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 0.8px; /* More spacing */
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.cta-button:hover {
    background-color: #d37c2c; /* Darker shade of primary */
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15); /* Add subtle shadow on hover */
}

.cta-button .button-text {
    margin-right: 8px; /* Adjust space */
}

.cta-button .button-icon svg {
    width: 16px; /* Adjust icon size */
    height: 16px;
    fill: currentColor;
    vertical-align: middle;
}

/* Responsive for Visit Us */
@media (max-width: 992px) {
    .visit-us-grid {
        gap: 30px; /* Reduce gap */
    }
    .visit-us-left {
        flex: 0 0 220px; /* Narrower left column */
    }
     /* Font sizes already responsive via clamp() */
}

@media (max-width: 767px) {
    .visit-us-grid {
        flex-direction: column;
        gap: 30px;
        align-items: center; /* Center items horizontally */
    }

    .visit-us-left {
        flex-basis: auto;
        text-align: center;
        margin-bottom: 20px; /* Space below title block */
        padding-top: 0;
    }

    .visit-us-right {
        width: 100%; /* Ensure right column takes full width */
    }

    .visit-us-right .content-title {
        text-align: center; /* Center title */
    }

    .visit-us-right .content-text p,
    .visit-us-right .content-text ul {
         text-align: left; /* Keep body text left-aligned */
         font-size: 0.95rem; /* Slightly smaller text on mobile */
    }
     .visit-us-right .content-text li {
        font-size: 0.95rem;
    }

    .button-wrapper {
        text-align: center; /* Center button */
    }
}


/* --- Product Gallery Section (Swiper Coverflow/Centered) --- */
.product-gallery-section {
    padding: 40px 0;
    position: relative;
    overflow: hidden; /* CRITICAL: Prevents horizontal scroll from swiper margins */
    /* background-color: #f9f9f9; */ /* Optional light background */
}

.product-gallery-section .heading-container { /* Specific container for heading */
     max-width: 1200px;
     margin: 0 auto 30px auto; /* Bottom margin */
     padding: 0 15px;
     text-align: center;
}

.product-gallery-section .section-heading { /* Shared heading style - adjust if needed */
    font-family: var(--heading-font);
    font-size: clamp(1.5rem, 5vw, 2rem); /* Responsive Heading Size */
    margin-bottom: 0.5em;
    color: var(--heading-color);
    font-weight: 800;
    text-align: center;
}
.product-gallery-section .section-subheading { /* Optional subheading */
    font-size: 1rem;
    color: var(--text-color-medium);
    max-width: 600px; /* Limit width */
    margin: 0 auto; /* Center */
}


/* Swiper Container for Gallery - Padding/Margin for Effect */
.product-gallery-swiper {
    /* Adjust padding/margin based on desired visibility of neighbor slides */
    padding: 20px 40px 40px 40px; /* Top, H, Bottom, H - Bottom padding for pagination */
    margin: 0 -40px;              /* Negative horizontal margin */
    overflow: visible; /* REQUIRED for Coverflow/Centered effect */
    position: relative;
}

.gallery-slide {
    /* Using max-width and letting Swiper calculate width often works well with slidesPerView: 'auto' */
     /* width: 65%; */ /* Remove fixed percentage width if using 'auto' */
    max-width: 320px; /* Increase max-width slightly */
    height: auto; /* Let content define height */
    transition: transform 0.5s ease, opacity 0.5s ease; /* Smoother transition */
    opacity: 0.4;
    transform: scale(0.8);
    border-radius: 12px;
    overflow: hidden; /* Clip content like image */
    box-shadow: 0 4px 15px rgba(0,0,0,0.1); /* Adjusted shadow */
    background-color: var(--white);
    cursor: grab; /* Indicate draggable */
}
.gallery-slide.swiper-slide-grabbing {
    cursor: grabbing;
}


/* Make links non-interactive for pure gallery */
.gallery-slide a {
    display: block;
    cursor: default; /* Override cursor */
    pointer-events: none; /* Disable clicking */
    text-decoration: none;
    color: inherit;
    -webkit-tap-highlight-color: transparent; /* Remove mobile tap highlight */
    outline: none;
}

/* Active/Visible States for Gallery Effect */
.gallery-slide.swiper-slide-visible {
     opacity: 0.6;
     transform: scale(0.85);
}
.gallery-slide.swiper-slide-active {
    opacity: 1;
    transform: scale(1); /* Active slide is full size */
    box-shadow: 0 8px 25px rgba(0,0,0,0.15); /* Enhance shadow on active */
    cursor: default; /* Normal cursor for active slide */
}

.gallery-slide img {
    display: block;
    width: 100%;
    height: auto; /* Let aspect-ratio control height */
    aspect-ratio: 3 / 4; /* Or your desired ratio */
    object-fit: cover;
    /* Removed border-radius: 12px; - Handled by parent .gallery-slide overflow:hidden */
}

/* Pagination specific to this gallery */
.product-gallery-swiper .gallery-pagination {
    position: absolute; /* Position relative to swiper container */
    bottom: 10px; /* Position from bottom of swiper padding */
    left: 50%;
    transform: translateX(-50%);
    width: auto !important; /* Override Swiper default width */
    z-index: 5; /* Above slides but below nav if any */
}
.product-gallery-swiper .gallery-pagination .swiper-pagination-bullet {
    width: 10px;
    height: 10px;
    background-color: rgba(0, 0, 0, 0.3);
    opacity: 1;
    transition: background-color 0.3s ease, transform 0.3s ease;
    margin: 0 5px !important; /* Spacing between bullets */
}
.product-gallery-swiper .gallery-pagination .swiper-pagination-bullet-active {
     background-color: var(--primary-color); /* Use theme color */
    transform: scale(1.3); /* Slightly larger active bullet */
}

/* Responsive for Product Gallery */
 @media (max-width: 992px) {
    .product-gallery-swiper {
        padding: 20px 20px 40px 20px; /* Adjust padding */
        margin: 0 -20px; /* Adjust margin */
    }
     .gallery-slide {
        max-width: 300px; /* Adjust max width */
    }
}
@media (max-width: 767px) {
     .product-gallery-section .heading-container { margin-bottom: 20px; }
     .product-gallery-swiper {
        padding: 10px 10px 40px 10px;
        margin: 0 -10px;
    }
    .gallery-slide {
        max-width: 260px; /* Smaller max width */
        transform: scale(0.75);
    }
     .gallery-slide.swiper-slide-visible { transform: scale(0.8); }
     .gallery-slide.swiper-slide-active { transform: scale(1); }

     .product-gallery-swiper .gallery-pagination { bottom: 8px; }
     .product-gallery-swiper .gallery-pagination .swiper-pagination-bullet { width: 8px; height: 8px; margin: 0 4px !important; }
}


/* --- Standalone Heading Styles --- */
span.small-heading { /* More specific or use a class like .subheading-accent */
  display: block; /* Make it block for spacing */
  font-size: 1rem; /* 16px */
  font-weight: 700; /* Bold */
  color: var(--text-color-dark);
  letter-spacing: 1.5px; /* Adjust spacing */
  text-transform: uppercase; /* Often used for such headings */
  margin-bottom: 0.5em; /* Space below */
}

.main-heading { /* More specific class recommended, e.g., .section-main-heading */
  font-size: clamp(1.8rem, 5vw, 2.5rem); /* Responsive font size (e.g., ~40px large) */
  font-weight: 800; /* Extra Bold */
  color: var(--heading-color);
  margin-bottom: 25px; /* Adjust spacing */
  font-family: var(--heading-font);
  line-height: 1.2;
}

span.maroon { /* Class name is okay, but consider semantic name if possible */
  color: var(--primary-color); /* Use variable */
}

/* Ensure .appointment-area exists and styles are desired */
.appointment-area h4 { /* Consider a more specific class if needed */
  font-weight: 700; /* Bold */
  font-size: 1.25rem; /* ~20px */
  color: var(--text-color-dark);
  margin-bottom: 0.75em; /* Space below */
  font-family: var(--heading-font);
}

.event-name {
  font-weight: 600;
  font-size: 80px;
  color: #1A1A1A !important;
  letter-spacing: -1.5px;
  text-transform: uppercase;
}

.event-year {
  font-size: 4.5rem;
  font-weight: 600;
  color: #d99e2a !important;
  position: absolute;
  bottom: -5px;
  left: calc( (280px * 0.65 + 10px) + 15rem );
/*  transform: rotate(-8deg);*/
  line-height: 1;
  z-index: 10;
  white-space: nowrap;
  top: calc(60px);
}