/* 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            */
/* Vendor CSS chargés dans header.php (évite blocage antivirus cPanel) */
/* ---------------------------- */

/* ---------------------------- */
/* Keyframes and Property Animations            */
/* ---------------------------- */
/* Animation progress — @property retiré (faux positif Imunify360 sur certains hébergeurs) */
@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: #FCFCFC;
    --green: #105742;
    --black: #161D1B;
    --grey: #545353;
    --grey-light: #767676;
    --grey-accent: #F3F3F3;
    --green-neon: #A7EC4F;
    --green-dark: #122E26;
    --green-accent: #086350;
    --gradient-left: linear-gradient(262.01deg, #105742 -12.43%, #076653 45.32%, #E3EF26 125.28%);
    --gradient-right: linear-gradient(262.01deg, #E3EF26 -7.22%, #076653 72.74%, #0C342C 130.49%);
    --gradient-bottom: linear-gradient(230deg, #122E26 62%, #07664E 75.68%, #b7d42f 98.31%);
    --gradient-footer: linear-gradient(180deg, #0C342C 46.04%, #076653 84.68%, #E3EF26 130.31%);

    --font-1: "DM Sans", sans-serif;
}


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


/* ---------------------------- */
/* Typography                   */
/* ---------------------------- */
h1 {
    font-size: 66px;
    font-weight: 500;
}

h2 {
    font-size: 62px;
    font-weight: 500;
}


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

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

h5 {
    font-size: 24px;
    font-weight: 300;
}

h6 {
    font-size: 18px;
    font-weight: 600;
}

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

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

ul {
    list-style: none;
}

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

li {
    font-size: 16px;
}

img {
    object-fit: cover;
}

.text-accent {
    color: var(--green-neon);
}

.text-accent-2 {
    background: -webkit-linear-gradient(262.01deg, #105742 -12.43%, #076653 45.32%, #E3EF26 125.28%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

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

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

.display {
    font-size: 180px;
    font-weight: 600;
}

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

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

.button-text {
    font-size: 16px;
    font-weight: 600;
    color: var(--text-color-2);
}

.small-text {
    font-size: 14px;
    font-family: var(--font-1);
}

.fun-fact {
    font-size: 48px;
    font-weight: 600;
}

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

.sub-heading {
    padding: 15px;
    border: 1px solid var(--green);
    border-radius: 10px;
    color: var(--green);
    width: max-content;
}

.sub-heading.cta {
    border: 1px solid var(--green-neon);
    color: var(--green-neon);
}

.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: 10px;
    color: var(--primary);
    border: 1px solid var(--primary);
    outline: none;
    font-family: var(--font-1);
}

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

.form.contact input:focus,
.form.contact textarea:focus,
.form.contact select:focus {
    box-shadow: none;
    border: solid 1px --primary;
    background-color: transparent;
    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-1);
}

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

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

.form.contact .submit_form:hover {
    background-color: var(--gradient-left);
    color: var(--primary);
    border: solid 1px var(--gradient-right);
}

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

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

/* Style khusus untuk opsi yang terpilih */
form select.form-select option:checked {
    color: var(--text-color-2);
}

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

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

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

.custom-input-group {
    padding: 10px;
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(17.5px);
    border-radius: 20px;

}

.custom-email-input {
    border: none !important;
    background: transparent !important;
    color: var(--text-color) !important;
    padding-left: 20px;
    padding-right: 0;
    font-size: 18px;
}

.custom-email-input::placeholder {
    color: var(--accent-color-4);
    font-size: 18px;
}

.custom-submit-button {
    background-color: var(--black-1) !important;
    color: var(--primary) !important;
    font-weight: 600;
    padding: 12px 24px !important;
    border-radius: 20px !important;
    transition: all 0.3s ease;
}

.custom-submit-button:hover {
    opacity: 0.9;
}

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

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

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

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

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


.submit_form:hover {
    background-color: var(--gradient-left);
    color: var(--black-1);
    border: 1px solid var(--gradient-left);
}

.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, Footer and Navbar       */
/* ---------------------------- */
#header {
    transition: all 0.5s ease;
}

.logo-container {
    max-width: 87px;
    background: var(--gradient-right);
    padding: 10px;
    border-radius: 10px;
}

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

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

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

.offcanvas-body {
    overflow: visible;
}

.navigation {
    display: grid;
    grid-template-columns: 1.5fr 2.5fr 0.5fr;
    align-items: center;
    color: var(--gray);
    transition: all 0.5s;
}

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

.navigation .header-text {
    font-size: 48px;
    font-weight: 600;
}

.navigation a {
    color: var(--gray);
    transition: all 0.5s;
}

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

.navigation img {
    opacity: 0;
    margin-block: -3rem;
    justify-self: center;
    transition: all 1s;
    transform: scale(1);
    position: relative;
    z-index: 9999;
}

.navigation:hover img {
    opacity: 1;
}

.navbar .container-fluid {
    width: unset;
    justify-content: center;
    gap: 1rem;
    padding-inline: 20px;
    padding-block: 10px;
    background-color: var(--primary);
    border-radius: 10px;
}

.navbar {
    padding-block: 1.5rem;
}

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

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

.navbar-expand-xl .navbar-nav .nav-link {
    padding-inline: 1rem;
}

.nav-link {
    font-size: 16px;
    font-family: var(--font-1);
    font-weight: bold;
    color: var(--grey-light);
    text-align: center;
    padding-block: 1.2rem;
}

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

.nav-link.active {
    color: var(--green-accent) !important;
    text-align: center;
}

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

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

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

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

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

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

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

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

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

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

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

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

/* ---------------------------- */
/* Section and Container       */
/* ---------------------------- */
.section {
    padding: 6em 3em 6em 3em;
    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-green {
    background-color: var(--green);
}

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

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

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

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

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

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

.bg-gradient-left {
    background: var(--gradient-left);
}

.bg-gradient-right {
    background: var(--gradient-right);
}

.bg-gradient-bottom {
    background: var(--gradient-bottom);
}

.bg-gradient-footer {
    background: var(--gradient-footer);
}

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

.bg-glass {
    background: rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(5px);
    border-radius: 13px;
    width: max-content;
}

.gradient-white {
    background: linear-gradient(90deg, #FCFCFC 37.29%, rgba(252, 252, 252, 0) 96.57%);
    width: 50%;
    height: 100%;
    position: absolute;
    left: 0;
    bottom: 0;
    z-index: 3;
}

.num-hover {
    color: var(--primary);
    transition: all 0.5s;
}

.num-hover:hover {
    color: var(--green-neon);
}

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

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

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

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

.grey-light {
    color: var(--grey-light);
}

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

.green-neon {
    color: var(--green-neon);
}

.green-dark {
    color: var(--green-dark);
}

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

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

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

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

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

.custom-border-2.accent {
    border-color: var(--primary);
    background-color: var(--primary);
    font-size: 64px;
}

.custom-border-3 {
    border: 1px solid var(--green-dark);
    background-color: var(--primary);
    border-radius: 50%;
    aspect-ratio: 1/1;
    padding: 15px;
    display: flex;
    font-size: 64px;
    align-items: center;
    justify-content: center;
    text-align: center;
    position: relative;
    z-index: 2;
    width: max-content;
    transition: all 0.2s ease;
}

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