.hero {
    height: 100vh;
    background: linear-gradient(rgba(0,0,0,0.6), rgba(0,0,0,0.6)),
                url('https://images.unsplash.com/photo-1511379938547-c1f69419868d');
    background-size: cover;
    background-position: center;
    color: white;
}

.btn-custom {
    background: #f39c12;
    color: rgb(252, 248, 248);
}

.section-title {
    font-weight: 700;
}
   .dance-detail-section {
     background: #f4f4f4 url('image/bg_back.png') no-repeat center; 
     padding: 60px 0;
   }

   .dance-card {
     background: #fff;
     border-radius: 20px;
     padding: 40px;
     box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
   }


   .dance-title {
     font-size: 36px;
     font-weight: 700;
     margin-bottom: 20px;
   }

   .dance-title span {
     background: linear-gradient(90deg, #ff7a18, #8e2de2);

   }

   .dance-text {
     font-size: 16px;
     color: #555;
     line-height: 1.8;
     margin-bottom: 25px;
   }

   .enquiry-btn {
     display: inline-block;
     padding: 12px 28px;
     background: linear-gradient(90deg, #ff7a18, #ffb347) !important;
     color: #fff !important;
     border-radius: 30px;
     text-decoration: none !important;
     font-weight: 600;
     box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
   }

   .enquiry-btn:hover {
     transform: translateY(-3px);
   }

   .dance-img {
     max-width: 100%;
     height: auto;
   }

   .register-section {
     background: url('image/form_baner.webp') no-repeat center;
     background-size: cover;
     padding: 80px 0;
     position: relative;
   }

   
   .register-section::before {
     content: "";
     position: absolute;
     top: 0;
     left: 0;
     height: 100%;
     width: 100%;
     background: rgba(255, 255, 255, 0.8);
   }

   .register-section .container {
     position: relative;
     z-index: 2;
   }


   .register-title {
     font-size: 42px;
     font-weight: 700;
     margin-bottom: 10px;
   }

   .register-subtitle {
     color: #666;
     max-width: 600px;
     margin: auto;
     margin-bottom: 40px;
   }


   .register-box {
     background: #fff;
     padding: 40px;
     border-radius: 20px;
     box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
     text-align: left;
     height: 90%;
   }

  
   .input-group-text {
     background: #eee;
   }

   .form-control {
     height: 45px;
   }

 
   .custom-btn {
     background: linear-gradient(90deg, #ff7a18, #ff3b47);
     color: #fff;
     padding: 12px;
     border-radius: 10px;
     font-weight: 600;
     border: none;
     transition: 0.3s;
   }

   .custom-btn:hover {
     transform: translateY(-3px);
     color: #fff;
   }

   @media (max-width: 576px) {
     .dance-title {
       font-size: 24px;
     }

     .dance-text {
       font-size: 14px;
     }
   }

   @media (max-width: 768px) {

     .register-title {
       font-size: 28px;
     }

     .register-box {
       padding: 20px;
     }

     .custom-btn {
       margin-bottom: 10px;
     }
   }

   .gallery-section {
     background: #f4f4f4 url('image/bg_back.png');
     padding: 30px 10px;
   }


   .gallery-item {
     overflow: hidden;
     border-radius: 6px;
     position: relative;
   }


   .gallery-item img {
     width: 100%;
     height: 250px;
     object-fit: cover;
     transition: 0.4s ease;
   }


   .gallery-item:hover img {
     transform: scale(1.08);
   }


   @media (max-width: 768px) {
     .gallery-item img {
       height: 200px;
     }
   }

   @media (max-width: 576px) {
     .gallery-item img {
       height: 180px;
     }
   }


   .video-section {
     background: #f2f2f2 url('https://www.transparenttextures.com/patterns/music.png');
     padding: 50px 20px;
   }


   .video-container {
     max-width: 1200px;
     margin: auto;
     display: grid;
     grid-template-columns: repeat(2, 1fr);
     gap: 20px;
   }


   .video-box iframe {
     width: 100%;
     height: 300px;
     border-radius: 10px;
     border: none;
   }


   @media (max-width: 768px) {
     .video-container {
       grid-template-columns: 1fr;
     }

     .video-box iframe {
       height: 220px;
     }
   }
   /* contact section start */
.contact-section {
  background: linear-gradient(rgba(0,0,0,0.7), rgba(0,0,0,0.7)),
  url('https://images.unsplash.com/photo-1511379938547-c1f69419868d');
  background-size: cover;
  background-position: center;
  padding: 80px 0;
}


.contact-card {
  background: rgba(255,255,255,0.1);
  backdrop-filter: blur(10px);
  border-radius: 20px;
  padding: 30px;
  color: #fff;
}


.form-control {
  border-radius: 10px;
  border: none;
}


.btn-custom {
  border-radius: 30px;
}


.icon-box {
  color: #ffc107;
  margin-right: 10px;
}


.map-section iframe {
  width: 100%;
  height: 400px;
  border-radius: 15px;
}
  
/* contact section end */

   

  
   .navbar-custom {
     background: #f2f3f5;
     padding: 18px 70px;
   }

   .navbar-nav {
     gap: 28px;
   }

   .navbar-nav .nav-link {
     font-weight: 600;
     color: #1f3b64 !important;
     font-size: 16px;
   }

   .navbar-nav .nav-link:hover {
     color: #0d6efd !important;
   }

   .dropdown-menu {
     border: none;
     border-radius: 10px;
     box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
   }

   
   .admission-btn {
     background: #1f3b64;
     color: #fff !important;
     padding: 12px 26px;
     border-radius: 10px;
     font-weight: 600;
   }

   .admission-btn:hover {
     background: #16304f;
   }

  
   .navbar-brand img {
     height: 45px;
   }

   @media(max-width:991px) {

     .navbar-custom {
       padding: 15px 20px;
     }

     .navbar-nav {
       gap: 15px;
       margin-top: 20px;
     }

     .admission-btn {
       margin-top: 15px;
       display: inline-block;
     }
   }

   .studio-section {
     padding: 120px 0;
     background: #141415;
   }


   .studio-content {
     padding-right: 60px;
   }

   .studio-title {
     font-size: 44px;
     font-weight: 700;
     background: linear-gradient(90deg, #7b2ff7, #ff6a00);

   }

   .studio-subtitle {
     font-size: 28px;
     font-weight: 700;
     color: #fff;
     margin: 25px 0;
   }

   .studio-text {
     color: #cfcfcf;
     font-size: 18px;
     line-height: 1.9;
   }


   .studio-images {
     position: relative;
     display: flex;
     justify-content: flex-end;
   }

   .studio-img-back {
     width: 75%;
     border-radius: 6px;
   }

   .studio-img-front {
     position: absolute;
     left: -80px;
     top: 50%;
     transform: translateY(-50%);
     width: 55%;
     border-radius: 6px;
     box-shadow: 0 20px 40px rgba(0, 0, 0, 0.6);
   }


   @media(max-width:991px) {

     .studio-content {
       padding-right: 0;
       text-align: center;
     }

     .studio-title {
       font-size: 42px;
     }

     .studio-subtitle {
       font-size: 22px;
     }

     .studio-images {
       justify-content: center;
       margin-top: 50px;
     }

     .studio-img-front {
       position: relative;
       left: 0;
       top: 0;
       transform: none;
       width: 100%;
       margin-top: 20px;
     }

     .studio-img-back {
       width: 100%;
     }
   }


   .courses-section {
     background:#e9e9e9 url('image/bg_back.png') no-repeat center;
     padding: 80px 0;
   }


   .courses-title {
     font-size: 48px;
     font-weight: 700;
     color: #333;
   }

   .courses-subtitle {
     color: #6c757d;
     font-size: 20px;
     margin-top: 10px;
   }


   .courses-card {
     background: #f5f5f5;
     border-radius: 25px;
     padding: 50px;
     margin-top: 50px;
     box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
   }


   .instrument-img {
     max-width: 100%;
     height: auto;
   }


   .course-text {
     font-size: 18px;
     color: #444;
     line-height: 1.8;
   }

   .view-btn {
     background: linear-gradient(90deg, #ff7a18, #ffb347);
     color: #fff;
     border: none;
     padding: 12px 30px;
     border-radius: 10px;
     margin-top: 20px;
     font-weight: 600;
   }


   @media(max-width:991px) {

     .courses-title {
       font-size: 34px;
     }

     .courses-card {
       padding: 30px;
     }

     .course-text {
       margin-top: 30px;
     }

   }

   .brands-section {
     background:#d9d1bf url('image/bg_back.png') no-repeat center;
     padding: 90px 0 40px 0;
     position: relative;
     overflow: hidden;
     background-color: #8c8c8d;
   }


   .brands-title {
     font-size: 48px;
     font-weight: 700;
     color: #333;
   }

   .brands-subtitle {
     font-size: 20px;
     color: #555;
     max-width: 750px;
     margin: 15px auto 0 auto;
     line-height: 1.7;
   }


   .guitar-wrapper {
     margin-top: 60px;
     text-align: left;
   }

   .guitar-img {
     width: 85%;
     max-width: 1100px;
   }


   @media(max-width:991px) {

     .brands-title {
       font-size: 32px;
     }

     .brands-subtitle {
       font-size: 16px;
       padding: 0 15px;
     }

     .guitar-wrapper {
       text-align: center;
       margin-top: 40px;
     }

     .guitar-img {
       width: 100%;
     }
   }
   .instruments {
  background: #f8f9fa;
}

.instrument-card {
  border-radius: 15px;
  overflow: hidden;
  transition: 0.3s ease;
  background: #fff;
}

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


.img-box {
  height: 160px;
  overflow: hidden;
}

.img-box img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: 0.4s;
}

.instrument-card:hover img {
  transform: scale(1.1);
}


.instrument-icon {
  font-size: 22px;
  color: #ffc107;
}
  /* WhatsApp Button */
.whatsapp-btn {
  position: fixed;
  bottom: 80px;
  right: 20px;
  background: #25D366;
  color: #fff;
  font-size: 22px;
  padding: 12px 15px;
  border-radius: 50%;
  z-index: 999;
  box-shadow: 0 5px 15px rgba(0,0,0,0.2);
  transition: 0.3s;
   animation: pulse 1.5s infinite;
}

.whatsapp-btn:hover {
  transform: scale(1.1);
}
@keyframes pulse {
  0% { box-shadow: 0 0 0 0 rgba(37,211,102,0.7); }
  70% { box-shadow: 0 0 0 15px rgba(37,211,102,0); }
  100% { box-shadow: 0 0 0 0 rgba(37,211,102,0); }
}

/* Call Button */
.call-btn {
  position: fixed;
  bottom: 20px;
  right: 20px;
  background: #007bff;
  color: #fff;
  font-size: 20px;
  padding: 12px 15px;
  border-radius: 50%;
  z-index: 999;
  box-shadow: 0 5px 15px rgba(0,0,0,0.2);
  transition: 0.3s;
}

.call-btn:hover {
  transform: scale(1.1);
}