/*
=================================
|***    Table of contents:   ***|
=================================

1. General styles
2. Typography
3. Helpers
4. Preloader
5. Go up button
6. Header and navigation
7. Hero Section
8. About us
9. Services
10. Fun facts
11. Projects
12. Pricing
13. Testimonial
14. CTA
15. Team
16. Video Banner
17. Shop
18. Marquee
19. Blog
20. Footer

Main Style file-> assets/css/main.css 
*/

/* =========================================
   CSS Custom Properties (Design Tokens)
   ========================================= */
:root {
  /* Inherit primary brand color from main.css.
     Redeclaring here provides a local fallback
     if this sheet is ever used standalone. */
  --primary-color: #FA752A;
  --primary-color-hover: #e06420;
  --primary-shadow: rgba(250, 117, 42, 0.35);
  --theme-dark: #0b4273;
  --theme-dark-hover: #072a53;
  --price-green: #1b733a;
  --marquee-bg: #4f4844;
}

.modal {
  --bs-modal-zindex: 11111;
}

.contact-link {
  text-decoration: none !important;
  /* Removes the underline */
  color: inherit !important;
  /* Keeps the same color as the surrounding text */
  display: inline-block;
  /* Ensures proper spacing */
}

.contact-link:hover {
  color: inherit;
  /* Prevents color change on hover */
  text-decoration: none;
}

.call-now-btn {
  background-color: var(--primary-color);
  color: white;
  border-radius: 8px;
  padding: 8px 16px;
  font-weight: 600;
  transition: all 0.3s ease;
  border: none;
}

.call-now-btn:hover {
  background-color: var(--primary-color-hover);
  transform: translateY(-2px);
  box-shadow: 0 4px 8px var(--primary-shadow);
  color: white;
}

/* Sticky Bottom Action Bar CSS */
.sticky-action-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  display: flex;
  z-index: 999;
  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
  background: #fff;
}

.sticky-action-bar .action-item {
  flex: 1;
  text-align: center;
}

.sticky-action-bar .action-item a,
.sticky-action-bar .action-item button{
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 10px 5px;
  color: #fff !important;
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
}

.sticky-action-bar .action-item>span{
    color:#fff;
}

.sticky-action-bar .action-item i {
  font-size: 15px;
  margin-bottom: 2px;
}

/* Specific Background Colors */
.call-bg {
  background-color: #007bff;
}

/* Blue */
.whatsapp-bg {
  background-color: #25d366;
}

/* Green */
.quote-bg {
  background-color: #ff5722;
}

/* Orange/Red */


.sticky.header-1 {
  z-index: 9999;
}

.hero-about {
  position: relative;
  height: 260px;
  overflow: hidden;
  padding: 0;
  margin-top: 6rem;
}

.hero-about img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero-about-title {
  position: absolute;
  left: 50%;
  bottom: 50%;
  transform: translateX(-50%);
  color: #ffffff;
  font-size: 54px;
  font-weight: 800;
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
}

.hero-about-title p {
  font-size: 16px;
  font-weight: 400;
  line-height: normal;
  text-shadow: none;
  margin: 10px 0 0 0;
}

.service-provide-items .content h5 {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  margin-bottom: 5px;
}

@media (min-width: 768px) {
  .service-provide-items .content h5 {
    justify-content: center;
    min-height: 58px;
  }
}

.search-icon {
  font-size: 14px;
  border-radius: 30px;
  background: #FFF;
  padding: 10px 20px;
  font-weight: 500;
  color: var(--primary-color);
}

a.phone-icon {
  border-radius: 30px;
  padding: 10px 20px;
  border: 1.5px solid #fff;
  color: #fff;
  font-weight: 400;
  font-size: 16px;
}

.footer-widgets-wrapper img {
  object-fit: none;
}

img.footer-logo {
  height: 110px;
}

.footer-middle {
  text-align: center;
}

.footer-middle .col.col-lg-2 {
  width: 115px;
  line-height: 16px;
  font-size: 12px;
  color: #363636;
}

.footer-middle .col.col-lg-2 img {
  margin: 0 0 7px 0;
}

.footer-widgets-wrapper {
  padding: 90px 0 50px;
  position: relative;
  z-index: 9;
}

.footer-copyright,
.footer-links {
  text-align: center;
  font-size: 12px;
  color: #000;
}

.footer-copyright {
  margin: 25px 0 0 0;
}

.footer-links {
  margin: 0 0 50px 0;
}

.footer-links a {
  margin: 0 20px;
}

.footer-widgets-wrapper .single-footer-widget {
  margin-top: 30px;
}

.team-section h2 {
  font-size: 30px;
  font-weight: bold;
  margin-bottom: 10px;
  color: #000;
}

.team-section span.wow.fadeInUp {
  font-size: 18px;
  font-weight: 300;
  color: #666;
}

.team-section p {
  font-size: 14px;
  color: #000;
  line-height: normal;
}

.hero-2 .hero-content h1 {
  margin-bottom: 20px;
  font-size: 50px;
  font-weight: bold;
}

section.hero-section.fix.hero-2 {
  margin: 8.5rem 0 0 0;
}

.header-bottom {
  color: #fff;
  text-align: center;
}

.header-bottom span {
  font-size: 30px;
  font-weight: bold;
}

.w-80 {
  width: 70% !important;
  background: #FFF4EB;
  border-radius: 20px;
  padding: 0 25px;
}

.bottom-container {
  position: relative;
  top: -70px;
  z-index: 999;
}

.header-bottom {
  color: #fff;
  text-align: center;
  margin: -150px 0 50px 0;
}

.swiper.hero-slider-2 {
  height: 422px;
}

.footer-input h4 {
  font-size: 18px;
  font-weight: bold;
}

.footer-input input[type="email"],
.footer-input input[type="text"] {
  padding: 10px;
  border-color: #FD995C;
  border-radius: 8px 0 0 8px;
  min-width: 300px;
  float: left;
  border-collapse: collapse;
  border: 1px solid #FD995C;
  color: #000;
  height: 46px;
}

button.newsletter-button {
  float: left;
  display: block;
  font-size: 16px;
  font-weight: bold;
  background: var(--primary-color);
  padding: 0px 30px;
  color: #fff;
  margin: 0;
  border-radius: 0 8px 8px 0;
  height: 46px;
}

.footer-input {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  /* allow title to break to new line if necessary but input+button stay together */
}

.footer-input h4 {
  width: 100%;
  margin-bottom: 10px;
}

.footer-input form,
.footer-input .input-group {
  display: flex;
  width: 100%;
}


.header-middle .col-md-6 {
  padding: 25px 0;
}

.icon1 img {
  margin: 10px 0 7px 0;
}

.icon2 img {
  margin: 8px 0 4px 0;
}

.icon3 img {
  margin: 10px 0 7px 0;
}

section.services-section {
  margin: 0 0 60px 0;
}

.section-title h3 {
  color: #000;
  font-size: 30px;
  font-weight: bold;
  text-transform: inherit;
  padding-bottom: 5px;
  text-align: center;
}

.section-title span {
  color: #666;
  font-size: 18px;
  font-weight: 400;
  text-transform: inherit;
  text-align: center;
}

.services-block h5 {
  font-size: 18px;
  font-weight: bold;
  margin: 20px 0 5px 0;
}

.services-block p {
  line-height: normal;
  font-size: 16px;
  color: #000;
  margin: 0 0 5px 0;
}

.services-block a {
  font-size: 15px;
  font-weight: bold;
  color: var(--primary-color);
  margin-top: auto;
}

.services-block .icon {
  padding: 5px 0 0 10px;
  display: inline-block;
  top: 5px;
  position: relative;
}

.services-block i.fas.fa-long-arrow-right {
  font-weight: 400;
  font-size: 24px;
}

.services-block {
  display: flex;
  flex-direction: column;
  height: 100%;
  margin-bottom: 30px;
}

.services-img-wrapper {
  overflow: hidden;
  border-radius: 14px;
  position: relative;
}

.services-block img {
  width: 100%;
  aspect-ratio: 5/3;
  object-fit: cover;
}

.services-img-wrapper::before {
  position: absolute;
  top: 0;
  left: -75%;
  z-index: 2;
  display: block;
  content: '';
  width: 50%;
  height: 100%;
  background: -webkit-linear-gradient(left, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, .3) 100%);
  background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, .3) 100%);
  -webkit-transform: skewX(-25deg);
  transform: skewX(-25deg);
}

.services-block:hover .services-img-wrapper::before {
  -webkit-animation: shine .75s;
  animation: shine .75s;
}

@-webkit-keyframes shine {
  100% {
    left: 125%;
  }
}

@keyframes shine {
  100% {
    left: 125%;
  }
}


.section-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 60px 20px;
}

.card-outer {
  background-color: #3f3836;
  padding: 60px 20px;
  border-radius: 20px;
}

@media (min-width: 992px) {
  .card-outer {
    padding: 70px 100px 40px 100px;
  }
}

.card-custom {
  background-color: #FCD0A8;
  /* inner peach card */
  border-radius: 24px;
  position: relative;
  box-shadow: 0 18px 0 #f0b47c;
  /* stacked card effect */
}

.top-heading {
  color: #ffffff;
  text-align: center;
  font-weight: 600;
  font-size: 30px;
  margin-bottom: 32px;
}

.content-heading {
  font-weight: 700;
  font-size: 1.4rem;
  margin-bottom: 16px;
  color: #111111;
}

.content-text {
  color: #333333;
  font-size: 0.98rem;
  max-width: 380px;
}

.know-more-link {
  display: inline-flex;
  align-items: center;
  margin-top: 18px;
  font-size: 16px;
  color: #000000;
  text-decoration: none;
  font-weight: bold;
}

.know-more-link span {
  margin-left: 6px;
  font-size: 1.1rem;
  line-height: 1;
}

.hero-image {
  max-width: 100%;
  height: auto;
}

@media (max-width: 767.98px) {
  .card-custom {
    padding: 28px 22px 24px;
  }

  .content-text {
    max-width: 100%;
  }

  .top-heading {
    font-size: 1.4rem;
  }

  .content-heading {
    font-size: 1.25rem;
  }
}

.custom-text-col {
  padding-left: 15px;
}

@media (min-width: 992px) {
  .custom-text-col {
    padding-left: 70px !important;
  }
}


.card-custom h3.content-heading {
  font-size: 24px;
}

.card-custom p.content-text {
  font-size: 16px;
  color: #000;
  line-height: 26px;
}

.know-more-link i.fas.fa-long-arrow-right {
  font-size: 24px;
  font-weight: 300;
  margin: 4px 0 0 8px;
}

.section-testimonials {
  padding: 80px 0 80px;
}

.section-testimonials h2 {
  font-weight: 700;
  font-size: 2rem;
  text-align: center;
  margin-bottom: 8px;
}

.section-testimonials p.lead-text {
  text-align: center;
  color: #888888;
  margin-bottom: 40px;
  font-size: 0.98rem;
}

.testimonial-card {
  background-color: #f7f7f7;
  border-radius: 24px;
  padding: 28px 28px 22px;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.testimonial-text {
  font-size: 0.98rem;
  color: #222222;
  margin-bottom: 18px;
}

.testimonial-name {
  font-weight: 700;
  color: #FA752A;
  margin-bottom: 0;
}

.testimonial-meta {
  font-size: 0.82rem;
  color: #9b9b9b;
}

.avatar-wrapper {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: 4px solid #ffb192;
  overflow: hidden;
  margin-left: auto;
}

.avatar-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.section-shop {
  padding: 40px 0 0px;
}

.section-shop h2 {
  font-weight: 700;
  font-size: 2rem;
  text-align: center;
  margin-bottom: 8px;
}


.shop-card {
  height: 280px;
  border-radius: 26px;
  padding: 24px 35px 0;
  text-align: left;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.shop-card-1 {
  background-color: #ffb4b7;
}

.shop-card-2 {
  background-color: #e9f6b7;
}

.shop-card-3 {
  background-color: #e9dfd3;
}

.shop-card-4 {
  background-color: #ffe4c9;
}

.shop-title {
  font-weight: 800;
  font-size: 1.6rem;
  line-height: 1.05;
  margin-bottom: 18px;
}

.shop-varieties {
  font-weight: bold;
  font-size: 19px;
  color: #000;
  margin-bottom: 50px !important;
}

.shop-price-label {
  font-size: 19px;
  color: #473232;
  margin-bottom: 2px;
}



.shop-price {
  font-weight: 400;
  font-size: 1rem;
  color: #473232;
  margin-bottom: 30px !important;
}

.shop-price {
  font-weight: 700;
  font-size: 1rem;
  margin-bottom: 0;
}

.shop-img-wrapper {
  text-align: right;
  margin-top: 12px;
}

.shop-img-wrapper img {
  -webkit-transform: scale(1);
  transform: scale(1);
  -webkit-transition: .3s ease-in-out;
  transition: .3s ease-in-out;
}

.shop-card:hover .shop-img-wrapper img {
  -webkit-transform: scale(1.3);
  transform: scale(1.3);
}

.banner-wrapper {
  padding: 24px 0;
  justify-content: center;
}

.banner {
  background-color: #FFDC8E;
  border-radius: 26px;
  padding: 40px 40px 40px 40px;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  position: relative;
}

.nice-select:after {
  right: 16px;
  border-bottom: 1px solid var(--header);
  border-right: 1px solid var(--header);
  width: 10px;
  height: 10px;
  background: #f5f5f8;
}

.nice-select.open:after {
  top: 25px;
}

.banner-left {
  float: left;
  width: 48%;
}

.product-img img {
  height: 160px;
  width: auto;
}

.product-img {
  position: absolute;
  bottom: 0;
  right: 0;
}

.banner-left h2 {
  font-weight: bold;
  font-size: 48px;
  text-align: left;
  color: #c3261f;
  margin-bottom: 18px;
}

.coupon-box {
  display: inline-flex;
  align-items: center;
  background-color: #ffffff;
  border-radius: 14px;
  padding: 13px 20px;
  position: relative;
  border: 2px dashed #FF6200;
}

.coupon-code {
  font-weight: bold;
  font-size: 27px;
  color: #008a3a;
  letter-spacing: 0.04em;
  margin-right: 0;
  white-space: nowrap;
}

.coupon-text {
  font-size: 18px;
  color: #5c3d24;
  white-space: nowrap;
  font-weight: bold;
  margin: 0 0 0 5px;
}

.scissor-icon {
  color: #ff8e25;
  font-size: 1.2rem;
  margin-right: 8px;
  position: absolute;
  left: 28px;
  top: -17px;
}

.banner-right {
  display: flex;
  align-items: center;
  gap: 26px;
}

.logo-mark {
  width: 90px;
  height: 90px;
  border-radius: 50%;
  background-color: #ffb948;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.logo-mark img {
  max-width: 100%;
  height: auto;
}

.logo-text {
  height: 70px;
}

.logo-text img {
  height: 100%;
  width: auto;
}

.product-img img {
  height: 160px;
  width: auto;
}

@media (max-width: 991.98px) {
  .banner {
    flex-direction: column;
    align-items: flex-start;
  }

  .banner-right {
    align-self: center;
    flex-wrap: wrap;
    justify-content: center;
  }
}

@media (max-width: 575.98px) {
  .banner {
    padding: 22px 20px;
  }

  .banner-left h2 {
    font-size: 1.5rem;
  }

  .coupon-box {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
  }

  .coupon-text {
    white-space: normal;
  }
}

.faq-section {
  padding: 40px 0 30px;
}

.faq-title {
  font-weight: 800;
  font-size: 2rem;
  margin-bottom: 24px;
}

.faq-tabs .nav-link {
  border-radius: 8px;
  padding: 10px 22px;
  margin-right: 10px;
  font-size: 16px;
  font-weight: 400;
  color: #444444;
  font-size: 16px;
  background-color: #f4f4f4;
}

.faq-tabs .nav-link.active {
  background-color: var(--primary-color);
  font-weight: bold;
  color: #ffffff;
}

.faq-card {
  background-color: #FCF7F2;
  border-radius: 19px;
  padding: 18px 22px 16px 40px;
  margin-top: 16px;
}

.faq-question {
  font-weight: bold;
  font-size: 16px;
  color: #000;
}

.faq-answer {
  font-size: 15px;
  color: #000;
  margin-bottom: 0;
}

@media (max-width: 575.98px) {
  .faq-tabs .nav-link {
    margin-bottom: 8px;
    width: 100%;
    text-align: center;
  }
}

.callback-section {
  padding: 40px 0 60px;
  display: flex;
  justify-content: center;
}

.callback-card {
  background-color: #4F4844;
  border-radius: 26px;
  padding: 40px 40px 50px;
  width: 100%;
  color: #ffffff;
}

.callback-title {
  font-weight: 800;
  font-size: 2rem;
  margin-bottom: 12px;
}

.callback-subtext {
  font-size: 0.98rem;
  color: #f1e4de;
  margin-bottom: 26px;
  max-width: 520px;
}

.callback-card .form-control,
.callback-card .form-select {
  border-radius: 8px;
  border: none;
  padding: 0 20px;
  font-size: 16px;
  color: #6B6B6B;
  height: 60px;
  margin-bottom: 0px;
  align-content: center;
}

textarea.form-control {
  min-height: 120px;
  resize: vertical;
}

.btn-callback {
  background-color: var(--primary-color);
  border: none;
  border-radius: 8px;
  padding: 10px 26px 12px 26px;
  font-size: 16px;
  color: #fff;
  font-weight: bold;
}

.btn-callback:hover {
  background-color: var(--primary-color-hover);
}

.bulk-text {
  font-size: 16px;
  margin-left: 22px;
  color: #fff;
  text-align: right;
  float: right;
  margin-top: 10px;
}

.bulk-text span {
  font-weight: 700;
}

.image-panel {
  border-radius: 18px;
  overflow: hidden;
  height: 100%;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

.image-panel img {
  width: 100%;
  height: auto;
  object-fit: cover;
}

@media (max-width: 991.98px) {
  .callback-card {
    padding: 30px 22px 26px;
  }

  .bulk-text {
    display: block;
    margin-left: 0;
    margin-top: 10px;
  }

  .image-panel {
    margin-top: 24px;
    height: auto;
  }
}

/* Masonry container */
.masonry {
  column-count: 3;
  /* number of columns on desktop */
  column-gap: 1.5rem;
  /* horizontal gap between columns */
}

/* Responsive column counts */
@media (max-width: 991.98px) {
  .masonry {
    column-count: 2;
  }
}

@media (max-width: 575.98px) {
  .masonry {
    column-count: 1;
  }
}

/* Individual items */
.masonry-item {
  break-inside: avoid;
  /* prevent cards from breaking */
  margin-bottom: 1.5rem;
  /* vertical gap */
}

/* Make testimonial cards fill the column width */
.masonry-item .testimonial-card {
  width: 100%;
  display: inline-block;
}

.shop-card-1 .shop-title,
.shop-card-2 .shop-title,
.shop-card-3 .shop-title,
.shop-card-4 .shop-title {
  font-size: 35px;
  padding: 30px 50px 0 0;
  margin: 0 0 10px 0;
}

.shop-card-1 .shop-title {
  color: #D23E3E;
}

.shop-card-2 .shop-title {
  color: #8B9C24;
}

.shop-card-3 .shop-title {
  color: #666666;
}

.shop-card-4 .shop-title {
  color: #D23E3E;
}

.shop-img-wrapper {
  position: absolute;
  bottom: 0;
  right: 0;
}

h2.faq-title {
  text-align: left;
  margin: 10px 0 20px 0;
  font-size: 30px;
  font-weight: bold;
  color: #000;
}

.callback-card h2 {
  color: #fff;
  text-align: left;
  font-size: 30px;
  margin: 10px 0 10px 0px;
}

.callback-subtext {
  font-size: 18px;
  color: #fff;
  margin-bottom: 26px;
  font-weight: 400;
}

textarea.form-control.text-areas {
  align-content: inherit;
  padding: 15px 0 0 20px;
}

.track-icon {
  display: none;
}

.footer-middle span {
  display: table;
}

.footer-links {
  margin: 40px 0 0px 0;
}

.footer-copyright {
  margin: 5px 0 40px 0;
}



/* Tablet Fixes */
@media (max-width: 991.98px) {
  section.hero-section.fix.hero-2 {
    margin: 75px 0 0 0;
    padding: 0;
  }

  .swiper.hero-slider-2 {
    height: 350px;
  }

  .hero-2 .hero-content h1 {
    top: 50px !important;
    font-size: 25px;
  }
}

/* Mobile */
/* =====================================================
   GLOBAL MOBILE RESPONSIVE FIXES
   Applies to: Home, About, Partner, Support,
               Contact, Branches
   Breakpoint: Bootstrap Mobile (≤575.98px)
===================================================== */

@media (max-width: 575.98px) {

  /* ---------- GLOBAL TYPOGRAPHY ---------- */
  body {
    font-size: 14px;
    line-height: 24px;
  }

  h1 {
    font-size: 34px;
    line-height: 1.2;
  }

  h2,
  .section-title h2,
  .hero-about-title,
  .faq h4.fw-bold.mb-4,
  .customer-support h4 {
    font-size: 20px;
  }

  h3,
  .support-card h3,
  .why-partner h3,
  .cta-inner h3 {
    font-size: 20px;
  }

  h4 {
    font-size: 18px;
  }

  p,
  .testimonial-card p,
  .why-partner p,
  .faq-answer {
    font-size: 14px;
    line-height: 22px;
  }

  /* ---------- SECTION SPACING ---------- */
  section,
  .section-padding {
    padding-left: 12px;
    padding-right: 12px;
  }

  .section-padding {
    padding: 50px 0;
  }

  /* ---------- HEADER / HERO ---------- */


  .hero-about {
    height: 120px;
    margin-top: 4.5rem;
  }

  .hero-about-title {
    font-size: 28px;
    bottom: 40%;
    text-align: center;
    width: 100%;
  }

  /* ---------- CARDS & CONTAINERS ---------- */
  .card-outer,
  .callback-card,
  .support-card,
  .contact-card,
  .testimonial-card,
  .faq-card,
  .branch-card {
    padding: 20px;
    border-radius: 16px;
  }

  /* ---------- FORMS ---------- */
  .form-control,
  .form-select,
  .support-card input,
  .file-upload {
    height: 48px;
    font-size: 14px;
    padding: 0 14px;
  }

  textarea.form-control {
    min-height: 100px;
  }

  button,
  .btn,
  .btn-orange,
  .btn-callback,
  .cta-btn,
  .theme-btn {
    width: 100%;
    text-align: center;
    padding: 12px 16px;
    font-size: 14px;
  }

  /* ---------- SUPPORT PAGE ---------- */
  .support-info-card {
    padding: 20px;
  }

  .support-info-card h5 {
    font-size: 20px;
  }

  .support-info-card p {
    font-size: 14px;
    line-height: 24px;
  }

  .support-info-card .icon {
    float: none;
    margin: 0 auto 12px;
    height: auto;
    display: block;
    text-align: center;
  }

  /* ---------- PARTNER PAGE ---------- */
  .why-partner h6,
  .why-partner p {
    padding: 0;
    text-align: center;
  }

  .icon-circle {
    margin: 0 auto;
  }

  /* ---------- FAQ ---------- */
  .faq-tabs .nav-link,
  .nav-pills .nav-link {
    width: 100%;
    margin-bottom: 8px;
    text-align: center;
  }

  .faq-card,
  .faq-item {
    padding: 16px 16px 16px 24px;
  }

  /* ---------- BRANCHES / MASONRY ---------- */
  .masonry,
  .masonry-grid {
    column-count: 1 !important;
    grid-template-columns: 1fr !important;
  }

  .alphabet-filter span {
    font-size: 16px;
    padding: 6px 8px;
  }

  .index,
  .card-index {
    font-size: 32px;
    bottom: 12px;
    right: 12px;
  }

  /* ---------- BANNERS ---------- */
  .banner {
    padding: 22px;
  }

  .banner-left,
  .banner-right {
    width: 100%;
    float: none;
    text-align: center;
  }

  .banner-left h2 {
    font-size: 22px;
  }

  .product-img {
    position: static;
    margin-top: 20px;
    text-align: center;
  }

  .coupon-box {
    flex-direction: column;
    gap: 6px;
    align-items: center;
  }

  /* ---------- FOOTER ---------- */
  .footer-widgets-wrapper {
    padding: 40px 0 20px;
    text-align: center;
  }

  .footer-links a {
    display: block;
    margin: 8px 0;
  }

  img.footer-logo {
    height: 80px;
  }

  a.phone-icon,
  a.search-trigger.search-icon {
    display: none;
  }

  .track-icon {
    display: inherit;
  }

  a.track-icon,
  .sidebar__toggle {
    background: #FFF4EB;
    border: 1px solid var(--primary-color);
    padding: 10px;
    border-radius: 7px;
  }

  .sidebar__toggle {
    color: var(--primary-color);
    padding: 11px 13px 7px 13px;
  }

  .sidebar__toggle i.far.fa-bars {
    font-size: 19px;
  }

  .logo {
    text-align: center;
    width: 218px;
  }

  .header-left {
    display: none;
  }

  section.hero-section.fix.hero-2 {
    margin: 6.5rem 0 0 0;
    padding: 0;
  }

  .swiper.hero-slider-2 {
    height: 290px;
  }

  .hero-2 .slider-image {
    background-position-x: center;
    background-size: cover;
    background-image: url(../img/hero/mobile-slide-img1.png) !important;
  }

  .hero-2 .hero-content h1 {
    top: 20px !important;
  }

  .w-80 {
    width: 100% !important;
    background: #FFF4EB;
    border-radius: 20px;
    padding: 0 25px;
  }

  .header-bottom {
    color: #fff;
    text-align: center;
    margin: -285px 0 35px 0;
    padding: 240px 0 80px 0;
    background-image: url(../img/hero/slider-bottom-mobile.png) !important;
    background-position: -60px 0;
    background-size: cover;
  }

  button.newsletter-button {
    width: 82px;
    padding: 15px 0;
    height: 52px;
  }

  .footer-input {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    width: 100%;
  }

  .footer-input input[type="email"],
  .footer-input input[type="text"] {
    min-width: unset !important;
    width: calc(100% - 82px);
    padding: 14px 10px;
    height: 52px;
  }

  .footer-input h4 {
    margin: 0 0 7px 0;
  }

  .border-end {
    border-right: 0 !important;
  }

  .header-middle .col-md-6 {
    padding: 8px 0;
  }

  .header-middle {
    padding: 16px;
  }

  .header-middle .icon1 img,
  .header-middle .icon2 img,
  .header-middle .icon3 img {
    display: table;
    margin: 8px auto 6px auto;
    height: 32px;
    width: auto;
  }

  .header-middle .icon2 img {
    margin: 10px auto 4px auto;
  }

  .header-middle .icon3 img {
    margin: 10px auto 9px auto;
  }

  .header-bottom {
    text-align: left;
    font-size: 16px;
  }

  .header-bottom>.container>.row>.col>span {
    font-size: 20px;
    display: block;
  }

  .header-bottom span .count {
    display: inline-block;
  }

  .header-bottom .col-6 {
    padding: 0 0 20px 25px;
  }

  .section-title span {
    font-size: 16px !important;
    width: 85%;
  }

  section.team-section h2 {
    margin: 4px 0 0 0;
  }

  .service-provide-items .icon {
    width: 30% !important;
    line-height: inherit;
    font-size: inherit;
    float: left;
    display: inline;
    margin: 0;
  }

  .service-provide-items .icon img {
    max-width: 125px;
  }

  .service-provide-items .content {
    margin-top: 20px;
    text-align: left;
    width: 60%;
    display: inline-block;
    margin: 15px 0 0 30px;
  }

  .team-section .content h5 {
    margin: 0 0 5px 0;
  }

  .service-provide-items {
    padding: 20px 15px 40px 15px;
  }

  .team-section p {
    font-size: 16px;
  }

  .team-section .service-provide-items {
    margin-top: 15px;
  }

  .section-title h3 {
    font-size: 20px;
  }

  .services-block {
    margin: 5px 0 25px 0;
  }

  .services-block img {
    width: 100%;
  }

  section.services-section {
    margin: 0 0 40px 0;
  }



  .card-outer {
    background-color: #3f3836;
    border-radius: 0;
    padding: 50px 0 40px 0;
  }

  section.section-wrapper.why-section {
    padding: 0;
  }

  .card-custom img {
    width: 100%;
    margin-top: 15px;
  }

  .card-custom h3.content-heading {
    font-size: 18px;
  }

  .section-testimonials {
    padding: 60px 0 30px;
  }

  .shop-card-1 .shop-title,
  .shop-card-2 .shop-title,
  .shop-card-3 .shop-title,
  .shop-card-4 .shop-title {
    font-size: 20px;
    padding: 0px 0px 0 0;
    margin: 0 0 10px 0;
  }

  .shop-card {
    height: 155px;
    border-radius: 26px;
    padding: 24px 20px 0;
  }


  .shop-varieties {
    font-size: 16px;
  }

  .shop-img-wrapper img {
    width: 90px;
  }

  .shop-varieties {
    margin-bottom: 10px !important;
  }

  .shop-img-wrapper {
    right: 0px;
  }

  .section-shop {
    padding: 10px 0 0px;
  }

  .banner-left h2 {
    font-size: 38px;
  }

  .coupon-text {
    white-space: normal;
    display: block;
    float: left;
  }

  .coupon-box {
    display: inline-block;
    float: left;
    padding: 13px 20px 5px 20px;
    margin: 0 0 5px 0;
  }

  .middle-image {
    margin: 15px 0 0 0;
  }

  .product-img {
    position: relative;
    margin-top: 0;
    text-align: center;
    right: -18px;
    top: 22px;
    border-radius: 10px;
  }

  h2.faq-title {
    font-size: 20px;
  }

  .faq-tabs .nav-link {
    border-radius: 8px;
    padding: 10px 10px;
    margin-right: 10px;
  }

  .faq-tabs li.nav-item {
    margin: 0 5px 0 0;
  }

  .callback-card h2 {
    font-size: 20px;
  }

  .callback-subtext {
    font-size: 16px;
  }

  .callback-card .row.g-3.mb-3 {
    margin-bottom: 0;
  }

  button.btn.btn-callback {
    font-size: 16px;
  }

  .bulk-text {
    display: block;
    margin-left: 0;
    margin-top: 10px;
    margin: 10px auto 50px auto;
    text-align: center;
    float: none;
  }

  .image-panel {
    display: none;
  }

  .footer-widgets-wrapper {
    padding: 20px 0 20px;
    text-align: center;
  }

  img.footer-track {
    display: none;
  }

  .single-footer-widget {
    text-align: left;
    margin: 0 0 0 25px;
  }

  .footer-widgets-wrapper .single-footer-widget .widget-head {
    margin-bottom: 5px;
  }

  .footer-widgets-wrapper .single-footer-widget .footer-content p b {
    display: table;
    margin: 5px 0 5px 0;
  }

  .footer-middle .col.col-lg-2 {
    width: 50%;
    padding: 0 0 20px 15px;
  }


  .row.justify-content-md-center.footer-middle {
    margin: 15px 0 15px 10px;
  }

  .footer-middle .col.col-lg-2 span {
    line-height: 6px;
    display: inline-block;
    text-align: left;
    float: left;
    width: 65%;
    line-height: 17px;
    padding: 0 0 0 10px;
  }

  .footer-middle .col.col-lg-2 img {
    float: left;
    display: inline-block;
  }

  .footer-links span {
    display: none;
  }

  .footer-links a {
    text-align: left;
    margin: 0 0 10px 25px;
    font-size: 13px;
  }

  .footer-copyright {
    margin: 0 0 40px 25px;
    font-size: 13px;
    text-align: left;
  }

  .footer-links {
    margin: 0 0 25px 0;
  }

  .mean-container .mean-nav ul li img {
    margin: 0 0 10px 0;
  }

  section.team-section .col {
    width: 100%;
  }

  .section-block .row.stats-wrap.px-5 {
    padding: 0 !important;
    margin: 0 !important;
  }

  .section-block .col-6 {
    padding: 0 5px;
    margin: 0 0 10px 0;
  }

  .stat-card {
    padding: 30px 11px 25px 11px;
  }

  .section-block {
    margin-bottom: 10px;
    padding: 0;
  }

  .cv-icon {
    border: 0;
    margin-bottom: 0;
  }

  .journey-section {
    padding: 0px 0 20px;
  }

  .journey-title {
    font-weight: 800;
    font-size: 20px;
    margin-bottom: 10px;
  }

  .dashed-arrow,
  .dashed-arrow-reverse,
  .dashed-arrow-vertical {
    display: none;
  }

  .step-card {
    margin: 0 0 50px 0;
  }

  .journey-section .mb-5 {
    margin-bottom: 0 !important;
  }

  .why-section {
    padding: 0 0 50px;
  }

  .why-title {
    font-size: 20px;
  }

  .cta-inner h3.mb-2 {
    font-size: 20px;
  }

  .cta-inner p.mb-3 {
    font-size: 16px;
  }

  .mission-vision-section .container,
  .core-values-section .container {
    padding: 0;
  }

  section.mt-3.mb-5 {
    padding: 0;
  }

  .fw-semibold {
    font-size: 20px;
  }

  .d-flex.justify-content-center.align-items-center.gap-3.mb-4 {
    padding: 0 0 10px 0;
  }

  #alphabetFilter {
    padding: 0 0 10px 0;
  }

  #alphabetFilter {
    padding: 0 0 10px 0;
    width: 100% !important;
    display: table;
  }

  .alphabet-filter span {
    float: left;
  }

  .container.py-5.branches,
  section.py-5.text-center.why-partner {
    padding-top: 10px !important;
  }

  .why-partner h6 {
    font-size: 20px;
  }

  .why-partner p.text-muted {
    padding: 0;
  }

  h4.fw-bold.text-center.mb-2 {
    font-size: 20px;
  }

  p.text-center.text-muted.mb-4 {
    font-size: 16px;
  }

  section.py-5.faq {
    padding: 0 !important;
  }

  .nav-pills .nav-link {
    padding: 11px 15px;
  }

  .support-card p.mb-4 {
    font-size: 16px;
    font-weight: 300;
  }

  .container.py-5.support {
    padding-top: 10px !important;
    padding-bottom: 20px !important;
  }

  button.btn.btn-orange,
  .btn-light {
    font-size: 16px !important;
  }

  .image-card img {
    width: 100%;
  }

  .support-info-card .icon {
    text-align: left;
    float: none;
  }

  .info-item {
    margin: 0 20px 30px 20px;
  }

  .contact-us h4 {
    font-size: 20px;
  }

  .contact-us p {
    font-size: 16px;
  }

  .container.py-5.contact-us {
    padding-top: 30px !important;
  }

  header.hero-services h2 {
    font-size: 25px;
  }

  header.hero-services p {
    font-size: 16px;
    padding: 10px 0 0 0;
  }

  section.section-services-one,
  section.section-services-one .container {
    padding: 0 !important;
  }

  .services-one-inner {
    background: #FCF7F2;
    padding: 40px 20px 20px 20px;
    border-radius: 0px;
  }

  .hero-services img {
    margin: 0px 0 -70px 0;
    width: 100%;
  }

  .services-card {
    padding: 20px 30px;
    background: #fff;
    border-radius: 10px;
    min-height: inherit;
    text-align: center;
  }

  .services-two-inner {
    padding: 0 0 20px 0;
  }

  .services-two-inner .section-title span {
    width: 100%;
  }

  .services-two-inner .col-md-4.col-sm-4.col {
    margin: 20px 0;
  }

  .services-two-inner .section-title span {
    width: 100%;
    margin: 0 0 30px 0;
  }















}

/* Styles for screens between 1025px and 1366px */
@media only screen and (min-width: 1025px) and (max-width: 1366px) {

  .footer-input input[type="email"],
  .footer-input input[type="text"] {
    min-width: 250px;
  }

  .coupon-code {
    font-size: 20px;
  }

}

.search-close,
.pick-close,
.price-close {
  position: relative;
  top: 0;
  float: right;
  right: 0;
  font-size: 20px;
  color: #fff;
  cursor: pointer;
  background: var(--theme);
  padding: 10px;
  border-radius: 50%;
  padding: 10px 13px;
  margin: -20px -20px 0 0;
}

.price-inner h3,
.pick-inner h3 {
  margin: 10px 0 15px 0;
}

div#alphabetFilter {
  display: none;
}

/* Global FAQ Styles */
.nav-pills .nav-link {
  background: #f5f5f5;
  color: #4E4E4E;
  font-size: 16px;
  padding: 11px 20px;
}

.nav-pills .nav-link.active {
  background: var(--primary-color) !important;
  color: #fff;
}

.nav-pills .nav-link:hover {
  color: #000;
}

.faq .accordion-item {
  background: #FCF7F2;
  border: none;
  border-radius: 12px;
  margin-bottom: 14px;
  overflow: hidden;
}

.faq .accordion-button {
  background: transparent;
  padding: 16px 20px;
  font-size: 16px;
  font-weight: bold;
  color: #000;
  box-shadow: none;
  border: none;
}

.faq .accordion-button:not(.collapsed) {
  background: transparent;
  color: #000;
  box-shadow: none;
  padding-bottom: 4px;
}

.faq .accordion-body {
  background: transparent;
  padding: 0 20px 16px 20px;
  font-size: 14px;
  color: #000;
}

.faq h4.fw-bold.mb-4,
.faq-title {
  font-size: 30px;
}

.faq {
  margin: 25px 0 0 0;
}

/* --- PREMIUM STICKY BAR WITH FLOATING LABELS --- */
.classy-sticky-bar {
  position: fixed;
  bottom: 15px;
  left: 10px;
  right: 10px;
  z-index: 1050;
  /* Smooth slide animation */
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.4s ease;
  transform: translateY(0);
  opacity: 1;
  visibility: visible;
}

/* Modal open hote waqt bar niche slide ho jayega */
.classy-sticky-bar.hide-bar {
  transform: translateY(150%) !important;
  opacity: 0 !important;
}

.bar-container {
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  display: flex;
  justify-content: space-around;
  padding: 8px 5px;
  border-radius: 50px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
  border: 1px solid rgba(255, 255, 255, 0.3);
}

.action-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-decoration: none !important;
  position: relative;
  /* Labels ke liye */
  flex: 1;
}

.icon-circle {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  color: #fff;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

/* Tumhara Original Floating Label Style */
.action-btn span {
  font-size: 10px;
  font-weight: 700;
  color: #ffffff;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  position: absolute;
  border-radius: 24px;
  top: -32px;
  /* Label ko icon ke upar position karna */
  padding: 2px 10px;
  white-space: nowrap;
}

/* Gradients as per screenshot */
.call-btn .icon-circle,
.call-btn span {
  background: linear-gradient(45deg, #007bff, #00c6ff);
}

.whatsapp-btn .icon-circle,
.whatsapp-btn span {
  background: linear-gradient(45deg, #25D366, #128C7E);
}

.pickup-btn .icon-circle,
.pickup-btn span {
  background: linear-gradient(45deg, #ff5e14, #ff8c00);
}

/* --- SMOOTH SLIDE DOWN MODAL ANIMATION --- */
.modal.fade .modal-dialog {
  transform: translateY(-100px);
  /* Modal shuru mein upar rahega */
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.modal.show .modal-dialog {
  transform: translateY(0);
  /* Smoothly slide down hokar center aayega */
}

/* Click feedback */
.action-btn:active {
  transform: scale(0.9);
}

/* Modal Custom Styling */
.modal-content-custom {
  background-color: #FBE6D5 !important;
  border-radius: 20px !important;
  border: none !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}

.modal-header .modal-title {
  font-weight: 700;
  color: #444;
}

.custom-form-label {
  color: #888;
  font-size: 14px;
  font-weight: 500;
  margin-bottom: 5px;
}

.custom-input {
  border-radius: 10px !important;
  border: 1px solid #ddd !important;
  padding: 12px !important;
  font-size: 14px !important;
}

.custom-input:focus {
  border-color: var(--primary-color) !important;
  box-shadow: 0 0 0 0.25rem var(--primary-shadow) !important;
}

.btn-submit-custom {
  background-color: var(--primary-color) !important;
  border: none !important;
  border-radius: 10px !important;
  padding: 12px !important;
  font-weight: 700 !important;
  text-transform: uppercase;
  letter-spacing: 1px;
}

/* --- Modal Header Styling --- */
.av-modal-header {
  border-bottom: none !important;
  padding: 1.5rem 1.5rem 0.5rem 1.5rem !important;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.av-header-content {
  display: flex;
  align-items: center;
}

/* Icon Box beside Title */
.av-header-icon-box {
  background: #ffffff;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  margin-right: 15px;
  box-shadow: 0 4px 12px rgba(250, 117, 42, 0.15);
}

.av-header-icon-box i {
  color: var(--primary-color);
  /* Primary Color */
  font-size: 22px;
}

.av-modal-title {
  font-weight: 800 !important;
  color: #333;
  line-height: 1.2;
  margin-bottom: 0;
}

.av-modal-subtitle {
  font-size: 12px;
  color: #888;
  font-weight: 500;
  margin-bottom: 0;
}

/* Close Button Styling */
.av-btn-close {
  background-color: #fff;
  border-radius: 50%;
  padding: 10px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  transition: all 0.3s ease;
}

.av-btn-close:hover {
  transform: rotate(90deg);
  background-color: var(--primary-color);
  opacity: 1;
}

/* The Subtle Primary Line Under Header */
.av-header-line {
  height: 4px;
  width: 50px;
  background: linear-gradient(90deg, var(--primary-color), #ff8c00);
  border-radius: 10px;
  margin-left: 1.5rem;
  margin-top: 5px;
}

/* Custom Validation Styles */
input.is-invalid,
textarea.is-invalid,
select.is-invalid,
.custom-input.is-invalid,
.form-control.is-invalid {
  border: 1px solid #dc3545 !important;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='%23dc3545'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4v3.2h-.4zm0 4.2h.4V9h-.4z'/%3e%3c/svg%3e") !important;
  background-repeat: no-repeat !important;
  background-position: right calc(0.375em + 0.1875rem) center !important;
  background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem) !important;
  padding-right: calc(1.5em + 0.75rem) !important;
}

.nice-select.is-invalid {
  border: 1px solid #dc3545 !important;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='%23dc3545'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4v3.2h-.4zm0 4.2h.4V9h-.4z'/%3e%3c/svg%3e") !important;
  background-repeat: no-repeat !important;
  background-position: right 36px center !important;
  background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem) !important;
  padding-right: 50px !important;
}

.invalid-feedback {
  color: #dc3545 !important;
  font-size: 0.825rem;
  display: block;
  margin-top: 5px;
  text-align: left;
  font-weight: 500;
}

/* Ensure focus overrides keep red border and add red shadow for all invalid input types */
input.is-invalid:focus,
textarea.is-invalid:focus,
select.is-invalid:focus,
.custom-input.is-invalid:focus,
.form-control.is-invalid:focus {
  border: 1px solid #dc3545 !important;
  box-shadow: 0 0 0 0.25rem rgba(220, 53, 69, 0.25) !important;
}

/* Nice Select invalid focus states */
.nice-select.is-invalid:focus,
.nice-select.is-invalid:active,
.nice-select.is-invalid.open {
  border: 1px solid #dc3545 !important;
  box-shadow: 0 0 0 0.25rem rgba(220, 53, 69, 0.25) !important;
}

/* --- PREMIUM GALLERY & FEATURED ADS GRID SYSTEM --- */
.gallery-image-container {
  position: relative;
  width: 100%;
  padding-top: 70%;
  /* Aspect Ratio 10:7 approx */
  background-color: #1e2030;
  overflow: hidden;
}

.gallery-image-container img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.ad-image-container {
  position: relative;
  width: 100%;
  padding-top: 56.25%;
  /* 16:9 Aspect Ratio */
  background-color: #1e2030;
  overflow: hidden;
}

.ad-image-container img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.gallery-card,
.ad-card {
  background-color: #1e2030 !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 12px !important;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s ease, border-color 0.3s ease !important;
}

.gallery-card:hover,
.ad-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.4) !important;
  border-color: var(--primary-shadow) !important;
}

.gallery-card:hover img,
.ad-card:hover img {
  transform: scale(1.06);
}

.gallery-card-category,
.ad-card-category {
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--primary-color);
  text-transform: uppercase;
  letter-spacing: 1px;
}

.gallery-card-title,
.ad-card-title {
  color: #ffffff;
  font-weight: 700;
  font-size: 1.05rem;
  line-height: 1.4;
  transition: color 0.3s ease;
}

.gallery-card:hover .gallery-card-title,
.ad-card:hover .ad-card-title {
  color: var(--primary-color);
}

/* Pagination Custom Styles */
.btn-custom-pagination {
  background-color: transparent !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  color: #ffffff !important;
  font-size: 0.85rem !important;
  font-weight: 600 !important;
  padding: 8px 18px !important;
  transition: all 0.3s ease !important;
  border-radius: 6px !important;
}

.btn-custom-pagination:hover:not(:disabled) {
  background-color: var(--primary-color) !important;
  border-color: var(--primary-color) !important;
  color: #ffffff !important;
  box-shadow: 0 4px 12px var(--primary-shadow);
}

.btn-custom-pagination:disabled {
  opacity: 0.4 !important;
  cursor: not-allowed !important;
}

/* Background Section Overrides */
.gallery-section,
.featured-ads-section {
  position: relative;
  border-bottom: 1px solid rgba(255, 255, 255, 0.03);
}

/* ============================================================
   ADS SWIPER SLIDER SECTION STYLES
   ============================================================ */
.ads-slider-section {
  position: relative;
  overflow: hidden;
  background: #4f4844;
}

.ads-slider-section .sub-title {
  color: var(--primary-color);
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  font-size: 14px;
  display: inline-block;
  margin-bottom: 10px;
}

.ads-slider-section .title {
  font-size: 36px;
  font-weight: 800;
}

.ads-slider-section .ads-slider {
  padding: 20px 0 0px 0;
}

.ads-card {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px;
  overflow: hidden;
  transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
  height: 100%;
  display: flex;
  flex-direction: column;
}

.ads-card:hover {
  transform: translateY(-8px);
  border-color: var(--primary-shadow);
  background: rgba(255, 255, 255, 0.05);
}

.ads-media-wrapper {
  position: relative;
  width: 100%;
  height: 220px;
  overflow: hidden;
  background-color: #000;
}

.ads-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease;
}

.ads-card:hover .ads-img {
  transform: scale(1.08);
}

.video-overlay,
.image-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.video-overlay {
  opacity: 1;
  /* Always visible slightly to indicate playable video */
  background: rgba(0, 0, 0, 0.3);
}

.ads-card:hover .video-overlay {
  background: rgba(0, 0, 0, 0.5);
}

.ads-card:hover .image-overlay {
  opacity: 1;
}

.play-btn-circle {
  width: 60px;
  height: 60px;
  background: var(--primary-color);
  color: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  box-shadow: 0 0 20px var(--primary-shadow);
  transition: all 0.3s ease;
}

.play-btn-circle i {
  margin-left: 4px;
  /* Align play icon visually centered */
}

.ads-card:hover .play-btn-circle {
  transform: scale(1.15);
  background: var(--primary-color);
  box-shadow: 0 0 30px var(--primary-shadow);
}

.view-btn {
  background: rgba(255, 255, 255, 0.95);
  color: #100e17;
  padding: 8px 16px;
  border-radius: 30px;
  font-weight: 600;
  font-size: 13px;
  transition: all 0.3s ease;
}

.view-btn i {
  margin-right: 4px;
}

.ads-card:hover .view-btn {
  transform: translateY(0);
}

.ads-content {
  padding: 20px;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.ads-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

.ads-content .badge {
  font-size: 11px;
  font-weight: 600;
  padding: 6px 12px;
  border-radius: 30px;
  text-transform: uppercase;
}

.badge-danger {
  background-color: rgba(220, 53, 69, 0.15) !important;
  color: #dc3545 !important;
  border: 1px solid rgba(220, 53, 69, 0.3);
}

.badge-primary {
  background-color: rgba(0, 123, 255, 0.15) !important;
  color: #007bff !important;
  border: 1px solid rgba(0, 123, 255, 0.3);
}

.ads-link-icon {
  color: rgba(255, 255, 255, 0.6);
  font-size: 14px;
  transition: color 0.3s ease;
}

.ads-link-icon:hover {
  color: var(--primary-color);
}

.ads-card-title {
  font-size: 14px;
  color: #fff;
  margin: 0;
  line-height: 1.4;
}

/* ==========================================================================
   WHY CHOOSE AVAKAAYA SECTION MOBILE RESPONSIVENESS OVERRIDES
   Keeps the desktop inline-styles 100% intact, but adjusts layout for tablet & mobile
   ========================================================================== */
/* Why Choose Us Section Slider Styles */
/* Core Isolation Wrapper */
.why-choose-us-slider-container {
  width: 100%;
  position: relative;
  overflow: hidden !important;
  /* Forces layout clipping outside viewport */
}

.why-choose-us-slider.swiper {
  width: 100% !important;
  overflow: hidden !important;
  /* Enforces strict single slide rendering block */
}

.why-choose-slide {
  border-radius: 40px;
  overflow: hidden !important;
  width: 100% !important;
  max-width: 100% !important;
  flex-shrink: 0 !important;
  box-sizing: border-box !important;
}

/* Strict Internal Track Grid */
.why-choose-slide-track {
  display: flex !important;
  width: 100%;
  min-height: 480px;
  position: relative;
  align-items: center;
  box-sizing: border-box;
}

.why-choose-content-side {
  width: 50% !important;
  padding-left: 80px;
  z-index: 2;
  flex-shrink: 0 !important;
  box-sizing: border-box !important;
}

.why-choose-inner {
  max-width: 420px;
}

.why-choose-heading {
  font-size: 25px;
  font-weight: 700;
  color: #000;
  line-height: 1.1;
  margin-bottom: 25px;
}

.why-choose-text {
  font-size: 18px;
  line-height: 1.5;
  color: #333;
  margin-bottom: 35px;
}

.why-choose-text a {
  color: inherit;
  text-decoration: none;
}

.why-choose-more {
  font-size: 18px;
  font-weight: 700;
  color: #000;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: all 0.3s ease;
}

.why-choose-more:hover {
  color: #FA752A;
  transform: translateX(5px);
}

.why-choose-more span {
  font-size: 22px;
  display: inline-block;
  transition: transform 0.3s ease;
}

.why-choose-more:hover span {
  transform: translateX(4px);
}

/* Absolute Positioning Constraints Fix */
.why-choose-image-side {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 50% !important;
  /* Kept clean 50% inside bounds */
  height: 100%;
  z-index: 1;
  pointer-events: none;
  overflow: hidden;
  /* Clips elements right at the card border line */
}

.why-choose-image {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: bottom right;
}

/* Responsive Media Queries */
@media (max-width: 991.98px) {
  .why-choose-content-side {
    padding-left: 40px !important;
  }
}

@media (max-width: 767.98px) {
  .why-choose-slide-track {
    flex-direction: column !important;
    align-items: stretch !important;
    min-height: auto !important;
    padding: 30px 20px 0 20px !important;
  }

  .why-choose-content-side {
    width: 100% !important;
    padding-left: 0 !important;
    margin-bottom: 20px !important;
  }

  .why-choose-image-side {
    position: relative !important;
    width: 100% !important;
    height: 250px !important;
    margin-top: 20px !important;
  }
}

@media (max-width: 575.98px) {
  .why-choose-slide {
    border-radius: 24px !important;
  }

  .why-choose-slide-track {
    padding: 24px 16px 0 16px !important;
  }

  .why-choose-heading {
    font-size: 20px !important;
    margin-bottom: 12px !important;
  }

  .why-choose-text {
    font-size: 15px !important;
    line-height: 1.4 !important;
    margin-bottom: 15px !important;
  }

  .why-choose-image-side {
    height: 180px !important;
    margin-top: 10px !important;
  }
}

/* Table Header Background Design styling matching image 2 */
.custom-shipping-table {
  width: 100% !important;
  margin-bottom: 0 !important;
  border-collapse: collapse !important;
}

.custom-shipping-table .table-dark-blue,
.custom-shipping-table thead {
  background-color: var(--marquee-bg, #4f4844) !important;
  border: none !important;
}

.custom-shipping-table thead th,
.custom-shipping-table .table-dark-blue th {
  background-color: var(--marquee-bg, #4f4844) !important;
  padding: 14px 20px !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  color: #ffffff !important;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  border: none !important;
  font-family: 'Outfit', 'Inter', sans-serif;
}

/* Light zebra shadow styling pattern */
.shipping-row-card {
  background-color: #ffffff;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06) !important;
  transition: background-color 0.2s ease;
}

.shipping-row-card:nth-child(even) {
  background-color: #fcfdfe;
}

.shipping-row-card:hover {
  background-color: rgba(250, 117, 42, 0.03);
}

.shipping-row-card td {
  padding: 16px 20px !important;
  font-size: 14px !important;
  color: #4f4f4f !important;
  border: none !important;
  font-family: 'Outfit', 'Inter', sans-serif;
}

/* Grand Highlighted Total Color text matching green styling */
.highlighted-total {
  color: var(--price-green, #1b733a) !important;
  font-size: 16px;
  font-weight: 700 !important;
}

/* Flat Premium Corner CTA Button design structure layout */
.btn-primary-pickup {
  background-color: #0d3b66;
  border-color: #0d3b66;
  color: white;
  border-radius: 4px;
  font-size: 12px;
  letter-spacing: 0.5px;
  transition: background 0.2s ease-in-out;
}

.btn-primary-pickup:hover {
  background-color: #061f38;
}

/* Hide marquee when header is sticky */
#header-sticky.sticky .top-marquee-bar {
  display: none !important;
}

.top-marquee-bar {
  background: #4f4844;
  color: #ffffff;
  font-size: 13.5px;
  height: 38px;
  line-height: 38px;
  position: relative;
  overflow: hidden;
  z-index: 1000;
  border-bottom: 2px solid var(--theme2, #F7C600);
  display: flex;
  align-items: center;
  font-family: 'Outfit', 'Inter', sans-serif;
}

.top-marquee-bar a {
  color: #ffffff;
  text-decoration: none;
  transition: color 0.3s ease;
  font-weight: 500;
}

.top-marquee-bar a:hover {
  color: var(--theme2, #F7C600);
}

/* Badge styling */
.top-marquee-bar .marquee-badge {
  background: var(--theme, #FA752A);
  color: #ffffff;
  padding: 0 12px;
  font-weight: 700;
  font-size: 11px;
  text-transform: uppercase;
  height: 24px;
  line-height: 24px;
  border-radius: 4px;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  flex-shrink: 0;
  letter-spacing: 0.5px;
}

.top-marquee-bar .pulse-dot {
  width: 6px;
  height: 6px;
  background-color: #ffffff;
  border-radius: 50%;
  margin-right: 6px;
  display: inline-block;
  animation: marqueePulse 1.5s infinite;
}

@keyframes marqueePulse {
  0% {
    transform: scale(0.9);
    opacity: 0.5;
  }

  50% {
    transform: scale(1.2);
    opacity: 1;
  }

  100% {
    transform: scale(0.9);
    opacity: 0.5;
  }
}

.top-marquee-bar .marquee-badge::after {
  content: '';
  position: absolute;
  right: -5px;
  top: 50%;
  transform: translateY(-50%);
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
  border-left: 5px solid var(--theme, #FA752A);
}

/* Close button styling */
.top-marquee-bar .marquee-close {
  cursor: pointer;
  font-size: 15px;
  color: rgba(255, 255, 255, 0.6);
  padding: 0 5px 0 10px;
  z-index: 2;
  transition: color 0.3s ease, transform 0.2s ease;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.top-marquee-bar .marquee-close:hover {
  color: #ffffff;
  transform: scale(1.1);
}

/* FIXED MARQUEE ANIMATION LOGIC */
.top-marquee-bar .marquee-content-wrapper {
  flex-grow: 1;
  overflow: hidden;
  position: relative;
  height: 100%;
  margin: 0 15px;
  display: flex;
  align-items: center;
}

.top-marquee-bar .marquee-track {
  display: flex;
  width: max-content;
  animation: topMarqueeScroll 40s linear infinite;
}

.top-marquee-bar .marquee-track:hover {
  animation-play-state: paused;
  /* Hover karne par scroll ruk jayega */
}

.top-marquee-bar .marquee-scroll-list {
  display: flex;
  align-items: center;
  white-space: nowrap;
}

.top-marquee-bar .marquee-scroll-item {
  padding: 0 35px;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  position: relative;
  letter-spacing: 0.2px;
}

.top-marquee-bar .marquee-scroll-item::after {
  content: '✦';
  position: absolute;
  right: -3px;
  color: var(--theme2, #F7C600);
  font-size: 9px;
  opacity: 0.8;
}

/* Keyframes for seamless 50% loop */
@keyframes topMarqueeScroll {
  0% {
    transform: translate3d(0, 0, 0);
  }

  100% {
    transform: translate3d(-50%, 0, 0);
  }
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .top-marquee-bar {
    font-size: 12px;
    height: 34px;
    line-height: 34px;
  }

  .top-marquee-bar .marquee-badge {
    height: 20px;
    line-height: 20px;
    padding: 0 8px;
    font-size: 9.5px;
  }

  .top-marquee-bar .marquee-scroll-item {
    padding: 0 20px;
  }
}


/* Section Styling */
.testimonial-section {
  background-color: #f9f9f9;
}

.section-title {
  font-size: 2rem;
  color: #2c3e50;
  font-weight: 700;
}

.section-subtitle {
  font-size: 1rem;
  color: #777777;
}

.title-separator {
  width: 50px;
  height: 3px;
  background-color: #FA752A;
}

/* Card Styling */
.testimonial-card {
  background: #ffffff;
  padding: 40px 30px;
  border-radius: 16px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.03);
  transition: all 0.3s ease;
  border: 1px solid rgba(0, 0, 0, 0.05);
}

.testimonial-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 15px 35px rgba(250, 117, 42, 0.08);
  border-color: rgba(250, 117, 42, 0.2);
}

/* Avatar Image & Placeholder */
.testimonial-avatar-wrapper {
  display: inline-block;
}

.testimonial-avatar {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid #fff;
  box-shadow: 0 4px 10px rgba(250, 117, 42, 0.44);
}

.testimonial-avatar-placeholder {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background-color: #FA752A;
  color: #fff;
  font-weight: 700;
  font-size: 1.8rem;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 10px rgba(250, 117, 42, 0.2);
}

/* Star Rating styling */
.testimonial-rating {
  font-size: 1.2rem;
}

.testimonial-rating .star {
  color: #e0e0e0;
  /* Gray star empty */
  margin: 0 2px;
}

.testimonial-rating .star.filled {
  color: #FA752A;
  /* Gold star filled */
}

/* Typography Inside Card */
.testimonial-text {
  font-size: 0.95rem;
  line-height: 1.7;
  color: #777777;
  font-style: italic;
}

.author-name {
  font-size: 1.1rem;
  font-weight: 700;
  color: #4f4844;
  letter-spacing: 0.5px;
}

.author-designation {
  font-size: 0.75rem;
  color: #999999;
  font-weight: 600;
  letter-spacing: 1px;
}

/* ==========================================================================
   GET PRICE PAGE & HELPER UTILITY CLASSES
   ========================================================================== */
.bg-light-gray {
  background-color: #f8f9fa !important;
}

.text-dark-blue {
  color: var(--theme-dark, #0b4273) !important;
}

.bg-dark-blue {
  background-color: var(--theme-dark, #0b4273) !important;
}

.bg-theme-orange {
  background-color: var(--primary-color, #FA752A) !important;
}

.text-orange {
  color: var(--primary-color, #FA752A) !important;
}

.border-orange {
  border: 2px solid var(--primary-color, #FA752A) !important;
}

.text-white-force {
  color: #ffffff !important;
}

.font-outfit {
  font-family: 'Outfit', 'Inter', sans-serif;
}

.get-price-title {
  font-size: 2.8rem;
  line-height: 1.2;
}

.get-price-desc {
  line-height: 1.6;
}

.btn-transition {
  transition: all 0.3s ease !important;
}

.btn-transition:hover {
  transform: translateY(-2px);
  opacity: 0.95;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15) !important;
}

.form-control-custom {
  border-radius: 8px !important;
  padding: 10px 15px !important;
}

.rounded-16 {
  border-radius: 16px !important;
}

.border-bottom-0 {
  border-bottom: none !important;
}

.btn-submit-custom {
  font-size: 1.1rem !important;
}

/* ============================================================
   PAGINATION STYLES FOR ADS SLIDER & WHY CHOOSE SLIDER
   ============================================================ */
.ads-slider-pagination,
.why-choose-pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  margin-top: 30px !important;
  position: relative !important;
  bottom: auto !important;
  z-index: 10;
}

.ads-slider-pagination .swiper-pagination-bullet,
.why-choose-pagination .swiper-pagination-bullet {
  width: 10px;
  height: 10px;
  background-color: rgba(255, 255, 255, 0.4);
  opacity: 1;
  border-radius: 5px;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  cursor: pointer;
  margin: 0 !important;
}

.ads-slider-pagination .swiper-pagination-bullet {
  background-color: rgba(255, 255, 255, 0.3);
}

.why-choose-pagination .swiper-pagination-bullet {
  background-color: rgba(255, 255, 255, 0.2);
}

.ads-slider-pagination .swiper-pagination-bullet-active {
  width: 28px;
  background-color: #FA752A !important;
  /* Premium orange theme color */
}

.why-choose-pagination .swiper-pagination-bullet-active {
  width: 28px;
  background-color: #FA752A !important;
  /* Match why choose section accents */
}

/* ============================================================
   TESTIMONIALS SLIDER CUSTOM NAVIGATION BUTTONS STYLES
   ============================================================ */
.testimonial-slider-container {
  position: relative;
  padding: 0 60px;
  /* Space on left/right for navigation buttons */
}

.testimonial-nav-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background-color: #ffffff;
  border: 1px solid #FA752A;
  color: #FA752A;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 10;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.testimonial-nav-btn:hover {
  background-color: #FA752A;
  color: #ffffff;
  border-color: #FA752A;
  box-shadow: 0 6px 16px rgba(250, 117, 42, 0.25);
  transform: translateY(-50%) scale(1.05);
}

.testimonial-nav-btn:active {
  transform: translateY(-50%) scale(0.95);
}

.testimonial-nav-btn i {
  font-size: 14px;
}

.testimonial-nav-prev {
  left: 0;
}

.testimonial-nav-next {
  right: 0;
}

/* Responsive adjustments for Testimonials navigation */
@media (max-width: 991.98px) {
  .testimonial-slider-container {
    padding: 0 40px;
  }

  .testimonial-nav-btn {
    width: 40px;
    height: 40px;
  }
}

@media (max-width: 767.98px) {
  .testimonial-slider-container {
    padding: 0;
  }

  .testimonial-nav-btn {
    display: none;
    /* Hide on mobile devices, use touch swiping instead */
  }
}

/* ============================================================
   FLOATING ACTION BUTTONS (DESKTOP)
   ============================================================ */
.floating-action-buttons {
  position: fixed;
  bottom: 30px;
  /* Initially at the bottom */
  right: 30px;
  flex-direction: column;
  gap: 12px;
  z-index: 9999;
  transition: bottom 0.4s ease-in-out;
}

/* Push buttons up smoothly when the scroll-to-top button appears */
.scroll-up.active-scroll~.floating-action-buttons {
  bottom: 95px;
}

@media (max-width: 991.98px) {
  .scroll-up.active-scroll~.floating-action-buttons {
    bottom: 115px;
    /* Adjust for tablet where scroll-up bottom is 55px */
  }
}

.fab-btn {
  width: 55px;
  height: 55px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  font-size: 28px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
  text-decoration: none !important;
}

.fab-btn:hover {
  transform: translateY(-5px) scale(1.05);
  color: #ffffff;
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
}

.fab-whatsapp {
  background-color: #25d366;
}

.fab-whatsapp:hover {
  background-color: #1ebe56;
}

.fab-support {
  background-color: #FA752A;
  /* Primary brand color */
}

.fab-support:hover {
  background-color: #e06420;
}