/* =========================
   NAVBAR WRAPPER (CENTERED PILL)
========================= */

.navbar-wrapper {
  position: fixed;
  top: 30px;
  width: 100%;
  display: flex;
  justify-content: center;
  z-index: 1000;
}

/* =========================
   NAVBAR PILL
========================= */

.navbar {
  width: 85%;
  max-width: 1200px;
  padding: 18px 40px;
  border-radius: 60px;
  display: flex;
  justify-content: space-between;
  align-items: center;

  background: rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(10px);

  box-shadow:
    0 25px 60px rgba(0, 0, 0, 0.35),
    0 8px 20px rgba(0, 0, 0, 0.15);
}

/* =========================
   LOGO
========================= */

.logo{
  display: flex;
  align-items: center;
  gap: 10px;
}

/* Logo Image */
.logo img{
  width: 36px;
  height: 36px;
  object-fit: cover;
  border-radius: 50%;   /* 🔥 makes it circle */
}

/* Logo Text */
.logo span{
  font-size: 1.4rem;
  font-weight: 800;
  letter-spacing: 1px;
  color: var(--primary-blue);
  text-transform: uppercase;
}

/* Light nav glow effect */
.navbar.light-nav .logo span{
  color: var(--primary-blue);
  text-shadow:
    0 0 8px rgba(255,255,255,0.9),
    0 0 14px rgba(255,255,255,0.6);
}

/* =========================
   NAV LINKS
========================= */

.nav-links {
  list-style: none;
  display: flex;
  gap: 35px;
  align-items: center;
}

.nav-links a,
.dropdown-toggle {
  text-decoration: none;
  color: #111827;
  text-shadow:
    0 0 8px rgba(255,255,255,0.9),
    0 0 14px rgba(255,255,255,0.6);
  font-weight: 500;
  font-size: 16px;   /* force equal size */
  font-family: inherit;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
}

.nav-links a:hover,
.dropdown-toggle:hover {
  color: var(--accent-blue);
}

/* =========================
   DROPDOWN
========================= */

.dropdown {
  position: relative;
}

/* Button */
.dropdown-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 16px;
  font-weight: 500;
  background: none;
  border: none;
  cursor: pointer;
  color: #111827;
}

/* Arrow */
.arrow {
  width: 8px;
  height: 8px;
  border-right: 2px solid var(--primary-blue);
  border-bottom: 2px solid var(--primary-blue);
  transform: rotate(45deg);
  transition: transform 0.3s ease;
}

/* Rotate arrow when active */
.dropdown.active .arrow {
  transform: rotate(-135deg);
}

/* Dropdown Menu */
.dropdown-menu{
  position:absolute;
  top:120%;
  right:0;
  width:270px;
  border-radius:18px;
  padding:15px 0;
  background:linear-gradient(145deg,#2431c9,#1b2496);
  border:1px solid rgba(255,255,255,0.12);
  box-shadow:
  0 25px 60px rgba(0,0,0,0.35),
  inset 0 1px 0 rgba(255,255,255,0.08);
  overflow:hidden;
  opacity:0;
  visibility:hidden;
  transform:translateY(12px) scale(.98);
  transition:all .3s ease;
}

/* animated border glow */

.dropdown-menu::before{
  content:"";
  position:absolute;
  inset:-2px;
  border-radius:20px;
  background:linear-gradient(
  120deg,
  transparent,
  rgba(255,255,255,0.4),
  transparent
  );
  opacity:.25;
  animation:borderGlow 6s linear infinite;
}

@keyframes borderGlow{

  0%{
    transform:translateX(-100%);
  }

  100%{
    transform:translateX(100%);
  }

}

.dropdown-menu::after{
  content:"";
  position:absolute;
  inset:-60px;
  background:radial-gradient(
  circle,
  rgba(31,39,166,0.35),
  transparent 70%
  );
  filter:blur(40px);
  z-index:-1;
}


.dropdown-menu li {
  position: relative;
  padding: 16px 28px;
  overflow: hidden;
}

.dropdown-menu li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 0%;
  background: rgba(255,255,255,0.08);
  transition: width 0.3s ease;
}

.dropdown-menu li:hover::before {
  width: 100%;
}

/* Show menu */
.dropdown.active .dropdown-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
}

/* Items */
.dropdown-menu li {
  padding: 14px 25px;
}

/* Link styling */
.dropdown-menu a{
  font-family:"Poppins", sans-serif;
  display:flex;
  align-items:center;
  gap:14px;
  color:white;
  text-decoration:none;
  font-weight:600;
  font-size:15px;
  letter-spacing:.3px;
}

.dropdown-menu li:hover .menu-icon{
  background:white;
  transform:scale(1.1);
  box-shadow:
  0 6px 16px rgba(0,0,0,0.35),
  0 0 12px rgba(255,255,255,0.4);
}

.dropdown-menu li:hover svg{
  stroke:#1b2496;
}

.dropdown-menu li:hover a{
  transform:translateX(4px);
}

/* Hover effect */
.dropdown-menu a:hover {
  color: var(--primary-blue);
}

/* Separator line */
.dropdown-menu li:not(:last-child) {
  border-bottom: 1px solid rgba(31, 39, 166, 0.15);
}

/* Icon */
.menu-icon{
  width: 36px;
  height: 36px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:50%;
  background:rgba(255,255,255,0.12);
  backdrop-filter: blur(6px);
  border:1px solid rgba(255,255,255,0.25);
  padding:6px;
  object-fit:contain;
  transition:all .35s ease;
}

/* SVG styling */

.menu-icon svg{
  width:18px;
  height:18px;
  stroke:white;
  stroke-width:2;
  fill:none;
}


.item-arrow {
  width: 8px;
  height: 8px;
  border-right: 2px solid white;
  border-bottom: 2px solid white;
  transform: rotate(-45deg);
  opacity: 0;
  transition: all 0.3s ease;
}

.dropdown-menu li:hover .item-arrow {
  opacity: 1;
  transform: rotate(-45deg) translateX(4px);
}

/* =========================
   HERO SECTION – MULTI DIAGONAL LAYERS
========================= */

.hero {
  min-height: 100vh;
  display: flex;
  align-items: center;
  padding: 0 8%;
  padding-top: 180px;
  position: relative;
  overflow: hidden;

  background: #f4f6fb; /* change to blue later */
  color: #111827;
}

/* Common layer styling */
.hero::before,
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
}

/* Layer 1 */
.hero::before {
  background: #e9edf5;
  clip-path: polygon(0 0, 40% 0, 25% 100%, 0% 100%);
  box-shadow: inset -40px 0 60px rgba(0, 0, 0, 0.08);
}

/* Layer 2 */
.hero::after {
  background: #dde3ef;
  clip-path: polygon(40% 0, 70% 0, 55% 100%, 25% 100%);
  box-shadow: inset -40px 0 60px rgba(0, 0, 0, 0.1);
}

/* Additional layers using inner divs */
.hero .layer-3,
.hero .layer-4 {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

/* Layer 3 */
.hero .layer-3 {
  background: #d3dbea;
  clip-path: polygon(70% 0, 85% 0, 75% 100%, 55% 100%);
  box-shadow: inset -40px 0 70px rgba(0, 0, 0, 0.12);
}

/* Layer 4 */
.hero .layer-4 {
  background: #c8d2e6;
  clip-path: polygon(85% 0, 100% 0, 100% 100%, 75% 100%);
  box-shadow: inset -50px 0 80px rgba(0, 0, 0, 0.15);
}

/* Keep content above everything */
.hero-content,
.hero-visual {
  position: relative;
  z-index: 2;
}

.hero-content {
  flex: 1;
  max-width: 600px;
  z-index: 2;
}

.hero-visual {
  flex: 1.2;
  max-width: 500px;
  display: flex;
  justify-content: flex-end;
  position: relative;
  animation: floatRotate 20s ease-in-out infinite;
}

.hero-visual img {
  width: 300%;
  opacity: 0.95; /* Slight transparency for subtlety */
  transform-origin: center center;
}

/* Floating + slow rotation animation */
@keyframes floatRotate {
  0%   { transform: translateY(0px) rotate(0deg); }
  25%  { transform: translateY(-10px) rotate(1deg); }
  50%  { transform: translateY(0px) rotate(0deg); }
  75%  { transform: translateY(10px) rotate(-1deg); }
  100% { transform: translateY(0px) rotate(0deg); }
}

/* Responsive tweaks */
@media (max-width: 1024px) {
  .hero {
    flex-direction: column-reverse;
    padding: 2rem;
    text-align: center;
  }
  .hero-visual {
    max-width: 100%;
    margin-bottom: 2rem;
    justify-content: center;
  }
}

.hero h1 {
  font-size: 3.2rem;
  line-height: 1.15;
  max-width: 650px;
  font-weight: 700;
  margin-bottom: 24px;
  color: var(--primary-dark);
}

.line-1 {
  white-space: nowrap;
}

.hero p {
  font-size: 18px;
  color: #334155;
  margin-bottom: 30px;
}

.btn-primary {
  display: inline-block;
  background: var(--primary-blue);
  color: white;
  padding: 14px 34px;
  border-radius: 50px;
  font-weight: 600;
  text-decoration: none;
  transition: var(--transition);
  box-shadow: 0 10px 25px rgba(31, 39, 166, 0.35);
}

.btn-primary:hover {
  background: var(--accent-blue);
  transform: translateY(-2px);
  box-shadow: 0 15px 35px rgba(31, 39, 166, 0.45);
}

/* =========================
   SERVICES HERO – 3 LAYERS ONLY
========================= */

.hero-operational::before {
  background: #e9edf5;
  clip-path: polygon(0 0, 50% 0, 35% 100%, 0% 100%);
  box-shadow: inset -40px 0 60px rgba(0, 0, 0, 0.08);
}

.hero-operational::after {
  background: #dde3ef;
  clip-path: polygon(50% 0, 80% 0, 65% 100%, 35% 100%);
  box-shadow: inset -40px 0 60px rgba(0, 0, 0, 0.1);
}

/* Keep only ONE extra layer */
.hero-operational .layer-3 {
  background: #d3dbea;
  clip-path: polygon(80% 0, 100% 0, 100% 100%, 65% 100%);
  box-shadow: inset -50px 0 80px rgba(0, 0, 0, 0.12);
}

/* Remove layer-4 completely */
.hero-operational .layer-4 {
  display: none;
}

.hero-asset::before {
  background: #e9edf5;
  clip-path: polygon(0 0, 50% 0, 35% 100%, 0% 100%);
  box-shadow: inset -40px 0 60px rgba(0, 0, 0, 0.08);
}

.hero-asset::after {
  background: #dde3ef;
  clip-path: polygon(50% 0, 80% 0, 65% 100%, 35% 100%);
  box-shadow: inset -40px 0 60px rgba(0, 0, 0, 0.1);
}

/* Keep only ONE extra layer */
.hero-asset .layer-3 {
  background: #d3dbea;
  clip-path: polygon(80% 0, 100% 0, 100% 100%, 65% 100%);
  box-shadow: inset -50px 0 80px rgba(0, 0, 0, 0.12);
}

/* Remove layer-4 completely */
.hero-asset .layer-4 {
  display: none;
}

.hero-360 h1,
.hero-asset h1,
.hero-operational h1 {
  white-space: nowrap;
  text-align: center;
  margin-left: auto;
  margin-right: auto;
  max-width: 700px;
}

.hero-360::before {
  background: #e9edf5;
  clip-path: polygon(0 0, 50% 0, 35% 100%, 0% 100%);
  box-shadow: inset -40px 0 60px rgba(0, 0, 0, 0.08);
}

.hero-360::after {
  background: #dde3ef;
  clip-path: polygon(50% 0, 80% 0, 65% 100%, 35% 100%);
  box-shadow: inset -40px 0 60px rgba(0, 0, 0, 0.1);
}

/* Keep only ONE extra layer */
.hero-360 .layer-3 {
  background: #d3dbea;
  clip-path: polygon(80% 0, 100% 0, 100% 100%, 65% 100%);
  box-shadow: inset -50px 0 80px rgba(0, 0, 0, 0.12);
}

/* Remove layer-4 completely */
.hero-360 .layer-4 {
  display: none;
}

.hero-usecases{
  margin-top: 120px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
}

.hero-usecases span{
  padding: 8px 14px;
  font-size: 13px;
  color: white;

  background: #1f27a6;
  border: 1px solid rgba(31,39,166,0.25);

  border-radius: 20px;

  backdrop-filter: blur(6px);

  transition: 0.3s;
}

.hero-usecases span:hover{
  background: white;
  color: #1f27a6;
}

/* Watermark styles */
.hero-watermark {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 650px;
  height: 650px;
  opacity: 0.3;
  pointer-events: none;
  transform: translate(-50%, -50%) rotate(-8deg);
  animation: float 5s ease-in-out infinite;
  z-index: 1;
}

.hero-watermark svg {
  width: 100%;
  height: 100%;
}

/* Floating animation */
@keyframes float {
  0% { transform: translate(-50%, -50%) rotate(-8deg) translateY(0px); }
  50% { transform: translate(-50%, -50%) rotate(-8deg) translateY(-10px); }
  100% { transform: translate(-50%, -50%) rotate(-8deg) translateY(0px); }
}

.hero-contact{
  display:flex;
  justify-content:center;
  align-items:center;
  text-align:center;
}

/* Stack heading and paragraph properly */
.hero-contact .hero-content{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:12px; /* controls spacing between h1 and p */

  margin:auto;
  max-width:800px;
}

/* Heading */
.hero-contact h1{
  font-size:3.2rem;
  margin:0;
}

/* Paragraph */
.hero-contact p{
  font-size:18px;
  margin:0;
  color:#334155;
}

/* =========================
   SECTIONS
========================= */
/* =========================
   AUTHORITY SECTION
========================= */

.authority {
  background: linear-gradient(
    180deg,
    #ffffff 0%,
    #f4f8ff 40%,
    #eef3ff 100%
  );
}

.authority-title {
  font-size: 40px;
  font-weight: 700;
  color: #111827;
}

.authority-text {
  max-width: 700px;
  margin: 20px auto 70px;
  font-size: 18px;
  line-height: 1.7;
  color: #4b5563;
}

/* Stats layout */
.authority-stats {
  display: flex;
  justify-content: center;
  gap: 80px;
  flex-wrap: wrap;
}

.stat {
  position: relative;
  padding: 0 40px;
}

.stat h3 {
  font-size: 42px;
  font-weight: 700;
  color: #0047AB;
  margin-bottom: 8px;
}

.stat p {
  font-size: 15px;
  color: #6b7280;
}

/* subtle separators */
.stat:not(:last-child)::after {
  content: "";
  position: absolute;
  right: -40px;
  top: 10px;
  height: 40px;
  width: 1px;
  background: #e5e7eb;
}

.stat:nth-child(1) h3::after,
.stat:nth-child(2) h3::after {
  content: "+";
}

.stat:nth-child(3) h3::after {
  content: "%";
}

/* =========================
   SERVICES SECTION
========================= */

.services{
  position:relative;
  padding:120px 0;
  overflow:hidden;
}

.services h2 {
  color: #ffffff;
}

/* VIDEO BACKGROUND */

.services-video{
  position:absolute;
  top:0;
  left:0;

  width:100%;
  height:100%;

  object-fit:cover;

  z-index:0;
}

/* DARK OVERLAY (IMPORTANT FOR TEXT READABILITY) */

.services::before{
  content:"";
  position:absolute;
  inset:0;

  background:linear-gradient(
    rgba(8,15,60,0.85),
    rgba(8,15,60,0.92)
  );

  z-index:1;
}

/* CONTENT ABOVE VIDEO */

.services .container{
  position:relative;
  z-index:2;
}

/* =========================
   SERVICE ICONS
========================= */

.service-icon{
  width:60px;
  height:60px;

  margin-bottom:20px;

  display:flex;
  align-items:center;
  justify-content:center;

  border-radius:50%;

  background:rgba(255,255,255,0.12);
  backdrop-filter:blur(6px);

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

  transition:all .35s ease;
}

/* SVG */

.service-icon svg{
  width:28px;
  height:28px;

  stroke:white;
  stroke-width:2;
  fill:none;

  opacity:.9;
}

.flip-card:hover .service-icon{

  background:white;

  transform:scale(1.1);

  box-shadow:
  0 10px 25px rgba(0,0,0,0.25),
  0 0 20px rgba(0,0,0,0.25);

}

.flip-card:hover .service-icon svg{
  stroke:var(--primary-blue);
}

/* =========================
   BACKSIDE WATERMARK ICON
========================= */

.flip-back{
  position:relative;
  overflow:hidden;
}

/* watermark icon */

.service-icon-bg{

  position:absolute;

  width:140px;
  height:140px;

  top:50%;
  left:50%;

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

  opacity:0.2;

  pointer-events:none;
}

.service-icon-bg svg{

  width:100%;
  height:100%;

  stroke:var(--primary-blue);
  stroke-width:2;

  fill:none;

}

/* text above watermark */

.flip-back p{
  position:relative;
  z-index:2;
}

/* =========================
   GRID ANIMATION
========================= */

@keyframes gridMove{

  from{
    transform: translateY(0);
  }

  to{
    transform: translateY(80px);
  }

}

/* glowing movement */

@keyframes glowMove{

  0%{
    transform: translateX(0px);
  }

  50%{
    transform: translateX(-80px);
  }

  100%{
    transform: translateX(0px);
  }
}


.cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
}

/* Card container */
.flip-card {
  perspective: 1200px;
  height: 220px;
}

/* Inner flip element */
.flip-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transition: transform 0.6s ease;
  transform-style: preserve-3d;
}

.flip-card:hover {
  transform: translateY(-8px);
}

.flip-card:hover .flip-inner {
  transform: rotateY(180deg);
}

/* Front & Back */
.flip-front,
.flip-back {
  position: absolute;
  inset: 0;
  padding: 35px;
  border-radius: 10px;
  box-shadow: 0 10px 25px rgba(0,0,0,0.08);
  backface-visibility: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  box-shadow: 0 20px 40px rgba(0,0,0,0.08);
}

/* Front */
.flip-front {
  background: var(--primary-blue);
  border: 1px solid #e5e7eb;
  border-radius:10px;
  flex-direction:column;
  box-shadow:
  0 20px 40px rgba(0,0,0,0.25),
  0 0 30px rgba(31,39,166,0.3);
}

.flip-front h3 {
  font-size: 20px;
  color: white;
}

/* Back */
.flip-back {
  background: white;
  border: 1px var(--primary-blue);
  color: var(--primary-blue);
  transform: rotateY(180deg);
}

.flip-back p {
  font-size: 16px;
  line-height: 1.6;
}

@media (max-width: 900px) {

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

}

/* CONTACT GRID */
.contact-grid {
  background: linear-gradient(
    180deg,
    #ffffff 0%,
    #f4f8ff 40%,
    #eef3ff 100%
  );
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: start;
}

/* BUTTON DEFAULT */
.primary-btn{
  display:inline-block;

  background-color:#1f27a6 !important;
  color:#fff !important;

  padding:14px 28px;

  border-radius:8px;
  border:2px solid #1f27a6;

  font-weight:600;
  text-decoration:none;

  transition:all .3s ease;
}

.primary-btn:hover{

  background-color:#fff !important;
  color:#1f27a6 !important;

  border:2px solid #1f27a6;

  box-shadow:0 0 20px rgba(31,39,166,0.25);

  transform:translateY(-2px);
}

/* =========================
   FOOTER
========================= */

.site-footer{
  background:#0b1026;
  padding:50px 20px;
  text-align:center;
  border-top:1px solid rgba(255,255,255,0.08);
  opacity:0;
  transform:translateY(40px);

  animation:footerFade 1s ease forwards;
}

@keyframes footerFade{

  to{
    opacity:1;
    transform:translateY(0);
  }

}

.footer-text{
  color:#cbd5e1;
  margin-bottom:25px;
  font-size:14px;
}

/* SOCIAL ICONS */

.social-icons{
  display:flex;
  justify-content:center;
  gap:18px;
}

.social-icons a{

  width:44px;
  height:44px;

  display:flex;
  align-items:center;
  justify-content:center;

  border-radius:50%;

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

  transition:all .35s ease;

}

.social-icons svg{
  width:20px;
  height:20px;

  stroke:white;
  stroke-width:2;
  fill:none;

  stroke-linecap:round;
  stroke-linejoin:round;
}

.social-icons .icon-x{
  fill:white;
  stroke:none;
}

/* Hover effect */

.social-icons a:hover{
  background:var(--primary-blue);
  transform:translateY(-4px);
  box-shadow:0 10px 25px rgba(31,39,166,0.5);
}

/* =========================
   BACK TO TOP BUTTON
========================= */

#backToTop{

  position:fixed;

  bottom:30px;
  right:30px;

  width:45px;
  height:45px;

  border:none;
  border-radius:50%;

  background:var(--primary-blue);
  color:white;

  font-size:18px;
  cursor:pointer;

  display:none;

  box-shadow:0 8px 20px rgba(0,0,0,0.3);

  transition:all .3s ease;

  z-index:999;
}

#backToTop:hover{
  transform:translateY(-4px);
  box-shadow:0 10px 25px rgba(31,39,166,0.6);
}

/*contact map section*/
.map-section{
  padding:90px 0;
}

.map-section h2{
  text-align:center;
  margin-bottom:40px;
}

/* MAP BOX */
.map-wrapper{

  width:100%;
  height:450px;

  border-radius:14px;

  overflow:hidden;

  border:3px solid var(--primary-blue);

  box-shadow:
  0 0 0 1px rgba(31,39,166,0.2),
  0 15px 45px rgba(31,39,166,0.25),
  0 0 30px rgba(31,39,166,0.25);

  transition: all .35s ease;
}

/* Hover glow */
.map-wrapper:hover{

  box-shadow:
  0 0 0 2px rgba(31,39,166,0.35),
  0 20px 60px rgba(31,39,166,0.35),
  0 0 40px rgba(31,39,166,0.4);

}

/* Map iframe */
.map-wrapper iframe{
  width:100%;
  height:100%;
  border:0;
}

/* Contact Page Button */
.contact-form .primary-btn {
  background: var(--primary-blue);
  color: white;

  padding: 14px 34px;
  border-radius: 50px;

  border: 2px solid var(--primary-blue);

  font-weight: 600;
  cursor: pointer;

  transition: all 0.35s ease;

  box-shadow: 0 10px 25px rgba(31,39,166,0.35);
}

.contact-form .primary-btn:hover {
  background: white;
  color: var(--primary-blue);

  box-shadow:
    0 0 10px rgba(31,39,166,0.5),
    0 0 25px rgba(31,39,166,0.4);

  transform: translateY(-2px);
}

/* POPUP BACKGROUND */
.popup{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,0.6);

  display:flex;
  justify-content:center;
  align-items:center;

  opacity:0;
  pointer-events:none;

  transition:0.3s;
  z-index:9999;
}

/* ACTIVE STATE */
.popup.active{
  opacity:1;
  pointer-events:auto;
}

/* POPUP BOX */
.popup-box{
  background:white;
  padding:35px 45px;
  border-radius:14px;
  text-align:center;

  box-shadow:
    0 20px 60px rgba(0,0,0,0.35),
    0 0 30px rgba(31,39,166,0.2);

  animation:popIn 0.4s ease;
}

/* TEXT */
.popup-box h3{
  color:#1f27a6;
  margin-bottom:10px;
}

.popup-box p{
  color:#555;
  margin-bottom:20px;
}

/* BUTTON */
.popup-box button{
  background:#1f27a6;
  color:white;

  border:none;
  padding:10px 22px;

  border-radius:6px;
  cursor:pointer;

  transition:0.3s;
}

.popup-box button:hover{
  background:white;
  color:#1f27a6;
  border:1px solid #1f27a6;
  box-shadow:0 0 15px rgba(31,39,166,0.3);
}

/* ANIMATION */
@keyframes popIn{
  from{
    transform:scale(0.7);
    opacity:0;
  }
  to{
    transform:scale(1);
    opacity:1;
  }
}

.embed-wrapper{

position:relative;

max-width:1000px;
margin:50px auto;

border:3px solid var(--primary-blue);

border-radius:14px;
overflow:hidden;

box-shadow:
0 0 25px rgba(31,39,166,0.8),
0 0 60px rgba(31,39,166,0.5);

}

/* Moving smoke glow */

.embed-wrapper::before{
content:"";
position:absolute;
top:-20px;
left:-20px;
width:calc(100% + 40px);
height:calc(100% + 40px);
border-radius:20px;
background:radial-gradient(
circle at center,
rgba(31,39,166,0.4),
transparent 70%
);
filter:blur(25px);
animation:smokeMove 8s linear infinite;
z-index:-1;

}

/* animation */

@keyframes smokeMove{
0%{
transform:rotate(0deg) scale(1);
}
50%{
transform:rotate(180deg) scale(1.05);
}
100%{
transform:rotate(360deg) scale(1);
}
}

.embed-wrapper iframe{
width:100%;
height:500px;
border:0;
}

/* GRID FOR MULTIPLE TOURS */

.embed-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:40px;
  margin-top:40px;
}

/* RESPONSIVE (MOBILE) */
@media (max-width:768px){
  .embed-grid{
    grid-template-columns:1fr;
  }
}

.section-soft{
background:#f4f6fb;
}

/* 360 SECTION */

.section-360{

position:relative;
padding:120px 0;
overflow:hidden;

}

/* Video background */

.section-video-bg{

position:absolute;
top:0;
left:0;

width:100%;
height:100%;

object-fit:cover;

z-index:-2;

filter:brightness(0.35) contrast(1.1);

}

.section-title-light{
color:white;
font-size:2.3rem;
}

.section-text-light{
color:#d1d5db;
max-width:700px;
margin:20px auto;
}

/* STRATEGIC ADVANTAGES SECTION */
.advantages-section {
  position: relative;
  padding: 120px 8%;
  background: white;
  overflow: hidden;
}

/* VIDEO BACKGROUND */
.advantages-video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
  filter: opacity(50%);
}

.advantages-section::after {
  content: "";
  position: absolute;
  top: 60%;
  left: 40%;
  width: 600px;
  height: 600px;
  background: radial-gradient(circle, rgba(31,39,166,0.25) 0%, transparent 70%);
  filter: blur(140px);
  animation: smokeFloat2 18s ease-in-out infinite;
  z-index: 1;
}

@keyframes smokeFloat2 {
  0% { transform: translate(-40%, -60%) scale(1); }
  50% { transform: translate(-45%, -55%) scale(1.3); }
  100% { transform: translate(-40%, -60%) scale(1); }
}

/* CONTENT */
.advantages-container {
  display: flex;
  position: relative;
  z-index: 2; /* above video and smoke */
  align-items: center;
  gap: 70px;
  color: white; /* optional: text color for contrast */
}

/* LEFT */

.advantages-left{
flex:1;
animation:fadeLeft 1s ease;
}

.advantages-left h2{
  color: black;
font-size:40px;
margin-bottom:20px;
}

.advantages-left p{
color: black;
line-height:1.7;
max-width:460px;
}

/* RIGHT */

.advantages-right{
flex:1;
height:320px;
overflow:hidden;
position:relative;
}

.carousel{
height:100%;
overflow:hidden;
}

.carousel-track{
display:flex;
flex-direction:column;
gap:20px;
}

/* CARD */

.adv-card{
background:#4E9FE5;
color:white;
padding:26px;
border-radius:14px;
box-shadow:0 15px 35px rgba(0,0,0,0.15);
transition:all .35s ease;
}

.adv-card:hover{
transform:translateY(-6px) scale(1.02);
box-shadow:0 25px 45px rgba(0,0,0,0.25);
}

.adv-card h3{
color: white;
margin-bottom:8px;
font-size:18px;
}

.adv-card p{
  color:black;
opacity:.9;
font-size:14px;
}

/* ICON */

.icon{
  color:#1f27a6;
width:40px;
height:40px;
margin-bottom:12px;
}

/* ANIMATION */

@keyframes fadeLeft{
from{
opacity:0;
transform:translateX(-40px);
}
to{
opacity:1;
transform:translateX(0);
}
}

/* MOBILE */

@media(max-width:900px){

.advantages-container{
flex-direction:column;
text-align:center;
}

.advantages-right{
width:100%;
}

}

.maintenance-cost{
  position:relative;
  padding:140px 40px;
  background:#1e293b;
  overflow: hidden;
  text-align:center;
}

.maintenance-cost::before{
  content:"";
  position: absolute;
  inset:0;
  background-image:
    linear-gradient(rgba(0,0,0,0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,0,0,0.03) 1px, transparent 1px);
  background-size: 60px 60px;
  pointer-events:none;
  z-index:0;
}

.floating-symbol{
  position:absolute;
  font-size:20px;
  color:rgba(31,39,166,0.15);
  pointer-events:none;
  user-select:none;
  animation:floatSymbol 12s ease-in-out infinite;
}

@keyframes floatSymbol{

0%{
transform:translateY(0px) rotate(0deg);
}

50%{
transform:translateY(-25px) rotate(180deg);
}

100%{
transform:translateY(0px) rotate(360deg);
}

}

.maintenance-cost h2{
  color: white;
  font-size:38px;
  margin-bottom:10px;
}

.cost-sub{
max-width:700px;
margin:auto;
margin-bottom:80px;
color: whitesmoke;
}

.snake-container{
position:relative;
max-width:1200px;
margin:auto;
height: 500px;
}

.snake-path{
position:absolute;
width:100%;
height:100%;
left:0;
top:0;
}

#snakeLine{
stroke-dasharray:2000;
stroke-dashoffset:2000;
transition:stroke-dashoffset 2s ease;
}

/* Section labels for snake timeline */
.snake-label{
position:absolute;
font-weight:600;
font-size:16px;
color:#4E9FE5; /* primary blue */
text-transform: uppercase;
opacity:0.7;
}

.left-label{
left:-20px;
bottom: 0;
}

.right-label{
right:-20px;
top:0;
text-align:right;
}

/* nodes */

.node{
position:absolute;
width:170px;
background:rgba(255, 255, 255, 0.1);
border-radius:10px;
padding:14px;
box-shadow:0 10px 25px rgba(0,0,0,0.1);
font-size:26px;
opacity:0;
transform:translateY(30px);
transition:all .6s ease;
}

.node h4{
font-size:14px;
margin-top:6px;
}

/* aligned along snake */

.node1{left:60px;  top:360px;}
.node2{left:220px; top:290px;}
.node3{left:380px; top:260px;}
.node4{left:540px; top:190px;}
.node5{left:700px; top:160px;}
.node6{left:860px; top:80px;}
.node7{left:1040px; top:40px;}

.node:not(.solution){
  border-top: 3px solid #ff4b2b;
}

.solution{
border-top:3px solid #1f27a6;
}

/* reveal */

.node.show{
opacity:1;
transform:translateY(0);
}

/* particle */

.particle{
filter:blur(2px);
opacity:0.9;
}


/* SECTION */
.insights-section{
position:relative;
padding:120px 8%;
overflow:hidden;
color:#111;
}

.insights h2{
  color: black;
}

.insights p{
  color: black;
}

/* VIDEO BACKGROUND */

.insights-video{
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
object-fit:cover;
z-index:-2;
}

/* CONTENT ABOVE VIDEO */

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


/* DASHBOARD AREA */

.dashboard-visual{
position:relative;
max-width:900px;
margin:60px auto;
}


/* MAIN PANEL */

.dashboard-main{
background:linear-gradient(135deg,#ffffff,#eef2ff);
border-radius:14px;
box-shadow:0 20px 50px rgba(31,39,166,0.15);
display:flex;
padding:25px;
border:1px solid rgba(31,39,166,0.15);
}


/* SIDEBAR */
.sidebar{
width:60px;
background:linear-gradient(180deg,#1f27a6,#3a43d6);
border-radius:8px;
margin-right:20px;
opacity:0.85;
}


/* CONTENT */

.dashboard-content{
flex:1;
}

.top-stats{
display:flex;
gap:20px;
margin-bottom:20px;
}

.stat{
background:linear-gradient(135deg,#e8ecff,#f5f7ff);
padding:15px;
border-radius:10px;
flex:1;
border:1px solid rgba(31,39,166,0.15);
box-shadow:0 6px 18px rgba(31,39,166,0.08);
}

.stat-title{
font-size:12px;
color:#6b7280;
}

.stat h3{
color:#1f27a6;
margin-top:5px;
}


/* CHART */
.chart-box{
background:#E1E6EB;
padding:18px;
border-radius:10px;
border:1px solid rgba(31,39,166,0.15);
box-shadow:0 8px 20px rgba(31,39,166,0.08);
}

.line-chart{
width:100%;
height:120px;
}


/* FLOATING CARDS */
.floating-card{
position:absolute;
background:#E1E6EB;
border-radius:12px;
box-shadow:0 20px 40px rgba(31,39,166,0.2);
padding:20px;
animation:floatCard 6s ease-in-out infinite;
border:1px solid rgba(31,39,166,0.2);
}

/* FLOATING CHART */
.chart-card{
top:-40px;
right:-120px;
width:260px;
background:linear-gradient(135deg,#e8ecff,#ffffff);
}

.stat:hover,
.chart-box:hover,
.floating-card:hover{
transform:translateY(-4px);
box-shadow:0 12px 30px rgba(31,39,166,0.25);
transition:0.3s;
}

/* FLOATING KPI */
.progress-card{
bottom:-40px;
left:-40px;
background:linear-gradient(135deg,#e6ebff,#ffffff);
}

/* FLOAT ANIMATION */

@keyframes floatCard{

0%{transform:translateY(0);}
50%{transform:translateY(-10px);}
100%{transform:translateY(0);}

}


/* CIRCLE PROGRESS */

.circle{
position:relative;
}

.circle svg{
transform:rotate(-90deg);
}

.progress{
stroke-dasharray:314;
stroke-dashoffset:314;
}

.circle-text{
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
font-weight:700;
color:#1f27a6;
}

/* ===============================
Operational Insight Section
=============================== */
.operational-insight{
position:relative;
padding:140px 40px;
overflow:hidden;

/* DARK CONSULTING STYLE BACKGROUND */
background: radial-gradient(circle at 30% 30%, #1f27a6 0%, #0c0f3a 40%, #020617 100%);
}

/* canvas layer */
#networkCanvas{
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
z-index:1;
}

.operational-insight h2{
  color: white;
}

/* text */
.insight-content{
position:relative;
z-index:2;
max-width:900px;
margin:auto;
color:white;
}

.insight-text{
max-width:700px;
margin:auto;
margin-top:20px;
color:rgba(255,255,255,0.85);
}

/* SECTION */
.framework-section{
padding:120px 0;
background:linear-gradient(135deg,#0f172a,#020617);
color:white;
position:relative;
overflow:hidden;
}

/* BACKGROUND PARTICLES */

.framework-bg{
position:absolute;
width:100%;
height:100%;
top:0;
left:0;
background-image:
radial-gradient(circle at 20% 30%, rgba(59,130,246,0.15), transparent 40%),
radial-gradient(circle at 80% 70%, rgba(59,130,246,0.12), transparent 40%),
radial-gradient(circle at 60% 20%, rgba(59,130,246,0.10), transparent 40%);
animation:bgMove 12s infinite alternate ease-in-out;
z-index:0;
}

@keyframes bgMove{
0%{transform:translateY(0)}
100%{transform:translateY(-30px)}
}

/* CONTENT ABOVE BG */

.framework-section .container{
position:relative;
z-index:2;
}

/* TEXT */

.framework-section h2{
font-size:40px;
margin-bottom:10px;
color:white;
}

.framework-section p{
color:#cbd5f5;
}

/* FLOW LAYOUT */

.framework-flow{
display:flex;
align-items:center;
justify-content:center;
gap:40px;
margin-top:70px;
flex-wrap:wrap;
}

/* CARDS */

.framework-card{
width:280px;
padding:35px;
border-radius:14px;

background:rgba(255,255,255,0.05);
border:1px solid rgba(255,255,255,0.08);

backdrop-filter:blur(10px);

box-shadow:0 20px 60px rgba(0,0,0,0.5);

opacity:0;
transform:translateY(40px);
transition:.6s;
}

.framework-card:hover{
transform:translateY(-10px) scale(1.03);
box-shadow:
0 35px 80px rgba(0,0,0,0.6),
0 0 30px rgba(59,130,246,0.5);
}

.framework-card h3{
color:white;
margin-bottom:10px;
}

.framework-card p{
font-size:14px;
color:#cbd5f5;
}

/* CARD ACTIVATION GLOW */

.card-glow{

box-shadow:
0 0 20px rgba(59,130,246,0.6),
0 0 40px rgba(59,130,246,0.5),
0 0 60px rgba(59,130,246,0.4);

border-color:#3b82f6;

transform:translateY(-10px) scale(1.03);

transition:all .4s ease;

}

/* ARROW LINE */

.framework-arrow{
width:100px;
height:4px;
background:rgba(59,130,246,0.2);
position:relative;

opacity:0;
transform:scaleX(0);
transition:.5s;
}

.arrow-line{
width:100%;
height:100%;
background:#3b82f6;
opacity:.4;
}

/* ENERGY PULSE */

.pulse{
position:absolute;
width:10px;
height:10px;
background:#3b82f6;
border-radius:50%;
top:-3px;
left:0;
box-shadow:0 0 10px #3b82f6;
animation:flow 1.5s linear infinite;
}

@keyframes flow{
0%{left:0}
100%{left:100%}
}

/* ==================================
EXECUTIVE ALIGNMENT SECTION
================================== */
/* ALIGNMENT BACKGROUND ENERGY FLOW */

.alignment-section{

padding:120px 0;

background:linear-gradient(
180deg,
#f8fbff 0%,
#eef4ff 100%
);

position:relative;
overflow:hidden;

}

/* animated waves */

.alignment-section::before{

content:"";

position:absolute;

top:-50%;
left:-50%;

width:200%;
height:200%;

background:
radial-gradient(circle at 30% 40%, rgba(59,130,246,0.18), transparent 40%),
radial-gradient(circle at 70% 60%, rgba(59,130,246,0.14), transparent 45%),
radial-gradient(circle at 50% 20%, rgba(96,165,250,0.18), transparent 40%);

animation:energyFlow 20s linear infinite;

opacity:.6;

}

/* second layer */

.alignment-section::after{

content:"";

position:absolute;

top:-50%;
left:-50%;

width:200%;
height:200%;

background:
radial-gradient(circle at 20% 80%, rgba(59,130,246,0.12), transparent 40%),
radial-gradient(circle at 80% 30%, rgba(96,165,250,0.14), transparent 40%);

animation:energyFlowReverse 26s linear infinite;

opacity:.5;

}

@keyframes energyFlow{

from{
transform:rotate(0deg);
}

to{
transform:rotate(360deg);
}

}

@keyframes energyFlowReverse{

from{
transform:rotate(360deg);
}

to{
transform:rotate(0deg);
}

}

.alignment-section .container{
position:relative;
z-index:2;
}

.alignment-section h2{
font-size:40px;
color:#0f172a;
}

.alignment-section p{
max-width:700px;
margin:auto;
color:#475569;
}

/* VISUAL */

.alignment-visual{
margin-top:80px;
display:flex;
flex-direction:column;
align-items:center;
gap:80px;
position:relative;
}


/* LAYER */

.align-layer{
display:flex;
gap:80px;
}

/* NODES */
.align-node{

padding:22px 34px;

border-radius:14px;

font-weight:600;

color:#0f172a;

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

backdrop-filter:blur(12px);

border:1px solid rgba(255,255,255,0.9);

box-shadow:
0 15px 40px rgba(0,0,0,0.08),
0 0 0 1px rgba(255,255,255,0.4) inset;

transition:all .35s ease;

position:relative;

overflow:hidden;

}

/* hover glow */

.align-node:hover{

transform:translateY(-8px) scale(1.03);

box-shadow:
0 25px 60px rgba(0,0,0,0.12),
0 0 20px rgba(59,130,246,0.35);

}

/* CORE */
.align-core{

padding:26px 46px;

border-radius:16px;

font-weight:600;

font-size:18px;

color:white;

background:linear-gradient(
135deg,
#2563eb,
#3b82f6,
#60a5fa
);

box-shadow:
0 25px 70px rgba(37,99,235,0.45),
0 0 40px rgba(59,130,246,0.4);

position:relative;

animation:corePulse 4s ease-in-out infinite;

}

/* glow ring */

.align-core::after{

content:"";

position:absolute;

top:-10px;
left:-10px;
right:-10px;
bottom:-10px;

border-radius:20px;

background:radial-gradient(
circle,
rgba(59,130,246,0.25),
transparent 70%
);

z-index:-1;

}

/* subtle pulse */

@keyframes corePulse{

0%,100%{
transform:scale(1);
}

50%{
transform:scale(1.05);
}

}

/* CONNECTION AREA */
.alignment-visual{
position:relative;
z-index:2;
}

.align-connections{
position:absolute;
top:115px;
display:flex;
gap:165px;
z-index:1;
}

.align-core{
z-index:3;
position:relative;
}

/* LINES */
.align-connection{

width:2px;

height:190px;

background:linear-gradient(
to bottom,
transparent,
#3b82f6,
transparent
);

position:relative;

filter:drop-shadow(0 0 6px rgba(59,130,246,0.5));

}

/* FLOW DOT */
.align-flow{

position:absolute;

width:12px;
height:12px;

border-radius:50%;

background:white;

border:3px solid #3b82f6;

left:-5px;

top:-10px;

box-shadow:
0 0 10px #3b82f6,
0 0 20px rgba(59,130,246,.6);

animation:alignFlow 3s linear infinite;

}

/* FLOW ANIMATION */

@keyframes alignFlow{

0%{
top:-10px;
opacity:0;
}

20%{
opacity:1;
}

100%{
top:180px;
opacity:0;
}

}

.align-layer{

display:flex;

gap:100px;

justify-content:center;

flex-wrap:wrap;

}

/* =========================
   GLOBAL MOBILE FIXES
========================= */

@media (max-width: 768px){

  body{
    overflow-x: hidden;
  }

  section{
    padding-top: 120px;
  }

}

/* =========================
   MOBILE NAVBAR
========================= */

@media (max-width: 768px){

  .navbar{
    width: 92%;
    padding: 14px 20px;
    border-radius: 40px;
  }

}

.menu-toggle{
  display: none;
  flex-direction: column;
  cursor: pointer;
  gap: 5px;
}

.menu-toggle span{
  width: 25px;
  height: 3px;
  background: var(--primary-blue);
  border-radius: 3px;
}

/* MOBILE */
@media (max-width: 768px){

  .menu-toggle{
    display: flex;
  }

  .nav-links{
    position: absolute;
    top: 90px;
    left: 50%;
    transform: translateX(-50%) scale(0.95);

    width: 90%;
    flex-direction: column;
    gap: 20px;
    padding: 25px;

    background: rgba(255,255,255,0.95);
    backdrop-filter: blur(12px);

    border-radius: 18px;

    opacity: 0;
    visibility: hidden;

    box-shadow: 0 20px 40px rgba(0,0,0,0.15);

    transition: all 0.3s ease;
  }

  .nav-links.active{
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) scale(1);
  }

  .nav-links li{
    text-align: center;
  }

  .nav-links a{
    font-size: 18px;
    color: #111;
  }

}

@media (max-width: 768px){

  /* Make dropdown normal flow */
  .dropdown-menu{
    position: static;
    width: 100%;
    background: transparent;
    box-shadow: none;
    border: none;
    padding: 10px 0;

    opacity: 1;
    visibility: visible;
    transform: none;
  }

  /* Hide by default */
  .dropdown-menu{
    display: none;
  }

  /* Show when active */
  .dropdown.active .dropdown-menu{
    display: block;
  }

  /* Clean mobile items */
  .dropdown-menu li{
    padding: 12px 0;
    text-align: center;
  }

  .dropdown-menu a{
    color: var(--primary-blue);
    justify-content: center;
    font-size: 16px;
  }

  /* REMOVE desktop glow effects */
  .dropdown-menu::before,
  .dropdown-menu::after{
    display: none;
  }

}

/* =========================
   HERO MOBILE
========================= */

@media (max-width: 768px){

  .hero{
    flex-direction: column;
    text-align: center;
    padding-top: 200px;
  }

  .hero-content{
    text-align: center;
    align-items: center;
    max-width: 100%;
  }

  .hero h1{
    font-size: 1.7rem;
    line-height: 1.3;
    margin: 0 auto;
    max-width: 100%;
    white-space: normal;
    overflow-wrap: break-word;
  }

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

  .hero-visual{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
  }

  .hero-visual img{
    width: 100%;
    max-width: 500px;
    margin: 0 auto;
    display: block;
    transform: none; /* remove weird offsets */
  }

  /* WATERMARK FIX */
  .hero-watermark{
    width: 350px;
    height: 350px;
    opacity: 0.15;
  }

}

/* =========================
   CONTACT HERO CENTER FIX
========================= */

@media (max-width: 768px){

  .hero-contact h1{
    font-size: 2rem;
  }

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

}

/* =========================
   CARDS / SERVICES MOBILE
========================= */

@media (max-width: 768px){

  .cards{
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .flip-card{
    height: 200px;
  }

}

/* =========================
   AUTHORITY STATS MOBILE
========================= */

@media (max-width: 768px){

  .authority-stats{
    flex-direction: column;
    gap: 30px;
  }

  .stat{
    padding: 0;
  }

  .stat::after{
    display: none;
  }

}

/* =========================
   CONTACT GRID MOBILE
========================= */

@media (max-width: 768px){

  .contact-grid{
    grid-template-columns: 1fr;
    gap: 40px;
  }

}

/* =========================
   MAP MOBILE
========================= */

@media (max-width: 768px){

  .map-wrapper{
    height: 300px;
  }

}

/* =========================
   ADVANTAGES SECTION MOBILE
========================= */

@media (max-width: 768px){

  .advantages-container{
    flex-direction: column;
    gap: 40px;
    text-align: center;
  }

  .advantages-left p{
    max-width: 100%;
  }

}

/* =========================
   DASHBOARD VISUAL MOBILE
========================= */

@media (max-width: 768px){

  .dashboard-main{
    flex-direction: column;
  }

  .sidebar{
    width: 100%;
    height: 40px;
    margin-bottom: 15px;
  }

  .top-stats{
    flex-direction: column;
  }

  .floating-card{
    display: none; /* IMPORTANT: avoid breaking layout */
  }

}

/* =========================
   FRAMEWORK SECTION MOBILE
========================= */

@media (max-width: 768px){

  .framework-flow{
    flex-direction: column;
    gap: 30px;
  }

  .framework-arrow{
    display: none;
  }

}

/* =========================
   ALIGNMENT SECTION MOBILE
========================= */

@media (max-width: 768px){

  .alignment-visual{
    gap: 40px;
  }

  .align-layer{
    flex-direction: column;
    gap: 20px;
  }

  .align-connections{
    display: none; /* lines break layout on mobile */
  }

}

/* =========================
   SNAKE TIMELINE MOBILE (VERY IMPORTANT)
========================= */

@media (max-width: 768px){

  .snake-container{
    height: auto;
  }

  .snake-path{
    display: none;
  }

  .node{
    position: static;
    margin: 15px auto;
    width: 90%;
    opacity: 1;
    transform: none;
  }

}

/* =========================
   FOOTER MOBILE
========================= */

@media (max-width: 768px){

  .footer-text{
    font-size: 13px;
  }

  .social-icons{
    gap: 12px;
  }

  .social-icons a{
    width: 40px;
    height: 40px;
  }

}

/* =========================
   POPUP MOBILE
========================= */

@media (max-width: 768px){

  .popup-box{
    width: 90%;
    padding: 25px;
  }

}

/* ================= MOBILE FIX ================= */

@media (max-width:768px){

  .snake-container{
    height:auto;
    padding-left:30px;
    display:flex;
    flex-direction:column;
  }

  /* 👉 Hide snake curve */
  .snake-path{
    display:none;
  }

  /* 👉 Create straight vertical line */
  .snake-container::before{
    content:"";
    position:absolute;
    left:15px;
    top:0;
    width:4px;
    height:100%;
    background:linear-gradient(
      to bottom,
      #ffb400,
      #ff5a00,
      #ff0000,
      #1f27a6,
      #3fa9ff,
      #2ecc71
    );
    border-radius:10px;
  }

  /* 👉 Fix labels */
  .snake-label{
    position:static;
    display:block;
    text-align:center;
    margin-bottom:20px;
  }

  /* 👉 Stack nodes */
  .node{
    position:relative;
    left:0 !important;
    top:0 !important;

    width:100%;
    margin-bottom:20px;
    text-align:left;
    padding-left:50px;
  }

  /* 👉 Add dots on timeline */
  .node::before{
    content:"";
    position:absolute;
    left:-22px;
    top:20px;
    width:14px;
    height:14px;
    background:#1f27a6;
    border-radius:50%;
  }

}

@media (max-width:768px){

  /* TOP LABEL */
  .left-label{
    order:1;
    position:static;
    text-align:center;
    margin-bottom:20px;
  }

  /* NODES (ALL CARDS IN MIDDLE) */
  .node{
    order:2;
  }

  /* BOTTOM LABEL */
  .right-label{
    order:3;
    position:static;
    text-align:center;
    margin-top:30px;
  }

}