@font-face {
  font-family: "Outfit-ExtraBold";

  src: url("../fonts/Outfit-ExtraBold.woff2") format("woff2"),
    url("../fonts/Outfit-ExtraBold.woff") format("woff");

  font-weight: bold;

  font-style: normal;

  font-display: swap;
}

@font-face {
  font-family: "Outfit-Bold";

  src: url("../fonts/Outfit-Bold.woff2") format("woff2"),
    url("../fonts/Outfit-Bold.woff") format("woff");

  font-weight: bold;

  font-style: normal;

  font-display: swap;
}

@font-face {
  font-family: "Outfit-Light";

  src: url("../fonts/Outfit-Light.woff2") format("woff2"),
    url("../fonts/Outfit-Light.woff") format("woff");

  font-weight: 300;

  font-style: normal;

  font-display: swap;
}

@font-face {
  font-family: "Outfit-Regular";

  src: url("../fonts/Outfit-Regular.woff2") format("woff2"),
    url("../fonts/Outfit-Regular.woff") format("woff");

  font-weight: normal;

  font-style: normal;

  font-display: swap;
}

@font-face {
  font-family: "Outfit-SemiBold";

  src: url("../fonts/Outfit-SemiBold.woff2") format("woff2"),
    url("../fonts/Outfit-SemiBold.woff") format("woff");

  font-weight: 600;

  font-style: normal;

  font-display: swap;
}

@font-face {
  font-family: "Outfit-Medium";

  src: url("../fonts/Outfit-Medium.woff2") format("woff2"),
    url("../fonts/Outfit-Medium.woff") format("woff");

  font-weight: 500;

  font-style: normal;

  font-display: swap;
}

.custom-container {
  padding-left: 40px;

  padding-right: 40px;

  width: 98%;

  margin: auto;
}

.custom-arrow {
  position: absolute !important;

  top: 50% !important;

  transform: translateY(-50%) !important;

  background: none;

  border: none;

  z-index: 10;
}

[type="button"]:focus,
[type="button"]:hover,
[type="submit"]:focus,
[type="submit"]:hover,
button:focus,
button:hover {
  background-color: inherit !important; /* keep parent background */

  color: inherit !important; /* keep original text color */

  text-decoration: none !important; /* remove underline */

  box-shadow: none !important; /* remove Bootstrap focus glow */
}

.right-arrow {
  right: -55px !important;
  width: auto !important;
  opacity: 1 !important;
}

.left-arrow {
  left: -55px !important;
  width: auto !important;
  opacity: 1 !important;
}

.custom-arrow img {
  width: 48px;
  height: auto;
}

.carousel-caption {
  position: absolute;

  top: 40%;

  left: 3% !important;

  transform: translateY(-50%);

  text-align: left !important;

  max-width: 600px;

  width: 100%;
}

.carousel-caption h5 {
  font-size: 3.5rem;

  font-weight: 700;

  color: #fff;

  font-family: Outfit-Bold;
}

.carousel-caption h5 span {
  color: #fb923c;
}

.carousel-inner {
  border-radius: 20px;
}

.carousel-caption p {
  font-size: 1rem;

  color: #f1f1f1;

  margin-bottom: 30px;

  line-height: 1.6;
}

.explore-btn {
  padding: 10px 25px;

  background-color: #fb923c;

  color: #1e3a8a;

  border: none;

  border-radius: 5px;

  font-size: 16px;

  font-weight: 600;

  cursor: pointer;

  transition: background-color 0.3s ease;
}

/* button banner */

.explore-btn {
  padding: 10px 25px;

  background-color: #fb923c;

  color: #1e3a8a;

  border: none;

  border-radius: 5px;

  font-size: 16px;

  font-weight: 600;

  cursor: pointer;

  transition: background-color 0.3s ease;
}

.explore-btn:hover {
  background-color: #f97316;
}

/* Call Us Box Container - Fixed Bottom Right */

.call-us-box-wrapper {
  position: absolute;

  bottom: 90px;

  right: -4px;

  z-index: 999;
}

/* Call Box Styling */

.call-us-box {
  background-color: #1e3a8a;

  color: #fff;

  left: -2px;

  padding: 15px 9px 15px 45px;

  border-top-left-radius: 36px;

  border-bottom-left-radius: 36px;

  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);

  min-width: 180px;

  position: relative;
}

/* Floating Icon Styling */

.floating-call-icon {
  position: absolute;

  top: 0px;

  left: -2px;

  width: 70px;

  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);

  z-index: 1;
}

/* Text inside the box */

.call-text small {
  display: block;

  font-size: 12px;

  line-height: 1.2;

  color: #fff;
}

.call-text span {
  font-weight: bold;

  font-size: 14px;

  color: #fff;

  display: inline-block;

  margin-top: 4px;
}

.call-text {
  padding-left: 29px;
}

/* search bar css */

.search-strip {
  width: 90%;

  height: auto;

  margin: auto;

  margin-top: -40px;

  padding: 1rem;

  position: relative;

  overflow: hidden;

  &::before {
    width: 100%;

    height: 100%;

    background: url(../images/search-frame.svg);

    background-size: 100%;

    position: absolute;

    content: "";

    backdrop-filter: blur(2px);

    left: 0;

    top: 0;

    border-top: 1px solid #ffffff90;

    border-bottom: 1px solid #fff;

    border-radius: 25px;

    overflow: hidden;
  }
}

@media (min-width: 1025px) {
  form#service-search-form {
    height: 57px;
  }
}

.custom-search {
  border-radius: 10px;

  padding: 0;

  background-color: white;

  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);

  overflow: hidden;

  width: 100%;
}

input[type="date"],
input[type="email"],
input[type="number"],
input[type="password"],
input[type="search"],
input[type="tel"],
input[type="text"],
input[type="url"],
select,
textarea {
  border: none !important;
}

.custom-search {
  position: relative;
}

.custom-input {
  border: none;

  padding: 12px 20px 12px 50px; /* left padding increased */

  flex: 1;
}

.custom-input:focus {
  box-shadow: none;

  outline: none;
}

.custom-btn {
  background-color: #fb923c;

  color: #1e3a8a;

  border: none;

  padding: 0 30px;

  border-radius: 10px;
}

.search-icon {
  position: absolute;

  left: 20px;

  top: 50%;

  transform: translateY(-50%);

  width: 20px;

  height: 20px;

  pointer-events: none; /* ensures icon doesn't interfere with input */
}

/* -------------------------------------------------------------------------------------------- */
.call-us-box-wrapper {
  display: inline-flex;
  align-items: center;
  gap: 12px; /* space between icon and button */
  cursor: pointer;
}

/* Button stays static */
.call-us-box {
  color: white;
  display: inline-block;
}

/* Icon can animate */
.floating-call-icon {
  display: inline-block;
  transform-origin: center;
  transition: transform 0.3s ease;
}

/* Hover on wrapper triggers gentle grow-shrink on icon */
.call-us-box-wrapper:hover .floating-call-icon {
  animation: slowGrow 1.2s ease-in-out infinite alternate;
}

/* Keyframes for slow grow and shrink */
@keyframes slowGrow {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(1.2);
  }
}

/*Media Query*/

/*For Tablet*/

@media only screen and (max-width: 1024px) and (min-width: 821px) {
  .carousel-caption h5 {
    font-size: 2rem;
  }

  .carousel-caption {
    top: 40%;

    max-width: 450px;
  }
  .custom-arrow img {
    width: 42px !important;
  }
  .floating-call-icon {
    width: 60px;
  }
  .call-us-box {
    padding: 10px 9px 10px 37px;
  }
}

@media only screen and (max-width: 820px) and (min-width: 768px) {
  .carousel-caption h5 {
    font-size: 2rem;
  }

  .carousel-caption {
    top: 32%;

    max-width: 450px;
  }
  .floating-call-icon {
    width: 60px;
  }
  .call-us-box {
    padding: 10px 9px 10px 37px;
  }
  .call-us-box-wrapper {
    bottom: 55px;
  }
}

/*For Mobile*/

@media only screen and (max-width: 767px) {
  .carousel-item {
    height: 400px;

    border-radius: 15px;

    overflow: hidden;
  }
  .explore-btn {
    padding: 7px 15px;
    font-size: 14px;
  }

  .carousel-item img {
    height: 400px;

    object-fit: cover;
  }

  .carousel-caption h5 {
    font-size: 1.6rem;
  }

  .carousel-caption p {
    font-size: 0.8rem;

    margin-bottom: 15px;
  }

  .carousel-caption {
    padding: 15px;
    top: 40%;
    bottom: auto;
  }

  .call-us-box-wrapper {
    bottom: 40px;
  }
  .call-us-box {
    margin-bottom: 20px;
    padding: 10px 9px 10px 37px;
  }
  button.carousel-control-prev.custom-arrow.left-arrow {
    display: none;
  }
  button.carousel-control-next.custom-arrow.right-arrow {
    display: none;
  }
  .custom-container {
    padding-left: 0;
    padding-right: 0;
  }
  .floating-call-icon {
    width: 60px;
  }
}