/* footer */
footer {
    display: grid; /* Assuming you want to use CSS Grid for layout */
    place-items: center; /* This centers the content in the grid */
    padding: 30px 20px;
    background: linear-gradient(90deg, #808080 0%, #c5c5c5 25%, #eeeeee 50%, #c5c5c5 75%, #808080 100%);
    color: white;
    padding-top: 20px;
    padding-bottom: 10px;
    border-top: 2px solid black;
}

@keyframes neonBlackShadow {
    0%, 100% {
        text-shadow: none;
    }
    50% {
        text-shadow: 0 0 5px black;
    }
}

@keyframes blacktoWhiteFadeFooter {
    0%, 100% {
        background: blue;
        width: 0px;
    }
    50% {
        background: blue;
        width: 80px;
    }
}

footer h5 {
    color: blue;
    text-align: center;
    font-size: 20px;
    text-shadow: 0 0 10px black, 0 0 12px black;
    animation: 4s neonBlackShadow ease-in-out infinite;
}

footer h5:after {
	content: '';
	background: #ffe233;
	display: block;
	height: 3px;
	margin: 15px auto 5px;
    animation: blacktoWhiteFadeFooter 4s ease-in-out infinite;
    border: 1px solid black;
    margin-bottom: 15px;
    border-radius: 20px;
}

footer .btn {
    border-radius: 20px;
    box-shadow: 0 0 10px black;
    margin-bottom: 5px;
    background: linear-gradient(90deg, #bf9a47 0%, #ffe233 25%, #ffe233 75%, #bf9a47 100%);
    color: black;
    font-weight: bold;
}

footer .btn:hover {
    box-shadow: 0 0 10px white;
    background-color: rgb(255, 255, 255, 0.1);
}

footer img {
    grid-column: 1 / -1; /* Assuming you want the image to be full-width in the grid */
    justify-self: center; /* Center the image horizontally */
    width: 60%; /* Adjust the size of your logo as needed */
    height: auto;
    margin-top: 10px;
    margin-bottom: 10px;
}

footer .copyright {
    font-size: 0.8em;
    text-align: center; /* Center the text */
    color: white;
    text-shadow: 0 0 10px black, 0 0 20px black;
}

footer .team-border-head2 {
    margin-top: 20px;
	transition: opacity 0.3s ease, box-shadow 0.05s ease;
    padding: 15px; /* Adjust based on your design preference */
    margin-bottom: 20px; /* Provides spacing between rows of team members */
    border-radius: 30px; /* Optional: Adds rounded corners */
    box-shadow: 0 0px 10px rgba(0, 0, 0, 0.8), 0 0px 20px rgba(0, 0, 0, 0.8);
    background: linear-gradient(90deg, #bf9a47 0%, #ffe233 25%, #ffe233 75%, #bf9a47 100%);
}

footer li {
    margin-top: 10px;
}

footer li a {
    text-decoration: none;
    color: white;
    font-weight: bold;
    text-shadow: 0 0 15px black;
}

footer li a:hover {
    color: blue;
    text-shadow: 0 0 10px white, 0 0 20px white, 0 0 40px whitesmoke;
}

footer p {
    color: white;
    font-style: normal;
}
/* footer */

@media screen and (min-width: 320px) {

    footer img {
        grid-column: 1 / -1; /* Assuming you want the image to be full-width in the grid */
        justify-self: center; /* Center the image horizontally */
        width: 15%; /* Adjust the size of your logo as needed */
        height: auto;
        animation: rotate 4s linear infinite; /* Apply the rotation animation */
    }

}

@media screen and (min-width: 440px) {

    footer img {
        grid-column: 1 / -1; /* Assuming you want the image to be full-width in the grid */
        justify-self: center; /* Center the image horizontally */
        width: 15%; /* Adjust the size of your logo as needed */
        height: auto;
        animation: rotate 4s linear infinite; /* Apply the rotation animation */
    }

}

/* small tablet styles  */
@media screen and (min-width: 620px) {

    footer img {
        grid-column: 1 / -1; /* Assuming you want the image to be full-width in the grid */
        justify-self: center; /* Center the image horizontally */
        width: 15%; /* Adjust the size of your logo as needed */
        height: auto;
        animation: rotate 4s linear infinite; /* Apply the rotation animation */
    }

}
/* small tablet styles  */

/* large tablets and laptop styles */
@media screen and (min-width: 960px) {

    footer img {
        grid-column: 1 / -1; /* Assuming you want the image to be full-width in the grid */
        justify-self: center; /* Center the image horizontally */
        width: 15%; /* Adjust the size of your logo as needed */
        height: auto;
        animation: rotate 4s linear infinite; /* Apply the rotation animation */
    }

}
/* large tablets and computer styles */

/* deskstop styles */
@media screen and (min-width: 1200px) {

    footer img {
        grid-column: 1 / -1; /* Assuming you want the image to be full-width in the grid */
        justify-self: center; /* Center the image horizontally */
        width: 18%; /* Adjust the size of your logo as needed */
        height: auto;
        animation: rotate 4s linear infinite; /* Apply the rotation animation */
    }

}
/* desktop styles */

/* widescreen desktop styles */
@media screen and (min-width: 1600px) {

    footer img {
        width: 40%; /* Adjust the size of your logo as needed */
        height: auto;
    }

}
/* widescreen desktop styles */