/* Typography & Core Layout */
body { 
    font-family: 'Plus Jakarta Sans', sans-serif; 
    scroll-behavior: smooth; 
}


    html, body {
        max-width: 100%;
        overflow-x: hidden;
        position: relative;
        scroll-behavior: smooth;
    }
.scroll-mt { scroll-margin-top: 120px; }


/* Glassmorphism & Effects */
.glass { 
    background: rgba(255, 255, 255, 0.85); 
    backdrop-filter: blur(12px); 
}

.gradient-text { 
    background: linear-gradient(135deg, #134e4a, #5fb5b3); 
    -webkit-background-clip: text; 
    -webkit-text-fill-color: transparent; 
}

/* Brand Colors */
.accent-teal { color: #5fb5b3; } 
.bg-accent-teal { background-color: #5fb5b3; }

/* Interactive Components */
.card-hover:hover { 
    transform: translateY(-8px); 
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); 
}

/* Swiper Slider Customization */
.swiper-pagination-bullet-active {
    background: #0d9488 !important; 
}

.reviews-slider {
    padding-bottom: 50px !important;
}

/* Hide scrollbar for Chrome, Safari and Opera */
.scrollbar-hide::-webkit-scrollbar {
    display: none;
}

/* Hide scrollbar for IE, Edge and Firefox */
.scrollbar-hide {
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
}


/* 1. Remove the default Swiper icons (the ones causing the double look) */
.gallery-slider .swiper-button-next::after, 
.gallery-slider .swiper-button-prev::after {
    content: "" !important;
    display: none !important;
}

/* Target the SVG specifically to make the arrow bigger */
.gallery-slider .swiper-button-next svg, 
.gallery-slider .swiper-button-prev svg {
    width: 28px !important;  /* Increased from 24px */
    height: 28px !important; /* Increased from 24px */
    stroke-width: 3;        /* Makes the arrow lines thicker and bolder */
}

/* Ensure the button container itself is large enough to hold the bigger icon */
.gallery-slider .swiper-button-next, 
.gallery-slider .swiper-button-prev {
    width: 54px !important;  /* Slightly larger button */
    height: 54px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}