#grad, .couleur {
    background: linear-gradient(90deg, rgba(223, 109, 0, 0.7) 0%, #B95D08 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

body {
    margin: 0;
    padding: 0;
}

.hero-container {
    width: 100%;
    height: 100vh; 
    
    background-image: url("../Images/Images/half life background.jpg"); 
    background-size: cover; 
    background-repeat: no-repeat;
    
   
    background-position: right center; 

    
    display: flex;
    align-items: center; 
}

.content {
   
    max-width: 50%; 
    padding: 50px 100px; 
    
   
    color: #333; 
}

.content .couleur {
    color: #fca311;
    margin-bottom: 10px;
}
h2{
    background-color: #002855; 
    color: #C6E2FE;            
    border: 2px solid #C6E2FE;
    padding: 8px 12px;
    border-radius: 10px;
}
select {
    background-color: #002855; 
    color: #C6E2FE;            
    border: 2px solid #C6E2FE; 
    padding: 8px 12px;
    border-radius: 4px;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    cursor: pointer;
    outline: none;
    transition: all 0.3s ease;
}
select:hover {
    background-color: #003a7a; 
    box-shadow: 0 0 10px #C6E2FE; 
}
option {
    background-color: #002855;
    color: #C6E2FE;
}
label{
    color: #ffffff;
}