/* ==========================================================================
   GANEXA WEB SOLUTION — MAIN STYLESHEET
   Design: Kotar Template Inspired | Adapted for IT Company
   Fonts: Oswald (headings) + DM Sans (body)
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@400;500;600;700&family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;0,9..40,600;0,9..40,700;1,9..40,400&display=swap');

/* ---- Variables ---- */
:root {
  --theme-color:  #1B6CE8;
  --theme-dark:   #0D3A8C;
  --title-color:  #0F172A;
  --body-color:   #6B7280;
  --smoke-color:  #F5F7FB;
  --border-color: #E5E7EB;
  --white-color:  #FFFFFF;
  --dark-color:   #0F172A;
  --yellow-color: #F59E0B;
  --font-title:   'Oswald', sans-serif;
  --font-body:    'DM Sans', sans-serif;
  --transition:    all 0.4s ease;
  --shadow:       0 8px 40px rgba(0,0,0,0.08);
  --shadow-hover: 0 20px 60px rgba(27,108,232,0.18);
}

/* ---- Reset ---- */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior: smooth; overflow-x:hidden; }
body { font-family:var(--font-body); font-size:16px; line-height:1.75; color:var(--body-color); background:var(--white-color); overflow-x:hidden; }
a { text-decoration:none; transition:var(--transition); color:inherit; }
ul, ol { list-style:none; }
img { max-width:100%; display:block; }
button { border:none; background:none; cursor:pointer; font-family:var(--font-body); }
input, textarea, select { font-family:var(--font-body); outline:none; }

/* ---- Typography ---- */
h1,h2,h3,h4,h5,h6 { font-family:var(--font-title); color:var(--title-color); font-weight:700; line-height:1.15; }
h1 { font-size:72px; } h2 { font-size:52px; } h3 { font-size:36px; }
h4 { font-size:26px; } h5 { font-size:20px; } h6 { font-size:16px; }
p { margin-bottom:0; }

/* ---- Spacing ---- */
.section-space        { padding: 100px 0; }
.section-space-top    { padding-top: 100px; }
.section-space-bottom { padding-bottom: 100px; }
.pt-70 { padding-top:70px; }
.pb-70 { padding-bottom:70px; }

/* ---- BG Colors ---- */
.bg-smoke  { background: var(--smoke-color); }
.bg-dark   { background: var(--dark-color); }
.bg-white  { background: var(--white-color); }
.text-theme { color: var(--theme-color) !important; }
.text-white { color: var(--white-color) !important; }

/* ================================================================
   SECTION TITLE
   ================================================================ */
.title-area { margin-bottom:50px; }
.title-area.text-center .sub-title::before { margin-right:8px; }
.title-area.text-center .sub-title::after  { margin-left:8px; }

.sub-title {
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--font-title); font-size:13px; font-weight:600;
  letter-spacing:3px; text-transform:uppercase;
  color:var(--theme-color); margin-bottom:14px;
}
.sub-title::before,
.sub-title::after { content:''; display:inline-block; }
.sub-title::before { width:36px; height:2px; background:var(--theme-color); }
.sub-title::after  { width:8px; height:8px; background:var(--theme-color); border-radius:50%; }

.sec-title {
  font-family:var(--font-title); font-size:52px; font-weight:700;
  color:var(--title-color); line-height:1.12; text-transform:uppercase;
}
.sec-title .text-theme { color:var(--theme-color); }
.sec-title.text-white  { color:var(--white-color); }
.sec-title.text-white .text-theme { color:#93c5fd; }

.sub-title.white-style { color:rgba(255,255,255,0.8); }
.sub-title.white-style::before,
.sub-title.white-style::after { background:rgba(255,255,255,0.8); }

/* ================================================================
   BUTTONS
   ================================================================ */
.th-btn {
  display:inline-flex; align-items:center; gap:12px;
  font-family:var(--font-title); font-size:14px; font-weight:600;
  text-transform:uppercase; letter-spacing:2px;
  color:var(--white-color); background:var(--theme-color);
  border:2px solid var(--theme-color);
  padding:15px 38px; border-radius:0;
  position:relative; overflow:hidden; cursor:pointer; z-index:1;
  transition:color 0.4s, border-color 0.4s;
}
.th-btn::before {
  content:''; position:absolute; inset:0;
  background:var(--dark-color);
  transform:scaleX(0); transform-origin:right;
  transition:transform 0.4s ease; z-index:-1;
}
.th-btn:hover::before { transform:scaleX(1); transform-origin:left; }
.th-btn:hover { color:var(--white-color); border-color:var(--dark-color); }
.th-btn .btn-icon {
  width:28px; height:28px; border-radius:50%;
  background:rgba(255,255,255,0.2);
  display:flex; align-items:center; justify-content:center;
  font-size:11px; transition:background 0.4s;
}
.th-btn:hover .btn-icon { background:var(--theme-color); }

/* Outline on dark bg */
.th-btn.style2 {
  background:transparent;
  color:var(--white-color);
  border-color:rgba(255,255,255,0.45);
}
.th-btn.style2::before { background:var(--white-color); }
.th-btn.style2:hover   { color:var(--theme-color); border-color:var(--white-color); }
.th-btn.style2:hover .btn-icon { color:var(--theme-color); background:var(--smoke-color); }

/* Outline on light bg */
.th-btn.style3 {
  background:transparent;
  color:var(--theme-color);
  border-color:var(--theme-color);
}
.th-btn.style3::before { background:var(--theme-color); }
.th-btn.style3:hover   { color:var(--white-color); border-color:var(--theme-color); }

/* ================================================================
   PRELOADER
   ================================================================ */
#preloader {
  position:fixed; inset:0;
  background:var(--dark-color);
  z-index:99999;
  display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:20px;
  transition:opacity 0.6s ease, visibility 0.6s ease;
}
#preloader.loaded { opacity:0; visibility:hidden; }
.preloader-ring {
  width:64px; height:64px;
  border:3px solid rgba(255,255,255,0.08);
  border-top-color:var(--theme-color);
  border-radius:50%;
  animation:spin 1s linear infinite;
}
.preloader-text { color:rgba(255,255,255,0.5); font-size:12px; letter-spacing:3px; text-transform:uppercase; font-family:var(--font-title); }
@keyframes spin { to { transform:rotate(360deg); } }

/* ================================================================
   TOP BAR
   ================================================================ */
.top-bar {
  background:var(--dark-color);
  padding:10px 0;
  border-bottom:1px solid rgba(255,255,255,0.05);
  position:relative; z-index:1001;
}
.top-bar-info { display:flex; align-items:center; gap:24px; flex-wrap:wrap; }
.top-contact-item {
  display:flex; align-items:center; gap:8px;
  font-size:13px; color:rgba(255,255,255,0.65);
  transition:color 0.3s;
}
.top-contact-item i { color:var(--theme-color); font-size:12px; }
.top-contact-item:hover { color:var(--theme-color); }
.top-divider { width:1px; height:14px; background:rgba(255,255,255,0.12); }
.top-right { display:flex; align-items:center; gap:6px; }
.top-social {
  width:30px; height:30px;
  border:1px solid rgba(255,255,255,0.12);
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  color:rgba(255,255,255,0.55); font-size:12px;
  transition:var(--transition);
}
.top-social:hover { background:var(--theme-color); border-color:var(--theme-color); color:#fff; }

/* ================================================================
   HEADER / NAVBAR
   ================================================================ */
#mainHeader {
  position:fixed; top:0; left:0; right:0;
  z-index:1000; transition:var(--transition);
}
/* Offset header below the topbar */
#mainHeader.below-topbar { top:44px; }
.sticky-wrapper {
  background:transparent;
  transition:all 0.4s ease;
}
.sticky-wrapper.scrolled,
.sticky-wrapper.inner-page {
  background:var(--white-color);
  box-shadow:0 4px 30px rgba(0,0,0,0.07);
  top:0 !important;
}
/* When header scrolls past topbar */
#mainHeader.scrolled-header { top:0; }

.navbar-row {
  display:flex; align-items:center; justify-content:space-between;
  padding:18px 0;
  transition:padding 0.4s ease;
}
.scrolled .navbar-row,
.inner-page .navbar-row { padding:12px 0; }

.site-logo { display:inline-flex; align-items:center; }
.site-logo img {
  height:80px; width:auto;
  transition:all 0.4s ease;
  filter:brightness(0) invert(1);
}
.scrolled .site-logo img,
.inner-page .site-logo img {
  height:80px;
  filter:none;
}

/* Nav menu */
.nav-menu { display:flex; align-items:center; gap:0; }
.nav-item  { position:relative; }
.nav-link-btn {
  display:block;
  font-family:var(--font-title); font-size:14px; font-weight:600;
  text-transform:uppercase; letter-spacing:0.5px;
  padding:10px 16px;
  color:rgba(255,255,255,0.9);
  transition:color 0.3s;
  position:relative;
}
.sticky-wrapper.scrolled .nav-link-btn,
.sticky-wrapper.inner-page .nav-link-btn { color:var(--title-color); }
.nav-link-btn::after {
  content:''; position:absolute;
  bottom:6px; left:16px;
  width:0; height:2px;
  background:var(--theme-color);
  transition:width 0.3s ease;
}
.nav-link-btn:hover  { color:var(--theme-color); }
.nav-link-btn.active { color:var(--theme-color); }
.nav-link-btn:hover::after,
.nav-link-btn.active::after { width:calc(100% - 32px); }

/* Dropdown arrow */
.nav-item.has-sub > .nav-link-btn { padding-right:20px; }
.nav-item.has-sub > .nav-link-btn::before {
  content:'\f107'; font-family:'Font Awesome 6 Free'; font-weight:900;
  position:absolute; right:6px; top:50%; transform:translateY(-50%);
  font-size:11px; transition:transform 0.3s;
}
.nav-item.has-sub:hover > .nav-link-btn::before { transform:translateY(-50%) rotate(180deg); }

/* Dropdown */
.dropdown-nav {
  position:absolute; top:calc(100% + 8px); left:0;
  min-width:230px;
  background:var(--white-color);
  box-shadow:0 10px 50px rgba(0,0,0,0.13);
  opacity:0; visibility:hidden;
  transform:translateY(12px);
  transition:all 0.3s ease;
  z-index:200;
  border-top:3px solid var(--theme-color);
}
.nav-item:hover > .dropdown-nav { opacity:1; visibility:visible; transform:translateY(0); }
.dropdown-link {
  display:flex; align-items:center; gap:10px;
  padding:12px 20px;
  font-size:14px; font-weight:500;
  color:var(--title-color);
  border-bottom:1px solid var(--border-color);
  transition:all 0.3s;
}
.dropdown-link:hover, .dropdown-link.active {
  color:var(--theme-color); background:var(--smoke-color); padding-left:28px;
}
.dropdown-link i { color:var(--theme-color); font-size:13px; width:16px; }
.dropdown-nav li:last-child .dropdown-link { border-bottom:none; }

/* Nested flyout submenu (e.g. Digital Marketing sub-services) */
.dropdown-nav li.has-sub2 { position:relative; }
.dropdown-nav li.has-sub2 > .dropdown-link { justify-content:space-between; }
.dropdown-nav li.has-sub2 > .dropdown-link::after {
  content:'\f105'; font-family:'Font Awesome 6 Free'; font-weight:900;
  font-size:11px; margin-left:8px;
}
.dropdown-nav-sub {
  position:absolute; top:0; left:100%;
  min-width:300px;
  background:var(--white-color);
  box-shadow:0 10px 50px rgba(0,0,0,0.13);
  opacity:0; visibility:hidden;
  transform:translateX(12px);
  transition:all 0.3s ease;
  z-index:210;
  border-top:3px solid var(--theme-color);
}
.dropdown-nav li.has-sub2:hover > .dropdown-nav-sub { opacity:1; visibility:visible; transform:translateX(0); }
.dropdown-nav-sub li:last-child .dropdown-link { border-bottom:none; }

/* Header right */
.header-right { display:flex; align-items:center; gap:14px; }
.mobile-toggle {
  display:none;
  flex-direction:column; gap:5px;
  cursor:pointer; padding:4px;
}
.mobile-toggle span {
  display:block; height:2px; border-radius:2px;
  background:rgba(255,255,255,0.9);
  transition:var(--transition);
}
.mobile-toggle span:nth-child(1) { width:28px; }
.mobile-toggle span:nth-child(2) { width:22px; }
.mobile-toggle span:nth-child(3) { width:28px; }
.scrolled .mobile-toggle span,
.inner-page .mobile-toggle span { background:var(--title-color); }
.mobile-toggle.open span:nth-child(1) { transform:rotate(45deg) translate(5px,5px); width:28px; }
.mobile-toggle.open span:nth-child(2) { opacity:0; }
.mobile-toggle.open span:nth-child(3) { transform:rotate(-45deg) translate(5px,-5px); width:28px; }

/* Mobile nav drawer */
.mobile-nav {
  position:fixed; inset:0;
  background:rgba(15,23,42,0.97);
  z-index:9000;
  transform:translateX(-100%);
  transition:transform 0.4s ease;
  padding:24px 28px;
  overflow-y:auto;
  display:flex; flex-direction:column;
}
.mobile-nav.is-open { transform:translateX(0); }
.mobile-nav-head {
  display:flex; align-items:center; justify-content:space-between;
  margin-bottom:36px;
}
.mobile-nav-logo img { height:44px; filter:brightness(0) invert(1); }
.mobile-nav-close {
  width:42px; height:42px;
  background:var(--theme-color); border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  color:#fff; font-size:18px; cursor:pointer;
}
.mobile-menu > li { border-bottom:1px solid rgba(255,255,255,0.07); }
.mobile-menu > li > a {
  display:block; padding:14px 0;
  font-family:var(--font-title); font-size:17px; font-weight:600;
  color:rgba(255,255,255,0.85); text-transform:uppercase; letter-spacing:1px;
}
.mobile-menu > li > a:hover { color:var(--theme-color); }
.mobile-sub { padding-left:16px; margin-bottom:8px; }
.mobile-sub a { display:block; padding:8px 0; color:rgba(255,255,255,0.55); font-size:14px; }
.mobile-sub a:hover { color:var(--theme-color); }
.mobile-nav-footer { margin-top:auto; padding-top:30px; }
.mobile-contact-info { color:rgba(255,255,255,0.5); font-size:14px; }
.mobile-contact-info a { color:var(--theme-color); }

/* ================================================================
   HERO SECTION
   ================================================================ */
.hero-section { position:relative; height:100vh; min-height:680px; }
.hero-swiper   { width:100%; height:100%; }
.hero-slide    { position:relative; width:100%; height:100vh; display:flex; align-items:center; }

.hero-bg {
  position:absolute; inset:0;
  background-size:cover; background-position:center;
  transform:scale(1.06);
  transition:transform 8s ease;
}
.swiper-slide-active .hero-bg { transform:scale(1); }

.hero-overlay {
  position:absolute; inset:0;
  background:linear-gradient(100deg, rgba(15,23,42,0.9) 45%, rgba(15,23,42,0.5) 100%);
}

.hero-content  { position:relative; z-index:2; padding-top:80px; max-width:760px; }
.hero-label {
  display:inline-flex; align-items:center; gap:10px;
  color:var(--theme-color); font-family:var(--font-title);
  font-size:13px; font-weight:600; letter-spacing:3px; text-transform:uppercase;
  margin-bottom:18px;
}
.hero-label::before { content:''; width:38px; height:2px; background:var(--theme-color); }
.hero-title {
  font-family:var(--font-title);
  font-size:clamp(44px,7vw,90px);
  font-weight:700; color:#fff;
  line-height:1.05; text-transform:uppercase;
  margin-bottom:22px;
}
.hero-title .text-theme { color:var(--theme-color); }
.hero-desc { font-size:17px; color:rgba(255,255,255,0.7); max-width:580px; margin-bottom:38px; line-height:1.75; }
.hero-btns  { display:flex; flex-wrap:wrap; gap:14px; }

/* Swiper custom nav */
.hero-nav {
  position:absolute; bottom:40px; right:50px;
  z-index:10; display:flex; gap:10px;
}
.hero-prev, .hero-next {
  width:52px; height:52px; border-radius:50%;
  background:rgba(255,255,255,0.08);
  border:1px solid rgba(255,255,255,0.25);
  color:#fff; font-size:14px;
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; transition:var(--transition);
}
.hero-prev:hover, .hero-next:hover { background:var(--theme-color); border-color:var(--theme-color); }
/* Pagination */
.hero-pagination { position:absolute; bottom:55px; left:50%; transform:translateX(-50%); z-index:10; display:flex; gap:8px; }
.hero-pagination .swiper-pagination-bullet { width:10px; height:10px; background:rgba(255,255,255,0.35); opacity:1; border-radius:50%; transition:all 0.3s; }
.hero-pagination .swiper-pagination-bullet-active { background:var(--theme-color); width:28px; border-radius:10px; }

/* ================================================================
   PROCESS SECTION (How We Work)
   ================================================================ */
.process-section { background:var(--smoke-color); }
.process-card {
  position:relative; overflow:hidden;
  padding:40px 32px; background:var(--white-color);
  border:1px solid var(--border-color);
  box-shadow:var(--shadow);
  transition:var(--transition);
  height:100%;
}
.process-card::before {
  content:''; position:absolute; bottom:0; left:0; right:0;
  height:4px; background:var(--theme-color);
  transform:scaleX(0); transform-origin:left; transition:transform 0.4s ease;
}
.process-card:hover { transform:translateY(-6px); box-shadow:var(--shadow-hover); }
.process-card:hover::before { transform:scaleX(1); }
.process-num-bg {
  position:absolute; top:16px; right:20px;
  font-family:var(--font-title); font-size:80px; font-weight:700;
  color:rgba(0,0,0,0.035); line-height:1;
}
.process-icon-wrap {
  width:72px; height:72px; border-radius:50%;
  background:var(--smoke-color);
  display:flex; align-items:center; justify-content:center;
  font-size:30px; color:var(--theme-color);
  margin-bottom:22px; transition:var(--transition);
}
.process-card:hover .process-icon-wrap { background:var(--theme-color); color:#fff; }
.process-step-num {
  display:inline-block;
  font-family:var(--font-title); font-size:13px; font-weight:700;
  text-transform:uppercase; letter-spacing:2px;
  color:var(--theme-color); margin-bottom:10px;
}
.process-card-title { font-size:22px; font-weight:700; color:var(--title-color); margin-bottom:12px; }
.process-arrow {
  display:none; /* shown via ::after on desktop */
}
/* Arrow connector between cards */
@media (min-width:992px) {
  .process-col { position:relative; }
  .process-col:not(:last-child)::after {
    content:'\f178'; font-family:'Font Awesome 6 Free'; font-weight:900;
    position:absolute; top:50%; right:-18px; transform:translateY(-80px);
    font-size:24px; color:var(--theme-color); opacity:0.4;
    z-index:1;
  }
}

/* ================================================================
   ABOUT SECTION
   ================================================================ */
.about-img-wrap {
  position:relative;
  padding-bottom:80px; padding-right:80px;
  display:block;
  max-width:100%;
}
.about-main-img {
  width:100%; max-width:520px; height:490px;
  object-fit:cover;
  box-shadow:0 20px 60px rgba(0,0,0,0.12);
}
.about-sec-img {
  position:absolute; bottom:0; right:0;
  width:240px; height:260px; object-fit:cover;
  border:8px solid var(--white-color);
  box-shadow:0 10px 40px rgba(0,0,0,0.1);
}
.about-exp {
  position:absolute; top:24px; left:-28px;
  width:130px; height:130px; border-radius:50%;
  background:var(--theme-color);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; color:#fff;
  box-shadow:0 10px 40px rgba(27,108,232,0.4);
  z-index:2;
}
.about-exp-num { font-family:var(--font-title); font-size:40px; font-weight:700; line-height:1; }
.about-exp-label { font-size:11px; font-weight:600; letter-spacing:0.5px; text-transform:uppercase; opacity:0.9; margin-top:2px; }

.about-feature-item {
  display:flex; align-items:flex-start; gap:16px;
  padding:18px 0; border-bottom:1px solid var(--border-color);
}
.about-feature-item:last-of-type { border-bottom:none; }
.about-f-icon {
  width:54px; height:54px; min-width:54px; border-radius:12px;
  background:var(--smoke-color);
  display:flex; align-items:center; justify-content:center;
  font-size:22px; color:var(--theme-color);
  transition:var(--transition);
}
.about-feature-item:hover .about-f-icon { background:var(--theme-color); color:#fff; }
.about-f-title { font-family:var(--font-title); font-size:17px; font-weight:600; color:var(--title-color); margin-bottom:4px; }
.about-f-text  { font-size:14px; color:var(--body-color); }

.about-stat-row { display:flex; gap:0; margin-top:32px; padding-top:32px; border-top:1px solid var(--border-color); }
.about-stat { flex:1; padding:0 20px; text-align:center; border-right:1px solid var(--border-color); }
.about-stat:first-child { padding-left:0; }
.about-stat:last-child  { border-right:none; }
.about-stat-n { font-family:var(--font-title); font-size:42px; font-weight:700; color:var(--theme-color); line-height:1; }
.about-stat-l { font-size:13px; font-weight:600; color:var(--body-color); text-transform:uppercase; letter-spacing:0.5px; margin-top:4px; }

/* ================================================================
   MARQUEE
   ================================================================ */
.marquee-wrap { background:var(--dark-color); padding:18px 0; overflow:hidden; border-top:2px solid rgba(255,255,255,0.05); }
.marquee-track { display:flex; gap:0; animation:marqueeRoll 28s linear infinite; width:max-content; }
.marquee-wrap:hover .marquee-track { animation-play-state:paused; }
.marquee-item {
  display:inline-flex; align-items:center; gap:14px;
  padding:0 30px;
  font-family:var(--font-title); font-size:17px; font-weight:600;
  text-transform:uppercase; letter-spacing:1px;
  color:rgba(255,255,255,0.7); white-space:nowrap;
}
.marquee-item i { color:var(--theme-color); font-size:14px; }
.marquee-dot { width:6px; height:6px; background:var(--theme-color); border-radius:50%; }
@keyframes marqueeRoll { to { transform:translateX(-50%); } }

/* ================================================================
   SERVICES SECTION
   ================================================================ */
.service-card {
  position:relative; overflow:hidden;
  background:var(--white-color);
  border:1px solid var(--border-color);
  padding:42px 34px;
  transition:var(--transition);
  height:100%;
}
/* Blue fill on hover */
.service-card::after {
  content:''; position:absolute; inset:0;
  background:var(--theme-color);
  transform:scaleY(0); transform-origin:bottom;
  transition:transform 0.45s cubic-bezier(0.4,0,0.2,1);
  z-index:0;
}
.service-card:hover { transform:translateY(-6px); box-shadow:0 24px 60px rgba(27,108,232,0.25); }
.service-card:hover::after { transform:scaleY(1); }
.service-card > * { position:relative; z-index:1; }

.srv-icon-box {
  width:74px; height:74px; border-radius:16px;
  background:var(--smoke-color);
  display:flex; align-items:center; justify-content:center;
  font-size:32px; color:var(--theme-color);
  margin-bottom:26px; transition:var(--transition);
}
.service-card:hover .srv-icon-box { background:rgba(255,255,255,0.15); color:#fff; }

.srv-bg-num {
  position:absolute; bottom:12px; right:18px;
  font-family:var(--font-title); font-size:90px; font-weight:700;
  color:rgba(0,0,0,0.03); line-height:1; z-index:1;
  transition:color 0.4s;
}
.service-card:hover .srv-bg-num { color:rgba(255,255,255,0.05); }

.srv-title { font-size:22px; font-weight:700; color:var(--title-color); margin-bottom:14px; transition:color 0.4s; }
.service-card:hover .srv-title { color:#fff; }
.srv-text  { font-size:15px; color:var(--body-color); line-height:1.75; transition:color 0.4s; }
.service-card:hover .srv-text { color:rgba(255,255,255,0.8); }
.srv-link {
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--font-title); font-size:13px; font-weight:600;
  text-transform:uppercase; letter-spacing:1.5px;
  color:var(--theme-color); margin-top:22px; transition:color 0.4s;
}
.service-card:hover .srv-link { color:rgba(255,255,255,0.9); }
.srv-link i { transition:transform 0.3s; }
.srv-link:hover i { transform:translateX(4px); }

/* ================================================================
   COUNTER SECTION
   ================================================================ */
.counter-section {
  position:relative;
  padding:90px 0;
  background-size:cover; background-position:center; background-attachment:fixed;
}
.counter-overlay { position:absolute; inset:0; background:rgba(15,23,42,0.87); }
.counter-card {
  position:relative; z-index:1; text-align:center; padding:40px 12px;
  border-right:1px solid rgba(255,255,255,0.1);
}
.col-6:last-child .counter-card,
.col-lg-3:last-child .counter-card { border-right:none; }
.counter-icon-top { font-size:42px; color:rgba(255,255,255,0.1); margin-bottom:14px; }
.counter-n { font-family:var(--font-title); font-size:58px; font-weight:700; color:var(--theme-color); line-height:1; margin-bottom:10px; }
.counter-suffix { font-size:42px; }
.counter-label {
  font-family:var(--font-title); font-size:15px; font-weight:600;
  text-transform:uppercase; letter-spacing:2px; color:rgba(255,255,255,0.7);
}

/* ================================================================
   WHY CHOOSE US
   ================================================================ */
.why-img-wrap { position:relative; }
.why-main-img { width:100%; height:480px; object-fit:cover; }
.why-badge {
  position:absolute; bottom:30px; right:-24px;
  background:var(--theme-color);
  padding:28px 26px; color:#fff; text-align:center;
  box-shadow:0 10px 40px rgba(27,108,232,0.35);
}
.why-badge-num { font-family:var(--font-title); font-size:42px; font-weight:700; line-height:1; }
.why-badge-text { font-size:13px; font-weight:500; opacity:0.9; text-transform:uppercase; letter-spacing:0.5px; margin-top:4px; }

.skill-row { margin-bottom:22px; }
.skill-header { display:flex; justify-content:space-between; margin-bottom:8px; }
.skill-name  { font-family:var(--font-title); font-size:14px; font-weight:600; text-transform:uppercase; letter-spacing:0.5px; color:var(--title-color); }
.skill-pct   { font-family:var(--font-title); font-size:14px; font-weight:700; color:var(--theme-color); }
.skill-track { height:6px; background:var(--border-color); border-radius:0; overflow:visible; }
.skill-fill  {
  height:100%; background:var(--theme-color);
  width:0; border-radius:0;
  transition:width 1.6s cubic-bezier(0.4,0,0.2,1);
  position:relative;
}
.skill-fill::after {
  content:''; position:absolute;
  right:-6px; top:50%; transform:translateY(-50%);
  width:16px; height:16px; border-radius:50%;
  background:var(--theme-color);
  border:3px solid var(--white-color);
  box-shadow:0 0 0 2px var(--theme-color);
}
.why-check-item {
  display:flex; align-items:center; gap:12px;
  margin-bottom:12px;
}
.why-check-item i { color:var(--theme-color); font-size:15px; }
.why-check-item span { font-weight:500; color:var(--title-color); font-size:15px; }

/* ================================================================
   PROJECTS / PORTFOLIO
   ================================================================ */
.filter-row { display:flex; flex-wrap:wrap; gap:10px; margin-bottom:44px; }
.filter-btn {
  font-family:var(--font-title); font-size:13px; font-weight:600;
  text-transform:uppercase; letter-spacing:1px;
  padding:10px 26px;
  background:var(--white-color); color:var(--title-color);
  border:1px solid var(--border-color);
  cursor:pointer; transition:var(--transition);
}
.filter-btn:hover,
.filter-btn.is-active { background:var(--theme-color); color:#fff; border-color:var(--theme-color); }

.project-card { position:relative; overflow:hidden; }
.project-card img { width:100%; height:270px; object-fit:cover; display:block; transition:transform 0.55s ease; }
.project-card:hover img { transform:scale(1.07); }
.project-overlay-box {
  position:absolute; inset:0;
  background:linear-gradient(to top, rgba(15,23,42,0.96) 0%, rgba(15,23,42,0.2) 60%, transparent 100%);
  opacity:0; transition:opacity 0.4s ease;
  padding:22px;
  display:flex; flex-direction:column; justify-content:flex-end;
}
.project-card:hover .project-overlay-box { opacity:1; }
.project-cat-tag {
  display:inline-block;
  background:var(--theme-color); color:#fff;
  font-size:11px; font-weight:700;
  text-transform:uppercase; letter-spacing:1px;
  padding:4px 14px; margin-bottom:8px;
  width:fit-content;
}
.project-card-title { color:#fff; font-family:var(--font-title); font-size:20px; font-weight:700; }
.project-link-btn {
  position:absolute; top:14px; right:14px;
  width:44px; height:44px; border-radius:50%;
  background:var(--theme-color); color:#fff;
  display:flex; align-items:center; justify-content:center;
  font-size:14px;
  transform:scale(0) rotate(-45deg);
  transition:all 0.35s ease;
}
.project-card:hover .project-link-btn { transform:scale(1) rotate(0); }

/* Hide filtered items */
.mix-hidden { display:none !important; }

/* ================================================================
   TEAM SECTION
   ================================================================ */
.team-card {
  background:var(--white-color);
  border:1px solid var(--border-color);
  overflow:hidden;
  transition:var(--transition);
}
.team-card:hover { transform:translateY(-6px); box-shadow:var(--shadow-hover); }
.team-img-wrap { position:relative; overflow:hidden; }
.team-img-wrap img { width:100%; height:330px; object-fit:cover; transition:transform 0.5s; }
.team-card:hover .team-img-wrap img { transform:scale(1.04); }
.team-hover-socials {
  position:absolute; inset:0;
  background:rgba(15,23,42,0.72);
  display:flex; align-items:center; justify-content:center; gap:10px;
  opacity:0; transition:opacity 0.4s;
}
.team-card:hover .team-hover-socials { opacity:1; }
.t-social {
  width:40px; height:40px; border-radius:50%;
  background:#fff; color:var(--theme-color);
  display:flex; align-items:center; justify-content:center;
  font-size:14px; transition:all 0.3s;
  transform:translateY(18px);
}
.team-card:hover .t-social { transform:translateY(0); }
.team-card:hover .t-social:nth-child(2) { transition-delay:0.05s; }
.team-card:hover .t-social:nth-child(3) { transition-delay:0.10s; }
.team-card:hover .t-social:nth-child(4) { transition-delay:0.15s; }
.t-social:hover { background:var(--theme-color); color:#fff; }
.team-body { padding:20px 22px; border-top:3px solid transparent; transition:border-color 0.4s; }
.team-card:hover .team-body { border-color:var(--theme-color); }
.team-member-name { font-family:var(--font-title); font-size:20px; font-weight:700; color:var(--title-color); margin-bottom:4px; }
.team-role { font-size:13px; font-weight:600; text-transform:uppercase; letter-spacing:1px; color:var(--theme-color); }

/* ================================================================
   TESTIMONIALS
   ================================================================ */
.testi-card {
  background:var(--white-color);
  border:1px solid var(--border-color);
  padding:38px 32px; position:relative;
  box-shadow:var(--shadow); transition:var(--transition);
}
.testi-card:hover { box-shadow:var(--shadow-hover); transform:translateY(-4px); }
.testi-quote-mark { font-size:90px; line-height:1; color:var(--theme-color); opacity:0.1; font-family:serif; position:absolute; top:6px; left:22px; }
.testi-stars { color:var(--yellow-color); font-size:14px; letter-spacing:2px; margin-bottom:16px; }
.testi-body { font-style:italic; font-size:15.5px; line-height:1.8; color:var(--body-color); margin-bottom:26px; position:relative; z-index:1; }
.testi-foot { display:flex; align-items:center; gap:14px; }
.testi-avatar { width:56px; height:56px; border-radius:50%; object-fit:cover; border:3px solid var(--smoke-color); }
.testi-person-name { font-family:var(--font-title); font-size:18px; font-weight:700; color:var(--title-color); margin-bottom:2px; }
.testi-company-name { font-size:13px; font-weight:500; color:var(--theme-color); }

.testi-nav { display:flex; gap:10px; }
.t-nav-btn {
  width:50px; height:50px; border-radius:50%;
  background:var(--smoke-color); border:1px solid var(--border-color);
  display:flex; align-items:center; justify-content:center;
  font-size:15px; color:var(--title-color); cursor:pointer; transition:var(--transition);
}
.t-nav-btn:hover { background:var(--theme-color); color:#fff; border-color:var(--theme-color); }
.testi-pagination { display:flex; gap:8px; align-items:center; }
.testi-pagination .swiper-pagination-bullet { width:10px; height:10px; background:var(--border-color); opacity:1; transition:all 0.3s; }
.testi-pagination .swiper-pagination-bullet-active { background:var(--theme-color); width:26px; border-radius:10px; }

/* ================================================================
   CTA SECTION
   ================================================================ */
.cta-section {
  position:relative; overflow:hidden;
  background:linear-gradient(135deg, var(--theme-color) 0%, var(--theme-dark) 100%);
  padding:80px 0;
}
.cta-section::before {
  content:''; position:absolute;
  top:-100px; right:-60px;
  width:320px; height:320px;
  background:rgba(255,255,255,0.05); border-radius:50%;
}
.cta-section::after {
  content:''; position:absolute;
  bottom:-80px; left:-50px;
  width:260px; height:260px;
  background:rgba(255,255,255,0.04); border-radius:50%;
}
.cta-heading {
  font-family:var(--font-title); font-size:44px; font-weight:700;
  color:#fff; text-transform:uppercase; line-height:1.15;
}
.cta-sub { color:rgba(255,255,255,0.75); font-size:16px; margin-top:10px; }
.cta-phone {
  display:inline-flex; align-items:center; gap:10px;
  color:#fff; font-family:var(--font-title); font-size:17px; font-weight:600;
  padding:14px 30px; border:2px solid rgba(255,255,255,0.4);
  transition:var(--transition); text-transform:uppercase;
}
.cta-phone:hover { background:rgba(255,255,255,0.12); color:#fff; }
.cta-phone i { color:rgba(255,255,255,0.7); font-size:20px; }
.cta-content { position:relative; z-index:1; }

/* ================================================================
   FOOTER
   ================================================================ */
footer { background:var(--dark-color); }
.footer-top {
  padding:80px 0 40px;
}
.footer-logo { height:50px; filter:brightness(0) invert(1); margin-bottom:22px; }
.footer-brand-name { display:inline-block; margin-bottom:22px; line-height:1; }
.footer-brand-name .f-brand-main { display:block; font-family:var(--font-title); font-size:36px; font-weight:700; letter-spacing:4px; text-transform:uppercase; color:var(--theme-color); }
.footer-brand-name .f-brand-sub { display:block; font-family:var(--font-title); font-size:13px; font-weight:500; letter-spacing:7px; text-transform:uppercase; color:rgba(255,255,255,0.75); margin-top:5px; }
.footer-about-text { color:rgba(255,255,255,0.5); font-size:14.5px; line-height:1.8; margin-bottom:26px; }
.footer-socials { display:flex; gap:8px; }
.footer-s-link {
  width:38px; height:38px;
  background:rgba(255,255,255,0.06);
  border:1px solid rgba(255,255,255,0.1);
  display:flex; align-items:center; justify-content:center;
  color:rgba(255,255,255,0.55); font-size:13px;
  transition:var(--transition);
}
.footer-s-link:hover { background:var(--theme-color); border-color:var(--theme-color); color:#fff; }

.footer-widget-title {
  font-family:var(--font-title); font-size:20px; font-weight:700;
  color:#fff; text-transform:uppercase; letter-spacing:1px;
  padding-bottom:14px; margin-bottom:24px;
  border-bottom:2px solid rgba(255,255,255,0.08);
  position:relative;
}
.footer-widget-title::after {
  content:''; position:absolute;
  bottom:-2px; left:0; width:44px; height:2px;
  background:var(--theme-color);
}

.footer-links li { margin-bottom:10px; }
.footer-links a {
  display:inline-flex; align-items:center; gap:8px;
  color:rgba(255,255,255,0.5); font-size:14.5px;
  transition:all 0.3s;
}
.footer-links a::before { content:'\f105'; font-family:'Font Awesome 6 Free'; font-weight:900; color:var(--theme-color); font-size:12px; }
.footer-links a:hover { color:var(--theme-color); padding-left:6px; }

.footer-contact-list li { display:flex; gap:14px; margin-bottom:18px; }
.f-contact-icon { width:40px; height:40px; min-width:40px; background:rgba(27,108,232,0.15); display:flex; align-items:center; justify-content:center; color:var(--theme-color); font-size:14px; }
.f-contact-info { font-size:14px; color:rgba(255,255,255,0.5); line-height:1.6; }
.f-contact-info strong { display:block; color:rgba(255,255,255,0.8); font-size:13px; text-transform:uppercase; letter-spacing:0.5px; margin-bottom:2px; }

.footer-bottom {
  background:#06111f;
  padding:16px 0;
  border-top:1px solid rgba(255,255,255,0.07);
}
.footer-copy { color:rgba(255,255,255,0.55); font-size:13.5px; }
.footer-copy a { color:var(--theme-color); }
.footer-policy { display:flex; gap:20px; }
.footer-policy a { color:rgba(255,255,255,0.45); font-size:13.5px; transition:color 0.3s; }
.footer-policy a:hover { color:var(--theme-color); }

/* ================================================================
   PAGE HEADER / BREADCRUMB (Inner Pages)
   ================================================================ */
.page-header-section {
  position:relative;
  padding:170px 0 90px;
  background-size:cover; background-position:center;
}
.page-header-overlay { position:absolute; inset:0; background:rgba(15,23,42,0.82); }
.page-header-content { position:relative; z-index:2; }
.page-header-title {
  font-family:var(--font-title); font-size:62px; font-weight:700;
  color:#fff; text-transform:uppercase; margin-bottom:16px;
}
.breadcrumb-list { display:flex; align-items:center; gap:0; flex-wrap:wrap; }
.breadcrumb-list li {
  display:flex; align-items:center;
  font-size:14px; font-weight:600; text-transform:uppercase;
  letter-spacing:1px; color:rgba(255,255,255,0.55);
}
.breadcrumb-list li::after { content:'/'; margin:0 10px; color:var(--theme-color); opacity:0.8; }
.breadcrumb-list li:last-child::after { display:none; }
.breadcrumb-list a { color:rgba(255,255,255,0.55); }
.breadcrumb-list a:hover { color:var(--theme-color); }
.breadcrumb-list li.current { color:var(--theme-color); }

/* ================================================================
   SERVICE DETAIL PAGE
   ================================================================ */
.srv-detail-icon-box { width:90px; height:90px; background:var(--theme-color); border-radius:18px; display:flex; align-items:center; justify-content:center; font-size:42px; color:#fff; margin-bottom:28px; }
.srv-detail-heading { font-family:var(--font-title); font-size:42px; font-weight:700; text-transform:uppercase; color:var(--title-color); margin-bottom:18px; }
.srv-detail-text { font-size:15.5px; color:var(--body-color); line-height:1.8; margin-bottom:18px; }
.srv-checklist li { display:flex; align-items:flex-start; gap:12px; padding:12px 0; border-bottom:1px solid var(--border-color); color:var(--title-color); font-weight:500; font-size:15px; }
.srv-checklist li:last-child { border-bottom:none; }
.srv-checklist li i { color:var(--theme-color); margin-top:3px; min-width:14px; font-size:13px; }

/* Sidebar */
.sidebar-card { background:var(--smoke-color); padding:32px 28px; margin-bottom:28px; }
.sidebar-heading {
  font-family:var(--font-title); font-size:20px; font-weight:700;
  color:var(--title-color); text-transform:uppercase;
  padding-bottom:14px; margin-bottom:22px;
  border-bottom:2px solid var(--theme-color);
}
.sidebar-nav-link {
  display:flex; align-items:center; justify-content:space-between;
  padding:13px 18px; background:#fff; border:1px solid var(--border-color);
  color:var(--title-color); font-weight:600; font-size:14.5px;
  margin-bottom:8px; transition:var(--transition);
}
.sidebar-nav-link:hover, .sidebar-nav-link.active { background:var(--theme-color); color:#fff; border-color:var(--theme-color); }
.sidebar-nav-link i { color:var(--theme-color); font-size:12px; }
.sidebar-nav-link:hover i, .sidebar-nav-link.active i { color:#fff; }
.sidebar-cta { background:var(--theme-color); padding:36px 28px; text-align:center; }
.sidebar-cta h4 { color:#fff; font-family:var(--font-title); text-transform:uppercase; margin-bottom:12px; }
.sidebar-cta p { color:rgba(255,255,255,0.75); font-size:14.5px; margin-bottom:22px; }
.sidebar-phone-num { display:flex; align-items:center; justify-content:center; gap:8px; color:#fff; font-size:20px; font-weight:700; font-family:var(--font-title); }
.sidebar-phone-num i { color:rgba(255,255,255,0.7); }

/* ================================================================
   CONTACT PAGE
   ================================================================ */
.contact-info-card { background:var(--smoke-color); padding:36px 30px; height:100%; }
.c-info-icon { width:60px; height:60px; background:var(--theme-color); display:flex; align-items:center; justify-content:center; color:#fff; font-size:22px; margin-bottom:20px; }
.c-info-title { font-family:var(--font-title); font-size:20px; font-weight:700; text-transform:uppercase; color:var(--title-color); margin-bottom:10px; }
.c-info-text { color:var(--body-color); font-size:15px; line-height:1.7; }
.c-info-text a { color:var(--body-color); } .c-info-text a:hover { color:var(--theme-color); }

.contact-form-box { background:var(--smoke-color); padding:48px 44px; }
.form-label { font-family:var(--font-title); font-size:13px; font-weight:600; text-transform:uppercase; letter-spacing:0.5px; color:var(--title-color); margin-bottom:8px; display:block; }
.form-ctrl {
  width:100%; background:#fff;
  border:1px solid var(--border-color);
  padding:14px 20px;
  font-size:15px; color:var(--title-color);
  border-radius:0; transition:var(--transition);
  display:block; margin-bottom:20px;
}
.form-ctrl:focus { border-color:var(--theme-color); box-shadow:0 0 0 3px rgba(27,108,232,0.1); }
.form-ctrl::placeholder { color:#9CA3AF; }
textarea.form-ctrl { resize:vertical; min-height:140px; }
select.form-ctrl { appearance:none; cursor:pointer; }
.form-msg { display:none; padding:12px 20px; margin-top:12px; border-radius:0; font-weight:500; }
.form-msg.success { display:block; background:#d1fae5; color:#065f46; border-left:4px solid #10b981; }
.form-msg.error   { display:block; background:#fee2e2; color:#991b1b; border-left:4px solid #ef4444; }

.form-label-custom { font-family:var(--font-title); font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:0.7px; color:var(--title-color); margin-bottom:8px; display:block; }

/* Contact Sidebar */
.contact-sidebar {}
.cs-box { background:var(--smoke-color); padding:30px 28px; }
.cs-box-title { font-family:var(--font-title); font-size:19px; font-weight:700; text-transform:uppercase; color:var(--title-color); margin-bottom:18px; padding-bottom:12px; border-bottom:2px solid var(--theme-color); }
.contact-check-list li { display:flex; align-items:center; gap:10px; padding:8px 0; border-bottom:1px solid var(--border-color); color:var(--title-color); font-size:15px; }
.contact-check-list li:last-child { border-bottom:none; }
.contact-check-list li i { color:var(--theme-color); font-size:14px; min-width:16px; }
.cs-response-item { display:flex; align-items:center; justify-content:space-between; padding:10px 0; border-bottom:1px solid var(--border-color); }
.cs-response-item:last-child { border-bottom:none; }
.cs-resp-label { display:flex; align-items:center; gap:8px; font-size:14.5px; color:var(--body-color); }
.cs-resp-label i { color:var(--theme-color); width:16px; }
.cs-resp-value { font-size:14px; font-weight:700; color:var(--title-color); font-family:var(--font-title); text-transform:uppercase; letter-spacing:0.5px; }
.cs-social { display:inline-flex; align-items:center; gap:7px; padding:8px 16px; background:#fff; border:1px solid var(--border-color); color:var(--title-color); font-size:13.5px; font-weight:600; transition:var(--transition); }
.cs-social:hover { background:var(--theme-color); border-color:var(--theme-color); color:#fff; }
.contact-map-wrap iframe { display:block; width:100%; }

/* ================================================================
   BACK TO TOP
   ================================================================ */
#backToTop {
  position:fixed; bottom:28px; right:28px;
  width:48px; height:48px;
  background:var(--theme-color); color:#fff;
  display:flex; align-items:center; justify-content:center;
  font-size:16px;
  opacity:0; visibility:hidden; transform:translateY(12px);
  transition:var(--transition); z-index:990;
  box-shadow:0 4px 20px rgba(27,108,232,0.4);
}
#backToTop.show { opacity:1; visibility:visible; transform:translateY(0); }
#backToTop:hover { background:var(--dark-color); }

/* ================================================================
   RESPONSIVE
   ================================================================ */
@media (max-width:1199.98px) {
  h2,.sec-title { font-size:44px; }
  .hero-title { font-size:58px; }
  .section-space { padding:80px 0; }
  .about-main-img { height:440px; }
  .cta-heading { font-size:38px; }
}

@media (max-width:991.98px) {
  .section-space { padding:65px 0; }
  .nav-menu, .header-right .th-btn { display:none; }
  .mobile-toggle { display:flex; }
  h2,.sec-title { font-size:38px; }
  .page-header-title { font-size:48px; }
  /* About image fix — prevent right-padding overflow */
  .about-img-wrap { display:block; width:100%; padding-right:0; padding-bottom:60px; margin-bottom:30px; }
  .about-main-img { max-width:100%; width:100%; height:360px; }
  .about-sec-img { width:180px; height:190px; right:16px; }
  .about-exp { left:0; }
  /* Why choose us */
  .why-badge { right:0; }
  .why-main-img { height:360px; width:100%; }
  .why-img-wrap { display:block; width:100%; padding-right:0; padding-bottom:60px; margin-bottom:30px; }
  .cta-heading { font-size:32px; }
  /* counter border on mobile — only show between items in same row */
  .counter-card { border-right:none; border-bottom:1px solid rgba(255,255,255,0.1); }
  .col-6:nth-child(odd) .counter-card { border-right:1px solid rgba(255,255,255,0.1); }
  .col-6:nth-last-child(-n+2) .counter-card { border-bottom:none; }
  /* Hero nav reposition */
  .hero-nav { right:16px; bottom:24px; }
}

@media (max-width:767.98px) {
  .section-space { padding:55px 0; }
  h2,.sec-title { font-size:30px; }
  .hero-title { font-size:38px; }
  .hero-desc { font-size:14.5px; }
  .hero-content { padding-top:60px; }
  .hero-nav { right:12px; bottom:16px; gap:6px; }
  .hero-prev,.hero-next { width:40px; height:40px; font-size:12px; }
  .hero-pagination { bottom:44px; }
  /* About */
  .about-img-wrap { padding-bottom:50px; }
  .about-main-img { height:280px; }
  .about-sec-img { width:150px; height:160px; right:8px; bottom:0; }
  .about-exp { width:110px; height:110px; bottom:52px; left:8px; }
  .about-exp-num { font-size:28px; }
  .about-exp-text { font-size:11px; }
  .about-stat-row { flex-wrap:wrap; gap:12px; }
  .about-stat { min-width:45%; border-right:none !important; padding:8px 0; }
  /* Counter */
  .counter-n { font-size:48px; }
  .counter-card { margin-bottom:20px; padding:30px 20px; }
  /* Service */
  .service-card { padding:28px 20px; }
  .srv-bg-num { font-size:70px; }
  /* Why */
  .why-main-img { height:280px; }
  .why-img-wrap { padding-bottom:50px; }
  .why-badge { right:8px; }
  /* Skills */
  .skill-label-row { flex-wrap:wrap; }
  /* Team */
  .team-img-wrap img { height:260px; }
  /* Testimonials */
  .testi-card { padding:26px 20px; }
  /* Page header */
  .page-header-title { font-size:34px; }
  .page-header-section { padding:140px 0 60px; }
  /* CTA */
  .cta-heading { font-size:26px; }
  .cta-section { padding:55px 0; }
  /* Contact */
  .contact-form-box { padding:28px 18px; }
  .contact-info-card { padding:28px 20px; }
  /* Footer */
  .footer-top { padding:55px 0 20px; }
  .footer-policy { margin-top:8px; }
  /* Sidebar */
  .contact-sidebar .cs-box { padding:24px 18px; }
}

@media (max-width:575.98px) {
  .section-space { padding:45px 0; }
  h2,.sec-title { font-size:26px; }
  .hero-title { font-size:30px; }
  .hero-label { font-size:11px; letter-spacing:2px; }
  .hero-desc { font-size:14px; margin-bottom:26px; }
  .hero-btns { flex-direction:column; }
  .hero-btns .th-btn { width:100%; justify-content:center; }
  .hero-nav { display:none; }
  /* Process */
  .process-card { padding:28px 20px; }
  .process-num-bg { font-size:60px; }
  /* About */
  .about-img-wrap { padding-bottom:40px; }
  .about-main-img { height:220px; }
  .about-sec-img { width:120px; height:130px; right:4px; }
  .about-exp { width:90px; height:90px; bottom:42px; }
  .about-exp-num { font-size:24px; }
  /* Services */
  .service-card { padding:26px 18px; }
  .srv-icon-box { width:60px; height:60px; font-size:24px; }
  /* Counter */
  .counter-n { font-size:40px; }
  .counter-card { padding:24px 16px; }
  /* Why */
  .why-main-img { height:220px; }
  .why-badge { width:110px; height:110px; font-size:11px; }
  /* Team */
  .team-img-wrap img { height:240px; }
  /* Testimonials */
  .testi-card { padding:22px 16px; }
  .testi-quote-mark { font-size:60px; }
  /* Page header */
  .page-header-title { font-size:28px; }
  .page-header-section { padding:130px 0 50px; }
  /* Footer */
  .footer-logo { height:40px; }
  /* Sidebar detail */
  .sidebar-card { padding:26px 18px; }
  .contact-form-box { padding:22px 14px; }
  /* Contact sidebar */
  .cs-box { padding:22px 16px; }
  /* Marquee */
  .marquee-item { padding:0 18px; font-size:13px; }
}