/* ========================================================== BRILLSPARK — PREMIUM OVERRIDE STYLESHEET Loaded after main.css — do not edit main.css Colour: #f8e13c yellow | #000000 black | #ffffff white WCAG AA compliant ========================================================== */ /* ================================================================ GLOBAL TYPOGRAPHY SYSTEM Reference: "Why Choose BrillSpark" section — index.html All values extracted from .bs-why-label / .bs-why-heading / .bs-why-subtext / .bs-why-card-title / .bs-why-card-text Font: DM Sans (already enforced site-wide) ================================================================ */ /* ---- TYPOGRAPHY TOKENS ---- */ :root { /* — Font family — */ --font-primary: 'DM Sans', sans-serif; /* — Type scale (anchored to .bs-why-heading reference H2) — */ --fs-hero: clamp(2.5rem, 5.5vw, 4.5rem); /* H1 — hero/page title */ --fs-h2: clamp(1.8rem, 3.5vw, 2.8rem); /* H2 — section headings ← REFERENCE */ --fs-h3: clamp(1.35rem, 2.2vw, 2rem); /* H3 — subsection headings */ --fs-h4: 1.15rem; /* H4 — card titles ← REFERENCE */ --fs-h5: 0.95rem; /* H5 — minor headings */ --fs-h6: 0.82rem; /* H6 — micro labels */ --fs-body: 0.95rem; /* p — body copy ← REFERENCE */ --fs-small: 0.88rem; /* small/caption ← REFERENCE */ --fs-label: 0.75rem; /* eyebrow labels ← REFERENCE */ /* — Font weights — */ --fw-regular: 400; --fw-semibold: 600; /* labels ← REFERENCE */ --fw-bold: 700; /* headings ← REFERENCE */ --fw-extrabold: 800; /* — Line heights — */ --lh-display: 1.1; /* very large H1 display text */ --lh-heading: 1.25; /* section H2 headings ← REFERENCE */ --lh-h4: 1.3; /* card/component titles ← REFERENCE */ --lh-body: 1.7; /* body paragraphs ← REFERENCE */ --lh-small: 1.75; /* secondary/card text ← REFERENCE */ /* — Letter spacing — */ --ls-tight: -0.02em; /* large display headings */ --ls-normal: normal; --ls-label: 0.14em; /* eyebrow labels ← REFERENCE */ --ls-number: 0.12em; /* numbered items ← REFERENCE */ /* — Vertical spacing — */ --sp-label-gap: 20px; /* label → heading ← REFERENCE */ --sp-heading-gap: 16px; /* heading → body ← REFERENCE */ --sp-section-gap: 64px; /* body → content ← REFERENCE */ --sp-card-gap: 16px; /* card internal gap ← REFERENCE */ --sp-section-y: clamp(60px, 8vw, 100px); /* section top/bottom padding */ } /* ---- GLOBAL BASE ---- */ body { font-family: var(--font-primary) !important; font-size: var(--fs-body) !important; line-height: var(--lh-body) !important; } /* ---- HEADING HIERARCHY ---- */ h1, .h1 { font-family: var(--font-primary) !important; font-size: var(--fs-hero) !important; font-weight: var(--fw-bold) !important; line-height: var(--lh-display) !important; letter-spacing: var(--ls-tight) !important; margin-bottom: var(--sp-heading-gap) !important; } h2, .h2 { font-family: var(--font-primary) !important; font-size: var(--fs-h2) !important; font-weight: var(--fw-bold) !important; line-height: var(--lh-heading) !important; letter-spacing: var(--ls-normal) !important; margin-bottom: var(--sp-heading-gap) !important; } h3, .h3 { font-family: var(--font-primary) !important; font-size: var(--fs-h3) !important; font-weight: var(--fw-bold) !important; line-height: var(--lh-heading) !important; letter-spacing: var(--ls-normal) !important; margin-bottom: var(--sp-heading-gap) !important; } h4, .h4 { font-family: var(--font-primary) !important; font-size: var(--fs-h4) !important; font-weight: var(--fw-bold) !important; line-height: var(--lh-h4) !important; letter-spacing: var(--ls-normal) !important; margin-bottom: var(--sp-card-gap) !important; } h5, .h5 { font-family: var(--font-primary) !important; font-size: var(--fs-h5) !important; font-weight: var(--fw-semibold) !important; line-height: var(--lh-h4) !important; letter-spacing: var(--ls-normal) !important; margin-bottom: var(--sp-card-gap) !important; } h6, .h6 { font-family: var(--font-primary) !important; font-size: var(--fs-h6) !important; font-weight: var(--fw-semibold) !important; line-height: var(--lh-h4) !important; letter-spacing: var(--ls-label) !important; text-transform: uppercase !important; margin-bottom: var(--sp-card-gap) !important; } /* ---- PARAGRAPHS ---- */ p { font-family: var(--font-primary) !important; font-size: var(--fs-body) !important; line-height: var(--lh-body) !important; margin-bottom: var(--sp-heading-gap) !important; } small, .text-sm, figcaption, caption { font-size: var(--fs-small) !important; line-height: var(--lh-small) !important; } /* ---- SECTION LABEL / EYEBROW PATTERN ---- */ /* Matches .bs-why-label reference: 0.75rem, 600, 0.14em, uppercase */ .section-label, .at-section-sub-title, .bs-section-label, .at-sub-title { font-family: var(--font-primary) !important; font-size: var(--fs-label) !important; font-weight: var(--fw-semibold) !important; letter-spacing: var(--ls-label) !important; text-transform: uppercase !important; line-height: 1.4 !important; margin-bottom: var(--sp-label-gap) !important; } /* ---- SEMANTIC SECTION HEADING CLASSES ---- */ /* All major section H2-equivalents use the reference scale */ .at-section-title, .section-title, .alt-section-title, .bs-service-left-title, .bs-testimonial-heading { font-size: var(--fs-h2) !important; font-weight: var(--fw-bold) !important; line-height: var(--lh-heading) !important; margin-bottom: var(--sp-heading-gap) !important; } /* ---- SECTION VERTICAL SPACING ---- */ /* Standardise heading-to-body gaps across all sections */ .at-section-title + p, .section-title + p, .alt-section-title + p, .bs-service-left-title + p, h2 + p, h3 + p { margin-top: 0 !important; } /* ================================================================ END GLOBAL TYPOGRAPHY SYSTEM Page-specific overrides below this point take precedence ================================================================ */ /* ---- 0. SKIP NAVIGATION ---- */ .skip-to-content { position: absolute; top: -100%; left: 16px; z-index: 99999; padding: 12px 20px; background: #f8e13c; color: #000000; font-weight: 700; font-size: 0.9rem; border-radius: 4px; text-decoration: none; transition: top 0.2s ease; } .skip-to-content:focus { top: 16px; } /* ---- 1. CURSOR RESTORE ---- */ html, body, *, *::before, *::after { cursor: auto !important; } a, button, [role="button"], .at-btn, .bs-nav-btn, .bs-accordion-header, .at-faq-button, label, .at-search-close, .close-btn, .hamburger-close-btn, .hamburger-open-btn, .back-to-top-btn, .at-menu-bar, .at-search-form-btn { cursor: pointer !important; } #magic-cursor, #magic-cursor #ball { display: none !important; opacity: 0 !important; pointer-events: none !important; } /* ---- 2. FOCUS VISIBLE ---- */ :focus-visible { outline: 2px solid #f8e13c !important; outline-offset: 3px !important; } :focus:not(:focus-visible) { outline: none !important; } /* ---- 3. ANIMATIONS — restored ---- */ /* ---- 4. STICKY NAVBAR ---- */ .at-header-area { position: fixed !important; top: 0 !important; left: 0 !important; right: 0 !important; z-index: 9990 !important; background: #000000 !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important; padding: 16px 0 !important; transition: none !important; } /* Navbar inner container — horizontal padding so content breathes from edges */ .at-header-area .container { padding-left: clamp(24px, 3vw, 56px) !important; padding-right: clamp(24px, 3vw, 56px) !important; } /* Push content below sticky navbar */ #smooth-wrapper { padding-top: 72px; } /* Remove the floating hamburger sticky button */ #header-sticky.hamburger-sticky-menu { display: none !important; } /* ==================================================== HAMBURGER MENU — mobile (< 1200px) ==================================================== */ /* Button shell */ .at-menu-bar.at-header-sidebar-btn { display: none; /* hidden by default; shown below 1200px */ flex-direction: column; gap: 5px; align-items: center; justify-content: center; background: transparent; border: none; padding: 4px; width: 38px; height: 38px; cursor: pointer !important; } /* The three bar lines */ .hamburger-line { display: block; width: 24px; height: 2px; background: #ffffff; border-radius: 2px; transition: transform 0.32s cubic-bezier(0.4,0,0.2,1), opacity 0.22s ease, width 0.22s ease; transform-origin: center; } /* ---- Animate into X when menu is open ---- */ .at-menu-bar.at-header-sidebar-btn.menu-open .hamburger-line:nth-child(1) { transform: translateY(7px) rotate(45deg); } .at-menu-bar.at-header-sidebar-btn.menu-open .hamburger-line:nth-child(2) { opacity: 0; transform: scaleX(0); } .at-menu-bar.at-header-sidebar-btn.menu-open .hamburger-line:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } /* Show on mobile/tablet only */ @media (max-width: 1199px) { .at-menu-bar.at-header-sidebar-btn { display: flex !important; } } /* ==================================================== MOBILE OFFCANVAS SIDEBAR ==================================================== */ /* Stack above all page content */ .at-offcanvas-area { z-index: 99999 !important; } /* Offcanvas panel — slides in from RIGHT (matches main.css animation) We only adjust sizing and colours; the right:-100%→right:0 transition is already handled by main.css + .opened class via JS */ .at-offcanvas { z-index: 99999 !important; background: #000000 !important; max-width: 340px !important; width: 88vw !important; padding: 40px 32px !important; box-shadow: -4px 0 40px rgba(0,0,0,0.55) !important; } @media (max-width: 575px) { .at-offcanvas { max-width: 100vw !important; width: 100vw !important; padding: 32px 24px !important; } } /* Overlay — darkens page behind the drawer */ .body-overlay { background: rgba(0,0,0,0.65) !important; z-index: 99998 !important; backdrop-filter: blur(3px) !important; -webkit-backdrop-filter: blur(3px) !important; transition: opacity 0.35s ease, visibility 0.35s ease !important; } .body-overlay.apply { opacity: 1 !important; visibility: visible !important; cursor: pointer !important; } /* ==================================================== OFFCANVAS NAV LINK STYLES ==================================================== */ .at-offcanvas-menu { padding: 20px 0 !important; } .at-offcanvas-menu nav ul { list-style: none !important; padding: 0 !important; margin: 0 !important; } .at-offcanvas-menu nav ul li { border-bottom: 1px solid rgba(255,255,255,0.1) !important; } .at-offcanvas-menu nav ul li a { display: block !important; padding: 14px 0 !important; font-size: 1.05rem !important; font-weight: 700 !important; color: #ffffff !important; text-transform: uppercase !important; letter-spacing: 0.1em !important; text-decoration: none !important; transition: color 0.2s ease, padding-left 0.2s ease !important; } .at-offcanvas-menu nav ul li a:hover, .at-offcanvas-menu nav ul li.current > a { color: #f8e13c !important; padding-left: 6px !important; } /* Navbar logo size */ .at-header-logo img, .at-header-logo a img { height: 38px !important; width: auto !important; object-fit: contain !important; } /* Nav menu list — add balanced gap between items */ .at-main-menu nav ul { display: flex !important; align-items: center !important; gap: 40px !important; list-style: none !important; margin: 0 !important; padding: 0 !important; } /* Nav links — black text, yellow on hover */ .at-main-menu nav ul li a { color: #ffffff !important; font-size: 0.95rem !important; font-weight: 600 !important; font-family: 'DM Sans', sans-serif !important; letter-spacing: 0.08em !important; text-transform: uppercase !important; padding: 4px 0 !important; transition: color 0.2s ease !important; white-space: nowrap !important; } .at-main-menu nav ul li a:hover, .at-main-menu nav ul li.current > a { color: #f8e13c !important; } /* ---- 5. GLOBAL BACKGROUND — BLACK ---- */ body, main, main.bg-neutral-0, .bg-neutral-0 { background-color: #000000 !important; } /* ---- 6. UNIVERSAL BUTTON SYSTEM — PILL SHAPE ---- */ /* All .at-btn — consistent oval/pill border-radius */ .at-btn { border-radius: 50px !important; padding: 14px 32px !important; font-size: 0.82rem !important; font-weight: 700 !important; font-family: 'DM Sans', sans-serif !important; letter-spacing: 0.08em !important; text-transform: uppercase !important; transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease !important; display: inline-flex !important; align-items: center !important; gap: 10px !important; } /* Primary buttons — yellow fill */ .at-btn:not(.common-black):not(.bg-white):not(.at-btn-border-white):not(.at-btn-circle):not(.at-btn-border) { background: #f8e13c !important; color: #000000 !important; border: 1.5px solid #f8e13c !important; } .at-btn:not(.common-black):not(.bg-white):not(.at-btn-border-white):not(.at-btn-circle):not(.at-btn-border):hover { background: #ddc818 !important; border-color: #ddc818 !important; box-shadow: 0 4px 20px rgba(248, 225, 60, 0.30) !important; } /* Outlined yellow buttons */ .at-btn-border-white, .at-btn.at-btn-border-white { background: transparent !important; border: 1.5px solid #f8e13c !important; color: #f8e13c !important; border-radius: 50px !important; } .at-btn-border-white:hover { background: #f8e13c !important; color: #000000 !important; box-shadow: 0 4px 20px rgba(248, 225, 60, 0.30) !important; } .at-btn-border-white .text-1, .at-btn-border-white .text-2 { color: #f8e13c !important; } .at-btn-border-white:hover .text-1, .at-btn-border-white:hover .text-2 { color: #000000 !important; } /* Hero white button */ .at-hero-btn .at-btn.bg-white { background: #f8e13c !important; color: #000000 !important; border: 1.5px solid #f8e13c !important; border-radius: 50px !important; } .at-hero-btn .at-btn.bg-white:hover { background: #ddc818 !important; border-color: #ddc818 !important; } /* Circular icon buttons */ .at-btn-circle { border-radius: 50% !important; width: 48px !important; height: 48px !important; padding: 0 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; border: 1.5px solid rgba(255,255,255,0.20) !important; background: transparent !important; color: #ffffff !important; } .at-btn-circle:hover { background: #f8e13c !important; border-color: #f8e13c !important; color: #000000 !important; } /* Nav buttons (testimonial prev/next) */ .bs-nav-btn { border-radius: 50px !important; } /* ---- 7. SECTION COLOR ALTERNATING PATTERN ---- */ /* Section order on index.html: 1. Hero → BLACK bg, white text, yellow accent 2. About → YELLOW bg, black text 3. Brand strip → BLACK bg 4. Solutions → BLACK bg, white text 5. Portfolio → YELLOW bg, black text [hidden] 6. Testimonials → BLACK bg, white text 7. Why Choose → YELLOW bg, black text 8. Counters → BLACK bg, white text 9. Ticker 2 → YELLOW bg, black text 10. FAQ → BLACK bg, white text 11. CTA → BLACK bg, white text */ /* Section 1 — HERO: black */ /* ================================================ HERO AREA — Full CSS ================================================ */ /* ================================================ HERO AREA — Full CSS ================================================ */ /* Base hero */ .at-hero-area { background: #000000 !important; min-height: 100vh !important; height: auto !important; display: flex !important; align-items: center !important; position: relative !important; overflow: visible !important; padding-top: 120px !important; padding-bottom: 80px !important; } /* Remove old background image */ .at-hero-area.bg-primary-1 { background-image: none !important; } /* Kill spacing utility class gap */ .at-hero-spacing { padding-top: 0 !important; padding-bottom: 0 !important; margin-top: 0 !important; margin-bottom: 0 !important; } /* Hide old image layers */ .at-hero-bg, .at-hero-area .layer { display: none !important; } /* Abstract SVG — full cover right side */ .at-hero-abstract { position: absolute !important; top: 0 !important; right: -100px !important; width: 65% !important; height: 100% !important; pointer-events: none !important; z-index: 0 !important; } .at-hero-abstract svg { width: 100% !important; height: 100% !important; } /* Hero container */ .at-hero-area .container { position: relative !important; z-index: 2 !important; padding-top: 0 !important; padding-bottom: 0 !important; padding-left: clamp(24px, 6vw, 100px) !important; width: 100% !important; } /* Hero row — full height stretch */ .at-hero-area .row { min-height: unset !important; align-items: center !important; width: 100% !important; } /* Hero content block */ .at-hero-content { margin-top: 0 !important; padding-top: 0 !important; margin-bottom: 0 !important; } /* Hero title */ .at-hero-title { font-size: clamp(2.2rem, 4.5vw, 3.8rem) !important; text-transform: none; font-weight: 700 !important; line-height: 1.05 !important; color: #ffffff !important; margin-bottom: 8px !important; } /* Hero description */ .at-hero-desc { font-size: 1.05rem !important; line-height: 1.75 !important; color: rgba(255, 255, 255, 0.75) !important; max-width: 560px !important; margin-bottom: 8px !important; } /* Hero button */ .at-hero-btn { padding-top: 24px !important; } .at-hero-btn .at-btn { background: #f8e13c !important; color: #000000 !important; font-weight: 700 !important; font-size: 0.9rem !important; letter-spacing: 0.05em !important; padding: 14px 36px !important; border-radius: 50px !important; text-decoration: none !important; display: inline-block !important; transition: background 0.3s, color 0.3s !important; } .at-hero-btn .at-btn:hover { background: #ffffff !important; color: #000000 !important; } /* Section 2 — ABOUT: yellow */ .at-about-area { background: #f8e13c !important; } .at-about-area .at-section-title, .at-about-area h1, .at-about-area h2, .at-about-area h3, .at-about-area h4, .at-about-area h5 { color: #000000 !important; } /* Body text in about — semi-transparent black, but NOT buttons */ .at-about-area p { color: rgba(0,0,0,0.70) !important; } /* About label ("About Us") — black border, black text on yellow */ .at-about-area .at-btn.common-black { color: #000000 !important; border: 1.5px solid #000000 !important; background: transparent !important; } .at-about-area .at-btn.common-black span, .at-about-area .at-btn.common-black .text-1, .at-about-area .at-btn.common-black .text-2, .at-about-area .at-btn.common-black i, .at-about-area .at-btn.common-black svg path { color: #000000 !important; stroke: #000000 !important; } /* About CTA button — black fill, yellow text, fully visible */ /* About CTA button — black fill, yellow text, fully visible */ .at-about-area .at-btn:not(.common-black) { background: #000000 !important; color: #f8e13c !important; border-color: #000000 !important; } .at-about-area .at-btn:not(.common-black) span, .at-about-area .at-btn:not(.common-black) .text-1, .at-about-area .at-btn:not(.common-black) .text-2 { color: #f8e13c !important; } .at-about-area .at-btn:not(.common-black):hover { background: #1a1a1a !important; border-color: #1a1a1a !important; } /* Both brand areas — white background */ .at-brand-area { background: #ffffff !important; } .at-brand-area.at_fade_anim { padding: 36px 0 !important; } .at-brand-area .brand-item { opacity: 1 !important; filter: none !important; } /* Pure CSS brand logo marquee */ .bs-brand-marquee-wrap { overflow: hidden; width: 100%; } .bs-brand-marquee-track { display: flex; align-items: center; gap: 80px; width: max-content; animation: bs-brand-scroll 22s linear infinite; } .bs-brand-logo { flex-shrink: 0; display: flex; align-items: center; } .bs-brand-logo img { height: 52px; width: auto; object-fit: contain; display: block; } @keyframes bs-brand-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } } /* Pure CSS text ticker (services strip) */ .bs-text-ticker-area { background: #ffffff !important; padding: 24px 0 !important; border-top: none !important; border-bottom: none !important; } .bs-text-ticker-wrap { overflow: hidden; width: 100%; } .bs-text-ticker-track { display: flex; align-items: center; gap: 32px; width: max-content; animation: bs-text-scroll 30s linear infinite; } .bs-ticker-item { font-size: 1.15rem; font-weight: 700; font-family: 'DM Sans', sans-serif; color: #000000; white-space: nowrap; flex-shrink: 0; } .bs-ticker-star { flex-shrink: 0; display: block; } @keyframes bs-text-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } } /* REMOVE gradient completely */ .at-brand-area::before, .at-brand-area::after { display: none !important; content: none !important; } /* Text color */ .at-brand-area .carouselTicker__list h3, .at-brand-area .carouselTicker__list .h5 { color: #000000 !important; } /* Section 4 — SOLUTIONS: black (already handled below) */ /* Section 6 — TESTIMONIALS: black */ /* Section 7 — WHY CHOOSE: yellow */ /* Section 8 — COUNTERS: black */ /* Section 9 — TICKER 2: white background */ /* Section 10 — FAQ: yellow */ .alt-faq-area { background: #f8e13c !important; } .alt-faq-area .at-section-title, .alt-faq-area h1, .alt-faq-area h2, .alt-faq-area h3 { color: #000000 !important; } .alt-faq-area .at-btn.common-black { color: #000000 !important; } .alt-faq-area .at-faq-item { background: #ffffff !important; border-color: rgba(0,0,0,0.10) !important; } .alt-faq-area .at-faq-button { color: #000000 !important; } .alt-faq-area .at-faq-body p { color: #000000 !important; } /* number badge color handled in section 14 below */ /* ---- 8. OUR SOLUTIONS (Section 4 — BLACK) ---- */ .bs-service-section { background: #000000 !important; margin: 0 !important; } .bs-service-section .container { padding-left: clamp(24px, 4vw, 60px) !important; padding-right: clamp(24px, 4vw, 60px) !important; } .bs-service-label { color: rgba(248, 225, 60, 0.80) !important; font-family: 'DM Sans', sans-serif !important; } /* Left big title — explicit white, override inline style */ .bs-service-section .bs-service-left-title { color: #ffffff !important; opacity: 1 !important; font-family: 'DM Sans', sans-serif !important; } .bs-accordion-item { border-top-color: rgba(255,255,255,0.10) !important; } .bs-accordion-item:last-child { border-bottom-color: rgba(255,255,255,0.10) !important; } /* Inactive accordion titles — raised from 0.30 to 0.72 for readability */ .bs-accordion-title { color: rgba(255,255,255,0.72) !important; font-family: 'DM Sans', sans-serif !important; } .bs-accordion-item.active .bs-accordion-title { color: #f8e13c !important; opacity: 1 !important; } .bs-accordion-item.active .bs-accordion-arrow { color: #f8e13c !important; } .bs-accordion-header { padding: 28px 0 !important; } .bs-accordion-body { padding-bottom: 28px !important; } .bs-accordion-body p { color: rgba(255,255,255,0.65) !important; font-family: 'DM Sans', sans-serif !important; } /* ---- 9. PORTFOLIO — HIDE ---- */ .mg-portfolio-area { display: none !important; } /* ---- 10. TESTIMONIALS (Section 6 — WHITE) ---- */ /* ========================================= BRILLSPARK TESTIMONIAL SECTION — CLEAN ========================================= */ /* Section spacing */ .bs-testimonial-section { background: #ffffff !important; } /* Container spacing */ .bs-testimonial-section .container { padding-left: clamp(24px, 4vw, 60px) !important; padding-right: clamp(24px, 4vw, 60px) !important; } /* Small label */ .bs-testimonial-label { color: rgba(0,0,0,0.65) !important; margin-bottom: 6px !important; letter-spacing: 0.14em !important; font-family: 'DM Sans', sans-serif !important; display: inline-block !important; } /* Header block (label + heading) */ .bs-t-header { margin-bottom: 24px !important; } /* Main heading */ .bs-testimonial-heading { color: #000000 !important; margin-top: 6px !important; margin-bottom: 0 !important; line-height: 1.2 !important; font-family: 'DM Sans', sans-serif !important; } /* Body layout */ .bs-t-body { margin-top: 0 !important; /* controls gap between heading & cards */ padding: 0 !important; display: flex; gap: 40px; } /* Left side */ .bs-t-left { flex: 0 0 280px; } .bs-t-big-quote { font-size: 60px; opacity: 0.15; margin-bottom: 20px; } .bs-t-side-heading { margin-bottom: 16px !important; } /* Arrow controls */ .bs-t-arrows { display: flex; align-items: center; gap: 16px; } .bs-t-arr-btn { border: 1px solid rgba(0,0,0,0.2); background: transparent; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; cursor: pointer; } .bs-t-arr-btn:hover { background: #f8e13c; border-color: #f8e13c; } .bs-t-arr-line { width: 40px; height: 1px; background: rgba(0,0,0,0.2); } /* Right side */ .bs-t-right { flex: 1; margin-top: 0 !important; } /* Slider wrapper */ .bs-t-track-outer { overflow: hidden; margin-top: 10px !important; /* reduced */ } /* Track */ .bs-t-track { display: flex; gap: 20px; transition: transform 0.4s ease; } /* Cards */ .bs-t-card { background: #f8e13c; min-width: 320px; padding: 30px 28px !important; /* reduced */ border: 1px solid rgba(0,0,0,0.08); } .bs-t-card-text { color: rgba(0,0,0,0.75); margin-bottom: 20px; } /* Stars */ .bs-t-stars { margin-bottom: 20px; } .bs-t-star { color: #000; font-size: 14px; } /* Author */ .bs-t-author { display: flex; align-items: center; gap: 12px; } .bs-t-avatar { width: 36px; height: 36px; background: #000; color: #fff; font-size: 14px; display: flex; align-items: center; justify-content: center; } .bs-t-author-name { margin: 0; font-weight: 600; } .bs-t-author-time { margin: 0; font-size: 13px; color: rgba(0,0,0,0.55); } /* Responsive */ @media (max-width: 992px) { .bs-t-body { flex-direction: column; gap: 30px; } .bs-t-left { flex: 100%; } .bs-t-right { width: 100%; } } /* ---- 11. WHY CHOOSE US (Section 7 — YELLOW) ---- */ .bs-why-section { background: #f8e13c !important; border-radius: 0 !important; margin: 0 !important; } .container-2200 > .bs-why-section { border-radius: 0 !important; margin-left: calc(50% - 50vw) !important; margin-right: calc(50% - 50vw) !important; padding-left: calc(50vw - 50% + 40px) !important; padding-right: calc(50vw - 50% + 40px) !important; } .bs-why-label { color: rgba(0,0,0,0.50) !important; } .bs-why-heading { color: #000000 !important; } .bs-why-subtext { color: rgba(0,0,0,0.55) !important; } .bs-why-card { background: #ffffff !important; border: 1px solid rgba(0,0,0,0.06) !important; border-radius: 12px !important; } .bs-why-card-title { color: #000000 !important; } .bs-why-card-text { color: rgba(0,0,0,0.55) !important; } .bs-why-card-number { color: #000000 !important; opacity: 0.30; } .bs-why-card-divider { background: rgba(0,0,0,0.12) !important; } .bs-why-card:hover { box-shadow: 0 12px 40px rgba(0,0,0,0.10) !important; border-color: rgba(0,0,0,0.15) !important; } /* Stat cards on yellow — black */ .bs-why-stat-card { background: #000000 !important; border-radius: 12px !important; } .bs-why-stat-number { color: #f8e13c !important; } .bs-why-stat-label, .bs-why-stat-desc { color: rgba(255,255,255,0.55) !important; } /* ---- 12. COUNTERS STRIP (Section 8 — BLACK) ---- */ .at-sec8-area { background: #000000 !important; border-radius: 0 !important; margin: 0 !important; } .container-2200 > .at-sec8-area { border-radius: 0 !important; margin: 0 !important; } .at-sec8-area h1 { color: #ffffff !important; } .at-sec8-area p { color: rgba(255,255,255,0.60) !important; } .home-2-section-9 { background: #ffffff !important; padding: 100px 0 !important; } .home-2-section-9 .container { max-width: 100% !important; padding-top: 0 !important; padding-bottom: 0 !important; padding-left: clamp(48px, 8vw, 140px) !important; /* was 24px, push in more */ padding-right: clamp(48px, 8vw, 140px) !important; } /* ---- HOME SECTION 9 ---- */ /* ---- HOME SECTION 9 ---- */ .home-2-section-9 h3 { color: #000000 !important; font-size: var(--fs-h2) !important; line-height: var(--lh-heading) !important; font-weight: var(--fw-bold) !important; font-family: var(--font-primary) !important; margin-bottom: 40px !important; } .home-2-section-9 p { font-size: var(--fs-body) !important; line-height: 1.75 !important; color: rgba(0, 0, 0, 0.70) !important; margin-top: 0.5rem !important; margin-bottom: 0 !important; max-width: 100% !important; } /* ---- COUNTER STRIP: stat items ---- */ .at-sec8-area .d-flex > div { flex: 1 1 200px; text-align: center; padding: 0 24px; display: flex; flex-direction: column; align-items: center; justify-content: center; } /* ---- COUNTER STRIP: number row ---- */ .at-sec8-area h1 { font-family: 'Inter', sans-serif !important; font-size: clamp(3.5rem, 6vw, 5.5rem) !important; font-weight: 800 !important; line-height: 1 !important; margin: 0 0 14px 0 !important; padding: 0 !important; color: #ffffff !important; display: flex !important; align-items: baseline !important; gap: 0.12em !important; overflow: visible !important; } /* ---- COUNTER STRIP: the number itself ---- */ .at-sec8-area .bs-counter { font-family: 'Inter', sans-serif !important; display: inline !important; line-height: 1 !important; } /* ---- COUNTER STRIP: suffix (K+, %) ---- */ .at-sec8-area h1 .suffix { font-family: 'Inter', sans-serif !important; display: inline !important; font-size: 0.42em !important; font-weight: 700 !important; line-height: 1 !important; color: rgba(255,255,255,0.75) !important; } /* ---- COUNTER STRIP: label text ---- */ .at-sec8-area p { font-size: 0.88rem !important; color: rgba(255,255,255,0.55) !important; margin: 0 !important; line-height: 1.5 !important; } /* ---- 13. BRANDING / TICKER STRIPS ---- */ /* Top brand strip — black bg, images clearly visible */ /* Brand section - default */ .at-brand-area { background: #ffffff !important; padding: 16px 0 !important; /* reduced from 32px */ } /* Brand items */ .at-brand-area .brand-item { opacity: 1 !important; filter: none !important; font-size: 14px; /* reduce font size */ } /* Bottom ticker strip (black bg) */ .at-brand-area:has(.scroll-move-left) { background: #000000 !important; padding: 12px 0 !important; /* reduced from 24px */ } /* Ticker text size */ .at-brand-area:has(.scroll-move-left) .brand-item { font-size: 13px; /* slightly smaller for ticker */ } /* Second ticker strip — white bg */ .mg-portfolio-area ~ .at-brand-area, .bs-testimonial-section ~ .at-brand-area, .at-sec8-area + .at-brand-area { background: #ffffff !important; padding: 14px 0 !important; /* balanced spacing */ } /* Optional: tighter spacing between items */ .at-brand-area .brand-item { margin: 0 10px; /* reduce horizontal gap */ } /* ---- 14. FAQ SECTION (Section 10 — YELLOW) ---- */ .alt-faq-area { background: #f8e13c !important; } /* Card: white, rounded, good padding, gap */ .alt-faq-area .at-faq-item { border-radius: 16px !important; margin-bottom: 16px !important; padding: 0 28px !important; box-shadow: none !important; background: #ffffff !important; border: none !important; } /* Header row: vertically center number + text + icon */ .alt-faq-area .at-faq-header { display: flex !important; align-items: center !important; gap: 14px !important; padding: 22px 0 !important; } /* Number badge: black circle, white number */ .alt-faq-area .at-faq-number { width: 28px !important; height: 28px !important; min-width: 28px !important; font-size: 0.72rem !important; font-weight: 700 !important; line-height: 28px !important; border-radius: 50% !important; background: #0d0d0d !important; color: #ffffff !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; flex-shrink: 0 !important; } /* Question text: bold, left-aligned, correct size */ .alt-faq-area .at-faq-button { font-size: 1.1rem !important; font-weight: 600 !important; color: #0d0d0d !important; line-height: 1.4 !important; padding-right: 40px !important; text-align: left !important; background: transparent !important; border: none !important; } /* + / − icon: vertically centered on the right */ .alt-faq-area .at-faq-button::before, .alt-faq-area .at-faq-button::after { top: 50% !important; transform: translateY(-50%) !important; color: rgba(0,0,0,0.4) !important; background: transparent !important; border: none !important; font-size: 18px !important; width: 28px !important; height: 28px !important; line-height: 28px !important; } /* Answer body: indent to align under question text */ .alt-faq-area .at-faq-body { padding-left: 42px !important; padding-right: 40px !important; padding-bottom: 20px !important; } .alt-faq-area .at-faq-body p { color: rgba(0,0,0,0.55) !important; font-size: 0.95rem !important; line-height: 1.7 !important; } /* ---- CTA SECTION ---- */ /* ---- CTA SECTION ---- */ .at-banner-thumb { background: #ffffff; display: flex; align-items: center; justify-content: center; height: auto !important; min-height: unset !important; position: relative; overflow: hidden; padding: 48px 0; } /* Container width control */ .at-banner-thumb .col-lg-7.col-md-10 { max-width: 560px; margin: 0 auto; text-align: center; } /* 🔥 FORCE HEADING IN ONE LINE */ .at-banner-thumb h2.cta-heading { font-size: clamp(1.8rem, 3.5vw, 2.8rem) !important; font-weight: 700 !important; line-height: 1.25 !important; letter-spacing: normal !important; word-spacing: normal !important; margin-bottom: 16px !important; color: #000000 !important; white-space: nowrap; transform: translateX(-10px); /* 🔥 increased shift */ text-align: center; margin-left: auto; margin-right: auto; display: block; } /* 🔥 DESCRIPTION EXACTLY 2 LINES */ .at-banner-thumb span.cta-desc { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 0.95rem !important; margin-top: 16px; max-width: 500px; margin-left: auto; margin-right: auto; line-height: 1.7 !important; color: rgba(0,0,0,0.45) !important; transform: translateX(6px); /* 🔥 move slightly right */ } /* 🔥 BUTTON SPACING FIX */ .at-banner-thumb .cta-btn-wrap { margin-top: 20px; /* proper spacing after text */ } /* 🔥 BUTTON PADDING IMPROVED */ .at-banner-thumb .at-btn-border-white { border-color: #f8e13c !important; color: #000000 !important; background: #f8e13c !important; padding: 14px 28px !important; /* 🔥 FIXED */ border-radius: 50px; /* oval */ } /* Text inside button */ .at-banner-thumb .at-btn-border-white .text-1, .at-banner-thumb .at-btn-border-white .text-2 { color: #000000 !important; } /* Hover */ .at-banner-thumb .at-btn-border-white:hover { background: #ddc818 !important; border-color: #ddc818 !important; color: #000000 !important; transform: scale(1.04) !important; } /* Responsive tweaks */ @media (max-width: 1399px) { .at-banner-thumb { height: auto !important; } } @media (max-width: 991px) { .at-banner-thumb { height: auto !important; } } @media (max-width: 575px) { .at-banner-thumb { height: auto !important; } /* allow wrap on small screens */ .at-banner-thumb h2.cta-heading { white-space: normal; font-size: clamp(22px, 6vw, 40px); } .at-banner-thumb .col-lg-7.col-md-10 { max-width: 90%; } } /* ---- FOOTER ---- */ /* ---- FOOTER ---- */ /* =========================== FOOTER BASE =========================== */ footer.changeless { height: auto !important; max-height: none !important; overflow: visible !important; margin-bottom: 40px; } .at-footer-area { background-color: #0d0d0d; height: auto !important; max-height: none !important; overflow: visible !important; width: 100%; } .at-footer-area .container { overflow: visible !important; height: auto !important; } /* =========================== DIVIDER =========================== */ .footer-top-divider { border: none; border-top: 1px solid rgba(255, 255, 255, 0.08); margin: 0; } /* =========================== COLUMN LABELS =========================== */ .footer-col-label { color: #f8e13c; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; margin-bottom: 20px; } /* =========================== COLUMN TEXT (address etc.) =========================== */ .footer-col-text { color: rgba(255, 255, 255, 0.60); font-size: 0.85rem; line-height: 1.7; margin-bottom: 12px; } .footer-col-text a { color: rgba(255, 255, 255, 0.60); text-decoration: none; transition: color 0.25s ease; } .footer-col-text a:hover { color: #f8e13c; } /* =========================== COLUMN LIST (services etc.) =========================== */ .footer-col-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 12px; } .footer-col-list li a { color: rgba(255, 255, 255, 0.60); font-size: 0.85rem; text-decoration: none; transition: color 0.25s ease; } .footer-col-list li a:hover { color: #f8e13c; } /* =========================== COPYRIGHT BAR WRAPPER =========================== */ .at-footer-copyright-area { display: block !important; visibility: visible !important; opacity: 1 !important; height: auto !important; overflow: visible !important; border-top: 1px solid rgba(255, 255, 255, 0.08); padding-top: 24px !important; padding-bottom: 24px !important; margin-top: 20px; } /* =========================== COPYRIGHT TEXT =========================== */ .at-footer-copyright { color: rgba(255, 255, 255, 0.55); font-size: 0.80rem; display: inline-block; } /* =========================== SOCIAL LINKS =========================== */ .at-hero-social { display: flex !important; gap: 28px !important; align-items: center !important; flex-wrap: wrap !important; justify-content: center !important; } .at-hero-social a { color: rgba(255, 255, 255, 0.55) !important; font-size: 0.80rem !important; text-decoration: none !important; display: inline-flex !important; align-items: center !important; gap: 5px !important; transition: color 0.25s ease !important; } .at-hero-social a:hover { color: #f8e13c !important; } /* =========================== LEGAL LINKS =========================== */ .at-footer-links { list-style: none !important; padding: 0 !important; margin: 0 !important; display: flex !important; flex-wrap: wrap !important; gap: 16px !important; justify-content: flex-end; } .at-footer-links li a { color: rgba(255, 255, 255, 0.55) !important; font-size: 0.80rem !important; text-decoration: none !important; white-space: nowrap !important; transition: color 0.25s ease !important; } .at-footer-links li a:hover { color: #f8e13c !important; } /* =========================== RESPONSIVE =========================== */ @media (max-width: 991px) { .at-hero-social { justify-content: center !important; } .at-footer-links { justify-content: center !important; } .at-footer-copyright { display: block; text-align: center; } } @media (max-width: 767px) { .at-footer-copyright-area .row { text-align: center; } .at-footer-links { justify-content: center !important; } } /* =========================== FOOTER — balanced top/bottom breathing room =========================== */ .at-footer-area > .container > .row:first-child { padding-top: 40px !important; } /* =========================== ODOMETER — disabled for counter section (using bs-counter instead) =========================== */ /* ---- BACK TO TOP — FIXED ---- */ .back-to-top-wrapper { position: fixed !important; bottom: 30px !important; right: 30px !important; z-index: 9999 !important; opacity: 0 !important; visibility: hidden !important; transition: opacity 0.3s ease, visibility 0.3s ease !important; } /* Show state — must use !important to beat main.css specificity */ .back-to-top-wrapper.back-to-top-btn-show { opacity: 1 !important; visibility: visible !important; } .back-to-top-btn { width: 44px !important; height: 44px !important; border-radius: 50% !important; background: #ffffff !important; color: #000000 !important; border: none !important; cursor: pointer !important; display: flex !important; align-items: center !important; justify-content: center !important; box-shadow: 0 4px 16px rgba(0,0,0,0.3) !important; transition: background 0.25s ease !important; } .back-to-top-btn:hover { background: #f8e13c !important; }/* ---- FORCE COPYRIGHT BAR VISIBLE ---- */ /* ---- 17. PRELOADER ---- */ .page-loader { background: #000000 !important; background-color: #000000 !important; } /* Yellow sliding bars — keep all animations intact */ .page-loader .bar, .bar { background: #f8e13c !important; background-color: #f8e13c !important; } .page-loader .page-loader-logo img { filter: none !important; } /* ---- 18. BACK TO TOP ---- */ .back-to-top-btn:hover { background: #f8e13c !important; color: #000000 !important; border-color: #f8e13c !important; } /* ---- 19. OFFCANVAS & SEARCH ---- */ .at-offcanvas-area .at-offcanvas, .at-offcanvas-2-wrapper { background: #000000 !important; } .at-search-form-toggle { background: #0a0a0a !important; } .at-categories-item:hover { color: #f8e13c !important; } .at-offcanvas-social__link:hover span { color: #f8e13c !important; } /* Offcanvas close button — white on black background */ .at-offcanvas-close-btn .close-btn { color: #ffffff !important; } .at-offcanvas-close-btn .close-btn:hover { color: #f8e13c !important; } /* Offcanvas logo — white logo file used directly, no filter needed */ .at-offcanvas .at-offcanvas-logo img { filter: none !important; } /* Hide offcanvas gallery images */ .at-offcanvas-gallery { display: none !important; } /* Offcanvas title — yellow accent; contact text — white */ .at-offcanvas-title { color: #ffffff !important; } .at-offcanvas-content p { color: rgba(255,255,255,0.75) !important; } .at-offcanvas-contact ul li a, .at-offcanvas-contact p { color: #ffffff !important; } /* Contact list — proper spacing between phone / email / address */ .at-offcanvas-contact ul { list-style: none !important; padding: 0 !important; margin: 0 !important; } .at-offcanvas-contact ul li { margin-bottom: 12px !important; } .at-offcanvas-contact ul li:last-child { margin-bottom: 0 !important; } .at-offcanvas-contact ul li a { font-size: 0.88rem !important; line-height: 1.6 !important; color: rgba(255,255,255,0.75) !important; text-decoration: none !important; } .at-offcanvas-contact ul li a:hover { color: #f8e13c !important; } /* "Get in touch" title spacing */ .at-offcanvas-contact .at-offcanvas-title { margin-bottom: 14px !important; font-size: 0.72rem !important; font-weight: 700 !important; letter-spacing: 0.12em !important; text-transform: uppercase !important; color: #f8e13c !important; } /* "Follow Us" section — breathing room above and title spacing */ .at-offcanvas-social { margin-top: 28px !important; margin-bottom: 24px !important; } .at-offcanvas-social .at-offcanvas-title { margin-bottom: 14px !important; font-size: 0.72rem !important; font-weight: 700 !important; letter-spacing: 0.12em !important; text-transform: uppercase !important; color: #f8e13c !important; } /* Social grid — proper row and column gaps */ .at-offcanvas-social__grid { gap: 10px !important; } .at-offcanvas-social__link { color: #ffffff !important; border-color: rgba(255,255,255,0.15) !important; padding: 8px 16px !important; font-size: 0.82rem !important; } .at-offcanvas-social__link:hover { background: #f8e13c !important; color: #000000 !important; border-color: #f8e13c !important; } .at-offcanvas-social__link:hover span, .at-offcanvas-social__link:hover svg path { color: #000000 !important; fill: #000000 !important; } /* ---- 20. NEUTRAL TEXT ---- */ .neutral-500 { color: rgba(255,255,255,0.60) !important; } /* ---- 21. SECTION TITLE CONSISTENCY ---- */ .at-section-title, .alt-section-title, .bs-service-left-title, .bs-testimonial-heading, .bs-why-heading { color: inherit !important; /* inherit from section context */ } /* ---- 22. CONSISTENT SECTION PADDING ---- */ .at-about-area .container, .mg-portfolio-area .container, .bs-service-section .container, .bs-testimonial-section .container, .alt-faq-area .container { padding-left: clamp(16px, 4vw, 60px) !important; padding-right: clamp(16px, 4vw, 60px) !important; } /* ---- 23. PORTFOLIO ALIGNMENT (if ever re-enabled) ---- */ .mg-portfolio-item-wrap.ml-130 { margin-left: 0 !important; } @media (min-width: 992px) { .mg-portfolio-item-wrap { padding-left: 40px; } } .mg-portfolio-title-wrap.mg-portfolio-pin { padding-right: 20px; } @media (max-width: 991px) { .mg-portfolio-title-wrap.mg-portfolio-pin { padding-right: 0; margin-bottom: 40px; } } .mg-portfolio-dec { color: rgba(255,255,255,0.60) !important; } .mg-portfolio-content { padding-top: 18px; padding-bottom: 24px; border-bottom: 1px solid rgba(255,255,255,0.07); } .cs-portfolio-tag ul li a:hover { color: #f8e13c !important; } .mg-portfolio-title-wrap .at-btn-group .at-btn { border-color: rgba(255,255,255,0.30) !important; color: #ffffff !important; } .mg-portfolio-title-wrap .at-btn-group .at-btn:hover { background: #f8e13c !important; color: #000000 !important; border-color: #f8e13c !important; } /* ---- 24. ACCESSIBLE HOVER UNDERLINE ---- */ main a:not(.at-btn):not([class*="btn"]):hover { text-decoration: underline; } /* ---- 25. GLOBAL FONT CONSISTENCY ---- */ /* Enforce DM Sans (already the theme font) across all custom components */ body, h1, h2, h3, h4, h5, h6, p, a, span, li, button, input, textarea, select, .at-btn, .bs-accordion-title, .bs-accordion-body, .bs-testimonial-heading, .bs-testimonial-quote, .bs-testimonial-author-name, .bs-testimonial-author-role, .bs-why-heading, .bs-why-subtext, .bs-why-card-title, .bs-why-card-text, .bs-service-left-title, .bs-service-label, .at-footer-area, .at-section-title, .alt-section-title, .at-faq-button, .at-faq-body p { font-family: 'DM Sans', sans-serif !important; } /* ================================================================ ABOUT PAGE (about-1.html) OVERRIDES — scoped to .page-about ================================================================ */ /* ---- NAVBAR: hide search icon + dark mode toggle on about page only ---- */ .page-about .at-header-search-btn, .page-about .dark-light-mode { display: none !important; } /* ---- ABOUT SECTION 1 (sec-1-about): background + padding ---- */ /* ---- ABOUT SECTION 1 (sec-1-about): full viewport hero ---- */ .sec-1-about { background: #000000 !important; min-height: 100vh !important; display: flex !important; align-items: center !important; padding-top: 120px !important; padding-bottom: 80px !important; } .sec-1-about .container { max-width: 100% !important; padding-left: clamp(24px, 6vw, 100px) !important; padding-right: clamp(24px, 6vw, 100px) !important; } .sec-1-about .container.pb-100 { padding-bottom: 0 !important; } .sec-1-about.pt-150 { padding-top: 100px !important; } /* Left aligned */ /* Left aligned → CENTER */ .sec-1-about .col-12 { text-align: center !important; } /* Heading — center it */ .sec-1-about h2.section-title { font-size: clamp(1.8rem, 3.5vw, 2.8rem); line-height: 1.05 !important; font-weight: 700 !important; color: #ffffff !important; margin-top: 20px !important; max-width: 680%; margin-left: auto !important; /* add this */ margin-right: auto !important; /* add this */ text-align: center; } /* Big heading */ .sec-1-about h2.section-title { font-size: clamp(1.8rem, 3.5vw, 2.8rem); font-weight: 700; color: #0d0d0d; line-height: 1.25; max-width: 680px; margin: 0 auto 16px auto; text-align: center; } /* "About Us" label */ .sec-1-about .at-btn.common-black { background: transparent !important; border: none !important; padding: 0 !important; border-radius: 0 !important; box-shadow: none !important; display: inline-block !important; pointer-events: none !important; } .sec-1-about .at-btn.common-black .text-1, .sec-1-about .at-btn.common-black .text-2, .sec-1-about .at-btn.common-black span { color: #f8e13c !important; font-size: 0.85rem !important; font-weight: 700 !important; letter-spacing: 0.12em !important; text-transform: uppercase !important; } .sec-1-about .at-btn.common-black i { display: none !important; } /* Hide slider and ticker */ .sec-1-about .at-item-anime-area { display: none !important; } .sec-5-about { display: none !important; } /* ---- ABOUT SECTION 1: headings and body text — white ---- */ .sec-1-about h1, .sec-1-about h2, .sec-1-about h3, .sec-1-about h4, .sec-1-about h5, .sec-1-about h6 { color: #ffffff !important; } .sec-1-about p { color: #ffffff !important; } /* ---- ABOUT SECTION 1: remove swiper/slider entirely ---- */ .sec-1-about .at-item-anime-area { display: none !important; } /* ---- ABOUT PAGE: remove ticker/marquee strip (sec-5-about) ---- */ .sec-5-about { display: none !important; } /* ---- ABOUT SECTION 2 — YELLOW VIBRANT ---- */ .sec-2-about { background: #f8e13c !important; padding: 100px 0 !important; } /* Reduce gap between heading row and card grid */ .sec-2-top.pb-80 { padding-bottom: 32px !important; } .sec-2-num-grid.pt-80 { padding-top: 0 !important; } .sec-2-num-grid.pb-80 { padding-bottom: 0 !important; } .sec-2-about .container { max-width: 100% !important; padding-left: clamp(48px, 8vw, 140px) !important; padding-right: clamp(48px, 8vw, 140px) !important; } /* Top section */ .sec-2-heading { font-size: var(--fs-h2) !important; font-weight: var(--fw-bold) !important; font-family: var(--font-primary) !important; color: #000000 !important; line-height: var(--lh-heading) !important; margin-bottom: 24px !important; } .sec-2-sub { font-size: clamp(1.1rem, 2vw, 1.5rem) !important; font-weight: 400 !important; color: #000000 !important; line-height: 1.4 !important; } .sec-2-para { font-size: var(--fs-body) !important; line-height: 1.8 !important; color: rgba(0, 0, 0, 0.75) !important; margin-bottom: 20px !important; } /* Divider */ .sec-2-divider { border: none !important; border-top: 1px solid rgba(0, 0, 0, 0.15) !important; margin: 0 !important; } /* Numbered white card grid */ .sec-2-num-grid { display: grid !important; grid-template-columns: repeat(3, 1fr) !important; gap: 20px !important; } @media (max-width: 991px) { .sec-2-num-grid { grid-template-columns: repeat(2, 1fr) !important; } } @media (max-width: 575px) { .sec-2-num-grid { grid-template-columns: 1fr !important; } } .sec-2-num-card { background: #ffffff !important; border-radius: 20px !important; padding: 36px 32px !important; display: flex !important; flex-direction: column !important; gap: 0 !important; } .sec-2-num { font-size: 0.82rem !important; font-weight: 600 !important; color: rgba(0,0,0,0.35) !important; letter-spacing: 0.06em !important; margin-bottom: 14px !important; display: block !important; } .sec-2-num-line { width: 28px !important; height: 2px !important; background: rgba(0,0,0,0.18) !important; margin-bottom: 20px !important; display: block !important; } /* Feature card text (used inside num-cards) */ .sec-2-card-title { font-size: clamp(1.1rem, 1.8vw, 1.4rem) !important; font-weight: 700 !important; color: #000000 !important; margin-bottom: 16px !important; } .sec-2-card-text { font-size: 0.95rem !important; line-height: 1.75 !important; color: rgba(0, 0, 0, 0.60) !important; } /* Spacing helpers */ .pb-80 { padding-bottom: 80px !important; } .pt-80 { padding-top: 80px !important; } /* ---- ABOUT SECTION 4 — CONTACT: YELLOW ---- */ .sec-4-about { background: #f8e13c !important; padding: 100px 0 !important; } .sec-4-about .container { max-width: 100% !important; padding-left: clamp(32px, 5vw, 80px) !important; padding-right: clamp(32px, 5vw, 80px) !important; } /* Heading block */ .sec-4-label { display: block !important; font-size: 0.75rem !important; font-weight: 700 !important; letter-spacing: 0.14em !important; text-transform: uppercase !important; color: rgba(0,0,0,0.50) !important; margin-bottom: 12px !important; } .sec-4-heading { font-size: clamp(2.2rem, 5vw, 4.5rem) !important; font-weight: 700 !important; color: #000000 !important; line-height: 1.05 !important; margin-bottom: 16px !important; } .sec-4-sub { max-width: 520px !important; margin-left: auto !important; margin-right: auto !important; } .mb-60 { margin-bottom: 60px !important; } .sec-4-about .mb-60 { text-align: center !important; } /* Address blocks */ .sec-4-address-block { padding: 16px 0 !important; } .sec-4-office-label { font-size: 0.75rem !important; font-weight: 700 !important; letter-spacing: 0.12em !important; text-transform: uppercase !important; color: #000000 !important; margin-bottom: 10px !important; } .sec-4-office-text { font-size: 0.9rem !important; color: rgba(0,0,0,0.65) !important; line-height: 1.8 !important; margin-bottom: 8px !important; } .sec-4-office-text a { color: #000000 !important; text-decoration: none !important; font-weight: 500 !important; } .sec-4-office-text a:hover { text-decoration: underline !important; } .sec-4-divider { border: none !important; border-top: 1px solid rgba(0,0,0,0.15) !important; margin: 0 !important; } /* Social links */ .sec-4-social { display: flex !important; gap: 24px !important; padding: 24px 0 !important; flex-wrap: wrap !important; } .sec-4-social-link { font-size: 0.85rem !important; font-weight: 600 !important; color: #000000 !important; text-decoration: none !important; letter-spacing: 0.04em !important; border-bottom: 1.5px solid #000000 !important; padding-bottom: 2px !important; transition: opacity 0.2s ease !important; } .sec-4-social-link:hover { opacity: 0.55 !important; } /* Form */ .sec-4-form__field { margin-bottom: 20px !important; } .sec-4-form__input { width: 100% !important; background: transparent !important; border: none !important; border-bottom: 1.5px solid rgba(0,0,0,0.30) !important; padding: 14px 0 !important; font-size: 0.95rem !important; color: #000000 !important; font-family: 'DM Sans', sans-serif !important; outline: none !important; border-radius: 0 !important; transition: border-color 0.2s ease !important; } .sec-4-form__input::placeholder { color: rgba(0,0,0,0.40) !important; } .sec-4-form__input:focus { border-bottom-color: #000000 !important; } .sec-4-form__textarea { resize: none !important; min-height: 140px !important; } .sec-4-form__btn { margin-top: 12px !important; background: #000000 !important; color: #f8e13c !important; border: none !important; padding: 16px 48px !important; font-size: 0.85rem !important; font-weight: 700 !important; letter-spacing: 0.08em !important; text-transform: uppercase !important; font-family: 'DM Sans', sans-serif !important; border-radius: 50px !important; cursor: pointer !important; transition: background 0.2s ease !important; } .sec-4-form__btn:hover { background: #1a1a1a !important; } .sec-4-form__disclaimer { font-size: 0.78rem !important; color: rgba(0,0,0,0.45) !important; margin-top: 16px !important; } .sec-4-form__disclaimer a { color: #000000 !important; text-decoration: underline !important; }/* Form column — white bg */ .sec-4-about .col-lg-7 { background: #ffffff !important; padding: 48px !important; border-radius: 12px !important; } /* Input lines — black on white */ .sec-4-form__input { border-bottom-color: rgba(0,0,0,0.20) !important; color: #000000 !important; } .sec-4-form__input::placeholder { color: rgba(0,0,0,0.35) !important; } .sec-4-form__input:focus { border-bottom-color: #000000 !important; } /* Disclaimer text on white */ .sec-4-form__disclaimer { color: rgba(0,0,0,0.40) !important; }/* Fix smooth scroll clipping footer */ #smooth-wrapper, #smooth-content { overflow: visible !important; height: auto !important; } footer.changeless { height: auto !important; max-height: none !important; overflow: visible !important; position: relative; z-index: 10; } .at-footer-area { background-color: #0d0d0d; height: auto !important; max-height: none !important; overflow: visible !important; } /* ---- FOOTER REDESIGN ---- */ .at-footer-area { background: #050505 !important; border-radius: 0 !important; margin: 0 !important; padding: 0 !important; } .at-footer-area .container { padding-left: clamp(24px, 5vw, 80px) !important; padding-right: clamp(24px, 5vw, 80px) !important; } .footer-top-divider { border: none !important; border-top: 1px solid rgba(255,255,255,0.08) !important; margin: 0 !important; } /* Column label — yellow uppercase */ .footer-col-label { color: #f8e13c !important; font-size: 0.72rem !important; font-weight: 700 !important; letter-spacing: 0.14em !important; text-transform: uppercase !important; margin-bottom: 20px !important; } /* Address text */ .footer-col-text { color: rgba(255,255,255,0.55) !important; font-size: 0.88rem !important; line-height: 1.85 !important; margin-bottom: 12px !important; } .footer-col-text a { color: rgba(255,255,255,0.55) !important; text-decoration: none !important; transition: color 0.2s ease !important; } .footer-col-text a:hover { color: #f8e13c !important; } /* Nav lists */ .footer-col-list { list-style: none !important; padding: 0 !important; margin: 0 !important; } .footer-col-list li { margin-bottom: 0 !important; } .footer-col-list li a { color: rgba(255,255,255,0.55) !important; font-size: 0.88rem !important; text-decoration: none !important; transition: color 0.2s ease !important; } .footer-col-list li a:hover { color: #f8e13c !important; } /* Copyright bar */ .at-footer-copyright { color: rgba(255,255,255,0.40) !important; font-size: 0.80rem !important; } /* Social links */ .at-hero-social { display: flex !important; gap: 24px !important; align-items: center !important; flex-wrap: wrap !important; } .at-hero-social a { color: rgba(255,255,255,0.55) !important; font-size: 0.82rem !important; text-decoration: none !important; transition: color 0.2s ease !important; } .at-hero-social a:hover { color: #f8e13c !important; } /* Legal links — VISIBLE fix */ .footer-legal-links li a { color: rgba(255,255,255,0.45) !important; font-size: 0.78rem !important; text-decoration: none !important; transition: color 0.2s ease !important; white-space: nowrap !important; } .footer-legal-links li a:hover { color: #f8e13c !important; text-decoration: underline !important; } /* Spacing helpers */ .pt-80 { padding-top: 80px !important; } .pb-60 { padding-bottom: 60px !important; } .pt-60 { padding-top: 60px !important; } .pt-30 { padding-top: 30px !important; } .pb-30 { padding-bottom: 30px !important; } /* ---- ABOUT PAGE: copyright bar visibility ---- */ .page-about .at-footer-copyright, .page-about .at-footer-copyright-wrap span, .page-about .at-footer-copyright-area span { color: rgba(255, 255, 255, 0.65) !important; opacity: 1 !important; visibility: visible !important; } /* Social links */ .page-about .at-footer-copyright-area .at-hero-social a, .page-about .at-hero-social a { color: rgba(255, 255, 255, 0.65) !important; opacity: 1 !important; } .page-about .at-hero-social a:hover { color: #f8e13c !important; } /* Terms, Privacy, Cookies */ .page-about .at-footer-links li a, .page-about .at-footer-copyright-area ul li a, .page-about .at-footer-copyright-area .at-footer-links li a { color: rgba(255, 255, 255, 0.65) !important; opacity: 1 !important; } .page-about .at-footer-links li a:hover, .page-about .at-footer-copyright-area ul li a:hover { color: #f8e13c !important; } /* Services Page */ /* ---- Services Section 1 — Black Hero ---- */ .sec-1-services { background: #000000 !important; min-height: 100vh !important; display: flex !important; align-items: center !important; justify-content: center !important; text-align: center !important; padding-top: 120px !important; padding-bottom: 80px !important; border-bottom: 1px solid rgba(255,255,255,0.10) !important; } .sec-1-services .container { width: 100% !important; } .sec-1-services .row { justify-content: center !important; text-align: center !important; } .sec-1-services .col-lg-9 { width: 100% !important; max-width: 100% !important; flex: 0 0 100% !important; } /* Hide right side contact + image */ .sec-1-services .col-lg-3, .sec-1-services .at-banner-thumb { display: none !important; } /* Main heading */ .sec-1-services .section-title { color: #ffffff !important; justify-content: center !important; font-weight: 600 !important; line-height: 1.1 !important; margin-bottom: 0 !important; } .sec-1-services .section-title sup { color: #ffffff !important; font-size: 0.4em !important; vertical-align: super !important; } /* ---- Services Area ---- */ .at-service-area { background: #ffffff !important; } .at-service-label { color: #000000 !important; font-size: 14px !important; font-weight: 500 !important; letter-spacing: 0.05em !important; margin-bottom: 16px !important; opacity: 0.7 !important; } .at-service-heading { color: #000000 !important; font-size: clamp(32px, 5vw, 72px) !important; font-weight: 700 !important; line-height: 1.15 !important; max-width: 100% !important; border-bottom: 1px solid rgba(0,0,0,0.15) !important; padding-bottom: 40px !important; } /* Yellow Service Boxes */ .at-service-box { display: block !important; background: #f8e13c !important; border-radius: 12px !important; padding: 36px 30px !important; text-decoration: none !important; transition: all 0.3s ease !important; height: 100% !important; border: 1px solid rgba(0,0,0,0.06) !important; } .at-service-box:hover { background: #000000 !important; transform: translateY(-4px) !important; } .at-service-box:hover .at-service-num, .at-service-box:hover .at-service-name, .at-service-box:hover .at-service-desc { color: #ffffff !important; } .at-service-num { color: rgba(0,0,0,0.45) !important; font-size: 13px !important; font-weight: 600 !important; letter-spacing: 0.08em !important; display: block !important; margin-bottom: 16px !important; } .at-service-name { color: #000000 !important; font-size: 22px !important; font-weight: 700 !important; margin-bottom: 12px !important; } .at-service-desc { color: rgba(0,0,0,0.65) !important; font-size: 14px !important; line-height: 1.6 !important; margin-bottom: 0 !important; } /* ========================================================== SECTION 26 — LAYOUT SPACING (content-based sections) Only hero uses 100vh; all others use padding-based height. ========================================================== */ /* Desktop: 70px top/bottom for all major content sections */ .at-about-area, .bs-service-section, .bs-testimonial-section, .bs-why-section, .alt-faq-area, .at-sec8-area, .home-2-section-9 { padding-top: 100px !important; padding-bottom: 100px !important; min-height: unset !important; height: auto !important; } /* Counter strip padding */ .at-sec8-area { padding-top: 64px !important; padding-bottom: 64px !important; } /* Mobile */ @media (max-width: 767px) { .at-about-area, .bs-service-section, .bs-testimonial-section, .bs-why-section, .alt-faq-area, .home-2-section-9 { padding-top: 60px !important; padding-bottom: 60px !important; } .at-sec8-area { padding-top: 32px !important; padding-bottom: 32px !important; } } /* Hero stays full viewport — do not override */ .at-hero-area, .sec-1-about, .sec-1-services { min-height: 100vh !important; } /* ========================================================== SECTION 27 — FOOTER LOGO SIZE Uniform across all pages ========================================================== */ .at-footer-area a > img[src*="brillspark"] { height: 28px !important; width: auto !important; object-fit: contain !important; } /* ========================================================== SECTION 28 — GSAP ANIMATION INITIAL STATES Prevent flash-of-unstyled content before JS animates. Elements that will be animated start visible by default; GSAP will override opacity/transform on run. We use a JS-loaded class to avoid hiding content when JS is disabled or GSAP fails to load. ========================================================== */ .bs-anim-ready .at-section-title, .bs-anim-ready .alt-section-title, .bs-anim-ready .bs-service-left-title, .bs-anim-ready .bs-testimonial-heading, .bs-anim-ready .bs-why-heading, .bs-anim-ready .at-service-heading, .bs-anim-ready .bs-service-label, .bs-anim-ready .bs-testimonial-label, .bs-anim-ready .bs-why-label, .bs-anim-ready .at-service-label, .bs-anim-ready .bs-why-card, .bs-anim-ready .bs-testimonial-card, .bs-anim-ready .at-service-box { opacity: 0; transform: translateY(20px); will-change: opacity, transform; } /* Smooth scroll — Lenis */ html.lenis { height: auto; } .lenis.lenis-smooth { scroll-behavior: auto !important; } .lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; } /* ========================================================== SECTION 29 — GSAP PIN-SPACER FIX When a section is display:none, GSAP may still insert a .gsap-marker-spacer / pin-spacer element next to it. This rule ensures those spacers stay invisible. ========================================================== */ [style*="display:none"] + .pin-spacer, [style*="display: none"] + .pin-spacer, .home-3-section-11 + .pin-spacer, .home-3-section-11 .pin-spacer, [aria-hidden="true"] .pin-spacer, [aria-hidden="true"] + .pin-spacer { display: none !important; height: 0 !important; margin: 0 !important; padding: 0 !important; } /* ========================================================== MOBILE — prevent horizontal overflow across all pages ========================================================== */ html, body { overflow-x: hidden !important; max-width: 100% !important; } /* ========================================================== MOBILE RESPONSIVE — max-width: 768px Only adjusts layout for small screens. Does NOT change desktop styles, animations, or structure. ========================================================== */ @media (max-width: 768px) { /* --- GLOBAL --- */ .row { margin-left: 0 !important; margin-right: 0 !important; } /* --- HERO SECTION --- */ /* Stats row: inline flex with fixed gap causes overflow on mobile */ .at-hero-title, .at-section-title, .alt-section-title { word-break: break-word !important; overflow-wrap: break-word !important; } /* Hero stats row (inline styled div) — override via parent targeting */ .sec-1-hero .at-hero-content > div[style*="display:flex"][style*="gap:40px"], .at-hero-content > div[style*="display:flex"][style*="gap:40px"] { gap: 20px !important; flex-wrap: wrap !important; } /* --- PORTFOLIO SECTION --- */ /* Remove excess top padding on mobile — pt-145 is too large */ .mg-portfolio-area { padding-top: 60px !important; } /* Remove left margin that creates the empty black space */ .mg-portfolio-item-wrap.ml-130 { margin-left: 0 !important; } /* Stack portfolio columns vertically */ .mg-portfolio-area .col-xxl-4.col-lg-4, .mg-portfolio-area .col-lg-7 { width: 100% !important; max-width: 100% !important; flex: 0 0 100% !important; margin-left: 0 !important; } /* Portfolio title wrap — remove sticky pin on mobile */ .mg-portfolio-title-wrap.mg-portfolio-pin { position: static !important; top: auto !important; } /* --- TICKER / MARQUEE --- */ .at-brand-area, .bs-text-ticker-area, .bs-text-ticker-wrap, .bs-brand-marquee-wrap { overflow: hidden !important; max-width: 100vw !important; } /* --- COUNTER STRIP (2x2 grid) --- */ .at-sec8-area .d-flex { flex-wrap: wrap !important; gap: 0 !important; } .at-sec8-area .d-flex > div { flex: 0 0 50% !important; padding: 28px 16px !important; border-right: 1px solid rgba(255,255,255,0.08) !important; border-bottom: 1px solid rgba(255,255,255,0.08) !important; } .at-sec8-area .d-flex > div:nth-child(even) { border-right: none !important; } .at-sec8-area .d-flex > div:nth-last-child(-n+2) { border-bottom: none !important; } .at-sec8-area h1 { font-size: clamp(2.4rem, 10vw, 3.5rem) !important; } /* --- TESTIMONIALS --- */ .bs-t-body { flex-direction: column !important; } .bs-t-left { flex: none !important; padding-right: 0 !important; padding-bottom: 20px !important; width: 100% !important; } /* --- CTA SECTION --- */ .at-banner-thumb .col-lg-7.col-md-10 { max-width: 100% !important; padding: 0 16px !important; } .at-banner-thumb .at-btn { width: 100% !important; justify-content: center !important; } /* --- SERVICE / PORTFOLIO CARDS --- */ .at-service-box, .cs-portfolio-item { max-width: 100% !important; } .cs-portfolio-tag ul { flex-wrap: wrap !important; white-space: normal !important; } .cs-portfolio-tag ul li a { white-space: normal !important; } /* --- CONTACT ADDRESS HEADING --- */ /* Fix "interestedin" — word-break on heading */ .contact-address-section .addr-top h2 { word-break: break-word !important; overflow-wrap: break-word !important; word-spacing: normal !important; } /* --- GENERAL SECTION PADDING --- */ .container { padding-left: 20px !important; padding-right: 20px !important; } /* --- HERO (index.html) --- */ /* Let hero grow with content instead of clipping at 100vh */ .at-hero-area { height: auto !important; min-height: 100svh !important; padding-top: 100px !important; padding-bottom: 60px !important; align-items: flex-start !important; } /* Branding Agency label — ensure visibility */ .at-hero-content > div[style*="inline-flex"] { display: flex !important; visibility: visible !important; opacity: 1 !important; overflow: visible !important; } /* Hero stats row — flex-wrap and smaller gap on mobile */ .at-hero-content > div[style*="display:flex"][style*="gap:40px"], .at-hero-content > div[style*="gap: 40px"] { gap: 16px !important; flex-wrap: wrap !important; margin-top: 20px !important; margin-bottom: 20px !important; } /* Hero buttons — stack and fill width */ .at-hero-btn { flex-direction: column !important; align-items: stretch !important; padding-top: 16px !important; } .at-hero-btn .at-btn { width: 100% !important; text-align: center !important; justify-content: center !important; } /* --- TESTIMONIALS SPACING (index.html) --- */ /* Reduce gap between heading and body */ .bs-t-header { margin-bottom: 20px !important; } .bs-testimonial-section { padding: 60px 0 50px !important; } /* --- CONTACT (contact-2.html) --- */ /* Disable GSAP scroll-stacking on mobile — all 3 sections must be visible */ .scroll-section { position: static !important; height: auto !important; overflow: visible !important; } .scroll-section .wrapper { position: static !important; height: auto !important; overflow: visible !important; } .scroll-section .wrapper .item { position: static !important; transform: none !important; -webkit-transform: none !important; opacity: 1 !important; visibility: visible !important; display: block !important; width: 100% !important; } /* Ensure all address cards stack and are visible */ .contact-address-section { padding: 60px 0 !important; background: #fff !important; overflow: visible !important; display: block !important; width: 100% !important; } .contact-address-section .addr-top { margin-bottom: 32px !important; padding: 0 20px !important; } .contact-address-section .addr-top h2 { font-size: clamp(22px, 6vw, 36px) !important; color: #000 !important; word-break: break-word !important; } .contact-address-section .addr-top p { color: #888 !important; } .addr-grid { grid-template-columns: 1fr !important; display: grid !important; border: 1px solid #e8e8e8 !important; } .addr-card { border-right: none !important; border-bottom: 1px solid #e8e8e8 !important; padding: 32px 20px !important; display: block !important; visibility: visible !important; opacity: 1 !important; background: #fff !important; } .addr-card:last-child { border-bottom: none !important; } /* Preserve original dark-on-white text colours */ .contact-address-section .addr-top h2 { color: #000 !important; } .addr-card__detail { color: #555 !important; } .addr-card__num { color: #bbb !important; } .addr-card__link-value { color: #000 !important; } .addr-card__link-label { color: #aaa !important; } } /* ================================================================ REFINEMENT PASS — Typography, Button, Footer & Spacing ================================================================ */ /* ---- CTA Button: force oval regardless of .rounded-0 class ---- */ .at-banner-thumb .at-btn.rounded-0, .at-banner-thumb .at-btn { border-radius: 50px !important; } /* ---- CTA Button wrapper: balanced padding above & below ---- */ .at-banner-thumb .d-flex { padding-top: 8px !important; padding-bottom: 0 !important; } @media (max-width: 575px) { .at-banner-thumb h2 { font-size: clamp(1.6rem, 6vw, 2.2rem) !important; } } /* ---- Footer list: tighter vertical rhythm — FINAL ---- */ .footer-col-list { gap: 6px !important; display: flex !important; flex-direction: column !important; list-style: none !important; padding: 0 !important; margin: 0 !important; } .footer-col-list li { margin: 0 !important; padding: 0 !important; line-height: 1.2 !important; } .footer-col-list li a { display: block !important; padding: 0 !important; margin: 0 !important; line-height: 1.2 !important; } /* ---- Footer copyright bar — FINAL visibility fix ---- */ .at-footer-copyright-area { display: block !important; visibility: visible !important; opacity: 1 !important; overflow: visible !important; height: auto !important; max-height: none !important; padding-top: 16px !important; padding-bottom: 20px !important; margin-top: 12px !important; } .at-footer-copyright-area .row { overflow: visible !important; visibility: visible !important; opacity: 1 !important; } .at-footer-copyright-area [class*="col-"] { visibility: visible !important; opacity: 1 !important; } /* Override main.css opacity:0.5 + var(--at-common-black) on dark bg */ .at-footer-copyright { color: rgba(255, 255, 255, 0.65) !important; opacity: 1 !important; visibility: visible !important; font-size: 0.80rem !important; } .at-hero-social a { color: rgba(255, 255, 255, 0.65) !important; opacity: 1 !important; visibility: visible !important; } .at-footer-links li a { color: rgba(255, 255, 255, 0.65) !important; opacity: 1 !important; visibility: visible !important; } .at-footer-links li a:hover, .at-hero-social a:hover { color: #f8e13c !important; } @media (max-width: 991px) { .at-footer-copyright-area .col-lg-4 { margin-bottom: 8px; } .at-footer-copyright { text-align: center; } .at-hero-social { justify-content: center !important; } .at-footer-links { justify-content: center !important; } } /* ---- Global section rhythm: heading → paragraph gap ---- */ .at-banner-thumb h2 + div, .at-banner-thumb h2 + .d-flex { margin-top: 0 !important; } /* ================================================================ PASS 2 — 10-POINT REFINEMENT All rules here override earlier declarations via !important. ================================================================ */ /* ──────────────────────────────────────────────────────────────── TASK 1 — GET IN TOUCH SECTION (all pages) Section background → #ffffff Right-side form card → #f8e13c; text → #000000 ──────────────────────────────────────────────────────────────── */ .sec-4-about { background: #ffffff !important; padding-bottom: 100px !important; } /* "Get in touch" heading — matches at-section-title reference (var(--fs-h2)) */ .sec-4-git-heading { font-size: var(--fs-h2) !important; line-height: var(--lh-heading) !important; color: #000000 !important; } /* Reduce gap between heading row and content */ .sec-4-about .mb-60 { margin-bottom: 32px !important; } .sec-4-label { color: #000000 !important; } .sec-4-heading { color: #000000 !important; } .sec-4-office-label { color: #000000 !important; } .sec-4-office-text { color: rgba(0,0,0,0.70) !important; } .sec-4-office-text a { color: #000000 !important; } .sec-4-social-link { color: #000000 !important; border-bottom-color: #000000 !important; } /* Right-side form column — let the card handle its own background/padding */ .sec-4-about .col-lg-7 { background: transparent !important; padding: 0 !important; align-self: flex-start !important; } /* Form inputs on yellow background */ .sec-4-about .col-lg-7 .sec-4-form__input { background: transparent !important; color: #000000 !important; border-bottom-color: rgba(0,0,0,0.25) !important; } .sec-4-about .col-lg-7 .sec-4-form__input::placeholder { color: rgba(0,0,0,0.45) !important; } .sec-4-about .col-lg-7 .sec-4-form__input:focus { border-bottom-color: #000000 !important; } .sec-4-about .col-lg-7 .sec-4-form__disclaimer { color: rgba(0,0,0,0.55) !important; } .sec-4-about .col-lg-7 .sec-4-form__disclaimer a { color: #000000 !important; } /* ──────────────────────────────────────────────────────────────── TASKS 2 + 3 + 8 + 9 — INNER-PAGE HERO TYPOGRAPHY & SPACING Reference: services-1.html hero (clamp(48px,8vw,120px); lh 1.15; fw 600) Applies to all pages EXCEPT index.html ──────────────────────────────────────────────────────────────── */ /* All inner-page heroes: full viewport height like home hero */ .sec-1-services, .sec-1-about, .sec-1-faqs, .sec-1-404, .sec-1-coming-soon, .sec-1-portfolio-2, .sec-1-portfolio-3, .sec-1-portfolio-4, .sec-1-portfolio-5, .sec-1-portfolio-6, .sec-1-portfolio-details-2, .sec-1-services-details, .port-hero, .contact-hero-wrap { min-height: 100vh !important; display: flex !important; align-items: center !important; padding-top: 120px !important; padding-bottom: 80px !important; } /* Inner-page content sections: uniform 100px padding */ .sec-3-services-details, .sec-4-services-details, .sec-5-services-details { padding-top: 100px !important; padding-bottom: 100px !important; } .port-hero { min-height: 100vh !important; padding-top: 120px !important; padding-bottom: 80px !important; } /* Contact — fix scroll-section stacking on all screen sizes */ .scroll-section, .scroll-section .wrapper { position: static !important; height: auto !important; overflow: visible !important; } .scroll-section .wrapper .item { position: static !important; transform: none !important; -webkit-transform: none !important; opacity: 1 !important; visibility: visible !important; display: block !important; width: 100% !important; min-height: 0 !important; } /* Contact hero — yellow bg, black font */ .contact-hero { background: #f8e13c !important; min-height: auto !important; padding-top: 100px !important; padding-bottom: 100px !important; } .contact-hero__title { color: #000000 !important; } .contact-hero__label { color: #000000 !important; } /* Hero heading typography — reduced size */ .sec-1-faqs .section-title, .sec-1-faqs h4.section-title { font-size: clamp(32px, 5vw, 72px) !important; line-height: 1.15 !important; font-weight: 600 !important; } /* ================================================================ ABOUT-2 PAGE — Section layouts Font: all headings use var(--fs-h2) = clamp(1.8rem,3.5vw,2.8rem) matching index.html at-section-title reference All sections: 100px top/bottom desktop, 60px mobile ================================================================ */ .about2-hero { background: #f8e13c; padding: 100px 0; } .about2-hero .container, .about2-team .container, .about2-journey .container, .about2-stats .container { max-width: 100% !important; padding-left: clamp(48px, 8vw, 140px) !important; padding-right: clamp(48px, 8vw, 140px) !important; } .about2-hero .at-section-title { max-width: 820px; } .about2-hero__label { display: block; font-size: var(--fs-label) !important; font-weight: var(--fw-semibold) !important; letter-spacing: var(--ls-label) !important; text-transform: uppercase !important; color: rgba(0,0,0,0.55) !important; margin-bottom: 20px !important; font-family: var(--font-primary) !important; } .about2-team { background: #ffffff; padding: 100px 0; } .about2-journey { background: #f5f5f5; padding: 100px 0; } .about2-stats { background: #ffffff; padding: 100px 0; } /* Mobile */ @media (max-width: 767px) { .about2-hero, .about2-team, .about2-journey, .about2-stats { padding: 60px 0; } } /* FAQs — show all scroll-section items (sections 01–04) */ .sec-3-faqs .scroll-section .item { position: static !important; height: auto !important; min-height: 0 !important; opacity: 1 !important; visibility: visible !important; transform: none !important; width: 100% !important; } .sec-1-about h2.section-title { font-size: clamp(48px, 8vw, 120px) !important; line-height: 1.15 !important; font-weight: 600 !important; max-width: 100% !important; } /* Standardised inner-page hero headings — max 3rem (~48px) */ .sec-1-about h1, .sec-1-about h2.section-title, .sec-1-services h1, .sec-1-services .section-title, .sec-1-faqs h1, .sec-1-faqs .section-title, .contact-hero-wrap h1, .contact-hero-wrap .section-title, .port-hero h1, .port-hero .section-title, .sec-1-portfolio-2 h1, .sec-1-portfolio-3 h1, .sec-1-portfolio-4 h1, .sec-1-portfolio-5 h1, .sec-1-portfolio-6 h1 { font-size: clamp(1.8rem, 3.5vw, 3rem) !important; line-height: 1.2 !important; font-weight: 700 !important; } .port-hero__title { font-size: clamp(1.8rem, 3.5vw, 3rem) !important; line-height: 1.2 !important; font-weight: 600 !important; letter-spacing: -0.02em !important; } .contact-hero__title { font-size: clamp(1.8rem, 3.5vw, 3rem) !important; line-height: 1.2 !important; font-weight: 600 !important; letter-spacing: -0.02em !important; } /* Label eyebrow typography standardization */ .contact-hero__label, .port-hero__label { font-size: 13px !important; font-weight: 600 !important; letter-spacing: 0.14em !important; text-transform: uppercase !important; } /* ──────────────────────────────────────────────────────────────── MARQUEE ANIMATIONS — enabled for brand logos and text ticker ──────────────────────────────────────────────────────────────── */ /* Ensure marquee tracks animate */ .bs-brand-marquee-track { animation: bs-brand-scroll 22s linear infinite !important; transform: none; } .bs-text-ticker-track { animation: bs-text-scroll 30s linear infinite !important; transform: none; } @keyframes bs-brand-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } } @keyframes bs-text-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } } /* Re-allow hover/interactive transitions */ a, button, .at-btn, .bs-t-arr-btn, .back-to-top-btn, .at-service-box, .bs-why-card, .footer-col-list li a, .footer-col-text a, .at-footer-links li a, .at-hero-social a, .at-main-menu nav ul li a, .sec-4-social-link, .hamburger-line, .body-overlay, .at-offcanvas-social__link, .bs-whatsapp-btn { transition: color 0.2s ease, background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease, transform 0.2s ease !important; animation: none !important; } /* Make GSAP-hidden elements visible since GSAP is stubbed */ .bs-anim-ready .at-section-title, .bs-anim-ready .alt-section-title, .bs-anim-ready .bs-service-left-title, .bs-anim-ready .bs-testimonial-heading, .bs-anim-ready .bs-why-heading, .bs-anim-ready .at-service-heading, .bs-anim-ready .bs-service-label, .bs-anim-ready .bs-testimonial-label, .bs-anim-ready .bs-why-label, .bs-anim-ready .at-service-label, .bs-anim-ready .bs-why-card, .bs-anim-ready .bs-testimonial-card, .bs-anim-ready .at-service-box { opacity: 1 !important; transform: none !important; will-change: auto !important; } /* Fade-animation elements — show statically */ .at_fade_anim { opacity: 1 !important; transform: none !important; transition: none !important; } .scroll-move-up, .scroll-move-up2, .scroll-move-right, .scroll-move-left { opacity: 1 !important; transform: none !important; } /* ──────────────────────────────────────────────────────────────── TASK 6 — FLOATING WHATSAPP BUTTON (all pages) Fixed bottom-right, circular, minimal design ──────────────────────────────────────────────────────────────── */ /* ── WhatsApp Button ── */ .bs-whatsapp-btn { position: fixed !important; bottom: 24px !important; right: 24px !important; width: 56px !important; height: 56px !important; background: #25D366 !important; color: #ffffff !important; border-radius: 50% !important; display: flex !important; align-items: center !important; justify-content: center !important; z-index: 9997 !important; box-shadow: 0 4px 16px rgba(0,0,0,0.25) !important; text-decoration: none !important; animation: none !important; } .bs-whatsapp-btn:hover { background: #128C7E !important; color: #ffffff !important; transform: scale(1.08) !important; text-decoration: none !important; } .bs-whatsapp-btn svg { flex-shrink: 0 !important; display: block !important; } /* ── Back to Top — always visible, above WhatsApp ── */ .back-to-top-wrapper { position: fixed !important; bottom: 90px !important; right: 24px !important; z-index: 9996 !important; /* Force visible at ALL scroll positions */ opacity: 1 !important; visibility: visible !important; display: flex !important; pointer-events: auto !important; transform: none !important; } /* Also target the button/link inside the wrapper */ .back-to-top-wrapper a, .back-to-top-wrapper button, #back-to-top, .back-to-top { opacity: 1 !important; visibility: visible !important; display: flex !important; pointer-events: auto !important; transform: none !important; } /* ──────────────────────────────────────────────────────────────── TASK 4 — MOBILE RESPONSIVENESS (all pages) Fix overflow, wrapping, button alignment, excess spacing ──────────────────────────────────────────────────────────────── */ @media (max-width: 767px) { /* Compact inner-page heroes on mobile — drop full-viewport height */ .at-hero-area, .sec-1-services, .sec-1-about, .sec-1-faqs, .sec-1-portfolio-2, .sec-1-portfolio-3, .sec-1-portfolio-4, .sec-1-portfolio-5, .sec-1-portfolio-6, .sec-1-services-details, .port-hero, .contact-hero, .contact-hero-wrap { min-height: auto !important; padding-top: 80px !important; padding-bottom: 60px !important; } /* sec-2-about mobile */ .sec-2-about { padding: 60px 0 !important; } /* home-2-section-9 mobile already handled above */ /* Get in touch form card */ .sec-4-about .col-lg-7 { padding: 28px 20px !important; } .sec-4-about { padding: 60px 0 !important; } /* Hero heading word-break */ .sec-1-faqs .section-title, .sec-1-about h2.section-title, .sec-1-portfolio-2 h1, .sec-1-portfolio-3 h1, .sec-1-portfolio-4 h1, .sec-1-portfolio-5 h1, .sec-1-portfolio-6 h1, .port-hero__title, .contact-hero__title { word-break: break-word !important; overflow-wrap: break-word !important; } /* WhatsApp smaller on mobile */ .bs-whatsapp-btn { width: 48px !important; height: 48px !important; bottom: 16px !important; right: 16px !important; } .back-to-top-wrapper { bottom: 74px !important; right: 16px !important; } } @media (max-width: 575px) { .sec-4-form__btn { width: 100% !important; text-align: center !important; } } /* ──────────────────────────────────────────────────────────────── TASK 10 — CONTACT PAGE (contact-2.html) ADDRESS SECTION Add border-radius + card-style appearance ──────────────────────────────────────────────────────────────── */ .addr-grid { border: none !important; gap: 20px !important; } .addr-card { border-radius: 16px !important; border: 1px solid #e8e8e8 !important; border-right: 1px solid #e8e8e8 !important; box-shadow: 0 2px 12px rgba(0,0,0,0.05) !important; overflow: hidden !important; } .addr-card:hover { background: #fafafa !important; box-shadow: 0 8px 32px rgba(0,0,0,0.10) !important; } @media (max-width: 991px) { .addr-grid { gap: 16px !important; } .addr-card { border-bottom: 1px solid #e8e8e8 !important; } } /* ──────────────────────────────────────────────────────────────── TASK 7 — TYPOGRAPHY CONSISTENCY Enforce DM Sans on all custom hero/contact elements ──────────────────────────────────────────────────────────────── */ .fz-ds-1, .contact-hero__title, .contact-hero__label, .port-hero__title, .port-hero__label { font-family: 'DM Sans', sans-serif !important; } /* ============================================================ UNIFIED SECTION PADDING — single source of truth Every section: 100px top + 100px bottom. Edit here only. ============================================================ */ .at-about-area, .bs-service-section, .bs-testimonial-section, .bs-why-section, .at-sec8-area, .alt-faq-area, .at-banner-thumb.changeless { padding-top: 100px !important; padding-bottom: 100px !important; } /* ── TASK 2: Remove scroll-triggered entrance animations ── */ /* Why Choose cards use IntersectionObserver to add .visible; they start at opacity:0. Force them always visible so no scroll-fade entrance occurs. */ .bs-why-card, .bs-why-stat-card { opacity: 1 !important; transform: none !important; transition: box-shadow 0.3s ease, border-color 0.3s ease !important; } .bs-why-card.visible, .bs-why-stat-card.visible { opacity: 1 !important; transform: none !important; } /* Remove entrance transitions from data-delay / data-fade-from elements */ [data-fade-from], [data-delay] { opacity: 1 !important; transform: none !important; transition: none !important; animation: none !important; } /* Kill any lingering hero-button box-shadow pulse or glow animation */ .at-hero-btn a, .at-hero-btn .at-btn { animation: none !important; box-shadow: none !important; } /* ── TASK 3: Why Choose — restore gap between paragraph and grid ── */ /* Global p { margin-bottom: 16px !important } collapses the inline 64px margin. Explicitly restore a proper breathing gap here. */ .bs-why-subtext { margin-bottom: 56px !important; } /* ── TASK 4: FAQ — reduce excessive internal spacing ── */ /* Section padding stays at 100px 0 to match the standard. pt-80 class removed from HTML — no override needed. Title-wrap removed from HTML — no override needed. */ /* FAQ plain label */ .alt-faq-area .at-faq-label { display: inline-block !important; font-size: 13px !important; /* matches your

*/ font-weight: 700 !important; letter-spacing: 0.14em !important; text-transform: uppercase !important; color: #000000 !important; margin-bottom: 16px !important; } /* Gap between heading and first FAQ card */ .alt-faq-area .accordion { margin-top: 36px !important; } /* ============================================================ ANIMATION KILL — all GSAP scroll/entrance animations removed Marquee (CSS keyframes) and counter (inline JS) are untouched. This block forces every element that GSAP may have set to opacity:0 / transform:translateY(x) back to visible. ============================================================ */ /* All headings — never hidden */ h1, h2, h3, h4, h5, h6, .at-section-title, .alt-section-title, .bs-service-left-title, .bs-why-heading, .sec-2-heading, .at-hero-title { opacity: 1 !important; transform: none !important; animation: none !important; } /* All body text / labels */ p, .bs-why-subtext, .bs-why-label, .bs-service-label, .bs-testimonial-label, .at-service-label, .footer-col-label, .sec-2-sub, .sec-2-para, .sec-4-label, .at-hero-desc { opacity: 1 !important; transform: none !important; animation: none !important; } /* All cards */ .bs-why-card, .bs-why-stat-card, .bs-testimonial-card, .at-service-box, .sec-2-num-card, .at-award-item, .at-team-item { opacity: 1 !important; transform: none !important; animation: none !important; transition: box-shadow 0.3s ease, border-color 0.3s ease !important; } /* Accordion items (service list) */ .bs-accordion-item { opacity: 1 !important; transform: none !important; animation: none !important; } /* FAQ items */ .at-faq-item { opacity: 1 !important; transform: none !important; animation: none !important; } /* FAQ hero heading — visually matches about page */ .sec-1-faqs .section-title, .sec-1-faqs h2.section-title { font-size: clamp(40px, 3.5vw, 80px) !important; line-height: 1.15 !important; font-weight: 600 !important; text-align: center !important; width: 100% !important; } /* Buttons */ .at-btn, .at-hero-btn a, .at-hero-btn .at-btn, .at-banner-thumb .at-btn, .at-about-area .at-btn { opacity: 1 !important; transform: none !important; animation: none !important; } /* Dividers / lines */ .footer-top-divider, .sec-2-divider { opacity: 1 !important; transform: none !important; animation: none !important; } /* Footer columns */ .at-footer-area .col-lg-3 { opacity: 1 !important; transform: none !important; animation: none !important; } /* Portfolio items */ .at-portfolio-item, .mg-portfolio-item { opacity: 1 !important; transform: none !important; animation: none !important; } /* Counter rows — visible (counter number itself animates via inline JS, that's fine) */ .bs-counter-item, .at-sec8-area .col-lg-3 { opacity: 1 !important; transform: none !important; animation: none !important; } /* About page specific */ .sec-4-address-block, .sec-4-form__field, .sec-4-social { opacity: 1 !important; transform: none !important; animation: none !important; } /* ============================================================ MOBILE SECTION PADDING — must stay at end of file to override the unified 100px rule above. ============================================================ */ @media (max-width: 767px) { .at-about-area, .bs-service-section, .bs-testimonial-section, .bs-why-section, .alt-faq-area, .at-banner-thumb.changeless { padding-top: 60px !important; padding-bottom: 60px !important; } .at-sec8-area { padding-top: 40px !important; padding-bottom: 40px !important; } } /* ================================================================ FULL DEVICE RESPONSIVE SYSTEM Breakpoints: xs — <576px (small phone) sm — 576–767px (large phone / phablet) md — 768–991px (tablet portrait) lg — 992–1199px (tablet landscape / small laptop) xl — 1200–1439px (standard laptop/desktop) xxl — 1440–2559px (2K / QHD) uhd — ≥2560px (4K) ================================================================ */ /* ---------------------------------------------------------------- PREVENT HORIZONTAL OVERFLOW — all screens ---------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html, body { overflow-x: hidden !important; width: 100% !important; } img, video, iframe, svg { max-width: 100% !important; height: auto; } /* ================================================================ XS — Small phones (max-width: 575px) ================================================================ */ @media (max-width: 575px) { /* --- NAVBAR --- */ .at-header-area .container { padding-left: 16px !important; padding-right: 16px !important; } .at-header-logo img, .at-header-logo a img { height: 30px !important; } /* --- HERO --- */ .at-hero-area { padding-top: 88px !important; padding-bottom: 48px !important; min-height: 100svh !important; align-items: flex-start !important; } .at-hero-area .container { padding-left: 20px !important; padding-right: 20px !important; } .at-hero-abstract { display: none !important; } .at-hero-title { font-size: clamp(2.4rem, 10vw, 3.2rem) !important; } .at-hero-desc { font-size: 0.95rem !important; max-width: 100% !important; } .at-hero-content { margin-top: 0 !important; } .at-hero-btn { flex-direction: column !important; align-items: stretch !important; gap: 12px !important; padding-top: 16px !important; } .at-hero-btn .at-btn { width: 100% !important; justify-content: center !important; text-align: center !important; } /* --- ALL SECTIONS --- */ .container { padding-left: 20px !important; padding-right: 20px !important; } .at-about-area, .bs-service-section, .bs-testimonial-section, .bs-why-section, .alt-faq-area, .home-2-section-9, .sec-2-about, .sec-4-about { padding-top: 52px !important; padding-bottom: 52px !important; } .at-sec8-area { padding-top: 32px !important; padding-bottom: 32px !important; } /* --- COUNTER STRIP --- */ .at-sec8-area .d-flex { flex-wrap: wrap !important; gap: 0 !important; } .at-sec8-area .d-flex > div { flex: 0 0 50% !important; max-width: 50% !important; padding: 24px 12px !important; border-right: 1px solid rgba(255,255,255,0.08) !important; border-bottom: 1px solid rgba(255,255,255,0.08) !important; } .at-sec8-area .d-flex > div:nth-child(2n) { border-right: none !important; } .at-sec8-area .d-flex > div:nth-last-child(-n+2) { border-bottom: none !important; } .at-sec8-area h1 { font-size: clamp(2.2rem, 9vw, 3rem) !important; } /* --- SERVICES ACCORDION --- */ .bs-service-section .row { flex-direction: column !important; } .bs-service-section .col-lg-5, .bs-service-section .col-lg-7 { width: 100% !important; max-width: 100% !important; flex: 0 0 100% !important; } .bs-service-left-title { font-size: clamp(1.8rem, 7vw, 2.4rem) !important; margin-bottom: 24px !important; } .bs-accordion-header { padding: 20px 0 !important; } /* --- TESTIMONIALS --- */ .bs-t-body { flex-direction: column !important; gap: 20px !important; } .bs-t-left { flex: none !important; width: 100% !important; } .bs-t-card { min-width: 280px !important; padding: 24px 20px !important; } /* --- WHY CHOOSE (card grid) --- */ .bs-why-section .row > [class*="col-"] { width: 100% !important; max-width: 100% !important; flex: 0 0 100% !important; } /* --- FAQ --- */ .alt-faq-area .at-faq-header { gap: 10px !important; padding: 18px 0 !important; } .alt-faq-area .at-faq-button { font-size: 0.95rem !important; } .alt-faq-area .at-faq-body { padding-left: 28px !important; padding-right: 16px !important; } /* --- CTA --- */ .at-banner-thumb { padding: 48px 20px !important; } .at-banner-thumb h2.cta-heading { white-space: normal !important; font-size: clamp(1.5rem, 7vw, 2rem) !important; transform: none !important; } .at-banner-thumb span.cta-desc { transform: none !important; max-width: 100% !important; -webkit-line-clamp: unset !important; line-clamp: unset !important; overflow: visible !important; } .at-banner-thumb .col-lg-7.col-md-10 { max-width: 100% !important; padding: 0 !important; } .at-banner-thumb .at-btn { width: 100% !important; justify-content: center !important; } /* --- ABOUT PAGE sec-2 card grid --- */ .sec-2-num-grid { grid-template-columns: 1fr !important; gap: 16px !important; } .sec-2-about .container { padding-left: 20px !important; padding-right: 20px !important; } .sec-4-about .col-lg-7 { padding: 28px 20px !important; border-radius: 8px !important; } /* --- INNER PAGE HEROES --- */ .sec-1-about, .sec-1-services, .sec-1-faqs, .sec-1-portfolio-2, .sec-1-portfolio-3, .sec-1-portfolio-4, .sec-1-portfolio-5, .sec-1-portfolio-6, .sec-1-portfolio-details-2, .sec-1-services-details, .sec-1-404 { padding-top: 100px !important; padding-bottom: 60px !important; } /* --- FOOTER --- */ .at-footer-area .row > [class*="col-"] { width: 100% !important; max-width: 100% !important; flex: 0 0 100% !important; margin-bottom: 32px !important; } .at-footer-area .row > [class*="col-"]:last-child { margin-bottom: 0 !important; } .at-footer-copyright-area .row { text-align: center !important; } .at-footer-links { justify-content: center !important; flex-wrap: wrap !important; } .at-hero-social { justify-content: center !important; flex-wrap: wrap !important; } /* --- CONTACT PAGE --- */ .sec-4-about .container { padding-left: 20px !important; padding-right: 20px !important; } .sec-4-heading { font-size: clamp(2rem, 8vw, 3rem) !important; } /* --- HOME SECTION 9 --- */ .home-2-section-9 .container { padding-left: 20px !important; padding-right: 20px !important; } /* --- PORTFOLIO PAGES --- */ .cs-portfolio-tag ul { flex-wrap: wrap !important; } .cs-portfolio-tag ul li a { white-space: normal !important; } } /* ================================================================ SM — Large phones / phablets (576px – 767px) ================================================================ */ @media (min-width: 576px) and (max-width: 767px) { /* --- HERO --- */ .at-hero-abstract { display: none !important; } .at-hero-title { font-size: clamp(2.8rem, 8vw, 3.8rem) !important; } .at-hero-area { padding-top: 96px !important; padding-bottom: 56px !important; } .at-hero-content { margin-top: 0 !important; } /* --- SERVICES --- */ .bs-service-section .row { flex-direction: column !important; } .bs-service-section .col-lg-5, .bs-service-section .col-lg-7 { width: 100% !important; max-width: 100% !important; flex: 0 0 100% !important; } .bs-service-left-title { margin-bottom: 24px !important; } /* --- COUNTER --- */ .at-sec8-area .d-flex { flex-wrap: wrap !important; gap: 0 !important; } .at-sec8-area .d-flex > div { flex: 0 0 50% !important; max-width: 50% !important; padding: 28px 16px !important; border-right: 1px solid rgba(255,255,255,0.08) !important; border-bottom: 1px solid rgba(255,255,255,0.08) !important; } .at-sec8-area .d-flex > div:nth-child(2n) { border-right: none !important; } .at-sec8-area .d-flex > div:nth-last-child(-n+2) { border-bottom: none !important; } /* --- TESTIMONIALS --- */ .bs-t-body { flex-direction: column !important; gap: 24px !important; } .bs-t-left { flex: none !important; width: 100% !important; } /* --- CTA --- */ .at-banner-thumb h2.cta-heading { white-space: normal !important; transform: none !important; } .at-banner-thumb span.cta-desc { transform: none !important; } /* --- FOOTER --- */ .at-footer-area .row > [class*="col-lg-3"] { width: 50% !important; max-width: 50% !important; flex: 0 0 50% !important; margin-bottom: 32px !important; } .at-footer-copyright-area .row { text-align: center !important; } .at-footer-links { justify-content: center !important; } /* --- ABOUT sec-2 grid --- */ .sec-2-num-grid { grid-template-columns: repeat(2, 1fr) !important; } } /* ================================================================ MD — Tablet portrait (768px – 991px) ================================================================ */ @media (min-width: 768px) and (max-width: 991px) { /* --- HERO --- */ .at-hero-abstract { width: 55% !important; right: -60px !important; opacity: 0.6 !important; } .at-hero-title { font-size: clamp(3rem, 7vw, 4.5rem) !important; } .at-hero-area { padding-top: 100px !important; padding-bottom: 60px !important; } .at-hero-content { margin-top: 0 !important; } .at-hero-area .container { padding-left: 32px !important; padding-right: 32px !important; } /* --- NAVBAR --- */ .at-header-area .container { padding-left: 28px !important; padding-right: 28px !important; } /* --- SERVICES --- */ .bs-service-section .col-lg-5 { width: 40% !important; max-width: 40% !important; flex: 0 0 40% !important; } .bs-service-section .col-lg-7 { width: 60% !important; max-width: 60% !important; flex: 0 0 60% !important; } /* --- COUNTER --- */ .at-sec8-area .d-flex { flex-wrap: wrap !important; gap: 0 !important; } .at-sec8-area .d-flex > div { flex: 0 0 50% !important; max-width: 50% !important; padding: 32px 20px !important; border-right: 1px solid rgba(255,255,255,0.08) !important; border-bottom: 1px solid rgba(255,255,255,0.08) !important; } .at-sec8-area .d-flex > div:nth-child(2n) { border-right: none !important; } .at-sec8-area .d-flex > div:nth-last-child(-n+2) { border-bottom: none !important; } /* --- TESTIMONIALS --- */ .bs-t-body { flex-direction: column !important; gap: 28px !important; } .bs-t-left { flex: none !important; width: 100% !important; } .bs-t-card { min-width: 300px !important; } /* --- CTA --- */ .at-banner-thumb h2.cta-heading { white-space: normal !important; transform: none !important; } .at-banner-thumb span.cta-desc { transform: none !important; } /* --- FOOTER --- */ .at-footer-area .row > [class*="col-lg-3"] { width: 50% !important; max-width: 50% !important; flex: 0 0 50% !important; margin-bottom: 36px !important; } .at-footer-copyright-area .row { text-align: center !important; } /* --- ABOUT sec-2 --- */ .sec-2-num-grid { grid-template-columns: repeat(2, 1fr) !important; } .sec-2-about .container { padding-left: 32px !important; padding-right: 32px !important; } /* --- CONTACT form card --- */ .sec-4-about .col-lg-7 { padding: 36px 28px !important; } /* --- HOME SECTION 9 --- */ .home-2-section-9 .container { padding-left: 36px !important; padding-right: 36px !important; } } /* ================================================================ LG — Tablet landscape / small laptop (992px – 1199px) ================================================================ */ @media (min-width: 992px) and (max-width: 1199px) { /* --- NAVBAR — tighten gap so all items fit --- */ .at-main-menu nav ul { gap: 24px !important; } .at-main-menu nav ul li a { font-size: 0.82rem !important; } .at-header-area .container { padding-left: 24px !important; padding-right: 24px !important; } /* --- HERO --- */ .at-hero-abstract { width: 58% !important; right: -40px !important; } .at-hero-title { font-size: clamp(3.2rem, 6vw, 5rem) !important; } .at-hero-area { padding-top: 100px !important; } .at-hero-content { margin-top: -60px !important; } /* --- COUNTER --- */ .at-sec8-area h1 { font-size: clamp(3rem, 5vw, 4.5rem) !important; } /* --- TESTIMONIALS --- */ .bs-t-left { flex: 0 0 220px !important; } .bs-t-card { min-width: 280px !important; } /* --- FOOTER --- */ .at-footer-area .row > [class*="col-lg-3"] { width: 25% !important; max-width: 25% !important; flex: 0 0 25% !important; } } /* ================================================================ XL — Standard desktop (1200px – 1439px) ================================================================ */ @media (min-width: 1200px) and (max-width: 1439px) { /* All major sections: standard spacing */ .at-about-area, .bs-service-section, .bs-testimonial-section, .bs-why-section, .alt-faq-area, .home-2-section-9, .sec-2-about, .sec-4-about { padding-top: 100px !important; padding-bottom: 100px !important; } /* Hero */ .at-hero-title { font-size: clamp(4rem, 6.5vw, 6.5rem) !important; } .at-hero-content { margin-top: -80px !important; } /* Counter */ .at-sec8-area h1 { font-size: clamp(3.5rem, 5vw, 5rem) !important; } } /* ================================================================ XXL — 2K / QHD monitors (1440px – 2559px) ================================================================ */ @media (min-width: 1440px) and (max-width: 2559px) { /* Cap all containers so content doesn't stretch too wide */ .container, .container-xl, .container-xxl, .container-fluid { max-width: 1400px !important; margin-left: auto !important; margin-right: auto !important; } .container-2200 { max-width: 1600px !important; margin-left: auto !important; margin-right: auto !important; } /* Scale section vertical spacing up */ .at-about-area, .bs-service-section, .bs-testimonial-section, .bs-why-section, .alt-faq-area, .home-2-section-9, .sec-2-about, .sec-4-about, .bs-contact-section, .contact-address-section { padding-top: 120px !important; padding-bottom: 120px !important; } /* Hero: a little extra breathing room */ .at-hero-area { padding-top: 120px !important; padding-bottom: 120px !important; } .at-hero-title { font-size: clamp(5rem, 6vw, 7.5rem) !important; } .at-hero-content { margin-top: -100px !important; } .at-hero-desc { font-size: 1.15rem !important; max-width: 640px !important; } /* Navbar inner padding */ .at-header-area .container { padding-left: 40px !important; padding-right: 40px !important; } /* Counter numbers */ .at-sec8-area h1 { font-size: clamp(4rem, 5.5vw, 6rem) !important; } /* Testimonial cards */ .bs-t-card { min-width: 360px !important; } .bs-t-left { flex: 0 0 320px !important; } /* Why choose section cards: 3-column row stays comfortable */ .bs-why-section .row { gap: 0 !important; } /* Footer */ .at-footer-area .container { max-width: 1400px !important; } /* About sec-2 container */ .sec-2-about .container, .home-2-section-9 .container { max-width: 1400px !important; padding-left: 60px !important; padding-right: 60px !important; } } /* ================================================================ UHD — 4K monitors (≥2560px) ================================================================ */ @media (min-width: 2560px) { /* Cap containers to prevent grotesquely wide content */ .container, .container-xl, .container-xxl, .container-fluid { max-width: 1800px !important; margin-left: auto !important; margin-right: auto !important; } .container-2200 { max-width: 2000px !important; margin-left: auto !important; margin-right: auto !important; } /* Generous section vertical spacing */ .at-about-area, .bs-service-section, .bs-testimonial-section, .bs-why-section, .alt-faq-area, .home-2-section-9, .sec-2-about, .sec-4-about { padding-top: 160px !important; padding-bottom: 160px !important; } /* Hero */ .at-hero-area { padding-top: 140px !important; padding-bottom: 140px !important; } .at-hero-title { font-size: clamp(6rem, 5.5vw, 8rem) !important; } .at-hero-content { margin-top: -120px !important; } .at-hero-desc { font-size: 1.25rem !important; max-width: 700px !important; } /* Body and paragraph text */ body { font-size: 1.05rem !important; } p { font-size: 1.05rem !important; } /* Navbar */ .at-header-area { padding: 20px 0 !important; } .at-header-area .container { padding-left: 60px !important; padding-right: 60px !important; } .at-header-logo img, .at-header-logo a img { height: 48px !important; } .at-main-menu nav ul { gap: 52px !important; } .at-main-menu nav ul li a { font-size: 1rem !important; } /* Counter numbers */ .at-sec8-area h1 { font-size: clamp(5rem, 6vw, 8rem) !important; } .at-sec8-area p { font-size: 1rem !important; } /* Testimonial cards */ .bs-t-card { min-width: 420px !important; padding: 40px 36px !important; } .bs-t-left { flex: 0 0 380px !important; } /* FAQ */ .alt-faq-area .at-faq-button { font-size: 1.25rem !important; } .alt-faq-area .at-faq-body p { font-size: 1.05rem !important; } /* CTA */ .at-banner-thumb h2.cta-heading { font-size: clamp(2.4rem, 3.5vw, 4rem) !important; } /* Footer */ .at-footer-area .container { max-width: 1800px !important; padding-left: 60px !important; padding-right: 60px !important; } .footer-col-label { font-size: 0.82rem !important; } .at-footer-links li a { font-size: 0.92rem !important; } /* About page */ .sec-2-about .container, .home-2-section-9 .container, .sec-4-about .container { max-width: 1800px !important; padding-left: 80px !important; padding-right: 80px !important; } .sec-4-heading { font-size: clamp(3rem, 4vw, 5.5rem) !important; } /* Back-to-top */ .back-to-top-wrapper { bottom: 40px !important; right: 40px !important; } .back-to-top-btn { width: 56px !important; height: 56px !important; } } /* ================================================================ UTILITY — safe defaults regardless of screen size ================================================================ */ /* Prevent tables from overflowing */ table { width: 100% !important; table-layout: auto; word-break: break-word; } /* Prevent long strings (emails, URLs) from blowing layouts */ a, p, li, td, th { overflow-wrap: break-word; word-break: break-word; } /* Section containers: safe horizontal padding on all screens */ .at-hero-area .container, .at-about-area .container, .bs-service-section .container, .bs-testimonial-section .container, .bs-why-section .container, .alt-faq-area .container, .at-sec8-area .container, .home-2-section-9 .container { width: 100% !important; } /* Ensure flex rows wrap naturally on all screens */ .at-hero-btn, .bs-t-arrows, .sec-4-social, .at-footer-links { flex-wrap: wrap !important; } /* Marquee/ticker: never exceed viewport */ .bs-brand-marquee-wrap, .bs-text-ticker-wrap, .at-brand-area { overflow: hidden !important; max-width: 100vw !important; } /* ================================================================ CONTACT SECTION — about-1.html (centred form + text addresses) ================================================================ */ .bs-contact-section { background: #ffffff; padding: 100px 0; } /* Contact page — Our Locations section desktop padding */ .contact-address-section { padding: 100px 0 !important; } /* Heading */ .bs-contact-eyebrow { display: block; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(0,0,0,0.40); margin-bottom: 10px; } .bs-contact-heading { font-size: clamp(1.8rem, 3vw, 2.6rem); font-weight: 700; color: #000000; line-height: 1.15; margin-bottom: 28px; letter-spacing: -0.02em; } /* ---- Form card ---- */ .bs-contact-form-card { background: #f8e13c; border-radius: 16px; padding: 36px 40px 28px; margin-bottom: 32px; } .bs-cfield { border-bottom: 1.5px solid rgba(0,0,0,0.18); } .bs-cfield input, .bs-cfield textarea { width: 100%; background: transparent; border: none; outline: none; font-size: 0.92rem; color: #000000; padding: 14px 0; font-family: 'DM Sans', sans-serif; display: block; } .bs-cfield input::placeholder, .bs-cfield textarea::placeholder { color: rgba(0,0,0,0.38); font-size: 0.88rem; } .bs-cfield textarea { resize: none; min-height: 100px; } .bs-contact-submit-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; margin-top: 24px; background: #000000; color: #f8e13c; border: none; padding: 14px 36px; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; font-family: 'DM Sans', sans-serif; border-radius: 50px; cursor: pointer; transition: background 0.2s ease; } .bs-contact-submit-btn:hover { background: #1a1a1a; } .bs-contact-disclaimer { font-size: 0.75rem; color: rgba(0,0,0,0.40); text-align: center; margin-top: 12px; margin-bottom: 0; } .bs-contact-disclaimer a { color: #000000; text-decoration: underline; } /* ---- Address list (horizontal, 3 columns) ---- */ .bs-addr-list { display: flex; gap: 0; border-top: 1px solid rgba(0,0,0,0.10); padding-top: 24px; } .bs-addr-body { flex: 1; padding: 0 24px; border-right: 1px solid rgba(0,0,0,0.10); } .bs-addr-body:first-child { padding-left: 0; } .bs-addr-body:last-child { padding-right: 0; border-right: none; } .bs-addr-city { display: block; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: #000000; margin-bottom: 8px; } .bs-addr-body p { font-size: 0.85rem !important; color: rgba(0,0,0,0.55) !important; line-height: 1.65 !important; margin-bottom: 4px !important; } .bs-addr-body a { color: rgba(0,0,0,0.60) !important; text-decoration: none; transition: color 0.2s; } .bs-addr-body a:hover { color: #000000 !important; } @media (max-width: 767px) { .bs-addr-list { flex-direction: column; gap: 20px; } .bs-addr-body { padding: 0 0 20px; border-right: none; border-bottom: 1px solid rgba(0,0,0,0.08); } .bs-addr-body:last-child { border-bottom: none; padding-bottom: 0; } } /* ================================================================ EDGE-TO-EDGE FIX — Stats strip, Footer & FAQ sections Removes Bootstrap container max-width cap so content fills the full viewport width on monitors/wide screens. Consistent edge padding replaces auto-centering. ================================================================ */ /* Stats counter strip (10K / 50K / 16K / 98%) — full bleed */ .at-sec8-area .container { max-width: 100% !important; width: 100% !important; padding-left: clamp(40px, 5vw, 100px) !important; padding-right: clamp(40px, 5vw, 100px) !important; margin-left: 0 !important; margin-right: 0 !important; } /* Footer — full bleed on all devices including monitors */ .at-footer-area .container { max-width: 100% !important; width: 100% !important; padding-left: clamp(40px, 5vw, 100px) !important; padding-right: clamp(40px, 5vw, 100px) !important; margin-left: 0 !important; margin-right: 0 !important; } /* FAQ sections (all accordion groups inside .sec-3-faqs) */ .sec-3-faqs .container { max-width: 100% !important; width: 100% !important; padding-left: clamp(40px, 5vw, 100px) !important; padding-right: clamp(40px, 5vw, 100px) !important; margin-left: 0 !important; margin-right: 0 !important; } /* ---- Mobile overrides for edge-to-edge containers ---- */ @media (max-width: 767px) { /* Restore comfortable mobile padding (20px) instead of the desktop clamp min */ .at-footer-area .container, .at-sec8-area .container, .sec-3-faqs .container { padding-left: 20px !important; padding-right: 20px !important; } /* Social links — tighter gap so Facebook/Instagram/LinkedIn fit on one row */ .at-hero-social { gap: 20px !important; } } /* ---- Responsive ---- */ @media (max-width: 767px) { .bs-contact-section { padding: 60px 0 !important; } .contact-address-section { padding: 60px 0 !important; } .bs-contact-form-card { padding: 28px 24px; border-radius: 12px; } } @media (max-width: 575px) { .bs-contact-form-card { padding: 24px 16px; } } /* ========================================================== SERVICES PAGE — RESPONSIVE HERO & GRID FIXES ========================================================== */ /* Services-1 hero — ensure it scales on all devices */ .sec-1-services { min-height: 100vh !important; padding-top: 120px !important; padding-bottom: 80px !important; } /* Back-to-top: hide globally (removed from pages) */ .back-to-top-wrapper { display: none !important; } /* ── Contact section before footer — white bg, black text, yellow accent ── */ .sec-4-about { background: #ffffff !important; } .sec-4-about .bs-contact-eyebrow { color: rgba(0,0,0,0.40) !important; } .sec-4-about .bs-contact-heading { color: #000000 !important; } /* ── Curvy grids: services page cards ── */ .at-faq-item { border-radius: 12px !important; overflow: hidden; } .bs-addr-body { border-radius: 10px; } /* ── Services-1 hero font responsive ── */ @media (max-width: 767px) { .sec-1-services .section-title { font-size: clamp(28px, 9vw, 54px) !important; white-space: normal !important; } .sec-1-services { padding-top: 90px !important; padding-bottom: 60px !important; } } @media (max-width: 480px) { .sec-1-services .section-title { font-size: clamp(24px, 10vw, 40px) !important; } } /* ========================================================== HERO SECTION — UNIFIED STANDARD ACROSS ALL INNER PAGES Reference: services-1.html Font: DM Sans 600, clamp(32px,6vw,90px), line-height 1.15 Padding: responsive clamp | same background pattern ========================================================== */ /* ── All inner-page hero section containers ── */ .sec-1-about, .sec-1-services, .sec-1-faqs, .port-hero, .sec-1-services-details, .sec-1-portfolio-2, .sec-1-portfolio-3, .sec-1-portfolio-4, .sec-1-portfolio-5, .sec-1-portfolio-6, .sec-1-portfolio-details-2, .sec-1-404 { min-height: auto !important; padding-top: 120px !important; padding-bottom: 80px !important; display: flex !important; align-items: center !important; justify-content: center !important; position: relative !important; overflow: hidden !important; } /* ── Unified hero heading font: section-title within all hero wrappers ── */ .sec-1-about .section-title, .sec-1-services .section-title, .sec-1-faqs .section-title, .port-hero .section-title, .sec-1-services-details .section-title, #sd-title { font-size: clamp(32px, 6vw, 90px) !important; font-family: 'DM Sans', sans-serif !important; font-weight: 600 !important; line-height: 1.15 !important; color: #ffffff !important; white-space: normal !important; letter-spacing: -0.02em !important; } /* ── Portfolio pages 2–6 + 404 use fz-ds-1 class in hero wrappers ── */ .sec-1-portfolio-2 .fz-ds-1, .sec-1-portfolio-3 .fz-ds-1, .sec-1-portfolio-4 .fz-ds-1, .sec-1-portfolio-5 .fz-ds-1, .sec-1-portfolio-6 .fz-ds-1, .sec-1-portfolio-details-2 .fz-ds-1, .sec-1-404 .fz-ds-1 { font-size: clamp(32px, 6vw, 90px) !important; font-family: 'DM Sans', sans-serif !important; font-weight: 600 !important; line-height: 1.15 !important; color: #ffffff !important; letter-spacing: -0.02em !important; } /* ── Eyebrow labels — yellow, uppercase, same size on all pages ── */ .sec-1-about .at-btn.common-black span, .port-hero__label, .hero-breadcrumb a, .hero-breadcrumb span:not(.sep) { font-size: 13px !important; font-weight: 700 !important; letter-spacing: 0.14em !important; text-transform: uppercase !important; color: #f8e13c !important; font-family: 'DM Sans', sans-serif !important; } /* ── Mobile: 480px–767px ── */ @media (max-width: 767px) { .sec-1-about .section-title, .sec-1-services .section-title, .sec-1-faqs .section-title, .port-hero .section-title, .sec-1-services-details .section-title, #sd-title, .sec-1-portfolio-2 .fz-ds-1, .sec-1-portfolio-3 .fz-ds-1, .sec-1-portfolio-4 .fz-ds-1, .sec-1-portfolio-5 .fz-ds-1, .sec-1-portfolio-6 .fz-ds-1, .sec-1-portfolio-details-2 .fz-ds-1, .sec-1-404 .fz-ds-1 { font-size: clamp(28px, 9vw, 54px) !important; } .sec-1-about, .sec-1-services, .sec-1-faqs, .port-hero, .sec-1-services-details, .sec-1-portfolio-2, .sec-1-portfolio-3, .sec-1-portfolio-4, .sec-1-portfolio-5, .sec-1-portfolio-6, .sec-1-portfolio-details-2, .sec-1-404 { padding-top: 90px !important; padding-bottom: 60px !important; } } /* ── Small mobile: below 480px ── */ @media (max-width: 480px) { .sec-1-about .section-title, .sec-1-services .section-title, .sec-1-faqs .section-title, .port-hero .section-title, .sec-1-services-details .section-title, #sd-title, .sec-1-portfolio-2 .fz-ds-1, .sec-1-portfolio-3 .fz-ds-1, .sec-1-portfolio-4 .fz-ds-1, .sec-1-portfolio-5 .fz-ds-1, .sec-1-portfolio-6 .fz-ds-1, .sec-1-portfolio-details-2 .fz-ds-1, .sec-1-404 .fz-ds-1 { font-size: clamp(24px, 10vw, 40px) !important; } .sec-1-about, .sec-1-services, .sec-1-faqs, .port-hero, .sec-1-services-details, .sec-1-portfolio-2, .sec-1-portfolio-3, .sec-1-portfolio-4, .sec-1-portfolio-5, .sec-1-portfolio-6, .sec-1-portfolio-details-2, .sec-1-404 { padding-top: 70px !important; padding-bottom: 50px !important; } }