/* 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, Footer 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/bubblegum-sans/stylesheet.css');
@import url('../css/vendor/inter/stylesheet.css');

/* ===== MOBILE ONLY STYLES ===== */
@media (max-width: 767.98px) {

  /* Move the image section (scrollanimation) down on mobile */
  .scrollanimation {
    margin-top: 50px !important;
  }
  

  /* Counter section (15+, 30+, 95%, 20+) spacing */
  .section.pt-0 {
    margin-top: 50px !important;   /* adjust up/down as you like */
  }

  /* Center the counter "table" */
  .section.pt-0 .r-container {
    display: flex !important;
    justify-content: center !important;
  }

  .section.pt-0 .row {
    width: 100%;
    max-width: 350px;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  /* Franchisee slider (Our Franchisee) */

  /* reduce side padding so logos are visible */
  .section .r-container .position-relative {
    padding-inline: 1rem !important;   /* was 5rem */
  }

  /* prevent logo cards from being clipped */
  .section .r-container .overflow-hidden {
    overflow: visible !important;
  }

  /* center each logo slide */
  .swiperPartner .swiper-slide {
    display: flex;
    justify-content: center;
  }

  .swiperPartner .partner {
    margin: 0 auto;
    padding: 1rem 0 !important;
  }

  /* arrows farther apart on mobile */
  .swiper-button-next {
    right: 10px !important;
  }

  .swiper-button-prev {
    left: 10px !important;
  }

  /* bigger logo images on mobile */
  .partner img {
    width: 160px !important;
    height: auto !important;
  }
}
testimonial card auto-height, full-width, and nicely spaced */
  .testimonial-container {
    height: auto !important;
    width: 100% !important;
    margin: 0 auto 1.5rem auto !important;  /* space between cards */
  }

  /* Optional: reduce padding a bit for mobile */
  .testimonial-container.card {
    padding: 1.5rem !important;
  }
/* MOBILE: testi/* ===== MOBILE: fix testimonials section ===== */
    /* remove fixed height */
    max-height: 260px !important;  /* control size */
    object-fit: cover;@media (max-width: 767.98px) {

  /* Let the list of testimonials grow naturally (no inner scroll area) */
  .service-scroll {
    max-height: none !important;
    height: auto !important;
    overflow: visible !important;
  }

  /* Make each monials – no inner scrollbar, cards auto-height */

  .service-scroll {
    max-height: none !important;
    height: auto !important;
    overflow: visible !important;
  }

  .testimonial-container {
    height: auto !important;
    width: 100% !important;
    margin: 0 auto 1.5rem auto !important;
  }

  .testimonial-container.card {
    padding: 1.5rem !important;
  }

  /* quote icon absolute positioning – this is fine */
 
 
  /* Position the quote icon neatly inside the card */
  .testimonial-container i.rtmicon-blockquote {
    position: absolute;
    right: 16px !important;      /* move inward */
    bottom: 16px !important;     /* lift upward */
    font-size: 36px !important;  /* perfect size for mobile */
    opacity: 0.35;               /* softer */
  }

  /* Make the parent a positioned container */
  .testimonial-container .d-flex.flex-row.gap-2.justify-content-between {
    position: relative;
    padding-bottom: 20px;        /* ensure icon doesn’t overlap */
  }
  @media (max-width: 767.98px) {

  /* Fix purple container padding on mobile */
  .section .bg-accent-color {
    padding: 2rem 1.5rem !important;
  }

  /* Make the image mobile-friendly */
  .section .bg-accent-color img {
    width: 100% !important;
    height: auto !important;   
    border-radius: 20px !important;
  }

  /* Add some space between image and text */
  .section .row .col:nth-child(1) {
    margin-bottom: 1.5rem !important;
  }

  /* Make heading smaller & better spaced on mobile */
  .section .bg-accent-color h3 {
    font-size: 1.6rem !important;
    line-height: 1.3 !important;
  }

  /* Make paragraph more compact */
  .section .bg-accent-color p {
    font-size: 0.95rem !important;
    line-height: 1.45 !important;
  }

  /* Center the button + reduce width */
  .section .bg-accent-color .btn {
    font-size: 0.9rem !important;
    padding: 0.6rem 1rem !important;
    margin: 0 auto;
  }

  .icon-box-3 {
    transform: scale(0.85) !important;  /* shrink phone icon */
  }
}
/* ===== CTA CARD – MOBILE ONLY ===== */

  /* overall section padding */
  .section.scrollanimation.animated.zoomIn {
    padding: 2rem 0 !important;
  }

  /* make the purple card like a phone card, centered */
  .section.scrollanimation.animated.zoomIn .r-container {
    max-width: 410px;
    margin: 0 auto;
  }

  .section.scrollanimation.animated.zoomIn .bg-accent-color {
    padding: 2.5rem 1.8rem !important;
    border-radius: 32px !important;
  }

  /* make sure it’s strictly one column */
  .section.scrollanimation.animated.zoomIn .row {
    flex-direction: column;
  }

  .section.scrollanimation.animated.zoomIn .row > .col {
    width: 100%;
  }

  /* IMAGE – same feel as your first screenshot */
  .section.scrollanimation.animated.zoomIn .bg-accent-color img {
    display: block;
    width: 100% !important;
    height: 190px !important;     /* tweak 180–210px if needed */
    object-fit: cover;
    border-radius: 24px !important;
    margin-bottom: 1.6rem;
  }

  /* TEXT */
  .section.scrollanimation.animated.zoomIn h3 {
    font-size: 1.6rem !important;
    line-height: 1.3 !important;
    margin-bottom: 0.75rem;
  }

  .section.scrollanimation.animated.zoomIn p {
    font-size: 0.95rem !important;
    line-height: 1.45 !important;
    margin-bottom: 1.8rem;
  }

  /* BUTTON – centered at the bottom like in the screenshot */
  .section.scrollanimation.animated.zoomIn .w-max-content {
    width: 100%;
    display: flex;
    justify-content: center;
  }

  .section.scrollanimation.animated.zoomIn .btn {
    font-size: 0.9rem !important;
    padding: 0.6rem 1.3rem !important;
  }

  .section.scrollanimation.animated.zoomIn .icon-box-3 {
    transform: scale(0.9) !important;
  }
}





/* DESKTOP: testimonials – fixed-height column with scrollbar */
@media (min-width: 768px) {
  .service-scroll {
    max-height: 480px;      /* or whatever height you had before */
    overflow-y: auto;
  }

  .testimonial-container {
    height: 220px;          /* example – use the height you used before */
  }
}




/* ---------------------------- */
/* 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 {
    --primary: #FBF8FF;
    --text-color: #0B0118;
    --text-color-2: #453F4E;
    --background-color: #F3EBFF;
    --accent-color: #4B0081;
    --accent-color-2: #FFB804;
    --accent-color-3: #DEC8FE;
    --accent-color-4: #F7F1FF;
    --accent-color-5: #FEFEFE;
    --accent-color-6: #FF854B;
    --accent-color-7: #FFEFC6;
    --accent-color-8: #89C0FF;
    --accent-color-9: #43A574;
    --accent-color-10: #89C0FF;
    --accent-color-11: #FF9587;
    --accent-color-12: #F0F0F0;
    --accent-color-13: #9a390b;
    --accent-color-14: #8a670e;
    --accent-color-15: #1b593a;
    --accent-color-16: #436994;
    --accent-color-17: #87443b;
    --font-1: "Poppins", sans-serif;
    --font-2: "Bubblegum Sans", sans-serif;
    --font-3: "Inter", sans-serif;

}


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


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

h2 {
    font-size: 62px;
}


h3 {
    font-size: 48px;
    font-weight: 500;
}

h4 {
    font-size: 28px;
}

h5 {
    font-size: 24px;
}

h6 {
    font-size: 22px;
    font-family: var(--font-2);
}

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

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

ul {
    list-style: none;
}

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

li {
    font-size: 16px;
}

img {
    object-fit: cover;
}

.text-accent {
    background: linear-gradient(90deg, #01C7F3 0%, #003642 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

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

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

.testimonial-text {
    font-size: 20px;
    font-style: italic;
    font-family: var(--font-3);
}

.testimonial-name {
    font-size: 18px;
    font-family: var(--font-3);
    color: var(--accent-color);
}

.small-text {
    font-size: 12px;
    font-family: var(--font-3);
}

.brush1 {
    position: relative;
    display: inline-block;
    padding-bottom: 20px;
}

.brush1::before {
    content: "";
    background: url('../image/Asset1.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-bottom: 25px;
}

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

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

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

.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-label {
    font-size: 24px;
}

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

.form.contact input,
.form.contact select {
    background-color: transparent;
    border-radius: 20px;
    color: var(--text-color-2);
    border: 1px solid var(--accent-color);
    outline: none;
    font-family: var(--font-3);
}

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

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

.form.contact input::placeholder,
.form.contact textarea::placeholder {
    color: var(--accent-color);
    font-family: var(--font-3);
}

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

.form.contact .submit_form:hover {
    background-color: transparent;
    color: var(--accent-color);
    border: solid 1px var(--accent-color);
}

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

.form input,
.form select {
    background-color: transparent;
    border-radius: 20px;
    color: var(--text-color-2);
    border: 1px solid var(--primary);
    outline: none;
    font-family: var(--font-3);
}

.form input.subscribe {
    background-color: var(--text-color);
}

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

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

.form input::placeholder,
.form textarea::placeholder {
    color: var(--primary);
    font-family: var(--font-3);
}

.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: transparent;
    color: var(--primary);
    border-radius: 20px;
    border: solid 1px var(--primary);
}


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

.submit_form-subscribe {
    padding-inline: 2rem;
    padding-block: 0.7rem;
    text-decoration: none;
    transition: all 0.5s;
    color: white;
    background-color: transparent;
    border-radius: 5px;
}

.submit_appointment {
    padding-inline: 3rem;
    padding-block: 0.7rem;
    text-decoration: none;
    transition: all 0.5s;
    color: var(--primary);
    background-color: transparent;
    border-radius: 5px;
}

.submit_form-subscribe:hover {
    background-color: transparent;
    color: white;
    filter: none;
}

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


/* =========================
   HEADER
========================= */
#header {
    transition: all 0.4s ease;
}

/* =========================
   LOGO
========================= */

/*for mobile view*/
.logo-container {
    max-width: 200px;
    margin-left: 0;
}
/*for desktop view*/
@media (min-width: 1200px) {
    .logo-container {
        margin-left: 100px;
    }
}


/* =========================
   NAVBAR BASE
========================= */
.navbar {
    background-color: #4b0081 !important; /* Purple */
}

/* =========================
   NAV LINKS (MAIN MENU)
========================= */
.navbar .nav-link {
    font-size: 18px;
    font-family: var(--font-3);
    color: #ffffff;               /* Default WHITE */
    padding: 0.5rem 1.2rem;
    border-radius: 999px;
    text-align: center;
    transition: all 0.25s ease;
}

/* HOVER → white background + PURPLE text */
.navbar .nav-link:hover {
    background-color: #ffffff !important;
    color: #4b0081 !important;
}

/* FOCUS / DROPDOWN OPEN */
.navbar .nav-link:focus,
.navbar .nav-link.show {
    background-color: #ffffff !important;
    color: #4b0081 !important;
}

/* ACTIVE PAGE */
.navbar .nav-link.active {
    background-color: #ffffff !important;
    color: #4b0081 !important;
}

/* 🔒 DISABLE HOVER CHANGE WHEN ACTIVE */
.navbar .nav-link.active:hover {
    background-color: #ffffff !important;
    color: #4b0081 !important;
    cursor: default;
}

/* =========================
   GET IN TOUCH BUTTON
========================= */
.btn.btn-accent-outline {
    background-color: #4b0081;
    color: #ffffff;
    border: 2px solid #ffffff;
    border-radius: 999px;
    transition: all 0.25s ease;
}

/* Icon */
.btn.btn-accent-outline i {
    color: #ffffff;
}

/* Hover → white bg + purple text */
.btn.btn-accent-outline:hover {
    background-color: #ffffff !important;
    color: #4b0081 !important;
}

.btn.btn-accent-outline:hover i {
    color: #4b0081 !important;
}

/* 🔒 ACTIVE PAGE (Get in Touch) — LOCK */
.btn.btn-accent-outline.active,
.btn.btn-accent-outline.active:hover {
    background-color: #ffffff !important;
    color: #4b0081 !important;
    border-color: #ffffff !important;
    cursor: default;
}

.btn.btn-accent-outline.active i,
.btn.btn-accent-outline.active:hover i {
    color: #4b0081 !important;
}

/* =========================
   NAVBAR TOGGLER
========================= */
.navbar-toggler {
    border: none;
    color: #ffffff;
}

.navbar-toggler:focus {
    box-shadow: none;
}

/* =========================
   DROPDOWN MENU
========================= */
.dropdown-menu {
    background-color: #ffffff;
    border: none;
    box-shadow: 0 8px 24px rgba(0,0,0,0.25);
}

.dropdown-item {
    color: #4b0081;
    background-color: #ffffff;
    text-align: center;
    padding: 0.75rem;
}

/* Dropdown hover */
.dropdown-item:hover,
.dropdown-item.active {
    background-color: #4b0081;
    color: #ffffff;
}



/* to change the menus to little left side*/

@media (min-width: 1200px) {
    .navbar-nav {
        transform: translateX(-140px); /* adjust value */
    }

    .navbar-collapse > div {
        transform: translateX(-140px); /* moves Get in Touch too */
    }
}





/* =====================================
   GET IN TOUCH BUTTON – FINAL FIX
===================================== */

/* Base (default state) */
.navbar .btn-accent-outline {
    background: transparent !important;
    border: 2px solid #ffffff !important;
    color: #ffffff !important;
    border-radius: 999px;
    box-shadow: none !important;
    transition: all 0.25s ease;
}

/* Text */
.navbar .btn-accent-outline span {
    color: #ffffff !important;
}

/* Icon container */
.navbar .btn-accent-outline .icon-box-2 {
    width: 40px;
    height: 40px;
    background-color: #ffffff !important;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Icon */
.navbar .btn-accent-outline .icon-box-2 i {
    color: #4b0081 !important;
}

/* -------------------------------
   HOVER (ONLY WHEN NOT ACTIVE)
-------------------------------- */
.navbar .btn-accent-outline:hover:not(.active),
.navbar .btn-accent-outline:focus:not(.active) {
    background-color: #ffffff !important;
    color: #4b0081 !important;
}

.navbar .btn-accent-outline:hover:not(.active) span {
    color: #4b0081 !important;
}

/* -------------------------------
   ACTIVE PAGE (STAYS WHITE)
-------------------------------- */
.navbar .btn-accent-outline.active {
    background-color: #ffffff !important;
    border-color: #ffffff !important;
    color: #4b0081 !important;
}

.navbar .btn-accent-outline.active span {
    color: #4b0081 !important;
}

/* Prevent Bootstrap focus glow */
.navbar .btn-accent-outline:focus,
.navbar .btn-accent-outline:active {
    box-shadow: none !important;
    outline: none !important;
}















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

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


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

.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-color-5 {
    background-color: var(--accent-color-5);
}

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

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

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

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

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

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

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

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

}

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

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

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

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

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

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

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

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

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

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

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

.border-accent-2 {
    border-color: var(--accent-color) !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);
}

.custom-border {
    border-width: 15px 0 0 15px;
    border-style: solid;
    border-color: var(--background-color);
    border-radius: 50% 0 50% 0;
}

.custom-border-2 {
    border-width: 10px;
    border-style: solid;
    border-color: var(--primary);
    border-radius: 50%;
    padding: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    margin-bottom: -2.5rem;
    position: relative;
    z-index: 2;
}

.clipped-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 20px;
    clip-path: polygon(0 0, 100% 0, 100% 73%, 82% 73%, 82% 100%, 0 100%, 0% 80%, 0% 20%)
}

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

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

/* ---------------------------- */
/* 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(500s / var(--speed)) infinite linear;
}

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

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

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

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

img.rotate {
    width: 300px;
    animation: rotation 6s infinite linear;
}

@keyframes rotation {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

.swiperTestimonials {
    overflow: visible;
}

.swiperTestimonials2 {
    position: relative;
    padding-bottom: 40px;
}

.swiperStep .swiper-slide.swiper-slide-thumb-active h4 {
    color: var(--accent-color);
}

.swiperStep {
    width: 100%;
    height: 300px;
    margin-left: auto;
    margin-right: auto;
}

.swiperStep2 .swiper-slide img {
    display: block;
    width: 100%;
    height: 550px;
    object-fit: cover;
}

.swiperStep2 .swiper-slide {
    background-size: cover;
    background-position: center;
}

.swiperStep {
    width: 100%;
    height: 100%;
}

.swiperStep .swiper-slide img {
    display: block;
    width: 100%;
    object-fit: cover;
}

.swiperStep {
    height: 20%;
    box-sizing: border-box;
    padding: 10px 0;
}

.swiperStep .swiper-slide {
    width: 25%;
    height: 100%;
    opacity: 0.4;
}

.swiperStep .swiper-slide-thumb-active {
    opacity: 1;
}

.padding-swiper {
    position: relative;
    padding-inline: 5rem;
}

.mySwiper {
    position: relative;
    padding-bottom: 156px;
}

.swiperImage {
    position: relative;
    width: 100%;
}

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


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

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

.swiper-slide {
    padding: 0.5rem;
}

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

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

.swiperStep2 .swiper-button-next,
.swiperStep2 .swiper-button-prev {
    right: -1rem;
    top: 15rem;
    width: 95px;
    height: 95px;
    border: 6px solid var(--primary);
    background: linear-gradient(180deg, #050505 -77.42%, #01C7F3 100%);
    color: var(--text-color);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}

.swiper-button-next.accent,
.swiper-button-prev.accent {
    bottom: 10px;
    /* Posisikan tombol di bagian bawah */
    width: 50px;
    height: 50px;
    border: 1px solid var(--accent-color);
    background-color: var(--background-color);
    /* Warna background semi-transparan */
    color: var(--accent-color);
    border-radius: 50%;
    /* Membuat tombol bulat */
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}

.swiper-button-next.accent {
    right: 0;
    transform: translateY(30px);
}

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

.swiper-button-next.accent2,
.swiper-button-prev.accent2 {
    top: 15px;
    /* Posisikan tombol di bagian bawah */
    width: 50px;
    height: 50px;
    border: 1px solid var(--accent-color);
    background-color: var(--background-color);
    /* Warna background semi-transparan */
    color: var(--accent-color);
    border-radius: 50%;
    /* Membuat tombol bulat */
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}

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

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

/* Center the buttons horizontally */
.swiperStep2 .swiper-button-next {
    right: 0;
    transform: translateY(30px);
}

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

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

/* Center the buttons horizontally */
.mySwiper .swiper-button-next {
    right: 45%;
    transform: translateY(20px);
}

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

/* Center the buttons horizontally */
.swiper-button-next.service {
    right: -9%;
    /* Gerakkan tombol next ke kanan dari tengah */
    transform: translateY(20px);
}

.swiper-button-prev.service {
    left: -7%;
    /* Gerakkan tombol prev ke kiri dari tengah */
    transform: translateY(20px);
}

/* Style for both next and prev buttons */
.swiperImage .swiper-button-next,
.swiperImage .swiper-button-prev {
    bottom: 10px;
    /* Posisikan tombol di bagian bawah */
    width: 50px;
    height: 50px;
    border: 1px solid var(--accent-color);
    background-color: var(--background-color);
    /* Warna background semi-transparan */
    color: var(--accent-color);
    border-radius: 50%;
    /* Membuat tombol bulat */
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}

/* Center the buttons horizontally */
.swiperImage .swiper-button-next {
    left: 50%;
    /* Gerakkan tombol next ke kanan dari tengah */
    transform: translateY(20px);
}

.swiperImage .swiper-button-prev {
    left: 47%;
    /* Gerakkan tombol prev ke kiri dari tengah */
    transform: translateY(20px);
}

/* Ukuran icon panah */
.swiperImage .swiper-button-next::after,
.swiperImage .swiper-button-prev::after {
    font-size: 24px;
}

/* Hover effect */
.swiperImage .swiper-button-next:hover,
.swiperImage .swiper-button-prev:hover {
    background-color: var(--accent-color);
    color: var(--primary);
    /* Background lebih gelap saat hover */
}

.custom-swiper {
    width: 100%;
    height: 600px;
    padding-right: 3rem;
}

.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(--text-color);
}

a {
    text-decoration: none;
}

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

.read-more {
    color: var(--accent-color);
    font-family: var(--font-3);
    font-size: 16px;
    transition: all 0.5s;
}

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

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

.tags {
    padding: 10px 15px;
    font-family: var(--font-3);
    color: var(--accent-color);
    background-color: transparent;
    border: 1px solid var(--accent-color);
    border-radius: 50px;
}

.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-3);
    font-weight: 600;

}

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

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

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

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

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

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

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

.btn-accent-outline:hover .icon-box-2 {
    background-color: var(--primary);
    border: 1px solid var(--accent-color);
    color: var(--accent-color);
}

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

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

.btn-accent-outline-white:hover .icon-box-3 {
    background-color: var(--accent-color);
    border: 1px solid var(--accent-color);
    color: var(--primary);
}

.btn-accent-underline {
    background-color: transparent;
    border-bottom: 1px solid var(--accent-color);
    color: var(--accent-color);
}

.btn-accent-underline:hover {
    border-bottom: 1px solid var(--text-color);
    color: var(--text-color);
}

.btn-toggler-accent {
    background-color: transparent;
    border: 1px solid var(--text-color);
    color: var(--text-color);
    aspect-ratio: 1/1;
    width: 60px;
    height: 60px;
    border-radius: 50%;
}


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

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

/* Get in Touch button – purple background, white text */
.btn-accent-outline {
    background-color: #4b0081 !important; /* Purple */
    color: #ffffff !important;
    border-color: #4b0081 !important;
}

/* Icon inside button */
.btn-accent-outline i {
    color: #ffffff !important;
}
.btn-accent-outline:hover {
    background-color: #ffffff !important;
    color: #4b0081 !important;
}

.btn-accent-outline:hover i {
    color: #4b0081 !important;
}


.partner {
    display: flex;
    justify-content: center;
    padding: 16px 24px;
    background-color: var(--background-color);
    border-radius: 30px;
}

.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;
    transform: scaleY(0);
    transform-origin: bottom;
    transition: all 0.5s ease;
}

.image-footer:hover .image-zoom {
    transform: scaleY(1);
}

.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 .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-2);
}

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

a .icon-box {
    transition: all 0.5s ease;
    transform: rotate(0deg);
}

a .icon-box-2 {
    transition: all 0.5s ease;
    transform: rotate(0deg);
}

a:hover .icon-box {
    transform: rotate(45deg);
}

a:hover .icon-box-2 {
    transform: rotate(45deg);
}

.link-white {
    color: white;
}

.link-white:hover {
    color: 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: linear-gradient(180deg, rgba(5, 5, 5, 0.3) 23.17%, rgba(1, 199, 243, 0.3) 127.38%);
}

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

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

.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: 12px;
    width: 36px;
    height: 36px;
    transition: all 0.5s;
    display: flex;
    justify-content: center;
    align-items: center;
    color: var(--text-color-2);
    margin-left: -6px;
    overflow: hidden;
}

.customer-item.testimonial {
    width: 57px;
    height: 57px;
}

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

.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: 24px;
    font-weight: 600;
    align-items: center;
    text-align: center;
    aspect-ratio: 1/1;
    transition: all 0.5s;
    border-radius: 50%;
    background-color: var(--primary);
    color: var(--accent-color);
    padding: 15px;
    width: max-content;
    height: max-content;
}

.icon-box.class {
    display: flex;
    justify-content: center;
    font-size: 46px;
    font-weight: 700;
    align-items: center;
    text-align: center;
    aspect-ratio: 1/1;
    transition: all 0.8s;
    border-radius: 50%;
    color: var(--primary);
    padding: 15px;
    width: max-content;
    height: max-content;
    border: 1px solid var(--accent-color);
    background-color: var(--accent-color);
}

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

.icon-box-2 {
    display: flex;
    justify-content: center;
    font-size: 24px;
    font-weight: 600;
    align-items: center;
    text-align: center;
    aspect-ratio: 1/1;
    transition: all 0.5s;
    border-radius: 50%;
    background-color: var(--accent-color);
    color: var(--primary);
    padding: 15px;
    width: max-content;
    height: max-content;
}

.icon-box-3 {
    display: flex;
    justify-content: center;
    font-size: 24px;
    font-weight: 600;
    align-items: center;
    text-align: center;
    aspect-ratio: 1/1;
    transition: all 0.5s;
    border-radius: 50%;
    background-color: var(--primary);
    border: 1px solid var(--accent-color);
    color: var(--accent-color);
    padding: 15px;
    width: max-content;
    height: max-content;
}

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

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

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

.floating-form {
    position: absolute;
    margin-top: 20rem;
    left: 0;
    bottom: 0;
}

.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;
    bottom: 7rem;
    right: 2rem;
}

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

.floating-footer {
    right: 0;
    bottom: 0;
    position: absolute;
    z-index: 2;
}


.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: 1px solid var(--accent-color);
    color: var(--accent-color);
    transition: all 0.5s;
    border-radius: 50px;
    padding: 10px;
}

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

}

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

.list-group .link .icon-box {
    background-color: var(--accent-color);
    color: var(--primary);
}

.list-group .link.active .icon-box {
    background-color: var(--primary);
    color: var(--accent-color);
}

.list-group .link:hover .icon-box {
    background-color: var(--primary);
    color: var(--accent-color);
}

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

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

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

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

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

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

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

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


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

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

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

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

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

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

.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(--accent-color-2);
    color: var(--accent-color-12);
}

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

.social-item-3:hover {
    background-color: var(--accent-color-6);
    color: var(--accent-color-12);
}

.social-item-4:hover {
    background-color: var(--accent-color-3);
    color: var(--accent-color-12);
}

.social-item-5:hover {
    background-color: var(--accent-color-8);
    color: var(--accent-color-12);
}

.social-item-6:hover {
    background-color: var(--accent-color-9);
    color: var(--accent-color-12);
}

.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: relative;
    height: 60px;
    width: 60px;
    border-radius: 50% !important;
    background-color: transparent;
    border: solid 2px var(--accent-color);
    display: flex;
    justify-content: center;
    align-items: center;
    color: var(--accent-color);
    font-size: 25px;
    aspect-ratio: 1/1;
}

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

.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;
    border-radius: 10px;
    transition: all 0.5s;
    background-color: var(--primary);
}

.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-blog h4 {
    color: var(--text-color);
}

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

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

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

.card-service {
    color: var(--text-color);
    border-radius: 0px;
    border: 1px solid transparent;
    padding: 30px 30px;
}

.card-service:hover {
    color: var(--text-color);
    border: 1px solid var(--accent-color);
    background-color: var(--accent-color-4);
}

.card-service .btn-accent-underline {
    color: var(--text-color);
    border-bottom: 1px solid var(--text-color);
}

.card-service:hover .btn-accent-underline {
    color: var(--accent-color);
    border-bottom: 1px solid var(--accent-color);
}

.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:hover {
    transform: translateY(-5px);
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
}

.card-testimonial {
    border: none;
    border-radius: 20px;
    transition: all 0.5s;
    background-color: var(--accent-color-3);

}

.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-testimonial:hover {
    transform: translateY(-20px);
    box-shadow: 0px 0px 0px 2px var(--accent-color);
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
}

.card.card-pricing-hover {
    color: var(--primary);
    background-color: var(--accent-color-6);
    border-radius: 40px;

}

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

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

.card.card-pricing-hover:hover {
    background-color: var(--accent-color);
    transform: scale(1.04);
}

.card.card-pricing-hover:hover::before {
    content: "";
    position: absolute;
    top: -14px;
    left: -14px;
    right: -14px;
    bottom: -14px;
    border-radius: 45px;
    border: 2px solid var(--text-color); /* Border luar */
    z-index: -1;
  }

  .card.card-pricing-hover:hover::after {
    content: "";
    position: absolute;
    top: -7px;
    left: -7px;
    right: -7px;
    bottom: -7px;
    border-radius: 45px;
    border: 2px solid var(--accent-color); /* Border luar */
    z-index: -1;
  }

.card-pricing-hover-middle {
    transform: scale(1);
    flex: 1.00;
    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-overlay {
    background-color: transparent;
    height: 100%;
}

.card-overlay .card-body {
    position: absolute;
    bottom: 0;
    left: 0;
    opacity: 0;
    transform: scaleX(0);
    transform-origin: left;
    transition: all 0.5s;
    padding: 0;
}

.card-overlay:hover .card-body {
    transform: scaleX(1);
    opacity: 1;
}

.card-overlay .card-img {
    position: relative;
    bottom: 0;
    left: 0;
}

.card-overlay .artist-text {
    transition: all 0.5s;
    transform: rotate(270deg);
    color: var(--text-color);
    position: absolute;
    bottom: 0;
    left: 15px;
    z-index: 2;
    transform-origin: left;
    line-height: 0;
}

.card-overlay img {
    padding-left: 40px;
    transition: all 0.5s;
}

.card-overlay.service img {
    padding-left: 0;
}

.card-overlay:hover img {
    padding-left: 0;
}

.card-overlay:hover .artist-text {
    padding-block: 2rem;
    transform: rotate(360deg);
    padding-inline: 0.5rem;
}

.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 .icon-box-2 {
    background-color: var(--primary);
    color: var(--accent-color-2);
}

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

.activities-container {
    border-radius: 20px;
    padding: 30px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    color: var(--primary);
}

.activities-container p,
.activities-container .read-more {
    color: var(--primary);
}

.activities-container::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 20px;
    transition: transform 0.3s ease;
    z-index: -1;
}

.activities-container:hover::after {
    transform: rotate(3deg);
}

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

.activities-container.accent::after {
    border: 2px solid var(--accent-color-13);
}

.activities-container.accent:hover,
.activities-container.accent:hover p,
.activities-container.accent:hover .read-more {
    color: var(--accent-color-13);
}

.activities-container.accent2 {
    background-color: var(--accent-color-3);
}

.activities-container.accent2::after {
    border: 2px solid var(--accent-color);
}

.activities-container.accent2:hover,
.activities-container.accent2:hover p,
.activities-container.accent2:hover .read-more {
    color: var(--accent-color);
}

.activities-container.accent3 {
    background-color: var(--accent-color-2);
}

.activities-container.accent3::after {
    border: 2px solid var(--accent-color-14);
}

.activities-container.accent3:hover,
.activities-container.accent3:hover p,
.activities-container.accent3:hover .read-more {
    color: var(--accent-color-14);
}

.activities-container.accent4 {
    background-color: var(--accent-color-9);
}

.activities-container.accent4::after {
    border: 2px solid var(--accent-color-15);
}

.activities-container.accent4:hover,
.activities-container.accent4:hover p,
.activities-container.accent4:hover .read-more {
    color: var(--accent-color-15);
}

.activities-container.accent5 {
    background-color: var(--accent-color-8);
}

.activities-container.accent5::after {
    border: 2px solid var(--accent-color-16);
}

.activities-container.accent5:hover,
.activities-container.accent5:hover p,
.activities-container.accent5:hover .read-more {
    color: var(--accent-color-16);
}

.activities-container.accent6 {
    background-color: var(--accent-color-11);
}

.activities-container.accent6::after {
    border: 2px solid var(--accent-color-17);
}

.activities-container.accent6:hover,
.activities-container.accent6:hover p,
.activities-container.accent6:hover .read-more {
    color: var(--accent-color-17);
}

.testimonial-container {
    background-color: var(--background-color);
    padding: 40px;
    border-radius: 30px;
    color: var(--text-color-2);
    display: flex;
    flex-direction: column;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    gap: 0.5rem;
    height: 370px;
    position: relative;
}

.testimonial-container:hover {
    height: 370px;
}

.testimonial-container::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 32px;
    transition: transform 0.3s ease;
    z-index: -1;
    border: 2px solid var(--accent-color);
}

.testimonial-container:hover::after {
    transform: rotate(2deg);
}

.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-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    flex-wrap: wrap;
    align-items: center;
}

.class-course {
    display: none;
}

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

.class-card {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    border-radius: 2rem;
    color: var(--accent-color);
    background-color: var(--background-color);
    align-items: center;
    height: 100%;
    padding: 1.5rem;
    transition: all 0.5s;
}

.class-card:hover {
    background-color: var(--accent-color-7);
    color: var(--accent-color-2);
}

.class-card:hover .icon-box {
    background-color: var(--accent-color-2);
    border: 1px solid var(--accent-color-2);
    color: var(--primary);

}

.class-card:hover .custom-border {
    background-color: var(--accent-color-7);
    border-color: var(--accent-color-7);
}

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

.class-duration {
    display: none;
}

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

/* Tab Navigation */
.tab-container {
    width: 100%;
    text-align: center;
    display: flex;
    flex-direction: row;
    gap: 1rem;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

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

}

.tab {
    text-align: center;
    cursor: pointer;
    color: var(--accent-color);
    transition: background 0.3s ease-in-out;
}

.tab.active {
    color: var(--primary);
    padding: 8px 10px;
    background-color: var(--accent-color);
    border-radius: 30px;
}

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

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

.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(--secondary-progress-color);
    display: flex;
    border-radius: 3px;
    /* overflow: hidden; */
}

.r-progress-bar .progress-value {
    height: 100%;
    width: calc(var(--progress) * 1%);
    background-color: var(--progress-color);
    position: relative;
    border-radius: 3px;
    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);
}

.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(--primary);
    opacity: 0.9;
    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: #fff;
}

/* ---------------------------- */
/* Accordion                    */
/* ---------------------------- */
.accordion {
    --bs-accordion-bg: transparent;
    --bs-accordion-btn-padding-x: 0;
}

.accordion .accordion-item-faq {
    background-color: var(--accent-color-4);
    border: none;
    color: var(--primary);
    outline: none;
    border-radius: 15px;
    overflow: hidden;
}

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

.accordion .accordion-button {
    background-color: transparent;
    color: var(--text-color-2);
    outline: none;
    border-radius: 0 !important;
    font-family: var(--font-3);
    font-size: 20px;
    /* box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 6px -1px, rgba(0, 0, 0, 0.06) 0px 2px 4px -1px; */
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    padding: 30px;
    color: var(--text-color);
}

.accordion .accordion-button.accent {
    box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 6px -1px, rgba(0, 0, 0, 0.06) 0px 2px 4px -1px;
}


.accordion-button::after {
    margin-left: 0.5rem;
    margin-right: 1.5rem;
    background-color: var(--accent-color);
    border-radius: 50%;
    padding: 15px;
    background-position: center;
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="10" height="10" fill="%23FBF8FF" class="bi bi-chevron-down" viewBox="0 0 16 16"><path 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"/></svg>');
}

.accordion-button:not(.collapsed)::after {
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="10" height="10" fill="%23704FE6" class="bi bi-chevron-down" viewBox="0 0 16 16"><path 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"/></svg>');
    background-color: var(--primary);
}

.accordion .accordion-button:not(.collapsed) {
    border: none;
    outline: none;
    box-shadow: none;
    background-color: var(--accent-color);
    color: var(--primary);
}

.accordion .accordion-body {
    font-size: 16px;
    font-family: var(--font-3);
    padding-inline: 0;
    background-color: var(--accent-color);
    padding: 30px;
    padding-top: 0;
}

.accordion-container {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    width: 100%;
    overflow: visible;
}

/* Accordion item pertama tampil lebih besar secara default */
/* .accordion-item:last-child {
    flex: 2;
} */

/* Ketika ada item yang di-hover */
.accordion-item:hover {
    flex: 3;
}

/* Jika ada item yang di-hover, semua accordion lainnya memiliki ukuran yang sama */
.accordion-container:hover .accordion-item {
    flex: 2;
}

.accordion-container:hover .accordion-item:hover {
    flex: 4;
}

.accordion-item {
    flex: 1 1 calc(33.333% - 20px);
    border-radius: 15px;
    background-size: cover;
    background-position: center;
    transition: flex 0.5s ease;
    width: 50rem;
    height: 35rem;
    position: relative;
    display: flex;
    flex-direction: row;
    align-items: end;
    justify-content: end;
}

.accordion-item:first-of-type,
.accordion-item:last-of-type {
    border-radius: 15px;
}

.accordion-title {
    position: absolute;
    bottom: 20px;
    left: 20px;
    color: white;
    font-size: 24px;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7);
    transition: opacity 0.5s ease;
}

.accordion-item:hover .accordion-title {
    opacity: 0.8;
}

.accordion-item .social-container {
    position: absolute;
    left: 0;
    bottom: 0;
    opacity: 0;
    transform-origin: left;
    transition: all 0.5s;
    height: max-content;
}

.accordion-item:hover .social-container {
    opacity: 1;
}

.accordion-item .team-title {
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 100%;
    width: 100%;
    transition: all 0.5s;
    transform-origin: top;
    padding: 35px;
    color: var(--primary);
}

.accordion-item:hover .team-title {
    align-items: start;
    top: 3rem;
}

.accordion-item .team-title h6 {
    opacity: 0;
    transition: all 0.5s;
}

.accordion-item:hover .team-title h6 {
    opacity: 1;
}

.accordion-item .team-img {
    position: relative;
    z-index: 1;
}

.accordion-item .team-img img {
    width: 420px;
}

.accordion-item:hover .team-img img {
    width: 400px;
}

.accordion-item .asset {
    height: 100%;
    transition: all 0.5s;
    display: none;
    position: absolute;
    top: 5rem;
    right: 4rem;
    z-index: 0;
}

.accordion-item:hover .asset {
    display: block;
}

.service-scroll {
    height: 710px;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 2rem;
}

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

}

/* 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);
}


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

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

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

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

    /* ---------------------------- */
    /* Header, Footer and Navigation Setting  */
    /* ---------------------------- */
    .logo-container {
        max-width: 100px;
    }

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

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

    footer {
        height: 100%;
    }

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


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

    .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: inherit;
    }

    .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-form {
        opacity: 0.6;
    }

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

    .floating-footer {
        width: 200px;
        right: 0;
        bottom: 0;
        position: absolute;
        z-index: -1;
    }

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

    .accordion-item {
        flex: 1 1 100%;
    }

    /* Ketika ada item yang di-hover */
    .accordion-item:hover {
        flex: 1 1 100%;
    }

    /* Jika ada item yang di-hover, semua accordion lainnya memiliki ukuran yang sama */
    .accordion-container:hover .accordion-item {
        flex: 1 1 100%;
    }

    .accordion-container:hover .accordion-item:hover {
        flex: 1 1 100%;
    }

    .accordion-item .asset {
        height: 100%;
        transition: all 0.5s;
        display: none;
        position: absolute;
        top: 9rem;
        right: 4rem;
        z-index: 0;
    }

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

    .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(1, 1fr);
        justify-content: center;
        align-items: center;
    }

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

    .testimonial-container {
        height: 490px;
    }
    
    .testimonial-container:hover {
        height: 490px;
    }

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

    .footer-img {
        position: relative;
    }

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

    .padding-swiper {
        position: relative;
        padding-inline: 2rem;
    }

    .swiperImage {
        padding-bottom: 0;
    }

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

    .swiper-button-next.accent,
    .swiper-button-prev.accent {
        top: 12rem;
        height: 80px;
        width: 80px;
        border: 5px solid var(--primary);
    }

    .swiper-button-next,
    .swiper-button-prev {
        top: 12rem;
        height: 80px;
        width: 80px;
        border: 5px solid var(--primary);
    }

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

    .mySwiper .swiper-button-next,
    .mySwiper .swiper-button-prev {
        top: 28rem;
        width: 40px;
        height: 40px;
    }

    /* Center the buttons horizontally */
    .mySwiper .swiper-button-next {
        right: 0;
        transform: translateY(20px);
    }

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

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

    .swiperStep2 .swiper-button-next,
    .swiperStep2 .swiper-button-prev {
        width: 50px;
        height: 50px;
        border: 3px solid var(--primary);
    }

    /* Center the buttons horizontally */
    .swiperStep2 .swiper-button-next {
        right: 7%;
        transform: translateY(20px);
    }

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

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

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

    .service-scroll {
        padding-right: 2rem;
        padding-left: 0;
        padding-block: 0;
    }

}

    .activity-img {
        width: 100%;
        height: 300px;
        object-fit: cover;
        border-radius: 0px 0px 0 0; /* smooth rounded top */
    }

    .activity-card {
        border: 2px solid #4B0081 !important;
        border-radius: 10px;
        
    }
.softplay-img {
  width: 600px !important;
  height: 700px !important;
  object-fit: cover;
  display: block;
}

/* LABEL – exact styling like “Name / Email / Subject / Message” in Ask Now form */
.form-label {
    font-size: 16px;           /* same size */
    font-weight: 500;          /* not bold – same as Ask Now */
    color: #2b1848;            /* dark purple text */
    margin-bottom: 6px;
}
.career-input {
    background-color: transparent;
    border-radius: 10px;         /* rectangle with smooth corners */
    border: 2px solid #6c2bb5;
    padding: 14px 20px;
    font-size: 14px;
    color: #2b1848;
    box-shadow: none;
}

.career-input:focus {
    outline: none;
    border-color: #6c2bb5;
    box-shadow: 0 0 0 2px rgba(108, 43, 181, 0.2);
}


.marquee-item img {
    max-height: 70px;   /* adjust: 50–80px usually looks good */
    width: auto;
    object-fit: contain;
}
.nav-link {
    transition: all 0.3s ease;
    border-radius: 25px;      /* pill shape like the screenshot */
    padding: 8px 18px;        /* matches the spacing of the “Home” button */
    font-weight: 500;
}

.nav-link:hover {
    background-color: #4B0081;   /* solid purple */
    color: #FFFFFF !important;   /* white text */
}



.activity-detail-wrapper {
    margin-top: 150px;  /* Increase or decrease as you like */
}
/* Square Box */
.square-box {
    width: 900px;
    min-height: 600px;
    background: #ffffff;
    border: 3px solid #ffffff;
    border-radius: 20px;
    padding: 30px;
    display: flex;
    gap: 25px;
    overflow: hidden;
}

/* Left Section layout */
.left-section {
    width: 40%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* Arrows */
.arrow {
    font-size: 24px;
    cursor: pointer;
    color: #ffffff;
    margin: 5px 0;
    font-weight: bold;
    user-select: none;
}

.arrow:hover {
    color: #500b8c;
}

/* Cards container */
.left-cards {
    width: 100%;
    height: 450px; /* only show 3 cards height */
    overflow: hidden;
    display: flex;
    flex-direction: column;
    gap: 15px;
    scroll-behavior: smooth;
}

/* Each card */
.mini-card {
    height: 140px;
    border-radius: 15px;
    background: #f7f7f7;
    overflow: hidden;
}

.mini-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Right Side */
.right-text {
    width: 60%;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
/* 3 cards × 150px + 2 gaps × 15px = 480px */
.cards-viewport {
  height: 480px; /* was 525px — this caused the blank space */
  width: 100%;
  overflow: hidden;
  position: relative;
}


/* GRID FOR TWO CARDS PER ROW */
.franchise-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 30px;
  max-width: 750px;
  margin: auto;
}

/* MOBILE RESPONSIVE */
@media (max-width: 600px) {
  .franchise-grid {
    grid-template-columns: 1fr;
  }
}

/* FLIP CARD STYLE */
.franchise-card {
  width: 100%;
  height: 380px;
  perspective: 1000px;
}

.card-inner {
  width: 100%;
  height: 100%;
  position: relative;
  transition: transform 0.8s ease;
  transform-style: preserve-3d;
}

.franchise-card:hover .card-inner {
  transform: rotateY(180deg);
}

/* FRONT & BACK */
.card-front, .card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  padding: 20px;
  border-radius: 18px;
  box-shadow: 0 10px 20px rgba(0,0,0,0.15);
  backface-visibility: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

/* FRONT DESIGN */
.card-front {
  background: #fff;
  text-align: center;
}

.card-image {
  width: 100%;
  height: 170px;
  object-fit: cover;
  border-radius: 12px;
  margin-bottom: 10px;
}

/* BACK DESIGN */
.card-back {
  background: #4B0081;
  color: #fff;
  
  transform: rotateY(180deg);
  text-align: center;
}
.card-back,
.card-back h3,
.card-back p,
.card-back ul,
.card-back li {
    color: #fff !important;
}

.franchise-grid {
  margin-top: 150px;   /* increase or decrease as you like */
}
.franchise-card {
  width: 100%;
  aspect-ratio: 1 / 1;   /* makes the card a perfect square */
  perspective: 1000px;
  width: 500px;
  height: 500px;
  perspective: 1000px;
  max-width: 900px;  

  position: relative;
}
/* This wrapper forces the cards to center horizontally */
.franchise-center {
    width: 100%;
    display: flex;
    justify-content: center;   /* center the grid */
    margin-top: 120px;          /* space below navbar */
}
/* Hide scrollbar in all browsers */
.cards-viewport {
  overflow: hidden;          /* already present, keeps everything hidden */
}

.left-cards {
  scrollbar-width: none;     /* Firefox */
}

.left-cards::-webkit-scrollbar {
  display: none;             /* Chrome, Edge, Safari */
}

/* 2 cards layout */


/* optional: square cards */
/* .franchise-card {
    width: 100%;
    max-width: 1000px;
    aspect-ratio: 1 / 1;
} */

/* Centers the entire grid */
/* .franchise-wrapper {
    width: 100%;
    display: flex;
    justify-content: center;   
    margin-top: 120px;         
} */

/* Grid for two cards */
/* .franchise-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 40px;
    width: 100%;
    max-width: 1100px;         
    justify-items: center;     
} */

/* Make the cards square (optional) */





/* Centers the entire grid */
.franchise-wrapper {
    width: 100%;
    display: flex;
    justify-content: center;   /* centers the grid horizontally */
    margin-top: 120px;         /* move cards down from navbar */
}

/* Grid for two cards */
.franchise-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 40px;
    width: 100%;
    max-width: 1100px;         /* IMPORTANT: keeps grid centered */
    justify-items: center;     /* centers each card inside its column */
}

/* Make the cards square (optional) */
.franchise-card {
    width: 100%;
    max-width: 800px;          /* increase this to make bigger squares */
    aspect-ratio: 1 / 1;       /* perfect square */
    perspective: 1000px;
    
}






/* Viewport that shows exactly 3 cards */
.cards-viewport {
  height: 525px; /* 3 cards × 150px + 2 gaps × 15px = 450px + 30px = 480px */
  width: 100%;
  overflow: hidden; /* Hide everything outside this area */
  position: relative;
}

/* Container that holds all cards and moves */
.left-cards {
  display: flex;
  flex-direction: column;
  gap: 15px;
  transition: transform 0.8s ease-in-out;
  position: relative;
}

/* Individual card styling */
.mini-card {
  height: 150px;
  min-height: 150px;
  flex-shrink: 0;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
  transition: transform 0.3s ease;
}

.mini-card:hover {
  transform: scale(1.02);
  box-shadow: 0 6px 12px rgba(0,0,0,0.15);
}

.mini-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Arrow buttons */
.card-arrow {
  background: rgba(255, 255, 255, 0.8);
  border: none;
  font-size: 24px;
  cursor: pointer;
  padding: 10px;
  color: #333;
  border-radius: 50%;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 10px auto;
  box-shadow: 0 2px 8px rgba(0,0,0,0.2);
  transition: all 0.3s ease;
  z-index: 10;
}

.card-arrow:hover:not(.dim) {
  background: white;
  transform: scale(1.1);
  box-shadow: 0 4px 12px rgba(0,0,0,0.3);
}

.card-arrow.dim {
  opacity: 0.3;
  cursor: not-allowed;
  transform: none;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

/* Left section styling */
.left-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
}

/* Indicator dots */
.indicators {
  display: flex;
  gap: 8px;
  margin-top: 15px;
  justify-content: center;
}

.indicator-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #ddd;
  cursor: pointer;
  transition: all 0.3s ease;
}

.indicator-dot.active {
  background: #4a6bff;
  transform: scale(1.2);
}

.indicator-dot:hover {
  background: #bbb;
}


.swiper-pagination-bullet-active {
    background: #ffffff !important;         /* active bullet – bright white */
    width: 12px;
    height: 12px;
}



/* force bullets visible and styled */
.swiper-pagination {
  position: relative !important;
  z-index: 10 !important;
  text-align: center;
  margin-top: 12px;
}

.swiper-pagination .swiper-pagination-bullet {
  display: inline-block !important;
  opacity: 1 !important;
  background: rgba(255,255,255,0.45) !important;
  width: 10px !important;
  height: 10px !important;
  margin: 0 6px !important;
  border-radius: 50% !important;
  transform: none !important;
  box-shadow: none !important;
}

.swiper-pagination .swiper-pagination-bullet-active {
  background: #ffffff !important;
  width: 12px !important;
  height: 12px !important;
  opacity: 1 !important;
  border: 2px solid rgba(0,0,0,0.12) !important;
}



/* Base bullet */
.swiper-pagination-bullet {
    background: #ffffff !important;        /* inactive: white */
    opacity: 1 !important;
    width: 10px !important;
    height: 10px !important;
    margin: 0 6px !important;
    transition: all 0.3s ease;
}

/* Active bullet */
.swiper-pagination-bullet-active {
    background: #5c1d99 !important;        /* purple brand color */
    width: 14px !important;                /* slightly bigger */
    height: 14px !important;
}

.whatsapp-float {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 9999;
    width: 150px;
    height: 150px;
    border-radius: 50%;
    overflow: hidden;
    box-shadow: 0 4px 10px rgba(0,0,0,0.2);
    background: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
}

.whatsapp-float .chat-icon {
    width: 100%;
    height: 100%;
    object-fit: contain; /* Keeps your custom image clean */
}
/* ===== Layout ===== */
.activity-detail-wrapper {
    padding: 2.5rem 0;
}

.square-box {
    display: flex;
    gap: 2.5rem;
    justify-content: center;
    max-width: 1100px;
    margin: 0 auto;
}

/* ===== LEFT SIDE ===== */
.left-section {
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* viewport showing 3 images */
.cards-viewport {
    overflow: hidden;
    width: 220px;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 6px 18px rgba(0,0,0,0.05);
}

/* continuous vertical scrolling container */
.left-cards {
    display: flex;
    flex-direction: column;
    gap: 12px;

    /* main infinite loop animation */
    animation: scrollUp var(--duration, 12s) linear infinite;
}

/* reverse direction */
.left-cards.reverse {
    animation-direction: reverse;
}

/* each mini card */
.mini-card {
    width: 100%;
    height: 130px;
    border-radius: 10px;
    overflow: hidden;
    background: #f5f5f5;
}

.mini-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* circular arrow buttons */
.card-arrow {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(0,0,0,0.06);
    border: none;
    cursor: pointer;
    margin: 10px 0;
    box-shadow: 0 3px 8px rgba(0,0,0,0.1);
    display: flex;
    justify-content: center;
    align-items: center;
    transition: 0.2s;
}

.card-arrow:hover {
    transform: translateY(-3px);
    background: rgba(0,0,0,0.12);
}

.card-arrow svg {
    width: 18px;
    height: 18px;
    fill: #333;
}

/* continuous loop keyframes */
@keyframes scrollUp {
    0%   { transform: translateY(0); }
    100% { transform: translateY(-50%); }
}

/* RIGHT SECTION */
.right-text {
    max-width: 520px;
}

.right-text h2 {
    font-size: 48px;
    font-weight: 800;
    color: #12001a;
}

.right-text p {
    color: #555;
    line-height: 1.6;
}

/* ===== Responsive ===== */
@media (max-width: 900px) {
    .square-box {
        flex-direction: column;
        align-items: center;
    }
    .cards-viewport {
        width: 65%;
    }
}
.cards-viewport {
  overflow: hidden;
  width: 220px;           /* adjust */
  border-radius: 12px;
  background: #fff;
  position: relative;
}

.left-cards {
  display:flex;
  flex-direction:column;
  gap: 12px;              /* if you use margins instead, see note below */
  transform: translateY(0px);
  will-change: transform;
}

.mini-card {
  width:100%;
  height:130px;           /* can be variable per card */
  border-radius:10px;
  overflow:hidden;
  flex-shrink:0;
}
.mini-card img { width:100%; height:100%; object-fit:cover; display:block; }

.card-arrow {
  width:44px; height:44px; border-radius:50%;
  border:none; cursor:pointer; margin:10px;
}
/* activities_detail.css additions */
.left-cards {
  display: flex;
  flex-direction: column;
  transition: transform 0.1s linear; /* Smooth but fast transition */
}

.mini-card {
  flex-shrink: 0;
  margin-bottom: 16px; /* Adjust based on your design */
}

.mini-card:last-child {
  margin-bottom: 0;
}

.cards-viewport {
  overflow: hidden;
  position: relative;
  height: 400px; /* Adjust based on your design */
}
/* Add to your activities_detail.css */

.left-cards {
  display: flex;
  flex-direction: column;
  will-change: transform; /* Hint to browser for optimization */
}

.mini-card {
  flex-shrink: 0;
  margin-bottom: 16px; /* Your spacing */
  position: relative;
}

/* Remove any transitions that might cause jumps */
.left-cards {
  transition: none !important;
}

/* Viewport should hide overflow */
.cards-viewport {
  overflow: hidden;
  position: relative;
  height: 400px; /* Your height */
}
.location-card {
    width: 300px;
    padding: 20px;
    border-radius: 12px;
    background: #ffffff;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    text-align: center;
    font-family: Arial, sans-serif;
}

.location-card h3 {
    margin-bottom: 10px;
    color: #4B0081; /* Your brand color */
}

.location-card p {
    margin: 4px 0;
    font-size: 14px;
    color: #333;
}

.map-btn {
    display: inline-block;
    margin-top: 12px;
    padding: 10px 18px;
    background: #4B0081;
    color: #fff;
    text-decoration: none;
    border-radius: 6px;
    font-size: 14px;
}

.map-btn:hover {
    background: #4b0081;
}
.locate-main-container {
    margin-top: 120px;   /* adjust spacing below navbar */
    display: flex;
    justify-content: center;
    width: 100%;
}
.location-card {
    width: 480px;          /* increased width */
    padding: 100px 100px;    /* increased padding */
    border-radius: 15px;
    background: #ffffff;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    text-align: center;
    font-family: Arial, sans-serif;
    margin-top: 20px;
}
.whatsapp-float {
    position: fixed;
    width: 65px;
    height: 65px;
    bottom: 25px;
    right: 25px;
    background: #25D366;                  /* WhatsApp green */
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 999;
    box-shadow: 0 4px 10px rgba(0,0,0,0.25);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.whatsapp-icon {
    width: 38px;          /* perfect size inside circle */
    height: auto;
}

.whatsapp-float:hover {
    transform: scale(1.12);
    box-shadow: 0 5px 15px rgba(0,0,0,0.3);
}




/* -------------------------------
   RIGHT SIDE VERTICAL BAR (NO DOTS)
-------------------------------- */
.right-sidebar-trigger {
  position: fixed;
  right: 0px;                 /* Touching the right edge */
  top: 45%;                   /* Center vertically */
  transform: translateY(-50%);
  width: 14px;                /* thin strip */
  height: 120px;              /* tall strip */
  border-radius: 8px 0 0 8px; /* rounded left side only */
  background: #4b0081;        /* Peppe Planet purple */
  border: none;
  cursor: pointer;
  z-index: 1900;
  box-shadow: 0 4px 18px rgba(0,0,0,0.20);
  transition: background .2s ease, width .2s ease;
}

/* Hover effect (optional) */
.right-sidebar-trigger:hover {
  background: #4b0081;
  width: 16px;
}

/* -----------------------------------
   SIDEBAR DRAWER PANEL STYLES
------------------------------------ */
.contact-drawer {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1850;
}

.drawer-panel {
  position: fixed;
  right: -560px;    /* hidden offscreen */
  top: 0;
  width: 540px;
  max-width: 100%;
  height: 100%;
  background: #fff;
  box-shadow: -18px 0 60px rgba(27,12,44,0.18);
  border-left: 1px solid rgba(78,14,138,0.06);
  padding: 28px 26px;
  overflow-y: auto;
  transition: right 0.35s cubic-bezier(.25,.8,.25,1);
  pointer-events: auto;
}

.contact-drawer[aria-hidden="false"] .drawer-panel {
  right: 0;
}

/* Close button */
.drawer-close {
  position: absolute;
  top: 12px;
  right: 12px;
  background: transparent;
  border: none;
  font-size: 22px;
  cursor: pointer;
  color: #444;
}

/* Header styles */
.drawer-header h3 {
  margin: 0;
  color: #4b0081;
  font-size: 22px;
  font-weight: 700;
}

.drawer-sub {
  color: #666;
  font-size: 14px;
  margin-top: 6px;
}

/* Form control fallback */
#drawerForm input,
#drawerForm textarea,
#drawerForm select {
  width: 100%;
  margin-bottom: 12px;
  border-radius: 12px;
  padding: 12px 14px;
  border: 2px solid rgba(78,14,138,0.12);
  font-size: 14px;
}

/* Submit button fallback */
#drawerForm button[type="submit"] {
  width: 100%;
  padding: 12px;
  border-radius: 12px;
  border: none;
  background: linear-gradient(180deg,#4b0081,#4b0081);
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
}

/* Mobile full width */
@media (max-width: 720px) {
  .drawer-panel {
    width: 100%;
    right: -100%;
  }
}



/* Trigger same size everywhere */
.right-sidebar-trigger{
  width: 6px !important;
  height: 100px !important;
  right: 0 !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
}

/* No resizing on mobile */
@media (max-width:600px) {
    .right-sidebar-trigger {
        width: 10px !important;
        height: 100px !important;
    }
}


  .right-sidebar-trigger:hover { background:#4B0081; width:12px; }

  /* modal container */
  .contact-modal { position: fixed; inset: 0; display: none; align-items: center; justify-content: center; z-index: 4000; }
  .contact-modal[aria-hidden="false"] { display: flex; }

  /* overlay */
  .modal-overlay { position:absolute; inset:0; background: rgba(0,0,0,0.38); }

  /* modal box */
  .modal-box {
    position: relative;
    width: 420px;        /* small width */
    max-width: 94%;
    background: #fff;
    border-radius: 12px;
    padding: 22px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.18);
    z-index: 10;
    animation: popup .22s ease;
  }
  @keyframes popup { from{transform:scale(.96);opacity:0} to{transform:scale(1);opacity:1} }

  /* close */
  .modal-close { position:absolute; right:12px; top:10px; background:transparent; border:none; font-size:18px; cursor:pointer; }

  /* headings */
  .modal-title { margin:0 0 6px 0; color:#4B0081; font-weight:700; font-size:18px; }
  .modal-subtitle { margin:0 0 12px 0; color:#666; font-size:13px; }

  /* included form fallback style */
  #modalForm input, #modalForm textarea { width:100%; padding:12px 14px; margin-bottom:12px; border-radius:12px; border:2px solid rgba(78,14,138,0.12); box-sizing:border-box; font-size:14px; }
  #modalForm button[type="submit"] { width:100%; padding:12px; border-radius:12px; border:none; background:linear-gradient(180deg,#4e0e8a,#3b006e); color:#fff; font-weight:700; cursor:pointer; }

  @media (max-width:600px) {
    .modal-box { width: 94%; padding:18px; }
    .right-sidebar-trigger { right:12px; bottom:18px; top:auto; transform:none; height:56px; width:56px; border-radius:12px; }
  }
  








  .right-sidebar-trigger{
  position: fixed;
  right: 0 !important;
  top: 50% !important;
  transform: translateY(-50%) !important;

  /* thickness & size */
  width: 12px !important;       /* adjust: 4 / 6 / 8 / 10 px */
  height: 90px !important;

  background: linear-gradient(180deg, #5a0f9a, #3b006e) !important;
  border-radius: 12px 0 0 12px !important;
  box-shadow: 0 4px 14px rgba(0,0,0,0.16) !important;
  cursor: pointer !important;
  z-index: 3000 !important;
  border: none !important;
  padding: 0 !important;
  overflow: hidden !important;
  transition: width .18s ease, background .18s ease, right .18s ease;
  -webkit-tap-highlight-color: transparent;
}

/* remove dots (ensure no old pseudo-element remains) */
.right-sidebar-trigger::before,
.right-sidebar-trigger::after{
  content: none !important;
}

/* hover expansion */
.right-sidebar-trigger:hover{
  width: 14px !important;
  background: linear-gradient(180deg, #6b1fae, #4b0081) !important;
}

/* mobile: keep same thin design */
@media (max-width: 720px){
  .right-sidebar-trigger{
    width: 8px !important;
    height: 90px !important;
    right: 0 !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
  }
}

/* optional: hide trigger when modal/drawer opens */
.contact-modal[aria-hidden="false"] .right-sidebar-trigger,
.contact-drawer[aria-hidden="false"] .right-sidebar-trigger {
  display: none !important;
}


/* Main container */
.activity-detail-wrapper {
  padding: 20px 15px;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Square box layout */
.square-box {
  width: 100%;
  max-width: 1200px;
  display: flex;
  flex-direction: column;
  gap: 30px;
  background: white;
  border-radius: 20px;
  padding: 25px 20px;
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
}

/* Left section (images) */
.left-section {
  width: 100%;
  order: 2; /* Images come after text on mobile */
}

/* Viewport styling */
.cards-viewport {
  position: relative;
  width: 100%;
  height: 300px; /* Smaller height for mobile */
  overflow: hidden;
  border-radius: 15px;
  background: #f8f9fa;
  touch-action: pan-y; /* Allow vertical scrolling on touch */
}

/* Touch indicator for mobile */
.touch-indicator {
  position: absolute;
  bottom: 15px;
  left: 0;
  right: 0;
  text-align: center;
  z-index: 5;
  opacity: 0;
  transition: opacity 0.3s;
  pointer-events: none;
}

.touch-indicator span {
  background: rgba(0, 0, 0, 0.7);
  color: white;
  padding: 8px 15px;
  border-radius: 20px;
  font-size: 0.85rem;
  display: inline-block;
}

/* Track styling */
.cards-track {
  position: relative;
  width: 100%;
  height: 100%;
}

/* Scroll inner created by JS */
.scroll-inner {
  position: absolute;
  width: 100%;
  top: 0;
  left: 0;
  display: flex;
  flex-direction: column;
  gap: 15px; /* Smaller gap for mobile */
}

/* Mini card styling */
.mini-card {
  width: 100%;
  height: auto;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease;
  background: white;
}

.mini-card:active {
  transform: scale(0.98); /* Touch feedback */
}

.mini-card img {
  width: 100%;
  height: 200px; /* Smaller height for mobile */
  object-fit: cover;
  display: block;
  -webkit-touch-callout: none; /* Disable iOS touch callout */
}

/* Placeholder for broken images */
.img-placeholder {
  width: 100%;
  height: 200px;
  background: linear-gradient(45deg, #f5f5f5, #e8e8e8);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #6c757d;
  font-weight: 500;
  border-radius: 12px;
}

/* Right section */
.right-section {
  width: 100%;
  order: 1; /* Text comes first on mobile */
}

.right-text {
  padding: 0 5px;
}

/* Activity title */
.activity-title {
  color: #333;
  font-size: 1.8rem;
  font-weight: 700;
  margin-bottom: 20px;
  line-height: 1.3;
}

/* Activity description */
.activity-description p {
  color: #555;
  font-size: 1rem;
  line-height: 1.7;
  margin-bottom: 20px;
}

/* Mobile instructions */
.mobile-instructions {
  background: #f8f9fa;
  border-radius: 12px;
  padding: 15px;
  margin-top: 25px;
  border-left: 4px solid #007bff;
}

.instruction-item {
  display: flex;
  align-items: center;
  margin-bottom: 12px;
  color: #666;
  font-size: 0.9rem;
}

.instruction-item:last-child {
  margin-bottom: 0;
}

.instruction-item i {
  color: #007bff;
  margin-right: 12px;
  font-size: 1rem;
  width: 24px;
}

/* Tablet (768px and up) */
@media (min-width: 768px) {
  .square-box {
    padding: 30px;
    gap: 40px;
  }
  
  .cards-viewport {
    height: 400px;
  }
  
  .mini-card img {
    height: 250px;
  }
  
  .img-placeholder {
    height: 250px;
  }
  
  .activity-title {
    font-size: 2.2rem;
  }
  
  .activity-description p {
    font-size: 1.1rem;
  }
  
  .cards-viewport {
    height: 400px;
  }
  
  .scroll-inner {
    gap: 20px;
  }
}

/* Desktop (992px and up) */
@media (min-width: 992px) {
  .square-box {
    flex-direction: row;
    gap: 50px;
    padding: 40px;
  }
  
  .left-section {
    flex: 1;
    order: 1; /* Images back to left on desktop */
    min-width: 0;
  }
  
  .right-section {
    flex: 1;
    order: 2; /* Text back to right on desktop */
    min-width: 0;
    display: flex;
    align-items: center;
  }
  
  .cards-viewport {
    height: 500px;
  }
  
  .mini-card img {
    height: 230px;
  }
  
  .img-placeholder {
    height: 230px;
  }
  
  .activity-title {
    font-size: 2.5rem;
  }
  
  .mobile-instructions {
    display: none; /* Hide mobile instructions on desktop */
  }
  
  /* Show touch indicator on hover for desktop */
  .cards-viewport:hover .touch-indicator {
    opacity: 1;
  }
}

/* Large Desktop (1200px and up) */
@media (min-width: 1200px) {
  .cards-viewport {
    height: 550px;
  }
  
  .mini-card img {
    height: 250px;
  }
  
  .img-placeholder {
    height: 250px;
  }
  
  .scroll-inner {
    gap: 25px;
  }
}

/* Prevent text selection on images */
.mini-card {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* Smooth scrolling for mobile */
.scroll-inner {
  -webkit-overflow-scrolling: touch;
}

/* Loading state */
.loading .cards-viewport {
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: loading 1.5s infinite;
}

@keyframes loading {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* Landscape orientation adjustments */
@media (max-height: 600px) and (orientation: landscape) {
  .square-box {
    flex-direction: row;
    padding: 20px;
  }
  
  .cards-viewport {
    height: 250px;
  }
  
  .mini-card img {
    height: 180px;
  }
  
  .activity-title {
    font-size: 1.5rem;
    margin-bottom: 15px;
  }
  
  .activity-description p {
    font-size: 0.9rem;
    margin-bottom: 15px;
  }
}

/* Very small screens */
@media (max-width: 360px) {
  .square-box {
    padding: 15px;
    border-radius: 15px;
  }
  
  .cards-viewport {
    height: 250px;
  }
  
  .mini-card img {
    height: 180px;
  }
  
  .activity-title {
    font-size: 1.5rem;
  }
  
  .activity-description p {
    font-size: 0.95rem;
  }
}

.about-title {
    margin-top: 40px;   /* increase to 15px / 20px if needed :- for about peppe  planet*/
}


@media (max-width: 768px) {

    /* Reduce space below fixed navbar */
    .section.position-relative.bg-attach-cover {
        padding-top: 1.5rem !important;  /* try 2rem / 1.5rem if needed */

    }

    /* Fine-tune hero heading spacing */
    .hero-heading h2 {
        margin-bottom: 0px;
        margin-top: -8px;
    }

    .hero-heading h1 {
        margin-top: 0;
    }
}
/*git add
git commit -m ""
git push -u origin main*/


/**********************************************************/
/*style updations*/
/**********************************************************/
@media (max-width: 768px) {

  /* Hero section – add a little breathing room */
  .section.position-relative.bg-attach-cover {
    padding-top: 2.5rem !important;
    padding-bottom: 16rem !important; /* increased from 14rem */
  }

  /* Activities section – pull up less */
  .activities-section {
    margin-top: -2rem !important; /* reduced from -2.5rem */
  }

}

 /* ===============================
     UPDATIONS FOR THE RIDES SECTION IN THE INDEX PAGE FOR MOBILE VIEW
     =============================== */


/* Mobile card styles with alternating text positions - NO BLACK SHADES */
@media (max-width: 767px) {
    .swiperTeam .swiper-slide {
        padding: 0 5px !important;
    }
    
    .swiperTeam .swiper-slide > .accordion-container {
        height: 100% !important;
    }
    
    .swiperTeam .swiper-slide > .accordion-container > .accordion-item {
        height: 420px !important;
        min-height: 420px !important;
        display: flex !important;
        flex-direction: column !important;
        position: relative !important;
        border-radius: 15px !important;
        overflow: hidden !important;
        padding-top: 40px !important;
    }
    
    /* Social icons positioning */
    .swiperTeam .social-container {
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        z-index: 20 !important;
        padding: 10px 8px !important;
        background: rgba(255, 255, 255, 0.9) !important;
        border-top-right-radius: 15px !important;
    }
    
    /* ========== ODD CARDS (1st, 3rd, 5th) - TEXT AT TOP ========== */
    .swiperTeam .swiper-slide:nth-child(odd) .accordion-item {
        justify-content: flex-start !important;
    }
    
    .swiperTeam .swiper-slide:nth-child(odd) .team-title {
        text-align: center !important;
        padding: 15px 10px 10px 10px !important;
        margin-bottom: 5px !important;
        position: relative !important;
        z-index: 5 !important;
        order: 1 !important; /* Text comes first */
        /* REMOVED: background: linear-gradient(to bottom, rgba(0,0,0,0.4), transparent) !important; */
        /* REMOVED: border-bottom: 2px solid rgba(255,255,255,0.2) !important; */
    }
    
    .swiperTeam .swiper-slide:nth-child(odd) .team-title h4 {
        font-size: 22px !important;
        font-weight: 800 !important;
        margin: 0 !important;
        color: #FFFFFF !important;
        text-shadow: 2px 2px 4px rgba(0,0,0,0.5) !important; /* Kept for text readability */
        letter-spacing: 0.5px !important;
        line-height: 1.2 !important;
    }
    
    .swiperTeam .swiper-slide:nth-child(odd) .team-img {
        flex: 1 !important;
        display: flex !important;
        align-items: center !important; /* Center vertically */
        justify-content: center !important;
        padding: 10px !important;
        margin: 0 !important;
        min-height: 250px !important;
        order: 2 !important; /* Image comes after text */
    }
    
    .swiperTeam .swiper-slide:nth-child(odd) .team-img img {
        max-height: 220px !important;
        max-width: 85% !important;
        width: auto !important;
        height: auto !important;
        object-fit: contain !important;
        margin-top: 10px !important; /* Space from text */
    }
    
    /* ========== EVEN CARDS (2nd, 4th, 6th) - TEXT AT BOTTOM ========== */
    .swiperTeam .swiper-slide:nth-child(even) .accordion-item {
        justify-content: flex-end !important;
    }
    
    .swiperTeam .swiper-slide:nth-child(even) .team-title {
        text-align: center !important;
        padding: 10px 10px 15px 10px !important;
        margin-top: 5px !important;
        position: relative !important;
        z-index: 5 !important;
        order: 2 !important; /* Text comes after image */
        /* REMOVED: background: linear-gradient(to top, rgba(0,0,0,0.4), transparent) !important; */
        /* REMOVED: border-top: 2px solid rgba(255,255,255,0.2) !important; */
    }
    
    .swiperTeam .swiper-slide:nth-child(even) .team-title h4 {
        font-size: 22px !important;
        font-weight: 800 !important;
        margin: 0 !important;
        color: #FFFFFF !important;
        text-shadow: 2px 2px 4px rgba(0,0,0,0.5) !important; /* Kept for text readability */
        letter-spacing: 0.5px !important;
        line-height: 1.2 !important;
    }
    
    .swiperTeam .swiper-slide:nth-child(even) .team-img {
        flex: 1 !important;
        display: flex !important;
        align-items: center !important; /* Center vertically */
        justify-content: center !important;
        padding: 10px !important;
        margin: 0 !important;
        min-height: 250px !important;
        order: 1 !important; /* Image comes before text */
    }
    
    .swiperTeam .swiper-slide:nth-child(even) .team-img img {
        max-height: 220px !important;
        max-width: 85% !important;
        width: auto !important;
        height: auto !important;
        object-fit: contain !important;
        margin-bottom: 10px !important; /* Space from text */
    }
    
    /* ========== COMMON STYLES ========== */
    /* Doodle/asset image */
    .swiperTeam .asset {
        position: absolute !important;
        z-index: 10 !important;
    }
    
    /* Doodle position for ODD cards (text top) */
    .swiperTeam .swiper-slide:nth-child(odd) .asset {
        bottom: 15px !important;
        right: 15px !important;
    }
    
    /* Doodle position for EVEN cards (text bottom) */
    .swiperTeam .swiper-slide:nth-child(even) .asset {
        top: 50px !important; /* Below social icons */
        right: 15px !important;
    }
    
    .swiperTeam .asset img {
        max-width: 65px !important;
        height: auto !important;
        opacity: 0.9 !important;
        filter: drop-shadow(0 2px 3px rgba(0,0,0,0.2)) !important;
    }
    
    /* Social icons styling */
    .swiperTeam .social-container .social-item,
    .swiperTeam .social-container .social-item-2,
    .swiperTeam .social-container .social-item-3,
    .swiperTeam .social-container .social-item-4,
    .swiperTeam .social-container .social-item-5,
    .swiperTeam .social-container .social-item-6 {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 28px !important;
        height: 28px !important;
        border-radius: 50% !important;
        margin: 3px 0 !important;
        font-size: 14px !important;
    }
}

/* Adjust for very small mobile screens */
@media (max-width: 360px) {
    .swiperTeam .swiper-slide > .accordion-container > .accordion-item {
        height: 400px !important;
        min-height: 400px !important;
    }
    
    .swiperTeam .team-title h4 {
        font-size: 20px !important;
    }
    
    .swiperTeam .team-img img {
        max-height: 200px !important;
    }
}

/* Alternative: If you want to control text position with classes instead */
@media (max-width: 767px) {
    /* Text at top class */
    .text-top .team-title {
        order: 1 !important;
        margin-bottom: 10px !important;
        /* REMOVED: background: linear-gradient(to bottom, rgba(0,0,0,0.4), transparent) !important; */
    }
    
    .text-top .team-img {
        order: 2 !important;
        align-items: center !important;
    }
    
    .text-top .team-img img {
        margin-top: 10px !important;
    }
    
    /* Text at bottom class */
    .text-bottom .team-title {
        order: 2 !important;
        margin-top: 10px !important;
        /* REMOVED: background: linear-gradient(to top, rgba(0,0,0,0.4), transparent) !important; */
    }
    
    .text-bottom .team-img {
        order: 1 !important;
        align-items: center !important;
    }
    
    .text-bottom .team-img img {
        margin-bottom: 10px !important;
    }
}



 /* ===============================
     UPDATIONS FOR TESTIMONIALS FOR MOBILE VIEW
     =============================== */


@media (max-width: 768px) {

  /* ===============================
     REMOVE BOOTSTRAP GUTTERS
     =============================== */
  .row {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  .row > * {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* ===============================
     SCROLL CONTAINER (IMPORTANT FIX)
     =============================== */
  .service-scroll {
    max-height: 260px !important;      /* one card height */
    overflow-y: auto;
    padding-right: 4px !important;
    padding-bottom: 40px !important;   /* 👈 allows last card */
    
    scroll-snap-type: y proximity;     /* 👈 NOT mandatory */
  }

  /* ===============================
     TESTIMONIAL CARD
     =============================== */
  .testimonial-container.card {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;

    padding: 0.9rem !important;
    margin-bottom: 0.6rem !important;

    min-height: unset !important;
    height: auto !important;

    flex-shrink: 0;
    scroll-snap-align: start;
  }

  /* ===============================
     TEXT SPACING
     =============================== */
  .testimonial-container.card p,
  .testimonial-container.card blockquote {
    margin: 0 0 0.5rem 0 !important;
    padding: 0 !important;
    line-height: 1.45;
  }

  /* ===============================
     USER / NAME SECTION
     =============================== */
  .testimonial-container.card h6,
  .testimonial-container.card small {
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1.3;
  }

  /* ===============================
     FLEX GAP REDUCTION
     =============================== */
  .testimonial-container.card .d-flex,
  .testimonial-container.card .flex-column {
    gap: 0.4rem !important;
  }

  /* ===============================
     SCROLLBAR
     =============================== */
  .service-scroll::-webkit-scrollbar {
    width: 3px;
  }

  .service-scroll::-webkit-scrollbar-thumb {
    background: #7b2cbf;
    border-radius: 10px;
  }

  .service-scroll::-webkit-scrollbar-track {
    background: transparent;
  }

}

/* ===============================
   FULL SCREEN HERO BANNER
================================ */

.banner-section {
    height: 100vh;
    overflow: hidden;
    margin-top: 90px; /* space below navbar */
}

.banner-fullscreen {
    height: 100vh;
}

.banner-fullscreen .carousel-item {
    height: 100vh;
    position: relative;
}

/* Banner image */
.banner-img {
    height: 100vh;
    width: 100%;
    object-fit: cover;
    animation: zoomInOut 20s ease-in-out infinite;
}

/* Dark overlay */
.carousel-item::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.35);
    z-index: 1;
}

/* Caption */
.carousel-caption {
    position: absolute;
    z-index: 2;
    bottom: 30%;
    text-align: center;
}

.carousel-caption h3 {
    font-size: clamp(2rem, 4vw, 3.5rem);
    font-weight: 800;
}

.carousel-caption p {
    font-size: 1.2rem;
}

/* Zoom animation */
@keyframes zoomInOut {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.12);
    }
    100% {
        transform: scale(1);
    }
}

/* Remove rounded corners */
.carousel-inner {
    border-radius: 0 !important;
}

/* Mobile optimization */
@media (max-width: 768px) {
    .carousel-caption {
        bottom: 20%;
    }

    .carousel-caption h3 {
        font-size: 1.8rem;
    }
}
/* HERO WRAPPER */
.hero-banner {
    position: relative;
    height: calc(100vh - 90px); /* navbar height */
    margin-top: 90px;
    overflow: hidden;
}

/* Carousel */
.hero-banner .carousel,
.hero-banner .carousel-inner,
.hero-banner .carousel-item {
    height: 100%;
}

/* Image */
.banner-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    animation: zoomInOut 20s ease-in-out infinite;
}

/* Overlay */
.hero-banner::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.35);
    z-index: 1;
}

/* HERO TEXT */
.hero-content {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: #fff;
    padding: 20px;
}

/* Zoom animation */
@keyframes zoomInOut {
    0% { transform: scale(1); }
    50% { transform: scale(1.12); }
    100% { transform: scale(1); }
}
section + section {
    margin-top: 80px;
}
/* Marquee Container */
.marquee-container {
  width: 100%;
  overflow: hidden;
  white-space: nowrap;
  position: relative;
  margin: 20px 0;
  padding: 10px 0;
  background: white; /* Add background to ensure visibility */
}

.marquee-content {
  display: inline-flex;
  animation: marquee-scroll 30s linear infinite;
}

/* Marquee Items */
.marquee-item {
  display: inline-flex;
  align-items: center;
  padding: 0 20px;
  flex-shrink: 0;
}

.marquee-item h4 {
  margin: 0;
  font-size: 1.5rem;
  color: #4B0081; /* Your accent color */
}

.marquee-item img {
  height: 60px;
  width: auto;
  object-fit: contain;
}

/* Single Direction Animation */
@keyframes marquee-scroll {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}

/* Pause animation on hover */
.marquee-container:hover .marquee-content {
  animation-play-state: paused;
}