:root {
     /* COLORS */
     --primary-base: #339af0;
     --primary-tint: #d0ebff;
     --primary-shade: #1c7ed6;
     --secondary-base: #9775fa;
     --secondary-tint: #e5dbff;
     --secondary-shade: #7048e8;
     --tertiary-base: #ff922b;
     --tertiary-tint: #ffe8cc;
     --tertiary-shade: #f76707;
     --grey-base: #495057;
     --grey-tint: #f1f3f5;
     --grey-shade: #212529;
     --white: #ffffff;
     --black: #000000;

     --neon-cyan: #00ffff;
     --neon-magenta: #ff00ff;
     --deep-space: #0a0e1a;
     --primary-color: #2e7d32;
     --secondary-color: #4caf50;
     --text-color: #333;
     --bg-color: #f9f9f9;
     --chat-bg: #fff;
     --user-msg-bg: #e3f2fd;
     --bot-msg-bg: #f1f8e9;
     --shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
     /* MISCELLANEOUS */
     --nav-height: 100px;
     /* Update the value in the flexbox topic */
 }

 .dark-mode {
     --primary-color: #388e3c;
     --secondary-color: #4caf50;
     --text-color: #f0f0f0;
     --bg-color: #1a1a1a;
     --chat-bg: #2d2d2d;
     --user-msg-bg: #2a3f54;
     --bot-msg-bg: #2e4e2c;
     --shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
 }

 .highlight {
     color: var(--white);
     padding: 0.5rem 1rem;
     border-radius: 4px;
 }

 .highlight-primary {
     background-color: var(--primary-base);
 }

 .highlight-secondary {
     background-color: var(--secondary-base);
 }

 .highlight-tertiary {
     background-color: var(--tertiary-base);
 }


 /* Custom styles for the Google Translate Widget to fit the Navbar */
 /* Styling for the Floating Widget container */
 #floating_translate_widget {
     position: fixed;
     top: 50%;
     left: 16px;
     /* Assuming you moved it to the left corner */
     right: auto;
     z-index: 1000;
     background-color: white;
     padding: 7px 7px;
     /* Increase padding slightly */
     border-radius: 8px;
     box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);

     /* 🌟 NEW: Use Flexbox to align content (description + widget) 🌟 */
     display: flex;
     flex-direction: column;
     /* Stack description above the widget */
     align-items: flex-start;
     /* Align contents to the left */
     max-width: 180px;
     /* ADD THIS: Constrain overall width */
 }

 /* Style for the new descriptive text/icon */
 .translate-description {
     font-size: 0.9rem;
     color: #495057;
     /* Darker gray color */
     font-weight: 800;
     margin-bottom: 5px;
     /* Space between description and widget */
     display: flex;
     align-items: center;
     white-space: nowrap;
     /* ADD THIS: Prevent text wrapping */
     overflow: hidden;
     /* ADD THIS: Hide overflow */
     max-width: 100%;
     /* ADD THIS: Constrain to container */
 }

 .translate-description i {
     margin-right: 5px;
     color: #007bff;
     /* Use your primary color */
 }

 /* Tidy up the widget's internal appearance to blend it below the description */
 #floating_translate_widget #google_translate_element {
     /* Ensure the widget takes full width if needed */
     width: 100%;
     max-width: 160px;
     /* ADD THIS: Constrain dropdown container */
 }

 #floating_translate_widget .goog-te-gadget-simple {
     background-color: transparent !important;
     border: none !important;
     padding: 0;
     /* Remove default padding */
     width: 100% !important;
     /* ADD THIS: Force full width */
 }

 /* ADD THESE NEW STYLES TO TARGET GOOGLE TRANSLATE ELEMENTS */
 #floating_translate_widget .goog-te-combo {
     max-width: 100% !important;
     width: 100% !important;
     font-size: 0.8rem !important;
     padding: 2px 5px !important;
 }

 #floating_translate_widget .goog-te-gadget-simple span {
     font-size: 0.8rem !important;
     white-space: nowrap !important;
     overflow: hidden !important;
     text-overflow: ellipsis !important;
     max-width: 120px !important;
 }

 /* Target the placeholder div within the nav list item */
 .nav-item-translate #google_translate_element {
     /* Use flexbox to center the content within the nav item */
     display: flex;
     align-items: center;
     height: 100%;
     /* Ensure it takes up the full height */
     padding-top: 5px;
     /* Adjust padding if needed to align vertically */
 }

 /* Target the specific generated elements inside the widget for finer control */
 /* This helps remove extra space or styling from the default Google box */
 #google_translate_element .goog-te-gadget-simple {
     background-color: transparent !important;
     /* Make the background transparent */
     border: none !important;
     /* Remove any default border */
 }

 /* Style the text/dropdown slightly */
 #google_translate_element .goog-te-gadget-simple span {
     color: white;
     /* Match your navbar text color (assuming it's white/light) */
     font-size: 0.9rem;
     /* Adjust size if necessary */
 }


 /* Modal styles using display */
 .modal {
     position: fixed;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
     background: #eee7e7;
     padding: 20px;
     border-radius: 8px;
     max-width: 300px;
     max-height: 400px;
     border-radius: 70px;
     width: 80%;
     text-align: center;
     box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
     display: none;
     z-index: 1001;
     border: 8px solid #2de23c;
     /* Floating animation */
     animation: floatModal 4s ease-in-out infinite;

 }

 .modal h2 {
     margin: 0 0 10px;
     font-size: 1.2em;
     color: #242c35;
 }

 .modal p {
     font-size: 2em;
     margin: 12px 0;
     color: #773f3f;
 }

 .modal button {
     margin: 8px 5px;
     padding: 8px 16px;
     border: none;
     border-radius: 5px;
     cursor: pointer;
     font-size: 14px;
 }

 .btn-primary {
     background: #813e9b;
     color: #fff;
 }

 .btn-secondary {
     background: #6c757d;
     color: #fff;
 }

 .content {
     margin: 40px 0;
     padding: 20px;
     background: #fff;
     border-radius: 8px;
     box-shadow: 0 1px 5px rgba(0, 0, 0, 0.1);
 }

 /* Animations */
 /* Option 2: More pronounced floating with rotation */

 @keyframes floatModal {

     0%,
     100% {
         transform: translate(-50%, -50%) translateY(0px) rotate(0deg);
     }

     33% {
         transform: translate(-50%, -50%) translateY(-10px) rotate(1deg);
     }

     66% {
         transform: translate(-50%, -50%) translateY(-15px) rotate(-1deg);
     }
 }

 @keyframes fadeInDown {
     from {
         opacity: 0;
         transform: translate(-50%, -60%) translateY(-20px);
     }

     to {
         opacity: 1;
         transform: translate(-50%, -50%) translateY(0);
     }
 }

 @keyframes fadeInUp {
     from {
         opacity: 0;
         transform: translate(-50%, -40%) translateY(20px);
     }

     to {
         opacity: 1;
         transform: translate(-50%, -50%) translateY(0);
     }
 }

 @keyframes fadeIn {
     from {
         opacity: 0;
     }

     to {
         opacity: 1;
     }
 }

 @keyframes float {

     0%,
     100% {
         transform: translateY(0);
     }

     50% {
         transform: translateY(-10px);
     }
 }



 /* Stars twinkle and orbit */
 .star {
     position: absolute;
     width: 30px;
     opacity: 0;
     animation: twinkle 3s ease-in-out infinite, orbit 10s linear infinite;
 }

 /* Position stars at different angles via CSS variables */
 .star:nth-of-type(1) {
     top: 10%;
     left: 20%;
     animation-delay: 0s;
     --angle: 0deg;
 }

 .star:nth-of-type(2) {
     top: 15%;
     right: 20%;
     animation-delay: 0.5s;
     --angle: 72deg;
 }

 .star:nth-of-type(3) {
     bottom: 20%;
     left: 25%;
     animation-delay: 1s;
     --angle: 144deg;
 }

 .star:nth-of-type(4) {
     bottom: 15%;
     right: 25%;
     animation-delay: 1.5s;
     --angle: 216deg;
 }

 .star:nth-of-type(5) {
     top: 50%;
     left: 50%;
     animation-delay: 2s;
     --angle: 288deg;
 }

 /* Twinkle effect */
 @keyframes twinkle {

     0%,
     100% {
         opacity: 0;
     }

     50% {
         opacity: 1;
     }
 }

 /* Orbit effect: move each star in a circle around center */
 @keyframes orbit {
     from {
         transform: rotate(var(--angle)) translateX(100px) rotate(calc(-1*var(--angle)));
     }

     to {
         transform: rotate(calc(var(--angle)+360deg)) translateX(100px) rotate(calc(-1*(var(--angle)+360deg)));
     }
 }

 /* Hero Section */
 .hero-section {
     position: relative;
     height: 100vh;
     display: flex;
     align-items: center;
     justify-content: center;
     color: white;
     text-align: center;
     overflow: hidden;
     /* Remove these from original code: */
     /* transform: translate(-50%, -50%); */
     /* ← This was breaking positioning */
     /* background: url(...) */
     /* ← Moved to pseudo-element */
 }

 .hero-section::before {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background: url('../../bg2.png') no-repeat center center/cover;
     animation: zoomParallax 20s linear infinite;
     z-index: 0;
     /* Changed from -1 to 0 for visibility */
 }

 .hero-content {
     position: relative;
     /* Required for z-index stacking */
     z-index: 1;
     /* Ensures text stays above background */
     animation: fadeInUp 1.5s ease-out;
 }

 @keyframes zoomParallax {

     0%,
     100% {
         transform: scale(1.2);
     }

     50% {
         transform: scale(1);
     }
 }

 @keyframes fadeInUp {
     from {
         opacity: 0;
         transform: translateY(50px);
     }

     to {
         opacity: 1;
         transform: translateY(0);
     }
 }


 .logo-container {
     display: flex;
     align-items: center;
     height: 50px;
 }

 .logo-img {
     height: 100%;
     width: auto;
     max-height: 50px;
     object-fit: contain;
     border-radius: 25px;
 }

 .logo-text {
     margin-left: 10px;
     font-weight: 700;
     font-size: 1.5rem;
     color: white;
 }

 /* Responsive adjustments */
 @media (max-width: 768px) {
     .logo-text {
         font-size: 1.2rem;
     }

     .navbar-nav .nav-link {
         margin: 2px 0;
     }
 }

 @media (max-width: 576px) {
     .logo-text {
         font-size: 1rem;
     }

     .logo-container {
         height: 40px;
     }
 }

 .hero-overlay {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background: rgba(0, 0, 0, 0.5);
     /* Dark overlay for better text visibility */
 }

 .hero-content {
     position: relative;
     z-index: 1;
 }

 .hero-section h1 {
     font-size: 4.5rem;
     font-weight: bold;
     margin-bottom: 1rem;
     text-transform: uppercase;
 }

 .hero-section p {
     font-size: 1.5rem;
     margin-bottom: 2rem;
 }

 .hero-section .btn {
     font-size: 1.2rem;
     padding: 0.75rem 2rem;
     border-radius: 50px;
     background-color: #4CAF50;
     border: none;
     transition: background-color 0.3s ease-in-out;
 }

 .hero-section .btn:hover {
     background-color: #45a049;
 }


 /* ------ HERO SECTION2 ------ */

 .hero-section1 {
     height: calc(100vh - var(--nav-height));
     min-height: 400px;
     margin-bottom: 10rem;
     display: flex;
     flex-direction: column;
     justify-content: center;
     align-items: center;
 }

 .hero-heading1 {
     margin-bottom: 1rem;
     text-align: center;
 }

 .hero-paragraph1 {
     margin-bottom: 5rem;
     text-align: center;
 }

 .hero-btn-container1 {
     display: flex;
     gap: 2rem;
 }


 .header-bg {
     position: relative;
     width: 100%;
     height: 60vh;
     overflow: hidden;
     background: url('../../misthanabanner3.png') center/cover no-repeat;
 }

 #headerCanvas {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     z-index: 1;
 }

 .header-overlay {
     position: relative;
     z-index: 2;
     width: 100%;
     height: 100%;
     background-color: rgba(0, 0, 0, 0.4);
     display: flex;
     align-items: center;
     justify-content: center;
 }

 .header-content h1,
 .header-content p {
     color: #803636;
 }


 /* Islamic Architecture Section Styles */
 .islamic-architecture {
     position: relative;
     height: 100vh;
     display: flex;
     align-items: center;
     justify-content: center;
     background-color: #f0e6d3;
     /* Sandstone color */
     overflow: hidden;
 }

 .islamic-architecture::before {
     content: '';
     position: absolute;
     width: 200%;
     height: 200%;
     background-image:
         linear-gradient(30deg, #8b5e3c 5%, transparent 5%),
         linear-gradient(-30deg, #8b5e3c 5%, transparent 5%),
         linear-gradient(30deg, transparent 95%, #8b5e3c 95%),
         linear-gradient(-30deg, transparent 95%, #8b5e3c 95%);
     background-size: 60px 60px;
     animation: geometricFlow 40s linear infinite;
     opacity: 0.15;
     z-index: 0;
 }

 .islamic-content {
     position: relative;
     z-index: 1;
     text-align: center;
     color: #4a2e1b;
     /* Dark brown */
     max-width: 800px;
     padding: 2rem;
     animation: archReveal 2s ease-out;
 }

 /* Geometric Pattern Animation */
 @keyframes geometricFlow {
     0% {
         transform: rotate(0deg) translate(-50%, -50%);
     }

     100% {
         transform: rotate(360deg) translate(-50%, -50%);
     }
 }

 /* Arch Reveal Animation */
 @keyframes archReveal {
     0% {
         clip-path: polygon(0 100%, 100% 100%, 100% 100%, 0 100%);
         opacity: 0;
     }

     50% {
         clip-path: polygon(0 80%, 100% 80%, 100% 100%, 0 100%);
         opacity: 0.5;
     }

     100% {
         clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
         opacity: 1;
     }
 }

 /* Add Arabic calligraphy effect */
 .islamic-content h2 {
     font-family: 'Amiri', serif;
     /* Use Google Fonts */
     font-size: 3.5rem;
     text-shadow: 2px 2px 4px rgba(74, 46, 27, 0.2);
 }

 .islamic-content p {
     font-style: italic;
     font-size: 1.2rem;
     margin-top: 1rem;
     animation: fadeInUp 1.5s ease-out 0.5s backwards;
 }

 /* 1) Wrapper: fixed box, hides anything outside */
 .png-wrapper {
     position: relative;
     width: 200px;
     height: 200px;
     margin: 40px auto;
     /* center in page */
     overflow: hidden;
     /* clip overflow */
 }

 /* 2) Image: absolute center, sized to wrapper height, animate via transform */
 #floatingPng {
     position: absolute;
     top: 50%;
     left: 50%;
     height: 100%;
     /* fill wrapper height */
     width: auto;
     /* width scales to maintain aspect */
     transform: translate(-50%, -50%) translateY(0);
     animation: floatUpDown 4s ease-in-out infinite;
     /* ensure it’s on top of wrapper */
     z-index: 1;
 }

 /* 3) Float animation only moves via translate, never grows img */
 @keyframes floatUpDown {
     0% {
         transform: translate(-50%, -50%) translateY(0);
     }

     50% {
         transform: translate(-50%, -50%) translateY(-20px);
     }

     100% {
         transform: translate(-50%, -50%) translateY(0);
     }
 }

 /* Section styling */
 .rotate-section {
     padding: 100px 0;
     opacity: 0;
     transform: translateY(40px);
     transition: opacity 1s ease, transform 1s ease;
     overflow: hidden;
 }

 .rotate-section.visible {
     opacity: 1;
     transform: translateY(0);
 }

 /* Wrapper for clipping (optional) */
 .rot-wrapper {
     width: 180px;
     height: 180px;
     margin: 40px auto 0;
     position: relative;
     overflow: hidden;
 }

 /* PNG starts paused */
 #rotatingPng {
     width: 100%;
     height: auto;
     display: block;
     transform-origin: center center;
     animation: rotateScale 6s ease-in-out infinite;
     animation-play-state: paused;
 }

 /* When section is visible, run animation */
 .rotate-section.visible #rotatingPng {
     animation-play-state: running;
 }

 /* Keyframes: rotate full circle + pulse scale */
 @keyframes rotateScale {
     0% {
         transform: rotate(0deg) scale(1);
     }

     25% {
         transform: rotate(90deg) scale(1.1);
     }

     50% {
         transform: rotate(180deg) scale(1.2);
     }

     75% {
         transform: rotate(270deg) scale(1.1);
     }

     100% {
         transform: rotate(360deg) scale(1);
     }
 }




 .patterns-section {
     padding: 100px 0;
     opacity: 0;
     transform: translateY(40px);
     transition: opacity 1s ease, transform 1s ease;
     overflow: hidden;
 }

 .patterns-section.visible {
     opacity: 1;
     transform: translateY(0);
 }

 .patterns-wrapper {
     position: relative;
     width: 100%;
     height: 300px;
     margin-top: 40px;
 }

 .pattern {
     position: absolute;
     width: 100px;
     opacity: 0;
     animation: floatRotate 6s ease-in-out infinite, fadeIn 1s ease forwards;
     animation-delay: calc(var(--i) * 0.5s), 0s;
     transform-origin: center center;
 }

 /* Position each pattern in a grid */
 .pattern:nth-of-type(1) {
     top: 10%;
     left: 20%;
 }

 .pattern:nth-of-type(2) {
     top: 10%;
     right: 20%;
 }

 .pattern:nth-of-type(3) {
     bottom: 10%;
     left: 20%;
 }

 .pattern:nth-of-type(4) {
     bottom: 10%;
     right: 20%;
 }

 /* Fade-in to visible */
 @keyframes fadeIn {
     to {
         opacity: 1;
     }
 }

 /* Float and rotate animation */
 @keyframes floatRotate {
     0% {
         transform: translate(0, 0) rotate(0deg);
     }

     25% {
         transform: translate(10px, -10px) rotate(90deg);
     }

     50% {
         transform: translate(0, -20px) rotate(180deg);
     }

     75% {
         transform: translate(-10px, -10px) rotate(270deg);
     }

     100% {
         transform: translate(0, 0) rotate(360deg);
     }
 }



 .lanterns-section {
     padding: 100px 0;
     opacity: 0;
     transform: translateY(40px);
     transition: opacity 1s ease, transform 1s ease;
     overflow: hidden;
 }

 .lanterns-section.visible {
     opacity: 1;
     transform: translateY(0);
 }

 .lanterns-wrapper {
     position: relative;
     width: 100%;
     height: 300px;
     margin: 40px auto 0;
 }

 /* Common lantern style */
 .lantern {
     position: absolute;
     bottom: 0;
     width: 80px;
     transform-origin: top center;
     opacity: 0;
     animation: swing 3s ease-in-out infinite,
         glow 2s ease-in-out infinite;
 }

 /* Position each lantern by CSS variable */
 .lantern:nth-of-type(1) {
     left: 25%;
     animation-delay: 0s;
 }

 .lantern:nth-of-type(2) {
     left: 50%;
     animation-delay: 0.5s;
 }

 .lantern:nth-of-type(3) {
     left: 75%;
     animation-delay: 1s;
 }

 /* Swing keyframes */
 @keyframes swing {
     0% {
         transform: rotate(-5deg);
     }

     50% {
         transform: rotate(5deg);
     }

     100% {
         transform: rotate(-5deg);
     }
 }

 /* Glow keyframes (pulse opacity) */
 @keyframes glow {

     0%,
     100% {
         opacity: 0.6;
         filter: drop-shadow(0 0 5px rgba(207, 64, 119, 0.5));
     }

     50% {
         opacity: 1;
         filter: drop-shadow(0 0 15px rgba(224, 57, 57, 0.8));
     }
 }



 .calligraphy-section {
     padding: 100px 0;
     opacity: 0;
     transform: translateY(40px);
     transition: opacity 1s ease, transform 1s ease;
     overflow: hidden;
 }

 .calligraphy-section.visible {
     opacity: 1;
     transform: translateY(0);
 }

 .calligraphy-wrapper {
     width: 800px;
     height: 300px;
     margin: 40px auto 0;
     overflow: hidden;
     position: relative;
 }

 /* Start with image clipped to zero width */
 #calligraphyImg {
     width: 100%;
     height: auto;
     display: block;
     transform-origin: left center;
     transform: scaleX(0);
     transition: transform 2s ease-out;
 }

 /* On visible, reveal by scaling X to full */
 .calligraphy-section.visible #calligraphyImg {
     transform: scaleX(1);
 }


 /*Flip Animation*/
 .flip-section {
     padding: 100px 0;
     opacity: 0;
     transform: translateY(40px);
     transition: opacity 1s ease, transform 1s ease;
     overflow: hidden;
 }

 .flip-section.visible {
     opacity: 1;
     transform: translateY(0);
 }

 /* Flip-book container with perspective */
 .flip-book {
     perspective: 800px;
     width: 300px;
     height: 400px;
     margin: 40px auto 0;
     position: relative;
 }

 /* Page styling */
 .page {
     width: 100%;
     height: 100%;
     transform-origin: left center;
     transform: rotateY(0deg);
     transition: transform 1s ease-in-out;
     box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
     cursor: pointer;
 }

 /* Flipped state */
 .page.flipped {
     transform: rotateY(-180deg);
 }


 /* Islamic AI Knowledge Bot */
 .chat-toggle {
     position: fixed;
     bottom: 20px;
     right: 20px;
     background-color: var(--primary-color);
     color: white;
     padding: 10px 13px;
     border-radius: 30px;
     cursor: pointer;
     box-shadow: var(--shadow);
     z-index: 1001;
     display: flex;
     align-items: center;
     gap: 4px;
 }

 .chat-container {
     position: fixed;
     bottom: 70px;
     right: 20px;
     width: 350px;
     height: 500px;
     background-color: var(--chat-bg);
     border-radius: 15px;
     box-shadow: var(--shadow);
     display: flex;
     flex-direction: column;
     overflow: hidden;
     z-index: 1000;
     display: none;
 }

 .chat-header {
     background-color: var(--primary-color);
     color: white;
     padding: 15px;
     display: flex;
     justify-content: space-between;
     align-items: center;
 }

 .chat-controls {
     display: flex;
     gap: 10px;
 }

 .chat-controls button {
     background: transparent;
     border: none;
     color: white;
     cursor: pointer;
     font-size: 16px;
 }

 .chat-box {
     flex: 1;
     padding: 15px;
     overflow-y: auto;
     display: flex;
     flex-direction: column;
     gap: 10px;
 }

 .message {
     max-width: 80%;
     padding: 10px 15px;
     border-radius: 18px;
     animation: fadeIn 0.3s ease;
     position: relative;
 }

 @keyframes fadeIn {
     from {
         opacity: 0;
         transform: translateY(10px);
     }

     to {
         opacity: 1;
         transform: translateY(0);
     }
 }

 .user-message {
     align-self: flex-end;
     background-color: var(--user-msg-bg);
     border-bottom-right-radius: 5px;
 }

 .bot-message {
     align-self: flex-start;
     background-color: var(--bot-msg-bg);
     border-bottom-left-radius: 5px;
 }

 .message-actions {
     position: absolute;
     bottom: -20px;
     right: 5px;
     display: none;
     gap: 5px;
 }

 .message:hover .message-actions {
     display: flex;
 }

 .message-actions button {
     background: rgba(0, 0, 0, 0.1);
     border: none;
     border-radius: 50%;
     width: 25px;
     height: 25px;
     cursor: pointer;
     font-size: 12px;
 }

 .typing-indicator {
     padding: 5px 15px;
     color: #666;
     font-style: italic;
     display: none;
 }

 .input-area {
     display: flex;
     padding: 10px;
     border-top: 1px solid rgba(0, 0, 0, 0.1);
     gap: 5px;
 }

 .input-area input {
     flex: 1;
     padding: 10px;
     border: 1px solid #ddd;
     border-radius: 20px;
     outline: none;
 }

 .input-area button {
     background-color: var(--primary-color);
     color: white;
     border: none;
     border-radius: 50%;
     width: 40px;
     height: 40px;
     cursor: pointer;
     display: flex;
     align-items: center;
     justify-content: center;
 }

 .suggested-questions {
     display: flex;
     flex-wrap: wrap;
     gap: 5px;
     padding: 10px;
     border-top: 1px solid rgba(0, 0, 0, 0.1);
 }

 .suggested-questions button {
     background-color: rgba(0, 0, 0, 0.05);
     border: none;
     border-radius: 15px;
     padding: 5px 10px;
     font-size: 12px;
     cursor: pointer;
 }

 .suggested-questions button:hover {
     background-color: rgba(0, 0, 0, 0.1);
 }

 .help-text {
     text-align: center;
     font-size: 12px;
     color: #888;
     padding: 5px;
 }

 /* Navigation Bar */
 .navbar {
     background: rgb(114, 156, 51);
     transition: background 0.3s ease-in-out;
     padding: 1rem 0;
 }

 .navbar.scrolled {
     background: rgba(233, 70, 70, 0.8);
     /* Solid background on scroll */
 }

 .navbar-brand {
     font-size: 1.5rem;
     font-weight: bold;
 }

 .navbar-nav .nav-link {
     font-size: 1rem;
     margin-left: 1rem;
     transition: color 0.3s ease-in-out;
 }

 .navbar-nav .nav-link:hover {
     color: #4CAF50 !important;
 }

 /* About Section */
 .about-section {
     background: url('../../masjidstock1.jpg') no-repeat center center/cover;
     padding: 100px 0;
     position: relative;
     color: white;
 }

 .about-section::before {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background: linear-gradient(to right, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.5));
 }

 .about-section .container {
     position: relative;
     z-index: 1;
 }

 .about-section h2 {
     font-size: 2.5rem;
     font-weight: bold;
 }

 .about-section p {
     font-size: 1.2rem;
     margin-bottom: 2rem;
 }

 .about-section .btn {
     font-size: 1.1rem;
     padding: 0.75rem 2rem;
     border-radius: 50px;
     transition: background-color 0.3s ease-in-out;
 }

 .about-section .btn:hover {
     background-color: #4CAF50;
     border-color: #4CAF50;
 }

 /* Quranic Verse Section */
 .quranic-verse {
     background: url('../images/quran-bg.jpg') no-repeat center center/cover;
     color: white;
     padding: 100px 0;
     position: relative;
 }

 .quranic-verse::before {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background: rgba(0, 0, 0, 0.6);
     /* Dark overlay for better text visibility */
 }

 .quranic-verse .container {
     position: relative;
     z-index: 1;
 }

 .quranic-verse h2 {
     font-size: 2.5rem;
     font-weight: bold;
 }

 .quranic-verse blockquote {
     font-size: 1.5rem;
     font-style: italic;
 }

 .quranic-verse .blockquote-footer {
     color: #ccc;
 }

 /* Services Section */
 .services-section .service-item {
     background: white;
     border-radius: 10px;
     transition: transform 0.3s, box-shadow 0.3s;
 }

 .services-section .service-item:hover {
     transform: translateY(-10px);
     box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
 }

 .services-section .service-item i {
     color: #4CAF50;

     /* Prayer Timings Section */
     .prayer-timings-section {
         padding: 100px 0;
     }

     /* Upcoming Events Section */
     .events-section {
         background: #f8f9fa;
         padding: 100px 0;
     }

     .event-card {
         background: white;
         border-radius: 10px;
         overflow: hidden;
         box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
         transition: transform 0.3s, box-shadow 0.3s;
     }

     .event-card:hover {
         transform: translateY(-10px);
         box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
     }

     .event-image {
         width: 100%;
         height: 200px;
         object-fit: cover;
     }

     .event-content {
         padding: 20px;
         text-align: center;
     }

     .event-content h3 {
         font-size: 1.5rem;
         font-weight: bold;
         margin-bottom: 10px;
     }

     .event-date {
         font-size: 1rem;
         color: #4CAF50;
         margin-bottom: 10px;
     }

     .event-description {
         font-size: 1rem;
         color: #666;
         margin-bottom: 20px;
     }

     .event-content .btn {
         font-size: 1rem;
         padding: 0.5rem 1.5rem;
         border-radius: 50px;
         background-color: #4CAF50;
         border: none;
         transition: background-color 0.3s ease-in-out;
     }

     .event-content .btn:hover {
         background-color: #45a049;
     }

     /* Modern Glassmorphism Design */
     .glass-card {
         background: rgba(255, 255, 255, 0.15);
         backdrop-filter: blur(10px);
         border-radius: 15px;
         box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.2);
         border: 1px solid rgba(255, 255, 255, 0.3);
     }

     /* Stylish Table */
     .modern-table {
         width: 100%;
         border-radius: 12px;
         overflow: hidden;
         border-collapse: separate;
         border-spacing: 0;
     }

     .modern-table thead {
         background: linear-gradient(45deg, #007bff, #6610f2);
         color: white;
     }

     .modern-table th,
     .modern-table td {
         padding: 12px;
         border-bottom: 1px solid rgba(255, 255, 255, 0.2);
     }

     .modern-table tbody tr {
         background: rgba(255, 255, 255, 0.05);
         transition: all 0.3s;
     }

     .modern-table tbody tr:hover {
         background: rgba(255, 255, 255, 0.15);
     }

     /* Countdown Timer */
     .countdown {
         font-size: 20px;
         font-weight: bold;
         color: #28a745;
         animation: pulse 1.5s infinite;
     }

     @keyframes pulse {
         0% {
             opacity: 1;
         }

         50% {
             opacity: 0.6;
         }

         100% {
             opacity: 1;
         }
     }


     /* Donation Section */
     .donation-section {
         background: url('../../islam1.png') no-repeat center center/cover;
         color: white;
         padding: 100px 0;
         position: relative;
     }

     .donation-section::before {
         content: '';
         position: absolute;
         top: 0;
         left: 0;
         width: 100%;
         height: 100%;
         background: rgba(0, 0, 0, 0.6);
         /* Dark overlay for better text visibility */
     }

     .donation-section .container {
         position: relative;
         z-index: 1;
     }

     .donation-section h2 {
         font-size: 2.5rem;
         font-weight: bold;
     }

     .donation-section .lead {
         font-size: 1.2rem;
     }

     .donation-card {
         transition: transform 0.3s, box-shadow 0.3s;
     }

     .donation-card:hover {
         transform: translateY(-10px);
         box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
     }

     .donation-card h3 {
         font-size: 1.5rem;
         font-weight: bold;
         margin-bottom: 10px;
     }

     .donation-card p {
         font-size: 1rem;
         margin-bottom: 20px;
     }

     .donation-card .btn {
         font-size: 1rem;
         padding: 0.5rem 1.5rem;
         border-radius: 50px;
         background-color: white;
         color: #4CAF50;
         transition: background-color 0.3s ease-in-out, color 0.3s ease-in-out;
     }

     .donation-card .btn:hover {
         background-color: #4CAF50;
         color: white;
     }

     .progress {
         height: 30px;
         border-radius: 50px;
         background-color: #e9ecef;
     }

     .progress-bar {
         border-radius: 50px;
         font-size: 1rem;
         font-weight: bold;
     }

     /* Testimonials Section */
     .testimonials-section {
         background: url('../images/testimonials-bg.jpg') no-repeat center center/cover;
         color: white;
         padding: 100px 0;
         position: relative;
     }

     .testimonials-section::before {
         content: '';
         position: absolute;
         top: 0;
         left: 0;
         width: 100%;
         height: 100%;
         background: rgba(0, 0, 0, 0.6);
         /* Dark overlay for better text visibility */
     }

     .testimonials-section .container {
         position: relative;
         z-index: 1;
     }

     .testimonials-section h2 {
         font-size: 2.5rem;
         font-weight: bold;
     }

     .testimonials-section blockquote {
         font-size: 1.5rem;
         font-style: italic;
     }

     .testimonials-section .blockquote-footer {
         color: #ccc;
     }

     /* Footer */
     .footer-section {
         padding: 50px 0;
     }