/* ============================================================
   Codaryx — refinement layer (loaded after main.css)
   ============================================================ */

/* ------------------------------------------------------------------
   1. PALETTE  — swap the theme's electric blue + orange for a
      calmer, more credible indigo / deep-navy system
------------------------------------------------------------------ */
:root {
    --theme: #4f46e5;          /* indigo — primary accent            */
    --theme-hover: #4338ca;
    --theme-soft: #eef0fe;     /* faint indigo tint (light bg)       */
    --theme-color3: #4f46e5;   /* kill the orange CTA colour         */
    --theme2: #141230;         /* deep navy for dark sections        */
    --bg2: #141230;
    --border-color: #e7e8f0;
    --ink: #0e0c1d;
    --muted: #5b5f73;
    --dark-grad: linear-gradient(180deg, #1a1640 0%, #131029 100%);
}

/* Body / base type */
body { color: var(--muted); -webkit-font-smoothing: antialiased; letter-spacing: -0.005em; }
p { color: var(--muted); }
a { color: var(--theme); }

/* ------------------------------------------------------------------
   2. FUNCTIONAL FIXES  (kept from earlier)
------------------------------------------------------------------ */

/* .text-white ships no rule in this build */
.text-white, .text-white * { color: #ffffff !important; }

/* Neutralise the theme's scroll-in animations — they sometimes leave
   sections stuck at opacity:0. Render everything statically. */
.wow, .animated,
.fadeInUp, .fadeInDown, .fadeInLeft, .fadeInRight, .fadeIn,
[class*="img-custom-anim"] {
    visibility: visible !important;
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
}

/* Drop the custom dot-cursor */
.mouse-cursor { display: none !important; }
body { cursor: auto !important; }

/* WebP backgrounds (JPEG fallback) */
.breadcrumb-wrapper.bg-cover {
    background-image: -webkit-image-set(url("../img/breadcrumb.webp") type("image/webp"), url("../img/breadcrumb.jpg") type("image/jpeg")) !important;
    background-image: image-set(url("../img/breadcrumb.webp") type("image/webp"), url("../img/breadcrumb.jpg") type("image/jpeg")) !important;
}
.about-section.bg-cover {
    background-image: -webkit-image-set(url("../img/service/service-bg-2.webp") type("image/webp"), url("../img/service/service-bg-2.jpg") type("image/jpeg")) !important;
    background-image: image-set(url("../img/service/service-bg-2.webp") type("image/webp"), url("../img/service/service-bg-2.jpg") type("image/jpeg")) !important;
}

/* ------------------------------------------------------------------
   3. TYPOGRAPHY
------------------------------------------------------------------ */
:root { --title-font: "Space Grotesk", "Plus Jakarta Sans", system-ui, sans-serif; }
h1, h2, h3, h4, h5, h6,
.title, .subtitle, .widget_title,
.hero-content h1, .section-title .title, .section-title .subtitle,
.work-process-card.style1 .title, .service-card.style1 h3,
.fancy-box.style2 .item h6, .page-heading h1, .breadcrumb-items {
    font-family: "Space Grotesk", "Plus Jakarta Sans", system-ui, sans-serif !important;
    letter-spacing: -0.02em;
}
h2, h3, .title { font-weight: 600; }

.hero-content.style1 h1 { font-size: 54px; line-height: 1.08; font-weight: 600; }
.section-title .title { font-size: 40px; line-height: 1.18; }
.page-heading h1 { font-size: 46px; line-height: 1.12; }
.service-card.style1 h3 { font-size: 20px; line-height: 1.35; font-weight: 600; }
.work-process-card.style1 .title { font-size: 20px; line-height: 1.3; font-weight: 600; }
@media (max-width: 991px) {
    .hero-content.style1 h1 { font-size: 38px; }
    .section-title .title, .page-heading h1 { font-size: 31px; }
}
@media (max-width: 575px) {
    .hero-content.style1 h1 { font-size: 31px; }
}

/* Section eyebrow — replace the <  > arrow icons with a clean tracked label */
.section-title .subtitle,
.hero-content .subtitle,
.title-wrap .subtitle {
    text-transform: uppercase;
    letter-spacing: 0.14em;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--theme);
    display: inline-flex;
    align-items: center;
    gap: 10px;
}
.section-title .subtitle img,
.title-wrap .subtitle img { display: none; }
.section-title .subtitle::before {
    content: "";
    width: 22px; height: 1px;
    background: currentColor;
    display: inline-block;
}
.section-title .subtitle.d-flex.justify-content-center { justify-content: center; }
.bg-theme-color2 .section-title .subtitle,
.bg-theme-color .section-title .subtitle,
.offer-section .section-title .subtitle,
.work-process-section .section-title .subtitle { color: #a9a5e8; }

/* ------------------------------------------------------------------
   4. VERTICAL RHYTHM
------------------------------------------------------------------ */
:root { --section-space: 96px; }
.section-padding { padding: 96px 0; }
@media (max-width: 991px) {
    :root { --section-space: 64px; }
    .section-padding { padding: 64px 0; }
}

/* ------------------------------------------------------------------
   5. BUTTONS  — kill the pseudo-element sweep, use a clean solid /
      ghost pair
------------------------------------------------------------------ */
.gt-btn, .gt-btn.style4, .gt-btn.style5,
.theme-btn, .theme-btn.bg-white {
    overflow: visible;
    text-transform: none;
    letter-spacing: -0.01em;
    font-weight: 600;
    font-size: 15px;
    border-radius: 10px;
    min-width: 0;
    padding: 15px 26px;
    line-height: 1.2;
    border: 1px solid transparent;
    transition: background-color .2s ease, border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.gt-btn::before, .gt-btn::after,
.gt-btn.style5::before, .gt-btn.style5::after,
.theme-btn::before, .theme-btn::after { display: none !important; }

.gt-btn, .gt-btn.style4, .theme-btn {
    background: var(--theme);
    color: #fff;
    box-shadow: 0 10px 24px -10px rgba(79, 70, 229, .55);
}
.gt-btn:hover, .gt-btn.style4:hover, .theme-btn:hover {
    background: var(--theme-hover);
    color: #fff;
    transform: translateY(-1px);
    box-shadow: 0 14px 30px -10px rgba(79, 70, 229, .6);
}

/* secondary / ghost */
.gt-btn.style5 {
    background: transparent;
    color: #fff;
    border-color: rgba(255, 255, 255, .28);
    box-shadow: none;
}
.gt-btn.style5:hover {
    background: rgba(255, 255, 255, .08);
    color: #fff;
    border-color: rgba(255, 255, 255, .5);
    transform: translateY(-1px);
}
/* ghost button sitting on a light background (breadcrumb CTA etc.) */
.breadcrumb-wrapper .gt-btn.style5,
section:not(.hero-section):not(.cta-section) .gt-btn.style5 {
    color: var(--ink);
    border-color: var(--border-color);
}
.gt-btn i, .theme-btn i { margin-left: 8px; }

/* ------------------------------------------------------------------
   6. HERO
------------------------------------------------------------------ */
.hero-wrapper.style1 { background: transparent; padding-top: 92px; }
.hero-main-container.style1 {
    clip-path: none !important;
    -webkit-clip-path: none !important;
    background:
        radial-gradient(820px 460px at 12% -6%, rgba(99, 91, 214, .55) 0%, rgba(99, 91, 214, 0) 60%),
        radial-gradient(700px 500px at 100% 120%, rgba(67, 56, 202, .45) 0%, rgba(67, 56, 202, 0) 55%),
        linear-gradient(158deg, #110f2b 0%, #181441 48%, #1f1a52 100%);
    border: 1px solid rgba(255, 255, 255, .07);
    border-radius: 26px;
    padding: 84px 0 78px;
    overflow: hidden;
    position: relative;
}
.hero-main-container.style1::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(255, 255, 255, .035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, .035) 1px, transparent 1px);
    background-size: 46px 46px;
    -webkit-mask-image: radial-gradient(70% 70% at 50% 30%, #000 0%, transparent 75%);
            mask-image: radial-gradient(70% 70% at 50% 30%, #000 0%, transparent 75%);
    pointer-events: none;
}
@media (max-width: 991px) {
    .hero-main-container.style1 { padding: 44px 0 48px; border-radius: 20px; }
}
.hero-section .hero-main-container.style1 > .container { position: relative; z-index: 1; }

.hero-section .hero-main-container.style1 .row.d-flex { align-items: center; }
@media (max-width: 1199px) { .hero-section .hero-main-container.style1 .row.d-flex { align-items: stretch; } }

.hero-content.style1 { padding-bottom: 0; }
.hero-content.style1 h1 { color: #fff; margin: 22px 0 16px; }
.hero-content.style1 p { color: #c7c8e8; max-width: 42ch; }
.hero-content.style1 .checklist.style3 li { color: #eceafc; font-weight: 500; }
.hero-content.style1 .checklist-wrapper.style3 { margin: 26px 0 30px; }
.hero-content.style1 .btn-wrapper { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
.hero-content.style1 .btn-wrapper .gt-btn { margin: 0 !important; }

/* Hero eyebrow pill */
.hero-content.style1 .subtitle {
    background: rgba(255, 255, 255, .06);
    border: 1px solid rgba(255, 255, 255, .16);
    border-radius: 100px;
    padding: 8px 16px 8px 14px;
    color: #cfcdf5;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-size: 12px;
}
.hero-content.style1 .subtitle img { display: inline-block; width: 15px; opacity: .9; }

.hero-code-card { width: 100%; max-width: 560px; }
.hero-code-card svg { display: block; width: 100%; height: auto; }
@media (max-width: 1199px) { .hero-code-card { max-width: 460px; margin-bottom: 36px; } }

/* ------------------------------------------------------------------
   7. SERVICE CARDS
------------------------------------------------------------------ */
.service-section .service-card.style1,
.service-card.style1 {
    border: 1px solid var(--border-color);
    border-radius: 16px;
    background: #fff;
    padding: 32px 30px;
    box-shadow: 0 1px 2px rgba(14, 12, 29, .04);
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.service-card.style1:hover {
    background: #fff;
    border-color: rgba(79, 70, 229, .35);
    transform: translateY(-5px);
    box-shadow: 0 24px 48px -20px rgba(79, 70, 229, .28);
}
.service-card.style1 .icon {
    width: 56px; height: 56px; line-height: 56px;
    border-radius: 12px;
    border: 1px solid var(--border-color);
    background: var(--theme-soft);
    margin-bottom: 22px;
}
.service-card.style1 .icon i { font-size: 24px; color: var(--theme); vertical-align: middle; }
.service-card.style1:hover .icon { transform: none; background: var(--theme); border-color: var(--theme); }
.service-card.style1:hover .icon i { color: #fff; }
.service-card.style1:hover .body h3,
.service-card.style1 .body h3 { color: var(--ink); }
.service-card.style1:hover .body p,
.service-card.style1 .body p { color: var(--muted); }
.service-card.style1 .body p { font-size: 15px; line-height: 1.65; }

/* ------------------------------------------------------------------
   8. ABOUT (dark) SECTION
------------------------------------------------------------------ */
.about-section.bg-theme-color { background: var(--dark-grad) !important; }
.about-section.bg-theme-color .about-container-wrapper .shape1,
.about-section.bg-theme-color .about-container-wrapper .shape2 { display: none; }
.about-section.bg-theme-color .about-content .title,
.about-section.bg-theme-color .about-content p,
.about-section.bg-theme-color .checklist-wrapper.style3 .checklist.style3 li,
.about-section.bg-theme-color .fancy-box.style2 h6 { color: #ffffff; }
.about-section.bg-theme-color .about-content p { color: #c3c4e0; }
.about-section.bg-theme-color .checklist-wrapper.style3 .checklist.style3 li {
    color: #d7d8ee; margin-bottom: 14px;
}

.about-highlight-card {
    background: rgba(255, 255, 255, .04);
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 18px;
    padding: 34px 34px 26px;
}
.about-highlight-card .fancy-box-wrapper.style2 { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 8px; }
.about-highlight-card .fancy-box.style2 {
    background: rgba(255, 255, 255, .07);
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 12px;
    flex: 1 1 200px;
    padding: 16px 18px;
    align-items: center;
}
.about-highlight-card .fancy-box.style2 .item h6 { max-width: none; }
.about-highlight-card .fancy-box.style2 .icon { background: rgba(79, 70, 229, .28); }
@media (max-width: 575px) { .about-highlight-card { padding: 24px 22px 16px; } }

/* ------------------------------------------------------------------
   9. HEADINGS / TEXT ON DARK BACKGROUNDS
------------------------------------------------------------------ */
.offer-section .section-title .title,
.work-process-section .section-title .title,
.bg-theme-color2 .section-title .title,
.bg-theme-color .section-title .title { color: #ffffff; }

/* ------------------------------------------------------------------
   10. WORK-PROCESS  (deep navy)
------------------------------------------------------------------ */
.work-process-section.space { background: var(--dark-grad) !important; }
.work-process-section.space .work-process-wrapper.style1.space { padding-top: 0; }
.work-process-card.style1 {
    border-top: 1px solid rgba(255, 255, 255, .12);
    padding-top: 26px;
}
.work-process-section .work-process-card.style1 .number {
    color: transparent;
    -webkit-text-stroke: 1px rgba(255, 255, 255, .22);
    font-weight: 600;
    font-size: 40px;
}
.work-process-card.style1.active .number,
.work-process-card.style1:hover .number {
    -webkit-text-stroke-color: var(--theme);
    color: transparent;
}
.work-process-card.style1 .text { color: #b9bad6; }

/* ------------------------------------------------------------------
   11. OFFER SECTION  (About page — platforms)
------------------------------------------------------------------ */
.offer-section.section-bg-2 { background: #100e26 !important; }
.offer-section .offer-items::before { border-color: rgba(255, 255, 255, .14); }
.offer-section .offer-items .icon {
    background: linear-gradient(180deg, rgba(79, 70, 229, .35), rgba(20, 18, 48, .6));
}
.offer-section .offer-items.active .icon { background: var(--theme); }
.offer-section .offer-items .content h5 { color: #fff; font-weight: 600; }

/* ------------------------------------------------------------------
   12. CTA BAND
------------------------------------------------------------------ */
.cta-section .cta-wrap.style1 {
    margin-bottom: 0;
    background: linear-gradient(135deg, #4f46e5 0%, #6d5ef0 100%);
    border-radius: 22px;
    padding: 56px 64px;
}
.cta-section .cta-wrap.style1 .shape { opacity: .25; }
.cta-section .cta-wrap.style1 .title { color: #fff; }
.cta-section .cta-wrap.style1 .gt-btn.style5 {
    background: #fff; color: var(--theme); border-color: #fff;
}
.cta-section .cta-wrap.style1 .gt-btn.style5:hover { background: #f1f0ff; color: var(--theme-hover); }
@media (max-width: 575px) { .cta-section .cta-wrap.style1 { padding: 36px 26px; } }

/* ------------------------------------------------------------------
   13. BREADCRUMB
------------------------------------------------------------------ */
.breadcrumb-wrapper {
    border-bottom: 1px solid rgba(255, 255, 255, .06);
    background-color: #100d24;
}
.breadcrumb-wrapper .page-heading { padding: 104px 0; }
@media (max-width: 991px) { .breadcrumb-wrapper .page-heading { padding: 68px 0; } }
.breadcrumb-wrapper::before,
.breadcrumb-wrapper::after { background: none !important; display: none !important; }
.breadcrumb-wrapper .border-shape { display: none !important; }
.breadcrumb-wrapper .line-shape { opacity: .1; filter: grayscale(1) brightness(1.4); }
.breadcrumb-wrapper .page-heading h1 { color: #fff; margin-bottom: 12px; }
.breadcrumb-items li,
.breadcrumb-items li a { color: #a7a8ca; }
.breadcrumb-items li a:hover { color: #fff; }
.breadcrumb-items li i { color: #6a6b90; }

/* ------------------------------------------------------------------
   14. HEADER
------------------------------------------------------------------ */
#header-sticky.header-1 { padding: 6px 0; }
#header-sticky.header-1.sticky { box-shadow: 0 8px 30px -12px rgba(14, 12, 29, .12); background: #ffffff; }
.header-main .main-menu ul li a { font-weight: 500; color: var(--ink); }
.header-main .main-menu ul li a:hover,
.header-main .main-menu ul li.active a { color: var(--theme); }

/* ------------------------------------------------------------------
   15. CONTACT FORM
------------------------------------------------------------------ */
.contact-form-items .form-clt label {
    display: block; margin-bottom: 8px; font-weight: 600; color: var(--ink);
}
.contact-form-items .form-clt label span { color: var(--theme); }
.contact-form-items .form-clt input,
.contact-form-items .form-clt textarea {
    border: 1px solid var(--border-color);
    background: #fff;
    color: var(--ink);
    border-radius: 10px;
    padding: 15px 18px;
}
.contact-form-items .form-clt textarea { padding-bottom: 15px; min-height: 160px; }
.contact-form-items .form-clt input::placeholder,
.contact-form-items .form-clt textarea::placeholder { color: #9aa1b9 !important; }
.contact-form-items .form-clt input:focus,
.contact-form-items .form-clt textarea:focus {
    border-color: var(--theme);
    box-shadow: 0 0 0 3px rgba(79, 70, 229, .12);
    outline: none;
}
.form-message { margin-top: 14px; }
.form-message.success { color: #167c3d; font-weight: 600; }
.form-message.error { color: #d11a2a; font-weight: 600; }

/* ------------------------------------------------------------------
   16. FOOTER
------------------------------------------------------------------ */
.footer-area .widget-area.style1 { background: #0f0d24; }
.footer-area .copyright-wrap.bg-theme { background: #0b0a1c; }
.footer-area .footer-widget .about-text { color: #a9aac5; }
.footer-area .widget_title { color: #fff; font-weight: 600; }
.footer-area .widget_nav_menu .menu a { color: #a9aac5; }
.footer-area .widget_nav_menu .menu a:hover { color: #fff; }
.footer-area .gt-widget-about .about-logo img { max-height: 32px; width: auto; }
.footer-area a.text-white:hover { color: var(--theme-soft) !important; }

/* ------------------------------------------------------------------
   17. MOBILE NAV  (meanmenu replaced by static off-canvas nav)
------------------------------------------------------------------ */
@media (max-width: 1199px) { .header-1 .header-middle { display: none !important; } }
@media (min-width: 1200px) { .header-1 .header__hamburger { display: none !important; } }
@media (max-width: 480px) { .header-1 .header-right .header-button { display: none; } }

.offcanvas-nav { margin: 0 0 30px; }
.offcanvas-nav ul { list-style: none; margin: 0; padding: 0; }
.offcanvas-nav li { border-bottom: 1px solid rgba(15, 13, 29, .1); }
.offcanvas-nav li:first-child { border-top: 1px solid rgba(15, 13, 29, .1); }
.offcanvas-nav a {
    display: block;
    padding: 14px 4px;
    font-family: "Space Grotesk", "Plus Jakarta Sans", sans-serif;
    font-weight: 600;
    font-size: 17px;
    color: var(--ink);
    transition: color .2s, padding-left .2s;
}
.offcanvas-nav a:hover { color: var(--theme); padding-left: 10px; }
.offcanvas__contact-text a,
.offcanvas__contact ul li a { text-transform: none !important; }