body {
    margin: 0;
    padding: 0;
    overflow-x: hidden; /* Prevent horizontal scroll */
    background-color: #171f29; /* Neutral dark color that works well in both modes */
    color: #F3F4F6; /* Light text color for readability */
}


/* Navbar styling with reduced height */
.navbar {
    background-color: #171f29;
    padding: 5px 10px; /* Less padding for smaller height */
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1); /* Subtle shadow */
    height: 49px; /* Set a fixed height */
}

/* Logo image styling */
.logo-img {
    border-radius: 50%; /* Circular logo */
    margin-right: 8px; /* Adjust margin for better spacing */
    width: 30px; /* Smaller logo size */
    height: 30px;
}

/* Navbar brand text styling */
.navbar-text {
    font-family: 'Roboto', sans-serif; /* Modern sans-serif font */
    font-size: 1.2rem; /* Smaller font size */
    font-weight: 500;  /* Medium weight for balance */
    color: #ffffff; /* White text */
    line-height: 30px; /* Align text vertically */
}

/* Hover effect for brand */
.navbar-brand:hover .navbar-text {
    color: #ffcc00; /* Change text color on hover */
    transition: color 0.3s ease-in-out; /* Smooth color transition */
}

/* Responsive styling for mobile */
@media (max-width: 768px) {
    .navbar-text {
        font-size: 1rem; /* Even smaller text for mobile */
        line-height: 1rem;
    }
}


/* Responsive styling for mobile */
@media (max-width: 768px) {
    .navbar-text {
        font-size: 1.2rem; /* Smaller text for mobile */
    }
}


/* Add padding to the container that wraps the cards */
.container {
    width: 100%; /* Ensure container spans the full width */
    margin: 0 auto; /* Center the container */
    overflow: hidden; /* Prevent horizontal scrolling inside container */
}

/* Ensure the images in the card fit properly */
.cover-photo img {
    width: 100%; /* Fit the image to container without overflow */
    height: auto;
    object-fit: cover; /* Maintain aspect ratio while covering the area */
    padding: 0;
    margin: 0;
    display: block; /* Remove any space at the bottom */
    border-radius: 0px 0px 0 0; /* Optional: add slight rounding to top corners */
}

/* Overlay styling */
.cover-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, .2) 80%); /* Gradient from dark to transparent at the bottom */
    z-index: 1; /* Ensure the overlay is above the image */
    border-radius: 0px 0px 0 0; /* Soft rounding at the bottom */
}



/* Carousel caption styling */
.carousel-caption {
    position: absolute; /* Change to absolute for centering */
    top: 50%; /* Center vertically */
    left: 50%; /* Center horizontally */
    transform: translate(-50%, -50%); /* Adjust position back to center */
    z-index: 2; /* Ensure captions are above the overlay */
    text-align: center; /* Center text */
}

/* Heading styling */
.carousel-caption h5 {
    font-size: 3.5rem; /* Increase the font size of the main title */
    color: white; /* Ensure text is visible against the overlay */
    font-weight: bold; /* Make the title bold for emphasis */
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7); /* Optional: soft shadow for readability */
}

/* Paragraph styling */
.carousel-caption p {
    font-size: 1.5rem; /* Base font size for the paragraph */
    color: white; /* Ensure text is visible against the overlay */
    margin: 0.5rem 0; /* Add some space between lines */
}

/* Highlighted call to action */
.carousel-caption p strong {
    font-size: 1.8rem; /* Slightly larger size for the call to action */
    color: #FFD700; /* Optional: use a gold color for impact */
}

/* Optional: Add a soft hover effect to the cover */
.cover-photo:hover img {
    filter: brightness(90%); /* Slightly darken image on hover for interaction */
    transition: filter 0.5s ease; /* Smooth transition */
}


  
/* App section styling with padding at the sides and top */
.app-section {
    padding: 45px 12px 0px; /* Add padding to the top and left-right, no bottom padding */
}

/* App section second row with top padding and spacing between sections */
.app-section-second-row {
    padding: 0px 12px 8px; 
    margin-top: 24px; /* Default for larger screens */
}

/* Media query for mobile devices (max-width: 768px) */
@media (max-width: 768px) {
    .app-section-second-row {
        margin-top: 35px; /* Increased margin-top for smaller screens */
    }
}


.app-card img {
      height: 250px;
      object-fit: cover;
    }
  

/* Initial hidden state for the card */
.card {
    opacity: 0;
    transform: translateY(30px); /* Slide from bottom */
    transition: opacity 0.5s ease-out, transform 0.5s ease-out; /* Smooth transition */
    will-change: opacity, transform; /* Optimization for smoothness */
}

/* Apply fade-in and slide-up when the card enters the viewport */
.card.show {
    opacity: 1; /* Fully visible */
    transform: translateY(0); /* Final position */
}

/* Initial hidden state for the card text */
.card-title {
    opacity: 0;
    transform: translateY(10px); /* Slide from bottom */
    transition: opacity 0.5s ease-out, transform 0.5s ease-out; /* Smooth transition */
    will-change: opacity, transform; /* Optimization for smoothness */
}

/* Apply fade-in and slide-up when card text enters the viewport */
.card.show .card-title {
    opacity: 1; /* Fully visible */
    transform: translateY(0); /* Final position */
}

/* Initial hidden state for the card text */
.card-text {
    opacity: 0;
    transform: translateY(10px); /* Slide from bottom */
    transition: opacity 0.5s ease-out, transform 0.5s ease-out; /* Smooth transition */
    will-change: opacity, transform; /* Optimization for smoothness */
}

/* Apply fade-in and slide-up when card text enters the viewport */
.card.show .card-text {
    opacity: 1; /* Fully visible */
    transform: translateY(0); /* Final position */
}

.card {
    position: relative; /* Position context for the shimmer */
    overflow: hidden; /* Ensure no overflow from the card */
}


.card-img-top {
  transition: all 0.3s ease;
}

.card:hover .card-img-top {
  filter: brightness(0.5);
}

.shimmer-effect {
    position: absolute; /* Cover the entire card */
    top: 0;
    left: 0;
    right: 0;
    bottom: 0; /* Full coverage of the card */
    background: linear-gradient(90deg, #5C6773 25%, #3F4A56 50%, #5C6773 75%); /* Shimmer gradient */
    background-size: 200% 100%; /* Enable animation */
    animation: shimmer 1.5s infinite; /* Shimmer animation */
    z-index: 1; /* Ensure shimmer is above card content */
}

/* Shimmer animation */
@keyframes shimmer {
    0% {
        background-position: 200% 0;
    }
    100% {
        background-position: -200% 0;
    }
}

/* Ensure the card content stays below the shimmer */
.card-body, .card-footer, .card-img-top {
    position: relative; /* Ensure stacking context */
    z-index: 0; /* Below the shimmer effect */
}


  /* Ensure the card retains its styling */
.card {
    overflow: hidden; /* Ensure the card content doesn't overflow */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    position: relative;
    border-radius: 10px;
    background-color: #252d38;
    border: 1.2px solid rgba(96, 111, 137, 0.3); /* Glowing border */
    
    
}
  

/* Hover state for smooth transformation */
.card:hover {
    transform: translateY(-10px) scale(1.05);
    box-shadow: 0 8px 10px rgba(96, 111, 137, 0.3);
    animation: colorTransition 1s ease-in-out forwards; /* Trigger color animation */
}

/* Define the smooth color transition */
@keyframes colorTransition {
    0% {
        background-color: #252d38; /* Start color */
    }
    
    
    100% {
        background-color: #1c2029; /* End color */
    }
}

.card-title {
    color: #F3F4F6; /* Light color */
    
}


.card-text {
    color: #D1D5DB; /* Muted light gray for secondary text */
    font-size: 1rem;
    margin-bottom: 35px;
}


.card-footer .text-body-secondary {
    color: #b1b0b0 !important;
}

.card-footer {
    border-top: 1.5px solid rgb(190, 186, 186);; /* Override border color */
}

  
/* Futuristic Button Styling - Full-width for Card */
.custom-btn {
    position: relative;
    background: linear-gradient(90deg, #4e9af1, #00c1d4); /* Softer blue gradient */
    color: white;
    border: none;
    border-radius: 50px;
    cursor: pointer;
    padding: 10px 20px;
    font-size: 16px;
    font-weight: bold;
    transition: background 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease;
    overflow: hidden; /* To keep the glowing effect contained */
}


/* Glowing Effect on Hover */
.custom-btn::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.15), rgba(0, 110, 255, 0));
    transition: transform 2s ease;
    transform: scale(0);
    z-index: 1;
}

/* Hover Effect */
.custom-btn:hover::before {
    transform: scale(1); /* Expands glowing radial gradient */
}

.custom-btn:hover {
    background: linear-gradient(90deg, #0068b6, #00a8d0); /* Darker blue gradient on hover */
    box-shadow: 0px 8px 14px rgba(0, 120, 255, 0.3); /* Glow effect on hover */
    transform: translateY(-2px); /* Slight lift on hover */
    transition: background 2s ease, box-shadow 0.8s ease, transform 0.6s ease;
}

/* Active (clicked) Effect */
.custom-btn:active {
    background: linear-gradient(90deg, #0081ff, #00c1d4); /* Slight color shift when clicked */
    box-shadow: 0px 2px 6px rgba(0, 81, 255, 0.5); /* Pressed effect */
    transform: translateY(1px); /* Slight press-down effect */
    transition: transform 0.3s ease;
}

  /* Optional: Image styling inside card */
  .card img {
      transition: transform 0.3s ease;
  }
  
  /* Image hover effect inside the card */
  .card:hover img {
      transform: scale(1.05); /* Slight zoom of the image */
  }
  
  /* Optional: Add a glowing border on hover */
  .card:hover::before {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      border-radius: 10px;
      border: 1.2px solid rgba(110, 125, 154, 0.5); /* Glowing border */
      box-shadow: 0 0 20px rgba(110, 125, 154, 0.5); /* Optional glow effect */
  }
  
  /* Icon image styling */
  .custom-btn .icon-img {
      width: 24px;
      height: 24px;
      margin-right: 10px;
  }
  

/* Mobile-specific adjustments */
@media (max-width: 768px) {
    .row {
        gap: 35px; /* Space between cards */
    }
}


  /* Footer styling */
  .footer {
      background-color: #343a40;
      color: lightgrey !important;
      padding: 30px 0;
      text-align: center;
  }




/* Base styles for contact buttons */
.contact-buttons .btn-icon {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 50px;
    height: 50px;
    border: 2px solid #a8a6a6;; /* Grey outline for the circle */
    border-radius: 50%;
    color: #a8a6a6; /* Gray default icon color */
    font-size: 24px;
    margin: 0 10px;
    transition: all 0.3s ease;
    text-decoration: none; /* Remove underline */
  }
  
  /* Hover effect */
  .contact-buttons .btn-icon:hover {
    transform: translateY(-5px); /* Moves button up slightly on hover */
    border-color: white; /* Changes border to white */
  }
  
  /* WhatsApp Icon */
  .contact-buttons .btn-icon i.fab.fa-whatsapp {
    color: #a8a6a6;; /* WhatsApp icon gray by default */
  }
  
  /* Email Icon */
  .contact-buttons .btn-icon i.fas.fa-envelope {
    color: #a8a6a6; /* Email icon gray by default */
  }
  
  /* Smooth transition for icons as well */
  .contact-buttons .btn-icon i {
    transition: color 0.3s ease;
  }
  
  /* When hovering over the button, change icon color to white */
  .contact-buttons .btn-icon:hover i.fab.fa-whatsapp {
    color: white; /* WhatsApp icon turns white */
  }
  
  .contact-buttons .btn-icon:hover i.fas.fa-envelope {
    color: white; /* Email icon turns white */
  }
  
  
  /* Increase space between sections for larger screens (desktop) */
    @media (min-width: 768px) {
        .app-section-second-row {
            margin-top: 40px; /* Larger space between sections on desktop */
        }
    }


  /* Media Queries for Responsive Text Sizing */
  @media (max-width: 1200px) {
      .carousel-caption h5 {
          font-size: 3rem; /* Adjust size for medium screens */
      }
      .carousel-caption p {
          font-size: 1.25rem; /* Adjust size for medium screens */
      }
      .carousel-caption p strong {
          font-size: 1.5rem; /* Adjust size for medium screens */
      }
  }
  
  @media (max-width: 992px) {
      .carousel-caption h5 {
          font-size: 2rem; /* Adjust size for smaller screens */
      }
      .carousel-caption p {
          font-size: 1.1rem; /* Adjust size for smaller screens */
      }
      .carousel-caption p strong {
          font-size: 1.3rem; /* Adjust size for smaller screens */
      }
  }
  
  @media (max-width: 768px) {
      .carousel-caption h5 {
          font-size: 1.5rem; /* Adjust size for mobile */
      }
      .carousel-caption p {
          font-size: 1rem; /* Adjust size for mobile */
      }
      .carousel-caption p strong {
          font-size: 1.2rem; /* Adjust size for mobile */
      }
  }
  
  @media (max-width: 576px) {
      .carousel-caption h5 {
          font-size: 1rem; /* Adjust size for very small screens */
      }
      .carousel-caption p {
          font-size: 0.9rem; /* Adjust size for very small screens */
      }
      .carousel-caption p strong {
          font-size: 1rem; /* Adjust size for very small screens */
      }
  }