/** * ============================================================ * THE CENTURY PUBLISHERS — Elegant & Elite Theme * ============================================================ * Palette : Refrence&Styling/colorTheme.md * Reference: Refrence&Styling/webrefrence.png * Fonts : Playfair Display (headings) + Source Serif 4 (body) * Load : AFTER style.css ➜ style-web.css ➜ responsive.css * Activate : add class="theme-elegant" to * ============================================================ */ /* ─── Font Import ─────────────────────────────────────────── */ /* Poppins is loaded by the base style-web.css — no additional import needed */ /* ─── Design Tokens ───────────────────────────────────────── */ body.theme-elegant { /* Palette */ --navy: #001F3F; --navy-deep: #001530; --navy-light: #002B57; --gold: #db0000; --gold-light: #e63333; --gold-pale: rgba(219, 0, 0, 0.12); --charcoal: #333333; --charcoal-light:#555555; --warm-white: #FAF8F5; --soft-white: #F5F5F5; --pure-white: #FFFFFF; --crimson: #db0000; --crimson-light: #e63333; /* Typography */ --ff-heading: 'Poppins', sans-serif; --ff-body: 'Poppins', sans-serif; /* Elevation */ --shadow-xs: 0 1px 4px rgba(0, 31, 63, 0.04); --shadow-sm: 0 2px 12px rgba(0, 31, 63, 0.06); --shadow-md: 0 4px 24px rgba(0, 31, 63, 0.10); --shadow-lg: 0 8px 40px rgba(0, 31, 63, 0.14); --shadow-gold:0 4px 20px rgba(219, 0, 0, 0.30); /* Motion */ --ease: cubic-bezier(0.25, 0.46, 0.45, 0.94); --dur: 0.35s; /* Borders */ --border-gold: 1px solid rgba(219, 0, 0, 0.25); --border-gold-medium: 1px solid rgba(219, 0, 0, 0.45); --border-gold-strong: 2px solid var(--gold); /* Root styles */ background-color: var(--warm-white); color: var(--charcoal); font-family: var(--ff-body); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* ─── Global Typography ───────────────────────────────────── */ body.theme-elegant h1, body.theme-elegant h2, body.theme-elegant h3, body.theme-elegant h4, body.theme-elegant h5, body.theme-elegant h6 { font-family: var(--ff-heading); color: var(--navy); font-weight: 700; letter-spacing: -0.01em; } body.theme-elegant h1 { line-height: 1.15; } body.theme-elegant h2 { line-height: 1.2; } body.theme-elegant h3 { line-height: 1.25; font-weight: 600; } body.theme-elegant p, body.theme-elegant ul li, body.theme-elegant ul li a { font-family: var(--ff-body); color: var(--charcoal); line-height: 1.75; } body.theme-elegant a { font-family: var(--ff-body); transition: color var(--dur) var(--ease); } body.theme-elegant .primary-color { color: var(--gold) !important; } body.theme-elegant .title { color: var(--gold) !important; } /* ─── Selection ───────────────────────────────────────────── */ body.theme-elegant ::selection { background: rgba(219, 0, 0, 0.2); color: var(--navy); } /* ─── Disable pulse hover on images (too casual) ──────────── */ body.theme-elegant img:hover { animation: none !important; -webkit-animation: none !important; -moz-animation: none !important; } /* ══════════════════════════════════════════════════════════════ HEADER — Single navy shade (#001530) for whole header area ══════════════════════════════════════════════════════════════ */ body.theme-elegant header { background: var(--navy-deep); position: relative; z-index: 100; } /* Ensure nav-bar area (transparent) doesn’t show a different blue from base CSS */ body.theme-elegant header .nav-bar { background: transparent !important; } /* ══════════════════════════════════════════════════════════════ TOP BAR — Bold crimson gradient, radical scrolling feel ══════════════════════════════════════════════════════════════ */ body.theme-elegant .top-bar { background: linear-gradient(90deg, var(--crimson) 0%, #e63333 50%, var(--crimson) 100%); padding: 6px 0; border-bottom: none; position: relative; overflow: hidden; } body.theme-elegant .top-bar::before { content: ""; position: absolute; top: 0; left: -100%; width: 200%; height: 100%; background: linear-gradient(90deg, transparent 0%, rgba(219, 0, 0, 0.08) 25%, transparent 50%); animation: topbar-shimmer 4s linear infinite; } @keyframes topbar-shimmer { 0% { transform: translateX(0); } 100% { transform: translateX(50%); } } body.theme-elegant .top-bar h6 { color: var(--pure-white) !important; font-family: var(--ff-body); font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3); } body.theme-elegant .top-bar .menu.social-icons li a { color: var(--pure-white) !important; font-family: var(--ff-body); font-size: 12px; font-weight: 600; letter-spacing: 0.02em; transition: color var(--dur) var(--ease); } body.theme-elegant .top-bar .menu.social-icons li a:hover { color: var(--pure-white) !important; } body.theme-elegant .top-bar ul.menu.social-icons li a i { color: var(--pure-white) !important; } body.theme-elegant .top-bar .side-bar-one::after { background: rgba(219, 0, 0, 0.5); } /* ══════════════════════════════════════════════════════════════ NAV BAR — Transparent, sits on hero seamlessly ══════════════════════════════════════════════════════════════ */ /* One background: transparent so header navy shows; one accent: gold */ body.theme-elegant .nav-bar { background: transparent !important; padding: 14px 0 16px; border-bottom: 1px solid rgba(219, 0, 0, 0.15); position: relative; z-index: 10; } body.theme-elegant .nav-bar ul.menu li a { color: var(--soft-white) !important; font-family: var(--ff-body); font-weight: 600; font-size: 13px; text-transform: uppercase; letter-spacing: 0.10em; transition: all var(--dur) var(--ease); } body.theme-elegant .nav-bar ul.menu li a:hover, body.theme-elegant .nav-bar ul.menu li a.active, body.theme-elegant .nav-bar ul.menu li a:focus { color: var(--gold) !important; background: transparent !important; } body.theme-elegant .nav-bar ul li a.active::before, body.theme-elegant .nav-bar ul.menu li a:hover::before { background: var(--gold); height: 2px; bottom: -8px; } body.theme-elegant .nav-bar ul.menu li a i.fa-phone-alt { color: var(--gold); } /* ── Services Dropdown (has-dropdown / sub-menu) ─────────── */ /* Hide ALL sub-menus everywhere by default */ body.theme-elegant .sub-menu { display: none !important; list-style: none; padding: 0; margin: 0; } body.theme-elegant .nav-bar ul.menu > li.has-dropdown { position: relative; } body.theme-elegant .nav-bar ul.menu li.has-dropdown > a i { font-size: 10px; margin-left: 3px; } /* Level 1: main dropdown — appears below "Services" on hover */ body.theme-elegant .nav-bar ul.menu > li.has-dropdown > .sub-menu { position: absolute; top: 100%; left: 0; background: var(--navy-deep); padding: 6px 0; min-width: 320px; border-radius: 0 0 4px 4px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5); z-index: 1000; border-top: 2px solid var(--gold); } body.theme-elegant .nav-bar ul.menu > li.has-dropdown:hover > .sub-menu { display: block !important; } /* Category items in main dropdown */ body.theme-elegant .nav-bar .sub-menu > li { display: block !important; padding: 0; } body.theme-elegant .nav-bar .sub-menu > li > a { display: flex; align-items: center; justify-content: space-between; padding: 10px 20px; color: var(--soft-white) !important; font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; white-space: nowrap; transition: all 0.2s ease; } body.theme-elegant .nav-bar .sub-menu > li > a:hover { background: rgba(219, 0, 0, 0.18); color: var(--gold) !important; } body.theme-elegant .nav-bar .sub-menu > li > a::before { display: none !important; } /* Level 2: flyout sub-menu — appears to the RIGHT on hover */ body.theme-elegant .nav-bar .sub-menu > li.has-dropdown { position: relative; } body.theme-elegant .nav-bar .sub-menu > li.has-dropdown > .sub-menu { position: absolute; top: 0; left: 100%; background: var(--navy-deep); padding: 6px 0; min-width: 250px; border-radius: 0 4px 4px 0; box-shadow: 8px 10px 30px rgba(0, 0, 0, 0.45); z-index: 1001; border-top: 2px solid var(--gold); border-left: 1px solid rgba(219, 0, 0, 0.3); } /* Show flyout ONLY when hovering on that specific category */ body.theme-elegant .nav-bar .sub-menu > li.has-dropdown:hover > .sub-menu { display: block !important; } /* Arrow icon on category items — flex keeps it on the same line */ body.theme-elegant .nav-bar .sub-menu > li.has-dropdown > a i { font-size: 10px; margin-left: 12px; flex-shrink: 0; } /* Sub-item links in the flyout */ body.theme-elegant .nav-bar .sub-menu .sub-menu > li > a { font-weight: 500; text-transform: none; letter-spacing: 0.02em; padding: 9px 20px; } body.theme-elegant .nav-bar .sub-menu .sub-menu > li > a:hover { padding-left: 26px; background: rgba(219, 0, 0, 0.15); color: var(--gold) !important; } /* Sticky nav — solid on scroll */ body.theme-elegant .sticky-nav-bar { background: var(--navy-deep) !important; box-shadow: 0 3px 20px rgba(0, 0, 0, 0.35); border-bottom: 1px solid rgba(219, 0, 0, 0.2); } /* Logo on navy bar */ body.theme-elegant .nav-bar .logo img { filter: brightness(1.1) saturate(1.12); transition: filter var(--dur) var(--ease); } body.theme-elegant .nav-bar .logo img:hover { filter: brightness(1.2) saturate(1.2); animation: none !important; } /* Nav Get Started button — gold on navy */ body.theme-elegant .nav-bar .btn-red { background: var(--gold) !important; border-color: var(--gold) !important; color: var(--navy) !important; font-family: var(--ff-body); font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; padding: 9px 24px !important; border-radius: 2px; transition: all var(--dur) var(--ease); } body.theme-elegant .nav-bar .btn-red:hover { background: var(--pure-white) !important; border-color: var(--pure-white) !important; color: var(--navy) !important; box-shadow: var(--shadow-gold); } body.theme-elegant .nav-bar .btn-red:hover::before { display: none; } /* Dropdown menus — same navy as header for single shade */ body.theme-elegant header nav ul li .dropdown-menu { background: var(--navy-deep); border: var(--border-gold); box-shadow: var(--shadow-md); } body.theme-elegant header nav ul li .dropdown-menu a { color: var(--soft-white) !important; font-family: var(--ff-body); font-size: 13px !important; transition: all var(--dur) var(--ease); } body.theme-elegant header nav ul li .dropdown-menu a:hover, body.theme-elegant header nav ul li .dropdown-menu a.active { background: var(--gold) !important; color: var(--navy) !important; } body.theme-elegant .dropdown-menu-submenu { background: var(--navy-deep) !important; } /* ══════════════════════════════════════════════════════════════ HERO / MAIN BANNER — Rich layered navy-to-crimson Header + banner stack naturally (no overlap). Base template uses margin-top: -150px on .banner to pull hero behind transparent nav; we use a solid header (navy + top-bar + transparent nav-bar) so margin-top: 0 and normal flow. ══════════════════════════════════════════════════════════════ */ body.theme-elegant .banner { margin-top: 0 !important; } body.theme-elegant .banner.main-banner { /* Multi-layer gradient: main sweep + subtle radial highlights */ background: /* Soft gold radial glow top-left for warmth */ radial-gradient(ellipse at 15% 20%, rgba(219, 0, 0, 0.06) 0%, transparent 50%), /* Crimson radial glow bottom-right */ radial-gradient(ellipse at 85% 80%, rgba(219, 0, 0, 0.25) 0%, transparent 50%), /* Main diagonal sweep */ linear-gradient( 160deg, #001530 0%, #001F3F 40%, #0A1628 60%, #2A0A0A 85%, #4A0E0E 100% ); padding: 70px 0 55px !important; padding-top: 40px !important; position: relative; overflow: hidden; } /* Decorative diagonal line — subtle luxury accent */ body.theme-elegant .banner.main-banner::before { content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: /* Thin diagonal gold line */ linear-gradient(135deg, transparent 49.5%, rgba(219, 0, 0, 0.07) 49.5%, rgba(219, 0, 0, 0.07) 50.5%, transparent 50.5%), /* Second thin diagonal */ linear-gradient(135deg, transparent 29.5%, rgba(219, 0, 0, 0.04) 29.5%, rgba(219, 0, 0, 0.04) 30.5%, transparent 30.5%); pointer-events: none; z-index: 1; } /* Gold bottom edge — clean transition to content */ body.theme-elegant .banner.main-banner::after { content: ""; position: absolute; bottom: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, transparent 0%, var(--gold) 30%, var(--gold) 70%, transparent 100%); z-index: 2; } /* Ensure content sits above decorative layers */ body.theme-elegant .banner.main-banner > .container { position: relative; z-index: 3; } body.theme-elegant .banner.main-banner h1 { color: var(--pure-white) !important; text-shadow: 0 2px 20px rgba(0, 0, 0, 0.3); font-size: 36px; line-height: 1.2; } body.theme-elegant .banner.main-banner h1 .title { color: var(--gold) !important; font-family: var(--ff-heading); font-weight: 500; font-style: italic; font-size: 18px; letter-spacing: 0.04em; display: block; margin-bottom: 6px; text-transform: uppercase; } body.theme-elegant .banner.main-banner p { color: rgba(245, 245, 245, 0.90) !important; font-size: 14px; line-height: 1.7; } body.theme-elegant .banner.main-banner .list-item li, body.theme-elegant .banner.main-banner .list-item li::marker { color: var(--soft-white) !important; } body.theme-elegant .banner.main-banner .list-item li::marker { color: var(--gold) !important; } body.theme-elegant h1::before { background: var(--gold); height: 3px; } /* ══════════════════════════════════════════════════════════════ BUTTONS — Sharp, luxurious ══════════════════════════════════════════════════════════════ */ body.theme-elegant .btn-red { background: var(--crimson) !important; border: 2px solid var(--crimson) !important; color: var(--pure-white) !important; font-family: var(--ff-body); font-weight: 700; font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; border-radius: 2px; transition: all var(--dur) var(--ease); } body.theme-elegant .btn-red:hover { background: var(--gold) !important; border-color: var(--gold) !important; color: var(--navy) !important; box-shadow: var(--shadow-gold); transform: translateY(-1px); } body.theme-elegant .btn-blue { background: transparent !important; border: 2px solid var(--gold) !important; color: var(--gold) !important; font-family: var(--ff-body); font-weight: 700; font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; border-radius: 2px; transition: all var(--dur) var(--ease); } body.theme-elegant .btn-blue:hover { background: var(--gold) !important; border-color: var(--gold) !important; color: var(--navy) !important; box-shadow: var(--shadow-gold); transform: translateY(-1px); } /* Banner / CTA button context */ body.theme-elegant .banner .btn-blue, body.theme-elegant .cta-signup .btn-blue { border-color: var(--gold) !important; color: var(--gold) !important; } body.theme-elegant .banner .btn-blue:hover, body.theme-elegant .cta-signup .btn-blue:hover { background: var(--gold) !important; border-color: var(--gold) !important; color: var(--navy) !important; } body.theme-elegant .banner .btn-red:hover { border-color: var(--gold) !important; color: var(--navy) !important; } /* ══════════════════════════════════════════════════════════════ GET STARTED FORM — Hero & Inline ══════════════════════════════════════════════════════════════ */ body.theme-elegant .banner .get-started-form form, body.theme-elegant .get-started-form.main-form { background: linear-gradient(170deg, rgba(0, 21, 48, 0.97) 0%, rgba(0, 31, 63, 0.93) 100%); border: var(--border-gold-medium); border-radius: 6px; box-shadow: var(--shadow-lg); position: relative; overflow: hidden; } /* Gold accent line at top */ body.theme-elegant .banner .get-started-form form::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, transparent 0%, var(--gold) 50%, transparent 100%); z-index: 2; } body.theme-elegant .banner .get-started-form h3, body.theme-elegant .get-started-form.main-form h3 { color: var(--soft-white) !important; font-family: var(--ff-heading); font-weight: 700; font-size: 24px; line-height: 1.3; } body.theme-elegant .banner .get-started-form h3 strong, body.theme-elegant .get-started-form.main-form h3 strong { font-weight: inherit; font-size: inherit; line-height: inherit; vertical-align: baseline; } body.theme-elegant .banner .get-started-form h3 strong span, body.theme-elegant .get-started-form.main-form h3 strong span { color: var(--gold) !important; font-weight: inherit; font-size: inherit; line-height: inherit; vertical-align: baseline; } body.theme-elegant .banner input.input-control, body.theme-elegant .get-started-form.main-form input.input-control, body.theme-elegant .get-started-form.main-form select#ser-select, body.theme-elegant .get-started-form.main-form textarea { background: rgba(245, 245, 245, 0.95) !important; border: 1px solid rgba(219, 0, 0, 0.20) !important; color: var(--charcoal) !important; font-family: var(--ff-body); font-size: 13px; border-radius: 3px !important; transition: all var(--dur) var(--ease); } body.theme-elegant .banner input.input-control:focus, body.theme-elegant .get-started-form.main-form input.input-control:focus, body.theme-elegant .get-started-form.main-form select:focus, body.theme-elegant .get-started-form.main-form textarea:focus { border-color: var(--gold) !important; outline: none; background: var(--pure-white) !important; box-shadow: 0 0 0 3px rgba(219, 0, 0, 0.10); } body.theme-elegant .banner .get-started-form .label_fnt, body.theme-elegant .get-started-form .label_fnt a { color: rgba(245, 245, 245, 0.80) !important; font-family: var(--ff-body); } body.theme-elegant .get-started-form .label_fnt a { text-decoration-color: var(--gold); } body.theme-elegant select:focus { background: rgba(0, 31, 63, 0.15) !important; color: var(--charcoal) !important; } /* ══════════════════════════════════════════════════════════════ SECTIONS — Alternating warm/pure white backgrounds ══════════════════════════════════════════════════════════════ */ body.theme-elegant section { background-color: var(--warm-white); } body.theme-elegant .services, body.theme-elegant .am-pub, body.theme-elegant .faq-sec, body.theme-elegant .web-tabs.portfolio { background-color: var(--pure-white); } body.theme-elegant .why-choose h2, body.theme-elegant .services h2, body.theme-elegant .am-pub h2, body.theme-elegant .faq-sec h2, body.theme-elegant .web-tabs.portfolio h2, body.theme-elegant .porfilio-slider h2 { color: var(--navy) !important; font-family: var(--ff-heading); } /* Section subtitle text below h2 */ body.theme-elegant .services > .container > p, body.theme-elegant .web-tabs.portfolio > .container > p, body.theme-elegant .porfilio-slider > .container > p, body.theme-elegant .am-pub > .container > p { color: var(--charcoal-light) !important; } /* Section h2 .primary-color span (the accent dot) */ body.theme-elegant h2 .primary-color, body.theme-elegant h2 span.primary-color { color: var(--gold) !important; font-weight: 700; } /* ══════════════════════════════════════════════════════════════ WHY CHOOSE US ══════════════════════════════════════════════════════════════ */ body.theme-elegant .why-choose p { color: var(--charcoal-light) !important; } /* Outline button on light sections — use navy border for contrast */ body.theme-elegant .why-choose .btn-blue { border-color: var(--navy) !important; color: var(--navy) !important; } body.theme-elegant .why-choose .btn-blue:hover { background: var(--navy) !important; border-color: var(--navy) !important; color: var(--gold) !important; box-shadow: var(--shadow-md); } body.theme-elegant .why-choose h3 { color: var(--navy) !important; font-family: var(--ff-heading); font-weight: 600; } body.theme-elegant .why-choose h3::before { background: var(--gold); } body.theme-elegant .why-choose .list-item li { color: var(--charcoal) !important; } body.theme-elegant .why-choose .list-item li::marker { color: var(--gold) !important; } /* Why-choose form inputs */ body.theme-elegant .why-choose .get-started-form.main-form select#ser-select, body.theme-elegant .why-choose input.input-control, body.theme-elegant .why-choose textarea.required.input-control.form-control { background: rgba(0, 31, 63, 0.06) !important; color: var(--charcoal) !important; border: 1px solid rgba(219, 0, 0, 0.25) !important; } body.theme-elegant .why-choose .input-control::placeholder, body.theme-elegant .why-choose select#ser-select { color: #888 !important; } /* ══════════════════════════════════════════════════════════════ SERVICE BOXES ══════════════════════════════════════════════════════════════ */ /* Flex layout for equal-height service cards */ body.theme-elegant .parent-ser-box > .row { display: flex; flex-wrap: wrap; } body.theme-elegant .parent-ser-box > .row > [class*="col-"] { display: flex; flex-direction: column; } body.theme-elegant .services .ser-box { background: var(--pure-white); box-shadow: var(--shadow-sm); border: var(--border-gold); border-radius: 6px; transition: all var(--dur) var(--ease); flex: 1; display: flex; flex-direction: column; height: auto !important; min-height: 170px; } body.theme-elegant .services .ser-box h4 { color: var(--navy) !important; font-family: var(--ff-heading); font-weight: 600; } body.theme-elegant .services .ser-box h4:before { background: var(--gold); height: 2px; } body.theme-elegant .services .ser-box p { color: var(--charcoal) !important; flex: 1; } body.theme-elegant .ser-box:before { background-color: var(--navy); border-radius: 6px; } body.theme-elegant .services .ser-box:hover { border-color: var(--gold); box-shadow: var(--shadow-md); } body.theme-elegant .services .ser-box:hover h4, body.theme-elegant .services .ser-box:hover h5, body.theme-elegant .services .ser-box:hover p { color: var(--pure-white) !important; } /* ══════════════════════════════════════════════════════════════ KEY FEATURES — Gray Boxes ══════════════════════════════════════════════════════════════ */ body.theme-elegant .gray-box { background: var(--pure-white); box-shadow: var(--shadow-sm); border: var(--border-gold); border-radius: 6px; transition: all var(--dur) var(--ease); } body.theme-elegant .gray-box h6 { color: var(--charcoal); font-family: var(--ff-body); font-weight: 500; font-size: 14px; } body.theme-elegant .gray-box img { transition: filter var(--dur) var(--ease); } body.theme-elegant .gray-box:hover { background: var(--navy); border-color: var(--gold); box-shadow: var(--shadow-md); transform: translateY(-4px); cursor: pointer; } body.theme-elegant .gray-box:hover h6 { color: rgba(173, 216, 230, 0.9) !important; } body.theme-elegant .gray-box:hover img { filter: brightness(0) saturate(100%) invert(79%) sepia(30%) saturate(500%) hue-rotate(163deg) brightness(1.1); } /* ══════════════════════════════════════════════════════════════ CTA SIGNUP ══════════════════════════════════════════════════════════════ */ body.theme-elegant .cta-signup { background: linear-gradient(160deg, rgba(0, 21, 48, 0.97) 0%, rgba(0, 31, 63, 0.94) 55%, rgba(219, 0, 0, 0.80) 100%); border-radius: 10px; box-shadow: var(--shadow-md); border: none; position: relative; overflow: hidden; padding: 50px 40px; margin-top: 60px; margin-bottom: 60px; } body.theme-elegant .cta-signup::before { content: ""; position: absolute; top: -60px; right: -60px; width: 220px; height: 220px; background: radial-gradient(circle, rgba(219, 0, 0, 0.06) 0%, transparent 70%); border-radius: 50%; pointer-events: none; } body.theme-elegant .cta-signup::after { content: ""; position: absolute; bottom: -40px; left: -40px; width: 160px; height: 160px; background: radial-gradient(circle, rgba(219, 0, 0, 0.08) 0%, transparent 70%); border-radius: 50%; pointer-events: none; } body.theme-elegant .cta-signup h2 { color: var(--soft-white) !important; text-shadow: 0 1px 6px rgba(0, 0, 0, 0.12); font-size: 20px !important; font-weight: 500 !important; line-height: 1.6 !important; letter-spacing: 0 !important; padding: 0 !important; } body.theme-elegant .cta-signup img { filter: none; } /* ══════════════════════════════════════════════════════════════ PORTFOLIO / TABS ══════════════════════════════════════════════════════════════ */ body.theme-elegant .web-tabs .borrow-tab { box-shadow: var(--shadow-sm); border: var(--border-gold); border-radius: 6px; } body.theme-elegant .borrow-tab .nav-tabs li a { color: var(--charcoal); font-family: var(--ff-body); font-weight: 600; transition: all var(--dur) var(--ease); border-radius: 3px; } body.theme-elegant .borrow-tab .nav-tabs li a.active { color: var(--navy) !important; background: var(--gold-pale); border-left: 3px solid var(--gold); } body.theme-elegant .borrow-tab .nav-tabs li a:hover { color: var(--gold); background: rgba(219, 0, 0, 0.06); } body.theme-elegant .info-work h4 { color: var(--navy) !important; font-family: var(--ff-heading); } body.theme-elegant .info-work h4 span.primary { color: var(--gold) !important; } body.theme-elegant .info-work p { color: var(--charcoal) !important; } /* Video slider */ body.theme-elegant .porfilio-slider { background: var(--warm-white); } body.theme-elegant .porfilio-slider iframe { border-radius: 6px; box-shadow: var(--shadow-md); } /* ══════════════════════════════════════════════════════════════ TESTIMONIALS ══════════════════════════════════════════════════════════════ */ body.theme-elegant .services#testmonial .ser-box { background: var(--pure-white); border: var(--border-gold); border-radius: 6px; transition: all var(--dur) var(--ease); } body.theme-elegant .services#testmonial .ser-box:hover { box-shadow: var(--shadow-md); border-color: var(--gold); transform: translateY(-2px); } /* Same hover as "Take the First Step" section: navy overlay expands, text turns white */ body.theme-elegant .services#testmonial .ser-box:hover:before { clip-path: circle(150% at 50% 50%); } body.theme-elegant .services#testmonial .ser-box:hover h5, body.theme-elegant .services#testmonial .ser-box:hover p, body.theme-elegant .services#testmonial .ser-box:hover .parent-star i, body.theme-elegant .services#testmonial .ser-box:hover i.fas.fa-quote-left { color: var(--pure-white) !important; } body.theme-elegant .services#testmonial .ser-box i.fas.fa-quote-left { color: var(--gold) !important; opacity: 0.65; } body.theme-elegant .services#testmonial .ser-box h5 { color: var(--navy); font-family: var(--ff-heading); font-weight: 700; } body.theme-elegant .services#testmonial .ser-box .parent-star i { color: var(--gold) !important; } /* ══════════════════════════════════════════════════════════════ TRUSTPILOT BADGE & CTA ALIGNMENT ══════════════════════════════════════════════════════════════ */ body.theme-elegant .trustpilot-badge { display: inline-block; border: 1.5px solid #ddd; border-radius: 4px; padding: 8px 18px; margin-bottom: 12px; text-decoration: none; color: inherit; cursor: pointer; transition: border-color 0.2s, box-shadow 0.2s; } body.theme-elegant .trustpilot-badge:hover { border-color: #00b67a; box-shadow: 0 0 0 1px #00b67a; } body.theme-elegant .trustpilot-badge .tp-badge { font-family: var(--ff-body); font-size: 14px; font-weight: 500; color: #333; display: inline-flex; align-items: center; } body.theme-elegant .trustpilot-badge .tp-badge .tp-star { color: #00b67a; font-size: 18px; } body.theme-elegant .services#testmonial .trustpilot-badge, body.theme-elegant .services#testmonial .btn-blue { display: block; width: 220px; text-align: center; box-sizing: border-box; } body.theme-elegant .services#testmonial .btn-blue { margin-top: 0; padding-top: 10px; padding-bottom: 10px; } /* ══════════════════════════════════════════════════════════════ FAQ ══════════════════════════════════════════════════════════════ */ body.theme-elegant .faq-sec .card { border: none; border-bottom: 1px solid rgba(219, 0, 0, 0.18); box-shadow: none; border-radius: 0; background: transparent; } body.theme-elegant .faq-sec .card-header { background: transparent; } body.theme-elegant .faq-sec .card-header a { color: var(--navy) !important; font-family: var(--ff-heading); font-weight: 600; font-size: 17px; transition: color var(--dur) var(--ease); } body.theme-elegant .faq-sec .card-header a:hover { color: var(--gold) !important; } #accordion-location .card-header a.card-link.collapsed:after, body.theme-elegant .faq-sec .card-header a.card-link.collapsed:after, body.theme-elegant .faq-sec .card-header a.card-link:after { color: var(--gold) !important; } body.theme-elegant .faq-sec .card-body p { color: var(--charcoal); font-size: 14px; line-height: 1.8; } /* ══════════════════════════════════════════════════════════════ BOTTOM FORM ══════════════════════════════════════════════════════════════ */ body.theme-elegant .bottom-form form { background: linear-gradient(160deg, rgba(0, 21, 48, 0.97) 0%, rgba(0, 31, 63, 0.94) 55%, rgba(219, 0, 0, 0.80) 100%); border-radius: 6px; position: relative; overflow: hidden; } /* Gold accent line at top — matching hero form */ body.theme-elegant .bottom-form form::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, transparent 0%, var(--gold) 50%, transparent 100%); z-index: 2; } body.theme-elegant .bottom-form .get-started-form.main-form form { border: var(--border-gold-medium); } body.theme-elegant .bottom-form .get-started-form.main-form h2 { color: var(--soft-white) !important; font-family: var(--ff-heading); text-shadow: 0 1px 6px rgba(0, 0, 0, 0.12); } body.theme-elegant .bottom-form .get-started-form.main-form p, body.theme-elegant .bottom-form .get-started-form.main-form p a { color: rgba(245, 245, 245, 0.88) !important; } body.theme-elegant .bottom-form .get-started-form.main-form p a { text-decoration-color: var(--gold); } body.theme-elegant .bottom-form .get-started-form.main-form form input.input-control, body.theme-elegant .bottom-form .get-started-form.main-form select#ser-select, body.theme-elegant .bottom-form .get-started-form.main-form textarea { background: rgba(245, 245, 245, 0.95) !important; border: 1px solid rgba(219, 0, 0, 0.25) !important; color: var(--charcoal) !important; font-family: var(--ff-body); border-radius: 3px !important; transition: all var(--dur) var(--ease); } body.theme-elegant .bottom-form .get-started-form.main-form form input.input-control:focus, body.theme-elegant .bottom-form .get-started-form.main-form select#ser-select:focus, body.theme-elegant .bottom-form .get-started-form.main-form textarea:focus { border-color: var(--gold) !important; box-shadow: 0 0 0 3px rgba(219, 0, 0, 0.10); background: var(--pure-white) !important; } body.theme-elegant .bottom-form .get-started-form.main-form .label_fnt, body.theme-elegant .bottom-form .get-started-form.main-form .label_fnt a { color: rgba(245, 245, 245, 0.80) !important; } body.theme-elegant .bottom-form .input-control::placeholder { color: #777 !important; } /* ══════════════════════════════════════════════════════════════ FOOTER ══════════════════════════════════════════════════════════════ */ body.theme-elegant footer, body.theme-elegant .copyright { background: var(--navy-deep) !important; } body.theme-elegant footer { border-top: 2px solid var(--gold); } body.theme-elegant footer h5 { color: var(--gold) !important; font-family: var(--ff-heading); font-weight: 700; font-size: 20px; letter-spacing: 0.02em; } body.theme-elegant footer ul.menu li a { color: rgba(245, 245, 245, 0.82) !important; font-family: var(--ff-body); transition: color var(--dur) var(--ease); } body.theme-elegant footer ul.menu li a:hover, body.theme-elegant footer ul.menu li a:active { color: var(--gold) !important; } body.theme-elegant footer ul.menu li a i { color: var(--gold); transition: all var(--dur) var(--ease); } body.theme-elegant footer p { color: rgba(245, 245, 245, 0.75); } body.theme-elegant footer .logo img { filter: brightness(1.1); } body.theme-elegant footer .logo img:hover { animation: none !important; } body.theme-elegant .copyright { border-top: 1px solid rgba(219, 0, 0, 0.15); } body.theme-elegant .copyright a, body.theme-elegant .copyright p { color: rgba(245, 245, 245, 0.75); } body.theme-elegant .copyright a:hover { color: var(--gold); } /* Social icons */ body.theme-elegant footer .social-icons li a i { color: var(--gold); } body.theme-elegant footer .social-icons li a i:hover { color: var(--gold-light) !important; transform: translateY(-2px); } /* ══════════════════════════════════════════════════════════════ BACK TO TOP ══════════════════════════════════════════════════════════════ */ body.theme-elegant a#goto-top { background: var(--gold); color: #fff; border-radius: 50%; box-shadow: var(--shadow-gold); display: flex; align-items: center; justify-content: center; } body.theme-elegant a#goto-top i { color: #fff !important; } body.theme-elegant a#goto-top:hover { background: var(--crimson-light); color: #fff; box-shadow: var(--shadow-md); transform: scale(1.1); } body.theme-elegant a#goto-top:hover i { color: #fff !important; } /* ══════════════════════════════════════════════════════════════ FLOATING PHONE ══════════════════════════════════════════════════════════════ */ body.theme-elegant .phoneCall-rapper { bottom: 100px !important; left: 30px !important; font-size: inherit !important; filter: none !important; display: flex; flex-direction: column; align-items: center; } body.theme-elegant .phoneCall-rapper a { background: var(--gold) !important; color: #fff !important; border-radius: 50%; width: 46px; height: 46px; display: flex; align-items: center; justify-content: center; font-size: 20px; box-shadow: var(--shadow-gold); transition: all var(--dur) var(--ease); } body.theme-elegant .phoneCall-rapper a:hover { background: var(--crimson-light) !important; color: #fff !important; box-shadow: var(--shadow-md); transform: scale(1.1); } body.theme-elegant .phoneCall-rapper a i, body.theme-elegant .phoneCall-rapper i { color: #fff !important; } body.theme-elegant .phoneCall-rapper a:hover i { color: #fff !important; } body.theme-elegant .phoneCall-rapper::before { position: static !important; left: auto !important; bottom: auto !important; order: 2; margin-top: 6px; color: var(--gold) !important; font-family: var(--ff-body); font-size: 11px !important; font-weight: 600; filter: none !important; text-shadow: 0 1px 3px rgba(0,0,0,0.5); } body.theme-elegant .phoneCall-rapper a { order: 1; } /* ══════════════════════════════════════════════════════════════ INPUTS GLOBAL ══════════════════════════════════════════════════════════════ */ body.theme-elegant .input-control:hover, body.theme-elegant .input-control:focus { background: var(--pure-white) !important; border-color: var(--gold) !important; color: var(--charcoal) !important; box-shadow: 0 0 0 3px rgba(219, 0, 0, 0.08); transition: all var(--dur) var(--ease); } body.theme-elegant .input-control:hover::placeholder, body.theme-elegant .input-control:focus::placeholder { color: #999 !important; } body.theme-elegant .input-control::placeholder { color: #999 !important; } /* ══════════════════════════════════════════════════════════════ OWL CAROUSEL ══════════════════════════════════════════════════════════════ */ body.theme-elegant .owl-dot.active span, body.theme-elegant .owl-dot:hover span { background: var(--gold) !important; } body.theme-elegant .owl-dot span { background: rgba(0, 31, 63, 0.18) !important; } body.theme-elegant [class*=owl-next]:hover, body.theme-elegant [class*=owl-prev]:hover { background: var(--gold) !important; color: var(--navy) !important; } /* ══════════════════════════════════════════════════════════════ SCROLLBAR ══════════════════════════════════════════════════════════════ */ body.theme-elegant .parent-ser-box::-webkit-scrollbar-thumb { background-color: var(--gold); border-radius: 6px; } body.theme-elegant .parent-ser-box::-webkit-scrollbar-track { background-color: rgba(0, 31, 63, 0.06); border-radius: 6px; } /* ══════════════════════════════════════════════════════════════ SLIDER IMAGES ══════════════════════════════════════════════════════════════ */ body.theme-elegant .slider-graph_s.owl-carousel .owl-item img { border-color: var(--gold); } body.theme-elegant .slider-gray-logo_s.owl-carousel .owl-item img { filter: grayscale(1) opacity(0.55); transition: filter var(--dur) var(--ease); } body.theme-elegant .slider-gray-logo_s.owl-carousel .owl-item img:hover { filter: grayscale(0) opacity(1); animation: none !important; } /* ══════════════════════════════════════════════════════════════ LINKS IN CONTENT ══════════════════════════════════════════════════════════════ */ body.theme-elegant p a { color: var(--navy); text-decoration-color: var(--gold); transition: color var(--dur) var(--ease); } body.theme-elegant p a:hover { color: var(--gold); } /* ══════════════════════════════════════════════════════════════ POPUP FORM ══════════════════════════════════════════════════════════════ */ body.theme-elegant .popupform .popup-content { border-radius: 6px; } body.theme-elegant .popupform .popup-content h2 { font-family: var(--ff-heading); color: var(--navy); } body.theme-elegant .popupform .popup-content p { font-family: var(--ff-body); color: var(--charcoal); } body.theme-elegant .popupform .form-control { font-family: var(--ff-body); border-radius: 3px; } body.theme-elegant .popupform button.fancybox-button.fancybox-close-small { background: var(--crimson); border-radius: 3px; } /* ══════════════════════════════════════════════════════════════ MOBILE NAV — Same navy as header, same soft-white/gold only (Overrides responsive.css #0C0C0C and #F9BA0D so nav uses one scheme.) ══════════════════════════════════════════════════════════════ */ body.theme-elegant nav.mobile-view { background: var(--navy-deep) !important; } body.theme-elegant .mobile-screen #list-btn { color: var(--soft-white) !important; } body.theme-elegant a#cross { color: var(--gold) !important; } /* Force nav links to theme colors only (no black from responsive.css) */ body.theme-elegant .nav-bar ul.menu li a:hover, body.theme-elegant .nav-bar ul.menu li a.active, body.theme-elegant .nav-bar ul.menu li a:focus { color: var(--gold) !important; } /* ══════════════════════════════════════════════════════════════ RESPONSIVE — Mobile-first comprehensive overrides Breakpoints: 480 / 768 / 980 / 1200 ══════════════════════════════════════════════════════════════ */ /* ─── MOBILE: up to 980px ─────────────────────────────────── */ @media only screen and (max-width: 980px) { /* --- Nav link colors on mobile --- */ body.theme-elegant .nav-bar ul.menu li a { color: var(--soft-white) !important; } body.theme-elegant .nav-bar ul.menu li a:hover, body.theme-elegant .nav-bar ul.menu li a.active, body.theme-elegant .nav-bar ul.menu li a:focus { color: var(--gold) !important; } body.theme-elegant .nav-bar .btn-red { background: var(--gold) !important; border-color: var(--gold) !important; color: var(--navy) !important; } /* --- Mobile menu: accordion sub-menus (collapsed by default) --- */ body.theme-elegant .sub-menu { display: none !important; position: static !important; box-shadow: none !important; border: none !important; padding: 0 0 0 15px !important; min-width: auto !important; background: transparent !important; } /* Only show when .open class is toggled via JS */ body.theme-elegant .sub-menu.open { display: block !important; } /* Disable hover-based opening on mobile — only toggle via JS */ body.theme-elegant .nav-bar ul.menu > li.has-dropdown:hover > .sub-menu, body.theme-elegant .nav-bar .sub-menu > li.has-dropdown:hover > .sub-menu { display: none !important; } body.theme-elegant .nav-bar ul.menu > li.has-dropdown:hover > .sub-menu.open, body.theme-elegant .nav-bar .sub-menu > li.has-dropdown:hover > .sub-menu.open { display: block !important; } body.theme-elegant .nav-bar .sub-menu > li.has-dropdown > a i { float: none; transition: transform 0.3s ease; } body.theme-elegant .nav-bar .sub-menu > li.has-dropdown > a i.rotated, body.theme-elegant .nav-bar ul.menu > li.has-dropdown > a i.rotated { transform: rotate(90deg); } /* --- Global section padding for mobile --- */ body.theme-elegant section { padding: 30px 0; } body.theme-elegant section .container { padding-left: 20px; padding-right: 20px; } /* --- Banner padding --- */ body.theme-elegant .banner.main-banner { padding: 40px 0 35px !important; } body.theme-elegant .banner.main-banner h1 { font-size: 26px; line-height: 1.25; } body.theme-elegant .banner.main-banner h1 .title { font-size: 14px; } body.theme-elegant .banner.main-banner p { font-size: 13px !important; } /* --- Inner banner (sub-pages) --- */ body.theme-elegant .inner-banner { padding: 30px 0 !important; } body.theme-elegant .inner-banner h1 { font-size: 24px !important; line-height: 1.3 !important; } /* --- Button alignment: stack vertically on mobile (content sections only) --- */ body.theme-elegant section .btn-red, body.theme-elegant section .btn-blue, body.theme-elegant section .btn-white-border { display: block; width: 100%; text-align: center; margin-bottom: 10px; box-sizing: border-box; } /* Keep nav Get Started button compact */ body.theme-elegant .nav-bar .btn-red { display: inline-block !important; width: auto !important; } /* Form submit buttons: full width centered */ body.theme-elegant .get-started-form .btn-red, body.theme-elegant .bottom-form .btn-red { display: block; width: 100%; } /* Banner buttons: inline but equal width */ body.theme-elegant .banner .btn-red, body.theme-elegant .banner .btn-blue { display: inline-block; width: auto; min-width: 140px; margin-right: 8px; margin-bottom: 10px; vertical-align: top; padding: 10px 18px !important; font-size: 11px; } /* Section two-button groups: stack full width */ body.theme-elegant .why-choose .btn-red, body.theme-elegant .why-choose .btn-blue, body.theme-elegant .am-pub .btn-red, body.theme-elegant .am-pub .btn-blue, body.theme-elegant section:not(.banner):not(.cta-signup) .btn-red, body.theme-elegant section:not(.banner):not(.cta-signup) .btn-blue { display: block; width: 100%; margin-right: 0; margin-bottom: 10px; padding: 12px 20px !important; font-size: 12px; } /* CTA buttons */ body.theme-elegant .cta-signup .btn-red, body.theme-elegant .cta-signup .btn-blue { display: block; width: 100%; margin-bottom: 10px; text-align: center; } /* --- Images: full width, centered on mobile --- */ body.theme-elegant section img:not(.f-logo):not([width]) { max-width: 100%; height: auto; } body.theme-elegant .why-choose img, body.theme-elegant .am-pub img, body.theme-elegant section .col-md-6 > img, body.theme-elegant section .col-md-6 img { max-width: 100%; height: auto; margin-top: 20px; border-radius: 6px; display: block; margin-left: auto; margin-right: auto; } /* Center the column that holds images on mobile */ body.theme-elegant section .col-md-6 { text-align: center; } /* But keep text left-aligned in text columns */ body.theme-elegant section .col-md-6 h1, body.theme-elegant section .col-md-6 h2, body.theme-elegant section .col-md-6 h3, body.theme-elegant section .col-md-6 h4, body.theme-elegant section .col-md-6 p, body.theme-elegant section .col-md-6 ul, body.theme-elegant section .col-md-6 .list-item { text-align: left; } /* --- Column stacking on mobile --- */ body.theme-elegant .row { margin-left: 0; margin-right: 0; } body.theme-elegant .row > [class*="col-"] { padding-left: 10px; padding-right: 10px; } /* --- Headings on mobile --- */ body.theme-elegant h2 { font-size: 22px !important; line-height: 1.3 !important; } body.theme-elegant h3 { font-size: 18px !important; line-height: 1.3 !important; } /* --- CTA Signup card: center text on mobile --- */ body.theme-elegant .cta-signup { text-align: center; padding: 30px 20px; margin: 30px 15px; border-radius: 10px; } body.theme-elegant .cta-signup h2 { text-align: center !important; font-size: 18px !important; line-height: 1.5 !important; } body.theme-elegant .cta-signup img { max-width: 80%; margin-top: 20px; } /* --- Service boxes on mobile --- */ body.theme-elegant .services .ser-box { width: 100% !important; margin: 10px 0; min-height: auto; } body.theme-elegant .parent-ser-box > .row { flex-direction: column; } /* --- Testimonial boxes --- */ body.theme-elegant .services#testmonial .ser-box { margin-bottom: 15px; } body.theme-elegant .services#testmonial .trustpilot-badge, body.theme-elegant .services#testmonial .btn-blue { width: 100%; max-width: 280px; margin-left: auto; margin-right: auto; } /* Center trustpilot + CTA button area on mobile */ body.theme-elegant .services#testmonial > .container > .row > .col-md-6:first-child { text-align: center; } /* --- Get Started Form --- */ body.theme-elegant .get-started-form.main-form { margin: 15px 0 0; width: 100% !important; } body.theme-elegant .banner .get-started-form h3, body.theme-elegant .get-started-form.main-form h3 { font-size: 20px; } /* --- Gray boxes (key features): compact 2-col grid on mobile --- */ body.theme-elegant .am-pub .row.d-flex { display: flex !important; flex-wrap: wrap !important; gap: 12px; justify-content: center; } body.theme-elegant .am-pub .row.d-flex > .col-md { flex: 0 0 calc(50% - 6px) !important; max-width: calc(50% - 6px) !important; padding: 0 !important; } body.theme-elegant .gray-box { margin-bottom: 0; height: auto !important; padding: 15px 10px !important; text-align: center; display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 140px; } body.theme-elegant .gray-box img { width: 50px !important; height: auto; margin-bottom: 8px; } body.theme-elegant .gray-box h6 { font-size: 12px !important; line-height: 1.4; padding: 4px 0 0 !important; margin: 0; } /* --- FAQ section --- */ body.theme-elegant .faq-sec .card-header a { font-size: 14px !important; } /* --- Portfolio tabs: horizontal scrollable pills on mobile --- */ body.theme-elegant .web-tabs.portfolio .row { flex-direction: column; } body.theme-elegant .web-tabs.portfolio .col-md-4 { width: 100%; max-width: 100%; flex: 0 0 100%; margin-bottom: 15px; } body.theme-elegant .web-tabs.portfolio .col-md-8 { width: 100%; max-width: 100%; flex: 0 0 100%; } body.theme-elegant .borrow-tab { border: none !important; box-shadow: none !important; background: transparent !important; padding: 0 !important; border-radius: 0 !important; } body.theme-elegant .borrow-tab .nav-tabs { display: flex !important; flex-wrap: nowrap !important; overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; scrollbar-width: none; -ms-overflow-style: none; gap: 8px; padding: 4px 0 8px; border-bottom: none !important; } body.theme-elegant .borrow-tab .nav-tabs::-webkit-scrollbar { display: none; } body.theme-elegant .borrow-tab .nav-tabs li { flex: 0 0 auto; white-space: nowrap; } body.theme-elegant .borrow-tab .nav-tabs li a { display: inline-block; font-size: 12px; font-weight: 600; padding: 8px 16px; border-radius: 20px !important; border: 1.5px solid rgba(219, 0, 0, 0.25) !important; background: var(--pure-white) !important; color: var(--navy) !important; transition: all 0.25s ease; border-left: none !important; } body.theme-elegant .borrow-tab .nav-tabs li a.active { background: var(--crimson) !important; color: var(--pure-white) !important; border-color: var(--crimson) !important; box-shadow: 0 2px 8px rgba(219, 0, 0, 0.25); } body.theme-elegant .borrow-tab .nav-tabs li a:hover { background: rgba(219, 0, 0, 0.08) !important; color: var(--crimson) !important; } body.theme-elegant .info-work img.myImg { width: 100% !important; max-width: 100%; } /* Tab content on mobile */ body.theme-elegant .tab-content { padding: 15px 0 !important; } /* --- Footer --- */ body.theme-elegant footer .row > [class*="col-"] { margin-bottom: 20px; text-align: center; } body.theme-elegant footer h5 { font-size: 17px; } body.theme-elegant .copyright { text-align: center; } /* --- Bottom form --- */ body.theme-elegant .bottom-form .get-started-form.main-form { width: 100% !important; } /* --- Floating phone button --- */ body.theme-elegant .phoneCall-rapper { left: 15px !important; bottom: 80px !important; } body.theme-elegant .phoneCall-rapper a { width: 40px; height: 40px; font-size: 18px; } /* --- Why-choose list items spacing --- */ body.theme-elegant .why-choose .list-item li { margin-bottom: 8px; line-height: 1.6; } /* --- Counter / stats boxes --- */ body.theme-elegant .client-info .ser-box { width: 100% !important; margin-bottom: 10px; } } /* ─── SMALL PHONES: up to 480px ───────────────────────────── */ @media only screen and (max-width: 480px) { body.theme-elegant section .container { padding-left: 15px; padding-right: 15px; } body.theme-elegant .banner.main-banner { padding: 30px 0 25px !important; } body.theme-elegant .banner.main-banner h1 { font-size: 22px; line-height: 1.3; } body.theme-elegant .banner.main-banner h1 .title { font-size: 12px; } body.theme-elegant .banner.main-banner p { font-size: 12px !important; } /* Banner buttons: full width stacked on very small screens */ body.theme-elegant .banner .btn-red, body.theme-elegant .banner .btn-blue { display: block; width: 100%; min-width: auto; margin-right: 0; } body.theme-elegant h2 { font-size: 20px !important; } body.theme-elegant h3 { font-size: 16px !important; } body.theme-elegant .cta-signup { padding: 25px 15px; margin: 20px 10px; } body.theme-elegant .cta-signup h2 { font-size: 16px !important; } body.theme-elegant .get-started-form.main-form h3 { font-size: 18px; } body.theme-elegant .faq-sec .card-header a { font-size: 13px !important; } } /* ─── TABLET: 768px to 980px ──────────────────────────────── */ @media only screen and (min-width: 768px) and (max-width: 980px) { body.theme-elegant section .container { padding-left: 25px; padding-right: 25px; } body.theme-elegant .banner.main-banner h1 { font-size: 30px; } body.theme-elegant h2 { font-size: 24px !important; } /* Two buttons side by side on tablet */ body.theme-elegant section:not(.banner):not(.cta-signup) .btn-red, body.theme-elegant section:not(.banner):not(.cta-signup) .btn-blue { display: inline-block; width: auto; min-width: 160px; margin-right: 10px; vertical-align: top; } body.theme-elegant .cta-signup .btn-red, body.theme-elegant .cta-signup .btn-blue { display: inline-block; width: auto; min-width: 160px; margin-right: 10px; } body.theme-elegant .cta-signup { padding: 35px 30px; margin: 40px 20px; } /* Service boxes: 2 per row on tablet */ body.theme-elegant .services .ser-box { width: 100% !important; } body.theme-elegant .info-work img.myImg { width: 80% !important; } } /* ─── SMALL DESKTOP: 980px to 1200px ─────────────────────── */ @media only screen and (min-width: 981px) and (max-width: 1200px) { body.theme-elegant .nav-bar ul.menu li a { font-size: 11px; letter-spacing: 0.06em; } body.theme-elegant .banner.main-banner h1 { font-size: 32px; } body.theme-elegant .cta-signup { padding: 40px 30px; } body.theme-elegant .services .ser-box { min-height: 150px; } } /* ─── LARGE DESKTOP: 1200px+ (ensure baseline) ───────────── */ @media only screen and (min-width: 1201px) { body.theme-elegant .cta-signup { padding: 50px 40px; } } /* ══════════════════════════════════════════════════════════════ CASE STUDIES PAGE – 5 cards grid, no carousel ══════════════════════════════════════════════════════════════ */ body.theme-elegant .case-studies-section { padding-left: 24px; padding-right: 24px; } body.theme-elegant .case-studies-section .case-studies-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 24px; max-width: 1200px; margin-left: auto; margin-right: auto; } body.theme-elegant .case-studies-section .case-study-card { flex: 0 0 auto; width: calc((100% - 96px) / 5); min-width: 180px; } body.theme-elegant .case-studies-section a.box-shade, body.theme-elegant .case-studies-section a.box-shade.d-block { display: flex !important; flex-direction: column !important; border: var(--border-gold); border-radius: 6px; transition: all var(--dur) var(--ease); overflow: hidden; width: 100%; height: 100%; text-decoration: none; color: inherit; } body.theme-elegant .case-studies-section a.box-shade:hover { box-shadow: var(--shadow-md); border-color: var(--gold); } body.theme-elegant .case-studies-section .box-shade .cs-cover-wrap { width: 100%; aspect-ratio: 2 / 3; max-height: 280px; overflow: hidden; flex-shrink: 0; background: #f5f5f5; display: flex; align-items: center; justify-content: center; } body.theme-elegant .case-studies-section .box-shade .cs-cover-wrap img { width: 100%; height: 100%; object-fit: contain; object-position: center center; display: block; } body.theme-elegant .case-studies-section .box-shade h4 { font-family: var(--ff-heading); color: var(--navy); padding: 12px 14px 0; font-size: 14px; line-height: 1.35; margin: 0; text-align: center; } body.theme-elegant .case-studies-section .box-shade > p, body.theme-elegant .case-studies-section .box-shade p.py-3 { font-family: var(--ff-body); color: var(--charcoal); font-size: 12px; line-height: 1.5; padding: 8px 14px 0 !important; margin: 0; flex: 1; text-align: justify; min-height: 3.6em; } body.theme-elegant .case-studies-section .author-info { padding: 12px 14px !important; display: flex !important; align-items: center; justify-content: center; gap: 10px; margin-top: auto; border-top: 1px solid #eee; text-align: center; } body.theme-elegant .case-studies-section .author-info img { width: 36px !important; height: 36px !important; border-radius: 50% !important; object-fit: cover; flex-shrink: 0; } body.theme-elegant .case-studies-section .author-info > div { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; } body.theme-elegant .case-studies-section .author-info h6 { font-size: 12px; margin: 0; line-height: 1.3; color: var(--navy); } body.theme-elegant .case-studies-section .author-info p { font-size: 11px !important; padding: 0 !important; margin: 0; line-height: 1.2; } @media (max-width: 1200px) { body.theme-elegant .case-studies-section .case-study-card { width: calc((100% - 72px) / 4); } } @media (max-width: 992px) { body.theme-elegant .case-studies-section .case-study-card { width: calc((100% - 48px) / 3); } } @media (max-width: 768px) { body.theme-elegant .case-studies-section .case-study-card { width: calc((100% - 24px) / 2); } body.theme-elegant .case-studies-section .box-shade .cs-cover-wrap { max-height: 240px; } } @media (max-width: 576px) { body.theme-elegant .case-studies-section .case-study-card { width: 100%; min-width: 0; } body.theme-elegant .case-studies-section .box-shade .cs-cover-wrap { max-height: 320px; } } /* ── Case Study Detail Pages ────────────────────────────────── */ body.theme-elegant .case-study-hero .case-study-cover { max-height: 520px; border-radius: 6px; box-shadow: 0 8px 30px rgba(0,0,0,.18); width: auto; max-width: 100%; } body.theme-elegant .case-study-hero-content { padding: 20px 0; } body.theme-elegant .case-study-badge { background: var(--gold); color: var(--navy); padding: 6px 18px; border-radius: 2px; font-family: var(--ff-body); font-size: 13px; font-weight: 600; letter-spacing: 1.5px; text-transform: uppercase; display: inline-block; margin-bottom: 14px; } body.theme-elegant .case-study-meta { font-family: var(--ff-body); font-size: 15px; color: var(--charcoal); opacity: 0.85; margin-bottom: 0; } body.theme-elegant .case-study-detail .case-study-content p { font-family: var(--ff-body); color: var(--charcoal); font-size: 16px; line-height: 1.85; margin-bottom: 18px; max-width: 860px; margin-left: auto; margin-right: auto; } body.theme-elegant .case-study-author-section { background: var(--warm-white); padding: 40px 0; } body.theme-elegant .case-study-author-img { width: 220px; height: 220px; border-radius: 6px; object-fit: cover; box-shadow: 0 4px 20px rgba(0,0,0,.12); border: 3px solid var(--gold); } body.theme-elegant .case-study-author-name { color: var(--gold); font-family: var(--ff-heading); font-size: 22px; margin-bottom: 14px; } body.theme-elegant .case-study-author-section p { font-family: var(--ff-body); color: var(--charcoal); font-size: 15px; line-height: 1.8; } @media (max-width: 767px) { body.theme-elegant .case-study-hero .case-study-cover { max-height: 360px; margin-bottom: 30px; } body.theme-elegant .case-study-author-img { width: 160px; height: 160px; margin-bottom: 24px; } } /* ══════════════════════════════════════════════════════════════ INNER BANNER (sub-pages) ══════════════════════════════════════════════════════════════ */ body.theme-elegant .inner-banner { background: linear-gradient( 160deg, rgba(0, 21, 48, 0.97) 0%, rgba(0, 31, 63, 0.94) 55%, rgba(219, 0, 0, 0.80) 100% ); } body.theme-elegant .inner-banner h1 { color: var(--soft-white) !important; } body.theme-elegant .inner-banner .list-item li, body.theme-elegant .inner-banner .list-item li::marker { color: var(--soft-white) !important; } /* ══════════════════════════════════════════════════════════════ ERROR STATES — keep gold focus but red for errors ══════════════════════════════════════════════════════════════ */ body.theme-elegant .required.error, body.theme-elegant select.required.error, body.theme-elegant textarea.required.error { border-bottom-color: var(--crimson) !important; } /* ══════════════════════════════════════════════════════════════ WHATSAPP BUTTON (if used) ══════════════════════════════════════════════════════════════ */ body.theme-elegant .whatsapp-rapper i::after { font-family: var(--ff-body); }