#qodef-page-header {
    padding-top: 1vw !important;
}

/* SCC Gallery Grid: filters left, image grid right (above tablet) */
@media (min-width: 769px) {
    .scc-gallery-grid .elementor-widget-container {
        display: flex;
        align-items: flex-start;
        gap: 32px;
    }

    .scc-gallery-grid .ha-filter {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        flex-shrink: 0;
        width: 400px;
        gap: 8px;
    }

    .scc-gallery-grid .ha-justified-grid__wrap {
        flex: 1;
        min-width: 0;
    }
}
/* SCC Gallery Grid: cursor only, no hover transform */
.scc-gallery-grid .ha-justified-grid__item {
    cursor: zoom-in;
}

/* Magnific Popup — dark overlay */
.mfp-bg {
    background: #000 !important;
    opacity: 0.96 !important;
}

/* Remove default container padding — arrows are absolutely positioned */
.mfp-container {
    padding: 0 !important;
    box-sizing: border-box;
    overflow: hidden;
}

/* Image fills full width; height is auto, capped at viewport */
.mfp-image-holder .mfp-content {
    width: 100% !important;
    max-width: 100% !important;
    overflow: hidden;
}
img.mfp-img {
    padding: 0 !important;
    width: 100% !important;
    height: auto !important;
    max-width: 100% !important;
    max-height: 100vh !important;
    object-fit: cover !important;
    display: block;
    margin: 0 auto !important;
}

/* Remove the dark shadow box padding */
.mfp-figure::after {
    top: 0 !important;
    bottom: 0 !important;
}

/* Slide clone — absolutely positioned outgoing image */
.scc-mfp-clone {
    pointer-events: none;
    z-index: 10000;
    margin: 0 !important;
    padding: 0 !important;
}

/* Prev / Next buttons */
.mfp-arrow {
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 48px !important;
    height: 48px !important;
    background-color: #84ae40 !important;
    border-radius: 6px !important;
    opacity: 1 !important;
    transition:
        background-color 0.2s ease,
        transform 0.2s ease;
    padding: 10px !important;
    box-sizing: border-box;
}
.mfp-arrow:hover {
    background-color: #6a9232 !important;
    transform: scale(1.06);
}

/* Hide default Magnific arrow glyphs */
.mfp-arrow::before,
.mfp-arrow::after {
    display: none !important;
}

/* Inject SVG arrows via CSS */
.mfp-arrow-left {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath stroke='none' d='M0 0h24v24H0z' fill='none'/%3E%3Cpath d='M9 12h12'/%3E%3Cpath d='M17 16l4 -4l-4 -4'/%3E%3Cpath d='M12 3a9 9 0 1 0 0 18'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: 24px 24px !important;
}
.mfp-arrow-right {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath stroke='none' d='M0 0h24v24H0z' fill='none'/%3E%3Cpath d='M21 12h-12'/%3E%3Cpath d='M13 16l-4 -4l4 -4'/%3E%3Cpath d='M12 3a9 9 0 1 0 0 18'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: 24px 24px !important;
}

/* Close button */
.mfp-close {
    color: #fff !important;
    font-size: 28px !important;
    opacity: 0.8 !important;
    transition: opacity 0.2s ease;
}
.mfp-close:hover {
    opacity: 1 !important;
}

/* SCC Grid Logo Animation */
.scc-grid > *,
.scc-services .e-child {
    opacity: 0;
    transform: scale(0.8);
    transition: none;
}

/* SCC Icon List Animation */
.scc-icon-list .elementor-icon-list-item {
    opacity: 0;
    transform: translateY(18px);
    transition: none;
}
/* Container for reveal effect */
.reveal-container {
    position: relative;
    display: inline-block;
    overflow: hidden;
}

/* The reveal mask */
.reveal-mask {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #fff;
    z-index: 2;
    transform: translateX(0);
    pointer-events: none;
    /* transition handled by Motion.js */
}

/* When in view, slide the mask out */
.reveal-container.in-view .reveal-mask {
    transform: translateX(100%);
}

/* Ensure images are above the mask */
.reveal-container img {
    display: block;
    width: 100%;
    height: auto;
    position: relative;
    z-index: 3; /* Above mask and background */
}

/* For background images: always behind everything */
.reveal-container .reveal-bg {
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 0; /* Behind mask and images */
}
/* Make the main parent container the stage for our animation */
.elementor-element-ffb760d > .e-con-inner {
    position: relative;
}

/* Images moved and animated by Motion.js */
.hover-effect-image {
    position: absolute !important;
    opacity: 0;
    top: 0;
    left: 0;
    display: block !important;
    width: 400px !important;
    height: auto !important;
    max-width: none !important;
    pointer-events: none;
    z-index: 100;
    will-change: left, top, opacity, transform;
    /* opacity / scale / position transitions handled by Motion.js */
}

/* --- Green Background Hover Effect (Unchanged and working) --- */
.sc_events_title {
    position: relative;
    cursor: pointer;
}

.sc_events_title .qodef-m-title {
    position: relative;
    z-index: 1;
}

.sc_events_title .qodef-e-link {
    transition: color 0.4s ease;
}

.green-bg-reveal {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #84ae40 !important;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.4s cubic-bezier(0.83, 0, 0.17, 1);
    z-index: -1;
}

.sc_events_title.hovered .green-bg-reveal {
    transform: scaleX(1);
}

.sc_events_title.hovered .qodef-e-link {
    color: #fff !important;
}
/* =================================================
   MOBILE ACCORDION STYLES (Screen <= 1024px)
   ================================================= */
@media (max-width: 1024px) {
    /* Target images ONLY when in mobile mode */
    .mobile-accordion-mode img {
        /* Reset desktop styles */
        position: static !important;
        opacity: 1 !important;
        transform: none !important;

        /* Accordion styles */
        display: block;
        width: 90% !important; /* Make it almost full width */
        max-width: 400px; /* But not too huge */
        margin: 15px auto 25px auto; /* Center it with spacing */

        /* Animation for sliding down */
        max-height: 0;
        opacity: 0;
        overflow: hidden;
        transition:
            max-height 0.5s ease-out,
            opacity 0.5s ease-out,
            margin-top 0.5s ease-out;
    }

    /* When the title's .active class is added by JS, show the image below it */
    .sc_events_title.active + img {
        max-height: 500px; /* A large enough value to reveal the image */
        opacity: 1;
        margin-top: 15px; /* Add space when it opens */
    }

    /* Your green bar hover effect still works perfectly on tap */
    .sc_events_title.active .green-bg-reveal {
        transform: scaleX(1);
    }

    .sc_events_title.active .qodef-e-link {
        color: #fff !important;
    }
}

/* =================================================
   SCC CONTACT FORM (WPForms)
   ================================================= */

/* 2-column layout on above tablet */
@media (min-width: 769px) {
    /* Use flex row on the form fields container */
    .scc-form .wpforms-fields,
    .scc-form .wpforms-field-container {
        display: flex;
        flex-wrap: wrap;
        gap: 0 24px;
    }

    .scc-form .wpforms-field.scc-half-width {
        width: calc(50% - 12px) !important;
        padding-left: 0 !important;
        box-sizing: border-box;
    }

    /* Full-width fields still stretch across both columns */
    .scc-form .wpforms-field:not(.scc-half-width) {
        width: 100% !important;
        padding-left: 0 !important;
    }
}

/* Placeholder */
.scc-form ::-webkit-input-placeholder {
    color: #fff;
    font-family: "Geist", sans-serif;
    font-size: 15px;
    opacity: 1;
}
.scc-form ::-moz-placeholder {
    color: #fff;
    font-family: "Geist", sans-serif;
    font-size: 15px;
    opacity: 1;
}
.scc-form :-ms-input-placeholder {
    color: #fff;
    font-family: "Geist", sans-serif;
    font-size: 15px;
    opacity: 1;
}
.scc-form ::placeholder {
    color: #fff;
    font-family: "Geist", sans-serif;
    font-size: 15px;
    opacity: 1;
}

/* All inputs, selects, textareas — bottom border only */
.scc-form input[type="text"],
.scc-form input[type="email"],
.scc-form input[type="tel"],
.scc-form input[type="number"],
.scc-form input[type="url"],
.scc-form select,
.scc-form textarea {
    background: transparent !important;
    border: none !important;
    border-bottom: 1px solid #fff !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    outline: none !important;
    color: #fff !important;
    font-family: "Geist", sans-serif !important;
    font-size: 15px !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    transition: border-color 0.2s ease !important;
}

.scc-form input[type="text"]:hover,
.scc-form input[type="email"]:hover,
.scc-form input[type="tel"]:hover,
.scc-form input[type="number"]:hover,
.scc-form input[type="url"]:hover,
.scc-form select:hover,
.scc-form textarea:hover,
.scc-form input[type="text"]:focus,
.scc-form input[type="email"]:focus,
.scc-form input[type="tel"]:focus,
.scc-form input[type="number"]:focus,
.scc-form input[type="url"]:focus,
.scc-form select:focus,
.scc-form textarea:focus,
.scc-form input[type="text"]:active,
.scc-form input[type="email"]:active,
.scc-form input[type="tel"]:active,
.scc-form input[type="number"]:active,
.scc-form input[type="url"]:active,
.scc-form select:active,
.scc-form textarea:active {
    background: transparent !important;
    border: none !important;
    border-bottom: 1px solid #fff !important;
    box-shadow: none !important;
    outline: none !important;
}

/* Submit button */
.scc-form .scc-submit,
.scc-form button[type="submit"] {
    background-color: #84ae40 !important;
    color: #fff !important;
    font-family: "Geist", sans-serif !important;
    border-radius: 4px !important;
    border: none !important;
    box-shadow: none !important;
    cursor: pointer;
    transition: background-color 0.2s ease !important;
}

.scc-form .scc-submit:hover,
.scc-form button[type="submit"]:hover {
    background-color: #6a9232 !important;
}
.my-process-wrapper {
    counter-reset: process-step;
}

/* 2. Increment the counter on the items */
.scc-process {
    counter-increment: process-step;
}
/* 1. Ensure the container handles the spacing/padding */
.scc-process .elementor-widget-image .elementor-widget-container {
    position: relative;
    width: 250px;
    height: 250px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px auto;
    background-color: transparent; /* Ensure no background interference */
    padding: 30px; /* This creates the gap between the image and the container edge */
    box-sizing: border-box; /* Ensures padding doesn't increase the 200px size */
}

/* 2. Fix the image to respect the container's padding */
.scc-process .elementor-widget-image img {
    width: 100%;    /* Fills the available space within the padding */
    height: 100%;
    object-fit: contain; /* Keeps aspect ratio */
}

/* 3. Ensure the counter badge stays correctly positioned */
.scc-process .elementor-widget-image .elementor-widget-container::after {
    content: counter(process-step);
    position: absolute;
    /* Adjust these values to pull the badge "in" towards the center */
    top: 150px; 
    right: 5px;
    width: 40px;
    height: 40px;
    background-color: #818a96;
    color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    border: 3px solid #fff;
    z-index: 1;
}