/* ================================================== */
/* PERSPEC */
/* created by On3step */
/* ================================================== */
/* @charset "utf-8"; */
/* ================================================== */
/* TABLE OF CONTENTS
   ==================================================
   1. FONTS & VARIABLES
      1.1 Font Import
      1.2 CSS Variables
      
   2. RESET & BASE STYLES
      2.1 CSS Reset
      2.2 Body & Typography
      2.3 Section Styles
   
   3. PRELOADER
      3.1 Preloader Wrapper
      3.2 Line Loader
      3.3 Loader Animations
   
   4. NAVIGATION
      4.1 Custom Navbar
      4.2 Logo
      4.3 Nav Links
      4.4 Home Dropdown Menu
      4.5 New Dropdown Menu
      4.6 Burger Menu
      4.7 Navbar CTA Button
   
   5. HERO SECTION
      5.1 Hero Base Styles
      5.2 Panorama/Slides Setup
      5.3 Hero Overlay
      5.4 Hero Content
      5.5 Hero Text & Highlights
      5.6 Hero CTA Buttons
      5.7 Hero Image Container
      5.8 Floating Badge
      5.9 Floating Images
      
   6. KEYFRAME ANIMATIONS
      6.1 FadeIn Animations
      6.2 Float Animations
      6.3 Rotation & Pulse
      
   7. BUTTONS
      7.1 Primary Button
      7.2 Secondary Button
      7.3 White Button
      7.4 Outline Button
      7.5 Submit Button
      
   8. STATS SECTION
      8.1 Stats Container
      8.2 Stats Grid
      8.3 Stat Items
      8.4 Enhanced Stats Section
      8.5 Stat Icons & Counter
      
   9. SECTION HEADERS
      9.1 Section Tags
      9.2 Section Titles
      9.3 Section Descriptions
      
   10. SERVICES SECTION
       10.1 Services Grid
       10.2 Service Cards
       10.3 Service Icons
       10.4 Service Links
       
   11. PORTFOLIO/GALLERY
       11.1 Portfolio Grid
       11.2 Portfolio Items
       11.3 Portfolio Overlay
       11.4 Gallery Filter
       11.5 Gallery Lightbox
       
   12. BANNER SECTION
       12.1 Banner Container
       12.2 Banner Content
       12.3 Banner Buttons
       
   13. VIRTUAL TOUR
       13.1 Tour Container
       13.2 Tour Video
       13.3 Play Button
       13.4 Tour Info
       13.5 Tour Features
       
   14. ABOUT/PROCESS SECTION
       14.1 About Images
       14.2 Experience Badge
       14.3 About Content
       14.4 Process Steps
       
   15. TESTIMONIALS
       15.1 Testimonials Grid
       15.2 Testimonial Cards
       15.3 Featured Testimonial
       15.4 Client Info
       15.5 Swiper Navigation
       
   16. FAQ SECTION
       16.1 FAQ Container
       16.2 FAQ Items
       16.3 FAQ Question
       16.4 FAQ Answer
       16.5 FAQ Icons
       
   17. CTA SECTION
       17.1 CTA Container
       17.2 CTA Content
       17.3 CTA Buttons
       
   18. CONTACT SECTION
       18.1 Contact Map
       18.2 Contact Info
       18.3 Contact Details
       18.4 Contact Social Links
       18.5 Contact Form
       18.6 Form Controls
       
   19. FOOTER
       19.1 Footer Base
       19.2 Footer Content Grid
       19.3 Footer Brand
       19.4 Footer Links
       19.5 Footer Social
       19.6 Footer Bottom
       
   20. BACK TO TOP
       20.1 Back To Top Button
       20.2 Pulse Animation
       
   21. LOCOMOTIVE SCROLL
       21.1 Smooth Scroll Setup
       21.2 Scrollbar Styles
       21.3 Scroll Animations
       
   22. PAGE HEADER
       22.1 Header Base
       22.2 Header Background
       22.3 Header Overlay
       22.4 Breadcrumb
       22.5 Header Content
       
   23. ABOUT PAGE
       23.1 About Story Section
       23.2 About Images
       23.3 About Content
       23.4 Signature Section
       
   24. PROCESS TIMELINE
       24.1 Process Section
       24.2 Process Timeline
       24.3 Process Steps
       24.4 Step Icons & Content
       
   25. TEAM SECTION
       25.1 Team Grid
       25.2 Team Members
       25.3 Member Images
       25.4 Member Overlay
       25.5 Member Info
       
   26. WHY CHOOSE US
       26.1 Why Content
       26.2 Why List
       26.3 Why Images
       26.4 Why Grid
       
   27. AWARDS SECTION
       27.1 Awards Grid
       27.2 Award Items
       27.3 Award Icons
       
   28. SERVICE DETAIL PAGE
       28.1 Service Intro
       28.2 Service Features
       28.3 Service Images
       28.4 Why Choose Section
       28.5 Process Cards
       28.6 Project Cards
       28.7 Service Testimonial
       
   29. BLOG SECTION
       29.1 Blog Cards
       29.2 Blog Image
       29.3 Blog Content
       29.4 Blog Meta
       29.5 Blog Links
       29.6 Pagination
       
   30. BLOG DETAIL PAGE
       30.1 Blog Detail Meta
       30.2 Blog Title
       30.3 Author Inline
       30.4 Featured Image
       30.5 Blog Content Styles
       30.6 Lead Text
       30.7 Headings
       30.8 Images & Captions
       30.9 Image Grid
       30.10 Quote Styles
       30.11 Callout Box
       30.12 Video Embed
       30.13 Tags
       30.14 Author Box
       30.15 Comments Section
       30.16 Comment Form
       
   31. BLOG SIDEBAR
       31.1 Sidebar Base
       31.2 Search Widget
       31.3 Categories Widget
       31.4 Recent Posts
       31.5 Popular Posts
       31.6 Tag Cloud
       31.7 Newsletter Widget
       
   32. RESPONSIVE DESIGN
       32.1 max-width: 1024px
       32.2 max-width: 991px
       32.3 max-width: 768px
       32.4 max-width: 767px
       32.5 max-width: 576px
       32.6 max-width: 480px
       
   33. UTILITIES
       33.1 Hide/Show Mobile
       33.2 Performance Optimizations
       
================================================== */

/* =====================================================
   FONTS
   ===================================================== */
@import url('https://fonts.googleapis.com/css2?family=Anton+SC&family=Playfair+Display:wght@400;600;800;900&family=Outfit:wght@300;400;500;600;700&display=swap');


/* =====================================================
   CSS VARIABLES
   ===================================================== */
:root {
    --orange-primary: #088677;
    --orange-light: #12B39F;
    --orange-dark: #06685D;
    --orange-accent: #8EE1D4;
    --cream: #FFF8F3;
    --dark: #1A1A1A;
    --dark-brown: #2D2520;
    --text-light: #6B6B6B;
    --btn-padding: 13px 20px;
    --btn-font-size: 15px;
}

/* =====================================================
   RESET & BASE STYLES
   ===================================================== */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Outfit', sans-serif;
    background: var(--cream);
    color: var(--dark);
    overflow-x: hidden;
    line-height: 1.6;
}

/* =====================================================
   PRELOADER
   ===================================================== */
#preloader {
    position: fixed;
    inset: 0;
    background: var(--cream);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.9s ease;
}

body.loaded #preloader {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.preloader-inner {
    text-align: center;
}

.line-loader {
    width: 60px;
    height: 60px;
    border: 4px solid rgba(255, 255, 255, 0.85);
    border-top-color: var(--orange-primary);
    border-radius: 50%;
    animation: spin 0.9s linear infinite;
    position: relative;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.loader {
    position: absolute;
    width: 100vw;
    height: 100vh;
    z-index: 999;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 10px;
    font-weight: 300;
    color: rgba(255, 255, 255, 0.3);
    letter-spacing: 1px;
    text-align: center;
    text-transform: uppercase;
}

.loader.hide {
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease;
}

section{
  padding: 90px 5%;
}

section.grad{
  padding: 90px 0;
  background: linear-gradient(180deg, var(--cream) 0%, white 100%);
}

section.grad-rev{
  padding: 90px 0;
  background: linear-gradient(360deg, var(--cream) 0%, white 100%);
}

section.signature-collection{
  background: var(--dark-brown); color: white; padding: 100px 0;
}

/* =====================================================
   NAVIGATION
   ===================================================== */
.custom-navbar {
    padding: 1.3rem 5%;
    display: flex;
    min-height: 86px;
    justify-content: space-between;
    align-items: center;
    backdrop-filter: blur(10px);
    z-index: 1000;
    transition: transform 0.6s ease, background 0.3s ease;
}

.custom-navbar .container {
    display: flex;
    align-items: center;
}

.custom-navbar.scrolled {
    top: 0;
    left: 0;
}

.custom-navbar.scroll-down {
    transform: translateY(-100%);
}

.custom-navbar.scroll-up {
    transform: translateY(0);
    
}

.logo {
    display: block;
    z-index: 99999;
}

img.logo{display: block;}
img.logo-dark{display: none;}

.logo img {
    max-height: 48px;
}

/* Navigation Links */
.custom-nav .nav-link {
    font-weight: 900;
    font-size: 14.5px;
    color: var(--dark) !important;
    padding: 0 30px !important;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.custom-nav .nav-link:hover {
    color: var(--orange-dark) !important;
    transition: all 0.3s ease;
}

.custom-nav {
    margin-left: auto;
    margin-right: 18px;
}

.nav-actions {
    display: flex;
    align-items: center;
    gap: 14px;
}

.custom-nav .nav-link i::before{
  font-weight: 800 !important;
}

/* Dropdown Menus */
.home-dd {
    position: relative;
}

.home-dd-menu {
    position: absolute;
    display: flex;
    flex-direction: column;
    top: 54px;
    left: -220px;
    width: 100vw;
    max-width: 1058px;
    margin: 0 auto;
    gap: 20px;
    padding: 30px;
    background: linear-gradient(180deg, var(--cream) 0%, white 100%);
    border: 1px solid rgba(255, 107, 53, 0.1);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.035);
    border-top: 0;
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
    opacity: 0;
    visibility: hidden;
    transition: 0.25s ease;
    z-index: 99;
}

.home-dd:hover .home-dd-menu {
    opacity: 1;
    visibility: visible;
}

.home-dd-menu a {
    position: relative;
    top: 0;
    margin: 10px;
    background: var(--dark-brown);
    padding: 0;
    border-radius: 4px;
    overflow: hidden;
    transition: all 0.6s ease;
}

.home-dd-menu a:hover {
    top: -5px;
}

.home-dd-menu a span.badge {
    position: absolute;
    top: 5px;
    right: 5px;
    font-weight: 500;
    font-size: 11px;
    padding: 2px 6px;
    background: var(--orange-primary);
    border: 1px solid rgba(255, 255, 255, 0.35);
    border-radius: 30px;
}

.home-dd-item {
    display: flex;
    flex-direction: column;
    text-align: center;
    text-decoration: none;
    color: #fff;
    font-size: 15px;
    width: 184px;
    flex-shrink: 0;
}

.home-dd-item img {
    width: 100%;
    height: 100px;
    object-fit: cover;
    margin-bottom: 0;
    transition: 0.9s ease;
}

.home-dd-item:hover img {
    opacity: 0.6;
}

.home-dd-item span {
    opacity: 0.9;
    padding: 4px 0;
}

/* New Dropdown */
.nav-new-dd {
    position: relative;
}

.nav-new-menu {
    position: absolute;
    top: 54px;
    left: 100%;
    transform: translateX(-50%);
    background: linear-gradient(180deg, var(--cream) 0%, white 100%);
    border: 1px solid rgba(255, 107, 53, 0.1);
    border-bottom-left-radius: 9px;
    border-bottom-right-radius: 8px;
    border-top: 0;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.035);
    padding: 0;
    min-width: 200px;
    opacity: 0;
    visibility: hidden;
    transition: 0.25s ease;
    z-index: 99;
}

.nav-new-dd:hover .nav-new-menu {
    opacity: 1;
    visibility: visible;
}

.nav-new-item {
    display: block;
    padding: 10px 20px;
    font-size: 15px;
    font-weight: 400;
    color: var(--dark);
    text-decoration: none;
    white-space: nowrap;
    transition: 0.35s ease;
}

.nav-new-item:hover {
    background: #FFF3E9;
    transition: 0.35s ease;
}

.nav-new-item:last-child:hover {
    border-bottom-left-radius: 7px;
    border-bottom-right-radius: 7px;
}

/* Burger Menu */
.burger-menu {
    display: none;
    flex-direction: column;
    justify-content: space-between;
    width: 25px;
    height: 20px;
    cursor: pointer;
    z-index: 1001;
}

.burger-menu span {
    display: block;
    height: 3px;
    background-color: #333;
    border-radius: 2px;
    transition: 0.3s;
    transform-origin: center;
}

.burger-menu.open span:nth-child(1) {
    transform: rotate(45deg) translate(7px, 7px);
}

.burger-menu.open span:nth-child(2) {
    opacity: 0;
}

.burger-menu.open span:nth-child(3) {
    transform: rotate(-45deg) translate(5px, -5px);
}

/* CTA Navigation Button */
.cta-nav {
    font-size: var(--btn-font-size);
    background: var(--orange-primary);
    color: white;
    padding: 10px 24px;
    border-radius: 50px;
    text-decoration: none;
    font-weight: 600;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(255, 107, 53, 0.1);
}

.cta-nav:hover {
    background: var(--orange-dark);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px #0886778f;
}

/* =====================================================
   HERO SECTION
   ===================================================== */
.hero {
    display: flex;
    align-items: center;
    position: relative;
    padding: 90px 0;
    overflow: hidden;
    border-radius: 20px;
    margin: 0 1%;
}

.hero-video {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    background: #07090d url("../video/slider-poster.jpg") center / cover no-repeat;
}

.hero-video video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.hero .logo img,
.custom-navbar .logo img {
    object-fit: contain;
}

.hero .container-fluid {
    max-width: 1476px;
}

.hero::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -20%;
    width: 80%;
    height: 150%;
    background: radial-gradient(circle, rgba(255, 107, 53, 0.08) 0%, transparent 70%);
    animation: pulse 8s ease-in-out infinite;
}

@keyframes pulse {
    0%, 100% { transform: scale(1) rotate(0deg); }
    50% { transform: scale(1.1) rotate(5deg); }
}

/* Panorama Setup */
.hero-pano #slides,
.hero-pano .slide,
.hero-pano .pano {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}

.pano {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.pnlm-container,
.pnlm-render-container {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    overflow: hidden !important;
}

.pnlm-render-container canvas {
    width: 100% !important;
    height: 100% !important;
}

.pnlm-controls-container,
.pnlm-hot-spot-debug-indicator,
.pnlm-about-msg,
.pnlm-load-box,
.pnlm-load-bar,
.pnlm-load-msg,
.pnlm-load-button {
    display: none !important;
}

.pnlm-container * {
    box-sizing: border-box;
}

#slides {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.slide {
    opacity: 0;
    transition: opacity 1.6s ease;
}

.slide.active {
    opacity: 1;
}

/* Hero Overlay */
.hero-overlay {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    background: linear-gradient(to bottom, rgba(180, 90, 50, 0.25), rgba(30, 24, 18, 0.96));
    pointer-events: none;
}

.hero-overlay .container,
.hero-overlay .btn {
    pointer-events: auto;
}

.hero-content {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    padding: 0 0 4.5rem;
    gap: 4rem;
    align-items: center;
    color: #fff;
}

/* Hero Text */
.hero-text h1 {
    font-family: 'Anton SC', sans-serif;
    font-size: clamp(2.5rem, 5vw, 5rem);
    font-weight: 400;
    line-height: 1.1;
    letter-spacing: 0;
    margin-bottom: 1.5rem;
    color: white;
    animation: fadeInUp 0.8s ease-out 0.2s backwards;
}

.hero-text h1 .highlight {
    color: var(--orange-primary);
    position: relative;
    display: inline-block;
}

.hero-text h1 .highlight::after {
    content: '';
    position: absolute;
    bottom: 10px;
    left: 0;
    width: 100%;
    height: 20px;
    background: rgba(255, 107, 53, 0.2);
    z-index: -1;
    animation: expandWidth 0.8s ease-out 0.8s backwards;
}

.hero-text p {
    font-size: 1.2rem;
    color: white;
    margin-bottom: 2.5rem;
    max-width: 550px;
    line-height: 1.8;
    animation: fadeInUp 0.8s ease-out 0.4s backwards;
}

/* Hero CTA */
.hero-cta {
    display: inline-block;
    animation: fadeInUp 0.8s ease-out 0.6s backwards;
}

.hero-cta a {
    margin-right: 30px;
}

/* Hero Image */
.hero-image {
    position: relative;
    animation: fadeIn 1s ease-out 0.4s backwards;
}

.image-container {
    position: relative;
    border-radius: 22px;
    transition: transform 0.5s ease;
}

.image-container:hover {
    transform: scale(1.02);
}

.image-container::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(45, 37, 32, 0) 0%, transparent 60%);
    z-index: 1;
}

.image-container img {
    width: 100%;
    height: 600px;
    object-fit: cover;
    display: block;
}

/* Floating Badge */
.floating-badge {
    position: absolute;
    text-align: center;
    display: flex;
    justify-content: center;
    align-content: center;
    flex-direction: column;
    bottom: -20px;
    right: -20px;
    width: 170px;
    height: 170px;
    padding: 1.45rem;
    border-radius: 100%;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.1);
    z-index: 2;
    animation: float 3s ease-in-out infinite;
}

.floating-badge img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

.floating-badge h1, .floating-badge h3 {
    font-family: 'Playfair Display', serif;
    font-size: 2.5rem;
    color: var(--orange-primary);
    font-weight: 800;
}

.floating-badge p {
    color: var(--text-light);
    font-size: 0.9rem;
}

/* Floating Images */
.floating-images {
    position: relative;
    width: 100%;
    height: 500px;
}

.float-img {
    position: absolute;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
    transition: transform 0.3s ease;
}

.float-img:hover {
    transform: translateY(-10px) scale(1.02);
}

.float-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.float-1 {
    width: 320px;
    height: 100%;
    top: 50px;
    left: 0;
    z-index: 3;
    animation: float1 6s ease-in-out infinite;
}

.float-2 {
    width: 320px;
    height: 100%;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 2;
    animation: float2 7s ease-in-out infinite;
}

.float-3 {
    width: 320px;
    height: 100%;
    top: 60px;
    right: 0;
    z-index: 1;
    animation: float3 8s ease-in-out infinite;
}

/* Hero Slider */
.hero-slider {
  padding: 0;
  position: relative;
  min-height: 100vh;
  overflow: hidden;
}

/* Force height inside Locomotive */
.hero-slider .swiper,
.hero-slider .swiper-wrapper,
.hero-slider .swiper-slide {
  min-height: 100vh;
}

.hero-slide {
  background-size: cover;
  background-position: center;
  position: relative;
}

/* Overlay – cinematic, not muddy */
.hero-slider .hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    rgba(0,0,0,0.55) 0%,
    rgba(0,0,0,0.3) 40%,
    rgba(0,0,0,0.1) 70%,
    rgba(0,0,0,0) 100%
  );
  z-index: 1;
}

/* hero-slider */
.hero-slider {
  position: relative;
}
.hero-swiper {
  position: relative;
  overflow: hidden;
}
.hero-slide {
  background-size: cover;
  background-position: center;
  height: 100vh;
  position: relative;
  display: flex;
  align-items: center; 
}

.hero-slide::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: inherit;
  background-size: cover;
  background-position: center;
  animation: heroZoom 14s ease-in-out infinite alternate;
  z-index: 0;
}
@keyframes heroZoom {
  from { transform: scale(1); }
  to { transform: scale(1.06); }
}

.hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, rgba(0,0,0,0.60) 0%, rgba(0,0,0,0.10) 100%);
  z-index: 1;
}

.hero-slider .hero-content {
  position: relative;
  z-index: 2;
  max-width: 520px;
  display: flex;             
  flex-direction: column;    
  align-items: flex-start;    
  gap: 0;                     
  color: #fff;
  padding-left: 20px;         
}

.hero-slider h1 {
  font-size: 4.3rem;
  line-height: 1.1;
  font-weight: 600;
  letter-spacing: -0.02em;
  margin: 0 0 16px 0;        
}

.hero-slider p {
  font-size: 1rem;
  opacity: 0.85;
  max-width: 420px;
  margin: 0 0 28px 0;        
}

.hero-cta {
  display: block;
  margin-top: 20px;
}

.hero-cta .btn-primary{
  padding: 12px 30px;
}

.hero {
    height: 80vh;
}

.hero-swiper-prev,
.hero-swiper-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  color: #fff;
  font-size: 36px;
  opacity: 0.6;
  cursor: pointer;
  line-height: 1;
  transition: opacity 0.2s;
  /* Add a subtle hit area without a visible box */
  padding: 8px;
}
.hero-swiper-prev { left: 20px; }  /* ← was 40px, reduced to not crowd content */
.hero-swiper-next { right: 20px; }
.hero-swiper-prev:hover,
.hero-swiper-next:hover { opacity: 1; }

/* Pagination */
.hero-slider .swiper-pagination { bottom: 45px; }
.hero-slider .swiper-pagination-bullet {
  width: 6px;
  height: 6px;
  background: #fff;
  opacity: 0.35;
  transition: opacity 0.3s;
}
.hero-slider .swiper-pagination-bullet-active { 
    opacity: 1; 
    background: var(--orange-primary);
}



/* =====================================================
   KEYFRAME ANIMATIONS
   ===================================================== */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes expandWidth {
    from { width: 0; }
    to { width: 100%; }
}

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

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

@keyframes float2 {
    0%, 100% { transform: translateX(-50%) translateY(0); }
    50% { transform: translateX(-50%) translateY(-25px); }
}

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

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

/* =====================================================
   BUTTONS
   ===================================================== */
.btn-primary {
    font-size: var(--btn-font-size);
    background: var(--orange-primary);
    color: white;
    padding: var(--btn-padding);
    border-radius: 30px;
    text-decoration: none;
    font-weight: 600;
    border: none;
    cursor: pointer;
    line-height: 1.75;
    transition: all 0.3s ease;
}

.btn-primary:hover {
    background: var(--orange-dark);
    box-shadow: 0 15px 40px rgba(255, 107, 53, 0.15);
}

.btn-secondary {
    font-size: var(--btn-font-size);
    background: transparent;
    color: white;
    padding: 11px 25px;
    border-radius: 50px;
    text-decoration: none;
    font-weight: 600;
    line-height: 1.75;
    border: 2px solid rgba(255, 255, 255, 0.5);
    transition: all 0.3s ease;
}

.btn-secondary:hover {
    border: 2px solid rgba(255, 255, 255, 0.85);
    color: white;
}

.btn-white {
    background: white;
    color: var(--orange-primary);
    font-size: var(--btn-font-size);
    padding: 17px 24px;
    margin: 10px;
    border-radius: 50px;
    text-decoration: none;
    font-weight: 600;
    transition: all 0.3s ease;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}

.btn-white:hover {
    color: white; 
    background: var(--dark-brown);
    transform: translateY(-3px);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.3);
}

.btn-outline {
    background: transparent;
    color: white;
    font-size: var(--btn-font-size);
    padding: 14px 24px;
    margin: 10px;
    border-radius: 50px;
    text-decoration: none;
    font-weight: 600;
    border: 2px solid white;
    transition: all 0.3s ease;
}

.btn-outline:hover {
    background: white;
    color: var(--orange-primary);
    transform: translateY(-3px);
}

.btn-submit {
    width: max-content;
    background: var(--orange-primary);
    color: white;
    line-height: 1.3;
    border: none;
    border-radius: 50px;
    font-family: 'Outfit', sans-serif;
    font-size: var(--btn-font-size);
    padding: 14px 24px;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    transition: all 0.3s ease;
    box-shadow: 0 10px 30px rgba(255, 107, 53, 0.3);
    margin-top: 1rem;
}

.btn-submit:hover {
    background: var(--orange-dark);
    transform: translateY(-3px);
    box-shadow: 0 15px 40px rgba(255, 107, 53, 0.4);
}

.btn-submit:hover .submit-icon {
    transform: translateX(5px);
}

.submit-icon {
    position: relative;
    top: 2px;
    font-size: 1rem;
    transition: transform 0.3s ease;
}

/* =====================================================
   STATS SECTION
   ===================================================== */
.stats {
    padding: 30px 2vw;
    background: var(--dark-brown);
    color: white;
}

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

.stat-item {
    text-align: center;
    opacity: 0;
    animation: fadeInUp 0.8s ease-out forwards;
}

.stat-item:nth-child(1) { animation-delay: 0.1s; }
.stat-item:nth-child(2) { animation-delay: 0.2s; }
.stat-item:nth-child(3) { animation-delay: 0.3s; }
.stat-item:nth-child(4) { animation-delay: 0.4s; }

.stat-number {
    font-family: 'Playfair Display', serif;
    font-size: 3.5rem;
    font-weight: 800;
    color: white;
    margin-bottom: 0.5rem;
}

.stat-label {
    font-size: 1rem;
    color: rgba(255, 255, 255, 0.8);
    font-weight: 400;
}

/* =====================================================
   SECTION HEADERS
   ===================================================== */
.section-header {
    margin-bottom: 5rem;
}

.section-tag {
    display: inline-block;
    background: rgba(255, 107, 53, 0.1);
    color: var(--orange-primary);
    padding: 0.5rem 1.5rem;
    border-radius: 50px;
    font-weight: 600;
    font-size: 0.9rem;
    margin-bottom: 1rem;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.section-header h2 {
    font-family: 'Playfair Display', serif;
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 800;
    color: var(--dark-brown);
    margin-bottom: 1rem;
}

.section-header p {
    font-size: 1.2rem;
    color: var(--text-light);
    max-width: 600px;
    margin: 0 auto;
}

/* =====================================================
   SERVICES SECTION
   ===================================================== */
.services {
    position: relative;
}

.services-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2.5rem;
    max-width: 1400px;
    margin: 0 auto;
}

.service-card {
    background: white;
    padding: 3rem 2.5rem;
    border-radius: 18px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.05);
    transition: all 0.4s ease;
    position: relative;
    overflow: hidden;
}

.service-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.1);
}

.service-icon {
    width: 70px;
    height: 70px;
    color: white;
    background: linear-gradient(135deg, var(--orange-primary), var(--orange-light));
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    margin-bottom: 1.5rem;
    box-shadow: 0 8px 20px rgba(255, 107, 53, 0.3);
}

.service-card h3 {
    font-family: 'Playfair Display', serif;
    font-size: 1.8rem;
    font-weight: 700;
    margin-bottom: 1rem;
    color: var(--dark-brown);
}

.service-card p {
    color: var(--text-light);
    line-height: 1.7;
    margin-bottom: 1.5rem;
}

.service-link {
    color: var(--orange-primary);
    text-decoration: none;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    transition: gap 0.3s ease;
}

.service-link:hover {
    gap: 1rem;
}

.service-link i{
  position: relative;
  top: 2px;
  font-size: 11px;
}

/* =====================================================
   PORTFOLIO SECTION
   ===================================================== */
.portfolio {
    background: linear-gradient(180deg, var(--cream) 0%, rgba(255, 248, 243, 0.5) 100%);
}

.portfolio-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
    max-width: 1400px;
    margin: 3rem auto 0;
}

.portfolio-item {
    position: relative;
    border-radius: 8px;
    overflow: hidden;
    aspect-ratio: 4/2.7;
    cursor: pointer;
    box-shadow: 0 15px 50px rgba(0, 0, 0, 0.1);
}

.portfolio-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s ease;
}

.portfolio-item:hover img {
    transform: scale(1.1);
}

.portfolio-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(to top, rgba(26, 26, 26, 0.95) 0%, transparent 100%);
    padding: .5rem 2rem;
    transform: translateY(20px);
    opacity: 0;
    transition: all 0.4s ease;
}

.portfolio-item:hover .portfolio-overlay {
    transform: translateY(0);
    opacity: 1;
}

.portfolio-overlay h3 {
    font-family: 'Playfair Display', serif;
    font-size: 1.8rem;
    color: white;
    margin-bottom: 0.5rem;
}

.portfolio-overlay p {
    color: var(--orange-accent);
    font-weight: 500;
}

.gallery-filter {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
}

.gallery-filter .nav-link{
  color: var(--dark-brown);
  padding: .4rem 1rem;
  border-radius: 6px;
}

.gallery-filter .nav-link.active {
  background: var(--dark-brown);
}

/* =====================================================
   GALLERY LIGHTBOX
   ===================================================== */
.gallery-lightbox {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: block;               
  opacity: 0;
  visibility: hidden;
  pointer-events: none;        
  transition: opacity .3s ease, visibility .3s ease;
}

.gallery-lightbox.active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.lightbox-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.85);
  opacity: 0;
  transition: opacity .3s ease;
}

.gallery-lightbox.active .lightbox-overlay {
  opacity: 1;
}

.lightbox-content {
  position: relative;
  max-width: 90%;
  max-height: 90%;
  margin: auto;
  top: 50%;
  transform: translateY(-50%) scale(.95);
  padding: 12px;
  opacity: 0;
  transition: transform .3s ease, opacity .3s ease;
}

.gallery-lightbox.active .lightbox-content {
  transform: translateY(-50%) scale(1);
  opacity: 1;
}


.lightbox-content img,
.lightbox-content iframe {
  width: auto;
  height: 80vh;
  margin: 0 auto;
  object-fit: contain;
  display: none;
  border-radius: 12px;
  border: none;
}

.lightbox-content img{
  position: relative;
  top: -20px;
  height: 90vh;
  border-radius: 4px;
}

.lightbox-content iframe {
  width: 100%;
  height: 80vh;
}

.lightbox-close {
  position: absolute;
  top: -30px;
  right: -30px;
  background: rgba(255,255,255,.08);
  border: 1px solid var(--border-soft);
  color: #fff;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  cursor: pointer;
  transition: .2s ease;
}

.lightbox-close:hover {
  background: rgba(255,255,255,.15);
}

@media (max-width: 575px) {
  .lightbox-close{
    right: 0px;
  }
}

/* =====================================================
   BANNER SECTION
   ===================================================== */
.banner-section {
    padding: 0 5%;
}

.banner-container {
    background: linear-gradient(135deg, var(--orange-primary) 0%, var(--orange-dark) 100%);
    border-radius: 18px;
    padding: 2.5rem 3rem;
    box-shadow: 0 15px 50px rgba(255, 107, 53, 0.3);
    position: relative;
    overflow: hidden;
}

.banner-container::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -10%;
    width: 400px;
    height: 400px;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.15) 0%, transparent 70%);
    border-radius: 50%;
}

.banner-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 2rem;
    position: relative;
    z-index: 1;
}

.banner-text h3 {
    font-family: 'Playfair Display', serif;
    font-size: 2rem;
    color: white;
    font-weight: 800;
    margin-bottom: 0.5rem;
}

.banner-text p {
    color: rgba(255, 255, 255, 0.95);
    font-size: 1.1rem;
}

.banner-btn {
    background: white;
    color: var(--orange-primary);
    padding: 1rem 2.5rem;
    border-radius: 50px;
    text-decoration: none;
    font-weight: 700;
    white-space: nowrap;
    transition: all 0.3s ease;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

.banner-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 35px rgba(0, 0, 0, 0.25);
}

/* =====================================================
   VIRTUAL TOUR SECTION
   ===================================================== */
.virtual-tour {
    background: var(--cream);
}

.tour-container {
    margin: 0 auto;
}

.tour-main {
    display: block;
    text-align: center;
}

.tour-video {
    margin: 0 auto;
    max-width: 1280px;
    position: relative;
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
    cursor: pointer;
    transition: transform 0.4s ease;
}

.tour-video:hover {
    transform: scale(1.02);
}

.tour-video img {
    width: 100%;
    height: 550px;
    object-fit: cover;
    display: block;
}

.play-button {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    transition: transform 0.3s ease;
}

.tour-video:hover .play-button {
    transform: translate(-50%, -50%) scale(1.1);
}

.tour-info {
  max-width: 900px;
  margin: 60px auto 0;
}

.tour-info h3 {
    font-family: 'Playfair Display', serif;
    font-size: 2.1rem;
    font-weight: 800;
    color: var(--dark-brown);
    margin-bottom: 1.5rem;
}

.tour-info p {
    font-size: 1.1rem;
    color: var(--text-light);
    line-height: 1.8;
    margin-bottom: 2rem;
}

.tour-features {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 1.5rem;
}

.tour-feature {
    max-width: 150px;
    text-align: center;
    padding: 1rem;
    background: rgba(255,255,255,.85);
    border-radius: 15px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
    transition: all 0.3s ease;
}

.tour-feature:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
}

.tour-feature span.feature-icon {
    line-height: 1;
    width: 60px;
    height: 60px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--orange-primary);
    border-radius: 8px;
}

span.feature-icon i{
    font-size: 1.8rem;
}

.tour-feature span {
    display: inline-block;
    margin-top: 10px;
    font-weight: 600;
    color: var(--dark);
    line-height: 1.2;
}

/* ===================================
   ABOUT/PROCESS SECTION
   =================================== */
.about-process {
    padding: 90px 0;
    background: #fff;
    overflow: hidden;
}

.about-images {
    position: relative;
    padding: 30px;
}

.about-img-main {
    position: relative;
    z-index: 1;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0,0,0,0.15);
}

.about-img-main img {
    width: 100%;
    height: auto;
    display: block;
    transition: transform 0.6s ease;
}

.about-img-main:hover img {
    transform: scale(1.05);
}

.about-img-overlay {
    position: absolute;
    bottom: -20px;
    right: -20px;
    width: 60%;
    z-index: 2;
    border-radius: 12px;
    overflow: hidden;
    border: 8px solid #fff;
    box-shadow: 0 15px 40px rgba(0,0,0,0.2);
}

.about-img-overlay img {
    width: 100%;
    height: auto;
    display: block;
    transition: transform 0.6s ease;
}

.about-img-overlay:hover img {
    transform: scale(1.05);
}

.experience-badge {
    position: absolute;
    top: 40px;
    left: -20px;
    background: #FF6B35;
    color: #fff;
    padding: 25px 30px;
    border-radius: 12px;
    text-align: center;
    z-index: 3;
    box-shadow: 0 10px 30px rgba(255,107,53,0.4);
}

.experience-badge h3 {
    font-size: 48px;
    font-weight: 700;
    margin: 0;
    line-height: 1;
    color: #fff;
}

.experience-badge p {
    margin: 8px 0 0;
    font-size: 14px;
    line-height: 1.4;
    color: #fff;
    opacity: 0.95;
}

.about-content {
    padding-left: 40px;
}

.about-content p {
    color: #666;
    font-size: 16px;
    line-height: 1.8;
    margin-bottom: 20px;
}

.process-steps {
    margin-top: 40px;
}

.process-step {
    display: flex;
    gap: 20px;
    margin-bottom: 30px;
    align-items: flex-start;
}

.step-number {
    font-size: 48px;
    font-weight: 700;
    color: #FF6B35;
    opacity: 0.2;
    line-height: 1;
    min-width: 70px;
}

.step-content h4 {
    font-size: 20px;
    font-weight: 600;
    margin-bottom: 8px;
    color: #2C3E50;
}

.step-content p {
    color: #666;
    font-size: 15px;
    margin: 0;
}

/* ===================================
   ENHANCED STATS SECTION
   =================================== */
.stats-enhanced {
    padding: 45px 0;
    background: linear-gradient(135deg, #2C3E50 0%, #34495E 100%);
    position: relative;
    overflow: hidden;
}

.stats-enhanced::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url('data:image/svg+xml,<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg"><defs><pattern id="grid" width="100" height="100" patternUnits="userSpaceOnUse"><path d="M 100 0 L 0 0 0 100" fill="none" stroke="rgba(255,255,255,0.05)" stroke-width="1"/></pattern></defs><rect width="100%" height="100%" fill="url(%23grid)"/></svg>');
    opacity: 0.5;
}

.stats-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(circle at 50% 50%, rgba(255,107,53,0.1) 0%, transparent 70%);
}

.stats-grid-enhanced {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 40px;
    position: relative;
    z-index: 1;
}

.stat-item-enhanced {
    text-align: center;
    padding: 0px 30px 15px;
    position: relative;
}

.stat-icon {
    width: 60px;
    height: 60px;
    margin: 0 auto 20px;
    background: rgba(255,107,53,0.2);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.stat-icon i {
    font-size: 28px;
    color: #FF6B35;
}

.stat-item-enhanced .stat-number {
    font-size: 56px;
    font-weight: 700;
    color: #fff;
    margin-bottom: 5px;
    display: inline-block;
}

.stat-plus,
.stat-percent {
    font-size: 32px;
    font-weight: 700;
    color: #FF6B35;
    display: inline-block;
    margin-left: 5px;
}

.stat-item-enhanced .stat-label {
    color: rgba(255,255,255,0.8);
    font-size: 16px;
    font-weight: 500;
    margin-top: 10px;
}

/* Counter Animation */
@keyframes countUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.stat-number.counting {
    animation: countUp 0.6s ease-out;
}

/* =====================================================
   TESTIMONIALS SECTION
   ===================================================== */
.testimonials {
    background: white;
}

.testimonials-grid .swiper-slide {
  height: auto;
}

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

.testimonials-grid {
  position: relative;
  padding-bottom: 150px;
}

.testimonials-grid .swiper-prev,
.testimonials-grid .swiper-next {
  position: absolute;
  bottom: 20px;
  width: 60px;
  height: 60px;
  background: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  color: rgba(0,0,0,.865);
  cursor: pointer;
  z-index: 10;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
  transition: all 0.25s ease;
}

.testimonials-grid .swiper-prev {
  left: 50%;
  transform: translateX(-130%);
}

.testimonials-grid .swiper-next {
  left: 50%;
  transform: translateX(30%);
}

.testimonials-grid .swiper-prev:hover,
.testimonials-grid .swiper-next:hover {
  background: var(--orange-primary);
  color: #fff;
}

.testimonial-card {
    background: var(--cream);
    padding: 2.5rem;
    border-radius: 18px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05);
    transition: all 0.4s ease;
    position: relative;
}

.testimonial-card::before {
    content: '"';
    position: absolute;
    top: -20px;
    left: 30px;
    font-family: 'Playfair Display', serif;
    font-size: 8rem;
    color: var(--orange-primary);
    opacity: 0.15;
    line-height: 1;
}

.testimonial-card:hover {
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

.testimonial-card.featured {
    grid-column: span 2;
    background: linear-gradient(135deg, var(--orange-primary) 0%, var(--orange-dark) 100%);
    color: white;
}

.testimonial-card.featured .testimonial-text {
    color: rgba(255, 255, 255, 0.95);
}

.testimonial-card.featured .client-info h4,
.testimonial-card.featured .client-info p {
    color: white;
}

.testimonial-card.featured .stars {
    filter: brightness(0) invert(1);
}

.stars {
    font-size: .9rem;
    margin-bottom: 1.5rem;
}

.testimonial-text {
    font-size: 1.1rem;
    line-height: 1.8;
    color: var(--dark);
    margin-bottom: 2rem;
    font-style: italic;
}

.client-info {
    display: flex;
    align-items: center;
    gap: 1.5rem;
}

.client-info img {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    object-fit: cover;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

.client-info h3, .client-info h4 {
    font-family: 'Playfair Display', serif;
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--dark-brown);
    margin-bottom: 0.25rem;
}

.client-info p {
    color: var(--text-light);
    font-size: 0.95rem;
}

/* =====================================================
   FAQ SECTION
   ===================================================== */
.faq {
    background: linear-gradient(180deg, var(--cream) 0%, white 100%);
}

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

.faq-item {
    background: white;
    border-radius: 20px;
    margin-bottom: 1.5rem;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05);
    overflow: hidden;
    transition: all 0.3s ease;
}

.faq-item:hover {
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

.faq-question {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 2rem 2.5rem;
    cursor: pointer;
    transition: background 0.3s ease;
}

.faq-question:hover {
    background: rgba(255, 107, 53, 0.05);
}

.faq-question h3 {
    font-family: 'Playfair Display', serif;
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--dark-brown);
    margin: 0;
    flex: 1;
}

.faq-icon {
    font-size: 2rem;
    color: var(--orange-primary);
    font-weight: 300;
    transition: transform 0.3s ease;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.faq-item.active .faq-icon {
    transform: rotate(45deg);
}

.faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease, padding 0.4s ease;
}

.faq-item.active .faq-answer {
    max-height: 500px;
    padding: 0 2.5rem 2rem;
}

.faq-answer p {
    display: block;
    min-height: 100px;
    padding: 8px 0px;
    color: var(--text-light);
    line-height: 1.8;
    font-size: 1.05rem;
}

/* =====================================================
   CTA SECTION
   ===================================================== */
.cta-section {
    background: var(--orange-primary);
    color: white;
    text-align: center;
    position: relative;
    overflow: hidden;
}

.cta-section::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 0%, transparent 70%);
    animation: rotate 20s linear infinite;
}

.cta-content {
    position: relative;
    z-index: 1;
    max-width: 800px;
    margin: 0 auto;
}

.cta-content h2 {
    font-family: 'Playfair Display', serif;
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 800;
    margin-bottom: 1.5rem;
    line-height: 1.2;
}

.cta-content p {
    font-size: 1.1rem;
    margin-bottom: 2.8rem;
    opacity: 0.95;
}

.cta-buttons {
    display: block;
    justify-content: center;
}

/* =====================================================
   CONTACT SECTION
   ===================================================== */
.contact-map-section {
    padding: 80px 0;
    background: #f8f9fa;
}

.contact-map {
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 10px 40px rgba(45, 37, 32, 0.15);
    border: 8px solid #fff;
}

.contact-map iframe {
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
}

.ratio-30x9 {
    --bs-aspect-ratio: 30%;
}

.contact-section {
    background: var(--cream);
}

.contact-container {
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: 4rem;
    max-width: 1400px;
    margin: 0 auto;
    align-items: start;
}

.contact-info {
    position: sticky;
    top: 100px;
}

.contact-intro {
    margin-bottom: 3rem;
}

.contact-intro h3 {
    font-family: 'Playfair Display', serif;
    font-size: 2.5rem;
    font-weight: 800;
    color: var(--dark-brown);
    margin-bottom: 1rem;
}

.contact-intro p {
    font-size: 1.1rem;
    color: var(--text-light);
    line-height: 1.8;
}

.contact-details {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    margin-bottom: 3rem;
}

.contact-item {
    display: flex;
    gap: 1.5rem;
    align-items: flex-start;
}

.contact-icon {
    width: 60px;
    height: 60px;
    color: white;
    background: linear-gradient(135deg, var(--orange-primary), var(--orange-light));
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    flex-shrink: 0;
    box-shadow: 0 8px 20px rgba(255, 107, 53, 0.25);
}

.contact-text h4 {
    font-family: 'Playfair Display', serif;
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--dark-brown);
    margin-bottom: 0.5rem;
}

.contact-text p {
    color: var(--text-light);
    line-height: 1.6;
}

.contact-social {
    padding-top: 0px;
}

.contact-social h4 {
    font-family: 'Playfair Display', serif;
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--dark-brown);
    margin-bottom: 1.5rem;
}

.social-links-contact {
    display: flex;
    gap: 1rem;
}

.social-links-contact a {
    width: 50px;
    height: 50px;
    color: var(--dark);
    background: rgba(255,255,255,.35);
    border: 2px solid rgba(255, 107, 53, 0.2);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    text-decoration: none;
    transition: all 0.3s ease;
}

.social-links-contact a:hover {
    color: white;
    background: var(--orange-primary);
    border-color: var(--orange-primary);
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(255, 107, 53, 0.3);
}

/* Contact Form */
.contact-form-wrapper {
    background: white;
    padding: 3rem;
    border-radius: 18px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.08);
}

.contact-form {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
}

.form-group {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.form-group label {
    font-weight: 600;
    color: var(--dark-brown);
    font-size: 0.95rem;
}

.form-group input,
.form-group select,
.form-group textarea {
    padding: .5rem .7rem;
    border: 2px solid rgba(0, 0, 0, 0.1);
    border-radius: 6px;
    font-family: 'Outfit', sans-serif;
    font-size: 1rem;
    transition: all 0.3s ease;
    background: var(--cream);
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    outline: none;
    border-color: var(--orange-primary);
    background: white;
    box-shadow: 0 0 0 4px rgba(255, 107, 53, 0.1);
}

.form-group textarea {
    resize: vertical;
    min-height: 90px;
}

.form-group select {
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1L6 6L11 1' stroke='%23FF6B35' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 1.25rem center;
    padding-right: 3rem;
}

.checkbox-group {
    flex-direction: row;
    align-items: center;
}

.checkbox-label {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    cursor: pointer;
    font-weight: 400;
    color: var(--text-light);
}

.checkbox-label input[type="checkbox"] {
    width: 20px;
    height: 20px;
    cursor: pointer;
    accent-color: var(--orange-primary);
}

.form-note {
    font-size: 0.85rem;
    color: var(--text-light);
    text-align: center;
    margin-top: 0.5rem;
}

/* =====================================================
   FOOTER
   ===================================================== */
footer {
    background: transparent;
    color: white;
    padding: 0 5% 2rem;
}

.site-footer-minimal {
    background: transparent;
    padding-top: 0;
}

.footer-minimal-links {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 22px;
    flex-wrap: wrap;
    padding: 1.5rem 0 0;
}

.footer-minimal-links a {
    color: rgba(26, 26, 26, 0.68);
    font-size: 0.92rem;
    font-weight: 500;
    text-decoration: none;
}

.footer-minimal-links a:hover {
    color: var(--orange-primary);
}

.footer-content {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr;
    gap: 3rem;
    max-width: 1400px;
    margin: 0 auto 3rem;
}

.footer-brand h3 {
    font-family: 'Playfair Display', serif;
    font-size: 2rem;
    font-weight: 800;
    color: var(--orange-primary);
    margin-bottom: 1rem;
}

.footer-brand p {
    color: rgba(255, 255, 255, 0.7);
    line-height: 1.8;
    margin-bottom: 1.5rem;
}

.social-links {
    display: flex;
    gap: 1rem;
}

.social-links a {
    font-size: .875rem;
    width: 40px;
    height: 40px;
    background: rgba(255, 107, 53, 0.2);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255,255,255,.45);
    text-decoration: none;
    transition: all 0.3s ease;
}

.social-links a:hover {
    background: var(--orange-primary);
    color: white;
    transform: translateY(-3px);
}

.footer-links h3 {
    font-family: 'Playfair Display', serif;
    font-size: 1.3rem;
    margin-bottom: 1.5rem;
    color: white;
}

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

.footer-links ul li {
    margin-bottom: 0.8rem;
}

.footer-links ul li a, .footer-links ul li span {
    font-weight: 300;
    color: rgba(255, 255, 255, 0.6);
    text-decoration: none;
    transition: color 0.3s ease;
}

.footer-links ul li a:hover {
    color: var(--orange-primary);
}

.footer-bottom {
    height: auto;
    text-align: center;
    padding-top: 1rem;
    border-top: 0;
    color: rgba(26, 26, 26, 0.55);
}

/* =====================================================
   BACK TO TOP BUTTON
   ===================================================== */
.back-to-top {
    position: fixed;
    right: 20px;
    bottom: 20px;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: none;
    background: var(--orange-primary);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    z-index: 9999;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15);
}

.back-to-top i {
    font-size: 18px;
}

.back-to-top.show {
    opacity: 1;
    visibility: visible;
}

.back-to-top::before {
    content: "";
    position: absolute;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #0886778f;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    animation: hotspotPulse 1.8s ease-out infinite;
    pointer-events: none;
    z-index: -1;
}

.back-to-top:hover::before {
    width: 0;
    height: 0;
}

@keyframes hotspotPulse {
    0% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 1;
    }
    100% {
        transform: translate(-50%, -50%) scale(2);
        opacity: 0;
    }
}

/* =====================================================
   LOCOMOTIVE SCROLL
   ===================================================== */
html.has-scroll-smooth {
    overflow: hidden;
}

html.has-scroll-dragging {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.has-scroll-smooth body {
    overflow: hidden;
}

.has-scroll-smooth [data-scroll-container] {
    min-height: 100vh;
}

[data-scroll-direction="horizontal"] [data-scroll-container] {
    height: 100vh;
    display: inline-block;
    white-space: nowrap;
}

[data-scroll-direction="horizontal"] [data-scroll-section] {
    display: inline-block;
    vertical-align: top;
    white-space: nowrap;
    height: 100%;
}

.c-scrollbar {
    position: absolute;
    right: 0;
    top: 0;
    width: 11px;
    height: 100%;
    transform-origin: center right;
    transition: transform 0.3s, opacity 0.3s;
    opacity: 0;
}

.c-scrollbar:hover {
    transform: scaleX(1.45);
}

.c-scrollbar:hover,
.has-scroll-scrolling .c-scrollbar,
.has-scroll-dragging .c-scrollbar {
    opacity: 1;
}

.c-scrollbar_thumb {
    position: absolute;
    top: 0;
    right: 0;
    background-color: var(--dark-brown);
    opacity: 0.5;
    width: 7px;
    border-radius: 10px;
    margin: 2px;
    cursor: -webkit-grab;
    cursor: grab;
}

.has-scroll-dragging .c-scrollbar_thumb {
    cursor: -webkit-grabbing;
    cursor: grabbing;
}

/* Smooth Scroll Animations */
[data-scroll] {
    transition: opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1),
                transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Performance Optimizations */
.hero-image,
.float-img,
.service-card,
.portfolio-item {
    will-change: transform;
    transform: translateZ(0);
    backface-visibility: hidden;
}

/* =====================================================
   ABOUT PAGE STYLES
   ===================================================== */

/* Page Header */
.page-header {
    position: relative;
    min-height: 420px;
    display: flex;
    align-items: end;
    justify-content: left;
    text-align: center;
    overflow: hidden;
    padding: 90px 5% 30px;
}

.bread-title{
  display: flex;
}

.bread-title h2,
.bread-title h1,
.bread-title .h2 {
  font-size: 2.9rem;
  margin-bottom: 45px;
  font-weight: 300;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: white;
  animation: fadeInUp 0.8s ease-out 0.2s backwards;
}

.header-bg-image {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    z-index: 0;
}

.header-bg-image::before {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(26, 26, 26, 0.1);
    z-index: 1;
}

.header-bg-image::after {
    content: '';
    position: absolute;
    top: -30%;
    right: -20%;
    width: 70%;
    height: 150%;
    background: radial-gradient(circle, rgba(255, 107, 53, 0.25) 0%, transparent 50%);
    animation: pulse 8s ease-in-out infinite;
    z-index: 2;
}

.header-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, rgba(26, 26, 26, 0.4) 0%, rgba(26, 26, 26, 0.8) 100%);
    z-index: 1;
}

/* Breadcrumb */
.breadcrumb {
    display: flex;
    justify-content: left;
    gap: 1rem;
    margin-bottom: 15px;
    font-size: 1rem;
    font-weight: 300;
    letter-spacing: 0.5px;
}

.breadcrumb a {
    color: rgba(255, 255, 255, 0.7);
    text-decoration: none;
    transition: color 0.3s ease;
}

.breadcrumb a:hover {
    color: var(--orange-primary);
}

.breadcrumb .separator {
    color: rgba(255, 255, 255, 0.4);
}

.breadcrumb .current {
    color: var(--orange-primary);
    font-weight: 500;
}

.header-content {
    position: relative;
    z-index: 2;
    margin: 0 auto;
    color: white;
}

.header-tag {
    display: inline-block;
    background: rgba(255, 107, 53, 0.2);
    color: var(--orange-accent);
    padding: 0.6rem 1.8rem;
    border-radius: 50px;
    font-weight: 600;
    font-size: 0.9rem;
    margin-bottom: 2rem;
    letter-spacing: 2px;
    text-transform: uppercase;
    border: 1px solid rgba(255, 107, 53, 0.3);
    animation: fadeInUp 0.8s ease-out 0.2s backwards;
}

.header-content h1 {
    font-family: 'Playfair Display', serif;
    font-size: clamp(2.5rem, 6vw, 5rem);
    font-weight: 900;
    line-height: 1.1;
    margin-bottom: 2rem;
    animation: fadeInUp 0.8s ease-out 0.4s backwards;
}

.header-content h1 .highlight {
    color: var(--orange-primary);
    position: relative;
    display: inline-block;
}

.header-content h1 .highlight::after {
    content: '';
    position: absolute;
    bottom: 10px;
    left: 0;
    width: 100%;
    height: 15px;
    background: rgba(255, 107, 53, 0.3);
    z-index: -1;
}

.header-content p {
    font-size: 1.2rem;
    line-height: 1.8;
    color: rgba(255, 255, 255, 0.85);
    max-width: 700px;
    margin: 0 auto;
    animation: fadeInUp 0.8s ease-out 0.6s backwards;
}

/* About Story Section */
.about-story {
    background: var(--cream);
    position: relative;
}

.about-story::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255, 107, 53, 0.2), transparent);
}

.about-images {
    position: relative;
    padding: 40px 30px;
}

.about-img-main {
    position: relative;
    z-index: 1;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.15);
}

.about-img-main img {
    width: 100%;
    height: auto;
    display: block;
    transition: transform 0.8s ease;
}

.about-img-main:hover img {
    transform: scale(1.05);
}

.about-img-overlay {
    position: absolute;
    bottom: -30px;
    right: -30px;
    width: 60%;
    z-index: 2;
    border-radius: 20px;
    overflow: hidden;
    border: 10px solid var(--cream);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25);
}

.about-img-overlay img {
    width: 100%;
    height: auto;
    display: block;
    transition: transform 0.8s ease;
}

.about-img-overlay:hover img {
    transform: scale(1.05);
}

.experience-badge {
    position: absolute;
    top: 30px;
    left: -30px;
    background: linear-gradient(135deg, var(--orange-primary) 0%, var(--orange-dark) 100%);
    color: #fff;
    width: 160px;
    height: 160px;
    border-radius: 160px;
    text-align: center;
    z-index: 3;
    box-shadow: 0 15px 40px rgba(255, 107, 53, 0.4);
    animation: float 3s ease-in-out infinite;
}

.experience-badge h3 {
    font-family: 'Playfair Display', serif;
    font-size: 56px;
    font-weight: 900;
    margin: 0;
    line-height: 1;
    color: #fff;
}

.experience-badge p {
    margin: 10px 0 0;
    font-size: 15px;
    line-height: 1.4;
    color: #fff;
    opacity: 0.95;
    font-weight: 500;
}

.about-content {
    padding-left: 50px;
}

.about-content h2 {
    font-family: 'Playfair Display', serif;
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 800;
    color: var(--dark-brown);
    margin-bottom: 2rem;
}

.about-content p {
    color: var(--text-light);
    font-size: 1.1rem;
    line-height: 1.9;
    margin-bottom: 1.5rem;
}

.signature-section {
    margin-top: 3rem;
    padding-top: 2rem;
    border-top: 2px solid rgba(255, 107, 53, 0.15);
}

.signature {
    display: flex;
    align-items: center;
    gap: 1.5rem;
}

.signature img {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    object-fit: cover;
    box-shadow: 0 8px 20px rgba(255, 107, 53, 0.2);
}

.signature h3 {
    font-family: 'Playfair Display', serif;
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--dark-brown);
    margin-bottom: 0.25rem;
}

.signature p {
    color: var(--orange-primary);
    font-size: 0.95rem;
    font-weight: 600;
    margin: 0;
}

/* Process Section */
.process-section {
    background: linear-gradient(180deg, var(--cream) 0%, white 100%);
}

.process-timeline {
    max-width: 1000px;
    margin: 4rem auto 0;
    position: relative;
}

.process-timeline::before {
    content: '';
    position: absolute;
    left: 50px;
    top: 0;
    bottom: 0;
    width: 3px;
    background: linear-gradient(to bottom, var(--orange-primary), var(--orange-light));
    opacity: 0.3;
}

.process-step {
    display: grid;
    grid-template-columns: 100px 1fr;
    gap: 3rem;
    margin-bottom: 4rem;
    align-items: flex-start;
}

.step-number {
    font-family: 'Playfair Display', serif;
    font-size: 4rem;
    font-weight: 900;
    color: var(--orange-primary);
    opacity: 0.2;
    line-height: 1;
    text-align: center;
    position: relative;
}

.step-number::after {
    content: '';
    position: absolute;
    right: -25px;
    top: 50%;
    transform: translateY(-50%);
    width: 20px;
    height: 20px;
    background: var(--orange-primary);
    border: 5px solid var(--cream);
    border-radius: 50%;
    box-shadow: 0 0 0 8px rgba(255, 107, 53, 0.1);
}

.step-content {
    background: white;
    padding: 2.5rem;
    border-radius: 18px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.06);
    transition: all 0.4s ease;
}

.step-content:hover {
    transform: translateX(10px);
    box-shadow: 0 15px 50px rgba(0, 0, 0, 0.12);
}

.step-icon {
    width: 60px;
    height: 60px;
    background: rgba(255, 107, 53, 0.1);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.8rem;
    color: var(--orange-primary);
    margin-bottom: 1.5rem;
}

.step-content h3 {
    font-family: 'Playfair Display', serif;
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--dark-brown);
    margin-bottom: 1rem;
}

.step-content p {
    color: var(--text-light);
    line-height: 1.8;
    font-size: 1.05rem;
}

/* Team Section */
.team-section {
    background: white;
}

.team-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2.5rem;
    max-width: 1400px;
    margin: 0 auto;
}

.team-member {
    text-align: center;
    transition: transform 0.4s ease;
}

.team-member:hover {
    transform: translateY(-10px);
}

.member-image {
    position: relative;
    border-radius: 20px;
    overflow: hidden;
    margin-bottom: 1.5rem;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.1);
}

.member-image img {
    width: 100%;
    height: auto;
    display: block;
    transition: transform 0.6s ease;
}

.member-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(26, 26, 26, 0.9) 0%, transparent 60%);
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding: 2rem;
    opacity: 0;
    transition: opacity 0.4s ease;
}

.member-image:hover .member-overlay {
    opacity: 1;
}

.member-image:hover img {
    transform: scale(1.1);
}

.member-overlay .social-links {
    display: flex;
    gap: 1rem;
}

.member-overlay .social-links a {
    width: 40px;
    height: 40px;
    background: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--orange-primary);
    text-decoration: none;
    font-size: 1rem;
    transition: all 0.3s ease;
}

.member-overlay .social-links a:hover {
    background: var(--orange-primary);
    color: white;
    transform: translateY(-5px);
}

.member-info h3 {
    font-family: 'Playfair Display', serif;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--dark-brown);
    margin-bottom: 0.5rem;
}

.member-role {
    color: var(--orange-primary);
    font-weight: 600;
    font-size: 0.95rem;
    margin-bottom: 1rem;
}

.member-bio {
    color: var(--text-light);
    line-height: 1.6;
    font-size: 0.95rem;
}

/* Why Choose Us Section */
.why-choose {
    background: var(--cream);
}

.why-content {
    padding-right: 50px;
}

.why-content h2 {
    font-family: 'Playfair Display', serif;
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 800;
    color: var(--dark-brown);
    margin-bottom: 1.5rem;
}

.why-content > p {
    color: var(--text-light);
    font-size: 1.1rem;
    line-height: 1.8;
    margin-bottom: 3rem;
}

.why-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.why-item {
    display: flex;
    gap: 1.5rem;
    align-items: flex-start;
}

.why-text h4 {
    font-family: 'Playfair Display', serif;
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--dark-brown);
    margin-bottom: 0.5rem;
}

.why-text p {
    color: var(--text-light);
    line-height: 1.7;
    font-size: 1rem;
    margin: 0;
}

.why-images {
    position: relative;
}

.why-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem;
}

.why-grid img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 20px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
    transition: transform 0.6s ease;
}

.why-grid img:hover {
    transform: scale(1.05);
}

.why-grid img:first-child {
    margin-top: 50px;
}

/* Awards Section */
.awards-section {
    background: white;
}

.awards-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2.5rem;
    max-width: 1400px;
    margin: 0 auto;
}

.award-item {
    background: var(--cream);
    padding: 3rem 2rem;
    border-radius: 18px;
    text-align: center;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.05);
    transition: all 0.4s ease;
}

.award-item:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.12);
}

.award-icon {
    width: 70px;
    height: 70px;
    margin: 0 auto 1.5rem;
    background: var(--dark-brown);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    color: white;
    box-shadow: 0 10px 30px rgba(255, 107, 53, 0.3);
}

.award-item h3 {
    font-family: 'Playfair Display', serif;
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--dark-brown);
    margin-bottom: 0.75rem;
    line-height: 1.4;
}

.award-item p {
    color: var(--text-light);
    font-size: 0.95rem;
    margin: 0;
}

/* ===================================
   Service Detail
   =================================== */

.service-detail-section {
    padding: 90px 0;
    background: linear-gradient(180deg, var(--cream) 0%, white 100%);
}

/* Service Intro */
.service-intro-content {
    padding-right: 40px;
}

.service-subtitle {
    display: inline-block;
    font-size: 14px;
    font-weight: 600;
    color: #FF6B35;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 20px;
}

.service-main-title {
    font-size: 48px;
    font-weight: 800;
    color: rgb(45, 37, 32);
    line-height: 1.2;
    margin: 0;
}

.service-intro-text {
    padding-left: 40px;
    border-left: 3px solid #FF6B35;
}

.service-intro-text p {
    font-size: 16px;
    line-height: 1.8;
    color: #666;
    margin-bottom: 20px;
}

.service-intro-text p:last-child {
    margin-bottom: 0;
}

/* Service Feature Box */
.service-feature-box {
    padding: 45px 35px;
    background: #fff;
    border: 1px solid #e5e5e5;
    transition: all 0.4s ease;
    height: 100%;
    border-radius: 12px;
    position: relative;
}

.service-feature-box:hover {
    border-color: #FF6B35;
    box-shadow: 0 10px 40px rgba(45, 37, 32, 0.1);
    transform: translateY(-5px);
}

.feature-number {
    font-size: 14px;
    font-weight: 700;
    color: #FF6B35;
    margin-bottom: 25px;
    letter-spacing: 1px;
}

.feature-icon-wrap {
    width: 70px;
    height: 70px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 107, 53, 0.1);
    margin-bottom: 25px;
    transition: all 0.4s ease;
}

.service-feature-box:hover .feature-icon-wrap {
    background: #FF6B35;
}

.feature-icon-wrap i {
    font-size: 32px;
    color: #FF6B35;
    transition: all 0.4s ease;
}

.service-feature-box:hover .feature-icon-wrap i {
    color: #fff;
}

.service-feature-box h3, .service-feature-box h4 {
    font-size: 22px;
    font-weight: 700;
    color: rgb(45, 37, 32);
    margin-bottom: 15px;
}

.service-feature-box p {
    font-size: 15px;
    line-height: 1.7;
    color: #666;
    margin: 0;
}

/* Large Feature Image */
.service-large-image {
    position: relative;
    overflow: hidden;
    margin: 60px 0;
    border-radius: 12px;
}

.service-large-image img {
    width: 100%;
    height: auto;
    display: block;
}

/* Why Choose Us Section */
.service-why-image {
    position: relative;
    overflow: hidden;
    border-radius: 12px;
}

.service-why-image img {
    width: 100%;
    height: auto;
    display: block;
}

.why-badge {
    position: absolute;
    bottom: 40px;
    right: 40px;
    width: 160px;
    height: 160px;
    background: linear-gradient(135deg, #FF6B35 0%, #ff8559 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 15px 40px rgba(255, 107, 53, 0.4);
}

.badge-content {
    text-align: center;
    color: #fff;
}

.badge-content h3 {
    font-size: 48px;
    font-weight: 800;
    line-height: 1;
    margin-bottom: 10px;
}

.badge-content p {
    font-size: 14px;
    font-weight: 600;
    margin: 0;
    line-height: 1.3;
}

.service-why-content {
    padding-left: 40px;
}

.section-title {
    font-size: 42px;
    font-weight: 800;
    color: rgb(45, 37, 32);
    line-height: 1.2;
    margin-bottom: 25px;
}

.service-why-content > p {
    font-size: 16px;
    line-height: 1.8;
    color: #666;
}

.why-list {
    margin-top: 30px;
}

.why-item {
    display: flex;
    gap: 20px;
    margin-bottom: 15px;
}

.why-item:last-child {
    margin-bottom: 0;
}

.why-text h3, .why-text h5 {
    font-size: 18px;
    font-weight: 700;
    color: rgb(45, 37, 32);
    margin-bottom: 8px;
}

.why-text p {
    font-size: 15px;
    line-height: 1.7;
    color: #666;
    margin: 0;
}

/* Process Section */
.service-process-header {
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
}

.service-process-header p {
    font-size: 16px;
    color: #666;
    margin: 0;
}

.process-card {
    padding: 40px 35px;
    background: #f8f9fa;
    height: 100%;
    transition: all 0.4s ease;
    position: relative;
    overflow: hidden;
    border-radius: 12px;
}

.process-card:hover {
    background: #fff;
    box-shadow: 0 10px 40px rgba(45, 37, 32, 0.1);
    transform: translateY(-5px);
}

.process-number {
    font-size: 72px;
    font-weight: 800;
    color: rgba(255, 107, 53, 0.1);
    line-height: 1;
    margin-bottom: 20px;
}

.process-card h3 {
    font-size: 22px;
    font-weight: 700;
    color: rgb(45, 37, 32);
    margin-bottom: 15px;
}

.process-card p {
    font-size: 15px;
    line-height: 1.7;
    color: #666;
    margin: 0;
}

/* Project Cards */
.project-card {
    position: relative;
    overflow: hidden;
    height: 100%;
}

.project-image {
    position: relative;
    overflow: hidden;
    border-radius: 12px;
}

.project-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.6s ease;
}

.project-card:hover .project-image img {
    transform: scale(1.1);
}

.project-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 30px;
    background: linear-gradient(to top, rgba(45, 37, 32, 0.95) 0%, transparent 100%);
    transform: translateY(20px);
    opacity: 0;
    transition: all 0.4s ease;
}

.project-card:hover .project-overlay {
    transform: translateY(0);
    opacity: 1;
}

.project-overlay h3 {
    font-size: 20px;
    font-weight: 700;
    color: #fff;
    margin-bottom: 8px;
}

.project-overlay p {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.8);
    margin: 0;
}

/* Testimonial */
.service-testimonial-wrapper {
    background: linear-gradient(135deg, #FFF5F2 0%, #FFE8E0 100%);
    padding: 80px 60px;
    text-align: center;
    margin-top: 30px;
    position: relative;
    border-radius: 18px;
}

.testimonial-quote-icon {
    width: 80px;
    height: 80px;
    background: #FF6B35;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 40px;
}

.testimonial-quote-icon i {
    font-size: 36px;
    color: #fff;
}

.testimonial-quote {
    font-size: 24px;
    line-height: 1.7;
    font-style: italic;
    color: rgb(45, 37, 32);
    margin-bottom: 40px;
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
}

.testimonial-author-info {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
}

.testimonial-author-info img {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    object-fit: cover;
    border: 4px solid #fff;
}

.testimonial-author-info h4 {
    font-size: 18px;
    font-weight: 700;
    color: rgb(45, 37, 32);
    margin-bottom: 5px;
}

.testimonial-author-info span {
    font-size: 14px;
    color: #888;
}

/* =====================================================
   BLOG
   ===================================================== */
  .blog-card {
      background: #fff;
      border-radius: 12px;
      overflow: hidden;
      transition: all 0.4s ease;
      box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
      height: 100%;
      display: flex;
      flex-direction: column;
  }

  .blog-card:hover {
      transform: translateY(-8px);
      box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
  }

  .blog-image {
      position: relative;
      overflow: hidden;
      height: 250px;
  }

  .blog-image img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      transition: transform 0.5s ease;
  }

  .blog-card:hover .blog-image img {
      transform: scale(1.1);
  }

  .blog-category {
      position: absolute;
      top: 20px;
      left: 20px;
      background: rgba(0, 0, 0, .35);
      color: #fff;
      padding: 4px 12px;
      border-radius: 20px;
      font-size: 11px;
      font-weight: 500;
      text-transform: uppercase;
      letter-spacing: 0.5px;
  }

  .blog-content {
      padding: 30px;
      flex: 1;
      display: flex;
      flex-direction: column;
  }

  .blog-meta {
      display: flex;
      gap: 20px;
      margin-bottom: 15px;
      color: #888;
      font-size: 14px;
  }

  .blog-meta span {
      display: flex;
      align-items: center;
      gap: 6px;
  }

  .blog-meta i {
      font-size: 14px;
  }

  .blog-title {
      margin-bottom: 15px;
      font-size: 20px;
      font-weight: 700;
      line-height: 1.4;
  }

  .blog-title a {
      color: #1a1a1a;
      text-decoration: none;
      transition: color 0.3s ease;
  }

  .blog-title a:hover {
      color: #FF6B35;
  }

  .blog-excerpt {
      color: #666;
      line-height: 1.6;
      margin-bottom: 20px;
      flex: 1;
  }

  .blog-link {
      color: #FF6B35;
      text-decoration: none;
      font-weight: 600;
      display: inline-flex;
      align-items: center;
      gap: 8px;
      transition: gap 0.3s ease;
  }

  .blog-link:hover {
      gap: 12px;
  }

  .blog-link i {
      position: relative;
      top: 2px;
      font-size: 11px;
      transition: transform 0.3s ease;
  }

  .blog-link:hover i {
      transform: translateX(4px);
  }

  /* Custom Pagination Styles */
  .pagination {
      display: flex;
      gap: 10px;
      padding: 0;
      margin: 0;
      list-style: none;
  }

  .page-item {
      margin: 0;
  }

  .page-link {
      display: flex;
      align-items: center;
      justify-content: center;
      min-width: 48px;
      height: 48px;
      padding: 0 18px;
      border: none;
      border-radius: 24px;
      background: #f8f8f8;
      color: #1a1a1a;
      font-weight: 600;
      font-size: 15px;
      text-decoration: none;
      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  }

  .page-link:hover {
      background: #FF6B35;
      color: #fff;
      transform: scale(1.05);
      box-shadow: 0 6px 20px rgba(255, 107, 53, 0.25);
  }

  .page-link:focus {
      box-shadow: 0 0 0 4px rgba(255, 107, 53, 0.15);
      outline: none;
  }

  .page-item.active .page-link {
      background: linear-gradient(135deg, #FF6B35 0%, #ff8559 100%);
      color: #fff;
      box-shadow: 0 6px 20px rgba(255, 107, 53, 0.3);
  }

  .page-link i{
    position: relative;
    font-size: 11px;
    top: 1px;
    padding: 10px;
  }

  .page-item.active .page-link:hover {
      transform: scale(1);
  }

  .page-item.disabled .page-link {
      background: #f0f0f0;
      color: #bbb;
      cursor: not-allowed;
      opacity: 0.5;
  }

  .page-item.disabled .page-link:hover {
      background: #f0f0f0;
      color: #bbb;
      transform: none;
      box-shadow: none;
  }

  .page-item.disabled .page-link:hover i {
      transform: none;
  }

  /* ===================================
   Blog Detail Section Styles
   =================================== */

.blog-detail-section {
    padding: 120px 0 80px;
    background: linear-gradient(180deg, var(--cream) 0%, white 100%);
}

.blog-detail-meta {
    display: flex;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
    margin-bottom: 20px;
}

.blog-category-badge {
    background: rgba(255, 107, 53, 0.1);
    color: var(--orange-primary);
    padding: 6px 16px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.blog-date,
.blog-reading-time {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    color: #888;
}

.blog-date i,
.blog-reading-time i {
    font-size: 14px;
}

/* Title */
.blog-detail-title {
    font-size: 42px;
    font-weight: 800;
    line-height: 1.2;
    color: #1a1a1a;
    margin-bottom: 30px;
}

/* Author Inline */
.blog-author-inline {
    display: flex;
    align-items: center;
    gap: 15px;
    padding-bottom: 30px;
    border-bottom: 1px solid #eee;
}

.author-avatar {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    object-fit: cover;
}

.author-details {
    display: flex;
    flex-direction: column;
}

.author-name {
    font-weight: 700;
    color: #1a1a1a;
    font-size: 15px;
}

.author-role {
    font-size: 13px;
    color: #888;
}

/* Featured Image */
.blog-detail-thumb {
    margin: 30px 0;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
}

.blog-detail-thumb img {
    width: 100%;
    height: auto;
    display: block;
}

/* Blog Content */
.blog-content {
    font-size: 17px;
    line-height: 1.8;
    color: #333;
}

.lead-text {
    font-size: 20px;
    line-height: 1.7;
    color: #555;
    font-weight: 400;
    margin-bottom: 30px;
    padding-left: 20px;
    border-left: 4px solid #FF6B35;
}

.blog-content p {
    margin-bottom: 20px;
}

.blog-content h2 {
    font-size: 32px;
    font-weight: 700;
    color: #1a1a1a;
    margin-top: 50px;
    margin-bottom: 20px;
    line-height: 1.3;
}

.blog-content h3 {
    font-size: 24px;
    font-weight: 600;
    color: #1a1a1a;
    margin-bottom: 15px;
}

.blog-content h4 {
    font-size: 20px;
    font-weight: 600;
    color: #1a1a1a;
    margin-top: 25px;
    margin-bottom: 12px;
}

/* Images */
.blog-image-wrapper {
    margin: 40px 0;
    border-radius: 12px;
    overflow: hidden;
}

.blog-image-wrapper img {
    width: 100%;
    height: auto;
    display: block;
}

.image-caption {
    text-align: center;
    font-size: 14px;
    color: #888;
    font-style: italic;
    margin-top: 12px;
    padding: 0 20px;
}

/* Image Grid */
.blog-image-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    margin: 40px 0;
}

.blog-image-grid .grid-item {
    border-radius: 12px;
    overflow: hidden;
}

.blog-image-grid img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.4s ease;
}

.blog-image-grid .grid-item:hover img {
    transform: scale(1.05);
}

/* Quote */
.blog-quote {
    background: linear-gradient(135deg, #FFF5F2 0%, #FFE8E0 100%);
    border-left: 5px solid #FF6B35;
    padding: 35px 40px;
    margin: 40px 0;
    border-radius: 8px;
    position: relative;
}

.quote-icon {
    font-size: 40px;
    color: #FF6B35;
    opacity: 0.3;
    position: absolute;
    top: 20px;
    left: 20px;
}

.blog-quote p {
    font-size: 20px;
    font-style: italic;
    line-height: 1.6;
    color: #1a1a1a;
    margin: 0 0 15px 0;
    padding-left: 20px;
}

.blog-quote cite {
    font-size: 15px;
    color: #666;
    font-style: normal;
    font-weight: 600;
    padding-left: 20px;
}

/* Lists */
.blog-list {
    list-style: none;
    padding: 0;
    margin: 30px 0;
}

.blog-list li {
    padding-left: 0;
    margin-bottom: 15px;
    position: relative;
    line-height: 1.7;
}

/* Callout Box */
.blog-callout {
    background: rgba(0,0,0,.02);
    border: 1px solid rgba(0,0,0,.1);
    border-radius: 12px;
    padding: 30px;
    margin: 40px 0;
    display: flex;
    gap: 20px;
}

.callout-icon {
    flex-shrink: 0;
    width: 50px;
    height: 50px;
    background: linear-gradient(135deg, #FF6B35 0%, #ff8559 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 24px;
}

.callout-content h4 {
    margin-top: 0;
    margin-bottom: 10px;
    color: #1a1a1a;
    font-size: 18px;
}

.callout-content p {
    margin: 0;
    color: #555;
    line-height: 1.6;
}

/* Video */
.blog-video {
    margin: 40px 0;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
}

/* Tags */
.blog-tags-wrapper {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 40px;
    padding-top: 30px;
    border-top: 1px solid #eee;
}

.blog-tag {
    background: #f5f5f5;
    color: #666;
    padding: 8px 18px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 500;
    text-decoration: none;
    transition: all 0.3s ease;
}

.blog-tag:hover {
    background: #FF6B35;
    color: #fff;
    transform: translateY(-2px);
}

/* Divider */
.blog-divider {
    margin: 50px 0;
    border: 0;
    border-top: 2px solid #eee;
}

/* Author Box */
.author-box {
    display: flex;
    gap: 25px;
    background: rgba(0,0,0,.02);
    padding: 35px;
    border-radius: 16px;
    margin-bottom: 60px;
}

.author-box-avatar {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
    border: 4px solid #fff;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

.author-box-content {
    flex: 1;
}

.author-box-name {
    font-size: 20px;
    font-weight: 700;
    color: #1a1a1a;
    margin-bottom: 5px;
}

.author-box-role {
    font-size: 14px;
    color: rgba(0,0,0,.3);
    font-weight: 500;
    margin-bottom: 15px;
}

.author-box-bio {
    font-size: 15px;
    line-height: 1.6;
    color: #555;
    margin-bottom: 20px;
}

.author-social {
    display: flex;
    gap: 12px;
}

.author-social a {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #666;
    text-decoration: none;
    transition: all 0.3s ease;
}

.author-social a:hover {
    background: #FF6B35;
    color: #fff;
    transform: translateY(-3px);
}

/* Comments */
.blog-comments {
    margin-bottom: 50px;
}

.comments-title {
    font-size: 28px;
    font-weight: 700;
    color: #1a1a1a;
    margin-bottom: 35px;
}

.comment-item {
    display: flex;
    gap: 20px;
    margin-bottom: 35px;
    padding-bottom: 35px;
    border-bottom: 1px solid #eee;
}

.comment-item:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.comment-avatar {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

.comment-content {
    flex: 1;
}

.comment-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
}

.comment-author {
    font-size: 16px;
    font-weight: 700;
    color: #1a1a1a;
    margin: 0;
}

.comment-date {
    font-size: 13px;
    color: #888;
}

.comment-text {
    font-size: 15px;
    line-height: 1.7;
    color: #555;
    margin-bottom: 12px;
}

.comment-reply {
    font-size: 14px;
    color: #FF6B35;
    text-decoration: none;
    font-weight: 600;
    transition: color 0.3s ease;
}

.comment-reply:hover {
    color: #ff8559;
}

/* Comment Form */
.comment-form-wrapper {
    background: #f8f9fa;
    padding: 40px;
    border-radius: 16px;
}

.comment-form-title {
    font-size: 24px;
    font-weight: 700;
    color: #1a1a1a;
    margin-bottom: 25px;
}

.comment-form .form-control {
    border: 2px solid #e5e5e5;
    border-radius: 8px;
    padding: 12px 18px;
    font-size: 15px;
    transition: all 0.3s ease;
}

.comment-form .form-control:focus {
    border-color: #FF6B35;
    box-shadow: 0 0 0 4px rgba(255, 107, 53, 0.1);
    outline: none;
}

.comment-form textarea.form-control {
    resize: vertical;
    min-height: 120px;
}

.btn-primary-blog {
    background: linear-gradient(135deg, #FF6B35 0%, #ff8559 100%);
    color: #fff;
    border: none;
    padding: 12px 28px;
    border-radius: 30px;
    font-weight: 600;
    font-size: 15px;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
}

.btn-primary-blog:hover {
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(255, 107, 53, 0.3);
}

/* ===================================
   Sidebar Styles
   =================================== */

  .blog-sidebar {
      position: sticky;
      top: 100px;
  }

  .sidebar-widget {
      background: #fff;
      padding: 30px;
      border-radius: 12px;
      margin-bottom: 30px;
      box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03);
  }

  .widget-title {
      font-size: 20px;
      font-weight: 700;
      color: #1a1a1a;
      margin-bottom: 15px;
      padding-bottom: 15px;
  }

  /* Search Widget */
  .sidebar-search .search-wrapper {
      position: relative;
  }

  .sidebar-search .form-control {
      border: 2px solid #e5e5e5;
      border-radius: 8px;
      padding: 12px 50px 12px 18px;
      font-size: 14px;
      transition: all 0.3s ease;
  }

  .sidebar-search .form-control:focus {
      border-color: #FF6B35;
      box-shadow: 0 0 0 4px rgba(255, 107, 53, 0.1);
      outline: none;
  }

  .search-btn {
      position: absolute;
      right: 8px;
      top: 50%;
      transform: translateY(-50%);
      width: 36px;
      height: 36px;
      border: none;
      background: #FF6B35;
      color: #fff;
      border-radius: 6px;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: all 0.3s ease;
  }

  .search-btn:hover {
      background: #ff8559;
  }

  /* Categories */
  .category-list {
      list-style: none;
      padding: 0;
      margin: 0;
  }

  .category-list li {
      margin-bottom: 12px;
  }

  .category-list li:last-child {
      margin-bottom: 0;
  }

  .category-list a {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 10px 15px;
      border-radius: 6px;
      color: #555;
      text-decoration: none;
      transition: all 0.3s ease;
      background: #f8f9fa;
  }

  .category-list a:hover {
      background: #FF6B35;
      color: #fff;
      transform: translateX(5px);
  }

  .category-count {
      font-size: 13px;
      font-weight: 600;
  }

  /* Recent Posts */
  .recent-posts {
      display: flex;
      flex-direction: column;
      gap: 20px;
  }

  .recent-post-item {
      display: flex;
      gap: 15px;
      text-decoration: none;
      transition: transform 0.3s ease;
  }

  .recent-post-item:hover {
      transform: translateX(5px);
  }

  .recent-post-item img {
      width: 80px;
      height: 80px;
      object-fit: cover;
      border-radius: 8px;
      flex-shrink: 0;
  }

  .recent-post-content h5 {
      font-size: 15px;
      font-weight: 600;
      color: #1a1a1a;
      margin-bottom: 8px;
      line-height: 1.4;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
  }

  .recent-post-date {
      font-size: 12px;
      color: #888;
      display: flex;
      align-items: center;
      gap: 5px;
  }

  /* Popular Posts */
  .popular-posts {
      display: flex;
      flex-direction: column;
      gap: 20px;
  }

  .popular-post-item {
      display: flex;
      gap: 15px;
      text-decoration: none;
      padding: 15px;
      border-radius: 8px;
      background: #f8f9fa;
      transition: all 0.3s ease;
  }

  .popular-post-item:hover {
      background: #FFF5F2;
      transform: translateX(5px);
  }

  .popular-post-number {
      width: 35px;
      height: 35px;
      background: linear-gradient(135deg, #FF6B35 0%, #ff8559 100%);
      color: #fff;
      border-radius: 8px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-weight: 700;
      font-size: 16px;
      flex-shrink: 0;
  }

  .popular-post-content h5 {
      font-size: 14px;
      font-weight: 600;
      color: #1a1a1a;
      margin-bottom: 8px;
      line-height: 1.4;
  }

  .popular-post-meta {
      font-size: 12px;
      color: #888;
  }

  .popular-post-meta i {
      margin-right: 5px;
  }

  /* Tag Cloud */
  .tag-cloud {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
  }

  .tag-item {
      background: #f5f5f5;
      color: #666;
      padding: 8px 16px;
      border-radius: 20px;
      font-size: 13px;
      font-weight: 500;
      text-decoration: none;
      transition: all 0.3s ease;
  }

  .tag-item:hover {
      background: #FF6B35;
      color: #fff;
      transform: translateY(-2px);
  }

  /* Newsletter Widget */
  .newsletter-form .form-control {
      border: 1px solid rgba(0, 0, 0, 0.023);
      background: rgba(0, 0, 0, 0.053);
      color: #111;
      border-radius: 8px;
      padding: 12px 18px;
  }

  .newsletter-form .form-control::placeholder {
      color: rgba(0, 0, 0, 0.5);
  }

  .newsletter-form .form-control:focus {
      border-color: #fff;
      background: rgba(0, 0, 0, 0.2);
      box-shadow: none;
      outline: none;
  }

  .newsletter-form .btn-primary-blog {
      background: var(--orange-primary);
      color: white;
      justify-content: center;
  }

  .newsletter-form .btn-primary-blog:hover {
      background: var(--orange-dark);
  }

/* =====================================================
   Shop
   ===================================================== */
  .btn-link{
    border: none; background: none; cursor: pointer; color: var(--accent-color); text-decoration: none;
  }

  .btn-link:hover{
    color: var(--accent-color); 
  }

  .quantity-wrapper .form-control{
    background: none !important;
  }

  #productTab .nav-item.show .nav-link, #productTab .nav-link.active{
    background: #FFF3E9 !important;
  }

  .g-product-shop{
    display: flex;
    justify-content: space-around;
  }

  .product-shop-list{
    padding: 0;
    width: 130px;
    height: 85px;
    margin: 5px;
    overflow: hidden;
    border-radius: 6px;
  }

  .product-shop-list img{
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .border-shop{
    border-color: var(--orange-dark) !important; 
  }

  body.dark .btn-secondary.dark{
    color: white;
    border-color: white;
  }

  .btn-secondary.dark{
    color: var(--dark-brown);
    border-color: var(--dark-brown);
  }

  :root {
      --swiper-theme-color: var(--orange-primary);
      --swiper-pagination-color: var(--orange-primary);
      --swiper-navigation-color: var(--orange-primary);
  }

  .swiper-pagination-bullet-active {
      background: var(--orange-primary) !important;
  }

  .project-slider .swiper-pagination-bullet-active {
      background: var(--orange-primary);
  }

  .project-slider-gallery{
    max-height: 500px;
  }

  .project-slider-gallery img{
    max-height: 500px;
    height: 100%;
  }

/* =====================================================
   THEME TOGGLE
   ===================================================== */
.theme-toggle {
    position: fixed;
    left: 15px;
    bottom: 15px;
    cursor: pointer;
    display: flex;
    align-items: center;
}

.nav-theme-toggle.theme-toggle {
    position: static;
    left: auto;
    bottom: auto;
    z-index: 2;
}

.toggle-track {
    position: relative;
    width: 52px;
    height: 28px;
    background: rgba(0, 0, 0, 0.15);
    border-color: rgba(8, 134, 119, 0.25);
    backdrop-filter: blur(10px);
    border-radius: 50px;
    display: flex;
    align-items: center;
    padding: 0 5px;
    justify-content: space-between;
    transition: background 0.4s ease, border-color 0.4s ease;
}

.toggle-thumb {
    position: absolute;
    left: 3px;
    width: 20px;
    height: 20px;
    background: var(--orange-primary, #088677);
    border-radius: 50%;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1),
                background 0.4s ease;
    z-index: 2;
}

.toggle-icon {
    font-size: 12px;
    line-height: 1;
    z-index: 1;
    transition: opacity 0.3s ease;
}

.toggle-icon--sun  { color: #088677; opacity: 1; position: relative; left: 2px; }
.toggle-icon--moon { color: #fff; opacity: 0.5; position: relative; right: 2px; }

/* Checked state */
#dark-toggle:checked ~ .toggle-track {
    background: rgba(8, 134, 119, 0.25);
    border-color: rgba(8, 134, 119, 0.35);
}

#dark-toggle:checked ~ .toggle-track .toggle-thumb {
    transform: translateX(24px);
    background: var(--orange-primary, #088677);
}

#dark-toggle:checked ~ .toggle-track .toggle-icon--sun  { opacity: 0.5; }

/* =====================================================
   BRANCHING HAPTICS ABOUT PAGE
   ===================================================== */
.about-project-header .header-bg-image {
    background-position: center;
}

.about-project-header .header-overlay {
    background: linear-gradient(90deg, rgba(0, 0, 0, 0.72), rgba(0, 0, 0, 0.26));
}

.about-project-intro,
.about-training-flow,
.committee-section,
.behind-scenes-section {
    padding: 110px 0;
}

.about-project-intro {
    background: var(--cream);
}

.about-project-images .about-img-main img,
.about-project-images .about-img-overlay img {
    object-fit: cover;
}

.experience-badge--logo {
    width: 142px;
    height: 142px;
    padding: 22px;
    background: rgba(255, 255, 255, 0.96);
    border-radius: 18px;
}

.experience-badge--logo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

.about-project-copy h1,
.about-production-copy h2,
.about-cta h2 {
    font-family: 'Anton SC', sans-serif;
    font-weight: 400;
    letter-spacing: 0;
    color: var(--dark-brown);
}

.about-project-copy h1 {
    font-size: clamp(2.35rem, 4vw, 4.25rem);
    line-height: 1.04;
    margin: 20px 0 24px;
}

.about-project-copy p,
.about-production-copy p,
.about-flow-grid p,
.production-day p,
.about-cta p {
    color: var(--text-light);
    font-size: 1.02rem;
    line-height: 1.8;
}

.about-training-flow {
    background: #fff;
}

.about-flow-grid,
.committee-grid,
.behind-scenes-grid {
    display: grid;
    gap: 24px;
}

.about-flow-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.about-flow-grid article,
.committee-grid article,
.production-day {
    background: rgba(255, 255, 255, 0.86);
    border: 1px solid rgba(8, 134, 119, 0.14);
    border-radius: 8px;
    padding: 26px;
    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.06);
}

.about-flow-grid i {
    width: 48px;
    height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(8, 134, 119, 0.1);
    color: var(--orange-primary);
    border-radius: 50%;
    font-size: 1.35rem;
    margin-bottom: 18px;
}

.about-flow-grid h3,
.production-day h3,
.committee-grid h3 {
    color: var(--dark-brown);
    font-size: 1.18rem;
    font-weight: 800;
    margin-bottom: 10px;
}

.about-production {
    padding: 110px 0;
    background: linear-gradient(135deg, rgba(8, 134, 119, 0.08), rgba(142, 225, 212, 0.16));
}

.production-days {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 22px;
}

.production-day span,
.committee-grid span,
.about-cta span {
    display: inline-block;
    color: var(--orange-primary);
    font-weight: 800;
    text-transform: uppercase;
    font-size: 0.78rem;
    letter-spacing: 0.08em;
    margin-bottom: 14px;
}

.committee-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.committee-grid article {
    text-align: center;
}

.behind-scenes-section {
    background: var(--cream);
}

.behind-scenes-grid {
    grid-template-columns: 1.05fr 1.05fr 0.9fr;
    align-items: stretch;
}

.behind-scenes-grid figure {
    margin: 0;
    border-radius: 8px;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.08);
}

.behind-scenes-grid img {
    width: 100%;
    height: 340px;
    object-fit: cover;
    display: block;
}

.behind-scenes-grid figcaption {
    padding: 16px 18px;
    color: var(--dark-brown);
    font-weight: 800;
}

.about-cta-section {
    padding: 100px 0;
    background: #fff;
}

.about-cta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 32px;
    padding: 44px;
    border-radius: 8px;
    background: linear-gradient(135deg, rgba(8, 134, 119, 0.12), rgba(142, 225, 212, 0.24));
    border: 1px solid rgba(8, 134, 119, 0.18);
}

.about-cta h2 {
    font-size: clamp(2rem, 3vw, 3.25rem);
    margin-bottom: 14px;
}

.about-cta p {
    max-width: 760px;
    margin: 0;
}

.about-cta-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: flex-end;
    flex-shrink: 0;
}

body.dark .about-project-intro,
body.dark .about-training-flow,
body.dark .behind-scenes-section,
body.dark .about-cta-section {
    background: var(--bg-base);
}

body.dark .about-production {
    background: linear-gradient(135deg, rgba(8, 134, 119, 0.14), rgba(18, 179, 159, 0.08));
}

body.dark .about-project-copy h1,
body.dark .about-production-copy h2,
body.dark .about-cta h2,
body.dark .about-flow-grid h3,
body.dark .production-day h3,
body.dark .committee-grid h3,
body.dark .behind-scenes-grid figcaption {
    color: var(--text-primary);
}

body.dark .about-project-copy p,
body.dark .about-production-copy p,
body.dark .about-flow-grid p,
body.dark .production-day p,
body.dark .about-cta p {
    color: var(--text-secondary);
}

body.dark .about-flow-grid article,
body.dark .committee-grid article,
body.dark .production-day,
body.dark .behind-scenes-grid figure {
    background: var(--bg-elevated);
    border-color: var(--border-orange);
    box-shadow: 0 16px 40px var(--shadow-dark);
}

body.dark .about-cta {
    background: linear-gradient(135deg, rgba(8, 134, 119, 0.16), rgba(18, 179, 159, 0.08));
    border-color: var(--border-orange);
}

body.dark .experience-badge--logo {
    background: rgba(255, 255, 255, 0.94);
}

@media (max-width: 991px) {
    .about-flow-grid,
    .committee-grid,
    .behind-scenes-grid,
    .production-days {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .about-cta {
        flex-direction: column;
        align-items: flex-start;
    }

    .about-cta-actions {
        justify-content: flex-start;
    }
}

@media (max-width: 576px) {
    .about-project-intro,
    .about-training-flow,
    .about-production,
    .committee-section,
    .behind-scenes-section,
    .about-cta-section {
        padding: 72px 0;
    }

    .about-flow-grid,
    .committee-grid,
    .behind-scenes-grid,
    .production-days {
        grid-template-columns: 1fr;
    }

    .behind-scenes-grid img {
        height: 260px;
    }

    .about-cta {
        padding: 28px;
    }
}
#dark-toggle:checked ~ .toggle-track .toggle-icon--moon { color: #088677; opacity: 1; }