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

body{
    font-family: Poppins, sans-serif;
    background: #111;
    color: white;
}

/* Header */

header{

position:fixed;

top:0;

width:100%;

display:flex;

justify-content:space-between;

align-items:center;

padding:15px 60px;

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

backdrop-filter:blur(10px);

z-index:1000;

}

.logo img{
width:auto;
height:50px;

}

nav ul{

display:flex;

list-style:none;

}

nav li{

margin-left:30px;

}

nav a{

color:white;

text-decoration:none;

transition:.3s;

}

nav a:hover{

color:#C9A227;

}

.book-btn{

padding:12px 22px;

background:#C9A227;

border-radius:30px;

color:black;

font-weight:bold;

}

.book-btn:hover{

background:white;

}

/* Hero */

.hero{

height:100vh;

background:

linear-gradient(rgba(0,0,0,.5),rgba(0,0,0,.6)),

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

background-size:cover;

background-position:center;

display:flex;

justify-content:center;

align-items:center;

text-align:center;

}

.overlay h1{

font-size:70px;

font-family:"Playfair Display",serif;

margin-bottom:15px;

}

.overlay h2{

font-size:35px;

font-weight:300;

margin-bottom:20px;

}

.overlay p{

font-size:20px;

margin-bottom:35px;

}

.button{

padding:15px 40px;

background:#C9A227;

color:black;

text-decoration:none;

font-weight:bold;

border-radius:40px;

transition:.3s;

}

.button:hover{

background:white;

}

.contact-page {
    background: #000;
    padding: 140px 60px 60px;
    min-height: 100vh;
}

.contact-card {
    max-width: 700px;
    margin: 0 auto;
    background: rgba(201,162,39,0.08);
    border: 2px solid #C9A227;
    border-radius: 25px;
    padding: 45px 40px;
    text-align: center;
}

.contact-card h1 {
    font-size: 48px;
    margin-bottom: 20px;
}

.contact-card p {
    color: #ddd;
    line-height: 1.8;
    margin-bottom: 25px;
}

.call-link {
    display: inline-block;
    padding: 18px 35px;
    background: #C9A227;
    color: black;
    border-radius: 40px;
    font-size: 24px;
    font-weight: bold;
    text-decoration: none;
    margin-bottom: 20px;
}

.contact-note {
    margin-top: 20px;
    color: #ccc;
}

.contact-form input,
.contact-form textarea {
    background: #111;
    color: #C9A227;
    border: 1px solid #C9A227;
    padding: 12px 15px;
    border-radius: 10px;
    width: 100%;
    margin-bottom: 20px;
    font-family: inherit;
}

.contact-form input::placeholder,
.contact-form textarea::placeholder {
    color: #C9A227;
    opacity: 0.7;
}

.contact-form button {
    padding: 15px 40px;
    background: #C9A227;
    color: black;
    border: none;
    border-radius: 40px;
    font-weight: bold;
    cursor: pointer;
    transition: background .3s;
}

.contact-form button:hover {
    background: white;
}

.about-page {
    background: #000;
    padding: 140px 60px 60px;
    min-height: 100vh;
}

.about-hero {
    display: grid;
    gap: 30px;
    grid-template-columns: 2fr 1fr;
    align-items: start;
}

.about-hero-text h1 {
    font-size: 56px;
    margin-bottom: 20px;
}

.about-hero-text p {
    color: #ddd;
    line-height: 1.8;
    max-width: 700px;
    margin-bottom: 25px;
}

.about-hero-card {
    background: rgba(201,162,39,0.08);
    border: 1px solid #C9A227;
    padding: 30px;
    border-radius: 20px;
}

.about-hero-card h2 {
    margin-bottom: 18px;
}

.about-hero-card ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: 14px;
}

.about-hero-card li {
    color: #fff;
    padding-left: 18px;
    position: relative;
}

.about-hero-card li::before {
    content: '•';
    position: absolute;
    left: 0;
    color: #C9A227;
}

.about-story {
    margin-top: 60px;
    max-width: 900px;
}

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

.about-story p {
    color: #ccc;
    line-height: 1.8;
}

.about-highlights {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 20px;
    margin-top: 50px;
}

.highlight-card {
    background: #111;
    border: 1px solid #333;
    border-radius: 20px;
    padding: 30px;
}

.highlight-card h3 {
    color: #C9A227;
    margin-bottom: 16px;
}

.highlight-card p {
    color: #ccc;
    line-height: 1.75;
}

@media (max-width: 900px) {
    .about-hero {
        grid-template-columns: 1fr;
    }
}

.gallery-page {
    background: #000;
    padding: 140px 60px 60px;
    min-height: 100vh;
}

.gallery-grid {
    display: grid;
    gap: 20px;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}

.gallery-grid img {
    width: 100%;
    display: block;
    border: 4px solid #C9A227;
    border-radius: 15px;
}

.gallery-pagination {
    margin-top: 30px;
    display: flex;
    justify-content: center;
    gap: 12px;
}

.gallery-pagination a {
    padding: 10px 20px;
    background: #111;
    color: #fff;
    border: 1px solid #C9A227;
    border-radius: 30px;
    text-decoration: none;
}

.gallery-pagination a.active,
.gallery-pagination a:hover {
    background: #C9A227;
    color: black;
}

.services-page{

padding:150px 60px;

text-align:center;

background:#000;

}


.services-page h1{

font-family:"Playfair Display",serif;

font-size:50px;

margin-bottom:50px;

color:#C9A227;

}


.service-container{

display:flex;

justify-content:center;

gap:30px;

flex-wrap:wrap;

}



.service-card{

background:rgba(201,162,39,0.12);

padding:40px;

width:280px;

border-radius:15px;

transition:.3s;

border:2px solid #C9A227;

}



.service-card:hover{

transform:translateY(-10px);

border-color:#C9A227;

}



.service-card h2{

color:#C9A227;

margin-bottom:20px;

}



.service-card p{

color:#ddd;

line-height:1.6;

}

.work-examples {
    margin-top: 50px;
    text-align: left;
}

.work-examples h2 {
    font-family: "Playfair Display", serif;
    font-size: 42px;
    margin-bottom: 25px;
    color: white;
}

.work-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 20px;
}

.work-grid img {
    width: 100%;
    max-width: 320px;
    height: 260px;
    object-fit: cover;
    border: 4px solid #C9A227;
    border-radius: 20px;
    display: block;
}