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

body {
  font-family: 'Poppins', sans-serif;
  background: url('servicebg.png') center/cover no-repeat fixed;
  color: #fff;
}

body::before {
  content: "";
  position: fixed;
  top: 0; left: 0; width: 100%; height: 100%;
  background: rgba(255,255,255,0.1);
  backdrop-filter: blur(5px);
  z-index: -1;
}

.main-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 40px;
}

.logo {
  height: 75px;
}

.back-btn {
  font-size: 16px;
  font-weight:600;
  background: rgba(255,255,255,0.2);
  color:#fff;
  padding:10px 20px;
  border-radius:10px;
  text-decoration:none;
  backdrop-filter: blur(5px);
  transition:0.3s;
  position: relative;
  overflow: hidden;
}
.back-btn:hover { 
  background: rgba(255,255,255,0.3);
  transform:scale(1.05); 
}
.back-btn::after {
  content: "";
  position: absolute;
  top: -50%; left: -50%;
  width: 200%; height: 200%;
  background: radial-gradient(circle, rgba(255,255,255,0.2), transparent 60%);
  transform: scale(0);
  transition: transform 0.6s ease;
}
.back-btn:hover::after {
  transform: scale(1);
}

.hero { 
  display:flex; 
  flex-wrap:wrap; 
  align-items:center; 
  justify-content:space-between;
  gap:30px; 
  padding:60px 20px; 
}

.hero-left { 
  flex:1; 
  max-width:600px; 
  text-align:left;
}

.hero-left h1 { 
  font-size:42px; 
  margin-bottom:20px; 
  color:#fff; 
}

.hero-left p { 
  font-size:18px; 
  margin-bottom:25px; 
  color:#fff; 
}

.hero-right { 
  flex:1; 
  max-width:420px; 
  text-align:right;
}

.hero-right img { 
  max-width:100%; 
  border-radius:14px; 
  box-shadow: 0 0 20px rgba(255,255,255,0.4);
  transition: transform 0.4s, box-shadow 0.4s;
  animation: floaty 4s ease-in-out infinite;
}
.hero-right img:hover {
  transform: rotateY(8deg) scale(1.03);
  box-shadow: 0 15px 30px rgba(255,255,255,0.6);
}

.section { 
  padding:60px 20px; 
  max-width:1200px; 
  margin:auto; 
  text-align:center; 
}

.section-box {
  background: rgba(255,255,255,0.1);
  backdrop-filter: blur(12px);
  border-radius:14px;
  padding:50px 30px;
  margin:40px auto;
  max-width:900px;
  border: 1px solid rgba(255,255,255,0.15);
  position: relative;
}
.section-box::before {
  content: "";
  position: absolute;
  top: -2px; left: -2px; right: -2px; bottom: -2px;
  border-radius: inherit;
  background: linear-gradient(120deg, rgba(255,255,255,0.5), transparent, rgba(255,255,255,0.5));
  z-index: -1;
  opacity: 0.3;
  animation: glowMove 3s linear infinite;
}

.section-title.center {
  color:#fff;
  text-align:center;
  margin-bottom:20px;
}
.section-title.center::after { 
  content:''; 
  display:block; 
  height:3px; 
  width:60px; 
  background: rgba(255,255,255,0.8);
  margin:10px auto 0; 
  border-radius:20px; 
}

.power { 
  font-size:18px; 
  color:#fff; 
  line-height:1.8; 
  max-width:900px; 
  margin:20px auto 0; 
  text-align:center;
}

.cards { 
  display:flex; 
  justify-content:center; 
  gap:30px; 
  flex-wrap:wrap; 
  margin-top:40px; 
}

.card {
  background: rgba(255,255,255,0.15);
  backdrop-filter: blur(10px);
  padding:25px; 
  border-radius:14px;
  width:260px; 
  text-align:center;
  box-shadow:0 8px 20px rgba(255,255,255,0.2);
  transition: transform 0.4s, box-shadow 0.4s;
  border: 1px solid rgba(255,255,255,0.15);
  position: relative;
}
.card:hover {
  transform: translateY(-10px) rotateX(5deg) scale(1.03);
  box-shadow:0 15px 30px rgba(255,255,255,0.5);
}
.card::before {
  content: "";
  position: absolute;
  top: -2px; left: -2px; right: -2px; bottom: -2px;
  border-radius: inherit;
  background: linear-gradient(120deg, rgba(255,255,255,0.5), transparent, rgba(255,255,255,0.5));
  z-index: -1;
  opacity: 0.3;
  animation: glowMove 3s linear infinite;
}

.card i { 
  font-size:30px; 
  color:#fff; 
  margin-bottom:12px; 
}

.card p { 
  font-size:16px; 
  color:#fff; 
}

.zoom-btn:hover {
  transform: scale(1.05);
  transition: 0.3s ease;
}

.cta-btn { 
  display:inline-block; 
  background: rgba(255,255,255,0.2);
  color:#fff; 
  padding:14px 30px; 
  border-radius:10px; 
  font-weight:600; 
  text-decoration:none; 
  transition:0.3s, transform 0.3s;
  position: relative;
  overflow: hidden;
}
.cta-btn:hover { 
  background: rgba(255,255,255,0.3);
  transform: scale(1.05) rotateX(3deg);
}
.cta-btn::after {
  content: "";
  position: absolute;
  top: -50%; left: -50%;
  width: 200%; height: 200%;
  background: radial-gradient(circle, rgba(255,255,255,0.2), transparent 60%);
  transform: scale(0);
  transition: transform 0.6s ease;
}
.cta-btn:hover::after {
  transform: scale(1);
}

.faq-box { 
  max-width:900px; 
  margin:auto; 
}

.faq-item { 
  background:rgba(255,255,255,0.05); 
  margin-bottom:20px; 
  border-radius:10px; 
  overflow:hidden; 
  border:1px solid rgba(255,255,255,0.2); 
}

.faq-question { 
  padding:18px 20px; 
  font-weight:600; 
  font-size:16px; 
  cursor:pointer; 
  background: rgba(255,255,255,0.1); 
  color:#fff; 
  text-align:center;
}

.faq-question:hover { 
  background: rgba(255,255,255,0.3); 
}

.faq-answer { 
  max-height:0; 
  overflow:hidden; 
  padding:0 20px; 
  background:rgba(255,255,255,0.05); 
  color:#fff; 
  font-size:16px; 
  transition:all 0.3s ease; 
  text-align:center;
}

.faq-item.active .faq-answer { 
  max-height:400px; 
  padding:18px 20px; 
  transition: max-height 0.5s ease, padding 0.3s ease;
}

.final-cta { 
  background: rgba(255,255,255,0.08); 
  backdrop-filter: blur(12px); 
  text-align:center; 
  padding:60px 20px; 
  border-radius:14px; 
  border: 1px solid rgba(255,255,255,0.15);
  position: relative;
}
.final-cta::before {
  content: "";
  position: absolute;
  top: -2px; left: -2px; right: -2px; bottom: -2px;
  border-radius: inherit;
  background: linear-gradient(120deg, rgba(255,255,255,0.5), transparent, rgba(255,255,255,0.5));
  z-index: -1;
  opacity: 0.3;
  animation: glowMove 3s linear infinite;
}
.final-cta h2, .final-cta p { 
  color:#fff; 
  text-align:center;
}

@media (max-width:992px) {
  .hero-right img { max-width:350px; }
  .cards { flex-direction:column; align-items:center; }
}

@media (max-width:768px) {
  .hero { flex-direction:column; text-align:center; }
  .hero-left, .hero-right { text-align:center; }
  .hero-right img { max-width:300px; margin:20px auto; }
}

@media (max-width:480px) {
  .hero-left h1 { font-size:32px; }
  .hero-left p { font-size:16px; }
  .card { width:90%; padding:20px; }
  .cta-btn { padding:12px 25px; font-size:16px; }
}

/* === EXTRA ANIMATIONS === */

/* Fade in + slide up */
.fade-in {
  opacity: 0;
  transform: translateY(30px);
  transition: all 0.8s ease-out;
}
.fade-in.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Floating hero image */
@keyframes floaty {
  0% { transform: translateY(0px); }
  50% { transform: translateY(-12px); }
  100% { transform: translateY(0px); }
}

/* Glow border animation */
@keyframes glowMove {
  0% { background-position: 0% 50%; }
  100% { background-position: 100% 50%; }
}