@import url('https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700');
@import url('https://fonts.googleapis.com/css?family=Roboto:400,300,500,700');

@font-face {
    font-family: 'Glyphicons Halflings';
    src: url('../fonts/glyphicons-halflings-regular.eot');
    src: url('../fonts/glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'),
        url('../fonts/glyphicons-halflings-regular.woff2') format('woff2'),
        url('../fonts/glyphicons-halflings-regular.woff') format('woff'),
        url('../fonts/glyphicons-halflings-regular.ttf') format('truetype'),
        url('../fonts/glyphicons-halflings-regular.svg') format('svg');
}

body {
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !important;

    min-height: 100vh;
}

.cart-toggle {
    position: fixed;
    top: 50%;
    right: 0;
    z-index: 1050;
}

.cart-btn {
    height: 42px;
}

.count-badge {
    position: absolute !important;
    top: -6px !important;
    right: 28px !important;
}

.overlay-bg {
    width: 100%;
    height: 100%;
    position: absolute;
}

.cartSidebar {
    display: none;
    position: fixed;
    top: 0;
    right: 0;
    height: 100vh;
    width: 350px;
    z-index: 1060;
    box-shadow: -2px 0 6px rgba(0, 0, 0, 0.2);
    overflow: auto !important;
}

.full-cart {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.empty-cart {
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.service-row-cart {
    border-radius: 12px;
    margin: 0px;
    background-color: white;
    padding: 10px;
    box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.1);

    position: relative;
    overflow: hidden;
    /* ensures the overlay doesn’t spill out */
}

.service-row-cart:hover {
    box-shadow: 0px 4px 5px 0px rgba(0, 0, 0, 0.05);
}

/* The overlay container covering the whole row */
.service-row-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    /* dark overlay */
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s ease;
}

/* On hover, reveal the overlay */
.service-row-cart:hover .service-row-overlay {
    opacity: 1;
}

.main-section {
    width: 100%;
    height: 100vh;
    background-size: cover;
    background-repeat: no-repeat;
    position: relative;
    /* For content layout */
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: white;
    overflow-x: hidden;
}

/* The ::before pseudo-element will hold the "next" image. */
.main-section::before {
    content: '';
    position: absolute;
    inset: 0;
    /* top:0; right:0; bottom:0; left:0; */
    background-size: cover;
    background-repeat: no-repeat;

    /* Initially hidden */
    opacity: 0;
    pointer-events: none;

    /* Smooth transition for opacity (the fade) */
    transition: opacity 1.5s ease-in-out;

    /*
     We place the "next" image via a CSS variable:
     mainSection.style.setProperty('--next-image', `url('some-image.jpg')`);
    */
    background-image: var(--next-image);
}

/* When .fade-in is added via JS, ::before’s opacity goes to 1. */
.main-section.fade-in::before {
    opacity: 1;
}

.overlay {
    /*background-color: rgba(0, 0, 0, 0.5);*/
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    /* Centers content vertically */
    position: absolute;
}

.navbar {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
}

.navbar-nav {
    gap: 5px;
}

.nav-link {
    font-weight: 400;
    font-size: 14px;
    line-height: 16.8px;
    color: #FFFFFF;
}

.book-class-btn {
    border-radius: 6px;
    background: #FFFFFF;
    color: #010106;
    font-family: "Helvetica Neue", sans-serif;
    font-weight: 500;
    font-size: 14px;
    line-height: 16.8px;
    text-align: center;
}

.nav-main-title {
    font-family: "Fugaz One", serif;
    font-weight: 400;
    font-size: 32px;
    color: #FFFFFF;
}

.img-circle {
    width: 30px;
    height: 30px;
    border-radius: 50%;
}

.main-titles-positions {
    position: absolute;
    top: 60%;
    /* to make the titles in the center with the gap 25px */
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    width: 100%;
    /* Ensures responsiveness */
    gap: 25px;
    /* Adds a 25px gap between direct children */
    display: flex;
    flex-direction: column;
}

.first-container-main-title {
    font-family: "Helvetica Neue", sans-serif;
    font-weight: 700;
    font-size: 58px;
    line-height: 63.8px;
    text-align: center;
}

.second-container-main-title {
    font-family: "Helvetica Neue", sans-serif;
    font-weight: 500;
    font-size: 20px;
    line-height: 24px;
    text-align: center;
}

.main-section-book-class-btn {
    min-width: 120px;
    gap: 8px;
    padding: 12px 25px;
    border-radius: 6px;
    background: #FFFFFF;
    border-color: #FFFFFF;
    font-family: "Helvetica Neue", sans-serif;
    font-weight: 500;
    font-size: 14px;
    line-height: 16.8px;
    text-align: center;
    color: #010106;
}

.dropdown-position {
    right: 0;
    left: auto;
}

.comments-section {
    padding: 40px 0;
}

.comments-container {
    display: flex;
    justify-content: center;
    gap: 28px;
    flex-wrap: wrap;
}

.comment {
    background: #F3F3F3;
    padding: 20px 35px;
    border-radius: 10px;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
    max-width: 380px;
}

.stars {
    font-size: 20px;
    margin-bottom: 10px;
}

.date-span {
    font-size: 12px;
    color: #9F9F9F;
}

.how-it-works-section {
    background-color: white;
    padding: 60px 0;
    text-align: center;
}

.section-title {
    font-family: "Helvetica Neue", sans-serif;
    font-weight: 700;
    font-size: 32px;
    line-height: 38.4px;
    text-align: center !important;
    color: #1E1E1E;
}

.steps {
    display: flex;
    justify-content: center;
    gap: 32px;
    flex-wrap: wrap;
}

.step {
    text-align: center;
    max-width: 250px;
    padding: 24px 32px;
    gap: 5px;
    display: flex;
    flex-direction: column;
}

.circle {
    width: 86px;
    height: 86px;
    background-color: #ffffff;
    border: 1px solid #000000;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 auto 15px;
    font-family: "Helvetica Neue", sans-serif;
    font-weight: 700;
    font-size: 40px;
    line-height: 48px;
    text-align: center;
}

.step-title {
    font-family: "Helvetica Neue", sans-serif;
    font-weight: 700;
    font-size: 20px;
    line-height: 24px;
    text-align: center;
    color: #1E1E1E;
}

.step-info {
    font-family: "PT Sans", sans-serif;
    font-weight: 400;
    font-size: 20px;
    line-height: 24px;
    text-align: center;
    color: #1E1E1E;
}

.classes-section {
    background-color: #EDEDED;
    padding: 60px 0;
    text-align: center;
}

.classes-section .section-title {
    font-family: "Helvetica Neue", sans-serif;
    font-weight: 700;
    font-size: 32px;
    line-height: 38.4px;
    text-align: center;
    color: #070707;
}

.categories-section {
    background-color: #FFF;
    padding: 20px 0;
    text-align: center;
}


.categories-grid {
    gap: 30px;
    flex-wrap: wrap;
    padding: 0 120px;
}

.category-card {
    width: 375px;
    position: relative;
    border-radius: 15px;
    overflow: hidden;
    transition: 0.3s ease-in-out;
}

.category-card img {
    /*min-width: 375px;*/
    width: 100%;
    height: 250px;
    object-fit: cover;
    transition: 0.3s ease-in-out;
}

.category-overlay {
    position: absolute;
    bottom: 0;
    width: 100%;
    padding: 20px;
    background: rgba(0, 0, 0, 0.7);
    color: white;
    text-align: left;
}

.category-title {
    font-family: "Helvetica Neue", sans-serif;
    font-size: 18px;
    font-weight: bold;
    margin-bottom: 5px;
}

.category-text {
    font-family: "PT Sans", sans-serif;
    font-size: 14px;
    opacity: 0.8;
    white-space: nowrap;
    /* Prevents text from wrapping */
    overflow: hidden;
    /* Hides overflowing text */
    text-overflow: ellipsis;
    /* Adds three dots (...) for overflow */
    width: 100%;
    /* Ensures text behaves properly inside the div */
}

.category-card:hover img {
    transform: scale(1.1);
}

.grouped-services-section {
    padding: 40px 0;
}

.grouped-service-toggle-container {
    width: auto;
    border-radius: 8px;
    background-color: #ddd;
    max-width: 1140px;
    overflow-x: auto;
    white-space: nowrap;
    cursor: pointer;
}

.toggled-btn {
    flex: 1;
    text-align: center;
    padding: 10px;
    transition: 0.3s;
    font-family: "Helvetica Neue", sans-serif;
    font-weight: 550;
    font-size: 14px;
    line-height: 16.8px;
    white-space: nowrap;
}

.grouped-service-toggle-container .active {
    background-color: #000000;
    color: #FFFFFF;
}

.grouped-service-toggle-container .inactive {
    color: #BBBBBB;
    background-color: #D9D9D9;
}

.grouped-service-toggle-container .btn.focus,
.btn:focus {
    outline: 0;
    box-shadow: unset;
}

.grouped-service-img {
    width: 110px;
    height: 110px;
    object-fit: cover;
    object-position: 50% 50%;
}

.grouped-service-btns-positions {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    gap: 8px;
}

.grouped-service-btn {
    background: none !important;
    border-radius: 6px;
    text-align: center;
    font-size: 16px;
}

.search-section {
    display: flex;
    margin-bottom: 10px;
}

.search-wrapper {
    position: relative;
    /* Establish a positioning context */
    display: inline-block;
    /* Shrinks to the width of its content */
    padding-left: 0px;
    padding-right: 0px;
}

.search-services {
    width: 100%;
    height: 48px;
    min-height: 48px;
    border: 1px solid #dadee2 !important;
    border-radius: 8px !important;
    padding: 15px;
}

.search-services:hover,
.search-services:focus,
.search-services:focus-within,
.search-services:focus-visible {
    border: 1px solid #dadee2 !important;
    outline: unset;
}


.search-suggestions {
    text-align: left;
    position: absolute;
    /* Absolutely position relative to .search-wrapper */
    top: 100%;
    /* Position directly below the input */
    left: 0;
    /* Align with the input's left edge */
    width: 100%;
    /* Match the width of the container (and the input) */
    display: none;
    list-style: none;
    margin: 0;
    padding: 0 8px;
    background: #fff;
    border: 1px;
    border-radius: 8px;
    z-index: 1000;
}

.category-select {
    width: 100%;
    height: 48px;
    min-height: 48px;
    border: 1px solid #dadee2 !important;
    border-radius: 8px !important;
    align-items: center;
    padding: 0 15px;
    background: #ffffff;
}

.category-select:hover,
.category-select:focus,
.category-select:focus-within,
.category-select:focus-visible {
    border: 1px solid #dadee2 !important;
    outline: unset;
}

/* Toggle Buttons */
.toggle-buttons {
    display: flex;
    justify-content: center;
    padding: 30px 0;
}

.toggle-container {
    display: flex;
    justify-content: center;
    width: 280px;
    border-radius: 8px;
    background-color: #ddd;
    overflow: hidden;
    cursor: pointer;
}

.toggle-option {
    flex: 1;
    text-align: center;
    padding: 10px;
    transition: 0.3s;
    font-family: "Helvetica Neue", sans-serif;
    font-weight: 550;
    font-size: 14px;
    line-height: 16.8px;
    white-space: nowrap;
}

.classes-section .active {
    background-color: #000000;
    color: #FFFFFF;
}

.classes-section .inactive {
    color: #BBBBBB;
    background-color: #D9D9D9;
}

/* Class Cards */
.classes-grid {
    padding: 0 120px;
    gap: 30px;
    flex-wrap: wrap;
}

.class-card {
    border-radius: 10px;
    overflow: hidden;
    min-width: 360px;
    max-width: 360px;
    text-align: left;
    display: flex;
    flex-direction: column;
}

.class-card img {
    width: 362px;
    height: 240px;
    object-fit: cover;
}

.class-content {
    background-color: #1E1E1EE5;
    color: #ffffff;
    padding: 20px 16px;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    min-height: 240px;
    max-height: 240px;
}
.description-truncate {

    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    text-overflow: ellipsis;
    line-height: 1.5em;
    flex-shrink: 0;
}

.btns-container {
    margin-top: auto;
}

.white-color {
    color: #ffffff;
}

.white-color:hover {
    color: #ffffff;
}

.class-title {
    font-family: "Helvetica Neue", sans-serif;
    font-weight: 700;
    font-size: 20px;
    line-height: 32px;
}

.class-content .time {
    padding: 5px 10px;
    border-radius: 64px;
    border: 1px solid #FFFFFF;
    font-family: " PT Sans", sans-serif;
    font-weight: 400;
    font-size: 14px;
    line-height: 16.8px;
    text-align: center;
}

.class-description {
    font-family: "PT Sans", sans-serif;
    font-weight: 400;
    font-size: 14px;
    line-height: 16.8px;
    color: #FFFFFFB2;
    flex-grow: 1;
}

.btns-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    /* Adjusts spacing */
    flex-wrap: wrap;
    /* Ensures responsiveness */
    gap: 10px;
    margin-top: auto;
}

.tags {
    display: flex;
    gap: 8px;
}

.tags span {
    background-color: #FFFFFF4D;
    padding: 6px 12px;
    border-radius: 64px;
    white-space: nowrap;
    /* Prevents text wrapping */
    color: #FFFFFF;
    font-family: "PT Sans", sans-serif;
    font-weight: 400;
    font-size: 14px;
    line-height: 16.8px;
    text-align: center;
}

.book-btn {
    min-width: 120px;
    gap: 8px;
    padding: 12px 25px;
    border-radius: 6px;
    background: #FFFFFF;
    border-color: #FFFFFF;
    font-family: "Helvetica Neue", sans-serif;
    font-weight: 550;
    font-size: 14px;
    line-height: 16.8px;
    text-align: center;
    color: #010106;
    width: 100%;
}



/* View All Classes Link */
.view-all {
    display: block;
    padding: 12px 25px;
    margin-top: 30px;
    color: black;
    cursor: pointer;
    font-family: "Helvetica Neue", sans-serif;
    font-weight: 550;
    font-size: 14px;
    line-height: 16.8px;
    text-align: center;
    text-decoration: none;
    text-decoration-style: solid;
    text-decoration-offset: Auto;
    text-decoration-thickness: Auto;
    text-decoration-skip-ink: auto;

}

.about-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto;
    margin: auto;
    align-items: center;
}

.about-image img,
.join-image img,
.app-imgs img {
    width: 100%;
    object-fit: cover;
    display: block;
}

.about-text {
    padding: 40px 100px;
    background-color: white;
}

.about-title,
.join-title {
    font-family: "Helvetica", sans-serif;
    font-weight: 700;
    font-size: 20px;
    line-height: 24px;
    color: #000000;
}

.about-description,
.join-description {
    font-family: "PT Sans", sans-serif;
    font-weight: 400;
    font-size: 20px;
    line-height: 24px;
    color: #000000;
}

.join-btn {
    background: none !important;
    border: 2px #000000 solid !important;
    border-radius: 6px;
    padding: 10px 20px 10px 20px;
    text-align: center;
    font-size: 16px;
    color: #000000;
}

.app-section {
    padding: 60px 0;
}

.app-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
}


.app-text-title {
    font-family: "Helvetica", sans-serif;
    font-weight: 700;
    font-size: 40px;
    line-height: 48px;
    color: #1E1E1E;
}

.app-buttons img {
    width: 150px;
    height: auto;
}

.app-buttons .google-play img {
    height: 48px;
}

/* App Screenshots */
.app-images {
    display: flex;
    justify-content: flex-end;
}

.app-images img {
    width: 100%;
    max-width: 80%;
}

.footer {
    color: white;
    padding-top: 26px;
    min-height: 236px;
}

.footer-container {
    padding: 0 120px;
}

.footer-right {
    display: flex;
    flex-direction: column;
    gap: 20px;
    max-width: 50%;
    width: 50%;
    padding-left: 30px;
}

.footer-left {
    max-width: 50%;
}

.footer-title {
    font-family: "Helvetica Neue", sans-serif;
    font-weight: 700;
    font-size: 32px;
    line-height: 38.4px;
    color: #FFFFFF;
}

.footer-menu {
    display: flex;
    gap: 20px;
}

.footer-menu a {
    font-family: "PT Sans", sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 19.2px;
    color: #FFFFFF;
    text-decoration: none;
}

.footer-right img {
    width: 120px;
    height: auto;
}

.footer-imgs .google-play img {
    height: 39px;
}

.social-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    margin: 3px;
    font-size: 20px;
    color: white;
    background-color: gray;
    border-radius: 5px;
    text-decoration: none;
    transition: all 0.3s ease-in-out;
}

.social-icon:hover {
    background-color: #007bff;
    color: white;
    text-decoration: none;
}

.privacy-and-terms-section {
    padding: 0 120px;
}

.privacy-and-terms-section a {
    font-family: "PT Sans", sans-serif;
    font-weight: 400;
    font-size: 12px;
    line-height: 14.4px;
    color: #FFFFFF;
    text-decoration: none;
    opacity: 0.6;
}

.footer-contact {
    border: 1px solid #00AEEF;
    /* Blue border */
    border-radius: 8px;
    padding: 10px 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    width: 250px;
    /* Adjust width */
    margin-bottom: 15px;
    /* Space before footer title */
}

.footer-contact i {
    color: #00AEEF;
    /* Blue icon */
    margin-right: 8px;
}

.phone-text {
    font-size: 18px;
    font-weight: bold;
    color: #00AEEF;
}

.appointments-text {
    font-size: 14px;
    color: #00AEEF;
    margin-top: 5px;
}

.footer-contact-modern {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 15px 20px;
    border-radius: 12px;
    /*background: rgba(255, 255, 255, 0.1); !* Glass effect *!*/
    backdrop-filter: blur(10px);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.2);
    width: 100%;
    /* Make it flexible */
    max-width: 320px;
    /* Ensures it doesn’t stretch too much */
    transition: all 0.3s ease-in-out;
}

/* Icon Container */
.contact-icon {
    display: flex;
    justify-content: center;
    align-items: center;
    min-width: 50px;
    min-height: 50px;
    background: linear-gradient(135deg, #00AEEF, #007bff);
    border-radius: 50%;
    box-shadow: 0 4px 8px rgba(0, 174, 239, 0.3);
    flex-shrink: 0;
    /* Prevents the icon from shrinking */
}

.contact-icon i {
    font-size: 24px;
    color: white;
}

/* Contact Details */
.contact-details {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    /* Allows text to take remaining space */
    min-width: 0;
    /* Prevents content from forcing expansion */
}

/* Number Styling */
.contact-number {
    font-size: 18px;
    font-weight: bold;
    color: #ffffff;
    white-space: nowrap;
    /* Ensures the number stays on one line */
    overflow: hidden;
    text-overflow: ellipsis;
    /* Adds "..." if number is too long */
}

/* Business Hours */
.contact-hours {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.7);
    line-height: 1.4;
    word-break: break-word;
    /* Ensures text wraps properly */
    max-width: 100%;
    /* Ensures no overflow */
    flex-wrap: wrap;
}

/* Hover Effect */
.footer-contact-modern:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 15px rgba(0, 174, 239, 0.4);
}

/* rtl css */
.rtl {
    direction: rtl;
    text-align: right;
}

.rtl .navbar {
    justify-content: flex-end;
}

.rtl .dropdown-position {
    left: 0;
    right: auto;
}

.rtl .dropdown-toggle::after {
    margin-right: 4px;
}

.cursor-pointer {
    cursor: pointer;
}

.font-size-85 {
    font-size: 85px;
}

.font-size-34 {
    font-size: 34px;
}

.disabled-btn {
    background-color: lightgrey !important;
    border-color: lightgrey !important;
    color: gray;
    opacity: .65;
}

.disabled-btn:hover {
    color: gray;
    text-decoration: none;
}

.black-color {
    color: #212529;
}

.hidden {
    display: none;
}

.font-size-20 {
    font-size: 20px;
}

.font-size-16 {
    font-size: 16px;
}

.font-size-12 {
    font-size: 12px;
}

.black-color {
    color: #212529;
}

.black-color:hover {
    color: #212529;
}

/* Modal style */
.modal-content {
    border-radius: 12px;
    background-clip: padding-box;
    background-color: #ffffff;
    border: 1px solid rgba(0, 0, 0, 0);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
    outline: 0 none;
}

.modal-title {
    font-family: "Roboto", serif;
    font-style: normal;
    font-weight: 600;
    font-size: 24px;
    line-height: 24px;
    color: #2e4051;
}

.save-btn {
    border-radius: 8px;
    padding: 12px 16px;
    font-family: "Roboto", serif;
    font-style: normal;
    font-weight: 500;
    font-size: 16px;
    line-height: 16px;
    text-align: center;
    background-color: white !important;
    color: black !important;
    border-color: black !important;
}

.cancel-btn {
    background-color: white !important;
    color: black !important;
    border-color: black !important;
    border-radius: 8px;
    padding: 12px 16px;
    font-family: 'Roboto', serif;
    font-style: normal;
    font-weight: 500;
    font-size: 16px;
    line-height: 16px;
    text-align: center;
}

.form-control {
    border: 1px solid #dadee2;
    border-radius: 8px !important;
}

.tox-tinymce {
    border: 1px solid #dadee2;
    border-radius: 8px !important;
}

.disabled-toggle-btn {
    pointer-events: none;
    /* Prevents any click events */
    opacity: 0.5;
    /* Optional: visually indicate disabled state */
}

.spinner {
    width: 40px;
    height: 40px;
    border: 4px solid #f3f3f3;
    /* Light gray */
    border-top: 4px solid #3498db;
    /* Blue */
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin: auto;
}

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

    100% {
        transform: rotate(360deg);
    }
}

/* Optional: Center the spinner horizontally and vertically on the page */
.loading-indicator {
    display: flex;
    justify-content: center;
    align-items: center;
}

@media (min-width: 992px) {
    .mobile-nav {
        display: none;
    }
}

/* mobile view */
@media (max-width: 991px) {
    .navbar {
        z-index: 9;
        position: fixed;
    }

    .navbar-collapse {
        padding-bottom: 20px;
    }

    .desktop-nav {
        display: none !important;
    }

    .first-container-main-title {
        font-size: 32px;
    }

    .bg-dark-mobile {
        background-color: #343a40 !important;
    }

    .nav-main-title {
        font-size: 26px;
        line-height: 44.4px;
    }

    .navbar-collapse {
        padding-bottom: 20px;
        max-height: 90vh;
        overflow-y: auto;
    }

    .main-section {
        height: 135vh;
    }

    .main-titles-positions {
        top: 50%;
    }

    .comments-section {
        padding: 40px 20px;
    }

    .categories-section {
        padding: 60px 20px;
    }

    .classes-section {
        padding: 20px;
    }

    .btns-container {
        flex-direction: column;
        /* Stack elements on smaller screens */
        align-items: stretch;
    }

    .tags {
        justify-content: center;
    }

    .book-btn {
        width: 100%;
        /* Makes button take full width */
    }

    .about-grid {
        grid-template-columns: 1fr;
        grid-template-rows: auto;
    }

    .about-text,
    .join-text,
    .app-text {
        padding: 25px 20px;
    }

    .about-image img,
    .join-image img,
    .app-images img {
        height: auto;
    }





    .footer-container {
        flex-direction: column;
        /* Stack items vertically */
        align-items: center;
        /* Center items horizontally */
        text-align: center;
    }

    .footer-left,
    .footer-right {
        width: 100%;
        /* Make both sections take full width */
        display: flex;
        flex-direction: column;
        align-items: center;
        max-width: 100%;
    }

    .footer-right {
        margin-top: 20px;
    }

    .footer-menu {
        flex-direction: column;
        gap: 10px;
    }

    .footer-social-icons .d-flex {
        flex-wrap: wrap;
        justify-content: center;
    }

    .footer-social-icons a {
        margin: 5px;
    }

    .privacy-and-terms-section {
        flex-direction: column;
        align-items: center;
        text-align: center;
        margin-top: 10px;
        padding-bottom: 10px;
    }

    .mobile-scroll-container {
        overflow-x: auto;
        white-space: nowrap;
    }
}

/* FAQ Section */
.faqs-section {
    padding: 5rem;
    /* Add padding around the FAQ section */
    background-color: #FFF;
    /* Set the background color to white */
}

/* FAQ Content and Search Styling */
.faqs-content,
.faqs-search {
    max-width: 900px;
    /* Set the maximum width of the FAQ content */
    margin: 0 auto;
    /* Center the content horizontally */
    background-color: #FFF;
    /* Set the background color to white */
}

/* FAQ Search Section */
.faqs-search {
    display: flex;
    /* Use flexbox to position elements */
    justify-content: end;
    /* Align the search content to the right */
}

/* Styling the search input box */
.faqs-search-content {
    width: 40%;
    /* Set the width of the search box */
    height: 40px;
    /* Set the height of the search box */
    position: relative;
    /* Position the search box relative to the container */
    margin-bottom: 25px;
    /* Add margin at the bottom */
}

/* Input field inside the search box */
.faqs-search input {
    width: 100%;
    /* Make the input field take up 100% of the container width */
    height: 100%;
    /* Make the input field fill the container vertically */
    display: block;
    /* Display input as block element */
    border: 1px solid #039fe5;
    /* Blue border around the search field */
    border-radius: 30px;
    /* Round the corners of the input */
    padding-left: 50px;
    /* Add padding on the left for the search icon */
    outline: none;
    /* Remove the default outline when the input is focused */
    transition: .3s;
    /* Add transition effect for smooth interaction */
    padding-right: 10px;
    /* Add some padding to the right of the input field */
}

/* Hover and focus effects for the input field */
.faqs-search input:hover,
.faqs-search input:focus {
    border: 2px solid #039fe5;
    /* Make the border a bit thicker when hovered or focused */
}

/* Positioning and styling the search icon */
.faqs-search .search-icon {
    position: absolute;
    /* Position the icon absolutely inside the search box */
    top: 50%;
    /* Center the icon vertically */
    left: 4%;
    /* Place the icon slightly towards the left */
    transform: translateY(-50%);
    /* Adjust to perfectly center the icon vertically */
}

/* FAQ Item Styling */
.faq-item {
    position: relative;
    /* Position each FAQ item relative to its container */
    overflow: hidden;
    /* Hide any content that exceeds the container */
    transition: all 0.2s ease;
    /* Add transition effect for smooth reveal */
}

/* Question Text Styling */
.faq-item-question-text {
    margin: 0;
    /* Remove default margin */
    font-size: 20px;
    /* Set font size for question */
    font-weight: 600;
    /* Make the question bold */
    line-height: 26px;
    /* Set line height for proper spacing */
    text-align: left;
}

/* Plus Icon for Expand/Collapse */
.faq-item-question-icon {
    cursor: pointer;
    /* Change cursor to pointer to indicate interactivity */
    font-size: 25px;
    /* Set the size of the plus icon */
    transition: all .3s;
    /* Add smooth transition on hover or click */
    color: #1111117a;
    /* Set a subtle grey color for the icon */
}

/* Answer Text Styling */
.faq-item-answer {
    color: #1111117a;
    /* Light grey color for the answer */
    font-size: 18px;
    /* Font size for the answer */
    font-weight: 400;
    /* Normal font weight */
    line-height: 28px;
    /* Set line height for proper readability */
    max-height: 0;
    /* Initially, the answer should be hidden */
    transition: max-height 0.3s ease;
    /* Smooth transition when expanding */
    overflow: hidden;
    /* Prevent overflow of content */
    pointer-events: none;
    /* Disable interaction with hidden content */
    text-align: left;
}

/* Styling the question section with some space at the bottom */
.faq-item-question {
    margin-bottom: 10px;
    /* Add margin below each question */
    cursor: pointer;
}

/* Expand answer when clicked */
.toggle-item-active .faq-item-answer {
    max-height: fit-content;
    /* Allow the answer to expand */
    pointer-events: initial;
    /* Enable interaction with the expanded content */
    padding-top: 10px;
    /* Add padding when the answer is expanded */
    padding-left: 0;
    /* Remove the padding on the left when expanded */
}

/* Transition and Rotation of the Plus Icon when the question is expanded */
.faq-item-question-icon {
    transition: transform 0.3s ease;
    transform: rotate(0deg);
    /* Initial rotation of the icon */
}

.faq-item-question-icon:hover {
    color: #039fe5;
    /* Change the icon color when hovered */
}

/* Rotate the icon when the FAQ item is active (expanded) */
.toggle-item-active .faq-item-question-icon {
    transform: rotate(45deg);
    /* Rotate the icon to a cross when expanded */
    color: #039fe5;
    /* Change the color of the icon to blue */
}

/* Mobile Responsiveness */
@media (max-width: 991px) {
    .main-titles-positions {
        width: 100%;
        /* Make the title take full width on mobile */
    }

    .first-title h1 {
        font-size: 32px;
        /* Adjust font size of the title for smaller screens */
    }

    .faqs-section {
        padding: 2rem 1rem;
        /* Adjust padding for mobile screens */
    }

    .faq-item-question-text {
        font-size: 14px;
        /* Decrease font size for smaller screens */
    }

    .faq-item-answer {
        font-size: 15px;
        /* Decrease font size of the answer for smaller screens */
    }

    .faq-item-question-icon {
        margin-left: 25px;
        /* Adjust position of the icon */
    }

    .faqs-search-content {
        width: 70%;
        /* Adjust search content width on smaller screens */
    }
}

.about-grid.about-grid-container.white-footer {
    background: #EDEDED !important;
}

.about-grid.about-grid-container {
    display: block !important;

}

.about-grid.about-grid-container.no-image {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    max-width: 1605px;
    margin: auto;
}

.about-grid.about-grid-container.no-image>div {
    display: block !important;
}


@media (min-width: 992px) {
    .about-grid.about-grid-container.no-image>div:last-child {
        padding-left: 20px !important;
    }

}

@media (max-width: 768px) {
    .class-card {
        min-width: 327px;
        max-width: 327px;
    }

    .class-card img {
        width: 100%
    }

    .category-card {
        width: 333px
    }

    .about-grid.about-grid-container>div {
        grid-template-columns: 1fr;
    }

    .join-text,
    .app-text {
        margin-left: 15px;
        margin-right: 15px;
        text-align: center;
    }

    .faq-item-question {
        margin-bottom: 0px;
    }

    .faq-item-answer p {
        margin-bottom: 5px;
    }

    .faqs-search-content {
        margin-bottom: 15px;
        width: 100%
    }
}

@media (max-width: 768px) {
    .footer-right {
        padding-left: 0;
    }

}

.about-grid.about-grid-container .join-our-team-section,
.app-container {
    flex-wrap: wrap;
    padding: 25px 120px;
}

.join-text,
.app-text {
    flex: 1;
    padding-right: 30px !important;
}

.join-image,
.app-imgs {
    text-align: center;
}

.join-image img,
.app-imgs img {
    width: 100%;
    max-width: 500px;
    height: auto;
    border-radius: 10px;
    object-fit: cover;
}


@media (max-width: 768px) {
    .footer {
        max-width: 100vw;
    }

    .join-text,
    .app-text {
        text-align: center;
    }

    .categories-grid,
    .classes-grid,
    .join-our-team-section,
    .footer-container,
    .privacy-and-terms-section,
    .app-container {
        padding: 0 20px !important;
    }

    .category-card,
    .class-card {
        min-width: 310px;
        width: 310px;
    }

    .app-images {
        justify-content: center;
    }
}

@media (max-width: 375px) {

    .categories-grid,
    .classes-grid,
    .join-our-team-section,
    .app-container,
    .footer-container,
    .privacy-and-terms-section {
        padding: 0 10px !important;
    }

    .category-card,
    .class-card {
        min-width: 270px;
        width: 270px;
    }
}





/*service details*/

.services-body .main-section {
    height: 272px;
    background: url('/assets/classesNav.jpeg') no-repeat center center;
    background-size: cover;
}

.services-section,
.fieldworkers-component {
    padding: 20px 120px;
}

.breadcrumb-container {
    margin-bottom: 30px;
}

.breadcrumb {
    background-color: #FFF;
}

.breadcrumb-container ol {
    padding: 0;
}

.breadcrumb-item {
    font-size: 14px;
}

.breadcrumb-item.active {
    color: #353738;
}

.breadcrumb-item a {
    color: #888;
}

.section-title {
    text-align: left;
    margin-bottom: 15px;
}


.service-img-container {
    margin-bottom: 20px;
}

.services-grid {
    display: flex;
    justify-content: start;
    gap: 36px;
    flex-wrap: wrap;
    margin-bottom: 20px;
}

.service-card {
    background-color: #E0E0E0;
    padding: 16px;
    border-radius: 15px;
    width: 177px;
}

.service-icon {
    background-color: #FFF;
    border-radius: 50%;
    width: 60px;
    height: 60px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 10px;
}

.services-description {
    margin-bottom: 30px;
}

/*.services-description p{*/
/*    margin-bottom: 0 !important;*/
/*}*/
.services-description p span {
    font-size: 16px !important;
}

/* Instructors Section */
.instructors-section {
    margin: 30px 0;
}

.instructors-title,
.faqx-title {
    font-weight: bold;
    font-size: 20px;
    margin-bottom: 15px;
}

.instructors-grid {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
}

.instructor-card {
    display: flex;
    justify-content: start;
    gap: 12px;
    align-items: center;
}

.instructor-card img {
    border-radius: 50%;
}

.instructor-card h3 {
    font-size: 15px;
    margin-bottom: 3px;
    font-weight: 600;
}

.instructors-rate {
    display: flex;
    gap: 5px;
    align-items: center;
}

.instructor-review {
    font-size: 12px
}

.equipment-section {
    margin-top: 30px;
    margin-bottom: 30px;
}

.equipment-title,
.experience-title {
    margin-bottom: 8px;
    font-weight: bold;
    font-size: 20px;
}

/*.services-locations {*/
/*    width: 30%;*/
/*}*/

.location-description {
    background-color: #EBEBEB;
    border: 2px solid #000000;
    border-radius: 20px;
    padding: 20px;
    margin-bottom: 15px;
    height: 245px;
}

.pickup-point {
    display: flex;
    justify-content: start;
    gap: 20px;
    align-items: center;
    margin-bottom: 25px;
}

.pickup-point p {
    font-size: 20px;
    font-weight: 600;
    margin: 0;
}

.location-description h4 {
    margin-top: 25px;
    font-size: 17px;
    font-weight: 600;
    margin-bottom: 5px;
}

.location-input {
    position: relative;
}

.location-input input {
    width: 100%;
    border: 1px solid #C5C5C5;
    border-radius: 8px;
    padding: 10px;
    outline: none;
}

.location-input svg {
    position: absolute;
    top: 50%;
    right: 10px;
    transform: translateY(-50%);
}

.address-description {
    background-color: #FFF;
    border: 2px solid #DFDFDF;
    border-radius: 20px;
    padding: 20px;
    height: 245px;
}

/* Media Queries for responsiveness */

@media (max-width: 1024px) {

    .services-section,
    .fieldworkers-component {
        padding: 0 80px;
        /* Adjust padding for tablets */
    }

    .services-content-grid {
        flex-wrap: wrap;
        /* Ensure grid wraps */
        gap: 20px;
        /* Reduced gap for smaller screens */
    }

    .services-grid {
        justify-content: center;
        /* Center align items */
    }

    .service-card {
        width: 100%;
        /* Make the service cards full width on smaller screens */
        margin-bottom: 15px;
        /* Add margin between cards */
    }

    .services-locations {
        width: 50%;
        /* Adjust width of locations */
    }

    .location-description,
    .address-description {
        height: auto;
        /* Allow height to auto adjust on smaller screens */
    }
}

@media (max-width: 768px) {

    .services-section,
    .fieldworkers-component {
        padding: 3rem 1rem !important;
        /* Less padding on smaller devices */
    }

    .services-content-grid {
        flex-wrap: wrap;
        /* Ensure content wraps */
        gap: 15px;
    }

    .services-grid {
        justify-content: center;
    }

    .service-card {
        width: 100%;
        /* Full width for service cards */
    }

    .instructors-grid {
        flex-direction: column;
        /* Stack instructor cards vertically */
        gap: 15px;
    }

    .instructor-card {
        flex-direction: column;
        /* Stack images and text */
    }

    .services-locations {
        width: 100%;
        /* Full width on mobile */
    }

    .location-description,
    .address-description {
        height: auto;
        /* Auto height on smaller screens */
    }

    .pickup-point {
        flex-direction: column;
        /* Stack pickup points vertically */
    }

    .instructor-card>div {
        text-align: center;
    }

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

    .service-icon {
        margin: 0 auto;
    }

    .services-grid {
        gap: 0;
    }
}

@media (max-width: 425px) {

    .services-section,
    .fieldworkers-component {
        padding: 0 15px;
        /* Small padding on very small devices */
    }

    .services-locations {
        width: 100%;
    }

    .pickup-point {
        text-align: center;
        /* Center align pickup points on very small screens */
    }

    .location-input input {
        padding: 8px;
        /* Less padding in input on small screens */
    }
}


.op-alert {
    --bg: #eef6ff;
    --border: #cfe3ff;
    --text: #084298;
    --shadow: 0 8px 24px rgba(2, 42, 126, .08);
    position: relative;
    display: flex;
    gap: 12px;
    align-items: start;
    padding: 12px 44px 12px 12px;
    border: 1px solid var(--border);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, .85), rgba(255, 255, 255, .75)) padding-box,
        radial-gradient(120% 120% at 0% 0%, #dcebff 0%, #f6fbff 60%) border-box;
    border-radius: 10px;
    color: var(--text);
    box-shadow: var(--shadow);
}

.op-alert-info {
    --bg: #eef6ff;
    --border: #cfe3ff;
    --text: #084298;
}

.op-alert__icon {
    flex: 0 0 auto;
    width: 28px;
    height: 28px;
    display: grid;
    place-items: center;
    color: #0d6efd;
    background: #e7f1ff;
    border-radius: 999px;
    border: 1px solid #cfe3ff;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8);
}

.op-alert__content {
    line-height: 1.45;
    font-size: 14px;
}

.op-alert__close {
    position: absolute;
    right: 8px;
    top: 6px;
    width: 28px;
    height: 28px;
    border: 0;
    background: transparent;
    border-radius: 6px;
    color: #0d6efd;
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
}

.op-alert__close:hover {
    background: rgba(13, 110, 253, .08);
}

/* small motion for polish */
@media (prefers-reduced-motion: no-preference) {
    .op-alert {
        animation: opAlertIn .24s ease-out both;
    }

    @keyframes opAlertIn {
        from {
            transform: translateY(-2px);
            opacity: .0;
        }

        to {
            transform: translateY(0);
            opacity: 1;
        }
    }
}

.op-alert {
    --bg: #eef6ff;
    --border: #cfe3ff;
    --text: #084298;
    --shadow: 0 8px 24px rgba(2, 42, 126, .08);
    position: relative;
    display: flex;
    gap: 12px;
    align-items: center;
    padding: 12px 44px 12px 12px;
    border: 1px solid var(--border);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, .85), rgba(255, 255, 255, .75)) padding-box,
        radial-gradient(120% 120% at 0% 0%, #dcebff 0%, #f6fbff 60%) border-box;
    border-radius: 10px;
    color: var(--text);
    box-shadow: var(--shadow);
}

.op-alert-info {
    --bg: #eef6ff;
    --border: #cfe3ff;
    --text: #084298;
}

.op-alert__icon {
    flex: 0 0 auto;
    width: 28px;
    height: 28px;
    display: grid;
    place-items: center;
    color: #0d6efd;
    background: #e7f1ff;
    border-radius: 999px;
    border: 1px solid #cfe3ff;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8);
}

.op-alert__content {
    line-height: 1.45;
    font-size: 14px;
}

.op-alert__close {
    position: absolute;
    right: 8px;
    top: 12px;
    width: 28px;
    height: 28px;
    border: 0;
    background: transparent;
    border-radius: 6px;
    color: #0d6efd;
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
}

.op-alert__close:hover {
    background: rgba(13, 110, 253, .08);
}

/* small motion for polish */
@media (prefers-reduced-motion: no-preference) {
    .op-alert {
        animation: opAlertIn .24s ease-out both;
    }

    @keyframes opAlertIn {
        from {
            transform: translateY(-2px);
            opacity: .0;
        }

        to {
            transform: translateY(0);
            opacity: 1;
        }
    }
}

/* ===== Packages (CSS) ===== */
:root {
    --ink: #0b1220;
    --muted: #5f6b7a;
    --line: #e8edf3;
    --bg: #fafbfc;
    --brand: #111827;
    --blue: #2563eb;
    --chip: #eef2ff;
}

.packages {
    margin-top: 24px;
}

.packages__head {
    margin-bottom: 14px;
}

.packages__head h3 {
    margin: 0;
    font-size: 20px;
    letter-spacing: .2px;
}

.packages__sub {
    margin: 0;
    color: var(--muted);
    font-size: 13.5px;
}

.packages__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 14px;
    margin-bottom: 15px;
}

@media (min-width: 860px) {
    .packages__grid {
        grid-template-columns: 1fr 1fr 1fr;
    }
}

.pkg-card {
    display: grid;
    grid-template-columns: 1fr;
    row-gap: 12px;
    padding: 14px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 4px 18px rgba(16, 24, 40, .05);
}

.pkg-card__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.pkg-card__title {
    margin: 0;
    font-size: 16px;
    font-weight: 800;
    letter-spacing: .2px;
}

.pkg-card__chips {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 9px;
    border-radius: 999px;
    background: var(--chip);
    color: #1f2937;
    font-weight: 600;
    font-size: 12.5px;
}

.chip svg {
    color: var(--blue);
}

.pkg-card__metrics {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 12px 20px;
    flex-direction: column;
}

.metric {
    display: grid;
    grid-template-columns: 18px 130px auto;
    gap: 8px;
    align-items: center;
}

.metric__icon {
    display: grid;
    place-items: center;
    color: var(--blue);
}

.metric__label {
    color: var(--muted);
    font-size: 12.5px;
}

.metric__value {
    font-size: 13.5px;
    font-weight: 700;
}

.pkg-card__actions {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
}

.btn {
    appearance: none;
    background: var(--brand);
    color: #fff;
    padding: 9px 14px;
    border-radius: 10px;
    font-weight: 700;
    font-size: 13.5px;
    cursor: pointer;
}

.btn:hover {
    filter: brightness(.96);
}

.btn--ghost {
    background: #fff;
    color: var(--ink);
    border-color: var(--line);
}

.packages__empty {
    display: flex;
    align-items: center;
    gap: 8px;
    border: 1px dashed var(--line);
    border-radius: 12px;
    padding: 14px;
    color: var(--muted);
    background: #fff;
}

/* Optional: tighten spacing below description-to-packages boundary */
.services-description+.packages {
    margin-top: 18px;
}


/* 1) Base chip needs positioning */
.chip {
    position: relative;
    /* required for absolute tooltip */
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

/* 2) Tooltip above + centered */
.chip[data-tooltip]::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: 100%;
    /* place above */
    left: 50%;
    transform: translate(-50%, -8px);
    background: #111;
    color: #fff;
    font-size: 12px;
    line-height: 1;
    padding: 6px 8px;
    border-radius: 4px;
    white-space: nowrap;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .18);
    opacity: 0;
    pointer-events: none;
    z-index: 9999;
    /* float above */
    transition: opacity .15s ease;
}



/* 4) Show on hover/focus */
.chip:hover::after,
.chip:hover::before,
.chip:focus-visible::after,
.chip:focus-visible::before {
    opacity: 1;
}

/* 5) Make sure parents don't clip the tooltip */
.pkg-card,
.packages__grid,
.packages {
    overflow: visible;
    /* IMPORTANT if something was overflow:hidden */
    position: relative;
    /* create stacking context */
}


/* ===== Group Events (no :root) ===== */
.ge-section {
    font-family: Inter, system-ui, Segoe UI, Roboto, Arial, sans-serif;
    color: #0f172a;
    margin-top: 28px
}

.ge-header h3 {
    font-size: 22px;
    margin: 0 0 4px
}

.ge-sub,
.vid3-sub {
    margin: 0 0 16px;
    color: #64748b;
    font-size: 14px
}



/* Cards (List) */
.ge-card {
    position: relative;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    padding: 16px;
    box-shadow: 0 10px 30px rgba(2, 6, 23, .08);
    display: grid;
    gap: 12px;
    margin-bottom: 12px
}

.ge-card__head {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    align-items: center
}

.ge-card__title {
    margin: 0;
    font-size: 16px
}

.ge-chips {
    display: flex;
    gap: 8px;
    flex-wrap: wrap
}

.chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    border-radius: 999px;
    font-size: 12px;
    line-height: 1;
    border: 1px solid transparent
}

.chip-soft {
    background: #eef2ff;
    color: #3730a3;
    border-color: #e0e7ff
}

.chip-outline {
    background: #ffffff;
    color: #334155;
    border-color: #e2e8f0
}

.ge-card__row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
    font-size: 14px;
    color: #0f172a
}

.ge-card__row .sep {
    width: 1px;
    height: 14px;
    background: #e2e8f0;
    display: inline-block;
    margin: 0 2px
}

.ge-icon {
    display: inline-flex;
    align-items: center
}

.ge-price {
    font-weight: 600
}

.ge-cap {
    display: flex;
    align-items: center;
    gap: 10px;
    justify-content: space-between
}

.ge-cap__bar {
    flex: 1;
    height: 6px;
    background: #eef2f7;
    border-radius: 999px;
    overflow: hidden
}

.ge-cap__bar>span {
    display: block;
    height: 100%;
    background: linear-gradient(90deg, #0ea5e9, #22d3ee)
}

.ge-cap__legend {
    font-size: 12px;
    color: #64748b
}

.ge-cta {
    margin-left: auto;
    padding: 10px 14px;
    border-radius: 10px;
    border: 1px solid transparent;
    background: #0ea5e9;
    color: #fff;
    font-weight: 600;
    font-size: 14px;
    cursor: pointer
}

.ge-cta:hover {
    background: #0369a1
}

/* Calendar view */
.ge-calendar-wrap {
    display: grid;
    grid-template-columns: 1fr 320px;
    gap: 16px
}

@media (max-width:900px) {
    .ge-calendar-wrap {
        grid-template-columns: 1fr
    }
}

.ge-calendar {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    padding: 16px;
    box-shadow: 0 10px 30px rgba(2, 6, 23, .08)
}

.cal-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px
}

.cal-head strong {
    font-weight: 700
}

.cal-head .nav button {
    border: 1px solid #e2e8f0;
    background: #ffffff;
    border-radius: 8px;
    padding: 6px 10px;
    opacity: .6
}

.cal-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 6px
}

.cal-days span {
    font-size: 12px;
    color: #64748b;
    text-align: center;
    padding: 6px 0
}

.cal-dates span {
    aspect-ratio: 1/1;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #f1f5f9;
    border-radius: 10px;
    font-size: 14px;
    background: #ffffff;
    position: relative
}

.cal-dates span.has-dot::after {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 999px;
    background: #0ea5e9;
    position: absolute;
    transform: translateY(14px)
}

.cal-dates span.selected {
    outline: 2px solid #0ea5e9;
    outline-offset: 2px
}

.cal-legend {
    margin-top: 10px;
    font-size: 12px;
    color: #64748b;
    display: flex;
    align-items: center;
    gap: 8px
}

.cal-legend .dot {
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: #0ea5e9;
    display: inline-block
}

.ge-sidecard {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    padding: 16px;
    box-shadow: 0 10px 30px rgba(2, 6, 23, .08);
    display: grid;
    gap: 10px;
    height: fit-content
}

.ge-sidecard h4 {
    margin: 0
}

.side-meta {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 8px;
    color: #0f172a
}

.side-meta li {
    display: flex;
    align-items: center;
    gap: 10px
}

/* Tabs visibility control */
/* #ge-t ===== Group Events (no :root) ===== */
.ge-section {
    font-family: Inter, system-ui, Segoe UI, Roboto, Arial, sans-serif;
    color: #0f172a;
    margin-top: 28px
}

.ge-header h3 {
    font-size: 22px;
    margin: 0 0 4px
}

.ge-sub {
    margin: 0 0 16px;
    color: #64748b;
    font-size: 14px
}



/* Cards (List) */
.ge-card {
    position: relative;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    padding: 16px;
    box-shadow: 0 10px 30px rgba(2, 6, 23, .08);
    display: grid;
    gap: 12px;
    margin-bottom: 12px
}

.ge-card__head {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    align-items: center
}

.ge-card__title {
    margin: 0;
    font-size: 16px
}

.ge-chips {
    display: flex;
    gap: 8px;
    flex-wrap: wrap
}

.chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    border-radius: 999px;
    font-size: 12px;
    line-height: 1;
    border: 1px solid transparent
}

.chip-soft {
    background: #eef2ff;
    color: #3730a3;
    border-color: #e0e7ff
}

.chip-outline {
    background: #ffffff;
    color: #334155;
    border-color: #e2e8f0
}

.ge-card__row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
    font-size: 14px;
    color: #0f172a
}

.ge-card__row .sep {
    width: 1px;
    height: 14px;
    background: #e2e8f0;
    display: inline-block;
    margin: 0 2px
}

.ge-icon {
    display: inline-flex;
    align-items: center
}

.ge-price {
    font-weight: 600
}

.ge-cap {
    display: flex;
    align-items: center;
    gap: 10px;
    justify-content: space-between
}

.ge-cap__bar {
    flex: 1;
    height: 6px;
    background: #eef2f7;
    border-radius: 999px;
    overflow: hidden
}

.ge-cap__bar>span {
    display: block;
    height: 100%;
    background: linear-gradient(90deg, #0ea5e9, #22d3ee)
}

.ge-cap__legend {
    font-size: 12px;
    color: #64748b
}

.ge-cta {
    margin-left: auto;
    padding: 10px 14px;
    border-radius: 10px;
    border: 1px solid transparent;
    background: #0ea5e9;
    color: #fff;
    font-weight: 600;
    font-size: 14px;
    cursor: pointer
}

.ge-cta:hover {
    background: #0369a1
}

/* Calendar view */
.ge-calendar-wrap {
    display: grid;
    grid-template-columns: 1fr 320px;
    gap: 16px
}

@media (max-width:900px) {
    .ge-calendar-wrap {
        grid-template-columns: 1fr
    }
}

.ge-calendar {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    padding: 16px;
    box-shadow: 0 10px 30px rgba(2, 6, 23, .08)
}

.cal-ab-list:checked~#ge-panel-list {
    display: block
}

#ge-tab-list:checked~#ge-panel-cal {
    display: none
}

#ge-tab-cal:checked~#ge-panel-list {
    display: none
}

#ge-tab-cal:checked~#ge-panel-cal {
    display: block
}

#ge-panel-cal[hidden] {
    display: none !important
}

/* Availability line */
.ge-availability {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin: 8px 0 6px;
    font-size: 14px;
    color: #0f172a;
}

.ge-availability .label {
    color: #64748b;
    font-weight: 500;
    margin-right: 4px;
}

.ge-availability .text {
    white-space: nowrap;
}

.ge-availability .divider {
    color: #94a3b8;
    margin: 0 4px;
}

.ge-availability .dot {
    width: 10px;
    height: 10px;
    border-radius: 999px;
    display: inline-block;
}

.ge-availability .dot-green {
    background: #22c55e;
    box-shadow: 0 0 0 2px rgba(34, 197, 94, .15);
}

.ge-availability .dot-red {
    background: #ef4444;
    box-shadow: 0 0 0 2px rgba(239, 68, 68, .15);
}

/* Multiple Days Table Styles */
.ge-multiple-days{margin-top:16px;padding-top:16px;border-top:1px solid #e2e8f0}
.ge-multiple-days__intro{margin-bottom:12px}
.ge-multiple-days__text{
    font-size:14px;color:#64748b;line-height:1.5;margin:0;
    padding:12px 16px;background:#f8fafc;border-radius:8px;border-left:3px solid #0ea5e9
}
.ge-multiple-days__table-wrapper{overflow-x:auto}
.ge-multiple-days__table{
    width:100%;border-collapse:collapse;font-size:14px;
    border:1px solid #e2e8f0;border-radius:10px;overflow:hidden
}
.ge-multiple-days__table thead{background:#f8fafc}
.ge-multiple-days__table th{
    padding:12px 16px;text-align:left;font-weight:600;color:#0f172a;
    border-bottom:1px solid #e2e8f0;white-space:nowrap
}
.ge-multiple-days__table th .ge-icon{margin-right:6px;color:#64748b}
.ge-multiple-days__table td{
    padding:12px 16px;border-bottom:1px solid #f1f5f9;vertical-align:middle
}
.ge-multiple-days__table tbody tr:last-child td{border-bottom:none}
.ge-multiple-days__table tbody tr:hover{background:#fafbfc}
.ge-multiple-days__datetime{display:flex;flex-direction:column;gap:4px}
.ge-multiple-days__date,.ge-multiple-days__time{
    display:flex;align-items:center;gap:6px;color:#0f172a
}
.ge-multiple-days__date .ge-icon,.ge-multiple-days__time .ge-icon{color:#64748b}
.ge-multiple-days__action-col{width:120px}
.ge-slot-btn{
    display:inline-flex;align-items:center;justify-content:center;
    padding:8px 16px;border-radius:8px;border:none;
    background:#0ea5e9;color:#fff;font-weight:600;font-size:13px;
    cursor:pointer;transition:background .2s ease;white-space:nowrap
}
.ge-slot-btn:hover:not(:disabled){background:#0369a1}
.ge-slot-btn--booked,.ge-slot-btn:disabled{
    background:#e2e8f0;color:#94a3b8;cursor:not-allowed
}
@media (max-width:600px){
    .ge-multiple-days__table th,.ge-multiple-days__table td{padding:10px 12px;font-size:13px}
    .ge-slot-btn{padding:6px 12px;font-size:12px}
}

/* Optional: hide the progress bar block if you only want the text line */
.ge-cap {
    display: none;
}

/* Header bar */
.contractors-header,
.faqx-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 14px 0 10px;
    gap: 12px;
}

.instructors-title,
.faqx-title {
    margin: 0;
    font-size: 1.1rem;
    letter-spacing: .08em;
    font-weight: 800;
    color: #111;
}

/* CTA pill button */
.cta-pill,
.faqx-pill {
    background: transparent;
    color: #000;
    box-shadow: none;
    font-size: 14px;
    text-decoration: underline;
    border: none;
    outline: none;
}

.cta-pill:focus,
.faqx-pill:focus {
    outline: none;
}

.cta-pill .cta-count,
.faqx-pill .faqx-count {
    opacity: .85;
    font-weight: 700;
}

.cta-pill .cta-arrow,
.faqx-pill .faqx-arrow {
    width: 18px;
    height: 18px;
    transition: transform .15s ease;
}

.cta-pill:hover,
.faqx-pill:hover {
    transform: translateY(-1px);
    border-color: rgba(255, 255, 255, .16);
}

@media (max-width: 560px) {
    .contractors-header {
        flex-wrap: wrap;
    }
}

/* Grid + cards (keep your existing styles; these just ensure harmony) */
.instructors-grid {
    --card-bg: #fff;
    --card-border: #ececec;
    --card-shadow: 0 6px 20px rgba(0, 0, 0, .06);
    --text: #111;
    --muted: #6b7280;
    --accent: #f59e0b;
    --badge-bg: #111;
    --badge-text: #fff;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 18px;
    margin-top: 12px;
}

.instructor-card {
    display: flex;
    gap: 14px;
    padding: 14px;
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: 14px;
    box-shadow: var(--card-shadow);
    align-items: flex-start;
    transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}

.instructor-card:hover {
    transform: translateY(-2px);
    border-color: #ddd;
    box-shadow: 0 10px 26px rgba(0, 0, 0, .08);
}

.instructor-avatar img {
    width: 56px;
    height: 56px;
    object-fit: cover;
    border-radius: 50%;
    background: #f3f4f6;
}

.instructor-name {
    margin: 2px 0 6px 0;
    font-size: 1rem;
    line-height: 1.2;
    font-weight: 800;
    color: var(--text);
}

.rating-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.stars {
    display: inline-flex;
    gap: 3px;
    color: var(--accent);
}

.star {
    width: 18px;
    height: 18px;
    display: inline-block;
}

.star--empty {
    opacity: .9;
}

.rating-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 34px;
    padding: 2px 8px;
    border-radius: 999px;
    background: var(--badge-bg);
    color: var(--badge-text);
    font-size: .78rem;
    font-weight: 800;
    line-height: 1;
}

.reviews {
    color: var(--muted);
    font-size: .9rem;
}

.muted {
    color: var(--muted);
}




/* Accordion */
.faqx-accordion {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.faqx-item {
    border: 1px solid #ececec;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 6px 18px rgba(0, 0, 0, .06);
    overflow: hidden;
    transition: border-color .12s ease, box-shadow .12s ease, transform .12s ease;
}

.faqx-item:hover {
    transform: translateY(-1px);
    border-color: #e2e2e2;
    box-shadow: 0 10px 24px rgba(0, 0, 0, .08);
}

.faqx-q {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 12px;
    justify-content: space-between;
    text-align: left;
    background: transparent;
    border: 0;
    padding: 14px 16px;
    cursor: pointer;
    font-weight: 800;
    color: #111;
    outline: none;
}

.faqx-q:focus {
    outline: none
}

.faqx-q .faqx-qtext {
    flex: 1 1 auto;
}

.faqx-q .faqx-date {
    color: #6b7280;
    font-weight: 600;
    font-size: .85rem;
    margin-right: 8px;
}

.faqx-q .faqx-chev {
    width: 20px;
    height: 20px;
    transition: transform .18s ease;
    color: #0f172a;
}

.faqx-item.faqx-expanded .faqx-chev {
    transform: rotate(180deg);
}

.faqx-a {
    padding: 0 16px;
    height: 0;
    overflow: hidden;
    transition: height .22s ease;
}

.faqx-item.faqx-expanded .faqx-a {
    padding-bottom: 12px;
    height: auto !important;
}

.faqx-atext {
    padding: 4px 0 2px;
    color: #111;
    line-height: 1.6;
}

.faqx-atext p {
    margin: 0 0 10px;
}

/* Videos */
.vid3-section {
    --bg: #fff;
    --card: #fff;
    --border: #ececec;
    --shadow: 0 8px 24px rgba(0, 0, 0, .07);
    --text: #0f172a;
    --muted: #6b7280;
    --accent: #111;
    margin-top: 18px;
}

.vid3-title {
    margin: 0;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--text);
}

.vid3-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}

@media (max-width: 960px) {
    .vid3-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 600px) {
    .vid3-grid {
        grid-template-columns: 1fr;
    }
}

.vid3-card {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 16px;
    box-shadow: var(--shadow);
    overflow: hidden;
    transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}

.vid3-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 14px 36px rgba(0, 0, 0, .10);
    border-color: #e4e4e7;
}

.vid3-thumb {
    position: relative;
    display: block;
    aspect-ratio: 16/9;
    overflow: hidden;
    background: #f3f4f6;
}

.vid3-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .35s ease;
}

.vid3-card:hover .vid3-thumb img {
    transform: scale(1.04);
}

.vid3-thumb::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0, 0, 0, .0) 45%, rgba(0, 0, 0, .28) 100%);
    pointer-events: none;
}

.vid3-play {
    position: absolute;
    inset: auto auto 12px 12px;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .96);
    box-shadow: 0 8px 16px rgba(0, 0, 0, .22);
    display: grid;
    place-items: center;
    transform: translate(-50%, -50%);
    top: 50%;
    left: 50%;
}

.vid3-play::before {
    content: "";
    display: block;
    border-left: 12px solid var(--accent);
    border-top: 8px solid transparent;
    border-bottom: 8px solid transparent;
    margin-left: 4px;
}

.vid3-duration {
    position: absolute;
    right: 12px;
    bottom: 14px;
    background: rgba(17, 17, 17, .9);
    color: #fff;
    font-weight: 700;
    font-size: .8rem;
    padding: 4px 8px;
    border-radius: 999px;
}

.vid3-modal {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .6);
    display: none;
    z-index: 70;
}

.vid3-modal:target {
    display: block;
}

.vid3-modal-inner {
    position: absolute;
    inset: 0;
    margin: auto;
    width: min(960px, 92vw);
    height: min(540px, 52vw);
    background: #000;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0, 0, 0, .5);
}

.vid3-player {
    position: relative;
    width: 100%;
    height: 100%;
}

.vid3-player iframe,
.vid3-player video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

.vid3-modal-close {
    position: absolute;
    inset: 0;
}

.vid3-modal-close::after {
    content: "";
    position: absolute;
    top: 16px;
    right: 16px;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .95);
    box-shadow: 0 10px 22px rgba(0, 0, 0, .25);
    mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 24 24"><path fill="black" d="M18.3 5.7a1 1 0 0 0-1.4-1.4L12 9.17 7.1 4.3a1 1 0 1 0-1.4 1.4L10.83 12l-5.13 4.9a1 1 0 1 0 1.4 1.45L12 14.83l4.9 5.12a1 1 0 0 0 1.45-1.4L13.17 12z"/></svg>') center / 60% 60% no-repeat;
}

/* Quick Inquiry */
.qi {
    --qi-accent-start: #0ea5e9;
    --qi-accent-end: #60a5fa;
    --qi-ink: #0f172a;
    --qi-muted: #6b7280;
    --qi-line: #e9e9ef;
    --qi-surface: #ffffff;
    --qi-field: #f9fafb;
    margin-left: auto;
}

@media (max-width: 992px) {
    .qi {
        width: 100%;
        margin: 16px 0 0;
    }
}

.qi-card {
    background: var(--qi-surface);
    border-radius: 18px;
    overflow: hidden;
}

.qi-head {
    padding: 16px 18px;
    color: #fff;
    background: linear-gradient(45deg, var(--qi-accent-start), var(--qi-accent-end));
}

.qi-head h3 {
    margin: 0;
    font: 700 20px/1.1 system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial;
}

.qi-head p {
    margin: 4px 0 0;
    font: 400 13px/1.2 system-ui;
    opacity: .95;
}

.qi-body {
    padding: 14px 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.qi-input,
.qi-select,
.qi-textarea {
    width: 100%;
    background: var(--qi-field);
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    padding: 12px 14px;
    font: 500 14px/1.2 system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial;
    color: var(--qi-ink);
    transition: border-color .15s, box-shadow .15s, background .15s;
}

.qi-input::placeholder,
.qi-textarea::placeholder {
    color: #9ca3af;
}

.qi-input:focus,
.qi-select:focus,
.qi-textarea:focus {
    outline: none;
    background: #fff;
    border-color: #bcd7ff;
    box-shadow: 0 0 0 3px rgba(96, 165, 250, .25);
}

.qi-select {
    appearance: none;
    background-image:
        linear-gradient(45deg, transparent 50%, #9ca3af 50%),
        linear-gradient(135deg, #9ca3af 50%, transparent 50%);
    background-position: calc(100% - 22px) 50%, calc(100% - 16px) 50%;
    background-size: 6px 6px, 6px 6px;
    background-repeat: no-repeat;
    padding-right: 36px;
}

.qi-textarea {
    resize: vertical;
    min-height: 88px;
}

.qi-check {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #334155;
    font: 500 14px/1.2 system-ui;
    user-select: none;
}

.qi-check input {
    width: 16px;
    height: 16px;
    accent-color: #111827;
}

.qi-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 44px;
    border: 0;
    border-radius: 12px;
    background: var(--brand);
    color: #fff;
    font: 700 14px / 1 system-ui, -apple-system, Segoe UI, Roboto, Arial;
    cursor: pointer;
    transition: filter .12s ease, transform .12s ease, box-shadow .12s ease;
    width: 100%;
}

.qi-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 8px 18px rgba(0, 0, 0, .15);
}

.qi-btn:active {
    transform: translateY(0);
    box-shadow: none;
    opacity: .95;
}

.qi-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.qi-row .qi-select {
    flex: 1;
}

.qi-clear {
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #e5e7eb;
    background: #ffffff;
    color: #6b7280;
    border-radius: 10px;
    cursor: pointer;
    transition: background .15s, color .15s, border-color .15s, transform .12s;
}

.qi-clear:hover {
    background: #fff5f5;
    color: #ef4444;
    border-color: #fecaca;
    transform: translateY(-1px);
}

.qi-clear:active {
    transform: translateY(0);
}

.qi-clear:disabled {
    opacity: .45;
    cursor: not-allowed;
    transform: none;
}

/* Appointment */
.appt2-head {
    padding: 0px 0 8px 0;
    background: #f8fafc;
    border-bottom: 1px solid var(--line);
}

.appt2-title {
    margin: 0;
    color: var(--ink);
    font: 800 18px/1.2 system-ui, -apple-system, Segoe UI, Roboto, Arial;
    letter-spacing: .01em;
}

.appt2-sub {
    margin: 4px 0 0;
    color: var(--muted);
    font: 500 12px/1.35 system-ui, -apple-system, Segoe UI, Roboto, Arial;
}

.appt2-body {
    padding: 0 0 12px 0;
    display: grid;
    gap: 12px;
}

.appt2-group {
    position: relative;
}

.appt2-input {
    width: 100%;
    height: 44px;
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 0 48px 0 14px;
    font: 500 14px/1 system-ui, -apple-system, Segoe UI, Roboto, Arial;
    color: var(--ink);
    transition: border-color .15s, box-shadow .15s, background .15s;
}

.appt2-input::placeholder {
    color: #9ca3af;
}

.appt2-input:focus {
    outline: none;
    background: #fff;
    border-color: #c7d2fe;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, .18);
}

.appt2-iconbtn {
    position: absolute;
    right: 6px;
    top: 6px;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 8px;
    background: #000;
    color: #fff;
    cursor: pointer;
    transition: filter .12s ease, transform .12s ease, box-shadow .12s ease;
}

.appt2-iconbtn:hover {
    filter: brightness(.97);
    transform: translateY(-1px);
    box-shadow: 0 8px 18px rgba(14, 165, 233, .22);
}

.appt2-iconbtn:active {
    transform: translateY(0);
    box-shadow: none;
}

.appt2-cta.gift-button {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    cursor: pointer;
    transition: filter .12s ease, transform .12s ease, box-shadow .12s ease;
    width: 100%;
    height: 38px;

}

.appt2-cta svg {
    width: 18px;
    height: 18px;
}

.appt2-cta:active {
    transform: translateY(0);
    box-shadow: none;
}

@media (max-width: 640px) {
    .appt2-card {
        max-width: 100%;
    }

    .appt2-head {
        padding: 12px;
    }

    .appt2-body {
        padding: 0 12px 12px 12px;
        gap: 10px;
    }
}

/* Offer / Discount */
.offerpro {
    --offerpro-primary: #1E3A8A;
    --offerpro-primary-600: #2563EB;
    --offerpro-bg: #fff;
    --offerpro-border: #E6EAF2;
    --offerpro-muted: #6B7280;
    --offerpro-text: #0F172A;
    --offerpro-row: #F8FAFC;
    background: var(--offerpro-bg);
    border: 1px solid var(--offerpro-border);
    border-radius: 16px;
    box-shadow: 0 10px 26px rgba(15, 23, 42, .08);
    overflow: hidden;
    margin: 15px 0;
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", Arial, "Noto Sans";
}

.offerpro__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 16px 10px 16px;
    background: linear-gradient(180deg, #F1F5FF 0%, #FFFFFF 100%);
    border-bottom: 1px solid #f1f5f9;
}

.offerpro__kicker {
    display: inline-flex;
    gap: 8px;
    align-items: center;
    color: var(--offerpro-primary);
    font-weight: 700;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .04em;
    background: rgba(37, 99, 235, .10);
    padding: 6px 10px;
    border-radius: 999px;
}

.offerpro__table {
    list-style: none;
    padding: 0;
    margin: 0;
}

.offerpro__row {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 12px;
    align-items: center;
    padding: 12px 16px;
    font-size: 14px;
    color: var(--offerpro-text);
}

.offerpro__row:nth-child(odd) {
    background: var(--offerpro-row);
}

.offerpro_amount {
    font-variant-numeric: tabular-nums;
    font-weight: 700;
    color: #0F172A;
}

/* Price Card */
.pc-card {
    background: #fff;
    border: 1px solid #E9EEF5;
    border-radius: 14px;
    padding: 18px 18px 14px;
    box-shadow: 0 8px 28px rgba(16, 24, 40, .06);
    margin-bottom: 12px;
}

.pc-card__header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
}

.pc-chip {
    background: #EEF2FF;
    color: #4338CA;
    font-size: .78rem;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 999px;
}

.pc-price {
    font-size: 1.6rem;
    font-weight: 800;
    color: #111827;
    letter-spacing: .2px;
}

.pc-meta {
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px dashed #E5E7EB;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.pc-meta__item {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #4B5563;
    font-weight: 600;
    font-size: .92rem;
}

.pc-meta__item svg {
    width: 16px;
    height: 16px;
    opacity: .8;
}

.pc-meta__item--right {
    margin-left: auto;
}

.pc-card:hover {
    border-color: #E2E8F0;
    box-shadow: 0 10px 34px rgba(17, 24, 39, .08);
}

.pc-meta--spaced {
    border-top: 0;
    width: 100%;
}

/* Attribute grid */
.attrgrid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 16px;
}

.attrcard {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, .04);
}

.attrcard__hd {
    padding: 12px 16px 8px 16px;
}

.attrcard__title {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    color: #111827;
}

.attrcard__list {
    margin: 0;
    padding: 6px 10px 10px 10px;
    list-style: none;
}

.attrcard__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 10px 8px;
    border-top: 1px solid #f1f5f9;
}

.attrcard__row:first-child {
    border-top: none;
}

.attrcard__text {
    color: #1f2937;
}

.attrcard__price {
    color: #111827;
    font-weight: 600;
    white-space: nowrap;
}

/* Full pricing modal */
.fullprice {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: none;
}

.fullprice[aria-hidden="false"] {
    display: block;
}

.fullprice__overlay {
    position: absolute;
    inset: 0;
    background: rgba(17, 24, 39, .5);
}

.fullprice__dialog {
    position: relative;
    margin: 4vh auto 0;
    width: min(920px, 92vw);
    max-height: 92vh;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, .2);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.fullprice__hd {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px 0 20px;
    border-bottom: 0
}

.fullprice__x {
    background: none;
    border: 0;
    font-size: 28px;
    line-height: 1;
    cursor: pointer;
    color: #475569;
}

.fullprice__summary {
    display: flex;
    gap: 12px;
    padding: 0px 20px;
    border-bottom: 1px solid #f1f5f9;
    background: linear-gradient(180deg, #ffffff 0%, #fafafa 100%);
    flex-wrap: wrap;
}

.fullprice__pill {
    min-width: 150px;
    margin-bottom: 9px
}

.fullprice__pill--accent {
    border-color: #dbeafe;
    background: #eff6ff;
}

.fullprice__pill-main {
    font-weight: 800;
    color: #111827;
}

.fullprice__pill-sub {
    font-size: .8rem;
    color: #6b7280;
}

.fullprice__body {
    padding: 8px 20px 20px;
    overflow: auto;
    max-height: 60vh;
}

.fullprice__block {
    border: 1px solid #f1f5f9;
    border-radius: 10px;
    margin: 14px 0;
}

.fullprice__block-hd {
    padding: 10px 14px;
    font-weight: 700;
    color: #111827;
    background: #f8fafc;
    border-bottom: 1px solid #f1f5f9;
}

.fullprice__row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 14px;
    border-top: 1px dashed #f1f5f9;
}

.fullprice__row:first-of-type {
    border-top: none;
}

.fullprice__cell {
    color: #374151;
}

.fullprice__cell--right {
    font-weight: 700;
    color: #111827;
}

/* Instructors modal */
.imodal[hidden] {
    display: none;
}

.imodal {
    position: fixed;
    inset: 0;
    z-index: 1000;
}

.imodal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(17, 24, 39, .55);
    backdrop-filter: saturate(1.2) blur(2px);
}

.imodal__dialog {
    position: relative;
    z-index: 1;
    width: min(820px, calc(100vw - 32px));
    max-height: calc(100vh - 80px);
    margin: 40px auto;
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, .25);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.imodal__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid #eef0f3;
}

.imodal__title {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 700;
}

.imodal__close {
    border: 0;
    background: #f3f4f6;
    width: 34px;
    height: 34px;
    border-radius: 8px;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
}

.imodal__close:hover {
    background: #e5e7eb;
}

.imodal__tools {
    padding: 12px 20px;
    border-bottom: 1px solid #eef0f3;
}

.imodal__search {
    position: relative;
}

.imodal__search svg {
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    width: 18px;
    height: 18px;
    color: #6b7280;
}

.imodal__search input {
    width: 100%;
    padding: 10px 12px 10px 36px;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    outline: none;
}

.imodal__search input:focus {
    border-color: #93c5fd;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, .15);
}

.imodal__list {
    overflow: auto;
    padding: 4px 8px;
}

.imodal-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border-bottom: 1px dashed #edf2f7;
}

.imodal-item:last-child {
    border-bottom: none;
}

.imodal-avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    object-fit: cover;
    background: #f3f4f6;
}

.imodal-meta {
    flex: 1;
    min-width: 0;
}

.imodal-name {
    font-weight: 700;
    margin: 0 0 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.imodal-rating {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #6b7280;
    font-size: .9rem;
}

.imodal-stars svg {
    width: 16px;
    height: 16px;
}

.imodal-actions .btn {
    padding: 8px 12px;
    border-radius: 10px;
    border: 1px solid #e5e7eb;
    background: #fff;
    cursor: pointer;
    color: #000;
}

.imodal-actions .btn:hover {
    background: #f8fafc;
}

.imodal__footer {
    padding: 12px 16px;
    display: flex;
    gap: 8px;
    justify-content: flex-end;
    border-top: 1px solid #eef0f3;
}

.btn {
    font-weight: 600;
}

.btn-secondary {
    background: #111827;
    color: #fff;
    border: 0;
}

.btn-secondary:hover {
    background: #0b1220;
}

.btn-ghost {
    background: #fff;
    border: 1px solid #e5e7eb;
}

.btn-ghost:hover {
    background: #f8fafc;
}

body.imodal-open {
    overflow: hidden;
}

/* Group events (capacity bar) */
.ge-card {
    border: 1px solid #eee;
    border-radius: 12px;
    padding: 12px;
    margin: 10px 0;
    background: #fff;
}

.ge-cap__bar {
    width: 100%;
    height: 8px;
    border-radius: 999px;
    background: #f3f4f6;
    overflow: hidden;
}

.ge-cap__bar>span {
    display: block;
    height: 100%;
    background: #60a5fa;
}

.ge-cta {
    margin-top: 10px;
    border: 0;
    background: #111827;
    color: #fff;
    padding: 10px 14px;
    border-radius: 10px;
    cursor: pointer;
}

.fullprice-btn {
    display: block;
    width: 100%;
    padding: 10px 16px;
    background-color: #FFF;
    /* blue */
    color: #000;
    font-size: 14px;
    font-weight: 500;
    border-radius: 6px;
    cursor: pointer;
    text-align: center;
    border: 1px solid #E5E7EB;
    margin-top: 10px;
}

.attrgrid {
    margin-top: 15px
}



/* ================= MOBILE & SMALL TABLETS ================= */
@media (max-width: 992px) {

    /* Main page grid: 2 cols -> 1 col */
    .services-content-grid {
        display: grid;
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .services-information,
    .services-locations {
        width: 100%;
    }

    /* Section titles / subtitles */
    .section-title {
        font-size: 16px;
        letter-spacing: .06em;
        margin: 6px 0 8px;
    }

    .instructors-title,
    .faqx-title {
        font-size: 13px;
        letter-spacing: .06em;
    }

    .my-swiper,
    .my-swiper .swiper-slide,
    .my-swiper .swiper-slide img {
        width: 100% !important;
    }
}

@media (max-width: 640px) {

    /* Breadcrumb: allow wrap/scroll, reduce size */
    .breadcrumb-container {
        padding: 0 8px;
    }

    .breadcrumb {
        margin: 0;
        flex-wrap: wrap;
        gap: 6px;
    }

    .breadcrumb-item a,
    .breadcrumb-item {
        font-size: 12px;
    }

    /* Hero/service image: keep aspect-ratio and avoid fixed 300px height */
    .service-img img {
        width: 100%;
        aspect-ratio: 16/9;
        /* keeps a nice rectangle */
        object-fit: cover;
    }

    /* Descriptions: comfortable reading */
    .services-description {
        padding: 0 4px;
    }

    .services-description p,
    .services-description li {
        font-size: 14px;
        line-height: 1.6;
    }

    /* Packages: single column */
    .packages__grid {
        display: grid;
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .pkg-card {
        border-radius: 12px;
    }

    /* Price card: stack rows cleanly */
    .pc-card {
        padding: 14px;
    }

    .pc-price {
        font-size: 1.4rem;
    }

    .pc-meta {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }

    /* Attribute pricing: 1 column with tighter rows */
    .attrgrid {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .attrcard {
        border-radius: 10px;
    }

    .attrcard__row {
        padding: 8px 6px;
    }

    /* Offer / discount table */
    .offerpro {
        border-radius: 12px;
    }

    .offerpro__row {
        grid-template-columns: 1fr;
        gap: 6px;
    }

    .offerpro_amount {
        justify-self: flex-start;
    }

    /* Appointement inputs: full bleed, comfortable tap targets */
    .appt2-body {
        padding: 0 0 8px;
        gap: 10px;
    }

    .appt2-input {
        height: 44px;
    }

    .appt2-iconbtn {
        right: 8px;
        top: 6px;
    }

    /* CTA buttons full width */
    .appt2-cta,
    .gift-button,
    .fullprice-btn {
        width: 100%;
    }

    /* Instructors grid: 2 columns on phones */
    .instructors-grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
    }

    .instructor-card {
        padding: 10px;
        border: 1px solid #eee;
        border-radius: 10px;
        display: flex;
        gap: 8px;
        justify-content: center;
        align-items: center;
        color: #000 !important;
    }

    .instructors-rate {
        flex-direction: column
    }

    .instructor-card img {
        width: 36px;
        height: 36px;
    }

    /* FAQ: larger tap area + smaller paddings */
    .faqx-q {
        padding: 12px 14px;
    }

    .faqx-q .faqx-date {
        display: none;
    }

    .faqx-a {
        padding: 0 14px;
    }

    /* Group events card */
    .ge-card {
        padding: 10px;
    }

    .ge-cap__bar {
        height: 6px;
    }

    /* Videos grid already has breakpoints, just add small spacing */
    .vid3-grid {
        gap: 12px;
    }

    .vid3-title {
        font-size: 14px;
    }
}

.instructor-card {
    color: #000
}

.instructor-card:hover {
    text-decoration: none;
    color: #000
}

.pc-card:first-child {
    margin-top: 0 !important;
}

.services-content-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(320px, 470px);
    gap: 50px;
    /* instead of 50px (50 gets huge on small screens) */
    align-items: start;
}

/* Left + Right columns (optional but recommended for clarity) */
.services-content-left {
    min-width: 0;
}

/* prevents overflow */
.services-content-right {
    min-width: 0;
}

/* Tablet */
@media (max-width: 992px) {
    .services-content-grid {
        grid-template-columns: minmax(0, 1fr) minmax(280px, 360px);
        gap: 16px;
    }
}

/* Mobile: stack */
@media (max-width: 768px) {
    .services-content-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    /* If you want the booking panel to appear first on mobile */
    /* .services-content-right{ order: -1; } */
    .service-img {
        height: 215px !important;
    }

    .my-swiper .swiper-slide {
        height: 215px !important;
    }

    .cta-pill,
    .faqx-pill {
        font-size: 12px
    }
}

.navbar-brand a {
    text-decoration: none !important
}

a:hover {
    text-decoration: none !important
}

.services-description ul {
    list-style-type: none;
    padding: 0px;
    margin: 0px;
}

.cartSidebar {
    display: none
}

.contactus-section {
    display: flex;
    justify-content: center;
    align-content: center;
}

.contactus-section-grid {
    width: 40%;
    padding: 20px 0;
}

.contactus-section-grid .breadcrumb-container {
    margin-bottom: 15px
}

@media (max-width: 768px) {
    .contactus-section-grid {
        width: 100%;
    }

    .cartSidebar {
        z-index: 1050
    }
}

.contactus-section-grid {
    background: rgba(255, 255, 255, 0.7);
    border-radius: 5px;
    margin-bottom: 25px;
}

.octopuspro-widget-close {
    display: none !important;
}

#confirmationModal .modal-dialog-centered {
    min-width: 800px;
    text-align: center
}

#octopuspro-widget-my-modal {
    display: none !important;
}

#octopuspro-widget-click {
    border: 1px solid #428bca !important;
    background: #428bca !important;
    color: #fff !important;
    padding: 10px !important;
    border-radius: 5px !important;
    width: fit-content !important;
    margin: 0 auto !important;
}

#octopuspro-widget-click a {
    color: #fff !important;
    display: block !important;
    text-align: left !important;
}

/************************************** pages with cover backgound *******************************************/
.portal-bg-cover {
    background-repeat: no-repeat;
    background-position: top center;
    background-size: cover;
    position: relative;
    background-attachment: fixed;
    min-height: 76vh;
}

.portal-bg-cover::after {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1;
}

.portal-bg-cover>* {
    position: relative;
    z-index: 2;
}

.portal-bg-cover .breadcrumb {
    background: transparent
}

.aboutus-section {
    background: rgba(255, 255, 255, 0.7);
    border-radius: 5px;
    width: 50%;
    min-height: 200px !important;
}

@media (max-width: 768px) {
    .aboutus-section {
        width: 90%;
    }

    #confirmationModal .modal-dialog-centered {
        min-width: 100vw !important;
        ;
        max-width: 100vw !important;
    }

    .modal-content {
        width: 95% !important;
    }
}

.fw-tabs {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
    align-items: center;
    margin: 10px 0 15px;
    flex-wrap: wrap;
}

/* RTL support */
.fieldworker_tabs[data-lang="ar"] .fw-tabs {
    justify-content: flex-start;
}

.fw-tab {
    border: 1px solid #ddd;
    background: #fff;
    color: #555;
    padding: 10px 14px;
    border-radius: 10px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    line-height: 1;
    transition: all .2s ease;
}

.fw-tab:hover {
    border-color: #bbb;
    transform: translateY(-1px);
}


.fw-tabs-content {
    width: 100%;
}

/* ================================
   Google Maps Contractor Popup
   ================================ */

/* Wrapper */
.contractor_view {
    min-width: 220px;
    max-width: 260px;
    padding: 14px 14px 16px;
    background: #ffffff;
    border-radius: 14px;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.18);
    text-align: center;
    font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

/* Avatar */
.contractor_view .small-avatar {
    display: flex;
    justify-content: center;
    margin-bottom: 8px;
}

.contractor_view .small-avatar img {
    width: 64px !important;
    height: 64px !important;
    border-radius: 50%;
    border: 3px solid #fff;
    box-shadow: 0 6px 14px rgba(0, 0, 0, 0.18);
    background: #f5f5f5;
}

/* Name */
.contractor_view .contractor-name {
    margin: 6px 0 12px;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.2;
}

.contractor_view .contractor-name a {
    color: #1f2937;
    text-decoration: none;
}

.contractor_view .contractor-name a:hover {
    color: #0c78a7;
}

/* Button container */
.contractor_view .info-buttons {
    width: 100%;
    margin: 0 !important;
    padding: 0;
    float: none !important;
}

/* Button */
.contractor_view .info-buttons .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    padding: 10px 14px;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 500;
    background: #0c78a7;
    border: none;
    color: #fff;
    transition: all 0.2s ease-in-out;
}

.contractor_view .info-buttons .btn i {
    font-size: 14px;
}

.contractor_view .info-buttons .btn:hover {
    background: #095f82;
    transform: translateY(-1px);
    box-shadow: 0 6px 14px rgba(12, 120, 167, 0.35);
}

/* ================================
   Google Maps InfoWindow cleanup
   ================================ */

/* Remove default padding */
.gm-style .gm-style-iw-c {
    padding: 0 !important;
    border-radius: 16px !important;
}

/* Remove white arrow shadow */
.gm-style .gm-style-iw-t::after {
    background: #ffffff;
    box-shadow: none;
}

/* Close button tweak */
.gm-style .gm-ui-hover-effect {
    top: 6px !important;
    right: 6px !important;
}

/*Minimal styles scoped to the lightbox to avoid layout breaks*/
.fw-lightbox {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.85);
    z-index: 1200;
    align-items: center;
    justify-content: center;
    padding: 1rem
}

.fw-lightbox[aria-hidden="false"] {
    display: flex
}

.fw-lightbox-figure {
    max-width: 90%;
    max-height: 90%;
    margin: 0;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center
}

.fw-lightbox-image {
    max-width: 100%;
    max-height: 80vh;
    border-radius: .25rem;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .5)
}

.fw-lightbox-caption {
    color: #fff;
    margin-top: .5rem;
    text-align: center;
    max-width: 90%;
    overflow: hidden;
    text-overflow: ellipsis
}

.fw-lightbox-close,
.fw-lightbox-prev,
.fw-lightbox-next {
    position: fixed;
    background: transparent;
    border: 0;
    color: #fff;
    font-size: 20px;
    cursor: pointer;
    padding: .5rem
}

.fw-lightbox-close {
    right: 1rem;
    top: 1rem
}

.fw-lightbox-prev {
    left: 1rem;
    top: 50%;
    transform: translateY(-50%);
    font-size: 14px
}

.fw-lightbox-next {
    right: 1rem;
    top: 50%;
    transform: translateY(-50%);
    font-size: 14px
}

.fw-lightbox-close:focus,
.fw-lightbox-prev:focus,
.fw-lightbox-next:focus {
    outline: 2px solid #fff
}

@media (max-width:576px) {

    .fw-lightbox-prev,
    .fw-lightbox-next {
        font-size: 2rem;
        left: .5rem;
        right: .5rem
    }
}

/* =========================
   Fieldworker Gallery Mosaic
   ========================= */

.fw-gallery-mosaic {
    margin: 0;
    padding: 0;

    display: grid !important;
    /* force override */
    grid-template-columns: repeat(12, 1fr);
    grid-auto-flow: dense;
    grid-auto-rows: 90px;
    gap: 16px;
}

.fw-gallery-mosaic .fw-tile {
    list-style: none;
    overflow: hidden;
    border-radius: 14px;
    background: #f3f4f6;
    box-shadow: 0 10px 26px rgba(0, 0, 0, .10);
    position: relative;
}



/* link + image */
.fw-gallery-mosaic .fieldworker-gallery-link {
    display: block;
    width: 100%;
    height: 100%;
    text-decoration: none;
}

.fw-gallery-mosaic .fw-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transform: scale(1);
    transition: transform .25s ease, filter .25s ease;
}

.fw-gallery-mosaic .fw-tile:hover .fw-img {
    transform: scale(1.06);
    filter: saturate(1.05);
}

/* hover overlay */
.fw-gallery-mosaic .fw-tile::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, .22), rgba(0, 0, 0, 0));
    opacity: 0;
    transition: opacity .25s ease;
    pointer-events: none;
}

.fw-gallery-mosaic .fw-tile:hover::before {
    opacity: 1;
}

/* responsive */
@media (max-width: 992px) {
    .fw-gallery-mosaic {
        grid-template-columns: repeat(8, 1fr);
        grid-auto-rows: 88px;
    }

}

@media (max-width: 576px) {
    .fw-gallery-mosaic {
        grid-template-columns: repeat(4, 1fr);
        grid-auto-rows: 86px;
        gap: 12px;
    }
}

.fieldworkers-list {
    min-height: 310px
}


/* Mobile enhancements for Book Now button */
@media (max-width: 768px) {
    .ge-cta {
        width: 100%;
        display: block;
        padding: 14px;
        font-size: 16px;
        font-weight: 700;
        margin-top: 15px;
        text-align: center;
        border-radius: 12px;
        box-shadow: 0 4px 14px rgba(0, 0, 0, 0.1);
        transition: transform 0.2s ease, box-shadow 0.2s ease;
    }

    .ge-cta:active {
        transform: scale(0.98);
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
    }
}