body{
          background: #000;
          font-family: 'Gilroy-light', sans-serif !important;
          font-size: 14px
}
        .h1{
            font-family: 'Gilroy-bold', sans-serif !important;
            font-size: 30px;
            font-style: italic;
        }
.bold{
     font-family: 'Gilroy-bold', sans-serif !important;
}
          
    #headerSlider{
          background: url("../imgs/Group4.png") center no-repeat transparent;
          background-size: cover;
          min-height: 720px
      }
    .navbar-dark .navbar-nav .nav-link {
      color: rgba(255,255,255,.9);
    }
    .navbar-dark .navbar-nav .nav-link:hover {
      color: rgba(255,255,255,.7);
    }
    .header-content {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      color: white;
      text-align: center;
    }
    .pg{
        padding:50px 20px
    }

    .footer-custom {
      background-color: #111;
      color: #fff;
      font-size: 14px;
    }

    .footer-custom h5 {
      color: #fff;
      font-size: 18px;
      margin-top: 0;
      margin-bottom: 15px;
    }

    .footer-custom p, .footer-custom ul {
      margin-bottom: 0;
      line-height: 1.6;
    }

    .footer-custom li {
      list-style: none;
    }

    .footer-custom .copyright {
      background-color: #222;
      text-align: center;
      padding: 10px 0;
      margin-top: 15px;
      font-size: 12px;
    }
      a.nav-link{
          text-transform: uppercase
      }
      .h2{
          font-family: 'Gilroy-bold', sans-serif !important;
          font-size: 18px

      }
      .active-link{
          
      }
      .bmi-calculator-container {
      background-color: #f8f9fa;
      padding: 50px 0;
    }
      .bmi-calculator-button{
          border:4px solid #59d7ee;
          padding: 12px;
          margin-top: 10px;
           font-family: 'Gilroy-bold', sans-serif, 'cairo';
          color:#59d7ee;
          max-width: 400px;
          display: block;
          text-align: center
      }
    .bmi-calculator-header {
      font-size: 48px; /* Adjust the size as needed */
      font-weight: bold;
      margin-bottom: 20px;
      color: #333;
    }

    .bmi-calculator-text {
      font-size: 18px; /* Adjust the size as needed */
      color: #666;
      margin-bottom: 30px;
    }

    .bmi-calculator-input {
      border: 1px solid #ccc;
      border-radius: 4px;
      padding: 10px;
      margin-bottom: 20px;
      width: 100%;
    }

    .coaches-section {
     padding: 50px 0; 
      background: url("../imgs/bg_grey.png") center no-repeat #000;
      background-size: auto;
      background-color: #000;
      color: #111;
      padding: 10px 20px;
      font-size: 18px;
      cursor: pointer;
      display: block;
      width: 100%;
      text-align: center;
     font-family: 'Gilroy-bold', sans-serif !important;
    }

    .bmi-result {
      font-size: 72px; /* Adjust the size as needed */
      font-weight: bold;
      color: #333;
      margin-top: 30px;
    }

    .bmi-status {
      font-size: 24px; /* Adjust the size as needed */
      color: #333;
      margin-top: -20px;
    }

    .coaches-section h2 {
      font-size: 48px; /* Match font-size with your design */
      color: #333; /* Match color with your design */
      margin-bottom: 30px;
      /* Add any additional styles for the heading */
    }
    .coaches-section p {
      font-size: 18px; /* Match font-size with your design */
      color: #666; /* Match color with your design */
      margin-bottom: 30px;
      /* Add any additional styles for the paragraph */
    }
    .coach-name {
      margin-top: 20px;
      font-size: 24px; /* Match font-size with your design */
      font-style: italic;
      font-family: 'Gilroy-bold', sans-serif !important;
        text-align: left;
        color: #fff
    }
    .coach-title {
      font-size: 18px;
      color: #fff !important; 
      font-family: 'Gilroy-light', sans-serif !important;
      text-align: left

    }
    .carousel-item .row {
      display: flex;
      justify-content: center;
      flex-wrap: wrap;
    }
    .carousel-item .col-md-4 {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
    }
      .carousel-indicators{
          margin-bottom: -50px
      }
      .carousel-indicators li {
      width: 16px;
      height: 16px;
      border-radius: 50%;
      background-color: #999; /* Circle color - this is typically a gray */
    }
    .carousel-indicators li.active {
      background-color: #fff; /* Active circle color - this is typically white */
    }
    .form-group {
        margin-bottom: 20px;
    }
    label {
        display: block;
        margin-bottom: 8px;
        color: #fff;
    }
    input[type="text"], input[type="tel"], input[type="date"],
    input[type="number"], input[type="password"],
    textarea, input[type="email"]
    {
        width: 100%;
        padding: 10px;
        border: 1px solid rgba(250,250,250, .2);
        border-radius: 4px;
        background-color: transparent;
        color: #fff;
        max-width: 300px;
        color: #fff
    }
    input[type="date"].custom-date {
       background-image: url('../imgs/date.png'); /* The image used */
        background-position: right 10px center; /* Position the icon */
        background-repeat: no-repeat;
        background-size: 18px;
        -webkit-appearance: none; /* Removes default styling */
        appearance: none;
        padding-right: 10px; /* Adjust padding to prevent text overlap with the icon */
    }
    .gender {
        display: flex;
        align-items: center;
        margin: 20px 0;
    }
    .radio-group {
        display: flex;
        align-items: center;
    }
    .radio-group input{
        display: none

    }
    .radio-group label {
        padding: 10px 20px;
        border-radius: 4px;
        cursor: pointer;
        transition: border-color 0.3s ease;
        margin-right: 10px;
        font-weight: 800;
        max-width: 330px;
    }
    
    .boxinput{
        border: 1px solid #3D3D3D;
        width: 20px;
        height: 20px;
        border-radius: 10px;
        cursor: pointer;
        margin-top: -10px;
    }

    input[type="radio"]:checked + .boxinput,
    input[type="checkbox"]:checked + .boxinput
{
        border: 4px solid #fff;

    }
    .clear{
        display: block;
        clear: both;
        float: none
    }
    .btn-submit {
        width: 100%;
        padding: 10px;
        border: none;
        background-color: transparent;
        color: white;
        border-radius: 4px;
        cursor: pointer;
        border: 5px solid #59d7ee
    }
    .btn-submit:hover {
        background-color: #59d7ee;
    }
    .bg{
        display: block;
        background-image: url('../imgs/bg_grey.png'); /* The image used */
          background-color: #000; /* Used if the image is unavailable */
          height: 400px; /* You must set a specified height */
          background-position: center; /* Center the image */
          background-repeat: no-repeat; /* Do not repeat the image */
          background-size: cover; /* Resize the background image to cover the entire container */
    }
    .modal-content{
        background: #121212;
        color: #fff;
        border-radius: 10px;
        overflow: hidden;
        margin-top: 100px;
        padding:28px;
    }
    .msg{
        display: block;
        padding:12px;
        margin: 10px 0;
        color:#fff;
        font-weight: bold
    }
    .error{
        border-radius: 1px;
        border: 3px solid rgb(255, 59, 59);
    }
    .success{
        border-radius: 1px;
        border: 3px solid rgb(59, 255, 119);
    }
    input:focus, button:focus{
        outline-style: none;
    }

    .btn-modal{
            background: #59d7ee;
            display: block;
            border-radius: 0;
            font-weight: bold;
            padding:18px;
            margin:20px -28px;
            margin-bottom: -28px;
        }

    .seat {
      color: white;
      padding: 10px;
      border: none;
      border-radius: 3px;
      background: transparent;
      font-size: 28px;
      text-align: center;
      width:40px;
    }
    .seat span{
        display: block;
        text-align: center;
        width: 40px;

    }

    .seats-container {
            display: grid;
            grid-template-columns: repeat(7, 1fr);
            grid-template-rows: auto auto auto;
            gap: 22px; /* Adjust the gap between the seats if needed */
        }

        .seat:nth-child(1) { grid-column: 1; grid-row: 1; }
        .seat:nth-child(2) { grid-column: 2; grid-row: 1; }
        .seat:nth-child(3) { grid-column: 3; grid-row: 1; }
        .seat:nth-child(4) { grid-column: 4; grid-row: 1; }
        .seat:nth-child(5) { grid-column: 5; grid-row: 1; }
        .seat:nth-child(6) { grid-column: 6; grid-row: 1; }
        .seat:nth-child(7) { grid-column: 7; grid-row: 1; }

        .seat:nth-child(8) { grid-column: 1 / span 6; grid-row: 2; margin-left: 10px }
        .seat:nth-child(9) { grid-column: 2 / span 6; grid-row: 2;  margin-left: 10px }
        .seat:nth-child(10) { grid-column: 3 / span 6; grid-row: 2;  margin-left: 10px }
        .seat:nth-child(11) { grid-column: 4 / span 6; grid-row: 2;  margin-left: 10px }
        .seat:nth-child(12) { grid-column: 5 / span 6; grid-row: 2;  margin-left: 10px }
        .seat:nth-child(13) { grid-column: 6 / span 6; grid-row: 2;  margin-left: 10px }

        .seat:nth-child(14) { grid-column: 1 / span 6; grid-row: 3; }
        .seat:nth-child(15) { grid-column: 2 / span 6; grid-row: 3; }
        .seat:nth-child(16) { grid-column: 3 / span 6; grid-row: 3; }
        .seat:nth-child(17) { grid-column: 4 / span 6; grid-row: 3; }
        .seat:nth-child(18) { grid-column: 5 / span 6; grid-row: 3; }
        .seat:nth-child(19) { grid-column: 6 / span 6; grid-row: 3; }
/*
            .seat:nth-child(n+7):nth-child(-n+12) {
                margin-left: 17px;
            }
*/

    .seat.selected span{
      color: #59d7ee !important;
      text-align: center;
    display: block
    }
    .filter-section {
        display: flex;
        align-items: center;
        margin-bottom: 20px;
        gap: 10px;
        justify-content: center
    }

    .date-label{
        font-size: 24px;
        color: #59d7ee;
        background-color: #121212;
        padding: 10px;
        border-radius: 10px;
        font-family: gilroy-bold, sans-serif;
        position: absolute;
        left: 10px;
        width:76px;
        height:170px;
        text-align: center;
    }
    .delete-label{
        background-color: #ED1C24;
        right: 10px;
        right: 0;
        width:76px;
        height:76px;
        padding: 10px;
        border-radius: 10px;
        position: absolute;
        text-align: center;
        align-items: center;
        z-index: 1;
        cursor: pointer;
        padding-top: 25px;
    }

    .switch {
        position: relative;
        display: inline-block;
        width: 50px;
        height: 25px;
    }

    .switch input {
        opacity: 0;
        width: 0;
        height: 0;
    }

    .slider {
        position: absolute;
        cursor: pointer;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: #313131;
        transition: .4s;
        border-radius: 34px;
    }

    .slider:before {
        position: absolute;
        content: "";
        height: 17px;
        width: 17px;
        left: 4px;
        bottom: 4px;
        background-color: #797979;
        transition: .4s;
        border-radius: 50%;
    }

    input:checked + .slider {
        background-color: #59d7ee;
    }

    input:checked + .slider:before {
        transform: translateX(24px);
        background-color: #006a7e;
    }

    .classes-list {
        display: flex;
        flex-direction: column;
        position: relative
    }

    .class-card {
        background-color: #121212;
        border-radius: 10px;
        padding: 30px;
        margin-bottom: 10px;
        width:80%;
        align-self: center
    }
        .female_only{
            border-color: #FF00D6!important;
        }

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

    .class-image {
        width: 70px;
        height: 70px;
        border-radius: 50%;
        margin-right: 20px;
    }

    .class-info h2 {
        font-size: 18px;
        color: #ffffff;
    }

    .class-info h3 {
        font-size: 16px;
        color: #cccccc;
    }

    .class-info p, .class-details p {
        color: #7e7e7e;
        margin: 5px 0;
    }

    .warning-message {
        color: #59d7ee !important;
        font-weight: bold !important;
    }
        .class-details{
            text-align: right
        }
    .class-details h4 {
        color: #ffffff;
        margin: 5px 0;
    }

    .btn.reserve {
        background-color: transparent;
        border: none;
        color: white;
        padding: 10px 30px;
        text-align: center;
        text-decoration: none;
        font-family: gilroy-bold, sans-serif;
        display: inline-block;
        cursor: pointer;
        border: 2px solid #59d7ee;
        margin-top: 30px;
        display: block;
        clear: both
    }

    .cancellation-policy {
        color: #7e7e7e;
        margin-top: 20px;
    }
    .seat.selected svg path,
    .seat.selected svg rect
    {
        fill: #59d7ee; /* Green fill color when selected */
    }
    .checkoutdisplay{
            display: block;
            width: 80%;
            margin: 20px auto;
            line-height: 32px
        }
        .totalprice{
            padding:15px 30px;
            background: #FFFFFF;
            border-radius: 5px;
            display: block;
            margin:10px auto;
            width:80%;
            min-height: 80px;
            flex-direction: row;
            display: flex;
            justify-content: space-between;
            align-items: center
        }
    .flexblock{
        display: flex; 
        flex-direction: row; 
        justify-content: space-between; 
        align-items: center
    }
    .showsize{
        display: none
    }
    .timeselect{
        padding:10px 15px; 
        border: 2px solid #59d7ee; 
        color: #fff; 
        border-radius: 2px; 
        margin-left: 10px;
        cursor: pointer
    }
    .activetimeselect{
        background: #59d7ee;
        border-color: #59d7ee;
        color: #212529;
    }
    .whiteline{
        display: block;
        height: 1px;
        background: rgba(248, 248, 248, 0.28);
        margin:10px;
        clear: both
    }
        ul.settings{
            display: block;
            padding: 0;
            margin: 0;
        }
        ul.settings li{
            display: block;
            padding: 10px;
            border-bottom: 1px solid rgba(255, 255, 255, 0.4)
        }
        ul.settings li a{
            
             font-family: gilroy-bold, sans-serif;
            color: #fff;

        }
        ul li{
            list-style: none;

        }
        .onlymobile{
            display: none
        }
    @media (max-width: 768px) {
      .footer-custom h5 {
        font-size: 16px;
      }
        .class-content, 
        .totalprice,
        .flexblock{
            display: block;
            flex-direction: column;
            align-items: center;
            align-content: center;
            width:96%
        }
        .class-details,
        .class-content{
            text-align: center
        }
        .date-label{
            display: none;
            width: 100%;
            position: relative;
            height: 50px;
            left: 0;
            margin-bottom: 15px;
        }
        .date-label::after {
            content: '';
            position: absolute;
            bottom: -8px; /* Adjust the position as needed */
            left: 50%;
            transform: translateX(-50%);
            border-left: 10px solid transparent;
            border-right: 10px solid transparent;
            border-top: 10px solid #121212; /* Color of the arrow */
            width: 0;
            height: 0;
        }
        .class-card{
            width:100% !important;
            display: block !important;
            position: relative
        }
        .delete-label{
            top: 0;
            opacity: .2
        }
        .onlymobile{
            display: block
        }
        .totalprice h2{
            font-size: 17px !important;
        }
        .checkoutdisplay span{

        }
        .seat{
            zoom: .9;
        }
        .seats-container{
            gap: 12px !important;
            margin-left: -45px;
            margin-right: -45px;
        }
        .hidemobile{
            display: none
        }
        .w-100{
            width:80% !important
        }
        .datemobile{
            font-size: 24px;
            color: #59d7ee;
            font-family: gilroy-bold, sans-serif;
        }
        #headerSlider{
          background: url("../imgs/Group4_mobile.png") center no-repeat transparent;
         background-size: contain
        }
        .filter-section{
            display: block;
        }
        .btn.reserve{
            width: 100%;
        }
    }