/* ============================================================ AAROGYOM - Global Base Styles style.css ============================================================ */ @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800&display=swap'); :root { --primary-orange: #e65d0a; --dark-orange: #c44f08; --light-orange: #ff8534; --dark-blue: #0a2351; --mid-blue: #0d2d6b; --light-bg: #fff8f5; --text-dark: #2d2d2d; --text-muted-custom: #6c757d; --shadow-primary: 0 10px 40px rgba(230, 93, 10, 0.15); --shadow-card: 0 10px 30px rgba(0, 0, 0, 0.08); --radius-card: 20px; --radius-btn: 50px; --transition: all 0.3s ease; } * { margin: 0; padding: 0; box-sizing: border-box; } /* ── Global overflow fix ───────────────────────────────── overflow-x:hidden on kills position:sticky. overflow-x:clip does NOT create a scroll container, so sticky navbar works AND horizontal scroll is blocked. ─────────────────────────────────────────────────────── */ html { scroll-behavior: smooth; /* No overflow here — it would break position:sticky */ } body { font-family: 'Poppins', sans-serif; overflow-x: clip; /* blocks horizontal bleed, sticky-safe */ color: var(--text-dark); background: #fff; } /* Each section clips its own decorative overflows */ section, footer, .hero-carousel { overflow-x: clip; } /* Bottom nav body padding on mobile */ @media (max-width: 991px) { body { padding-bottom: 70px; } } /* Container safety on small screens */ @media (max-width: 576px) { .container { padding-left: 15px; padding-right: 15px; } } /* ── Utilities ────────────────────────────────────────── */ .glossy { background: linear-gradient(135deg, rgba(255,255,255,0.25) 0%, rgba(255,255,255,0.05) 100%); backdrop-filter: blur(15px); -webkit-backdrop-filter: blur(15px); border: 1px solid rgba(255,255,255,0.2); box-shadow: var(--shadow-primary); } .glass-effect { background: rgba(255,255,255,0.95); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); box-shadow: 0 20px 60px rgba(0,0,0,0.1); } .text-orange { color: var(--primary-orange) !important; } .bg-orange { background: var(--primary-orange) !important; } .bg-dark-blue { background: var(--dark-blue) !important; } /* ── Section Headings ─────────────────────────────────── */ .section-tag { display: inline-block; font-size: 0.78rem; font-weight: 700; text-transform: uppercase; letter-spacing: 2.5px; color: var(--primary-orange); margin-bottom: 0.6rem; } .section-title { font-weight: 800; color: var(--dark-blue); line-height: 1.18; } .section-subtitle { color: var(--text-muted-custom); font-size: 1rem; max-width: 600px; margin: 0 auto; } /* ── Buttons ──────────────────────────────────────────── */ .btn { font-family: 'Poppins', sans-serif; font-weight: 600; letter-spacing: 0.3px; border-radius: var(--radius-btn); transition: var(--transition); } .btn-primary { background: linear-gradient(135deg, var(--primary-orange) 0%, var(--dark-orange) 100%); border: none; color: white; position: relative; overflow: hidden; box-shadow: 0 10px 30px rgba(230, 93, 10, 0.3); } .btn-primary::before { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent); transition: left 0.5s ease; } .btn-primary:hover::before { left: 100%; } .btn-primary:hover { transform: translateY(-3px); box-shadow: 0 15px 40px rgba(230, 93, 10, 0.4); background: linear-gradient(135deg, var(--primary-orange), var(--dark-orange)); color: white; } .btn-primary:active, .btn-primary:focus { color: white; background: linear-gradient(135deg, var(--dark-orange), var(--primary-orange)); } .btn-outline-primary { border: 2px solid var(--primary-orange); color: var(--primary-orange); } .btn-outline-primary:hover { background: var(--primary-orange); color: white; transform: translateY(-3px); box-shadow: 0 10px 30px rgba(230,93,10,0.3); } .btn-outline-light { border: 2px solid rgba(255,255,255,0.7); color: white; } .btn-outline-light:hover { background: rgba(255,255,255,0.15); border-color: white; color: white; transform: translateY(-3px); } /* ── Forms ────────────────────────────────────────────── */ .form-control, .form-select { border: 2px solid #f0f0f0; border-radius: 12px; padding: 12px 18px; font-family: 'Poppins', sans-serif; font-size: 0.9rem; transition: var(--transition); color: var(--text-dark); } .form-control:focus, .form-select:focus { border-color: var(--primary-orange); box-shadow: 0 0 0 0.25rem rgba(230, 93, 10, 0.15); } .form-label { font-weight: 600; font-size: 0.875rem; margin-bottom: 6px; } /* ── Animations ───────────────────────────────────────── */ @keyframes fadeInUp { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes shimmer { 100% { left: 100%; } } @keyframes pulse { 0%, 100% { transform: scale(1); opacity: 0.5; } 50% { transform: scale(1.1); opacity: 0.8; } } @keyframes bounceIn { 0% { transform: scale(0.8); opacity: 0; } 60% { transform: scale(1.05); opacity: 1; } 100% { transform: scale(1); } } .animate-fadeup { animation: fadeInUp 0.7s ease both; } .animate-fadein { animation: fadeIn 0.5s ease both; } /* ── Scrollbar ────────────────────────────────────────── */ ::-webkit-scrollbar { width: 6px; } ::-webkit-scrollbar-track { background: #f1f1f1; } ::-webkit-scrollbar-thumb { background: linear-gradient(180deg, var(--primary-orange), var(--light-orange)); border-radius: 10px; }