* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
:root {
--black: #000000;
--black-60: rgba(0, 0, 0, 0.6);
--orange: #E3572B;
--white: #ffffff;
--white-60: rgba(255, 255, 255, 0.6);
--bg-gray: #F4F4F4;
}
body {
font-family: 'Outfit', sans-serif;
font-size: 18px;
line-height: 1.6;
color: var(--black);
}
h1 em, h2 em {
font-family: 'Playfair Display', serif;
font-style: italic;
font-weight: 400;
}
.container {
max-width: 1280px;
margin: 0 auto;
padding: 0 20px;
}
/* Header & Navigation */
header {
position: absolute;
top: 0;
left: 0;
right: 0;
background: transparent;
z-index: 1000;
transition: all 0.3s ease;
}

header.menu-open {
height:100%;
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
}

nav {
display: flex;
justify-content: space-between;
align-items: center;
padding: 30px 0;
max-width: 1280px;
margin: 0 auto;
}
.logo img {
height: 40px;
}
.nav-links {
display: flex;
list-style: none;
gap:32px;
}
.nav-links a {
text-decoration: none;
color: var(--white);
font-weight: 500;
transition: color 0.3s;
}
.nav-links a:hover {
color: var(--orange);
}
.mobile-menu-btn {
display: none;
background: none;
border: none;
font-size: 28px;
cursor: pointer;
color: var(--white);
padding: 8px;
z-index: 1001;
}
/* Hero Section */
.hero {
position: relative;
height: 100vh;
background: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.4)),
url('../img/hero.jpg');
background-size: cover;
background-position: center;
display: flex;
align-items: center;
color: var(--white);
}
.hero .container {
width: 100%;
max-width: 1280px;
position: relative;
height: 100%;
}
.hero-content {
position: absolute;
bottom: 80px;
left: 20px;
max-width: 600px;
}
.hero-content h1 {
font-size:120px;
font-weight:500;
margin-bottom: 32px;
line-height:0.95;
}
.hero-content h1 em {
font-style: italic;
font-weight: 300;
}
.hero-content p {
font-size:20px;
max-width: 600px;
margin-bottom:40px;
color: rgba(255, 255, 255, 0.8);
}
.cta-button {
display: inline-block;
background: var(--orange);
color: var(--white);
padding: 0px 24px;
border-radius: 30px;
text-decoration: none;
font-weight: 500;
transition: transform 0.3s, box-shadow 0.3s;
height:48px;
line-height:48px;
font-size:16px;
}
.cta-button:hover {
transform: translateY(-2px);
box-shadow: 0 5px 20px rgba(227, 87, 43, 0.4);
}
.btn-outline {
display: inline-block;
padding: 0 24px;
border-radius: 30px;
border: 1px solid var(--orange);
color: var(--orange);
text-decoration: none;
font-weight: 500;
transition: background 0.3s, color 0.3s;
margin-top: 10px;
height:48px;
line-height:48px;
font-size:16px;        
}
.btn-outline:hover {
background: var(--orange);
color: var(--white);
}        
/* Stats Section */
.stats {
background: var(--white);
padding:120px 0;
}
.stats-content {
min-width: 1280px;
max-width: 1280px;
margin: 0 auto;
display: grid;
grid-template-columns: 600px 600px;
gap: 80px;
align-items: center;
}
.stats-text {
grid-column: span 1;
font-size:24px;
color: var(--black-60);
}
.stats-text strong{
color: var(--black);
}        
.stats-numbers {
grid-column: span 1;
display: flex;
gap: 60px;
}
.stat-item{
border-left:1px solid rgba(0,0,0,0.1);
padding:0 0 0 32px;
}
.stat-item h2 {
font-size: 64px;
font-weight: 600;
margin-bottom: 5px;
}
.stat-item p {
color: var(--black-60);
}
/* Interior Section */
.interior-section {
padding: 100px 20px;
background: var(--bg-gray);
}
.interior-content {
max-width: 1280px;
margin: 0 auto;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 60px;
align-items: center;
}
.interior-text h2 {
font-size: 48px;
margin-bottom: 20px;
font-weight: 400;
}
.interior-text h2 em {
font-style: italic;
font-weight: 300;
}
.interior-text p {
color: var(--black-60);
margin-bottom: 20px;
}
.interior-text ul {
list-style: none;
margin: 30px 0;
}
.interior-text ul li {
padding: 0px 0;
padding-left: 25px;
position: relative;
color: var(--black-60);
}
.interior-text ul li:before {
content: "•";
position: absolute;
left: 0;
color: var(--black-60);
}
.interior-image {
border-radius: 24px;
overflow: hidden;
}
.interior-image img {
width: 100%;
height: auto;
display: block;
}
/* Gallery Section */
.gallery-section {
padding: 100px 20px;
background: var(--white);
}
.gallery-section h2 {
text-align: center;
font-size: 48px;
margin-bottom: 20px;
font-weight: 400;
}
.gallery-section h2 em {
font-style: italic;
font-weight: 300;
}
.gallery-section > p {
text-align: center;
color: var(--black-60);
max-width: 768px;
margin: 0 auto 64px;
}
.gallery-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 32px;
max-width: 1280px;
margin: 0 auto;
}
.gallery-item {
position: relative;
overflow: hidden;
border-radius: 16px;
cursor: pointer;
aspect-ratio: 4/3;
background: var(--bg-gray);
}
.gallery-item img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.3s;
}
.gallery-item:hover img {
transform: scale(1.05);
}
/* Lightbox */
.lightbox {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.95);
z-index: 2000;
align-items: center;
justify-content: center;
}
.lightbox.active {
display: flex;
}
.lightbox-content {
position: relative;
max-width: 90%;
max-height: 90%;
}
.lightbox-content img {
max-width: 100%;
max-height: 90vh;
border-radius: 8px;
}
.lightbox-close {
position: absolute;
top: 20px;
right: 20px;
background: var(--white);
border: none;
width: 40px;
height: 40px;
border-radius: 50%;
font-size: 24px;
cursor: pointer;
z-index: 2001;
}
.lightbox-prev, .lightbox-next {
position: absolute;
top: 50%;
transform: translateY(-50%);
background: var(--white);
border: none;
width: 50px;
height: 50px;
border-radius: 50%;
font-size: 24px;
cursor: pointer;
z-index: 2001;
}
.lightbox-prev {
left: 20px;
}
.lightbox-next {
right: 20px;
}
/* Testimonials Section */
.testimonials-section {
padding: 100px 20px;
background: var(--bg-gray);
}
.testimonials-section h2 {
text-align: center;
font-size: 48px;
margin-bottom: 50px;
font-weight: 400;
}
.testimonials-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 30px;
max-width: 1280px;
margin: 0 auto;
}
.testimonial-item {
background: var(--white);
padding:32px;
border-radius:24px;
display: none;
}
.testimonial-item.visible {
display: block;
}
.testimonial-item img{
margin:0 0 24px;
}
.testimonial-item p {
color: var(--black-60);
margin-bottom: 20px;
}
.testimonial-author {
font-weight:500;
color: var(--black);
}
.testimonial-author span{
font-size:16px;
font-weight:400;
opacity:.4;
}
.load-more {
text-align: center;
margin-top: 40px;
}
.load-more button {
background: transparent;
border:1px solid var(--orange);
color: var(--orange);
padding: 0 24px;
border-radius: 30px;
cursor: pointer;
font-family: 'Outfit', sans-serif;
font-weight:500;
font-size:16px;
transition: all 0.3s;
height:48px;
line-height:48px;
}
.load-more button:hover {
background: var(--orange);
color: var(--white);
}
/* About Section */
.about-section {
padding: 100px 20px;
background: var(--white);
}
.about-container {
max-width: 1200px;
margin: 0 auto;
}
.about-container > h2 {
font-size: 48px;
font-weight: 400;
text-align: center;
margin-bottom: 80px;
max-width: 900px;
margin-left: auto;
margin-right: auto;
line-height: 1.3;
}
.about-container > h2 em {
font-style: italic;
font-weight: 300;
}
.about-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 60px;
align-items: center;
margin-bottom: 80px;
}
.about-row:last-child {
margin-bottom: 0;
}
.about-row.reverse {
direction: rtl;
}
.about-row.reverse > * {
direction: ltr;
}
.about-text-block h3 {
font-size: 32px;
font-weight: 400;
margin-bottom: 20px;
line-height: 1.3;
}
.about-text-block p {
color: var(--black-60);
line-height: 1.5;
}
.about-image-block {
border-radius:24px;
overflow: hidden;
}
.about-image-block img {
width: 100%;
height: auto;
display: block;
}
/* Contact Section */
.contact-section {
padding: 100px 20px;
background: var(--black);
color: var(--white);
}
.contact-section h2 {
text-align: center;
font-size: 48px;
margin-bottom: 20px;
font-weight: 400;
}
.contact-section > p {
text-align: center;
color: var(--white-60);
max-width: 600px;
margin: 0 auto 64px;
}
.contact-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 50px;
max-width: 960px;
margin: 0 auto;
}
.contact-item {
position:relative;
padding:0 0 0 64px;
}
.contact-item h3 {
font-size:18px;
font-weight:400;
margin-bottom: 15px;
color: var(--white);
}
.contact-item p, .contact-item a {
color: var(--white-60);
text-decoration:none;
}
.contact-item a:hover {
color: var(--white);
}
.contact-item img {
position:absolute;
left:0;
top:0;
}
/* Footer */
footer {
background: var(--black);
color: rgba(255, 255, 255, 0.4);
text-align: center;
padding: 30px 20px;
border-top: 1px solid rgba(255, 255, 255, 0.1);
font-size:14px;
}
footer a{
color: rgba(255, 255, 255, 0.4);
text-decoration:none;
}
footer a:hover{
color: var(--white);
}



/* ========== RESPONSIVE MEDIA QUERIES ========== */


/* Large Desktop */
@media (min-width: 1320px) {
.hero-content {
left: 0;
bottom: 80px;
}
}


@media (max-width: 1319px) {
.hero-content {
left: 20px;
bottom: 80px;
}
nav {
padding: 30px 20px;
}        
}

/* Desktop to Tablet */
@media (max-width: 1280px) {

.stats-content {
min-width: auto;
max-width: 100%;
grid-template-columns: 1fr 1fr;
padding: 0 20px;
}

.stats-text {
grid-column: span 1;
}

.stats-numbers {
grid-column: span 1;
}
}


/* Tablet Landscape */
@media (max-width: 1024px) {
.hero-content h1 {
font-size: 96px;
}

.interior-text h2,
.gallery-section h2,
.testimonials-section h2,
.about-container > h2,
.contact-section h2 {
font-size: 42px;
}

.about-text-block h3 {
font-size: 28px;
}

.stat-item h2 {
font-size: 56px;
}
}


/* Tablet Portrait */
@media (max-width: 768px) {
body {
font-size: 16px;
}

h2, p {
text-align: left !important;
}

h2 {
line-height: 1.4;
}

.mobile-menu-btn {
display: block;
color: var(--white);
}

.nav-links {
display: none;
position: fixed;
top: 104px;
left: 0;
right: 0;        
flex-direction: column;
padding: 0;
gap: 0;
}

.nav-links.active {
display: flex;
animation: slideDown 0.3s ease-out;
}

.nav-links li {
border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.nav-links li:last-child {
border-bottom: none;
}

.nav-links a {
color: var(--white);
display: block;
padding: 20px 24px;
font-size: 18px;
transition: all 0.3s ease;
}

.nav-links a:hover {
background: rgba(227, 87, 43, 0.1);
color: var(--orange);
padding-left: 32px;
}

.hero {
min-height: 600px;
}

.hero .container {
height: 100%;
}

.hero-content {
bottom: 40px;
left: 20px;
max-width: calc(100% - 40px);
}

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

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

.stats {
padding: 80px 0;
}

.stats-content {
grid-template-columns: 1fr;
gap: 40px;
}

.stats-text {
font-size: 20px;
}

.stats-numbers {
gap: 40px;
}

.stat-item h2 {
font-size: 48px;
}

.interior-section,
.gallery-section,
.testimonials-section,
.about-section,
.contact-section {
padding: 80px 20px;
}

.interior-content {
grid-template-columns: 1fr;
gap: 40px;
}

.interior-text h2 {
font-size: 36px;
}

.gallery-section h2,
.testimonials-section h2,
.about-container > h2,
.contact-section h2 {
font-size: 36px;
}

.gallery-grid {
grid-template-columns: repeat(2, 1fr);
gap: 20px;
}

.testimonials-grid {
grid-template-columns: 1fr;
gap: 20px;
}

.testimonial-item {
padding: 24px;
}

.about-container > h2 {
margin-bottom: 50px;
}

.about-row {
grid-template-columns: 1fr;
gap: 30px;
margin-bottom: 50px;
}

.about-row.reverse {
direction: ltr;
}

.about-text-block h3 {
font-size: 24px;
}

.contact-grid {
grid-template-columns: 1fr;
gap: 40px;
max-width: 100%;
}

.contact-item {
padding: 0 0 0 56px;
}

.lightbox-prev, .lightbox-next {
width: 40px;
height: 40px;
font-size: 20px;
}

.lightbox-prev {
left: 10px;
}

.lightbox-next {
right: 10px;
}
.load-more{
text-align:left;
}
}


@keyframes slideDown {
from {
opacity: 0;
transform: translateY(-20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}



/* Mobile Landscape */
@media (max-width: 640px) {
.stats-numbers {
flex-direction: column;
gap: 30px;
}

.gallery-grid {
grid-template-columns: 1fr;
gap: 16px;
}
}


/* Mobile Portrait */
@media (max-width: 480px) {
nav {
padding: 20px;
}

.logo img {
height: 32px;
}

.hero {
min-height: 500px;
}

.hero .container {
padding: 0 20px 30px;
}

.hero-content {
padding-bottom: 30px;
}

.hero-content h1 {
font-size: 48px;
margin-bottom: 24px;
}

.hero-content p {
font-size: 16px;
margin-bottom: 30px;
}

.cta-button,
.btn-outline,
.load-more button {
font-size: 15px;
padding: 0 20px;
height: 44px;
line-height: 44px;
}

.stats {
padding: 60px 0;
}

.stats-text {
font-size: 18px;
}

.stat-item h2 {
font-size: 42px;
}

.stat-item p {
font-size: 14px;
}

.interior-section,
.gallery-section,
.testimonials-section,
.about-section,
.contact-section {
padding: 60px 20px;
}

.interior-text h2,
.gallery-section h2,
.testimonials-section h2,
.about-container > h2,
.contact-section h2 {
font-size: 32px;
margin-bottom: 16px;
}

.about-container > h2 {
margin-bottom: 40px;
}

.interior-text p,
.gallery-section > p,
.contact-section > p {
font-size: 16px;
}

.testimonial-item {
padding: 20px;
}

.testimonial-item p {
font-size: 15px;
}

.about-text-block h3 {
font-size: 22px;
}

.about-text-block p {
font-size: 16px;
}

.contact-item h3 {
font-size: 16px;
}

.contact-item p,
.contact-item a {
font-size: 15px;
}
}


/* Extra Small Mobile */
@media (max-width: 375px) {
.hero-content h1 {
font-size: 40px;
}

.stats-text {
font-size: 16px;
}

.stat-item h2 {
font-size: 36px;
}

.interior-text h2,
.gallery-section h2,
.testimonials-section h2,
.about-container > h2,
.contact-section h2 {
font-size: 28px;
}

.about-text-block h3 {
font-size: 20px;
}
}