/* Google font */
@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

/* CSS default reset */
*,
*::after,
*::before {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    text-decoration: none;
    outline: none;
}

/* Variable for light mod */
:root[data-theme="light"] {
    /* Background Color */
    --bg-primary-color: #FEC576;
    --bg-primary-color-dark: #FEC57680;
    --bg-secondary-color: #fff7ec;
    --bg-primary-dark-color: var(--bg-white);
    --bg-white: #ffffff;
    --bg-black: var(--bg-white);
    --bg-hero-black: var(--bg-secondary-color);

    /* border */
    --under-line-color: rgba(217, 217, 217, 0.20);
    --about-border-color: #D9D9D9;

    /* Buttons */
    --bg-btn: var(--bg-black);
    --bg-main-btn-color: var(--bg-primary-color);
    --btn-text-color: #ffffff;
    --bg-btn-outline: var(--text-black);
    --bg-btn-outline-text: var(--bg-primary-color);

    /* Text Color */
    --text-primary-color: var(--text-white);
    --text-white: var(--text-black);
    --text-black: #000000;
    --text-sm-white-color: #909090;
    --text-sm-dark-color: #1E1D1D;
    --service-card-text-hover: #383131;

    /* active nav */
    --active-nav-color: #FEC576;

    /* hero area background */
    --hero-bg-img: url("../img/hero-bg-light.png");

    --bg-primary-dots-color: var(--text-black);

    /* full-bleed wave band */
    --main-background: polygon(0% 0%, 0% 0%, 0.919% 0.233%, 3.49% 0.873%, 7.433% 1.834%, 12.47% 3.029%, 18.32% 4.372%, 24.705% 5.777%, 31.345% 7.156%, 37.96% 8.423%, 44.272% 9.491%, 50% 10.274%, 50% 10.274%, 55.728% 10.482%, 62.04% 9.988%, 68.655% 8.954%, 75.295% 7.538%, 81.68% 5.901%, 87.53% 4.204%, 92.567% 2.604%, 96.51% 1.264%, 99.081% 0.343%, 100% 0%, 100% 100%, 100% 100%, 99.168% 99.776%, 96.82% 99.171%, 93.177% 98.283%, 88.46% 97.211%, 82.891% 96.055%, 76.69% 94.912%, 70.079% 93.884%, 63.28% 93.067%, 56.513% 92.561%, 50% 92.466%, 50% 92.466%, 43.487% 92.792%, 36.72% 93.432%, 29.921% 94.303%, 23.31% 95.323%, 17.109% 96.411%, 11.54% 97.485%, 6.823% 98.462%, 3.18% 99.262%, 0.832% 99.802%, 0% 100%, 0% 0%);
    --background-main-color: var(--bg-primary-color);

    /* service */
    /* wave band: accent ground in this theme, so black ink and a black button */
    --band-ink: #000000;
    --band-btn-bg: #000000;
    --band-btn-text: var(--bg-primary-color);

    /* service */
    --service-hover: var(--bg-primary-color);
    --bg-primary-service-color: var(--text-black);
    --service--border--color: var(--bg-primary-color);
    --service-icon-color-hover: #000000;

    /* panel band (services, why choose, statement) */
    --bg-panel-color: #fffbf5;

    /* tinted band (statement, blog) */
    --review-background: #EFEEFC;

    /* blog card bg */
    --blog-card-background: #ffffff;

    /* contact bg */
    --contact-bg: #F9F9F9;
    --contact-arrow: url('../img/contact/line-arrow-light-mod.png');

    /* footer: flat accent ground plus a CSS sheen, no artwork */
    --footer-bg: var(--bg-primary-color);
    --footer-sheen: linear-gradient(180deg, rgba(255, 255, 255, 0.14) 0%, rgba(255, 255, 255, 0) 45%, rgba(0, 0, 0, 0.05) 100%);
    --bg-footer-link: var(--text-black);
    --footer-text-hover: #ffffff;
    --footer-line-color: rgba(0, 0, 0, 0.20);
    --footer-muted: #2b2b2b;

    /* dark-mode switch */
    --switch-track: #27173a;
    --switch-knob: #FEC576;

    /* font */
    --primary-font: "Poppins", system-ui;
}

/* dark mod */
:root[data-theme="dark"] {
    /* Background Color */
    --bg-primary-color: #FEC576;
    --bg-primary-color-dark: #FEC57680;
    --bg-secondary-color: #fff7ec;
    --bg-primary-dark-color: #1E1D1D;
    --bg-white: #ffffff;
    --bg-black: #000000;
    --bg-hero-black: #000000;

    /* border */
    --under-line-color: rgba(217, 217, 217, 0.20);
    --about-border-color: var(--under-line-color);

    /* Buttons */
    --bg-btn: var(--bg-black);
    --bg-main-btn-color: var(--bg-primary-color);
    --btn-text-color: var(--text-black);
    --bg-btn-outline: transparent;
    --bg-btn-outline-text: var(--bg-primary-color);

    /* Text Color */
    --text-primary-color: #FEC576;
    --text-white: #ffffff;
    --text-black: #000000;
    --text-sm-white-color: #909090;
    --text-sm-dark-color: #1E1D1D;

    /* navlink */
    --active-nav-color: #FEC576;

    /* hero area background */
    --hero-bg-img: url("../img/hero-bg-dark.png");

    /* carousel dots */
    --bg-primary-dots-color: var(--bg-primary-color);

    /* full-bleed wave band */
    --background-main-color: var(--bg-black);

    /* wave band: the ground goes black here, so the ink inverts and the button
       fills with the accent instead of vanishing into the band */
    --band-ink: #ffffff;
    --band-btn-bg: var(--bg-primary-color);
    --band-btn-text: #000000;

    /* service */
    --service-hover: transparent;
    --bg-primary-service-color: var(--bg-primary-color);
    --service-card-text-hover: var(--text-sm-white-color);
    --service--border--color: #FEC57680;
    --service-icon-color: #ACAAA6;
    --service-icon-color-hover: var(--service-icon-color);
    --service-icon-color-hover-dark: none;

    /* panel band (services, why choose, statement) */
    --bg-panel-color: var(--bg-black);

    /* tinted band (statement, blog) */
    --review-background: var(--bg-black);

    /* blog card bg */
    --blog-card-background: transparent;

    /* contact bg */
    --contact-bg: var(--bg-black);
    --contact-arrow: url('../img/contact/line-arrow.png');

    /* footer: the artwork here was a near-black field measuring #111315 */
    --footer-bg: #111315;
    --footer-sheen: linear-gradient(180deg, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0) 55%, rgba(0, 0, 0, 0.22) 100%);
    --bg--footer-light: transparent;
    --bg-footer-link: var(--bg-primary-color);
    --footer-line-color: var(--under-line-color);
    --footer-text-hover: var(--text-black);
    --footer-muted: #909090;

    /* dark-mode switch */
    --switch-track: #27173a;
    --switch-knob: #FEC576;

    /* font */
    --primary-font: "Poppins", system-ui;
}

/* The `data-theme` attribute is set on <html> in the markup and flipped by the
   toggle in js/main.js. Repeating the light block on a bare :root keeps the
   page painted if the attribute is ever missing. */
:root {
    --bg-primary-color: #FEC576;
    --bg-primary-color-dark: #FEC57680;
    --bg-secondary-color: #fff7ec;
    --bg-white: #ffffff;
    --bg-primary-dark-color: #ffffff;
    --bg-black: #ffffff;
    --bg-hero-black: #fff7ec;
    --under-line-color: rgba(217, 217, 217, 0.20);
    --about-border-color: #D9D9D9;
    --bg-main-btn-color: #FEC576;
    --bg-btn-outline: #000000;
    --bg-btn-outline-text: #FEC576;
    --text-primary-color: #000000;
    --text-white: #000000;
    --text-black: #000000;
    --text-sm-white-color: #909090;
    --service-card-text-hover: #383131;
    --active-nav-color: #FEC576;
    --hero-bg-img: url("../img/hero-bg-light.png");
    --bg-primary-dots-color: #000000;
    --background-main-color: #FEC576;
    --band-ink: #000000;
    --band-btn-bg: #000000;
    --band-btn-text: #FEC576;
    --service-hover: #FEC576;
    --bg-primary-service-color: #000000;
    --service--border--color: #FEC576;
    --service-icon-color-hover: #000000;
    --bg-panel-color: #fffbf5;
    --review-background: #EFEEFC;
    --blog-card-background: #ffffff;
    --contact-bg: #F9F9F9;
    --contact-arrow: url('../img/contact/line-arrow-light-mod.png');
    --footer-bg: #FEC576;
    --footer-sheen: linear-gradient(180deg, rgba(255, 255, 255, 0.14) 0%, rgba(255, 255, 255, 0) 45%, rgba(0, 0, 0, 0.05) 100%);
    --bg-footer-link: #000000;
    --footer-text-hover: #ffffff;
    --footer-line-color: rgba(0, 0, 0, 0.20);
    --footer-muted: #2b2b2b;
    --switch-track: #27173a;
    --switch-knob: #FEC576;
    --primary-font: "Poppins", system-ui;
}

body,
html {
    font-size: 10px;
    font-weight: 400;
    font-family: var(--primary-font);
    scroll-behavior: smooth;
    line-height: 1.5;
    overflow-x: hidden;
    background: var(--review-background);
}

h1,
h2,
h3,
h4,
h5,
h6,
p {
    margin: 0;
}

h1 {
    font-size: 9rem;
    line-height: 1.4;
    font-weight: 600;
}

li {
    list-style: none;
    margin: 0;
}

h2 {
    color: var(--text-primary-color);
    font-size: 5rem;
    font-weight: 600;
    display: inline-block;
    text-transform: capitalize;
    line-height: 1.2;
    margin-bottom: 2rem;
}

h3 {
    font-size: 3.1rem;
    line-height: 1.2;
    font-weight: 700;
}

h4 {
    font-size: 2rem;
    font-weight: 700;
    line-height: 1;
}

h5 {
    font-size: 1.8rem;
    font-weight: 600;
    line-height: 1;
}

p {
    font-size: 1.6rem;
    line-height: 1.6;
    margin-top: 1rem;
    font-family: var(--primary-font);
}

a {
    text-decoration: none;
}

/* Buttons */

.main-btn,
.main-btn-outlined {
    display: inline-block;
    padding: 1.5rem 4rem;
    border-radius: 0.5rem;
    outline: none;
    border: none;
    font-family: var(--primary-font);
    color: var(--text-primary-color);
    font-size: 1.6rem;
    font-weight: 600;
    transition: all 0.35s;
}

.main-btn {
    background-color: var(--bg-main-btn-color);
    border: 1px solid var(--bg-main-btn-color);
    color: var(--text-black);
}

.main-btn:hover {
    background-color: var(--bg-btn-outline);
    color: var(--bg-btn-outline-text);
}

.main-btn-outlined {
    background-color: var(--bg-btn-outline);
    color: var(--bg-btn-outline-text);
    margin-top: 2.5rem;
    border: 0.1rem solid var(--bg-main-btn-color);
}

.main-btn-outlined:hover {
    background-color: var(--bg-primary-color);
    color: var(--text-black);
}

/* ====section common css======= */
.section-spacing {
    padding-top: 12rem;
    padding-bottom: 10rem;
}

.section-title {
    font-size: 5rem;
    font-family: var(--primary-font);
    font-weight: 600;
    color: transparent;
    -webkit-text-stroke: 0.1rem var(--text-white);
    text-stroke: 0.1rem var(--text-white);
}

/* ======header Section start======= */
.header-main-block {
    position: absolute;
    margin: 0 auto;
    left: 0;
    right: 0;
    top: 2rem;
    z-index: 99;
    width: 100%;
}

.header-scrolled {
    background-color: var(--bg-primary-dark-color);
    position: fixed;
    width: 100%;
    top: 0rem;
    left: 0;
    right: 0;
    transition: all 0.3s;
    box-shadow: 0px 0px 24px 0px rgba(0, 0, 0, 0.08);
}

.header-bg {
    background-color: var(--bg-primary-dark-color);
    box-shadow: 0px 0px 24px 0px rgba(0, 0, 0, 0.08);
    border-radius: 50px;
}

.header-bg.remove-box-shadow {
    box-shadow: none;
}

.header-bg .bg-body-tertiary {
    padding: 2rem 1rem;
    background-color: transparent !important;
}

.header-main-block .navbar-brand {
    width: auto;
    max-width: 26rem;
    margin-top: -0.1rem;
    margin-left: 5rem;
    font-size: 2.4rem;
    text-transform: uppercase;
    font-weight: 600;
    color: var(--text-white);
    display: flex;
    align-items: center;
}

/* The brand is a generated logo when one exists and the company name when it
   does not; the builder hides whichever slot has nothing to show. A hard cap
   keeps an oversized fallback image out of the header band. */
.header-main-block .navbar-brand .brand-logo {
    display: block;
    max-height: 4.4rem;
    max-width: 22rem;
    width: auto;
    object-fit: contain;
}

/* Never truncated: a company name cut to "Harness Demo C..." has nowhere else
   on the site to be read in full. A long name wraps and the pill grows. */
.header-main-block .navbar-brand .brand-text {
    display: block;
    max-width: 24rem;
    line-height: 1.15;
    overflow-wrap: break-word;
}

.header-main-block .navbar .nav-link {
    color: var(--text-white);
    text-transform: capitalize;
    font-size: 1.6rem;
    font-weight: 500;
    padding: 0.5rem 1.6rem;
    margin: 0 0.2rem;
    font-family: var(--primary-font);
    position: relative;
    transition: all 0.4s cubic-bezier(0.075, 0.82, 0.165, 1);
}

.header-main-block .navbar .nav-link:hover {
    color: var(--active-nav-color);
}

.header-main-block .navbar .nav-link::after {
    content: '';
    height: 0.4rem;
    width: 0;
    background-color: var(--bg-primary-color);
    position: absolute;
    bottom: -2rem;
    margin: 0 auto;
    left: 0;
    right: 0;
    border-radius: 0.3rem;
    transition: all 0.25s;
}

.header-main-block .navbar .nav-link:hover::after {
    width: 100%;
}

.nav-link.active-nav {
    color: var(--active-nav-color) !important;
}

.nav-link.active-nav::after {
    content: '';
    height: 0.4rem;
    width: 100% !important;
    background-color: var(--active-nav-color);
    position: absolute;
    bottom: -2rem;
    margin: 0 auto;
    left: 0;
    right: 0;
    border-radius: 0.3rem;
    transition: all 0.25s;
}

.navbar-toggler {
    color: var(--text-white);
    font-size: 1.6rem;
    border: none;
    padding: 0.4rem 1.2rem;
}

.navbar-toggler:focus,
.navbar-toggler:active {
    outline: none;
    border: none;
    box-shadow: none;
}

.navbar-toggler .toggler-icon {
    display: block;
    width: 2.2rem;
    height: 2.2rem;
    fill: currentColor;
}

/* Reduced header used by the blog and policy pages: brand on the left, one way
   back to the homepage on the right, no section nav to scroll-spy. */
.header-main-block.header-compact {
    position: relative;
    top: 0;
    padding: 2rem 0 0 0;
}

.header-compact .header-bg {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 2rem 4rem 2rem 0;
}

.header-compact .navbar-brand {
    margin-left: 4rem;
}

.header-compact .back-link {
    color: var(--text-white);
    font-family: var(--primary-font);
    font-size: 1.6rem;
    font-weight: 600;
    white-space: nowrap;
    transition: all 0.3s;
}

.header-compact .back-link:hover {
    color: var(--active-nav-color);
}

/* ==========Header Section end ========== */

/* =======hero Section start========== */
.full-width-block {
    background-image: var(--hero-bg-img);
    background-color: var(--bg-hero-black);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center 8rem;
    position: relative;
}

.full-width-block .container .row {
    padding: 0.8rem;
}

.full-width-block.section-spacing {
    padding: 14rem 0 7.75rem 0;
}

.banner-content {
    padding-top: 5rem;
}

.banner-content .hero-big-title {
    font-family: var(--primary-font);
    font-weight: 400;
    font-size: 7.6rem;
    color: var(--text-white);
    overflow-wrap: break-word;
}

.banner-content .hero-big-title span {
    font-weight: 700;
}

.banner-text {
    color: var(--text-white);
    font-family: var(--primary-font);
    font-weight: 400;
    font-size: 2.4rem;
    margin-bottom: 5rem;
}

.banner-right-content {
    padding-left: 5rem;
}

/* The original hero portrait shipped as one PNG: a photo sitting on an
   accent-coloured hexagon plate. Generated imagery is an ordinary rectangular
   photo, so the plate is rebuilt in CSS and the photo clipped to a slightly
   smaller hexagon inside it — same silhouette, any source aspect ratio. */
.about-img {
    width: 100%;
}

/* Smaller than the hero plate: the about column carries one paragraph where the
   theme had a five-row info list, so a full-size plate unbalanced the row. */
.about-img .hex-frame {
    max-width: 46rem;
}

.hex-frame {
    position: relative;
    width: 100%;
    max-width: 53.1rem;
    margin: 0 auto;
    aspect-ratio: 1 / 1;
}

.hex-frame::before {
    content: '';
    position: absolute;
    inset: 0;
    background-color: var(--bg-primary-color);
    clip-path: polygon(50% 0%, 93.3% 25%, 93.3% 75%, 50% 100%, 6.7% 75%, 6.7% 25%);
}

.hex-frame img {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    clip-path: polygon(50% 4.6%, 89.3% 27.3%, 89.3% 72.7%, 50% 95.4%, 10.7% 72.7%, 10.7% 27.3%);
}

/* =========Hero Section End ======== */

/* ===========Marquee Slider Section Start========= */

.marquee-slider-block {
    width: 100%;
    background-color: var(--bg-primary-color);
    padding: 2rem 0;
}

.marquee-container {
    display: flex;
    align-items: center;
    user-select: none;
    overflow: hidden;
}

/* A carousel is the wrong tool for this band. The plugin divides its stage into
   N equal cells, so a service name wider than one cell painted straight over its
   neighbour ("Data Analytics and Business Intelligence" needed 544px of a 392px
   cell and spilled 221px into the next one), and its autoWidth mode sizes the
   stage from a stale measurement under `loop`, which wrapped the items onto a
   second row instead.

   The track is three identical copies scrolled by exactly one copy width, so the
   loop is seamless at any label length, and three copies keep the band wider
   than the viewport even when every name is short. Spacing lives inside the
   items rather than in a flex gap, so the seam between copies is spaced exactly
   like every other join. */
.marquee-track {
    display: flex;
    flex: none;
    width: max-content;
    animation: marquee-scroll 32s linear infinite;
}

.marquee-track .slide-role {
    display: flex;
    flex: none;
}

@keyframes marquee-scroll {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(calc(-100% / 3));
    }
}

.slide-role .role-item {
    display: flex;
    flex: none;
    align-items: center;
    white-space: nowrap;
    padding-right: 2rem;
}

.slide-role .star-icon img {
    width: 30px;
    display: block;
    margin: 0 1rem 0 2rem;
}

.role-title .title {
    font-size: 2.6rem;
    color: var(--text-black);
}

/* ===========Marquee Slider Section End========= */

/* =========about section start======== */
.about-section {
    background: var(--bg-black);
}

.about-content {
    padding-left: 5rem;
}

.about-section .section-title {
    margin-bottom: 3rem;
}

.about-content .about-lead {
    color: var(--text-white);
    font-family: var(--primary-font);
    font-size: 2.8rem;
    font-weight: 600;
    line-height: 1.3;
}

.about-details p {
    color: var(--text-sm-white-color);
    font-size: 1.6rem;
    margin-bottom: 2rem;
}

/* ===========about section end============= */

/* ================full-bleed wave band start ============= */
.cta-section {
    background: var(--bg-black);
}

.cta-section .cta-full-block {
    background-color: var(--background-main-color);
    clip-path: var(--main-background);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    padding: 15rem 0 14rem 0;
}

.cta-section .cta-content {
    max-width: 82rem;
    margin: 0 auto;
}

.cta-section .cta-content h3 {
    font-family: var(--primary-font);
    font-weight: 600;
    font-size: 3.6rem;
    line-height: 1.35;
    color: var(--band-ink);
}

.cta-section .cta-content .main-btn-outlined {
    background-color: var(--band-btn-bg);
    color: var(--band-btn-text);
    border-color: var(--band-btn-bg);
}

.cta-section .cta-content .main-btn-outlined:hover {
    background-color: transparent;
    color: var(--band-ink);
    border-color: var(--band-ink);
}

/*============ full-bleed wave band end =========*/

/*============ Service Section Start= =========*/

.service-section {
    background: var(--bg-panel-color);
}

.service-content h2 {
    text-align: center;
    margin-bottom: 5rem;
}

/* Flex row rather than the float grid the theme shipped, so the cards share a
   height and their untruncated paragraphs line up.

   The basis is a PERCENTAGE, not a pixel width: with `flex: 1 1 30rem` a wide
   container fits four 300px cards and the row silently became 4+2. At 30% a
   fourth card can never fit (4 x 30% > 100%) while three always do, so the
   count is fixed at every width and grow fills the line. */
.service-content .service-row {
    display: flex;
    flex-wrap: wrap;
    gap: 2rem;
    align-items: stretch;
}

.service-content .service-row::before,
.service-content .service-row::after {
    content: none;
    display: none;
}

.service-content .service-col {
    flex: 1 1 30%;
    max-width: calc((100% - 4rem) / 3);
    min-width: 0;
    display: flex;
}

.service-card {
    background-color: transparent;
    padding: 2.5rem 1rem;
    border: 0.1rem solid var(--about-border-color);
    border-radius: 2rem;
    transition: all 0.3s ease;
    width: 100%;
}

.service-card:hover {
    border: 0.1rem solid var(--service--border--color);
    background-color: var(--service-hover);
}

.service-card:hover svg path {
    fill: var(--service-icon-color-hover);
}

.service-card.active {
    border: 0.1rem solid var(--service--border--color);
    background-color: var(--service-hover);
}

.service-card.active svg path {
    fill: var(--service-icon-color-hover);
}

.service-card.svg-no-hover .svg-path path {
    fill: none;
}

.service-card p {
    font-family: var(--primary-font);
    font-weight: 400;
    font-size: 1.6rem;
    color: var(--text-sm-white-color);
    margin-bottom: 0;
}

.service-card:hover p {
    color: var(--service-card-text-hover);
}

.service-card.active p {
    color: var(--service-card-text-hover);
}

.service-card h4 {
    font-family: var(--primary-font);
    color: var(--text-white);
    font-weight: 500;
    font-size: 2.4rem;
    margin: 2rem 0;
    line-height: 1.25;
}

.service-card svg {
    flex: none;
}

/*============ Service Section End =========*/

/*============ why choose section start =========*/
.choose-section {
    background: var(--bg-black);
}

.choose-section .section-title {
    display: block;
    text-align: center;
    margin-bottom: 5rem;
}

.choose-section .info-box {
    max-width: 96rem;
    margin: 0 auto;
}

/* The theme marked list rows with a hairline pseudo-element rather than a
   border; keeping it means the row keeps its generous vertical rhythm. */
.choose-section .info-box .info-item {
    position: relative;
    padding: 3rem 0;
}

.choose-section .info-box .info-item::before {
    content: '';
    position: absolute;
    height: 0.1rem;
    width: 100%;
    background-color: var(--about-border-color);
    left: 0;
    right: 0;
    bottom: 0;
}

.choose-section .info-box .info-item:last-child::before {
    display: none;
}

.choose-section .info-item h4 {
    color: var(--text-white);
    font-family: var(--primary-font);
    font-weight: 600;
    font-size: 2.2rem;
    line-height: 1.3;
}

.choose-section .info-item p {
    color: var(--text-sm-white-color);
    font-size: 1.6rem;
}

/*============ why choose section end =========*/

/*=========== statement section start ===========*/
/* The theme's testimonial slider is gone — there is no data source for quotes,
   and inventing them is not an option. Its card chrome and quote mark are
   reused here for a single statement drawn from the site's own copy. */
.statement-section {
    background: var(--bg-panel-color);
    text-align: center;
}

.statement-box {
    max-width: 88rem;
    margin: 0 auto;
    background: var(--blog-card-background);
    border: 0.1rem solid var(--under-line-color);
    border-radius: 28px;
    box-shadow: 0px 0px 24px 0px rgba(0, 0, 0, 0.08);
    padding: 5rem 4rem;
}

.statement-box svg {
    display: block;
    margin: 0 auto 1rem auto;
    color: var(--bg-primary-color);
}

.statement-box svg path {
    fill: var(--bg-primary-color);
}

.statement-box h3 {
    color: var(--text-white);
    font-family: var(--primary-font);
    font-weight: 600;
    font-size: 3rem;
    line-height: 1.3;
    margin-bottom: 1rem;
}

.statement-box p {
    color: var(--text-sm-white-color);
    font-size: 1.7rem;
}

/*=========== statement section end ===========*/

/* ===========Blog section start ===========*/
.blog-section {
    background: var(--review-background);
}

.blog-section h2 {
    text-align: center;
    display: block;
    margin-bottom: 5rem;
}

/* Same reason as the service row: equal-height cards, no rounding overflow. */
.blog-row {
    display: flex;
    flex-wrap: wrap;
    gap: 2.4rem;
    align-items: stretch;
}

.blog-row::before,
.blog-row::after {
    content: none;
    display: none;
}

.blog-row .blog-col {
    flex: 1 1 30%;
    max-width: calc((100% - 4.8rem) / 3);
    min-width: 0;
    display: flex;
}

.blog-content {
    text-align: center;
    border: 0.1rem solid var(--under-line-color);
    border-radius: 28px;
    padding: 2rem;
    box-shadow: 0px 0px 24px 0px rgba(0, 0, 0, 0.08);
    transition: all 0.3s;
    background: var(--blog-card-background);
    display: flex;
    flex-direction: column;
    width: 100%;
}

.blog-content:hover {
    border: 0.1rem solid var(--bg-primary-color);
}

.blog-top-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    margin: 0 1rem;
    padding-top: 1rem;
}

.blog-top-content .tag {
    background: var(--bg-primary-color);
    color: #000000;
    padding: 0.7rem 1.5rem;
    font-size: 1.2rem;
    text-transform: uppercase;
    font-weight: 600;
    border-radius: 0.8rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 16rem;
}

.blog-top-content .date {
    font-size: 1.4rem;
    text-transform: uppercase;
    white-space: nowrap;
    font-weight: 500;
    color: var(--text-sm-white-color);
}

.blog-middle-content {
    padding: 2rem 0 1rem 0;
    flex: 1 1 auto;
}

.blog-middle-content .blog-title {
    color: var(--text-white);
    font-family: var(--primary-font);
    font-size: 1.8rem;
    font-weight: 600;
    line-height: 3rem;
    text-align: left;
    margin: 2rem 1rem 0 1rem;
    transition: all 0.3s;
}

.blog-middle-content .blog-title a {
    color: inherit;
}

.blog-content:hover .blog-title {
    color: var(--bg-primary-service-color);
}

/* Generated covers arrive at any aspect ratio, so the tile sets the box. */
.blog-middle-content .blog-thumb {
    display: block;
    padding: 0 1rem;
}

.blog-middle-content .blog-thumb img {
    display: block;
    width: 100%;
    aspect-ratio: 31 / 20;
    object-fit: cover;
    border-radius: 1.6rem;
}

.blog-bottom-content {
    padding: 1.5rem 1rem 0.5rem 1rem;
    text-align: left;
}

.blog-bottom-content h5 {
    color: var(--text-white);
    font-size: 1.6rem;
    line-height: 1.4;
}

.blog-bottom-content h5 span {
    color: var(--text-sm-white-color);
    font-family: var(--primary-font);
    font-weight: 600;
}

/* ===========Blog section end ===========*/

/* ==========Contact section Start ===========*/
.contact-section {
    background: var(--contact-bg);
}

.contact-section h2 {
    text-align: center;
    display: block;
    padding-bottom: 4rem;
}

/* Contact info */
.contact-info-box {
    padding-left: 10rem;
    position: relative;
}

/* The theme drew this pointer by swapping an <img>'s content per theme; an
   empty span with a generated content image does the same without the element
   firing a request for the page itself. */
.contact-info-box .arrow-line {
    position: absolute;
    bottom: 7.8rem;
    right: -5rem;
    display: block;
    width: 17.3rem;
    pointer-events: none;
}

/* The generated image is a replaced box, so it renders at its natural 173px
   unless the pseudo-element is sized: the narrow breakpoint's `width: 10rem` on
   the span alone left it 20px wider than a 360px viewport, which was enough to
   make the whole page scroll sideways. */
.contact-info-box .arrow-line::before {
    content: var(--contact-arrow);
    display: block;
    width: 100%;
    height: auto;
}

.contact-info-box .contact-figure {
    display: block;
    width: 100%;
    max-width: 37rem;
    aspect-ratio: 37 / 20;
    object-fit: cover;
    border-radius: 2rem;
}

.contact-info {
    display: flex;
    align-items: center;
    gap: 1.6rem;
    padding: 2rem 0;
}

.contact-icon {
    background: var(--bg-primary-color);
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 1.3rem;
    border-radius: 0.5rem;
    flex: none;
}

.contact-icon svg path {
    fill: var(--text-black);
}

.contact-sub-title {
    color: var(--text-white);
    font-family: var(--primary-font);
    font-size: 2.4rem;
    font-weight: 600;
    line-height: 1.3;
    margin-top: 2.6rem;
}

.contact-info ul {
    display: inline-block;
    margin-top: 0.8rem;
    min-width: 0;
}

.contact-info ul li:nth-child(1) {
    font-family: var(--primary-font);
    font-size: 1.6rem;
    font-weight: 600;
    line-height: normal;
    text-transform: uppercase;
    color: var(--text-white);
}

.contact-info ul li:nth-child(2) {
    font-family: var(--primary-font);
    font-size: 1.8rem;
    font-weight: 400;
    line-height: 1.4;
    color: var(--text-sm-white-color);
    overflow-wrap: anywhere;
}

.contact-info ul li:nth-child(2) a {
    color: var(--text-sm-white-color);
    transition: all 0.3s;
}

.contact-info ul li:nth-child(2) a:hover {
    color: var(--bg-primary-service-color);
}

/* contact form */
.form-box {
    background: var(--bg-black);
    margin: 0 5rem;
    padding: 2rem 5rem 3rem 5rem;
    border-radius: 2.8rem;
    box-shadow: 0px 0px 24px 0px rgba(0, 0, 0, 0.08);
}

.form-box .contact-sub-title {
    color: var(--text-white);
    text-align: left;
    font-family: var(--primary-font);
    font-size: 2.4rem;
    font-weight: 500;
    line-height: normal;
}

.form-box .form-label {
    display: block;
    color: var(--text-white);
    font-family: var(--primary-font);
    font-size: 1.4rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 0;
}

.form-box .form-control {
    background: transparent;
    color: var(--text-white);
    caret-color: var(--text-white);
    border: 0.1rem solid var(--about-border-color);
    font-family: var(--primary-font);
    font-size: 1.6rem;
    font-style: normal;
    font-weight: 400;
    border-radius: 0.6rem;
    margin: 1rem 0;
    box-shadow: none;
    outline: none;
    transition: all 0.3s;
}

.form-box .form-control:focus,
.form-box .form-control:active {
    border: 0.1rem solid var(--bg-primary-color);
    background: transparent;
    color: var(--text-white);
}

.form-box textarea {
    resize: none;
    padding: 1.3rem 2rem;
}

.form-box input {
    padding: 1.3rem 2rem;
}

.form-box .main-btn {
    margin-bottom: 1.5rem;
}

.form-box .formStatus {
    display: block;
    min-height: 2.4rem;
    font-size: 1.6rem;
    font-family: var(--primary-font);
    font-weight: 500;
}

/* ==========Contact section end ===========*/

/* ==========Footer section start ===========*/
/* No background artwork. The theme shipped two 1920px PNGs here (237KB) that
   were really just flat fills — the light one measured as the accent itself and
   the dark one as #111315 — pinned with background-attachment: fixed, which
   painted them relative to the viewport and left the footer bare in any
   full-page capture and on mobile browsers that ignore `fixed`.

   A colour plus a gradient sheen reproduces the fill and its faint top-to-bottom
   shading, costs nothing to download, and lets the light footer follow the
   palette accent instead of needing a per-colourway recolour pass. */
.footer-section {
    background-color: var(--footer-bg);
    background-image: var(--footer-sheen);
}

.footer-section.section-spacing {
    padding-top: 7rem;
    padding-bottom: 8rem;
}

.footer-section h3 {
    color: var(--text-white);
    font-family: var(--primary-font);
    font-size: 3.2rem;
    font-weight: 700;
    line-height: 1.3;
    text-transform: uppercase;
    margin-bottom: 2.75rem;
    text-align: center;
}

/* The theme's footer was a row of social buttons. There is no social data to
   fill them, so the same centred row now carries the site's own navigation. */
.footer-links,
.footer-policies {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 1rem 3rem;
}

.footer-links {
    padding-bottom: 2rem;
}

.footer-policies {
    padding-bottom: 4rem;
}

.footer-links li a,
.footer-policies li a {
    color: var(--text-white);
    font-family: var(--primary-font);
    font-size: 1.6rem;
    font-weight: 500;
    transition: all 0.3s;
}

.footer-policies li a {
    font-size: 1.4rem;
    color: var(--footer-muted);
}

.footer-links li a:hover,
.footer-policies li a:hover {
    color: var(--bg-primary-service-color);
}

.footer-contact {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1rem 3rem;
    padding-bottom: 3rem;
}

.footer-contact li {
    color: var(--footer-muted);
    font-family: var(--primary-font);
    font-size: 1.5rem;
    text-align: center;
}

.footer-contact li a {
    color: var(--footer-muted);
    transition: all 0.3s;
}

.footer-contact li a:hover {
    color: var(--bg-primary-service-color);
}

.copyright-area {
    display: flex;
    justify-content: center;
    align-items: center;
    padding-top: 2.5rem;
    border-top: 0.1rem solid var(--footer-line-color);
}

.copyright-text {
    color: var(--text-white);
    font-family: var(--primary-font);
    font-size: 1.8rem;
    font-style: normal;
    font-weight: 500;
    line-height: 26px;
    text-align: center;
    margin-top: 0;
}

.copyright-text span {
    color: var(--text-primary-color);
}

/* ==========Footer section end ===========*/

/* ==========Article + policy pages start ===========*/
/* These pages deliberately do not reuse the homepage silhouette: reduced
   header, table of contents inline above the prose rather than in a sidebar,
   and recent articles as a full-width strip underneath. */
.article-section {
    background: var(--bg-black);
    padding-top: 6rem;
    padding-bottom: 10rem;
}

.article-wrap {
    max-width: 96rem;
    margin: 0 auto;
}

.article-breadcrumb {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.8rem;
    font-family: var(--primary-font);
    font-size: 1.4rem;
    color: var(--text-sm-white-color);
    margin-bottom: 2rem;
}

.article-breadcrumb a {
    color: var(--text-sm-white-color);
    transition: all 0.3s;
}

.article-breadcrumb a:hover {
    color: var(--bg-primary-service-color);
}

.article-breadcrumb .sep {
    color: var(--about-border-color);
}

.article-title {
    color: var(--text-white);
    font-family: var(--primary-font);
    font-size: 4.4rem;
    font-weight: 700;
    line-height: 1.25;
    margin-bottom: 1.5rem;
}

.article-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.8rem 2.5rem;
    font-family: var(--primary-font);
    font-size: 1.5rem;
    color: var(--text-sm-white-color);
    padding-bottom: 3rem;
    border-bottom: 0.1rem solid var(--about-border-color);
}

.article-meta strong {
    color: var(--text-white);
    font-weight: 600;
}

.article-cover {
    margin: 3.5rem 0;
}

.article-cover img {
    display: block;
    width: 100%;
    aspect-ratio: 2 / 1;
    object-fit: cover;
    border-radius: 2.8rem;
}

/* Inline table of contents — a boxed list above the article body. */
.article-toc {
    background: var(--bg-panel-color);
    border: 0.1rem solid var(--under-line-color);
    border-radius: 2rem;
    padding: 3rem 3.5rem;
    margin: 3.5rem 0;
}

.article-toc h4 {
    color: var(--text-white);
    font-family: var(--primary-font);
    font-size: 1.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 1.5rem;
}

.article-toc ul {
    display: flex;
    flex-wrap: wrap;
    gap: 0.8rem 2.5rem;
}

.article-toc li a {
    color: var(--text-sm-white-color);
    font-family: var(--primary-font);
    font-size: 1.6rem;
    line-height: 1.5;
    border-bottom: 0.2rem solid transparent;
    transition: all 0.3s;
}

.article-toc li a:hover,
.article-toc li a.active {
    color: var(--text-white);
    border-bottom-color: var(--bg-primary-color);
}

.article-body {
    color: var(--text-sm-white-color);
    font-family: var(--primary-font);
    font-size: 1.7rem;
    line-height: 1.75;
}

.article-body h2,
.article-body h3,
.article-body h4 {
    color: var(--text-white);
    display: block;
    -webkit-text-stroke: 0;
    text-stroke: 0;
    margin: 4rem 0 1.5rem 0;
    scroll-margin-top: 3rem;
}

.article-body h2 {
    font-size: 3.2rem;
    text-transform: none;
}

.article-body h3 {
    font-size: 2.4rem;
}

.article-body h4 {
    font-size: 2rem;
}

.article-body p {
    margin: 0 0 2rem 0;
}

.article-body ul,
.article-body ol {
    margin: 0 0 2rem 2.5rem;
}

.article-body ul li,
.article-body ol li {
    list-style: disc;
    margin-bottom: 0.8rem;
}

.article-body ol li {
    list-style: decimal;
}

.article-body a {
    color: var(--bg-primary-service-color);
    text-decoration: underline;
}

.article-body img {
    display: block;
    max-width: 100%;
    height: auto;
    border-radius: 2rem;
    margin: 2rem 0;
}

.article-body blockquote {
    margin: 0 0 2rem 0;
    padding: 1rem 0 1rem 2.5rem;
    border-left: 0.3rem solid var(--bg-primary-color);
    color: var(--text-white);
}

.article-body table {
    width: 100%;
    min-width: 52rem;
    border-collapse: collapse;
    margin-bottom: 2rem;
}

.article-body table th,
.article-body table td {
    border: 0.1rem solid var(--about-border-color);
    padding: 1.2rem 1.5rem;
    text-align: left;
}

.article-body table th {
    color: var(--text-white);
    font-weight: 600;
}

/* A wide table scrolls inside its own box instead of widening the page. */
.article-scroll {
    overflow-x: auto;
    margin-bottom: 2rem;
}

/* Recent articles: a strip under the article rather than a sidebar list. */
.recent-section {
    background: var(--review-background);
    padding-top: 8rem;
    padding-bottom: 8rem;
}

.recent-section h2 {
    display: block;
    text-align: center;
    margin-bottom: 4rem;
}

.recent-row {
    display: flex;
    flex-wrap: wrap;
    gap: 2.4rem;
    align-items: stretch;
    justify-content: center;
}

.recent-item {
    flex: 1 1 30%;
    max-width: calc((100% - 4.8rem) / 3);
    min-width: 0;
    display: flex;
    flex-direction: column;
    background: var(--blog-card-background);
    border: 0.1rem solid var(--under-line-color);
    border-radius: 2.4rem;
    padding: 1.6rem;
    box-shadow: 0px 0px 24px 0px rgba(0, 0, 0, 0.08);
    transition: all 0.3s;
}

.recent-item:hover {
    border-color: var(--bg-primary-color);
}

.recent-item img {
    display: block;
    width: 100%;
    aspect-ratio: 31 / 20;
    object-fit: cover;
    border-radius: 1.6rem;
    margin-bottom: 1.6rem;
}

.recent-item h5 {
    color: var(--text-white);
    font-size: 1.7rem;
    line-height: 1.45;
    margin-bottom: 1rem;
    flex: 1 1 auto;
}

.recent-item .recent-date {
    color: var(--text-sm-white-color);
    font-family: var(--primary-font);
    font-size: 1.4rem;
    text-transform: uppercase;
}

/* Newsletter — blog pages only, matching the contact form's panel. */
.news-block {
    max-width: 66rem;
    margin: 5rem auto 0 auto;
    background: var(--bg-black);
    border: 0.1rem solid var(--under-line-color);
    border-radius: 2.8rem;
    padding: 4rem;
    box-shadow: 0px 0px 24px 0px rgba(0, 0, 0, 0.08);
    text-align: center;
}

.news-block h4 {
    color: var(--text-white);
    font-family: var(--primary-font);
    font-size: 2.4rem;
    font-weight: 600;
    line-height: 1.3;
}

.news-block p {
    color: var(--text-sm-white-color);
    font-size: 1.6rem;
    margin-bottom: 2rem;
}

.news-block form {
    display: flex;
    flex-wrap: wrap;
    gap: 1.2rem;
    justify-content: center;
}

.news-block input {
    flex: 1 1 24rem;
    min-width: 0;
    background: transparent;
    color: var(--text-white);
    caret-color: var(--text-white);
    border: 0.1rem solid var(--about-border-color);
    border-radius: 0.6rem;
    padding: 1.4rem 2rem;
    font-family: var(--primary-font);
    font-size: 1.6rem;
}

.news-block input:focus {
    border-color: var(--bg-primary-color);
}

.news-block .news-msg {
    flex: 1 1 100%;
    min-height: 2.2rem;
    font-family: var(--primary-font);
    font-size: 1.5rem;
    font-weight: 500;
}

/* ==========Article + policy pages end ===========*/

/* ==========Widgets (scroll-to-top, theme switch) ===========*/
#scrollUp {
    background-color: var(--bg-white);
    background-image: url("../img/top.png");
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center center;
    bottom: 2rem;
    right: 2rem;
    width: 3.8rem;
    height: 3.8rem;
    text-indent: -99999999px;
    box-sizing: border-box;
    border: 1rem solid var(--bg-white);
    border-radius: 50%;
    transition: all 0.3s;
    box-shadow: 0px 0px 34px 5px rgba(0, 0, 0, 0.2);
}

#scrollUp:hover {
    background-color: var(--bg-primary-color);
    border: 1rem solid var(--bg-primary-color);
}

@media (max-width: 767px) {
    #scrollUp {
        width: 4rem;
        height: 4rem;
    }
}

.radio-btn {
    width: 150px;
    height: 80px;
    padding: 10px;
    background-color: var(--switch-track);
    border-radius: 50px;
    cursor: pointer;
    overflow: hidden;
    position: fixed;
    bottom: 1.5rem;
    left: 1.5rem;
    z-index: 999;
    transform: scale(0.5);
    box-shadow: 0px 0px 34px 5px rgba(0, 0, 0, 0.2);
}

.radio-btn .radio-inner {
    position: relative;
    width: 60px;
    height: 60px;
    background-color: var(--switch-knob);
    border-radius: 50%;
    transition: all 0.6s;
}

.radio-btn .radio-inner::before {
    content: "";
    position: absolute;
    top: 0;
    left: -25px;
    width: 100%;
    height: 100%;
    background-color: var(--switch-track);
    border-radius: 50%;
    transform: scale(0);
    transition: all 0.6s;
}

.radio-btn .radio-inner.active {
    transform: translate(calc(150px - 80px));
}

.radio-btn .radio-inner.active::before {
    left: -25px;
    transform: scale(1);
}

.comp_details { display: none !important; }

.header-main-block .navbar-brand .brand-text { display: none !important; }