:root {
--primary-color: #003366;
--secondary-color: #FFD700;
--dark-color: #343a40;
--light-color: #f8f9fa;
}

body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
overflow-x: hidden;
}

.set img{
    height: 70px;
}

/* Navbar */
.navbar {
padding: 15px 0;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.navbar-brand {
font-weight: 700;
font-size: 1.8rem;
color: var(--primary-color);
}

.navbar-brand span {
color: var(--secondary-color);
}

.nav-link {
font-weight: 500;
margin: 0 10px;
color: var(--dark-color);
}

.nav-link:hover {
color: var(--primary-color);
}

/* Hero Section */
.hero-section {
height: 90vh;
background: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)),
url('img/banner.jpg')
center/cover no-repeat;
color: white;
display: flex;
align-items: center;
text-align: center;
}

.hero-content h1 {
font-size: 3.5rem;
font-weight: 700;
margin-bottom: 20px;
}

.hero-content p {
font-size: 1.2rem;
margin-bottom: 30px;
}

.btn-primary {
background-color: var(--primary-color);
border-color: var(--primary-color);
padding: 10px 25px;
font-weight: 500;
}

.btn-outline-light {
padding: 10px 25px;
font-weight: 500;
}

/* About Section */
.about-section {
padding: 100px 0;
background-color: var(--light-color);
}

.section-title {
text-align: center;
margin-bottom: 50px;
position: relative;
}

.section-title h2 {
font-weight: 700;
color: var(--primary-color);
display: inline-block;
padding-bottom: 15px;
}

.section-title h2:after {
content: '';
position: absolute;
width: 80px;
height: 3px;
background-color: var(--secondary-color);
bottom: 0;
left: 50%;
transform: translateX(-50%);
}

.about-img img {
border-radius: 10px;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

/* Features Section */
.features-section {
padding: 100px 0;
}

.feature-box {
padding: 30px;
/* text-align: center; */
border-radius: 10px;
transition: all 0.3s ease;
margin-bottom: 30px;
border: 1px solid #eee;
}

.feature-box i {
font-size: 50px;
color: var(--primary-color);
margin-bottom: 20px;
}

.feature-box h3 {
font-weight: 600;
margin-bottom: 15px;
}

.feature-box:hover {
transform: translateY(-10px);
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}

/* Courses Section */
.courses-section {
padding: 100px 0;
background-color: var(--light-color);
}

.course-card {
margin-bottom: 30px;
border-radius: 10px;
overflow: hidden;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
transition: all 0.3s ease;
}

.course-card:hover {
transform: translateY(-10px);
}

.course-img img {
width: 100%;
height: 200px;
object-fit: cover;
}

.course-content {
padding: 20px;
}

.course-content h3 {
font-weight: 600;
margin-bottom: 10px;
}

/* Testimonials Section */
.testimonials-section {
padding: 100px 0;
background: linear-gradient(rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.8)),
url('https://storage.googleapis.com/workspace-0f70711f-8b4e-4d94-86f1-2a93ccde5887/image/d574c72d-6606-4346-a7d2-15af7672a4ae.png')
center/cover no-repeat fixed;
color: white;
}

.testimonial-item {
text-align: center;
padding: 30px;
}

.testimonial-item img {
width: 100px;
height: 100px;
border-radius: 50%;
object-fit: cover;
margin: 0 auto 20px;
border: 5px solid rgba(255, 255, 255, 0.2);
}

.testimonial-item p {
font-style: italic;
margin-bottom: 20px;
}

.testimonial-item h4 {
font-weight: 600;
margin-bottom: 5px;
}

.testimonial-item .stars {
color: var(--secondary-color);
margin-bottom: 10px;
}

/* Events Section */
.events-section {
padding: 100px 0;
}

.event-card {
margin-bottom: 30px;
border-radius: 10px;
overflow: hidden;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

.event-date {
background-color: var(--primary-color);
color: white;
padding: 10px 20px;
display: inline-block;
border-radius: 30px;
margin-bottom: 15px;
font-weight: 500;
}

.event-img img {
width: 100%;
height: 200px;
object-fit: cover;
}

/* Staff Section */
.staff-section {
padding: 100px 0;
background-color: var(--light-color);
}

.staff-card {
margin-bottom: 30px;
text-align: center;
padding: 30px 20px;
border-radius: 10px;
transition: all 0.3s ease;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
}

.staff-card:hover {
transform: translateY(-10px);
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
}

.staff-img {
width: 150px;
height: 150px;
border-radius: 50%;
object-fit: cover;
margin: 0 auto 20px;
border: 5px solid rgba(0, 0, 0, 0.1);
}

.staff-social {
margin-top: 15px;
}

.staff-social a {
display: inline-block;
width: 35px;
height: 35px;
border-radius: 50%;
background-color: var(--primary-color);
color: white;
text-align: center;
line-height: 35px;
margin: 0 5px;
transition: all 0.3s ease;
}

.staff-social a:hover {
background-color: var(--secondary-color);
}

/* Blog Section */
.blog-section {
padding: 100px 0;
}

.blog-card {
margin-bottom: 30px;
border-radius: 10px;
overflow: hidden;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

.blog-img img {
width: 100%;
height: 250px;
object-fit: cover;
}

.blog-content {
padding: 20px;
}

.blog-meta {
margin-bottom: 10px;
font-size: 14px;
color: #6c757d;
}

.blog-content h3 {
font-weight: 600;
margin-bottom: 10px;
}

/* Contact Section */
.contact-section {
padding: 100px 0;
background-color: var(--light-color);
}

.contact-info {
margin-bottom: 30px;
}

.contact-info i {
font-size: 24px;
color: var(--primary-color);
margin-right: 15px;
float: left;
}

.contact-info h4 {
font-weight: 600;
margin-bottom: 5px;
}

.contact-form input,
.contact-form textarea {
width: 100%;
padding: 10px;
margin-bottom: 20px;
border: 1px solid #ddd;
border-radius: 5px;
}

.contact-form button {
background-color: var(--primary-color);
color: white;
border: none;
padding: 10px 30px;
border-radius: 5px;
cursor: pointer;
transition: all 0.3s ease;
}

.contact-form button:hover {
background-color: var(--secondary-color);
}

/* Footer */
.footer {
background-color: var(--dark-color);
color: white;
padding: 60px 0 0;
}

.footer-logo {
font-size: 1.8rem;
font-weight: 700;
margin-bottom: 20px;
color: white;
}

.footer-logo span {
color: var(--secondary-color);
}

.footer-links h4 {
margin-bottom: 20px;
font-weight: 600;
position: relative;
padding-bottom: 10px;
}

.footer-links h4:after {
content: '';
position: absolute;
width: 50px;
height: 2px;
background-color: var(--secondary-color);
bottom: 0;
left: 0;
}

.footer-links ul {
list-style: none;
padding: 0;
}

.footer-links li {
margin-bottom: 10px;
}

.footer-links a {
color: #adb5bd;
transition: all 0.3s ease;
}

.footer-links a:hover {
color: white;
text-decoration: none;
padding-left: 5px;
}

.footer-bottom {
background-color: rgba(0, 0, 0, 0.2);
padding: 20px 0;
margin-top: 40px;
}

.social-links a {
display: inline-block;
width: 40px;
height: 40px;
border-radius: 50%;
background-color: rgba(255, 255, 255, 0.1);
color: white;
text-align: center;
line-height: 40px;
margin-right: 10px;
transition: all 0.3s ease;
}

.social-links a:hover {
background-color: var(--secondary-color);
transform: translateY(-5px);
}

/* Back to Top Button */
.back-to-top {
position: fixed;
bottom: 20px;
right: 20px;
width: 50px;
height: 50px;
background-color: var(--primary-color);
color: white;
text-align: center;
line-height: 50px;
border-radius: 50%;
font-size: 20px;
cursor: pointer;
z-index: 99;
display: none;
transition: all 0.3s ease;
}

.back-to-top:hover {
background-color: var(--secondary-color);
}

/* Responsive */
@media (max-width: 991px) {
.hero-content h1 {
font-size: 2.5rem;
}

.hero-content p {
font-size: 1rem;
}
}

@media (max-width: 767px) {
.section-title h2 {
font-size: 1.8rem;
}

.hero-content h1 {
font-size: 2rem;
}
}

/* Auto-scrolling testimonials */
.testimonial-carousel {
overflow: hidden;
}

.testimonial-track {
display: flex;
animation: scroll 30s linear infinite;
width: calc(600px * 6);
}

@keyframes scroll {
0% {
transform: translateX(0);
}

100% {
transform: translateX(calc(-600px * 3));
}
}

/* Dropdown menu */
.dropdown-menu {
border: none;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

.dropdown-item {
font-weight: 500;
color: var(--dark-color);
}

.dropdown-item:hover {
background-color: var(--light-color);
color: var(--primary-color);
}