html {
    scroll-behavior: smooth;
}
body { 
    font-family: 'Inter', sans-serif; 
    background-color: #f8f9fa; /* A very light gray for a clean look */
}

/* ==========================================================================
   Hero Section - Animated Mesh Gradient
========================================================================== */
.hero-gradient {
    position: relative;
    background-color: #667eea; /* Fallback color */

    /* Add rounded bottom corners to create a curved section that blends
       smoothly into the next section. Using percentages makes the curve
       responsive to different viewport widths/heights. */
    border-bottom-left-radius: 50% 14%;
    border-bottom-right-radius: 50% 14%;

    /* Hide any overflowing gradient or pseudo elements so the curve
       remains clean. */
    overflow: hidden;

    /* Apply a subtle upward shadow to give the top of the hero section
       a 3D depth effect as if it is lifting off the page. */
    box-shadow: 0 -8px 25px rgba(0, 0, 0, 0.25);
}
.hero-gradient::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: linear-gradient(315deg, #7f53ac, #647dee, #3b82f6, #80d0c7);
    background-size: 400% 400%;
    animation: animated-gradient 18s ease infinite;
    z-index: 1;

    /* Inherit the same curved bottom corners from the parent so the
       animated gradient follows the curved shape. */
    border-bottom-left-radius: inherit;
    border-bottom-right-radius: inherit;
}

/* A pseudo-element placed above the hero gradient that adds a soft
   highlight / glow. This improves the 3D illusion by simulating
   reflected light along the top edge of the section. */
.hero-gradient::after {
    content: '';
    position: absolute;
    /* Place the glow directly at the top edge and allow it to fade
       downward over a larger height. The gradient from semi-transparent
       white to fully transparent gives a soft sheen reminiscent of
       reflected light on a curved surface. */
    top: 0;
    left: 0;
    right: 0;
    height: 40px;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0));
    filter: none;
    pointer-events: none;
}
#hero-section .container {
    position: relative;
    z-index: 2;
}
@keyframes animated-gradient {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* ==========================================================================
   Staggered Fade-in Animation for Hero
========================================================================== */
.fade-in-up {
    animation: fadeInUp 0.8s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}


/* ==========================================================================
   Header and Navigation
========================================================================== */
header {
    /* Use the same styling as the scrolled state by default so
       the header appearance doesn’t change on scroll. This keeps
       the hero-section’s curved top effect consistent regardless
       of scroll position. */
    background: rgba(255, 255, 255, 0.85) !important;
    backdrop-filter: blur(10px) saturate(180%);
    -webkit-backdrop-filter: blur(10px) saturate(180%);
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
header.scrolled {
    background: rgba(255, 255, 255, 0.85) !important;
    backdrop-filter: blur(10px) saturate(180%);
    -webkit-backdrop-filter: blur(10px) saturate(180%);
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}
header nav {
    /* Use the smaller padding defined for the scrolled state so that the
       header height remains consistent. This ensures that the top of
       the hero section is always fully visible on page load, rather than
       being revealed only after scrolling. */
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    transition: padding 0.3s ease-out;
}
header.scrolled nav {
    /* Maintain the same padding values when scrolled so the header height
       doesn’t change on scroll. */
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
}

/*
 * Active navigation link styling
 * When a nav link corresponds to the section currently in view,
 * highlight it to improve user orientation. The underline indicator helps
 * users see which section is active at a glance.
 */
header nav a.active {
    color: #0052D4 !important;
    font-weight: 600;
    position: relative;
}
header nav a.active::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -2px;
    width: 100%;
    height: 2px;
    background-color: #0052D4;
}


/* ==========================================================================
   General Styles & Cards
========================================================================== */
.section-title { font-weight: 900; font-size: 2.5rem; text-align: center; margin-bottom: 3rem; color: #1a202c; }

.service-card {
    background-color: white; border-radius: 12px; padding: 2rem 1.5rem;
    box-shadow: 0 4px 15px -3px rgba(0, 0, 0, 0.07), 0 2px 6px -2px rgba(0, 0, 0, 0.04);
    transition: transform 0.3s ease-out, box-shadow 0.3s ease-out; height: 100%;
    display: flex; flex-direction: column; align-items: center; justify-content: flex-start; text-align: center;
}
.service-card:hover { 
    transform: translateY(-8px); 
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); 
}

/* Enhance service card hover: change heading and icon color for better feedback */
.service-card:hover h4 {
    color: #0052D4;
}
.service-card:hover .icon {
    color: #0052D4;
}
.service-card .icon { font-size: 2.5rem; margin-bottom: 1rem; color: #4364F7; }


/* ==========================================================================
   CTA Buttons
========================================================================== */
.cta-button {
    display: inline-flex; align-items: center; justify-content: center; padding: 0.75rem 1.5rem;
    border-radius: 8px; font-weight: 600; text-decoration: none;
    transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.3s cubic-bezier(0.22, 1, 0.36, 1), background-color 0.3s ease; 
    margin: 0.25rem;
}
.cta-button:hover {
    transform: scale(1.05);
}
.whatsapp-btn { background-color: #25D366; color: white; box-shadow: 0 4px 14px 0 rgba(0, 118, 255, 0.39); }
.whatsapp-btn:hover { background-color: #1EBE57; box-shadow: 0 6px 20px 0 rgba(0, 118, 255, 0.23); }

.messenger-btn { background-color: #0084FF; color: white; box-shadow: 0 4px 14px 0 rgba(0, 118, 255, 0.39); }
.messenger-btn:hover { background-color: #0073E0; box-shadow: 0 6px 20px 0 rgba(0, 118, 255, 0.23); }

.facebook-btn { background-color: #1877F2; color: white; }
.facebook-btn:hover { background-color: #166FE5; }

/* ==========================================================================
   Footer & Footer Buttons
========================================================================== */
footer {
    background-color: #1a202c;
}
footer .cta-button {
    background-color: transparent;
    border: 2px solid;
    padding: calc(0.75rem - 2px) calc(1.5rem - 2px);
}
footer .whatsapp-btn { border-color: #25D366; color: #25D366; box-shadow: none; }
footer .whatsapp-btn:hover { background-color: #25D366; color: white; }

footer .messenger-btn { border-color: #0084FF; color: #0084FF; box-shadow: none; }
footer .messenger-btn:hover { background-color: #0084FF; color: white; }

footer .facebook-btn { border-color: #1877F2; color: #1877F2; }
footer .facebook-btn:hover { background-color: #1877F2; color: white; }

/* ==========================================================================
   Scroll Reveal Animation
========================================================================== */
.reveal {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s cubic-bezier(0.22, 1, 0.36, 1), transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}
.reveal.visible {
    opacity: 1;
    transform: translateY(0);
}
.reveal .service-card {
    opacity: 0; /* Initially hide cards within a reveal section */
    transform: translateY(30px);
    transition: opacity 0.8s cubic-bezier(0.22, 1, 0.36, 1), transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}
.reveal.visible .service-card {
     opacity: 1;
    transform: translateY(0);
}


/* ==========================================================================
   Back to Top Button & Chatbot
========================================================================== */
#back-to-top {
    position: fixed;
    bottom: 90px;
    right: 20px;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background-color: #0052D4;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    box-shadow: 0 4px 12px rgba(0,0,0,0.2);
    cursor: pointer;
    z-index: 998;
    opacity: 0;
    visibility: hidden;
    transform: translateY(20px);
    transition: transform 0.3s, opacity 0.3s, visibility 0.3s;
}
#back-to-top.show {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* Hover effect for back-to-top button */
#back-to-top:hover {
    transform: translateY(-2px) scale(1.05);
}

#chat-toggle-btn {
    position: fixed; bottom: 20px; right: 20px;
    background-color: #0052D4; color: white;
    width: 60px; height: 60px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 24px; box-shadow: 0 4px 12px rgba(0,0,0,0.2);
    cursor: pointer; z-index: 999; transition: transform 0.2s;
}
#chat-toggle-btn:hover { transform: scale(1.1); }
#chat-window {
    position: fixed; bottom: 100px; right: 20px;
    width: 90%; max-width: 370px; height: 500px;
    background: white; border-radius: 15px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.2);
    display: flex; flex-direction: column;
    overflow: hidden; z-index: 1000;
    transform: scale(0.9); opacity: 0; visibility: hidden;
    transform-origin: bottom right;
    transition: transform 0.3s, opacity 0.3s, visibility 0.3s;
}
#chat-window.active { transform: scale(1); opacity: 1; visibility: visible; }
#chat-header { background: linear-gradient(135deg, #0052D4, #4364F7); color: white; padding: 1rem; font-weight: bold; }
#chat-messages { flex-grow: 1; padding: 1rem; overflow-y: auto; }
.chat-message { margin-bottom: 0.75rem; display: flex; flex-direction: column; }
.chat-message.bot .message-bubble { background-color: #f1f5f9; color: #1e293b; align-self: flex-start; }
.chat-message.user .message-bubble { background-color: #3b82f6; color: white; align-self: flex-end; }
.message-bubble { padding: 0.5rem 1rem; border-radius: 1.25rem; max-width: 80%; line-height: 1.5; }
#chat-input-container { border-top: 1px solid #e5e7eb; padding: 0.75rem; display: flex; }
#chat-input { flex-grow: 1; border: 1px solid #d1d5db; border-radius: 20px; padding: 0.5rem 1rem; outline: none; }
#chat-send-btn {
    background: #0052D4; color: white; border: none;
    border-radius: 50%; width: 40px; height: 40px;
    margin-left: 0.5rem; cursor: pointer; display: flex;
    align-items: center; justify-content: center; font-size: 18px;
}
.typing-indicator {
    /* Container for animated typing dots */
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

/* Individual dots for typing indicator animation */
.typing-indicator .dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: #6b7280;
    animation: typing-dot 1s infinite ease-in-out;
}
.typing-indicator .dot:nth-child(1) { animation-delay: 0s; }
.typing-indicator .dot:nth-child(2) { animation-delay: 0.2s; }
.typing-indicator .dot:nth-child(3) { animation-delay: 0.4s; }

@keyframes typing-dot {
    0%, 80%, 100% {
        transform: translateY(0);
        opacity: 1;
    }
    40% {
        transform: translateY(-4px);
        opacity: 0.5;
    }
}
.chat-button {
    background-color: #e5e7eb; border: 1px solid #d1d5db;
    padding: 0.5rem 1rem; border-radius: 20px;
    margin: 0.25rem; cursor: pointer;
}
.chat-button:hover { background-color: #d1d5db; }

/* ==========================================================================
   Typing Animation & Cursor
========================================================================== */
#typing-effect {
    /* The color will be inherited from the parent h2 tag */
    border-right: .15em solid transparent; /* Prevents text jump */
}

.cursor {
    display: inline-block;
    width: 4px; /* কার্সারের প্রস্থ */
    background-color: white; /* টেক্সটের রঙের সাথে মিল রাখা হয়েছে */
    margin-left: 0.1rem;
    animation: blink 1s infinite;
}

@keyframes blink {
    0%, 100% {
        background-color: white;
    }
    50% {
        background-color: transparent;
    }
}


/* Curved bottom edge for hero */
.hero-gradient {
    border-bottom-left-radius: 50% 14%;
    border-bottom-right-radius: 50% 14%;
    overflow: hidden; /* ensure the gradient respects the curve */
}
.hero-gradient::before {
    border-bottom-left-radius: inherit;
    border-bottom-right-radius: inherit;
}