/* CSS Variables for Colors */
:root {
  /* Primary Colors */
  --primary-orange: #f8a5c2;
  --primary-orange-light: #f8a5c2;
  --primary-orange-dark: #e91e63;
  --primary-yellow: #a29bfe;
  --primary-yellow-light: #a29bfe;
  
  /* Blue Colors */
  --primary-blue: #011c3a;
  --secondary-blue: #00204a;
  --tertiary-blue: #002a5c;
  --blue-light: #00162d;
  --blue-dark: rgba(0, 32, 74, 0.8);
  --blue-darker: rgba(1, 28, 58, 0.7);
  --blue-darkest: rgba(1, 28, 58, 0.6);
  
  /* White and Gray */
  --white: #ffffff;
  --white-10: rgba(255, 255, 255, 0.1);
  --white-20: rgba(255, 255, 255, 0.2);
  --white-30: rgba(255, 255, 255, 0.3);
  --white-50: rgba(255, 255, 255, 0.5);
  --white-70: rgba(255, 255, 255, 0.7);
  --white-80: rgba(255, 255, 255, 0.8);
  --white-95: rgba(255, 255, 255, 0.95);
  
  /* Orange with Opacity */
  --orange-10: rgba(248, 165, 194, 0.1);
  --orange-15: rgba(248, 165, 194, 0.15);
  --orange-20: rgba(248, 165, 194, 0.2);
  --orange-30: rgba(248, 165, 194, 0.3);
  --orange-40: rgba(248, 165, 194, 0.4);
  --orange-50: rgba(248, 165, 194, 0.5);
  --orange-60: rgba(248, 165, 194, 0.6);
  --orange-80: rgba(248, 165, 194, 0.8);
  --orange-90: rgba(248, 165, 194, 0.9);
  
  /* Blue with Opacity */
  --blue-50: rgba(1, 28, 58, 0.5);
  --blue-70: rgba(1, 28, 58, 0.7);
  
  /* Text Colors */
  --text-primary: #011c3a;
  --text-secondary: #00204a;
  --text-white: #ffffff;
  --text-black: #000000;
  --text-orange: #f8a5c2;
  --text-yellow: #a29bfe;
  
  /* Border Colors */
  --border-orange: #f8a5c2;
  --border-orange-30: rgba(248, 165, 194, 0.3);
  --border-orange-40: rgba(248, 165, 194, 0.4);
  --border-orange-50: rgba(248, 165, 194, 0.5);
  --border-orange-80: rgba(248, 165, 194, 0.8);
  --border-white-10: rgba(255, 255, 255, 0.1);
  --border-white-20: rgba(255, 255, 255, 0.2);
  
  /* Shadow Colors */
  --shadow-orange: rgba(248, 165, 194, 0.1);
  --shadow-orange-light: rgba(248, 165, 194, 0.05);
  --shadow-orange-15: rgba(248, 165, 194, 0.15);
  --shadow-orange-20: rgba(248, 165, 194, 0.2);
  --shadow-orange-40: rgba(248, 165, 194, 0.4);
  --shadow-orange-60: rgba(248, 165, 194, 0.6);
  --shadow-black-10: rgba(0, 0, 0, 0.1);
  --shadow-black-30: rgba(0, 0, 0, 0.3);
  --shadow-blue-30: rgba(0, 32, 74, 0.3);
  
  /* Background Colors */
  --bg-blue-dark: #011c3a;
  --bg-blue-darker: #00162d;
  --bg-blue-gradient: linear-gradient(135deg, #011c3a 0%, #00162d 100%);
  --bg-orange-gradient: linear-gradient(45deg, #f8a5c2, #a29bfe);
  --bg-orange-gradient-90: linear-gradient(90deg, #f8a5c2, #a29bfe, #f8a5c2);
  --bg-orange-gradient-45: linear-gradient(-45deg, #f8a5c2, #e91e63, #a29bfe, #f8a5c2);
  
  /* WhatsApp Colors */
  --whatsapp-green: #25d366;
  
  /* Additional Colors */
  --transparent: transparent;
  --black: #000000;
  --black-60: rgba(0, 0, 0, 0.6);
  --black-70: rgba(0, 0, 0, 0.7);
  
  /* Timeline Colors */
  --timeline-blue: #3b82f6;
  --timeline-green: #10b981;
  --timeline-purple: #8b5cf6;
  --timeline-pink: #ec4899;
  --timeline-yellow: #eab308;
  --timeline-cyan: #06b6d4;
}

@font-face {
    font-family: 'saudi_riyal';
    src: url(../fonts/saudi_riyal.ttf);
}

.price-saudi {
    font-family: 'saudi_riyal' !important;
    font-style: normal;
    font-weight: normal;
    text-transform: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
}

.price-saudi::before {
    content: "\e900";

}

@keyframes fadeIn {
    from {
      opacity: 0;
    }

    to {
      opacity: 1;
    }
  }

  .animate-fade-in {
    animation: fadeIn 0.5s ease-out forwards;
  }

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

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

  .timeline-card {
    position: relative;
    transition: all 0.3s ease;
    z-index: 1;
    background: var(--blue-dark);
    backdrop-filter: blur(10px);
    border: 1px solid var(--orange-10);
  }

  .timeline-card:hover {
    transform: translateY(-5px);
    border-color: var(--orange-30);
  }

  .timeline-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 1rem;
    padding: 2px;
    background: var(--bg-orange-gradient);
    -webkit-mask: linear-gradient(var(--white) 0 0) content-box, linear-gradient(var(--white) 0 0);
    mask: linear-gradient(var(--white) 0 0) content-box, linear-gradient(var(--white) 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    opacity: 0;
    transition: opacity 0.3s ease;
  }

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

  .timeline-number {
    position: relative;
    z-index: 2;
  }

  .timeline-number::after {
    content: '';
    position: absolute;
    inset: -5px;
    background: var(--bg-orange-gradient);
    border-radius: 50%;
    z-index: -1;
    opacity: 0.2;
    transition: opacity 0.3s ease;
  }

  .timeline-card:hover .timeline-number::after {
    opacity: 0.4;
  }

  .timeline-line {
    z-index: 0;
  }

  .floating {
    animation: floating 3s ease-in-out infinite;
  }

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

    50% {
      transform: translateY(-10px);
    }

    100% {
      transform: translateY(0px);
    }
  }

  .glow {
    position: relative;
  }

  .glow::after {
    content: '';
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
    background: var(--bg-orange-gradient);
    border-radius: inherit;
    z-index: -1;
    opacity: 0;
    transition: opacity 0.3s ease;
  }

  .glow:hover::after {
    opacity: 0.5;
  }

  .service-tag {
    position: relative;
    overflow: hidden;
  }

  .service-tag::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, var(--transparent), var(--orange-20), var(--transparent));
    transition: 0.5s;
  }

  .service-tag:hover::before {
    left: 100%;
  }

  /* Mobile Navigation */
  .mobile-nav {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    max-width: 300px;
    background: var(--bg-blue-dark);
    transform: translateX(100%);
    transition: transform 0.3s ease-in-out;
    z-index: 1000;
    padding: 1rem;
    box-shadow: -5px 0 15px var(--shadow-black-10);
  }

  .mobile-nav.active {
    transform: translateX(0);
  }

  [dir="rtl"] .mobile-nav {
    right: auto;
    left: 0;
    transform: translateX(-100%);
  }

  [dir="rtl"] .mobile-nav.active {
    transform: translateX(0);
  }

  /* Mobile Menu Button */
  @media (max-width: 1024px) {
    .desktop-nav {
      display: none !important;
    }

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

    .language-switch.desktop-only {
      display: none !important;
    }
  }

  /* Timeline Mobile */
  .timeline-mobile {
    position: relative;
    padding-right: 2rem;
  }

  .timeline-mobile::before {
    content: '';
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: 2px;
    background: linear-gradient(to bottom, var(--primary-orange), var(--primary-yellow));
  }

  .timeline-mobile-step {
    position: relative;
    padding-bottom: 2rem;
  }

  .timeline-mobile-step::before {
    content: '';
    position: absolute;
    right: -2.5rem;
    top: 0;
    width: 1rem;
    height: 1rem;
    background: var(--primary-orange);
    border-radius: 50%;
    border: 2px solid var(--secondary-blue);
  }

  /* Feature Cards */
  .feature-card {
    position: relative;
    overflow: hidden;
  }

  .feature-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--bg-orange-gradient);
    opacity: 0;
    transition: opacity 0.3s ease;
  }

  .feature-card:hover::before {
    opacity: 0.1;
  }

  .feature-icon {
    position: relative;
    z-index: 1;
  }

  .feature-icon::after {
    content: '';
    position: absolute;
    inset: -10px;
    background: var(--bg-orange-gradient);
    border-radius: 50%;
    opacity: 0.1;
    z-index: -1;
    transition: all 0.3s ease;
  }

  .feature-card:hover .feature-icon::after {
    opacity: 0.2;
    transform: scale(1.1);
  }

  /* Stats Counter */
  .stat-number {
    background: var(--bg-orange-gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }

  /* Hero Section Enhancements */
  .hero-slider {
    position: relative;
    overflow: hidden;
  }

  .hero-slider::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
  }

  .hero-content {
    position: relative;
    z-index: 2;
  }

  .hero-image {
    position: relative;
    z-index: 2;
    transform: perspective(1000px) rotateY(-5deg);
    transition: transform 0.5s ease;
  }

  .hero-image:hover {
    transform: perspective(1000px) rotateY(0deg);
  }

  .hero-stats {
    animation: float 3s ease-in-out infinite;
  }

  @keyframes float {

    0%,
    100% {
      transform: translateY(0);
    }

    50% {
      transform: translateY(-10px);
    }
  }

  .swiper-button-next,
  .swiper-button-prev {
    background: var(--orange-10);
    width: 50px;
    height: 50px;
    border-radius: 50%;
    transition: all 0.3s ease;
  }

  .swiper-button-next:hover,
  .swiper-button-prev:hover {
    background: var(--orange-20);
  }

  .swiper-pagination-bullet {
    width: 12px;
    height: 12px;
    background: var(--orange-30);
    transition: all 0.3s ease;
  }

  .swiper-pagination-bullet-active {
    background: var(--primary-orange);
    transform: scale(1.2);
  }

  /* dashboard css */

  .card {
    position: relative;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 1;
    background: var(--blue-darker);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid var(--orange-10);
    overflow: hidden;
  }

  .card::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, var(--orange-10) 0%, var(--transparent) 65%);
    transform: scale(0);
    transition: transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: -1;
  }

  .card:hover::before {
    transform: scale(1);
  }

  .card:hover {
    transform: translateY(-8px);
    border-color: var(--orange-40);
    box-shadow: 0 20px 40px -10px var(--shadow-orange-15);
  }

  .mobile-menu-overlay {
    position: fixed;
    inset: 0;
    background: var(--black-60);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1), visibility 0s 0.4s;
    z-index: 40;
  }

  .mobile-menu-overlay.active {
    opacity: 1;
    visibility: visible;
    transition-delay: 0s;
  }

  .mobile-menu {
    position: fixed;
    top: 0;
    width: 80%;
    max-width: 320px;
    height: 100vh;
    background: var(--bg-blue-dark);
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 50;
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
  }

  html[dir="rtl"] .mobile-menu {
    right: 0;
    transform: translateX(100%);
  }

  html[dir="ltr"] .mobile-menu {
    left: 0;
    transform: translateX(-100%);
  }

  .mobile-menu.active {
    transform: translateX(0);
  }

  /* end dashboard css */

   .event-card {
      position: relative;
      background: var(--blue-darkest);
      backdrop-filter: blur(16px) saturate(180%);
      -webkit-backdrop-filter: blur(16px) saturate(180%);
      border: 1px solid var(--white-10);
      border-radius: 1rem;
      transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
      overflow: hidden;
    }

    .event-card:hover {
      transform: translateY(-8px) scale(1.02);
      box-shadow: 0 20px 40px -10px var(--shadow-orange-20);
      border-color: var(--orange-40);
    }
    
    .event-card .card-content {
        position: relative;
        z-index: 2;
    }

    .event-card::before {
        content: '';
        position: absolute;
        top: -50%;
        left: -50%;
        width: 200%;
        height: 200%;
        background: radial-gradient(circle, var(--orange-15) 0%, var(--transparent) 60%);
        transform: scale(0);
        opacity: 0;
        transition: transform 0.8s cubic-bezier(0.25, 0.8, 0.25, 1), opacity 0.8s;
        z-index: 1;
        pointer-events: none;
    }

    .event-card:hover::before {
        transform: scale(1);
        opacity: 1;
    }
    .rtl .group-hover\:-translate-x-1:hover {
        transform: translateX(0.25rem);
    }
    .ltr .group-hover\:-translate-x-1:hover {
        transform: translateX(-0.25rem);
    }


 
.line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.line-clamp-3 {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
/* services cards */
    .service-card {
      transition: transform 0.2s ease-in-out;
    }

    .service-card:hover {
      transform: translateY(-2px);
    }

    .product-card {
      position: relative;
      transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
      z-index: 1;
      background: var(--blue-darker);
      backdrop-filter: blur(10px);
      border: 1px solid var(--orange-10);
      overflow: hidden;
    }

    .product-card::after {
      content: '';
      position: absolute;
      inset: 0;
      background: linear-gradient(to bottom,
          var(--transparent),
          var(--transparent) 50%,
          var(--orange-10));
      opacity: 0;
      transition: opacity 0.4s ease;
      z-index: -1;
    }

    .product-card:hover::after {
      opacity: 1;
    }

    .product-card:hover {
      transform: translateY(-5px);
      border-color: var(--orange-30);
      box-shadow: 0 10px 30px -5px var(--shadow-orange);
    }

    .product-image-wrapper {
      position: relative;
      overflow: hidden;
    }

    .product-image-wrapper img {
      transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    }

    .product-card:hover .product-image-wrapper img {
      transform: scale(1.05);
    }

    .service-swiper {
      padding: 1rem 0;
    }

    .service-swiper .swiper-slide {
      width: auto;
    }

    .service-swiper-button-next,
    .service-swiper-button-prev {
      width: 40px;
      height: 40px;
      background: var(--orange-10);
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(--primary-orange);
      transition: all 0.3s ease;
      cursor: pointer;
      top: 5px;
    }

    .service-swiper-button-next:hover,
    .service-swiper-button-prev:hover {
      background: var(--orange-20);
    }

    .service-swiper-button-next.swiper-button-disabled,
    .service-swiper-button-prev.swiper-button-disabled {
      opacity: 0.3;
      cursor: not-allowed;
    }

    .add-to-cart-btn {
      position: relative;
      overflow: hidden;
      cursor: pointer;
      transition: all 0.3s ease;
    }

    .add-to-cart-btn::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: var(--bg-orange-gradient);
      opacity: 0;
      transition: opacity 0.3s ease;
    }

    .add-to-cart-btn:hover::before {
      opacity: 0.2;
    }

    .product-info-badge {
      position: absolute;
      top: 1rem;
      right: 1rem;
      background: var(--orange-90);
      color: var(--secondary-blue);
      padding: 0.25rem 0.75rem;
      border-radius: 1rem;
      font-size: 0.875rem;
      font-weight: 600;
      transform: translateY(-20px);
      opacity: 0;
      transition: all 0.3s ease;
    }

    .product-card:hover .product-info-badge {
      transform: translateY(0);
      opacity: 1;
    }

    .cart-animation {
      position: fixed;
      width: 20px;
      height: 20px;
      background: var(--primary-orange);
      border-radius: 50%;
      pointer-events: none;
      z-index: 9999;
    }

    .service-topic-swiper-container {
        transition: outline-color 0.3s ease, box-shadow 0.3s ease;
        outline: 2px solid transparent;
        border-radius: 1rem;
        /* To make space for the glow effect */
        margin: 0 -4px;
        padding: 0 4px;
    }

    .service-topic-swiper-container.is-focused {
        outline-color: var(--primary-orange);
        box-shadow: 0 0 25px -5px var(--shadow-orange-60);
    }

    /* Style for service tags inside swipers for uniform layout */
    .services-swiper .swiper-slide .service-tag,
    .sub-swiper-container .swiper-slide .service-tag {
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        text-align: center;
        white-space: normal;
        min-height: 48px;
    }

.image-modal-overlay {
    background: var(--black-70);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.3s;
}
.image-modal-overlay.hidden {
    opacity: 0;
    pointer-events: none;
}
.image-modal {
    transform: scale(0.9);
    opacity: 0;
    transition: all 0.3s cubic-bezier(0.4,0,0.2,1);
}
.image-modal.show {
    transform: scale(1);
    opacity: 1;
    animation: modalIn 0.4s cubic-bezier(0.4,0,0.2,1);
}
@keyframes modalIn {
    0% { transform: scale(0.9) translateY(40px); opacity: 0; }
    100% { transform: scale(1) translateY(0); opacity: 1; }
}
#image-modal-close {
    background: none;
    border: none;
    cursor: pointer;
    transition: color 0.2s;
}
#image-modal-close:hover {
    color: var(--primary-orange);
}
@media (max-width: 600px) {
    .image-modal {
        max-width: 95vw;
        padding: 1rem;
    }
    #modal-image {
        max-height: 40vh;
    }
}

/* Custom Scrollbar for deadline list */
.custom-scrollbar::-webkit-scrollbar {
  width: 8px;
}
.custom-scrollbar::-webkit-scrollbar-track {
  background: var(--secondary-blue);
  border-radius: 10px;
}
.custom-scrollbar::-webkit-scrollbar-thumb {
  background-color: var(--primary-orange);
  border-radius: 10px;
  border: 2px solid var(--secondary-blue);
}
.custom-scrollbar::-webkit-scrollbar-thumb:hover {
  background-color: var(--primary-orange);
  opacity: 0.8;
}

/* Prose styling for event details */
.prose-styling p {
  margin-bottom: 1rem;
  line-height: 1.7;
}
.prose-styling h1, .prose-styling h2, .prose-styling h3, .prose-styling h4, .prose-styling h5, .prose-styling h6 {
  color: var(--primary-orange);
  margin-bottom: 0.75rem;
  margin-top: 1.5rem;
  font-weight: bold;
}
.prose-styling h1 { font-size: 1.875rem; }
.prose-styling h2 { font-size: 1.5rem; }
.prose-styling h3 { font-size: 1.25rem; }

.prose-styling a {
  color: var(--primary-orange);
  text-decoration: underline;
  transition: color 0.2s;
}
.prose-styling a:hover {
  color: var(--text-yellow);
}

.prose-styling ul, .prose-styling ol {
  margin-left: 1.5rem;
  margin-bottom: 1rem;
}
.prose-styling ul {
  list-style-type: disc;
}
.prose-styling ol {
  list-style-type: decimal;
}

.prose-styling li {
  margin-bottom: 0.5rem;
}

.prose-styling strong {
  color: var(--white);
}
    .file-upload {
      position: relative;
      overflow: hidden;
    }
    .file-upload input[type="file"] {
      position: absolute;
      top: 0;
      right: 0;
      min-width: 100%;
      min-height: 100%;
      opacity: 0;
      cursor: pointer;
    }


    .select2-container{
      width: 100% !important;
    }
    .select2-search__field{
      color: var(--secondary-blue) !important;
    }

    .iti__tel-input{
      padding-left: 100px !important;

    }


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

@keyframes float-delayed {
  0%, 100% { transform: translateY(0px) rotate(0deg); }
  50% { transform: translateY(-15px) rotate(-180deg); }
}

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

.animate-float-delayed {
  animation: float-delayed 8s ease-in-out infinite;
  animation-delay: 2s;
}

.hero-slider {
  --swiper-theme-color: var(--primary-orange);
  --swiper-navigation-size: 20px;
}

.hero-slider .swiper-slide.swiper-slide-active .slide-bg img {
  transform: scale(100%);
}

.swiper-pagination-custom .swiper-pagination-bullet {
  width: 12px;
  height: 12px;
  background: var(--white-30);
  border-radius: 50%;
  transition: all 0.3s ease;
  cursor: pointer;
  border: 2px solid transparent;
}

.swiper-pagination-custom .swiper-pagination-bullet-active {
  background: var(--primary-orange);
  border-color: var(--white-50);
  transform: scale(1.2);
}

.slide-content-enter {
  opacity: 0;
  transform: translateY(50px);
}

.slide-content-enter-active {
  opacity: 1;
  transform: translateY(0);
  transition: all 0.8s ease-out;
}





















/* newwwwwww */
        /* Cosmic theme styles */
        .cosmic-text {
            /* Primary gradient effect */
            background: var(--bg-orange-gradient-45);
            background-size: 400% 400%;
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            
            /* Fallback color for browsers that don't support background-clip */
            color: var(--primary-orange);
            
            /* Text rendering improvements */
            text-shadow: 0 0 20px var(--orange-50);
            animation: cosmic-gradient 4s ease-in-out infinite;
            
            /* Ensure text is not cut off */
            line-height: 1.3;
            word-wrap: break-word;
            overflow-wrap: break-word;
            white-space: normal;
            
            /* Container improvements */
            display: block;
            width: 100%;
            max-width: 100%;
            overflow: visible;
            
            /* Prevent text clipping */
            padding: 0.1em 0;
            margin: 0;
        }

        /* Enhanced fallback for browsers that don't support background-clip */
        @supports not (-webkit-background-clip: text) {
            .cosmic-text {
                background: none;
                color: var(--primary-orange);
                text-shadow: 0 0 20px var(--orange-50);
                -webkit-text-fill-color: initial;
            }
        }

        /* Additional fallback for older browsers */
        @supports not (background-clip: text) {
            .cosmic-text {
                background: none;
                color: var(--primary-orange);
                text-shadow: 0 0 20px var(--orange-50);
                -webkit-text-fill-color: initial;
            }
        }

        @keyframes cosmic-gradient {
            0%, 100% { background-position: 0% 50%; }
            50% { background-position: 100% 50%; }
        }

        /* Gradient definitions */
        .bg-gradient-radial {
            background: radial-gradient(circle, var(--tw-gradient-stops));
        }

        /* Animation keyframes */
        @keyframes spin-slow {
            from { transform: rotate(0deg); }
            to { transform: rotate(360deg); }
        }

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

        @keyframes spin-very-slow {
            from { transform: rotate(0deg); }
            to { transform: rotate(360deg); }
        }

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

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

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

        @keyframes pulse-glow {
            0%, 100% { box-shadow: 0 0 20px var(--orange-50); }
            50% { box-shadow: 0 0 40px var(--orange-80), 0 0 60px var(--orange-40), 0 0 30px rgba(162, 155, 254, 0.3); }
        }

@keyframes twinkle {
            0%, 100% { opacity: 0.3; }
            50% { opacity: 1; }
        }

        @keyframes nebula-drift {
            0% { transform: translateX(0) translateY(0); }
            25% { transform: translateX(10px) translateY(-5px); }
            50% { transform: translateX(-5px) translateY(-10px); }
            75% { transform: translateX(-10px) translateY(5px); }
            100% { transform: translateX(0) translateY(0); }
        }

        @keyframes orbit-glow {
            0%, 100% { 
                border-color: var(--orange-20);
                box-shadow: 0 0 10px var(--orange-10);
            }
            50% { 
                border-color: var(--orange-60);
                box-shadow: 0 0 30px var(--orange-30);
            }
        }

        @keyframes constellation-appear {
            0% { 
                opacity: 0; 
                transform: translateY(30px) scale(0.8); 
            }
            100% { 
                opacity: 1; 
                transform: translateY(0) scale(1); 
            }
        }

        @keyframes stellar-rotation {
            0% { transform: rotate(0deg) scale(1); }
            25% { transform: rotate(90deg) scale(1.1); }
            50% { transform: rotate(180deg) scale(1); }
            75% { transform: rotate(270deg) scale(1.1); }
            100% { transform: rotate(360deg) scale(1); }
        }

        @keyframes vision-waves {
            0% { 
                background-position: 0% 50%;
                opacity: 0.3;
            }
            50% { 
                background-position: 100% 50%;
                opacity: 0.7;
            }
            100% { 
                background-position: 0% 50%;
                opacity: 0.3;
            }
        }

        @keyframes shooting-star {
            0% { 
                transform: translateX(-100px) translateY(-100px);
                opacity: 0;
            }
            10% { opacity: 1; }
            90% { opacity: 1; }
            100% { 
                transform: translateX(300px) translateY(300px);
                opacity: 0;
            }
        }

        @keyframes planet-atmosphere {
            0%, 100% { 
                transform: scale(1);
                opacity: 0.3;
            }
            50% { 
                transform: scale(1.2);
                opacity: 0.6;
            }
        }

        @keyframes purple-glow {
            0%, 100% { 
                box-shadow: 0 0 20px rgba(162, 155, 254, 0.3);
            }
            50% { 
                box-shadow: 0 0 40px rgba(162, 155, 254, 0.6), 0 0 60px rgba(162, 155, 254, 0.2);
            }
        }

        /* Animation classes */
        .animate-spin-slow {
            animation: spin-slow 30s linear infinite;
        }

        .animate-spin-reverse {
            animation: spin-reverse 25s linear infinite;
        }

        .animate-spin-very-slow {
            animation: spin-very-slow 40s linear infinite;
        }

        .animate-spin-slower {
            animation: spin-slower 35s linear infinite;
        }

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

        .animate-float-delay {
            animation: float-delay 8s ease-in-out infinite 2s;
        }

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

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

        .animate-nebula-drift {
            animation: nebula-drift 12s ease-in-out infinite;
        }

        .animate-orbit-glow {
            animation: orbit-glow 4s ease-in-out infinite;
        }

        .animate-constellation-appear {
            animation: constellation-appear 1s ease-out forwards;
        }

        .animate-stellar-rotation {
            animation: stellar-rotation 8s ease-in-out infinite;
        }

        .animate-shooting-star {
            animation: shooting-star 3s linear infinite;
        }

        .animate-planet-atmosphere {
            animation: planet-atmosphere 3s ease-in-out infinite;
        }

        /* Star field styling */
        .stars {
            position: absolute;
            width: 100%;
            height: 100%;
            overflow: hidden;
        }

        .star {
            position: absolute;
            background: white;
            border-radius: 50%;
            animation: twinkle 3s ease-in-out infinite;
        }

        .star:nth-child(odd) {
            animation-delay: 1s;
        }

        .star:nth-child(3n) {
            animation-delay: 2s;
            background: var(--orange-80);
        }

        .star:nth-child(5n) {
            animation-delay: 0.5s;
            background: rgba(162, 155, 254, 0.8);
        }

        .star:nth-child(5n) {
            animation-delay: 0.5s;
            background: rgba(162, 155, 254, 0.8);
        }

        /* Vision waves effect */
        .vision-waves {
            background: linear-gradient(-45deg, 
                var(--orange-10), 
                rgba(233, 30, 99, 0.2), 
                var(--orange-10), 
                rgba(162, 155, 254, 0.2)
            );
            background-size: 400% 400%;
            animation: vision-waves 8s ease-in-out infinite;
        }

        /* Enhanced planet card styling */
        .planet-card {
            position: relative;
            backdrop-filter: blur(10px);
            border: 2px solid var(--orange-30);
            transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
        }

        .planet-card:hover {
            transform: scale(1.15) translateZ(20px);
            border-color: var(--orange-80);
            box-shadow: 
                0 0 30px var(--orange-40),
                0 10px 40px var(--shadow-black-30);
        }

        .planet-card::before {
            content: '';
            position: absolute;
            inset: -2px;
            background: linear-gradient(45deg, 
                var(--orange-20), 
                var(--transparent), 
                var(--orange-20)
            );
            border-radius: inherit;
            opacity: 0;
            transition: opacity 0.3s ease;
            z-index: -1;
        }

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

        /* Constellation card enhancements */
        .constellation-card {
            backdrop-filter: blur(15px);
            border: 1px solid var(--white-10);
            position: relative;
            overflow: hidden;
        }

        .constellation-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, 
                var(--transparent), 
                var(--orange-10), 
                var(--transparent)
            );
            transition: left 0.5s ease;
        }

        .constellation-card:hover::before {
            left: 100%;
        }

        .constellation-card:hover {
            border-color: var(--orange-50);
            transform: translateY(-8px);
            box-shadow: 
                0 20px 40px var(--shadow-black-30),
                0 0 20px var(--shadow-orange-20);
        }

        /* Stellar icon effects */
        .stellar-icon {
            position: relative;
            overflow: hidden;
        }

        .stellar-icon::after {
            content: '';
            position: absolute;
            top: -50%;
            left: -50%;
            width: 200%;
            height: 200%;
            background: linear-gradient(45deg, 
                var(--transparent), 
                var(--white-10), 
                var(--transparent)
            );
            transform: rotate(45deg);
            transition: transform 0.6s ease;
        }

        .constellation-card:hover .stellar-icon::after {
            transform: rotate(45deg) translateX(100%);
        }

        /* Central sun styling */
        .central-sun {
            position: relative;
            z-index: 10;
        }

        .central-sun::before {
            content: '';
            position: absolute;
            inset: -10px;
            background: radial-gradient(circle, 
                var(--orange-30) 0%, 
                rgba(233, 30, 99, 0.2) 30%, 
                var(--transparent) 70%
            );
            border-radius: 50%;
            animation: planet-atmosphere 4s ease-in-out infinite;
        }

        .central-sun::after {
            content: '';
            position: absolute;
            inset: -20px;
            background: radial-gradient(circle, 
                var(--orange-10) 0%, 
                var(--transparent) 50%
            );
            border-radius: 50%;
            animation: planet-atmosphere 6s ease-in-out infinite reverse;
        }

        /* Orbit ring styling */
        .orbit-ring {
            border: 1px solid var(--orange-20);
            border-radius: 50%;
            animation: orbit-glow 5s ease-in-out infinite;
        }

        /* Service planet orbital paths */
        .service-planet {
            z-index: 5;
        }

        /* Shooting star trails */
        .shooting-star {
            position: absolute;
            width: 2px;
            height: 2px;
            background: white;
            border-radius: 50%;
            animation: shooting-star 4s linear infinite;
        }

        .shooting-star::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 50px;
            height: 1px;
            background: linear-gradient(90deg, 
                rgba(255, 255, 255, 0.8), 
                transparent
            );
            transform: translateX(-50px);
        }

        .shooting-star:nth-child(2) {
            animation-delay: 2s;
            background: var(--orange-80);
        }

        .shooting-star:nth-child(2)::before {
            background: linear-gradient(90deg, 
                var(--orange-80), 
                var(--transparent)
            );
        }

        .shooting-star:nth-child(3) {
            animation-delay: 1.5s;
            background: rgba(162, 155, 254, 0.8);
        }

        .shooting-star:nth-child(3)::before {
            background: linear-gradient(90deg, 
                rgba(162, 155, 254, 0.8), 
                var(--transparent)
            );
        }

        /* Space card hover effects */
        .space-card img {
            transition: all 0.5s ease;
        }

        .space-card:hover img {
            transform: scale(1.05) rotateY(5deg);
            filter: brightness(1.1) contrast(1.1);
        }

        /* Vision eye enhancement */
        .vision-eye {
            position: relative;
            backdrop-filter: blur(10px);
        }

        .vision-eye::before {
            content: '';
            position: absolute;
            inset: -5px;
            background: linear-gradient(45deg, 
                rgba(255, 255, 255, 0.2), 
                transparent, 
                rgba(255, 255, 255, 0.2)
            );
            border-radius: 50%;
            animation: stellar-rotation 10s linear infinite;
        }

        /* Responsive adjustments */
        @media (max-width: 768px) {
            .solar-system {
                min-height: 600px;
            }
            
            .orbit-ring {
                width: 300px !important;
                height: 300px !important;
            }
            
            .orbit-ring:last-child {
                width: 450px !important;
                height: 450px !important;
            }
            
            .central-sun {
                width: 100px;
                height: 100px;
            }
            
            .service-planet .planet-card {
                width: 80px;
                height: 80px;
                padding: 12px;
            }
            
            .service-planet .planet-card i {
                width: 20px;
                height: 20px;
            }
            
            .service-planet .planet-card span {
                font-size: 10px;
            }
        }

        @media (max-width: 480px) {
            .orbit-ring {
                width: 250px !important;
                height: 250px !important;
            }
            
            .orbit-ring:last-child {
                width: 350px !important;
                height: 350px !important;
            }
            
            .central-sun {
                width: 80px;
                height: 80px;
            }
            
            .service-planet .planet-card {
                width: 60px;
                height: 60px;
                padding: 8px;
            }
        }

        /* Performance optimizations */
        .orbit-ring,
        .planet-card,
        .constellation-card,
        .stellar-icon {
            will-change: transform;
        }

        /* Accessibility improvements */
        @media (prefers-reduced-motion: reduce) {
            .animate-spin-slow,
            .animate-spin-reverse,
            .animate-spin-very-slow,
            .animate-spin-slower,
            .animate-float,
            .animate-float-delay,
            .animate-twinkle,
            .animate-nebula-drift,
            .animate-stellar-rotation,
            .animate-shooting-star,
            .animate-planet-atmosphere {
                animation-duration: 0.01ms !important;
                animation-iteration-count: 1 !important;
            }
        }

        /* High contrast mode support */
        @media (prefers-contrast: high) {
            .planet-card,
            .constellation-card {
                border-width: 3px;
                border-color: var(--primary-orange);
            }
            
            .cosmic-text {
                -webkit-text-fill-color: var(--primary-orange);
                text-shadow: none;
            }
        }

/* --- Service Timeline Redesign --- */
.service-timeline {
    position: relative;
    width: 100%;
    margin: 6rem 0;
    padding: 3rem 0;
}

.timeline-line {
    position: relative;
    height: 12px;
    border-radius: 6px;
    background: var(--bg-orange-gradient-90);
    box-shadow: 0 4px 16px 0 var(--shadow-orange-20);
    margin: 0;
}

.service-card {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    opacity: 0;
    animation: service-card-fade-in 0.8s ease-out forwards;
}

/* Desktop Layout (xl and above - 1280px+) */
.card-desktop-1 { left: 5%; transform: translateY(-50%) translateX(-50%); }
.card-desktop-2 { left: 35%; transform: translateY(-50%) translateX(-50%); }
.card-desktop-3 { left: 65%; transform: translateY(-50%) translateX(-50%); }
.card-desktop-4 { left: 95%; transform: translateY(-50%) translateX(-50%); }

/* RTL Desktop Layout */
[dir="rtl"] .card-desktop-1 { left: 95%; transform: translateY(-50%) translateX(-50%); }
[dir="rtl"] .card-desktop-2 { left: 65%; transform: translateY(-50%) translateX(-50%); }
[dir="rtl"] .card-desktop-3 { left: 35%; transform: translateY(-50%) translateX(-50%); }
[dir="rtl"] .card-desktop-4 { left: 5%; transform: translateY(-50%) translateX(-50%); }

/* Timeline 2 Desktop (3 cards) */
.service-timeline:nth-child(2) .card-desktop-1 { left: 15%; transform: translateY(-50%) translateX(-50%); }
.service-timeline:nth-child(2) .card-desktop-2 { left: 50%; transform: translateY(-50%) translateX(-50%); }
.service-timeline:nth-child(2) .card-desktop-3 { left: 85%; transform: translateY(-50%) translateX(-50%); }

/* RTL Timeline 2 Desktop (3 cards) */
[dir="rtl"] .service-timeline:nth-child(2) .card-desktop-1 { left: 85%; transform: translateY(-50%) translateX(-50%); }
[dir="rtl"] .service-timeline:nth-child(2) .card-desktop-2 { left: 50%; transform: translateY(-50%) translateX(-50%); }
[dir="rtl"] .service-timeline:nth-child(2) .card-desktop-3 { left: 15%; transform: translateY(-50%) translateX(-50%); }

/* Timeline 3 Desktop (2 cards) */
.service-timeline:nth-child(3) .card-desktop-1 { left: 25%; transform: translateY(-50%) translateX(-50%); }
.service-timeline:nth-child(3) .card-desktop-2 { left: 75%; transform: translateY(-50%) translateX(-50%); }

/* RTL Timeline 3 Desktop (2 cards) */
[dir="rtl"] .service-timeline:nth-child(3) .card-desktop-1 { left: 75%; transform: translateY(-50%) translateX(-50%); }
[dir="rtl"] .service-timeline:nth-child(3) .card-desktop-2 { left: 25%; transform: translateY(-50%) translateX(-50%); }

/* Tablet Layout (lg to xl - 1024px to 1280px) */
.card-tablet-1 { left: 15%; transform: translateY(-50%) translateX(-50%); }
.card-tablet-2 { left: 50%; transform: translateY(-50%) translateX(-50%); }
.card-tablet-3 { left: 85%; transform: translateY(-50%) translateX(-50%); }

/* RTL Tablet Layout */
[dir="rtl"] .card-tablet-1 { left: 85%; transform: translateY(-50%) translateX(-50%); }
[dir="rtl"] .card-tablet-2 { left: 50%; transform: translateY(-50%) translateX(-50%); }
[dir="rtl"] .card-tablet-3 { left: 15%; transform: translateY(-50%) translateX(-50%); }

/* Timeline 2 Tablet (3 cards) */
.service-timeline:nth-child(2) .card-tablet-1 { left: 15%; transform: translateY(-50%) translateX(-50%); }
.service-timeline:nth-child(2) .card-tablet-2 { left: 50%; transform: translateY(-50%) translateX(-50%); }
.service-timeline:nth-child(2) .card-tablet-3 { left: 85%; transform: translateY(-50%) translateX(-50%); }

/* RTL Timeline 2 Tablet (3 cards) */
[dir="rtl"] .service-timeline:nth-child(2) .card-tablet-1 { left: 85%; transform: translateY(-50%) translateX(-50%); }
[dir="rtl"] .service-timeline:nth-child(2) .card-tablet-2 { left: 50%; transform: translateY(-50%) translateX(-50%); }
[dir="rtl"] .service-timeline:nth-child(2) .card-tablet-3 { left: 15%; transform: translateY(-50%) translateX(-50%); }

/* Timeline 3 Tablet (2 cards) */
.service-timeline:nth-child(3) .card-tablet-1 { left: 25%; transform: translateY(-50%) translateX(-50%); }
.service-timeline:nth-child(3) .card-tablet-2 { left: 75%; transform: translateY(-50%) translateX(-50%); }

/* RTL Timeline 3 Tablet (2 cards) */
[dir="rtl"] .service-timeline:nth-child(3) .card-tablet-1 { left: 75%; transform: translateY(-50%) translateX(-50%); }
[dir="rtl"] .service-timeline:nth-child(3) .card-tablet-2 { left: 25%; transform: translateY(-50%) translateX(-50%); }

/* Mobile Layout (below lg - under 1024px) */
.card-mobile-1 { left: 15% !important; transform: translateY(-50%) translateX(-50%); }
.card-mobile-2 { left: 65% !important; transform: translateY(-50%) translateX(-50%); }

/* RTL Mobile Layout */
[dir="rtl"] .card-mobile-1 { left: 65%; transform: translateY(-50%) translateX(-50%); }
[dir="rtl"] .card-mobile-2 { left: 15%; transform: translateY(-50%) translateX(-50%); }

/* Timeline 2 Mobile (2 cards) */
.service-timeline:nth-child(2) .card-mobile-1 { left: 15%; transform: translateY(-50%) translateX(-50%); }
.service-timeline:nth-child(2) .card-mobile-2 { left: 65%; transform: translateY(-50%) translateX(-50%); }

/* RTL Timeline 2 Mobile (2 cards) */
[dir="rtl"] .service-timeline:nth-child(2) .card-mobile-1 { left: 65%; transform: translateY(-50%) translateX(-50%); }
[dir="rtl"] .service-timeline:nth-child(2) .card-mobile-2 { left: 15%; transform: translateY(-50%) translateX(-50%); }

/* Timeline 3 Mobile (2 cards) */
.service-timeline:nth-child(3) .card-mobile-1 { left: 15%; transform: translateY(-50%) translateX(-50%); }
.service-timeline:nth-child(3) .card-mobile-2 { left: 65%; transform: translateY(-50%) translateX(-50%); }

/* RTL Timeline 3 Mobile (2 cards) */
[dir="rtl"] .service-timeline:nth-child(3) .card-mobile-1 { left: 65%; transform: translateY(-50%) translateX(-50%); }
[dir="rtl"] .service-timeline:nth-child(3) .card-mobile-2 { left: 15%; transform: translateY(-50%) translateX(-50%); }

.card-content {
    background: var(--bg-blue-gradient);
    border: 3px solid var(--orange-30);
    border-radius: 16px;
    width: 180px;
    height: 190px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    box-shadow: 0 8px 32px 0 var(--shadow-blue-30);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
    position: relative;
    backdrop-filter: blur(10px);
    padding: 1.2rem 1rem;
    overflow: hidden;
}

.card-content::before {
    content: '';
    position: absolute;
    inset: -2px;
    background: var(--bg-orange-gradient-90);
    border-radius: 18px;
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: -1;
}

.card-content:hover::before,
.card-content:focus::before {
    opacity: 0.3;
}

.card-content:hover,
.card-content:focus {
    transform: scale(1.1) translateY(-15px);
    border-color: var(--primary-orange);
    box-shadow: 0 20px 60px 0 var(--shadow-orange-40);
    outline: none;
}

.card-content i {
    margin-bottom: 0.6rem;
    transition: transform 0.3s ease;
    flex-shrink: 0;
    width: 32px !important;
    height: 32px !important;
    min-width: 32px;
    min-height: 32px;
}

.card-content:hover i {
    transform: scale(1.2);
    filter: drop-shadow(0 0 8px currentColor);
}

.card-content span {
    color: var(--white);
    font-size: 0.9rem;
    font-weight: 600;
    text-align: center;
    line-height: 1.2;
    letter-spacing: 0.01em;
    margin-bottom: 0.4rem;
    flex-shrink: 0;
    text-shadow: 0 1px 2px var(--shadow-black-30);
    transition: all 0.3s ease;
}

.card-content:hover span {
    color: var(--primary-orange);
    text-shadow: 0 0 8px var(--orange-30);
}

.card-content p {
    color: var(--white-80);
    font-size: 0.7rem;
    text-align: center;
    line-height: 1.3;
    margin: 0;
    font-weight: 400;
    opacity: 0.9;
    transition: all 0.3s ease;
    max-width: 100%;
    /* overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    text-overflow: ellipsis;
    max-height: 3.9em; */
}
.card-content .text-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    max-width: 100%;
}

.card-content .show-more-btn {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 0.65rem;
    padding: 0.2rem 0;
    margin-top: 0.3rem;
    transition: all 0.3s ease;
    text-decoration: none;
    outline: none;
}

.card-content .show-more-btn:hover {
    text-decoration: underline;
    transform: translateY(-1px);
}
.card-content:hover p {
    opacity: 1;
    color: var(--white-95);
    transform: translateY(-1px);
}

/* Timeline 2 specific colors */
.service-timeline:nth-child(2) .timeline-line {
    background: linear-gradient(90deg, var(--timeline-blue), var(--timeline-green), var(--timeline-purple));
}

.service-timeline:nth-child(2) .card-content {
    border-color: rgba(59, 130, 246, 0.3);
}

.service-timeline:nth-child(2) .card-content:hover {
    border-color: var(--timeline-blue);
    box-shadow: 0 20px 60px 0 rgba(59, 130, 246, 0.4);
}

/* Timeline 3 specific colors */
.service-timeline:nth-child(3) .timeline-line {
    background: linear-gradient(90deg, var(--timeline-pink), var(--timeline-yellow), var(--timeline-cyan));
}

.service-timeline:nth-child(3) .card-content {
    border-color: rgba(236, 72, 153, 0.3);
}

.service-timeline:nth-child(3) .card-content:hover {
    border-color: var(--timeline-pink);
    box-shadow: 0 20px 60px 0 rgba(236, 72, 153, 0.4);
}

/* Animation keyframes */
@keyframes service-card-fade-in {
    from {
        opacity: 0;
        transform: translateY(-50%) scale(0.5);
    }
    to {
        opacity: 1;
        transform: translateY(-50%) scale(1);
    }
}

/* Responsive design */
@media (max-width: 1280px) {
    .service-timeline {
        margin: 4rem 0;
        padding: 2rem 0;
    }
    
    .timeline-line {
        height: 10px;
    }
    
    .card-content {
        width: 160px;
        height: 160px;
        padding: 1rem 0.8rem;
    }
    
    .card-content i {
        width: 28px !important;
        height: 28px !important;
        min-width: 28px;
        min-height: 28px;
        margin-bottom: 0.5rem;
    }
    
    .card-content span {
        font-size: 0.85rem;
        margin-bottom: 0.3rem;
    }
    
    .card-content p {
        font-size: 0.7rem;
        -webkit-line-clamp: 3;
        max-height: 3.9em;
    }
}

@media (max-width: 1024px) {
    .service-timeline {
        margin: 3rem 0;
        padding: 1.5rem 0;
    }
    
    .timeline-line {
        height: 8px;
    }
    
    .card-content {
        width: 140px;
        height: 120px;
        padding: 0.8rem 0.6rem;
    }
    
    .card-content i {
        width: 24px !important;
        height: 24px !important;
        min-width: 24px;
        min-height: 24px;
        margin-bottom: 0.4rem;
    }
    
    .card-content span {
        font-size: 0.8rem;
        margin-bottom: 0.25rem;
    }
    
    .card-content p {
        font-size: 0.65rem;
        line-height: 1.3;
        -webkit-line-clamp: 3;
        max-height: 3.9em;
    }
}

@media (max-width: 768px) {
    .service-timeline {
        margin: 2rem 0;
        padding: 1rem 0;
    }
    
    .timeline-line {
        height: 6px;
    }
    
    .card-content {
        width: 120px;
        height: 140px;
        padding: 0.7rem 0.5rem;
    }
    
    .card-content i {
        width: 22px !important;
        height: 22px !important;
        min-width: 22px;
        min-height: 22px;
        margin-bottom: 0.4rem;
    }
    
    .card-content span {
        font-size: 0.75rem;
        margin-bottom: 0.3rem;
    }
    
    .card-content p {
        font-size: 0.6rem;
        line-height: 1.3;
        -webkit-line-clamp: 3;
        max-height: 3.9em;
    }
}

@media (max-width: 480px) {
    .service-timeline {
        margin: 1.5rem 0;
        padding: 0.75rem 0;
    }
    
    .timeline-line {
        height: 4px;
    }
    
    .card-content {
        width: 110px;
        height: 120px;
        padding: 0.6rem 0.4rem;
    }
    
    .card-content i {
        width: 20px !important;
        height: 20px !important;
        min-width: 20px;
        min-height: 20px;
        margin-bottom: 0.3rem;
    }
    
    .card-content span {
        font-size: 0.7rem;
        margin-bottom: 0.25rem;
    }
    
    .card-content p {
        font-size: 0.55rem;
        line-height: 1.3;
        -webkit-line-clamp: 3;
        max-height: 3.9em;
    }
}

@media (max-width: 320px) {
    .service-timeline {
        margin: 1rem 0;
        padding: 0.5rem 0;
    }
    
    .timeline-line {
        height: 3px;
    }
    
    .card-content {
        width: 100px;
        height: 110px;
        padding: 0.5rem 0.3rem;
    }
    
    .card-content i {
        width: 18px !important;
        height: 18px !important;
        min-width: 18px;
        min-height: 18px;
        margin-bottom: 0.25rem;
    }
    
    .card-content span {
        font-size: 0.65rem;
        margin-bottom: 0.2rem;
    }
    
    .card-content p {
        font-size: 0.5rem;
        line-height: 1.3;
        -webkit-line-clamp: 3;
        max-height: 3.9em;
    }
}

/* Add subtle background pattern */
.card-content::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: 
        radial-gradient(circle at 20% 20%, var(--shadow-orange-light) 0%, var(--transparent) 50%),
        radial-gradient(circle at 80% 80%, rgba(251, 176, 64, 0.03) 0%, var(--transparent) 50%);
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
}

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

/* Focus states for accessibility */
.card-content:focus {
    outline: 2px solid var(--primary-orange);
    outline-offset: 2px;
}

.card-content:focus-visible {
    outline: 2px solid var(--primary-orange);
    outline-offset: 2px;
}

/* .service-card .card-desktop-1{

} */

/* SVG Logo Animations for About Section */
.fade-out {
    opacity: 0;
    animation: fadeInUp 1.5s ease-out forwards;
    animation-delay: 0.5s;
}

.fade-down-logo {
    opacity: 0;
    animation: fadeInDown 2s ease-out forwards;
    animation-delay: 1s;
}

.fade-in-star {
    opacity: 0;
    animation: fadeInStar 1.5s ease-out forwards;
    animation-delay: 1.5s;
}

.fade-up-text {
    opacity: 0;
    animation: fadeInUp 2s ease-out forwards;
    animation-delay: 2s;
}

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

@keyframes fadeInDown {
    from {
        opacity: 0;
        transform: translateY(-30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeInStar {
    from {
        opacity: 0;
        transform: scale(0) rotate(180deg);
    }
    to {
        opacity: 1;
        transform: scale(1) rotate(0deg);
    }
}

/* Enhanced About Section Styling */
.space-card {
    position: relative;
    overflow: hidden;
}

.space-card::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, var(--orange-10) 0%, var(--transparent) 70%);
    animation: rotate 20s linear infinite;
    z-index: -1;
}

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

/* Logo container enhancements */
.space-card .relative {
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.space-card:hover .relative {
    transform: scale(1.02);
}

        .space-card:hover svg {
            filter: drop-shadow(0 0 20px var(--orange-30));
        }

/* Responsive logo sizing */
@media (max-width: 768px) {
    .fade-out {
        width: 300px !important;
    }
}

@media (max-width: 480px) {
    .fade-out {
        width: 250px !important;
    }
}

/* Responsive improvements for cosmic-text */
@media (max-width: 1024px) {
    .cosmic-text {
        font-size: 3.5rem !important;
        line-height: 1.2;
        word-break: break-word;
        padding: 0.15em 0;
    }
}

@media (max-width: 768px) {
    .cosmic-text {
        font-size: 2.5rem !important;
        line-height: 1.1;
        word-break: break-word;
        padding: 0.2em 0;
    }
}

@media (max-width: 480px) {
    .cosmic-text {
        font-size: 2rem !important;
        line-height: 1.1;
        word-break: break-word;
        padding: 0.25em 0;
    }
}

@media (max-width: 320px) {
    .cosmic-text {
        font-size: 1.75rem !important;
        line-height: 1.1;
        word-break: break-word;
        padding: 0.3em 0;
    }
}

/* Ensure containers don't clip cosmic-text */
.hero-content,
.text-center,
[class*="text-center"] {
    overflow: visible !important;
}

/* Force cosmic-text to be visible */
.cosmic-text {
    position: relative;
    z-index: 10;
}

/* Alternative approach for problematic browsers */
@media screen and (-webkit-min-device-pixel-ratio: 0) {
    .cosmic-text {
        /* Webkit-specific fixes */
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    }
}

/* JavaScript fallback for cosmic-text */
.cosmic-text-fallback {
    background: none !important;
    color: var(--primary-orange) !important;
    text-shadow: 0 0 20px var(--orange-50) !important;
    -webkit-text-fill-color: initial !important;
    background-clip: initial !important;
    -webkit-background-clip: initial !important;
}
/* whatsapp chat */
.hidden {
  display: none;
}
[dir="rtl"] .sticky-button {
  left: 20px;
  right: unset;
}
.sticky-button {
  position: fixed;
  background-color: var(--whatsapp-green);
  bottom: 20px;
  right: 20px;
  border-radius: 50px;
  box-shadow: 0 2px 5px 0 var(--shadow-black-10);
  z-index: 20;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 70px;
  height: 70px;
  -webkit-transition: all 0.2s ease-out;
  transition: all 0.2s ease-out;
}

.sticky-button svg {
  margin: auto;
  fill: var(--white);
  width: 50px;
  height: 50px;
}

.sticky-button a,
.sticky-button label {
  cursor: pointer;
  display: flex;
  align-items: center;
  width: 55px;
  height: 55px;
  -webkit-transition: all 0.3s ease-out;
  transition: all 0.3s ease-out;
}

.sticky-button label svg.close-icon {
  display: none;
}


.chat-menu:checked+.sticky-button label {
  -webkit-transform: rotate(360deg);
  transform: rotate(360deg);
}

.chat-menu:checked+.sticky-button label svg.chat-icon {
  display: none;
}

.chat-menu:checked+.sticky-button label svg.close-icon {
  display: table-cell;
}

.chat-menu:checked+.sticky-button+.sticky-chat {
  bottom: 90px;
  opacity: 1;
  visibility: visible;
}


/* end whatsaap chat */