:root{

--primary:#780000;
--secondary:#d4af37;
--dark:#111;
--white:#fff;
--gray:#f4f4f4;

}

*{
margin:0;
padding:0;
box-sizing:border-box;
}

body{

font-family:'Poppins',sans-serif;
overflow-x:hidden;

}

h1,h2,h3,h4,h5{

font-family:'Cinzel',serif;

}

.hero{

width:100%;
height:750px;
position:relative;

}

.heroSwiper{

width:100%;
height:100%;

}

.slide{

height:750px;
background-size:cover;
background-position:center;
position:relative;

}

.slide1{

background:url("../images/slider/1.jpg") center center/cover;

}

.slide2{

background:url("../images/slider/2.jpg") center center/cover;

}

.slide3{

background:url("../images/slider/3.jpg") center center/cover;

}

.overlay{

position:absolute;
inset:0;
background:rgba(0,0,0,.55);

}

.hero-content{

position:absolute;
top:50%;
transform:translateY(-50%);
max-width:700px;
color:#fff;
z-index:2;

}

.hero-content h5{

letter-spacing:4px;
color:var(--secondary);

}

.hero-content h1{

font-size:65px;
font-weight:700;

}

.hero-content p{

font-size:20px;
margin:25px 0;

}

.btn-gold{

background:var(--secondary);
color:#111;
padding:15px 40px;
font-weight:600;
transition:.4s;

}

.btn-gold:hover{

background:#fff;
transform:translateY(-5px);

}

.swiper-button-next,
.swiper-button-prev{

color:#fff;

}

.swiper-pagination-bullet{

background:#fff;

}

.swiper-pagination-bullet-active{

background:var(--secondary);

}

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

.top-bar{

background:#650014;
color:#fff;
font-size:14px;
padding:10px 0;

}

.top-bar .container{

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

}

.top-left,
.top-right{

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

}

.top-bar a{

color:#fff;
text-decoration:none;
transition:.3s;

}

.top-bar a:hover{

color:#d4af37;

}

.top-bar i{

margin-right:6px;
color:#d4af37;

}

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

.navbar{

position:absolute;
top:45px;
left:0;
width:100%;
z-index:999;
padding:18px 0;
background:rgba(0,0,0,.60);
backdrop-filter:blur(8px);

}

.navbar-brand img{

height:75px;

}

.navbar-nav{

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

}

.navbar-nav li{

list-style:none;

}

.navbar-nav a{

color:#fff;
font-weight:500;
text-decoration:none;
font-size:17px;
transition:.4s;

}

.navbar-nav a:hover{

color:#d4af37;

}

.call-btn{

background:#d4af37;
padding:14px 30px;
border-radius:50px;
color:#111;
font-weight:600;
text-decoration:none;
transition:.4s;

}

.call-btn:hover{

background:#fff;
transform:translateY(-3px);

}

.call-btn i{

margin-right:8px;

}

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

.menu-mobile{

display:none;
background:none;
border:none;
font-size:38px;
color:#fff;

}

/*==========================
OFFCANVAS
==========================*/

.offcanvas{

background:#000;
width:320px;

}

.mobile-logo{

height:75px;

}

.offcanvas-body{

display:flex;
flex-direction:column;

}

.offcanvas-body ul{

padding:0;
margin:20px 0;

}

.offcanvas-body li{

list-style:none;

}

.offcanvas-body a{

display:block;
padding:15px 0;
text-decoration:none;
color:#fff;
font-size:19px;
transition:.4s;

}

.offcanvas-body a:hover{

padding-left:10px;
color:#d4af37;

}

.mobile-call{

margin-top:30px;
background:#d4af37;
color:#111!important;
text-align:center;
padding:16px;
border-radius:50px;
font-weight:600;

}

.section-padding{

padding:110px 0;

}

.about-section{

background:#fafafa;

}

.section-subtitle{

display:inline-block;
color:#d4af37;
font-weight:600;
letter-spacing:3px;
margin-bottom:15px;
text-transform:uppercase;

}

.section-title{

font-size:48px;
font-weight:700;
margin-bottom:25px;
color:#111;

}

.about-text{

font-size:17px;
line-height:1.9;
color:#555;
margin-bottom:35px;

}

/***************
COLLAGE
****************/

.about-collage{

position:relative;
height:620px;

}

.about-collage img{

width:100%;
height:100%;
object-fit:cover;
border-radius:18px;
box-shadow:0 20px 50px rgba(0,0,0,.20);

}

.img-big{

width:78%;
height:500px;

}

.img-small{

position:absolute;
overflow:hidden;

}

.one{

width:230px;
height:230px;
right:10px;
top:50px;
border:8px solid #fff;
border-radius:18px;

}

.two{

width:260px;
height:180px;
left:120px;
bottom:0;
border:8px solid #fff;
border-radius:18px;

}

/***************

FEATURES

****************/

.about-features{

display:grid;

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

gap: 18px;

margin-top:25px;

margin-bottom: 30px;
}

.about-features div{

font-weight:500;
font-size:17px;

}

.about-features i{

color:#d4af37;
margin-right:10px;
font-size:18px;

}

/*==========================
SERVICES
==========================*/

.services-section{

background-color:#11111178;
color:#fff;
background-image: url(../images/bg.jpg);
background-blend-mode: soft-light;

}

.section-description{

max-width:700px;
margin:auto;
color:#bbb;
line-height:1.8;

}

.service-card{

background:#1a1a1a;
border-radius:18px;
overflow:hidden;
transition:.45s;
height:100%;
box-shadow:0 15px 35px rgba(0,0,0,.30);

}

.service-card:hover{

transform:translateY(-12px);

}

.service-image{

height:260px;
overflow:hidden;

}

.service-image img{

width:100%;
height:100%;
object-fit:cover;
transition:.6s;

}

.service-card:hover img{

transform:scale(1.12);

}

.service-content{

padding:35px;

}

.service-icon{

width:70px;
height:70px;
background:#d4af37;
border-radius:50%;
display:flex;
justify-content:center;
align-items:center;
font-size:28px;
color:#111;
margin-top:-70px;
margin-bottom:25px;
position:relative;
z-index:10;
box-shadow:0 10px 25px rgba(0,0,0,.35);

}

.service-content h3{

font-size:28px;
margin-bottom:18px;
color:#fff;

}

.service-content p{

color:#bbb;
line-height:1.8;
margin-bottom:25px;

}

.service-content a{

text-decoration:none;
color:#d4af37;
font-weight:600;
transition:.3s;

}

.service-content a:hover{

letter-spacing:1px;

}

.service-card:hover{

border-bottom:4px solid #d4af37;

}   

.gallery-section{

background:#f8f8f8;

}

.gallery-grid{

display:grid;

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

grid-auto-rows:250px;

gap:20px;

}

.gallery-item{

position:relative;

overflow:hidden;

border-radius:20px;

cursor:pointer;

}

.gallery-item img{

width:100%;

height:100%;

object-fit:cover;

transition:.7s;

}

.gallery-overlay{

position:absolute;

inset:0;

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

display:flex;

justify-content:center;

align-items:center;

opacity:0;

transition:.5s;

}

.gallery-overlay i{

font-size:45px;

color:#fff;

transform:scale(.6);

transition:.4s;

}

.gallery-item:hover img{

transform:scale(1.15);

}

.gallery-item:hover .gallery-overlay{

opacity:1;

}

.gallery-item:hover i{

transform:scale(1);

}

.large{

grid-column:span 2;

grid-row:span 2;

}

.tall{

grid-row:span 2;

}

.wide{

grid-column:span 2;

}

.coverage-section{

background:#111;

color:#fff;

}

.coverage-grid{

display:grid;

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

gap:20px;

margin-top:20px;

}

.coverage-grid div{

background:#1f1f1f;

padding:20px;

border-radius:15px;

transition:.4s;

border-left:4px solid #d4af37;

font-weight:600;

}

.coverage-grid div:hover{

background:#d4af37;

color:#111;

transform:translateY(-6px);

}

.experience-box{

margin-top:35px;

background:#d4af37;

padding:25px;

border-radius:18px;

display:inline-flex;

align-items:center;

gap:20px;

color:#111;

}

.experience-box h3{

font-size:70px;

margin:0;

font-family:'Cinzel', serif;

}
/*==========================
TESTIMONIALS
==========================*/

.testimonials-section{

background:#101010;
color:#fff;

}

.testimonial-card{

background:rgba(255,255,255,.05);

border:1px solid rgba(255,255,255,.08);

backdrop-filter:blur(12px);

padding:40px;

border-radius:20px;

height:100%;

transition:.4s;

}

.testimonial-card:hover{

transform:translateY(-8px);

}

.quote{

font-size:60px;

color:#d4af37;

margin-bottom:20px;

}

.testimonial-card p{

line-height:1.9;

color:#ddd;

margin-bottom:25px;

}

.stars{

font-size:22px;

color:#d4af37;

margin-bottom:30px;

}

.client{

display:flex;

align-items:center;

gap:18px;

}

.client img{

width:70px;

height:70px;

border-radius:50%;

object-fit:cover;

border:3px solid #d4af37;

}

.client h5{

margin:0;

}

.client span{

color:#bbb;

font-size:14px;

}

/*==========================
CONTACT
==========================*/

.contact-section{

background:#f7f7f7;

}

.contact-info{

margin-top:40px;

display:flex;

flex-direction:column;

gap:25px;

}

.contact-info div{

display:flex;

align-items:center;

gap:18px;

font-size:17px;

}

.contact-info i{

width:55px;

height:55px;

background:#d4af37;

display:flex;

justify-content:center;

align-items:center;

border-radius:50%;

font-size:20px;

color:#111;

}

.contact-form{

background:#fff;

padding:45px;

border-radius:20px;

box-shadow:0 15px 45px rgba(0,0,0,.12);

}

.contact-form input,

.contact-form textarea{

width:100%;

padding:16px 20px;

border:1px solid #ddd;

border-radius:12px;

margin-bottom:20px;

outline:none;

transition:.3s;

}

.contact-form input:focus,

.contact-form textarea:focus{

border-color:#d4af37;

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

}

.contact-form textarea{

resize:none;

}

.contact-form button{

border:none;

}

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

.footer{

background:#080808;

color:#fff;

}

/******** CTA ********/

.footer-cta{

background:linear-gradient(135deg,#7a0019,#d4af37);

padding:70px 0;

}

.footer-cta h2{

font-size:42px;

margin-bottom:15px;

color:#fff;

}

.footer-cta p{

font-size:18px;

color:#fff;

opacity:.95;

}

/******** MAIN ********/

.footer-main{

padding:90px 0 60px;

}

.footer-logo{

height:95px;

margin-bottom:25px;

}

.footer-main p{

line-height:1.9;

color:#bbb;

}

.footer-main h4{

margin-bottom:25px;

color:#d4af37;

font-family:'Cinzel', serif;

}

.footer-main ul{

list-style:none;

padding:0;

margin:0;

}

.footer-main li{

margin-bottom:14px;

color:#bbb;

}

.footer-main a{

color:#bbb;

text-decoration:none;

transition:.35s;

}

.footer-main a:hover{

color:#d4af37;

padding-left:8px;

}

.footer-contact li{

display:flex;

align-items:flex-start;

gap:12px;

}

.footer-contact i{

color:#d4af37;

font-size:18px;

margin-top:3px;

}

/******** SOCIAL ********/

.footer-social{

display:flex;

gap:15px;

margin-top:30px;

}

.footer-social a{

width:45px;

height:45px;

border:1px solid rgba(255,255,255,.15);

display:flex;

justify-content:center;

align-items:center;

border-radius:50%;

font-size:18px;

transition:.35s;

}

.footer-social a:hover{

background:#d4af37;

color:#111;

transform:translateY(-6px);

}

/******** BOTTOM ********/

.footer-bottom{

border-top:1px solid rgba(255,255,255,.08);

padding:22px 0;

}

.footer-bottom-content{

display:flex;

justify-content:space-between;

align-items:center;

flex-wrap:wrap;

gap:15px;

}

.footer-bottom p{

margin:0;

font-size:15px;

color:#999;

}


*==============================
MUSIC BUTTON
==============================*/

.music-btn{

    position:fixed;

    right:0;

    top:50%;

    transform:translateY(-50%);

    width:60px;

    height:60px;

    border:none;

    border-radius:15px 0 0 15px;

    background:var(--primary);

    color:#fff;

    cursor:pointer;

    z-index:99999;

    box-shadow:var(--primary);

    transition:.35s;

}

.music-btn:hover{

    width:68px;

}

.music-btn i{

    font-size:30px;

}

.music-btn.playing{

    animation:pulseMusic 2s infinite;

}

@keyframes pulseMusic{

    0%{

        box-shadow:0 0 0 0 rgba(219,121,0,.6);

    }

    70%{

        box-shadow:0 0 0 18px rgba(219,121,0,0);

    }

    100%{

        box-shadow:0 0 0 0 rgba(219,121,0,0);

    }

}


.music-consent{

    position:fixed;

    inset:0;

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

    backdrop-filter:blur(8px);

    display:flex;

    justify-content:center;

    align-items:center;

    z-index:999999;

}

.music-box{

    width:90%;
    max-width:520px;

    background:#111;

    border-radius:20px;

    padding:40px;

    text-align:center;

    color:#fff;

    border:var(--gold-border);

    box-shadow:var(--gold-shadow);

}

.music-box img{

    width:140px;

    margin-bottom:25px;

}

.music-box h2{

    color:#db7900;

    margin-bottom:20px;

}

.music-box p{

    color:#ddd;

    line-height:1.8;

    margin-bottom:35px;

}

.music-buttons{

    display:flex;

    gap:15px;

    justify-content:center;

    flex-wrap:wrap;

}

.btn-dark{

    background:#222;

    color:#fff;

    border:none;

    padding:15px 30px;

    border-radius:50px;

    transition:.3s;

}

.btn-dark:hover{

    background:#333;

}