﻿.reg_form_img {
    width: 100%;
    height: auto;
    max-height: 550px; /* Adjusted height to make the image responsive */
}

.reg_btn {
    border: none;
    background-color: #009990;
    color: antiquewhite;
    letter-spacing: 0.5px;
    font-size: 1.2rem;
    font-weight: 500;
    border-radius: 10px;
    letter-spacing: 0.9px;
}

.reg_title {
    color: #009990;
}

.reg_btn:hover {
    background-color: #FF6500;
    color: antiquewhite;
}

/* Responsive Layout */
@media (max-width: 992px) {
    /* Smaller Card and Image */
    .col-md-10 {
        max-width: 80%; /* Reduce width for medium screens */
    }

    .reg_form_img {
        max-height: 250px; /* Smaller image on medium screens */
    }
}

@media (max-width: 768px) {
    .card-body {
        padding: 1.25rem; /* Reduced padding for smaller screens */
    }
    /* Reduce width and make card more compact */
    .col-md-10 {
        max-width: 90%;
    }

    .reg_form_img {
        max-height: 200px; /* Smaller image on smaller screens */
    }

    /* Form Fields */
    .form-outline input {
        padding-left: 40px; /* Add padding for icon */
    }

    .form-outline {
        margin-bottom: 1.5rem;
    }

    /* Title adjustments */
    .reg_title {
        font-size: 1.5rem; /* Reduce title size */
    }

    /* Button */
    .reg_btn {
        font-size: 1.1rem;
        width: 100%; /* Make button full width */
    }
}

@media (max-width: 576px) {
    /* Adjust for very small screens */
    .col-md-10 {
        max-width: 95%; /* Max-width adjustment for small screens */
    }

    /* Title adjustments */
    .reg_title {
        font-size: 1.2rem;
    }

    /* Adjust card body padding */
    .card-body {
        padding: 1rem;
    }

    /* Image adjustments */
    .reg_form_img {
        max-height: 180px; /* Smaller image on very small screens */
    }

    /* Button adjustments */
    .reg_btn {
        font-size: 1rem;
    }
}
