/* Table of Contents:
1. Import Statements
2. Keyframes and Property Animations    
3. Custom Properties
4. Global Styles
5. Typography Styles
6. Heading and Subheadings
7. Form and Inputs
8. Maps Elements
9. Header and Navbar
10. Section and Container
11. Background and Setting Color
12. Swiper Setting
13. Button and Links
14. Overlay
15. Utility Classes
16. Social and Contact Setting
17. Breadcrumb
18. Spesific Media Queries
19. Card Setting
20. Progress and Rating 
21. Accordion
*/

/* ---------------------------- */
/* Import Statements            */
/* ---------------------------- */
@import url('../css/vendor/');
@import url('../css/vendor/bootstrap.min.css');
@import url('../css/vendor/fontawesome.css');
@import url('../css/vendor/brands.css');
@import url('../css/vendor/regular.css');
@import url('../css/vendor/solid.css');
@import url('../css/vendor/swiper-bundle.min.css');
@import url('../css/vendor/rtmicons.css');
@import url('../css/vendor/poppins/stylesheet.css');
@import url('../css/vendor/space-grotesk/stylesheet.css');

/* ---------------------------- */
/* Keyframes and Property Animations            */
/* ---------------------------- */
@property --progress {
    syntax: '<integer>';
    inherits: true;
    initial-value: 0;
}

@keyframes load {
    to {
        --progress: var(--value)
    }
}

@keyframes background_animation {
    from {
        background-size: 100%;
    }

    to {
        background-size: 110%;
    }
}

@keyframes ripple {
    from {
        opacity: 1;
        transform: scale3d(1, 1, 1);
        transform-origin: center;
        border-width: 0px;
    }

    to {
        opacity: 0;
        transform: scale3d(1.7, 1.7, 1.8);
        transform-origin: center;
        border-width: 13px;
    }
}

/* ---------------------------- */
/*  Custom Properties            */
/* ---------------------------- */
:root {
    /* Paleta monocromática azul-violeta (Catacean Blue/Han Purple/Violets are
       Blue/Bright Lavender) + blanco puro. Bright Lavender es el color
       protagonista (botones, CTAs, links) — verificado 7.87:1 sobre el fondo
       Catacean, seguro incluso como texto chico. Han Purple se reserva para
       fondos de bloques grandes (8.07:1 con texto blanco encima). */
    --text-color: #FFFFFF;
    --text-color-2: #C092F1;
    --background-color: #010245;
    --background-team: #F1E9FC;
    --accent-color: #C092F1;
    --accent-color-2: #7F58F0;
    --accent-color-3: #C092F1;
    --accent-color-4: #3C1DEE;
    --color-1: #0A0864;
    --color-2: #000122;
    --color-3: #F1E9FC;
    --color-4: #7F58F0;
    --font-1: "Poppins", sans-serif;
    --font-2: "Space Grotesk", sans-serif;
}


/* ---------------------------- */
/* Global Styles                */
/* ---------------------------- */
body {
    font-family: var(--font-1);
    color: var(--text-color);
    background-color: var(--background-color);
}


/* ---------------------------- */
/* Typography                   */
/* ---------------------------- */
h1 {
    font-size: 96px;
}

h2 {
    font-size: 90px;
    font-weight: bold;
}

h3 {
    font-size: 56px;
}

h4 {
    font-size: 40px;
    font-weight: 500;
}

h5 {
    font-size: 28px;
    font-weight: 500;
}

h6 {
    font-size: 20px;
    font-weight: 400;
    font-family: var(--font-2);
}

button,
a {
    font-size: 18px;
    font-family: var(--font-1);
}

p {
    font-size: 16px;
    font-family: var(--font-1);
    color: var(--text-color);
}

ul {
    list-style: none;
}

.list-circle {
    list-style: disc var(--accent-color);
}

li {
    font-size: 16px;
    color: var(--accent-color-3);
}

img {
    object-fit: cover;
}

.text-accent {
    background: linear-gradient(90deg, #2A2496 0%, #140F5E 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.text-accent.second {
    background: linear-gradient(90deg, #2A2496 0%, #140F5E 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}


.text-accent::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 50px;
    /* geser sedikit ke bawah */
    width: 100%;
    height: 5px;
    background: linear-gradient(90deg, #2A2496 0%, #140F5E 100%);
}

.price-text {
    font-size: 56px;
    font-weight: bolder;
}

.price-text2 {
    font-size: 40px;
    font-weight: bolder;
}

.testimonial-text {
    font-size: 20px;
    font-style: italic;
}

.small-text {
    font-size: 14px;
}

.textual-showcase {
    font-size: 82px;
}

.cta-text {
    font-size: 80px;
    font-weight: bold;
}

.brush1 {
    position: relative;
    display: inline-block;
    padding: 5px 0px;
}

.brush1::before {
    content: "";
    background: url('../image/brush1.png') no-repeat center;
    background-size: contain;
    position: absolute;
    width: 110%;
    height: 100%;
    top: 0;
    left: -5%;
    z-index: -1;
    opacity: 0.8;
}

.brush2 {
    position: relative;
    display: inline-block;
    padding: 5px 0px;
}

.brush2::before {
    content: "";
    background: url('../image/brush2.png') no-repeat center;
    background-size: contain;
    position: absolute;
    width: 110%;
    height: 100%;
    top: 0;
    left: -5%;
    z-index: -1;
    opacity: 0.8;
}

.brush3 {
    position: relative;
    display: inline-block;
    padding: 5px 0px;
}

.brush3::before {
    content: "";
    background: url('../image/brush3.png') no-repeat center;
    background-size: contain;
    position: absolute;
    width: 110%;
    height: 100%;
    top: 0;
    left: -5%;
    z-index: -1;
    opacity: 0.8;
}

.brush4 {
    position: relative;
    display: inline-block;
    padding: 5px 0px;
}

.brush4::before {
    content: "";
    background: url('../image/brush4.png') no-repeat center;
    background-size: contain;
    position: absolute;
    width: 110%;
    height: 100%;
    top: 0;
    left: -5%;
    z-index: -1;
    opacity: 0.8;
}

.brush5 {
    position: relative;
    display: inline-block;
    padding: 5px 0px;
}

.brush5::before {
    content: "";
    background: url('../image/brush5.png') no-repeat center;
    background-size: contain;
    position: absolute;
    width: 110%;
    height: 100%;
    top: 0;
    left: -5%;
    z-index: -1;
    opacity: 0.8;
}

/* ---------------------------- */
/* Headings and Subheadings      */
/* ---------------------------- */
.banner-heading {
    font-size: 5.5rem;
}

.sub-heading {
    font-size: 140px;
    font-style: italic;
}

.text-color {
    color: var(--text-color);
}

.text-color-2 {
    color: var(--text-color-2);
}

.p-banner {
    color: var(--primary);
}

/* ---------------------------- */
/* Forms and Inputs             */
/* ---------------------------- */
.form-control {
    padding: 15px 24px;
    border: none;
}

form {
    background-color: var(--color-2);
    padding: 32px;
    border-radius: 10px;
}

form.subs {
    background-color: transparent;
}

.form-label {
    font-size: 24px;
}

.form textarea {
    background-color: transparent;
    border-bottom: 1px solid var(--text-color-2);
    border-radius: 0;
    color: var(--accent-color);
    outline: none;
    font-family: var(--font-1);
}

.form input,
.form select {
    background-color: transparent;
    color: var(--accent-color);
    outline: none;
    border: none;
    border-bottom: 1px solid var(--text-color-2);
    padding-bottom: 10px;
    border-radius: 0;
}

.form select {
    color: var(--text-color-2);
}

.form select:invalid {
    color: var(--text-color-2);
}

.form select:valid {
    color: var(--accent-color);
}

.form input:focus,
.form textarea:focus,
.form select:focus {
    box-shadow: none;
    border-bottom: 1px solid var(--accent-color);
    background-color: transparent;
    color: var(--accent-color);
}

.form select:focus {
    background-color: var(--background-color);
}

.form input:autofill,
.form input:autofill:focus {
    color: var(--accent-color);
    transition: background-color 5000s ease-in-out;
    -webkit-text-fill-color: var(--accent-color);
    font-family: var(--font-1);
}

.form input::placeholder,
.form textarea::placeholder {
    color: var(--text-color-2);
    font-family: var(--font-1);
}

.form option {
    background-color: var(--primary);
}

.form-check-input:checked[type=checkbox] {
    --bs-form-check-bg-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="blue" class="bi bi-check-xl" viewBox="0 0 16 16"><path d="M12.736 3.97a.733.733 0 0 1 1.047 0c.286.289.29.756.01 1.05L7.88 12.01a.733.733 0 0 1-1.065.02L3.217 8.384a.757.757 0 0 1 0-1.06.733.733 0 0 1 1.047 0l3.052 3.093 5.4-6.425a.247.247 0 0 1 .02-.022Z"/></svg>');
}

.form input.form-check-input {
    background-color: transparent;
    border: 1px solid gray;
}

.form input.form-check-input:checked {
    border: 1px solid blue;
    color: blue;
}

.form .submit_form {
    padding-inline: 2rem;
    padding-block: 1rem;
    text-decoration: none;
    transition: all 0.5s;
    background-color: var(--accent-color);
    border-radius: 10px;
}


.submit_form:hover {
    background-color: transparent;
    color: var(--accent-color);
}


.submit_appointment {
    padding-inline: 3rem;
    padding-block: 0.7rem;
    text-decoration: none;
}


/* ---------------------------- */
/* Map Elements       */
/* ---------------------------- */
.maps {
    width: 100%;
    height: 600px;
    transition: filter 0.5s;
    display: block;
}


/* ---------------------------- */
/* Header and Navbar       */
/* ---------------------------- */

main section:first-of-type {
    margin-top: 0;
}


#header {
    transition: all 0.5s ease;
    --edge-pad: clamp(1.25rem, 3vw, 3.5rem);
}

#header>.r-container {
    padding-left: var(--edge-pad);
    padding-right: var(--edge-pad);
}

.logo-container {
    max-width: 200px;
    width: 127px; /* 115px + 10% */
}

.logo-partner {
    filter: brightness(200%) contrast(0%) saturate(0%) blur(0px) hue-rotate(0deg);
    transition-duration: 0.5s;
}

.logo-partner:hover {
    filter: none;
}

.offcanvas {
    color: var(--background-color);
}

.offcanvas-header {
    justify-content: end;
}

.offcanvas-fullwidth {
    width: 41vw !important;
    max-width: 100vw;
    overflow-y: auto;
    background-color: var(--color-1);
}

.offcanvas-body {
    overflow: visible;
    padding: 3rem;
}

.nav-item.dropdown:hover .dropdown-menu {
    display: block;
    margin-top: 0;
}

.dropdown-menu {
    transition: all 0.3s ease;
}

.navbar {
    margin: 24px 0;
}

.navbar-nav .nav-link:focus {
    color: var(--accent-color);
    text-align: center;
}

.navbar-nav .nav-link.show {
    color: var(--accent-color);
}

.nav-link {
    border-bottom: 2px solid transparent;
    font-size: 18px;
    font-weight: 400;
    font-family: var(--font-1);
    color: var(--text-color);
    text-align: center;
}

.nav-link:hover {
    color: var(--accent-color);
    text-align: center;
}

.nav-link.active {
    color: var(--accent-color) !important;
    text-align: center;
    /* border-bottom: 2px solid var(--accent-color); */
}

.navbar-toggler {
    border: none;
    color: var(--secondary);
}

.navbar-toggler:focus {
    box-shadow: none;
    background-color: transparent;
    color: var(--accent-color-2);
}

.navbar-toggler-icon {
    display: inline-block;
    width: 1.5em;
    height: 1.5em;
    vertical-align: middle;
    background-image: var(--bs-navbar-toggler-icon-bg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100%;
}

.nav-tabs {
    border-bottom: none;
}

.nav-tabs .nav-link {
    background-color: transparent;
    color: var(--accent-color);
    border: none;
    position: relative;
}

.nav-tabs .nav-link:hover {
    border: none;
    color: white;
}

.nav-tabs .nav-link.active {
    background-color: transparent;
    border: none;
}

.nav-tabs .nav-link.active::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background-color: var(--accent-color);
}

.dropdown-menu {
    border-radius: 0;
    border: none;
    padding: 0;
    width: 100%;
    -webkit-box-shadow: 0px 0px 24px 0px rgba(0, 0, 0, 0.3);
    -moz-box-shadow: 0px 0px 24px 0px rgba(0, 0, 0, 0.3);
    box-shadow: 0px 0px 24px 0px rgba(0, 0, 0, 0.3);
}

.dropdown-item {
    padding-block: 0.75rem;
    color: var(--text-color);
    font-family: var(--font-1);
    font-size: 0.95rem;
    font-weight: 400;
    padding-inline: 0.75rem;
    background-color: var(--background-color);
}

.dropdown-item.active {
    color: var(--background-color);
    background-color: var(--accent-color);
}

.dropdown-item:hover {
    background-color: var(--accent-color);
    color: var(--background-color);
}

.dropdown-item:focus {
    color: var(--accent-color);
}

/* ---------------------------- */
/* Section and Container       */
/* ---------------------------- */
.section {
    padding: 6em 2em 6em 2em;
    overflow: hidden;
    background-size: cover;
    background-position: center;
}

/* Páginas sin hero (ej. Contacto) parten directo en este bloque, pegado
   al header fijo — el padding-top normal del .section no alcanza para
   despejarlo (el header mide ~110px en desktop). */
.contact-hero-gap {
    padding-top: 180px !important;
}

.r-container {
    max-width: 1440px;
    margin-right: auto;
    margin-left: auto;
}


/* ---------------------------- */
/* Background and Setting Color      */
/* ---------------------------- */
.bg-accent-primary {
    background-color: var(--primary);
}

.bg-accent-secondary {
    background-color: var(--secondary);
}

.bg-accent-color {
    background-color: var(--accent-color);
}

.bg-accent-color-2 {
    background-color: var(--accent-color-2);
}

.bg-accent-color-3 {
    background-color: var(--accent-color-3);
}

.bg-accent-color-4 {
    background-color: var(--accent-color-4);
}

.bg-accent {
    background-color: var(--primary);
}

.bg-color {
    background-color: #292929;
}

.bg-color-2 {
    background-color: #141414;
}

.bg-color-3 {
    background-color: #D2D2D2;
}

.bg-color-4 {
    background-color: #595FEF;
}

.bg-team {
    background-color: var(--background-team);
}

.bg-text-color {
    background-color: var(--text-color);
}

.bg-text-color-2 {
    background-color: var(--text-color-2);
}

.bg-accent-color-hover:hover {
    background-color: var(--accent-color);
    color: white;
}

.bg-dark-transparent {
    background-color: #232323b7;
}

.accent-color-primary {
    color: var(--primary);
}

.accent-color {
    color: var(--accent-color);
}

.accent-color-2 {
    color: var(--accent-color-2);
}

.accent-color-3 {
    color: var(--accent-color-3);
}

.accent-color-4 {
    color: var(--accent-color-4);
}

.background-color {
    color: var(--background-color);
}

.accent {
    color: var(--background-color);
}

.border-accent {
    border-color: var(--accent-color) !important;
}

.border-accent-2 {
    border-color: var(--accent-color-8) !important;
}

.border-accent-2:hover {
    border-color: var(--accent-color-10) !important;
}

.border-accent-3 {
    border: 1px solid rgba(207, 171, 130, 0.2);
}

.border-text-color {
    border-color: var(--text-color) !important;
}

.border-testimonial {
    border-right: 5px solid var(--accent-color-2);
}

.border-bottom-hover:hover {
    border-bottom: 2px solid var(--accent-color);
}

.border-accent-color {
    border: 1px solid var(--accent-color);
}

.outline {
    color: transparent;
    -webkit-text-stroke-width: 1px;
    -webkit-text-stroke-color: var(--accent-color);
}

.text-gray {
    color: grey !important;
}

.bg-image {
    position: relative;
}

/* Fondo del hero: 3 fotos reales en slideshow (se cruzan cada 10s) +
   overlay azul de marca para legibilidad + degrade final a color
   sólido justo antes de la franja de logos, para que las tiras
   queden sobre azul plano como el diseño original. El retrato de
   Rodolfo y el ícono decorativo van en su propia capa, encima de
   todo esto, para que no se laven con el overlay/degrade. */
.bg-image>.hero-bg-slideshow,
.bg-image>.hero-bg-overlay,
.bg-image>.hero-bg-fade,
.bg-image>.hero-photo-layer {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.bg-image>.hero-bg-slideshow {
    z-index: 0;
    overflow: hidden;
}

.hero-bg-slide {
    position: absolute;
    inset: 0;
    background-repeat: no-repeat;
    background-position: center 20%;
    background-size: cover;
    opacity: 0;
    animation: heroSlideFade 30s infinite;
}

.hero-bg-slide:nth-child(1) {
    animation-delay: 0s;
}

.hero-bg-slide:nth-child(2) {
    animation-delay: 10s;
}

.hero-bg-slide:nth-child(3) {
    animation-delay: 20s;
}

@keyframes heroSlideFade {
    0% {
        opacity: 0;
    }

    3% {
        opacity: 1;
    }

    33.3% {
        opacity: 1;
    }

    36.3% {
        opacity: 0;
    }

    100% {
        opacity: 0;
    }
}

.bg-image>.hero-bg-overlay {
    z-index: 1;
    background: rgba(1, 2, 69, 0.45);
}

.bg-image>.hero-bg-fade {
    z-index: 2;
    background: linear-gradient(to bottom, rgba(1, 2, 69, 0) 0%, rgba(1, 2, 69, 0) 72%, var(--background-color) 100%);
}

.bg-image>.hero-photo-layer {
    z-index: 3;
    background: url(../image/hero-retrato.jpg) no-repeat 71% 27%, url(../image/icon-1.png) no-repeat 13.5% 21%;
    background-size: 384px auto, auto;
}

.bg-image>.r-container,
.bg-image>.accent-primary {
    position: relative;
    z-index: 4;
}

.bg-image-about {
    background: url(../image/dummy-img-1920x1280.jpg) no-repeat 27% 40%, url(../image/icon-1.png) no-repeat 106% 15%, url(../image/Image-Background.png) no-repeat center 0%;
    background-size:
        384px auto,
        207px auto,
        1920px 1280px;
}

.bg-image-services {
    background: url(../image/dummy-img-1920x1280.jpg) no-repeat 27% 40%, url(../image/icon-1.png) no-repeat 106% 15%, url(../image/Image-Background.png) no-repeat center 0%;
    background-size:
        384px auto,
        207px auto,
        1920px 1280px;
}

.bg-image-services-details {
    background: url(../image/dummy-img-1920x1280.jpg) no-repeat 27% 40%, url(../image/icon-1.png) no-repeat 106% 15%, url(../image/Image-Background.png) no-repeat center 0%;
    background-size:
        384px auto,
        207px auto,
        1920px 1280px;
}

.bg-image-portfolio {
    background: url(../image/portfolio/clientes-hero.jpg) no-repeat 27% 40%, url(../image/icon-1.png) no-repeat 106% 15%, url(../image/Image-Background.png) no-repeat center 0%;
    background-size:
        384px auto,
        207px auto,
        1920px 1280px;
}

.bg-image-portfolio-details {
    background: url(../image/dummy-img-1920x1280.jpg) no-repeat 27% 40%, url(../image/icon-1.png) no-repeat 106% 15%, url(../image/Image-Background.png) no-repeat center 0%;
    background-size:
        384px auto,
        207px auto,
        1920px 1280px;
}

.bg-image-team {
    background: url(../image/team/equipo-trabajo.jpg) no-repeat 27% 40%, url(../image/icon-1.png) no-repeat 106% 15%, url(../image/Image-Background.png) no-repeat center 0%;
    background-size:
        384px auto,
        207px auto,
        1920px 1280px;
}

.bg-image-pricing {
    background: url(../image/dummy-img-1920x1280.jpg) no-repeat 27% 40%, url(../image/icon-1.png) no-repeat 106% 15%, url(../image/Image-Background.png) no-repeat center 0%;
    background-size:
        384px auto,
        207px auto,
        1920px 1280px;
}

.bg-image-faqs {
    background: url(../image/dummy-img-1920x1280.jpg) no-repeat 27% 40%, url(../image/icon-1.png) no-repeat 106% 15%, url(../image/Image-Background.png) no-repeat center 0%;
    background-size:
        384px auto,
        207px auto,
        1920px 1280px;
}

.bg-image-blog {
    background: url(../image/dummy-img-1920x1280.jpg) no-repeat 27% 40%, url(../image/icon-1.png) no-repeat 106% 15%, url(../image/Image-Background.png) no-repeat center 0%;
    background-size:
        384px auto,
        207px auto,
        1920px 1280px;
}

.bg-image-single-post {
    background: url(../image/dummy-img-1920x1280.jpg) no-repeat 27% 40%, url(../image/icon-1.png) no-repeat 106% 15%, url(../image/Image-Background.png) no-repeat center 0%;
    background-size:
        384px auto,
        207px auto,
        1920px 1280px;
}

.bg-image-contact {
    background: url(../image/dummy-img-1920x1280.jpg) no-repeat 27% 40%, url(../image/icon-1.png) no-repeat 106% 15%, url(../image/Image-Background.png) no-repeat center 0%;
    background-size:
        384px auto,
        207px auto,
        1920px 1280px;
}

.bg-image-404 {
    background: url(../image/icon-14.png) no-repeat 15% 12%, url(../image/icon-9.png) no-repeat 87% 17%, url(../image/icon-1.png) no-repeat 2% 100%, url(../image/icon-15.png) no-repeat 80% 97%, url(../image/Image-Background.png) no-repeat center 0%;
    background-size:
        94px auto,
        66px auto,
        207px auto,
        127px auto,
        1920px 1280px;
}


/* ---------------------------- */
/* Swiper Setting              */
/* ---------------------------- */
.text-marquee {
    overflow: hidden;
    white-space: nowrap;
    position: relative;
}

.text-marquee-content {
    display: inline-block;
    animation: text-marquee 70s linear infinite;
    font-size: 100px;
    padding-right: 50%;
}

@keyframes text-marquee {
    from {
        transform: translateX(0%);
    }

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

.marquee-container {
    overflow: hidden;
    /* white-space: nowrap; */
    width: 100%;
    display: flex;
    flex-direction: row;
    --gap: 1rem;
    --speed: 20;
    /* gap: var(--gap); */
}

.marquee {
    animation: marquee calc(400s / var(--speed)) infinite linear;
}

.reverse .marquee {
    animation-direction: reverse;
}

.marquee-content {
    display: inline-flex;
}

.marquee-item img {
    width: 150px;
}

.marquee-item:hover img {
    filter: var(--accent-color);
}

.marquee-item {
    text-wrap: nowrap;
    padding-inline: var(--gap);
    margin-right: 5rem;
    width: max-content;
    color: var(--primary);
}

/* Marquee de píldoras de categorías (solo mobile, ver media query 599px) */
.pills-marquee {
    display: none;
}

.pills-marquee .marquee-content {
    gap: .5rem;
    align-items: center;
}

.pills-marquee .marquee-content span {
    text-wrap: nowrap;
}

.marquee-item-2 {
    text-wrap: nowrap;
    padding-inline: var(--gap);
    margin-right: 1rem;
    width: max-content;
}

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

    to {
        transform: translateX(calc(-100% - 1rem));
    }
}

.service-scroll {
    height: 610px;
    overflow-y: auto;
    overflow-x: hidden;
    padding-right: 3rem;
}

/* width */
.service-scroll::-webkit-scrollbar {
    width: 6px;
}

/* Track */
.service-scroll::-webkit-scrollbar-track {
    background: #e0e0e0;
    border-radius: 10px;
}

/* Handle */
.service-scroll::-webkit-scrollbar-thumb {
    background: var(--accent-color);
    border-radius: 10px;
}

/* Handle on hover */
.service-scroll::-webkit-scrollbar-thumb:hover {
    background: var(--accent-color-2);
}

.swiper-slide {
    padding: 0.5rem;
}

.swiperTestimonials {
    overflow: visible;
}

.swiper-pagination {
    margin-block: 1rem;
    position: relative;
}

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

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

.swiperImage {
    padding-bottom: 8rem;
}

.swiper-button-next::after,
.swiper-button-prev::after {
    font-size: 20px;
}

.swiper-button-next,
.swiper-button-prev {
    top: 35rem;
    width: 40px;
    height: 40px;
    border: 1px solid var(--accent-color);
    background-color: var(--accent-color);
    color: var(--primary);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}

.swiper-button-next:hover,
.swiper-button-prev:hover {
    border: 1px solid var(--text-color);
    background-color: var(--secondary);
    color: var(--primary);
}

.swiper-button-next {
    right: 95%;
    transform: translateY(20px);
}

.swiper-button-prev {
    left: 0%;
    transform: translateY(20px);
}

.custom-slide {
    display: flex;
    justify-content: center;
    align-items: center;
}

.custom-scrollbar {
    width: 6px;
    position: absolute;
    right: 10px;
    top: 0px;
    margin-top: 150px;
    bottom: 0;
    background: #e0e0e0;
    border-radius: 10px;
    z-index: 9999;
}

.swiper-scrollbar.swiper-scrollbar-vertical {
    height: 300px;
}

.custom-scrollbar .swiper-scrollbar-drag {
    background: #ff9800;
    border-radius: 10px;
}

/* ---------------------------- */
/* Buttons & Links              */
/* ---------------------------- */
button {
    padding-inline: 1rem;
    padding-block: 0.5rem;
    text-decoration: none;
    transition: all 0.5s;
}

button:hover {
    color: var(--background-color);
}

a {
    text-decoration: none;
}

.w-max-content {
    width: max-content;
}

.category {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: .5rem;
}

.category:hover {
    color: var(--accent-color);
}

.category:hover a {
    color: var(--accent-color);
}

.latest {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 1rem;
    color: var(--text-color);
    max-width: 80%;
    transition: all 0.5s
}

.latest:hover {
    color: var(--accent-color);
    background-color: var(--accent-color-4);
    padding: 10px;
    border-radius: 5px;
}

.latest:hover .small-text {
    color: var(--text-color);
}

.read-more {
    font-family: var(--font-1);
    font-size: 18px;
    font-weight: 500;
    transition: all 0.5s;
    color: var(--text-color);
}

.read-more:hover {
    color: var(--accent-color);
}

.read-more img {
    width: 24px;
    height: 24px;
}

.read-more.blog {
    color: var(--text-color);
    transition: all 0.5s;
}


.tags {
    padding: 3px 6px;
    font-family: var(--font-2);
    color: var(--text-color);
    background-color: var(--accent-color-3);
}

.tags.active {
    color: var(--primary);
    background-color: var(--accent-color);
}

.btn {
    font-size: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-1);
    font-weight: 500;
    position: relative;
    display: inline-block;
    pointer-events: auto;
    cursor: pointer;
    padding: 8px 24px;
    border-radius: 10px;
}

.btn::before,
.btn::after {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.btn-close {
    color: var(--text-color);
}

.btn-close:hover {
    color: var(--text-color);
}

.btn-accent {
    position: relative;
    padding: 8px 24px;
    border: 2px solid var(--accent-color);
    border-radius: 5px;
    cursor: pointer;
    color: var(--background-color);
    background: var(--accent-color);
    position: relative;
    overflow: hidden;
    transition: all 1000ms;
    z-index: 9;
    /* width: 100%; */
}

.btn-accent.cta {
    border-radius: 10px;
}

.btn-accent i {
    font-weight: bold;
}

.btn-accent:hover {
    color: var(--text-color);
    /* transform: scale(1.1); */
    box-shadow: none;
    border: 2px solid var(--text-color);
}

.btn-accent:hover.cta {
    border-radius: 10px;
}

.btn-accent::before {
    content: "";
    position: absolute;
    left: -50px;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: var(--accent-color);
    transform: skewX(45deg);
    z-index: -1;
    transition: width 1000ms;
}

.btn-accent:hover::before {
    width: 0;
}

.btn-accent-2 {
    color: var(--text-color-2);
    background-color: transparent;
    transition: all 0.5s;
    overflow: hidden;
    padding: 5px 16px;
    border-radius: 100px;
    border: 1px solid var(--text-color-2);
    outline: none;
}

.btn-accent-2.active {
    color: var(--text-color);
    border-color: var(--text-color);
}

.btn-accent-2:hover {
    color: var(--text-color);
    border-color: var(--text-color);
    transition: all 0.5s;
}

.btn-accent-2:hover i {
    color: var(--primary);
}

.btn-accent-2 span {
    display: block;
    position: relative;
    z-index: 10;
}

.btn-accent-2:hover i {
    animation: MoveScaleUpInitial 0.3s forwards, MoveScaleUpEnd 0.3s forwards 0.3s;
}

.btn-accent-2 i {
    display: block;
    position: relative;
    z-index: 10;
}

.btn-accent-2:hover span {
    animation: MoveScaleUpInitial 0.3s forwards, MoveScaleUpEnd 0.3s forwards 0.3s;
}

.btn-accent-3 {
    padding: 8px 24px;
    border: none;
    border-radius: 5px;
    font-size: 18px;
    cursor: pointer;
    color: var(--accent-color);
    background: transparent;
    position: relative;
    overflow: hidden;
    outline: 2px solid var(--accent-color);
    transition: all 1000ms;
    width: 100%;
}

.btn-accent-3.cta {
    width: max-content;
    color: var(--text-color);
    border: 2px solid var(--text-color);
    outline: none;
    border-radius: 10px;
}

.btn-accent-3:hover {
    color: var(--accent-color-4);
    transform: scale(1.1);
    outline: none;
    box-shadow: 4px 5px 17px -4px var(--accent-color-4);
}

.btn-accent-3:hover.cta {
    transform: scale(1);
    box-shadow: none;
    border: 2px solid var(--accent-color);
    color: var(--background-color);
}

.btn-accent-3::before {
    content: "";
    position: absolute;
    left: -50px;
    top: 0;
    width: 0;
    height: 100%;
    background-color: var(--accent-color);
    transform: skewX(45deg);
    z-index: -1;
    transition: width 1000ms;
}

.btn-accent-3:hover::before {
    width: 250%;
}

.btn-accent-4 {
    width: 100%;
    padding: 12px 24px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    background-color: var(--color-3);
    color: var(--background-color);
    transition: all 0.5s;
}

.btn-accent-4 i {
    font-weight: bold;
}

.btn-accent-4:hover {
    background-color: var(--accent-color-3);
    color: var(--text-color);
}


.btn-cta-1 {
    background: var(--accent-color);
    color: var(--background-color);
    transition: all 0.5s;
    border: 1px solid transparent;
    overflow: hidden;
}

.btn-cta-1:hover {
    color: var(--text-color);
    border: 1px solid var(--text-color);
    background-color: transparent;
}

.btn-cta-2 {
    background: transparent;
    color: var(--text-color);
    transition: all 0.5s;
    border: 1px solid var(--text-color);
    overflow: hidden;
}

.btn-cta-2:hover {
    color: var(--background-color);
    border: 1px solid transparent;
    background-color: var(--accent-color);
}

@keyframes MoveScaleUpInitial {
    to {
        transform: translate3d(0, -105%, 0) scale3d(1, 2, 1);
        opacity: 0;
    }
}

@keyframes MoveScaleUpEnd {
    from {
        transform: translate3d(0, 100%, 0) scale3d(1, 2, 1);
        opacity: 0;
    }

    to {
        transform: translate3d(0, 0, 0);
        opacity: 1;
    }
}


.btn-play {
    cursor: pointer;
    border: none;
    background: transparent;
    color: #fff;
    width: 188px;
    height: 188px;
    border-radius: 50%;
    overflow: hidden;
    position: relative;
    display: grid;
    place-content: center;
    transition:
        background 300ms,
        transform 200ms;
    font-weight: normal;
    margin-left: 10rem;
}

.btn-play.about {
    margin-left: 0;
}

.btn-play.choose-us {
    margin-top: -15rem;
    margin-left: 21rem;
}

.btn-play.about-us {
    width: 200px;
    height: 200px;
    background: var(--accent-color-4);
    color: var(--text-color);
}

.btn-play.footer {
    margin-left: -7rem;
    width: 274px;
    height: 274px;
    aspect-ratio: 1/1;
    border: 1px solid var(--text-color);
    flex-shrink: 0;
}

.btn-play__text {
    position: absolute;
    inset: 0;
    animation: text-rotation 8s linear infinite;
    margin: 0.25rem;

}

.btn-play__text>span {
    position: absolute;
    transform: rotate(calc(10.4deg * var(--index)));
    inset: -10px;
    color: var(--text-color);
    font-size: 23px;
}

.btn-play__text.about>span {
    inset: -5px;
}

.btn-play.footer .btn-play__text>span {
    position: absolute;
    transform: rotate(calc(10.4deg * var(--index)));
    inset: 7px;
    color: var(--text-color);
    font-size: 23px;
}

.btn-play__circle {
    position: relative;
    width: 80px;
    height: 80px;
    overflow: hidden;
    color: var(--background-color);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 48px;
    font-weight: bold;
}

.btn-play.footer .btn-play__circle {
    position: relative;
    width: 96px;
    height: 96px;
    overflow: hidden;
    color: var(--background-color);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 48px;
    font-weight: bold;
}

.btn-play__circle i {
    font-weight: bold;
}

.btn-play__icon--copy {
    position: absolute;
    transform: translate(-150%, 150%);
}

.btn-play:hover {
    transform: scale(1.05);
}

.btn-play:hover .btn-play__icon {
    color: var(--background-color);
}

.btn-play.about:hover .btn-play__icon {
    color: var(--text-color);
}

.btn-play.choose-us:hover .btn-play__icon {
    color: var(--text-color);
}

.btn-play.about-us:hover .btn-play__icon {
    color: var(--text-color);
}

.btn-play:hover .btn-play__icon:first-child {
    transition: transform 0.3s ease-in-out;
    transform: translate(150%, -150%);
}

.btn-play:hover .btn-play__icon--copy {
    transition: transform 0.3s ease-in-out 0.1s;
    transform: translate(0);
}


@keyframes text-rotation {
    to {
        rotate: 360deg;
    }
}

.btn-toggler-accent {
    background-color: var(--text-color);
    border: 1px solid var(--text-color);
    color: var(--background-color);
    aspect-ratio: 1/1;
    width: 45x;
    height: 45px;
    border-radius: 10px;
    padding: 10px;
    transition: all 0.5s ease;
}


.btn-toggler-accent:hover {
    background-color: var(--accent-color);
    color: var(--background-color);
    border: 1px solid var(--accent-color);
}

.btn-white-outline {
    background-color: transparent;
    border-color: var(--text-color);
    color: var(--text-color);
    border-width: 1px;
}

.btn-white-outline-hover:hover {
    background-color: transparent;
    border-color: var(--text-color);
    color: var(--text-color);
}

.btn-white-outline:hover {
    background-color: white;
    color: var(--primary);
}

.partner {
    display: flex;
    justify-content: center;
    padding: 16px 24px;
    border: 1px solid transparent;
}

.partner:hover {
    border: 1px solid var(--accent-color);
}

.partner svg {
    fill: var(--accent-color);
}

.partner:hover svg {
    fill: var(--accent-color);
}

.image-footer .social-item {
    color: var(--primary);
    background-color: var(--accent-color);
}

.image-footer:hover .image-footer-blur {
    background: rgba(24, 21, 24, 0.3);
    backdrop-filter: blur(2px);
    position: absolute;
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
    bottom: 0;
    z-index: 1;
    transition: all 0.5s ease;
}

.image-footer {
    position: relative;
    width: max-content;
}

.image-footer .image-zoom {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 2;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    opacity: 0;
    transform-origin: bottom;
    transition: all 0.5s ease;
}

.image-footer:hover .image-zoom {
    opacity: 1;
}

.float-bg-image {
    margin-top: -7rem;
}

.float-number {
    margin-left: 7rem;
}

.gap-about {
    gap: 7rem;
}

.float-img-team {
    margin-top: -12rem;
}

.float-button {
    margin-top: -5rem;
}

.float-icon {
    margin-right: -4rem;
}

.float-img {
    position: absolute;
    bottom: -4rem;
    right: 8rem;
}

.float-img-2 {
    position: absolute;
    bottom: 0;
    right: 10rem;
}

.float-img-3 {
    position: absolute;
    bottom: 7rem;
    left: -5rem;
}

.float-team {
    position: absolute;
    bottom: 0;
    left: 6rem;
}

.float-img.testi {
    left: 0;
}

.float-container {
    min-height: 80vh;
}

.card-track:hover .track-blur {
    opacity: 1;
    transform: translate(1rem, -1rem);
}

.card-track .track-blur {
    opacity: 0;

}

.track-blur {
    transition: all 0.5s ease;
    position: absolute;
    bottom: 0;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
}

.card-track {
    transition: all 0.5s ease;
}

.card-read-more {
    display: flex;
    flex-direction: row;
    gap: 12px;
    align-items: center;
    position: absolute;
    right: 0;
    bottom: 0;
    padding: 12px 0 12px 24px;
    border-top-left-radius: 30px;
    background-color: var(--primary);
}


.card .link {
    color: var(--accent-color);
    transition: color 0.5s;
}

.card .link:hover {
    color: var(--primary);
}

.link.accent-color {
    color: var(--accent-color);
    transition: color 0.5s;
}

.link.accent-color:hover {
    color: var(--dark-bg);
}

.link {
    color: var(--text-color);
    transition: color 0.5s;
    cursor: pointer;
}

.link:hover {
    color: var(--accent-color);
}

.link-white {
    color: white;
}

.link-white:hover {
    color: var(--accent-color);
}

/* .img-about {
    aspect-ratio: 5/6;
    box-shadow: 20px 20px 0px -8px var(--accent-color);
    border-radius: 10px;
} */

.img-about img {
    border-radius: 12px;
    aspect-ratio: 5/6;
    box-shadow: 20px 20px 0px -8px var(--accent-color);
}

/* ---------------------------- */
/* Overlay                      */
/* ---------------------------- */
.blog-overlay {
    position: absolute;
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 69, 81, 0.6) 100%);
    transition: background 0.3s, border-radius 0.3s, opacity 0.3s;
}

.image-overlay {
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
    position: absolute;
    background: rgba(10, 10, 10, 0.3);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 1rem;
    transform: scaleY(0);
    transform-origin: bottom;
    transition: all 0.5s ease-in-out;
    border-radius: 10px;
}

.card .image-overlay.active {
    transform: scaleY(1);
}

.card:hover .image-overlay {
    transform: scaleY(1);
}

.overlay {
    color: var(--accent-color-2);
    opacity: 0.3;
}

.bg-overlay {
    background: linear-gradient(0deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5));
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;

}

.bg-overlay-2 {
    background: linear-gradient(0deg, rgba(1, 137, 142, 0.28), rgba(1, 137, 142, 0.28));
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
}

.testimonial-overlay {
    background: linear-gradient(0deg, rgba(255, 239, 225, 0.96), rgba(255, 239, 225, 0.96));
    position: absolute;
    width: 75%;
    height: 100%;
    top: 0;
    right: 0;
}

.bg-accent-opacity {
    background: linear-gradient(0deg, rgba(43, 43, 43, 0.86), rgba(43, 43, 43, 0.86));
}

.bg-blur {
    position: absolute;
    background: rgba(24, 21, 24, 0.3);
    border: 1px solid rgba(207, 171, 130, 0.2);
    backdrop-filter: blur(17.5px);
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
    bottom: 0;
    z-index: 1;
}

.linear-gradient {
    padding: 14px 42px;
    background-color: var(--accent-color-2);
    border-radius: 50px;
    width: max-content;
}

.cta-overlay {
    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 20.5%, rgba(1, 199, 243, 0.2) 100%);
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
}

.contact-overlay {
    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 27.06%, rgba(1, 199, 243, 0.61) 100%);
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;

}

.video-overlay {
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
    position: absolute;
    background: linear-gradient(180deg, rgba(4, 56, 63, 0.144) 0%, rgba(4, 56, 63, 0.72) 100%);
    opacity: 0.5;
    transition: background 0.3s, border-radius 0.3s, opacity 0.3s;
}

/* ---------------------------- */
/* Utility Classes              */
/* ---------------------------- */
.hover-transform:hover {
    transform: translateY(-10px);
}

.font-1 {
    font-family: var(--font-1);
}

.font-2 {
    font-family: var(--font-2);
}

.font-3 {
    font-family: var(--font-3);
}

.ls-2 {
    letter-spacing: 2px;
}

.fs-7 {
    font-size: 0.8rem !important;
}

.fs-very-large {
    font-size: 4.125rem;
}

.fw-black {
    font-weight: 900 !important;
}

.circle {
    background-color: var(--accent-color-4);
    width: 222px;
    aspect-ratio: 1/1;
    border-radius: 50%;
}

.line {
    width: 3px;
    height: 175px;
    background: var(--accent-color-4);
    margin-top: -23rem;
    z-index: 0;
}

.team-detail {
    background-color: var(--background-color);
    color: var(--accent-color);
    transition: all 0.5s;
}

.team-detail:hover {
    background-color: var(--accent-color);
    color: var(--primary);
}

.divider {
    display: flex;
    align-items: center;
}

.divider::after {
    display: block;
    content: "";
    border-bottom: 0;
    flex-grow: 1;
    border-top: 3px solid #8692af;
    max-width: 30px;
    min-width: 30px;
}


.divider-element {
    letter-spacing: 2px;
    flex-shrink: 0;
    flex-grow: 1;
    margin: 0;
    margin-left: 1rem;
    font-weight: 400;
}

.image-infinite-bg {
    height: 90vh;
}

.animation-bg {
    animation: background_animation 10s forwards;
}

.bg-attach-fixed {
    background-attachment: fixed;
    background-position: center;
    width: 100%;
    height: 100%;
}

.bg-attach-cover {
    background-size: cover;
    background-position: center;
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
}

.social-container {
    display: flex;
    flex-direction: row;
    gap: 1rem;
}

.social-container.column {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.character-img {
    position: relative;
    z-index: 2;
}

.w-70 {
    width: 70%;
}

.stock-img {
    position: relative;
    z-index: 20;
}

.customer-item {
    border-radius: 50%;
    aspect-ratio: 1/1;
    font-size: 19px;
    width: 48px;
    height: 48px;
    transition: all 0.5s;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 2px solid var(--primary);
    margin-left: -25px;
    overflow: hidden;
}

.customer-item img {
    object-fit: cover;
    aspect-ratio: 1/1;
}

.customer-item.single {
    margin-left: 0;
}

.customer-add {
    border-radius: 50%;
    aspect-ratio: 1/1;
    font-size: 19px;
    width: 48px;
    height: 48px;
    transition: all 0.5s;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 2px solid var(--primary);
    margin-left: -25px;
    overflow: hidden;
    background-color: var(--background-color);
    z-index: 10;
}

.testimonial-item {
    border-radius: 50%;
    aspect-ratio: 1/1;
    font-size: 19px;
    width: 5rem;
    height: 5rem;
    transition: all 0.5s;
    display: flex;
    justify-content: center;
    margin-left: -6px;
    overflow: hidden;
}

.bg-box {
    bottom: 0;
    right: 0;
    height: 60%;
    width: 50%;
    border: solid 3px var(--accent-color-2);
}

.icon-box {
    display: flex;
    justify-content: center;
    font-size: 16px;
    align-items: center;
    text-align: center;
    aspect-ratio: 1/1;
    transition: all 0.5s;
    border-radius: 10px;
    background-color: var(--accent-color);
    color: var(--background-color);
    width: 42px;
    height: 42px;
}

.icon-box:hover {
    border: 1px solid var(--accent-color);
    background-color: var(--text-color);
}

.icon-box-2 {
    display: flex;
    justify-content: center;
    font-size: 38.5px;
    align-items: center;
    text-align: center;
    aspect-ratio: 1/1;
    transition: all 0.5s;
    border-radius: 50%;
    background-color: var(--accent-color-4);
    color: var(--text-color);
    position: absolute;
    padding: 32px;
}

.icon-box-3 {
    display: flex;
    justify-content: center;
    font-size: 16px;
    align-items: center;
    text-align: center;
    aspect-ratio: 1/1;
    transition: all 0.5s;
    border-radius: 50%;
    background-color: var(--accent-color);
    color: var(--background-color);
    width: 40px;
    height: 40px;
    font-size: 42px;
    margin: 0 auto;
    position: absolute;
    top: -15%;
    right: 0;
}

.icon-box-4 {
    background-color: var(--accent-color);
    padding: 32px;
    border-radius: 10px;
}

.icon-box-4:hover {
    background-color: var(--accent-color-4);
}

.icon-box-4 i {
    font-size: 38.5px;
}

.icon-box-4:hover i {
    color: var(--text-color);
}

.icon-textual {
    background-color: var(--accent-color-3);
    border-radius: 50rem;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 150px;
    height: 70px;
    transition: all 0.5s ease;      
    cursor: pointer;             
}

.icon-textual:hover {
    background-color: var(--accent-color);
}

.icon-textual i {
    font-weight: 700;
    color: var(--background-color);
    font-size: 40px;
}

.icon-textual:hover i {
    transform: rotate(45deg);
}

.author-box {
    border-radius: 50%;
    aspect-ratio: 1/1;
    width: 15rem;
    transition: all 0.5s;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-left: -6px;
    overflow: hidden;
}

.post-button {
    background-color: transparent;
    color: var(--accent-color) !important;
    border: none !important;
}

.post-button:hover {
    background-color: transparent !important;
    color: var(--accent-color) !important;
    transform: scale(1.15);
}

.position-xl-absolute {
    position: absolute;
}

.w-60 {
    width: 60% !important;
}

.shadow-double {
    box-shadow: 40px -40px 0px -4px var(--accent-color), -54px 44px 0px -3px var(--text-color-2);
}

.shadow-single-left {
    box-shadow: -54px 44px 0px -3px var(--accent-color);
}

.shadow-single-right {
    box-shadow: 40px -40px 0px -4px var(--accent-color);
}

.shadow-accent-2 {
    -webkit-box-shadow: -90px -23px 0px 0px var(--accent-color);
    -moz-box-shadow: -90px -23px 0px 0px var(--accent-color);
    box-shadow: -90px -23px 0px 0px var(--accent-color);
}

.text-404 {
    font-size: 200px;
    font-weight: bold;
    font-family: var(--font-2);
}

.number-text {
    font-size: 96px;
    font-weight: bold;
}

.text-banner {
    font-size: 200px;
}

.rounded-end {
    border-top-right-radius: 1rem;
    border-bottom-right-radius: 1rem;
}

.swiperImage.floating-left {
    margin-left: 16rem;
}

.floating-heading {
    margin-left: -15rem;
}

.floating-image {
    display: block;
}

.floating-image-2 {
    position: absolute;
    bottom: 0;
    right: 0;
}

.floating-price {
    top: -2.5rem;
    right: -10rem;
}

.floating-banner {
    margin-top: -15rem;
}

.floating-top {
    margin-top: -4rem;
}

.floating-services {
    position: relative;
    z-index: 9999;
    margin-top: 3rem;
    margin-bottom: -3rem;
}

.floating-testi {
    margin-bottom: -8rem;
    margin-top: 19rem;
    margin-left: 15rem;
}

.floating-services-2 {
    margin-left: -5rem;
}

.floating-services-2 .padding {
    padding-left: 7rem;
}

.floating-services-3 {
    position: relative;
    margin-top: 3rem;
    margin-bottom: -3rem;
}

.floating-services-3 .padding {
    padding-left: 3rem;
    padding-right: 7rem;
}

.floating-bottom {
    position: absolute;
    top: 8rem;
    left: -5.5em;
}

.floating-bottom-1 {
    position: absolute;
    bottom: 5rem;
    right: 0;
}

.floating-bottom-2 {
    position: absolute;
    bottom: 5rem;
    right: 0;
}

.floating-contact {
    margin-left: -7rem;
    border-bottom-left-radius: 1rem;
}

.floating-counter {
    position: relative;
    margin-top: -6rem;
    z-index: 9999;
}

.floating-blog {
    margin-top: -3rem;
}

.image-container {
    position: relative;
    display: inline-block;
}

.hotspot {
    position: absolute;
    width: 30px;
    height: 30px;
    background: rgba(24, 21, 24, 0.5);
    border: 0.5px solid var(--text-color);
    backdrop-filter: blur(2px);
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.3s ease;
    transform: translate(-50%, -50%);
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
}

.hotspot:hover {
    background-color: var(--accent-color);
}

.hotspot i {
    font-size: 16px;
    font-weight: 600;
    color: var(--text-color);
    transition: color 0.3s ease;
}

.hotspot:hover i {
    color: white;
}

/* Tooltip */
.hotspot::after {
    content: attr(data-text);
    position: absolute;
    background: rgba(0, 0, 0, 0.7);
    color: white;
    padding: 5px 10px;
    border-radius: 5px;
    top: -35px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 14px;
    white-space: nowrap;
    display: none;
}

.hotspot:hover::after {
    display: block;
}

.d-inline-block {
    display: inline-block;
}

.position-responsive {
    position: absolute;
}

.list .icon-box {
    width: 4.3rem;
    height: 4.3rem;
}

.list-flush-horizontal {
    display: flex;
    flex-direction: row;
    list-style: none;
    margin: 0;
    padding: 1rem;
}

.list-flush-horizontal .list-item:first-child,
.list-flush-horizontal .list-item {
    border-right: 1px solid white;
}

.list-flush-horizontal .list-item:last-child {
    border-left: 1px solid white;
    border-right: none;
}

.list-flush-horizontal .list-item:nth-last-child(2) {
    border: none;
}

.list-group-item {
    background-color: transparent;
    border-radius: 10px;
}

.list-group .link {
    background-color: transparent;
    border: none;
    color: var(--text-color-2);
    transition: all 0.5s;
    border-radius: 0px;
    font-size: 16px;
    font-family: var(--font-1);

}

.list-group .link.active {
    color: var(--accent-color);

}

.list-group .link:hover {
    color: var(--accent-color) !important;
    text-decoration: none;
}

.list-group .list-group-item.active {
    background-color: var(--accent-color-2);
    color: var(--accent-color);
}

.list-group .list-group-item.list-group-item-action:hover {
    background-color: var(--accent-color-2);
    color: white;
}

.list {
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    padding-inline: 0.5rem;
}

.list .link {
    font-weight: 400;
    text-wrap: nowrap;
}

.list li {
    padding: 0;
    font-size: 16px;
    font-family: var(--font-2);
}

.list li .link {
    transition: all 0.5s;
    color: var(--text-color-2);
}

.list li i {
    transition: all 0.5s;
    color: var(--accent-color);
}

.list.text-black i {
    color: #131313;
}

.list li .link:hover,
.list li .link:hover i {
    color: var(--accent-color);
}

.countdown {
    display: flex;
    gap: 20px;
}

.countdown-box {
    background-color: var(--accent-color);
    color: white;
    text-align: center;
    padding: 30px;
    width: 200px;
    border-radius: 8px;
}

.countdown-box h2 {
    margin: 0;
    font-size: 2em;
}

.countdown-box p {
    margin: 0;
    font-size: 1.2em;
}

.hr-custom {
    border: none;
    height: 5px;
    background: #f5f5f5;
    color: #f5f5f5;
    opacity: 1;
    margin-top: -3rem;
}

/* ---------------------------- */
/* Social and Contact Setting    */
/* ---------------------------- */
.customer-container {
    display: flex;
}

.customer-item:nth-child(1) {
    z-index: 3;
}

.customer-item:nth-child(2) {
    z-index: 4;
}

.customer-item:nth-child(3) {
    z-index: 5;
}

.customer-item:nth-child(4) {
    z-index: 6;
}

.subscribe-container {
    box-sizing: border-box;
    margin-bottom: -8em;
}

.contact-item {
    border-radius: 50%;
    aspect-ratio: 1/1;
    font-size: 40px;
    height: 2rem;
    transition: all 0.5s;
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
}

.process-wrapper {
    align-items: center;
    width: 100%;
    transition: filter 0.6s ease-in-out;
    filter: grayscale(100%);
}

.process-wrapper:hover {
    align-items: center;
    width: 100%;
    filter: grayscale(0%);
}

.process-icon {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3rem;
}

.social-wrapper {
    margin: 5rem 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
    z-index: 10;
    justify-content: center;
}

.follow-text {
    writing-mode: vertical-rl;
    transform: rotate(0deg);
    letter-spacing: 3px;
    font-size: 14px;
    font-weight: 500;
    color: var(--text-color-2);
    margin: 0;
}

.social-icons {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 5px;
}

.social-icons.row {
    display: flex;
    flex-direction: row;
    gap: 12px;
    margin-top: 5px;
}

.social-icons a {
    width: 35px;
    height: 35px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: var(--text-color);
    font-size: 16px;
    transition: 0.3s ease;
}

.social-icons a:hover {
    color: var(--accent-color);
    background-color: var(--color-2);
}

.social-item {
    border-radius: 50%;
    aspect-ratio: 1/1;
    font-size: 16px;
    width: 2.5rem;
    height: 2.5rem;
    transition: all 0.5s;
    display: flex;
    justify-content: center;
    align-items: center;
    color: var(--background-color);
    background-color: transparent;
    border: 1px solid var(--background-color);
}

.social-item i {
    color: var(--background-color);
}

.social-container.accent .social-item {
    background-color: var(--accent-color);
    color: white;
    border-color: var(--accent-color);
}

.social-container.accent .social-item:hover {
    background-color: var(--accent-color);
    color: white;

}

.social-container.share .social-item {
    background-color: var(--accent-color);
    color: white;
}

.social-container.share .social-item:hover {
    background-color: var(--accent-color);
    color: white;
    border: 1px solid var(--accent-color);
}


.social-container.team .social-item {
    width: 1.8rem;
    height: 1.8rem;
    font-size: 16px;
}


.social-item:hover {
    background-color: var(--background-color);
    transition: all 0.5s;
}

.social-item:hover i {
    color: var(--text-color);
}

.social-item-2:hover {
    color: var(--primary);
    background-color: var(--accent-color);
}

.social-item-3:hover {
    color: var(--text-color);
}

.social-container .share-button {
    background-color: var(--accent-color-1);
    aspect-ratio: 1/1;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
}

.share-button:hover {
    background-color: var(--accent-color-2);
}

/* ---------------------------- */
/* Breadcrumb    */
/* ---------------------------- */
.breadcrumb {
    align-items: center;
    font-family: var(--font-2);
}

.breadcrumb .breadcrumb-item>a {
    color: var(--text-color);
}

.breadcrumb .breadcrumb-item.active {
    color: var(--accent-color);
    font-family: var(--font-2);
}

.breadcrumb-item+.breadcrumb-item::before {
    color: var(--accent-colorbolee);
}

/* ---------------------------- */
/* Specific Media Queries       */
/* ---------------------------- */
.video-e119 {
    width: 60%;
    margin-bottom: -3rem;
    margin-left: -3rem;
}

.ifr-video {
    aspect-ratio: 16/9;
    width: 100%;
}

.video-container {
    aspect-ratio: 3/2;
    background-size: cover;
    background-position: center;
    position: relative;
    border: 5px solid white;
    border-radius: 10px;
}

.video-iframe {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
}

.video-btn {
    border-radius: 50%;
    aspect-ratio: 1/1;
    width: 4rem;
    background-color: var(--accent-color);
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0;
    font-size: 2rem;
    color: white;
    border: none;
    opacity: 0.7;
}

.video-btn:hover {
    opacity: 1;
    color: white;
}

.request-loader {
    position: absolute;
    height: 60px;
    width: 60px;
    border-radius: 50% !important;
    background-color: var(--accent-color);
    border: solid 2px var(--accent-color);
    display: flex;
    justify-content: center;
    align-items: center;
    color: var(--background-color);
    font-size: 25px;
    aspect-ratio: 1/1;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 100;
}

.request-loader:hover {
    color: var(--accent-color-4);
}

.request-loader::after,
.request-loader::before {
    opacity: 0.2;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    position: absolute;
    content: '';
    height: 100%;
    width: 100%;
    color: var(--accent-color);
    border: 4px solid currentColor;
    border-radius: 50%;
    animation-name: ripple;
    animation-iteration-count: infinite;
    animation-timing-function: cubic-bezier(.65, 0, .34, 1);
    z-index: 0;
}

.request-loader::after {
    animation-delay: 0.5s;
    animation-duration: 3s;
}

.request-loader::before {
    animation-delay: 0.2s;
    animation-duration: 3s;
}


/* ---------------------------- */
/* card Setting       */
/* ---------------------------- */
.card {
    border: none;
    transition: all 0.5s;
    background-color: transparent;
    color: var(--text-color);
    overflow: visible;
}

.card img {
    border-radius: 10px;
}

.card-accent {
    color: var(--accent-color);
    position: relative;
    background-size: cover;
    background-position: center;
    border-width: 1px;
    border-style: solid;
    border-radius: 10px;
    border-image: linear-gradient(to left, #A502A8, #2F4A9D)1;
}

.card-customer {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-evenly;
    border-top-left-radius: 10px;
    background-color: var(--accent-color);
    gap: 1rem;
    padding: 1rem 3rem;
    position: absolute;
    bottom: 0;
    right: 0;
}

.card-team {
    display: flex;
    flex-direction: column;
    background-color: var(--background-team);
    height: 50%;
    margin-top: 15rem;
    transition: all 0.5s ease;
    border-radius: 10px 10px 0 0;
}

.card-team:hover {
    transform: translateY(-10px);
}

.card-team-detail {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    padding: 24px;
    background-color: var(--accent-color);
    border-radius: 10px;
    width: 100%;
    min-height: 50%;
    align-items: start;
}

.card-blog {
    display: flex;
    flex-direction: column;
    color: var(--text-color);
    height: 100%;
    transition: all 0.5s;
}

.card-blog img {
    border-radius: 10px 10px 0 0;
}

.card-blog-row {
    display: flex;
    flex-direction: row;
    gap: 1rem;
    align-items: start;
    color: var(--text-color);
    background-color: var(--color-2);
    padding: 1rem;
    border-radius: 10px;
    transition: all 0.5s;
}

.card-blog-row:hover {
    background-color: var(--accent-color-4);
    transform: translateY(-5px);
}

.card-blog-row:hover h6 {
    color: var(--accent-color);
}

.card-blog-row:hover .small-text {
    color: var(--accent-color);
}

.card-blog:hover {
    color: var(--accent-color);
    transform: translateY(-10px);
}

.card-blog:hover span {
    color: var(--text-color);
}

.card-blog h6 {
    color: var(--text-color);
}

.card-blog:hover h6 {
    color: var(--accent-color);
}

.card-blog-detail {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    gap: 1rem;
    background-color: var(--color-2);
    padding: 24px;
    border-radius: 0 0 10px 10px;
    color: var(--text-color);
    transition: all 0.5s;
}

.card-blog:hover .card-blog-detail {
    background-color: var(--accent-color-4);
}

.card-blog-date {
    color: var(--text-color-2);
    margin-top: auto;
}

.card-blog:hover .card-blog-date {
    color: var(--accent-color);
}

.card-blog:hover .small-text {
    color: var(--accent-color);
}

.card-service {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    background-color: var(--color-2);
    color: var(--text-color);
    border-radius: 10px;
    padding: 24px;
    transition: all 0.5s;
    max-width: 35%;
}

.card-service:hover {
    color: var(--text-color);
    transform: translateY(-10px);
    background-color: var(--accent-color-4);
}

.card-404 {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 3rem;
    height: 100%;
    background-color: var(--text-color);
    border-radius: 10px;
    padding: 24px;
}

.class-container {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    flex-wrap: wrap;
    align-items: center;
    width: 100%;
}

.class-card {
    background-color: var(--background-color);
    border-radius: 15px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    display: none;
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    /* Hide all by default */
}

.class-card:hover {
    transform: translateY(-10px);
    transition: all 0.5s;
}

.class-card.active {
    display: block;
    /* Show active cards */
}

.class-info {
    color: var(--primary);
    margin: 20px;
    font-family: var(--font-2);
    font-size: 12px;
    position: absolute;
    bottom: 0;
    left: 0;
}

.class-speakers {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 15px;
    margin-top: 10px;
}

.class-price {
    font-size: 1.2em;
    color: var(--primary);
    display: flex;
    flex-direction: column;
    align-self: flex-end;
    width: max-content;
}

.class-link {
    color: #ff3b3b;
    font-weight: bold;
    margin-top: 10px;
    text-align: left;
    display: inline-block;
}

.navigation {
    display: grid;
    grid-template-columns: 3fr 2fr 0.5fr;
    align-items: center;
    color: var(--text-color-2);
    transition: all 0.5s;
    border-radius: 8px;
    padding-inline: 24px;
}

.navigation:hover {
    color: var(--accent-color);
    background-color: var(--color-4);
}

.navigation a {
    background-color: var(--secondary);
    width: 64px;
    height: 64px;
    border-radius: 10px;
    color: var(--text-color-2);
    padding: 10px;
    transition: all 0.5s;
    font-size: 44px;
    display: flex;
    align-items: center;
    justify-self: end;
}

.navigation:hover a {
    color: var(--color-4);
    background-color: var(--accent-color);
    margin: 0px 8px;
    transition: all 0.5s;
}

.navigation:hover h4 {
    margin: 0px 8px;
    transition: all 0.5s;
}

.navigation img {
    opacity: 0;
    margin-block: -3rem;
    justify-self: center;
    transition: all 1s;
    transform: scale(1);
    position: relative;
    z-index: 9999;
    box-shadow: 6px 6px 0px 0px var(--accent-color);
    aspect-ratio: 1/1;
    width: 50%;
    transform: rotate(3deg);
    border-radius: 8px;
}

.navigation:hover img {
    opacity: 1;
}

.background-hover {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
}

.card-service:hover .background-hover {
    opacity: 1;
    background: linear-gradient(118.48deg, rgba(47, 74, 157, 0.4) 0%, rgba(165, 2, 168, 0.4) 100%), linear-gradient(0deg, rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0.9));
    border-radius: 10px;

}

.card-service.img-hover:hover {
    background-image: var(--url-image);
}

.image-hover {
    opacity: 0;
    position: absolute;
}

.card-service:hover .image-hover {
    opacity: 100%;
}

.card-service-detail {
    background-color: var(--accent-color-4);
    display: flex;
    flex-direction: column;
    padding: 41px 27px;
    border-radius: 50px;
    gap: 12px;
}

.card-detail {
    display: flex;
    flex-direction: row;
    align-items: center;
    border-bottom: 1px solid var(--accent-color-9);
    justify-content: space-between;
    transition: all 0.5s;
    padding-bottom: 5px;
}

.card-detail:hover {
    color: var(--accent-color);
}

.card-testimonial {
    border: none;
    border-radius: 20px;
    transition: all 0.5s;
    background-color: transparent;
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.card-testimonial hr {
    border: none;
    height: 3px;
    background-color: var(--text-color);
    opacity: 1;
}

.card-name-testi {
    display: flex;
    flex-direction: row;
    align-items: start;
    gap: .5rem;
}

.card-testimonial:hover .border-up {
    background-color: var(--accent-color);
}

.card-testimonial:hover i {
    color: var(--accent-color);
}

.card-testimonial:hover h5 {
    color: var(--accent-color);
}

.card .icon-box.bg-accent-color {
    background-color: var(--accent-color);
    color: var(--accent-color);
}

.card .icon-box.accent-color-2 {
    color: var(--accent-color-2);
    font-size: 4rem;
}

.card:hover .icon-box.accent-color-2 {
    color: var(--accent-color-2);
}

.card:hover {
    transform: translateY(-5px);
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
}

.card-pricing {
    position: relative;
    z-index: 1;
    color: var(--black);
    border-radius: 10px;
    padding: 32px;
    display: flex;
    flex-direction: column;
    align-items: start;
    justify-content: center;
    transition: all 0.5s;
    border: 1px solid var(--text-color-2);
    gap: 2rem;
}

.card-pricing:has(.info-tooltip:hover) {
    z-index: 10;
}

.card-pricing:hover {
    transform: translateY(-20px);
    color: var(--black);
}

.card-pricing .custom-border {
    border-bottom: 2px solid var(--accent-color-8);
}

.card-pricing:hover .custom-border {
    border-bottom: 2px solid var(--accent-color-10);
}

.card-pricing-detail {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: .5rem;
}

.card-pricing-detail i {
    color: var(--background-color);
    background-color: var(--accent-color);
    border-radius: 100px;
    padding: 5px;
    font-weight: bold;
    font-size: medium;
}

.card-pricing-middle {
    transform: scale(1);
    flex: 1.00;
    color: white;
}

.card.card-pricing span,
.card.card-pricing i {
    color: var(--black);
}

.card.card-pricing:hover .btn-accent {
    background-color: var(--black);
    color: var(--yellow);
}

.card.card-pricing:hover .btn-accent span,
.card.card-pricing:hover .btn-accent i {
    color: var(--yellow);
}

.card.card-pricing .custom-border-4 {
    border-bottom: 1px solid var(--accent-grey-2);
}

.card.card-pricing:hover .custom-border-4 {
    border-bottom: 1px solid var(--accent-yellow);
}

.card.card-pricing-hover {
    color: var(--text-color);
    border: 1px solid #01c7f349;
    border-radius: 20px;
    background: linear-gradient(140.72deg, rgba(30, 30, 30, 0.7) -67.01%, rgba(5, 5, 5, 0.7) 100.85%);
    backdrop-filter: blur(12.4px);
    transition: transform 0.3s ease, background-color 0.3s ease, box-shadow 0.3s ease, color 0.3s ease;
}

/* Ribbon */
.ribbon {
    width: 120px;
    height: 120px;
    overflow: hidden;
    position: absolute;
    top: 0px;
    right: 0px;
}

.ribbon span {
    position: absolute;
    font-family: var(--font-1);
    display: block;
    width: 110px;
    padding: 4px 0;
    background-color: #c6f70f;
    /* Warna hijau neon */
    color: var(--accent-color-4);
    text-align: center;
    transform: rotate(47deg);
    top: 14px;
    right: -30px;
    font-size: 16px;
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.3);
}


.box-price {
    border: 1px solid;
    border-image: linear-gradient(210deg, #00000045, #01c7f349) 1;
    box-shadow:
        0 7px 15px 0 rgba(0, 0, 0, 0.13),
        0 1px 4px 0 rgba(0, 0, 0, 0.11);
    border-radius: 10px;
    background: linear-gradient(140.72deg, rgba(30, 30, 30, 0.7) -67.01%, rgba(5, 5, 5, 0.7) 100.85%);
    backdrop-filter: blur(12.4px);
}

.card.card-pricing-hover:hover h3 {
    color: var(--accent-color);
}

.card.card-pricing-hover:hover {
    border: 1px solid var(--accent-color-2);
    background: linear-gradient(180deg, #01C7F3 -81.79%, #111111 100%);

    transform: scale(1.05);
}

.card-pricing-hover-middle {
    transform: scale(1.04);
    flex: 1.00;
    box-shadow: 0px 0px 0px 2px var(--accent-color);
    color: white;
}


.card.card-pricing-hover:hover .btn-accent-outline {
    background-color: var(--text-color);
    color: var(--primary);
}

.card.card-pricing-hover .btn-accent-outline i {
    color: var(--text-color);
}

.card.card-pricing-hover:hover .btn-accent-outline i {
    color: var(--primary);
}

.card:hover .icon-box.bg-accent-color {
    background-color: var(--accent-color);
    color: var(--accent-color-2);

}

.card.card-outline-hover {
    box-shadow: 0 7px 15px 0 rgba(0, 0, 0, .13), 0 1px 4px 0 rgba(0, 0, 0, .11);
    border: 1px solid var(--accent-color);
}

.card.blog {
    background-color: var(--background-color);
}

.card.blog:hover {
    border: solid 1px var(--accent-color-2);
    border-radius: 10px;
}


.card.card-outline-hover:hover .btn-accent {
    background-color: transparent;
    border: 1px solid var(--accent-color);
    color: var(--accent-color);
}

.card:hover .icon-box.bg-accent-color {
    background-color: white;
    color: var(--accent-color);
}

.card:hover p {
    transition: all 0.5s;
}

.card.with-border-bottom {
    border-bottom: 5px solid var(--accent-color) !important;
}

.card-about {
    background-color: var(--background-color);
    padding: 3rem;
    transition: all 0.8s;
}


.card-about:hover p {
    color: var(--primary);
}

.card-about:hover {
    background-color: var(--accent-color-2);
    margin-top: -5rem;
    color: var(--primary);
    height: calc(100% + 5rem);
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
}

.testimonial-container {
    background-color: transparent;
    padding: 0;
    border-radius: 0;
    border: 1px solid transparent;
    color: var(--text-color-2);
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.testimonial-container:hover {
    box-shadow: none;
    transition: all 0.5s;
    backdrop-filter: blur(12.4px);
}

.testimonial-container:hover .team-name {
    color: var(--accent-color);
}

.testimonial-container .icon-hover {
    color: var(--accent-color-3);
    font-size: 84px;
    transition: all 0.5s;
}

.testimonial-container:hover .icon-hover {
    position: absolute;
    top: 0;
    right: 0;
    color: var(--accent-color-2);
    font-size: 37px;
    margin-top: 1rem;
    margin-right: 2rem;
}

.services-container {
    background-color: transparent;
    padding: 30px;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    height: 100%;
    box-shadow: 0px 0px 18px 0px rgba(0, 0, 0, 0.1);
}

.features-container {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: flex-start;
}

.feature-box {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    background-color: var(--accent-color);
    color: var(--primary);
    border-radius: 10px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    padding: 3rem;
    text-align: center;
    height: 100%;
    transition: transform 0.3s ease;
}

.feature-box-middle {
    transform: scaleY(1.15) scaleX(1.05);
}

.feature-box-middle h3,
.feature-box-middle p {
    position: relative;
    transform: none;
    will-change: contents;
}

/* Class Cards */

.class-team {
    display: none;
    height: 100%;
}

.class-team.active {
    display: block;
}

.class-card:hover {
    transform: translateY(-10px);
    transition: all 0.5s;
}

.class-card.active {
    display: block;
    /* Show active cards */
}

.class-info {
    color: var(--primary);
    margin: 20px;
    font-family: var(--font-2);
    font-size: 12px;
    position: absolute;
    bottom: 0;
    left: 0;
}

.class-speakers {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 15px;
    margin-top: 10px;
}

.class-price {
    font-size: 1.2em;
    color: var(--primary);
    display: flex;
    flex-direction: column;
    align-self: flex-end;
    width: max-content;
}

.class-link {
    color: #ff3b3b;
    font-weight: bold;
    margin-top: 10px;
    text-align: left;
    display: inline-block;
}

/* Tab Navigation */
.tab-container.allteam {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 2rem;
    margin: 20px 0;
    font-family: var(--font-2);
}

.tab-container {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    justify-content: center;
    align-items: center;
    gap: 10px;
    margin: 20px 0;
    font-family: var(--font-1);
}

.tab-container.team {
    display: flex;
    flex-direction: row;
    gap: 3rem;
    width: 100%;
    align-items: center;
}

.tab-container.faq {
    display: flex;
    flex-direction: row;
    gap: 3rem;
    width: 100%;
}


.background-container {
    position: absolute;
    height: 100%;
    width: 100%;
    z-index: -1;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-size: cover;
    background-position: center;
    width: 100%;
    height: 100%;
}

.tabs {
    display: flex;
    justify-content: space-around;

}

.tabs .card-overlay img {
    padding-left: 0;
    transition: all 0.5s;
}

.class-card .card-overlay img {
    padding-left: 0;
    transition: all 0.5s;
}

.tabs.studio {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    position: absolute;
    z-index: 2;
    background: rgba(35, 31, 32, 0.3);
    backdrop-filter: blur(17.5px);
    padding: 30px;

}

.tabs.faq {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 30px;
    background-color: var(--background-color);
    border: 1px solid var(--accent-color-3);
    height: max-content;
}

.tabs.team {
    display: flex;
    flex-direction: row;
    gap: 1rem;

}

.tabs.faq .tab {
    flex: 1;
    text-align: left;
    display: flex;
    flex-direction: row;
    padding: 16px 24px;
    gap: 1rem;
    justify-content: space-between;
    cursor: pointer;
    color: var(--text-color);
    transition: background 0.5s ease-in-out;
    border-right: none;
}

.tabs.team .tab {
    flex: 1;
    text-align: left;
    cursor: pointer;
    font-size: 24px;
    font-weight: 600;
    color: var(--text-color-2);
    transition: background 0.5s ease-in-out;
    border-right: none
}

.tabs.studio .tab {
    flex: 1;
    text-align: left;
    padding: 10px;
    cursor: pointer;
    font-size: 24px;
    font-weight: 600;
    color: var(--text-color-2);
    transition: background 0.5s ease-in-out;
    border-right: none
}

.tab {
    padding: 8px 24px;
    color: var(--text-color);
    border-radius: 5px;
    cursor: pointer;
    text-align: center;
    border: 1px solid var(--text-color);
}

.tab-container.allteam .tab {
    flex: 1;
    text-align: center;
    cursor: pointer;
    color: var(--text-color);
    transition: background 0.5s ease-in-out;
    border-right: none;
    padding-block: 10px;
}

.tab-container.allteam .tab.active {
    color: var(--accent-color);
    border-bottom: 1px solid var(--accent-color);
}

.tab.active {
    color: var(--background-color);
    background-color: var(--accent-color);
    border: none;
}

.tab .title-tab {
    font-size: 32px;
    font-weight: bold;
    padding: 30px;
}

.tab.active .title-tab {
    background-color: var(--primary);
}

.tabs.studio .tab.active {
    color: var(--primary);
    background: var(--accent-color)
}

.tabs.faq .tab.active {
    color: var(--primary);
    background: var(--accent-color)
}

.tab-content.studio {
    position: relative;
    bottom: unset;
    left: unset;
    max-width: unset;
    background: var(--primary);
    padding: 40px;
    text-align: left;
}

.tab-content.faq {
    position: relative;
    bottom: unset;
    left: unset;
    max-width: unset;
    background: var(--accent-color-3);
    padding: 40px;
    text-align: left;
}

.tab-content.team {
    position: relative;
    bottom: unset;
    left: unset;
    max-width: unset;
    background: var(--primary);
    text-align: left;
}

.content {
    display: none;
}

.content.active {
    display: block;
}

.tab .content {
    display: none;
    position: absolute;
    bottom: 10rem;
    margin-left: -4rem;
    max-width: 500px;
    padding: 40px;
    text-align: left;
    background: rgba(35, 31, 32, 0.3);
    backdrop-filter: blur(17.5px);
    /* Sembunyikan semua konten */
}

.tab.active .content {
    display: block;
    /* Tampilkan konten yang aktif */
}

.grid-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    /* 3 kolom */
    gap: 0;
    /* Jarak antar elemen 0 untuk mengatur garis */
    position: relative;
}

.grid-item-1 {
    border-right: 1px solid rgb(255, 255, 255, 0.61);
    /* Garis vertikal kanan */
    border-bottom: 1px solid rgb(255, 255, 255, 0.61);
    /* Garis horizontal bawah */
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 50px;
    /* Ruang untuk gambar */
}

.grid-item-2 {
    border-right: 1px solid rgb(255, 255, 255, 0.61);
    /* Garis vertikal kanan */
    border-bottom: 1px solid rgb(255, 255, 255, 0.61);
    /* Garis horizontal bawah */
    border-left: 1px solid rgb(255, 255, 255, 0.61);
    /* Garis vertikal kiri */
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 50px;
    /* Ruang untuk gambar */
}

.grid-item-3 {
    border-bottom: 1px solid rgb(255, 255, 255, 0.61);
    /* Garis horizontal bawah */
    border-left: 1px solid rgb(255, 255, 255, 0.61);
    /* Garis vertikal kiri */
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 50px;
    /* Ruang untuk gambar */
}

.grid-item-4 {
    border-right: 1px solid rgb(255, 255, 255, 0.61);
    /* Garis vertikal kanan */
    border-top: 1px solid rgb(255, 255, 255, 0.61);
    /* Garis horizontal atas */
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 50px;
    /* Ruang untuk gambar */
}

.grid-item-5 {
    border-right: 1px solid rgb(255, 255, 255, 0.61);
    /* Garis vertikal kanan */
    border-left: 1px solid rgb(255, 255, 255, 0.61);
    /* Garis vertikal kiri */
    border-top: 1px solid rgb(255, 255, 255, 0.61);
    /* Garis horizontal atas */
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 50px;
    /* Ruang untuk gambar */
}

.grid-item-6 {
    border-left: 1px solid rgba(255, 255, 255, 0.61);
    /* Garis vertikal kiri */
    border-top: 1px solid rgba(255, 255, 255, 0.61);
    /* Garis horizontal atas */
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 50px;
    /* Ruang untuk gambar */
}

/* ---------------------------- */
/* Progress and Rating       */
/* ---------------------------- */
.r-progress {
    --value: 17;
    --progress-color: var(--text-color);
    --secondary-progress-color: var(--accent-color-2);
    --animation-duration: 2000;
}

.r-progress-bar {
    position: relative;
    height: 8px;
    background-color: var(--text-color);
    display: flex;
    /* overflow: hidden; */
}

.r-progress-bar .progress-value {
    height: 100%;
    width: calc(var(--progress) * 1%);
    background-color: var(--accent-color);
    position: relative;
    animation: load;
    animation-fill-mode: forwards;
    animation-duration: calc(var(--animation-duration) * 1ms);
    animation-timing-function: linear;
    animation-delay: 500ms;
    color: black;
}

.r-progress-bar.percentage-label::after {
    counter-reset: percentage var(--progress);
    content: counter(percentage) '%';
    display: block;
    position: absolute;
    left: calc((var(--progress) * 1%));
    animation: load;
    animation-fill-mode: forwards;
    animation-duration: calc(var(--animation-duration) * 1ms);
    animation-timing-function: linear;
    animation-delay: 500ms;
    font-size: 18px;
    line-height: 1.2;
    /* font-weight: 700; */
    font-family: var(--font-1);
    bottom: calc(100% + 0.5rem);
    transform: translateX(-50%);
}

.rating {
    list-style: none;
    display: flex;
    flex-direction: row;
    gap: 0.75rem;
    padding: 0;
    margin: 0;
}

.rating li {
    color: #f1c644;
}

.rating li.inactive {
    color: #d9d9d9;
}

.glass-effect {
    background: var(--background-color);
    opacity: 0.9;
}

.glass-effect::before {
    content: "";
    backdrop-filter: blur(11px);
    -webkit-backdrop-filter: blur(11px);
}

#player-container {
    width: 100%;
    height: 100%;
    margin-top: 5rem;
}

#player-bg-artwork {
    position: fixed;
    top: -30px;
    right: -30px;
    bottom: -30px;
    left: -30px;
    background-image: url("https://raw.githubusercontent.com/himalayasingh/music-player-1/master/img/_1.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: 50%;
    filter: blur(40px);
    -webkit-filter: blur(40px);
    z-index: 1;
}

#player-bg-layer {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: #fff;
    opacity: 0.5;
    z-index: 2;
}

#player {
    position: relative;
    height: 100%;
    z-index: 3;
}

#player-track {
    width: auto;
    flex: 1 1 0px;
    height: 100%;
    padding: 13px 10px 10px 13px;
    border-radius: 15px 15px 0 0;
    transition: 0.3s ease top;
    z-index: 1;
}

#album-name {
    color: var(--text-color);
    font-size: 17px;
    font-weight: bold;
}

#track-name {
    color: var(--accent-color);
    font-size: 13px;
    margin: 2px 0 13px 0;
}

#track-time {
    height: 12px;
    margin-bottom: 3px;
    overflow: hidden;
}

#current-time {
    float: left;
}

#track-length {
    float: right;
}

#current-time,
#track-length {
    color: var(--text-color);
    font-size: 11px;
    border-radius: 10px;
    transition: 0.3s ease all;
}

#track-time.active #current-time,
#track-time.active #track-length {
    color: var(--text-color);
    background-color: transparent;
}

#seek-bar-container,
#seek-bar {
    position: relative;
    height: 4px;
    border-radius: 4px;
}

#seek-bar-container {
    background-color: var(--text-color);
    cursor: pointer;
}

#seek-time {
    position: absolute;
    top: -29px;
    color: #fff;
    font-size: 12px;
    white-space: pre;
    padding: 5px 6px;
    border-radius: 4px;
    display: none;
}

#s-hover {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    opacity: 0.2;
    z-index: 2;
}

#seek-time,
#s-hover {
    background-color: #3b3d50;
}

#seek-bar {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 0;
    background-color: var(--accent-color);
    transition: 0.2s ease width;
    z-index: 1;
}

#player-content {
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    gap: 1rem;
    justify-content: flex-start;
    padding: 16px;
    width: 100%;
    background: rgba(24, 21, 24, 0.3);
    backdrop-filter: blur(17.5px);

}

#album-art {
    width: 115px;
    height: 115px;
    transform: rotateZ(0);
    transition: 0.3s ease all;
    border-radius: 50%;
    overflow: hidden;
}

#album-art.active {
    top: -60px;
    box-shadow: 0 0 0 4px #fff7f7, 0 30px 50px -15px #afb7c1;
}

#album-art:before {
    content: "";
    position: absolute;
    top: 50%;
    right: 0;
    left: 0;
    width: 20px;
    height: 20px;
    margin: -10px auto 0 auto;
    background-color: var(--accent-color-3);
    border-radius: 50%;
    box-shadow: inset 0 0 0 2px #fff;
    z-index: 2;
}

#album-art img {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    z-index: -1;
}

#album-art img.active {
    opacity: 1;
    z-index: 1;
}

#album-art.active img.active {
    z-index: 1;
    animation: rotateAlbumArt 3s linear 0s infinite forwards;
}

@keyframes rotateAlbumArt {
    0% {
        transform: rotateZ(0);
    }

    100% {
        transform: rotateZ(360deg);
    }
}

#buffer-box {
    position: absolute;
    top: 50%;
    right: 0;
    left: 0;
    height: 13px;
    color: #1f1f1f;
    font-size: 13px;
    text-align: center;
    font-weight: bold;
    line-height: 1;
    padding: 6px;
    margin: -12px auto 0 auto;
    opacity: 0;
    z-index: 2;
}

#album-art img,
#buffer-box {
    transition: 0.1s linear all;
}

#album-art.buffering img {
    opacity: 0.25;
}

#album-art.buffering img.active {
    opacity: 0.8;
    filter: blur(2px);
    -webkit-filter: blur(2px);
}

#album-art.buffering #buffer-box {
    opacity: 1;
}

#player-controls {
    width: auto;
    display: flex;
    gap: 2rem;
    height: 100%;
    float: right;
    overflow: hidden;
}

.control {
    width: 33.333%;
    float: left;
    padding: 12px 0;
}

.button i {
    display: block;
    color: #d6dee7;
    font-size: 16px;
    text-align: center;
    line-height: 1;
}

.button,
.button i {
    transition: 0.2s ease all;
}

.button:hover i {
    color: var(--background-color);
}

/* ---------------------------- */
/* Accordion                    */
/* ---------------------------- */
.accordion {
    --bs-accordion-bg: transparent;
}

.accordion .accordion-item {
    border: none;
    color: var(--text-color);
}

.accordion-button:focus {
    box-shadow: none;
}

.accordion .accordion-button {
    background-color: transparent;
    font-size: 28px;
    padding-inline: 1rem;
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: row;
    justify-content: start;
    padding-block: 1.2rem;
    color: var(--text-color);
    border-bottom: solid 1px var(--accent-color);
    font-family: var(--font-1);
    gap: 1em;
    padding-left: 0;
    padding-right: 0;
}

.accordion-item:last-of-type .accordion-button.collapsed {
    border-radius: 0px;
}

.accordion .accordion-button::after {
    color: var(--accent-color);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23F5F5F5' class='bi bi-chevron-down' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708'/%3E%3C/svg%3E");
}

.accordion-button:not(.collapsed) {
    color: var(--text-color);
    border-bottom: solid 1px var(--text-color);
}

.accordion .accordion-button:not(.collapsed)::after {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23C9F22C' class='bi bi-chevron-down' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708'/%3E%3C/svg%3E");
}

.accordion .accordion-body {
    background-color: transparent;
    font-size: 16px;
    color: var(--text-color);
    padding-left: 0;
    padding-right: 0;
}

@media only screen and (max-width:1024px) {

    /* ---------------------------- */
    /* Typography                   */
    /* ---------------------------- */
    h1 {
        font-size: 48px;
    }

    h2 {
        font-size: 38px;
    }

    h3 {
        font-size: 28px;
    }

    h4 {
        font-size: 22px;
    }

    h5 {
        font-size: 18px;
    }

    h6 {
        font-size: 14px;
    }

    p,
    button,
    a {
        font-size: 13px;
    }

    .text-banner {
        font-size: 50px;
    }

    .textual-showcase {
        font-size: 40px;
    }

    .cta-text {
        font-size: 40px;
        font-weight: bold;
    }

    .sub-heading {
        font-size: 80px;
        font-style: italic;
    }

    /* ---------------------------- */
    /* Button and Links Setting     */
    /* ---------------------------- */
    .btn {
        font-size: 13px;
        width: 100%;
    }

    .btn-play {
        margin-left: 5rem;
    }

    .btn-play.choose-us {
        margin-top: -27rem;
        margin-left: 18rem;
    }

    /* ---------------------------- */
    /* Header and Navigation Setting  */
    /* ---------------------------- */
    .logo-container {
        max-width: 200px;
        width: 127px; /* 115px + 10% */
    }

    .nav-link {
        padding-block: 0.2rem;
        text-align: center;
    }

    /* Mismo comportamiento que desktop: transparente arriba, fondo solo al hacer scroll (.glass-effect) */
    #header {
        background: transparent;
    }

    #header.glass-effect {
        background: var(--background-color);
        backdrop-filter: blur(11px);
        -webkit-backdrop-filter: blur(11px);
    }

    .offcanvas-fullwidth {
        width: 100vw !important;
        max-width: 100vw;
    }

    /* ---------------------------- */
    /* Utility Classes              */
    /* ---------------------------- */
    .p-banner {
        color: var(--text-color);
    }

    .section {
        padding: 4em 2em 4em 2em;
    }

    .contact-hero-gap {
        padding-top: 150px !important;
    }

    .divider {
        width: 330px;
    }

    .fs-very-large {
        font-size: 3.125rem;
    }

    .text-404 {
        font-size: 8rem;
        font-weight: 700;
    }

    .image-absolute-1 {
        left: 45%;
        top: 35%;
    }

    .image-infinite-bg {
        background-size: cover !important;
    }


    .border-custom {
        border-width: 0px 0px 1px 0px;
    }

    .outer-margin {
        margin-right: 0;
    }

    .banner-image {
        margin: 0;
        transform: none;
    }

    .testimonial-img {
        margin: 0;
        margin-bottom: 1rem;
    }

    .dropdown-menu {
        width: 100%;
        box-shadow: none;
    }

    .video-e119 {
        width: 85%;
        margin-left: -1.5rem;
    }

    .dropdown-item {
        padding-block: 0.35rem;
    }

    .floating-image {
        position: relative;
        display: flex;
        justify-content: end;
        margin-top: -9rem;
    }

    .floating-image-2 {
        display: none;
    }

    .float-img-team {
        margin-top: -20rem;
    }

    .float-icon {
        margin-right: 5rem;
    }

    .floating-price {
        top: -2.5rem;
        right: -7.5rem;
    }

    .floating-heading {
        margin-left: 0;
    }

    .floating-banner {
        top: 0;
        left: 0;
        right: 0;
        margin-right: 1rem;
        margin-left: 1rem;
        margin-top: -10rem;
    }

    .floating-top {
        margin-top: 3rem;
    }

    .floating-testi {
        margin-bottom: 1rem;
        margin-top: 1rem;
        margin-left: 1rem;
        margin-right: 1rem;
    }

    .floating-services {
        position: relative;
        z-index: 9999;
        margin-top: 3rem;
        margin-bottom: 1rem;
    }

    .floating-services-2 {
        margin-left: 0;
    }

    .floating-services-2 .padding {
        padding-left: 3rem;
    }

    .floating-services-3 {
        position: relative;
        margin-top: 1rem;
        margin-bottom: -3rem;
    }

    .floating-services-3 .padding {
        padding-left: 3rem;
        padding-right: 3rem;
    }

    .floating-bottom {
        position: initial;
        top: 0;
        left: 0;
    }

    .floating-bottom-1 {
        position: initial;
        bottom: 0;
        right: 0;
        left: 0;
    }

    .floating-bottom-2 {
        position: initial;
        bottom: 0;
        right: 0;
        left: 0;
        margin-top: 1rem;
    }

    .floating-contact {
        margin-left: 0rem;
    }

    .floating-counter {
        position: relative;
        margin-top: -5rem;
        z-index: 9999;
    }

    .floating-blog {
        margin-top: 0;
    }

    .float-container {
        min-height: 0;
    }

    .border-testimonial {
        border-right: none;
    }

    .service-container {
        background-color: transparent;
        padding: 30px;
        display: flex;
        flex-direction: column;
        gap: 1.75rem;
        box-shadow: 0px 0px 18px 0px rgba(0, 0, 0, 0.1);
        height: 100%;
    }

    .appointment-box {
        top: -2rem;
        bottom: 0;
        left: 0;
        right: 0;
        height: 8rem;
    }

    .w-md-70 {
        width: 70%;
    }

    .w-md-60 {
        width: 60%;
    }

    .position-responsive {
        position: relative;
    }

    .form-appointment-container {
        position: relative;
        transform: translateY(0);
    }

    .input-group {
        max-width: 658px;
        margin: 0 auto;
    }

    .list-flush-horizontal {
        flex-direction: column;
    }

    .list-flush-horizontal .list-item:first-child,
    .list-flush-horizontal .list-item {
        border-right: none;
        border-bottom: 1px solid white;
    }

    .list-flush-horizontal .list-item:last-child {
        border-left: none;
        border-bottom: none;
        border-top: 1px solid white;
    }

    .position-xl-absolute {
        position: static;
    }

    .banner-heading {
        font-size: 2.5rem;
    }

    .tabs.studio {
        display: flex;
        flex-direction: column;
        gap: 1rem;
        position: relative;
        z-index: 2;
        background: rgba(35, 31, 32, 0.3);
        backdrop-filter: blur(17.5px);
        padding: 30px;
        align-items: center;

    }

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

    .tab-content {
        position: relative;
        left: 0;
    }

    .tab-container {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        justify-content: center;
        align-items: center;
    }

    .class-container {
        display: grid;
        grid-template-columns: repeat(1, 1fr);
        justify-content: center;
        align-items: center;
    }

    footer .d-flex.flex-column {
        text-align: center;
        justify-content: center;
        align-items: center;
        margin-bottom: 20px;
        padding: 0 0 0 0;
    }

    footer .link.d-flex.flex-row {
        text-align: center;
        justify-content: center;
        align-items: center;

    }

    footer .list {
        padding: 0 0 0 0;
    }

    .footer {
        position: relative;
    }

    .float-button {
        margin-top: 3rem;
    }

    .float-img {
        position: absolute;
        bottom: 0rem;
        right: 12rem;
    }

    .float-img-3 {
        position: absolute;
        bottom: 0;
        left: 0;
    }

    .float-team {
        position: absolute;
        bottom: 0;
        left: 11.5rem;
    }

    .float-bg-image {
        margin-top: -3rem;
    }

    .float-number {
        margin-left: 15rem;
    }

    .features-container {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: flex-start;
    }

    .swiperImage {
        padding-bottom: 0;
    }

    .service-scroll {
        padding-right: 1rem;
    }

    .swiper-button-next,
    .swiper-button-prev {
        visibility: hidden;
        display: none;
    }

    .swiper-button-next::after,
    .swiper-button-prev::after {
        visibility: hidden;
        display: none;
    }

    .icon-box.link {
        font-size: 25px;
        padding: 25px;
    }

    .tab .content {
        margin-left: 0;
        position: static;
    }

    .line {
        display: none;
    }

    .bg-image>.hero-photo-layer {
        background: url(../image/hero-retrato.jpg) no-repeat 70% 28%;
        background-size: 300px auto;
    }

    .bg-image-about {
        background: url(../image/dummy-img-1920x1280.jpg) no-repeat 27% 35%, url(../image/icon-1.png) no-repeat 106% 11%, url(../image/Image-Background.png) no-repeat center 0%;
        background-size:
            384px auto,
            207px auto,
            1920px 1280px;
    }

    .bg-image-services {
        background: url(../image/dummy-img-1920x1280.jpg) no-repeat 27% 35%, url(../image/icon-1.png) no-repeat 106% 11%, url(../image/Image-Background.png) no-repeat center 0%;
        background-size:
            384px auto,
            207px auto,
            1920px 1280px;
    }

    .bg-image-services-details {
        background: url(../image/dummy-img-1920x1280.jpg) no-repeat 27% 35%, url(../image/icon-1.png) no-repeat 106% 11%, url(../image/Image-Background.png) no-repeat center 0%;
        background-size:
            384px auto,
            207px auto,
            1920px 1280px;
    }

    .bg-image-portfolio {
        background: url(../image/portfolio/clientes-hero.jpg) no-repeat 27% 35%, url(../image/icon-1.png) no-repeat 106% 11%, url(../image/Image-Background.png) no-repeat center 0%;
        background-size:
            384px auto,
            207px auto,
            1920px 1280px;
    }

    .bg-image-portfolio-details {
        background: url(../image/dummy-img-1920x1280.jpg) no-repeat 27% 35%, url(../image/icon-1.png) no-repeat 106% 11%, url(../image/Image-Background.png) no-repeat center 0%;
        background-size:
            384px auto,
            207px auto,
            1920px 1280px;
    }

    .bg-image-team {
        background: url(../image/team/equipo-trabajo.jpg) no-repeat 27% 35%, url(../image/icon-1.png) no-repeat 106% 11%, url(../image/Image-Background.png) no-repeat center 0%;
        background-size:
            384px auto,
            207px auto,
            1920px 1280px;
    }

    .bg-image-pricing {
        background: url(../image/dummy-img-1920x1280.jpg) no-repeat 27% 35%, url(../image/icon-1.png) no-repeat 106% 11%, url(../image/Image-Background.png) no-repeat center 0%;
        background-size:
            384px auto,
            207px auto,
            1920px 1280px;
    }

    .bg-image-faqs {
        background: url(../image/dummy-img-1920x1280.jpg) no-repeat 27% 35%, url(../image/icon-1.png) no-repeat 106% 11%, url(../image/Image-Background.png) no-repeat center 0%;
        background-size:
            384px auto,
            207px auto,
            1920px 1280px;
    }

    .bg-image-blog {
        background: url(../image/dummy-img-1920x1280.jpg) no-repeat 27% 35%, url(../image/icon-1.png) no-repeat 106% 11%, url(../image/Image-Background.png) no-repeat center 0%;
        background-size:
            384px auto,
            207px auto,
            1920px 1280px;
    }

    .bg-image-single-post {
        background: url(../image/dummy-img-1920x1280.jpg) no-repeat 27% 35%, url(../image/icon-1.png) no-repeat 106% 11%, url(../image/Image-Background.png) no-repeat center 0%;
        background-size:
            384px auto,
            207px auto,
            1920px 1280px;
    }

    .bg-image-contact {
        background: url(../image/dummy-img-1920x1280.jpg) no-repeat 27% 35%, url(../image/icon-1.png) no-repeat 106% 15%, url(../image/Image-Background.png) no-repeat center 0%;
        background-size:
            384px auto,
            207px auto,
            1920px 1280px;
    }

    .social-wrapper {
        flex-direction: row;
    }

    .follow-text {
        writing-mode: horizontal-tb;
        transform: rotate(0deg);
        letter-spacing: 3px;
        font-size: 14px;
        font-weight: 500;
        color: #a5a5a5;
        margin: 0;
    }

    .social-icons {
        display: flex;
        flex-direction: row;
        gap: 12px;
        margin-top: 5px;
    }

    .hr-custom {
        margin-top: 0;
    }

    .card-team {
        align-items: center;
        margin-top: 27rem;
    }

    .card-team-detail {
        align-items: center;
        min-height: 30%;
    }

    .card-service {
        max-width: none;
    }
}

@media only screen and (max-width:599px) {
    .bg-image>.hero-photo-layer {
        background: url(../image/hero-retrato.jpg) no-repeat 71% 27%;
        background-size: 280px auto;
    }

    .bg-image-about {
        background: url(../image/dummy-img-1920x1280.jpg) no-repeat 27% 35%, url(../image/icon-1.png) no-repeat 10% 11%, url(../image/Image-Background.png) no-repeat center 0%;
        background-size:
            250px auto,
            150px auto,
            cover;
    }

    .bg-image-services {
        background: url(../image/dummy-img-1920x1280.jpg) no-repeat 27% 35%, url(../image/icon-1.png) no-repeat 10% 11%, url(../image/Image-Background.png) no-repeat center 0%;
        background-size:
            250px auto,
            150px auto,
            cover;
    }

    .bg-image-services-details {
        background: url(../image/dummy-img-1920x1280.jpg) no-repeat 27% 35%, url(../image/icon-1.png) no-repeat 10% 11%, url(../image/Image-Background.png) no-repeat center 0%;
        background-size:
            250px auto,
            150px auto,
            cover;
    }

    .bg-image-portfolio {
        background: url(../image/portfolio/clientes-hero.jpg) no-repeat 27% 35%, url(../image/icon-1.png) no-repeat 10% 11%, url(../image/Image-Background.png) no-repeat center 0%;
        background-size:
            250px auto,
            150px auto,
            cover;
    }

    .bg-image-portfolio-details {
        background: url(../image/dummy-img-1920x1280.jpg) no-repeat 27% 35%, url(../image/icon-1.png) no-repeat 10% 15%, url(../image/Image-Background.png) no-repeat center 0%;
        background-size:
            250px auto,
            150px auto,
            cover;
    }

    .bg-image-team {
        background: url(../image/team/equipo-trabajo.jpg) no-repeat 27% 35%, url(../image/icon-1.png) no-repeat 10% 15%, url(../image/Image-Background.png) no-repeat center 0%;
        background-size:
            250px auto,
            150px auto,
            cover;
    }

    .bg-image-pricing {
        background: url(../image/dummy-img-1920x1280.jpg) no-repeat 27% 35%, url(../image/icon-1.png) no-repeat 10% 15%, url(../image/Image-Background.png) no-repeat center 0%;
        background-size:
            250px auto,
            150px auto,
            cover;
    }

    .bg-image-faqs {
        background: url(../image/dummy-img-1920x1280.jpg) no-repeat 27% 35%, url(../image/icon-1.png) no-repeat 10% 15%, url(../image/Image-Background.png) no-repeat center 0%;
        background-size:
            250px auto,
            150px auto,
            cover;
    }

    .bg-image-blog {
        background: url(../image/dummy-img-1920x1280.jpg) no-repeat 27% 35%, url(../image/icon-1.png) no-repeat 10% 15%, url(../image/Image-Background.png) no-repeat center 0%;
        background-size:
            250px auto,
            150px auto,
            cover;
    }

    .bg-image-single-post {
        background: url(../image/dummy-img-1920x1280.jpg) no-repeat 27% 35%, url(../image/icon-1.png) no-repeat 10% 15%, url(../image/Image-Background.png) no-repeat center 0%;
        background-size:
            250px auto,
            150px auto,
            cover
    }

    .bg-image-contact {
        background: url(../image/dummy-img-1920x1280.jpg) no-repeat 27% 35%, url(../image/icon-1.png) no-repeat 10% 15%, url(../image/Image-Background.png) no-repeat center 0%;
        background-size:
            250px auto,
            150px auto,
            cover;
    }

    .bg-image-404 {
        background: url(../image/icon-14.png) no-repeat 50% 7%, url(../image/icon-9.png) no-repeat 35% 27%, url(../image/icon-1.png) no-repeat -10% 103%, url(../image/icon-15.png) no-repeat 55% 75.5%, url(../image/Image-Background.png) no-repeat center 0%;
        background-size:
            94px auto,
            66px auto,
            207px auto,
            127px auto,
            1920px 1280px;
    }

    .sub-heading {
        font-size: 40px;
        font-style: italic;
    }

    .price-text {
        font-size: 36px;
    }

    .price-text2 {
        font-size: 26px;
    }

    .card-pricing div:has(> .price-text) {
        flex-wrap: wrap;
        row-gap: 4px;
    }

    .textual-showcase-section {
        display: none !important;
    }

    /* Reordena las secciones del home en mobile (solo en index.html,
       main.home-main): hero, Planes, Sobre nosotros, Servicios... */
    main.home-main {
        display: flex !important;
        flex-direction: column !important;
    }

    main.home-main .bg-image {
        order: 1 !important;
    }

    main.home-main .sec-planes {
        order: 2 !important;
    }

    main.home-main .sec-about {
        order: 3 !important;
    }

    main.home-main .sec-portfolio {
        order: 4 !important;
    }

    main.home-main .sec-services {
        order: 5 !important;
    }

    main.home-main .textual-showcase-section {
        order: 6 !important;
    }

    main.home-main .sec-faqs {
        order: 7 !important;
    }

    main.home-main .sec-cta {
        order: 8 !important;
    }

    .pills-grid {
        display: none !important;
    }

    .marquee-container.pills-marquee {
        display: flex !important;
    }

    .float-icon {
        margin-right: 0;
    }

    .info-tooltip-text {
        left: auto !important;
        right: -10px !important;
        transform: none !important;
        width: 200px !important;
        max-width: calc(100vw - 4rem);
    }

    /* Los hipervínculos sueltos se ven poco claros como call-to-action en
       mobile — se convierten en botón outline (mismo look que .btn-accent-3.cta). */
    .inline-link-btn {
        display: inline-block;
        width: max-content;
        max-width: 100%;
        text-decoration: none !important;
        border: 2px solid var(--text-color);
        border-radius: 10px;
        padding: 8px 20px;
        margin-top: 4px;
    }

    /* La sección Servicios quedaba muy apretada: el marquee de píldoras
       pegado al listado, y cada fila sin padding vertical propio. */
    .pills-marquee {
        margin-bottom: 2rem !important;
    }

    .navigation {
        padding-block: 18px;
    }

    /* Las rayas decorativas bajo los títulos con degradado (.text-accent)
       estaban calculadas para el tamaño de fuente de desktop (140px) y
       quedaban mal ubicadas/gigantes con el font-size de mobile (40px). */
    .text-accent::after {
        bottom: 14px;
        height: 2px;
    }

    /* Las respuestas del FAQ no tenían padding interno y el texto quedaba
       pegado a los bordes de la pantalla. */
    .accordion .accordion-body {
        padding: 12px 4px 0;
        font-size: 15px;
    }

    /* La tarjeta del CTA final (¿Listo para una página...) solo tenía
       padding vertical (7rem 0 inline) — el título queda pegado a los
       bordes de la tarjeta en mobile porque no forma parte del grid de
       columnas que le da margen al párrafo. Transversal: index.html y
       contact-us.html comparten esta misma tarjeta. */
    .cta-card {
        padding-inline: 1.5rem !important;
    }

    /* Los títulos fantasma con degradado (SERVICIOS, CLIENTES, PREGUNTAS...)
       usan un "top" negativo inline (ej. -4%, -5%) pensado para desktop.
       En mobile ese offset los empuja fuera del borde superior de su
       sección, y como .section tiene overflow:hidden quedan cortados o
       invisibles. Se ancla al borde superior del contenedor. */
    .sub-heading.position-absolute {
        top: 0 !important;
    }

    /* La rayita morada antes de los títulos usa width:100px inline,
       pensada para desktop — se ve desproporcionada en mobile. */
    .border-bottom.border-accent {
        width: 50px !important;
    }

    /* Títulos/párrafos con max-width inline en % (55-73%), pensado para
       pantallas anchas. En mobile eso angosta mucho el bloque de texto
       y se ve como padding de más a los costados. Transversal a
       cualquier texto con max-width inline, no solo los centrados. */
    [style*="max-width"] {
        max-width: 92% !important;
    }

    /* El texto de párrafo se sentía chico en mobile. */
    p {
        font-size: 18px;
    }

    /* Los botones usan un font-size propio, más chico que el párrafo
       en mobile — se parejan para que no se vean en desventaja. */
    .btn {
        font-size: 18px !important;
    }

    /* "Cómo trabajamos" sobra al lado de "Conócenos más" en mobile. */
    a[href="team.html"].inline-link-btn {
        display: none !important;
    }

    /* "Ver todos los clientes" sobra en mobile, cada card ya tiene su
       propio botón "Ver Web" dentro del overlay. */
    a[href="portfolio.html"].inline-link-btn {
        display: none !important;
    }

    /* El overlay de las tarjetas de proyectos (año, título, descripción,
       Ver Web) solo se mostraba con :hover — en mobile no hay hover real,
       así que queda un estado "pegado" a medio camino, mezclado con la
       imagen de fondo. Se deja siempre visible, con fondo más liviano
       para que se note más la imagen detrás, y solo con año/título/Ver Web
       (se saca solo la descripción para simplificar y que no queden
       espaciados dispares entre tarjetas con distinto largo de texto). */
    .image-overlay {
        transform: scaleY(1) !important;
        background: rgba(5, 5, 10, 0.55) !important;
    }

    .card-overlay-desc {
        display: none !important;
    }

    .float-bg-image {
        margin-top: 0;
    }

    .float-number {
        margin-left: 0;
    }

    .btn-play {
        margin-left: 0;
    }

    .btn-play.about-us {
        display: none;
    }

    .btn-play.choose-us {
        margin-top: -6rem;
        margin-left: 8rem;
    }

    .marquee-container {
        display: none !important;
    }

    .card-team {
        align-items: center;
        margin-top: 15rem;
    }

    .card-team-detail {
        align-items: center;
        min-height: 50%;
    }

    .float-img-team {
        margin-top: -12rem;
    }

    .tab-container {
        display: grid;
        grid-template-columns: repeat(1, 1fr);
        justify-content: center;
        align-items: center;
    }

    .gap-about {
        gap: .5rem;
    }

    .process-icon {
        display: none;
    }

    .icon-box-4 {
        padding: 12px;
    }

    .icon-box-4 i {
        font-size: 20px;
    }
}

/* Tooltip de info en las tarjetas de planes */
.info-tooltip {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background-color: var(--text-color-2);
    color: var(--background-color);
    font-size: 12px;
    font-weight: bold;
    font-style: italic;
    cursor: help;
    flex-shrink: 0;
}

.info-tooltip-text {
    visibility: hidden;
    opacity: 0;
    position: absolute;
    bottom: 135%;
    left: 50%;
    transform: translateX(-50%);
    background-color: var(--color-3);
    color: var(--background-color);
    padding: 10px 14px;
    border-radius: 8px;
    width: 220px;
    font-size: 13px;
    font-style: normal;
    font-weight: normal;
    line-height: 1.4;
    transition: opacity .2s ease;
    z-index: 20;
    pointer-events: none;
}

.info-tooltip:hover .info-tooltip-text {
    visibility: visible;
    opacity: 1;
}

/* Toggle "Ver más / Ver menos" en las tarjetas de planes (usa .collapsed que
   Bootstrap ya agrega/quita solo, sin JS propio) */
.plan-toggle {
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: .4rem;
}

.plan-toggle .text-more,
.plan-toggle .text-less {
    display: none;
}

.plan-toggle.collapsed .text-more {
    display: inline;
}

.plan-toggle:not(.collapsed) .text-less {
    display: inline;
}

.plan-toggle i {
    transition: transform .3s ease;
}

.plan-toggle:not(.collapsed) i {
    transform: rotate(180deg);
}

/* Animaciones de scroll 25% más rápidas (duración original x0.75).
   Selector compuesto .scrollanimation.adr-N para ganarle en especificidad
   a animation_utility.css del CDN, que solo usa .adr-N. */
.scrollanimation.adr-1 { animation-duration: 0.225s; }
.scrollanimation.adr-2 { animation-duration: 0.45s; }
.scrollanimation.adr-3 { animation-duration: 0.675s; }
.scrollanimation.adr-4 { animation-duration: 0.9s; }
.scrollanimation.adr-5 { animation-duration: 1.125s; }
.scrollanimation.adr-6 { animation-duration: 1.35s; }
.scrollanimation.adr-7 { animation-duration: 1.575s; }
.scrollanimation.adr-8 { animation-duration: 1.8s; }
.scrollanimation.adr-9 { animation-duration: 2.025s; }

/* La sección "Textual Showcase" (home) se sentía lenta con el stagger
   de 4 frases — 30% más rápido solo ahí, sin tocar adr-9/adl-N
   globales usados en otras secciones. */
.textual-showcase-section .scrollanimation.adr-9 { animation-duration: 1.4175s !important; }
.textual-showcase-section .adl-2 { animation-delay: 0.42s !important; }
.textual-showcase-section .adl-4 { animation-delay: 0.84s !important; }
.textual-showcase-section .adl-6 { animation-delay: 1.26s !important; }

/* La animación arranca pausada (congelada en su primer frame, ej.
   opacity:0 para fadeIn*) y js/scroll-reveal.js la deja correr una sola
   vez cuando el elemento entra al viewport por primera vez. Así se
   "descubre" al scrollear en vez de dispararse todo de una al cargar. */
.scrollanimation {
    animation-play-state: paused;
}

.scrollanimation.in-view {
    animation-play-state: running;
}
/* Hero del inicio: titular a la izquierda + dibujo a mano (SVG propio)
   a la derecha. Las capas de fotos/overlay/degrade quedan debajo. */
.hero-gf {
    --edge-pad: clamp(1.25rem, 3vw, 3.5rem);
    min-height: 80vh;
    display: flex;
    align-items: center;
    padding-top: 7rem;
    padding-bottom: 11rem;
    padding-left: calc(var(--edge-pad) + 12px);
    padding-right: var(--edge-pad);
}

.hero-gf__eyebrow {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin: 0 0 1.5rem;
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 0.2em;
    color: var(--text-color);
}

.hero-gf__eyebrow span {
    width: 70px;
    height: 1px;
    background: var(--text-color);
}

.hero-gf__title {
    font-size: clamp(2.6rem, 5.6vw, 5.2rem);
    font-weight: 600;
    font-style: normal;
    line-height: 1.05;
    letter-spacing: -0.02em;
    margin: 0 0 1.5rem;
}

.hero-gf__lead {
    max-width: 36rem;
    font-size: 1.2rem;
    line-height: 1.6;
    opacity: 0.85;
    margin: 0 0 2rem;
}

.hero-gf__art svg {
    display: block;
    width: 100%;
    max-width: 620px;
    margin-left: auto;
    overflow: visible;
}

.hero-gf__art path,
.hero-gf__art circle {
    stroke: var(--accent-color);
    stroke-width: 5;
}

.hero-gf__art .lime {
    stroke: #C9F23B;
}

.hero-gf__art .fill {
    fill: #C9F23B;
}

.hero-gf__art .phone {
    fill: rgba(1, 2, 69, 0.88);
}

.hero-gf__art .dr {
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
    animation: heroDraw 1.1s ease-out forwards;
    animation-delay: var(--d, 0s);
}

@keyframes heroDraw {
    to {
        stroke-dashoffset: 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .hero-gf__art .dr {
        animation: none;
        stroke-dashoffset: 0;
    }
}

@media (max-width: 991px) {
    .hero-gf {
        padding-top: 8rem;
        padding-bottom: 9rem;
    }

    .hero-gf__art svg {
        max-width: 420px;
        margin: 0 auto;
    }
}

/* Heros de Equipo y Clientes: misma diagramación que el inicio, con una
   sola foto de fondo (sin slideshow). */
.hero-bg-slideshow.static .hero-bg-slide {
    opacity: 1;
    animation: none;
}

.hero-bg-slideshow.static~.hero-bg-overlay {
    background: rgba(1, 2, 69, 0.68);
}

/* Footer: círculo "Escribe y resolvemos" (enlace a Contacto) */
a.btn-play.footer {
    text-decoration: none;
    text-align: center;
}

.btn-play.footer .btn-play__text,
.btn-play.footer .btn-play__text>span {
    text-align: center;
}

footer a.text-color-2:hover {
    color: var(--text-color) !important;
}

/* Páginas legales (términos y privacidad) */
.legal {
    padding-top: 9rem;
    padding-bottom: 6rem;
}

.legal__wrap {
    padding-left: calc(var(--edge-pad, clamp(1.25rem, 3vw, 3.5rem)) + 12px);
    padding-right: var(--edge-pad, clamp(1.25rem, 3vw, 3.5rem));
}

.legal__content {
    max-width: 820px;
}

.legal__crumbs {
    display: flex;
    gap: 0.6rem;
    margin-bottom: 1.5rem;
    font-size: 0.9rem;
    color: var(--text-color-2);
}

.legal__crumbs a {
    font-size: inherit;
    color: var(--text-color-2);
    text-decoration: none;
}

.legal__crumbs a:hover {
    color: var(--text-color);
}

.legal__title {
    font-size: clamp(2.2rem, 4.5vw, 4rem);
    font-weight: 600;
    font-style: normal;
    line-height: 1.1;
    margin: 0 0 0.75rem;
}

.legal__sub {
    font-size: 1.3rem;
    margin: 0 0 0.5rem;
}

.legal__updated {
    color: var(--text-color-2);
    font-size: 0.95rem;
    margin: 0 0 2rem;
}

.legal__intro {
    font-size: 1.1rem;
    line-height: 1.75;
    padding-bottom: 2rem;
    margin: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.15);
}

.legal__block {
    padding: 1.75rem 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.legal__block h2 {
    font-size: 1.3rem;
    font-weight: 600;
    font-style: normal;
    margin: 0 0 0.75rem;
    color: var(--accent-color);
}

.legal__block p,
.legal__block li {
    font-size: 1.05rem;
    line-height: 1.75;
    color: var(--text-color);
    opacity: 0.92;
}

.legal__block p {
    margin: 0 0 0.75rem;
}

.legal__block ul {
    padding-left: 1.25rem;
    list-style: disc;
    margin: 0 0 0.75rem;
}

.legal__block li {
    margin-bottom: 0.5rem;
}

.legal__block a,
.legal__also a {
    color: var(--accent-color);
}

.legal__callout {
    margin-top: 1rem;
    padding: 1rem 1.25rem;
    border-left: 4px solid var(--accent-color);
    background: rgba(192, 146, 241, 0.1);
    border-radius: 0 8px 8px 0;
    line-height: 1.7;
}

.legal__also {
    margin: 2rem 0 0;
    color: var(--text-color-2);
}

/* Sección "Sobre nosotros" y proceso en Equipo */
a.btn-play {
    text-decoration: none;
    text-align: center;
}

.process-img {
    aspect-ratio: 3 / 2;
    object-fit: cover;
    width: 100%;
    max-width: 486px;
}

/* Títulos decorativos de fondo (.sub-heading con degradado): la caja es
   más baja que las letras y el degradado recortaba la parte de arriba.
   Se agrega espacio arriba y se compensa con margen negativo para que
   el texto y su raya inferior queden donde estaban. */
.sub-heading.text-accent {
    padding-top: 0.25em;
    margin-top: -0.25em;
}

/* ---------------------------------------------------------------
   Ritmo vertical transversal (2026-10-08): +25% de espacio entre
   secciones y composición única para los títulos con texto decorativo
   de fondo (.sub-heading): el texto va arriba, completo, y el titular
   parte justo debajo de su raya, sin montarse encima.
   --------------------------------------------------------------- */
:root {
    --section-gap: 7.5em;
    --watermark-clearance: 5rem;
}

main .section:not(.bg-image):not(.legal) {
    padding-top: var(--section-gap);
    padding-bottom: var(--section-gap);
}

main .section:has(.sub-heading.position-absolute):not(.bg-image) {
    padding-top: calc(var(--section-gap) + var(--watermark-clearance));
}

.sub-heading.text-accent.position-absolute {
    top: 0 !important;
}

@media only screen and (max-width: 1024px) {
    :root {
        --section-gap: 5em;
        --watermark-clearance: 2rem;
    }
}

@media only screen and (max-width: 599px) {
    :root {
        --watermark-clearance: 0rem;
    }
}

/* Contacto no tiene hero: parte justo bajo el header fijo, así que el
   texto decorativo y el contenido se desplazan la altura del header. */
:root {
    --header-h: 7rem;
}

.contact-hero-gap {
    padding-top: calc(var(--section-gap) + var(--watermark-clearance) + var(--header-h)) !important;
}

.contact-hero-gap .sub-heading.text-accent.position-absolute {
    top: var(--header-h) !important;
}

@media only screen and (max-width: 1024px) {
    :root {
        --header-h: 6rem;
    }
}

/* Heros de casos: las fotos son capturas de los sitios (con texto propio),
   así que el overlay es más denso para que no compita con el titular. */
.hero-bg-slideshow.static.case-shot~.hero-bg-overlay {
    background: rgba(1, 2, 69, 0.86);
}

/* Tiras de logos del hero: ocultas por ahora (faltan logos de clientes).
   Para volver a mostrarlas, borrar esta regla. El hero recupera su
   espacio inferior para que el degradé cierre limpio sin las tiras. */
.bg-image>.accent-primary {
    display: none !important;
}

.hero-gf {
    padding-bottom: 6rem;
}

@media (max-width: 991px) {
    .hero-gf {
        padding-bottom: 5rem;
    }
}

/* Planes: tarjetas parejas, lista completa y botón anclado abajo */
.sec-planes .plan-card {
    width: 100%;
    justify-content: flex-start;
    gap: 1.5rem;
}

.sec-planes .plan-card:hover {
    transform: translateY(-8px);
}

.sec-planes .plan-card .card-pricing-detail p {
    line-height: 1.35;
}

.sec-planes .plan-cta {
    margin-top: auto;
    padding-top: 0.5rem;
}

.sec-planes .plan-cta .btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    width: 100%;
    border-radius: 999px;
}

.sec-planes .bg-accent-color-4 .plan-cta .btn {
    background: var(--accent-color);
    border-color: var(--accent-color);
    color: var(--background-color);
}

.sec-planes .bg-accent-color-4 .plan-cta .btn i {
    color: var(--background-color);
}

/* Planes: textos de cabecera más compactos y botón bajo el precio */
.sec-planes .plan-card h4 {
    font-size: 1.6rem;
    margin: 0;
}

.sec-planes .plan-card .price-text {
    font-size: 2.6rem;
    line-height: 1.1;
}

.sec-planes .plan-card .price-text+span {
    font-size: 0.85rem;
    padding-bottom: 0.4rem;
    padding-left: 0.35rem;
}

.sec-planes .plan-card p {
    font-size: 0.95rem;
}

.sec-planes .plan-cta {
    margin-top: 0;
    padding-top: 0;
}

/* Título de Planes en una sola línea en escritorio */
.plans-title {
    max-width: none;
}

@media (min-width: 768px) {
    .plans-title {
        white-space: nowrap;
    }
}

/* Menú hamburguesa abierto (o animándose): el header necesita fondo para que los links se lean */
#header:has(.navbar-collapse.show),
#header:has(.navbar-collapse.collapsing) {
    background: var(--background-color);
    backdrop-filter: blur(11px);
    -webkit-backdrop-filter: blur(11px);
}

/* Título h1 con el tamaño visual de un h3 (contacto) */
.title-h3 {
    font-size: 56px;
}

@media only screen and (max-width: 1024px) {
    .title-h3 {
        font-size: 28px;
    }
}

/* Dropdown propio del formulario (reemplaza al select nativo) */
.custom-select {
    position: relative;
}

.custom-select__btn {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    background: transparent;
    border: none;
    border-bottom: 1px solid var(--text-color-2);
    padding: 1rem 1.5rem 0.6rem;
    color: var(--text-color-2);
    font-family: var(--font-1);
    font-size: 1rem;
    text-align: left;
}

.custom-select__btn .custom-select__label.has-value {
    color: var(--accent-color);
}

.custom-select__btn i {
    transition: transform 0.2s ease;
}

.custom-select.is-open .custom-select__btn,
.custom-select__btn:focus-visible {
    outline: none;
    border-bottom-color: var(--accent-color);
}

.custom-select.is-open .custom-select__btn i {
    transform: rotate(180deg);
}

.custom-select__list {
    position: absolute;
    z-index: 20;
    left: 0;
    right: 0;
    top: calc(100% + 0.5rem);
    margin: 0;
    padding: 0.5rem;
    list-style: none;
    background: var(--background-color);
    border: 1px solid var(--accent-color-2);
    border-radius: 0.75rem;
    box-shadow: 0 1rem 2rem rgba(0, 0, 0, 0.45);
}

.custom-select__list[hidden] {
    display: none;
}

.custom-select__list li {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 1rem;
    padding: 0.8rem 1rem;
    border-radius: 0.5rem;
    color: var(--text-color);
    cursor: pointer;
}

.custom-select__list li small {
    color: var(--text-color-2);
    font-size: 0.8rem;
}

.custom-select__list li.is-active {
    background: var(--color-1);
}

.custom-select__list li.is-selected {
    color: var(--accent-color);
}

.custom-select.is-invalid .custom-select__btn {
    border-bottom-color: #dc3545;
}

.custom-select.is-invalid .invalid-feedback {
    display: block;
}

/* Correo del footer oculto por ahora (conserva el espacio para no mover el logo).
   Para volver a mostrarlo: borrar esta regla. */
.footer-email {
    visibility: hidden;
}