.home-about-contanier {
    padding-bottom: 88px;
}

.home-about {
    background: radial-gradient(308.4% 100% at 50% 0, #ffffff 6.32%, rgba(210, 224, 255, 0.36) 29.28%, rgba(126, 255, 204, 0.43) 68.68%, #ffffff 100%);
}

.home-about-container {
    position: relative;
    padding-bottom: 100px;
    max-width: 1200px;
    margin: 0 auto;
}

    .home-about-container .home-title {
        display: flex;
        justify-content: center;
        font-size: 3rem;
        font-weight: 700;
        padding: 34px;
        color: #444;
        margin: 0;
    }

.about-content {
    display: flex;
    align-items: flex-start;
}

.home-about-contanier .home-title {
    display: flex;
    justify-content: center;
    font-size: 2.5rem;
    font-weight: 700;
    color: #2fd28f;
    font-family: 'interB';
}

.about-left {
    width: calc(100% - 529px);
    padding-right: 80px;
}

    .about-left .about-title {
        margin-bottom: 1rem;
        font-size: 18px;
        color: #070606;
        font-family: 'interM';
        line-height: 165%;
        /* font-weight: 100; */
    }

    .about-left .about-descript {
        font-size: 1.2rem;
        color: #4a4a4a;
        line-height: 1.5;
        display: block;
        margin-bottom: 1.5rem;
    }

    .about-left .home-about-content {
        font-size: 1rem;
        color: #4a4a4a;
        line-height: 1.6;
        margin-bottom: 2rem;
    }

    .about-left .about-left-btn {
        width: fit-content;
        border-radius: 10px;
        background: linear-gradient(134deg, #FFCDDA 2.01%, #3bd914 100%);
        display: flex;
        align-items: center;
        padding: 17px 29px;
        box-shadow: 0px 4px 4px rgba(229, 13, 71, 0.3);
        position: relative;
        overflow: hidden;
        text-decoration: none;
        transition: background 0.3s ease;
    }

.about-left-btn::after {
    content: '';
    position: absolute;
    width: 172px;
    height: 39px;
    border-radius: 300px 0px 10px 19.5px;
    background: linear-gradient(179deg, rgba(255, 255, 255, 0) 0.28%, rgba(255, 255, 255, 0.9) 101%);
    bottom: 0;
    right: 0;
    pointer-events: none;
}

.about-left-btn:hover {
    background: linear-gradient(134deg, #ffb3c6 2.01%, #19dd28 100%);
}

.about-left-btn .icon {
    width: 13px;
    height: 13px;
    background-color: #fff;
    border-radius: 50%;
    font-size: 9px;
    color: #E50D47;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 6px;
}

.about-left-btn span {
    font-size: 18px;
    color: #ffffff;
    line-height: 117.8%;
}

.about-right {
    position: relative;
    width: 529px;
    height: fit-content;
}

    .about-right .about-right-img {
        width: 39vw;
        max-width: 470px;
        height: 541px;
        border-radius: 30px;
        overflow: hidden;
        transform: translateX(-68px);
        position: relative;
    }

        .about-right .about-right-img img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

    .about-right .about-right-img-sub {
        border-radius: 30px;
        width: 30vw;
        max-width: 360px;
        height: 277px;
        position: absolute;
        bottom: -92px;
        right: 0;
        /* border: 5px solid #fff; */
        overflow: hidden;
    }

        .about-right .about-right-img-sub img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

/* Responsive Design */

/* Tablet (≤1023px) */
@media (max-width: 1023px) {
    .home-about {
        padding: 0;
    }

    .home-about-contanier .home-title {
        margin: 0;
        padding: 25px 0;
    }

    .home-about-container {
        padding-bottom: 80px;
    }

        .home-about-container .home-title {
            font-size: 2.5rem;
            padding: 25px;
        }

    .about-content {
        flex-direction: column;
        align-items: center;
        gap: 2rem;
    }

    .about-left {
        width: 100%;
        padding-right: 0;
        padding: 0;
    }

        .about-left .about-title {
            font-size: 2.2rem;
        }

        .about-left .about-descript {
            font-size: 1.1rem;
        }

        .about-left .home-about-content {
            font-size: 1rem;
        }

        .about-left .about-left-btn {
            padding: 15px 25px;
        }

    .about-left-btn span {
        font-size: 16px;
    }

    .about-right {
        width: 100%;
        max-width: 600px;
    }

        .about-right .about-right-img {
            width: 100%;
            max-width: 100%;
            height: 450px;
            transform: none;
            border-radius: 20px;
        }

        .about-right .about-right-img-sub {
            width: 60%;
            max-width: 320px;
            height: 220px;
            bottom: -120px;
            right: 20px;
            border-radius: 20px;
            display: none;
        }
}

/* Mobile (≤480px) */
@media (max-width: 480px) {
    .about-right {
        display: none;
    }

    .home-about-container {
        padding-bottom: 40px;
    }

        .home-about-container .home-title {
            font-size: 1.8rem;
            padding: 15px;
        }

    .about-left .about-title {
        font-size: 1.6rem;
        margin-bottom: 0.8rem;
    }

    .about-left .about-descript {
        font-size: 1rem;
        margin-bottom: 1rem;
    }

    .about-left .home-about-content {
        font-size: 0.9rem;
    }

    .about-left .about-left-btn {
        padding: 12px 20px;
    }

    .about-left-btn span {
        font-size: 14px;
    }

    .about-left-btn .icon {
        width: 11px;
        height: 11px;
        font-size: 8px;
    }

    .about-right .about-right-img {
        height: 300px;
        border-radius: 15px;
    }

    .about-right .about-right-img-sub {
        width: 50%;
        max-width: 200px;
        height: 150px;
        bottom: -80px;
        right: 10px;
        border-width: 3px;
        border-radius: 15px;
    }
}