:root {
--bg-dark: #16181d;
--bg-dark-2: #232730;
--gold: #c89b5b;
--gold-dark: #b27a34;
--gold-light: #e6d3a3;
--text-light: #f5f1e8;
--text-soft: #d9cdb8;
--cream: #f5efe6;
--cream-2: #eadfce;
}

body {
margin: 0;
font-family: 'Segoe UI', sans-serif;
background: #f4efe8;
color: #1f1b17;
}

.container {
width: 90%;
max-width: 1100px;
margin: auto;
position: relative;
}

/* HEADER */
.header {
background: linear-gradient(135deg, var(--bg-dark), var(--bg-dark-2));
border-bottom: 1px solid rgba(200, 155, 91, 0.3);
}

.nav {
display: flex;
justify-content: space-between;
align-items: center;
padding: 18px 0;
position: relative;
}

/* LOGO */
.logo-box {
display: flex;
align-items: center;
gap: 12px;
}

.logo-box img {
width: 45px;
height: auto;
}

.logo-text span {
display: block;
font-weight: bold;
color: var(--gold-light);
letter-spacing: 1px;
}

.logo-text small {
color: var(--text-soft);
font-size: 12px;
}

/* MENU */
.nav-links {
display: flex;
align-items: center;
}

nav a {
margin-left: 25px;
color: var(--text-light);
text-decoration: none;
font-weight: 500;
transition: 0.3s;
}

nav a:hover {
color: var(--gold);
}

.header::after {
content: "";
display: block;
height: 1px;
background: linear-gradient(to right, transparent, var(--gold), transparent);
}

/* HERO */
.hero {
position: relative;
min-height: 90vh;
display: flex;
align-items: center;
background:
linear-gradient(to right, rgba(15, 15, 15, 0.88) 0%, rgba(15, 15, 15, 0.72) 45%, rgba(15, 15, 15, 0.35) 100%),
url('hero.png') center/cover no-repeat;
color: white;
overflow: hidden;
}

.hero-overlay {
position: absolute;
inset: 0;
background: radial-gradient(circle at center, rgba(200, 155, 91, 0.08), transparent 50%);
}

.hero-content {
position: relative;
z-index: 2;
width: 100%;
padding: 80px 0;
}

.hero-text {
max-width: 560px;
}

.hero-brand {
font-size: 16px;
letter-spacing: 3px;
text-transform: uppercase;
color: var(--gold);
margin-bottom: 6px;
font-weight: 600;
}

.hero-subbrand {
font-size: 18px;
color: var(--text-soft);
margin-bottom: 24px;
font-family: Georgia, serif;
}

.hero h1 {
font-size: 32px;
line-height: 1.3;
margin: 0 0 15px;
font-family: Georgia, serif;
font-weight: 600;
color: #fffaf2;
}

.hero-description {
font-size: 20px;
line-height: 1.6;
color: #e7dccd;
margin-bottom: 30px;
max-width: 500px;
}

.hero .btn {
display: inline-block;
margin-top: 0;
padding: 16px 34px;
background: linear-gradient(135deg, #d2a45f, var(--gold-dark));
color: white;
border-radius: 999px;
text-decoration: none;
font-weight: 700;
font-size: 15px;
box-shadow: 0 10px 25px rgba(178, 122, 52, 0.28);
transition: all 0.3s ease;
}

.hero .btn:hover {
transform: translateY(-3px);
box-shadow: 0 14px 30px rgba(178, 122, 52, 0.35);
}

.hero-features {
display: flex;
flex-direction: column;
gap: 12px;
margin-top: 34px;
color: #f2e7d7;
font-size: 17px;
}

.hero-features span {
display: block;
}
@media (max-width: 900px) {
  .hero h1 {
    font-size: 30px;
  }
}

@media (max-width: 768px) {
  .hero h1 {
    font-size: 26px;
  }
}
/* SECTIONS */
.section {
padding: 70px 0;
}

.light {
background: #efe6d8;
border-radius: 20px;
}

/* ABOUT */
.about-section {
padding: 90px 20px;
background: linear-gradient(180deg, #f5efe6, #eadfce);
}

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

.about-image img {
width: 100%;
border-radius: 25px;
object-fit: cover;
box-shadow: 0 20px 40px rgba(0,0,0,0.15);
}

.about-text h2 {
font-size: 30px;
margin-bottom: 10px;
color: #2c2118;
}

.about-text h3 {
color: #c89b5b;
font-size: bold;
margin-bottom: 15px;
}

.about-text p {
color: #4a3a2c;
line-height: 1.6;
margin-bottom: 15px;
}

/* Mobile */
@media (max-width: 768px) {
.about-grid {
grid-template-columns: 1fr;
text-align: center;
}
}


/* SERVICES SECTION */
#services {
scroll-margin-top: 90px;
}

.services-section {
position: relative;
margin-top: 90px;
overflow: hidden;
padding: 90px 20px;
background: linear-gradient(135deg, var(--bg-dark), var(--bg-dark-2));
color: white;
z-index: 1;
border-radius: 0;
}
.services-section .container {
position: relative;
z-index: 2;
text-align: center;
}

.services-section h2 {
font-size: 32px;
margin-bottom: 10px;
color: var(--gold-light);
}

.services-section p {
color: var(--text-soft);
}

/* CARDS */
.cards {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 30px;
max-width: 900px;
margin: 40px auto 0;
}

.card {
min-height: 180px;
border-radius: 22px;
position: relative;
overflow: hidden;
background: linear-gradient(180deg, #232730, #1b1f26);
border: 1px solid rgba(200, 155, 91, 0.35);
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
transition: 0.3s;
display: flex;
justify-content: center;
align-items: center;
}

.card::before {
content: "";
position: absolute;
inset: 0;
background:
radial-gradient(circle at top right, rgba(200, 155, 91, 0.08), transparent 35%);
}

.card:hover {
transform: translateY(-8px);
box-shadow: 0 0 25px rgba(200, 155, 91, 0.22);
}

.card-content {
position: relative;
z-index: 2;
padding: 20px;
}

.card h3 {
color: var(--gold);
margin-bottom: 10px;
}

.card p {
color: var(--text-light);
font-size: 14px;
margin: 0;
line-height: 1.6;
}

/* CONTACT */
#contact {
background: linear-gradient(180deg, #f6f0e7 0%, #eadfce 100%);
padding: 100px 20px;
scroll-margin-top: 90px;
}

#contact .container {
max-width: 900px;
margin: auto;
}

#contact h2 {
text-align: center;
color: #2c2118;
font-size: 28px;
font-weight: 600;
margin-bottom: 35px;
}

#contact form {
background: linear-gradient(180deg, #fffdf9 0%, #fffaf3 100%);
border-radius: 30px;
border: 2px solid rgba(200, 155, 91, 0.35);
box-shadow: 0 20px 50px rgba(0, 0, 0, 0.12);
display: grid;
gap: 18px;
padding: 32px;
}

#contact input,
#contact textarea {
width: 100%;
box-sizing: border-box;
padding: 14px 16px;
border: 2px solid #e8dccb;
border-radius: 18px;
background: #fffefa;
color: #2c2118;
font-size: 14px;
font-family: inherit;
transition: all 0.3s ease;
}

#contact input::placeholder,
#contact textarea::placeholder {
color: #9a8b79;
}

#contact input:focus,
#contact textarea:focus {
outline: none;
border-color: var(--gold);
box-shadow: 0 0 0 5px rgba(200, 155, 91, 0.18);
background: #ffffff;
}

#contact textarea {
min-height: 170px;
resize: vertical;
}

#contact .btn {
width: 100%;
padding: 14px;
margin-top: 8px;
border: none;
border-radius: 999px;
background: linear-gradient(135deg, #d2a45f, var(--gold-dark)) !important;
color: white;
font-size: 14px;
font-weight: 700;
cursor: pointer;
box-shadow: 0 10px 25px rgba(178, 122, 52, 0.28);
transition: all 0.3s ease;
}

#contact .btn:hover {
transform: translateY(-3px);
box-shadow: 0 14px 30px rgba(178, 122, 52, 0.35);
}

#contact .note {
text-align: center;
color: #7b6b5c;
font-size: 14px;
margin-top: 18px;
}
@media (max-width: 768px) {
  #contact form {
    padding: 24px;
    border-radius: 22px;
  }
}
/* FOOTER */
.footer {
background: linear-gradient(135deg, #16181d, #232730);
color: #f5f1e8;
padding: 50px 20px 20px;
}

.footer-content {
display: grid;
grid-template-columns: 1fr 1.4fr;
gap: 80px;
max-width: 1100px;
margin: 0 auto;
align-items: start;
}

.footer-brand {
display: flex;
align-items: center;
gap: 14px;
}

.footer-logo img {
width: 48px;
height: 48px;
object-fit: contain;
}

.footer-text h3,
.footer-info h4,
.footer-hours h4 {
margin: 0 0 10px;
color: #d2a45f;
}


.footer-text p,
.footer-info p,
.footer-hours p {
margin: 8px 0;
line-height: 1.6;
}

.footer-info a {
color: #f5f1e8;
text-decoration: none;
}

.footer-info a:hover {
color: #d2a45f;
}

.footer-bottom {
border-top: 1px solid rgba(210, 164, 95, 0.25);
margin-top: 30px;
padding-top: 18px;
text-align: center;
font-size: 14px;
color: #d8d2c7;
}

.footer-brand {
text-align: left;
}

.footer-info {
text-align: left;
}
@media (max-width: 768px) {
.footer-content {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
gap: 32px;
}

.footer-brand {
justify-content: center;
text-align: center;
}

.footer-info,
.footer-hours {
width: 100%;
text-align: center;
}

.footer-hours p {
max-width: 320px;
margin: 10px auto;
}
}
@media (max-width: 768px) {
  .footer-brand {
    justify-content: center;
  }
}
/* RESPONSIVE */
@media (max-width: 900px) {
.hero {
min-height: auto;
background:
linear-gradient(to bottom, rgba(15, 15, 15, 0.9), rgba(15, 15, 15, 0.78)),
url('hero.png') center/cover no-repeat;
}

.hero-content {
padding: 100px 0 80px;
}

.hero-text {
max-width: 100%;
text-align: center;
margin: 0 auto;
}

.hero h1 {
font-size: 38px;
}

.hero-description {
font-size: 17px;
margin-left: auto;
margin-right: auto;
}

.hero-features {
align-items: center;
font-size: 15px;
}
}

@media (max-width: 768px) {
.nav {
flex-direction: column;
gap: 12px;
padding: 14px 0;
}

.nav-links {
display: grid !important;
grid-template-columns: repeat(3, auto);
justify-content: center;
gap: 10px 20px;
}

.nav-links a {
margin: 0;
font-size: 13px;
text-align: center;
white-space: nowrap;
}

.hero h1 {
font-size: 24px;
}

.cards {
grid-template-columns: 1fr;
}

#about {
padding: 25px;
}
}




.slider {
position: relative;
max-width: 850px;
margin: 50px auto 0;
display: flex;
align-items: center;
justify-content: center;
}

.slides {
position: relative;
width: 100%;
height: 500px;
overflow: hidden;
border-radius: 28px;
box-shadow: 0 20px 45px rgba(0,0,0,0.18);
}

.slide {
position: absolute;
top:0;
left:0;
width: 100%;
height: 100%;
object-fit: cover;
display : none;
opacity: 0;
transition: opacity 0.4s ease;
}

.slide.active {
display: block;
opacity: 1;
}

.slider-btn {
position: absolute;
z-index: 5;
background: rgba(255,255,255,0.9);
border: none;
width: 55px;
height: 55px;
border-radius: 50%;
font-size: 28px;
cursor: pointer;
box-shadow: 0 8px 20px rgba(0,0,0,0.15);
transition: 0.3s;
}

.slider-btn:hover {
transform: scale(1.08);
}

.prev {
left: -25px;
}

.next {
right: -25px;
}


@media (max-width: 768px) {

.slides {
height: 320px;
}

.prev {
left: 5px;
}

.next {
right: 5px;
}
}


.space-section {
padding: 110px 20px;
background: linear-gradient(180deg, #f7f3ed 0%, #efe7dc 100%);
text-align: center;
position: relative;
}

.space-section h2 {
font-size: 42px;
font-family: Georgia, serif;
color: #2c2118;
margin-bottom: 18px;
position: relative;
display: inline-block;
}

.space-section h2::after {
content: "";
display: block;
width: 70px;
height: 3px;
background: #c89b5b;
margin: 14px auto 0;
border-radius: 999px;
}

.lightbox {
  display: none;
}