* {
   margin: 0;
   padding: 0;
   box-sizing: border-box;
   font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
 }

 body {
   background-color: #fefcf5;
   color: #1f2937;
   overflow-x: hidden;
 }

 :root {
   --primary: #f6bd01;
   --primary-light: #f7cd4d;
   --support: #e9872d;
   --gradient: linear-gradient(135deg, var(--primary), var(--support));
   --dark-bg: #1e1b1b;
 }

 /* ========== STYLISH HOVER EFFECTS (restored & enhanced) ========== */
 .hover-lift {
   transition: transform 0.4s cubic-bezier(0.2, 0, 0, 1), box-shadow 0.4s;
 }

 .hover-lift:hover {
   transform: translateY(-12px) scale(1.02);
   box-shadow: 0 30px 50px -15px #f6bd01;
 }

 .hover-glow {
   transition: filter 0.3s, box-shadow 0.3s;
 }

 .hover-glow:hover {
   filter: brightness(1.08);
   box-shadow: 0 0 30px rgba(246, 189, 1, 0.6);
 }

 .hover-border {
   transition: border-color 0.2s, transform 0.2s;
 }

 .hover-border:hover {
   border-color: var(--support) !important;
   transform: scale(1.02);
 }

 /* custom scrollbar */
 ::-webkit-scrollbar {
   width: 8px;
 }

 ::-webkit-scrollbar-track {
   background: #fff2d2;
 }

 ::-webkit-scrollbar-thumb {
   background: var(--support);
   border-radius: 20px;
 }

 /* glass header */
 header {
   position: sticky;
   top: 0;
   z-index: 999;
   background: rgba(255, 255, 255, 0.9);
   backdrop-filter: blur(16px) saturate(180%);
   box-shadow: 0 8px 25px rgba(246, 189, 1, 0.15);
   border-bottom: 1px solid rgba(246, 189, 1, 0.25);
   padding: 0.9rem 2rem;
 }

 .header-container {
   max-width: 1400px;
   margin: 0 auto;
   display: flex;
   align-items: center;
   justify-content: space-between;
   flex-wrap: wrap;
 }

 .logo a {
   font-size: 2.2rem;
   font-weight: 800;
   background: var(--gradient);
   -webkit-background-clip: text;
   background-clip: text;
   color: transparent;
   text-decoration: none;
   letter-spacing: -0.5px;
 }

 .nav-links {
   display: flex;
   gap: 2.2rem;
   flex-wrap: wrap;
 }

 .nav-links a {
   text-decoration: none;
   color: #2d2d2d;
   font-weight: 600;
   position: relative;
   transition: 0.2s;
 }

 .nav-links a::after {
   content: '';
   position: absolute;
   width: 0%;
   height: 3px;
   bottom: -6px;
   left: 0;
   background: var(--gradient);
   border-radius: 10px;
   transition: 0.3s;
 }

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

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

 .header-btn {
   background: var(--gradient);
   color: #1e1b1b;
   border: none;
   padding: 0.7rem 1.8rem;
   border-radius: 60px;
   font-weight: 700;
   font-size: 0.95rem;
   box-shadow: 0 12px 20px -8px #f6bd0170;
   cursor: pointer;
   transition: 0.25s;
 }

 .header-btn:hover {
   transform: scale(1.04);
   box-shadow: 0 20px 25px -5px #e9872d90;
 }

 .container {
   max-width: 1400px;
   margin: 0 auto;
   padding: 0 25px;
 }

 /* ========== BANNER CAROUSEL (with elegant arrows) ========== */
 .banner-section {
   margin: 30px 0 50px;
   position: relative;
 }

 .banner-carousel .slide {
   border-radius: 40px;
   height: 420px;
   background-size: cover;
   background-position: center;
   display: flex !important;
   align-items: center;
   padding: 0 80px;
   position: relative;
 }

 .slide::before {
   content: '';
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background: linear-gradient(90deg, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0.2) 80%);
   border-radius: 40px;
 }

 .slide-content {
   position: relative;
   max-width: 700px;
   color: white;
   z-index: 2;
 }

 .slide-content h2 {
   font-size: 4rem;
   font-weight: 800;
   line-height: 1.1;
   text-shadow: 0 4px 18px rgba(0, 0, 0, 0.4);
 }

 .slide-content p {
   font-size: 1.3rem;
   margin: 25px 0 30px;
   opacity: 0.95;
 }

 .slide-btn {
   background: var(--primary);
   border: none;
   padding: 1rem 2.5rem;
   border-radius: 60px;
   font-weight: 700;
   color: #1e1b1b;
   font-size: 1.1rem;
   box-shadow: 0 20px 30px -5px #f6bd0180;
   transition: 0.2s;
   cursor: pointer;
 }

 .slide-btn:hover {
   background: #fdcf4a;
   transform: translateY(-5px);
 }

 /* banner arrows - elegant */
 .banner-section .slick-prev,
 .banner-section .slick-next {
   display: flex !important;
   align-items: center;
   justify-content: center;
   width: 55px;
   height: 55px;
   background: rgba(255, 255, 255, 0.25);
   backdrop-filter: blur(8px);
   border-radius: 50%;
   z-index: 20;
   transition: all 0.3s;
   border: 2px solid rgba(255, 255, 255, 0.5);
 }

 .banner-section .slick-prev {
   left: 25px;
 }

 .banner-section .slick-next {
   right: 25px;
 }

 .banner-section .slick-prev:hover,
 .banner-section .slick-next:hover {
   background: var(--primary);
   border-color: var(--primary);
   transform: scale(1.15);
 }

 .banner-section .slick-prev:before,
 .banner-section .slick-next:before {
   color: white;
   font-size: 28px;
   opacity: 1;
   font-family: 'slick';
 }

 .banner-section .slick-prev:before {
   content: '←';
 }

 .banner-section .slick-next:before {
   content: '→';
 }

 .banner-section .slick-dots {
   bottom: 30px;
   z-index: 20;
 }

 .banner-section .slick-dots li button:before {
   font-size: 14px;
   color: white;
   opacity: 0.9;
 }

 .banner-section .slick-dots li.slick-active button:before {
   color: var(--primary);
 }

 /* section headers */
 .section-header {
   text-align: center;
   margin: 100px 0 50px;
 }

 .section-header h2 {
   font-size: 3rem;
   font-weight: 800;
   background: var(--gradient);
   -webkit-background-clip: text;
   background-clip: text;
   color: transparent;
   display: inline-block;
   margin-bottom: 15px;
 }

 .section-header p {
   color: #4b5563;
   font-size: 1.2rem;
   max-width: 700px;
   margin: 0 auto;
   line-height: 1.6;
 }

 /* ========== SERVICES CARDS (with hover effects) ========== */
 .card-grid {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
   gap: 35px;
   margin: 40px 0 60px;
 }

 .service-card {
   background: white;
   border-radius: 40px;
   padding: 0 0 2.5rem 0;
   box-shadow: 0 30px 45px -25px #f6bd0180;
   border: 1px solid #ffefc0;
   transition: all 0.4s cubic-bezier(0.2, 0, 0, 1);
   text-align: center;
   overflow: hidden;
 }

 .service-card:hover {
   transform: translateY(-15px) scale(1.02);
   box-shadow: 0 40px 65px -18px #e9872d;
   border-color: var(--primary);
 }

 .card-image {
   width: 100%;
   height: 220px;
   background-size: cover;
   background-position: center;
   transition: transform 0.6s;
 }

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

 .icon-bg {
   width: 85px;
   height: 85px;
   margin: -42px auto 20px;
   background: white;
   border-radius: 30px;
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 2.6rem;
   color: var(--support);
   border: 4px solid var(--primary);
   box-shadow: 0 15px 25px rgba(246, 189, 1, 0.3);
   position: relative;
   z-index: 3;
   transition: all 0.3s;
 }

 .service-card:hover .icon-bg {
   background: var(--primary);
   color: #1e1b1b;
   transform: rotate(5deg) scale(1.1);
 }

 .service-card h3 {
   font-size: 2.2rem;
   font-weight: 700;
   margin: 15px 0 15px;
 }

 .service-card p {
   color: #374151;
   line-height: 1.7;
   padding: 0 25px;
 }

 /* ========== ABOUT SECTION ========== */
 .about-section {
   background: #ffffff;
   border-radius: 70px;
   padding: 4.5rem 5rem;
   margin: 120px 0;
   box-shadow: 0 40px 60px -30px #f6bd0170;
   display: flex;
   flex-wrap: wrap;
   align-items: center;
   gap: 60px;
   border: 2px solid #fff1c7;
   transition: box-shadow 0.3s;
 }

 .about-section:hover {
   box-shadow: 0 50px 80px -30px #e9872d;
 }

 .about-text {
   flex: 1 1 400px;
 }

 .about-text h2 {
   font-size: 3rem;
   font-weight: 800;
   background: var(--gradient);
   -webkit-background-clip: text;
   background-clip: text;
   color: transparent;
   line-height: 1.2;
 }

 .about-text h3 {
   font-size: 2.2rem;
   color: #2b2b2b;
   margin: 25px 0 20px;
 }

 .about-text p {
   font-size: 1.2rem;
   color: #374151;
   margin: 20px 0 30px;
   line-height: 1.8;
 }

 .about-features {
   display: flex;
   flex-direction: column;
   gap: 20px;
 }

 .feature {
   display: flex;
   align-items: center;
   gap: 20px;
   background: #fff6e0;
   padding: 1.2rem 2rem;
   border-radius: 100px;
   transition: all 0.3s;
   font-size: 1.1rem;
 }

 .feature:hover {
   background: var(--primary);
   transform: translateX(15px);
   box-shadow: 0 15px 25px -10px #f6bd01;
 }

 .feature i {
   color: var(--support);
   font-size: 2rem;
   width: 40px;
   transition: 0.3s;
 }

 .feature:hover i {
   color: #1e1b1b;
 }

 .incredible-badge {
   background: var(--gradient);
   border-radius: 80px;
   padding: 2.8rem 2.5rem;
   flex: 1 1 300px;
   box-shadow: 0 40px 50px -15px #e9872d;
   text-align: center;
   color: #1e1b1b;
   animation: floatBadge 4s infinite alternate;
   transition: all 0.3s;
 }

 .incredible-badge:hover {
   transform: scale(1.05) translateY(-10px);
   box-shadow: 0 55px 70px -15px #f6bd01;
 }

 /* ========== ABOUT FEATURES RESPONSIVE FIX ========== */

 /* Fix for about features on mobile */
 @media (max-width: 768px) {
   .about-features {
     width: 100%;
   }

   .feature {
     flex-direction: column;
     text-align: center;
     padding: 1.5rem 1rem;
     gap: 10px;
     border-radius: 30px;
     word-break: break-word;
     white-space: normal;
   }

   .feature i {
     font-size: 1.8rem;
     width: auto;
     margin-bottom: 5px;
   }

   .feature strong {
     display: block;
     margin-bottom: 5px;
   }

   /* Ensure text wraps properly */
   .feature br {
     display: none;
   }
 }

 /* Extra small devices */
 @media (max-width: 480px) {
   .feature {
     padding: 1.2rem 0.8rem;
     font-size: 0.95rem;
     border-radius: 20px;
   }

   .feature i {
     font-size: 1.5rem;
   }
 }

 @keyframes floatBadge {
   0% {
     transform: translateY(0);
   }

   100% {
     transform: translateY(-20px);
   }
 }

 .incredible-badge i {
   font-size: 4.5rem;
   color: #1e1b1b;
 }

 .incredible-badge h3 {
   font-size: 2.5rem;
   font-weight: 800;
   margin: 20px 0;
 }

 /* ========== WHY CHOOSE GRID ========== */
 .why-grid {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 30px;
   margin: 50px 0 80px;
 }

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

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

 .why-card {
   background: #fffbf0;
   border-radius: 50px;
   padding: 3rem 2rem;
   text-align: center;
   border-bottom: 6px solid var(--primary);
   transition: all 0.4s cubic-bezier(0.2, 0, 0, 1);
 }

 .why-card:hover {
   transform: translateY(-15px) scale(1.02);
   box-shadow: 0 35px 50px -15px #f6bd01;
   border-bottom-width: 10px;
 }

 .why-card i {
   font-size: 3.2rem;
   color: var(--support);
   margin-bottom: 25px;
   transition: 0.3s;
 }

 .why-card:hover i {
   color: var(--primary);
   transform: scale(1.2);
 }

 .why-card h3 {
   font-size: 2rem;
   margin-bottom: 15px;
 }

 /* ========== WORK CAROUSEL (single set of arrows) ========== */
 .work-carousel-wrapper {
   margin: 40px 0 100px;
   position: relative;
 }

 .work-carousel .work-slide {
   border-radius: 40px;
   height: 480px;
   background-size: cover;
   background-position: center;
   display: flex !important;
   align-items: flex-end;
   padding: 40px;
   margin: 0 15px;
   position: relative;
   transition: 0.4s;
 }

 .work-slide::before {
   content: '';
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background: linear-gradient(0deg, rgba(0, 0, 0, 0.7) 0%, transparent 50%);
   border-radius: 40px;
   transition: 0.4s;
 }

 .work-slide:hover {
   transform: scale(1.02);
   box-shadow: 0 30px 50px -15px #f6bd01;
 }

 .work-slide:hover::before {
   background: linear-gradient(0deg, rgba(246, 189, 1, 0.3) 0%, transparent 60%);
 }

 .work-caption {
   position: relative;
   z-index: 2;
   color: white;
   font-size: 2.2rem;
   font-weight: 700;
   text-shadow: 0 2px 10px black;
   transition: 0.3s;
 }

 .work-slide:hover .work-caption {
   transform: translateY(-10px);
   text-shadow: 0 0 20px var(--primary);
 }

 /* work carousel arrows - single set */
 .work-carousel-wrapper .slick-prev,
 .work-carousel-wrapper .slick-next {
   display: flex !important;
   align-items: center;
   justify-content: center;
   background: var(--primary);
   width: 55px;
   height: 55px;
   border-radius: 50%;
   z-index: 100;
   box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
   transition: all 0.3s;
 }

 .work-carousel-wrapper .slick-prev {
   left: -25px;
 }

 .work-carousel-wrapper .slick-next {
   right: -25px;
 }

 .work-carousel-wrapper .slick-prev:hover,
 .work-carousel-wrapper .slick-next:hover {
   background: var(--support);
   transform: scale(1.15);
   box-shadow: 0 12px 25px #f6bd01;
 }

 .work-carousel-wrapper .slick-prev:before,
 .work-carousel-wrapper .slick-next:before {
   color: #1e1b1b;
   font-size: 28px;
   opacity: 1;
   font-family: 'slick';
 }

 .work-carousel-wrapper .slick-prev:before {
   content: '←';
 }

 .work-carousel-wrapper .slick-next:before {
   content: '→';
 }

 .work-carousel-wrapper .slick-dots {
   bottom: -45px;
 }

 .work-carousel-wrapper .slick-dots li button:before {
   color: var(--support);
   font-size: 12px;
   transition: 0.3s;
 }

 .work-carousel-wrapper .slick-dots li:hover button:before {
   color: var(--primary);
   transform: scale(1.3);
 }

 /* ========== TESTIMONIAL CAROUSEL (NEW) ========== */
 .testimonial-carousel-wrapper {
   margin: 40px 0 100px;
   position: relative;
 }

 .testimonial-carousel .testi-slide {
   background: white;
   border-radius: 50px;
   padding: 2.5rem;
   box-shadow: 0 20px 35px -10px #f6bd0180;
   border: 1px solid #ffe6aa;
   margin: 0 15px;
   transition: all 0.4s;
 }

 .testi-slide:hover {
   transform: translateY(-10px) scale(1.02);
   box-shadow: 0 35px 55px -15px #e9872d;
   border-color: var(--primary);
 }

 .testi-img {
   width: 75px;
   height: 75px;
   border-radius: 50%;
   object-fit: cover;
   border: 4px solid var(--primary);
   margin-bottom: 20px;
   transition: 0.3s;
 }

 .testi-slide:hover .testi-img {
   transform: rotate(5deg) scale(1.1);
   border-color: var(--support);
 }

 .testi-slide i {
   color: var(--primary);
   font-size: 2.8rem;
   opacity: 0.3;
   margin-bottom: 15px;
   transition: 0.3s;
 }

 .testi-slide:hover i {
   opacity: 0.8;
   transform: scale(1.2);
 }

 .testi-slide p {
   font-size: 1.2rem;
   color: #1f2937;
   margin: 15px 0;
   line-height: 1.7;
 }

 .testi-user h4 {
   font-weight: 700;
   color: #262626;
   font-size: 1.2rem;
 }

 .testi-user span {
   color: var(--support);
   font-weight: 500;
 }

 /* testimonial carousel arrows */
 .testimonial-carousel-wrapper .slick-prev,
 .testimonial-carousel-wrapper .slick-next {
   display: flex !important;
   align-items: center;
   justify-content: center;
   background: var(--primary);
   width: 50px;
   height: 50px;
   border-radius: 50%;
   z-index: 100;
   box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
   transition: all 0.3s;
 }

 .testimonial-carousel-wrapper .slick-prev {
   left: -20px;
 }

 .testimonial-carousel-wrapper .slick-next {
   right: -20px;
 }

 .testimonial-carousel-wrapper .slick-prev:hover,
 .testimonial-carousel-wrapper .slick-next:hover {
   background: var(--support);
   transform: scale(1.15);
 }

 .testimonial-carousel-wrapper .slick-prev:before,
 .testimonial-carousel-wrapper .slick-next:before {
   color: #1e1b1b;
   font-size: 24px;
   opacity: 1;
   font-family: 'slick';
 }

 .testimonial-carousel-wrapper .slick-prev:before {
   content: '←';
 }

 .testimonial-carousel-wrapper .slick-next:before {
   content: '→';
 }

 .testimonial-carousel-wrapper .slick-dots {
   bottom: -40px;
 }

 .testimonial-carousel-wrapper .slick-dots li button:before {
   color: var(--support);
 }

 /* footer */
 footer {
   background: #1e1b1b;
   color: #fef6e8;
   border-radius: 70px 70px 0 0;
   padding: 80px 40px 40px;
   margin-top: 120px;
 }

 .footer-grid {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
   gap: 50px;
   max-width: 1300px;
   margin: 0 auto;
 }

 .footer-col .logo-footer {
   font-size: 2.5rem;
   font-weight: 800;
   background: var(--gradient);
   -webkit-background-clip: text;
   background-clip: text;
   color: transparent;
 }

 .social-links {
   display: flex;
   gap: 20px;
   margin: 25px 0;
 }

 .social-links a {
   color: #f6bd01;
   background: #3a2e1f;
   width: 48px;
   height: 48px;
   border-radius: 50%;
   display: flex;
   align-items: center;
   justify-content: center;
   transition: 0.3s;
   font-size: 1.3rem;
 }

 .social-links a:hover {
   background: var(--primary);
   color: #1e1b1b;
   transform: translateY(-7px) scale(1.1);
 }

 .footer-bottom {
   text-align: center;
   padding-top: 70px;
   color: #a68f62;
   font-size: 1rem;
 }

 /* responsive */
 @media (max-width: 700px) {
   .banner-carousel .slide {
     padding: 0 30px;
     height: 500px;
   }

   .slide-content h2 {
     font-size: 2.8rem;
   }

   .about-section {
     padding: 2.5rem;
   }

   .work-carousel .work-slide {
     height: 380px;
   }
 }

 /* ensure slick arrows use standard glyphs */
 .slick-prev:before,
 .slick-next:before {
   font-family: 'slick';
   -webkit-font-smoothing: antialiased;
 }
/* ========== DROPDOWN MENU STYLES ========== */
.dropdown-container {
    position: relative;
    display: inline-block;
}

.dropdown-toggle {
    display: flex;
    align-items: center;
    gap: 5px;
    cursor: pointer;
}

.dropdown-arrow {
    font-size: 0.8rem;
    transition: transform 0.3s ease;
}

.dropdown-container:hover .dropdown-arrow {
    transform: rotate(180deg);
}

.dropdown-menu {
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 250px;
    background: rgba(255, 255, 255, 0.98);
    backdrop-filter: blur(10px);
    border-radius: 24px;
    padding: 20px 0;
    box-shadow: 0 30px 50px -20px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(246, 189, 1, 0.15);
    opacity: 0;
    visibility: hidden;
    transform: translateY(15px);
    transition: all 0.4s cubic-bezier(0.2, 0, 0, 1);
    z-index: 1000;
    border: 1px solid rgba(246, 189, 1, 0.2);
}

.dropdown-container:hover .dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(8px);
}

/* Add a small arrow on top of dropdown */
.dropdown-menu::before {
    content: '';
    position: absolute;
    top: -10px;
    left: 35px;
    width: 20px;
    height: 20px;
    background: rgba(255, 255, 255, 0.98);
    transform: rotate(45deg);
    border-left: 1px solid rgba(246, 189, 1, 0.2);
    border-top: 1px solid rgba(246, 189, 1, 0.2);
    backdrop-filter: blur(10px);
    z-index: -1;
}

.dropdown-item {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 15px 30px;
    color: #2d2d2d;
    text-decoration: none;
    transition: all 0.3s;
    position: relative;
    overflow: hidden;
}

.dropdown-item::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 4px;
    background: var(--gradient);
    transform: scaleY(0);
    transition: transform 0.3s;
}

.dropdown-item:hover {
    background: rgba(246, 189, 1, 0.05);
    padding-left: 40px;
}

.dropdown-item:hover::before {
    transform: scaleY(1);
}

.dropdown-icon {
    font-size: 1.4rem;
    color: var(--support);
    transition: all 0.3s;
    width: 28px;
    text-align: center;
}

.dropdown-item:hover .dropdown-icon {
    color: var(--primary);
    transform: scale(1.15);
}

.dropdown-item span {
    font-weight: 600;
    font-size: 1.05rem;
    letter-spacing: 0.3px;
}

/* Active state for dropdown items */
.dropdown-item.active {
    background: rgba(246, 189, 1, 0.1);
    color: var(--support);
    font-weight: 700;
}

.dropdown-item.active .dropdown-icon {
    color: var(--primary);
}

/* ========== DESKTOP DROPDOWN ENHANCEMENTS ========== */
@media (min-width: 901px) {
    .dropdown-menu {
        padding: 25px 0 !important;
        min-width: 350px !important;
        border-radius: 28px !important;
        box-shadow: 0 40px 60px -20px rgba(0, 0, 0, 0.35), 0 0 0 1px rgba(246, 189, 1, 0.2) !important;
    }

    .dropdown-item {
        padding: 18px 35px !important;
        margin: 4px 12px !important;
        border-radius: 16px;
        white-space: nowrap;
        transition: all 0.3s ease;
        gap: 18px;
    }

    .dropdown-item i {
        margin-right: 18px;
        font-size: 1.5rem;
        width: 30px;
        text-align: center;
        color: var(--support);
        transition: all 0.3s ease;
    }

    .dropdown-item span {
        font-size: 1.15rem;
        font-weight: 700;
        color: #2d2d2d;
        letter-spacing: 0.4px;
    }

    /* Add hover effect with more spacing */
    .dropdown-item:hover {
        padding-left: 45px !important;
        background: linear-gradient(90deg, rgba(246, 189, 1, 0.12), rgba(233, 135, 45, 0.06));
        transform: translateX(8px);
    }

    .dropdown-item:hover i {
        color: var(--primary);
        transform: scale(1.2) rotate(5deg);
    }

    .dropdown-item:hover span {
        color: var(--support);
        font-weight: 700;
    }

    /* Better arrow positioning for desktop */
    .dropdown-menu::before {
        left: 55px !important;
        width: 24px;
        height: 24px;
        top: -12px;
        border-width: 0 0 1px 1px !important;
    }

    /* Subtle separator between items with more space */
    .dropdown-item:not(:last-child) {
        border-bottom: 1px solid rgba(246, 189, 1, 0.12);
        margin-bottom: 8px;
        padding-bottom: 18px;
    }
}

/* Larger desktop screens */
@media (min-width: 1200px) {
    .dropdown-menu {
        min-width: 380px !important;
        padding: 28px 0 !important;
    }

    .dropdown-item {
        padding: 20px 40px !important;
        margin: 5px 15px !important;
        gap: 20px;
    }

    .dropdown-item i {
        font-size: 1.6rem;
        width: 32px;
    }

    .dropdown-item span {
        font-size: 1.2rem;
    }
}

/* ========== MOBILE DROPDOWN STYLES ========== */
@media (max-width: 900px) {
    .dropdown-menu {
        position: static;
        opacity: 1;
        visibility: visible;
        transform: none;
        box-shadow: none;
        background: transparent;
        padding: 8px 0 8px 25px;
        min-width: 100%;
        display: none;
        border: none;
    }

    .dropdown-container.open .dropdown-menu {
        display: block;
    }

    .dropdown-menu::before {
        display: none;
    }

    .dropdown-item {
        padding: 14px 20px;
        border-radius: 12px;
        gap: 15px;
    }

    .dropdown-item:hover {
        padding-left: 30px;
        background: rgba(246, 189, 1, 0.08);
    }

    .dropdown-item::before {
        display: none;
    }

    .dropdown-item i {
        font-size: 1.3rem;
        width: 26px;
    }

    .dropdown-item span {
        font-size: 1.05rem;
        font-weight: 600;
    }

    /* Remove desktop enhancements on mobile */
    .dropdown-item:not(:last-child) {
        border-bottom: none;
        margin-bottom: 0;
        padding-bottom: 14px;
    }
}
 /* ========== ENHANCED FOOTER STYLES ========== */
 .enhanced-footer {
   position: relative;
   background: #1e1b1b;
   color: #fef6e8;
   margin-top: 120px;
   border-radius: 70px 70px 0 0;
   overflow: hidden;
 }

 /* Wave SVG decoration */
 .footer-wave {
   position: absolute;
   top: -1px;
   left: 0;
   width: 100%;
   line-height: 0;
   transform: rotate(180deg);
 }

 .footer-wave svg {
   display: block;
   width: 100%;
   height: 70px;
 }

 /* Main footer content */
 .footer-content {
   position: relative;
   z-index: 2;
   padding: 60px 40px 0;
 }

 .footer-container {
   max-width: 1400px;
   margin: 0 auto;
 }

 .footer-grid {
   display: grid;
   grid-template-columns: 2fr 1.5fr 1.5fr 2fr;
   gap: 40px;
   margin-bottom: 50px;
 }

 /* Company Info Column */
 .footer-logo {
   margin-bottom: 25px;
 }

 .logo-text {
   font-size: 2.5rem;
   font-weight: 800;
   background: linear-gradient(135deg, #f6bd01, #e9872d);
   -webkit-background-clip: text;
   background-clip: text;
   color: transparent;
 }

 .logo-dot {
   font-size: 2.5rem;
   font-weight: 800;
   color: #f6bd01;
   animation: pulse 2s infinite;
 }

 @keyframes pulse {

   0%,
   100% {
     opacity: 1;
   }

   50% {
     opacity: 0.5;
   }
 }

 .company-description {
   color: #a68f62;
   line-height: 1.8;
   margin-bottom: 30px;
   font-size: 1rem;
 }

 /* Social Links */
 .social-links-wrapper {
   margin-top: 20px;
 }

 .social-title {
   color: #f6bd01;
   font-size: 1rem;
   margin-bottom: 15px;
   font-weight: 600;
   letter-spacing: 1px;
   text-transform: uppercase;
 }

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

 .social-link {
   width: 45px;
   height: 45px;
   border-radius: 50%;
   display: flex;
   align-items: center;
   justify-content: center;
   color: #f6bd01;
   background: rgba(246, 189, 1, 0.1);
   border: 1px solid rgba(246, 189, 1, 0.2);
   transition: all 0.3s ease;
   position: relative;
   overflow: hidden;
 }

 .social-link::before {
   content: '';
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background: var(--gradient);
   opacity: 0;
   transition: opacity 0.3s;
   z-index: 1;
 }

 .social-link i {
   position: relative;
   z-index: 2;
   transition: all 0.3s;
 }

 .social-link:hover {
   transform: translateY(-5px);
   border-color: transparent;
 }

 .social-link:hover::before {
   opacity: 1;
 }

 .social-link:hover i {
   color: #1e1b1b;
   transform: scale(1.1);
 }

 /* Individual social colors on hover */
 .social-link.linkedin:hover {
   box-shadow: 0 10px 20px -5px #0077b5;
 }

 .social-link.twitter:hover {
   box-shadow: 0 10px 20px -5px #1da1f2;
 }

 .social-link.github:hover {
   box-shadow: 0 10px 20px -5px #6e5494;
 }

 .social-link.facebook:hover {
   box-shadow: 0 10px 20px -5px #4267B2;
 }

 .social-link.instagram:hover {
   box-shadow: 0 10px 20px -5px #e1306c;
 }

 /* Footer Titles */
 .footer-title {
   display: flex;
   align-items: center;
   justify-content: space-between;
   color: #f6bd01;
   font-size: 1.3rem;
   font-weight: 700;
   margin-bottom: 25px;
   padding-bottom: 12px;
   border-bottom: 2px solid rgba(246, 189, 1, 0.2);
   position: relative;
 }

 .footer-title::after {
   content: '';
   position: absolute;
   bottom: -2px;
   left: 0;
   width: 50px;
   height: 2px;
   background: var(--gradient);
   border-radius: 2px;
 }

 .footer-title i {
   font-size: 1.2rem;
   opacity: 0.7;
 }

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

 .footer-links li {
   margin-bottom: 15px;
 }

 .footer-link {
   display: flex;
   align-items: center;
   gap: 10px;
   color: #fef6e8;
   text-decoration: none;
   transition: all 0.3s;
   font-size: 1rem;
 }

 .footer-link i {
   font-size: 0.8rem;
   color: #f6bd01;
   transition: all 0.3s;
 }

 .footer-link span {
   transition: all 0.3s;
 }

 .footer-link:hover {
   transform: translateX(8px);
 }

 .footer-link:hover i {
   color: #e9872d;
   transform: scale(1.2);
 }

 .footer-link:hover span {
   color: #f6bd01;
 }

 /* Contact Info */
 .contact-info {
   list-style: none;
   padding: 0;
   margin-bottom: 30px;
 }

 .contact-item {
   display: flex;
   gap: 15px;
   margin-bottom: 20px;
   transition: all 0.3s;
 }

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

 .contact-icon {
   width: 45px;
   height: 45px;
   border-radius: 50%;
   background: rgba(246, 189, 1, 0.1);
   display: flex;
   align-items: center;
   justify-content: center;
   color: #f6bd01;
   font-size: 1.2rem;
   transition: all 0.3s;
 }

 .contact-item:hover .contact-icon {
   background: var(--gradient);
   color: #1e1b1b;
   transform: scale(1.1);
 }

 .contact-details {
   flex: 1;
   display: flex;
   flex-direction: column;
 }

 .contact-label {
   font-size: 0.85rem;
   color: #a68f62;
   margin-bottom: 4px;
   text-transform: uppercase;
   letter-spacing: 0.5px;
 }

 .contact-text {
   color: #fef6e8;
   text-decoration: none;
   font-size: 1rem;
   line-height: 1.5;
   transition: color 0.3s;
 }

 a.contact-text:hover {
   color: #f6bd01;
 }

 /* Newsletter */
 .newsletter-wrapper {
   margin-top: 30px;
   padding-top: 20px;
   border-top: 1px solid rgba(246, 189, 1, 0.2);
 }

 .newsletter-title {
   color: #f6bd01;
   font-size: 1rem;
   margin-bottom: 15px;
   font-weight: 600;
   text-transform: uppercase;
   letter-spacing: 1px;
 }

 .newsletter-form {
   display: flex;
   gap: 10px;
 }

 .newsletter-form input {
   flex: 1;
   padding: 12px 15px;
   border: 2px solid rgba(246, 189, 1, 0.2);
   background: rgba(255, 255, 255, 0.05);
   border-radius: 50px;
   color: white;
   font-size: 0.95rem;
   transition: all 0.3s;
 }

 .newsletter-form input:focus {
   outline: none;
   border-color: #f6bd01;
   background: rgba(255, 255, 255, 0.1);
 }

 .newsletter-form input::placeholder {
   color: rgba(255, 255, 255, 0.4);
 }

 .newsletter-form button {
   width: 50px;
   height: 50px;
   border: none;
   border-radius: 50%;
   background: var(--gradient);
   color: #1e1b1b;
   font-size: 1.2rem;
   cursor: pointer;
   transition: all 0.3s;
   display: flex;
   align-items: center;
   justify-content: center;
 }

 .newsletter-form button:hover {
   transform: scale(1.1) rotate(15deg);
   box-shadow: 0 10px 20px -5px #f6bd01;
 }

 /* Footer Bottom Bar */
 .footer-bottom-bar {
   border-top: 1px solid rgba(246, 189, 1, 0.2);
   padding: 25px 0;
   margin-top: 30px;
 }

 .bottom-bar-content {
   display: flex;
   justify-content: space-between;
   align-items: center;
   flex-wrap: wrap;
   gap: 20px;
 }

 .copyright {
   color: #a68f62;
   font-size: 0.95rem;
 }

 .copyright .highlight {
   color: #f6bd01;
   font-weight: 600;
 }

 .copyright .tagline {
   color: #fef6e8;
   font-style: italic;
 }

 .separator {
   color: rgba(246, 189, 1, 0.3);
   margin: 0 10px;
 }

 .legal-links {
   display: flex;
   align-items: center;
   gap: 10px;
   flex-wrap: wrap;
 }

 .legal-link {
   color: #a68f62;
   text-decoration: none;
   font-size: 0.9rem;
   transition: all 0.3s;
 }

 .legal-link:hover {
   color: #f6bd01;
   text-decoration: underline;
 }

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

 @media (max-width: 768px) {
   .footer-content {
     padding: 40px 20px 0;
   }

   .footer-grid {
     grid-template-columns: 1fr;
     gap: 40px;
   }

   .bottom-bar-content {
     flex-direction: column;
     text-align: center;
   }

   .legal-links {
     justify-content: center;
   }

   .footer-wave svg {
     height: 40px;
   }
 }

 @media (max-width: 480px) {
   .footer-wave svg {
     height: 30px;
   }

   .social-links {
     justify-content: center;
   }

   .newsletter-form {
     flex-direction: column;
   }

   .newsletter-form button {
     width: 100%;
     border-radius: 50px;
   }
 }

 /* Hover animation for footer links */
 @keyframes slideIn {
   from {
     opacity: 0;
     transform: translateX(-10px);
   }

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

 .footer-link {
   animation: slideIn 0.3s ease;
 }

 /* Gradient animation for logo */
 @keyframes gradientShift {
   0% {
     background-position: 0% 50%;
   }

   50% {
     background-position: 100% 50%;
   }

   100% {
     background-position: 0% 50%;
   }
 }

 .logo-text {
   background-size: 200% 200%;
   animation: gradientShift 5s ease infinite;
 }

 /* Back to top button (optional) */
 .back-to-top {
   position: fixed;
   bottom: 30px;
   right: 30px;
   width: 50px;
   height: 50px;
   background: var(--gradient);
   border-radius: 50%;
   display: flex;
   align-items: center;
   justify-content: center;
   color: #1e1b1b;
   cursor: pointer;
   transition: all 0.3s;
   z-index: 99;
   opacity: 0;
   visibility: hidden;
 }

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

 .back-to-top:hover {
   transform: translateY(-5px);
   box-shadow: 0 10px 20px -5px #f6bd01;
 }

 /* Enhanced overlay with progress effect */
 #page-transition-overlay {
   position: fixed;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background: linear-gradient(135deg, var(--primary), var(--support));
   z-index: 9999;
   transform: translateX(-100%);
   transition: transform 0.5s cubic-bezier(0.7, 0, 0.3, 1);
   pointer-events: none;
 }

 #page-transition-overlay::after {
   content: '';
   position: absolute;
   bottom: 0;
   left: 0;
   width: 100%;
   height: 4px;
   background: rgba(255, 255, 255, 0.3);
   overflow: hidden;
 }

 #page-transition-overlay.active::before {
   content: '';
   position: absolute;
   bottom: 0;
   left: 0;
   width: 100%;
   height: 4px;
   background: white;
   animation: progress 0.8s ease-in-out forwards;
 }

 @keyframes progress {
   0% {
     transform: translateX(-100%);
   }

   20% {
     transform: translateX(-80%);
   }

   40% {
     transform: translateX(-60%);
   }

   60% {
     transform: translateX(-40%);
   }

   80% {
     transform: translateX(-20%);
   }

   100% {
     transform: translateX(0);
   }
 }

 /* Cart Styles */
 .floating-cart {
   margin-right: 15px;
   position: relative;
 }

 .position-relative {
   position: relative;
   display: inline-block;
 }

 .cart-link {
   text-decoration: none;
   display: inline-block;
   cursor: pointer;
 }

 .cart-link:hover {
   text-decoration: none;
 }

 .cart-link:hover .cart-icon {
   transform: scale(1.1);
   box-shadow: 0 8px 20px rgba(246, 189, 1, 0.5);
 }

 .cart-icon {
   width: 45px;
   height: 45px;
   background: var(--gradient);
   border-radius: 50%;
   display: flex;
   align-items: center;
   justify-content: center;
   color: #1e1b1b;
   font-size: 1.2rem;
   transition: all 0.3s;
   box-shadow: 0 5px 15px rgba(246, 189, 1, 0.3);
 }

 .cart-icon i {
   transition: transform 0.3s;
 }

 .cart-link:hover .cart-icon i {
   transform: rotate(-10deg);
 }

 .badge.cart-items-count {
   position: absolute;
   top: -8px;
   right: -8px;
   background: var(--support);
   color: #1e1b1b;
   border-radius: 50%;
   min-width: 22px;
   height: 22px;
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 0.75rem;
   font-weight: 700;
   border: 2px solid white;
   box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
   padding: 0 4px;
   line-height: 1;
   z-index: 2;
 }

 /* Make the entire cart icon clickable to go to cart page */
 .floating-cart .position-relative {
   cursor: pointer;
 }

 .cart-dropdown {
   width: 300px;
   padding: 15px;
   border-radius: 20px;
   border: 1px solid #ffefc0;
   box-shadow: 0 20px 40px -15px rgba(246, 189, 1, 0.3);
   margin-top: 10px;
 }

 .cart-items {
   list-style: none;
   padding: 0;
   margin: 0;
   max-height: 300px;
   overflow-y: auto;
 }

 .cart-item {
   padding: 10px;
   border-bottom: 1px solid #ffefc0;
   margin-bottom: 10px;
 }

 .cart-item:last-child {
   border-bottom: none;
 }

 .cart-item-name {
   font-weight: 600;
   color: #2d2d2d;
   font-size: 0.9rem;
   flex: 1;
   margin-right: 10px;
 }

 .remove-item {
   background: #fee2e2;
   color: #ef4444;
   border: none;
   width: 30px;
   height: 30px;
   border-radius: 50%;
   display: flex;
   align-items: center;
   justify-content: center;
   transition: all 0.3s;
 }

 .remove-item:hover {
   background: #ef4444;
   color: white;
   transform: scale(1.1);
 }

 .view-cart-btn {
   background: var(--gradient);
   color: #1e1b1b;
   border: none;
   padding: 10px;
   border-radius: 30px;
   font-weight: 600;
   transition: all 0.3s;
   text-decoration: none;
   display: block;
   text-align: center;
 }

 .view-cart-btn:hover {
   transform: translateY(-2px);
   box-shadow: 0 10px 20px -5px #f6bd01;
   color: #1e1b1b;
 }

 /* ========== MOBILE RESPONSIVE HEADER ========== */

 /* Mobile menu toggle button */
 .mobile-menu-toggle {
   display: none;
   background: none;
   border: none;
   font-size: 1.5rem;
   color: #2d2d2d;
   cursor: pointer;
   width: 45px;
   height: 45px;
   border-radius: 50%;
   background: rgba(246, 189, 1, 0.1);
   transition: all 0.3s;
   align-items: center;
   justify-content: center;
 }

 .mobile-menu-toggle:hover {
   background: var(--gradient);
   color: #1e1b1b;
 }

 /* Header container */
 .header-container {
   display: flex;
   align-items: center;
   justify-content: space-between;
   flex-wrap: nowrap;
   position: relative;
 }

 /* Logo - hide text on mobile only */
 .logo a span {
   display: inline-block;
 }

 /* Right side actions container */
 .header-actions {
   display: flex;
   align-items: center;
   gap: 15px;
 }

 /* Navigation for desktop */
 .nav-links {
   display: flex;
   gap: 2.2rem;
   flex-wrap: wrap;
 }

 /* DESKTOP STYLES - Exactly as original */
 @media (min-width: 901px) {
   .header-container {
     flex-wrap: wrap;
   }

   .nav-links {
     display: flex !important;
     position: static !important;
     width: auto !important;
     height: auto !important;
     background: transparent !important;
     backdrop-filter: none !important;
     box-shadow: none !important;
     overflow: visible !important;
     border-right: none !important;
   }

   .nav-links a {
     width: auto !important;
   }

   .nav-links a::after {
     display: block !important;
   }

   .dropdown-container {
     width: auto !important;
   }

   .dropdown-toggle {
     width: auto !important;
   }

   .header-btn {
     display: inline-block !important;
   }

   .mobile-menu-toggle {
     display: none !important;
   }

   .menu-overlay {
     display: none !important;
   }
 }

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

   /* Show mobile menu toggle */
   .mobile-menu-toggle {
     display: flex;
     margin-left: 10px;
   }

   /* Hide text on mobile, show only logo */
   .logo a span {
     display: none;
   }

   .logo a img {
     height: 40px !important;
     width: auto;
   }

   /* Hide desktop header button on mobile */
   .header-actions .header-btn {
     display: none;
   }

   /* Navigation becomes off-canvas menu */
   .nav-links {
     position: fixed;
     top: 80px;
     left: -100%;
     width: 85%;
     max-width: 350px;
     height: calc(100vh - 80px);
     background: rgba(255, 255, 255, 0.98);
     backdrop-filter: blur(10px);
     flex-direction: column;
     gap: 0;
     padding: 30px 20px 100px;
     /* Extra padding at bottom for the button */
     box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
     transition: left 0.3s ease;
     z-index: 1000;
     overflow-y: auto;
     border-right: 1px solid rgba(246, 189, 1, 0.2);
   }

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

   /* Navigation links styling for mobile */
   .nav-links a {
     padding: 15px 20px;
     margin: 5px 0;
     border-radius: 30px;
     width: 100%;
     text-align: left;
     font-size: 1.1rem;
     text-decoration: none;
     color: #2d2d2d;
   }

   .nav-links a::after {
     display: none;
   }

   .nav-links a:hover {
     background: rgba(246, 189, 1, 0.1);
     color: var(--support);
   }

   /* Dropdown container in mobile menu */
   .dropdown-container {
     width: 100%;
   }

   .dropdown-toggle {
     padding: 15px 20px !important;
     margin: 5px 0;
     border-radius: 30px;
     width: 100%;
     justify-content: space-between;
     display: flex;
     align-items: center;
   }

   .dropdown-menu {
     position: static;
     opacity: 1;
     visibility: visible;
     transform: none;
     box-shadow: none;
     background: rgba(246, 189, 1, 0.05);
     border-radius: 20px;
     padding: 10px;
     margin-top: 5px;
     margin-bottom: 10px;
     display: none;
     border: 1px solid rgba(246, 189, 1, 0.2);
   }

   .dropdown-container.open .dropdown-menu {
     display: block;
   }

   .dropdown-item {
     padding: 12px 15px;
     border-radius: 15px;
   }

   .dropdown-item:hover {
     background: rgba(246, 189, 1, 0.1);
     padding-left: 25px;
   }

   .dropdown-item::before {
     display: none;
   }

   /* Mobile Let's talk button - INSIDE the menu */
   .mobile-talk-btn {
     display: flex !important;
     margin-top: 30px;
     margin-bottom: 20px;
     width: 100%;
     justify-content: center;
     padding: 15px 20px !important;
     background: var(--gradient) !important;
     color: #1e1b1b !important;
     border-radius: 60px;
     font-weight: 700;
     box-shadow: 0 12px 20px -8px #f6bd0170;
     text-decoration: none;
     align-items: center;
     gap: 10px;
     border: none;
   }

   .mobile-talk-btn:hover {
     transform: scale(1.02);
     box-shadow: 0 20px 25px -5px #e9872d90;
     background: var(--gradient) !important;
     color: #1e1b1b !important;
   }

   .mobile-talk-btn i {
     font-size: 1.1rem;
   }

   /* Cart icon */
   .floating-cart {
     margin-right: 0;
   }

   /* Overlay for when menu is open */
   .menu-overlay {
     display: none;
     position: fixed;
     top: 80px;
     left: 0;
     width: 100%;
     height: calc(100vh - 80px);
     background: rgba(0, 0, 0, 0.5);
     z-index: 999;
     opacity: 0;
     transition: opacity 0.3s ease;
   }

   .menu-overlay.active {
     display: block;
     opacity: 1;
   }
 }

 @media (max-width: 480px) {
   .nav-links {
     width: 100%;
     max-width: 100%;
     top: 70px;
     height: calc(100vh - 70px);
   }

   .menu-overlay {
     top: 70px;
     height: calc(100vh - 70px);
   }

   .logo a img {
     height: 35px !important;
   }
 }
 /* ========== NEWSLETTER MESSAGE STYLES ========== */
#newsletterMessage {
    margin-top: 10px;
    font-size: 0.9rem;
    transition: all 0.3s ease;
    min-height: 24px;
}

#newsletterMessage.success {
    color: #10b981;
}

#newsletterMessage.error {
    color: #ef4444;
}