section [class^="container"] {
    padding: 4rem 2rem;
  }
  @media screen and (min-width: 1024px) {
    section [class^="container"] {
      padding: 4rem;
    }
    nav [class^="container"] {
      padding: 0 4rem;
    }
  }
  
  section:not(:first-of-type) {
    text-align: center;
  }
  
  section:nth-child(2n) {
    background-color: #ecf2ff;
  }
  
  a {
    color: #212529;
    text-decoration: none;
    transition: all 0.3s;
  }
  a:not(.btn):hover {
    color: #f5a841;
  }
  
  section .card,
  .btn-outline-dark {
    border: 2px solid #000000;
    box-shadow: 4px 4px #000000;
    transition: all 0.4s;
  }
  .btn-outline-dark:hover {
    box-shadow: 4px 4px #f5a841;
  }
  section .card {
    max-width: 22rem;
    margin-inline: auto;
    text-align: center;
  }
  .projects .card-body {
    text-align: center;
  }
  
  /* NAVBAR */
  
  .navbar {
    background-color: #ffffff;
    transition: opacity 0.4s ease;
  }
  .navbar-hide
  {
    opacity: 0;
    pointer-events: none;
    visibility: hidden;
    transition: opacity 0.4s ease, visibility 0.4s ease;
  }
  
  .navbar-nav .nav-link {
    color: #212529;
    font-size: 1.1rem;
    transition: all 0.5s;
  }
  .navbar-nav .nav-link:hover {
    color: #f5a841;
  }
  .navbar-brand {
    font-size: 1.5rem;
  }
  .icon-small {
  font-size: 1.2rem;
}

  /* @media screen and (min-width: 1024px) {
    .navbar-nav .nav-item {
      padding: 0 1rem;
    }
    .navbar-brand {
      font-size: 1.5rem;
    }
  } */
  
  /* @media screen and (max-width: 991.98px) {
    .navbar {
      display: flex;
      flex-direction: column;
      align-items: center;
    }
    .navbar .container {
      position: relative; 
      justify-content: space-between; 
      display: flex;
      flex-direction: row !important;
      align-items: center;
      text-align: center;
    }

    .navbar-toggler {
      z-index: 2;
    }
    
    .navbar-brand {
      font-size: 1.5rem;
      text-align: center;
      margin:  auto;
      display: block;  
      padding: 1 0rem;
      width: 100%;           
      text-align: center;
      white-space: nowrap;
      transform: translateX(-50%);
      position: absolute;
      left: 50%;
      z-index: 1;                      
    }
    .navbar-collapse {
      width: 100%;
      text-align: center;
    }
    .navbar-nav {
      display: flex;
      flex-direction: column;
      align-items: center;
      width: 100%;
    }
    .navbar-nav .nav-item {
      display: block;
    }
  } */
  @media screen and (max-width: 991.98px) {
    /* Container holds toggler and brand horizontally aligned */
    .navbar .container-lg {
      position: relative;
      display: flex !important;          /* force flex */
      flex-direction: row !important;    /* horizontal */
      justify-content: space-between;    /* toggler right, brand center absolute */
      align-items: center;                /* vertical align */
    }
  
    /* Brand centered horizontally and pinned to top */
    .navbar-brand {
      position: absolute !important;
      left: 50% !important;
      top: 0 !important;
      transform: translateX(-50%) !important;
      font-size: 1.5rem;
      white-space: nowrap;
      margin: 0;
      padding: 0.5rem 0;
      z-index: 1;
    }
  
    /* Hamburger toggler on the right, above brand */
    .navbar-toggler {
      z-index: 2;
    }
  
    /* Collapse menu below */
    .navbar-collapse {
      width: 100%;
      margin-top: 3rem;  /* Push down so it doesn’t overlap brand */
      text-align: center;
    }
  
    /* Nav links stacked vertically and centered */
    .navbar-nav {
      display: flex;
      flex-direction: column;
      align-items: center;
      width: 100%;
    }
  
    .navbar-nav .nav-item {
      margin: 0.5rem 0;
    }
  }
  

  /* HERO */
  
  section.hero {
    padding-top: 72px;
  }
  @media screen and (max-width: 576px) {
    section.hero {
      text-align: center;
    }
    section.hero .img-fluid {
      width: 70%;
    }
  }
  
  /* SERVICES */
  
  section.services i {
    font-size: 2rem;
    margin: 1rem auto 0;
    border: 2px solid #212529;
    width: 4rem;
    height: 4rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #f5a841;
  }
  
  /* ABOUT */
  
  @media screen and (min-width: 1024px) {
    section.about .container,
    section.testimonials .container {
      width: 75%;
    }
  }
  
  /* PROJECTS */
  
  section.projects .card {
    max-width: 17rem;
    text-align: left;
  }
  section.projects .card img {
    max-width: 70%;
    margin: 0 auto;
  }
  
  /* TESTIMONIALS */
  
  section.testimonials .carousel-control-prev,
  section.testimonials .carousel-control-next {
    width: 5%;
  }
  
  section.testimonials .carousel-item p {
    max-width: 80%;
    border-left: 5px solid #f5a841;
    padding-left: 1rem;
  }
  section.testimonials .carousel-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }
  section.testimonials .carousel.carousel-fade .carousel-item {
    transition: opacity 0.5s;
  }
  
  /* CONTACT */
  
  section.contact .social-media {
    display: flex;
    justify-content: center; /* centers icons horizontally */
    align-items: center;     /* centers icons vertically if needed */
    gap: 1rem;               /* spacing between icons */
    margin: 0 auto;          /* horizontal centering if needed */
    width: 100%;             /* full width of container */
  }

  section.contact .social-media a {
    padding: 0 0.5rem;
    font-size: 1.5rem;
    text-decoration: none;
    color: inherit; /* optional: inherit text color */

  }

  section.contact .social-media a:hover i {
  color: #f5a841; /* Bootstrap's warning yellow */
  /* text-shadow: 0 0 5px #ffc107, 0 0 10px #ffc107; */
  transition: all 0.3s ease-in-out;
}

 section.contact .footer-icon i {
  font-size: 1.5rem;
  color: #212529;
  transition: color 0.3s ease, transform 0.3s ease;
}

 section.contact .footer-icon:hover i {
  color: #f5a841; /* Bootstrap warning/yellow */
  transform: scale(1.2);
}

 section.contact .contact {
  background-color: #f5f9ff;
  border-top: 1px solid #dee2e6;
}