/* Custom styles */
body {
    font-family: 'Arial', sans-serif;
    line-height: 1.6;
    background-color: #faf9f6;
}

header, footer {
    background-color: #003366;
}

a {
    text-decoration: none;
}

a:hover {
    text-decoration: none;
}

footer p {
    font-size: 14px;
}

  /* Style for the hamburger icon */
  .navbar-toggler-icon {
    background-color: white;  /* Set the icon color to white */
    border-color: white;      /* Ensure the border is white */
}

/* On hover, change the icon background to a lighter shade */
.navbar-toggler:hover .navbar-toggler-icon {
    background-color: #d1d1d1;  /* Lighter shade when hovered */
}

/* Optionally, you can add a focus effect for accessibility */
.navbar-toggler:focus .navbar-toggler-icon {
    background-color: #bbb;  /* Slightly darker shade when focused */
    outline: none;           /* Remove default focus outline */
}

/* Mobile First */
.Team {
    display: flex;            /* Use flexbox to center the image */
    justify-content: center;  /* Center the image horizontally */
    align-items: center;      /* Center the image vertically */
    height: 100px;            /* Set a fixed height for the container */
    width: 100px;             /* Set a fixed width for the container */
    margin: 0 auto;           /* Center the container itself if needed */
}

.Team img {
    width: 100%;              /* Make the image fill the container */
    height: 100%;             /* Ensure the image fills the container proportionally */
    object-fit: cover;        /* Ensure the image covers the area without distortion */
    border-radius: 50%;       /* Make the image rounded (circle) */
}

/* For larger screens, adjust the size of the container */
@media (min-width: 768px) {
    .Team {
        height: 150px;        /* Increase height on larger screens */
        width: 150px;         /* Increase width on larger screens */
    }

    .Team img {
        border-radius: 50%;  /* Maintain rounded shape */
    }
}

/* For even larger screens */
@media (min-width: 1024px) {
    .Team {
        height: 200px;        /* Increase height on larger screens */
        width: 200px;         /* Increase width on larger screens */
    }
}