/* ══════════════════════════════════════
   DK Digitalhub — Main Stylesheet
   ══════════════════════════════════════ */

* { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Poppins', sans-serif; }
html { overflow-x: clip; max-width: 100%; }
body { background: #141115; color: #fff; overflow-x: clip; max-width: 100%; padding-top: 70px; }

/* ==========================
   GLOBAL RESPONSIVE SAFETY NET
   Prevents any media/embed/table from
   forcing horizontal scroll on any device
========================== */
img, svg, video, iframe, embed, object, canvas {
  max-width: 100%;
  height: auto;
}
table { max-width: 100%; display: block; overflow-x: auto; }
input, select, textarea, button { max-width: 100%; }


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

nav{
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:75px;

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

    padding:0 100px;

    background:rgba(6,8,20,.9);
    backdrop-filter:blur(14px);

    z-index:1000;

    border-bottom:1px solid rgba(212,175,55,.15);
}

.nav-logo{
    display:flex;
    align-items:center;
    gap:10px;
    text-decoration:none;
}

.nav-logo img{
    height:55px;
}

.nav-logo span{
    color:#d4af37;
    font-weight:700;
    font-size:18px;
}

.nav-links{
    display:flex;
    align-items:center;
    list-style:none;
    gap:5px;
}

.nav-links li{
    position:relative;
}

.nav-links li a{
    text-decoration:none;
    color:#ddd;
    padding:10px 15px;
    display:flex;
    align-items:center;
    gap:5px;
    font-size:14px;
    transition:.3s;
}

.nav-links li a:hover,
.nav-links li a.active{
    color:#ffd700;
}

.arrow{
    font-size:9px;
    transition:.3s;
}

/* Rotate Arrow When Open */

.nav-links li.open > a .arrow{
    transform:rotate(180deg);
}

/* ==========================
   BUTTON
========================== */

.nav-cta{
    padding:10px 20px;
    border:1px solid #d4af37;
    text-decoration:none;
    color:#d4af37;
    border-radius:5px;
    transition:.3s;
}

.nav-cta:hover{
    background:#d4af37;
    color:#000;
    transform:translateY(-3px);
    box-shadow:0 8px 30px rgba(255,215,0,.5);
}

/* ==========================
   DROPDOWNS
========================== */

.mega-drop,
.simple-drop{
    display:none;
}

/* Open State */

.nav-links li.open .mega-drop{
    display:flex;
}

.nav-links li.open .simple-drop{
    display:block;
}

/* ==========================
   MEGA MENU
========================== */

.mega-drop{
    position:absolute;
    top:100%;
    left:50%;
    transform:translateX(-50%);

    background:#0f0e1a;

    min-width:850px;

    padding:25px;

    border-radius:15px;

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

    gap:20px;

    box-shadow:0 20px 50px rgba(0,0,0,.35);
}

.drop-col{
    flex:1;
}

.drop-col h4{
    color:#d4af37;
    margin-bottom:15px;
    font-size:13px;
}

.drop-col a{
    display:block;
    padding:8px 0;
}

.drop-story{
    width:220px;
}

.story-card{
    background:#171727;
    border-radius:10px;
    overflow:hidden;
}

.story-img{
    height:100px;
    display:flex;
    align-items:center;
    justify-content:center;
    text-align:center;
    font-size:11px;
    color:#d4af37;
    background:#211700;
}

.story-body{
    padding:15px;
}

.story-body p{
    font-size:12px;
    line-height:1.6;
    color:#aaa;
}

.story-link{
    color:#d4af37;
    text-decoration:none;
}

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

.simple-drop{
    position:absolute;
    top:100%;
    left:50%;
    transform:translateX(-50%);

    background:#0f0e1a;

    min-width:220px;

    padding:10px;

    border-radius:10px;

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

    box-shadow:0 20px 50px rgba(0,0,0,.35);
}

.simple-drop a{
    display:block;
    padding:10px;
}

/* ==========================
   HAMBURGER
========================== */

.nav-toggle{
    display:none;
    background:none;
    border:none;
    width:44px;
    height:44px;
    cursor:pointer;
    position:relative;
}

.nav-toggle span,
.nav-toggle span::before,
.nav-toggle span::after{
    content:"";
    position:absolute;

    width:28px;
    height:2px;

    background:#d4af37;
    left:8px;
    transition:.3s;
}

.nav-toggle span{
    top:21px;
}

.nav-toggle span::before{
    top:-8px;
}

.nav-toggle span::after{
    top:8px;
}

.nav-toggle.open span{
    background:transparent;
}

.nav-toggle.open span::before{
    top:0;
    transform:rotate(45deg);
}

.nav-toggle.open span::after{
    top:0;
    transform:rotate(-45deg);
}

/* ==========================
   DEMO SECTION
========================== */

.demo{
    height:150vh;
    display:flex;
    justify-content:center;
    align-items:center;
}

.demo h1{
    font-size:60px;
}

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

@media(max-width:992px){

    nav{
        padding:0 20px;
    }

    .nav-toggle{
        display:block;
    }

    .nav-cta{
        display:none;
    }

    .nav-links{
        position:fixed;
        left:-100%;
        top:75px;

        width:100%;
        height:calc(100vh - 75px);

        background:#060814;

        flex-direction:column;
        align-items:flex-start;

        padding:20px;

        overflow:auto;

        transition:.4s;
    }

    .nav-links.open{
        left:0;
    }

    .nav-links li{
        width:100%;
    }

    .nav-links li a{
        width:100%;
        justify-content:space-between;
    }

    .mega-drop,
    .simple-drop{
        position:static;
        transform:none;

        min-width:100%;
        width:100%;

        margin-top:10px;
    }

    .mega-drop{
        flex-direction:column;
    }

    .drop-story{
        width:100%;
    }
}

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

@media(max-width:576px){

    .nav-logo img{
        height:45px;
    }

    .nav-logo span{
        font-size:15px;
    }

    .demo h1{
        font-size:35px;
    }

    .mega-drop{
        padding:15px;
    }

    .simple-drop{
        min-width:100%;
    }
}

/* ══════════════════════════════════════
   HERO SECTION
   ══════════════════════════════════════ */
.hero{
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:50px;
  position:relative;
  overflow:hidden;
}

#waveCanvas{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  z-index:0;
}

.glow-overlay{
  position:absolute;
  inset:0;
  background:
    radial-gradient(ellipse 65% 90% at 75% 55%, rgba(212,175,55,.08) 0%, transparent 65%),
    radial-gradient(ellipse 45% 60% at 15% 50%, rgba(180,130,20,.06) 0%, transparent 60%);
  z-index:1;
  pointer-events:none;
}

#particles{
  position:absolute;
  inset:0;
  z-index:2;
  pointer-events:none;
}

.left{
  width:50%;
  z-index:5;
  position:relative;
  padding-left:80px;
}

.left h1{
  font-size:48px;
  line-height:1.2;
  font-weight:700;
}

.left span{
  color:#ffd700;
}

.left p{
  margin-top:20px;
  color:#c9b87a;
  font-size:15px;
  line-height:1.8;
  max-width:500px;
}

.btn{
  margin-top:30px;
  padding:14px 32px;
  background:linear-gradient(135deg,#d4af37,#ffd700);
  color:#000;
  border:none;
  border-radius:30px;
  cursor:pointer;
  font-weight:600;
  font-size:14px;
  letter-spacing:.5px;
  transition:transform .3s,box-shadow .3s;
  box-shadow:0 4px 20px rgba(212,175,55,.35);
}

.btn:hover{
  transform:translateY(-3px);
  box-shadow:0 8px 30px rgba(255,215,0,.5);
}

.right{
  width:50%;
  display:flex;
  justify-content:center;
  align-items:center;
  position:relative;
  z-index:5;
}

.orbit-wrap{
  position:relative;
  width:420px;
  height:420px;
  display:flex;
  align-items:center;
  justify-content:center;
}

.orbit{
  position:absolute;
  border-radius:50%;
  border:1px solid rgba(212,175,55,.2);
  animation:rotate 20s linear infinite;
}

.orbit span{
  position:absolute;
  width:36px;
  height:36px;
  background:radial-gradient(circle,#ffd700,#b8860b);
  border-radius:50%;
  top:-18px;
  left:50%;
  transform:translateX(-50%);
  box-shadow:0 0 18px rgba(255,215,0,.8);
}

.o1{
  width:300px;
  height:300px;
  animation-duration:20s;
}

.o2{
  width:200px;
  height:200px;
  animation-duration:14s;
  animation-direction:reverse;
}

.o3{
  width:410px;
  height:410px;
  animation-duration:28s;
}

.orbit-img{
  position:absolute;
  z-index: 2;
  filter:drop-shadow(0 0 25px rgba(212,175,55,.35));
  animation:float 5s ease-in-out infinite;
}

@keyframes rotate{
  from{transform:rotate(0deg);}
  to{transform:rotate(360deg);}
}

@keyframes float{
  0%,100%{transform:translateY(0);}
  50%{transform:translateY(-20px);}
}

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

@media(max-width:1024px){

  .hero{
    padding:50px 30px;
  }

  .left{
    padding-left:0;
  }

  .left h1{
    font-size:40px;
  }

  .orbit-wrap{
    width:350px;
    height:350px;
  }

  .o1{
    width:250px;
    height:250px;
  }

  .o2{
    width:170px;
    height:170px;
  }

  .o3{
    width:340px;
    height:340px;
  }

  .orbit-img{
    width:260px;
  }
}

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

@media(max-width:768px){

  .hero{
    flex-direction:column;
    text-align:center;
    justify-content:center;
    gap:30px;
    padding:100px 20px 60px;
  }

  .left,
  .right{
    width:100%;
  }

  .left{
    padding-left:0;
  }

  .left h1{
    font-size:34px;
  }

  .left p{
    max-width:100%;
    margin:20px auto;
  }

  .orbit-wrap{
    width:300px;
    height:300px;
  }

  .o1{
    width:220px;
    height:220px;
  }

  .o2{
    width:150px;
    height:150px;
  }

  .o3{
    width:290px;
    height:290px;
  }

  .orbit-img{
    width:220px;
  }

  .orbit span{
    width:28px;
    height:28px;
    top:-14px;
  }
}

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

@media(max-width:576px){

  .hero{
    padding:90px 15px 50px;
  }

  .left h1{
    font-size:28px;
    line-height:1.4;
  }

  .left p{
    font-size:14px;
  }

  .btn{
    padding:12px 24px;
    font-size:13px;
  }

  .orbit-wrap{
    width:240px;
    height:240px;
  }

  .o1{
    width:180px;
    height:180px;
  }

  .o2{
    width:120px;
    height:120px;
  }

  .o3{
    width:230px;
    height:230px;
  }

  .orbit-img{
    width:170px;
  }

  .orbit span{
    width:22px;
    height:22px;
    top:-11px;
  }
}

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

@media(max-width:380px){

  .left h1{
    font-size:24px;
  }

  .left p{
    font-size:13px;
  }

  .orbit-wrap{
    width:210px;
    height:210px;
  }

  .o1{
    width:160px;
    height:160px;
  }

  .o2{
    width:100px;
    height:100px;
  }

  .o3{
    width:200px;
    height:200px;
  }

  .orbit-img{
    width:150px;
  }
}

/* ==========================
   ABOUT US
========================== */

.about-section{
    background:#141115  ;
    padding:120px 9%;
}

.about-container{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:80px;
    align-items:center;
}

/* LEFT */

.subtitle{
    color:#d4af37;
    font-size:14px;
    letter-spacing:4px;
    text-transform:uppercase;
}

.about-title{
    font-family:'Playfair Display',serif;
    font-size:110px;
    line-height:.9;
    margin:20px 0 35px;
}

.about-title .white{
    display:block;
    color:#fff;
}

.about-title .gold{
    display:block;
    color:transparent;        
    -webkit-text-stroke:1px #d4af37;
}

.about-left p{
    color:#cfcfcf;
    font-size:18px;

}

/* RIGHT */

.about-right{
    display:flex;
    justify-content:center;
}

.image-wrapper{
    position:relative;
    width:100%;
    max-width:550px;
}

.image-wrapper img{
    width:100%;
    height:auto;
    object-fit:cover;
    border-radius:30px;
    border:1px solid rgba(212,175,55,.25);
    box-shadow: 0 30px 80px rgba(0,0,0,.6);
    transition: transform 0.4s ease, border-color 0.4s ease;
}

.image-wrapper img:hover{
  transform: scale(1.02);
  border-color:#d4af37;
}

/* GOLD GLOW */

.image-wrapper::before{
    content:'';
    position:absolute;
    width:250px;
    height:250px;
    background:#d4af37;
    border-radius:50%;
    filter:blur(120px);
    opacity:.15;
    top:-60px;
    right:-80px;
    z-index:-1;
}

/* FLOATING CARDS */

.floating-card{
    background:rgba(255,255,255,.05);
    backdrop-filter:blur(12px);
    border:1px solid rgba(212,175,55,.2);
    border-radius:20px;
    padding:10px 15px;
    box-shadow: 0 15px 40px rgba(0,0,0,.4);
    transition:.4s;
    margin-top: 20px;
}

.floating-card h4{
    color:#d4af37;
    font-size:32px;
}

.floating-card span{
    color:#fff;
    font-size:14px;
}

/* CARD POSITIONS */

.card-1{
    left:-130px;
    top:80px;
}

.card-2{
    right:-130px;
    bottom:50px;
}

.floating-card:hover{
    transform:translateY(-8px);
    border-color:#d4af37;
}

/* RESPONSIVE */

@media(max-width:991px){

    .about-container{
        grid-template-columns:1fr;
        gap:30px;
    }

    .about-title{
        font-size:70px;
    }

    .image-wrapper img{
        height:500px;
    }

    .card-1{
        left:10px;
        top:20px;
    }

    .card-2{
        right:10px;
        bottom:20px;
    }
}

@media(max-width:576px){

    .about-title{
        font-size:55px;
    }

    .about-left p{
        font-size:16px;
    }

    .image-wrapper img{
        height:auto;
    }

    .floating-card{
        padding:15px 20px;
    }

    .floating-card h4{
        font-size:24px;
    }
}

/* ==========================
   SERVICES SECTION
========================== */

.services-section{
    background:#050505;
    padding:120px 8%;
}

.services-wrapper{
    display:grid;
    grid-template-columns:45% 55%;
    gap:80px;
    position:relative;
}

/* LEFT SIDE STICKY */

.sr-left{
    position:relative;
}

.services-sticky{
    position:sticky;
    top:100px;
}

.subtitle{
    color:#d4af37;
    font-size:14px;
    letter-spacing:4px;
    text-transform:uppercase;
}

.services-title{
    font-family:'Playfair Display',serif;
    font-size:clamp(42px, 8vw, 110px);
    line-height:.9;
    margin:20px 0 35px;
}

.services-title .white{
    display:block;
    color:white;
}

.services-title .gold{
    display:block;
    color:transparent;
    -webkit-text-stroke:1px #d4af37;
}

.services-left p{
    color:#cfcfcf;
    font-size:18px;
    line-height:1.9;
    max-width:550px;
}

/*  RIGHT TIMELINE  */

.timeline{
    position:relative;
    padding-left:80px;
}

/* Vertical Line */

.timeline::before{
    content:'';
    position:absolute;
    left:13px;
    top:0;
    width:2px;
    height:100%;
    background:linear-gradient(
    to bottom,
    transparent,
    #d4af37,
    transparent);
}

/* Timeline Item */

.timeline-item{
    position:relative;
    margin-bottom:160px;
}

/* Dot */

.timeline-dot{
    position:absolute;
    left:-80px;
    top:40px;
    width:28px;
    height:28px;
    border-radius:50%;
    background: linear-gradient(135deg, #d4af37, #ffd700);
    box-shadow:
    0 0 0 10px rgba(212,175,55,.12),
    0 0 25px rgba(212,175,55,.8);
}

/* Card */

.service-card{
    background:rgba(255,255,255,.03);
    border:1px solid rgba(212,175,55,.25);
    backdrop-filter:blur(10px);
    padding:45px;
    border-radius:24px;
    transition:.4s ease;
}

.service-card:hover{
    transform:translateY(-10px);
    border-color:#d4af37;
    box-shadow:
    0 20px 50px rgba(0,0,0,.5),
    0 0 30px rgba(212,175,55,.15);
}

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

.service-card p{
    color:#bdbdbd;
    line-height:1.9;
    margin-bottom:25px;
}

.service-btn{
    display:inline-block;
    padding:14px 32px;
    border-radius:30px;
    text-decoration:none;
    color:#000;
    font-weight:600;
    background: linear-gradient(135deg, #d4af37, #ffd700);
    cursor: pointer;
    font-size: 14px;
    letter-spacing: 0.5px;
    transition: transform .3s, box-shadow .3s;
    box-shadow: 0 4px 20px rgba(212, 175, 55, 0.35);
}

.service-btn:hover{
    transform:translateY(-3px);
    box-shadow: 0 8px 30px rgba(255, 215, 0, 0.5);
}

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

/* Large Tablets */
@media (max-width: 1200px){

    .services-wrapper{
        gap:60px;
    }

    .services-title{
        font-size:90px;
    }

    .service-card h3{
        font-size:30px;
    }

}

/* Tablets */
@media (max-width: 991px){

    .services-section{
        padding:100px 6%;
    }

    .services-wrapper{
        grid-template-columns:1fr;
        gap:60px;
    }

    .services-sticky{
        position:relative;
        top:0;
    }

    .services-title{
        font-size:70px;
    }

    .services-left p{
        max-width:100%;
        font-size:17px;
    }

    .timeline{
        padding-left:60px;
    }

    .timeline-dot{
        left:-60px;
    }

    .timeline-item{
        margin-bottom:100px;
    }

    .service-card{
        padding:35px;
    }

    .service-card h3{
        font-size:28px;
    }

}

/* Mobile Devices */
@media (max-width: 767px){

    .services-section{
        padding:80px 20px;
    }

    .subtitle{
        font-size:12px;
        letter-spacing:3px;
    }

    .services-title{
        font-size:52px;
        line-height:0.95;
        margin:15px 0 25px;
    }

    .services-left p{
        font-size:16px;
        line-height:1.8;
    }

    .timeline{
        padding-left:45px;
    }

    .timeline::before{
        left:8px;
    }

    .timeline-dot{
        width:22px;
        height:22px;
        left:-45px;
        top:35px;
        box-shadow:
        0 0 0 8px rgba(212,175,55,.12),
        0 0 20px rgba(212,175,55,.7);
    }

    .timeline-item{
        margin-bottom:70px;
    }

    .service-card{
        padding:28px 24px;
        border-radius:20px;
    }

    .service-card h3{
        font-size:24px;
        line-height:1.3;
        margin-bottom:15px;
    }

    .service-card p{
        font-size:15px;
        line-height:1.8;
        margin-bottom:20px;
    }

    .service-btn{
        padding:12px 24px;
        font-size:13px;
    }

}

/* Small Mobile */
@media (max-width: 480px){

    .services-section{
        padding:70px 16px;
    }

    .services-title{
        font-size:42px;
    }

    .timeline{
        padding-left:38px;
    }

    .timeline::before{
        left:6px;
    }

    .timeline-dot{
        width:18px;
        height:18px;
        left:-38px;
        top:32px;
        box-shadow:
        0 0 0 6px rgba(212,175,55,.12),
        0 0 15px rgba(212,175,55,.6);
    }

    .service-card{
        padding:24px 20px;
        border-radius:18px;
    }

    .service-card h3{
        font-size:22px;
    }

    .service-card p{
        font-size:14px;
    }

    .service-btn{
        width:100%;
        text-align:center;
        padding:14px 20px;
    }

}

/* Extra Small Devices */
@media (max-width: 360px){

    .services-title{
        font-size:36px;
    }

    .service-card{
        padding:20px 18px;
    }

    .service-card h3{
        font-size:20px;
    }

    .service-card p{
        font-size:13px;
    }

}


/* ==========================
   PROCESS SECTION
========================== */
.process-section{
    padding:40px 40px;
    background:#050505;
    position:relative;
    overflow:hidden;
}

/* Background Glow */
.process-section::before{
    content:"";
    position:absolute;
    top:-200px;
    left:50%;
    transform:translateX(-50%);
    width:700px;
    height:700px;
    background:radial-gradient(
        circle,
        rgba(212,175,55,0.15) 0%,
        rgba(212,175,55,0.05) 40%,
        transparent 70%
    );
    pointer-events:none;
}

.process-main-title {
  text-align:center;
  font-size:42px;
  font-weight:700;
  color:#fff;
  margin-bottom:15px;
  line-height:1.4;
}

.process-main-title .highlight {
  background:linear-gradient(
        135deg,
        #d4af37,
        #ffd700,
        #f8e889
    );
    color:#000;
    padding:3px 8px;
    border-radius:8px;
  display: inline-block;
  transition: transform 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.process-main-title .highlight:hover {
  transform: rotate(15deg) scale(1);
}

/* Slider Container */
.process-slider {
  display: flex;
  gap: 30px;
  overflow-x: auto;
  padding: 20px 10px 30px 200px;
  scroll-behavior:smooth;
  cursor: grab; /* Shows the open hand cursor */
  user-select: none; /* Prevents text highlighting while dragging */
  -webkit-overflow-scrolling: touch;
}
.process-slider.active-grab {
    cursor: grabbing; 
}
.process-slider::-webkit-scrollbar { display: none; }

/* Cards */
.process-card {
   min-width:350px;
   width:min(350px,90vw);
    background:rgba(15,15,15,.95);
    border-radius:24px;
    overflow:hidden;
    border:1px solid rgba(212,175,55,.35);
    box-shadow:
        0 0 15px rgba(212,175,55,.08),
        0 0 30px rgba(212,175,55,.05);
    transition:all .4s ease;
}

.process-card:hover{
    transform:translateY(-12px);
    border-color:#ffd700;
    box-shadow:
        0 0 20px rgba(212,175,55,.35),
        0 0 50px rgba(212,175,55,.20),
        0 20px 50px rgba(0,0,0,.6);
}

.card-image {
  height: 220px;
  width: 100%;
  background-size: cover;
  background-position: center;
  background-repeat:no-repeat;
  position: relative;
}

.card-image::before{
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(
        to top,
        rgba(0,0,0,.7),
        transparent
    );
}

.card-content { padding: 24px; }

.badge-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 18px;
}

.badge {
  padding: 6px 15px;
  border-radius: 20px;
  color: #fff;
  font-weight: 600;
  font-size: 14px;
}

/* KEEPING ORIGINAL COLORS */
.requirement { background: #0055ff; }
.proposal { background: #259403; }
.sitemap { background: #0852b3; }
.development { background: #5705c2; }
.content { background: #0f92b9; }
.testing { background: #c20564; }
.approval { background:#206903; }
.launch { background:#2c2aa8; }

.days { font-size: 12px; color: #d4af37; border: 1px solid rgba(212,175,55,.4); padding: 4px 12px; border-radius: 30px; background:rgba(212,175,55,.08); }

.card-content ul{
    margin:0;
    padding-left:18px;
}

.card-content li{
    color:#e0e0e0;
    font-size:14px;
    line-height:1.8;
    margin-bottom:8px;
}

/* Footer / Progress Bar */
.process-footer {
  max-width: 1100px;
  margin: auto;
  position: relative;
  padding-bottom: 50px;
}

.progress-container {
  height:5px;
  background:#1a1a1a;
  border-radius:20px;
  overflow:hidden;
  border:1px solid rgba(212,175,55,.15);
}

.progress-line {
  height: 100%;
  background: linear-gradient(90deg, #d4af37, #ffd700);
  width: 0%;
  border-radius: 20px;
  box-shadow: 0 0 15px rgba(212,175,55,.7), 0 0 30px rgba(212,175,55,.4);
}

.bike-wrapper{
    position:absolute;
    top:-42px;
    left:0%;
    width:70px;
    height:50px;
    z-index:10;
    transform:translateX(-50%);
}

.bike-wrapper svg{
    filter:
        drop-shadow(0 0 8px rgba(212,175,55,.8))
        drop-shadow(0 0 20px rgba(212,175,55,.5));
}

.nav-buttons {
  text-align: right;
  margin-top: 10px;
}

.scroll-btn {
  background: #111;
  border: 1px solid rgba(212,175,55,.4);
  color:#ffd700;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  cursor: pointer;
  margin-left: 15px;
  transition:.3s ease;
  box-shadow: 0 0 10px rgba(212,175,55,.15);
}
.scroll-btn:hover { 
  background: linear-gradient(135deg, #d4af37, #ffd700); 
  color: #000; 
  transform:translateY(-3px);
  box-shadow:
        0 0 15px rgba(212,175,55,.7),
        0 0 35px rgba(212,175,55,.4); 
}

/* Ensure the page can scroll vertically */
.bike-wrapper {
  position: absolute;
  top: -42px;
  left: 0%;
  width: 70px; /* Sizing the bike container */
  height: 50px;
  z-index: 10;
  transform: translateX(-50%); /* Center the bike on the progress point */
  pointer-events: none;
}

.bicycle {
  width: 100%;
  height: 100%;
  fill: none;
  stroke: #333;
  stroke-width: 2;
}

.bicycle .frame { stroke: #d4af37; stroke-width: 3; }

/* The Pedaling & Rolling Animation */
.wheel, .pedals {
  transform-box: fill-box;
  transform-origin: center;
  animation: pedaling 0.8s linear infinite;
  animation-play-state: paused;
}

@keyframes pedaling {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* Run animation only when moving */
.is-moving .wheel, 
.is-moving .pedals {
  animation-play-state: running;
}   

#dustCanvas {
  position: absolute;
  bottom: 0;
  left: -30px; /* Positioned behind the back wheel */
  width: 120px;
  height: 60px;
  pointer-events: none;
}


/* Base Container */
  .hub-main-wrapper {
    background: rgba(6, 8, 20, 0.85);
    color: #fff;
    padding: 80px 20px;
    font-family: 'Segoe UI', sans-serif;
    text-align: center;
  }

  /* Define golden gradient variable */
  :root {
    --gold-gradient: linear-gradient(135deg, #d4af37, #ffd700);
  }

  /* Hidden state for Scroll Animation */
  .fade-in-on-scroll {
    opacity: 0;
    transform: translateY(30px);
    transition: all 1s ease-out;
  }

  /* Visible state triggered by JavaScript */
  .fade-in-on-scroll.is-visible {
    opacity: 1;
    transform: translateY(0);
  }

  /* Keyframe for Line Expansion */
  @keyframes lineExpand {
    from { transform: scaleX(0); }
    to { transform: scaleX(1); }
  }

  .hub-services-grid {
    display: flex;
    justify-content: space-around;
    align-items: flex-start;
    position: relative;
    max-width: 1200px;
    margin: 0 auto 60px auto;
    width: 90%;
  }

  .hub-services-grid::before {
    content: '';
    position: absolute;
    top: 37.5px;
    left: 5%;
    width: 90%;
    height: 3px;
    background: var(--gold-gradient);
    z-index: 0;
    transform-origin: left;
    transform: scaleX(0);
  }

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

.begin-text{
    position:absolute;
    left:0;
    top:20px;
    margin-left: -150px;
    color:#fff;
    font-size:20px;
}

.begin-text strong{
    color:#ffd700;
    text-shadow:
        0 0 8px rgba(212,175,55,.7);
}

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

/* Large Tablets */
@media (max-width: 1024px){

    .process-section{
        padding:60px 30px;
    }

    .process-main-title{
        font-size:36px;
    }

    .process-slider{
        padding:20px 10px 30px 120px;
        gap:20px;
    }

    .process-card{
        min-width:320px;
    }

    .begin-text{
        margin-left:-90px;
        font-size:18px;
    }
}


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

    .process-section{
        padding:60px 15px;
    }

    .process-main-title{
        font-size:28px;
        line-height:1.4;
    }

    .process-slider{
        padding:20px 5px 30px 20px;
        gap:18px;
        scroll-snap-type:x mandatory;
    }

    .process-card{
        min-width:85%;
        scroll-snap-align:start;
    }

    .card-image{
        height:220px;
    }

    .card-content{
        padding:20px;
    }

    .badge-row{
        flex-wrap:wrap;
        gap:10px;
    }

    .begin-text{
        position:relative;
        top:auto;
        left:auto;
        margin:20px 0 0;
        text-align:center;
        font-size:16px;
    }

    .nav-buttons{
        text-align:center;
        margin-top:20px;
    }

    .process-footer{
        padding-bottom:30px;
    }

    .bike-wrapper{
        width:60px;
        height:45px;
        top:-35px;
    }
}


/* Mobile */
@media (max-width: 576px){

    .process-section{
        padding:50px 12px;
    }

    .process-main-title{
        font-size:24px;
    }

    .process-main-title .highlight{
        padding:2px 5px;
        font-size:22px;
    }

    .process-slider{
        padding:15px 0 25px 0;
        gap:15px;
    }

    .process-card{
        min-width:92%;
        border-radius:18px;
    }

    .card-image{
        height:200px;
    }

    .badge{
        font-size:12px;
        padding:5px 12px;
    }

    .days{
        font-size:11px;
    }

    .card-content li{
        font-size:13px;
        line-height:1.7;
    }

    .scroll-btn{
        width:38px;
        height:38px;
        margin:0 8px;
    }

    .progress-container{
        height:4px;
    }

    .bike-wrapper{
        width:50px;
        height:40px;
        top:-30px;
    }

    .begin-text{
        font-size:14px;
    }
}


/* Small Phones */
@media (max-width: 400px){

    .process-main-title{
        font-size:20px;
    }

    .process-card{
        min-width:95%;
    }

    .card-image{
        height:180px;
    }

    .card-content{
        padding:16px;
    }

    .badge-row{
        flex-direction:column;
        align-items:flex-start;
    }

    .days{
        margin-top:5px;
    }

    .begin-text{
        font-size:13px;
    }
}
/* ==========================
   PROJECT SECTION (Featured Projects Showcase)
========================== */
.project-showcase{
    position:relative;
    overflow:hidden;
    background:#030303;
    padding: 100px 8%;
}
.project-showcase::before,.project-showcase::after{
    content:'';
    position:absolute;
    width:min(700px,60vw);
    height:min(700px,60vw);
    border-radius:50%;
    pointer-events:none;
}
.project-showcase::before{
    top:-260px;
    left:-220px;
    background:radial-gradient(circle,rgba(212,175,55,.12),transparent 70%);
}
.project-showcase::after{
    bottom:-260px;
    right:-220px;
    background:radial-gradient(circle,rgba(212,175,55,.08),transparent 70%);
}
@keyframes floatSparkle{0%,100%{transform:translateY(0) scale(1);opacity:.4}50%{transform:translateY(-14px) scale(1.3);opacity:.9}}
@keyframes shimmer{to{background-position:200% 50%}}
@keyframes fadeUp{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:translateY(0)}}
@keyframes glowPulse{0%,100%{box-shadow:0 0 40px rgba(212,175,55,.18),0 30px 80px rgba(0,0,0,.7)}50%{box-shadow:0 0 60px rgba(212,175,55,.32),0 30px 80px rgba(0,0,0,.7)}}
@keyframes copyIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}

.services-title{
    font-family:'Playfair Display',serif;
    font-size:clamp(42px, 8vw, 110px);
    line-height:.9;
    margin:20px 0 35px;
}

.services-title .white{
    display:block;
    color:white;
}

.services-title .gold{
    display:block;
    color:transparent;
    -webkit-text-stroke:1px #d4af37;
}

.project-subtitle{
    color:#d4af37;
    font-size:14px;
    letter-spacing:4px;
    text-transform:uppercase;
}

.project-title{
    font-family:'Playfair Display',serif;
    font-size:clamp(42px, 8vw, 110px);
    line-height:.9;
}

.project-title .white{
    display:block;
    color:white;
}

.project-title .gold{
    display:block;
    color:transparent;
    -webkit-text-stroke:1px #d4af37;
}

.projectSlider{
    width:100%;
    overflow:visible;
    padding:6px 0 20px;
}
.project-showcase .swiper-slide{
    width:min(78vw,620px);
    border-radius:20px;
    background:#030303;
    position:relative;
    border:1px solid rgba(212,175,55,.22);
    overflow:hidden;
    box-shadow:0 15px 40px rgba(0,0,0,.5);
    opacity:calc(1 - min(var(--dist,0),1)*.55);
    filter:blur(calc(min(var(--dist,0),1)*3px));
    transition:border-color .6s,box-shadow .6s,opacity .6s,filter .6s;
}
.project-showcase .swiper-slide-active{
    border-color:rgba(212,175,55,.6);
    animation:glowPulse 3.2s ease-in-out infinite;
}
.slide-media{
    position:relative;
    aspect-ratio:16/11;
    overflow:hidden;
    background:#111;
}
.slide-media img{
    width:auto;
    height:auto;
    object-fit:contain;
    display:block;
    transition:transform 1.1s;
}
.project-showcase .swiper-slide-active .slide-media img{
    transform:scale(1.06);
}
.slide-content{
    position:absolute;
    inset:auto 0 0;
    display:flex;
    justify-content:space-between;
    align-items:flex-end;
    gap:16px;
    padding:clamp(14px,2.6vw,26px);
    background:linear-gradient(to top,rgba(0,0,0,.96) 10%,rgba(0,0,0,.6) 55%,transparent);
}
.slide-copy h3,.slide-copy p,.visit-project{
    opacity:0;
    transform:translateY(14px);
}
.project-showcase .swiper-slide-active .slide-copy h3{
    animation:copyIn .6s ease .15s forwards;
}
.project-showcase .swiper-slide-active .slide-copy p{
    animation:copyIn .6s ease .25s forwards;
}
.project-showcase .swiper-slide-active .visit-project{
    animation:copyIn .6s ease .3s forwards;
}
.slide-copy h3{
    color:#d4af37;
    font-size:clamp(10px,1.2vw,12px);
    text-transform:uppercase;
    letter-spacing:2.5px;
    font-weight:700;
    margin-bottom:6px;
}
.slide-copy p{
    font-size:clamp(1rem,2vw,1.45rem);
    font-weight:700;
    line-height:1.3;
}
.visit-project,.discover-btn{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:5px;
    text-decoration:none;
    color:#000;
    font-weight:600;
    letter-spacing:.5px;
    border-radius:30px;
    background:linear-gradient(135deg,#d4af37,#ffd700);
    transition:transform .3s,box-shadow .3s;
}
.visit-project{
    flex:0 0 auto;
    min-width:130px;
    height:44px;
    font-size:.8rem;
    white-space:nowrap;
    box-shadow:0 4px 20px rgba(212,175,55,.35);
}
.discover-btn{
    min-width:190px;
    height:50px;
    padding:0 26px;
    font-size:.85rem;
    box-shadow:0 4px 20px rgba(212,175,55,.35);
}
@media (hover:hover) and (pointer:fine){.visit-project:hover,.discover-btn:hover{transform:translateY(-3px);box-shadow:0 8px 30px rgba(255,215,0,.5)}}
.project-showcase .controls{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:20px;
    opacity:0;
    animation:fadeUp .9s ease .35s forwards;
}
.project-showcase .nav-buttons{
    display:flex;
    align-items:center;
    gap:14px;
    text-align:initial;
    margin-top:0;
}
.project-showcase .swiper-button-next,.project-showcase .swiper-button-prev{
    position:relative;
    width:40px;
    height:40px;
    inset:auto;
    margin:0;
    border-radius:50%;
    background:#111;
    border:1px solid rgba(212,175,55,.4);
    box-shadow:0 0 10px rgba(212,175,55,.15);
    transition:.3s ease;
}
.project-showcase .swiper-button-next::after,.project-showcase .swiper-button-prev::after{
    color:#ffd700;
    font-size:16px;
    font-weight:700;
    transition:color .3s ease;
}
.project-showcase .swiper-button-next:hover,.project-showcase .swiper-button-prev:hover{
    background:linear-gradient(135deg,#d4af37,#ffd700);
    transform:translateY(-3px);
    box-shadow:0 0 15px rgba(212,175,55,.7),0 0 35px rgba(212,175,55,.4);
}
.project-showcase .swiper-button-next:hover::after,.project-showcase .swiper-button-prev:hover::after{
    color:#000;
}

.autoplay-track{
    width:120px;
    height:2px;
    border-radius:2px;
    background:rgba(255,255,255,.12);
    overflow:hidden;
}
.autoplay-fill{
    height:100%;
    width:0;
    background:linear-gradient(90deg,#D4AF37,#F7E28A);
    border-radius:2px;
}
@media (max-width:768px){
    .slide-content{
        flex-direction:column;
        align-items:flex-start;
        gap:14px;
    }
    .visit-project{
        width:100%;
        min-width:0;
    }
}
@media (max-width:480px){
    .project-showcase .swiper-button-next,.project-showcase .swiper-button-prev{
        width:38px;
        height:38px;
    }
    .project-showcase .swiper-button-next::after,.project-showcase .swiper-button-prev::after{
        font-size:13px;
    }
    .discover-btn{
        width:100%;
        max-width:280px;
    }
}
@media (min-width:1400px){
    .project-showcase .swiper-slide{
        width:min(50vw,680px);
    }
}
@media (prefers-reduced-motion:reduce){
    .project-showcase .section-title,.project-showcase .controls{
        opacity:1;
    }
    .project-showcase .section-title h2{
        -webkit-text-fill-color:#fff;
        background:none;
    }
    .slide-copy h3,.slide-copy p,.visit-project{
        opacity:1;
        transform:none;
    }
    .project-showcase .sparkle{
        display:none;
    }
}

/* ==========================
   SATISFACTION SECTION (sr-*)
========================== */

.sr-section{
    padding:90px 8%;
    background:#141115;
    margin:0 auto;
}

.sr-grid{
    margin: 0 auto; 
    display: grid; 
    grid-template-columns: 1.05fr 0.9fr 1.05fr; 
    gap: 50px; 
    align-items: center;
}
.sr-grid > *{ min-width:0; }

/* LEFT */

.sr-left{
    display:flex;
    flex-direction:column;
    gap:50px;
}

.sat-title{
    font-size:50px;
    line-height:.9;
    font-family:'Playfair Display',serif;
}

.sat-title .white{
    display:block;
    color:#fff;
}

.sat-title .gold{
    display:block;
    color:transparent;
    -webkit-text-stroke:1px #d4af37;
}

.sr-cta{
    text-decoration:none;
    align-self: flex-start; 
    padding: 14px 32px; 
    background: linear-gradient(135deg, #d4af37, #ffd700); 
    color: #000; 
    font-weight: 600; 
    font-size: 14px; 
    letter-spacing: .5px; 
    border: none; 
    border-radius: 30px; 
    cursor: pointer; 
    box-shadow: 0 4px 20px rgba(212,175,55,.35);
    transition: transform .3s, box-shadow .3s; 
}

.sr-cta:hover{ 
  transform: translateY(-3px); 
  box-shadow: 0 8px 30px rgba(255,215,0,.5); 
}

/* CARD */

.sr-card{
    position: relative; 
    background: linear-gradient(165deg, #171208, #000000 75%); 
    border: 1px solid rgba(212,175,55,0.18); 
    border-radius: 26px; 
    padding: 20px; 
    max-width: 350px; 
    margin: 0 auto;
}

.sr-card-title{
    color:#f3d484;
    font-size:20px;
    font-weight:600;
    padding-bottom: 2px; 
    border-bottom: 1px solid rgba(212,175,55,0.18);
}

.sr-card-sub{
    font-size:13px;
    color: #a79f8e; 
    margin-top: 5px; 
    letter-spacing: .2px;
}

.sr-stat-row{
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    margin-top:8px;
}

.sr-stat{
    display:flex; 
    align-items: baseline; 
    font-family: 'Playfair Display', serif; 
    font-weight: 700; 
    line-height: 1; 
    background: linear-gradient(180deg, #f3d484 10%, #d4af37 55%, #8a6d1f 100%); 
    -webkit-background-clip: text; 
    background-clip: text; 
    -webkit-text-fill-color: transparent;
}

.sr-stat .num{
    font-size:65px;
}

.sr-stat .pct{
    font-size:30px;
    margin-left:4px;
}

.sr-emoji{
    width:40px;
    height:40px;
    border-radius:50%;
    background:rgba(212,175,55,.18);
    border: 1px solid rgba(212,175,55,0.18);
    display:flex;
    justify-content:center;
    align-items:center;
    color:#d4af37;
    font-size: 25px;
}

.sr-note{
    font-size: 13.5px; 
    color: #a79f8e; 
    line-height: 1.6; 
}

/* CAROUSEL */

.sr-carousel{
    overflow:hidden;
    border-radius:18px;
    cursor:grab;
    user-select:none;
    margin-top: 2px;
}

.sr-track{
    display:flex;
    transition:transform .7s ease;
    will-change:transform;
}

.sr-slide{
    min-width:100%;
    flex:0 0 100%;
}

.sr-slide img{
    width:100%;
    object-fit:cover;
    display:block;
    border-radius:25px;
}

/* RIGHT */

.sr-right{
    display:flex;
    flex-direction:column;
    gap:34px;
}

.sr-point{
    display:flex;
    gap:16px;
    align-items: flex-start;
    padding-bottom:30px;
    border-bottom:1px solid rgba(212,175,55,.18);
}

.sr-point:last-child{ border-bottom:none; padding-bottom:0; }

.sr-check{
    width:26px;
    height:26px;
    border-radius:50%;
    border:1px solid #d4af37;
    display:flex;
    align-items:center;
    justify-content:center;
    flex-shrink:0;
    margin-top: 3px;
}

.sr-check svg{ width: 13px; height: 13px; }

.sr-point p{
    font-size: 15px;
    color:#cfc9ba;
    line-height:1.75;
    font-weight: 300;
}

.sr-point b{
    color:#f3d484;
    font-weight: 600;
}

/* Responsive */

@media(max-width:1100px){

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

    .sr-card{
        max-width:500px;
        width:100%;
        margin:auto;
    }
}

@media(max-width:768px){

    .sr-section{
        padding:70px 20px;
    }

    .sat-title{
        font-size:42px;
    }

}

@media(max-width:480px){

    .sr-stat .num{
        font-size:55px;
    }
}

/* ══════════════════════════════════════
   FOOTER
   ══════════════════════════════════════ */

#contact-footer{
    background:
    radial-gradient(circle at top left,
    rgba(212,175,55,.08),
    transparent 30%),
    #050508;
    border-top:1px solid rgba(212,175,55,.15);
    padding:80px 8% 25px;
    overflow:hidden;
}

/* Grid */

.footer-grid{
    max-width:1400px;
    margin:auto;
    display:grid;
    grid-template-columns:1.5fr 1fr 1fr 1.2fr;
    gap:50px;
    margin-bottom:45px;
    min-width:0;
}

/* ==========================
   LOGO SECTION
========================== */

.logo-container{
    display:flex;
    align-items:center;
    gap:15px;
    padding:20px;
    border-radius:20px;
    transition:.4s ease;
    margin-bottom:25px;
    position:relative;
    overflow:hidden;
}

.logo-link{
  text-decoration: none;
}

.logo-container::before{
    content:'';
    position:absolute;
    inset:0;
    background:
    linear-gradient(
    135deg,
    rgba(212,175,55,.15),
    transparent 60%);
    opacity:0;
    transition:.4s;
    border:1px solid rgba(212,175,55,.15);
}

.logo-container:hover{
    transform:translateY(-8px);
    box-shadow:
    0 20px 40px rgba(212,175,55,.15),
    0 0 30px rgba(212,175,55,.1);
}


.logo-container:hover::before{
    opacity:1;
}

.logo-container::after{
    content:'';
    position:absolute;
    top:-50%;
    left:-150%;
    width:70px;
    height:220%;
    background:linear-gradient(
        90deg,
        transparent,
        rgba(255,215,0,.15),
        rgba(255,255,255,.45),
        rgba(255,215,0,.15),
        transparent
    );
    transform:rotate(25deg);
    transition:1s ease;
    z-index:3;
    pointer-events:none;
}

.logo-container:hover::after{
    left:160%;
}

.logo-wrapper{
    width:85px;
    height:85px;
    min-width:85px;
    border-radius:50%;
    display:flex;
    justify-content:center;
    align-items:center;
    border:2px solid rgba(212,175,55,.3);
    background:
    linear-gradient(
    135deg,
    rgba(212,175,55,.2),
    rgba(255,215,0,.05));
    transition:.4s;
}

.logo-container:hover .logo-wrapper{
    border-color:#ffd700;
}

.footer-logo{
    width:70px;
    height:auto;
    object-fit:contain;
    filter:drop-shadow(0 0 12px rgba(255,215,0,.35));
}

.logo-content h4{
    margin:0;
    font-size:26px;
    font-weight:700;
    background:
    linear-gradient(
    135deg,
    #ffffff,
    #ffd700);
    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
}

.logo-content span{
    font-size:12px;
    text-transform:uppercase;
    letter-spacing:1.5px;
    color:#ffffff;
}

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

.footer-col{ min-width:0; }
.footer-col h5{
    color:#d4af37;
    text-transform:uppercase;
    font-size:14px;
    letter-spacing:1.5px;
    margin-bottom:22px;
    position:relative;
}

.footer-col h5::after{
    content:'';
    position:absolute;
    left:0;
    bottom:-8px;
    width:40px;
    height:2px;
    background:linear-gradient(90deg,#d4af37,#ffd700);
}

.footer-col p{
    color:#9a9a9a;
    line-height:1.8;
    font-size:14px;
}

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

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

.footer-col ul li a{
    color:#bdbdbd;
    text-decoration:none;
    transition:.3s;
}

.footer-col ul li a:hover{
    color:#ffd700;
    padding-left:5px;
}

/* ==========================
   SOCIAL
========================== */

.footer-social{
    display:flex;
    gap:12px;
    margin-top:20px;
}

.footer-social a{
    width:42px;
    height:42px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    color:#d4af37;
    text-decoration:none;
    border:1px solid rgba(212,175,55,.3);
    background:rgba(255,255,255,.03);
    transition:.3s;
}

.footer-social a:hover{
    background:#d4af37;
    color:#000;
    transform:translateY(-4px);
}

/* ==========================
   NEWSLETTER
========================== */

.newsletter-form{
    display:flex;
    margin-top:15px;
}

.newsletter-form input{
    flex:1;
    background:rgba(255,255,255,.04);
    border:1px solid rgba(212,175,55,.25);
    color:#fff;
    padding:12px;
    outline:none;
    border-radius:8px 0 0 8px;
}

.newsletter-form button{
    border:none;
    cursor:pointer;
    padding:0 22px;
    font-weight:600;
    letter-spacing:.5px;
    background:linear-gradient(135deg,#d4af37,#ffd700);
    color:#000;
    border-radius:0 8px 8px 0;
    transition:transform .3s,box-shadow .3s;
}

.newsletter-form button:hover{
    box-shadow:0 8px 30px rgba(255,215,0,.5);
}

.form-msg{
    margin-top:10px;
    color:#7affc5;
    font-size:13px;
}

/* ==========================
   BOTTOM
========================== */

.footer-bottom{
    max-width:1400px;
    margin:auto;
    border-top:1px solid rgba(255,255,255,.08);
    padding-top:25px;
    display:flex;
    justify-content:space-between;
    flex-wrap:wrap;
    gap:10px;
}

.footer-bottom span{
    color:#888;
    font-size:13px;
}

.footer-bottom a{
    color:#999;
    text-decoration:none;
}

.footer-bottom a:hover{
    color:#ffd700;
}

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

@media(max-width:992px){

    .footer-grid{
        grid-template-columns:repeat(2,1fr);
        gap:40px;
    }

}

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

@media(max-width:768px){

    #contact-footer{
        padding:60px 25px 20px;
    }

    .footer-grid{
        grid-template-columns:1fr;
        gap:35px;
    }

    .logo-container{
        flex-direction:column;
        text-align:center;
    }

    .logo-content h4{
        font-size:22px;
    }

    .footer-bottom{
        text-align:center;
        justify-content:center;
    }

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

    .newsletter-form input{
        border-radius:8px;
    }

    .newsletter-form button{
        border-radius:8px;
        height:48px;
    }
}

/* ══════════════════════════════════════
   INNER-PAGE HERO BANNER (About / Services / Contact / Blog)
   ══════════════════════════════════════ */
.page-hero{
  padding:170px 8% 80px;
  text-align:center;
  position:relative;
  background:
    radial-gradient(ellipse 60% 80% at 50% 0%, rgba(212,175,55,.10) 0%, transparent 70%),
    #08070f;
  border-bottom:1px solid rgba(212,175,55,.15);
}
.page-hero .crumb{ color:#d4af37; font-size:12.5px; letter-spacing:2px; text-transform:uppercase; }
.page-hero h1{ font-size:44px; margin:14px 0 16px; font-weight:700; }
.page-hero h1 span{ color:#ffd700; }
.page-hero p{ color:#b9b9b9; max-width:640px; margin:0 auto; font-size:15.5px; line-height:1.8; }

/* Generic content section wrapper for inner pages */
.section{ padding:90px 8%; max-width:1300px; margin:0 auto; }
.section h2{ font-size:34px; margin-bottom:18px; }
.section h2 span{ color:#d4af37; }
.section > p.lead{ color:#b7b7b7; font-size:16px; line-height:1.9; max-width:760px; margin-bottom:40px; }

.grid-3{ display:grid; grid-template-columns:repeat(3,1fr); gap:30px; }
.grid-2{ display:grid; grid-template-columns:1fr 1fr; gap:50px; align-items:center; }
.grid-2 > *, .grid-3 > *{ min-width:0; }

.info-card{
  background:#060e1f70;
  border:1px solid rgba(212,175,55,.2);
  border-radius:20px; padding:34px; transition:.3s;
}
.info-card:hover{ transform:translateY(-6px); border-color:#d4af37; }
.info-card .ic{ font-size:30px; margin-bottom:16px; }
.info-card h3{ color:#fff; font-size:20px; margin-bottom:10px; }
.info-card p{ color:#aaa; font-size:14px; line-height:1.75; }

.stats-row{ display:flex; justify-content:space-around; flex-wrap:wrap; gap:30px; text-align:center; margin:50px 0; }
.stats-row .stat b{ display:block; font-size:38px; color:#d4af37; }
.stats-row .stat span{ color:#999; font-size:13px; letter-spacing:.5px; text-transform:uppercase; }

/* Blog cards */
.blog-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:32px; }
.blog-card{
  background:rgba(255,255,255,.03); border:1px solid rgba(212,175,55,.15);
  border-radius:18px; overflow:hidden; transition:.3s; text-decoration:none; display:block;
}
.blog-card:hover{ transform:translateY(-6px); border-color:#d4af37; }
.blog-card img{ width:100%; height:190px; object-fit:cover; }
.blog-card .bc-body{ padding:22px; }
.blog-card .tag{ color:#d4af37; font-size:11px; letter-spacing:1px; text-transform:uppercase; }
.blog-card h3{ color:#fff; font-size:18px; margin:10px 0; line-height:1.4; }
.blog-card p{ color:#999; font-size:13.5px; line-height:1.7; }

/* ══════════════════════════════════════
   FORMS (Contact / Quote / Newsletter)
   ══════════════════════════════════════ */
.form-row{ display:grid; grid-template-columns:1fr 1fr; gap:20px; margin-bottom:20px; }
.form-row > *{ min-width:0; }
.form-group{ display:flex; flex-direction:column; gap:8px; min-width:0; }
.form-group.full{ grid-column:1 / -1; }
.form-group label{ font-size:13px; color:#ccc; font-weight:500; }
.form-group input,
.form-group select,
.form-group textarea{
  width:100%; max-width:100%; min-width:0;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(212,175,55,.25);
  border-radius:10px; padding:13px 15px; color:#fff; font-size:14px;
  font-family:'Poppins',sans-serif; outline:none; transition:.2s;
}
.form-group textarea{ resize:vertical; min-height:120px; }
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus{ border-color:#d4af37; background:rgba(212,175,55,.06); }
.form-group select option{ background:#0f0e1a; }
.submit-btn{
  padding:14px 32px; border:none; border-radius:30px; cursor:pointer;
  font-weight:600; font-size:14px; letter-spacing:.5px;
  background:linear-gradient(135deg,#d4af37,#ffd700); color:#000;
  box-shadow:0 4px 20px rgba(212,175,55,.35); transition:transform .3s,box-shadow .3s;
}
.submit-btn:hover{ transform:translateY(-3px); box-shadow:0 8px 30px rgba(255,215,0,.5); }
.submit-btn:disabled{ opacity:.6; cursor:not-allowed; transform:none; }

.contact-info-list{ display:flex; flex-direction:column; gap:26px; }
.contact-info-list .ci{ display:flex; gap:16px; align-items:flex-start; }
.contact-info-list .ci .ic{
  width:46px; height:46px; border-radius:50%; flex-shrink:0;
  background:rgba(212,175,55,.1); border:1px solid rgba(212,175,55,.35);
  display:flex; align-items:center; justify-content:center; font-size:18px; color:#d4af37;
}
.contact-info-list .ci h4{ color:#fff; font-size:15px; margin-bottom:4px; }
.contact-info-list .ci p, .contact-info-list .ci a{ color:#999; font-size:13.5px; text-decoration:none; }

.map-embed{ border-radius:20px; overflow:hidden; border:1px solid rgba(212,175,55,.2); margin-top:30px; }
.map-embed iframe{ width:100%; height:280px; border:0; display:block; filter:grayscale(.3) invert(.92) contrast(.9); }

/* ══════════════════════════════════════
   FAQ ACCORDION (About / Services / Blog / Contact)
   ══════════════════════════════════════ */
.faq-list{ display:flex; flex-direction:column; gap:16px; max-width:900px; }
.faq-item{
  background:rgba(255,255,255,.03); border:1px solid rgba(212,175,55,.18);
  border-radius:14px; overflow:hidden; transition:border-color .3s;
}
.faq-item.open{ border-color:#d4af37; }
.faq-q{
  display:flex; align-items:center; justify-content:space-between;
  padding:22px 26px; cursor:pointer; color:#fff; font-size:15.5px; font-weight:500; gap:20px;
}
.faq-q::after{
  content:"+"; color:#d4af37; font-size:22px; flex-shrink:0; transition:transform .3s; line-height:1;
}
.faq-item.open .faq-q::after{ transform:rotate(45deg); }
.faq-a{ max-height:0; overflow:hidden; transition:max-height .35s ease; }
.faq-item.open .faq-a{ max-height:400px; }
.faq-a p{ padding:0 26px 22px; color:#a8a8a8; font-size:14.5px; line-height:1.8; }

/* ══════════════════════════════════════
   SIMPLE VALUE / TEAM CARDS (About page)
   ══════════════════════════════════════ */
.value-card{ text-align:center; padding:34px 24px; }
.value-card .ic{
  width:64px; height:64px; border-radius:50%; margin:0 auto 18px;
  background:rgba(212,175,55,.1); border:1px solid rgba(212,175,55,.35);
  display:flex; align-items:center; justify-content:center; font-size:26px;
}

.team-card{ text-align:center; }
.team-photo{
  width:100%; aspect-ratio:1/1; border-radius:18px; object-fit:cover;
  border:1px solid rgba(212,175,55,.2); margin-bottom:16px;
}
.team-card h4{ color:#fff; font-size:16.5px; margin-bottom:4px; }
.team-card span{ color:#d4af37; font-size:12.5px; letter-spacing:.5px; }

/* ══════════════════════════════════════
   SERVICE DETAIL BLOCK (Services page)
   ══════════════════════════════════════ */
.service-detail{
  display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:center;
  padding:70px 0; border-bottom:1px solid rgba(212,175,55,.1); scroll-margin-top:100px;
}
.service-detail:last-child{ border-bottom:none; }
.service-detail.reverse{ direction:rtl; }
.service-detail.reverse > *{ direction:ltr; }
.service-detail .sd-badge{
  display:inline-block; color:#d4af37; font-size:12px; letter-spacing:2px;
  text-transform:uppercase; margin-bottom:14px;
}
.service-detail h3{ font-size:28px; color:#fff; margin-bottom:16px; }
.service-detail p{ color:#aaa; font-size:14.5px; line-height:1.85; margin-bottom:18px; }
.service-detail ul{ list-style:none; display:flex; flex-direction:column; gap:12px; margin-bottom:24px; }
.service-detail ul li{ display:flex; gap:10px; align-items:flex-start; color:#ddd; font-size:14px; }
.service-detail ul li::before{ content:"✓"; color:#d4af37; font-weight:700; flex-shrink:0; }
.sd-visual{
  position: relative;
  border-radius:22px;
  border:1px solid rgba(212,175,55,.25);
  background:linear-gradient(135deg, rgba(212,175,55,.12), rgba(255,255,255,.02));
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  transition:all .4s ease;
}

.sd-visual img{
  object-fit:cover;
  border-radius:22px;
  transition:transform .5s ease;
}

/* Image translate */
.sd-visual:hover img{
  transform:translateY(-3px);
}

/* Border Glow */
.sd-visual:hover{
  border-color:#d4af37;
  box-shadow:0 10px 40px rgba(212,175,55,.2);
}

/* Gold Blur Effect */
.sd-visual::before{
  content:'';
  position:absolute;
  background:#d4af37;
  border-radius:50%;
  filter:blur(120px);
  opacity:.15;
  top:-60px;
  right:-80px;
  z-index:0;
  transition:all .5s ease;
}

.sd-visual:hover::before{
  opacity:.3;
  transform:scale(1.2);
}

/* Optional Shine Effect */
.sd-visual::after{
  content:'';
  position:absolute;
  top:0;
  left:-100%;
  width:50%;
  height:100%;
  background:linear-gradient(
    90deg,
    transparent,
    rgba(255,255,255,.15),
    transparent
  );
  transform:skewX(-25deg);
  transition:.7s;
}

.sd-visual:hover::after{
  left:150%;
}

/* ══════════════════════════════════════
   PRICING / PLAN CARDS (Services page)
   ══════════════════════════════════════ */
.plan-card{
  background:rgba(255,255,255,.03); border:1px solid rgba(212,175,55,.2);
  border-radius:22px; padding:38px 30px; transition:.3s; position:relative;
}
.plan-card.popular{ border-color:#d4af37; background:rgba(212,175,55,.05); transform:scale(1.03); }
.plan-card .plan-tag{
  position:absolute; top:-13px; right:28px; background:linear-gradient(135deg,#d4af37,#ffd700);
  color:#000; font-size:11px; font-weight:700; padding:5px 14px; border-radius:20px; letter-spacing:.5px;
}
.plan-card h3{ color:#fff; font-size:19px; margin-bottom:6px; }
.plan-card .plan-price{ color:#d4af37; font-size:34px; font-weight:700; margin:14px 0; }
.plan-card .plan-price span{ font-size:13px; color:#999; font-weight:400; }
.plan-card ul{ list-style:none; display:flex; flex-direction:column; gap:12px; margin:22px 0 28px; }
.plan-card ul li{ color:#bbb; font-size:13.5px; display:flex; gap:10px; }
.plan-card ul li::before{ content:"✓"; color:#d4af37; font-weight:700; }

/* ══════════════════════════════════════
   BLOG DETAIL / CATEGORY FILTER (Blog page)
   ══════════════════════════════════════ */
.blog-filter{ display:flex; flex-wrap:wrap; gap:12px; margin-bottom:40px; }
.blog-filter button{
  padding:9px 20px; border-radius:30px; border:1px solid rgba(212,175,55,.3);
  background:transparent; color:#ccc; font-size:13px; cursor:pointer; transition:.25s;
  font-family:'Poppins',sans-serif;
}
.blog-filter button.active, .blog-filter button:hover{ background:#d4af37; color:#000; border-color:#d4af37; }

.case-card{
  display:grid; grid-template-columns:1fr 1fr; gap:0; background:rgba(255,255,255,.03);
  border:1px solid rgba(212,175,55,.18); border-radius:20px; overflow:hidden; margin-bottom:26px;
}
.case-card img{ width:100%; height:100%; object-fit:cover; min-height:220px; }
.case-card .cc-body{ padding:34px; display:flex; flex-direction:column; justify-content:center; }
.case-card .cc-tag{ color:#d4af37; font-size:11.5px; letter-spacing:1.5px; text-transform:uppercase; margin-bottom:10px; }
.case-card h3{ color:#fff; font-size:20px; margin-bottom:10px; }
.case-card p{ color:#999; font-size:13.5px; line-height:1.75; margin-bottom:16px; }
.case-card .cc-result{ color:#d4af37; font-weight:600; font-size:13.5px; }

/* ══════════════════════════════════════
   SINGLE BLOG POST
   ══════════════════════════════════════ */
.post-meta{
  display:flex; flex-wrap:wrap; align-items:center; gap:10px;
  color:#999; font-size:13px; padding-bottom:34px; border-bottom:1px solid rgba(212,175,55,.18);
}
.post-meta .tag{ color:#d4af37; font-size:11px; letter-spacing:1px; text-transform:uppercase; }
.post-meta-sep{ color:#555; }

.post-layout{ display:grid; grid-template-columns:1fr 320px; gap:60px; align-items:start; }

.post-content .post-cover{
  width:100%; max-height:420px; object-fit:cover; border-radius:18px; margin-bottom:36px;
}
.post-content h2{
  color:#fff; font-size:24px; margin:38px 0 14px; font-weight:600;
}
.post-content p{
  color:#bdbdbd; font-size:15px; line-height:1.95; margin-bottom:18px;
}
.post-content blockquote{
  border-left:3px solid #d4af37; background:rgba(212,175,55,.06);
  padding:20px 26px; margin:28px 0; color:#e8dcae; font-style:italic;
  font-size:15.5px; line-height:1.85; border-radius:0 10px 10px 0;
}

.post-tags{
  display:flex; flex-wrap:wrap; align-items:center; gap:10px; margin-top:34px;
  font-size:13px; color:#999;
}
.post-tags a{
  color:#d4af37; border:1px solid rgba(212,175,55,.3); border-radius:20px;
  padding:5px 14px; text-decoration:none; transition:.25s;
}
.post-tags a:hover{ background:#d4af37; color:#000; }

.post-share{
  display:flex; flex-wrap:wrap; align-items:center; gap:14px; margin-top:22px;
  padding-top:22px; border-top:1px solid rgba(212,175,55,.18); font-size:13px; color:#999;
}
.post-share a{ color:#fff; text-decoration:none; opacity:.8; transition:.25s; }
.post-share a:hover{ color:#d4af37; opacity:1; }

.post-author{
  display:flex; gap:18px; align-items:flex-start; margin-top:44px; padding:26px;
  background:rgba(255,255,255,.03); border:1px solid rgba(212,175,55,.18); border-radius:16px;
}
.post-author img{ width:56px; height:56px; border-radius:50%; object-fit:cover; flex-shrink:0; }
.post-author h4{ color:#fff; font-size:15.5px; margin-bottom:6px; }
.post-author p{ color:#999; font-size:13.5px; line-height:1.8; margin:0; }
.post-author p a{ color:#d4af37; text-decoration:none; }

.post-sidebar{ display:flex; flex-direction:column; gap:26px; position:sticky; top:100px; }
.sidebar-card{
  background:rgba(255,255,255,.03); border:1px solid rgba(212,175,55,.18);
  border-radius:16px; padding:24px;
}
.sidebar-card h4{ color:#fff; font-size:14.5px; margin-bottom:16px; text-transform:uppercase; letter-spacing:.5px; }
.sidebar-list{ list-style:none; display:flex; flex-direction:column; gap:12px; }
.sidebar-list li{ border-bottom:1px solid rgba(255,255,255,.06); padding-bottom:12px; }
.sidebar-list li:last-child{ border-bottom:none; padding-bottom:0; }
.sidebar-list a{ color:#bbb; font-size:13.5px; line-height:1.6; text-decoration:none; transition:.2s; }
.sidebar-list a:hover{ color:#d4af37; }
.sidebar-cta p{ color:#999; font-size:13px; line-height:1.7; margin-bottom:18px; }

/* ══════════════════════════════════════
   RESPONSIVE — GLOBAL ( FOOTER, FORMS)
   ══════════════════════════════════════ */
@media(max-width:900px){
  .footer-grid{ grid-template-columns:1fr 1fr; }
  .grid-3, .blog-grid{ grid-template-columns:1fr 1fr; }
  .grid-2{ grid-template-columns:1fr; }
  .page-hero{ padding:140px 6% 60px; }
  .page-hero h1{ font-size:32px; }
  .post-layout{ grid-template-columns:1fr; }
  .post-sidebar{ position:static; }
}

@media(max-width:600px){
  nav{ padding:0 20px; }
  .footer-grid{ grid-template-columns:1fr; }
  .grid-3, .blog-grid{ grid-template-columns:1fr; }
  .form-row{ grid-template-columns:1fr; }
  .form-wrap{ padding:26px; }
  .stats-row{ gap:22px; }
  .stats-row .stat b{ font-size:28px; }
  .process-slider{ padding-left:24px; }
}

@media(max-width:900px){
  .service-detail, .service-detail.reverse{ grid-template-columns:1fr; direction:ltr; gap:30px; padding:50px 0; }
  .case-card{ grid-template-columns:1fr; }
  .case-card img{ min-height:200px; }
  .plan-card.popular{ transform:none; }
}
@media(max-width:600px){
  .sd-visual{ height:220px; font-size:46px; }
  .faq-q{ padding:18px 20px; font-size:14.5px; }
  .faq-a p{ padding:0 20px 18px; }
}

/* ══════════════════════════════════════
   SERVICES PAGE — HERO BANNER
   (scoped with "sh-" prefix so it does not
   collide with the site's existing .hero)
   ══════════════════════════════════════ */
.sh-banner{
  min-height: 90vh;
  display: grid;
  grid-template-columns: 55% 45%;
  overflow: hidden;
  background: #060e1f;
}

.sh-banner-left{
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 70px 60px 70px 6%;
  z-index: 20;
}
.sh-banner-left .crumb{
  color: #d4af37;
  font-size: 12.5px;
  letter-spacing: 2px;
  text-transform: uppercase;
  margin-bottom: 16px;
  display: block;
}
.sh-banner-left h1{
  font-size: clamp(32px, 4vw, 50px);
  line-height: 1.18;
  font-weight: 700;
  color: #fff;
}
.sh-banner-left h1 span{ color: #ffd700; }
.sh-italic{
  color: #d4af37;
  font-family: Georgia, serif;
  font-style: italic;
}
.sh-banner-left p{
  margin-top: 22px;
  max-width: 560px;
  font-size: 15.5px;
  line-height: 1.8;
  color: #b9b9b9;
}
.sh-banner-btn{
  margin-top: 32px;
  display: inline-flex;
  width: max-content;
  padding: 14px 32px;
  border-radius: 30px;
  background: linear-gradient(135deg, #d4af37, #ffd700);
  color: #000;
  font-weight: 600;
  font-size: 14px;
  letter-spacing: .5px;
  box-shadow: 0 4px 20px rgba(212, 175, 55, .35);
  text-decoration: none;
  transition: transform .3s, box-shadow .3s;
}
.sh-banner-btn:hover{
  transform: translateY(-3px);
  box-shadow: 0 8px 30px rgba(255, 215, 0, .5);
}

/* right — scrolling image columns */
.sh-banner-right{
  position: relative;
  height: 90vh;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  padding: 0 16px;
  overflow: hidden;
  touch-action: none;
}
.sh-banner-right::before,
.sh-banner-right::after{
  content: "";
  position: absolute;
  left: 0; right: 0;
  height: 160px;
  z-index: 5;
  pointer-events: none;
}
.sh-banner-right::before{ top: 0; background: linear-gradient(to bottom, #060e1f 25%, transparent); }
.sh-banner-right::after{ bottom: 0; background: linear-gradient(to top, #060e1f 25%, transparent); }

.sh-scroll-col{ position: relative; overflow: hidden; height: 100%; }
.sh-scroll-track{ display: flex; flex-direction: column; gap: 14px; will-change: transform; }

.sh-card{ overflow: hidden; border-radius: 16px; cursor: pointer; flex-shrink: 0; }
.sh-card img{
  width: 100%;
  display: block;
  object-fit: cover;
  border-radius: 16px;
  transition: transform 0.4s ease;
  pointer-events: none;
  user-select: none;
}
.sh-card:hover img{ transform: scale(1.05); }
.sh-card:nth-child(4n+1) img{ height: 300px; }
.sh-card:nth-child(4n+2) img{ height: 220px; }
.sh-card:nth-child(4n+3) img{ height: 340px; }
.sh-card:nth-child(4n+0) img{ height: 240px; }

/* lightbox */
.sh-lightbox{
  position: fixed; inset: 0;
  background: rgba(0, 0, 0, 0);
  display: flex; align-items: center; justify-content: center;
  z-index: 9999;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.35s ease, background 0.35s ease;
  padding: 20px;
}
.sh-lightbox.open{ opacity: 1; pointer-events: all; background: rgba(0, 0, 0, 0.88); }
.sh-lightbox-inner{
  position: relative;
  max-width: 90vw; max-height: 90vh;
  transform: scale(0.88);
  transition: transform 0.35s cubic-bezier(.22, 1, .36, 1);
}
.sh-lightbox.open .sh-lightbox-inner{ transform: scale(1); }
.sh-lightbox-inner img{
  display: block;
  max-width: 90vw; max-height: 90vh;
  border-radius: 16px;
  object-fit: contain;
  box-shadow: 0 40px 100px rgba(0, 0, 0, 0.6);
}
.sh-lightbox-close{
  position: absolute; top: -16px; right: -16px;
  width: 40px; height: 40px;
  background: #d4af37; color: #000;
  border: none; border-radius: 50%;
  font-size: 18px; font-weight: 700;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: transform 0.2s, background 0.2s;
  z-index: 2;
}
.sh-lightbox-close:hover{ transform: scale(1.12); background: #ffd700; }
.sh-lightbox-prev, .sh-lightbox-next{
  position: fixed; top: 50%; transform: translateY(-50%);
  background: #111;
  border: 1px solid rgba(212, 175, 55, .4);
  color: #ffd700; font-size: 20px;
  width: 40px; height: 40px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  box-shadow: 0 0 10px rgba(212,175,55,.15);
  transition: .3s ease;
  z-index: 10001;
}
.sh-lightbox-prev{ left: 16px; }
.sh-lightbox-next{ right: 16px; }
.sh-lightbox-prev:hover, .sh-lightbox-next:hover{
  background: linear-gradient(135deg, #d4af37, #ffd700);
  color: #000;
  box-shadow: 0 0 15px rgba(212,175,55,.7), 0 0 35px rgba(212,175,55,.4);
}

/* responsive */
@media (max-width: 1024px){
  .sh-banner{ grid-template-columns: 1fr; min-height: auto; overflow: visible; }
  .sh-banner-left{ padding: 56px 6%; align-items: flex-start; }
  .sh-banner-left h1{ font-size: clamp(30px, 6vw, 44px); }
  .sh-banner-left p{ max-width: 100%; font-size: 16px; }
  .sh-banner-right{ height: 70vw; min-height: 380px; max-height: 600px; }
}
@media (max-width: 768px){
  .sh-banner-left{ padding: 44px 24px; }
  .sh-banner-left h1{ font-size: clamp(26px, 9vw, 38px); }
  .sh-banner-left p{ font-size: 15px; margin-top: 18px; }
  .sh-banner-btn{ padding: 13px 26px; font-size: 13.5px; margin-top: 24px; }
  .sh-banner-right{ height: 75vw; min-height: 300px; max-height: 520px; gap: 10px; padding: 0 12px; }
  .sh-card{ border-radius: 12px; }
  .sh-card img{ border-radius: 12px; }
  .sh-card:nth-child(4n+1) img{ height: 200px; }
  .sh-card:nth-child(4n+2) img{ height: 150px; }
  .sh-card:nth-child(4n+3) img{ height: 240px; }
  .sh-card:nth-child(4n+0) img{ height: 170px; }
  .sh-lightbox-prev{ left: 8px; }
  .sh-lightbox-next{ right: 8px; }
  .sh-lightbox-prev, .sh-lightbox-next{ width: 34px; height: 34px; font-size: 16px; }
}
@media (max-width: 480px){
  .sh-banner-left h1{ font-size: clamp(22px, 10vw, 32px); }
  .sh-banner-left p{ font-size: 14px; }
  .sh-banner-right{ grid-template-columns: repeat(2, 1fr); height: 80vw; min-height: 260px; }
  .sh-scroll-col:last-child{ display: none; }
  .sh-card:nth-child(4n+1) img{ height: 180px; }
  .sh-card:nth-child(4n+2) img{ height: 140px; }
  .sh-card:nth-child(4n+3) img{ height: 210px; }
  .sh-card:nth-child(4n+0) img{ height: 150px; }
}