/* --- Google Fonts Import (Add these to your in header.ejs) --- */ /* */ /* --- Global Variables (Highly Recommended for 2025+ CSS) --- */ :root { /* --- DARKER BASE COLORS --- */ --primary-color: #3158c5; /* Deep, vibrant primary blue (Deeper than #4168e3) */ --primary-dark: #0d2055; /* Very deep blue for contrast and hover */ --primary-light: #f0f4ff; /* A very light tint for accents (for contrast with dark background) */ --bg-light: #fefefe; /* Soft white background */ --bg-dark: #293859; /* Deep navy/slate for dark sections (modern, less harsh than black) */ --text-dark: #1e2840; /* Near-black deep charcoal */ --text-muted: #8a96a8; /* Muted slate for secondary text */ /* --- GRADIENTS (Key to the Gradient Look) --- */ --gradient-primary: linear-gradient(135deg, var(--primary-color) 0%, #4679ef 100%); --gradient-primary-dark: linear-gradient(135deg, var(--primary-dark) 0%, var(--primary-color) 100%); --gradient-bg-dark: linear-gradient(45deg, var(--bg-dark) 0%, #3e4d6a 100%); /* --- GLOSSY SHINE / HIGHLIGHTS --- */ --color-highlight: rgba(255, 255, 255, 0.9); /* Pure white for shine effect */ --color-overlay: rgba(255, 255, 255, 0.15); /* Subtle translucent overlay for shine */ /* --- GLOSSIER SHADOWS (Layered and Crisper) --- */ --shadow-light: 0 2px 10px rgba(0, 0, 0, 0.05); --shadow-medium: 0 8px 25px rgba(0, 0, 0, 0.15); /* Pronounced lift */ --shadow-hover: 0 12px 35px rgba(0, 0, 0, 0.25); /* Stronger elevation on hover */ --shadow-card-image: 0 4px 15px rgba(0, 0, 0, 0.2); /* Deeper shadow for depth */ --shadow-crisp: 0 6px 20px rgba(0,0,0,0.15), 0 15px 40px rgba(0,0,0,0.25); --shadow-crisp-hover: 0 8px 30px rgba(0,0,0,0.2), 0 20px 60px rgba(0,0,0,0.35); /* --- BORDERS & TRANSITIONS --- */ --border-color-light: #e9ecef; --border-color-focus: var(--primary-color); --border-radius-sm: 0.5rem; --border-radius-md: 0.75rem; --border-radius-lg: 0.8rem; --border-radius-xl: 1rem; --transition-speed: 0.4s ease-in-out; } /* --- General Body Styles --- */ body { font-family: 'Inter', sans-serif; /* Prioritize Inter if loaded, or fallback */ background-color: var(--bg-light); margin: 0; line-height: 1.7; /* Slightly more generous line height for readability */ color: var(--text-dark); scroll-behavior: smooth; /* Nice touch for anchor links */ /* Ensure pointer events are enabled for the whole body by default */ pointer-events: auto; } /* --- Navigation Base --- */ #mainNav { transition: transform 0.3s ease-in-out; background-color: transparent !important; border: none !important; /* Removes any bottom border */ box-shadow: none !important; /* Removes any shadow lines */ } /* Hide entire nav on scroll down */ #mainNav.hide-nav { transform: translateY(-100%); } /* --- Logo: Stays Original Color --- */ .navbar-brand img { width: 220px; height: auto; /* Removed filter: brightness(0) so color never changes */ } /* --- Nav Links: White State (On Blue/Dark) --- */ #mainNav .nav-link { color: #ffffff !important; font-weight: 500; margin-left: 1.5rem; border: none !important; /* Removes underline */ text-decoration: none !important; transition: color 0.3s ease; } /* --- Nav Links: Black State (On White/Light) --- */ #mainNav.navbar-scrolled .nav-link { color: #000000 !important; /* Only the text changes color */ } /* Active & Hover States: Ensuring no lines appear */ #mainNav .nav-link:hover, #mainNav .nav-link.active { border: none !important; outline: none !important; opacity: 0.8; } /* --- Header/Navigation Bar Styles --- */ #header { background-color: #fff; /* White background for header */ padding: 15px 0; /* Consistent padding */ box-shadow: var(--shadow-light); /* Lighter shadow for header */ border-bottom: 1px solid rgba(0, 0, 0, 0.05); /* Very subtle bottom border */ position: sticky; top: 0; z-index: 1000; /* Ensure header allows interaction unless explicitly stated otherwise by its children */ pointer-events: auto; } #header .logo { display: flex; align-items: center; } /* #header .logo img { /* --- OTP Page Styles --- */ .otp-container { max-width: 500px; margin: 3rem auto 4rem auto; background: #fff; border-radius: var(--border-radius-lg); box-shadow: var(--shadow-medium); padding: 2.5rem 2rem 2rem 2rem; } .otp-section { margin-bottom: 2.5rem; } .otp-title { font-family: 'Poppins', sans-serif; font-size: 2rem; font-weight: 600; color: var(--primary-color); margin-bottom: 1.5rem; text-align: center; } .otp-form { display: flex; flex-direction: column; gap: 1.2rem; } .form-group { display: flex; flex-direction: column; gap: 0.4rem; } .form-control { border-radius: var(--border-radius-md); padding: 0.8rem 1rem; border: 1px solid var(--border-color-light); box-shadow: 0 1px 3px rgba(0,0,0,0.05) inset; font-size: 1rem; transition: border-color var(--transition-speed), box-shadow var(--transition-speed); font-family: 'Inter', sans-serif; } .form-control:focus { border-color: var(--primary-color); outline: none; box-shadow: 0 0 0 0.15rem var(--primary-light), 0 0 5px rgba(var(--primary-color-rgb), 0.5); /* Add a subtle glow */ } .btn { border: none; border-radius: var(--border-radius-md); padding: 0.8rem 1.5rem; font-size: 1.1rem; font-weight: 600; cursor: pointer; transition: background var(--transition-speed), color var(--transition-speed), box-shadow var(--transition-speed); font-family: 'Poppins', sans-serif; } .btn-primary { /* Existing properties */ border: none; border-radius: var(--border-radius-md); padding: 0.8rem 1.5rem; font-size: 1.1rem; font-weight: 600; cursor: pointer; transition: background var(--transition-speed), color var(--transition-speed), box-shadow var(--transition-speed); font-family: 'Poppins', sans-serif; } .btn-primary:hover { background-position: 0% 0%; /* Move the highlight on hover */ box-shadow: 0 10px 30px rgba(0, 123, 255, 0.35); /* Stronger shadow */ } .btn-success { background: linear-gradient(45deg, #28a745, #218838); color: #fff; box-shadow: var(--shadow-light); } .btn-success:hover { background: linear-gradient(45deg, #218838, #155724); color: #fff; box-shadow: var(--shadow-medium); } .alert { padding: 1rem 1.5rem; border-radius: var(--border-radius-md); margin-top: 1rem; font-size: 1rem; font-family: 'Inter', sans-serif; } .alert-info { background: #e6eefd; color: var(--primary-dark); border: 1px solid var(--primary-color); } .alert-warning { background: #fff3cd; color: #856404; border: 1px solid #ffeeba; } @media (max-width: 600px) { .otp-container { padding: 1.2rem 0.5rem 1.5rem 0.5rem; } .otp-title { font-size: 1.3rem; } } /* --- Hero Section --- */ .hero-section-custom { background: linear-gradient(to right, var(--primary-color), var(--primary-dark)); padding: 8rem 0; position: relative; overflow: hidden; } .hero-section-custom::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: url('https://www.transparenttextures.com/patterns/lined-paper.png'); opacity: 0.05; z-index: 0; pointer-events: none; } .hero-section-custom .container { position: relative; z-index: 1; } .hero-section-custom h1 { font-size: 4rem; /* Larger and more commanding headline */ line-height: 1.1; color: #fff; text-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Stronger text shadow */ max-width: 900px; /* Control line length */ margin-left: auto; margin-right: auto; margin-top: 4rem } .hero-section-custom p.lead { font-size: 1.5rem; /* Larger lead paragraph */ max-width: 800px; margin-left: auto; margin-right: auto; color: rgba(255, 255, 255, 0.95); text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); } .hero-section-custom .btn-light { color: var(--primary-color); background-color: #fff; border-color: #fff; font-weight: 700; padding: 1.1rem 2.8rem; /* More prominent button */ font-size: 1.25rem; box-shadow: 0 8px 30px rgba(0, 123, 255, 0.2); /* Stronger shadow for impact */ border-radius: var(--border-radius-md); transition: var(--transition-speed); position: relative; /* Add this */ z-index: 2; } .btn-xs { padding: 0.25rem 0.5rem; /* Smaller padding */ font-size: 0.75rem; /* Smaller font size */ line-height: 1.2; /* Adjust line height if necessary */ border-radius: 0.2rem; /* Maintain rounded corners */ } .hero-section-custom .btn-light:hover { background-color: var(--primary-light); /* Lighter background on hover */ border-color: var(--primary-light); color: var(--primary-dark); transform: translateY(-5px); /* More pronounced lift */ box-shadow: 0 12px 40px rgba(0, 123, 255, 0.3); } .hero-cta-btn { padding: 1.25rem 3rem !important; /* Larger button */ font-size: 1.35rem !important; /* Larger text */ font-weight: 700; box-shadow: 0 10px 40px rgba(0, 123, 255, 0.35) !important; /* More pronounced shadow */ position: relative; /* Add this */ z-index: 2; } .hero-cta-btn:hover { transform: translateY(-7px) !important; /* More lift on hover */ box-shadow: 0 15px 50px rgba(0, 123, 255, 0.45) !important; } /* --- Our Core Expertise Section (Cards) --- */ .container.py-5 { padding-top: 5rem !important; padding-bottom: 5rem !important; } h2.display-5 { font-size: 2.8rem; margin-bottom: 3rem !important; } .card { background-color: #fff; border-radius: var(--border-radius-lg); box-shadow: var(--shadow-crisp); border: 1px solid rgba(255, 255, 255, 0.5); padding: 2.5rem; height: 100%; display: flex; flex-direction: column; justify-content: space-between; transition: transform var(--transition-speed), box-shadow var(--transition-speed); border: none; position: relative; z-index: 1; } .card:hover { transform: translateY(-12px); box-shadow: var(--shadow-crisp-hover); } .card a.btn { position: relative; z-index: 2; pointer-events: auto; /* Important */ } .card-icon { margin-bottom: 1.5rem; color: var(--primary-color); } .card h4 { font-family: 'Poppins', sans-serif; font-weight: 600; font-size: 1.5rem; margin-bottom: 1rem; } .card p { font-size: 1rem; color: var(--text-muted); } .card-link-wrapper { display: block; text-decoration: none; color: inherit; } .card-link-wrapper:hover .card { transform: translateY(-12px); box-shadow: var(--shadow-hover); } .card .fw-medium { /* This is the initial state: Dark blue text on a white/transparent background */ display: inline-block; padding: 0.5rem 1rem; border: 1px solid var(--primary-dark); /* A subtle dark border */ border-radius: var(--border-radius-sm); color: var(--primary-dark); /* Dark text color */ font-size: 0.875rem; transition: background-color var(--transition-speed), color var(--transition-speed), transform var(--transition-speed); } .card:hover .fw-medium { /* This is the hover state: A very light blue background and dark blue text */ background-color: var(--primary-light); /* Light blue background */ color: var(--primary-dark); /* Keep the text dark for visibility */ transform: translateY(-2px); /* A slight lift on the button itself */ } /* Bonus: Add a subtle arrow effect */ .card .fw-medium i { transition: transform var(--transition-speed); } .card:hover .fw-medium i { transform: translateX(5px); } /* --- NEW: Service Cards for services.ejs --- */ .service-card { background-color: #fff; border-radius: var(--border-radius-lg); box-shadow: var(--shadow-medium); transition: transform var(--transition-speed), box-shadow var(--transition-speed); overflow: hidden; /* Important for border-radius on image */ height: 100%; /* Ensure cards in a row are of equal height */ display: flex; flex-direction: column; /* Stack image, title, and text */ } .service-card:hover { transform: scale(1.03); /* Slightly zoom the content */ transition: transform var(--transition-speed); box-shadow: var(--shadow-hover); } .service-card .card-image-top { width: 100%; height: 200px; /* Fixed height for consistency */ background-size: cover; background-position: center; transform: scale(1.03); /* Slightly zoom the content */ transition: transform var(--transition-speed); border-bottom: 1px solid var(--border-color-light); /* Subtle separator */ box-shadow: var(--shadow-card-image); /* Depth for the image */ } .service-card h4 { font-family: 'Poppins', sans-serif; font-weight: 600; font-size: 1.5rem; transform: scale(1.03); /* Slightly zoom the content */ transition: transform var(--transition-speed); color: var(--primary-color); /* Highlight service titles */ margin-top: 1.5rem; padding: 0 1.5rem; /* Padding for text content */ } .service-card p { font-size: 1rem; color: var(--text-dark); /* Main text color */ padding: 0 1.5rem 1.5rem; /* Padding for text content, more at bottom */ flex-grow: 1; /* Allows paragraph to take up remaining space */ } /* --- Call to Action Section (CTA) --- */ .cta-section-custom { background-color: var(--primary-light); /* Use a light primary tint */ padding: 5rem 0; text-align: center; } .cta-section-custom h3 { color: var(--text-dark); font-size: 2.5rem; font-weight: 700; margin-bottom: 1.5rem; } .cta-section-custom p { color: var(--text-dark); font-size: 1.25rem; max-width: 800px; margin: 0 auto 2.5rem auto; } .cta-section-custom .btn-primary { padding: 1.2rem 3rem; /* Larger, more inviting button */ font-size: 1.3rem; font-weight: 600; background: linear-gradient(45deg, var(--primary-color), var(--primary-dark)); /* Stronger gradient */ box-shadow: 0 10px 30px rgba(0, 123, 255, 0.25); border-radius: var(--border-radius-md); } .cta-section-custom .btn-primary:hover { background: linear-gradient(45deg, var(--primary-dark), #003a8d); /* Darker on hover */ transform: translateY(-5px); box-shadow: 0 15px 40px rgba(0, 123, 255, 0.35); } /* --- Footer Custom Styles --- */ .footer-custom { background: linear-gradient(to right, var(--primary-dark), var(--primary-color)); /* Darker gradient */ color: #fff; padding: 4rem 0 2rem 0; /* Adjusted padding */ font-family: 'Open Sans', sans-serif; position: relative; overflow: hidden; box-shadow: 0 -5px 20px rgba(0, 0, 0, 0.15); /* Subtle top shadow */ } .footer-custom::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-image: url('data:image/svg+xml,%3Csvg width="6" height="6" viewBox="0 0 6 6" xmlns="http://www.w3.org/2000/svg"%3E%3Cg fill="%23ffffff" fill-opacity="0.03" fill-rule="evenodd"%3E%3Cpath d="M5 0h1L0 6V5zM6 5v1H5zM1 0h1L0 2V1z"%3E%3C/path%3E%3C/g%3E%3C/svg%3E'); /* Faint background pattern */ opacity: 0.8; z-index: 0; pointer-events: none; /* ADDED: Ensure this background doesn't block clicks */ } .footer-custom .container { position: relative; z-index: 1; /* Ensure content is above pattern */ } .footer-heading { color: #fff; /* White heading */ font-size: 1.3rem; margin-bottom: 1.5rem; position: relative; padding-bottom: 0.5rem; } .footer-heading::after { content: ''; position: absolute; left: 0; bottom: 0; width: 50px; /* Underline effect */ height: 3px; background: #fff; /* White underline */ border-radius: 5px; } .footer-text { font-size: 0.95rem; line-height: 1.6; color: rgba(255, 255, 255, 0.8); margin-bottom: 0.8rem; } .footer-link { color: rgba(255, 255, 255, 0.9); text-decoration: none; transition: color var(--transition-speed); font-size: 0.95rem; display: inline-block; /* Allows padding/margin */ margin-bottom: 0.5rem; } .footer-link:hover { color: #fff; text-decoration: underline; } .footer-icon { color: #fff; /* White icons */ font-size: 1.1rem; } .footer-social-icon { color: var(--primary-color); transition: color var(--transition-speed), transform var(--transition-speed); position: relative; z-index: 1; } .footer-social-icon:hover { color: var(--primary-light); /* Lighter primary on hover */ transform: translateY(-3px); } .footer-divider { border-top: 1px solid rgba(255, 255, 255, 0.1); } .footer-copyright { font-size: 0.9rem; color: rgba(255, 255, 255, 0.7); } /* Responsive adjustments for footer */ @media (max-width: 767px) { .footer-custom { padding: 3rem 0 1.5rem 0; } .footer-heading { text-align: center; font-size: 1.2rem; } .footer-heading::after { left: 50%; transform: translateX(-50%); } .footer-text, .footer-link, .footer-copyright { text-align: center; font-size: 0.9rem; } .list-unstyled { padding-left: 0; } .list-unstyled li { display: inline-block; margin: 0 0.5rem; } .list-unstyled li:last-child { margin-right: 0; } .footer-custom .social-icons { text-align: center; margin-top: 1.5rem; } .footer-divider { margin: 2rem auto; } } /* --- Responsive Adjustments --- */ @media (max-width: 1200px) { .hero-section-custom h1 { font-size: 3rem; } } @media (max-width: 991px) { #header .logo { margin-right: auto; /* Push logo to left on mobile */ } .navbar { position: fixed; top: 0; right: -100%; /* Hide off-screen */ width: 250px; height: 100vh; color: white; background-color: transparent; transition: right 0.3s ease-in-out; flex-direction: column; padding-top: 80px; /* Space for logo/toggle if needed */ box-shadow: none/* -5px 0 15px rgba(0,0,0,0.1) */; } .navbar.active { right: 0; /* Slide in */ } .navbar ul { flex-direction: column; align-items: flex-start; padding: 0; border: none; } .navbar li { width: 100%; border: none; } .navbar a { border: none !important; text-decoration: none !important; box-shadow: none !important; } .navbar a, .navbar a:focus { padding: 10px 20px; justify-content: flex-start; color: white; border-bottom: none; } .navbar .getstarted-btn { margin-left: 20px; margin-top: 20px; width: auto; align-self: center; /* Center button in the mobile menu */ } body.mobile-nav-active { overflow: hidden; /* Prevent scrolling when mobile nav is open */ /* Ensure the body itself is clickable even with mobile nav active */ pointer-events: auto; } } @media (max-width: 767px) { .hero-section-custom h1 { font-size: 2rem; } .hero-section-custom p { font-size: 1rem; } .hero-section-custom .btn-light { padding: 0.9rem 2rem; font-size: 1.1rem; } h2.display-5 { font-size: 2.2rem; } .card { padding: 2rem; } section { padding-top: 4rem; padding-bottom: 4rem; } } /* --- NEW: Modal Styles --- */ .custom-modal .modal-dialog { max-width: 900px; /* Adjust modal width as needed */ } .custom-modal-content { border-radius: var(--border-radius-lg); box-shadow: 0 15px 40px rgba(0, 0, 0, 0.25); /* Stronger shadow for depth */ overflow: hidden; /* Ensures rounded corners apply to gradient header */ background-color: rgba(255, 255, 255, 0.95); /* Make it slightly transparent */ backdrop-filter: blur(10px); /* Add a subtle blur for the "glass" effect */ border: 1px solid rgba(255, 255, 255, 0.2);} .custom-modal-header { background: linear-gradient(to right, var(--primary-color), var(--primary-dark)); /* Gradient header */ color: #fff; padding: 1.5rem 2rem; border-bottom: none; position: relative; /* For flare effect */ overflow: hidden; /* For flare */ } .custom-modal-header .modal-title { font-family: 'Poppins', sans-serif; font-weight: 700; font-size: 1.8rem; text-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); position: relative; z-index: 1; /* Keep title above flare */ } .custom-modal-header .btn-close { filter: invert(1) brightness(2); /* Make close button white */ font-size: 1.2rem; opacity: 0.8; transition: opacity var(--transition-speed); position: relative; z-index: 1; /* Keep button above flare */ } .custom-modal-header .btn-close:hover { opacity: 1; } /* Flare Effect for Modal Header */ .custom-modal-header::before { content: ''; position: absolute; top: -50%; left: -50%; width: 200%; height: 200%; background: radial-gradient(circle at top left, rgba(255,255,255,0.15), transparent 70%); transform: rotate(45deg); pointer-events: none; /* ADDED: Ensure this background doesn't block clicks */ opacity: 0.8; } .custom-modal-body { padding: 2rem; color: var(--text-dark); } .custom-modal-body img { border-radius: var(--border-radius-md); box-shadow: var(--shadow-medium); width: 100%; /* Ensure image fills its space */ height: auto; max-height: 300px; /* Limit image height */ object-fit: cover; /* Crop image nicely */ } .custom-modal-body p { font-size: 1rem; line-height: 1.7; margin-bottom: 1rem; } .custom-modal-body h6 { font-family: 'Poppins', sans-serif; font-weight: 600; color: var(--primary-color); margin-top: 1.5rem; margin-bottom: 0.8rem; font-size: 1.1rem; } .custom-modal-body ul { list-style: none; /* Remove default bullet */ padding-left: 0; margin-bottom: 1.5rem; } .custom-modal-body ul li { position: relative; padding-left: 1.8rem; /* Space for custom bullet */ margin-bottom: 0.6rem; color: var(--text-muted); } .custom-modal-body ul li strong { color: var(--text-dark); } .custom-modal-body ul li::before { content: "\f00c"; /* Font Awesome checkmark icon */ font-family: "Font Awesome 5 Free"; font-weight: 900; color: var(--primary-color); position: absolute; left: 0; top: 0.1rem; font-size: 0.9rem; } .custom-modal-footer { border-top: 1px solid var(--border-color-light); padding: 1.5rem 2rem; background-color: var(--bg-light); /* Light background for footer */ justify-content: flex-end; /* Push buttons to the right */ } .custom-modal-footer .custom-btn-secondary { background-color: #6c757d; color: #fff; border: none; border-radius: var(--border-radius-md); padding: 0.75rem 1.5rem; transition: var(--transition-speed); box-shadow: var(--shadow-light); } .custom-modal-footer .custom-btn-secondary:hover { background-color: #5a6268; transform: translateY(-2px); box-shadow: var(--shadow-medium); } .custom-modal-footer .custom-btn-primary { background: linear-gradient(45deg, var(--primary-color), var(--primary-dark)); color: #fff; border: none; border-radius: var(--border-radius-md); padding: 0.75rem 1.5rem; transition: var(--transition-speed); box-shadow: 0 8px 20px rgba(0, 123, 255, 0.2); } .custom-modal-footer .custom-btn-primary:hover { background: linear-gradient(45deg, var(--primary-dark), #003a8d); transform: translateY(-2px); box-shadow: 0 10px 25px rgba(0, 123, 255, 0.3); } /* --- NEW: About Page Specific Styles --- */ .about-hero-section { background: linear-gradient(to right, var(--primary-color), var(--primary-dark)); /* Deep blue gradient */ color: #fff; padding: 6rem 0 4rem 0; /* Adjusted padding */ position: relative; overflow: hidden; text-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); } .about-hero-section h1 { font-size: 3.2rem; line-height: 1.2; margin-top: 4rem } .about-hero-section p.lead { font-size: 1.2rem; max-width: 800px; margin-left: auto; margin-right: auto; color: rgba(255, 255, 255, 0.9); } .about-content { padding-top: 4rem !important; padding-bottom: 5rem !important; } .about-content h2 { color: var(--text-dark); /* Use dark text for main heading */ margin-bottom: 2.5rem !important; } .about-content p { font-size: 1.05rem; /* Slightly larger text for main paragraphs */ line-height: 1.8; color: var(--text-dark); } .about-content h3 { color: var(--primary-color); /* Highlight the "Why Choose Us" heading */ font-size: 2.2rem; font-weight: 700; margin-bottom: 3rem !important; } .about-feature-card { background-color: var(--bg-light); /* Light background for feature cards */ border-radius: var(--border-radius-lg); box-shadow: var(--shadow-medium); padding: 2rem; height: 100%; display: flex; flex-direction: column; align-items: center; /* Center content */ text-align: center; transition: transform var(--transition-speed), box-shadow var(--transition-speed); border: 1px solid var(--border-color-light); /* Subtle border */ } .about-feature-card:hover { transform: translateY(-8px); /* Lift on hover */ box-shadow: var(--shadow-hover); } .about-feature-card .card-icon { width: 70px; height: 70px; border-radius: 50%; /* Circle icon background */ background: linear-gradient(45deg, var(--primary-color), var(--primary-dark)); /* Gradient for icon background */ display: flex; justify-content: center; align-items: center; margin-bottom: 1.5rem; box-shadow: 0 5px 15px rgba(0, 123, 255, 0.2); } .about-feature-card h4 { font-family: 'Poppins', sans-serif; font-weight: 600; font-size: 1.4rem; color: var(--primary-color); margin-bottom: 0.8rem; } .about-feature-card p { font-size: 0.95rem; color: var(--text-muted); flex-grow: 1; /* Ensures text fills space */ } /* Responsive Adjustments for About Page */ @media (max-width: 767px) { .about-hero-section h1 { font-size: 2.5rem; } .about-hero-section p.lead { font-size: 1rem; } .about-content h2 { font-size: 2rem; } .about-content h3 { font-size: 1.8rem; } .about-feature-card { padding: 1.5rem; } .about-feature-card .card-icon { width: 60px; height: 60px; margin-bottom: 1rem; } .about-feature-card .card-icon i { font-size: 1.8rem !important; } .about-feature-card h4 { font-size: 1.3rem; } } /* --- NEW: Modal Sub-Section Styles for Wireless Surveys --- */ .service-subsection { background-color: var(--primary-light); /* Light background for contrast */ border-left: 5px solid var(--primary-color); /* Highlight with primary color bar */ border-radius: var(--border-radius-md); padding: 1.5rem; margin-bottom: 1.5rem; /* Space between sections */ box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08); /* Subtle depth */ transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out; } .service-subsection:hover { transform: translateY(-3px); /* Slight lift on hover */ box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12); } .service-subsection h6 { font-family: 'Poppins', sans-serif; font-weight: 700; color: var(--primary-dark); /* Darker primary for headings */ margin-bottom: 0.8rem; font-size: 1.2rem; display: flex; align-items: center; } .service-subsection h6 i { font-size: 1.5rem; /* Larger icon */ color: var(--primary-color); /* Primary color for icon */ margin-right: 0.8rem; } .service-subsection p { font-size: 0.95rem; line-height: 1.6; color: var(--text-dark); margin-bottom: 1rem; } .service-subsection .btn { width: auto; /* Allow button to size naturally */ padding: 0.7rem 1.2rem; font-size: 0.9rem; margin-top: 0.5rem; box-shadow: 0 3px 10px rgba(0, 123, 255, 0.15); /* Smaller shadow for sub-buttons */ background: linear-gradient(45deg, var(--primary-color), var(--primary-dark)); /* Gradient button */ border: none; } .service-subsection .btn:hover { background: linear-gradient(45deg, var(--primary-dark), #003a8d); /* Darker gradient on hover */ transform: translateY(-2px); box-shadow: 0 5px 15px rgba(0, 123, 255, 0.25); } /* Adjust general modal body padding if needed to give more space around subsections */ .custom-modal-body { padding: 3rem; /* Ensure enough space */ } /* Override list styles if they conflict, though .service-subsection should contain it */ .custom-modal-body ul { /* Existing ul styles for the overall approach list can remain */ margin-top: 1.5rem; /* Add space if needed */ } /* --- NEW SECTION: Why Choose Us --- */ .why-choose-us-section { background: linear-gradient(to right, var(--primary-color), var(--primary-dark)); color: #fff; padding: 6rem 0; position: relative; overflow: hidden; text-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); } .why-choose-us-section h2 { font-size: 3.2rem; margin-bottom: 4rem !important; color: #fff; } .feature-icon-box { background-color: rgba(255, 255, 255, 0.08); /* Semi-transparent white background */ border-radius: var(--border-radius-lg); padding: 2.5rem 1.5rem; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; transition: all var(--transition-speed); border: 1px solid rgba(255, 255, 255, 0.1); backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px); } .feature-icon-box:hover { background-color: rgba(255, 255, 255, 0.15); transform: translateY(-8px); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3); } .feature-icon-box i { font-size: 3.5rem !important; color: #fff; margin-bottom: 1.5rem; text-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); } .feature-icon-box h5 { font-family: 'Poppins', sans-serif; font-size: 1.5rem; margin-bottom: 0.8rem; line-height: 1.3; } .feature-icon-box p { font-size: 0.95rem; color: rgba(255, 255, 255, 0.7); } /* --- Contact Page Specific Styles --- */ .contact-section-content { padding-top: 4rem !important; /* Adjust padding below hero */ padding-bottom: 5rem !important; /* *** ADDED/MODIFIED: Ensure contact content is above others and clickable *** */ position: relative; /* Essential for z-index to work */ z-index: 10; /* A relatively high z-index to ensure it sits on top */ pointer-events: auto; /* Explicitly allow clicks */ } .custom-alert-danger { background-color: #f8d7da; /* Light red */ color: #721c24; /* Dark red text */ border-color: #f5c6cb; /* Red border */ border-radius: var(--border-radius-md); padding: 1.5rem; margin-bottom: 3rem; box-shadow: var(--shadow-medium); } .custom-alert-danger .alert-heading { color: #721c24; margin-bottom: 0.8rem; } .custom-alert-danger ul { list-style: none; padding-left: 0; } .custom-alert-danger ul li { position: relative; padding-left: 1.5rem; margin-bottom: 0.3rem; } .custom-alert-danger ul li::before { content: "\f06a"; /* Font Awesome exclamation circle icon */ font-family: "Font Awesome 5 Free"; font-weight: 900; color: #dc3545; /* Bootstrap danger color */ position: absolute; left: 0; top: 0.1rem; font-size: 0.9rem; } /* Card styling for Contact Page */ .contact-card { background-color: #fff; border-radius: var(--border-radius-lg); box-shadow: var(--shadow-medium); padding: 2.5rem; /* Slightly more padding */ border: none; transition: transform var(--transition-speed), box-shadow var(--transition-speed); position: relative; overflow: hidden; z-index: 2; /* Ensures the card content is above its own pseudo-element */ pointer-events: auto; /* Ensure cards are clickable */ } .contact-card:hover { transform: translateY(-8px); box-shadow: var(--shadow-hover); } .contact-card::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(45deg, var(--primary-color), var(--primary-dark)); opacity: 0; transition: opacity var(--transition-speed); border-radius: var(--border-radius-lg); z-index: 0; /* Behind content */ pointer-events: none; /* ADDED: This pseudo-element should not block clicks */ } .contact-card:hover::before { opacity: 0.05; /* Subtle gradient overlay on hover */ } .contact-card-title { font-family: 'Poppins', sans-serif; font-weight: 700; font-size: 1.8rem; color: var(--primary-color); position: relative; /* Ensure title is above pseudo-element */ z-index: 1; } .contact-card-text { font-size: 1.05rem; line-height: 1.7; color: var(--text-dark); position: relative; z-index: 1; } /* Contact Info & Social Icons */ .contact-info p { margin-bottom: 0.8rem; font-size: 1rem; color: var(--text-muted); position: relative; z-index: 1; } .contact-icon { color: var(--primary-color); /* Primary color for icons */ font-size: 1.2rem; } .contact-link { color: var(--text-dark); font-weight: 500; transition: color var(--transition-speed); } .contact-link:hover { color: var(--primary-color); } .social-icon-link { color: var(--primary-color); transition: color var(--transition-speed), transform var(--transition-speed); position: relative; z-index: 1; } .social-icon-link:hover { color: var(--primary-dark); transform: translateY(-3px); } /* Form Styling */ .custom-form-label { font-weight: 500; color: var(--text-dark); margin-bottom: 0.4rem; position: relative; /* Ensure labels are interactive */ z-index: 1; } .custom-form-control { border-radius: var(--border-radius-md); padding: 0.8rem 1rem; border: 1px solid var(--border-color-light); box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.05); transition: border-color var(--transition-speed), box-shadow var(--transition-speed); position: relative; /* Ensure inputs are interactive */ z-index: 1; pointer-events: auto; /* Explicitly allow clicks on form controls */ } .custom-form-control:focus { border-color: var(--primary-color); box-shadow: 0 0 0 0.25rem rgba(var(--primary-color-rgb), 0.25); /* Adjusted for primary color */ outline: 0; } textarea.custom-form-control { resize: vertical; /* Allow vertical resizing */ } .custom-contact-submit-btn { background: linear-gradient(45deg, var(--primary-color), var(--primary-dark)); color: #fff; border: none; border-radius: var(--border-radius-md); padding: 0.9rem 1.5rem; font-size: 1.1rem; font-weight: 600; transition: var(--transition-speed); box-shadow: 0 8px 20px rgba(0, 123, 255, 0.2); position: relative; /* Ensure button is interactive */ z-index: 1; pointer-events: auto; /* Explicitly allow clicks on button */ } .custom-contact-submit-btn:hover { background: linear-gradient(45deg, var(--primary-dark), #003a8d); transform: translateY(-3px); box-shadow: 0 10px 25px rgba(0, 123, 255, 0.3); } /* Responsive adjustments */ @media (max-width: 767px) { .contact-section-content { padding-top: 3rem !important; padding-bottom: 3rem !important; } .contact-section-content h2 { font-size: 2.2rem; margin-bottom: 2rem !important; } .contact-card { padding: 2rem; } .contact-card-title { font-size: 1.6rem; } .contact-card-text { font-size: 1rem; } .contact-info p, .custom-form-label { font-size: 0.95rem; } .custom-contact-submit-btn { padding: 0.8rem 1.2rem; font-size: 1rem; } } .wifi-loader svg { animation: pulse 1.5s infinite ease-in-out; } .wave { opacity: 0.2; transform-origin: center; animation: wavePulse 1.5s infinite ease-in-out; } .wave1 { animation-delay: 0s; } .wave2 { animation-delay: 0.2s; } .wave3 { animation-delay: 0.4s; } .dot { animation: blink 1.5s infinite ease-in-out; } @keyframes wavePulse { 0% { opacity: 0.2; transform: scale(1); } 50% { opacity: 1; transform: scale(1.1); } 100% { opacity: 0.2; transform: scale(1); } } @keyframes blink { 0%, 100% { opacity: 0.2; } 50% { opacity: 1; } } .data-flow-wrapper { position: absolute; top: 50%; left: -50%; width: 200%; height: 100px; overflow: hidden; z-index: 1; pointer-events: none; /* Already correctly set */ transform: translateY(-50%); } .data-wave { width: 100%; height: 100px; fill: none; } .data-path { stroke: #0d6efd; stroke-width: 3; stroke-linecap: round; opacity: 0.7; stroke-dasharray: 1000; stroke-dashoffset: 1000; animation: dataFlow 5s ease-out forwards; } /* Dot styling */ .data-dot { animation: pulseDot 5s infinite; transform-box: fill-box; transform-origin: center; } .dot1 { offset-path: path("M0,50 Q50,20 100,50 T200,50 T300,50 T400,50 T500,50 T600,50 T700,50 T800,50 T900,50 T1000,50 T1100,50 T1200,50"); animation-delay: 0s; animation-name: moveDot1; } .dot2 { offset-path: path("M0,50 Q50,20 100,50 T200,50 T300,50 T400,50 T500,50 T600,50 T700,50 T800,50 T900,50 T1000,50 T1100,50 T1200,50"); animation-delay: 0.4s; animation-name: moveDot2; } .dot3 { offset-path: path("M0,50 Q50,20 100,50 T200,50 T300,50 T400,50 T500,50 T600,50 T700,50 T800,50 T900,50 T1000,50 T1100,50 T1200,50"); animation-delay: 0.8s; animation-name: moveDot3; } @keyframes dataFlow { 0% { stroke-dashoffset: 1000; opacity: 0.3; } 100% { stroke-dashoffset: 0; opacity: 0.7; } } @keyframes moveDot1 { 0%, 100% { offset-distance: 0%; } 50% { offset-distance: 100%; } } @keyframes moveDot2 { 0%, 100% { offset-distance: 0%; } 50% { offset-distance: 100%; } } @keyframes moveDot3 { 0%, 100% { offset-distance: 0%; } 50% { offset-distance: 100%; } } /* New keyframe for pulseDot, as it was missing */ @keyframes pulseDot { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.2); opacity: 0.7; } } /* --- Client Projects Page Specific Styles --- */ /* Main container for the client projects page */ .client-projects-container { /* No top/bottom padding here, as the hero section will provide it */ padding-left: 0; padding-right: 0; } /* Welcome Section - Now a Hero Section */ .client-projects-hero { background: linear-gradient(to right, var(--primary-color), var(--primary-dark)); /* Blue gradient background */ padding: 5rem 0; /* Generous top/bottom padding */ position: relative; overflow: hidden; color: #fff; /* Default text color for this section */ text-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Stronger text shadow for depth */ } /* Subtle texture for the hero section */ .client-projects-hero::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: url('https://www.transparenttextures.com/patterns/lined-paper.png'); /* Your texture */ opacity: 0.05; /* Your texture opacity */ z-index: 0; pointer-events: none; } .client-projects-hero .container { position: relative; z-index: 1; /* Ensure content is above the texture */ } .client-projects-hero h2 { font-family: 'Poppins', sans-serif; font-size: 2.8rem; /* Larger and more commanding headline for a hero */ font-weight: 700; color: #fff; /* Ensure white text */ margin-bottom: 0.8rem; /* Closer to lead paragraph */ line-height: 1.2; text-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Inherited from parent, but good to re-emphasize */ } .client-projects-hero p.lead { font-family: 'Inter', sans-serif; font-size: 1.3rem; /* Larger lead paragraph */ max-width: 700px; /* Control line length */ margin-left: auto; margin-right: auto; color: rgba(255, 255, 255, 0.9); /* Slightly transparent white for lead */ text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); } .client-projects-hero p.lead strong { color: #fff; /* Explicitly white for the email */ } /* Main Projects Title Section (remains below the blue hero) */ .client-projects-section { padding-top: 4rem; /* Add padding for this section */ padding-bottom: 5rem; } .client-projects-section .client-projects-title { font-family: 'Poppins', sans-serif; font-size: 3rem; font-weight: 700; color: var(--primary-color); text-align: center; margin-bottom: 4rem !important; line-height: 1.2; text-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); animation: fadeInUp 0.8s ease-out 0.2s; } /* Projects Table Wrapper - Enhance its appearance */ .client-projects-table-wrapper { background-color: var(--bg-white, #fff); border-radius: var(--border-radius-lg); box-shadow: var(--shadow-medium); padding: 1.5rem; overflow-x: auto; animation: fadeInUp 0.8s ease-out 0.4s; animation-fill-mode: both; } .client-projects-table { width: 100%; border-collapse: separate; border-spacing: 0; } .client-projects-table thead { background: linear-gradient(45deg, var(--primary-color), var(--primary-dark)); color: #fff; font-family: 'Poppins', sans-serif; font-weight: 600; border-radius: var(--border-radius-lg) var(--border-radius-lg) 0 0; overflow: hidden; } .client-projects-table th { padding: 1.2rem 1.5rem; border: none !important; vertical-align: middle; text-align: left; } .client-projects-table th:first-child { border-top-left-radius: var(--border-radius-lg); } .client-projects-table th:last-child { border-top-right-radius: var(--border-radius-lg); } .client-projects-table tbody tr { transition: background-color var(--transition-speed), transform 0.2s ease-out, box-shadow 0.2s ease-out; } .client-projects-table tbody tr:hover { background-color: var(--primary-light); transform: translateY(-3px); box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08); } .client-projects-table td { padding: 1rem 1.5rem; border-top: 1px solid var(--border-color-light); color: var(--text-dark); font-family: 'Inter', sans-serif; vertical-align: middle; } .badge { font-weight: 600; padding: 0.5em 0.9em; border-radius: var(--border-radius-md); font-size: 0.875rem; text-transform: capitalize; } .view-project-btn { font-family: 'Inter', sans-serif; font-weight: 500; padding: 0.5rem 0.9rem; font-size: 0.9rem; border-radius: var(--border-radius-md); transition: all var(--transition-speed); } .view-project-btn:hover { transform: translateY(-2px); box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1); } .client-projects-section .btn-primary { margin-top: 4rem !important; } .client-projects-section .alert-warning { border-radius: var(--border-radius-md); box-shadow: var(--shadow-light); font-family: 'Inter', sans-serif; font-size: 1.1rem; padding: 1.5rem; text-align: center; } /* Status Badges - already good, just reinforcing */ .badge { font-weight: 600; padding: 0.5em 0.8em; border-radius: var(--border-radius-sm); font-size: 0.85rem; } /* View Project Button (inside table) */ .view-project-btn { font-family: 'Inter', sans-serif; font-weight: 500; /* Adjust if you want it to look more like a custom button, currently uses Bootstrap's btn-outline-info */ } /* Back to OTP Button */ .client-projects-section .btn-primary { /* This button now inherits from your existing .btn-primary styles, which are great */ font-family: 'Poppins', sans-serif; } /* Modal Specific Overrides (if you need more than custom-modal classes) */ .modal-title.custom-modal-title { /* Specific styling for the title within the custom modal header */ font-family: 'Poppins', sans-serif; font-weight: 700; font-size: 1.8rem; color: #fff; /* Ensure white color on gradient background */ } .custom-modal-body .row .col-md-6 strong { font-family: 'Poppins', sans-serif; /* Use Poppins for labels */ font-weight: 600; /* Make them bolder */ color: var(--primary-color); /* Primary color for labels */ } .custom-modal-body .row .col-md-6 span { font-family: 'Inter', sans-serif; /* Use Inter for values */ color: var(--text-dark); /* Dark text for values */ } /* Modal Layout */ .project-details-grid { display: grid; grid-template-columns: 1fr; gap: 1.5rem; } @media (min-width: 768px) { .project-details-grid { grid-template-columns: 1fr 1fr; } .modal-row { display: contents; /* Allows child divs to be direct grid items */ } } .modal-item { display: flex; flex-direction: column; gap: 0.25rem; padding: 0.5rem; background-color: #f8f9fa; /* Light gray background for contrast */ border-radius: 0.5rem; box-shadow: 0 2px 4px rgba(0,0,0,0.05); } .modal-item strong { font-size: 0.9rem; text-transform: uppercase; color: var(--bs-primary); } .modal-item span { font-size: 1rem; font-weight: 500; } /* Ensure badges look good inside the modal layout */ .modal-item .badge { align-self: flex-start; /* Aligns the badge to the left */ margin-top: 0.25rem; } /* General improvements */ .modal-header .btn-close-white { color: #fff; filter: invert(1) grayscale(100%) brightness(200%); } /* Modal Enhancements */ .custom-modal-dialog { max-width: 900px; } .custom-modal-content { border-radius: 1rem; border: none; box-shadow: var(--shadow-medium); } .custom-modal-header { background-color: var(--primary-color); color: #fff; border-top-left-radius: 1rem; border-top-right-radius: 1rem; } /* Chat & Document Sections */ #chatMessages, #documentList { background-color: #f8f9fa; /* Light gray for content area */ border-radius: 0.75rem; border: 1px solid var(--border-color-light); } #chatMessages .card { border: none !important; box-shadow: none !important; background-color: transparent !important; } #chatInput { border-radius: 0 0 0.5rem 0.5rem; } #sendMessageBtn { border-radius: 0 0 0.5rem 0; } /* Documents List */ #documentList .list-group-item { background-color: #fff; border: 1px solid var(--border-color-light); border-radius: 0.5rem; margin-bottom: 0.5rem; transition: all 0.2s ease; } #documentList .list-group-item:hover { background-color: #f6f9fc; } /* Upload Form */ #supplierUploadForm h5 { color: var(--text-dark); font-weight: 600; margin-top: 1.5rem; } /* Project Table Styles */ .client-projects-table-wrapper { background-color: var(--bg-light) !important; border: 1px solid var(--border-color-light); border-radius: 1rem !important; overflow: hidden; /* Ensures rounded corners */ } .client-projects-table thead { background-color: var(--primary-color); color: #fff; border-top-left-radius: 1rem; border-top-right-radius: 1rem; } .client-projects-table th { font-weight: 600; padding: 1rem; } .client-projects-table td { vertical-align: middle; padding: 1rem; border-bottom: 1px solid var(--border-color-light); } /* Status Badges */ .badge { padding: 0.5rem 1rem; border-radius: 20px; font-size: 0.85rem; font-weight: 600; text-transform: capitalize; } .badge.bg-success { background-color: #28a745 !important; } .badge.bg-warning { background-color: #ffc107 !important; } .badge.bg-info { background-color: #17a2b8 !important; } /* Table Hover Effect */ .client-projects-table tbody tr:hover { background-color: #f6f9fc; cursor: pointer; transform: scale(1.005); transition: transform 0.2s ease-in-out; } /* Search & Filter Bar Styles */ .client-search-input { border-radius: 0 0.5rem 0.5rem 0; border-color: var(--border-color-light); } .client-search-input:focus { box-shadow: 0 0 0 0.2rem rgba(var(--primary-color), 0.25); border-color: var(--primary-color); } .client-search-icon { background-color: var(--bg-light); /* Match the container or a light color */ border-right: none; border-radius: 0.5rem 0 0 0.5rem; border-color: var(--border-color-light); color: var(--text-muted); } .filter-btn { font-weight: 500; transition: all 0.3s ease; border-radius: 0.5rem; } .filter-btn.active { background-color: var(--primary-color) !important; border-color: var(--primary-color) !important; box-shadow: var(--shadow-light); transform: translateY(-2px); } /* Custom Styles for Client Portal */ /* Enhanced Hero Section */ .client-projects-hero { background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-dark) 100%); box-shadow: var(--shadow-medium); border-bottom-left-radius: 25px; border-bottom-right-radius: 25px; } .client-projects-hero h2 { font-size: 2.5rem; font-weight: 700; } /* Main Dashboard Title */ .client-projects-title { color: var(--text-dark); /* Use your defined dark text color */ font-size: 2.2rem; font-weight: 600; margin-bottom: 2rem !important; } .client-projects-title span { color: var(--primary-color); } /* Brilliant Chat Section Styles */ /* Main container and heading */ #chatSection { margin-top: 2rem; } #chatSection h4 { font-size: 1.5rem; font-weight: 600; color: var(--text-dark); margin-bottom: 1.5rem; } /* Chat messages container */ #chatMessages { max-height: 400px; /* Increase height for more messages */ overflow-y: auto; border: 1px solid var(--border-color-light); border-radius: 1rem; background-color: var(--bg-light); /* Soft background color */ padding: 1.5rem; display: flex; /* Use flexbox for message alignment */ flex-direction: column; gap: 0.75rem; /* Space between messages */ scroll-behavior: smooth; /* Smooth scrolling for new messages */ } /* Scrollbar styling for a cleaner look (optional) */ #chatMessages::-webkit-scrollbar { width: 8px; } #chatMessages::-webkit-scrollbar-thumb { background-color: var(--primary-color); border-radius: 4px; } #chatMessages::-webkit-scrollbar-track { background-color: var(--bg-light); } /* Chat Bubble Styles */ .chat-message-container { display: flex; align-items: flex-end; /* Align bubbles to the bottom of the line */ gap: 0.75rem; } .chat-message-container.client-message { justify-content: flex-start; } .chat-message-container.supplier-message { justify-content: flex-end; } /* Avatars (Optional, requires adding HTML to your EJS) */ .chat-avatar { width: 35px; height: 35px; border-radius: 50%; background-color: var(--primary-color); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 0.8rem; flex-shrink: 0; position: relative; top: 5px; /* Adjust for better alignment */ } /* Message Bubbles */ .chat-bubble { max-width: 80%; padding: 0.75rem 1rem; border-radius: 1.25rem; font-size: 0.95rem; line-height: 1.4; position: relative; animation: fadeIn 0.3s ease-in-out; } .chat-bubble.client-bubble { background-color: #fff; color: var(--text-dark); border: 1px solid var(--border-color-light); border-bottom-left-radius: 0.25rem; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05); } .chat-bubble.supplier-bubble { background-color: var(--primary-color); color: #fff; border-bottom-right-radius: 0.25rem; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); } .chat-bubble strong { font-size: 0.8rem; display: block; margin-bottom: 0.25rem; font-weight: 600; } @keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } /* Chat Input Bar Styles */ .input-group { margin-top: 1rem; } #chatInput { border-radius: 0.5rem 0 0.5rem 0.5rem; padding: 0.75rem 1rem; transition: all 0.3s ease; } #chatInput:focus { box-shadow: 0 0 0 0.2rem rgba(var(--primary-color), 0.25); border-color: var(--primary-color); } #sendMessageBtn { border-radius: 0 0.5rem 0.5rem 0; font-weight: 600; transition: all 0.3s ease; } #sendMessageBtn:hover { transform: translateY(-2px); box-shadow: 0 4px 6px rgba(var(--primary-color), 0.2); } .btn-xs { padding: .25rem .4rem; font-size: .875rem; line-height: .5; border-radius: .2rem; } /* Custom Button Styles for Light Backgrounds */ .btn-secondary-custom { background-color: transparent; color: var(--primary-color); border: 2px solid var(--primary-color); font-weight: 600; } .btn-secondary-custom:hover, .btn-secondary-custom:focus { background: linear-gradient(to right, var(--primary-color), var(--primary-dark)); color: #fff; border-color: transparent; transform: translateY(-2px); box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1); }