@charset "utf-8";
/** 
* 
* -----------------------------------------------------------------------------
*
* Template : Clenia - Cleaning Services HTML Template
* Author : devsdesign
* Author URI : http://www.devsdesign.com/ 
*
* -----------------------------------------------------------------------------
* 
**//* TABLE OF CONTENT
---------------------------------------------------------
	01. General CSS
	02. Global Class CSS
	03. Header Section CSS
	04. Sticky Menu CSS
	05. About Section CSS
	06. Breadcrumbs Section CSS
	07. Banner Section CSS
	08. Cleaning Section CSS
	09. Choose Section CSS
	10. Slider Section CSS
	11. Counter Section CSS
	12. Contact Section CSS
	13. Newsletter Section CSS
	14. Video Section CSS
	15. Process Section CSS
	16. Project Section CSS
	17. Skill-bar Section CSS
	18. Services Section CSS
	19. Faq Section CSS
	20. Team Section CSS
	21. Partner Section CSS
	22. Pricing Section CSS
	23. Blog Section CSS
	24. Testimonial Section CSS
	25. Footer Section CSS
	26. Scroll Up CSS
	27. Preloader CSS
	28. Animation Part CSS

--------------------------------------------------------*/

.header {
position: sticky;
top: 0;
z-index: 1000;
background-color: #fff;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}
.navbar-brand img {
max-height: 80px;
}
.navbar-nav {
margin-left: auto;
}
.navbar-nav .nav-link {
font-weight: bold;
color: #000;
margin-right: 20px;
text-transform: uppercase;
transition: color 0.3s;
}
.navbar-nav .nav-link:hover {
color: #d4af37;
}
.navbar-toggler {
border: none;
}
.navbar-toggler-icon {
background-color: #000;
width: 30px;
height: 3px;
position: relative;
}
.navbar-toggler-icon::before,
.navbar-toggler-icon::after {
content: '';
position: absolute;
left: 0;
width: 30px;
height: 3px;
background-color: #000;
}
.navbar-toggler-icon::before {
top: -8px;
}
.navbar-toggler-icon::after {
top: 8px;
}

/* Consistent navbar alignment and styling */
.navbar-light .navbar-toggler-icon {
background-image: none;
}

@media (max-width: 768px) {
/* Navbar mobile adjustments */
.navbar-nav {
margin: 0;
flex-direction: column;
align-items: center;
}

.navbar-nav .nav-link {
margin-right: 0;
margin-bottom: 10px;
}

.btn-primary {
width: 100%;
margin-top: 10px;
}
}


/* Banner Section */


/* Banner  */


/* about content */

.about-section {
padding: 50px 20px;
}

.about-content {
display: flex;
flex-wrap: wrap; /* Allows elements to stack on smaller screens */
gap: 20px;
align-items: center;
}

.text-content {
flex: 1; /* Takes up available space */
max-width: 600px;
}

.text-content h3 {
font-size: 1.2rem;
color: #007aff;
font-weight: bold;
margin-bottom: 10px;
}

.text-content h1 {
font-size: 2rem;
margin-bottom: 20px;
}

.text-content p {
font-size: 1rem;
margin-bottom: 20px;
color: #555;
}

.text-content ul {
list-style: none;
padding: 0;
}

.text-content ul li {
display: flex;
align-items: center;
margin-bottom: 10px;
color: #007aff;
}

.text-content ul li i {
margin-right: 10px;
}

.image-container {
flex: 1;
text-align: center;
}

.image-container img {
max-width: 100%;
height: auto; /* Keeps the image responsive */
border-radius: 10px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

/* Responsive Styling */
@media (max-width: 768px) {
.about-content {
flex-direction: column;
text-align: center;
}

.text-content {
max-width: 100%;
}

.image-container {
margin-top: 20px;
}
}

   /* about Company section */
.about-us {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  padding: 50px 20px;
  background-color: #f9f9f9;
}

.about-us-content {
  display: flex;
  flex-direction: row;
  max-width: 1000px;
  width: 100%;
  align-items: center; /* Vertically center */
  gap: 30px;
}

.text-container {
  flex: 1;
  padding: 20px;
  display: flex;
  flex-direction: column;
  justify-content: center; /* Vertically center text */
}

.left-text {
  font-size: 1rem;
  line-height: 1.6;
  color: #333;
}

.divider {
  width: 2px;
  background-color: #ddd;
  height: 80%; /* Adjust for full height */
  align-self: center;
}

.right-content h2 {
  font-size: 1.8rem;
  font-weight: bold;
  margin-bottom: 15px;
}

.right-content .highlight {
  color: #007bff;
}

.stats {
  display: flex;
  justify-content: space-between;
  margin-top: 20px;
}

.stat-item {
  text-align: center;
}

.about-counter {
  font-size: 2rem;
  font-weight: bold;
  color: #007bff;
}

/* Mobile Responsiveness */
@media (max-width: 768px) {
  .about-us-content {
    flex-direction: column; /* Stack items vertically */
    text-align: center;
  }

  .text-container {
    order: 1; /* Left-side text first */
    padding-bottom: 20px;
  }

  .hero-image {
    order: 2; /* Image second */
    max-width: 100%;
    height: auto;
    margin-bottom: 20px;
  }

  .right-content {
    order: 3; /* Counters third */
  }

  .stats {
    flex-direction: column;
    align-items: center;
    gap: 15px;
  }
}


   /* about Company section */
   
    /* vision section start */
    
.about-section {
    padding: 32px;
    background-color: #f9fafb;
}

.container {
    max-width: 960px;
    margin: 0 auto;
}

/* Flexbox Layout */
.about-content {
    display: flex;
    flex-direction: column;
    gap: 32px;
}

@media (min-width: 768px) {
    .about-content {
        flex-direction: row;
        justify-content: space-between;
    }
}

/* Left Column */
.left-column {
    flex: 1;
}

.section-title {
    font-size: 14px;
    color: #2563eb;
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}

.heading {
    font-size: 32px;
    font-weight: bold;
    color: #1f2937;
    margin-bottom: 24px;
}

.hero-image {
    width: 100%;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

/* Right Column */
.right-column {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 32px;
}

/* Info Boxes */
.info-box {
    position: relative;
    padding-left: 24px;
}

.info-title {
    font-size: 20px;
    font-weight: bold;
    color: #2563eb;
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}

.info-content {
    background-color: #1e3a8a;
    color: white;
    padding: 16px;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

/* Responsive */
@media (max-width: 768px) {
    .about-content {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .right-column {
        text-align: left;
        padding-left: 0;
    }
}


  /* vision box end */  

/* Container for Services Section */
/* Base styles for the service box */
.services-item {
    background: #ffffff;
    padding: 25px;
    border-radius: 10px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease-in-out;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 160px;
    margin-top: 60px;
}

.text-center {
    
    margin-top: 40px;
    margin-bottom: 20px;
    font-size: 2.8rem;
    font-weight: bold;
    
}

/* Hover effect: Change background to blue and text to white */
.services-item:hover {
    background: #007bff !important; /* Force blue background */
    color: #ffffff !important; /* Force white text */
    transform: translateY(-5px);
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.15);
}

/* Ensure text inside the box changes color on hover */
.services-item:hover .title a {
    color: #ffffff !important; /* White text on hover */
}
.services-item:hover .meta-description {
    color: #ffffff !important; /* White text on hover */
}

/* Service Title Styling */
.services-content .title a {
    color: #007bff; /* Default blue heading */
    text-decoration: none;
    font-size: 1.8rem;
    font-weight: bold;
    transition: color 0.3s ease-in-out;
}

/* Change heading color on hover */
.services-item:hover .title a {
    color: #ffffff !important;
}

/* Meta description styling */
.services-content .meta-description {
    color: #666;
    font-size: 1rem;
    transition: color 0.3s ease-in-out;
    line-height: 1.6;
}

/* Responsive Layout Fixes */
@media (max-width: 1024px) {
    .services-item {
        padding: 20px;
        min-height: 180px;
    }
    .services-content .title a {
        font-size: 1.3rem;
    }
    .services-content .meta-description {
        font-size: 0.95rem;
    }
}

@media (max-width: 768px) {
    .services-item {
        padding: 15px;
        min-height: 170px;
    }
    .services-content .title a {
        font-size: 1.2rem;
    }
    .services-content .meta-description {
        font-size: 0.9rem;
    }
}

@media (max-width: 576px) {
    .services-item {
        padding: 12px;
        min-height: auto;
    }
    .services-content .title a {
        font-size: 1.1rem;
    }
    .services-content .meta-description {
        font-size: 0.85rem;
    }
}

/* Servicedesc Section */


.servicedesc {
        font-family: 'Roboto', sans-serif;
    }

/* Servicedesc Section */


/* State Description Section */
.state-description {
    width: 100%;
    max-width: 100%;
    padding: 60px 20px;
    background-color: #f9fafb;
    text-align: center;
}

.state-description .container {
    max-width: 1400px; /* Increased from 1200px to 1400px */
    margin: 0 auto;
    padding: 0 40px; /* Increased side padding */
}

.state-description h1 {
    font-size: 2.5rem;
    font-weight: bold;
    color: #333;
    margin-bottom: 20px;
    word-wrap: break-word; /* Prevents long words from overflowing */
    overflow-wrap: break-word;
    white-space: normal;
}

.state-description h2 {
    font-size: 2.8rem;
    color: #007bff;
    margin-bottom: 20px;
}

.state-description p {
    font-size: 1.1rem;
    color: #666;
    line-height: 1.6;
    max-width: 1000px; /* Increased max-width */
    margin: 0 auto 40px;
}

.state-description .features {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
}

.state-description .feature {
    flex: 1 1 300px; /* Increased minimum width */
    max-width: 400px; /* Prevents overly wide boxes */
    background-color: #fff;
    padding: 30px; /* Increased padding */
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    text-align: center;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.state-description .feature:hover {
    transform: translateY(-10px);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
}

.state-description .feature .icon {
    font-size: 3rem; /* Slightly increased */
    margin-bottom: 20px;
    color: #007bff;
}

.state-description .feature h3 {
    font-size: 1.75rem; /* Increased for better readability */
    font-weight: bold;
    color: #333;
    margin-bottom: 15px;
}

.state-description .feature p {
    font-size: 1.1rem;
    color: #666;
    margin: 0;
}

/* Responsive Design */
@media (max-width: 1024px) {
    .state-description .container {
        max-width: 90%;
        padding: 0 30px;
    }

    .state-description h1 {
        font-size: 2.25rem;
    }

    .state-description h2 {
        font-size: 1.6rem;
    }

    .state-description .feature {
        flex: 1 1 45%; /* Adjusts for tablet */
        max-width: 100%;
    }
}

@media (max-width: 768px) {
    .state-description .container {
        max-width: 100%;
        padding: 0 20px;
    }

    .state-description h1 {
        font-size: 2rem;
    }

    .state-description h2 {
        font-size: 1.5rem;
    }

    .state-description p {
        font-size: 1rem;
    }

    .state-description .features {
        flex-direction: column;
        gap: 15px;
    }

    .state-description .feature {
        flex: 1 1 100%;
        max-width: 100%; /* Makes features full-width */
        padding: 20px; /* Adjusted padding for mobile */
    }
}

 /* states description */
 
 /* counters */

.counters {
padding: 10px 20px; /* Added extra padding from top */
background-color: #007bff; /* Blue background */
text-align: center;
}

.counters .counter-item {
margin-bottom: 10px; /* Reduced spacing */
margin-top: 20px;
}

.counters .counter-item h3 {
font-size: 2.5rem; /* Adjusted font size */
font-weight: bold;
color: #fff !important;
margin-bottom: 5px; /* Reduced spacing */
}

.counters .counter-item p {
font-size: 1.5rem; /* Adjusted font size */
color: #ffffff; /* Light gray text */
}

@media (max-width: 768px) {
.counters {
padding: 30px 15px; /* Adjusted padding for smaller screens */
}

.counters .counter-item {
margin-bottom: 10px;
}
}

    
/* State-City Layout */

/* 📌 State & City Layout */
.state-city-layout {
    display: flex;
    gap: 20px;
    margin-top: 30px;
    align-items: flex-start;
    flex-wrap: wrap;
}

/* ✅ Mobile Layout - Stack states above cities */
@media (max-width: 768px) {
    .state-city-layout {
        flex-direction: column;
        gap: 10px;
    }
}

/* 🎯 Left Side: States List */
.states-list {
    flex: 0 0 250px; /* Adjust width for desktop */
    background: #007bff;
    border-radius: 8px;
    padding: 15px;
    max-height: 400px;
    overflow-y: auto;
    width: 100%;
}

/* ✅ Mobile - Full width */
@media (max-width: 768px) {
    .states-list {
        width: 100%;
        max-width: 100%;
        margin: 0 auto;
    }
}

/* 🔹 State Links */
.state-item {
    margin-bottom: 5px;
}

.state-item a {
    font-size: 16px; /* Reduce text size for mobile */
    color: #fff;
    font-weight: bold;
    text-decoration: none;
    display: block;
    padding: 10px;
    border-radius: 4px;
    transition: background 0.3s ease;
    text-align: center; /* Center-align state names */
}

.state-item a:hover,
.state-item.active a {
    background: #ffc107;
    color: #000;
}

/* 📌 Right Side: Cities Section */
.cities-section {
    flex: 1;
    padding: 15px;
    background: #f9f9f9;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    width: 100%;
}

/* ✅ Mobile - Cities below states */
@media (max-width: 768px) {
    .cities-section {
        width: 100%;
        margin-top: 10px; /* Small spacing */
    }
}

/* 🔹 State Name Header */
.state-name-header {
    font-size: 22px;
    font-weight: bold;
    color: #333;
    margin-bottom: 15px;
    text-align: center;
}

/* 🔹 Cities Grid */
.cities-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 10px;
}

/* ✅ Mobile Adjustments */
@media (max-width: 576px) {
    .cities-grid {
        grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    }
}

/* 🏡 City Item */
.city-item {
    font-size: 14px;
    display: flex;
    align-items: center;
    background: #fff;
    padding: 10px;
    border-radius: 4px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    justify-content: center;
}

.city-item:hover {
    transform: translateY(-3px);
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
}

.city-item a {
    color: #007bff;
    text-decoration: none;
}

.city-item a:hover {
    text-decoration: underline;
}


/* states with city */


/* States with Districts Section */
.states-with-district {
    margin-top: 60px;
}

.rs-addon-services {
    text-align: center;
    font-weight: bold;
}

.state-item {
    margin-bottom: 20px;
}

.state-title {
    font-size: 28px;
    font-weight: bold;
    color: #007bff;
    margin-bottom: 30px;
}

.cities-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 10px;
}

.city-item {
    background-color: #fff;
    padding: 10px;
    border-radius: 4px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    text-align: left;
    display: flex;
    align-items: center;
}

.city-item .location-icon {
    font-size: 16px;
    margin-right: 8px;
    color: #007bff;
}

.city-item a {
    color: #007bff;
    text-decoration: none;
}

.city-item a:hover {
    text-decoration: underline;
}

/* Responsive Design */
@media (max-width: 768px) {
    .cities-grid {
        grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    }
}

 /* Why hire us */
 
.why-hire-us {
  background: url('background.jpg') center/cover no-repeat;
  text-align: center;
  padding: 40px 20px;
  position: relative;
}

.container {
  max-width: 1400px;
  margin: 0 auto;
}

h2 {
  font-size: 28px; /* Smaller font size for mobile */
  color: #007bff;
  font-weight: bold;
  margin-bottom: 30px;
}

.features {
  display: flex;
  flex-wrap: wrap; /* Allow features to wrap on smaller screens */
  justify-content: center;
  gap: 20px; /* Reduced gap for mobile */
}

.feature {
  background-color: #007bff;
  color: white;
  padding: 20px 15px; /* Reduced padding for mobile */
  width: 100%; /* Full width on mobile */
  max-width: 220px; /* Limit width for larger screens */
  border-radius: 8px;
  text-align: center;
  box-sizing: border-box; /* Ensure padding is included in width */
}

.feature img {
  width: 50px; /* Smaller icons for mobile */
  margin-bottom: 10px; /* Reduced margin for mobile */
}

.feature p {
  font-size: 16px; /* Smaller font size for mobile */
  font-weight: bold;
  margin: 0; /* Remove default margin */
}

.cta-button {
  display: inline-block;
  background-color: #007bff;
  color: white;
  padding: 12px 25px;
  font-size: 16px; /* Smaller font size for mobile */
  font-weight: bold;
  border-radius: 5px;
  margin-top: 40px; /* Reduced margin for mobile */
  text-decoration: none;
  border: none;
  cursor: pointer;
}

.cta-button:hover {
  background-color: #005f87;
}

/* Media Queries for Mobile Devices */
@media (max-width: 768px) {
  h2 {
    font-size: 24px; /* Even smaller font size for very small screens */
  }

  .features {
    gap: 15px; /* Further reduce gap for very small screens */
  }

  .feature {
    padding: 15px 10px; /* Further reduce padding for very small screens */
  }

  .feature img {
    width: 40px; /* Smaller icons for very small screens */
  }

  .feature p {
    font-size: 14px; /* Smaller font size for very small screens */
  }

  .cta-button {
    font-size: 14px; /* Smaller font size for very small screens */
    padding: 10px 20px; /* Smaller padding for very small screens */
    margin-top: 30px; /* Further reduce margin for very small screens */
  }
}

 /* Why hire us */
    
 .why-hire-us {
  background: url('background.jpg') center/cover no-repeat;
  text-align: center;
  padding: 60px 20px;
  position: relative;
  margin-top: 30px;
}

.container {
  max-width: 1100px;
  margin: 0 auto;
}

h2 {
  font-size: 40px;
  color: #007bff;
  font-weight: bold;
  margin-bottom: 40px;
}

.features {
  display: flex;
  justify-content: center;
  gap: 30px;
  margin-top: 30px;
}

.feature {
  background-color: #007bff;
  color: white;
  padding: 40px 20px;
  width: 250px;
  border-radius: 8px;
  text-align: center;
}

.feature img {
  width: 70px;
  margin-bottom: 15px;
}

.feature p {
  font-size: 20px;
  font-weight: bold;
}

.cta-button {
  display: inline-block;
  background-color: #007bff;
  color: white;
  padding: 12px 25px;
  font-size: 20px;
  font-weight: bold;
  border-radius: 5px;
  margin-top: 60px;
  text-decoration: none;
  border: none;
  cursor: pointer;
}

.cta-button:hover {
  background-color: #005f87;
  transform: translateY(-3px); /* Slight lift effect */
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2); /* Shadow effect */
    color: white;
}


/* Why Choose Us Section Styles */
.why-choose-us {
  padding: 90px 20px;
  background-color: #ffffff;
  text-align: center;
}

.why-choose-us h2 {
  font-size: 2.5rem;
  font-weight: bold;
  margin-bottom: 60px;
  color: #333;
}

/* Features Container */
.why-container .why-features {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
}

/* Feature Box */
.why-container .why-feature {
  flex: 1 1 calc(33.333% - 40px);
  background-color: #fff;
  padding: 20px;
  border-radius: 15px;
  box-shadow: 0 8px 15px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  perspective: 1000px; /* Enables 3D effect */
  transform-style: preserve-3d;
  text-align: center;
}

/* Icon Styles */
.why-container .why-feature i {
  font-size: 3.5rem;
  color: #007bff;
  margin-bottom: 15px;
}

/* Feature Heading */
.why-container .why-feature h3 {
  font-size: 1.5rem;
  font-weight: bold;
  margin-bottom: 10px;
  color: #333;
}

/* Feature Description */
.why-container .why-feature p {
  font-size: 0.95rem;
  color: #555;
}

/* Hover Effect for Pop-up and Shadow */
.why-container .why-feature:hover {
  transform: translateY(-15px) scale(1.05) rotateX(5deg) rotateY(5deg); /* Pop-up with 3D effect */
  box-shadow: 0 12px 25px rgba(0, 0, 0, 0.2); /* Stronger shadow */
}

/* Responsive Design */
@media (max-width: 768px) {
  .why-container .why-feature {
    flex: 1 1 100%; /* Full-width on smaller screens */
  }
}

/* quote-container */

body {
font-family: 'Roboto', sans-serif;
}

.quote-container {
width: 100%;
display: flex;
align-items: center;
justify-content: center;
padding: 50px 0;
background-color: #ffffff;
}

.quote-box {
display: flex;
flex-direction: row;
width: 100%;
border-radius: 0px;
overflow: hidden;
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
background-color: #003366;
}

.quote-content {
flex: 1;
padding: 40px;
background-color: #007aff;
color: #fff;
}

.quote-content h3 {
font-size: 2.5rem;
font-weight: bold;
margin-bottom: 1.5rem;
color: white;
}

.quote-content p {
font-size: 1rem;
margin-bottom: 1.5rem;
line-height: 1.8;
}

.call-button {
display: inline-flex;
align-items: center;
justify-content: center;
background-color: #fff;
color: #6b46c1;
padding: 12px 24px;
border-radius: 5px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
font-weight: bold;
text-transform: uppercase;
font-size: 1rem;
cursor: pointer;
transition: background-color 0.3s ease, transform 0.3s ease;
}

.call-button:hover {
background-color: #e0d7f5;
transform: scale(1.05);
}

.call-button i {
margin-right: 8px;
}

.quote-image {
flex: 1;
background-size: cover;
background-position: center;

}

@media (max-width: 768px) {
.quote-box {
flex-direction: column;
}

.quote-content {
padding: 20px;
text-align: center;
}

.quote-content h1 {
font-size: 2rem;
}

.quote-image {
height: 250px;
}
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}


/* Work Process Container */
.work-process-container {
text-align: center;
padding: 50px 20px;
background-color: #ffffff;
}

/* Titles */
.work-process-title {
font-size: 36px;
font-weight: 700;
color: #003366;
text-transform: uppercase;
letter-spacing: 2px;
margin-bottom: 100px;
border-bottom: 4px solid #003366;
display: inline-block;
padding-bottom: 5px;
}

/* Workflow Section */
.workflow {
display: flex;
justify-content: center;
align-items: center;
gap: 40px;
flex-wrap: nowrap; /* Items remain in a single row on larger screens */
position: relative;
}

/* Individual Step */
.step {
text-align: center;
width: 150px;
position: relative;
}

.step .icon {
background-color: #007aff;
width: 80px;
height: 80px;
border-radius: 50%;
margin: 0 auto 15px;
display: flex;
justify-content: center;
align-items: center;
}

.step .icon img {
width: 40px;
height: 40px;
}

.step h4 {
font-size: 18px;
font-weight: 600;
color: #003366;
margin-bottom: 10px;
}

.step p {
font-size: 14px;
color: #666;
margin: 0;
}

/* Line Between Steps */
.line {
height: 2px;
width: 60px;
background-color: #ccc;
margin: 0 10px;
align-self: center;
}

/* Responsive Design */
@media (max-width: 768px) {
/* Make workflow items stack vertically */
.workflow {
flex-wrap: wrap; /* Items wrap to the next row */
gap: 20px; /* Reduced gap for smaller screens */
}

/* Adjust step size for mobile */
.step {
width: 100%; /* Full width for smaller screens */
margin-bottom: 20px; /* Add spacing between stacked items */
}

/* Hide connecting lines on smaller screens */
.line {
display: none;
}

/* Title adjustments */
.work-process-title {
font-size: 24px; /* Smaller title size for mobile */
margin-bottom: 50px; /* Reduced bottom spacing */
}

.step .icon {
width: 60px; /* Smaller icon size */
height: 60px;
}

.step .icon img {
width: 30px; /* Adjusted icon image size */
height: 30px;
}

.step h4 {
font-size: 16px; /* Smaller font for mobile */
}

.step p {
font-size: 12px; /* Adjusted text size */
}
}
/* Contact Us Container */
.contact-us-container {
display: flex;
gap: 20px;
padding: 50px;
justify-content: space-between;
align-items: flex-start;
margin-top: 40px;
flex-wrap: wrap; /* Ensures wrapping on smaller screens */
}

/* Contact Section */
.contact-us {
flex: 0.5;
text-align: left;
padding: 20px;
background-color: #ffffff;
border-radius: 10px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

/* Subtitles */
.contact-subtitle {
color: #007bff;
font-size: 2.5rem;
font-weight: bold;
letter-spacing: 1px;
text-transform: uppercase;
margin-bottom: 20px;
text-align: center;
}

/* Titles */
.contact-title {
font-size: 2rem;
font-weight: 700;
color: #212529;
margin-bottom: 55px;
}

/* Description */
.contact-description {
font-size: 1rem;
color: #6c757d;
margin-bottom: 30px;
}

/* Contact Details */
.contact-details {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 20px;
}

/* Contact Items */
.contact-item {
display: flex;
align-items: center;
background-color: #fff;
padding: 20px;
border-radius: 10px;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
transition: transform 0.3s, box-shadow 0.3s;
}

.contact-item:hover {
transform: translateY(-5px);
box-shadow: 0 6px 15px rgba(0, 0, 0, 0.2);
}

.contact-item .icon {
width: 50px;
height: 50px;
background-color: #007bff;
display: flex;
justify-content: center;
align-items: center;
border-radius: 50%;
margin-right: 15px;
}

.contact-item .icon img {
width: 25px;
height: 25px;
}

.contact-item .info h5 {
font-size: 1rem;
font-weight: bold;
margin: 0;
color: #212529;
}

.contact-item .info p {
font-size: 0.9rem;
color: #6c757d;
margin: 5px 0 0;
}

/* Appointment Form */
.appointment-form {
flex: 0.5;
background-color: #003366;
padding: 30px;
border-radius: 10px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.appointment-form h3 {
color: #fff;
margin-bottom: 20px;
}

.appointment-form input,
.appointment-form textarea {
width: 100%;
padding: 15px;
margin-bottom: 15px;
border-radius: 5px;
border: 1px solid #ccc;
}

.appointment-form textarea {
height: 120px;
resize: vertical;
}

.appointment-form button {
width: 100%;
padding: 15px;
background-color: red;
color: white;
border: none;
border-radius: 5px;
font-size: 18px;
cursor: pointer;
}

.appointment-form button:hover {
background-color: #cc0000;
}

/* Responsive Adjustments */
@media (max-width: 768px) {
/* Stack items vertically */
.contact-us-container {
flex-direction: column; /* Stack the columns */
gap: 30px; /* Increase spacing */
}

.contact-us,
.appointment-form {
flex: 1 1 100%; /* Full-width for smaller screens */
padding: 20px; /* Adjust padding for mobile */
}

.contact-details {
grid-template-columns: 1fr; /* Single column layout */
gap: 15px; /* Smaller gap between items */
}

.contact-item {
padding: 15px; /* Reduce padding for mobile */
}

.contact-item .icon {
width: 40px; /* Smaller icon size */
height: 40px;
}

.contact-item .icon img {
width: 20px; /* Adjusted image size */
height: 20px;
}

.contact-item .info h5 {
font-size: 0.9rem; /* Slightly smaller font size */
}

.contact-item .info p {
font-size: 0.8rem; /* Smaller description text */
}

.appointment-form h3 {
font-size: 1.5rem; /* Adjust title size */
}

.appointment-form input,
.appointment-form textarea {
padding: 10px; /* Adjust padding for inputs */
}
}

.faq-container {
max-width: 800px; /* Reduced width */
margin: 20px auto; /* Center the section with some vertical margin */
padding: 15px;
background-color: #fff; /* White background */
border-radius: 10px;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); /* Soft shadow */
}

.faq-title {
font-size: 2rem;
font-weight: 700;
text-align: center;
color: #000; /* Black text */
margin-bottom: 40px;
}

.card {
border: 1px solid #ddd;
border-radius: 5px;
margin-bottom: 10px;
}

.card-header {
background-color: #f7f7f7; /* Light background for headers */
color: #000; /* Black text */
padding: 10px 15px; /* Reduce padding for smaller height */
font-size: 1.1rem;
font-weight: 600;
cursor: pointer;
display: flex; /* Align "Q." and text inline */
align-items: center;
}

.card-link {
color: #000;
text-decoration: none;
display: inline-block;
margin-left: 5px; /* Space between Q. and question text */
flex-grow: 1; /* Ensure the link spans the remaining width */
}

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

.collapse {
border-top: 1px solid #ddd;
padding: 10px; /* Reduce padding for smaller height */
font-size: 1rem;
background-color: #fff;
color: #000;
}

.card-body {
font-size: 1rem;
line-height: 1.5;
}

/* Add Q. prefix inline with the question */
.card-header::before {
content: "Q. ";
font-weight: bold;
color: #003366; /* Optional color for Q prefix */
margin-right: 5px;
}

/* Add A. prefix for answers */
.card-body::before {
content: "A. ";
font-weight: bold;
color: #003366; /* Optional color for A prefix */
margin-right: 5px;
}

/* Service Area section */

.service-areas-section {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 50vh;
  background-color: white;
}

.service-areas-section h2 {
  font-size: 2.25rem;
  font-weight: 600;
  color: black;
}

.service-areas-section h2 i {
  color: #007bff; /* Changing icon color to blue */
}

.service-areas-section p {
  color: black;
  margin-top: 0.5rem;
  font-size:1.25rem;
}

.service-areas-section p a {
  color: #007bff; /* Anchor text color blue */
  text-decoration: none;
  display: inline-block;
  transition: transform 0.3s ease-in-out, text-decoration 0.3s;
  font-size:1.25rem;
}

.service-areas-section p a:hover {
  transform: scale(1.1); /* Expand animation on hover */
  text-decoration: underline;
}


/* Service Area section */


/* Footer Section */
/* Footer container styling */
.footer {
    background-color: #ffffff;
    text-align: center; /* Ensures text and inline elements are centered */
    padding: 20px 0;
    border-top: 1px solid #ccc;
    position: relative;
}

.footer-logo {
    display: flex;
    justify-content: center; /* Centers the image */
    align-items: center;
}

.footer-logo img {
    max-width: 200px; /* Adjust size as needed */
    height: auto;
    display: block;
    margin: 0 auto; /* Ensures it's centered */
}

.footer-text {
    margin-top: 10px;
}

.footer-text p {
    color: #6a1b9a; /* Adjust text color as needed */
    font-size: 18px;
    margin: 0;
}

.footer-text p a {
    color: #000000;
    text-decoration: none;
}

.footer-text p a:hover {
    text-decoration: underline;
}