.hero {
    background: linear-gradient(rgba(27, 35, 48, 0.7), rgba(27, 35, 48, 0.7)),
        url('https://images.unsplash.com/photo-1593642634367-d91a135587b5') center center/cover no-repeat;
    padding: 120px 0;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 80vh;
    color: white;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.hero h1 {
    font-size: 3.5rem;
    font-weight: 700;
    margin-bottom: 1rem;
}

.highlight {
    color: #F16501;
    /* Logo Orange */
}

.hero p {
    font-size: 1.25rem;
    margin-bottom: 2rem;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
    color: #ddd;
}

.btn-primary {
    background-color: #F16501;
    border: none;
    font-weight: 600;
    transition: background-color 0.3s ease;
}

.btn-primary:hover {
    background-color: #d45500;
}

.btn-outline-light {
    border: 2px solid white;
    color: white;
    font-weight: 600;
    transition: background-color 0.3s ease, color 0.3s ease;
}

.btn-outline-light:hover {
    background-color: white;
    color: #1B2330;
    /* Logo Dark Blue */
}

.btn-custom-home {
    background-color: #F16501 !important;
    /* or any specific shade of orange you want */
    color: white !important;
    /* border: 2px solid white !important; */
}

.btn-custom-home:hover {
    border: 2px solid white !important;
    background-color: transparent !important;
    /* to make it a bit darker on hover */
}

@media (max-width: 575.98px) {
    .card-body {
        padding-left: 1.25rem !important;
        padding-right: 1.25rem !important;
    }
}