/* Logo Container: circular, gradient border, glow + hover effect */
.logo-circle {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 80px;
  height: 80px;
  margin: 0 auto;
  background: transparent;

  /* Gradient border via border-image */
  border: 4px solid transparent;
  /*border-image-source: linear-gradient(45deg, #ff7e5f, #feb47b);*/
  border-image-slice: 1;
  border-radius: 50%;
.hidden {
  display: none !important;
}

  /* Subtle glow */
  box-shadow: 0 0 8px rgba(254,180,123,0.4);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.logo-circle:hover {
  /* Slight scale & stronger glow on hover */
  transform: scale(1.05);
  box-shadow:
    0 0 12px rgba(254,180,123,0.6),
    0 4px 16px rgba(255,126,95,0.5);
}

.logo-icon {
  font-size: 1.2rem;
  margin-bottom: 4px;
}

.logo-initials {
  color: #ffffff;
  font-family: 'Montserrat', sans-serif;
  font-weight: 900;
  font-size: 1.3rem;
  letter-spacing: 0.1em;
  text-shadow: 0 2px 4px rgba(0,0,0,0.3);
}

/* Responsive */
@media (max-width: 600px) {
  .logo-circle {
    width: 60px;
    height: 60px;
    border-width: 3px;
  }
  .logo-icon {
    font-size: 1rem;
  }
  .logo-initials {
    font-size: 1rem;
  }
}



        /* General Styles & Reset */
        body {
            margin: 0;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; /* Slightly modern font */
            background-color: #0d121f; /* Deeper dark background */
            color: #e0e7ee; /* Lighter text for contrast */
            line-height: 1.6;
            overflow-x: hidden; /* Prevent horizontal scroll */
        }

        /* Dark Mode Toggle */
        body.dark-mode {
            background-color: #1a202c;
            color: #e2e8f0;
        }

        /* Utility Classes */
        .container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 20px;
        }
        .text-center {
            text-align: center;
        }
        .mb-40 {
            margin-bottom: 40px;
        }
        .mb-60 {
            margin-bottom: 60px;
        }
        /* exit-popup */
        .exit-popup {
          display: none;
          position: fixed;
          top: 0; left: 0; right:0; bottom:0;
          background: rgba(0,0,0,0.6);
          z-index: 10000;
          animation: fadeIn 0.5s ease;
        }
        .exit-popup-content {
          background: linear-gradient(135deg, #0c254e, #030a18) !important;
          max-width: 320px;
          margin: 10% auto;
          padding: 20px;
          border-radius: 8px;
          text-align: center;
          position: relative;
          animation: slideUp 0.4s ease 0.2s both;
        }
        .exit-popup-logo {
          max-height: 30px;
          margin-bottom: 10px;
        }
        .exit-popup-close {
          position: absolute;
          top: 8px; right: 12px;
          font-size: 20px; cursor: pointer;
        }
        .exit-popup-content h2 {
          font-size: 18px; margin: 10px 0;
        }
        .exit-popup-content p {
          font-size: 14px; margin-bottom: 15px;
        }
        .exit-popup-btn {
          background: #FF9900;
          color: #fff;
          border: none;
          padding: 10px 25px;
          font-size: 15px;
          border-radius: 4px;
          cursor: pointer;
          transition: transform 0.3s ease, box-shadow 0.3s ease;
        }
        .exit-popup-btn:hover {
          transform: scale(1.05);
          box-shadow: 0 4px 12px rgba(0,0,0,0.2);
        }
        @keyframes fadeIn {
          from { opacity: 0; } to { opacity: 1; }
        }
        @keyframes slideUp {
          from { transform: translateY(20px); opacity: 0; }
          to { transform: translateY(0); opacity: 1; }
        }

        /* Header Top Bar */
        .header-top-bar {
            background-color: #1c273e; /* Darker blue */
            padding: 12px 20px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            font-size: 0.9em;
            color: #b0c2d3;
            box-shadow: 0 2px 8px rgba(0,0,0,0.2);
            position: relative; /* For z-index to be on top */
            z-index: 100;
        }
        /* ————— Sticky Header Top Bar ————— */



        .offer-timer {
            background-color: #fca311; /* Vibrant Orange */
            color: #1a202c;
            padding: 6px 12px;
            border-radius: 5px;
            font-weight: bold;
            display: flex;
            align-items: center;
            gap: 5px;
            box-shadow: 0 2px 5px rgba(0,0,0,0.3);
        }

        .toggle-mode {
            cursor: pointer;
            display: flex;
            align-items: center;
            gap: 8px;
            padding: 5px 10px;
            border-radius: 5px;
            transition: background-color 0.3s ease;
        }
        .toggle-mode:hover {
            background-color: #2a3c5a;
        }
        .toggle-mode i {
            color: #facc15; /* Yellow icon */
        }

        /* Hero Section (Main Header) */
        .hero-section {
            text-align: center;
            padding: 80px 20px;
            background: linear-gradient(135deg, #0c254e, #030a18); /* Gradient background */
            color: #e0f2f7;
            position: relative;
            overflow: hidden;
        }
        .hero-section::before { /* Subtle background pattern */
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-image: radial-gradient(circle, #1a2c4a 1px, transparent 1px);
            background-size: 20px 20px;
            opacity: 0.1;
            z-index: 0;
        }
        .hero-section .content {
            position: relative;
            z-index: 1;
        }

        .hero-section h1 {
            font-size: 2.6em;
            margin-bottom: 20px;
            color: #fff; /* Pure white for main title */
            line-height: 1.3;
            font-weight: 700;
            word-break: break-word;    /* দীর্ঘ শব্দ ভাঙবে */
            white-space: normal;       /* auto-wrap অন */


        }
        .hero-section h1 i {
            color: #fca311; /* Vibrant Orange icon */
            margin-right: 10px;
        }

        .hero-section .sub-headline {
            font-size: 1.4em;
            color: #aebfd0;
            margin-bottom: 30px;
            max-width: 800px;
            margin-left: auto;
            margin-right: auto;
        }

        /* Section Headings */
        section {
            text-align: center;
        }
        section h2 {
            font-size: 2.2em;
            margin-bottom: 40px;
            color: #fca311; /* Orange heading */
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 12px;
            font-weight: 700;
        }
        section h2 i {
            color: #facc15; /* Yellow icon */
        }

        /* Grid Layouts */
        .rewards-grid,
        .jobs-grid,
        .faq-grid { /* Removed testimonials-grid as it's now a carousel */
            display: grid;
            gap: 30px;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            margin-bottom: 40px;
        }
        /* FAQ Grid Alignment Fix */
        .faq-grid {
            /* If you want 2 columns specifically and then wrap */
            grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
            justify-content: center; /* Center the grid items if there's extra space */
            max-width: 900px; /* Limit width to keep items from spreading too much */
            margin-left: auto;
            margin-right: auto;
        }


        /* Card Styles */
        .reward-card,
        .job-card,
        .faq-item {
            background-color: #1a273e; /* Dark blue-gray */
            padding: 30px;
            border-radius: 12px;
            box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            text-align: left;
            position: relative;
            transition: transform 0.3s ease, box-shadow 0.3s ease;
        }
        .reward-card:hover,
        .job-card:hover {
            transform: translateY(-8px);
            box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
        }

        /* Badges */
        .verified-badge, .job-tag {
            position: absolute;
            top: 18px;
            right: 18px;
            background-color: #10b981; /* Green */
            color: #fff;
            padding: 6px 12px;
            border-radius: 6px;
            font-size: 0.85em;
            font-weight: bold;
            display: flex;
            align-items: center;
            gap: 6px;
            box-shadow: 0 2px 5px rgba(0,0,0,0.2);
        }
        .job-tag {
            background-color: #4f46e5; /* Deeper purple/blue */
        }

        .reward-card h3, .job-card h3 {
            color: #facc15; /* Yellow for titles */
            margin-top: 0;
            margin-bottom: 15px;
            font-size: 1.6em;
            line-height: 1.3;
        }
        .reward-card p, .job-card p {
            color: #b0c2d3;
            font-size: 1.05em;
            flex-grow: 1;
            margin-bottom: 20px;
        }

        /* Buttons */
        .btn {
            display: inline-block;
            padding: 14px 30px;
            border: none;
            border-radius: 8px;
            cursor: pointer;
            font-size: 1.1em;
            font-weight: bold;
            text-decoration: none;
            transition: background-color 0.3s ease, transform 0.2s ease;
            margin-top: auto; /* Push to bottom of card */
            width: 100%; /* Full width within card */
            box-shadow: 0 4px 10px rgba(0,0,0,0.2);
        }
        .btn:active {
            transform: translateY(2px);
        }

        .primary-btn {
            background-color: #22c55e; /* Green */
            color: #fff;
        }
        .primary-btn:hover {
            background-color: #16a34a;
        }

        .secondary-btn {
            background-color: #3b82f6; /* Blue */
            color: #fff;
        }
        .secondary-btn:hover {
            background-color: #2563eb;
        }

        .modal-buttons .btn { /* Specific styling for Yes/No buttons within modal */
            width: auto;
            margin: 0 15px;
            padding: 14px 50px;
            font-size: 1.2em;
        }
        .modal-buttons .primary-btn { background-color: #22c55e; }
        .modal-buttons .primary-btn:hover { background-color: #16a34a; }
        .modal-buttons .secondary-btn { background-color: #ef4444; } /* Red for 'No' type buttons in modal */
        .modal-buttons .secondary-btn:hover { background-color: #dc2626; }


        /* How It Works Section */
        .how-it-works-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
            gap: 40px;
            margin-top: 40px;
        }
        .step-card {
            background-color: #1e293b;
            padding: 30px;
            border-radius: 12px;
            box-shadow: 0 4px 15px rgba(0,0,0,0.3);
            text-align: center;
        }
        .step-card .step-number {
            font-size: 2.5em;
            font-weight: bold;
            color: #fca311; /* Orange */
            margin-bottom: 15px;
            background-color: #2a3c5a;
            width: 60px;
            height: 60px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0 auto 20px;
            border: 2px solid #fca311;
        }
        .step-card h3 {
            color: #facc15;
            font-size: 1.5em;
            margin-bottom: 15px;
        }
        .step-card p {
            color: #b0c2d3;
        }

        /* Testimonial Carousel Section */
        .testimonials-section {
            background-color: #0d121f; /* Same as body background */
            position: relative;
            padding-bottom: 100px; /* Space for dots */
        }
        .testimonial-carousel-wrapper {
            position: relative;
            overflow: hidden; /* Hide overflow for slides */
            margin-top: 40px;
            max-width: 900px; /* Limit carousel width */
            margin-left: auto;
            margin-right: auto;
        }
        .testimonial-carousel {
            display: flex;
            transition: transform 0.5s ease-in-out;
            width: 100%; /* Ensure flex container takes full width */
        }
        .testimonial-card-carousel {
            flex: 0 0 100%; /* Each slide takes full width */
            min-width: 100%; /* Important for consistent sizing of flex items */
            background-color: #1a273e;
            padding: 30px; /* Padding adjusted */
            border-radius: 12px;
            box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
            text-align: center;
            box-sizing: border-box; /* Include padding in width */
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
        }
        .testimonial-card-carousel .avatar {
            width: 80px; /* Larger avatar */
            height: 80px;
            border-radius: 50%;
            object-fit: cover;
            margin-bottom: 25px;
            border: 4px solid #22c55e; /* Green border */
            box-shadow: 0 0 15px rgba(34, 197, 94, 0.4);
        }
        .testimonial-card-carousel p {
            font-style: italic;
            font-size: 1.0em; /* Smaller font for quote */
            color: #c5d8e7;
            margin-bottom: 20px;
            line-height: 1.7;
            max-width: 90%; /* Max width for text content */
            margin-left: auto;
            margin-right: auto;
        }
        .testimonial-card-carousel span {
            font-weight: bold;
            color: #94a3b8;
            display: block;
            font-size: 1em;
        }

        /* Rating Stars */
        .rating {
            color: #facc15; /* Yellow for stars */
            margin-bottom: 15px;
            font-size: 1.1em;
        }
        .rating .fa-star-half-alt {
            margin-left: -4px; /* Adjust half star overlap */
        }

        /* Carousel Navigation Buttons */
        .carousel-nav-btn {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            background-color: rgba(0,0,0,0.5);
            color: white;
            border: none;
            padding: 15px 10px;
            cursor: pointer;
            z-index: 10;
            font-size: 1.5em;
            border-radius: 5px;
            transition: background-color 0.3s ease;
        }
        .carousel-nav-btn:hover {
            background-color: rgba(0,0,0,0.8);
        }
        .carousel-nav-btn.prev {
            left: 0;
        }
        .carousel-nav-btn.next {
            right: 0;
        }
        
        /* Carousel Dots */
        .carousel-dots {
            text-align: center;
            margin-top: 30px;
        }
        .dot {
            height: 12px;
            width: 12px;
            margin: 0 5px;
            background-color: #555;
            border-radius: 50%;
            display: inline-block;
            transition: background-color 0.3s ease;
            cursor: pointer;
        }
        .dot.active {
            background-color: #fca311;
        }

        /* FAQ Section */
        .faq-section {
            background-color: #1a273e;
            padding: 70px 20px; /* Adjusted padding */
        }
        .faq-item {
            background-color: #0f172a; /* Darker background for FAQ item */
            border: 1px solid #2a3c5a; /* Subtle border */
            text-align: left;
            padding: 25px;
            cursor: pointer;
            margin-bottom: 15px; /* Space between items */
        }
        .faq-item h3 {
            color: #facc15;
            margin: 0;
            font-size: 1.3em;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        .faq-item h3 i {
            transition: transform 0.3s ease;
        }
        .faq-item p {
            color: #b0c2d3;
            margin-top: 15px;
            max-height: 0; /* Hidden by default */
            overflow: hidden;
            transition: max-height 0.3s ease-out, margin-top 0.3s ease-out, opacity 0.3s ease-out;
            opacity: 0;
        }
        .faq-item.active p {
            max-height: 200px; /* Max height to allow transition (adjust if content is taller) */
            opacity: 1;
            margin-top: 15px;
        }
        .faq-item.active h3 i {
            transform: rotate(180deg);
        }

          /* Live Conversion Popup (Bottom Left, above Footer) */
        .live-conversion-popup {
            position: fixed;
            /* Changed bottom to auto to allow top to take precedence for mobile */
            bottom: 100px; /* This ensures it's above the footer, adjust if your footer is taller */
            left: 25px;
            background-color: #2a3c5a;
            color: #e0f2f7;
            padding: 15px 25px;
            border-radius: 10px;
            box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
            display: flex; 
            align-items: center;
            gap: 12px;
            font-size: 0.95em;
            z-index: 1000; /* Ensure it's above footer */
            opacity: 0;
            visibility: hidden;
            transform: translateX(-100%); /* Starts from left outside screen */
            transition: opacity 0.5s ease-in-out, transform 0.5s ease-in-out, visibility 0.5s ease-in-out;
            pointer-events: none; /* Allows clicks to pass through when hidden */
            min-width: 280px; /* Ensure enough width for content */
            max-width: 350px; /* Limit width */
            box-sizing: border-box; /* Include padding in width */
        }

        .live-conversion-popup.show { 
            opacity: 1;
            visibility: visible;
            transform: translateX(0);
            pointer-events: auto; /* Re-enable clicks when visible */
        }

        .live-conversion-popup img { /* Style for user image */
            width: 40px;
            height: 40px;
            border-radius: 50%;
            object-fit: cover;
            border: 2px solid #22c55e;
            flex-shrink: 0; 
        }
        .live-conversion-popup .popup-text {
            display: flex;
            flex-direction: column;
            text-align: left;
            flex-grow: 1;
            white-space: nowrap; /* Prevent text wrapping */
            overflow: hidden; /* Hide overflow */
            text-overflow: ellipsis; /* Add ellipsis for overflow */
        }
        .live-conversion-popup .popup-text b { /* Make name bold */
            color: #facc15; /* Yellow for name */
            font-weight: bold;
        }
        .live-conversion-popup .time-ago {
            font-size: 0.8em;
            opacity: 0.8;
            margin-top: 2px;
        }

        /* Highlight Notification Popup (Top Right) */
        .highlight-notification-popup {
            position: fixed !important;
            top: 25px; /* Positioned on the top side */
            right: 25px; /* Positioned on the right side */
            background-color: #2a3c5a; /* Matching live conversion popup background */
            color: #e0f2f7;
            padding: 15px 25px; /* Same padding as live-conversion-popup */
            border-radius: 10px; /* Same border-radius as live-conversion-popup */
            box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4); /* Same shadow as live-conversion-popup */
            display: flex;
            align-items: center;
            gap: 12px; /* Same gap as live-conversion-popup */
            font-size: 0.95em; /* Same font size as live-conversion-popup */
            z-index: 1000; /* Ensure it's above content */
            opacity: 0;
            visibility: hidden;
            transform: translateX(100%); /* Starts from right outside screen */
            transition: opacity 0.5s ease-in-out, transform 0.5s ease-in-out, visibility 0.5s ease-in-out;
            pointer-events: none;
            min-width: 250px; 
            max-width: 350px; 
            box-sizing: border-box; /* Include padding in width */
            position: relative; /* For close button positioning */
        }

        .highlight-notification-popup.show {
            opacity: 1;
            visibility: visible;
            transform: translateX(0);
            pointer-events: auto;
        }

        .highlight-notification-popup .close-btn { /* Close button for highlight popup */
            background: none;
            border: none;
            color: #e0f2f7;
            font-size: 1.2em;
            cursor: pointer;
            margin-left: auto; /* Push it to the right */
            padding: 0 5px;
            line-height: 1; /* For vertical alignment */
            position: absolute; /* Position explicitly for precise placement */
            top: 8px; /* Adjust top for placement inside padding */
            right: 8px; /* Adjust right for placement inside padding */
        }

        .highlight-notification-popup img {
            width: 40px; /* Same width as live-conversion-popup image */
            height: 40px; /* Same height as live-conversion-popup image */
            border-radius: 50%;
            object-fit: cover;
            border: 2px solid #facc15; /* Yellow border for emphasis */
            flex-shrink: 0;
        }

        .highlight-notification-popup .notification-text {
            display: flex;
            flex-direction: column;
            text-align: left;
            flex-grow: 1; /* Allow text to take available space */
            white-space: nowrap; /* Prevent text wrapping */
            overflow: hidden; /* Hide overflow */
            text-overflow: ellipsis; /* Add ellipsis for overflow */
        }
        .highlight-notification-popup .notification-text .author-name {
            font-weight: bold;
            color: #facc15; /* Yellow for name */
            line-height: 1.2; /* Tighter line height for first line */
        }
        .highlight-notification-popup .notification-text .earned-message { /* New class for the combined "Just earned..." line */
            color: #e0f2f7; /* Default text color */
            line-height: 1.2;
            margin-top: 2px; /* Small space between lines */
        }
        .highlight-notification-popup .notification-text .earned-amount { /* Specific span for the green amount */
            font-weight: bold;
            color: #22c55e; /* Green for earned amount */
        }
        .highlight-notification-popup .notification-text .time-ago {
            font-size: 0.8em;
            opacity: 0.8;
            margin-top: 3px;
        }

        /* Responsive Adjustments */
        @media (max-width: 768px) {
            /* ... existing responsive rules ... */

            /* Popups on small screens */
            .live-conversion-popup {
                bottom: 80px; /* Adjusted to be above footer on mobile */
                top: auto; /* Reset top for mobile if it was set */
                left: 15px;
                right: 15px; /* Full width on small screens */
                text-align: center;
                justify-content: center;
                min-width: unset; /* Remove min-width on small screens */
                flex-direction: row; /* Ensure it stays row for image+text */
                padding: 12px 18px;
                font-size: 0.85em;
            }
            .highlight-notification-popup {
                top: 15px; /* Adjust top for mobile */
                right: 15px;
                left: 15px;
                min-width: unset;
                padding: 12px 18px;
                font-size: 0.85em;
            }

            /* ... rest of your responsive rules ... */
        }


        /* Chatbot Styles */
        .chatbot-bubble {
            position: fixed;
            bottom: 30px;
            right: 30px;
            background-color: transparent; /* Changed to transparent */
            color: white; /* Text/icon color */
            width: 60px;
            height: 60px;
            border-radius: 50%;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 1.8em;
            cursor: pointer;
            box-shadow: none; /* Removed box-shadow */
            z-index: 1000; /* Adjusted z-index for visibility over other elements */
            transition: transform 0.2s ease;
        }
        .chatbot-bubble:hover {
            transform: scale(1.05);
        }
        .chatbot-bubble img { /* Style for the new chatbot icon */
            width: 70%; /* Adjust size of the image within the bubble */
            height: 70%;
            object-fit: contain; /* Ensure the image fits without cropping */
        }


        .chatbot-container {
            position: fixed;
            bottom: 100px; /* Adjusted to be above the bubble */
            right: 30px;
            width: 350px;
            height: 450px;
            background-color: #1a273e;
            border-radius: 10px;
            box-shadow: none; /* Removed box-shadow */
            z-index: 999; /* Adjusted z-index to be below bubble */
            display: none; /* Hidden by default */
            flex-direction: column;
            overflow: hidden;
        }
        .chatbot-header {
            background-color: #0c4a6e;
            color: white;
            padding: 15px;
            font-size: 1.1em;
            font-weight: bold;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        .chatbot-header .close-btn {
            background: none;
            border: none;
            color: white;
            font-size: 1.2em;
            cursor: pointer;
        }
        .chatbot-messages {
            flex-grow: 1;
            padding: 15px;
            overflow-y: auto;
            background-color: #0f172a;
            border-bottom: 1px solid #2a3c5a;
        }
        .chatbot-message {
            margin-bottom: 10px;
            padding: 8px 12px;
            border-radius: 8px;
            max-width: 80%;
            word-wrap: break-word;
        }
        .chatbot-message.bot {
            background-color: #2a3c5a;
            align-self: flex-start;
            color: #e0e7ee;
        }
        .chatbot-message.user {
            background-color: #3b82f6; /* Blue */
            color: white;
            align-self: flex-end;
            margin-left: auto;
        }
        .chatbot-input {
            display: flex;
            padding: 15px;
            background-color: #1a273e;
            flex-direction: column; /* Changed to column for quick replies */
        }
        .chatbot-input input {
            flex-grow: 1;
            padding: 10px;
            border: 1px solid #2a3c5a;
            border-radius: 5px; /* Corrected typo: 5px instead of 5pped 5px */
            background-color: #0f172a;
            color: #e0e7ee;
            margin-right: 0; /* Removed margin-right as it's now column */
        }
        .chatbot-input .input-send-row {
            display: flex;
            width: 100%;
            gap: 10px;
            margin-top: 10px; /* Space between quick replies and input */
        }
        .chatbot-input button {
            background-color: #22c55e;
            color: white;
            border: none;
            padding: 10px 15px;
            border-radius: 5px;
            cursor: pointer;
            transition: background-color 0.3s ease;
        }
        .chatbot-input button:hover {
            background-color: #16a34a;
        }

        /* Quick Replies */
        .chatbot-quick-replies {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
            margin-bottom: 10px;
            max-height: 80px; /* Limit height for quick replies */
            overflow-y: auto; /* Scroll if too many */
        }
        .quick-reply-btn {
            background-color: #3b4c6e;
            color: #e0e7ee;
            border: 1px solid #556a8f;
            padding: 8px 12px;
            border-radius: 20px; /* Pill shape */
            font-size: 0.9em;
            cursor: pointer;
            transition: background-color 0.3s ease, transform 0.2s ease;
            white-space: nowrap; /* Prevent text wrapping */
        }
        .quick-reply-btn:hover {
            background-color: #556a8f;
            transform: translateY(-1px);
        }

        /* --- Question Modal Styles --- */
        .question-modal-overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.7);
            display: flex;
            justify-content: center;
            align-items: center;
            z-index: 1001; /* Above chatbot */
            opacity: 0;
            visibility: hidden;
            transition: opacity 0.3s ease, visibility 0.3s ease;
        }
        .question-modal-overlay.active {
            opacity: 1;
            visibility: visible;
        }

        .question-modal-content {
            background-color: #1a273e;
            padding: 40px;
            border-radius: 15px;
            box-shadow: 0 8px 30px rgba(0, 0, 0, 0.6);
            text-align: center;
            max-width: 500px;
            width: 90%;
            transform: scale(0.9);
            transition: transform 0.3s ease;
            position: relative;
            display: flex; /* Make it a flex container */
            flex-direction: column; /* Stack children vertically */
            align-items: center; /* Center horizontally */
        }
        .question-modal-overlay.active .question-modal-content {
            transform: scale(1);
        }

        .question-modal-content h3 {
            color: #fca311;
            font-size: 1.8em;
            margin-bottom: 30px; /* Adjusted by explanation text */
        }

        .question-modal-content .modal-buttons {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            gap: 20px;
            width: 100%; /* Ensure buttons take full width for centering */
        }
        .question-modal-content .modal-buttons .btn {
            padding: 15px 35px;
            font-size: 1.1em;
            border-radius: 10px;
            width: auto; /* Override default btn width */
            flex-grow: 1;
            max-width: 200px; /* Limit button width */
        }

        .modal-message {
            margin-top: 25px;
            font-size: 1.1em;
            color: #aebfd0;
            font-weight: bold;
            display: none; /* Hidden by default */
        }
        .modal-message.success {
            color: #22c55e; /* Green */
        }
        .modal-message.error {
            color: #ef4444; /* Red */
        }

        .final-offer-button {
            display: none; /* Hidden by default */
            margin-top: 30px;
            width: 80%;
            max-width: 300px;
            padding: 18px 30px;
            font-size: 1.2em;
            background-color: #22c55e;
            color: white;
            border: none;
            border-radius: 10px;
            cursor: pointer;
            text-decoration: none;
            transition: background-color 0.3s ease, transform 0.2s ease;
            /* To ensure centering within the flex container (question-modal-content) */
            align-self: center;
        }
        .final-offer-button:hover {
            background-color: #16a34a;
            transform: translateY(-2px);
        }

        /* Social Proof Text */
        .social-proof-text {
            font-size: 0.9em;
            color: #8899aa; /* Lighter grey */
            margin-bottom: 25px; /* Space below it */
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            font-weight: 500;
        }
        .social-proof-text i {
            color: #22c55e; /* Green icon */
        }

        /* Quiz Progress Bar */
        .quiz-progress-bar {
            width: 90%;
            height: 10px;
            background-color: #3b4c6e; /* Darker background for the bar */
            border-radius: 5px;
            margin: 0 auto 30px; /* Centered, with space below */
            position: relative;
            overflow: hidden;
        }

        .quiz-progress-fill {
            height: 100%;
            width: 0%; /* Starts at 0% */
            background-color: #fca311; /* Vibrant orange fill */
            border-radius: 5px;
            transition: width 0.4s ease-out; /* Smooth transition */
        }

        .quiz-progress-text {
            position: absolute;
            top: -25px; /* Positioned above the bar */
            left: 50%;
            transform: translateX(-50%);
            font-size: 0.9em;
            color: #aebfd0; /* Lighter text color */
            font-weight: bold;
            white-space: nowrap; /* Prevent wrapping */
        }
        
        /* Question Explanation Text */
        .question-explanation {
            font-size: 0.95em;
            color: #b0c2d3; /* Slightly lighter than main text */
            margin-top: -15px; /* Pull it closer to the question */
            margin-bottom: 25px; /* Space before buttons */
            text-align: center; /* Center the text */
        }

        /* --- Footer Styles (Updated for multi-column layout and bolding) --- */
        .main-footer {
            background-color: #1a273e; /* Darker background for footer */
            color: #b0c2d3;
            padding: 60px 20px 30px; /* More padding on top */
            font-size: 0.95em;
            border-top: 1px solid #2a3c5a; /* Subtle separator */
            position: relative; /* For the popup to be relative to this */
            z-index: 1; /* Ensure footer is below popups at bottom of screen */
        }

        .main-footer .footer-content {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); /* Flexible columns */
            gap: 40px; /* Space between columns */
            max-width: 1200px;
            margin: 0 auto;
            text-align: left; /* Align text within columns to left */
            margin-bottom: 40px; /* Space above copyright */
        }

        .main-footer .footer-column {
            display: flex;
            flex-direction: column;
            gap: 15px; /* Space between items in a column */
        }

        .main-footer .footer-column h4 {
            color: #facc15; /* Yellow for column headings */
            font-size: 1.2em;
            margin-top: 0;
            margin-bottom: 15px;
            display: flex;
            align-items: center;
            gap: 10px;
            font-weight: 700; /* Made headings bolder */
        }

        .main-footer .footer-column h4 i {
            color: #fca311; /* Orange icon */
        }

        .main-footer .footer-column p {
            margin: 0;
            line-height: 1.6;
            font-weight: 500; /* Slightly bolder for main text */
        }
        
        .main-footer .footer-column .footer-logo {
            display: flex;
            align-items: center;
            gap: 10px;
            margin-bottom: 10px;
        }
        .main-footer .footer-column .footer-logo i {
            color: #fca311;
            font-size: 2em;
        }
        .main-footer .footer-column .footer-logo span {
            color: #fff;
            font-size: 1.8em;
            font-weight: 700; /* Bolder logo text */
        }
        .main-footer .footer-column .footer-logo span.highlight {
            color: #fca311;
        }
        
        .main-footer .footer-links a {
            color: #b0c2d3;
            text-decoration: none;
            display: flex; /* For icon and text alignment */
            align-items: center;
            gap: 8px;
            transition: color 0.3s ease;
        }
        .main-footer .footer-links a:hover {
            color: #facc15;
        }
        .main-footer .footer-links a i {
            font-size: 0.8em; /* Smaller arrow icon */
            color: #22c55e; /* Green arrow */
        }

        .main-footer .social-icons {
            display: flex;
            gap: 20px;
            margin-top: 15px; /* Space below "Connect" heading */
        }

        .main-footer .social-icons a {
            color: #b0c2d3;
            font-size: 1.5em;
            transition: color 0.3s ease, transform 0.2s ease;
        }

        .main-footer .social-icons a:hover {
            color: #facc15; /* Yellow on hover */
            transform: scale(1.1);
        }

        .main-footer .copyright {
            text-align: center;
            padding-top: 20px;
            border-top: 1px solid #2a3c5a; /* Separator for copyright */
            color: #8899aa; /* Slightly muted color for copyright text */
            font-size: 0.85em;
            display: flex;
            justify-content: center;
            align-items: center;
            gap: 10px;
            flex-wrap: wrap; /* Allow wrapping on small screens */
            font-weight: 500; /* Slightly bolder copyright text */
        }
        .main-footer .copyright i {
            color: #facc15; /* Yellow star */
        }

        /* --- Live Stats Popup (New Feature) --- */
        .live-stats-popup {
            position: fixed;
            top: 50%; /* Center vertically */
            right: 20px; /* Place on right side */
            transform: translateY(-50%) translateX(100%); /* Center and start hidden to the right */
            background-color: #1c273e; /* Dark background matching header-top-bar */
            color: #e0e7ee; /* Lighter text */
            padding: 12px 18px;
            border-radius: 10px;
            box-shadow: 0 4px 15px rgba(0,0,0,0.5);
            display: flex;
            align-items: center;
            gap: 10px;
            font-weight: 600;
            font-size: 0.95em;
            z-index: 1003; /* Higher than other popups */
            opacity: 0;
            visibility: hidden;
            transition: opacity 0.5s ease-out, transform 0.5s ease-out, visibility 0.5s ease-out;
            max-width: 350px; /* Limit width for aesthetics */
            box-sizing: border-box; /* Include padding in width */
            border: 1px solid #2a3c5a; /* Subtle border */
        }

        .live-stats-popup.show {
            opacity: 1;
            visibility: visible;
            transform: translateY(-50%) translateX(0); /* Move into view */
        }

        /* Live green icon for stats popup */
        .live-stats-popup .live-dot {
            display: inline-block;
            width: 10px;
            height: 10px;
            background-color: #22c55e; /* Green */
            border-radius: 50%;
            margin-right: 5px; /* Space between dot and text */
            animation: pulsate-green 1.5s infinite ease-out;
            flex-shrink: 0;
        }

        @keyframes pulsate-green {
            0% { transform: scale(0.8); opacity: 0.7; }
            50% { transform: scale(1.1); opacity: 1; }
            100% { transform: scale(0.8); opacity: 0.7; }
        }

        .live-stats-popup .stats-text {
            flex-grow: 1;
            text-align: center; /* Center the text within the popup */
            white-space: nowrap; /* Ensure content stays on one line */
            overflow: hidden; /* Hide overflow */
            text-overflow: ellipsis; /* Add ellipsis for overflow */
        }

        .live-stats-popup .close-btn {
            background: none;
            border: none;
            color: #b0c2d3;
            font-size: 1.1em;
            cursor: pointer;
            padding: 5px;
            border-radius: 50%;
            transition: background-color 0.2s ease, color 0.2s ease;
            position: absolute; /* Absolute positioning */
            top: 5px;
            right: 5px;
            z-index: 10; /* Ensure it's clickable */
        }
        .live-stats-popup .close-btn:hover {
            background-color: rgba(255,255,255,0.1);
            color: #fff;
        }


        /* Responsive Adjustments */
        @media (max-width: 768px) {
            .hero-section h1 {
                font-size: 2.2em;
            }
            .hero-section .sub-headline {
                font-size: 1.1em;
            }
            section h2 {
                font-size: 1.8em;
            }
            .rewards-grid,
            .jobs-grid,
            .how-it-works-grid {
                grid-template-columns: 1fr; /* Stack columns on smaller screens */
            }
            .faq-grid { /* FAQ grid on small screens */
                grid-template-columns: 1fr;
            }
            .btn {
                padding: 12px 25px;
            }
            .modal-buttons .btn {
                width: 90%;
                margin: 10px auto;
            }
            .header-top-bar {
                flex-direction: column;
                gap: 10px;
            }
            /* Popups on small screens */
            .live-conversion-popup {
                bottom: 80px; /* Adjusted to be above footer on mobile */
                top: auto; /* Reset top for mobile if it was set */
                left: 15px;
                right: 15px; /* Full width on small screens */
                text-align: center;
                justify-content: center;
                min-width: unset; /* Remove min-width on small screens */
                flex-direction: row; /* Ensure it stays row for image+text */
                padding: 12px 18px;
                font-size: 0.85em;
            }
            .highlight-notification-popup {
                top: 15px; /* Adjust top for mobile */
                right: 15px;
                left: 15px;
                min-width: unset;
                padding: 12px 18px;
                font-size: 0.85em;
            }

            .live-conversion-popup img,
            .highlight-notification-popup img {
                width: 35px;
                height: 35px;
            }
            /* Adjust close button for highlight on small screens */
            .highlight-notification-popup .close-btn {
                position: absolute;
                top: 5px;
                right: 5px;
                margin-left: 0;
            }

            .chatbot-container {
                width: 90%;
                right: 5%;
                left: 5%;
                bottom: 100px;
                height: 400px;
            }
            .chatbot-bubble {
                bottom: 20px;
                right: 20px;
            }
            .question-modal-content {
                padding: 30px 20px;
            }
            .question-modal-content h3 {
                font-size: 1.5em;
            }
            .question-modal-content .modal-buttons .btn {
                width: 100%;
                max-width: none;
            }
            .chatbot-input .input-send-row {
                flex-direction: row; /* Keep input and send button in a row on small screens */
                width: 100%;
            }
            .chatbot-input input {
                margin-right: 10px; /* Re-add margin for small screens */
            }
            
            /* Footer Responsive adjustments */
            .main-footer .footer-content {
                grid-template-columns: 1fr; /* Stack columns */
                text-align: center; /* Center content in stacked columns */
            }
            .main-footer .footer-column {
                align-items: center; /* Center items in stacked columns */
            }
            .main-footer .footer-links a {
                justify-content: center; /* Center link content */
            }
            .main-footer .social-icons {
                justify-content: center; /* Center social icons */
            }
            /* Live Stats Popup responsive */
            .live-stats-popup {
                top: auto; /* Reset top for mobile */
                bottom: 15px; /* Place on bottom for mobile */
                left: 15px;
                right: 15px;
                transform: translateX(0); /* No transform for full width */
                font-size: 0.85em;
                padding: 10px 15px;
                max-width: unset; /* Allow full width on small screens */
                justify-content: center; /* Center content */
            }
        }
        @media (max-width: 480px) {
            .hero-section h1 {
                font-size: 1.8em;
            }
            .hero-section .sub-headline {
                font-size: 1em;
            }
            section {
                padding: 40px 15px;
            }
            section h2 {
                font-size: 1.5em;
            }
            .reward-card, .job-card, .faq-item, .step-card, .testimonial-card-carousel {
                padding: 20px;
            }
            .testimonial-card-carousel .avatar {
                width: 60px;
                height: 60px;
            }
            .testimonial-card-carousel p {
                font-size: 0.9em; /* Further reduced font size for testimonials on small screens */
            }
            .social-proof-text {
                font-size: 0.8em;
                margin-bottom: 20px;
            }
            .quiz-progress-bar {
                margin-bottom: 25px;
            }
            .quiz-progress-text {
                font-size: 0.8em;
                top: -20px;
            }
            .question-explanation {
                font-size: 0.85em;
                margin-bottom: 20px;
            }
            .live-stats-popup {
                font-size: 0.8em;
                padding: 8px 12px;
            }
        }
        /* Overlay শুরুতে লুকানো */
/* Overlay hidden by default, centered flex */
#exit-popup-overlay {
  visibility: hidden;
  opacity: 0;
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.6);
  transition: visibility 0.4s ease, opacity 0.4s ease;
  z-index: 9999;
}

/* Show + fade-in */
#exit-popup-overlay.show {
  visibility: visible;
  opacity: 1;
}

/* Popup box with scale animation */
#exit-popup {
  position: relative;
  width: 320px;
  max-width: 90%;
  padding: 28px 24px 32px;
  background: #141212;
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
  text-align: center;
  font-family: 'Montserrat', sans-serif;
  transform: scale(0.9);
  transition: transform 0.4s ease;
}

#exit-popup-overlay.show #exit-popup {
  transform: scale(1);
}

/* Close button */
#exit-popup-close {
  position: absolute;
  top: 12px;
  right: 16px;
  font-size: 1.4rem;
  background: transparent;
  border: none;
  cursor: pointer;
  color: #888;
}

/* Gift-box icon above title */
.popup-icon {
  font-size: 2.5rem;
  color: #ff7e5f;
  margin-bottom: 12px;
}

/* Title & subtitle */
.popup-title {
  font-size: 1.6rem;
  color: #ff7e5f;
  margin: 0 0 8px;
}

.popup-subtitle {
  font-size: 1rem;
  color: #1e293b;
  margin: 0 0 20px;
}

/* CTA button matching site gradient */
.popup-cta {
  padding: 12px 24px;
  font-size: 1rem;
  font-weight: bold;
  color: #fff;
  background: linear-gradient(45deg, #ff7e5f, #feb47b);
  border: none;
  border-radius: 6px;
  cursor: pointer;
  transition: transform 0.2s ease;
}

.popup-cta:hover {
  transform: scale(1.05);
}
/* styles.css এর শেষে যোগ করো */
.trust-badges {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 24px;
  margin-top: 24px;
  padding: 0 12px;
}

/* ====== Trust Badges (single line) ====== */
.trust-badges {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 40px;
  padding: 16px 0;     /* উপরে-নিচে স্পেস */
  overflow-x: auto;    /* যদি ব্রেকও হয় */
}

/* স্ক্রলবার হাইড */
.trust-badges::-webkit-scrollbar {
  display: none;
}

/* লোগোদের স্টাইল—slightly faded by default */
.trust-badges img {
  height: 40px;
  object-fit: contain;
  opacity: 0.75;
  transition: opacity 0.3s ease, transform 0.3s ease;
}

/* হোভার এ ফুল-opacity + বেসিক scale */
.trust-badges img:hover {
  opacity: 1;
  transform: scale(1.1);
}

/* মোবাইল অপটিমাইজেশন */
@media (max-width: 480px) {
  .trust-badges {
    gap: 24px;
  }
  .trust-badges img {
    height: 32px;
  }
}
.code-flag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  color: #feb47b;
}
#flagCanvas {
  border-radius: 20px;
  box-shadow: 0 1px 4px rgba(0,0,0,0.2);
}
/* ————— Dark Mode Full Overrides ————— */
body.dark-mode {
  background-color: #121212 !important;
  color: #e0e0e0 !important;
}

body.dark-mode .site-header,
body.dark-mode .hero-section {
  background-color: #1e1e1e !important;
}

/* Hero Title, Subtitle, Features Text */
body.dark-mode .hero-title,
body.dark-mode .hero-title span,
body.dark-mode .hero-tagline,
body.dark-mode .hero-features li {
  color: #f5f5f5 !important;
}

/* Check-mark color in features */
body.dark-mode .hero-features li::before {
  color: #81c784 !important;
}

/* Ensure trust-badges images stay bright */
body.dark-mode .trust-badges img {
  filter: brightness(1.2) !important;
}

/* Links, paragraphs, list items, headings globally */
body.dark-mode a,
body.dark-mode i,
body.dark-mode span,
body.dark-mode p,
body.dark-mode ul,
body.dark-mode li,
body.dark-mode h1,
body.dark-mode h2,
body.dark-mode h3,
body.dark-mode h4,
body.dark-mode h5,
body.dark-mode h6 {
  color: inherit !important;
}

/* Toggle-button background & icon */
body.dark-mode .toggle-mode,
body.dark-mode .toggle-mode:hover {
  background-color: #2a2a2a !important;
}
body.dark-mode .toggle-mode i {
  color: #ffd54f !important;
}
/* ——— Make header-top-bar sticky without breaking layout ——— */
.header-top-bar {
  position: sticky !important;
  top: 0 !important;
  left: 0;
  z-index: 1000;
}

/* ——— Remove any forced offsets from previous fixed-header tricks ——— */
.hero-section.site-header .container.content {
  margin-top: 0 !important;
  padding-top: 0 !important;
}
/* Tablet / small-desktop */
@media (max-width: 768px) {
  .header-top-bar {
    flex-direction: column;
    align-items: center;
    padding: 10px 16px;
    gap: 8px;
  }

  .header-top-bar .offer-timer,
  .header-top-bar .code-flag,
  .header-top-bar .toggle-mode {
    width: 100%;
    display: flex;
    justify-content: center;
  }
}

/* Mobile */
@media (max-width: 480px) {
  .header-top-bar {
    padding: 8px 12px;
    gap: 6px;
  }

  .header-top-bar .offer-timer,
  .header-top-bar .toggle-mode {
    font-size: 0.8rem;
  }

  .header-top-bar .code-flag canvas {
    width: 32px;
    height: auto;
  }
}
.exit-popup-overlay {
  position: fixed;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.85);
  z-index: 999;
  display: none;
  justify-content: center;
  align-items: center;
}

.exit-popup-overlay.show {
  display: flex;
}

.popup-content {
  background: #1c1919;
  padding: 24px 32px;
  border-radius: 8px;
  text-align: center;
  position: relative;
  z-index: 1;
  max-width: 320px;
  box-shadow: 0 8px 20px rgba(0,0,0,0.3);
}

.close-btn {
  position: absolute;
  top: 12px;
  right: 12px;
  background: transparent;
  border: none;
  font-size: 1.5rem;
  color: #333;
  cursor: pointer;
  z-index: 2;
}

/* Floating $ signs */
.floating-symbols .symbol {
  position: absolute;
  font-size: 32px;
  color: #00ff99; /* glowing green */
  text-shadow: 0 0 6px rgba(0, 255, 153, 0.6);
  animation: floatUp 6s linear forwards;
  user-select: none;
  z-index: 1;
  opacity: 0.8;
}

.floating-symbols .symbol {
  position: absolute;
  font-size: 24px;
  color: rgba(255, 255, 255, 0.08);
  animation: floatUp 6s linear forwards;
  user-select: none;
}

@keyframes floatUp {
  0% {
    transform: translateY(100vh) scale(0.5);
    opacity: 0;
  }
  50% {
    opacity: 0.3;
  }
  100% {
    transform: translateY(-20vh) scale(1);
    opacity: 0;
  }
}
.floating-symbols .symbol {
  position: absolute;
  font-size: 32px; /* Bigger for visibility */
  color: rgba(255, 255, 255, 0.2); /* More visible */
  animation: floatUp 6s linear forwards;
  user-select: none;
  z-index: 1; /* Ensure above background */
}
.floating-symbols {
  background: rgba(255, 0, 0, 0.1); /* light red for testing */
}

.trust-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
  align-items: center;
  margin-top: 16px;
  padding: 8px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 8px;
  box-shadow: 0 0 10px rgba(0,255,153,0.2);
}

.trust-section {
  margin-top: 20px;
  text-align: center;
  background: rgba(255, 255, 255, 0.03);
  padding: 16px;
  border-radius: 10px;
  box-shadow: 0 0 12px rgba(0,255,153,0.15);
}

.trust-heading {
  font-size: 0.95rem;
  color: #00c896;
  font-weight: 600;
  margin-bottom: 12px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.trust-badges {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
}

.trust-badges img {
  height: 36px;
  max-width: 100px;
  object-fit: contain;
  filter: drop-shadow(0 0 2px rgba(0,255,153,0.3));
  transition: transform 0.2s ease;
  background: white;
  border-radius: 6px;
  padding: 4px;
}

.trust-badges img:hover {
  transform: scale(1.08);
}
.trust-badges img {
  opacity: 0;
  animation: fadeIn 0.6s ease forwards;
  background: white;
  padding: 4px;
  border-radius: 6px;
}
@keyframes fadeIn {
  from { opacity: 0; transform: scale(0.95); }
  to { opacity: 1; transform: scale(1); }
}


@keyframes fadeIn {
  to { opacity: 1; }
}



.exit-close-btn {
  cursor: pointer;
  font-size: 1.5rem;
  color: #333;
  background: transparent;
  border: none;
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 2;
  transition: transform 0.2s;
}

.exit-close-btn:hover {
  transform: scale(1.2);
}
.cookie-banner {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  background: rgba(0, 0, 0, 0.9);
  color: #eee;
  padding: 12px 16px;
  text-align: center;
  font-size: 0.9rem;
  z-index: 1000;
}

.cookie-banner button {
  margin-left: 12px;
  background: #00c896;
  color: white;
  border: none;
  padding: 6px 12px;
  border-radius: 4px;
  cursor: pointer;
}