:root{
  --gradient: linear-gradient(90deg,#2c1052,#3b1f77,#462b92,#5c4cb0,#7e6ed6);
  --text-color:#fff;
}
*{margin:0;padding:0;box-sizing:border-box}
body {
     font-family: Arial, Helvetica, sans-serif;
     background: #f7f7ff;
     scroll-behavior: smooth;
}
/* Navbar */
header {
     width: 100%;
     background: var(--gradient);
     position: sticky;
     top: 0;
     z-index: 1000;
     box-shadow: 0 4px 10px rgba(0, 0, 0, 0.25);
}
nav {
     max-width: 1200px;
     margin: auto;
     padding: 15px 20px;
     display: flex;
     justify-content: space-between;
     align-items: center;
}
.brand {
     display: flex;
     align-items: center;
     gap: 10px;
     font-family: "Great Vibes", cursive;
     font-size: 28px;
     font-weight: 700;
     color: var(--text-color);
}
.brand img {
     height: 45px;
     width: 45px;
     border-radius: 50%;
}
.nav-links {
     list-style: none;
     display: flex;
     gap: 25px;
}
.nav-links a {
     text-decoration: none;
     color: var(--text-color);
     font-weight: 500;
     position: relative;
     transition: 0.3s ease;
}
.nav-links a::after {
     content: "";
     position: absolute;
     width: 0;
     height: 2px;
     background: #fff;
     left: 0;
     bottom: -4px;
     transition: width 0.3s ease;
}
.nav-links a:hover::after {
     width: 100%;
}
.hamburger {
     display: none;
     flex-direction: column;
     cursor: pointer;
     gap: 6px;
     z-index: 10;
}
.hamburger span {
     width: 28px;
     height: 3px;
     background: #fff;
     border-radius: 5px;
     transition: 0.3s;
     z-index: 10;
}



/* footer starts here  */



/* Footer */
footer {
  background: var(--gradient);
  color: #fff;
  padding: 50px 20px 30px;
  text-align: left;
  background:var(--gradient);color:#fff;padding:50px 20px 30px;text-align:left
}

.footer-container {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  max-width: 1200px;
  margin: auto;
  gap: 40px;
}

.footer-container h2,
.footer-container h3 {
  font-family: 'Dancing Script', cursive;
  margin-bottom: 15px;
}

.footer-container p,
.footer-container ul {
  font-family: 'Poppins', sans-serif;
  line-height: 1.6;
}

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

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

.footer-links ul li a {
  color: #fff;
  text-decoration: none;
  transition: .3s;
}

.footer-links ul li a:hover {
  color: #ffd700;
}
 
/* Social icons */
.footer-social {
  text-align: center;
  margin: 30px 0;
}

.footer-social h4 {
  font-family: 'Dancing Script', cursive;
  margin-bottom: 15px;
  font-size: 20px;
}

.social-links {
  display: flex;
  justify-content: center;
  gap: 20px;
}

/* SVG icons animation */
.social-links a .social {
  width: 35px;
  height: 35px;
  /* background: red; */
  /* filter:  invert(1); */
  animation: pulse 2s infinite; /* always animated */
}

/* Example animation: pulse */
@keyframes pulse {
  0% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.2); opacity: 0.8; }
  100% { transform: scale(1); opacity: 1; }
}

.copy {
  text-align: center;
  margin-top: 20px;
  font-size: 14px;
  opacity: .8;
}


/* Animations */
@keyframes slide{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}
@keyframes gradientMove{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}

/* Responsive */
@media(max-width:900px){
  .hero{flex-direction:column;text-align:center}
  .hero-logo{margin-top:30px}
  #about .container{flex-direction:column;text-align:center}
}
@media(max-width:768px){
  .nav-links{position:fixed;top:0;right:-100%;height:100vh;width:200px;background:var(--gradient);flex-direction:column;align-items:center;justify-content:center;gap:30px;transition:right .4s ease}
  .nav-links.active{right:0}
  .hamburger{display:flex}
  .hamburger.active span:nth-child(1){transform:rotate(45deg) translate(5px,5px)}
  .hamburger.active span:nth-child(2){opacity:0}
  .hamburger.active span:nth-child(3){transform:rotate(-45deg) translate(6px,-6px)}
    
  .contact-container{grid-template-columns:1fr}
  .contact-heading{text-align:center}
}

@media(max-width:480px){
  .testimonial-heading h2,.section-heading h2,.contact-heading{font-size:26px}
  .testimonial-card{flex:0 0 250px}
  .testimonial-image{width:60px;height:60px;margin-top:-30px}
  .service-content h3{font-size:22px}
  .service-content p{font-size:14px}
}


/* Floating Action Button */
.fab-container {
  position: fixed;
  bottom: 20px;
  right: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  z-index: 9999;
}
.fab-btn {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background-color: #25D366;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 24px;
  cursor: pointer;
  border: none;
  outline: none;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
  transition: transform 0.3s;
}
.fab-options {
  display: none;
  flex-direction: column;
  margin-bottom: 10px;
}
.fab-options a {
  width: 50px;
  height: 50px;
  margin: 5px 0;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  text-decoration: none;
}
.whatsapp { background-color: #25D366; }
.call { background-color: #34B7F1; }
.fab-btn svg, .fab-options svg {
  width: 28px;
  height: 28px;
  fill: white;
}




/* Courses & Services Section */
.section-heading {
  text-align: center;
  margin: 60px 0 30px;
}

.section-heading h2 {
  font-size: 2.2rem;
  color: #333;
  position: relative;
  display: inline-block;
}

.services {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 25px;
  padding: 20px 60px;
}

.service-card {
  background: #ffffff;
  border-radius: 15px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  text-align: center;
  padding: 30px 20px;
}

.service-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 6px 25px rgba(0, 0, 0, 0.15);
}

.service-header i {
  font-size: 40px;
  color: #ff6b6b;
  margin-bottom: 15px;
}

.service-content h3 {
  color: #333;
  font-size: 1.3rem;
  margin-bottom: 10px;
}

.service-content p {
  font-size: 0.95rem;
  color: #555;
  line-height: 1.6;
  margin-bottom: 15px;
}

/* Enroll Now Button */
button {
  background-color: #ff6b6b;
  color: #fff;
  border: none;
  border-radius: 30px; /* Round shape */
  padding: 10px 25px;
  cursor: pointer;
  font-size: 0.95rem;
  font-weight: 600;
  transition: all 0.3s ease;
}

button:hover {
  background-color: #ff4a4a;
  transform: scale(1.05);
  box-shadow: 0 3px 10px rgba(255, 107, 107, 0.5);
}