/* 1. Global smooth scroll for internal links */
html {
    scroll-behavior: smooth;
}

/* Custom font import for 'Inter' */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;700;800&display=swap');

body {
    font-family: 'Inter', sans-serif;
    background-color: #f8fafc;
    /* light slate background */
    /* Default cursor is hidden for the custom cursor effect */
    cursor: none;
}

/* Defining the professional color palette */
.text-primary-dark {
    color: #0f172a;
    /* Slate 900 */
}

.bg-primary-dark {
    background-color: #0f172a;
}

.text-accent-cyan {
    color: #06b6d4;
    /* Cyan 500 */
}

.border-accent-cyan {
    border-color: #06b6d4;
}

.btn-accent {
    background-color: #06b6d4;
    transition: all 0.3s ease;
}

.btn-accent:hover {
    background-color: #0891b2;
    /* Darker Cyan */
    box-shadow: 0 4px 12px -2px rgba(6, 182, 212, 0.2);
}

/* 2. Fixed Utility Buttons (Back-to-Top / WhatsApp) */
#back-to-top,
#whatsapp-btn {
    z-index: 1000;
    transition: all 0.3s ease;
    width: 56px;
    height: 56px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 9999px;
    /* rounded-full */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

#back-to-top {
    background-color: white;
    color: #0f172a;
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    /* bottom-6 left-6 positioning handled by HTML/Tailwind, transition handles the smooth movement */
}

#back-to-top.show {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

#back-to-top:hover {
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.15);
}

#whatsapp-btn {
    background-color: #25D366;
    /* WhatsApp Green */
    color: white;
    /* Removed the blinking animation as requested by the user */
}

#whatsapp-btn:hover {
    background-color: #1DA851;
    transform: scale(1.05);
    box-shadow: 0 6px 15px rgba(37, 211, 102, 0.4);
    /* Pause the animation on hover for better UX */
    animation-play-state: paused;
}

/* 3. Service Card Icons */
.service-icon {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 3.5rem;
    height: 3.5rem;
    border-radius: 0.75rem;
    background-color: #ecfeff;
    /* Cyan 50 */
    color: #06b6d4;
    /* Cyan 500 */
    font-size: 1.5rem;
}

/* NOTE: A slight modification here to change the hover background for the service icon to better match the new service text */
.service-icon.group-hover\:bg-cyan-100:hover {
    background-color: #cffafe;
    /* Cyan 100 */
}

/* 4. Review Modal Styling */
#review-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    display: none;
    /* Controlled by JS */
    justify-content: center;
    align-items: center;
    z-index: 2000;
    /* Above everything else */
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
}

#review-modal.show {
    display: flex;
    opacity: 1;
}

#review-modal-content {
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    transform: scale(0.9);
    transition: transform 0.3s ease-in-out;
}

#review-modal.show #review-modal-content {
    transform: scale(1);
}

/* 5. Marquee Animation Styles */
@keyframes scroll-right-to-left {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-50%);
    }
}

.marquee-content {
    display: flex;
    width: 200%;
    /* Double the width to hold duplicated content */
    animation: scroll-right-to-left 35s linear infinite;
    /* Slower loop for readability */
}

.marquee-item {
    /* Make sure items don't shrink and have consistent spacing */
    flex-shrink: 0;
    padding: 0 3rem;
    width: auto;
    min-width: 150px;
    /* Minimum width for mobile display */
}

/* 6. Custom Mouse Cursor Styles (Blue Theme) */
/* Only apply to desktop screens (min-width: 768px, typical for tablets/desktop) */
@media (min-width: 768px) {

    /* The element that replaces the default cursor */
    #custom-cursor {
        position: fixed;
        width: 10px;
        height: 10px;
        background-color: #3b82f6;
        /* Changed to vibrant Blue */
        border-radius: 50%;
        pointer-events: none;
        /* Crucial: ensures the cursor element doesn't interfere with clicks */
        z-index: 9999;
        transform: translate(-50%, -50%);
        /* Centers the element on the mouse pointer */
        transition: transform 0.1s ease;
        /* Smooth movement trail */
    }

    /* Make sure the element is not visible on touch devices/mobile */
    body {
        cursor: none;
        /* Hide default cursor */
    }

    /* Make clickable elements retain the default pointer cursor for better UX */
    a,
    button,
    input[type="submit"],
    input[type="button"],
    .btn-accent,
    .nav-link,
    .cursor-pointer {
        cursor: pointer;
    }
}

/* On mobile, revert cursor to default (no custom cursor) */
@media (max-width: 767px) {
    body {
        cursor: default;
    }

    #custom-cursor {
        display: none;
    }
}

/* 7. Keyframe Animation for WhatsApp Button Blinking */
/* This animation is no longer applied to the WhatsApp button */
@keyframes whatsapp-blink {
    0% {
        box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.7);
        /* Green shadow pulse start */
    }

    50% {
        box-shadow: 0 0 0 10px rgba(37, 211, 102, 0);
        /* Green shadow pulse middle (invisible) */
    }

    100% {
        box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.7);
        /* Back to normal */
    }
}

/* 8. Hero Section Entry Animations */
@keyframes slideInUp {
    0% {
        opacity: 0;
        transform: translateY(20px);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Use prefers-reduced-motion for accessibility, only apply animations if motion is preferred */
@media (prefers-reduced-motion: no-preference) {
    .animate-hero-heading {
        animation: slideInUp 0.8s ease-out forwards;
        animation-delay: 0.1s;
    }

    .animate-hero-paragraph {
        animation: slideInUp 0.8s ease-out forwards;
        animation-delay: 0.3s;
    }

    .animate-hero-buttons {
        animation: slideInUp 0.8s ease-out forwards;
        animation-delay: 0.5s;
    }
}

/* Ensure elements start hidden for the animation to work correctly */
.animate-hero-heading,
.animate-hero-paragraph,
.animate-hero-buttons {
    opacity: 0;
}


/* 9. Custom Social Proof Popup Styles and Animations */
#social-proof-popup {
    position: fixed;
    bottom: 20px;
    /* Default desktop position, near the left-aligned back-to-top button */
    left: 20px;
    z-index: 990;
    /* Below fixed buttons but above content */
    max-width: 90%;
    opacity: 0;
    visibility: hidden;
    /* Slide up/out transition for desktop/default */
    transform: translateY(20px);
    transition: all 0.5s cubic-bezier(0.19, 1, 0.22, 1);
}

/* Show state (used by JS) */
#social-proof-popup.show {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* Mobile Adjustments: Back-to-Top Button and Centered Popup */
@media (max-width: 767px) {
    #social-proof-popup {
        bottom: 20px;
        left: 50%;
        /* Mobile specific transform for centering and animation */
        transform: translateX(-50%) translateY(20px);
        max-width: calc(100% - 40px);
        width: auto;
    }

    #social-proof-popup.show {
        /* Only need to remove the Y-translation on show */
        transform: translateX(-50%) translateY(0);
    }

    /* Adjust back-to-top button position on mobile to be above the popup */
    #back-to-top {
        /* Override the bottom-6 (24px) from HTML with a higher value to clear the popup */
        bottom: 100px;
    }
}

/* 10. Offer Banner Styles (New Addition) */
#offer-banner {
    /* Full width container, starts hidden above the header */
    position: relative;
    /* CHANGE z-index to 60 or higher */
    z-index: 60;
    /* Initial state for slide-down animation */
    transform: translateY(-100%);
    opacity: 0;
    transition: transform 0.5s ease-out, opacity 0.5s ease-out;
}

/* JS removes them to show: */
#offer-banner.show {
    transform: translateY(0) !important;
    opacity: 1 !important;
}

/* Ensure the close button is positioned correctly relative to the banner's content */
#offer-banner .flex {
    position: relative;
}

/* 11. Custom Scrollbar Styling (Theme Color: #06b6d4) */

/* Chrome, Edge, Safari (Webkit) */
::-webkit-scrollbar {
    width: 8px;
    /* width of the scrollbar */
    height: 8px;
    /* height of the horizontal scrollbar */
}

::-webkit-scrollbar-track {
    background: #f1f1f1;
    /* Light track color */
    border-radius: 10px;
}

::-webkit-scrollbar-thumb {
    background: #06b6d4;
    /* Theme accent color (Cyan 500) */
    border-radius: 10px;
}

::-webkit-scrollbar-thumb:hover {
    background: #0891b2;
    /* Darker Cyan on hover */
}

/* Firefox */
* {
    scrollbar-color: #06b6d4 #f1f1f1;
    /* thumb color track color */
    scrollbar-width: thin;
}

/* Custom Wave Animation Keyframes */
@keyframes wave-move-1 {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-50%);
    }

    /* Moves left, then repeats */
}

@keyframes wave-move-2 {
    0% {
        transform: translateX(-50%);
    }

    100% {
        transform: translateX(0);
    }

    /* Moves right, then repeats */
}

/* Apply Animation to specific classes */
.animated-wave-1 {
    animation: wave-move-1 25s linear infinite;
    /* Slow, continuous movement */
}

.animated-wave-2 {
    animation: wave-move-2 30s linear infinite;
    /* Slower, opposite direction movement */
}

/* 12. Testimonial Section Styles */
#testimonials-container-outer {
    position: relative;
}

/* Faded edges for the scroller */
#testimonials-container-outer::before,
#testimonials-container-outer::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    width: 100px;
    /* Width of the fade */
    z-index: 2;
    /* Sits above the scrolling content */
    pointer-events: none;
    /* Allows clicking/scrolling through */
}

#testimonials-container-outer::before {
    left: 0;
    background: linear-gradient(to right, #f8fafc, transparent);
    /* Match bg-slate-50 */
}

#testimonials-container-outer::after {
    right: 0;
    background: linear-gradient(to left, #f8fafc, transparent);
    /* Match bg-slate-50 */
}

/* Smaller fade on mobile */
@media (max-width: 767px) {

    #testimonials-container-outer::before,
    #testimonials-container-outer::after {
        width: 50px;
    }
}

#testimonials-container {
    overflow: hidden;
}

/* Slower scrolling animation */
@keyframes scroll-slow {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-50%);
    }
}

.marquee-content-slow {
    display: flex;
    width: 200%;
    /* Double width for seamless loop */
    animation: scroll-slow 80s linear infinite;
    /* Slower 80-second loop */
}

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

.testimonial-card {
    flex-shrink: 0;
    /* Prevent shrinking */
    width: 400px;
    /* Fixed width for each card */
    max-width: 90vw;
    /* Max width on small screens */
    margin: 1.5rem;
    /* Spacing between cards (py-6 from Tailwind) */
}

/* 13. NEW: FAQ Accordion Styles */
/* Hides the default <details> marker */
details>summary {
    list-style: none;
}

details>summary::-webkit-details-marker {
    display: none;
}

/* ===== 14. NEW: BusinessMap.lk Vertical Button ===== */
#businessmap-btn {
    position: fixed;
    left: 0;
    top: 50%;
    /* Vertically centered */
    transform: translateY(-50%);
    z-index: 1000;
    /* Same as other buttons */
    background-color: #0f172a;
    /* bg-primary-dark */
    color: white;
    padding: 0.75rem 0.5rem;
    /* 12px 8px */
    border-radius: 0 10px 10px 0;
    /* Rounded on the right */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
    transition: all 0.3s ease;
    writing-mode: vertical-rl;
    /* Makes content flow vertically */
    text-orientation: mixed;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    /* 12px spacing */
    font-size: 0.875rem;
    /* 14px */
    font-weight: 600;
    /* semibold */
    letter-spacing: 0.05em;
    /* tracking-wide */
}

#businessmap-btn i {
    /* Rotate the icon back to normal */
    transform: rotate(90deg);
}

#businessmap-btn span {
    /* Flip the text to read bottom-to-top */
    transform: rotate(180deg);
}

#businessmap-btn:hover {
    background-color: #06b6d4;
    /* accent-cyan */
    padding-left: 0.75rem;
    /* 12px */
    box-shadow: 0 6px 15px rgba(6, 182, 212, 0.3);
}

/* Mobile responsiveness for the vertical button */
@media (max-width: 767px) {
    #businessmap-btn {
        padding: 0.5rem 0.25rem;
        /* Smaller padding */
        font-size: 0.75rem;
        /* 12px */
        gap: 0.5rem;
        /* 8px spacing */
        border-radius: 0 8px 8px 0;
    }
}
@media (max-width: 767px) {
    /*
      This media query targets mobile screens (less than 768px).
      It forces both buttons to be 1.5rem (24px) from the bottom,
      matching your 'bottom-6' Tailwind class and ensuring
      they are perfectly aligned horizontally.
    */
    #back-to-top,
    #whatsapp-btn {
      bottom: 1.5rem !important;
    }
  }
/* Falling animation for the tada emojis */
@keyframes fallDown {
    0% {
        transform: translateY(-10vh) rotate(0deg);
        opacity: 1;
    }
    100% {
        transform: translateY(110vh) rotate(360deg);
        opacity: 0;
    }
}

.tada-emoji {
    position: fixed;
    top: -50px;
    font-size: 2rem; /* Adjusted for mobile readability */
    user-select: none;
    pointer-events: none;
    z-index: 10001;
    animation: fallDown linear forwards;
}

/* Responsive adjustment for larger screens */
@media (min-width: 640px) {
    .tada-emoji {
        font-size: 3rem;
    }
}