body {
  overflow-x: hidden;
}

/* ================= NAV ================= */
.header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width:100%;
  padding: 20px 0;
  backdrop-filter: blur(12px);
  background: rgba(15, 15, 15, 0.75);
  border-bottom: 1px solid rgba(255,255,255,0.05);
  z-index: 1000;

  animation: navbarDrop 0.9s ease forwards;
  animation-delay:0.2s;
  opacity:0;
}
.nav-wrapper {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

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

.nav-links {
  display: flex;
  list-style: none;
  gap: 48px;
}

.nav-links a {
  text-decoration: none;
  color: var(--text-secondary);
  font-size: 14px;
  letter-spacing: 0.5px;
  position: relative;
  transition: 0.3s ease;
}

.nav-links a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -6px;
  width: 0%;
  height: 2px;
  background: var(--accent-green);
  transition: width 0.3s ease;
}

.nav-links a:hover {
  color: var(--text-primary);
}

.nav-links a:hover::after {
  width: 100%;
}
/* ================= HAMBURGER ================= */

.hamburger{
  display:none;
}

/* container */

.menu7{
  width:40px;
  height:30px;
  position:relative;
  cursor:pointer;
}

/* lines */

.line7{
  position:absolute;
  left:0;
  width:30px;
  height:2px;
  background:var(--text-primary);
  transition:.35s ease;
}

/* positions */

.line7-top{
  top:6px;
}

.line7-middle{
  top:14px;
}

.line7-bottom{
  top:22px;
}

/* middle line slide */

.menu7.active .line7-middle{
  transform:translateX(40px);
  opacity:0;
  transition:.2s ease;
}

/* rotate to X */

.menu7.active .line7-top{
  top:14px;
  transform:rotate(45deg);
}

.menu7.active .line7-bottom{
  top:14px;
  transform:rotate(-45deg);
}
/* ================= NAV SOCIALS ================= */

.socials {
  display: flex;
  align-items: center;
  gap: 20px;
}

.socials a {
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-secondary);
  font-size: 18px;
  transition: 0.3s ease;

  text-decoration: none;
}

/* Icon sizing fix */
.socials i {
  font-size: 18px;
}

/* Hover effect */
.socials a:hover {
  color: var(--accent-green);
  transform: translateY(-3px);
}


/* keyframes */

@keyframes navbarDrop{

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

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

}

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

.hero {
  min-height: 100vh;
  display: flex;
  align-items: center;
  padding-top: 100px;
  background:#060606;
}

.hero-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 60px;
}

/* TEXT AREA */
.hero-text small{
  display:block;
  margin-bottom:15px;
  padding-left:10px;
  border-left:3px solid #ffffff;
  color:#ccc;
  font-size:14px;
}

.hero-text h1{
  font-size:64px;
  font-weight:700;
  margin-bottom:20px;
  line-height:1.2;
}

.hero-text p{
  color:#9a9a9a;
  max-width:500px;
  margin-bottom:40px;
  font-size:16px;
  line-height:1.6;
}
/* ================= HERO IMAGE BORDER ================= */

.hero-image{
  position: relative;
  z-index: 11;
}

.image-border {
  position: relative;
  width: 420px;
  height: 420px;
  border-radius: 50%;
  display: inline-block;
  padding: 2px; /* space for the border */
  background: conic-gradient(
    white 0deg 0deg,
    rgba(255, 255, 255, 0) 0deg 360deg
  );
  transition: background 0.1s linear; /* smooth update */


}

.image-border img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
  display: block;
}

/* ================= about section ================= */
.about {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;

  position: relative;
  min-height: 100vh;   
  padding: 40px 40px;

  background: conic-gradient(
    white 0deg 0deg,
    rgba(255, 255, 255, 0) 0deg 360deg
  );
  transition: background 0.1s linear; /* smooth update */
  color: #d3d3d8;
}

.about-content {
  max-width: 50%;
  padding-top: 40px;
  text-align: justify;
}

.about-content small {
  display: block;
  margin-bottom: 15px;
  color: #ff3366;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.about-content h2 {
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.5;
  margin-bottom: 20px;
  color: #fff;
}

.about-content h2 span {
  color: #ff4ecd; /* highlight words */
}

.about-content p {
  font-size: 1rem;
  line-height: 1.7;
  margin-bottom: 30px;
}

.btn {
  display: inline-block;
  padding: 12px 25px;
  font-size: 0.9rem;
  font-weight: 600;
  text-transform: uppercase;
  text-decoration: none;
  background: #fff;
  color: #000;
  border: 2px solid transparent;
  position: relative;
  box-shadow: 5px 5px 0px #ff4ecd;
  transition: all 0.3s ease-in-out;
}

.btn:hover {
  background: #ff4ecd;
  color: #fff;
  box-shadow: 5px 5px 0px #000;
}


.about-right{
width: 50%;
  height: 500px; /* 👈 IMPORTANT */
  position: relative;
}

spline-viewer{
 width: 110%;
  height: 130%;
  display: block;
  pointer-events:auto;
}
.about-highlights {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin: 25px 0;
  font-size: 14px;
  color: #ccc;
}

.about-highlights div {
  background: rgba(255,255,255,0.05);
  padding: 10px;
  border-radius: 6px;
  border: 1px solid rgba(255,255,255,0.1);
  transition: 0.3s;
}

.about-highlights div:hover {
  background: rgba(255,255,255,0.1);
  transform: translateY(-3px);
}
/* ================= services SECTION ================= */

.service-section {
  padding: 100px 40px;
}

.section-header {
  text-align: center;
  max-width: 650px;
  margin: 0 auto 100px auto;
}

.section-header h2 {
  font-size: 42px;
  margin-bottom: 20px;
}

.section-header p {
  color: #777;
  font-size: 16px;
  line-height: 1.7;
}

/* Case Row Layout */

.service-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 80px;
  margin-bottom: 120px;
}

.service-row.reverse {
  direction: rtl;
}

.service-row.reverse .service-content {
  direction: ltr;
}

.service-content h3 {
  font-size: 28px;
  margin: 20px 0;
}

.service-content p {
  color: #666;
  margin-bottom: 30px;
  max-width: 450px;
}

.service-image img {
  width: 75%;
}

/* ==============================
   TESTIMONIALS SECTION
============================== */

.testimonials-section{
  padding:120px 0;
  background:var(--bg-dark);
  color:var(--text-primary);
}

.section-header.dark p{
  color:var(--text-secondary);
}

/* ==============================
   SLIDER WRAPPER
============================== */

.testimonials-slider{
  position:relative;
  max-width:750px;
  margin:auto;
  min-height:320px;
}

/* ==============================
   TESTIMONIAL CARD
============================== */

.testimonial-card{

  position:absolute;
  inset:0;

  background:
  radial-gradient(circle at top,#22c55e2d,transparent 70%),
  #0f0f0f;

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

  padding:40px;
  border-radius:20px;

  overflow:hidden;

  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);

  /* SMOOTH TRANSITION */
  transition:
  opacity .8s ease,
  transform .8s ease,
  filter .8s ease;

  /* HIDDEN STATE */
  opacity:0;
  visibility:hidden;

  transform:
  translateY(40px)
  scale(.96);

  filter:blur(8px);

  pointer-events:none;
}

/* ==============================
   ACTIVE CARD
============================== */

.testimonial-card.active{

  opacity:1;
  visibility:visible;

  transform:
  translateY(0)
  scale(1);

  filter:blur(0);

  pointer-events:auto;

  z-index:2;
}

/* ==============================
   HOVER GLOW EFFECT
============================== */

.testimonial-card::before{
  content:"";
  position:absolute;

  width:100%;
  height:100%;

  top:0;
  left:-100%;

  background:
  linear-gradient(
    120deg,
    transparent,
    rgba(255,255,255,0.15),
    transparent
  );

  transition:0.6s;
}

.testimonial-card:hover::before{
  left:100%;
}

.testimonial-card:hover{
  transform:translateY(-8px);
  border-color:#22c55e;
  box-shadow:
  0 10px 40px rgba(34,197,94,0.15);
}

/* ==============================
   STARS
============================== */

.stars{
  margin-bottom:15px;
}

.stars i{
  color:#facc15;
  margin-right:4px;
  font-size:15px;
}

/* ==============================
   TEXT
============================== */

.testimonial-card p{
  font-size:16px;
  line-height:1.8;
  color:var(--text-secondary);
  margin-bottom:30px;
}

/* ==============================
   CLIENT
============================== */

.client{
  display:flex;
  align-items:center;
  gap:15px;
}

.client img{
  width:55px;
  height:55px;
  border-radius:50%;
  object-fit:cover;
  border:2px solid rgba(255,255,255,0.08);
}

.client h4{
  margin:0;
  font-size:16px;
  color:var(--text-primary);
}

.client span{
  font-size:14px;
  color:var(--text-secondary);
}

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

@keyframes testimonialFade{

  from{
    opacity:0;
    transform:translateY(20px);
  }

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

}

/* ================= RECENT WORK ================= */

.recent-work-section {
    padding: 80px 0px;
}

.work-card {
  padding: 10px 10px;
  min-height:auto;
  width: 100%;
}
.work-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 20px;
}

.work-card img {
  width: 100%;
  border-radius: 16px;
  margin-bottom: 20px;
}

.work-card h3 {
  font-size: 28px;
  margin-bottom: 20px;
}

.work-card p {
  color: #666;
  margin-bottom: 30px;
  max-width: 450px;
}
/* ===============================
   SEO CONTENT SECTION
================================= */


.seo-content {
  padding: 120px 0;
  background: linear-gradient(135deg, #0f172a, #111827);
  color: #ffffff;
  position: relative;
  overflow: hidden;
}

/* container */

.seo-content .container {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 20px;
  position: relative;
}

/* center text area */

.seo-content h2,
.seo-content > .container > p{
  text-align:center;
}

/* ===============================
   TIMELINE
================================= */

.seo-content .timeline{
  position:relative;
  margin-top:80px;
}

/* center line */

.seo-content .timeline::before{
  content:"";
  position:absolute;
  left:50%;
  top:0;
  width:3px;
  height:100%;
  background:rgba(255,255,255,0.15);
  transform:translateX(-50%);
}

/* animated progress line */

.seo-content .progress-line{
  position:absolute;
  left:50%;
  top:0;
  width:3px;
  height:0%;
  background:#00ffff;
  transform:translateX(-50%);
  transition:height .15s linear;

  box-shadow:
  0 0 10px #00ffff,
  0 0 25px rgba(0,255,255,0.8);
}


/* ===============================
   TIMELINE LIST
================================= */

.seo-content ul{
  list-style:none;
  padding:0;
  margin:0;
}

/* timeline items */

.seo-content ul li{
  position:relative;
  width:50%;
  padding:30px 40px;
  opacity:.45;
  transition:.35s ease;
}

/* left */

.seo-content ul li:nth-child(odd){
  left:0;
  text-align:right;
}

/* right */

.seo-content ul li:nth-child(even){
  left:50%;
}


/* ===============================
   CARD
================================= */

.seo-content ul li .card{
  background:rgba(255,255,255,0.05);
  padding:20px;
  border-radius:10px;
  border:1px solid rgba(255,255,255,0.08);
  transition:.35s ease;
}

.seo-content ul li .card:hover{
  transform:translateY(-5px);
  background:rgba(0,255,255,0.08);
  border-color:#00ffff;
}


/* ===============================
   TIMELINE DOTS
================================= */

.seo-content ul li::before{
  content:"";
  position:absolute;
  top:40px;
  left:100%;
  transform:translate(-50%, -50%);
  width:14px;
  height:14px;
  border-radius:50%;

  background:#1a1a1a;
  border:3px solid rgba(255,255,255,0.25);

  z-index:3;
  transition:.35s ease;
}

/* right side */

.seo-content ul li:nth-child(even)::before{
  left:0;
  transform:translate(-50%, -50%);
}


/* ===============================
   ACTIVE DOT
================================= */

.seo-content ul li.active::before{

  background:#00ffff;
  border-color:#00ffff;

  box-shadow:
  0 0 6px #00ffff,
  0 0 14px rgba(0,255,255,0.8);

}


/* ===============================
   PULSE RING
================================= */

.seo-content ul li.active::after{

  content:"";
  position:absolute;
  top:40px;
  left:100%;
  transform:translate(-50%, -50%);

  width:26px;
  height:26px;
  border-radius:50%;

  border:2px solid rgba(0,255,255,0.6);

  animation:timelinePulse 1.2s ease-out;
}

.seo-content ul li:nth-child(even).active::after{
  left:0;
  transform:translate(-50%, -50%);
}


@keyframes timelinePulse{

0%{
transform:translate(-50%, -50%) scale(.7);
opacity:1;
}

70%{
transform:translate(-50%, -50%) scale(1.6);
opacity:0;
}

100%{
opacity:0;
}

}


/* ================= CONTACT ================= */

.contact-section {
  padding: 120px 0;
  background: var(--bg-dark);
  color: var(--text-primary);
}

.contact-form {
  max-width: 600px;
  margin: 60px auto 0 auto;
  display: flex;
  flex-direction: column;
  gap: 30px;
}

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

.form-group label {
  font-size: 14px;
  color: var(--text-secondary);
}

.form-group input,
.form-group textarea {
  padding: 16px;
  border-radius: 8px;
  border: 1px solid #1f1f1f;
  background: #111;
  color: var(--text-primary);
  font-family: inherit;
  transition: 0.3s ease;
}

.form-group input:focus,
.form-group textarea:focus {
  outline: none;
  border-color: var(--accent-green);
  box-shadow: 0 0 10px rgba(76, 175, 0, 0.4);
}
/* ================= FOOTER ================= */

.footer {
  background: #111;
  padding: 25px 0;
  text-align: center;
}

.footer p {
  color: var(--text-secondary);
  font-size: 14px;
}

/* ===============================
   THANK YOU POPUP
================================= */

.thankyou-popup {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(8px);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;

  opacity: 0;
  visibility: hidden;
  transition: 0.4s ease;
}

.thankyou-popup.active {
  opacity: 1;
  visibility: visible;
}

.thankyou-box {
  background: #111827;
  padding: 50px 40px;
  border-radius: 15px;
  text-align: center;
  max-width: 420px;
  width: 90%;
  color: #fff;
  animation: popupScale 0.4s ease;
  border: 1px solid rgba(255,255,255,0.1);
}

@keyframes popupScale {
  from { transform: scale(0.8); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}

.checkmark {
  font-size: 3rem;
  color: #00ffff;
  margin-bottom: 15px;
}

.thankyou-box h2 {
  font-size: 1.8rem;
  margin-bottom: 15px;
}

.thankyou-box p {
  font-size: 1rem;
  opacity: 0.85;
  margin-bottom: 10px;
}

.redirect-text {
  font-size: 0.9rem;
  color: #00ffff;
}

/* ================= TEMPLATE CATEGORIES ================= */

.template-categories {
  padding: 100px 40px;
  background: #0b0b0b;
}


.category-header h2 {
  font-size: 32px;
  margin-bottom: 10px;
}

.category-header p {
  color: #777;
  font-size: 15px;
}

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

/* CARD */
.category-card {
  position: relative;
  background: #d6d6d6;
  border-radius: 12px;
  padding: 45px;
  overflow: hidden;
  transition: 0.3s ease;
  border: 1px solid rgba(0, 0, 0, 0.05);
}
.category-card {
  
  display: block;
  color: inherit;
  text-decoration: none;
  cursor: pointer;
}

/* TEXT */
.category-card h3 {
  position: relative;
  z-index: 2;
  font-size: 18px;
  color:black;
}

/* IMAGE STACK CONTAINER */
.category-images {
  position: absolute;
  right: 0px;
  bottom: 0px;
  width: 150px;
  height: 150px;
}

/* BASE IMAGE STYLE */
.category-images .img {
  position: absolute;
  width: 80px;
  height: 150px;
  object-fit: cover;
  transition: 0.5s ease;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.664);
}

/* STACKED POSITIONS (DEFAULT) */
.img1 {
  right: 0;
  bottom: 0;
  z-index: 3;
}

.img2 {
  right: 20px;
  bottom: 0px;
  z-index: 2;
}

.img3 {
  right: 40px;
  bottom: 0px;
  z-index: 1;
}

/* 🔥 HOVER EFFECT (SPREAD OUT) */
.category-card:hover .img1 {
  transform: translateX(0px)  scale(1.05);
}

.category-card:hover .img2 {
  transform: translateX(-60px)  scale(1.05);
}

.category-card:hover .img3 {
  transform: translateX(-100px)  scale(1.05);
}

/* HERO */
.template-hero {
  padding: 120px 0 60px;
  text-align: center;
}

.template-hero h1 {
  font-size: 42px;
}

.template-hero p {
  color: #777;
}
.template-list{
  padding-bottom: 100px;
}

/* GRID */
.template-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

/* CARD */
.template-card {
  background: #121212;
  border-radius: 12px;
  overflow: hidden;
  transition: 0.3s;
}

.template-card:hover {
  transform: translateY(-5px);
}

/* IMAGE */
.template-card img {
  width: 100%;
  height: 300px;
  object-fit: cover;
}

/* INFO */
.template-info {
  padding: 20px;
}

.template-info h3 {
  margin-bottom: 10px;
}

.template-info p {
  color: #777;
  margin-bottom: 15px;
}

/* BUTTONS */
.template-actions {
  display: flex;
  gap: 10px;
}

/* ==============================
   GUEST POSTING SECTION
============================== */

.guest-posting-section{
  padding:120px 0;
  background:#050505;
  position:relative;
  overflow:hidden;
}

/* GRID */

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

/* CARD */

.guest-card{

  position:relative;

  padding:40px 30px;

  background:
  radial-gradient(circle at top,
  rgba(34,197,94,.12),
  transparent 70%),
  #0f0f0f;

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

  border-radius:24px;

  overflow:hidden;

  transition:.45s cubic-bezier(.22,1,.36,1);

  backdrop-filter:blur(10px);
}

/* HOVER */

.guest-card:hover{

  transform:
  translateY(-12px)
  scale(1.02);

  border-color:#22c55e;

  box-shadow:
  0 20px 50px rgba(34,197,94,.12);
}

/* SHINE EFFECT */

.guest-card::before{

  content:"";

  position:absolute;

  inset:0;

  background:
  linear-gradient(
    120deg,
    transparent,
    rgba(255,255,255,.08),
    transparent
  );

  transform:translateX(-100%);

  transition:.8s;
}

.guest-card:hover::before{
  transform:translateX(100%);
}

/* ICON */

.guest-icon{

  width:70px;
  height:70px;

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

  border-radius:18px;

  margin-bottom:25px;

  background:
  linear-gradient(
    135deg,
    #22c55e,
    #16a34a
  );

  font-size:28px;
  color:#fff;

  box-shadow:
  0 10px 30px rgba(34,197,94,.3);
}

/* TEXT */

.guest-card h3{
  font-size:24px;
  margin-bottom:18px;
  color:#fff;
}

.guest-card p{
  color:#a1a1aa;
  line-height:1.8;
  font-size:15px;
}

/* CTA */

.guest-cta{
  text-align:center;
  margin-top:60px;
}