*{
    margin: 0;
    font-family: berkshireswashregular, oleoScriptRegular, Shrikhand-Regular;
    box-sizing: border-box;
    padding: 0;
}

/* NAVBAR */
.navbar{
    height: 83px;
    width: 100%;
    background: #c38c44;
    color: white;

    display: flex;
    justify-content: space-between;
    align-items: center;

    padding: 0 40px;

    position: fixed;
    top: 0;
    left: 0;

    z-index: 9999;
}

.logo{
    display: flex;
    align-items: center;
    gap: 12px;

    font-size: 24px;
    font-weight: bold;
}

.logo img{
    height: 70px;
    width: 70px;
}

nav ul{
    list-style: none;
    display: flex;
    align-items: center;
    gap: 20px;
    margin-right: 260px;
}

nav ul li a{
    color: white;
    text-decoration: none;
    font-size: 22px;
}

nav ul li a:hover{
    color: black;
    text-decoration: underline;
}

body{
background:#fdf8f2;
}


.menu-icon{
    display:none;
    font-size:35px;
    cursor:pointer;
}


/* TABLET + MOBILE */

@media(max-width:900px){

.navbar{
    padding:0 20px;
}

.logo span{
    font-size:18px;
}

.logo img{
    width:55px;
    height:55px;
}

.menu-icon{
    display:block;
    color:white;
}

nav ul{
    position:absolute;
    top:90px;
    right:0;
    width:100%;
    background:#000;
    flex-direction:column;
    gap:25px;
    padding:30px 0;
    margin:0;
    display:none;
}

nav ul.active{
    display:flex;
}

nav ul li a{
    font-size:22px;
}
}


/* HERO */

.hero{
    height:100vh;
    position:relative;
    overflow:hidden;
}

.slider{
    position:absolute;
    width:100%;
    height:100%;
}

.slide{
    position:absolute;
    width:100%;
    height:100%;
    opacity:0;
    transition:opacity 1.5s ease;
}

.slide.active{
    opacity:1;
}

.slide img{
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:top;
}

.slider::after{
    content:"";
    position:absolute;
    inset:0;
    background:rgba(0,0,0,.55);

    animation:overlayPulse 6s ease-in-out infinite;
}

@keyframes overlayPulse{

    0%,100%{
        background:rgba(0,0,0,.55);
    }

    50%{
        background:rgba(0,0,0,.40);
    }
}

.hero-content h1{
    font-size:40px;
    margin-top: 430px;
    opacity:0;
    animation:heroTitle 1.2s ease forwards;
}


/*mobile*/

@media(max-width:600px){

.hero{
    margin-top: 38px;
}

.hero-content{
    width:90%;
}

.hero-content h1{
    font-size:32px;
}

.hero-content p{
    font-size:18px;
}

.btn{
    padding:12px 25px;
}

}

/* Hero Text */

.hero-content{ 
    position:absolute; 
    top:50%;  
    left:50%;
    transform:translate(-50%,-50%); 
    color:white; 
    text-align:center; 
    z-index:2; }

.hero-content span{
    color:#c38c44;
}

.hero-content p{
    font-size:25px;
    margin-bottom:35px;
    opacity:0;
    animation:heroText 1.2s ease .4s forwards;
}

.btn{
    display:inline-block;
    background:#c38c44;
    color:#fff;
    padding:15px 35px;
    border-radius:30px;
    text-decoration:none;
    font-size: 20px;
    opacity:0;
    animation:heroButton 1s ease .8s forwards;
    transition:.4s;
}

.btn:hover{
    background:#7a5cff;
    transform:translateY(-4px);
}

/* FEATURED */

.featured{

padding:80px 5%;
background:#fff8f2;
text-align:center;
}

.featured h2{

font-size:45px;
margin-bottom:50px;
}

.feature-container{

display:flex;
justify-content:center;
gap:30px;
flex-wrap:wrap;
}

.feature-card{

width:320px;
background:white;
padding:20px;
border-radius:20px;
box-shadow:0 10px 25px rgba(0,0,0,.2);
transition:.4s;
}

.feature-card:hover{

transform:translateY(-10px);
}

.feature-card img{

width:100%;
height:220px;
object-fit:cover;
border-radius:20px;
}

.feature-card h3{

margin:20px 0;
font-size:28px;
color:#c38c44;
}


/* ARTISTS */

.artists{

padding:80px 5%;
background:white;
text-align:center;
}

.artist-container{

display:flex;
justify-content:center;
gap:30px;
flex-wrap:wrap;
}

.artist-card{
width:250px;
transition:.5s;
margin-top:20px;
font-size:28px;
}

.artist-card img{

width:100%;
height:250px;
border-radius:50%;
object-fit:cover;
object-position: center;
border:6px solid #c38c44;
animation:float 4s infinite;
}

.artist-card:hover{

transform:scale(1.08);
}


@media(max-width:600px){

.artist-card{
    width:220px;
}

.artist-card img{
    width:220px;
    height:220px;
}

.artist-card h5{
    font-size:22px;
}
}

@media(max-width:600px){

.slide img{
    object-fit:contain;
    background:#000;
}
}


/* WHY */

.why{

padding:80px 5%;
background:#f7f3ff;
text-align:center;
}

.why h2{

font-size:45px;
margin-bottom:50px;
}

.why-box{

display:flex;
justify-content:center;
gap:30px;
flex-wrap:wrap;
}

.why-box div{

width:280px;
padding:40px;
background:white;
font-size:28px;
border-radius:25px;
box-shadow:0 10px 25px rgba(0,0,0,.15);
transition:.4s;
}

.why-box div:hover{

background:#c38c44;
color:white;
}


/* OUR SERVICES */

.services{
    padding:80px 5%;
    background:#fff8f2;
    text-align:center;
}

.services h2{
    font-size:45px;
    margin-bottom:50px;
    color:#000;
}

.service-container{
    display:flex;
    justify-content:center;
    gap:30px;
    flex-wrap:wrap;
}

.service-card{
    width:280px;
    background:white;
    padding:35px 25px;
    border-radius:20px;
    box-shadow:0 10px 25px rgba(0,0,0,.15);
    transition:.4s;
}

.service-card:hover{
    transform:translateY(-10px);
    background:#c38c44;
    color:white;
}

.service-card i{
    font-size:55px;
    color:#c38c44;
    margin-bottom:20px;
    transition:.4s;
}

.service-card:hover i{
    color:white;
}

.service-card h3{
    font-size:28px;
    margin-bottom:15px;
}

.service-card p{
    font-size:18px;
    line-height:1.7;
    color:#555;
}

.service-card:hover p{
    color:white;
}

/* Mobile */

@media(max-width:600px){

    .services{
        padding:60px 5%;
    }

    .services h2{
        font-size:36px;
    }

    .service-card{
        width:100%;
        max-width:340px;
    }

    .service-card h3{
        font-size:24px;
    }

    .service-card p{
        font-size:16px;
    }

    .service-card i{
        font-size:48px;
    }
}


/* CTA */

.cta{

padding:100px;
background:linear-gradient(135deg,#c38c44,#7a5cff);
text-align:center;
color:white;
}

.cta h2{

font-size:50px;
margin-bottom:30px;
}


@keyframes heroTitle{

    from{
        opacity:0;
        transform:translateY(-60px);
    }

    to{
        opacity:1;
        transform:translateY(0);
    }
}

@keyframes heroText{

    from{
        opacity:0;
        transform:translateY(40px);
    }

    to{
        opacity:1;
        transform:translateY(0);
    }
}

@keyframes heroButton{

    from{
        opacity:0;
        transform:scale(.8);
    }

    to{
        opacity:1;
        transform:scale(1);
    }
}

@keyframes heroZoom{

    from{
        transform:scale(1);
    }

    to{
        transform:scale(1.12);
    }
}

@keyframes floatHero{

    0%,100%{
        transform:translate(-50%,-50%);
    }

    50%{
        transform:translate(-50%,-53%);
    }
}



/* =========================
   SCROLL REVEAL
========================= */

.featured,
.artists,
.why,
.services,
.cta {
    opacity: 0;
    transform: translateY(70px);
    transition: opacity 0.9s ease, transform 0.9s ease;
}

.featured.show-section,
.artists.show-section,
.why.show-section,
.services.show-section,
.cta.show-section {
    opacity: 1;
    transform: translateY(0);
}









/* ==========================
   FOOTER
========================== */

.footer{
    background:#1b1b1b;
    color:white;
    padding:60px 8% 20px;
}

.footer-container{
    display:flex;
    justify-content:space-between;
    gap:40px;
    flex-wrap:wrap;
}

.footer-box{
    flex:1;
    min-width:220px;
}

.footer-logo{
    display:flex;
    align-items:center;
    gap:12px;
    margin-bottom:20px;
}

.footer-logo img{
    width:65px;
    height:65px;
}

.footer-logo h2{
    color:#c38c44;
    font-size:30px;
}

.footer-box p{
    color:#ddd;
    line-height:1.8;
    margin-bottom:10px;
}

.footer-box h3{
    color:#c38c44;
    margin-bottom:20px;
    font-size:24px;
}

.footer-box ul{
    list-style:none;
}

.footer-box ul li{
    margin:12px 0;
}

.footer-box ul li a{
    color:white;
    text-decoration:none;
    transition:.3s;
}

.footer-box ul li a:hover{
    color:#c38c44;
    padding-left:8px;
}

.footer-social{
    display:flex;
    flex-direction:column;
    gap:15px;
}

.footer-social a{
    color:white;
    text-decoration:none;
    transition:.3s;
    display:flex;
    align-items:center;
    gap:12px;
    font-size:17px;
}

.footer-social a:hover{
    color:#c38c44;
    transform:translateX(8px);
}

.footer hr{
    margin:40px 0 20px;
    border:none;
    height:1px;
    background:#555;
}

.copyright{
    text-align:center;
    color:#bbb;
    font-size:16px;
}


.footer-box p i{
    color:#c38c44;
    margin-right:10px;
    width:20px;
}

.footer-box p a{
    color:#ddd;
    text-decoration:none;
    transition:.3s;
}

.footer-box p a:hover{
    color:#c38c44;
}

.footer-social a i{
    font-size:24px;
}


/* Brand Colors */

.footer-social .fa-youtube{
    color:#FF0000;
}

.footer-social .fa-instagram{
    color:#E1306C;
}

.footer-social .fa-facebook-f{
    color:#1877F2;
}


/* ==========================
   RESPONSIVE
========================== */

@media(max-width:900px){

.footer-container{
    flex-direction:column;
    text-align:center;
}

.footer-logo{
    justify-content:center;
}

.footer-social{
    align-items:center;
}
}


/* ANIMATIONS */

@keyframes slideDown{

from{

opacity:0;
transform:translateY(-80px);
}

to{

opacity:1;
transform:translateY(0);
}
}

@keyframes slideLeft{

from{

opacity:0;
transform:translateX(-100px);
}

to{

opacity:1;
transform:translateX(0);
}
}

@keyframes fadeUp{

from{

opacity:0;
transform:translateY(50px);
}

to{

opacity:1;
transform:translateY(0);
}
}

@keyframes zoom{

from{

transform:scale(1.2);
}

to{

transform:scale(1);
}
}

@keyframes float{

0%,100%{

transform:translateY(0);
}

50%{

transform:translateY(-12px);
}
}

@keyframes popUp{

0%{
opacity:0;
transform:scale(.5);
}

100%{
opacity:1;
transform:scale(1);
}
}


/* MOBILE */

@media(max-width:900px){

.hero-content h1{

font-size:45px;
}

.hero-content p{

font-size:18px;
}

.feature-card,
.artist-card,
.why-box div{

width:100%;
}

.cta{

padding:70px 20px;
}

.cta h2{

font-size:35px;
}
}




/* =========================
   ABOUT PAGE
========================= */


/* HERO */

.about-hero{
    height: 50vh;
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    text-align:center;
    padding-top:90px;
    background: linear-gradient(135deg, #c38c44, #7a5cff );
    color:white;
}

.about-hero h1{
    font-size:60px;
    margin-bottom:15px;
}

.about-hero p{
    font-size:22px;
}

/* STORY SECTION */

.story{
    min-height:30vh;
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:50px;
    padding:80px 10%;
    background:#fff8f2;
}

.story-text{
    width:50%;
}

.story-text h2{
    font-size:40px;
    margin-bottom:20px;
}

.story-text p{
    font-size:18px;
    line-height:1.8;
    color:#333;
    margin-bottom: 20px;
}

.story-image{
    width:40%;
}

.story-image img{
    width:100%;
    height:640px;
    object-fit:cover;
    border-radius:30px;

    box-shadow:
    0 0 30px rgba(122,92,255,.5);
}

/* FOUNDER SECTION */

.founder{
    padding:80px 5%;
    text-align:center;
    background:white;
}

.founder h2{
    font-size:40px;
    margin-bottom:50px;
}

.founder-card{
    display:flex;
    align-items:center;
    gap:50px;
    background:#fff8f2;
    padding:40px;
    border-radius:35px;
    box-shadow:
    0 10px 30px rgba(0,0,0,.15);
}

.founder-image{
    width:40%;
}

.founder-image img{
    width:100%;
    height:500px;
    object-fit:cover;
    border-radius:30px;
}

.founder-info{
    width:60%;
    text-align:left;
}

.founder-info h3{
    font-size:40px;
    color:#c38c44;
}

.founder-info h4{
    font-size:22px;
    margin:10px 0;
}

.founder-info p{
    font-size:18px;
    line-height:1.8;
    margin-bottom: 20px;
}

/* TEAM SECTION */

.team{
    padding:80px 5%;
    background:#fff8f2;
    text-align:center;
}

.team h2{
    font-size:40px;
    margin-bottom:50px;
}

.team-container{
    display:flex;
    justify-content:center;
    gap:40px;
    flex-wrap:wrap;
}

.team-card{
    width:320px;
    background:white;
    border-radius:25px;
    padding:30px;
    box-shadow:0 10px 25px rgba(0,0,0,.15);
    transition:0.3s;
}

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

.team-card img{
    width:220px;
    height:220px;
    object-fit:cover;
    border-radius:50%;
    border:6px solid #c38c44;
    margin-bottom:20px;
}

.team-card h3{
    font-size:28px;
    color:#c38c44;
    margin-bottom:10px;
}

.team-card p{
    font-size:20px;
    color:#555;
    font-weight:bold;
}


/* ANIMATIONS */



.about-hero h1{
    animation:fadeDown 1s forwards;
}

.about-hero p{
    animation:fadeUp 1.5s forwards;
}

.story-text,
.story-image{
    animation:slideLeft 1s forwards;
}

.founder-image,
.founder-info{
    animation:fadeUp 1s forwards;
}

.founder-card:hover{
    transform:scale(1.02);
    transition:.4s;
}

.team{
    animation:fadeUp 1.3s ease;
}

.team-card{
    animation:fadeUp 1s ease;
}

.team-card:nth-child(2){
    animation-delay:.4s;
}


.card{
    animation:popUp 1s ease;
    transition:.4s;
}

.card:nth-child(2){
    animation-delay:.3s;
}

.card:nth-child(3){
    animation-delay:.6s;
}

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

.social-links a{
    transition:.4s;
}

.social-links a:hover{
    transform:translateY(-5px) scale(1.08);
}



/* MOBILE */

@media(max-width:900px){

    .team-container{
        flex-direction:column;
        align-items:center;
    }

    .team-card{
        width:90%;
    }

    .team-card img{
        width:180px;
        height:180px;
    }

}


/* SOCIAL LINKS */

.social-links{
    margin-top:25px;
}

.social-links a{
    display:inline-block;
    margin-right:15px;
    padding:10px 20px;
    border-radius:25px;
    background:#c38c44;
    color:white;
    text-decoration:none;
}

.social-links a:hover{
   background:#7a5cff;
}

/* MISSION */

.mission{
    padding:70px 5%;
    text-align:center;
    background:#f7f3ff;
}

.mission h2{
    font-size:40px;
    margin-bottom:40px;
}

.cards{
    display:flex;
    justify-content:center;
    gap:30px;
}

.card{
    width:30%;
    padding:35px;
    background:white;
    border-radius:25px;
    box-shadow:
    0 10px 25px rgba(0,0,0,.1);
    transition:.3s;
}

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

.card h3{
    font-size:25px;
    margin-bottom:15px;
}


/* MOBILE */

@media(max-width:900px){

.story,
.founder-card{
    flex-direction:column;
}

.story-text,
.story-image,
.founder-image,
.founder-info{
    width:100%;
}

.founder-info{
    text-align:center;
}

.cards{
    flex-direction:column;
}

.card{
    width:100%;
}

.about-hero h1{
    font-size:45px;
}
}







.about-hero,
.story,
.founder,
.team,
.mission {

    opacity: 0;
    transform: translateY(40px);

    transition:
        opacity 0.6s ease,
        transform 0.6s ease;
}

.about-hero.about-show,
.story.about-show,
.founder.about-show,
.team.about-show,
.mission.about-show {

    opacity: 1;
    transform: translateY(0);
}






/* CONTACT PAGE */

/* CONTACT SECTION */

.contact{
    min-height:100vh;
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:140px 10%;
    background:#fdf7ef;
}

/* LEFT SIDE */

.contact-text{
    width:45%;
    animation:slideLeft 1.2s ease;
}

.contact-text h1{
    font-size:60px;
    color:#c38c44;
    margin-bottom:20px;
}

.contact-text p{
    font-size:18px;
    line-height:1.8;
    color:#444;
    margin-bottom:25px;
}

.info h3{
    margin-top:20px;
    color:#c38c44;
}

.info p{
    margin-top:8px;
}

/* FORM */

.contact-form{
    width:45%;
    animation:slideRight 1.2s ease;
}

form{
    background:white;
    padding:40px;
    border-radius:20px;
    box-shadow:0 15px 40px rgba(0,0,0,.15);
}

form input,
form textarea{

    width:100%;
    padding:16px;
    margin-bottom:20px;
    border:none;
    background:#f3f3f3;
    border-radius:10px;
    font-size:17px;
}

form input:focus,
form textarea:focus{

    outline:none;
    border:2px solid #c38c44;
}

button{

    width:100%;
    padding:16px;
    border:none;
    border-radius:40px;
    font-size:18px;
    cursor:pointer;
    color:white;
    background:linear-gradient(45deg,#ff4ecd,#7a5cff);
    transition:.4s;
    animation:pulse 2s infinite;
}

button:hover{

    transform:translateY(-4px);
    box-shadow:0 0 20px rgba(255,78,205,.6);
}

.social{

  align-items: center;
  text-align: center;
  background-color: #f9ead7;
  padding: 20px;
  margin-top:30px;
}

.social .fa-youtube{
    color:#FF0000;
}



/* LEFT SECTION ANIMATION */

.contact-text h1{
    font-size:60px;
    color:#c38c44;
    margin-bottom:20px;
    animation:fadeDown 1s ease;
}

.contact-text p,
.info,
.social{
    animation:fadeUp 1.5s ease;
}


form input,
form textarea{

    width:100%;
    padding:16px;
    margin-bottom:20px;
    border:none;
    background:#f3f3f3;
    border-radius:10px;
    font-size:17px;
    transition:0.4s;
}

form input:hover,
form textarea:hover{

    transform:scale(1.02);
}

form input:focus,
form textarea:focus{

    transform:scale(1.03);
    box-shadow:0 0 15px rgba(195,140,68,.5);
}


.info .fa-whatsapp{
    color:#25D366;
    margin-right:8px;
}

.info a{
    color:#333;
    text-decoration:none;
    transition:.3s;
}

.info a:hover{
    color:#ed0a1d;
}

.info p{
    margin-bottom:18px;
}


button:hover{

    transform:translateY(-5px) scale(1.05);
    box-shadow:0 0 25px #ff4ecd;
}

.social img{

    width:35px;
    height:35px;
    transition:.4s;
}

.social a:hover img{

    transform:rotate(360deg) scale(1.2);
}


@keyframes slideLeft{

from{
opacity:0;
transform:translateX(-80px);
}

to{
opacity:1;
transform:translateX(0);
}
}

@keyframes slideRight{

from{
opacity:0;
transform:translateX(80px);
}

to{
opacity:1;
transform:translateX(0);
}
}

@keyframes fadeDown{

from{
opacity:0;
transform:translateY(-50px);
}

to{
opacity:1;
transform:translateY(0);
}
}

@keyframes fadeUp{

from{
opacity:0;
transform:translateY(50px);
}

to{
opacity:1;
transform:translateY(0);
}
}

@keyframes pulse{

0%{
transform:scale(1);
}

50%{
transform:scale(1.04);
}

100%{
transform:scale(1);
}
}

@keyframes bgMove{

0%{
background-position:0% 50%;
}

50%{
background-position:100% 50%;
}

100%{
background-position:0% 50%;
}
}


/* RESPONSIVE */

@media(max-width:900px){

.contact{

    flex-direction:column;
    text-align:center;
}

.contact-text,
.contact-form{

    width:100%;
}

.contact-text{

    margin-bottom:40px;
}

nav ul{

    margin-right:0;
    gap:15px;
}

nav ul li a{

    font-size:18px;
}

.contact-text h1{

    font-size:45px;
}
}

/* FOLLOW US */

.social h3{
    color:#c38c44;
    margin-bottom:50px;
    font-size: 25px;
}

/* SECTION HEADINGS */

.popular-videos h2,
.all-videos h2{
    font-size:40px;
    color:#c38c44;
    margin:60px 0 30px;
}

.social a{
    display:flex;
    align-items:center;
    gap:12px;
    text-decoration:none;
    color:#333;
    font-size:20px;
    margin-bottom:15px;
    transition:0.3s;
}

.social a:hover{
    color:#ff4ecd;
    transform:translateX(8px);
}

.social img{
    width:35px;
    height:35px;
}





/* VIDEOS */

/* PAGE */

.video-hero{
    max-width:900px;
    margin:0 auto 80px;
    padding:70px 40px;
    background:linear-gradient(135deg,#fff8e8,#fdf2d0);
    border-radius:25px;
    box-shadow:0 10px 30px rgba(0,0,0,0.08);
    animation:heroFade 1.2s ease forwards;
}

.video-hero{
    animation:
        heroFade 1.2s ease forwards,
        floatHero 4s ease-in-out 1.2s infinite;
}

@keyframes floatHero{

    0%,100%{
        transform:translateY(0);
    }

    50%{
        transform:translateY(-8px);
    }

}

.video-hero h1{
    font-size:55px;
    color:#c38c44;
    margin-bottom:20px;

    opacity:0;
    animation:titleSlide 1s ease .4s forwards;
}

.video-caption{
    font-size:18px;
    color:#555;
    line-height:1.8;
    max-width:700px;
    margin:0 auto;

    opacity:0;
    animation:titleSlide 1s ease .8s forwards;
}


@keyframes heroFade{

    0%{
        opacity:0;
        transform:translateY(60px) scale(.95);
    }

    100%{
        opacity:1;
        transform:translateY(0) scale(1);
    }
}

@keyframes titleSlide{

    from{
        opacity:0;
        transform:translateY(30px);
    }

    to{
        opacity:1;
        transform:translateY(0);
    }
}


.popular-videos,
.devotional-videos,
.bhojpuri-videos{
    margin-top:80px;
}

.popular-videos h2,
.devotional-videos h2,
.bhojpuri-videos h2{
    font-size:38px;
    color:#c38c44;
    margin-bottom:35px;
    text-align:left;
}

.video-container{
    margin-bottom:20px;
}


.video-section{

padding:130px 8%;
text-align:center;
}

.video-section h1{

font-size:50px;
color:#c38c44;
margin-bottom:60px;
}

/* GRID */

.video-container{

display:grid;
grid-template-columns:repeat(auto-fit,minmax(320px,1fr));
gap:40px;
}

/* CARD */

.video-card{

background:white;
border-radius:20px;
overflow:hidden;
cursor:pointer;
position:relative;
height: 250px;
transition:.5s;
box-shadow:0 15px 35px rgba(0,0,0,.2);
animation:fadeUp 1s ease;
}

.video-card:hover{

transform:translateY(-15px) scale(1.05);
box-shadow: 0 0 25px #ff4ecd, 0 0 40px #7a5cff;
}

.video-card img{

width:100%;
height:100%;
object-fit:cover;
transition:1s;
}

.video-card:hover img{

transform:scale(1.1);
}

.video-card h3{

padding:20px;
font-size:24px;
}

.play-btn{

position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
width:75px;
height:75px;
background:rgba(255,255,255,.8);
border-radius:50%;
display:flex;
justify-content:center;
align-items:center;
font-size:35px;
transition:.5s;
}

.video-card:hover .play-btn{

background:#ff4ecd;
color:white;
transform:translate(-50%,-50%) scale(1.2);
}

/* POPUP */

.video-popup{

display:none;
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
background:rgba(0,0,0,.9);
justify-content:center;
align-items:center;
z-index:9999;
animation:fade .5s;
}

.popup video{

width:100%;
max-width:1200px;
border-radius:20px;
}

.video-close{

position:absolute;
top:30px;
right:50px;

font-size:50px;
color:white;
cursor:pointer;
}


.video-popup iframe{
    width:100%;
    max-width:1200px;
    height:550px;
    border:none;
    border-radius:20px;
}

/* ANIMATION */

@keyframes fade{

from{

opacity:0;
}

to{

opacity:1;
}
}




/* =========================================
   VIDEOS PAGE SCROLL ANIMATION
========================================= */

/* Video sections */

.video-section > .popular-videos,
.video-section > .devotional-videos,
.video-section > .bhojpuri-videos {

    opacity: 0;

    transform: translateY(45px);

    transition:
        opacity 0.7s ease,
        transform 0.7s ease;
}


/* Section visible */

.video-section > .popular-videos.video-show,
.video-section > .devotional-videos.video-show,
.video-section > .bhojpuri-videos.video-show {

    opacity: 1;

    transform: translateY(0);
}


/* =========================================
   HOVER
========================================= */

.video-card:hover {

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

    transition: transform 0.25s ease;
}


/* =========================================
   MOBILE
========================================= */

@media (max-width: 600px) {

    .video-section > .popular-videos,
    .video-section > .devotional-videos,
    .video-section > .bhojpuri-videos {

        transform: translateY(30px);
    }

    .video-card {

        transform: translateY(25px) scale(0.98);
    }

}






/* GALLERY */

.gallery{

    padding:130px 8%;

    text-align:center;
    background:#fdf8f2;
}

.gallery-hero{
    max-width:950px;
    margin:0 auto 90px;
    padding:80px 50px;
    text-align:center;

    background:rgba(255,255,255,0.75);
    backdrop-filter:blur(10px);
    -webkit-backdrop-filter:blur(10px);

    border:1px solid rgba(195,140,68,.2);
    border-radius:30px;

    box-shadow:
        0 15px 35px rgba(0,0,0,.08),
        inset 0 0 20px rgba(255,255,255,.4);

    position:relative;
    overflow:hidden;

    animation:galleryHero 1.2s ease;
}

.gallery-hero::before{
    content:"";
    position:absolute;
    width:220px;
    height:220px;
    background:#f8d68b;
    border-radius:50%;
    top:-90px;
    left:-70px;
    opacity:.25;
}

.gallery-hero::after{
    content:"";
    position:absolute;
    width:180px;
    height:180px;
    background:#d8b4ff;
    border-radius:50%;
    bottom:-70px;
    right:-50px;
    opacity:.18;
}


.gallery-hero h1{
    font-size:58px;
    color:#c38c44;
    margin-bottom:20px;
    position:relative;
    z-index:1;
}

.gallery-caption{
    font-size:18px;
    color:#555;
    line-height:1.8;
    max-width:700px;
    margin:auto;
    position:relative;
    z-index:1;
}


/* =========================================================
   ATOOT MOMENTS - EVENT CATEGORY
   Song Release Event Styling
========================================================= */

.gallery-section-caption{
    max-width:750px;
    margin:-15px auto 50px;
    color:#666;
    font-size:25px;
    line-height:1.8;
    text-align:center;
}


/* EVENT CATEGORY BOX */

.gallery-category{
    position:relative;
    margin:60px 0 20px;
    padding:35px 30px 40px;

    background:
        linear-gradient(
            135deg,
            rgba(255,248,232,.95),
            rgba(255,255,255,.98),
            rgba(247,243,255,.95)
        );

    border-radius:30px;

    border:1px solid rgba(195,140,68,.25);

    box-shadow:
        0 15px 35px rgba(0,0,0,.10),
        0 0 25px rgba(195,140,68,.08);

    overflow:hidden;

    animation:fadeUp 1s ease;
}


/* Decorative gold glow */

.gallery-category::before{
    content:"";
    position:absolute;

    width:180px;
    height:180px;

    top:-90px;
    left:-70px;

    background:#c38c44;
    border-radius:50%;

    opacity:.10;
}


/* Decorative purple glow */

.gallery-category::after{
    content:"";
    position:absolute;

    width:200px;
    height:200px;

    bottom:-120px;
    right:-70px;

    background:#7a5cff;
    border-radius:50%;

    opacity:.08;
}


/* EVENT TITLE */

.gallery-category h3{
    position:relative;
    z-index:2;

    display:inline-block;

    margin:0 auto 35px;

    padding:15px 30px;

    font-size:30px;

    color:#c38c44;

    background:white;

    border-radius:50px;

    border:2px solid rgba(195,140,68,.25);

    box-shadow:
        0 8px 20px rgba(0,0,0,.08);

    transition:.4s;
}


.gallery-category h3:hover{
    transform:translateY(-4px);

    box-shadow:
        0 12px 25px rgba(195,140,68,.20);

    color:#7a5cff;
}


/* EVENT IMAGE GRID */

.gallery-category .gallery-container{
    position:relative;
    z-index:2;

    display:grid;

    grid-template-columns:
        repeat(auto-fit,minmax(250px,1fr));

    gap:22px;
}


/* EVENT IMAGES */

.gallery-category .gallery-container img{
    width:100%;
    height:240px;

    object-fit:cover;

    border-radius:18px;

    border:4px solid white;

    cursor:pointer;

    box-shadow:
        0 8px 20px rgba(0,0,0,.15);

    transition:
        transform .45s ease,
        box-shadow .45s ease,
        filter .45s ease;

    animation:eventPhoto 1s ease both;
}


/* Hover effect */

.gallery-category .gallery-container img:hover{

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

    filter:brightness(1.05);

    box-shadow:
        0 12px 30px rgba(195,140,68,.35),
        0 0 20px rgba(122,92,255,.15);

    z-index:5;
}


/* Staggered animation */

.gallery-category .gallery-container img:nth-child(1){
    animation-delay:.05s;
}

.gallery-category .gallery-container img:nth-child(2){
    animation-delay:.10s;
}

.gallery-category .gallery-container img:nth-child(3){
    animation-delay:.15s;
}

.gallery-category .gallery-container img:nth-child(4){
    animation-delay:.20s;
}

.gallery-category .gallery-container img:nth-child(5){
    animation-delay:.25s;
}

.gallery-category .gallery-container img:nth-child(6){
    animation-delay:.30s;
}

.gallery-category .gallery-container img:nth-child(7){
    animation-delay:.35s;
}


/* PHOTO ANIMATION */

@keyframes eventPhoto{

    from{
        opacity:0;
        transform:translateY(30px) scale(.95);
    }

    to{
        opacity:1;
        transform:translateY(0) scale(1);
    }
}




/* =========================================
   GALLERY SCROLL REVEAL
========================================= */

.gallery > .featured-gallery,
.gallery > .all-gallery {
    opacity: 0;
    transform: translateY(45px);
    transition: 
        opacity 0.7s ease,
        transform 0.7s ease;
}

.gallery > .featured-gallery.gallery-show,
.gallery > .all-gallery.gallery-show {
    opacity: 1;
    transform: translateY(0);
}


/* Gallery Images */

.gallery-container img {
    opacity: 0;
    transform: translateY(35px);
    transition:
        opacity 0.6s ease,
        transform 0.6s ease;
}

.gallery-container img.gallery-image-show {
    opacity: 1;
    transform: translateY(0);
}


/* Hover */

.gallery-container img:hover {
    transform: scale(1.05);
}


/* Mobile */

@media (max-width: 600px) {

    .gallery > .featured-gallery,
    .gallery > .all-gallery {
        transform: translateY(40px);
    }

    .gallery-container img {
        transform: translateY(25px);
    }

}




/* =========================================================
   ALBUM MEMORIES
========================================================= */

.all-gallery + .all-gallery{
    margin-top:100px;
}


/* Album heading */

.all-gallery h2{
    position:relative;
}


/* Gold underline */

.all-gallery h2::after{
    content:"";

    display:block;

    width:80px;
    height:4px;

    margin-top:12px;

    background:
        linear-gradient(
            90deg,
            #c38c44,
            #7a5cff
        );

    border-radius:10px;
}


/* =========================================================
   GALLERY HERO IMPROVEMENTS
========================================================= */

.gallery-hero h1{
    text-shadow:
        0 3px 10px rgba(195,140,68,.15);
}

.gallery-hero h1::after{
    content:"";

    display:block;

    width:90px;
    height:4px;

    margin:18px auto 0;

    background:
        linear-gradient(
            90deg,
            #c38c44,
            #7a5cff
        );

    border-radius:10px;
}


/* =========================================================
   FEATURED PHOTOS
========================================================= */

.featured-gallery .gallery-container img{
    border:4px solid white;
    transition:.5s ease;
}

.featured-gallery .gallery-container img:hover{

    transform:
        translateY(-10px)
        scale(1.04);

    box-shadow:
        0 12px 30px rgba(195,140,68,.35),
        0 0 25px rgba(122,92,255,.15);
}


/* =========================================================
   NORMAL ALBUM PHOTOS
========================================================= */

.all-gallery:not(:first-of-type) .gallery-container img{

    border:4px solid white;

    transition:.45s ease;
}

.all-gallery:not(:first-of-type) .gallery-container img:hover{

    transform:
        scale(1.05)
        rotate(.5deg);

    box-shadow:
        0 12px 30px rgba(195,140,68,.30);
}


/* =========================================================
   MOBILE
========================================================= */

@media(max-width:768px){

    .gallery{
        padding:110px 5% 60px;
    }

    .gallery-hero{
        padding:60px 25px;
        margin-bottom:60px;
        border-radius:25px;
    }

    .gallery-hero h1{
        font-size:42px;
    }

    .gallery-caption{
        font-size:16px;
    }


    .featured-gallery,
    .all-gallery{
        margin-top:60px;
    }


    .featured-gallery h2,
    .all-gallery h2{
        font-size:30px;
        margin-bottom:25px;
    }


    .gallery-section-caption{
        font-size:16px;
        margin-bottom:35px;
    }


    /* Event box */

    .gallery-category{
        padding:25px 15px 30px;
        border-radius:25px;
    }


    /* Event title */

    .gallery-category h3{

        display:block;

        font-size:21px;

        line-height:1.5;

        padding:14px 18px;

        border-radius:20px;

        margin-bottom:25px;
    }


    /* Event images */

    .gallery-category .gallery-container{

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

        gap:12px;
    }


    .gallery-category .gallery-container img{

        height:180px;

        border-radius:14px;

        border-width:3px;
    }


    /* Normal gallery */

    .gallery-container{

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

        gap:12px;
    }


    .gallery-container img{

        height:180px;

        border-radius:14px;
    }

}


/* =========================================================
   SMALL PHONES
========================================================= */

@media(max-width:480px){

    .gallery-hero h1{
        font-size:36px;
    }

    .gallery-category h3{
        font-size:19px;
    }

    .gallery-category .gallery-container img{
        height:150px;
    }

    .gallery-container img{
        height:150px;
    }

    .gallery-section-caption{
        line-height:1.6;
    }

}



@keyframes galleryHero{

    from{
        opacity:0;
        transform:translateY(50px) scale(.96);
    }

    to{
        opacity:1;
        transform:translateY(0) scale(1);
    }
}


.featured-gallery,
.all-gallery{
    margin-top:80px;
}

.featured-gallery h2,
.all-gallery h2{
    font-size:38px;
    color:#c38c44;
    margin-bottom:35px;
    text-align:left;
}


/* GRID */

.gallery-container{

display:grid;
grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
gap:25px;
}

/* IMAGE */

.gallery-container img{

width:100%;
height:350px;
object-fit:cover;
border-radius:20px;
cursor:pointer;
transition:.5s;
box-shadow:0 10px 25px rgba(0,0,0,.2);
animation:fadeUp 1s ease;
}

.gallery-container img:hover{

transform:scale(1.08) rotate(1deg);
box-shadow: 0 0 20px #ff4ecd, 0 0 35px #7a5cff;
}


/* POPUP */

.gallery-popup{
    display:none;
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background:rgba(0,0,0,.92);
    justify-content:center;
    align-items:center;
    z-index:9999;
    animation:fade .4s;
}

.gallery-popup img{
    max-width:90%;
    max-height:90vh;
    width:auto;
    height:auto;
    object-fit:contain;
    border-radius:20px;
    animation:zoom .5s;
}

.gallery-close{

position:absolute;
top:20px;
right:40px;
font-size:60px;
color:white;
cursor:pointer;
}

/* ANIMATION */

@keyframes zoom{

from{
transform:scale(.6);
opacity:0;
}

to{
transform:scale(1);
opacity:1;
}
}

/* RESPONSIVE */

@media(max-width:768px){

.gallery h1{

font-size:45px;
}

.popup img{

width:95%;
}

nav ul{

gap:15px;
}

nav ul li a{
    font-size:18px;
}
}




/* FOR TABLETS */

@media (max-width:1024px){

.navbar{
    padding:0 20px;
}

.logo img{
    width:60px;
    height:60px;
}

nav ul{
    gap:15px;
    margin-right:0;
}

nav ul li a{
    font-size:18px;
}

.hero-content{
    width:90%;
}

.hero-content h1{
    font-size:42px;
}

.hero-content p{
    font-size:20px;
}

.story,
.founder-card,
.contact{
    flex-direction:column;
}

.story-text,
.story-image,
.founder-image,
.founder-info,
.contact-text,
.contact-form{
    width:100%;
}

.cards{
    flex-direction:column;
}

.card{
    width:100%;
}

.team-card,
.feature-card,
.artist-card{
    width:90%;
}
}


@media (min-width:768px) and (max-width:1024px){

.artist-card img{
    width:220px;
    height:220px;
    object-fit:cover;
    object-position:top;
}

.artist-card{
    width:220px;
}
}




/* ==========================
   LOCATION MAP
========================== */

.location-map{
    padding:70px 10%;
    background:#fff8f2;
    text-align:center;
}

.location-map h2{
    font-size:42px;
    color:#c38c44;
    margin-bottom:35px;
    animation:fadeDown 1s ease;
}

.location-map p{
    font-size:18px;
    color:#555;
    margin-bottom:25px;
}

.location-map iframe{
    width:100%;
    height:420px;
    border:none;
    border-radius:20px;
    box-shadow:0 15px 35px rgba(0,0,0,.18);
    transition:.4s;
}

.location-map iframe:hover{
    transform:scale(1.02);
    box-shadow:0 20px 45px rgba(195,140,68,.35);
}

/* Mobile */

@media(max-width:900px){

    .location-map{
        padding:60px 5%;
    }

    .location-map h2{
        font-size:34px;
    }

    .location-map iframe{
        height:300px;
    }
}