@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700;900&display=swap');

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

 body {
     font-family: 'Roboto', sans-serif;
     overflow-x: hidden;
 }

 /* Container with side margins */
 .site-container {
     margin: 0 15px;
 }

 /* Welcome Modal */
 .modal-overlay {
     position: fixed;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background: rgba(0, 0, 0, 0.8);
     display: flex;
     align-items: center;
     justify-content: center;
     z-index: 9999;
     animation: fadeIn 0.3s ease;
 }

 .modal-content {
     background: white;
     border-radius: 20px;
     max-width: 600px;
     width: 90%;
     padding: 40px;
     position: relative;
     animation: slideUp 0.4s ease;
     box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
 }

 .dark-mode .modal-content {
     background: #1a1a1a;
     color: #e5e5e5;
 }

 .modal-close {
     position: absolute;
     top: 15px;
     right: 15px;
     width: 40px;
     height: 40px;
     border-radius: 50%;
     background: #f3f4f6;
     border: none;
     cursor: pointer;
     display: flex;
     align-items: center;
     justify-content: center;
     transition: all 0.3s ease;
 }

 .dark-mode .modal-close {
     background: #2d2d2d;
     color: #e5e5e5;
 }

 .modal-close:hover {
     background: #FFD54F;
     color: white;
     transform: rotate(90deg);
 }

 @keyframes fadeIn {
     from {
         opacity: 0;
     }

     to {
         opacity: 1;
     }
 }

 @keyframes slideUp {
     from {
         opacity: 0;
         transform: translateY(50px);
     }

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

 /* Dark Mode Styles */
 body.dark-mode {
     background-color: #0f0f0f;
     color: #e5e5e5;
 }

 .dark-mode .bg-white {
     background-color: #1a1a1a !important;
     color: #e5e5e5;
 }
 .bg-white1{
     background: #fff;
 }

 .dark-mode .bg-gray-50 {
     background-color: #0f0f0f !important;
 }

 .dark-mode .bg-gray-100 {
     background-color: #1a1a1a !important;
 }

 .dark-mode .text-gray-600 {
     color: #b0b0b0 !important;
 }

 .dark-mode .text-gray-800 {
     color: #d1d1d1 !important;
 }

 .dark-mode .service-card {
     background: linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 100%);
     border: 1px solid #333;
 }

 /* Smooth Transitions */
 * {
     transition: background-color 0.3s ease, color 0.3s ease;
 }

 /* Hero Carousel */
 .carousel {
     position: relative;
     width: 100%;
     height: 100vh;
     overflow: hidden;
 }

 .carousel-slide {
     position: absolute;
     width: 100%;
     height: 100%;
     opacity: 0;
     transition: opacity 1s ease-in-out;
 }

 .carousel-slide.active {
     opacity: 1;
 }

 .carousel-indicators {
     position: absolute;
     bottom: 30px;
     left: 50%;
     transform: translateX(-50%);
     display: flex;
     gap: 10px;
     z-index: 10;
 }

 .carousel-indicator {
     width: 12px;
     height: 12px;
     border-radius: 50%;
     background: rgba(255, 255, 255, 0.5);
     border: 2px solid white;
     cursor: pointer;
     transition: all 0.3s ease;
 }

 .carousel-indicator.active {
     background: #FFD54F;
     transform: scale(1.3);
 }

 .carousel-control {
     position: absolute;
     top: 50%;
     transform: translateY(-50%);
     background: rgba(253, 183, 20, 0.8);
     color: white;
     border: none;
     width: 50px;
     height: 50px;
     border-radius: 50%;
     cursor: pointer;
     display: flex;
     align-items: center;
     justify-content: center;
     z-index: 10;
     transition: all 0.3s ease;
 }

 .carousel-control:hover {
     background: #FFD54F;
     transform: translateY(-50%) scale(1.1);
 }

 .carousel-control.prev {
     left: 30px;
 }

 .carousel-control.next {
     right: 30px;
 }

 .hero-overlay {
     background: linear-gradient(135deg, rgba(0, 0, 0, 0.7) 0%, rgba(253, 183, 20, 0.3) 100%);
 }

 .hero-content {
     animation: fadeInUp 1s ease-out;
 }

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

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

 /* Premium Button Styles */
 .btn-primary {
     background: linear-gradient(135deg, #FFD54F 0%, #f5a300 100%);
     color: white;
     padding: 14px 32px;
     border-radius: 8px;
     font-weight: 600;
     font-size: 0.875rem;
     text-transform: uppercase;
     letter-spacing: 0.5px;
     box-shadow: 0 4px 15px rgba(253, 183, 20, 0.3);
     transition: all 0.3s ease;
     border: none;
     cursor: pointer;
 }

 .btn-primary:hover {
     transform: translateY(-3px);
     box-shadow: 0 8px 25px rgba(253, 183, 20, 0.5);
     background: linear-gradient(135deg, #f5a300 0%, #FFD54F 100%);
 }

 .btn-secondary {
     background: transparent;
     color: white;
     padding: 14px 32px;
     border-radius: 8px;
     font-weight: 600;
     font-size: 0.875rem;
     text-transform: uppercase;
     letter-spacing: 0.5px;
     border: 2px solid #FFD54F;
     transition: all 0.3s ease;
     cursor: pointer;
 }

 .btn-secondary:hover {
     background: #FFD54F;
     transform: translateY(-3px);
     box-shadow: 0 8px 25px rgba(253, 183, 20, 0.3);
 }

 /* Premium Cards */
 .service-card {
     background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
     border-radius: 16px;
     padding: 28px;
     transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
     box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
     border: 1px solid rgba(253, 183, 20, 0.1);
     position: relative;
     overflow: hidden;
 }

 .service-card::before {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 4px;
     background: linear-gradient(90deg, #FFD54F, #f5a300);
     transform: scaleX(0);
     transition: transform 0.3s ease;
 }

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

 .service-card:hover {
     transform: translateY(-10px);
     box-shadow: 0 12px 40px rgba(253, 183, 20, 0.2);
 }

 .service-icon {
     width: 70px;
     height: 70px;
     background: linear-gradient(135deg, #FFD54F 0%, #f5a300 100%);
     border-radius: 16px;
     display: flex;
     align-items: center;
     justify-content: center;
     margin: 0 auto 20px;
     transition: all 0.3s ease;
     box-shadow: 0 4px 15px rgba(253, 183, 20, 0.3);
 }

 .service-card:hover .service-icon {
     transform: rotateY(360deg) scale(1.1);
     box-shadow: 0 8px 25px rgba(253, 183, 20, 0.5);
 }

 .service-icon i {
     font-size: 1.75rem;
     color: white;
 }

 /* Feature Cards */
 .feature-card {
     background: white;
     border-radius: 16px;
     padding: 32px;
     transition: all 0.3s ease;
     border: 1px solid rgba(0, 0, 0, 0.08);
     position: relative;
     overflow: hidden;
 }

 .dark-mode .feature-card {
     background: #1a1a1a;
     border: 1px solid #333;
 }

 .feature-card::after {
     content: '';
     position: absolute;
     bottom: 0;
     left: 0;
     width: 100%;
     height: 3px;
     background: linear-gradient(90deg, #FFD54F, #f5a300);
     transform: scaleX(0);
     transition: transform 0.3s ease;
 }

 .feature-card:hover::after {
     transform: scaleX(1);
 }

 .feature-card:hover {
     transform: translateY(-8px);
     box-shadow: 0 15px 40px rgba(0, 0, 0, 0.12);
 }

 /* Icon Animations */
 .feature-icon {
     width: 80px;
     height: 80px;
     background: linear-gradient(135deg, rgba(253, 183, 20, 0.1) 0%, rgba(253, 183, 20, 0.05) 100%);
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
     margin: 0 auto 20px;
     border: 3px solid #FFD54F;
     transition: all 0.4s ease;
 }

 .feature-card:hover .feature-icon {
     background: linear-gradient(135deg, #FFD54F 0%, #f5a300 100%);
     transform: scale(1.15) rotate(360deg);
 }

 .feature-icon i {
     font-size: 2rem;
     color: #FFD54F;
     transition: all 0.4s ease;
 }

 .feature-card:hover .feature-icon i {
     color: #1a1a1a;
 }

 /* Theme Toggle */
 .theme-toggle {
     position: fixed;
     top: 120px;
     right: 30px;
     z-index: 1000;
     background: linear-gradient(135deg, #FFD54F 0%, #f5a300 100%);
     color: white;
     border: none;
     border-radius: 50%;
     width: 56px;
     height: 56px;
     cursor: pointer;
     box-shadow: 0 6px 20px rgba(253, 183, 20, 0.4);
     transition: all 0.3s ease;
     display: flex;
     align-items: center;
     justify-content: center;
 }

 .theme-toggle:hover {
     transform: scale(1.15) rotate(180deg);
     box-shadow: 0 8px 30px rgba(253, 183, 20, 0.6);
 }

 .theme-toggle i {
     font-size: 1.25rem;
 }

 /* Enhanced Navigation */
 nav {
     backdrop-filter: blur(15px);
     background: rgba(17, 24, 39, 0.95);
     box-shadow: 0 4px 30px rgba(0, 0, 0, 0.15);
 }

 .nav-link {
     position: relative;
     padding-bottom: 4px;
 }

 .nav-link::after {
     content: '';
     position: absolute;
     bottom: 0;
     left: 0;
     width: 0;
     height: 2px;
     background: #FFD54F;
     transition: width 0.3s ease;
 }

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

 .quote-btn {
     background: linear-gradient(135deg, #FFD54F 0%, #f5a300 100%);
     color: white;
     padding: 10px 24px;
     border-radius: 25px;
     font-weight: 600;
     font-size: 0.875rem;
     transition: all 0.3s ease;
     box-shadow: 0 4px 15px rgba(253, 183, 20, 0.3);
 }

 .quote-btn:hover {
     transform: translateY(-2px);
     box-shadow: 0 6px 20px rgba(253, 183, 20, 0.5);
 }

 /* Scroll Animations */
 .fade-in {
     opacity: 0;
     transform: translateY(30px);
     transition: opacity 0.6s ease, transform 0.6s ease;
 }

 .fade-in.visible {
     opacity: 1;
     transform: translateY(0);
 }

 /* Section Headers */
 .section-header {
     position: relative;
     display: inline-block;
     padding-bottom: 12px;
     margin-bottom: 20px;
 }

 .section-header::after {
     content: '';
     position: absolute;
     bottom: 0;
     left: 50%;
     transform: translateX(-50%);
     width: 80px;
     height: 4px;
     background: linear-gradient(90deg, #FFD54F, #f5a300);
     border-radius: 2px;
 }

 /* Stats Counter */
 .stat-card {
     text-align: center;
     padding: 24px;
     background: rgba(253, 183, 20, 0.05);
     border-radius: 12px;
     border: 2px solid rgba(122, 87, 5, 0.2);
     transition: all 0.3s ease;
 }

 .stat-card:hover {
     background: rgba(15, 13, 7, 0.1);
     transform: translateY(-20px);
     box-shadow: 0 4px 20px rgba(231, 117, 117, 0.08);
 }

 /* Footer Enhancement */
 footer {
     background: linear-gradient(135deg, rgba(26, 26, 26, 0.95) 0%, rgba(10, 10, 10, 0.95) 100%),
         url('https://images.unsplash.com/photo-1504917595217-d4dc5ebe6122?w=1920') center/cover no-repeat;
     background-attachment: fixed;
 }

 .footer-link {
     position: relative;
     transition: all 0.3s ease;
 }

 .footer-link::before {
     content: '';
     position: absolute;
     bottom: -2px;
     left: 0;
     width: 0;
     height: 2px;
     background: #FFD54F;
     transition: width 0.3s ease;
 }

 .footer-link:hover::before {
     width: 100%;
 }

 /* Testimonial Cards */
 .testimonial-card {
     background: white;
     padding: 28px;
     border-radius: 16px;
     box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
     border-left: 4px solid #FFD54F;
     transition: all 0.3s ease;
 }

 .dark-mode .testimonial-card {
     background: #1a1a1a;
     border-left-color: #FFD54F;
 }

 .testimonial-card:hover {
     transform: translateX(8px);
     box-shadow: 0 8px 30px rgba(253, 183, 20, 0.15);
 }

 /* Pulse Animation for CTA */
 @keyframes pulse {

     0%,
     100% {
         box-shadow: 0 4px 15px rgba(253, 183, 20, 0.3);
     }

     50% {
         box-shadow: 0 4px 25px rgba(253, 183, 20, 0.6);
     }
 }

 .pulse {
     animation: pulse 2s infinite;
 }

 /* Page Content */
 .page-content {
     display: none;
 }

 .page-content.active {
     display: block;
 }

 /* Mobile Responsive */
 @media (max-width: 768px) {
     .site-container {
         margin: 0 10px;
     }

     .theme-toggle {
         top: 80px;
         right: 20px;
         width: 48px;
         height: 48px;
     }

     .hero-content h1 {
         font-size: 2rem;
     }

     .hero-content h2 {
         font-size: 1.5rem;
     }

     .carousel-control {
         width: 40px;
         height: 40px;
     }

     .carousel-control.prev {
         left: 15px;
     }

     .carousel-control.next {
         right: 15px;
     }
 }

 /* Base Input (Light Theme Default) */
 .dark-input {
     width: 100%;
     background: linear-gradient(135deg, #ffffff 0%, #f9fafb 100%);
     border: 1px solid #d1d5db;
     color: #1f2937;
     padding: 14px 16px;
     border-radius: 10px;
     font-size: 0.875rem;
     font-family: 'Roboto', sans-serif;
     transition: all 0.25s ease;
 }

 /* Light Theme Placeholder */
 .dark-input::placeholder {
     color: #9ca3af;
 }

 /* Light Theme Focus */
 .dark-input:focus {
     outline: none;
     border-color: #FFD54F;
     background: #ffffff;
     box-shadow: 0 0 0 2px rgba(253, 183, 20, 0.25);
 }

 /* Dark Theme Override */
 .dark-mode .dark-input {
     background: linear-gradient(135deg, #121212 0%, #1e1e1e 100%);
     border:1px solid #5f4900;
     color: #e5e5e5;
 }

 /* Dark Theme Placeholder */
 .dark-mode .dark-input::placeholder {
     color: #9ca3af;
 }

 /* Dark Theme Focus */
 .dark-mode .dark-input:focus {
     background: #0f0f0f;
     border-color: #FFD54F;
     box-shadow: 0 0 0 2px rgba(253, 183, 20, 0.35);
 }

 /* Textarea Consistency */
 textarea.dark-input {
     resize: none;
     min-height: 120px;
 }

 /* Autofill Consistency (Chrome) */
 input.dark-input:-webkit-autofill,
 textarea.dark-input:-webkit-autofill {
     -webkit-text-fill-color: inherit;
     transition: background-color 9999s ease-in-out 0s;
 }







 .service-card {
     position: relative;
     background: rgba(255, 255, 255, 0.7);
     backdrop-filter: blur(10px);
     -webkit-backdrop-filter: blur(10px);
     border: 1px solid rgba(255, 255, 255, 0.2);
     border-radius: 16px;
     padding: 24px;
     text-align: center;
     transition: all 0.3s ease;
     overflow: hidden;
 }

 .dark .service-card {
     background: rgba(30, 41, 59, 0.6);
     border: 1px solid rgba(255, 255, 255, 0.1);
 }

 .glass-card {
     background: rgba(255, 255, 255, 0.1);
     backdrop-filter: blur(10px);
     -webkit-backdrop-filter: blur(10px);
     border: 1px solid rgba(255, 255, 255, 0.2);
     box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
 }

 .dark .glass-card {
     background: rgba(15, 23, 42, 0.3);
     border: 1px solid rgba(255, 255, 255, 0.1);
 }

 .fade-in {
     animation: fadeIn 0.6s ease-out forwards;
     opacity: 0;
 }

 @keyframes fadeIn {
     from {
         opacity: 0;
         transform: translateY(20px);
     }

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

 @media (max-width: 640px) {
     footer .container {
         padding-left: 1rem;
         padding-right: 1rem;
     }

     footer .grid {
         gap: 2rem;
     }

     footer a.footer-link {
         padding-top: 0.25rem;
         padding-bottom: 0.25rem;
     }

     /* Better touch targets for mobile */
     footer a,
     footer button,
     footer li {
         min-height: 44px;
         display: flex;
         align-items: center;
     }
 }

 @media (max-width: 768px) {

     /* Stack newsletter on mobile */
     footer .flex-col.md\\:flex-row {
         align-items: stretch;
     }

     footer input[type="email"] {
         border-radius: 0.5rem 0 0 0.5rem;
     }

     footer button[type="button"] {
         border-radius: 0 0.5rem 0.5rem 0;
     }
 }

 /* Smooth transitions for footer elements */
 .footer-link {
     transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
 }

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



 .carousel-slide {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     opacity: 0;
     transition: opacity 1s ease-in-out;
     pointer-events: none;
 }

 .carousel-slide.active {
     opacity: 1;
     pointer-events: auto;
     z-index: 1;
 }

 /* Hero content animations */
 .hero-content {
     animation: fadeInUp 1s ease-out 0.3s both;
 }

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

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

 /* Button styles */
 .btn-primary {
     background-color: #FDB714;
     color: #000;
     font-weight: bold;
     padding: 12px 32px;
     border-radius: 8px;
     border: none;
     cursor: pointer;
     transition: all 0.3s ease;
 }

 .btn-primary:hover {
     background-color: #e6a500;
     transform: translateY(-2px);
     box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
 }

 .btn-secondary {
     background-color: transparent;
     color: white;
     font-weight: bold;
     padding: 12px 32px;
     border-radius: 8px;
     border: 2px solid white;
     cursor: pointer;
     transition: all 0.3s ease;
 }

 .btn-secondary:hover {
     background-color: white;
     color: #000;
     transform: translateY(-2px);
 }

 .pulse {
     animation: pulse 1s infinite;
 }

 @keyframes pulse {
     0% {
         box-shadow: 0 0 0 0 rgba(253, 183, 20, 0.7);
     }

     70% {
         box-shadow: 0 0 0 10px rgba(253, 183, 20, 0);
     }

     100% {
         box-shadow: 0 0 0 0 rgba(253, 183, 20, 0);
     }
 }



 /* Enhanced Select Styling */
 .dark-input {
     width: 100%;
     background: var(--bg-tertiary);
     border: 2px solid var(--border-color);
     color: var(--text-primary);
     padding: 14px 16px;
     border-radius: 10px;
     font-size: 0.875rem;
     font-family: 'Roboto', sans-serif;
     transition: all 0.25s ease;
     appearance: none;
     -webkit-appearance: none;
     -moz-appearance: none;
     background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
     background-repeat: no-repeat;
     background-position: right 1rem center;
     background-size: 1em;
 }

 .dark-input:focus {
     outline: none;
     border-color: var(--accent-color);
     background: var(--bg-secondary);
     box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.25);
     background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f59e0b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
 }

 .dark-input option {
     background: var(--bg-tertiary);
     color: var(--text-primary);
     padding: 10px;
 }

 .dark-input option:checked {
     background: var(--accent-color);
     color: white;
 }

 /* Custom Select Container */
 .select-container {
     position: relative;
 }

 .select-container::after {
     content: '▼';
     position: absolute;
     right: 1rem;
     top: 50%;
     transform: translateY(-50%);
     color: var(--text-tertiary);
     pointer-events: none;
     font-size: 0.75rem;
 }

 /* Form Group Styles */
 .form-group {
     margin-bottom: 1.5rem;
 }

 .form-label {
     display: block;
     margin-bottom: 0.5rem;
     font-weight: 500;
     color: var(--text-primary);
 }

 .form-help {
     display: block;
     margin-top: 0.25rem;
     font-size: 0.875rem;
     color: var(--text-tertiary);
 }

 /* Required field indicator */
 .required::after {
     content: ' *';
     color: #ef4444;
 }




/* Floating container */
.floating-contact {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 9999;

  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Button base */
.btn-floating {
  display: flex;
  align-items: center;
  gap: 10px;

  padding: 12px 16px;
  border-radius: 999px;
  text-decoration: none;
  font-weight: 600;
  font-size: 14px;

  color: #fff;
  box-shadow: 0 10px 25px rgba(0,0,0,0.2);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

/* Icons */
.btn-floating img {
  width: 22px;
  height: 22px;
}

/* Variants */
.btn-floating.phone {
  background: #2563eb; /* blue */
}

.btn-floating.whatsapp {
  background: #25d366;
}

/* Hover (desktop) */
.btn-floating:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 30px rgba(0,0,0,0.25);
}

/* Mobile optimization */
@media (max-width: 640px) {
  .btn-floating span {
    display: none; /* icon-only on small screens */
  }

  .btn-floating {
    padding: 14px;
    border-radius: 50%;
  }
}