/* Basic Reset */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: Arial, sans-serif;
}

.top-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 20px;
    background-color: #ffffff;
    color: #fff;
}

.logo img {
    height: 65px; /* Adjust height to make the logo larger */
    width: auto; /* Maintain aspect ratio */
}


.logo {
    flex: 0 0 auto; /* Prevents logos from stretching */
}

.left-logo {
    margin-right: 15px; /* Adjust spacing as needed */
}

.right-logo {
    margin-left: auto; /* Pushes right logo to the far end */
}

.academy-name {
    font-size: 1.8em; /* Adjust size as needed */
    font-weight: bold;
    color: #0a9c3b; /* Darker color for the text */
    margin-right: 20px; /* Space between text and right logo */
}

/* Custom styles for the navbar */

.navbar {
    margin-top: 0px; /* Space between top-nav and navbar */
    height: 40px; /* Set a fixed height for the navbar */
    display: flex;
    align-items: center; /* Vertically center items in the navbar */
}

.navbar-nav {
    margin-left: auto; /* Align menu items to the right */
}

.navbar-dark .navbar-nav .nav-link {
    color: #fff; /* White text color */
    font-weight: bold;
    padding: 10px 20px; /* Reduce padding for a smaller height */
    transition: background-color 0.3s, color 0.3s, transform 0.3s;
}

.navbar-dark .navbar-nav .nav-link:hover {
    background-color: #555; /* Darker background on hover */
    color: #fff;
    transform: scale(1.05); /* Slight zoom effect */
}

.dropdown-menu {
    background-color: #444; /* Dark background for dropdown */
    border: none; /* Remove default border */
    border-radius: 5px; /* Rounded corners for dropdown */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Shadow for depth */
}

.dropdown-menu .dropdown-item {
    color: #fff; /* White text color for dropdown items */
    padding: 5px 15px; /* Reduce padding for dropdown items */
    transition: background-color 0.3s, color 0.3s;
}

.dropdown-menu .dropdown-item:hover {
    background-color: #1ed336; /* Darker background on hover */
    color: #fff;
}

.navbar-toggler {
    border: none; /* Remove default border from toggler */
}

.navbar-toggler-icon {
    background-image: url("data:image/svg+xml,..."); /* Custom icon if desired */
}




/* Custom styles for the carousel */
.carousel {
    margin-top: 0px; /* Space between the navbar and carousel */
}

.carousel-inner img {
    height: 400px; /* Adjust height as needed */
    object-fit: cover; /* Ensures images cover the space without distortion */
}

.carousel-caption {
    bottom: 20px; /* Adjust caption position from the bottom */
}

.carousel-control-prev-icon,
.carousel-control-next-icon {
    background-color: rgba(0, 0, 0, 0.5); /* Dark background for control icons */
    border-radius: 50%; /* Round control icons */
}

.carousel-control-prev,
.carousel-control-next {
    width: 5%; /* Adjust width for control buttons */
}


body {
    margin: 0;
    padding: 0;
    font-family: Arial, sans-serif;
}

/* Custom styles for the announcement */
.announcement {
    white-space: nowrap; /* Keeps the text in a single line */
    overflow: hidden; /* Hides the text that goes out of the container */
    box-sizing: border-box;
    width: 100%; /* Makes sure the container takes the full width of the viewport */
    background-color: #f8d7da; /* Background color for visibility */
    color: #721c24; /* Text color for visibility */
    padding: 10px;
    font-size: 16px;
    position: relative;
}

.announcement::before {
    content: "";
    position: absolute;
    top: 0;
    left: 100%;
    height: 100%;
    width: 100%;
    background: linear-gradient(to right, #f8d7da 0%, transparent 100%);
    z-index: 1;
}

.announcement span {
    display: inline-block;
    padding-left: 100%;
    animation: scroll-left 10s linear infinite;
}

@keyframes scroll-left {
    from {
        transform: translateX(100%);
    }
    to {
        transform: translateX(-100%);
    }
}



/* Add this CSS to your external stylesheet (css/style.css) */
.notice-box {
    position: relative;
    width: 100%;
    height: 360px; /* Adjust the height as needed */
    border: 2px solid #ddd; /* Border color */
    border-radius: 8px; /* Rounded corners */
    background-color: #f9f9f9; /* Background color */
    padding: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Shadow effect */
    overflow: hidden; /* Hide overflow to maintain the scrolling effect */
}

.notice-header {
    display: flex;
    align-items: center;
    margin-bottom: 10px; /* Space between header and content */
}

.notice-circle {
    width: 40px; /* Diameter of the circle */
    height: 40px; /* Diameter of the circle */
    border-radius: 50%; /* Makes the div circular */
    background-color: #007bff; /* Circle color */
    color: #fff; /* Text color inside the circle */
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px; /* Font size inside the circle */
    font-weight: bold;
    margin-right: 10px; /* Space between circle and heading */
}

.notice-title {
    margin: 0; /* Remove default margin */
    font-size: 18px; /* Font size for the heading */
    color: #333; /* Heading color */
}

.notice-content {
    height: calc(100% - 60px); /* Adjust height to fit the marquee */
    overflow: hidden; /* Hide overflow to maintain the scrolling effect */
}

marquee {
    font-size: 14px; /* Font size for the marquee text */
    color: #333; /* Text color */
}

.about-us-content {
    padding-left: 15px; /* Add padding for spacing */
}

img {
    max-width: 100%; /* Ensure the image fits within its container */
    height: auto; /* Maintain aspect ratio */
    border-radius: 8px; /* Rounded corners for the image */
}


/* achivement  */

/* Existing CSS for achievements and cards */

/* Existing CSS for achievements and cards */

.achievements {
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
    gap: 20px;
    padding: 20px;
}

.card {
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    width: 300px;
    text-align: center;
    transition: transform 0.3s ease;
}

.card img {
    width: 100%;
    height: auto;
    object-fit: cover;
    border-bottom: 2px solid #007bff;
}

.card-content {
    padding: 15px;
    max-width: 80%; /* Adjust this value to control the maximum width */
    margin: 0 auto; /* Center the content */
    text-align: center; /* Ensure the text is centered */
}

.card-title {
    font-size: 1.2rem;
    margin: 10px 0;
    color: #333;
}

.card-description {
    font-size: 1rem;
    color: #666;
}

.card:hover {
    transform: translateY(-10px);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
}

/* New CSS for section-header */

.section-header {
    text-align: center;
    margin: 20px 0;
}

.section-header h2 {
    font-size: 2rem;
    color: #333;
    margin: 0;
    padding: 10px;
    border-bottom: 2px solid #007bff;
}



/* about us page */
#about-academy h2 {
    font-size: 2rem;
    margin-bottom: 20px;
}

#about-academy p {
    font-size: 1rem;
    color: #333;
    line-height: 1.6;
}

#about-academy img {
    max-width: 100%;
    height: auto;
    margin-top: 20px;
}




/* Styles for Coaches Section */
#coaches {
    background-color: #f9f9f9;
    padding: 40px 0;
}

#coaches h2 {
    font-size: 2.5rem;
    color: #333;
    margin-bottom: 30px;
}

.card {
    border: none;
    border-radius: 10px;
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.card-img-top {
    border-bottom: 2px solid #007bff;
}

.card-body {
    padding: 20px;
}

.card-title {
    font-size: 1.25rem;
    color: #007bff;
    margin-bottom: 10px;
}

.card-text {
    font-size: 1rem;
    color: #555;
}

.card:hover {
    transform: translateY(-10px);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
}


/* Styles for Contact Details Section */
#contact-details {
    background-color: #f9f9f9;
    padding: 40px 0;
}

#contact-details h2 {
    font-size: 2.5rem;
    color: #333;
    margin-bottom: 30px;
}

#contact-details h4 {
    font-size: 1.5rem;
    color: #007bff;
    margin-bottom: 15px;
}

#contact-details ul {
    list-style: none;
    padding: 0;
}

#contact-details ul li {
    font-size: 1.1rem;
    color: #555;
    margin-bottom: 10px;
}

#contact-details ul li i {
    color: #007bff
}


/* Styles for Picture Gallery */
/* Gallery item style */
.gallery-item {
    position: relative;
    overflow: hidden;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.gallery-item img {
    transition: transform 0.3s ease, filter 0.3s ease;
    border-radius: 8px;
}

/* Hover effect */
.gallery-item:hover img {
    transform: scale(1.1);
    filter: brightness(70%);
}

/* Fancybox caption style */
.fancybox-caption {
    background: rgba(0, 0, 0, 0.75);
    color: #fff;
    font-size: 16px;
    padding: 10px;
    border-radius: 4px;
}