#adaService {
    width: 100vw;
    max-width: 100%;

    #home-logo-service {
        width: 50%;
        height: 40vh;
        display: flex;
        justify-content: flex-end;
        align-items: center;
        margin: 0;

        .cercle-container-service {
            position: relative;
            width: calc(var(--app-min-height-triangle-menu) * 3);
            height: calc(var(--app-min-height-triangle-menu) * 3);
            overflow: hidden;
        }

        .triangle-container-service {
            position: absolute;
            width: var(--app-min-height-triangle-menu);
            height: var(--app-min-height-triangle-menu);
            top: 50%;
            left: 50%;
            transform-origin: center;
            cursor: pointer;
        }

        .triangle-container-blue-service {
            -webkit-transform: translate(-120%, -50%);
            transform: translate(-120%, -50%);
        }

        .triangle-container-green-service {
            -webkit-transform: translate(-100%, -120%) rotate(180deg);
            transform: translate(-100%, -120%) rotate(180deg);
        }

        .triangle-container-orange-service {
            -webkit-transform: translate(0%, -120%) rotateX(180deg);
            transform: translate(0%, -120%) rotateX(180deg);
        }

        .triangle-container-red-service {
            -webkit-transform: translate(20%, -50%) rotateY(180deg);
            transform: translate(20%, -50%) rotateY(180deg);
        }

        .triangle-container-purple-service {
            -webkit-transform: translate(0%, 20%) rotateX(360deg);
            transform: translate(0%, 20%) rotateX(360deg);
        }

        .triangle-container-yellow-service {
            -webkit-transform: translate(-100%, 20%) rotateY(180deg);
            transform: translate(-100%, 20%) rotateY(180deg);
        }


        .triangle-img-service {
            position: absolute;
            width: 100%;
            height: 100%;
            object-fit: contain;
        }
    }

    #home-menu-service {
        position: relative;
        width: 50%;
        height: 40vh;

        .theme-container-service-service {
            z-index: 2;
        }

        .sub-theme-container-service-service {
            z-index: 1;
        }

        .theme-container-service {
            position: absolute;
            top: 0;
            left: 0;
            padding: 1rem;
            width: 50%;
            height: 100%;
            display: none;
            flex-direction: column;
            justify-content: space-between;

            h4 {
                font-size: 1rem;
                font-weight: 600;
                text-transform: uppercase;
                align-self: center;
                color: white;
            }

            h6 {
                font-family: 'Montserrat', sans-serif;
                font-size: 0.9rem;
                color: black;   
            }

            a {
                color: white;
                text-decoration: none;
                line-height: 1;
            }

            .theme-wrapper-service {
                padding: 0.5rem;
                display: flex;
                justify-content: space-between;
                background: rgba(255, 255, 255, 0.05);
                border : 1px solid rgba(var(--app-light-blue-rgb), 0.3);
                border-radius: 0.5rem;
            
                h5 {
                    margin: 0;
                    font-family: 'Montserrat', sans-serif;
                    font-size: 1rem;
                    font-weight: 500;
                    cursor: pointer;
                }

            }

            .theme-wrapper-blue-service {
                box-shadow : inset 0px 0px 10px var(--app-light-blue);

                h5 {
                    color: var(--app-dark-blue);
                }
            }

            .theme-wrapper-green-service {
                box-shadow : inset 0px 0px 10px var(--app-light-green);

                h5 {
                    color: var(--app-dark-green);
                }
            }

            .theme-wrapper-red-service {
                box-shadow : inset 0px 0px 10px var(--app-light-red);

                h5 {
                    color: var(--app-dark-red);
                }
            }

            .theme-wrapper-orange-service {
                box-shadow : inset 0px 0px 10px var(--app-light-orange);

                h5 {
                    color: var(--app-dark-orange);
                }
            }

            .theme-wrapper-purple-service {
                box-shadow : inset 0px 0px 10px var(--app-light-purple);

                h5 {
                    color: var(--app-dark-purple);
                }
            }

            .theme-wrapper-yellow-service {
                box-shadow : inset 0px 0px 10px var(--app-light-yellow);

                h5 {
                    color: var(--app-dark-yellow);
                }
            }

            .theme-btn-service {
                position: relative;
                cursor: pointer;
                width: 1rem;        
                height: 1rem;       
                flex-shrink: 0;     

                img {
                    position: absolute;
                    top: 0;            
                    right: 0;
                    width: 1rem;
                    height: 1rem;
                    -webkit-transform: rotate(-270deg);
                    transform: rotate(-270deg);
                }
                
            }
        }

        .sub-theme-container-service {
            padding: 1rem;
            width: 100%;
            height: 100%;
            border-radius: 0.5rem;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            /* background: rgba(255, 255, 255, 0.05); */
            display: grid;
            grid-template-columns: 1fr;
            grid-template-rows: 20% 80%;

            h6 {
                font-size: 1.1rem;
                font-weight: bold;
                color: var(--app-medium-grey);
            }

            .sub-theme-wrapper-service-1 {
                display: flex;
                justify-content: space-between;

                .sub-theme-btn-service {
                    position: relative;
                    cursor: pointer;
                    width: 1rem;
                    height: 1rem;
                    flex-shrink: 0;
    
                    img {
                        position: absolute;
                        top: 0;
                        right: 0;
                        width: 1rem;
                        height: 1rem;
                        -webkit-transform: rotate(270deg);
                        transform: rotate(270deg);
                    }
                    
                }
            }

            .sub-theme-wrapper-service-2 {
                display: flex;
                flex-direction: column;
                justify-content: center;
                align-items: center;
            }
        }

        .sub-theme-container-blue-service {
            background: linear-gradient(135deg, var(--app-dark-blue) 0%, #1a2e1a 50%, #000 100%);
        }

        .sub-theme-container-green-service {
            background: linear-gradient(135deg, var(--app-dark-green) 0%, #1a2e1a 50%, #000 100%);
        }

        .sub-theme-container-orange-service {
            background: linear-gradient(135deg, var(--app-dark-orange) 0%, #1a2e1a 50%, #000 100%);
        }

        .sub-theme-container-purple-service {
            background: linear-gradient(135deg, var(--app-dark-purple) 0%, #1a2e1a 50%, #000 100%);
        }

        .sub-theme-container-red-service {
            background: linear-gradient(135deg, var(--app-dark-red) 0%, #1a2e1a 50%, #000 100%);
        }

        .sub-theme-container-yellow-service {
            background: linear-gradient(135deg, var(--app-dark-yellow) 0%, #1a2e1a 50%, #000 100%);
        }
    }
}

/* Responsive */
@media (max-width: 1600px) {
    #adaService {
        & #home-menu-service {
            .theme-container-service { 
                width: 60%;
            }
        }
    }
}

@media (max-width: 1400px) {
    #adaService {
        & #home-menu-service {
            .theme-container-service { 
                width: 70%;
            }
        }
    }
}

@media (max-width: 1150px) {
    #adaService {
        & #home-menu-service {
            .theme-container-service { 
                width: 80%;
            }
        }
    }
}

@media (max-width: 1000px) {
    #adaService {
        & #home-menu-service {
            .theme-container-service { 
                width: 90%;
            }
        }
    }
}

@media (max-width: 900px) {
    #adaService {
        & #home-menu-service {
            .theme-container-service { 
                width: 100%;
            }
        }
    }
}

@media (max-width: 800px) {
    #adaService {
       flex-direction: column;

        #home-menu-service {
            width: 60%;
            align-self: center;
       }

       #home-logo-service {
        justify-content: center;
        align-self: center;
       }
    }
}

@media (max-width: 700px) {
    #adaService {
        #home-menu-service {
            width: 80%;
            align-self: center;
       }
    }
}

@media (max-width: 500px) {
    #adaService {
        #home-menu-service {
            width: 100%;
            align-self: center;
            height: 45vh;
       }
    }

    #adaService {
        #home-logo-service {
            width: 80%;
       }
    }
}