/* Al Ghanim Shipping - shared page styles.

   This block used to be inlined, identically, into every page. It now lives
   here so there is one copy to maintain and the browser caches it once.
   Paths in url() are relative to this file (assets/css/). */

html, body {
  overflow-x: hidden;
}

html, body {
    font-family: 'Inter', sans-serif;
}

body.no-pull-refresh {
		overscroll-behavior-y: contain;
}

body.no-scroll {
  position: fixed;
  top: 0;
  width: 100%;
}

html.no-scroll {
  overflow: hidden;
}

@media screen and (max-width: 812px) and (orientation: landscape) {

  body::before {
    content: "Landscape mode is not supported. Please rotate your device.";
    display: flex;
    justify-content: center;
    align-items: center;
    background: #000;
    color: #fff;
    font-size: 1.2rem;
    text-align: center;
    position: fixed;
    inset: 0;
    z-index: 9999;
    padding: 2rem;
  }
}

@media screen and (min-width: 768px) and (max-width: 1024px) {

  body::before {
    content: "Tablet view is not supported. Please use a desktop or mobile device in portrait mode.";
    display: flex;
    justify-content: center;
    align-items: center;
    background: #000;
    color: #fff;
    font-size: 1.2rem;
    text-align: center;
    position: fixed;
    inset: 0;
    z-index: 9999;
    padding: 2rem;
  }
}

.custom-menu {
  display: flex;
  justify-content: flex-end;
  gap: 20px;
  font-family: 'Inter' !important;
	font-size: 16px;
}

.custom-menu a {
  text-decoration: none;
  color: #344054;
  font-weight: normal;
  position: relative;
  transition: all 0.3s ease;
	right: 5rem;
	top: 1rem;
	display: inline-block;
	min-width: 70px;
	text-align: center;
}

.custom-menu a:hover,
.custom-menu a.active {
  font-weight: 700;
}

.custom-menu a::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -4px;
  width: 0;
  height: 3px;
  background-color: #0EBCF6;
  transition: width 0.3s ease;
}

.custom-menu a:hover::after,
.custom-menu a.active::after {
  width: 100%;
}

.custom-menu a:focus,
.custom-menu a:active {
  outline: none;
  background-color: transparent;
  box-shadow: none;
}

.sticky-header, .mobile-sticky {
  position: fixed;
  top: 0;
  z-index: 999;
  background-color: white;
  width: 100%;
	height: 76px;
}

.sticky-header {
	box-shadow: 0 10px 20px -10px rgba(0, 0, 0, 0.1);
}

.menu-toggle {
  font-size: 30px;
  cursor: pointer;
  transition: font-weight 0.3s ease;
}

.menu-toggle.open {
  font-weight: bold;
}

.mobile-menu {
  display: none;
  flex-direction: column;
  position: absolute;
	align-self: right;
  top: 56px;
  right: -80%;
  width: 1200%;
	max-width: 400px;
	height: 750px;
  background-image: url('../img/menu-bg.png'); /* Replace with your image */
  background-size: cover;
  background-position: center;
  z-index: 998;
  padding: 0px 0;
}

.mobile-menu.active {
  display: flex;
}

.menu-item {
	margin-top: 10px;
  opacity: 0;
  transform: translateY(20px);
  padding: 10px;
  text-align: left;
	margin-left: 50px;
  text-decoration: none;
  color: white;
  font-size: 18px;
	font-family: inter;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  transition: all 0.4s ease;
}

.menu-item.show {
  opacity: 1;
  transform: translateY(0);
}

.hero-text {
  font-family: inter;
  color: white;
  padding: 40px;
  text-align: left;
  max-width: 800px;
  position: relative;
}

.text-line {
  margin-bottom: 10px;
}

/* Wrapper that holds text and background */
.line-wrapper {
  position: relative;
  display: inline-flex;
  gap: 10px;
  font-size: 48px;
  font-weight: 700;
  align-items: center;
  padding: 0 5px;
}

/* Black background that matches content width */
.bg {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
	width: 100%;
  background-color: rgba(0, 0, 0, 0.68);
  transform: translateX(-100%);
  z-index: 0;
  transition: transform 0.6s ease;
	opacity: 0;
}

.bg.show {
	opacity: 1;
  transform: translateX(0);
}

/* Word styling */
.word {
  opacity: 0;
  position: relative;
  z-index: 1;
  transition: opacity 0.4s ease;
}

.word.show {
  opacity: 1;
}

/* Button styles */
.button-container {
  position: relative;
  margin-top: 10px;
  height: 72px;
  width: 180px;
}

.button-bg {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background-color: #0ebcf6;
  opacity: 0;
	transform: translateX(-100%);
  transition: transform 0.6s ease;
  border-radius: 9px;
}

.button-bg.show {
  opacity: 1;
	transform: translateX(0);
}

.hero-button {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
	font-family: inter;
  color: white;
  font-weight: 800;
  font-size: 29px;
  text-decoration: none;
  text-align: center;
  line-height: 72px;
  /*transform: scale(1.4);*/
  opacity: 0;
  /*transition: transform 0.5s ease, opacity 0.5s ease;*/
	transition: opacity 0.5s ease, font-size 1s ease, font-weight 1s ease;
  z-index: 1;
}

.hero-button.show {
  opacity: 1;
  /*transform: scale(1);*/
	font-size: 24px;
	font-weight: 600;
}

.hero-button.show:hover {
	color: #fff;
}

.hero-button.show.active {
	outline: none;
	box-shadow: none;
}

.hero-text-mob {
  font-family: inter;
  color: white;
  padding: 20px;
  text-align: left;
  max-width: 400px;
  position: relative;
}

.text-line-mob {
  margin-bottom: 10px;
}

/* Wrapper that holds text and background */
.line-wrapper-mob {
  position: relative;
  display: inline-flex;
  gap: 10px;
  font-size: 32px;
  font-weight: 700;
  align-items: center;
  padding: 0 5px;
}

/* Black background that matches content width */
.bg-mob {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
	width: 100%;
  background-color: rgba(0, 0, 0, 0.68);
  transform: translateX(-100%);
  z-index: 0;
  transition: transform 0.6s ease;
	opacity: 0;
}

.bg-mob.show {
	opacity: 1;
  transform: translateX(0);
}

/* Word styling */
.word-mob {
  opacity: 0;
  position: relative;
  z-index: 0;
  transition: opacity 0.4s ease;
}

.word-mob.show {
  opacity: 1;
}

/* Button styles */
.button-container-mob {
  position: relative;
  margin-top: 10px;
  height: 48px;
  width: 135px;
}

.button-bg-mob {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background-color: #0ebcf6;
  opacity: 0;
	transform: translateX(-100%);
  transition: transform 0.5s ease !important;
  border-radius: 4.5px;
}

.button-bg-mob.show {
  opacity: 1;
	transform: translateX(0) !important;
}

.hero-button-mob {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
	font-family: inter;
  color: white;
  font-weight: 900;
  font-size: 20px;
  text-decoration: none;
  text-align: center;
  line-height: 48px;
  /*transform: scale(1.4);*/
  opacity: 0;
  /*transition: transform 0.5s ease, opacity 0.5s ease;*/
	transition: opacity 0.5s ease, font-size 1s ease, font-weight 1s ease;
  z-index: 1;
}

.hero-button-mob.show {
  opacity: 1;
  /*transform: scale(1);*/
	font-size: 16px;
	font-weight: 600;
}

.container-animation-wrapper {
  position: relative;
	top: 20rem;
	right: 7rem;
  width: 100%;
  height: auto; /* Adjust based on your container height */
  display: flex;
  justify-content: center;
  align-items: center;
	z-index: 1;
}

.container-img.red {
  position: absolute;
  max-height: 600px;
  transition: transform 1.5s ease;
  z-index: 1;
}

.container-img.blue {
  position: absolute;
  max-height: 900px;
	top: -550px;
  transition: transform 1.5s ease;
  z-index: 1;
}

/* Animation classes */
.container-img.red.animate {
  transform: translateY(-120px);
	opacity: 1;
}

.container-img.blue.animate {
  transform: translateY(120px);
	opacity: 1;
}

.container-animation-wrapper-mob {
  position: relative;
	top: -1rem;
	right: -50px;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: right !important;
  align-items: center;
	z-index: 1;
}

.container-img-mob {
  position: absolute;
  max-height: 450px;
  transition: transform 1.5s ease;
		overflow-y: hidden;
}

.container-img-mob.redm {
	top: 3rem;
	right: 5rem;
}

.container-img-mob.bluem {
	top: -11rem;
	right: 2rem;
}

/* Animation classes */
.container-img-mob.redm.animate {
  transform: translateY(-80px);
}

.container-img-mob.bluem.animate {
  transform: translateY(150px);
}

.stats-wrapper {
  display: flex;
  justify-content: center;
  gap: 86px;
  margin: 60px 60px;
	transform: translateX(30%);
  text-align: center;
}

.stat-box {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.stat-box img {
  width: 100px;
  margin-bottom: 10px;
}

.stat-number {
  font-size: 32px;
	font-family: inter;
  font-weight: bold;
  color: #344054;
  margin-bottom: 10px;
}

.stat-label {
  font-size: 24px;
	font-family: inter;
  font-weight: 700;
  color: #344054;
}

.stats-wrapper-mob {
  display: flex;
  justify-content: center;
  gap: 61px;
  text-align: center;
}

.stat-box-mob {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.stat-box-mob img {
  width: 50px;
  margin-bottom: 10px;
}

.stat-number-mob {
	font-variant-numeric: tabular-nums;
  font-size: 20px;
	font-family: inter;
  font-weight: bold;
  color: #344054;
  margin-bottom: 10px;
}

.stat-label-mob {
  font-size: 18px;
	font-family: inter;
  font-weight: 400;
  color: #344054;
}

.service-card .elementor-icon-box-icon svg {
	top: 10px;
}

.service-card:hover .elementor-icon-box-title {
  font-weight: 700 !important;
  color: #000;
}

.service-card {
	box-shadow: 0 3px 3px rgba(0, 0, 0, 0.25);
	border-radius: 12px;
}

.clickable-box {
  position: relative;
  cursor: pointer;
  z-index: 1;
}

.clickable-box::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
}

.clickable-box-m {
  position: relative;
  cursor: pointer;
  z-index: 0;
}

.clickable-box-m::before {
  content: "";
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  z-index: 1;
}

.service-card-m * {
	position: relative;
	z-index: 2;
}

.service-card-m {
	box-shadow: 0 3px 3px rgba(0, 0, 0, 0.25);
	border-radius: 6px;
}

.service-card-m .elementor-icon-box-icon svg {
	top: 0.8rem;
}

.service-card-m {
	overflow: hidden;
	border-radius: 12px;
}

.zoom-bg {
  background-size: 110% !important;
  transition: background-size 3s ease !important;
  background-position: center;
	background-repeat: no-repeat;
}

.zoom-bg.zoomed {
  background-size: 150% !important;
}

.zoom-bg2 {
  background-size: 110% !important;
  transition: background-size 2s ease !important;
	background-repeat: no-repeat;
}

.zoom-bg2.zoomed {
  background-size: 130% !important;
}

.zoom-bgm {
  background-position: center center !important;
  transition: background-position 5s ease, background-size 5s ease !important;
	background-repeat: no-repeat;
}

.zoom-bgm.zoomed {
  background-position: 25% 75% !important;
}

.card-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
	gap: 20px;
	align-items: start;
}

.card-border {
 	display: flex;
	flex-direction: column;
	height: 100%;
	border: 1px solid;
	border-bottom-left-radius: 4px;
	border-bottom-right-radius: 4px;
	border-color: #E3E5E5;
	overflow: hidden;
}

.card-border img {
	width: 100%;
	height: auto;
	display: block;
	max-height: 150px;
}

.card-border .elementor-widget-heading {
  padding: 2vw 0vw;
	margin-left: 2vw;
	margin-top: -3vw;
}

.proj-desc-mob {
	max-width: 350px;
}

.services-tab-menu {
  display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: 20px;
	padding: 0;
	margin-bottom: 20px;
}

.tab-link {
	width: 22%;
	text-align: center;
  background: none;
  border: none;
  font-size: 25px;
  font-weight: 400;
	line-height: 180%;
  color: #00000080;
  padding: 12px 10px;
	position: relative;
  transition: all 0.3s ease;
  cursor: pointer;
}

/* Default light grey underline */
.tab-link::after {
  content: "";
  position: absolute;
	top: 100%;
  bottom: 0;
  left: 10%;
  height: 9px;
  width: 80%;
  background-color: #d9d9d9;
  border-radius: 50px;
  transition: background-color 0.3s ease;
}

/* Hover or Active State */
.tab-link:hover::after,
.tab-link.active::after {
  background-color: #0EBCF6;
}

.tab-link:hover,
.tab-link.active {
  color: #000;
  font-weight: 700;
}

.fade-column {
  position: relative;
  overflow: hidden;
  z-index: 1;
}

.fade-column::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  height: 60px;
  width: 100%;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0), #f5f5f5);
  z-index: 2;
  pointer-events: none;
}

/* Hide all tab content by default */
.tab-content {
  display: none;
  position: relative;
  overflow: hidden;
  padding-bottom: 30px;
}

/* Only show the selected tab section.
   Scoped to the desktop breakpoint so it cannot override the panel's own
   .elementor-hidden-mobile, which hides it at <=767px. */
@media (min-width: 1025px) {
  .tab-content.active-tab {
    display: flex;
  }
}

/* All content inside is hidden initially */
.column-content {
  opacity: 0;
  transform: translateY(1000px);
  transition: transform 0.6s ease, opacity 0.6s ease;
}

/* Reveal content only when hovered */
.column-content.animate {
  opacity: 1;
  transform: translateY(0);
}

/* Optional: staggered delay for 4 columns */
.delay-1 { transition-delay: 0s !important; }
.delay-2 { transition-delay: 0.2s !important; }
.delay-3 { transition-delay: 0.4s !important; }
.delay-4 { transition-delay: 0.6s !important; }

/* Image container must be positioned */
.image-section-srv {
  position: relative;
	width: 100%;
	display: inline-block;
}

/* Outer full-width bar */
.lets-talk-bar {
  position: absolute;
  bottom: 0;
  left: 0px;
  width: 100%;
  background: linear-gradient(to right, rgba(0,0,0,0), #68D5F954);
  padding: 10px 16px;
  box-sizing: border-box;
  z-index: 10;
	cursor: pointer;
}

/* Inner content (icon + text) */
.lets-talk-inner {
  display: flex;
  align-items: center;
  color: white;
	font-family: inter;
  font-weight: 700;
  font-size: 16px;
}

.lets-talk-inner img {
  width: 16px;
  height: 16px;
  margin-right: 8px;
}

/* Fixed Services Button */
.mobile-services-button-wrapper {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 1000;
}

#openServicesMenu {
  background-color: #0EBCF6;
	width: 138px;
	height: 56px;
  color: white;
	font-family: inter;
	font-size: 16px;
  font-weight: 700;
  border: none;
  padding: 0;
  border-radius: 4px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.2);
  cursor: pointer;
	transition: all 0.3s ease;
	transform-origin: right center;
}

#openServicesMenu.active {
	background-color: white;
	color: black;
	font-family: inter;
	font-size: 14px;
	font-weight: 400;
	transform: scale(0.75);
}

/* Fullscreen Gradient Overlay */
.services-menu-overlay {
  position: fixed;
  inset: 0;
	display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: flex-end;
  padding: 0 20px 86px 20px;
  gap: 20px;
	opacity: 0;
	pointer-events: none;
  z-index: 999;
	transition: opacity 0.4s ease;
	will-change: opacity, transform;
	backface-visibility: hidden;
	isolation: isolate;
	perspective: 1000px;
}

.services-menu-overlay::before {
	content:"";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(165.25deg, rgba(255, 255, 255, 0) -0.22%, rgba(128, 128, 128, 0.5) -0.22%, #000000 53.01%);

	pointer-events: none;
	will-change: transform;
	transform: translate3d(0, 0, 0);
}

.services-menu-overlay.active {
	opacity: 1;
	pointer-events: auto;
}

/* Menu Items */
.srv-menu-items {
  display: flex;
  flex-direction: column;
  width: 100%;
  align-items: flex-end;
	gap: 10px;
}

.srv-menu-item {
  background-color: #0EBCF6;
  color: white;
  font-weight: 700;
	font-family: inter;
	font-size: 18px;
  border: none;
  padding: 0 16px;
	height: 56px;
  border-radius: 6px;
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.5s ease, transform 0.5s ease;
	text-align: right;
	width: 100%;
	max-width: 336px;
}

.srv-menu-item.show {
  opacity: 1;
  transform: translateY(0);
}

/* Mobile tab sections. The markup puts .is-active on the first one so it
   still shows without JS; scoped to the mobile breakpoint so it cannot
   override .elementor-hidden-desktop / -tablet, which hide it at >=768px. */
.mobile-tab {
  display: none;
}
@media (max-width: 767px) {
  .mobile-tab.is-active {
    display: block;
  }
}

.lets-talk-mobile-form-overlay {
  position: fixed;
  left: 0;
	bottom: 0;
	width: 100%;
	height: 90%;
  background: none;
  display: flex;
  z-index: 9999;
	transform: translatey(100%);
  justify-content: flex-end;
	transition: transform 0.4s ease;
	flex-direction: column;
	pointer-events: auto;
}

.lets-talk-mobile-form-overlay.active {
  transform: translatey(0);
	pointer-events: auto;
	overscroll-behavior: contain;
	background-color: rgba(0, 0, 0, 0.01);
	touch-action: none;
}

.lets-talk-mobile-form-overlay.active .lets-talk-mobile-form-wrapper {
	pointer-events: auto;
}

.lets-talk-mobile-form-wrapper {
	display: flex;
	flex-direction: column;
	height: 90%;
  background: white;
  border-top-left-radius: 18px;
  border-top-right-radius: 18px;
  overflow: hidden;
	pointer-events: auto;
}

/* Header: fixed at top */
.lets-talk-mobile-form-header {
  padding: 16px 20px;
  flex-shrink: 0;
  background: white;
  z-index: 1;
}

.lets-talk-mobile-form-header h2 {
  margin: 0;
  font-size: 28px;
  font-weight: 600;
  font-family: 'Inter', sans-serif;
	color: #101828;
}

/* Scrollable area */
.lets-talk-mobile-form-scrollable {
  overflow-y: auto;
  padding: 20px;
  flex-grow: 1;
	-webkit-overflow-scrolling: touch;
	touch-action: pan-y;
}

/* Footer with submit button fixed at bottom */
.lets-talk-mobile-form-footer {
  padding: 16px 20px;
  background: white;
  flex-shrink: 0;
  z-index: 1;
}

#letsTalkSubmitProxy {
  background-color: #0EBCF6;
  color: white;
	font-family: inter;
  font-size: 16px;
  font-weight: 700;
  border: none;
  border-radius: 8px;
  padding: 12px 20px 12px 20px;
  width: 100%;
  cursor: pointer;
}

/* ======= HIDE REAL CF7 SUBMIT BUTTON ======= */
.lets-talk-mobile-form-scrollable .wpcf7 input[type="submit"] {
  display: none;
}

.wpcf7-form label {
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  font-weight: 700;
  color: #344054;
  display: block;
}

.optional-tag {
  font-style: italic;
  font-weight: 500;
  color: #344054;
  font-size: 12px;
	font-family: inter;
}

.wpcf7-form input[type="text"],
.wpcf7-form input[type="email"],
.wpcf7-form input[type="tel"] {
  width: 100%;
	height: 48px;
  padding: 14px 16px;
  font-size: 16px;
  font-family: 'Inter', sans-serif;
  border: 1px solid #ccc;
  border-radius: 8px;
  box-sizing: border-box;
  margin-bottom: 14px;
}

.wpcf7-form textarea {
  width: 100%;
	height: 112px;
  padding: 14px 16px;
  font-size: 16px;
  font-family: 'Inter', sans-serif;
  border: 1px solid #ccc;
  border-radius: 8px;
  box-sizing: border-box;
	margin-bottom: -50px;
}

.services-heading {
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  font-weight: 700;
  margin-bottom: 10px;
  color: #344054;
}

.rounded-divider .elementor-divider-separator {
	border-radius: 25px;
}

.lets-talk-mobile-form-overlay,
.lets-talk-mobile-form-wrapper,
.lets-talk-mobile-form-scrollable {
  overflow-x: hidden;
}

.lets-talk-mobile-handle {
  width: 48px;
  height: 5px;
  background-color: #CDCFD0;
  border-radius: 100px;
  margin: 15px auto;
}

.ripple-dot {
  position: absolute;
  width: 8px;
  height: 8px;
  background-color: #0EBCF6;
  border-radius: 50%;
  z-index: 2;
  opacity: 0; /* Start hidden */
  animation: fadeInDot 0s forwards;
  animation-delay: var(--delay);
}

/* Delay-controlled dot visibility */
@keyframes fadeInDot {
  to {
    opacity: 1;
  }
}

.ripple-dot::before,
.ripple-dot::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 20px;
  height: 20px;
  background-color: #0EBCF6;
  border-radius: 50%;
  transform: translate(-50%, -50%) scale(0.5);
  opacity: 0.5;
  z-index: 1;
}

/* Looping animation */
.dot-loop::before {
  animation: ripplePulse 2.5s ease-out infinite;
  animation-delay: var(--delay);
}
.dot-loop::after {
  animation: ripplePulse 2.5s ease-out infinite;
  animation-delay: calc(var(--delay) + 1.25s);
}

/* One-time animation */
.dot-once::before {
  animation: ripplePulse 2.5s ease-out forwards;
  animation-delay: var(--delay);
}
.dot-once::after {
  animation: ripplePulse 2.5s ease-out forwards;
  animation-delay: calc(var(--delay) + 1.25s);
}
.dot-once {
  animation: fadeInDot 0s forwards, fadeOutDot 4s forwards;
  animation-delay: var(--delay), var(--delay);
}

/* Ripple pulse animation */
@keyframes ripplePulse {
  0% {
    transform: translate(-50%, -50%) scale(0.5);
    opacity: 0.5;
  }
  100% {
    transform: translate(-50%, -50%) scale(2);
    opacity: 0;
  }
}

/* Hide dot-once after ripple ends */
@keyframes fadeOutDot {
  0%, 80% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

/* Default hidden state */
.project-card {
  opacity: 0;
  transition: all 0.8s ease;
	will-change: transform, opacity;
}

.left-card {
  transform: translateX(-250%);
}
.right-card {
  transform: translateX(250%);
}

/* When .revealed is added, show row-by-row */
.projects-wrapper1.revealed .project-card {
  opacity: 1;
  transform: translateX(0);
  transition-delay: 0.1s;
}

.projects-wrapper2.revealed .project-card {
  opacity: 1;
  transform: translateX(0);
  transition-delay: 0.5s;
}

.projects-wrapper3.revealed .project-card {
  opacity: 1;
  transform: translateX(0);
  transition-delay: 0.9s;
}

.projects-wrapper4.revealed .project-card {
  opacity: 1;
  transform: translateX(0);
  transition-delay: 1.3s;
}

.section-shadow {
  box-shadow: 0 10px 20px -10px rgba(0, 0, 0, 0.4);
  z-index: 2;
  position: relative;
  background: #f5f5f5;
}

/* Hide native checkbox */

/* Draw custom tick using ::after */

/* When checked, show the tick */

/* Default link style */
.footer-links a {
  text-decoration: none;
  font-weight: 400;
  transition: font-weight 0.3s ease;
	outline: none;
}

/* Highlight current link */
.footer-links a.active {
  font-weight: 700;
	color: #0EBCF6 !important;
}

/* Home icon default (grayscale when not active) */
.home-icon img {
  filter: grayscale(100%);
  transition: filter 0.3s ease;
	outline: none;
}

/* Home icon colored when on homepage */
.home-icon.active img {
  filter: none;
	outline: none;
}

/* Remove click/focus outline and zoom on home icon */
.home-icon a,
.home-icon img {
  outline: none;
  border: none;
  box-shadow: none;
  -webkit-tap-highlight-color: transparent; /* mobile blue flash */
  transform: none;
  transition: none;
}

.header-logo a,
.header-logo img {
	outline: none;
	box-shadow: none;
	border: none;
}

.text-link a {
	outline: none;
	box-shadow: none;
	border: none;
}

.popup-form .form-heading {
	font-family: inter;
  font-size: 48px;
  font-weight: 600;
  margin-bottom: 30px;
  text-align: left;
}

.popup-form .form-label {
  position: relative;
	display: block;
  margin-bottom: 25px;
  font-size: 14px;
  font-weight: 500;
  color: #344054;
}

.popup-form .wpcf7-not-valid-tip {
  display: block;
  color: #f44336;
  font-size: 13px;
	margin-bottom: -40px;
	margin-top: 20px;
	line-height: 1;
  height: 15px; /* Reserve vertical space */
  overflow: hidden;
  transition: opacity 0.3s ease;

}

.popup-form .required-star {
  color: #0EBCF6;
  margin-left: -2px;
}

.popup-form input[type="text"],
.popup-form input[type="email"] {
  width: 512px;
  padding: 12px 14px;
  font-size: 16px;
	font-family: inter;
  border: 1px solid #D0D5DD;
  border-radius: 8px;
  margin-top: 6px;
  margin-bottom: -20px;
  box-sizing: border-box;
}

.popup-form textarea {
  width: 512px;
  padding: 12px 14px;
  font-size: 16px;
	font-family: inter;
  border: 1px solid #D0D5DD;
  border-radius: 8px;
  margin-top: 6px;
  margin-bottom: 10px;
  box-sizing: border-box;
}

.popup-form input::placeholder,
.popup-form textarea::placeholder {
  color: #667085;
	font-family: inter;
	font-size: 16px;
	font-weight: 400;
}

.popup-form .services-checkboxes .wpcf7-form-control {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 0px;
  row-gap: 10px;
	margin-bottom: 20px;
	max-width: 512px;
}

.popup-form .services-checkboxes .wpcf7-list-item {
  display: flex;
  align-items: flex-start;
}

.popup-form .services-checkboxes label {
  font-weight: 500;
	font-family: inter;
  font-size: 16px;
  color: #344054;
}

/* Hide native checkbox */
.popup-form input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  position: relative;
  width: 20px;
  height: 20px;
  margin-right: -7px;
	align-items: flex-start;
	transform: translatex(-80%);
	top: 4px;
  border: 1px solid #D0D5DD;
  border-radius: 6px;
  background-color: #fff;
  cursor: pointer;
  transition: all 0.2s ease-in-out;
	outline: none;
}

/* Draw custom tick using ::after */
.popup-form input[type="checkbox"]::after {
  content: "";
  position: absolute;
  width: 6px;
  height: 12px;
  border: solid white;
  border-width: 0 2px 2px 0;
  top: 2px;
  left: 6px;
  transform: rotate(45deg) scale(0);
  opacity: 0;
  transition: all 0.2s ease-in-out;
}

/* When checked, show the tick */
.popup-form input[type="checkbox"]:checked {
  background-color: #0EBCF6;
  border-color: #0EBCF6;
}

.popup-form input[type="checkbox"]:checked::after {
  transform: rotate(45deg) scale(1);
  opacity: 1;
}

.popup-form input[type="submit"] {
	display: inline-block;
	width: 512px;
	height: 48px;
  background-color: #0EBCF6;
  color: #fff;
  border: none;
	border-radius: 8px;
  font-size: 18px;
  font-weight: 500;
	text-align: center;
	line-height: 48px;
	vertical-align: middle;
  cursor: pointer;
	padding: 0;
	outline: none;
}

/* Hide popup by default */
.popup-overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.6); /* Dimmed background */
  z-index: 9999;
  justify-content: center;
  align-items: center;
}

/* Popup box */
.popup-content {
  background: #fff;
  padding: 40px;
  border-radius: 10px;
  max-width: 600px;
  width: 90%;
  position: relative;
  animation: fadeIn 0.3s ease;
}

/* Close button */
.popup-close {
  position: absolute;
  top: 12px;
  right: 20px;
  font-size: 28px;
  color: #888;
  cursor: pointer;
}

/* Animation */
@keyframes fadeIn {
  from { opacity: 0; transform: scale(0.95); }
  to { opacity: 1; transform: scale(1); }
}

.mail-icon {
	outline: none;
	box-shadow: none;
	border: none;
}

/* Home icon default (grayscale) */
.home-icon-mob img {
  filter: grayscale(100%);
  transition: filter 0.3s ease;
  outline: none;
}

/* Active home icon */
.home-icon-mob.active img {
  filter: none;
  outline: none;
}

/* Remove focus/outline effect */
.home-icon-mob a,
.home-icon-mob img {
  outline: none;
  border: none;
  box-shadow: none;
  -webkit-tap-highlight-color: transparent;
  transform: none;
  transition: none;
}

/* Footer link base style */
.footer-link-mob {
  text-decoration: none;
  font-weight: 400;
  transition: font-weight 0.3s ease;
  outline: none;
}

/* Active page link */
.footer-link-mob.active {
  font-weight: 700;
	color: #0EBCF6 !important;
}

.footer-link-mob a {
	outline: none !important;
	border: none !important;
	box-shadow: none !important;
}

.tabImage img {
	filter: brightness(80%);
}

.tabImagemob img {
	filter: brightness(80%);
}

.hero-vid-mob {
	position: relative;
	overflow: hidden;
	border: none !important;
}

.video-spacer-fix {
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 3px;
	background-color: #F5F5F5;
	z-index: 10;
	pointer-events: none;
}