/* Base and body */
 body {
     font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
     line-height: 1.6;
     margin: 0;
     padding: 0;
     background: linear-gradient(135deg, #5C7AEA, #65C7F7);
     color: #333;
     animation: fadeIn 1.2s ease forwards;
 }

 body.modal-open {
  overflow: hidden;
  height: 100vh; /* prevent scroll on some browsers */
}
    
 @keyframes fadeIn {
     from {
         opacity: 0;
         transform: translateY(20px);
     }

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



 .logo img {
     height: 150px;
     position: relative;
     right: 500px;
     bottom: 100px;
 }


 /* Header */
 header {
     background: linear-gradient(90deg, #283e51 0%, #485563 100%);
     color: #fff;
     padding: 2rem 1rem;
     text-align: center;
     box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
     position: sticky;
     top: 0;
     z-index: 1000;
     height: 100px;
     transition: background 0.4s ease;
 }

 header:hover {
     background: linear-gradient(90deg, #1f2a38 0%, #3d4752 100%);
 }

 header h1 {
     margin: 0;
     font-size: 2.8rem;
     text-shadow: 0 2px 6px rgba(0, 0, 0, 0.5);
 }

 nav {
     margin-top: 1rem;
 }

 nav a {
     color: #cce1ff;
     margin: 0rem;
     font-weight: 600;
     position: relative;
     bottom: 180px;
     text-decoration: none;
     padding: 0.5rem 1rem;
     border-radius: 6px;
     transition: background 0.3s ease, color 0.3s ease;
     box-shadow: inset 0 0 0 0 #cce1ff;
     display: inline-block;
     position: relative;
     overflow: hidden;
 }

 nav a:hover {
     color: #283e51;
     background: #cce1ff;
     box-shadow: inset 250px 0 0 0 #cce1ff;
 }

 /* Hero image */
 .hero-image {
     width: 100%;
     max-height: 320px;
     object-fit: cover;
     border-bottom: 6px solid #65C7F7;
     animation: fadeIn 1.5s ease forwards;
 }

 /* Container */
 .container {
     max-width: 900px;
     margin: 2rem auto 3rem;
     padding: 2rem;
     background: #fff;
     border-radius: 12px;
     box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
     opacity: 0;
     animation: slideUp 0.7s ease forwards;
     animation-delay: 0.6s;
 }

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

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

 h2 {
     color: #3658a3;
     font-weight: 700;
     font-size: 2rem;
     margin-bottom: 1rem;
     position: relative;
 }

 h2::after {
     content: "";
     display: block;
     width: 60px;
     height: 4px;
     background: #65C7F7;
     border-radius: 4px;
     margin-top: 8px;
     box-shadow: 0 2px 8px #65C7F7;
 }

 /* Introduction Text */
 .intro {
     font-size: 1.1rem;
     color: #444e70;
     margin-bottom: 2rem;
     line-height: 1.5;
     border-left: 6px solid #65C7F7;
     padding-left: 15px;
     font-style: italic;
     background-color: #eaf4ff;
     border-radius: 8px;
     box-shadow: 0 4px 12px rgba(101, 199, 247, 0.2);
 }

 /* Services categories */
 .services-category {
     margin-bottom: 2.4rem;
 }

 .services-category h3 {
     font-size: 1.5rem;
     color: #2b4274;
     margin-bottom: 0.6rem;
     font-weight: 700;
     border-left: 6px solid #65C7F7;
     padding-left: 12px;
     box-shadow: 2px 2px 8px rgba(101, 199, 247, 0.3);
 }

 .services-list {
     list-style: none;
     padding-left: 18px;
     margin: 0;
 }

 .services-list li {
     background: #e6f0ff;
     margin: 10px 0;
     padding: 12px 18px;
     border-radius: 8px;
     font-size: 1.1rem;
     font-weight: 600;
     color: #0a3696;
     box-shadow: 0 4px 8px rgba(101, 199, 247, 0.25);
     position: relative;
     cursor: pointer;
     transition:
         background 0.3s ease,
         color 0.3s ease,
         transform 0.3s ease,
         box-shadow 0.3s ease;
     user-select: none;
 }

 .services-list li::before {
     content: "🚧";
     position: absolute;
     left: 10px;
     top: 50%;
     transform: translateY(-50%);
     font-size: 1.2rem;
     opacity: 0.15;
 }

 .services-list li:hover {
     background: #65C7F7;
     color: #fff;
     transform: scale(1.04) translateX(5px);
     box-shadow: 0 8px 16px rgba(101, 199, 247, 0.5);
 }

 /* Popup card */
/* Popup card */
.popup {
    position: fixed; /* Ensure it stays fixed in the viewport */
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.7); /* Center it */
    background: white;
    border-radius: 12px;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
    padding: 20px;
    z-index: 2000;
    width: 80%;
    max-width: 400px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.popup.show {
    opacity: 1;
    pointer-events: auto;
    transform: translate(-50%, -50%) scale(1); /* Scale to normal size when shown */
}

.overlay {
    position: fixed; /* Ensure it covers the entire viewport */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.3);
    z-index: 1000;
    backdrop-filter: blur(5px);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

.overlay.show {
    opacity: 1;
    pointer-events: auto; /* Allow clicks when shown */
}


 .popup img {
     width: 100%;
     border-radius: 8px;
     margin-bottom: 10px;
 }

 .popup h4 {
     margin: 10px 0;
     color: #3658a3;
 }

 .popup p {
     color: #444e70;
 }

 .overlay {
     position: fixed;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background: rgba(0, 0, 0, 0.3);
     z-index: 1000;
     backdrop-filter: blur(5px);
     opacity: 0;
     pointer-events: none;
     transition: opacity 0.3s ease;
     will-change: opacity;
 }
 /* Footer */
 footer {
     background: #283e51;
     color: #cce1ff;
     text-align: center;
     padding: 1.8rem 1rem;
     font-size: 0.9rem;
     box-shadow: inset 0 5px 8px -5px rgba(255, 255, 255, 0.2);
     user-select: none;
     cursor: default;
 }

 footer p {
     margin: 0.25rem;
     transition: transform 0.3s ease;
 }

 footer p:hover {
     animation: bounceIn 0.6s ease forwards;
     color: #95caff;
     transform-origin: center;
 }

 @keyframes bounceIn {
     0% {
         transform: scale(0);
         opacity: 0.4;
     }

     60% {
         transform: scale(1.3);
         opacity: 1;
     }

     100% {
         transform: scale(1);
     }
 }

 /* Responsive */
 @media (max-width: 600px) {
     .container {
         width: 90vw;
         padding: 1.2rem;
     }

     nav a {
         margin: 0 0.5rem;
         padding: 0.35rem 0.8rem;
         font-size: 0.9rem;
     }

     h1 {
         font-size: 2rem;
     }

     h2 {
         font-size: 1.5rem;
     }

     .intro {
         font-size: 1rem;
     }

     .services-category h3 {
         font-size: 1.3rem;
     }

     .services-list li {
         font-size: 1rem;
         padding: 10px 14px;
     }
 }