.elementor-58 .elementor-element.elementor-element-1b5f781{--display:flex;--min-height:275px;--justify-content:center;--align-items:center;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--overlay-opacity:0.2;}.elementor-58 .elementor-element.elementor-element-1b5f781::before, .elementor-58 .elementor-element.elementor-element-1b5f781 > .elementor-background-video-container::before, .elementor-58 .elementor-element.elementor-element-1b5f781 > .e-con-inner > .elementor-background-video-container::before, .elementor-58 .elementor-element.elementor-element-1b5f781 > .elementor-background-slideshow::before, .elementor-58 .elementor-element.elementor-element-1b5f781 > .e-con-inner > .elementor-background-slideshow::before, .elementor-58 .elementor-element.elementor-element-1b5f781 > .elementor-motion-effects-container > .elementor-motion-effects-layer::before{--background-overlay:'';}.elementor-widget-heading .elementor-heading-title{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );color:var( --e-global-color-primary );}.elementor-58 .elementor-element.elementor-element-acf0d04 .elementor-heading-title{color:#6A3FA0;}.elementor-58 .elementor-element.elementor-element-3c41ee8{--display:flex;--min-height:497px;--justify-content:center;--align-items:center;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--overlay-opacity:0.2;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-58 .elementor-element.elementor-element-3c41ee8::before, .elementor-58 .elementor-element.elementor-element-3c41ee8 > .elementor-background-video-container::before, .elementor-58 .elementor-element.elementor-element-3c41ee8 > .e-con-inner > .elementor-background-video-container::before, .elementor-58 .elementor-element.elementor-element-3c41ee8 > .elementor-background-slideshow::before, .elementor-58 .elementor-element.elementor-element-3c41ee8 > .e-con-inner > .elementor-background-slideshow::before, .elementor-58 .elementor-element.elementor-element-3c41ee8 > .elementor-motion-effects-container > .elementor-motion-effects-layer::before{--background-overlay:'';}.elementor-58 .elementor-element.elementor-element-3c41ee8.e-con{--flex-grow:0;--flex-shrink:0;}.elementor-58 .elementor-element.elementor-element-6ab4a75{--display:flex;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}@media(min-width:768px){.elementor-58 .elementor-element.elementor-element-3c41ee8{--width:100%;}}/* Start custom CSS for html, class: .elementor-element-4707af4 *//* You can place this at the top to set the font */
/*@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600;700&display=swap');*/

/* --- Main Container --- */
/*body {*/
    /* This is just for the demo */
/*    background-color: #1a1a1a; */
/*}*/

.project-showcase-container {
    font-family: 'playfair display', sans-serif;
    display: flex;
    justify-content: space-between;
    align-items: flex-start; /* Aligns items to the top */
    gap: 40px; /* Space between the 3 columns */
    
    background-color: #f4f0f9;
    color: #fffff;
    padding: 60px;
    border-radius: 10px;
    max-width: 1600px;
    margin: 40px auto; /* Centers the component */
}

/* --- 1. Featured Image Column --- */
.featured-image-wrapper {
    flex-basis: 25%;
    flex-shrink: 0;
}

.featured-image-wrapper img {
    width: 100%;
    height: auto;
    border-radius: 20px;
    object-fit: cover;
}

/* --- 2. Project Description Column --- */
.project-desc {
    flex-basis: 45%;
}

.project-desc .project-title {
    font-family: "playfair display";
    font-size: 2.2rem;
    font-weight: 700;
    margin-bottom: 10px;
    min-height: 40px; /* Prevents layout shift */
}

.project-desc .question {
    font-size: 1.2rem;
    font-weight: 600;
    color: #fffff;
    margin-bottom: 20px;
    min-height: 25px; /* Prevents layout shift */
}

.project-desc p {
    font-size: 0.95rem;
    line-height: 1.7;
    color: #fffff;
    margin-bottom: 25px;
    min-height: 120px; /* Prevents layout shift */
}

.project-desc .details {
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.5;
    margin-bottom: 30px;
    min-height: 40px; /* Prevents layout shift */
}

/* Button Styling */
.project-btn-wrapper {
    display: flex;
    gap: 15px;
}

.project-btn-wrapper button {
    padding: 12px 28px;
    font-size: 0.9rem;
    font-weight: 600;
    border: none;
    border-radius: 30px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.project-btn-wrapper .btn-visit {
    background-color: #ffffff;
    color: #000;
}

.project-btn-wrapper .btn-enquire {
    background-color: transparent;
    color: #fffff;
    border: 1px solid #777;
}

.project-btn-wrapper .btn-visit:hover {
    background-color: #ccc;
}
.project-btn-wrapper .btn-enquire:hover {
    background-color: #fff;
    color: #000;
}


/* --- 3. Project Cards List Column --- */
.project-cards {
    flex-basis: 30%;
    display: flex;
    flex-direction: column;
    gap: 15px; /* Space between cards */
    
    /* SCROLL FUNCTIONALITY */
    max-height: 336px; /* Set a maximum height */
    overflow-y: auto;  /* Add a vertical scrollbar *only* if needed */
    padding-right: 10px; /* Adds a little space for the scrollbar */
}

.project-card {
    display: flex;
    align-items: center;
    padding: 15px;
    border: 1px solid #444; /* Default border */
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.3s ease;
    flex-shrink: 0; /* Prevents cards from shrinking */
}

.project-card:hover {
    border-color: #888;
}

/* This is the selected card */
.project-card.active {
    border: 2px solid #fff;
    background-color: #6A3FA0; 
}

.project-card .card-img {
    width: 90px;
    height: 70px;
    object-fit: cover;
    border-radius: 8px;
    margin-right: 15px;
    flex-shrink: 0;
}

.project-card .card-content {
    display: flex;
    flex-direction: column;
}

.project-card .heading {
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 4px;
}

.project-card .card-content p {
    font-size: 0.8rem;
    color: #aaa;
    margin: 2px 0;
    line-height: 1.4;
    text-transform: uppercase;
}
/* Tablet View (1024px and below) */
@media (max-width: 1024px) {
    .project-showcase-container {
        flex-direction: column;
        padding: 40px 20px;
        gap: 30px;
        margin: 20px;
    }

    .featured-image-wrapper, 
    .project-desc, 
    .project-cards {
        flex-basis: 100%;
        width: 100%;
    }

    .project-desc {
        text-align: center;
    }

    .project-desc p, 
    .project-desc .project-title, 
    .project-desc .question, 
    .project-desc .details {
        min-height: auto; /* Removes the desktop spacing gaps */
        margin-bottom: 15px;
    }

    .project-btn-wrapper {
        justify-content: center;
    }

    /* Allow the sidebar list to expand rather than scroll on mobile */
    .project-cards {
        max-height: none;
        overflow-y: visible;
        padding-right: 0;
    }
}

/* Mobile View (768px and below) */
@media (max-width: 768px) {
    .project-desc .project-title {
        font-size: 1.8rem;
    }

    .project-btn-wrapper {
        flex-direction: column;
        align-items: center;
    }

    .project-btn-wrapper button {
        width: 100%;
        max-width: 300px;
    }

    .project-card {
        padding: 12px;
    }

    .project-card .card-img {
        width: 70px;
        height: 60px;
    }
    
    .project-card .heading {
        font-size: 0.9rem;
    }
}/* End custom CSS */