/* General Styles */

:root {
  --bs-primary: #00b3dc; /* New primary color */
  --bs-primary-rgb: 0, 179, 220; /* RGB version */
}

html,
body {
  overflow-x: hidden;
  scroll-behavior: smooth !important;      /* modern browsers */
}

body {
  font-family: 'Assistant', sans-serif;
  background-color: #FFF; /* used to be #F7F7F7; */
}

.text-ltr {
	direction:ltr;
}

a.link {
  color: #231F20;
  text-decoration:none;
  font-weight:bold;
}

a.link:hover {
	 color: #eb8f23 !important;
    transition: color 0.3s ease-in-out;
	text-decoration:none;
}

a {
	color: #231F20;
}
a:hover {
	/*color: #eb8f23 !important;*/
    transition: all 0.3s ease-in-out;
	/* filter: brightness(1.15); */
	
}

.hide-me {
  display: none !important;
}

.main-wrap {
  padding: 61px 0;

}

.text-link {
	color: #231F20;
}

@media (min-width: 992px) {

  /* lg and up = desktop */
  .main-wrap {
    padding-top: 88px /*102px;*/

  }
}

#back-one {
  position: fixed;
  bottom: 60px;
  z-index: 9999;
  width: 45px;
  height: 45px;
  font-size: 32px;
  text-align: center;
  line-height: 45px;
  color: #f4b738 !important;
}

#back-to-top {
  position: fixed;
  bottom: 120px;
  z-index: 9999;
  width: 45px;
  height: 45px;
  font-size: 32px;
  text-align: center;
  line-height: 45px;
  color: rgb(0 179 220 / 80%) !important;
}

#back-one {
  right: 20px;
  display: none;
}

#back-to-top {
  right: 20px;
  display: none;
}



.phone-number {
  font-size: 2rem;
  font-weight: bold;
}


/* Footer */
.footer {
  background-color: #002855;
  color: white;
  padding: 20px 0;
  text-align: center;
  margin-top: 50px;
}

.swiper-button-next::after,
.swiper-button-prev::after {
  display: none !important;
}

* {
  font-family: 'Assistant', !important;
}

.iframe-section {
  width: 100%;
  border: none;
  overflow: hidden;
  display: block;
}

iframe::-webkit-scrollbar {
  display: none;
  /* Hide scrollbar for cleaner look */
}

/* ✅ Apply 'Assistant' font to the entire website */
body,
html {
  font-family: 'Assistant', !important;
}

/* ✅ Ensure specific elements inherit the font */
button,
input,
textarea,
select {
  font-family: inherit !important;
}

/* ✅ Force the font inside all components */
* {
  font-family: 'Assistant', !important;
}

/* Hero Section */

/* 🚀 Ensure Her
Section is Below Navbar */
.hero-section {
  top: 0;
}

/* ✅ Default (Desktop) */
.hero-slider .swiper-slide {
  max-height: 500px;
}

.hero-img {
  width: 100%;
  height: 100%;
  /* Ensure full height */
  object-fit: fill;
  /* Prevent stretching */
}


.hero-arrow {
  width: 60px;
  height: 60px;
  position: absolute;
  top: 50%;

  transform: translate(-50%, -50%);
  /* Ensures both vertical and horizontal centering */
  background: none;
  border: none;
  cursor: pointer;
  z-index: 10;

  visibility: hidden;
  /* Hide arrows initially */
  opacity: 0;
  transition: opacity 0.3s ease-in-out;


}

/* ✅ RTL Fix: NEXT on LEFT, PREV on RIGHT */
#heroLeftArrow {
  left: 15px;
}

#heroRightArrow {
  right: 15px;
}

@media (max-width: 768px) {
  .hero-slider .swiper-slide {
    max-height: 350px !important;
  }
}

.hero-arrow {
  width: clamp(35px, 5vw, 70px) !important;
  /* Min: 35px | Preferred: 5vw | Max: 70px */
  height: clamp(35px, 5vw, 70px) !important;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  /* Only translate on Y-axis */
  background: none;
  border: none;
  cursor: pointer;
  z-index: 10;
  display: flex;
  align-items: center;
  /* Ensures the image inside is vertically centered */
  justify-content: center;
}

/* ✅ Adjust Left and Right Arrow Positions */
#heroLeftArrow {
  left: 20px !important;
}

#heroRightArrow {
  right: 20px;
}

/* ✅ Ensure Images Inside the Buttons Have Same Dimensions */
.hero-arrow img {
  width: 100%;
  height: auto;
  display: block;
}

@media (max-width: 767px) {
  .hero-arrow {
    width: 45px !important;
    height: 45px !important;
  }
}

@media (max-width: 767px) {
  .hero-arrow img {
    width: 45px !important;
    height: 45px !important;
  }
}





/* ######################### */
/* Services */
/* ######################### */

/* ✅ Make All Items Match the Tallest One */
.services-row {
  display: flex;
  align-items: stretch;
  /* Ensure all items are the same height */
}

/* ✅ Ensure All Service Items Expand Equally */
.service-item {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  /* Forces items to expand equally */
  height: 100%;
  /* Ensures equal height */
}

/* ✅ Force Video to Match the Image Size */
.service-item video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.service-item video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.service-item.large-img video {
  height: 400px;
  /* Adjust to match your images */
}



/* full background */
.bg-service {
  background-color: #031652;
  /* 🔵 Dark blue background */
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

/* Removed dark overlay from this specific item */
.bg-service::before {
  display: none;
}

/* 🔥 Responsive Header */
.responsive-header {
  color: #000;
  font-family: Assistant;
  font-weight: 600;
  font-size: clamp(30px, 4vw, 50px);
  padding-bottom: 20px;
}

/* ✅ Service Item Styles */
.service-item {
  overflow: hidden;
  /*display: block;*/
  position: relative;
}


.service-item-overly::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(0deg, rgba(0, 0, 0, 0.30), rgba(0, 0, 0, 0.30));
  z-index: 1;
}

.bg-service-eb8f23 {
  background-color: #eb8f23;
  /* Existing background color */
  display: flex;
  flex-direction: column;
  /* Ensure text is above the image */
  align-items: center;
  justify-content: flex-start;
  /* Keep content aligned */
  text-align: center;
  padding: 20px;
  height: 100%;
  position: relative;
}

.bg-service-eb8f23::before {
  display: none;

}


@media(min-width:991px) {

  /* ✅ Move Visa card image DOWN */
  .serviceImage {
    margin-top: 220px;
    width: 100%;
    display: flex;
    justify-content: center;
  }
}

@media(max-width:991px) {

  /* ✅ Move Visa card image DOWN */
  .serviceImage {
    margin-top: 100px;
    /* Increase this value to push image further down */
    width: 100%;
    display: flex;
    justify-content: center;
  }
}

.serviceImage img {
  max-width: 60%;
  max-height: auto;
}



.service-item:hover img {
  transform: scale(1.1);
  transition: transform 0.3s ease-in-out;

}



/* Ensure the overlay text is above the dark layer */
.overlay-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: white;
  font-weight: bold;
  text-align: center;
  z-index: 2;
}

.overlay-text-wide {
	position: absolute;
    color: white;
    font-weight: bold;
    text-align: right;
    z-index: 2;
    bottom: 10px;
    right: 20px;
}

/* ✅ Large Image */
.large-img {
  width: 100%;
  height: auto;
}

/* ✅ Fix Row Spacing */
@media (min-width: 991px) {
  .services-row {
    margin-bottom: 20px;
  }
}

/* ✅ Spacing for Small and Big Boxes */
.small-box,
.big-box {

  padding: 5px;
}

.big-box {
  object-fit: fill;
  display: flex;
  flex: 1;
}

.big-box img,
.big-box video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* ✅ Ensures the image/video fills the entire space without empty margins */
}

.small-box img,
.small-box video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* ✅ Ensures the image/video fills the entire space without empty margins */
}


/* ✅ Fix Small Image Spacing on Mobile */
@media (max-width: 768px) {
  .services-section .container-fluid {
    padding-top: 25px;
    padding-left: 15px !important;
    padding-right: 15px !important;
  }

  /* Make sure 2 per row for small images */
  .services-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
  }

  .small-box {
    flex: 0 0 calc(50%);
    max-width: calc(50%);
  }

  .big-box {
    flex: 0 0 100%;
    max-width: 100%;
  }

  /* Remove bottom margin from last row */
  .services-row:last-child {
    margin-bottom: 0;
  }
}

/* ✅ Reverse Order for Second Row Only on Desktop */
@media (min-width: 992px) {
  .second-row {
    display: flex;
    flex-direction: row-reverse;
  }

  .second-row .col-lg-6 {
    order: -1;
  }

  .services-section .col-lg-3,
  .services-section .col-lg-6 {
    padding-left: 12px;
    padding-right: 12px;
  }

  .responsive-header {
    font-size: 60px;
  }

  .service-item div {
    font-size: 24px;
  }

}

/* 🔥 Fix for Mobile (Ensures Equal Heights When Stacked) */
@media (max-width: 768px) {

  .service-item video {
    height: auto;
    /* Prevents video from stretching incorrectly */
    max-height: 200px;
    /* Adjust as needed */
  }
}

@media (max-width: 768px) {

  .second-row .big-box {
    order: -1;
    /* Moves the video to the top */
  }

  .second-row .small-box {
    order: 1;
    /* Moves the small boxes below the video */
  }
}



/* ######################### */
/* Benefits */
/* ######################### */


@media(max-width:768px) {

  /* ✅ Section Styling */
  .benefits-promotions-section {
    padding-bottom: 10px;
  }

}

/* ✅ Swiper Wrapper */
.swiper-container-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

/* ✅ Hide Arrows Wrapper When Unneeded */
.benefits-arrows-wrapper {
  position: absolute;
  top: 50%;
  width: 100%;
  display: flex;
  justify-content: space-between;
  transform: translateY(-50%);
  z-index: 2;
  /* ✅ Ensures arrows appear above the slider */
  pointer-events: none;
  /* ✅ Prevents blocking slider interactions */
}

/* ✅ Arrows */
.benefits-arrow {
  bottom: -1%;

  width: clamp(35px, 5vw, 70px);
  /* Min: 35px | Preferred: 5vw | Max: 70px */
  height: clamp(35px, 5vw, 70px);
  border: none;
  background: none;
  position: absolute;
  pointer-events: auto;
  /* ✅ Allows interaction */
}

/* ✅ Position Arrows at Slider Edges */
#benefitsLeftArrow {
  left: -30px;
  /* ✅ Moves to the left edge of the slider */
}

#benefitsRightArrow {
  right: -30px;
  /* ✅ Moves to the right edge of the slider */
}


@media (min-width:991px) {
  .benefits-slider .swiper-wrapper {
    display: flex;
    align-items: center;
    padding-bottom: 40px !important;

  }

  /* ✅ Fix Swiper Layout */
}

/* ✅ Ensure Equal Width for Slides */
.benefits-slider .swiper-slide {
  flex: 0 0 auto;
  width: 110%;
  overflow: hidden;
  /* Ensure no overflow */
  position: relative;
}

/* ✅ Adjust Image Sizes */
@media (min-width: 769px) {
  .benefits-promotions-section {
    padding: 25px;
  }

  .benefit-img {
    width: clamp(225px, 19vw, 220px);
    height: clamp(225px, 19vw, 220px);
    clip-path: circle(50%);
    /* ✅ Ensures a perfect circle */
    object-fit: cover;
    display: block;
    position: relative;
  }
}

/* ✅ Pagination Dots: Centered on Large Screens */

.benefits-pagination {
  display: flex !important;
  justify-content: center;
  align-items: center;
  margin-top: 20px;
}

@media (min-width: 1200px) {
  .benefit-img {
    width: clamp(150px, 19vw, 350px);
    height: clamp(150px, 19vw, 350px);
    clip-path: circle(50%);
    /* ✅ Ensures a perfect circle */
    object-fit: cover;
    display: block;
    position: relative;
  }
}

/* ✅ Adjust for Medium Screens */
@media (max-width: 768px) {
  .benefits-slider .swiper-slide {
    width: 33.33%;
  }

  .benefits-slider {
    padding: 0 40px;
  }

  .benefit-img {
    width: clamp(280px, 19vw, 290px);
    height: clamp(280px, 19vw, 290px);
    border-radius: 100%;
    object-fit: cover;
    display: block;
    position: relative;
  }
}

/* ✅ Adjust for Small Screens */
@media (max-width: 576px) {
  .benefits-slider .swiper-slide {
    width: 50%;
  }

  .benefit-img {
    width: clamp(175px, 19vw, 200px) !important;
    height: clamp(175px, 19vw, 200px) !important;
    border-radius: 100%;
    object-fit: cover;
    display: block;
    position: relative;
  }
}

/* ✅ Hide Arrows & Pagination on Mobile */
@media (max-width: 567px) {
  .benefits-arrows-wrapper {
    display: none !important;
  }

  .benefits-pagination {
    display: none !important;
  }
}




/* ✅ Large Screens (Biggest Arrows) */
@media (min-width: 1200px) {
  .benefits-arrow {
    width: 70px;
    height: 70px;
  }
}

/* ✅ Medium Screens (Keep Current Size) */
@media (max-width: 1199px) and (min-width: 769px) {
  .benefits-arrow {
    width: 60px;
    height: 60px;
  }
}

/* ✅ Small Screens (Smaller Arrows) */
@media (max-width: 768px) {
  .benefits-arrow {
    width: 40px;
    height: 40px;
  }
}

/* ✅ Extra Small Screens (Hide or Adjust) */
@media (max-width: 567px) {
  .benefits-arrow {
    width: 35px;
    height: 35px;
  }
}


/* ✅ Change text color on hover */
.benefit-card:hover h5 {
  color: #EB8F23;
  /* Your orange color */
  transition: color 0.3s ease-in-out;
}





.benefit-card h5 {
  color: #231F20;
  /* Dark color */
  text-align: center;
  font-family: 'Assistant', sans-serif;
  font-size: clamp(18px, 2vw, 25px);
  /* Responsive size */
  font-style: normal;
  font-weight: 400;
  line-height: 100%;
  transition: color 0.3s ease-in-out;
  /* Smooth color transition */
}

@media (max-width: 768px) {
  .benefits-promotions-section {
    background-color: white !important;
    /* Bootstrap's bg-lite */
  }
}

@media (min-width: 769px) {
  .benefits-promotions-section {
    background-color: transparent !important;
    /* Reset on desktop */
  }
}

.swiper-pagination .swiper-pagination-bullet-active {
  opacity: 1;
  background-color: #EB8F23;
  /* Highlight active dot */
}

/* ✅ Ensure the image is contained within its parent */
.benefit-card {
  overflow: visible !important;
  /* Allow image to move freely */
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  position: relative;
  width: 100%;
  /* Ensures it fills its container */
  height: 150%;

}

/* ✅ Set image container size */
.benefit-card .benefit-img {
  /* overflow: visible; */
  /* Prevents the image from overflowing */
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease-in-out;
}

.benefit-card:hover .benefit-img {
  transform: translateY(-10px);
  /* Moves the image up */
  transition: transform 0.3s ease-in-out;
}

/* ✅ Fix Swiper Layout */
.benefits-slider .swiper-wrapper {
  display: flex;
  align-items: center;
  padding-top: 35px;
}

.benefit-card {
  overflow: visible !important;
  /* Allow hover movement */
  position: relative;
  /* Ensures proper positioning */
}

.swiper-slide {
  overflow: visible !important;
  /* Ensure slide allows movement */
}

@media(min-width:768px) {
  .benefits-promotions-section {
    padding-top: 10px !important;
    /* Moves section down */
  }
}

@media (max-width: 991px) {
  .benefits-promotions-section {
    padding-bottom: 15px !important;
  }

  /* ✅ Fix Swiper Layout */
  .benefits-slider .swiper-wrapper {
    display: flex;
    align-items: center;
    padding-bottom: 20px !important;
    padding-top: 15px !important;
    gap: 15px;
  }
}

@media (min-width: 992px) {
  .benefits-promotions-section {
    padding-top: 3rem !important;
    /* Equivalent to Bootstrap `py-5` */
    padding-bottom: 3rem !important;
  }

  /* ✅ Fix Swiper Layout */


}

/* ########################## */

/* ✅ Fix Section Padding */
.monthly-deals-section {

  padding-bottom: 40px;
  overflow: visible;
  /* Prevent arrows from getting clipped */
}

.monthly-deals-section {
  padding-top: 2rem !important;
  padding-bottom: 2rem !important;
}

/* ✅ Reduce Padding on Mobile */
@media (max-width: 767px) {
  .monthly-deals-section {
    padding-left: 15px !important;
    padding-right: 15px !important;
  }

  .monthly-deals-section {
    padding-top: 2rem !important;
    padding-bottom: 2rem !important;
  }

}

/* ✅ Add spacing between title, arrows, and slider */
.header-arrows-container {
  margin-bottom: 30px;
}

/* ✅ Fix Swiper Wrapper */
.monthly-deals-slider .swiper-wrapper {
  display: flex;
  align-items: stretch;
  min-height: 380px;
  /* margin-top: -15px; */
}

/* ✅ Ensure all deals are equal size */
.monthly-deals-slider .deal-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  height: 100%;
  background: white;
  border-radius: 8px;
  overflow: hidden !important;
  box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease-in-out;
}

/* ✅ Make all deal images equal */
.monthly-deals-slider .deal-img {
  width: 100%;
  height: 320px;
  object-fit: cover;
}

/* ✅ Ensure deal content is uniform */
.monthly-deals-slider .deal-content {
  text-align: center;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.monthly-deals-slider .swiper-backface-hidden {
	border-radius:8px;
	
}

/* ✅ Hover Effect: Change Text Color to Orange */
.monthly-deals-slider .deal-card:hover {
  cursor: pointer;
}

.monthly-deals-slider .deal-card:hover h5,
.monthly-deals-slider .deal-card:hover p {
  color: #EB8F23 !important;
}

/* ✅ Fix Pagination Dots Position */
.monthly-deals-slider .swiper-pagination {
  position: relative !important;
  bottom: auto !important;
  margin-top: 30px !important;
}

/* ✅ Active pagination dot */
.monthly-deals-slider .swiper-pagination .swiper-pagination-bullet-active {
  opacity: 1;
  background-color: #EB8F23;
  /* Highlight active dot */
}

/* ✅ Desktop Arrows */
@media (min-width: 768px) {
  .arrow-container {
    position: absolute;
    left: 0px;
    top: 50%;
    transform: translateY(-50%);
  }

  .arrow-btn {
    display: flex;
  }

  .arrow-icon {
    width: clamp(50px, 3vw, 50px);
    /* Responsive sizing */
    height: auto;
  }

  /* ✅ Hide mobile arrows on desktop */
  .mobile-arrow {
    display: none !important;
  }
}

/* ✅ Mobile Arrows (Swapped in Position) */
@media (max-width: 767px) {
  .mobile-arrow {
    border: none;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    display: flex !important;
  }

  .mobile-arrow-icon {
    width: 45px;
    height: 45px;
  }

  /* ✅ Swap mobile arrows only */
  #dealsRightArrowMobile {
    right: -15px !important;
    /* Moved to left */
  }

  #dealsLeftArrowMobile {
    left: -15px !important;
    /* Moved to right */
  }

  /* ✅ Hide desktop arrows on mobile */
  .arrow-container {
    display: none !important;
  }
}

/* ✅ Ensure the card wraps everything */
.deal-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  height: 100%;
  background: white;
  border-radius: 8px;
  box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  /* ✅ Prevents image overflow */
}

/* ✅ Wrap image inside a separate container */
.deal-img-wrapper {
  width: 100%;
  height: 320px;
  overflow: hidden !important;
  /* ✅ Prevents image from overflowing */
}

/* ✅ Ensure image fills the wrapper */
.deal-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease-in-out;
}

/* ✅ Zoom inside wrapper without affecting text */
.deal-card:hover .deal-img {
  transform: scale(1.1);
}

/* ################### */
/* About Us */

/* ✅ Fix Parent Alignment */
.about-us-text-container {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  /* ✅ Aligns all content (header, text, button) to the right */
  text-align: right;
  /* ✅ Ensures text & button align properly */
}

/* 🔥 Dark Overlay (30% darkness) */
.about-us-media-container::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}

.dark-overlay::before {
  background: rgba(0, 0, 0, 0.3);
  /* 30% dark */

}

/* Ensure text stays above overlay */
.about-us-overlay {
  position: absolute;
  bottom: 10px;
  right: 20px;
  padding: 10px 15px;
  border-radius: 8px;
  text-align: right;
  z-index: 2;
  /* Ensure text is visible above overlay */
}

.about-us-section-custom {
  padding: 40px 0;
  background-color: #fff;
}

@media (max-width: 768px) {
  .about-us-section-custom {
    padding-bottom: 50px;
    padding-top: 10px;
  }
}




/* ✅ Equal Row: Ensures all columns have the same height */
.about-us-equal-row {
  display: flex;
  align-items: stretch;
}

/* ✅ Equal Column: Ensures consistent height */
.about-us-equal-col {
  display: flex;

}

/* ✅ Media Container: Ensures Images & Videos Are the Same */
.about-us-media-container {
  width: 100%;
  height: 500px;
  /* ✅ Set a consistent height */
  overflow: hidden;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ✅ Images & Video: Maintain Aspect Ratio & Prevent Stretching */
.about-us-media {
  width: 100%;
  height: 100%;
  object-fit: fill;
  /* ✅ Keeps all elements uniform */
}

/* ✅ Text Section */
.about-us-text-container {
  padding: 40px;
  display: flex;
  flex-direction: column;
  height: 500px;
  /* ✅ Same height as video/images */
}

/* ✅ Headers & Paragraphs */
.about-us-header {
  color: #031652;
  font-size: 60px;
  font-weight: 700;
}

.about-us-paragraph {
  font-size: 22px;
  line-height: 1.5;
}

/* ✅ Ensures Button Stays Inline */
.about-us-btn {
  display: inline-block;
  /* Prevents full-width stretch */
  width: auto;
  /* Ensures it takes only the needed space */
  text-align: center;
  margin-top: 20px;
  /* Adds spacing below text */
  padding: 12px 24px;
  font-size: 18px;
  font-weight: 500;
  color: #FFF;
  background: #EB8F23;
  border-radius: 5px;
  border: 2px solid #EB8F23;
  text-decoration: none;
  transition: all 0.3s ease-in-out;
  margin-bottom: 15px;
}

/* ✅ Ensures Button Doesn't Stretch on Mobile */
@media (max-width: 768px) {
  .about-us-btn {
    width: fit-content;
    /* ✅ Ensures it only takes necessary space */
  }
}

.about-us-btn:hover {
  display: inline-block;
  /* Prevents full-width stretch */
  width: auto;
  /* Ensures it takes only the needed space */
  text-align: center;
  margin-top: 20px;
  /* Adds spacing below text */
  padding: 12px 24px;
  font-size: 18px;
  font-weight: 500;
  color: #EB8F23;
  background: #FFF;
  border-radius: 5px;
  border: 2px solid #EB8F23;
  text-decoration: none;
  transition: all 0.3s ease-in-out;

}

/* ✅ Overlay Text: Positioned at Bottom Right */
.about-us-overlay {
  position: absolute;
  bottom: 10px;
  right: 20px;
  padding: 1px 1px;
  border-radius: 8px;
  text-align: right;
}

/* ✅ Header Inside Overlay */
.about-us-overlay-header {
  color: #FFF;
  font-family: Assistant, sans-serif;
  font-size: 38px;
  font-weight: 700;
  line-height: 120%;
  margin-bottom: 2px;
}

/* ✅ Subtext Inside Overlay */
.about-us-overlay-subtext {
  color: #FFF;
  font-family: Assistant, sans-serif;
  font-size: 18px;
  font-weight: 400;
  line-height: 130%;
  text-transform: uppercase;
}

/* ✅ Responsive Adjustments */
@media (max-width: 992px) {
  .about-us-header {
    font-size: 50px;
  }

  .about-us-paragraph {
    font-size: 20px;
  }

  .about-us-media-container {
    height: 400px;
    /* Adjust for smaller screens */
  }

  .about-us-text-container {
    height: 400px;
  }
}

@media (max-width: 768px) {
  .about-us-header {
    font-size: 40px;
  }

  .about-us-paragraph {
    font-size: 18px;
  }

  .about-us-media-container {
    height: 220px;
    /* Adjust for mobile */
  }

  .about-us-text-container {
    height: 320px;
  }

  .about-us-overlay {
    bottom: 10px;
    right: 10px;
    padding: 10px 15px;
  }

  .about-us-overlay-header {
    font-size: 28px;
  }

  .about-us-overlay-subtext {
    font-size: 16px;
  }
}

@media (max-width: 480px) {
  .about-us-header {
    font-size: 35px;
  }

  .about-us-paragraph {
    font-size: 16px;
  }

  .about-us-media-container {
    height: 220px;
    /* Smaller height for mobile */
  }

  .about-us-text-container {
    height: 320px;
  }

  .about-us-overlay {
    bottom: 5px;
    right: 5px;
    padding: 8px 12px;
  }

  .about-us-overlay-header {
    font-size: 24px;
  }

  .about-us-overlay-subtext {
    font-size: 14px;
  }
}

/* ✅ Fix Spacing Between Video and Text */
@media (max-width: 768px) {
  .about-us-equal-row {
    flex-direction: column;
    align-items: center;
  }

  .about-us-text-container {
    text-align: center;
    /* ✅ Center text for better mobile UX */
    padding: 0px 20px;
    margin-bottom: -10px !important;
  }

  .about-us-header {
    font-size: 36px;
    /* ✅ Adjusted for smaller screens */
  }

  .about-us-paragraph {
    font-size: 16px;
  }

  .about-us-btn {
    font-size: 18px;
  }
}

.about-us-section-custom .container-fluid {
  padding-left: 15px !important;
  padding-right: 15px !important;
  padding-top: 10px;
}

.about-us-header {
  text-align: right !important;
  /* ✅ Ensures header starts at the same point as text */
}

.about-us-paragraph {
  text-align: right !important;
  /* ✅ Keeps text alignment consistent */
}

@media (max-width: 768px) {
  .about-us-btn {
    margin-bottom: 0;
  }

  /* ✅ Fix Parent Alignment */
  .about-us-text-container {
    margin-bottom: 30px;

  }
}

@media (max-width: 768px) {
  .about-us-equal-row:first-of-type {
    display: flex;

  }

  .about-us-text-container {
    text-align: center;
    /* ✅ Center align for better UX */
  }

  /* ✅ Fix Extra Space Between Video & Images */
  .about-us-equal-row:nth-of-type(2) {
    margin-top: 0 !important;
    /* Removes extra spacing on mobile */
  }
}

@media (max-width: 768px) {

  .about-us-vedio {
    margin-top: 5px;
  }

  .about-us-media-container {
    width: 100%;
    max-width: 400px;
    /* ✅ Ensures the container is not too wide */
    min-height: 200px;
    /* ✅ Adjusts height dynamically */
    display: flex;
    justify-content: center;
    /* ✅ Centers the video */
    align-items: center;
    /* ✅ Centers vertically */
    overflow: hidden;
    /* ✅ Removes extra space */
  }

  .about-us-media-container video {
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    object-fit: cover;
    /* ✅ Fills the container without distortion */
    aspect-ratio: 16 / 9;
    /* ✅ Maintains correct proportions */
    display: block;
  }


}

@media (max-width: 768px) and (min-width: 481px) {
  .about-us-media-container {
    max-width: 100% !important;
    /* ✅ Allows full width between 481px - 768px */
    width: 100% !important;
    /* ✅ Ensures it expands */
    min-height: 320px;
  }
}


/* ################## */
/* Join Us */
/* ################## */

/* Mobile adjustments for Social Media Section */
@media (max-width: 991px) {

  /* Center headings and paragraphs within the social media container */
  .social-media-container h3,
  .social-media-container p,
  .social-media-container h5 {
    text-align: center !important;
  }

  /* Override the right-aligned columns on mobile */
  .social-media-container .social-col {
    text-align: center !important;
  }

  /* Ensure mobile social icons are centered */
  .mobile-social-icons {
    margin: 0 auto;
  }
}


/* Base styles */
.join-us-section {
  margin-top: 80px;
  background: url(/orders/bs5/assets/images/Background.png) no-repeat center center;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	width: 100%;
}

/* Right Side (Form Section) */
.form-section {
  /* background-color: #031652; */
  min-height: 600px;
}

/* Social Media Wrapper: Blue on Top, Orange on Bottom */
.social-media-wrapper {
  /* background: linear-gradient(to left, #031652 50%, #EB8F23 50%); */
  min-height: 650px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px;
  position: relative;
}

/* White box inside social media section */
.social-media-container {
  background-color: white;
  padding: 80px;
  /* Increased padding */

  box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
  width: 100%;
  height: 75%;
  position: absolute;
}

/* Button Styles */
.btn-warning {
  display: flex;
  padding: 7px 20px !important;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  font-weight: 500;
  color: #FFF;
  background: #EB8F23;
  border-radius: 5px;
  border: 2px solid #EB8F23;
  /* ✅ Add border in default state */
  text-decoration: none;
  cursor: pointer;
  transition: all 0.3s ease-in-out;
  /* Smooth transition */
  left: 20%;
}

.btn-warning:hover {
  display: flex;
  padding: 15px 18px;
  align-items: center;
  font-weight: 500;
  color: #EB8F23 !important;
  background: #FFF;
  border-radius: 5px;
  border: 2px solid #EB8F23;
  /* ✅ Add border in default state */
  text-decoration: none;
  cursor: pointer;

}

/* Form Input Styling */
.custom-input {
  border: 0;
  border-bottom: 1px solid white;
  border-radius: 0;
  height: 40px;
  /* Reduced height */
  background: transparent;
  padding-left: 10px;
  margin-top: 20px;
  margin-bottom: 20px;
}

/* Label inside the input field */
.form-group {
  position: relative;
}

.form-label {
  position: absolute;
  right: 10px;
  top: 50%;
  font-size: 16px;
  color: white;
  transform: translateY(-50%);
  pointer-events: none;
  transition: 0.2s;
}

/* Floating label on focus */
.custom-input:focus+.form-label,
.custom-input:not(:placeholder-shown)+.form-label {
  font-size: 16px;

  top: -7px;
}

.form-section {

  padding: 0 30px;
}

/* Mobile: Stack sections & Adjust the split */
@media (max-width: 991px) {
  .join-us-section .row {
    flex-direction: column;
  }


  /* Social Media Section: Keep Split */
  .social-media-wrapper {
    width: 100%;
    padding: 30px 10px;
    min-height: 400px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(to bottom, #031652 50%, #EB8F23 50%);
  }

  /* White box inside should be centered */
  .social-media-container {
    width: 90%;
    max-width: 400px;
    padding: 30px;
    background-color: white;
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
    position: relative;
  }
}

/* Desktop adjustments to increase the content size in social media container */
@media (min-width: 992px) {

  .social-media-container h3,
  .social-media-container p {
    font-size: 1.5em;
    /* Increase font size */
  }

  .social-media-container .col-md-6 p {
    font-size: 1.2em;
    /* Larger text for social links */
  }
}

.text-orange {
  color: #EB8F23;
}


@media (max-width:768px) {

  /* White box inside should be centered */
  .social-media-container {
    width: 90%;
    max-width: 400px;
    padding-right: 25px;
    background-color: white;
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
    position: relative;
  }

}

/* Ensure space between the icon and text */
.social-media-container p img {
  margin-left: 10px;
  /* Adds spacing between icon and text */
  vertical-align: middle;
  /* Aligns icon properly with text */
}

@media (max-width: 991px) {
  .join-us-section {
    /* margin-top: -30px !important; */
    /* Moves section up */
  }
}

@media (max-width: 768px) {
  .join-us-section {
    /* margin-top: -30px !important; */
    /* Moves section up even more on smaller screens */
  }
}

@media (max-width: 768px) {

  /* ✅ Make only this section full width */
  .join-us-section .form-section .col-12,
  .join-us-section .form-section .col-md-6:nth-of-type(5) {
    /* Targets #location field */
    width: 100% !important;
    flex: 0 0 100%;
    max-width: 100%;
  }

  /* ✅ Reduce space between heading and input */
  .join-us-section .form-section .col-12 h5 {}

  .join-us-section .form-section .col-md-6:nth-of-type(5) .form-group {
    margin-bottom: 5px !important;
    /* Less space below input */
  }
}

@media(max-width:768px) {
  .tmuraClub {

    margin-top: 25px;
  }
}

@media(min-width:768px) {
  .inline-form-group::after {
    width: 80%;
    /* ✅ Makes the border width 80% of `.inline-form-group` */
    margin-top: 25px;
  }


  .inline-form-group {
    width: 80%;
    /* ✅ Makes the border width 80% of `.inline-form-group` */

  }
}


.inline-form-group {
  display: grid;
  grid-template-columns: 1fr auto;
  /* ✅ Input takes full available space */
  gap: 10px;
  align-items: center;
  position: relative;
  /* ✅ Needed for absolute positioning */
  height: 55px;
  direction: ltr;
  margin-top: 25px;

}

.inline-form-group::after {
  content: "";
  position: absolute;
  bottom: 0;
  right: 0px;
  width: 100%;
  height: 1px;
  background-color: white;
}


/* Input container occupies its cell */
.input-container {
  width: 100%;
}

/* Label container auto-sizes based on content */
.label-container {
  /* No extra styling needed here */
}

/* Label styling */
.inline-label {
  font-size: 16px;
  color: white;
  text-align: right;
  direction: rtl;
  /* For Hebrew text display */
  white-space: nowrap;
  /* Prevent label wrapping */
}

/* Input styling */
.custom-input {
  background: transparent;
  /* No background */
  border: none;
  /* Remove default borders */
  color: white;
  /* White text */
  width: 100%;
  height: 100%;
  padding: 0 10px;
  /* Horizontal padding */
  direction:rtl;
  /* Text starts at the left */
}

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

@media (max-width: 991px) {

  /* Button Styles */
  .btn-warning {
    width: 100%;

  }

  .col-12.mt-3 h5 {
    margin-bottom: -1rem !important;
    /* Moves "פרטים נוספים" closer to the location field */
  }
}

@media (min-width: 992px) {

  /* ✅ Only for desktops */
  .row.g-3 {
    --bs-gutter-x: 2rem;
    /* ✅ Increase horizontal space */
  }
}

@media (min-width: 992px) {

  /* ✅ Only for desktops */
  .joinUsJoin {
    width: 90%;
  }
}

/* ##################### */
/* Top Nav Bar styles */
/* ######################*/

.btn-icon {
  width: 20px;
  /* Adjust size */
  height: 20px;
  margin-left: 8px;
  /* Spacing between icon and text */
  vertical-align: middle;
}

#hamburger-icon {
  width: 32px;
  /* Match hamburger icon size */
  height: 32px;
  transition: all 0.1s ease-in-out;
}

.navbar-toggler {
  border: none !important;
  box-shadow: none !important;
  outline: none !important;
  background: transparent;
}

/* General Navbar Styling */
.navbar {
  background-color: white;
  box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
  font-family: 'Assistant', sans-serif;
}

.logo-container {
  min-width: 120px;
  max-width: 250px;
}

.logo-image {
  max-width: 110px;
  max-height: 60px;
}

.navbar-brand img {
  height: 75px;
}

.nav-link {
  text-align: center;
  color: #231F20;
  font-size: 22px;
  font-weight: 400;
  line-height: 28.8px;
  padding: 10px;
}

@media (max-width: 991px) {
  .nav-link {
    font-size: 18px;
  }
}

@media (min-width: 991px) {
  .navbar-icons {
    display: flex;
    justify-content: start;
    gap: 15px;
  }

  .navbar-nav {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 25px;
  }

}

/* Navbar Icons */
.navbar-icons img {
  height: 24px;
  width: 24px;
  cursor: pointer;
}

.navbar-icons img:hover {}

.join-btn {
  display: flex !important;
  font-size: 18px;
  padding: 12px 20px;
  font-weight: 500 !important;
  color: #fff !important;
  background: #eb8f23 !important;
  border-radius: 5px !important;
  border: 2px solid #eb8f23 !important;
  text-decoration: none !important;
  cursor: pointer !important;
  transition: all 0.3s ease-in-out !important;
}

.profile-btn {
  /*display: flex !important;*/
  font-size: 18px;
  padding: 8px 20px;
  font-weight: 500 !important;
  color: #fff !important;
  background: #00a6ce !important;
  border-radius: 5px !important;
  border: 2px solid #00a6ce !important;
  text-decoration: none !important;
  cursor: pointer !important;
  transition: all 0.3s ease-in-out !important;
}

.profile-btn:hover {}

.join-btn:hover {
  color: #eb8f23;
  background: #fff;
  border: 2px solid #eb8f23;
  transition: all 0.3s ease-in-out;
}

/* Hamburger Menu */
.navbar-toggler {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

.hamburger-menu {
  display: flex;
  flex-direction: column;
  gap: 5px;
  align-items: start;
}

.navbar-toggler.open .hamburger-menu span:nth-child(1) {
  transform: translateY(8px) rotate(45deg);
  background: red;
}

.navbar-toggler.open .hamburger-menu span:nth-child(2) {
  opacity: 0;
}

.navbar-toggler.open .hamburger-menu span:nth-child(3) {
  transform: translateY(-8px) rotate(-45deg);
  background: red;
}

@media (max-width: 991px) {
  .container-fluid {
    padding: 5px 0px !important;
    position: relative;
  }

  .navbar-brand img {
    height: 40px;
  }

  .logo-container {
    position: relative;
    order: 1;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .navbar-toggler {

    position: relative;
    left: auto;
    transform: none;
  }

  .order-4 {
    order: 3;
  }

  .logo-image {
    display: flex;
    justify-content: start;
    align-items: start;
  }

  .navbar {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1050;
    background-color: white;
  }

  .navbar-overlay {
    position: fixed;
    z-index: 99999999999999999999999999999999;
    top: 60px;
    left: 0;
    width: 100vw;
    height: calc(100vh - 50px);
    background: white;
    z-index: 999;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease-in-out;
  }

  .navbar-overlay.show {
    opacity: 1;
    pointer-events: all;
  }

  .navbar-collapse {
    position: fixed;
    text-align: start;
    width: 100vw;
    margin-right: 50px;
    background: white;
    display: flex;
    flex-direction: column;
    align-items: start;
    gap: 20px;
    z-index: 1001;
    margin-top: 50px;
    transform: translateY(-100%);
    transition: transform 0.3s ease-in-out;
  }

  .navbar-collapse.show {
    transform: translateY(0);
  }

  .navbar-nav {
    display: flex !important;
    justify-content: start !important;
    align-items: start !important;
    gap: 15px;
  }

  .nav-link {
    display: flex;
    justify-content: start;
    align-items: start;
  }

  .join-btn {
    display: block;
    width: 100%;
    border-radius: 0 !important;
  }

  .navbar-icons {
    display: flex;
    gap: 50px;
    justify-content: center;
  }

  .navbar-icons img {
    width: 30px;
    height: 30px;
  }
}

.nav-link {
  padding: 10px;
  justify-content: start;
  font-size: 18px;
  color: #231f20;
}

.join-btn {
  font-size: 16px;
  padding: 10px 15px;
  margin-left: 15px;
}

.order-4 {
  padding-left: 10px;
}

@media (max-width: 991px) {
  .navbar-nav {
    padding-top: 15px;
    padding: 0 !important;
  }

  .nav-link {
    padding: 5px 0 !important;
  }

  .nav-item {
    padding-top: 10px;
  }
}

@media (max-width: 568px) {

  .logo-image {}

  .join-btn {
    margin-left: 1px;
    font-size: 14px;
  }
}

.nav-link:hover {
  color: #eb8f23 !important;
  transition: color 0.3s ease-in-out;
}

@media (min-width: 991px) and (max-width: 1300px) {
  .navbar-nav {
    gap: 15px !important;
  }

  .join-btn {
    font-size: 18px !important;
    padding: 10px 12px !important;
    white-space: nowrap;
  }

  .navbar .container-fluid {
    flex-wrap: nowrap !important;
  }

  .logo-mobile {
    max-width: 90px;
    max-height: 50px;
  }

  .navbar-icons {
    gap: 10px !important;
  }
}

@media (min-width: 992px) {
  .desktop-logo-right {
    max-width: 150px;
    max-height: 80px;
    object-fit: fill;
  }

  .desktop-logo-left {
    max-width: 150px;
    max-height: 80px;
    object-fit: fill;
  }
}

@media (max-width: 1500px) {
  .desktop-logo-right {
    max-width: 100px;
    max-height: 80px;
    object-fit: fill;
  }

  .desktop-logo-left {
    max-width: 100px;
    max-height: 80px;
    object-fit: fill;
  }
}

@media (min-width: 992px) {
  .navbar-overlay {
    position: static;
    width: auto;
    opacity: 1;
    pointer-events: auto;
  }
}

.logo-container {
  flex-shrink: 0;
}

@media (min-width: 991px) and (max-width: 1250px) {

  .desktop-logo-right,
  .desktop-logo-left {
    max-width: 80px;
    max-height: 60px;
  }
}

@media (max-width: 991px) {
  .navbar {
    --bs-navbar-padding-y: 0;
    padding-bottom: 0 !important;
  }
}

/* Default Search Overlay */
.search-overlay {
  position: absolute;
  top: 100%;
  /* Pushes it under the search icon */
  left: 50%;
  /* Default centered */
  transform: translateX(-50%);
  width: 80%;
  /*max-width: 700px;*/
  background: rgba(0, 179, 220, 0.9);
  /* Dark Blue with 90% opacity */
  padding: 15px;
  display: none;
  box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.2);
  transition: opacity 0.3s ease-in-out, top 0.3s ease-in-out;
  z-index: 1000;
  border-radius: 10px;

}

/* Search Box */
.search-box {
  display: flex;
  align-items: center;
  background: #FFF;
  padding: 7px 7px;
  width: 100%;
}

.awesomplete {
  width: 100%;
}


/* 🔹 Mobile: Full Width Search Bar */
@media (max-width: 991px) {
  .search-overlay {
    width: 100vw !important;
    left: 0 !important;
    transform: none !important;
    border-radius: 0 !important;
    top: 60px !important;
    /* Align with navbar */
  }
}

/* Search Input */
.search-input {
  width: 100%;
  padding: 4px 10px;
  font-size: 18px;
  border: none;
  outline: none;
  text-align: right;
  /* RTL alignment */
}

.search-input:focus {
	border: none;
	outline: none;
	box-shadow: none;
}

/* Search Button */
.search-btn {
  width: 24px;
  height: 24px;
  margin-right: 10px;
  cursor: pointer;
  opacity: 0.7;
}

.search-btn:hover {
  opacity: 1;
}

/* Show Search Bar when Active */
.search-overlay.active {
  display: block;
  opacity: 1;
}

/* Sticky Join Button */
.sticky-join {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  background: white;
  display: flex;
  justify-content: center;
  text-align: center;
  box-shadow: 0px -4px 6px rgba(0, 0, 0, 0.1);
  z-index: 1000;

}

/* Add space at the bottom of the page */
@media (max-width: 991px) {
  body {
    padding-bottom: 40px;
    /* Adjust based on button height */
  }
}


.sticky-join .join-btn {
  /*display: flex;*/
  justify-content: center;
  text-align: center;
  font-size: 18px;
  padding: 8px 20px;
  font-weight: 500;
  color: white;
  background: #eb8f23;

  text-decoration: none;
  display: inline-block;
  border: 2px solid #eb8f23;
  transition: all 0.3s ease-in-out;
}

.sticky-join .join-btn:hover {
  color: #eb8f23;
  background: white;
  border: 2px solid #eb8f23;
}

/* Mobile Full-Width Search Bar */
@media (max-width: 991px) {
  .search-overlay {
    width: 100vw !important;
    left: 0 !important;
    transform: none !important;
    border-radius: 0 !important;
  }
}

/* 🔹 Make Search Overlay Wider on Desktop */
@media (min-width: 992px) {
  .search-overlay {
    padding: 30px 30px;
    width: 30vw;
    /* Increase width */

  }
}

/* 🔹 Add Triangle Pointer */

@media (min-width: 992px) {
  .search-overlay::before {
    content: "";
    position: absolute;
    top: -15px;
    /* Position above the overlay */
    left: 50%;
    /* Center it */
    transform: translateX(-50%);
    border-left: 15px solid transparent;
    border-right: 15px solid transparent;
    border-bottom: 15px solid rgba(0, 166, 206, 0.9);
    /* Same as background */
  }

  /* 🔹 Adjust for Desktop */
  .search-overlay {
    width: 40vw;
    /*max-width: 800px;*/
    left: auto;
    transform: none;
  }

  .search-overlay::before {
    left: 30px;
    /* Move the triangle to align with the search icon */
    transform: none;
  }
}

/* object info boxes */

	.service-grid {
	  display: grid;
	  grid-template-columns: repeat(12, 1fr);
	  gap: 1rem;
	}

	.box-small {
	  grid-column: span 3;
	}

	.box-half {
	  grid-column: span 6;
	}

	.box-big {
	  grid-column: span 9;
	}

	/* Responsive overrides for mobile (less than 768px wide) */
	@media (max-width: 767.98px) {
	  .box-small {
		grid-column: span 6;
	  }

	  .box-half,
	  .box-big {
		grid-column: span 12;
	  }
	}
	
	/* ######################### */
/* News */
/* ######################### */

        
          .news-video-wrapper {
                min-height:400px;
        }
        
        .desktop-ellipsis {
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }
        
        .notifySwiper {
            width: 100%;
            height: 250px;
          }
          
         

      .notifySwiper-slide {
        padding-left:10px;
        text-align: justify;
        font-size: 18px;
        background: #fff;
        display: flex;
        justify-content: start;
        align-items: start;
        border-bottom: 1px dashed rgba(80,80,80,.6)
        
      }

       .notify-item {
            display:flex;
            flex-direction: column;
            justify-content: space-around;
            align-items: flex-end;
        }
        .notify-header {
          display: flex;
          align-items: center;
          gap: 10px;
         
        }
        
        a.notify-header {
            text-decoration:none;
            color:#231f20;
            padding-top: 10px;
        }
        
        a.notify-header:hover {
            color:#EB8F23;
        }
        
        .notify-icon {
            width: 25px;
            height: auto;
            flex-shrink: 0;
        }
        
        .text-news-box {
          min-height: 380px; /* Or whatever height works for your layout */  
        }
        
        .news-vertical-slider {
          height: 250px;
          overflow: hidden;
          /*border:1px solid red;*/
        }
       

/* ✅ Style for text news swiper */
.news-text-slider {
  width: 100%;
  max-width: 100%;
  padding-bottom: 30px;
	
  /* Ensure space for pagination */
}

@media (min-width: 768px) {

  .news-text-slider .news-swiper-slide {
    background: white;
    padding: 15px;

  }
}

/* ✅ Mobile adjustments */
@media (max-width: 768px) {
  .news-text-slider {}
}

/* ✅ Ensure All Rows Have Equal Height */
.news-updates .row {

  display: flex;
  align-items: stretch;
  padding-left: 15px;
  padding-right: 15px;

}

/* ✅ Force Both Columns to Have the Same Height */
.news-static,
.news-slider-container {
  display: flex;
  flex-direction: column;
  min-height: 100%;
  flex: 1;
}

/* ✅ Make the News Section and Slider Equal in Height */
.news-static {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
  background: white;
  padding: 20px;
  border-radius: 10px;
}



/* ✅ Ensure Each Slide Fills the Available Space */
.news-slider .news-swiper-slide {
  display: flex;
  object-fit: fill;
  /* Change to 'contain' if you want the whole image */
  flex-direction: column;
  justify-content: stretch;
  align-items: center;
  height: 100%;
}



/* ✅ Set a Fixed Aspect Ratio (16:9) for Images */
.news-slide-content {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  /* Ensures more width than height */
  object-fit: cover;
  /* Ensures it fills the area properly */
  border-radius: 10px;
  flex: 1;
}

/* ✅ Adjust Video to Match Image Proportions */
.video-container {
  width: 100%;
  aspect-ratio: 16 / 9;
  /* Matches images */
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-radius: 10px;
  flex: 1;

}

/* ✅ Ensure Embedded Video Follows Aspect Ratio */
.video-embed {
  width: 100%;
  height: 100%;
  object-fit: fill;
}


/* ✅ Responsive Adjustments */
@media (max-width: 992px) {
    
    .news-video-wrapper {
        min-height:400px;
}

  .news-static {
    padding: 15px 0px;
  }

  .video-container,
  .news-slide-content {
    min-height: 450px;
  }
}

@media (max-width: 768px) {
    
    .news-video-wrapper {
        min-height:400px;
}
    
  .news-static {
    padding: 10px;
  }

  .video-container,
  .news-slide-content {
    min-height: 400px;
  }
}



@media (max-width: 576px) {
    
    .news-video-wrapper {
        min-height:250px;
    }
    
  .news-static {
    padding: 8px;
  }

  .video-container,
  .news-slide-content {
    min-height: 350px;
  }
  
  .notifySwiper {
    width: 100%;
    height: 250px;
  }
    .text-news-box {
      min-height: 320px; /* Or whatever height works for your layout */  
    }
    
    .desktop-ellipsis {
        white-space: normal;
        overflow: auto;
    }
  
}

/* ✅ Previous Styles (Preserved) */

/* ✅ Make Static News Section More Responsive */
.news-static {
  background: white;
  border-radius: 10px;
  flex: 1;

}

/* ✅ Make Static News Section More Responsive */
@media(min-width:768px) {
  .news-static {
    padding: 15px;
    background: white;
    border-radius: 10px;
    flex: 1;

  }
}

/* ✅ Responsive Title Size */
.news-static h3 {
  font-size: clamp(1.8rem, 3vw, 2.5rem);
}

/* ✅ Responsive News Headline */
.news-static h5 {
  font-size: clamp(1.2rem, 2vw, 1.8rem);
  font-weight: bold;
}

/* ✅ Responsive News Text */
.news-static p {
  font-size: clamp(1rem, 1.5vw, 1.4rem);
}

/* ✅ Responsive News Date */
.news-static small {
  font-size: clamp(0.8rem, 1.2vw, 1rem);
  color: gray;
}

/* ✅ Link Size (Responsive) */
/*
.news-static a {
  font-size: clamp(1rem, 1.5vw, 1.4rem);
  text-align: left;
  display: block;
  margin-top: 10px;
}
*/

/* ✅ Fix Pagination Position */
.news-updates .news-pagination {
  position: relative !important;
  bottom: -30px !important;
  display: flex;
  justify-content: center;
}

/* ✅ Ensure Swiper Has Space for Pagination */
.news-updates .swiper {
  padding-bottom: 20px !important;
}

/* ✅ Center Arrows & Move to Edges */
.news-updates .news-arrow {
  position: absolute;
  top: 35%;
  transform: translateY(-50%);
  width: clamp(35px, 5vw, 70px) !important;
  /* Min: 35px | Preferred: 5vw | Max: 70px */
  height: clamp(35px, 5vw, 70px) !important;
  background: none;
  border: none;
  z-index: 2;
}

/* ✅ Center Arrows Horizontally at Edges */
#newsLeftArrow {
  left: -20px;
}

#newsRightArrow {
  right: -20px;
}

/* ✅ Mobile Fixes */
@media (max-width: 768px) {
  .news-updates {
    width: 100%;
    padding: 0;
  }

  .news-static {
    width: 100%;

  }

  .news-static h3 {
    text-align: center;
    margin-bottom: 15px;
  }

  .news-static h5 {
    font-size: 1.3rem;
  }

  .news-static p {
    font-size: 1rem;
  }

  /* ✅ Full-width slider on mobile */
  .news-slider-container {
    width: 100%;
    height: auto;
    padding: 0;
  }

  .news-slider {
    width: 100%;
  }

  .swiper-wrapper {
    width: 100%;
  }

  .swiper-slide {
    width: 100%;
  }



  /* ✅ Adjust Arrow Position for Smaller Screens */
  #newsLeftArrow {
    left: -25px;
  }

  #newsRightArrow {
    right: -25px;
  }

  /* ✅ Adjust Slide Height on Mobile */
  .news-slide-content {
    min-height: 300px;
  }
/*
  .news-static a {
    font-size: 1.2rem;
    text-align: left;
    display: block;
  }
  */
}

/* ✅ Make YouTube Video Fit Parent Container */
.video-embed {
  width: 100%;
  height: 100%;
  min-height: 400px;
  display: block;
  cursor: pointer;
  /* ✅ Fix cursor disappearing */
}

/* ✅ Adjust Video Aspect Ratio Based on Screen Size */
@media (max-width: 992px) {
  .video-embed {
    aspect-ratio: 16 / 9;
  }
}

@media (max-width: 768px) {
  .video-embed {
    aspect-ratio: 4 / 3;
  }
}

@media (max-width: 576px) {
  .video-embed {
    aspect-ratio: 1 / 1;
  }
}

.text-orange {
  color: #EB8F23
}

/* 🔥 Slightly More Side Padding on Mobile */
@media (max-width: 768px) {
  .news-updates .container-fluid {
    padding-left: -10px !important;
    /* Slightly increased */
    padding-right: -10px !important;
    /* Slightly increased */
  }
}


@media (max-width: 768px) {
  .news-title {
    text-align: center !important;
    /* ✅ Centers text */
    font-size: 35px !important;
    /* ✅ Increases font size */
    font-weight: bold !important;
    /* ✅ Makes it stand out */

  }

  .news-updates .news-arrow {

    width: 60px;
    height: 60px;

  }

}


  .allNews {
	text-align: left;
  }



@media (min-width: 992px) {
  .news-static {
    flex: 0 0 25%;
    /* Reduce width to 30% instead of 33.33% */
    max-width: 25%;
    /* Ensure it doesn't grow too much */
  }

  .news-slider-container {
    flex: 0 0 75%;
    /* Let the slider take more space */
    max-width: 75%;
  }
}

@media (min-width: 992px) {
  .news-static p {
    font-size: 1rem;
    /* Reduce font size slightly */
    max-width: 90%;
    /* Ensure it doesn’t shrink too much */
    white-space: normal;
    /* Allow natural wrapping */
  }
}


/* ✅ Align text under images and videos to the right in RTL */
.news-text,
.news-slider .news-swiper-slide p,
.news-slider .news-swiper-slide small {
  text-align: right;
  /* Ensures text is right-aligned */
  direction: rtl;
  /* Ensures proper RTL support */
  width: 100%;
  /* Make sure it fills the available space */
  padding-right: 30px;
}

@media (max-width: 991px) {
  .news-updates {
    padding-top: 15px !important;
  }
}

@media (min-width: 992px) {
  .news-updates {
    padding-top: 3rem;
    /* Equivalent to Bootstrap `py-5` */
    /* padding-bottom: 3rem; */
  }
}

@media (max-width: 767px) {
  .news-updates .news-arrow img {
    width: 45px !important;
    height: 45px !important;
  }
}

@media (max-width: 767px) {
  .news-updates .news-arrow {
    width: 60px !important;
    height: 45px !important;
  }


  /* Make Active Pagination Dot Bigger and Change Color */
  .swiper-pagination-bullet-active {

    background: #EB8F23 !important;
    /* Change color only for active dot */
  }

}

/***************/
    /* hero top */
    /***************/
    /* Hero sits below a fixed navbar (85px desktop, 65px mobile) */
    .hero-section-benefits {
      position: relative;
      
      padding-top: 85px;    /* desktop navbar height */
      height: 250px;        /* total hero height */
      overflow: hidden;
    }
    /* Dark overlay */
    .hero-overlay-benefits {
      position: absolute;
      inset: 0;             /* top/right/bottom/left = 0 */
      background: rgba(0,0,0,0.4);
      z-index: 1;
    }
    /* Flex‑stacked inner: breadcrumbs + title centered */
    .hero-inner {
      position: relative;
      z-index: 2;           /* above overlay */
      display: flex;
      flex-direction: column;
      align-items: center;  /* horizontal center */
      justify-content: center; /* vertical center */
      height: calc(100% - 85px); /* hero height minus navbar padding */
      width: 100%;
      gap: 0.5rem;          /* space between breadcrumbs & title */
    }
    /* Breadcrumbs container (injected) */
    .breadcrumbs-container {
      display: flex;
      align-items: center;
      gap: 0.5rem;
    }
    .breadcrumb-link,
    .breadcrumb-current,
    .separator {
      color: #fff;
      text-decoration: none;
      font-weight: 500;
    }
    .breadcrumb-current {
      font-weight: 600;
    }
    /* Hero title */
    .hero-title-benefits {
      margin: 0;
      color: #fff;
      font-size: 42px;
      font-weight: normal;
      text-align: center;
      z-index: 3;
    }
    /* Mobile adjustments */
    @media (max-width: 768px) {
      .hero-section-benefits {
        padding-top: 65px;  /* mobile navbar height */
        height: 250px;
      }
      .hero-inner {
        height: calc(100% - 65px);
      }
      .hero-title-benefits {
        font-size: 32px;
      }
    }
	
	
/* ################################### */
/* Deals Slider Styles */
/* ################################### */

/* ✅ Default Size (Large Screens) */
.deals-arrow-img {
    width: 60px;
    height: 60px;
}

/* ✅ Medium Screens (Desktops & Laptops) */
@media (max-width: 1400px) {
    .deals-arrow-img {
        width: 50px;
        height: 50px;
    }
    .deals-slider-wrapper {
        padding: 0 40px; /* ✅ Reduce padding for smaller screens */
    }
}

/* ✅ Medium Screens (Desktops & Laptops) */
@media (max-width: 1200px) {
    .deals-arrow-img {
        width: 50px;
        height: 50px;
    }
    .deals-slider-wrapper {
        padding: 0 40px; /* ✅ Reduce padding for smaller screens */
    }
}

/* ✅ Small Laptops & Tablets */
@media (max-width: 992px) {
    .deals-arrow-img {
        width: 45px;
        height: 45px;
    }
    .deals-slider-wrapper {
        padding: 0 80px; /* ✅ Reduce padding for smaller screens */
    }
}

/* ✅ Tablets & Large Phones */
@media (max-width: 768px) {
    .deals-arrow-img {
        width: 40px;
        height: 40px;
    }
}

/* ✅ Small Phones */
@media (max-width: 576px) {
    .deals-arrow-img {
        width: 35px;
        height: 35px;
    }
}

/* ✅ Extra Small Phones */
@media (max-width: 400px) {
    .deals-arrow-img {
        width: 30px;
        height: 30px;
    }
}

    /* ✅ Full-Width Wrapper to Allow Arrows to Move */
.deals-slider-wrapper {
    position: relative;
    width: 100vw; /* ✅ Expands full width of viewport */
    max-width: 100%; /* ✅ Ensures it doesn't break layout */
    overflow: hidden; /* ✅ Prevents extra slides from showing */
    display: flex;
    justify-content: center;
}

    .container{
        padding: 0 80px; /* Increase padding to give arrows room */
        overflow: visible;

    }
/* ✅ Title Container (Ensures Centering) */
.deals-slider-title-container {
    padding-top: 20px;
    text-align: center; /* Center the text */
}

/* ✅ Title Styling */
.deals-slider-title {
    padding-bottom: 40px;    
    font-size: 50px;
    display: inline-block; /* Keeps it centered */
    position: relative;
    color: #231F20;
}

/* ✅ Underline Adjusted to Title Width */
.deals-slider-title .title-underline {
    display: block;
    width: 50%; /* Matches text width */
    height: 3px;
    background-color: #EB8F23;
    position: absolute;
    bottom: -5px;
    left: 50%;
    transform: translateX(-50%);
}


    .deals-slider{
        position: relative;
    max-width: 1500px; /* ✅ Adjust width based on your design */
    width: 100%;
    padding-left: 10px;
    padding-right: 10px;
    padding-bottom: 0px;
        
    }

.deals-slider-section{
    padding-top: 20px;
}
/* ✅ Ensure the Parent Container Allows Enough Space */
.deals-slider-section .container {
    max-width: 100%;
    padding: 0 80px; /* ✅ Enough space for arrows */
    position: relative; /* ✅ Keeps arrows inside */
}
/* ✅ Default for Large Screens */
.deals-slider-wrapper {
    padding: 0 80px;
}

/* ✅ Large Screens (1200px - 1400px) */
@media (max-width: 1400px) {
    .deals-slider-wrapper {
        padding: 0 40px;
    }
}

/* ✅ Medium Screens (992px - 1199px) */
@media (max-width: 1200px) {
    .slider-wrapper {
        padding: 0 30px;
    }
}

/* ✅ Tablets (768px - 991px) */
@media (max-width: 992px) {
    .slider-wrapper {
        padding: 0 20px; /* ✅ Reduce padding for smaller screens */
    }
}

/* ✅ Large Phones (576px - 767px) */
@media (max-width: 768px) {
    /* ✅ Title Styling */
.slider-title {
    padding-bottom: 40px;    
    font-size: 35px;
    display: inline-block; /* Keeps it centered */
    position: relative;
    color: #231F20;
}
    .slider-wrapper {
        padding: 0 32.5px; /* ✅ Reduce even more */
    }
}

/* ✅ Small Phones (Below 576px) */
@media (max-width: 576px) {
    .slider-wrapper {
        padding: 0 32.5px; /* ✅ Reduce even more */
    }
}

/* ✅ Prevent Slides from Getting Cut */
.container {
    padding: 0 60px; /* Adjusted padding to prevent cut-off */
}

/* ✅ Fix Slide Cut-Off Issue */
.swiper-wrapper {
    display: flex;
    align-items: stretch;
    padding-bottom: 60px !important;
    max-width: 100%; /* ✅ Ensures it doesn't break layout */

}

/* ✅ Deal Cards (Each with a Shadow Only Beneath) */
.deal-card {
    background: white;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.15); /* Shadow only beneath */
    text-align: center;
    display: flex;
    flex-direction: column;
    height: auto;
    min-height: 100%;
    padding-bottom: 15px;
    position: relative;
}

.deal-card::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 10px; /* Small shadow only beneath */
    box-shadow: 0px 10px 15px rgba(5, 4, 4, 0.1);
}

/* ✅ Prevent Slide Overflow Issues */
.deal-swiper-slide {
    flex-shrink: 0;
    width: auto;
}

/* ✅ Hover Effect */
.deal-card:hover {
    cursor:pointer;
}

/* ✅ Image Wrapper */
.deal-img-wrapper {
    width: 100%;
    height: 200px;
    overflow: hidden;
    border-radius: 10px 10px 0 0;
    display: flex;
    justify-content: center;
    align-items: start;
}

.deal-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease-in-out;
}

.deal-card:hover .deal-img {
  transform: scale(1.1);
}

.deal-content {
  padding: 20px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  /* keep default align-items: stretch so headings & desc fill width if you like */
}

/* ✅ Title and Description */
.deal-title {
    font-size: 20px;
    font-weight: bold;
    margin-bottom: 8px;
    color: #231F20;
    transition: color 0.3s ease-in-out;
}

.deal-desc {
    font-size: 16px;
    color: #6c757d;
    margin-bottom: 12px;
    transition: color 0.3s ease-in-out;
}

/* ✅ Hover Effect: Change text color */
.deal-card:hover .deal-title,
.deal-card:hover .deal-desc {
    color: #EB8F23;
}
.deal-content {
  padding: 20px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  /* keep default align-items: stretch so headings & desc fill width if you like */
}

/* ensure border-box so borders are inside the element’s box */
.deal-link {
  display: inline-block;
  padding: 5px 10px;
  margin: 0 auto;             /* centers in the flex container */
  text-decoration: none;
  font-family: Assistant, sans-serif;
  font-size: 20.858px;
  line-height: 30.338px;
  color: #7B7B7B;

  box-sizing: border-box;      /* include border in the element’s width */
  border: 2px solid transparent;      /* transparent border all around */
  border-bottom-color: #EB8F23;       /* only bottom is visible */
  border-radius: 0;            /* no rounding initially */

  transition:
    border-color 0.3s ease-in-out,
    color        0.3s ease-in-out,
    border-radius 0.3s ease-in-out;
}

.deal-card:hover .deal-link {
  /* match your .deal-link:hover styles */
  border-color: #EB8F23;    /* color all four sides */
  color: #EB8F23;
  border-radius: 10px;      /* round all corners */
  background-color: white;  /* keep white bg */
  cursor: pointer;
}


/* ✅ Remove Underline on Hover */
.deal-link::after {
    content: "";
    display: none; /* ✅ Remove underline completely */
}




@media (max-width: 992px) {
 
    .deal-img-wrapper {
        height: 200px;
    }
}

@media (max-width: 768px) {
  
    .deals-slider-arrow {
        display: block;
    }
    .deal-img-wrapper {
        height: 180px;
    }
}

@media (max-width: 576px) {
    .deal-img-wrapper {
        height: 160px;
    }
    .deal-title {
        font-size: 22px;
    }
    .deal-desc {
        font-size: 16px;
    }
    .deal-link {
        font-size: 15px;
    }
}

/* ✅ Default Size (Large Screens) */
.arrow-img {
    width: 60px;
    height: 60px;
}

/* ✅ Medium Screens (Desktops & Laptops) */
@media (max-width: 1200px) {
    .arrow-img {
        width: 50px;
        height: 50px;
    }
}

/* ✅ Small Laptops & Tablets */
@media (max-width: 992px) {
    .arrow-img {
        width: 45px;
        height: 45px;
    }
}

/* ✅ Tablets & Large Phones */
@media (max-width: 768px) {
    .arrow-img {
        width: 40px;
        height: 40px;
    }
}

/* ✅ Small Phones */
@media (max-width: 576px) {
    .arrow-img {
        width: 35px;
        height: 35px;
    }
}

/* ✅ Extra Small Phones */
@media (max-width: 400px) {
    .arrow-img {
        width: 30px;
        height: 30px;
    }
}

/* ✅ Full-Width Wrapper to Keep Arrows on Edges */
.slider-wrapper {
    position: relative;
    width: 100vw; /* ✅ Expands full width of viewport */
    max-width: 100%;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}
/* ✅ Ensure Arrows Stay on Screen Edges */
.deals-slider-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    cursor: pointer;
    width: 60px; /* Default size */
    height: 60px;
    z-index: 50; /* Ensure arrows are always above slides */
}

/* ✅ Arrows on Edges */
#dealsRightArrow {
    left: 60px;
}

#dealsLeftArrow {
    right: 60px;
}
/* ✅ Large Screens (1200px and up) */
@media (max-width: 1700px) {
  
    #dealsRightArrow {
        left: 35px;
    }
    #dealsLeftArrow {
        right: 35px;
    }
}
/* ✅ Large Screens (1200px and up) */
@media (max-width: 1800px) {
  
  #dealsRightArrow {
      left: 55px;
  }
  #dealsLeftArrow {
      right: 55px;
  }
}
/* ✅ Responsive Adjustments */
/* ✅ Large Screens (1200px and up) */
@media (max-width: 1500px) {
    .arrow-img {
        width: 50px;
        height: 50px;
    }
    .deals-slider-arrow {
        width: 50px;
        height: 50px;
    }
    #dealsRightArrow {
        left: 25px;
    }
    #dealsLeftArrow {
        right: 25px;
    }
}

/* ✅ Large Screens (1200px and up) */
@media (max-width: 1200px) {
    .arrow-img {
        width: 50px;
        height: 50px;
    }
    .deals-slider-arrow {
        width: 50px;
        height: 50px;
    }
    #dealsRightArrow {
        left: 25px;
    }
    #dealsLeftArrow {
        right: 25px;
    }
}

/* ✅ Medium Screens (992px - 1199px) */
@media (max-width: 992px) {
    .arrow-img {
        width: 45px;
        height: 45px;
    }
    .deals-slider-arrow {
        width: 45px;
        height: 45px;
    }
    #dealsRightArrow {
        left: 10px;
    }
    #dealsLeftArrow {
        right: 10px;
    }
}

/* ✅ Tablets (768px - 991px) */
@media (max-width: 768px) {
    .arrow-img {
        width: 40px !important;
        height: 40px !important;
    }
    .deals-slider-arrow {
        width: 40px !important;
        height: 40px !important;
    }
    #dealsRightArrow {
        left: 35px;
    }
    #dealsLeftArrow {
        right: 15px;
    }
}

/* ✅ Large Phones (576px - 767px) */
@media (max-width: 576px) {
    .arrow-img {
        width: 35px;
        height: 35px;
    }
    .deals-slider-arrow {
        width: 35px;
        height: 35px;
    }
}

/* ✅ Small Phones (401px - 575px) */
@media (max-width: 400px) {
    .arrow-img {
        width: 30px;
        height: 30px;
    }
    .deals-slider-arrow {
        width: 30px;
        height: 30px;
    }
}

/* ✅ Hide Arrows on Extra Small Screens */
@media (max-width: 350px) {
    .deals-slider-arrow {
        display: block;
    }
}
@media (min-width: 1500px) {
  /* Increase the slider container's max-width */
  .deals-slider {
    max-width: 1800px; /* Increase overall slider width */
    margin: 0 auto;
  }
  
  /* Let the deal card take more width */
  .deal-card {
    /* Remove or adjust the scaling if needed */
    width: calc(100% / 3 - 20px); /* Example: if you want 3 cards per view with some gap */
  }
  
  /* Make the image wrapper fill its parent */
  .deal-img-wrapper {
    width: 100%;      /* Fills the entire width of the deal card */
    height: 250px;    /* Adjust height as needed */
  }
  
  .deal-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  
  /* Adjust text sizes if needed */
  .deal-title {
    font-size: 24px;
  }
  .deal-desc {
    font-size: 20px;
  }
  .deal-link {
    font-size: 20px;
  }
}


  /* ############################# */
  /* General QnA and little boxes */
  /* ############################# */
  
.ideaSvg{
  width: 100px;  /* Set a fixed width */
  height: 90px; /* Set a fixed height */
}
.general-section {
  padding: 54px 77px;
}

.general-container {
  display: flex;
  flex-direction: row-reverse;
  justify-content: center;
  align-items: stretch; /* Ensures both left & right sections are the same height */
  gap: 50px;
  width: 100%;
}

/* Left & Right Sections (EXACTLY 50% WIDTH & SAME HEIGHT) */
.general-container-left,
.general-container-right {
  width: 50%;
  padding: 48px;
  border-radius: 32px;
  display: flex;
  flex-direction: column;
  transition: all 0.3s ease-in-out;
  justify-content: space-between; /* Ensures equal height */
 

}

/* Left & Right Sections (EXACTLY 50% WIDTH & SAME HEIGHT) */
.general-container-left {
  background: #fafafa;
}


/* 🔹 FAQ Title (שאלות ותשובות) */
.faq-title {
  color: #000;
  text-align: right;
  font-family: Assistant;
  font-size: 50px;
  font-style: normal;
  font-weight: 600;
  line-height: 128%; /* 57.6px */
  margin-bottom: -15px;
}

/* 🔹 Right Side Title */
.right-title {
  color: #000;
  text-align: right;
  font-family: Assistant;
  font-size: 50px;
  font-style: normal;
  font-weight: 600;
  line-height: 128%; /* 76.8px */
  margin-bottom: -10px;

}

/* 🔹 Right Side Tagline */
.right-tagline {
  color: #000;
  text-align: right;
  font-family: Assistant;
  font-size: 24px;
  font-style: normal;
  font-weight: 400;
  line-height: 41px; /* 170.833% */
}

/* 🔹 Right-side Grid */
.right-bottom-container {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  column-gap: 50px;
  row-gap: 50px;
  justify-content: center;
  align-items: center;
  width: 100%;
  max-width: 500px;
  margin-top: 20px;
}

.general-box svg {
  width: 100px;  /* Set a fixed width */
  height: 90px; /* Set a fixed height */
  display: block;
  object-fit: contain; /* Ensures it scales properly */
  margin: 0 auto;
}

.general-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  width: 100%; /* full width of grid cell */
  aspect-ratio: 1 / 1 !important; /* make it a square */
  border-radius: 5px;
  background: #fafafa;
  box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.09);
  padding: 16px;
  transition: transform 0.3s ease-in-out;
}

.general-box a {
	display: flex;
	flex-direction: column;
}

.general-box p {
  display: block;
  width: 100%;
  font-size: 18px;
  font-weight: 600;
  text-align: center;
}


.general-box:hover{
 cursor: pointer;
 transform: scale(1.03);

}

/* 📌 Responsive: Up to 991px (Stack Left & Right) */
@media (max-width: 991px) {

  .general-box {
 
 width: 100%;
 height: 100%;

}

  .general-container {
    flex-direction: column-reverse;
    align-items: center;
    gap: 30px;
  }

  .general-container-left,
  .general-container-right {
    width: 100%;
    padding: 32px;
  }

  .right-bottom-container {
    grid-template-columns: repeat(2, minmax(120px, 1fr));
    column-gap: 0px;
    row-gap: 15px;
  }

  .general-box {
    max-width: 200px;
    padding: 8px;
  }
}

/* 📌 Responsive: Up to 600px (Stack into 1 Column) */
@media (max-width: 700px) {
  

}


/* 📌 Responsive: Up to 600px (Stack into 1 Column) */
@media (max-width: 991px) {
  
  .right-title {
  color: #000;
  text-align: right;
  font-family: Assistant;
  font-size: 35px;
  font-style: normal;
  font-weight: 600;
  line-height: 128%; /* 76.8px */
  justify-content: center;
}
  .general-section {
    padding: 20px;
  }

  .general-container-left,
  .general-container-right {
    width: 100%;
    padding: 10px;
  
  }
.general-container-right{
  display: flex;
  justify-content: center;
  align-items: center;
}

  .right-bottom-container {
    grid-template-columns: repeat(2, minmax(120px, 1fr));
    gap: 30px;
  }

  .general-box {
    padding: 12px;
    max-height: 200px
  }
}

/* 🔹 FAQ Styling */
.faq-item {
  background: #f9f9f9;
  border-radius: 12px;
 
  transition: background 0.3s ease-in-out;
}

.faq-item.open {
  background: #ffffff;
}

.faq-question {
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  padding: 1px 20px;
  border-radius: 12px;
  transition: background 0.3s ease-in-out;
}

.faq-item.open .faq-question {
  background: #ffffff;
}

.faq-text {
  font-size: 22px;
  font-weight: 700;
  text-align: right;
  color: #000;
  margin: 0;
}

.toggle-button {
  font-size: 34px;
  font-weight: bold;
  color: #00B3DC;
  margin-left: 10px;
}

.answer {
  display: none;
  padding: 15px 20px;
  background: #ffffff;
  border-radius: 0 0 12px 12px;
  transition: all 0.3s ease-in-out;
}

.faq-item.open .answer {
  display: block;
}

/* 🔹 למידע נוסף, לכל השאלות */
.more-info {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  margin-top: -10px;
  cursor: pointer;
}

.more-info p {
    font-size: 18px;
    font-weight: normal;
    color: #000;
    margin: 0;
}

.more-info img {
  width: 24px;
  height: auto;
}


.last-child-faq::after{
  content: "";
  display: block;
  width: 100%;
  height: 1px;
  background: #dcdcdc;
  margin-top: 40px; /* Ensures spacing */
}
.faq-item:last-child {
}

/* Mobile adjustments for FAQ Section */
@media (max-width: 991px) {
  /* FAQ title: smaller font size and adjusted margin */
  .faq-title {
    font-size: 35px;
    margin-bottom: 10px;
  }

  /* FAQ question text: reduce font size for readability */
  .faq-text {
    font-size: 16px;
  }

  /* Toggle button: smaller font size */
  .toggle-button {
    font-size: 28px;
    margin-left: 5px; /* optional: adjust spacing if needed */
  }

  /* FAQ question container: increase side padding for mobile */
  .faq-question {
    padding: 10px 15px;
  }

  /* FAQ answer container: increase side padding as well */
  .answer {
    padding: 10px 15px;
  }
}

@media (max-width: 991px) {
  /* Move the divider up slightly */
  .last-child-faq::after {
    margin-top: 20px; /* Adjust as needed */
  }
  
  /* Ensure the "more info" section doesn't overlap the divider */
  .more-info {
    margin-top: 20px; /* Change from -10px to a positive value */
  }
}
.blue-circle-arrow {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background-color: #00B3DC;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.blue-circle-arrow::before {
  content: '';
  display: block;
  width: 10px;
  height: 10px;
  border-top: 2px solid white;
  border-left: 2px solid white;
  transform: rotate(-45deg) translateY(2px) translateX(2px);
}


/* ####################### */
/* benefits truma club */
/* ####################*/

 /* Base styles */
    .benefits-club-section {
      margin-top: 20px;
      height: 585px;
      padding-left: 77px;
      padding-right: 77px;
      padding-top: 54px;
      padding-bottom: 0px;
    }

    @media(max-width:768px)
    {
      .benefits-club-section {
    padding-left: 0rem !important;
    padding-right: 0rem !important;
  }
    }
   
  
  
    .benefits-club {
      background-image: url("/orders/bs5/assets/images/benefitsClub.png");
      object-fit: cover;
      background-size: cover;
      height: 100%;
      position: relative;
      background-position: center;
      /*   background-position: center center;
        background-size: 100% 100%;*/
    }
  
    .benefits-club-logo {
    width: 350px;
    height: 224px;
    border-radius: 12px;
    display: flex;
    
}

.benefits-club-logo img {
    width: min-content;
    height: 100%;
    object-fit: cover; /* Ensures the image scales while maintaining aspect ratio */
}
@media (max-width: 991px) {
    .benefits-club-logo {
    }
}

@media (max-width: 600px) {
    .benefits-club-logo {
      
    }
}

  
    .benefits-club-title {
      color: #060606;
      text-align: right;
      font-family: Assistant;
      font-size: 35px;
      font-style: normal;
      font-weight: 600;
      line-height: 32px; /* 91.429% */
    }
  
    .benefits-club-content {
      display: flex;
      background-color: white;
      width: min-content;
      flex-shrink: 0;
      border-radius: 12px;
      position: absolute;
      bottom: 33px;
      right: 80px;
    }
  
    .benefits-club-content-left {
      display: flex;
      flex-direction: column;
      padding: 15px 46px;
      position: relative;
    }
  
    .benefits-club-btn {
      display: flex;
      width: 165.999px;
      height: 45.424px;
      /*padding: 16px 21.999px 15.424px 23px;*/
      align-items: center; /* Keep this to vertically center the text */
      flex-shrink: 0;
      border-radius: 0px 0px 0px 9px;
      border: 0.688px solid #4688f2;
      background: #031652;
      color: white;
      margin-right: auto; /* This will left-align the button */
	  justify-content: center;
    }
  
    .benefits-club-text {
      width: 464px;
      /* height: 84px; */
      flex-direction: column;
      justify-content: center;
      flex-shrink: 0;
      color: #060606;
      text-align: right;
      font-family: Assistant;
      font-size: 20px;
      font-style: normal;
      font-weight: 400;
      line-height: 27px; /* 135% */
    }
  
    /* Mobile: Stack sections & Adjust the split */
    @media (max-width: 991px) {
	  .benefits-club-section {
		margin-top: 0px;
		height: 500px;
		padding: 0;
	  }

	  .benefits-club {
		background-image: url("/orders/bs5/assets/images/tmurah-small.png");
		object-fit: cover;
		width: 100%;
		background-position: center center;
		background-size: 100%;
		height: 326px; /* Set a fixed height for the background image */
		position: relative;
		background-repeat: no-repeat;
		aspect-ratio: 1/1;
	  }

	  .benefits-club-content {
		width: 100%;
		display: flex;
		align-self: stretch;
		flex-shrink: 0;
		border-radius: 12px;
		transform: translateY(110px);
		right: 0;
		/* top: -100px; */
		padding: 0;
		bottom: 0;
	  }

	  .title-wrapper {
	  }

	  .benefits-club-title {
		font-size: 15px;
		font-style: normal;
		text-wrap: nowrap;
		font-weight: 600;
		line-height: 21.68px;
		/* This will make the text break to the next line when it's longer */
	  }
	  .benefits-club-text {
		font-size: 13px;
		line-height: 18.293px; /* 135% */
		width: 100%; /*  Set a fixed width */
		word-break: break-word;
		word-wrap: break-word;
		overflow-wrap: break-word;
		white-space: normal;
	  }

	  .benefits-club-logo {
		height: 151.761px;
	  }

	  .benefits-club-btn {
		max-width: 112px;
		max-height: 30px;
		font-size: 11.5px;
	  }

	  .benefits-club-content-left {
		padding: 6px 20px;
	  }
	}
	
.btn-igm-cyan {
	font-size: 18px;
    padding: 8px 20px;
    font-weight: 500 !important;
    color: #fff !important;
    background: #00a6ce !important;
    border-radius: 5px !important;
    border: 2px solid #00a6ce !important;
    text-decoration: none !important;
    cursor: pointer !important;
    transition: all 0.3s ease-in-out !important;
}

.btn-igm-orange {
	font-size: 18px;
    padding: 8px 20px;
    font-weight: 500 !important;
    color: #fff !important;
    background: #eb8f23 !important;
    border-radius: 5px !important;
    border: 2px solid #eb8f23 !important;
    text-decoration: none !important;
    cursor: pointer !important;
    transition: all 0.3s ease-in-out !important;
}

.btn-igm-cyan:hover {
	filter: brightness(1.15);
	color: #fff;
}

.text-right {
	text-align: right !important;
}

.btn-igm-orange:hover {
	filter: brightness(1.15);
	color: #fff;
}

.href-link:hover {
	color: #eb8f23 !important;	
}

.cur-pointer {
	cursor: pointer !important;
}

.awesomplete li[aria-disabled="true"] {
	pointer-events: none;
	opacity: 0.6;
	font-style: italic;
}

.awesomplete {
	z-index: 1050; /* above Bootstrap modals if needed */
}

	
a.breadcrumb {
	color:white;
	margin: 0 0 0 10px;
}

.join-btn {
	white-space: break-spaces !important;
}
/*
 .container-topbar  {
	overflow: scroll !important;
	scrollbar-width: none !important;
}
*/

.swiper-navigation-icon {
	display: none !important;
}