/*TEAM*/
#banner {
    width: 900px;  /* Set a max width for the container */
    height: 400px; /* Set a max height for the container */
    /* overflow: hidden; Prevent the image from overflowing when scaled */
    margin: 0 auto; /* Center the container */
    position: relative; /* So we can position elements inside it if needed */
}
/* Hide the checkbox (we only use it for toggling the effect) */
.image-toggle {
    display: none;
}
.image-hover-team {
    width: 100%;     /* The image will be responsive to the container size */
    height: 100%;    /* The image will fill the container */
    transition: transform 4s ease-in; /* Smooth transition */
    object-fit: cover; /* Ensure the image doesn't stretch or distort */
    position: absolute;
    z-index: 999;
}
/* .image-hover-team:hover {
    transform: scale(5);
    transform-origin: center top;
} */
.image-toggle:checked + .image-hover-team {
    transform: scale(20); /* Enlarge the image by 8 times */
    transform-origin: center center; /* Scale from the center */
}

/* SOPHIE */
.image-hover-slkeys {
    width: 480px; /* Specify the width */
    height: 240px; /* Specify the height */
    /* background-image: url('./img/Sophie.jpeg'); Initial background image */
    background-size: cover; /* Cover the entire area of the element */
    transition: background-image 0.5s ease-in-out; /* Smooth transition */
}
.image-hover-slkeys:hover {
    content: url('./img/Sophie2.jpg'); /* Change on hover */
}


/* HUNTER */
.image-hover-hafield {
    width: 480px; /* Specify the width */
    height: 260px; /* Specify the height */
    background-size: cover; /* Cover the entire area of the element */
    transition: background-image 0.5s ease-in-out; /* Smooth transition */
}
.image-hover-hafield:hover {
    content: url('./img/Hunter3.jpg'); /* Change on hover */
}


/* CULLEN */
.image-hover-bradl {
    width: 480px; /* Specify the width */
    height: 240px; /* Specify the height */
    background-size: cover; /* Cover the entire area of the element */
    transition: background-image 0.5s ease-in-out; /* Smooth transition */
}
.image-hover-bradl:hover {
    content: url('./img/Cullen2.JPG'); /* Change on hover */
}


/* VISUWANAATH */
.image-hover-selvamv {
    width: 480px; /* Specify the width */
    height: 240px; /* Specify the height */
    background-size: cover; /* Cover the entire area of the element */
    transition: background-image 0.5s ease-in-out; /* Smooth transition */
}
.image-hover-selvamv:hover {
    content: url(''); /* Change on hover */
}

.center {
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 50%;
  }