.hero-container {
    display: flex;
    width: 100%;
    height: fit-content;
    flex-direction: row;
    align-items: center;
    justify-content: left;
    gap: var(--spacing-lg);   
    border-radius: var(--border-radius-xs);
    padding: var(--padding-lg);
    border: 1px solid var(--border-banner-secondary-dark);
    box-shadow: var(--box-shadow-cs);
    background-color:var( --bg-banners-secondary-light);
    box-shadow: 0 1px 4px 0px rgba(5, 8, 34, 0.2);


}

.containerDescription {
    display: flex;
    width: 50%;
    height: auto;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--spacing-sm);
}

    .containerDescription h1 {
        padding: 0;
        padding-bottom: var(--padding-base);

}
.containerDescription img {
    display: none;

}


.about-case {
    display: flex;
    width: 100%;
    height: auto;
    flex-direction: column;
    align-items: start;
    justify-content: left;
    gap: var(--spacing-sm);
    text-align: left;
    border-radius: var(--border-radius-xs);
    padding: var(--padding-xl);
    background: var(--bg-cards-primary-light);


}

.container_portfolio_cover {
    display: flex;
    width: 50%;
    height: auto;
    border-radius: var(--border-radius-xs);
    overflow: hidden;
    align-items: center;
    justify-content: center;

}

.container_portfolio_cover img {
    width: 100%;
    object-fit: cover;
    max-height: 349.95px;
}


.portfolio_cover-2 {
    display: none;
}

.portfolio_cover-2 img {
    width: 100%;
    object-fit: cover;

}

@media only screen and (max-width: 768px) {

.hero-container {
   
    border-radius: 0;
    padding: 0;
    border: none;
    box-shadow: none;
    background-color: transparent;
    box-shadow: none;

            flex-direction: column;
        gap: 0;
        align-items: center;


}



.about-case{
   
            background-color: var(--bg-cards-secondary-light);
            border-radius: 0;
            padding: var(--padding-xl);
            
         
}
        

    .containerDescription  {
                   width: 100%;
          align-items: start;
             gap:0;


}
    .containerDescription img {
        width: 100%;
        border-radius: 0;
}

    .contactMedecoration {

        width: 100%;
        margin-top: var(--spacing-base);
    }


.containerDescription h1 {
    padding: 11.74%  var(--padding-lg) 0 var(--padding-lg) ;
    order: 3;

}
    }
@media print {
    .hero-container {
        width: 100%;
        box-shadow: none !important;
        border-radius: 0;
        background-color: var(--bg-banners-primary-x-light);


    }

    .containerDescription {
        width: 100%;
        padding-bottom: 2.62%;

    }

    .container_portfolio_cover {
        display: none !important;

    }


    .containerDescription img {
        display: flex;
        width: 100%;
        border-radius: var(--border-radius-base);
    }


    .hero-container,
    .containerDescription,
    .about-case {
        -webkit-print-color-adjust: exact !important;
        /* For Chrome, Safari, Edge */
        print-color-adjust: exact !important;
        /* Standard property */
    }






    /* 1. Force the main container to span the entire page width */
    .hero-container {
        width: 100% !important;
        max-width: none !important;
        /* Removes any desktop max-width limits */
        margin: 0 !important;
        /* Removes centering margins */
        padding: 0;
        /* Removes internal padding for edge-to-edge look */
        box-shadow: none !important;
        border-radius: var(--border-radius-sm);
        background-color: transparent !important;
        /* Ensure background color is printed if needed */
    }


    /* 2. Ensure the description takes up the full width of the container */
    .containerDescription {
        width: 100% !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    .containerDescription h1,
    .about-case {
        display: none;
    }

    /* 3. Ensure the Hero Image scales to the full width */
    .containerDescription img {
        display: flex !important;
        width: 100% !important;
        height: auto !important;
        border-radius: var(--border-radius-sm);
    }

    /* 4. Ensure colors render (essential for the background or text colors) */
    .hero-container,
    .containerDescription,

    .bar,
    .legend-color {
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
    }

    .containerDescription h1 {
        width: 100%;
    }




}