@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;
    display: grid;
    grid-template-rows: auto 1fr auto;
    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: 2px #000000 solid !important;
    border-radius: 6px;
    text-align: center;
    font-size: 16px;
    color:#000000;
}

.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: 290px;
    object-fit: cover;
}

.class-content {
    background-color: #1E1E1EE5;
    color: #ffffff;
    padding: 20px 16px;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

.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;
    }

    .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 {
    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 {
        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 {
        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 {
        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; border:1px solid var(--brand); 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); }

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

.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;}
}