
/* ===== RESET ===== */
*{margin:0;padding:0;box-sizing:border-box;}

body{
font-family:'Inter',sans-serif;
overflow-x:hidden;
background:radial-gradient(circle at top left,#edf4ff,#ffffff 40%),
           radial-gradient(circle at bottom right,#e6f0ff,#ffffff 45%);
background-attachment:fixed;
}

/* ===== HEADER ===== */
header{
position:fixed;
width:100%;
z-index:1000;
display:flex;
justify-content:center;
top:0;
}

.navbar{
width:85%;
background:rgba(15,99,169,0.9);
backdrop-filter:blur(12px);
border-bottom-left-radius:25px;
border-bottom-right-radius:25px;
padding:20px 35px;
display:flex;
align-items:center;
justify-content:space-between;
box-shadow:0 10px 25px rgba(0,0,0,.25);
border-bottom:2px solid #d4af37;
}

.logo{
font-size:28px;
font-weight:700;
color:white;
letter-spacing:1px;
}

.join-btn{
background:white;
color:#0f63a9;
padding:8px 22px;
border-radius:30px;
text-decoration:none;
font-weight:600;
font-size:14px;
transition:.3s;
}

.join-btn:hover{
background:#0f63a9;
color:white;
}

/* ===== HERO ===== */
.hero{
height:100vh;
background:url("https://gardeniadevelopers.com/images/form-image.png") no-repeat center center/cover;
position:relative;
display:flex;
align-items:flex-end;
justify-content:space-between;
padding:80px 8%;
animation:heroZoom 18s ease-in-out infinite alternate;
}

@keyframes heroZoom{
0%{ background-size:100%; }
100%{ background-size:110%; }
}

/* overlay */
.overlay{
background:linear-gradient(to right, rgba(0,0,0,.9), rgba(0,0,0,.2));
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
}

/* ===== RIGHT CONTENT ===== */
.hero-content{
position:relative;
text-align:right;
color:white;
z-index:2;
margin-left:auto;
margin-bottom:60px;
}

.hero-content h1{
font-family:'Playfair Display',serif;
font-size:80px;
}

.hero-content span{
color:#d4af37;
font-style:italic;
}

.hero-content h2{
font-size:42px;
margin-top:10px;
}

.hero-content p{
margin-top:10px;
font-size:18px;
letter-spacing:1px;
}

/* ===== GOLD MARQUEE ===== */
.exp-box{
position:relative;
z-index:2;
color:#fff;
width:300px;
height:75%;
overflow:hidden;
display:flex;
align-items:flex-end;
}

.exp-box::before{
content:"";
position:absolute;
left:0;
top:0;
width:2px;
height:100%;
background:linear-gradient(to bottom,#caa65b,#f5e6c4,#caa65b,transparent);
box-shadow:0 0 12px rgba(212,175,55,.7);
}

/* track */
.exp-track{
display:flex;
flex-direction:column;
gap:80px;
animation:scrollGold 18s linear infinite;
padding-left:35px;
}

/* item vertical layout */
.exp-item{
display:flex;
flex-direction:column;
align-items:flex-start;
gap:6px;
font-size:16px;
letter-spacing:1px;
}

/* icon top */
.exp-item i{
font-size:18px;
color:#d4af37;
margin-bottom:6px;
}

/* number */
.exp-item span{
font-size:52px;
font-weight:700;
font-family:'Playfair Display',serif;
background:linear-gradient(45deg,#caa65b,#f5e6c4,#caa65b);
-webkit-background-clip:text;
-webkit-text-fill-color:transparent;
text-shadow:0 0 18px rgba(212,175,55,.35);
line-height:1;
}

@keyframes scrollGold{
0%{ transform:translateY(100%); }
100%{ transform:translateY(-120%); }
}

/* ===== SOCIAL BAR (UNCHANGED EXACT ANIMATION) ===== */
.social-bar{
position:fixed;
bottom:20px;
left:50%;
transform:translateX(-50%);
display:flex;
gap:12px;
padding:10px 18px;
background:rgba(0,0,0,0.65);
backdrop-filter:blur(10px);
border-radius:45px;
box-shadow:0 10px 25px rgba(0,0,0,.4);
z-index:999;
overflow:hidden;
}

.social-bar::before{
content:"";
position:absolute;
inset:-3px;
border-radius:50px;
background:conic-gradient(#d4af37,#d4af37,#d4af37,#d4af37,#d4af37);
animation:goldSpin 4s linear infinite;
z-index:-1;
}

.social-bar::after{
content:"";
position:absolute;
inset:2px;
border-radius:40px;
background:rgba(0,0,0,0.65);
z-index:-1;
}

@keyframes goldSpin{
100%{transform:rotate(360deg);}
}

.social-bar a{
width:46px;
height:46px;
color:white;
border-radius:50%;
display:flex;
align-items:center;
justify-content:center;
text-decoration:none;
font-size:17px;
box-shadow:0 4px 10px rgba(0,0,0,.2);
transition:all 0.4s ease;
position:relative;
perspective:800px;
}

.social-bar a:nth-child(1){ background:#1877f2; }
.social-bar a:nth-child(2){ background:#000000; }
.social-bar a:nth-child(3){ background:#e1306c; }
.social-bar a:nth-child(4){ background:#0077b5; }
.social-bar a:nth-child(5){ background:#ff0000; }

.social-bar a:hover{
transform:rotateY(180deg) scale(1.05);
box-shadow:0 0 12px rgba(255,215,0,0.6),
           0 0 25px rgba(255,215,0,0.3);
}

.social-bar a:hover i{
transform:rotateY(180deg);
}

.social-bar a::after{
content:"";
position:absolute;
inset:-3px;
border-radius:50%;
border:2px solid rgba(255,215,0,0.7);
opacity:0;
transition:0.4s;
}

.social-bar a:hover::after{
opacity:1;
}

/* ===== MOBILE ===== */
@media(max-width:768px){

.hero{
flex-direction:column;
align-items:center;
justify-content:flex-end;
padding-bottom:100px;
animation:none;
}

.exp-box{display:none;}

.hero-content{
text-align:center;
margin-bottom:40px;
}

.hero-content h1{font-size:44px;}
.hero-content h2{font-size:26px;}
.hero-content p{font-size:14px;}
}
/*  */
/* ===== ABOUT SECTION ===== */
.about-sk{
padding:140px 8%;
background:#f4f4f4;
overflow:hidden;
}

.about-wrap{
display:grid;
grid-template-columns:160px 1fr 0.9fr;
gap:70px;
align-items:start;
}

/* ===== HUGE LETTER DESKTOP ===== */
.about-letter{
font-family:'Playfair Display',serif;
font-size:340px;
font-weight:700;
color:#c7a461;
line-height:.75;
opacity:.9;
align-self:start;
margin-top: -155px;
}

/* ===== CONTENT ===== */
.about-content{
max-width:620px;
padding-top:40px;
}

.about-title{
font-size:40px;
letter-spacing:2px;
margin-bottom:25px;
}

.about-content p{
font-size:17px;
line-height:1.8;
margin-bottom:18px;
color:#222;
}

/* bottom grid */
.about-grid{
display:grid;
grid-template-columns:1fr 1fr;
/* gap:50px; */
gap: 15px;
margin-top:35px;
}

.about-grid h4{
color:#c7a461;
margin-bottom:8px;
font-size:20px;
}

.about-grid p{
font-size:16px;
line-height:1.6;
}

/* ===== RIGHT IMAGE PREMIUM ===== */
.about-image{
display:flex;
justify-content:center;
}

.img-frame{
position:relative;
padding:18px;
border:1px solid rgba(199,164,97,.4);
}

.img-frame::before,
.img-frame::after{
content:"";
position:absolute;
width:60px;
height:60px;
border:2px solid #c7a461;
}

.img-frame::before{
top:-10px;
left:-10px;
border-right:none;
border-bottom:none;
}

.img-frame::after{
bottom:-10px;
right:-10px;
border-left:none;
border-top:none;
}

.img-frame img{
width:420px;
height:620px;
object-fit:cover;
display:block;
}

/* ===============================
   TABLET VIEW
   =============================== */
@media(max-width:1100px){

.about-wrap{
grid-template-columns:120px 1fr;
gap:40px;
align-items:start;
}

/* image stays normal */
.about-image{
margin-top:30px;
justify-content:flex-start;
}

.img-frame img{
width:360px;
height:500px;
}

/* responsive A */
.about-letter{
font-size:220px;
margin-top: -90px;
}

}

/* ===============================
   MOBILE VIEW
   =============================== */
@media(max-width:768px){

.about-wrap{
grid-template-columns:1fr;
gap: 0;
}

.about-letter{
font-size:120px;
margin-bottom:-10px;
}

.about-content{
padding-top:0;
}

.about-title{
font-size:30px;
}

.about-content p{
font-size:15px;
}

.about-grid{
grid-template-columns:1fr;
gap:25px;
}

.about-image{
margin-top:40px;
justify-content:center;
}

.img-frame img{
width:100%;
max-width:320px;
height:440px;
}

}

/* SMALL MOBILE */
@media(max-width:480px){

.about-letter{
font-size:90px;
}

.about-title{
font-size:26px;
margin-top: -50px;
margin-left: 63px;
}

.img-frame img{
height:400px;
}

}
/* ===============================
   PREMIUM ABOUT ANIMATION
   =============================== */

/* hidden state */
.about-letter,
.about-title,
.about-content p,
.about-grid,
.about-image{
opacity:0;
transform:translateY(60px);
transition:all 1s cubic-bezier(.16,1,.3,1);
}

/* big A special entry */
.about-letter{
transform:translateY(120px) scale(.92);
transition:all 1.2s cubic-bezier(.16,1,.3,1);
}

/* image cinematic */
.about-image{
transform:translateY(80px) scale(.94);
transition:all 1.2s cubic-bezier(.16,1,.3,1);
}

/* when visible */
.about-show .about-letter{
opacity:1;
transform:translateY(0) scale(1);
}

.about-show .about-title{
opacity:1;
transform:translateY(0);
transition-delay:.2s;
}

.about-show .about-content p:nth-of-type(1){
opacity:1;
transform:translateY(0);
transition-delay:.35s;
}

.about-show .about-content p:nth-of-type(2){
opacity:1;
transform:translateY(0);
transition-delay:.5s;
}

.about-show .about-grid{
opacity:1;
transform:translateY(0);
transition-delay:.7s;
}

.about-show .about-image{
opacity:1;
transform:translateY(0) scale(1);
transition-delay:.4s;
}
/*  */
/* ===== SECTION ===== */
.journey-section{
background:#000;
color:#fff;
padding:120px 8%;
overflow:hidden;
}

.journey-wrap{
display:grid;
grid-template-columns:1fr 1fr;
gap:80px;
align-items:center;
}

/* LEFT */
.journey-left{
display:flex;
justify-content:center;
}

/* ===== CUBE ===== */
.cube-wrapper{
perspective:1200px;
}

.cube{
width:320px;
height:320px;
position:relative;
transform-style:preserve-3d;
animation:cubeRotate 16s infinite linear;
}

/* faces */
.cube-face{
position:absolute;
width:320px;
height:320px;
border:2px solid rgba(255,215,0,.5);
overflow:hidden;
background:#111;
}

.cube-face img{
width:100%;
height:100%;
object-fit:cover;
}

/* positions */
.front{ transform:translateZ(160px); }
.back{ transform:rotateY(180deg) translateZ(160px); }
.right{ transform:rotateY(90deg) translateZ(160px); }
.left{ transform:rotateY(-90deg) translateZ(160px); }
.top{ transform:rotateX(90deg) translateZ(160px); }
.bottom{ transform:rotateX(-90deg) translateZ(160px); }

/* perfect rotation */
@keyframes cubeRotate{
0%{ transform:rotateX(0deg) rotateY(0deg); }
25%{ transform:rotateX(180deg) rotateY(90deg); }
50%{ transform:rotateX(180deg) rotateY(180deg); }
75%{ transform:rotateX(270deg) rotateY(270deg); }
100%{ transform:rotateX(360deg) rotateY(360deg); }
}

/* RIGHT CONTENT */
.journey-title{
font-size:60px;
margin-bottom:25px;
font-family:'Playfair Display',serif;
}

.journey-right p{
font-size:18px;
line-height:1.8;
margin-bottom:18px;
opacity:.9;
}

.journey-stats{
display:flex;
gap:40px;
margin-top:30px;
flex-wrap:wrap;
}

.journey-stats span{
display:block;
font-size:36px;
color:#d4af37;
font-weight:700;
}

/* ===== MOBILE ===== */
@media(max-width:900px){

.journey-wrap{
grid-template-columns:1fr;
text-align:center;
}

.cube{
width:240px;
height:240px;
}

.cube-face{
width:240px;
height:240px;
}

.front{ transform:translateZ(120px); }
.back{ transform:rotateY(180deg) translateZ(120px); }
.right{ transform:rotateY(90deg) translateZ(120px); }
.left{ transform:rotateY(-90deg) translateZ(120px); }
.top{ transform:rotateX(90deg) translateZ(120px); }
.bottom{ transform:rotateX(-90deg) translateZ(120px); }

.journey-title{font-size:32px;}

}
.journey-right p{
font-size:18px;
line-height:1.8;
margin-bottom:18px;
opacity:0;
transform:translateY(30px);
transition:.8s ease;
}

.journey-section.active .journey-right p{
opacity:1;
transform:translateY(0);
}

.journey-section.active .journey-right p:nth-child(2){transition-delay:.5s;}
.journey-section.active .journey-right p:nth-child(3){transition-delay:.7s;}
.journey-section.active .journey-right p:nth-child(4){transition-delay:.9s;}
.journey-stats div{
opacity:0;
transform:translateY(40px);
transition:.8s ease;
}

.journey-section.active .journey-stats div{
opacity:1;
transform:translateY(0);
}

.journey-section.active .journey-stats div:nth-child(1){transition-delay:1s;}
.journey-section.active .journey-stats div:nth-child(2){transition-delay:1.2s;}
.journey-section.active .journey-stats div:nth-child(3){transition-delay:1.4s;}

/*  */
/* SECTION */
.experience-section{
background:#efede7;
padding:120px 8%;
font-family:'Playfair Display',serif;
color:#111;
}

/* layout */
.experience-wrap{
display:grid;
grid-template-columns:1.1fr 0.9fr;
gap:100px;
align-items:flex-start;
}

/* LEFT BIG TYPO */
.exp-left h1{
font-size:110px;
line-height:0.95;
font-weight:700;
letter-spacing:-1px;
}

/* RIGHT */
.exp-right{
/* max-width:420px; */
max-width:510px;
padding-top:40px;
}

.exp-right p{
font-family:'Inter',sans-serif;
font-size:18px;
line-height:1.8;
margin-bottom:25px;
color:#3a3a3a;
}

/* BUTTON */
.read-btn{
display:inline-block;
background:#c8904c;
color:white;
padding:14px 30px;
font-size:13px;
letter-spacing:1px;
text-decoration:none;
font-weight:600;
transition:.3s;
}

.read-btn:hover{
background:#111;
}

/* divider */
.exp-divider{
margin:120px 0 60px;
height:1px;
background:#222;
opacity:.4;
}

/* bottom */
.exp-bottom{
text-align:center;
}

.exp-bottom h3{
font-size:28px;
margin-bottom:20px;
}

/* portfolio link */
.portfolio-link{
display:flex;
flex-direction:column;
align-items:center;
gap:10px;
cursor:pointer;
}

/* FONT AWESOME ARROW */
.arrow{
font-size:34px;
color:#111;
animation:scrollArrow 1.6s infinite;
transition:.3s;
}

.portfolio-link:hover .arrow{
transform:translateY(8px);
color:#c8904c;
}

.portfolio-link p{
letter-spacing:3px;
font-size:12px;
font-family:'Inter',sans-serif;
}

/* arrow animation */
@keyframes scrollArrow{
0%{transform:translateY(0);}
50%{transform:translateY(12px);}
100%{transform:translateY(0);}
}

/* ===== TABLET ===== */
@media(max-width:1100px){

.exp-left h1{
font-size:80px;
}

.experience-wrap{
gap:60px;
}

}

/* ===== MOBILE ===== */
@media(max-width:768px){

.experience-wrap{
grid-template-columns:1fr;
}

.exp-left h1{
font-size:45px;
}

.exp-right{
padding-top:10px;
max-width:100%;
}

.exp-divider{
margin:70px 0 40px;
}

.exp-bottom h3{
font-size:22px;
}

}
/* ===== SCROLL ANIMATION BASE ===== */
.reveal{
  opacity: 0;
  transform: translateY(60px);
  transition: opacity 0.9s ease, transform 0.9s ease;
  will-change: transform, opacity;
}

.reveal.show{
  opacity: 1;
  transform: translateY(0);
}

/* stagger luxury feel */
.reveal.delay-1{ transition-delay: .15s; }
.reveal.delay-2{ transition-delay: .3s; }
.reveal.delay-3{ transition-delay: .45s; }

/* BIG TEXT DRAMATIC ENTRANCE */
.exp-left h1{
  transform: translateY(80px);
  opacity: 0;
  transition: 1.2s ease;
}

.exp-left h1.show{
  transform: translateY(0);
  opacity: 1;
}

/* container */
.portfolio-row{
margin-top:120px;
display:flex;
justify-content:center;
align-items:flex-start;
gap:40px;
flex-wrap:wrap;
}

/* card */
.portfolio-card{
width:260px;
height:360px;
perspective:1200px;
position:relative;
}

/* vertical zigzag */
.portfolio-card.up{
transform:translateY(0);
}

.portfolio-card.down{
transform:translateY(60px);
}

/* flip container */
.card-inner{
width:100%;
height:100%;
position:relative;
transform-style:preserve-3d;
transition:transform .8s;
}

/* HOVER FLIP */
.portfolio-card:hover .card-inner{
transform:rotateY(180deg);
}

/* show back side by default */
.portfolio-card.show-back .card-inner{
transform:rotateY(180deg);
}

/* on hover revert */
.portfolio-card.show-back:hover .card-inner{
transform:rotateY(0deg);
}

/* faces */
.card-front,
.card-back{
position:absolute;
width:100%;
height:100%;
border-radius:12px;
overflow:hidden;
backface-visibility:hidden;
box-shadow:0 25px 50px rgba(0,0,0,.35);
}

.card-front img{
width:100%;
height:100%;
object-fit:cover;
}

.card-back{
background:#111;
color:#fff;
display:flex;
flex-direction:column;
justify-content:center;
align-items:center;
padding:25px;
transform:rotateY(180deg);
text-align:center;
}

.card-back h4{
font-size:22px;
margin-bottom:10px;
color:#d4af37;
}

.card-back p{
font-size:15px;
line-height:1.6;
opacity:.9;
}

















/*  */
.contact-section{
  background:#0f63a9;
  color:#fff;
  padding:120px 8% 40px;
  font-family:'Inter',sans-serif;
}

.contact-wrap{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:80px;
  border-bottom:1px solid rgba(255,255,255,.2);
  padding-bottom:80px;
}

/* LEFT */
.contact-left h4{
  letter-spacing:2px;
  font-size:14px;
  margin-bottom:40px;
}

.contact-item{
  display:flex;
  align-items:center;
  gap:14px;
  margin-bottom:18px;
  opacity:.9;
}

.social-links{
  margin-top:60px;
}

.social-links a{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:14px 0;
  border-bottom:1px solid rgba(255,255,255,.25);
  text-decoration:none;
  color:white;
  transition:.4s;
}

.social-links a:hover{
  letter-spacing:1px;
  color:#d4af37;
}

/* RIGHT */
.contact-right{
  position:relative;
}

.input-group{
  position:relative;
  margin-bottom:35px;
}

.input-group input,
.input-group textarea{
  width:100%;
  background:none;
  border:none;
  border-bottom:1px solid rgba(255,255,255,.4);
  padding:10px 0;
  color:white;
  font-size:15px;
}

.input-group label{
  position:absolute;
  left:0;
  top:10px;
  font-size:14px;
  opacity:.7;
  pointer-events:none;
  transition:.4s;
}

.input-group input:focus + label,
.input-group input:valid + label,
.input-group textarea:focus + label{
  transform:translateY(-22px);
  font-size:11px;
  letter-spacing:2px;
}

.submit-btn{
  background:none;
  border:none;
  color:white;
  font-size:26px;
  letter-spacing:6px;
  margin-top:20px;
  cursor:pointer;
  transition:.4s;
}

.submit-btn:hover{
  color:#d4af37;
}

.watermark{
  position:absolute;
  right:0;
  bottom:0;
  font-size:220px;
  font-weight:700;
  opacity:.04;
  pointer-events:none;
}

/* FOOTER */
.contact-footer{
  margin-top:30px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  font-size:13px;
  opacity:.85;
}

.back-top{
  width:44px;
  height:44px;
  border:2px solid white;
  border-radius:10px;
  display:flex;
  align-items:center;
  justify-content:center;
  color:white;
  transition:.3s;
}

.back-top:hover{
  background:white;
  color:#0f63a9;
}
.reveal{
  opacity:0;
  transform:translateY(60px);
  transition:1s ease;
}

.reveal.show{
  opacity:1;
  transform:none;
}

.delay-1{transition-delay:.3s;}
/* ===============================
   GLOBAL MOBILE FIX
   =============================== */
.footer-mob{
    display: none;
}
/* ===============================
   MOBILE HERO MARQUEE
   =============================== */

@media(max-width:768px){

/* show it again */
.exp-box{
display:flex;
position:absolute;
bottom:0;
left:0;
width:100%;
height:auto;
padding:14px 0;
background:linear-gradient(to top, rgba(0,0,0,.9), transparent);
overflow:hidden;
align-items:center;
}

/* remove vertical gold line */
.exp-box::before{
display:none;
}

/* horizontal scrolling */
.exp-track{
flex-direction:row;
gap:40px;
padding:0 20px;
animation:scrollHorizontal 18s linear infinite;
}

/* item layout horizontal */
.exp-item{
flex-direction:row;
align-items:center;
gap:10px;
white-space:nowrap;
font-size:14px;
}

/* smaller number */
.exp-item span{
font-size:24px;
}

/* icon */
.exp-item i{
margin:0;
font-size:16px;
}

/* animation */
@keyframes scrollHorizontal{
0%{ transform:translateX(100%); }
100%{ transform:translateX(-100%); }
}

}

@media (max-width:768px){

html,body{
overflow-x:hidden;
}

/* HEADER */
.navbar{
width:92%;
padding:14px 18px;
border-radius:0 0 18px 18px;
}

.logo{
font-size:22px;
}

/* ================= HERO ================= */

.hero{
height:85vh;
padding:90px 6% 60px;
align-items:flex-end;
justify-content:center;
text-align:center;
}

.hero-content{
margin:0;
text-align:center;
}

.hero-content h1{
font-size:42px;
line-height:1.1;
}

.hero-content h2{
font-size:22px;
}

.hero-content p{
font-size:14px;
}

/* remove experience rail on mobile */
/* .exp-box{
display:none;
} */

/* ================= ABOUT ================= */

/* .about-sk{
padding:80px 6%;
}

.about-letter{
font-size:90px;
margin:0 0 -10px 0;
text-align:left;
}

.about-title{
font-size:26px;
margin:0;
}

.about-content{
max-width:100%;
}

.about-grid{
grid-template-columns:1fr;
gap:20px;
}

.img-frame img{
width:100%;
height:auto;
} */

/* ================= JOURNEY ================= */

.journey-section{
padding:80px 6%;
}

.journey-wrap{
grid-template-columns:1fr;
gap:40px;
text-align:center;
}

.cube{
width:200px;
height:200px;
margin:auto;
}

.cube-face{
width:200px;
height:200px;
}

.front{ transform:translateZ(100px); }
.back{ transform:rotateY(180deg) translateZ(100px); }
.right{ transform:rotateY(90deg) translateZ(100px); }
.left{ transform:rotateY(-90deg) translateZ(100px); }
.top{ transform:rotateX(90deg) translateZ(100px); }
.bottom{ transform:rotateX(-90deg) translateZ(100px); }

.journey-title{
font-size:28px;
}

.journey-right p{
font-size:15px;
}
.journey-stats{
justify-content: center;
}
/* ================= EXPERIENCE ================= */

.experience-section{
padding:80px 6%;
}

.exp-left h1{
font-size:38px;
line-height:1.05;
}

.exp-right p{
font-size:15px;
}

.exp-divider{
margin:60px 0 40px;
}

/* ================= PORTFOLIO ================= */

.portfolio-row{
gap:25px;
margin-top:60px;
}

.portfolio-card{
width:90%;
max-width:320px;
height:360px;
}

.portfolio-card.up,
.portfolio-card.down{
transform:none;
}

/* ================= CONTACT ================= */

.contact-section{
padding:80px 6% 30px;
}

.contact-wrap{
grid-template-columns:1fr;
gap:50px;
padding-bottom:50px;
}

.contact-left h4{
font-size:13px;
margin-bottom:25px;
}

.social-links{
margin-top:30px;
}

.input-group input,
.input-group textarea{
font-size:14px;
}

.submit-btn{
font-size:22px;
}

/* watermark hide mobile */
.watermark{
display:none;
}

/* footer */
.contact-footer{
flex-direction:column;
gap:10px;
text-align:center;
font-size:12px;
}

/* floating social bar */
.social-bar{
bottom:12px;
gap:8px;
padding:8px 12px;
}

.social-bar a{
width:40px;
height:40px;
font-size:15px;
}

}
/* ===== SCROLL TOP BUTTON ===== */

#scrollTopBtn{
position:fixed;
right:22px;
bottom:24px;
width:52px;
height:52px;
border-radius:14px;
border:none;
background:linear-gradient(135deg,#d4af37,#caa65b);
color:#111;
font-size:18px;
display:flex;
align-items:center;
justify-content:center;
cursor:pointer;
box-shadow:0 10px 25px rgba(0,0,0,.25);
z-index:999;
opacity:0;
visibility:hidden;
transform:translateY(20px);
transition:all .35s cubic-bezier(.16,1,.3,1);
}

/* show state */
#scrollTopBtn.show{
opacity:1;
visibility:visible;
transform:translateY(0);
}

/* hover premium feel */
#scrollTopBtn:hover{
transform:translateY(-4px) scale(1.05);
box-shadow:0 12px 30px rgba(212,175,55,.45);
}

/* mobile */
@media(max-width:768px){
#scrollTopBtn{
right:14px;
bottom:75px;
width:46px;
height:46px;
font-size:16px;
}
.footer-desc{
    display: none;
}
.footer-mob{
display: block;
}
}
.logo{
display:flex;
align-items:center;
}

.logo img{
height:42px;   /* desktop size */
width:auto;
display:block;
}

/* mobile */
@media(max-width:768px){
.logo img{
height:34px;
}
.join-btn {
    padding: 8px 1px;
    font-size: 12px;
}
}
/*  */
/* center position */
.center-nav{
position:absolute;
left:50%;
transform:translateX(-50%);
}

/* brand text */
.brand-link{
color:#fff;
font-weight:500;
letter-spacing:1px;
font-size:16px;
cursor:pointer;
position:relative;
padding:6px 14px;
transition:.3s;
}

/* gold underline animation */
.brand-link::after{
content:"";
position:absolute;
left:50%;
bottom:-6px;
width:0%;
height:2px;
background:linear-gradient(90deg,#caa65b,#f5e6c4,#caa65b);
transition:.35s cubic-bezier(.16,1,.3,1);
transform:translateX(-50%);
}

/* hover effect */
.brand-link:hover{
color:#f5e6c4;
letter-spacing:2px;
}

.brand-link:hover::after{
width:100%;
}

/* soft glow */
.brand-link:hover{
text-shadow:0 0 10px rgba(212,175,55,.45);
}
.center-nav a{
  text-decoration: none;
}
