/* ============================
   ABOUT PAGE — Dark Premium
   Glass-morphic, Slide-in
   ============================ */

* { box-sizing:border-box; margin:0; padding:0; }
body {
  background: radial-gradient(circle at 20% 10%, #0b0b0b 0%, #060606 40%, #000 100%);
  color:#eee;
  font-family:"Poppins", sans-serif;
  line-height:1.55;
  overflow-x:hidden;
}

.section { padding:70px 6%; }
.section-title {
  text-align:center;
  font-size:36px;
  color:gold;
  margin-bottom:28px;
  letter-spacing:1.5px;
}

.glass-box {
  background:rgba(255,255,255,0.03);
  border:1px solid rgba(255,255,255,0.06);
  backdrop-filter:blur(10px);
  border-radius:16px;
  padding:28px;
  box-shadow:0 10px 30px rgba(255,215,0,0.06);
}

/* HERO */
.hero-section { padding:60px 6px; }
.hero-inner { display:flex; gap:30px; align-items:center; justify-content:space-between; }
.hero-left { flex:1; padding-right:20px; }
.hero-right { flex:1; display:flex; justify-content:center; align-items:center; }

.hero-title { font-size:48px; color:gold; margin-bottom:12px; }
.hero-sub { font-size:18px; max-width:760px; color:#ddd; }

.hero-image {
  width:100%;
  max-width:520px;
  border-radius:14px;
  box-shadow:0 12px 40px rgba(255,215,0,0.06);
}

/* Buttons */
.cta-btn, .cta-ghost {
  display:inline-block;
  margin-right:12px;
  margin-top:18px;
  padding:10px 18px;
  border-radius:10px;
  font-weight:600;
  text-decoration:none;
}
.cta-btn { background:gold; color:#111; }
.cta-ghost { background:transparent; color:#fff; border:1px solid rgba(255,255,255,0.08); }

/* Layout */
.row { display:flex; gap:30px; align-items:center; justify-content:space-between; flex-wrap:wrap; }
.col { flex:1; min-width:280px; }

/* Video */
.video-wrap video {
  width:100%;
  height:auto;
  border-radius:12px;
}

/* Map + address */
.map-frame iframe {
  width:100%;
  height:100%;
  min-height:300px;
  border:0;
  border-radius:12px;
}

.address-column p {
  color:#ddd;
  font-size:17px;
  margin:12px 0;
}
.address-column i { color:gold; margin-right:8px; }

/* Testimonials */
.testimonial-slider {
  display:flex;
  gap:18px;
  overflow:auto;
  padding-bottom:8px;
}
.testimonial-item {
  min-width:260px;
  padding:18px;
  border-radius:12px;
  background:rgba(255,255,255,0.02);
}

/* -------------------------
   Animation
-------------------------- */
.animate-left,
.animate-right,
.fade-in {
  opacity:0;
  transform:translateY(22px);
  transition: all .9s cubic-bezier(.2,.9,.2,1);
}

.animate-left.in-view {
  opacity:1;
  animation:slideInLeft .9s ease forwards;
}

.animate-right.in-view {
  opacity:1;
  animation:slideInRight .9s ease forwards;
}

.fade-in.in-view {
  opacity:1;
  animation:fadeUp .7s ease forwards;
}

@keyframes slideInLeft {
  from { transform:translateX(-80px); opacity:0; }
  to   { transform:translateX(0); opacity:1; }
}
@keyframes slideInRight {
  from { transform:translateX(80px); opacity:0; }
  to   { transform:translateX(0); opacity:1; }
}
@keyframes fadeUp {
  from { transform:translateY(20px); opacity:0; }
  to   { transform:translateY(0); opacity:1; }
}

/* Hover */
.glass-box:hover {
  transform:translateY(-8px);
  box-shadow:0 20px 50px rgba(255,215,0,0.09);
  transition:all .28s ease;
}

/* Responsive */
@media(max-width:1000px) {
  .hero-inner { flex-direction:column-reverse; padding:18px; }
  .hero-title { font-size:36px; }
  .section { padding:48px 6%; }
}

@media(max-width:680px) {
  .row { flex-direction:column; }
  .hero-title { font-size:28px; }
  .hero-sub { font-size:16px; }
}


/* CALL POPUP */
.call-popup {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: rgba(0,0,0,0.6);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 99999;
    backdrop-filter: blur(4px);
}

.call-popup-box {
    background: rgba(255,255,255,0.1);
    border: 1px solid rgba(255,255,255,0.2);
    border-radius: 20px;
    padding: 25px 40px;
    text-align: center;
    color: #fff;
    animation: fadeInPopup 0.4s ease;
    width: 280px;
}

.call-popup-box h3 {
    font-size: 22px;
    margin-bottom: 10px;
}

.copy-btn, .close-btn {
    margin-top: 12px;
    padding: 10px 20px;
    width: 100%;
    border: none;
    border-radius: 10px;
    cursor: pointer;
    background: rgba(255,255,255,0.2);
    color: #fff;
    font-size: 16px;
    transition: 0.3s;
}
/* Call button */
.copy-btn:hover, .close-btn:hover {
    background: rgba(255,255,255,0.35);
}

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