/*DRS portal Landing page style by Jonathan Frometa 5/18/2023*/
* {
    box-sizing: border-box;
}

/* Top Section */
.top-section {
    height: 35vh;
    background-image: url('homebg.jpg');
    background-size: cover;
    background-position: center;
}

.top-section-content {
    width: 100%;
    box-sizing: border-box;
    margin: inherit;
    padding: 20px;
}

.top-section h1,
.top-section h2,
.top-section h3,
.top-section h4,
.top-section h5,
.top-section h6
.top-section p {
    color: black;
}

.middle-section .p-font-size {
    font-size: 2rem;
    text-align: left;
    font-weight: normal;
}

.top-section h1 {
    font-size: 3rem;
    font-weight: bold;
    margin-bottom: 50px;
}

.top-section p:first-of-type {
    margin-bottom: 20px;
    color: black;
}

/* Middle Section */
.middle-section {
    background-color: #f9f9f9;
    padding: 30px 15px;
}

.middle-section .left-aligned {
    text-align: left;
}

.middle-section div {
    margin: 15px;
}

.middle-section h1 {
    text-align: center;
    font-size: 35px;
    font-weight: bold;
}

.middle-section h2 {
    font-size: 2rem;
    margin-bottom: 2rem;
    text-align: left;
    font-weight: bold;
    margin-top: 40px;
}

.middle-section p {
    margin-bottom: 20px;
    text-align: left;
    font-size: 1.8rem;
}

.boxes-container {
    display: flex;
    justify-content: center;
}

.box {
    position: relative;
    height: 250px;
    margin: 0 1%;
    background-image: linear-gradient(to top left, #0089ff, #fda02cfc);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    transition: all 0.3s ease;
}

.box:hover {
    filter: brightness(80%);
    transform: translateY(-5px);
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
}

.icon {
    font-size: 5rem;
    margin-bottom: 20px;
    color: #de3700;
    text-align: center;
}

.box .label {
    font-size: 1.8rem;
    color: #000000;
    text-align: center;
    cursor: pointer;
}

/* Default font size for larger screens */
.box .label {
    font-size: 1.8rem;
    color: #000000;
    text-align: center;
    cursor: pointer;
}

/* Adjust font size for tablets */
@media (max-width: 1024px) {
    .box .label {
        font-size: 1.6rem;
    }
}

/* Adjust font size for smartphones */
@media (max-width: 768px) {
    .box .label {
        font-size: 1.5rem;
    }
}

.box .box-p {
    font-size: 1.5rem;
    color: #000000;
    text-align: center;
}

/* Bottom Section */
.bottom-section {
    background-color: #f9f9f9;
    color: #000000;
    padding-left: 30px;
    padding-right: 30px;
    padding-bottom: 15px;
}

.bottom-section h2 {
    font-size: 2rem;
    margin-bottom: 40px;
}

.bottom-section p {
    margin-bottom: 20px;
    font-size: 1.8rem;
}

/*List Style*/
.list-numbered {
    list-style: none;
    margin-left: 1em;
    counter-reset: line;
}

.list-numbered > li {
    position: relative;
    margin-bottom: 0.5em;
    transition: transform 0.3s ease;
    font-size: 18px;
}

.list-numbered > li:hover {
    transform: translateY(-5px);
}

.list-numbered > li:before {
    position: absolute;
    left: -2.25em;
    display: flex; /* changed from inline-block */
    justify-content: center; /* centers horizontally */
    align-items: center; /* centers vertically */
    width: 22px;
    height: 22px;
    margin-right: 0.5em;
    background-color: #de3700;
    border-radius: 50%;
    color: #fff;
    text-align: center;
    line-height: 1.25em;
    counter-increment: line;
    content: counter(line);
}

@media only screen and (max-width: 768px) {
    .top-section {
        height: 30vh;
    }

    .top-section-content {
        max-width: 100%;
        margin-bottom: 1rem;
    }

    .top-section-content h1 {
        font-size: 2rem;
    }

    .middle-section h2 {
        font-size: 2rem;
        margin-bottom: 20px;
    }
}

@media only screen and (max-width: 768px) {
    .middle-section {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .boxes-container {
        flex-direction: column;
        align-items: center;
    }

    .box {
        margin: 10px;
    }
}

@media (min-width: 768px) {
    /* for screens larger than 768px */
    .box {
        width: 25%;
    }
}

@media (max-width: 767px) {
    /* for screens smaller than 768px */
    .box {
        width: 70%;
    }
}