/* Project-specific additions on top of the Bexon theme (main.css). Keep overrides here so the
   theme file can be replaced cleanly. */

/* Font variables the theme reads. In the original Next.js build these come from next/font
   (Mona Sans, loaded here from Google Fonts in index.html) plus a metric-matched Arial fallback. */
@font-face {
  font-family: "Mona Sans Fallback";
  src: local(Arial);
  ascent-override: 104.72%;
  descent-override: 30.74%;
  line-gap-override: 0%;
  size-adjust: 104.08%;
}

:root {
  --tj-ff-body: "Mona Sans", "Mona Sans Fallback";
  --tj-ff-heading: "Mona Sans", "Mona Sans Fallback";
}

/* Services page — service cards reuse the "Choose the Best" card style. */
.tj-services-grid-section .sec-heading,
.tj-courses-section .sec-heading {
  max-width: 550px;
}

.choose-box .service-card-btn {
  margin-top: 24px;
}

/* Courses page — course cards reuse the blog card style. */
.course-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  margin: 14px 0 0;
  padding: 0;
  list-style: none;
  font-size: 15px;
  color: var(--tj-color-text-body);
}

.course-meta li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.course-meta i {
  font-size: 16px;
  color: var(--tj-color-theme-primary);
}

.course-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 22px;
  padding-top: 20px;
  border-top: 1px dashed var(--tj-color-border-1);
}

.blog-item .course-footer .text-btn {
  margin-top: 0;
}

.course-price {
  font-family: var(--tj-ff-heading);
  font-size: 24px;
  font-weight: 600;
  line-height: 1;
  color: var(--tj-color-theme-primary);
}

/* Current page in the mobile menu — teal, like the desktop menu. */
.hamburger_menu .mean-nav ul li.current-menu-ancestor > a {
  color: var(--tj-color-theme-primary);
}

/* Thin close "×" (replaces the Font Awesome Pro "fa-thin fa-times" glyph). */
.hamburger_close_btn {
  vertical-align: top;
}

.hamburger_close_btn .close-icon {
  display: block;
  width: 0.75em; /* same box as the original glyph: 26.25 × 35px */
  height: 1em;
}
/* hero */
.hero{background:radial-gradient(700px 420px at 82% 35%,rgba(255,255,255,.7),transparent),radial-gradient(620px 420px at 8% 8%,rgba(255,255,255,.5),transparent),linear-gradient(180deg,#ece6f8,#f4f0fb);position:relative;display:flex;align-items:center;min-height:440px;overflow:hidden}
.hero-grid{width:min(1140px,92%);display:block;position:relative;z-index:1}
.hero-grid.container{position:static}
.hero h1{font-size:clamp(2.2rem,4.6vw,3.6rem);line-height:1.15;color:var(--navy);margin-bottom:18px}
.grad{font-style:italic;background:linear-gradient(90deg,#3a7be0,#1f4ea3,#16337a);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero p{color:var(--muted);font-size:1.08rem;max-width:520px}
.hero p .brand-name{color:#1f4ea3}
.hero-text{position:relative;z-index:1;max-width:480px;padding:36px 0}
.hero-art{position:absolute;top:0;right:0;bottom:0;width:58%;z-index:0;-webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 16%,#000 84%,transparent 100%);mask-image:linear-gradient(to bottom,transparent 0,#000 16%,#000 84%,transparent 100%)}
.hero-art img{width:100%;height:100%;object-fit:cover;object-position:right center;display:block;-webkit-mask-image:linear-gradient(to right,transparent 0,#000 42%);mask-image:linear-gradient(to right,transparent 0,#000 42%)}

.section-head.reveal {
    text-align: center;
}

.section-head.reveal h2 {
    text-align: center;
    width: 100%;
}

/* Reduce excess empty space in Trusted section */
section:has(.section-head.reveal) {
    padding-top: 55px !important;
    padding-bottom: 55px !important;
    min-height: auto !important;
}

/* Center and style the heading */
.section-head.reveal {
    text-align: center;
    margin-top: 0 !important;
    margin-bottom: 28px !important;
    padding-top: 0 !important;
}

.section-head.reveal h2 {
    text-align: center;
    width: 100%;
    font-size: clamp(30px, 3.5vw, 46px);
    font-weight: 800;
    letter-spacing: -1.2px;
    line-height: 1.2;

    background: linear-gradient(
        90deg,
        #081426,
        #1E4C9E,
        #1F55E5
    );
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;

    margin: 0;
}

/* Mobile spacing */
@media (max-width: 768px) {
    section:has(.section-head.reveal) {
        padding-top: 35px !important;
        padding-bottom: 35px !important;
    }

    .section-head.reveal {
        margin-bottom: 20px !important;
    }
}
/* TRUSTED CLIENTS - FINAL DESIGN FIX */

/* Logo cards */
.clients.is-scrolling .client {
    flex: 0 0 275px !important;
    width: 275px !important;
    height: 104px !important;
    min-height: 104px !important;
    box-sizing: border-box;
    overflow: hidden;
    border-radius: 16px;
    margin-right: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Show complete logos without cropping */
.clients.is-scrolling .client img {
    display: block;
    width: auto !important;
    height: auto !important;
    max-width: 88% !important;
    max-height: 78px !important;
    object-fit: contain !important;
    object-position: center;
}

/* Square logos */
.clients.is-scrolling .client img.logo-square {
    max-width: 82% !important;
    max-height: 82px !important;
    object-fit: contain !important;
}

/* Keep orange and cream backgrounds */
.client.client-orange,
.client.client-cream {
    overflow: hidden;
}

/* Heading style */
.section-head.reveal {
    text-align: center;
    margin: 0 0 28px !important;
    padding: 0 !important;
}

.section-head.reveal h2 {
    color: #081426;
    font-family: "Playfair Display", Georgia, serif !important;
    font-size: clamp(30px, 3.5vw, 46px);
    font-weight: 800;
    line-height: 1.2;
    margin: 0;
}

/* Blue underline */
.section-head.reveal h2::after {
    content: "";
    display: block;
    width: 120px;
    height: 6px;
    margin: 16px auto 0;
    border-radius: 10px;
    background: linear-gradient(90deg, #1F55E5, #081426);
}

/* Mobile */
@media (max-width: 560px) {
    .clients.is-scrolling .client {
        flex: 0 0 160px !important;
        width: 160px !important;
        height: 90px !important;
    }

    .clients.is-scrolling .client img {
        max-height: 68px !important;
    }
}
/* NEW CHANGES START: Dixel client logos look (boxes, orange & cream backgrounds, logos contained) */
.client-slider-1 .client-item{padding-inline-end:12px}
.client-slider-1 .client-logo{width:220px;height:84px;padding:0;border-radius:14px;border:1px solid rgba(31,78,163,.13);overflow:hidden;background:#fff;display:inline-flex;justify-content:center;align-items:center}
.client-slider-1 .client-logo:hover{border-radius:14px;background:#fff;-webkit-backdrop-filter:none;backdrop-filter:none}
.client-slider-1 .client-logo:before,.client-slider-1 .client-logo:after{display:none}
.client-slider-1 .client-logo img{max-height:62px;max-width:88%;width:auto;height:auto;object-fit:contain;opacity:1}
.client-slider-1 .client-logo img.logo-square{max-height:70px}
.client-slider-1 .client-logo img.logo-fill{width:100%;height:100%;max-width:none;max-height:none;object-fit:cover}
.client-slider-1 .client-logo.client-orange{background:linear-gradient(90deg,#f37c19 0,#f37c19 26%,#fd9f2e 74%,#fd9f2e 100%);border-color:transparent}
.client-slider-1 .client-logo.client-orange:hover{background:linear-gradient(90deg,#f37c19 0,#f37c19 26%,#fd9f2e 74%,#fd9f2e 100%)}
.client-slider-1 .client-logo.client-orange img.logo-square{max-height:82px}
.client-slider-1 .client-logo.client-cream{background:#faefdb;border-color:transparent}
.client-slider-1 .client-logo.client-cream:hover{background:#faefdb}
.client-slider-1 .client-logo.client-cream img.logo-square{max-height:74px}
@media(max-width:560px){.client-slider-1 .client-logo{width:160px}}
/* NEW CHANGES END */
.header-search .search {
    display: none !important;
}

:root{
  --dx-blue:#1E4C9E;
  --dx-bright:#1F55E5;
  --dx-navy:#081426;
  --dx-light:#F7F9FC;
  --dx-slate:#5A6475;
  --dx-line:#D5DCE8;
}

/* ===== Header ===== */
.header-area.header-1,
.header-area.header-1 .header-wrapper{ background:#fff !important; }
.header-area .mainmenu > ul > li > a{
  color:var(--dx-navy) !important;
  font-family:Arial,Helvetica,sans-serif; font-weight:500; font-size:18px;
}
.header-area .mainmenu > ul > li.current-menu-ancestor > a{
  color:var(--dx-navy) !important;
  border-bottom:3px solid var(--dx-bright); padding-bottom:6px;
}
.header-area .mainmenu > ul > li > a:hover{ color:var(--dx-bright) !important; }
.dixel-contact-btn{
  background:var(--dx-blue); color:#fff !important;
  font-weight:600; font-size:18px;
  padding:14px 28px; border-radius:40px;
  box-shadow:0 8px 20px rgba(30,76,158,.3);
  transition:.3s;
}
.dixel-contact-btn:hover{ background:var(--dx-bright); }

/* ===== Hero ===== */
.dixel-hero{
  position:relative; overflow:hidden;
  background:var(--dx-light);
  min-height:550px;
  display:flex; align-items:center;
  margin-bottom:0;
}
.dixel-hero-bg{
  position:absolute; inset:0;
  background:url("../../images/hero/hero-img.webp") right center / cover no-repeat;
  -webkit-mask-image:linear-gradient(to right, transparent 25%, #000 60%);
          mask-image:linear-gradient(to right, transparent 25%, #000 60%);
}
.dixel-hero-wrap{ position:relative; z-index:2; padding:70px 0 70px 12%; }
.dixel-hero-content{ max-width:620px; }

.dixel-hero-title{
  font-family:'Playfair Display',serif !important;
  font-weight:800; font-size:72px; line-height:1.15;
  color:var(--dx-navy) !important; margin:0 0 30px;
}
.dixel-hero-title em{ font-style:italic; color:var(--dx-bright); }

.dixel-hero-desc{
  font-family:'Poppins',Arial,sans-serif !important;
  font-size:20px; line-height:1.85;
  color:var(--dx-slate) !important; margin:0;
}
.dixel-hero-desc span{ color:var(--dx-blue); }

/* ===== Services section ===== */
.tj-smart-service-section{
  padding-top:100px !important;
  background:#fff !important;
}
.tj-smart-service-section .dixel-sec-head{ margin-bottom:60px; }
.tj-smart-service-section .dixel-sec-title{
  font-family:'Playfair Display',serif !important;
  font-weight:800 !important;
  font-size:48px !important;
  line-height:1.2 !important;
  color:var(--dx-navy) !important;
  white-space:nowrap;
  max-width:none !important;
  margin-bottom:18px;
}
.tj-smart-service-section .dixel-sec-title span{ color:var(--dx-blue) !important; }
.dixel-sec-line{
  display:block; width:120px; height:6px; border-radius:6px;
  background:var(--dx-blue); margin:0 auto 22px;
}
.dixel-sec-sub{
  font-family:'Poppins',Arial,sans-serif;
  font-size:20px; color:var(--dx-slate); margin:0;
}

/* ===== Responsive ===== */
@media (max-width:991px){
  .dixel-hero-wrap{ padding:60px 20px; }
  .dixel-hero-title{ font-size:44px; }
  .dixel-hero-desc{ font-size:17px; }
  .dixel-hero-bg{
    opacity:.35;
    -webkit-mask-image:none; mask-image:none;
  }
  .tj-smart-service-section{ padding-top:70px !important; }
  .tj-smart-service-section .dixel-sec-title{
    white-space:normal;
    font-size:30px !important;
  }

}

/* ===== Heading: blue part ===== */
.tj-smart-service-section .dixel-sec-title span{
  color:var(--dx-blue) !important;
}

/* ===== Service cards ===== */
.tj-smart-service-section .smart-service-list{
  display:flex;
  flex-direction:column;
  gap:24px;
}
.tj-smart-service-section .smart-service-item{
  background:#fff !important;
  border:1px solid var(--dx-line) !important;
  border-radius:16px !important;
  padding:0 !important;
  box-shadow:0 4px 18px rgba(8,20,38,.04);
  transition:.3s;
}
.tj-smart-service-section .smart-service-item:hover{
  border-color:var(--dx-bright) !important;
  box-shadow:0 10px 28px rgba(31,85,229,.12);
}
.tj-smart-service-section .smart-service-inner{
  padding:36px 40px !important;
}
.tj-smart-service-section .smart-service-title a{
  color:var(--dx-navy);
}
.tj-smart-service-section .smart-service-item:hover .smart-service-title a{
  color:var(--dx-blue);
}
.tj-smart-service-section .smart-service-tags a{
  border:1px solid var(--dx-line);
  background:var(--dx-light);
  color:var(--dx-slate);
}
.tj-smart-service-section .smart-service-desc{
  color:var(--dx-slate);
}

@media (max-width:991px){
  .tj-smart-service-section .smart-service-inner{
    padding:24px 20px !important;
  }
}
/* ===== Header (final size) ===== */
.header-area .header-wrapper{
  min-height:88px !important;
  display:flex !important;
  align-items:center !important;
}
.header-area .site_logo img,
.header-area .logo img{
  width:140px !important;
  height:auto !important;
}

/* Nav: all items on one line, vertically centered */
.header-area .mainmenu > ul{
  display:flex !important;
  align-items:center !important;
  gap:32px !important;
  margin:0 !important;
}
.header-area .mainmenu > ul > li{
  display:flex !important;
  align-items:center !important;
  margin:0 !important;
  padding:0 !important;
  height:auto !important;
}
.header-area .mainmenu > ul > li > a{
  display:inline-flex !important;
  align-items:center !important;
  font-size:17px !important;
  line-height:1.4 !important;
  padding:4px 0 !important;
  margin:0 !important;
  top:0 !important;
  transform:none !important;
  border-bottom:3px solid transparent;
}
.header-area .mainmenu > ul > li.current-menu-ancestor > a{
  border-bottom:3px solid var(--dx-bright) !important;
}

/* Let's Talk: Logo Blue */
.header-area .header-button .tj-primary-btn{
  background:var(--dx-blue) !important;
  border-color:var(--dx-blue) !important;
  padding:10px 12px 10px 24px !important;
  box-shadow:0 8px 20px rgba(30,76,158,.3);
}
.header-area .header-button .tj-primary-btn .btn-text,
.header-area .header-button .tj-primary-btn .btn-text span{
  color:#fff !important;
  font-size:17px !important;
}
.header-area .header-button .tj-primary-btn:hover{
  background:var(--dx-bright) !important;
}
/* ===== Service icons + hover (Logo Blue, no teal) ===== */

/* Icon circle: normal */
.tj-smart-service-section .smart-service-icon{
  display:flex;
  align-items:center;
  justify-content:center;
  background:var(--dx-light) !important;
  border:1px solid var(--dx-line);
  color:var(--dx-blue);
  transition:.3s;
}
.tj-smart-service-section .smart-service-icon svg{
  width:34px;
  height:34px;
  stroke:currentColor;
}

/* Icon circle: hover */
.tj-smart-service-section .smart-service-item:hover .smart-service-icon,
.tj-smart-service-section .smart-service-item:focus-within .smart-service-icon{
  background:var(--dx-blue) !important;
  background-color:var(--dx-blue) !important;
  border-color:var(--dx-blue) !important;
  color:#fff !important;
}
.tj-smart-service-section .smart-service-item:hover .smart-service-icon svg,
.tj-smart-service-section .smart-service-item:hover .smart-service-icon i{
  color:#fff !important;
  stroke:#fff !important;
}

/* Arrow: hover Bright Blue */
.tj-smart-service-section .smart-service-item:hover .smart-service-arrow,
.tj-smart-service-section .smart-service-item:hover .smart-service-arrow i,
.tj-smart-service-section .smart-service-item:hover .smart-service-arrow i::before,
.tj-smart-service-section .smart-service-arrow:hover,
.tj-smart-service-section .smart-service-arrow:hover i{
  color:var(--dx-bright) !important;
  border-color:var(--dx-bright) !important;
}
.tj-smart-service-section .smart-service-item:hover .smart-service-arrow svg,
.tj-smart-service-section .smart-service-item:hover .smart-service-arrow svg path{
  stroke:var(--dx-bright) !important;
  fill:var(--dx-bright) !important;
}

/* Title: hover Logo Blue */
.tj-smart-service-section .smart-service-item:hover .smart-service-title a{
  color:var(--dx-blue) !important;
}
/* ==========================================================================
   NEW CHANGES START: BLUE BRAND THEME (Dixel brand colour guide, lighter)
   Logo Blue #1E4C9E | Light Blue #3B6FE0 | Deep Navy #081426
   Light Background #F7F9FC | Slate Grey #5A6475 | Line Grey #D5DCE8
   ========================================================================== */
:root{
  --tj-color-theme-primary:#3b6fe0;
  --tj-color-heading-primary:#081426;
  --tj-color-theme-dark:#081426;
  --tj-color-theme-dark-2:#0f1d33;
  --tj-color-theme-dark-3:#3a465c;
  --tj-color-theme-dark-4:#6b7688;
  --tj-color-theme-bg:#e9eff9;
  --tj-color-theme-bg-2:#e1e9f6;
  --tj-color-theme-bg-3:#0e1e38;
  --tj-color-grey-1:#f7f9fc;
  --tj-color-grey-2:#a9b5c8;
  --tj-color-text-body:#5a6475;
  --tj-color-text-body-2:#a9b5c8;
  --tj-color-text-body-3:#5a6475;
  --tj-color-text-body-4:#0f1d33;
  --tj-color-border-1:#d5dce8;
  --tj-color-border-2:#26334a;
  --tj-color-border-5:#3b6fe026;
  --navy:#081426;
  --muted:#5a6475;
}
body{background-color:#f7f9fc}

/* hard-coded teal / dark-teal colours inside main.css, re-coloured to the blue palette */
.header-bottom{border-bottom:1px dashed #d5dce8}
.mainmenu ul>li>.mega-menu-service-single .mega-menu-service-icon,.mobile_menu ul>li>.mega-menu-service-single .mega-menu-service-icon{background:linear-gradient(-45deg,#3b6fe04d 0%,#3b6fe000 50%,#3b6fe04d 100%)}
.social-links ul li a{background-color:#0814264d}
.search-popup-overlay{background-color:#08142603}
.client-content .client-text:after{border-bottom:1px solid #08142633}
.client-slider-1:before,.client-slider-1:after{background-image:linear-gradient(90deg,#f7f9fc 0%,#f7f9fc00 100%)}
.client-slider-1:after{background-image:linear-gradient(-90deg,#f7f9fc 0%,#f7f9fc00 100%)}
.about-img-area.style-2 .box-area:after,.about-img-area.style-2 .box-area:before{background:url("data:image/svg+xml,<svg viewBox=\"0 0 11 11\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" class=\"w-11 h-11\"><path d=\"M11 1.54972e-06L0 0L2.38419e-07 11C1.65973e-07 4.92487 4.92487 1.62217e-06 11 1.54972e-06Z\" fill=\"%23e9eff9\"></path></svg>")}
.box-area:after,.box-area:before{background:url("data:image/svg+xml,<svg viewBox=\"0 0 11 11\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" class=\"w-11 h-11\"><path d=\"M11 1.54972e-06L0 0L2.38419e-07 11C1.65973e-07 4.92487 4.92487 1.62217e-06 11 1.54972e-06Z\" fill=\"%23f7f9fc\"></path></svg>")}
.service-item .service-icon{background:linear-gradient(-45deg,#3b6fe04d 0%,#3b6fe000 50%,#3b6fe04d 100%);border:1px solid #3b6fe026}
.testimonial-wrapper-2 .slider-prev{background-color:#f7f9fc}
.testimonial-wrapper-2 .slider-next{background-color:#f7f9fc}
.blog-item.style-3 .blog-thumb:before{background:linear-gradient(#08142600 0%,#081426 100%)}
.tj-slider-item{background-color:#081426}
.tj-slider-item:after{background:linear-gradient(90deg,#081426 20%,#08142666 60%,#0814261a 100%)}
.gallery:before{background-color:#08142666}
.h4-banner-section .banner-img-area .banner-img:before{background:linear-gradient(90deg,#081426 0%,#08142666 50%,#08142600 100%)}
.h5-banner-section .banner-bg:before{background:linear-gradient(-109deg,#081426f2 20%,#08142633 40%,#081426f2 70%)}
.h5-client-item .client-logo:after{background:#3b6fe099}
.h5-client-item .client-logo:hover{background:#3b6fe0b3}
.h5-working-process-item .process-step{background-image:linear-gradient(180deg, var(--tj-color-theme-primary) 0%, #3b6fe000 116.09%)}
.h6-project-item-inner:after{background:#08142680}
.h6-testimonial-wrapper .swiper{-webkit-mask-image:linear-gradient(#081426 79%,#08142600 95%);mask-image:linear-gradient(#081426 79%,#08142600 95%)}
@media only screen and (min-width:768px) and (max-width:991px),only screen and (min-width:576px) and (max-width:767px){.h6-testimonial-wrapper .swiper{-webkit-mask-image:linear-gradient(-90deg,#08142600 0%,#081426 20%);mask-image:linear-gradient(-90deg,#08142600 0%,#081426 20%)}}
.h7-hero-item{background-color:#081426}
.h7-hero-item:after{background:linear-gradient(90deg,#081426 20%,#08142666 60%,#0814261a 100%)}
.h7-hero-content .h7-hero-title span:has(img) img{background:linear-gradient(135deg,#3b6fe04d 0%,#3b6fe000 50%,#3b6fe04d 100%)}
.header-area.h8-header.header-absolute .h8-header-mainmenu-bg-shape:after,.header-area.h8-header.header-absolute .h8-header-mainmenu-bg-shape:before{background:url("data:image/svg+xml,<svg viewBox=\"0 0 11 11\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" class=\"w-11 h-11\"><path d=\"M11 1.54972e-06L0 0L2.38419e-07 11C1.65973e-07 4.92487 4.92487 1.62217e-06 11 1.54972e-06Z\" fill=\"%23f7f9fc\"></path></svg>")}
.header-area.h8-header.header-absolute:after,.header-area.h8-header.header-absolute:before{background:url("data:image/svg+xml,<svg viewBox=\"0 0 11 11\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" class=\"w-11 h-11\"><path d=\"M11 1.54972e-06L0 0L2.38419e-07 11C1.65973e-07 4.92487 4.92487 1.62217e-06 11 1.54972e-06Z\" fill=\"%23f7f9fc\"></path></svg>")}
.h8-hero-item{background-color:#081426}
.h8-hero-item:after{background:linear-gradient(90deg,#081426 20%,#08142666 60%,#0814261a 100%)}
.h8-hero-content .h8-hero-title span:has(img) img{background:linear-gradient(135deg,#3b6fe04d 0%,#3b6fe000 50%,#3b6fe04d 100%)}
.tj-footer-section.h9-footer .h9-footer-copyright{border-color:#26334a4d}
.h9-hero-item{background-color:#081426}
.h9-hero-item:after{background:linear-gradient(90deg,#081426 20%,#08142666 60%,#0814261a 100%)}
.h9-about-funfact{border-top:1px dashed #08142633;border-bottom:1px dashed #08142633}
.h9-about-funfact .countup-item:not(:first-child):after{border-inline-end:1px dashed #08142633}
@media (max-width:575px){.h9-about-funfact .countup-item:not(:first-child):after{border-top:1px dashed #08142633}}
.h9-project-slider{-webkit-mask-image:linear-gradient(90deg, #08142600 0%, var(--tj-color-theme-dark) 20%, var(--tj-color-theme-dark) 80%, #08142600 100%);mask-image:linear-gradient(90deg, #08142600 0%, var(--tj-color-theme-dark) 20%, var(--tj-color-theme-dark) 80%, #08142600 100%)}
.h9-blog-wrapper .blog-item:first-child.h5-blog-item .blog-thumb:before{background:linear-gradient(180deg, #08142600 0%, var(--tj-color-theme-dark) 100%)}
.h10-service-wrapper .service-item.style-4 .h10-service-sln:before,.h10-service-wrapper .service-item.style-4 .h10-service-sln:after{background:url("data:image/svg+xml,<svg viewBox=\"0 0 11 11\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" class=\"w-11 h-11\"><path d=\"M11 1.54972e-06L0 0L2.38419e-07 11C1.65973e-07 4.92487 4.92487 1.62217e-06 11 1.54972e-06Z\" fill=\"%23f7f9fc\"></path></svg>")}
.h10-process-wrapper .h10-process-sln:before,.h10-process-wrapper .h10-process-sln:after{background:url("data:image/svg+xml,<svg viewBox=\"0 0 11 11\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" class=\"w-11 h-11\"><path d=\"M11 1.54972e-06L0 0L2.38419e-07 11C1.65973e-07 4.92487 4.92487 1.62217e-06 11 1.54972e-06Z\" fill=\"%23081426\"></path></svg>")}

/* teal photos / overlays -> blue (lighter) */
.cta-img img,
.page-header-overlay{filter:hue-rotate(43deg) saturate(.9) brightness(1.08)}

/* ---- CTA banner: lighter blue ---- */
.tj-cta-section .cta-area{
  background:linear-gradient(135deg,#3b6fe0 0%,#5b8bea 100%) !important;
}
.tj-cta-section .tj-primary-btn.btn-dark{
  background:#1e4c9e !important;
  border-color:#1e4c9e !important;
}
.tj-cta-section .tj-primary-btn.btn-dark:hover{
  background:#081426 !important;
}

/* ---- Less empty space between "Services" and "Trusted by growing businesses" ---- */
.tj-smart-service-section.section-gap{padding-bottom:20px !important}
section.tj-client-section:has(.section-head.reveal){padding-top:10px !important;padding-bottom:40px !important}
.tj-client-section.client-section-gap{padding-top:10px !important;padding-bottom:40px !important}
/* NEW CHANGES END */

/* ===== Contact page: 4 cards same height ===== */
.tj-contact-area .row{
  align-items:stretch;
}
.tj-contact-area .row > [class*="col-"]{
  display:flex;
}
.tj-contact-area .contact-item.style-2{
  width:100%;
  height:100%;
}
/* NEW CHANGES START: bigger service titles/icons/arrows, more space before "Trusted", bigger client logo cards */
@media (min-width:992px){
  body .smart-service-icon{width:72px;height:72px;font-size:40px}
  body .smart-service-content{gap:20px}
  body .smart-service-title{font-size:28px;max-width:none;margin-top:0}
  body .smart-service-arrow{width:56px;height:56px;font-size:60px}
}
@media (max-width:991px){
  body .smart-service-icon{width:64px;height:64px;font-size:36px}
  body .smart-service-arrow{width:44px;height:44px;font-size:44px}
}
@media (max-width:767px){
  body .smart-service-title{font-size:22px}
}
/* space between Services and Trusted sections */
body .tj-smart-service-section.section-gap{padding-bottom:70px !important}
body section.tj-client-section:has(.section-head.reveal),
body .tj-client-section.client-section-gap{padding-top:50px !important;padding-bottom:50px !important}
/* client logo cards */
body .client-slider-1 .client-item{padding-inline-end:16px}
body .client-slider-1 .client-logo{width:280px !important;height:112px !important}
body .client-slider-1 .client-logo img{max-height:80px !important}
body .client-slider-1 .client-logo img.logo-square{max-height:92px !important}
body .client-slider-1 .client-logo.client-orange img,
body .client-slider-1 .client-logo.client-orange img.logo-square{max-height:104px !important}
body .client-slider-1 .client-logo.client-cream img,
body .client-slider-1 .client-logo.client-cream img.logo-square{max-height:96px !important}
body .client-slider-1 .client-logo img.logo-fill{max-height:none !important}
@media(max-width:560px){body .client-slider-1 .client-logo{width:210px !important;height:90px !important}}
/* NEW CHANGES END */
/* NEW CHANGES START: "Let's Build Future" card - one single light blue, no seam (all pages) + more space above it */
body .cta-area{background-color:#3d73ea !important}
body .cta-img img{filter:none !important}
body .tj-client-section.client-section-gap,
body section.tj-client-section:has(.section-head.reveal){padding-bottom:100px !important}
/* NEW CHANGES END */
/* NEW CHANGES START: Wealthido box - white background (no orange) */
body .client-slider-1 .client-logo.client-orange,
body .client-slider-1 .client-logo.client-orange:hover{
  background:#fff !important;
  border:1px solid rgba(31,78,163,.13) !important;
}
body .client-slider-1 .client-logo.client-orange img,
body .client-slider-1 .client-logo.client-orange img.logo-square{
  max-height:80px !important;
  max-width:88% !important;
}
/* NEW CHANGES END */
/* Services caret: always sits beside the text, never below it */
.mainmenu>ul>li.has-dropdown>a{display:inline-flex!important;align-items:center!important;gap:6px!important;padding-inline-end:0!important}
.mainmenu>ul>li.has-dropdown>a:after{position:static!important;top:auto!important;inset-inline-end:auto!important;line-height:1}
.mega-menu-service-icon svg{width:28px;height:28px}
.smart-service-icon svg{width:32px;height:32px}
.choose-icon svg{width:30px;height:30px}
.mega-menu-service-icon svg,.smart-service-icon svg,.choose-icon svg{fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.smart-service-icon svg{stroke:var(--tj-color-theme-primary)}
.smart-service-item:hover .smart-service-icon svg{stroke:#fff}
/* Contact page: 3 cards fill the full row, equal width */
@media (min-width:992px){
  .tj-contact-area .row:has(.contact-item.style-2) > [class*="col-"]{
    flex:1 1 0;
    width:auto;
    max-width:none;
  }
}
/* NEW CHANGES START: service pages - content full width, below it: More Services (left) + Have a project in mind (right) */
@media (min-width: 992px){
  .dx-sd-section .row > .col-lg-8{flex:0 0 100%;max-width:100%;margin:0}
  .dx-sd-section .row > .col-lg-4{flex:0 0 100%;max-width:100%;margin:50px 0 0}
  .dx-sd-section .dx-sd-text{max-width:none}

  /* two cards side by side, same height */
  .dx-sd-section .dx-sd-sidebar{position:static!important;display:grid;grid-template-columns:1fr 1fr;gap:30px;align-items:stretch}
  .dx-sd-section .dx-sd-sidebar > *{margin:0!important;height:100%}

  /* project card: text stacked on the left inside the right card */
  .dx-sd-section .dx-sd-contact{display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:14px;text-align:left}
  .dx-sd-section .dx-sd-contact h4,
  .dx-sd-section .dx-sd-contact p{margin:0}
}
/* NEW CHANGES END */

/* ===== COURSES SECTION DESIGN ===== */

#courses .cards.two {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 22px;
}

#courses .course-card {
    background: #ffffff;
    border: 1px solid #e0e5f2;
    border-radius: 24px;
    padding: 36px 34px;
    box-shadow: 0 12px 35px rgba(40, 50, 100, 0.06);
}

#courses .course-card .icon {
    width: 70px;
    height: 70px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 20px;
    background: linear-gradient(135deg, #397ff5, #6942b5);
    color: #ffffff;
    margin-bottom: 28px;
    box-shadow: 0 12px 25px rgba(55, 110, 220, 0.22);
}

#courses .course-card .icon svg {
    width: 34px;
    height: 34px;
    stroke: currentColor;
    fill: none;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

#courses .course-card h3 {
    font-size: 24px;
    color: #101b42;
    margin-bottom: 16px;
}

#courses .course-card p {
    font-size: 18px;
    line-height: 1.8;
    color: #52617e;
}

#courses .check-list {
    list-style: none;
    padding: 0;
    margin: 22px 0;
}

#courses .check-list li {
    position: relative;
    padding-left: 42px;
    margin-bottom: 14px;
    font-size: 17px;
    color: #17264b;
}

#courses .check-list li::before {
    content: "✓";
    position: absolute;
    left: 0;
    top: 0;
    width: 27px;
    height: 27px;
    border-radius: 50%;
    background: linear-gradient(135deg, #397ff5, #17428e);
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
}

#courses .course-card .more {
    display: inline-block;
    color: #1754b5;
    font-weight: 700;
    margin-top: 10px;
}

/* MOBILE RESPONSIVE */
@media (max-width: 767px) {
    #courses .cards.two {
        grid-template-columns: 1fr;
    }

    #courses .course-card {
        padding: 25px 22px;
    }
}

/* ===== END COURSES DESIGN ===== */

/* CONTACT FORM REQUIRED STAR */

.tj-contact-section-2 .required-star {
    color: #ff0000 !important;
    font-size: 18px;
    font-weight: 700;
    margin-left: 4px;
}

.tj-contact-section-2 .form-input label {
    display: block;
    margin-bottom: 8px;
}

/* CONTACT MAP */

.tj-contact-section-2 .map-area iframe {
    width: 100%;
    min-height: 450px;
    border: 0;
    border-radius: 15px;
}

/* END CONTACT CHANGES */
/* Move hero arrow and description slightly down */
@media (min-width: 992px) {
    .tj-banner-section .banner-desc-area {
        transform: translateY(40px);
    }
}
/* SIDEBAR CONTACT INFO */
.hamburger-infos .contact-item{display:flex;align-items:flex-start;gap:14px;margin-bottom:22px}
.hamburger-infos .contact-icon{width:38px;height:38px;min-width:38px;border-radius:50%;background:#3978ed;color:#fff;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.hamburger-infos .contact-icon i{color:#fff;font-size:22px}
.hamburger-infos .contact-details{display:flex;flex-direction:column;gap:5px}
.hamburger-infos .contact-item .subtitle{display:block;margin:0}
.hamburger-infos .contact-link{line-height:1.6}

/* SMART SERVICES - MOBILE VIEW */
@media (max-width: 767px) {

    .smart-service-item .smart-service-desc-wrap {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: center;
        column-gap: 12px;
        row-gap: 12px;
    }

    .smart-service-item .smart-service-desc {
        grid-column: 1 / -1;
        margin-bottom: 5px !important;
    }

    .smart-service-item .smart-service-tags {
        grid-column: 1;
        display: flex;
        flex-wrap: wrap;
        gap: 7px;
        margin: 0 !important;
    }

    .smart-service-item .smart-service-arrow.d-lg-none {
        grid-column: 2;
        grid-row: 2;
        display: flex !important;
        position: static !important;
        align-items: center;
        justify-content: center;
        margin: 0 !important;
        padding: 0 !important;
        justify-self: end;
        align-self: center;
    }

}

/* ==============================
   DIXEL ABOUT US PAGE
============================== */

.dixel-about-hero {
  padding: 110px 0 90px;
  background: #f3f7ff;
}

.dixel-about-label,
.dixel-section-heading > span {
  display: inline-block;
  color: #3978ed;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 1.5px;
  margin-bottom: 15px;
}

.dixel-about-hero h1 {
  font-size: clamp(36px, 5vw, 58px);
  line-height: 1.15;
  font-weight: 700;
  color: #101c31;
  margin-bottom: 22px;
}

.dixel-about-hero h1 span,
.dixel-section-heading h2 span,
.dixel-story-section h2 span,
.dixel-usp-section h2 span {
  color: #3978ed;
}

.dixel-about-hero p {
  color: #667085;
  font-size: 17px;
  line-height: 1.8;
  max-width: 520px;
  margin-bottom: 28px;
}

.dixel-about-btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 15px 25px;
  border-radius: 6px;
  background: #3978ed;
  color: #fff !important;
  font-weight: 600;
  text-decoration: none;
}

.dixel-hero-image img,
.dixel-story-image img {
  width: 100%;
  height: 430px;
  object-fit: cover;
  border-radius: 16px;
}

.dixel-team-section,
.dixel-story-section,
.dixel-vision-section,
.dixel-usp-section,
.dixel-proof-section {
  padding: 90px 0;
}

.dixel-section-heading {
  max-width: 700px;
  margin: 0 auto 45px;
  text-align: center;
}

.dixel-section-heading h2,
.dixel-story-section h2,
.dixel-usp-section h2 {
  color: #101c31;
  font-size: clamp(28px, 4vw, 42px);
  font-weight: 700;
  line-height: 1.2;
  margin-bottom: 18px;
}

.dixel-section-heading p,
.dixel-story-section p {
  color: #667085;
  font-size: 16px;
  line-height: 1.8;
}

.dixel-team-card {
  text-align: center;
  padding: 15px;
  border: 1px solid #e1e7f0;
  border-radius: 14px;
  background: #fff;
  height: 100%;
}

.dixel-team-card img {
  width: 100%;
  height: 300px;
  object-fit: cover;
  border-radius: 10px;
  margin-bottom: 20px;
}

.dixel-team-card h4 {
  color: #101c31;
  font-size: 20px;
  font-weight: 700;
}

.dixel-team-card p {
  color: #667085;
}

.dixel-story-section {
  background: #f3f7ff;
}

.dixel-vision-section {
  background: #fff;
}

.dixel-vision-card {
  height: 100%;
  padding: 35px 25px;
  text-align: center;
  border: 1px solid #e1e7f0;
  border-radius: 12px;
  background: #fff;
}

.dixel-vision-card i {
  font-size: 35px;
  color: #3978ed;
  margin-bottom: 20px;
  display: inline-block;
}

.dixel-vision-card h4,
.dixel-usp-card h4 {
  color: #101c31;
  font-size: 19px;
  font-weight: 700;
  margin-bottom: 12px;
}

.dixel-vision-card p,
.dixel-usp-card p {
  color: #667085;
  font-size: 15px;
  line-height: 1.7;
  margin-bottom: 0;
}

.dixel-usp-section {
  background: #f3f7ff;
}

.dixel-usp-card {
  height: 100%;
  padding: 25px;
  border-radius: 10px;
  background: #fff;
  border: 1px solid #e1e7f0;
}

.dixel-why-card {
  height: 100%;
  padding: 35px 28px;
  border-radius: 12px;
  background: #1553a5;
  color: #fff;
}

.dixel-why-card h3 {
  color: #fff;
  font-size: 25px;
  margin-bottom: 25px;
}

.dixel-why-card ul {
  padding-left: 20px;
  margin: 0;
}

.dixel-why-card li {
  margin-bottom: 15px;
  line-height: 1.5;
}

.dixel-proof-card {
  padding: 25px 10px;
  border: 1px solid #e1e7f0;
  border-radius: 12px;
  background: #fff;
}

.dixel-proof-card h3 {
  color: #3978ed;
  font-size: 34px;
  font-weight: 700;
}

.dixel-proof-card p {
  color: #667085;
  margin: 0;
}

.dixel-about-cta {
  padding: 85px 20px;
  background: #1553a5;
  color: #fff;
}

.dixel-about-cta > .container > span {
  font-size: 13px;
  letter-spacing: 1.5px;
  font-weight: 600;
}

.dixel-about-cta h2 {
  color: #fff;
  font-size: clamp(30px, 4vw, 44px);
  font-weight: 700;
  margin: 18px 0;
}

.dixel-about-cta p {
  color: #e3edff;
  margin-bottom: 25px;
}

/* MOBILE RESPONSIVE */
@media (max-width: 767px) {
  .dixel-about-hero {
    padding: 65px 0 50px;
  }

  .dixel-about-hero h1 {
    font-size: 36px;
  }

  .dixel-about-hero p {
    font-size: 15px;
  }

  .dixel-hero-image img,
  .dixel-story-image img {
    height: 270px;
    margin-top: 30px;
  }

  .dixel-team-section,
  .dixel-story-section,
  .dixel-vision-section,
  .dixel-usp-section,
  .dixel-proof-section {
    padding: 60px 0;
  }

  .dixel-section-heading {
    margin-bottom: 30px;
  }

  .dixel-team-card img {
    height: 240px;
  }

  .dixel-vision-card {
    padding: 28px 20px;
  }

  .dixel-proof-card h3 {
    font-size: 27px;
  }

  .dixel-about-cta {
    padding: 60px 15px;
  }
}
/* NEW CHANGES START: CTA card like the design - blue gradient panel, photo with a diagonal edge */
body .cta-area{background:linear-gradient(115deg,#2f6df0 0%,#1f55e5 42%,#1a43b8 100%) !important;position:relative;overflow:hidden}
body .cta-area .cta-content .title{font-size:clamp(30px,3.6vw,58px);line-height:1.12}
body .cta-area .cta-content .title span{font-style:italic;color:#5ea2ff}
body .cta-area .cta-content .cta-desc{color:rgba(255,255,255,.82);margin:20px 0 0;max-width:540px;font-size:20px;line-height:1.5}
body .cta-area .cta-content .cta-btn{margin-top:34px}
@media (min-width:992px){
  body .cta-img img{-webkit-clip-path:polygon(18% 0,100% 0,100% 100%,0 100%);clip-path:polygon(18% 0,100% 0,100% 100%,0 100%)}
}
/* NEW CHANGES END */
/* Service Details Image - Show Full Image Without Cropping */
.dx-sd-main-img {
    width: 100%;
    height: auto !important;
    overflow: visible;
    border-radius: 20px;
}

.dx-sd-main-img img {
    display: block;
    width: 100%;
    height: auto !important;
    max-height: none !important;
    object-fit: contain !important;
    object-position: center;
    border-radius: 20px;
}

/* COURSES - ICON AND HEADING IN SAME LINE */
.course-card .icon {
    display: inline-flex;
    vertical-align: middle;
    margin: 0 15px 0 0;
}

.course-card h3 {
    display: inline-block;
    vertical-align: middle;
    margin: 0;
}

/* Description starts below the heading */
.course-card > p {
    margin-top: 25px;
}

/* Keep course cards in two columns */
.cards.two {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 25px;
}

@media (max-width: 767px) {
    .cards.two {
        grid-template-columns: 1fr;
    }
}
/* ===== COURSE SECTION HEADING ===== */

.course-section-head {
    text-align: center;
    margin-bottom: 45px;
}

.course-heading-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 18px;
    margin-bottom: 12px;
}

.course-heading-logo img {
    width: 75px;
    height: 75px;
    object-fit: contain;
    display: block;
}

.course-heading-row h2 {
    margin: 0;
    font-size: 42px;
    font-weight: 700;
    color: #214b91;
}

.course-section-head p {
    margin: 0;
    color: #68758c;
    font-size: 18px;
}


/* ===== COURSE CARDS: 2 PER ROW ===== */

#courses .cards.two {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 28px;
}

#courses .course-card {
    width: 100%;
    height: 100%;
    padding: 40px;
    background: #ffffff;
    border: 1px solid #e1e8f5;
    border-radius: 22px;
    box-shadow: 0 8px 30px rgba(30, 70, 130, 0.05);
    transition: all 0.35s ease;
}

/* Light hover effect */

#courses .course-card:hover {
    transform: translateY(-8px);
    border-color: #4778ed;
    box-shadow: 0 15px 40px rgba(55, 105, 220, 0.16);
}

/* Course icon */

#courses .course-card .icon {
    transition: transform 0.35s ease;
}

#courses .course-card:hover .icon {
    transform: scale(1.08);
}

/* Course heading hover */

#courses .course-card h3 {
    transition: color 0.3s ease;
}

#courses .course-card:hover h3 {
    color: #376ee5;
}

/* Enquire button hover */

#courses .course-card .more {
    transition: color 0.3s ease;
}

#courses .course-card .more:hover {
    color: #376ee5;
}


/* ===== MOBILE RESPONSIVE ===== */

@media (max-width: 767px) {

    #courses .cards.two {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    #courses .course-card {
        padding: 25px;
    }

    .course-heading-row {
        gap: 10px;
    }

    .course-heading-logo img {
        width: 55px;
        height: 55px;
    }

    .course-heading-row h2 {
        font-size: 27px;
    }

    .course-section-head p {
        font-size: 15px;
    }
}
/* Course card icon and title in one line */

#courses .course-card-heading {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 25px;
}

#courses .course-card-heading .icon {
    flex: 0 0 95px;
    width: 95px;
    height: 95px;
    margin: 0 !important;
    display: flex;
    align-items: center;
    justify-content: center;
}

#courses .course-card-heading h3 {
    margin: 0 !important;
    flex: 1;
}

/* Description starts below the icon and heading */

#courses .course-card > p {
    margin-top: 0;
}

/* Mobile adjustment */

@media (max-width: 767px) {
    #courses .course-card-heading {
        gap: 14px;
    }

    #courses .course-card-heading .icon {
        flex-basis: 65px;
        width: 65px;
        height: 65px;
    }

    #courses .course-card-heading h3 {
        font-size: 20px;
    }
}
#courses .course-card-heading .icon {
    flex: 0 0 65px;
    width: 65px;
    height: 65px;
    margin: 0 !important;
    display: flex;
    align-items: center;
    justify-content: center;
}

#courses .course-card-heading .icon svg {
    width: 28px;
    height: 28px;
}
/* ABOUT US HERO SECTION */
.about-hero-section {
    width: 100%;
    min-height: 526px;
    padding: 70px 0;
    background: #f5f8ff;
    display: flex;
    align-items: center;
    overflow: hidden;
}

.about-hero-content {
    padding: 30px 35px 30px 0;
}

.about-subtitle {
    display: inline-block;
    color: #3978ed;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 2px;
    margin-bottom: 18px;
}

.about-hero-content h1 {
    font-size: 48px;
    line-height: 1.2;
    font-weight: 700;
    color: #17233f;
    margin-bottom: 22px;
}

.about-hero-content h1 span {
    display: block;
    color: #3978ed;
}

.about-hero-content p {
    font-size: 17px;
    line-height: 1.8;
    color: #64718a;
    margin-bottom: 30px;
}

.about-hero-btn {
    display: inline-flex;
    align-items: center;
    gap: 15px;
    padding: 14px 25px;
    background: #3978ed;
    color: #fff;
    border-radius: 6px;
    font-weight: 600;
    text-decoration: none;
    transition: 0.3s ease;
}

.about-hero-btn:hover {
    background: #17233f;
    color: #fff;
}

.about-hero-image {
    width: 100%;
    height: 400px;
    border-radius: 18px;
    overflow: hidden;
}

.about-hero-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: 18px;
}

/* MOBILE RESPONSIVE */
@media (max-width: 991px) {
    .about-hero-section {
        padding: 55px 0;
    }

    .about-hero-content {
        padding: 0 0 35px;
    }

    .about-hero-content h1 {
        font-size: 38px;
    }

    .about-hero-image {
        height: 320px;
    }
}

@media (max-width: 576px) {
    .about-hero-content h1 {
        font-size: 32px;
    }

    .about-hero-image {
        height: 250px;
    }
}

/* ABOUT PAGE - COMPACT SPACING */
.dixel-about-intro,
.dixel-mission-section,
.dixel-why-section,
.dixel-process-section {
    padding: 48px 0 !important;
}

.dixel-about-intro h2,
.dixel-section-heading h2 {
    font-size: 34px;
    font-weight: 700;
    line-height: 1.25;
    margin-bottom: 16px;
    color: #17233f;
}

.dixel-about-intro h2 span {
    color: #3978ed;
}

.dixel-about-intro p,
.dixel-info-card p {
    color: #68758d;
    font-size: 15px;
    line-height: 1.7;
    margin-bottom: 10px;
}

.dixel-about-label {
    display: inline-block;
    color: #3978ed;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 1.5px;
    margin-bottom: 12px;
}

.dixel-section-heading {
    text-align: center;
    margin-bottom: 25px;
}

/* WHAT WE DO */
.dixel-what-card {
    background: #f6f9ff;
    border: 1px solid #e8edf7;
    border-radius: 12px;
    padding: 25px;
}

.dixel-what-card h3 {
    font-size: 21px;
    margin-bottom: 15px;
}

/* ICON AND HEADING SAME LINE */
.dixel-card-heading {
    display: flex;
    align-items: center;
    gap: 13px;
    margin-bottom: 14px;
}

.dixel-card-heading h3 {
    font-size: 19px;
    font-weight: 600;
    color: #17233f;
    margin: 0;
    line-height: 1.3;
}

.dixel-card-icon {
    width: 43px;
    height: 43px;
    min-width: 43px;
    border-radius: 10px;
    background: #edf3ff;
    color: #3978ed;
    display: flex;
    align-items: center;
    justify-content: center;
}

.dixel-card-icon svg {
    width: 21px;
    height: 21px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* CARDS */
.dixel-info-card {
    height: 100%;
    padding: 23px 20px;
    border: 1px solid #e8edf7;
    border-radius: 12px;
    background: #ffffff;
    transition: transform .25s ease,
                box-shadow .25s ease,
                border-color .25s ease;
}

/* LIGHT HOVER */
.dixel-info-card:hover,
.dixel-what-card:hover {
    transform: translateY(-4px);
    border-color: #c5d8ff;
    box-shadow: 0 8px 22px rgba(57, 120, 237, .09);
}

.dixel-info-card:hover .dixel-card-icon {
    background: #3978ed;
    color: #ffffff;
    transition: background .25s ease, color .25s ease;
}

/* PROCESS NUMBERS */
.dixel-step-number {
    width: 43px;
    height: 43px;
    min-width: 43px;
    border-radius: 10px;
    background: #edf3ff;
    color: #3978ed;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 15px;
}

/* MOBILE */
@media (max-width: 767px) {
    .dixel-about-intro,
    .dixel-mission-section,
    .dixel-why-section,
    .dixel-process-section {
        padding: 35px 0 !important;
    }

    .dixel-about-intro h2,
    .dixel-section-heading h2 {
        font-size: 28px;
    }

    .dixel-info-card {
        padding: 20px 17px;
    }
}

/* WHO WE ARE SECTION */

.dixel-about-intro {
    padding: 65px 0 !important;
    background: linear-gradient(120deg, #f0f6ff 0%, #e7f0ff 100%);
}

.dixel-about-intro .row {
    row-gap: 30px;
}

.dixel-about-intro .about-content {
    padding-right: 30px;
}

.dixel-about-label {
    display: inline-block;
    color: #3978ed;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 1.5px;
    margin-bottom: 18px;
}

.dixel-about-intro h2 {
    font-size: 36px;
    font-weight: 700;
    line-height: 1.3;
    color: #17233f;
    margin-bottom: 22px;
}

.dixel-about-intro h2 span {
    color: #3978ed;
}

.dixel-about-intro p {
    font-size: 16px;
    line-height: 1.8;
    color: #64718a;
    margin-bottom: 17px;
}

/* RIGHT SIDE SQUARE IMAGE */

.dixel-about-image {
    width: 100%;
    max-width: 500px;
    aspect-ratio: 1 / 1;
    margin-left: auto;
    overflow: hidden;
    border-radius: 16px;
    box-shadow: 0 12px 30px rgba(40, 80, 140, 0.10);
}

.dixel-about-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.4s ease;
}

.dixel-about-image:hover img {
    transform: scale(1.04);
}

/* MOBILE RESPONSIVE */

@media (max-width: 991px) {
    .dixel-about-intro {
        padding: 45px 0 !important;
    }

    .dixel-about-intro .about-content {
        padding-right: 0;
    }

    .dixel-about-image {
        max-width: 450px;
        margin: 10px auto 0;
    }
}

@media (max-width: 576px) {
    .dixel-about-intro h2 {
        font-size: 28px;
    }

    .dixel-about-intro p {
        font-size: 15px;
    }
}
.dx-sd-call {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    color: #fff;
    text-decoration: none;
}

.dx-sd-call i {
    font-size: 24px;
    color: #fff;
}
/* HOW WE WORK SECTION */

.dixel-process-section {
    padding: 60px 0 !important;
}

/* Section Title */

.dixel-process-section .dixel-section-heading {
    margin-bottom: 35px;
}

.dixel-process-section .dixel-section-heading h2 {
    color: #3978ed !important;
    font-weight: 700;
}

/* Process Cards */

.dixel-process-section .dixel-info-card {
    height: 100%;
    padding: 25px 20px;
    background: #ffffff;
    border: 1px solid #e5ecf7;
    border-radius: 14px;
    transition: all 0.3s ease;
}

/* Icon and Heading Same Line */

.dixel-process-section .dixel-card-heading {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 17px;
}

/* Icon Design */

.dixel-process-section .dixel-step-number {
    width: 46px;
    height: 46px;
    min-width: 46px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #edf4ff;
    color: #3978ed;
    border-radius: 12px;
    font-size: 19px;
    transition: all 0.3s ease;
}

/* Heading */

.dixel-process-section .dixel-card-heading h3 {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
    color: #17233f;
    line-height: 1.4;
}

/* Description - Next Line */

.dixel-process-section .dixel-info-card p {
    margin: 0;
    padding-left: 0;
    color: #68758d;
    font-size: 15px;
    line-height: 1.7;
}

/* Light Hover Effect */

.dixel-process-section .dixel-info-card:hover {
    transform: translateY(-5px);
    border-color: #c5d8ff;
    box-shadow: 0 10px 25px rgba(57, 120, 237, 0.09);
}

.dixel-process-section .dixel-info-card:hover .dixel-step-number {
    background: #3978ed;
    color: #ffffff;
}

/* Mobile Responsive */

@media (max-width: 767px) {
    .dixel-process-section {
        padding: 40px 0 !important;
    }

    .dixel-process-section .dixel-info-card {
        padding: 22px 18px;
    }
}
/* =====================================
   DIXEL - HOW WE WORK SECTION
===================================== */

.dixel-process-section {
    padding: 60px 0 !important;
    background: #f4f8ff;
}

/* SECTION TITLE */

.dixel-process-section .dixel-section-heading {
    text-align: center;
    margin-bottom: 35px;
}

.dixel-process-section .dixel-section-heading h2 {
    font-size: 34px;
    font-weight: 700;
    color: #17233f !important;
    margin-bottom: 0;
}
/* PROCESS CARD */

.dixel-process-section .dixel-info-card {
    height: 100%;
    padding: 25px 20px;
    background: #ffffff;
    border: 1px solid #e5ecf7;
    border-radius: 14px;
    transition: all 0.3s ease;
}

/* ICON AND HEADING SAME LINE */

.dixel-process-section .dixel-card-heading {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 17px;
}

/* ICON BOX */

.dixel-process-section .dixel-step-number {
    width: 46px;
    height: 46px;
    min-width: 46px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #edf4ff;
    color: #3978ed;
    border-radius: 12px;
    transition: all 0.3s ease;
}

/* SVG ICON */

.dixel-process-section .dixel-step-number svg {
    width: 23px;
    height: 23px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* CARD HEADING */

.dixel-process-section .dixel-card-heading h3 {
    font-size: 18px;
    font-weight: 600;
    color: #17233f;
    line-height: 1.4;
    margin: 0;
}

/* CARD DESCRIPTION */

.dixel-process-section .dixel-info-card p {
    font-size: 15px;
    line-height: 1.7;
    color: #68758d;
    margin: 0;
}

/* HOVER EFFECT */

.dixel-process-section .dixel-info-card:hover {
    transform: translateY(-5px);
    border-color: #c5d8ff;
    box-shadow: 0 10px 25px rgba(57, 120, 237, 0.09);
}

.dixel-process-section .dixel-info-card:hover .dixel-step-number {
    background: #3978ed;
    color: #ffffff;
}

/* RESPONSIVE */

@media (max-width: 991px) {
    .dixel-process-section {
        padding: 45px 0 !important;
    }
}

@media (max-width: 767px) {
    .dixel-process-section .dixel-section-heading h2 {
        font-size: 28px;
    }

    .dixel-process-section .dixel-info-card {
        padding: 22px 18px;
    }
}
#contact-form .submit-btn {
    position: relative;
    z-index: 10;
    pointer-events: auto;
}

#contact-form button[type="submit"] {
    position: relative;
    z-index: 11;
    pointer-events: auto;
    cursor: pointer;
}

/* Ad Design Page hidden everywhere (page file stays in the folder) */
.header-area .mainmenu > ul > li:has(> a[href*="advertising-design"]),
.mean-nav li:has(> a[href*="advertising-design"]),
.footer-widget li:has(> a[href*="advertising-design"]),
.dx-sd-links li:has(> a[href*="advertising-design"]),
li:has(> a[href*="advertising-design"]){
  display:none !important;
}

/* NEW CHANGES START: Phone / Email / Location icons (SVG) in side panel and mobile menu */
.hamburger-infos .contact-info .contact-item .subtitle{display:flex;align-items:center;gap:10px}
.hamburger-infos .contact-info .contact-item .subtitle svg{width:20px;height:20px;flex:none;color:#6d97ff}
/* NEW CHANGES END */

/* ===== Footer: contact + social ===== */
.tj-footer-section .footer-contact li::before,
.tj-footer-section .footer-contact li::after,
.tj-footer-section .social-links li::before,
.tj-footer-section .social-links li::after{content:none!important;display:none!important}
.tj-footer-section .footer-contact li::marker,
.tj-footer-section .social-links li::marker{content:""!important;font-size:0!important}
.tj-footer-section .footer-contact .text{min-width:0;overflow-wrap:anywhere;line-height:1.3}
.tj-footer-section .footer-contact a{min-height:0!important;line-height:1.3}
.tj-footer-section .social-links ul li a{width:34px!important;height:34px!important;display:inline-flex!important;align-items:center;justify-content:center}
@media (max-width:575px){.tj-footer-section .social-links ul li a{width:32px!important;height:32px!important}}
/* Contact & Follow Us column: a little further to the right on wide screens */
@media (min-width:1200px){.tj-footer-section .footer-contact-widget{margin-left:60px}}
@media (min-width:1400px){.tj-footer-section .footer-contact-widget{margin-left:110px}}
@media (max-width:575px){
  .tj-footer-section .footer-contact .dx-fi{flex-basis:32px!important;width:32px!important;height:32px!important}
  .tj-footer-section .footer-contact .dx-fi svg{width:16px!important;height:16px!important}
}

/* ===== Header WhatsApp button: green pill, original WhatsApp icon ===== */
body .header-area .header-button .tj-primary-btn{
  display:inline-flex!important;align-items:center;justify-content:center;gap:12px;
  background:#25D366!important;background-image:none!important;border:0!important;border-radius:50px!important;
  box-shadow:0 8px 20px rgba(37,211,102,.35)!important;
}
body .header-area .header-button .tj-primary-btn:hover{background:#1ebe5a!important}
body .header-area .header-button .tj-primary-btn::before,
body .header-area .header-button .tj-primary-btn::after{display:none!important;content:none!important}
body .header-area .header-button .tj-primary-btn .btn-text,
body .header-area .header-button .tj-primary-btn .btn-text span{color:#fff!important}
body .header-area .header-button .tj-primary-btn .btn-icon{
  background:transparent!important;border:0!important;padding:0!important;width:auto!important;height:auto!important;
  position:static!important;transform:none!important;opacity:1!important;visibility:visible!important;
  display:inline-flex!important;align-items:center;justify-content:center;
}
body .header-area .header-button .tj-primary-btn .btn-icon svg{display:block!important;width:32px!important;height:32px!important;border-radius:8px}
body .header-area .header-button .tj-primary-btn .btn-icon svg{box-shadow:none!important;outline:0!important;border:0!important}
body .header-area .header-button .tj-primary-btn .btn-icon svg rect{fill:#00E510!important}
body .header-area .header-button .tj-primary-btn .btn-icon svg path{fill:#fff!important}

/* mobile: logo -> WhatsApp -> menu in one row */
@media (max-width:991px){
  body .header-area .header-wrapper{display:flex!important;flex-wrap:nowrap!important;align-items:center!important;gap:8px!important}
  body .header-area .header-wrapper .site_logo{order:1!important;flex:0 1 auto!important;min-width:0!important;margin-right:auto!important}
  body .header-area .site_logo img{width:120px!important;max-width:100%!important;height:auto!important}
  body .header-area .header-wrapper .header-button.header-button-mobile{order:2!important;display:flex!important;flex:0 0 auto!important;align-items:center;margin:0 4px 0 auto!important}
  body .header-area .header-wrapper .mobile_menu_bar{order:3!important;display:inline-flex!important;flex:0 0 auto!important;margin:0!important}
  body .header-area .header-button-mobile .tj-primary-btn{padding:7px 14px 7px 12px!important;gap:8px!important;white-space:nowrap!important;box-shadow:0 4px 12px rgba(37,211,102,.30)!important}
  body .header-area .header-button-mobile .tj-primary-btn .btn-text{display:inline-block!important;visibility:visible!important;opacity:1!important}
  body .header-area .header-button-mobile .tj-primary-btn .btn-text span{font-size:13px!important;line-height:1.2!important}
  body .header-area .header-button-mobile .tj-primary-btn .btn-icon svg{width:26px!important;height:26px!important;border-radius:7px}
}
@media (max-width:380px){
  body .header-area .site_logo img{width:100px!important}
  body .header-area .header-button-mobile .tj-primary-btn{padding:6px 10px 6px 8px!important;gap:6px!important}
  body .header-area .header-button-mobile .tj-primary-btn .btn-text span{font-size:12px!important}
}

/* ===== Footer: copyright + policy links ===== */
/* Copyright Area */
.footer-copyright-only {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    gap: 20px;
}

.footer-copyright-only .copyright-text {
    margin: 0;
}

.footer-copyright-only .copyright-text p {
    margin: 0;
}

/* Terms & Privacy Links */
.footer-policy-links {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 18px;
    white-space: nowrap;
}

.footer-policy-links a {
    color: #101b3d;
    font-size: 16px;
    font-weight: 500;
    text-decoration: none;
}

.footer-policy-links a:hover {
    color: #1764d8;
}

.footer-policy-links span {
    color: #101b3d;
}

/* Tablet Responsive */
@media (max-width: 1199px) {
    .footer-contact-widget {
        margin-left: 0;
    }
}

/* Mobile Responsive */
@media (max-width: 767px) {

    .footer-contact-widget {
        margin-top: 25px;
    }

    .footer-contact-widget .footer-contact .text {
        font-size: 15px;
        word-break: break-word;
    }

    .footer-copyright-only {
        flex-direction: column;
        align-items: flex-start;
        gap: 15px;
    }

    .footer-policy-links {
        justify-content: flex-start;
        flex-wrap: wrap;
        gap: 12px;
    }

    .footer-policy-links a {
        font-size: 14px;
    }
}

/* ==========================================================================
   NEW CHANGES START: desktop side menu (offcanvas) fits on ONE screen on laptops
   Logo -> text -> Contact Info -> Follow Us all visible, no scrolling.
   Spacing shrinks smoothly with the screen height (vh); nothing else is touched.
   ========================================================================== */
@media (min-width: 992px) {
  .tj-offcanvas-area .hamburger_wrapper{padding:clamp(16px,3.4vh,40px) 40px}
  .tj-offcanvas-area .hamburger_top{margin-bottom:clamp(10px,2.4vh,30px)}
  .tj-offcanvas-area .hamburger_logo .mobile_logo{max-width:clamp(100px,17vh,136px)}
  .tj-offcanvas-area .offcanvas-text{margin-bottom:clamp(10px,2.6vh,40px)}
  .tj-offcanvas-area .offcanvas-text p{font-size:clamp(13px,1.9vh,16px);line-height:1.45}
  .tj-offcanvas-area .hamburger-title{font-size:clamp(18px,2.7vh,22px);margin-bottom:clamp(8px,1.8vh,25px)}
  .tj-offcanvas-area .hamburger-infos{margin-bottom:clamp(12px,2.8vh,45px)}
  .tj-offcanvas-area .hamburger-infos .contact-info .contact-item{padding:0;margin-bottom:clamp(8px,1.8vh,22px)}
  .tj-offcanvas-area .hamburger-infos .contact-info .contact-item:last-child{margin-bottom:0}
  .tj-offcanvas-area .hamburger-infos .contact-icon{width:clamp(30px,4.6vh,38px);height:clamp(30px,4.6vh,38px);min-width:clamp(30px,4.6vh,38px)}
  .tj-offcanvas-area .hamburger-infos .contact-icon i{font-size:clamp(16px,2.6vh,22px)}
  .tj-offcanvas-area .hamburger-infos .contact-details{gap:2px}
  .tj-offcanvas-area .hamburger-infos .contact-item .subtitle{font-size:clamp(12px,1.8vh,15px);line-height:1.3}
  .tj-offcanvas-area .hamburger-infos .contact-link{font-size:clamp(13px,2vh,16px);line-height:1.45}
  .tj-offcanvas-area .hamburger-socials .hamburger-title{margin-bottom:clamp(8px,1.8vh,25px)}
}
/* NEW CHANGES END */