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 */
          /* min-height, NOT height: .bg wraps the whole body of ~20 page
             templates, so a fixed height boxed every page taller than it and
             let the footer land on top of the content (packages was the
             worst case). The texture still paints as a 400px band at the
             top -- that part was intentional, only the box must grow. */
          min-height: 400px;
          height: auto;
          background-position: center top;
          background-repeat: no-repeat;
          background-size: 100% 400px;
    }
    .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;
        }

    .spot-row {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 8px 10px;
    }

    .spot-row b {
      color: #59d7ee;
      font-size: 22px;
    }

    .spot-context {
      font-size: 22px;
      padding: 6px 10px;
    }

    .spot-stepper {
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 15px;
      padding: 15px 10px;
    }

    .spot-btn {
      background-color: #343a40;
      color: white;
      border: none;
      padding: 4px 16px;
      border-radius: 20px;
      font-size: 22px;
    }

    .spot-btn:disabled {
      background-color: #343434;
      opacity: .45;
      cursor: not-allowed;
    }

    .spot-count {
      color: #59d7ee;
      font-size: 28px;
      min-width: 40px;
      text-align: center;
    }

    .spot-empty {
      padding: 15px 10px;
    }

    .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-card.session-disabled {
        opacity: 0.6;
    }

    .class-card.session-disabled .h2,
    .class-card.session-disabled .h3,
    .class-card.session-disabled p {
        color: #343434!important;
    }

    .no-sessions {
        display: block;
        margin: 30px auto;
        text-align: center;
    }

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

        }
        .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%;
        }
    }
/* ==========================================================================
   Site header / navigation — refreshed 2026-09
   Sticky translucent bar, single-line desktop menu (no wrapping labels),
   real mobile panel instead of the old absolute/negative-margin hacks.
   Breakpoint is 1300px (not Bootstrap's 992px) because eight uppercase
   labels + the account cluster need the room to stay on one line.
   ========================================================================== */

.site-nav{
    position: sticky;
    top: 0;
    z-index: 1030;
    padding: 0;
    background: rgba(0,0,0,.55);
    -webkit-backdrop-filter: saturate(150%) blur(14px);
    backdrop-filter: saturate(150%) blur(14px);
    border-bottom: 1px solid rgba(255,255,255,.08);
    transition: background-color .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.site-nav.is-scrolled{
    background: rgba(8,8,8,.94);
    border-bottom-color: rgba(89,215,238,.22);
    box-shadow: 0 8px 28px rgba(0,0,0,.55);
}
.site-nav > .container{
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    max-width: 1360px;
    min-height: 64px;
}
.site-nav .navbar-brand{
    order: 1;
    padding: 0;
    margin: 0 auto 0 0;
    display: flex;
    align-items: center;
}
[dir="rtl"] .site-nav .navbar-brand{ margin: 0 0 0 auto }
.site-nav .navbar-brand img{
    width: auto;
    height: 38px;
    display: block;
    transition: opacity .2s ease;
}
.site-nav .navbar-brand:hover img{ opacity: .82 }

/* ---- primary links ---- */
.site-nav .nav-main{
    flex-wrap: nowrap;
    align-items: center;
    padding-left: 0;   /* the UA's inline-start padding lands on the right in RTL */
    padding-right: 0;
}
.site-nav .nav-main .nav-link{
    position: relative;
    white-space: nowrap;
    padding: 8px 11px;
    font-size: 12.5px;
    letter-spacing: .055em;
    word-spacing: .18em;
    text-transform: uppercase;
    color: rgba(255,255,255,.72);
    transition: color .2s ease;
}
.site-nav .nav-main .nav-link::after{
    content: '';
    position: absolute;
    left: 11px;
    right: 11px;
    bottom: 1px;
    height: 2px;
    border-radius: 2px;
    background: #59d7ee;
    transform: scaleX(0);
    transition: transform .22s ease;
}
.site-nav .nav-main .nav-link:hover,
.site-nav .nav-main .nav-link:focus{ color: #fff }
.site-nav .nav-main .nav-link:hover::after{ transform: scaleX(.5) }
.site-nav .nav-main .nav-link.is-active{ color: #fff }
.site-nav .nav-main .nav-link.is-active::after{ transform: scaleX(1) }

/* ---- right-hand cluster: basket / account / language ---- */
.site-nav .nav-utility{
    order: 2;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
}
.site-nav .nav-utility > .nav-item + .nav-item{ margin-left: 8px }
[dir="rtl"] .site-nav .nav-utility > .nav-item + .nav-item{ margin-left: 0; margin-right: 8px }

.nav-icon-btn{
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    color: #59d7ee;
    border: 1px solid rgba(89,215,238,.35);
    background: rgba(89,215,238,.08);
    transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}
.nav-icon-btn:hover{ color: #fff; background: rgba(89,215,238,.2); border-color: #59d7ee }
.basket-count{
    position: absolute;
    top: -5px;
    right: -5px;
    min-width: 19px;
    height: 19px;
    padding: 0 5px;
    border-radius: 10px;
    background: #59d7ee;
    color: #04141a;
    font-family: 'Gilroy-bold', sans-serif;
    font-size: 11px;
    line-height: 19px;
    text-align: center;
}
[dir="rtl"] .basket-count{ right: auto; left: -5px }

.nav-account{
    display: flex;
    align-items: center;
    height: 38px;
    padding: 0 14px;
    border-radius: 999px;
    border: 1px solid rgba(89,215,238,.35);
    background: rgba(89,215,238,.08);
    color: #59d7ee;
    font-size: 12px;
    letter-spacing: .05em;
    text-transform: uppercase;
    white-space: nowrap;
    transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}
.nav-account:hover{ color: #fff; background: rgba(89,215,238,.2); border-color: #59d7ee }
.nav-account .fa{ font-size: 13px }
.nav-account-name{
    display: inline-block;
    max-width: 110px;
    margin-left: 8px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: middle;
}
[dir="rtl"] .nav-account-name{ margin-left: 0; margin-right: 8px }
.nav-wallet{
    margin-left: 8px;
    padding: 2px 8px;
    border-radius: 999px;
    background: rgba(255,255,255,.14);
    color: #fff;
    font-family: 'Gilroy-bold', sans-serif;
    font-size: 11px;
    letter-spacing: 0;
}
[dir="rtl"] .nav-wallet{ margin-left: 0; margin-right: 8px }

.site-nav .nav-lang{
    display: flex;
    flex-direction: row;
    align-items: center;
}
.site-nav .nav-lang a{
    display: block;
    width: 26px;
    height: 26px;
    padding: 0;
    line-height: 0;
    border-radius: 50%;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.2);
    opacity: .6;
    filter: grayscale(.45);
    transition: opacity .2s ease, filter .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.site-nav .nav-lang a + a{ margin-left: 8px }
[dir="rtl"] .site-nav .nav-lang a + a{ margin-left: 0; margin-right: 8px }
.site-nav .nav-lang a img{ width: 100%; height: 100%; object-fit: cover; display: block }
.site-nav .nav-lang a:hover{ opacity: .9; filter: none }
.site-nav .nav-lang a.is-current{
    opacity: 1;
    filter: none;
    border-color: #59d7ee;
    box-shadow: 0 0 0 2px rgba(89,215,238,.3);
}

/* ---- hamburger ---- */
.nav-toggle{
    order: 3;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 40px;
    margin-left: 10px;
    padding: 0;
    border: 1px solid rgba(255,255,255,.22);
    border-radius: 10px;
    background: transparent;
    cursor: pointer;
}
[dir="rtl"] .nav-toggle{ margin-left: 0; margin-right: 10px }
.nav-toggle:focus{ outline: none; box-shadow: 0 0 0 3px rgba(89,215,238,.28) }
.nav-toggle span{
    display: block;
    width: 20px;
    height: 2px;
    border-radius: 2px;
    background: #fff;
    transition: transform .25s ease, opacity .2s ease;
}
.nav-toggle span + span{ margin-top: 5px }
.nav-toggle[aria-expanded="true"] span:nth-child(1){ transform: translateY(7px) rotate(45deg) }
.nav-toggle[aria-expanded="true"] span:nth-child(2){ opacity: 0 }
.nav-toggle[aria-expanded="true"] span:nth-child(3){ transform: translateY(-7px) rotate(-45deg) }

/* ---- collapsed (below 1300px): stacked panel ---- */
@media (max-width: 1299.98px){
    .site-nav .nav-links-wrap{
        order: 4;
        width: 100%;
        flex-basis: 100%;
        margin: 0 -15px;
        padding: 0 15px;
        background: rgba(6,6,6,.97);
    }
    /* the bar is sticky, so an open panel taller than the viewport could never
       be scrolled into view (phone landscape) - cap it under the 65px bar */
    .site-nav .nav-links-wrap.show,
    .site-nav .nav-links-wrap.collapsing{
        max-height: calc(100vh - 65px);
        max-height: calc(100dvh - 65px);
        overflow-y: auto;
        overscroll-behavior: contain;
    }
    .site-nav .nav-main{
        flex-direction: column;
        align-items: stretch;
        width: 100%;
        margin: 6px 0 10px;
        border-top: 1px solid rgba(255,255,255,.1);
    }
    .site-nav .nav-main .nav-link{
        padding: 14px 2px;
        font-size: 14px;
        text-align: left;
        border-bottom: 1px solid rgba(255,255,255,.07);
    }
    [dir="rtl"] .site-nav .nav-main .nav-link{ text-align: right }
    .site-nav .nav-main .nav-link::after{ display: none }
    .site-nav .nav-main .nav-link.is-active{ color: #59d7ee }
    /* icon-only account chip in the top bar on small screens */
    .nav-account{ padding: 0 12px }
    .nav-account-name,
    .nav-wallet{ display: none }
}

@media (max-width: 400px){
    .site-nav > .container{ padding-left: 12px; padding-right: 12px }
    .site-nav .nav-links-wrap{ margin: 0 -12px; padding: 0 12px }
    .site-nav .navbar-brand img{ height: 34px }
    .site-nav .nav-lang a{ width: 24px; height: 24px }
    .site-nav .nav-utility > .nav-item + .nav-item{ margin-left: 6px }
    [dir="rtl"] .site-nav .nav-utility > .nav-item + .nav-item{ margin-left: 0; margin-right: 6px }
}

/* ---- expanded (1300px and up): one line, everything visible ---- */
@media (min-width: 1300px){
    .site-nav > .container{ min-height: 76px }
    .site-nav .navbar-brand img{ height: 46px }
    .site-nav .nav-toggle{ display: none }
    .site-nav .nav-links-wrap{
        order: 2;
        display: flex !important;
        flex-basis: auto;
        flex-grow: 1;
        min-width: 0;
        justify-content: flex-end;
    }
    .site-nav .nav-main{ flex-direction: row }
    .site-nav .nav-utility{
        order: 3;
        margin-left: 14px;
        padding-left: 16px;
        border-left: 1px solid rgba(255,255,255,.13);
    }
    [dir="rtl"] .site-nav .nav-utility{
        margin-left: 0;
        margin-right: 14px;
        padding-left: 0;
        padding-right: 16px;
        border-left: 0;
        border-right: 1px solid rgba(255,255,255,.13);
    }
}

/* narrow desktop: tighten the labels rather than let them wrap */
@media (min-width: 1300px) and (max-width: 1519.98px){
    .site-nav .nav-main .nav-link{ padding: 8px 8px; font-size: 11.5px; letter-spacing: .035em; word-spacing: .14em }
    .site-nav .nav-main .nav-link::after{ left: 8px; right: 8px }
    .nav-account-name{ max-width: 84px }
}

/* ==========================================================================
   Packages page — refreshed 2026-09
   Was a white #f8f9fa slab dropped into the black site with default green
   btn-success CTAs; now dark cards in the brand language, price first.
   ========================================================================== */

.packages-subtitle{
    margin: 6px 0 34px;
    color: rgba(255,255,255,.78);
    font-size: 15px;
    text-shadow: 0 1px 6px rgba(0,0,0,.85);
}
.packages-section{ padding: 0 0 30px }

.package-card{
    display: flex;
    flex-direction: column;
    position: relative;
    width: 100%;
    padding: 28px 26px 26px;
    border-radius: 14px;
    border: 1px solid rgba(255,255,255,.1);
    background: linear-gradient(180deg, rgba(24,27,33,.96), rgba(13,15,19,.96));
    box-shadow: 0 10px 30px rgba(0,0,0,.4);
    transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.package-card:hover{
    transform: translateY(-6px);
    border-color: rgba(89,215,238,.5);
    box-shadow: 0 16px 40px rgba(0,0,0,.6), 0 0 0 1px rgba(89,215,238,.18);
}

/* head row, not absolute positioning: in RTL an absolutely placed badge
   landed straight on top of the package title. */
.package-head{
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}
.package-save{
    flex: none;
    padding: 4px 11px;
    border-radius: 999px;
    background: #59d7ee;
    color: #04141a;
    font-family: 'Gilroy-bold', sans-serif;
    font-size: 11.5px;
    letter-spacing: .04em;
    text-transform: uppercase;
    white-space: nowrap;
}
.package-save .amt{ unicode-bidi: isolate; direction: ltr }

.package-title{
    margin: 0;
    font-family: 'Gilroy-bold', sans-serif;
    font-size: 19px;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: #fff;
}

/* prices stay LTR in both languages — "270 KWD", never "KWD 270" */
.package-head + .package-price{ margin-top: 14px }

.package-price{
    display: flex;
    align-items: baseline;
    line-height: 1;
    direction: ltr;
}
[dir="rtl"] .package-price{ justify-content: flex-end }
.package-amount{
    font-family: 'Gilroy-bold', sans-serif;
    font-size: 46px;
    color: #59d7ee;
    letter-spacing: -.01em;
}
.package-cur{
    margin-left: 8px;
    font-size: 14px;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: rgba(255,255,255,.55);
}
.package-unit{
    margin-top: 7px;
    font-size: 13px;
    color: rgba(255,255,255,.5);
}
[dir="rtl"] .package-unit{ text-align: right }
/* keep the amount from being re-ordered by the surrounding Arabic run */
.package-unit .amt{ unicode-bidi: isolate; direction: ltr }

.package-meta{
    margin: 22px 0 26px;
    padding: 0;
    border-top: 1px solid rgba(255,255,255,.09);
}
.package-meta li{
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 11px 0;
    border-bottom: 1px solid rgba(255,255,255,.09);
    list-style: none;
}
.package-meta li span{ color: rgba(255,255,255,.58); font-size: 13.5px }
.package-meta li b{ color: #fff; font-family: 'Gilroy-bold', sans-serif; font-size: 14.5px }

.package-cta{
    display: block;
    margin-top: auto;
    padding: 14px 16px;
    border-radius: 10px;
    border: 1px solid #59d7ee;
    background: rgba(89,215,238,.1);
    color: #59d7ee;
    font-family: 'Gilroy-bold', sans-serif;
    font-size: 14px;
    letter-spacing: .07em;
    text-transform: uppercase;
    text-align: center;
    transition: background-color .2s ease, color .2s ease, transform .15s ease;
}
.package-cta:hover,
.package-cta:focus{
    background: #59d7ee;
    color: #04141a;
    text-decoration: none;
}
.package-cta:active{ transform: translateY(1px) }

@media (max-width: 768px){
    .package-card{ padding: 24px 20px 22px }
    .package-amount{ font-size: 40px }
    .packages-subtitle{ margin-bottom: 26px }
}