body {
    font-family: 'Arial', sans-serif;
    background-color: #f8f9fa;
    color: #333;
}
h1, h2, h5 {
    color: #103756;
}
p {
    color: #555;
}
.navbar {
  background-color: rgba(255, 255, 255, 0.95); /* White with 95% opacity */
  transition: background-color 0.3s ease-in-out; /* Smooth transition */
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 1000; /* Ensure it's above other content */
  padding: 0px 0; /* Increased top and bottom padding */
 
}

.navbar.scrolled {
  background-color: #ffffff; /* Solid white background on scroll */
}
.navbar-brand img {
  max-height: 70px; 
  margin-left: 50px;/* Increased logo height */
}

.navbar-nav {
  margin-left: auto; /* Push the items to the right */
}

.navbar-nav .nav-item {
  margin-left: 15px; /* Adjusted spacing between items */
}

.navbar-nav .nav-link {
  margin-right: 10px;
  padding: 10px 15px; /* Adjusted padding */
  transition: color 0.3s ease-in-out; /* Smooth transition for text color */
  color: #10375C;
}

.navbar-nav .nav-link:hover {
  color: #FF7B00; /* Hover text color */
}
.btn-contact {
  padding: 10px 20px;
  background-color: #FF7B00;
  color: #ffffff !important;
  transition: background-color 0.3s ease-in-out, border-color 0.3s ease-in-out, color 0.3s ease-in-out;
}

.btn-contact:hover {
  background-color: #ffffff; /* White background on hover */
  color: #FF7B00 !important; /* Text color on hover */
  border: 1px solid #FF7B00; /* Border color on hover */
}

.navbar-nav .nav-item:last-child {
  margin-right: 40px; /* Remove margin from the last item (Contact Us button) */
}

.navbar-nav .nav-item:nth-last-child(2) {
  margin-right: 15px; /* Adjust the margin before the Contact Us button */
}
/* Reset dropdown styles */
.dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  background-color: #ffffff;
  border: 1px solid #ddd;
  padding: 0;
  margin: 0;
}

/* Header Section */
.header-section {
  position: relative;
  background-image: url('/images/service\ hero.png'); 
  background-size: cover;
  background-position: center;
  height: 100vh;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  overflow: hidden;
  perspective: 1000px;
  object-fit: cover;
  margin-bottom: 40px;
}

/* Parallax effect for the background image */
.header-section::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(16, 55, 86, 0.7); /* Overlay color */
  z-index: 1;
  transform: translateZ(-1px) scale(2);
}

/* Styling for the header content */
.header-content {
  position: relative;
  z-index: 2;
  max-width: 800px;
  animation: fadeIn 1.5s ease-out;
}

/* Animated heading with keyframes */
.header-content h1 {
  font-size: 3.5rem;
  font-weight: bold;
  line-height: 1.2;
  animation: typing 3s steps(40, end), blink-caret .75s step-end infinite;
  white-space: nowrap;
  overflow: hidden;
  color: #ffffff;
  border-right: .15em solid #ff7b00;
  margin-bottom: 30px;
}

/* Styling for the paragraph with slide-in effect */
.header-content p {
  font-size: 1.5rem;
  margin-bottom: 40px;
  color: antiquewhite;
  animation: slideInUp 1s ease-out;
}

/* Button styling and hover effects */
.header-content .btn {
  font-size: 1.2rem;
  padding: 15px 40px;
  border-radius: 50px;
  text-transform: uppercase;
  font-weight: medium;
  animation: bounceIn 1.5s ease-out;
  animation-delay: 0.5s;
  display: inline-block;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
  transition: all 0.3s ease;
}

/* Primary button color */
.header-content .btn-primary {
  background-color: #ff7b00;
  color: white;
  border: none;
}

/* Hover effect for the button */
.header-content .btn-primary:hover {
  background-color: white;
  color: #ff7b00;
  transform: translateY(-5px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
}

/* Keyframes for fade-in animation */
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* Keyframes for slide-in animation */
@keyframes slideInUp {
  from {
    transform: translateY(50px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

/* Keyframes for bounce-in animation */
@keyframes bounceIn {
  from, 20%, 40%, 60%, 80%, to {
    transform: translateY(0);
  }
  40% {
    transform: translateY(-15px);
  }
  60% {
    transform: translateY(10px);
  }
  80% {
    transform: translateY(-5px);
  }
}

/* Keyframes for typing animation */
@keyframes typing {
  from { width: 0; }
  to { width: 100%; }
}

/* Keyframes for caret blinking effect */
@keyframes blink-caret {
  from, to { border-color: transparent; }
  50% { border-color: #ff7b00; }
}
/* Responsive adjustments for tablets and mobile devices */
@media (max-width: 992px) {
  .header-content h1 {
    font-size: 2.5rem; /* Smaller heading size for tablets */
  }

  .header-content p {
    font-size: 1.2rem; /* Smaller paragraph size for tablets */
  }

  .header-content .btn {
    font-size: 1rem; /* Smaller button size for tablets */
    padding: 12px 30px;
  }
}

@media (max-width: 768px) {
  .header-content h1 {
    font-size: 2rem; /* Smaller heading size for mobile devices */
  }

  .header-content p {
    font-size: 1rem; /* Smaller paragraph size for mobile devices */
    margin-bottom: 20px;
  }

  .header-content .btn {
    font-size: 0.9rem; /* Smaller button size for mobile devices */
    padding: 10px 25px;
  }

  .header-section {
    padding: 0 15px; /* Add padding for smaller screens */
  }
}

/* Services Section */
.service-card {
    transition: transform 0.3s;
}
.service-card:hover {
    transform: translateY(-5px);
}
.bg-primary {
    background-color: #103756 !important;
}
/* Unique classes for Detailed Services Section */
.detailed-service-card {
    overflow: hidden;
    transition: transform 0.3s, box-shadow 0.3s;
    height: 300px; /* Fixed height for uniformity */
    display: flex; /* Ensure the card is a flex container */
    flex-direction: row; /* Arrange image and content side by side */
}

.detailed-service-card:hover {
    transform: scale(1.02);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.detailed-service-img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Ensures the image covers the container */
    animation: fadeIn 1s ease-in-out;
}

.detailed-service-row {
    height: 100%; /* Ensure the row takes full height of the card */
    display: flex; /* Ensure items are side by side */
}

.detailed-service-body {
    display: flex;
    flex-direction: column;
    justify-content: center; /* Center content vertically */
    text-align: left; /* Center text horizontally */
    padding: 2rem; /* Optional: Adjust padding for better spacing */
}
.detailed-service-body h5 {
    margin-bottom: 0.5rem; /* Space between heading and paragraph */
}

.detailed-service-body p {
    margin-bottom: 0; /* Ensure there's no extra margin at the bottom */
}

@keyframes fadeIn {
    0% {
        opacity: 0;
        transform: translateY(10%);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}
/* Responsive adjustments */
@media (max-width: 768px) {
  .detailed-service-card {
    flex-direction: column; /* Stack items vertically */
    height: auto; /* Let the card's height adjust based on content */
  }

  .detailed-service-row {
    flex-direction: column; /* Stack image and content vertically */
    height: auto; /* Let row height adjust based on content */
  }

  .detailed-service-img {
    height: 200px; /* Set a fixed height for images on small screens */
  }

  .detailed-service-body {
    padding: 1.5rem; /* Reduce padding for smaller screens */
    text-align: center; /* Center text horizontally */
  }
}

@media (max-width: 576px) {
  .detailed-service-img {
    height: 150px; /* Further reduce image height for very small screens */
  }

  .detailed-service-body h5 {
    font-size: 1.25rem; /* Adjust heading size for small screens */
  }

  .detailed-service-body p {
    font-size: 0.875rem; /* Adjust paragraph size for small screens */
  }
}



.card {
    overflow: hidden;
    transition: transform 0.3s, box-shadow 0.3s;
    height: 300px; /* Fixed height for the card */
    display: flex; /* Ensure the card is a flex container */
    flex-direction: row;
}
.card:hover {
    transform: scale(1.02);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
.img-fluid {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Ensures the image covers the container */
    animation: fadeIn 1s ease-in-out;
}
.card .row.g-0 {
    display: flex; /* Ensure the image and content are always side by side */
    align-items: stretch; /* Make sure the content aligns properly */
    height: 100%; /* Allow the height to adjust based on content */
}

/* Adjust the image styling for the detailed services section */
.img-fluid {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Ensures the image fills the box while maintaining aspect ratio */
    animation: fadeIn 1s ease-in-out;
}
.card-body {
    display: flex;
    flex-direction: column;
    justify-content: center; /* Center content vertically */
    text-align: center; /* Center text horizontally */
    padding: 1rem; /* Optional: Adjust padding for better spacing */
}


@keyframes fadeIn {
    0% {
        opacity: 0;
        transform: translateY(10%);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

/*Process*/
.process-section {
    padding: 60px 0;
    background-color: #f8f9fa;
  }
  .process-step {
    text-align: center;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    padding: 20px;
  }
  .process-step:hover {
    transform: translateY(-10px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  }
  .process-icon {
    font-size: 50px;
    color: #103756;
    margin-bottom: 20px;
    transition: color 0.3s ease;
  }
  .process-step:hover .process-icon {
    color: #ff7b00;
  }
  .process-description {
    margin-top: 10px;
  }
  .process-step h4 {
    margin-bottom: 10px;
    font-size: 1.25rem;
  }
  .process-step p {
    font-size: 1rem;
  }
  
  @media (min-width: 768px) {
    .process-step {
      padding: 30px;
    }
  }
  @media (max-width: 576px) {
    .process-step {
      padding: 15px;
    }
  
    .process-step h4 {
      font-size: 1.1rem;
    }
  
    .process-step p {
      font-size: 0.875rem;
    }
  }
  
  @media (max-width: 768px) {
    .process-step {
      padding: 20px;
    }
  
    .process-step h4 {
      font-size: 1.15rem;
    }
  
    .process-step p {
      font-size: 0.95rem;
    }
  }
  
/* CTA Section */
.btn-custom {
    background-color: #ffffff;
    color: #103756;
    border: 2px solid #103756;
    transition: background-color 0.3s, color 0.3s;
}
.btn-custom:hover {
    background-color: #103756;
    color: #ffffff;
}
/*banner*/
.banner {
    position: relative;
    background-image: url('/images/about\ us\ 2.png'); /* Background Image */
    background-size: cover;
    background-position: center;
    color: white;
    text-align: center;
    padding: 80px 0;
    margin: 30px 0;
    animation: gradientShift 10s ease infinite
  }
  .banner::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to right, rgba(16, 55, 86, 0.7), rgba(255, 123, 0, 0.7)); /* Gradient Overlay */
    z-index: 1;
    background-size: 200% 200%;
  animation: gradientShift 10s ease infinite;
    
  }
  .banner-content {
    position: relative;
    z-index: 2;
    max-width: 800px;
    margin: 0 auto;
    padding: 20px;
    animation: fadeInUp 1s ease-out;
  }
  .banner h1 {
    font-size: 2.5rem;
    margin-bottom: 20px;
    font-weight: bold;
    color: #ffffff;
  }
  .banner p {
    font-size: 1.2rem;
    margin-bottom: 30px;
    color: #f8f9fa;
  }
  .banner .btn {
    font-size: 1rem;
    padding: 12px 30px;
    border-radius: 50px;
    font-weight: 6px;
  }
  .banner .btn-primary {
    background-color: #ffffff;
    color: #103756;
    border: 2px solid #103756;
    transition: background-color 0.3s ease, color 0.3s ease;
  }
  .banner .btn-primary:hover {
    background-color: #103756;
    color: #ffffff;
    border: 2px solid #103756;
  }
  .banner-content h1, .banner-content p, .banner-content .btn {
    transition: opacity 0.5s ease-in-out, transform 0.5s ease-in-out;
  }
  @keyframes fadeInUp {
    from {
      opacity: 0;
      transform: translateY(20px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
  @keyframes gradientShift {
    0% {
      background-position: 0% 0%;
    }
    50% {
      background-position: 100% 100%;
    }
    100% {
        background-position: 0% 0%;
      }
  }
  .footer {
    background-color: #10375C;
    color: #fff;
    padding: 40px 0;
  }
  .footer .divider {
    border-top: 1px solid #a8a8a8;
    margin: 40px 0;
  }
  .footer .contact-form input,
  .footer .contact-form textarea {
    margin-bottom: 10px;
    border-radius: 5px;
  }
  .footer .contact-form button {
    background-color: #ff7b00;
    border: none;
    border-radius: 5px;
  }
  
  .footer .contact-form button:hover {
    background-color: white;
    border: none;
    border-radius: 5px;
    color: #ff7b00;
  }
  .footer .address i {
    color: #ff7b00;
    margin-right: 10px;
    font-size: 24px;
  }
  .footer .social-icons i {
    font-size: 20px;
    margin-right: 10px;
    color: #fff;
  }
  .footer .bottom-footer {
    border-top: 1px solid #333;
    padding-top: 20px;
    margin-top: 20px;
  }
  .footer .row-first .col-md-8,
  .footer .row-first .col-md-4 {
      margin-bottom: 20px;
  }
  .footer .row-first .col-md-4 img {
      max-width: 100%;
  }
  .footer .row-first .form-group.col-md-8,
  .footer .row-first .form-group.col-md-4 {
      padding-right: 5px;
      padding-left: 5px;
  }
  .footer .row-first .contact-form {
      margin-bottom: 20px;
  }
  li a{
    text-decoration: none;
    color: #a8a8a8;
  }
  li a:hover{
    
    color: #FF7B00;
  }