@font-face {
    font-family: 'Neue Haas Grotesk Display Pro';
    font-style: normal;
    font-weight: 100;
    src: url('https://fonts.cdnfonts.com/s/47998/NeueHaasDisplayXXThin.woff') format('woff');
    font-display: swap;
}
@font-face {
    font-family: 'Neue Haas Grotesk Display Pro';
    font-style: normal;
    font-weight: 200;
    src: url('https://fonts.cdnfonts.com/s/47998/NeueHaasDisplayXThin.woff') format('woff');
    font-display: swap;
}
@font-face {
    font-family: 'Neue Haas Grotesk Display Pro';
    font-style: normal;
    font-weight: 300;
    src: url('https://fonts.cdnfonts.com/s/47998/NeueHaasDisplayThin.woff') format('woff');
    font-display: swap;
}
@font-face {
    font-family: 'Neue Haas Grotesk Display Pro';
    font-style: normal;
    font-weight: 400;
    src: url('https://fonts.cdnfonts.com/s/47998/NeueHaasDisplayLight.woff') format('woff');
    font-display: swap;
}
@font-face {
    font-family: 'Neue Haas Grotesk Display Pro';
    font-style: normal;
    font-weight: 500;
    src: url('https://fonts.cdnfonts.com/s/47998/NeueHaasDisplayRoman.woff') format('woff');
    font-display: swap;
}
@font-face {
    font-family: 'Neue Haas Grotesk Display Pro';
    font-style: normal;
    font-weight: 600;
    src: url('https://fonts.cdnfonts.com/s/47998/NeueHaasDisplayMediu.woff') format('woff');
    font-display: swap;
}
@font-face {
    font-family: 'Neue Haas Grotesk Display Pro';
    font-style: normal;
    font-weight: 700;
    src: url('https://fonts.cdnfonts.com/s/47998/NeueHaasDisplayBold.woff') format('woff');
    font-display: swap;
}
@font-face {
    font-family: 'Neue Haas Grotesk Display Pro';
    font-style: normal;
    font-weight: 900;
    src: url('https://fonts.cdnfonts.com/s/47998/NeueHaasDisplayBlack.woff') format('woff');
    font-display: swap;
}

/* Italic variants */
@font-face {
    font-family: 'Neue Haas Grotesk Display Pro';
    font-style: italic;
    font-weight: 400;
    src: url('https://fonts.cdnfonts.com/s/47998/NeueHaasDisplayLightItalic.woff') format('woff');
    font-display: swap;
}
@font-face {
    font-family: 'Neue Haas Grotesk Display Pro';
    font-style: italic;
    font-weight: 500;
    src: url('https://fonts.cdnfonts.com/s/47998/NeueHaasDisplayRomanItalic.woff') format('woff');
    font-display: swap;
}
@font-face {
    font-family: 'Neue Haas Grotesk Display Pro';
    font-style: italic;
    font-weight: 700;
    src: url('https://fonts.cdnfonts.com/s/47998/NeueHaasDisplayBoldItalic.woff') format('woff');
    font-display: swap;
}
@font-face {
    font-family: 'Neue Haas Grotesk Display Pro';
    font-style: italic;
    font-weight: 900;
    src: url('https://fonts.cdnfonts.com/s/47998/NeueHaasDisplayBlackItalic.woff') format('woff');
    font-display: swap;
}

:root {
    --primary-color: #E76B77;
    --secondary-color: #f8f9fa;
    --text-brown: #733929;
    --text-gray: #A6A6A6;
    --bg-cream: #f5f1ee;
    /* Font family dengan fallback yang lebih baik */
    --font-family: 'Neue Haas Grotesk Display Pro', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    /* Adjust font weights sesuai yang tersedia */
    --font-weight-thin: 100;
    --font-weight-extralight: 200;
    --font-weight-light: 300;
    --font-weight-regular: 400; /* Light di CDN */
    --font-weight-medium: 600; /* Roman di CDN */
    --font-weight-semibold: 600; /* Medium di CDN */
    --font-weight-bold: 700;
    --font-weight-black: 900;
}

    * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }
    
    body {
        font-family: var(--font-family);
        line-height: 1.6;
        color: #333;
    }
    
    /* Force font family on all elements except Font Awesome icons */
    *:not([class*="fa-"]):not(.fa):not(.fas):not(.far):not(.fal):not(.fab):not(.fad), 
    *:not([class*="fa-"]):not(.fa):not(.fas):not(.far):not(.fal):not(.fab):not(.fad)::before, 
    *:not([class*="fa-"]):not(.fa):not(.fas):not(.far):not(.fal):not(.fab):not(.fad)::after {
        font-family: var(--font-family) !important;
    }

    /* Ensure Font Awesome icons keep their proper font families */
    i[class*="fa-"],
    .fa,
    .fas,
    .far,
    .fal,
    .fab,
    .fad,
    i[class*="fa-"]::before,
    .fa::before,
    .fas::before,
    .far::before,
    .fal::before,
    .fab::before,
    .fad::before {
        font-family: "Font Awesome 6 Free", "Font Awesome 6 Brands", "Font Awesome 6 Pro" !important;
    }
    
    /* Header & Navigation */
    .navbar {
        padding: 15px 0;
        transition: all 0.3s ease;
        font-family: var(--font-family) !important;
    }
    
    .navbar-brand img {
        height: 40px;
        transition: all 0.3s ease;
    }
    
    .navbar-nav .nav-link {
        color: #7F8694 !important;
        font-weight: var(--font-weight-medium);
        margin: 0 15px;
        padding: 8px 0 !important;
        position: relative;
        transition: all 0.3s ease;
        font-family: var(--font-family) !important;
    }
    
    .navbar-nav .nav-link:hover {
        color: #7c682a !important;
    }
    
    .navbar-nav .nav-link:hover::after {
        width: 100%;
    }
    
    .btn-search, .btn-language {
        background: none;
        border: none;
        color: #333;
        font-weight: 500;
        padding: 8px 15px;
        transition: all 0.3s ease;
        font-family: var (--font-family) !important;
    }
    
    .btn-search:hover, .btn-language:hover {
        color: var(--primary-color);
    }
    
    .btn-login {
        background-color: var(--primary-color);
        color: white;
        border: none;
        padding: 12px 30px;
        border-radius: 25px;
        font-weight: 500;
        transition: all 0.3s ease;
        font-family: var(--font-family) !important;
    }
    
    .btn-login:hover {
        background-color: #c8866b;
        transform: translateY(-2px);
        box-shadow: 0 5px 15px rgba(212, 146, 122, 0.3);
    }
    
    /* Booking Section */
    .booking-section {
        background-color: var(--bg-cream);
        padding-bottom: 72px;
        padding-top: 72px;
    }
    
    .booking-title {
        color: var(--text-brown);
        font-size: 40px;
        font-weight: 900;
        margin-bottom: 30px;
        line-height: 1.2;
        font-family: var(--font-family) !important;
    }
    
    .booking-text {
        color: #A6A6A6;
        font-size: 20px;
        line-height: 1.8;
        margin-bottom: 40px;
        font-style: italic;
        font-weight: var(--font-weight-medium);
        font-family: var(--font-family) !important;
    }
    .booking-sect{
        padding-left: 122px;
    }
    @media screen and (max-width: 480px) {
        .booking-sect{
        padding-left: 15px;
    }  
 
    .booking-section{
        padding-bottom: 72px;
        padding-top: 72px;
    }
    }
  

    .btn-booking-treatment {
        background-color: var(--primary-color) !important;
        color: white !important;
        padding: 8px 16px 8px 16px !important;
        border: none !important;
        border-radius: 12px !important;
        font-weight: 700 !important;
        font-size: 14px !important;
        transition: all 0.3s ease !important;
        font-family: var(--font-family) !important;
    }
    
    .btn-booking-treatment:hover {
        background-color: #c8866b !important;
        transform: translateY(-3px) !important;
        box-shadow: 0 10px 25px rgba(212, 146, 122, 0.4) !important;
    }
    
    /* Brand Section */
    .brand-section {
       /*padding-top: 72px;*/
       padding-bottom: 0px;
        background-color: #fff;
    }
    
    .brand-title {
        color: var(--text-brown);
        font-size: 40px;
        font-weight: var(--font-weight-black);
        text-align: center;
        margin-bottom: 25px;
        font-family: var(--font-family) !important;
    }
    
    .brand-subtitle {
        color: var(--text-gray);
        text-align: center;
        margin-bottom: 60px;
        font-size: 20px;
        font-style: italic;
        line-height: 150%;
        font-weight: var(--font-weight-medium);
        font-family: var(--font-family) !important;
    }
    
    .brand-card {
        height: 350px;
        border-radius: 25px;
        position: relative;
        overflow: hidden;
        margin-bottom: 0px;
        transition: all 0.3s ease;
        cursor: pointer;
    }
    @media screen and (max-width: 480px) {
        .brand-card {
            height: 280px;
        }
        .brand-section{
            padding-bottom: 40px;
        }
        
    }
/*         
    .brand-card:hover {
        transform: translateY(-10px);
        box-shadow: 0 20px 40px rgba(0,0,0,0.15);
    }
     */

    
    
    /* .brand-card:hover .brand-overlay {
        background: rgba(0,0,0,0.6);
    }
     */
    .brand-name {
        color: white;
        font-size: 2rem;
        font-weight: 700;
        text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
        transition: all 0.3s ease;
        font-family: var(--font-family) !important;
    }
    
    .brand-card:hover .brand-name {
        transform: scale(1.1);
    }
    
    /* .natasha-brand {
        background: linear-gradient(135deg, #d4927a, #c8866b);
    }
    
    .renard-brand {
        background: linear-gradient(135deg, #e5e5e5, #d0d0d0);
    }
    
    .nox-brand {
        background: linear-gradient(135deg, #f4b942, #e6a635);
    }
    
    .diamonie-brand {
        background: linear-gradient(135deg, #f0f0f0, #e0e0e0);
    } */
    
    /* Treatment Section */
    .treatment-section {
        padding: 100px 0;
        background-color: var(--bg-cream);
    }
    
    .treatment-title {
        color: var(--text-brown);
        font-size: 3rem;
        font-weight: 700;
        text-align: center;
        margin-bottom: 25px;
        font-family: var(--font-family) !important;
    }
    
    .treatment-subtitle {
        color: var(--text-gray);
        text-align: center;
        margin-bottom: 60px;
        font-size: 1.2rem;
        line-height: 1.6;
        font-family: var(--font-family) !important;
    }
    
    .treatment-card {
        background: white;
        border-radius: 20px;
        overflow: hidden;
        box-shadow: 0 10px 30px rgba(0,0,0,0.1);
        margin-bottom: 30px;
        transition: all 0.3s ease;
    }
    
    .treatment-card:hover {
        transform: translateY(-10px);
        box-shadow: 0 20px 50px rgba(0,0,0,0.15);
    }
    
    .treatment-image {
        height: 280px;
        background-size: cover;
        background-position: center;
        position: relative;
    }
    
    .treatment-content {
        padding: 35px;
    }
    
    .treatment-card-title {
        color: var(--text-brown);
        font-size: 1.8rem;
        font-weight: 700;
        margin-bottom: 20px;
        font-family: var(--font-family) !important;
    }
    
    .treatment-description {
        color: var(--text-gray);
        line-height: 1.7;
        margin-bottom: 25px;
        font-size: 1rem;
        font-family: var(--font-family) !important;
    }
    
    .treatment-buttons {
        display: flex;
        gap: 15px;
    }
    
    .btn-outline-treatment {
        border: 2px solid var(--primary-color);
        color: var(--primary-color);
        background: transparent;
        padding: 12px 25px;
        border-radius: 25px;
        text-decoration: none;
        font-weight: 600;
        transition: all 0.3s ease;
        font-size: 0.95rem;
        font-family: var(--font-family) !important;
    }
    
    .btn-outline-treatment:hover {
        background-color: var(--primary-color);
        color: white;
        transform: translateY(-2px);
    }
    
    /* Payment Section */
    .payment-section {
        padding-top: 0px;
        padding-bottom: 0px;
        background-color: #fff;
    }
    
    .payment-title {
        color: var(--text-brown);
        font-size: 40px;
        font-weight: var(--font-weight-black);
        text-align: center;
        margin-bottom: 25px;
        font-family: var(--font-family) !important;
    }
    
    .payment-subtitle {
        color: var(--text-gray);
        text-align: center;
        margin-bottom: 60px;
        font-size: 20px;
        line-height: 1.6;
        font-weight: var(--font-weight-medium);
        font-style: italic;
        font-family: var (--font-family) !important;
    }
    
    .payment-methods {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
        gap: 20px;
        max-width: 1000px;
        margin: 0 auto;
    }
    
    /* .payment-item {
        height: 90px;
        background: white;
        border: 2px solid #f0f0f0;
        border-radius: 15px;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: all 0.3s ease;
        cursor: pointer;
    }
    
    .payment-item:hover {
        border-color: var(--primary-color);
        transform: translateY(-5px);
        box-shadow: 0 10px 25px rgba(212, 146, 122, 0.2);
    }
    
    .payment-item img {
        max-width: 70%;
        max-height: 50px;
        object-fit: contain;
    } */
    
    /* Features Section */
    .features-section {
        background-color: var(--bg-cream);
        padding: 80px 0;
    }
    
    .feature-item {
        text-align: center;
        margin-bottom: 0px;
    }
    
    .feature-icon {
        color: var(--text-brown);
        font-size: 3rem;
        margin-bottom: 20px;
    }
    
    .feature-title {
        color: var(--text-brown);
        font-size: 1.4rem;
        font-weight: 700;
        margin-bottom: 15px;
        font-family: var(--font-family) !important;
    }
    
    .feature-description {
        color: var(--text-gray);
        font-size: 1rem;
        line-height: 1.6;
        font-family: var(--font-family) !important;
    }
    
    /* Footer */
    .footer {
        background-color: white;
        padding: 80px 0 40px;
    }
    
    .footer-logo img {
        height: 45px;
        margin-bottom: 25px;
    }
    
    .footer-description {
        color: var(--text-gray);
        line-height: 1.8;
        margin-bottom: 30px;
        max-width: 400px;
        font-size: 16px;
        font-weight: var(--font-weight-regular);
        font-family: var(--font-family) !important;
    }
    
    .footer-title {
        color: #111928;
        font-size: 14px;
        font-weight: var(--font-weight-bold);
        margin-bottom: 25px;
        font-family: var(--font-family) !important;
    }
    
    .footer-links {
        list-style: none;
        padding: 0;
    }
    
    .footer-links li {
        margin-bottom: 12px;
    }
    
    .footer-links a {
        color: var(--text-gray);
        text-decoration: none;
        transition: color 0.3s;
        font-size: 16px;
        font-weight: var(--font-weight-regular) ;
        font-family: var(--font-family) !important;
    }
    
    .footer-links a:hover {
        color: var(--text-brown);
    }
    
    .social-links {
        display: flex;
        gap: 20px;
    }
    
    .social-links a {
        color: var(--text-gray);
        font-size: 1.8rem;
        transition: all 0.3s;
    }
    
    .social-links a:hover {
        color: var(--text-brown);
        transform: translateY(-3px);
    }
    
    .footer-bottom {
        border-top: 1px solid #e0e0e0;
        padding-top: 30px;
        margin-top: 50px;
        text-align: center;
    }
    
    .footer-copyright {
        color: var(--text-gray);
        font-size: 16px;
        font-weight: var(--font-weight-regular);
        font-family: var(--font-family) !important;
    }

    #heroCarousel,
.carousel-inner,
.carousel-item {
width: 100%;
}

.carousel-item {
height: 70vh; /* default desktop */
}

.carousel-item img {
width: 100%;
height: 100%;
object-fit: contain; /* gambar utuh */
background-color: #fff; /* area kosong jadi putih */
}

/* Tablet */
@media (max-width: 992px) {
.carousel-item {
height: 60vh;
}
}

/* Mobile */
@media (max-width: 768px) {
.carousel-item {
height: 50vh;
}
}

/* HP kecil */
@media (max-width: 480px) {
.carousel-item {
height: 30vh;
}
.py-5 {
padding-top: 1rem !important;
padding-bottom: 3rem !important;
}
}

/* Tambahkan ini di bagian CSS */
.hero-slide-full {
width: 100%;
aspect-ratio: 16/6; /* samakan dengan rasio gambar */
background-size: contain; /* tidak terpotong, tapi bisa ada putih */
background-position: center;
background-repeat: no-repeat;
background-color: #fff;
}
@media (max-width: 992px) {
.hero-slide-full {
max-height: 60vh;
aspect-ratio: 16/8;
}
}
@media (max-width: 768px) {
.hero-slide-full {
max-height: 50vh;
aspect-ratio: 16/10;
}
}
@media (max-width: 480px) {
.hero-slide-full {
max-height: 40vh;
aspect-ratio: 16/12;
}
}

.carousel-control-next-icon,
.carousel-control-prev-icon {
background-color: #fff;
border-radius: 50%;
box-shadow: 0 2px 8px rgba(0,0,0,0.10);
width: 48px;
height: 48px;
background-size: 60% 60%;
background-position: center;
background-repeat: no-repeat;
/* border: 1px solid #e0e0e0; */
transition: background 0.2s;
}

.carousel-control-prev-icon {
/* Panah kiri hitam */
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='black' viewBox='0 0 16 16'%3E%3Cpath d='M11 2 5 8l6 6' stroke='black' stroke-width='2' fill='none'/%3E%3C/svg%3E");
}
.carousel-control-next-icon {
/* Panah kanan hitam */
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='black' viewBox='0 0 16 16'%3E%3Cpath d='M5 2l6 6-6 6' stroke='black' stroke-width='2' fill='none'/%3E%3C/svg%3E");
}

.carousel-control-next-icon:hover,
.carousel-control-prev-icon:hover {
background-color: #f5f1ee;
}



/* Swiper Styles - Update existing styles */
.slide-container{
/* max-width: 1120px; */
width: 100%;
padding: 0px 0;
}
.slide-content{
margin: 0 0px;
overflow: hidden;
border-radius: 16px; /* Ubah dari 25px ke 16px */
padding: 15px;
}
.card {
border-radius: 16px;
background-color: #FFF;
box-shadow: 0 5px 15px rgba(0,0,0,0.1);
height: auto;
display: flex;
flex-direction: column;
border-color: transparent;
}
.image-content,
.card-content{
display: flex;
flex-direction: column;
align-items: none;
padding: 10px 14px;
}
.image-content{
position: relative;
row-gap: 0px;
padding: 0px;
flex-shrink: 0;
}
.overlay::after{
border-radius: 0 25px 0 0;
background-color: #FFF;
}
.card-image{
position: relative;
/* height: 150px;
width: 150px;
border-radius: 50%; */
background: #FFF;
/* padding: 3px; */
}
.card-image .card-img {
height: 100%;
width: 100%;
object-fit: cover;
border-radius: 16px 16px 0 0; /* sama dengan .card */
}
.card-content{
flex: 1;
display: flex;
flex-direction: column;
justify-content: space-between;
padding: 20px;
text-align: left;
}
.name{
font-size: 20px;
color: var(--text-brown);
margin-bottom: 15px;
font-family: var(--font-family) !important;
}
.description{
font-size: 16px;
font-weight: var(--font-weight-medium);
color: #AA9C97;
text-align: left;
line-height: 1.5;
margin-bottom: 20px;
flex: 1;
font-family: var(--font-family) !important;
}
/* Button container for responsive layout */
.button-container{
display: flex;
flex-direction: column;
gap: 10px;
width: 100%;
}
.button{
border: 1px solid #E76B77;
font-size: 14px;
color: #E76B77;
padding: 10px 10px;
background-color: transparent;
border-radius: 12px;
cursor: pointer;
transition: all 0.3s ease;
font-weight: 700;
width: 100%;
min-height: 40px;
border-color: #E76B77;
font-family: var(--font-family) !important;
}
/* .button:hover{
background: var(--text-brown);
transform: translateY(-2px);
box-shadow: 0 5px 15px rgba(212, 146, 122, 0.3);
} */
/* .swiper-navBtn{
color: var(--primary-color);
transition: color 0.3s ease;
}
.swiper-navBtn:hover{
color: var(--text-brown);
}
.swiper-navBtn::before,
.swiper-navBtn::after{
font-size: 35px;
}
.swiper-button-next{
right: 0;
}
.swiper-button-prev{
left: 0;
} */
/* Custom Pagination Bullets */


/* .swiper-pagination-bullet{
background-color: var(--primary-color);
opacity: 0.5;
}
.swiper-pagination-bullet-active{
background-color: var(--primary-color);
opacity: 1;
} */

/* Swiper Custom Controls */

/* Custom Pagination - Make more visible */
/* .swiper-pagination {
position: static !important;
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
margin: 0 20px;
z-index: 10;
} */

/* .swiper-pagination-bullet {
width: 12px !important;
height: 12px !important;
background-color: #ddd !important;
opacity: 1 !important;
border-radius: 50% !important;
transition: all 0.3s ease !important;
cursor: pointer !important;
border: none !important;
margin: 0 !important;
}

.swiper-pagination-bullet-active {
background-color: var(--primary-color) !important;
transform: scale(1.2) !important;
} */

/* Ensure controls are visible */




/* Responsive breakpoints */
@media screen and (min-width: 768px) {
.button-container{
flex-direction: row;
justify-content: center;
gap: 15px;
}
.button{
width: 180px;
min-width: 100px;
flex: 1;
}
}

@media screen and (max-width: 768px) {
.slide-content{
margin: 0 10px;
}
.swiper-navBtn{
display: none;
}
.card-content{
padding: 15px;
}
.name{
font-size: 18px;
}
.description{
font-size: 13px;
}
.button{
font-size: 13px;
padding: 8px 16px;
min-height: 36px;
}
}

@media screen and (max-width: 480px) {
/* .card-image{
height: 120px;
width: 120px;
} */
.name{
font-size: 16px;
margin-bottom: 10px;
}
.description{
font-size: 12px;
margin-bottom: 15px;
}
}

/* Force font on all text elements */
h1, h2, h3, h4, h5, h6, p, span, div, a, button, input, textarea, label, li {
font-family: var(--font-family) !important;
}

/* Bootstrap overrides */
.btn, .form-control, .nav-link, .navbar-brand, .dropdown-item {
font-family: var(--font-family) !important;
}

/* Swiper overrides */
.swiper-wrapper, .swiper-slide, .swiper-pagination {
font-family: var(--font-family) !important;
}
.brand-swiper-wrapper, .brand-swiper-slide, .brand-swiper-pagination {
font-family: var(--font-family) !important;
}
.card-name{
font-weight: 900;
font-size: 34px;
color: #733929;
}

.swiper-controls-container {
display: flex;
align-items: center;
justify-content: center;
gap: 20px;
margin-top: 30px;
}
.brand-swiper-controls-container {
display: flex;
align-items: center;
justify-content: center;
gap: 20px;
margin-top: 30px;
}

/* Style untuk tombol navigasi custom */
.custom-nav-btn {
width: 40px;
height: 40px;
border-radius: 50%;
background: #f8f1f1;
border: none;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
color: #d4a4a4;
transition: all 0.3s ease;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.custom-nav-btn:hover {
background: #eee0e0;
color: #c49999;
transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.custom-nav-btn:active {
transform: translateY(0);
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* Override default swiper button styles */
.swiper-button-next,
.swiper-button-prev {
position: static;
margin-top: 0;
width: auto;
height: auto;
}

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

/* Custom pagination style */
.swiper-pagination {
position: sticky;
/* display: flex; */
gap: 8px;
}

.swiper-pagination .swiper-pagination-bullet {
width: 12px;
height: 12px;
background:#FFE0E3;
opacity: 1;
border-radius: 50%;
transition: all 0.3s ease;
}

.swiper-pagination .swiper-pagination-bullet-active {
background: #E76B77;
/* transform: scale(1.2); */
}

/* Brand Swiper custom controls & pagination (clone) */
.brand-swiper-button-next,
.brand-swiper-button-prev {
position: static;
margin-top: 0;
width: auto;
height: auto;
}

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

.brand-swiper-pagination {
position: sticky;
gap: 8px;
}

.brand-swiper-pagination .brand-swiper-pagination-bullet {
width: 12px;
height: 12px;
background: #FFE0E3;
opacity: 1;
border-radius: 50%;
transition: all 0.3s ease;
}

.brand-swiper-pagination .swiper-pagination-bullet-active {
background: #E76B77;
}
.payment-item {
background: none;
border: none;
border-radius: 0;
box-shadow: none;
height: auto;
display: flex;
align-items: center;
justify-content: center;
transition: none;
cursor: pointer;
padding: 0;
}
.payment-item img {
max-width: 100%;
max-height: 108px;
object-fit: contain;
/* Optional: add margin for spacing between logos */
margin: 0 auto;
display: block;
}
.g-4, .gx-4 {
--bs-gutter-x: -28.5rem;
padding-bottom: 48px;
}

@media screen and (max-width: 480px) {
.g-4, .gx-4 {
--bs-gutter-x: 1.5rem;
padding-bottom: 18px;
} 
.g-4, .gy-4 {
--bs-gutter-y: -8.5rem;
}
.payment-subtitle{
padding-bottom: 56px;
}
}
@media (max-width: 768px) {
.payment-grid > div {
flex: 0 0 50%;
max-width: 50%;
}

}
.feature-title{
    font-weight: var(--font-weight-bold);
}