:root{ --deep: #0B2545; /* primary deep navy */ --deep-2: #061028; /* darker accent for headers/shadows */ --accent: #6ec8e1; /* cyan/turquoise accent */ --accent2: #6C5CE7; /* vivid indigo accent */ --accent3: #FFB703; /* warm highlight (sparingly used) */ --muted: #F4F7FB; /* soft page background */ --card: #ffffff; /* card surface */ --radius: 14px; --header-height: 120px; --max-width: 1200px; font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; } /* Reset */ *{box-sizing:border-box;margin:0;padding:0} html,body{height:100%} body{background:linear-gradient(180deg,#f8fbff,#eef6ff);color:var(--deep);line-height:1.5} main#content{padding-top:calc(var(--header-height) + 8px)} /* ==================== Hero ==================== */ .hero-section{padding:220px 6% 70px;display:flex;align-items:center;justify-content:space-between;gap:32px;position:relative;overflow:visible;}/*padding 220px 6% 70px*/ .hero-section .container{max-width:var(--max-width);margin:0 auto} .hero-inner{display:flex;align-items:center;gap:32px} .hero-left{flex:1;min-width:300px} .hero-left h1{font-size:2.6rem;line-height:1.03;color:var(--deep);margin-bottom:12px;background:linear-gradient(90deg,var(--accent),var(--accent2));-webkit-background-clip:text;background-clip:text;color:transparent} .hero-left p{color:rgba(6,32,48,0.8);margin-bottom:20px;max-width:640px} .hero-right{flex:1;display:flex;justify-content:center;align-items:center;position:relative} /* Vibrant hero background panel */ .hero-panel{background:linear-gradient(180deg, rgba(10,28,56,0.96), rgba(7,18,40,0.92)); padding:48px 6%; border-radius:18px; color:#fff} .hero-panel .hero-left p{color:rgba(255,255,255,0.9)} .hero-panel .hero-left .btn.ghost{ border-color: rgba(255,255,255,0.12); color: #fff } .hero-panel .hero-left .btn.primary{ box-shadow:0 10px 36px rgba(108,92,231,0.18) } /* When inside hero-panel, make title solid white for contrast */ .hero-panel .hero-left h1{ background:none !important; -webkit-background-clip:unset !important; background-clip:unset !important; color:#fff !important } /* decorative background blob */ .hero-blob{ position:absolute; right:-40px; top:-40px; z-index:1; pointer-events:none; filter: blur(18px) } /* media card */ .hero-media{ position:relative; width:360px; max-width:46vw; display:flex; align-items:center; justify-content:center; z-index:5 } .hero-image{ width:100%; height:auto; display:block; border-radius:18px; box-shadow:0 40px 80px rgba(6,24,40,0.08); transform:translateY(0); transition:transform .45s cubic-bezier(.2,.9,.2,1), box-shadow .3s } .hero-media:hover .hero-image{ transform:translateY(-8px) scale(1.01); box-shadow:0 50px 120px rgba(6,24,40,0.12) } /* floating glass card over media */ .hero-floating-card{ position:absolute; left:10%; bottom:6%; width:60%; background:linear-gradient(180deg, rgba(255,255,255,0.78), rgba(255,255,255,0.6)); border-radius:12px; padding:12px; box-shadow:0 10px 30px rgba(6,24,40,0.08); backdrop-filter:blur(6px); z-index:8; text-align:left } .hero-floating-card .card-top{ font-size:.75rem; color:var(--accent2); font-weight:700; margin-bottom:6px } .hero-floating-card .card-body{ font-size:.9rem; color:var(--deep); margin-bottom:8px } .btn.small{ padding:8px 12px; font-size:.85rem; border-radius:10px } /* responsive adjustments */ @media (max-width:900px){ .hero-blob{ display:none } .hero-media{ width:86%; max-width:520px } .hero-left h1{ font-size:2.2rem } } .btn{display:inline-block;text-decoration:none;padding:12px 20px;border-radius:12px;font-weight:700} .btn.primary{background:linear-gradient(90deg,var(--accent),var(--accent2));color:#fff} .btn.ghost{background:transparent;border:1px solid var(--accent);color:var(--accent)} /* service card images */ .service-card-index img{width:100%;height:200px;object-fit:cover;border-radius:12px;margin-bottom:25px;box-shadow:0 12px 30px rgba(6,24,40,0.06)} .service-grid article:nth-child(odd) .service-card{background:linear-gradient(180deg,#fff,#f8fbff)} .service-grid article:nth-child(even) .service-card{background:linear-gradient(180deg,#fcfdff,#f3f7ff)} /* ==================== Counters/Values/Clients ==================== */ .split{display:flex;gap:28px;align-items:center;flex-wrap:wrap} .values{display:flex;gap:14px;list-style:none;margin-top:12px} .values li{background:#fff;padding:10px;border-radius:10px;box-shadow:0 8px 20px rgba(6,24,40,0.04)} .counter{background:transparent;padding:12px;border-radius:12px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:6px} .counter .num{width:86px;height:86px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:1.6rem;background:linear-gradient(135deg,var(--accent),var(--accent2));color:#fff;box-shadow:0 14px 44px rgba(6,24,40,0.09)} .counter .label{color:rgba(6,32,48,0.8);font-weight:700} /* ==================== Auth forms ==================== */ .auth-section{display:flex;align-items:center;justify-content:center;padding:48px 18px 84px} .auth-card{width:100%;max-width:420px;background:#fff;border-radius:12px;padding:22px;box-shadow:0 30px 60px rgba(6,24,40,0.06)} .auth-card h2{margin-bottom:12px;color:var(--deep)} .auth-card label{display:block;margin-bottom:8px;font-weight:600;color:rgba(6,32,48,0.8)} .auth-card input,.auth-card textarea,.auth-card select{width:100%;padding:10px;border-radius:8px;border:1px solid rgba(6,24,40,0.06);background:#fbfdff;color:var(--deep);margin-bottom:10px} .auth-card input:focus{outline:none;box-shadow:0 6px 20px rgba(106,92,255,0.07);border-color:var(--accent2)} .auth-card .btn.primary{width:100%;text-align:center} /* ==================== Utilities & footer ==================== */ .client-logos{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:16px;align-items:center} .client-logos{display:flex;gap:18px;align-items:stretch;overflow-x:auto;padding-bottom:8px;-webkit-overflow-scrolling:touch} .logo-box{background:linear-gradient(180deg,#fff,#fbfdff);padding:18px;border-radius:12px;display:flex;flex-direction:column;align-items:center;gap:12px;box-shadow:0 18px 40px rgba(6,24,40,0.04);transition:transform .18s,box-shadow .18s;border-left:4px solid rgba(0,168,216,0.06);flex:0 0 260px;min-width:220px} .logo-box img{width:120px;height:auto;border-radius:10px} .logo-box .client-info{display:flex;flex-direction:column;align-items:center;text-align:center} .logo-box .client-info h4{margin:0;font-size:1.05rem;color:var(--deep)} .logo-box .client-info p{margin:0;font-size:.9rem;color:rgba(6,32,48,0.64)} .logo-box:hover{transform:translateY(-6px);box-shadow:0 28px 80px rgba(6,24,40,0.08)} .site-footer{background:linear-gradient(180deg,#07122a,#051028);color:#cfeef8;padding:48px 6%;text-align:left} .footer-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:28px;align-items:start;max-width:var(--max-width);margin:0 auto} .site-footer h3,.site-footer h4{color:#fff} .site-footer a{display:block;color:rgba(207,238,248,0.9);text-decoration:none;margin:6px 0} .site-footer p{color:rgba(207,238,248,0.85)} .site-footer .copyright{margin-top:20px;color:rgba(207,238,248,0.6);text-align:center} /* ==================== Responsive ==================== */ @media (max-width:900px){ .hero-section{padding-top:calc(var(--header-height) + 18px);flex-direction:column;text-align:center} .navbar-inner{padding:0 14px} .about-preview .split{flex-direction:column} .about-preview .counters{flex-direction:column;gap:12px} .client-logos{overflow-x:auto; padding-bottom:8px} } /* center section headings for a balanced layout */ section h2, .container h2{ text-align:center; margin-bottom:18px } @media (min-width:1100px){ .hero-left h1{font-size:3.2rem} } /* Small accessibility helpers */ a:focus{outline:3px solid rgba(106,92,255,0.12);outline-offset:3px} /* Strong, scoped overrides for critical hero/nav readability (minimal surface) */ .hero-left{position:relative;z-index:5} .hero-title{color:var(--deep) !important;opacity:1 !important;mix-blend-mode:normal !important;position:relative;z-index:10} /* Remove dark-force override so header nav remains readable on dark background */ /* (previously forced var(--deep) which hid nav text against dark header) */ /* Brand link cleanup */ .brand-title{ text-decoration:none } /* Ensure main content has bottom space so floating controls don't overlap */ main#content{ padding-bottom: 96px } /* WhatsApp floating CTA (restored) */ .whatsapp-float{ position:fixed; right:20px; bottom:20px; width:56px; height:56px; border-radius:50%; background:#25d366; display:flex; align-items:center; justify-content:center; box-shadow:0 12px 36px rgba(37,211,102,0.18); text-decoration:none; z-index:850 } .whatsapp-float:hover{ transform:scale(1.06) } .whatsapp-icon{ width:28px; height:28px; fill:#fff } /* Scroll arrows (restore) */ .scroll-arrow{ position:fixed; right:20px; padding:8px 12px; border-radius:8px; background:linear-gradient(90deg,var(--accent),var(--accent2)); color:#fff; border:0; box-shadow:0 8px 20px rgba(10,20,40,0.18); transition:transform .2s,opacity .2s; z-index:840 } .scroll-arrow:hover{ transform:translateY(-3px) } .scroll-arrow.down{ bottom:100px } .scroll-arrow.up{ bottom:160px; display:none } /* nav-wave minimal (ensure it doesn't cover text) */ .nav-wave{ position:absolute; bottom:-1px; left:0; width:100%; height:60px; pointer-events:none; z-index:-1 } /* keep navbar content above the decorative wave */ .navbar-inner, .brand, .nav-menu { position:relative; z-index:2 } /* Skip link: hide by default, reveal on keyboard focus */ .skip-link{ position:absolute; left:8px; top:8px; background:#062033; color:#fff; padding:6px 10px; border-radius:6px; transform:translateY(-140%); transition:transform .18s ease; z-index:1100; text-decoration:none } .skip-link:focus{ transform:translateY(0); } /* Footer spacing and visibility */ .site-footer{ position:relative; z-index:10 } /* ==== Updated Footer Styling ==== */ .footer-modern { background: linear-gradient(135deg, #0f2027, #203a43, #2c5364); color: #ffffff; text-align: center; padding: 30px 20px 10px !important; font-family: 'Inter', sans-serif; display: flex !important; flex-direction: column; align-items: center !important; justify-content: center !important; text-align: center; } /* ====== CHANGED FOOTER ALIGNMENT ====== */ /* =========================== FIX FOOTER ALIGNMENT =========================== */ .footer-container { display: grid !important; grid-template-columns: 1fr auto 1fr; /* Left | Center | Right */ align-items: start; gap: 30px !important; max-width: 1200px; margin-bottom: 20px !important; padding: 20px 0 !important; justify-items: center !important; } .footer-bottom { padding-top: 5px !important; padding-bottom: 5px !important; margin-top: 0 !important; } /* LEFT column */ .footer-section { text-align: left !important; justify-self: start !important; } /* CENTER column */ .footer-center { text-align: center !important; justify-self: center !important; } /* RIGHT column */ /* ========= FINAL RIGHT COLUMN FIX ========= */ .footer-section.right { text-align: left !important; justify-self: end !important; } /* Fix p tags inside right column */ .footer-section.right p { text-align: left !important; margin-left: 0 !important; } /* Fix icon alignment */ .footer-section.right strong, .footer-section.right br { text-align: left !important; } /* Fix heading "Address" specifically */ .footer-section.right h3, .footer-section.right h4 { text-align: left !important; } /* Mobile */ @media (max-width: 768px) { .footer-section.right, .footer-section.right p, .footer-section.right h3, .footer-section.right h4 { text-align: center !important; } } .footer-section h3 { color: #00cec9; font-size: 20px; margin-bottom: 10px; font-weight: 600; } .footer-tagline { color: #dfe6e9; font-size: 15px; margin-bottom: 15px; line-height: 1.6; } .footer-contact-icons p { color: #dfe6e9; font-size: 15px; margin: 6px 0; } .footer-contact-icons a { color: #dfe6e9; text-decoration: none; transition: color 0.3s ease; } .footer-contact-icons a:hover { color: #00cec9; } /* Center Section */ .footer-center { flex: 1; min-width: 260px; text-align: center; } .footer-logo img { width: 70px; height: auto; filter: drop-shadow(0 0 6px rgba(0, 206, 201, 0.4)); margin-bottom: 15px; } /* Social Icons */ .footer-social { display: flex; justify-content: center; gap: 20px; margin-bottom: 15px; } .footer-social a { color: #00cec9; font-size: 20px; transition: all 0.3s ease; } .footer-social a:hover { color: #55efc4; transform: scale(1.2); } /* Quick Links */ .footer-links h4 { color: #00cec9; font-weight: 600; margin-bottom: 10px; text-align: center; font-size: 20px; } .footer-links ul { list-style-type: disc; padding-left: 20px; text-align: left; margin: 0 auto; width: fit-content; } .footer-links li { margin-bottom: 8px; } .footer-links a { color: #dfe6e9; text-decoration: none; font-size: 16px; } .footer-center .footer-social { margin-top: 20px; } .footer-links a:hover { color: #00cec9; transform: translateX(4px); } /* Bottom Section */ .footer-bottom { /* border-top: 1px solid rgba(255,255,255,0.1); */ padding-top: 15px; font-size: 14px; color: #b2bec3; } .footer-bottom strong { color: #00cec9; } /* Responsive */ @media (max-width: 768px) { .footer-container { grid-template-columns: 1fr !important; text-align: center; } .footer-links ul { list-style: disc; /* bullet points */ padding-left: 20px; /* indent (spaces on left) */ margin: 0; text-align: left; /* align all text left */ } .footer-links li { margin-bottom: 8px; } } /* Responsive */ @media (max-width: 768px) { .service-img { height: 160px; } .service-content { padding: 18px; } } /* Values grid */ .values-grid { display: flex; gap: 2rem; justify-content: space-between; margin-top: 2rem; } .value-card { background: #ffffff; border-radius: 20px; box-shadow: 0 4px 15px rgba(0,0,0,0.08); padding: 2rem; flex: 1; text-align: center; transition: transform 0.3s ease; } .value-card:hover { transform: translateY(-10px); } .value-card img { width: 60px; margin-bottom: 1rem; } /* === WHY CHOOSE US SECTION === */ /* === WHY CHOOSE US SECTION === */ .why-choose-us { background: linear-gradient(135deg, #f0faff, #e3f2fd); text-align: center; padding: 100px 20px; overflow: hidden; position: relative; } .why-choose-us h2 { font-size: 2.8rem; color: rgb(20, 86, 116);; margin-bottom: 10px; letter-spacing: 1px; font-weight: 800; } .why-choose-us .intro { color: #555; max-width: 700px; margin: 0 auto 60px; font-size: 1.1rem; line-height: 1.6; } /* Grid */ /* === FIX: Consistent 4-Column Responsive Grid === */ .choose-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2rem; max-width: 1400px; margin: 0 auto; } /* Tablet: 3 columns */ @media (max-width: 1200px) { .choose-grid { grid-template-columns: repeat(3, 1fr); gap: 1.5rem; } } /* Small Tablet: 2 columns */ @media (max-width: 768px) { .choose-grid { grid-template-columns: repeat(2, 1fr); gap: 1.2rem; } } /* Mobile: 1 column */ @media (max-width: 480px) { .choose-grid { grid-template-columns: repeat(1, 1fr); gap: 1rem; } } /* Cards */ .choose-card { background: linear-gradient(145deg, #ffffff, #f6faff); border-radius: 20px; padding: 2.2rem; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08); transition: transform 0.5s ease, box-shadow 0.5s ease; animation: fadeInUp 1s ease forwards; opacity: 0; border: 1px solid rgba(0, 0, 0, 0.05); } /* Scroll animation */ @keyframes fadeInUp { 0% { opacity: 0; transform: translateY(60px); } 100% { opacity: 1; transform: translateY(0); } } .choose-card:nth-child(1) { animation-delay: 0.2s; } .choose-card:nth-child(2) { animation-delay: 0.4s; } .choose-card:nth-child(3) { animation-delay: 0.6s; } .choose-card:nth-child(4) { animation-delay: 0.8s; } .choose-card:nth-child(5) { animation-delay: 1s; } .choose-card:nth-child(6) { animation-delay: 1.2s; } /* Hover effects */ .choose-card:hover { transform: translateY(-10px); box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15); } /* Icons */ .choose-card .icon { font-size: 2.8rem; margin-bottom: 1.2rem; color: #0b3954; display: inline-block; transition: transform 0.6s ease, color 0.3s ease; } /* Icon animation on hover */ .choose-card:hover .icon { transform: rotate(20deg) translateY(-8px) scale(1.2); color: #00b894; } /* Texts */ .choose-card h3 { color: #0b3954; font-size: 1.2rem; margin-bottom: 10px; font-weight: 700; } .choose-card p { color: #555; font-size: 0.80rem; line-height: 1.6; } /* Grid: 3 per row */ .choose-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; justify-items: center; } /* Responsive: 2 per row on tablet, 1 per row on mobile */ @media (max-width: 992px) { .choose-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 600px) { .choose-grid { grid-template-columns: 1fr; } } /* Hover effect: card pop + background glow */ .choose-card:hover { transform: translateY(-12px) scale(1.03); box-shadow: 0 15px 40px rgba(0, 184, 148, 0.25); background: linear-gradient(145deg, #f0fff9, #ffffff); border-color: #00b894; } /* ===== NAVBAR RESPONSIVE ===== */ .brand { display: flex; align-items: center; gap: 4px !important; /* ← reduce space between logo & SALE */ } .brand .logo { width: auto; height: 160px; margin-right: 5px; flex-shrink: 0; } /* Mobile logo - smaller to fit navbar properly */ /* Mobile logo - keep it visible and properly sized */ @media (max-width: 992px) { .brand .logo { height: 100px !important; width: auto !important; } .wave-navbar { padding-bottom: 5px !important; } .wave-navbar .navbar-container { padding-top: 5px !important; } } @media (max-width: 576px) { .brand .logo { height: 40px !important; width: auto !important; } } .brand .brand-name { font-size: 1.6rem; font-weight: 700; background: linear-gradient(90deg, #ffffff, #ffffff, #ffffff); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .brand a { display: flex; align-items: center; text-decoration: none; color: #fff; gap: 10px; position: relative; } .navbar-inner { width: 100%; max-width: var(--max-width); display: flex; align-items: center; justify-content: space-between; padding: 0 2rem; } .nav-menu { display: flex; gap: 1.5rem; align-items: center; } .nav-item { color: #fff; font-weight: 600; text-decoration: none; position: relative; } .nav-item:hover::after { width: 100%; } /* Mobile Font + Size Fix */ @media (max-width: 992px) { .nav-links a { font-size: 1.4rem; gap: 10px; } } /* --- Modern Navbar --- */ .navbar { position: fixed; top: 0; width: 100%; backdrop-filter: blur(10px); background: rgba(255, 255, 255, 0.2); box-shadow: 0 4px 30px rgba(0,0,0,0.1); z-index: 999; } .navbar .container { display: flex; align-items: center; justify-content: space-between; padding: 0.8rem 5%; } /* --- Dual Finish Wave Navbar --- */ .wave-navbar { position: fixed; top: 0; left: 0; width: 100%; color: #fff; padding-top: 0; padding-bottom: 0; background: transparent !important; box-shadow: 0 2px 12px rgba(101, 32, 32, 0.05); z-index: 1000; } .wave-navbar .navbar-container { display: flex; align-items: center; justify-content: space-between; padding: 0.5rem 5%; padding-top: 5px; padding-bottom: 5px; position: relative; z-index: 2; overflow: visible; margin-top: -20px; margin-bottom: 0; } .wave-navbar .navbar-wave { position: absolute; bottom: -60px; left: 0; width: 99%; height: 80px; z-index: -1; } /* Link Styles */ /* main navbar */ .nav-links a { position: relative; text-decoration: none; color: rgb(20, 86, 116); font-weight: 700; /* font-size: ; */ transition: all 0.3s ease; padding: 6px 10px; margin-top: -30px; } .nav-links a::after { display: none; } #navMenu { padding-top: 0; gap: 15px; display: flex; align-items: center; position: relative; z-index: 2; flex-wrap: nowrap; } /* Hover effect: text + underline become black */ .nav-links a:hover::after { width: 100%; } /* Buttons */ .btn { padding: 8px 16px; border-radius: 8px; transition: 0.3s ease; font-weight: 600; } .btn.primary { background: #fff; /* color: #6C5CE7; */ color: rgb(20, 86, 116); } .btn.outline { border: 2px solid #fff; color: #fff; } .btn.primary:hover, .btn.outline:hover { background: #000; border-color: #000; color: #fff; } /* --- Dual Wave --- */ .navbar-wave { position: absolute; /* bottom: -1px; */ left: 0; width: 100%; /* height: 20px !important; display: block; */ /* increase wave height */ height: 150px !important; bottom: 0 !important; margin-top: -40px; z-index: -1; pointer-events: none; } /* --- Mobile --- */ .menu-toggle { display: none !important; /* hidden by default */ flex-direction: column; padding: 6px; border-radius: 10px; border: 1px solid rgba(6,32,48,0.06); background: rgba(255,255,255,0.9); } .menu-toggle span { width: 25px; height: 3px; background: var(--deep-2); /* darker bar for contrast */ margin: 4px 0; border-radius: 4px; transition: 0.3s; } /* === FIX: Show Beautiful Toggle on Mobile === */ @media (max-width: 768px) { .menu-toggle { display: flex !important; width: 34px !important; /* smaller button */ height: 34px !important; /* smaller button */ background: #ffffff !important; border-radius: 50% !important; justify-content: center !important; align-items: center !important; box-shadow: 0 3px 9px rgba(0,0,0,0.20) !important; padding: 0 !important; border: none !important; } .menu-toggle span { width: 18px !important; /* smaller bar */ height: 2.2px !important; /* thinner bar */ background: #0B62D4 !important; margin: 3px 0 !important; border-radius: 4px !important; transition: 0.3s ease-in-out !important; } .menu-toggle.active span:nth-child(1) { transform: translateY(6px) rotate(45deg) !important; } .menu-toggle.active span:nth-child(2) { opacity: 0 !important; } .menu-toggle.active span:nth-child(3) { transform: translateY(-6px) rotate(-45deg) !important; } } /* =============================== Mobile: Slide-in overlay menu (keeps desktop unchanged) =============================== */ @media (max-width: 770px) { .nav-links { position: fixed; top: 0; right: 0; width: 80% !important; /* FULLY VISIBLE */ max-width: 350px !important; /* SAFE LIMIT */ height: 100vh; transform: translateX(100%); /* Start HIDDEN (correct) */ transition: transform 0.35s ease; background: #90a9d8; flex-direction: column; justify-content: flex-start; padding-top: 120px; gap: 1.8rem; box-shadow: -10px 0 30px rgba(0,0,0,0.25); z-index: 2000; } /* Slide-IN working correctly */ .nav-links.active { transform: translateX(0) !important; } .nav-links a { font-size: 1.3rem; width: 100%; text-align: left; } /* Make sure the toggle sits above the menu and body can't scroll when open */ .menu-toggle { z-index: 5000 !important; } body.nav-open { overflow: hidden !important; touch-action: none !important; /* prevent background touch scroll on mobile */ } /* Nav link spacing & full-width clickable area inside the overlay */ .nav-links a { width: 100% !important; padding: 12px 10px !important; display: flex !important; align-items: center !important; gap: 12px !important; font-weight: 700 !important; color: #223 !important; /* tweak color if needed */ } /* reduce default hero shift — ensure content isn't pushed */ .navbar-container { z-index: 4800 !important; } } /* Make Login button match Sign Up button */ .nav-btn.outline { background: linear-gradient(90deg, var(--accent), var(--accent2)); color: #fff; border: none; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); transition: all 0.3s ease; } .nav-btn.outline:hover { background: linear-gradient(90deg, var(--accent2), var(--accent)); transform: translateY(-2px); box-shadow: 0 6px 16px rgba(0, 0, 0, 0.25); } /* ===== Wave Navbar Styling ===== */ .navbar-container { max-width: 1200px; margin: 0 auto; padding: 0.8rem 1.5rem; display: flex; align-items: center; justify-content: space-between; padding: 0 6%; } .nav-links { display: flex; flex-direction: row; align-items: center; gap: 2rem; transition: all 0.3s ease; /* font-size: 1rem; */ justify-content: center; } /* Subtle underline animation */ .nav-links a::after { content: ""; position: absolute; left: 0; bottom: -4px; width: 0%; height: 2px; background: #000; transition: width 0.3s ease; } .nav-links a:hover { color: black; } .nav-links a:hover::after { width: 100%; } /* ===== NAVBAR RESPONSIVE STYLES ===== */ /* Tablet and below - Adjust navbar container */ @media (max-width: 992px) { .wave-navbar { position: fixed !important; top: 0 !important; left: 0 !important; width: 100% !important; z-index: 1000 !important; } .wave-navbar .navbar-container { padding: 0.8rem 4%; padding-top: 12px; padding-bottom: 50px; } .brand .brand-name { font-size: 1.4rem; } .brand .logo { width: auto !important; height: 80px !important; } /* Hide nav links in main navbar on tablet/mobile - they show in slide menu */ .wave-navbar .nav-links:not(.active) { display: none !important; } .menu-toggle { display: flex !important; position: absolute !important; right: 25px !important; top: 50% !important; transform: translateY(-50%) !important; z-index: 2100 !important; } } /* Medium tablets and below */ @media (max-width: 768px) { .wave-navbar { position: fixed !important; top: 0 !important; left: 0 !important; width: 100% !important; padding-bottom: 110px; z-index: 1000 !important; } .wave-navbar .navbar-container { padding: 0.7rem 3%; padding-top: 25px; padding-bottom: 45px; } .brand .brand-name { font-size: 1.3rem; } .brand .logo { width: auto !important; height: 70px !important; margin-right: 8px; } .navbar-wave { height: 160px !important; bottom: 0 !important; margin-top: -40px; } .wave-navbar .navbar-wave { height: 160px; } .navbar-wave { height: 180px !important; } .wave-navbar .nav-links:not(.active) { display: none !important; } .menu-toggle { display: flex !important; right: 20px !important; position: absolute !important; top: 50% !important; transform: translateY(-50%) !important; z-index: 2100 !important; } } /* Mobile devices */ @media (max-width: 576px) { .wave-navbar { position: fixed !important; top: 0 !important; left: 0 !important; width: 100% !important; padding-bottom: 100px; z-index: 1000 !important; } .wave-navbar .navbar-container { padding: 0.6rem 3%; padding-top: 20px; padding-bottom: 40px; } .brand .brand-name { font-size: 1.2rem; letter-spacing: 0.3px; } .brand .logo { width: auto !important; height: 60px !important; margin-right: 6px; } .navbar-wave { height: 140px !important; } .wave-navbar .navbar-wave { height: 140px; } .nav-links { display: none !important; } .menu-toggle { display: flex !important; position: absolute !important; right: 20px !important; top: 50% !important; transform: translateY(-50%) !important; z-index: 2100 !important; } } /* Small mobile devices */ @media (max-width: 480px) { .wave-navbar { position: fixed !important; top: 0 !important; left: 0 !important; width: 100% !important; padding-bottom: 90px; z-index: 1000 !important; } .wave-navbar .navbar-container { padding: 0.5rem 2%; padding-top: 18px; padding-bottom: 35px; } .brand .brand-name { font-size: 1.1rem; } .brand .logo { width: auto !important; height: 55px !important; margin-right: 5px; margin-top: 25px; } .navbar-wave { height: 130px !important; } .wave-navbar .navbar-wave { height: 130px; } .nav-links { display: none !important; width: 65% !important; } .menu-toggle { display: flex !important; position: absolute !important; right: 15px !important; top: 50% !important; transform: translateY(-50%) !important; width: 30px !important; height: 36px !important; z-index: 2100 !important; } } /* index page styling */ /* ===== HERO SECTION ===== */ .hero-section { position: relative; height: 100vh; display: flex; align-items: center; justify-content: center; overflow: hidden; /* background: linear-gradient(135deg, #a8a1e1, #7fbfdd, #a3e6e5); */ background: linear-gradient(135deg, #a6a1c6, #b6dbea, #49c1bf); /* color: #e62d23; */ color: rgb(20, 86, 116); margin-top: 0 !important; } .hero-section canvas#bg-animation { position: absolute; inset: 0; z-index: 0; } .hero-content { position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; width: 90%; max-width: 1200px; flex-wrap: wrap; } .hero-text { flex: 1 1 50%; } .hero-text h1 { font-size: 2.8rem; line-height: 1.3; margin-bottom: 1rem; } .hero-text p { font-size: 1.1rem; margin-bottom: 1.5rem; } .hero-buttons .btn { margin-right: 1rem; } .hero-image { flex: 1 1 40%; text-align: right; } .hero-image img { width: 90%; border-radius: 16px; box-shadow: 0 10px 30px rgba(0,0,0,0.3); animation: floatImage 6s ease-in-out infinite; } @keyframes floatImage { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-10px); } } /* ===== RESPONSIVE FIX FOR HERO SECTION ===== */ /* Tablets & Medium Screens */ @media (max-width: 992px) { .hero-section { height: auto; padding: 170px 0 30px; /* FIXED (40px to 170px) */ text-align: center; margin-top: 0 !important; /* FIXED — remove unwanted gap */ } .hero-content { flex-direction: column; justify-content: center; text-align: center; width: 100% !important; /* FIXED width issue */ } .hero-text, .hero-image { width: 100% !important; max-width: 100% !important; } .hero-image { flex: 1 1 100%; text-align: center; margin-top: 30px; } .hero-image img { width: 65%; } .hero-text h1 { font-size: 2.3rem; } } /* Mobile Screens */ @media (max-width: 576px) { .hero-section { padding: 140px 0 60px; } .hero-text h1 { font-size: 1.9rem; } .hero-text p { font-size: 1rem; } .hero-image img { width: 80%; } .hero-buttons .btn { margin: 8px 0; width: 70%; text-align: center; } } /* ===== ABOUT SECTION ===== */ .about-section-index { padding: 80px 6%; background: #f9f9f9; } .about-container-index { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 40px; } .about-text-index { flex: 1 1 500px; /* minimum width 500px, grows as needed */ max-width: 600px; } .about-text-index h2 { font-family: 'Inter', sans-serif; font-size: 2.2rem; color: rgb(20, 86, 116); margin-bottom: 20px; font-weight: 800; } .about-text-index p { font-size: 1.1rem; line-height: 1.8; margin-bottom: 20px; text-align: justify; } .about-text-index ul { list-style: none; padding: 0; } .about-text-index ul li { font-size: 1rem; margin-bottom: 10px; } /* About Image */ .about-image-index { flex: 1 1 400px; /* minimum width 400px */ max-width: 500px; text-align: center; } .about-image-index img { width: 100%; height: auto; border-radius: 16px; box-shadow: 0 8px 25px rgba(0,0,0,0.15); object-fit: cover; /* ensures it fits nicely */ transition: transform 0.3s ease; } .about-image-index img:hover { transform: translateY(-10px); } /* Responsive adjustments */ @media screen and (max-width: 1024px) { .about-container-index { flex-direction: column; align-items: center; } .about-text-index, .about-image-index { flex: 1 1 100%; max-width: 90%; } .about-text-index h2 { text-align: center; } } /* ===== COUNTERS ===== */ .counters { display: flex; justify-content: space-around; padding: 80px 5%; background: linear-gradient(90deg, #6C5CE7, #00B894); color: #fff; text-align: center; } .counter .num { font-size: 3rem; font-weight: 700; } /* ===== SERVICES INDEX PAGE ===== */ .services-section { padding: 100px 6%; background: #f9f9f9; text-align: center; } .services-section h2 { font-size: 2rem; color: rgb(20, 86, 116); } /* Force 4-grid Services Layout on Homepage */ .services-grid { display: grid; grid-template-columns: repeat(3, 1fr); /* EXACTLY 4 columns */ gap: 2rem; margin-top: 2rem; width: 100%; max-width: 1400px; margin-left: auto; margin-right: auto; } /* Tablet - 3 columns */ @media (max-width: 1200px) { .services-grid { grid-template-columns: repeat(3, 1fr); } } /* Small Tablet - 2 columns */ @media (max-width: 900px) { .services-grid { grid-template-columns: repeat(2, 1fr); } } /* Mobile - 1 column */ @media (max-width: 600px) { .services-grid { grid-template-columns: 1fr; } } .service-card-index { background: #fff; border-radius: 16px; box-shadow: 0 5px 20px rgba(0,0,0,0.1); padding: 28px 24px; /* more spacing */ transition: 0.2s; } .service-card-index p { width: 100%; margin: 0; padding: 0; text-align: justify; text-justify: inter-word; hyphens: auto; word-break: break-word; line-height: 1.85; margin-top: 12px; } .service-card-index p::before, .service-card-index p::marker { display: none !important; content: '' !important; } .service-card-index:hover { transform: translateY(-10px) !important; } /* ===== CTA ===== */ .cta { background: linear-gradient(135deg, #bbe8df, #a59cec); color: black; text-align: center; padding: 100px 6%; border-radius: 24px; margin: 80px 6%; } .services-section, .clients-section { padding-top: 60px; /* smaller top padding */ padding-bottom: 60px; /* smaller bottom padding */ } /* ===== CLIENTS SECTION ===== */ .clients-section { background: #fafafa; padding: 50px 6%; text-align: center; } .clients-section h2 { font-size: 2rem; margin-bottom: 40px; color: rgb(20, 86, 116);; position: relative; } .clients-container { display: flex; gap: 20px; overflow-x: auto; overflow-y: hidden; scroll-behavior: smooth; padding-bottom: 10px; } .clients-container::-webkit-scrollbar { height: 5px; } .clients-container::-webkit-scrollbar-thumb { background: linear-gradient(90deg, #222, #666); border-radius: 10px; } .client-card { flex: 0 0 auto; width: 250px; background: #fff; border-radius: 16px; box-shadow: 0 4px 15px rgba(0,0,0,0.1); transition: transform 0.3s, box-shadow 0.3s; } .client-card:hover { transform: translateY(-6px); box-shadow: 0 8px 25px rgba(0,0,0,0.15); } .client-card img { width: 100%; height: 160px; object-fit: cover; border-top-left-radius: 16px; border-top-right-radius: 16px; } .client-info { padding: 15px; } .client-info h4 { font-size: 1.1rem; color: #111; margin-bottom: 8px; } .client-info p { font-size: 0.9rem; color: #555; } /* Make navbar menu links bold */ /* Remove default margin/padding gaps */ body, html { margin: 0; padding: 0; } /* Remove gap between navbar and content */ main#content { margin-top: 0; /* or adjust if needed */ padding: 0; } /* Optional: fix navbar spacing */ .wave-navbar { margin-bottom: 0; padding-bottom: 0; } /* =============================== ABOUT PAGE – Enhanced Design =============================== */ .about-page { position: relative; background: linear-gradient(135deg, #f4faff, #ecf8ff); overflow: hidden; padding: 10px 0%; font-family: "Poppins", "Inter", sans-serif; color: #1a1a2e; z-index: 1; margin-top: 150px; } /* ==== Container ==== */ .about-container { position: relative; z-index: 2; display: flex; flex-direction: column; gap: 80px; } /* ==== Section Layout ==== */ .about-section { display: flex; align-items: center; justify-content: space-between; gap: 3rem; flex-wrap: wrap; background: #fff; padding: 60px 50px; box-shadow: 0 10px 35px rgba(0, 0, 0, 0.08); transition: transform 0.3s ease, box-shadow 0.3s ease; } .about-section:nth-child(even) { flex-direction: row-reverse; background: linear-gradient(145deg, #ffffff, #f4f9ff); } .about-section:hover { transform: translateY(-6px); box-shadow: 0 18px 50px rgba(0, 0, 0, 0.1); } /* ==== Text Styling ==== */ .about-text { flex: 1 1 45%; } .about-text h1, .about-text h2 { font-size: 2.2rem; margin-bottom: 1rem; font-weight: 700; color: rgb(20, 86, 116); font-family: "Nunito Sans", "Poppins", sans-serif; } /* .about-text h1 span, .about-text h2 span { color: #5b34da; background: linear-gradient(90deg, #6C5CE7, #00B894); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; } */ .about-text p { color: #404b5a; font-size: 1.05rem; line-height: 1.8; margin-bottom: 1rem; } .about-text ul { list-style: none; padding: 0; margin-top: 10px; } .about-text ul li { font-size: 1rem; color: #333; margin-bottom: 8px; display: flex; align-items: center; gap: 10px; transition: transform 0.3s ease; } .about-text ul li:hover { transform: translateX(5px); color: #5b34da; } /* ==== Image Styling ==== */ .about-image { flex: 1 1 45%; text-align: center; } .about-image img { width: 95%; max-width: 420px; border-radius: 16px; object-fit: cover; box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15); transition: transform 0.5s ease, box-shadow 0.4s ease; } .about-image img:hover { transform: scale(1.06) rotate(1deg); box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2); } /* ==== Responsive ==== */ @media (max-width: 992px) { .about-section { flex-direction: column !important; text-align: center; padding: 40px 25px; } .about-image img { max-width: 340px; } .about-text h1, .about-text h2 { font-size: 1.9rem; } } .hidden { opacity: 0; transform: translateX(80px); transition: all 0.8s ease; } [data-dir="left"].visible { opacity: 1; transform: translateX(0); } [data-dir="right"].visible { opacity: 1; transform: translateX(0); } /* ==== SERVICES PAGE ==== */ .services-page { position: relative; overflow: hidden; background: linear-gradient(135deg, #eef4ff, #f8fdfb); color: #1b1b2f; padding: 100px 5%; font-family: "Poppins", "Inter", sans-serif; z-index: 1; margin-top: 40px; } .services-page .container { position: relative; z-index: 2; } #motion-lines { position: absolute; top: 0; left: 0; width: 100% !important; height: 100% !important; z-index: -10 !important; pointer-events: none !important; } /* Headings */ .section-title { text-align: center; font-size: 2.5rem; color: rgb(20, 86, 116); margin-bottom: 10px; } .section-subtitle { text-align: center; color: #555; font-size: 1.1rem; margin-bottom: 60px; } /* Grid */ /* === FIX: Consistent Service Grid === */ .service-grid-large { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2.5rem; margin-top: 3rem; } @media (max-width: 1200px) { .service-grid-large { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 768px) { .service-grid-large { grid-template-columns: repeat(2, 1fr); gap: 2rem; } } @media (max-width: 480px) { .service-grid-large { grid-template-columns: repeat(1, 1fr); gap: 1.5rem; } } /* Cards */ .service-card { background: #fff; border-radius: 18px; box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08); overflow: hidden; transition: transform 0.4s ease, box-shadow 0.4s ease; opacity: 0; transform: translateY(40px); } .service-card.visible { opacity: 1; transform: translateY(0); } .service-card:hover { transform: translateY(-10px); box-shadow: 0 12px 40px rgba(0, 0, 0, 0.12); } .service-img { width: 100%; height: 220px; object-fit: cover; } .service-content { padding: 25px; } .service-content h3 { color: rgb(20, 86, 116); font-size: 1.4rem; margin-bottom: 10px; } .service-content p { color: #444; font-size: 1.05rem; line-height: 1.6; } /* CTA Section */ .cta-section { background: linear-gradient(135deg, #6C5CE7, #00B894); color: #fff; text-align: center; padding: 80px 8%; border-radius: 30px 30px 0 0; margin-top: 80px; } .motion-fade { opacity: 0; transform: translateY(40px); transition: opacity 1s ease, transform 1s ease; } .motion-fade.visible { opacity: 1; transform: translateY(0); } /* === MOBILE GRID FIX === */ @media (max-width: 600px) { .service-grid-large { grid-template-columns: 1fr !important; gap: 1.8rem; /* opacity: 1 !important; */ } } /* Ensure service cards animate and remain visible */ .service-card.visible { opacity: 1 !important; transform: translateY(0) !important; } /* ==== CUSTOM MINIMAL CURSOR ==== */ .cursor-outer, .cursor-inner { position: fixed; top: 0; left: 0; pointer-events: none; border-radius: 50%; transform: translate(-50%, -50%); z-index: 9999; } /* Thin black ring */ .cursor-outer { width: 25px; height: 25px; border: 2px solid rgba(0, 0, 0, 0.9); background: transparent; transition: all 0.2s ease-out; } /* Small white inner ball */ .cursor-inner { width: 10px; height: 10px; background: #0e0d0d; transition: all 0.1s ease-out; } /* Hover effect on clickable elements */ a:hover ~ .cursor-outer, button:hover ~ .cursor-outer { transform: translate(-50%, -50%) scale(1.3); border-color: rgba(0, 0, 0, 1); } a:hover ~ .cursor-inner, button:hover ~ .cursor-inner { background: #000; transform: translate(-50%, -50%) scale(1.2); } /* Hide default cursor */ body { cursor: none !important; } footer{ cursor: none !important; } header{ cursor: none !important; } /* Call-to-Action Section */ /* ===== CTA SECTION ===== */ .cta-section { background: linear-gradient(135deg, #6C5CE7, #00B894); color: #fff; text-align: center; padding: 80px 8%; border-radius: 16px; margin: 60px 0 100px; /* space above and below the section */ box-shadow: 0 10px 30px rgba(0,0,0,0.1); transition: transform 0.3s, box-shadow 0.3s; } .cta-section:hover { transform: translateY(-5px); box-shadow: 0 20px 40px rgba(0,0,0,0.2); } .cta-section h2 { font-size: 2.8rem; font-weight: 700; margin-bottom: 20px; } .cta-section p { font-size: 1.2rem; margin-bottom: 30px; } .cta-section .btn.primary { background: #fff; color: #222; padding: 14px 36px; font-weight: 600; border-radius: 12px; transition: 0.3s; } .cta-section .btn.primary:hover { background: #222; color: #fff; } /* Responsive Adjustments */ @media (max-width: 768px) { .cta-section { padding: 60px 15px; } .cta-section h2 { font-size: 2.2rem; } .cta-section p { font-size: 1rem; } } /* Responsive */ @media (max-width: 1024px) { .service-grid-large { gap: 25px; } } @media (max-width: 768px) { .section-title { font-size: 2.5rem; } .cta-section h2 { font-size: 2rem; } } @media (max-width: 480px) { .service-img { height: 180px; } .section-subtitle { font-size: 1rem; margin-bottom: 40px; } } /* ==== CONTACT PAGE BASE ==== */ .contact-page-section { position: relative; padding: 100px 5%; background: linear-gradient(135deg, #eef4ff, #f7fbff); overflow: hidden; } /* Canvas Motion — KEEPING YOUR EXISTING STYLE */ #contact-motion-canvas { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 0; } /* Text on top */ .contact-page-section .container { position: relative; z-index: 10; padding: 60px; max-width: 1100px; margin: 0 auto; text-align: center; } /* Header */ .contact-title { text-align: center; font-size: 3rem; color: rgb(20, 86, 116); margin-bottom: 10px; } .contact-subtitle { text-align: center; font-size: 1.1rem; color: #555; margin-bottom: 50px; } /* INFO CARDS */ .contact-info-grid { display: grid; grid-template-columns: repeat(4, 1fr); /* grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); */ gap: 25px; justify-content: center; /* margin-bottom: 70px; */ max-width: 1200px; margin: 0 auto 70px; } .info-card { background: #fff; padding: 25px; border-radius: 16px; box-shadow: 0 5px 25px rgba(0,0,0,0.08); text-align: center; } .info-card h3 { color: rgb(20, 86, 116); margin-bottom: 8px; } /* MAIN FORM SECTION */ .contact-main-grid { display: flex; gap: 50px; align-items: center; flex-wrap: wrap; } .contact-image-box { flex: 1; } .contact-image-box img { width: 100%; border-radius: 18px; box-shadow: 0 5px 25px rgba(0,0,0,0.1); } .contact-form-box { flex: 1; background: #fff; padding: 35px; border-radius: 18px; box-shadow: 0 5px 25px rgba(0,0,0,0.1); } .contact-form-box h2 { color: rgb(20, 86, 116); margin-bottom: 15px; } /* FORM FIELDS */ .contact-form-box input, .contact-form-box textarea { width: 100%; padding: 14px; margin-bottom: 15px; border-radius: 10px; border: 1px solid #ccc; } .contact-btn { width: 100%; background: rgb(20, 86, 116);; color: #fff; padding: 14px; border-radius: 10px; border: none; cursor: pointer; font-size: 1.1rem; } .contact-btn:hover { background: #4825b8; } .home-contact-btn { margin-top: 40px; /* Move the button lower */ display: inline-block; } .home-subtext { margin-top: 30px; /* Increase this to move it further down */ display: block; } /* KNOW US BETTER */ .know-us-section { margin-top: 90px; text-align: center; color: rgb(20, 86, 116); } .know-us-grid { margin-top: 30px; display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 25px; justify-content: center; } .know-card { background: #fff; padding: 25px; border-radius: 16px; box-shadow: 0 5px 25px rgba(0,0,0,0.08); } .know-card a{ text-decoration: none; color: #416fb9; font-weight: 600; } /* .info-card, .know-card { margin-left: auto; margin-right: auto; } */ /* ===== contact page Shake Hover Animation ===== */ .info-card:hover, .know-card:hover, .contact-form-box:hover, .contact-image-box:hover { animation: subtle-shake 0.25s ease-in-out; } @keyframes subtle-shake { 0% { transform: translateX(0px); } 25% { transform: translateX(-3px); } 50% { transform: translateX(3px); } 75% { transform: translateX(-2px); } 100% { transform: translateX(0px); } } /* ===== RESPONSIVE FIX FOR CONTACT PAGE ===== */ /* Tablet */ @media (max-width: 1100px) { .contact-info-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 900px) { /* Stack form + image vertically */ .contact-main-grid { flex-direction: column; gap: 30px; } /* Make form full width */ .contact-form-box { width: 100%; order: 2; /* form after image */ } /* Make image full width */ .contact-image-box { width: 100%; order: 1; /* image on top */ } /* Resize image for better proportion */ .contact-image-box img { width: 100%; height: auto; max-height: 340px; object-fit: cover; border-radius: 16px; } /* Increase spacing for small screens */ .contact-page-section { padding: 80px 5%; } } @media (max-width: 768px) { .contact-page-section .container { padding: 40px 16px; } .contact-info-grid, .know-us-grid { grid-template-columns: 1fr; /* ✅ SINGLE CENTER COLUMN */ } } @media (max-width: 600px) { .contact-title { font-size: 2.2rem; } .contact-subtitle { font-size: 1rem; } .contact-form-box { padding: 25px; } .contact-info-grid { grid-template-columns: 1fr; } } /* ==== NAVBAR ==== */ /* Duplicate removed - using main definition above */ .logo { font-size: 1.5rem; font-weight: 700; color: #333; letter-spacing: 0.5px; text-decoration: none; } /* ==== NAV LINKS ==== */ /* navbar underline bar */ .nav-links { display: flex; align-items: center; gap: 26px; position: relative; right: 0; } /* ==== HAMBURGER MENU ==== */ @media (max-width: 992px) { .nav-links { position: fixed !important; top: 0 !important; transform: transalteX(100%); right: 0 !important; width: 60% !important; height: auto !important; background: #ffffffed !important; display: flex !important; flex-direction: column !important; justify-content: flex-start !important; align-items: flex-start !important; gap: 2rem !important; padding: 80px 30px !important; transition: right 0.4s ease-in-out !important; box-shadow: -10px 0 25px rgba(0, 0, 0, 0.15) !important; z-index: 2000 !important; cursor:none; } .nav-links a { order: 0!important; width: 100%; padding: 12px 15px; text-align: left; } .nav-links.active { transform: translateX(0) !important; right: 0 !important; display: flex !important; } .menu-toggle { position: absolute; right: 25px; top: 50%; transform: translateY(-50%); display: flex; flex-direction: column; justify-content: space-between; width: 34px; height: 40px; background: #f5f7fa; border: 1px solid rgba(0,0,0,0.1); border-radius: 6px; padding: 6px; transition: all 0.3s ease; z-index: 2100; box-shadow: 0 2px 8px rgba(0,0,0,0.1); } .menu-toggle:hover { background: #72c8e0; } .menu-toggle:hover span { background: black; } .menu-toggle span { display: block; width: 100%; height: 3px; background: #333; border-radius: 3px; transition: all 0.3s ease; } .menu-toggle.active span:nth-child(1) { transform: rotate(45deg) translate(6px, 6px); } .menu-toggle.active span:nth-child(2) { opacity: 0; } .menu-toggle.active span:nth-child(3) { transform: rotate(-45deg) translate(6px, -6px); } } @media (max-width: 770px) { .nav-links { position: fixed; top: 0; right: -100%; width: 60%; height: 600px; background: #ffffffed; flex-direction: column; justify-content: center; align-items: flex-start; gap: 1.5rem; padding: 80px 40px; transition: right 0.4s ease-in-out; box-shadow: -10px 0 25px rgba(0, 0, 0, 0.15); z-index: 2000; cursor:none; } } /* ===== Scroll Animations ===== */ section.hidden { opacity: 1; transform: translateY(60px); transition: all 0.9s cubic-bezier(0.19, 1, 0.22, 1); } section[data-anim-direction="left"].visible { opacity: 1; transform: translateX(0); animation: slideInLeft 1s ease forwards; } section[data-anim-direction="right"].visible { opacity: 1; transform: translateX(0); animation: slideInRight 1s ease forwards; } section[data-anim-direction="bottom"].visible { opacity: 1; transform: translateY(0); animation: fadeUp 1s ease forwards; } /* ===== Cards animation ===== */ .hidden-card { opacity: 0; transform: translateY(50px) scale(0.95); transition: all 0.6s ease; } .hidden-card.visible { opacity: 1; transform: translateY(0) scale(1); } /* ===== Keyframes ===== */ @keyframes slideInLeft { from { transform: translateX(-80px); opacity: 0; } to { transform: translateX(0); opacity: 1; } } @keyframes slideInRight { from { transform: translateX(80px); opacity: 0; } to { transform: translateX(0); opacity: 1; } } @keyframes fadeUp { from { transform: translateY(80px); opacity: 0; } to { transform: translateY(0); opacity: 1; } } /* ===== GSALE PRODUCT SHOWCASE ===== */ .product-showcase { position: relative; overflow: hidden; padding: 160px 6% 120px; background: white; color: #ffffff; font-family: "Poppins", "Inter", sans-serif; text-align: left; } .product-showcase h1 { font-size: 2.8rem; line-height: 1.3; margin-bottom: 15px; color: #0B2545; } /* .product-showcase h1 span { color: #000000; } */ .subtitle { font-size: 1.2rem; color: #0B2545; margin-bottom: 30px; } .product-inner { display: flex; align-items: center; justify-content: space-between; gap: 60px; flex-wrap: wrap; position: relative; z-index: 2; } .store-link { display: block; margin-top: 10px; font-weight: 600; color: #fff; /* text-decoration: none!important; */ } .feature-list { list-style: none; padding-left: 0; margin-bottom: 30px; } .feature-list li { margin: 10px 0; font-size: 1.1rem; color: #0B2545; display: flex; align-items: center; gap: 10px; } .mission { background: rgba(20, 90, 122, 0.08); padding: 15px 20px; border-radius: 12px; margin-bottom: 30px; font-size: rem; font-weight: 700; color: rgb(20, 86, 116); border-left: 4px solid #FFB703; } /* Download Button */ .feature-download-container { display: flex; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; gap: 1.5rem; } /* Group the two download buttons so they're placed together with a small gap */ .feature-download-container .download-group{ display:flex; align-items:center; gap:40px; /* space between the two buttons */ } .download-btn.big { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; width: 140px; height: 140px; background: linear-gradient(135deg, rgb(149, 188, 243), #a5e7ea); color: #fff; font-size: 1.1rem; border-radius: 20px; box-shadow: 0 8px 25px rgba(153, 152, 148, 0.45); font-weight: 700; transition: all 0.4s ease; } .download-btn.big img { width: 70px; height: auto; margin-bottom: 10px; } .download-btn.big:hover { transform: translateY(-6px) scale(1.05); box-shadow: 0 12px 35px rgba(126, 126, 123, 0.6); } /* === Offers Section === */ .offers-section { margin-top: 100px; text-align: center; padding: 80px 5%; background: linear-gradient(135deg, #8fc2f5, #c0d6ee); /* background: linear-gradient(135deg, #7db7f5, #ada3f7); */ color: rgb(20, 86, 116); border-radius: 30px ; position: relative; overflow: hidden; } .offers-section h2 { font-size: 2.4rem; font-weight: 700; margin-bottom: 20px; text-shadow: 0 4px 10px rgba(0, 0, 0, 0.2); } .offers-section p { font-size: 1.1rem; max-width: 800px; margin: 0 auto 50px; line-height: 1.8; color: rgba(255,255,255,0.95); } @keyframes floatyImg { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } } /* Sparkle Background */ #sparkCanvas { position: absolute; inset: 0; z-index: 0; } /* Responsive */ @media (max-width: 992px) { .product-inner { flex-direction: column-reverse; text-align: center; } .feature-download-container { flex-direction: column; align-items: center; } .feature-download-container .download-group{ flex-direction:column; gap:40px; /* bigger vertical gap for stacked buttons on small screens */ align-items:center; } .download-btn.big { width: 160px; height: 160px; margin-bottom: 60px; } .offers-section { margin-top: 70px; padding: 60px 4%; } } /* Make sure cursor animation doesn't block clicks */ .cursor-inner, .cursor-outer { pointer-events: none !important; } /* LEFT FOOTER SMALL LOGO */ /* LEFT FOOTER LOGO - CENTERED */ .footer-left-logo { display: flex; justify-content: center; margin-bottom: 10px; margin-left: -200px; } .footer-left-logo img { width: 65px; height: auto; border-radius: 10px; } @media (max-width: 768px) { .footer-left-logo { justify-content: center; margin-left: 0%; } } /* ===== Mobile: force true centering of ALL footer columns (safely) ===== */ @media (max-width: 768px) { /* Make the footer grid single-column and center grid items */ .footer-container { grid-template-columns: 1fr !important; /* already present but re-assert */ justify-items: center !important; /* center each grid item */ align-items: start !important; gap: 20px !important; padding-left: 1.5rem !important; padding-right: 1.5rem !important; } /* Ensure each footer section becomes full-width but centered content */ .footer-section, .footer-left, .footer-center, .footer-section.right { width: 100% !important; max-width: 600px !important; box-sizing: border-box !important; margin-left: auto !important; margin-right: auto !important; /* RESET any earlier justify-self rules (this fixes 'stuck to right') */ justify-self: center !important; text-align: center !important; } /* Specifically ensure the Address heading and paragraphs are centered */ .footer-section.right h3, .footer-section.right h4, .footer-section.right p, .footer-section.right strong { text-align: center !important; margin-left: 0 !important; margin-right: 0 !important; } /* Center inner elements (icons and list blocks) */ .footer-social { justify-content: center !important; margin: 0 auto 12px !important; } /* Keep quick-links bullets readable while centered block */ .footer-links ul { display: inline-block !important; /* allows the list to be centered as a block */ text-align: left !important; /* bullets & links stay left-aligned inside the block */ padding-left: 20px !important; margin: 0 auto 8px !important; width: auto !important; } /* Fix p tags inside right column (center them) */ .footer-section.right p { display: block !important; margin-left: auto !important; margin-right: auto !important; } /* Reduce any huge bottom paddings that can push layout off-center */ .footer-bottom { padding-top: 8px !important; padding-bottom: 8px !important; } /* If any floating button overlaps center content, nudge it */ /* .email-float { right: 14px !important; bottom: 14px !important; } */ } /*Address Icon Styling */ .footer-section.right i { color: #00cec9 !important; /* same color as 'Address' heading */ font-size: 18px; /* slightly bigger, looks neat */ margin-right: 6px; /* spacing between icon & text */ } /* Stylish Mobile Hamburger Button */ /* FIX horizontal overflow on mobile */ html, body { overflow-x: hidden !important; max-width: 100% !important; } /* Floating Chatbot Icon */ #chatbot-icon { position: fixed; bottom: 20px; right: 20px; background: #0B5ED7; color: white; padding: 14px 16px; border-radius: 50%; cursor: pointer; font-size: 22px; box-shadow: 0 4px 8px rgba(0,0,0,0.3); z-index: 9999; transition: 0.3s ease; } /* Chatbot Window */ #chatbot-box { position: fixed; bottom: 90px; right: 30px; width: 300px; height: 470px; background: white; border-radius: 12px; box-shadow: 0px 4px 10px rgba(0,0,0,0.3); display: none; flex-direction: column; z-index: 9999; } /* Header */ .chat-header { background: #0B5ED7; color: white; padding: 10px; border-radius: 12px 12px 0 0; display: flex; justify-content: space-between; align-items: center; } /* Close button */ #chatbot-close { background: transparent; border: none; color: white; font-size: 14px; cursor: pointer; } /* Chat area */ #chat-output { flex: 1; padding: 10px; overflow-y: auto; font-size: 14px; } /* Input area */ .chat-input-area { display: flex; border-top: 1px solid #ddd; } #chat-input { flex: 1; padding: 8px; border: none; outline: none; } #chat-send { background: #0B5ED7; color: white; border: none; padding: 8px 12px; cursor: pointer; } .clients-container::-webkit-scrollbar { height: 5px; } .clients-container::-webkit-scrollbar-thumb { background: none; border-radius: 10px; } /* Reduce scrollbar line length ONLY */ .clients-container::-webkit-scrollbar-track { margin-left: 250px; margin-right: 250px; } /* ========================== CHATBOT FRONTEND NEW STYLE ========================== */ #chatbot-box { position: fixed; bottom: 90px; right: 30px; width: 300px; height: 470px; display: none; flex-direction: column; background: #ffffff; border-radius: 20px; box-shadow: 0 12px 40px rgba(0,0,0,0.25); overflow: hidden; z-index: 99999 !important; border: 1px solid #e3e3e3; } /* Header */ .chat-header { background: linear-gradient(135deg,#0084ff,#0068d4); color: #fff; padding: 16px; font-size: 17px; font-weight: 600; display: flex; justify-content: space-between; align-items: center; } /* Close Button */ #chatbot-close { background: transparent; border: none; font-size: 20px; color: #fff; cursor: pointer; } /* Chat Body */ .chat-body { flex: 1; padding: 15px; background: #f5f8ff; overflow-y: auto; display: flex; flex-direction: column; } /* BOT MESSAGE */ .chat-message.bot { align-self: flex-start; background: #ffffff; padding: 12px 16px; border-radius: 14px 14px 14px 4px; margin-bottom: 10px; max-width: 85%; font-size: 14px; color: #333; border: 1px solid #e1e1e1; } /* USER MESSAGE */ .chat-message.user { align-self: flex-end; background: #ff8b4c; color: #fff; padding: 12px 16px; border-radius: 14px 14px 4px 14px; margin-bottom: 10px; max-width: 85%; font-size: 14px; } /* Input Area */ .chat-input-area { display: flex; padding: 12px; background: #fff; border-top: 1px solid #e6e6e6; } #chat-input { flex: 1; padding: 12px; border-radius: 25px; border: 1px solid #cfcfcf; outline: none; font-size: 14px; background: #f7f9ff; } #chat-send { margin-left: 10px; background: #0084ff; border: none; width: 42px; height: 42px; color: #fff; border-radius: 50%; cursor: pointer; display: flex; align-items: center; justify-content: center; } /* Floating Chat Icon */ #chatbot-icon { position: fixed; bottom: 20px; right: 30px; width: 56px; height: 56px; background: #0084ff; color: #fff; font-size: 25px; border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: 0 10px 25px rgba(0,0,0,0.25); z-index: 99999 !important; } /* admin */ /* move admin item to right edge */ /* move admin to far right */ .nav-links a[href="/admin-login"] { margin-left: auto !important; } .neo-flagship { padding: 140px 6% 120px; background: linear-gradient(135deg, #e9faff, #f1fffa); position: relative; overflow: hidden; } /* Soft Glow Background */ .neo-flagship::before { content: ""; position: absolute; top: -120px; left: -80px; width: 900px; height: 900px; background: linear-gradient(135deg, rgba(0,156,255,0.25), rgba(0,255,200,0.22)); transform: rotate(-15deg); filter: blur(95px); z-index: 0; } /* MAIN WRAPPER */ .neo-content { position: relative; z-index: 10; display: flex; align-items: center; justify-content: space-between; gap: 80px; /* NEW: subtle side padding to fix left spacing */ padding-left: 40px; } /* LEFT SIDE */ .neo-left { flex: 1; padding-right: 40px; } /* ===== HEADINGS (FIXED) ===== */ /* CENTER ONLY HEADINGS + PARAGRAPH ABOVE IMAGE */ /* FINAL FIX — Center Heading + Sub-heading + Paragraph */ .neo-left { flex: 1; padding-right: 40px; display: flex; flex-direction: column; align-items: center; text-align: center; } /* Subtitle centered */ .neo-subtitle { font-size: 28px; font-weight: 800; color: #0a8cff; margin-bottom: 12px; text-align: center !important; } /* MAIN TITLE centered & larger */ .neo-title { text-align: center !important; font-size: 62px !important; font-weight: 900; line-height: 1.2; margin-bottom: 25px; color: #03253f; width: 80%; } /* Paragraph centered */ .neo-desc { text-align: center !important; max-width: 750px; margin: 0 auto 30px auto !important; color: #33455a; font-size: 19px; line-height: 1.8; } /* Bullet points — LEFT aligned */ .neo-points { width: 100%; max-width: 560px; text-align: left !important; margin: 10px 0 25px 0 !important; align-self: flex-start !important; } /* CTA BUTTON — align left under bullets */ .neo-btn { align-self: flex-start !important; margin-left: 0 !important; } /* Subtitle */ .neo-subtitle { text-align: center; font-size: 26px; font-weight: 800; color: #0a8cff; margin-bottom: 10px; width: 100%; } /* FORCE ONE-LINE TITLE + CENTER */ .neo-title { white-space: nowrap; overflow: visible; text-overflow: clip; font-size: clamp(32px, 4vw, 52px); width: 100%; } /* Paragraph centered */ .neo-desc { text-align: center; font-size: 18px; color: #33455a; line-height: 1.8; max-width: 1000px; margin: 0 auto 32px auto; } /* BULLET LIST SHOULD REMAIN LEFT ALIGNED */ .neo-points { list-style: none; padding: 0; margin-bottom: 25px; width: 100%; max-width: 550px; /* NEW: Align bullets left */ text-align: left; align-self: flex-start; } /* BUTTON stays left aligned under bullets */ .neo-btn { align-self: flex-start; margin-left: 0; } .neo-title span { background: linear-gradient(90deg,#006cff,#00c8a8); -webkit-text-fill-color: transparent; -webkit-background-clip: text; } /* BODY TEXT LEFT ALIGNED */ /* LIST */ .neo-desc, .neo-points { text-align: left !important; margin-left: 0 !important; margin-right: auto !important; max-width: 600px; } .neo-points li { position: relative; padding-left: 32px; font-size: 18px; margin-bottom: 14px; color: #334; } .neo-points li::before { content: ""; position: absolute; left: 0; top: 8px; width: 12px; height: 12px; background: #00c3a8; border-radius: 50%; } /* CTA BUTTON */ .neo-btn { display: inline-flex; align-items: center; gap: 12px; padding: 16px 30px; border-radius: 18px; background: linear-gradient(135deg, #006eff, #00c8a8); color: #fff; font-size: 18px; font-weight: 700; margin-top: 20px; text-decoration: none; margin-left: auto; margin-right: auto; display: flex; box-shadow: 0 15px 40px rgba(0,100,255,0.25); transition: 0.3s; } .neo-btn:hover { transform: translateY(-3px); box-shadow: 0 18px 45px rgba(0,100,255,0.32); } .neo-btn img { width: 40px; height: 40px; border-radius: 10px; } /* RIGHT IMAGE (FIXED LAYOUT) */ .neo-right { flex: 1; display: flex; justify-content: center; } .neo-image-frame { width: 420px; height: 420px; border-radius: 28px; /* remove awkward angle */ transform: rotate(0deg); background: rgba(255,255,255,0.55); backdrop-filter: blur(18px); padding: 16px; margin-top: 160px; box-shadow: 0 35px 70px rgba(0,0,0,0.12); overflow: hidden; animation: neoFloat 7s infinite ease-in-out; } .neo-image-frame img { width: 100%; height: 100%; border-radius: 22px; object-fit: cover; } /* FIX IMAGE POSITION — keep it properly on the right */ .neo-content { display: flex; align-items: flex-start; justify-content: space-between; /* force left + right */ gap: 60px; } /* Fix left block width so image doesn’t push */ .neo-left { flex: 1; max-width: 60%; } /* Fix right image position */ .neo-right { flex: 1; display: flex; justify-content: flex-end; } /* Fix floating frame so it doesn't move outside */ .neo-image-frame { margin-right: 40px; /* pushes slightly left */ transform: rotate(3deg) translateY(0); } .flagship-link { text-decoration: none !important; color: inherit !important; outline: none !important; border: none !important; } .flagship-link:active, .flagship-link:focus, .flagship-link:visited { color: inherit !important; text-decoration: none !important; outline: none !important; } .neo-image-frame a:focus, .neo-image-frame a:active { outline: none !important; border: none !important; } @keyframes neoFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } } /* MOBILE */ /* FINAL RESPONSIVE FIX FOR NEO FLAGSHIP */ @media (max-width: 1024px){ .neo-title { font-size: 40px !important; line-height: 1.2 !important; } .neo-right { max-width: 45% !important; display: flex !important; justify-content: center !important; } .neo-image-frame { width: 340px !important; height: auto !important; transform: none !important; }} @media (max-width: 900px) { .neo-content { flex-direction: column; text-align: center; gap: 40px; } .neo-left { padding-right: 0; align-items: center !important; text-align: center !important; max-width: 100% !important; } .neo-desc { text-align: center !important; margin: 0 auto 20px !important; max-width: 90%; } .neo-points { text-align: left !important; margin: 0 auto 20px !important; max-width: 88%; } .neo-btn { margin: 0 auto !important; } .neo-image-frame { width: 300px !important; height: auto !important; padding: 12px; border-radius: 18px; margin: 0 auto !important; transform: none !important; } .neo-right { display: flex; justify-content: center !important; width: 100%; } } /* MOBILE LAYOUT ORDER FIX */ @media (max-width: 768px) { /* Reverse order so image always comes LAST */ .neo-content { display: flex; flex-direction: column !important; align-items: center; gap: 35px; text-align: center; } /* HEADING center + wrap */ .neo-title { font-size: 30px !important; line-height: 1.3; text-align: center !important; white-space: normal !important; width: 100%; } /* Subheading */ .neo-subtitle { font-size: 18px !important; text-align: center !important; } /* PARAGRAPH center */ .neo-desc { font-size: 16px !important; max-width: 90%; margin: 0 auto; text-align: center !important; } /* BULLET POINTS left aligned */ .neo-points { text-align: left !important; max-width: 80%; margin: 0 auto; padding-left: 10px; } /* Button center */ .neo-btn { margin: 0 auto; display: inline-flex; justify-content: center; text-decoration: none; } /* IMAGE always LAST and full width */ .neo-right { width: 100%; display: flex; justify-content: center; } .neo-image-frame { width: 92% !important; height: auto !important; padding: 10px; border-radius: 22px; transform: none !important; } .neo-image-frame img { width: 100% !important; height: auto !important; border-radius: 20px; } } /* ============================================ NEO FLAGSHIP — EXTRA SMALL DEVICES (≤486px) ============================================ */ @media (max-width: 486px) { /* Stack everything */ .neo-content { flex-direction: column-reverse !important; text-align: center !important; gap: 32px !important; } /* Image last & centered */ .neo-right { width: 100%; display: flex; justify-content: center; order:2; } .neo-image-frame { width: 92% !important; height: auto !important; padding: 10px !important; border-radius: 18px !important; transform: none !important; box-shadow: 0 20px 40px rgba(0,0,0,0.15); } .neo-image-frame img { width: 100%; height: auto; border-radius: 14px; } /* Title — centered & resized */ .neo-title { font-size: 26px !important; line-height: 1.28 !important; text-align: center !important; margin-bottom: 12px; } /* Paragraph in the center */ .neo-desc { font-size: 15px !important; line-height: 1.6 !important; text-align: center !important; max-width: 95%; margin: 0 auto 18px; } /* Points LEFT aligned but centered block */ .neo-points { max-width: 95%; margin: 0 auto 18px; text-align: left !important; } .neo-points li { font-size: 14px !important; margin-bottom: 8px; } /* Button */ .neo-btn { font-size: 14px !important; padding: 10px 18px !important; margin: 0 auto !important; border-radius: 14px !important; } .neo-btn img { width: 32px !important; height: 32px !important; } } /* === FIX: Cursor must always be on top of chatbot === */ .cursor-inner, .cursor-outer { z-index: 999999 !important; } #chatbot-icon, #chatbot-box, .bpw-floating-button, .bpw-widget-container, #botpress-webchat, #chatbot-widget { z-index: 9999 !important; } /* FORCE GRADIENT TITLE ON HERO */ /* Apply gradient to the navbar brand title */ .sale-text { font-family: 'Poppins', sans-serif; font-weight: 700; /* bold */ font-size: 48px; } .sale-text span:nth-child(1) { color: #294b67; } /* s */ .sale-text span:nth-child(2) { color: #294b67; } /* a */ .sale-text span:nth-child(3) { color: #FFC933; } /* l */ .sale-text span:nth-child(4) { color: #FFC933; } /* e */ .footer-left-logo img { width: 150px !important; /* increase size */ height: auto !important; } /* === REMOVE ABOUT SECTION CONTAINER BOX — MAKE IT SEAMLESS === */ .about-section { background: transparent !important; box-shadow: none !important; border: none !important; border-radius: 0 !important; padding: 40px 5% !important; } .about-section:nth-child(even) { background: transparent !important; } .about-section:hover { transform: none !important; box-shadow: none !important; } /* Remove the card effect from about-page */ .about-page { background: linear-gradient(135deg, #f4faff, #ecf8ff) !important; padding: 0 !important; } /* Make about container seamless */ .about-container { background: transparent !important; box-shadow: none !important; gap: 0 !important; } /* Remove any visible borders/shadows */ .about-page *, .about-section *, .about-container * { border: none !important; } img.emoji { height: 1.2em; /* matches normal emoji size */ width: 1.2em; margin: 0 4px; /* spacing like normal emoji */ vertical-align: -0.2em; /* align with text */ } /* removed the link hovered box */ .brand a, .brand a:focus, .brand a:active, .brand a:visited { outline: none !important; border: none !important; box-shadow: none !important; text-decoration: none !important; } .brand a:focus-visible { outline: none !important; } /* Prevent image focus ring */ .brand a img { outline: none !important; border: none !important; } /* ====================================== REMOVE FOCUS OUTLINE FROM NAV LINKS ====================================== */ #navMenu a, #navMenu a:focus, #navMenu a:active, #navMenu a:visited { outline: none !important; border: none !important; box-shadow: none !important; text-decoration: none !important; } /* Kill browser focus ring */ #navMenu a:focus-visible { outline: none !important; } /* Icons inside nav links (FontAwesome) */ #navMenu a i { outline: none !important; } /* Remove focus outline from hamburger */ .menu-toggle, .menu-toggle:focus, .menu-toggle:active { outline: none !important; border: none !important; box-shadow: none !important; } /* ====================================== REMOVE FOCUS OUTLINE FROM FOOTER SOCIAL ====================================== */ .footer-social a, .footer-social a:focus, .footer-social a:active, .footer-social a:visited { outline: none !important; border: none !important; box-shadow: none !important; text-decoration: none !important; } /* Kill browser focus ring (Chrome / Safari) */ .footer-social a:focus-visible { outline: none !important; } /* Icons inside links */ .footer-social a i { outline: none !important; border: none !important; } /* ====================================== REMOVE FOCUS OUTLINE FROM FOOTER QUICK LINKS ====================================== */ .footer-center .footer-links a, .footer-center .footer-links a:focus, .footer-center .footer-links a:active, .footer-center .footer-links a:visited { outline: none !important; border: none !important; box-shadow: none !important; text-decoration: none !important; color: inherit !important; } /* Remove browser focus ring */ .footer-center .footer-links a:focus-visible { outline: none !important; } /* ====================================== REMOVE FOCUS OUTLINE FROM FOOTER CONTACT LINKS ====================================== */ .footer-contact-icons a, .footer-contact-icons a:focus, .footer-contact-icons a:active, .footer-contact-icons a:visited { outline: none !important; border: none !important; box-shadow: none !important; text-decoration: none !important; color: inherit !important; } /* Kill browser focus ring */ .footer-contact-icons a:focus-visible { outline: none !important; } /* index page hero section */ /* ===== HERO BACKGROUND IMAGE VERSION ===== */ .hero-bg { position: relative; height: 100vh; overflow: hidden; display: flex; align-items: center; } /* Background image */ .hero-bg-image { position: absolute; inset: 0; background-image: url("/static/images/heroimg.jpg"); /* 👈 CHANGE IMAGE */ background-size: cover; background-position: center; background-repeat: no-repeat; z-index: 1; } /* Dark overlay */ .hero-overlay { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.45); z-index: 2; } /* Content on top */ .hero-content { position: relative; z-index: 3; width: 100%; max-width: 1200px; margin: auto; padding: 0 6%; color: #fff; } .hero-text h1 { font-size: 3rem; font-weight: 800; margin-bottom: 16px; color: #ffffff; } .hero-text p { font-size: 1.15rem; max-width: 650px; line-height: 1.7; color: rgba(255,255,255,0.9); } .hero-buttons .btn.primary { background: #ffffff; color: rgb(20, 86, 116); } .hero-buttons .btn.outline { border: 2px solid #ffffff; color: #ffffff; } /* ========================= HERO MOBILE RESPONSIVENESS ========================= */ @media (max-width: 768px) { .hero-bg { height: 100vh; align-items: center; text-align: center; } .hero-content { padding: 0 20px; } .hero-text h1 { font-size: 2.1rem; /* 🔥 reduce heading size */ line-height: 1.25; margin-bottom: 14px; } .hero-text p { font-size: 0.95rem; line-height: 1.6; max-width: 100%; margin: 0 auto 20px; } .hero-buttons { display: flex; flex-direction: column; gap: 12px; align-items: center; } .hero-buttons .btn { width: 85%; max-width: 320px; padding: 12px 0; font-size: 0.95rem; } }