/* ============================================================ Paradise International – Main Stylesheet Colors are driven by CSS variables set in via config.php Font: Poppins (Google Fonts - Premium Professional Typography) ============================================================ */ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap'); /* ----- Global Motion System (Agency Standard) -------- */ :root { --motion-speed: 0.8s; --motion-delay: 0.2s; --motion-ease: ease-out; --motion-delay-step: 0.1s; } /* ----- Global ------------------------------------------------ */ html, body { max-width: 100%; overflow-x: hidden; } body { font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; color: var(--dark-text); font-weight: 400; background: linear-gradient(180deg, #fafafa 0%, #f3f3f3 100%); min-height: 100vh; line-height: 1.6; /* iOS Optimizations */ -webkit-font-smoothing: antialiased; -webkit-text-size-adjust: 100%; -webkit-touch-callout: none; -webkit-user-select: text; /* Safe area support for notch devices */ padding: max(0px, env(safe-area-inset-top)) 0 0 0; /* Offset for fixed navbar */ padding-top: 62px; } /* iOS Input Styling */ input, textarea, select { -webkit-appearance: none; appearance: none; border-radius: 0; font-size: 16px; } /* Touch Action Optimization */ button, a, [role="button"] { -webkit-touch-callout: default; touch-action: manipulation; } h1, h2, h3, h4, h5, h6 { font-family: 'Poppins', sans-serif; font-weight: 700; } /* ----- Navigation -------------------------------------------- */ .navbar { background-color: var(--light-pink); box-shadow: none; border: none; font-family: 'Poppins', sans-serif; padding: 0.8rem 0; position: fixed; top: 0; left: 0; right: 0; width: 100%; z-index: 1030; } .navbar-nav { width: 100%; justify-content: flex-end; gap: 0.5rem; } .nav-link { font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; font-weight: 700; color: var(--dark-text); padding: 0.75rem 1.25rem; transition: all var(--motion-speed) var(--motion-ease); font-size: 0.95rem; letter-spacing: 0.3px; border-radius: 6px; text-transform: capitalize; } .nav-link:hover { color: var(--primary-orange); background-color: rgba(255, 107, 44, 0.05); transform: translateY(-2px); } .nav-link.active { color: var(--primary-orange); font-weight: 700; background-color: rgba(255, 107, 44, 0.08); } /* ----- Buttons ----------------------------------------------- */ .btn-orange { background-color: var(--primary-orange); color: white; border-radius: 50px; padding: 14px 32px; font-weight: 700; font-size: 1rem; letter-spacing: 0.5px; border: none; transition: all var(--motion-speed) var(--motion-ease); text-transform: uppercase; box-shadow: 0 8px 20px rgba(255, 106, 42, 0.3); } .btn-orange:hover { background-color: var(--hover-orange); transform: translateY(-3px); box-shadow: 0 12px 28px rgba(255, 107, 44, 0.4); color: white; } .btn-orange:active { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(255, 107, 44, 0.3); } .btn-submit { background: var(--primary-orange); color: white; border: none; padding: 12px 40px; border-radius: 25px; font-weight: 600; transition: all var(--motion-speed) var(--motion-ease); } .btn-submit:hover { transform: translateY(-3px); box-shadow: 0 8px 20px rgba(255, 107, 44, 0.3); } .btn-submit:hover { transform: translateY(-2px); box-shadow: 0 5px 15px rgba(244, 84, 29, 0.4); } /* ----- Hero Section ------------------------------------------ */ .hero-section { background-color: var(--light-pink); padding: 60px 0 110px 0; min-height: 600px; display: flex; align-items: flex-start; } .hero-logo { width: 60px; height: auto; margin-bottom: 1rem; } .hero-company-name { font-size: 52px; font-weight: 700; color: #f47a52; line-height: 1.2; margin-bottom: 0.5rem; } .hero-tagline { font-size: 24px; font-weight: 500; color: var(--primary-orange); line-height: 1.3; margin-bottom: 1.5rem; } .hero-description { font-size: 1.05rem; color: var(--dark-text); line-height: 1.7; max-width: 520px; margin-bottom: 1.5rem; } /* Trust Signals */ .trust-signals { display: flex; flex-direction: column; gap: 0.75rem; margin-top: 24px; } .trust-item { display: flex; align-items: center; gap: 0.75rem; font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; font-weight: 500; font-size: 1rem; color: #444; line-height: 1.8; } .trust-checkmark { color: var(--primary-orange); font-weight: 700; font-size: 1.1rem; flex-shrink: 0; } .trust-text { line-height: 1.5; } /* Premium Badge */ .premium-badge { display: inline-flex; align-items: center; background: #fff3ec; color: #ff6b2c; font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; font-size: 13px; font-weight: 600; letter-spacing: 0.3px; padding: 5px 12px; border-radius: 50px; white-space: nowrap; box-shadow: 0 2px 8px rgba(255, 107, 44, 0.08); border: 1px solid #ffd3bf; transition: all 0.3s ease; cursor: default; opacity: 0.9; } .premium-badge:hover { transform: translateY(-1px); background: #ffe8db; border-color: #ffb899; box-shadow: 0 4px 12px rgba(255, 107, 44, 0.15); } .premium-badge svg { flex-shrink: 0; opacity: 0.9; } /* Hero Carousel */ #heroCarousel { border-radius: 24px 0 24px 0; overflow: hidden; box-shadow: 0 15px 40px rgba(0, 0, 0, 0.18); transition: box-shadow 0.3s ease; } #heroCarousel:hover { box-shadow: 0 20px 50px rgba(0, 0, 0, 0.22); } .hero-image { border-radius: 0; width: 100%; height: 520px; object-fit: cover; box-shadow: 0 20px 40px rgba(0, 0, 0, 0.08); } .carousel-fade .carousel-item { opacity: 0; transition: opacity 0.8s ease-in-out; } .carousel-fade .carousel-item.active { opacity: 1; } /* Carousel Indicators */ .carousel-indicators { bottom: 20px; margin-bottom: 0; } .carousel-indicators [data-bs-target] { width: 12px; height: 12px; border-radius: 50%; background-color: rgba(255, 255, 255, 0.5); border: 2px solid rgba(255, 255, 255, 0.8); opacity: 0.7; transition: all 0.3s ease; } .carousel-indicators .active { background-color: var(--primary-orange); border-color: var(--primary-orange); opacity: 1; width: 14px; height: 14px; } .carousel-indicators [data-bs-target]:hover { opacity: 1; background-color: rgba(255, 107, 44, 0.7); } /* Carousel Captions */ .carousel-caption { position: absolute; bottom: 40%; left: 50%; transform: translateX(-50%); width: 70%; background: rgba(0, 0, 0, 0.55); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); padding: 30px 20px; text-align: center; border-radius: 8px; } .carousel-caption h5 { font-family: 'Poppins', sans-serif; font-size: 1.8rem; font-weight: 700; color: white; letter-spacing: 0.5px; margin: 0; text-shadow: 0 2px 8px rgba(0, 0, 0, 0.3); } .hero-title { font-size: 2.5rem; font-weight: 700; margin-bottom: 20px; } /* ----- Branding ---------------------------------------------- */ .logo-text { color: var(--primary-orange); font-size: 2rem; font-weight: 700; } .subtitle { color: var(--primary-orange); font-size: 1rem; } /* ----- Layout Helpers ---------------------------------------- */ .section-padding { padding: 60px 0; } .bg-light-section { background-color: var(--light-pink); } /* ----- Cards ------------------------------------------------- */ .service-card { background: white; border-radius: 15px; padding: 30px; box-shadow: 0 5px 20px rgba(0,0,0,0.1); height: 100%; } /* ===== SERVICES SECTION PREMIUM DESIGN ===== */ .services-section { background: #ffffff; position: relative; overflow: hidden; } /* Image Wrapper */ .service-image-wrapper { position: relative; display: inline-block; } .service-image { border-radius: 18px; max-width: 420px; transition: transform 0.3s ease; box-shadow: 0 15px 40px rgba(0, 0, 0, 0.08); } .service-image:hover { transform: translateY(-4px); } /* Step Circle Badge - Process Indicator */ .step-badge { position: absolute; top: 16px; left: 16px; background: #fff; color: var(--primary-orange); font-weight: 700; width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; box-shadow: 0 6px 15px rgba(0, 0, 0, 0.08); font-size: 18px; } /* Section Label */ .section-label { color: var(--primary-orange); font-weight: 600; letter-spacing: 1px; font-size: 14px; text-transform: uppercase; margin-bottom: 0.75rem; font-family: 'Inter', sans-serif; } /* Service Title */ .service-title { font-size: 32px; font-weight: 700; color: #111; line-height: 1.25; font-family: 'Poppins', sans-serif; max-width: 420px; } /* Service List */ .service-list { list-style: none; padding: 0; } .service-list li { font-size: 18px; margin-bottom: 10px; position: relative; padding-left: 28px; color: #333; } /* Check icon */ .service-list li::before { content: "✓"; position: absolute; left: 0; color: var(--primary-orange); font-weight: bold; font-size: 20px; } /* Bottom Right Corner Image - Half Visible */ .service-corner-image { position: absolute; bottom: -80px; right: -263px; width: 525px; height: auto; opacity: 0.08; z-index: 1; } /* ============================= ABOUT SECTION ============================= */ .about-section { background: #f4f4f4; padding-top: 80px; font-family: 'Poppins', sans-serif; } .about-header { max-width: 820px; margin: 0 auto; text-align: left; padding-bottom: 50px; border-bottom: 1px solid #eee; } .section-tag { color: #ff6a2f; font-size: 13px; letter-spacing: 2px; font-weight: 600; display: inline-block; margin-bottom: 8px; } .about-header h2 { font-size: 36px; font-weight: 700; margin-bottom: 15px; } .about-header p { color: #555; line-height: 1.7; font-size: 16px; } .about-split { display: flex; flex-wrap: wrap; box-shadow: inset -1px 0 0 rgba(0, 0, 0, 0.05); border-top: 1px solid rgba(0, 0, 0, 0.05); } .split-box { flex: 1; padding: 60px 50px; position: relative; display: flex; flex-direction: column; justify-content: center; transition: 0.3s ease; } .split-box:hover { transform: translateY(-5px); } .left-box { background: #f57c52; color: #000; } .right-box { background: #e8c2b3; } .icon-circle { width: 60px; height: 60px; background: #000; color: #fff; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin-bottom: 18px; font-size: 22px; } .split-box h3 { font-size: 24px; font-weight: 700; margin-bottom: 15px; } .split-box p { line-height: 1.7; font-size: 15px; } .why-text { color: rgba(0, 0, 0, 0.85); line-height: 1.7; } .about-text { line-height: 1.8; } .trust-label { margin: 6px 0 10px; font-size: 14px; font-weight: 600; color: #111; } .achievement-list { padding-left: 0; list-style: none; margin-bottom: 0; } .achievement-list li { margin-bottom: 8px; font-size: 15px; position: relative; padding-left: 24px; } .achievement-list li::before { content: "\2713"; position: absolute; left: 0; color: #ff6a2f; font-weight: bold; } .stats { display: flex; gap: 18px; align-items: center; margin-top: 16px; flex-wrap: wrap; } .stats strong { display: block; font-size: 26px; font-weight: 700; color: #111; } .stats span { display: block; font-size: 13px; color: #222; opacity: 0.85; } .about-step-badge { position: absolute; top: -18px; right: 40px; width: 42px; height: 42px; background: #fff; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 600; color: #7a5cff; box-shadow: 0 6px 15px rgba(0, 0, 0, 0.12); } /* ===== ACHIEVEMENTS SECTION ===== */ .achievements-header { background: #f47c52; padding: 40px 8%; } .achievements-header h2 { font-size: 36px; font-weight: 700; color: #000; margin: 0; } .achievements-banner { position: relative; background: url("../logos/Paradise-International-Immigration-Consultant%20(4).png") center/cover no-repeat; padding: 120px 8%; } .achievements-overlay { position: absolute; inset: 0; background: linear-gradient( to right, rgba(0, 0, 0, 0.65), rgba(0, 0, 0, 0.35) ); } .achievement-container { position: relative; display: flex; justify-content: space-between; gap: 40px; flex-wrap: wrap; align-items: center; } .achievement-item { color: #fff; max-width: 300px; transition: transform 0.3s ease; } .achievement-item:hover { transform: translateY(-6px); } .achievement-badge { background: #000; padding: 8px 14px; font-size: 12px; border-radius: 8px; display: inline-block; margin-bottom: 15px; font-weight: 600; letter-spacing: 0.8px; } .achievement-item h3 { font-size: 56px; color: #ff7a45; margin-bottom: 10px; font-weight: 800; } .achievement-item p { font-size: 14px; line-height: 1.6; color: #e6e6e6; } /* =============================== WHY CHOOSE SECTION ================================ */ .why-header { background: #000; padding: 50px 0; } .why-header .container { padding-left: 40px; padding-right: 40px; } .why-header h2 { color: #fff; font-weight: 700; font-size: 34px; margin: 0; letter-spacing: -0.5px; } .why-content { padding: 60px 0; max-width: 100%; } .why-content > .row > .col-lg-6:last-child { max-width: 540px; } .why-image img { width: 100%; border-radius: 20px 0 20px 0; object-fit: cover; transition: transform 0.4s ease; box-shadow: 0 12px 40px rgba(0, 0, 0, 0.12); } .why-image:hover img { transform: scale(1.03); } .highlight-title { color: #ff6a2a; font-weight: 600; margin-bottom: 18px; } .why-content p { color: #555; line-height: 1.8; font-size: 16px; max-width: 540px; letter-spacing: 0.2px; } .contact-text { margin-top: 15px; color: #222; border-left: 4px solid #ff6a2a; padding-left: 15px; font-weight: 600; letter-spacing: 0.2px; } .feature-box { background: white; padding: 30px; border-radius: 15px; box-shadow: 0 5px 15px rgba(0,0,0,0.08); } /* ----- Checkmarks -------------------------------------------- */ .checkmark { color: var(--primary-orange); margin-right: 10px; font-weight: 700; font-size: 1.1em; } .feature-list { list-style: none; padding: 0; margin: 25px 0; } .feature-list li { display: flex; align-items: center; margin-bottom: 12px; font-size: 15px; color: #444; line-height: 1.6; transition: transform 0.3s ease; } .feature-list li:hover { transform: translateX(4px); } /* ----- Trust Badges ---------------------------------------- */ .badges-section { padding: 80px 40px; } .badges-wrapper { display: grid; grid-template-columns: repeat(2, 1fr); gap: 30px; max-width: 900px; margin: 0 auto; } .trust-badge { padding: 18px 16px; background: white; border-radius: 12px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06); transition: all 0.3s ease; border: 1px solid #eee; text-align: center; } .trust-badge:hover { transform: translateY(-6px); box-shadow: 0 12px 30px rgba(0, 0, 0, 0.1); border: 2px solid #ff6a2a; } .trust-icon { font-size: 38px; margin-bottom: 12px; display: block; } .trust-badge h6 { font-size: 15px; font-weight: 700; margin-bottom: 3px; color: #222; } /* Responsive: 4 columns on very large screens */ @media (min-width: 1400px) { .badges-wrapper { grid-template-columns: repeat(4, 1fr); gap: 25px; max-width: 100%; } } /* Responsive: Stack on mobile */ @media (max-width: 768px) { .badges-wrapper { grid-template-columns: 1fr; gap: 20px; } .badges-section { padding: 60px 20px; } } /* ----- How We Work Section (Process Timeline) --------- */ .how-we-work-section { background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%); padding: 70px 0; } .how-we-work-section h2 { font-size: 36px; font-weight: 700; margin-bottom: 10px; color: #222; } .process-timeline { position: relative; padding: 40px 0; } .process-timeline .row { gap: 28px; } .process-step { text-align: center; padding: 30px 22px 35px; background: white; border-radius: 16px; overflow: hidden; box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08); transition: all 0.3s ease; position: relative; border-top: 3px solid var(--primary-orange); display: flex; flex-direction: column; justify-content: flex-start; min-height: 260px; } .process-step:hover { transform: translateY(-6px); box-shadow: 0 18px 40px rgba(0, 0, 0, 0.12); } .step-number { width: 60px; height: 60px; border-radius: 50%; background: linear-gradient(135deg, var(--primary-orange) 0%, #ff8849 100%); color: white; font-size: 26px; font-weight: 700; display: flex; align-items: center; justify-content: center; margin: 10px auto 20px; box-shadow: 0 10px 25px rgba(255, 106, 42, 0.35); transition: all 0.3s ease; } .process-step:hover .step-number { transform: scale(1.1); box-shadow: 0 15px 35px rgba(255, 106, 42, 0.4); } .process-step h5 { font-size: 16px; font-weight: 700; margin-bottom: 10px; color: #222; } .process-step p { font-size: 13px; line-height: 1.5; margin-bottom: 0; } /* 5-Column Layout for Process Steps */ .col-lg-2-4 { flex: 0 0 calc(20% - 22.4px); max-width: calc(20% - 22.4px); } @media (max-width: 1200px) { .col-lg-2-4 { flex: 0 0 calc(50% - 10px); max-width: calc(50% - 10px); } } @media (max-width: 768px) { .process-step { margin-bottom: 20px; } .how-we-work-section h2 { font-size: 28px; } } /* ----- Reassurance Section --------------------------------- */ .reassurance-section { padding: 20px; background: linear-gradient(135deg, rgba(255, 106, 42, 0.03), rgba(255, 106, 42, 0.06)); border-radius: 12px; border: 1px solid rgba(255, 106, 42, 0.1); } .reassurance-items { display: flex; justify-content: center; gap: 40px; flex-wrap: wrap; } .reassurance-item { font-size: 14px; font-weight: 500; color: #444; margin: 0; } @media (max-width: 768px) { .reassurance-items { gap: 20px; } .reassurance-item { font-size: 13px; } } /* ========================= GUIDE SECTION ========================= */ .guide-section { background: #f6f4f2; padding: 80px 0; } .section-header h2 { font-size: 38px; font-weight: 700; color: #111; max-width: 900px; margin: auto; } /* CARD */ .guide-card { background: #fff; padding: 25px 25px 30px; border-radius: 20px; transition: 0.35s ease; box-shadow: 0 10px 25px rgba(0, 0, 0, 0.06); height: 100%; opacity: 0; transform: translateY(40px); animation: fadeUp 0.8s ease forwards; } .guide-card:hover { transform: translateY(-6px); box-shadow: 0 18px 40px rgba(0, 0, 0, 0.12); } /* IMAGE */ .guide-img { overflow: hidden; border-radius: 18px; margin-bottom: 20px; } .guide-img img { width: 100%; height: 260px; object-fit: cover; transition: 0.4s; } .guide-card:hover img { transform: scale(1.05); } /* TEXT */ .guide-card h5 { font-size: 18px; font-weight: 600; margin-bottom: 10px; color: #111; } .guide-card p { font-size: 15px; color: #666; line-height: 1.6; } /* SMALL LABEL */ .small-title { font-size: 12px; letter-spacing: 1px; color: #ff6b2c; font-weight: 700; margin-bottom: 6px; text-transform: uppercase; } @keyframes fadeUp { to { opacity: 1; transform: translateY(0); } } /* ----- Achievements Section ---------------------------------- */ .achievement-section { background: linear-gradient(135deg, var(--dark-blue) 0%, var(--primary-blue) 100%); color: white; } /* =========================== FINAL CTA SECTION =========================== */ .final-cta { background: #ffd6c9; padding: 90px 0; } /* LEFT TEXT */ .cta-text h2 { font-size: 42px; font-weight: 700; color: #111; line-height: 1.3; } .cta-text h2 span { color: #ff7f57; } .cta-text p { margin-top: 20px; font-size: 16px; color: #333; line-height: 1.8; max-width: 520px; } /* Trust Micro-Line */ .trust-micro-line { font-size: 13px; color: #ff7a3c; font-weight: 600; margin-top: 12px; margin-bottom: 16px; line-height: 1.6; letter-spacing: 0.3px; } /* Conversion Booster Services */ .services-highlight { display: flex; flex-direction: column; gap: 8px; margin: 16px 0 20px; padding: 14px 0; } .highlight-item { font-size: 14px; font-weight: 600; color: #1a5f7a; line-height: 1.5; display: flex; align-items: center; gap: 8px; } /* RIGHT SIDE */ .cta-media-wrapper { position: relative; display: flex; justify-content: center; align-items: center; width: 100%; max-width: 100%; } .cta-media-wrapper::before { content: ""; position: absolute; width: calc(100% - 20px); max-width: 620px; height: 670px; background: rgba(255, 107, 44, 0.08); border-radius: 40px; top: -20px; left: 20px; right: 0; z-index: -1; } .cta-image-shape { width: 100%; max-width: 600px; height: 650px; position: relative; transition: filter 0.3s ease; display: block; } .cta-image-shape:hover { filter: drop-shadow(0 20px 30px rgba(0, 0, 0, 0.22)); } /* Video / Photo - fitted inside shape */ .cta-photo { width: 100%; height: 650px; object-fit: cover; display: block; } /* CONTACT BOX — Pill Badge Layout */ .contact-box { position: absolute; right: 0; bottom: 40px; background: transparent; z-index: 20; width: min(300px, calc(100% - 16px)); display: flex; flex-direction: column; gap: 8px; } .contact-pill-heading { background: #fa8763; color: #fff; font-weight: 800; font-size: 14px; line-height: 1.4; padding: 10px 18px; border-radius: 50px; text-align: center; box-shadow: 0 6px 20px rgba(250, 135, 99, 0.4); margin-bottom: 4px; } .contact-pills { display: flex; flex-direction: column; gap: 7px; } .contact-pill { background: #fa8763; color: #fff; font-size: 13px; font-weight: 600; padding: 9px 16px; border-radius: 50px; text-decoration: none; display: block; box-shadow: 0 4px 14px rgba(250, 135, 99, 0.3); transition: all 0.3s ease; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .contact-pill.address { white-space: normal; border-radius: 20px; line-height: 1.6; } .contact-pill:hover { background: #e8673e; color: #fff; transform: translateX(-4px); box-shadow: 0 6px 20px rgba(250, 135, 99, 0.5); text-decoration: none; } .contact-box:hover .contact-pill-heading { transform: translateX(-4px); transition: all 0.3s ease; } /* WhatsApp Button */ .whatsapp-btn { display: block; background: #25D366; color: white !important; padding: 10px 15px; border-radius: 8px; text-align: center; font-weight: 600; margin-top: 12px; transition: all 0.3s ease; text-decoration: none !important; } .whatsapp-btn:hover { background: #20BA5A; transform: translateY(-2px); box-shadow: 0 5px 15px rgba(37, 211, 102, 0.4); } /* RESPONSIVE */ @media (max-width: 992px) { .cta-text { text-align: center; margin-bottom: 40px; } .cta-text p { margin-left: auto; margin-right: auto; } .contact-box { position: relative; margin: 20px auto 0; right: auto; bottom: auto; width: 100%; } .contact-pill { white-space: normal; } .cta-text h2 { font-size: 32px; } } /* ----- Contact Info Box -------------------------------------- */ .contact-info-box { background: var(--primary-orange); color: white; padding: 20px; border-radius: 10px; } /* ----- Footer (Advanced Professional) --------------------- */ .pi-footer { background: #0f4c5c; color: #fff; padding-top: 50px; font-family: 'Poppins', sans-serif; } .footer-container { max-width: 1200px; margin: auto; display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 30px; padding: 0 20px 40px; } .footer-col h3, .footer-col h4 { margin-bottom: 15px; color: #ffffff; font-weight: 700; } .footer-col h3 { font-size: 1.3rem; } .footer-col h4 { font-size: 1.05rem; } .footer-col p { font-size: 14px; line-height: 1.6; color: #dcdcdc; margin: 8px 0; } .footer-col ul { list-style: none; padding: 0; margin: 0; } .footer-col ul li { margin: 10px 0; } .footer-col ul li a { color: #dcdcdc; text-decoration: none; transition: color 0.3s ease; } .footer-col ul li a:hover { color: var(--primary-orange); } /* Contact Column Alignment */ .footer-col:last-child { max-width: 260px; } /* Footer Links Interactive Hover */ .footer-col a:hover { color: #2bd16b; transition: 0.3s ease; } .footer-whatsapp { display: inline-block; margin-top: 15px; background: #25d366; color: #fff; padding: 10px 18px; border-radius: 6px; text-decoration: none; font-weight: 600; transition: all 0.3s ease; box-shadow: 0 4px 12px rgba(37, 211, 102, 0.2); } .footer-whatsapp:hover { background: #1ebe5d; color: #fff; transform: translateY(-2px); box-shadow: 0 6px 14px rgba(0,0,0,0.2); } .footer-social { margin-top: 15px; } .footer-social a { color: white; margin-right: 14px; font-size: 20px; transition: color 0.3s ease; display: inline-block; } .footer-social a:hover { color: var(--primary-orange); } .footer-bottom { text-align: center; padding: 18px 15px; border-top: 1px solid rgba(255,255,255,0.15); } .footer-copy { margin: 0; font-size: 15px; font-weight: 500; color: #ffffff; } .footer-disclaimer { margin-top: 6px; font-size: 13px; color: #d6e6e8; max-width: 720px; margin: 8px auto 0; line-height: 1.6; text-align: center; } .footer-trust { font-size: 12px; color: #bfe3e7; margin-top: 6px; margin-bottom: 0; line-height: 1.5; } /* Footer Mobile Responsive */ @media (max-width: 768px) { .footer-container { grid-template-columns: repeat(2, 1fr); gap: 20px; padding: 0 15px 30px; } .footer-col h3, .footer-col h4 { font-size: 1rem; margin-bottom: 12px; } .footer-col p { font-size: 13px; } } @media (max-width: 480px) { .footer-container { grid-template-columns: 1fr; gap: 25px; } .footer-social a { margin-right: 12px; font-size: 18px; } } /* ----- Modal ------------------------------------------------- */ .modal-header { background: var(--primary-orange); color: white; border-radius: 0.5rem 0.5rem 0 0; } .modal-header .btn-close { filter: brightness(0) invert(1); } /* ----- Consultation Type Cards ------------------------------ */ .consultation-type-card { border: 2px solid #e0e0e0; border-radius: 10px; padding: 15px; margin-bottom: 15px; cursor: pointer; transition: all 0.3s; } .consultation-type-card:hover { border-color: var(--primary-orange); background-color: #fff5f2; } .consultation-type-card.selected { border-color: var(--primary-orange); background-color: #fff5f2; } .consultation-type-card input[type="radio"] { margin-right: 10px; } .form-label { font-weight: 600; color: var(--dark-blue); } /* ----- Calendar ---------------------------------------------- */ #calendar { max-width: 450px; margin: 0 auto; background: white; border-radius: 10px; padding: 15px; box-shadow: 0 2px 8px rgba(0,0,0,0.08); overflow: hidden; } .fc { font-size: 0.85rem; overflow: hidden; } .fc-scroller { overflow: hidden !important; } .fc .fc-toolbar-title { font-size: 1.1rem; font-weight: 700; color: var(--dark-blue); } .fc .fc-button { background-color: var(--primary-orange); border-color: var(--primary-orange); padding: 0.3rem 0.7rem; font-size: 0.85rem; } .fc .fc-button:hover { background-color: var(--hover-orange); border-color: var(--hover-orange); } .fc .fc-button:focus { box-shadow: 0 0 0 0.2rem rgba(244, 84, 29, 0.25); } .fc .fc-daygrid-day { cursor: pointer; transition: all 0.2s; } .fc .fc-daygrid-day:hover { background-color: #fff5f2; } .fc .fc-daygrid-day.fc-day-today { background-color: #fff5f2 !important; } .fc .fc-daygrid-day-number { padding: 6px; font-weight: 500; font-size: 0.9rem; } /* Calendar – date has appointments dot */ .fc .fc-daygrid-day.has-appointments { position: relative; } .fc .fc-daygrid-day.has-appointments .fc-daygrid-day-number:after { content: ''; position: absolute; bottom: 2px; left: 50%; transform: translateX(-50%); width: 6px; height: 6px; background-color: var(--primary-orange); border-radius: 50%; } /* Calendar – fully booked date */ .fc .fc-daygrid-day.fully-booked { background-color: #ffe5e5 !important; } /* Holiday Highlight */ .holiday { pointer-events: none !important; cursor: not-allowed !important; } .holiday-label { font-size: 0.62rem; color: #7a1a00; font-weight: 700; text-align: center; padding: 1px 3px; line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; background: rgba(255,255,255,0.5); border-radius: 3px; margin-top: 2px; } /* Weekend (Sunday + Saturday) */ .weekend { pointer-events: none !important; cursor: not-allowed !important; } /* Calendar – Public Holiday */ .fc .fc-daygrid-day.is-holiday .fc-daygrid-day-frame { background-color: #ffcc02; } .fc .fc-daygrid-day.is-holiday .fc-daygrid-day-number { color: #bf360c; font-weight: 700; } .fc .fc-daygrid-day.is-holiday { cursor: not-allowed; } /* Fully booked */ .fc .fc-daygrid-day.fully-booked .fc-daygrid-day-frame { background-color: #ffe5e5; } .fc .fc-daygrid-day.fully-booked .fc-daygrid-day-number { color: #999; text-decoration: line-through; } /* ----- Time Slot Buttons ------------------------------------ */ .time-slot-btn { border: 2px solid #e0e0e0; border-radius: 8px; padding: 10px 8px; margin: 5px 0; background: white; cursor: pointer; transition: all 0.2s; text-align: center; width: 100%; font-size: 0.9rem; font-weight: 600; } .time-slot-btn:hover:not(.booked) { border-color: var(--primary-orange); background-color: #fff5f2; transform: translateY(-2px); box-shadow: 0 4px 12px rgba(244, 84, 29, 0.15); } .time-slot-btn.selected { background-color: var(--primary-orange); color: white; border-color: var(--primary-orange); transform: translateY(-2px); box-shadow: 0 4px 12px rgba(244, 84, 29, 0.3); } .time-slot-btn.booked { background-color: #f5f5f5; color: #999; cursor: not-allowed; text-decoration: line-through; } /* ----- Booking Steps ---------------------------------------- */ .booking-step { display: none; } .booking-step.active { display: block; } .step-indicator { display: flex; justify-content: space-between; margin-bottom: 30px; position: relative; } .step-indicator .step { flex: 1; text-align: center; padding: 12px; background: #f5f5f5; margin: 0 3px; border-radius: 10px; font-weight: 600; font-size: 0.9rem; transition: all 0.3s; } .step-indicator .step.active { background: var(--primary-orange); color: white; } .step-indicator .step.completed { background: var(--primary-blue); color: white; } .selected-info { background: var(--light-pink); padding: 15px; border-radius: 10px; margin-bottom: 20px; } /* ----- Service Select Cards --------------------------------- */ .service-select-card { display: flex; align-items: center; padding: 14px 16px; border: 2px solid #e5e5e5; border-radius: 10px; cursor: pointer; transition: all 0.2s; background: #fafafa; } .service-select-card:hover, .service-select-card.selected { border-color: var(--primary-orange); background: var(--light-pink); transform: translateY(-1px); box-shadow: 0 4px 12px rgba(244,84,29,0.15); } /* ----- Consultation Type Cards ------------------------------ */ .consult-type-card { border: 2px solid #e5e5e5; border-radius: 12px; padding: 18px 14px; text-align: center; cursor: pointer; transition: all 0.25s; height: 100%; display: flex; flex-direction: column; align-items: center; } .consult-type-card:hover, .consult-type-card.selected { border-color: var(--primary-orange); background: var(--light-pink); box-shadow: 0 4px 16px rgba(244,84,29,0.18); } .consult-badge { font-size: 0.65rem; font-weight: 700; padding: 2px 8px; border-radius: 20px; margin-bottom: 8px; letter-spacing: 0.5px; } .consult-icon { font-size: 1.8rem; margin-bottom: 6px; } .consult-duration { font-size: 0.75rem; color: #888; margin: 4px 0 8px; } .consult-features { list-style: none; padding: 0; margin: 0 0 10px; font-size: 0.75rem; color: #555; text-align: left; } .consult-features li::before { content: '\2713 '; color: var(--primary-orange); } .consult-price { font-size: 1.1rem; font-weight: 700; color: var(--dark-blue); margin-top: auto; } /* ----- Meeting Mode Cards ----------------------------------- */ .meeting-mode-card { display: block; border: 2px solid #e0e0e0; border-radius: 12px; padding: 0; cursor: pointer; transition: all 0.22s; height: 100%; overflow: hidden; } .meeting-mode-card input[type="radio"] { display: none; } .meeting-mode-card:hover, .meeting-mode-card.selected { border-color: var(--primary-orange); box-shadow: 0 4px 14px rgba(244,84,29,0.18); } .meeting-mode-card.selected { background: #fff8f5; } .meeting-mode-inner { padding: 14px 12px; text-align: center; position: relative; } .meeting-mode-icon { margin-bottom: 6px; } .meeting-mode-logo { height: 48px; display: flex; align-items: center; justify-content: center; margin-bottom: 6px; } .logo-img { max-height: 48px; max-width: 100%; object-fit: contain; } .meeting-mode-label { font-weight: 700; font-size: 0.9rem; display: block; } .meeting-mode-tag { font-size: 0.62rem; font-weight: 700; color: var(--primary-orange); text-transform: uppercase; letter-spacing: 0.5px; margin: 3px 0; } .meeting-mode-desc { font-size: 0.72rem; color: #777; margin-top: 3px; } .meeting-preview { background: #f0f4ff; border: 1px dashed #94b4f0; border-radius: 8px; padding: 8px 12px; font-size: 0.8rem; color: #3054a5; } /* ----- Meeting Link Box (Step 6) ---------------------------- */ .meeting-link-box { background: linear-gradient(135deg, #e8f5e9 0%, #f1f8e9 100%); border: 1px solid #cfe9d6; border-radius: 14px; padding: 20px; text-align: center; margin: 16px 0; } .meeting-link-header { font-size: 1rem; font-weight: 700; color: #1b5e20; margin-bottom: 10px; display: flex; align-items: center; justify-content: center; gap: 8px; } .meeting-link-logo { height: 32px; width: 32px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .meeting-link-url { font-family: 'Courier New', monospace; font-size: 0.9rem; font-weight: 600; color: #1a73e8; background: white; border: 1px solid #c8e6c9; border-radius: 8px; padding: 10px 14px; word-break: break-all; margin-bottom: 6px; } /* ----- Auto-sent row (Step 6) ------------------------------- */ .auto-sent-row { display: flex; gap: 10px; margin: 12px 0; flex-wrap: wrap; } .auto-sent-badge { flex: 1; min-width: 140px; border-radius: 10px; padding: 10px 14px; font-size: 0.82rem; font-weight: 600; text-align: center; } .auto-sent-badge.sent { background: #eef5fb; color: #1a5276; border: 1px solid #d0e8f8; } .auto-sent-badge.wa { background: #e8f5e9; color: #1b5e20; border: 1px solid #a5d6a7; } .auto-sent-sub { font-size: 0.72rem; font-weight: 400; margin-top: 4px; opacity: 0.85; } /* ----- Reminder note (Step 6) ------------------------------ */ .reminder-note { background: #fffde7; border: 1px solid #ffe082; border-radius: 8px; padding: 10px 14px; font-size: 0.82rem; color: #5d4037; margin: 10px 0; } /* ----- Confirmation box (Step 6) --------------------------- */ .confirmation-box { background: #f8f9fa; border: 1px solid #dee2e6; border-radius: 12px; padding: 16px; } .confirm-label { font-size: 0.68rem; color: #9e9e9e; font-weight: 700; letter-spacing: 0.5px; margin-bottom: 2px; } .booking-ref-badge { display: inline-block; background: var(--dark-blue); color: white; font-size: 0.78rem; padding: 4px 14px; border-radius: 20px; margin-top: 6px; margin-bottom: 4px; letter-spacing: 0.5px; } /* ----- Modal Header ---------------------------------------- */ /* ----- Modal Content (Master Container) -------------------- */ .modal-content { border-radius: 12px; overflow: hidden; } .modal-brand-strip { display: flex; align-items: center; justify-content: center; gap: 8px; background: var(--dark-blue); color: rgba(255,255,255,0.92); font-size: 0.72rem; font-weight: 500; letter-spacing: 0.5px; padding: 6px 16px; } .modal-brand-logo { font-weight: 700; color: #fff; font-size: 0.78rem; } .modal-brand-divider { opacity: 0.4; } .modal-brand-tagline { opacity: 0.8; font-size: 0.7rem; letter-spacing: 0.8px; text-transform: uppercase; } .modal-header { background: linear-gradient(90deg, #2f7ea1, #3b8fb3); color: white; padding: 12px 16px; border-bottom: 1px solid rgba(255,255,255,0.12); border-radius: 0; } .modal-header .modal-title { font-size: 1.15rem; font-weight: 700; letter-spacing: 0.2px; } .modal-header-sub { font-size: 0.8rem; color: rgba(255,255,255,0.78); font-weight: 400; margin-top: 1px; margin-bottom: 2px; } .modal-step-text { font-size: 0.75rem; color: rgba(255,255,255,0.85); display: block; } .modal-trust-line { font-size: 0.67rem; color: rgba(255,255,255,0.55); margin-top: 5px; letter-spacing: 0.3px; } .modal-close-btn { filter: invert(1); opacity: 0.65; transition: opacity 0.2s, transform 0.2s; align-self: flex-start; } .modal-close-btn:hover { opacity: 1; transform: scale(1.1); } /* ----- Countdown Box --------------------------------------- */ .countdown-box { background: linear-gradient(135deg, #fff8f0, #fff0eb); border: 1.5px solid var(--primary-orange); border-radius: 12px; padding: 14px 16px; text-align: center; margin-bottom: 14px; font-size: 0.88rem; } .countdown-timer { display: flex; justify-content: center; align-items: center; gap: 6px; margin-top: 10px; } .countdown-unit { display: flex; flex-direction: column; align-items: center; background: var(--primary-orange); color: #fff; border-radius: 8px; padding: 6px 12px; min-width: 52px; } .countdown-unit span { font-size: 1.5rem; font-weight: 700; line-height: 1; } .countdown-unit small { font-size: 0.58rem; text-transform: uppercase; letter-spacing: 0.6px; opacity: 0.9; margin-top: 2px; } .countdown-sep { font-size: 1.5rem; font-weight: 700; color: var(--primary-orange); margin-bottom: 18px; } /* ----- Trust / Legal Line ---------------------------------- */ .trust-legal-note { font-size: 0.78rem; color: #555; border-top: 1px dashed #ddd; padding-top: 10px; } /* ----- Responsive Design ------------------------------------ */ @media (max-width: 991px) { /* Hero Section - Tablet/Mobile */ .hero-company-name { font-size: 38px; } .hero-tagline { font-size: 22px; } .hero-section .col-lg-6:last-child { margin-top: 40px; } #heroCarousel { border-radius: 20px 0 20px 0; } .hero-image { height: 500px; } .cta-image-shape { width: 100%; max-width: 500px; height: 560px; border: 2px solid rgba(255, 255, 255, 0.25); } .cta-photo { height: 560px; } .cta-media-wrapper::before { width: 520px; height: 580px; background: linear-gradient(135deg, rgba(255, 107, 44, 0.12), rgba(255, 107, 44, 0.06)); } } @media (max-width: 768px) { .about-split { flex-direction: column; } .split-box { padding: 40px 25px; } .about-header h2 { font-size: 28px; } .why-header h2 { font-size: 26px; text-align: center; } .achievement-container { flex-direction: column; text-align: center; align-items: center; } .achievement-item h3 { font-size: 42px; } } @media (max-width: 576px) { /* Hero Section - Mobile */ .hero-logo { width: 45px; } .hero-company-name { font-size: 30px; } .hero-tagline { font-size: 18px; margin-bottom: 0.8rem !important; } .hero-description { font-size: 1rem; margin-bottom: 1rem !important; } .trust-signals { margin-top: 1rem !important; gap: 0.3rem; } .trust-item { font-size: 0.85rem; gap: 0.5rem; } .hero-section { padding: 40px 0 60px 0; } #heroCarousel { border-radius: 16px 0 16px 0; } .hero-image { height: 320px; } /* Tighten badge row spacing */ .hero-section .reveal[style*="flex-wrap"] { margin-bottom: 0.7rem !important; } .hero-section .reveal[style*="flex-wrap"]:nth-of-type(3) { margin-bottom: 0.8rem !important; } /* Tighten location text spacing */ .hero-section p[style*="margin-top"] { margin-top: 1rem !important; } .cta-image-shape { width: 100%; height: 430px; border: 2px solid rgba(255, 255, 255, 0.2); } .cta-photo { height: 430px; } .contact-box { width: 100%; position: relative; right: 0; bottom: 0; margin-top: 20px; } .contact-pill { white-space: normal; font-size: 12px; } .services-highlight { gap: 6px; margin: 14px 0 18px; } .highlight-item { font-size: 13px; } .trust-micro-line { font-size: 12px; } .cta-media-wrapper::before { width: 100%; max-width: 100%; height: 430px; background: linear-gradient(135deg, rgba(255, 107, 44, 0.1), rgba(255, 107, 44, 0.05)); padding: 20px 15px; bottom: 35%; } .carousel-caption h5 { font-size: 1.3rem; } .carousel-indicators { bottom: 15px; } .carousel-indicators [data-bs-target] { width: 10px; height: 10px; } .carousel-indicators .active { width: 12px; height: 12px; } /* Services Section - Mobile */ .service-image { max-width: 100%; } .section-label { text-align: center; font-size: 12px; } .service-title { font-size: 24px; text-align: center; margin-top: 1.5rem; } .service-list { margin-top: 1.5rem; } .service-list li { font-size: 16px; } .service-corner-image { width: 300px; right: -150px; } /* Badge scales down on mobile */ .premium-badge { font-size: 11px !important; padding: 5px 12px !important; } .premium-badge svg { width: 14px; height: 14px; } } /* ============================================================ CUSTOM ANIMATIONS - Section Wise ============================================================ */ /* ============================================================ TRUST & AUTHORITY SECTIONS STYLING ============================================================ */ /* Testimonials Section */ .testimonials-section .testimonial-card { transition: all 0.3s ease; } .testimonials-section .testimonial-card:hover { transform: translateY(-8px); box-shadow: 0 10px 35px rgba(0,0,0,0.12) !important; } .testimonial-card .rating { letter-spacing: 2px; } /* Trust Badge Cards Equal Height */ .trust-transparency-section .trust-badge-card { height: 100%; display: flex; flex-direction: column; align-items: center; } .trust-transparency-section .trust-badge-card h5 { min-height: 58px; display: flex; align-items: center; justify-content: center; } .trust-transparency-section .trust-badge-card p { margin-bottom: 0; } /* Trust Badge Cards Hover Effects */ .trust-badge-card:hover { background: rgba(255,255,255,0.15) !important; transform: translateY(-5px); box-shadow: 0 10px 30px rgba(0,0,0,0.2); } /* Success Stories Cards */ .success-story-card { transition: all 0.3s ease; } .success-story-card:hover { transform: translateX(5px); box-shadow: 0 8px 30px rgba(0,0,0,0.12) !important; } /* Cookie Consent Banner Animation + No-Flicker State */ #cookieConsent { opacity: 0; visibility: hidden; transform: translateY(14px); pointer-events: none; transition: opacity 0.28s ease, transform 0.28s ease, visibility 0.28s ease; } #cookieConsent.show { opacity: 1; visibility: visible; transform: translateY(0); pointer-events: auto; animation: slideUpBanner 0.4s ease-out; } body.cookie-banner-visible .whatsapp-float { bottom: 120px; } @keyframes slideUpBanner { from { transform: translateY(100%); opacity: 0; } to { transform: translateY(0); opacity: 1; } } /* Responsive Styles for New Sections */ @media (max-width: 768px) { .testimonials-section .testimonial-card { padding: 25px !important; } .testimonial-quote { font-size: 2rem !important; } .trust-badge-card { padding: 25px !important; } .trust-badge-card h5 { font-size: 1.1rem !important; } .success-story-card { padding: 25px !important; } .success-story-card h4 { font-size: 1.2rem !important; } #cookieConsent { padding: 20px 15px !important; } #cookieConsent h6 { font-size: 1rem !important; } #cookieConsent p { font-size: 0.85rem !important; } #cookieConsent .btn { width: 100%; margin-bottom: 10px; } } /* Section Tag Styling */ .section-tag { display: inline-block; position: relative; padding-bottom: 8px; } .section-tag::after { content: ''; position: absolute; bottom: 0; left: 0; width: 50%; height: 2px; background: var(--primary-orange); } /* Refund Policy Modal Enhancements */ #refundPolicyModal .modal-body ul li { margin-bottom: 12px; line-height: 1.8; } #refundPolicyModal .modal-body strong { color: var(--dark-blue); } /* Trust Statement Link Hover */ .testimonials-section a, .footer-disclaimer a { transition: all 0.3s ease; } .testimonials-section a:hover, .footer-disclaimer a:hover { opacity: 0.8; transform: translateX(2px); } /* Carousel Text Animation - Fade + Blur Remove */ .carousel-text-animate { animation: revealText var(--motion-speed) var(--motion-ease) forwards !important; } @keyframes revealText { from { opacity: 0; filter: blur(6px); } to { opacity: 1; filter: blur(0); } } /* Badge/Card Hover Lift Effect - Micro Interaction */ .badge-card { transition: all var(--motion-speed) var(--motion-ease); } .badge-card:hover { transform: translateY(-8px); box-shadow: 0 15px 35px rgba(0,0,0,0.15); } /* CTA Button Pulse Animation */ .cta-btn { position: relative; animation: pulse 2s infinite; transition: all 0.3s ease; border: 2px solid rgba(255, 107, 44, 0.3); box-shadow: 0 0 20px rgba(255, 107, 44, 0.3); } .cta-btn:hover { transform: translateY(-2px); box-shadow: 0 0 30px rgba(255, 107, 44, 0.5), 0 8px 20px rgba(0, 0, 0, 0.15) !important; border: 2px solid rgba(255, 107, 44, 0.6); } @keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(255, 107, 44, 0.7), 0 8px 20px rgba(255, 107, 44, 0.3); } 50% { box-shadow: 0 0 0 20px rgba(255, 107, 44, 0.1), 0 8px 20px rgba(255, 107, 44, 0.3); } 100% { box-shadow: 0 0 0 0 rgba(255, 107, 44, 0), 0 8px 20px rgba(255, 107, 44, 0.3); } } /* ============================================================ SCROLL REVEAL SYSTEM (Premium Effect) ============================================================ */ @keyframes fadeUpReveal { from { opacity: 0; transform: translateY(40px); } to { opacity: 1; transform: translateY(0); } } @keyframes slideRightReveal { from { opacity: 0; transform: translateX(-40px); } to { opacity: 1; transform: translateX(0); } } @keyframes slideLeftReveal { from { opacity: 0; transform: translateX(40px); } to { opacity: 1; transform: translateX(0); } } @keyframes zoomReveal { from { opacity: 0; transform: scale(0.95); } to { opacity: 1; transform: scale(1); } } .reveal { opacity: 0; transform: translateY(40px); } .reveal.active { animation: fadeUpReveal var(--motion-speed) var(--motion-ease) forwards; } /* Slide right for journey theme */ .reveal-slide-right { opacity: 0; transform: translateX(-40px); } .reveal-slide-right.active { animation: slideRightReveal var(--motion-speed) var(--motion-ease) forwards; } /* Slide left reveal */ .reveal-slide-left { opacity: 0; transform: translateX(40px); } .reveal-slide-left.active { animation: slideLeftReveal var(--motion-speed) var(--motion-ease) forwards; } /* Zoom in reveal for importance */ .reveal-zoom { opacity: 0; transform: scale(0.95); } .reveal-zoom.active { animation: zoomReveal var(--motion-speed) var(--motion-ease) forwards; } /* ============================================================ STAGGER SYSTEM (Ultra Professional) ============================================================ */ /* Stagger for cards, items, etc. - using animation-delay */ .reveal.stagger-1.active { animation-delay: calc(var(--motion-delay-step) * 1); } .reveal.stagger-2.active { animation-delay: calc(var(--motion-delay-step) * 2); } .reveal.stagger-3.active { animation-delay: calc(var(--motion-delay-step) * 3); } .reveal.stagger-4.active { animation-delay: calc(var(--motion-delay-step) * 4); } .reveal.stagger-5.active { animation-delay: calc(var(--motion-delay-step) * 5); } .reveal.stagger-6.active { animation-delay: calc(var(--motion-delay-step) * 6); } /* Stagger for slide right elements */ .reveal-slide-right.stagger-1.active { animation-delay: calc(var(--motion-delay-step) * 1); } .reveal-slide-right.stagger-2.active { animation-delay: calc(var(--motion-delay-step) * 2); } .reveal-slide-right.stagger-3.active { animation-delay: calc(var(--motion-delay-step) * 3); } .reveal-slide-right.stagger-4.active { animation-delay: calc(var(--motion-delay-step) * 4); } .reveal-slide-right.stagger-5.active { animation-delay: calc(var(--motion-delay-step) * 5); } /* Stagger for slide left elements */ .reveal-slide-left.stagger-1.active { animation-delay: calc(var(--motion-delay-step) * 1); } .reveal-slide-left.stagger-2.active { animation-delay: calc(var(--motion-delay-step) * 2); } .reveal-slide-left.stagger-3.active { animation-delay: calc(var(--motion-delay-step) * 3); } .reveal-slide-left.stagger-4.active { animation-delay: calc(var(--motion-delay-step) * 4); } .reveal-slide-left.stagger-5.active { animation-delay: calc(var(--motion-delay-step) * 5); } /* Stagger for zoom elements */ .reveal-zoom.stagger-1.active { animation-delay: calc(var(--motion-delay-step) * 1); } .reveal-zoom.stagger-2.active { animation-delay: calc(var(--motion-delay-step) * 2); } .reveal-zoom.stagger-3.active { animation-delay: calc(var(--motion-delay-step) * 3); } .reveal-zoom.stagger-4.active { animation-delay: calc(var(--motion-delay-step) * 4); } /* ============================================================ MICRO-INTERACTIONS ============================================================ */ /* Icon Hover Scale */ .icon { transition: all var(--motion-speed) var(--motion-ease); } .icon:hover { transform: scale(1.1); } .bi:hover { transition: all var(--motion-speed) var(--motion-ease); transform: scale(1.15); } /* ============================================================ IMAGE MOTION RULE (Apple-style - Slow Zoom) ============================================================ */ .image-wrapper { overflow: hidden; } .image-wrapper img, .guide-img img, .service-image, .why-image img { transition: transform 6s ease-in-out; will-change: transform; } .image-wrapper:hover img, .guide-card:hover .guide-img img, .service-image:hover, .why-image:hover img { transform: scale(1.05); } /* Hero image smooth entrance */ .hero-image { transition: transform var(--motion-speed) var(--motion-ease); } /* ============================================================ WHATSAPP BUTTON FLOATING ANIMATION ============================================================ */ .whatsapp-float { position: fixed; bottom: 30px; right: 30px; background-color: #25D366; color: white; border-radius: 50%; width: 60px; height: 60px; display: flex; align-items: center; justify-content: center; font-size: 30px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); z-index: 999; text-decoration: none; animation: float 3s ease-in-out infinite; } @keyframes float { 0% { transform: translateY(0px); } 50% { transform: translateY(-6px); } 100% { transform: translateY(0px); } } .whatsapp-float:hover { background-color: #20BA5E; box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2); animation: float 2s ease-in-out infinite; } /* ============================================================ PROCESS STEPS & COUNTER ANIMATIONS ============================================================ */ .process-step { transition: all var(--motion-speed) var(--motion-ease); } .process-step:hover { transform: translateY(-5px); box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1); } /* Counter Animation for Achievement Counts */ .achievement-count { display: inline-block; animation: fadeInUp var(--motion-speed) var(--motion-ease) forwards; } @keyframes fadeInUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } /* ============================================================ SMOOTH TRANSITIONS FOR COMMON ELEMENTS ============================================================ */ .service-list li { transition: all var(--motion-speed) var(--motion-ease); } .service-list li:hover { transform: translateX(8px); } .achievement-item { transition: all var(--motion-speed) var(--motion-ease); } .achievement-item:hover { transform: translateY(-10px); } .feature-list li { transition: all var(--motion-speed) var(--motion-ease); } .feature-list li:hover { transform: translateX(6px); } /* ----- Homepage Conversion Upgrade --------------------------- */ .hero-section { background: var(--light-pink); } .hero-eyebrow { display: inline-flex; align-items: center; gap: 8px; font-size: 0.78rem; letter-spacing: 0.09em; text-transform: uppercase; font-weight: 700; color: #2f5a8a; margin-bottom: 14px; } .hero-main-headline { font-size: clamp(2rem, 4vw, 3.2rem); line-height: 1.15; color: #1A1A1A; margin-bottom: 16px; max-width: 640px; } .hero-subheadline { font-size: 1.18rem; line-height: 1.6; color: #415974; font-weight: 500; max-width: 620px; margin-bottom: 12px; } .hero-cta-group { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 16px; } .hero-whatsapp-btn { border-radius: 999px; border: 1px solid #22b85d; color: #14863f; font-weight: 700; padding: 13px 24px; } .hero-whatsapp-btn:hover { background: #1ea855; border-color: #1ea855; color: #ffffff; } .hero-mini-trust { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 14px; } .hero-mini-trust span { display: inline-flex; align-items: center; gap: 8px; font-size: 0.92rem; color: #f47a52; font-weight: 700; background: #fff7f2; border: 1px solid #f2ddd2; border-radius: 999px; padding: 8px 16px; line-height: 1; } .hero-mini-trust i { color: #f47a52; font-size: 0.95rem; } .hero-country-chips { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 14px; justify-content: center; } .hero-proof-card { margin-top: 18px; background: #ffffff; border: 1px solid #dfe8f4; border-radius: 16px; padding: 20px; box-shadow: 0 12px 30px rgba(22, 38, 61, 0.08); } .hero-proof-card h3 { font-size: 1.1rem; color: #1a2f4a; margin-bottom: 12px; } .hero-proof-card ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; } .hero-proof-card li { display: flex; align-items: flex-start; gap: 8px; color: #4d5f74; font-weight: 500; line-height: 1.55; } .hero-proof-card li i { color: var(--primary-orange); margin-top: 2px; } .conversion-metrics-section { padding: 24px 0 26px; background: #ffffff; } .metric-card { height: 100%; border: 1px solid #dde9f8; border-radius: 16px; background: #f7fbff; padding: 22px; text-align: center; } .metric-icon { width: 48px; height: 48px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; background: #e9f2ff; color: #2264ad; font-size: 1.4rem; margin-bottom: 10px; } .metric-card h3 { margin: 0 0 7px; color: #112a44; font-size: 1.8rem; } .metric-card p { margin: 0; color: #53657a; line-height: 1.5; } .conversion-testimonials-section, .conversion-process-section { padding: 74px 0; background: #f9fbfe; } .conversion-process-section { background: #ffffff; border-top: 1px solid #e7edf5; border-bottom: 1px solid #e7edf5; } .conversion-section-title { color: #172c45; font-size: clamp(1.6rem, 3vw, 2.35rem); margin-top: 10px; } .conversion-testimonial-card { height: 100%; border-radius: 16px; border: 1px solid #deebf9; background: #ffffff; padding: 24px; box-shadow: 0 10px 30px rgba(18, 42, 72, 0.08); } .testimonial-photo { width: 92px; height: 92px; border-radius: 50%; object-fit: cover; object-position: center 18%; display: block; aspect-ratio: 1 / 1; border: 3px solid #f3f8ff; margin-bottom: 12px; } .conversion-testimonial-card h4 { margin: 0; color: #132940; font-size: 1.1rem; } .testimonial-rating { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 8px 0 8px; flex-wrap: wrap; } .testimonial-rating-label { display: inline-flex; align-items: center; gap: 6px; color: #5c6f84; font-size: 0.82rem; font-weight: 600; } .testimonial-rating-label i { color: #4285f4; } .testimonial-stars { color: #f4b400; letter-spacing: 1px; font-size: 0.92rem; line-height: 1; } .testimonial-role { margin: 6px 0 10px; color: #dd6b20; font-size: 0.87rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; } .conversion-testimonial-card p { color: #4b5f76; line-height: 1.7; margin-bottom: 0; } .conversion-process-card { position: relative; height: 100%; background: #f7fbff; border: 1px solid #dce8f7; border-radius: 16px; padding: 24px 20px 20px; text-align: left; } .process-count { position: absolute; top: -12px; right: 14px; width: 34px; height: 34px; border-radius: 50%; background: #173255; color: #fff; display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: 0.95rem; } .conversion-process-card i { font-size: 1.6rem; color: #1a5ea0; margin-bottom: 12px; display: inline-block; } .conversion-process-card h4 { color: #163151; font-size: 1.06rem; margin-bottom: 8px; } .conversion-process-card p { margin: 0; color: #526579; line-height: 1.6; } .whatsapp-float { right: 18px; bottom: 18px; width: auto; min-width: 62px; height: 56px; padding: 0 16px; border-radius: 999px; gap: 10px; font-size: 1.75rem; animation: float 2.8s ease-in-out infinite; } .whatsapp-float-text { font-size: 0.88rem; font-weight: 700; letter-spacing: 0.01em; color: #ffffff; white-space: nowrap; } @media (max-width: 991.98px) { .hero-main-headline { font-size: clamp(1.8rem, 6vw, 2.45rem); } .hero-subheadline { font-size: 1.05rem; } .conversion-testimonials-section, .conversion-process-section { padding: 58px 0; } } @media (max-width: 575.98px) { .hero-cta-group .btn { width: 100%; } .whatsapp-float { height: 50px; padding: 0 14px; right: 14px; bottom: 14px; font-size: 1.5rem; } .whatsapp-float-text { font-size: 0.8rem; } } /* ----- Lead Capture Form ------------------------------------ */ .lead-form-card { background: #ffffff; border: 1px solid #dce8f7; border-radius: 16px; box-shadow: 0 10px 28px rgba(22, 44, 73, 0.08); padding: 18px; } .lead-form-title { margin-bottom: 12px; font-size: 1.02rem; color: #172f4a; } .lead-form-card .form-label { margin-bottom: 4px; font-weight: 600; color: #334a63; font-size: 0.9rem; } .lead-form-card .form-control, .lead-form-card .form-select { border-radius: 10px; border: 1px solid #cfdeef; padding: 10px 12px; } .lead-form-card .form-control:focus, .lead-form-card .form-select:focus { border-color: #7aa5d4; box-shadow: 0 0 0 0.2rem rgba(26, 95, 122, 0.15); } .lead-form-card .form-check-label { color: #51667c; font-size: 0.86rem; } .lead-submit-btn { padding: 11px 18px; font-size: 0.95rem; } .lead-form-feedback { min-height: 20px; font-size: 0.86rem; font-weight: 600; } .lead-form-feedback.is-success { color: #18753d; } .lead-form-feedback.is-error { color: #b42318; } .lead-form-footer { background: rgba(255, 255, 255, 0.08); border-color: rgba(255, 255, 255, 0.18); box-shadow: none; } .lead-form-footer .lead-form-title, .lead-form-footer .form-label, .lead-form-footer .form-check-label { color: #eef4fb; } .lead-form-footer .form-control, .lead-form-footer .form-select { background: rgba(255, 255, 255, 0.96); } .footer-lead-form-wrap .lead-form-card { margin-top: 4px; } @media (max-width: 991.98px) { .lead-form-card { padding: 16px; } } /* ----- Trust Building Sections ------------------------------ */ .credibility-section, .real-photos-section, .trust-faq-section { padding: 76px 0; } .credibility-section { background: linear-gradient(180deg, #ffffff 0%, #f7fbff 100%); } .real-photos-section { background: #ffffff; border-top: 1px solid #e8eff7; border-bottom: 1px solid #e8eff7; } .trust-faq-section { background: #f8fbff; } .trust-section-title { color: #122b47; margin-top: 10px; font-size: clamp(1.6rem, 3vw, 2.25rem); } .credibility-card { height: 100%; border-radius: 16px; border: 1px solid #d8e6f7; background: #ffffff; box-shadow: 0 12px 28px rgba(16, 43, 72, 0.08); padding: 24px; } .credibility-card h3 { color: #1a3a5f; font-size: 1.2rem; margin-bottom: 14px; } .credibility-line { color: #4c6078; line-height: 1.7; margin-bottom: 10px; } .map-card { height: 100%; min-height: 360px; border-radius: 16px; overflow: hidden; border: 1px solid #d8e6f7; box-shadow: 0 12px 28px rgba(16, 43, 72, 0.08); background: #eaf2fc; } .verification-pill { display: inline-flex; align-items: center; gap: 8px; padding: 8px 13px; margin: 4px 6px 4px 0; border-radius: 999px; background: #eff6ff; color: #1d4f84; border: 1px solid #cfe0f6; font-size: 0.85rem; font-weight: 700; } .verification-pill i { color: var(--primary-orange); } .photo-tile { position: relative; border-radius: 14px; overflow: hidden; border: 1px solid #d9e6f7; box-shadow: 0 10px 24px rgba(18, 44, 76, 0.1); } .photo-tile img { width: 100%; height: 290px; object-fit: cover; transition: transform 0.5s ease; } .photo-tile:hover img { transform: scale(1.04); } .photo-caption { position: absolute; left: 0; right: 0; bottom: 0; padding: 12px 14px; background: linear-gradient(180deg, rgba(8, 21, 35, 0) 0%, rgba(8, 21, 35, 0.82) 100%); color: #ffffff; font-weight: 600; } .trust-faq-accordion .accordion-item { border: 1px solid #d5e3f4; border-radius: 12px; overflow: hidden; margin-bottom: 12px; } .trust-faq-accordion .accordion-button { background: #ffffff; color: #193755; font-weight: 700; box-shadow: none; } .trust-faq-accordion .accordion-button:not(.collapsed) { background: #eef5ff; color: #12355d; } .trust-faq-accordion .accordion-body { color: #4f6379; line-height: 1.7; background: #ffffff; } @media (max-width: 991.98px) { .credibility-section, .real-photos-section, .trust-faq-section { padding: 58px 0; } .map-card { min-height: 300px; } .photo-tile img { height: 250px; } } @media (max-width: 575.98px) { .credibility-card { padding: 18px; } .photo-tile img { height: 220px; } .verification-pill { width: 100%; justify-content: center; } }