/* TRIANGLE EFFECT SECTION */
    .triangle-section {
        position: relative;
        background-color: #f8f9fa;
        padding: 100px 0;
        margin: 60px 0;
    }
    
    /* Create the triangle shapes using clip-path */
    .triangle-section::before {
        content: '';
        position: absolute;
        top: -60px;
        left: 0;
        width: 100%;
        height: 60px;
        background-color: #f8f9fa;
        clip-path: polygon(0% 100%, 50% 0%, 100% 100%);
    }
    
    .triangle-section::after {
        content: '';
        position: absolute;
        bottom: -60px;
        left: 0;
        width: 100%;
        height: 60px;
        background-color: #f8f9fa;
        clip-path: polygon(0% 0%, 50% 100%, 100% 0%);
    }
    
    /* Ensure content is above triangles */
    .triangle-section .container {
        position: relative;
        z-index: 1;
    }
     /* Custom Colors and Text Styles */
    :root {
        --navy-blue: #0d47a1; 
        --orange-color: #ff6600; 
        --dark-text: #2c3e50;
        /* MODIFIED: Reduced Image dimensions */
        --img-width: 170px; /* Reduced from 200px */
        --img-height: 200px; /* Reduced from 250px */
        --img-offset: 15px; 
        --btn-size: 45px;
    }

    .orange-text {
        color: var(--orange-color) !important;
        font-weight: 700;
        letter-spacing: 1px;
    }
    
    .navy-title {
        color: var(--dark-text);
        font-weight: 700;
        font-size: 2rem;
    }

    /* Button Styling */
    .navy-btn {
        background-color: var(--navy-blue) !important;
        color: #ffffff !important;
        border: none;
        transition: background-color 0.3s;
    }
    .navy-btn:hover {
        background-color: #002e73 !important; 
    }

    /* Layout and Positioning */
    .feature-image-wrapper {
        position: relative;
        flex-shrink: 0;
    }

    /* MODIFIED: Image size reduction */
    .feature-img {
        width: var(--img-width);
        height: var(--img-height);
        object-fit: cover;
        display: block;
        position: relative;
        z-index: 2; 
        /* The image position relative to the box */
        transform: translate(var(--img-offset), var(--img-offset)); 
    }

    /* The Solid Navy Blue Box */
    .image-offset-box {
        position: absolute;
        top: 0;
        left: 0;
        z-index: 1; 
    }

    .navy-blue-box {
        background-color: var(--navy-blue); 
        width: 120px; 
        height: 120px; 
    }

    /* MODIFIED: Plus Button Styling - Changed from circle to square */
    .image-plus-button {
        position: absolute;
        width: var(--btn-size);
        height: var(--btn-size);
        background-color: var(--orange-color); 
        /* REMOVED border-radius: 50%; to make it a square */
        border-radius: 0; 
        color: #ffffff;
        font-size: 20px;
        display: flex;
        align-items: center;
        justify-content: center;
        text-decoration: none;
        transition: background-color 0.3s, transform 0.3s;
        cursor: pointer;
        z-index: 3; 

        /* Positioning the button to the bottom-right of the image */
        top: calc(var(--img-height) + var(--img-offset) - (var(--btn-size) / 2));
        left: calc(var(--img-width) + var(--img-offset) - (var(--btn-size) / 2));
    }

    .image-plus-button:hover {
        background-color: #cc5200; 
        transform: scale(1.1);
    }
    
    .feature-text-content {
        padding-top: 25px; 
    }
    
    /* MODAL STYLES */
    .modal-content {
        border-radius: 10px;
        border: none;
        box-shadow: 0 10px 40px rgba(0,0,0,0.2);
    }
    
    .modal-header {
        background-color: var(--navy-white);
        color: white;
        border-bottom: 3px solid var(--orange-color);
    }
    
    .modal-header .btn-close {
        background-color: white;
        opacity: 1;
        padding: 8px;
        border-radius: 50%;
    }
    
    #projectCarousel {
        border-radius: 8px;
        overflow: hidden;
    }
    
...............
..........

/* --------------------------------------
   REFINED MODAL HEIGHT REDUCTION 
   -------------------------------------- */

/* 1. Set a fixed height for the left column (col-md-8) based on content area */
#projectModal .modal-body {
    /* Keeping the max-height and scrollbar from before for the whole body */
    max-height: calc(85vh - 120px); 
    overflow-y: auto; 
}
/* INCREASE MODAL WIDTH */
#projectModal .modal-dialog {
    max-width: 500px;   /* Try 1100px–1400px */
    width: 95%;
}
#projectModal .modal-dialog {
    max-width: 85vw;  /* almost full width */
}

#projectModal .modal-content {
    min-height: 95vh; /* almost full height */
}

#projectModal .modal-body {
    max-height: calc(95vh - 120px); /* scrollable content */
}

/* Give the row a defined height */
#projectModal .modal-body > .row {
    height: 100%;
}

/* Make both columns fill the height of the row */
#projectModal .modal-body .col-md-8,
#projectModal .modal-body .col-md-4 {
    display: flex; /* Enable flex container for content alignment */
    flex-direction: column;
}

/* 2. Constrain the Carousel Container to the desired height (e.g., 350px) */
#projectCarousel {
    /* Use a fixed height for the carousel container to make it the same size
       as the image, and ensure the right column aligns with it. */
    height: 550px; /* Adjust this value (e.g., 300px or 400px) */
    width: 100%; 
    flex-shrink: 0; /* Prevents container from shrinking if inner content is smaller */
}

/* 3. Ensure the Image fills the Carousel Container */
#projectCarousel .carousel-inner,
#projectCarousel .carousel-item {
    height: 100%; /* Make carousel elements fill the container height (350px) */
}

#projectCarousel .carousel-inner img {
    height: 100%; /* The image itself now fills the 350px container height */
    width: 100%;
    object-fit: cover; /* Ensures image fills container without distortion */
    /* Remove 'max-height: 350px;' if it was separate, use 'height: 100%;' instead */
}
/* Compact the layout */
#projectModal .row {
    margin: 0 -5px;
}

#projectModal .col-md-8,
#projectModal .col-md-4 {
    padding: 0 5px;
}

/* Reduce text sizes */
#projectModal .project-title-modal {
    font-size: 1.1rem;
    margin-bottom: 8px;
}

#projectModal .project-info h5,
#projectModal .project-features h5 {
    font-size: 0.95rem;
    margin-bottom: 5px;
}

#projectModal p,
#projectModal li {
    font-size: 0.85rem;
    line-height: 1.3;
    margin-bottom: 3px;
}

/* Compact modal header and footer */
#projectModal .modal-header {
    padding: 10px 15px;
    min-height: 50px;
}

#projectModal .modal-footer {
    padding: 8px 15px;
    min-height: 50px;
}

/* Make buttons smaller */
#projectModal .modal-footer .btn {
    padding: 4px 12px;
    font-size: 0.85rem;
}
    .project-category-modal {
        display: inline-block;
        background-color: var(--orange-color);
        color: white;
        padding: 5px 15px;
        border-radius: 4px;
        font-size: 14px;
        font-weight: 600;
        margin-bottom: 15px;
        text-transform: uppercase;
        letter-spacing: 1px;
    }
    
    .project-title-modal {
        font-size: 24px;
        font-weight: 700;
        color: var(--dark-text);
        margin-bottom: 20px;
        font-family: 'Playfair Display', serif;
    }
    
    .project-info h5, .project-description-modal h5, .project-features h5 {
        color: var(--navy-blue);
        font-weight: 600;
        margin-bottom: 10px;
        font-size: 18px;
        border-bottom: 2px solid #f0f0f0;
        padding-bottom: 5px;
    }
    
    .project-info-list {
        list-style: none;
        padding-left: 0;
    }
    
    .project-info-list li {
        margin-bottom: 8px;
        padding-bottom: 8px;
        border-bottom: 1px solid #f0f0f0;
    }
    
    .project-info-list li strong {
        color: var(--dark-text);
        min-width: 80px;
        display: inline-block;
    }
    
    .project-description-modal p {
        color: #666;
        line-height: 1.6;
    }
    
    .project-features ul {
        padding-left: 20px;
        color: #666;
    }
    
    .project-features li {
        margin-bottom: 5px;
    }
    
    .modal-footer {
        border-top: 1px solid #dee2e6;
        padding: 15px;
    }
    
    .modal-footer .btn-primary {
        background-color: var(--navy-blue);
        border: none;
    }
    
    .modal-footer .btn-primary:hover {
        background-color: #002e73;
    }