/* html, */
body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  overflow-x: hidden;
}

*,
*::after,
*::before {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.btn-danger {
  --bs-btn-bg: #fd3e31;
}
.btn-primary {
  --bs-btn-bg: #318ac5;
}

.navbar {
  transition: background-color 0.3s ease;
  z-index: 1000;
  position: fixed;
  top: 0;
}
.navbar-nav {
  align-items: center;
}
.navbar.transparent {
  background-color: transparent;
}
.navbar.transparent .nav-link {
  color: #000;
  transition: color 0.3s ease;
}
.navbar.transparent .nav-link.active {
  color: black;
  font-weight: bold;
}

.navbar.scrolled .nav-link.active {
  color: #fd3e31;
  font-weight: bold;
}

.scrolled .nav-button-container {
  background-color: black;
}
.scrolled .navbar-toggler {
  border: 1px solid #7e7e7e;
  i {
    color: #7e7e7e;
  }
}

@media (min-width: 992px) {
  .navbar.scrolled .nav-link {
    color: #fff;
    transition: color 0.3s ease;
  }
  .navbar.scrolled {
    background-color: #000;
  }
}

.hero-bg-section {
  width: 100%;
  height: 70vh;
  position: relative;
  overflow: hidden; /* Ensure the zoom effect doesn’t overflow the container */
}

.hero-bg-section img {
  width: 100%; /* Ensure it always spans the full width */
  height: 100%; /* Ensure it always spans the full height */
  object-fit: cover; /* Keeps the image's aspect ratio while covering the area */
  opacity: 0.2;

  /* Apply the animation */
  animation: zoomInLoop 15s infinite alternate ease-in-out;
}

@keyframes zoomInLoop {
  0% {
    transform: scale(1); /* Normal size */
  }
  100% {
    transform: scale(1.1); /* Slightly zoomed-in */
  }
}

.hero-section {
  width: 100%;
  height: 70vh;
  position: absolute;
  top: 0;
}
.hero-left-section {
  width: 100%;
  height: 100%;
  text-align: center;
  background-color: #3498db;
  position: relative;
  clip-path: polygon(0% 0%, 75% 0%, 100% 50%, 75% 100%, 0% 100%);
  background-image: url(/assets/hero-section-left.jpg);
  background-size: cover;
  background-position: left center;
  background-repeat: no-repeat;

  /* Initially set the element to be off-screen to the left */
  transform: translateX(-100%);
  opacity: 0;

  /* Apply the animation */
  animation: slideInLeft 1s ease forwards;
}

@keyframes slideInLeft {
  0% {
    transform: translateX(-100%); /* Start off-screen to the left */
    opacity: 0; /* Start invisible */
  }
  100% {
    transform: translateX(0); /* End in original position */
    opacity: 1; /* End fully visible */
  }
}

.DNOnMd {
  padding-left: 0;
}
@media (max-width: 768px) {
  .DNOnMd {
    display: none;
  }
}
.hero-right-section {
  width: 100%;
  height: 100%;
  margin: auto;
}
.hero-subtitle {
  font-size: 2.5rem;
}
.hero-title {
  font-size: 4rem;
  font-weight: 700;
}
.hero-description {
  font-size: 1.25rem;
}

.offcanvas-logo {
  position: absolute;
  bottom: 5%;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
}

.section-title {
  font-size: 2rem;
}

.section-description {
  color: #7e7e7e;
  font-size: 1.25rem;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
}

.about-section {
  margin-bottom: 9rem;
}
.about-box {
  background-color: #318ac5;
  border-radius: 1rem;
  position: relative;
  display: inline-block; /* Shrinks to fit content (image) */
  margin-right: 15%; /* Optionally, add some padding around the image */
}
@media (max-width: 768px) {
  .about-box {
    margin-bottom: 1.8rem;
  }
  .hero-title {
    font-size: 3rem;
    font-weight: 700;
  }
  .about-box-title {
    transform: none !important;
    position: relative !important;
    left: 0 !important;
    bottom: 0 !important;
  }
  .about-box-img {
    margin: 0 !important;
    padding: 5%;
  }
}

@media (max-width: 500px) {
  .hero-cta {
    display: flex;
    justify-content: center;
  }
}

.about-box-img {
  width: 100%;
  margin: 10% 0 10% 20%;
  max-width: 27rem; /* Keep the max-width constraint if desired */
}

.about-box-title {
  font-size: 2rem;
  transform: rotate(-90deg);
  color: #fff;
  font-weight: 700;
  position: absolute;
  left: -40%;
  bottom: 41.5%;
  width: 100%;
  text-align: center;
  white-space: normal;
  line-height: 1;
}
@media (max-width: 445px) {
  .about-box-title {
    bottom: 35.5%;
  }
}

.about-box-container {
  display: flex;
  justify-content: center; /* Centers the image box */
  align-items: center;
}

.about-us-description {
  font-size: 1.25rem;
}

.about-section-2 {
  padding-top: 10rem;
  background-color: #f7f7f7;
  position: relative;
}

.about-cards {
  position: absolute;
  top: -6.5rem;
}

.about-card {
  width: 13rem;
  height: 13rem; /* Define a specific height for the card to allocate percentage heights */
  border-radius: 12px;
  box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  background-color: #fff;
  padding: 1rem;
  transition: transform 0.3s ease-in-out;
}

.about-card:hover {
  transform: translateY(-10px);
}

.about-card i {
  font-size: 5rem; /* Icon size */
  color: #fd3e31;
  flex-basis: 40%; /* Take up 40% of the card's height */
  display: flex;
  justify-content: center;
  align-items: center;
}

.about-card .card-body {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  height: 60%; /* Remaining 60% for title and text */
  width: 100%;
}

.about-card .card-title {
  flex-basis: 30%; /* Take up 30% of the remaining space */
  font-size: 1.1rem;
  font-weight: 500;
  margin-bottom: 0.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.about-card .card-text {
  flex-basis: 30%; /* Take up 30% of the remaining space */
  font-size: 1.75rem;
  font-weight: bold;
  color: #000;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Card Styling */
.about-2-card1,
.about-2-card2,
.about-2-card3 {
  width: 7rem;
  height: 7rem;
  border-radius: 10px;
  box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #fff;
  z-index: 2;
}

.about-2-card2 {
  background-color: #fd3e31;
}

.about-2-card2 .inner-card {
  background-color: #fd3e31;
  color: white;
  width: 90%;
  height: 90%;
}

.about-2-card1 .inner-card,
.about-2-card3 .inner-card {
  background-color: #fff6f5;
  color: #fd3e31;
  width: 90%;
  height: 90%;
}

/* Icon size */
.about-2-card1 .inner-card i,
.about-2-card2 .inner-card i,
.about-2-card3 .inner-card i {
  font-size: 3rem;
}

/* Connector Positioning */
.connector {
  position: absolute;
  top: 25%;
  transform: translateY(-50%);
  z-index: 1;
}

.connector-left {
  left: calc(22.5% + 5rem);
  width: calc(
    25% - 5rem
  ); /* Adjust this to control how close it is to the cards */
}

.connector-right {
  right: calc(22.5% + 5rem);
  width: calc(
    25% - 5rem
  ); /* Adjust this to control how close it is to the cards */
}

/* Connector Styling */
.connector svg {
  width: 100%;
  height: 100px;
}

.about-2-card-title {
  font-size: 1rem;
  font-weight: 700;
  color: #000;
}

@media (max-width: 768px) {
  .about-cards {
    position: relative;
    top: -6.5rem;
    margin-bottom: -6rem;
  }
  .connector {
    display: none;
  }

  .row {
    flex-direction: column;
  }

  .col-sm-2 {
    max-width: 100%;
  }
}

.service-title {
  font-size: 1.25rem;
}
.hr-line {
  border: 1px solid #000;
  border-radius: 10px;
  width: 40%;
}
.service-description {
  line-height: normal;
  font-size: 1rem;
  margin-bottom: 0;
}
.service-icon {
  background-color: #318ac5;
  color: #fff;
  margin: auto;
  border-radius: 50%;
  width: 3rem;
  height: 3rem;
  i {
    font-size: 1.75rem;
  }
}
.service-img {
  width: 15rem;
  height: 15rem;
  border-radius: 50%;
}

.gallery-section {
  position: relative;

  .row {
    display: flex;
    overflow-x: auto; /* Horizontal scroll */
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE and Edge */
    white-space: nowrap; /* Prevent wrapping */
    gap: 0.5rem; /* Add spacing between images */
    height: 15rem; /* Set fixed height for the row */
    flex-direction: column;
  }

  .row::-webkit-scrollbar {
    display: none; /* Hide scrollbar in Chrome, Safari, Opera */
  }

  .row img {
    flex-shrink: 0; /* Prevent images from shrinking */
    width: auto;
    height: 100%; /* Set fixed height for images */
    padding: 0; /* Add padding */
    cursor: pointer;
    transition: transform 0.2s ease;
  }

  .row img:hover {
    transform: scale(1.05);
    padding-left: 0.5rem;
    padding-right: 0.5rem;
  }

  .modal-img {
    max-width: 100%;
    height: auto;
  }
}

.rates-section {
  background-color: #f7f7f7;
}
.gallery-section {
  background-color: #f7f7f7;
}

.owl-item {
  display: flex;
  justify-content: center;
}

.owl-item.active {
  opacity: 0.5;
  transform: scale(0.8);
}

.owl-item.active.center {
  opacity: 1;
  transform: scale(1);
}

/*** Testimonial ***/

.owl-item .testimonial-item img {
  width: 60px;
  height: 60px;
}

.owl-item .testimonial-item,
.owl-item .testimonial-item * {
  transition: 0.3s;
}

.owl-item.center .testimonial-item {
  background: #318ac5 !important;
}

.owl-item.center .testimonial-item * {
  color: #ffffff !important;
}

.owl-nav {
  margin-top: 30px;
  display: flex;
  justify-content: center;
}

/* .contact-section {
  background-color: #f7f7f7;
} */

.modal-dialog {
  max-width: 80%;
}

.contact-form {
  width: 80%;
}

.contact-info {
  width: 80%;
}
.contact-form-buttons {
  flex-grow: 1;
}

.is-error {
  border-color: red;
}

.is-error + label {
  color: red;
}

.footer {
  visibility: visible;
  animation-delay: 0.1s;
  animation-name: fadeIn;
  padding: 5px 0;
  text-align: center;
}

@media (max-width: 992px) {
  .main-page-logo {
    display: none;
  }
}

@media (min-width: 992px) {
  .offcanvas-logo {
    display: none;
  }
}

@media (max-width: 860px) {
  .main-page-logo {
    display: none;
  }
}

a {
  text-decoration: none;
}

/* EFFECTS */
.hero-right-section > * {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 1s ease, transform 1s ease;
}

.hero-right-section.fade-in > * {
  opacity: 1;
  transform: translateY(0);
}

.about-section > *,
.about-section .row > * {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 1s ease, transform 1s ease;
}

.about-section.fade-in > *,
.about-section.fade-in .row > * {
  opacity: 1;
  transform: translateY(0);
}

/* Initial hidden state for slide-up effect */
.about-card {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

/* Slide-up effect when scrolled into view */
.about-section-2 .about-card.slide-up {
  opacity: 1;
  transform: translateY(0);
}

/* Initial hidden state and slide positioning for services section */
.services-section .service-img,
.services-section .left,
.services-section .right {
  opacity: 0;
}

/* Initial off-screen positions for slide animations */
.services-section .left {
  transform: translateX(-50px); /* Start slightly off-screen to the left */
}

.services-section .right {
  transform: translateX(50px); /* Start slightly off-screen to the right */
}

.services-section .service-img {
  transform: translateY(20px); /* Initial position for fade-in */
}

/* Slide-in and fade-in animations */
.services-section .left.slide-left,
.services-section .right.slide-right,
.services-section .service-img.fade-in {
  opacity: 1;
  transform: translateX(0); /* Reset position */
  transition: opacity 0.6s ease, transform 0.6s ease; /* Only animate on added classes */
}

.services-section .service-img.fade-in {
  transform: translateY(0); /* Reset position for fade-in */
}
.f-seater-card {
  transition: transform 0.4s ease-in; /* Adjust duration as needed */
}

.f-seater-card:hover {
  transform: scale(1.05);
}

/* Navbar adjustments for mobile */
.navbar .navbar-nav .nav-link {
  padding: 0.5rem 1rem;
}

/* Set full width for columns in smaller screens */
@media (max-width: 768px) {
  .col-md-6,
  .col-md-7,
  .col-md-4,
  .col-xl-5,
  .col-xl-6 {
    width: 100% !important;
    max-width: 100%;
  }
  .about-box {
    margin: 0 auto 1.8rem; /* Center and adjust margin for mobile */
  }
  .service-img-container,
  .gallery-section .row img {
    width: 100% !important;
    height: auto !important; /* Maintain aspect ratio */
  }
  .hero-right-section,
  .about-section,
  .services-section {
    padding: 1rem; /* Add padding for better spacing on mobile */
  }
}

/* Reduce icon sizes on mobile for better fit */
.about-card i,
.service-icon i {
  font-size: 2rem !important;
}

/* Hide connectors between elements on smaller screens */
@media (max-width: 768px) {
  .connector {
    display: none;
  }
  .service-icon {
    margin: 0 auto 1rem auto;
  }
}

#modalImage {
  max-width: 80%; /* Limit image to 80% of the page width */
  height: auto; /* Maintain aspect ratio */
}

/* Keyframes for the pulse effect */
@keyframes pulse {
  0% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.2);
    opacity: 0.8;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px); /* Start slightly below */
    }
    to {
        opacity: 1;
        transform: translateY(0); /* Move to its original position */
    }
}

.fade-in-up {
    animation: fadeInUp 0.8s ease-out forwards; /* Smooth fade-in */
}

.animate-on-scroll {
    opacity: 0; /* Initially hidden */
}