.contact-background {
    max-width: 100%;
    height: 400px; /* Adjust height as necessary */
    background-image: url("../StoreInfoImages/contact-us-image.jpg?t=@DateTime.Now.Ticks");
    background-repeat: no-repeat;
    background-size: cover;
    background-position-y: -250px; /* Adjust this value to move the image down */
    border-radius: 7px;
    position: relative;
}

.contact-title {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -100%);
    opacity: 0.6;
    color: white;
    font-size: 3rem;
}


.Form-control {
    max-width: 550px;
    border-radius: 0 !important;
    box-shadow: none !important;
}

    .Form-control:focus {
        border: 1px solid black;
    }

.textarea {
    max-width: 550px;
    border-radius: 0 !important;
    box-shadow: none !important;
}

    .textarea:focus {
        border: 1px solid black;
    }

.Send {
    max-width: 165px;
    background-color: black;
}

    .Send:hover {
        background-color: black;
    }
.contact-icons a {
    text-decoration: none;
    color: inherit;
    margin: 0 10px; /* adds space between icons */
    display: inline-block;
}

.contact-icons i {
    font-size: 30px; /* increased from 22px */
    cursor: pointer;
    transition: transform 0.3s ease;
}

    .contact-icons i:hover {
        transform: scale(1.2) translateY(-3px);
    }

.contact2 a {
    text-decoration: none;
    color: inherit;
}



/* /////////////////////////////////////////////// */

@media (max-width:450px) {
    .contact-background {
        background-position-y: -30px;
    }
}

@media (min-width:450px)and (max-width:820px) {
    .contact-background {
        background-position-y: -200px;
    }
}

@media (min-width:820px)and (max-width:1024px) {
    .contact-background {
        background-position-y: -180px;
    }
}

@media(width:1024px) {
    .contact-background {
        background-position-y: -320px;
    }
}
/* New button style for "Details" */
.details-btn {
    display: inline-block;
    text-align: center;
    font-size: 1rem;
    background-color: #17a2b8; /* Info button color */
    color: white;
    border-radius: 5px;
    text-decoration: none;
    transition: background-color 0.3s ease, transform 0.3s ease;
}

    .details-btn:hover {
        background-color: #138496; /* Darker blue on hover */
        transform: translateY(-3px);
    }

/* Ensure the button has proper spacing in different sections without top space */
.contact1 .details-btn, .contact2 .details-btn, .contact3 .details-btn {
    width: 100%;
    max-width: 200px;
    margin-top: 0; /* Removed the top margin */
}