/* ===================================
   PROJECT DETAIL PAGE STYLES
   =================================== */


/* ===================================
   BREADCRUMB
   =================================== */

.breadcrumb {
    background-color: #F8F7F5;
    padding: 1.5rem 0;
    border-bottom: 1px solid #E8E8E8;
}

.breadcrumb a,
.breadcrumb span {
    color: #8B8680;
    font-size: 0.95rem;
    margin: 0 0.5rem;
}

.breadcrumb a {
    color: #D4AF37;
    transition: color 0.3s ease;
}

.breadcrumb a:hover {
    color: #C9A961;
}

.breadcrumb .current {
    color: #2C2C2C;
    font-weight: 600;
}


/* ===================================
   PROJECT HERO SECTION
   =================================== */

.project-hero {
    min-height: 500px;
    background-size: cover;
    background-position: center;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.project-hero::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.3);
    z-index: 1;
}

@media (min-width: 768px) {
    .project-hero {
        min-height: 600px;
    }
}


/* ===================================
   PROJECT CONTENT SECTION
   =================================== */

.project-content {
    background-color: white;
}

.project-header {
    text-align: center;
    margin-bottom: 4rem;
}

.project-title {
    font-size: 3rem;
    color: #2C2C2C;
    margin-bottom: 1rem;
}

@media (min-width: 768px) {
    .project-title {
        font-size: 3.5rem;
    }
}

.project-category {
    font-size: 1.125rem;
    color: #D4AF37;
    font-weight: 500;
}

.project-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 4rem;
}

@media (min-width: 768px) {
    .project-grid {
        grid-template-columns: 1fr 2fr;
    }
}


/* ===================================
   PROJECT INFO
   =================================== */

.project-info {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem;
}

@media (min-width: 768px) {
    .project-info {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
}

.info-box {
    padding: 1.5rem;
    background-color: #F8F7F5;
    border-radius: 0.5rem;
    border-left: 4px solid #D4AF37;
}

.info-box h3 {
    font-size: 0.95rem;
    color: #8B8680;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 0.5rem;
    font-weight: 600;
}

.info-value {
    font-size: 1.25rem;
    color: #2C2C2C;
    font-weight: 600;
}


/* ===================================
   PROJECT DESCRIPTION
   =================================== */

.project-description h2 {
    font-size: 1.75rem;
    color: #2C2C2C;
    margin-bottom: 1rem;
}

.project-description p {
    color: #8B8680;
    font-size: 1.05rem;
    line-height: 1.8;
    margin-bottom: 2rem;
}

.project-description h3 {
    font-size: 1.25rem;
    color: #2C2C2C;
    margin-bottom: 1rem;
    margin-top: 2rem;
}

.features-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.features-list li {
    display: flex;
    align-items: center;
    gap: 1rem;
    color: #8B8680;
    padding-left: 1.5rem;
    position: relative;
}

.features-list li::before {
    content: '✓';
    position: absolute;
    left: 0;
    color: #D4AF37;
    font-weight: bold;
    font-size: 1.25rem;
}


/* ===================================
   PROJECT GALLERY
   =================================== */

#project-gallery {
    background-color: #F8F7F5;
}

.project-gallery {
    background-color: #F8F7F5;
}

.gallery-carousel {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 2rem;
}

@media (min-width: 768px) {
    .gallery-carousel {
        grid-template-columns: repeat(2, 1fr);
        grid-auto-rows: 300px;
    }
}

.gallery-item-large {
    grid-column: span 1;
    grid-row: span 1;
    background-size: cover;
    background-position: center;
    border-radius: 0.5rem;
    overflow: hidden;
    transition: all 0.3s ease;
    cursor: pointer;
}

.gallery-item-large:hover {
    transform: scale(1.02);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
}

@media (min-width: 768px) {
    .gallery-item-large {
        grid-column: span 2;
        grid-row: span 1;
    }
}

.gallery-item-medium {
    grid-column: span 1;
    grid-row: span 1;
    background-size: cover;
    background-position: center;
    border-radius: 0.5rem;
    overflow: hidden;
    transition: all 0.3s ease;
    cursor: pointer;
}

.gallery-item-medium:hover {
    transform: scale(1.02);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
}

@media (max-width: 767px) {
    .gallery-item-large,
    .gallery-item-medium {
        min-height: 200px;
    }
}


/* ===================================
   RELATED PROJECTS
   =================================== */

.related-projects {
    background-color: white;
}

.related-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 2rem;
}

@media (min-width: 1024px) {
    .related-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

.related-card {
    display: block;
    text-decoration: none;
    color: inherit;
    transition: all 0.3s ease;
}

.related-card:hover {
    transform: translateY(-10px);
}

.related-image {
    width: 100%;
    height: 250px;
    background-size: cover;
    background-position: center;
    border-radius: 0.5rem;
    margin-bottom: 1rem;
    overflow: hidden;
    transition: all 0.3s ease;
}

.related-card:hover .related-image {
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
}

.related-card h3 {
    font-size: 1.25rem;
    color: #2C2C2C;
    margin-bottom: 0.5rem;
}

.related-card p {
    color: #D4AF37;
    font-size: 0.95rem;
    font-weight: 500;
}


/* ===================================
   CTA SECTION
   =================================== */

.cta-section {
    background: linear-gradient(135deg, #2C2C2C 0%, #3C3C3C 100%);
    color: white;
    text-align: center;
}

.cta-content h2 {
    font-size: 2.5rem;
    margin-bottom: 1rem;
    color: white;
}

.cta-content p {
    font-size: 1.125rem;
    color: #A9A39E;
    margin-bottom: 2rem;
}


/* ===================================
   PROJECT IMAGES - Update URLs here
   =================================== */


/* Project 1 - Modern Living Room */

#project-hero-1 {
    background-image: url('../image/project1/modern-luxury-main.jpg');
}

#project-1-img-1 {
    background-image: url('../image/project1/modern-luxury01.jpg');
}

#project-1-img-2 {
    background-image: url('../image/project1/modern-luxury02.jpg');
}

#project-1-img-3 {
    background-image: url('../image/project1/modern-luxury03.jpg');
}

#project-1-img-4 {
    background-image: url('../image/project1/modern-luxury04.jpg');
}

#project-1-img-5 {
    background-image: url('../image/project1/modern-luxury05.jpg');
}

#project-1-img-6 {
    background-image: url('../image/project1/modern-luxury06.jpg');
}

#project-1-img-7 {
    background-image: url('../image/project1/modern-luxury07.jpg');
}

#project-1-img-8 {
    background-image: url('../image/project1/modern-luxury08.jpg');
}

#project-1-img-9 {
    background-image: url('../image/project1/modern-luxury09.jpg');
}

#project-1-img-10 {
    background-image: url('../image/project1/modern-luxury10.jpg');
}

#project-1-img-11 {
    background-image: url('../image/project1/modern-luxury11.jpg');
}


/* Project 2 - Luxury Kitchen */

#project-hero-2 {
    background-image: url('../image/project2/minimal\ modern5.jpg');
}

#project-2-img-1 {
    background-image: url('../image/project2/minimal\ modern1.jpg');
}

#project-2-img-2 {
    background-image: url('../image/project2/minimal\ modern2.jpg');
}

#project-2-img-3 {
    background-image: url('../image/project2/minimal\ modern3.jpg');
}

#project-2-img-4 {
    background-image: url('../image/project2/minimal\ modern4.jpg');
}

#project-2-img-5 {
    background-image: url('../image/project2/minimal\ modern5.jpg');
}

#project-2-img-6 {
    background-image: url('../image/project2/minimal\ modern6.jpg');
}

#project-2-img-7 {
    background-image: url('../image/project2/minimal\ modern7.jpg');
}

#project-2-img-8 {
    background-image: url('../image/project2/minimal\ modern8.jpg');
}


/* Project 3 */

#project-hero-3 {
    background-image: url('../image/project3/Coffeeshop1.jpg');
}

#project-3-img-1 {
    background-image: url('../image/project3/Coffeeshop1.jpg');
}

#project-3-img-2 {
    background-image: url('../image/project3/Coffeeshop2.jpg');
}

#project-3-img-3 {
    background-image: url('../image/project3/Coffeeshop3.jpg');
}

#project-3-img-4 {
    background-image: url('../image/project3/Coffeeshop4.jpg');
}


/* Project 4 */

#project-hero-4 {
    background-image: url('../image/project4/moderns1.jpg');
}

#project-4-img-1 {
    background-image: url('../image/project4/moderns1.jpg');
}

#project-4-img-2 {
    background-image: url('../image/project4/moderns2.jpg');
}

#project-4-img-3 {
    background-image: url('../image/project4/moderns3.jpg');
}

#project-4-img-4 {
    background-image: url('../image/project4/moderns4.jpg');
}

#project-4-img-5 {
    background-image: url('../image/project4/moderns5.jpg');
}

#project-4-img-6 {
    background-image: url('../image/project4/moderns6.jpg');
}

#project-4-img-7 {
    background-image: url('../image/project4/moderns7.jpg');
}

#project-4-img-8 {
    background-image: url('../image/project4/moderns8.jpg');
}

#project-4-img-9 {
    background-image: url('../image/project4/moderns9.jpg');
}

#project-4-img-10 {
    background-image: url('../image/project4/moderns10.jpg');
}

#project-4-img-11 {
    background-image: url('../image/project4/moderns11.jpg');
}

#project-4-img-12 {
    background-image: url('../image/project4/moderns12.jpg');
}

#project-4-img-13 {
    background-image: url('../image/project4/moderns13.jpg');
}

#project-4-img-14 {
    background-image: url('../image/project4/moderns14.jpg');
}


/* Project 5 */

#project-hero-5 {
    background-image: url('../image/project5/modernst1.jpg');
}

#project-5-img-1 {
    background-image: url('../image/project5/modernst1.jpg');
}

#project-5-img-2 {
    background-image: url('../image/project5/modernst2.jpg');
}

#project-5-img-3 {
    background-image: url('../image/project5/modernst3.jpg');
}

#project-5-img-4 {
    background-image: url('../image/project5/modernst4.jpg');
}

#project-5-img-5 {
    background-image: url('../image/project5/modernst5.jpg');
}

#project-5-img-6 {
    background-image: url('../image/project5/modernst6.jpg');
}

#project-5-img-7 {
    background-image: url('../image/project5/modernst7.jpg');
}

#project-5-img-8 {
    background-image: url('../image/project5/modernst8.jpg');
}


/* Project 6 */

#project-hero-6 {
    background-image: url('../image/project6/luxury3.jpg');
}

#project-6-img-1 {
    background-image: url('../image/project6/luxury1.jpg');
}

#project-6-img-2 {
    background-image: url('../image/project6/luxury2.jpg');
}

#project-6-img-3 {
    background-image: url('../image/project6/luxury3.jpg');
}

#project-6-img-4 {
    background-image: url('../image/project6/luxury4.jpg');
}

#project-6-img-5 {
    background-image: url('../image/project6/luxury5.jpg');
}

#project-6-img-6 {
    background-image: url('../image/project6/luxury6.jpg');
}

#project-6-img-7 {
    background-image: url('../image/project6/luxury7.jpg');
}

#project-6-img-8 {
    background-image: url('../image/project6/luxury8.jpg');
}

#project-6-img-9 {
    background-image: url('../image/project6/luxury9.jpg');
}

#project-6-img-10 {
    background-image: url('../image/project6/luxury10.jpg');
}

#project-6-img-11 {
    background-image: url('../image/project6/luxury11.jpg');
}

#project-6-img-12 {
    background-image: url('../image/project6/luxury12.jpg');
}


/* Project 7 */

#project-hero-7 {
    background-image: url('../image/project7/home\ modern1.jpg');
}

#project-7-img-1 {
    background-image: url('../image/project7/home\ modern1.jpg');
}

#project-7-img-2 {
    background-image: url('../image/project7/home\ modern2.jpg');
}

#project-7-img-3 {
    background-image: url('../image/project7/home\ modern3.jpg');
}

#project-7-img-4 {
    background-image: url('../image/project7/home\ modern4.jpg');
}

#project-7-img-5 {
    background-image: url('../image/project7/home\ modern5.jpg');
}

#project-7-img-6 {
    background-image: url('../image/project7/home\ modern6.jpg');
}

#project-7-img-7 {
    background-image: url('../image/project7/home\ modern7.jpg');
}

#project-7-img-8 {
    background-image: url('../image/project7/home\ modern8.jpg');
}

#project-7-img-9 {
    background-image: url('../image/project7/home\ modern9.jpg');
}

#project-7-img-10 {
    background-image: url('../image/project7/home\ modern10.jpg');
}

#project-7-img-11 {
    background-image: url('../image/project7/home\ modern11.jpg');
}

#project-7-img-12 {
    background-image: url('../image/project7/home\ modern12.jpg');
}

#project-7-img-13 {
    background-image: url('../image/project7/home\ modern13.jpg');
}

#project-7-img-14 {
    background-image: url('../image/project7/home\ modern14.jpg');
}

#project-7-img-15 {
    background-image: url('../image/project7/home\ modern15.jpg');
}

#project-7-img-16 {
    background-image: url('../image/project7/home\ modern16.jpg');
}


/* Project 8 */

#project-hero-8 {
    background-image: url('../image/project8/luxury-home12.jpg');
}

#project-8-img-1 {
    background-image: url('../image/project8/luxury-home2.jpg');
}

#project-8-img-2 {
    background-image: url('../image/project8/luxury-home3.jpg');
}

#project-8-img-3 {
    background-image: url('../image/project8/luxury-home4.jpg');
}

#project-8-img-4 {
    background-image: url('../image/project8/luxury-home5.jpg');
}

#project-8-img-5 {
    background-image: url('../image/project8/luxury-home6.jpg');
}

#project-8-img-6 {
    background-image: url('../image/project8/luxury-home7.jpg');
}

#project-8-img-7 {
    background-image: url('../image/project8/luxury-home8.jpg');
}

#project-8-img-8 {
    background-image: url('../image/project8/luxury-home9.jpg');
}

#project-8-img-9 {
    background-image: url('../image/project8/luxury-home1.jpg');
}

#project-8-img-10 {
    background-image: url('../image/project8/luxury-home10.jpg');
}

#project-8-img-11 {
    background-image: url('../image/project8/luxury-home11.jpg');
}

#project-8-img-12 {
    background-image: url('../image/project8/luxury-home12.jpg');
}


/* Related Projects Images */

#related-project-1 {
    background-image: url('../image/project1/modern-luxury-main.jpg');
}

#related-project-2 {
    background-image: url('../image/project2/minimal\ modern5.jpg');
}

#related-project-3 {
    background-image: url('../image/project3/Coffeeshop1.jpg');
}

#related-project-4 {
    background-image: url('../image/project4/moderns1.jpg');
}

#related-project-5 {
    background-image: url('../image/project5/modernst1.jpg');
}

#related-project-6 {
    background-image: url('../image/project6/luxury1.jpg');
}

#related-project-7 {
    background-image: url('../image/project7/home\ modern1.jpg');
}

#related-project-8 {
    background-image: url('../image/project8/luxury-home1.jpg');
}


/* ===================================
   RESPONSIVE ADJUSTMENTS
   =================================== */

@media (max-width: 640px) {
    .project-title {
        font-size: 2rem;
    }
    .project-grid {
        gap: 2rem;
    }
    .project-info {
        grid-template-columns: 1fr;
    }
    .cta-content h2 {
        font-size: 1.75rem;
    }
}