.about-header {
    position: relative; 
    height: 200px; 
    color: #fdfdfd;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background-color: #004969;
    color: #ffffff;
  }
.player-box > a{
    text-decoration: none;
}
.navbar-under a {
    color: white;
    text-decoration: none;
}
.navbar-under a:hover{
    color: #6fafca;
    text-decoration: none;
}


h2{
    color: #004969;
    text-transform: uppercase;
    font-size: 20px;
    margin-left: 2%;
    
}
    @media (max-width: 768px) {
        h2{
            font-size: 15px;
            text-align: center;
            
        }
    }


/* ================================================== */
.p-hover {
    overflow: hidden;
    width: 100%;
    padding: 1rem;
    display: flex;
    justify-content: center;
    align-items: center;
    
}



/* =================================== */
.p-front1 {
    overflow: hidden;
    height: 260px;
    width: 200px;
    position: relative;
    cursor: pointer;
    margin: 0 0 0 0;
    box-shadow: 0 0 25px 1px rgba(0, 0, 0, .3);
    transition: .5s;
    border: none;
    padding: 0; /* Ensure no padding */
    background-color: transparent; /* Ensure no background color */
}

/* @media (max-width: 768px) {
    .p-front1 {
        margin: 0 20% 30px; 
    }
}

@media (max-width: 450px) {
    .p-front1 {
        margin: 0 25% 35px; 
    }
} 

@media (max-width: 375px) {
    .p-front1 {
        margin: 0 21% 30px; 
    }
} 

@media (max-width: 320px) {
    .p-front1 {
        margin: 0 18% 30px; 
    }
}  */

.p-front1:after {
    content: '';
    position: absolute;
    z-index: 1;
    top: 50%;
    left: 50%;
    width: 500px;
    height: 500px;
    transform: translate(-140%, -50%);
    background-color: #a5a800;
    opacity: 0.8;
    border-radius: 50%;
    transition: .8s;
}

.p-front1:hover:after {
    transform: translate(-50%, -50%);
} 

.p-front1:hover img {
    transform: translate(-50%, -50%) scale(1.3) rotate(20deg);
}

.p-front1 > img {
    position: absolute;
    height: 110%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    transition: .8s;
    border: none; /* Ensure no border on image */
}

.p-front1 > p {
    position: absolute;
    z-index: 2;
    top: 50%;
    left: 50%;
    transform: translate(-2000px, -50%);
    color: #fff;
    transition: .8s;
    transition-timing-function: ease-in;
}

.p-front1:hover p {
    transform: translate(-50%, -50%);
    transition-timing-function: ease;
} 

.p-front1 > h5 {
    position: absolute;
    z-index: 2;
    top: 40%;
    left: 50%;
    transform: translate(-2000px, -50%);
    color: #fff;
    transition: .8s;
    transition-timing-function: ease-in;
}

.p-front1:hover h5 {
    transform: translate(-50%, -50%);
    transition-timing-function: ease;
}

/* DEFENDERS */
/* ======================================= */
.p-imageDef {
    overflow: hidden;
    height: 250px;
    width: 200px;
    position: relative;
    cursor: pointer;
    margin: 0 15px 30px;
    box-shadow: 0 0 25px 1px rgba(0, 0, 0, .3);
    transition: .5s;
    /* background-color: #555 */
}
@media (max-width: 768px) {
    .p-imageDef {
        margin: 0 20% 30px; 
    }
}
@media (max-width: 450px) {
    .p-imageDef {
        margin: 0 25% 35px; 
    }
} 
@media (max-width: 375px) {
    .p-imageDef {
        margin: 0 21% 30px; 
    }
} 
@media (max-width: 320px) {
    .p-imageDef {
        margin: 0 18% 30px; 
    }
} 
.p-imageDef:after {
    content: '';
    position: absolute;
    z-index: 1;
    top: 50%;
    left: 50%;
    width: 500px;
    height: 500px;
    transform: translate(-140%, -50%);
    background-color: #a5a800;
    opacity: 0.8;
    border-radius: 50%;
    transition: .8s
}

.p-imageDef:hover:after {
    transform: translate(-50%, -50%)
} 

    .p-imageDef:hover img {
    transform: translate(-50%, -50%) scale(1.3) rotate(20deg)
}

.p-imageDef > img {
    position: absolute;
    height: 110%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    transition: .8s
}

.p-imageDef > p {
    position: absolute;
    z-index: 2;
    top: 50%;
    left: 50%;
    transform: translate(-2000px, -50%);
    color: #fff;
    transition: .8s;
    transition-timing-function: ease-in
}

.p-imageDef:hover p {
    transform: translate(-50%, -50%);
    transition-timing-function: ease
} 
    .p-imageDef > h5 {
    position: absolute;
    z-index: 2;
    top: 40%;
    left: 50%;
    transform: translate(-2000px, -50%);
    color: #fff;
    transition: .8s;
    transition-timing-function: ease-in
}

.p-imageDef:hover h5 {
    transform: translate(-50%, -50%);
    transition-timing-function: ease
}


/* MIDFIELDERS */
/* ======================================= */
.p-imageMid {
    overflow: hidden;
    height: 250px;
    width: 200px;
    position: relative;
    cursor: pointer;
    margin: 0 15px 30px;
    box-shadow: 0 0 25px 1px rgba(0, 0, 0, .3);
    transition: .5s;
    /* background-color: #555 */
}
@media (max-width: 768px) {
    .p-imageMid {
        margin: 0 20% 30px; 
    }
}
@media (max-width: 450px) {
    .p-imageMid {
        margin: 0 25% 35px; 
    }
} 
@media (max-width: 375px) {
    .p-imageMid {
        margin: 0 21% 30px; 
    }
} 
@media (max-width: 320px) {
    .p-imageMid {
        margin: 0 18% 30px; 
    }
} 
.p-imageMid:after {
    content: '';
    position: absolute;
    z-index: 1;
    top: 50%;
    left: 50%;
    width: 500px;
    height: 500px;
    transform: translate(-140%, -50%);
    background-color: #b6741d;
    opacity: 0.8;
    border-radius: 50%;
    transition: .8s
}

.p-imageMid:hover:after {
    transform: translate(-50%, -50%)
} 

    .p-imageMid:hover img {
    transform: translate(-50%, -50%) scale(1.3) rotate(20deg)
}

.p-imageMid > img {
    position: absolute;
    height: 110%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    transition: .8s
}

.p-imageMid > p {
    position: absolute;
    z-index: 2;
    top: 50%;
    left: 50%;
    transform: translate(-2000px, -50%);
    color: #fff;
    transition: .8s;
    transition-timing-function: ease-in
}

.p-imageMid:hover p {
    transform: translate(-50%, -50%);
    transition-timing-function: ease
} 
    .p-imageMid > h5 {
    position: absolute;
    z-index: 2;
    top: 40%;
    left: 50%;
    transform: translate(-2000px, -50%);
    color: #fff;
    transition: .8s;
    transition-timing-function: ease-in
}

.p-imageMid:hover h5 {
    transform: translate(-50%, -50%);
    transition-timing-function: ease
}

/* STRIKERS */
/* ======================================= */
.p-imageStri{
    overflow: hidden;
    height: 250px;
    width: 200px;
    position: relative;
    cursor: pointer;
    margin: 0 15px 30px; 
    box-shadow: 0 0 25px 1px rgba(0, 0, 0, .3);
    transition: .5s;
}
@media (max-width: 768px) {
    .p-imageStri {
        margin: 0 20% 30px; 
    }
}
@media (max-width: 450px) {
    .p-imageStri {
        margin: 0 25% 35px; 
    }
} 
@media (max-width: 375px) {
    .p-imageStri {
        margin: 0 21% 30px; 
    }
} 
@media (max-width: 320px) {
    .p-imageStri {
        margin: 0 18% 30px; 
    }
} 

.p-imageStri:after {
    content: '';
    position: absolute;
    z-index: 1;
    top: 50%;
    left: 50%;
    width: 500px;
    height: 500px;
    transform: translate(-140%, -50%);
    background-color: #104ba3;
    opacity: 0.8;
    border-radius: 50%;
    transition: .8s
}

.p-imageStri:hover:after {
    transform: translate(-50%, -50%)
} 

    .p-imageStri:hover img {
    transform: translate(-50%, -50%) scale(1.3) rotate(20deg)
}

.p-imageStri > img {
    position: absolute;
    height: 110%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    transition: .8s
}

.p-imageStri > p {
    position: absolute;
    z-index: 2;
    top: 50%;
    left: 50%;
    transform: translate(-2000px, -50%);
    color: #fff;
    transition: .8s;
    transition-timing-function: ease-in
}

.p-imageStri:hover p {
    transform: translate(-50%, -50%);
    transition-timing-function: ease
} 
    .p-imageStri > h5 {
    position: absolute;
    z-index: 2;
    top: 40%;
    left: 50%;
    transform: translate(-2000px, -50%);
    color: #fff;
    transition: .8s;
    transition-timing-function: ease-in
}

.p-imageStri:hover h5 {
    transform: translate(-50%, -50%);
    transition-timing-function: ease
}
hr{
    margin-right: 80%; 
    margin-left: 1%; 
    color:#004969;
}
@media (max-width: 600px) {
    hr{
        margin-right: 60%; 
        margin-left: 20%; 
        color:#004969;
    }
} 


/* GOALKEEPER */
/* ======================================= */
/* Default styling for all players */
.p-image {
    overflow: hidden;
    height: 250px;
    width: 200px;
    position: relative;
    cursor: pointer;
    margin: 0 15px 30px;
    box-shadow: 0 0 25px 1px rgba(0, 0, 0, .3);
    transition: .5s;
}

/* Responsive design adjustments */
@media (max-width: 768px) {
    .p-image {
        margin: 0 20% 30px; 
    }
}

@media (max-width: 450px) {
    .p-image {
        margin: 0 25% 35px; 
    }
}

@media (max-width: 375px) {
    .p-image {
        margin: 0 21% 30px; 
    }
}

@media (max-width: 320px) {
    .p-image {
        margin: 0 18% 30px; 
    }
}

.p-image:after {
    content: '';
    position: absolute;
    z-index: 1;
    top: 50%;
    left: 50%;
    width: 500px;
    height: 500px;
    transform: translate(-140%, -50%);
    background-color: #d7fb49;
    opacity: 0.8;
    border-radius: 50%;
    transition: .8s;
}

.p-image:hover:after {
    transform: translate(-50%, -50%);
} 

.p-image:hover img {
    transform: translate(-50%, -50%) scale(1.3) rotate(20deg);
}

.p-image > img {
    position: absolute;
    height: 110%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    transition: .8s;
}

.p-image > h5 {
    position: absolute;
    z-index: 2;
    top: 40%;
    left: 50%;
    transform: translate(-2000px, -50%);
    color: #fff;
    transition: .8s;
    transition-timing-function: ease-in;
}

.p-image:hover h5 {
    transform: translate(-50%, -50%);
    transition-timing-function: ease;
}