/* Global Styles */
body {
    font-family: 'Open Sans', sans-serif;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }
  
  .container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 2rem;
  }
  
  /* Header */
  header {
    background-color: #007BFF;
    color: white;
    padding: 1rem 0;
  }
  
  header .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  
  header .logo {
    font-size: 1.5rem;
    font-weight: bold;
  }
  
  header nav ul {
    list-style: none;
    display: flex;
    gap: 1.5rem;
    margin: 0;
    padding: 0;
  }
  
  header nav ul li a {
    color: white;
    text-decoration: none;
    font-size: 1rem;
  }
  
  header .search-icon {
    font-size: 1.2rem;
    cursor: pointer;
  }
  
  /* Hero Section */
  #hero {
    background: url('../images/hero-bg.jpg') no-repeat center center/cover;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: white;
  }
  
  #hero h1 {
    font-size: 3rem;
    margin: 0;
  }
  
  #hero p {
    font-size: 1.5rem;
    margin: 1rem 0;
  }
  
  #hero .btn {
    background-color: #28A745;
    color: white;
    padding: 0.75rem 1.5rem;
    text-decoration: none;
    border-radius: 5px;
  }
  
  /* About Hero Section */
  #about-hero {
    background: url('../images/about-hero.jpg') no-repeat center center/cover;
    height: 80vh;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: white;
  }
  
  #about-hero h1 {
    font-size: 2.5rem;
    margin: 0;
  }
  
  #about-hero p {
    font-size: 1.2rem;
    margin: 1rem 0;
  }
  
  /* Services Hero Section */
#services-hero {
    background: url('../images/services-hero.jpg') no-repeat center center/cover;
    height: 60vh;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: white;
  }
  
  #services-hero h1 {
    font-size: 2.5rem;
    margin: 0;
  }
  
  #services-hero p {
    font-size: 1.2rem;
    margin: 1rem 0;
  }
  
  @layer design-system, reset, base, utilities, components, layout, overrides;
  @import url("https://fonts.googleapis.com/css2?family=Source+Sans+3:wght@400..700&display=swap");
  @import "https://unpkg.com/open-props" layer(design-system);
  
  @layer reset {
    *,
    ::before,
    ::after {
      box-sizing: border-box;
    }
  
    :where(:not(dialog)) {
      margin: 0;
    }
  
    :where(html) {
      -webkit-text-size-adjust: none;
  
      @media (prefers-reduced-motion: no-preference) {
        scroll-behavior: smooth;
      }
    }
  
    :where(body) {
      min-block-size: 100svb;
      -webkit-font-smoothing: antialiased;
    }
  }
  
  @layer base {
    html {
      --surface-1: white;
      --text-1: var(--stone-11);
      --primary: var(--indigo-7);
      --secondary-container: var(--gray-12);
      --font-family-default: "Source Sans 3", var(--font-neo-grotesque);
  
      /* Override the default Open Props shadow properties for dark mode. 
          Make sure to use @layer when importing Open Props. */
  
      @media (prefers-color-scheme: dark) {
        --shadow-color: 220 3% 15%;
        --shadow-strength: 1%;
      }
    }
  }
  
  @layer layout {
    .section {
      background-image: url("https://raw.githubusercontent.com/mobalti/open-props-interfaces/refs/heads/main/ai-hero-chat-popover/assets/bg-gradient.jpg");
      background-position: center;
      background-repeat: no-repeat;
      background-size: cover;
      display: grid;
      font-family: var(--font-family-default);
      min-block-size: max(400px, 100svb);
      padding-block: var(--size-8);
      padding-inline: var(--size-7);
      place-items: start center;
      position: relative;
  
      /* xl-n-below */
      @media (width < 1440px) {
        background-position: top 20% center;
        background-size: 150%;
      }
  
      /* md-n-below */
      @media (width < 768px) {
        background-position: top 20% center;
        background-size: 1000%;
      }
    }
  
    .section-container {
      inline-size: min(1028px, 100%);
    }
  
    .section-wrapper {
      display: grid;
      place-items: center;
      gap: var(--size-7);
    }
  
    .section-header {
      display: grid;
      place-items: center;
      gap: var(--size-5);
    }
  
    .logo {
      font-size: var(--font-size-4);
      font-weight: var(--font-weight-7);
    }
  
    .hgroup {
      display: grid;
      place-items: center;
      gap: var(--size-1);
      text-align: center;
    }
  
    .headline-1 {
      font-size: var(--font-size-5);
    }
  
    .subheading {
      font-size: var(--font-size-3);
    }
  
    .cta-group {
      display: grid;
      gap: 12px;
      grid-template-columns: 1fr;
  
      /* sm-n-above */
      @media (width >=560px) {
        grid-auto-flow: column;
        grid-template-columns: 1fr 1fr;
      }
    }
  
    .section-cards {
      display: grid;
      padding: 0;
      list-style: none;
      gap: 32px;
  
      @media (width >=460px) {
        grid-template-columns: 1fr 1fr;
        gap: 12px;
      }
  
      /* md-n-above */
      @media (width >=768px) {
        grid-template-columns: 1fr 1fr 1fr 1fr;
      }
    }
  
    .card-wrap {
      text-decoration: none;
      color: var(--gray-12);
      background: var(--card-bg);
      background-image: linear-gradient(
        170.96deg,
        oklch(100% 0 0 / 60%) 18.95%,
        oklch(100% 0 0 / 20%) 99.73%
      );
      display: grid;
      block-size: 100%;
      border-radius: 12px;
      padding: 12px;
      border-width: var(--border-size-1);
      border-color: white;
      border-style: solid;
      text-align: start;
      cursor: pointer;
      inline-size: 100%;
    }
  
    .figure {
      display: grid;
      gap: var(--size-3);
      grid-template-rows: min-content 1fr;
    }
  
    .visual {
      background-image: var(--gradient-15);
      border-radius: 10px;
      block-size: 175px;
      overflow: clip;
    }
  
    .img {
      display: block;
      inline-size: 100%;
      block-size: 100%;
      object-fit: cover;
    }
  
    .figcaption {
      font-weight: var(--font-weight-7);
      font-size: var(--font-size-2);
      font-family: var(--font-family-default);
    }
  }
  
  @layer layout {
    .chat {
      background-color: oklch(99% 0 287);
      block-size: 55svb;
      border-radius: var(--radius-3) var(--radius-3) 0px 0px;
      border-width: 0;
      box-shadow: var(--shadow-6);
      inline-size: min(1028px, 100%);
      inset-block-start: auto;
      margin-inline: auto;
      padding: 0;
  
      /* --opacityOK  */
      @media (prefers-reduced-transparency: no-preference) {
        backdrop-filter: blur(70px);
        background-color: oklch(99% 0 287/ 30%);
      }
  
      /* motionOK */
      @media (prefers-reduced-motion: no-preference) {
        animation: slide-out-down-dismiss 0.5s var(--ease-3);
  
        &:popover-open {
          /* Built-in animation from Open Props */
          animation: var(--animation-slide-in-up);
        }
      }
    }
  
    @keyframes slide-out-down-dismiss {
      from {
        display: block;
      }
  
      to {
        transform: translateY(100%);
      }
    }
  
    .chat-content-wrapper {
      display: grid;
      grid-template-rows: min-content 1fr;
      block-size: 100%;
    }
  
    .chat-header {
      border-bottom: var(--border-size-1) solid var(--gray-4);
      padding-block: 12px;
      padding-inline: 12px;
      display: grid;
      place-items: center end;
    }
  
    .chat-popover-close-btn {
      display: inline-grid;
      place-items: center;
      padding: 0;
      border-width: 0;
      block-size: 44px;
      inline-size: 44px;
      border-radius: var(--radius-round);
      cursor: pointer;
      background-color: var(--stone-2);
    }
  
    .chat-section {
      display: grid;
      grid-template-rows: 1fr min-content;
      padding-block: var(--size-5);
      padding-inline: var(--size-7);
    }
  
    .chat-input-container {
      display: grid;
      grid-template-columns: 1fr min-content;
      box-shadow: var(--shadow-4);
      border-radius: var(--radius-round);
      background-color: white;
      padding-inline: var(--size-px-4) var(--size-px-2);
      block-size: 58px;
      align-items: center;
    }
  
    .chat-textarea {
      font-size: var(--font-size-2);
      font-family: inherit;
      caret-color: blue;
      border-width: 0;
      background-color: transparent;
      outline-width: 0;
      outline: none;
      overflow: hidden;
      resize: none;
      block-size: var(--size-5);
    }
  
    .chat-submit-btn {
      color: blue;
      block-size: var(--size-px-8);
      inline-size: var(--size-px-8);
      border-width: 0;
      border-radius: var(--radius-round);
      background-color: transparent;
      cursor: pointer;
    }
  }
  
  @layer components {
    .btn {
      --_state-layer-op: 0%;
      --_state-layer-bg: oklch(1 0 0 / var(--_state-layer-op));
      background-color: transparent;
      font-weight: var(--font-weight-6);
      font-size: var(--font-size-1);
      font-family: var(--font-family-default);
      min-block-size: 40px;
      text-decoration: none;
      text-align: center;
      min-inline-size: max-content;
      display: inline-grid;
      place-items: center;
      border-radius: var(--radius-4);
      overflow: clip;
      isolation: isolate;
      -moz-user-select: none;
      -webkit-user-select: none;
      cursor: pointer;
      user-select: none;
      white-space: nowrap;
      padding: 0;
      border-width: 0;
  
      &:hover {
        --_state-layer-op: 20%;
        box-shadow: var(--shadow-2);
      }
  
      &:is(:active, :disabled, :focus-within) {
        --_state-layer-op: 12%;
      }
  
      &.filled {
        background-color: var(--gray-12);
        color: white;
      }
  
      &.primary {
        --_state-layer-bg: oklch(0 0 0 / var(--_state-layer-op));
        background-color: var(--primary);
      }
  
      .state-layer {
        border-radius: inherit;
        padding-block: 12px;
        padding-inline: var(--size-3);
        inline-size: 100%;
        display: inline-grid;
        place-items: center;
        background-color: var(--_state-layer-bg);
        transition-property: background-color, box-shadow;
        transition-duration: 0.2s;
        transition-timing-function: var(--ease-3);
      }
    }
  }
  


  /* Service Categories Section */
  #service-categories .services-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 2rem;
  }
  
  #service-categories .service {
    text-align: center;
    padding: 1.5rem;
    background-color: white;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  }
  
  #service-categories .service i {
    font-size: 2rem;
    color: #007BFF;
    margin-bottom: 1rem;
  }
  
  #service-categories .service h3 {
    font-size: 1.5rem;
    color: #333;
    margin-bottom: 1rem;
  }
  
  #service-categories .service p {
    color: #555;
    margin-bottom: 1.5rem;
  }
  
  #service-categories .service .btn {
    background-color: #28A745;
    color: white;
    padding: 0.5rem 1rem;
    text-decoration: none;
    border-radius: 5px;
  }
  
  /* Why Choose Us Section */
  #why-choose-us .reasons-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 2rem;
  }
  
  #why-choose-us .reason {
    text-align: center;
    padding: 1.5rem;
    background-color: white;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  }
  
  #why-choose-us .reason i {
    font-size: 2rem;
    color: #007BFF;
    margin-bottom: 1rem;
  }
  
  #why-choose-us .reason h3 {
    font-size: 1.5rem;
    color: #333;
    margin-bottom: 1rem;
  }
  
  #why-choose-us .reason p {
    color: #555;
  }
  
  /* Testimonials Section */
  #testimonials .testimonials-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 2rem;
  }
  
  #testimonials .testimonial {
    background-color: #f8f9fa;
    padding: 1.5rem;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  }
  
  #testimonials .testimonial p {
    font-style: italic;
    color: #555;
  }
  
  #testimonials .testimonial h3 {
    margin-top: 1rem;
    color: #007BFF;
  }
  
  /* Call to Action Section */
  #cta {
    background-color: #007BFF;
    color: white;
    padding: 4rem 0;
    text-align: center;
  }
  
  #cta h2 {
    margin-bottom: 1rem;
  }
  
  #cta .btn {
    background-color: #28A745;
    color: white;
    padding: 0.75rem 1.5rem;
    text-decoration: none;
    border-radius: 5px;
  }
  /* Our Story Section */
  #our-story .story-content {
    display: grid;
grid-template-columns: repeat(2, 1fr);
grid-template-rows: repeat(2, auto); /* Adjust row height as needed */
gap: 2rem;

  }
  
  #our-story .story-image {
    grid-row: 3;
    grid-column: 2;
    grid-auto-flow: inherit;
  }
  
  #our-story .story-image img {
    width: 100%;
    border-radius: 10px;
  }
  
  #our-story .story-text {
    flex: 1;
  }
  
  /* Our Mission & Vision Section */
  #mission-vision .mission-vision-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem;
  }
  
  #mission-vision .mission, #mission-vision .vision {
    background-color: #048f27;
    padding: 1.5rem;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  }
  
  /* What We Do Section */
  #what-we-do .services-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2rem;
  }
  
  #what-we-do .service {
    text-align: center;
    padding: 1.5rem;
    background-color: rgb(226, 223, 223);
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  }
  
  #what-we-do .service i {
    font-size: 2rem;
    color: #ffffff;
    margin-bottom: 1rem;
  }
  
  #what-we-do .service h3 {
    font-size: 1.5rem;
    color: #03974d;
    margin-bottom: 1rem;
  }
  
  #what-we-do .service p {
    color: #ffffff;
  }
  
  /* Why Choose Us Section */
  #why-choose-us .reasons-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2rem;
  }
  
  #why-choose-us .reason {
    text-align: center;
    padding: 1.5rem;
    background-color: rgb(226, 223, 223);
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  }
  
  #why-choose-us .reason i {
    font-size: 2rem;
    color: #007BFF;
    margin-bottom: 1rem;
  }
  
  #why-choose-us .reason h3 {
    font-size: 1.5rem;
    color: #333;
    margin-bottom: 1rem;
  }
  
  #why-choose-us .reason p {
    color: #555;
  }
  
  /* Meet the Team Section */
  #meet-the-team .team-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2rem;
  }
  
  #meet-the-team .team-member {
    text-align: center;
  }
  
  #meet-the-team .profile-pic {
    width: 150px;
    height: 150px;
    border-radius: 50%;
    object-fit: cover;
    margin-bottom: 1rem;
  }
  
  #meet-the-team .role {
    font-weight: bold;
    color: #007BFF;
  }
  
  #meet-the-team .description {
    color: #555;
    margin: 1rem 0;
  }
  
  #meet-the-team .contact-info {
    margin-top: 1rem;
  }
  
  #meet-the-team .social-icons {
    display: flex;
    justify-content: center;
    gap: 1rem;
    margin-top: 0.5rem;
  }
  
  #meet-the-team .social-icons a {
    color: #007BFF;
    font-size: 1.2rem;
  }
  
  /* Testimonials Section */
  #testimonials .testimonials-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem;
  }
  
  #testimonials .testimonial {
    background-color: #f8f9fa;
    padding: 1.5rem;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  }
  
  #testimonials .testimonial p {
    font-style: italic;
    color: #555;
  }
  
  #testimonials .testimonial h3 {
    margin-top: 1rem;
    color: #007BFF;
  }
  
  /* Call to Action Section */
  #cta {
    background-color: #007BFF;
    color: white;
    padding: 4rem 0;
    text-align: center;
  }
  
  #cta h2 {
    margin-bottom: 1rem;
  }
  
  #cta .btn {
    background-color: #28A745;
    color: white;
    padding: 0.75rem 1.5rem;
    text-decoration: none;
    border-radius: 5px;
  }
  
  /* Global Styles */
body {
    font-family: 'Open Sans', sans-serif;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }
  
  .container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 2rem;
  }
  
  /* Header */
  header {
    background-color: #007BFF;
    color: white;
    padding: 1rem 0;
  }
  
  header .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  
  header .logo {
    font-size: 1.5rem;
    font-weight: bold;
  }
  
  header nav ul {
    list-style: none;
    display: flex;
    gap: 1.5rem;
    margin: 0;
    padding: 0;
  }
  
  header nav ul li a {
    color: white;
    text-decoration: none;
    font-size: 1rem;
  }
  
  header .search-icon {
    font-size: 1.2rem;
    cursor: pointer;
  }
  
  /* Contact Hero Section */
  #contact-hero {
    background: url('../images/contact-hero.jpg') no-repeat center center/cover;
    height: 50vh;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: white;
  }
  
  #contact-hero h1 {
    font-size: 2.5rem;
    margin: 0;
  }
  
  #contact-hero p {
    font-size: 1.2rem;
    margin: 1rem 0;
  }
  
  /* Contact Form Section */
  #contact-form {
    padding: 4rem 0;
    background-color: #f8f9fa;
  }
  
  #contact-form h2 {
    text-align: center;
    margin-bottom: 2rem;
  }
  
  #contact-form form {
    max-width: 600px;
    margin: 0 auto;
  }
  
  #contact-form .form-group {
    margin-bottom: 1rem;
  }
  
  #contact-form input, #contact-form select, #contact-form textarea {
    width: 100%;
    padding: 0.75rem;
    border: 1px solid #ccc;
    border-radius: 5px;
    font-size: 1rem;
  }
  
  #contact-form textarea {
    resize: vertical;
    min-height: 150px;
  }
  
  #contact-form .btn {
    background-color: #28A745;
    color: white;
    padding: 0.75rem 1.5rem;
    border: none;
    border-radius: 5px;
    font-size: 1.1rem;
    cursor: pointer;
    width: 100%;
  }
  
  #contact-form .btn:hover {
    background-color: #218838;
  }
  
  /* Contact Details Section */
  #contact-details {
    padding: 4rem 0;
  }
  
  #contact-details h2 {
    text-align: center;
    margin-bottom: 2rem;
  }
  
  #contact-details .details-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 2rem;
  }
  
  #contact-details .detail {
    text-align: center;
    padding: 1.5rem;
    background-color: white;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  }
  
  #contact-details .detail i {
    font-size: 2rem;
    color: #007BFF;
    margin-bottom: 1rem;
  }
  
  #contact-details .detail h3 {
    font-size: 1.5rem;
    color: #333;
    margin-bottom: 1rem;
  }
  
  #contact-details .detail p {
    color: #555;
    margin-bottom: 1rem;
  }
  
  #contact-details .detail a {
    color: #007BFF;
    text-decoration: none;
  }
  
  #contact-details .detail a:hover {
    text-decoration: underline;
  }
  
  #contact-details .social-icons {
    display: flex;
    justify-content: center;
    gap: 1rem;
    margin-top: 1rem;
  }
  
  #contact-details .social-icons a {
    color: #007BFF;
    font-size: 1.5rem;
  }
  
  /* Map Section */
  #map {
    padding: 4rem 0;
    background-color: #f8f9fa;
  }
  
  #map h2 {
    text-align: center;
    margin-bottom: 2rem;
  }
  
  #map iframe {
    width: 100%;
    height: 400px;
    border: none;
    border-radius: 10px;
  }
  
  /* Call to Action Section */
  #cta {
    background-color: #007BFF;
    color: white;
    padding: 4rem 0;
    text-align: center;
  }
  
  #cta h2 {
    margin-bottom: 1rem;
  }
  
  #cta .btn {
    background-color: #28A745;
    color: white;
    padding: 0.75rem 1.5rem;
    text-decoration: none;
    border-radius: 5px;
  }
  
  /* Footer */
  footer {
    background-color: #343A40;
    color: white;
    padding: 2rem 0;
  }
  
  footer .footer-content {
    display: flex;
    justify-content: space-between;
    gap: 2rem;
  }
  
  footer .footer-section {
    flex: 1;
  }
  
  footer .footer-section h3 {
    margin-bottom: 1rem;
  }
  
  footer .footer-section p {
    margin: 0.5rem 0;
  }
  
  footer .social-icons {
    display: flex;
    gap: 1rem;
  }
  
  footer .social-icons a {
    color: white;
    font-size: 1.5rem;
  }
  
  footer .footer-bottom {
    text-align: center;
    margin-top: 2rem;
    padding-top: 1rem;
    border-top: 1px solid #555;
  }
  /* Gallery Hero Section */
#gallery-hero {
    background: url('../images/gallery-hero.jpg') no-repeat center center/cover;
    height: 50vh;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: white;
  }
  
  #gallery-hero h1 {
    font-size: 2.5rem;
    margin: 0;
  }
  
  #gallery-hero p {
    font-size: 1.2rem;
    margin: 1rem 0;
  }
  
  /* Gallery Section */
  #gallery {
    padding: 4rem 0;
    background-color: #f8f9fa;
  }
  
  #gallery h2 {
    text-align: center;
    margin-bottom: 2rem;
  }
  
  #gallery .gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1.5rem;
  }
  
  #gallery .gallery-item {
    position: relative;
    overflow: hidden;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  }
  
  #gallery .gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
  }
  
  #gallery .gallery-item:hover img {
    transform: scale(1.1);
  }
  
  #gallery .gallery-item .overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: rgba(0, 0, 0, 0.7);
    color: white;
    padding: 1rem;
    text-align: center;
    opacity: 0;
    transition: opacity 0.3s ease;
  }
  
  #gallery .gallery-item:hover .overlay {
    opacity: 1;
  }
  
  /* Call to Action Section */
  #cta {
    background-color: #007BFF;
    color: white;
    padding: 4rem 0;
    text-align: center;
  }
  
  #cta h2 {
    margin-bottom: 1rem;
  }
  
  #cta .btn {
    background-color: #28A745;
    color: white;
    padding: 0.75rem 1.5rem;
    text-decoration: none;
    border-radius: 5px;
  }
  /* Footer */
  footer {
    background-color: #343A40;
    color: white;
    padding: 2rem 0;
  }
  
  footer .footer-content {
    display: flex;
    justify-content: space-between;
    gap: 2rem;
  }
  
  footer .footer-section {
    flex: 1;
  }
  
  footer .footer-section h3 {
    margin-bottom: 1rem;
  }
  
  footer .footer-section p {
    margin: 0.5rem 0;
  }
  
  footer .social-icons {
    display: flex;
    gap: 1rem;
  }
  
  footer .social-icons a {
    color: white;
    font-size: 1.5rem;
  }
  
  footer .footer-bottom {
    text-align: center;
    margin-top: 2rem;
    padding-top: 1rem;
    border-top: 1px solid #555;
  }