/* General Container */
.container {
    max-width: 1200px;
}

.container:hover {
   background-color: transparent !important;
}

/* Tabs Styling */
.custom-tabs .nav-link {
    font-size: 17px;
    font-weight: 500;
    color: #333;
    border: none;
    border-bottom: 2px solid transparent;
    padding: 10px 10px;
    transition: color 0.3s ease, border-bottom 0.3s ease;
}

.custom-tabs .nav-link.active {
    color: #F05325; /* Active tab color */
    border-bottom: 2px solid #F05325;
}

.custom-tabs .nav-item {
    margin-right: 0px;
}

/* Cards Styling */
.card {
    border-radius: 10px;
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.card:hover {
    transform: translateY(-5px);
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
}

.card-img-top {
    height: 180px;
    object-fit: cover;
    border-bottom: 1px solid #eee;
}

.card-title {
    font-size: 1.25rem;
    font-weight: bold;
    color: #333;
}

.card-text {
    font-size: 0.9rem;
    color: #555;
}

.card-footer {
    background-color: #fff;
    border-top: 1px solid #eee;
    font-size: 0.85rem;
}

/* Carousel Controls */
.carousel-container {
    position: relative;
}

.carousel-control-prev,
.carousel-control-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background-color: transparent;
    border: none;
    font-size: 14px;
    font-weight: 700;
}

.carousel-control-prev {
    left: -150px;
}

.carousel-control-next {
    right: -150px;
}

.carousel-control-prev-icon,
.carousel-control-next-icon {
    background-image: none;
    color: #F05325; /* Icon color */
    font-size: 50px;
}

.carousel-control-prev:hover,
.carousel-control-next:hover {
    background-color: transparent;
}

/* Carousel Icon */
.custom-carousel-icon {
    width: 60px;
    height: 60px;
    color: #233845;
}

/* Typography */
.prop-title,
.region-text,
.details-text {
    font-family: "Outfit", sans-serif;
    line-height: 1.45;
}

.prop-title {
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--e-global-color-6843425c);
}

.region-text,
.details-text {
    font-size: 0.9rem;
    font-weight: 400;
    color: var(--e-global-color-6843425c);
    text-decoration: none;
}

/* Buttons */
.btn-orange {
    font-family: "Outfit", sans-serif;
    background-color: #F05325;
    border-radius: 5px;
    color: #fff;
    transition: background-color 0.3s ease, color 0.3s ease; /* Smooth transition */
}

.btn-orange:hover {
    background-color: #D94520; /* New hover color */
    color: #000; /* Optional: Change text color on hover */
}


.view-more {
    font-family: "Outfit", sans-serif;
    font-size: 17px;
    font-weight: 700;
    color: #fff;
}

/* Responsive Row Gap */
.row.g-3 {
    row-gap: 20px;
}

/* Miscellaneous */
.stats-icon {
    color: #f04f23;
}

.label {
    font-family: "Outfit", sans-serif;
    font-size: 0.9rem;
    color: gray;
}


.responsive-img {
    object-fit: cover !important;
    height: 240px !important;
    width: 100% !important;
}

@media (max-width: 768px) {
    .responsive-img {
    object-fit: cover !important;
    height: 200px !important;
    width: 100% !important;
    }
}

.isMobile-scroll {
  overflow-x: auto; /* Enables horizontal scrolling */
  display: flex; /* Aligns child items horizontally */
  -webkit-overflow-scrolling: touch; /* Enables smooth scrolling on iOS */
  white-space: nowrap; /* Prevents items from wrapping */
}

.isMobile-scroll ul {
  display: inline-flex; /* Keeps list items in one row */
  padding: 0;
  margin: 0;
  list-style: none; /* Removes bullet points */
}

.isMobile-scroll::-webkit-scrollbar {
  display: none; /* Hides the scrollbar for a cleaner look */
}

.nav-tabs .nav-item {
  flex-shrink: 0; /* Ensures items maintain their width */
  padding: 0 10px; /* Optional: Adds spacing between tabs */
}


.menu-scroller {
  display: flex;
  align-items: center;
  position: relative;
  overflow: hidden;
  background-color: #fff; /* Optional background color */
  padding: 10px;
}

.menu-container {
  overflow-x: auto;
 height: 40px;
  flex-grow: 1;
  -webkit-overflow-scrolling: touch; /* Smooth scrolling on iOS */
}

.menu {
  display: inline-flex;
  margin: 0;
  padding: 0;
  list-style: none;
  white-space: nowrap;
}

.menu li {
  margin: 0 10px;
}

.menu a {
  text-decoration: none;
  color: #333;
  padding: 10px 15px;
  border-radius: 5px;
  background-color: #fff; /* Optional: Background for menu items */
  transition: background-color 0.3s;
}

.menu a:hover {
  background-color: #fff; /* Change on hover */
}

.scroll-btn {
  background: none;
  border: none;
  font-size: 24px;
  cursor: pointer;
  padding: 5px 10px;
  color: #fff;
}

.scroll-btn:disabled {
  color: #fff;
  cursor: not-allowed;
}

/* For Webkit Browsers (Chrome, Safari) */
.menu-container::-webkit-scrollbar {
    width: 10px; /* Width of the vertical scrollbar */
    height: 10px; /* Height of the horizontal scrollbar */
}

.menu-container::-webkit-scrollbar-thumb {
    background-color: white; /* White scrollbar thumb */
    border-radius: 5px; /* Rounded edges */
    border: 2px solid #ccc; /* Light border for visibility */
}

.menu-container::-webkit-scrollbar-track {
    background-color: #f1f1f1; /* Light grey track */
}

/* For Firefox */
.menu-container {
    scrollbar-color: white #f1f1f1; /* Thumb and track color */
}

/* For Edge */
.menu-container::-ms-scrollbar {
    color: white;
}

/* Show arrows on the image for mobile */
@media (max-width: 768px) {
    .carousel-container {
        position: relative;
    }

    .carousel-control-prev,
    .carousel-control-next {
        position: absolute;
        top: 25%;
        transform: translateY(-50%);
        background-color: #fff; /* Light black background */
        border-radius: 50%;
        width: 40px;
        height: 40px;
        display: flex;
        align-items: center;
        justify-content: center;
        opacity: 9; /* Always visible */
        transition: background-color 0.3s ease;
    }

    .carousel-control-prev:hover,
    .carousel-control-next:hover {
        background-color: #fff;
    }

    .carousel-control-prev {
        left: 20px;
    }

    .carousel-control-next {
        right: 20px;
    }

    .carousel-control-prev svg
    {
        padding-right: 9px;
        width: 30px;
        height: 30px;
        stroke: rgba(0, 0, 0);
        stroke-width: 3px;/* White arrows */
    }
    .carousel-control-next svg {
        padding-left: 10px;
        width: 30px;
        height: 30px;
        stroke: rgba(0, 0, 0);
        stroke-width: 3px; /* White arrows */
    }
}