$accent-color1: #003152;
$accent-color2: #555;
$accent-colorh: #cfcfcf;
$accent-colord: #000000;
$accent-colorw: #ffffff;
$accent-colorwl: #f2f2f2;
$accent-colorhd: #1a1431;
$accent-colorr: red;
$transition: 0.5s ease-in-out;
$font-familyp: var(--font-poppins);
$font-familys: sans-serif;
* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  font-family: $font-familyp;
}

body {
  overflow-x: hidden; /* Hide horizontal overflow */
}

html {
  scroll-behavior: smooth;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: 35px;
  font-weight: 300;
  color: $accent-color1;
  line-height: 35px;
}
section {
  padding-top: 3rem;
  padding-bottom: 3rem;
}
p {
  font-size: 16px;
  text-transform: capitalize;
}
.fromcontact {
  max-width: 568px;
  width: 100%;
  border: 1px #cdcdcd solid;
  padding: 30px;
  border-radius: 10px;
  margin-top: 25px;
}
.footer {
  background-color: $accent-color1;
  color: white;
}
.gray {
  color: gray;
  line-height: 25px;
}
a {
  text-decoration: none;
}
ul {
  list-style: none;
  padding-left: 0;
}
.bglight {
  background-color: $accent-colorwl;
}
.imagesdsd {
  height: 500px;
  object-fit: cover;
}
.webbutton {
  background-color: $accent-color1; /* Orange color */
  color: white;
  padding: 10px 20px;
  font-size: 16px;
  border: none;
  border-radius: 30px; /* Rounded corners */
  cursor: pointer;
  box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1); /* Subtle shadow */
  transition: all 0.3s ease; /* Smooth transition on hover */

  &:hover {
    background-color: $accent-color2; /* Slightly darker orange */
    box-shadow: 0px 6px 8px rgba(0, 0, 0, 0.2); /* Enhanced shadow on hover */
    transform: translateY(-2px); /* Lift button slightly */
  }
}
@media only screen and (min-device-width: 280px) and (max-device-width: 1080px) {
  .app-container {
    overflow-x: hidden; /* Hide horizontal overflow */
  }

  .app-container::-webkit-scrollbar {
    display: none;
  }
}

::-webkit-scrollbar {
  background-color: #edf6e7;
  width: 0.5rem;
}

::-webkit-scrollbar-thumb {
  background-color: $accent-colord;
  border-radius: 10px;
}

/* Responsive Scss */
@mixin max-width($width) {
  @media only screen and (max-width: #{$width}) {
    @content;
  }
}
@include max-width(575px) {
  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    font-size: 25px;
    // line-height: 35px;
  }

  section {
    padding-top: 1rem;
    padding-bottom: 1rem;
  }
}
.react-multi-carousel-item {
  display: flex;
  justify-content: center;
}
.image-container {
  display: flex;
  align-items: center;
  justify-content: center;
  img {
    width: 230px !important;
    height: 105px;
    object-fit: contain;
  }
}
.swiper-button-prev:after,
.swiper-button-next:after {
  font-size: 20px !important;
  text-transform: none !important;
  color: white !important;
  background: #000000a1 !important;
  padding: 7px 11px !important;
  border-radius: 31px !important;
}
.Nearby {
  img {
    filter: brightness(0) saturate(100%) invert(0);
  }
}
.ourswiper {
  height: 500px;
  @include max-width(767px) {
    height: 300px;
  }
}
