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

 body {
     font-family: 'Poppins', sans-serif;
     /* Hide scrollbar for Chrome, Safari and Opera */
     overflow-x: hidden;
 }

 /* Hide scrollbar for Chrome, Safari and Opera */
 ::-webkit-scrollbar {
     display: none;
 }

 /* Hide scrollbar for IE, Edge and Firefox */
 html {
     -ms-overflow-style: none;
     /* IE and Edge */
     scrollbar-width: none;
     /* Firefox */
 }

 .gradient-bg {
     background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
 }

 .card-hover {
     transition: transform 0.3s ease, box-shadow 0.3s ease;
 }

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

 .nav-link {
     position: relative;
     transition: color 0.3s ease;
 }

 .nav-link:hover {
     color: #667eea;
 }

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

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

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

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

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

 .service-icon {
     background: linear-gradient(135deg, #ff6b6b, #feca57);
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
     background-clip: text;
 }

 /* Hide scrollbar for thumbnail container */
 .scrollbar-hide {
     -ms-overflow-style: none;
     /* IE and Edge */
     scrollbar-width: none;
     /* Firefox */
 }

 .scrollbar-hide::-webkit-scrollbar {
     display: none;
     /* Chrome, Safari and Opera */
 }

 /* Smooth transition for main image changes */
 #mainImage {
     transition: opacity 0.3s ease-in-out;
 }

 .image-fade-out {
     opacity: 0;
 }

 .image-fade-in {
     opacity: 1;
 }