.landing{
    height: 100dvh;
    display: flex;
    justify-content: center;
    align-items: center;
    .container{
        display: flex;
        justify-content: space-around;
        width: 100%;
        align-items: center;
        margin: 20px;
        .text{
            display: flex;
            flex-direction: column;
            justify-content: space-around;
            align-items: start;
            max-width: 800px;
            h1{
                color: #ffffff;
                font-weight: 600;
                font-size: 5rem;
                text-transform: uppercase;
                font-family: 'Roboto', sans-serif;
            }
            h2{
                color: #ffffff;
                font-weight: 600;
                font-size: 2rem;
            }
            .buttons{
                display: flex;
                gap: 20px;
                margin-top: 20px;
                .button-devis{
                    a{
                        border-radius: 8px;
                        background-color: var(--button-color);
                        text-decoration: none;
                        transition: all 0.3s;
                        color: white;
                        padding: 10px 20px;
                        font-weight: 700;
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        font-size: 1.75rem;
                        transition: all 0.4s;
                        height: 100%;
                        &:hover{
                            background-color: var(--button-color-hover);
                        }
                        svg{
                            width: auto;
                            height: 50px;
                        }
                    }
                }
                .button-service{
                    a{
                        border-radius: 8px;
                        border: 2px solid white;
                        background-color: #941c8037;
                        backdrop-filter: blur(5px);
                        -webkit-backdrop-filter: blur(5px);
                        text-decoration: none;
                        transition: all 0.3s;
                        color: white;
                        padding: 10px 20px;
                        font-weight: 700;
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        font-size: 1.75rem;
                        transition: all 0.4s;
                        height: 100%;
                        &:hover{
                            background-color: #941c8087;
                        }
                        svg{
                            width: auto;
                            height: 50px;
                            path{
                                transition: all 0.4s;
                            }
                        }

                    }
                    
                }
            }
        }
        .logo{
            img{
                height: auto;
                width: 500px;
            }
        }
    }
}

@media (width<1250px){
    .landing{
        .container .logo{
            display: none;
        }
        .container .text{
            h1{
                font-size: 3.5rem;
            }
            h2{
                font-size: 1.5rem;
            }
            .buttons{
                .button-devis, .button-service{
                    a{
                        font-size: 1rem;
                        svg{
                            height: 30px;
                            width: auto;
                        }
                    }
                }
            }
        }
    }
}
@media (width<550px){
    .landing{
        .container{
            .text{
                h1{
                    font-size: 2.5rem;
                }
                h2{
                    font-size: 1rem;
                }
                .buttons{
                    .button-devis, .button-service{
                        a{
                            font-size: 0.75rem;
                            height: 100%;
                            svg{
                                height: 20px;
                                width: auto;
                            }
                        }
                    }
                }
            }
        }
    }
}
@media (width<425px){
    .landing{
        .container{
            .text{
                align-items: center;
                h1{
                    font-size: 2rem;
                    text-align: center;
                }
                h2{
                    text-align: center;
                    font-size: 1rem;
                }
                .buttons{
                    flex-direction: column;
                    width: 100%;
                    align-items: center;
                    .button-devis, .button-service{
                        min-width: 200px;
                    }
                }
            }
        }
    }
}