.btn-warning,
        .btn-warning:hover {
            background-color: #ffa155;
        }
        .text-warning{
            color:#ffa155 ;
        }
        .overview-label {
            letter-spacing: 0.25em;
        }

        .overview-text {
            max-width: 820px;
        }
        .contact-section {
            background: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)),
                url("images/image_17.jpg") center/cover no-repeat;
            height: 380px;   /* adjust height to match reference */
        }
.gradient-overlay {
            position: absolute;
            left: 0;
            right: 0;
            bottom: 0;
            height: 45%; /* controls gradient height */
            background: linear-gradient(to top, rgba(0,0,0,0.75), rgba(0,0,0,0));
}
        /* Prevents the laptop from creating a horizontal scrollbar on the page */
.overflow-hidden {
    overflow-x: hidden;
}

.laptop-img {
    max-width: none !important; /* Overrides Bootstrap's 100% width limit */
    width: 140%;                /* Makes the laptop large enough to bleed over */
    transform: translateX(15%); /* Pushes the right half off the screen */
    filter: drop-shadow(0 20px 30px rgba(0,0,0,0.5));
}

/* Optional: Adjust for mobile so the laptop isn't too huge */
@media (max-width: 992px) {
    .laptop-img {
        width: 100%;
        transform: none;
    }
}
.laptop-bleed {
    max-width: none !important;
    width: 135%;              /* Makes the laptop large */
    margin-top: -45px;        /* PULLS THE IMAGE UP to remove top space */
    margin-bottom: -100px;    /* Pulls the bottom up to crop the bottom */
    transform: translateX(-17%); /* Pushes it off the right edge */
    display: block;
}

/* On mobile, we reset these so it doesn't look broken */
@media (max-width: 991px) {
    .laptop-bleed {
        width: 100%;
        max-width: 100% !important;
        margin: 20px 0 0 0;
        transform: none;
    }
}