.elementor-988670 .elementor-element.elementor-element-a189e6e{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-988670 .elementor-element.elementor-element-b5f0087{text-align:center;}.elementor-988670 .elementor-element.elementor-element-b5f0087 .elementor-heading-title{font-family:var( --e-global-typography-vamtam_h4-font-family ), Arial;font-size:var( --e-global-typography-vamtam_h4-font-size );font-weight:var( --e-global-typography-vamtam_h4-font-weight );line-height:var( --e-global-typography-vamtam_h4-line-height );}.elementor-988670 .elementor-element.elementor-element-fcfeaa7{width:var( --container-widget-width, 100% );max-width:100%;--container-widget-width:100%;--container-widget-flex-grow:0;}@media(max-width:1024px){.elementor-988670 .elementor-element.elementor-element-b5f0087 .elementor-heading-title{font-size:var( --e-global-typography-vamtam_h4-font-size );line-height:var( --e-global-typography-vamtam_h4-line-height );}}@media(max-width:767px){.elementor-988670 .elementor-element.elementor-element-b5f0087 .elementor-heading-title{font-size:var( --e-global-typography-vamtam_h4-font-size );line-height:var( --e-global-typography-vamtam_h4-line-height );}}/* Start custom CSS for shortcode, class: .elementor-element-fcfeaa7 *//* iPad Horizontal adjustments */
@media (min-width: 1025px) and (max-width: 2024px) {/* ===============================
   Class Card General Styles
   =============================== */

.class-schedule-cards {
    display: flex;
    flex-wrap: wrap;
    justify-content: center; /* Centers all cards in the container */
    max-width: 1000px;  
    margin: 0 auto; /* Centers the container itself */
}

.class-card {
    background-color: #f7b92b; /* Studio Pilates Yellow */
    border-radius: 0;
    overflow: hidden;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    display: flex;
    flex-direction: column;
    width: 1000px; /* Each card width, adjust as needed */
    margin: 10px; /* Spacing between cards */
    transition: transform 0.3s ease;
}
.class-card-left {
    height: 400px; /* Set a fixed height for uniformity */
    overflow: hidden;
}

.class-card-left img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Ensures images fill the container nicely */
}

.class-card-right {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%; /* Adjust as needed to control content height */
    padding: 20px;
}


/* ===============================
   Instructor Section
   =============================== */

.class-card .instructor-flex {
    display: flex;
    align-items: flex-end; /* 🔥 Corrected here! */
    justify-content: flex-end;
    flex-wrap: wrap;
    border-radius: 0px;
    margin-top: -10px;
    margin-left: 10px;
}

.class-card .instructor-image img {
    max-width: 100%;
    border-radius: 50%;
}

.class-card .instructor-info {
    flex: 1;
    min-width: 150px;
}

.class-card .instructor-name {
    font-weight: bold;
    margin: 0px 0 0px 0;
    color: #333;
    font-size: 12px;
    text-transform: uppercase;
}

.class-card .instructor-bio {
    font-size: 12px;
    line-height: 1.4;
    color: #444;
    margin-top: 10px;
}

/* ===============================
   Buttons: Book Now and About Me
   =============================== */

.class-card .book-now-button {
    background-color: transparent;
    color: #333;
    border: 2px solid #333;
    padding: 8px 10px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease; 
    display: inline-block;
    font-size: 11px;
    letter-spacing: 0.5px;
    border-radius: 0;
    text-transform: uppercase;
    text-decoration: none;
    margin-top: 10px;
    width: 100%;
    align-self: stretch;
}


.class-card-right {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    flex-grow: 1;
}
.class-card .toggle-bio-btn {
    background-color: transparent;
    color: #333;
    border: 2px solid #333;
    padding: 10px 20px;
    max-width: 300px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    display: inline-block;
    font-size: 11px;
    letter-spacing: 0.5px;
    border-radius: 0;
    text-transform: uppercase;
    text-decoration: none;
}

.class-card .book-now-button:hover,
.class-card .toggle-bio-btn:hover {
    background-color: #333;
    color: #fff;
    padding: 10px 20px;
}

/* ===============================
   Description Toggle Link
   =============================== */

.class-card .toggle-desc-btn {
    display: inline-block;
    font-size: 11px;
    color: #333;
    cursor: pointer;
    text-decoration: underline;
    font-weight: 600;
    transition: color 0.3s ease;
    margin-top: -5px;
}

.class-card .toggle-desc-btn:hover {
    color: #333;
}

/* ===============================
   Class Description
   =============================== */

.class-card .description {
    margin-top: 10px;
    font-size: 14px;
    color: #333;
    line-height: 1.2;
}


/* ===============================
   Class Meta Info
   =============================== */

.class-card .class-meta {
    margin-bottom: 0px;
}

.class-card .class-meta p {
    margin: 0;
    font-size: 12px;
    color: #333;
}
.class-filter select,
.class-filter input[type="date"] {
    background-color: transparent !important;
    color: #222 !important;
    padding: 10px 16px !important;
    border: 2px solid #222 !important;
    border-radius: 0 !important;
    cursor: pointer;
    font-weight: bold !important;
    text-align: center !important;
    font-family: inherit !important;
    font-size: 12px;
    height: 48px !important;  /* Uniform height */
    width: 10%;
    line-height: 1 !important;  /* Helps with vertical centering */
    box-sizing: border-box !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    vertical-align: middle !important;  /* Align with neighboring elements */
}

/* Remove conflicting theme border-radius and force same height */
.elementor-kit-9 input[type="date"],
.elementor-kit-9 select {
    border-radius: 0 !important;
    height: 48px !important;
    padding: 10px 16px !important;
    font-size: 12px !important;
    margin-top:0px !important;
}



/* Remove default margins or spacing between elements if needed */
.class-filter {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 5px !important;
    margin-bottom: 20px !important;
   
}

.class-filter .date-separator {
    display: inline-block;
    font-weight: bold;
    margin: 0 2px;
    align-self: center;
    font-size: 10px;
}

/* For the dropdown menu itself */
.class-filter select {
    background-color: transparent !important;
    
    padding: 12px 16px !important;
    border: 2px solid #222 !important;
    border-radius: 0 !important;
    font-weight: bold !important;
    height: 48px !important;
    width:10%;
    box-sizing: border-box !important;
    font-family: inherit !important;
    font-size: 12px !important;
    line-height: 1 !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
    background-image: url('data:image/svg+xml;charset=UTF-8,<svg fill="%23222" height="16" viewBox="0 0 24 24" width="16" xmlns="http://www.w3.org/2000/svg"><path d="M7 10l5 5 5-5z"/></svg>') !important;
    background-repeat: no-repeat !important;
    background-position: right 10px center !important;
    padding-right: 10px !important; /* spacing for dropdown arrow */
}

/* For the dropdown list itself (the expanded options) */
.class-filter select option {
    background-color: #fff !important; /* white background */
    color: #222 !important;
    font-weight: normal !important;
    padding: 12px 16px !important;
    border-radius: 0 !important;
    box-sizing: border-box !important;
    font-family: inherit !important;
    font-size: 1rem !important;
    text-align: left !important;
}
}

/* iPad Horizontal adjustments */
@media (min-width: 768px) and (max-width: 1024px) {
   .class-card {
    flex-direction: column;
    width: 100%;
    margin: 10px 0;
  }

  .class-card-left {
    width: 100%;
    height: auto;
    overflow: hidden;
  }
  /* Remove conflicting theme border-radius and force same height */
.elementor-kit-9 input[type="date"],
.elementor-kit-9 select {
    border-radius: 0 !important;
    height: 48px !important;
    padding: 10px 16px !important;
    font-size: 12px !important;
    margin-top:0px !important;
}
/* ===============================
   Class Description
   =============================== */

.class-card .description {
    margin-top: 10px;
    font-size: 12px;
    color: #333;
    line-height: 1.2;
}
  .class-card-left img {
    width: 100%;
    height: 370px;
    object-fit: cover;
  }
  .class-card-right {
    width: 100%;
    padding: 20px;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 52%; /* Adjust as needed to control content height */
    padding: 20px;
  }

/* ===============================
   Class Meta Info
   =============================== */

.class-card .class-meta {
    margin-bottom: 0px;
}

.class-card .class-meta p {
    margin: 0;
    font-size: 11px;
    color: #333;
}
  .class-card .instructor-flex {
    justify-content: flex-start;
    margin-left: 0;
  }
.class-card .toggle-desc-btn {
    display: inline-block;
    font-size: 11px;
    color: #333;
    cursor: pointer;
    text-decoration: underline;
    font-weight: 600;
    transition: color 0.3s ease;
    margin-top: -5px;
}

.class-card .toggle-desc-btn:hover {
    color: #333;
}
.class-card .toggle-bio-btn {
    background-color: transparent;
    color: #333;
    border: 2px solid #333;
    padding: 10px 20px;
    max-width: 300px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    display: inline-block;
    font-size: 11px;
    letter-spacing: 0.5px;
    border-radius: 0;
    text-transform: uppercase;
    text-decoration: none;
}

.class-card .book-now-button:hover,
.class-card .toggle-bio-btn:hover {
    background-color: #333;
    color: #fff;
    padding: 10px 20px;
}
/* ===============================
   Buttons: Book Now and About Me
   =============================== */

.class-card .book-now-button {
    background-color: transparent;
    color: #333;
    border: 2px solid #333;
    padding: 8px 10px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease; 
    display: inline-block;
    font-size: 11px;
    letter-spacing: 0.5px;
    border-radius: 0;
    text-transform: uppercase;
    text-decoration: none;
    margin-top: 10px;
    width: 100%;
    align-self: stretch;
}
/* For the dropdown menu itself */
.class-filter select {
    background-color: transparent !important;
    margin-right: 5px;
    padding: 10px 16px !important;
    border: 2px solid #222 !important;
    border-radius: 0 !important;
    font-weight: bold !important;
    height: 48px !important;
    width:32%;
    box-sizing: border-box !important;
    font-family: inherit !important;
    font-size: 10px !important;
    line-height: 1 !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
    background-image: url('data:image/svg+xml;charset=UTF-8,<svg fill="%23222" height="16" viewBox="0 0 24 24" width="16" xmlns="http://www.w3.org/2000/svg"><path d="M7 10l5 5 5-5z"/></svg>') !important;
    background-repeat: no-repeat !important;
    background-position: right 10px center !important;
    padding-right: 40px !important; /* spacing for dropdown arrow */
}
.class-filter input[type="date"] {
    background-color: transparent !important;
    color: #222 !important;
    padding: 10px 16px !important;
    border: 2px solid #222 !important;
    border-radius: 0 !important;
    cursor: pointer;
    font-weight: bold !important;
    text-align: center !important;
    font-family: inherit !important;
    font-size: 11px !important;
    height: 48px !important;  /* Uniform height */
    width: 47%;
    line-height: 1 !important;  /* Helps with vertical centering */
    box-sizing: border-box !important;
 
    align-items: center !important;
    justify-content: center !important;
    vertical-align: middle !important;  /* Align with neighboring elements */
}
.class-filter .date-separator {
    display: inline-block;
    font-weight: bold;
    margin: 0 3px;
    align-self: center;
    font-size: 9px;
}
}
   /* ===============================
   Responsive Stacked Mobile Layout
   =============================== */
@media (max-width: 768px) {
  .class-card {
    flex-direction: column;
    width: 100%;
    margin: 10px 0;
  }

  .class-card-left {
    width: 100%;
    height: 250px;
    overflow: hidden;
  }

  .class-card-left img {
    width: 100%;
    height: 200px;
    object-fit: cover;

  }

  .class-card-right {
    width: 100%;
    padding: 10px;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 32%; /* Adjust as needed to control content height */
    padding: 20px;
  }
/* ===============================
   Class Description
   =============================== */

.class-card .description {
    margin-top: 2%;
    font-size: 12px;
    color: #333;
    line-height: 1.2;
}
  .class-card-left img {
    width: 100%;
    height: 370px;
    object-fit: cover;
  }
  .class-card-right {
    width: 100%;
    padding: 20px;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 52%; /* Adjust as needed to control content height */
    padding: 20px;
  }

/* ===============================
   Class Meta Info
   =============================== */

.class-card .class-meta {
    margin-bottom: 0px;
}

.class-card .class-meta p {
    margin: 0;
    font-size: 11px;
    color: #333;
}
  .class-card .instructor-flex {
    justify-content: flex-start;
    margin-left: 0;
  }
  .class-card .toggle-desc-btn {
    display: inline-block;
    font-size: 11px;
    color: #333;
    cursor: pointer;
    text-decoration: underline;
    font-weight: 600;
    transition: color 0.3s ease;
    margin-top: -5px;
}

.class-card .toggle-desc-btn:hover {
    color: #333;
}
/* ===============================
   Buttons: Book Now and About Me
   =============================== */

.class-card .book-now-button {
    background-color: transparent;
    color: #333;
    border: 2px solid #333;
    padding: 8px 10px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease; 
    display: inline-block;
    font-size: 11px;
    letter-spacing: 0.5px;
    border-radius: 0;
    text-transform: uppercase;
    text-decoration: none;
    margin-top: 10px;
    width: 100%;
    align-self: stretch;
}
.class-filter input[type="date"] {
    background-color: transparent !important;
    color: #222 !important;
    padding: 10px 16px !important;
    border: 2px solid #222 !important;
    border-radius: 0 !important;
    cursor: pointer;
    font-weight: bold !important;
    text-align: center !important;
    font-family: inherit !important;
    font-size: 11px !important;
    height: 48px !important;  /* Uniform height */
    width: 47%;
    line-height: 1 !important;  /* Helps with vertical centering */
    box-sizing: border-box !important;
 
    align-items: center !important;
    justify-content: center !important;
    vertical-align: middle !important;  /* Align with neighboring elements */
}
.class-filter .date-separator {
    display: inline-block;
    font-weight: bold;
    margin: 0 3px;
    align-self: center;
    font-size: 9px;
}
/* For the dropdown menu itself */
.class-filter select {
    background-color: transparent !important;
    margin-right: 5px;
    padding: 10px 16px !important;
    border: 2px solid #222 !important;
    border-radius: 0 !important;
    font-weight: bold !important;
    height: 48px !important;
    width:100%;
    box-sizing: border-box !important;
    font-family: inherit !important;
    font-size: 12px !important;
    line-height: 1 !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
    background-image: url('data:image/svg+xml;charset=UTF-8,<svg fill="%23222" height="16" viewBox="0 0 24 24" width="16" xmlns="http://www.w3.org/2000/svg"><path d="M7 10l5 5 5-5z"/></svg>') !important;
    background-repeat: no-repeat !important;
    background-position: right 10px center !important;
    padding-right: 40px !important; /* spacing for dropdown arrow */
}
}/* End custom CSS */
/* Start custom CSS *//* === Studio Pilates Class Schedule Styles === */
.class-schedule-cards {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    justify-content: center;
    padding: 20px;
}

.class-card {
    background-color: #E09B2D;  /* Studio Pilates gold/yellow */
    border-radius: 20px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
    overflow: hidden;
    max-width: 800px;
    width: 100%;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    margin: 10px;
    font-family: Arial, sans-serif;
}

.class-card-content {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
}

.class-card-left {
    flex: 1 1 300px;
    min-width: 250px;
    max-width: 400px;
    overflow: hidden;
}

.class-card-left img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.class-card-right {
    flex: 2 1 400px;
    padding: 20px;
    background-color: #E09B2D;
    color: #333;
}

.class-card-right h3 {
    margin-top: 0;
    font-size: 1.5rem;
    color: #333;
    border-bottom: 2px solid #333;
    padding-bottom: 5px;
}

.class-meta {
    font-size: 0.9rem;
    margin-bottom: 10px;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}

.description {
    margin-bottom: 15px;
    line-height: 1.5;
}

.toggle-desc-btn {
    background: none;
    border: none;
    color: #000;
    font-weight: bold;
    cursor: pointer;
    font-size: 1rem;
    margin-top: 5px;
}

.book-now-button {
    background-color: #C94E15;
    color: #fff;
    text-decoration: none;
    padding: 10px 20px;
    border-radius: 20px;
    font-weight: bold;
    display: inline-block;
    margin-top: 10px;
    border: none;
    cursor: pointer;
    text-align: center;
}

.book-now-button:hover {
    background-color: #B3430F;
}

.instructor-flex {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-top: 10px;
}

.instructor-image img {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    object-fit: cover;
}

.instructor-info p {
    margin: 0;
    font-weight: bold;
}

.toggle-bio-btn {
    background-color: #C94E15;
    color: #fff;
    border-radius: 20px;
    padding: 5px 15px;
    border: none;
    cursor: pointer;
    font-weight: bold;
    margin-top: 5px;
}

.toggle-bio-btn:hover {
    background-color: #B3430F;
}/* End custom CSS */