:root{


      --navy:#172342;
      --coral:#FE5862;
      --gray:#EEEEEE;
      --white:#ffffff;

      --text:#0f172a;
      --muted:#5b6475;

      --radius:16px;
      --radius-sm:12px;
      --shadow: 0 14px 40px rgba(23, 35, 66, .14);
      --shadow-soft: 0 10px 28px rgba(23, 35, 66, .10);

      --max: 1200px;
      --pad: clamp(18px, 3vw, 28px);

      --ease: cubic-bezier(.2,.8,.2,1);
    }

  

    *{ box-sizing:border-box; }
    html{ scroll-behavior:smooth; }
    body{
      margin:0;
      font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
      color: var(--text);
      background: linear-gradient(180deg, #ffffff 0%, #f7f7fb 60%, #ffffff 100%);
      background: var(--white);
      line-height:1.55;
      overflow-x:hidden;
      
    }

    a{ color:inherit; text-decoration:none; }
    img{ max-width:100%; display:block; }
    .container{ width:min(var(--max), calc(100% - 2*var(--pad))); margin-inline:auto; }
      .skip-link{
        position:absolute;
        top:-40px;
        left:0;
      
        color:var(--text-color);
      background:var(--card-bg);
        padding:8px 12px;
        z-index:100;
        transition:0.3s;
      }

          .skip-link:focus{
            top:10px;
          }

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

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

body{
  font-family:'Poppins',sans-serif;
  transition:background 0.3s ease, color 0.3s ease;
}





/* ================= GLOBAL APPLY ================= */

body{
  background:var(--bg-color);
  color:var(--text-color);
}

/* Sections */
section,
.card,
.container-box{
  background:var(--card-bg);
  border-color:var(--border-color);
}

/*Headings */
/* h1,h2,h3,h4,h5,h6{
  color:var(--text-color);
}  */

/* Paragraph */
 p{
  color:var(--text-color);
}

/* Links */
a{
  color:var(--link-color);
  text-decoration:none;
  transition:0.3s;
}

a:hover{
  color:#ef4444;
}

/* Buttons */
.btn{
  font-size: 15px;
  padding:10px 20px;
  border-radius:8px;
  border:1px solid var(--border-color);
  background:rgba(23,35,66,.06);
  color:var(--text-color);
  cursor:pointer;
  transition:0.3s;
   font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji"
}

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

/* Header */
.main-header{
  background:var(--card-bg);
  border-bottom:1px solid var(--border-color);
}

/* Dropdown */
.dropdown-menu{
  background:var(--card-bg);
  border:1px solid var(--border-color);
}

.dropdown-menu a:hover{
  background:var(--hover-bg);
}

/* Mobile Menu */
.mobile-menu{
  background:var(--card-bg);
}
  /* ================= Card between hero and about ================= */
  /* Give hero some bottom space */
.hero2 {
  padding-bottom: 120px;
}

/* Pull card upward */
.bridge-wrapper {
  margin-top: -30px;
  margin-bottom: -70px;
  display: flex;
  justify-content: center;
  position: relative;
  z-index: 20;
}

/* Card style */
.bridge-card {
  width: min(1100px, 92%);
  padding: 10px 20px;
  border-radius: 24px;

  background: #ffffff;
  box-shadow: 0 30px 80px rgba(0,0,0,0.15);

  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}

/* Logo style */
.bridge-card img {
  height: 40px;
  opacity: .7;
  transition: .3s ease;
  border-radius: 50%;
  filter: grayscale(100%);
}

.bridge-card img:hover {
  opacity: 1;
  transform: translateY(-4px);
}

/* Add space in About section */
.aboutX {
  padding-top: 120px;
}

/* BUTTON */
.btn-primary{
  padding:14px;
  border-radius:18px;
  font-weight:700;
  font-size:15px;
  background: linear-gradient(135deg,#fe5862,#ff7b86);
  color: white;
  border:none;
  cursor:pointer;
  transition: all .3s ease;
  box-shadow: 0 10px 25px rgba(254,88,98,.25);
}

.btn-primary:hover{
  transform: translateY(-3px);
  box-shadow: 0 18px 40px rgba(254,88,98,.35);
}