/* ============================================
   TABLE OF CONTENTS
   ============================================
   1. RESET & GLOBAL STYLES
   2. TOP BAR STYLES
   3. HEADER / NAVIGATION STYLES
   4. FOOTER STYLES
   5. BUTTONS & GLOBAL COMPONENTS
   6. HERO SECTION
   7. HOME PAGE STYLES
   8. SERVICES PAGE STYLES
   9. PORTFOLIO PAGE STYLES
   10. PRICING PAGE STYLES
   11. CONTACT PAGE STYLES
   12. ABOUT PAGE STYLES
   13. RESPONSIVE STYLES
   14. ANIMATIONS
   ============================================ */

/* ========== 1. RESET & GLOBAL STYLES ========== */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: 'Poppins', 'Segoe UI', Arial, sans-serif;
  background: #ffffff;
  line-height: 1.6;
  color: #1a1a2e;
  overflow-x: hidden;
}

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

section {
  overflow-x: hidden;
}

/* ========== 2. TOP BAR STYLES ========== */
.topbar {
  background: #000000;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 60px;
  position: relative;
  gap: 10px;
}

/* CENTER TEXT PERFECT CENTER */
.top-center {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  font-weight: 600;
  letter-spacing: 1px;
  color: #ffd700;
  white-space: nowrap;
}


/* LEFT SOCIAL ICONS */
.top-left {
  display: flex;
  gap: 15px;
  z-index: 2;
color: #ffd700;
	font-weight: 600;
	align-items: center;
	
}

.top-left a {
  color: #fff;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.15);
  transition: all 0.3s ease;
}

.top-left a:hover {
  background: #ffd700;
  color: #5b2c8c;
  transform: translateY(-3px) rotate(360deg);
}

/* RIGHT INFO */
.top-right {
  display: flex;
  gap: 25px;
  flex-wrap: wrap;
  z-index: 2;
}

.top-right span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  transition: all 0.3s ease;
  cursor: pointer;
}

.top-right span:hover {
  transform: translateX(3px);
  color: #ffd700;
}

.top-right i {
  color: #ffd700;
}


/* =========================
   MOBILE TOPBAR
========================= */

@media (max-width: 768px) {

  .top-left,
  .top-right {
    display: none;
  }

  .topbar {
    justify-content: center;
    text-align: center;
    padding: 12px 15px;
  }

  .top-center {
    position: static;
    transform: none;
    width: 100%;
    font-size: 8px;
  }
}


/* =========================
   HEADER / NAVIGATION
========================= */

.header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 40px;
  background: #ffffff;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
  z-index: 1000;
  gap: 15px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
  min-height: 80px;
}

/* LOGO */
.logo {
  display: flex;
  align-items: center;
}

.logo-img {
  height: 100px;
  width: auto;
  object-fit: contain;
  transform: scale(1.8);
  transform-origin: left center;
  transition: all 0.3s ease;
}

.logo-img:hover {
  transform: scale(1.9);
}


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

.navbar {
  display: flex;
  gap: 5px;
  background: #f5f5f5;
  padding: 5px 15px;
  border-radius: 50px;
}

.navbar a {
  text-decoration: none;
  padding: 8px 22px;
  color: #333;
  font-weight: 500;
  border-radius: 30px;
  transition: all 0.3s ease;
  font-size: 14px;
  position: relative;
}

/* HOVER LINE */
.navbar a::before {
  content: '';
  position: absolute;
  bottom: 5px;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 2px;
  background: #007bff;
  transition: width 0.3s ease;
}

.navbar a:hover::before {
  width: 60%;
}

.navbar a:hover {
  color: #007bff;
}

/* ACTIVE LINK */
.navbar a.active {
  background: #007bff;
  color: #fff;
}


/* =========================
   TABLET
========================= */

@media (max-width: 1024px) {

  .header {
    padding: 15px 25px;
  }

  .logo-img {
    transform: scale(1.5);
  }
}


/* =========================
   MOBILE HEADER
========================= */

@media (max-width: 768px) {

  /* TOPBAR KE NEECHY SPACE KAM */
  .topbar {
    padding: 8px 15px;
    margin-bottom: 0;
  }

  /* HEADER COMPACT */
  .header {
    flex-direction: column;
    justify-content: center;
    align-items: center;

    /* yahan main spacing kam ki */
    padding: 0;
    gap: 0;

    min-height: auto;
    margin-top: 0;
  }

  /* LOGO AREA */
  .logo {
    width: 100%;
    display: flex;
    justify-content: center;

    /* logo ke neeche space remove */
    margin: 0;
    padding: 0;
    line-height: 0;
  }

  /* LOGO SIZE */
  .logo-img {
    height: 150px;
    width: auto;

    /* same size rakha */
    transform: scale(1.2);

    transform-origin: center;

    /* extra spacing remove */
    margin: -15px 0 -20px 0;

    display: block;
  }

  .logo-img:hover {
    transform: scale(1.25);
  }

  /* NAVBAR */
  .navbar {
    width: 100%;
    justify-content: center;
    flex-wrap: wrap;

    /* navbar ko logo ke close laya */
    margin-top: -10px;

    border-radius: 18px;
    padding: 6px 8px;
    gap: 3px;
  }

  .navbar a {
    padding: 6px 12px;
    font-size: 13px;
  }
}


/* =========================
   EXTRA SMALL MOBILE
========================= */

@media (max-width: 480px) {

  .logo-img {
    height: 150px;
    transform: scale(1.2);

    /* aur compact */
    margin: -20px 0 -25px 0;
  }

  .navbar {
    margin-top: -15px;
    padding: 10px;
  }

  .navbar a {
    font-size: 12px;
    padding: 5px 10px;
  }
}

/* ========== 4. FOOTER STYLES ========== */
.footer {
  background: linear-gradient(135deg, #1a1a2e, #2d1b4e, #1a1a2e);
  color: #fff;
  padding: 60px 60px 25px;
  margin-top: 70px;
  position: relative;
}

.footer::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, #7b2cbf, #9b4dff, #ffd700);
}

.footer-top {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 40px;
  margin-bottom: 40px;
}

/* Logo heading */
.footer-column h2 {
  font-size: 24px;
  color: #fff;
  margin-bottom: 15px;
}

/* Section headings */
.footer-column h3 {
  font-size: 18px;
  color: #fff;
  margin-bottom: 15px;
  position: relative;
  display: inline-block;
}

.footer-column h3::after {
  content: '';
  position: absolute;
  bottom: -5px;
  left: 0;
  width: 35px;
  height: 2px;
  background: #9b4dff;
}

/* Text */
.footer-column p {
  font-size: 13px;
  line-height: 1.7;
  color: #ccc;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 8px;
}

/* LIST LINKS (Services / Quick Links) */
.footer-column ul {
  list-style: none;
}

.footer-column ul li {
  margin-bottom: 10px;
}

.footer-column ul li a {
  text-decoration: none;
  color: #fff;   
  font-size: 13px;
  transition: 0.3s;
}

.footer-column ul li a:hover {
  color: #9b4dff;
  padding-left: 6px;
}

/* Social */
.footer-social {
  display: flex;
  gap: 12px;
  margin-top: 15px;
}

.footer-social a {
  color: #fff;
  background: rgba(255,255,255,0.1);
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: 0.3s;
}

.footer-social a:hover {
  background: #9b4dff;
  transform: translateY(-3px);
}

/* Bottom */
.footer-bottom {
  text-align: center;
  border-top: 1px solid rgba(255,255,255,0.1);
  padding-top: 20px;
  font-size: 12px;
  color: #aaa;
}

/* Terms & Conditions link */
.footer-link {
  color: #fff;   /* ✅ FIX: WHITE */
  text-decoration: none;
  margin-left: 5px;
  transition: 0.3s;
}

.footer-link:hover {
  color: #9b4dff;
  text-decoration: underline;
}

/* MOBILE */
@media (max-width: 768px) {
  .footer {
    padding: 40px 25px 20px;
  }

  .footer-column {
    text-align: center;
  }

  .footer-column p {
    justify-content: center;
  }

  .footer-column h3::after {
    left: 50%;
    transform: translateX(-50%);
  }

  .footer-social {
    justify-content: center;
  }
}



/* ========== 5. BUTTONS & GLOBAL COMPONENTS ========== */
.btn {
  display: inline-block;
  padding: 12px 35px;
  background: linear-gradient(135deg, #7b2cbf, #9b4dff);
  color: #fff;
  border-radius: 40px;
  text-decoration: none;
  font-weight: 600;
  transition: all 0.3s;
  border: none;
  cursor: pointer;
  font-size: 14px;
  position: relative;
  overflow: hidden;
  z-index: 1;
}

.btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, #9b4dff, #ffd700);
  transition: left 0.3s;
  z-index: -1;
}

.btn:hover::before {
  left: 0;
}

.btn:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 25px rgba(123, 44, 191, 0.4);
  color: #fff;
}


/* ========== 6. HERO SECTION ========== */
.hero-section {
  position: relative;
  min-height: 80vh;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  color: #fff;
  overflow: hidden;
}

.hero-video {
  position: absolute;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -2;
  filter: brightness(0.6);
}

.hero-overlay {
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: -1;
}

.hero-container {
  position: relative;
  max-width: 650px;
  margin-left: 80px;
  animation: fadeUp 0.8s ease;
}

.hero-container h1 {
  font-size: 52px;
  line-height: 1.2;
  margin-bottom: 20px;
}

.hero-container h1 span {
  background: linear-gradient(135deg, #9b4dff, #ffd700);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

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

@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(40px);
  }

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

@media (max-width: 1024px) {
  .hero-container {
    margin-left: 50px;
  }

  .hero-container h1 {
    font-size: 44px;
  }
}

@media (max-width: 768px) {
  .hero-section {
    min-height: 60vh;
  }

  .hero-container {
    margin-left: 25px;
    margin-right: 25px;
    text-align: center;
  }

  .hero-container h1 {
    font-size: 32px;
  }
}

/* ========== 7. HOME PAGE STYLES ========== */

/* --- Home Features Section --- */
.home-features {
  padding: 70px 20px;
  background: #ffffff;
  text-align: center;
}

.home-features h2,
.home-services h2,
.home-portfolio h2,
.home-pricing h2 {
  font-size: 38px;
  background: linear-gradient(135deg, #1a1a2e, #7b2cbf);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  margin-bottom: 12px;
}

.section-subtitle {
  color: #666;
  margin-bottom: 45px;
  font-size: 16px;
}

.feature-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 30px;
  max-width: 1200px;
  margin: 0 auto;
}

.feature-card {
  background: #ffffff;
  padding: 35px 20px;
  border-radius: 20px;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.05);
  transition: all 0.3s;
  border: 1px solid rgba(123, 44, 191, 0.1);
}

.feature-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 15px 35px rgba(123, 44, 191, 0.15);
  border-color: #7b2cbf;
}

.feature-card i {
  font-size: 45px;
  background: linear-gradient(135deg, #7b2cbf, #9b4dff);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  margin-bottom: 18px;
}

.feature-card h3 {
  font-size: 20px;
  margin-bottom: 10px;
  color: #1a1a2e;
}

.feature-card p {
  font-size: 14px;
  color: #666;
  margin: 0;
}

/* --- Home Services Section --- */
.home-services {
  padding: 70px 20px;
  background: #faf5ff;
  text-align: center;
}

.service-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 30px;
  max-width: 1200px;
  margin: 0 auto;
}

.service-card {
  background: #ffffff;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.05);
  transition: all 0.3s;
}

.service-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 15px 35px rgba(123, 44, 191, 0.2);
}

.service-card img {
  width: 100%;
  height: auto;
  /* FIX */
  object-fit: contain;
  /* FIX */
  padding: 10px;
}

.service-card:hover img {
  transform: scale(1.05);
}

.service-card h3 {
  font-size: 20px;
  margin: 18px 0 8px;
  padding: 0 15px;
  color: #1a1a2e;
}

.service-card p {
  font-size: 13px;
  color: #666;
  padding: 0 15px 20px;
  margin: 0;
}

/* --- Home Portfolio Section --- */
.home-portfolio {
  padding: 70px 20px;
  background: #ffffff;
  text-align: center;
}

.portfolio-preview {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 25px;
  max-width: 1200px;
  margin: 0 auto;
}

.portfolio-item {
  background: #ffffff;
  border-radius: 15px;
  overflow: hidden;
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05);
  transition: all 0.3s;
  border: 1px solid rgba(123, 44, 191, 0.1);
}

.portfolio-item:hover {
  transform: translateY(-5px);
  box-shadow: 0 12px 28px rgba(123, 44, 191, 0.15);
  border-color: #7b2cbf;
}

.portfolio-item img {
  width: 100%;
  height: 80%;
  object-fit: contain;
  padding: 10px;
}

.portfolio-item:hover img {
  transform: scale(1.05);
}

.portfolio-item h4 {
  padding: 15px;
  font-size: 15px;
  color: #1a1a2e;
  font-weight: 600;
}

/* --- Home Pricing Preview Section --- */
.home-pricing {
  padding: 70px 20px;
  background: #faf5ff;
  text-align: center;
}

.pricing-preview {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 30px;
  max-width: 1200px;
  margin: 0 auto;
}

.pricing-preview .pricing-card {
  background: #ffffff;
  padding: 30px 20px;
  border-radius: 20px;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.05);
  transition: all 0.3s;
  position: relative;
}

.pricing-preview .pricing-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 35px rgba(123, 44, 191, 0.15);
}

.pricing-preview .pricing-card.popular {
  border: 2px solid #9b4dff;
  background: linear-gradient(135deg, #ffffff, #faf5ff);
}

.pricing-preview .badge {
  position: absolute;
  top: -12px;
  right: 20px;
  background: linear-gradient(135deg, #7b2cbf, #9b4dff);
  padding: 5px 15px;
  border-radius: 30px;
  font-size: 11px;
  font-weight: 700;
  color: #fff;
}

.pricing-preview .pricing-card h3 {
  font-size: 20px;
  margin-bottom: 12px;
  color: #1a1a2e;
}

.pricing-preview .price {
  font-size: 28px;
  background: linear-gradient(135deg, #7b2cbf, #9b4dff);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  margin: 15px 0;
  font-weight: 700;
}

.pricing-preview .price span {
  font-size: 14px;
  font-weight: normal;
  color: #666;
}

.pricing-preview .pricing-card ul {
  text-align: left;
  margin: 20px 0;
  list-style: none;
}

.pricing-preview .pricing-card ul li {
  padding: 8px 0 8px 25px;
  position: relative;
  font-size: 13px;
  border-bottom: 1px solid #f0f0f0;
  color: #555;
}

.pricing-preview .pricing-card ul li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: #9b4dff;
  font-weight: bold;
}

/* --- Home Contact CTA Section --- */
.home-contact {
  padding: 70px 20px;
  background: linear-gradient(135deg, #1a1a2e, #2d1b4e);
  text-align: center;
  position: relative;
}

.home-contact::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, #7b2cbf, #9b4dff, #ffd700);
}

.home-contact h2 {
  color: #fff;
  background: none;
  -webkit-background-clip: unset;
  background-clip: unset;
}

.home-contact p {
  color: #ccc;
  margin-bottom: 25px;
}

.home-contact .btn {
  background: #fff;
  color: #7b2cbf;
}

.home-contact .btn::before {
  background: linear-gradient(135deg, #9b4dff, #ffd700);
}

.home-contact .btn:hover {
  color: #fff;
}

/* ========== 8. SERVICES PAGE STYLES ========== */
.services-section {
  padding: 70px 20px;
  background: #faf5ff;
}

.services-container {
  max-width: 1100px;
  margin: 0 auto;
}

.services-header {
  text-align: center;
  margin-bottom: 50px;
}

.services-header h1 {
  font-size: 42px;
  background: linear-gradient(135deg, #1a1a2e, #7b2cbf);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  margin-bottom: 10px;
}

.services-header p {
  color: #666;
}

.service-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 45px;
  background: #ffffff;
  border-radius: 25px;
  padding: 40px;
  margin-bottom: 45px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
  align-items: center;
  transition: all 0.3s;
}

.service-row:hover {
  transform: translateY(-5px);
  box-shadow: 0 15px 35px rgba(123, 44, 191, 0.1);
}

.service-img img {
  width: 100%;
  border-radius: 18px;
  transition: transform 0.3s;
}

.service-img img:hover {
  transform: scale(1.02);
}

.service-text h2 {
  font-size: 26px;
  margin-bottom: 12px;
  color: #1a1a2e;
}

.service-text p {
  color: #666;
  margin-bottom: 15px;
  line-height: 1.6;
}

.service-text ul {
  list-style: none;
}


@media (max-width: 900px) {
  .service-row {
    grid-template-columns: 1fr;
    padding: 30px;
  }

  .service-text {
    text-align: center;
  }

  .service-text ul li {
    text-align: left;
  }
}

/* ========== 9. PORTFOLIO PAGE STYLES ========== */
.portfolio-section {
  padding: 70px 20px;
  background: #faf5ff;
}

.portfolio-row {
  max-width: 900px;
  margin: 0 auto 50px;
}

.portfolio-box {
  background: #ffffff;
  border-radius: 25px;
  padding: 30px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
  transition: all 0.3s;
}

.portfolio-box:hover {
  transform: translateY(-5px);
  box-shadow: 0 15px 35px rgba(123, 44, 191, 0.1);
}

.portfolio-img {
  height: 230px;
  border-radius: 15px;
  overflow: hidden;
  margin-bottom: 20px;
  background: #f5f5f5;
}

.portfolio-img img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.portfolio-info {
  text-align: center;
  margin-bottom: 25px;
}

.portfolio-info h2 {
  font-size: 24px;
  margin-bottom: 8px;
  color: #1a1a2e;
}

.portfolio-info p {
  color: #666;
  font-size: 14px;
}

.portfolio-slider {
  overflow: hidden;
}

.slide-track {
  display: flex;
  gap: 20px;
  animation: scroll 25s linear infinite;
  width: max-content;
}

.portfolio-slider:hover .slide-track {
  animation-play-state: paused;
}

.slide-track img {
  width: 150px;
  height: 150px;
  object-fit: cover;
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.3s;
  border: 2px solid transparent;
}

.slide-track img:hover {
  transform: scale(1.08);
  border-color: #9b4dff;
  box-shadow: 0 8px 20px rgba(123, 44, 191, 0.3);
}

@keyframes scroll {
  0% {
    transform: translateX(0);
  }

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

.lightbox {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.95);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 10000;
  cursor: pointer;
}

.lightbox img {
  max-width: 90%;
  max-height: 90%;
  border-radius: 15px;
}

.lightbox .close {
  position: absolute;
  top: 20px;
  right: 35px;
  font-size: 40px;
  color: #fff;
  cursor: pointer;
}

@media (max-width: 768px) {
  .portfolio-box {
    padding: 20px;
  }

  .slide-track img {
    width: 120px;
    height: 120px;
  }
}

/* ========== 10. PRICING PAGE STYLES ========== */
.pricing-section {
  padding: 90px 20px;
  background: linear-gradient(180deg, #faf5ff, #ffffff);
}

/* HEADER */
.pricing-header {
  text-align: center;
  margin-bottom: 70px;
}

.pricing-header h1 {
  font-size: 44px;
  font-weight: 700;
  background: linear-gradient(135deg, #1a1a2e, #7b2cbf);
  -webkit-background-clip: text;
  color: transparent;
  margin-bottom: 12px;
}

.pricing-header p {
  color: #666;
  font-size: 16px;
}

/* GRID */
.pricing-grid {
  display: flex;
  justify-content: center;
  align-items: stretch;
  gap: 25px;
  flex-wrap: wrap;
  max-width: 1200px;
  margin: 0 auto;
}

/* CARD */
.pricing-card {
  width: 280px;
  background: #fff;
  border-radius: 22px;
  padding: 35px 25px;

  display: flex;
  flex-direction: column;
  justify-content: space-between;

  text-align: center;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.06);
  transition: all 0.3s ease;
  position: relative;
}

.pricing-card:hover {
  transform: translateY(-10px);
  box-shadow: 0 20px 45px rgba(123, 44, 191, 0.15);
}

/* POPULAR */
.pricing-card.popular {
  border: 2px solid #9b4dff;
  background: linear-gradient(135deg, #ffffff, #faf5ff);
}

/* BADGE */
.badge {
  position: absolute;
  top: -12px;
  right: 20px;
  background: linear-gradient(135deg, #7b2cbf, #9b4dff);
  color: #fff;
  padding: 6px 14px;
  font-size: 11px;
  border-radius: 20px;
  font-weight: 600;
}

/* TITLE */
.pricing-card h3 {
  font-size: 22px;
  color: #1a1a2e;
  margin-bottom: 10px;
}

/* PRICE FIX (IMPORTANT) */
.price {
  display: flex;
  flex-direction: column;
  /* 🔥 FIX */
  align-items: center;
  gap: 4px;
  margin: 18px 0;
}

/* small label */
.price .label {
  font-size: 13px;
  color: #777;
  font-weight: 400;
}

/* actual price */
.price span:last-child {
  font-size: 30px;
  font-weight: 700;
  background: linear-gradient(135deg, #7b2cbf, #9b4dff);
  -webkit-background-clip: text;
  color: transparent;
}

/* LIST */
.pricing-card ul {
  list-style: none;
  padding: 0;
  margin: 20px 0;
  text-align: left;
  flex-grow: 1;
}

.pricing-card ul li {
  padding: 9px 0;
  font-size: 13px;
  color: #555;
  border-bottom: 1px dashed #eee;
  position: relative;
  padding-left: 22px;
}

.pricing-card ul li::before {
  content: "✔";
  position: absolute;
  left: 0;
  color: #7b2cbf;
  font-size: 12px;
}

/* BUTTON */
.btn {
  margin-top: auto;
  padding: 11px 22px;
  background: linear-gradient(135deg, #7b2cbf, #9b4dff);
  color: #fff;
  text-decoration: none;
  border-radius: 30px;
  transition: 0.3s;
  font-size: 14px;
}

.btn:hover {
  transform: scale(1.05);
}

/* RESPONSIVE */
@media (max-width: 900px) {
  .pricing-card {
    width: 100%;
    max-width: 350px;
  }
}

/* ========== 11. CONTACT PAGE STYLES ========== */
.contact-section {
  padding: 70px 20px;
  background: #faf5ff;
}

.contact-container {
  max-width: 850px;
  margin: 0 auto;
  background: #ffffff;
  padding: 45px 40px;
  border-radius: 25px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
}

.contact-container h1 {
  font-size: 38px;
  background: linear-gradient(135deg, #1a1a2e, #7b2cbf);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-align: center;
  margin-bottom: 8px;
}

.contact-container>p {
  text-align: center;
  color: #666;
  margin-bottom: 35px;
}

.alert {
  padding: 14px 18px;
  border-radius: 12px;
  margin-bottom: 25px;
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 14px;
}

.alert-success {
  background: #d4edda;
  color: #155724;
  border-left: 4px solid #28a745;
}

.alert-error {
  background: #f8d7da;
  color: #721c24;
  border-left: 4px solid #dc3545;
}

.contact-form {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

.form-group {
  display: flex;
  flex-direction: column;
}

.form-group label {
  margin-bottom: 6px;
  font-weight: 600;
  color: #1a1a2e;
  font-size: 14px;
}

.required {
  color: #e74c3c;
}

.form-group input,
.form-group textarea,
.form-group select {
  padding: 12px 15px;
  border: 2px solid #e0e0e0;
  border-radius: 12px;
  font-size: 14px;
  transition: all 0.3s;
  outline: none;
}

.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {
  border-color: #9b4dff;
  box-shadow: 0 0 0 3px rgba(155, 77, 255, 0.1);
}

.form-group small {
  margin-top: 5px;
  font-size: 11px;
  color: #888;
}

.contact-form .btn {
  align-self: center;
  padding: 12px 35px;
}

@media (max-width: 650px) {
  .contact-container {
    padding: 30px 25px;
  }

  .form-row {
    grid-template-columns: 1fr;
    gap: 15px;
  }

  .contact-container h1 {
    font-size: 30px;
  }
}

/* ========== 12. ABOUT PAGE STYLES ========== */
.about-section {
  padding: 90px 20px;
  background: linear-gradient(180deg, #faf5ff, #ffffff);
}

.about-container {
  max-width: 1100px;
  margin: 0 auto;
  background: #ffffff;
  padding: 60px 40px;
  border-radius: 25px;
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.06);
  text-align: center;
}

/* TITLE */
.about-container h1 {
  font-size: 42px;
  margin-bottom: 15px;
}

.about-container h1 span {
  background: linear-gradient(135deg, #7b2cbf, #9b4dff);
  -webkit-background-clip: text;
  color: transparent;
}

/* INTRO */
.about-intro {
  color: #666;
  max-width: 700px;
  margin: 0 auto 50px;
  line-height: 1.7;
}

/* FEATURES */
.about-features {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 25px;
  margin-bottom: 50px;
}

.feature-card {
  background: #faf5ff;
  padding: 30px 20px;
  border-radius: 18px;
  transition: 0.3s;
}

.feature-card:hover {
  transform: translateY(-8px);
  background: #fff;
  box-shadow: 0 10px 25px rgba(123, 44, 191, 0.1);
}

.feature-card i {
  font-size: 30px;
  color: #7b2cbf;
  margin-bottom: 10px;
}

/* EXTRA SECTION */
.about-extra {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 30px;
  margin-bottom: 50px;
}

.about-box {
  background: #faf5ff;
  padding: 25px;
  border-radius: 18px;
  text-align: left;
}

.about-box h2 {
  margin-bottom: 10px;
  color: #1a1a2e;
}

.about-box ul {
  list-style: none;
  padding: 0;
}

.about-box ul li {
  padding: 6px 0;
  color: #555;
}

/* STATS */
.about-stats {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 50px;
  flex-wrap: wrap;
}

.stat-box {
  flex: 1;
  min-width: 150px;
  background: #faf5ff;
  padding: 25px;
  border-radius: 18px;
}

.stat-box h3 {
  font-size: 28px;
  color: #7b2cbf;
}

/* BUTTON */
.btn {
  display: inline-block;
  padding: 12px 25px;
  background: linear-gradient(135deg, #7b2cbf, #9b4dff);
  color: #fff;
  border-radius: 30px;
  text-decoration: none;
  transition: 0.3s;
}

.btn:hover {
  transform: scale(1.05);
}

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

  .about-container {
    padding: 40px 25px;
  }

  .about-extra {
    grid-template-columns: 1fr;
  }

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

}

/* ========== 13. RESPONSIVE STYLES ========== */
@media (max-width: 1024px) {
  .container {
    padding: 0 15px;
  }

  h2,
  .home-features h2 {
    font-size: 32px !important;
  }
}

@media (max-width: 550px) {
  h2 {
    font-size: 26px !important;
  }

  .feature-card,
  .pricing-card {
    padding: 25px 15px;
  }

  .services-header h1,
  .pricing-header h1,
  .about-container h1 {
    font-size: 28px !important;
  }
}

/* ========== 14. ANIMATIONS ========== */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(30px);
  }

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

@keyframes pulse {

  0%,
  100% {
    opacity: 1;
  }

  50% {
    opacity: 0.6;
  }
}

.feature-card,
.service-card,
.portfolio-item,
.pricing-card {
  animation: fadeIn 0.6s ease forwards;
}

.feature-card:nth-child(1) {
  animation-delay: 0.1s;
}

.feature-card:nth-child(2) {
  animation-delay: 0.2s;
}

.feature-card:nth-child(3) {
  animation-delay: 0.3s;
}

.feature-card:nth-child(4) {
  animation-delay: 0.4s;
}

.service-card:nth-child(1) {
  animation-delay: 0.1s;
}

.service-card:nth-child(2) {
  animation-delay: 0.2s;
}

.service-card:nth-child(3) {
  animation-delay: 0.3s;
}

.service-card:nth-child(4) {
  animation-delay: 0.4s;
}

/* Scroll Reveal Animation */
@keyframes reveal {
  from {
    opacity: 0;
    transform: translateY(40px);
  }

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

.service-row,
.portfolio-box,
.about-container {
  animation: reveal 0.6s ease forwards;
}