* {
     margin: 0;
     padding: 0;
     box-sizing: border-box;
     font-family: 'Poppins', sans-serif;
 }

 body {
     user-select: none;
     /* Standard */
     -webkit-user-select: none;
     /* Chrome, Safari */
     -moz-user-select: none;
     /* Firefox */
     -ms-user-select: none;
     /* IE/Edge */
 }

 body {
     padding-top: 40px;
     margin: 0;
     padding: 0;
     overflow-x: hidden;
     /* make room for fixed header */
 }

 a {
     text-decoration: none;
     color: inherit;
 }

 /* ------------------- Top Navigation ------------------- */

 .top-nav {
     background: #002f6c;
     color: white;

     display: flex;
     justify-content: space-between;
     align-items: center;

     padding: 10px 50px;
     font-size: 15px;

     width: 100%;

     z-index: 1001;

     box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
     backdrop-filter: blur(5px);
 }

 /* Left: Slogan */
 .top-nav .nav-left .slogan {
     font-weight: 600;
     letter-spacing: 0.5px;
     font-size: 16px;
     text-transform: uppercase;
     animation: fadeIn 1s ease-out;
 }

 .top-nav .nav-left .slogan {
     font-weight: 600;
     transition: 0.4s;
 }

 .slogan:hover {
     transform: translateY(-4px) scale(1.05);
     text-shadow:
         0 5px 10px rgba(0, 0, 0, 0.3),
         0 0 10px #ff00d9,
         0 0 20px #002aff;
     color: #ff00d9;

 }


 .top-nav .nav-center {
     display: flex;
     gap: 12px;
 }

 /* Center: Social Icons */
 .top-nav .nav-center a {
     color: white;
     margin: 0 8px;
     font-size: 18px;
     transition: color 0.3s, transform 0.2s;
 }

 .top-nav .nav-center a:hover {
     color: #ff00d9;
     transform: translateY(-2px);
     text-shadow: 2px 2px 2px #002aff;
 }

 /* Right: Contact Info */
 .top-nav .nav-right {
     display: flex;
     gap: 12px;
     font-weight: 500;
 }

 .top-nav .nav-right a {
     color: white;
     transition: color 0.3s, transform 0.2s;
 }

 .top-nav .nav-right a:hover {
     color: #ff00d9;
     transform: translateY(-2px);
     text-shadow: 2px 2px 2px #002aff;

 }

 .top-nav .nav-right span {
     color: rgba(255, 255, 255, 0.7);
 }

 /* Fade-in animation */
 @keyframes fadeIn {
     from {
         opacity: 0;
         transform: translateY(-5px);
     }

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

 /* ------------------- Responsive ------------------- */
 @media (max-width: 768px) {
     .top-nav {
         flex-direction: column;
         padding: 12px 20px;
         gap: 6px;
         text-align: center;
     }

     .top-nav .nav-center {
         margin: 5px 0;
     }

     .top-nav .nav-right {
         flex-direction: column;
         gap: 4px;
     }

     .top-nav .nav-right span {
         display: none;
     }
 }

 /* Navbar 1 */
 .navbar-1 {
     display: flex;
     justify-content: space-between;
     align-items: center;
     padding: 12px 40px;
     background: white;
     color: rgb(94, 15, 241);
     position: sticky;
     top: 0;
     width: 100%;
     z-index: 100;
 }

 .navbar-1 .logo img {
     height: 70px;
 }

 .navbar-1 .menu {
     list-style: none;
     display: flex;
     align-items: center;
     gap: 20px;
     flex-wrap: wrap;


 }

 .navbar-1 .menu li {
     position: relative;
 }

 .navbar-1 .menu li a {
     text-decoration: none;
     color: #002f6c;
     font-weight: 500;
     padding: 8px 5px;
     display: flex;
     align-items: center;
     gap: 5px;
     transition: color 0.3s;
 }

 .navbar-1 .menu li a:hover {
     background-color: #ff00d9;
     color: white;
     border-radius: 5px;
 }

 .navbar-1 .menu li .dropdown {
     display: none;
     position: absolute;
     top: 40px;
     left: 0;
     background: rgba(52, 9, 194, 0.9);
     border-radius: 6px;
     list-style: none;
     padding: 8px 0;
     min-width: 180px;

     z-index: 9999;
 }

 .navbar-1 .menu li:hover .dropdown {
     display: block;
 }

 .navbar-1 .menu li .dropdown li a {
     display: block;
     padding: 8px 15px;
     color: white;
     font-weight: 400;
 }

 .navbar-1 .menu li .dropdown li a:hover {
     background: #ff00d9;
     color: white;
 }

 .navbar-1 .nav-log-btn p {
     background: #0d0db6;
     color: white;
     padding: 6px 12px;
     border-radius: 4px;
     font-weight: 600;
     cursor: pointer;
     transition: transform 0.2s;
 }

 .navbar-1 .nav-log-btn p:hover {
     transform: scale(1.1);
     background-color: #cb14af;
 }

 .navbar-1.shrink {
     padding: 6px 30px;
     box-shadow: 0 2px 15px rgba(0, 0, 0, 0.4);
 }

 /* Responsive */
 @media (max-width: 992px) {
     .navbar-1 {
         flex-direction: column;
         align-items: flex-start;
     }

     .navbar-1 .menu {
         flex-direction: column;
         width: 100%;
     }

     .navbar-1 .menu li .dropdown {
         position: relative;
         top: 0;
         left: 0;
     }
 }




 /* Default hidden */
 .animate-text {
     opacity: 0;
     transform: translateY(50px);
 }

 /* When slide active → animate */
 .slide.active .animate-text {
     animation: fadeUp 0.8s forwards;
 }

 /* Delays */
 .delay1 {
     animation-delay: 0.3s;
 }

 .delay2 {
     animation-delay: 0.6s;
 }

 /* Keyframe */
 @keyframes fadeUp {
     from {
         opacity: 0;
         transform: translateY(50px);
     }

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



 #scrollTopBtn {
     position: fixed;
     bottom: 30px;
     right: 30px;
     z-index: 3000;
     /* above everything */

     background: #ff00d9;
     color: white;
     border: none;
     padding: 12px 16px;
     font-size: 18px;

     cursor: pointer;

     display: none;
     /* hidden initially */
     transition: 0.3s;
 }

 #scrollTopBtn:hover {
     background: #c400a8;
     transform: translateY(-3px);
 }

 /* Hero Slider */

 .top-marquee {
     position: absolute;
     top: 0;
     width: 100%;
     background: #002f6c;
     color: #fff;
     overflow: hidden;
     z-index: 999;
     padding: 10px 0;
     text-decoration: none;
     cursor: pointer;
 }

 .marquee-track {
     display: flex;
     width: max-content;
     animation: smoothScroll 20s linear infinite;
 }

 .marquee-track span {
     white-space: nowrap;
     padding-right: 60px;
     font-size: 14px;
     font-weight: 500;
 }

 /* Smooth infinite scrolling */
 @keyframes smoothScroll {
     0% {
         transform: translateX(0);
     }

     100% {
         transform: translateX(-50%);
     }
 }

 /* Pause on hover */
 .top-marquee:hover .marquee-track {
     animation-play-state: paused;
 }

 /* Push slider down */
 .hero {
     position: relative;
     padding-top: 40px;
 }

 .hero {
     height: 700px;
     position: relative;
     overflow: visible;
     z-index: 1;

 }

 /* slides */

 .slide {
     position: absolute;
     width: 100%;
     height: 100%;
     opacity: 0;
     transition: 1s;
     pointer-events: none;
     z-index: 0;
 }

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

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

 /* overlay */

 .slide::before {
     content: "";
     position: absolute;
     width: 100%;
     height: 100%;
     pointer-events: none;
     background: linear-gradient(90deg,
             rgba(0, 0, 0, 0.7),
             rgba(0, 0, 0, 0.2));
 }

 /* hero content */

 .hero-content {
     position: absolute;
     top: 50%;
     left: 8%;
     transform: translateY(-50%);
     color: white;
     max-width: 650px;


 }

 .hero-content h1 {
     font-size: 60px;
     margin-bottom: 20px;
 }

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

 .hero-content a {
     position: relative;
     z-index: 5000;
     /* highest */
     pointer-events: auto;
 }

 /* buttons */

 .hero-buttons {
     display: flex;
     gap: 15px;
 }

 .btn-primary {
     background: #ff00d9;
     padding: 14px 30px;
     color: white;
     text-decoration: none;
     border-radius: 6px;
 }

 .btn-glass {
     border: 1px solid rgba(255, 255, 255, 0.4);
     backdrop-filter: blur(10px);
     padding: 14px 30px;
     color: white;
     text-decoration: none;
     border-radius: 6px;
 }

 /* arrows */

 .prev,
 .next {
     position: absolute;
     top: 50%;
     transform: translateY(-50%);
     background: rgba(0, 0, 0, 0.4);
     border: none;
     color: white;
     font-size: 28px;
     padding: 10px 15px;
     cursor: pointer;
     z-index: 4000;
 }

 .prev {
     left: 20px;
 }

 .next {
     right: 20px;
 }


 .shape {
     position: absolute;
     border-radius: 50%;
     filter: blur(70px);
     opacity: 0.5;
 }

 .shape1 {
     width: 300px;
     height: 300px;
     background: #ff00d9;
     top: 10%;
     left: 5%;
     animation: float 8s infinite ease-in-out;
 }

 .shape2 {
     width: 350px;
     height: 350px;
     background: #002aff;
     bottom: 10%;
     right: 10%;
     animation: float 10s infinite ease-in-out;
 }

 @keyframes float {

     0% {
         transform: translateY(0);
     }

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

     100% {
         transform: translateY(0);
     }

 }


 /* =========================
   MOBILE RESPONSIVE
========================= */
 @media (max-width: 768px) {

     .hero {
         height: 500px;
     }

     .hero-content {
         left: 5%;
         right: 5%;
         max-width: 100%;
         text-align: left;
         padding: 0 10px;
     }

     .hero-content h1 {
         font-size: 28px;
         line-height: 1.3;
         word-wrap: break-word;
     }

     .hero-content p {
         font-size: 14px;
         line-height: 1.5;
     }

     .hero-buttons {
         display: flex;
         flex-direction: row;
         /* IMPORTANT */
         justify-content: space-between;
         gap: 10px;
     }

     .btn-primary,
     .btn-glass {
         width: 48%;
         /* better than 40% for proper spacing */
         text-align: center;
         padding: 8px;
         font-size: 14px;
     }

     .slide img {
         object-fit: cover;
     }

     /* arrows smaller */
     .prev,
     .next {
         font-size: 20px;
         padding: 8px 12px;
     }

     /* shapes reduce */
     .shape1,
     .shape2 {
         width: 150px;
         height: 150px;
         filter: blur(50px);
     }
 }

 @media (max-width: 480px) {

     .hero {
         height: 450px;
     }

     .hero-content h1 {
         font-size: 24px;
     }

     .hero-content p {
         font-size: 13px;
     }

     .btn-primary,
     .btn-glass {
         width: 48%;
         font-size: 13px;
         padding: 10px;
     }

     .prev,
     .next {
         display: none;
         /* hide arrows on very small screens */
     }
 }

 /* ================= WELCOME SECTION ================= */
 .welcome-section {
     padding: 100px 10%;
     background: #f8f9fc;
 }

 .welcome-container {
     display: flex;
     align-items: center;
     justify-content: space-between;
     gap: 60px;
     flex-wrap: wrap;
 }

 .welcome-text {
     flex: 1;
     min-width: 300px;
 }

 .welcome-text h2 {
     font-size: 40px;
     margin-bottom: 20px;
 }

 .welcome-text span {
     font-weight: 700;
     font-size: 40px;
     font-family: 'Times New Roman', Times, serif;

     background: linear-gradient(60deg, #002f6c, rgba(52, 9, 194, 0.9), #ff00d4, #002f6c);
     background-size: 300%;

     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
     background-clip: text;
     color: transparent;

     animation: gradientMove 5s linear infinite;
 }

 @keyframes gradientMove {
     0% {
         background-position: 0%;
     }

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

 .welcome-text p {
     color: #555;
     line-height: 1.7;
     margin-bottom: 15px;
     font-size: 16px;
 }

 .welcome-btn {
     display: inline-block;
     padding: 12px 28px;
     border-radius: 30px;
     background: rgba(52, 9, 194, 0.9);
     color: white;
     font-weight: 600;
     position: relative;
     overflow: hidden;
     transition: 0.5s;
 }

 .welcome-btn::before {
     content: "";
     position: absolute;
     top: 0;
     left: -100%;
     width: 100%;
     height: 100%;
     background: rgba(255, 255, 255, 0.2);
     transform: skewX(-20deg);
     transition: 0.5s;
 }

 .welcome-btn:hover::before {
     left: 100%;
 }

 .welcome-btn:hover {
     transform: translateY(-6px) scale(1.05);
     box-shadow: 0 15px 30px rgba(0, 0, 0, 0.3);
     color: white;
 }

 /*end welcome hover*/

 .welcome-image {
     flex: 1;
     min-width: 300px;
     text-align: center;
 }

 .welcome-image img {
     width: 100%;
     max-width: 450px;
     border-radius: 14px;
     box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
     transition: 0.4s;
 }

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

 @media (max-width: 768px) {

     .welcome-container {
         flex-direction: column;
         text-align: center;
     }

     .welcome-text h2 {
         font-size: 30px;
     }

     .welcome-text p {
         font-size: 16px;
     }

     .welcome-image img {
         max-width: 300px;
         margin-top: 20px;
     }

     /* Stats: 2 per row */
     .stats-container {
         grid-template-columns: repeat(2, 1fr);
     }
 }

 @media (max-width: 480px) {

     .welcome-container {
         padding: 40px 5%;
         display: flex;
         flex-direction: column;
         /* stack */
         align-items: center;
         /* horizontal center */
         text-align: center;
         /* text center */
     }

     .welcome-text {
         width: 100%;
     }

     .welcome-text h2 {
         font-size: 24px;
     }

     .welcome-text p {
         font-size: 14px;
     }

     .welcome-btn {
         width: 100%;
         text-align: center;
     }

     .welcome-image {
         width: 100%;
         display: flex;
         justify-content: center;
         /* center image */
     }

     .welcome-image img {
         max-width: 250px;
         width: 100%;
     }

     /* ================= STATS ================= */

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

     .stat-box {
         padding: 20px;
         margin: 0 auto;
         /* center box */
         width: 90%;
         /* nice spacing */
     }

     .stat-box:hover {
         transform: translateY(-5px);
         transition: 0.3s;
     }
 }

 /* Services */
 .service-carousel {
     padding: 60px 10%;
     background: #f8f9fc;
     text-align: center;
 }

 .service-carousel.alt-bg {
     background: #ffffff;
 }

 .carousel-title {
     font-size: 38px;
     font-weight: 700;
     margin-bottom: 25px;
     color: #007b7f;
 }

 .service-card {
     background: white;
     padding: 30px 20px;
     border-radius: 14px;
     box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
     transition: transform 0.3s, box-shadow 0.3s;
 }

 .service-card:hover {
     transform: translateY(-10px);
     box-shadow: 0 12px 30px rgba(0, 0, 0, 0.15);
 }

 .service-card i {
     font-size: 36px;
     color: #007b7f;
     margin-bottom: 15px;
 }

 .service-card h3 {
     font-size: 20px;
     margin-bottom: 10px;
 }

 .service-card p {
     font-size: 14px;
     color: #555;
     line-height: 1.6;
 }

 /* Swiper Overrides */
 .swiper-button-next,
 .swiper-button-prev {
     color: #007b7f;
     /* Make sure color is visible */
     z-index: 10;
 }

 .swiper-pagination-bullet-active {
     background: #007b7f;
 }

 .swiper-button-next {
     right: 10px;
     /* Make sure it’s not off-screen */
 }

 .swiper-button-prev {
     left: 10px;
 }

 .services-header {
     text-align: center;
     padding: 80px 10% 60px;
     background-color: #007b7f;
     /* Professional IT solid color */
     color: white;
     font-family: 'Poppins', sans-serif;
 }

 .services-main-title {
     font-size: 42px;
     font-weight: 700;
     margin-bottom: 15px;
     position: relative;
 }

 /* Elegant underline */
 .services-main-title::after {
     content: "";
     display: block;
     width: 60px;
     height: 3px;
     background-color: #00ffe0;
     /* Accent color */
     margin: 15px auto 0;
     border-radius: 2px;
 }

 .services-main-desc {
     max-width: 750px;
     margin: 0 auto;
     font-size: 17px;
     line-height: 1.7;
     color: #e0f7f4;
     /* Light text for readability */
 }

 /* Responsive adjustments */
 @media (max-width: 768px) {
     .services-main-title {
         font-size: 32px;
     }

     .services-main-desc {
         font-size: 15px;
     }
 }

 /*footer*/
 .footer {
     background: #002f6c;
     color: #ffffff;
     padding: 60px 20px 20px;
     font-family: 'Poppins', sans-serif;
 }

 .footer-container {
     display: flex;
     flex-wrap: wrap;
     justify-content: space-between;
     max-width: 1200px;
     margin: auto;
 }

 .footer-section {
     flex: 1 1 220px;
     margin: 20px;
 }

 .footer-section h2,
 .footer-section h3 {
     font-weight: 600;
     margin-bottom: 20px;
 }

 .footer-section p,
 .footer-section li,
 .footer-section a {
     color: #ffffffcc;
     font-size: 14px;
     line-height: 1.8;
     text-decoration: none;
 }

 .footer-section ul {
     list-style: none;
     padding: 0;
 }

 .footer-section ul li:hover a {
     color: #ff00d9;
     transition: 0.3s;
 }

 .footer-section .socials a {
     display: inline-block;
     margin-right: 10px;
     color: white;
     font-size: 18px;
     transition: 0.3s;
 }

 .footer-section .socials a:hover {
     color: #ff00d9;
     transform: translateY(-3px);
 }

 .footer-bottom {
     text-align: center;
     padding: 20px 0 0;
     border-top: 1px solid #ffffff33;
     font-size: 14px;
     color: #ffffffcc;
 }

 /* Responsive */
 @media (max-width: 768px) {
     .footer-container {
         flex-direction: column;
         align-items: center;
         text-align: center;
     }

     .footer-section {
         margin: 20px 0;
     }
 }

 .footer-section.contact a {
     color: #ffffffcc;
     text-decoration: none;
     transition: 0.3s;
 }

 .footer-section.contact a:hover {
     color: #ff00d9;
     /* Accent color on hover */
     text-decoration: underline;
 }

 .whatsapp-orbit {
     position: fixed;
     right: 20px;
     top: 200px;

     width: 60px;
     height: 60px;

     background: #25D366;
     color: white;
     font-size: 28px;

     display: flex;
     align-items: center;
     justify-content: center;

     border-radius: 50%;
     text-decoration: none;

     z-index: 9999;

     animation: orbitMove 2s linear infinite;
     transition: 0.4s;
 }

 /* Orbit animation */
 @keyframes orbitMove {
     0% {
         transform: translate(0, 0);
     }



     50% {
         transform: translate(0, 30px);
     }



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

 /* Hover */
 .whatsapp-orbit:hover {
     color: #ff00d4;
     transform: scale(1.15);
 }

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

     .whatsapp-orbit {
         width: 50px;
         height: 50px;
         font-size: 24px;
         right: 15px;
         bottom: 20px;
     }

 }

 /* ================= STATS SECTION ================= */

 .stats-section {
     background: linear-gradient(135deg, #002f6c, rgb(94, 15, 241));
     padding: 70px 40px;
     color: white;
     text-align: center;
 }

 .stats-container {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
     gap: 40px;
     max-width: 1200px;
     margin: auto;
 }

 .stat-box {
     background: rgba(255, 255, 255, 0.1);
     padding: 30px;
     border-radius: 12px;
     backdrop-filter: blur(6px);
     transition: 0.3s;
 }

 .stat-box:hover {
     transform: translateY(-8px);
 }

 .stat-box i {
     font-size: 40px;
     margin-bottom: 15px;
 }

 .stat-box h2 {
     font-size: 36px;
     margin: 10px 0;
 }

 .stat-box p {
     font-size: 16px;
     letter-spacing: 1px;
 }

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

     .stats-section {
         padding: 50px 20px;
     }

     .stat-box h2 {
         font-size: 28px;
     }

     .stat-box i {
         font-size: 32px;
     }

 }