@import url("fonts.css");

* {
      padding: 0;
      margin: 0;
      box-sizing: border-box;
}


:root {
      --fixpro-font-two: "Titillium Web", sans-serif;
}

body {
      overflow-x: hidden;
      font-family: "Creato Display", sans-serif;
}




.section-space {
      padding-top: 80px;
      padding-bottom: 80px;
}

.section-space-top {
      padding-top: 100px;
}

.section-space-bottom {
      padding-bottom: 100px;
}

.section-bg-color {
      background-color: #e3e3e0;

}

.section-title-big {
      font-size: clamp(22px, 5vw, 40px);

      font-weight: 600;
      color: #417ee4;

}

.section-title-big2 {
      font-size: clamp(22px, 5vw, 40px);

      font-weight: 600;
      color: #fff;

}


.section-title-small {
      font-size: clamp(10px, 3.5vw, 14px);
      font-weight: 500;
}


.section-my-60 {
      margin-top: 60px;
      margin-bottom: 60px;
}

.section-mt-60 {
      margin-top: 60px;
}

.section-mb-60 {
      margin-bottom: 60px;
}

.section-title-area {
      margin-bottom: 20px;
}

.section-sub-title {
      text-transform: uppercase;
      position: relative;
      color: #2957a4;
      margin-bottom: 8px;
      font-size: 16px;
      font-weight: 400;
}

.theme-btn {
      background: #3b82f6;
      color: #fff;
      padding: 12px 25px;
      text-decoration: none;
      border-radius: 25px;
      font-weight: 600;
      display: inline-block;
      margin-top: 15px;
}

/* Mobile View */
@media (max-width: 576px) {
      .theme-btn {
            padding: 10px 20px;
            /* Button thoda chhota */
            font-size: 14px;
            /* Text bhi thoda chhota */
            border-radius: 20px;
            margin-top: 10px;
      }
}

.theme-btn:hover {
      background: #fff;
      color: #3b82f6;
      box-shadow: 0px 0px 4px #3b82f6;
}



/* Header */
.main-header {
      box-shadow: 0 0 4px #00000079;
      background: #fff;
      position: sticky;
      top: 0px;
      z-index: 999;
}

.site-logo {
      height: 65px;
}

/* Desktop Menu */
.main-menu li {
      list-style: none;
      position: relative;
}

.main-menu a {
      text-decoration: none;
      color: #000;
      font-weight: 500;
      padding: 10px 0;
      display: block;
}

.main-menu a.active {
      color: #0d6efd;
}

.main-menu a.active::after {
      content: "";
      position: absolute;
      bottom: -3px;
      left: 0;
      width: 100%;
      height: 2px;
      background: #0d6efd;
}

/* Dropdown */
.dropdown-menu-custom {
      position: absolute;
      top: 40px;
      left: 0;
      background: #fff;
      padding: 10px 0;
      min-width: 180px;
      display: none;
      box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
      z-index: 10;
}

.dropdown-menu-custom a {
      padding: 8px 15px;
}

/* Hover Show (Desktop Only) */
@media(min-width:992px) {
      .dropdown:hover .dropdown-menu-custom {
            display: block;
      }
}

/* Mobile Toggle */
.menu-toggle {
      width: 30px;
      height: 25px;
      background: transparent;
      border: none;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
}

.menu-toggle span {
      height: 3px;
      width: 100%;
      background: #000;
}

/* Offcanvas Mobile Menu */
.offcanvas-body a {
      display: block;
      padding: 10px 0;
      font-weight: 600;
      color: #000;
      text-decoration: none;
}

.mobile-dropdown .inner-dropdown {
      padding-left: 15px;
      display: none;
}

.mobile-dropdown.open .inner-dropdown {
      display: block;
}

.dropdown-btn {
      cursor: pointer;
}

/* HERO SECTION */
.hero-section {
      background: linear-gradient(to right, #0a0d14, #111827);
      color: #fff;
      position: relative;
}

.hero-tagline {
      color: #77aaff;
      border-left: 3px solid #3b82f6;
      padding-left: 12px;
      margin-bottom: 12px;
}

.hero-title {
      font-size: 55px;
      font-weight: 800;
}

.hero-title span {
      color: #3b82f6;
}

.hero-sub {
      margin: 15px 0;
      font-size: 18px;
}

.hero-btn {
      background: #3b82f6;
      color: #fff;
      padding: 12px 25px;
      text-decoration: none;
      border-radius: 8px;
      font-weight: 600;
      display: inline-block;
      margin-top: 15px;
}

.hero-btn:hover {
      background: #fff;
      color: #3b82f6;
      box-shadow: 0px 0px 4px #3b82f6;
}

.hero-img {
      width: 95%;
}



/* Arrows */
.hero-arrows {
      position: absolute;
      right: 40px;
      top: 50%;
      transform: translateY(-50%);
      display: flex;
      flex-direction: column;
      gap: 15px;
}

.arrow-btn {
      width: 55px;
      height: 55px;
      border-radius: 50%;
      border: 2px solid #aaa;
      background: transparent;
      color: #fff;
      font-size: 22px;
}

.arrow-btn:hover {
      background: #3b82f6;
      border-color: #3b82f6;
}

/* FOOTER */


.main-footer {
      background: #0d0d0d;
      color: #d1d1d1;
}

.footer-title {
      font-size: 18px;
      font-weight: 700;
      color: #3bb0ff;
      margin-bottom: 15px;
}

.footer-menu {
      list-style: none;
      padding: 0;
}

.footer-menu li {
      margin-bottom: 8px;
}

.footer-menu a {
      text-decoration: none;
      color: #cfcfcf;
}

.footer-menu a:hover {
      color: #3bb0ff;
}

.footer-text {
      line-height: 1.6;
      color: #cecece;
}

.footer-link a {
      color: #3bb0ff;
      text-decoration: none;
}

.footer-phone a {
      color: #fff;
      text-decoration: none;
      font-weight: 600;
}

.schedule-btn {
      background: #3bb0ff;
      color: #fff;
      padding: 10px 20px;
      border-radius: 25px;
}

.footer-social a {
      color: white;
      margin-right: 10px;
      font-size: 20px;
}

/* Mobile View */
@media (max-width: 576px) {
      .footer-social a {
            font-size: 16px;
            /* Mobile ke liye chhota */
            margin-right: 8px;
            /* Spacing bhi thoda kam */
      }
}

.footer-social a:hover {
      color: #3bb0ff;
}

.footer-bottom {
      background: #000;
      color: #b1b1b1;
}

/* about */

.about-link {
      color: #0077ff;
      font-weight: 600;
      text-decoration: none;
}

.about-link:hover {
      text-decoration: underline;
}


/* FLOAT ANIMATION FOR IMAGE */
.about-img {
      max-width: 330px;
      animation: floatImg 4s ease-in-out infinite;
}

@keyframes floatImg {
      0% {
            transform: translateY(0px);
      }

      50% {
            transform: translateY(-12px);
      }

      100% {
            transform: translateY(0px);
      }
}

/* RESPONSIVE */
@media(max-width: 768px) {
      .about-title {
            font-size: 28px;
      }
}

/* best-products */
/* Section title */
.section-heading {
      font-size: 28px;
      font-weight: 700;
      color: #0077ff;
}

/* Tabs */
.product-tabs .nav-link {
      background: #0077ff;
      color: #fff;
      border-radius: 8px;
      margin: 5px;
      padding: 8px 22px;
      font-weight: 600;
      transition: 0.3s;
      border: none;
}

.product-tabs .nav-link:hover {
      background: #fff;
      color: #0077ff;
      box-shadow: 0px 0px 4px #0077ff;
      transform: translateY(-4px);
}

.product-tabs .nav-link.active {
      background: #fff;
      color: #0077ff;
      box-shadow: 0px 0px 4px #0077ff;

}

/* Product Card */
.product-card {
      background: #fff;
      display: block;
      padding: 15px;
      border-radius: 16px;
      text-decoration: none;
      color: #000;
      box-shadow: 0 6px 20px rgba(0, 0, 0, 0.486);
      transition: 0.35s ease;
      margin-bottom: 25px;
}

.product-card:hover {
      transform: translateY(-8px);
      box-shadow: 0 12px 28px rgba(0, 0, 0, 0.15);
}

/* Image box */
.prod-img-box {
      background: #f8f9ff;
      padding: 10px;
      border-radius: 12px;
      margin-bottom: 12px;
}

.prod-img-box img {
      width: 100%;
      height: auto;
      border-radius: 8px;
}

/* Title */
.prod-title {
      font-size: 15px;
      font-weight: 600;
      margin-bottom: 6px;
      color: #333;
}

/* Price */
.prod-price {
      font-size: 14px;
      color: #0077ff;
}

/* Items Outer Box */
.hww-box {
      text-align: center;
      padding: 20px;
}

/* Circle Icon */
.hww-icon {
      width: 90px;
      height: 90px;
      background: #0077ff;
      border-radius: 50%;
      margin: 0 auto 15px;
      display: flex;
      align-items: center;
      justify-content: center;
}

.hww-icon i {
      color: white;
      font-size: 32px;
}

/* Center white-icon */
.white-icon {
      background: #ffffff;
      border: 2px solid #dfdfdf;
}

.white-icon i {
      color: #0077ff;
}

/* Headings */
.hww-heading {
      font-size: 16px;
      font-weight: 700;
      margin-bottom: 10px;
      text-transform: uppercase;
}

/* Text */
.hww-text {
      font-size: 14px;
      line-height: 1.6;
}

.hww-text a {
      font-size: 14px;
      line-height: 1.6;
}

.hww-center-box .hww-text a {
      color: #fff;
      font-size: 14px;
      line-height: 1.6;
}

/* Middle Box Highlight */
.hww-center-box {
      background: #0077ff;
      color: #fff;
      padding: 35px 20px;
      border-radius: 6px;
}

.hww-center-box .hww-heading {
      color: #fff;
}

.hww-center-box .hww-text {
      color: #e8e8e8;
}

/* 3D Hover Effect */
.hww-icon {
      transition: transform 0.6s ease;
      transform-style: preserve-3d;
}

.hww-box:hover .hww-icon {
      transform: rotatey(180deg);
}

.services-section {
      position: relative;
      padding: 80px 0;

      background:
            linear-gradient(to bottom,
                  rgba(0, 0, 0, 0.800),
                  /* Top dark */
                  rgba(0, 0, 0, 0.800),
                  /* Middle soft */
                  rgba(0, 0, 0, 0.800)
                  /* Bottom transparent */
            ),
            url("../img/Untitled design.png");

      background-size: cover;
      background-position: center;
      background-repeat: no-repeat;
}


.subtitle01 {
      color: #0077ff;
      font-size: 16px;
      font-weight: 700;
      text-transform: uppercase;
}

.service-text {
      color: #fff;
      line-height: 1.7;
}

.service-arrows button {
      width: 42px;
      height: 42px;
      border: none;
      background: #2b72f7;
      color: #fff;
      border-radius: 50%;
      margin-right: 10px;
}

.service-card {
      background: #fff;
      padding: 30px 25px;
      border-radius: 18px;
      text-align: center;
      box-shadow: 0px 6px 18px rgba(0, 0, 0, 0.08);
      min-height: 400px;
}

.service-card:hover .s-icon {
      transform: rotatey(180deg);
}

.s-icon {
      width: 70px;
      height: 70px;
      margin: 0 auto 15px;
      background: #0077ff;
      color: #fff;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 28px;
      transition: transform 0.6s ease;
      transform-style: preserve-3d;
}

.learn-more {
      font-weight: 600;
      color: #0077ff;
      text-decoration: none;
}

.learn-more:hover {
      text-decoration: underline;
}

.services-slider {

      padding: 20px;

}

/*  */
.service-box {
      background: #fff;
      padding: 35px 25px;
      border-radius: 18px;
      text-align: center;
      position: relative;
      overflow: hidden;

      box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.548);
      transition: 0.4s ease;
      height: 100%;
      border-bottom: 2px solid #0077ff;
}

/* After effect – Bottom to top fill */
.service-box::before {
      content: "";
      position: absolute;
      width: 100%;
      height: 0%;
      bottom: 0;
      left: 0;
      background: #0077ff;
      z-index: 0;
      transition: height 0.45s ease-in-out;
}

.service-box:hover::before {
      height: 100%;
}

/* Icon */
.service-box .icon {
      width: 65px;
      height: 65px;
      background: #e8f5ff;
      border-radius: 50%;
      margin: 0 auto 20px;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 26px;
      color: #0a84c1;
      position: relative;
      z-index: 1;
      transition: 0.4s ease;
}

/* Icon hover becomes white */
.service-box:hover .icon {
      background: #fff;
      color: #0a84c1;
      transform: translateY(-5px) rotateX(20deg);
}

/* Titles */
.service-box .sub-title {
      font-size: 14px;
      color: #0a84c1;
      font-weight: 600;
      margin-bottom: 5px;
      z-index: 2;
      position: relative;
}

.service-box .title {
      font-size: 18px;
      font-weight: 700;
      color: #000;
      margin-bottom: 12px;
      z-index: 2;
      position: relative;
}

/* Text */
.service-box .text {
      color: #444;
      line-height: 1.7;
      position: relative;
      z-index: 2;
}

/* Learn More */
.service-box .learn-more {
      font-weight: 600;
      color: #0a84c1;
      text-decoration: none;
      display: inline-block;
      margin-top: 10px;
      z-index: 2;
      position: relative;
}

/* Hover text color white */
.service-box:hover .title,
.service-box:hover .text,
.service-box:hover .sub-title,
.service-box:hover .learn-more {
      color: #fff;
}

/* blog */
.blog-card {
      background: #fff;
      border-radius: 15px;
      box-shadow: 0 5px 20px rgba(0, 0, 0, 0.445);
      overflow: hidden;
      transition: .3s;
      height: 100%;
}

.blog-card:hover {
      transform: translateY(-6px);
}

.blog-img {
      position: relative;
}

.blog-img img {
      width: 100%;
      border-radius: 15px 15px 0 0;
}

.blog-date {
      position: absolute;
      top: 15px;
      right: 15px;
      background: #009fe3;
      color: #fff;
      padding: 8px 12px;
      font-weight: 700;
      border-radius: 10px;
      text-align: center;
      font-size: 14px;
}

.blog-content {
      padding: 20px 18px;
}

.blog-meta {
      padding: 0;
      list-style: none;
      display: flex;
      gap: 15px;
      margin-bottom: 10px;
      color: #666;
      font-size: 14px;
}

.blog-content h4 {
      font-size: 18px;
      font-weight: 700;
      margin-bottom: 15px;
      color: #000;
}

.blog-btn {
      font-size: 14px;
      font-weight: 600;
      color: #009fe3;
      text-decoration: none;
}



/* faq */


.faq-btn {
      background-color: #009fe3;
      color: #fff;
      font-weight: 700;
      box-shadow: none !important;
      border: none !important;
      outline: none !important;
}

.faq-btn:focus,
.faq-btn:active {
      box-shadow: none !important;
      border: none !important;
      outline: none !important;
}

.accordion-button:not(.collapsed) {
      background-color: #009fe3 !important;
      color: white !important;
      box-shadow: none !important;
}

.accordion-button::after {
      filter: brightness(0) invert(1);
}

/*  */
.testimonial-area {
      background: #000;
      background-size: cover;
      background-position: center;
      position: relative;
}

.testimonial-card {
      background: #0b1321;
      border-radius: 20px;
      padding: 35px;
      color: #fff;
      position: relative;
      box-shadow: 0px 6px 20px rgba(0, 0, 0, 0.4);
      border-bottom: 4px solid #007bff;
      transition: 0.3s ease-in-out;
      min-height: 330px;
}

.testimonial-card:hover {

      box-shadow: 0px 10px 25px rgba(0, 0, 0, 0.7);
      border-bottom-color: #00c8ff;
}

.client-box {
      display: flex;
      align-items: center;
      gap: 15px;
}

.client-img {
      width: 70px;
      height: 70px;
      border-radius: 14px;
      object-fit: cover;
      display: inline-block;
}

.client-name {
      font-size: 20px;
      font-weight: 700;
      color: #0aa3ff;
}

.client-role {
      font-size: 14px;
      color: #bbb;
}

.stars {
      color: #ffd700;
      font-size: 20px;
      margin-top: 10px;
      letter-spacing: 3px;
}

.review-text {
      margin-top: 15px;
      line-height: 1.7;
      color: #e4e4e4;
}

/* last section */
.project-gallery {
      position: relative;
}

.small-title {
      font-size: 14px;
      color: #009fe3;
      letter-spacing: 2px;
      text-transform: uppercase;
      font-weight: 700;
}

.main-title {
      font-size: 28px;
      font-weight: 800;
}

.project-item {
      position: relative;
      cursor: pointer;
      padding: 20px 0px;
}

.project-img {
      position: relative;
      box-shadow: 0px 0px 4px #00000054;
      overflow: hidden;
      border-radius: 12px;
      color: #fff;
}

.project-img img {
      width: 100%;
      height: 240px;
      object-fit: cover;
      transition: 0.4s ease;
      border-radius: 12px 12px 0px 0px;
}

.project-img:hover img {
      transform: scale(1.08);
}


.project-img h4 {
      color: #000;
      margin: 0;
      font-size: 18px;
      font-weight: 600;

}

/* Popup hide link */
.popup-link {
      position: absolute;
      inset: 0;
}

/* page section*/

.page-header {
      position: relative;

      color: #fff;
      overflow: hidden;
}

.page-header__bg {
      position: absolute;
      inset: 0;
      background-size: cover;
      background-position: center;
      z-index: 1;
      filter: brightness(0.28);
}

.page-header__bg::before {
      content: "";
      position: absolute;
      inset: 0;
      background: rgba(0, 0, 0, 0.35);
}

.page-header .container,
.page-header__inner {
      position: relative;
      z-index: 2;
}

.page-title {
      font-size: 46px;
      font-weight: 700;
      margin: 0 0 10px;

}


.breadcrumb {
      display: flex;
      gap: 8px;
      list-style: none;
      padding: 0;
      margin: 0;
      font-weight: 600;
      font-size: 14px;
}

.breadcrumb a {
      color: #0077ff;

}

.breadcrumb a:hover {
      color: #4cc3ff;
}

.breadcrumb li {
      display: flex;
      align-items: center;
}

.icon-angle-right {
      font-size: 14px;
}


/* contact us */
.contact-section {
      padding: 60px 0;
}

.contact-box {
      background: #111;
      padding: 30px;
      border-radius: 20px;
}

.contact-map {
      width: 100%;
      height: 350px;
      border-radius: 12px;
      border: none;
}

.contact-title {
      color: #fff;
      font-size: 28px;
      font-weight: 700;
      margin-bottom: 25px;
}

.contact-form-content input,
.contact-form-content textarea {
      width: 100%;
      background: #062235;
      border: none;
      outline: none;
      padding: 14px 18px;
      font-size: 15px;
      border-radius: 8px;
      color: #fff;
}

.contact-form-content input::placeholder,
.contact-form-content textarea::placeholder {
      color: #9ec3d9;
}

.submit-btn {
      background: #2d63ff;
      border: none;
      padding: 12px 28px;
      font-size: 16px;
      font-weight: 600;
      color: #fff;
      border-radius: 8px;
      cursor: pointer;
      transition: 0.3s;
}

/* wefix */
.issue-box {
      background: #0f0f0f;
      border: 1.5px solid #444;
      padding: 25px;
      border-radius: 12px;
      text-align: left;
      transition: .4s ease;
      height: 100%;
}

.issue-box:hover {
      border-color: #00aaf8;
      transform: translateY(-6px);
}

.issue-icon {
      font-size: 36px;
      color: #00aaf8;
      margin-bottom: 15px;
}

.issue-title {
      font-size: 20px;
      font-weight: 600;
      color: #fff;
      margin-bottom: 10px;
}

.issue-text {
      font-size: 15px;
      color: #ddd;
      line-height: 1.6;
}



/* Detail */


/* Main Image Box */
.product-preview {
      background: #f8f9fa;
      padding: 25px;
      border-radius: 15px;
      display: flex;
      justify-content: center;
      align-items: center;
}

.main-img {
      height: 350px;
      object-fit: contain;
      transition: .3s;
}

.main-img:hover {
      transform: scale(1.03);
}

/* Thumbnails */
.thumb {
      width: 85px;
      height: 65px;
      object-fit: cover;
      border-radius: 12px;
      border: 2px solid transparent;
      cursor: pointer;
      transition: .3s;
}

.thumb:hover,
.active-thumb {
      border-color: #007bff;
      transform: translateY(-3px);
}

/* Title + Price */
.product-title {
      font-size: 28px;
      font-weight: 700;
      color: #000;
}

.product-price {
      font-size: 24px;
      font-weight: 700;
      color: #007bff;
}

/* Options */
.product-options h5 {
      font-size: 15px;
      font-weight: 600;
      margin-bottom: 8px;
      text-transform: uppercase;
}

.opt-btn {
      border: 2px solid #eee;
      background: #fff;
      padding: 9px 20px;
      border-radius: 50px;
      margin: 6px;
      cursor: pointer;
      font-size: 14px;
      transition: .3s;
      min-width: 85px;
}

.opt-btn:hover {
      border-color: #007bff;
      color: #007bff;
}

.opt-btn.active {
      background: #007bff;
      color: #fff;
      border-color: #007bff;
}

/* Color options */
[color-box] {
      width: 24px;
      height: 24px;
      padding: 4px;
      border-radius: 50%;
      border: 2px solid transparent;
      cursor: pointer;
      margin-right: 10px;
      transition: .3s;
}

[color-box].active {
      border-color: #007bff;
}


/*  */
.specs-tabs .nav-link {
      background: transparent;
      font-size: 16px;
      font-weight: 600;
      padding: 10px 25px;
      border: none;
      border-radius: 25px;
      color: #333;
}

.specs-tabs .nav-link.active {
      color: #0077ff;
      border-radius: 25px;
      box-shadow: 0px 0px 4px #0077ff;
}

.spec-box {
      background: #fff;
      padding: 25px;
      border-radius: 12px;
      border: 1px solid #e5e5e5;
}

.spec-box h5 {
      font-weight: 700;
      margin-bottom: 15px;
}

.spec-list {
      margin: 0;
      padding-left: 18px;
}

.spec-list li {
      margin-bottom: 8px;
      font-size: 15px;
      color: #222;
}

/* blog detail */


.detail-img {
      position: relative;
}

.detail-img img {
      width: 100%;
      border-radius: 12px;
      object-fit: cover;
}

.detail-date {
      position: absolute;
      top: 15px;
      right: 15px;
      background: #007bff;
      padding: 8px 12px;
      font-size: 14px;
      font-weight: 600;
      border-radius: 6px;
      color: #fff;
}

.blog-meta span {
      margin-right: 15px;
      font-size: 14px;
      color: #555;
}

.blog-title {
      font-size: 26px;
      font-weight: 700;
      color: #111;
      margin-bottom: 15px;
}

.blog-quote {
      background: #f7f9fc;
      border-left: 4px solid #007bff;
      padding: 15px 20px;
      border-radius: 6px;
      font-style: italic;
}

.quote-author {
      display: block;
      font-size: 14px;
      margin-top: 10px;
      text-align: right;
      font-weight: 600;
}

/* Sidebar */
.sidebar-box {

      padding: 20px;
      border-radius: 12px;
}

.sidebar-title {
      font-size: 20px;
      font-weight: 700;
      margin-bottom: 20px;
}



.rp-thumb {

      border-radius: 10px;
      width: 100%;
}

.rp-text p {
      font-size: 14px;
      margin: 0;
      font-weight: 500;
      color: #222;
      font-weight: 600;
      padding-top: 10px;
}

.recent-post:hover p {
      color: #007bff;
}



/* Sticky Sidebar */
.sticky-sidebar {
      position: sticky;
      top: 100px;
      height: fit-content;
}

/* comment section */
/* Comments Section */
.comment-title {
      font-size: 22px;
      font-weight: 700;
      margin-bottom: 25px;
}

.single-comment {
      display: flex;
      gap: 18px;
      background: #fff;
      padding: 18px;
      border-radius: 10px;
      margin-bottom: 25px;
      border: 1px solid #eee;
      transition: .3s;
}

.single-comment:hover {
      box-shadow: 0px 6px 18px rgba(0, 0, 0, 0.09);
}

.cmt-img img {
      width: 55px;
      height: 55px;
      border-radius: 50%;
      object-fit: cover;
}

.cmt-header {
      display: flex;
      justify-content: space-between;
}

.cmt-header h5 {
      font-size: 17px;
      font-weight: 700;
      margin-bottom: 5px;
}

.cmt-date {
      font-size: 14px;
      color: #888;
      display: block;
      margin-bottom: 5px;
}

.reply-btn {
      font-size: 14px;
      font-weight: 600;
      color: #007bff;
}

.reply-btn:hover {
      text-decoration: underline;
}

.reply-section {
      background: #fff;
      padding: 25px;
      border-radius: 12px;
      border: 1px solid #eee;
}

.reply-form input,
.reply-form textarea {
      background: #94bde475;
      border: none;
      padding: 14px;
      border-radius: 8px;
      width: 100%;
      outline: none;
      font-size: 15px;
}

.reply-form input:focus,
.reply-form textarea:focus {
      border: 1px solid #007bff;
      background: #fff;
}

.locations-section {
      padding-top: 60px;
      padding-bottom: 60px;
}

.location-item {
      display: block;
      border: 2px solid #007bff;
      padding: 10px 15px;
      margin-bottom: 10px;
      border-radius: 8px;
      font-weight: 600;
      font-size: 14px;
      color: #007bff;
      cursor: pointer;
      transition: 0.3s ease;
      text-transform: uppercase;
}

.location-item:hover {
      background: #007bff;
      color: #fff;
      transform: translateY(-3px);
}

/* Responsive Layout */
@media (max-width: 992px) {
      .location-grid .col-md-4 {
            margin-bottom: 10px;
      }
}

@media (max-width: 576px) {
      .location-item {
            font-size: 11px;
            padding: 6px 10px;
            margin-bottom: 6px;
            text-align: center;
      }

      .location-grid {
            display: grid !important;
            grid-template-columns: repeat(2, 1fr);
            gap: 8px;
      }
}

@media (max-width: 420px) {
      .location-grid {
            grid-template-columns: repeat(1, 1fr);
      }
}



/* loction */
.info-box {
      background: #fff;
      border: 1px solid #eee;
      padding: 22px;
      border-radius: 10px;
      transition: .3s;
}

.info-box:hover {
      box-shadow: 0px 5px 20px rgba(0, 0, 0, 0.07);
}

.info-box h4 {
      font-size: 20px;
      font-weight: 700;
}

/* HOW STEP */
.how-step {
      display: flex;
      align-items: flex-start;
      gap: 15px;
      padding: 15px 0;
      border-bottom: 1px solid #ddd;
}

.how-step:last-child {
      border-bottom: none;
}

.how-step .icon {
      width: 45px;
      height: 45px;
      background: #f5f9ff;
      border-radius: 50%;
      color: #007bff;
      font-size: 20px;
      display: flex;
      align-items: center;
      justify-content: center;
}

/* Technician */
.technician-profile {
      display: flex;
      gap: 15px;
      align-items: center;
}

.tech-img {
      width: 65px;
      height: 65px;
      border-radius: 50%;
      object-fit: cover;
}

.rating {
      font-size: 14px;
      color: #007bff;
}

.rating i {
      color: #ffb400;
}

/* Nearby Localities */
.nearby-list p {
      margin-bottom: 10px;
      padding-bottom: 8px;
      font-size: 15px;
      border-bottom: 1px solid #e0e0e0;
      cursor: pointer;
      transition: .3s;
}

.nearby-list p:hover {
      color: #007bff;
      border-color: #007bff;
}

.policy-page {
      background: #fff;
      border-radius: 12px;
      padding: 30px;
      border: 1px solid #eee;
}

.policy-page h2 {
      font-size: 28px;
      font-weight: 700;
}

.policy-page h4 {
      margin-top: 25px;
      font-size: 18px;
      font-weight: 700;
}

.policy-page ul li {
      margin-bottom: 6px;
      font-size: 15px;
}

.policy-page p {
      font-size: 15px;
      color: #333;
      line-height: 1.6;
}

/* popup */
.callback-box {
      border-radius: 14px;
      padding: 8px 10px;
}

.modal-title {
      font-size: 20px;
      font-weight: 700;
}

.form-control,
.form-select {
      height: 40px;
      border-radius: 8px;
}

.issue-list {
      max-height: 100px;
      overflow-y: auto;
      padding: 10px;
      border: 1px solid #dedede;
      border-radius: 8px;
}

.issue-list label {
      display: block;
      margin-bottom: 8px;
      font-size: 15px;
}

.modal-dialog-centered {
      align-items: start !important;
}