*{

margin:0;
padding:0;
box-sizing:border-box;

}



body{

font-family:'Poppins',sans-serif;
background:#050505;
color:white;

}


/* ==========================
        NAVBAR
========================== */

.navbar{

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

    width:100%;
    height:80px;

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

    padding:0 8%;

    background:rgba(0,0,0,.90);
    backdrop-filter:blur(12px);
    -webkit-backdrop-filter:blur(12px);

    z-index:1000;

    transition:.4s ease;

}



.logo img{

width:80px;

}



.nav-links{

display:flex;
gap:30px;
list-style:none;

}


.nav-links a{

text-decoration:none;
color:white;
transition:.3s;

}


.nav-links a:hover{

color:#D4AF37;

}




.btn{

background:#D4AF37;
padding:12px 25px;
color:black;
text-decoration:none;

}


/* HERO */


.hero{

height:90vh;

background:

linear-gradient(
rgba(0,0,0,.65),
rgba(0,0,0,.65)
),

url("../images/hero.jpg");


background-size:cover;

background-position:center;


display:flex;

align-items:center;

justify-content:center;

text-align:center;


}



.hero h1{


font-family:'Cinzel';

font-size:60px;

color:#D4AF37;


}



.hero h2{

font-size:40px;

}



.hero p{

margin:20px;

font-size:20px;

}





.gold-btn,
.dark-btn{

padding:15px 30px;

margin:10px;

text-decoration:none;

display:inline-block;

}



.gold-btn{

background:#D4AF37;

color:black;

}



.dark-btn{

border:1px solid #D4AF37;

color:white;

}





/* SERVICES */


.services{

padding:70px 8%;

text-align:center;

}



.services h2{

font-size:40px;

color:#D4AF37;

}



.service-container{

display:grid;

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

gap:25px;

margin-top:40px;

}



.card{


background:#111;

padding:30px;

border:1px solid #D4AF37;

border-radius:15px;


}





footer{

padding:30px;

text-align:center;

background:black;

color:#D4AF37;

}




@media(max-width:768px){


.service-container{

grid-template-columns:1fr;

}



.hero h1{

font-size:35px;

}


.nav-links{

display:none;

}


}

/* ABOUT */


.about{

padding:80px 10%;

background:#111;

text-align:center;

}


.about h2{

font-size:40px;

color:#D4AF37;

margin-bottom:30px;

font-family:'Cinzel';

}



.about p{

max-width:900px;

margin:15px auto;

line-height:1.8;

color:#ddd;

}





/* WHY SECTION */


.why{

padding:80px 8%;

text-align:center;

}



.why h2{

font-size:40px;

color:#D4AF37;

font-family:'Cinzel';

}



.why-container{


display:grid;

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

gap:25px;

margin-top:40px;


}



.why-card{


background:#111;

padding:30px;


border:1px solid #D4AF37;

border-radius:15px;


transition:.4s;


}



.why-card:hover{


transform:translateY(-10px);


}



.why-card h3{

color:#D4AF37;

margin-bottom:15px;

}



.why-card p{

color:#ddd;

}




@media(max-width:768px){


.why-container{

grid-template-columns:1fr;

}


}

/* ABOUT TEDDY STUDIOS */


.about-section{

display:flex;

align-items:center;

gap:60px;

padding:100px 8%;

background:#050505;


}




.about-image{

flex:1;

position:relative;

text-align:center;

}



.about-image img{


width:300px;

filter:drop-shadow(0 0 30px #D4AF37);


}




.experience-box{


position:absolute;

bottom:20px;

right:20px;


background:#D4AF37;

color:black;

padding:20px 30px;


border-radius:10px;


}



.experience-box h3{

font-size:35px;

}



.experience-box p{

font-weight:bold;

}




.about-text{


flex:1;

}



.about-text h2{


font-family:'Cinzel';

font-size:45px;

margin-bottom:20px;


}



.about-text h2 span{


color:#D4AF37;


}



.about-text h3{


color:#D4AF37;

font-size:22px;

margin-bottom:25px;


}




.about-text p{


color:#ddd;

line-height:1.9;

margin-bottom:15px;


}




.about-text strong{


color:#D4AF37;


}




.about-text .gold-btn{


margin-top:20px;

display:inline-block;


}





@media(max-width:768px){


.about-section{


flex-direction:column;


text-align:center;


}



.about-image img{

width:220px;

}


.about-text h2{

font-size:35px;

}


}

/* SERVICES SECTION */


.services-section{


padding:100px 8%;

background:#111;

text-align:center;


}



.services-section h2{


font-family:'Cinzel';

font-size:45px;


}



.services-section h2 span{


color:#D4AF37;


}




.section-intro{


color:#ccc;

max-width:700px;

margin:20px auto 50px;

line-height:1.7;


}




.services-grid{


display:grid;

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

gap:30px;


}




.service-card{


background:#050505;


padding:40px 25px;


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


border-radius:20px;


transition:.4s;


position:relative;


overflow:hidden;


}



.service-card::before{


content:"";

position:absolute;

height:3px;

width:0;

background:#D4AF37;

top:0;

left:0;

transition:.4s;


}




.service-card:hover::before{


width:100%;


}



.service-card:hover{


transform:translateY(-12px);


box-shadow:0 10px 30px rgba(212,175,55,.2);


}




.icon{


font-size:45px;

margin-bottom:20px;


}




.service-card h3{


color:#D4AF37;

font-size:25px;

margin-bottom:15px;


}



.service-card p{


color:#ddd;

line-height:1.8;


}




@media(max-width:768px){


.services-grid{


grid-template-columns:1fr;


}


}

/* PORTFOLIO */


.portfolio-section{


padding:100px 8%;

background:#050505;

text-align:center;


}



.portfolio-section h2{


font-family:'Cinzel';

font-size:45px;


}



.portfolio-section h2 span{


color:#D4AF37;


}



.portfolio-filter{


margin:40px 0;


}



.portfolio-filter button{


background:transparent;

border:1px solid #D4AF37;

color:white;

padding:12px 25px;

margin:5px;

cursor:pointer;

border-radius:20px;

transition:.3s;


}




.portfolio-filter button:hover{


background:#D4AF37;

color:black;


}





.gallery{


display:grid;

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

gap:20px;


}





.gallery-item{


position:relative;

overflow:hidden;

border-radius:15px;


}



.gallery-item img{


width:100%;

height:300px;

object-fit:cover;

transition:.5s;


}




.gallery-item:hover img{


transform:scale(1.1);


}




.overlay-text{


position:absolute;

bottom:0;

left:0;

width:100%;

padding:20px;


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


}



.overlay-text h3{


color:#D4AF37;

}




@media(max-width:768px){


.gallery{


grid-template-columns:1fr;


}


}

/* VIDEO SHOWCASE */


.video-section{


padding:100px 8%;

background:#111;

text-align:center;


}



.video-section h2{


font-family:'Cinzel';

font-size:45px;


}



.video-section h2 span{


color:#D4AF37;


}



.video-grid{


display:grid;

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

gap:30px;

margin-top:50px;


}



.video-card{


background:#050505;

padding:20px;

border:1px solid #D4AF37;

border-radius:15px;


}



.video-card iframe{


width:100%;

height:250px;

border-radius:10px;


}



.video-card h3{


color:#D4AF37;

margin-top:15px;


}



@media(max-width:768px){


.video-grid{


grid-template-columns:1fr;


}


}

/* YOUTUBE BUTTON */


.youtube-btn{

margin-top:40px;

}



.youtube-btn a{


display:inline-block;

background:#D4AF37;

color:black;

padding:15px 35px;

border-radius:30px;

text-decoration:none;

font-weight:600;

transition:.3s;


}



.youtube-btn a:hover{


background:white;

transform:scale(1.05);


}

/* TRAINING SECTION */


.training-section{

padding:100px 8%;

background:#050505;

text-align:center;

}



.training-section h2{

font-family:'Cinzel';

font-size:45px;

}



.training-section h2 span{

color:#D4AF37;

}



.training-grid{


display:grid;

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

gap:30px;

margin-top:50px;


}



.training-card{


background:#111;

padding:35px 25px;

border-radius:20px;

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

transition:.4s;


}



.training-card:hover{


transform:translateY(-10px);

box-shadow:0 10px 30px rgba(212,175,55,.2);


}



.training-icon{


font-size:45px;

margin-bottom:20px;


}



.training-card h3{


color:#D4AF37;

font-size:24px;

margin-bottom:15px;


}



.training-card p{


color:#ddd;

line-height:1.8;


}



.enroll-btn{


margin-top:50px;

display:inline-block;


}



@media(max-width:768px){


.training-grid{


grid-template-columns:1fr;


}


}

/* WHATSAPP FLOATING BUTTON */


.whatsapp-btn{


position:fixed;

right:25px;

bottom:25px;


width:60px;

height:60px;


background:#25D366;


color:white;


border-radius:50%;


display:flex;

align-items:center;

justify-content:center;


font-size:30px;


text-decoration:none;


z-index:999;


box-shadow:0 5px 20px rgba(0,0,0,.4);


transition:.3s;


}



.whatsapp-btn:hover{


transform:scale(1.1);


}

/* CONTACT SECTION */


.contact-section{


padding:100px 8%;

background:#111;

text-align:center;


}



.contact-section h2{


font-family:'Cinzel';

font-size:45px;


}



.contact-section h2 span{


color:#D4AF37;


}



.contact-container{


display:grid;

grid-template-columns:1fr 1fr;

gap:40px;

margin-top:50px;


}




.contact-info,
.contact-form-box{


background:#050505;

padding:40px;

border-radius:20px;

border:1px solid #D4AF37;


}



.contact-info h3,
.contact-form-box h3{


color:#D4AF37;

font-size:28px;

margin-bottom:20px;


}



.contact-info p{


color:#ddd;

margin:15px;


}




.social-links a{


color:white;

text-decoration:none;

margin:8px;


}



.social-links a:hover{


color:#D4AF37;


}




.map{


margin-top:50px;


}



.map iframe{


width:100%;

height:350px;

border:0;

border-radius:15px;


}



@media(max-width:768px){


.contact-container{


grid-template-columns:1fr;


}


}

/* HAMBURGER */


.hamburger{

display:block;
font-size:30px;
color:#d4af37;
cursor:pointer;
margin-left:15px;

}


/* Hide hamburger on desktop */
.hamburger {
    display: none;
}

@media(max-width:768px){


.hamburger{

display:block;

}



.nav-links{

position:fixed;

top:0;
right:-100%;

width:270px;
height:100vh;

background:#000;

display:flex;
flex-direction:column;

padding:100px 30px;

gap:25px;

transition:.35s ease;

}

.nav-links.active{

right:0;

}

html{

scroll-behavior:smooth;

}
}



::selection{

background:#D4AF37;

color:black;

}



img{

max-width:100%;

}


/* TESTIMONIALS */


.testimonials-section{


padding:100px 8%;

background:#050505;

text-align:center;


}



.testimonials-section h2{


font-family:'Cinzel';

font-size:45px;


}



.testimonials-section h2 span{


color:#D4AF37;


}




.testimonial-grid{


display:grid;

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

gap:30px;

margin-top:50px;


}




.testimonial-card{


background:#111;

padding:35px;


border-radius:20px;

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


transition:.4s;


}



.testimonial-card:hover{


transform:translateY(-10px);


box-shadow:0 10px 30px rgba(212,175,55,.2);


}




.stars{


color:#D4AF37;

font-size:25px;

margin-bottom:20px;


}



.testimonial-card p{


color:#ddd;

line-height:1.8;


}



.testimonial-card h3{


margin-top:20px;

color:#D4AF37;


}




@media(max-width:768px){


.testimonial-grid{


grid-template-columns:1fr;


}


}

/* BLOG SECTION */


.blog-section{


padding:100px 8%;

background:#111;

text-align:center;


}



.blog-section h2{


font-family:'Cinzel';

font-size:45px;


}



.blog-section h2 span{


color:#D4AF37;


}




.blog-grid{


display:grid;

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

gap:30px;

margin-top:50px;


}




.blog-card{


background:#050505;

border-radius:20px;

overflow:hidden;

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


transition:.4s;


}



.blog-card:hover{


transform:translateY(-10px);


}



.blog-card img{


width:100%;

height:230px;

object-fit:cover;


}




.blog-content{


padding:25px;


}



.blog-content h3{


color:#D4AF37;

margin-bottom:15px;


}



.blog-content p{


color:#ddd;

line-height:1.7;


}



.blog-content a{


display:inline-block;

margin-top:20px;

color:#D4AF37;

text-decoration:none;


}




@media(max-width:768px){


.blog-grid{


grid-template-columns:1fr;


}


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

.footer{

    background:#000;
    border-top:3px solid #D4AF37;
    padding:70px 8% 25px;
    color:#fff;

}


.footer-container{

    display:grid;
    grid-template-columns:2fr 1fr 1fr 1fr;
    gap:50px;

}


/* LOGO */

.footer-logo img{

    width:130px;
    margin-bottom:20px;

}

.footer-logo p{

    color:#bbb;
    line-height:1.8;
    max-width:320px;

}


/* TITLES */

.footer h3{

    color:#D4AF37;
    margin-bottom:20px;
    font-size:22px;
    font-family:'Cinzel',serif;

}


/* LINKS */

.footer-links,
.footer-contact,
.footer-social{

    display:flex;
    flex-direction:column;

}


.footer-links a,
.footer-social a{

    color:#ddd;
    text-decoration:none;
    margin-bottom:12px;
    transition:.3s;

}

.footer-links a:hover,
.footer-social a:hover{

    color:#D4AF37;
    padding-left:8px;

}


/* CONTACT */

.footer-contact p{

    color:#ddd;
    margin-bottom:12px;

}


/* DIVIDER */

.footer hr{

    margin:50px 0 25px;
    border:none;
    height:1px;
    background:rgba(212,175,55,.3);

}


/* COPYRIGHT */

.copyright{

    text-align:center;
    color:#999;
    font-size:15px;

}


/* RESPONSIVE */

@media(max-width:992px){

.footer-container{

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

}

}


@media(max-width:768px){

.footer{

text-align:center;

}

.footer-container{

grid-template-columns:1fr;
gap:40px;

}

.footer-logo p{

margin:auto;

}

.footer-links,
.footer-contact,
.footer-social{

align-items:center;

}

.footer-links a:hover,
.footer-social a:hover{

padding-left:0;

}

}

/* ==========================
        SOCIAL LINKS
========================== */

.footer-social a{

    display:flex;
    align-items:center;
    gap:12px;

    color:#ddd;
    text-decoration:none;

    margin-bottom:15px;

    transition:.35s;

}

.footer-social a i{

    width:42px;
    height:42px;

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

    background:#111;
    border:1px solid rgba(212,175,55,.3);
    border-radius:50%;

    color:#D4AF37;

    transition:.35s;

}

.footer-social a:hover{

    color:#D4AF37;
    transform:translateX(8px);

}

.footer-social a:hover i{

    background:#D4AF37;
    color:#000;
    transform:rotate(360deg);

}

/* ==========================
        TOP BAR
========================== */

.top-bar{

    background:#D4AF37;
    color:#000;

    height:40px;

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

    padding:0 8%;

    font-size:14px;
    font-weight:600;

}

/* Adjust navbar position */

.navbar{

    top:40px;

}

/* Adjust body spacing */

body{

    padding-top:120px;

}

@media(max-width:768px){

.top-bar{

    flex-direction:column;
    justify-content:center;
    height:auto;
    padding:8px 15px;
    text-align:center;
    gap:5px;

}

.navbar{

    top:58px;

}

}

/* ==========================
        CALL BUTTON
========================== */

.call-btn{

    position:fixed;

    right:25px;
    bottom:100px;

    width:60px;
    height:60px;

    background:#D4AF37;

    color:#000;

    border-radius:50%;

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

    text-decoration:none;

    font-size:24px;

    z-index:999;

    box-shadow:0 5px 20px rgba(0,0,0,.4);

    transition:.3s;

}

.call-btn:hover{

    transform:scale(1.1);

    background:#fff;

}

.whatsapp-btn{

    position:fixed;

    right:25px;
    bottom:25px;

    width:60px;
    height:60px;

    background:#25D366;

    color:#fff;

    border-radius:50%;

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

    font-size:30px;

    text-decoration:none;

    z-index:999;

    box-shadow:0 5px 20px rgba(0,0,0,.4);

    transition:.3s;

}

.whatsapp-btn:hover{

    transform:scale(1.1);

}

/* Overlay */

.menu-overlay{

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

width:100%;
height:100%;

background:rgba(0,0,0,.65);

opacity:0;
visibility:hidden;

transition:.35s;

z-index:998;

}

.menu-overlay.active{

opacity:1;
visibility:visible;

}