/********** Template CSS **********/
:root {
    --primary: #E85C46;
    --secondary: #66736D;
    --light: #F5F1E9;
    --dark: #17211F;
}

.py-6 {
    padding-top: 6rem;
    padding-bottom: 6rem;
}
.back-to-top {
    position: fixed;
    display: none;
    right: 30px;
    bottom: 30px;
    z-index: 99;
}


/*** Spinner ***/

.hero-section { background: #F5F1E9; }
.hero-copy { min-height: 560px; display: flex; align-items: center; }
.hero-content { max-width: 590px; margin: 0 auto; padding: 70px 30px; }
.hero-content h1 { font-family: Manrope, sans-serif; font-weight: 800; letter-spacing: -0.06em; }
.hero-content h1 span, .display-6 span { color: var(--primary); }
.hero-image { min-height: 560px; background: url(../img/carousel-1.jpg) center/cover; }
.hero-image img { width: 100%; height: 100%; min-height: 560px; object-fit: cover; mix-blend-mode: multiply; opacity: .88; }
.hero-trust { display: flex; gap: 12px; align-items: center; color: var(--secondary); font-size: 12px; }
.hero-trust strong { color: var(--dark); font: 800 25px Manrope, sans-serif; }
.hero-badge { position: absolute; right: 9%; bottom: 45px; display: flex; align-items: center; gap: 8px; padding: 17px 22px; color: var(--dark); background: #F3BD00; font-size: 10px; font-weight: 700; line-height: 1.15; text-transform: uppercase; }
.hero-badge strong { font: 800 36px Manrope, sans-serif; }
.process-card { min-height: 245px; padding: 25px 20px; border-top: 1px solid #D4CEC2; border-right: 1px solid #D4CEC2; }
.process-card:last-child { border-right: 0; }.process-card small { color: var(--primary); font-weight: 700; }.process-card > i { display: block; margin: 28px 0 17px; color: var(--primary); font-size: 26px; }.process-card p { color: var(--secondary); font-size: 13px; }.process-card a { color: var(--primary); font-size: 12px; font-weight: 700; }
.feature-image, .instructor-image { position: relative; }.feature-image img { width: 100%; height: 430px; object-fit: cover; }.feature-image span { position: absolute; right: 15px; bottom: 15px; padding: 16px; color: white; background: var(--dark); font-size: 10px; text-transform: uppercase; }.feature-image strong { color: #F3BD00; font: 800 30px Manrope, sans-serif; }
.feature-point { min-height: 74px; padding: 13px 0; border-top: 1px solid #D4CEC2; }.feature-point i { display: inline-grid; place-items: center; width: 20px; height: 20px; margin-right: 8px; border-radius: 50%; color: white; background: var(--primary); font-size: 10px; }.feature-point strong, .feature-point small { display: block; margin-left: 29px; }.feature-point strong { margin-top: -20px; font-size: 13px; }.feature-point small { color: var(--secondary); font-size: 11px; }
.instructor-image img { width: 100%; height: 430px; object-fit: cover; }.instructor-image span { position: absolute; right: -18px; bottom: 25px; padding: 12px 16px; color: white; background: var(--primary); font-size: 11px; font-weight: 700; }.instructor-signature { font: italic 700 25px Georgia, serif; }.instructor-signature small { display: block; color: var(--secondary); font: 10px Work Sans, sans-serif; letter-spacing: .12em; text-transform: uppercase; }
.booking-band { background: var(--dark); }.booking-band h2 { font-family: Manrope, sans-serif; font-weight: 800; }.booking-band .text-primary { color: #F3BD00 !important; }
.accordion-item { border-color: #D4CEC2; background: transparent; }.accordion-button { color: var(--dark); background: transparent; box-shadow: none !important; font-weight: 700; }.accordion-button:not(.collapsed) { color: var(--primary); background: transparent; }.accordion-body { color: var(--secondary); }
#spinner {
    opacity: 0;
    visibility: hidden;
    transition: opacity .5s ease-out, visibility 0s linear .5s;
    z-index: 99999;
}

#spinner.show {
    transition: opacity .5s ease-out, visibility 0s linear 0s;
    visibility: visible;
    opacity: 1;
}


/*** Button ***/
.btn {
    font-weight: 500;
    transition: .5s;
}

.btn.btn-primary,
.btn.btn-outline-primary:hover {
    color: #FFFFFF;
}

.btn-square {
    width: 38px;
    height: 38px;
}

.btn-sm-square {
    width: 32px;
    height: 32px;
}

.btn-lg-square {
    width: 48px;
    height: 48px;
}

.btn-square,
.btn-sm-square,
.btn-lg-square {
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: normal;
}


/*** Navbar ***/
.navbar.sticky-top {
    top: -100px;
    transition: .5s;
}

.navbar .navbar-brand,
.navbar a.btn {
    height: 80px
}

@media (max-width: 991.98px) {
    .topbar-row {
        flex-direction: column;
        padding: 9px 14px;
        font-weight: 600;
    }

    .topbar-row > div {
        display: flex;
        flex-wrap: nowrap;
        justify-content: center;
        width: 100%;
        gap: 7px 18px;
        padding: 3px 0 !important;
        text-align: center !important;
    }

    .topbar-row > div:first-child {
        flex-direction: column;
        align-items: center;
    }

    .topbar-row > div > div {
        width: auto;
        height: auto !important;
        min-height: 24px;
        margin: 0 !important;
        white-space: nowrap;
    }

    .topbar-row .me-4,
    .topbar-row .mx-n2 {
        margin-right: 0 !important;
        margin-left: 0 !important;
    }

    .topbar-row .btn {
        height: 32px;
        min-height: 32px;
        margin: 0;
        padding: 4px 10px;
    }

    .topbar-call,
    .topbar-whatsapp {
        display: inline-flex;
        align-items: center;
        gap: 7px;
        border-radius: 6px;
        font-weight: 700;
        line-height: 1;
    }

    .topbar-call {
        border: 1px solid rgba(255, 255, 255, .65);
        background: transparent;
        color: #fff;
    }

    .topbar-call:hover,
    .topbar-call:focus {
        border-color: #fff;
        background: #fff;
        color: #102c28;
    }

    .topbar-whatsapp {
        background: #25d366;
        color: #102c28;
    }

    .topbar-whatsapp:hover,
    .topbar-whatsapp:focus {
        background: #20bd5a;
        color: #102c28;
    }
}

@media (max-width: 575.98px) {
    .topbar-row {
        font-size: 13px;
    }

    .topbar-row > div {
        gap: 5px 12px;
    }
}

.navbar .navbar-nav .nav-link {
    margin-right: 30px;
    padding: 25px 0;
    color: var(--dark);
    font-weight: 500;
    text-transform: uppercase;
    outline: none;
}

.navbar .navbar-nav .nav-link:hover,
.navbar .navbar-nav .nav-link.active {
    color: var(--primary);
}

.navbar .dropdown-toggle::after {
    border: none;
    content: "\f107";
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    vertical-align: middle;
    margin-left: 8px;
}

@media (max-width: 991.98px) {
    .navbar .navbar-nav .nav-link  {
        margin-right: 0;
        padding: 10px 0;
    }

    .navbar .navbar-nav {
        border-top: 1px solid #EEEEEE;
    }
}

@media (min-width: 992px) {
    .navbar .nav-item .dropdown-menu {
        display: block;
        border: none;
        margin-top: 0;
        top: 150%;
        opacity: 0;
        visibility: hidden;
        transition: .5s;
    }

    .navbar .nav-item:hover .dropdown-menu {
        top: 100%;
        visibility: visible;
        transition: .5s;
        opacity: 1;
    }
}


/*** Header ***/
.carousel-caption {
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    background: rgba(0, 0, 0, .75);
    z-index: 1;
}

.carousel-control-prev,
.carousel-control-next {
    width: 15%;
}

.carousel-control-prev-icon,
.carousel-control-next-icon {
    width: 3rem;
    height: 3rem;
    background-color: var(--primary);
    border: 10px solid var(--primary);
}

@media (max-width: 768px) {
    #header-carousel .carousel-item {
        position: relative;
        min-height: 450px;
    }
    
    #header-carousel .carousel-item img {
        position: absolute;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
}

.page-header {
    background: linear-gradient(rgba(0, 0, 0, .75), rgba(0, 0, 0, .75)), url(../img/carousel-1.jpg) center center no-repeat;
    background-size: cover;
}

.breadcrumb-item+.breadcrumb-item::before {
    color: #999999;
}



/*** Courses ***/
.courses {
    min-height: 100vh;
    background: linear-gradient(rgba(255, 255, 255, .9), rgba(255, 255, 255, .9)), url(../img/carousel-1.jpg) center center no-repeat;
    background-attachment: fixed;
    background-size: cover;
}

.courses-item .courses-overlay {
    position: absolute;
    width: 100%;
    height: 0;
    top: 0;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, .5);
    overflow: hidden;
    opacity: 0;
    transition: .5s;
}

.courses-item:hover .courses-overlay {
    height: 100%;
    opacity: 1;
}


/*** Team ***/
.team-items {
    margin: -.75rem;
}

.team-item {
    padding: .75rem;
}

.team-item::after {
    position: absolute;
    content: "";
    width: 100%;
    height: 0;
    top: 0;
    left: 0;
    background: #FFFFFF;
    transition: .5s;
    z-index: -1;
}

.team-item:hover::after {
    height: 100%;
    background: var(--primary);
}

.team-item .team-social {
    position: absolute;
    width: 100%;
    height: 0;
    top: 0;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, .75);
    overflow: hidden;
    opacity: 0;
    transition: .5s;
}

.team-item:hover .team-social {
    height: 100%;
    opacity: 1;
}


/*** Testimonial ***/
.testimonial-carousel .owl-dots {
    height: 40px;
    margin-top: 25px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.testimonial-carousel .owl-dot {
    position: relative;
    display: inline-block;
    margin: 0 5px;
    width: 20px;
    height: 20px;
    background: transparent;
    border: 2px solid var(--primary);
    transition: .5s;
}

.testimonial-carousel .owl-dot.active {
    width: 40px;
    height: 40px;
    background: var(--primary);
}

.testimonial-carousel .owl-item img {
    width: 150px;
    height: 150px;
}

.review-card {
    padding: 32px 20px;
}

.review-stars {
    color: #e7ad00;
    font-size: 25px;
    letter-spacing: 4px;
}

.review-section {
    background: var(--light);
}

.review-form-card {
    padding: clamp(24px, 5vw, 52px);
    background: #fff;
    border: 1px solid #d6ddd6;
    border-radius: 14px;
    box-shadow: 0 12px 30px rgba(23, 43, 40, .06);
}

.review-label {
    display: block;
    margin-bottom: 10px;
    color: var(--dark);
    font-family: Manrope, sans-serif;
    font-size: 18px;
    font-weight: 700;
}

.star-rating {
    display: inline-flex;
    flex-direction: row-reverse;
    justify-content: flex-end;
}

.star-rating input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.star-rating label {
    color: #aeb8b3;
    cursor: pointer;
    font-size: clamp(38px, 8vw, 52px);
    line-height: 1;
    transition: color .15s ease;
}

.star-rating label:hover,
.star-rating label:hover ~ label,
.star-rating input:checked ~ label {
    color: #e7ad00;
}

.star-rating input:focus-visible + label {
    outline: 3px solid #167d8d;
    outline-offset: 3px;
}

.review-form .form-control {
    min-height: 56px;
    border: 1px solid #b9c2be;
    padding: 14px 16px;
}

.review-form textarea.form-control {
    min-height: 150px;
}

.review-honeypot {
    position: absolute;
    left: -10000px;
}


/*** Footer ***/
.footer .btn.btn-link {
    display: block;
    margin-bottom: 5px;
    padding: 0;
    text-align: left;
    color: var(--light);
    font-weight: normal;
    text-transform: capitalize;
    transition: .3s;
}

.footer .btn.btn-link::before {
    position: relative;
    content: "\f105";
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    color: var(--light);
    margin-right: 10px;
}

.footer .btn.btn-link:hover {
    color: var(--primary);
    letter-spacing: 1px;
    box-shadow: none;
}

.copyright {
    background: #092139;
}

.copyright a {
    color: var(--primary);
}

.copyright a:hover {
    color: var(--light);
}
/* Shared visual system and responsive interaction states. */
:root { --primary: #b94230; --dark: #172b28; --light: #f7f5ef; }
body { color: #53635e; font-family: 'Work Sans', sans-serif; line-height: 1.7; }
h1,h2,h3,h4,h5,h6 { color: var(--dark); font-family: Manrope, sans-serif; letter-spacing: -.035em; }
a { color: var(--primary); } a:hover { color: #8e3022; }
.text-primary { color: var(--primary) !important; }.bg-primary { background-color: var(--primary) !important; }.bg-dark,.copyright { background-color: var(--dark) !important; }.bg-light { background-color: var(--light) !important; }
.btn { border-radius: 8px; font-weight: 600; padding: 13px 22px; transition: background-color .2s, transform .2s; }
.btn-primary { background: var(--primary); border-color: var(--primary); }.btn-primary:hover,.btn-primary:focus { background: #963425; border-color: #963425; }.btn-outline-primary { color: var(--primary); border-color: var(--primary); }.btn-outline-primary:hover { background: var(--primary); border-color: var(--primary); }
.btn-square,.btn-sm-square,.btn-lg-square { padding: 0; }
:focus-visible { outline: 3px solid #167d8d !important; outline-offset: 4px; }
.skip-link { position: fixed; left: 16px; top: -100px; padding: 12px 20px; background: white; z-index: 10000; }.skip-link:focus { top: 12px; }
.navbar.sticky-top { top: 0; }.navbar .navbar-nav .nav-link { text-transform: none; font-size: 14px; margin-right: 24px; }.navbar .navbar-brand h2 { font-size: 26px; }.navbar a.btn { height: auto; margin: 12px 24px 12px 0; padding: 15px 22px !important; }
.navbar .nav-item .dropdown-menu.show,.navbar .nav-item:focus-within .dropdown-menu { top: 100%; opacity: 1; visibility: visible; }
.hero-section { background: #f2f0e7; padding: 35px 0 48px; }.hero-copy { min-height: 520px; }.hero-content { padding: 35px 50px 35px 0; margin: 0; }.hero-content h1 { font-size: clamp(2.7rem,4.6vw,4.5rem); line-height: 1.08; letter-spacing: -.065em; margin-bottom: 25px; }.eyebrow { font-size: 11px; font-weight: 700; letter-spacing: .15em; color: var(--primary); margin-bottom: 22px; }.hero-description { max-width: 460px; font-size: 18px; }.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }.hero-actions span { margin-left: 14px; }.hero-note { font-size: 13px; margin: 18px 0 0; }.hero-visual { position: relative; height: 500px; border-radius: 110px 16px 16px 16px; overflow: hidden; }.hero-visual img { width: 100%; height: 100%; object-fit: cover; object-position: 60% center; }.hero-photo-label { position: absolute; bottom: 22px; left: 22px; right: 22px; padding: 16px; border-radius: 8px; background: #fff; color: var(--dark); font-size: 13px; font-weight: 600; }.status-dot { display: inline-block; width: 8px; height: 8px; background: #398064; border-radius: 50%; margin-right: 8px; }
.section-heading { display: flex; align-items: end; justify-content: space-between; gap: 24px; margin-bottom: 36px; }.section-heading h2 { max-width: 580px; }.section-heading a { flex-shrink: 0; }.step-card { height: 100%; border-top: 1px solid #d6ddd6; padding: 24px 20px 12px 0; }.step-card > span { color: var(--primary); font-size: 11px; letter-spacing: .1em; font-weight: 700; }.step-card h3 { font-size: 22px; margin-top: 25px; }.step-card p { font-size: 15px; }
.process-card { height: 100%; background: #fff; border: 1px solid rgba(185,66,48,.3); border-radius: 12px; padding: 30px 26px; box-shadow: 0 10px 24px rgba(23,43,40,.06); transition: box-shadow .2s ease, transform .2s ease; }.process-card:hover { box-shadow: 0 14px 30px rgba(23,43,40,.1); transform: translateY(-2px); }.process-icon { width: 56px; height: 56px; border-radius: 50%; background: var(--primary); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 22px; margin-bottom: 22px; }.process-card h3 { font-size: 20px; margin-bottom: 10px; }.process-card p { font-size: 14px; margin-bottom: 0; }
.courses { background: var(--light); min-height: auto; }.courses-item { border: 1px solid #e2e6df; border-radius: 14px; }.courses-item img { width: 100%; }.courses-item .courses-overlay { position: static; height: auto; opacity: 1; background: transparent; padding: 18px; }.courses-item .courses-overlay a { width: 100%; }
.courses .bg-primary.text-center { background: var(--dark) !important; border-radius: 18px; }.courses .bg-primary h1 { color: white; }.courses .bg-primary .btn-dark { background: var(--primary); border-color: var(--primary); }
.form-control { border-radius: 8px; }.form-control:focus { border-color: #167d8d !important; box-shadow: 0 0 0 3px #167d8d33; }.form-note { font-size: 13px; }.courses .form-note { color: #e0e6e2; }
.faq-list details { border-bottom: 1px solid #d6ddd6; padding: 22px 0; }.faq-list summary { cursor: pointer; color: var(--dark); font-weight: 600; }.faq-list details p { margin: 16px 0 0; }
.footer { font-size: 14px; }.footer a { overflow-wrap: anywhere; }.footer p a { color: #fff; }.footer .btn-link { min-height: 34px; }.page-header { padding-top: 4rem !important; padding-bottom: 4rem !important; }.mobile-contact { display: none; }
@media(max-width: 991.98px) { .hero-copy { min-height: auto; }.hero-content { max-width: 680px; padding: 30px 0; }.hero-visual { height: 360px; border-top-left-radius: 65px; }.navbar .navbar-brand { height: 68px; }.py-6 { padding-top: 4rem; padding-bottom: 4rem; }.navbar-collapse { max-height: calc(100dvh - 68px); overflow-y: auto; } }
@media(max-width: 575.98px) { body { padding-bottom: 76px; }.hero-section { padding: 10px 8px 28px; }.hero-content h1 { font-size: 2.8rem; }.hero-description { font-size: 16px; }.hero-actions .btn { flex: 1 1 auto; }.hero-visual { height: 285px; }.hero-photo-label { left: 12px; right: 12px; bottom: 12px; font-size: 11px; }.section-heading { display: block; }.section-heading a { display: inline-block; margin-top: 14px; }.display-6 { font-size: 1.95rem; }.p-5 { padding: 1.5rem !important; }.mobile-contact { position: fixed; bottom: 0; left: 0; right: 0; z-index: 1030; display: flex; gap: 10px; padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); background: white; border-top: 1px solid #d6ddd6; }.mobile-contact a { flex: 1; text-align: center; border: 1px solid #d6ddd6; border-radius: 8px; padding: 11px; font-weight: 600; }.mobile-contact a:last-child { background: var(--primary); border-color: var(--primary); color: white; }.back-to-top { bottom: 90px; right: 16px; } }
@media(prefers-reduced-motion: reduce) { *,*::before,*::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; } }

.topbar-row > div:first-child { display: flex; flex-wrap: wrap; align-items: center; }
.topbar-row > div:first-child > .topbar-languages { flex: 0 0 100%; }
@media (min-width: 992px) {
    .topbar-row > div:first-child > div:not(.topbar-languages) {
        height: auto !important;
        min-height: 52px;
    }
}
.topbar-languages {
    display: block;
    width: 100%;
    margin-top: 3px;
    padding-bottom: 6px;
    color: #D9EAF1;
    font-size: 12px;
    line-height: 1.45;
}

.topbar-languages strong { margin-left: 8px; color: #fff; font-weight: 600; }
.navbar-contact-links { gap: 8px; margin-right: 24px; }
.navbar .navbar-contact-links > a.btn { margin: 0; }
.instagram-link {
    display: inline-flex;
    flex: 0 0 46px;
    align-items: center;
    justify-content: center;
    width: 46px;
    min-width: 46px;
    height: 46px;
    padding: 0 !important;
    font-size: 18px;
}
.topbar-instagram {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    margin-left: 8px !important;
    padding: 0 !important;
    border: 1px solid rgba(255, 255, 255, .65);
    border-radius: 6px;
    color: #fff !important;
}
.topbar-instagram:hover,
.topbar-instagram:focus { background: #fff; color: var(--dark) !important; }
.mobile-contact a.instagram-link { flex: 0 0 46px; background: #fff; color: var(--primary); }

@media (max-width: 991.98px) {
    .topbar-row > div:first-child > .topbar-languages { flex: 0 0 auto; }
    .topbar-row > div > .topbar-languages { width: 100%; white-space: normal; }
    .topbar-languages strong { display: block; margin-left: 0; }
}

/* Baby-blue palette with deeper accents for readable controls. */
:root {
    --primary: #267EA8;
    --secondary: #4C8798;
    --light: #F1FAFE;
    --dark: #18394B;
    --accent: #F2C879;
}

body { color: #4D6470; }
a:hover { color: #185D7E; }
.text-primary { color: var(--primary) !important; }
.bg-primary { background-color: var(--primary) !important; }
.btn-primary { color: #fff; background: var(--primary); border-color: var(--primary); }
.btn-primary:hover,
.btn-primary:focus { color: #fff; background: #185D7E; border-color: #185D7E; }
.btn-outline-primary { color: var(--primary); border-color: var(--primary); }
.btn-outline-primary:hover { color: #fff; background: var(--primary); border-color: var(--primary); }
:focus-visible { outline-color: #4C8798 !important; }
.form-control:focus { border-color: #4C8798 !important; box-shadow: 0 0 0 3px rgba(76, 135, 152, .2); }
.hero-section { background: #E7F5FC; }
.hero-badge { background: var(--accent); }
.feature-image strong,
.booking-band .text-primary { color: var(--accent) !important; }
.process-card { border-color: rgba(38, 126, 168, .25); }
.step-card,
.faq-list details,
.mobile-contact { border-color: #D6EAF3; }
.courses-item { border-color: #D6EAF3; }
.courses .form-note { color: #D9EAF1; }
.text-warning,
.review-stars,
.star-rating label:hover,
.star-rating label:hover ~ label,
.star-rating input:checked ~ label { color: var(--accent) !important; }