/* =========================================================
   DATA TECHES — MODERN PUBLIC WEBSITE UI
   Admin styles are intentionally untouched.
   ========================================================= */
:root{
  --dt-ink:#0b1726;
  --dt-ink-2:#17263a;
  --dt-primary:#2878ff;
  --dt-primary-2:#1f61d4;
  --dt-teal:#20c6b5;
  --dt-cyan:#5eead4;
  --dt-bg:#f6f8fc;
  --dt-card:#ffffff;
  --dt-muted:#64748b;
  --dt-border:#e5eaf2;
  --dt-shadow:0 18px 55px rgba(11,23,38,.08);
  --dt-shadow-hover:0 28px 70px rgba(11,23,38,.14);
  --dt-radius:22px;
}

html{scroll-behavior:smooth}
body{
  background:var(--dt-bg);
  color:var(--dt-ink);
  font-family:"Poppins",sans-serif;
  overflow-x:hidden;
}
a{transition:all .22s ease}
.container{max-width:1180px}

/* Slim contact bar above the main navigation */
.dt-topbar{
  position:relative;
  z-index:101;
  height:38px;
  background:#091525;
  color:#cbd7e5;
  border-bottom:1px solid rgba(255,255,255,.08);
  font-size:11px;
  letter-spacing:.15px;
}
.dt-topbar-inner{
  min-height:38px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
}
.dt-topbar-left,
.dt-topbar-hours{
  display:flex;
  align-items:center;
  gap:20px;
}
.dt-topbar a{
  display:inline-flex;
  align-items:center;
  gap:8px;
  color:#d8e2ee;
  text-decoration:none;
  white-space:nowrap;
}
.dt-topbar a:hover{color:#fff}
.dt-topbar i{
  color:var(--dt-teal);
  font-size:12px;
}
.dt-topbar-hours{color:#aebdce;white-space:nowrap}

/* Header */
.header-area{
  height:78px!important;
  background:rgba(255,255,255,.90)!important;
  border-bottom:1px solid rgba(229,234,242,.75);
  box-shadow:0 8px 30px rgba(11,23,38,.05)!important;
  top:38px!important;
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
}
.header-area .main-nav{height:78px!important;min-height:78px!important}
.header-area .main-nav .nav{margin-top:17px!important}
.header-area .main-nav .nav li{padding:0 10px!important}
.header-area .main-nav .nav li a{
  color:#4b5b70!important;
  font-size:13px!important;
  font-weight:600!important;
  letter-spacing:.15px;
  padding:10px 4px!important;
}
.header-area .main-nav .nav li a:hover,
.header-area .main-nav .nav li a.active{color:var(--dt-primary)!important}
.header-area .main-nav .nav li:last-child{padding-left:16px!important}
.header-area .logo{height:78px!important;display:flex!important;align-items:center}
.dt-site-logo{width:194px;height:auto;display:block}
.background-header{height:72px!important;top:0!important}
.background-header .main-nav{height:72px!important;min-height:72px!important}
.background-header .logo{height:72px!important}
.background-header .dt-site-logo{width:178px}

.header-area .main-nav .menu-trigger{
  top:20px!important;
  right:0;
  width:42px!important;
  height:42px!important;
  border-radius:12px;
  background:#f0f4fa;
}
.header-area .main-nav .menu-trigger span,
.header-area .main-nav .menu-trigger span:before,
.header-area .main-nav .menu-trigger span:after{background:var(--dt-ink)!important}

/* Buttons */
.main-blue-button a,.main-blue-button-hover a,
.main-red-button a,.main-red-button-hover a{
  border:0!important;
  border-radius:12px!important;
  padding:12px 19px!important;
  font-weight:700!important;
  box-shadow:0 10px 25px rgba(40,120,255,.20);
}
.main-blue-button a,.main-blue-button-hover a{background:var(--dt-primary)!important}
.main-red-button a,.main-red-button-hover a{background:var(--dt-ink)!important}
.main-blue-button a:hover,.main-blue-button-hover a:hover{background:var(--dt-primary-2)!important;transform:translateY(-2px)}
.main-red-button a:hover,.main-red-button-hover a:hover{background:#1c2d43!important;transform:translateY(-2px)}

/* Hero */
.main-banner{
  min-height:700px;
  padding:155px 0 105px!important;
  display:flex;
  align-items:center;
  position:relative;
  isolation:isolate;
  background:
    radial-gradient(circle at 75% 20%,rgba(32,198,181,.14),transparent 28%),
    radial-gradient(circle at 10% 90%,rgba(40,120,255,.10),transparent 30%),
    linear-gradient(135deg,#f9fbff 0%,#eef5ff 100%);
  overflow:hidden;
}
.main-banner:before{
  content:"";
  position:absolute;
  width:600px;height:600px;
  border-radius:50%;
  right:-230px;top:-250px;
  background:linear-gradient(135deg,rgba(40,120,255,.12),rgba(32,198,181,.08));
  z-index:-1;
}
.main-banner .header-text{padding:20px 0 20px}
.main-banner .header-text h6{
  display:inline-flex;
  align-items:center;
  gap:8px;
  margin-bottom:18px!important;
  padding:8px 13px;
  border:1px solid #dbe7f7;
  border-radius:999px;
  background:rgba(255,255,255,.75);
  color:var(--dt-primary)!important;
  font-size:12px!important;
  font-weight:700!important;
  letter-spacing:.5px;
  text-transform:uppercase;
}
.main-banner .header-text h6:before{
  content:"";
  width:7px;height:7px;border-radius:50%;
  background:var(--dt-teal);
  box-shadow:0 0 0 5px rgba(32,198,181,.12);
}
.main-banner .header-text h2{
  max-width:700px;
  color:var(--dt-ink)!important;
  font-size:56px!important;
  line-height:1.08!important;
  letter-spacing:-2px;
  font-weight:800!important;
  margin-bottom:24px!important;
}
.main-banner .header-text h2 em{
  color:var(--dt-primary)!important;
  font-style:normal!important;
}
.main-banner .header-text h2 span{color:var(--dt-teal)!important}
.main-banner .header-text p{
  max-width:630px;
  color:#5e6d80!important;
  font-size:16px!important;
  line-height:1.9!important;
  margin-bottom:30px!important;
}
.main-banner .down-buttons{
  display:flex!important;
  gap:12px;
  align-items:center;
}
.dt-hero-visual{
  position:absolute;
  right:5.5%;
  top:50%;
  transform:translateY(-46%);
  width:min(42vw,570px);
  aspect-ratio:1/1;
  border-radius:34px;
  overflow:hidden;
  background:#0b1726;
  box-shadow:0 30px 90px rgba(11,23,38,.22);
  border:8px solid rgba(255,255,255,.75);
}
.dt-hero-visual img{width:100%;height:100%;object-fit:cover}
.dt-hero-visual:after{
  content:"";
  position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(11,23,38,.02),rgba(11,23,38,.35));
}
.dt-hero-code{
  position:absolute;
  z-index:3;
  left:-18px;bottom:34px;
  width:190px;
  padding:16px 18px;
  border:1px solid rgba(255,255,255,.16);
  border-radius:17px;
  background:rgba(11,23,38,.88);
  box-shadow:0 18px 45px rgba(11,23,38,.25);
  color:#d9e6f5;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:10px;
  line-height:1.7;
  backdrop-filter:blur(14px);
}
.dt-hero-code b{color:#5eead4}

/* Section rhythm */
.section{padding-top:100px!important;padding-bottom:100px!important}
.section-heading{margin-bottom:48px!important}
.section-heading h2{
  color:var(--dt-ink)!important;
  font-size:38px!important;
  line-height:1.22!important;
  font-weight:800!important;
  letter-spacing:-1px;
}
.section-heading h2 em{color:var(--dt-primary)!important;font-style:normal}
.section-heading h2 span{color:var(--dt-teal)!important}
.section-heading>span{
  color:var(--dt-primary)!important;
  font-size:12px!important;
  font-weight:800!important;
  letter-spacing:1.8px;
  text-transform:uppercase;
}
.section-heading p{color:var(--dt-muted);line-height:1.85}

/* Services */
.our-services{background:#fff}
.our-services .container-fluid{position:relative;z-index:2}
.service-item{
  min-height:290px;
  padding:30px!important;
  border:1px solid var(--dt-border)!important;
  border-radius:var(--dt-radius)!important;
  background:linear-gradient(145deg,#fff,#f9fbff)!important;
  box-shadow:var(--dt-shadow)!important;
  transition:transform .3s ease,box-shadow .3s ease,border-color .3s ease;
}
.service-item:hover{
  transform:translateY(-9px);
  border-color:#cfe0fb!important;
  box-shadow:var(--dt-shadow-hover)!important;
}
.service-item h4{color:var(--dt-ink)!important;font-weight:750!important;font-size:18px!important}
.service-item .icon{
  width:56px;height:56px;
  margin:20px 0;
  display:flex;align-items:center;justify-content:center;
  border-radius:16px;
  background:linear-gradient(135deg,#e9f1ff,#e8fbf7);
}
.service-item .icon img{max-width:28px!important;max-height:28px!important}
.service-item p{color:var(--dt-muted)!important;line-height:1.75!important}
.service-item .btn,.dt-card .btn{
  border-radius:10px!important;
  font-weight:650;
  padding:8px 13px;
}

/* About */
.about-us{background:#f8fafc}
.about-us .left-image{
  position:relative;
  padding:14px;
}
.about-us .left-image:before{
  content:"";
  position:absolute;left:-8px;bottom:-8px;
  width:110px;height:110px;
  border-radius:24px;
  background:linear-gradient(135deg,var(--dt-teal),var(--dt-primary));
  opacity:.16;
}
.about-us .left-image img{
  position:relative;
  z-index:1;
  width:100%;
  max-width:560px;
  min-height:390px;
  object-fit:cover;
  border-radius:30px;
  box-shadow:0 24px 70px rgba(11,23,38,.14);
}
.about-us .section-heading p{font-size:15px}
.fact-item{
  padding:18px 12px!important;
  border:1px solid var(--dt-border);
  border-radius:17px;
  background:#fff;
  box-shadow:0 10px 35px rgba(11,23,38,.05);
}
.fact-item .count-digit{color:var(--dt-primary)!important;font-size:30px!important;font-weight:800!important}
.fact-item .count-title{color:var(--dt-muted)!important;font-size:11px!important;font-weight:700}

/* Portfolio */
.our-portfolio{background:#fff}
.our-portfolio .project-item .thumb{
  border-radius:22px!important;
  overflow:hidden;
  box-shadow:var(--dt-shadow);
  background:#0b1726;
}
.our-portfolio .project-item .thumb>img{
  height:390px!important;
  object-fit:cover;
  width:100%;
  transition:transform .45s ease;
}
.our-portfolio .project-item .thumb:hover>img{transform:scale(1.04)}
.our-portfolio .hover-effect{
  background:linear-gradient(180deg,rgba(11,23,38,0),rgba(11,23,38,.94))!important;
}
.our-portfolio .hover-effect .content{padding:25px!important}
.our-portfolio .hover-effect h4{font-weight:750!important}
.our-portfolio .hover-effect span{color:#9feee4!important}

/* Generic cards/pages */
.dt-card{
  border:1px solid var(--dt-border)!important;
  border-radius:20px!important;
  box-shadow:0 12px 40px rgba(11,23,38,.06)!important;
  overflow:hidden;
  background:#fff!important;
  transition:transform .28s ease,box-shadow .28s ease,border-color .28s ease;
}
.dt-card:hover{
  transform:translateY(-6px);
  box-shadow:0 25px 60px rgba(11,23,38,.12)!important;
  border-color:#d4e2f7!important;
}
.dt-card .card-img-top{height:220px!important;object-fit:cover}
.dt-card .card-body{padding:26px!important}
.dt-card .card-title a,.dt-card h5 a{color:var(--dt-ink)!important}
.dt-card .card-title a:hover,.dt-card h5 a:hover{color:var(--dt-primary)!important}
.badge-primary{background:var(--dt-primary)!important}
.btn-outline-primary{
  color:var(--dt-primary)!important;
  border-color:#c8daf8!important;
}
.btn-outline-primary:hover{
  color:#fff!important;
  border-color:var(--dt-primary)!important;
  background:var(--dt-primary)!important;
}

/* Page hero */
.page-hero{
  padding:155px 0 85px!important;
  background:
    radial-gradient(circle at 80% 0%,rgba(32,198,181,.22),transparent 25%),
    linear-gradient(135deg,#0b1726,#102d4d 58%,#1b5c8c)!important;
  text-align:left!important;
}
.page-hero:after{
  content:"";
  position:absolute;right:-100px;top:-160px;
  width:360px;height:360px;border-radius:50%;
  border:70px solid rgba(255,255,255,.04);
}
.page-hero h1{font-size:46px!important;color:#fff!important;font-weight:800!important;letter-spacing:-1.2px}
.page-hero p{color:#c8d6e6!important}
.page-hero .breadcrumb{position:relative;z-index:2}
.page-hero .breadcrumb a:hover{color:#fff!important}

/* Contact */
.contact-us{background:#f8fafc!important}
.client-contact-form{
  padding:38px!important;
  background:#fff!important;
  background-image:none!important;
  border:1px solid var(--dt-border);
  border-radius:24px!important;
  box-shadow:var(--dt-shadow)!important;
}
.client-contact-form input,.client-contact-form textarea{
  padding:14px 15px!important;
  margin-bottom:16px!important;
  border:1px solid #dce4ef!important;
  border-radius:12px!important;
  background:#fbfcfe!important;
  color:var(--dt-ink)!important;
  transition:.2s;
}
.client-contact-form input:focus,.client-contact-form textarea:focus{
  border-color:#9abdf5!important;
  background:#fff!important;
  box-shadow:0 0 0 4px rgba(40,120,255,.10)!important;
}
.client-contact-form button{
  width:auto!important;
  border-radius:12px!important;
  background:var(--dt-primary)!important;
  padding:13px 21px!important;
  font-weight:700!important;
}
.phone-info h4{font-size:16px!important;color:var(--dt-muted)!important;line-height:1.7}
.phone-info h4 span{display:block;margin-top:5px}
.phone-info a{color:var(--dt-ink)!important;font-weight:750}
.contact-us .section-heading p{color:var(--dt-muted)}

/* Testimonials/blog */
.testimonial-item{
  height:100%;
  padding:28px!important;
  border:1px solid var(--dt-border)!important;
  border-radius:20px!important;
  background:#fff!important;
  box-shadow:0 12px 40px rgba(11,23,38,.05)!important;
}
.testimonial-item p{color:#59697c;line-height:1.8}
#blog{background:#fff}
#blog .dt-card .card-img-top{height:205px!important}

/* Footer */
footer{
  margin-top:0!important;
  padding:75px 0 28px!important;
  background:#08131f!important;
  color:#c4d1df!important;
  border:0!important;
}
footer .footer-item h4{
  color:#fff!important;
  font-size:15px!important;
  font-weight:750!important;
  margin-bottom:20px!important;
}
footer .footer-item p,footer .footer-item a{color:#9fb0c2!important}
footer .footer-item a:hover{color:#fff!important}
.dt-footer-logo{width:190px!important;height:auto!important;margin-bottom:16px}
.dt-footer-text{display:none!important}
footer .about> a{font-size:13px}
footer .about ul{display:flex;gap:9px;margin-top:20px}
footer .about ul li a{
  width:38px;height:38px;
  display:flex;align-items:center;justify-content:center;
  border-radius:11px;
  background:#112336;
  color:#c8d5e2!important;
}
footer .about ul li a:hover{background:var(--dt-primary);color:#fff!important}
.dt-footer-contact li{margin-bottom:11px!important}
.dt-footer-contact i{width:18px;color:var(--dt-teal)}
.footer-dec{display:none}

/* Small utility strip */
.dt-trust-strip{
  position:relative;
  z-index:5;
  margin-top:-42px;
  margin-bottom:0;
}
.dt-trust-inner{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:1px;
  overflow:hidden;
  border:1px solid var(--dt-border);
  border-radius:20px;
  background:var(--dt-border);
  box-shadow:0 20px 55px rgba(11,23,38,.10);
}
.dt-trust-item{
  padding:21px 24px;
  background:#fff;
  display:flex;align-items:center;gap:14px;
}
.dt-trust-item i{
  width:42px;height:42px;border-radius:12px;
  display:flex;align-items:center;justify-content:center;
  color:var(--dt-primary);
  background:#edf4ff;
}
.dt-trust-item strong{display:block;color:var(--dt-ink);font-size:13px}
.dt-trust-item span{display:block;color:var(--dt-muted);font-size:11px;margin-top:2px}

/* Mobile */
@media(max-width:1199px){
  .dt-hero-visual{right:3%;width:43vw}
  .main-banner .header-text h2{font-size:48px!important}
}
@media(max-width:991px){
  .dt-topbar{height:36px;font-size:10px}
  .dt-topbar-inner{min-height:36px;gap:12px}
  .dt-topbar-left,.dt-topbar-hours{gap:12px}
  .header-area{top:36px!important}
  .header-area,.header-area .main-nav{height:72px!important;min-height:72px!important}
  .header-area .logo{height:72px!important}
  .dt-site-logo{width:170px}
  .main-banner{min-height:auto;padding:125px 0 75px!important}
  .main-banner .header-text{padding-right:0}
  .main-banner .header-text h2{font-size:44px!important;letter-spacing:-1.2px}
  .dt-hero-visual{
    position:relative;right:auto;top:auto;transform:none;
    width:100%;max-width:620px;margin:42px auto 0;
    aspect-ratio:16/10;
  }
  .dt-trust-strip{margin-top:-25px}
  .section{padding-top:75px!important;padding-bottom:75px!important}
  .page-hero{padding:125px 0 65px!important}
  .page-hero h1{font-size:38px!important}
  .dt-trust-inner{grid-template-columns:1fr}
}
@media(max-width:767px){
  .dt-topbar{height:34px}
  .dt-topbar-inner{justify-content:center}
  .dt-topbar-left{gap:14px}
  .dt-topbar-hours{display:none}
  .dt-topbar a span{max-width:145px;overflow:hidden;text-overflow:ellipsis}
  .header-area{top:34px!important}
  .main-banner .header-text h2{font-size:37px!important}
  .main-banner .header-text p{font-size:14px!important;line-height:1.75!important}
  .main-banner .down-buttons{flex-wrap:wrap}
  .dt-hero-visual{aspect-ratio:4/3;border-radius:24px}
  .dt-hero-code{left:12px;bottom:12px;width:170px}
  .section-heading h2{font-size:30px!important}
  .page-hero h1{font-size:32px!important}
  .client-contact-form{padding:22px!important}
  footer{padding-top:55px!important}
}