.container-0 {
  max-width: 90% !important;
  padding-left: 50px;
  padding-right: 50px;
}

.product-section {
  padding: 80px 0;
}

.product-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 100px;
}

.product-card {
  text-align: center;
  padding: 25px;
  border-radius: 12px;
  background: #3f3f3f;
  transition: all 0.3s ease;
  border: 1px solid #eaeaea;
}

/* Card hover = ONLY background change */
/* .product-card:hover {
  background: #fa0d2d;
} */

/* Name */
.product-name {
  font-size: 20px;
  margin-bottom: 15px;
  font-weight: 600;
  color: #ffffff;
}

.product-name :hover {
  background: #ffffff;
}

/* Image (NO SCALE) */
.product-img img {
  width: 100%;
  max-width: 100%;
  border-radius: 8px;
}

/* Remove image zoom */
.product-card:hover .product-img img {
  transform: none;
}

/* Button */
.product-btn {
  margin-top: 15px;
  display: inline-block;
  padding: 10px 22px;
  background: #ffffff;
  color: #000000;
  border-radius: 25px;
  text-decoration: none;
  transition: all 0.3s ease;
}

/* Button hover changes color independently */
.product-btn:hover {
  background: #fa0d2d;
  color: #ffffff;
}

@media (min-width: 991px) and (max-width: 1400px) {
  .continer {
    max-width: 1100px !important;
  }
  .product-section {
    padding: 60px 0; /* reduced from 80px */
  }

  .product-grid {
    grid-gap: 50px; /* reduced from 40px */
  }

  .product-card {
    padding: 18px; /* reduced from 25px */
    border-radius: 10px;
  }

  .product-name {
    font-size: 17px; /* reduced from 20px */
    margin-bottom: 10px;
  }

  .product-img img {
    border-radius: 6px;
  }

  .product-btn {
    margin-top: 12px;
    padding: 8px 18px; /* reduced button size */
    font-size: 14px; /* smaller text */
    border-radius: 20px;
  }

  /* Hover behaviors remain the same */
  .product-card:hover {
    background: #fa0d2d;
  }

  /* .product-name:hover {
        background: #ffffff;
        color: #000;
    } */

  .product-img img {
    transform: none !important;
  }

  .product-btn:hover {
    background: #ffffff;
    color: #fa0d2d;
  }
}

/* 1 st product */
.container-1 {
  max-width: 1200px !important;
}

.product-gallery-section {
  padding: 60px 0;
}

.product-title {
  text-align: center;
  font-size: 32px;
  font-weight: 700;
  margin-bottom: 40px;
}

/* Grid → 2 per row */
.product-gallery-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 150px;
}

/* Card box */
.gallery-card {
  background: #3f3f3f;
  padding: 18px;
  border-radius: 12px;
  text-align: center;
  transition: all 0.3s ease;
  border: 1px solid #e6e6e6;
}

/* Hover = background color change */
.gallery-card:hover {
  background: #fa0d2d;
  border-color: #fa0d2d;
}

/* Image */
.gallery-img img {
  width: 100%;
  border-radius: 10px;
  display: block;
}

/* Image Name */
.img-name {
  margin-top: 12px;
  font-size: 18px;
  font-weight: 600;
  color: #ffffff;
  transition: color 0.3s ease;
}

/* Text color change on hover */
.gallery-card:hover .img-name {
  color: #fff;
}

/*** Responsive ***/
@media (max-width: 768px) {
  .product-gallery-grid {
    grid-template-columns: 1fr; /* 1 per row */
  }
}

/* 2 nd product */

/* New container */
.container-2 {
  max-width: 90% !important;
}

/* Section spacing */
.product-gallery-section-2 {
  padding: 60px 0;
}

/* 3 Columns */
.product-gallery-grid-2 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 100px;
}

/* Card style */
.gallery-card-2 {
  background: #3f3f3f;
  padding: 18px;
  border-radius: 12px;
  text-align: center;
  transition: all 0.3s ease;
  border: 1px solid #e6e6e6;
}

/* Hover effect */
.gallery-card-2:hover {
  /* background: #fa0d2d;
  border-color: #fa0d2d; */
}

/* Image */
.gallery-img-2 img {
  width: 100%;
  border-radius: 10px;
  display: block;
}

/* Image name */
.img-name-2 {
  margin-top: 12px;
  font-size: 18px;
  font-weight: 600;
  color: #ffffff;
  transition: color 0.3s ease;
}

/* Hover text color */
.gallery-card-2:hover .img-name-2 {
  color: #fff;
}

/* Responsive */
@media (max-width: 768px) {
  .product-gallery-grid-2 {
    grid-template-columns: 1fr;
  }
}

/* 3 rd product */

.product-title h3 {
  font-size: 34px;
  text-align: center;
  margin-bottom: 80px;
  margin-top: 80px !important;
}

/* Container */
.container-3 {
  max-width: 90% !important;
}

/* Section padding */
.product-gallery-section-3 {
  padding: 0px 0;
  padding-bottom: 100px;
  padding-top: 0px;
}
.product-gallery-section-4 {
  padding: 60px 0;
}

/* Grid layout */
.product-gallery-grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 100px;
}

/* Card style */
.gallery-card-3 {
  background: #3f3f3f;
  padding: 18px;
  border-radius: 12px;
  text-align: center;
  transition: all 0.3s ease;
  border: 1px solid #e6e6e6;
}

/* Hover */
.gallery-card-3:hover {
  /* background: #fa0d2d;
  border-color: #fa0d2d; */
}

/* Image style */
.gallery-img-3 img {
  width: 100%;
  border-radius: 10px;
  display: block;
}

/* Name */
.img-name-3 {
  margin-top: 12px;
  font-size: 18px;
  font-weight: 600;
  color: #ffffff;
  transition: color 0.3s ease;
}

/* Hover text change */
.gallery-card-3:hover .img-name-3 {
  color: #fff;
}

/* Responsive */
@media (max-width: 768px) {
  .product-gallery-grid-3 {
    grid-template-columns: 1fr;
  }
}

/* 4th product */

/* Container */
.container-4 {
  max-width: 90% !important;
}

/* Section spacing */
.product-gallery-section-4 {
  padding: 60px 0;
}

/* Grid layout – 3 per row */
.product-gallery-grid-4 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 100px;
}

/* Card UI */
.gallery-card-4 {
  background: #3f3f3f;
  padding: 18px;
  border-radius: 12px;
  text-align: center;
  transition: all 0.3s ease;
  border: 1px solid #e6e6e6;
}

/* Hover effect */
.gallery-card-4:hover {
  /* background: #fa0d2d;
  border-color: #fa0d2d; */
}

/* Image */
.gallery-img-4 img {
  width: 100%;
  border-radius: 10px;
  display: block;
}

/* Image label */
.img-name-4 {
  margin-top: 12px;
  font-size: 18px;
  font-weight: 600;
  color: #ffffff;
  transition: color 0.3s ease;
}

/* Text color change on hover */
.gallery-card-4:hover .img-name-4 {
  color: #ffffff;
}

/* Responsive – 1 per row on mobile */
@media (max-width: 768px) {
  .product-gallery-grid-4 {
    grid-template-columns: 1fr;
  }
}

/* 6th product */

.image-section {
  padding: 50px 0;
}

.row-6 {
  display: flex;
  justify-content: center;
  gap: 30px;
  margin-bottom: 40px;
}

.img-card {
  width: 30%;
  text-align: center;
  background: #3f3f3f;
  padding: 15px;
  border-radius: 12px;
  transition: 0.3s;
}

.img-card img {
  width: 100%;
  border-radius: 10px;
}

.img-card:hover {
  background: #fa0d2d;
}

.img-name {
  margin-top: 10px;
  font-weight: 600;
  font-size: 16px;
}

/* Contact Section */
.contact-section {
  padding: 80px 0;
  width: 100%;
}

/* WRAPPER: Left (3 boxes) + Right (Form) */
.contact-wrapper {
  display: flex;
  gap: 40px;
}

/* Left side – 3 boxes vertical */
.contact-left {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 35px;
}

.contact-box {
  background: #3f3f3f;
  padding: 25px;
  text-align: center;
  border-radius: 5px;
  transition: 0.3s;
}

.contact-box i {
  font-size: 40px;
  color: #ffffff;
  margin-bottom: 10px;
}

.contact-box h4 {
  margin-bottom: 8px;
  font-size: 20px;
  font-weight: 600;
  color: #fff;
}
.contact-box h5 {
  margin-bottom: 8px;
  font-size: 15x;
  font-weight: 600;
  color: #fff;
}
.contact-box p {
  color: #fff;
}

.contact-box:hover {
  background: #fa0d2d;
  color: #ffffff;
}

/* Right side – Form */
.contact-form-box {
  flex: 1.2;
  background: #3f3f3f;
  border-radius: 5px;
  padding: 30px;
}

.contact-form-box h3 {
  margin-bottom: 20px;
  color: #fff;
}

.contact-form-box form input,
.contact-form-box form textarea {
  width: 100%;
  padding: 12px;
  margin-bottom: 15px;
  border-radius: 5px;
  border: 1px solid #ddd;
}

.contact-form-box form textarea {
  height: 120px;
  resize: none;
}

/* Submit button */
.contact-form-box form button {
  width: 100%;
  padding: 12px;
  background: #ffffff;
  color: #fa0d2d;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  font-size: 18px;
}

.contact-form-box form button:hover {
  background: #fa0d2d;
  color: #fff;
}

/* map hover box */

/* Position your map icons */
.loc-img {
  position: absolute;
  cursor: pointer;
}

/* Hover popup base */
.location-popup {
  position: absolute;
  top: -130px;
  left: 50%;
  transform: translateX(-50%);
  background: #fff;
  padding: 15px 18px;
  width: 255px;
  border-radius: 12px;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
  opacity: 0;
  visibility: hidden;
  transition: all 0.25s ease;
  z-index: 999;
}

/* Popup text styles */
.location-popup h4 {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  color: #777;
}

.location-popup .sub-title {
  margin: 3px 0 10px;
  font-size: 15px;
  width: 250px;
  font-weight: 700;
  color: #000000;
}

.popup-info p {
  margin: 5px 0;
  font-size: 15px;
  display: flex;
  align-items: baseline;
  gap: 6px;
}

.popup-info i {
  color: red;
}

/* Show popup on hover */
.loc-img:hover .location-popup {
  opacity: 1;
  visibility: visible;
  top: -150px;
}

.loc-img:hover .popup-1 {
  opacity: 1;
  visibility: visible;
  top: -150px;
}

.loc-img:hover .popup-2 {
  opacity: 1;
  visibility: visible;
  top: -175px;
}
.loc-img:hover .popup-3 {
  opacity: 1;
  visibility: visible;
  top: -235px;
}
.loc-img:hover .popup-4 {
  opacity: 1;
  visibility: visible;
  top: -170px;
}

/* Main static row */
.destination-static {
  display: flex;
  justify-content: center;
  gap: 260px;
  padding: 20px 0;
}

.destination-static-item {
  text-align: center;
}

.destination-static-item .xb-item--img img {
  width: 70px;
  height: auto;
}

.destination-static-item .xb-item--country {
  display: block;
  margin-top: 10px;
  color: #2b2b2b;
  font-size: 16px;
  font-weight: 500;
}

/* Dotted line + bullets section */
.destination-line-wrap {
  position: relative;
  width: 80%;
  margin: 30px auto 0;
  padding-top: 20px;
}

/* Dotted line */
.destination-line {
  width: 100%;
  height: 2px;
  border-bottom: 2px dotted #cfcfcf;
  position: relative;
}

/* Bullet container */
.destination-bullets {
  position: absolute;
  top: 15px;
  width: 100%;
  display: flex;
  justify-content: space-between;
}

/* Bullet style */
.destination-bullets .bullet {
  width: 12px;
  height: 12px;
  background: #fa0d2d;
  border-radius: 50%;
}

.location {
  text-align: center;
}
