body {
    font-family: 'Poppins', sans-serif;
    overscroll-behavior-y: none;
}

.whatsapp-button {
    background-image: linear-gradient(to right, #10b981 , #25D366, #10b981); /* Emerald to WhatsApp Green gradient */
    background-size: 200% auto;
    color: white;
    padding: 0.8rem 1.6rem;
    border-radius: 8px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    transition: all 0.4s ease-out;
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.4);
    border: none;
}

.whatsapp-button:hover {
    background-position: right center; /* change the direction of the change here */
    transform: translateY(-2px);
    box-shadow: 0 7px 18px rgba(16, 185, 129, 0.5);
}

.whatsapp-button i {
    font-size: 1.2em;
}

.section-padding {
    padding: 5rem 1.5rem;
}

@media (min-width: 768px) {
    .section-padding {
        padding: 7rem 1.5rem;
    }
}

.gradient-bg-vibrant {
    background: linear-gradient(180deg, theme('colors.white') 0%, theme('colors.primary.light')/50 100%);
}

.angled-divider-top {
    position: relative;
    background-color: theme('colors.white');
}

.angled-divider-top::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 80px; /* Adjust height of the angle */
    background-color: inherit; /* Match the section below */
    clip-path: polygon(0 100%, 100% 0, 100% 100%);
    transform: translateY(-100%);
}

.angled-divider-bottom {
    position: relative;
    background-color: theme('colors.primary.light'); /* Color of the section itself */
}

.angled-divider-bottom::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 80px; /* Adjust height of the angle */
    background-color: theme('colors.white'); /* Match the section below */
    clip-path: polygon(0 0, 100% 0, 0 100%); /* Flipped angle */
    transform: translateY(100%);
    z-index: 10; /* Ensure it overlaps section below */
}

.card-hover-vibrant {
    transition: all 0.3s ease-out;
    border-radius: theme('borderRadius.xl');
}

.card-hover-vibrant:hover {
    transform: translateY(-5px) scale(1.02);
    box-shadow: theme('boxShadow.xl');
}

/* Animations */
.animated-element {
    opacity: 0;
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.slide-in-left {
    transform: translateX(-30px);
}

.slide-in-right {
    transform: translateX(30px);
}

.slide-in-up {
    transform: translateY(30px);
}

.is-visible {
    opacity: 1;
    transform: translate(0, 0);
}

/* Special case for testimonial slides - make them visible immediately */
.testimonial-swiper .animated-element {
    opacity: 1 !important;
    transform: translate(0, 0) !important;
}

/* Lightbox Styles */
.lightbox {
    display: none;
    position: fixed;
    z-index: 1000;
    padding-top: 50px;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0,0,0,0.9);
}

.lightbox-content {
    margin: auto;
    display: block;
    width: 85%;
    max-width: 700px;
    max-height: 85%;
    object-fit: contain;
}

.lightbox-close {
    position: absolute;
    top: 15px;
    right: 35px;
    color: #f1f1f1;
    font-size: 40px;
    font-weight: bold;
    transition: 0.3s;
    cursor: pointer;
}

.lightbox-close:hover,
.lightbox-close:focus {
    color: #bbb;
    text-decoration: none;
    cursor: pointer;
}

.testimonial-image {
    cursor: pointer;
    transition: transform 0.2s ease-in-out;
}

.testimonial-image:hover {
    transform: scale(1.03);
}

/* Custom CTA Pulse Animation */
@keyframes ctaPulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.05); }
}

.cta-pulse {
    animation: ctaPulse 2s infinite ease-in-out;
}

/* Swiper Custom Styles */
.testimonial-swiper {
    min-height: 400px; /* Ensure minimum height */
    width: 100%;
}

.testimonial-swiper .swiper-wrapper {
    align-items: stretch; /* Ensure slides have equal height */
}

.testimonial-swiper .swiper-slide {
    height: auto;
    display: flex;
    align-items: center;
    justify-content: center;
}

.testimonial-swiper .swiper-slide .animated-element {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.testimonial-swiper .testimonial-image {
    width: 100%;
    height: auto;
    max-height: 320px;
    object-fit: contain;
    border-radius: 0.5rem;
}

.testimonial-swiper .swiper-button-prev, 
.testimonial-swiper .swiper-button-next {
    color: theme('colors.primary.DEFAULT'); /* Use primary color */
    transition: color 0.3s ease;
    background: rgba(255, 255, 255, 0.9);
    border-radius: 50%;
    width: 40px;
    height: 40px;
}

.testimonial-swiper .swiper-button-prev:hover, 
.testimonial-swiper .swiper-button-next:hover {
    color: theme('colors.primary.gradientTo'); /* Use gradient end color on hover */
    background: rgba(255, 255, 255, 1);
}

.testimonial-swiper .swiper-pagination-bullet-active {
    background-color: theme('colors.primary.DEFAULT'); /* Use primary color for active bullet */
}

.testimonial-swiper .swiper-pagination {
    bottom: 10px !important;
}

/* Sticker Button Styles */
.sticker-button {
    /* Base styles */
    position: fixed;
    bottom: 2rem; /* bottom-8, moved up slightly */
    left: 1rem; /* Temporarily move fully on-screen */
    z-index: 999;
    height: 3rem; /* h-12 */
    border-radius: 9999px; /* rounded-full */
    padding-left: 0.75rem; /* px-3 */
    padding-right: 0.75rem; /* px-3 */
    width: 3rem; /* Match height for circle */
    overflow: hidden;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: theme('boxShadow.xl');
    background-image: linear-gradient(to right, theme('colors.green.500'), theme('colors.green.400'));
    color: white;
    gap: 0.5rem; /* gap-2 */
    cursor: pointer;
    transition: all 0.3s ease-in-out;
    /* transform: rotate(-5deg); Removed initial rotation */
}

.sticker-button:hover {
    /* transform: rotate(0deg) scale(1.05); Removed hover rotation */
    transform: scale(1.05);
}

.sticker-button .sticker-text {
    white-space: nowrap;
    opacity: 0;
    max-width: 0;
    transition: max-width 0.3s ease-in-out, opacity 0.2s ease-in-out;
    font-size: theme('fontSize.sm');
    font-weight: theme('fontWeight.semibold');
    padding-left: 1rem; /* px-4 */
    padding-right: 1rem; /* px-4 */
    justify-content: start;
    left: 1rem; /* Move fully onto screen (left-4) */
    /* transform: rotate(0deg); Removed */
}

.sticker-button.is-expanded {
    width: auto; /* Auto width when expanded */
    border-radius: theme('borderRadius.lg'); /* rounded-lg */
    padding-left: 1rem; /* px-4 */
    padding-right: 1rem; /* px-4 */
    justify-content: start;
    transform: rotate(0deg); /* No rotation when expanded */
}

.sticker-button.is-expanded .sticker-text {
    opacity: 1;
    max-width: 100px; /* Adjust max-width as needed */
}

.sticker-button.is-expanded:hover {
    transform: scale(1.03); /* Smaller hover effect when expanded */
}

/* Hide on desktop */
@media (min-width: 768px) {
    .sticker-button {
        display: none;
    }
}

/* Mobile Drawer Styles */
#drawer-overlay {
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
    backdrop-filter: blur(2px);
}

#mobile-drawer {
    transition: transform 0.3s ease-in-out;
    box-shadow: 2px 0 10px rgba(0, 0, 0, 0.1);
    max-height: 100vh;
    overflow-y: auto;
}

#mobile-drawer nav a {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    color: theme('colors.neutral.600');
    text-decoration: none;
    border-radius: theme('borderRadius.md');
    transition: all 0.2s ease-in-out;
    font-weight: 500;
    margin-bottom: 0.25rem;
}

#mobile-drawer nav a:hover {
    background-color: theme('colors.neutral.100');
    color: theme('colors.primary.DEFAULT');
    transform: translateX(4px);
}

#mobile-drawer nav a:active {
    background-color: theme('colors.primary.50');
}

#mobile-drawer nav a i {
    width: 1.25rem;
    text-align: center;
    font-size: 0.875rem;
}

/* WhatsApp button in mobile drawer */
#mobile-drawer .whatsapp-button {
    width: 100%;
    justify-content: center;
    margin-top: 1rem;
}

/* Drawer toggle button improvements */
#drawer-toggle {
    transition: all 0.2s ease-in-out;
    backdrop-filter: blur(10px);
    background-color: rgba(255, 255, 255, 0.9);
}

#drawer-toggle:hover {
    background-color: rgba(255, 255, 255, 1);
    transform: scale(1.05);
}

#drawer-toggle:active {
    transform: scale(0.95);
}

/* Prevent body scroll when drawer is open */
body.drawer-open {
    overflow: hidden !important;
    position: fixed !important;
    width: 100% !important;
}