/* #region ==== RESET & TYPOGRAPHY ==== */
*, *::before, *::after { box-sizing: border-box; margin:0; padding:0; }
body {
    font-family: 'Open Sans', Arial, sans-serif;
    line-height: 1.6;
    color: #333;
    background: #fff;
}
h1, h2, h3 { font-family: 'Montserrat', sans-serif; font-weight: 700; }
a { text-decoration: none; }

/* #endregion */

/* #region ==== HEADER / NAV ==== */
header {
    background: #222;
    color: #fff;
    position: fixed;
    width: 100%;
    top:0; left:0;
    z-index: 1000;
    box-shadow: 0 2px 8px rgba(0,0,0,.15);
}
nav {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.8rem 1rem;
}
.logo { font-size: 1.6rem; font-weight: 700; }
nav ul { list-style:none; display:flex; gap:1.5rem; }
nav a { color:#fff; font-weight:600; transition:color .3s; }
nav a:hover { color:#0066ff; }

/* #endregion */

/* #region ==== HERO ==== */
.hero {
        min-height:70vh;
        background: linear-gradient(135deg, #f9f9fb 0%, #e8f0ff 100%);
        display:flex;
        align-items:center;
        padding: 7rem 1rem 4rem;
        position:relative;
        overflow:hidden;
        }
    .hero-container {
    max-width: 1300px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr;   /* side-by-side on large screens */
    gap: 4rem;
    align-items: center;
    }
        .hero-text h1 {
            font-size:4.5rem;
            line-height:1.1;
            margin-bottom:.5rem;
        }
        .hero-text .tagline {
            font-size:1.8rem;
            margin:1.5rem 0 2rem;
            color:#222;
        }
        .hero-text p {
            max-width:520px;
            margin-bottom:2rem;
            font-size:1.05rem;
            line-height:1.7;
        }
        .hero-buttons {
            display:flex;
            gap:1rem;
            flex-wrap:wrap;
        }
        .btn-primary {
            background:#0066ff;
            color:#fff;
            padding:.8rem 1.8rem;
            border-radius:4px;
            font-weight:600;
        }
        .btn-primary:hover { background:#004ecb; }
        .btn-secondary {
            background:transparent;
            color:#0066ff;
            border:2px solid #0066ff;
            padding:.8rem 1.8rem;
            border-radius:4px;
            font-weight:600;
        }
        .btn-secondary:hover { 
            background:#0066ff; color:#fff; 
        }

        .hero-image img {
            max-width:100%;
            height:auto;
            border-radius:12px;
            box-shadow:0 20px 40px rgba(0,0,0,.15);
        }

        /* Mobile responsiveness for hero section*/
        @media (max-width: 768px) {
    .hero-container {
        grid-template-columns: 1fr;        /* stack vertically */
        gap: 3rem;
        text-align: center;           
    }

    @media (max-width: 768px) {
    .hero h1 { font-size:3rem; }
    .hero p  { font-size:1.1rem; }
    .hero-text .tagline { font-size: 1.5rem;}
    nav ul { gap:1rem; }
    .about-content { flex-direction:column; text-align:center; }
}

@media (max-width: 768px){
    .hero-container { flex-direction:column; text-align:center; }
}

@media (max-width: 480px) {
    .hero h1 { font-size:1.9rem; }
    .btn { padding:.7rem 1.6rem; font-size:.95rem; }
}

    /* Make the image appear ABOVE the text on mobile */
    .hero-image {
        order: -1;                         /* moves image to the top */
    }

    .hero-image img {
        max-width: 80%;                    /* slightly smaller than full width */
        margin: 0 auto;
        display: block;
    }

    /* Optional: make buttons stack nicely on very small screens */
    .hero-buttons {
        flex-direction: column;
        align-items: center;
    }
    .hero-buttons a {
        width: 100%;
        max-width: 300px;
    }
}

/* #endregion */


/* ==== SECTIONS ==== */
section { padding:5rem 1rem; max-width:1200px; margin:0 auto; }
h2 { font-size:2.5rem; text-align:center; margin-bottom:2rem; color:#222; }

/* #region ==== CLIENT REVIEWS – HORIZONTAL SCROLL ==== */
.reviews-section {
    padding: 5rem 1rem;
    max-width: 1200px;
    margin: 0 auto;
    text-align: center;
}
.reviews-wrapper {
    position: relative;
    overflow: hidden;
}
.reviews-container {
    display: flex;
    gap: 1.5rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    padding: 1rem 0;
    -webkit-overflow-scrolling: touch; /* smooth on iOS */
}
.reviews-container::-webkit-scrollbar { display: none; }   /* hide scrollbar */
.reviews-container { -ms-overflow-style: none; scrollbar-width: none; }

.review-card {
    flex: 0 0 300px;               /* fixed width per card */
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0,0,0,.08);
    overflow: hidden;
    scroll-snap-align: start;
    transition: transform .3s;
}
.review-card:hover { transform: translateY(-6px); }

.review-card img {
    width: 100%;
    height: 240px;
    object-fit:cover;
    object-position: center 30%;
}
.review-content {
    padding: 1.2rem;
}
.review-content h3 {
    margin-bottom: .4rem;
    font-size: 1.3rem;
}
.stars {
    color: #ff6b6b;
    margin-bottom: .6rem;
    font-size: 1.1rem;
}
.review-content p {
    font-size: .95rem;
    color: #555;
}

/* #endregion */

/* #region ---- SCROLL BUTTONS ---- */
.scroll-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(0,0,0,.5);
    color: #fff;
    border: none;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    font-size: 1.5rem;
    cursor: pointer;
    z-index: 10;
    transition: background .3s;
}
.scroll-btn:hover { background: rgba(0,0,0,.7); }
.scroll-left  { left: 10px; }
.scroll-right { right: 10px; }

/* hide buttons on very small screens (touch swipe works) */
@media (max-width: 480px) {
    .scroll-btn { display: none; }
}

/* #endregion */


/* #region---- ABOUT / TRAINING ---- */
.about { background: linear-gradient(135deg, #f9f9fb 0%, #e8f0ff 100%); }
.about-content {
    display:flex;
    gap:2.5rem;
    align-items:center;
    flex-wrap:wrap;
    justify-content:center;    
}

.about-text h1 { margin-bottom: 1rem; }
.about-text h3 { margin-top: 1rem; margin-bottom: .8rem; }
.about-text p  { line-height: 1.7; }

.training h1 { margin-top: 2rem; margin-bottom: .8rem; }
.training h1 { margin-top: 2rem; margin-bottom: .8rem; }
.training ul { margin: 1.2rem; padding:0 1rem;}
.training li { margin-bottom: .6rem; }
.training p { margin-bottom: 1.6rem; }


.training {
    text-align: center;
    list-style-position: inside;
    margin-bottom: 1.6rem;
    padding-bottom: 1rem;
}

.training img {
    margin: 2rem;
    text-align: center;
}


@media (max-width: 768px){
    /* Make the image appear ABOVE the text on mobile */
    .training-image {
        order: -1;                         /* moves image to the top */
    }

    .training-image img {
        max-width: 80%;                    /* slightly smaller than full width */
        margin: 0 auto;
        display: block;
    }
}

.about img {
    max-width:320px;
    border-radius:12px;
    box-shadow:0 6px 18px rgba(0,0,0,.12);
}
.about-text { max-width:560px; }

/* #endregion */

/* #region ---- LOCATIONS ----*/
/* The magic container – side-by-side on large screens, stacked on small */
.location {
    max-width: 1200px;
    margin: 4rem auto;
    padding: 0 1rem;
    text-align: center;
}

/* Centered heading above everything */
.location-title {
    font-size: 2.5rem;
    margin-bottom: 3rem;
    color: #1e293b;
}

/* This is the key container – side-by-side on desktop */
.location-grid {
    display: flex;
    gap: 3rem;
    flex-wrap: wrap;             /* allows wrapping on small screens */
    justify-content: center;     /* keeps them centered when wrapped */
}

/* Each card */
.locationcard {
    flex: 1;
    min-width: 320px;            /* forces side-by-side until screen is too small */
    background: white;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
}

/* Image */
.locationcard img {
    width: 100%;
    height: 280px;
    object-fit: cover;
    display: block;
}

/* Text area */
.locationcard-text {
    padding: 2rem 1.5rem;
}
.locationcard-text h3 {
    margin: 0 0 1rem 0;
    font-size: 1.5rem;
}

/* Mobile – forces full stack */
@media (max-width: 768px) {
    .location-grid {
        flex-direction: column;
        align-items: center;
    }
    .locationcard {
        min-width: auto;
        width: 100%;
        max-width: 400px;
    }
}


/* #endregion */

/* #region---- CONTACT ---- */

#contact {
    background: linear-gradient(135deg, #f9f9fb 0%, #e8f0ff 100%);
}

.contact form {
    max-width:620px;
    margin:0 auto;
    display:flex;
    flex-direction:column;
    gap:1.6rem;
}
.form-group { 
    display:flex; 
    flex-direction:column; 
    gap:.5rem; 
    padding-top: .5rem;
    padding-bottom: .5rem;
    padding-right: 3rem;
}

#contacth1{
    padding-top: 2rem;
    padding-bottom: 1rem;
}

label { font-weight:600; color:#222; }
input, textarea {
    padding:.9rem;
    border:1px solid #ddd;
    border-radius:6px;
    font-size:1rem;
    transition:border .3s, box-shadow .3s;
}

/* Selector styling */
select {
  width: 10rem;
  padding: 12px 16px;
  font-size: 1rem;
  border: 2px solid #d1d5db;
  border-radius: 8px;
  background-color: white;
  appearance: none; /* removes default arrow */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%236b7280' d='M1.41 0L6 4.59 10.59 0 12 1.42l-6 6-6-6z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  cursor: pointer;
}

select:focus {
  outline: none;
  border-color: #2563eb;
  box-shadow: 0 0 0 3px rgba(37,99,235,0.1);
}


/* Checklist styling*/

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

.fitness-checklist{
    padding-top: 1em;
    padding-bottom: 1em;
}

.btn-consult {
    background:#0066ff;
    color:#fff;
    padding:.8rem 1.8rem;
    border-radius:4px;
    border-color: #ffffff;
    font-weight:600;
}
.btn-consult:hover { background:#004ecb; }

.fitness-checklist .checklist li {
  margin-bottom: .75rem;
  display: flex;
  align-items: center;
}

.fitness-checklist .checklist input[type="checkbox"] {
  margin-right: .75rem;
  transform: scale(1.2);
}

.fitness-checklist .checklist label {
  cursor: pointer;
  user-select: none;
  font-size: 1rem;
}

textarea { resize:vertical; min-height:130px; }

/* #endregion */

/* ==== FOOTER ==== */
footer {
    background:#222;
    color:#ddd;
    text-align:center;
    padding:1.5rem;
    font-size:.95rem;
}