@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&display=swap");

body {
  font-family: "Poppins", sans-serif !important;
}
::-webkit-scrollbar {
  width: 1px !important;
}
.text-pink{
  color: #f34036;
}
.dropdown:hover .dropdown-menu {
  display: block !important;
}
.hero-section {
  height: 100vh;
  background-image: url("../images/hero_image.png") !important;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}


.hero-shades {
  height: 100vh;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.Choose_us {
  margin-top: 122px;
}
.img {
  height: 50px;
  width: 50px;
}
.color-card {
  width: 150px; 
  height: 100px; 
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 1.5rem;
  color: white;
  border-radius: 10px;
  margin: 5px; 
}
.color-card:hover {
  transform: scale(1.0);
  border: 1px solid #000;
}
.image-container {
  position: relative;
  text-align: center;
  margin-bottom: 20px;
}
.color_shade_image {
  width: 400px;
  height: 300px;
  background-size: contain;
  border: 2px solid #ddd;
  border-radius: 8px;
}

.hero-shades {
  position: relative;
  height: 100vh;
  overflow: hidden;
}

.hero-shades img {
  object-fit: cover;
  width: 100%;
  height: 100%;
}
.navbar-toggler:focus {
  outline: none;
  box-shadow: none;
}

.navbar-toggler:active {
  border: none;
}
.navbar-toggler {
  border: 1px solid !important; 
}

.navbar-toggler:active {
  transform: none !important;
}

.navbar-toggler-icon {
  outline: none !important;     
  border-radius: 50% !important;
}

.navbar-toggler-icon:active {
  outline: none !important;     
  transform: scale(1) !important;
  box-shadow: none !important;  
}


.hero-shades .container {
  max-width: 100%;
  padding: 0 15px;
}
@media (max-width: 768px) {
  .hero-shades {
      background-color: lightblue !important; /* Set background color to light blue */
  }
  .container {
      display: flex;
      flex-direction: column;
  }
  .col-12.col-md-3 {
      order: 1; /* Ensure Asian Paints Shade Card is at the top */
  }
  .col-12.col-md-4 {
      order: 2; /* Ensure the booking form is next */
  }
  /* Position ratings section below the booking form */
  .card.transparent-card:last-child {
      order: 3; 
  }
}

/*
.hero-shades .card {
  opacity: 0.5;
  background-color: white;
  border: none;
}

.hero-shades .card h5,
.hero-shades .card p {
  margin: 0;
  font-size: 1rem;
}
*/
@media (min-width: 768px) {
  .hero-shades .card h5 {
      font-size: 1.25rem;
  }
}

@media (max-width: 576px) {
  /* Adjust the layout for small devices */
  .hero-shades .container {
      padding: 0;
  }
  .hero-shades .card-body {
      padding: 10px;
  }
  .hero-shades .card h5 {
      font-size: 1rem;
  }
  .hero-shades .card p {
      font-size: 0.875rem;
  }
}


.slick-slide {
  margin: 0 10px !important;}
.rating-section {
  position: relative;
  background-size: cover;
  padding: 50px 0;
  color: #333;
}
.whatsapp-icon {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 1000;
}
.whatsapp-icon img {
  width: 126px;
  height: 45px;
}
.footer-bg {
  background: linear-gradient(45deg, rgb(245, 148, 57), rgb(243, 148, 164));
}

.form-control:focus,
.form-select {
  box-shadow: none !important;
  border-color: none !important;
}

.corner {
  border-radius: 25px !important;
}

.how-work .mobile-image {
  display: none;
}

#offcanvasImage {
  position: relative;
  height: 350px;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

#serviceSidebarLabel,
.btn-close {
  z-index: 3;
}

#offcanvasImage .w-100.h-100 {
  z-index: 1;
  background-size: cover;
  background-position: center;
}

.text-white.position-absolute.top-0.start-0 {
  z-index: 2;
  padding: 15px;
}

.bg-overlay {
  background: linear-gradient(
    90deg,
    rgba(0, 0, 0, 0.7) 0%,
    rgba(0, 0, 0, 0.3) 50%,
    rgba(0, 0, 0, 0) 100%
  );
  z-index: 2;
}

.btn-close {
  right: 20px;
  top: 20px;
  background-color: rgb(255, 255, 255);
}
.btn:hover {
  color: #000;
}
#largeImage {
  width: 100%;
  height: 300px;
  object-fit: cover;
}

.preview-img {
  width: 200px;
  height: 80px;
  object-fit: cover;
}

.accordion-button {
  background-color: #f8f9fa;
  color: #000;
  border: none !important;
  box-shadow: none !important;
  border-color: none !important;
}

.accordion-button:not(.collapsed) {
  background: linear-gradient(
    45deg,
    rgb(245, 148, 57),
    rgb(243, 148, 164)
  ) !important;
  color: #fff;
  border: none !important;
  box-shadow: none !important;
  border-color: none !important;
}

.accordion-button:not(.collapsed)::after {
  filter: invert(1);
}

.accordion-body {
  background-color: #e9ecef;
}

.team-carousel .carousel-item {
  text-align: center;
  padding: 20px;
}
.container-main {
  background-color: #f8d1cc;
}
.icon-container {
  background-color: #fa6f67;
  padding: 20px;
  border-radius: 50%;
  display: inline-block;
}

.icon-style {
  font-size: 2rem;
  color: white;
}
.img-fluid1 {
  width: 100%;
  height: auto;
  max-height: 150px;
  object-fit: cover;
}
@media (max-width: 767.98px) {
  .image-mobile-radius {
      border-radius: 1rem 1rem 0 0 !important;
  }
  .overlay-mobile-radius {
      border-radius: 1rem 1rem 0 0 !important;
  }
  .text-mobile-radius {
      border-radius: 1rem 1rem 0 0 !important;
  }
  .call-back-mobile-radius {
      border-radius: 0 0 1rem 1rem !important;
  }
}
@media (min-width: 350px) and (max-width: 397px) {
  .hero-section {
    height: 44vh;
    background-image: url("../images/mobile_hero_image.png") !important;
    background-size: cover;
    background-position: center;
  }
  .how-work .mobile-image {
    display: none !important;
  }

  .how-work .desktop-image {
    display: block !important;
  }

  .from-position {
    bottom: -398px !important;
  }

  .Choose_us {
    margin-top: 414px;
  }
}
@media (min-width: 398px) and (max-width: 668px) {
  .hero-section {
    height: 43vh;
    background-image: url("../images/mobile_hero_image.png") !important;
    background-size: cover;
    background-position: center;
  }
  .how-work .mobile-image {
    display: none !important;
  }

  .how-work .desktop-image {
    display: block !important;
  }

  .from-position {
    bottom: -398px !important;
  }

  .Choose_us {
    margin-top: 414px;
  }
}

@media (min-width: 669px) and (max-width: 767px) {
  .hero-section {
    background-image: url("../images/mobile_hero_image.png") !important;
    background-size: 501px 411px !important;
    background-position: -36px -12px !important;
  }

  .how-work .mobile-image {
    display: block !important;
  }

  .how-work .desktop-image {
    display: none !important;
  }

  .from-position {
    bottom: 75px !important;
  }

  .Choose_us {
    margin-top: -110px;
  }
}

/* Tablets (768px to 1023px) */
@media (min-width: 768px) and (max-width: 940px) {
  .hero-section {
    height: 65vh;
    background-image: url("../images/mobile_hero_image.png") !important;
    background-size: cover;
    background-position: center;
  }

  .how-work .mobile-image {
    display: none !important;
  }

  .how-work .desktop-image {
    display: block !important;
  }

  .from-position {
    bottom: -33px !important;
  }

  .Choose_us {
    margin-top: 06px;
  }
}
@media (min-width: 941px) and (max-width: 1000px) {
  .hero-section {
    height: 30vh;
    background-image: url("../images/mobile_hero_image.png") !important;
    background-size: cover;
    background-position: center;
  }

  .how-work .mobile-image {
    display: none !important;
  }

  .how-work .desktop-image {
    display: block !important;
  }

  .from-position {
    bottom: -220px !important;
  }

  .Choose_us {
    margin-top: 235px;
  }
}
@media (min-width: 1001px) and (max-width: 1024px) {
  .hero-section {
    height: 62vh;
    background-image: url("../images/mobile_hero_image.png") !important;
    background-size: cover;
    background-position: center;
  }

  .how-work .mobile-image {
    display: none !important;
  }

  .how-work .desktop-image {
    display: block !important;
  }

  .from-position {
    bottom: -220px !important;
  }

  .Choose_us {
    margin-top: 235px;
  }
}

@media (min-width: 1025px) and (max-width: 1110px) {
  .hero-section {
    height: 36vh;
    background-image: url("../images/hero_image.png") !important;
    background-size: cover;
    background-position: center;
  }
  .how-work .mobile-image {
    display: none !important;
  }

  .how-work .desktop-image {
    display: block !important;
  }

  .from-position {
    bottom: -149px !important;
  }

  .Choose_us {
    margin-top: 160px;
  }
}
@media (min-width: 1111px) and (max-width: 1440px) {
  .hero-section {
    height: 85vh;
    background-image: url("../images/hero_image.png") !important;
    background-size: cover;
    background-position: center;
  }
  .how-work .mobile-image {
    display: none !important;
  }

  .how-work .desktop-image {
    display: block !important;
  }

  .from-position {
    bottom: -149px !important;
  }

  .Choose_us {
    margin-top: 160px;
  }
}