@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');
   @import url('https://fonts.googleapis.com/css2?family=Titillium+Web&display=swap');
   @import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400..900;1,400..900&display=swap');

   :root {
       --primary-accent: #2a9646;
       --secondar-accent: #e8e5e183;
       --primary-dark: #0a0a0a;
       --primary-white: #ffffff;
       --secondary-dark: #5e5959;
       --text-primary: #ffffff;
       --text-secondary: #b8b8b8;
       --border-color: rgba(215, 186, 153, 0.1);
       --overlay-gradient: linear-gradient(135deg, rgba(0, 0, 0, 0.077), rgba(0, 0, 0, 0.186));
       --transition-smooth: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
       --transition-fade: opacity 0.5s ease-in-out;
   }

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

   html,
   body {
       background: var(--primary-white);
       color: var(--primary-dark);
       overflow-x: hidden;
       font-family: "Montserrat", sans-serif;

   }

   body {
       background-attachment: fixed;
   }

   h1,
   h2,
   h3,
   h4,
   h5,
   h6 {
       font-family: "Titillium Web", sans-serif;

   }

   a {
       text-decoration: none;
   }

   img {
       cursor: pointer;
   }




   /* ===== NAVBAR ===== */
   /* NAVBAR BASE */
   .logo {
       width: 50px;
   }

   .navbar-premium {
       position: fixed;
       width: 100%;
       top: 0;
       left: 0;
       padding: 20px 40px;
       z-index: 2000;
   }

   .navbar-premium.scrolled {
       background: rgba(0, 0, 0, 0.422);
       backdrop-filter: blur(10px);
   }

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

   .brand-logo {
       font-size: 1.6rem;
       font-weight: 700;
       color: #fff;
   }

   /* DESKTOP NAV LINKS */
   .nav-links {
       display: flex;
       justify-content: center;
       align-items: center;
       gap: 10px;
       background-color: rgba(255, 255, 255, 0.271);
       padding: 10px;
       border-radius: 40px;
   }

   .nav-links a {
       color: #fff;
       font-size: 1rem;
       text-decoration: none;
       font-weight: 500;
       transition: 0.3s;
       padding: 12px 20px;

   }

   .nav-links :hover,
   .nav-links .active {
       color: white;
       background: var(--primary-accent);
       border-radius: 50px;
   }


   /* HAMBURGER BUTTON */
   .nav-toggle {
       display: none;
       flex-direction: column;
       gap: 5px;
       cursor: pointer;
   }

   .nav-toggle span {
       width: 26px;
       height: 3px;
       background: #fff;
       transition: 0.3s;
       border-radius: 5px;
   }

   /* MOBILE STYLES */
   @media (max-width: 991px) {
       .nav-links {
           position: fixed;
           top: 0;
           right: -100%;
           height: 100vh;
           width: 70%;
           background: rgba(10, 10, 10, 0.95);
           backdrop-filter: blur(10px);
           display: flex;
           flex-direction: column;
           padding: 120px 40px;
           gap: 30px;
           transition: 0.4s ease-in-out;
       }


       .nav-links.active {
           right: 0;
       }

       .nav-toggle {
           display: flex;
       }

       /* Hamburger Animation */
       .nav-toggle.active span:nth-child(1) {
           transform: translateY(8px) rotate(45deg);
       }

       .nav-toggle.active span:nth-child(2) {
           opacity: 0;
       }

       .nav-toggle.active span:nth-child(3) {
           transform: translateY(-8px) rotate(-45deg);
       }
   }

   /* ===== HERO SECTION ===== */
   .hero-section {
       position: relative;
       height: 100vh;
       display: flex;
       align-items: center;
       padding: 80px 40px 40px;
       overflow: hidden;
       margin-top: 0;
   }

   .hero-background {
       position: absolute;
       top: 0;
       left: 0;
       right: 0;
       bottom: 0;
       background-size: cover;
       background-position: center;
       background-repeat: no-repeat;
       z-index: 0;
       transition: background-image 0.8s ease-in-out;
       opacity: 1;
       filter: brightness(0.5) saturate(1.1);
   }

   .hero-background::after {
       content: '';
       position: absolute;
       inset: 0;
       background: var(--overlay-gradient);
   }

   .hero-content {
       width: 100%;
       max-width: 1400px;
       margin: 0 auto;
   }

   .hero-text h1 {
       font-size: clamp(2.5rem, 8vw, 4rem);
       line-height: 1.1;
       margin-bottom: 1.5rem;
       letter-spacing: -2px;
       text-shadow: 0 2px 20px rgba(0, 0, 0, 0.5);
       color: var(--primary-white);
   }

   .hero-text .subtitle {
       font-size: 0.95rem;
       color: var(--primary-accent);
       text-transform: uppercase;
       letter-spacing: 2px;
       margin-bottom: 1rem;
       font-weight: 600;
   }

   #heroBg {
       transition: background-image 1s ease-in-out;
       /* Smooth transition for background change */
   }

   .hero-text {
       opacity: 0;
       transition: opacity 2s ease-in-out;
       /* Smooth fade-in transition for title and subtitle */
   }

   .hero-text.visible {
       opacity: 1;
       /* Make content visible with smooth transition */
   }


   .color-text {
       color: var(--primary-accent)
   }

   .hero-text p {
       font-size: 1rem;
       color: var(--text-secondary);
       line-height: 1.7;
       margin-bottom: 2rem;
   }

   .hero-cta {
       display: flex;
       gap: 1rem;
       flex-wrap: wrap;
   }

   .btn-premium {
       padding: 0.9rem 2.2rem;
       border: 2px solid var(--text-primary);
       background: transparent;
       color: var(--text-primary);
       border-radius: 50px;
       font-weight: 600;
       font-size: 0.9rem;
       cursor: pointer;
       transition: var(--transition-smooth);
       text-transform: uppercase;
       letter-spacing: 1px;
   }

   .btn-premium:hover {
       background: var(--text-primary);
       color: var(--primary-dark);
       transform: translateY(-3px);
       box-shadow: 0 10px 30px rgba(215, 186, 153, 0.25);
   }

   .btn-premium.filled {
       background: var(--primary-accent);
       border-color: var(--primary-accent);
       color: var(--primary-dark);
   }

   .btn-premium.filled:hover {
       background: transparent;
       color: var(--text-primary);
   }

   .hero-nav {
       position: absolute;
       bottom: 40px;
       left: 90%;
       transform: translateX(-50%);
       display: flex;
       align-items: center;
       gap: 15px;
       z-index: 10;
   }

   .hero-nav button {
       background: var(--primary-accent);
       color: #fff;
       border: none;
       font-size: 24px;
       width: 40px;
       height: 40px;
       cursor: pointer;
       border-radius: 50%;
   }

   .hero-nav button:hover {
       background: #2a964798;
   }

   .dots {
       display: flex;
       gap: 8px;
   }

   .dot {
       width: 10px;
       height: 10px;
       background: rgba(255, 255, 255, 0.5);
       border-radius: 50%;
       cursor: pointer;
   }

   .dot.active {
       background: #fff;
   }


   /* ===== CAROUSEL CONTAINER ===== */
   .carousel-wrapper {
       position: relative;
       z-index: 5;
       height: 100%;
       display: flex;
       flex-direction: column;
       justify-content: center;
       align-items: center;
   }

   .carousel-track {
       display: flex;
       gap: 0.5rem;
       align-items: center;
       justify-content: center;
       perspective: 1000px;
       position: relative;
       height: auto;
   }

   /* ===== CARD STYLES ===== */
   .carousel-card {
       flex-shrink: 0;
       border-radius: 16px;
       overflow: hidden;
       position: relative;
       /* background: var(--secondary-dark); */
       border: 1px solid var(--border-color);
       cursor: pointer;
       /* transition: all .7s cubic-bezier(0.34, 1.56, 0.64, 1); */
       transition: all 0.5s ease;
       display: flex;
       flex-direction: column;
   }

   .carousel-card img {
       width: 100%;
       /* height: 100%; */
       object-fit: cover;
       display: block;
       border-radius: 30px;
   }

   .carousel-card.prev {
       width: 120px;
       height: 160px;
       opacity: 0.5;
       transform: translateX(25px) scale(0.78) rotateY(15deg);
       z-index: 1;
   }

   .carousel-card.active {
       width: 300px;
       height: 450px;
       opacity: 1;
       transform: translateX(0) scale(1) rotateY(0deg);
       z-index: 20;
       box-shadow: 0 30px 80px rgba(0, 0, 0, 0.8),
           0 0 40px rgba(215, 186, 153, 0.2);
       border: 2px solid var(--text-primary);
   }

   .carousel-card.active img {
       height: 80% !important;
   }

   .carousel-card.next {
       width: 120px;
       height: 160px;
       opacity: 0.5;
       transform: translateX(10px) scale(0.78) rotateY(-15deg);
       z-index: 1;
   }

   .carousel-card.active img {
       border-radius: 6px;
       transform: scale(1.05);
   }

   .card-label {
       position: absolute;
       bottom: 0;
       left: 0;
       right: 0;
       padding: 1.5rem;
       background: linear-gradient(180deg, rgba(0, 0, 0, 0.497) 0%, rgb(0, 0, 0) 100%);
       color: white;
       font-weight: 700;
       font-size: 1.1rem;
       backdrop-filter: blur(8px);
       z-index: 10;
       opacity: 0;
       transform: translateY(20px);
       transition: all 0.5s ease;
   }

   .carousel-card.active .card-label {
       opacity: 1;
       transform: translateY(0);
   }

   /* ===== CONTROLS ===== */
   .carousel-controls {
       display: flex;
       align-items: center;
       justify-content: center;
       gap: 2rem;
       margin-top: 3rem;
       position: relative;
       z-index: 10;
   }

   .control-btn {
       width: 56px;
       height: 56px;
       border: 2px solid var(--text-secondary);
       background: transparent;
       border-radius: 50%;
       color: var(--primary-accent);
       cursor: pointer;
       display: flex;
       align-items: center;
       justify-content: center;
       transition: var(--transition-smooth);
       font-size: 1.2rem;
   }

   .control-btn:hover {
       border-color: var(--text-primary);
       color: var(--text-primary);
       background: rgba(215, 186, 153, 0.05);
       transform: translateY(-4px);
       box-shadow: 0 8px 25px rgba(215, 186, 153, 0.15);
   }

   .carousel-indicator {
       display: flex;
       gap: 1rem;
       align-items: center;
   }

   .carousel-dot {
       width: 10px;
       height: 10px;
       border-radius: 50%;
       background: rgba(215, 186, 153, 0.2);
       cursor: pointer;
       transition: var(--transition-smooth);
   }

   .carousel-dot.active {
       background: var(--text-primary);
       width: 30px;
       border-radius: 5px;
   }

   .carousel-index {
       font-size: 1.3rem;
       font-weight: 700;
       color: var(--text-primary);
       min-width: 60px;
       text-align: center;
   }

   .progress-bar-custom {
       position: absolute;
       top: 0;
       left: 0;
       height: 3px;
       background: var(--text-primary);
       width: 0%;
       transition: width 0.8s ease;
       z-index: 8;
   }

   /* Interior Design Section Styles */
   .interior-design-section {
       padding: 80px 0;
       background: var(--secondar-accent);
       min-height: 100vh;
       display: flex;
       align-items: center;
   }

   /* Dot Pattern Decoration */
   .dot-pattern {
       position: absolute;
       top: 0;
       left: 40px;
       width: 180px;
       height: 200px;
       background-image: radial-gradient(circle, #2f5d62 2px, transparent 2px);
       background-size: 20px 20px;
       z-index: 1;
   }

   /* Image Gallery Container */
   .image-gallery {
       position: relative;
       height: 600px;
       margin-left: 80px;
       margin-top: 40px;
   }

   /* Main Large Image - Left */
   .image-main {
       position: absolute;
       top: 0;
       left: 0;
       width: 420px;
       height: 500px;
       z-index: 3;
       border-radius: 20px;
       overflow: hidden;
       box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
   }

   .image-main img {
       width: 100%;
       height: 100%;
       object-fit: cover;
   }

   /* Top Right Small Image */
   .image-top-right {
       position: absolute;
       top: 0;
       right: 17px;
       width: 210px;
       height: 210px;
       z-index: 4;
       border-radius: 20px;
       overflow: hidden;
       box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
   }

   .image-top-right img {
       width: 100%;
       height: 100%;
       object-fit: cover;
   }

   /* Bottom Overlapping Image */
   .image-bottom {
       position: absolute;
       bottom: 0;
       left: 50%;
       transform: translateX(-30%);
       width: 330px;
       height: 380px;
       z-index: 5;
       border-radius: 20px;
       overflow: hidden;
       box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
       background: #a8c5d1;
   }

   .image-bottom img {
       width: 100%;
       height: 100%;
       object-fit: cover;
   }

   /* Content Wrapper */
   .content-wrapper {
       padding: 40px 60px;
   }

   .section-heading {
       font-size: 50px;
       font-weight: 700;
       line-height: 1.2;
       margin-bottom: 28px;
       font-family: "Playfair Display", serif;
   }

   .section-description {
       font-size: 15px;
       line-height: 1.8;
       color: #636e72;
       margin-bottom: 32px;
       font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
   }

   .stats-section {
       margin-top: 32px;
   }

   .stat-card {
       background: rgba(255, 255, 255, 0.04);
       border: 1px solid rgba(255, 255, 255, 0.08);
       border-radius: 16px;
       text-align: center;
       transition: all 0.35s ease;
       backdrop-filter: blur(6px);
   }

   .stat-card:hover {
       transform: translateY(-6px);
       border-color: rgba(239, 203, 23, 0.5);
   }

   .stat-number {
       font-size: 30px !important;
       font-weight: 600;
       letter-spacing: -0.5px;
       margin-bottom: 6px;
       color: var(--white);
   }

   .stat-label {
       font-size: 14px;
       text-transform: uppercase;
       letter-spacing: 1.5px;
       color: var(--muted);
       margin: 0;
   }


   /* Explore Button */
   .btn-explore {
       background: #2d3436;
       color: #ffffff;
       border: none;
       padding: 16px 48px;
       font-size: 15px;
       font-weight: 600;
       border-radius: 50px;
       cursor: pointer;
       transition: all 0.3s ease;
       box-shadow: 0 4px 15px rgba(45, 52, 54, 0.2);
   }

   .btn-explore:hover {
       background: #1e272e;
       transform: translateY(-2px);
       box-shadow: 0 6px 20px rgba(45, 52, 54, 0.3);
   }

   /* Responsive Styles */
   @media (max-width: 991px) {
       .image-gallery {
           margin-left: 20px;
           height: 500px;
           margin-bottom: 60px;
       }

       .image-main {
           width: 320px;
           height: 400px;
       }

       .image-top-right {
           width: 150px;
           height: 140px;
       }

       .image-bottom {
           width: 260px;
           height: 300px;
       }

       .content-wrapper {
           padding: 20px 30px;
       }

       .section-heading {
           font-size: 32px;
       }

       .dot-pattern {
           left: 20px;
           width: 120px;
           height: 140px;
       }
   }

   @media (max-width: 576px) {
       .image-gallery {
           height: 400px;
           margin-left: 10px;
       }

       .image-main {
           width: 240px;
           height: 300px;
       }

       .image-top-right {
           width: 120px;
           height: 110px;
       }

       .image-bottom {
           width: 200px;
           height: 240px;
       }

       .section-heading {
           font-size: 26px;
       }

       .content-wrapper {
           padding: 20px;
       }

       .dot-pattern {
           width: 100px;
           height: 120px;
           background-size: 16px 16px;
       }
   }

   .cta-btn {
       background: var(--primary-accent);
       color: var(--text-primary);
       border: none;
       padding: 14px 26px;
       font-size: 16px;
       border-radius: 50px;
       cursor: pointer;
       transition: 0.3s;
   }

   .cta-btn:hover {
       background: var(--text-primary);
       color: var(--primary-accent);
   }

   /* About Section */
   .about-section {
       padding: 100px 0;
       background-color: var(--secondar-accent);
       position: relative;
   }

   /* Hero Section */
   .about-hero {
       margin-bottom: 100px;
   }

   .profile-wrapper {
       position: relative;
       display: flex;
       justify-content: center;
       align-items: center;
   }

   .profile-image-container {
       position: relative;
       width: 400px;
       height: 400px;
   }

   .profile-image {
       width: 100%;
       height: 100%;
       object-fit: cover;
       border-radius: 50%;
       border: 4px solid var(--primary-accent);
       box-shadow: 0 20px 60px rgba(42, 150, 70, 0.3);
       position: relative;
       z-index: 2;
   }

   .profile-ring {
       position: absolute;
       top: -20px;
       left: -20px;
       right: -20px;
       bottom: -20px;
       border: 2px solid var(--border-color);
       border-radius: 50%;
       animation: rotate 20s linear infinite;
   }

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

       to {
           transform: rotate(360deg);
       }
   }

   .badge-label {
       display: inline-block;
       padding: 8px 20px;
       background: var(--primary-accent);
       border: 1px solid var(--border-color);
       border-radius: 50px;
       color: white;
       font-size: 14px;
       font-weight: 600;
       text-transform: uppercase;
       letter-spacing: 1px;
       margin-bottom: 20px;
   }

   .hero-title {
       font-size: 48px;
       font-weight: 700;
       margin-bottom: 15px;
       line-height: 1.2;
   }

   .accent-text {
       color: var(--primary-accent);
   }

   .hero-tagline {
       font-size: 24px;
       color: var(--secondary-dark);
       font-style: italic;
       margin-bottom: 30px;
   }


   /* Content Grid */
   .content-grid {
       margin-bottom: 80px;
   }

   .content-card {
       background: var(--secondar-accent);
       border: 1px solid var(--border-color);
       border-radius: 20px;
       padding: 40px;
       height: 100%;
       transition: var(--transition-smooth);
       position: relative;
       overflow: hidden;
   }

   .content-card::before {
       content: "";
       position: absolute;
       top: 0;
       left: 0;
       right: 0;
       bottom: 0;
       background: var(--overlay-gradient);
       opacity: 0;
       transition: var(--transition-fade);
   }

   .content-card:hover {
       transform: translateY(-10px);
       border-color: var(--primary-accent);
   }

   .content-card:hover::before {
       opacity: 1;
   }

   .card-icon {
       width: 60px;
       height: 60px;
       background: var(--primary-accent);
       border-radius: 12px;
       display: flex;
       align-items: center;
       justify-content: center;
       margin-bottom: 24px;
       color: var(--primary-white);
       position: relative;
       z-index: 1;
   }

   .card-title {
       font-size: 24px;
       font-weight: 600;
       margin-bottom: 16px;
       color: var(--primary-accent);
       position: relative;
       z-index: 1;
   }

   .card-text {
       font-size: 16px;
       color: var(--primary-dark);
       line-height: 1.8;
       position: relative;
       z-index: 1;
   }

   /* Vision Section */
   .vision-section {
       margin-bottom: 100px;
   }

   .vision-card {
       background: linear-gradient(135deg, var(--primary-white), var(--secondar-accent));
       border: 1px solid var(--border-color);
       border-left: 4px solid var(--primary-accent);
       border-radius: 20px;
       padding: 60px;
       text-align: center;
   }

   .vision-title {
       font-size: 36px;
       font-weight: 700;
       margin-bottom: 24px;
       color: var(--primary-dark);
   }

   .vision-text {
       font-size: 18px;
       color: var(--secondary-dark);
       line-height: 1.8;
       max-width: 900px;
       margin: 0 auto;
   }

   /* Stats Section */
   .stats-grid {
       margin-bottom: 100px;
   }

   .stat-card::before {
       content: "";
       position: absolute;
       top: 0;
       left: 0;
       right: 0;
       height: 4px;
       background: var(--primary-accent);
       transform: scaleX(0);
       transition: transform 0.4s ease;
   }

   .stat-card:hover::before {
       transform: scaleX(1);
   }

   .stat-card:hover {
       transform: translateY(-5px);
       border-color: var(--primary-accent);
   }

   .stat-number {
       font-size: 48px;
       font-weight: 700;
       color: var(--primary-accent);
       margin-bottom: 10px;
   }

   .stat-label {
       font-size: 14px;
       color: var(--secondary-dark);
       text-transform: uppercase;
       letter-spacing: 1px;
   }

   /* Timeline Section */
   .timeline-section {
       margin-bottom: 50px;
   }

   .section-header {
       text-align: center;
       margin-bottom: 60px;
   }


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

   .timeline::before {
       content: "";
       position: absolute;
       left: 0;
       top: 0;
       bottom: 0;
       width: 2px;
       background: var(--border-color);
   }

   .timeline-item {
       position: relative;
       margin-bottom: 40px;
       padding-left: 30px;
   }

   .timeline-marker {
       position: absolute;
       left: -38px;
       top: 5px;
       width: 16px;
       height: 16px;
       background: var(--primary-accent);
       border: 3px solid var(--primary-dark);
       border-radius: 50%;
       box-shadow: 0 0 0 4px var(--secondary-dark);
   }

   .timeline-year {
       display: inline-block;
       font-size: 20px;
       font-weight: 700;
       color: var(--primary-accent);
       margin-bottom: 8px;
   }

   .timeline-text {
       font-size: 16px;
       color: var(--secondary-dark);
       line-height: 1.6;
       margin: 0;
   }

   .timeline-image {
       border-radius: 20px;
       overflow: hidden;
       border: 1px solid var(--border-color);
   }

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

   .timeline-image:hover img {
       transform: scale(1.05);
   }

   /* Responsive */
   @media (max-width: 991px) {
       .about-hero {
           margin-bottom: 60px;
       }

       .profile-image-container {
           width: 300px;
           height: 300px;
       }

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

       .hero-tagline {
           font-size: 20px;
       }

       .vision-card {
           padding: 40px 30px;
       }

       .vision-title {
           font-size: 28px;
       }

       .section-title {
           font-size: 32px;
       }

       .timeline-image {
           margin-top: 40px;
       }
   }

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

       .profile-image-container {
           width: 250px;
           height: 250px;
       }

       .hero-title {
           font-size: 28px;
       }

       .hero-tagline {
           font-size: 18px;
       }

       .content-card {
           padding: 30px;
       }

       .vision-card {
           padding: 30px 20px;
       }

       .stat-number {
           font-size: 36px;
       }

       .stat-label {
           font-size: 12px;
       }
   }

   .mission-section {
       padding: 80px 0;
       background: var(--primary-white);
   }

   .mission-grid {
       max-width: 1300px;
       margin: auto;
       display: grid;
       grid-template-columns: 1.2fr 1.4fr;
       gap: 50px;
       align-items: center;
   }

   .section-label {
       font-size: 1rem;
       font-weight: 700;
   }


   .mission-subtitle {
       color: var(--primary-accent);
   }


   .mission-text p {
       line-height: 1.7;
       margin-bottom: 15px;
   }

   .about-highlight {
       color: var(--primary-accent);
       font-weight: 700;
   }

   .mission-images {
       position: relative;
       display: grid;
       grid-template-columns: 1fr;
       gap: 25px;
   }

   .mission-img-large img {
       width: 100%;
       max-height: 400px;
       border-radius: 6px;
       object-fit: cover;
   }

   /* Vertical Text */
   .vertical-text {
       position: absolute;
       right: -60px;
       top: 30%;
       display: flex;
       flex-direction: column;
       text-align: center;
   }

   .vertical-text span {
       writing-mode: vertical-rl;
       text-orientation: upright;
       font-size: 22px;
       letter-spacing: 3px;
       font-weight: 700;
   }

   .vertical-text .details {
       color: var(--primary-accent);
       margin-top: 20px;
   }

   .vertical-text .welcome {
       color: var(--primary-accent);
   }

   /* Adding Projects Section Styles */
   /* ===== PROJECTS SECTION ===== */
   .projects-section {
       padding: 100px 40px;
       background: var(--primary-white);
       border-top: 1px solid var(--border-color);
   }

   .projects-header {
       max-width: 1400px;
       margin: 0 auto 4rem;
       text-align: center;
   }


   .project-category {
       max-width: 1400px;
       margin: 0 auto 5rem;
   }

   .project-category-title {
       font-size: 1.8rem;
       color: var(--primary-accent);
       text-transform: uppercase;
       letter-spacing: 2px;
       margin-bottom: 2rem;
   }

   .projects-subtext {
       max-width: 700px;
       margin: 10px auto;
       text-align: center;
       font-size: 1.05rem;
       line-height: 1.6;
   }

   .projects-grid {
       display: grid;
       grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
       gap: 1rem;
   }

   .project-card {
       border: 1px solid var(--border-color);
       border-radius: 12px;
       overflow: hidden;
       transition: var(--transition-smooth);
       cursor: pointer;
       box-shadow: 0px 0px 10px 1px rgba(0, 0, 0, 0.093);
   }

   .project-card:hover {
       transform: translateY(-8px);
       border-color: var(--primary-accent);
       box-shadow: 0 20px 50px rgba(215, 186, 153, 0.15);
   }

   .project-image {
       width: 100%;
       height: 280px;
       background: linear-gradient(135deg, rgba(215, 186, 153, 0.1), rgba(215, 186, 153, 0.05));
       display: flex;
       align-items: center;
       justify-content: center;
       font-size: 3rem;
   }

   .project-image img {
       width: 100%;
       height: 100%;
       object-fit: fill;
       object-position: top;
   }

   .project-info {
       padding: 1.5rem;
   }

   .project-title {
       font-size: 1.1rem;
       font-weight: 600;
       margin-bottom: 0.5rem;
       color: var(--primary-accent)
   }

   .project-description {
       font-size: 0.9rem;
       color: var(--primary-dark);
       line-height: 1.6;
   }

   /* team */

   .team-section {
       text-align: center;
       background-color: var(--secondar-accent);
   }



   .team-swiper {
       width: 100%;
       padding: 40px 80px;
   }


   .swiper-button-prev,
   .swiper-button-next {
       color: var(--primary-accent) !important;
   }

   .team-card {
       background: rgb(0, 0, 0);
       border-radius: 18px;
       padding: 50px 25px 60px;
       text-align: center;
       transition: 0.3s ease;
       transition: .5s all ease;
       position: relative;
   }

   .team-card:hover {
       transform: translateY(-6px);
       box-shadow: 0 0 10px 1px rgb(0, 0, 0);
       border: 1 px solid black;
       background: var(--primary-accent);
       color: var(--primary-dark);
       cursor: pointer;
       /* border-radius: 0; */
   }

   .team-card:hover .team-role,
   .team-card:hover .team-bio {
       color: var(--primary-dark);
   }

   .team-card:hover::after {
       /* border-radius: 0; */
       border-color: black;
   }

   .team-card:hover .team-avatar {
       border: 5px solid rgb(255, 255, 255);
   }

   .team-avatar {
       font-size: 40px;
       color: var(--primary-accent);
       margin-bottom: 15px;
       width: 150px;
       height: 150px;
       overflow: hidden;
       display: inline-block;
       border: 5px solid white;
       border-radius: 50%;
   }

   .team-avatar img {
       width: 100%;
       height: 100%;
       object-fit: cover;
       object-position: top;
   }

   .team-name {
       font-size: 18px;
       font-weight: bold;
   }

   .team-role {
       font-size: 14px;
       color: #e2e0e0;
       margin-bottom: 10px;
   }

   .team-bio {
       font-size: 14px;
       color: #a4a4a4;
       display: -webkit-box;
       -webkit-line-clamp: 2;
       -webkit-box-orient: vertical;
       overflow: hidden;
   }


   .team-card::after {
       content: "";
       width: 90%;
       height: 90%;
       position: absolute;
       top: 14px;
       left: 15px;
       z-index: 99;
       border: 1px solid white;
       border-radius: 18px;
       transition: .5s all ease;

   }

   /* Swiper arrows color fix */
   .swiper-button-prev,
   .swiper-button-next {
       color: #000;
   }

   /* Adding Contact Section Styles */
   /* ===== CONTACT SECTION ===== */
  .contact-section {
    padding: 100px 40px;
    background: var(--primary-white);
    border-top: 1px solid var(--border-color);
}

.contact-container {
    max-width: 1100px;
    margin: 0 auto;
}

.contact-header {
    text-align: center;
    margin-bottom: 3rem;
}

.contact-header p {
    font-size: 1.1rem;
    color: var(--text-secondary);
}

/* Grid */
.contact-info {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 2rem;
    margin-top: 3rem;
}

/* Card Base */
.contact-item {
    border-radius: 16px;
    padding: 2.2rem;
    position: relative;
    display: flex;
    align-items: center;
    flex-direction: column;
    overflow: hidden;
    transition: all 0.4s ease;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.06);
}

/* 🔹 Different light backgrounds */
.contact-item{
    background: #D0F0C0; /* soft blue */
}





/* Hover Effect */
.contact-item:hover {
    transform: translateY(-8px);
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.12);
}

/* Icon */
.contact-icon {
    width: 60px;
    height: 60px;
    background: var(--primary-accent);
    color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    text-align: center;
    justify-content: center;
    font-size: 1.6rem;
    margin-bottom: 1.2rem;
}

/* Label */
.contact-label {
    font-weight: 500;
    font-size: 1.3rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: black;
    font-style: italic;
    margin-bottom: 0.5rem;
}

/* Value */
.contact-value {
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--primary-accent);
}

.contact-value a {
    color: var(--primary-accent);
    text-decoration: none;
    display: inline-block;
    margin-bottom: 4px;
    transition: color 0.3s ease;
}

.contact-value a:hover {
    color: var(--primary-accent);
}

   /* Premium Footer */
   .footer-premium {
       background: #0f1115;
       color: #cfcfcf;
       padding: 80px 0 30px;
       font-family: 'Inter', sans-serif;
   }

   .footer-brand {
       font-size: 1.8rem;
       font-weight: 600;
       color: #ffffff;
       margin-bottom: 15px;
   }

   .footer-desc {
       font-size: 0.95rem;
       line-height: 1.7;
       max-width: 360px;
       color: #9a9a9a;
   }

   /* Titles */
   .footer-title {
       font-size: 0.85rem;
       letter-spacing: 1.5px;
       text-transform: uppercase;
       margin-bottom: 18px;
       color: #ffffff;
   }

   /* Links */
   .footer-links,
   .footer-contact {
       list-style: none;
       padding: 0;
   }

   .footer-links li,
   .footer-contact li {
       margin-bottom: 10px;
       font-size: 0.95rem;
   }

   .footer-links a,
   .footer-contact a {
       color: #9a9a9a;
       text-decoration: none;
       transition: color 0.3s;
   }

   .footer-links a:hover,
   .footer-contact a:hover {
       color: var(--primary-accent);
   }

   /* Social */
   .footer-social {
       margin-top: 20px;
   }

   .footer-social a {
       margin-right: 18px;
       font-size: 1.1rem;
       color: #9a9a9a;
       transition: color 0.3s;
   }

   .footer-social a:hover {
       color: #ffffff;
   }

   /* Newsletter */
   .footer-small {
       font-size: 0.9rem;
       color: #9a9a9a;
       margin-bottom: 12px;
   }

   .footer-form {
       display: flex;
       border-bottom: 1px solid #444;
   }

   .footer-form input {
       background: transparent;
       border: none;
       outline: none;
       padding: 10px 0;
       color: #fff;
       flex: 1;
       font-size: 0.95rem;
   }

   .footer-form button {
       background: none;
       border: none;
       color: #fff;
       font-size: 1.2rem;
       cursor: pointer;
       transition: transform 0.3s;
   }

   .footer-form button:hover {
       transform: translateX(5px);
   }

   /* Bottom */
   .footer-bottom {
       border-top: 1px solid #222;
       margin-top: 60px;
       padding-top: 20px;
       text-align: center;
   }

   .footer-bottom p {
       font-size: 0.85rem;
       color: #777;
   }

   /* Responsive */
   @media (max-width: 768px) {
       .footer-premium {
           padding: 60px 20px 30px;
           text-align: center;
       }

       .footer-desc {
           margin: auto;
       }

       .footer-form {
           max-width: 260px;
           margin: auto;
       }
   }



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

       to {
           opacity: 1;
           transform: translateY(0);
       }
   }

   .hero-text {
       animation: fadeInUp 0.8s ease-out 0.2s forwards;
       display: flex;
       flex-direction: column;
       justify-content: center;
       align-items: center;
   }

   .carousel-wrapper {
       animation: fadeInUp 0.8s ease-out 0.4s forwards;
   }

   /* From Uiverse.io by gharsh11032000 */
   .animated-button {
       position: relative;
       display: flex;
       align-items: center;
       gap: 4px;
       padding: 16px 36px;
       border: 4px solid;
       border-color: transparent;
       font-size: 16px;
       background-color: inherit;
       border-radius: 100px;
       font-weight: 600;
       color: var(--primary-dark);
       box-shadow: 0 0 0 2px var(--primary-accent);
       cursor: pointer;
       overflow: hidden;
       transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1);
   }

   .animated-button svg {
       position: absolute;
       width: 24px;
       fill: var(--primary-accent);
       z-index: 9;
       transition: all 0.8s cubic-bezier(0.23, 1, 0.32, 1);
   }

   .animated-button .arr-1 {
       right: 16px;
   }

   .animated-button .arr-2 {
       left: -25%;
   }

   .animated-button .circle {
       position: absolute;
       top: 50%;
       left: 50%;
       transform: translate(-50%, -50%);
       width: 20px;
       height: 20px;
       background-color: var(--primary-accent);
       border-radius: 50%;
       opacity: 0;
       transition: all 0.8s cubic-bezier(0.23, 1, 0.32, 1);
   }

   .animated-button .text {
       position: relative;
       z-index: 1;
       transform: translateX(-12px);
       transition: all 0.8s cubic-bezier(0.23, 1, 0.32, 1);
   }

   .animated-button:hover {
       box-shadow: 0 0 0 12px transparent;
       color: #212121;
       border-radius: 12px;
   }

   .animated-button:hover .arr-1 {
       right: -25%;
   }

   .animated-button:hover .arr-2 {
       left: 16px;
   }

   .animated-button:hover .text {
       transform: translateX(12px);
   }

   .animated-button:hover svg {
       fill: white;
   }

   .animated-button:active {
       scale: 0.95;
       box-shadow: 0 0 0 4px var(--primary-accent);
   }

   .animated-button:hover .circle {
       width: 220px;
       height: 220px;
       opacity: 1;
   }


   /* ============================================================
   EXTRA RESPONSIVE OPTIMIZATION (ADD AT BOTTOM OF CSS)
============================================================ */

   /* ----------- Large Tablets / Small Laptops ----------- */
   @media (max-width: 1200px) {
       .hero-content {
           grid-template-columns: 1fr;
           text-align: center;
       }

       .hero-text p {
           margin-left: auto;
           margin-right: auto;
       }

       .carousel-wrapper {
           margin-top: 20px;
       }

       .about-wrapper {
           grid-template-columns: 1fr;
           text-align: center;
       }

       .about-desc {
           margin: 0 auto 30px;
       }

       .mission-grid {
           grid-template-columns: 1fr;
           text-align: center;
       }

       .mission-images {
           margin-top: 30px;
       }
   }

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

       /* Hero text */
       .hero-text h1 {
           font-size: 2.4rem;
       }

       .hero-cta {
           justify-content: center;
       }

       /* Carousel scaling */
       .carousel-card.active {
           width: 250px;
           height: 310px;
       }

       .carousel-card.prev,
       .carousel-card.next {
           width: 90px;
           height: 120px;
       }

       /* About Section */
       .about-right {
           grid-template-columns: 1fr 1fr;
       }

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

       /* Team section */
       .team-swiper {
           padding: 20px 40px;
       }
   }

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

       .hero-section {
           padding: 120px 20px 50px;
           text-align: center;
           min-height: 90vh;
       }

       .hero-content {
           gap: 3rem;
       }

       .hero-text h1 {
           font-size: 2rem;
           line-height: 1.2;
       }

       .hero-text p {
           font-size: 0.95rem;
       }

       /* Carousel */
       .carousel-card.active {
           width: 200px;
           height: 260px;
       }

       .carousel-card.prev,
       .carousel-card.next {
           width: 70px;
           height: 100px;
           opacity: 0.3;
       }

       /* Hide controls on mobile for cleaner look */
       .carousel-controls {
           display: none;
       }

       /* About & Mission layout */
       .about-section,
       .mission-section {
           text-align: center;
       }

       .about-right {
           grid-template-columns: 1fr 1fr;
           gap: 12px;
       }

       .mission-img-large img {
           border-radius: 4px;
       }

       .vertical-text {
           display: none;
       }

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

       /* Contact */
       .contact-info {
           grid-template-columns: 1fr;
       }
   }

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

       .navbar-premium {
           padding: 20px 15px 2px 7px;
       }

       /* Hero */
       .hero-section {
           padding-top: 140px;
       }

       .hero-text h1 {
           font-size: 3.7rem;
       }

       .hero-text p {
           font-size: 0.85rem;
       }

       .btn-premium,
       .animated-button {
           padding: 12px 26px;
           font-size: 14px;
       }

       /* Carousel */
       .carousel-track {
           gap: 0.2rem;
       }

       .carousel-card.active {
           width: 160px;
           height: 220px;
       }

       .carousel-card.prev,
       .carousel-card.next {
           width: 60px;
           height: 85px;
       }

       .card-label {
           font-size: 0.9rem;
           padding: 1rem;
       }

       /* About Image Grid */
       .about-right {
           grid-template-columns: 1fr;
       }

       /* Team */
       .team-swiper {
           padding: 10px 20px;
       }

       /* Contact */
       .contact-item {
           padding: 1.5rem;
       }

       .nav-links {
           position: fixed;
           top: 0;
           right: 100%;
           height: 100vh;
           width: 100%;
           background: rgb(10 10 10 / 83%);
           backdrop-filter: blur(10px);
           display: flex;
           flex-direction: column;
           padding: 120px 40px;
           gap: 30px;
           transition: 0.4s ease-in-out;
       }
   }

   /* ----------- Ultra Small Devices (350px) ----------- */
   @media (max-width: 350px) {
       .hero-text h1 {
           font-size: 1.4rem;
       }

       .carousel-card.active {
           width: 140px;
           height: 180px;
       }

       .carousel-card.prev,
       .carousel-card.next {
           display: none;
       }
   }


   /* about.php */
   .about-text-block h3 {
       margin-bottom: 15px;
       color: var(--primary-accent);
   }

   .stats-section {
       display: flex;
       justify-content: space-between;
       margin-top: 70px;
       gap: 20px;
   }

   .stat-card {
       flex: 1;
       /* background: var(--primary-white); */
       border: 1px solid var(--primary-accent);
       padding: 30px;
       border-radius: 15px;
       text-align: center;
   }

   .stat-card h2 {
       font-size: 3rem;
       color: var(--primary-accent);
   }

   .timeline-section {
       margin-top: 80px;
   }

   .timeline-title {
       text-align: center;
       font-size: 2.4rem;
       margin-bottom: 40px;
   }

   .timeline {
       border-left: 2px solid var(--primary-accent);
       padding-left: 30px;
   }

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

   .timeline-item::before {
       content: "";
       width: 14px;
       height: 14px;
       background: var(--primary-accent);
       border-radius: 50%;
       position: absolute;
       left: -38px;
       top: 5px;
   }

   .timeline-year {
       font-size: 1.4rem;
       color: var(--primary-accent);
       font-weight: bold;
   }

   @media (max-width: 768px) {
       .about-layout {
           flex-direction: column;
           text-align: center;
       }

       .stats-section {
           flex-direction: column;
       }
   }


   /* Services Section */
   .services {
       background: var(--secondar-accent);
   }

   .color-text {
       color: var(--primary-accent);
   }

   /* Service Card - Premium Minimal Design */
   .service-card {
       background: var(--primary-white);
       border: 1px solid var(--primary-accent);
       border-radius: 0;
       padding: 48px 32px;
       height: 100%;
       transition: var(--transition-smooth);
       position: relative;
       overflow: hidden;
       box-shadow: 0px 0px 5px 1px #2a964758;
   }

   .service-card::before {
       content: "";
       position: absolute;
       top: 0;
       left: 0;
       width: 100%;
       height: 2px;
       background: var(--primary-accent);
       transform: scaleX(0);
       transform-origin: left;
       transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
   }

   .service-card:hover::before {
       transform: scaleX(1);
   }

   .service-card:hover {
       transform: translateY(-8px);
       box-shadow: 0 20px 40px rgba(0, 0, 0, 0.08);
   }

   /* Icon Wrapper */
   .service-icon-wrapper {
       width: 80px;
       height: 80px;
       margin: 0 auto 28px;
       display: flex;
       align-items: center;
       justify-content: center;
       position: relative;
   }

   .service-icon-wrapper::after {
       content: "";
       position: absolute;
       width: 100%;
       height: 100%;
       background: var(--secondar-accent);
       border-radius: 50%;
       z-index: 0;
       transition: var(--transition-smooth);
   }

   .service-card:hover .service-icon-wrapper::after {
       background: var(--primary-accent);
       opacity: 0.1;
       transform: scale(1.2);
   }

   .service-icon {
       width: 56px;
       height: 56px;
       object-fit: contain;
       position: relative;
       z-index: 1;
       filter: brightness(0) saturate(100%);
       transition: var(--transition-smooth);
   }

   .service-card:hover .service-icon {
       filter: brightness(0) saturate(100%) invert(42%) sepia(93%) saturate(353%) hue-rotate(93deg) brightness(93%) contrast(87%);
       transform: scale(1.1);
   }

   /* Card Title */
   .service-card h4 {
       font-size: 1.5rem;
       font-weight: 600;
       color: var(--primary-dark);
       margin-bottom: 16px;
       transition: var(--transition-fade);
   }

   .service-card:hover h4 {
       color: var(--primary-accent);
   }

   /* Card Description */
   .service-card p {
       font-size: 0.95rem;
       color: #666;
       line-height: 1.6;
       margin: 0;
       font-weight: 400;
   }

   /* Responsive Design */
   @media (max-width: 991px) {
       .section-heading {
           font-size: 2rem;
       }

       .service-card {
           padding: 40px 28px;
       }
   }

   @media (max-width: 767px) {
       .services {
           padding: 60px 0;
       }

       .section-heading {
           font-size: 1.75rem;
       }

       .service-card {
           padding: 36px 24px;
           margin-bottom: 20px;
       }

       .service-card h4 {
           font-size: 1.25rem;
       }

       .service-card p {
           font-size: 0.9rem;
       }
   }

   .breadcrumb-section {
       position: relative;
       padding: 200px 20px;
       background-size: cover;
       background-position: center;
   }

   .breadcrumb-overlay {
       position: absolute;
       inset: 0;
       background: rgba(0, 0, 0, 0.49);
   }

   .breadcrumb-content {
       position: relative;
       z-index: 2;
       text-align: center;
       color: #fff;
   }