/* ============================================================
   IT DELTA COM — Tech UI v2  |  Harmonious · 8px radius
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Ubuntu:ital,wght@0,300;0,400;0,500;0,700;1,400&family=Ubuntu+Mono:wght@400;700&display=swap');

:root {
  --primary:      #1172B7;
  --primary-dark: #0d5a94;
  --primary-glow: rgba(17,114,183,.18);
  --accent:       #0ea5e9;
  --dark:         #0b1829;
  --dark-2:       #112340;
  --text:         #1a2332;
  --muted:        #64748b;
  --border:       #dce8f4;
  --bg:           #f4f7fb;
  --white:        #ffffff;
  --shadow-sm:    0 2px 8px rgba(17,114,183,.08);
  --shadow-md:    0 6px 24px rgba(17,114,183,.14);
  --shadow-lg:    0 14px 40px rgba(17,114,183,.20);
  --r:            8px;          /* single radius token */
  --t:            all .25s ease;
}

/* ── Base ─────────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family:'Ubuntu',sans-serif!important;
  color:var(--text);
  background:#fff;
  -webkit-font-smoothing:antialiased;
  font-size:14px;
  line-height:1.6;
}
a{transition:var(--t)}
img{display:block;max-width:100%}

/* ── Top info bar ─────────────────────────────────────────── */
.menu-top-area{
  background:var(--dark);
  border-bottom:1px solid rgba(255,255,255,.06);
  padding:8px 0;
}
.menu-top-area .track-order-link,
.menu-top-area .main-link{
  color:rgba(255,255,255,.75)!important;
  font-size:12px;
  font-weight:500;
  letter-spacing:.4px;
  transition:var(--t);
}
.menu-top-area .track-order-link:hover,
.menu-top-area .main-link:hover{color:#fff!important}

/* ── Header ───────────────────────────────────────────────── */
.site-header{
  background:#fff;
  box-shadow:0 1px 0 var(--border);
  transition:var(--t);
}
.site-header.sticky-on{
  box-shadow:var(--shadow-md)!important;
  background:rgba(255,255,255,.97)!important;
}
.topbar{padding:14px 0}

.site-branding img{
  max-height:48px;
  transition:var(--t);
}
.site-branding img:hover{opacity:.85}

/* Search */
.search-box{
  background:var(--bg);
  border:1.5px solid var(--border)!important;
  border-radius:var(--r)!important;
  overflow:hidden;
  transition:var(--t);
}
.search-box:focus-within{
  border-color:var(--primary)!important;
  box-shadow:0 0 0 3px var(--primary-glow);
}
.search-box .form-control{
  border:none!important;
  background:transparent;
  font-family:'Ubuntu',sans-serif;
  font-size:13.5px;
}
.search-box .form-control:focus{box-shadow:none!important}
.search-box button{
  background:var(--primary);
  border:none;
  color:#fff;
  padding:0 18px;
  font-size:15px;
  transition:var(--t);
}
.search-box button:hover{background:var(--primary-dark)}
.search-box .categoris{
  border:none;
  border-right:1.5px solid var(--border);
  background:transparent;
  font-size:13px;
  font-family:'Ubuntu',sans-serif;
  padding:0 12px;
  outline:none;
  color:var(--text);
}

/* Toolbar */
.toolbar-item a>div{
  padding:6px 10px;
  border-radius:var(--r);
  transition:var(--t);
}
.toolbar-item a>div:hover{background:var(--bg);transform:translateY(-1px)}
.toolbar-item .count-label{
  background:var(--primary)!important;
  color:#fff;
  font-size:10px;
  font-weight:700;
  min-width:17px;
  height:17px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
}

/* ── Navbar ───────────────────────────────────────────────── */
.navbar{border-top:1px solid var(--border);padding:0;background:#fff}
.site-menu>ul>li>a{
  font-size:13.5px!important;
  font-weight:600!important;
  color:var(--text)!important;
  padding:14px 16px!important;
  position:relative;
  transition:var(--t);
  letter-spacing:.2px;
}
.site-menu>ul>li>a::after{
  content:'';
  position:absolute;
  bottom:0;left:50%;right:50%;
  height:2px;
  background:var(--primary);
  border-radius:2px 2px 0 0;
  transition:var(--t);
}
.site-menu>ul>li.active>a,
.site-menu>ul>li:hover>a{color:var(--primary)!important}
.site-menu>ul>li.active>a::after,
.site-menu>ul>li:hover>a::after{left:12px;right:12px}

/* Dropdown */
.t-h-dropdown-menu{
  border-radius:var(--r)!important;
  border:1px solid var(--border)!important;
  box-shadow:var(--shadow-md)!important;
  padding:6px!important;
  min-width:200px!important;
}
.t-h-dropdown-menu a{
  font-size:13px;
  font-weight:500;
  border-radius:6px;
  padding:8px 12px!important;
  transition:var(--t);
  display:block;
}
.t-h-dropdown-menu a:hover{
  background:var(--bg)!important;
  color:var(--primary)!important;
  padding-left:16px!important;
}

/* ── Buttons ──────────────────────────────────────────────── */
.btn,.btn-primary,.btn-block{border-radius:var(--r)!important}
.btn-primary{
  background:var(--primary)!important;
  border:none!important;
  font-family:'Ubuntu',sans-serif!important;
  font-weight:600!important;
  font-size:13.5px!important;
  letter-spacing:.2px;
  padding:10px 22px!important;
  box-shadow:var(--shadow-sm)!important;
  transition:var(--t)!important;
  position:relative;
  overflow:hidden;
}
.btn-primary:hover{
  background:var(--primary-dark)!important;
  box-shadow:var(--shadow-md)!important;
  transform:translateY(-1px)!important;
}
.btn-outline-white{border-radius:var(--r)!important}

/* ── Hero Slider ──────────────────────────────────────────── */
.hero-area3{position:relative;min-height:460px}
.hero-area3 .heroarea-slider .item{
  background-size:cover!important;
  background-position:center!important;
  min-height:460px;
  position:relative;
}
.hero-area3 .heroarea-slider .item::before{
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(105deg,rgba(7,22,44,.82) 0%,rgba(17,114,183,.25) 60%,transparent 100%);
}
.hero-area3 .left-content.color-white{position:relative;z-index:2}
.hero-area3 .subtitle{
  display:inline-block;
  font-size:11px!important;
  font-weight:700;
  letter-spacing:2.5px;
  text-transform:uppercase;
  color:var(--accent)!important;
  background:rgba(14,165,233,.12);
  border:1px solid rgba(14,165,233,.3);
  border-radius:var(--r);
  padding:4px 12px;
  margin-bottom:14px;
}
.hero-area3 .title{
  font-size:clamp(26px,4vw,50px)!important;
  font-weight:800!important;
  line-height:1.15!important;
  letter-spacing:-.5px;
  color:#fff!important;
}
.hero-area3 .btn-primary{margin-top:22px}

/* ── Service feature cards ────────────────────────────────── */
.service-section{background:var(--bg);padding:24px 0}
.single-service,.single-service2{
  background:#fff;
  border-radius:var(--r);
  padding:24px 16px;
  border:1px solid var(--border);
  box-shadow:var(--shadow-sm);
  transition:var(--t);
  text-align:center;
}
.single-service:hover,.single-service2:hover{
  border-color:var(--primary);
  box-shadow:var(--shadow-md);
  transform:translateY(-3px);
}
.single-service img,.single-service2 img{
  width:52px;height:52px;
  object-fit:contain;
  margin:0 auto 12px;
  transition:var(--t);
}
.single-service:hover img,.single-service2:hover img{transform:scale(1.08)}
.single-service .content h6,.single-service2 .content h6{
  font-weight:700;font-size:13.5px;color:var(--text)
}
.single-service .content p,.single-service2 .content p{
  font-size:12.5px;color:var(--muted)
}

/* ── Section titles ───────────────────────────────────────── */
.section-title,.section-title2,.section-title3{margin-bottom:28px}
.section-title h2,.section-title2 h2,.section-title3 h2,
.section-title .h3,.section-title2 .h3,.section-title3 .h3{
  font-size:clamp(18px,2.2vw,24px)!important;
  font-weight:800!important;
  color:var(--text)!important;
  letter-spacing:-.3px;
  position:relative;
  padding-bottom:10px;
}
.section-title h2::after,.section-title2 h2::after,.section-title3 h2::after,
.section-title .h3::after,.section-title2 .h3::after,.section-title3 .h3::after{
  content:'';position:absolute;bottom:0;left:0;
  width:36px;height:3px;
  background:var(--primary);
  border-radius:2px;
}

/* Tab filters */
.popular-category .links{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:22px}
.popular-category .links a{
  font-size:12.5px;font-weight:600;
  padding:6px 16px;
  border-radius:var(--r);
  border:1.5px solid var(--border);
  color:var(--muted);
  background:#fff;
  transition:var(--t);
  cursor:pointer;
  text-decoration:none;
}
.popular-category .links a:hover,
.popular-category .links a.active{
  background:var(--primary);
  border-color:var(--primary);
  color:#fff;
  box-shadow:var(--shadow-sm);
}

/* ── Product cards ────────────────────────────────────────── */

/* Equal-height cards: make every slider-item a full-height flex column */
.popular-category-slider .slider-item,
.features-slider .slider-item,
.flash-deal-slider .slider-item,
.newproduct-slider .slider-item,
.home-blog-slider .slider-item {
  display:flex!important;
  flex-direction:column;
  height:100%;
}

/* The card itself stretches to fill the slider-item */
.popular-category-slider .product-card,
.features-slider .product-card,
.flash-deal-slider .product-card,
.newproduct-slider .product-card {
  display:flex;
  flex-direction:column;
  height:100%;
  flex:1;
}

/* Product thumb: fixed aspect ratio so images are uniform height */
.product-thumb{
  overflow:hidden;
  background:var(--bg);
  border-radius:var(--r) var(--r) 0 0;
  position:relative;
  aspect-ratio:4/3;
}
.product-thumb img{
  transition:transform .4s ease!important;
  width:100%;
  height:100%;
  object-fit:cover;
}

/* Card body grows to fill remaining space → prices always at bottom */
.product-card-body,
.product-card-inner{
  padding:12px 14px 14px;
  flex:1;
  display:flex;
  flex-direction:column;
}
.product-card-body .product-price,
.product-card-inner .product-price{
  margin-top:auto!important;
  padding-top:8px;
}

.product-card{
  background:#fff;
  border-radius:var(--r)!important;
  border:1px solid var(--border);
  box-shadow:var(--shadow-sm);
  overflow:hidden;
  transition:var(--t);
}
.product-card:hover{
  border-color:var(--primary);
  box-shadow:var(--shadow-lg);
  transform:translateY(-4px);
}
.product-card:hover .product-thumb img{transform:scale(1.06)}

.product-badge{
  border-radius:var(--r)!important;
  font-size:11px!important;
  font-weight:700!important;
  padding:3px 9px!important;
}
.product-badge2{background:var(--primary)!important}

.product-button-group{
  background:rgba(255,255,255,.95);
  border-radius:var(--r);
  gap:4px;padding:4px;
}
.product-button{
  width:32px!important;height:32px!important;
  border-radius:var(--r)!important;
  background:#fff!important;
  border:1px solid var(--border)!important;
  box-shadow:var(--shadow-sm)!important;
  transition:var(--t)!important;
  display:flex!important;align-items:center!important;justify-content:center!important;
}
.product-button:hover{
  background:var(--primary)!important;
  border-color:var(--primary)!important;
  color:#fff!important;
  box-shadow:var(--shadow-md)!important;
}
.product-category a{
  font-size:11px;font-weight:700;
  color:var(--primary)!important;
  text-transform:uppercase;letter-spacing:.6px;
}
.product-title{font-size:13.5px!important;font-weight:600!important;margin:5px 0!important;line-height:1.4!important}
.product-title a{color:var(--text)!important}
.product-title a:hover{color:var(--primary)!important}
.product-price{font-size:15px!important;font-weight:700!important;color:var(--primary)!important;margin-top:6px!important}
.product-price del{font-size:12.5px!important;color:var(--muted)!important;font-weight:400!important;margin-right:5px}

/* Stars */
.rating-stars i.filled{color:#f59e0b!important}
.rating-stars i{font-size:11.5px}

/* ── Banners ──────────────────────────────────────────────── */
.genius-banner{
  border-radius:var(--r);
  overflow:hidden;
  display:block;
  position:relative;
  box-shadow:var(--shadow-sm);
}
.genius-banner img{width:100%;transition:transform .45s ease!important}
.genius-banner:hover img{transform:scale(1.04)}
.genius-banner .inner-content h4{font-weight:700;font-size:15px}

/* ── Blog / Service slider ────────────────────────────────── */

/* Equal-height blog cards */
.home-blog-slider .slider-item{
  display:flex!important;
  flex-direction:column;
  height:100%;
}
.blog-post{
  border-radius:var(--r);
  overflow:hidden;
  background:#fff;
  border:1px solid var(--border);
  box-shadow:var(--shadow-sm);
  transition:var(--t);
  display:flex;
  flex-direction:column;
  height:100%;
  flex:1;
}
.blog-post:hover{border-color:var(--primary);box-shadow:var(--shadow-lg);transform:translateY(-4px)}

/* Fixed-ratio thumbnail: all blog images same height */
.blog-post .post-thumb{
  aspect-ratio:16/9;
  overflow:hidden;
}
.blog-post .post-thumb img{
  transition:transform .4s ease;
  width:100%;
  height:100%;
  object-fit:cover;
}
.blog-post:hover .post-thumb img{transform:scale(1.05)}

/* Post body grows to fill card — text always starts from same position */
.blog-post .post-body{
  padding:16px;
  flex:1;
  display:flex;
  flex-direction:column;
}
.blog-post .post-body p{
  flex:1;
}
.blog-post .post-title{
  font-size:14.5px!important;font-weight:700!important;
  color:var(--text)!important;line-height:1.4;margin-bottom:8px;
  transition:var(--t);
}
.blog-post:hover .post-title{color:var(--primary)!important}
.blog-post p{font-size:13px;color:var(--muted);line-height:1.6}

/* ── Brands ───────────────────────────────────────────────── */
.brand-section{background:var(--bg);padding:32px 0}
.brand-slider .slider-item a{
  display:flex;align-items:center;justify-content:center;
  padding:14px 20px;
  border-radius:var(--r);
  background:#fff;
  border:1px solid var(--border);
  box-shadow:var(--shadow-sm);
  transition:var(--t);
}
.brand-slider .slider-item a:hover{border-color:var(--primary);box-shadow:var(--shadow-md);transform:translateY(-2px)}
.brand-slider img{filter:grayscale(55%);transition:var(--t)}
.brand-slider .slider-item a:hover img{filter:grayscale(0)}

/* ── Footer ───────────────────────────────────────────────── */
.site-footer{
  background:linear-gradient(160deg,var(--dark) 0%,var(--dark-2) 100%)!important;
  color:rgba(255,255,255,.8)!important;
  padding:56px 0 28px!important;
  position:relative;
}
.site-footer::before{
  content:'';position:absolute;top:0;left:0;right:0;
  height:3px;
  background:linear-gradient(90deg,var(--primary),var(--accent));
}
.site-footer .widget-title{
  font-size:14px!important;font-weight:700!important;color:#fff!important;
  letter-spacing:.4px;margin-bottom:18px!important;
  padding-bottom:10px;border-bottom:1px solid rgba(255,255,255,.1);
}
.site-footer p,.site-footer li,.site-footer address{
  color:rgba(255,255,255,.65)!important;font-size:13px;line-height:1.85;
}
.site-footer a:not(.btn){color:rgba(255,255,255,.65)!important;transition:var(--t)}
.site-footer a:not(.btn):hover{color:var(--accent)!important;padding-left:3px}
.site-footer .widget-links ul li{
  border-bottom:1px solid rgba(255,255,255,.06);padding:5px 0;
}
.site-footer .widget-links ul li a::before{content:'→ ';opacity:.45}

/* Social icons */
.footer-social-links{display:flex;gap:8px;margin-top:16px}
.footer-social-links a{
  width:36px;height:36px;border-radius:var(--r);
  background:rgba(255,255,255,.08);
  display:flex!important;align-items:center;justify-content:center;
  border:1px solid rgba(255,255,255,.12);
  transition:var(--t);
}
.footer-social-links a:hover{
  background:var(--primary)!important;
  border-color:var(--primary);
  transform:translateY(-2px);
  box-shadow:0 6px 16px var(--primary-glow);
  padding-left:0!important;
}
.footer-social-links i{font-size:14px;color:rgba(255,255,255,.8)!important}

/* Footer newsletter */
.site-footer .subscriber-form .form-control{
  background:rgba(255,255,255,.08)!important;
  border:1px solid rgba(255,255,255,.18)!important;
  border-radius:var(--r)!important;
  color:#fff!important;
  font-family:'Ubuntu',sans-serif;
}
.site-footer .subscriber-form .form-control::placeholder{color:rgba(255,255,255,.4)}
.site-footer .subscriber-form .form-control:focus{border-color:var(--primary)!important;box-shadow:none}
.site-footer .input-group-addon{
  background:var(--primary);border:none;
  border-radius:0 var(--r) var(--r) 0;
  padding:0 14px;color:#fff;
}
.footer-copyright{
  border-top:1px solid rgba(255,255,255,.08)!important;
  margin-top:36px!important;padding-top:18px!important;
  text-align:center;
  color:rgba(255,255,255,.38)!important;font-size:12.5px!important;
}

/* ── Scroll to top ────────────────────────────────────────── */
.scroll-to-top-btn{
  width:40px!important;height:40px!important;
  border-radius:var(--r)!important;
  background:var(--primary)!important;
  color:#fff!important;
  box-shadow:var(--shadow-md)!important;
  display:flex!important;align-items:center;justify-content:center;
  transition:var(--t)!important;
}
.scroll-to-top-btn:hover{background:var(--primary-dark)!important;transform:translateY(-3px)!important}

/* ── WhatsApp ─────────────────────────────────────────────── */
.whatsapp-button{
  position:fixed!important;bottom:26px!important;left:22px!important;
  width:48px!important;height:48px!important;
  border-radius:var(--r)!important;
  background:#25d366!important;
  display:flex!important;align-items:center!important;justify-content:center!important;
  box-shadow:0 4px 18px rgba(37,211,102,.4)!important;
  z-index:9999!important;transition:var(--t)!important;
}
.whatsapp-button i{font-size:22px;color:#fff!important}
.whatsapp-button:hover{transform:translateY(-3px)!important;box-shadow:0 8px 24px rgba(37,211,102,.55)!important}

/* ── Cookie popup ─────────────────────────────────────────── */
.cookie-popup{border-radius:var(--r)!important;border:1px solid var(--border)!important}

/* ── Owl carousel ─────────────────────────────────────────── */
.owl-dot.active span{background:var(--primary)!important;width:20px!important;border-radius:3px!important}
.owl-dot span{background:var(--border)!important;transition:var(--t)!important}
.owl-nav button{
  background:#fff!important;border-radius:var(--r)!important;
  width:36px!important;height:36px!important;
  border:1px solid var(--border)!important;
  box-shadow:var(--shadow-sm)!important;transition:var(--t)!important;
}
.owl-nav button:hover{background:var(--primary)!important;border-color:var(--primary)!important;color:#fff!important}

/* ── Cart dropdown ────────────────────────────────────────── */
.toolbar-dropdown.cart-dropdown{border-radius:var(--r)!important;border:1px solid var(--border)!important;box-shadow:var(--shadow-lg)!important}

/* ── Responsive ───────────────────────────────────────────── */
@media(max-width:991px){
  .hero-area3,.hero-area3 .heroarea-slider .item{min-height:320px}
  .topbar{padding:10px 0}
  .site-branding img{max-height:40px}
}
@media(max-width:575px){
  .hero-area3 .title{font-size:22px!important}
  .section-title .h3,.section-title h2{font-size:18px!important}
}