:root {
   --primary: #3a0ca3;
   --secondary: #4361ee;
   --accent: #a1a1a1ff;
   --light: #f8f9fa;
   --dark: #212529;
   --success: #4cc9f0;
   --gradient: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
 }

 body {
   font-family: 'Poppins', sans-serif;
   color: #333;
   overflow-x: hidden;
 }

 p {
   text-align: justify;
 }

 h1,
 h2,
 h3,
 h4,
 h5,
 h6 {
   font-family: 'Merriweather', serif;
   font-weight: 700;
 }

 .navbar {
   padding: 5px 0;
   transition: all 0.3s ease;
   background: rgba(255, 255, 255, 0.95);
   box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
 }

 .navbar-scrolled {
   padding: 10px 0;
   background: rgba(255, 255, 255, 0.98) !important;
   backdrop-filter: blur(10px);
   box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
 }

 .hero-section {
   position: relative;
   height: 100vh;
   min-height: 700px;
   overflow: hidden;
   color: white;
   display: flex;
   align-items: center;
 }



























 .overlay {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background: linear-gradient(rgba(58, 12, 163, 0.85), rgba(67, 97, 238, 0.85));
   z-index: -1;
 }

 .responsive-img {
   width: 100%;
   height: auto;
   display: block;
   max-width: 100%;
 }

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

 .btn-primary {
   background: var(--gradient);
   border: none;
   padding: 15px 35px;
   border-radius: 50px;
   font-weight: 600;
   transition: all 0.4s;
   box-shadow: 0 10px 20px rgba(58, 12, 163, 0.3);
   position: relative;
   overflow: hidden;
 }

 .btn-primary:before {
   content: '';
   position: absolute;
   top: 0;
   left: -100%;
   width: 100%;
   height: 100%;
   background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
   transition: all 0.6s;
 }

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

 .btn-primary:hover {
   transform: translateY(-5px);
   box-shadow: 0 15px 25px rgba(58, 12, 163, 0.4);
 }

 .btn-outline-light:hover {
   background: var(--accent);
   border-color: var(--accent);
   color: white;
 }









 .marquee-container {
   width: 100%;
   height: 50px;
   overflow: hidden;
   position: relative;
   background: #003366;
   /* optional background */
 }

 .marquee {
   position: absolute;
   top: 50%;
   transform: translateY(-50%);
   white-space: nowrap;
   font-size: 22px;
   line-height: 10px;
   animation: scroll-left 20s linear infinite;
   color: rgb(255, 255, 255);
 }

 @keyframes scroll-left {
   0% {
     left: 100%;
   }

   100% {
     left: -100%;
   }
 }


 .section-padding {
   padding: 60px 0;
 }

 .info-card {
   background-color: #fff;
   border-radius: 5px;
   box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
   padding: 30px;
   display: flex;
   align-items: center;
   transition: all 0.3s ease;
   height: 100%;
 }

 .info-card:hover {
   transform: translateY(-5px);
   box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
 }

 .icon-circle {
   width: 60px;
   height: 60px;
   border-radius: 50%;
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 34px;
   margin-right: 20px;
   flex-shrink: 0;
 }

 /* Icon Colors like the screenshot */
 .icon-purple {
   background-color: #fee9fc;
   color: #d452a2;
 }

 .icon-orange {
   background-color: #ffe7d9;
   color: #ef6c00;
 }

 .icon-green {
   background-color: #e0f7f1;
   color: #2ca68f;
 }

 .info-text h5 {
   font-weight: 900;
   margin-bottom: 20px;
   text-transform: uppercase;
   font-size: 16px;
   color: #222;
 }

 .info-text p {
   font-size: 15px;
   color: #555;
   margin-bottom: 0;
 }

 .section-title {
   margin-bottom: 60px;
   position: relative;
   text-align: center;

 }


 .destination-box {
   position: relative;
   overflow: hidden;
   height: 250px;
   border-radius: 10px;
   background-size: cover;
   background-position: center;
   cursor: pointer;
   transition: transform 0.3s ease;
 }

 .destination-box:hover {
   transform: scale(1.02);
 }

 .destination-title {
   position: absolute;
   bottom: 15px;
   left: 15px;
   font-size: 1.5rem;
   font-weight: bold;
   color: white;
   z-index: 2;
   text-shadow: 1px 1px 3px #000;
   transition: opacity 0.3s ease;
 }

 .destination-box:hover .destination-title {
   opacity: 0;
 }

 .destination-overlay {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background-color: rgba(0, 0, 0, 0.65);
   opacity: 0;
   visibility: hidden;
   transition: opacity 0.3s ease;
   padding: 20px;
   color: white;
 }

 .destination-box:hover .destination-overlay {
   opacity: 1;
   visibility: visible;
 }

 .destination-overlay p {
   margin-top: 30px;
 }

 .destination-button {
   margin-top: 15px;
 }

 .destination-button {
   display: inline-block;
   margin-top: 20px;
   padding: 10px 20px;
   background-color: #ffffff;
   color: #000000;
   font-weight: 600;
   border: none;
   border-radius: 5px;
   text-decoration: none;
   transition: all 0.3s ease;
   position: relative;
   overflow: hidden;
 }

 .destination-button:hover {
   background-color: #f8f9fa;
   color: #007bff;
 }

 .destination-button::after {
   content: "→";
   position: absolute;
   right: 15px;
   opacity: 0;
   transition: 0.3s ease;
 }

 .destination-button:hover::after {
   right: 10px;
   opacity: 1;
 }



 .services-section {
   padding: 60px 0;
   background-color: #f3f4f6;
 }

 .services-section h2 {
   font-weight: bold;
   margin-bottom: 30px;
 }

 .service-card {
   background-color: #fff;
   border: 1px solid #ddd;
   border-radius: 10px;
   padding: 25px;
   height: 100%;
   transition: all 0.3s ease;
 }

 .service-card:hover {
   box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
   border-color: #007bff22;
 }

 .service-title {
   font-weight: 600;
   font-size: 1.1rem;
   margin-bottom: 10px;
 }

 .service-link {
   display: inline-block;
   color: #007bff;
   font-weight: 500;
   font-size: 0.95rem;
   margin-top: 10px;
   text-decoration: none;
 }

 .service-link:hover {
   text-decoration: underline;
 }


 .section-title:after {
   content: '';
   position: absolute;
   bottom: -20px;
   left: 50%;
   transform: translateX(-50%);
   width: 80px;
   height: 4px;
   background: var(--accent);
   border-radius: 2px;
 }

 .stats-box {
   text-align: center;
   padding: 40px 30px;
   border-radius: 15px;
   box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
   transition: all 0.4s;
   margin-bottom: 30px;
   background: white;
   position: relative;
   overflow: hidden;
 }

 .stats-box:before {
   content: '';
   position: absolute;
   top: 0;
   left: 0;
   width: 5px;
   height: 0;
   background: var(--gradient);
   transition: all 0.6s ease;
 }

 .stats-box:hover:before {
   height: 100%;
 }

 .stats-box:hover {
   transform: translateY(-10px) scale(1.02);
   box-shadow: 0 20px 40px rgba(0, 0, 0, 0.12);
 }

 .stats-number {
   font-size: 3.5rem;
   font-weight: 700;
   background: var(--gradient);
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
   margin-bottom: 10px;
   transition: all 0.4s;
 }

 .stats-box:hover .stats-number {
   transform: scale(1.1);
 }

 .service-card {
   border: none;
   border-radius: 20px;
   overflow: hidden;
   box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
   transition: all 0.4s;
   height: 100%;
   background: white;
   position: relative;
 }

 .service-card:before {
   content: '';
   position: absolute;
   bottom: 0;
   left: 0;
   width: 100%;
   height: 5px;
   background: var(--gradient);
   transform: scaleX(0);
   transform-origin: left;
   transition: all 0.4s;
 }

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

 .service-card:hover {
   transform: translateY(-15px);
   box-shadow: 0 25px 50px rgba(0, 0, 0, 0.15);
 }

 .service-icon {
   font-size: 3.5rem;
   background: var(--gradient);
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
   margin-bottom: 25px;
   transition: all 0.4s;
 }

 .service-card:hover .service-icon {
   transform: scale(1.2);
 }

 .process-step {
   position: relative;
   padding: 40px 30px;
   text-align: center;
   border-radius: 20px;
   background: white;
   box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
   margin-bottom: 30px;
   transition: all 0.4s;
   overflow: hidden;
 }

 .process-step:hover {
   transform: translateY(-10px);
   box-shadow: 0 20px 40px rgba(0, 0, 0, 0.12);
 }

 .step-number {
   position: absolute;
   top: -25px;
   left: 50%;
   transform: translateX(-50%);
   width: 60px;
   height: 60px;
   background: var(--gradient);
   color: white;
   border-radius: 50%;
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 1.8rem;
   font-weight: 700;
   box-shadow: 0 5px 15px rgba(58, 12, 163, 0.3);
   transition: all 0.4s;
 }

 .process-step:hover .step-number {
   transform: translateX(-50%) scale(1.1) rotate(10deg);
 }

 .testimonial-card {
   background: white;
   border-radius: 20px;
   padding: 40px;
   box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
   margin: 20px;
   position: relative;
   transition: all 0.4s;
 }

 .testimonial-card:hover {
   transform: translateY(-10px);
   box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
 }

 .testimonial-card:after {
   content: '\201D';
   position: absolute;
   top: 20px;
   right: 30px;
   font-size: 6rem;
   background: var(--gradient);
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
   opacity: 0.2;
   font-family: 'Merriweather', serif;
   line-height: 1;
 }

 .testimonial-text {
   font-style: italic;
   margin-bottom: 25px;
   position: relative;
   z-index: 1;
 }

 .client-image {
   width: 70px;
   height: 70px;
   border-radius: 50%;
   object-fit: cover;
   border: 4px solid var(--light);
   box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
 }

 .client-name {
   font-weight: 700;
   color: var(--primary);
   margin-bottom: 0;
 }

 .client-detail {
   color: #6c757d;
   font-size: 0.9rem;
 }

 .footer {
   background: var(--dark);
   color: white;
   /* padding: 100px 0 40px; */
   position: relative;
   overflow: hidden;
 }

 .footer:before {
   content: '';
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 5px;
   background: var(--gradient);
 }

 .footer-title {
   position: relative;
   margin-bottom: 30px;
   padding-bottom: 15px;
 }

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

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

 .footer-links li {
   margin-bottom: 12px;
   transition: all 0.3s;
 }

 .footer-links li:hover {
   transform: translateX(5px);
 }

 .footer-links a {
   color: rgba(255, 255, 255, 0.8);
   text-decoration: none;
   transition: all 0.3s;
   display: block;
 }

 .footer-links a:hover {
   color: white;
 }

 .social-icons a {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   width: 45px;
   height: 45px;
   background: rgba(255, 255, 255, 0.1);
   border-radius: 50%;
   color: white;
   margin-right: 12px;
   transition: all 0.4s;
   position: relative;
   overflow: hidden;
 }

 .social-icons a:before {
   content: '';
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background: var(--gradient);
   opacity: 0;
   transition: all 0.4s;
   border-radius: 50%;
 }

 .social-icons a:hover:before {
   opacity: 1;
 }

 .social-icons a i {
   position: relative;
   z-index: 1;
 }

 .social-icons a:hover {
   transform: translateY(-5px) rotate(5deg);
   box-shadow: 0 8px 15px rgba(0, 0, 0, 0.2);
 }

 .copyright {
   border-top: 1px solid rgba(255, 255, 255, 0.1);
   padding-top: 30px;
   margin-top: 70px;
   text-align: center;
 }

 /* Particle background for stats section */
 .particles-js {
   position: absolute;
   width: 100%;
   height: 100%;
   top: 0;
   left: 0;
   z-index: 0;
 }

 .stats-section {
   position: relative;
   background: var(--light);
   overflow: hidden;
 }

 /* Animated elements */
 .animated-element {
   opacity: 0;
   transform: translateY(50px);
   transition: all 0.8s ease;
 }

 .animated-element.visible {
   opacity: 1;
   transform: translateY(0);
 }

 /* Custom cursor */
 .cursor-dot {
   width: 8px;
   height: 8px;
   background-color: var(--accent);
   border-radius: 50%;
   position: fixed;
   pointer-events: none;
   z-index: 9999;
   transform: translate(-50%, -50%);
   transition: transform 0.1s;
 }

 .cursor-outline {
   width: 40px;
   height: 40px;
   border: 2px solid var(--accent);
   border-radius: 50%;
   position: fixed;
   pointer-events: none;
   z-index: 9998;
   transform: translate(-50%, -50%);
   transition: all 0.2s ease-out;
 }

 /* Responsive adjustments */
 @media (max-width: 992px) {
   .hero-section {
     height: auto;
     min-height: auto;
     padding: 120px 0 80px;
   }

   .section-padding {
     padding: 80px 0;
   }

   .stats-number {
     font-size: 2.8rem;
   }
 }

 @media (max-width: 768px) {
   .navbar {
     padding: 15px 0;
   }

   .hero-content {
     text-align: center;
   }

   .stats-box {
     padding: 30px 20px;
   }

   .service-card,
   .process-step,
   .testimonial-card {
     margin-bottom: 25px;
   }
 }