/* ============================================
   ESSENTIAL TECH SERVICES — CUSTOM THEME
   Accent: Teal  |  Base: Dark Navy
   ============================================ */

:root {
  --ets-navy:     #0d2137;
  --ets-navy-dk:  #071626;
  --ets-navy-md:  #1a3a5c;
  --ets-teal:     #0d9488;   /* primary accent – teal-600 */
  --ets-teal-lt:  #14b8a6;   /* lighter teal */
  --ets-teal-pale:#e6f7f6;   /* very light teal bg */
  --ets-light:    #f5fffe;
  --ets-white:    #ffffff;
  --ets-text:     #1e293b;
  --ets-gray:     #64748b;

  --webex-primary-color:     #0d9488;
  --webex-primary-color-rgb: 13,148,136;
  --webex-primary-color2:    #0f766e;
  --webex-secondary-color:   #0d2137;
  --gradient-color1: linear-gradient(45deg,#0d9488,#0f766e);
  --gradient-color2: linear-gradient(45deg,#0f766e,#0d9488);
}

/* Remove ALL watermark background text */
.section-title-big_text { display: none !important; }

/* ── TOPBAR ── */
.header-topbar {
  background: #071626 !important;
  padding: 8px 0;
}
.header-topbar .topbar-info li,
.header-topbar .topbar-info li a,
.header-topbar .topbar-social li a {
  color: #7fa8c2 !important;
  font-size: 13px;
}
.header-topbar .topbar-info li a:hover,
.header-topbar .topbar-social li a:hover { color: #14b8a6 !important; }

/* ── NAVBAR ── */
nav.main-menu,
nav.main-menu.sticky {
  background: #0d2137 !important;
  box-shadow: 0 2px 16px rgba(0,0,0,.28) !important;
}
nav.main-menu .main-nav-menu > li > a {
  color: #cce4f0 !important;
  font-size: 14px;
  font-weight: 600;
  padding: 28px 18px !important;
  transition: color .2s;
}
nav.main-menu .main-nav-menu > li > a:hover { color: #14b8a6 !important; }

.header-contact-btn a,
.header-contact-btn a.theme-btn-6 {
  background: #0d9488 !important;
  color: #fff !important;
  border: none !important;
  border-radius: 6px !important;
  padding: 9px 22px !important;
  font-size: 14px;
  font-weight: 700;
  transition: background .2s;
}
.header-contact-btn a:hover { background: #0f766e !important; }
.main-menu-logo img { max-height: 44px; width: auto; object-fit: contain; }

/* Company name alongside logo */
.ets-brand-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none !important;
}
.ets-company-name {
  color: #d0eaf5;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.45;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

/* Product label above hero title */
.ets-product-label {
  color: #14b8a6;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  margin-bottom: 10px;
}

/* ── HERO ── */
.home_banner_01 {
  background: linear-gradient(135deg,#071626 0%,#0d2137 55%,#0e3a5e 100%) !important;
  position: relative;
  overflow: hidden;
  min-height: auto !important;
  height: auto !important;
}
/* Hide ALL decorative shapes from the template */
.home_banner_01 .shape1,
.home_banner_01 .shape2,
.home_banner_01 .image-layer { display: none !important; }

.home_banner_01 .slide-item {
  background: transparent !important;
  padding: 80px 0 70px;
  position: relative;
  z-index: 2;
  min-height: auto !important;
  height: auto !important;
}
/* Ensure Bootstrap container has proper side padding */
.home_banner_01 .container {
  padding-left: 15px !important;
  padding-right: 15px !important;
}
.home-carousel-title {
  color: #ffffff !important;
  font-size: clamp(28px,4.5vw,54px) !important;
  font-weight: 800 !important;
  line-height: 1.15 !important;
}
.home-carousel-title .text-obj2 { color: #14b8a6 !important; }
.home-carousel-text {
  color: #9ec4d8 !important;
  font-size: clamp(14px,1.5vw,17px) !important;
  max-width: 580px;
  line-height: 1.75;
  margin-top: 14px;
}

/* ── BUTTONS ── */
.theme-btn-1, a.theme-btn-1 {
  background: linear-gradient(45deg,#0d9488,#0f766e) !important;
  color: #fff !important; border: none !important;
  border-radius: 6px !important; font-weight: 700 !important;
  padding: 13px 30px !important;
  transition: opacity .2s, transform .15s !important;
}
.theme-btn-1:hover { opacity:.88 !important; transform:translateY(-1px); }

.theme-btn-6, a.theme-btn-6, button.theme-btn-6 {
  background: #0d9488 !important;
  color: #fff !important; border: none !important;
  border-radius: 6px !important; font-weight: 700 !important;
  padding: 13px 30px !important;
  transition: background .2s, transform .15s !important;
}
.theme-btn-6:hover { background: #0f766e !important; transform:translateY(-1px); }

.theme-btn-8, a.theme-btn-8 {
  background: transparent !important; color: #fff !important;
  border: 2px solid rgba(255,255,255,.4) !important;
  border-radius: 6px !important; font-weight: 600 !important;
  padding: 11px 26px !important;
  transition: border-color .2s, background .2s !important;
}
.theme-btn-8:hover {
  border-color: #14b8a6 !important;
  background: rgba(13,148,136,.15) !important;
}

.theme-btn-2, a.theme-btn-2 {
  background: #fff !important; color: #0f766e !important;
  font-weight: 700 !important; border-radius: 6px !important;
}
.theme-btn-2:hover { background: #d0faf6 !important; }

/* ── ABOUT ── */
#about { background: #ffffff !important; }
.about-us-section-style1 .about-image-box-style1 { display:none !important; }
.about-us-section-style1 .col-md-12.col-lg-8.col-xl-6.wow.fadeInRight { display:none !important; }
.about-us-section-style1 .col-md-12.col-lg-10.col-xl-6.wow.fadeInLeft {
  flex:0 0 100% !important; max-width:100% !important;
}
.about-us-section-style1 .signature { display:none; }

/* ── FEATURES  ──  clean icon cards */
#features { background: #f5fffe !important; }

/* Hide all the old service-style1 markup in case JS re-inserts it */
.service-style1, .service-section-style1 .service-wrapper { all: unset; display:block; }

/* New clean cards */
.ets-feature-col { padding: 16px; }

.ets-feature-card {
  background: #ffffff;
  border: 1px solid #d4ede9;
  border-radius: 14px;
  padding: 36px 28px 32px;
  height: 100%;
  box-shadow: 0 4px 20px rgba(13,148,136,.07);
  transition: transform .25s, box-shadow .25s, border-color .25s;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.ets-feature-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 14px 36px rgba(13,148,136,.16);
  border-color: #0d9488;
}

.ets-feature-icon-wrap {
  width: 64px; height: 64px;
  background: #e6f7f6;
  border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.ets-feature-icon-wrap i {
  font-size: 30px;
  color: #0d9488;
}

.ets-feature-title {
  font-size: 18px;
  font-weight: 700;
  color: #0d2137;
  margin: 0;
}

.ets-feature-desc {
  font-size: 14px;
  line-height: 1.7;
  color: #4a6070;
  margin: 0;
}

/* ── WHY CHOOSE US ── */
.why-choose-us-section-style1 {
  background: linear-gradient(135deg,#071626 0%,#0d2137 55%,#0e3a5e 100%) !important;
  padding: 90px 0 70px !important;
}

.ets-benefit-card {
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 14px;
  padding: 32px 24px;
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: 16px;
  transition: background .25s, border-color .25s, transform .25s;
}
.ets-benefit-card:hover {
  background: rgba(13,148,136,.13);
  border-color: rgba(20,184,166,.45);
  transform: translateY(-5px);
}
.ets-benefit-icon {
  width: 54px; height: 54px;
  background: rgba(20,184,166,.18);
  border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.ets-benefit-icon i { font-size: 22px; color: #14b8a6; }
.ets-benefit-title {
  font-size: 17px; font-weight: 700;
  color: #fff; margin: 0;
}
.ets-benefit-desc {
  font-size: 14px; line-height: 1.7;
  color: #9ec4d8; margin: 0;
}

/* ── CLIENTS ── */
#clients { background: #f5fffe !important; }
.project-item-style1 .project-item-thumb img { display:none !important; }
.project-item-style1 .project-item-details { background: #0d2137; }
.project-item-style1 .project-item-details-hover {
  background: linear-gradient(135deg,#0f766e,#0d9488);
}
.project-item-style1 {
  border-radius: 10px; overflow:hidden;
  box-shadow: 0 4px 20px rgba(0,0,0,.1);
  transition: transform .25s, box-shadow .25s;
}
.project-item-style1:hover {
  transform: translateY(-6px);
  box-shadow: 0 16px 40px rgba(13,148,136,.18);
}

/* ── CONTACT FORM ── */
#contact { background: #ffffff !important; padding: 80px 0; }
.request-a-call-back-form h2 { color: #0d2137 !important; font-weight:800; }
.request-a-call-back-form p { color: #64748b !important; }
.request-a-call-back-form .form-control,
.request-a-call-back-form select {
  border: 1.5px solid #b2ddd9 !important;
  border-radius: 6px !important;
  padding: 12px 16px !important;
  font-size: 14px; color: #1e293b;
  background: #f5fffe !important;
  transition: border-color .2s, box-shadow .2s;
  width: 100%;
}
.request-a-call-back-form .form-control:focus,
.request-a-call-back-form select:focus {
  border-color: #0d9488 !important;
  box-shadow: 0 0 0 3px rgba(13,148,136,.15) !important;
  outline:none;
}
#form-success {
  display:none; background:#ecfdf5; border:1px solid #6ee7b7;
  border-radius:8px; padding:16px 20px; color:#065f46;
  font-weight:600; margin-top:16px;
}

/* ── CTA BAR ── */
.call-to-action {
  background: linear-gradient(90deg,#0f766e 0%,#0d9488 100%) !important;
}
.call-to-action-title { color:#fff !important; }
.call-to-action-sub-title { color:rgba(255,255,255,.85) !important; }

/* ── FOOTER ── */
.footer { background: #071626 !important; }
.footer .widget-title { color:#e0f4f1 !important; }
.footer p, .footer address p { color:#5d8fa8 !important; font-size:14px; }
.footer .footer-widget-list li a { color:#5d8fa8 !important; font-size:14px; }
.footer .footer-widget-list li a:hover { color:#14b8a6 !important; }
.footer address a { color:#5d8fa8 !important; }
.footer address a:hover { color:#14b8a6 !important; }
.footer .newsletter-from input {
  background:rgba(255,255,255,.07) !important;
  border-color:rgba(255,255,255,.15) !important;
  color:#fff !important;
}
.footer .newsletter-from button { background:#0d9488 !important; }
.footer-copyright-area { border-top:1px solid rgba(255,255,255,.07); }
.footer-copyright-area span { color:#3d6478 !important; font-size:13px; }

/* ── GRADIENT TEXT ── */
.text-gradient-color {
  background: linear-gradient(45deg,#0d9488,#14b8a6) !important;
  -webkit-background-clip:text !important;
  -webkit-text-fill-color:transparent !important;
  background-clip:text !important;
}
.sub-title.text-gradient-color {
  font-weight:700; font-size:12px;
  letter-spacing:1.5px; text-transform:uppercase;
}

/* ── PROJECT SECTION BG ── */
.pos-rel.bg-no-repeat.bg-silver { background:#f5fffe !important; }

/* ────────────────────────────────────────────
   RESPONSIVE
──────────────────────────────────────────── */

/* Topbar: hide on small screens */
@media(max-width:992px){ .header-topbar { display:none; } }

/* Hero fluid */
@media(max-width:768px){
  .home_banner_01 .slide-item { padding:60px 0 50px; }
  .btn-box { display:flex; flex-direction:column; gap:10px; }
  .btn-box a { width:100%; text-align:center; display:block !important; }
}

/* Feature cards: full width on xs */
@media(max-width:576px){
  .ets-feature-col { padding:10px 0; }
  .ets-feature-card { padding:28px 20px; }
}

/* Benefits: 4 → 2 → 1 */
@media(max-width:767px){
  .why-choose-us-section-style1 .col-md-6 { flex:0 0 50% !important; max-width:50% !important; }
}
@media(max-width:480px){
  .why-choose-us-section-style1 .col-md-6 { flex:0 0 100% !important; max-width:100% !important; }
}

/* Clients: stack on mobile */
@media(max-width:767px){
  #clients .col-md-6 { flex:0 0 100% !important; max-width:100% !important; margin-bottom:24px; }
}

/* Contact form: single column on mobile */
@media(max-width:576px){
  #contact .col-lg-6, #contact .col-md-6,
  #contact .col-lg-8 {
    flex:0 0 100% !important; max-width:100% !important;
  }
}

/* Footer columns */
@media(max-width:768px){
  .footer .col-xl-2,.footer .col-xl-3,.footer .col-xl-4 {
    flex:0 0 50% !important; max-width:50% !important; margin-bottom:32px;
  }
}
@media(max-width:480px){
  .footer .col-xl-2,.footer .col-xl-3,.footer .col-xl-4 {
    flex:0 0 100% !important; max-width:100% !important;
  }
}

/* CTA bar: stack on mobile */
@media(max-width:768px){
  .call-to-action-inner { flex-direction:column; text-align:center; gap:20px; }
  .call-to-action-title { font-size:20px !important; }
}

/* Buttons: comfortable tap area */
@media(max-width:768px){
  .theme-btn-1,.theme-btn-6,.theme-btn-8 { padding:12px 22px !important; }
}