:root {
  --main-blue: #23939F;
  --secondary-color: #216D9F;
  --text-color: #FFFFFF;
  --text-color-two: #C3D1DA;
  --grey-varient: #5E5E5E;
  --grey-varient-two: #7A7A7A;
  --grey-varient-three: #CFD8E9;
  --grey-varient-four: #757575;
  --grey-varient-five: #cccccc;
  --grey-varient-six: #BABABA;
  --blue-varient: #0097a7;
  --blue-varient-two: #0F4A74;
  --dark-grey-varient: #333333;
  --white-varient: #f3f9fa;
  --white-varient-two: #d4e3f3;
  --white-varient-three: #f8f9fa;
  --white-varient-four: #dddddd;
  --white-varient-six:#90A3BF;
  --black-color: #000000;
  --light-blue: #B9D0DF;
  --light-blue-two: #cfe5ff;
  --shadow-color-one: rgba(0, 0, 0, 0.08);
  --shadow-color-two: rgba(0, 0, 0, 0.15);
  --background-varient-one: rgba(255, 255, 255, 0.05);
  --background-varient-two: rgba(255, 255, 255, 0.7);
  --background-varient-three: rgba(35, 147, 159, 0.24);
  --border-varient-color: rgba(255, 255, 255, 0.4);
  --border-varient-color-two: rgba(255, 255, 255, 0.35);
  /* Fonts */
  --SpaceGrotesk-font: "Space Grotesk", sans-serif;
  --Almarai-font: "Almarai", sans-serif;
}

body,
html {
  margin: 0;
  padding: 0;
  font-family: "Poppins", sans-serif;
  height: 100%;
}

.card {
  transition: all 0.3s ease-in-out;
}

.card:hover {
  transform: scale(1.08);
}

/* ========================================================= 
======================Home Page Starts =====================
============================================================ */


/*  =============================Header & banner Starts=================================  */
/* Hero Background */
.hero {
  background: url('../images/Banner-bg.webp') center/cover no-repeat;
  height: 100vh;
  position: relative;
  display: flex;
  align-items: center;
  color: var(--text-color);
}

.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.2);
}

.hero-content {
  position: relative;
  z-index: 2;
  margin-top: 240px;
}

.hero h2 {
  font-size: 1.2rem;
  font-weight: 500;
  text-transform: uppercase;
  color: var(--white-varient-two);

}

.hero h1 {
  font-size: 65px;
  font-weight: bold;
  line-height: 1.3;
  background: linear-gradient(90deg, var(--text-color) 0%, var(--text-color-two) 75%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
  margin-bottom: 20px;
  font-family: var(--SpaceGrotesk-font)
}

.hero .btn-light {
  color: var(--blue-varient-two);
  font-weight: 600;
  border-radius: 30px;
  padding: 10px 24px;
  text-transform: uppercase;
  font-size: 15px;
  border: none;
  transition: all 0.3s ease;
  box-shadow: 0 8px 20px rgba(10, 61, 98, 0.25);
  font-family: "Roboto", sans-serif;
}


.hero .btn-light:hover {
  background-color: var(--black-color);
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(10, 61, 98, 0.35);
  color: var(--text-color);
}

/* Mobile (phones) */


@media (max-width: 767px) {
  .hero h1 {
    font-size: 29px;
  }
}

/* Tablet */
@media (min-width: 768px) and (max-width: 1023px) {
  .hero h1 {
    font-size: 46px;
  }
}



/* ===== LOGO LEFT CORNER ON DESKTOP ===== */
.header-logo {
  position: absolute;
  left: 30px;
  top: 30px;
  z-index: 11;
}

.header-logo img {
  width: 160px;
}

/* ===== CURVED NAVBAR ===== */
.custom-navbar-wrapper {
  position: absolute;
  top: 30px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
  border-radius: 50px;
  overflow: hidden;
}

@media screen and (width: 1024px) {
  .custom-navbar-wrapper {
    left: 60%;
  }

  .header-logo img {
    width: 140px;
  }
}

.custom-navbar {
  background: var(--main-blue);
  padding: 12px 30px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  transition: background 0.3s ease;
}

.custom-navbar .nav-link {
  color: var(--text-color) !important;
  font-weight: 500;
  margin: 0 15px;
  transition: color 0.2s ease;
}

.custom-navbar .nav-link:hover {
  color: var(--light-blue-two) !important;
}

.custom-navbar .navbar-brand {
  display: none;
}

/* ===== MOBILE & TABLET ===== */
@media (max-width: 992px) {
  .header-logo {
    display: none;
  }

  .hero-content {

    margin-top: 140px;
  }

  .custom-navbar-wrapper {
    width: 90%;
    border-radius: 30px;
  }

  .custom-navbar .navbar-brand {
    display: block;
  }

  .custom-navbar .navbar-nav {
    text-align: center;
  }

  .custom-navbar .nav-link {
    margin: 5px 0;
  }

  .custom-navbar {
    background: var(--main-blue);
    padding: 12px;
  }

  .custom-navbar.show-bg {
    background-color: var(--main-blue) !important;
  }
}

.navbar-toggler {
  border: 1px solid var(--text-color) !important;
  background-color: var(--text-color);

}

.navbar-toggler-icon {
  color: var(--text-color);
}

.navbar-toggler:focus {
  box-shadow: none;
}

.navbar-nav .nav-link.active {
  text-underline-offset: 6px;
  text-decoration: underline;
}

/* ============================ Header & Banner Ends ======================================= */


/*============================= QUOTE Starts =======================================*/
.quote {
  background-color: var(--light-blue);
  color: var(--black-color);
}

.quote p {
  font-family: var(--Almarai-font);
  font-size: 18px;


}

.quote b {
  display: block;
  margin-top: 5px;
  font-weight: 500;
  font-family: var(--Almarai-font);
  font-size: 20px;
}

/* ================================  QUOTE Ends========================================== */


/*============================= Logo Slider Starts ================================*/
.swiper {
  padding: 20px 0;
}

.swiper-slide {
  display: flex;
  align-items: center;
  justify-content: center;
}

.swiper-slide img {
  max-width: 150px;
  transition: opacity 0.3s;
}

.swiper-slide img:hover {
  opacity: 1;
}

.bg-light-pattern h3 {
  color: var(--grey-varient-three);
  font-family: var(--SpaceGrotesk-font);
  font-weight: 400;
  font-size: 18px;
}

.bg-light-pattern p {
  color: var(--grey-varient-three);
  font-size: 16px;
  font-weight: 400;
  font-family: var(--Almarai-font);
}

/* ===============================Logo Slider Ends==========================================  */



/* =================================About Us  Starts ========================================*/

.about-section {
  background:
    url('../images/about-bg.webp');
  background-size: cover;
  background-position: center;
  border-radius: 20px;
  box-shadow: 0 10px 40px var(--shadow-color-one);
  overflow: hidden;
  position: relative;
}

.about-section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: url('data:image/svg+xml,<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg"><circle cx="50" cy="50" r="40" fill="none" stroke="%23e8ecf1" stroke-width="1"/><circle cx="50" cy="50" r="30" fill="none" stroke="%23e8ecf1" stroke-width="1"/></svg>');
  opacity: 0.2;
  pointer-events: none;
}

.map-container {
  position: relative;
  padding: 80px 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #f8f9fb 0%, #eef2f7 100%);
}

.map-svg {
  width: 100%;
  max-width: 450px;
  height: auto;
  filter: drop-shadow(0 15px 35px rgba(79, 143, 187, 0.15));
}

.content-container {
  padding: 100px 30px;
  position: relative;
  max-width: 900px;
  margin: 0 auto;
}

.section-label {
  color: var(--main-blue);
  font-size: 18px;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  margin-bottom: 20px;
  display: block;
  font-family: var(--Almarai-font);
}

.main-heading {
  color: var(--main-blue);
  font-size: 42px;
  font-weight: 600;
  line-height: 1.3;
  margin-bottom: 35px;
  font-family: var(--SpaceGrotesk-font);
}

.description-text {
  color: var(--grey-varient-two);
  font-size: 16px;
  line-height: 1.8;
  margin-bottom: 25px;
  font-weight: 400;
  font-family: var(--Almarai-font);
}

.highlight-text {
  color: var(--grey-varient-two);
  font-size: 14px;
  line-height: 1.8;
  font-weight: bold;
  margin-bottom: 40px;
  font-family: var(--Almarai-font);

}

.btn-custom {
  background-color: var(--main-blue);
  font-family: var(--Almarai-font);
  color: var(--text-color);
  padding: 14px 36px;
  border-radius: 30px;
  font-size: 15px;
  font-weight: 600;
  border: none;
  transition: all 0.3s ease;
  box-shadow: 0 8px 20px rgba(10, 61, 98, 0.25);
}

.btn-custom:hover {
  background-color: var(--secondary-color);
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(10, 61, 98, 0.35);
  color: var(--text-color);
}

.decorative-pattern {
  position: absolute;
  bottom: -28px;
  right: 0px;
  width: 200px;
  height: 200px;
}

@media (max-width: 991px) {
  .content-container {
    padding: 80px 50px;
  }

  .main-heading {
    font-size: 34px;
  }
}

@media (max-width: 767px) {
  .main-heading {
    font-size: 26px;
  }

  .decorative-pattern {
    display: none;
  }

  .content-container {
    padding: 60px 30px;
  }
}

/* ==========================================About Us Ends==============================================  */


/* ======================================Explore Section Starts ==========================================*/
.card-active {
  background-color: var(--main-blue);
}

.pattern-top-right {
  position: absolute;
  top: -28px;
  right: 0;
  width: 200px;
  height: 200px;
  /* opacity: 0.08; */
  pointer-events: none;
  z-index: 3;
}


.pattern-bottom-left {
  position: absolute;
  bottom: -10px;
  left: 0;
  width: 268px;
  height: 200px;
  /* opacity: 0.08; */
  pointer-events: none;
}

/* .card-active {
  background-color: #084C88;
} */

.explore h2 {
  color: var(--main-blue);
  font-weight: 700;
  font-size: 40px;
  font-family: var(--SpaceGrotesk-font);
}

.explore p {
  font-family: var(--Almarai-font);
  font-size: 16px;
  color: var(--dark-grey-varient);
  font-weight: 400;

}

.explore h4 {
  font-family: var(--SpaceGrotesk-font);

}

@media (max-width: 767px) {

  .pattern-top-right,
  .pattern-bottom-left {
    display: none;
  }

  .explore h2 {
    font-size: 34px;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .pattern-bottom-left {
    bottom: -50px;
    width: 150px;
  }
}

/* ==========================================Explore Section Ends========================================== */


/* ======================================Why Choose sections Starts ========================================*/
.banner-wrapper {
  position: relative;
  min-height: 700px;
  background: url('../images/why-bg.webp') center/cover no-repeat;
  display: flex;
  align-items: flex-end;
  justify-content: flex-start;
  overflow: hidden;
}

.background-layer {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><rect fill="rgba(255,255,255,0.03)" width="100" height="100"/></svg>');
  opacity: 0.5;
}

.decorative-pattern {
  position: absolute;
}

.pattern-left {
  top: -28px;
  left: 0px;
  width: 268px;
  height: 180px;
}

.main-heading-wrapper {
  position: relative;
  z-index: 2;
  color: var(--text-color);
  padding: 60px 0 40px 0;
  width: 100%;
}

.primary-heading {
  font-size: 52px;
  font-weight: 700;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
  margin: 0;
  text-align: left;
  font-family: var(--SpaceGrotesk-font);
}

.content-wrapper {
  background-color: var(--white-varient-three);
  padding: 80px 0;
  position: relative;
}

.small-heading {
  color: var(--grey-varient);
  font-size: 18px;
  font-weight: 400;
  margin-bottom: 15px;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.feature-heading {
  color: var(--main-blue);
  font-size: 42px;
  font-weight: 600;
  line-height: 1.5;
  margin-bottom: 40px;
  position: relative;
  font-family: var(--SpaceGrotesk-font);
}

.heading-container {
  position: relative;
}

.pattern-right {
  position: absolute;
  top: 50%;
  right: -80px;
  transform: translateY(-50%);
  width: 200px;
  height: 200px;
  opacity: 0.1;
  fill: #2563eb;
  z-index: 1;
}

.pattern-far-right {
  position: absolute;
  top: -35px;
  right: 0;
  width: 268px;
  height: 200px;
  /* opacity: 0.08; */
  /* fill: #2563eb; */
  z-index: 0;
}

.metrics-wrapper {
  margin-top: 45px;
}

.metric-item {
  text-align: center;
  padding: 20px;
}

.metric-value {
  font-size: 52px;
  font-weight: bold;
  color: var(--main-blue);
  margin-bottom: 10px;
  line-height: 1;
  font-family: var(--SpaceGrotesk-font);
}

.metric-description {
  color: var(--grey-varient);
  font-size: 14px;
  font-weight: 300;
  font-family: var(--Almarai-font);
}

@media (max-width: 1199px) {
  .pattern-right {
    width: 150px;
    height: 150px;
    right: -40px;
  }

  .pattern-far-right {
    bottom: 0;
    right: 0;
    width: 140px;
    height: 140px;
  }
}

@media (max-width: 991px) {
  .pattern-right {
    display: none;
  }

  .pattern-far-right {
    bottom: 0;
    right: 0;
    width: 120px;
    height: 120px;
  }

  .feature-heading {
    font-size: 2rem;
  }

  .content-wrapper {
    padding: 60px 0;
  }
}

@media (max-width: 768px) {
  .primary-heading {
    font-size: 2.5rem;
  }

  .feature-heading {
    font-size: 1.75rem;
    text-align: center;
  }

  .small-heading {
    text-align: center;
  }

  .metric-value {
    font-size: 2.2rem;
  }

  .metrics-wrapper {
    margin-top: 0px;
  }

  .pattern-left {
    width: 150px;
    height: 120px;
  }

  .pattern-banner-bottom {
    width: 150px;
    height: 150px;
  }

  .pattern-far-right {
    bottom: 0;
    right: 0;
    width: 100px;
    height: 100px;
  }

  .banner-wrapper {
    min-height: 350px;
  }
}

@media (max-width: 576px) {
  .primary-heading {
    font-size: 1.8rem;
    text-align: left;
  }

  .feature-heading {
    font-size: 1.5rem;
  }

  .metric-value {
    font-size: 2.2rem;
  }

  .content-wrapper {
    padding: 40px 0;
  }

  .pattern-banner-bottom {
    width: 100px;
    height: 100px;
  }

  .metrics-wrapper {
    margin-top: -35px;
  }

  .pattern-far-right {
    bottom: 0;
    right: 0;
    width: 80px;
    height: 80px;
  }
}

/* ===================================Why Choose sections Ends=============================================== */


/* =============================================Integrity Section Starts==================================================== */
.bg-values {
  background-color: #E7EEF4;
}

.text-navy {
  color: var(--main-blue);
  font-weight: 600;
  font-size: 38px;
  font-family: var(--SpaceGrotesk-font);
}

.checkmark-icon {
  width: 24px;
  height: 24px;
}

.integrity-section h3 {
  color: var(--grey-varient);
  font-size: 14px;
  font-family: var(--Almarai-font);
  font-weight: 500;
}

.integrity-section p {
  font-size: 12px;
  font-weight: 400;
  font-family: var(--Almarai-font);
}

.pattern-bottom-left-integrity {
  position: absolute;
  bottom: -78px;
  left: 0;
  width: 268px;
  height: 200px;
  /* opacity: 0.08; */
  pointer-events: none;
}

@media (min-width: 768px) and (max-width: 1023px) {
  .text-navy {
    font-size: 32px;
  }

  .pattern-bottom-left-integrity {
    width: 214px;
    bottom: -108px;
  }
}

@media (max-width: 767px) {
  .text-navy {
    font-size: 26px;
  }

  .pattern-bottom-left-integrity {
    display: none;
  }
}

/* ====================================Integrity Section Ends========================================= */


/* ==================================Industrial Slider Starts=========================================*/

.short-text {
  color: var(--grey-varient) !important;
  font-size: 16px !important;
  font-weight: 400 !important;
  font-family: var(--Almarai-font) !important;
}

.bg-light-pattern h2 {
  color: var(--main-blue);
  font-weight: 600;
  font-size: 59px;
  font-family: var(--SpaceGrotesk-font);
}

.swiper-slide {
  height: auto;
}

.industry-card {
  background: var(--main-blue);
  border-radius: 8px;
  padding: 30px 20px;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.icon-box {
  background: var(--text-color);
  width: 60px;
  height: 60px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
}

.icon-box svg {
  width: 26px;
  height: 26px;
}

.swiper-button-next,
.swiper-button-prev {
  display: none !important;
  z-index: 30;
}

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

@media (max-width: 991px) {
  .swiper-button-next,
  .swiper-button-prev {
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: 1px solid var(--main-blue);
    border-radius: 50%;
    color: var(--main-blue);
    font-size: 18px;
    font-weight: 600;
    background: var(--text-color);
    cursor: pointer;
    margin-top: 130px;
  }

  .swiper-pagination-bullet-active {
    background-color: var(--main-blue) !important;
  }
  .swiper-button-next::after,
  .swiper-button-prev::after {
    display: none;
  }

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

.decorative-pattern-industary {
  position: absolute;
  bottom: -28px;
  right: 0px;
  width: 320px;
  height: 200px;
}

@media (min-width: 768px) and (max-width: 1023px) {
  .bg-light-pattern h2 {
    font-size: 38px;
  }

  .decorative-pattern-industary {
    width: 214px;
    bottom: -60px;
  }

  .swiper-button-next,
  .swiper-button-prev {
    margin-top: 170px;
  }

  .industriesSwiper {
    padding-bottom: 50px;
  }

  .swiper-pagination {
    top: 330px !important;
  }
}

@media (max-width: 767px) {
  .bg-light-pattern h2 {
    font-size: 35px;
  }

  .decorative-pattern-industary {
    display: none;
  }

  .industriesSwiper {
    padding-bottom: 50px
  }

  .swiper-pagination {
    top: 260px !important;
  }
}

.swiper-button-prev svg,
.swiper-button-next svg {
  width: 24px;
  height: 24px;
  stroke: var(--main-blue);
}

.swiper-button-prev,
.swiper-button-next {
  background: transparent;
  top: auto;
}

@media (max-width: 991px) {

  .swiper-button-prev,
  .swiper-button-next {
    display: flex !important;
    align-items: center;
    justify-content: center;
    margin-top: 10px;
  }
}


/* =========================================Indutrial Slider Starts========================================== */

/* =========================================Contact Section Starts=========================================== */

.map-section h2 {
  color: var(--main-blue);
  font-family: var(--SpaceGrotesk-font);
  font-size: 44px;
}

.map-section p {
  color: var(--main-blue);

  font-size: 20px;
}

.bg-light-gray {
  background-color: var(--white-varient-three);
}

.map-section {
  position: relative;
  min-height: 450px;
  background:
    url('../images/map-bg.webp') center/75% auto no-repeat;
  overflow: hidden;
}

.map-section span {
  font-size: 18px;
  font-family: var(--Almarai-font);
  font-weight: 400;
  color: var(--grey-varient);
  ;
}

.map-image {
  display: none;
}

.cta-content {
  position: relative;
  z-index: 2;
}

.vertical-line {
  width: 1px;
  height: 50px;
  background: linear-gradient(to bottom, transparent, #4a90c9, transparent);
}

.icon-circle {
  width: 60px;
  height: 60px;
  background-color: var(--main-blue);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.icon-circle svg {
  width: 30px;
  height: 30px;
}

.info-card {
  transition: transform 0.3s ease;
}

.info-card:hover {
  transform: translateY(-5px);
}

.arrow-link {
  text-decoration: none;
  color: var(--main-blue);
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.arrow-link:hover {
  color: var(--main-blue);
}

.info-card-section h4 {
  font-size: 16px;
  color: var(--main-blue);
  font-family: var(--SpaceGrotesk-font);
}

.info-card-section p {
  font-size: 14px;
  font-weight: 400;
  font-family: var(--Almarai-font);
}

@media (max-width: 768px) {
  .map-image {
    width: 80%;
    opacity: 0.2;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .map-section h2 {
    font-size: 30px;
  }

  .map-section p {
    font-size: 16px;
  }

  .vertical-line {
    height: 20px;
  }

  .btn-custom {
    padding: 10px 20px;
  }
}

@media (max-width: 767px) {
  .map-section h2 {
    font-size: 28px;
  }

  .map-section p {
    font-size: 24px;
  }
}

/* =============================================Contact Section Ends====================================================== */


/* ================================================Footer Starts========================================================= */
.footer-top {
  background: var(--main-blue);
  color: var(--text-color);
  padding: 30px 0 20px 0;
}

.footer-bottom {
  background: var(--main-blue);
  color: var(--text-color);
  padding: 15px 0;
}

.footer-bottom small {
  font-family: var(--Almarai-font);
  font-size: 16px;
  font-weight: 400;
}

.footer-logo {
  max-width: 150px;
  height: auto;
}

.nav-link {
  color: var(--text-color) !important;
  padding: 0.5rem 1.5rem !important;
  font-size: 15px;
  font-family: var(--Almarai-font);
  font-weight: 400;
}

.nav-link:hover {
  opacity: 0.8;
}

.social-icon {
  color: var(--text-color);
  font-size: 18px;
  margin-left: 15px;
  text-decoration: none;
}

.social-icon:hover {
  opacity: 0.8;
}

.contact-info {
  font-size: 16px;
  font-weight: 400;
  font-family: var(--Almarai-font);
}

.footer-bottom a {
  color: var(--text-color);
  text-decoration: none;
  font-size: 16px;
  font-weight: 400;
  font-family: var(--Almarai-font);
}

.footer-bottom a:hover {
  text-decoration: underline;
}

@media (max-width: 768px) {
  .nav-link {
    padding: 0.5rem 1rem !important;
    font-size: 14px;
  }

  .social-icon {
    margin-left: 10px;
    font-size: 16px;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .contact-info p {
    font-size: 14px;
  }

}

/* ============================================Footer Ends======================================= */


/* ==============================================================================
================================= Home Page Ends ================================
================================================================================ */


/* ===============================================================================
========================== Contact Us Page Starts=================================
================================================================================== */

/* ========================================Breadcrumb Starts========================================= */

.breadcrumb-section {
  position: relative;
  background: url('../images/contact-us-bg.webp') center/cover no-repeat;
  height: 450px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: var(--text-color);
}


.breadcrumb-content {
  position: relative;
  z-index: 2;
}

.breadcrumb {
  justify-content: center;
  background: transparent;
}

.breadcrumb-item+.breadcrumb-item::before {
  color: var(--text-color);
}

.breadcrumb-item a {
  color: var(--white-varient-three);
  text-decoration: none;
}

.breadcrumb-item.active {
  color: var(--white-varient-four);
}

.breadcrumb-section h2 {
  font-size: 65px;
  font-weight: bold;
  line-height: 1.3;
  background: linear-gradient(90deg, var(--text-color) 0%, var(--text-color-two) 75%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
  margin-bottom: 20px;
  font-family: var(--SpaceGrotesk-font)
}

@media (max-width: 767px) {
  .breadcrumb-section h2 {
    font-size: 32px;
  }
}

/* =======================================Breadcrumb Ends============================================= */

/* ==================================Contact Form Section Starts====================================== */

.contact-form h2 {
  font-size: 48px;
  color: var(--grey-varient-four);
  font-weight: 400;
  font-family: var(--SpaceGrotesk-font);

}

.contact-form span {
  color: var(--main-blue);
}

.contact-form h4 {
  color: var(--grey-varient-four);
  font-weight: 600;
  font-size: 24px;
  font-family: var(--SpaceGrotesk-font);
}

.contact-form p {
  font-size: 14px;
  color: var(--grey-varient-four);
}

.contact-form h5 {
  color: var(--white-varient-six);
  font-weight: 600;
  font-size: 24px;
  font-family: var(--SpaceGrotesk-font);

}

.contact-form h6 {
  color: var(--grey-varient-six);
  font-weight: bold;
  font-size: 46px;
  font-family: var(--SpaceGrotesk-font);
}

.form-up {
  margin-top: -400px;
  z-index: 4;
}

/* Mobile (phones) */
@media (max-width: 767px) {
  .contact-form h2 {
    font-size: 35px;
  }

  .contact-form h6 {

    font-size: 30px;
  }

  .form-up {
    margin-top: 10px;
    z-index: 4;
  }
}


/* Tablet */
@media (min-width: 768px) and (max-width: 1023px) {
  .contact-form h2 {
    font-size: 35px;
  }

  .contact-form h6 {

    font-size: 30px;
  }

  .form-up {
    margin-top: 20px;

  }
}

.form-control:focus {
  box-shadow: none;
  border-color: var(--main-blue);
}

.btn-submit-custom {
  background-color: var(--main-blue);
  color: var(--text-color);
  border-radius: 8px;
  padding: 10px 30px;
}

.btn-submit-custom:hover {
  background-color: var(--secondary-color);
  color: var(--text-color);
}

.text-light-gray {
  color: var(--grey-varient-three);
}

.oursocial:hover {

  transform: scale(1) !important;

}


/* Contact Field form Starts */

input[type=number]::-webkit-inner-spin-button,
    input[type=number]::-webkit-outer-spin-button {
        -webkit-appearance: none;
        margin: 0;
    }
/* Contact Field form Ends */

/* ===================================Contact Form Section Ends======================================= */


/* ===================================================================================
=================================== Contact Us Page Ends==============================
====================================================================================== */




/* ===================================================================================
================================== About Us Starts ===================================
====================================================================================== */

/* ==============================Business Setup Section Starts =====================================*/


.Business-Setup .heading {
  color: var(--main-blue);
  font-size: 50px;
  font-family: var(--SpaceGrotesk-font);

}

.Business-Setup h2 {
  color: var(--main-blue);
  font-size: 50px;
  font-family: var(--SpaceGrotesk-font);
  font-weight: 700;
}

.Business-Setup p {
  color: var(--dark-grey-varient);
  ;
  font-size: 16px;
  font-weight: 400;
  font-family: var(--Almarai-font);
}

.val {
  font-size: 36px !important;
  font-weight: bold !important;
  font-family: var(--SpaceGrotesk-font);
}

.metric-icon svg {
  width: 26px;
  height: 26px;
}

.metric-value {
  font-size: 24x;
  font-weight: 700;
}

.metric-desc {
  font-size: 14px;
  margin-top: 28px;
  opacity: 0.85;
}

/* Mobile (phones) */


@media (max-width: 767px) {
  .Business-Setup .heading {
    font-size: 30px;
  }

  .Business-Setup h2 {
    font-size: 30px;
  }

  .val {
    font-size: 24px !important;
  }

  .metric-desc {
    font-size: 12px !important;
    margin-top: 20px;
  }

  .glass-pill {
    padding: 8px 10px !important;
  }
}

/* Tablet */
@media (min-width: 768px) and (max-width: 1023px) {
  .Business-Setup .heading {
    font-size: 46px;
  }

  .Business-Setup h2 {
    font-size: 30px;
  }

  .Business-Setup p {
    font-size: 14px;
  }

  .Business-Setup span>img {
    width: 100px;
  }

  .val {
    font-size: 14px !important;
  }

  .glass-pill {
    padding: 5px !important;
  }

  .metric-desc {
    font-size: 10px !important;
    margin-top: 12px;
  }

  .metric-icon svg {
    width: 20px;
    height: 20px;
  }
}

@media screen and (width: 1024px) {
  .Business-Setup .heading {
    font-size: 46px;
  }

  .glass-overlay {
    margin-top: 34px;
  }

  .val {
    font-size: 24px !important;
  }

  .Business-Setup p {
    font-size: 14px;
  }
}


.glass-overlay {
  background: var(--background-varient-one);
  padding: 3.5rem;
}

.glass-pill {
  background: var(--background-varient-two);
  color: var(--text-color);
  backdrop-filter: blur(10px);
  border: 1px solid var(--border-varient-color);

  padding: 10px 20px;
  font-weight: 500;
  text-align: center;
  transition: all 0.3s ease-in-out;
}

.glass-pill:hover {
  background: var(--border-varient-color-two);
  transform: scale(1.05);
}

.Business-Setup .metric-value {
  font-size: 24px;
}

@media (max-width: 767.98px) {
  .glass-overlay {
    padding: 1rem;
    text-align: center;
  }

  .glass-pill {
    font-size: 0.9rem;
    margin-bottom: 0.5rem;
  }
}

.about-pattern-top-right {
  position: absolute;
  top: 10px;
  right: 0;
  pointer-events: none;
  z-index: -1;
}


@media (max-width: 767px) {

  .about-pattern-top-right {
    display: none;
  }

}

/* Tablet */
@media (min-width: 768px) and (max-width: 1023px) {
  .about-pattern-top-right {
    width: 200px;
    height: 200px;
    top: 75px
  }
}

/* ======================================= About Us Ends ============================================== */

/* ======================================= Testimonial Starts ======================================== */

.Testimonial-section {
  padding: 40px 10px;
}


.Testimonial-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 35px;
  flex-wrap: wrap;
  gap: 10px;
}

.Testimonial-header h3 {
  color: var(--main-blue);
  font-weight: 600;
  margin: 0;
  font-size: 48px;
  font-weight: 700;
  font-family: var(--SpaceGrotesk-font);
}


.Testimonial-nav {
  display: flex;
  gap: 10px;
}

.Testimonial-nav button {
  background: var(--text-color);
  border: none;
  color: var(--blue-varient);
  border-radius: 50%;
  width: 40px;
  height: 40px;
  font-size: 18px;
  box-shadow: 0 2px 8px var(--shadow-color-two);
  cursor: pointer;
  transition: 0.3s;
}

.Testimonial-nav button:hover {
  background: var(--blue-varient);
  color: var(--text-color);
}

.Testimonial-card {
  background-color: var(--blue-varient);
  color: var(--text-color);
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 4px 12px var(--shadow-color-two);
  cursor: grab;
  transition: transform 0.3s ease;
}

.Testimonial-card:active {
  cursor: grabbing;
}

.leader-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.leader-info {
  padding: 40px;
  font-family: var(--Almarai-font);
}

.leader-info h4 {
  font-weight: 600;
  font-size: 42px;
  margin-bottom: 5px;
  font-family: var(--SpaceGrotesk-font);

}

.leader-info h6 {
  font-size: 18px;
  font-weight: 400;
  font-family: var(--SpaceGrotesk-font);

}

.leader-info p {
  font-size: 14px;
  line-height: 1.6;
  font-weight: 400;
  font-family: var(--Almarai-font);

}


.leader-slide {
  display: none;
}

.leader-slide.active {
  display: block;
}


@media (max-width: 992px) {
  .leader-info {
    padding: 30px;
  }

  .leader-info h4 {
    font-size: 1.25rem;
  }
}

@media (max-width: 768px) {
  .Testimonial-header {
    align-items: center;
    text-align: center;
  }

  .Testimonial-nav {
    justify-content: center;
  }

  .leader-info {
    padding: 25px 20px;
  }

  .leader-info h4 {
    font-size: 1.2rem;
  }

  .leader-info p {
    font-size: 0.8rem;
  }

  .Testimonial-card {
    text-align: center;
  }
}

@media (max-width: 576px) {
  .leader-info {
    padding: 20px;
  }

  .leader-info h4 {
    font-size: 1.1rem;
  }
}

@media (max-width: 767px) {
  .Testimonial-header h3 {
    font-size: 30px;
  }

  .leader-info p {
    font-size: 14px;
  }

  .Testimonial-section {
    padding: 0px 10px;
  }
}

/* Tablet */
@media (min-width: 768px) and (max-width: 1023px) {
  .Testimonial-header h3 {
    font-size: 46px;
  }

  .Testimonial-section {
    padding: 0px 10px;
  }
}

/* =====================================Testimonial Ends====================================== */

/* =================================== Audio Section Starts ===================================== */

.Audio-section h2 {
  color: var(--main-blue);
  font-size: 48px;
  font-weight: 700;
  font-family: var(--SpaceGrotesk-font);
}

.Audio-section p {
  color: var(--dark-grey-varient);
  ;
  font-family: var(--Almarai-font);
  font-size: 16px;
}

@media (max-width: 767px) {
  .Audio-section h2 {
    font-size: 32px;
  }

  .Audio-section p {

    font-size: 14px;
  }

}

/* Tablet */
@media (min-width: 768px) and (max-width: 1023px) {
  .Audio-section p {

    font-size: 16px;
  }
}


/* ========================= Audio Section Ends =========================== */

/* ==========================Our Core Valuees Starts================ */

.Core-Values h2 {
  color: var(--main-blue);
  font-size: 48px;
  font-family: var(--SpaceGrotesk-font);
  font-weight: bold;
}

.Core-Values h4 {
  font-family: var(--SpaceGrotesk-font);
  font-size: 18px;
  font-weight: bold;
}

.Core-Values p {
  font-size: 14px;
  font-weight: 400;
  font-family: var(--Almarai-font);
}

/* ==============================Our Core Valuees Ends========================= */

/* =====================================================================================
===============================About Us Page Ends=======================================
======================================================================================== */




/* /====================================================================================
============================== Collaboration Page Starts================================
======================================================================================== */


/*============================= collaboration Section Starts=========================== */
.collaboration h2 {
  color: var(--main-blue);
  font-weight: 700;
  font-family: var(--SpaceGrotesk-font);
  font-size: 48px;
}

.text-muted {
  font-family: var(--Almarai-font);
}

.dashed-border {
  border-top: 1px dashed var(--grey-varient-five);
  border-bottom: 1px dashed var(--grey-varient-five);
  padding: 2rem 0;
  margin: 2rem 0;
}

.dashed-border-bottom {
  border-bottom: 1px dashed var(--grey-varient-five);
  padding: 2rem 0;
}

.logo-img {
  max-width: 450px;
  height: auto;
}

.border-right-dashed {
  border-right: 1px dashed var(--grey-varient-five);
}

.collaboration-inner-section {
  background: var(--white-varient);
}

.collaboration h3 {
  color: var(--main-blue);
  font-family: var(--SpaceGrotesk-font);
  font-size: 48px;
  font-weight: 700;
}

.collaboration p {
  font-size: 14px;
  font-weight: 400;
  font-family: var(--Almarai-font);
  color: var(--dark-grey-varient);
  ;
}

.collaboration-pattern {
  position: absolute;
  top: 50%;
  right: 0;
  width: 410px;
  height: 250px;
  pointer-events: none;
  z-index: 3;
}

/* mobile */
@media (max-width: 767px) {
  .collaboration h2 {
    font-size: 32px;
  }

  .collaboration h3 {
    font-size: 32px;
  }

  .collaboration-pattern {
    display: none;
  }

  .logo-img {
    width: 220px;
  }
}

/* Tablet */
@media (min-width: 768px) and (max-width: 1023px) {
  .collaboration h2 {

    font-size: 38px;
  }

  .collaboration h3 {
    font-size: 30px;
  }

  .collaboration-pattern {
    width: 186px;
    height: 238px;
  }

  .logo-img {
    width: 300px;
  }
}

/*============================= collaboration Section Ends=========================== */


/* /==================================================================================
=============================== Collaboration Page Ends================================
======================================================================================== */


/* ====================================================================================
============================== Services Page Starts ===================================
======================================================================================= */


/* =========================== Experiance & Trust Section Starts =====================  */

.Experiance-Trust h2 {
  color: var(--main-blue);
  font-family: var(--SpaceGrotesk-font);
  font-size: 38px;
  font-weight: bold;
}

.Experiance-Trust p {
  font-size: 18px;
  font-family: var(--Almarai-font);
  color: var(--dark-grey-varient);
  ;
}

.counter-right {
  position: absolute;
  top: 0px;
  right: 0;
  width: 220px;
  pointer-events: none;
  z-index: 3;
}

.counter-left {
  position: absolute;
  top: 0px;
  left: -23px;
  width: 268px;
  height: 220px;
  pointer-events: none;
}

@media (max-width: 767px) {
  .Experiance-Trust h2 {
    font-size: 22px;
  }

  .Experiance-Trust p {
    font-size: 12px;
  }

  .counter-right,
  .counter-left {
    display: none;
  }
}

/* Tablet */
@media (min-width: 768px) and (max-width: 1023px) {
  .Experiance-Trust h2 {
    font-size: 28px;
  }

  .Experiance-Trust p {
    font-size: 14px;
  }

  .counter-right {
    top: 102px;
    right: 0;
    width: 100px;
  }

  .counter-left {

    top: 0px;
    left: 0px;
    width: 98px;
    height: 124px;
  }
}

@media screen and (width: 1024px) {
  .counter-right {

    top: 99px;
    right: 0;
    width: 120px;

  }

  .counter-left {
    top: 0px;
    left: 0px;
    width: 130px;
    height: 124px;
  }
}

/* =========================== Experiance & Trust Section Ends ======================= */

/* ============================ Service Section Starts =============================== */

.serve-section h2 {
  color: var(--main-blue);
  font-weight: bold;
  font-size: 46px;
  font-family: var(--SpaceGrotesk-font);
}

.serve-section h6 {
  font-family: var(--Almarai-font);
  color: var(--grey-varient);
  ;
}

.serve-section h3 {
  font-family: var(--SpaceGrotesk-font);
  color: var(--main-blue);
  font-size: 42x;
  font-weight: 700;
}

.serve-section p {
  color: var(--dark-grey-varient);
  ;
  font-family: var(--Almarai-font);
  font-size: 15px;
  font-weight: 400;
}

.badge {
  border: 1px solid var(--main-blue);
  background-color: var(--background-varient-three);
  color: var(--grey-varient-four);
  font-weight: 300;
  font-family: var(--Almarai-font);
}


@media (max-width: 767px) {
  .serve-section h2 {
    font-size: 32px;
  }

}


/* Tablet */
@media (min-width: 768px) and (max-width: 1023px) {
  .serve-section h2 {

    font-size: 42px;

  }

  .serve-section p {
    font-size: 12px;
  }

}

/* ============================ Service Section Ends ================================= */




/* ====================================================================================
================================ Services Page Ends ===================================
======================================================================================= */



/* Lazy Loading */

img[loading="lazy"] {
  filter: blur(8px);
  transition: filter 0.5s ease;
}

img[loading="lazy"]:not([src*="data:"]) {
  filter: blur(0);
}