/* Hero Section Container */
 .hero-section {
     position: relative;
     width: 100%;
     height: 95vh;
     /* Full viewport height */
     display: flex;
     flex-direction: column;
     justify-content: center;
     align-items: center;
     overflow: hidden;
     /* Hide any overflowing parallax elements */
     perspective: 1000px;
     /* For 3D transforms */
     background: linear-gradient(135deg, var(--dark-bg-color) 0%, #0c0f20 100%);
     /* Darker gradient */
     padding: 20px;
     /* Added padding for smaller screens */
     box-sizing: border-box;
     /* Include padding in element's total width and height */
 }

 /* Galaxy Canvas Styling */
 #galaxyCanvas {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     z-index: 0;
 }

 /* Geometric Background Shapes */
 .hero-bg-shape {
     position: absolute;
     opacity: 0.4;
     z-index: 0;
     transition: transform 0.5s ease-out;
     border-radius: 50%;
 }

 .hero-bg-shape.one {
     width: 350px;
     height: 350px;
     background: radial-gradient(circle, var(--accent-blue) 0%, rgba(15, 52, 96, 0.3) 70%, transparent 100%);
     top: -50px;
     left: -80px;
     animation: floatOne 15s ease-in-out infinite alternate;
 }

 .hero-bg-shape.two {
     width: 250px;
     height: 250px;
     background: radial-gradient(circle, var(--accent-purple) 0%, rgba(83, 52, 131, 0.3) 70%, transparent 100%);
     bottom: -70px;
     right: -100px;
     animation: floatTwo 18s ease-in-out infinite alternate;
 }

 .hero-bg-shape.three {
     width: 180px;
     height: 180px;
     background: radial-gradient(circle, var(--primary-cta) 0%, rgba(233, 69, 96, 0.3) 70%, transparent 100%);
     top: 20%;
     right: 15%;
     animation: floatOne 12s ease-in-out infinite alternate-reverse;
     border-radius: 20px;
     transform: rotate(45deg);
 }

 .hero-bg-shape.four {
     width: 120px;
     height: 120px;
     background: radial-gradient(circle, var(--text-muted) 0%, rgba(160, 160, 160, 0.2) 70%, transparent 100%);
     bottom: 10%;
     left: 10%;
     animation: floatTwo 10s ease-in-out infinite alternate-reverse;
     border-radius: 50%;
 }

 /* Keyframe Animations for Floating Shapes */
 @keyframes floatOne {
     0% {
         transform: translateY(0px) translateX(0px);
     }

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

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

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

 /* Hero Content Styling */
 .hero-content {
     position: relative;
     z-index: 1;
     text-align: center;
     max-width: 900px;
     padding: 20px;
     transform-style: preserve-3d;
     transition: transform 0.3s ease-out;
     opacity: 0;
     animation: fadeInZoomIn 1s ease-out forwards;
     animation-delay: 0.5s;
 }

 .hero-content h1 {
     font-family: 'Poppins', sans-serif;
     font-size: 3em;
     /* Adjusted font size for desktop */
     margin-bottom: 15px;
     color: var(--text-light);
     text-shadow: 2px 2px 8px var(--shadow-dark-light);
     /* Darker shadow for light text */
     letter-spacing: -0.5px;
     /* Slightly tighter spacing */
     line-height: 1.2;
     /* Adjusted line height */
     transform: translateZ(80px);
 }

 .hero-content p {
     font-family: 'Roboto', sans-serif;
     font-size: 2em;
     /* Adjusted font size */
     margin-bottom: 40px;
     color: var(--text-muted);
     text-shadow: 1px 1px 4px var(--shadow-dark-light);
     opacity: 0.9;
     transform: translateZ(50px);
 }

 /* Call to Action Button */
 .cta-button {
     display: inline-block;
     background-color: var(--primary-cta);
     color: white;
     padding: 18px 40px;
     text-decoration: none;
     border-radius: 50px;
     font-size: 1.2em;
     font-weight: 700;
     letter-spacing: 0.5px;
     transition: all 0.3s ease;
     box-shadow: 0 8px 20px rgba(233, 69, 96, 0.3);
     /* Shadow adjusted for new CTA color */
     transform: translateZ(30px);
     border: none;
 }

 .cta-button:hover {
     background-color: var(--cta-hover);
     transform: translateZ(40px) scale(1.05);
     box-shadow: 0 12px 28px rgba(233, 69, 96, 0.4);
 }

 /* Service Icons Grid */
 .services-icons-grid {
     position: relative;
     z-index: 1;
     display: flex;
     flex-wrap: wrap;
     justify-content: center;
     gap: 30px;
     margin-top: 60px;
     max-width: 1200px;
     width: 90%;
     opacity: 0;
     animation: fadeInZoomIn 1s ease-out forwards;
     animation-delay: 0.8s;
 }

 .service-icon-link {
     text-decoration: none;
     color: inherit;
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: center;
     border-radius: 15px;
     transition: transform 0.3s ease, box-shadow 0.3s ease;
     transform-style: preserve-3d;
     will-change: transform;
     /* Added min-width for better control on very small screens */
     min-width: 90px;
 }

 .service-icon-item {
     background-color: var(--card-bg-dark);
     /* Card background on dark theme */
     border-radius: 15px;
     padding: 20px;
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: center;
     width: 120px;
     height: 120px;
     box-shadow: 0 5px 15px var(--shadow-dark-light);
     color: var(--text-light);
     /* Icon text color */
     border: 1px solid var(--card-border-dark);
     /* Subtle border */
     box-sizing: border-box;
 }

 .service-icon-link:hover .service-icon-item {
     transform: translateY(-10px) translateZ(15px);
     box-shadow: 0 10px 25px var(--shadow-dark-medium);
     background-color: rgba(255, 255, 255, 0.15);
     /* Slightly less transparent on hover */
 }

 .service-icon-item svg {
     width: 50px;
     height: 50px;
     fill: var(--primary-cta);
     /* Icons in CTA color */
     margin-bottom: 10px;
 }

 .service-icon-item span {
     font-size: 0.9em;
     font-weight: 600;
     color: var(--text-light);
     text-align: center;
 }

 /* Keyframe for general fade-in and zoom effect */
 @keyframes fadeInZoomIn {
     0% {
         opacity: 0;
         transform: scale(0.9) translateY(20px);
     }

     100% {
         opacity: 1;
         transform: scale(1) translateY(0);
     }
 }

 /* Responsive Adjustments */
 @media (max-width: 992px) {
     .hero-content h1 {
         font-size: 2.2em;
         /* Smaller on tablets */
     }

     .hero-content p {
         font-size: 1.2em;
     }

     .services-icons-grid {
         gap: 25px;
         width: 95%;
         /* Increased width for better spacing */
     }

     .service-icon-item {
         width: 100px;
         height: 100px;
         padding: 15px;
     }

     .service-icon-item svg {
         width: 40px;
         height: 40px;
     }
 }

 @media (max-width: 768px) {
     .hero-content h1 {
         font-size: 1.8em;
         /* Smaller on medium mobiles */
     }

     .hero-content p {
         font-size: 1em;
         margin-bottom: 30px;
     }

     .cta-button {
         padding: 15px 30px;
         font-size: 1.1em;
     }

     .services-icons-grid {
         gap: 20px;
         margin-top: 40px;
         width: 95%;
         /* Keep increased width */
     }

     .service-icon-item {
         width: 90px;
         height: 90px;
         padding: 10px;
     }

     .service-icon-item svg {
         width: 35px;
         height: 35px;
     }

     .service-icon-item span {
         font-size: 0.8em;
     }

     /* Adjust background shapes for smaller screens */
     .hero-bg-shape.one {
         width: 250px;
         height: 250px;
         top: -30px;
         left: -50px;
     }

     .hero-bg-shape.two {
         width: 180px;
         height: 180px;
         bottom: -50px;
         right: -70px;
     }

     .hero-bg-shape.three {
         width: 120px;
         height: 120px;
         top: 15%;
         right: 10%;
     }

     .hero-bg-shape.four {
         width: 80px;
         height: 80px;
         bottom: 5%;
         left: 5%;
     }
 }

 @media (max-width: 480px) {
     .hero-content h1 {
         font-size: 1.5em;
         /* Even smaller on small mobiles */
         letter-spacing: -0.2px;
         /* Slight adjustment */
     }

     .hero-content p {
         font-size: 0.9em;
         margin-bottom: 25px;
     }

     .cta-button {
         padding: 12px 25px;
         font-size: 1em;
     }

     .services-icons-grid {
         justify-content: center;
         /* Centered for very small screens */
         gap: 15px;
         width: 100%;
         padding: 0 10px;
     }

     .service-icon-link {
         /* Ensures links don't get too small */
         flex-basis: calc(33% - 10px);
         /* 3 items per row, with gap */
         max-width: calc(33% - 10px);
     }

     .service-icon-item {
         width: 100%;
         /* Fill the flex-basis width */
         height: auto;
         /* Auto height for better adaptability */
         min-height: 75px;
         /* Minimum height to keep structure */
         padding: 10px;
     }

     .service-icon-item svg {
         width: 30px;
         height: 30px;
     }

     .service-icon-item span {
         font-size: 0.75em;
         /* Slightly larger for readability */
         white-space: nowrap;
         /* Prevent text wrap for short names */
     }

     /* Make background shapes less prominent or smaller on very small screens */
     .hero-bg-shape.one {
         width: 180px;
         height: 180px;
         top: -20px;
         left: -30px;
         opacity: 0.3;
     }

     .hero-bg-shape.two {
         width: 140px;
         height: 140px;
         bottom: -30px;
         right: -40px;
         opacity: 0.3;
     }

     .hero-bg-shape.three {
         display: none;
     }

     .hero-bg-shape.four {
         display: none;
     }
 }

 @media (max-width: 375px) {
     .service-icon-link {
         flex-basis: calc(50% - 10px);
         /* 2 items per row on very small screens */
         max-width: calc(50% - 10px);
     }

     .service-icon-item span {
         font-size: 0.7em;
     }
 }