/* ==========================================
   EDEN DREAMZ PRODUCTION - Template Clone
   Dark Video Production Theme
   ========================================== */

/* ---------- Variables ---------- */
:root {
  --main: #b8860b;
  --main-light: #d4a843;
  --main-dark: #8b6508;
  --heading: #2d2d2d;
  --body: #5a5a5a;
  --dark: #faf8f0;
  --dark-2: #f5f0e1;
  --dark-3: #ede6d3;
  --dark-card: #ffffff;
  --white: #2d2d2d;
  --border: #e0d8c8;
  --font-heading: 'Space Grotesk', sans-serif;
  --font-body: 'Inter', sans-serif;
}

/* ---------- Reset ---------- */
*,*::before,*::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; scroll-snap-type:y proximity; }
body {
  font-family: var(--font-body);
  background: var(--dark);
  color: var(--body);
  line-height: 1.7;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
a { text-decoration:none; color:inherit; transition:all .3s ease; }
ul { list-style:none; }
img { max-width:100%; height:auto; display:block; }

/* ---------- Container ---------- */
.container {
  width:100%; max-width:1400px; margin:0 auto; padding:0 24px;
}

/* ---------- Preloader ---------- */
.preloader {
  position:fixed; top:0; left:0; width:100%; height:100%;
  background:var(--dark); display:flex; align-items:center; justify-content:center;
  z-index:99999; transition:opacity .8s ease-out, visibility .8s ease-out;
}
.preloader.loaded { opacity:0; visibility:hidden; pointer-events:none; }
.load-text span {
  font-family:var(--font-heading); font-size:2.5rem; font-weight:800;
  letter-spacing:8px; color:var(--main); display:inline-block;
  animation:pulse 1.5s ease-in-out infinite;
}
.load-text span:nth-child(2) { animation-delay:.15s; }
.load-text span:nth-child(3) { animation-delay:.3s; }
.load-text span:nth-child(4) { animation-delay:.45s; }
@keyframes pulse { 0%,100%{opacity:.3;transform:translateY(0)} 50%{opacity:1;transform:translateY(-5px)} }

/* ---------- Back to Top ---------- */
.back-to-top-wrapper { position:fixed; bottom:40px; right:40px; z-index:999; }
.back-to-top-btn {
  width:50px; height:50px; border-radius:50%; background:var(--main); border:none;
  display:flex; align-items:center; justify-content:center; cursor:pointer;
  opacity:0; visibility:hidden; transform:translateY(20px); transition:all .3s;
  font-size:1.2rem; color:#ffffff;
}
.back-to-top-btn.visible { opacity:1; visibility:visible; transform:translateY(0); }
.back-to-top-btn:hover { background:var(--main-dark); transform:translateY(-3px); }

/* ---------- Logo ---------- */
.logo { display:flex; align-items:center; gap:12px; }
.logo-box {
  width:44px; height:44px; min-width:44px; background:var(--main); border-radius:10px;
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font-heading); font-weight:800; font-size:18px; color:#ffffff;
}
.logo-text {
  font-family:var(--font-heading); font-size:1.1rem; font-weight:700;
  color:var(--heading); letter-spacing:1px;
}

/* ---------- Header ---------- */
.header {
  position:fixed; top:0; left:0; width:100%; z-index:1000;
  padding:20px 0; transition:all .3s;
}
.header.scrolled {
  background:rgba(250,248,240,.95); backdrop-filter:blur(20px);
  padding:14px 0; border-bottom:1px solid var(--border);
}
.header-nav {
  display:flex; align-items:center; justify-content:space-between;
}

.nav-menu {
  display:flex; align-items:center; gap:36px; list-style:none; margin:0; padding:0;
}
.nav-menu .nav-link {
  font-size:.9rem; font-weight:500; color:var(--body); position:relative; padding:8px 0;
  display:block;
}
.nav-menu .nav-link::after {
  content:''; position:absolute; bottom:0; left:0; width:0; height:2px;
  background:var(--main); transition:width .3s;
}
.nav-menu .nav-link:hover,
.nav-menu .nav-link.active { color:var(--heading); }
.nav-menu .nav-link:hover::after,
.nav-menu .nav-link.active::after { width:100%; }

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

.header-btn {
  padding:10px 28px; border-radius:50px; background:var(--main); color:#ffffff;
  font-weight:600; font-size:.9rem; transition:all .3s; display:inline-block;
}
.header-btn:hover { background:var(--main-dark); transform:translateY(-2px); box-shadow:0 8px 25px rgba(184,134,11,.3); }

.menu-toggle-btn {
  display:none; flex-direction:column; gap:6px; background:none; border:none;
  cursor:pointer; padding:8px;
}
.menu-toggle-btn span { width:28px; height:2px; background:var(--heading); transition:all .3s; display:block; }

/* Mobile Menu */
.mobile-menu {
  position:fixed; top:0; left:0; width:300px; height:100vh; background:#ffffff;
  z-index:9999; transform:translateX(-100%); transition:transform .4s ease; padding:30px;
  overflow-y:auto; box-shadow:4px 0 20px rgba(0,0,0,.1);
}
.mobile-menu.active { transform:translateX(0); }
.mobile-menu__close {
  position:absolute; top:20px; right:20px; background:none; border:none;
  color:var(--heading); font-size:1.5rem; cursor:pointer; width:40px; height:40px;
  display:flex; align-items:center; justify-content:center;
}
.mobile-menu__logo { margin-bottom:40px; }
.mobile-nav { display:flex; flex-direction:column; gap:20px; list-style:none; padding:0; }
.mobile-nav a { color:var(--heading); font-size:1rem; font-weight:500; display:block; }
.mobile-nav a:hover { color:var(--main); }

/* ---------- Buttons ---------- */
.theme-btn-main {
  display:inline-flex; align-items:center; gap:12px; cursor:pointer; text-decoration:none;
}
.theme-btn {
  padding:14px 32px; border-radius:50px; background:var(--main); color:#ffffff;
  font-weight:600; font-size:.95rem; display:inline-block; transition:background .3s;
  text-decoration:none; cursor:pointer;
}
.theme-btn:hover { background:var(--main-dark); }
.theme-btn-main:hover .theme-btn { background:var(--main-dark); }
.btn-circle-icon {
  width:48px; height:48px; min-width:48px; border-radius:50%; background:var(--main);
  display:flex; align-items:center; justify-content:center; color:#ffffff;
  transition:all .3s; font-size:1.1rem;
}
.theme-btn-main:hover .btn-circle-icon { background:var(--main-dark); transform:translateX(4px); }

.theme-btn-outline {
  display:inline-flex; align-items:center; gap:10px; padding:14px 32px;
  border-radius:50px; border:1px solid var(--heading); background:transparent;
  color:var(--heading); font-weight:600; font-size:.95rem; transition:all .3s; text-decoration:none;
}
.theme-btn-outline:hover { border-color:var(--main); color:var(--main); transform:translateY(-2px); }

/* ---------- Section Tags ---------- */
.section-header { text-align:center; margin-bottom:60px; }
.section-tag {
  display:inline-block; font-size:.8rem; font-weight:600; color:var(--main);
  letter-spacing:3px; text-transform:uppercase; margin-bottom:16px;
}
.section-title {
  font-family:var(--font-heading); font-size:clamp(2rem,4vw,3rem);
  font-weight:800; line-height:1.2; color:var(--heading);
}
.section-title span { color:var(--main); }

/* ---------- Scroll Progress ---------- */
.scroll-progress {
  position:fixed; top:0; left:0; height:3px; width:0;
  background:linear-gradient(90deg,var(--main),var(--main-light));
  z-index:10001; transition:width .1s linear;
}

/* ---------- Section Transitions ---------- */
section {
  scroll-snap-align: start;
  transition: opacity .6s ease, transform .6s ease;
}

/* ---------- HERO ---------- */
.banner-four-area {
  min-height:100vh; display:flex; align-items:center; position:relative;
  overflow:hidden; padding-top:120px;
}
.banner-four-bg {
  position:absolute; top:0; left:0; width:100%; height:100%; z-index:0;
  background:linear-gradient(135deg,#f5f0e1 0%,#ede6d3 50%,#f5f0e1 100%);
}
.banner-bg-overlay {
  position:absolute; top:0; left:0; width:100%; height:100%;
  background:linear-gradient(135deg, rgba(250,248,240,.94) 0%, rgba(245,240,225,.82) 45%, rgba(237,230,211,.92) 100%);
}
.hero-bg-image {
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
}
.banner-four-area .container { position:relative; z-index:1; }
.hero-grid { display:grid; grid-template-columns:2fr 1fr; gap:60px; align-items:center; }
.text-center { text-align:center; }

.banner-four-title {
  font-family:var(--font-heading); font-size:clamp(3.5rem,8vw,7rem);
  font-weight:800; line-height:1; color:var(--heading); margin-bottom:30px;
}
.text-stroke-white {
  -webkit-text-stroke:2px var(--heading); color:transparent;
}
.banner-four-desc {
  font-size:1.3rem; font-weight:600; color:var(--heading); line-height:1.5;
  margin-bottom:16px;
}
.banner-four-sub {
  font-size:1rem; color:var(--body); max-width:500px; margin-bottom:32px;
}
.banner-four-btns { display:flex; gap:20px; flex-wrap:wrap; margin-bottom:32px; }
.banner-four-quote {
  font-size:1rem; color:var(--body); padding-left:20px;
  border-left:3px solid var(--main);
}

/* Hero Circle */
.banner-four-circle { position:relative; width:280px; height:280px; margin:0 auto; }
.circle-rotate {
  width:100%; height:100%; position:relative;
}
@keyframes rotateText { from{transform:rotate(0deg)} to{transform:rotate(360deg)} }
.rotate-text { width:100%; height:100%; animation:rotateText 20s linear infinite; }
.circle-text {
  font-size:14px; font-weight:700; fill:var(--heading); letter-spacing:4px;
  text-transform:uppercase;
}
.circle-center {
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:80px; height:80px; border-radius:50%; background:var(--main);
  display:flex; align-items:center; justify-content:center;
  font-size:2rem; color:#ffffff; transition:all .3s;
}
.circle-center:hover { transform:translate(-50%,-50%) scale(1.1); }

/* ---------- Video Lightbox ---------- */
.video-lightbox {
  position:fixed; inset:0; z-index:2000; display:none;
  align-items:center; justify-content:center; padding:24px;
}
.video-lightbox.active { display:flex; }
.video-lightbox-overlay {
  position:absolute; inset:0; background:rgba(0,0,0,.85);
}
.video-lightbox-content {
  position:relative; width:100%; max-width:900px;
  aspect-ratio:16/9; z-index:1;
}
.video-lightbox-close {
  position:absolute; top:-52px; right:0; background:transparent;
  border:none; color:#ffffff; font-size:2rem; cursor:pointer;
  transition:transform .3s; line-height:1;
}
.video-lightbox-close:hover { transform:scale(1.15); color:var(--main); }
.video-lightbox-frame {
  width:100%; height:100%; background:#000;
  border-radius:12px; overflow:hidden;
}
.video-lightbox-frame iframe { width:100%; height:100%; border:0; display:block; }

/* ---------- BRAND MARQUEE ---------- */
.brand-four-area { padding:40px 0; border-bottom:1px solid var(--border); }
.brand-title {
  text-align:center; font-size:.9rem; color:var(--body); margin-bottom:30px;
  letter-spacing:1px;
}
.maquee-slider { overflow:hidden; }
.maquee-box { padding:0 30px; }
.brand-placeholder {
  font-family:var(--font-heading); font-size:1.2rem; font-weight:700;
  color:var(--border); letter-spacing:2px; text-transform:uppercase;
  white-space:nowrap; padding:16px 0;
}

/* ---------- WHO WE WORK WITH ---------- */
.who-we-work-area { background:var(--bg); }
.who-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:30px; }
.who-card {
  background:var(--card); border-radius:16px; padding:40px 30px; text-align:center;
  transition:all .4s; border:1px solid var(--border); position:relative; overflow:hidden;
}
.who-card::before {
  content:''; position:absolute; top:0; left:0; width:100%; height:4px;
  background:var(--main); transform:scaleX(0); transition:transform .4s; transform-origin:left;
}
.who-card:hover { transform:translateY(-6px); box-shadow:0 16px 40px rgba(0,0,0,.08); }
.who-card:hover::before { transform:scaleX(1); }
.who-card-icon {
  width:72px; height:72px; border-radius:50%; background:rgba(184,134,11,.1);
  display:flex; align-items:center; justify-content:center; margin:0 auto 24px;
  font-size:2rem; color:var(--main); transition:all .3s;
}
.who-card:hover .who-card-icon { background:var(--main); color:#fff; }
.who-card h3 {
  font-family:var(--font-heading); font-size:1.3rem; font-weight:700;
  color:var(--heading); margin-bottom:12px;
}
.who-card p { color:var(--body); font-size:.95rem; margin-bottom:20px; }
.who-card-link {
  display:inline-flex; align-items:center; gap:8px; color:var(--main);
  font-weight:600; font-size:.9rem; text-decoration:none; transition:all .3s;
}
.who-card-link i { transition:transform .3s; }
.who-card-link:hover { gap:12px; }
.who-card-link:hover i { transform:translateX(4px); }

/* ---------- ABOUT ---------- */
.about-grid { display:grid; grid-template-columns:1fr 2fr; gap:60px; align-items:center; }
.about-four-left {
  position:relative; display:flex; flex-direction:column; gap:24px; margin-bottom:40px;
}
.badge-pill {
  display:inline-block; padding:8px 20px; border-radius:50px;
  background:rgba(184,134,11,.1); border:1px solid rgba(184,134,11,.3);
  color:var(--main); font-size:.85rem; font-weight:600; letter-spacing:1px;
  width:fit-content;
}
.about-rating { display:flex; align-items:center; gap:12px; }
.rating-stars { display:flex; gap:4px; color:var(--main); font-size:1rem; }
.rating-text { color:var(--body); font-size:.9rem; }
.about-play-btn {
  width:80px; height:80px; border-radius:50%; background:var(--dark-3);
  display:flex; align-items:center; justify-content:center; font-size:1.5rem;
  color:var(--heading); transition:all .3s; border:2px solid var(--border);
}
.about-play-btn:hover { background:var(--main); color:#ffffff; border-color:var(--main); }

.about-heading {
  font-family:var(--font-heading); font-size:clamp(1.5rem,2.5vw,2rem);
  font-weight:700; line-height:1.4; color:var(--heading); margin-bottom:32px;
}
.about-features { display:flex; gap:24px; margin-top:40px; }
.about-feature-card {
  flex:1; background:var(--dark-card); border:1px solid var(--border);
  border-radius:16px; padding:32px; transition:all .3s;
}
.about-feature-card:hover { border-color:rgba(184,134,11,.3); transform:translateY(-4px); }
.about-feature-icon {
  width:56px; height:56px; border-radius:14px; background:rgba(184,134,11,.1);
  display:flex; align-items:center; justify-content:center; font-size:1.5rem;
  color:var(--main); margin-bottom:20px;
}
.about-feature-card h4 { font-size:1.1rem; font-weight:700; color:var(--heading); margin-bottom:8px; }
.about-feature-card p { font-size:.9rem; color:var(--body); }

/* ---------- APPROACH ---------- */
.approach-four-area { padding:140px 0; }
.approach-grid { display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:center; }
.approach-desc {
  font-size:1.1rem; color:var(--body); line-height:1.8; margin-bottom:40px;
}
.approach-steps { display:flex; flex-direction:column; gap:16px; }
.approach-step {
  display:flex; align-items:flex-start; gap:20px; padding:20px 24px;
  background:var(--dark-card); border:1px solid var(--border); border-radius:12px;
  transition:all .3s;
}
.approach-step:hover { border-color:rgba(184,134,11,.3); background:var(--dark-3); }
.step-num {
  width:40px; height:40px; min-width:40px; border-radius:10px;
  background:rgba(184,134,11,.15); display:flex; align-items:center; justify-content:center;
  font-family:var(--font-heading); font-weight:700; font-size:.9rem; color:var(--main);
}
.approach-step h4 { font-size:1rem; font-weight:600; color:var(--heading); margin-bottom:4px; }
.approach-step p { font-size:.85rem; color:var(--body); }

.approach-visual { display:flex; justify-content:center; }
.approach-card {
  display:grid; grid-template-columns:1fr 1fr; gap:32px;
  background:var(--dark-card); border:1px solid var(--border); border-radius:20px;
  padding:48px; width:100%; max-width:500px;
}
.approach-stat { text-align:center; }
.approach-stat-num {
  display:block; font-family:var(--font-heading); font-size:2.5rem;
  font-weight:800; color:var(--main); line-height:1; margin-bottom:8px;
}
.approach-stat-label { font-size:.85rem; color:var(--body); }
.approach-note {
  text-align:center; font-size:1.1rem; color:var(--body); font-style:italic;
  max-width:600px; margin:64px auto 0;
}

/* ---------- SERVICES ---------- */
.service-four-area { padding:140px 0; background:var(--dark-2); }
.service-four-title {
  font-family:var(--font-heading); font-size:clamp(1.5rem,3vw,2.2rem);
  font-weight:800; line-height:1.2; color:var(--heading); text-transform:uppercase;
}
.service-header-row { display:flex; align-items:flex-end; justify-content:space-between; margin-bottom:60px; gap:20px; }
.service-four-card {
  background:var(--dark-card); border:1px solid var(--border); border-radius:16px;
  padding:36px; transition:all .3s; height:100%; margin-bottom:24px;
}
.service-four-card:hover { border-color:rgba(184,134,11,.3); transform:translateY(-6px); }
.service-four-icon {
  width:56px; height:56px; border-radius:14px; background:rgba(184,134,11,.1);
  display:flex; align-items:center; justify-content:center; font-size:1.5rem;
  color:var(--main); margin-bottom:24px; transition:all .3s;
}
.service-four-card:hover .service-four-icon { background:var(--main); color:#ffffff; }
.service-four-card h3 { font-size:1.15rem; font-weight:700; color:var(--heading); margin-bottom:12px; }
.service-four-card > p { font-size:.9rem; color:var(--body); margin-bottom:20px; }
.service-list { display:flex; flex-direction:column; gap:10px; margin:0; padding:0; }
.service-list li {
  display:flex; align-items:center; gap:10px; font-size:.85rem; color:var(--body);
  list-style:none;
}
.service-list li i { color:var(--main); font-size:.75rem; }

/* ---------- PROJECTS ---------- */
.project-four-area { padding-bottom:140px; }
.project-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:24px; }
.project-four-card {
  background:var(--dark-card); border:1px solid var(--border); border-radius:16px;
  overflow:hidden; transition:all .3s;
}
.project-four-card:hover { border-color:rgba(184,134,11,.3); transform:translateY(-6px); }
.project-four-thumb { aspect-ratio:16/10; overflow:hidden; }
.project-placeholder {
  width:100%; height:100%; background:var(--dark-3); display:flex;
  align-items:center; justify-content:center; font-size:2.5rem; color:var(--border);
  transition:all .5s;
}
.project-four-card:hover .project-placeholder { background:rgba(184,134,11,.1); color:var(--main); transform:scale(1.05); }
.project-four-info { padding:24px; position:relative; }
.project-tag {
  display:inline-block; font-size:.7rem; font-weight:600; color:var(--main);
  letter-spacing:2px; text-transform:uppercase; margin-bottom:8px;
}
.project-four-info h4 { font-size:1rem; font-weight:700; color:var(--heading); margin-bottom:0; }
.project-link {
  position:absolute; top:24px; right:24px; width:36px; height:36px;
  border-radius:50%; border:1px solid var(--border); display:flex;
  align-items:center; justify-content:center; color:var(--heading); transition:all .3s;
}
.project-link:hover { background:var(--main); color:#ffffff; border-color:var(--main); }

/* ---------- TEXT MARQUEE ---------- */
.maquee-area {
  padding:60px 0; border-top:1px solid var(--border); border-bottom:1px solid var(--border);
  overflow:hidden;
}
.maquee-text-slider { overflow:visible; }
.maquee-text-stroke {
  font-family:var(--font-heading); font-size:3rem; font-weight:800;
  -webkit-text-stroke:1px var(--heading); color:transparent;
  text-transform:uppercase; white-space:nowrap; padding:0 20px;
}
.maquee-icon { color:var(--main); font-size:1rem; padding:0 10px; display:flex; align-items:center; }

/* ---------- TEAM ---------- */
.team-four-area { padding:140px 0; }
.team-four-card { text-align:center; margin-bottom:24px; }
.team-thumb { margin-bottom:16px; }
.team-placeholder {
  width:100%; aspect-ratio:1; border-radius:16px; background:var(--dark-card);
  border:1px solid var(--border); display:flex; align-items:center; justify-content:center;
  font-size:2.5rem; color:var(--border); transition:all .3s;
}
.team-four-card:hover .team-placeholder { border-color:rgba(184,134,11,.3); color:var(--main); }
.team-four-card h5 { font-size:1rem; font-weight:700; margin-bottom:4px; }
.team-four-card h5 a { color:var(--heading); }
.team-four-card h5 a:hover { color:var(--main); }
.team-four-card p { font-size:.85rem; color:var(--body); }

/* ---------- GALLERY ---------- */
.gallery-four-area { padding:140px 0; background:var(--dark-2); }
.gallery-header-row { display:flex; align-items:flex-end; justify-content:space-between; margin-bottom:60px; gap:20px; }
.gallery-four-card { margin-bottom:32px; }
.gallery-thumb {
  position:relative; aspect-ratio:16/10; border-radius:16px; overflow:hidden;
  margin-bottom:16px;
}
.gallery-placeholder {
  width:100%; height:100%; background:var(--dark-card); display:flex;
  align-items:center; justify-content:center; font-size:3rem; color:var(--border);
  transition:all .5s;
}
.gallery-four-card:hover .gallery-placeholder { transform:scale(1.05); }
.gallery-play-btn {
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:70px; height:70px; border-radius:50%; background:var(--main);
  display:flex; align-items:center; justify-content:center; font-size:1.5rem;
  color:#ffffff; cursor:pointer; transition:all .3s; z-index:2;
}
.gallery-play-btn:hover { transform:translate(-50%,-50%) scale(1.1); }
.ripple {
  position:absolute; width:100%; height:100%; border-radius:50%;
  border:2px solid var(--main); animation:ripple 2s ease-out infinite;
}
@keyframes ripple { 0%{transform:scale(1);opacity:1} 100%{transform:scale(1.8);opacity:0} }
.gallery-info { padding:0 8px; }
.gallery-tag {
  font-size:.75rem; font-weight:600; color:var(--main); letter-spacing:2px;
  text-transform:uppercase; margin-bottom:4px; display:block;
}
.gallery-info h4 { font-size:1.1rem; font-weight:700; color:var(--heading); }

/* ---------- TESTIMONIAL ---------- */
.testimonial-four-area { padding-bottom:140px; }
.testimonial-four-thumb { position:relative; }
.testimonial-placeholder {
  width:100%; aspect-ratio:1; max-width:400px; margin:0 auto;
  border-radius:20px; background:var(--dark-card); border:1px solid var(--border);
  display:flex; align-items:center; justify-content:center; font-size:5rem;
  color:var(--border);
}
.testimonial-four-content { padding:0 40px; position:relative; }
.testimonial-quote-icon { font-size:3rem; color:var(--main); margin-bottom:20px; }
.testimonial-text {
  font-size:1.2rem;   color:var(--heading); line-height:1.8; margin-bottom:32px;
  font-style:italic;
}
.testimonial-author { display:flex; align-items:center; gap:16px; margin-bottom:24px; }
.author-avatar { width:56px; height:56px; min-width:56px; }
.avatar-placeholder {
  width:56px; height:56px; border-radius:50%; background:var(--dark-card);
  border:2px solid var(--main); display:flex; align-items:center; justify-content:center;
  color:var(--main); font-size:1.2rem;
}
.testimonial-author h5 { font-size:1rem; font-weight:700;   color:var(--heading); margin-bottom:2px; }
.testimonial-author p { font-size:.85rem; color:var(--body); }
.testimonial-nav { display:flex; gap:12px; }
.testimonial-nav button {
  width:48px; height:48px; border-radius:50%; border:1px solid var(--border);
  background:transparent; color:var(--heading); display:flex; align-items:center;
  justify-content:center; cursor:pointer; transition:all .3s; font-size:1rem;
}
.testimonial-nav button:hover { background:var(--main); color:#ffffff; border-color:var(--main); }

/* ---------- COUNTERS ---------- */
.counter-four-area { padding-bottom:140px; }
.counter-grid {
  display:flex; justify-content:space-between; align-items:center;
  padding:60px 0; border-top:1px solid var(--border); border-bottom:1px solid var(--border);
}
.counter-item { text-align:center; flex:1; }
.counter-label {
  display:block; font-size:.8rem; font-weight:600; color:var(--main);
  letter-spacing:3px; text-transform:uppercase; margin-bottom:8px;
}
.counter-num {
  font-family:var(--font-heading); font-size:3rem; font-weight:800;
  -webkit-text-stroke:1px var(--heading); color:transparent;
}
.counter-plus {
  font-family:var(--font-heading); font-size:1.5rem; font-weight:800;
  -webkit-text-stroke:1px var(--heading); color:transparent;
}

/* ---------- BLOG ---------- */
.blog-four-area { padding:140px 0; overflow:hidden; }
.blog-subtitle { color:var(--body); font-size:1rem; margin-top:8px; }
.blog-header-row { display:flex; align-items:flex-end; justify-content:space-between; margin-bottom:60px; gap:20px; }
.blog-four-widget {
  display:flex; gap:24px; background:var(--dark-card); border:1px solid var(--border);
  border-radius:16px; padding:24px; transition:all .3s; margin-bottom:24px;
}
.blog-four-widget:hover { border-color:rgba(200,255,0,.3); }
.blog-widget-thumb {
  width:180px; min-width:180px; border-radius:12px; overflow:hidden;
  display:flex; align-items:center; justify-content:center;
}
.blog-placeholder-icon { font-size:2.5rem; color:rgba(45,45,45,.2); }
.blog-widget-content { flex:1; position:relative; padding-right:50px; }
.blog-four-tag {
  display:inline-block; padding:4px 12px; border-radius:50px;
  background:rgba(200,255,0,.1); color:var(--main); font-size:.75rem;
  font-weight:600; margin-bottom:10px;
}
.blog-widget-content h4 { font-size:1.05rem; font-weight:700; margin-bottom:8px; }
.blog-widget-content h4 a { color:var(--heading); }
.blog-widget-content h4 a:hover { color:var(--main); }
.blog-widget-content p { font-size:.85rem; color:var(--body); margin-bottom:12px; }
.blog-meta { display:flex; gap:16px; }
.blog-meta span { font-size:.8rem; color:var(--body); display:flex; align-items:center; gap:6px; }
.blog-explore-btn {
  position:absolute; top:24px; right:24px; width:42px; height:42px;
  border-radius:50%; background:var(--dark-3); display:flex;
  align-items:center; justify-content:center; color:var(--heading);
  transition:all .3s; font-size:.9rem; text-decoration:none;
}
.blog-explore-btn:hover { background:var(--main); color:#ffffff; }

/* ---------- FOOTER ---------- */
.footer-four { background:var(--dark-2); }
.footer-four-top {
  padding:80px 0; border-bottom:1px solid var(--border);
}
.footer-four-title {
  font-family:var(--font-heading); font-size:clamp(2.5rem,5vw,4rem);
  font-weight:800; color:var(--heading); line-height:1.1;
}
.footer-four-title span {
  -webkit-text-stroke:2px var(--heading); color:transparent;
}
.footer-contact-btn {
  display:inline-flex; align-items:center; gap:16px; width:120px; height:120px;
  border-radius:50%; background:var(--main); color:#ffffff; font-weight:700;
  font-size:.9rem; text-align:center; justify-content:center; transition:all .3s;
  line-height:1.3; text-decoration:none; flex-direction:column;
}
.footer-contact-btn i { font-size:1.5rem; }
.footer-contact-btn:hover { background:var(--main-dark); transform:scale(1.05); }

.footer-four-middile { padding:60px 0; }
.footer-four-brand p { color:var(--body); margin-top:20px; font-size:.9rem; max-width:320px; }
.footer-four-links h5, .footer-four-contact h5 {
  font-size:1rem; font-weight:700; color:var(--heading); margin-bottom:20px;
}
.footer-four-links ul { display:flex; flex-direction:column; gap:12px; margin:0; padding:0; }
.footer-four-links li { list-style:none; }
.footer-four-links a { color:var(--body); font-size:.9rem; }
.footer-four-links a:hover { color:var(--main); }
.footer-four-contact p {
  color:var(--body); font-size:.9rem; display:flex; align-items:center;
  gap:10px; margin-bottom:12px;
}
.footer-four-contact i { color:var(--main); }

.footer-four-bottom {
  padding:24px 0; border-top:1px solid var(--border);
}
.footer-bottom-inner {
  display:flex; align-items:center; justify-content:space-between;
}
.footer-bottom-inner p { font-size:.85rem; color:var(--body); margin:0; }
.footer-social { display:flex; gap:12px; }
.footer-social a {
  width:40px; height:40px; border-radius:50%; border:1px solid var(--border);
  display:flex; align-items:center; justify-content:center; color:var(--body);
  transition:all .3s; font-size:1rem;
}
.footer-social a:hover { background:var(--main); color:#ffffff; border-color:var(--main); }

/* ---------- GRID LAYOUTS ---------- */
.services-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.gallery-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.team-grid { display:grid; grid-template-columns:repeat(6,1fr); gap:24px; }
.blog-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:24px; }
.testimonial-grid { display:grid; grid-template-columns:2fr 3fr; gap:60px; align-items:center; }
.footer-top-row { display:flex; align-items:center; justify-content:space-between; gap:30px; }
.footer-grid { display:grid; grid-template-columns:2fr 1fr 1fr 1.5fr; gap:40px; }

/* ---------- RESPONSIVE ---------- */
@media(max-width:1200px){
  .nav-menu { gap:24px; }
  .services-grid { grid-template-columns:repeat(2,1fr); }
  .team-grid { grid-template-columns:repeat(3,1fr); }
  .footer-grid { grid-template-columns:repeat(2,1fr); }
}
/* ---------- CTA Section ---------- */
.cta-four-area {
  position:relative;
}
.cta-inner {
  background: var(--main);
  border-radius: 24px;
  padding: 80px 60px;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.cta-inner::before {
  content:'';
  position:absolute; top:-60px; right:-60px;
  width:200px; height:200px;
  background: rgba(255,255,255,.1);
  border-radius:50%;
}
.cta-inner::after {
  content:'';
  position:absolute; bottom:-40px; left:-40px;
  width:150px; height:150px;
  background: rgba(255,255,255,.08);
  border-radius:50%;
}
.cta-inner .section-tag {
  color: rgba(255,255,255,.7);
  position:relative; z-index:1;
}
.cta-title {
  font-family: var(--font-heading);
  font-size: 3rem;
  font-weight: 800;
  color: #fff;
  margin: 20px 0 16px;
  line-height: 1.2;
  position:relative; z-index:1;
}
.cta-title span { color: var(--dark); }
.cta-desc {
  font-size: 1.1rem;
  color: rgba(255,255,255,.8);
  margin-bottom: 36px;
  position:relative; z-index:1;
}

/* ---------- Testimonial Slider ---------- */
.testimonial-slides { position:relative; }
.testimonial-content-slides { position:relative; min-height:200px; }
.testimonial-content-slide {
  position:absolute; top:0; left:0; width:100%;
  opacity:0; visibility:hidden; transform:translateY(12px);
  transition:opacity .5s ease, transform .5s ease, visibility .5s;
}
.testimonial-content-slide.active {
  position:relative; opacity:1; visibility:visible; transform:translateY(0);
}
.testimonial-counter {
  font-size:.85rem; color:var(--body); user-select:none;
}

@media(max-width:1024px){
  .nav-menu { display:none; }
  .menu-toggle-btn { display:flex; }
  .header-btn { display:none; }
  .project-grid { grid-template-columns:repeat(2,1fr); }
  .counter-grid { flex-wrap:wrap; gap:32px; }
  .counter-item { flex:0 0 45%; }
  .service-header-row,
  .gallery-header-row,
  .blog-header-row { flex-direction:column; align-items:flex-start; }
  .about-grid { grid-template-columns:1fr; }
  .approach-grid { grid-template-columns:1fr; }
  .testimonial-grid { grid-template-columns:1fr; }
  .hero-grid { grid-template-columns:1fr; }
  .who-grid { grid-template-columns:repeat(2,1fr); }
  .footer-top-row { flex-direction:column; text-align:center; }
}
@media(max-width:768px){
  .py-140 { padding:80px 0; }
  .pb-140 { padding-bottom:80px; }
  .banner-four-title { font-size:3rem; }
  .project-grid { grid-template-columns:1fr; }
  .who-grid { grid-template-columns:1fr; }
  .services-grid { grid-template-columns:1fr; }
  .gallery-grid { grid-template-columns:1fr; }
  .team-grid { grid-template-columns:repeat(2,1fr); }
  .blog-grid { grid-template-columns:1fr; }
  .about-features { flex-direction:column; }
  .blog-four-widget { flex-direction:column; }
  .blog-widget-thumb { width:100%; min-width:100%; height:200px; }
  .testimonial-four-thumb { display:none; }
  .testimonial-four-content { padding:0; }
  .footer-bottom-inner { flex-direction:column; gap:16px; text-align:center; }
  .banner-four-btns { flex-direction:column; }
  .banner-four-circle { width:200px; height:200px; }
  .footer-grid { grid-template-columns:1fr; }
  .footer-four-top .footer-top-row { flex-direction:column; gap:30px; text-align:center; }
  .footer-contact-btn { margin:0 auto; }
  .cta-inner { padding:60px 32px; }
  .cta-title { font-size:2.25rem; }
  .maquee-text-stroke { font-size:2rem; }
  .banner-four-area { padding-top:100px; min-height:auto; padding-bottom:60px; }
  .section-header { margin-bottom:40px; }
  .service-four-area, .gallery-four-area { padding:80px 0; }
  .team-four-area { padding:80px 0; }
  .blog-four-area { padding:80px 0; }
.counter-four-area { padding-bottom:80px; }
.testimonial-four-area { padding-bottom:80px; }
.cta-four-area { padding:80px 0; }
}
@media(max-width:480px){
  .counter-item { flex:0 0 100%; }
  .counter-num { font-size:2.25rem; }
  .banner-four-title { font-size:2.5rem; }
  .logo-text { font-size:.9rem; }
  .team-grid { grid-template-columns:1fr; }
}

/* ---------- FORM ELEMENTS ---------- */
input:focus, textarea:focus, select:focus {
  border-color: var(--main) !important;
  box-shadow: 0 0 0 3px rgba(184,134,11,.1);
}
::placeholder {
  color: #b0b0b0;
  opacity: 1;
}
::-ms-input-placeholder {
  color: #b0b0b0;
}

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

/* ---------- Contact Header ---------- */
.contact-header {
  background: rgba(250,248,240,.95) !important;
  border-bottom: 1px solid var(--border) !important;
}

/* ---------- Hero ---------- */
.contact-hero-dark {
  position: relative;
  min-height: 75vh;
  display: flex;
  align-items: center;
  overflow: hidden;
  background: var(--dark);
}
.contact-hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(184,134,11,.08) 0%, transparent 60%);
  z-index: 1;
}
.contact-hero-grid {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 60px;
  align-items: center;
  padding-top: 80px;
  width: 100%;
}
.contact-hero-content {
  max-width: 700px;
}
.contact-badge {
  display: inline-block;
  padding: 8px 20px;
  border-radius: 50px;
  border: 1px solid var(--border);
  color: var(--main);
  font-size: .8rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 3px;
  margin-bottom: 28px;
}
.contact-hero-heading {
  font-family: var(--font-heading);
  font-size: clamp(2.5rem, 5vw, 4rem);
  font-weight: 700;
  line-height: 1.1;
  color: var(--heading);
  margin-bottom: 20px;
}
.contact-hero-heading span { color: var(--main); }
.contact-hero-tagline {
  font-size: 1.1rem;
  color: var(--body);
  margin-bottom: 32px;
  line-height: 1.6;
}
.contact-hero-btns {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 48px;
}
.contact-btn-primary {
  display: inline-block;
  padding: 14px 32px;
  border-radius: 50px;
  background: var(--main);
  color: #fff;
  font-weight: 600;
  font-size: .95rem;
  transition: transform .3s, box-shadow .3s, background .3s;
}
.contact-btn-primary:hover {
  background: var(--main-dark);
  transform: translateY(-2px);
  box-shadow: 0 8px 30px rgba(184,134,11,.3);
}
.contact-btn-outline {
  display: inline-block;
  padding: 14px 32px;
  border-radius: 50px;
  border: 1px solid var(--border);
  background: #fff;
  color: var(--heading);
  font-weight: 600;
  font-size: .95rem;
  transition: border-color .3s, background .3s;
}
.contact-btn-outline:hover {
  border-color: var(--main);
  color: var(--main);
}
.contact-hero-stats {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.contact-stat {
  text-align: left;
}
.contact-stat-num {
  display: block;
  font-family: var(--font-heading);
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--heading);
}
.contact-stat-label {
  font-size: .8rem;
  color: var(--body);
  text-transform: uppercase;
  letter-spacing: 1px;
}

/* ---------- Form Section ---------- */
.contact-form-section {
  background: var(--dark-3);
  padding: 100px 0 60px;
}
.contact-form-grid {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: 60px;
  align-items: start;
}
.contact-section-tag {
  display: inline-block;
  font-size: .75rem;
  font-weight: 600;
  color: var(--main);
  text-transform: uppercase;
  letter-spacing: 3px;
  margin-bottom: 16px;
}
.contact-section-title {
  font-family: var(--font-heading);
  font-size: clamp(1.8rem, 3vw, 2.4rem);
  font-weight: 700;
  line-height: 1.2;
  color: var(--heading);
  margin-bottom: 16px;
}
.contact-section-desc {
  font-size: 1rem;
  color: var(--body);
  margin-bottom: 32px;
  line-height: 1.6;
}

/* ---------- Form Styles ---------- */
.contact-form .form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
.contact-form .form-group {
  margin-bottom: 20px;
}
.contact-form .form-group label {
  display: block;
  font-size: .8rem;
  font-weight: 600;
  color: var(--heading);
  margin-bottom: 8px;
  text-transform: uppercase;
  letter-spacing: 1px;
}
.contact-form .form-group label span { color: var(--main); }
.contact-form .form-group input,
.contact-form .form-group textarea,
.contact-form .form-group select {
  width: 100%;
  padding: 16px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--dark-card);
  color: var(--heading);
  font-family: var(--font-body);
  font-size: .95rem;
  transition: border-color .3s, box-shadow .3s;
  outline: none;
}
.contact-form .form-group input::placeholder,
.contact-form .form-group textarea::placeholder {
  color: #b0b0b0;
}
.contact-form .form-group input:focus,
.contact-form .form-group textarea:focus,
.contact-form .form-group select:focus {
  border-color: var(--main);
  box-shadow: 0 0 0 3px rgba(184,134,11,.1);
}
.contact-form .form-group textarea {
  resize: vertical;
  min-height: 140px;
}
.contact-form .form-group select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%235a5a5a' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  padding-right: 40px;
  cursor: pointer;
}
.contact-submit-btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 16px 40px;
  border: none;
  border-radius: 8px;
  background: var(--main);
  color: #fff;
  font-family: var(--font-heading);
  font-size: .9rem;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  cursor: pointer;
  transition: transform .3s, box-shadow .3s, background .3s;
  width: 100%;
  justify-content: center;
}
.contact-submit-btn:hover {
  background: var(--main-dark);
  transform: translateY(-2px);
  box-shadow: 0 8px 30px rgba(184,134,11,.3);
}

/* ---------- Info Cards ---------- */
.contact-info-dark-card {
  background: var(--dark-card);
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 32px;
  margin-bottom: 24px;
  transition: transform .3s, box-shadow .3s;
}
.contact-info-dark-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 30px rgba(0,0,0,.06);
}
.contact-info-items {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-top: 20px;
}
.contact-info-item {
  display: flex;
  align-items: flex-start;
  gap: 16px;
}
.contact-info-icon {
  width: 48px;
  height: 48px;
  min-width: 48px;
  border-radius: 12px;
  background: rgba(184,134,11,.1);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  color: var(--main);
}
.contact-info-closed {
  background: rgba(255,80,80,.1);
  color: #ff5050;
}
.contact-info-label {
  font-size: .75rem;
  font-weight: 500;
  color: var(--body);
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 4px;
}
.contact-info-value {
  color: var(--heading);
  font-size: .95rem;
  font-weight: 500;
  text-decoration: none;
  transition: color .3s;
  line-height: 1.5;
}
a.contact-info-value:hover { color: var(--main); }
.contact-info-address { line-height: 1.6; }

/* ---------- Process Section ---------- */
.contact-process-section {
  background: var(--dark-2);
  padding: 100px 0;
  border-top: 1px solid var(--border);
}
.contact-process-header {
  text-align: center;
  margin-bottom: 60px;
}
.contact-process-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}
.contact-process-step {
  background: var(--dark-card);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 32px 24px;
  transition: transform .3s, border-color .3s, box-shadow .3s;
  position: relative;
}
.contact-process-step:hover {
  transform: translateY(-4px);
  border-color: var(--main);
  box-shadow: 0 12px 30px rgba(0,0,0,.06);
}
.contact-process-step::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--main), var(--main-light));
  border-radius: 0 0 16px 16px;
  transition: width .4s;
}
.contact-process-step:hover::after { width: 100%; }
.contact-step-num {
  display: inline-block;
  font-family: var(--font-heading);
  font-size: 2rem;
  font-weight: 700;
  color: var(--main);
  margin-bottom: 16px;
  opacity: .5;
}
.contact-process-step h4 {
  font-family: var(--font-heading);
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--heading);
  margin-bottom: 10px;
}
.contact-process-step p {
  font-size: .9rem;
  color: var(--body);
  line-height: 1.6;
}

/* ---------- FAQ Section ---------- */
.contact-faq-section {
  background: var(--dark-3);
  padding: 100px 0;
}
.contact-faq-header {
  text-align: center;
  margin-bottom: 60px;
}
.contact-faq-list {
  max-width: 800px;
  margin: 0 auto;
}
.contact-faq-item {
  border: 1px solid var(--border);
  border-radius: 30px;
  margin-bottom: 12px;
  overflow: hidden;
  transition: border-color .3s;
}
.contact-faq-item[open] {
  border-color: var(--main);
}
.contact-faq-item summary {
  padding: 18px 28px;
  font-family: var(--font-heading);
  font-size: 1rem;
  font-weight: 600;
  color: var(--heading);
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  transition: color .3s;
}
.contact-faq-item summary::-webkit-details-marker { display: none; }
.contact-faq-item summary::after {
  content: '+';
  font-size: 1.3rem;
  color: var(--main);
  transition: transform .3s;
}
.contact-faq-item[open] summary::after {
  transform: rotate(45deg);
}
.contact-faq-item summary:hover { color: var(--main); }
.contact-faq-item p {
  padding: 0 28px 20px;
  font-size: .95rem;
  color: var(--body);
  line-height: 1.7;
}

/* ---------- Contact Responsive ---------- */
@media (max-width: 1024px) {
  .contact-form-grid {
    grid-template-columns: 1fr;
  }
  .contact-process-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 768px) {
  .contact-hero-dark {
    min-height: 60vh;
  }
  .contact-hero-grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  .contact-hero-stats {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 24px;
  }
  .contact-process-grid {
    grid-template-columns: 1fr;
  }
  .contact-form .form-row {
    grid-template-columns: 1fr;
  }
  .contact-hero-btns {
    flex-direction: column;
  }
}
@media (max-width: 576px) {
  .contact-form-section {
    padding: 60px 0;
  }
  .contact-info-dark-card {
    padding: 24px 20px;
  }
  .contact-process-section,
  .contact-faq-section {
    padding: 60px 0;
  }
}