/* Ensure :root variables from your main CSS are available */

:root {
    --product-service-carousel-primary-color: #007bff;
    --product-service-carousel-primary-hover-color: #0056b3; /* Darker for hover */
    --product-service-carousel-secondary-color: #6c757d;
    --product-service-carousel-light-color: #f8f9fa;
    --product-service-carousel-dark-color: #212529; /* Darker for main text */
    --product-service-carousel-text-on-dark: #ffffff;
    --product-service-carousel-text-on-light: #212529;
    --product-service-carousel-slide-bg: #ffffff;
    --product-service-carousel-nav-button-bg: rgba(0, 0, 0, 0.4);
    --product-service-carousel-nav-button-hover-bg: rgba(0, 0, 0, 0.7);
    --product-service-carousel-indicator-color: rgba(255, 255, 255, 0.5); /* More subtle inactive dots */
    --product-service-carousel-indicator-active-color: var(--product-service-carousel-text-on-dark); /* White active dot */
    --product-service-carousel-caption-bg: rgba(0, 0, 0, 0.7); /* Slightly more intense caption bg */
    --product-service-carousel-border-radius: 8px;
    --product-service-carousel-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
    --product-service-carousel-shadow-hover: 0 8px 25px rgba(0, 0, 0, 0.12);
}

/* General section styling */
.product-service-showcase-section {
    margin: 20px auto; /* More vertical margin */
    padding: 15px 15px; /* Adjusted padding */
    background-color: var(--product-service-carousel-light-color); /* Section background */
    /* Removed individual background and shadow from here, will be on container */
}

.product-service-showcase-section-title {
    text-align: center;
    font-size: 2.4rem; /* Slightly larger */
    font-weight: 700; /* Bolder */
    color: var(--product-service-carousel-dark-color);
    margin-bottom: 20px; /* More space */
}

.product-service-showcase-carousel-container {
    position: relative;
    width: 100%;
    max-width: 1400px; /* Control max width of carousel itself */
    margin: 0 auto; /* Center the carousel container */
    overflow: hidden;
    border-radius: var(--product-service-carousel-border-radius);
    /*background-color: var(--product-service-carousel-dark-color);*/ /* Dark bg for contrast with light page */
    box-shadow: var(--product-service-carousel-shadow);
}

.product-service-carousel-slides-track {
    display: flex;
    transition: transform 0.6s cubic-bezier(0.25, 0.8, 0.25, 1); /* Smoother transition */
    height: auto;
}

.product-service-carousel-slide {
    min-width: 100%;
    position: relative;
    /* Add transition for potential future individual slide animations */
    transition: opacity 0.5s ease, transform 0.5s ease;
}

.product-service-carousel-slide-image {
    display: block;
    width: 100%;
    height: auto;
    max-height: 600px; /* Can be adjusted based on typical image aspect ratios */
    aspect-ratio: auto;
    object-fit: contain;
    border-top-left-radius: var(--product-service-carousel-border-radius); /* Match container */
    border-top-right-radius: var(--product-service-carousel-border-radius); /* Match container */
    /* If caption is not overlaying, then full radius:
    border-radius: var(--product-service-carousel-border-radius);
    */
}

.product-service-carousel-slide-caption {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    /*background: linear-gradient(to top, #fff 0%, rgba(0, 0, 0, .1) 60%, rgba(0, 0, 0, 0) 100%); /* Gradient for smoother text integration */
   /* color: var(--product-service-carousel-text-on-dark);*/
    padding: 25px;
    padding-top: 50px; /* More space at top for gradient */
    padding-bottom: 35px; /* Space for indicators */
    text-align: center;
    border-bottom-left-radius: var(--product-service-carousel-border-radius); /* Match container */
    border-bottom-right-radius: var(--product-service-carousel-border-radius); /* Match container */
}

.product-service-carousel-slide-title {
    font-size: 1.75rem; /* Larger title */
    font-weight: 600;
    margin-top: 0;
    margin-bottom: 12px;
    color: var(--product-service-carousel-text-on-dark);
    text-shadow: 1px 1px 3px rgb(33, 33, 33); /* Subtle text shadow for readability */
    display: none;
}

.product-service-carousel-slide-description {
   font-size: 1rem;
    margin-bottom: 20px;
    line-height: 1.6;
    color: #22ae4d;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
    text-shadow: 1px 1px 1px #c7ff00;
    display:none;
}

.product-service-carousel-slide-cta-button {
    display: inline-block;
    background-color: #cc12a0;
    color: var(--product-service-carousel-text-on-dark);
    padding: 10px; /* More padding */
    text-decoration: none;
    border-radius: 10px; /* Pill shape */
    font-weight: 600; /* Bolder button text */
    text-transform: uppercase; /* Uppercase button text */
    letter-spacing: 0.5px;
    transition: background-color 0.3s ease, transform 0.2s ease, box-shadow 0.3s ease;
    box-shadow: 0 2px 5px rgba(0,0,0,0.15);
}

.product-service-carousel-slide-cta-button:hover,
.product-service-carousel-slide-cta-button:focus {
    /*background-color: var(--product-service-carousel-primary-hover-color);*/
    transform: translateY(-3px);
    box-shadow: 0 4px 10px rgba(var(--product-service-carousel-primary-color), 0.4);
    outline: none;
}

.product-service-carousel-nav-button {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background-color: #cd11a038;
    color: var(--product-service-carousel-text-on-dark);
    border: none;
    padding: 0;
    font-size: 1.3rem; /* Adjusted icon size */
    cursor: pointer;
    z-index: 10;
    border-radius: 50%;
    width: 45px; /* Slightly smaller */
    height: 45px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.3s ease, transform 0.2s ease;
    
}

.product-service-carousel-nav-button:hover,
.product-service-carousel-nav-button:focus {
    background-color: var(--product-service-carousel-nav-button-hover-bg);
    transform: translateY(-50%) scale(1.1); /* Scale on hover */
    outline: none;
}

.product-service-carousel-prev-button {
    left: 20px;
}

.product-service-carousel-next-button {
    right: 20px;
}

.product-service-carousel-indicators {
    position: absolute;
    bottom: 5px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    z-index: 10;
    /* Removed bar background for cleaner look on caption gradient */
}

.product-service-carousel-indicator-dot {
    width: 10px; /* Smaller dots */
    height: 10px;
    border-radius: 50%;
    background-color: var(--product-service-carousel-indicator-color);
    margin: 0 6px; /* More spacing */
    cursor: pointer;
    border: none;
    padding: 0;
    transition: background-color 0.3s ease, transform 0.2s ease;
}
.product-service-carousel-indicator-dot:hover {
    transform: scale(1.2);
}
.product-service-carousel-indicator-dot:focus {
    outline: 1px solid var(--product-service-carousel-primary-color);
    outline-offset: 2px;
}

.product-service-carousel-indicator-dot.active {
    background-color: #17ff00;
    transform: scale(1.3); /* Active dot slightly larger */
    animation-duration: 3s;
    animation-iteration-count: infinite;
    animation-name: flash;
}

/* Responsive Adjustments */
@media (max-width: 992px) {
    .product-service-carousel-slide-image {
        max-height: 650px;
        
    }
    .product-service-carousel-slide-title {
        font-size: 1.5rem;
    }
    .product-service-carousel-slide-description {
        font-size: 0.9rem;
    }
}

@media (max-width: 768px) {
    .product-service-showcase-section {
        margin-top: 20px;
        margin-bottom: 20px;
        padding: 15px 15px;
        border-radius: 0;
    }
    .product-service-showcase-section-title {
        font-size: 2rem;
    }
    .product-service-carousel-slide-image {
        max-height: 480px;
    }
    .product-service-carousel-slide-caption {
        padding: 20px;
        padding-bottom: 35px; /* Ensure space for indicators */
    }
    .product-service-carousel-slide-title {
        font-size: 1.3rem;
    }
    .product-service-carousel-slide-description {
        font-size: 0.85rem;
    }
    .product-service-carousel-nav-button {
        width: 40px;
        height: 40px;
        font-size: 1.1rem;
    }
    .product-service-carousel-prev-button { left: 10px; }
    .product-service-carousel-next-button { right: 10px; }
    .product-service-carousel-indicators { bottom: 15px; }
}

@media (max-width: 480px) {
   .product-service-showcase-section-title {
        font-size: 1.6rem;
    }
    .product-service-carousel-slide-image {
        max-height: 480px; /* Further reduce for small mobile */
    }
    /* Stack caption below image on very small screens */
    .product-service-carousel-slide-caption {
        position: relative;
        background: var(--product-service-carousel-slide-bg); /* Change background */
        color: var(--product-service-carousel-text-on-light); /* Change text color */
        padding: 20px 15px; /* Adjust padding */
        border-bottom-left-radius: 0; /* No radius if stacked */
        border-bottom-right-radius: 0;
    }
    .product-service-carousel-slide-title {
         color: var(--product-service-carousel-dark-color); /* Dark text on light bg */
         text-shadow: none; /* Remove text shadow on light bg */
    }
    .product-service-carousel-slide-description {
        color: var(--product-service-carousel-secondary-color); /* Darker grey for description */
        display: none;
    
    }
    .product-service-carousel-slide-cta-button {
        padding: 5px 10px;
        font-size: 0.9rem;
    }
    .product-service-carousel-nav-button {
        top: calc(280px / 2); /* Position relative to new max-height of image */
    }
    /* Indicators after stacked caption */
    .product-service-carousel-indicators {
        position: relative;
        /*bottom: auto;*/
        left: auto;
        transform: none;
        margin-top: 5px;
        justify-content: center;
        width: 100%;
    }
    .product-service-carousel-indicator-dot {
        background-color: #e9ecef; /* Darker inactive dots on light bg */
    }
    .product-service-carousel-indicator-dot.active {
        background-color: #17ff00; /* Primary color for active dot */
        animation-duration: 3s;
        animation-iteration-count: infinite;
        
    }
    /* ==============================================
   FIX FOR SLIDESHOW TOUCH TARGETS
============================================== */

/* Increases the size and spacing of the slideshow indicator dots */
.product-service-carousel-indicator-dot {
    width: 10px;      /* Increased width */
    height: 10px;     /* Increased height */
    margin: 0 8px;    /* Increased space between dots */
    cursor: pointer;  /* Ensures it looks clickable */
}

}



/* Ensure :root variables from your main CSS are available.
  These are examples; adjust to your theme's actual variables if different.
  You can reuse variables from the previous carousel section if they are globally defined.
*/
:root {
    --our-goal-primary-text-color: #333333; /* Same as --product-service-carousel-dark-color or similar */
    --our-goal-secondary-text-color: #555555; /* Same as --product-service-carousel-secondary-color */
    --our-goal-icon-color: #007bff; /* Example: Use your primary accent color */
    --our-goal-icon-hover-color: #0056b3; /* Darker or brighter accent for hover */
    --our-goal-section-bg-color: #ffffff; /* Or var(--product-service-carousel-slide-bg) */
    --our-goal-light-grey-bg-color: #f8f9fa; /* Page background, if section is distinct */
    --our-goal-border-color: #e0e0e0;
    --our-goal-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
    --our-goal-icon-wrapper-shadow-hover: 0 8px 20px rgba(0, 123, 255, 0.25); /* Shadow for icon wrapper on hover */
}

/* Keyframes for animations */
@keyframes fadeInUpItem {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.our-goal-showcase-section {
    padding: 20px 20px; /* Increased vertical padding */
    background-color: var(--our-goal-section-bg-color);
    margin-top: 20px;
    margin-bottom: 20px;
    border-top: 1px solid var(--our-goal-border-color);
    border-bottom: 1px solid var(--our-goal-border-color);
}

.our-goal-container {
    max-width: 1100px;
    margin: 0 auto;
    text-align: center;
}

.our-goal-section-main-title {
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--our-goal-primary-text-color);
    margin-top: 0;
    margin-bottom: 10px;
    animation-duration: 5s;
    animation-iteration-count: infinite;
    animation-name: pulse;
}

.our-goal-section-subtitle {
    font-size: 2rem;
    font-weight: 600;
    color: var(--our-goal-secondary-text-color);
    margin-top: 0;
    margin-bottom: 50px; /* Increased space before the icons grid */
    max-width: auto;
    margin-left: auto;
    margin-right: auto;
}

.our-goal-features-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 30px;
    align-items: start;
}

.our-goal-feature-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 20px 15px; /* Increased padding */
    border-radius: 8px; /* Added border-radius for potential background/shadow */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    /* Animation for load-in (can be triggered by adding a class via JS on scroll) */
    opacity: 0; /* Initial state for animation */
    animation: fadeInUpItem 0.5s ease-out forwards;
    /* Staggered animation delays (applied via JS or if you know the exact number of items) */
}
/* Example of staggered delay if you have exactly 5 items and want to do it with CSS only */
.our-goal-feature-item:nth-child(1) { animation-delay: 0.1s; }
.our-goal-feature-item:nth-child(2) { animation-delay: 0.2s; }
.our-goal-feature-item:nth-child(3) { animation-delay: 0.3s; }
.our-goal-feature-item:nth-child(4) { animation-delay: 0.4s; }
.our-goal-feature-item:nth-child(5) { animation-delay: 0.5s; }


.our-goal-feature-item:hover {
    transform: translateY(-8px); /* Lift item on hover */
    box-shadow: var(--our-goal-shadow); /* Add shadow to the whole item on hover */
}

.our-goal-feature-icon-wrapper {
    width: 90px; /* Increased size */
    height: 90px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 20px; /* Increased margin */
    border-radius: 50%; /* Circular wrapper */
    background-color: #e7f3ff; /* Light blueish background for icon wrapper */
    transition: transform 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease;
}

.our-goal-feature-item:hover .our-goal-feature-icon-wrapper {
    transform: scale(1.1); /* Scale wrapper on item hover */
    box-shadow: var(--our-goal-icon-wrapper-shadow-hover);
    background-color: #d0eaff; /* Slightly darker bg on hover */
}

.our-goal-feature-icon-wrapper i {
    font-size: 3rem; /* Increased icon size */
    color: #00a556;
    line-height: 1;
    transition: transform 0.3s ease-in-out, color 0.3s ease;
}

.our-goal-feature-item:hover .our-goal-feature-icon-wrapper i {
    transform: rotate(10deg) scale(1.05); /* Rotate and slightly scale icon on item hover */
    color: var(--our-goal-icon-hover-color); /* Change icon color on hover */
}

.our-goal-feature-text-line1 {
    font-size: 1.2rem; /* Slightly larger */
    font-weight: 700; /* Bolder for the number/first line */
    color: var(--our-goal-primary-text-color);
    margin: 0 0 5px 0;
}

.our-goal-feature-text-line2 {
    font-size: 0.9rem;
    color: var(--our-goal-secondary-text-color);
    margin: 0;
    line-height: 1.4; /* Adjusted line height */
}

/* Responsive Adjustments */
@media (max-width: 992px) {
    .our-goal-features-grid {
        grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
        gap: 25px;
    }
    .our-goal-section-main-title {
        font-size: 2rem;
    }
    .our-goal-section-subtitle {
        font-size: 1.15rem;
    }
    .our-goal-feature-icon-wrapper {
        width: 80px;
        height: 80px;
    }
    .our-goal-feature-icon-wrapper i {
        font-size: 2.7rem;
    }
}

@media (max-width: 768px) {
    .our-goal-showcase-section {
        padding: 40px 15px;
    }
    .our-goal-features-grid {
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); /* Adjust for 2-3 columns */
    }
    .our-goal-feature-icon-wrapper {
        width: 75px;
        height: 75px;
    }
    .our-goal-feature-icon-wrapper i {
        font-size: 2.5rem;
    }
}

@media (max-width: 576px) {
    .our-goal-features-grid {
         /* For 5 items, this will likely result in 2 columns, with the last item centered if grid is full width */
        grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    }
    .our-goal-feature-item {
        padding: 15px 10px;
    }
    .our-goal-section-main-title {
        font-size: 1.8rem;
    }
    .our-goal-section-subtitle {
        font-size: 1rem;
        margin-bottom: 30px;
    }
     .our-goal-feature-icon-wrapper {
        width: 70px;
        height: 70px;
    }
    .our-goal-feature-icon-wrapper i {
        font-size: 2.2rem;
    }
}
/* Ensure :root variables from your main CSS are available or define them here.
   Reusing variables from previous sections like 'our-goal' or 'product-service-carousel'
   is recommended for consistency if they are globally defined.
*/
:root {
    --our-expertise-primary-text-color: #333333; /* Consistent with --our-goal-primary-text-color */
    --our-expertise-secondary-text-color: #555555; /* Consistent with --our-goal-secondary-text-color */
    --our-expertise-card-border-color: #4CAF50; /* Green border as per image */
    --our-expertise-card-border-hover-color: #388E3C; /* Darker green for hover */
    --our-expertise-button-bg-color: #2c3e50; /* Dark blue/grey button as per image */
    --our-expertise-button-hover-bg-color: #34495e; /* Slightly lighter/different dark blue for hover */
    --our-expertise-button-text-color: #ffffff;
    --our-expertise-placeholder-bg-color: #f0f0f0; /* Light grey for placeholder */
    --our-expertise-placeholder-icon-color: #cccccc; /* Grey for placeholder icon */
    --our-expertise-section-bg-color: #ffffff; /* White background for the section */
    --our-expertise-card-bg-color: #ffffff;
    --our-expertise-shadow-light: 0 4px 10px rgba(0, 0, 0, 0.07);
    --our-expertise-shadow-hover: 0 6px 15px rgba(0, 0, 0, 0.12);
}

/* Keyframes for animations (can reuse from our_goal_section_css_v1 if globally defined) */
@keyframes fadeInUpExpertiseItem {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.our-expertise-showcase-section {
    padding: 15px;
    background-color: var(--our-expertise-section-bg-color);
    margin-top: 15px; /* Space after the previous section (e.g., "Our Goal") */
    margin-bottom: 15px;
    /* Optional: border-top: 1px solid var(--our-goal-border-color); if you want a separator */
}

.our-expertise-container {
    max-width: 1100px; /* Consistent width */
    margin: 0 auto;
}

.our-expertise-section-main-title {
    font-size: 2.2rem;
    font-weight: 700;
    color: var(--our-expertise-primary-text-color);
    text-align: left; /* As per image */
    margin-top: 0;
    margin-bottom: 15px; /* Space before the grid */
    position: relative;
}

/* Optional: Decorative underline for the title, similar to previous sections */
.our-expertise-section-main-title::after {
    content: '';
    display: block;
    width: 70px;
    height: 4px;
    background-color: var(--our-expertise-card-border-color); /* Use green for consistency */
    margin-top: 10px;
}

.our-expertise-items-grid-layout {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); /* Responsive grid, aims for 3 columns */
    gap: 30px;
}

.our-expertise-item-card {
    background-color: var(--our-expertise-card-bg-color);
    border: 1px solid var(--our-expertise-card-border-color); /* Green border */
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    padding: 25px;
    transition: transform 0.35s cubic-bezier(0.25, 0.8, 0.25, 1),
                border-color 0.35s ease,
                box-shadow 0.35s cubic-bezier(0.25, 0.8, 0.25, 1);
    opacity: 0; /* Initial state for animation */
    animation: fadeInUpExpertiseItem 0.5s ease-out forwards;
    /* Staggered animation delays (apply via JS or if the number of items is fixed) */
}
/* Example staggered delay for 6 items */
.our-expertise-item-card:nth-child(1) { animation-delay: 0.1s; }
.our-expertise-item-card:nth-child(2) { animation-delay: 0.15s; }
.our-expertise-item-card:nth-child(3) { animation-delay: 0.2s; }
.our-expertise-item-card:nth-child(4) { animation-delay: 0.25s; }
.our-expertise-item-card:nth-child(5) { animation-delay: 0.3s; }
.our-expertise-item-card:nth-child(6) { animation-delay: 0.35s; }

.our-expertise-item-card:hover {
    transform: translateY(-8px);
    border-color: var(--our-expertise-card-border-hover-color);
    box-shadow: var(--our-expertise-shadow-hover);
}

.our-expertise-item-image-placeholder {
    width: 100%;
    height: 180px; /* Or adjust to your preferred aspect ratio */
    background-color: var(--our-expertise-placeholder-bg-color);
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 20px;
    border-radius: 6px;
    transition: background-color 0.3s ease;
}
.our-expertise-item-card:hover .our-expertise-item-image-placeholder {
    background-color: #e0e0e0; /* Slightly darker placeholder on card hover */
}

.our-expertise-item-image-placeholder i {
    font-size: 3.5rem;
    color: var(--our-expertise-placeholder-icon-color);
    transition: transform 0.3s ease;
}
.our-expertise-item-card:hover .our-expertise-item-image-placeholder i {
    transform: scale(1.1);
}

.our-expertise-item-title-text {
    font-size: 1.25rem; /* Matches image style */
    font-weight: 700;   /* Bold title */
    color: var(--our-expertise-primary-text-color);
    margin-top: 0;
    margin-bottom: 10px;
}

.our-expertise-item-description-text {
    font-size: 0.95rem;
    color: var(--our-expertise-secondary-text-color);
    margin-bottom: 20px;
    flex-grow: 1; /* Ensures button aligns to bottom if descriptions have varying lengths */
    line-height: 1.5;
}

.our-expertise-item-action-button {
    background-color:#00a556;
    color: var(--our-expertise-button-text-color);
    padding: 10px 20px; /* Slightly smaller padding than previous carousel button */
    border: none;
    border-radius: 5px; /* Matches image button style */
    text-align: center;
    text-decoration: none;
    font-size: 0.95rem; /* Matches image button text size */
    font-weight: 500;
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.2s ease, box-shadow 0.3s ease;
    align-self: flex-start; /* Button aligns to the start */
    margin-top: auto; /* Pushes button to bottom if description is short */
    /* box-shadow: 0 2px 4px rgba(0,0,0,0.1); */ /* Optional: subtle shadow for button */
}

.our-expertise-item-action-button:hover,
.our-expertise-item-action-button:focus {
    background-color: #8e44ad;
    transform: translateY(-2px);
    /* box-shadow: 0 3px 6px rgba(44, 62, 80, 0.15); */ /* Optional: enhanced shadow on hover */
    outline: none;
}

/* Responsive Adjustments */
@media (max-width: 992px) { /* Adjust for 2 columns */
    .our-expertise-items-grid-layout {
        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    }
    .our-expertise-section-main-title {
        font-size: 2rem;
    }
}

@media (max-width: 768px) { /* Adjust for 1 or 2 columns depending on minmax */
    .our-expertise-section-main-title {
        font-size: 1.8rem;
        text-align: center;
    }
    .our-expertise-section-main-title::after { /* Center underline */
        margin-left: auto;
        margin-right: auto;
    }
    .our-expertise-items-grid-layout {
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); /* Might still be 2 columns, or 1 if narrow */
    }
}

@media (max-width: 576px) { /* Stack to 1 column */
    .our-expertise-items-grid-layout {
        grid-template-columns: 1fr;
    }
    .our-expertise-item-action-button {
        width: 100%; /* Full width button when cards are stacked */
    }
}
/* Ensure :root variables from your main CSS are available or define them here.
   Reusing variables from previous sections like 'our-goal' or 'product-service-carousel'
   is recommended for consistency if they are globally defined.
*/
:root {
    --our-expertise-primary-text-color: #333333;
    --our-expertise-secondary-text-color: #555555;
    --our-expertise-card-border-color: #4CAF50;
    --our-expertise-card-border-hover-color: #388E3C;
    --our-expertise-button-bg-color: #2c3e50;
    --our-expertise-button-hover-bg-color: #34495e;
    --our-expertise-button-text-color: #ffffff;
    --our-expertise-placeholder-bg-color: #f0f0f0; /* Used if actual image fails to load */
    --our-expertise-section-bg-color: #ffffff;
    --our-expertise-card-bg-color: #ffffff;
    --our-expertise-shadow-light: 0 4px 10px rgba(0, 0, 0, 0.07);
    --our-expertise-shadow-hover: 0 6px 15px rgba(0, 0, 0, 0.12);
}

/* Keyframes for animations (can reuse from our_goal_section_css_v1 if globally defined) */
@keyframes fadeInUpExpertiseItem {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.our-expertise-showcase-section {
    padding: 15px;
    background-color: var(--our-expertise-section-bg-color);
    margin-top: 15px;
    margin-bottom: 15px;
}

.our-expertise-container {
    max-width: 1100px;
    margin: 0 auto;
}

.our-expertise-section-main-title {
    font-size: 2.2rem;
    font-weight: 700;
    color: var(--our-expertise-primary-text-color);
    text-align: left;
    margin-top: 0;
    margin-bottom: 15px;
    position: relative;
}

.our-expertise-section-main-title::after {
    content: '';
    display: block;
    width: 70px;
    height: 4px;
    background-color: var(--our-expertise-card-border-color);
    margin-top: 10px;
}

.our-expertise-items-grid-layout {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
}

.our-expertise-item-card {
    background-color: var(--our-expertise-card-bg-color);
    border: 1px solid var(--our-expertise-card-border-color);
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    padding: 25px;
    transition: transform 0.35s cubic-bezier(0.25, 0.8, 0.25, 1),
                border-color 0.35s ease,
                box-shadow 0.35s cubic-bezier(0.25, 0.8, 0.25, 1);
    opacity: 0;
    animation: fadeInUpExpertiseItem 0.5s ease-out forwards;
}
/* Example staggered delay for 6 items */
.our-expertise-item-card:nth-child(1) { animation-delay: 0.1s; }
.our-expertise-item-card:nth-child(2) { animation-delay: 0.15s; }
.our-expertise-item-card:nth-child(3) { animation-delay: 0.2s; }
.our-expertise-item-card:nth-child(4) { animation-delay: 0.25s; }
.our-expertise-item-card:nth-child(5) { animation-delay: 0.3s; }
.our-expertise-item-card:nth-child(6) { animation-delay: 0.35s; }

.our-expertise-item-card:hover {
    transform: translateY(-8px);
    border-color: var(--our-expertise-card-border-hover-color);
    box-shadow: var(--our-expertise-shadow-hover);
}

.our-expertise-item-image-placeholder { /* This div still wraps the <picture> element */
    width: 100%;
    height: 180px; 
    background-color: var(--our-expertise-placeholder-bg-color); /* Fallback if images don't load */
    display: flex; /* If you want to center a broken image icon, for example */
    justify-content: center;
    align-items: center;
    margin-bottom: 20px;
    border-radius: 6px;
    overflow: hidden; /* Ensures image corners respect the border-radius */
    transition: background-color 0.3s ease;
}
.our-expertise-item-card:hover .our-expertise-item-image-placeholder {
    /* background-color: #e0e0e0; Optional: change placeholder bg on card hover */
}

.our-expertise-item-actual-image { /* Style for the <img> tag inside <picture> */
    display: block;
    width: 100%;
    height: 100%; /* Make image fill the placeholder height */
    object-fit: cover; /* Cover the area, may crop */
    transition: transform 0.3s ease;
}
.our-expertise-item-card:hover .our-expertise-item-actual-image {
    transform: scale(1.05); /* Slight zoom on image on card hover */
}


.our-expertise-item-title-text {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--our-expertise-primary-text-color);
    margin-top: 0;
    margin-bottom: 10px;
}

.our-expertise-item-description-text {
    font-size: 0.95rem;
    color: var(--our-expertise-secondary-text-color);
    margin-bottom: 20px;
    flex-grow: 1;
    line-height: 1.5;
}

.our-expertise-item-action-button {
    background-color: #00a556;
    color: var(--our-expertise-button-text-color);
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    text-align: center;
    text-decoration: none;
    font-size: 0.95rem;
    font-weight: 500;
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.2s ease, box-shadow 0.3s ease;
    align-self: center; /* <<< CHANGED TO CENTER THE BUTTON HORIZONTALLY */
    margin-top: auto; 
}

.our-expertise-item-action-button:hover,
.our-expertise-item-action-button:focus {
    background-color: #e7f3ff;
    transform: translateY(-2px);
    outline: none;
}

/* Responsive Adjustments */
@media (max-width: 992px) {
    .our-expertise-items-grid-layout {
        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    }
    .our-expertise-section-main-title {
        font-size: 2rem;
    }
}

@media (max-width: 768px) {
    .our-expertise-section-main-title {
        font-size: 1.8rem;
        text-align: center;
    }
    .our-expertise-section-main-title::after {
        margin-left: auto;
        margin-right: auto;
    }
    .our-expertise-items-grid-layout {
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    }
}

@media (max-width: 576px) {
    .our-expertise-items-grid-layout {
        grid-template-columns: 1fr;
    }
    .our-expertise-item-action-button {
        width: 100%; /* Full width button when cards are stacked */
        /* align-self: center; will still work with width: 100% to center text if text-align is also center */
    }
}
/* Ensure :root variables from your main CSS are available or define them here.
   Reusing variables from previous sections is recommended for consistency.
*/
:root {
    --service-support-primary-text-color: #333333;
    --service-support-secondary-text-color: #555555;
    --service-support-accent-color: #007bff; /* Original accent color */
    --service-support-green-accent-color: #4CAF50; /* Green for consistency in other elements if needed */
    --service-support-section-bg-color: #ffffff;
    --service-support-placeholder-bg-color: #f0f0f0;
    --service-support-border-color: #e0e0e0; /* Default border color - THIS WILL BE USED */
    --service-support-list-bullet-color: var(--service-support-green-accent-color); /* Green bullets */
    --service-support-list-item-hover-bg: #f9f9f9;
    --service-support-shadow-light: 0 4px 12px rgba(0,0,0,0.06);
    --service-support-shadow-medium: 0 6px 18px rgba(0,0,0,0.08);
}

/* Keyframes for animations */
@keyframes fadeInUpServiceSupport {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes pulseBullet {
    0% {
        transform: scale(1);
        opacity: 0.7;
    }
    50% {
        transform: scale(1.3);
        opacity: 1;
    }
    100% {
        transform: scale(1);
        opacity: 0.7;
    }
}


.service-support-detail-section {
    padding: 15px;
    background-color: var(--service-support-section-bg-color);
    margin-top: 15px;
    margin-bottom: 15px;
    border-top: 1px solid var(--service-support-border-color); 
    border-bottom: 1px solid var(--service-support-border-color); 
    box-shadow: var(--service-support-shadow-medium); 
    border-radius: 8px; 
}

.service-support-detail-container {
    max-width: 1100px;
    margin: 0 auto;
}

.service-support-detail-main-title {
    font-size: 2.4rem; 
    font-weight: 700;
    color: var(--service-support-primary-text-color);
    text-align: left;
    margin-top: 0;
    margin-bottom: 15px; 
    position: relative;
    animation: fadeInUpServiceSupport 0.5s ease-out forwards;
    opacity: 0;
}

.service-support-detail-main-title::after {
    content: '';
    display: block;
    width: 80px; 
    height: 4px;
    background-color: var(--service-support-green-accent-color); /* Title underline remains green */
    margin-top: 10px;
    border-radius: 2px; 
}

.service-support-detail-content-wrapper {
    display: flex;
    flex-wrap: wrap;
    gap: 40px; 
    align-items: center; 
}

.service-support-detail-image-column {
    flex: 1; 
    min-width: 280px; 
    animation: fadeInUpServiceSupport 0.5s ease-out 0.2s forwards;
    opacity: 0;
    border-radius: 8px; 
    overflow: hidden; 
    box-shadow: var(--service-support-shadow-light);
    transition: box-shadow 0.3s ease; 
}
.service-support-detail-image-column:hover {
    box-shadow: var(--service-support-shadow-medium); 
}

.service-support-detail-image-placeholder { 
    width: 100%;
    /* height: 350px; REMOVED fixed height */
    padding-top: 100%; /* CHANGED: Makes height equal to width (square) */
    background-color: var(--service-support-placeholder-bg-color);
    display: flex; /* Still useful if image fails and you want to center a fallback icon */
    justify-content: center;
    align-items: center;
    position: relative; /* CHANGED: Essential for absolute positioning of child image */
    overflow: hidden; 
    border-radius: inherit; 
}

.service-support-detail-actual-image {
    display: block;
    width: 100%;    /* CHANGED: Fill the placeholder */
    height: 100%;   /* CHANGED: Fill the placeholder */
    object-fit: cover; 
    transition: transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1); 
    position: absolute; /* CHANGED: Position within the square placeholder */
    top: 0;
    left: 0;
}

.service-support-detail-image-column:hover .service-support-detail-actual-image {
    transform: scale(1.08); 
}


.service-support-detail-text-column {
    flex: 1; 
    animation: fadeInUpServiceSupport 0.5s ease-out 0.4s forwards;
    opacity: 0;
}
.service-support-detail-content-wrapper > .service-support-detail-text-column:not(:first-child) {
    padding-left: 20px;
}
.service-support-detail-content-wrapper > .service-support-detail-image-column:not(:first-child) {
    padding-left: 20px; /* If image could be second, though current HTML has it first */
}


.service-support-detail-sub-title {
    font-size: 1.6rem; 
    font-weight: 700;
    color: var(--service-support-primary-text-color);
    margin-top: 0;
    margin-bottom: 15px;
}

.service-support-detail-description {
    font-size: 1.05rem; 
    color: var(--service-support-secondary-text-color);
    margin-bottom: 30px; 
    line-height: 1.7;
}

.service-support-detail-features-list {
    list-style: none;
    padding-left: 0;
    margin: 0;
}

.service-support-detail-features-list li {
    font-size: 1rem;
    color: var(--service-support-secondary-text-color);
    margin-bottom: 15px; 
    padding: 1px 5px 5px 40px; 
    position: relative;
    line-height: 1.6;
    border-radius: 6px; 
    transition: background-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
    cursor: default; 
}

.service-support-detail-features-list li:hover {
    background-color: var(--service-support-list-item-hover-bg);
    transform: translateX(5px) scale(1.01); 
    box-shadow: var(--service-support-shadow-light);
    color: var(--service-support-primary-text-color); 
}

.service-support-detail-features-list li::before {
    content: '✓'; 
    color: var(--service-support-green-accent-color); 
    font-weight: bold;
    display: flex; 
    align-items: center;
    justify-content: center;
    position: absolute;
    left: 10px; 
    top: 50%;
    transform: translateY(-50%);
    font-size: 1.1em; 
    transition: transform 0.3s ease, color 0.3s ease;
}

.service-support-detail-features-list li:hover::before {
    transform: translateY(-50%) scale(1.3); 
    color: var(--service-support-accent-color); 
}

/* Responsive Adjustments */
@media (max-width: 992px) {
    .service-support-detail-content-wrapper > .service-support-detail-text-column:not(:first-child),
    .service-support-detail-content-wrapper > .service-support-detail-image-column:not(:first-child) {
        padding-left: 10px; 
    }
    .service-support-detail-image-placeholder {
        /* If you want to maintain square on tablet, padding-top: 100% is fine.
           Or you can set a fixed height again if preferred for this breakpoint. */
        /* Example: height: 300px; padding-top: 0; */
    }
}

@media (max-width: 768px) {
    .service-support-detail-section {
        border-left: none; 
        border-right: none;
        border-radius: 0; 
    }
    .service-support-detail-main-title {
        font-size: 2rem;
        text-align: center;
    }
    .service-support-detail-main-title::after {
        margin-left: auto;
        margin-right: auto;
    }
    .service-support-detail-content-wrapper {
        flex-direction: column;
        align-items: center; 
    }
    .service-support-detail-image-column {
        width: 100%; 
        margin-bottom: 30px;
    }
    .service-support-detail-image-placeholder {
        /* For stacked view, you might want a different aspect ratio or fixed height */
        padding-top: 75%; /* e.g., 4:3 aspect ratio when stacked */
        /* Or a fixed height: height: 300px; padding-top: 0; */
    }
    .service-support-detail-text-column {
        padding-left: 0; 
        width: 100%; 
        text-align: center;
    }
    .service-support-detail-content-wrapper > .service-support-detail-text-column:not(:first-child),
    .service-support-detail-content-wrapper > .service-support-detail-image-column:not(:first-child) {
        padding-left: 0;
    }

    .service-support-detail-features-list li {
        text-align: left;
        padding-left: 40px; 
        margin-left: auto;
        margin-right: auto;
        max-width: 450px; 
    }
    .service-support-detail-features-list li::before {
        left: 15px;
    }
}

@media (max-width: 480px) {
    .service-support-detail-section {
        padding: 40px 15px;
    }
    .service-support-detail-main-title {
        font-size: 1.8rem;
    }
    .service-support-detail-sub-title {
        font-size: 1.4rem;
    }
    .service-support-detail-description {
        font-size: 0.95rem;
    }
    .service-support-detail-features-list li {
        font-size: 0.95rem;
        padding: 8px 10px 8px 35px;
    }
    .service-support-detail-image-placeholder {
        padding-top: 75%; /* Maintain aspect ratio or set fixed height */
        /* height: 250px; padding-top: 0; */
    }
}
/* Specific styles for Footer Section 1: Logo & Address */
/* Ensure your global CSS variables (like --footer-accent-primary) are defined elsewhere */

.footer-logo-address-container {
    text-align: left; /* CHANGED: Main alignment for this section's content */
}

.footer-logo {
    width: 100px; 
    height: 100px;
    margin: 5px; /* Keeps logo itself centered above the right-aligned text */
    border-radius: 5px; 
    overflow: hidden;
    box-shadow: 0 1px 5px rgba(0,0,0,0.1);
    transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow 0.4s ease;
    background-color: #fff; 
    /*border: 3px solid var(--footer-accent-primary, #0D6EFD); */
}

.footer-logo img {
    width: 100%;
    height: 100%;
    object-fit: contain; 
    padding: 5px;
}

.footer-logo:hover {
    transform: scale(1.10) rotate(3deg); 
    box-shadow: 0 8px 25px rgba(var(--footer-accent-primary-rgb, 13, 110, 253), 0.2);
}

/* Heading "Our Location" */



.footer-logo-address-container h3 { 
    color: var(--footer-heading-color, #343a40); 
    margin-bottom: 20px; 
    font-size: 1.35rem; 
    position: relative; 
    padding-bottom: 10px; 
    display: inline-flex; /* Changed to inline-flex to allow right alignment of the block */
    flex-direction: row-reverse; /* Puts icon on the right if desired, or keep row for icon left */
    align-items: center; 
    gap: 8px; 
    /* text-align: right; Inherited */
}
/* To keep icon on the left of text, but block is right aligned: */
.footer-logo-address-container h3 {
    flex-direction: row; /* Icon on left, text on right */
}


.footer-logo-address-container h3::after { 
    content: ''; 
    position: absolute; 
    bottom: 0; 
    right: 0; /* CHANGED: Underline aligns to the right */
    left: 70px; /* Reset left */
    transform: none; 
    width: 100px; 
    height: 3px; 
    background: linear-gradient(90deg, var(--footer-accent-primary, #0D6EFD), var(--footer-accent-secondary, #0A58CA)); 
    border-radius: 3px; 
}

.footer-logo-address-container h3 i { 
    color: var(--footer-accent-primary, #0D6EFD); 
    font-size: 1.1em; 
    transition: transform 0.3s ease, color 0.3s ease; 
    /* margin-left: 5px; if icon is on the right */
    margin-right: 5px; /* if icon is on the left */
}
.footer-logo-address-container:hover h3 i { 
    transform: scale(1.1) rotate(-5deg); 
    color: var(--footer-accent-secondary, #0A58CA);
}

.footer-address-content .address-block { 
    margin-bottom: 20px; 
    line-height: 1.7;
    color: var(--footer-text-muted, #6c757d); 
    /* padding-right: 5px; Optional slight indent from right */
}
.footer-address-content .address-block i {
    margin-right: 8px; /* Icon remains to the left of its text */
    color: var(--footer-accent-primary, #0D6EFD);
    font-size: 0.95rem; 
}
.footer-address-content .address-block span[itemprop] { 
     color: var(--footer-text-dark, #212529); 
}


.footer-contact-info .contact-item {
    margin-bottom: 15px; 
}

.footer-contact-info .contact-item p { 
    margin-bottom: 5px; 
}

.footer-contact-info .contact-item strong {
    color: var(--footer-heading-color, #343a40);
    display: inline-flex; 
    flex-direction: row; /* Icon on left, text on right */
    /* flex-direction: row-reverse; To put icon on the right of "Phone:" */
    align-items: center;
    font-weight: 600; 
}

.footer-contact-info .contact-item strong i { 
    margin-right: 8px; /* If icon is on the left */
    /* margin-left: 8px; If icon is on the right */
    color: var(--footer-accent-primary, #0D6EFD); 
    font-size: 0.95rem; 
}

.footer-contact-info .contact-item a {
    color: var(--footer-link-color, #0D6EFD); 
    text-decoration: none;
    transition: color 0.3s ease, text-shadow 0.3s ease, transform 0.2s ease;
    font-weight: 500;
    display: block; 
    margin-right: 28px; /* CHANGED: Indent links from the right, under their labels */
    margin-left: 0; /* Reset left margin */
    margin-bottom: 5px; 
    padding: 2px 0; 
    /* text-align: right; Inherited */
}
.footer-contact-info .contact-item a:last-child {
    margin-bottom: 0;
}

.footer-contact-info .contact-item a:hover {
    color: var(--footer-link-hover-color, #0A58CA); 
    text-decoration: underline; 
    text-shadow: none; 
    transform: translateX(-3px); /* Slight nudge on hover (to the left for right-aligned text) */
}

/* Responsive adjustments for this section */
@media (max-width: 768px) {
    .footer-logo-address-container {
        text-align: left; /* Revert to center alignment when stacked full-width */
    }
    .footer-logo-address-container h3 {
        display: flex; /* Ensure flex is still applied for icon alignment */
        justify-content: left; /* Center the heading content (icon + text) */
        flex-direction: row; /* Icon on left */
    }
    .footer-logo-address-container h3::after {
        left: 50%; /* Center the underline */
        transform: translateX(-50%); /* Center the underline */
        right: auto; /* Reset right */
    }
    .footer-contact-info .contact-item strong {
        justify-content: left; /* Center label (icon + text) */
    }
    .footer-contact-info .contact-item a {
        margin-right: 0; /* Remove specific indent when centered */
        margin-left: 0;
        text-align: left; /* Center link text */
    }
    
    
}


/* Specific styles for Footer Section 2: Products */
/* Ensure your global CSS variables (like --footer-accent-primary) are defined elsewhere */

.footer-product-list { 
    list-style: none;
    padding: 0;
    margin: 0; /* Added to reset default ul margin */
}

.footer-product-list li {
    padding: 0 0 0 25px;
    border-bottom: 1px solid var(--footer-border-color, #dee2e6);
    transition: background-color 0.3s ease, padding-left 0.3s ease, border-left-color 0.3s ease;
    position: relative;
    border-left: 3px solid transparent; 
    border-radius: 0 4px 4px 0; 
}

.footer-product-list li a { 
    color: var(--footer-text-muted, #6c757d); 
    text-decoration: none;
    display: block; 
    transition: color 0.3s ease;
}

.footer-product-list li:last-child {
    border-bottom: none;
}

.footer-product-list li::before {
    content: '\f0da'; /* Font Awesome chevron-right */
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    position: absolute;
    left: 8px; 
    top: 50%;
    transform: translateY(-50%);
    color: var(--footer-accent-primary, #0D6EFD); 
    transition: transform 0.3s ease, color 0.3s ease;
}

.footer-product-list li:hover {
    background-color: rgba(var(--footer-accent-primary-rgb, 13, 110, 253), 0.05); /* Very light accent background */
    padding-left: 35px; /* Nudge text right */
    border-left: 3px solid var(--footer-accent-secondary, #0A58CA); /* Accent left border on hover */
}

.footer-product-list li:hover a {
     color: var(--footer-link-hover-color, #0A58CA); /* Brighter text for link on hover */
}

.footer-product-list li:hover::before {
    transform: translateY(-50%) scale(1.2) translateX(3px); /* Animate icon */
    color: var(--footer-accent-secondary, #0A58CA); /* Accent icon on hover */
}

/* Ensure heading styles are inherited from global .footer-section h3 or defined if needed within a widget scope */
/* This is a fallback/example if global styles aren't picked up by the widget */

.footer-section > h3 { 
    color: var(--footer-heading-color, #343a40);
    margin-bottom: 25px; 
    font-size: 1.45rem; 
    position: relative; 
    padding-bottom: 12px; 
    display: flex; 
    align-items: center; 
    gap: 12px; 
}
.footer-section > h3::after { 
    content: ''; 
    position: absolute; 
    bottom: 0; 
    left: 0; 
    width: 60px; 
    height: 3px; 
    background: linear-gradient(90deg, var(--footer-accent-primary, #0D6EFD), var(--footer-accent-secondary, #0A58CA)); 
    border-radius: 3px; 
}
.footer-section > h3 i { 
    color: var(--footer-accent-primary, #0D6EFD); 
    font-size: 1em; 
    transition: transform 0.3s ease, color 0.3s ease; 
}
.footer-section:hover > h3 i {
    transform: scale(1.15) rotate(-8deg);
    color: var(--footer-accent-secondary);
}

/* Specific styles for Footer Section 3: Quick Contact */
/* Ensure your global CSS variables (like --footer-accent-primary, --footer-text-dark) are defined elsewhere */

.footer-service-links-container { 
    display: grid; /* CHANGED: From flex to grid */
    grid-template-columns: repeat(2, 1fr); /* CHANGED: Create 2 equal columns */
    gap: 15px; /* Gap between grid items (buttons) */
}

.footer-messenger-badge {
    display: flex; 
    align-items: center;
    justify-content: center; 
    gap: 10px; /* Adjusted gap for potentially smaller buttons in grid */
    /*background-color: var(--footer-bg-main, #ffffff); */
    color: var(--footer-accent-primary, #0D6EFD); 
    padding: 12px 15px; /* Adjusted padding slightly for grid layout */
    border-radius: 8px; 
    text-decoration: none;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    border: 1px solid var(--footer-border-color, #dee2e6); 
    box-shadow: 0 2px 5px rgba(0,0,0,0.08); 
    font-weight: 600;
    text-align: center;
    font-size: 0.9rem; /* Slightly adjust font size if needed for grid */
}

.footer-messenger-badge i {
    font-size: 1.3rem; /* Adjusted icon size slightly */
    transition: transform 0.3s ease;
}

.footer-messenger-badge:hover {
    background-color: var(--footer-bg-card, #f8f9fa); 
    color: var(--footer-accent-secondary, #0A58CA); 
    transform: translateY(-4px) scale(1.03);
    box-shadow: 0 4px 10px rgba(0,0,0,0.12); 
    border-color: var(--footer-accent-primary, #0D6EFD); 
}

.footer-messenger-badge:hover i {
    transform: rotate(12deg) scale(1.15);
}

/* Responsive adjustment for the grid on very small screens */
@media (max-width: 480px) { /* Or a suitable breakpoint for your design */
    .footer-service-links-container {
        /*grid-template-columns: 1fr;*/ /* Stack to 1 column on very small screens */
        gap: 10px; /* Adjust gap for stacked layout */
    }
    .footer-messenger-badge {
        padding: 14px 20px; /* Revert to larger padding when stacked */
        font-size: 0.95rem; /* Revert font size */
    }
    .footer-messenger-badge i {
        font-size: 1.4rem; /* Revert icon size */
    }
}


/* Fallback/Example heading styles if global .footer-section h3 styles are not picked up by the widget */
/* These might be redundant if your global styles are correctly applied. */
/*
.footer-section > h3 { 
    color: var(--footer-heading-color, #343a40);
    margin-bottom: 25px; 
    font-size: 1.45rem; 
    position: relative; 
    padding-bottom: 12px; 
    display: flex; 
    align-items: center; 
    gap: 12px; 
}
.footer-section > h3::after { 
    content: ''; 
    position: absolute; 
    bottom: 0; 
    left: 0; 
    width: 60px; 
    height: 3px; 
    background: linear-gradient(90deg, var(--footer-accent-primary, #0D6EFD), var(--footer-accent-secondary, #0A58CA)); 
    border-radius: 3px; 
}
.footer-section > h3 i { 
    color: var(--footer-accent-primary, #0D6EFD); 
    font-size: 1.4em; 
    transition: transform 0.3s ease, color 0.3s ease; 
}
.footer-section:hover > h3 i {
    transform: scale(1.15) rotate(-8deg);
    color: var(--footer-accent-secondary, #0A58CA);
}
*//* Specific styles for Footer Section 4: Follow Us */
/* Ensure your global CSS variables (like --footer-accent-primary) are defined elsewhere */

/* --- Styles for the H3 title in THIS specific "Follow Us" section --- */
.footer-section:has(.footer-social-icons) > h3 { 
    color: var(--footer-heading-color, #343a40);
    margin-bottom: 25px; 
    font-size: 1.45rem; 
    position: relative; 
    padding-bottom: 12px; 
    display: flex; 
    align-items: center; 
    justify-content: left; 
    gap: 10px; 
}

.footer-section:has(.footer-social-icons) > h3::after { 
    content: ''; 
    position: absolute; 
    bottom: 0; 
    left: 70px; 
    transform: translateX(-50%); 
    width: 60px; 
    height: 3px; 
    background: linear-gradient(90deg, var(--footer-accent-primary, #0D6EFD), var(--footer-accent-secondary, #0A58CA)); 
    border-radius: 3px; 
}

.footer-section:has(.footer-social-icons) > h3 i { 
    color: var(--footer-accent-primary, #0D6EFD); 
    font-size: 1.1em; /* Smaller icon relative to heading text */
    transition: transform 0.3s ease, color 0.3s ease; 
}
.footer-section:has(.footer-social-icons):hover > h3 i {
    transform: scale(1.15) rotate(-8deg);
    color: var(--footer-accent-secondary, #0A58CA);
}


/* --- Styles for the social icons grid --- */
.footer-social-icons {
    display: grid; 
    grid-template-columns: repeat(4, 1fr); /* Default to 4 columns */
    gap: 18px; 
    margin-top: 30px; 
    max-width: 70%; 
    margin-left: auto; 
    margin-right: auto; 
}

.footer-social-icons a {
  display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    background: #e2e2e2;
    border: 1px solid #ddd;
    /*color: var(--footer-accent-primary, #0D6EFD);*/
    font-size: 1.6rem;
    transition: all 0.3s ease-in-out;
    text-decoration: none;
    position: relative;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.08);
}

.footer-social-icons a:hover {
    background-color: var(--footer-accent-primary, #0D6EFD); 
    color: #ffffff; 
    transform: translateY(-6px) rotate(360deg) scale(1.15); 
    box-shadow: 0 8px 20px rgba(var(--footer-accent-primary-rgb, 13, 110, 253), 0.4); 
    border-color: var(--footer-accent-secondary, #0A58CA); 
}

/* Responsive adjustments for the social icons grid */
@media (max-width: 992px) { /* Tablets */
    .footer-social-icons {
        grid-template-columns: repeat(4, 1fr); 
        gap: 15px;
        max-width: 80%; 
    }
    .footer-social-icons a {
        font-size: 1.5rem; /* Slightly smaller but still big for 4 columns */
    }
}

@media (max-width: 768px) { /* Smaller tablets and large mobiles - NOW 4 columns */
    .footer-social-icons {
        grid-template-columns: repeat(4, 1fr); /* CHANGED: 4 columns for mobile */
        gap: 12px; /* Reduced gap to fit 4 columns */
        max-width: 90%; /* Increased max-width to give more space to 4 columns */
    }
     .footer-social-icons a {
        font-size: 1.3rem; /* CHANGED: Adjusted icon size for 4 columns on mobile, still relatively big */
    }
}

@media (max-width: 480px) { /* Small mobiles - ALSO 4 columns */
    .footer-social-icons {
        grid-template-columns: repeat(4, 1fr); /* CHANGED: 4 columns for small mobile */
        gap: 8px;  /* Further reduced gap */
        max-width: 70%; /* Use more width to fit 4 icons */
    }
     .footer-social-icons a {
        font-size: 1.1rem; /* CHANGED: Adjusted for very small screens with 4 columns */
    }
}



/* CSS for Service and Support Page Section (Enhanced Styling) */

:root {
    --ss-page-primary-accent: #0D6EFD;      /* Primary Blue Accent */
    --ss-page-secondary-accent: #0A58CA;  /* Darker Blue for hover/gradients */
    --ss-page-primary-accent-rgb: 13, 110, 253; /* RGB for RGBA usage */

    --ss-page-text-dark: #212529;        /* Primary text color (dark grey/black) */
    --ss-page-text-medium: #495057;       /* Medium grey for less prominent text */
    --ss-page-text-light: #6c757d;        /* Lighter grey for secondary text */
    --ss-page-text-on-accent-bg: #ffffff; /* White text for on blue backgrounds */

    --ss-page-bg-main: #ffffff;           /* Main background for the section card */
    --ss-page-bg-light: #f8f9fa;          /* Very light grey for subtle backgrounds */
    --ss-page-bg-accent-tint: rgba(var(--ss-page-primary-accent-rgb), 0.05); /* Light blue tint */

    --ss-page-border-color: #dee2e6;      /* Light grey border */
    --ss-page-shadow-soft: 0 4px 12px rgba(0,0,0,0.06);
    --ss-page-shadow-medium: 0 8px 20px rgba(0,0,0,0.1);
    --ss-page-shadow-strong: 0 12px 30px rgba(0,0,0,0.12);

    /* Specific button colors (can be overridden by more specific classes) */
    --ss-page-btn-wechat-bg: #7BB32E;
    --ss-page-btn-wechat-hover-bg: #629b27;
    --ss-page-btn-email-bg: #3498db;
    --ss-page-btn-email-hover-bg: #2980b9;
    --ss-page-btn-whatsapp-bg: #25D366;
    --ss-page-btn-whatsapp-hover-bg: #1DA851;
    --ss-page-btn-telegram-bg: #0088cc;
    --ss-page-btn-telegram-hover-bg: #006da3;

    /* --- NEW/REVISED for Contact Section distinct style --- */
    --ss-contact-section-bg: #eef4ff; /* A very light, distinct blue background */
    --ss-contact-section-border-accent: #0056b3; /* A darker, more prominent blue for top border */
    --ss-contact-title-color: var(--ss-page-secondary-accent); /* Darker blue for title */
    --ss-contact-button-shadow-rgb: 0, 86, 179; /* For button shadows, using the darker blue */
}

/* Keyframes for animations */
@keyframes ssPagePulseAccent {
    0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(var(--ss-page-primary-accent-rgb), 0.6); }
    50% { transform: scale(1.02); } 
    70% { box-shadow: 0 0 0 10px rgba(var(--ss-page-primary-accent-rgb), 0); }
    100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(var(--ss-page-primary-accent-rgb), 0); }
}

@keyframes ssPageIconWiggleSlight {
    0%, 100% { transform: rotate(0deg) scale(1); }
    25% { transform: rotate(-6deg) scale(1.1); }
    75% { transform: rotate(6deg) scale(1.1); }
}

/* Main container for this specific "Service and Support" page content */
.ss-page-container {
    background-color: var(--ss-page-bg-main);
    padding: 35px 40px; 
    border-radius: 16px;
    box-shadow: var(--ss-page-shadow-strong);
    transition: transform 0.3s ease-out, box-shadow 0.3s ease-out;
}

.ss-page-main-title {
    font-size: 2.5rem; 
    font-weight: 700;
    color: var(--ss-page-text-dark);
    margin-bottom: 35px;
    padding-bottom: 18px; 
    position: relative;
    text-align: center;
}
.ss-page-main-title::after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
    width: 120px; 
    height: 5px;  
    background: linear-gradient(to right, var(--ss-page-primary-accent), var(--ss-page-secondary-accent));
    border-radius: 5px;
}

.ss-page-intro-block {
    border: 1px solid var(--ss-page-border-color);
    padding: 30px 35px; 
    text-align: center;
    margin-bottom: 50px; 
    border-radius: 12px;
    background: var(--ss-page-bg-light);
    transition: all 0.3s ease-in-out;
    cursor: pointer;
    box-shadow: var(--ss-page-shadow-soft);
}
.ss-page-intro-block:hover {
    transform: translateY(-5px) scale(1.01);
    box-shadow: var(--ss-page-shadow-medium);
    border-color: var(--ss-page-primary-accent);
    background: var(--ss-page-bg-main);
}
.ss-page-intro-heading {
    font-size: 1.8rem; 
    font-weight: 600;
    color: var(--ss-page-text-dark);
    margin: 0;
    line-height: 1.5;
    transition: color 0.3s ease, text-shadow 0.3s ease;
}
.ss-page-intro-block:hover .ss-page-intro-heading {
    color: var(--ss-page-primary-accent);
    text-shadow: 0 0 10px rgba(var(--ss-page-primary-accent-rgb), 0.2);
}

.ss-page-features-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); 
    gap: 25px;
    margin-bottom: 50px;
    text-align: center;
}
.ss-page-feature-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    cursor: default; 
    transition: transform 0.3s ease, background-color 0.3s ease, box-shadow 0.3s ease;
    padding: 25px 15px; 
    border-radius: 10px;
    background-color: transparent;
}
.ss-page-feature-item:hover {
    transform: translateY(-10px);
    background-color: var(--ss-page-bg-accent-tint);
    box-shadow: var(--ss-page-shadow-medium);
}
.ss-page-feature-icon-wrapper {
    width: 85px; 
    height: 85px;
    border: 3px dashed var(--ss-page-primary-accent); 
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 18px; 
    transition: all 0.3s ease-in-out;
    position: relative;
    background-color: var(--ss-page-bg-main); 
}
.ss-page-feature-item:hover .ss-page-feature-icon-wrapper {
    border-style: solid;
    border-color: var(--ss-page-secondary-accent);
    background-color: var(--ss-page-primary-accent);
    transform: rotate(12deg) scale(1.1);
    box-shadow: 0 6px 18px rgba(var(--ss-page-primary-accent-rgb), 0.3);
}
.ss-page-feature-icon-wrapper i {
    font-size: 2.5rem; 
    color: var(--ss-page-primary-accent);
    transition: all 0.3s ease-in-out;
}
.ss-page-feature-item:hover .ss-page-feature-icon-wrapper i {
    color: var(--ss-page-text-on-accent-bg); 
    transform: scale(1.1) rotate(-12deg); 
    animation: ssPageIconWiggleSlight 0.5s ease-in-out; 
}
.ss-page-feature-item p {
    font-size: 1rem;
    color: var(--ss-page-text-medium);
    margin: 0;
    line-height: 1.4;
    font-weight: 500;
    transition: color 0.3s ease, font-weight 0.3s ease;
}
.ss-page-feature-item:hover p {
    color: var(--ss-page-primary-accent);
    font-weight: 600;
}

.ss-page-description-text {
    font-size: 1.1rem;
    color: var(--ss-page-text-light); /* Changed to lighter grey */
    margin-bottom: 40px;
    line-height: 1.8;
    padding: 0 15px;
    text-align: center;
}
.ss-page-description-text strong {
    color: var(--ss-page-text-dark);
    font-weight: 600;
}

.ss-page-service-list-section {
    margin-bottom: 50px;
}
.ss-page-service-list-title {
    font-size: 1.8rem; 
    font-weight: 600;
    color: var(--ss-page-text-dark);
    margin-bottom: 25px;
    padding-left: 0;
    text-align: center;
    position: relative;
    padding-bottom: 12px;
}
.ss-page-service-list-title::after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
    width: 80px; 
    height: 3px;
    background: var(--ss-page-primary-accent);
    border-radius: 3px;
}

.ss-page-service-list {
    list-style-type: none;
    padding-left: 0;
    margin-bottom: 0;
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
}
.ss-page-service-list li {
    position: relative;
    padding: 15px 20px 15px 50px;
    margin-bottom: 12px;
    font-size: 1.05rem;
    color: var(--ss-page-text-medium);
    transition: all 0.3s ease-in-out;
    border-radius: 8px;
    background-color: var(--ss-page-bg-light);
    border-left: 4px solid transparent;
}
.ss-page-service-list li:hover {
    background-color: var(--ss-page-bg-accent-tint);
    transform: translateX(10px) scale(1.02);
    box-shadow: var(--ss-page-shadow-light);
    border-left-color: var(--ss-page-primary-accent);
    color: var(--ss-page-text-dark);
}
.ss-page-service-list li::before {
    content: '\f058'; 
    font-family: 'Font Awesome 6 Free';
    font-weight: 900; 
    position: absolute;
    left: 18px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--ss-page-primary-accent);
    font-size: 1.3em; 
    transition: transform 0.3s ease, color 0.3s ease;
}
.ss-page-service-list li:hover::before {
    transform: translateY(-50%) scale(1.3) rotate(15deg);
    color: var(--ss-page-secondary-accent);
}

/* --- Enhanced and Distinct Contact Section --- */
.ss-page-contact-section {
    margin-top: 60px; /* More separation */
    background-color: var(--ss-contact-section-bg, #eef4ff); /* Distinct light blue background */
    padding: 40px 30px; /* Adjusted padding */
    border-radius: 16px;
    border-top: 5px solid var(--ss-contact-section-border-accent, #0056b3); /* Distinct darker blue top border */
    box-shadow: var(--ss-page-shadow-medium);
}
.ss-page-contact-title {
    font-size: 2rem; /* Larger title for this section */
    font-weight: 700; /* Bolder */
    color: var(--ss-contact-title-color, #0A58CA); /* Darker blue for title */
    margin-bottom: 35px; /* More space */
    padding-bottom: 15px;
    position: relative;
    text-align: center;
}
.ss-page-contact-title::after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
    width: 90px; /* Wider underline */
    height: 4px; /* Thicker underline */
    background: linear-gradient(to right, var(--ss-contact-section-border-accent, #0056b3), var(--ss-page-primary-accent, #0D6EFD)); /* Gradient using new accent */
    border-radius: 3px;
}
.ss-page-contact-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* CHANGED: 3 columns */
    gap: 20px; 
}
.ss-page-contact-button {
    display: flex;
    flex-direction: column; /* Stack icon and text vertically */
    align-items: center;
    justify-content: center;
    padding: 20px 15px; /* Adjusted padding for vertical stacking */
    border-radius: 12px; /* More conventional radius */
    text-decoration: none;
    color: var(--ss-page-text-on-accent-bg); /* White text by default on colored buttons */
    font-size: 0.95rem; /* Slightly smaller text to fit */
    font-weight: 600;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    position: relative;
    overflow: hidden;
    box-shadow: 0 4px 10px rgba(var(--ss-contact-button-shadow-rgb, 0, 86, 179), 0.2);
    min-height: 100px; /* Ensure buttons have some height */
    border: none;
    line-height: 1.3; /* For text below icon */
}
.ss-page-contact-button i {
    margin-right: 0; /* Removed margin as icon is above text */
    margin-bottom: 10px; /* Space between icon and text */
    font-size: 2rem; /* Larger icon */
    transition: transform 0.35s ease-out;
}
.ss-page-contact-button:hover {
    transform: translateY(-8px) scale(1.05); /* More lift */
    box-shadow: 0 12px 25px rgba(var(--ss-contact-button-shadow-rgb, 0, 86, 179), 0.3);
}
.ss-page-contact-button:hover i {
    transform: scale(1.2) rotate(10deg);
}
.ss-page-contact-button:active {
    transform: translateY(-2px) scale(1);
    box-shadow: 0 2px 5px rgba(var(--ss-contact-button-shadow-rgb, 0, 86, 179), 0.2);
}

/* Specific button styles (backgrounds remain) */
.ss-page-phone-number { background: linear-gradient(135deg, var(--ss-page-primary-accent) 0%, var(--ss-page-secondary-accent) 100%); }
.ss-page-btn-wechat { background: linear-gradient(135deg, var(--ss-page-btn-wechat-bg) 0%, var(--ss-page-btn-wechat-hover-bg) 100%); }
.ss-page-btn-email { background: linear-gradient(135deg, var(--ss-page-btn-email-bg) 0%, var(--ss-page-btn-email-hover-bg) 100%); }
.ss-page-btn-whatsapp { background: linear-gradient(135deg, var(--ss-page-btn-whatsapp-bg) 0%, var(--ss-page-btn-whatsapp-hover-bg) 100%); }
.ss-page-btn-telegram { background: linear-gradient(135deg, var(--ss-page-btn-telegram-bg) 0%, var(--ss-page-btn-telegram-hover-bg) 100%); }

/* Primary contact pulse animation */
.ss-page-primary-contact {
    animation: ssPagePulseAccent 2s infinite ease-in-out;
    position: relative;
}
.ss-page-primary-contact::after { /* "HOT" badge */
    content: "HOT";
    position: absolute;
    top: -1px; /* Adjusted */
    left: -8px; /* Adjusted */
    background: #ff4757;
    color: white;
    padding: 3px 10px;
    border-radius: 20px;
    font-size: 0.7rem; /* Adjusted */
    font-weight: bold;
    box-shadow: 0 2px 5px rgba(0,0,0,0.25);
    z-index: 1;
}

/* Responsive adjustments */
@media (max-width: 992px) {
    .ss-page-features-grid {
        grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    }
    .ss-page-contact-grid {
        grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); /* Allow 2-3 columns */
    }
}

@media (max-width: 768px) {
    .ss-page-container { padding: 30px 20px; }
    .ss-page-main-title { font-size: 2rem; }
    .ss-page-intro-heading { font-size: 1.5rem; }
    .ss-page-features-grid { grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 20px; }
    .ss-page-feature-icon-wrapper { width: 70px; height: 70px; }
    .ss-page-feature-icon-wrapper i { font-size: 2rem; } 
    .ss-page-contact-grid { grid-template-columns: repeat(6, 1fr); } /* 2 columns on mobile */
    .ss-page-service-list-title { font-size: 1.6rem; }
    .ss-page-contact-title { font-size: 1.6rem; }
    .ss-page-contact-button { padding: 15px 10px; font-size: 0.9rem; }
    .ss-page-contact-button i { font-size: 1.8rem; margin-bottom: 8px; }
}

@media (max-width: 480px) {
    .ss-page-main-title { font-size: 1.8rem; }
    .ss-page-intro-heading { font-size: 1.4rem; }
    .ss-page-features-grid { grid-template-columns: repeat(2, 1fr); }
    .ss-page-contact-grid { grid-template-columns: 1fr; } /* Stack to 1 column on very small screens */
    .ss-page-container { margin: 10px; padding: 25px 15px; } 
    .ss-page-contact-button { padding: 15px; font-size: 0.95rem; }
    .ss-page-service-list-title { font-size: 1.4rem; }
    .ss-page-contact-title { font-size: 1.4rem; }
    .ss-page-feature-icon-wrapper i { font-size: 1.8rem; }
    .ss-page-service-list li::before { font-size: 1.1em; left: 15px; }
    .ss-page-service-list li { padding: 12px 15px 12px 40px; }
}



/* CSS for Walk-in Serving Center - Renamed & Enhanced */
/* Ensure your global CSS variables are defined, or define them here if needed for this block */
:root { /* These are example variables, align with your site's global theme */
    --walk-in-service-primary-color: #0056b3;       
    --walk-in-service-secondary-color: #007bff;     
    --walk-in-service-accent-green: #198754;        
    --walk-in-service-accent-green-hover: #157347;  
    
    --walk-in-service-text-dark: #212529;           
    --walk-in-service-text-medium: #495057;          
    --walk-in-service-text-light: #6c757d;           
    --walk-in-service-text-on-accent: #ffffff;       

    --walk-in-service-bg-main: #ffffff;             
    --walk-in-service-bg-light: #f8f9fa;            
    --walk-in-service-bg-accent-tint: rgba(13, 110, 253, 0.05); 
    
    --walk-in-service-border-color: #dee2e6;        
    --walk-in-service-table-border-color: #ced4da;   
    --walk-in-service-closed-text-color: #dc3545;   
    
    --walk-in-service-shadow-soft: 0 4px 12px rgba(0,0,0,0.06);
    --walk-in-service-shadow-medium: 0 8px 20px rgba(0,0,0,0.1);
    --walk-in-service-shadow-strong: 0 12px 30px rgba(0,0,0,0.12);

    --walk-in-service-accent-primary-rgb: 13, 110, 253;
}

/* Keyframes for animations */
@keyframes walkInServiceFadeInUp {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}
@keyframes walkInServiceIconFloat {
    0%, 100% { transform: translateY(0) rotate(-3deg); }
    50% { transform: translateY(-5px) rotate(3deg); }
}

/* Main Page Container for this section */
.walk-in-service-page-container { 
    max-width: 1200px; 
    margin: 30px auto; 
    padding: 30px 20px; 
    background-color: var(--walk-in-service-bg-main);
    border-radius: 12px;
    box-shadow: var(--walk-in-service-shadow-medium);
    border-top: 4px solid var(--walk-in-service-primary-color); 
}

.walk-in-service-main-title {
    font-size: 2.2rem;
    color: var(--walk-in-service-primary-color);
    text-align: center;
    margin-bottom: 15px;
    font-weight: 700;
    position: relative;
    padding-bottom: 10px;
}
.walk-in-service-main-title::after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
    width: 80px;
    height: 3px;
    background: linear-gradient(90deg, var(--walk-in-service-primary-color), var(--walk-in-service-secondary-color));
    border-radius: 3px;
}

.walk-in-service-address-block {
    margin-bottom: 30px;
    text-align: center;
}
.walk-in-service-address-text {
    font-size: 1rem;
    color: var(--walk-in-service-text-medium);
    line-height: 1.6;
    display: block; 
}
.walk-in-service-address-text .walk-in-service-icon { 
    margin-right: 8px;
    color: var(--walk-in-service-primary-color);
    font-size: 1.1em; 
}
.walk-in-service-address-text a {
    color: var(--walk-in-service-primary-color);
    text-decoration: none;
    transition: color 0.3s ease;
    font-weight: 500;
}
.walk-in-service-address-text a:hover {
    color: var(--walk-in-service-secondary-color);
    text-decoration: underline;
}

.walk-in-service-map-container {
    width: 100%;
    height: 350px; 
    margin-top: 20px;
    margin-bottom: 40px; 
    border: 1px solid var(--walk-in-service-border-color);
    border-radius: 10px; 
    overflow: hidden; 
    box-shadow: var(--walk-in-service-shadow-soft);
    transition: box-shadow 0.3s ease;
}
.walk-in-service-map-container:hover {
    box-shadow: var(--walk-in-service-shadow-medium);
}
.walk-in-service-map-container iframe {
    border: 0; 
}

.walk-in-service-hours-title { 
    font-size: 1.9rem; 
    color: var(--walk-in-service-primary-color);
    text-align: center;
    margin-top: 40px; 
    margin-bottom: 25px; 
    font-weight: 600;
    position: relative;
    padding-bottom: 10px;
}
.walk-in-service-hours-title::after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
    width: 70px;
    height: 3px;
    background: var(--walk-in-service-secondary-color); 
    border-radius: 3px;
}
.walk-in-service-hours-title .walk-in-service-icon { 
    margin-right: 10px;
    font-size: 0.9em; 
}
.walk-in-service-hours-title a { 
    color: inherit;
    text-decoration: none;
}
.walk-in-service-hours-title a:hover {
    color: var(--walk-in-service-secondary-color);
}

.walk-in-service-table-wrapper {
    overflow-x: auto; 
}
.walk-in-service-hours-table {
    width: 100%;
    border-collapse: separate; 
    border-spacing: 0;
    margin: 20px 0;
    box-shadow: var(--walk-in-service-shadow-soft);
    border: 1px solid var(--walk-in-service-table-border-color);
    border-radius: 10px;
    overflow: hidden; 
}
.walk-in-service-hours-table th, 
.walk-in-service-hours-table td {
    border-bottom: 1px solid var(--walk-in-service-table-border-color);
    padding: 14px 18px; 
    font-size: 1rem;
    text-align: left;
}
.walk-in-service-hours-table tr:last-child td {
    border-bottom: none; 
}
.walk-in-service-hours-table th {
    background-color: var(--walk-in-service-bg-light);
    font-weight: 600;
    color: var(--walk-in-service-text-dark);
}
.walk-in-service-hours-table tr:hover td:not(.walk-in-service-hours-closed) { 
    background-color: var(--walk-in-service-bg-accent-tint); 
    transition: background-color 0.2s ease;
}
.walk-in-service-hours-closed { 
    background-color: rgba(220, 53, 69, 0.05) !important; 
    color: var(--walk-in-service-closed-text-color) !important;
    font-weight: bold;
    text-align: center !important;
}
.walk-in-service-hours-time { 
    font-weight: 500;
    text-align: right; 
    color: var(--walk-in-service-text-medium);
}

.walk-in-service-calendar-link { 
    display: inline-flex; 
    align-items: center;
    gap: 8px; 
    background: var(--walk-in-service-secondary-color);
    color: white;
    padding: 8px 14px; 
    border-radius: 20px; 
    text-decoration: none;
    font-size: 0.9rem; 
    margin-top: 8px; 
    transition: background-color 0.3s ease, transform 0.2s ease, box-shadow 0.3s ease;
    min-height: 40px; 
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
.walk-in-service-calendar-link:hover {
    background: var(--walk-in-service-primary-color);
    transform: translateY(-2px) scale(1.03);
    box-shadow: 0 4px 8px rgba(var(--walk-in-service-accent-primary-rgb), 0.2);
}
.walk-in-service-calendar-link .walk-in-service-icon { 
    font-size: 1em; 
    transition: transform 0.3s ease;
    margin-right: 0; 
}
.walk-in-service-calendar-link:hover .walk-in-service-icon {
    transform: rotate(15deg);
}

.walk-in-service-contact-buttons {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); 
    gap: 0.50rem; 
    margin-top: 40px;
}
.walk-in-service-contact-btn {
        display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.50rem;
    padding: 5px;
    border-radius: 8px;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.3s ease;
    font-size: 0.95rem;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    border: none;
    min-height: 48px;
}
.walk-in-service-contact-btn:hover {
    transform: translateY(-3px) scale(1.03); 
    box-shadow: 0 5px 12px rgba(0,0,0,0.15); 
}
.walk-in-service-contact-btn i {
    font-size: 1.2em; 
    transition: transform 0.3s ease;
}
.walk-in-service-contact-btn:hover i {
    transform: scale(1.1) rotate(8deg); 
    animation: walkInServiceIconFloat 0.8s ease-in-out infinite alternate;
}

/* Specific button colors from your provided style */
.walk-in-service-phone-btn { background-color: #3b82f6; color: white; }
.walk-in-service-phone-btn:hover { background-color: #2563eb; }

.walk-in-service-email-btn { background-color: #10b981; color: white; }
.walk-in-service-email-btn:hover { background-color: #0d9f6e; }

.walk-in-service-whatsapp-btn { background-color: #25d366; color: white; }
.walk-in-service-whatsapp-btn:hover { background-color: #1da851; }

.walk-in-service-telegram-btn { background-color: #0088cc; color: white; }
.walk-in-service-telegram-btn:hover { background-color: #006699; }

.walk-in-service-wechat-btn { background-color: #07C160; color: white; }
.walk-in-service-wechat-btn:hover { background-color: #06AD56; }

/* Animation class from your original HTML, scoped */
.walk-in-service-page-container .fade-in { 
    animation: walkInServiceFadeInUp 1s ease-out 0.2s forwards;
    opacity: 0; 
}
/* If using Animate.css classes directly in HTML, ensure they are specific enough or style them here */
.walk-in-service-page-container .animate__animated.animate__fadeInUp { animation-name: walkInServiceFadeInUp; }


/* Responsive adjustments */
@media (max-width: 768px) {
    .walk-in-service-page-container {
        padding: 25px 15px;
    }
    .walk-in-service-main-title {
        font-size: 1.9rem;
    }
    .walk-in-service-hours-title {
        font-size: 1.5rem;
    }
    .walk-in-service-contact-buttons {
        grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); /* Adjust for better fit */
        gap: 0.75rem;
    }
    .walk-in-service-contact-btn {
        font-size: 0.9rem; 
        padding: 10px 12px;
    }
     .walk-in-service-contact-btn i {
        font-size: 1.1em;
    }
}

@media (max-width: 480px) {
    .walk-in-service-main-title {
        font-size: 1.7rem;
    }
    .walk-in-service-address-text {
        font-size: 0.9rem;
    }
    .walk-in-service-map-container {
        height: 280px; 
    }
    .walk-in-service-hours-title {
        font-size: 1.4rem; 
    }
    .walk-in-service-hours-table th, 
    .walk-in-service-hours-table td {
        padding: 10px 8px;
        font-size: 0.875rem; 
    }
    .walk-in-service-contact-buttons {
        grid-template-columns: 1fr; 
    }
    .walk-in-service-contact-btn {
        font-size: 0.95rem; 
        padding: 12px 15px;
    }
}

/*plugin translate*/
a.glink img {
                                vertical-align: middle;
                                display: inline;
                                border: 0;
                                padding: 0;
                                margin: 5px;
                                opacity: 0.8;
                                margin-right: 2px;
}



:root {
--whatsapp: #25D366;
    --telegram: #0088cc;
    --facebook: #3b5998;
    --messenger: #0084ff; /* Added Messenger color */
    --wechat: #7bb32e;
    --phone-bg: #f647af;
    --location-bg: #fd990d;
    --email-bg: #00a5ff;
    --primary: #005f99;
    --primary-dark: #004c80;
    --primary-light: #0077cc;
    --primary-gradient: linear-gradient(135deg, var(--primary-light), var(--primary));
    --bg: #ffffff;
    --bg-alt: #f4f7f6;
    --shadow-light: 0 2px 8px rgba(0, 0, 0, 0.1);
    --shadow-medium: 0 4px 15px rgba(0, 0, 0, 0.15);
    --shadow-strong: 0 8px 25px rgba(0, 0, 0, 0.2);
    --radius: 10px;
    --text-primary: #2c3e50;
    --text-secondary: #7f8c8d;
    --border-color: #e0e6ed;
    --lifting-equipment: #e74c3c;
    --racking: #1abc9c;
    --scale: #f39c12;
    --head-office: #8e44ad;
    --contact-icon-size: 48px;
    --success-color: #2ecc71;
}

/* Base body styling */
.bodyaap {
    font-family: 'Poppins', sans-serif;
    line-height: 1.5;
    background-color: var(--bg-alt);
    color: var(--text-primary);
    padding: 20px; /* Add padding for better viewing */
}

/* For screen readers only */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}

/* Main container for the contact component */
.contact-container {
    max-width: 100%;
    margin: auto;
    padding: 5px;
    text-align: center;
}

/* Container for the department buttons */
.departments-container {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    justify-content: center;
    margin: 30px 0;
}

/* Wrapper for each button and its corresponding popup */
.department-btn-wrapper {
    position: relative;
    display: flex;
    justify-content: center;
}

.department-btn-wrapper.active {
    z-index: 100; /* Bring active button to the front */
}

/* Styling for the main department buttons */
.department-btn {
    padding: 12px 20px;
    border-radius: var(--radius);
    border: 2px solid transparent;
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    cursor: pointer;
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.2s ease-out, background-position 0.4s ease;
    color: white;
    background-size: 250% auto;
    box-shadow: var(--shadow-light);
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: clamp(14px, 2.5vw, 16px);
    position: relative;
    overflow: hidden;
    min-width: 220px;
    justify-content: center;
}

.department-btn:hover {
    transform: translateY(-3px) scale(1.03);
    background-position: 5% 0;
}

.department-btn.active {
    transform: translateY(-3px) scale(1.03);
    border-color: rgba(255, 255, 255, 0.7);
}

/* Specific glow effects for each button on hover/active */
.head-office-btn:hover, .department-btn-wrapper.active .head-office-btn { box-shadow: 0 6px 20px rgba(0,0,0,0.2), 0 0 20px color-mix(in srgb, var(--head-office) 40%, transparent); }
.racking-btn:hover, .department-btn-wrapper.active .racking-btn { box-shadow: 0 6px 20px rgba(0,0,0,0.2), 0 0 20px color-mix(in srgb, var(--racking) 40%, transparent); }
.scale-btn:hover, .department-btn-wrapper.active .scale-btn { box-shadow: 0 6px 20px rgba(0,0,0,0.2), 0 0 20px color-mix(in srgb, var(--scale) 40%, transparent); }
.lifting-equipment-btn:hover, .department-btn-wrapper.active .lifting-equipment-btn { box-shadow: 0 6px 20px rgba(0,0,0,0.2), 0 0 20px color-mix(in srgb, var(--lifting-equipment) 40%, transparent); }

.department-btn i {
    font-size: clamp(16px, 3vw, 18px);
}

/* Gradient backgrounds for each department button */
.head-office-btn { background-image: linear-gradient(135deg, var(--head-office), color-mix(in srgb, var(--head-office) 70%, black)); }
.racking-btn { background-image: linear-gradient(135deg, var(--racking), color-mix(in srgb, var(--racking) 70%, black)); }
.scale-btn { background-image: linear-gradient(135deg, var(--scale), color-mix(in srgb, var(--scale) 70%, black)); }
.lifting-equipment-btn { background-image: linear-gradient(135deg, var(--lifting-equipment), color-mix(in srgb, var(--lifting-equipment) 70%, black)); }

/* The popup container for contact icons */
.department-contact-options {
    position: absolute;
    top: calc(100% + 10px); /* Default to dropdown */
    left: 50%;
    transform: translateX(-50%) scale(0.95);
    transform-origin: top center; /* Default origin for dropdown */
    width: auto;
    max-width: min(200px, calc(60vw - 30px)); /* Adjusted max-width */
    background: transparent;
    border: none;
    box-shadow: none;
    padding: 8px;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease, transform 0.2s ease;
    z-index: 100;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(var(--contact-icon-size), 1fr));
    gap: 10px;
    justify-items: center;
}

/* This class is added by JS when the popup should open upwards */
.department-btn-wrapper.popup-is-above .department-contact-options {
    top: auto;
    bottom: calc(100% + 10px);
    transform-origin: bottom center;
}


.department-btn-wrapper.active .department-contact-options {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) scale(1);
}

/* Sub-title inside the popup (e.g., contact person's name) */
.contact-sub-title {
    grid-column: 1 / -1;
    text-align: center;
    font-size: 13px;
    font-weight: 600;
    color: #444;
    margin-bottom: 8px;
    padding: 2px 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    background-color: rgba(255, 255, 255, 0.7);
    border-radius: 4px;
}

/* Individual circular contact icons */
.contact-icon-only {
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--contact-icon-size);
    height: var(--contact-icon-size);
    border-radius: 50%;
    color: white;
    font-size: calc(var(--contact-icon-size) * 0.45);
    text-decoration: none;
    box-shadow: var(--shadow-light);
    transition: transform 0.2s cubic-bezier(0.68, -0.55, 0.27, 1.55), box-shadow 0.2s ease, filter 0.2s ease;
    position: relative;
    overflow: hidden;
    opacity: 0;
    transform: translateY(10px) scale(0.9);
}

.department-btn-wrapper.active .contact-icon-only {
    animation: fadeInUpScale 0.3s ease-out forwards;
}

@keyframes fadeInUpScale {
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.contact-icon-only:hover {
    transform: translateY(-2px) scale(1.1);
    box-shadow: var(--shadow-medium);
    filter: brightness(1.15);
}

/* Background colors for each contact platform */
.contact-icon-only.whatsapp-bg { background-color: var(--whatsapp); }
.contact-icon-only.telegram-bg { background-color: var(--telegram); }
.contact-icon-only.facebook-bg { background-color: var(--facebook); }
.contact-icon-only.messenger-bg { background-color: var(--messenger); } /* Added Messenger style */
.contact-icon-only.wechat-bg { background-color: var(--wechat); }
.contact-icon-only.phone-bg { background-color: var(--phone-bg); }
.contact-icon-only.email-bg { background-color: var(--email-bg); }
.contact-icon-only.location-bg { background-color: var(--location-bg); }
.contact-icon-only.info-bg { background-color: var(--text-secondary); }

/* WeChat QR Code Modal */
.wechat-qr {
    display: none;
    margin: 20px auto;
    text-align: center;
    background: var(--bg);
    padding: 15px;
    border-radius: var(--radius);
    animation: fadeIn 0.3s ease;
    border: 1px solid var(--border-color);
    max-width: 300px;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 2001;
}
@keyframes fadeIn { from { opacity: 0; transform: translate(-50%, -50%) scale(0.9); } to { opacity: 1; transform: translate(-50%, -50%) scale(1); } }

.wechat-qr.active { display: block; }

.wechat-qr img {
    width: 200px;
    height: 200px;
    max-width: 200px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    transition: transform 0.3s ease;
    background-color: white;
    object-fit: contain;
}
.wechat-qr img:hover { transform: scale(1.05); }
.wechat-qr p { margin: 8px 0; font-size: 13px; color: var(--text-primary); }
.wechat-qr a {
    color: var(--primary);
    text-decoration: none;
    font-weight: 500;
    transition: color 0.3s ease;
    font-size: 13px;
}
.wechat-qr a:hover { color: var(--primary-dark); text-decoration: underline; }

/* Ripple effect for clicks */
.ripple-effect {
    position: absolute;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.5);
    transform: scale(0);
    animation: ripple 0.6s linear;
    pointer-events: none;
}
@keyframes ripple { to { transform: scale(4); opacity: 0; } }

/* Responsive Design */
@media (max-width: 768px) {
    .departments-container { gap: 12px; }
    .department-btn { padding: 10px 18px; font-size: 15px; }
}

@media (max-width: 480px) {
    .bodyaap { padding: 10px; }
    .contact-container { padding: 5px; }
    .departments-container { gap: 10px; margin: 20px 0; }
    .department-btn { padding: 12px; font-size: 14px; min-width: 190px; gap: 8px;}
    .department-btn i { font-size: 15px; }
    
    :root {
        --contact-icon-size: 40px;
    }
    .department-contact-options {
        padding: 10px;
        gap: 8px;
    }


    .custom-modal-content { width: 95%; max-width: 320px; padding: 20px;}
    .custom-modal-content p { font-size: 15px; }
    #customAlertLink { padding: 10px 18px; font-size: 14px;}
    
}



/*
===========================================================
  Alternative Premium Style for .top-content
  - Font: Merriweather for titles, Lato for body
  - Palette: Dark Charcoal, Gold, Off-White
===========================================================
*/

/*-----------------------------------------
  1. Main Two-Column Layout
-------------------------------------------*/
.top-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 45px; /* Slightly larger gap */
    align-items: flex-start;
    /* Using Lato as the base font for this section */
    font-family: 'Lato', sans-serif;
}




/*-----------------------------------------
  3. Product Summary (Premium Style)
-------------------------------------------*/

.product-summery .short-description {
    font-size: 1.05rem;
    line-height: 1.8;
    color: #555;
    margin-bottom: 30px;
}

/* Variants (e.g., Size, Color) */
.product-summery .product-variant-list-wrapper {
    margin-bottom: 25px;
}

.product-summery .product-variant-list-wrapper .title {
    /* Using a serif font for a touch of elegance */
    font-family: 'Merriweather', serif;
    font-size: 1.2rem;
    font-weight: 700;
    margin-bottom: 15px;
    color: #222;
}

.product-summery .product-variant-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
}

/* A more refined, outlined style for variant options */
.product-summery .product-variant-list li {
    padding: 9px 20px;
    border: 1px solid #ccc;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.95rem;
    font-weight: 700;
    background-color: transparent;
    color: #444;
    transition: all 0.2s ease-in-out;
}

.product-summery .product-variant-list li:hover {
    color: #c59d5f;
    border-color: #c59d5f;
}

/* Style for the selected variant */
.product-summery .product-variant-list li.selected {
    background-color: #1a2839;
    color: #fff;
    border-color: #1a2839;
}

/* Category, SKU, and Share section */
.product-summery .cat-sku-content-wrapper {
    margin-top: 30px;
    padding-top: 20px;
    border-top: 1px solid #EAEAEA;
    font-size: 0.9rem;
    color: #777;
}

.product-summery .cat-sku-content-wrapper .category-wrap,
.product-summery .cat-sku-content-wrapper .sku-wrap,
.product-summery .cat-sku-content-wrapper .share-wrap {
    padding: 6px 0;
}

.product-summery .cat-sku-content-wrapper .title {
    font-weight: 700;
    color: #333;
    margin-right: 10px;
}

.product-summery .cat-sku-content-wrapper .category-wrap a {
    color: #c59d5f;
    text-decoration: none;
    font-weight: 700;
}
.product-summery .cat-sku-content-wrapper .category-wrap a:hover {
    text-decoration: underline;
}

.product-summery .share-wrap .social-icons {
    padding: 0;
    margin: 0;
    list-style: none;
    display: flex;
    align-items: center;
    gap: 12px;
}

.product-summery .share-wrap .social-icons li a {
    color: #333;
    font-size: 1.1rem;
    transition: color 0.3s;
}

.product-summery .share-wrap .social-icons li a:hover {
    color: #c59d5f;
}


/*-----------------------------------------
  4. Responsive Adjustments
-------------------------------------------*/
@media (max-width: 991px) {
    .top-content {
        grid-template-columns: 1fr; /* Stack on smaller screens */
        gap: 30px;
    }
}
/*
===========================================================
  Product Gallery & Thumbnail Styles
===========================================================
*/

/* Main image container */
.product-gallery .slider-gallery-slider .single-gallery-slider-item img {
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
    object-fit: fill;
    border: 1px solid #e9ecef;
    border-radius: 8px;
}

/* This prevents a "flash of unstyled content" (FOUC) before the slider loads */
.product-gallery .slider-gallery-slider:not(.slick-initialized) {
    visibility: hidden;
}

/* Container for the small navigation thumbnails */
.product-gallery .slider-gallery-nav {
    margin-top: 15px;
}

/* Individual thumbnail item styling */
.product-gallery .slider-gallery-nav .single-gallery-slider-nav-item {
    cursor: pointer;
    padding: 0 5px; /* Adds spacing between thumbnails */
}

.product-gallery .slider-gallery-nav .single-gallery-slider-nav-item img {
    width: 100%;
    display: block;
    border-radius: 6px;
    /* Add a transparent border to prevent layout shift on selection */
    border: 2px solid transparent;
    transition: border-color 0.3s ease;
}

/* --- THIS IS THE KEY STYLE FOR THE ACTIVE THUMBNAIL --- */
/* Highlights the currently selected thumbnail with a blue border */
.product-gallery .slider-gallery-nav .slick-current .single-gallery-slider-nav-item img {
    border-color: #007bff; /* Highlight color for the selected thumbnail */
}

/*
===========================================================
  Styles for Related Products Section
===========================================================
*/

/* --- 1. Main Section Container & Title --- */

.related-product-area {
    padding-top: 60px;
    margin-top: 60px;
    border-top: 1px solid #e9ecef; /* A clean line separating it from content above */
}

.related-product-area > .title { /* Using ">" to target the main title only */
    font-size: 2rem; /* 32px */
    font-weight: 700;
    margin-bottom: 40px;
    color: #212529;
    text-align: center;
}


/* --- 2. The Individual Product Card --- */

.single-product-item-3 {
    background-color: #fff;
    border: 1px solid #e9ecef;
    border-radius: 8px;
    overflow: hidden; /* Ensures child elements conform to the rounded corners */
    text-align: center;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.04);
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    height: 100%; /* Makes all cards in a row the same height */
    display: flex;
    flex-direction: column;
}

/* Add a "lift up" effect on hover */
.single-product-item-3:hover {
    transform: translateY(-8px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);
}


/* --- 3. Product Image & Thumbnail Area --- */

.single-product-item-3 .thumb {
    position: relative; /* Required for positioning the 'tag' */
    overflow: hidden; /* This is key for the image zoom effect */
}

.single-product-item-3 .thumb .img-wrapper {
    display: block;
    background-color: #f8f9fa;
}

.single-product-item-3 .thumb .img-wrapper img {
    width: 100%;
    height: auto;
    aspect-ratio: 1/1; /* Keep images perfectly square */
    object-fit: fill; /* Prevents images from stretching */
    transition: transform 0.4s ease;
}

/* Zoom the image slightly when hovering the card */
.single-product-item-3:hover .thumb .img-wrapper img {
    transform: scale(1.05);
}

/* The "new" tag styling */
.single-product-item-3 .thumb .tag {
    position: absolute;
    top: 15px;
    left: 15px;
    background-color: #0d6efd;
    color: #fff;
    padding: 4px 10px;
    border-radius: 4px;
    font-size: 0.8rem;
    font-weight: 700;
    line-height: 1.5;
    text-transform: uppercase;
    z-index: 1;
}


/* --- 4. Product Content Area (Title & Button) --- */

.single-product-item-3 .content {
    padding: 5px 5px;
    flex-grow: 1; /* Allows this area to expand, pushing the button to the bottom */
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.single-product-item-3 .content a {
    text-decoration: none;
}

/* Product title */
.single-product-item-3 .content .title {
    font-size: 1.1rem;
    font-weight: 600;
    color: #343a40;
    margin-bottom: 15px;
    line-height: 1.4;
    transition: color 0.3s ease;
    /* This will limit the title to 2 lines and add "..." if it's too long */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    min-height: 48px; /* Approx height for 2 lines to maintain alignment */
}

.single-product-item-3 .content a:hover .title {
    color: #0d6efd;
}

/* "Learn More" Button */
.single-product-item-3 .content .addtocart {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 20px; /* Space between the icon and text */
    padding: 9px 16px;
    border: 1px solid #ced4da;
    color: #495057;
    border-radius: 5px;
    font-weight: 500;
    transition: all 0.3s ease;
    margin-top: auto; /* Pushes the button to the very bottom of the card */
    display: none;
    
}

.single-product-item-3 .content .addtocart:hover {
    background-color: #0d6efd;
    border-color: #0d6efd;
    color: #fff;
}




/*
===========================================================
  Styles for Contact Page Form
===========================================================
*/

/* --- Wrapper for each form field (Label + Input) --- */
.contact-form .form-group {
    margin-bottom: 25px; /* Adds space between the form fields */
}

/* --- Style for the Text Input and Text Area --- */
.contact-form .form-control {
    display: block;
    width: 100%;
    height: 55px; /* A modern, taller height */
    padding: 10px 20px;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: #495057;
    background-color: #f8f9fa; /* A very light grey background */
    background-clip: padding-box;
    border: 1px solid #ced4da; /* A standard light border */
    border-radius: 8px; /* Slightly rounded corners */
    transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}

/* --- Special style for the multi-line message box --- */
.contact-form textarea.form-control {
    height: auto; /* Allow textarea to be resized */
    min-height: 150px; /* Set a minimum height */
}

/* --- Highlight effect when a user clicks into a field --- */
.contact-form .form-control:focus {
    color: #212529;
    background-color: #fff;
    border-color: #86b7fe; /* Blue highlight border */
    outline: 0;
    box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25); /* Blue glow effect */
}


/* --- Style for the "Send Message" Button --- */
.contact-form .btn-boxed {
    display: inline-block;
    padding: 12px 35px;
    font-weight: 600;
    font-size: 1rem;
    text-align: center;
    color: #fff;
    background-color: #0d6efd; /* A strong blue background */
    border: 1px solid #0d6efd;
    border-radius: 8px;
    cursor: pointer;
    text-transform: uppercase;
    transition: all 0.3s ease;
}

/* --- Hover effect for the button --- */
.contact-form .btn-boxed:hover {
    background-color: #0b5ed7; /* A slightly darker blue on hover */
    border-color: #0b5ed7;
    transform: translateY(-2px); /* Lift effect */
    box-shadow: 0 4px 15px rgba(13, 110, 253, 0.3);
}

/* --- Style for the section title --- */
.contact-page-content-area .section-title {
    margin-bottom: 40px;
}


/* ===================================================
   STYLES FOR "OUR EXPERTISE" PRODUCT CARD SECTION
=================================================== */

/* Variables for this specific section for easy theming */
:root {
    --expertise-card-bg: #ffffff;
    --expertise-card-border: #39a359;
    --expertise-card-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
    --expertise-card-hover-shadow:#8e44ad ;
    --expertise-text-primary: #2c3e50;
    --expertise-text-secondary: #7f8c8d;
    --expertise-button-bg: #007bff;
    --expertise-button-text: #ffffff;
    --expertise-button-hover-bg: #8e44ad;
    --expertise-image-bg: #f8f9fa;
}

.our-expertise-showcase-section {
    padding: 40px 15px;
    background-color: #f9fafb; /* A subtle background for the whole section */
}

.our-expertise-showcase-section .our-expertise-container {
    max-width: 1200px;
    margin: 0 auto;
}

.our-expertise-showcase-section .our-expertise-section-main-title {
    font-size:2em;
    font-weight: 700;
    color: var(--expertise-text-primary);
    text-align: left;
    margin-bottom: 40px;
}

.our-expertise-showcase-section .our-expertise-items-grid-layout {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
}

.our-expertise-showcase-section .our-expertise-item-card {
    background-color: var(--expertise-card-bg);
    border: 1px solid var(--expertise-card-border);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: var(--expertise-card-shadow);
    transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1), box-shadow 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    display: flex; /* Makes the <a> tag inside a flex container */
}

.our-expertise-showcase-section .our-expertise-item-card:hover {
    transform: translateY(-10px);
    box-shadow: var(--expertise-card-hover-shadow);
}

.our-expertise-showcase-section .our-expertise-item-link-wrapper {
    text-decoration: none;
    color: inherit;
    display: flex;
    flex-direction: column;
    height: 100%; /* Ensures the link fills the card */
}

.our-expertise-showcase-section .our-expertise-item-image-placeholder {
    width: 100%;
    height: 220px;
    background-color: var(--expertise-image-bg);
    overflow: hidden;
}

.our-expertise-showcase-section .our-expertise-item-actual-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}

.our-expertise-showcase-section .our-expertise-item-card:hover .our-expertise-item-actual-image {
    transform: scale(1.05);
}

.our-expertise-showcase-section .our-expertise-item-title-text {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--expertise-text-primary);
    margin: 20px 20px 10px 20px;
}

.our-expertise-showcase-section .our-expertise-item-description-text {
    font-size: 0.95rem;
    color: var(--expertise-text-secondary);
    line-height: 1.6;
    margin: 0 20px 20px 20px;
    flex-grow: 1; /* Pushes the button to the bottom */
}

.our-expertise-showcase-section .our-expertise-item-action-button-wrapper {
    padding: 0 20px 20px 20px;
    text-align: center;
}

.our-expertise-showcase-section .our-expertise-item-action-button {
    display: inline-block;
    padding: 10px 25px;
    background-color:#28a745;
    color: var(--expertise-button-text);
    border-radius: 10px; /* Pill shape */
    font-weight: 500;
    text-decoration: none;
    transition: background-color 0.3s ease, transform 0.2s ease;
}

.our-expertise-showcase-section .our-expertise-item-link-wrapper:hover .our-expertise-item-action-button {
    background-color: #8700da;
    transform: scale(1.05);
}

.grecaptcha-badge { 
    visibility: visible !important; 
}
/* ==============================================
   FIX FOR COLOR CONTRAST ISSUES
============================================== */

/* Fix for "SEND US:" and "CALL US:" subtitles in the top bar */
.construction-support-area .construction-single-info-list-item .content .subtitle {
    color: #555; /* A darker grey for better contrast */
}

/* Fix for the description text in the "Our Expertise" cards */
.our-expertise-showcase-section .our-expertise-item-description-text {
    color: #5a6a78; /* A darker, more readable secondary text color */
}

/* Fix for the "Learn more" button in the "Our Expertise" cards */
.our-expertise-showcase-section .our-expertise-item-action-button {
    background-color: #008a4a; /* A darker, more accessible green */
}
.our-expertise-showcase-section .our-expertise-item-action-button:hover {
    background-color: #006e3b; /* A corresponding darker hover state */
}

/* Fix for the main links in the footer */
.footer-contact-info .contact-item a {
    color: #0056b3; /* A darker, more accessible blue for links */
}
.footer-contact-info .contact-item a:hover {
    color: #004a99;
}





.cache-reload-btn {
  /* Layout */
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  margin: 5px 0;
  
  /* Visual Design */
  background: linear-gradient(135deg, #6a11cb 0%, #2575fc 100%);
  color: white;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size: 14px;
  font-weight: 500;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  
  /* Animation */
  transition: all 0.3s ease;
}

.cache-reload-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
  background: linear-gradient(135deg, #5a0cb3 0%, #1a68e6 100%);
}

.cache-reload-btn:active {
  transform: translateY(0);
}

.cache-reload-btn .reload-icon {
  font-size: 16px;
  transition: transform 0.5s ease;
}

.cache-reload-btn.loading .reload-icon {
  animation: spin 1s linear infinite;
}

.cache-reload-btn.loading .btn-text {
  display: none;
}

.cache-reload-btn.loading::after {
  content: "Clearing Cache...";
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* Status toast notification */
.cache-status-toast {
  position: fixed;
  bottom: 80px;
  right: 20px;
  background: #4CAF50;
  color: white;
  padding: 12px 16px;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  opacity: 0;
  transition: opacity 0.3s ease;
  z-index: 10000;
}

.cache-status-toast.show {
  opacity: 1;
}

.cache-status-toast.error {
  background: #F44336;
}


/* Fixes the small carousel navigation dots */
.product-service-carousel-indicator-dot {
    /* Add padding to make the clickable area larger than the visible dot */
    padding: 5px;

    /* You can also enforce a minimum size */
    min-width: 10px;
    min-height: 10px;

    /* This ensures the dot stays centered inside the new larger clickable area */
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Fixes the small "DISCOVER" buttons */
.product-service-carousel-slide-cta-button {
    /* Add more vertical and horizontal padding */
    padding: 5px 10px;
    min-height: 10px; /* Enforce minimum height */
}


.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  border: 0;
}


/*Related News*/
.margin-top-30{
    
    margin-top: 30px;
    display: flex;
}

/* --- Notification Icon Styles --- */
        .status-icon {
            position: fixed;
            bottom: 25px;
            right: 25px;
            width: 50px;
            height: 50px;
            border-radius: 50%; /* Makes it a circle */
            box-shadow: 0 4px 12px rgba(0,0,0,0.2);
            z-index: 1000;
            display: flex;
            align-items: center;
            justify-content: center;
            
            /* Animation for appearing/disappearing */
            opacity: 0;
            transform: scale(0.5);
            transition: opacity 0.4s ease, transform 0.4s ease;
            pointer-events: none; /* Icon should not be clickable initially */
        }

        /* This class makes the icon appear */
        .status-icon.show {
            opacity: 1;
            transform: scale(1);
            pointer-events: auto; /* Make icon hoverable when visible */
        }

        /* SVG icon styles */
        .status-icon svg {
            width: 28px;
            height: 28px;
        }
        
        /* Offline Icon (Red) */
        #offline-icon {
            background-color: #e53935; /* A vibrant red */
            animation: pulse-red 2s infinite; /* Pulsing animation */
        }
        
        /* Online Icon (Green) */
        #online-icon {
            background-color: #43a047; /* A vibrant green */
            animation: pulse-green 2s infinite; /* Pulsing animation */
        }

        /* Keyframes for the pulsing animation */
        @keyframes pulse-red {
            0% {
                box-shadow: 0 0 0 0 rgba(229, 57, 53, 0.7);
            }
            70% {
                box-shadow: 0 0 0 15px rgba(229, 57, 53, 0);
            }
            100% {
                box-shadow: 0 0 0 0 rgba(229, 57, 53, 0);
            }
        }

        @keyframes pulse-green {
            0% {
                box-shadow: 0 0 0 0 rgba(67, 160, 71, 0.7);
            }
            70% {
                box-shadow: 0 0 0 15px rgba(67, 160, 71, 0);
            }
            100% {
                box-shadow: 0 0 0 0 rgba(67, 160, 71, 0);
            }
        }