/* =====================================
   OUR TEAM PAGE - Alternating Rows
   ===================================== */

/* Hero Container with a small black box */
#hero-container {
    position: relative;
    width: 100%;
    overflow: hidden;
  }
  
  .hero-box {
    background-color: #1a30cb; /* blue box */
    color: #fff;
    border-radius: 12px; /* soft edges */
    max-width: 800px;
    width: 90%;
    padding: 2rem;
    text-align: center;
    box-shadow: 0 4px 12px rgba(0,0,0,0.2);
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 2rem;
  }
  
  /* Directly style the image container */
  .teamPhoto-image {
    width: 100%;
    max-height: 600px;
    overflow: hidden; /* ensures any zoom stays within the container */
  }

  .teamPhoto-image img {
    width: 100%;
    display: block;
    transition: transform 0.4s ease;
  }

  /* For iPhones and iPads between 330px and 768px width, with pixel ratios of 2 and 3 */
  @media only screen and (min-width: 768px) and (max-width: 1024px) and (-webkit-min-device-pixel-ratio: 2), 
  only screen and (min-width: 768px) and (max-width: 1024px) and (-webkit-min-device-pixel-ratio: 3) {
    .hero-box {
      background-color: #1a30cb; /* black box */
      color: #fff;
      border-radius: 12px; /* soft edges */
      max-width: 800px;
      width: 90%;
      padding: 2rem;
      text-align: center;
      box-shadow: 0 4px 12px rgba(0,0,0,0.2);
      margin-left: auto;
      margin-right: auto;
      margin-bottom: 2rem;
    }

    .hero-box h2 {
      font-size: 2.50rem;
      margin-bottom: 0.75rem;
      text-transform: uppercase;
      letter-spacing: 1px;
      color: #fff;
      font-family: 'Libre Baskerville', serif;
    }

    .hero-box p {
      font-size: 1.25rem;
      line-height: 1.3;
      color: #fff;
    }
  }

  /* For iPhones and iPads between 330px and 768px width, with pixel ratios of 2 and 3 */
  @media only screen and (min-width:300px) and (max-width: 767px) {
    .hero-box {
      background-color: #1a30cb; /* black box */
      color: #fff;
      border-radius: 12px; /* soft edges */
      max-width: 800px;
      width: 90%;
      padding: 2rem;
      text-align: center;
      box-shadow: 0 4px 12px rgba(0,0,0,0.2);
      margin-left: auto;
      margin-right: auto;
      margin-bottom: 2rem;
    }

    .hero-box h2 {
      font-size: 2.50rem;
      margin-bottom: 0.75rem;
      text-transform: uppercase;
      letter-spacing: 1px;
      color: #fff;
      font-family: 'Libre Baskerville', serif;
    }

    .hero-box p {
      font-size: 1.25rem;
      line-height: 1.3;
      color: #fff;
    }
  }

  .hero-box h2 {
    font-size: 2.50rem;
    margin-bottom: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #fff;
    font-family: 'Libre Baskerville', serif;
  }
  
  .hero-box p {
    font-size: 1.50rem;
    line-height: 1.6;
    color: #fff;
  }
  
  /* Team Section */
  #team-section {
    padding: 2rem 1rem;
    background-color: #f0f4fa; /* Light background */
  }
  
  #team-section .container {
    width: 90%;
    max-width: 1200px;
    margin: 0 auto;
  }
  
  /* Team Row - large, alternating left-right layout */
  .team-row {
    display: flex;
    align-items: center;
    background: linear-gradient(135deg, #84888C, #5C5F63); /* Mercedes grey gradient */
    color: #fff;
    border-radius: 10px;
    margin-bottom: 2rem;
    padding: 2rem;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    opacity: 0; /* fade-in animation */
    transform: translateY(20px);
  }
  
  /* Fade-in animation */
  .fade-in {
    animation: fadeInRow 0.8s forwards ease-in-out;
  }
  
  @keyframes fadeInRow {
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
  
  .team-row:hover {
    transform: translateY(-6px);
    box-shadow: 0 8px 20px rgba(0,0,0,0.3);
  }
  
  /* By default, image on the left, content on the right.
     For every even row, reverse the order. */
  #team-section .container > .team-row:nth-of-type(even){
    flex-direction: row-reverse;
  }

  
  /* Team Image */
  .team-image {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 1rem;
  }
  
  .team-image img {
    max-width: 300px;
    height: auto;
    border-radius: 8px; /* or 50% for circular */
    object-fit: cover;
    object-position: center;
  }
  
  /* Team Content */
  .team-content {
    flex: 1;
    padding: 1rem 2rem;
    text-align: left;
  }
  
  .team-content h3 {
    font-size: 2.50rem;
    margin-bottom: 0.3rem;
    font-family: 'Libre Baskerville', serif;
  }
  
  .role {
    font-size: 1.7rem;
    font-weight: 600;
    margin-bottom: 0.8rem;
    color: #e2e2e2; /* subtle contrast */
  }
  
  .bio {
    font-size: 1.50rem;
    line-height: 1.6;
    color: #e2e2e2;
  }
  
  .bio{ white-space: pre-line; }

  /* Responsive Adjustments */
  @media (max-width: 768px) {
    .hero-box h2 {
      font-size: 1.8rem;
    }
    .team-row {
      flex-direction: column !important;
      text-align: center;
    }
    .team-image,
    .team-content {
      flex: unset;
      padding: 1rem;
    }
    .team-image img {
      max-width: 250px;
    }
    .team-content {
      text-align: center;
    }
  }

  /* Responsive Adjustments for 300px - 350px */
  @media (min-width: 300px) and (max-width: 350px) {
    .hero-box {
      background-color: #1a30cb; /* black box */
      color: #fff;
      border-radius: 12px; /* soft edges */
      max-width: 800px;
      width: 90%;
      padding: 1rem;
      text-align: center;
      box-shadow: 0 4px 12px rgba(0,0,0,0.2);
      margin-left: auto;
      margin-right: auto;
    }
    
    .hero-box h2 {
        font-size: 1.2rem; /* Scale down header text */
    }

    .hero-box p {
        font-size: 0.85rem;
    }

    .team-row {
        flex-direction: column !important;
        text-align: center;
        padding: 1rem;
    }

    .team-image img {
        max-width: 180px;
    }

    .team-content h3 {
        font-size: 1.2rem;
    }

    .role {
        font-size: 1.05rem;
    }

    .bio {
        font-size: 0.85rem;
    }
  }

  /* Responsive Adjustments for 351px - 400px */
  @media (min-width: 351px) and (max-width: 400px) {
    .hero-box h2 {
        font-size: 1.4rem;
    }

    .hero-box p {
        font-size: 1rem;
    }

    .team-image img {
        max-width: 200px;
    }

    .team-content h3 {
        font-size: 1.4rem;
    }

    .role {
        font-size: 1.2rem;
    }

    .bio {
        font-size: 1rem;
    }
  }

  /* Responsive Adjustments for 401px - 450px */
  @media (min-width: 401px) and (max-width: 450px) {
    .hero-box h2 {
        font-size: 1.6rem;
    }

    .hero-box p {
        font-size: 1.15rem;
    }

    .team-image img {
        max-width: 220px;
    }

    .team-content h3 {
        font-size: 1.6rem;
    }

    .role {
        font-size: 1.35rem;
    }

    .bio {
        font-size: 1.15rem;
    }
  }

  /* Responsive Adjustments for 451px - 500px */
  @media (min-width: 451px) and (max-width: 500px) {
    .hero-box h2 {
        font-size: 1.8rem;
    }

    .hero-box p {
        font-size: 1.3rem;
    }

    .team-image img {
        max-width: 250px;
    }

    .team-content h3 {
        font-size: 1.8rem;
    }

    .role {
        font-size: 1.5rem;
    }

    .bio {
        font-size: 1.3rem;
    }
  }

  /* Responsive Adjustments for 501px - 600px */
  @media (min-width: 501px) and (max-width: 600px) {
    .hero-box h2 {
      font-size: 1.8rem;
    }

    .hero-box p {
      font-size: 1.3rem;
    }

    .team-image img {
      max-width: 250px;
    }

    .team-content h3 {
      font-size: 1.8rem;
    }

    .role {
      font-size: 1.5rem;
    }

    .bio {
      font-size: 1.3rem;
    }
  }

  /* Responsive Adjustments for 601px - 700px */
  @media (min-width: 601px) and (max-width: 700px) {
    .hero-box h2 {
      font-size: 1.8rem;
    }

    .hero-box p {
      font-size: 1.3rem;
    }

    .team-image img {
      max-width: 250px;
    }

    .team-content h3 {
      font-size: 1.8rem;
    }

    .role {
      font-size: 1.5rem;
    }

    .bio {
      font-size: 1.3rem;
    }
  }

  /* Responsive Adjustments for 701px - 768px */
  @media (min-width: 701px) and (max-width: 768px) {
    .hero-box h2 {
      font-size: 1.8rem;
    }

    .hero-box p {
      font-size: 1.3rem;
    }

    .team-image img {
      max-width: 250px;
    }

    .team-content h3 {
      font-size: 1.8rem;
    }

    .role {
      font-size: 1.5rem;
    }

    .bio {
      font-size: 1.3rem;
    }
  }

  /* Responsive Adjustments for 701px - 768px */
  @media (min-width: 769px) and (max-width: 850px) {
    .hero-box h2 {
      font-size: 1.8rem;
    }

    .hero-box p {
      font-size: 1.3rem;
    }

    .team-image img {
      max-width: 250px;
    }

    .team-content h3 {
      font-size: 1.8rem;
    }

    .role {
      font-size: 1.5rem;
    }

    .bio {
      font-size: 1.3rem;
    }
  }

  /* Responsive Adjustments for 701px - 768px */
  @media (min-width: 851px) and (max-width: 900px) {
    .hero-box h2 {
      font-size: 1.8rem;
    }

    .hero-box p {
      font-size: 1.3rem;
    }

    .team-image img {
      max-width: 250px;
    }

    .team-content h3 {
      font-size: 1.8rem;
    }

    .role {
      font-size: 1.5rem;
    }

    .bio {
      font-size: 1.3rem;
    }
  }

  /* Responsive Adjustments for 701px - 768px */
  @media (min-width: 900px) and (max-width: 951px) {
    .hero-box h2 {
      font-size: 1.8rem;
    }

    .hero-box p {
      font-size: 1.4rem;
    }

    .team-image img {
      max-width: 250px;
    }

    .team-content h3 {
      font-size: 1.8rem;
    }

    .role {
      font-size: 1.5rem;
    }

    .bio {
      font-size: 1.4rem;
    }
  }

  /* Responsive Adjustments for 701px - 768px */
  @media (min-width: 951px) and (max-width: 1000px) {
    .hero-box h2 {
      font-size: 1.8rem;
    }

    .hero-box p {
      font-size: 1.41rem;
    }

    .team-image img {
      max-width: 250px;
    }

    .team-content h3 {
      font-size: 1.8rem;
    }

    .role {
      font-size: 1.6rem;
    }

    .bio {
      font-size: 1.41rem;
    }
  }

  /* FOOTER */
  #main-footer {
    background-color: var(--color-blue-dark);
    color: var(--color-white);
    /* Increased top/bottom padding slightly for more vertical space */
    padding: 3rem 1rem;
    animation: fadeIn var(--fade-duration) var(--fade-ease) 1.6s forwards;
  }

  /* Wrapper to control layout of columns */
  .footer-wrapper {
    display: flex;
    flex-wrap: wrap;
    /* Space columns more evenly with a larger gap */
    justify-content: space-evenly; /* or space-around, depending on preference */
    gap: 4rem; /* increased from 3rem to 4rem */
    width: 90%;
    max-width: var(--max-width);
    margin: 0 auto;
    text-align: center;
  }

  /* Each column in the footer */
  .footer-col {
    /* Keep columns flexible but ensure a decent min width */
    flex: 1 1 150px;
    /* If you want columns not to stretch too wide, uncomment:
      max-width: 300px; */
  }

  /* Headings in each footer column */
  .footer-col h3 {
    margin-bottom: 1rem; /* increased from 0.5rem */
    font-size: 1.55rem;
    text-decoration: underline;
    text-decoration-color: var(--color-white);
  }

  /* Regular text and links in the footer */
  .footer-col p,
  .footer-col a {
    margin-bottom: 1rem; /* increased from 0.5rem */
    color: var(--color-white);
    text-decoration: none;
    font-size: 1.25rem;
  }

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

  /* Footer bottom area (copyright, etc.) */
  .footer-bottom {
    text-align: center;
    margin-top: 1rem; /* unchanged to keep copyright placement */
    color: var(--color-white);
    font-size: 0.9rem;
    opacity: 0.8;
  }

  .footer-bottom p {
    color: var(--color-white);
    font-size: 1.25rem; /* unchanged */
  }

  p img {
    width: 27px !important;     /* scales the image to match the font size */
    height: auto !important;       /* keeps the aspect ratio intact */
    vertical-align: middle;  /* aligns the image with the text */
    margin-left: 0.4rem; /* adds spacing between the text and the icon */
    transition: transform 0.3s ease; /* smooth transition for scaling */
  }

  .flag-image {
    width: 75px !important;
    height: auto !important;
    display: inline-block !important;
    margin-bottom: 2rem;
  }

  p img:hover {
    transform: scale(1.1); /* scales the image up by 10% on hover */
  }

@media (max-width: 1010px) {
  #main-footer {
    background-color: var(--color-blue-dark);
    color: var(--color-white);
    /* 90% of 3rem → 2.7rem; 90% of 1rem → 0.9rem */
    padding: 2.7rem 0.9rem;
    animation: fadeIn var(--fade-duration) var(--fade-ease) 1.6s forwards;
  }
  
  .footer-wrapper {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly; /* or space-around, depending on preference */
    /* 90% of 4rem → 3.6rem */
    gap: 3.6rem;
    width: 90%;
    max-width: var(--max-width);
    margin: 0 auto;
    text-align: center;
  }
  
  .footer-col {
    /* 90% of 150px → 135px (optional if you want the columns narrower) */
    flex: 1 1 135px;
  }
  
  .footer-col h3 {
    /* 90% of 1rem → 0.9rem */
    margin-bottom: 0.9rem;
    /* 90% of 1.55rem → ~1.395rem */
    font-size: 1.395rem;
    text-decoration: underline;
    text-decoration-color: var(--color-white);
  }
  
  .footer-col p,
  .footer-col a {
    /* 90% of 1rem → 0.9rem */
    margin-bottom: 0.9rem;
    color: var(--color-white);
    text-decoration: none;
    /* 90% of 1.25rem → 1.125rem */
    font-size: 1.125rem;
  }
  
  .footer-col p:hover,
  .footer-col a:hover {
    text-decoration: underline;
  }
  
  .footer-bottom {
    text-align: center;
    /* 90% of 4rem → 3.6rem */
    margin-top: 3.6rem;
    color: var(--color-white);
    /* 90% of 0.9rem → 0.81rem */
    font-size: 0.81rem;
    opacity: 0.8;
  }
  
  .footer-bottom p {
    color: var(--color-white);
    /* 90% of 1.25rem → 1.125rem */
    font-size: 1.125rem;
  }
  
  p img {
    /* 90% of 27px → 24.3px */
    width: 24.3px !important;
    height: auto !important;
    vertical-align: middle;
    /* 90% of 0.4rem → 0.36rem */
    margin-left: 0.36rem;
    transition: transform 0.3s ease;
  }
  
  .flag-image {
    /* 90% of 75px → 67.5px */
    width: 67.5px !important;
    height: auto !important;
    display: inline-block !important;
    /* 90% of -2rem → -1.8rem */
    margin-bottom: -1.8rem;
  }
  
  p img:hover {
    transform: scale(1.1);
  }
}

@media (min-width: 812px) and (max-width: 910px) {
  #main-footer {
    background-color: var(--color-blue-dark);
    color: var(--color-white);
    /* 80% of 3rem → 2.4rem; 80% of 1rem → 0.8rem */
    padding: 2.4rem 0.8rem;
    animation: fadeIn var(--fade-duration) var(--fade-ease) 1.6s forwards;
  }
  
  .footer-wrapper {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly; /* or space-around, depending on preference */
    /* 80% of 4rem → 3.2rem */
    gap: 3.2rem;
    width: 90%;
    max-width: var(--max-width);
    margin: 0 auto;
    text-align: center;
  }
  
  .footer-col {
    /* 80% of 150px → 120px */
    flex: 1 1 120px;
  }
  
  .footer-col h3 {
    /* 80% of 1rem → 0.8rem for margin-bottom */
    margin-bottom: 0.8rem;
    /* 80% of 1.55rem → ~1.24rem */
    font-size: 1.24rem;
    text-decoration: underline;
    text-decoration-color: var(--color-white);
  }
  
  .footer-col p,
  .footer-col a {
    /* 80% of 1rem → 0.8rem */
    margin-bottom: 0.8rem;
    color: var(--color-white);
    text-decoration: none;
    /* 80% of 1.25rem → 1rem */
    font-size: 1rem;
    transform: scale(1.10);
  }
  
  .footer-col p:hover,
  .footer-col a:hover {
    text-decoration: underline;
  }
  
  .footer-bottom {
    text-align: center;
    /* 80% of 4rem → 3.2rem */
    margin-top: 3.2rem;
    color: var(--color-white);
    /* 80% of 0.9rem → 0.72rem */
    font-size: 0.72rem;
    opacity: 0.8;
  }
  
  .footer-bottom p {
    color: var(--color-white);
    /* 80% of 1.25rem → 1rem, but if you want exactly scaled from your 90% version use 0.9rem */
    font-size: 0.9rem;
  }
  
  p img {
    /* 80% of 27px → 21.6px */
    width: 21.6px !important;
    height: auto !important;
    vertical-align: middle;
    /* 80% of 0.4rem → 0.32rem */
    margin-left: 0.32rem;
    transition: transform 0.3s ease;
  }
  
  .flag-image {
    /* 80% of 75px → 60px */
    width: 60px !important;
    height: auto !important;
    display: inline-block !important;
    /* 80% of -2rem → -1.6rem */
    margin-bottom: -1.6rem;
  }
  
  p img:hover {
    transform: scale(1.1);
  }
}

@media (min-width: 712px) and (max-width: 811px) {
  #main-footer {
    background-color: var(--color-blue-dark);
    color: var(--color-white);
    /* 70% scaling: 3rem * 0.7 = 2.1rem, 1rem * 0.7 = 0.7rem */
    padding: 2.1rem 0.7rem;
    animation: fadeIn var(--fade-duration) var(--fade-ease) 1.6s forwards;
  }
  
  .footer-wrapper {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
    /* 70% of 4rem → 2.8rem */
    gap: 2.8rem;
    width: 90%;
    max-width: var(--max-width);
    margin: 0 auto;
    text-align: center;
  }
  
  .footer-col {
    /* 70% of 150px → 105px */
    flex: 1 1 105px;
  }
  
  .footer-col h3 {
    /* 70% of 1rem → 0.7rem margin-bottom; 70% of 1.55rem → ~1.085rem */
    margin-bottom: 0.7rem;
    font-size: 1.185rem;
    text-decoration: underline;
    text-decoration-color: var(--color-white);
  }
  
  .footer-col p,
  .footer-col a {
    margin-bottom: 0.7rem;
    color: var(--color-white);
    text-decoration: none;
    /* 70% of 1.25rem → 0.875rem */
    font-size: 0.875rem;
    transform: scale(1.10);
  }
  
  .footer-col p:hover,
  .footer-col a:hover {
    text-decoration: underline;
  }
  
  .footer-bottom {
    text-align: center;
    /* 70% of 4rem → 2.8rem */
    margin-top: 2.8rem;
    color: var(--color-white);
    /* 70% of 0.9rem → 0.63rem */
    font-size: 0.63rem;
    opacity: 0.8;
  }
  
  .footer-bottom p {
    color: var(--color-white);
    /* 70% of 1.25rem → 0.875rem */
    font-size: 0.875rem;
  }
  
  p img {
    /* 70% of 27px → 18.9px; 70% of 0.4rem → 0.28rem */
    width: 18.9px !important;
    height: auto !important;
    vertical-align: middle;
    margin-left: 0.28rem;
    transition: transform 0.3s ease;
  }
  
  .flag-image {
    /* 70% of 75px → 52.5px; 70% of -2rem → -1.4rem */
    width: 58.5px !important;
    height: auto !important;
    display: inline-block !important;
    margin-bottom: -1.4rem;
  }
  
  p img:hover {
    transform: scale(1.1);
  }
}

@media (min-width: 612px) and (max-width: 711px) {
  #main-footer {
    background-color: var(--color-blue-dark);
    color: var(--color-white);
    /* 60% scaling: 3rem * 0.6 = 1.8rem, 1rem * 0.6 = 0.6rem */
    padding: 1.8rem 0.6rem;
    animation: fadeIn var(--fade-duration) var(--fade-ease) 1.6s forwards;
  }
  
  .footer-wrapper {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
    /* 60% of 4rem → 2.4rem */
    gap: 2.4rem;
    width: 90%;
    max-width: var(--max-width);
    margin: 0 auto;
    text-align: center;
  }
  
  .footer-col {
    /* 60% of 150px → 90px */
    flex: 1 1 90px;
  }
  
  .footer-col h3 {
    margin-bottom: 0.6rem;
    /* 60% of 1.55rem → 0.93rem */
    font-size: 1.13rem;
    text-decoration: underline;
    text-decoration-color: var(--color-white);
  }
  
  .footer-col p,
  .footer-col a {
    margin-bottom: 0.6rem;
    color: var(--color-white);
    text-decoration: none;
    /* 60% of 1.25rem → 0.75rem */
    font-size: 0.75rem;
    transform: scale(1.10);
  }
  
  .footer-col p:hover,
  .footer-col a:hover {
    text-decoration: underline;
  }
  
  .footer-bottom {
    text-align: center;
    /* 60% of 4rem → 2.4rem */
    margin-top: 2.4rem;
    color: var(--color-white);
    /* 60% of 0.9rem → 0.54rem */
    font-size: 0.54rem;
    opacity: 0.8;
  }
  
  .footer-bottom p {
    color: var(--color-white);
    /* 60% of 1.25rem → 0.75rem */
    font-size: 0.75rem;
  }
  
  p img {
    /* 60% of 27px → 16.2px; 60% of 0.4rem → 0.24rem */
    width: 16.2px !important;
    height: auto !important;
    vertical-align: middle;
    margin-left: 0.24rem;
    transition: transform 0.3s ease;
  }
  
  .flag-image {
    /* 60% of 75px → 45px; 60% of -2rem → -1.2rem */
    width: 50px !important;
    height: auto !important;
    display: inline-block !important;
    margin-bottom: -1.2rem;
  }
  
  p img:hover {
    transform: scale(1.1);
  }
}

@media (min-width: 547px) and (max-width: 611px) {
  #main-footer {
    background-color: var(--color-blue-dark);
    color: var(--color-white);
    /* Still 50% of original padding values */
    padding: 1.5rem 0.5rem;
    animation: fadeIn var(--fade-duration) var(--fade-ease) 1.6s forwards;
  }
  
  .footer-wrapper {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
    gap: 2rem;
    width: 90%;
    max-width: var(--max-width);
    margin: 0 auto;
    text-align: center;
  }
  
  .footer-col {
    flex: 1 1 75px;
  }
  
  .footer-col h3 {
    margin-bottom: 0.5rem;
    /* Increased from 0.775rem to 0.85rem */
    font-size: 1.03rem;
    text-decoration: underline;
    text-decoration-color: var(--color-white);
  }
  
  .footer-col p,
  .footer-col a {
    margin-bottom: 0.5rem;
    color: var(--color-white);
    text-decoration: none;
    /* Increased from 0.625rem to 0.7rem */
    font-size: 0.67rem;
    transform: scale(1.10);
  }
  
  .footer-col p:hover,
  .footer-col a:hover {
    text-decoration: underline;
  }
  
  .footer-bottom {
    text-align: center;
    margin-top: 2rem;
    color: var(--color-white);
    /* Increased from 0.45rem to 0.5rem */
    font-size: 0.5rem;
    opacity: 0.8;
  }
  
  .footer-bottom p {
    color: var(--color-white);
    /* Increased from 0.625rem to 0.7rem */
    font-size: 0.7rem;
  }
  
  p img {
    /* Kept icon sizes the same, but you can increase if needed */
    width: 16.2px !important;
    height: auto !important;
    vertical-align: middle;
    margin-left: 0.2rem;
    transition: transform 0.3s ease;
  }
  
  .flag-image {
    width: 48.5px !important;
    height: auto !important;
    display: inline-block !important;
    margin-bottom: -1rem;
  }
  
  p img:hover {
    transform: scale(1.1);
  }
}  

@media (min-width: 480px) and (max-width: 546px) {
  #main-footer {
    background-color: var(--color-blue-dark);
    color: var(--color-white);
    /* 40% scaling: 3rem * 0.4 = 1.2rem, 1rem * 0.4 = 0.4rem */
    padding: 1.2rem 0.4rem;
    animation: fadeIn var(--fade-duration) var(--fade-ease) 1.6s forwards;
  }
  
  .footer-wrapper {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
    /* 40% of 4rem → 1.6rem */
    gap: 1.6rem;
    width: 90%;
    max-width: var(--max-width);
    margin: 0 auto;
    text-align: center;
  }
  
  .footer-col {
    /* 40% of 150px → 60px */
    flex: 1 1 60px;
  }
  
  .footer-col h3 {
    margin-bottom: 0.4rem;
    /* 40% of 1.55rem → 0.62rem */
    font-size: 0.9rem;
    text-decoration: underline;
    text-decoration-color: var(--color-white);
  }
  
  .footer-col p,
  .footer-col a {
    margin-bottom: 0.4rem;
    color: var(--color-white);
    text-decoration: none;
    /* 40% of 1.25rem → 0.5rem */
    font-size: 0.60rem;
    transform: scale(1.10);
  }
  
  .footer-col p:hover,
  .footer-col a:hover {
    text-decoration: underline;
  }
  
  .footer-bottom {
    text-align: center;
    /* 40% of 4rem → 1.6rem */
    margin-top: 1.6rem;
    color: var(--color-white);
    /* 40% of 0.9rem → 0.36rem */
    font-size: 0.56rem;
    opacity: 0.8;
  }
  
  .footer-bottom p {
    color: var(--color-white);
    /* 40% of 1.25rem → 0.5rem */
    font-size: 0.56rem;
  }
  
  p img {
    /* 40% of 27px → 10.8px; 40% of 0.4rem → 0.16rem */
    width: 13.8px !important;
    height: auto !important;
    vertical-align: middle;
    margin-left: 0.16rem;
    transition: transform 0.3s ease;
  }
  
  .flag-image {
    /* 40% of 75px → 30px; 40% of -2rem → -0.8rem */
    width: 48.5px !important;
    height: auto !important;
    display: inline-block !important;
    margin-bottom: -0.8rem;
  }
  
  p img:hover {
    transform: scale(1.1);
  }
}

@media (min-width: 412px) and (max-width: 480px) {
  #main-footer {
    background-color: var(--color-blue-dark);
    color: var(--color-white);
    /* 40% scaling: 3rem * 0.4 = 1.2rem, 1rem * 0.4 = 0.4rem */
    padding: 1.2rem 0.4rem;
    animation: fadeIn var(--fade-duration) var(--fade-ease) 1.6s forwards;
  }
  
  .footer-wrapper {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
    /* 40% of 4rem → 1.6rem */
    gap: 1.6rem;
    width: 90%;
    max-width: var(--max-width);
    margin: 0 auto;
    text-align: center;
  }
  
  .footer-col {
    /* 40% of 150px → 60px */
    flex: 1 1 80px;
  }
  
  .footer-col h3 {
    margin-bottom: 0.4rem;
    /* 40% of 1.55rem → 0.62rem */
    font-size: 0.9rem;
    text-decoration: underline;
    text-decoration-color: var(--color-white);
  }
  
  .footer-col p,
  .footer-col a {
    margin-bottom: 0.4rem;
    color: var(--color-white);
    text-decoration: none;
    /* 40% of 1.25rem → 0.5rem */
    font-size: 0.548rem;
    transform: scale(1.10);
  }
  
  .footer-col p:hover,
  .footer-col a:hover {
    text-decoration: underline;
  }
  
  .footer-bottom {
    text-align: center;
    /* 40% of 4rem → 1.6rem */
    margin-top: 1.6rem;
    color: var(--color-white);
    /* 40% of 0.9rem → 0.36rem */
    font-size: 0.56rem;
    opacity: 0.8;
  }
  
  .footer-bottom p {
    color: var(--color-white);
    /* 40% of 1.25rem → 0.5rem */
    font-size: 0.56rem;
  }
  
  p img {
    /* 40% of 27px → 10.8px; 40% of 0.4rem → 0.16rem */
    width: 13.8px !important;
    height: auto !important;
    vertical-align: middle;
    margin-left: 0.16rem;
    transition: transform 0.3s ease;
  }
  
  .flag-image {
    /* 40% of 75px → 30px; 40% of -2rem → -0.8rem */
    width: 45.5px !important;
    height: auto !important;
    display: inline-block !important;
    margin-bottom: -0.8rem;
  }
  
  p img:hover {
    transform: scale(1.1);
  }
}

@media (min-width: 381px) and (max-width: 411px) {
  #main-footer {
    background-color: var(--color-blue-dark);
    color: var(--color-white);
    /* 30% scaling: 3rem * 0.3 = 0.9rem, 1rem * 0.3 = 0.3rem */
    padding: 0.9rem 0.3rem;
    animation: fadeIn var(--fade-duration) var(--fade-ease) 1.6s forwards;
  }
  
  .footer-wrapper {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
    /* 30% of 4rem → 1.2rem */
    gap: 1.2rem;
    width: 90%;
    max-width: var(--max-width);
    margin: 0 auto;
    text-align: center;
  }
  
  .footer-col {
    /* 30% of 150px → 45px */
    flex: 1 1 65px;
  }
  
  .footer-col h3 {
    margin-bottom: 0.3rem;
    /* 30% of 1.55rem → ~0.465rem */
    font-size: 0.82rem;
    text-decoration: underline;
    text-decoration-color: var(--color-white);
  }
  
  .footer-col p,
  .footer-col a {
    margin-bottom: 0.3rem;
    color: var(--color-white);
    text-decoration: none;
    /* 30% of 1.25rem → 0.375rem */
    font-size: 0.50rem;
    transform: scale(1.10);
  }
  
  .footer-col p:hover,
  .footer-col a:hover {
    text-decoration: underline;
  }
  
  .footer-bottom {
    text-align: center;
    /* 30% of 4rem → 1.2rem */
    margin-top: 1.2rem;
    color: var(--color-white);
    /* 30% of 0.9rem → 0.27rem */
    font-size: 0.8rem;
    opacity: 0.8;
  }
  
  .footer-bottom p {
    color: var(--color-white);
    /* 30% of 1.25rem → 0.375rem */
    font-size: 0.5rem;
  }
  
  p img {
    /* 30% of 27px → 8.1px; 30% of 0.4rem → 0.12rem */
    width: 9.1px !important;
    height: auto !important;
    vertical-align: middle;
    margin-left: 0.12rem;
    transition: transform 0.3s ease;
  }
  
  .flag-image {
    /* 30% of 75px → 22.5px; 30% of -2rem → -0.6rem */
    width: 45.5px !important;
    height: auto !important;
    display: inline-block !important;
    margin-bottom: -0.6rem;
  }
  
  p img:hover {
    transform: scale(1.1);
  }
}

@media (min-width: 350px) and (max-width: 380px) {
  #main-footer {
    background-color: var(--color-blue-dark);
    color: var(--color-white);
    /* 30% scaling: 3rem * 0.3 = 0.9rem, 1rem * 0.3 = 0.3rem */
    padding: 0.9rem 0.3rem;
    animation: fadeIn var(--fade-duration) var(--fade-ease) 1.6s forwards;
  }
  
  .footer-wrapper {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
    /* 30% of 4rem → 1.2rem */
    gap: 1.2rem;
    width: 90%;
    max-width: var(--max-width);
    margin: 0 auto;
    text-align: center;
  }
  
  .footer-col {
    /* 30% of 150px → 45px */
    flex: 1 1 65px;
  }
  
  .footer-col h3 {
    margin-bottom: 0.3rem;
    /* 30% of 1.55rem → ~0.465rem */
    font-size: 0.82rem;
    text-decoration: underline;
    text-decoration-color: var(--color-white);
  }
  
  .footer-col p,
  .footer-col a {
    margin-bottom: 0.3rem;
    color: var(--color-white);
    text-decoration: none;
    /* 30% of 1.25rem → 0.375rem */
    font-size: 0.42rem;
    transform: scale(1.25);
  }
  
  .footer-col p:hover,
  .footer-col a:hover {
    text-decoration: underline;
  }
  
  .footer-bottom {
    text-align: center;
    /* 30% of 4rem → 1.2rem */
    margin-top: 1.2rem;
    color: var(--color-white);
    /* 30% of 0.9rem → 0.27rem */
    font-size: 0.8rem;
    opacity: 0.8;
  }
  
  .footer-bottom p {
    color: var(--color-white);
    /* 30% of 1.25rem → 0.375rem */
    font-size: 0.5rem;
  }
  
  p img {
    /* 30% of 27px → 8.1px; 30% of 0.4rem → 0.12rem */
    width: 9.1px !important;
    height: auto !important;
    vertical-align: middle;
    margin-left: 0.12rem;
    transition: transform 0.3s ease;
  }
  
  .flag-image {
    /* 30% of 75px → 22.5px; 30% of -2rem → -0.6rem */
    width: 45.5px !important;
    height: auto !important;
    display: inline-block !important;
    margin-bottom: -0.6rem;
  }
  
  p img:hover {
    transform: scale(1.1);
  }
}

@media (min-width: 320px) and (max-width: 349px) {
  #main-footer {
    background-color: var(--color-blue-dark);
    color: var(--color-white);
    /* 30% scaling: 3rem * 0.3 = 0.9rem, 1rem * 0.3 = 0.3rem */
    padding: 0.9rem 0.3rem;
    animation: fadeIn var(--fade-duration) var(--fade-ease) 1.6s forwards;
  }
  
  .footer-wrapper {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
    /* 30% of 4rem → 1.2rem */
    gap: 1.3rem;
    width: 90%;
    max-width: var(--max-width);
    margin: 0 auto;
    text-align: center;
  }
  
  .footer-col {
    /* 30% of 150px → 45px */
    flex: 1 1 65px;
  }
  
  .footer-col h3 {
    margin-bottom: 0.3rem;
    /* 30% of 1.55rem → ~0.465rem */
    font-size: 0.82rem;
    text-decoration: underline;
    text-decoration-color: var(--color-white);
  }
  
  .footer-col p,
  .footer-col a {
    margin-bottom: 0.3rem;
    color: var(--color-white);
    text-decoration: none;
    /* 30% of 1.25rem → 0.375rem */
    font-size: 0.405rem;
    transform: scale(1.25);
  }
  
  .footer-col p:hover,
  .footer-col a:hover {
    text-decoration: underline;
  }
  
  .footer-bottom {
    text-align: center;
    /* 30% of 4rem → 1.2rem */
    margin-top: 1.2rem;
    color: var(--color-white);
    /* 30% of 0.9rem → 0.27rem */
    font-size: 0.8rem;
    opacity: 0.8;
  }
  
  .footer-bottom p {
    color: var(--color-white);
    /* 30% of 1.25rem → 0.375rem */
    font-size: 0.5rem;
  }
  
  p img {
    /* 30% of 27px → 8.1px; 30% of 0.4rem → 0.12rem */
    width: 9.1px !important;
    height: auto !important;
    vertical-align: middle;
    margin-left: 0.12rem;
    transition: transform 0.3s ease;
  }
  
  .flag-image {
    /* 30% of 75px → 22.5px; 30% of -2rem → -0.6rem */
    width: 45.5px !important;
    height: auto !important;
    display: inline-block !important;
    margin-bottom: -0.6rem;
  }
  
  p img:hover {
    transform: scale(1.1);
  }
}

@media (min-width: 300px) and (max-width: 319px) {
  #main-footer {
    background-color: var(--color-blue-dark);
    color: var(--color-white);
    /* 30% scaling: 3rem * 0.3 = 0.9rem, 1rem * 0.3 = 0.3rem */
    padding: 0.9rem 0.3rem;
    animation: fadeIn var(--fade-duration) var(--fade-ease) 1.6s forwards;
  }
  
  .footer-wrapper {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
    /* 30% of 4rem → 1.2rem */
    gap: 1.3rem;
    width: 90%;
    max-width: var(--max-width);
    margin: 0 auto;
    text-align: center;
  }
  
  .footer-col {
    /* 30% of 150px → 45px */
    flex: 1 1 65px;
  }
  
  .footer-col h3 {
    margin-bottom: 0.3rem;
    /* 30% of 1.55rem → ~0.465rem */
    font-size: 0.82rem;
    text-decoration: underline;
    text-decoration-color: var(--color-white);
  }
  
  .footer-col p,
  .footer-col a {
    margin-bottom: 0.3rem;
    color: var(--color-white);
    text-decoration: none;
    /* 30% of 1.25rem → 0.375rem */
    font-size: 0.37rem;
    transform: scale(1.10);
  }
  
  .footer-col p:hover,
  .footer-col a:hover {
    text-decoration: underline;
  }
  
  .footer-bottom {
    text-align: center;
    /* 30% of 4rem → 1.2rem */
    margin-top: 1.2rem;
    color: var(--color-white);
    /* 30% of 0.9rem → 0.27rem */
    font-size: 0.8rem;
    opacity: 0.8;
  }
  
  .footer-bottom p {
    color: var(--color-white);
    /* 30% of 1.25rem → 0.375rem */
    font-size: 0.5rem;
  }
  
  p img {
    /* 30% of 27px → 8.1px; 30% of 0.4rem → 0.12rem */
    width: 9.1px !important;
    height: auto !important;
    vertical-align: middle;
    margin-left: 0.12rem;
    transition: transform 0.3s ease;
  }
  
  .flag-image {
    /* 30% of 75px → 22.5px; 30% of -2rem → -0.6rem */
    width: 45.5px !important;
    height: auto !important;
    display: inline-block !important;
    margin-bottom: -0.6rem;
  }
  
  p img:hover {
    transform: scale(1.1);
  }
}

@media (min-width: 300px) and (max-width: 325px) {
  .team-image img {
    max-width: 210px;
    height: auto;
    border-radius: 8px; /* or 50% for circular */
    object-fit: cover;
    object-position: center;
  }
}

@media (min-width: 326px) and (max-width: 352px) {
  .team-image img {
    max-width: 230px;
    height: auto;
    border-radius: 8px; /* or 50% for circular */
    object-fit: cover;
    object-position: center;
  }
}

@media (min-width: 353px) and (max-width: 399px) {
  .team-image img {
    max-width: 250px;
    height: auto;
    border-radius: 8px; /* or 50% for circular */
    object-fit: cover;
    object-position: center;
  }
}

@media (min-width: 400px) and (max-width: 446px) {
  .team-image img {
    max-width: 280px;
    height: auto;
    border-radius: 8px; /* or 50% for circular */
    object-fit: cover;
    object-position: center;
  }
}

@media (min-width: 457px) and (max-width: 536px) {
  .team-image img {
    max-width: 300px;
    height: auto;
    border-radius: 8px; /* or 50% for circular */
    object-fit: cover;
    object-position: center;
  }
}

@media (min-width: 537px) and (max-width: 616px) {
  .team-image img {
    max-width: 350px;
    height: auto;
    border-radius: 8px; /* or 50% for circular */
    object-fit: cover;
    object-position: center;
  }
}

@media (min-width: 617px) and (max-width: 768px) {
  .team-image img {
    max-width: 400px;
    height: auto;
    border-radius: 8px; /* or 50% for circular */
    object-fit: cover;
    object-position: center;
  }
}

@media (min-width: 769px) and (max-width: 899px) {
  .team-image img {
    max-width: 270px;
    height: auto;
    border-radius: 8px; /* or 50% for circular */
    object-fit: cover;
    object-position: center;
  }
}

@media (min-width: 900px) and (max-width: 1000px) {
  .team-image img {
    max-width: 300px;
    height: auto;
    border-radius: 8px; /* or 50% for circular */
    object-fit: cover;
    object-position: center;
  }
}

@media (min-width: 1001px) and (max-width: 1200px) {
  .team-image img {
    max-width: 350px;
    height: auto;
    border-radius: 8px; /* or 50% for circular */
    object-fit: cover;
    object-position: center;
  }
}

@media (min-width: 1201px) and (max-width: 2000px) {
  .team-image img {
    max-width: 400px;
    height: auto;
    border-radius: 8px; /* or 50% for circular */
    object-fit: cover;
    object-position: center;
  }
}