/* ============================================
   CSS VARIABLES & ROOT STYLES
   ============================================ */
:root {
  /* Color Palette */
  --color-primary-blue: #212c56;
  --color-primary-green: #2D824E;
  --color-dark-blue: #132151;
  --color-text-dark: #000000;
  --color-text-gray: #535353;
  --color-bg-light: #f8f8f8;
  --color-bg-lighter: #f3f3f3;
  --color-white: #ffffff;
  
  /* Typography */
  --font-primary: 'Raleway', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-secondary: 'DM Sans', sans-serif;
  --font-tertiary: 'Inter', sans-serif;
  --font-quaternary: 'Outfit', sans-serif;
  
  /* Base Font Size (16px = 1em) */
  --font-size-base: 1em;
  
  /* Transitions */
  --transition-base: all 0.3s ease;
  --transition-fast: all 0.2s ease;
  
  /* Spacing */
  --spacing-xs: 0.5rem;
  --spacing-sm: 1rem;
  --spacing-md: 1.5rem;
  --spacing-lg: 2rem;
  --spacing-xl: 3rem;
  --spacing-xxl: 5rem;
  
  /* Border Radius */
  --radius-sm: 0.5rem;
  --radius-md: 0.75rem;
  --radius-lg: 1rem;
  --radius-pill: 6.25rem;
}

/* ============================================
   GLOBAL RESET & BASE STYLES
   ============================================ */
*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  font-size: 16px;
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  font-family: var(--font-primary);
  font-size: var(--font-size-base);
  line-height: 1.6;
  color: var(--color-text-dark);
  background-color: var(--color-white);
  overflow-x: hidden;
}

/* Page transitions (fade in/out) */
html.js body {
  opacity: 0;
  transition: opacity 200ms ease;
  background:#29335a url('../images/logo.svg') no-repeat scroll center;
  height: 100vh;
}

html.js body.page-ready {
  opacity: 1;height: auto;background:#fff;
}

html.js body.page-leave {
  opacity: 0;
}

/* Scroll animations helper */
[data-animate] {
  opacity: 0;
}

[data-animate].is-animated {
  opacity: 1;
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  html.js body {
    transition: none !important;
  }
  [data-animate] {
    opacity: 1 !important;
  }
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

a {
  text-decoration: none;
  color: inherit;
  transition: var(--transition-base);
}

a:hover,
a:focus {
  text-decoration: none;
}

/* ============================================
   HEADER / NAVIGATION
   ============================================ */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  /* background: linear-gradient(180deg, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0) 100%); */
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.12) 0%, rgba(0, 0, 0, 0) 100%);
  padding: 0.2rem 0;
  transition: var(--transition-base);
  z-index: 1000;
  background: rgba(255, 255, 255, 0.13);
  /* background: rgba(44, 53, 87, 0.68); */
  background: rgba(78, 85, 110, 0.47);
}

.site-header.scrolled {
  /* background: rgb(33, 44, 86); */
  background: rgba(44, 53, 87, 0.68);
  backdrop-filter: blur(10px);
  box-shadow: 0 0.125rem 1.25rem rgba(0, 0, 0, 0.1);
}

/* Logo */
.site-logo {
  /* height: 3.125rem; */
  width: auto;
  transition: var(--transition-base);
  position: relative;
  z-index: 999;
}

/* Navigation Links */
.navbar-nav .nav-link {
  color: var(--color-white) !important;
  font-weight: 500;
  /* font-size: 1em;0.85em */
  font-size: 0.85em;
  letter-spacing: 0.04em;
  padding: 0.5rem 1rem;
  transition: var(--transition-base);
  position: relative;
}

.navbar-nav .nav-link:hover,
.navbar-nav .nav-link:focus,
.navbar-nav .nav-link.active {
  opacity: 1; color: #4dd048;
}
/* .navbar-nav:has(.show) .nav-link:hover {color: #4dd048 !important;} */
.navbar-nav .nav-link:focus {
	outline: none;
	box-shadow: none;
}
.navbar-nav .nav-link::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0.125rem;
  background-color: var(--color-white);
  transition: width 0.3s ease;
  border-top: 0;
}

.navbar-nav .nav-link:hover::after,
.navbar-nav .nav-link.active::after {
  /* width: 80%; */
  width: calc(100% - 0.9em);
}

/* Navbar Toggler */
.navbar-toggler {
  border-color: rgba(255, 255, 255, 0.5);
  padding: 0.5rem 0.75rem;
}

.navbar-toggler:focus {
  box-shadow: 0 0 0 0.25rem rgba(255, 255, 255, 0.25);
}

.navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 1%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

/* Dropdown Menu */
.dropdown-menu {
  background: rgb(45, 130, 78);
  border: none;
  border-radius: var(--radius-sm);
  margin-top: 0.5rem;
  padding: 0.5rem 0;
  backdrop-filter: blur(10px);
}

.dropdown-item {
  color: var(--color-white);
  padding: 0.75rem 1.5rem;
  font-size: 0.9375em;
  transition: var(--transition-base);
}

.dropdown-item:hover,
.dropdown-item:focus {
  background: rgba(255, 255, 255, 0.1);
  color: var(--color-white);
}

/* Contact Button */
.btn-contact {
  border-width: 0.125rem;
  font-weight: 500;
  letter-spacing: 0.03em;
  padding: 0.4rem 1.5rem;
  transition: var(--transition-base);
}

.btn-contact:hover,
.btn-contact:focus {
  /* background: var(--color-white); */
  background: #2d824e;
  color: var(--color-white);
  /* transform: translateY(-0.125rem); */
}

/* Mobile Menu Styles */
@media (max-width: 991px) {
  .navbar-collapse {
    background: rgba(33, 44, 86, 0.98);
    padding: 1.5rem;
    border-radius: var(--radius-sm);
    margin-top: 1rem;
    backdrop-filter: blur(10px);
  }
  
  .navbar-nav {
    gap: 0.5rem;
  }
  
  .navbar-nav .nav-link {
    padding: 0.75rem 1rem;
    border-radius: 0.25rem;
  }
  
  .navbar-nav .nav-link:hover,
  .navbar-nav .nav-link:focus {
    background: rgba(255, 255, 255, 0.1);
  }
  
  .navbar-nav .nav-link::after {
    display: none;
  }
  
  /* .dropdown-menu {
    background: rgba(0, 0, 0, 0.2);
    margin-left: 1rem;
    border-radius: 0.25rem;
  } */
  .dropdown-menu {
	background: none;
	margin: 0 0 10px;
	border-radius: 0.25rem;
	padding: 0;
}
.dropdown-menu li {position:relative;}
.dropdown-menu li::before {
	content: '';
	position: absolute;
	left: 0;
	top: 16px;
	width: 5px;
	height: 5px;
	border-top: 1px solid #fff;
	border-right: 1px solid #fff;
	transform: rotate(45deg);
}
  .dropdown-item {
    font-size: 0.875em;
    padding: 0.5rem 1rem;
  }
  .nav-item.dropdown {padding-right: 0 !important;}
.nav-item.dropdown:has(.show)::after {transform: rotate(-180deg);}
}

/* ============================================
   HERO SLIDER SECTION
   ============================================ */
.hero-slider-section {
  position: relative;
  /* height: 100vh; */height: 800px;
  /* min-height: 37.5rem;
  max-height: 56.25rem; */
  margin-top: 0;
}

.hero-swiper,
.hero-swiper .swiper-wrapper,
.hero-swiper .swiper-slide {
  /* height: 100vh; */
  height: 100%;
  /* min-height: 37.5rem;
  max-height: 56.25rem; */
}

.hero-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* Carousel Overlay */
.carousel-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    0deg,
    rgba(0, 0, 0, 0.5) 0%,
    rgba(0, 0, 0, 0.3) 50%,
    rgba(0, 0, 0, 0.5) 100%
  );
  z-index: 1;
}

/* Carousel Caption */
.carousel-caption-custom {
	position: absolute;
	top: 30%;
	left: auto;
	transform: translateY(-50%);
	width: 100%;
	z-index: 2;
	padding: 2rem;
}

.hero-title {
  font-size: 3.75em;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--color-white);
  text-shadow: 0.125rem 0.125rem 0.625rem rgba(0, 0, 0, 0.5);
  margin-bottom: 0.5rem;
  line-height: 1.2;
}

.hero-subtitle {
  font-size: 1.5625em;
  font-weight: 300;
  color: var(--color-white);
  text-shadow: 0.0625rem 0.0625rem 0.3125rem rgba(0, 0, 0, 0.5);
  margin-bottom: 2rem;
  line-height: 1.5;
}

.btn-hero {
  padding: 0.5rem 1.1rem;
  font-size: 1.125em;
  font-weight: 500;
  letter-spacing: 0.03em;
  border-width: 0.125rem;
  transition: var(--transition-base);
}

.btn-hero:hover,
.btn-hero:focus {
  background: var(--color-white);
  color: var(--color-primary-blue);
  /* transform: translateY(-0.125rem); */
}

/* Carousel Controls */
.carousel-control-prev,
.carousel-control-next {
  width: 5%;
  opacity: 0.8;
  transition: var(--transition-base);
  z-index: 3;
}

.carousel-control-prev:hover,
.carousel-control-next:hover,
.carousel-control-prev:focus,
.carousel-control-next:focus {
  opacity: 1;
}

.carousel-control-prev-icon,
.carousel-control-next-icon {
  width: 3rem;
  height: 3rem;
  background-color: rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  padding: 0.75rem;
  backdrop-filter: blur(0.3125rem);
  background-size: 20px;
}

/* Carousel Indicators */
.carousel-indicators {
	margin-bottom: 0;
	z-index: 3;
}

.carousel-indicators button {
  width: 0.75rem;
  height: 0.75rem;
  border-radius: 0%;
  margin: 0 0.3125rem;
  opacity: 0.5;
  transition: var(--transition-base);
  border: none;
}

.carousel-indicators button.active, .hero-slider-section .carousel-indicators button.active {
  opacity: 1;
  transform: scale(1);
}
.hero-slider-section .carousel-indicators [data-bs-target] {
	box-sizing: content-box;
	flex: 0 1 auto;
	width: 5px;
	height: 60px;
	padding: 0;
	margin-right: 3px;
	margin-left: 3px;
	text-indent: -999px;
	cursor: pointer;
	background-color: #fff;
	background-clip: padding-box;
	border: 0;
	border-top: 10px solid transparent;
	border-bottom: 10px solid transparent;
	opacity: .5;
	transition: opacity .6s ease;
	border-radius: 10px !important;
}
.hero-slider-section .carousel-indicators {
	position: absolute;
	right: 5%;
	top: 0;
	left: 0;
	z-index: 2;
	display: flex;
	justify-content: center;
	padding: 0;
	margin-right: 0;
	margin-bottom: 1rem;
	margin-left: auto;
	width: 20px;
	height: 100%;
	flex-direction: column;
}

.hero-slider-section .carousel-control-prev, .hero-slider-section .carousel-control-next { display:none; }

/* Swiper pagination styled like previous vertical indicators */
.hero-slider-section .hero-swiper-pagination.swiper-pagination-bullets {
  position: absolute;
  right: 5%;
  top: 0;
  left: 0;
  z-index: 2;
  display: flex;
  justify-content: center;
  padding: 0;
  margin-right: 0;
  margin-bottom: 1rem;
  margin-left: auto;
  width: 20px;
  height: 100%;
  flex-direction: column;
}

.hero-slider-section .hero-swiper-pagination .swiper-pagination-bullet {
  box-sizing: content-box;
  flex: 0 1 auto;
  width: 5px;
  height: 60px;
  padding: 0;
  margin-right: 3px;
  margin-left: 3px;
  text-indent: -999px;
  cursor: pointer;
  background-color: #fff;
  background-clip: padding-box;
  border: 0;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  opacity: 0.5;
  transition: opacity 0.6s ease;
  border-radius: 10px !important;
}

.hero-slider-section .hero-swiper-pagination .swiper-pagination-bullet-active {
  opacity: 1;
  transform: scale(1);
}
.btn:hover svg {
	filter: brightness(0);
}

/* ============================================
   SECTION SPACING & COMMON STYLES
   ============================================ */
.section-spacing {
  padding: var(--spacing-xxl) 0;
}

.section-label {
  font-size: 1em;
  font-weight: 400;
  letter-spacing: 0.09em;
  /* text-transform: uppercase; */
  margin-bottom: 1rem;
  color: var(--color-text-dark);
}

.section-title {
  font-size: 2.8125em;
  font-weight: 600;
  line-height: 1.2;
  margin-bottom: 1.5rem;
  color: var(--color-primary-blue);
}
.section-title-2 {
	font-size: 2em !important;
}
.section-description {
  font-size: 1.125em;
  line-height: 1.6;
  color: var(--color-text-dark);
}

/* Background Colors */
.bg-green {
  background-color: var(--color-primary-green);
}
.bg-green-2 {background-color: var(--color-primary-green) !important;}
.bg-green .section-label,
.bg-green .section-title,
.bg-green .section-description {
  color: var(--color-white);
}

/* ============================================
   FEATURE CARDS (Why JV Section)
   ============================================ */
.feature-card {
  height: 100%;
  transition: var(--transition-base);
}

.feature-card:hover {
  transform: translateY(-0.625rem);
}

.feature-card-inner {
  background-image: url('https://c.animaapp.com/mkl1se1xc2o2H3/img/rectangle-7936.svg');/* 
  background-size: 100% 100%;
  background-repeat: no-repeat; */
  background: linear-gradient(180deg, rgba(245, 245, 245, 0.5) 0%, rgba(255, 255, 255, 0.5) 49.32%, rgba(245, 245, 245, 0.5) 100%);
  border: 1px solid rgba(0, 0, 0, 0.08);
  padding: 3rem 2rem;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  /* justify-content: center; */
  justify-content: baseline;
  min-height: 21.875rem;
}

.feature-icon {
  width: 5em;
  height: 5em;
  margin-bottom: 1.5rem;
}

.feature-title {
  font-size: 1.25em;
  font-weight: 500;
  letter-spacing: 0.03em;
  color: var(--color-primary-blue);
  margin-bottom: 1rem;
  line-height: 1.3;
}

.feature-description {
  font-size: 1em;
  line-height: 1.6;
  color: var(--color-text-dark);
}

/* ============================================
   ABOUT PARTNERS SECTION
   ============================================ */
.about-badge {
  width: 7.0625rem;
  height: 7.0625rem;
  background-color: var(--color-white);
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.partnership-visual {
  /* margin-top: 3rem; */
  margin-top: 0;
}
.object-cover-h-100 {height: 100%;  object-fit: cover;}

.repono-img {position: relative; background: transparent url('../images/repono-img.webp') no-repeat top center; background-size: cover;}
.golden-wing-img {position: relative; background: transparent url('../images/golden-wing-img.webp') no-repeat top center; background-size: cover;}
.about-inner { padding: 100px 130px; position: relative; }
.about-logo { position: absolute; top: 50%; transform: translateY(-50%); margin-top: -60px; }
.repono-img .about-logo { right: -170px; }
.golden-wing-img .about-logo { left: -170px; }
.about-inner::before {
	content: '';
	position: absolute;
	width: calc(100% - 170px);
	height: 90px;
	background: transparent url('../images/curv-line.svg') no-repeat top center;
	left: 80px;
	top: 170px;
	margin: 0 auto;
	border-radius: 0;
}

/* ============================================
   SERVICE CARDS
   ============================================ */
.service-card {
  position: relative;
  height: auto;
  /* border-radius: var(--radius-md); */
  overflow: hidden;
  transition: var(--transition-base);
}

.service-card:hover {
  transform: translateY(-0.625rem);
  /* box-shadow: 0 1.25rem 2.5rem rgba(0, 0, 0, 0.2); */
  box-shadow: 0 0.25rem 1.5rem rgba(151, 151, 151, 0.2);
  
}

.service-image {
  width: 100%;
  height: auto;
  object-fit: cover;
  object-position: center;
}

.service-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    179deg,
    rgba(0, 0, 0, 0) 0%,
    rgba(0, 0, 0, 0.85) 100%
  );
  z-index: 1;
}

.service-content {
  position: absolute;
  bottom: 2rem;
  left: 0;
  right: 0;
  padding: 0 2rem;
  z-index: 2;
  text-align: center;
}

/* Service hover panel (design like provided image) */
.service-hover {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: all 0.25s ease;
}

.service-hover-inner {
  width: min(92%, 420px);
  background: rgba(255, 255, 255, 0.78);
  border: 1px solid rgba(255, 255, 255, 0.6);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.25);
  padding: 2.25rem 2rem;
  text-align: center;
}

.service-hover-title {
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--color-primary-blue);
  line-height: 1.2;
  margin-bottom: 0.75rem;
}

.service-hover-subtitle {
  font-size: 0.9rem;
  letter-spacing: 0.12em;
  text-transform: none;
  color: var(--color-primary-blue);
  opacity: 0.9;
  margin-bottom: 1.5rem;
  font-family: var(--font-secondary);
}

.service-hover-desc {
  font-size: 1rem;
  line-height: 1.7;
  color: var(--color-text-dark);
  margin-bottom: 1.75rem;
  letter-spacing: 0.04em;
}

.service-hover-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem 1.1rem;
  border-radius: 999px;
  border: 1px solid rgba(0, 0, 0, 0.65);
  color: #1a1a1a;
  background: transparent;
  font-weight: 500;
}

.service-hover-btn:hover, .service-hover-btn:focus {
	background: rgb(45, 130, 78);
	color: #fff;
	border-color: rgb(45, 130, 78);
}

/* Services carousel (Owl Carousel 2) */
.services-owl-wrapper {
  padding: 0 0 3rem;
}
.services-owl-carousel .item {
  /* padding: 0 4px; */
  padding: 0;
}
.services-owl-carousel .item .service-card {
  width: 100%;
}
/* Owl nav arrows */
.services-owl-wrapper .owl-nav {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  transform: translateY(-50%);
  margin: 0;
  display: flex;
  justify-content: space-between;
  pointer-events: none;
  z-index: 10;
}
.services-owl-wrapper .owl-prev,
.services-owl-wrapper .owl-next {
  position: absolute;
  pointer-events: auto;
  width: 48px;
  height: 48px;
  margin: 0 !important;
  padding: 0;
  border: none;
  border-radius: 50%;
  /* background: var(--color-primary-green, #2d824e) !important; */
  background: #EB920D !important;
  color: #fff !important;
  cursor: pointer;
  display: flex !important;
  align-items: center;
  justify-content: center;
  transition: background 0.2s ease, color 0.2s ease;
  -webkit-tap-highlight-color: transparent;
}
.services-owl-wrapper .owl-prev { left: 8px; }
.services-owl-wrapper .owl-next { right: 8px; }
.services-owl-wrapper .owl-prev span,
.services-owl-wrapper .owl-next span {
  display: flex;
  align-items: center;
  justify-content: center;
}
.services-owl-wrapper .owl-prev svg,
.services-owl-wrapper .owl-next svg {
  width: 24px;
  height: 24px;
}
.services-owl-wrapper .owl-prev:hover,
.services-owl-wrapper .owl-next:hover {
  /* background: var(--color-primary-blue, #212c56) !important; */
  background: #EB920D !important;
  color: #fff !important;
}
.services-owl-wrapper .owl-prev:focus,
.services-owl-wrapper .owl-next:focus {
  /* outline: 0px solid var(--color-primary-green, #2d824e); */
  outline: 0px solid var(--color-primary-green, #2d824e);
  outline-offset: 0px;
}
/* Owl dots */
.services-owl-wrapper .owl-dots {
  position: relative;
  margin-top: 1.5rem;
  text-align: center;
}
.services-owl-wrapper .owl-dot {
  width: 10px;
  height: 10px;
  margin: 0 6px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.2);
  transition: background 0.2s ease, transform 0.2s ease;
}
/* .services-owl-wrapper .owl-dot.active span {
  background: var(--color-primary-green, #2d824e);
  transform: scale(1.2);
} */
.owl-theme .owl-dots .owl-dot.active span, .owl-theme .owl-dots .owl-dot:hover span {background: #2d824e;}
@media (max-width: 991px) {
  .services-owl-wrapper .owl-prev,
  .services-owl-wrapper .owl-next {
    width: 40px;
    height: 40px;
  }
  .services-owl-wrapper .owl-prev svg,
  .services-owl-wrapper .owl-next svg {
    width: 20px;
    height: 20px;
  }
}

.navbar-nav .nav-link:not(:hover)::after {opacity:0}

/* Desktop hover reveals panel + hides bottom title */
@media (min-width: 992px) {
  .service-card:hover .service-hover {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }

  .service-card:hover .service-content {
    opacity: 0;
    visibility: hidden;
    transform: translateY(8px);
    transition: all 0.2s ease;
  }
  
  .navbar-expand-lg .navbar-nav {gap: 0 8px; margin-right: 0 !important; padding-top: 35px;}
  .navbar-expand-lg .navbar-nav .dropdown-menu {left: -20px;}
}

/* Touch devices: show panel as normal content instead of hover-only */
@media (max-width: 991px) {
  .service-hover {
    position: static;
    inset: auto;
    opacity: 1;
    visibility: visible;
    transform: none;
    padding: 1.25rem 1rem 0;
  }

  .service-hover-inner {
    width: 100%;
    box-shadow: none;
    background: rgba(255, 255, 255, 0.85);
	padding: 15px;
  }
 
 .hero-slider-section {height: 600px; min-height: auto; max-height: 100%;} 
.hero-swiper, .hero-swiper .swiper-wrapper, .hero-swiper .swiper-slide { height: 600px; min-height: auto; max-height: 100%; }
.carousel-caption-custom {width:78%;}
}

.service-title {
  font-size: 1.5625em;
  font-weight: 600;
  letter-spacing: 0.03em;
  color: var(--color-white);
  margin-bottom: 0.5rem;
  line-height: 1.3;
}

.service-subtitle {
  font-size: 0.9375em;
  font-weight: 500;
  letter-spacing: 0.09em;
  color: var(--color-white);
  font-family: var(--font-secondary);
}

/* ============================================
   OUR PRINCIPLES / VALUE CARDS SECTION
   ============================================ */
.value-card {
  height: 100%;
  min-height: 18.4375rem;
  /* border-radius: var(--radius-md); */
  transition: var(--transition-base);
  position: relative;
  overflow: hidden;
}

.value-card:hover {
  /* transform: translateY(-0.625rem); */
  box-shadow: 0 0.9375rem 1.875rem rgba(0, 0, 0, 0.2);
}

.value-card-inner {
  /* background-image: url('https://c.animaapp.com/mkl1se1xc2o2H3/img/rectangle-39527.svg');
  background-size: 100% 100%;
  background-repeat: no-repeat; */
  /* padding: 3rem 2rem; */
  padding: 2rem 2rem;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  /* justify-content: normal; */
  text-align: center;
  min-height: 18.4375rem;
}

.value-card-blue {
  background-color: var(--color-primary-blue);
}

.value-card-green {
  background-color: var(--color-primary-green);
}

.value-icon {
  width: 5.625em;
  height: 5.625em;
  margin-bottom: 1.5rem;
}

.value-title {
  font-size: 1.25em;
  font-weight: 600;
  letter-spacing: 0.03em;
  color: var(--color-white);
  line-height: 1.3;
}

/* ============================================
   TEAM MEMBERS SECTION
   ============================================ */
.team-member-card {
  text-align: center;
  transition: var(--transition-base);
}

.team-member-card:hover {
  transform: translateY(-0.625rem);
}

.team-member-card:hover .team-member-image {filter: none;}
.team-member-image {
  width: 100%;
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: var(--radius-md);
  margin-bottom: 1.5rem;
  filter: saturate(0);
}

.team-member-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.team-placeholder {
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.team-member-info {
  padding: 1rem 0;
}

.member-name {
  font-size: 1.25em;
  font-weight: 500;
  letter-spacing: 0.03em;
  color: var(--color-primary-blue);
  margin-bottom: 0.5rem;
  line-height: 1.3;
}

.member-role {
  font-size: 0.875em;
  font-weight: 500;
  color: var(--color-text-gray);
  margin-bottom: 1rem;
  font-family: var(--font-tertiary);
}

.team-member-social {
  display: flex;
  justify-content: center;
  gap: 1rem;
}

.social-link {
  width: 2.5rem;
  height: 2.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  /* background: var(--color-bg-light); */
  /* color: var(--color-primary-blue); */
  color: #ACAEB4;
  font-size: 1.25em;
  transition: var(--transition-base);
}

.social-link:hover,
.social-link:focus {
  /* background: var(--color-primary-blue); */
  /* color: var(--color-white); */
  color: #212c56;
  transform: scale(1.1);
}

/* Team Member Modal */
.team-modal .modal-dialog {
  max-width: 1000px;
}

.team-modal .modal-content {
  border: none;
  border-radius: 1.5rem;
  padding: 1.5rem 1.5rem 1.75rem;
}

.team-modal-close {
	position: absolute;
	top: 1.25rem;
	right: 1.25rem;
	z-index: 2;
	background-color: transparent;
	border-radius: 0;
	width: auto;
	height: auto;
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 1;
	padding: 0;
}

.team-modal-photo {
  width: 100%;
  height: auto;
  margin: 0 auto;
  border-radius: 50%;
  overflow: hidden;
}

.team-modal-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.team-modal-name {
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--color-primary-blue);
  margin-bottom: 0.25rem;
  letter-spacing: 0.03em;
}

.team-modal-role {
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--color-text-gray);
  margin-bottom: 0.75rem;
}

.team-modal-bio {
  font-size: 0.95rem;
  line-height: 1.8;
  color: var(--color-text-dark);
  margin-bottom: 0;
}

/* Social inside template content (team-member-popup) */
.team-modal-bio .team-member-social {
  justify-content: flex-start;
  margin-bottom: 0.75rem;
}

.team-modal-social .social-link {
  background: #f0f1f5;
  color: #60636b;
}

.team-modal-social .social-link:hover {
  background: var(--color-primary-blue);
  color: #fff;
}

@media (max-width: 767px) {
  .team-modal .modal-content {
    padding: 1.25rem;
  }

  .team-modal-photo {
    width: 180px;
    height: 180px;
  }

  .team-modal-name {
    font-size: 1.25rem;
  }
}

/* ============================================
   GLOBAL PRESENCE / MAP SECTION
   ============================================ */
.map-container {
  position: relative;
  padding: 2rem 0 0;
}

.map-container img {
  width: 100%;
  height: auto;
}

/* ============================================
   FOOTER
   ============================================ */
.site-footer {
  background-color: var(--color-bg-lighter);
  padding: 4rem 0 0.5rem;
}

.footer-tagline {
  font-size: 2.7em;
  font-weight: 600;
  color: var(--color-primary-blue);
  line-height: 1.2;
  /* margin-bottom: 2rem; */
  margin-bottom: 0;
}

.footer-nav-title {
  font-size: 0.9375em;
  font-weight: 500;
  letter-spacing: 0.05em;
  color: var(--color-primary-blue);
  margin-bottom: 1rem;
}

.footer-nav-links {
  list-style: none;
  padding: 0;
  margin: 0;
}
.footer-nav-links {
	padding: 0 15px;
}
.footer-nav-links li {
  margin-bottom: 0.75rem;
}
.footer-nav-links a {
  font-size: 0.9375em;
  font-weight: 500;
  letter-spacing: 0.05em;
  color: var(--color-primary-blue);
  transition: var(--transition-base);
}

.footer-nav-links a:hover,
.footer-nav-links a:focus {
  opacity: 0.7;
  padding-left: 0.3125rem;
}

.footer-contact {
  font-style: normal;
}

.footer-contact p {
  font-size: 0.8125em;
  line-height: 1.6;
  margin-bottom: 0.75rem;
  font-family: var(--font-secondary);
}

.footer-contact a {
  color: var(--color-text-dark);
  transition: var(--transition-base);
}

.footer-contact a:hover,
.footer-contact a:focus {
  color: var(--color-primary-blue);
}

.footer-divider {
  border: none;
  border-top: 1px solid rgba(0, 0, 0, 0.2);
  margin: 2rem 0;
  opacity: 1;
}

.footer-copyright {
  font-size: 0.8125em;
  color: var(--color-text-dark);
  font-family: var(--font-primary);
}

.footer-copyright a {
  color: var(--color-text-dark);
  text-decoration: underline;
  transition: var(--transition-base);
}

.footer-copyright a:hover,
.footer-copyright a:focus {
  color: var(--color-primary-blue);
}

.footer-col {
  border-right: 1px solid rgba(0, 0, 0, 0.2);
}
.footer-col.footer-col-last {
  border-right: 0;
}


.nav-item.dropdown::after {
  content: '';
  width: 8px;
  height: 6px;
  background: transparent url('../images/dropdown-arrow.svg') no-repeat scroll center;
  position: absolute;
  top: 18px;
  right: 0;
}
.nav-item.dropdown {
  padding-right: 8px;
}


.breadcrumb { width: 100%; display: inline-block; }
.breadcrumb ul { margin: 0; padding: 0; list-style: none; display: flex;  justify-content: center;  gap: 15px 30px; }
.breadcrumb ul li { position:relative; }
.breadcrumb ul li a { font-size:1em; }
.breadcrumb ul li::after { content: ''; position: absolute; right: -17px; top: 8px; width: 8px; height: 8px; border-right: 1px solid rgba(0, 0, 0, 0.6); border-top: 1px solid rgba(0, 0, 0, 0.6); transform: rotate(45deg); }
.breadcrumb ul li.current-page::after {display:none}
.about-img-1 { min-height: 370px; object-fit: cover; }
.service-img-3 { min-height: 500px; object-fit: cover;}
.gray-img img { filter: grayscale(100%); transition:0.5s; }
.gray-img:hover img { filter: grayscale(0); }

.modern-list { margin: 0; padding: 0; list-style: none; width: 100%; }
.modern-list li { list-style: none; margin: 0 0 10px; padding: 0 0 0 15px; width: 100%; position: relative; font-size: 1em; }
.modern-list li::before { content: ''; position: absolute; left: 0; top: 5px; width: 2px; height: 14px; background: #2D824E; }
.feature-card:hover {transform: none;box-shadow: 0 0.25rem 1rem rgba(151, 151, 151, 0.2);}
.service-card .feature-card-inner { padding: 0; background: #fff; }
.service-card .feature-card-inner .feature-title { padding: 2rem 2rem 0;width: 100%; }
.service-card .feature-card-inner .feature-description { padding: 0em 2em 2em 2em;width: 100%; }
.service-card .feature-card-inner .feature-description:last-child { margin-bottom: 0; }
.service-icon { filter: grayscale(100%); transition:0.5s; }
.service-card :hover .service-icon { filter: grayscale(0); }
.btn.btn-more-news { padding: 0; }
.btn.btn-more-news:hover svg {filter: brightness(1);}
.news-ttl { font-size: 1.2500em; font-weight: 500; margin-bottom: 1em; }
.news-date { font-size: 0.850em; font-weight: 500; margin-bottom: 1em; padding-left: 25px; background: transparent url('../images/date-icon.svg') no-repeat scroll left center; }
.news-section-1 .bg-blue .partner-content {padding-right: 4em;}
.news-section-2 .bg-green .partner-content {padding-left: 4em;}
.row-news .partner-img-1 { min-height: 390px; object-fit: cover; }
.row-news .partner-img-2 { min-height: 370px; object-fit: cover; }
.news-col-6 { width: 50%; }
.row-news { display: flex; }

.contact-info-section {
  background-color: #fff;
}

.contact-card {
  background-color: #fff;
  border-right: 1px solid #e0e0e0;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

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

.contact-card .card-body {
	padding: 1.5rem 2rem;
	align-items: center !important;
	align-content: center !important;
	display: flex;
	position: relative;
}
.contact-card-last .card-body::after {display:none}
.contact-card .card-body::after {
	content: '';
	position: absolute;
	right: 0;
	top: 50%;
	width: 1px;
	height: 100px;
	background: rgba(0, 0, 0, 0.18);
	transform: translateY(-50%);
}
.contact-card-inner {
  justify-content: center !important;
  margin: 0 auto;
  align-items: center !important;
}
.contact-icon {
  flex-shrink: 0;
}

.contact-card strong {
  color: #212C56;
  font-weight: 700;
}

.contact-card .card-text {
  font-size: 1rem;
  line-height: 1.625;
  letter-spacing: 0.02em;
}
.form-part {max-width:645px; padding-left: 0 !important; float:right;}

.logistics-row {display: flex;}
.logistics-col, .logistics-card-part {width: 20%;}
.logistics-card-part {text-align: center;}
.logistics-card .feature-card-inner { justify-content: center; align-items: center; /*! height: auto !important; */ min-height: auto !important; padding: 1.5em 1em; background: #fff; }
.logistics-card-part .feature-title { margin: 0; }
.logistics-card picture { /*! min-height: 70px; */ }


.navbar.navbar-expand-lg > .container {position:relative;}

.footer-logo {
	width: 100%;
	margin-bottom: 1rem;
}

.clock-container{
  display:flex;
  gap:10px 30px;
  /*! flex-wrap: wrap; */
  padding: 0 0 0;
  position: absolute;
  right: 15px;
  top: 0;
}

.clock{
  color:#fff;
  padding:4px 0 4px 35px;
  border-radius:10px;
  font-size:0.8rem;
  font-weight: 300;
  display: inline-flex;
  align-items: baseline;
  letter-spacing: 4%;
  background: transparent url('../images/clock.svg') no-repeat scroll left center;
  position: relative;
}

.clock::before {
	content: '';
	right: -15px;
	top: 0;
	background: rgba(255, 255, 255, 0.5);
	height: 100%;
	position: absolute;
	width: 1px;
}

.clock:last-child::before {
	display: none;
}
#mumbaiClock, #jubailClock {
	min-width: 77px;
}

.clock h3 {
  font-size: 0.8rem;
  font-weight: 300; 
  margin: 0 5px 0 0;
  letter-spacing: 4%;
}
.navbar-brand {
	border-right: 1px solid rgba(255, 255, 255, 0.23);
	padding-right: var(--bs-navbar-brand-margin-end);
	position: relative;
}
.navbar-brand::before {
	content: '';
	background: white;
	filter: blur(20px);
	position: absolute;
	height: 80%;
	width: 70%;
	opacity: 0.1;opacity: 0.18;
	right: 0;
	top: 0;
}

.site-header.scrolled .navbar-brand::before {display:none}
.navbarr-logos {
	display: flex;
	flex-wrap: inherit;
	align-items: center;
	justify-content: space-between;
}

@media (max-width: 767.98px) {
  .contact-card {
    border-right: none;
    border-bottom: 1px solid #e0e0e0;
  }
  
  .contact-card:last-child {
    border-bottom: none;
  }
  .logistics-col, .logistics-card-part {width: 100%;}
}

@media (min-width: 768px) {
  .contact-card:last-child {
    border-right: none;
  }
}


/* ============================================
   CONTACT FORM SECTION
   ============================================ */
.form-section {
  min-height: 600px;
}

.form-section .bg-primary {
  background-color: #2D824E !important;
}

.form-image-container {
  overflow: hidden;
}

.form-image-container img {
  object-fit: cover;
  width: 100%;
  height: 100%;
}

.contact-form .display-5 {
  font-weight: 600;
  letter-spacing: 0;
  line-height: 1.22;
}

/* Custom Form Controls */
.form-control-custom {
  background-color: transparent;
  border: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: 0;
  color: #fff;
  padding: 0 0 !important;
  transition: border-color 0.3s ease;
  min-height: 30px !important;
  height: auto !important;
}
textarea.form-control-custom {min-height: 70px !important;}
.form-floating > .form-select option {background:#fff !important; color:#000; font-size: 0.9em;}

.form-control-custom:focus {
  background-color: transparent;
  border-color: #fff;
  color: #fff;
  box-shadow: none;
  padding:0;
}

.form-control-custom::placeholder {
  color: rgba(255, 255, 255, 0.7);
}

.form-floating > .form-control-custom:focus ~ label,
.form-floating > .form-control-custom:not(:placeholder-shown) ~ label,
.form-floating > .form-select-custom ~ label {
  color: rgba(255, 255, 255, 0.9);
  transform: scale(0.85) translateY(-0.5rem) translateX(0);
}

.form-floating > label {
	color: #fff;
	padding: 0;
	position: static;
	font-weight: 500;
}

.form-select-custom {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3E%3C/svg%3E");
}

.form-select-custom option {
  background-color: var(--bs-primary);
  color: #fff;
}

.invalid-feedback {
  color: #ffb3b3;
  font-size: 0.875rem;
}

.form-control.is-invalid {
  border-bottom-color: #ff6b6b;
}

/* Submit Button */
.contact-form .btn-outline-light {
	font-family: 'Outfit', sans-serif;
	font-weight: 300;
	font-size: 1.125rem;
	letter-spacing: 0.03em;
	padding: 0.75rem 3.5rem 0.75rem 2.5rem !important;
	transition: all 0.3s ease;
	background: transparent url('../images/more-arrow.svg') no-repeat scroll 78% center;
}

.contact-form .btn-outline-light:hover {
  background-color: #242c53;
  border-color: #242c53;
  color:#fff;
  /* transform: translateX(5px); */
}

/* ============================================
   SITE MAP STYLES
   ============================================ */
.sitemap-content {
  background-color: #fff;
}

.sitemap-section {
  position: relative;
}

.sitemap-title {
  font-family: 'Raleway', sans-serif;
  font-weight: 400;
  color: #000;
  /* font-size: 1.5625rem; */ font-size: 1.3rem;
  letter-spacing: 0;
  line-height: 1.6;
  margin-bottom: 1rem;
}

.sitemap-underline {
  width: 100%;
  height: 1px;
  background-color: #2c814d;
  background-color: rgba(0, 0, 0, 0.1);
  margin: 0;
  position:relative;
}
.sitemap-underline::before {content:''; position:absolute; left:0; top:-1px; width: 50px; height: 3px; background-color: #2c814d;}

.service-category-title {
  font-family: 'Raleway', sans-serif;
  font-weight: 600;
  color: #2c814d;
  font-size: 1rem;
  letter-spacing: 0;
  line-height: 1.3125;
}

.service-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.service-item {
  display: flex;
  align-items: flex-start;
  margin-bottom: 1.25rem;
  position: relative;
}

.service-divider {
  width: 2px;
  height: 14px;
  background-color: #212c56;
  flex-shrink: 0;
  margin-right: 0.75rem;
  margin-top: 0.125rem;
}

.service-text {
  font-family: 'Raleway', sans-serif;
  font-weight: 400;
  color: #000;
  font-size: 0.875rem;
  letter-spacing: 0;
  line-height: 1;
}
.swiper-slide-vdo video {
    width: 100%;
    height: 100%;
    /* height: auto; */
    object-fit: none; /* cover or contain as desired */
}
#servicesDropdown.submenu-toggle {
	position: absolute;
	right: 0;
	top: 0;
	height: 100%;
	width: 50%;
	text-align: right;
	padding: 10px 0 0;
	background: #212c56;
	z-index: 999;
	display:none;
}
select.form-control-custom {
	background: transparent url('../images/dropdown-arrow.svg') no-repeat scroll center right;
}
.safety-img {
	background: transparent url('../images/safety.webp') no-repeat scroll center;
	height: 600px;
	background-size: cover;
	background-attachment: fixed;
}
.parallax-container {
  position: relative;
  overflow: hidden;
  height: 100vh;
}

.img-parallax {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 120%; /* extra height for movement */
  object-fit: cover;
  transform: translateY(0);
  will-change: transform;
}

.error-captcha-header { background: transparent url('../images/error-captcha-header.webp') no-repeat scroll center top; height: auto !important; background-size: contain; background-attachment: fixed; aspect-ratio: 1920 / 600; }
.aboutheader { background: transparent url('../images/safedty.webp') no-repeat scroll center top; height: auto !important; background-size: contain; background-attachment: fixed; aspect-ratio: 1920 / 600; }
.sitemap-header { background: transparent url('../images/sitemap-header.webp') no-repeat scroll center top; height: auto !important; background-size: contain; background-attachment: fixed; aspect-ratio: 1920 / 600; }
.privacy-header { background: transparent url('../images/privacy-header.webp') no-repeat scroll center top; height: auto !important; background-size: contain; background-attachment: fixed; aspect-ratio: 1920 / 600; }
.terms-use-header { background: transparent url('../images/terms-use-header.webp') no-repeat scroll center top; height: auto !important; background-size: contain; background-attachment: fixed; aspect-ratio: 1920 / 600; }
.contact-header { background: transparent url('../images/gw_building_1920x700.webp') no-repeat scroll center top; height: auto !important; background-size: contain; background-attachment: fixed; aspect-ratio: 1920 / 600; }
.news-header { background: transparent url('../images/news-header.webp') no-repeat scroll center top; height: auto !important; background-size: contain; background-attachment: fixed; aspect-ratio: 1920 / 600; }
.chemical-terminal-header { background: transparent url('../images/chemical-terminal-header.webp') no-repeat scroll center top; height: auto !important; background-size: contain; background-attachment: fixed; aspect-ratio: 1920 / 600; }
.oil-terminal-header { background: transparent url('../images/oil-terminal-header.webp') no-repeat scroll center top; height: auto !important; background-size: contain; background-attachment: fixed; aspect-ratio: 1920 / 600; }
.operations-maintenance-header { background: transparent url('../images/operations-maintenance-header.webp') no-repeat scroll center top; height: auto !important; background-size: contain; background-attachment: fixed; aspect-ratio: 1920 / 600; }
.lube-oil-header { background: transparent url('../images/lube-oil-header.webp') no-repeat scroll center top; height: auto !important; background-size: contain; background-attachment: fixed; aspect-ratio: 1920 / 600; }
.carbon-black-header { background: transparent url('../images/carbon-black-header.webp') no-repeat scroll center top; height: auto !important; background-size: contain; background-attachment: fixed; aspect-ratio: 1920 / 600; }
.offsite-port-operations-header { background: transparent url('../images/offsite-port-operations-header.webp') no-repeat scroll center top; height: auto !important; background-size: contain; background-attachment: fixed; aspect-ratio: 1920 / 600; }
.services-header { background: transparent url('../images/services-header.webp') no-repeat scroll center top; height: auto !important; background-size: contain; background-attachment: fixed; aspect-ratio: 1920 / 600; }
.team-header { background: transparent url('../images/team-header.webp') no-repeat scroll center top; height: auto !important; background-size: contain; background-attachment: fixed; aspect-ratio: 1920 / 600; }
.business-values-header { background: transparent url('../images/business-values-header.webp') no-repeat scroll center top; height: auto !important; background-size: contain; background-attachment: fixed; aspect-ratio: 1920 / 600; }
.why-jv-header { background: transparent url('../images/why-jv-header.webp') no-repeat scroll center top; height: auto !important; background-size: contain; background-attachment: fixed; aspect-ratio: 1920 / 600; }
.partners-header { background: transparent url('../images/partners-header.webp') no-repeat scroll center top; height: auto !important; background-size: contain; background-attachment: fixed; aspect-ratio: 1920 / 600; }
.about-header { background: transparent url('../images/about-header.webp') no-repeat scroll center top; height: auto !important; background-size: contain; background-attachment: fixed; aspect-ratio: 1920 / 600; }

/* Responsive adjustments for sitemap */
@media (max-width: 767.98px) {
  .sitemap-title {
    font-size: 1.1rem;
  }
  
  .service-category-title {
    font-size: 0.9375rem;
  }
  
  .service-text {
    font-size: 0.8125rem;
  }
  .form-part {
	max-width: 100%;
	padding-left: 1.5rem !important;
	width: 100%;
}
#servicesDropdown.submenu-toggle {display:block}
.page-hero-section {background-attachment: scroll !important;}
}
.dropdown-menu1.dropdown-menu-mega {
	position: absolute;
	/* width: 1000px; */
	width: 1100px;
	/* height: 400px; */
	height: auto;
	/* top: 40px; */
	top: 55px;
	display: none;
	left: auto !important;
	right: -185px;
	/* right: -60px; */
	transform: none !important;
	gap: 0.5rem;
	/* background: #ffffffa3; */
	background: #fff;
	padding: 0.5rem;
	border-radius: 0;
	box-shadow: 0 0 10px #0000001f;
}
.dropdown-menu-mega .service-card:hover .service-content {opacity: 1; visibility: visible; }
.dropdown-menu-mega .service-title {font-size: 1em; }
.dropdown-menu-mega .service-content {padding: 0 1rem; transition: 0.3s; bottom: 1rem; }
/* .dropdown-menu1.dropdown-menu-mega .service-card { width: 33.33%; transform: none !important; cursor: pointer; } */
.dropdown-menu1.dropdown-menu-mega .service-card { /* width: calc(33.33% - 9px); */ transform: none !important; cursor: pointer; /* max-height: 280px; */ min-height: 250px; }
.nav-item.dropdown:hover .dropdown-menu-mega { display: flex; /* flex-wrap: wrap; */ /* position:relative; */ }
.nav-item.dropdown:hover .dropdown-menu-mega::before { content:''; position:absolute; top:-20px; left:0; width:100%; height: 20px; background: transparent;}
.dropdown-menu-mega .service-card .service-image {height:100%}
.show-m {display:none;}
.value-parra { color: #fff; }
.six-box-row {margin-bottom: var(--bs-gutter-y);}

.six-box-row .service-card .feature-card-inner { min-height: auto; }
.value-card-icon .value-icon { width: auto; height: auto; margin-bottom: 0; }
.value-card-ppart { display: flex; flex-wrap: wrap; }
.value-card-icon { width: 100%; display: flex; align-items: center; margin-bottom: 1.5rem; gap: 15px; text-align: left;}
.value-card-txxt { width: 100%; text-align: left; }
.dropdown-menu1.dropdown-menu-mega .service-subtitle { display: none; }
.service-card:hover .service-content.service-content-002 { opacity: 1; visibility: visible; transform: none; }

.footer-sub-menu { margin: 0; padding: 5px 0 0; list-style: none; width: 100%; }
.footer-nav-links .footer-sub-menu li a { font-size: 0.8em; }
.footer-nav-links .footer-sub-menu li { margin-bottom: 0.1em; position: relative; padding-left: 10px; }
.footer-nav-links .footer-sub-menu li::before { content: ''; position: absolute; left: 0; top: 9px; width: 2px; height: 9px; background: #2d824e; }
.logo-slider-wrap { margin-top: 3em; }

.capabilities-row .capabilities-col { width: 20%; }




/* ============================================
   RESPONSIVE STYLES
   ============================================ */

@media  (min-width: 768px) and (max-width: 991px) {
.contact-card .card-body {padding: 1rem 0rem;}
.contact-card .card-body {align-items: baseline !important;}
.contact-card-inner {text-align: center; flex-direction: column;}
.contact-card .card-body::after {transform: none; height: 100%; top:0;}
}

@media  (min-width: 1350px) and (max-width: 1400px) {
.container, .container-lg, .container-md, .container-sm, .container-xl {max-width: 1300px;}
}
@media  (min-width: 1250px) and (max-width: 1300px) {
.hero-slider-section {height: 680px;}
.swiper-slide-vdo video {object-fit: cover;}
}
@media  (min-width: 992px) and (max-width: 1279px) {
.service-hover {padding: 1rem;}
.service-hover-inner {padding: 1em;}
.service-hover-title {font-size: 1.2rem;}
.service-hover-desc, .service-hover-subtitle {font-size: 0.8rem;}
.about-inner {padding: 70px 20px;}
.repono-img .about-logo { right: -80px; margin-top: -90px; }
.golden-wing-img .about-logo { left: -80px; margin-top: -90px; }
.about-inner::before {width: calc(100% - 25px); top: 140px; left: 25px;}
.hero-slider-section {height: auto;}
.hero-swiper, .hero-swiper .swiper-wrapper, .hero-swiper .swiper-slide {height: auto; min-height: auto; max-height: 100%;}
.section-title {font-size: 2.5em;}
.form-part {max-width: 100%;  padding-left: 3em !important;}
.contact-card .card-body {padding: 1rem 0rem;}
.contact-card .card-body {align-items: baseline !important;}
.contact-card-inner {text-align: center; flex-direction: column;}
.contact-card .card-body::after {transform: none; height: 100%; top:0;}
}

@media screen and (min-width: 992px) {
.nav-item.dropdown .dropdown-menu[aria-labelledby="servicesDropdown"] {display:none !important}
.teamm-row .team-coll { width: 20%; }
}


@media  (min-width: 992px) and (max-width: 1300px) {
.navbar-nav .nav-link {font-size: 0.85em;}
.about-img-1 { min-height: 370px !important;}
.service-img-3 { min-height: 550px !important;}
.partner-img-1 { min-height: 550px !important;}
.partner-img-2 { min-height: 620px !important;}
.partner-content {max-width: 550px !important;}
.form-part {max-width: 100%;  padding-left: 3em !important;}
}

/* Tablet Styles (768px - 991px) */
@media (max-width: 991px) {
  .section-spacing {
    padding: 3rem 0;
  }
  
  .section-title {
    font-size: 2em;
  }
  
  .hero-title {
    font-size: 2.5em;
  }
  
  .hero-subtitle {
    font-size: 1.25em;
  }
  
  .footer-tagline {
    font-size: 2em;
  }
  .footer-col {margin-top: 0;}
  .site-footer {padding-top: 5rem;}
  .footer-nav-links {padding: 0 5px;}
  .footer-col:first-child {border-right:0;}
  
.service-card:hover .service-hover { visibility: visible; opacity: 1; width: 100%; padding: 15px; transition: all 0.25s ease; }
.service-hover { position: absolute; inset: 0; opacity: 0; visibility: hidden; transform: translateY(10px); padding: 15px; transition: all 0.25s ease; }
.service-hover-title {font-size: 1.5rem;}

.repono-img {min-height: 350px;  background-position: center;}
.golden-wing-img {min-height: 350px;  background-position: center;}
.repono-img .about-logo, .golden-wing-img .about-logo { position: static; margin-top: 0; transform: none; }
.about-inner::before {display: none;}
.about-inner {padding: 3em 1em;}
.logistics-col, .logistics-card-part { width: 33.33%; }
}

/* Mobile Styles (max-width: 767px) */
@media (max-width: 767px) {
  .hero-slider-section,
  .carousel-item {
    height: auto;
    min-height: auto;
    /* max-height: 43.75rem; */
    max-height: none;
  }
  
  .hero-title {
    font-size: 1.5em;
  }
  
.hero-subtitle {
	font-size: 0.8em;
	margin-bottom: 1em;
}
  
  .btn-hero {
	font-size: 0.8em !important;
	padding: 0.5rem 0.9rem;
}
  
  .section-title {
    font-size: 1.75em;
  }
  
  .section-description {
    font-size: 1em;
  }
  
  .feature-card-inner {
    min-height: 18.75rem;
    padding: 2rem 1.5rem;
  }
  
  .service-card {
    height: 25rem;
    height: auto;
  }
  
  .value-card-inner {
    /* min-height: 15rem; */min-height: auto;
    /* padding: 2rem 1.5rem; */padding: 1rem 1rem;
  }
  
  .footer-tagline {
    font-size: 1.5em; margin-bottom: 10px;
  }
  
  .carousel-control-prev-icon,
  .carousel-control-next-icon {
    width: 2rem;
    height: 2rem;
  }
 

.hero-slider-section .carousel-indicators, .hero-slider-section .hero-swiper-pagination.swiper-pagination-bullets { right: auto; top: auto; width: 100%; height: auto; flex-direction: unset; bottom: 0; } 
.hero-slider-section .carousel-indicators [data-bs-target], .hero-slider-section .hero-swiper-pagination .swiper-pagination-bullet { width: 40px; height: 4px; }
.footer-nav-links {padding: 0;} 
.footer-col {margin: 10px 0 0;padding: 0 9px;}
.mob-mt-0 {margin-top:0 !important;}
.mob-mb-0 {margin-bottom:0 !important;}
.mob-mb-2 {margin-bottom: 1rem !important;}
.mob-mb-3 {margin-bottom: 2rem !important;}
.mob-mb-4 {margin-bottom: 3rem !important;}
.footer-nav-links li {margin-bottom: 0.5rem;}
.footer-divider {margin: 0 0 1rem 0;}
.mob-g-2-0 {--bs-gutter-y: 1.5rem; --bs-gutter-x: 0;}
.site-footer .mob-mb-0 { --bs-gutter-y: 3rem; --bs-gutter-x: 0rem; }
.site-footer > .container { padding: 0 12px; }
.footer-col:first-child, .footer-col:nth-last-child(2) { border: 0; }
.footer-col { display:none }
.footer-col:first-child, .footer-col:last-child {display:block}
.copyright-row {margin: 0;}
.navbar-collapse {max-height: 500px; overflow-y: auto;}
.repono-img {min-height: 350px;  background-position: center;}
.golden-wing-img {min-height: 300px;  background-position: center;}
.repono-img .about-logo, .golden-wing-img .about-logo { position: static; margin-top: 0; transform: none; margin: 0 auto;}
.golden-wing-img .about-logo { margin-top: -55px; }
.repono-img .about-logo, .golden-wing-img .about-logo img { margin: 0 auto; max-width: 200px;}
.repono-img .about-logo {position: absolute; top: auto; bottom: -75px; left: 50%; right: auto; transform: translateX(-50%);}
.about-inner::before {display: none;}
.about-inner {padding: 4.5em 1em 5em;}
.hero-swiper, .hero-swiper .swiper-wrapper, .hero-swiper .swiper-slide {/* height: 300px; */height: auto;  min-height: auto;}
.swiper-slide-vdo video {object-fit: cover;}
.carousel-caption-custom {padding: 1.5em 0 0; max-width: 80%;}
.btn { font-size: 1em; }
.services-section .container-fluid {padding-left: 10px !important;  padding-right: 10px !important;}
.principles-section .container-fluid {padding-left: 10px !important;  padding-right: 10px !important;}
.homepage {overflow-x:hidden;}
.homepage .navbar-toggler {margin-right:5px;}
.homepage .leadership-section { padding-top: 10px; padding-left: 10px; padding-right: 10px; }
#teamMemberModal .modal-body {max-height: 550px; overflow-y: auto;}
.navbar-nav { gap: 0; }
.navbar-nav > .nav-item { border-bottom: 1px solid #5f6788; margin: 0; }
.navbar-nav > .nav-item:last-child { border-bottom: 0; padding-top: 15px; }
.navbar-nav > .nav-item .nav-link {padding: 10px 0;}
.navbar-nav .nav-link:hover, .navbar-nav .nav-link:focus {/* color: #4dd048 !important; */ background: none;}
.service-card:hover .service-hover { visibility: visible; opacity: 1; width: 100%; padding: 15px; transition: all 0.25s ease; }
.service-hover { position: absolute; inset: 0; opacity: 0; visibility: hidden; transform: translateY(10px); padding: 15px; transition: all 0.25s ease; bottom: 20px; }
.service-hover-title {font-size: 1.2rem;}
.service-hover-subtitle {letter-spacing: 0em;}
.value-card {min-height: auto; height: auto;}
.navbar-collapse .dropdown-menu.show {
  position: relative;
  z-index: 1050;
}

.logistics-col { width: 100%; }
.logistics-card-part { width: 50%; }
.logistics-card .feature-card-inner {justify-content: normal;}
.about-img-1, .service-img-3 {min-height: auto;}
.news-col-6 { width: 100%; }
.row-news {flex-wrap: wrap;}
.row-news .partner-img-1, .row-news .partner-img-2 {min-height: auto;}
.news-section-1 .bg-blue .partner-content, .news-section-2 .bg-green .partner-content {padding: 1.4em !important;}
.service-card .feature-card-inner .feature-title {padding: 1.2rem 1.2rem 0;}
.service-card .feature-card-inner .feature-description {padding: 0em 1.2em 1.2em 1.2em;}
.breadcrumb ul {gap: 0px 30px; flex-wrap: wrap;}
.contact-card .card-body::after {right: auto; top: auto; width: 100%; height: 1px; bottom: 0; left: 0; }

.team-member-info { padding: 0; }
.member-role {margin-bottom: 0.5rem;}
.team-coll { padding-right: 1em; padding-left: 1em; }
.site-header {padding: 50px 0 0;background: rgb(33, 44, 86);}
.site-header.scrolled {padding:0;}
.site-header.scrolled .navbar-dark{border-top:0;}
.site-header .navbar-dark {border-top: 1px solid rgba(255, 255, 255, 0.18);}
.clock::before {right: -5px; background: rgba(255, 255, 255, 0.18);display: none;}
.hero-slider-section { /* margin-top: 105px; */margin-top: 155px; }
.dropdown-menu1.dropdown-menu-mega {display:none !important;}
.show-d {display:none;}
.show-m {display:block;}
.service-card .feature-card-inner picture { width: 100%; }
.service-card .feature-card-inner img { width: 100%; }
.safety-img {height: 300px; background-size: cover; background-attachment: scroll;}

.clock {padding: 4px 0 4px 22px; background-size: 17px;font-size: 0.6rem; flex-wrap: wrap; width: 50%;}
.clock-container {width:100%; padding:0 15px; font-size: 0.6rem; right:0; top: -50px;}
.site-header.fixed-top.scrolled .clock-container { display: none; }
.clock h3 {font-size: 0.6rem;}
.saudi-logo img { width: 80px; }
.capabilities-row .capabilities-col { width: 100%; }
}
/* Small Mobile (max-width: 575px) */
@media (max-width: 575px) {
  .hero-title {
    font-size: 1.2em;
  }
  
  .section-title {
    font-size: 1.5em;
  }
  
  .feature-title {
    font-size: 1.125em;
  }
  
  .service-title {
    font-size: 1.25em;
  }
  
  .value-title {
    font-size: 1.125em;
  }
}

/* ============================================
   ACCESSIBILITY & FOCUS STYLES
   ============================================ */
a:focus,
button:focus,
.btn:focus {
  /* outline: 0.125rem solid #4a90e2;
  outline-offset: 0.125rem; */
}

/* Skip to main content link */
.skip-to-main {
  position: absolute;
  top: -3.125rem;
  left: 0;
  background: var(--color-primary-blue);
  color: var(--color-white);
  padding: 0.5rem 1rem;
  text-decoration: none;
  z-index: 9999;
}

.skip-to-main:focus {
  top: 0;
}

/* ============================================
   UTILITY CLASSES
   ============================================ */
.rounded-pill {
  border-radius: var(--radius-pill) !important;
}

.text-white {
  color: var(--color-white) !important;
}


@media (max-width: 575.98px) {
  .contact-card .d-flex {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
  
  .contact-icon {
    margin-bottom: 1rem;
  }
}

/* Print Styles */
@media print {
  .site-header,
  .site-footer,
  .carousel-control-prev,
  .carousel-control-next,
  .carousel-indicators {
    display: none !important;
  }
}