/* Reset & Base */
* { margin:0; padding:0; box-sizing:border-box; }

body {
  font-family:"Poppins", sans-serif;
  color:#222;
  min-height:100vh;
  display:flex;
  flex-direction:column;
  align-items:center;
  background:linear-gradient(180deg,#f7f4ff,#efe7ff);
}
body, html {
  overflow-x: hidden;  /* prevents sideways scroll */
}
a { text-decoration:none; color:inherit; }
ul { list-style:none; }


/* Navbar */
.navbar {
  width:100%;
  background: rgba(255,255,255,0.98);
  backdrop-filter: blur(4px);
  box-shadow:0 2px 6px rgba(0,0,0,.06);
  position: sticky;
  top:0;
  z-index:1200;
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:14px 20px;
  flex-wrap:wrap;
}

.logo {
  display:flex;
  align-items:center;
  font-weight:700;
  font-size:1.6rem;
  color:#1f1f1f;
}

.logo-circle {
  background-color:#1DA1F2;
  color:#fff;
  font-weight:700;
  font-size:2rem;
  width:2.2rem;
  height:2.2rem;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:50%;
}

.logo-circle {
  transition: 0.3s ease, box-shadow 0.3s ease;
}

.logo-circle:hover {
  box-shadow: 0 0 15px 4px #ff914d, 0 0 25px 8px #ff6a00;
  transform: scale(1.1);
}

.logo-text { margin-left:5px; font-size:1.0rem; }

/* Menu */
.navbar ul {
  display:flex;
  gap:20px;
  flex-wrap: wrap;
  justify-content:center;
  width:auto;
}

.navbar a {
  display:flex;
  align-items:center;
  gap:8px;
  padding:8px 10px;
  border-radius:8px;
  transition:0.16s;
}

.navbar a:hover {
  background: rgba(255,145,77,0.06);
  color:#ff914d;
  transform:translateY(-2px);
}

.nav-icon { color:#7b63e6; width:18px; height:18px; display:flex; align-items:center; justify-content:center; }

/* Hamburger */
.hamburger {
  display:none;
  flex-direction:column;
  gap:4px;
  cursor:pointer;
}

.hamburger div {
  width:28px;
  height:3px;
  background:#7b63e6;
  transition:0.3s;
}

/* Hero */
.hero {
  width:100%;
  max-width:1400px;
  display:grid;
  grid-template-columns:1fr 480px;
  gap:36px;
  align-items:center;
  padding:64px 20px 40px;
  position:relative;
}

.hero-left { padding-right:8px; }

.kicker {
	display:inline-block;
	background: rgba(255,179,102,0.12);
	color:#ff4de7;
	padding:6px 12px;
	border-radius:999px;
	font-weight:600;
	font-size:0.88rem;
	margin-bottom:10px; 
}

.hero h1 { font-size:2.4rem; line-height:1.05; margin-bottom:10px; color:#120f1a; }
.hero .tagline { color:#444; font-size:1.05rem; margin-bottom:18px; }
.hero p { color:#555; margin-bottom:22px; font-size:1rem; }

/* Hero Right (Globe) */
.hero-right {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 540px; /* enough to contain the largest orbit ring */
}

.globe {
  position: relative;
  width: 520px;  /* match your largest orbit ring */
  height: 520px;
  max-width: 100%;
  transform-origin: center;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Starfield Background */
.stars {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.star {
  position: absolute;
  width: 2px;
  height: 2px;
  background: rgb(197, 60, 140);
  border-radius: 50%;
  animation: twinkle 3s infinite;
}

@keyframes twinkle {
  0%, 100% { opacity: 0.3; }
  50% { opacity: 1; }
}


/* Gradient Glow */
.gradient-shimmer {
  position: absolute;
  width: 500px;
  height: 500px;
  background: radial-gradient(circle, 
    rgba(59, 130, 246, 0.15) 0%,
    rgba(139, 92, 246, 0.1) 40%,
    transparent 70%);
  filter: blur(60px);
  animation: shimmerPulse 6s ease-in-out infinite;
  border-radius: 50%;
}

@keyframes shimmerPulse {
  0%, 100% { transform: scale(1); opacity: 0.5; }
  50% { transform: scale(1.3); opacity: 0.8; }
}


/* Central Globe with World Map */
.globe-center {
  position: absolute;
  width: 250px;
  height: 250px;
  background: linear-gradient(135deg, #1e3a8a 0%, #1e40af 50%, #3b82f6 100%);
  border-radius: 50%;
  box-shadow: 
    0 0 80px rgba(59, 130, 246, 0.6),
    0 0 120px rgba(59, 130, 246, 0.3),
    inset -30px -30px 60px rgba(0, 0, 0, 0.3),
    inset 20px 20px 40px rgba(255, 255, 255, 0.1);
  z-index: 10;
  overflow: hidden;
  animation: globeFloat 8s ease-in-out infinite;
  transform-style: preserve-3d;
}

/* World Map Pattern */
.world-map {
  position: absolute;
  width: 100%;
  height: 100%;
  background-image: 
    radial-gradient(circle at 20% 30%, rgba(34, 197, 94, 0.4) 2px, transparent 2px),
    radial-gradient(circle at 60% 20%, rgba(34, 197, 94, 0.4) 2px, transparent 2px),
    radial-gradient(circle at 80% 40%, rgba(34, 197, 94, 0.4) 3px, transparent 3px),
    radial-gradient(circle at 40% 60%, rgba(34, 197, 94, 0.4) 2px, transparent 2px),
    radial-gradient(circle at 70% 70%, rgba(34, 197, 94, 0.4) 2px, transparent 2px),
    radial-gradient(circle at 30% 80%, rgba(34, 197, 94, 0.4) 2px, transparent 2px);
  background-size: 100% 100%;
  animation: rotateMap 30s linear infinite;
  opacity: 0.8;
}

/* Continents Overlay */
.continents {
  position: absolute;
  width: 100%;
  height: 100%;
  background-image: 
    linear-gradient(45deg, transparent 40%, rgba(34, 197, 94, 0.3) 45%, transparent 50%),
    linear-gradient(-45deg, transparent 60%, rgba(34, 197, 94, 0.2) 65%, transparent 70%);
  border-radius: 50%;
  animation: rotateMap 25s linear infinite reverse;
}

/* Atmosphere Glow */
.globe-center::before {
  content: '';
  position: absolute;
  top: -10%;
  left: -10%;
  width: 120%;
  height: 120%;
  background: radial-gradient(circle at 30% 30%, 
    rgba(255, 255, 255, 0.3) 0%,
    transparent 50%);
  border-radius: 50%;
  animation: atmosphereShimmer 4s ease-in-out infinite;
}

/* Glow Ring */
.globe-center::after {
  content: '';
  position: absolute;
  width: 110%;
  height: 110%;
  border: 3px solid rgba(59, 130, 246, 0.3);
  border-radius: 50%;
  top: -5%;
  left: -5%;
  box-shadow: 0 0 30px rgba(59, 130, 246, 0.5);
  animation: ringPulse 3s ease-in-out infinite;
}

@keyframes globeFloat {
  0%, 100% { transform: translateY(0px) rotateX(5deg); }
  50% { transform: translateY(-25px) rotateX(-5deg); }
}

@keyframes rotateMap {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

@keyframes atmosphereShimmer {
  0%, 100% { opacity: 0.5; }
  50% { opacity: 0.9; }
}

@keyframes ringPulse {
  0%, 100% { transform: scale(1); opacity: 0.5; }
  50% { transform: scale(1.05); opacity: 0.8; }
}

/* Orbit Rings */
.orbit-ring {
  position: absolute;
  border-radius: 50%;
  border: 2px dashed rgba(0, 6, 15, 0.89);
  animation: rotateOrbit linear infinite;
}

.orbit-ring1 {
  width: 360px;
  height: 360px;
  animation-duration: 30s;
  border-color: rgba(235, 11, 168, 0.685);
}

.orbit-ring2 {
  width: 440px;
  height: 440px;
  animation-duration: 40s;
  animation-direction: reverse;
  border-color: rgba(20, 40, 219, 0.904);
}

.orbit-ring3 {
  width: 520px;
  height: 520px;
  animation-duration: 50s;
  border-color: rgba(19, 236, 30, 0.938);
}

@keyframes rotateOrbit {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* Orbiting Service Items */
.orbit-path {
  position: absolute;
  width: 100%;
  height: 100%;
  animation: orbitRotate linear infinite;
}

.orbit-path1 { animation-duration: 25s; }
.orbit-path2 { animation-duration: 30s; animation-direction: reverse; }
.orbit-path3 { animation-duration: 22s; }
.orbit-path4 { animation-duration: 35s; animation-direction: reverse; }
.orbit-path5 { animation-duration: 28s; }

@keyframes orbitRotate {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* Service Card on Orbit */
.service-card {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  animation: counterRotate linear infinite, cardFloat 4s ease-in-out infinite;
  cursor: pointer;
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.orbit-path1 .service-card { 
  top: -50px; 
  left: 50%; 
  transform: translateX(-50%);
  animation-duration: 25s, 4s;
}

.orbit-path2 .service-card { 
  top: 50%; 
  right: -50px; 
  transform: translateY(-50%);
  animation-duration: 30s, 4.5s;
  animation-delay: 0s, 0.5s;
}

.orbit-path3 .service-card { 
  bottom: -50px; 
  left: 50%; 
  transform: translateX(-50%);
  animation-duration: 22s, 3.5s;
  animation-delay: 0s, 1s;
}

.orbit-path4 .service-card { 
  top: 50%; 
  left: -50px; 
  transform: translateY(-50%);
  animation-duration: 35s, 5s;
  animation-delay: 0s, 1.5s;
}

.orbit-path5 .service-card { 
  top: 20%; 
  right: 20%; 
  animation-duration: 28s, 4s;
  animation-delay: 0s, 2s;
}

@keyframes counterRotate {
  from { transform: rotate(0deg); }
  to { transform: rotate(-360deg); }
}

@keyframes cardFloat {
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(-15px); }
}

/* Icon Container */
.service-icon {
  width: 80px;
  height: 80px;
  background: linear-gradient(135deg, 
    rgba(59, 130, 246, 0.2) 0%,
    rgba(99, 102, 241, 0.15) 100%);
  backdrop-filter: blur(20px);
  border: 2px solid rgba(59, 130, 246, 0.4);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 
    0 8px 32px rgba(0, 0, 0, 0.3),
    inset 0 0 20px rgba(255, 255, 255, 0.05),
    0 0 30px rgba(59, 130, 246, 0.3);
  transition: all 0.4s ease;
  position: relative;
}

.service-icon::before {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, 
    rgba(255, 255, 255, 0.2) 0%,
    transparent 60%);
  animation: iconShimmer 3s ease-in-out infinite;
}

@keyframes iconShimmer {
  0%, 100% { opacity: 0.4; }
  50% { opacity: 0.8; }
}

.service-card:hover .service-icon {
  transform: scale(1.15) translateY(-5px);
  background: linear-gradient(135deg, 
    rgba(59, 130, 246, 0.4) 0%,
    rgba(99, 102, 241, 0.3) 100%);
  border-color: rgba(59, 130, 246, 0.8);
  box-shadow: 
    0 12px 48px rgba(59, 130, 246, 0.4),
    inset 0 0 30px rgba(255, 255, 255, 0.1),
    0 0 50px rgba(59, 130, 246, 0.6);
}

.orbit-icon {
  width: 36px;
  height: 36px;
  color: #60a5fa;
  filter: drop-shadow(0 0 8px rgba(96, 165, 250, 0.6));
  z-index: 1;
}

/* Service Label */
.service-label {
  background: rgba(17, 24, 39, 0.9);
  backdrop-filter: blur(10px);
  padding: 8px 16px;
  border-radius: 20px;
  border: 1px solid rgba(59, 130, 246, 0.3);
  color: #e0e7ff;
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  box-shadow: 
    0 4px 20px rgba(0, 0, 0, 0.4),
    0 0 15px rgba(59, 130, 246, 0.2);
  transition: all 0.3s ease;
  text-shadow: 0 0 10px rgba(96, 165, 250, 0.5);
}

.service-card:hover .service-label {
  background: rgba(59, 130, 246, 0.2);
  border-color: rgba(59, 130, 246, 0.6);
  color: #fff;
  transform: scale(1.05);
  box-shadow: 
    0 6px 30px rgba(0, 0, 0, 0.5),
    0 0 25px rgba(59, 130, 246, 0.4);
}

/* Center Button */
.center-label {
  position: absolute;
  bottom: -80px;
  left: 50%;
  transform: translateX(-50%);
  background: linear-gradient(135deg, 
    rgba(59, 130, 246, 0.2) 0%,
    rgba(99, 102, 241, 0.2) 100%);
  backdrop-filter: blur(15px);
  padding: 14px 32px;
  border-radius: 30px;
  border: 2px solid rgba(59, 130, 246, 0.4);
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  text-decoration: none;
  box-shadow: 
    0 8px 32px rgba(0, 0, 0, 0.3),
    0 0 30px rgba(59, 130, 246, 0.3);
  transition: all 0.4s ease;
  cursor: pointer;
  text-shadow: 0 0 15px rgba(96, 165, 250, 0.8);
  animation: centerPulse 4s ease-in-out infinite;
}

.center-label:hover {
  background: linear-gradient(135deg, 
    rgba(59, 130, 246, 0.4) 0%,
    rgba(99, 102, 241, 0.3) 100%);
  transform: translateX(-50%) scale(1.08) translateY(-3px);
  box-shadow: 
    0 12px 48px rgba(0, 0, 0, 0.4),
    0 0 50px rgba(59, 130, 246, 0.6);
  border-color: rgba(59, 130, 246, 0.8);
}

@keyframes centerPulse {
  0%, 100% { 
    box-shadow: 
      0 8px 32px rgba(0, 0, 0, 0.3),
      0 0 30px rgba(59, 130, 246, 0.3);
  }
  50% { 
    box-shadow: 
      0 8px 32px rgba(0, 0, 0, 0.3),
      0 0 50px rgba(59, 130, 246, 0.6);
  }
}

/* Cards, testimonials, footer styles remain the same from your previous code */
/* Service Cards */
.cards {
	margin: 36px auto 10px;
	width: 100%;
	max-width: 1200px;
	display: flex;
	gap: 18px;
	justify-content: center;
	align-items: stretch;
	padding: 0 16px;
}

.card {
	background: #fff;
	border-radius: 14px;
	padding: 20px;
	width: 300px;
	box-shadow: 0 8px 24px rgba(9, 6, 30, 0.06);
	transition: .28s;
	display: flex;
	flex-direction: column;
	gap: 12px;
	align-items: flex-start;
}

.card:hover {
	transform: translateY(-8px);
	box-shadow: 0 18px 40px rgba(9, 6, 30, 0.12);
}

.card .icon {
	width: 46px;
	height: 46px;
	border-radius: 10px;
	background: linear-gradient(180deg, #f6efff, #fff6f0);
	display: flex;
	align-items: center;
	justify-content: center;
}

.card h4 {
	font-size: 1.1rem;
	margin-bottom: 4px;
	font-weight: 700;
	color: #111;
}

.card p {
	color: #555;
	font-size: 0.95rem;
	line-height: 1.45;
	margin-bottom: 8px;
}

.card .features {
	margin-top: 6px;
	width: 100%;
}

.card .features li {
	list-style: none;
	padding-left: 28px;
	position: relative;
	margin-bottom: 8px;
	color: #555;
}

.card .features li::before {
	content: '✔';
	position: absolute;
	left: 0;
	top: 0;
	color: #ffcc33;
	background: #ff33dd;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	font-weight: 700;
	font-size: 0.7rem;
	box-shadow: 0 0 6px rgba(255, 204, 51, 0.3);
}

.card .icon img {
  width: 60px;
  height: 60px;
  object-fit: contain;
   display: block;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,0.2));
  transition: transform 0.3s ease, filter 0.3s ease;
}



/* just test */
.profile-icon {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: linear-gradient(180deg, #f6efff, #fff6f0);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  box-shadow: 0 0 10px rgba(123, 99, 230, 0.2);
  margin: 0 auto;
  position: relative;
}

.profile-icon img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease, filter 0.3s ease;
}

.profile-icon:hover img {
  transform: scale(1.08);
  filter: brightness(1.1) drop-shadow(0 0 8px rgba(123,99,230,0.3));
}


.btn-transparent {
  display: block;
  margin: 14px auto 0; /* centers the button horizontally */
  padding: 6px 22px; /* slimmer look */
  border: 1.8px solid rgba(155, 89, 182, 0.8); /* soft purple border */
  border-radius: 40px; /* rounded capsule shape */
  background: transparent;
  color: #9b59b6;
  font-weight: 600;
  font-size: 0.9rem;
  text-decoration: none;
  text-align: center;
  transition: all 0.3s ease;
}

.btn-transparent:hover {
  background: rgba(155, 89, 182, 0.1);
  color: #8e44ad;
  border-color: #8e44ad;
  box-shadow: 0 0 12px rgba(155, 89, 182, 0.3);
}
/* Testimonials */
.testimonials {
	margin: 28px auto 56px;
	width: 100%;
	max-width: 1000px;
	display: grid;
	place-items: center;
	padding: 0 16px;
}

.test-wrap {
	position: relative;
	width: 100%;
	max-width: 880px;
	min-height: 64px;
}

.test-item {
	position: absolute;
	left: 0;
	right: 0;
	opacity: 0;
	transform: translateY(8px);
	padding: 14px 18px;
	background: rgba(255, 255, 255, 0.9);
	border-radius: 12px;
	box-shadow: 0 8px 20px rgba(9, 6, 30, 0.06);
	font-size: 0.98rem;
	color: #222;
}

.test-item:nth-child(1) {
	animation: showTest 9s infinite;
	animation-delay: 0s;
}

.test-item:nth-child(2) {
	animation: showTest 9s infinite;
	animation-delay: 3s;
}

.test-item:nth-child(3) {
	animation: showTest 9s infinite;
	animation-delay: 6s;
}

@keyframes showTest {
	0% {
		opacity: 0;
		transform: translateY(8px);
	}

	8% {
		opacity: 1;
		transform: translateY(0);
	}

	30% {
		opacity: 1;
		transform: translateY(0);
	}

	38% {
		opacity: 0;
		transform: translateY(-8px);
	}

	100% {
		opacity: 0;
		transform: translateY(-8px);
	}
}

/* Footer */
footer {
	position: fixed;
	bottom: 0;
	left: 0;
	width: 100%;
	background: #a796e6;
	display: flex;
	justify-content: center;
	gap: 12px;
	align-items: center;
	padding: 10px 12px;
	box-shadow: 0 -6px 22px rgba(0, 0, 0, 0.45);
	z-index: 1200;
}

.site-footer {
  text-align: center;
  padding: 20px 10px;
}

.footer-icons {
  margin-bottom: 12px; /* small gap between icons and text */
}

.footer-text {
  font-size: 11px;
  color: #440436;
  margin: 0; /* keeps text snug below icons */
}









.social-icon {
	width: 24px;
	height: 24px;
	border-radius: 50%;
	background: rgba(150, 6, 131, 0.06);
	display: flex;
	align-items: center;
	justify-content: center;
	transition: .18s;
}

.social-icon img {
	width: 20px;
	height: 20px;
	filter: invert(1) saturate(0);
	
}


.social-icon img:hover {
  transform: scale(1.1);
  opacity: 1;
}

.social-icon:hover {
	background: rgba(255, 255, 255, 0.12);
	transform: translateY(-4px);
}


/* ===============================
   RESPONSIVE MEDIA QUERIES (CLEAN)
================================ */

/* <=1100px */
@media (max-width:1100px) {
  .hero {
    grid-template-columns: 1fr 360px;
    gap: 20px;
    padding: 52px 16px 26px;
  }

  .hero-right {
    height: 300px;
  }

  .cards {
    gap: 14px;
  }
}

/* <=860px */
@media (max-width:860px) {
  /* Navbar */
  .navbar {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }

  .hamburger {
    display: flex;
  }

  .navbar ul {
    flex-direction: column;
    width: 100%;
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    transition: max-height 0.4s ease, opacity 0.4s ease;
  }

  .navbar ul.show {
    max-height: 500px;
    opacity: 1;
  }

  /* Hero */
  .hero {
    grid-template-columns: 1fr;
    padding: 36px 16px 20px;
  }

  .hero-right {
    order: -1;
    width: 100%;
    height: auto; /* Fixed: removed 100vh */
    margin: 16px 0 24px;
    padding-top: 16px;
  }

  /* Globe 
  .globe {
    width: 320px;
    height: 320px;
  }*/

/* ===== DESKTOP GLOBE SIZE (FIXED) ===== */
.globe {
  position: relative;
  width: 220px;
  height: 220px;
  max-width: 100%;
  max-height: 100%;
}

  /* Cards */
  .cards {
    flex-direction: column;
    align-items: center;
  }

  .card {
    width: 92%;
    max-width: 420px;
  }
}

/* <=768px (additional small adjustments) */
@media (max-width:768px) {
  .globe {
    width: 350px;
    height: 350px;
  }

  .globe-center {
    width: 180px;
    height: 180px;
  }

.orbit-ring1 { width: 75%; height: 75%; }
.orbit-ring2 { width: 88%; height: 88%; }
.orbit-ring3 { width: 100%; height: 100%; }


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

  .orbit-icon {
    width: 28px;
    height: 28px;
  }

  .service-label {
    font-size: 11px;
    padding: 6px 12px;
  }

  .center-label {
    font-size: 13px;
    padding: 10px 20px;
  }
}

/* <=480px */
@media (max-width:480px) {
  .hero h1 {
    font-size: 1.6rem;
  }

  .globe {
    width: 260px;
    height: 260px;
  }

  .btn-primary {
    padding: 10px 16px;
  }

  footer {
    padding: 10px;
    gap: 10px;
  }
}