:root{

/* CORE BACKGROUND */
--navy:#05080F;
--navy-light:#0B1220;
--navy-soft:#121C2F;

/* GOLD */
--gold:#D4AF37;
--gold-light:#F5D76E;
--gold-deep:#9A6F1A;

/* TEXT */
--white:#F8FAFC;
--muted:#CBB89A;

}

body{
background:
radial-gradient(circle at 15% 20%, rgba(212,175,55,0.08), transparent 40%),
radial-gradient(circle at 85% 70%, rgba(212,175,55,0.06), transparent 50%),
linear-gradient(180deg,#05080F 0%,#0B1220 40%,#05080F 100%);

color:var(--white);
}
}
--gold:#D4AF37;
--gold-light:#F5D76E;
--gold-deep:#9A6F1A;


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

--white:#F8FAFC;
--muted:#CBB89A;

}
/* RESET */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Segoe UI", sans-serif;
}

html {
  scroll-behavior: smooth;
}

body {
  background: var(--navy);
  color: var(--white);
  line-height: 1.6;
}

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

.navbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 25px 8%;
}

/* LOGO LEFT */
.logo {
  font-weight: 800;
  letter-spacing: 3px;
  color: var(--gold);
}

/* NAV LINKS PUSHED RIGHT */
.nav-links{
display:flex;
align-items:center;
gap:28px;

padding:10px 28px;

background:linear-gradient(
135deg,
rgba(255,255,255,0.15),
rgba(255,255,255,0.03)
);

border:1px solid rgba(212,175,55,0.2);

border-radius:12px;

backdrop-filter: blur(6px);

box-shadow:
0 4px 20px rgba(0,0,0,0.5),
0 0 10px rgba(212,175,55,0.25);
}
.navbar{
padding:12px 80px;
}

.nav-links a{
font-size:16px;
font-weight:500;
letter-spacing:0.6px;
border-radius:20px;
text-decoration:none;
position:relative;

background:linear-gradient(
120deg,
#7a5a10,
#b8962e,
#f5d76e,
#b8962e,
#7a5a10
);

-webkit-background-clip:text;
-webkit-text-fill-color:transparent;

filter:drop-shadow(0 0 4px rgba(212,175,55,0.35));
transition:0.3s ease;
}

.nav-links a:hover{
background:linear-gradient(
120deg,
#fff1a8,
#f5d76e,
#fff1a8
);

-webkit-background-clip:text;
-webkit-text-fill-color:transparent;
}

.nav-links a.active{
background:linear-gradient(
120deg,
#f5d76e,
#fff1a8,
#f5d76e
);

-webkit-background-clip:text;
-webkit-text-fill-color:transparent;
}
/* Underline animation */
.nav-links a::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -6px;
  transform: translateX(-50%);
  width: 0%;
  height: 2px;
  background: linear-gradient(90deg, var(--gold-light), var(--gold));
  transition: width 0.3s ease;
}

.nav-links a:hover::after,
.nav-links a.active::after {
  width: 100%;
}

.nav-links a.active {
  color: var(--gold);
}
/* ================= BUTTON ================= */
.btn-gold{
position:relative;
display:inline-block;

.infra-hero .btn-gold{
margin-top:35px;
}

padding:12px 28px;
border-radius:35px;

font-weight:600;
font-size:15px;

color:#2b1d00;
text-decoration:none;

background:linear-gradient(
145deg,
#7a5a10 0%,
#b8962e 20%,
#f5d76e 40%,
#fff4b5 50%,
#f5d76e 60%,
#b8962e 80%,
#7a5a10 100%
);
.btn-gold::after{

content:"";
position:absolute;
top:0;
left:-120%;
width:60%;
height:100%;

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

transform:skewX(-20deg);

animation:goldShine 5s infinite;
}
@keyframes goldShine{

0%{
left:-120%;
}

50%{
left:120%;
}

100%{
left:120%;
}

}
.btn-gold:hover{

transform:translateY(-3px);

box-shadow:
0 10px 35px rgba(212,175,55,0.5),
inset 0 2px 5px rgba(255,255,255,0.5),
inset 0 -4px 8px rgba(0,0,0,0.3);

}
.hero::after{

content:"";
position:absolute;

right:8%;
top:20%;

width:500px;
height:500px;

background:radial-gradient(
circle,
rgba(212,175,55,0.45),
rgba(212,175,55,0.15),
transparent 70%
);

filter:blur(120px);

z-index:0;

}
box-shadow:
0 6px 20px rgba(212,175,55,0.35),
inset 0 2px 4px rgba(255,255,255,0.4),
inset 0 -3px 6px rgba(0,0,0,0.25);

transition:all 0.35s ease;

overflow:hidden;
}
.btn-gold:hover {
  transform: translateY(-3px);
}
.navbar{
display:flex;
align-items:center;
justify-content:space-between;
padding:10px 50px;
background: #0b1220;
}
/* LOGO BLOCK */
.logo{
display:flex;
align-items:center;
gap: 10px;
}

.logo-img{
width: 60px;
height:60px;
}
/* LOGO TEXT */
.logo-text{
display:flex;
flex-direction:column;
}

.logo-title{

font-size:30px;
font-weight:700;
letter-spacing:1.0px;

background:linear-gradient(
120deg,
#7a5a10 0%,#5a420a 0%,
#b8962e 20%,
#f5d76e 35%,
#fff4b5 50%,
#f5d76e 65%,
#b8962e 80%,
#5a420a 100%
);
background-size:200% auto;

-webkit-background-clip:text;
-webkit-text-fill-color:transparent;

/* shine movement */
animation:goldShimmer 6s linear infinite;
/* depth */
filter:drop-shadow(0 2px 2px rgba(0,0,0,0.4))
drop-shadow(0 0 8px rgba(212,175,55,0.6));

}
@keyframes goldShimmer{

0%{
background-position:0% center;
}

100%{
background-position:200% center;
}

}
.logo-title{
position:relative;
overflow:hidden;
}

.logo-title::after{

content:"";
position:absolute;
top:0;
left:-150%;
width:60%;
height:100%;

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

transform:skewX(-20deg);

animation:goldReflection 5s infinite;
}
@keyframes goldReflection{

0%{
left:-150%;
}

50%{
left:150%;
}

100%{
left:150%;
}

}
.logo-title{
filter:drop-shadow(0 0 6px rgba(212,175,55,0.5));
}
.logo-slug{
font-size:12px;
color:#cbb89a;
}

.nav-links{
display:flex;
gap:28px;
font-size: 15px;
white-space:nowrap;
}
.navbar{
border-bottom:1px solid rgba(212,175,55,0.15);
}
/* ================= HERO ================= */
.hero {
  position: relative;
  overflow: hidden;
  min-height: 90vh;
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  align-items: center;
  padding: 0 8%;
}

.hero::after {
  content: "";
  position: absolute;
  right: 10%;
  top: 20%;
  width: 400px;
  height: 400px;
  background: radial-gradient(circle, rgba(212,175,55,0.25), transparent 70%);
  filter: blur(120px);
  z-index: 0;
}

.hero-content {
  position: relative;
  z-index: 2;
}

.hero-content h1 {
  font-size: 52px;
  margin-bottom: 25px;
}

.hero-content p {
  color: var(--muted);
  margin-bottom: 35px;
}

#hero-3d {
  position: relative;
  z-index: 2;
  height: 520px;
}
.hero::after{
content:"";
position:absolute;
right:5%;
top:20%;
width:450px;
height:450px;

background:radial-gradient(
circle,
rgba(212,175,55,0.35),
rgba(212,175,55,0.15),
transparent 70%
);

filter:blur(120px);
z-index:0;
}

.hero{
position:relative;
overflow:hidden;
.btn-gold:hover{
transform:translateY(-3px);
box-shadow:0 10px 30px rgba(212,175,55,0.35);
}
background:
radial-gradient(circle at 70% 40%, rgba(212,175,55,0.18), transparent 45%),
radial-gradient(circle at 85% 20%, rgba(212,175,55,0.08), transparent 50%),
linear-gradient(180deg,#05080F,#0B1220);
}
body{
background:
radial-gradient(circle at 10% 20%, rgba(212,175,55,0.35), transparent 40%),
radial-gradient(circle at 90% 80%, rgba(212,175,55,0.25), transparent 45%),
linear-gradient(180deg,#05080F,#0B1220);
}
.hero::before{
content:"";
position:absolute;
top:0;
left:0;
width:100%;
height:100%;

background-image:
radial-gradient(#D4AF37 1px, transparent 1px);

background-size:120px 120px;

opacity:0.25;
animation:particlesMove 40s linear infinite;
}
.hero::before{
content:"";
position:absolute;
top:-50%;
left:-50%;
width:200%;
height:200%;

background:conic-gradient(
from 0deg,
transparent,
rgba(212,175,55,0.15),
transparent 30%
);

animation:heroRotate 18s linear infinite;

filter:blur(120px);
z-index:0;
}

@keyframes heroRotate{
0%{
transform:rotate(0deg);
}
100%{
transform:rotate(360deg);
}
}
@keyframes particlesMove{
from{transform:translateY(0);}
to{transform:translateY(-200px);}
}
.digital-gap{
text-align:center;
padding:120px 8%;
position:relative;
overflow:hidden;
}

/* TITLE */

.gap-title{
font-size:36px;
margin-bottom:15px;
opacity:0;

animation:titleSlide 1.2s ease forwards;
}

/* GOLD LINE */

.gap-line{
width:60px;
height:3px;
background:linear-gradient(var(--gold-light),var(--gold));
margin:15px auto 25px auto;
opacity:0;

animation:fadeLine 1.4s ease forwards;
}

/* PARAGRAPH */

.gap-text{
max-width:750px;
margin:auto;
color:#cbb89a;
line-height:1.7;
opacity:0;

animation:textSlide 1.4s ease forwards;
}

/* LEFT → CENTER */

@keyframes titleSlide{

0%{
transform:translateX(-120px);
opacity:0;
}

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

}

/* RIGHT → CENTER */

@keyframes textSlide{

0%{
transform:translateX(120px);
opacity:0;
}

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

}

/* LINE FADE */

@keyframes fadeLine{

0%{
opacity:0;
transform:scaleX(0);
}

100%{
opacity:1;
transform:scaleX(1);
}

} 
/* ================= SECTIONS ================= */
.section {
  padding: 100px 8%;
  text-align: center;
}

.section.dark {
  background: var(--navy-light);
  border-radius: 20px;
}

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

.card {
  background: var(--navy-light);
  padding: 40px;
  border-radius: 18px;
  border: 1px solid rgba(212,175,55,0.2);
  transition: 0.3s ease;
}

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

/* ================= FORM ================= */
form {
  display: flex;
  flex-direction: column;
  gap: 15px;
  max-width: 400px;
  margin: auto;
}

input,
textarea {
  padding: 12px;
  border-radius: 8px;
  border: 1px solid rgba(212,175,55,0.2);
  background: #0f1a2e;
  color: white;
}

/* ================= FOOTER ================= */
.main-footer{
background: var(--navy);
color: var(--white);
padding: 60px 40px;
}

.footer-container {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 50px;
  max-width: 1300px;
  margin: 0 auto 40px;
}

.footer-col h3,
.footer-col h4 {
  margin-bottom: 20px;
}

.footer-col p {
  color: var(--muted);
  line-height: 1.7;
}

.footer-col ul {
  list-style: none;
}

.footer-col li {
  margin-bottom: 12px;
}

.footer-col a {
  color: var(--muted);
  text-decoration: none;
  transition: 0.3s;
}

.footer-col a:hover {
  color: var(--gold);
}

.footer-bottom{
text-align:center;
padding:40px 0 20px 0;
position:relative;
}

.footer-line{
width:120px;
height:2px;
margin:0 auto 18px;

background:linear-gradient(
90deg,
transparent,
#D4AF37,
#F5D76E,
#D4AF37,
transparent
);

box-shadow:0 0 10px rgba(212,175,55,0.5);
}

.footer-bottom p{
font-size:14px;
color:#cbb89a;
letter-spacing:0.5px;
}

.footer-bottom span{
color:#f5d76e;
font-weight:600;
}
.footer-tagline{
font-size:13px;
margin-top:6px;
color:#9f8d6a;
letter-spacing:1px;
}
/* ================= WHATSAPP ================= */
/* ================= WHATSAPP FLOAT BUTTON ================= */

.whatsapp-float{

position: fixed;

bottom: 50px;
right: 40px;

width: 60px;
height: 60px;

background: #25D366;

border-radius: 50%;

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

box-shadow: 0 8px 20px rgba(0,0,0,0.35);

z-index: 9999;

cursor: pointer;

/* animation */
animation: whatsappPulse 2.5s infinite;

transition: transform 0.3s ease;

}

.whatsapp-float:hover{

transform: scale(1.12);

animation: none;

}

/* ================= WHATSAPP PULSE ANIMATION ================= */

@keyframes whatsappPulse{

0%{
box-shadow: 0 0 0 0 rgba(37,211,102,0.6);
}

70%{
box-shadow: 0 0 0 18px rgba(37,211,102,0);
}

100%{
box-shadow: 0 0 0 0 rgba(37,211,102,0);
}

}
/* ================= ANIMATION ================= */
.fade-up {
  opacity: 0;
  transform: translateY(30px);
  animation: fadeUp 1s ease forwards;
}

.delay-1 { animation-delay: 0.3s; }
.delay-2 { animation-delay: 0.6s; }

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

/* ================= SAFE SCROLL REVEAL ================= */

.reveal {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.8s ease, transform 0.8s ease;
}

.reveal.hidden {
  opacity: 0;
  transform: translateY(60px);
}
/* ================= RESPONSIVE ================= */
@media (max-width: 1000px) {
  .hero {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .grid,
  .footer-container {
    grid-template-columns: 1fr;
  }
}
/* Premium Gold Frame for Ownership Cards */
.card {
  background: var(--navy-light);
  padding: 40px;
  border-radius: 18px;
  border: 1px solid rgba(212,175,55,0.25);
  position: relative;
  overflow: hidden;
  transition: all 0.3s ease;
}

/* Gold Border Glow Frame */
.card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 18px;
  padding: 1.5px;
  background: linear-gradient(
    135deg,
    rgba(212,175,55,0.8),
    rgba(245,215,110,0.6),
    rgba(212,175,55,0.8)
  );
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
  opacity: 0.6;
}

/* Stronger effect on hover */
.card:hover::before {
  opacity: 1;
}

.card:hover {
  transform: translateY(-6px);
}
/* about us -CSS */


/* ===== ABOUT HERO  ===== STARTS*/

./* ================= ABOUT HERO (SPLIT LAYOUT) ================= */
/* ================= ABOUT HERO SECTION ================= */

.about-hero{

padding:140px 8% 120px 8%;

position:relative;

overflow:hidden;

background:var(--navy);

}

/* GOLD HERO GLOW */

.about-hero::before{

content:"";

position:absolute;

top:0;
left:-10%;

width:60%;
height:100%;

background:radial-gradient(
circle at center,
rgba(212,175,55,0.25),
rgba(212,175,55,0.12),
transparent 70%
);

filter:blur(80px);

z-index:0;

}

/* HERO GRID */

.about-hero-grid{

position:relative;

z-index:2;

display:grid;

grid-template-columns:1fr 1fr;

align-items:start;

gap:90px;

max-width:1200px;

margin:auto;

}

/* HERO TEXT */

.about-hero-text{

max-width:560px;

padding-top:40px;

}

.about-hero-text h1{

font-size:48px;

line-height:1.2;

margin-bottom:30px;

}

.about-hero-text p{

color:var(--muted);

font-size:18px;

line-height:1.7;

}
/* ================= HERO TEXT ANIMATION ================= */

.about-hero-text h1,
.about-hero-text p{

opacity:0;
transform:translateY(40px);

animation:heroTextReveal 1s ease forwards;

}

.about-hero-text p{

animation-delay:0.3s;

}

@keyframes heroTextReveal{

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

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

}
/* HERO IMAGE */

.about-hero-image-wrapper{

display:flex;

justify-content:center;

padding-top:60px;

}

.about-hero-image{

width:100%;

max-width:500px;

border-radius:20px;

box-shadow:
0 35px 90px rgba(0,0,0,0.7),
0 0 70px rgba(212,175,55,0.18);

animation:heroFloat 6s ease-in-out infinite;

}

/* FLOAT ANIMATION */

@keyframes heroFloat{

0%{
transform:translateY(0px);
}

50%{
transform:translateY(-14px);
}

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

}

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

@media (max-width:900px){

.about-hero-grid{

grid-template-columns:1fr;

text-align:center;

gap:60px;

}

.about-hero-text{
margin:auto;
}

.about-hero-text p{
margin:auto;
}

.about-hero-image-wrapper{
padding-top:20px;
}

}
/* ===== ABOUT HERO  ===== ENDS*/
.about-section {
  padding: 100px 8%;
  text-align: center;
}

.about-section.dark {
  background: var(--navy-light);
}

.about-section h2 {
  font-size: 36px;
  margin-bottom: 15px;
}

.gold-line {
  width: 60px;
  height: 3px;
  background: var(--gold);
  margin: 0 auto 40px;
}

.about-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 40px;
  max-width: 1100px;
  margin: 0 auto;
}
.highlight-number{
color:var(--gold-light);
font-weight:600;
}
.about-section{
animation:fadeUp 1s ease;
}

@keyframes fadeUp{
0%{
opacity:0;
transform:translateY(30px);
}
100%{
opacity:1;
transform:translateY(0);
}
}

/* ================= PREMIUM GOLD FRAME FOR ABOUT CARDS ================= */

/* ================= STRUCTURAL DIFFERENCE CARDS ================= */

.about-grid{

display:grid;
grid-template-columns:repeat(2,1fr);
gap:50px;

max-width:1100px;
margin:60px auto 0;

}


/* CARD */

.about-card{

background:linear-gradient(
180deg,
#0d1b33,
#081426
);

padding:50px 40px;

border-radius:22px;

position:relative;

text-align:center;

transition:all 0.35s ease;

border:1px solid rgba(212,175,55,0.4);

box-shadow:
0 10px 35px rgba(0,0,0,0.55),
0 0 15px rgba(212,175,55,0.12);

}


/* GOLD GLOW BORDER */

.about-card::before{

content:"";

position:absolute;
inset:-1px;

border-radius:22px;

background:linear-gradient(
120deg,
rgba(212,175,55,0.9),
rgba(245,215,110,0.6),
rgba(212,175,55,0.9)
);

opacity:0;

transition:opacity 0.35s ease;

z-index:-1;

}


/* HOVER EFFECT */

.about-card:hover{

transform:translateY(-10px);

background:linear-gradient(
180deg,
#102244,
#08162b
);

box-shadow:
0 20px 50px rgba(0,0,0,0.7),
0 0 30px rgba(212,175,55,0.35);

}

.about-card:hover::before{

opacity:0.6;

}


/* TITLE */

.about-card h3{

font-size:22px;

margin-bottom:18px;

color:#ffffff;

font-weight:600;

}


/* TEXT */

.about-card p{

color:#cbb89a;

line-height:1.8;

max-width:280px;

margin:auto;

font-size:16px;

}
/* ================= VISION SECTION ================= */

.vision-section{

padding:120px 8%;

}

.vision-container{

max-width:1200px;
margin:auto;

display:grid;
grid-template-columns:1fr 1fr;
gap:80px;
align-items:center;

}


/* LEFT TEXT */

.vision-left h2{

font-size:36px;
margin-bottom:15px;

}

.vision-left p{

margin-top:20px;
color:var(--muted);
line-height:1.8;
max-width:520px;

}


/* RIGHT POINTS */

.vision-right{

display:flex;
flex-direction:column;
gap:30px;

}

.vision-point{

display:flex;
align-items:center;
gap:20px;

background:rgba(255,255,255,0.02);

padding:20px 25px;

border-radius:14px;

border:1px solid rgba(212,175,55,0.2);

transition:all 0.3s ease;

}

.vision-point span{

font-size:22px;
font-weight:600;

color:var(--gold-light);

}

.vision-point p{

color:var(--white);

}


/* HOVER EFFECT */

.vision-point:hover{

transform:translateX(6px);

border-color:rgba(212,175,55,0.5);

}
/* ================= LEADERSHIP PHILOSOPHY CLEAN STYLE ================= */

.philosophy-list {
  list-style: none;
  padding: 0;
  margin: 40px auto 0;
  max-width: 600px;
  text-align: center;
}

.philosophy-list li {
  font-size: 18px;
  color: var(--muted);
  margin-bottom: 18px;
  letter-spacing: 0.5px;
}
/* ================= PREMIUM PHILOSOPHY SECTION ================= */

.philosophy-section {
  padding: 120px 8%;
  text-align: center;
}

.philosophy-grid {
  margin-top: 60px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 40px;
  max-width: 900px;
  margin-left: auto;
  margin-right: auto;
}

.philosophy-item {
  background: rgba(255,255,255,0.02);
  padding: 35px;
  border-radius: 18px;
  position: relative;
  font-size: 18px;
  letter-spacing: 0.5px;
  color: var(--muted);
  border: 1px solid rgba(212,175,55,0.2);
  transition: all 0.3s ease;
}

.philosophy-item::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 4px;
  height: 100%;
  background: linear-gradient(var(--gold-light), var(--gold));
  border-radius: 18px 0 0 18px;
}

.philosophy-item:hover {
  transform: translateY(-6px);
  color: var(--white);
  border-color: rgba(212,175,55,0.5);
}
/* ================= ABOUT MID CTA ================= */

.about-mid-cta {
  padding: 120px 8%;
  display: flex;
  justify-content: center;
}

.about-mid-cta-inner {
  text-align: center;
  max-width: 700px;
}

.about-mid-cta h3 {
  font-size: 26px;
  margin-bottom: 30px;
  font-weight: 500;
}
/* ================= SERVICES PAGE ================= */

/* ================= DROPDOWN ================= */

.dropdown {
  position: relative;
}

.arrow {
  font-size: 12px;
  margin-left: 6px;
  transition: transform 0.3s ease;
  display: inline-block;
}

.dropdown:hover .arrow {
  transform: rotate(180deg);
}

.dropdown-menu {
  position: absolute;
  top: 130%;
  left: 0;
  background: var(--navy-light);
  padding: 10px 0;
  border-radius: 12px;
  min-width: 240px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: all 0.3s ease;
  box-shadow: 0 20px 40px rgba(0,0,0,0.4);
  border: 1px solid rgba(212,175,55,0.25);
  z-index: 999;
}

.dropdown-menu a {
  display: block;
  padding: 12px 22px;
  color: var(--muted);
  text-decoration: none;
  font-size: 14px;
  transition: 0.3s ease;
  position: relative;
}

/* Short elegant underline */
.dropdown-menu a {
  position: relative;
  display: block;
  padding: 12px 22px;
  color: var(--muted);
  text-decoration: none;
  font-size: 14px;
  transition: 0.3s ease;
  text-align: left;
}

/* Centered underline */
.dropdown-menu a::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 8px;
  transform: translateX(-50%);
  width: 0%;
  height: 2px;
  background: var(--gold);
  transition: width 0.3s ease;
}

.dropdown-menu a:hover::after {
  width: 40%;
}
.dropdown-menu a:hover {
  color: var(--gold);
}

.dropdown:hover .dropdown-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* ===== SERVICES HERO IMAGE START===== */

css /* ================= SERVICES HERO ================= */ 
.services-hero-wrapper { 
padding: 120px 8%; } 
.services-hero-container { 
position: relative;
 max-width: 1300px;
 margin: 0 auto; 
border-radius: 28px; 
overflow: hidden; box-shadow: 0 25px 60px rgba(0,0,0,0.65), 0 0 40px rgba(212,175,55,0.08);
 } 
.services-hero-image { 
width: 100%; 
height: 560px; 
object-fit: cover;
 display: block; filter: brightness(0.75) contrast(1.05); 
}
 /* Overlay */ 
.services-hero-overlay { 
position: absolute; 
inset: 0; 
background: linear-gradient( rgba(8,12,20,0.65), rgba(8,12,20,0.85) ); 
display: flex;
 flex-direction: column;
 justify-content: center;
 align-items: center; 
text-align: center; 
padding: 0 80px; 
}

 /* Heading */
 .services-hero-overlay 
h1 { 
font-size: 52px; 
line-height: 1.2;
 margin-bottom: 25px;
 font-weight: 600; 
color: #ffffff; 
text-shadow: 0 4px 25px rgba(0,0,0,0.8), 0 0 25px rgba(212,175,55,0.25);
 } 
/* Paragraph */ 
.services-hero-overlay 
p { max-width: 780px;
 font-size: 17px;
 line-height: 1.7;
 color: var(--muted); 
letter-spacing: 0.3px; }
 /* Optional Gold Glow */
 .services-hero-container
::after { content:""; 
position:absolute;
 width:450px;
 height:450px;
 background: radial-gradient( circle, rgba(212,175,55,0.18), transparent 70% ); 
top:20%;
 left:50%;
 transform:translateX(-50%); 
filter:blur(120px); z-index:0; } 

 /* ================= SERVICES STORY ================= */
/* ================= SERVICES STORY ================= */

.services-story {
  padding: 140px 8%;
  background: linear-gradient(to bottom, #0b1220, #05080F);
}

/* Layout */

.story-container {
  max-width: 1100px;
  margin: auto;

  display: grid;
  grid-template-columns: 1fr 1px 1fr;
  gap: 50px;
  align-items: center;
}

/* Divider */

.story-divider {
  width: 1px;
  height: 120px;

  background: linear-gradient(
    var(--gold-light),
    var(--gold),
    var(--gold-light)
  );

  opacity: 0.7;
}

/* Left */

.story-left h2 {
  font-size: 34px;
  margin-bottom: 18px;
}

.story-left p {
  color: var(--muted);
  line-height: 1.7;
}

/* Right */

.story-right h3 {
  font-size: 26px;
  margin-bottom: 18px;
  color: var(--gold);
}

.story-right p {
  color: var(--muted);
  line-height: 1.7;
}

/* Mobile */

@media (max-width: 900px){

  .story-container{
    grid-template-columns: 1fr;
    text-align:center;
  }

  .story-divider{
    display:none;
  }

}
/* ================= STORY SLIDE ANIMATION =================  */
/* Left block animation */

.story-left {
  opacity: 0;
  transform: translateX(-120px);
  animation: slideLeftStory 1.2s ease forwards;
}

/* Right block animation */

.story-right {
  opacity: 0;
  transform: translateX(120px);
  animation: slideRightStory 1.2s ease forwards;
}

/* Left animation */

@keyframes slideLeftStory {

  0% {
    opacity: 0;
    transform: translateX(-120px);
  }

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

}

/* Right animation */

@keyframes slideRightStory {

  0% {
    opacity: 0;
    transform: translateX(120px);
  }

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

}
/* ================= STORY DIVIDER ANIMATION ================= */

.story-divider {
  width: 2px;
  height: 0;

  background: linear-gradient(
    var(--gold-light),
    var(--gold),
    var(--gold-light)
  );

  margin: auto;

  animation: growDivider 1.2s ease forwards;
}

/* Divider growth */

@keyframes growDivider {

  0% {
    height: 0;
    opacity: 0;
  }

  100% {
    height: 120px;
    opacity: 1;
  }

}

.story-divider {
  box-shadow: 0 0 10px rgba(212,175,55,0.5);
}

/* ================= SERVICES STORY END ================= */
.services-grid-section {
  padding: 140px 8%;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 40px;
  }

  /* SERVICE STORY REFINED END */
/* SERVICE HERO IMAGE ENDS */

/* SERVICE CARD START */
.service-card {
  background: var(--navy-light);
  padding: 50px;
  border-radius: 20px;
  position: relative;
  overflow: hidden;
  transition: all 0.4s ease;
}

/* Gold Glow Frame */
.service-card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 20px;
  padding: 1.5px;
  background: linear-gradient(
    135deg,
    rgba(212,175,55,0.9),
    rgba(245,215,110,0.6),
    rgba(212,175,55,0.9)
  );
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
  opacity: 0.6;
  transition: opacity 0.3s ease;
}

.service-card:hover::before {
  opacity: 1;
}

.service-card:hover {
  transform: translateY(-8px);
}
.btn-outline {
  display: inline-block;
  margin-top: 20px;
  padding: 10px 24px;
  border-radius: 30px;
  border: 1px solid var(--gold);
  color: var(--gold);
  text-decoration: none;
  font-weight: 500;
  transition: 0.3s ease;
}

.btn-outline:hover {
  background: var(--gold);
  color: black;
}

/* SERVICE CARD END!! */
.service-note {
  display: block;
  margin-top: 10px;
  color: var(--gold);
  font-size: 14px;
}

/* ================= STRUCTURAL DIFFERENCE CARDS STARTS================= */

 .services-difference {

  padding: 140px 8%;
  text-align: center;
  position: relative;

  background:
  radial-gradient(
    circle at 20% 20%,
    rgba(212,175,55,0.08),
    transparent 40%
  ),
  radial-gradient(
    circle at 80% 80%,
    rgba(212,175,55,0.06),
    transparent 45%
  ),
  linear-gradient(
    180deg,
    #05080F 0%,
    #0B1220 100%
  );

}
.services-difference::before{

content:"";
position:absolute;

top:0;
left:0;
width:100%;
height:100%;

background-image:
radial-gradient(rgba(212,175,55,0.08) 1px, transparent 1px);

background-size:120px 120px;

opacity:0.3;

pointer-events:none;

}
/* ================= PROCESS / OWNERSHIP CARDS ================= */ .process-section
{ 
padding:140px 8%; 
text-align:center;
background: radial-gradient(circle at 20% 30%, rgba(212,175,55,0.08), transparent 40%), radial-gradient(circle at 80% 70%, rgba(212,175,55,0.05), transparent 45%), linear-gradient(180deg,#05080F,#0B1220); }
 /* Grid */ 
.process-grid{ 
display:grid;
grid-template-columns:repeat(3,1fr);
gap:40px; 
max-width:1100px; 
margin:auto; 
}
 /* Card */ 
.process-step{ 
background:rgba(255,255,255,0.02); 
padding:45px; 
border-radius:22px; 
border:1px solid rgba(212,175,55,0.25); 
transition:0.35s ease; 
position:relative; 
overflow:hidden; 
}
 /* gold accent */ 
.process-step
::before{ 
content:""; 
position:absolute; 
top:0; 
left:0; 
width:4px; 
height:100%; 
background:linear-gradient(var(--gold-light),var(--gold)); 
border-radius:22px 0 0 22px;
 }
 /* hover */ 
.process-step:hover{ 
transform:translateY(-10px); border-color:var(--gold); 
box-shadow:0 15px 35px rgba(212,175,55,0.15);
 }


/* ================= STRUCTURAL DIFFERENCE SECTION ENDS ================= */
/* ================= SYSTEM FLOW UPGRADE STARTS ================= */

/* ================= SYSTEM FLOW UPGRADE ================= */

.services-flow {
  padding: 130px 8%;
  text-align: center;
  position: relative;
}

.services-flow h2 {
  font-size: 34px;
  margin-bottom: 60px;
  position: relative;
}

/* Gold Divider */
.services-flow h2::after {
  content: "";
  display: block;
  width: 50px;
  height: 3px;
  background: var(--gold);
  margin: 16px auto 0;
}

/* Flow Container */
.flow-container {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 60px;
  position: relative;
  flex-wrap: wrap;
}

/* Connecting Line */
.flow-container::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 10%;
  width: 80%;
  height: 2px;
  background: linear-gradient(
      to right,
      rgba(212,175,55,0.2),
      var(--gold),
      rgba(212,175,55,0.2)
  );
  transform: translateY(-50%);
  z-index: 0;
  overflow: hidden;
}

/* Moving gold beam */
.flow-container::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 10%;
  width: 20%;
  height: 2px;
  background: linear-gradient(
      to right,
      transparent,
      var(--gold),
      transparent
  );
  transform: translateY(-50%);
  animation: dataMove 4s linear infinite;
}

@keyframes dataMove {
  0% { left: 10%; }
  100% { left: 90%; }
}

/* Flow Nodes */
.flow-node {
  background: var(--navy-light);
  padding: 18px 30px;
  border-radius: 40px;
  font-weight: 500;
  position: relative;
  z-index: 2;
  border: 1px solid rgba(212,175,55,0.25);
  transition: 0.3s ease;
}

/* Hover Glow */
.flow-node:hover {
  transform: translateY(-6px);
  border-color: var(--gold);
  box-shadow: 0 10px 25px rgba(212,175,55,0.25);
}

/* Subtle animated pulse on line */
@keyframes flowPulse {
  0% { opacity: 0.5; }
  50% { opacity: 1; }
  100% { opacity: 0.5; }
}

.flow-container::before {
  animation: flowPulse 4s ease-in-out infinite;
}

/* Flow animation delays */
.delay-1 { transition-delay: 0.1s; }
.delay-2 { transition-delay: 0.3s; }
.delay-3 { transition-delay: 0.5s; }
.delay-4 { transition-delay: 0.7s; }
.delay-5 { transition-delay: 0.9s; }
/* ================= SYSTEM FLOW UPGRADE ENDS ================= */
/* ================= SERVICES FUTURE FINAL ================= */

.services-future {
  padding: 110px 8%; /* reduced from 160 */
  text-align: center;
  position: relative;
  background: linear-gradient(to top, #0d1626, transparent);
}

/* Heading */
.services-future h2 {
  font-size: 34px;
  font-weight: 600;
  margin-bottom: 18px;
  position: relative;
}

/* Gold divider */
.services-future h2::after {
  content: "";
  display: block;
  width: 55px;
  height: 3px;
  background: var(--gold);
  margin: 14px auto 0;
}

/* Paragraph */
.services-future p {
  max-width: 720px;
  margin: 25px auto 35px;
  line-height: 1.7;
  color: var(--muted);
}

/* CTA Button stronger presence */
.services-future .btn-gold {
  padding: 14px 36px;
  font-size: 15px;
  letter-spacing: 0.5px;
  box-shadow: 0 10px 30px rgba(212,175,55,0.2);
}
/* Responsive */
@media (max-width: 1000px) {
  .services-grid-section {
    grid-template-columns: 1fr;
  }
}
/* ================= STRUCTURAL DIFFERENCE SECTION ================= */

.difference-card{

background:linear-gradient(
145deg,
#0E1B2E,
#081425
);

padding:40px;

border-radius:22px;

border:1px solid rgba(212,175,55,0.35);

text-align:left;

transition:all 0.35s ease;

position:relative;

overflow:hidden;

}
.difference-card::after{

content:"";

position:absolute;

top:-40%;
left:-40%;

width:200%;
height:200%;

background:radial-gradient(
circle,
rgba(212,175,55,0.08),
transparent 60%
);

pointer-events:none;

}
/* ===== CARD LIGHT REFLECTION ===== */

.difference-card::before{

content:"";

position:absolute;

top:0;
left:-120%;

width:60%;
height:100%;

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

transform:skewX(-20deg);

transition:0.8s;

}
.difference-card:hover::before{

left:120%;

}
.services-difference h2 {
  font-size: 34px;
  margin-bottom: 70px;
  position: relative;
}

/* Gold Divider */
.services-difference h2::after {
  content: "";
  display: block;
  width: 55px;
  height: 3px;
  background: var(--gold);
  margin: 16px auto 0;
}

/* Grid */
.difference-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 40px;
  max-width: 1100px;
  margin: 0 auto;
}

/* Cards */
.difference-card {
  background: rgba(255,255,255,0.02);
  padding: 45px;
  border-radius: 20px;
  border: 1px solid rgba(212,175,55,0.2);
  text-align: left;
  transition: all 0.4s ease;
  position: relative;
  overflow: hidden;
}

/* Subtle technical accent line */
.difference-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 4px;
  height: 100%;
  background: linear-gradient(var(--gold-light), var(--gold));
  border-radius: 20px 0 0 20px;
  opacity: 0.7;
}

.difference-card h3 {
  margin-bottom: 15px;
  font-size: 20px;
}

.difference-card p {
  color: var(--muted);
  line-height: 1.7;
}

.difference-card:hover {
  transform: translateY(-8px);
  border-color: rgba(212,175,55,0.5);
}

/* Responsive */
@media (max-width: 900px) {
  .difference-grid {
    grid-template-columns: 1fr;
  }
}

/* ================= SERVICES MID CTA ================= */

.services-mid-cta {
  padding: 130px 8%;
  text-align: center;
  position: relative;
  background: linear-gradient(to top, #0d1626, #111c30);
}

.services-mid-cta-inner {
  max-width: 800px;
  margin: 0 auto;
}

.services-mid-cta h2 {
  font-size: 34px;
  margin-bottom: 20px;
  position: relative;
}

.services-mid-cta h2::after {
  content: "";
  display: block;
  width: 55px;
  height: 3px;
  background: var(--gold);
  margin: 16px auto 0;
}

.services-mid-cta p {
  color: var(--muted);
  margin: 30px auto 40px;
  line-height: 1.7;
}

.btn-outline {
  border: 1px solid var(--gold);
  color: var(--gold);
  background: transparent;
  padding: 12px 28px;
}

.btn-outline:hover {
  background: rgba(212,175,55,0.1);
  color: var(--gold-light);
}
.services-mid-cta p {
  max-width: 680px;
}
.services-mid-cta {
  padding: 140px 8%;
}

/* CSS WEBSITE -INFRASTRUCTURE STARTS */

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

.hero{
display:grid;
grid-template-columns:1.2fr 0.8fr;
align-items:center;
padding:0 8%;
min-height:90vh;
}
#donekit-cube{
width:100%;
height:520px;
position:relative;
}
.hero{
display:grid;
grid-template-columns:1.2fr 0.8fr;
align-items:center;
min-height:90vh;
padding:0 8%;
}
.infra-hero-inner {
  max-width: 850px;
  margin: 0 auto;
}

.infra-hero h1 {
  font-size: 52px;
  margin-bottom: 25px;
  letter-spacing: 1px;
}

.infra-hero p {
  color: var(--muted);
  margin-bottom: 40px;
  line-height: 1.7;
}

/* Subtle gold glow background */
.infra-hero::after {
  content: "";
  position: absolute;
  width: 500px;
  height: 500px;
  background: radial-gradient(circle, rgba(212,175,55,0.15), transparent 70%);
  filter: blur(120px);
  top: 20%;
  left: 50%;
  transform: translateX(-50%);
  z-index: 0;
}

.infra-hero-inner {
  position: relative;
  z-index: 2;
}

/* ================= INFRA PROBLEM ================= */

.infra-problem {
  padding: 140px 8%;
  text-align: center;
  background: #0b1220;
}
.infra-hero-inner{
max-width:850px;
margin:auto;
}
.infra-problem h2 {
  font-size: 36px;
  margin-bottom: 30px;
  position: relative;
}

.infra-problem h2::after {
  content: "";
  display: block;
  width: 55px;
  height: 3px;
  background: var(--gold);
  margin: 16px auto 0;
}

.infra-problem p {
  max-width: 750px;
  margin: 20px auto;
  color: var(--muted);
  line-height: 1.8;
}
/* ================= BACKWARDS SECTION ================= */

.backwards-section{

padding:140px 8%;

text-align:center;

background:linear-gradient(180deg,#05080F,#0B1220);

}

/* heading */

.backwards-section h2{

font-size:42px;

margin-bottom:40px;

}

/* list container */

.backwards-list{

display:flex;

flex-direction:column;

gap:18px;

max-width:420px;

margin:0 auto 50px auto;

}

/* list items */

.backwards-list p{

font-size:18px;

color:#d6d6d6;

padding:12px 18px;

border-left:3px solid rgba(212,175,55,0.5);

background:rgba(255,255,255,0.02);

border-radius:6px;

}

/* bottom message */

.backwards-note{

font-size:18px;

color:var(--muted);

}

/* highlight */

.backwards-note span{

color:var(--gold);

font-weight:600;

}
.backwards-list p{

opacity:0;

transform:translateY(20px);

animation:fadeUp 0.8s ease forwards;

}

.backwards-list p:nth-child(1){animation-delay:0.2s;}
.backwards-list p:nth-child(2){animation-delay:0.4s;}
.backwards-list p:nth-child(3){animation-delay:0.6s;}
.backwards-list p:nth-child(4){animation-delay:0.8s;}

@keyframes fadeUp{
to{
opacity:1;
transform:translateY(0);
}
}
/* ================= COMPARISON SECTION ================= */ 
.comparison-section{ 
padding:90px 8%; 
text-align:center; 
background: radial-gradient(circle at 20% 30%, rgba(212,175,55,0.08), transparent 40%), linear-gradient(180deg,#05080F,#0B1220); 
} 
.comparison-section 
h2{ 
font-size:42px; 
margin-bottom:70px;
 }
 /* grid */ 
.comparison-grid
{ 
display:grid; 
grid-template-columns:1fr 2px 1fr; 
gap:60px; 
max-width:1000px; 
margin:auto; 
align-items:start; 
}
 /* divider */
 .comparison-divider
{ 
background:linear-gradient(var(--gold-light),var(--gold)); 
width:2px; 
height:100%; 
opacity:0.6; 
}
 /* titles */
 .comparison-left 
h3
{ 
color:#d8d8d8;
margin-bottom:25px;
 } 
.comparison-right
 h3{ 
color:var(--gold); margin-bottom:25px; 
} 
/* list */ 
.comparison-left ul,
.comparison-right ul
{ 
list-style:none; 
padding:0; 
display:flex; 
flex-direction:column; 
gap:18px;
 } 
.comparison-left li
{ 
color:#cfcfcf; 
padding:10px;
background:rgba(255,255,255,0.02); border-left:3px solid rgba(255,255,255,0.2); border-radius:6px; 
} 
.comparison-right li
{ 
color:#f1e2a6; 
padding:10px; 
background:rgba(255,255,255,0.02); 
border-left:3px solid var(--gold); 
border-radius:6px;
}
 /* bottom text */
 .comparison-note
{ 
margin-top:60px; 
font-size:18px; 
color:#cbb89a; 
} 
.comparison-note 
span{ 
color:var(--gold); 
font-weight:600;
 }


/* ================= INFRA STRUCTURE ================= */

.infra-structure {
  padding: 160px 8%;
  background: linear-gradient(to top, #0d1626, #0b1220);
  text-align: center;
}

.infra-structure h2 {
  font-size: 36px;
  margin-bottom: 80px;
  position: relative;
}

.infra-structure h2::after {
  content: "";
  display: block;
  width: 55px;
  height: 3px;
  background: var(--gold);
  margin: 16px auto 0;
}

/* Grid */
.infra-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 50px;
  max-width: 1100px;
  margin: 0 auto;
}

/* Blocks */
.infra-block {
  background: rgba(255,255,255,0.02);
  padding: 50px;
  border-radius: 22px;
  border: 1px solid rgba(212,175,55,0.2);
  text-align: left;
  transition: all 0.4s ease;
  position: relative;
  overflow: hidden;
}

/* Premium gold accent */
.infra-block::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 4px;
  height: 100%;
  background: linear-gradient(var(--gold-light), var(--gold));
  opacity: 0.7;
}

.infra-block h3 {
  margin-bottom: 15px;
  font-size: 20px;
}

.infra-block p {
  color: var(--muted);
  line-height: 1.7;
}

.infra-block:hover {
  transform: translateY(-10px);
  border-color: rgba(212,175,55,0.5);
  box-shadow: 0 20px 50px rgba(0,0,0,0.4);
}

/* Responsive */
@media (max-width: 900px) {
  .infra-grid {
    grid-template-columns: 1fr;
  }
}
/* WEBSITE INFRASTRUCTURE ENDS  */

/* ================= INFRASTRUCTURE STACK STARTS ================= */ 
.infra-stack{ 
padding:120px 8%;
text-align:center; 
background: radial-gradient(circle at 20% 20%, rgba(212,175,55,0.08), transparent 40%), linear-gradient(180deg,#05080F,#0B1220);
} 
.infra-stack 
h2{ 
font-size:38px;
 margin-bottom:70px; 
}
 /* stack container */
 .infra-stack
{ 
display:flex;
flex-direction:column; 
align-items:center; 
gap:20px; 
}
 /* each layer */
 .infra-layer{ 
width:420px;
 padding:16px 20px;
 border-radius:14px; 
background:rgba(255,255,255,0.02); 
border:1px solid rgba(212,175,55,0.25); 
font-size:15px; 
letter-spacing:1px; 
transition:0.35s ease; position:relative; 
}
 /* gold accent line */ 
.infra-layer::before{ 
content:""; 
position:absolute; 
left:0; 
top:0; 
width:4px; 
height:100%; 
background:linear-gradient(var(--gold-light),var(--gold)); 
border-radius:14px 0 0 14px;
 }
 /* hover */
.infra-layer:hover{ 
transform:translateY(-6px); border-color:var(--gold); 
box-shadow:0 10px 30px rgba(212,175,55,0.15);
}

/* INFRASTRUCTURE STACK EN */
/* CSS DELIVERABLES GRID STARTS */
/* ================= INFRA DELIVERABLES ================= */

.infra-deliverables {
  padding: 150px 8%;
  text-align: center;
  background: #0b1220;
}

.infra-deliverables h2 {
  font-size: 34px;
  margin-bottom: 80px;
  position: relative;
}

.infra-deliverables h2::after {
  content: "";
  display: block;
  width: 55px;
  height: 3px;
  background: var(--gold);
  margin: 16px auto 0;
}

.deliverables-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 50px;
  max-width: 1100px;
  margin: 0 auto;
}

.deliverable-item {
  background: rgba(255,255,255,0.02);
  padding: 45px;
  border-radius: 20px;
  border: 1px solid rgba(212,175,55,0.15);
  transition: all 0.4s ease;
  text-align: left;
}

.deliverable-item h3 {
  margin-bottom: 12px;
  font-size: 18px;
}

.deliverable-item p {
  color: var(--muted);
  line-height: 1.7;
}

.deliverable-item:hover {
  transform: translateY(-8px);
  border-color: rgba(212,175,55,0.5);
}

/* Responsive */
@media (max-width: 900px) {
  .deliverables-grid {
    grid-template-columns: 1fr;
  }
}
/* ================= INFRA DELIVERABLES END ================= */
/* ================= CSS DELIVERABLES GRID END ================= */

/* CSS INFRA TIMELINE STARTS */

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

.infra-timeline {
  padding: 160px 8%;
  text-align: center;
  background: linear-gradient(to top, #0d1626, #0b1220);
}

.infra-timeline h2 {
  font-size: 34px;
  margin-bottom: 90px;
  position: relative;
}

.infra-timeline h2::after {
  content: "";
  display: block;
  width: 55px;
  height: 3px;
  background: var(--gold);
  margin: 16px auto 0;
}

.timeline-container {
  max-width: 900px;
  margin: 0 auto;
}

.timeline-step {
  padding: 30px 0;
  border-bottom: 1px solid rgba(212,175,55,0.15);
}

.timeline-step span {
  display: block;
  font-weight: 600;
  margin-bottom: 10px;
  color: var(--gold);
}

.timeline-step p {
  color: var(--muted);
}
/* INFRA TIMELINE END */

/* ================= INFRA FINAL CTA STARTS ================= */

.infra-final-cta {
  padding: 170px 8%;
  text-align: center;
  background: #0b1220;
}

.infra-final-cta h2 {
  font-size: 38px;
  margin-bottom: 20px;
}

.infra-final-cta p {
  color: var(--muted);
  margin-bottom: 40px;
}

/* ===============================
FOUNDER ALIGNMENT SECTION
This controls the section:
"You Focus on Vision. We Build the System."
=============================== */

.infra-founder{

padding:120px 8%;

background:linear-gradient(
90deg,
#020817 0%,
#0B1220 40%,
#1a2438 70%,
#3a2e13 100%
);

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

}

.infra-founder-inner{

max-width:900px;
width:100%;

}

.infra-founder h2{

font-size:42px;
color:#ffffff;
margin-bottom:20px;

}

.infra-founder p{

font-size:18px;
color:#cbd5e1;
line-height:1.6;
margin-bottom:40px;

}

.infra-founder .btn-gold{

display:inline-block;

}
/* INFRA FINAL CTA END */


/* ================= PRICING CSS ================= */

/* ================= HERO SECTION STARTS================= */

.pricing-hero {
  padding: 160px 8%;
  text-align: center;
  background: linear-gradient(to bottom, #0d1626, #0b1220);
}

.pricing-hero-inner {
  max-width: 800px;
  margin: 0 auto;
}

.pricing-hero h1 {
  font-size: 52px;
  margin-bottom: 20px;
}

.pricing-hero p {
  color: var(--muted);
  line-height: 1.7;
}

.pricing-hero {
  padding: 160px 8%;
  text-align: center;
  background: linear-gradient(to bottom, #0d1626, #0b1220);
}

.pricing-hero-inner {
  max-width: 800px;
  margin: 0 auto;
}

.pricing-hero h1 {
  font-size: 52px;
  margin-bottom: 20px;
}

.pricing-hero p {
  color: var(--muted);
  line-height: 1.7;
}
/* ================= HERO SECTION ENDS================= */

/* ================= GRID SECTION STARTS ================= */

.pricing-section {
  padding: 150px 8%;
  background: #0b1220;
}

.pricing-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
  max-width: 1200px;
  margin: 0 auto;
}

.pricing-card {
  background: rgba(255,255,255,0.02);
  padding: 50px;
  border-radius: 24px;
  border: 1px solid rgba(212,175,55,0.2);
  transition: all 0.4s ease;
  text-align: left;
}

.pricing-card h3 {
  margin-bottom: 10px;
}

.price {
  font-size: 28px;
  margin-bottom: 5px;
  color: var(--gold);
}

.pricing-sub {
  display: block;
  font-size: 13px;
  letter-spacing: 1px;
  text-transform: uppercase;
  margin-bottom: 30px;
  color: var(--muted);
}

.pricing-card ul {
  list-style: none;
  margin-bottom: 30px;
}

.pricing-card li {
  margin-bottom: 12px;
  color: var(--muted);
}

.pricing-card:hover {
  transform: translateY(-10px);
  border-color: rgba(212,175,55,0.5);
  box-shadow: 0 25px 50px rgba(0,0,0,0.4);
}

/* Featured Plan */
.featured {
  border: 1px solid var(--gold);
}

/* Responsive */
@media (max-width: 1000px) {
  .pricing-grid {
    grid-template-columns: 1fr;
  }
}
/* ================= GRID SECTION ENDS ================= */

/* ================= PRICING OWNERSHIP STARTS ================= */

.pricing-ownership {
  padding: 140px 8%;
  text-align: center;
  background: linear-gradient(to top, #0d1626, #0b1220);
}

.pricing-ownership h2 {
  font-size: 34px;
  margin-bottom: 40px;
  position: relative;
}

.pricing-ownership h2::after {
  content: "";
  display: block;
  width: 55px;
  height: 3px;
  background: var(--gold);
  margin: 16px auto 0;
}

.ownership-container {
  max-width: 800px;
  margin: 0 auto;
}

.ownership-container p {
  color: var(--muted);
  line-height: 1.8;
  margin-bottom: 20px;
}

.ownership-highlight {
  color: var(--gold);
  font-weight: 500;
  margin-top: 30px;
}

/* ================= PRICING OWNERSHIP ENDS ================= */

/* ================= PRICING CLARITY STARTS================= */

.pricing-clarity {
  padding: 150px 8%;
  background: #0b1220;
  text-align: center;
}

.pricing-clarity h2 {
  font-size: 34px;
  margin-bottom: 70px;
}

.clarity-box {
  max-width: 700px;
  margin: 0 auto;
  padding: 50px;
  border-radius: 24px;
  border: 1px solid rgba(212,175,55,0.25);
  background: rgba(255,255,255,0.02);
  text-align: left;
}

.clarity-box p {
  margin-bottom: 18px;
  color: var(--muted);
}

/* ================= PRICING CLARITY ENDS================= */

/* ================= PRICING FINAL CTA STARTS================= */

.pricing-final-cta {
  padding: 170px 8%;
  text-align: center;
  background: linear-gradient(to bottom, #0d1626, #0b1220);
}

.pricing-final-cta h2 {
  font-size: 38px;
  margin-bottom: 20px;
}

.pricing-final-cta p {
  color: var(--muted);
  margin-bottom: 40px;
}

.pricing-cta-buttons {
  display: flex;
  justify-content: center;
  gap: 25px;
  flex-wrap: wrap;
}
/* ================= PRICING FINAL CTA ENDS================= */

/* ================= CSS MEGA NAVIGATION STARTS ================= */

.mega-dropdown {
  position: relative;
}

.mega-menu {
  position: absolute;
  top: 130%;
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  width: 900px;
  background: #0f1a2e;
  padding: 40px;
  border-radius: 24px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 30px;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;
  border: 1px solid rgba(212,175,55,0.25);
  box-shadow: 0 30px 60px rgba(0,0,0,0.5);
  z-index: 999;
}

.mega-dropdown:hover .mega-menu {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}

.mega-column h4 {
  margin-bottom: 15px;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--gold);
}

.mega-column a {
  display: block;
  margin-bottom: 15px;
  text-decoration: none;
  color: var(--white);
  font-weight: 500;
}

.mega-column a span {
  display: block;
  font-size: 12px;
  color: var(--muted);
  margin-top: 5px;
}

.mega-column a:hover {
  color: var(--gold);
}
/* ================= CSS MEGA NAVIGATION ENDS ================= */

/* ================= CSS CRM HERO STARTS ================= */

.crm-hero {
  padding: 160px 8%;
  text-align: center;
  background: linear-gradient(to bottom, #0d1626, #0b1220);
  position: relative;
}

.crm-hero-inner {
  max-width: 850px;
  margin: 0 auto;
}

.crm-hero h1 {
  font-size: 50px;
  margin-bottom: 25px;
}

.crm-hero p {
  color: var(--muted);
  margin-bottom: 40px;
  line-height: 1.7;
}

/* Subtle gold glow */
.crm-hero::after {
  content: "";
  position: absolute;
  width: 500px;
  height: 500px;
  background: radial-gradient(circle, rgba(212,175,55,0.15), transparent 70%);
  filter: blur(120px);
  top: 20%;
  left: 50%;
  transform: translateX(-50%);
  z-index: 0;
}

.crm-hero-inner {
  position: relative;
  z-index: 2;
}

/* ================= CSS CRM HERO ENDS ================= */

/* ================= CRM PROBLEM STARTS================= */

.crm-problem {
  padding: 140px 8%;
  text-align: center;
  background: #0b1220;
}

.crm-problem h2 {
  font-size: 34px;
  margin-bottom: 40px;
  position: relative;
}

.crm-problem h2::after {
  content: "";
  display: block;
  width: 55px;
  height: 3px;
  background: var(--gold);
  margin: 16px auto 0;
}

.crm-problem p {
  max-width: 750px;
  margin: 20px auto;
  color: var(--muted);
  line-height: 1.8;
}
/* ================= CRM PROBLEM ENDS================= */

/* ================= CSS CRM FRAMEWORK STARTS================= */

.crm-framework {
  padding: 160px 8%;
  background: linear-gradient(to top, #0d1626, #0b1220);
  text-align: center;
}

.crm-framework h2 {
  font-size: 36px;
  margin-bottom: 80px;
  position: relative;
}

.crm-framework h2::after {
  content: "";
  display: block;
  width: 55px;
  height: 3px;
  background: var(--gold);
  margin: 16px auto 0;
}

.crm-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 50px;
  max-width: 1100px;
  margin: 0 auto;
}

.crm-block {
  background: rgba(255,255,255,0.02);
  padding: 50px;
  border-radius: 22px;
  border: 1px solid rgba(212,175,55,0.2);
  text-align: left;
  transition: all 0.4s ease;
  position: relative;
}

.crm-block::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 4px;
  height: 100%;
  background: linear-gradient(var(--gold-light), var(--gold));
}

.crm-block:hover {
  transform: translateY(-10px);
  border-color: rgba(212,175,55,0.5);
  box-shadow: 0 20px 50px rgba(0,0,0,0.4);
}

.crm-block p {
  color: var(--muted);
}

@media (max-width: 900px) {
  .crm-grid {
    grid-template-columns: 1fr;
  }
}
/* ================= CSS CRM FRAMEWORK END ================= */

/* ================= ARCHITECHT CRM FLOW STARTS ================= */

.crm-flow {
  padding: 150px 8%;
  text-align: center;
  background: #0b1220;
}

.crm-flow h2 {
  font-size: 34px;
  margin-bottom: 70px;
  position: relative;
}

.crm-flow h2::after {
  content: "";
  display: block;
  width: 55px;
  height: 3px;
  background: var(--gold);
  margin: 16px auto 0;
}

.crm-flow-container {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 30px;
  flex-wrap: wrap;
}

.crm-node {
  background: rgba(255,255,255,0.02);
  padding: 18px 28px;
  border-radius: 40px;
  border: 1px solid rgba(212,175,55,0.25);
  transition: 0.3s ease;
}

.crm-node:hover {
  transform: translateY(-6px);
  border-color: var(--gold);
}

.crm-arrow {
  color: var(--gold);
  font-size: 22px;
  opacity: 0.6;
}
/* ================= ARCHITECHT CRM FLOW END ================= */

/* ================= CRM DELIVERABLES ================= */

.crm-deliverables {
  padding: 160px 8%;
  text-align: center;
  background: linear-gradient(to top, #0d1626, #0b1220);
}

.crm-deliverables h2 {
  font-size: 34px;
  margin-bottom: 80px;
}

.crm-deliver-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 40px;
  max-width: 1100px;
  margin: 0 auto;
}

.crm-deliver-item {
  background: rgba(255,255,255,0.02);
  padding: 45px;
  border-radius: 20px;
  border: 1px solid rgba(212,175,55,0.2);
  text-align: left;
  transition: 0.3s ease;
}

.crm-deliver-item:hover {
  transform: translateY(-8px);
  border-color: rgba(212,175,55,0.5);
}

.crm-deliver-item p {
  color: var(--muted);
}

@media (max-width: 900px) {
  .crm-deliver-grid {
    grid-template-columns: 1fr;
  }
}
/* ================= CRM DELIVERABLES END ================= */

/* ================= CRM OWNERSHIP STARTS ================= */

.crm-ownership {
  padding: 150px 8%;
  text-align: center;
  background: #0b1220;
}

.crm-ownership h2 {
  font-size: 34px;
  margin-bottom: 30px;
}

.crm-ownership p {
  max-width: 750px;
  margin: 20px auto;
  color: var(--muted);
  line-height: 1.8;
}

/* ================= CRM OWNERSHIP END ================= */
/* ================= CRM FINAL CTA STARTS ================= */

.crm-final-cta {
  padding: 170px 8%;
  text-align: center;
  background: linear-gradient(to bottom, #0d1626, #0b1220);
}

.crm-final-cta h2 {
  font-size: 38px;
  margin-bottom: 20px;
}

.crm-final-cta p {
  color: var(--muted);
  margin-bottom: 40px;
}
/* ================= CRM FINAL CTA END ================= */

/* ================= MOBILE HERO STARTS================= */

.mobile-hero {
  padding: 160px 8%;
  text-align: center;
  background: linear-gradient(to bottom, #0d1626, #0b1220);
  position: relative;
}
/* ================= MOBILE HERO 3D ================= */

#iphone-3d{

width:100%;
height:520px;

}
.mobile-hero-inner {
  max-width: 850px;
  margin: 0 auto;
}

.mobile-hero h1 {
  font-size: 50px;
  margin-bottom: 25px;
}

.mobile-hero p {
  color: var(--muted);
  margin-bottom: 40px;
  line-height: 1.7;
}

.mobile-hero::after {
  content: "";
  position: absolute;
  width: 500px;
  height: 500px;
  background: radial-gradient(circle, rgba(212,175,55,0.15), transparent 70%);
  filter: blur(120px);
  top: 20%;
  left: 50%;
  transform: translateX(-50%);
}
/* MOBILR HERO END */

/* ================= MOBILE PROBLEM ================= */

.mobile-problem {
  padding: 140px 8%;
  text-align: center;
  background: #0b1220;
}

.mobile-problem h2 {
  font-size: 34px;
  margin-bottom: 40px;
}

.mobile-problem p {
  max-width: 750px;
  margin: 20px auto;
  color: var(--muted);
  line-height: 1.8;
}
/*  MOBILE PROBLEM END */

/* ================= MOBILE FRAMEWORK ================= */

.mobile-framework {
  padding: 160px 8%;
  background: linear-gradient(to top, #0d1626, #0b1220);
  text-align: center;
}

.mobile-framework h2 {
  font-size: 36px;
  margin-bottom: 80px;
}

.mobile-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 50px;
  max-width: 1100px;
  margin: 0 auto;
}

.mobile-block {
  background: rgba(255,255,255,0.02);
  padding: 50px;
  border-radius: 22px;
  border: 1px solid rgba(212,175,55,0.2);
  text-align: left;
  transition: 0.4s ease;
}

.mobile-block:hover {
  transform: translateY(-10px);
  border-color: rgba(212,175,55,0.5);
}

.mobile-block p {
  color: var(--muted);
}

@media (max-width: 900px) {
  .mobile-grid {
    grid-template-columns: 1fr;
  }
}
/* ================= MOBILE FRAMEWORK END ================= */

/* ================= MOBILE PAYMENT ================= */

.mobile-payment {
  padding: 140px 8%;
  text-align: center;
  background: #0b1220;
}

.mobile-payment h2 {
  font-size: 34px;
  margin-bottom: 30px;
}

.mobile-payment p {
  max-width: 750px;
  margin: 20px auto;
  color: var(--muted);
}
/* ================= MOBILE PAYMENT END ================= */
/* ================= MOBILE DIWALI ================= */

.mobile-diwali {
  padding: 160px 8%;
  text-align: center;
  background: linear-gradient(to bottom, #0d1626, #0b1220);
}

.mobile-diwali h2 {
  font-size: 34px;
  margin-bottom: 30px;
  color: var(--gold);
}

.mobile-diwali p {
  max-width: 750px;
  margin: 20px auto;
  color: var(--muted);
}
/* ================= MOBILE DIWALI END ================= */
/* ================= MOBILE FINAL CTA ================= */

.mobile-final-cta {
  padding: 170px 8%;
  text-align: center;
  background: #0b1220;
}

.mobile-final-cta h2 {
  font-size: 38px;
  margin-bottom: 20px;
}

.mobile-final-cta p {
  color: var(--muted);
  margin-bottom: 40px;
}
/* ================= MOBILE FINAL CTA END ================= */
.logo {
  display: flex;
  align-items: center;
  gap: 12px;
}

.logo-video {
  width: 100px;        /* Premium size */
  height: 100px;
  object-fit: contain;
  border-radius: 100%; /* Makes it circular if needed */
}

.logo-text {
  font-size: 18px;
  font-weight: 600;
  color: #d4af37; /* Gold */
  line-height: 1.2;
}
/* ===== INFRASTRUCTURE MEGA MENU ENHANCEMENT ===== */

.dropdown-menu {
  min-width: 280px;
  padding: 15px 0;
}

.dropdown-menu a {
  padding: 14px 24px;
  font-size: 14px;
  text-align: left;
}

.dropdown-menu a::after {
  bottom: 10px;
  width: 0%;
}

.dropdown-menu a:hover::after {
  width: 35%;
}

/* INFRASTRUCTURE ENGINE */

.infra-engine{
padding:140px 8%;
text-align:center;
}

.infra-engine h2{
font-size:38px;
margin-bottom:10px;
}

.engine-sub{
color:var(--muted);
margin-bottom:80px;
}

/* Pyramid Layout */

.engine-pyramid{
max-width:1000px;
margin:auto;
display:flex;
flex-direction:column;
gap:40px;
}

.engine-row{
display:flex;
justify-content:center;
gap:40px;
flex-wrap:wrap;
}

/* Cards */

.engine-step{
background:var(--navy-light);
padding:35px;
border-radius:18px;
width:240px;
border:1px solid rgba(212,175,55,0.25);
transition:0.35s ease;
}

.engine-step:hover{
transform:translateY(-8px);
border-color:var(--gold);
}

/* Number Circle */

.engine-circle{
width:48px;
height:48px;
border-radius:50%;
background:linear-gradient(145deg,var(--gold-light),var(--gold));
color:black;
display:flex;
align-items:center;
justify-content:center;
font-weight:700;
margin:0 auto 15px;
}
.engine-step{
width:260px;
}
.engine-row{
margin-top:10px;
}
/* OWNERSHIP SECTION */

.ownership-section{
padding:140px 8%;
text-align:center;
background:linear-gradient(to bottom,#0d1626,transparent);
}

.ownership-section h2{
font-size:36px;
margin-bottom:10px;
}

.ownership-sub{
color:var(--muted);
margin-bottom:70px;
max-width:700px;
margin-left:auto;
margin-right:auto;
}

.ownership-grid{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:40px;
max-width:1100px;
margin:auto;
}

/* ================= OWNERSHIP CARDS ================= */
.card{

background:linear-gradient(
180deg,
#13345c,
#0b2445
);

padding:45px;

border-radius:22px;

border:1px solid rgba(212,175,55,0.5);

text-align:center;

transition:all 0.35s ease;

box-shadow:
0 8px 30px rgba(0,0,0,0.5),
0 0 12px rgba(212,175,55,0.15);

min-height:180px;

}

/* Hover Effect */

.card:hover{

transform:translateY(-8px);

background:linear-gradient(
180deg,
#1a4272,
#0d2e58
);

border-color:#F5D76E;

box-shadow:
0 18px 45px rgba(0,0,0,0.65),
0 0 25px rgba(212,175,55,0.35);

}

/* Card Title */

.card h3{

font-size:20px;

margin-bottom:15px;

font-weight:600;

color:#ffffff;

}

/* Card Text */

.card p{

color:#d4c49a;

line-height:1.7;

max-width:260px;

margin:auto;

}

/* Grid spacing */

.grid{
gap:50px;
}
/* OWNERSHIP CARD END */
/* OWNERSHIP SECTION ENDS */

/* PROCESS SECTION STARTS */
.process-section{
padding:140px 8%;
text-align:center;
}

.process-section h2{
font-size:36px;
margin-bottom:10px;
}

.process-sub{
color:var(--muted);
max-width:700px;
margin:auto;
margin-bottom:80px;
}

.process-grid{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:40px;
max-width:1200px;
margin:auto;
}

.process-step{
background:var(--navy-light);
padding:35px;
border-radius:18px;
border:1px solid rgba(212,175,55,0.25);
transition:0.3s ease;
}

.process-step:hover{
transform:translateY(-6px);
border-color:var(--gold);
}

.process-number{
width:45px;
height:45px;
border-radius:50%;
background:linear-gradient(145deg,var(--gold-light),var(--gold));
color:rgb(73, 131, 218);
display:flex;
align-items:center;
justify-content:center;
font-weight:700;
margin:0 auto 15px;
}

.process-step p{
color:var(--muted);
}
.section h2::after{

content:"";

display:block;

width:60px;

height:3px;

background:var(--gold);

margin:14px auto 0;

}
.card{
position:relative;
overflow:hidden;
}

/* gold light sweep */

.card::after{

content:"";

position:absolute;

top:0;
left:-120%;

width:60%;
height:100%;

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

transform:skewX(-20deg);

transition:0.8s;

}

/* sweep animation on hover */

.card:hover::after{

left:120%;

}
.card h3{
color:#ffffff;
letter-spacing:0.3px;
}
/* PROCESS SECTIONS ENDS */

/* AUDIENCE SECTION STARTS*/

.audience-section{
padding:140px 8%;
text-align:center;
background:linear-gradient(to top,#0d1626,transparent);
}

.audience-section h2{
font-size:36px;
margin-bottom:10px;
}

.audience-sub{
color:var(--muted);
margin-bottom:80px;
max-width:700px;
margin-left:auto;
margin-right:auto;
}

.audience-grid{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:40px;
max-width:1100px;
margin:auto;
}

.audience-card{
background:var(--navy-light);
padding:40px;
border-radius:18px;
border:1px solid rgba(212,175,55,0.25);
transition:0.3s ease;
}

.audience-card:hover{
transform:translateY(-6px);
border-color:var(--gold);
}

.audience-card p{
color:var(--muted);
}
/* AUDIENCE SECTION ENDS */
/* DONEKIT PHILOSOPHY STARTS */

.philosophy-section{
padding:160px 8%;
text-align:center;
}

.philosophy-section h2{
font-size:36px;
margin-bottom:80px;
}

.philosophy-grid{
display:grid;
grid-template-columns:repeat(2,1fr);
gap:40px;
max-width:900px;
margin:auto;
}

.philosophy-item{
background:var(--navy-light);
padding:35px;
border-radius:18px;
font-size:18px;
letter-spacing:0.5px;
color:var(--muted);
border:1px solid rgba(212,175,55,0.2);
transition:0.3s ease;
}

.philosophy-item:hover{
transform:translateY(-6px);
color:var(--white);
border-color:var(--gold);
}
/* DONEKIT PHILOSOPHY ENDS */

/* Sticky Glass Navbar */
.navbar{
position:sticky;
top:0;
z-index:1000;
backdrop-filter:blur(10px);
background:rgba(11,18,32,0.75);
border-bottom:1px solid rgba(212,175,55,0.15);
}
.service-card:hover,
.ownership-card:hover,
.process-step:hover,
.audience-card:hover{

box-shadow:0 10px 35px rgba(212,175,55,0.15);
}

/* BRANDING CSS STARTS */

/* HERO SECTION STARTS */
.service-hero{
padding:120px 8%;
text-align:center;
max-width:900px;
margin:auto;
}

.service-hero h1{
font-size:48px;
margin-bottom:20px;
}

.service-hero p{
color:var(--muted);
margin-bottom:30px;
}
/* HERO SECTION ENDS */
/* DETAIL GRID STARTS */
.detail-section{
padding:120px 8%;
text-align:center;
}

.detail-grid{
display:grid;
grid-template-columns:repeat(2,1fr);
gap:40px;
max-width:1000px;
margin:auto;
margin-top:50px;
}

.detail-card{
background:var(--navy-light);
padding:35px;
border-radius:18px;
border:1px solid rgba(212,175,55,0.25);
transition:0.3s;
}

.detail-card:hover{
transform:translateY(-6px);
}
/* DETAIL GRID ENDS */
/* PRICING SECTION STARTS */
.pricing-box{
max-width:700px;
margin:auto;
text-align:center;
background:var(--navy-light);
padding:50px;
border-radius:18px;
border:1px solid rgba(212,175,55,0.25);
margin-top:40px;
}
/* PRICING SECTION ENDS */
/* FAQ STARTS */
.faq-box{
max-width:800px;
margin:auto;
text-align:left;
margin-top:40px;
}

.faq-box h3{
margin-top:25px;
color:var(--gold);
}
/* FAQ ENDS */
/* FINAL CTA SECTION STARTS */
.cta-section{
padding:140px 8%;
text-align:center;
background:linear-gradient(to top,#0d1626,transparent);
}

.cta-section p{
color:var(--muted);
margin:20px 0 30px;
}
/* FINAL CTA SECTION ENDS */

/* CSS – PREMIUM BRAND CARDS SERVICES STARTS */

.brand-services{
padding:120px 8%;
text-align:center;
}

.brand-services h2{
font-size:36px;
margin-bottom:60px;
}

.brand-grid{
display:grid;
grid-template-columns:repeat(2,1fr);
gap:40px;
max-width:1100px;
margin:auto;
}

.brand-card{
background:var(--navy-light);
padding:40px;
border-radius:20px;
border:1px solid rgba(212,175,55,0.25);
transition:0.3s;
position:relative;
overflow:hidden;
text-align:left;
}

.brand-card h3{
margin-bottom:15px;
}

.brand-card p{
color:var(--muted);
margin-bottom:20px;
}

.brand-card ul{
list-style:none;
padding:0;
}

.brand-card li{
margin-bottom:8px;
color:var(--muted);
}

.brand-card:hover{
transform:translateY(-8px);
border-color:var(--gold);
}
/* CSS- PREMIUM BRAND CARD SERVICES ENDS  */
/* DESIGN PRICING STARTS */
.design-pricing{
padding:120px 8%;
text-align:center;
}

.design-pricing h2{
font-size:36px;
margin-bottom:60px;
}

.design-grid{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:40px;
max-width:1100px;
margin:auto;
}

.design-card{
background:var(--navy-light);
padding:40px;
border-radius:20px;
border:1px solid rgba(212,175,55,0.25);
text-align:left;
transition:0.3s;
}

.design-card:hover{
transform:translateY(-8px);
border-color:var(--gold);
}

.design-card h3{
margin-bottom:10px;
}

.pricing-box{
max-width:650px;
margin:60px auto;
text-align:center;
background:var(--navy-light);
padding:60px 50px;
border-radius:20px;
border:1px solid rgba(212,175,55,0.25);
position:relative;
transition:0.3s ease;
}

.pricing-box:hover{
transform:translateY(-6px);
border-color:var(--gold);
}
.pricing-box h3{
font-size:24px;
margin-bottom:15px;
}

.pricing-box p{
color:var(--muted);
line-height:1.7;
margin-bottom:25px;
}
.pricing-box::before{
content:"";
position:absolute;
inset:0;
border-radius:20px;
padding:1px;
background:linear-gradient(
135deg,
rgba(212,175,55,0.8),
rgba(245,215,110,0.5),
rgba(212,175,55,0.8)
);
-webkit-mask:
linear-gradient(#000 0 0) content-box,
linear-gradient(#000 0 0);
-webkit-mask-composite:xor;
mask-composite:exclude;
opacity:0.6;
pointer-events:none;
}
.design-card ul{
list-style:none;
padding:0;
}
.design-card li{
margin-bottom:8px;
color:var(--muted);
}
/* DESIGN PRICING ENDS */

/* CSS REATAINER CARDS STARTS */
.brand-process{
padding:120px 8%;
text-align:center;
}

.brand-process h2{
font-size:36px;
margin-bottom:60px;
}

.process-grid{
display:grid;
grid-template-columns:repeat(5,1fr);
gap:30px;
max-width:1200px;
margin:auto;
}

.process-card{
background:var(--navy-light);
padding:35px;
border-radius:18px;
border:1px solid rgba(212,175,55,0.25);
transition:0.3s ease;
position:relative;
}

.process-card span{
display:inline-block;
width:45px;
height:45px;
border-radius:50%;
background:var(--gold);
color:black;
font-weight:700;
line-height:45px;
margin-bottom:15px;
}

.process-card h3{
margin-bottom:10px;
}

.process-card p{
color:var(--muted);
font-size:14px;
}

.process-card:hover{
transform:translateY(-6px);
border-color:var(--gold);
}
/* CSS REATAINER CARDS ENDS */

@media (max-width:1000px){

.process-grid{
grid-template-columns:1fr;
}
/* CSS LOGO STYLES STARTS */
}
.logo-styles{
padding:120px 8%;
text-align:center;
}

.logo-styles h2{
font-size:36px;
margin-bottom:60px;
}

.logo-grid{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:40px;
max-width:1100px;
margin:auto;
}

.logo-card{
background:var(--navy-light);
padding:40px;
border-radius:18px;
border:1px solid rgba(212,175,55,0.25);
transition:0.3s ease;
}

.logo-card h3{
margin-bottom:10px;
}

.logo-card p{
color:var(--muted);
}

.logo-card:hover{
transform:translateY(-6px);
border-color:var(--gold);
}
.logo-styles{
padding:120px 8%;
text-align:center;
}

.logo-styles h2{
font-size:36px;
margin-bottom:60px;
}

.logo-grid{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:40px;
max-width:1100px;
margin:auto;
}

.logo-card{
background:var(--navy-light);
padding:40px;
border-radius:20px;
border:1px solid rgba(212,175,55,0.25);
transition:0.3s ease;
text-align:center;
}

.logo-card:hover{
transform:translateY(-6px);
border-color:var(--gold);
}

.logo-icon{
width:55px;
height:55px;
border-radius:50%;
background:var(--gold);
color:black;
display:flex;
align-items:center;
justify-content:center;
font-weight:700;
margin:0 auto 15px auto;
}

.logo-card h3{
margin-bottom:10px;
}

.logo-card p{
color:var(--muted);
}
/* CSS LOGO STYLES ENDS */
@media (max-width:1000px){

.logo-grid{
grid-template-columns:1fr;
}

}
/* LOGO  STARTS */
.logo{
display:flex;
align-items:center;
text-decoration:none;
}

.logo-img{
height: 68px;
width:auto;
transition:0.4s ease;
}

.logo-img:hover{
transform:scale(1.08);
}
.logo-img{
animation:logoGlow 4s infinite alternate;
}

@keyframes logoGlow{
0%{
filter:drop-shadow(0 0 4px rgba(212,175,55,0.3));
}
100%{
filter:drop-shadow(0 0 14px rgba(212,175,55,0.8));
}
}
.logo-img{
filter:drop-shadow(0 0 8px rgba(212,175,55,0.6));
}
.logo-img:hover{
transform:scale(1.08) rotate(5deg);
transition:0.4s ease;
}
.logo{
position:relative;
display:flex;
align-items:center;
}

.logo-img{
height:70px;
width:auto;
display:block;
}

/* Shine overlay */

.logo::after{
content:"";
position:absolute;
top:0;
left:-120%;
width:60%;
height:100%;
background:linear-gradient(
120deg,
transparent,
rgba(255,255,255,0.6),
transparent
);
transform:skewX(-20deg);
animation:logoShine 4s infinite;
}

@keyframes logoShine{
0%{
left:-120%;
}
50%{
left:120%;
}
100%{
left:120%;
}
}
/* LOGO  ENDS */
#hero-3d{
height:520px;
width:100%;
position: relative;
}
#hero-3d{
height:60vh;
min-height:420px;
width:100%;
}
/* ================= ROCKET LAUNCH HERO ================= */

#rocket-launch{
width:100%;
height:520px;
}

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

.contact-hero{

position:relative;
padding:140px 8% 100px;
text-align:center;

background:
linear-gradient(rgba(5,8,20,.80),rgba(5,8,20,.88)),
radial-gradient(circle at left,#5b4513 0%,transparent 45%),
#08101d;

overflow:hidden;

}

.contact-hero h1{

font-size:58px;
line-height:1.15;
max-width:900px;
margin:auto;

color:#fff;

font-weight:800;

}

.contact-hero p{

max-width:820px;
margin:35px auto;

font-size:21px;

color:#d8d8d8;

line-height:1.8;

}

.hero-buttons{

display:flex;
justify-content:center;
align-items:center;
gap:25px;
margin-top:40px;
flex-wrap:wrap;

}

.btn-outline{

padding:15px 34px;

border:2px solid #D4AF37;

border-radius:40px;

color:#D4AF37;

text-decoration:none;

font-weight:600;

transition:.35s;

}

.btn-outline:hover{

background:#D4AF37;

color:#111;

}


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

.contact-info{

padding:100px 8%;

background:#08101d;

}

.contact-info h2{

text-align:center;

font-size:44px;

margin-bottom:15px;

color:#fff;

}

.contact-info>p{

text-align:center;

color:#bfbfbf;

margin-bottom:60px;

font-size:18px;

}

.contact-grid{

display:grid;

grid-template-columns:repeat(4,1fr);

gap:30px;

}

.contact-card{

background:#121d2c;

padding:40px 30px;

border-radius:18px;

text-align:center;

border:1px solid rgba(212,175,55,.20);

transition:.35s;

}

.contact-card:hover{

transform:translateY(-10px);

box-shadow:0 15px 40px rgba(212,175,55,.20);

border-color:#D4AF37;

}

.contact-card .icon{

width:70px;

height:70px;

background:linear-gradient(145deg,#F7D878,#C79A16);

border-radius:50%;

display:flex;

justify-content:center;

align-items:center;

margin:auto;

margin-bottom:25px;

color:#111;

font-size:28px;

}

.contact-card h3{

margin-bottom:20px;

color:#fff;

font-size:24px;

}

.contact-card p{

margin-bottom:10px;

color:#d2d2d2;

line-height:1.7;

}

.whatsapp-btn{

display:inline-block;

margin-top:15px;

padding:12px 30px;

background:#25D366;

color:#fff;

text-decoration:none;

border-radius:30px;

font-weight:600;

transition:.3s;

}

.whatsapp-btn:hover{

transform:scale(1.05);

}


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

.contact-form{

padding:100px 8%;

background:#0b1322;

}

.contact-form h2{

text-align:center;

font-size:44px;

margin-bottom:50px;

}

.contact-form form{

max-width:850px;

margin:auto;

display:grid;

grid-template-columns:1fr 1fr;

gap:25px;

}

.contact-form input,

.contact-form textarea,

.contact-form select{

width:100%;

padding:16px;

background:#182334;

border:1px solid rgba(255,255,255,.08);

border-radius:12px;

color:white;

font-size:16px;

}

.contact-form textarea{

grid-column:span 2;

height:180px;

resize:none;

}

.contact-form button{

grid-column:span 2;

justify-self:center;

margin-top:20px;

}


/* ==========================
MAP
==========================*/

.map-section{

padding:0;

}

.map-section iframe{

width:100%;

height:450px;

border:none;

display:block;

}


/* ==========================
RESPONSIVE
==========================*/

@media(max-width:992px){

.contact-grid{

grid-template-columns:repeat(2,1fr);

}

.contact-form form{

grid-template-columns:1fr;

}

.contact-form textarea,

.contact-form button{

grid-column:span 1;

}

.contact-hero h1{

font-size:42px;

}

}

@media(max-width:768px){

.contact-grid{

grid-template-columns:1fr;

}

.contact-hero{

padding:120px 25px 80px;

}

.contact-hero h1{

font-size:34px;

}

.contact-hero p{

font-size:17px;

}

.hero-buttons{

flex-direction:column;

}

}