.home-projects {
    min-height: 100dvh; 
    width: 100%;

    display: flex;
    flex-direction: column;
    justify-content: start;
    align-items: center;

    h1 {
        width: 450px;
        text-align: center;
        margin: 50px 0 10px 0;
        font-weight: 500;
    }

    .slider-show {
        width: 60%;

        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        
        .slider-nav {
            display: flex;
            flex-direction: row;
            justify-content: space-between;
            align-items: center;

            overflow: hidden;

            width: 60%;
            height: 100px;

            .slide {
                width: 80px; /* Adjust as needed */
                height: 80px;
                margin: 0 5px;
                cursor: pointer;
            }
        }

        .point-slide {
            display: flex;
            justify-content: center;
            align-items: center;

            margin: 10px 0;

            .point {
                width: 5px;
                height: 5px;
                border-radius: 100px;
                background-color: lightgray;
                margin: 0 5px;
                cursor: pointer;

                transition: all 0.3s ease;
            }

            .point.active {
                background-color: var(--color-bg-secondary);
            }
        }
    }

    .info-energie {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;

        width: 800px;
        margin: 50px 0;

        p {
            font-size: 1rem;
            margin: 10px 0;

            text-align: justify;

            width: 60%;
        }

        a {
            color: var(--color-primary);
            font-weight: 500;
            text-decoration: none;

            transition: all 0.3s ease;
        }

        a:hover {
            color: var(--color-bg-secondary);
        }
    }

    .separator {
        width: 25%;
        height: 0.05em;
        background-color: lightgray;
        opacity: 0.5;
        margin: 50px 0;
    }

    .advantage {
        display: flex;
        flex-direction: row;
       
        width: 700px;
        height: 400px;

        img {
            width: 380px;
            object-fit: contain;
            object-position: bottom;
        }

        .content {
            height: 100%;
            display: flex;
            flex-direction: column;
            justify-content: start;
            align-items: start;

            p {
                margin-bottom: 30px;
            }

            a.btn {
                margin-top: 35px;
            }

            ul {
                list-style-type: none;
                margin: 0;
                padding: 0;

                /*li::before {
                    content: ' ';
                    display: inline-block;
                }*/

                li {
                    margin: 10px 0;
                    font-size: 1.2rem;
                    display: flex;
                    justify-content: start;
                    align-items: center;

                    i {
                        font-size: 12px;
                        color: var(--color-primary);
                        margin-right: 5px;
                    }
                }
            }
        }
    }
}

@media screen and (max-width: 500px) {
    .home-projects {
        h1 {
            width: 90%;
            font-size: 1.5rem;
        }

        .slider-show {
            width: 90%;

            .slider-nav {
                .slide {
                    width: 60px;
                    height: 60px;
                }
            }
        }
    }
}

@media screen and (min-width: 500px) and (max-width: 850px) {
    .home-projects {

        .slider-show {
            width: 90%;

            .slider-nav {
                .slide {
                    width: 60px;
                    height: 60px;
                }
            }
        }
    }
}

@media screen and (max-width: 800px) {
    .home-projects {
        .info-energie {
            width: 90%;

            p {
                width: 90%;
            }
        }

        .advantage {
            width: 100%;

            img {
                width: 45%;
            }

            .content {
                width: 45%;
            }
        }
    }
}