html {
    scroll-behavior: smooth;
}

body {
    font-family: "Inter", sans-serif;
    background-color: #ffffff;
    margin: 0;
    padding: 0;
    overflow-x: hidden;
}

.glass {
    background-color: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(10px);
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.15);
}

.parallax img {
    position: absolute;
    width: 100%;
    height: 100vh;
    pointer-events: none;
}

/*benefit1*/

.benefit1 {
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    background-image: url("media/about2.png");
    background-position-x: center;
    background-size: no-repeat;
    background-size: cover;
    position: relative;
    overflow: hidden;
}

.benefit1::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url("../media/benefit1.png");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    transition: transform 0.5s;
}

.benefit1:hover::before {
    transform: scale(1.2);
}

/*benefit2*/

.benefit2 {
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    background-image: url("media/about2.png");
    background-position-x: center;
    background-size: no-repeat;
    background-size: cover;
    position: relative;
    overflow: hidden;
}

.benefit2::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url("../media/benefit4.png");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    transition: transform 0.5s;
}

.benefit2:hover::before {
    transform: scale(1.2);
}

/*benefit3*/

.benefit3 {
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    background-image: url("media/about2.png");
    background-position-x: center;
    background-size: no-repeat;
    background-size: cover;
    position: relative;
    overflow: hidden;
}

.benefit3::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url("../media/benefit2.png");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    transition: transform 0.5s;
}

.benefit3:hover::before {
    transform: scale(1.2);
}

h3 {
    text-align: left;
    position: relative;
    z-index: 2;
}

/* Circle Icon 1 */

.circle-icon1 {
    position: absolute;
    bottom: 20px;
    right: 20px;
    width: 50px;
    height: 50px;
    background-color: rgba(255, 255, 255, 0.7);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.circle-icon1::before {
    content: "";
    display: inline-block;
    width: 30px;
    height: 30px;
    background-image: url("../media/arrowup1.png");
    background-size: contain;
    background-repeat: no-repeat;
}

/* Circle Icon 2 */

.circle-icon2 {
    position: absolute;
    bottom: 20px;
    right: 20px;
    width: 50px;
    height: 50px;
    background-color: rgba(255, 255, 255, 0.7);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.circle-icon2::before {
    content: "";
    display: inline-block;
    width: 30px;
    height: 30px;
    background-image: url("../media/arrowup2.png");
    background-size: contain;
    background-repeat: no-repeat;
}

/* Circle Icon 3 */

.circle-icon3 {
    position: absolute;
    bottom: 20px;
    right: 20px;
    width: 50px;
    height: 50px;
    background-color: rgba(255, 255, 255, 0.7);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.circle-icon3::before {
    content: "";
    display: inline-block;
    width: 30px;
    height: 30px;
    background-image: url("../media/arrowup3.png");
    background-size: contain;
    background-repeat: no-repeat;
}

button {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.modal {
    display: flex; /* Keep display flex to center the modal */
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: transparent;
    backdrop-filter: blur(20px);
    transition:
        opacity 0.3s ease,
        visibility 0.3s ease; /* Include visibility for transition */
    opacity: 0; /* Start with opacity 0 */
    visibility: hidden; /* Start hidden */
    justify-content: center;
    align-items: center;
}

.modal-content {
    background-color: #fff;
    border: none;
    width: 40%;
    height: 80%;
    border-radius: 20px;
    transition:
        transform 0.3s ease,
        opacity 0.3s ease; /* Transition for transform and opacity */
    transform: scale(0.7);
    opacity: 0; /* Start with opacity 0 */
}

.modal.show {
    opacity: 1; /* Fade in the modal */
    visibility: visible; /* Make modal visible */
}

.modal.show .modal-content {
    transform: scale(1); /* Scale up the content */
    opacity: 1; /* Fade in the modal content */
}

/* Unique colors for each modal */
#modal1 .modal-content {
    background-color: #dbdba4;
}

#modal2 .modal-content {
    background-color: #93bff5;
}

#modal3 .modal-content {
    background-color: #a7dea4;
}

@media (max-width: 768px) {
    .modal-content {
        width: 80%;
    }
}