:root {



    --gold: #d4af37;

    --gold-light: #f2d57e;



    --dark: #0b0b0b;

    --dark-light: #1a1a1a;



}



/* :root{



--gold:#7c3aed;

--gold-light:#c4b5fd;



--dark:#0b0b0b;

--dark-light:#1a1a1a;



} */

/* :root{



--gold:#8b5cf6;

--gold-light:#c4b5fd;



--dark:#0b0b0b;

--dark-light:#1a1a1a;



} */

/* :root{



--gold:#6d28d9;

--gold-light:#c4b5fd;



--dark:#0a0a0a;

--dark-light:#161616;



} */

body {

    background: var(--dark);

    color: white;

    font-family: Poppins, sans-serif;

}





/* headings */



.section-title {

    color: var(--gold);

    font-weight: 600;

    margin-bottom: 10px;

}



.section-subtitle {

    color: var(--dark-light);

    margin-bottom: 40px;



}



/* buttons */



.btn-gold {

    background: linear-gradient(45deg, var(--gold), var(--gold-light));

    color: var(--dark);

    border-radius: 30px;

    padding: 10px 28px;

    font-weight: 500;

    border: none;

}



.btn-gold:hover {

    transform: translateY(-2px);

}





/* section spacing */



section {

    padding: 70px 0;

}





/* nav bar css  */

.navbar {



    position: fixed;

    top: 0;

    left: 0;

    width: 100%;



    padding: 15px 0;



    display: flex;

    align-items: center;



    background: rgba(0, 0, 0, 0.35);



    backdrop-filter: blur(14px);

    -webkit-backdrop-filter: blur(14px);



    border-bottom: 1px solid rgba(255, 255, 255, 0.08);



    z-index: 999;

    transition: 0.3s;



}



/* navbar when scrolled */



.nav-scrolled {



    background: rgba(0, 0, 0, 0.6);



    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);



}



/* container */



.nav-container {



    display: flex;

    justify-content: space-between;

    align-items: center;



}



/* logo */



.logo img {



    height: 48px;



}



/* navigation */



.nav-links {



    display: flex;

    gap: 30px;

    list-style: none;



}



/* links */



.nav-links a {



    color: #fff;

    text-decoration: none;

    font-weight: 500;

    font-size: 15px;



    position: relative;

    padding-bottom: 4px;



    transition: 0.3s;



}



/* animated underline */



.nav-links a::after {



    content: "";

    position: absolute;

    left: 0;

    bottom: 0;



    width: 0%;

    height: 2px;



    background: var(--gold);



    transition: 0.3s;



}



.nav-links a:hover {



    color: var(--gold);



}



.nav-links a:hover::after {



    width: 100%;



}



/* mobile menu icon */



.menu-icon {



    display: none;

    font-size: 28px;

    cursor: pointer;

    color: white;



}



/* Hero section */



.hero {



    padding-top: 82px;

    padding-bottom: 0px;



    background:

        radial-gradient(circle at 20% 20%, rgba(255, 255, 255, 0.05), transparent 40%),

        radial-gradient(circle at 80% 80%, rgba(255, 255, 255, 0.05), transparent 40%),

        radial-gradient(circle at top, #1a1a1a, #000);



    position: relative;



    overflow: hidden;



}



/* text */



.hero h1 {

    line-height: 1.15;

    font-weight: 700;

}



/* layout */



.hero-grid {



    display: grid;



    grid-template-columns: 1fr 1fr;



    align-items: center;



    gap: 50px;



}



/* headline */



.hero-text h1 {



    font-size: 56px;



    margin-bottom: 20px;



    letter-spacing: -1px;



}



/* highlighted word */



.hero-text span {



    color: var(--gold);



    text-shadow: 0 0 20px rgba(212, 175, 55, 0.35);



}



/* description */



.hero-text p {



    margin-bottom: 30px;



    font-size: 18px;



    line-height: 1.6;



    color: #aaa;



    max-width: 480px;



}



/* hero image */



.hero-image img {



    width: 100%;



    max-width: 520px;



    animation: floatDance 5s ease-in-out infinite;



}



/* floating animation */



@keyframes floatDance {



    0% {

        transform: translateY(0px);

    }



    50% {

        transform: translateY(-15px);

    }



    100% {

        transform: translateY(0px);

    }



}



@media (max-width:768px) {



    .hero-grid {

        grid-template-columns: 1fr;

        text-align: center;

    }



    .hero-text h1 {

        font-size: 38px;

    }



    .hero-text p {

        margin: auto;

    }



    .hero-image img {

        max-width: 320px;

        margin-top: 30px;

    }



}



/* dance style section  */

#dance-style {

    width: 100%;

    background: #000;

    padding: 90px 20px;

    overflow: hidden;

}



.dance-style-wrapper {

    max-width: 1400px;

    margin: 0 auto;

    text-align: center;

}



#dance-style .section-title {

    color: #d4af37;

    font-size: 3rem;

    font-weight: 700;

    margin-bottom: 15px;

    letter-spacing: 2px;

}



#dance-style .section-subtitle {

    font-size: 1.2rem;

    margin-bottom: 60px;

    margin-left: auto;

    margin-right: auto;

    line-height: 1.7;

}



.dance-style-list {

    display: grid;

    grid-template-columns: repeat(6, 1fr);

    gap: 38px 24px;

    align-items: start;

}



.dance-style-item {

    text-align: center;

}



.dance-circle {

    width: 150px;

    height: 150px;

    border-radius: 50%;

    position: relative;

    overflow: hidden;

    margin: 0 auto 18px;

    border: 3px solid var(--gold);

    box-shadow:

        0 0 0 4px rgba(212, 175, 55, 0.15),

        0 0 20px rgba(212, 175, 55, 0.18),

        0 8px 25px rgba(0, 0, 0, 0.55);

    transition: all 0.4s ease;

}



.dance-circle img {

    width: 100%;

    height: 100%;

    object-fit: cover;

    display: block;

    border-radius: 50%;

    transform: scale(1.05);

    transition: transform 0.5s ease;

}



.circle-overlay {

    position: absolute;

    inset: 0;

    background: rgba(0, 0, 0, 0.45);

    border-radius: 50%;

    z-index: 1;

    transition: background 0.4s ease;

}



.dance-style-item h3 {

    color: var(--dark);

    font-size: 1.05rem;

    font-weight: 600;

    margin: 0;

    line-height: 1.4;

}



.dance-style-item:hover .dance-circle {

    transform: translateY(-8px);

    box-shadow:

        0 0 0 5px rgba(212, 175, 55, 0.22),

        0 0 30px rgba(212, 175, 55, 0.28),

        0 14px 35px rgba(0, 0, 0, 0.65);

}



.dance-style-item:hover .dance-circle img {

    transform: scale(1.12);

}



.dance-style-item:hover .circle-overlay {

    background: rgba(0, 0, 0, 0.3);

}



.dance-style-item:hover h3 {

    color: var(--gold-light);

}



/* laptop / medium desktop */

@media (max-width: 1399px) {

    .dance-style-list {

        grid-template-columns: repeat(3, 1fr);

    }

}



/* tablet */

@media (max-width: 991px) {

    #dance-style {

        padding: 75px 15px;

    }



    #dance-style .section-title {

        font-size: 2.4rem;

    }



    #dance-style .section-subtitle {

        font-size: 1rem;

        margin-bottom: 45px;

    }



    .dance-style-list {

        grid-template-columns: repeat(3, 1fr);

        gap: 28px 18px;

    }



    .dance-circle {

        width: 125px;

        height: 125px;

    }



    .dance-style-item h3 {

        font-size: 0.92rem;

    }

}



/* mobile */

@media (max-width: 767px) {

    #dance-style {

        padding: 65px 15px;

    }



    #dance-style .section-title {

        font-size: 2rem;

    }



    #dance-style .section-subtitle {

        font-size: 0.95rem;

        margin-bottom: 35px;

    }



    .dance-style-list {

        grid-template-columns: repeat(2, 1fr);

        gap: 22px 12px;

    }



    .dance-circle {

        width: 100px;

        height: 100px;

        margin-bottom: 12px;

    }



    .dance-style-item h3 {

        font-size: 0.82rem;

    }

}



/* very small phones */

@media (max-width: 480px) {

    .dance-style-list {

        gap: 18px 10px;

    }



    .dance-circle {

        width: 88px;

        height: 88px;

    }



    .dance-style-item h3 {

        font-size: 0.76rem;

    }

}

/* about section  */

.about-grid {

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 50px;

    align-items: center;

}



.about-img img {

    width: 100%;

    border-radius: 10px;

}



/* classes section  */



.class-grid {

    display: grid;

    grid-template-columns: repeat(3, 1fr);

    gap: 30px;

}





.class-card img {

    width: 100%;

    height: 220px;

    object-fit: cover;

}



.class-card h3 {

    padding: 20px;

}



.class-card {



    background: #111;

    padding: 15px;

    border-radius: 10px;

    transition: .3s;

    color: var(--gold);

height: 100%;

}



.class-card:hover {



    border: 1px solid var(--gold);

    transform: translateY(-5px);



}





/* branch section css  */

/* .branches{

background:#0d0d0d;

} */



.branch-card {



    background: var(--dark-light);

    border-radius: 12px;

    overflow: hidden;

    transition: .3s;

    height: 100%;

    display: flex;
    flex-direction: column;
    justify-content: space-between;


}



.branch-card:hover {



    transform: translateY(-6px);

    border: 1px solid var(--gold);



}



/* top section */



.branch-info {

    flex-grow: 1;

    padding: 25px;



}



.branch-info h3 {



    color: var(--gold);

    margin-bottom: 10px;



}



.branch-address {



    color: #ccc;

    font-size: 14px;

    line-height: 1.6;



}



.branch-phone {



    display: inline-block;

    margin-top: 10px;

    color: white;

    text-decoration: none;



}



.branch-phone:hover {



    color: var(--gold);



}



/* map */



.branch-map iframe {



    width: 100%;

    height: 220px;

    border: 0;



}



.branch-info {

    border-bottom: 1px solid rgba(212, 175, 55, 0.3);

}



/* event section  */

/* .events{

background:#0b0b0b;

} */



.event-card {



    position: relative;

    overflow: hidden;

    border-radius: 12px;

    transition: .3s;



}



.event-card img {



    width: 100%;

    height: 250px;

    object-fit: cover;

    transition: .4s;



}



/* overlay info */



.event-info {



    position: absolute;

    bottom: 0;

    left: 0;

    width: 100%;

    padding: 15px;

    background: linear-gradient(transparent, rgba(0, 0, 0, 0.8));



}



.event-info h5 {



    color: var(--gold);

    margin: 0;



}



.event-info p {



    font-size: 13px;

    color: #ccc;



}



/* hover */



.event-card:hover img {



    transform: scale(1.08);



}



/* teacher section  */

/* .mentors{

background:#0d0d0d;

} */



/* founder */



.founder-card {



    background: linear-gradient(135deg, #1a1a1a, #111);

    padding: 35px;

    border-radius: 15px;

    border: 1px solid rgba(212, 175, 55, .3);



}



.founder-img {



    width: 140px;

    height: 140px;

    border-radius: 50%;

    object-fit: cover;

    border: 4px solid var(--gold);



}



.founder-name {

    color: var(--gold);

}



.founder-role {

    font-weight: 500;

    margin-bottom: 10px;

}



.founder-text {

    color: #ccc;

    font-size: 14px;

}



/* teachers */



.teacher-card {



    /* background:#1a1a1a; */

    padding: 25px;

    border-radius: 12px;

    position: relative;

    transition: .3s;



}



.teacher-card:hover {



    transform: translateY(-6px);

    border: 1px solid var(--gold);



}



.teacher-img {



    width: 110px;

    height: 110px;

    border-radius: 50%;

    object-fit: cover;

    border: 3px solid var(--gold);



}



.teacher-role {



    color: var(--gold);

    font-size: 14px;



}



.teacher-desc {



    font-size: 13px;

    color: #aaa;



}



.student-badge {



    position: absolute;

    top: 10px;

    left: 10px;

    background: var(--gold);

    color: var(--dark);

    padding: 4px 10px;

    border-radius: 20px;

    font-size: 12px;



}



/* online off line section  */

.academy-reach {

    background: #F6F4ED !important;

}



.reach-card {



    background: #1a1a1a;

    padding: 35px 25px;

    border-radius: 12px;

    transition: .3s;

    height: 100%;



}



.reach-card:hover {



    transform: translateY(-6px);

    border: 1px solid var(--gold);



}



.reach-icon {



    font-size: 36px;

    margin-bottom: 15px;



}



.reach-card h5 {



    color: var(--gold);

    margin-bottom: 10px;



}



.reach-card p {



    font-size: 14px;

    color: #ccc;



}



/* highlight center card */



.highlight {



    border: 1px solid var(--gold);

    background: linear-gradient(180deg, #1a1a1a, #111);



}



/* pakages class  */

.dance-plans {

    background: #0d0d0d;

}



.dance-plan {



    /* background:#161616; */

    border-radius: 14px;

    overflow: hidden;

    transition: .3s;

    height: 100%;



}



.dance-plan:hover {



    transform: translateY(-8px);

    border: 1px solid var(--gold);



}



/* top section */



.plan-top {



    background: linear-gradient(135deg, #1e1e1e, #111);

    padding: 25px;

    text-align: center;



}



.plan-top h4 {



    color: var(--gold);

    margin-bottom: 10px;



}



.plan-price {



    font-size: 28px;

    font-weight: 600;

    color: white;



}



.plan-price span {



    display: block;

    font-size: 13px;

    color: #aaa;



}



.plan-price small {



    font-size: 14px;

    color: #aaa;



}



/* body */



.plan-body {



    padding: 25px;



}



.plan-body ul {



    list-style: none;

    padding: 0;

    margin-bottom: 15px;



}



.plan-body li {



    margin-bottom: 8px;

    font-size: 14px;

    color: #ccc;



}



.duration {



    font-size: 13px;

    color: #999;

    margin-bottom: 15px;



}



/* featured plan */



.featured {



    border: 1px solid var(--gold);

    transform: scale(1.05);



}



/* badge */



.popular-badge {



    position: absolute;

    background: var(--gold);

    color: var(--dark);

    padding: 5px 12px;

    font-size: 12px;

    border-radius: 20px;

    top: 10px;

    right: 10px;



}



/* testimonials  */

.testimonials {

    background: #F6F4ED !important;

}



.testimonial-card {



    background: #1a1a1a;

    padding: 25px;

    border-radius: 14px;

    transition: .3s;

    height: 100%;



}



.testimonial-card:hover {



    transform: translateY(-6px);

    border: 1px solid var(--gold);



}



.student-info {



    display: flex;

    align-items: center;

    gap: 12px;

    margin-bottom: 15px;



}



.student-img {



    width: 50px;

    height: 50px;

    border-radius: 50%;

    object-fit: cover;

    border: 2px solid var(--gold);



}



.student-name {

    margin: 0;

}



.student-role {



    font-size: 13px;

    color: #aaa;

    margin: 0;



}



.testimonial-text {



    font-size: 14px;

    color: #ccc;

    margin-bottom: 10px;



}



.stars {



    color: var(--gold);

    font-size: 14px;



}



.testimonial-card:before {

    content: "❝";

    font-size: 40px;

    color: var(--gold);

    opacity: .3;

}



/* video testimonis  */

.video-testimonials {

    background: var(--dark-light);

}



.video-card {



    background: var(--dark-light);

    padding: 15px;

    border-radius: 12px;

    transition: .3s;

    text-align: center;



}



.video-card:hover {



    transform: translateY(-6px);

    border: 1px solid var(--gold);



}



.video-wrapper {



    position: relative;

    padding-bottom: 56.25%;

    height: 0;

    overflow: hidden;

    border-radius: 10px;



}



.video-wrapper iframe {



    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;



}



.student-name {



    color: var(--gold);



}



.student-role {



    font-size: 13px;

    color: #aaa;



}



/* vide gallery  */

.video-gallery {

    background: var(--dark-light);

}



.video-item {



    position: relative;

    cursor: pointer;

    overflow: hidden;

    border-radius: 12px;



}



.video-item img {



    width: 100%;

    transition: .4s;



}



.video-item:hover img {



    transform: scale(1.05);



}



/* play button */



.play-btn {



    position: absolute;

    top: 50%;

    left: 50%;

    transform: translate(-50%, -50%);

    background: var(--gold);

    color: var(--dark);

    width: 60px;

    height: 60px;

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 24px;



}



/* hover overlay */



.video-item:after {



    content: "Watch Performance";

    position: absolute;

    bottom: 0;

    left: 0;

    width: 100%;

    padding: 10px;

    text-align: center;

    background: rgba(0, 0, 0, 0.6);

    color: white;

    font-size: 14px;



}



/* contact us  */

.contact-premium {

    background: var(--dark);

}



.contact-info-card {



    background: #151515;

    padding: 25px;

    border-radius: 12px;

    transition: .3s;



}



.contact-info-card:hover {



    border: 1px solid var(--gold);



}



.contact-info-card h3 {



    color: var(--gold);

    margin-bottom: 10px;



}



.contact-form-card {



    background: #151515;

    padding: 35px;

    border-radius: 12px;



}



.form-control {



    /* background:#111; */

    border: 1px solid #333;

    /* color: white; */



}



.form-control:focus {



    border-color: var(--gold);

    box-shadow: none;



}



/* footer  */

.footer {



    background: #080808;

    color: #bbb;

    padding: 70px 0 20px;



}



.footer-title {



    color: var(--gold);

    margin-bottom: 15px;



}



.footer-heading {



    color: var(--gold);

    margin-bottom: 12px;



}



.footer-links {



    list-style: none;

    padding: 0;



}



.footer-links li {



    margin-bottom: 6px;



}



.footer-links a {



    color: #bbb;

    text-decoration: none;

    font-size: 14px;



}



.footer-links a:hover {



    color: var(--gold);



}



.footer-bottom {



    margin-top: 20px;

    font-size: 13px;

    color: #777;



}



/* gallery neew  */

.gallery-section {

    background: #0c0c0c;

}



.gallery-filter button {



    background: #111;

    border: 1px solid #333;

    color: white;

    padding: 8px 18px;

    margin: 5px;

    border-radius: 20px;

    cursor: pointer;



}



.gallery-filter .active {



    background: var(--gold);

    color: var(--dark);



}



.gallery-item {


    border-radius: 10px;
    position: relative;

    overflow: hidden;



}



.gallery-img {



    border-radius: 10px;

    transition: .3s;



}



.gallery-item:hover img {



    transform: scale(1.05);



}



/* video */



.video-thumb {



    position: relative;

    cursor: pointer;



}



.play-icon {



    position: absolute;

    top: 50%;

    left: 50%;

    transform: translate(-50%, -50%);

    background: var(--gold);

    color: var(--dark);

    width: 50px;

    height: 50px;

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 20px;



}



/* glass theme  */

.glass-nav {



    background: rgba(0, 0, 0, 0.35);



    backdrop-filter: blur(12px);



    border-bottom: 1px solid rgba(255, 255, 255, 0.08);



    padding: 0px 0;



    transition: 0.3s;



}



.navbar-nav {



    gap: 25px;



}



.nav-link {



    color: white;

    font-weight: 500;

    position: relative;



}



.nav-link:hover {



    color: var(--gold);



}



/* underline animation */



.nav-link::after {



    content: "";

    position: absolute;

    bottom: -5px;

    left: 0;



    width: 0%;

    height: 2px;



    background: var(--gold);



    transition: .3s;



}



.nav-link:hover::after {



    width: 100%;



}



.side-contact {



    position: fixed;

    top: 50%;

    right: -50px;

    /* hidden position */



    transform: translateY(-50%);



    display: flex;

    align-items: center;



    transition: 0.4s;



    z-index: 999;



}

.side-contact.hide {
    right: -100px;
}


/* open state */



.side-contact.open {



    right: 0;



}



/* vertical tab */



.contact-tab {



    background: var(--gold);



    color: black;



    padding: 12px 8px;



    cursor: pointer;



    writing-mode: vertical-rl;



    text-orientation: mixed;



    font-weight: 600;



    border-radius: 8px 0 0 8px;



}



/* contact panel */



.contact-panel {



    background: #111;



    display: flex;

    flex-direction: column;



}



/* icons */



.contact-item {



    width: 50px;

    height: 50px;



    display: flex;

    align-items: center;

    justify-content: center;



    color: white;



    text-decoration: none;



    font-size: 18px;



}



/* colors */



.call {

    background: #00b894;

}



.whatsapp {

    background: #25D366;

}



.map {

    background: #e17055;

}



.email {

    background: #0984e3;

}





.btn-secondary-gold {

    display: inline-block;

    border-radius: 50px;

    border: 2px solid var(--gold-light);

    background: transparent;

    color: var(--gold-light);

    text-decoration: none;

    transition: all 0.3s ease;

}



.btn-secondary-gold.hero-btn,

.btn-gold.hero-btn {

    padding: 14px 32px;

    font-size: 18px;

    font-weight: 500;

}



.btn-secondary-gold:hover {

    background: #d4af37;

    color: #000;

}



.class-card {

    padding: 20px;

    border-radius: 20px;

    background: white;

    backdrop-filter: blur(12px);

    -webkit-backdrop-filter: blur(12px);

    border: 1px solid rgba(255, 255, 255, 0.15);

    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.4);

    text-align: center;

    transition: all 0.35s ease;

    overflow: hidden;

}



.class-card img {

    border-radius: 12px;

    width: 100%;

}



.class-card h5 {

    color: var(--gold);

    font-weight: 600;

    margin-top: 15px;

}



/* hover effect */

.class-card:hover {

    transform: translateY(-8px) scale(1.02);

    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.6);

    border: 1px solid rgba(255, 255, 255, 0.25);

}



.class-card:hover {

    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.6),

        0 0 20px rgba(212, 175, 55, 0.35);

}



#our-class,

#dance-style,

#events {

    background-color: #F6F4ED;

}



#dance-style h5 {

    color: var(--gold);

    font-weight: 600;

    font-size: 25px;

}



.navbar-brand img {

    height: 73px;

}

.footer-social {

    margin-top: 20px;

}



.footer-social a {

    display: inline-block;

    margin-right: 20px;

    font-size: 22px;

    color: #fff;

    transition: 0.3s ease;

}



.footer-social a:hover {

    color: #d4af37;

}




.gallery-grid {
    column-count: 3;
    column-gap: 16px;
}

.gallery-item {
    break-inside: avoid;
    margin-bottom: 16px;
}

@media (max-width: 991px) {
    .gallery-grid {
        column-count: 2;
    }
}

@media (max-width: 576px) {
    .gallery-grid {
        column-count: 1;
    }
}

.navbar-toggler{
    background-color: #d4af37;
}