/* 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);}
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; }
/*
.logo:hover .logo-text {
  text-shadow: 0 0 6px #9b36af, 0 0 12px #7b63e6;
  color: #9b36af;
  transition: 0.3s ease;
}
  */
/* 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 {
  border-radius:18px;
  height:360px;
  position:relative;
  overflow:visible;
  display:flex;
  align-items:center;
  justify-content:center;
}

.gradient-shimmer {
  position:absolute;
  inset:0;
  background:linear-gradient(120deg, rgba(196,160,255,0.18), rgba(189,131,255,0.25)30%, rgba(146,100,255,0.25)65%);
  animation: shimmer 12s linear infinite;
  mix-blend-mode: screen;
  filter: blur(12px);
}

@keyframes shimmer {
  0% {transform:translateX(-10%) translateY(-5%) rotate(-3deg) scale(1);}
  50% {transform:translateX(12%) translateY(6%) rotate(3deg) scale(1.03);}
  100% {transform:translateX(-10%) translateY(-5%) rotate(-3deg) scale(1);}
}

/* Globe */
.globe {
  position:relative;
  width:280px;
  height:280px;
  border-radius:50%;
  background: radial-gradient(circle at center,#d1b3ff,rgba(189,131,255,0.2));
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:0 0 40px rgba(123,99,230,0.3);
}

.globe-center {
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  color:#9b36af;
  padding:10px 16px;
  border-radius:28px;
  font-weight:700;
  font-size:0.9rem;
  text-align:center;
  pointer-events:none;
}

.orbit-circle { position:absolute; top:50%; left:50%; border:1px dashed rgba(123,99,230,0.5); border-radius:50%; transform:translate(-50%,-50%); box-shadow:0 0 12px rgba(123,99,230,0.3);}
.orbit-circle1 { width:260px; height:260px; }
.orbit-circle2 { width:220px; height:220px; }
.orbit-circle3 { width:180px; height:180px; }
.orbit-circle4 { width:140px; height:140px; }
.orbit-circle5 { width:100px; height:100px; }

.orbit { position:absolute; top:50%; left:50%; transform-origin:center center; }
.orbit1 { width:260px; height:260px; animation:rotate1 12s linear infinite; }
.orbit2 { width:220px; height:220px; animation:rotate2 15s linear infinite reverse; }
.orbit3 { width:180px; height:180px; animation:rotate3 18s linear infinite; }
.orbit4 { width:140px; height:140px; animation:rotate4 22s linear infinite reverse; }
.orbit5 { width:100px; height:100px; animation:rotate5 25s linear infinite; }

.orbit-item { position:absolute; top:0; left:50%; transform:translateX(-50%); cursor:pointer; z-index:10; filter:drop-shadow(0 0 8px rgba(123,99,230,0.45)); }
.orbit-item:hover { transform:translateX(-50%) scale(1.4) rotate(10deg); color:#ff914d; }
.orbit-icon { width:28px; height:28px; color:#7b63e6; }

@keyframes rotate1 {0%{transform:translate(-50%,-50%) rotate(0deg);}100%{transform:translate(-50%,-50%) rotate(360deg);} }
@keyframes rotate2 {0%{transform:translate(-50%,-50%) rotate(0deg);}100%{transform:translate(-50%,-50%) rotate(360deg);} }
@keyframes rotate3 {0%{transform:translate(-50%,-50%) rotate(0deg);}100%{transform:translate(-50%,-50%) rotate(360deg);} }
@keyframes rotate4 {0%{transform:translate(-50%,-50%) rotate(0deg);}100%{transform:translate(-50%,-50%) rotate(360deg);} }
@keyframes rotate5 {0%{transform:translate(-50%,-50%) rotate(0deg);}100%{transform:translate(-50%,-50%) rotate(360deg);} }

/* Responsive */
@media(max-width:860px){
  .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 { grid-template-columns:1fr; padding:36px 16px 20px; }
  .hero-right { order:-1; height:240px; margin-bottom:18px; }
}

@media(max-width:480px){
  .hero h1 { font-size:1.5rem; }
}

/* 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(max-width:1100px) {
	.hero {
		grid-template-columns: 1fr 360px;
		gap: 20px;
		padding: 52px 16px 26px;
	}

	.hero-right {
		height: 300px;
	}

	.cards {
		gap: 14px;
	}
}

@media(max-width:860px) {
	.hero {
		grid-template-columns: 1fr;
		padding: 36px 16px 20px;
	}

	.hero-right {
		order: -1;
		height: 220px;
		margin-bottom: 18px;
	}

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

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

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

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

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