/* ====================================================== Global Theme Tokens ====================================================== */ :root{ --primary-color:#E63946; --primary-dark:#C1121F; --secondary-color:#457B9D; --secondary-light:#A8DADC; --accent-color:#F4A261; --light-bg:#F1FAEE; --dark-text:#1D3557; --light-text:#F1FAEE; --shadow:0 8px 32px rgba(0,0,0,0.15); --transition:all 0.4s cubic-bezier(0.175,0.885,0.32,1.275); --gradient:linear-gradient(135deg,var(--primary-color),var(--secondary-color)); --focus-ring:#22d3ee; } /* ====================================================== Base / Reset ====================================================== */ *{margin:0;padding:0;box-sizing:border-box;} html{ scroll-behavior:smooth; font-size:16px; /* Offset for fixed navbar when jumping to anchors */ scroll-padding-top:80px; } body{ font-family:'Poppins',sans-serif; color:var(--dark-text); line-height:1.7; overflow-x:hidden; background-color:var(--light-bg); padding-top:72px; /* reserve space for fixed navbar */ } /* Headings */ h1,h2,h3,h4{ font-family:'Playfair Display',serif; font-weight:700; color:var(--dark-text); } /* Container */ .container{width:100%;max-width:1200px;margin:0 auto;padding:0 20px;} /* Focus styles (AA+) */ a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, [role="button"]:focus-visible, .hamburger-menu:focus-visible, .nav-link:focus-visible, .back-to-top:focus-visible, .chat-close:focus-visible, .chat-send:focus-visible, #chatInput:focus-visible{ outline:3px solid var(--focus-ring); outline-offset:3px; } /* Motion preferences */ @media (prefers-reduced-motion:reduce){ *{animation:none !important;transition:none !important;} } /* Optional: reduce heavy shadows on devices that prefer less transparency */ @media (prefers-reduced-transparency:reduce){ :root{ --shadow:0 6px 20px rgba(0,0,0,0.18); } } /* Prevent background scroll when mobile menu open (toggle on ) */ body.menu-open{ overflow:hidden; } /* ====================================================== Buttons ====================================================== */ .btn{ display:inline-block; padding:14px 35px; font-weight:600; border-radius:50px; transition:var(--transition); text-align:center; cursor:pointer; text-decoration:none; font-size:1rem; border:none; } .btn-primary{ background:var(--gradient); color:white; box-shadow:0 4px 15px rgba(229,57,70,0.3); } .btn-primary:hover{ transform:translateY(-3px); box-shadow:0 12px 20px rgba(229,57,70,0.4); background:linear-gradient(135deg,var(--primary-dark),var(--secondary-color)); } .btn-secondary{ background:white; border:2px solid var(--primary-color); color:var(--primary-color); box-shadow:0 4px 15px rgba(0,0,0,0.1); } .btn-secondary:hover{ transform:translateY(-3px); box-shadow:0 12px 20px rgba(0,0,0,0.15); background:var(--primary-color); color:white; } .btn-light{ background:white; color:var(--primary-color); box-shadow:0 4px 15px rgba(255,255,255,0.2); } .btn-light:hover{ background:rgba(255,255,255,0.9); color:var(--primary-dark); } .btn-outline{ background:transparent; border:2px solid white; color:white; } .btn-outline:hover{ background:white; color:var(--primary-color); } /* Remove hover transforms on touch devices to avoid sticky hover */ @media (hover:none){ .btn:hover, .nav-link:hover, .feature-card:hover, .chat-button:hover, .back-to-top:hover{ transform:none; box-shadow:none; } } /* ====================================================== Navbar ====================================================== */ .navbar{ position:fixed;top:0;left:0;width:100%; background:rgba(255,255,255,0.98); box-shadow:0 2px 30px rgba(0,0,0,0.1); padding:15px 0; transition:var(--transition); backdrop-filter:blur(12px); z-index:1100; } .navbar.scrolled{ padding:10px 0; box-shadow:0 5px 25px rgba(0,0,0,0.1); } .navbar .container{ display:flex; justify-content:space-between; align-items:center; } .navbar-brand{ display:flex; align-items:center; gap:12px; font-size:1.8rem; color:var(--primary-color); font-weight:700; text-decoration:none; } .logo-icon{ height:50px; transition:transform 0.5s ease; will-change:transform; } .logo-text{ height:70px; transition:opacity 0.3s ease; } .navbar-brand:hover .logo-icon{ transform:rotate(360deg); } .navbar-brand:hover .logo-text{ opacity:0.9; } .hamburger-menu{ display:none; flex-direction:column; justify-content:space-between; width:30px; height:21px; cursor:pointer; z-index:1200; } .hamburger-menu .bar{ height:3px; width:100%; background-color:var(--primary-color); border-radius:3px; transition:var(--transition); } .hamburger-menu.active .bar:nth-child(1){ transform:translateY(9px) rotate(45deg); } .hamburger-menu.active .bar:nth-child(2){ opacity:0; } .hamburger-menu.active .bar:nth-child(3){ transform:translateY(-9px) rotate(-45deg); } .navbar-links{ display:flex; align-items:center; } .navbar-links ul{ display:flex; list-style:none; gap:20px; } .nav-link{ color:var(--dark-text); text-decoration:none; font-weight:500; padding:8px 20px; border-radius:30px; transition:var(--transition); } .nav-link:hover{ color:var(--primary-color); transform:translateY(-2px); } .nav-link.active{ background:var(--gradient); color:white; box-shadow:0 4px 15px rgba(229,57,70,0.3); } /* ====================================================== Hero ====================================================== */ .hero-section{ position:relative; /* flexible height handles mobile browser UI correctly */ height:auto; min-height:clamp(560px, 100svh, 900px); display:flex; align-items:center; overflow:hidden; background:linear-gradient(135deg,#1D3557,#457B9D); } .hero-video{ position:absolute; top:0; left:0; width:100%; height:100%; object-fit:cover; z-index:0; opacity:0.4; transition:all 8s ease; } .hero-section:hover .hero-video{ opacity:0.5; transform:scale(1.05); } .hero-content{ max-width:900px; color:white; text-align:center; padding:0 30px; position:relative; z-index:2; margin:0 auto; } .hero-content h1{ font-size:clamp(2rem, 4vw + 1rem, 4.5rem); margin-bottom:25px; text-shadow:2px 2px 8px rgba(0,0,0,0.3); line-height:1.2; animation:fadeInUp 1.5s ease; } .hero-content p{ font-size:1.5rem; margin-bottom:40px; opacity:0; animation:fadeInUp 1.5s ease 0.3s forwards; } .hero-buttons{ display:flex; justify-content:center; gap:20px; flex-wrap:wrap; opacity:0; animation:fadeInUp 1.5s ease 0.6s forwards; } /* Animations */ @keyframes fadeInUp{ from{opacity:0; transform:translateY(30px);} to{opacity:1; transform:translateY(0);} } .scroll-down-indicator{ position:absolute; bottom:40px; left:50%; transform:translateX(-50%); font-size:2rem; color:white; animation:bounceDown 2s infinite; z-index:2; opacity:0.7; transition:var(--transition); text-decoration:none; } .scroll-down-indicator:hover{ opacity:1; color:var(--accent-color); } @keyframes bounceDown{ 0%,100%{ transform:translate(-50%,0); } 50%{ transform:translate(-50%,10px); } } /* ====================================================== Features ====================================================== */ .features-section{ padding:120px 0; background:white; position:relative; overflow:hidden; } .features-section::before, .features-section::after{ content:''; position:absolute; border-radius:50%; z-index:0; } .features-section::before{ top:-150px; left:-150px; width:300px; height:300px; background:radial-gradient(circle,rgba(69,123,157,0.1),transparent); } .features-section::after{ bottom:-200px; right:-200px; width:400px; height:400px; background:radial-gradient(circle,rgba(229,57,70,0.1),transparent); } .section-title{ text-align:center; margin-bottom:80px; position:relative; z-index:1; } .section-title h2{ font-size:3.2rem; position:relative; display:inline-block; } .section-title h2::after{ content:''; position:absolute; width:80px; height:4px; background:var(--gradient); bottom:-15px; left:50%; transform:translateX(-50%); border-radius:2px; } .section-title p{ max-width:700px; margin:20px auto 0; font-size:1.1rem; color:#555; } .features-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:30px; } .feature-card{ text-align:center; padding:50px 30px; border-radius:20px; background:white; transition:var(--transition); position:relative; overflow:hidden; z-index:1; box-shadow:0 10px 30px rgba(0,0,0,0.05); border:1px solid rgba(0,0,0,0.03); will-change:transform; } .feature-card:hover{ transform:translateY(-15px); box-shadow:0 20px 40px rgba(0,0,0,0.1); } .feature-icon{ font-size:3.5rem; margin-bottom:30px; background:var(--gradient); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; transition:var(--transition); display:inline-block; } .feature-card:hover .feature-icon{ transform:scale(1.2); } .feature-card h3{ margin-bottom:20px; font-size:1.5rem; } .feature-card p{ color:#555; } /* ====================================================== Testimonials ====================================================== */ .testimonials-section{ padding:120px 0; background:var(--light-bg); position:relative; overflow:hidden; } .testimonials-section::before{ content:''; position:absolute; top:0; left:0; width:100%; height:100%; /* Fixed: valid viewBox and encoded color */ background:url('data:image/svg+xml;utf8,') no-repeat center / cover; z-index:0; } .testimonials-slider{ display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:30px; padding:20px 0 60px; position:relative; z-index:1; } .testimonial-card{ background:white; padding:40px; border-radius:20px; box-shadow:var(--shadow); transition:var(--transition); border:1px solid rgba(0,0,0,0.03); position:relative; } .testimonial-card::before{ content:'"'; position:absolute; top:20px; left:20px; font-size:5rem; font-family:'Playfair Display',serif; color:rgba(229,57,70,0.1); line-height:1; z-index:0; } .testimonial-card:hover{ transform:translateY(-10px); } .testimonial-text{ font-style:italic; margin-bottom:25px; color:#555; position:relative; z-index:1; font-size:1.1rem; } .testimonial-author{ display:flex; align-items:center; } .testimonial-author img{ width:70px; height:70px; border-radius:50%; margin-right:20px; border:3px solid var(--primary-color); object-fit:cover; } .author-info h5{ font-weight:600; margin-bottom:5px; color:var(--dark-text); } .author-info p{ color:#777; font-size:0.9rem; margin:0; } /* ====================================================== Call To Action ====================================================== */ .cta-section{ padding:140px 0; background:var(--gradient); color:white; text-align:center; position:relative; overflow:hidden; } .cta-section::before, .cta-section::after{ content:''; position:absolute; border-radius:50%; background:radial-gradient(circle,rgba(255,255,255,0.1),transparent); } .cta-section::before{ top:-100px; left:-100px; width:300px; height:300px; } .cta-section::after{ bottom:-150px; right:-150px; width:400px; height:400px; } .cta-content{ position:relative; z-index:1; } .cta-content h2{ font-size:3.5rem; margin-bottom:30px; text-shadow:2px 2px 8px rgba(0,0,0,0.2); } .cta-content p{ font-size:1.5rem; margin-bottom:50px; max-width:800px; margin-left:auto; margin-right:auto; opacity:0.9; } .cta-buttons{ display:flex; justify-content:center; gap:20px; flex-wrap:wrap; } .cta-section .btn{ animation:pulse 2s infinite; } @keyframes pulse{ 0%{transform:scale(1);} 50%{transform:scale(1.05);} 100%{transform:scale(1);} } /* ====================================================== Footer ====================================================== */ .footer{ background:var(--dark-text); color:white; padding:100px 0 30px; position:relative; } .footer::before{ content:''; position:absolute; top:0; left:0; width:100%; height:10px; background:var(--gradient); } .footer-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:40px; margin-bottom:60px; } .footer-logo{ display:flex; align-items:center; gap:15px; font-size:1.8rem; font-weight:700; margin-bottom:25px; color:white; } .footer-logo img{ height:50px; transition:transform 0.5s ease; } .footer-logo:hover img{ transform:rotate(360deg) scale(1.1); } .footer-logo span{ transition:all 0.3s ease; } .footer-logo:hover span{ color:var(--accent-color); } .footer-about p{ margin-bottom:25px; opacity:0.8; font-size:1rem; } .social-links{ display:flex; gap:15px; margin-bottom:30px; } .social-links a{ display:inline-flex; align-items:center; justify-content:center; width:45px; height:45px; background:rgba(255,255,255,0.1); border-radius:50%; color:white; transition:var(--transition); font-size:1.1rem; text-decoration:none; } .social-links a:hover{ background:var(--accent-color); color:var(--dark-text); transform:translateY(-5px); } .footer-links h4{ font-size:1.3rem; margin-bottom:25px; position:relative; padding-bottom:10px; color:white; } .footer-links h4::after{ content:''; position:absolute; left:0; bottom:0; width:50px; height:3px; background:var(--gradient); border-radius:3px; } .footer-links ul{ list-style:none; } .footer-links li{ margin-bottom:12px; } .footer-links a{ color:rgba(255,255,255,0.8); text-decoration:none; transition:var(--transition); font-size:1rem; display:inline-block; } .footer-links a:hover{ color:var(--accent-color); transform:translateX(5px); } .footer-links a i{ margin-right:8px; width:20px; text-align:center; } .footer-bottom{ border-top:1px solid rgba(255,255,255,0.1); padding-top:30px; margin-top:60px; text-align:center; } .footer-bottom p{ margin-bottom:0; opacity:0.7; font-size:0.9rem; } .footer-bottom a{ color:var(--accent-color); font-weight:500; text-decoration:none; transition:var(--transition); } .footer-bottom a:hover{ color:white; } /* ====================================================== Back to Top ====================================================== */ .back-to-top{ position:fixed; bottom:30px; right:30px; width:60px; height:60px; background:var(--gradient); color:white; border-radius:50%; display:flex; align-items:center; justify-content:center; opacity:0; visibility:hidden; transition:all 0.4s ease; z-index:1050; box-shadow:0 5px 20px rgba(229,57,70,0.3); text-decoration:none; will-change:transform; } .back-to-top.visible{ opacity:1; visibility:visible; } .back-to-top:hover{ transform:translateY(-5px); box-shadow:0 8px 25px rgba(229,57,70,0.4); } /* ====================================================== Chat Widget ====================================================== */ .chat-button{ position:fixed; bottom:40px; right:40px; width:70px; height:70px; background:var(--gradient); color:white; border-radius:50%; display:flex; align-items:center; justify-content:center; box-shadow:0 10px 30px rgba(229,57,70,0.4); cursor:pointer; z-index:1000; transition:var(--transition); animation:bounce 2s infinite; will-change:transform; } .chat-button:hover{ animation:none; transform:scale(1.1) translateY(-5px); box-shadow:0 15px 35px rgba(229,57,70,0.5); } .chat-button i{ font-size:1.8rem; } @keyframes bounce{ 0%,100%{transform:translateY(0);} 50%{transform:translateY(-10px);} } .chat-button.is-hidden{ display:none; } .chat-window{ position:fixed; bottom:120px; right:40px; width:380px; max-width:90%; background:white; border-radius:20px; box-shadow:0 15px 40px rgba(0,0,0,0.2); display:none; flex-direction:column; z-index:1001; opacity:0; transform:translateY(20px); transition:opacity 0.3s ease, transform 0.3s ease; border:1px solid rgba(0,0,0,0.05); /* Never fall off-screen */ max-height:72vh; } .chat-window.active{ display:flex; opacity:1; transform:translateY(0); } .chat-header{ background:var(--gradient); color:white; padding:18px 25px; border-top-left-radius:20px; border-top-right-radius:20px; display:flex; justify-content:space-between; align-items:center; } .chat-header-content{ display:flex; align-items:center; gap:15px; } .chat-logo{ width:45px; height:45px; border-radius:50%; object-fit:contain; border:2px solid white; } .chat-header h3{ margin:0; font-size:1.2rem; font-weight:600; } .chat-status{ font-size:0.8rem; opacity:0.9; margin:3px 0 0; } .chat-close{ background:none; border:none; color:white; font-size:1.5rem; cursor:pointer; opacity:0.8; transition:var(--transition); width:30px; height:30px; display:flex; align-items:center; justify-content:center; border-radius:50%; } .chat-close:hover{ opacity:1; background:rgba(255,255,255,0.2); } .chat-messages{ flex:1; padding:25px; overflow-y:auto; max-height:350px; background:white; } .chat-messages::-webkit-scrollbar{ width:6px; } .chat-messages::-webkit-scrollbar-thumb{ background:var(--primary-color); border-radius:10px; } .message{ display:flex; margin-bottom:20px; align-items:flex-end; gap:12px; } .message-user{ justify-content:flex-end; } .message-bot{ justify-content:flex-start; } .message-avatar{ width:40px; height:40px; border-radius:50%; object-fit:cover; border:2px solid var(--primary-color); } .message-content{ max-width:75%; padding:15px 20px; border-radius:20px; position:relative; font-size:0.95rem; line-height:1.5; } .user-message{ background:var(--gradient); color:white; border-bottom-right-radius:5px; } .bot-message{ background:var(--light-bg); color:var(--dark-text); border-bottom-left-radius:5px; } .message-timestamp{ font-size:0.7rem; color:rgba(255,255,255,0.85); display:block; margin-top:5px; text-align:right; } .bot-message .message-timestamp{ color:#999; } .message.typing .message-content p{ opacity:0.6; font-style:italic; } .chat-input{ display:flex; padding:20px; border-top:1px solid #eee; background:white; border-bottom-left-radius:20px; border-bottom-right-radius:20px; } .chat-input input{ flex:1; padding:14px 20px; border:2px solid #eee; border-radius:50px; outline:none; transition:var(--transition); font-size:0.95rem; } .chat-input input:focus{ border-color:var(--primary-color); box-shadow:0 0 10px rgba(229,57,70,0.2); } .chat-send{ background:var(--gradient); color:white; border:none; width:55px; height:55px; border-radius:50%; margin-left:12px; cursor:pointer; display:flex; align-items:center; justify-content:center; position:relative; transition:var(--transition); } .chat-send:hover{ transform:scale(1.1); box-shadow:0 5px 15px rgba(229,57,70,0.3); } .chat-send i{ font-size:1.3rem; } /* ====================================================== Responsive ====================================================== */ @media (max-width:1200px){ .hero-content h1{ font-size:4rem; } } @media (max-width:992px){ .hero-content h1{ font-size:3.5rem; } .section-title h2{ font-size:2.8rem; } .cta-content h2{ font-size:3rem; } .feature-card{ padding:40px 25px; } } @media (max-width:768px){ .hamburger-menu{ display:flex; } .navbar-links{ position:fixed; top:0; right:-100%; width:80%; max-width:400px; height:100vh; background:white; flex-direction:column; justify-content:center; align-items:center; transition:var(--transition); box-shadow:-5px 0 30px rgba(0,0,0,0.1); z-index:1150; } .navbar-links.active{ right:0; } .navbar-links ul{ flex-direction:column; gap:30px; width:100%; padding:0 30px; } .nav-link{ display:block; width:100%; text-align:center; padding:15px; font-size:1.1rem; } .hero-content h1{ font-size:3rem; } .hero-content p{ font-size:1.3rem; } .section-title h2{ font-size:2.5rem; } .cta-content h2{ font-size:2.5rem; } .cta-content p{ font-size:1.3rem; } .footer{ text-align:center; padding:80px 0 30px; } .footer-links h4::after{ left:50%; transform:translateX(-50%); } .social-links{ justify-content:center; } .footer-logo{ justify-content:center; } .footer-about{ margin-bottom:40px; } .cta-buttons{ flex-direction:column; align-items:center; gap:15px; } .chat-button{ bottom:30px; right:30px; width:60px; height:60px; } .chat-window{ width:90%; bottom:100px; right:15px; } } @media (max-width:576px){ .hero-content h1{ font-size:2.5rem; } .hero-content p{ font-size:1.1rem; } .section-title h2{ font-size:2.2rem; } .cta-content h2{ font-size:2.2rem; } .cta-content p{ font-size:1.1rem; } .btn{ padding:12px 25px; font-size:1rem; } .feature-card{ padding:30px 20px; } .feature-icon{ font-size:3rem; margin-bottom:20px; } .testimonial-card{ padding:30px; } .testimonial-author img{ width:60px; height:60px; } .chat-button{ bottom:20px; right:20px; width:55px; height:55px; } .chat-button i{ font-size:1.5rem; } .chat-window{ bottom:85px; } .message-content{ max-width:85%; } .logo-text{ height:22px; } } /* ====================================================== Dark Mode ====================================================== */ @media (prefers-color-scheme:dark){ :root{ --light-bg:#0f172a; /* page bg */ --dark-text:#E5E7EB; /* main text in dark */ --secondary-light:#5ac1d0; /* focus/hover tint */ --shadow:0 8px 32px rgba(0,0,0,0.6); --gradient:linear-gradient(135deg,#C1121F,#1f6aa5); } .navbar{ background:rgba(15,23,42,0.85); box-shadow:0 2px 30px rgba(0,0,0,0.6); } .navbar.scrolled{ box-shadow:0 5px 25px rgba(0,0,0,0.6); } .nav-link{ color:var(--light-text); } .nav-link:hover{ color:var(--secondary-light); } .features-section{ background:#0b1220; } .feature-card{ background:#111827; border-color:rgba(255,255,255,0.06); box-shadow:0 10px 30px rgba(0,0,0,0.4); } .feature-card p{ color:#cbd5e1; } .testimonials-section{ background:#0f172a; } .testimonial-card{ background:#111827; border-color:rgba(255,255,255,0.06); } .testimonial-text{ color:#cbd5e1; } .cta-section{ /* ensure legible contrast in dark */ background:linear-gradient(135deg,#9b0f1a,#134e78); } .footer{ background:#0b1220; } .footer-links a{ color:rgba(255,255,255,0.88); } .footer-bottom a:hover{ color:#fff; } .chat-window{ background:#0b1220; border-color:rgba(255,255,255,0.06); } .chat-messages{ background:transparent; } .bot-message{ background:#111827; color:var(--light-text); } .message-timestamp{ color:rgba(255,255,255,0.85); } .bot-message .message-timestamp{ color:#94a3b8; } .chat-input{ background:#0b1220; border-top-color:rgba(255,255,255,0.06); } .chat-input input{ background:#111827; border-color:#1f2937; color:var(--light-text); } .chat-input input::placeholder{ color:#94a3b8; } .back-to-top{ box-shadow:0 5px 20px rgba(0,0,0,0.6); } .chat-messages::-webkit-scrollbar-thumb{ background:var(--secondary-color); } }