/* Reset and Base */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }
  
  body {
    font-family: 'Poppins', sans-serif;
    line-height: 1.6;
    
  }
  
  a {
  text-decoration: none;
  color: inherit;
  }
  img {
    max-width: 100%;
    height: auto;
    display: block;
  }
  
  .logo {
    display: flex;
    align-items: center;
    height: 90px;
  }
  
  .logo img {
    height: 100%;
    object-fit: contain;
  }
  
  /* === NAVBAR (DESKTOP DEFAULT) === */
  .navbar {
    background: white;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    padding: 0.5rem 1.5rem;
    position: sticky;
    top: 0;
    z-index: 1000;
  }
  
  .navbar-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 0 1rem;
  }
  
  
  /* Nav Links (visible on desktop) */
  .nav-links {
    list-style: none;
    display: flex;
    gap: 2.5rem;
    margin-left: auto;
  }
  
  .nav-links li a {
    text-decoration: none;
    color: #333;
    font-weight: 600;
    font-family: 'Poppins', sans-serif;
    transition: color 0.3s ease;
  }
  
  .nav-links li a:hover {
    color: #0070f3;
  }
  
  /* Hamburger hidden on desktop */
  .hamburger {
    display: none;
  }
  
  
  .hero-banner {
  position: relative;
  width: 100%;
  min-height: 100vh;
    height: auto;
  background-image: url('images/Background2.png');
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  background-repeat: no-repeat;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow-x: hidden;
  }
  
  .hero-banner::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.4); /* dark overlay */
  z-index: 1;
  }
  
  .hero-content {
  position: relative;
  z-index: 2;
  text-align: center;
  color: white;
  padding: 1rem;
  opacity: 0;
  animation: fadeIn 1s ease-out forwards;
  animation-delay: 0.5s;
  }
  
  .slogan {
  font-size: 5rem;
  font-family: 'Poppins', sans-serif;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 2px;
  margin-bottom: 1rem;
  opacity: 0;
  animation: slideUp 1s ease-out forwards;
  animation-delay: 1s;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3), 0 0 25px rgba(0, 0, 0, 0.1);
  }
  
  .hero-content p {
  font-size: 1.5rem;
  font-family: 'Poppins', sans-serif;
  margin-bottom: 1.5rem;
  opacity: 0;
  animation: slideUp 1.2s ease-out forwards;
  animation-delay: 1.2s;
  }
  
  .bubble-button {
  overflow: hidden;
  position: relative;
  max-width: 100%;
  white-space: nowrap;
  --color: #0077ff;
  font-family: 'Poppins', sans-serif;
  display: inline-block;
  padding: 0.75em 2em;
  line-height: 1;
  cursor: pointer;
  font-size: 1.1rem;
  z-index: 1;
  color: var(--color);
  border: 2px solid var(--color);
  border-radius: 6px;
  background: transparent;
  overflow-x: hidden;
  transition: color 0.3s ease-in-out;
  }
  
  .bubble-button::before {
  content: "";
  position: absolute;
  background: var(--color);
  width: 300%;
  height: 300%;
  top: 100%;
  left: 100%;
  z-index: -1;
  border-radius: 50%;
  transition: all 0.4s ease-in-out;
  }
  
  .bubble-button:hover {
  color: white;
  }
  
  .bubble-button:hover::before {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  }
  a:focus,
  .bubble-button:focus {
  outline: 2px solid #0070f3;
  outline-offset: 4px;
  }
  
  /* Animations */
  @keyframes fadeIn {
  to {
      opacity: 1;
  }
  }
  
  @keyframes slideUp {
  0% {
      opacity: 0;
      transform: translateY(20px);
  }
  100% {
      opacity: 1;
      transform: translateY(0);
  }
  }
  
  
  /* Sections */
  section {
  padding: 4rem 2rem;
  }
  
  .section-header {
  text-align: center;
  margin-bottom: 2rem;
  }
  /* Section Header – Creative Text Effect */
  .section-header h2 {
  font-size: 3rem;
  font-weight: 800;
  text-align: center;
  text-transform: uppercase;
  background: linear-gradient(135deg, #0070f3, #00c6ff);
  background-clip: text;               /* Standard syntax */
  -webkit-background-clip: text;       /* Vendor prefix for WebKit */
  -webkit-text-fill-color: transparent;
  color: transparent;                  /* Fallback for other browsers */
  animation: bounceIn 1s ease-out;
  text-shadow: 2px 2px 6px rgba(0, 0, 0, 0.1);
  letter-spacing: 1.5px;
  }
  
  /* Bounce In Animation */
  @keyframes bounceIn {
  0% {
      transform: scale(0.8);
      opacity: 0;
  }
  60% {
      transform: scale(1.1);
      opacity: 1;
  }
  100% {
      transform: scale(1);
  }
  }
  .service-cards,
  .projects-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 2rem;
  padding: 2rem 0;
  }
  
  /* Card Hover Effect */
  .card,
  .project-slide {
  background: white;
  padding: 1rem;
  border-radius: 12px;
  box-shadow: 0 8px 16px rgba(0,0,0,0.1);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  overflow-x: hidden;
  }
  
  .card:hover,
  .project-slide:hover {
  transform: translateY(-10px);
  box-shadow: 0 12px 24px rgba(0,0,0,0.15);
  }
  /* Individual Project Slide */
  .project-slide {
    position: relative;
    background: white;
    border-radius: 12px;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
    overflow-x: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
  }
  
  .project-slide:hover {
    transform: translateY(-10px);
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.15);
  }
  
  /* Image within the project slide */
  .project-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    border-radius: 8px;
  }
  
  .project-slide:hover img {
    transform: scale(1.05);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
  }
  
  /* Card Image Hover Effect */
  .card img {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  border-radius: 8px;
  margin-bottom: 1rem;
  transform: scale(1);
  }
  
  .card img:hover {
  transform: scale(1.05);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
  }
  
  /* Contact Form */
  .contact-section {
  background: #f9f9f9;
  padding: 5rem 2rem;
  position: relative;
  }
  
  .contact-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, #e0e7ff, #ffffff);
    opacity: 0.4;
    z-index: -1; /* ✅ pushes background behind the form */
  }
  
  .contact-content {
  max-width: 500px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
  background: white;
  border-radius: 16px;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.1);
  padding: 2rem 1.5rem;
  }
  
  .contact-section h2 {
  text-align: center;
  font-size: 2.5rem;
  font-weight: 700;
  margin-bottom: 2rem;
  color: #1a1a1a;
  text-shadow: 1px 1px 3px rgba(0,0,0,0.08);
  }
  
  .contact-form {
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
  }
  
  .contact-form select,
  .contact-form input[type="date"],
  .contact-form input,
  .contact-form textarea {
  font-family: 'Poppins', sans-serif;
  padding: 1rem;
  border: 1px solid #ccc;
  border-radius: 12px;
  font-size: 1rem;
  background-color: #fafafa;
  transition: border-color 0.3s ease;
  }
  
  .contact-form select:focus,
  .contact-form input[type="date"]:focus,
  .contact-form input:focus,
  .contact-form textarea:focus {
  outline: none;
  border-color: #0070f3;
  background: #fff;
  }
  
  
  .bubble-button {
  overflow: hidden;
  position: relative;
  max-width: 100%;
  white-space: nowrap;
  --color: #0077ff;
  font-family: 'Poppins', sans-serif;
  display: inline-block;
  padding: 0.5em 1em;
  width: auto;
  line-height: 1;
  cursor: pointer;
  font-size: 1rem;
  z-index: 1;
  color: var(--color);
  border: 2px solid var(--color);
  border-radius: 6px;
  background: transparent;
  overflow-x: hidden;
  transition: color 0.3s ease-in-out;
  }
  
  .bubble-button::before {
  content: "";
  position: absolute;
  background: var(--color);
  width: 200%;
  height: 300%;
  top: 100%;
  left: 100%;
  z-index: -1;
  border-radius: 50%;
  transition: all 0.4s ease-in-out;
  }
  
  .bubble-button:hover {
  color: white;
  }
  
  .bubble-button:hover::before {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  }
  /* Services Section */
  .services-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 2rem;
  padding: 2rem;
  }
  
  .card {
  padding: 20px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 250px;
  height: 350px;
  background: rgb(255, 255, 255);
  border-radius: 1rem;
  box-shadow: rgba(50, 50, 93, 0.25) 0px 6px 12px -2px,
              rgba(0, 0, 0, 0.3) 0px 3px 7px -3px;
  transition: all ease-in-out 0.3s;
  text-align: center;
  opacity: 0;
  transform: translateY(20px);
  animation: fadeInUp 1s forwards;
  }
  
  .card:nth-child(1) { animation-delay: 0.2s; }
  .card:nth-child(2) { animation-delay: 0.4s; }
  .card:nth-child(3) { animation-delay: 0.6s; }
  .card:nth-child(4) { animation-delay: 0.8s; }
  .card:nth-child(5) { animation-delay: 1s; }
  .card:nth-child(6) { animation-delay: 1.2s; }
  
  @keyframes fadeInUp {
  0% { opacity: 0; transform: translateY(20px); }
  100% { opacity: 1; transform: translateY(0); }
  }
  
  .card:hover {
  background-color: #fdfdfd;
  box-shadow: rgba(0, 0, 0, 0.09) 0px 2px 1px,
              rgba(0, 0, 0, 0.09) 0px 4px 2px,
              rgba(0, 0, 0, 0.09) 0px 8px 4px,
              rgba(0, 0, 0, 0.09) 0px 16px 8px,
              rgba(0, 0, 0, 0.09) 0px 32px 16px;
  }
  
  .card h3 {
  margin: 1rem 0;
  font-size: 1.5rem;
  font-weight: 700;
  }
  
  .card p {
  font-size: 1rem;
  color: #333;
  }
  
  
  
  /* Footer */
  footer {
  background: #111;
  color: white;
  text-align: center;
  padding: 1rem;
  font-size: 0.9rem;
  }
  /* Footer with responsive design */
  @media (max-width: 768px) {
  footer p {
    font-size: 12px;
  }
  }
  /* Footer and text adjustments */
  footer p {
    text-align: center;
    font-size: 0.9rem;
  }
  /* Animations */
  .fade-in-section {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 1s ease-out, transform 1s ease-out;
  }
  
  .fade-in-section.visible {
  opacity: 1;
  transform: none;
  }
  
  .slide-left {
  transform: translateX(-30px);
  opacity: 0;
  transition: all 0.8s ease-out;
  }
  
  .slide-right {
  transform: translateX(30px);
  opacity: 0;
  transition: all 0.8s ease-out;
  }
  
  .slide-up {
  transform: translateY(30px);
  opacity: 0;
  transition: all 0.8s ease-out;
  }
  
  .slide-left.visible,
  .slide-right.visible,
  .slide-up.visible {
  transform: translate(0);
  opacity: 1;
  }
  
  .social-icons-container {
    display: none;
  }
  /* === Mobile Responsive === */
  @media (max-width: 768px) {
  .navbar-inner {
      flex-direction: column;
      align-items: flex-start;
  }
  
  .nav-links {
      flex-direction: column;
      width: 100%;
      display: none;
      gap: 1rem;
      margin-top: 1rem;
  }
  
  .nav-links.active {
      display: flex;
  }
  
  
  
  .hero-banner {
      background-attachment: scroll;
      height: auto;
      padding: 4rem 1rem;
  }
  
  .slogan {
      font-size: 2rem;
  }
  
  .hero-content p {
      font-size: 1rem;
  }
  
  .services-container {
      display: flex;
      flex-direction: column;
      gap: 1.5rem;
  }
  
  
  .projects-gallery {
      display: grid;
      grid-template-columns: 1fr;
      gap: 1rem;
  }
  
  .contact-form {
      display: flex;
      flex-direction: column;
      gap: 1rem;
  }
  
  .logo {
      height: 60px;
  }
  }
  @media (max-width: 768px) {
  
  /* Make nav menu stack vertically and toggle with hamburger */
  
  /* Reduce hero text sizes */
  .slogan {
    font-size: 2rem;
  }
  
  .hero-content p {
    font-size: 1rem;
  }
  
  /* Adjust card layout for mobile */
  .services-container,
  .projects-gallery {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
  
  /* Contact form tweaks */
  .contact-form {
    display: flex;
    flex-direction: column;
    gap: 1rem;
  }
  
  /* Fix hero-banner height for mobile */
  .hero-banner {
    min-height: 100vh;
    height: auto;
    padding: 4rem 1rem;
  }
  
  /* Social Icons Container */
  .social-icons {
  display: flex;
  justify-content: flex-start;
  gap: 2rem;
  padding: 0.5rem 2rem;
  background: transparent;
  flex-wrap: wrap;
  }
  
  /* Font Awesome Icons */
  .social-icons a {
  color: #333;
  font-size: 4rem; /* Controls size for font icons */
  display: inline-block;
  transition: color 0.3s ease, transform 0.3s ease;
  text-decoration: none;
  }
  
  /* Hover effect for both FA icons and SVGs */
  .social-icons a:hover {
  color: #0070f3;
  transform: scale(1.2);
  }
  
  /* Additional rules for SVG icons */
  .social-icons a svg {
  width: 4rem;
  height: 4rem;
  transition: transform 0.3s ease;
  fill: #333;
  }
  
  /* Hover effect for SVGs */
  .social-icons a:hover svg {
  fill: #0070f3;
  transform: scale(1.2);
  }
  
  /* Mobile adjustments */
  @media (max-width: 768px) {
  .social-icons {
    gap: 1rem;
    justify-content: center;
    padding: 1rem;
  }
  
  .social-icons a {
    font-size: 4rem;
  }
  
  .social-icons a svg {
    width: 4rem;
    height: 4rem;
  }
  }
  
  
  /* Follow Us Text */
  .follow-us-text {
  font-size: 1.2rem;
  font-weight: 600;
  margin-right: 1rem; /* Adds spacing between the text and icons */
  display: flex;
  align-items: center;
  justify-content: center;
  color: #333;
  font-family: 'Poppins', sans-serif;
  }
  
  /* Adjusting social icons container to align Follow Us text */
  .social-icons-container {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  }
  /* Padding and font tweaks for about/services/etc. */
  section {
    padding: 2rem 1rem;
  }
  
  .section-header h2 {
    font-size: 2rem;
  }
  }
  /* About Us Section */
  #about-us {
  padding: 80px 20px;
  background-color: #f4f4f4;
  }
  
  .about-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    max-width: 1200px;
    margin: auto;
    gap: 40px;
  }
  
  .about-text {
    flex: 1 1 500px;
    font-size: 1.1rem;
    color: #333;
  }
  
  .about-text h2 {
    font-size: 2.5rem;
    background: linear-gradient(135deg, #0070f3, #00c6ff);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    text-shadow: 2px 2px 6px rgba(0, 0, 0, 0.1);
    letter-spacing: 1.5px;
    margin-bottom: 20px;
  }
  
  .about-text p {
    line-height: 1.6;
    margin-top: 10px;
  }
  
  .about-image {
    flex: 1 1 500px;
    display: flex;
    justify-content: center;
    background: transparent;
  }
  
  .about-image img {
    width: 100%;
    max-width: 800px;
    height: auto;
    border-radius: 12px;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15);
    transition: transform 0.3s ease;
    background: transparent;
  }
  
  .about-image img:hover {
    transform: scale(1.03);
  }
  
  .about-image:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2);
  }
  
  .founder-quote {
    background-color: #f5f5f5;
    border-left: 5px solid #1e3a8a;
    padding: 1.5rem;
    margin-top: 2rem;
    font-style: italic;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
    border-radius: 6px;
  }
  
  .founder-quote cite {
    display: block;
    margin-top: 1rem;
    text-align: right;
    font-weight: bold;
    color: #1e3a8a;
  }
  
  
  /* Mobile */
  @media (max-width: 768px) {
    .about-container {
      flex-direction: column;
      gap: 1rem;
      padding: 1rem 1rem 0;
      text-align: center;
      background: none !important;
    }
  
    .about-text {
      text-align: center;
      margin-bottom: 0.5rem;
      padding: 0;
    }
  
    #readMoreBtn {
      margin-bottom: 0.5rem;
    }
  
    .about-image {
      margin: 0;
      padding: 0;
      display: flex;
      justify-content: center;
      align-items: flex-start;
      background: none !important;
      box-shadow: none !important;
    }
  
    .about-image img {
      width: 100%;
      max-width: 500px;
      height: auto;
      object-fit: contain;
      border-radius: 12px;
      box-shadow: none !important;
      margin: 0 auto;
      background: none !important;
    }
  }
  
  
  .founder-quote {
  background-color: #f5f5f5;
  border-left: 5px solid #1e3a8a; /* Navy blue accent */
  padding: 1.5rem;
  margin-top: 2rem;
  font-style: italic;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
  border-radius: 6px;
  }
  
  .why-choose-us {
  background-color: #ffffff;
  padding: 60px 20px;
  text-align: center;
  }
  
  .choose-us-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 30px;
  margin-top: 40px;
  }
  
  .choose-card {
  background-color: #f0f4f8;
  padding: 30px;
  border-radius: 12px;
  box-shadow: 0 8px 16px rgba(0,0,0,0.07);
  transition: transform 0.3s ease;
  }
  
  .choose-card:hover {
  transform: translateY(-5px);
  }
  
  .choose-card i {
  font-size: 36px;
  color: #1e90ff;
  margin-bottom: 15px;
  }
  
  .choose-card h3 {
  font-size: 20px;
  color: #1e1e1e;
  margin-bottom: 10px;
  }
  
  .choose-card p {
  color: #333;
  font-size: 15px;
  line-height: 1.6;
  }
  #contact-and-areas {
  padding: 60px 20px;
  background-color: #f4f4f4;
  }
  
  .contact-areas-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  max-width: 1000px;
  margin: auto;
  gap: 40px;
  }
  
  .contact-info,
  .areas-served {
  flex: 1 1 400px;
  }
  
  .contact-info h2,
  .areas-served h2 {
  font-size: 1.8rem;
  color: #1e3a8a;
  margin-bottom: 20px;
  }
  
  .contact-info p,
  .areas-list p {
  font-size: 1rem;
  color: #333;
  margin: 8px 0;
  font-weight: 500;
  padding-left: 5px;
  border-left: 3px solid transparent;
  transition: border-color 0.3s, color 0.3s;
  }
  
  .areas-list p:hover {
  color: #0070f3;
  border-left: 3px solid #0070f3;
  }
  
  @media (max-width: 768px) {
  .contact-areas-container {
    flex-direction: column;
    text-align: center;
  }
  
  .contact-info,
  .areas-served {
    flex: 1 1 100%;
  }
  
  .areas-list p {
    border-left: none;
    padding-left: 0;
  }
  }
  @media (max-width: 480px) {
  .hero-content h2 {
    font-size: 2rem;
  }
  
  .hero-content p {
    font-size: 1rem;
  }
  
  .bubble-button {
  overflow: hidden;
  position: relative;
  max-width: 100%;
  white-space: nowrap;
    font-size: 1rem;
    padding: 0.8rem 1.5rem;
  }
  
  .about-text p,
  .card p {
    font-size: 0.9rem;
  }
  
  .about-image img {
    max-width: 100%;
    height: auto;
  }
  }
  .contact-section,
  #contact-and-areas,
  footer {
  display: block;
  width: 100%;
  overflow: visible;
  }
  
  .contact-form input,
  .contact-form textarea,
  .contact-form select {
  width: 100%;
  max-width: 100%;
  margin-bottom: 1rem;
  font-size: 1rem;
  }
  
  .contact-form button {
  width: 100%;
  font-size: 1rem;
  padding: 0.75rem;
  }
  * {
  box-sizing: border-box;
  }
  
  body {
  margin: 0;
  padding: 0;
  overflow-x: hidden;
  }
  html, body {
  width: 100%;
  max-width: 100%;
  }
  
  
  /* Ensure projects gallery and images display correctly */
  #projects {
    display: block;
    width: 100%;
    overflow: visible;
  }
  
  .projects-gallery {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1.5rem;
    padding: 2rem 1rem;
  }
  
  .project-slide {
    opacity: 1 !important;
    transform: translateY(0) !important;
  }
  
  
  /* Force visibility of sections on mobile if animations don't trigger */
  @media (max-width: 768px) {
    .fade-in-section,
    .slide-up,
    .slide-left,
    .slide-right {
      opacity: 1 !important;
      transform: none !important;
    }
  }
  
  
  /* === Redesigned Contact Section === */
  .contact-section {
    padding: 4rem 1rem;
    background-color: #f9f9f9;
    font-family: 'Poppins', sans-serif;
  }
  
  .contact-section-flex {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    max-width: 1200px;
    margin: 0 auto;
    gap: 3rem;
  }
  
  .contact-left {
    flex: 1 1 45%;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    color: #333;
    align-items: center;
    text-align: center;
  }
  
  .contact-right {
    flex: 1 1 45%;
  }
  .contact-right h2.section-header-text {
    font-size: 2rem;
    color: #0070f3;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 1.5rem;
    text-align: center;
  }
  .contact-info-block h2.section-header-text {
    font-size: 2rem;
    color: #0070f3;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 1rem;
    margin-top: 2.5rem; 
  }
  
  .contact-info-block h2.section-header-text {
    font-size: 2rem;
    color: #0070f3;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 1rem;
    margin-top: 2.5rem;
    text-align: center; 
  }
  .contact-info-block p {
    margin: 0.3rem 0;
    font-weight: 500;
  }
  
  .areas-list p {
    margin: 4px 0;
    text-align: center; 
    padding-left: 0;
    border-left: none; 
  }
  
  .follow-us-text {
    margin-top: 2.5rem;
    font-weight: 600;
    color: #333;
  }
  
  .social-icons {
    margin-top: 1rem;
    gap: 1.5rem;
  }
  
  
  .social-icons a {
    font-size: 3rem; 
    color: #333;
    transition: color 0.3s ease, transform 0.3s ease;
  }
  
  .social-icons a:hover {
    color: #0070f3;
  }
  
  .contact-form {
    display: flex;
    flex-direction: column;
    gap: 1rem;
  }
  
  .contact-form input,
  .contact-form textarea,
  .contact-form select {
    font-family: 'Poppins', sans-serif;
    padding: 1rem;
    border-radius: 10px;
    border: 1px solid #ccc;
    font-size: 1rem;
  }
  
  @media (max-width: 768px) {
    .contact-section-flex {
      flex-direction: column;
    }
  
    .contact-left,
    .contact-right {
      flex: 1 1 100%;
    }
  }
  @media (max-width: 768px) {
    .navbar-inner {
      flex-direction: row;
      align-items: center;
      justify-content: space-between;
    }
  
    /* Show hamburger on mobile */
    .hamburger {
      display: block;
      font-size: 1.6rem;
      background: none;
      border: none;
      color: #333;
      margin-left: auto;
      padding: 0.5rem;
      height: 40px;
      width: 40px;
    }
  
    /* Mobile menu layout */
    .nav-links {
      flex-direction: column;
      position: absolute;
      top: 100%;
      left: 0;
      right: 0;
      background: white;
      display: none;
      padding: 1rem;
      box-shadow: 0 8px 16px rgba(0,0,0,0.1);
      z-index: 999;
    }
  
    /* When hamburger is clicked */
    .nav-links.active {
      display: flex;
    }
    @media (max-width: 768px) {
      .logo img {
        height: 60px;
      }
    }
    
  }