/* Imports */
@import url('https://fonts.googleapis.com/css2?family=Satisfy&display=swap');

/* -------------------------
    Global Variables
    ------------------------- */
:root {
    /* Fonts */
    --font-primary: "Ubuntu", system-ui, sans-serif;
    --font-secondary: "Raleway", system-ui, sans-serif;
    --font-script: 'Satisfy', cursive;
    /* Colors */
    --color-accent: #E9552B;
    --color-light-text: #808080;
    --color-dim: #707070;
    --color-black: #000000;
    --color-light-black: #262626;
    --color-deep-black: #161616;
    --color-faint-black: #333333;
    --color-faint-black-2: #3A3334;
    --color-dark: #444444;
    --color-transparent: #FFFFFF00;
    --color-white: #FFFFFF;
    --color-white-fade: #FFFFFFFA;
    --color-shadow-gray: #C9C9C9;
    --color-off-white: #FEFEFE;
    --color-page-bg: #F6F6F6;
    --color-soft-gray: #D6D6D6;
    --color-line: #D9D9D9;
    --color-faint-bg: #ABABAB;
    --color-light-bg: #9B9B9B;
    --color-light-gray: #AFAFAF;
    --color-neutral-1: #717171;
    --color-muted-light: #DEDEDE;
    --color-muted-bg: #BEBEBE;
    --color-muted: #B5B5B5;
    --color-muted-dark: #565656;
    /* Sizes */
    --container-width: 1850px;
    --offcanvas-width: 430px;
    --spacing-gutter: 25px;
    --border-radius-base: 8px;
    --border-radius-mid: 14px;
    --border-radius-large: 40px;
    --font-size-h1: clamp(36px, 4vw, 64px);
    --font-size-h2: clamp(30px, 3vw, 50px);
    --font-size-h3: clamp(24px, 2.75vw, 36px);
    --font-size-h4: clamp(22px, 2.5vw, 30px);
    --font-size-h5: clamp(20px, 2vw, 26px);
    --font-size-lead: 18px;
    --font-size-body: 16px;
    --font-size-desc: clamp(19px, 1.5vw, 23px);
    /* Effects */
    --blur-bg: blur(8px);
    --shadow-card: 0 6px 22px rgba(15, 15, 15, 0.06);
    --shadow-btn-accent: 0 6px 18px rgba(233, 177, 85, 0.12);
    --z-header: 50;
    --z-overlay: 1500;
    --z-offcanvas: 2000;
}

/* -------------------------
    Base Reset
    ------------------------- */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html,
body {
    height: 100%;
}

body {
    font-family: var(--font-primary);
    font-size: var(--font-size-body);
    background: var(--color-white);
    color: var(--color-black-1);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    line-height: 1.5;
    position: relative;
}

section {
    position: relative;
    padding: 80px 0;
}

a {
    color: inherit;
    text-decoration: none;
    cursor: pointer;
    outline: none;
}

button {
    cursor: pointer;
}

img {
    max-width: 100%;
    display: block;
    height: auto;
}

/* Base typography elements */
h1 {
    font-family: var(--font-secondary);
    font-size: var(--font-size-h1);
}

h2 {
    font-size: var(--font-size-h2);
    font-family: var(--font-secondary);
    font-weight: 700;
}

h3 {
    font-family: var(--font-secondary);
    font-size: var(--font-size-h3);
}

p {
    line-height: 1.6;
}

/* Consistent line height for paragraphs */

/* -------------------------
    Utility Classes
    ------------------------- */
.container {
    max-width: var(--container-width);
    width: 100%;
    margin: 0 auto;
    padding: 0 var(--spacing-gutter);
}

.container-full {
    max-width: 100%;
    padding: 0 calc(3 * var(--spacing-gutter));
}

.row-2-cols {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 30px;
}

.row-with-title {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    position: relative;
}

/* Buttons */
.btn {
    width: 100%;
    max-width: 240px;
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 42px;
    height: 78px;
    padding: 10px 24px;
    border-radius: var(--border-radius-large);
    border: 1px solid var(--color-muted-light);
    font-weight: 400;
    color: var(--color-deep-black);
    transition: all 0.3s ease-in-out;
    text-align: center;
}

.btn:hover {
    max-width: 390px;
}

.btn img {
    max-width: 24px;
}

.btn-row {
    display: flex;
    gap: 12px;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 40px;
}

.btn-primary {
    background-color: var(--color-accent);
    border: none;
    color: var(--color-white);
}

.btn-secondary {
    color: var(--color-white);
    background: rgb(255 255 255 / 20%);
    border: 1px solid var(--color-white);
    backdrop-filter: blur(8px);
}

.section-header {
    margin-bottom: 30px;
    position: relative;
    z-index: 1;
}

.section-header .title {
    font-size: var(--font-size-h2);
    padding-top: 20px;
    line-height: 1.2;
    margin: 0;
    font-weight: 500;
    color: var(--color-black-1);
}

.section-header .title span {
    color: var(--color-accent-primary);
}

.section-header .explain {
    pointer-events: none;
    opacity: 0.6;
    position: absolute;
    width: 100%;
    left: 0;
    top: 0;
    z-index: 0;
    font-family: var(--font-secondary);
    -webkit-text-stroke: 1px var(--color-accent-primary);
    color: var(--color-transparent);
    font-weight: 400;
    font-size: clamp(72px, 9vw, 172px);
    line-height: 1.4;
    margin-bottom: 4px;
    display: block;
}

/* -------------------------
    Header
    ------------------------- */
.site-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding: 15px 0;
    position: sticky;
    top: 0;
    z-index: var(--z-header);
    background: var(--color-white);
}

.nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.brand img.logo {
    max-width: 220px;
}

.main-nav {
    display: flex;
    gap: 32px;
}

.main-nav a {
    color: var(--color-black);
    position: relative;
    font-size: 16px;
    line-height: 18px;
    font-family: var(--font-primary);
    font-weight: 400;
}

.main-nav a::before {
    opacity: 0;
    content: '';
    position: absolute;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    left: 50%;
    bottom: -6px;
    background: var(--color-accent-primary);
    transform: translateX(-50%);
    transition: 0.35s ease-in-out;
}

.main-nav a:hover::before,
.main-nav a.active::before {
    opacity: 1;
}

.cta-block {
    display: flex;
    gap: 30px;
}

.cta-block .btn.ghost {
    background: transparent;
    color: var(--color-dim);
    border: none;
    padding: 0;
    box-shadow: none;
}

.nav-btn.appointment {
    height: auto;
    outline: 1px solid var(--color-faint-bg);
    border: 7px solid #fff;
    background: var(--color-faint-bg);
    padding: 3px 7px;
    color: var(--color-white);
}

/* Mobile Toggle */
.menu-toggle {
    display: none;
    flex-direction: column;
    justify-content: space-between;
    width: 30px;
    height: 18px;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0;
}

.menu-toggle span {
    display: block;
    height: 2px;
    background: var(--color-black);
    border-radius: 2px;
}

/* Offcanvas Menu */
.offcanvas-menu {
    position: fixed;
    top: 0;
    right: -100%;
    width: 80%;
    max-width: 320px;
    height: 100%;
    background: var(--color-white);
    box-shadow: -2px 0 8px rgba(0, 0, 0, 0.1);
    transition: right 0.3s ease;
    z-index: var(--z-offcanvas);
    display: flex;
    flex-direction: column;
    padding: 25px;
}

.offcanvas-menu.active {
    right: 0;
}

.offcanvas-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30px;
}

.offcanvas-logo {
    width: 130px;
}

.close-menu {
    background: none;
    border: none;
    font-size: 30px;
    color: var(--color-black-1);
    cursor: pointer;
    line-height: 1;
}

.offcanvas-nav {
    display: flex;
    flex-direction: column;
	gap: 20px;
}

.offcanvas-nav a {
    color: var(--color-black-1);
    font-weight: 500;
    font-size: 18px;
    margin-bottom: 18px;
    transition: color 0.3s ease;
}

.offcanvas-nav a:hover {
    color: var(--color-accent-primary);
}

/* Overlay */
.offcanvas-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.3);
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    z-index: var(--z-overlay);
}

.offcanvas-overlay.active {
    opacity: 1;
    visibility: visible;
}

.hero-banner {
    position: relative;
    display: flex;
    align-items: center;
    overflow: hidden;
    padding: 0;
}

.hero-block {
    background-color: rgba(0, 0, 0, 0.15);
    background-blend-mode: multiply;
    min-height: clamp(500px, 60vw, 784px);
    display: grid;
    place-content: center;
    place-items: center;
    gap: 30px;
    position: relative;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    border-radius: var(--border-radius-large);
}

.hero-block h1 {
	text-align: center;
    color: var(--color-white);
}

.hero-block>img {
    max-width: 75px;
}

/* -------------------------
    Hero / Top slider
    ------------------------- */
.hero {
    padding: 0;
    background: var(--color-white);
}

.hero-inner {
    position: relative;
    display: flex;
    gap: 0;
    border-radius: var(--border-radius-large);
    align-items: center;
    padding-inline: 70px;
    padding-top: 80px;
    padding-bottom: 90px;
    overflow: hidden;
    min-height: clamp(676px, 50vw, 860px);
}

.hero-inner::before {
    content: '';
    background: transparent linear-gradient(90deg, #000000 0%, #FFFFFF00 100%) 0% 0% no-repeat padding-box;
    position: absolute;
    opacity: 0.5;
    inset: 0;
    width: 100%;
    height: 100%;
}

.scroll-indication {
    position: absolute;
    bottom: 40px;
    left: 50%;
    transform: translateX(-50%);
    color: var(--color-white);
    display: grid;
    place-items: center;
    gap: 20px;
}

.scroll-indication img {
    max-width: 22px;
}

.scroll-indicator p {
    font-size: 16px;
    font-family: var(--font-secondary);
}

.hero-content {
    max-width: 700px;
    width: 100%;
    position: relative;
    z-index: 2;
    padding-bottom: 75px;
}

.hero h1 {
    max-width: 510px;
    margin: 0 0 30px;
    font-weight: 600;
    line-height: 1.25;
    color: var(--color-white);
    font-family: var(--font-secondary);
}

.hero h1 span {
    color: var(--color-accent);
}

.hero-content p {
    color: var(--color-white);
    max-width: 450px;
    margin-bottom: 50px;
}

.hero-sub {
    color: var(--color-muted);
    font-size: 15px;
    margin-bottom: 18px;
}

.btn img {
    max-width: 24px;
}

.btn-group {
    width: 100%;
    display: flex;
    gap: 42px;
}

/* About Us */

.image-block {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
}

.image-block .row-2 {
    grid-row: span 3;
    grid-column: span 4;
    padding-right: 20px;
    margin-top: 70px;
}

.image-block .row-1 {
    grid-column: span 3;
    margin-bottom: 20px;
}

.image-block .row-1:last-child {
    padding-right: 20px;
}

.content-block {
    padding: 0 25px;
}

.content-block h2 {
    margin-bottom: 20px;
}

h2 span {
    color: var(--color-accent);
}

.about-section p {
    font-size: var(--font-size-lead);
    color: var(--color-dark);
    margin-bottom: 20px;
}

.content-block p.light {
    opacity: 0.75;
    margin-bottom: 40px;
}

.about-section .lead {
    font-weight: 300;
}

/* Swiper Pagination */
.swiper-horizontal>.swiper-pagination-bullets,
.swiper-pagination-bullets.swiper-pagination-horizontal {
    bottom: -8%;
    left: auto;
    right: 0;
}

.swiper-pagination-bullet {
    width: 13px;
    height: 13px;
    border-radius: 10px;
    opacity: 1;
    background: var(--color-neutral-1);
    transition: 0.25s ease-in-out;
}

.swiper-pagination-bullet-active {
    width: 57px;
    background: var(--color-accent-primary);
}

/* Swiper Controls Small */
.swiper-navigation {
    position: relative;
    z-index: 5;
    max-width: 440px;
    margin-left: auto;
    margin-top: 50px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 70px 20px 0;
    border-top: 1px solid var(--color-light-gray);
}

.swiper-button-prev,
.swiper-button-next {
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    width: auto;
    height: auto;
    transition: all 0.3s ease;
    cursor: pointer;
}

.swiper-button-prev:after,
.swiper-button-next:after,
.swiper-rtl .swiper-button-next:after,
.swiper-rtl .swiper-button-prev:after {
    content: none;
}

.swiper-button-next span {
    font-family: var(--font-primary);
    font-size: var(--font-size-small);
    color: var(--color-black-1);
    font-weight: 500;
    margin-right: 6px;
}

.swiper-button-prev img,
.swiper-button-next img {
    width: 36px;
    height: 36px;
    background: var(--color-white);
    border-radius: 50px;
    object-fit: contain;
    padding: 12px 10px;
}

.swiper-button-prev:hover,
.swiper-button-next:hover {
    opacity: 0.9;
}

/* -------------------------
    Feature Tiles
    ------------------------- */
.box-nav {
    background: var(--color-white);
    padding: 60px 0 95px;
}

.feature-tiles {
    display: grid;
	grid-template-columns: repeat(4, 1fr);
    gap: 18px;
    margin-top: 60px;
}

.tile {
    border-radius: var(--border-radius-base);
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 12px;
    position: relative;
    text-align: center;
}

.tile .meta {
    font-size: var(--font-size-body);
    line-height: 1.6;
    color: var(--color-deep-black);
    margin: 0;
}

.tile .title {
    font-family: var(--font-secondary);
    font-weight: 600;
    color: var(--color-black);
    margin: 0 0 20px;
    font-size: 20px;
    line-height: 1.8;
}

.img-contain {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 1;
    opacity: 0;
    transition: 0.35s all ease-in-out;
    border-radius: 8px;
}

.info-contain {
    width: 100%;
    margin-block: 50px;
    padding: 50px 30px;
    background: var(--color-page-bg);
    border-radius: var(--border-radius-base);
}

.img-contain img {
    width: 100%;
	border-radius: 8px;
    height: auto;
    object-fit: cover;
    transition: 0.35s ease-in-out;
}

.info-contain img {
    max-width: 80px;
    height: auto;
    margin: 0 auto 20px;
}

.tile:hover .img-contain {
    opacity: 1;
}

/* Video banner Section */
.banner-section {
    position: relative;
    display: flex;
    align-items: center;
    overflow: hidden;
	max-width: 100%;
    padding: 0;
    min-height: clamp(676px, 50vw, 925px);
    aspect-ratio: 19/10;
}

.bg-video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: -1;
}

.banner-section::before {
    position: absolute;
    content: '';
    inset: 0;
    background: rgba(0, 0, 0, 0.35);
    z-index: 0;
}

.video-content {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: start;
    justify-content: start;
    height: 100%;
    color: var(--color-white);
    text-align: left;
    max-width: 702px;
    gap: 40px;
}

.video-content h2 {
    font-family: var(--font-secondary);
    font-size: clamp(38px, 4.5vw, 70px);
    font-weight: 700;
    line-height: 1;
}

.video-content p {
    font-size: var(--font-size-lead);
}

/* -------------------------
    Training Section Styles
    ------------------------- */
.training-section {
    padding-block: 80px;
    background-color: var(--color-white);
}

/* Section Title Styling */
.training-section h2 {
    font-size: var(--font-size-h1);
    font-family: var(--font-secondary);
    color: var(--color-light-black);
    font-weight: 700;
    line-height: 1.2;
    text-align: center;
    max-width: 900px;
    margin: 0 auto 80px;
}

.training-section h2 span {
    color: var(--color-accent);
}

/* Individual Training Block Styling */
.training-block {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 50px;
    margin-bottom: 50px;
    padding: 30px 0;
}

/* Training Content Styling */
.training-content {
    display: grid;
    place-content: start;
    gap: 20px;
    max-width: 700px;
}

.training-section hr {
    margin-bottom: 45px;
}

.training-content h2 {
    text-align: left;
    margin: 0;
    width: 100%;
    font-size: var(--font-size-h2);
    color: var(--color-muted-dark);
}

.training-content p:nth-of-type(1) {
    font-size: var(--font-size-desc);
    font-family: var(--font-secondary);
    font-weight: 300;
    color: var(--color-light-text);
    margin-bottom: 20px;
}

.training-content p:nth-of-type(2) {
    font-size: var(--font-size-desc);
    font-family: var(--font-secondary);
    color: var(--color-faint-black);
    line-height: 1.5;
    margin-bottom: 30px;
}

/* Image Container and Styling */
.training-img {
    max-width: 700px;
    flex: 1;
    border-radius: var(--border-radius-mid);
    box-shadow: var(--shadow-card);
}

.training-img img {
    display: block;
    width: 100%;
	aspect-ratio: 700 / 432;
    border-radius: var(--border-radius-base);
    height: auto;
    object-fit: cover;
	object-position: center 33%;
    transition: transform 0.5s ease-in-out;
}

/* Image Hover Effect */
.training-block:hover .training-img img {
    transform: rotate(-12deg);
}

/* "Connect with Us!" Button and Centering */
.centered {
    text-align: center;
    margin: 0 auto 50px;
}

.centered a.btn {
    max-width: 240px;
}

.centered a.btn img {
    filter: invert(1);
}

.centered .btn:hover {
    max-width: 390px;
    background-color: var(--color-accent);
    color: var(--color-white);
}

/* Media Queries for Responsiveness */
@media (max-width: 992px) {
    .training-block {
        flex-direction: column;
        gap: 30px;
    }

    .training-block:nth-child(even) {
        flex-direction: column;
    }

    .training-section h2 {
        margin-bottom: 30px;
        font-size: var(--font-size-h3);
    }
	.training-section {
		padding-block: 50px;
	}
}


/* Training Yatch */
section.superyacht-training {
    background-color: var(--color-black);
    padding: 80px 0;
}

/* --- Layout Container --- */
.superyacht-training-container {
    display: flex;
    gap: 240px;
}

/* Adjust for smaller screens */
@media (max-width: 1200px) {
    .superyacht-training-container {
        flex-direction: column;
        gap: 50px;
    }
}

/* --- Left Section: Intro and CTA --- */
.intro-section {
	position: relative;
    flex: 0 0 450px;
    padding-top: 50px;
}

@media (max-width: 1200px) {
    .intro-section {
        flex-basis: auto;
        padding-top: 0;
    }
}

.intro-section h2 {
    font-family: var(--font-secondary);
    font-size: var(--font-size-h1);
    font-weight: 600;
    color: var(--color-white);
    margin: 0 0 40px 0;
    line-height: 1.1;
}

.description-text {
    font-family: var(--font-secondary);
    font-size: var(--font-size-lead);
    color: var(--color-light-text);
    margin-bottom: 50px;
    max-width: 400px;
    line-height: 1.5;
}

.intro-section .btn {
	display: flex;
    max-width: 310px;
    margin-top: 50px;
}

.intro-section .btn:hover {
    max-width: 400px;
}

.cta-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: var(--color-light-black);
    color: var(--color-white);
    font-family: var(--font-secondary);
    font-size: var(--font-size-body);
    font-weight: 500;
    text-decoration: none;
    padding: 18px 30px;
    border-radius: var(--border-radius-base);
    transition: background-color 0.3s ease;
    border: 1px solid var(--color-light-black);
}

.cta-button:hover {
    background-color: var(--color-faint-black);
    border-color: var(--color-faint-black);
}

.arrow-icon {
    margin-left: 10px;
    font-size: 1.2em;
    font-weight: bold;
}

.image-wrapper {
	pointer-events: none;
    margin-top: 80px;
}

/* You would need to replace this with the actual image/SVG */
.image-wrapper::before {
    content: " ";
    display: block;
    width: 100%;
    height: 150px;
    background-image: url('../images/412704467_edd58d26-9d0b-4f0e-a323-8a2c554191e1@2x.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: right bottom;
    opacity: 0.5;
}

/* --- Right Section: Offers Grid --- */
.offers-grid {
    flex-grow: 1;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 50px 80px;
}

@media (max-width: 850px) {
    .offers-grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .offer-card.full-width {
        grid-column: span 1;
    }
}

.offer-card {
    display: flex;
    flex-direction: column;
}

.offer-card.full-width {
    grid-column: span 2;
}

.icon-wrapper {
    width: 65px;
    height: auto;
    margin-bottom: 20px;
    color: var(--color-white);
}

.icon-wrapper svg {
    width: 100%;
    height: 100%;
    stroke: var(--color-white);
}

.offer-card:hover svg {
    stroke: var(--color-accent);
    filter: saturate(4.5);
}

.offer-title {
    font-family: var(--font-secondary);
    font-size: var(--font-size-h5);
    font-weight: 500;
    color: var(--color-white);
    margin: 0 0 10px 0;
    line-height: 1.3;
}

.offer-details {
    font-family: var(--font-secondary);
    font-size: var(--font-size-body);
    color: var(--color-muted);
    margin: 0;
    line-height: 1.6;
}

/* logo slider */
.partners-section {
    text-align: center;
}

.partners-section .section-title {
    margin-bottom: 40px;
}

.logo-slider {
    width: 100%;
    overflow: hidden;
    background: #fff;
    padding: 40px 0;
}

.logo-track {
    display: flex;
    width: fit-content;
    animation: scroll 40s linear infinite;
}

.logo-slider:hover .logo-track {
    animation-play-state: paused;
}

.logos {
    display: flex;
    gap: 90px;
    align-items: center;
}

.logos img {
    width: auto;
    height: 65px;
    object-fit: contain;
    filter: grayscale(100%);
    opacity: 0.8;
    transition: all 0.3s ease;
}

.logos img:hover {
    filter: grayscale(0%);
    opacity: 1;
    transform: scale(1.1);
}

@keyframes scroll {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-50%);
    }
}

/* Testimonial Section */
/* Testimonial Section Styles */
.testimonial-section {
    position: relative;
    padding-block: 100px;
    color: var(--color-white);
    overflow: hidden;
}

.testimonial-section .background-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
}

.testimonial-section .background-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: brightness(0.5);
}

.testimonial-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
    z-index: 1;
}

/* Left Content (Title and Button) */
.testimonial-left-content {
    flex: 1;
    max-width: 400px;
}

.testimonial-left-content .section-tag {
    font-size: var(--font-size-body);
    color: var(--color-soft-gray);
    margin-bottom: 25px;
}

.testimonial-left-content h2 {
    font-family: var(--font-secondary);
    font-size: var(--font-size-h3);
    font-weight: 600;
    line-height: 1.5;
    margin-bottom: 50px;
    color: var(--color-white);
}

/* Right Content (Swiper Slider) */
.testimonial-right-slider {
    flex: 1;
    max-width: 1015px;
    position: relative;
}

.testimonial-right-slider .swiper,
.testimonial-right-slider .swiper-container {
    position: static;
}

.swiper {
    width: 100%;
    height: 100%;
    padding-block: 20px;
}

.swiper-slide {
    width: 30%;
    padding: 10px;
}

.testimonial-card {
    background-color: var(--color-white);
    color: var(--color-light-black);
    border-radius: var(--border-radius-mid);
    padding: 30px;
    box-shadow: var(--shadow-card);
    display: flex;
    flex-direction: column;
    height: 100%;
}

.testimonial-card .card-header {
    margin-bottom: 20px;
}

.testimonial-card .user-avatar {
    width: 50px;
    height: 50px;
    object-fit: cover;
}

.testimonial-card .testimonial-text {
    font-size: var(--font-size-body);
    line-height: 1.6;
    margin-bottom: 20px;
    flex-grow: 1;
}

.testimonial-card .user-name {
    font-family: var(--font-script);
    font-weight: 400;
    font-size: var(--font-size-lead);
    color: var(--color-light-black);
    margin-bottom: 5px;
}

.testimonial-card .user-role {
    font-size: var(--font-size-body);
    color: var(--color-light-text);
}

/* Swiper Navigation (Arrows) */
.swiper-button-prev,
.swiper-button-next {
    font-family: var(--font-secondary);
    color: var(--color-white);
    background-color: rgba(139, 139, 139, 0.5);
    backdrop-filter: var(--blur-bg);
    width: 45px;
    height: 44px;
    font-size: 30px;
    font-weight: 300;
    line-height: 1;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: auto;
    bottom: 20px;
    transform: translateY(0);
    transition: background-color 0.3s ease;
    cursor: pointer;
}

.swiper-button-prev:hover,
.swiper-button-next:hover {
    background-color: var(--color-faint-black);
}

.swiper-button-prev {
    left: 0%;
    bottom: -10%;
    right: auto;
}

.swiper-button-next {
    right: auto;
    bottom: -10%;
    left: calc(0% + 60px);
}

/* Swiper Pagination (Dots) */
.swiper-pagination {
    position: absolute;
    bottom: 0px;
    left: 50%;
    transform: translateX(-50%);
    width: auto !important;
}

.swiper-pagination-bullet {
    background-color: var(--color-muted);
    opacity: 1;
    margin: 0 5px !important;
}

.swiper-pagination-bullet-active {
    background-color: var(--color-accent);
}

/* Responsive Adjustments */
@media (max-width: 1200px) {
    .testimonial-container {
        flex-direction: column;
        text-align: center;
        gap: 60px;
    }

    .testimonial-left-content,
    .testimonial-right-slider {
        max-width: 100%;
        flex: none;
    }

    .testimonial-left-content h2 {
        font-size: var(--font-size-h3);
        margin-bottom: 20px;
    }

    .testimonial-left-content .connect-btn {
        margin: 0 auto;
    }

    .swiper-slide {
        width: 80%;
    }

    .swiper-button-prev,
    .swiper-button-next {
        bottom: 55px;
        top: auto;
        left: 20px;
        right: 20px;
        transform: translateY(-50%);
    }

    .swiper-button-prev {
        left: 0;
    }

    .swiper-button-next {
        right: 60px;
    }

    .swiper-pagination {
        bottom: -20px;
    }
	
	.testimonial-card .user-avatar {
		margin: 0 auto;
	}
}

@media (max-width: 768px) {
    .swiper-slide {
        width: 90%;
    }
}

@media (max-width: 576px) {
    .testimonial-section {
        padding-block: 60px;
    }

    .testimonial-left-content h2 {
        font-size: var(--font-size-h4);
    }

    .swiper-button-prev, .swiper-button-next {
        width: 35px;
        height: 35px;
        bottom: -55px;
    }
	
	.swiper-button-next {
		left: 50px;
	}
}

/* -------------------------
    Blog Section Styles
    ------------------------- */
.blog-section {
    padding-block: 80px;
    background-color: var(--color-page-bg);
}

/* Section Title Styling */
.blog-section .section-title {
    font-family: var(--font-secondary);
    font-size: var(--font-size-h2);
    font-weight: 670;
    text-align: center;
    margin: 0 auto 40px;
    position: relative;
}

.blog-section .section-title span {
    color: var(--color-accent);
}

/* Blog Grid Container */
.blog-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 52px;
}

/* Individual Blog Card Styling */
.blog-card {
    background-color: var(--color-white);
    border-radius: var(--border-radius-mid);
    border: 1px solid var(--color-muted);
    padding: 14px;
    overflow: hidden;
    transition: all 0.3s ease;
}

/* Image Wrapper and Image */
.blog-img-wrapper {
    width: 100%;
    height: auto;
    border-radius: var(--border-radius-base);
    overflow: hidden;
}

.blog-img-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.blog-card:hover .blog-img-wrapper img {
    transform: scale(1.05);
}

.blog-content {
    padding: 20px 0 30px;
    display: flex;
    flex-direction: column;
    height: auto;
}

.blog-meta {
    display: flex;
    justify-content: space-between;
    font-size: var(--font-size-body);
    color: var(--color-dim);
    margin-bottom: 15px;
}

.blog-content h3 {
    font-size: 22px;
    color: var(--color-deep-black);
    font-weight: 600;
    margin-bottom: 10px;
    line-height: 1.3;
}

.blog-content .excerpt {
    font-size: var(--font-size-body);
    color: var(--color-light-text);
    line-height: 1.5;
    margin-bottom: 20px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    flex-grow: 1;
}

.read-more {
    display: inline-flex;
    width: 100%;
    max-width: 160px;
    justify-content: space-between;
    gap: 30px;
    align-items: center;
    text-decoration: none;
    font-weight: 500;
    color: var(--color-light-black);
    transition: 0.3s ease-in-out;
}

.read-more img {
    transition: 0.3s ease-in-out;
    width: 24x;
    height: 24px;
}

.blog-card:hover .read-more {
    max-width: 100%;
}

/* Responsive Adjustments */
@media (max-width: 992px) {
    .blog-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 25px;
    }
}

@media (max-width: 640px) {
    .blog-section {
        padding-block: 60px;
    }

    .blog-grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .blog-img-wrapper {
        height: 220px;
    }

    .blog-content h3 {
        font-size: var(--font-size-lead);
    }
}

/* -------------------------
    FAQ Section
    ------------------------- */
.faq-section {
    background: var(--color-black);
    color: var(--color-white);
    padding: 80px 0;
    position: relative;
}

.faq-container {
    display: flex;
    gap: 100px;
    align-items: flex-start;
}

.faq-left {
    flex: 1;
    max-width: 500px;
}

.faq-left h5 {
    font-weight: 400;
}

.faq-left h1 {
    font-family: var(--font-secondary);
    font-weight: 600;
    margin: 10px 0 25px;
    color: var(--color-white);
}

.faq-left .highlight {
    color: var(--color-accent);
}

.faq-left p {
    color: var(--color-light-text);
    margin-bottom: 40px;
}

.faq-btn {
    background: var(--color-transparent);
    border: 1px solid var(--color-muted);
    color: var(--color-white);
    padding: 14px 28px;
    border-radius: 40px;
    font-weight: 500;
    transition: 0.3s;
}

.faq-btn:hover {
    background: var(--color-accent);
    border-color: var(--color-accent);
}

.faq-btn .arrow {
    margin-left: 10px;
    font-size: 18px;
}

.faq-right {
    flex: 1.5;
    max-width: 800px;
    margin-inline: auto;
}

.accordion {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.accordion-item {
    background: var(--color-light-black);
    border: 1px solid var(--color-line);
    backdrop-filter: var(--blur-bg) brightness(0.15);
    border-radius: 8px;
    overflow: hidden;
    transition: all 0.3s ease;
}

.accordion-item.active {
    background: rgba(171, 171, 171, 0.65);
}

.accordion-header {
    font-size: 20px;
    font-weight: 500;
    font-family: var(--font-secondary);
    padding: 22px 28px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    color: var(--color-white);
}

.accordion-header span {
    font-weight: 400;
    margin-right: 12px;
}

.accordion-body {
    display: none;
    padding: 0 28px 22px;
    color: var(--color-white-fade);
    font-size: 15px;
    line-height: 1.7;
}

.accordion-item.active .accordion-body {
    display: block;
}

.icon {
    font-size: 30px;
    font-weight: 200;
    margin-left: auto;
    color: var(--color-white);
    transition: 0.3s;
}

.faq-left h2 {
    margin-bottom: 20px;
}

.faq-left .btn {
    max-width: 268px;
}

.faq-left .btn:hover {
    max-width: 390px;
}

/* -------------------------
    Footer
    ------------------------- */
.footer {
    font-family: var(--font-primary);
    background: var(--color-white);
    color: var(--color-black-1);
}

.footer-top {
    padding-top: 50px;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
}

.footer-header h2 {
    font-size: var(--font-size-h2);
    margin: 0;
    font-weight: 500;
}

.footer-header h2 span {
    color: var(--color-accent-primary);
}

.footer-line {
    border: none;
    border-top: 1px solid var(--color-line);
    margin: 50px 0 35px;
}

.footer-main {
    padding-top: 50px;
    display: grid;
    grid-template-columns: 2fr 1fr 4fr;
    gap: 40px;
    align-items: flex-start;
}

.footer-logo {
    width: 180px;
    margin-bottom: 8px;
}

.footer-main h4 {
    font-family: var(--font-secondary);
    font-size: 22px;
    line-height: 1;
    font-weight: 600;
    margin-bottom: 35px;
    opacity: 0.9;
    color: var(--color-black);
}

ul {
    list-style: none;
}

.footer-desc {
    font-size: var(--font-size-body);
    color: var(--color-black-1);
    font-weight: 300;
    line-height: 1.5;
    max-width: 360px;
}

.footer-social {
    display: flex;
    gap: 16px;
    margin-top: 20px;
}

.footer-social a img {
    width: 25px;
    transition: opacity 0.3s ease;
}

.footer-social a img:hover {
    opacity: 0.8;
}

.footer-links ul {
    list-style: none;
    padding: 0;
}

.footer-links a,
.footer-contact a {
    font-size: 16px;
    display: block;
    color: var(--color-black);
    opacity: 0.9;
    font-weight: 400;
    margin-bottom: 15px;
    transition: color 0.3s ease;
}

.footer-main .footer-col .block a {
    display: flex;
    align-items: center;
    gap: 10px;
}

.footer-main .footer-col .block a img {
    max-width: 22px;
}

.footer-links a:hover {
    color: var(--color-accent-primary);
}

.footer-contact {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.footer-contact p {
    font-size: 19px;
    color: var(--color-black-1);
    line-height: 1.5;
    margin: 0;
}

.footer-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    font-size: var(--font-size-body);
    padding-bottom: 30px;
}

.footer-policy a {
    color: var(--color-black-1);
    margin-right: 25px;
    transition: color 0.3s ease;
}

.footer-policy a:hover {
    color: var(--color-accent-primary);
}

.footer-copy {
    color: var(--color-black);
    font-size: var(--font-size-body);
}

/* About us page */

/* about section */
.about-us-container {
    max-width: 1575px;
    margin: 0 auto;
    display: flex;
    gap: 140px;
    place-items: center;
    justify-content: center;
}

.about-us-container .lead {
    font-size: var(--font-size-lead);
    color: var(--color-dark);
    margin-bottom: 20px;
    line-height: 1.6;
}

h4 {
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 20px;
}

.about-list li {
    display: flex;
    align-items: start;
    gap: 10px;
    font-size: 18px;
    margin-bottom: 10px;
}

.about-list li img {
    max-width: 13px;
    height: auto;
    margin-top: 8px;
}

.about-us-container h2 {
    font-size: var(--font-size-h2);
    font-weight: 500;
    line-height: 1.2;
    margin-bottom: 25px;
}

.about-us-desc {
    line-height: 1.8;
    margin-bottom: 30px;
    font-size: var(--font-size-lead);
    opacity: 0.75;
}

.about-left {
    max-width: 635px;
}

.about-right {
    max-width: 800px;
}

.about-right .btn {
    max-width: 352px;
}

.about-right .btn:hover {
    max-width: 390px;
}

@media (max-width: 1200px) {
    .about-us-container {
        flex-direction: column;
        gap: 60px;
        padding: 0 20px;
    }

    .about-left,
    .about-right {
        max-width: 100%;
    }
}

/* -------------------------
    GUEST Program Section Styles
    ------------------------- */
.guest-program-section {
    background-color: var(--color-page-bg);
    padding-block: 0;
}

.guest-container {
    display: flex;
    align-items: stretch;
    min-height: 600px;
}

/* Image Columns (Left and Right) */
.guest-img-left,
.guest-img-right {
    flex: 1;
    overflow: hidden;
}

.guest-img-left img,
.guest-img-right img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Central Content Column */
.guest-content-center {
    flex: 0 0 24%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 60px 40px;
    background-color: #f1f1f1;
    text-align: center;
}

.guest-content-center .program-title {
    font-family: var(--font-secondary);
    font-size: var(--font-size-h4);
    font-weight: 700;
    line-height: 1.2;
    color: var(--color-light-black);
    margin-bottom: 40px;
}

.guest-content-center .program-title .accent-text {
    display: block;
    color: var(--color-accent);
    font-weight: 500;
    margin-bottom: 15px;
}

.guest-content-center .program-description {
    font-size: var(--font-size-lead);
    line-height: 1.6;
    color: var(--color-dim);
    margin-bottom: 30px;
}

.guest-content-center .read-more-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    text-decoration: none;
    font-weight: 500;
    color: var(--color-light-black);
    transition: color 0.3s ease;
    font-size: var(--font-size-desc);
    margin-top: auto;
}

.guest-content-center .read-more-link:hover {
    color: var(--color-accent);
}

.guest-content-center .arrow-icon {
    font-size: 1.5em;
    margin-left: 10px;
}

.guest-img-left {
    max-width: 510px;
}

.guest-img-right {
    max-width: 950px;
}

/* Responsive Adjustments */
@media (max-width: 992px) {
    .guest-container {
        flex-direction: column;
        min-height: auto;
    }

    .guest-content-center {
        flex: auto;
        order: 1;
        text-align: center;
    }

    .guest-img-left {
        order: 2;
        height: 400px;
		max-width: 100%;
    }

    .guest-img-right {
        order: 3;
		max-width: 100%;
        height: 400px;
    }

    .guest-content-center .program-title .accent-text {
        display: inline;
    }
}

@media (max-width: 640px) {

    .guest-img-left,
    .guest-img-right {
        height: 300px;
    }

    .guest-content-center {
        padding: 40px 20px;
    }

    .guest-content-center .program-title {
        font-size: var(--font-size-h4);
    }
}

/* middle banner section */
section.middle-banner-section {
    padding: 0;
}

.middle-banner-block {
    height: clamp(676px, 60vw, 818px);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 30px;
    background-size: cover;
    background-color: rgb(0 0 0 / 40%);
    background-blend-mode: multiply;
}

.service-banner {
    padding-top: 0;
}

.service-banner .service-top-block {
    height: clamp(676px, 60vw, 818px);
    background-size: cover;
    border-radius: var(--border-radius-base);
    position: relative;
}

.page-desc {
    position: absolute;
    bottom: -1px;
    left: -1px;
    background: var(--color-white);
    padding: 30px 50px 30px 30px;
    border-radius: 0 8px 0 0;
}

.service-banner .service-top-block h1 {
    font-size: var(--font-size-h2);
    margin-bottom: 10px;
}

.page-desc p {
    color: #565656;
}

.middle-banner-block.contact-banner-block {
    height: clamp(676px, 50vw, 555px);
    gap: 70px;
}

.middle-banner-block.contact-banner-block h2 {
    color: var(--color-white);
    font-size: var(--font-size-h1);
    text-align: center;
    max-width: 1200px;
    margin: 0 auto;
}

h2.middle-banner-title {
    font-family: var(--font-secondary);
    font-weight: 700;
    color: var(--color-white);
    font-size: clamp(50px, 5.90vw, 112px);
}

/* Trainer Section */
/* -------------------------
    Trainer Section Styles
    ------------------------- */
.trainer-section {
    padding-block: 80px;
    background-color: var(--color-white);
    /* Assuming a clean white background */
}

/* Section Title Styling */
.trainer-section-title {
    font-family: var(--font-secondary);
    color: var(--color-light-black);
    font-size: var(--font-size-h2);
    font-weight: 500;
    line-height: 1.2;
    text-align: center;
    margin: 0 auto 60px;
}

.trainer-section-title .accent-text {
    color: var(--color-accent);
    font-weight: 700;
}

/* Trainer Grid */
.trainer-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    /* Four equal columns */
    gap: 30px;
}

/* Trainer Card Base Styling */
.trainer-card {
    position: relative;
    background-color: var(--color-white);
}

/* Image Wrapper */
.trainer-img-wrapper {
    width: 100%;
    height: auto;
    border-radius: var(--border-radius-base);
    overflow: hidden;
}

.trainer-img-wrapper img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

/* Trainer Info Container (The block that moves/changes) */
.trainer-info {
    position: absolute;
    bottom: -25px;
    right: 0;
    width: 205px;
    padding: 15px 15px;
    background-color: var(--color-white);
    color: var(--color-light-black);
    text-align: center;
    box-shadow: 0 3px 6px #33333329;
    transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
    height: 140px;
    display: flex;
    flex-direction: column;
    justify-content: start;
    align-items: start;
}

.trainer-info .name {
    font-size: var(--font-size-h4);
    text-align: left;
    font-weight: 600;
    margin: 0;
    line-height: 1.2;
}

.trainer-info .role {
    font-size: var(--font-size-body);
    font-weight: 400;
    color: var(--color-light-text);
    margin: 5px 0 0;
}

.social-links {
    height: 0;
    padding-top: 15px;
    width: 100%;
    display: flex;
    gap: 15px;
    border-top: 1px solid #ccc;
    margin-top: 10px;
    opacity: 0;
    transition: opacity 0.3s ease 0.1s;
}

.social-links img {
    width: 20px;
    height: 20px;
    filter: invert(0);
    transition: filter 0.3s ease;
}

/* --- HOVER EFFECT --- */
.trainer-card:hover .trainer-info {
    background-color: var(--color-accent);
    color: var(--color-white);
    height: 180px;

    .role {
        color: var(--color-white);
    }
}

.trainer-card:hover .trainer-info .description,
.trainer-card:hover .social-links {
    opacity: 1;
    height: auto;
}

.trainer-card:hover .social-links img {
    filter: invert(1);
}

/* Responsive Adjustments */
@media (max-width: 1200px) {
    .trainer-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 640px) {
    .trainer-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .trainer-info {
        height: 80px;
    }

    .trainer-card:hover .trainer-info {
        height: 140px;
    }
}

/* -------------------------
    Features Section Styles
    ------------------------- */
.features-section {
    padding-block: 60px;
    /* Adjust padding as needed */
    background-color: var(--color-white);
    /* Assuming a white background */
}

.features-grid {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 100px;
}

/* Individual Feature Item */
.feature-item {
    display: flex;
    gap: 30px;
    align-items: start;
    text-align: center;
}

.feature-icon {
    width: 100%;
    height: 100%;
    max-width: 80px;
    margin-bottom: 20px;
}

.feature-icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: top;
}

.feature-content {
    text-align: start;
}

.feature-content h3 {
    font-size: var(--font-size-lead);
    font-weight: 600;
    color: var(--color-light-black);
    margin-bottom: 10px;
}

.feature-content p {
    font-size: var(--font-size-body);
    color: var(--color-light-text);
    line-height: 1.5;
}

/* Separator Styling */
.feature-separator {
    width: 1px;
    height: 150px;
    background-color: var(--color-line);
    margin: 0 15px;
    rotate: 15deg;
}

/* Responsive Adjustments */
@media (max-width: 992px) {
    .features-grid {
        flex-direction: column;
        gap: 40px;
    }

    .feature-item {
        flex: none;
        width: 100%;
    }

    .feature-separator {
        display: none;
    }
}

@media (max-width: 640px) {
    .features-section {
        padding-block: 40px;
    }

    .feature-item {
        align-items: center;
    }
}

/* -------------------------
    Gallery Slider Section Styles
    ------------------------- */
.gallery-slider-section {
    padding-block: 40px;
    overflow: hidden;
}

.gallery-swiper {
    width: 100%;
    height: auto;
    cursor: grab;
}

.gallery-swiper:active {
    cursor: grabbing;
}

.gallery-swiper .swiper-wrapper {
    align-items: center;
}

.gallery-slide {
    width: auto;
    max-height: 600px;
    max-width: 453px;
    margin-right: 20px;
}

.gallery-slide img {
    width: auto;
    height: 100%;
    display: block;
    object-fit: cover;
    border-radius: var(--border-radius-base);
}

@media (max-width: 992px) {
    .gallery-slide {
        max-width: 350px;
    }
}

@media (max-width: 640px) {
    .gallery-slide {
        max-width: 250px;
    }
}

/* Centered Box Section */
section.simple-centered-section {
    background-image: linear-gradient(180deg, #f5f5f5 50%, transparent 50%);
}

section.simple-centered-section.reversed-bg {
    background-image: linear-gradient(0deg, #f5f5f5 70%, transparent 30%);
}

.big-image {
    width: 100%;
    height: auto;
    margin-bottom: 40px;
    border-radius: var(--border-radius-base);
}

.centered-box {
    max-width: 1016px;
    margin: 0 auto 40px;
    text-align: center;
    padding: 0;
}

.centered-box .lead {
    font-size: var(--font-size-lead);
    color: var(--color-dark);
    margin-bottom: 20px;
    line-height: 1.6;
}

.centered-box h2 {
    line-height: 1.2;
    margin-bottom: 20px;
}

.centered-box h3 {
    font-weight: 400;
    margin-block: 20px 30px;
}

.simple-centered-desc {
    font-size: var(--font-size-lead);
    color: var(--color-dark);
    line-height: 1.6;
    margin-bottom: 20px;
}

section.simple-centered-section.reversed-bg .btn {
    max-width: 425px;
	gap: 10px;
}

section.simple-centered-section.reversed-bg .btn:hover {
    max-width: 525px;
}

/* -------------------------
    Contact Section Styles
    ------------------------- */
.contact-section {
    padding-block: 100px;
    background-color: var(--color-white);
}

.contact-grid {
    display: flex;
    justify-content: space-between;
    gap: 80px;
    justify-content: center;
    margin: 0 auto;
}

.contact-left-col {
    max-width: 525px;
}

.contact-right-col {
    max-width: 870px;
}

/* Left Column Styling */
.contact-left-col h2 {
    font-size: var(--font-size-h3);
    font-weight: 500;
    line-height: 1.3;
    color: var(--color-light-black);
    margin-bottom: 50px;
}

.contact-details {
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.contact-detail-item {
    display: flex;
    align-items: center;
    gap: 20px;
    padding-block: 10px;
    border-bottom: 1px solid var(--color-soft-gray);
    max-width: 350px;
}

.contact-detail-item img {
    width: 24px;
    height: 24px;
    object-fit: contain;
    filter: brightness(0);
}

.contact-detail-item .info .label {
    font-size: var(--font-size-body);
    color: var(--color-dim);
    margin-bottom: 2px;
}

.contact-detail-item .info .value {
    font-size: var(--font-size-lead);
    font-weight: 500;
    color: var(--color-light-black);
}

/* Right Column Styling (Form) */
.contact-right-col .form-tag {
    font-size: var(--font-size-body);
    font-weight: 500;
    color: var(--color-light-text);
    margin-bottom: 5px;
}

.contact-right-col .form-title {
    font-size: var(--font-size-h2);
    font-weight: 700;
    color: var(--color-light-black);
    margin-bottom: 40px;
}

form.wpcf7-form {
    display: flex;
    flex-wrap: wrap;
    gap: 30px 20px;
}

form.wpcf7-form .form-row {
    flex: 1 1 calc(50% - 10px);
    /* Two columns per row */
    display: flex;
    flex-direction: column;
}
form.wpcf7-form .message-row {
    flex: 1 1 100%;
}

form.wpcf7-form label {
    font-size: var(--font-size-body);
    font-weight: 500;
    color: var(--color-light-black);
    margin-bottom: 8px;
}

.btn.btn-primary.submit-btn
 {
    color: #fff;
}

form.wpcf7-form input,
form.wpcf7-form textarea {
    font-family: var(--font-primary);
    padding: 15px 20px;
    border: 1px solid var(--color-soft-gray);
    border-radius: var(--border-radius-large);
    font-size: var(--font-size-body);
    color: var(--color-light-black);
    transition: border-color 0.3s ease;
    width: 100%;
    box-sizing: border-box;
}

form.wpcf7-form input:focus,
form.wpcf7-form textarea:focus {
    border-color: var(--color-accent);
    outline: none;
}

form.wpcf7-form textarea {
    height: 238px;
    resize: none;
}

/* --- Responsive Contact Grid --- */
@media (max-width: 1400px) {
    .contact-grid {
        gap: 60px;
    }
}

@media (max-width: 1024px) {
    .contact-grid {
        flex-direction: column;
        gap: 60px;
    }

    .contact-left-col,
    .contact-right-col {
        max-width: 100%;
        margin: 0 auto;
    }

    .contact-left-col h2 {
        font-size: var(--font-size-h4);
    }
}

@media (max-width: 600px) {
    form.wpcf7-form .form-row {
        flex: 1 1 100%;
    }
	form.wpcf7-form {
		gap: 20px 20px;
	}
	.wpcf7 form .wpcf7-response-output {
		margin-top: 0;
	}
	.contact-section {
		padding-block: 50px;
	}
}

.bread-crumbs {
    color: var(--color-white);
}

/* -------------------------
    Thank You Modal Styles
    ------------------------- */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6);
    /* Semi-transparent dark overlay */
    display: none;
    /* Hidden by default */
    justify-content: center;
    align-items: center;
    z-index: var(--z-overlay);
    /* Use a high z-index */
    opacity: 0;
    transition: opacity 0.3s ease;
}

.modal-overlay.open {
    display: flex;
    opacity: 1;
}

.modal-content {
    background-color: var(--color-white);
    border-radius: var(--border-radius-large);
    /* Large rounded corners */
    padding: 60px 40px;
    max-width: 500px;
    width: 90%;
    text-align: center;
    position: relative;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}

.close-modal {
    position: absolute;
    top: 20px;
    right: 30px;
    font-size: 30px;
    background: none;
    border: none;
    cursor: pointer;
    color: var(--color-light-text);
}

.thank-you-script {
    /* Custom script font style simulation */
    font-family: 'Dancing Script', cursive;
    /* Use a script font if available */
    font-size: 80px;
    font-weight: 700;
    color: var(--color-light-black);
    margin-bottom: 20px;
    line-height: 1;
}

.thank-you-message p {
    font-size: var(--font-size-lead);
    color: var(--color-light-text);
    margin-bottom: 30px;
}

.back-home-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 12px 30px;
    background-color: var(--color-accent);
    color: var(--color-white);
    text-decoration: none;
    border-radius: 50px;
    font-weight: 500;
    transition: background-color 0.3s ease;
}

.back-home-btn img {
    width: 16px;
    height: 16px;
    filter: invert(1);
    transform: rotate(90deg);
}

/* -------------------------
    Location Map Section Styles
    ------------------------- */
.location-map-section {
    padding-block: 80px;
    background-color: var(--color-white);
}

.map-container {
    position: relative;
    text-align: center;
}

.world-map-image {
    width: 100%;
    height: auto;
    display: block;
    filter: grayscale(100%) brightness(1.1);
}

/* --- Monaco Marker Styling --- */

/* Adjust these percentage values based on your exact image to pinpoint Monaco */
.monaco-marker {
    position: absolute;
    top: 45%;
    /* Approximately the vertical position of Monaco on the map image */
    left: 48%;
    /* Approximately the horizontal position of Monaco on the map image */
    transform: translate(-50%, -50%);
    /* Adjust to center the marker base */
    z-index: 10;
}

/* Red Pin Dot */
.marker-pin {
    width: 12px;
    height: 12px;
    background-color: var(--color-accent);
    /* Red/Orange accent color */
    border-radius: 50%;
    border: 2px solid var(--color-white);
    box-shadow: 0 0 0 3px rgba(255, 69, 0, 0.4);
    /* Subtle glow/ring effect */
    margin: 0 auto;
    /* Center the dot */
    cursor: pointer;
}

/* Info Box */
.infobox {
    opacity: 0;
    position: absolute;
    bottom: 100%;
    /* Position above the pin */
    left: 50%;
    transform: translate(5px, 20px);
    /* Adjust position next to the pin, slightly right and down */
    background-color: var(--color-white);
    border-radius: var(--border-radius-base);
    padding: 10px 15px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    white-space: nowrap;
    /* Prevents text from wrapping */
    text-align: left;
}

.monaco-marker:hover .infobox,
.infobox:hover {
    opacity: 1;
    transition: opacity 0.3s ease;
}

.infobox .location-name {
    display: block;
    font-size: var(--font-size-lead);
    font-weight: 600;
    color: var(--color-light-black);
    margin-bottom: 3px;
}

.infobox .get-direction-link {
    font-size: var(--font-size-body);
    font-weight: 500;
    color: var(--color-accent);
    /* Accent color for the link */
    text-decoration: none;
    transition: color 0.3s ease;
}

.infobox .get-direction-link:hover {
    color: #d14723;
    /* Darker accent on hover */
}

/* Internal service page */
.about-section .content-col h2 {
    margin-bottom: 30px;
}

.about-section .content-col .desc {
    font-size: var(--font-size-desc);
    margin-bottom: 25px;
}

.about-section .content-col hr {
    margin-top: 40px;
    margin-bottom: 40px;
}

/* Responsive */
@media screen and (max-width: 1280px) {
	.main-nav {
		gap: 15px;
	}
}

@media screen and (max-width: 1024px) {
	.btn {
		height: 56px;
	}
	.links-block {
		display: none;
	}
    .menu-toggle {
		display: flex;
	}
	.brand img.logo {
		max-width: 150px;
	}
	.hero-inner {
		padding-inline: 20px;
	}
	.hero-content {
		padding-bottom: 150px;
	}
	.banner-section {
		aspect-ratio: unset;
	}
	.faq-container {
		display: flex;
		gap: 40px;
		align-items: flex-start;
		flex-direction: column;
	}
	section {
		padding: 50px 0;
	}
	 .row-2-cols {
        grid-template-columns: 1fr;
    }
	.footer-main {
		grid-template-columns: 1fr 1fr;
	}
	.footer-contact {
		grid-column: span 2;
	}
	.feature-tiles {
		grid-template-columns: repeat(2, 1fr);
	}
	.img-contain img {
		max-width: 360px;
	}
	.faq-left, .faq-right {
		width: 100%;
		max-width: 100%;
	}
	.info-contain {
		margin-block: 0;
	}
	.cta-block {
		align-items: center;
	}
	.training-content h2, .training-content p:nth-of-type(1), .training-content p:nth-of-type(2) {
		margin-bottom: 0;
	}
	.training-block {
		margin-bottom: 20px;
	}
	.training-section hr {
		margin-bottom: 15px;
	}
	.centered {
		margin-bottom: 0;
	}
	.image-wrapper {
		position: absolute;
		top: 0;
		right: 0;
		width: 100%;
	}
	.location-map-section {
		padding: 0 0 50px;
	}
}

@media screen and (max-width: 767px) {
	.footer-main, .footer-contact {
		grid-template-columns: 1fr;
	}
	.content-block {
		padding: 0;
	}
	.feature-tiles {
		grid-template-columns: 1fr;
	}
	.img-contain img {
		max-width: 360px;
	}
	.logo-track {
		animation-duration: 10s;
	}
	.btn-group {
		width: 100%;
		display: flex;
		flex-direction: column;
		gap: 30px;
	}
	.footer-main h4 {
		margin-bottom: 20px;
	}
	.footer-contact {
        grid-column: span 1;
    }
}