.global-profession .display-5{
    font-size: clamp(1rem, 3vw, 2.8rem);
    line-height: 80%;
    margin: 0;
}
.person-bg {
    max-width: 100%; /* Ensure image doesn't exceed container width */
    height: auto;
}
  
/* <---Person 1 ---> */
.person-container-1 {
    width: 100%; /* Adjust as needed */
    height: auto; /* Adjust as needed */

}

.person-1-batch {
    width: 15vw; /* Relative width based on viewport width */
    max-width: 100%; /* Ensure image doesn't exceed container width */
    height: auto; /* Adjust as needed */
    top: 35%; /* Adjust as needed */
    left: 78%; /* Adjust as needed */
    animation: moving 2s ease-in-out infinite;
}

.person-1 {
    max-width: 20vw; /* Ensure image doesn't exceed container width */
    height: auto;
    position: absolute;
    top: 58%; /* Adjust as needed */
    left: 86%; /* Adjust as needed */
    transform: translate(-50%, -50%); /* Center the image based on its own dimensions */
    transition: transform 0.3s ease-in-out; /* Smooth transition for opacity */
}

.person-desc-1 {
    opacity: 0;
    transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out; /* Smooth transition for opacity */
}

.person-container-1:hover .person-1 {
    transform: translate(-45%, -55%) scale(1.1); /* Scale up and maintain center */
}

.person-container-1:hover .person-desc-1 {
    opacity: 1; /* Show description on hover */
    transform: translate(-45%, -55%) scale(1.1); /* Scale up and maintain center */
}

/* ------ */


/* <---Person 2 ---> */
.person-container-2 {
    width: 100%; /* Adjust as needed */
    height: auto; /* Adjust as needed */
  
}

.person-2-batch {
    width: 15vw; /* Relative width based on viewport width */
    max-width: 100%; /* Ensure image doesn't exceed container width */
    height: auto; /* Adjust as needed */
    top: 60%; /* Adjust as needed */
    left: 55%; /* Adjust as needed */
    animation: moving 2s ease-in-out infinite;
}

.person-2 {
    max-width: 20vw; /* Ensure image doesn't exceed container width */
    height: auto;
    position: absolute;
    top: 68%; /* Adjust as needed */
    left: 66.9%; /* Adjust as needed */
    transform: translate(-50%, -50%); /* Center the image based on its own dimensions */
    transition: transform 0.3s ease-in-out; /* Smooth transition for opacity */
}

.person-desc-2 {
    opacity: 0;
    transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out; /* Smooth transition for opacity */
}

.person-container-2:hover .person-2 {
    transform: translate(-55%, -55%) scale(1.1); /* Scale up and maintain center */
}

.person-container-2:hover .person-desc-2 {
    opacity: 1; /* Show description on hover */
    transform: translate(-55%, -55%) scale(1.1); /* Scale up and maintain center */
}
/* ------ */


/* <---Person 3 ---> */
.person-container-3 {
    width: 100%; /* Adjust as needed */
    height: auto; /* Adjust as needed */
  
}

.person-3-batch {
    width: 15vw; /* Relative width based on viewport width */
    max-width: 100%; /* Ensure image doesn't exceed container width */
    height: auto; /* Adjust as needed */
    top: 55%; /* Adjust as needed */
    left: 23%; /* Adjust as needed */
    animation: moving 2s ease-in-out infinite;
}

.person-3 {
    max-width: 21.5vw; /* Ensure image doesn't exceed container width */
    height: auto;
    position: absolute;
    top: 79.5%; /* Adjust as needed */
    left: 34%; /* Adjust as needed */
    transform: translate(-50%, -50%); /* Center the image based on its own dimensions */
    transition: transform 0.3s ease-in-out; /* Smooth transition for opacity */
}

.person-desc-3 {
    opacity: 0;
    transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out; /* Smooth transition for opacity */
}

.person-container-3:hover .person-3 {
    transform: translate(-44%, -55%) scale(1.1); /* Scale up and maintain center */
}

.person-container-3:hover .person-desc-3 {
    opacity: 1; /* Show description on hover */
    transform: translate(-44%, -55%) scale(1.1); /* Scale up and maintain center */
}
/* ------ */


/* <---Person 4 ---> */
.person-container-4 {
    width: 100%; /* Adjust as needed */
    height: auto; /* Adjust as needed */
}

.person-4-batch {
    width: 15vw; /* Relative width based on viewport width */
    max-width: 100%; /* Ensure image doesn't exceed container width */
    height: auto; /* Adjust as needed */
    top: 18%; /* Adjust as needed */
    left: 10%; /* Adjust as needed */
    animation: moving 2s ease-in-out infinite;
}

.person-4 {

    max-width: 19vw; /* Ensure image doesn't exceed container width */
    height: auto;
    position: absolute;
    top: 43.8%; /* Adjust as needed */
    left: 15.5%; /* Adjust as needed */
    transform: translate(-50%, -50%); /* Center the image based on its own dimensions */
    transition: transform 0.3s ease-in-out; /* Smooth transition for opacity */
}

.person-desc-4 {
    opacity: 0;
    transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out; /* Smooth transition for opacity */
}

.person-container-4:hover .person-4 {
    transform: translate(-50%, -55%) scale(1.1); /* Scale up and maintain center */
}

.person-container-4:hover .person-desc-4 {
    opacity: 1; /* Show description on hover */
    transform: translate(-50%, -55%) scale(1.1); /* Scale up and maintain center */
}
/* ------ */


/* <---Person 5 ---> */
.person-container-5 {
    width: 100%; /* Adjust as needed */
    height: auto; /* Adjust as needed */
    z-index: 0;
  
}

.person-5-batch {
    width: 14vw; /* Relative width based on viewport width */
    max-width: 100%; /* Ensure image doesn't exceed container width */
    height: auto; /* Adjust as needed */
    top: 2%;
    left: 29%;
    animation: moving 2s ease-in-out infinite;
}

.person-5 {

    max-width: 19.5vw; /* Ensure image doesn't exceed container width */
    height: auto;
    top: 30.1%; /* Adjust as needed */
    left: 36%; /* Adjust as needed */
    transform: translate(-50%, -50%); /* Center the image based on its own dimensions */
    transition: transform 0.3s ease-in-out; /* Smooth transition for opacity */
    z-index: 999999 !important;
}

.person-desc-5 {
    opacity: 0;
    transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out; /* Smooth transition for opacity */
}

.person-container-5:hover .person-5 {
    transform: translate(-50%, -55%) scale(1.1); /* Scale up and maintain center */
}

.person-container-5:hover .person-desc-5 {
    opacity: 1; /* Show description on hover */
}



/* Person 6 */
.person-container-6 {
    width: 100%; /* Adjust as needed */
    height: auto; /* Adjust as needed */
  
}

.person-6 {
    max-width: 18vw; /* Ensure image doesn't exceed container width */
    height: auto;
    position: absolute;
    top: 79.5%; /* Adjust as needed */
    left: 14%; /* Adjust as needed */
    transform: translate(-50%, -50%); /* Center the image based on its own dimensions */
    transition: transform 0.3s ease-in-out; /* Smooth transition for opacity */
}

.person-desc-6 {
    opacity: 0;
    transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out; /* Smooth transition for opacity */
}

.person-container-6:hover .person-6 {
    transform: translate(-55%, -55%) scale(1.1); /* Scale up and maintain center */
}

.person-container-6:hover .person-desc-6 {
    opacity: 1; /* Show description on hover */
    transform: translate(-55%, -55%) scale(1.1); /* Scale up and maintain center */
}

/* Person 7 */
.person-container-7 {
    width: 100%; /* Adjust as needed */
    height: auto; /* Adjust as needed */
    z-index: 0;
  
}

.person-7 {

    max-width: 20vw; /* Ensure image doesn't exceed container width */
    height: auto;
    top: 26.5%; /* Adjust as needed */
    left: 89.2%; /* Adjust as needed */
    transform: translate(-50%, -50%); /* Center the image based on its own dimensions */
    transition: transform 0.3s ease-in-out; /* Smooth transition for opacity */
}

.person-desc-7 {
    opacity: 0;
    transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out; /* Smooth transition for opacity */
}

.person-container-7:hover .person-7 {
    transform: translate(-50%, -55%) scale(1.1); /* Scale up and maintain center */
}

.person-container-7:hover .person-desc-7 {
    opacity: 1; /* Show description on hover */
}


/* Person 8 */
.person-container-8 {
    width: 100%; /* Adjust as needed */
    height: auto; /* Adjust as needed */
    z-index: 0;
  
}

.person-8 {

    max-width: 15vw; /* Ensure image doesn't exceed container width */
    height: auto;
    top: 80%; /* Adjust as needed */
    left: 50%; /* Adjust as needed */
    transform: translate(-50%, -50%); /* Center the image based on its own dimensions */
    transition: transform 0.3s ease-in-out; /* Smooth transition for opacity */
}

.person-desc-8 {
    opacity: 0;
    transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out; /* Smooth transition for opacity */
}

.person-container-8:hover .person-8 {
    transform: translate(-50%, -55%) scale(1.1); /* Scale up and maintain center */
}

.person-container-8:hover .person-desc-8 {
    opacity: 1; /* Show description on hover */
}


/* Person 9 */
.person-container-9 {
    width: 100%; /* Adjust as needed */
    height: auto; /* Adjust as needed */
    z-index: 0;
  
}

.person-9 {

    max-width: 15vw; /* Ensure image doesn't exceed container width */
    height: auto;
    top: 20.3%; /* Adjust as needed */
    left: 25%; /* Adjust as needed */
    transform: translate(-50%, -50%); /* Center the image based on its own dimensions */
    transition: transform 0.3s ease-in-out; /* Smooth transition for opacity */
}

.person-desc-9 {
    opacity: 0;
    transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out; /* Smooth transition for opacity */
}

.person-container-9:hover .person-9 {
    transform: translate(-50%, -55%) scale(1.1); /* Scale up and maintain center */
}

.person-container-9:hover .person-desc-9 {
    opacity: 1; /* Show description on hover */
}


/* Person 10 */
.person-container-10 {
    width: 100%; /* Adjust as needed */
    height: auto; /* Adjust as needed */
    z-index: 0;
}

.person-10 {

    max-width: 15vw; /* Ensure image doesn't exceed container width */
    height: auto;
    top: 33%; /* Adjust as needed */
    left: 63%; /* Adjust as needed */
    transform: translate(-50%, -50%); /* Center the image based on its own dimensions */
    transition: transform 0.3s ease-in-out; /* Smooth transition for opacity */
}

.person-desc-10 {
    opacity: 0;
    transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out; /* Smooth transition for opacity */
}

.person-container-10:hover .person-10 {
    transform: translate(-50%, -55%) scale(1.1); /* Scale up and maintain center */
}

.person-container-10:hover .person-desc-10 {
    opacity: 1; /* Show description on hover */
}


/* Person 11 */
.person-container-11 {
    width: 100%; /* Adjust as needed */
    height: auto; /* Adjust as needed */
    z-index: 0;
}

.person-11 {

    max-width: 15vw; /* Ensure image doesn't exceed container width */
    height: auto;
    top: 82.9%; /* Adjust as needed */
    left: 85%; /* Adjust as needed */
    transform: translate(-50%, -50%); /* Center the image based on its own dimensions */
    transition: transform 0.3s ease-in-out; /* Smooth transition for opacity */
}

.person-desc-11 {
    opacity: 0;
    transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out; /* Smooth transition for opacity */
}

.person-container-11:hover .person-11 {
    transform: translate(-50%, -55%) scale(1.1); /* Scale up and maintain center */
}

.person-container-11:hover .person-desc-11 {
    opacity: 1; /* Show description on hover */
}



@keyframes moving{
    0%, 100% {
        transform: translateY(0);
      }
      50% {
        transform: translateY(0.6rem);
      }
}
/* ------ */