:root { /* Colors */ --primary-color: #a5d1e3; --bg-dark: rgb(30, 65, 118); --bg-one: #f2f7fd; --bg-two: #e5edf9; --bg-three: #c5d9f2; --border-light: rgba(255, 255, 255, 0.1); --border-dark: rgba(0, 0, 0, 0.1); --text-primary: #ffffff; --text-muted: rgba(255, 255, 255, 0.7); --black: #000000; /* Fonts */ --font-primary: "Switzer", sans-serif; --font-secondary: "Clash Display", sans-serif; --font-tertiary: "Obviously Narrow", sans-serif; /* Spacing (rem) */ --spacing-sm: 0.9375rem; /* 15px */ --spacing-md: 1.5625rem; /* 25px */ --spacing-lg: 2.5rem; /* 40px */ /* Breakpoints (rem, based on 16px) CSS custom properties can't be used in @media queries directly, but serve as the single source of truth for documentation & JS. */ --bp-xs: 35.9375rem; /* 575px */ --bp-sm: 47.9375rem; /* 767px */ --bp-md: 61.9375rem; /* 991px */ --bp-lg: 74.9375rem; /* 1199px */ --bp-xl: 87.4375rem; /* 1399px */ } /* ── Responsive HTML Font Size ────────────────────────────── Desktop-first: html starts at 100% (= 16px base). rem is relative to the ROOT element (), NOT . Reducing html % makes ALL rem-based values shrink proportionally. ─────────────────────────────────────────────────────────── */ html, body { overflow-x: hidden !important; } html { font-size: 75%; /* 16px base – desktop */ } @media (max-width: 87.4375rem) { /* ≤1399px */ html { font-size: 93.75%; } /* = 15px base */ } @media (max-width: 74.9375rem) { /* ≤1199px */ html { font-size: 87.5%; } /* = 14px base */ } @media (max-width: 61.9375rem) { /* ≤991px */ html { font-size: 81.25%; } /* = 13px base */ } @media (max-width: 47.9375rem) { /* ≤767px */ html { font-size: 75%; } /* = 12px base */ } @media (max-width: 35.9375rem) { /* ≤575px */ html { font-size: 90%; } /* = 11px base */ } .theme-main-menu.fixed.gap-four { padding-top: 0px; padding-bottom: 0px; } .theme-main-menu.gap-four { padding: 0rem 4.375rem; } .hero-banner-four a.d-flex.align-items-center { width: 60%; } .hero-banner-four .hero-heading { font-size: 5.8rem; line-height: 7rem; margin: 0px; margin-top: 2rem; } .contact-title { color: var(--black); font-family: var(--font-secondary) !important; text-transform: capitalize !important; } .contact-info-row { display: flex; flex-direction: row; align-items: center; gap: 1.5rem; flex-wrap: wrap; } .contact-info-row a { display: flex; align-items: center; gap: 0.75rem; text-decoration: none; color: inherit; width: auto; } .contact-info-row .icon-dox { width: 3rem; height: 3rem; border-radius: 50%; background: var(--bg-dark) !important; display: flex; align-items: center; justify-content: center; transition: all 0.3s ease-in-out; flex-shrink: 0; border: none !important; } .contact-info-row .icon-dox svg { width: 1.5rem; height: 1.5rem; fill: #fff !important; } .contact-info-row a:hover .icon-dox { background: var(--primary-color) !important; border: none !important; } .contact-info-row a:hover .icon-dox svg { fill: var(--bg-dark) !important; } .map-icon-data .icon-dox { width: 4rem !important; height: 4rem !important; } .map-icon-data .icon-dox svg { width: 2rem !important; height: 2rem !important; } a.d-flex.align-items-center img { width: 80%; } @media (max-width: 48rem) { a.d-flex.align-items-center { justify-content: center !important; } .contact-info-row { flex-direction: column !important; align-items: flex-start; } .contact-info-row.map-icon-data { justify-content: center !important; align-items: center !important; } a.d-flex.align-items-center img { width: 100%; margin-right: 2rem; } } .service-section-one, .service-section-three { background: linear-gradient( to bottom, rgba(30, 65, 119, 0) 0%, #1e4177 200px, #1e4177 100% ); position: relative; z-index: 2; } .project-section-four, .feature-block-seven { background: linear-gradient( to bottom, transparent 0%, var(--bg-one) 150px, var(--bg-one) 100% ); } .title-five h3 { color: var(--black); } .project-section-four { padding-bottom: 4rem; } .service-section-one { padding-bottom: 14rem; } .service-section-three { padding-top: 5rem; } .footer-one { background-color: #000000; padding-top: 4.25rem; padding-bottom: 4.25rem; } .footer-one h2, .footer-one h3, .footer-one h4, .footer-one h5, .footer-one h6, .footer-one p, .footer-one span, .footer-one a { color: #fff !important; } .btn-two.inverse, .btn-four, .icon-dox { background: var(--primary-color); color: var(--bg-dark); } .icon-dox { display: flex !important; align-items: center; justify-content: center; } .icon-dox svg { width: 1.5rem; height: 1.5rem; fill: var(--bg-dark) !important; } .icon-dox:hover svg { fill: var(--primary-color) !important; } .social-icon-one li { margin-bottom: 1rem; } .icon-dox:hover { background-color: var(--bg-dark) !important; } .btn-two.inverse:hover, .btn-four:hover, .icon-dox:hover { background: var(--text-primary); color: var(--bg-dark); border: 2px solid var(--bg-dark); transition: all 0.3s ease-in-out; } /* Our Services style */ .bg-blur { background: rgba(255, 255, 255, 0.1); backdrop-filter: blur(1.25rem); -webkit-backdrop-filter: blur(1.25rem); border: 1px solid rgba(255, 255, 255, 0.2); box-shadow: 0 0.625rem 2.5rem rgba(0, 0, 0, 0.15); color: #fff; transition: all 0.3s ease-in-out; } .bg-blur:hover { background: rgba(255, 255, 255, 0.18); border-color: rgba(255, 255, 255, 0.35); box-shadow: 0 0.9375rem 2.8125rem rgba(0, 0, 0, 0.2); transform: translateY(-0.3125rem); } .card-style-three .numb { color: rgba(255, 255, 255, 0.6); } .card-style-three .icon { background-color: rgba(255, 255, 255, 0.15); color: var(--text-primary); } .card-style-three .icon img { opacity: 1; } .card-style-three h5 { color: #fff; } .card-style-three p { color: rgba(255, 255, 255, 0.7); } .card-style-three a { color: var(--primary-color); } .card-style-three a img { opacity: 1; filter: brightness(0) saturate(100%) invert(83%) sepia(12%) saturate(735%) hue-rotate(161deg) brightness(95%) contrast(89%); } .card-style-three a:hover { color: #fff; } .card-style-three.bg-blur:hover .icon img { opacity: 1; } .title-four h2 { font-family: var(--font-secondary) !important; font-size: 4.875rem !important; line-height: 1.0512em !important; font-weight: 500 !important; text-transform: capitalize !important; } .services-main-row { align-items: stretch; row-gap: 1.5rem; } .services-main-row > [class*="col"] { display: flex; } .card-style-five p { margin: 1.25rem 0 1.25rem; } .card-style-five:hover .icon { background: var(--primary-color); } .card-style-five .icon { background-color: var(--bg-dark); } .services-main-row .card-style-three { height: 100%; display: flex; flex-direction: column; width: 100%; } .sub-heading { color: rgba(0, 0, 0, 0.4); line-height: 1.6; margin-top: var(--spacing-md); width: 100%; max-width: 95%; text-wrap: balance; } .feature-block-three .shape_02 { bottom: 15%; } .feature-block-four .block-wrapper { border: 0 !important; } /* smaller screen size */ @media (max-width: 48rem) { .btn-two { font-size: 1rem; padding: 0 1.375rem; } .row > * { padding-left: 0 !important; } .title-two .sub-heading { font-size: 1.125rem; max-width: 100%; margin-top: var(--spacing-sm); } .percentage-1 { z-index: 5 !important; top: 56% !important; right: 15% !important; } .percentage-2 { top: 100% !important; left: 20% !important; } .service-section-one .container { padding-right: 0 !important; padding-left: 0 !important; } .feature-block-three, .service-section-three, .native-faq-content p, #contact-form { padding-left: 1rem !important; } .sub-heading { max-width: 100% !important; } .hero-banner-four .hero-heading { font-size: 3.15rem; line-height: 1.5em; } .footer-one { background-color: #000000; padding-top: 1.25rem; padding-bottom: 1.25rem; } .cost-comp-bg div { margin-left: 3% !important; } .theme-main-menu.gap-four { padding: 0rem 1.375rem; } .services-main-row { padding-right: 1rem; padding-left: 1rem; } } .backgroud-hover-doc { background-color: var(--bg-dark) !important; color: var(--text-primary) !important; } /* Service Accordion Visual Hierarchy for Dark Background */ .service-section-one .accordion-container .accordion-item { border-right: 1px solid var(--border-dark) !important; padding-top: var(--spacing-lg); padding-bottom: var(--spacing-lg); } .service-section-one .accordion-container .accordion-item:first-child { border-left: 1px solid var(--border-dark) !important; } /* Highlight the active (open) box */ .service-section-one .accordion-container .accordion-item.active { background-color: var(--bg-three); } /* Make arrow icon its primary color by default to ensure visibility, similar to its original hover effect */ .service-section-one .accordion-container .accordion-item .content .icon { background-color: var(--primary-color) !important; } /* Add contrasting hover effect for the arrow */ .service-section-one .accordion-container .accordion-item .content .icon:hover { background-color: var(--text-primary) !important; } .service-section-one .accordion-container .accordion-item .content .icon:hover img { filter: invert(1); } .cost-comp-bg { /* Separate the background properties so we can easily override just the position */ background-image: linear-gradient(rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0.4)), url(./icon/price-comp.png) !important; background-repeat: no-repeat !important; background-position: center top !important; /* Default for tab and desktop */ background-color: #ffffff !important; background-size: cover !important; } /* 425px - 411px */ @media (max-width: 425px) { .cost-comp-bg { background-position: 48% top !important; } } /* 410px - 367px */ @media (max-width: 410px) { .cost-comp-bg { background-position: 42% top !important; } } /* 366px and below */ @media (max-width: 366px) { .cost-comp-bg { background-position: 38% top !important; } } /* Override Hero Banner Four: Dark to White */ .theme-main-menu.menu-overlay { background-color: var(--bg-one); } .hero-banner-four { height: 100vh; background: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)), url(./icon/main-hero.webp) no-repeat center top; background-color: #ffffff; background-size: cover; display: flex; justify-content: center; align-items: center; } .hero-banner-four .hero-heading, .hero-banner-four ul .rating-box h4 { color: var(--bg-one); } .hero-banner-four .sub-heading { color: rgba(0, 0, 0, 0.7); } .hero-banner-four ul .rating-box p { color: rgba(0, 0, 0, 0.6); } .hero-banner-four .cta-group li { background: rgba(0, 0, 0, 0.05); /* slightly dark circle around the button */ } /* Invert the CTA button to look good on white background */ .hero-banner-four .cta-group li a { color: var(--bg-dark); background: var(--primary-color); transition: all 0.3s ease-in-out; } .hero-banner-four .cta-group li a:hover { color: var(--bg-dark); background: var(--text-primary); transition: all 0.3s ease-in-out; border: 1px solid var(--bg-dark); } /* Feature Block Four Shapes */ .feature-block-four .shape_01 { position: absolute; right: 12%; top: 20%; max-width: 2.8125rem; animation: jumpThree 5s infinite linear; z-index: -1; } .feature-block-four .shape_02 { position: absolute; left: 10%; top: 30%; max-width: 3.75rem; animation: rotated 30s infinite linear; z-index: -1; } .feature-block-four .shape_03 { position: absolute; left: 0; bottom: 0; z-index: -1; } .feature-block-four .shape_04 { position: absolute; right: 25%; bottom: 15%; max-width: 3.125rem; animation: jumpTwo 6s infinite linear; z-index: -1; } .feature-block-four .shape_05 { position: absolute; left: 18%; bottom: 10%; max-width: 2.5rem; animation: rotated 20s infinite linear reverse; z-index: -1; } /* Native Details/Summary FAQ styling */ .native-faq-details { border-top: 1px solid #000; padding: 1.875rem 0; } .native-faq-details:last-child { border-bottom: 1px solid #000; } .theme-main-menu.fixed.menu-style-four { background-color: var(--bg-one); } .native-faq-summary { list-style: none; /* Hide default arrow */ display: flex; justify-content: space-between; align-items: center; font-family: var(--font-secondary); font-size: 1.75rem; font-weight: 500; text-transform: capitalize; color: #000; cursor: pointer; margin: 0; } .native-faq-summary::-webkit-details-marker { display: none; } /* Plus/Minus Icons */ .native-faq-summary::after { content: "+"; font-size: 2.5rem; font-weight: 300; line-height: 1; color: #000; transition: transform 0.3s ease; } .native-faq-details[open] .native-faq-summary::after { content: "−"; /* Minus sign */ } .native-faq-content { padding-top: 0.9375rem; color: #000; } .native-faq-content p { margin-bottom: 0; font-size: 1.125rem; line-height: 1.7; }