:root {
--black:#121212;
--dark-gray:#1e1e1e;
--medium-gray:#2d2d2d;
--light-gray:#383838;
--text-primary:#e0e0e0;
--text-secondary:#a0a0a0;
--accent-orange:#f47c3c;
--subtle-blue:#1a2035;
--subtle-purple:#251a35
}

* {
margin:0;
padding:0;
box-sizing:border-box;
font-family:'Helvetica Neue',Arial,sans-serif
}

body {
color:var(--text-primary);
background-color:var(--black);
min-height:100vh
}

.container {
max-width:1200px;
margin:0 auto;
padding:0 2rem
}

nav {
display:flex;
justify-content:space-between;
align-items:center;
padding:1.5rem 2rem;
background-color:var(--black);
border-bottom:1px solid var(--medium-gray);
position:sticky;
top:0;
z-index:100
}

.logo {
font-size:1.8rem;
font-weight:bold;
letter-spacing:1px;
color:var(--text-primary);
text-decoration:none
}

.logo img {
height:45px;
width:120px
}

.logo span {
color:var(--accent-orange)
}

.nav-links {
display:flex;
gap:2.5rem
}

.nav-links a {
color:var(--text-secondary);
text-decoration:none;
font-size:.9rem;
letter-spacing:.5px;
text-transform:uppercase;
position:relative;
font-weight:400;
transition:color .3s ease;
padding:.5rem 0
}

.nav-links a:hover {
color:var(--text-primary)
}

.nav-links a::after {
content:'';
position:absolute;
width:0;
height:1px;
background-color:var(--accent-orange);
bottom:-3px;
left:0;
transition:width .3s ease
}

.nav-links a:hover::after {
width:100%
}

.nav-links a.active {
font-weight:600;
color:var(--text-primary)
}

.page-title {
font-size:2.5rem;
font-weight:300;
letter-spacing:1px;
margin:3rem 0;
text-align:center
}

.btn,.filter-btn,.load-more,.submit-btn {
padding:.8rem 1.5rem;
background-color:transparent;
color:var(--text-primary);
border:1px solid var(--text-secondary);
cursor:pointer;
font-size:.9rem;
text-transform:uppercase;
letter-spacing:2px;
transition:all .3s ease;
text-decoration:none;
position:relative;
overflow:hidden
}

.btn::after,.filter-btn::after,.load-more::after {
content:"";
position:absolute;
width:0;
height:100%;
top:0;
left:0;
background-color:var(--accent-orange);
z-index:-1;
transition:width .3s ease;
opacity:.9
}

.btn:hover,.filter-btn:hover,.load-more:hover,.submit-btn:hover {
color:var(--black);
border-color:var(--accent-orange)
}

.btn:hover::after,.filter-btn:hover::after,.load-more:hover::after {
width:100%
}

.submit-btn {
display:inline-block;
padding:1rem 2.5rem;
font-size:1rem;
letter-spacing:1px
}

.submit-btn:hover {
background-color:var(--accent-orange);
border-color:var(--accent-orange);
color:var(--black)
}

.submit-btn::after {
content:"";
position:absolute;
width:0;
height:100%;
top:0;
left:0;
background-color:var(--accent-orange);
z-index:-1;
transition:width .3s ease;
opacity:.9
}

.submit-btn:hover::after {
width:100%
}

.filter-btn {
margin:0 .5rem;
font-size:.8rem;
padding:.7rem 1.2rem
}

.filter-btn.active {
background-color:var(--accent-orange);
color:var(--black);
border-color:var(--accent-orange)
}

.filter-btn.active::after {
width:100%
}

.load-more {
display:block;
margin:3rem auto;
padding:1rem 2.5rem
}

.services {
display:grid;
grid-template-columns:repeat(3,1fr);
height:calc(100vh - 80px)
}

.service {
display:flex;
flex-direction:column;
justify-content:center;
align-items:center;
padding:2rem;
position:relative;
overflow:hidden;
transition:all .4s ease
}

.service:nth-child(1) {
background-color:var(--dark-gray)
}

.service:nth-child(2) {
background-color:var(--black)
}

.service:nth-child(3) {
background-color:var(--medium-gray)
}

.service::before {
content:"";
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
background-image:url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%232d2d2d' fill-opacity='0.3' fill-rule='evenodd'%3E%3Ccircle cx='3' cy='3' r='1'/%3E%3C/g%3E%3C/svg%3E");
opacity:.2;
z-index:0
}

.service:nth-child(2)::before {
background-image:url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23383838' fill-opacity='0.3' fill-rule='evenodd'%3E%3Ccircle cx='3' cy='3' r='1'/%3E%3C/g%3E%3C/svg%3E")
}

.service:nth-child(3)::before {
background-image:url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23444444' fill-opacity='0.3' fill-rule='evenodd'%3E%3Ccircle cx='3' cy='3' r='1'/%3E%3C/g%3E%3C/svg%3E")
}

.service-content {
position:relative;
z-index:1;
text-align:center
}

.service-icon {
margin-bottom:1.5rem;
width:60px;
height:60px;
display:flex;
align-items:center;
justify-content:center;
border:1px solid rgba(255,255,255,0.1);
border-radius:50%;
box-shadow:0 0 20px rgba(244,124,60,0.05)
}

.service-icon svg {
width:24px;
height:24px;
stroke:var(--text-primary)
}

.service h2 {
font-size:1.5rem;
margin-bottom:1rem;
font-weight:300;
letter-spacing:1px;
color:var(--text-primary)
}

.service-line {
width:30px;
height:1px;
background-color:var(--accent-orange);
margin:0 auto 1.5rem;
opacity:.7
}

.filter-bar {
display:flex;
justify-content:center;
margin-bottom:3rem
}

.projects-list {
max-width:1200px;
margin:0 auto
}

.project-row {
display:flex;
margin-bottom:2.5rem;
background-color:var(--medium-gray);
overflow:hidden
}

.project-image {
width:40%;
overflow:hidden
}

.project-image img {
width:480px;
height:280px;
object-fit:cover;
display:block
}

.project-content {
width:60%;
padding:2rem;
display:flex;
flex-direction:column
}

.project-category {
color:var(--accent-orange);
font-size:.85rem;
text-transform:uppercase;
letter-spacing:1px;
margin-bottom:.75rem
}

.project-title {
font-size:1.5rem;
font-weight:400;
margin-bottom:1rem
}

.project-desc {
color:var(--text-secondary);
font-size:.95rem;
line-height:1.5;
margin-bottom:1.5rem;
flex-grow:1
}

.project-link {
display:inline-flex;
align-items:center;
color:var(--text-primary);
font-size:.9rem;
text-transform:uppercase;
letter-spacing:1px;
text-decoration:none;
transition:color .3s ease;
align-self:flex-start
}

.project-link:hover {
color:var(--accent-orange)
}

.project-link svg {
width:18px;
height:18px;
margin-left:8px;
transition:transform .3s ease
}

.project-link:hover svg {
transform:translateX(4px)
}

.project-row:nth-child(even) {
flex-direction:row-reverse
}

.page-section {
min-height:calc(100vh - 6rem);
display:flex;
flex-direction:column;
justify-content:center;
align-items:center;
position:relative;
padding:4rem 2rem 2rem
}

.section-content {
max-width:800px;
width:100%;
text-align:center
}

.section-icon {
width:60px;
height:60px;
border-radius:50%;
background-color:rgba(255,255,255,0.1);
display:flex;
justify-content:center;
align-items:center;
margin:0 auto 2rem
}

.section-icon svg {
width:30px;
height:30px;
color:var(--text-primary)
}

.section-title {
font-size:2.5rem;
font-weight:300;
margin-bottom:1.5rem;
letter-spacing:2px
}

.section-subtitle {
color:var(--text-secondary);
font-size:1.2rem;
font-weight:300;
margin-bottom:3rem;
line-height:1.6
}

.contact-options {
display:flex;
justify-content:center;
gap:4rem;
margin-bottom:4rem
}

.contact-option {
text-align:center
}

.option-icon {
width:50px;
height:50px;
border-radius:50%;
background-color:rgba(255,255,255,0.1);
display:flex;
justify-content:center;
align-items:center;
margin:0 auto 1rem
}

.option-icon svg {
width:24px;
height:24px;
color:var(--text-primary)
}

.option-title {
font-size:1.2rem;
margin-bottom:.5rem;
font-weight:300
}

.option-text {
color:var(--text-secondary);
font-size:1rem
}

.option-text a {
color:var(--text-secondary);
text-decoration:none;
transition:color .3s ease
}

.option-text a:hover {
color:var(--accent-orange)
}

.contact-form {
max-width:600px;
margin:0 auto
}

.form-group {
margin-bottom:1.5rem;
text-align:left
}

.form-control {
width:100%;
padding:1rem;
background-color:rgba(255,255,255,0.05);
border:none;
border-bottom:1px solid var(--medium-gray);
color:var(--text-primary);
font-size:1rem;
transition:border-color .3s ease
}

.form-control:focus {
outline:none;
border-color:var(--accent-orange)
}

.form-control::placeholder {
color:var(--text-secondary);
opacity:.7
}

textarea.form-control {
min-height:150px;
resize:vertical
}

.form-row {
display:grid;
grid-template-columns:1fr 1fr;
gap:1.5rem
}

.map-section {
height:500px;
width:100%;
position:relative;
background-color:var(--dark-gray);
margin-top:2rem
}

.map-placeholder {
width:100%;
height:100%;
object-fit:cover;
opacity:.8
}

.office-info {
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
background-color:rgba(0,0,0,0.85);
padding:2rem;
text-align:center;
width:300px
}

.office-title {
font-size:1.5rem;
margin-bottom:1rem;
font-weight:300
}

.office-address {
color:var(--text-secondary);
font-size:1rem;
line-height:1.6;
margin-bottom:1.5rem
}

.office-hours {
color:var(--text-secondary);
font-size:.9rem
}

.hours-title {
color:var(--text-primary);
margin-bottom:.5rem
}

.social-links {
display:flex;
justify-content:center;
gap:1.5rem;
margin-top:4rem;
margin-bottom:2rem
}

.social-link {
position:relative;
overflow:hidden;
width:50px;
height:50px;
border-radius:50%;
background-color:rgba(255,255,255,0.05);
display:flex;
justify-content:center;
align-items:center;
transition:background-color .3s ease
}

.social-link::after {
content:"";
position:absolute;
width:0;
height:100%;
top:0;
left:0;
background-color:var(--accent-orange);
z-index:-1;
transition:width .3s ease;
opacity:.9
}

.social-link:hover {
border-color:var(--accent-orange)
}

.social-link:hover::after {
width:100%
}

.social-link svg {
width:20px;
height:20px;
color:var(--text-primary)
}

@media (max-width: 768px) {
nav {
flex-direction:column;
padding:1.5rem
}

.logo {
margin-bottom:1rem
}

.nav-links {
gap:1.5rem
}

.page-title {
font-size:2rem
}

.services {
grid-template-columns:1fr;
height:auto
}

.service {
padding:4rem 1rem
}

.filter-bar {
flex-wrap:wrap;
gap:.5rem
}

.filter-btn {
margin-bottom:.5rem
}

.project-row,.project-row:nth-child(even) {
flex-direction:column
}

.project-image,.project-content {
width:100%
}

.project-image {
height:250px
}

.contact-options {
flex-direction:column;
gap:2rem
}

.form-row {
grid-template-columns:1fr
}

.section-title {
font-size:2rem
}

.section-subtitle {
font-size:1rem
}

.page-section {
padding-top:4rem
}
}

:root {
--black:#121212;
--dark-gray:#1e1e1e;
--medium-gray:#2d2d2d;
--light-gray:#383838;
--text-primary:#e0e0e0;
--text-secondary:#a0a0a0;
--accent-orange:#f47c3c;
--subtle-blue:#1a2035;
--subtle-purple:#251a35
}

* {
margin:0;
padding:0;
box-sizing:border-box;
font-family:'Montserrat',sans-serif
}

body {
background-color:var(--black);
color:var(--text-primary);
line-height:1.6
}

.header {
display:flex;
justify-content:space-between;
align-items:center;
padding:25px 5%;
background-color:transparent;
position:fixed;
width:100%;
z-index:100;
transition:all .4s ease
}

.header.scrolled {
background-color:rgba(18,18,18,0.95);
padding:15px 5%;
box-shadow:0 5px 20px rgba(0,0,0,0.2)
}

.logo {
font-size:22px;
font-weight:500;
letter-spacing:2px;
transition:all .3s ease
}

.logo img {
height:60px;
width:160px
}

.logo:hover {
transform:translateY(-2px)
}

.logo span {
color:var(--accent-orange)
}

.nav {
display:flex;
gap:40px
}

.nav a {
color:var(--text-primary);
text-decoration:none;
font-size:12px;
font-weight:600;
text-transform:uppercase;
letter-spacing:1.5px;
position:relative;
padding:5px 0;
transition:all .3s ease
}

.nav a:before {
content:'';
position:absolute;
bottom:0;
left:0;
width:100%;
height:1px;
background-color:var(--accent-orange);
transform:scaleX(0);
transform-origin:right;
transition:transform .4s ease
}

.nav a:hover {
color:var(--accent-orange)
}

.nav a:hover:before {
transform:scaleX(1);
transform-origin:left
}

.nav a.active {
color:var(--accent-orange)
}

.nav a.active:before {
transform:scaleX(1)
}

.hero-section {
height:70vh;
position:relative;
overflow:hidden
}

.hero-slides {
height:100%;
width:100%;
position:relative
}

.hero-slide {
height:100%;
width:100%;
position:absolute;
top:0;
left:0;
opacity:0;
background-size:cover;
background-position:center;
transition:opacity 1s ease
}

.hero-slide.active {
opacity:1
}

.hero-slide:before {
content:'';
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
background:linear-gradient(to bottom,rgba(18,18,18,0.5),rgba(18,18,18,0.8))
}

.hero-content {
position:absolute;
bottom:15%;
left:5%;
max-width:550px;
z-index:10;
opacity:0;
transform:translateY(30px);
animation:fadeInUp 1s .5s ease forwards
}

.hero-tag {
display:inline-block;
padding:6px 14px;
background-color:var(--accent-orange);
color:var(--black);
font-size:11px;
font-weight:500;
text-transform:uppercase;
letter-spacing:1.5px;
margin-bottom:15px;
border-radius:2px
}

.hero-title {
font-size:42px;
font-weight:300;
line-height:1.2;
margin-bottom:15px;
letter-spacing:-1px
}

.hero-subtitle {
font-size:16px;
font-weight:300;
margin-bottom:20px
}

.hero-cta {
display:inline-flex;
align-items:center;
justify-content:center;
padding:12px 28px;
background-color:transparent;
color:var(--text-primary);
border:1px solid var(--accent-orange);
font-size:13px;
font-weight:400;
text-transform:uppercase;
letter-spacing:1px;
text-decoration:none;
transition:all .3s ease;
position:relative;
overflow:hidden
}

.hero-cta:before {
content:'';
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
background-color:var(--accent-orange);
transform:scaleX(0);
transform-origin:right;
transition:transform .5s ease;
z-index:-1
}

.hero-cta:hover {
color:var(--black)
}

.hero-cta:hover:before {
transform:scaleX(1);
transform-origin:left
}

.slide-controls {
position:absolute;
bottom:10%;
right:5%;
display:flex;
gap:15px;
z-index:10
}

.slide-control {
width:40px;
height:40px;
border-radius:0;
background-color:rgba(30,30,30,0.6);
border:1px solid rgba(224,224,224,0.1);
color:var(--text-primary);
display:flex;
align-items:center;
justify-content:center;
cursor:pointer;
transition:all .3s ease
}

.slide-control:hover {
background-color:var(--accent-orange);
color:var(--black);
border-color:var(--accent-orange)
}

.project-overview {
padding:90px 5%;
background-color:var(--black)
}

.container {
max-width:1300px;
margin:0 auto
}

.section-header {
margin-bottom:50px;
position:relative
}

.section-label {
font-size:12px;
color:var(--accent-orange);
text-transform:uppercase;
letter-spacing:2px;
margin-bottom:15px;
font-weight:400;
opacity:0;
animation:fadeInUp .6s ease forwards
}

.section-title {
font-size:36px;
font-weight:300;
line-height:1.2;
margin-bottom:25px;
opacity:0;
animation:fadeInUp .6s .2s ease forwards
}

.overview-grid {
display:grid;
grid-template-columns:1fr 1fr;
gap:60px;
align-items:start
}

.overview-content {
opacity:0;
animation:fadeInUp .6s .4s ease forwards
}

.overview-text {
font-size:16px;
line-height:1.8;
color:var(--text-primary);
margin-bottom:40px
}

.specs-container {
margin-top:40px
}

.specs-grid {
display:grid;
grid-template-columns:repeat(2,1fr);
gap:15px
}

.spec-item {
background-color:var(--medium-gray);
padding:15px;
transition:all .3s ease;
border-left:2px solid transparent
}

.spec-item:hover {
transform:translateY(-3px);
border-left:2px solid var(--accent-orange);
background-color:var(--light-gray)
}

.spec-label {
font-size:11px;
color:var(--accent-orange);
text-transform:uppercase;
letter-spacing:1px;
margin-bottom:5px
}

.spec-value {
font-size:15px;
font-weight:300
}

.overview-image {
position:relative;
height:550px;
background-image:url(https://media.architecturaldigest.com/photos/5d3f6c8084a5790008e99f37/master/w_1600%2Cc_limit/GettyImages-1143278588.jpg);
background-size:cover;
background-position:center;
opacity:0;
animation:fadeInUp .6s .6s ease forwards
}

.overview-image:before {
content:'';
position:absolute;
top:-20px;
left:-20px;
width:80px;
height:80px;
border-top:1px solid var(--accent-orange);
border-left:1px solid var(--accent-orange)
}

.overview-image:after {
content:'';
position:absolute;
bottom:-20px;
right:-20px;
width:80px;
height:80px;
border-bottom:1px solid var(--accent-orange);
border-right:1px solid var(--accent-orange)
}

.fullscreen-btn {
position:absolute;
bottom:20px;
right:20px;
width:40px;
height:40px;
background-color:var(--accent-orange);
color:var(--black);
display:flex;
align-items:center;
justify-content:center;
cursor:pointer;
transition:all .3s ease;
z-index:5
}

.fullscreen-btn:hover {
transform:scale(1.1)
}

.stats-section {
padding:80px 5%;
background-color:var(--dark-gray);
position:relative;
overflow:hidden
}

.stats-section:before {
content:'';
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
background:linear-gradient(120deg,var(--subtle-blue) 0%,transparent 70%);
opacity:.4;
z-index:1
}

.stats-grid {
display:grid;
grid-template-columns:repeat(4,1fr);
gap:30px;
position:relative;
z-index:2
}

.stat-item {
padding:30px;
background-color:var(--medium-gray);
transition:all .3s ease;
opacity:0;
animation:fadeInUp .6s ease forwards;
border-top:1px solid rgba(244,124,60,0.1)
}

.stat-item:hover {
transform:translateY(-10px);
box-shadow:0 15px 30px rgba(0,0,0,0.2);
background-color:var(--light-gray)
}

.stat-item:nth-child(2) {
animation-delay:.2s
}

.stat-item:nth-child(3) {
animation-delay:.3s
}

.stat-item:nth-child(4) {
animation-delay:.4s
}

.stat-icon {
font-size:18px;
color:var(--accent-orange);
margin-bottom:15px
}

.stat-value {
font-size:34px;
font-weight:300;
margin-bottom:5px
}

.stat-label {
font-size:12px;
color:var(--text-secondary);
text-transform:uppercase;
letter-spacing:1px
}

.gallery-section {
padding:90px 5%;
background-color:var(--black);
position:relative;
overflow:hidden
}

.gallery-section:before {
content:'';
position:absolute;
bottom:0;
right:0;
width:100%;
height:100%;
background:linear-gradient(220deg,var(--subtle-purple) 0%,transparent 80%);
opacity:.3;
z-index:1
}

.gallery-tabs {
display:flex;
gap:15px;
margin-bottom:40px;
opacity:0;
animation:fadeInUp .6s .2s ease forwards;
position:relative;
z-index:2
}

.gallery-tab {
padding:8px 18px;
font-size:12px;
color:var(--text-secondary);
background-color:transparent;
border:1px solid var(--medium-gray);
cursor:pointer;
transition:all .3s ease
}

.gallery-tab:hover,.gallery-tab.active {
background-color:var(--accent-orange);
color:var(--black);
border-color:var(--accent-orange)
}

.gallery-grid {
display:grid;
grid-template-columns:repeat(3,1fr);
gap:20px;
opacity:0;
animation:fadeInUp .6s .4s ease forwards;
position:relative;
z-index:2
}

.gallery-item {
height:300px;
position:relative;
overflow:hidden;
cursor:pointer
}

.gallery-item img {
width:100%;
height:100%;
object-fit:cover;
transition:transform .5s ease
}

.gallery-item:hover img {
transform:scale(1.1)
}

.gallery-item-overlay {
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
background-color:rgba(18,18,18,0.6);
display:flex;
align-items:center;
justify-content:center;
opacity:0;
transition:opacity .3s ease
}

.gallery-item:hover .gallery-item-overlay {
opacity:1
}

.gallery-item-controls {
display:flex;
gap:10px
}

.gallery-item-zoom,.gallery-item-fullscreen {
width:40px;
height:40px;
background-color:var(--accent-orange);
color:var(--black);
display:flex;
align-items:center;
justify-content:center;
font-size:18px;
transform:scale(0);
transition:transform .3s ease
}

.gallery-item:hover .gallery-item-zoom,.gallery-item:hover .gallery-item-fullscreen {
transform:scale(1)
}

.back-link-container {
padding:60px 5% 120px;
text-align:center;
background-color:var(--black)
}

.back-link {
display:inline-flex;
align-items:center;
gap:10px;
padding:12px 25px;
color:var(--text-primary);
text-decoration:none;
border:1px solid var(--accent-orange);
font-size:13px;
letter-spacing:1px;
text-transform:uppercase;
transition:all .3s ease
}

.back-link:hover {
background-color:var(--accent-orange);
color:var(--black)
}

.lightbox {
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
background-color:rgba(18,18,18,0.95);
z-index:1000;
display:flex;
align-items:center;
justify-content:center;
opacity:0;
visibility:hidden;
transition:all .3s ease
}

.lightbox.active {
opacity:1;
visibility:visible
}

.lightbox-content {
max-width:90%;
max-height:90%;
transform:scale(0.9);
transition:transform .3s ease;
position:relative
}

.lightbox.active .lightbox-content {
transform:scale(1)
}

.lightbox-image {
max-width:100%;
max-height:90vh;
display:block
}

.lightbox-close {
position:absolute;
top:20px;
right:20px;
width:40px;
height:40px;
background-color:var(--accent-orange);
color:var(--black);
font-size:18px;
display:flex;
align-items:center;
justify-content:center;
cursor:pointer;
transition:all .3s ease;
z-index:1001
}

.lightbox-close:hover {
transform:rotate(90deg)
}

.lightbox-fullscreen {
position:absolute;
top:20px;
right:70px;
width:40px;
height:40px;
background-color:var(--accent-orange);
color:var(--black);
font-size:18px;
display:flex;
align-items:center;
justify-content:center;
cursor:pointer;
transition:all .3s ease;
z-index:1001
}

.lightbox-fullscreen:hover {
transform:scale(1.1)
}

.lightbox-nav {
position:absolute;
top:50%;
transform:translateY(-50%);
width:40px;
height:40px;
background-color:rgba(244,124,60,0.7);
color:var(--black);
font-size:18px;
display:flex;
align-items:center;
justify-content:center;
cursor:pointer;
transition:all .3s ease
}

.lightbox-nav:hover {
background-color:var(--accent-orange)
}

.lightbox-prev {
left:20px
}

.lightbox-next {
right:20px
}

.lightbox-counter {
position:absolute;
bottom:20px;
left:50%;
transform:translateX(-50%);
background-color:rgba(18,18,18,0.7);
color:var(--text-primary);
padding:6px 12px;
font-size:12px
}

@keyframes fadeInUp {
from {
opacity:0;
transform:translateY(20px)
}

to {
opacity:1;
transform:translateY(0)
}
}

@media (max-width: 1024px) {
.overview-grid,.stats-grid,.gallery-grid,.specs-grid {
grid-template-columns:repeat(2,1fr)
}

.hero-title {
font-size:38px
}
}

@media (max-width: 768px) {
.header {
padding:20px 5%
}

.hero-content {
bottom:15%
}

.hero-title {
font-size:30px
}

.hero-subtitle {
font-size:15px
}

.section-title {
font-size:28px
}

.overview-grid {
grid-template-columns:1fr
}

.stats-grid,.gallery-grid {
grid-template-columns:1fr
}

.specs-grid {
grid-template-columns:1fr
}

.stat-item,.spec-item {
padding:20px
}

.gallery-tabs {
flex-wrap:wrap
}
}











:root {
      --black: #121212;
      --dark-gray: #1e1e1e;
      --medium-gray: #2d2d2d;
      --light-gray: #383838;
      --text-primary: #e0e0e0;
      --text-secondary: #a0a0a0;
      --accent-orange: #f47c3c; /* Preserved from logo */
      --subtle-blue: #1a2035; /* Dark subtle blue */
      --subtle-purple: #251a35; /* Dark subtle purple */
    }
    
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
      font-family: 'Helvetica Neue', Arial, sans-serif;
    }
    
    body {
      color: var(--text-primary);
      background-color: var(--black);
    }
    
    nav {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 1.5rem 2rem;
      background-color: var(--black);
      border-bottom: 1px solid var(--medium-gray);
    }
    
    .logo {
      font-size: 1.8rem;
      font-weight: bold;
      letter-spacing: 1px;
      color: var(--text-primary);
    }
    
    .logo span {
      color: var(--accent-orange);
    }
    
    .nav-links {
      display: flex;
      gap: 2.5rem;
    }
    
    .nav-links a {
      color: var(--text-secondary);
      text-decoration: none;
      font-size: 0.9rem;
      letter-spacing: 0.5px;
      text-transform: uppercase;
      position: relative;
      font-weight: 400;
      transition: color 0.3s ease;
    }
    
    .nav-links a:hover {
      color: var(--text-primary);
    }
    
    .nav-links a::after {
      content: '';
      position: absolute;
      width: 0;
      height: 1px;
      background-color: var(--accent-orange);
      bottom: -5px;
      left: 0;
      transition: width 0.3s ease;
    }
    
    .nav-links a:hover::after {
      width: 100%;
    }
    
    .nav-links a.active {
      font-weight: 600;
      color: var(--text-primary);
    }
    
    .header {
      padding: 4rem 2rem 2rem;
      text-align: center;
      background-color: var(--dark-gray);
      position: relative;
    }
    
    .header::before {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%232d2d2d' fill-opacity='0.3' fill-rule='evenodd'%3E%3Ccircle cx='3' cy='3' r='1'/%3E%3C/g%3E%3C/svg%3E");
      opacity: 0.2;
      z-index: 0;
    }
    
    .header-content {
      position: relative;
      z-index: 1;
    }
    
    .page-title {
      font-size: 2.5rem;
      font-weight: 300;
      letter-spacing: 2px;
      margin-bottom: 1rem;
    }
    
    .subtitle {
      color: var(--text-secondary);
      font-size: 1rem;
      font-weight: 300;
      max-width: 600px;
      margin: 0 auto;
    }
    
    .category-tabs {
      display: flex;
      justify-content: center;
      margin: 3rem auto 0;
      max-width: 700px;
      border-bottom: 1px solid var(--medium-gray);
    }
    
    .category-tab {
      padding: 1rem 2rem;
      color: var(--text-secondary);
      font-size: 0.9rem;
      letter-spacing: 1px;
      text-transform: uppercase;
      cursor: pointer;
      position: relative;
      background: transparent;
      border: none;
      transition: color 0.3s ease;
    }
    
    .category-tab:hover {
      color: var(--text-primary);
    }
    
    .category-tab.active {
      color: var(--text-primary);
    }
    
    .category-tab.active::after {
      content: '';
      position: absolute;
      bottom: -1px;
      left: 0;
      width: 100%;
      height: 2px;
      background-color: var(--accent-orange);
    }
    
    .projects-container {
      padding: 4rem 2rem;
      max-width: 1200px;
      margin: 0 auto;
    }
    
    .projects-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
      gap: 2rem;
    }
    
    .project-card {
      background-color: var(--medium-gray);
      border-radius: 2px;
      overflow: hidden;
      transition: transform 0.3s ease, box-shadow 0.3s ease;
    }
    
    .project-card:hover {
      transform: translateY(-5px);
      box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
    }
    
    .project-image {
      background-color: var(--light-gray);
      position: relative;
      overflow: hidden;
    }
    
    .project-image::before {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23444444' fill-opacity='0.2'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
    }
    
    .project-image img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      opacity: 0.8;
      transition: opacity 0.3s ease;
    }
    
    .project-card:hover .project-image img {
      opacity: 1;
    }
    
    .project-info {
      padding: 1.5rem;
    }
    
    .project-title {
      font-size: 1.2rem;
      font-weight: 400;
      margin-bottom: 0.5rem;
      letter-spacing: 0.5px;
    }
    
    .project-category {
      color: var(--accent-orange);
      font-size: 0.8rem;
      text-transform: uppercase;
      letter-spacing: 1px;
      font-weight: 400;
      margin-bottom: 1rem;
      opacity: 0.9;
    }
    
    .project-desc {
      color: var(--text-secondary);
      font-size: 0.9rem;
      line-height: 1.5;
      margin-bottom: 1.5rem;
    }
    
    .view-project {
      display: inline-flex;
      align-items: center;
      color: var(--text-primary);
      font-size: 0.8rem;
      text-transform: uppercase;
      letter-spacing: 1px;
      text-decoration: none;
      transition: all 0.3s ease;
    }
    
    .view-project svg {
      width: 16px;
      height: 16px;
      margin-left: 8px;
      transition: transform 0.3s ease;
    }
    
    .view-project:hover {
      color: var(--accent-orange);
    }
    
    .view-project:hover svg {
      transform: translateX(3px);
    }
    
    .load-more-container {
      display: flex;
      justify-content: center;
      margin-top: 3rem;
    }
    
    .load-more-btn {
      padding: 1rem 2.5rem;
      background-color: transparent;
      color: var(--text-primary);
      border: 1px solid var(--text-secondary);
      font-size: 0.9rem;
      text-transform: uppercase;
      letter-spacing: 2px;
      cursor: pointer;
      transition: all 0.3s ease;
      display: inline-flex;
      align-items: center;
      position: relative;
      overflow: hidden;
    }
    
    .load-more-btn::after {
      content: "";
      position: absolute;
      width: 0;
      height: 100%;
      top: 0;
      left: 0;
      background-color: var(--accent-orange);
      z-index: -1;
      transition: width 0.3s ease;
      opacity: 0.9;
    }
    
    .load-more-btn:hover {
      color: var(--black);
      border-color: var(--accent-orange);
    }
    
    .load-more-btn:hover::after {
      width: 100%;
    }
    
    .load-more-btn svg {
      width: 16px;
      height: 16px;
      margin-left: 8px;
      transition: transform 0.3s ease;
    }
    
    .load-more-btn:hover svg {
      transform: rotate(90deg);
    }
    
    .project-category-content {
      display: none;
    }
    
    .project-category-content.active {
      display: block;
    }
    
    .footer {
      padding: 3rem 2rem;
      background-color: var(--dark-gray);
      text-align: center;
      margin-top: 4rem;
      border-top: 1px solid var(--medium-gray);
    }
    
    .back-to-home {
      display: inline-flex;
      align-items: center;
      color: var(--text-secondary);
      font-size: 0.8rem;
      text-transform: uppercase;
      letter-spacing: 1px;
      text-decoration: none;
      transition: all 0.3s ease;
    }
    
    .back-to-home svg {
      width: 16px;
      height: 16px;
      margin-right: 8px;
      transition: transform 0.3s ease;
    }
    
    .back-to-home:hover {
      color: var(--accent-orange);
    }
    
    .back-to-home:hover svg {
      transform: translateX(-3px);
    }
    
    @media (max-width: 768px) {
      .projects-grid {
        grid-template-columns: 1fr;
      }
      
      .category-tabs {
        flex-direction: column;
        border-bottom: none;
      }
      
      .category-tab {
        padding: 1rem;
        border-bottom: 1px solid var(--medium-gray);
      }
      
      .category-tab.active::after {
        display: none;
      }
      
      .category-tab.active {
        background-color: var(--medium-gray);
      }
    }




    * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Arial', sans-serif;
        }
        
        body {
            background-color: #121212;
            color: #ffffff;
        }
        
        .header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 20px 40px;
            border-bottom: 1px solid #333;
            position: sticky;
            top: 0;
            background-color: rgba(18, 18, 18, 0.95);
            z-index: 100;
            backdrop-filter: blur(10px);
            transition: all 0.3s ease;
        }
        
        .header.scrolled {
            padding: 15px 40px;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
        }
        
        .logo {
            font-size: 28px;
            font-weight: bold;
            position: relative;
            transition: transform 0.3s ease;
        }

        .logo img{
            height:60px;
            width:160px;
        }
        
        .logo:hover {
            transform: scale(1.05);
        }
        
        .logo span {
            color: #FF6B35;
        }
        
        .nav {
            display: flex;
            gap: 30px;
        }
        
        .nav a {
            color: #ffffff;
            text-decoration: none;
            font-size: 14px;
            text-transform: uppercase;
            letter-spacing: 1px;
            transition: all 0.3s ease;
            position: relative;
            padding: 5px 0;
        }
        
        .nav a:after {
            content: '';
            position: absolute;
            width: 0;
            height: 2px;
            background-color: #FF6B35;
            bottom: 0;
            left: 0;
            transition: width 0.3s ease;
        }
        
        .nav a:hover {
            color: #FF6B35;
        }
        
        .nav a:hover:after {
            width: 100%;
        }
        
        .nav a.active {
            color: #FF6B35;
        }
        
        .nav a.active:after {
            width: 100%;
        }
        
        .project-hero {
            width: 100%;
            height: 70vh;
            background-image: url('https://media.architecturaldigest.com/photos/5d3f6c8084a5790008e99f37/master/w_1600%2Cc_limit/GettyImages-1143278588.jpg');
            background-size: cover;
            background-position: center;
            position: relative;
            overflow: hidden;
            cursor: pointer;
        }
        
        .project-hero:before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: linear-gradient(to bottom, rgba(0,0,0,0.3), rgba(18,18,18,1));
            opacity: 0.7;
            z-index: 1;
        }
        
        .expand-icon {
            position: absolute;
            bottom: 20px;
            right: 20px;
            background-color: rgba(0, 0, 0, 0.5);
            color: white;
            width: 40px;
            height: 40px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            z-index: 2;
            cursor: pointer;
            transition: all 0.3s ease;
        }
        
        .expand-icon:hover {
            background-color: #FF6B35;
            transform: scale(1.1);
        }
        
        .project-details {
            padding: 60px 40px;
            max-width: 1200px;
            margin: 0 auto;
            position: relative;
        }
        
        .project-category {
            color: #FF6B35;
            font-size: 14px;
            letter-spacing: 2px;
            text-transform: uppercase;
            margin-bottom: 10px;
            opacity: 0;
            transform: translateY(20px);
            animation: fadeInUp 0.6s ease forwards;
        }
        
        .project-title {
            font-size: 48px;
            font-weight: normal;
            margin-bottom: 30px;
            opacity: 0;
            transform: translateY(20px);
            animation: fadeInUp 0.6s 0.2s ease forwards;
        }
        
        .project-description {
            font-size: 18px;
            line-height: 1.6;
            color: #cccccc;
            margin-bottom: 60px;
            max-width: 800px;
            opacity: 0;
            transform: translateY(20px);
            animation: fadeInUp 0.6s 0.4s ease forwards;
        }
        
        @keyframes fadeInUp {
            from {
                opacity: 0;
                transform: translateY(20px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }
        
        .section-title {
            font-size: 24px;
            margin-bottom: 30px;
            position: relative;
            display: inline-block;
            opacity: 0;
            transform: translateY(20px);
            animation: fadeInUp 0.6s ease forwards;
        }
        
        .section-title:after {
            content: '';
            position: absolute;
            width: 0;
            height: 2px;
            background-color: #FF6B35;
            bottom: -10px;
            left: 0;
            transition: width 0.8s ease;
            animation: expandWidth 1s 0.6s ease forwards;
        }
        
        @keyframes expandWidth {
            from {
                width: 0;
            }
            to {
                width: 50%;
            }
        }
        
        /* Compact facts section with hover effects */
        .facts-container {
            background-color: #1a1a1a;
            padding: 30px;
            margin-bottom: 60px;
            border-radius: 4px;
            transition: all 0.3s ease;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
            opacity: 0;
            transform: translateY(20px);
            animation: fadeInUp 0.6s 0.6s ease forwards;
        }
        
        .facts-container:hover {
            box-shadow: 0 15px 40px rgba(0, 0, 0, 0.4);
            transform: translateY(-5px);
        }
        
        .facts-section {
            display: flex;
            flex-wrap: wrap;
            margin-top: 15px;
        }
        
        .fact-item {
            width: 33.33%;
            padding: 10px 20px 10px 0;
            transition: all 0.3s ease;
            position: relative;
        }
        
        .fact-item:hover {
            transform: translateX(5px);
        }
        
        .fact-item:hover .fact-title {
            letter-spacing: 1.2px;
        }
        
        .fact-item:hover .fact-value {
            color: #fff;
        }
        
        .fact-item:hover:before {
            content: '';
            position: absolute;
            left: -10px;
            top: 50%;
            height: 70%;
            width: 2px;
            background-color: #FF6B35;
            transform: translateY(-50%);
            animation: fadeIn 0.3s ease forwards;
        }
        
        @keyframes fadeIn {
            from {
                opacity: 0;
            }
            to {
                opacity: 1;
            }
        }
        
        .fact-item .fact-title {
            font-size: 12px;
            color: #FF6B35;
            margin-bottom: 5px;
            text-transform: uppercase;
            letter-spacing: 1px;
            transition: all 0.3s ease;
        }
        
        .fact-item .fact-value {
            font-size: 16px;
            font-weight: normal;
            transition: all 0.3s ease;
            color: #e0e0e0;
        }
        
        .gallery {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 20px;
            margin-top: 40px;
            margin-bottom: 60px;
            opacity: 0;
            transform: translateY(20px);
            animation: fadeInUp 0.6s 0.8s ease forwards;
        }
        
        .gallery-item {
            height: 300px;
            background-color: #1a1a1a;
            background-image: url('https://media.architecturaldigest.com/photos/5d3f6c8084a5790008e99f37/master/w_1600%2Cc_limit/GettyImages-1143278588.jpg');
            background-size: cover;
            background-position: center;
            transition: all 0.5s ease;
            position: relative;
            overflow: hidden;
            cursor: pointer;
        }
        
        .gallery-item:hover {
            transform: scale(1.03);
            box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
        }
        
        .gallery-item:before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.2);
            opacity: 0;
            transition: opacity 0.3s ease;
        }
        
        .gallery-item:hover:before {
            opacity: 1;
        }
        
        .gallery-item:after {
            content: '+';
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%) scale(0);
            font-size: 40px;
            color: #fff;
            opacity: 0;
            transition: all 0.3s ease;
        }
        
        .gallery-item:hover:after {
            opacity: 1;
            transform: translate(-50%, -50%) scale(1);
        }
        
        .related-projects {
            margin-top: 80px;
            opacity: 0;
            transform: translateY(20px);
            animation: fadeInUp 0.6s 1s ease forwards;
        }
        
        .projects-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 30px;
            margin-top: 40px;
        }
        
        .project-card {
            background-color: #1a1a1a;
            height: 300px;
            position: relative;
            overflow: hidden;
            background-image: url('https://amazingarchitecture.com/storage/files/1/architecture-firms/lyx-arkitekter/brutalist-house/brutalist_house_lyx_arkitekter_iceland-08.jpg ');
            background-size: cover;
            background-position: center;
            transition: all 0.5s ease;
            cursor: pointer;
        }
        
        .project-card:hover {
            transform: translateY(-10px);
            box-shadow: 0 15px 30px rgba(0, 0, 0, 0.4);
        }
        
        .project-card:before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: linear-gradient(to top, rgba(0,0,0,0.8) 20%, transparent 60%);
            z-index: 1;
        }
        
        .project-card-info {
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            padding: 20px;
            z-index: 2;
            transform: translateY(0);
            transition: transform 0.5s ease;
        }
        
        .project-card:hover .project-card-info {
            transform: translateY(-10px);
        }
        
        .project-card-category {
            color: #FF6B35;
            font-size: 12px;
            text-transform: uppercase;
            margin-bottom: 5px;
            transition: all 0.3s ease;
        }
        
        .project-card:hover .project-card-category {
            letter-spacing: 1.2px;
        }
        
        .project-card-title {
            font-size: 18px;
            margin-bottom: 0;
            transition: all 0.3s ease;
        }
        
        .project-card:hover .project-card-title {
            transform: translateX(5px);
        }
        
        .back-to-projects {
            display: inline-block;
            margin-top: 60px;
            color: #FF6B35;
            text-decoration: none;
            font-size: 14px;
            text-transform: uppercase;
            letter-spacing: 1px;
            transition: all 0.3s ease;
            position: relative;
            padding: 5px 0;
            opacity: 0;
            transform: translateY(20px);
            animation: fadeInUp 0.6s 1.2s ease forwards;
        }
        
        .back-to-projects:after {
            content: '';
            position: absolute;
            width: 0;
            height: 2px;
            background-color: #FF6B35;
            bottom: 0;
            left: 0;
            transition: width 0.3s ease;
        }
        
        .back-to-projects:hover {
            color: #ffffff;
            transform: translateX(-5px);
        }
        
        .back-to-projects:hover:after {
            width: 100%;
        }
        
        /* Lightbox styling */
        .lightbox {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.95);
            display: flex;
            align-items: center;
            justify-content: center;
            z-index: 1000;
            opacity: 0;
            visibility: hidden;
            transition: all 0.3s ease;
        }
        
        .lightbox.active {
            opacity: 1;
            visibility: visible;
        }
        
        .lightbox-content {
            position: relative;
            max-width: 90%;
            max-height: 90%;
            transform: scale(0.9);
            transition: transform 0.3s ease;
        }
        
        .lightbox.active .lightbox-content {
            transform: scale(1);
        }
        
        .lightbox-image {
            max-width: 100%;
            max-height: 90vh;
            display: block;
            box-shadow: 0 5px 30px rgba(0, 0, 0, 0.5);
        }
        
        .lightbox-close {
            position: absolute;
            top: 20px;
            right: 20px;
            width: 40px;
            height: 40px;
            background-color: rgba(0, 0, 0, 0.5);
            color: white;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: all 0.3s ease;
            font-size: 20px;
            z-index: 1001;
        }
        
        .lightbox-close:hover {
            background-color: #FF6B35;
            transform: rotate(90deg);
        }
        
        .lightbox-nav {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            width: 50px;
            height: 50px;
            background-color: rgba(0, 0, 0, 0.5);
            color: white;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: all 0.3s ease;
            font-size: 24px;
        }
        
        .lightbox-nav:hover {
            background-color: #FF6B35;
        }
        
        .lightbox-prev {
            left: 20px;
        }
        
        .lightbox-next {
            right: 20px;
        }
        
        .lightbox-counter {
            position: absolute;
            bottom: 20px;
            left: 50%;
            transform: translateX(-50%);
            color: white;
            background-color: rgba(0, 0, 0, 0.5);
            padding: 5px 15px;
            border-radius: 20px;
            font-size: 14px;
        }
        
        /* Responsive adjustments */
        @media (max-width: 768px) {
            .fact-item {
                width: 50%;
            }
            .gallery, .projects-grid {
                grid-template-columns: repeat(2, 1fr);
            }
            .lightbox-nav {
                width: 40px;
                height: 40px;
            }
        }
        
        @media (max-width: 580px) {
            .fact-item {
                width: 100%;
            }
            .gallery, .projects-grid {
                grid-template-columns: 1fr;
            }
            .lightbox-prev {
                left: 10px;
            }
            .lightbox-next {
                right: 10px;
            }
        }

/* Blog Header */
        .blog-header {
            text-align: center;
            padding: 80px 0 40px;
        }
        
        .blog-header h1 {
            font-size: 48px;
            font-weight: 300;
            margin-bottom: 20px;
        }
        
        .blog-header .divider {
            width: 60px;
            height: 3px;
            background-color: #ff7700;
            margin: 0 auto;
        }
        
        /* Blog Grid */
        .blog-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
            gap: 40px;
            margin: 60px 0;
        }
        
        .blog-card {
            background-color: #1a1a1a;
            border-radius: 4px;
            overflow: hidden;
            transition: transform 0.3s ease;
        }
        
        .blog-card:hover {
            transform: translateY(-5px);
        }
        
        .blog-image {
            height: 220px;
            background-color: #2a2a2a;
            position: relative;
            overflow: hidden;
        }
        
        .blog-image img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        
        .blog-category {
            position: absolute;
            top: 20px;
            left: 20px;
            background-color: #ff7700;
            color: #fff;
            padding: 5px 15px;
            font-size: 12px;
            text-transform: uppercase;
            letter-spacing: 1px;
            border-radius: 2px;
        }
        
        .blog-content {
            padding: 25px;
        }
        
        .blog-date {
            font-size: 14px;
            color: #999;
            margin-bottom: 10px;
        }
        
        .blog-title {
            font-size: 22px;
            font-weight: 400;
            margin-bottom: 15px;
        }
        
        .blog-excerpt {
            color: #aaa;
            margin-bottom: 20px;
            font-size: 15px;
            line-height: 1.6;
        }
        
        .blog-link {
            display: inline-block;
            color: #ff7700;
            text-decoration: none;
            font-size: 14px;
            text-transform: uppercase;
            letter-spacing: 1px;
            position: relative;
        }
        
        .blog-link:after {
            content: '';
            position: absolute;
            bottom: -3px;
            left: 0;
            width: 0;
            height: 1px;
            background-color: #ff7700;
            transition: width 0.3s ease;
        }
        
        .blog-link:hover:after {
            width: 100%;
        }
        
        /* Pagination */
        .pagination {
            display: flex;
            justify-content: center;
            margin: 60px 0;
        }
        
        .pagination a {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 40px;
            height: 40px;
            margin: 0 5px;
            border: 1px solid rgba(255, 255, 255, 0.2);
            color: #fff;
            text-decoration: none;
            border-radius: 2px;
            transition: all 0.3s ease;
        }
        
        .pagination a:hover, 
        .pagination a.active {
            background-color: #ff7700;
            border-color: #ff7700;
        }
        
        /* Footer */
        footer {
            padding: 60px 0;
            background-color: #0a0a0a;
            border-top: 1px solid rgba(255, 255, 255, 0.1);
        }
        
        .footer-content {
            display: flex;
            justify-content: space-between;
        }
        
        .footer-logo {
            margin-bottom: 20px;
        }
        
        .footer-text {
            max-width: 350px;
            color: #999;
            font-size: 14px;
            margin-bottom: 30px;
        }
        
        .footer-links h3 {
            font-size: 16px;
            font-weight: 500;
            margin-bottom: 20px;
            text-transform: uppercase;
            letter-spacing: 1px;
        }
        
        .footer-links ul {
            list-style: none;
        }
        
        .footer-links ul li {
            margin-bottom: 10px;
        }
        
        .footer-links ul li a {
            color: #999;
            text-decoration: none;
            transition: color 0.3s ease;
            font-size: 14px;
        }
        
        .footer-links ul li a:hover {
            color: #ff7700;
        }
        
        .copyright {
            text-align: center;
            margin-top: 60px;
            color: #666;
            font-size: 14px;
        }
        
        @media (max-width: 768px) {
            
            .blog-grid {
                grid-template-columns: 1fr;
            }
            
            .footer-content {
                flex-direction: column;
            }
            
            .footer-links {
                margin-top: 30px;
            }
        }


        /* Blog Detail Styles */
        .blog-detail-header {
            position: relative;
            height: 500px;
            overflow: hidden;
            margin-bottom: 60px;
        }
        
        .blog-detail-header-image {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            object-fit: cover;
            opacity: 0.6;
        }
        
        .blog-detail-header-overlay {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: linear-gradient(to bottom, rgba(0,0,0,0.3), rgba(0,0,0,0.8));
        }
        
        .blog-detail-header-content {
            position: absolute;
            bottom: 80px;
            left: 0;
            width: 100%;
            padding: 0 20px;
        }
        
        .blog-detail-category {
            display: inline-block;
            background-color: #ff7700;
            color: #fff;
            padding: 5px 15px;
            font-size: 12px;
            text-transform: uppercase;
            letter-spacing: 1px;
            border-radius: 2px;
            margin-bottom: 20px;
        }
        
        .blog-detail-title {
            font-size: 48px;
            font-weight: 300;
            margin-bottom: 20px;
            max-width: 800px;
        }
        
        .blog-detail-meta {
            display: flex;
            align-items: center;
            margin-bottom: 10px;
        }
        
        .blog-detail-author {
            display: flex;
            align-items: center;
            margin-right: 30px;
        }
        
        .blog-detail-author-image {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            margin-right: 10px;
            background-color: #2a2a2a;
        }
        
        .blog-detail-author-name {
            font-size: 14px;
        }
        
        .blog-detail-date {
            font-size: 14px;
            color: #aaa;
        }
        
        .blog-content-wrapper {
            display: flex;
            margin-bottom: 60px;
        }
        
        .blog-content {
            flex: 1;
            max-width: 800px;
        }
        
        .blog-sidebar {
            width: 300px;
            margin-left: 60px;
        }
        
        .blog-text {
            margin-bottom: 30px;
            color: #eee;
            font-size: 17px;
            line-height: 1.8;
        }
        
        .blog-text p {
            margin-bottom: 20px;
        }
        
        .blog-text h2 {
            font-size: 32px;
            font-weight: 300;
            margin: 40px 0 20px;
        }
        
        .blog-text h3 {
            font-size: 24px;
            font-weight: 400;
            margin: 30px 0 15px;
        }
        
        .blog-text ul, .blog-text ol {
            margin-left: 20px;
            margin-bottom: 20px;
        }
        
        .blog-text li {
            margin-bottom: 10px;
        }
        
        .blog-text blockquote {
            border-left: 4px solid #ff7700;
            padding-left: 20px;
            margin: 30px 0;
            font-style: italic;
            color: #bbb;
        }
        
        .blog-text img {
            max-width: 100%;
            height: auto;
            margin: 30px 0;
            border-radius: 4px;
        }
        
        .blog-tags {
            margin-top: 40px;
            display: flex;
            flex-wrap: wrap;
        }
        
        .blog-tag {
            display: inline-block;
            background-color: #1a1a1a;
            color: #aaa;
            padding: 5px 15px;
            font-size: 12px;
            border-radius: 20px;
            margin-right: 10px;
            margin-bottom: 10px;
            text-decoration: none;
            transition: all 0.3s ease;
        }
        
        .blog-tag:hover {
            background-color: #ff7700;
            color: #fff;
        }
        
        .blog-share {
            margin-top: 40px;
            padding-top: 40px;
            border-top: 1px solid rgba(255, 255, 255, 0.1);
        }
        
        .blog-share-title {
            font-size: 14px;
            text-transform: uppercase;
            letter-spacing: 1px;
            margin-bottom: 15px;
            color: #aaa;
        }
        
        .blog-share-buttons {
            display: flex;
        }
        
        .blog-share-button {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 40px;
            height: 40px;
            background-color: #1a1a1a;
            color: #fff;
            border-radius: 50%;
            margin-right: 10px;
            text-decoration: none;
            transition: background-color 0.3s ease;
        }
        
        .blog-share-button:hover {
            background-color: #ff7700;
        }
        
        /* Sidebar Styles */
        .sidebar-widget {
            background-color: #1a1a1a;
            border-radius: 4px;
            padding: 25px;
            margin-bottom: 30px;
        }
        
        .sidebar-title {
            font-size: 18px;
            font-weight: 400;
            margin-bottom: 20px;
            padding-bottom: 15px;
            border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        }
        
        .recent-posts-list {
            list-style: none;
        }
        
        .recent-post-item {
            display: flex;
            margin-bottom: 15px;
            padding-bottom: 15px;
            border-bottom: 1px solid rgba(255, 255, 255, 0.05);
        }
        
        .recent-post-item:last-child {
            margin-bottom: 0;
            padding-bottom: 0;
            border-bottom: none;
        }
        
        .recent-post-image {
            width: 70px;
            height: 70px;
            border-radius: 4px;
            overflow: hidden;
            margin-right: 15px;
            background-color: #2a2a2a;
        }
        
        .recent-post-image img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        
        .recent-post-content {
            flex: 1;
        }
        
        .recent-post-title {
            font-size: 14px;
            margin-bottom: 5px;
        }
        
        .recent-post-title a {
            color: #fff;
            text-decoration: none;
            transition: color 0.3s ease;
        }
        
        .recent-post-title a:hover {
            color: #ff7700;
        }
        
        .recent-post-date {
            font-size: 12px;
            color: #aaa;
        }
        
        .categories-list {
            list-style: none;
        }
        
        .category-item {
            margin-bottom: 10px;
            padding-bottom: 10px;
            border-bottom: 1px solid rgba(255, 255, 255, 0.05);
        }
        
        .category-item:last-child {
            margin-bottom: 0;
            padding-bottom: 0;
            border-bottom: none;
        }
        
        .category-link {
            display: flex;
            justify-content: space-between;
            align-items: center;
            color: #fff;
            text-decoration: none;
            transition: color 0.3s ease;
        }
        
        .category-link:hover {
            color: #ff7700;
        }
        
        .category-count {
            display: inline-block;
            background-color: #ff7700;
            color: #fff;
            font-size: 12px;
            width: 25px;
            height: 25px;
            border-radius: 50%;
            text-align: center;
            line-height: 25px;
        }
        
        /* Related Posts */
        .related-posts {
            margin:80px 0;
        }
        
        .related-posts-title {
            font-size: 24px;
            font-weight: 300;
            margin-bottom: 30px;
            position: relative;
            padding-bottom: 15px;
        }
        
        .related-posts-title:after {
            content: "";
            position: absolute;
            bottom: 0;
            left: 0;
            width: 60px;
            height: 3px;
            background-color: #ff7700;
        }
        
        .related-posts-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 30px;
        }
        
        .related-post-card {
            background-color: #1a1a1a;
            border-radius: 4px;
            overflow: hidden;
            transition: transform 0.3s ease;
        }
        
        .related-post-card:hover {
            transform: translateY(-5px);
        }
        
        .related-post-image {
            height: 180px;
            background-color: #2a2a2a;
        }
        
        .related-post-image img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        
        .related-post-content {
            padding: 20px;
        }
        
        .related-post-title {
            font-size: 16px;
            margin-bottom: 10px;
        }
        
        .related-post-title a {
            color: #fff;
            text-decoration: none;
            transition: color 0.3s ease;
        }
        
        .related-post-title a:hover {
            color: #ff7700;
        }
        
        .related-post-date {
            font-size: 12px;
            color: #aaa;
        }
        
        /* Footer styles removed */
        
        @media (max-width: 992px) {
            .blog-content-wrapper {
                flex-direction: column;
            }
            
            .blog-sidebar {
                width: 100%;
                margin-left: 0;
                margin-top: 60px;
            }
            
            .related-posts-grid {
                grid-template-columns: repeat(2, 1fr);
            }
        }
        
        @media (max-width: 768px) {
            .blog-header {
                height: 400px;
            }
            
            .blog-title {
                font-size: 36px;
            }
            
            .related-posts-grid {
                grid-template-columns: 1fr;
            }
            
            /* Header and footer responsive styles removed */
        }