/* custom.css - Custom styles and overrides */

/* Paragraph bolder styles with responsive design */
.paragraph.bolder {
    width: 55vw;
    color: #fff;
    font-size: 24px;
    line-height: 70px;
}

/* Responsive adjustments */
@media screen and (max-width: 767px) {
    .paragraph.bolder {
        width: auto;
        margin-bottom: 0;
    }
}

@media screen and (max-width: 479px) {
    .paragraph.bolder {
        width: auto;
        font-size: 24px; /* Keep consistent with desktop */
        line-height: 40px;
    }
}

/* Fix for appearance property */
button, input[type="button"], input[type="reset"] {
    -webkit-appearance: button;
    appearance: button;
}

/* Fix for search inputs */
input[type="search"] {
    -webkit-appearance: none;
    appearance: none;
}

/* Fix for number inputs */
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    appearance: none;
    margin: 0;
}

/* About section background */
.wrapper.about {
    background-image: url("../images/s3.jpg");
}

/* Override for about column width and flex behavior */
.column.about {
    width: 80%;
    flex: 1 0 auto;
    max-width: 80%;
    background-color: rgba(0, 0, 0, 0.6); /* Increased transparency */
    transition: background-color 0.3s ease; /* Smooth transition */
}

/* Maintain the same transparency on hover */
.column.about:hover {
    background-color: rgba(0, 0, 0, 0.6);
    opacity: 1;
}