:root {
    /*
      Agon theme maps links/buttons to --color-primary.
      Keep these as the original theme neutrals so accent blues
      stay in brand CSS (home/header/about), not every <a>.
    */
    --color-primary: #1E1E1E;
    --primary-color: #1E1E1E;
    --color-secondary: #5D5D63;
    --color-danger: #EF476F;

    /* Brand accents (use in brand components, not Agon globals) */
    --brand-primary: #0A3D62;
    --brand-secondary: #1a7bb8;

    /* Unified site typography — one family everywhere */
    --font-sans: "Poppins", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --primary-font: var(--font-sans);
    --secondary-font: var(--font-sans);
    --font-heading: var(--font-sans);
    --font-body: var(--font-sans);

    /* Override theme font tokens so menus/sections stay consistent */
    --tp-ff-body: var(--font-sans);
    --tp-ff-heading: var(--font-sans);
    --tp-ff-p: var(--font-sans);
    --tp-ff-marcellus: var(--font-sans);
    --tp-ff-shoulders: var(--font-sans);
    --tp-ff-dmsans: var(--font-sans);
    --tp-ff-syne: var(--font-sans);
    --tp-ff-gallery: var(--font-sans);
    --tp-ff-aladin: var(--font-sans);

    /* Type scale — About page as reference */
    --fs-kicker: 0.75rem;
    --fs-hero: clamp(2rem, 4vw, 3rem);
    --fs-section: clamp(1.55rem, 3vw, 2.1rem);
    --fs-lead: 1.08rem;
    --fs-body: 1rem;
    --fs-lead-body: 1.05rem;
    --lh-hero: 1.15;
    --lh-lead: 1.75;
    --lh-body: 1.7;
    --fw-normal: 400;
    --fw-medium: 500;
    --fw-semibold: 600;
    --fw-bold: 700;
    --color-heading: var(--brand-primary);
    --color-muted: #5a738a;
    --color-accent: var(--brand-secondary);

    /* Section vertical rhythm — About page as reference */
    --section-pad-y: 72px;
    --section-pad-y-sm: 52px;
}

html {
    font-size: 16px;
    -webkit-text-size-adjust: 100%;
}

html,
body {
    font-family: var(--font-sans) !important;
}

body {
    font-size: var(--fs-body);
    font-weight: var(--fw-normal);
    line-height: var(--lh-body);
    letter-spacing: 0;
    color: #1E1E1E;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1,
h2,
h3,
h4,
h5,
h6,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6,
.tp-hero-title,
.tp-section-title,
.gradient-text,
.sp-hero__title,
.sp-heading,
.about-hero__title,
.about-heading,
.page-hero__title,
.page-heading,
.blog-list-title,
.blog-article__title,
.tp-megamenu-title,
.footer-heading,
.sv-service-title,
.text-heading-3 {
    font-family: var(--font-heading) !important;
    font-weight: var(--fw-bold);
    letter-spacing: -0.01em;
    line-height: 1.25;
}

/* Kill theme 85px hero titles — About-scale everywhere */
.tp-hero-title,
.tp-hero-title.gradient-text,
.gradient-text.tp-hero-title,
.sp-hero__title,
.blog-list-title,
.page-hero__title,
.about-hero__title,
.text-heading-3 {
    font-size: var(--fs-hero) !important;
    line-height: var(--lh-hero) !important;
    font-weight: var(--fw-bold) !important;
    color: var(--color-heading);
}

.tp-hero-title.gradient-text,
.gradient-text.tp-hero-title {
    background: none !important;
    -webkit-background-clip: unset !important;
    background-clip: unset !important;
    -webkit-text-fill-color: var(--color-heading) !important;
}

.tp-section-title,
.sp-heading,
.about-heading,
.page-heading,
.sv-service-title,
.agency-section h2,
.agency-section .title,
.agency__content .title,
.home-blog-section h2,
.h1-home-page,
.tp-about-content h2.tp-section-title {
    font-size: var(--fs-section) !important;
    line-height: 1.25 !important;
    font-weight: var(--fw-bold) !important;
    color: var(--color-heading);
}

p,
li,
label,
small,
td,
th,
dd,
dt,
.tp-hero-content p,
.blog-content,
.sp-lead,
.about-lead,
.page-hero__text,
.page-lead {
    font-family: var(--font-body) !important;
}

.tp-hero-content p,
.sp-lead,
.about-lead,
.page-hero__text,
.page-lead,
.about-hero__text {
    font-size: var(--fs-lead) !important;
    line-height: var(--lh-lead) !important;
    color: var(--color-muted);
}

a:not(.fa):not(.fab):not(.fas):not(.far):not(.bi),
button:not(.fa):not(.bi),
.btn,
.sp-btn,
.about-btn,
.page-btn,
.hero-quote-btn,
.btn-gradient,
.btn-gradient-primary,
.nav-link,
.tp-header-menu a,
.submenu a {
    font-family: var(--font-sans) !important;
}

.btn,
button,
.sp-btn,
.about-btn,
.page-btn,
.hero-quote-btn,
.btn-gradient,
.btn-gradient-primary {
    font-weight: var(--fw-semibold);
    letter-spacing: 0.01em;
}

.form-control,
.form-select,
input,
textarea,
select {
    font-family: var(--font-sans) !important;
}

/* Preserve icon fonts */
.fa,
.fas,
.far,
.fal,
.fab,
[class^="fa-"],
[class*=" fa-"] {
    font-family: "Font Awesome 6 Free", "Font Awesome 6 Brands", "Font Awesome 5 Free", "FontAwesome" !important;
}

.bi,
[class^="bi-"],
[class*=" bi-"] {
    font-family: "bootstrap-icons" !important;
}

/* CLS / layout stability */
img,
video,
iframe {
    max-width: 100%;
    height: auto;
}

#smooth-wrapper,
#smooth-content {
    position: relative;
    transform: none !important;
}

.testimonial-slider {
    min-height: 260px;
}

/* Shared section vertical padding (About rhythm) */
.page-section,
.about-section,
.agency-section,
.tp-service-area,
.logo-slider-wrapper,
.tp-project-area,
.home-blog-section,
.tp-team-area,
.tp-about-area,
.tp-testimonial-area,
.blog-details-realated-area,
.sp-section,
.contact-section,
.legal-content-wrap,
.careers-content {
    padding-top: var(--section-pad-y) !important;
    padding-bottom: var(--section-pad-y) !important;
}

/* Compact strip / marquee banners keep their own padding */
.we-promise-banner,
.page-section--tight {
    padding-top: 12px !important;
    padding-bottom: 12px !important;
}

.page-section--flush-bottom {
    padding-bottom: var(--section-pad-y) !important;
}

@media (max-width: 767.98px) {
    .page-section,
    .about-section,
    .agency-section,
    .tp-service-area,
    .logo-slider-wrapper,
    .tp-project-area,
    .home-blog-section,
    .tp-team-area,
    .tp-about-area,
    .tp-testimonial-area,
    .blog-details-realated-area,
    .sp-section,
    .contact-section,
    .legal-content-wrap,
    .careers-content {
        padding-top: var(--section-pad-y-sm) !important;
        padding-bottom: var(--section-pad-y-sm) !important;
    }
}