*, *::before, *::after {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }

    :root {
      --background: hsl(216, 50%, 8%);
      --foreground: hsl(45, 30%, 95%);
      --card: hsl(216, 45%, 12%);
      --primary: #F5963A;
      --primary-foreground: hsl(216, 50%, 8%);
      --secondary: hsl(216, 40%, 15%);
      --muted: hsl(216, 35%, 18%);
      --muted-foreground: #fff;
      --accent: hsl(35, 80%, 60%);
      --border: hsl(216, 30%, 20%);
      --gold-light: hsl(38, 85%, 65%);
    }

    html {
      scroll-behavior: smooth;
    }

    body {
      font-family: 'Plus Jakarta Sans', sans-serif;
      background-color: var(--background);
      color: var(--foreground);
      line-height: 1.6;
      -webkit-font-smoothing: antialiased;
    }

    .container {
      max-width: 1200px;
      margin: 0 auto;
      padding: 0 24px;
    }

    a {
      text-decoration: none;
      color: inherit;
    }

    img {
      max-width: 100%;
      height: auto;
    }

    .gold-line {
      width: 64px;
      height: 2px;
      background: linear-gradient(to right, var(--primary), var(--accent));
    }

    .section-heading {
      font-size: 30px;
      font-weight: 500;
      color: var(--primary);
      letter-spacing: 0.02em;
    }

    .section-subheading {
      font-size: clamp(1.25rem, 3vw, 1.75rem);
      font-weight: 400;
      color: rgba(245, 242, 235, 0.9);
      font-style: italic;
    }

    .card-luxe {
      background: hsla(216, 45%, 12%, 0.5);
      backdrop-filter: blur(10px);
      border: 1px solid hsla(216, 30%, 20%, 0.5);
      border-radius: 12px;
      padding: 32px;
      box-shadow: 0 10px 40px hsla(216, 50%, 5%, 0.5);
    }

    /* Buttons */
    .btn-gold {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      padding: 14px 32px;
      font-family: 'Plus Jakarta Sans', sans-serif;
      font-size: 18px;
      font-weight: 600;
      color: var(--primary-foreground);
      background: #F5963A;
      border: none;
      border-radius: 8px;
      cursor: pointer;
      transition: all 0.3s ease;
      box-shadow: 0 0 40px hsla(35, 75%, 55%, 0.2);
      width: 50%;
    }

    .btn-gold:hover {
      transform: scale(1.05);
      box-shadow: 0 0 60px hsla(35, 75%, 55%, 0.3);
    }

    .btn-outline-gold {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      padding: 6px 26px;
      font-family: 'Plus Jakarta Sans', sans-serif;
      font-size: 18px;
      font-weight: 600;
      color: var(--primary);
      background: transparent;
      border: 2px solid var(--primary);
      border-radius: 8px;
      cursor: pointer;
      transition: all 0.3s ease;
    }

    .btn-outline-gold:hover {
      background: var(--primary);
      color: var(--primary-foreground);
    }

    /* Animations */
    @keyframes fadeUp {
      from {
        opacity: 0;
        transform: translateY(20px);
      }
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }

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

    @keyframes pulse {
      0%, 100% {
        opacity: 0.3;
      }
      50% {
        opacity: 0.8;
      }
    }

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

    .animate-fadeUp {
      animation: fadeUp 0.8s ease forwards;
    }

    .animate-float {
      animation: float 6s ease-in-out infinite;
    }

    .animate-pulse {
      animation: pulse 2s ease-in-out infinite;
    }

    .animate-bounce {
      animation: bounce 2s ease-in-out infinite;
    }

    /* Navigation */
    .navbar {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        z-index: 10000;
      }

    .navbar.scrolled {
      background: rgba(12, 18, 31, 0.95);
      backdrop-filter: blur(10px);
      border-bottom: 1px solid var(--border);
    }

    .navbar .container {
      display: flex;
      align-items: center;
      justify-content: space-between;
    }

    .logo {
      display: flex;
      align-items: center;
      gap: 12px;
    }

    .logo-icon {
      width: 32px;
      height: 32px;
    }

    .logo-text {
      font-size: 1.125rem;
      font-weight: 600;
      color: var(--primary);
    }

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

    .nav-links a {
      color: #fff;
      font-size: 18px;
      font-weight: 500;
      transition: color 0.3s ease;
      position: relative;
    }

    .nav-links a:hover {
      color: var(--primary);
    }

    .nav-links a::after {
      content: '';
      position: absolute;
      bottom: -4px;
      left: 0;
      width: 0;
      height: 2px;
      background: var(--primary);
      transition: width 0.3s ease;
    }

    .nav-links a:hover::after {
      width: 100%;
    }

    

    /* Mobile menu button always on top */
    .mobile-menu-btn {
        display: none;
        background: none;
        border: none;
        color: var(--foreground);
        cursor: pointer;
        padding: 8px;
        position: relative;
        z-index: 10001;
    }

      .mobile-menu-btn svg line {
        transition: all 0.3s ease;
        transform-origin: center;
      }

      .mobile-menu-btn.active svg line:nth-child(1) {
        transform: rotate(45deg) translate(2px, -8px);
      }
      .mobile-menu-btn.active svg line:nth-child(2) {
        opacity: 0;
      }
      .mobile-menu-btn.active svg line:nth-child(3) {
          transform: rotate(-45deg) translate(10px, -5px);
      }

      /* Mobile Menu Open State */
      /* Fullscreen overlay - covers everything */
      .nav-links.mobile-open {
        display: flex;
        flex-direction: column;
        position: fixed;
        top: 0;
        left: 0;
        width: 100vw;
        height: 100vh;
        height: 100dvh; /* dynamic viewport height for mobile browsers */
        background: hsl(216 50% 8%); /* solid color, no transparency */
        justify-content: center;
        align-items: center;
        gap: 32px;
        z-index: 9999;
        animation: fadeIn 0.3s ease;
      }

      .nav-links.mobile-open li {
        opacity: 0;
        animation: slideUp 0.4s ease forwards;
      }

      .nav-links.mobile-open li:nth-child(1) { animation-delay: 0.1s; }
      .nav-links.mobile-open li:nth-child(2) { animation-delay: 0.15s; }
      .nav-links.mobile-open li:nth-child(3) { animation-delay: 0.2s; }
      .nav-links.mobile-open li:nth-child(4) { animation-delay: 0.25s; }
      .nav-links.mobile-open li:nth-child(5) { animation-delay: 0.3s; }

      .nav-links.mobile-open a {
        font-size: 1.5rem;
        font-weight: 500;
        color: hsl(45 30% 95%);
      }

      .nav-links.mobile-open a:hover {
        color: hsl(35 75% 55%);
      }

      /* Body scroll lock when menu is open */
      body.menu-open {
        overflow: hidden;
      }

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

      @keyframes slideUp {
        from {
          opacity: 0;
          transform: translateY(20px);
        }
        to {
          opacity: 1;
          transform: translateY(0);
        }
      }

      @media (max-width: 768px) {
        .mobile-menu-btn {
          display: block;
        }
        
        .nav-links {
          display: none;
        }
      }






    /* Hero Section */
    .hero {
      min-height: 100vh;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      position: relative;
      overflow: hidden;
      text-align: center;
    }

    .hero-bg {
      position: absolute;
      inset: 0;
      background-image: url('/images/Image-2.webp');
      background-size: cover;
      background-position: center;
      background-repeat: no-repeat;
    }

    .hero-bg::after {
      content: '';
      position: absolute;
      inset: 0;
      background: linear-gradient(to bottom, 
        rgba(12, 18, 31, 0.7) 0%, 
        rgba(12, 18, 31, 0.5) 50%, 
        rgba(12, 18, 31, 1) 100%
      );
    }

    .hero .container {
      position: relative;
      z-index: 1;
    }

    .hero-content {
      max-width: 800px;
      margin: 0 auto;
      padding-top: 20%;
    }

    .hero-gold-line {
      width: 96px;
      height: 2px;
      background: linear-gradient(to right, var(--primary), var(--accent));
      margin: 0 auto 32px;
      opacity: 0;
      animation: fadeUp 0.8s ease forwards;
    }

    .hero-title {
      font-size: clamp(3rem, 10vw, 6rem);
      font-weight: 500;
      color: var(--primary);
      line-height: 1.1;
      margin-bottom: 24px;
      opacity: 0;
      animation: fadeUp 0.8s ease 0.2s forwards;
    }

    .hero-subtitle {
        font-size: 32px;
        font-weight: 400;
        color: rgba(245, 242, 235, 0.9);
        letter-spacing: 0px;
        text-transform: capitalize;
        margin-bottom: 32px;
        opacity: 0;
        animation: fadeUp 0.8s ease 0.4s forwards;
    }

    .hero-description {
      font-size: 20px;
      color: #fff;
      max-width: 600px;
      margin: 0 auto 48px;
      opacity: 0;
      animation: fadeUp 0.8s ease 0.5s forwards;
    }

    .hero-buttons {
      display: flex;
      gap: 16px;
      flex-wrap: wrap;
      justify-content: center;
      opacity: 0;
      animation: fadeUp 0.8s ease 0.6s forwards;
    }

    .scroll-indicator {
      position: absolute;
      bottom: 0px;
      left: 50%;
      transform: translateX(-50%);
      color: var(--primary);
      opacity: 0.7;
      animation: bounce 2s ease-in-out infinite;
    }

    .scroll-indicator:hover {
      opacity: 1;
    }

    /* Decorative dots */
    .hero-dot {
      position: absolute;
      border-radius: 50%;
      background: var(--primary);
      animation: pulse 2s ease-in-out infinite;
    }

    .hero-dot-1 {
      top: 80px;
      left: 40px;
      width: 8px;
      height: 8px;
      opacity: 0.3;
    }

    .hero-dot-2 {
      top: 160px;
      right: 80px;
      width: 4px;
      height: 4px;
      opacity: 0.5;
      animation-delay: 0.2s;
    }

    .hero-dot-3 {
      bottom: 160px;
      left: 80px;
      width: 6px;
      height: 6px;
      opacity: 0.4;
      animation-delay: 0.4s;
    }

    /* Story Section */
    .story {
      padding: 150px 0;
      position: relative;
      overflow: hidden;
    }

    .story-bg-pattern {
      position: absolute;
      inset: 0;
      opacity: 0.05;
      overflow: hidden;
    }

    .story-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 64px;
      align-items: self-start;
    }

    .story-content .gold-line {
      margin-bottom: 10px;
    }

    .story-text {
      font-size: 1.125rem;
      color: #fff;
      line-height: 1.8;
      margin-bottom: 24px;
      padding-top: 15px;
    }

    .stats {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 32px;
      margin-top: 48px;
    }

    .stat {
      text-align: center;
    }

    .stat-number {
      font-size: 2.5rem;
      font-weight: 500;
      color: var(--primary);
    }

    .stat-label {
      font-size: 0.75rem;
      color: var(--muted-foreground);
      text-transform: uppercase;
      letter-spacing: 0.1em;
      margin-top: 4px;
    }

    .story-visual {
      position: relative;
      display: flex;
      justify-content: center;
      align-items: center;
    }

    .story-star {
      width: 100%;
      max-width: 400px;
      animation: float 6s ease-in-out infinite;
    }

    .story-star-glow {
      position: absolute;
      inset: 0;
      filter: blur(60px);
      opacity: 0.2;
      display: flex;
      justify-content: center;
      align-items: center;
    }

    .story-star-glow-inner {
      width: 200px;
      height: 200px;
      background: radial-gradient(circle, var(--primary) 0%, transparent 70%);
      border-radius: 50%;
    }

    /* Vision Mission Section */
    .vision-mission {
      padding: 50px 0;
      background: hsla(216, 40%, 15%, 0.3);
      position: relative;
      overflow: hidden;
    }

    .vm-bg-decoration {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 600px;
      height: 600px;
      opacity: 0.05;
    }

    .vm-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 48px;
    }

    .vm-card {
      background: hsla(216, 45%, 12%, 0.5);
      backdrop-filter: blur(10px);
      border: 1px solid hsla(216, 30%, 20%, 0.5);
      border-radius: 12px;
      padding: 40px;
      box-shadow: 0 10px 40px hsla(216, 50%, 5%, 0.5);
    }

    .vm-header {
      display: flex;
      align-items: center;
      gap: 16px;
      margin-bottom: 24px;
    }

    .vm-icon {
      width: 56px;
      height: 56px;
      background: hsla(35, 75%, 55%, 0.1);
      border-radius: 12px;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .vm-icon svg {
      width: 28px;
      height: 28px;
      color: var(--primary);
      stroke: var(--primary);
    }

    .vm-title {
      font-size: 1.75rem;
      font-weight: 500;
      color: var(--primary);
    }

    .vm-text {
      font-size: 1.125rem;
      color: #fff;
      line-height: 1.8;
    }

    /* Core Values Section */
    .core-values {
      padding: 50px 0;
      position: relative;
      overflow: hidden;
    }

    .core-values-bg {
      position: absolute;
      left: -100px;
      top: 50%;
      transform: translateY(-50%);
      width: 400px;
      height: 400px;
      opacity: 0.1;
    }

    .core-values-bg-1 {
      position: absolute;
      right: -100px;
      top: 50%;
      transform: translateY(-50%);
      width: 400px;
      height: 400px;
      opacity: 0.1;
    }

    .core-values-header {
      max-width: 100%;
      margin-bottom: 64px;
    }

    .core-values-header .gold-line {
      margin-top: 16px;
      margin-bottom: 32px;
    }

    .core-values-intro {
      font-size: 16px;
      color: #fff;
      line-height: 1.8;
      max-width: 100%;
    }

    .values-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 24px;
    }

    .value-card {
      padding: 24px;
      border-radius: 12px;
      background: hsla(216, 45%, 12%, 0.3);
      border: 1px solid hsla(216, 30%, 20%, 0.3);
      transition: all 0.3s ease;
    }

    .value-card:hover {
      border-color: hsla(35, 75%, 55%, 0.4);
      background: hsla(216, 45%, 12%, 0.5);
    }

    .value-card-inner {
      display: flex;
      align-items: center;
      gap: 16px;
    }

    .value-icon {
      width: 48px;
      height: 48px;
      background: hsla(35, 75%, 55%, 0.1);
      border-radius: 8px;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      transition: background 0.3s ease;
    }

    .value-card:hover .value-icon {
      background: hsla(35, 75%, 55%, 0.2);
    }

    .value-icon svg {
      width: 24px;
      height: 24px;
      stroke: var(--primary);
    }

    .value-title {
      font-size: 22px;
      font-weight: 500;
      color: var(--primary);
      margin-bottom: 8px;
    }

    .value-description {
      font-size: 16px;
      color: #fff;
      line-height: 1.6;
    }

    /* Services Section */
    .services {
        padding: 130px 0;
        background: var(--background);
        position: relative;
        overflow: hidden;
    }

    .services-header {
      text-align: center;
      max-width: 700px;
      margin: 0 auto 64px;
    }

    .services-header .gold-line {
      margin: 0 auto 24px;
    }

    .services-description {
      font-size: 1.125rem;
      color: #fff;
    }

    .services-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 48px;
    }

    .service-item {
      display: flex;
      flex-direction: column;
    }

    .service-title-box {
      display: inline-block;
      margin-bottom: 24px;
    }

    .service-title-box h3 {
      font-size: 1.125rem;
      font-weight: 500;
      color: var(--primary);
      border: 2px solid var(--primary);
      padding: 10px 20px;
      border-radius: 4px;
      display: inline-block;
      transition: all 0.3s ease;
    }

    .service-item:hover .service-title-box h3 {
      background: var(--primary);
      color: var(--primary-foreground);
    }

    .service-intro {
      color: #fff;
      margin-bottom: 24px;
      line-height: 1.7;
    }

    .service-list {
      list-style: none;
    }

    .service-list li {
      display: flex;
      align-items: flex-start;
      gap: 12px;
      margin-bottom: 12px;
      color: #fff;
    }

    .service-list li::before {
      content: '';
      width: 8px;
      height: 8px;
      background: var(--primary);
      border-radius: 50%;
      margin-top: 8px;
      flex-shrink: 0;
    }


    /* Projects Section */
.projects {
  padding: 130px 0;
  background: hsla(216, 40%, 15%, 0.3);
}

.projects-header {
  text-align: center;
  max-width: 700px;
  margin: 0 auto 64px;
}

.projects-header .gold-line {
  margin: 0 auto 24px;
}

.projects-description {
  font-size: 1.125rem;
  color: rgba(245, 242, 235, 0.7);
}

.projects-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
}

@media (max-width: 1024px) {
  .projects-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 640px) {
  .projects-grid {
    grid-template-columns: 1fr;
  }
}

.project-card {
  cursor: pointer;
  transition: transform 0.3s ease;
}

.project-card:hover {
  transform: translateY(-8px);
}

.project-image {
  position: relative;
  aspect-ratio: 4/3;
  border-radius: 12px;
  overflow: hidden;
  margin-bottom: 16px;
}

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

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

.project-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(12, 18, 31, 0.9), rgba(12, 18, 31, 0.2), transparent);
  opacity: 0;
  transition: opacity 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.project-card:hover .project-overlay {
  opacity: 1;
}

.project-zoom {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: hsla(35, 75%, 55%, 0.9);
  display: flex;
  align-items: center;
  justify-content: center;
}

.project-zoom svg {
  width: 24px;
  height: 24px;
  stroke: hsl(216, 50%, 8%);
}

.project-badge {
  position: absolute;
  top: 16px;
  left: 16px;
  padding: 4px 12px;
  font-size: 0.75rem;
  font-weight: 500;
  background: hsla(35, 75%, 55%, 0.9);
  color: hsl(216, 50%, 8%);
  border-radius: 9999px;
}

.project-title {
  font-size: 1.25rem;
  font-weight: 500;
  color: hsl(45, 30%, 95%);
  margin-bottom: 8px;
  transition: color 0.3s ease;
}

.project-card:hover .project-title {
  color: hsl(35, 75%, 55%);
}

.project-description {
  font-size: 0.875rem;
  color: hsl(216, 20%, 60%);
}






/* Image Gallery Modal */
.gallery-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: none;
  align-items: center;
  justify-content: center;
  background: hsla(216, 50%, 8%, 0.95);
  backdrop-filter: blur(10px);
}

.gallery-modal.active {
  display: flex;
}

.gallery-close {
  position: absolute;
  top: 24px;
  right: 24px;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: hsla(216, 40%, 15%, 0.8);
  border: none;
  color: hsl(45, 30%, 95%);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
  z-index: 10;
}

.gallery-close svg {
  width: 24px;
  height: 24px;
}

.gallery-close:hover {
  background: hsl(35, 75%, 55%);
  color: hsl(216, 50%, 8%);
}

.gallery-title {
  position: absolute;
  top: 24px;
  left: 24px;
  font-size: 1.25rem;
  font-weight: 500;
  color: hsl(45, 30%, 95%);
}

.gallery-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: hsla(216, 40%, 15%, 0.8);
  border: none;
  color: hsl(45, 30%, 95%);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
}

.gallery-nav svg {
  width: 24px;
  height: 24px;
}

.gallery-nav:hover {
  background: hsl(35, 75%, 55%);
  color: hsl(216, 50%, 8%);
}

.gallery-prev {
  left: 16px;
}

.gallery-next {
  right: 16px;
}

@media (min-width: 768px) {
  .gallery-prev {
    left: 32px;
  }
  .gallery-next {
    right: 32px;
  }
}

.gallery-image-container {
  max-width: 80vw;
  max-height: 80vh;
  margin: 0 16px;
}

.gallery-image-container img {
  max-width: 100%;
  max-height: 80vh;
  object-fit: contain;
  border-radius: 12px;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
}

.gallery-counter {
  position: absolute;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 0.875rem;
  color: hsla(45, 30%, 95%, 0.7);
}

.gallery-thumbnails {
  position: absolute;
  bottom: 64px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 8px;
}

.gallery-thumbnail {
  width: 64px;
  height: 48px;
  border-radius: 4px;
  overflow: hidden;
  border: 2px solid transparent;
  opacity: 0.5;
  cursor: pointer;
  transition: all 0.3s ease;
  padding: 0;
  background: none;
}

.gallery-thumbnail.active {
  border-color: hsl(35, 75%, 55%);
  opacity: 1;
}

.gallery-thumbnail:hover {
  opacity: 0.8;
}

.gallery-thumbnail img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}


    

    /* Contact Section */
    .contact {
      padding: 100px 0px 150px 0px;
      background: hsla(216, 40%, 15%, 0.3);
    }

    .contact-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 64px;
    }

    .contact-info .gold-line {
      margin-bottom: 24px;
    }

    .contact-info p {
      font-size: 1.125rem;
      color: #fff;
      margin-bottom: 48px;
    }

    .contact-items {
      display: flex;
      flex-direction: column;
      gap: 32px;
    }

    .contact-item {
      display: flex;
      align-items: flex-start;
      gap: 16px;
    }

    .contact-item-icon {
      width: 48px;
      height: 48px;
      background: hsla(35, 75%, 55%, 0.1);
      border-radius: 8px;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
    }

    .contact-item-icon svg {
      width: 20px;
      height: 20px;
      stroke: var(--primary);
    }

    .contact-item-label {
      font-size: 0.75rem;
      color: var(--muted-foreground);
      text-transform: uppercase;
      letter-spacing: 0.1em;
      margin-bottom: 4px;
    }

    .contact-item-value {
      color: var(--foreground);
      font-weight: 500;
    }

    .contact-form {
      background: hsla(216, 45%, 12%, 0.5);
      backdrop-filter: blur(10px);
      border: 1px solid hsla(216, 30%, 20%, 0.5);
      border-radius: 12px;
      padding: 32px;
    }

    .form-row {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 24px;
      margin-bottom: 24px;
    }

    .form-group {
      margin-bottom: 24px;
    }

    .form-group:last-of-type {
      margin-bottom: 24px;
    }

    .form-label {
      display: block;
      font-size: 0.875rem;
      color: var(--muted-foreground);
      margin-bottom: 8px;
    }

    .form-input,
    .form-textarea {
      width: 100%;
      padding: 12px 16px;
      font-family: 'Plus Jakarta Sans', sans-serif;
      font-size: 1rem;
      color: var(--foreground);
      background: hsla(216, 50%, 8%, 0.5);
      border: 1px solid var(--border);
      border-radius: 8px;
      transition: border-color 0.3s ease;
    }

    .form-input:focus,
    .form-textarea:focus {
      outline: none;
      border-color: var(--primary);
    }

    .form-input::placeholder,
    .form-textarea::placeholder {
      color: var(--muted-foreground);
    }

    .form-textarea {
      resize: none;
      min-height: 120px;
    }

    /* Footer */
    .footer {
      padding: 15px 0;
      border-top: 1px solid hsla(216, 30%, 20%, 0.3);
    }

    .footer .container {
      display: flex;
      align-items: center;
      justify-content: space-between;
      flex-wrap: wrap;
      gap: 32px;
    }

    .footer-logo {
      display: flex;
      align-items: center;
      gap: 12px;
    }

    .footer-logo-icon {
      width: 32px;
      height: 32px;
    }

    .footer-logo-text {
      font-size: 1.125rem;
      font-weight: 600;
      color: var(--primary);
    }

    .social-links {
      display: flex;
      gap: 16px;
    }

    .social-link {
      width: 40px;
      height: 40px;
      border-radius: 50%;
      background: hsla(216, 40%, 15%, 0.5);
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(--muted-foreground);
      transition: all 0.3s ease;
    }

    .social-link:hover {
      background: hsla(35, 75%, 55%, 0.2);
      color: var(--primary);
    }

    .social-link svg {
      width: 16px;
      height: 16px;
    }

    .footer-copyright {
      font-size: 0.875rem;
      color: var(--muted-foreground);
    }

    /* Mobile Responsive */
    @media (max-width: 1024px) {
      .values-grid {
        grid-template-columns: repeat(2, 1fr);
      }

      .services-grid {
        grid-template-columns: repeat(2, 1fr);
      }

      .projects-grid {
        grid-template-columns: repeat(2, 1fr);
      }
    }

    @media (max-width: 768px) {
      .nav-links {
        display: none;
      }

      .mobile-menu-btn {
        display: block;
      }

      .hero-title {
        font-size: 3rem;
      }

      .story-grid {
        grid-template-columns: 1fr;
        gap: 48px;
      }

      .story-visual {
        order: -1;
      }

      .story-star {
        max-width: 250px;
      }

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

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

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

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

      .contact-grid {
        grid-template-columns: 1fr;
        gap: 48px;
      }

      .form-row {
        grid-template-columns: 1fr;
      }

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

      .gallery-thumbnails {
        display: none;
      }
    }

p {
  font-size: 16px !important;
}  

a.logo {
    width: 30%;
}
.header_container {
  max-width: 95% !important;
}
a.btn-outline-gold.get_quote:hover {
    background-color: inherit !important;
}
.nav-links a.get_quote::after {
  background: inherit !important;
}

/* Brands Section */
.brands-section {
  padding: 80px 0;
  background: hsla(216, 40%, 15%, 0.2);
  overflow: hidden;
}

.brands-header {
  text-align: center;
  margin-bottom: 48px;
}

.brands-header .gold-line {
  margin: 0 auto 24px;
}

.brands-description {
  font-size: 1.125rem;
  color: rgba(245, 242, 235, 0.7);
  margin-top: 16px;
}

.logo-slider-container {
  position: relative;
  width: 100%;
  overflow: hidden;
  mask-image: linear-gradient(to right, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 10%, rgba(0,0,0,1) 90%, rgba(0,0,0,0) 100%);
  -webkit-mask-image: linear-gradient(to right, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 10%, rgba(0,0,0,1) 90%, rgba(0,0,0,0) 100%);
}

.logo-slider {
  display: flex;
  animation: scroll-logos 25s linear infinite;
  width: fit-content;
}

.logo-slider:hover {
  animation-play-state: paused;
}

.logo-slide {
  display: flex;
  align-items: center;
  gap: 60px;
  padding: 0 30px;
}

.logo-item {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 150px;
  height: 80px;
  padding: 16px 24px;
  background: hsla(216, 45%, 12%, 0.5);
  border: 1px solid hsla(216, 30%, 20%, 0.3);
  border-radius: 12px;
  opacity: 0.6;
  transition: all 0.3s ease;
  border-color: hsl(35, 75%, 55%);
}

.logo-item:hover {
  opacity: 1;
  border-color: hsl(35, 75%, 55%);
  box-shadow: 0 0 30px hsla(35, 75%, 55%, 0.15);
}

.logo-item img {
    max-height: 100px;
    max-width: 130px;
    object-fit: contain;
    /* filter: brightness(0) invert(1); */
    /* opacity: 0.8; */
    transition: opacity 0.3s ease;
    border-color: hsl(35, 75%, 55%);
    box-shadow: 0 0 30px hsla(35, 75%, 55%, 0.15);
}

.logo-item:hover img {
  opacity: 1;
}

@keyframes scroll-logos {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}

/* Responsive */
@media (max-width: 1024px) {
  .logo-slide {
    gap: 40px;
  }

  .logo-item {
    min-width: 120px;
    height: 60px;
    padding: 12px 16px;
  }

  .logo-item img {
    max-height: 30px;
    max-width: 100px;
  }
}

@media (max-width: 480px) {
  .brands-section {
    padding: 60px 0;
  }

  .logo-slide {
    gap: 30px;
  }

  .logo-item {
    min-width: 100px;
    height: 50px;
    padding: 10px 12px;
  }

  .logo-item img {
    max-height: 25px;
    max-width: 80px;
  }
  a.logo {
      width: 80% !important;
  }
  .btn-gold {
    width: 80% !important;
  }
  section#vision-mission , section#story {
      padding-bottom: 10px !important;
  }
  .vm-card {
      padding: 25px 15px  !important;
  }
  .section-heading {
      font-size: 24px !important;
  }
  .contact-form {
      padding: 32px 12px !important;
  }
}