/* ==========================================================
   Share Advanced Tile & Carpet Deep Cleaning - style.css
   1. Variables  2. Base  3. Header  4. Hero / Banner
   5. Sections   6. Cards 7. Sliders 8. Forms / FAQ
   9. Blog       10. Footer 11. Responsive
   ========================================================== */

/* 1. Variables */
:root {
  --primary: #3d4c7f;
  --primary-dark: #2c375f;
  --navy: #252b45;
  --dark: #111111;
  --footer: #151830;
  --text: #4b5163;
  --heading: #1b1e2e;
  --light: #F5F6F7;
  --border: #e5e7ef;
  --white: #ffffff;
  --radius: 12px;
  --shadow: 0 10px 30px rgba(30, 40, 80, .08);
  --font: 'Inter', sans-serif;
}

/* 2. Base */
body {
  font-family: var(--font);
  color: var(--text);
  font-size: 15px;
  line-height: 1.65;
  overflow-x: hidden
}

h1,
h2,
h3,
h4,
h5,
h6 {
  color: var(--heading);
  font-weight: 500;
  line-height: 1.25
}

a {
  color: var(--primary);
  text-decoration: none;
  transition: .3s
}

a:hover {
  color: var(--primary-dark)
}

img {
  max-width: 100%;
  height: auto
}

.section {
  padding: 90px 0
}

.section-sm {
  padding: 60px 0
}

.bg-light-soft {
  background: var(--light)
}

.sub-title {
  font-size: 17px;
  color: var(--text);
  display: block;
  margin-bottom: 8px
}

.sub-title.with-icon {
  font-weight: 700;
  color: var(--heading)
}

.sub-title.with-icon i {
  color: var(--primary);
  margin-right: 6px
}

.section-title {
  font-size: 36px;
  margin-bottom: 20px
}

.btn-main {
  background: var(--primary);
  color: var(--white);
  border: 0;
  border-radius: 10px;
  padding: 11px 28px;
  font-size: 14px;
  font-weight: 500;
  transition: .3s;
  display: inline-flex;
  align-items: center;
  gap: 10px
}

.btn-main:hover {
  background: var(--primary-dark);
  color: var(--white)
}

.btn-outline-light-main {
  border: 1px solid rgba(255, 255, 255, .7);
  color: var(--white);
  border-radius: 8px;
  padding: 10px 26px;
  font-size: 14px
}

.btn-outline-light-main:hover {
  background: var(--white);
  color: var(--primary)
}

.btn-arrow {
  display: inline-flex;
  align-items: center
}

.btn-arrow .arrow {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--primary);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: -4px;
  border: 2px solid #fff
}

.btn-white {
  background: #fff;
  color: var(--primary)
}

.btn-white:hover {
  background: var(--light);
  color: var(--primary)
}

/* 3. Header */
.site-header {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100
}

.topbar {
  position: relative;
  height: 113px;
  background: #fff
}

.topbar::before {
  content: "";
  position: absolute;
  inset: 0 0 0 auto;
  width: 75%;
  background: var(--primary);
  clip-path: polygon(28px 0, 100% 0, 100% 100%, 0 100%)
}

.topbar .container {
  position: relative;
  height: 100%;
  display: flex;
  align-items: flex-start;
  padding-top: 12px
}

.logo {
  background: #fff;
  padding: 0 30px 0 0;
  position: relative;
  z-index: 2
}

.logo img {
  height: 68px
}

.topbar-info {
  color: #fff;
  font-size: 14px;
  line-height: 1.3;
  margin-left: 120px;
  display: flex;
  gap: 10px;
  padding-top: 12px
}

.social {
  display: flex;
  gap: 10px;
  margin-left: auto;
  padding-top: 14px
}

.social a {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .12);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 14px
}

.social a:hover {
  background: #fff;
  color: var(--primary)
}

.main-nav {
  background: var(--navy);
  border-radius: 10px;
  padding: 14px 42px;
  margin-top: -26px;
  position: relative;
  box-shadow: 0 15px 40px rgba(0, 0, 0, .25)
}

.main-nav .nav-link {
  color: #fff;
  font-size: 13px;
  padding: 8px 18px !important
}

.main-nav .nav-link.active,
.main-nav .nav-link:hover {
  color: #fff;
  font-weight: 600
}
/* Sticky Service Sidebar */
.service-sidebar {
    position: sticky;
    top: 20px;
    align-self: start;
    height: fit-content;
}
.main-nav .dropdown-menu {
  border: 0;
  border-radius: 10px;
  box-shadow: var(--shadow);
  padding: 10px 0
}

.main-nav .dropdown-item {
  font-size: 14px;
  padding: 8px 20px
}

.main-nav .dropdown-item:hover {
  background: var(--light);
  color: var(--primary)
}

.nav-phone {
  color: #fff;
  font-size: 13px;
  margin-right: 20px
}

.nav-phone:hover {
  color: #cfd6f5
}

.nav-cta {
  background: var(--primary);
  color: #fff;
  padding: 10px 30px;
  border-radius: 10px;
  font-size: 14px
}

.nav-cta:hover {
  background: #4c5d96;
  color: #fff
}

.navbar-toggler {
  border-color: rgba(255, 255, 255, .4)
}

.navbar-toggler-icon {
  filter: invert(1)
}

@media(min-width:992px) {
  .main-nav .dropdown:hover>.dropdown-menu {
    display: block;
    margin-top: 0
  }
}

.site-header.is-sticky {
  position: fixed;
  top: -113px;
  animation: slideDown .4s forwards
}

@keyframes slideDown {
  to {
    top: -87px
  }
}

/* 4. Hero / Page banner */
.hero {
  position: relative;
  min-height: 760px;
  background: url(../img/hero.jpg) center/cover no-repeat;
  display: flex;
  align-items: center;
  padding-top: 160px
}

.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(37, 43, 69, .92) 0%, rgba(37, 43, 69, .6) 45%, rgba(37, 43, 69, 0) 75%)
}

.hero .container {
  position: relative
}

.hero h1 {
  color: #fff;
  font-size: 44px;
  font-weight: 500;
  max-width: 560px
}

.hero p {
  color: rgba(255, 255, 255, .85);
  max-width: 480px;
  margin: 20px 0 30px
}

.page-banner {
  position: relative;
  padding: 240px 0 110px;
  text-align: center;
  background: url(../img/bannerimage.png) center/cover
}.post-main-img img {
    width: 100%;
    height: 100%;
    object-fit: unset;
    max-height: 576px;
}

.page-banner::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(61, 76, 127, .72)
}

.page-banner .container {
  position: relative
}

.page-banner h1 {
  color: #fff;
  font-size: 42px;
  margin-bottom: 8px
}
    /* Appointment Form - Forminator #207 */
    #forminator-module-207.forminator-ui {
      width: 100%;
      max-width: 100%;
    }

    .forminator-ui#forminator-module-207.forminator-design--default select.forminator-select2+.forminator-select .selection .select2-selection--single[role="combobox"] .select2-selection__rendered {
      color: #fff !important;
    }

    .forminator-ui#forminator-module-207.forminator-design--default .forminator-select2+.forminator-select .selection .select2-selection--single[role="combobox"] {
      border-color: #777771;
      border-radius: 7px;
      padding: 3px 0px;
      /* color: #000 !IMPORTANT; */
    }

    /* Labels hide (original me sirf placeholders hain) */
    #forminator-module-207.forminator-ui .forminator-label {
      position: absolute !important;
      width: 1px;
      height: 1px;
      overflow: hidden;
      clip: rect(0 0 0 0);
      white-space: nowrap;
    }

    /* Rows / columns spacing */
    #forminator-module-207.forminator-ui .forminator-row {
      margin-bottom: 16px !important;
    }

    #forminator-module-207.forminator-ui .forminator-row:last-child {
      margin-bottom: 0 !important;
    }

    #forminator-module-207.forminator-ui .forminator-row .forminator-col {
      padding-left: 8px;
      padding-right: 8px;
    }

    #forminator-module-207.forminator-ui .forminator-row {
      margin-left: -8px;
      margin-right: -8px;
    }

    /* Inputs, textarea, select */
    #forminator-module-207.forminator-ui input.forminator-input,
    #forminator-module-207.forminator-ui textarea.forminator-textarea,
    #forminator-module-207.forminator-ui select.forminator-select2,
    #forminator-module-207.forminator-ui select {
      width: 100% !important;
      min-height: 48px !important;
      padding: 12px 15px !important;
      background: transparent !important;
      border: 1px solid #5c5c66 !important;
      border-radius: 10px !important;
      color: #fff !important;
      font-family: inherit;
      font-size: 14px !important;
      box-shadow: none !important;
      box-sizing: border-box;
    }

    /* Textarea */
    #forminator-module-207.forminator-ui textarea.forminator-textarea {
      min-height: 85px !important;
      resize: vertical;
    }

    /* Placeholder */
    #forminator-module-207.forminator-ui ::placeholder {
      color: #b5b5b5 !important;
      opacity: 1;
    }

    /* Focus */
    #forminator-module-207.forminator-ui input:focus,
    #forminator-module-207.forminator-ui textarea:focus,
    #forminator-module-207.forminator-ui select:focus {
      border-color: #8b95c9 !important;
      outline: none !important;
    }

    /* Browser autofill ka light-blue background hatane ke liye */
    #forminator-module-207.forminator-ui input:-webkit-autofill {
      -webkit-box-shadow: 0 0 0 1000px #111 inset !important;
      -webkit-text-fill-color: #fff !important;
    }

    /* Select dropdown options */
    #forminator-module-207.forminator-ui select option {
      background: #111;
      color: #fff;
    }

    /* Character counter "0 / 180" hide */
    #forminator-module-207.forminator-ui .forminator-field-textarea .forminator-description {
      display: none !important;
    }

    /* Submit button - full width */
    #forminator-module-207.forminator-ui .forminator-button-submit {
      width: 100% !important;
      min-height: 48px;
      padding: 12px 28px !important;
      background-color: #3d4b80 !important;
      color: #fff !important;
      border: none !important;
      border-radius: 10px !important;
      font-size: 15px !important;
      font-weight: 500;
      cursor: pointer;
      transition: opacity .2s ease;
    }

    #forminator-module-207.forminator-ui .forminator-button-submit:hover {
      opacity: 0.9;
      background-color: #3d4b80 !important;
    }
  
.breadcrumb-nav {
  color: #fff;
  font-size: 15px
}

.breadcrumb-nav a {
  color: #fff
}

.breadcrumb-nav span {
  margin: 0 6px
}

.page-top-space {
  padding-top: 200px
}

/* 5. Sections */
.step-card {
  background: var(--primary);
  color: #fff;
  border-radius: var(--radius);
  padding: 24px;
  height: 100%;
  transition: .3s
}

.step-card:hover {
  transform: translateY(-6px);
  background: var(--primary-dark)
}
/* Services Dropdown Scroll */
.main-nav .dropdown-menu {
    max-height: 280px;
    overflow-y: auto;
    overflow-x: hidden;
}

/* Scrollbar Styling */
.main-nav .dropdown-menu::-webkit-scrollbar {
    width: 6px;
}

.main-nav .dropdown-menu::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 10px;
}

.main-nav .dropdown-menu::-webkit-scrollbar-thumb {
    background: #35436c;
    border-radius: 10px;
}

.main-nav .dropdown-menu::-webkit-scrollbar-thumb:hover {
    background: #252b45;
}
.step-card .num {
  font-size: 30px;
  font-weight: 500;
  border-bottom: 1px solid rgba(255, 255, 255, .2);
  padding-bottom: 16px;
  margin-bottom: 40px
}

.step-card h5 {
  color: #fff;
  font-size: 15px;
  font-weight: 600
}

.step-card p {
  font-size: 13px;
  color: rgba(255, 255, 255, .8);
  margin: 0
}

.step-card.light {
  background: var(--light);
  color: var(--text);
  border: 1px solid var(--border)
}

.step-card.light .num {
  border-color: var(--border);
  color: var(--heading)
}

.step-card.light h5 {
  color: var(--heading)
}

.step-card.light p {
  color: var(--text)
}

.step-card.light:hover {
  background: #fff;
  box-shadow: var(--shadow)
}

.about-box {
  border-top: 1px solid var(--border);
  padding-top: 40px
}

.about-img {
  border-radius: var(--radius);
  overflow: hidden
}

.about-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  min-height: 400px;
}

.about-content h2 {
  font-size: 30px
}

.about-content p {
  font-size: 14px
}

.rating-line {
  font-size: 12px;
  color: var(--text);
  display: flex;
  align-items: center;
  gap: 6px
}

.rating-line i {
  color: #f5b301
}

.testimonials {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(ellipse at 18% 50%,
      rgba(218, 229, 255, 0.75) 0%,
      rgba(218, 229, 255, 0) 65%),
    radial-gradient(ellipse at 82% 50%,
      rgba(255, 231, 215, 0.65) 0%,
      rgba(255, 231, 215, 0) 65%),
    #ffffff;
}

.why-section {
  position: relative;
  padding: 110px 0;
  background: url(../img/cta1\ \(1\).png) center/cover fixed
}

.why-section::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(20, 22, 40, .88)
}

.why-section .container {
  position: relative
}

.why-section h2 {
  color: #fff;
  font-size: 34px
}

.why-section .sub-title {
  color: #cfd3e6
}

.why-item i {
  font-size: 26px;
  color: #fff;
  margin-bottom: 12px;
  display: block
}

.why-item h6 {
  color: #fff;
  font-weight: 600;
  font-size: 15px
}

.why-item p {
  color: rgba(255, 255, 255, .7);
  font-size: 13px
}

.marquee {
  overflow: hidden;
  white-space: nowrap;
  padding: 50px 0
}

.marquee-track {
  display: inline-block;
  animation: marquee 25s linear infinite;
  font-size: 80px;
  font-weight: 400;
  color: #d4d7e3
}

.marquee-track span {
  margin: 0 30px
}

.marquee-track .star {
  color: var(--primary);
  font-size: 50px;
  vertical-align: middle
}

@keyframes marquee {
  from {
    transform: translateX(0)
  }

  to {
    transform: translateX(-50%)
  }
}

.area-pill {
  display: inline-block;
  border-radius: 50px;
  padding: 8px 34px;
  color: var(--heading);
  font-size: 20px;
  margin-bottom: 40px;
 
}

.stats-section {
  background: var(--navy);
  padding: 60px 0;
  color: #fff;
  text-align: center;
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

.stats-section::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(
      rgba(53, 67, 108, 0.75),
      rgba(53, 67, 108, 0.75)
    ),
    url("../img/status.png") center / 100% 100% no-repeat;
  z-index: -1;
}


.stats-section h3 {
  color: #fff;
  font-size: 42px;
  font-weight: 600;
  margin: 0
}

.stats-section p {
  color: rgba(255, 255, 255, .7);
  font-size: 13px;
  margin: 0
}

.mv-card {
  background: #F5F6F7;
  border-radius: var(--radius);
  padding: 28px;
  height: 100%
}

.mv-card h5 {
  font-size: 16px;
  font-weight: 600
}

.mv-card p {
  font-size: 13px;
  margin: 0
}

.choose-card {
  text-align: center
}

.choose-card img {
  border-radius: var(--radius);
  height: 240px;
  width: 100%;
  object-fit: cover
}

.choose-card h6 {
  color: #fff;
  font-weight: 600;
  margin: 14px 0 6px
}

.choose-card p {
  color: rgba(255, 255, 255, .75);
  font-size: 13px
}

.call-cta h3 {
  font-size: 26px
}

.call-cta .phone {
  font-size: 34px;
  color: #2563eb;
  font-weight: 600
}

.call-cta .phone i {
  font-size: 26px
}
.detail-content{
  max-width: 100%;
}
/* 6. Service cards */
.service-card {
  background: var(--light);
  border-radius: 21px;
  overflow: hidden;
  height: 100%;
  /* text-align: center; */
  transition: .3s
}

.service-card:hover {
  box-shadow: var(--shadow);
  transform: translateY(-5px);
  background: #fff
}

.service-card .thumb {
  height: 200px;
  overflow: hidden
}

.service-card .thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: .5s
}

.service-card:hover .thumb img {
  transform: scale(1.07)
}

.service-card .body {
  padding: 20px 30px 26px
}

.service-card h5 {
  font-size: 17px;
  font-weight: 700;
  color: var(--primary);
  margin-bottom: 10px
}

.service-card p {
  font-size: 15px;
  margin: 0
}

/* Service detail */
.service-sidebar .list-box {
  background: #fff;
  border-radius: var(--radius)
}

.service-sidebar .list-box a {
  display: block;
  padding: 11px 16px;
  border-radius: 6px;
  font-size: 13px;
  color: var(--text);
  background: var(--light);
  margin-bottom: 8px
}

.service-sidebar .list-box a.active,
.service-sidebar .list-box a:hover {
  background: var(--primary);
  color: #fff
}

.call-card {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  padding: 30px;
  min-height: 300px;
  background: url(../img/hero.jpg) center/cover;
  color: #fff;
  display: flex;
  flex-direction: column;
  justify-content: flex-end
}

.call-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(61, 76, 127, .55), rgba(37, 43, 69, .95))
}

.call-card>* {
  position: relative
}

.call-card .icon {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: #fff;
  color: var(--primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  margin-bottom: auto
}

.call-card h4 {
  color: #fff
}

.call-card a {
  color: #fff;
  font-size: 20px;
  font-weight: 600
}

.detail-content h3 {
  font-size: 24px
}

.detail-content ul {
  padding-left: 18px;
  font-size: 13px
}

.detail-content h6 {
  font-weight: 600
}

/* 7. Sliders */
.areas-wrap {
  position: relative
}

.areas-swiper {
  border-radius: var(--radius)
}

.areas-swiper img {
  width: 100%;
  height: 420px;
  object-fit: cover;
  border-radius: var(--radius)
}

.areas-prev,
.areas-next {
  position: absolute;
  top: 210px;
  transform: translateY(-50%);
  z-index: 5;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--primary);
  color: #fff;
  border: 0;
  display: flex;
  align-items: center;
  justify-content: center
}

.areas-prev {
  left: -21px
}

.areas-next {
  right: -21px
}

.areas-tabs {
  position: static !important;
  display: flex;
  gap: 12px;
  justify-content: center;
  margin-top: 20px;
  flex-wrap: wrap
}

.areas-tabs .swiper-pagination-bullet {
  width: auto;
  height: auto;
  border-radius: 6px;
  background: var(--primary);
  opacity: .85;
  color: #fff;
  font-size: 13px;
  padding: 10px 26px;
  margin: 0 !important
}

.areas-tabs .swiper-pagination-bullet-active {
  opacity: 1;
  background: var(--navy)
}

.testimonials {
  position: relative;
  overflow: hidden
}

.testimonials::before {
  content: "";
  position: absolute;
  width: 500px;
  height: 300px;
  left: 10%;
  top: 20%;
  background: radial-gradient(#e7ecff, transparent 70%);
  z-index: -1
}

.testi-swiper {
  margin-bottom: 20px
}

.testi-swiper .swiper-wrapper {
  transition-timing-function: linear
}

.testi-card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px;
  box-shadow: 0 4px 18px rgba(30, 40, 80, .05)
}

.testi-card .head {
  display: flex;
  gap: 10px;
  align-items: center;
  margin-bottom: 12px
}

.testi-card .head img {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover
}

.testi-card h6 {
  margin: 0;
  font-size: 13px;
  font-weight: 600
}

.testi-card small {
  font-size: 11px;
  color: #8a8fa3
}

.testi-card p {
  font-size: 12px;
  margin-bottom: 10px
}

.stars {
  color: #f5b301;
  font-size: 12px
}

.gallery-swiper {
  padding: 30px 0
}

.gallery-swiper .swiper-slide {
  width: 420px;
  height: 300px;
  border-radius: var(--radius);
  overflow: hidden
}

.gallery-swiper img {
  width: 100%;
  height: 100%;
  object-fit: cover
}

/* 8. Forms / FAQ */
.appointment-img {
  border-radius: 20px;
  overflow: hidden;
  height: 100%
}

.appointment-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  min-height: 400px
}

.appointment-box {
  background: var(--dark);
  border-radius: 20px;
  padding: 70px 54px;
  height: 100%;
  color: #fff
}

.appointment-box .sub-title {
  color: #fff
}

.appointment-box h2 {
  color: #fff;
  font-size: 38px;
  margin-bottom: 24px
}

.appointment-box .form-control,
.appointment-box .form-select {
  background-color: transparent;
  border: 1px solid rgba(255, 255, 255, .35);
  color: #fff;
  font-size: 12px;
  padding: 14px;
  border-radius: 8px
}

.appointment-box .form-select {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23ffffff' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e")
}

.appointment-box .form-select option {
  color: #000
}

.appointment-box .form-control::placeholder {
  color: rgba(255, 255, 255, .75)
}

.appointment-box .form-control:focus,
.appointment-box .form-select:focus {
  box-shadow: none;
  border-color: #fff
}

.appointment-box .btn-main {
  width: 100%;
  justify-content: center;
  padding: 13px
}

.contact-boxes {
  margin-top: -55px;
  position: relative;
  z-index: 2
}

.contact-box {
  background: var(--primary);
  color: #fff;
  border-radius: 8px;
  min-height: 108px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 20px;
  font-weight: 600;
  font-size: 14px;
  box-shadow: var(--shadow)
}

.contact-box a {
  color: #fff
}

.faq-section {
  position: relative
}

.faq-help {
  background: #fff;
  border-radius: var(--radius);
  padding: 30px;
  box-shadow: var(--shadow);
  margin-top: 30px
}

.faq-help img {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  object-fit: cover;
  margin-bottom: 20px
}

.faq-help h4 {
  font-size: 22px
}

.faq-help p {
  font-size: 12px
}

.faq-help .btn-main {
  width: 100%;
  justify-content: center
}

.faq .accordion-item {
  border: 0;
  background: #fff;
  border-radius: 8px !important;
  box-shadow: 0 6px 24px rgba(30, 40, 80, .07);
  margin-bottom: 16px;
  overflow: hidden
}

.faq .accordion-button {
  font-size: 13px;
  font-weight: 600;
  color: var(--heading);
  background: #fff;
  box-shadow: none;
  padding: 18px 20px
}

.faq .accordion-button::after {
  background-image: none;
  content: "\F64D";
  font-family: "bootstrap-icons";
  transform: none;
  font-size: 18px;
  width: auto;
  height: auto
}

.faq .accordion-button:not(.collapsed)::after {
  content: "\F659"
}

.faq .accordion-body {
  font-size: 12px;
  padding: 0 20px 18px
}

/* 9. Blog */
.blog-card .thumb {
  border-radius: var(--radius);
  overflow: hidden;
  height: 220px
}

.blog-card .thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: .5s
}

.blog-card:hover .thumb img {
  transform: scale(1.06)
}

.blog-card .date {
  font-size: 11px;
  color: var(--text);
  margin: 16px 0 8px;
  display: flex;
  gap: 6px;
  align-items: center
}

.blog-card .date i {
  color: var(--primary)
}

.blog-card h5 {
  font-size: 14px;
  font-weight: 600;
  color: var(--primary);
  line-height: 1.45
}

.blog-card h5 a {
  color: inherit
}

.blog-next {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--primary);
  color: #fff;
  border: 2px solid #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: -6px
}

.post-meta {
  font-size: 12px
}

.post-main-img {
  border-radius: var(--radius);
  overflow: hidden
}

.post-main-img img {
  width: 100%;
  height: 420px;
  object-fit: cover
}

.post-content {
  max-width: 880px;
  margin: 0 auto;
  font-size: 14px
}

.post-content h4 {
  font-size: 19px;
  font-weight: 600;
  margin-top: 40px
}

.post-content img {
  border-radius: var(--radius);
  width: 100%;
  object-fit: cover
}

.post-box {
  background: var(--light);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 18px;
  font-size: 13px;
  height: 100%
}

.post-quote {
  background: var(--light);
  border-left: 3px solid var(--primary);
  border-radius: 8px;
  padding: 22px 80px 22px 24px;
  font-style: italic;
  font-size: 13px;
  position: relative;
  margin: 30px 0
}

.post-quote::after {
  content: "\201D";
  position: absolute;
  right: 20px;
  bottom: -30px;
  font-size: 110px;
  color: #d5d8e4;
  font-style: normal
}

/* Footer */
.site-footer {
  background: var(--footer) url("../img/footer-bg.png") bottom / cover no-repeat;
  color: #fff;
  padding: 90px 0 0;
  position: relative;
  isolation: isolate;
}

.site-footer::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.70);
  z-index: -1;
}

.site-footer h5 {
  color: #fff;
  font-size: 19px;
  margin-bottom: 18px
}

.site-footer p,
.site-footer li,
.site-footer a {
  color: #fff;
  font-size: 14px
}

.site-footer ul {
  list-style: none;
  padding: 0;
  margin: 0
}

.site-footer ul li {
  margin-bottom: 8px
}

.site-footer a:hover {
  color: #aab6ec
}

.footer-logo img {
  height: 60px;
}

.site-footer .social a {
  background: rgba(255, 255, 255, .08)
}

.footer-divider {
  width: 270px;
  border-top: 1px solid rgba(255, 255, 255, .4);
  margin: 30px 0
}

.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, .3);
  margin-top: 70px;
  padding: 28px 0;
  font-size: 14px
}
/* Commercial Carpet Cleaning Table */
.service-content table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    margin: 25px 0;
    border: 1px solid #e1e5ed;
    border-radius: 10px;
    overflow: hidden;
    font-size: 15px;
    line-height: 1.6;
    background: #ffffff;
}

/* Table Header */
.service-content table thead th,
.service-content table th {
    background-color: #252B45;
    color: #ffffff;
    font-weight: 600;
    text-align: left;
    padding: 15px 14px;
    border: none;
}

/* Table Cells */
.service-content table td {
    padding: 14px;
    color: #35436C;
    border-bottom: 1px solid #e1e5ed;
    border-right: 1px solid #e1e5ed;
    vertical-align: top;
}

/* Alternating Row Colors */
.service-content table tbody tr:nth-child(even) {
    background-color: #f3f5f9;
}

.service-content table tbody tr:nth-child(odd) {
    background-color: #ffffff;
}

/* Hover Effect */
.service-content table tbody tr:hover {
    background-color: #e9edf7;
    transition: background-color 0.2s ease;
}

/* Remove Last Row Border */
.service-content table tbody tr:last-child td {
    border-bottom: none;
}

/* Remove Last Column Border */
.service-content table th:last-child,
.service-content table td:last-child {
    border-right: none;
}
.gallery-swiper .swiper-slide a {
    display: block;
    overflow: hidden;
    cursor: zoom-in;
}

.gallery-swiper .swiper-slide img {
    display: block;
    width: 100%;
    height: auto;
    transition: transform 0.3s ease;
}

.gallery-swiper .swiper-slide a:hover img {
    transform: scale(1.04);
}


/* 11. Responsive */
@media(max-width:1199px) {
  .topbar-info {
    margin-left: 40px
  }
}

@media(max-width:991px) {
  .section {
    padding: 65px 0
  }

  .topbar::before {
    width: 100%;
    clip-path: none
  }

  .topbar-info {
    display: none
  }

  .main-nav {
    padding: 10px 20px
  }

  .main-nav .navbar-collapse {
    padding: 10px 0
  }

  .nav-phone {
    display: block;
    margin: 10px 0
  }

  .hero h1 {
    font-size: 38px
  }

  .section-title {
    font-size: 28px
  }

  .appointment-box {
    padding: 40px 26px
  }

  .appointment-box h2 {
    font-size: 28px
  }

  .marquee-track {
    font-size: 50px
  }

  .areas-swiper img {
    height: 300px
  }

  .areas-prev,
  .areas-next {
    top: 150px
  }

  .areas-prev {
    left: 6px
  }

  .areas-next {
    right: 6px
  }

  .main-nav {
    background: unset;
    border-radius: 10px;
    padding: 14px 42px;
    margin-top: -46px;
    position: absolute;
    box-shadow: 0 15px 40px rgba(0, 0, 0, .25);
    width: 100%;
    max-width: 100%;
    left: 0;
  }

  .site-header {
    display: flex;
    align-items: center;
    background: unset !important;
    justify-content: space-between;
  }

  .logo img {
    padding: 0;
    padding-left: 10px;
  }

  .main-nav .navbar-collapse {
    background: #252b45;

    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
  }
}

@media (max-width: 991.98px) {
  .main-nav {
    background: #252b45 !important;
    border-radius: 0px;
  }

  .main-nav .navbar-collapse {
    background: #252b45;
    padding: 20px;
    margin-top: 0;
    border-radius: 0 0 10px 10px;
    box-shadow: none;
    width: 100%;
  }

  .main-nav .navbar-nav {
    width: 100%;
  }

  .main-nav .nav-link,
  .main-nav .nav-phone {
    color: #fff !important;
  }

  .main-nav .dropdown-menu {
    background: #35436c;
    border: none;
  }

  .main-nav .dropdown-item {
    color: #fff;
  }

  .main-nav .dropdown-item:hover {
    background: rgba(255, 255, 255, 0.12);
  }

  .main-nav .nav-cta {
    display: inline-block;
    margin-top: 12px;
  }

  .topbar {
    background: unset !important;
  }

  .topbar::before {
    display: none;
  }
}

/* Responsive Table */
@media (max-width: 768px) {
    .service-content table {
        display: block;
        width: 100%;
        overflow-x: auto;
        white-space: normal;
        font-size: 14px;
    }

    .service-content table th,
    .service-content table td {
        padding: 11px 12px;
        min-width: 130px;
    }
}
@media(max-width:575px) {
  .social {
    display: none
  }
 .section ,.why-section{
    padding: 40px 0
  }
	.site-footer{
		padding: 40px 0 20px 0;
	}
	.footer-bottom{
		margin: 10px 0;
	}
  .hero h1 {
    font-size: 32px
  }

  .page-banner {
    padding: 200px 0 90px
  }

  .page-banner h1 {
    font-size: 32px
  }

  .post-main-img img {
    height: 260px
  }

  .gallery-swiper .swiper-slide {
    width: 280px;
    height: 220px
  }
}