:root{
    --shadow-primary: rgba(0,0,0,0.2);
}
body {
    font-family: 'Arial', sans-serif;
}

#hero {
    background: linear-gradient(var(--shadow-primary), var(--shadow-primary)), black url('hero.jpg');
    background-size: cover; /* Asegura que la imagen cubra todo el contenedor */
    background-repeat: no-repeat; /* Evita que la imagen se repita */
    background-position: center; /* Centra la imagen en el contenedor */
    height: 100vh;
    color: white;
}
#hero a{
    display: flex;
    align-items: center;
    justify-content: center ;
    margin: auto;
    background: green;
    border: green;
    width: 250px;
    height: 75px;
    font-size: 25px;
}

#services .icon-box {
    padding: 20px;
    border: 1px solid #ddd;
    border-radius: 8px;
    margin-bottom: 20px;
}

#services .icon-box i {
    font-size: 40px;
    margin-bottom: 10px;
    color: #007bff;
}
#about img{
    width: 250px;
}
#cta {
    color: black;
    background: url('bgclick1.jpg') no-repeat center center/cover;
}
#cta a{
    color: white;
    display: flex;
    align-items: center;
    justify-content: center ;
    margin: auto;
    background: green;
    border: green;
    width: 250px;
    height: 75px;
    font-size: 25px;
}

#features .icon-box {
    padding: 20px;
    border: 1px solid #ddd;
    border-radius: 8px;
    margin-bottom: 20px;
}

#features .icon-box i {
    font-size: 40px;
    margin-bottom: 10px;
    color: #007bff;
}

#footer a {
    text-decoration: none;
}