/* =====================================================
   ROOT
===================================================== */

:root {
  --navy: #123f73;
  --navy-dark: #0b315b;

  --teal: #008c94;
  --teal-dark: #078d9b;

  --light-blue: #eaf7fa;
  --very-light: #f4fbfc;

  --text: #17324d;
  --muted: #60758a;

  --white: #ffffff;

  --container: 1180px;

  --radius: 18px;
}

/* =====================================================
   RESET
===================================================== */

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

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

/* a {
    text-decoration: none;
    color: inherit;
} */

button {
  font-family: inherit;
}

/* =====================================================
   COMMON
===================================================== */

.section-label {
  display: inline-block;

  color: var(--teal);

  font-size: 11px;

  font-weight: 800;

  letter-spacing: 1.8px;

  margin-bottom: 14px;
}

/* .section-heading {
    font-size: 43px;
    line-height: 1.15;
    color: var(--navy);
    margin-bottom: 10px;
} */

/* =========================================================
   ABOUT HERO
========================================================= */

.about-hero {
  position: relative;
  width: 100%;
  min-height: 695px;
  overflow: hidden;
  /* background:
    radial-gradient(
      circle at 18% 35%,
      rgba(8, 166, 181, 0.12),
      transparent 35%
    ),
    linear-gradient(110deg, #e3f4f8 0%, #f5fbfc 55%, #dff1f5 100%); */
    background: #008c94;
}

/* =========================================================
   HERO INNER
========================================================= */

.about-hero-inner {
  min-height: 650px;

  display: grid;

  grid-template-columns: 48% 52%;

  align-items: center;

  position: relative;

  z-index: 2;

  /*
       IMPORTANT:
       Keeps content below the navbar
    */
  padding-top: 70px;
}

/* =========================================================
   LEFT CONTENT
========================================================= */

.about-hero-content {
  position: relative;
  z-index: 10;
  padding-bottom: 70px;
  padding-left: 180px;
}

.about-label {
  display: block;

  margin-bottom: 18px;

  font-size: 12px;

  font-weight: 700;

  letter-spacing: 2px;

  /* color: #0097a8; */
  color: white;
}

.about-hero-content h1 {
  margin: 30px 0;
  font-size: clamp(48px, 5vw, 72px);
  line-height: 1.02;
  font-weight: 800;
  /* color: #58595b; */
  color: #ffff;
}

.about-hero-content h1 span {
    color: #ffff;
}

.about-heading-line {
  width: 38px;

  height: 3px;

  margin-top: 25px;
  margin-bottom: 25px;

  /* background: #08a6b5; */

  background: #ffff;

  border-radius: 10px;
}

.about-hero-content p {
  max-width: 450px;

  margin: 0;

  font-size: 16px;

  line-height: 1.7;

  /* color: #315979; */
  color: #ffff;
}

/* =========================================================
   RIGHT VISUAL
========================================================= */

.about-hero-visual {
  position: relative;

  height: 500px;

  display: flex;

  align-items: center;

  justify-content: flex-end;
}

/* =========================================================
   CIRCLE
========================================================= */

.about-circle {
  position: absolute;

  z-index: 1;

  width: 380px;

  height: 380px;

  right: 100px;

  top: 55px;

  border: 1px solid rgba(8, 166, 181, 0.55);

  border-radius: 50%;
}

/* =========================================================
   IMAGE WRAPPER
========================================================= */

.about-image {
  position: relative;
  z-index: 3;
  width: 926px;
  height: 725px;
  margin-right: -90px;
  overflow: hidden;
  border-radius: 50% 0 0 45%;
}

/* =========================================================
   IMAGE
========================================================= */

.about-image img {
  display: block;

  width: 100%;

  height: 100%;

  object-fit: cover;

  object-position: center;
}


/* =========================================================
   WAVE
========================================================= */

.about-hero-wave {
  position: absolute;

  left: 0;

  bottom: -1px;

  width: 100%;

  height: 115px;

  z-index: 20;

  pointer-events: none;
}

.about-hero-wave svg {
  display: block;

  width: 100%;

  height: 100%;
}

.wave-teal {
  fill: #08a6b5;
}

.wave-white {
  fill: #ffffff;
}
/* =====================================================
   WHO WE ARE
===================================================== */

/* .who-section {
  padding: 110px 0 100px;

  background: #fff;
} */

.who-grid {
  display: grid;

  grid-template-columns: 0.9fr 1.1fr;

  gap: 90px;

  align-items: center;
}

.who-image {
  position: relative;

  padding: 20px;
}

.who-image img {
  object-fit: cover;
  border-radius: 25px;
  position: relative;
  border-radius: 28px;
  transform: rotate(-5deg);
}

.image-outline {
  position: absolute;

  width: 90%;

  height: 90%;

  border: 2px solid var(--teal);

  border-radius: 28px;

  right: -3px;

  top: -3px;

  transform: rotate(-5deg);

  opacity: 0.65;
}

.dot-pattern {
  position: absolute;

  width: 100px;

  height: 100px;

  left: -30px;

  bottom: 0;

  background-image: radial-gradient(var(--teal) 1.5px, transparent 1.5px);

  background-size: 10px 10px;

  opacity: 0.25;
}

/* =====================================================
   PURPOSE
===================================================== */

.purpose-section {
    padding: 100px 0 80px;
    /* background: radial-gradient(
      circle at 10% 20%,
      rgba(8, 166, 181, 0.07),
      transparent 25%
    ),
    #f7fcfd; */
}

.purpose-grid {
  display: grid;

  grid-template-columns: repeat(3, 1fr);

  margin-top: 70px;
}

.purpose-item {
  text-align: center;

  padding: 20px 55px;

  position: relative;
}

.purpose-item:not(:last-child)::after {
  content: "";

  position: absolute;

  right: 0;

  top: 10%;

  height: 80%;

  width: 1px;

  background: #c9dde3;
}

.purpose-icon {
  width: 58px;

  height: 58px;

  display: flex;

  align-items: center;

  justify-content: center;

  margin: auto;

  border-radius: 50%;

  background: var(--teal);

  color: white;

  font-size: 21px;

  box-shadow: 0 10px 30px rgba(8, 166, 181, 0.2);
}

.purpose-icon.dark {
  background: var(--navy);
}

.purpose-item h3 {
  font-size: 18px;

  margin: 20px 0 12px;

  color: var(--navy);
}

.purpose-item p {
  font-size: 13px;

  line-height: 1.8;

  color: var(--muted);
}

/* =====================================================
   IMPACT
===================================================== */

.impact-section {
  position: relative;

  padding: 70px 0;

  overflow: hidden;

  background: linear-gradient(110deg, #123f73, #0c5480);
}

.impact-pattern {
  position: absolute;

  inset: 0;

  opacity: 0.08;

  background-image: radial-gradient(white 1px, transparent 1px);

  background-size: 14px 14px;
}

.impact-section .section-heading {
  position: relative;
}

.impact-label {
  color: #8de4eb;

  font-size: 11px;

  letter-spacing: 2px;

  font-weight: 800;
}

.white-line {
  width: 40px;

  height: 3px;

  background: white;

  margin: 18px auto;
}

.impact-grid {
  display: grid;

  grid-template-columns: repeat(5, 1fr);

  margin-top: 50px;

  position: relative;
}

.impact-item {
  text-align: center;

  color: white;

  padding: 10px 25px;

  border-right: 1px solid rgba(255, 255, 255, 0.25);
}

.impact-item:last-child {
  border-right: 0;
}

.impact-item i {
  font-size: 27px;

  color: #9ae7ec;

  margin-bottom: 18px;
}

.impact-item strong {
  display: block;

  font-size: 31px;

  font-weight: 800;
}

.impact-item strong::after {
  content: "+";
}

.impact-item span {
  display: block;

  font-size: 12px;

  opacity: 0.85;

  margin-top: 4px;
}

/* =====================================================
   EXPERTISE
===================================================== */
/* .expertise-section {
    background: radial-gradient(      circle at 18% 35%,      rgba(8, 166, 181, 0.12),      transparent 35%    ),    linear-gradient(110deg, #e3f4f8 0%, #f5fbfc 55%, #dff1f5 100%);
} */

.expertise-grid {
  display: grid;

  grid-template-columns: 0.65fr 1.35fr;

  gap: 70px;

  align-items: center;
}

.expertise-cards {
  display: grid;

  grid-template-columns: repeat(3, 1fr);

  gap: 16px;
}

.expertise-card {
    min-height: 150px;
    border: 1px solid #e3eef1;
    background: radial-gradient(      circle at 18% 35%,      rgba(8, 166, 181, 0.12),      transparent 35%    ),    linear-gradient(110deg, #e3f4f8 0%, #f5fbfc 55%, #dff1f5 100%);
    border-radius: 16px;
    padding: 25px 20px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    box-shadow: 0 12px 35px rgba(21, 68, 95, 0.08);
    transition: 0.3s ease;
}

.expertise-card:hover {
  transform: translateY(-6px);

  border-color: var(--teal);

  box-shadow: 0 18px 40px rgba(8, 166, 181, 0.13);
}

.expertise-icon {
  width: 45px;

  height: 45px;

  border-radius: 50%;

  display: flex;

  align-items: center;

  justify-content: center;

  background: #e9f9fa;

  color: var(--teal);

  margin-bottom: 16px;
}

.expertise-card h3 {
  font-size: 13px;

  line-height: 1.5;

  color: var(--navy);
}

/* =====================================================
   PARTNER
===================================================== */

.partner-section {
  padding: 100px 0;

  background: var(--very-light);
}

.partner-grid {
  display: grid;

  grid-template-columns: 1fr 1fr;

  gap: 80px;

  align-items: center;
}

.partner-image {
  position: relative;

  padding: 10px;
}

.partner-image img {
  width: 100%;

  height: 410px;

  object-fit: cover;

  border-radius: 28px;

  position: relative;

  z-index: 2;
}

.partner-image-border {
  position: absolute;

  inset: 0;

  border: 2px solid var(--navy);

  border-radius: 30px;

  transform: rotate(5deg);

  opacity: 0.35;
}

/* =====================================================
   CTA
===================================================== */

.about-cta {
  background: linear-gradient(110deg, #e5f6f9, #f5fbfc);

  padding: 45px 0;
}

.cta-inner {
  display: flex;

  align-items: center;

  gap: 30px;
}

.cta-icon {
  width: 70px;

  height: 70px;

  flex-shrink: 0;

  border: 1px solid var(--navy);

  border-radius: 50%;

  display: flex;

  align-items: center;

  justify-content: center;

  color: var(--navy);

  font-size: 25px;
}

.cta-content {
  flex: 1;
}

.cta-content h2 {
  font-size: 23px;

  color: var(--navy);

  margin-bottom: 5px;
}

.cta-btn {
  display: inline-flex;

  align-items: center;

  gap: 15px;

  background: var(--navy);

  color: white;

  padding: 15px 24px;

  border-radius: 30px;

  font-size: 12px;

  font-weight: 700;

  transition: 0.3s ease;
}

.cta-btn:hover {
  background: var(--teal);
}

.facilities-section {
  position: relative;
  padding: 120px 0;

  background: #f7fbfc;

  overflow: hidden;
}

/* =========================
   HEADING
========================= */

.facilities-heading {
  text-align: center;
  margin-bottom: 80px;
}

.facilities-heading > span {
  display: block;

  margin-bottom: 12px;

  font-size: 12px;
  font-weight: 700;

  letter-spacing: 2px;

  color: #08a6b5;
}

.facility-block {
  position: relative;

  display: grid;

  grid-template-columns: 44% 56%;

  min-height: 510px;

  background: #ffffff;

  border-radius: 28px;

  overflow: hidden;

  box-shadow: 0 20px 60px rgba(19, 63, 115, 0.08);

  border: 1px solid rgba(8, 166, 181, 0.08);
}

/* Number */

.facility-number {
  position: absolute;
  top: 25px;
  left: 30px;
  z-index: 5;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 2px;
  color: #ffffff;
  background: #008c94;
  padding: 9px 13px;
  border-radius: 30px;
}

/* =========================
   IMAGE
========================= */

.facility-image {
  position: relative;

  min-height: 510px;

  overflow: hidden;
}

.facility-image::after {
  content: "";

  position: absolute;

  inset: 0;

  background: linear-gradient(135deg, rgba(18, 63, 115, 0.12), transparent 60%);
}

.facility-image img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    transition: transform 0.6s ease;
    object-position: left;
    /* background-size: cover; */
}

.facility-block:hover .facility-image img {
  transform: scale(1.04);
}

/* Location badge */

.image-location {
  position: absolute;

  z-index: 4;

  left: 28px;
  bottom: 25px;

  display: flex;
  align-items: center;
  gap: 8px;

  padding: 10px 16px;

  background: rgba(255, 255, 255, 0.94);

  border-radius: 30px;

  color: #123f73;

  font-size: 13px;

  font-weight: 600;

  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.12);
}

.image-location i {
  color: #08a6b5;
}

.facility-content {
  padding: 65px 55px;

  display: flex;

  flex-direction: column;

  justify-content: center;
}

.facility-location {
  font-size: 12px;

  font-weight: 700;

  letter-spacing: 2px;

  color: #08a6b5;

  margin-bottom: 12px;
}

.facility-content h3 {
  margin: 0 0 20px;

  font-size: 34px;

  line-height: 1.15;

  color: #123f73;
}

.facility-content p {
  margin: 0 0 30px;

  max-width: 620px;

  font-size: 15px;

  line-height: 1.75;

  color: #526b80;
}

.facility-capabilities {
  display: grid;

  grid-template-columns: repeat(2, minmax(0, 1fr));

  gap: 14px 25px;
}

.facility-point {
  display: flex;

  align-items: flex-start;

  gap: 10px;

  font-size: 13px;

  line-height: 1.45;

  color: #294e69;
}

.facility-point i {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 1px;
  border-radius: 50%;
  background: rgba(8, 166, 181, 0.12);
  color: #08a6b5;
  font-size: 10px;
}

.facility-connector {
  height: 100px;

  position: relative;

  display: flex;

  align-items: center;

  justify-content: center;
}

.facility-connector::before {
  content: "";

  position: absolute;

  left: 50%;

  top: 0;
  bottom: 0;

  width: 1px;

  background: linear-gradient(to bottom, transparent, #08a6b5, transparent);
}

.facility-connector span {
  position: relative;

  z-index: 2;

  width: 42px;
  height: 42px;

  border-radius: 50%;

  background: #ffffff;

  border: 1px solid rgba(8, 166, 181, 0.3);

  box-shadow: 0 5px 20px rgba(18, 63, 115, 0.08);
}

.facility-connector span::after {
  content: "↓";

  position: absolute;

  left: 50%;
  top: 50%;

  transform: translate(-50%, -50%);

  color: #08a6b5;

  font-size: 17px;
}

.facility-two {
  grid-template-columns: 56% 44%;
}

.facility-two .facility-image {
  order: 2;
}

.facility-two .facility-content {
  order: 1;
}



@media (max-width: 1600px){
.about-hero-content {
    padding-left: 150px;
}
}

@media (max-width: 1400px){
.about-hero-content {
    padding-left: 100px;
}
}
/* =====================================================
   RESPONSIVE — 1200px
===================================================== */

@media (max-width: 1200px) {
  /* .container {
    width: min(calc(100% - 50px), 1100px);
  } */

  .about-nav {
    gap: 18px;
  }

  .hero-content h1 {
    font-size: 48px;
  }


}

/* =====================================================
   RESPONSIVE — 991px
===================================================== */
@media (max-width: 991px) {
  .facility-block,
  .facility-two {
    grid-template-columns: 1fr;
  }

  .facility-two .facility-image,
  .facility-two .facility-content {
    order: initial;
  }

  .facility-image {
    min-height: 330px;
  }

  .facility-content {
    padding: 45px 30px;
  }

  .facility-capabilities {
    grid-template-columns: 1fr;
  }

  .facility-connector {
    height: 70px;
  }

  .about-hero-inner {
    grid-template-columns: 1fr;
}
.about-hero-visual {
        order: 1;
    }

    .about-hero-content {
        order: 2;
    }
    .about-hero-visual {
    position: relative;
    height: 490px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
}
.about-image { 
    max-width: 625px;
    width: 100%;
    height: 450px;
}
.about-hero-content {
    padding-left: 0px;
    margin: 0 12px;
}
.about-hero-content p {
    max-width: 450px;
    text-align: center;
    font-size: 14px;
    margin: 0px 5px;
    line-height: 1.5;
}
.about-hero-content h1 {
    text-align: center;
    font-size: 40px;
}

 /* .container {
    width: calc(100% - 40px);
  } */

  /* HEADER */

  .about-nav {
    display: none;
  }

  .mobile-menu {
    display: block;
  }

  /* HERO */

  .hero-inner {
    grid-template-columns: 1fr;

    min-height: auto;
  }

  .about-hero {
    padding-top: 30px;
  }

  .hero-content {
    padding: 50px 0 20px;
  }

  .hero-content h1 {
    font-size: 48px;
  }

  .hero-image {
    height: 350px;
  }

  /* WHO */


  .section-heading {
    font-size: 38px;
  }

  /* PURPOSE */

  .purpose-grid {
    grid-template-columns: 1fr;

    gap: 35px;
  }

  .purpose-item {
    padding: 20px 30px;
  }

  .purpose-item:not(:last-child)::after {
    display: none;
  }

  /* IMPACT */

  .impact-grid {
    grid-template-columns: repeat(3, 1fr);

    row-gap: 35px;
  }

  .impact-item:nth-child(3) {
    border-right: 0;
  }

  /* EXPERTISE */

  .expertise-grid {
    grid-template-columns: 1fr;
  }

  /* PARTNER */

  .partner-grid {
    grid-template-columns: 1fr;

    gap: 50px;
  }

  /* FOOTER */

  .footer-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .about-hero {
    min-height: 720px;
}

  .hero-inner {
    min-height: 700px;

    grid-template-columns: 1fr;

    align-items: start;
  }

  .hero-content {
    padding-top: 60px;
    padding-bottom: 20px;
  }

  .hero-content h1 {
    font-size: 48px;
  }

  .hero-image {
    height: 350px;

    justify-content: center;
  }

  .hero-image img {
    width: 650px;
    height: 350px;
  }

  .hero-circle {
    width: 300px;
    height: 300px;

    right: 50%;
    transform: translateX(50%);

    top: 20px;
  }

  .hero-wave {
    height: 80px;
  }

.facility-number {
    right: 30px;
    left: auto;
}
}



/* =====================================================
   RESPONSIVE — 767px
===================================================== */

@media (max-width: 767px) {
  /* .container {
    width: calc(100% - 30px);
  } */

  .about-header {
    height: 68px;
  }

  .about-logo img {
    width: 110px;
  }

  /* HERO */

  .hero-content h1 {
    font-size: 38px;
  }

  .hero-content p {
    font-size: 15px;
  }

  .hero-image {
    height: 280px;
  }

  /* WHO */

  .who-section.about {
    padding: 70px 0;
  }

  .section-heading {
    font-size: 31px;
  }

  .who-image img {
    height: 300px;
     object-position: right;
  }

  /* PURPOSE */

  .purpose-section {
    padding: 70px 0;
  }

  /* IMPACT */

  .impact-section {
    padding: 60px 0;
  }

  .impact-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .impact-item {
    border-right: 0;

    border-bottom: 1px solid rgba(255, 255, 255, 0.2);

    padding-bottom: 25px;
  }

  /* EXPERTISE */

  .expertise-section {
    padding: 70px 0;
  }

  .expertise-cards {
    grid-template-columns: repeat(2, 1fr);
  }

  /* PARTNER */

  .partner-section {
    padding: 70px 0;
  }

  /* CTA */

  .cta-inner {
    flex-wrap: wrap;
  }

  .cta-content {
    width: calc(100% - 100px);

    flex: none;
  }

  .cta-btn {
    margin-left: 100px;
  }

  /* FOOTER */

  .footer-grid {
    grid-template-columns: 1fr;

    gap: 35px;
  }

  .footer-bottom .container {
    flex-direction: column;
    gap: 15px;
    text-align: center;
  }

    .who-grid {
    grid-template-columns: 1fr;
    gap: 60px;
  }

 
  /* .compact-cta-container {
    flex-direction: column;
    gap: 20px;
}
.ordoclin-compact-cta {
    padding: 20px 6%;
}
.compact-cta-container h2{
    font-size: 25px;
    line-height: 35px;
}
.compact-cta-button {
    min-height: 45px;
    padding: 0px 15px; 
    gap: 14px;
    font-size: 15px;
}
.ordoclin-compact-cta::after{
  display: none;
} */
}

@media (max-width: 576px) {
  .facilities-section {
    padding: 75px 0;
  }

  .facilities-heading {
    margin-bottom: 25px;
  }

  .facility-content h3 {
    font-size: 27px;
  }

  .facility-content {
    padding: 35px 22px;
  }

  .facility-image {
    min-height: 280px;
  }

  .who-section.about {
    padding: 40px 0;
}

.purpose-grid {
    margin-top: 30px;
    gap: 15px;
}
.purpose-item {
    padding: 5px 16px;
    border-bottom: 1px solid #c9dde3;
}
.purpose-item h3 {
    font-size: 13px;
    margin: 14px 0 12px;
}
.purpose-icon {
    width: 35px;
    height: 35px;
    font-size: 12px;
}
.purpose-item p {
    line-height: 1.6;
    font-size: 12px;
}
.facility-location {
    font-size: 11px;
}
.facility-content {
    padding: 35px 18px;
}
.facility-content h3 {
    font-size: 20px;
    margin: 0px 0 12px;
}
.facility-content p {
    margin: 0 0 20px;
    font-size: 13px;
    line-height: 1.6;
}
.facility-point {
    gap: 10px;
    font-size: 12px;
}
.facility-capabilities {
    gap: 11px;
}
.partner-section {
    padding: 30px 0;
}
.partner-image.mobile-view {
    margin-bottom: 25px;
    margin-top: 30px;
}
.partner-image img {
    height: 235px;
}

}

/* =====================================================
   RESPONSIVE — 480px
===================================================== */

@media (max-width: 480px) {
 

  .hero-content h1 {
    font-size: 32px;
  }

  .hero-image {
    height: 230px;
  }

  .hero-circle {
    width: 220px;

    height: 220px;
  }

  .section-heading {
    font-size: 28px;
  }

  /* .expertise-cards {
    grid-template-columns: 1fr;
  } */

  .impact-grid {
    grid-template-columns: 1fr 1fr;
  }

  .impact-item strong {
    font-size: 25px;
  }

  .cta-content h2 {
    font-size: 19px;
  }


  /*mahi*/
  .about-hero-content p {
    max-width: 450px;
    text-align: center;
}
.about-hero-content h1 {
    text-align: center;
}
.about-hero-visual {
    height: auto;
    justify-content: flex-start;
}
.about-image {
   
    width: 100%;
    height: 280px;
    margin-top: 20px;
}

.dot-pattern {
    z-index: 0;
    bottom: 8px;
}
.who-image img {
    z-index: 1;
    height: 268px;
}
  .who-image {
    margin: 15px 0px;
}
.image-outline {
    right: -2px;
    top: -1px;
   
}
.purpose-section {
    padding: 30px 0;
}
.who-grid {
    gap: 0px;
}

}