/* Profile Page CSS */
.hero {
    overflow: hidden;
}

.show-more-btn::before {
    content: "";
    background: url('data:image/svg+xml,<svg width="54" height="1" viewBox="0 0 54 1" fill="none" xmlns="http://www.w3.org/2000/svg"><line y1="0.5" x2="54" y2="0.5" stroke="%23888161"/></svg>');
    width: 54px;
    height: 1px;
    position: absolute;
    left: -60px;
    bottom: 15px;
}

.show-less-btn::before {
    content: "";
    background: url('data:image/svg+xml,<svg width="54" height="1" viewBox="0 0 54 1" fill="none" xmlns="http://www.w3.org/2000/svg"><line y1="0.5" x2="54" y2="0.5" stroke="%23888161"/></svg>');
    width: 54px;
    height: 1px;
    position: absolute;
    left: -60px;
    bottom: 15px;
}

.show-more-btn:hover,
.show-less-btn:hover {
    color: var(--black);
}

.hero-detail .title {
    font-size: 60px;
    margin-bottom: 106px;
}

.hero-detail .title::after {
    content: "";
    background: url('data:image/svg+xml,<svg width="54" height="3" viewBox="0 0 54 3" fill="none" xmlns="http://www.w3.org/2000/svg"><line y1="1.5" x2="54" y2="1.5" stroke="%23888161" stroke-width="3"/></svg>');
    width: 54px;
    height: 3px;
    position: absolute;
    left: 0;
    bottom: -45px;
}

.similar-block .caption {
    font-family: var(--roboto-font);
    font-size: var(--font-size-12);
    font-weight: var(--font-weight-600);
    line-height: 32px;
    letter-spacing: 0.12em;
    text-align: center;
    margin-top: 7px;
}

.other-girls-img {
    max-height: inherit;
    height: 255px;
    object-fit: cover;
}

.btn-custom-primary {
    background: var(--primary-color) !important;
    border-radius: 0 !important;
    color: var(--white) !important;
    padding: 20px !important;
    font-family: var(--roboto-font) !important;
    font-size: var(--font-size-12) !important;
    font-weight: var(--font-weight-500) !important;
    line-height: 35px !important;
    letter-spacing: 0.12em !important;
    text-align: center !important;
}

.btn:disabled {
    opacity: unset !important;
    background: #ada995 !important;
}

.section-title {
    margin-bottom: 49px;
    font-size: 40px;
}

.other-girls-section {
    margin-top: 50px;
}


.ecommerce-gallery li img {
    max-height: 650px;
    height: 650px;
    width: 600px;
}

#gallery-static-preview img {
    max-height: 650px;
    height: 650px;
    width: 600px;
}

.lSPager li {
    max-height: 145px;
    height: 145px !important;
}

.ecommerce-gallery.lSPager li:last-child {
    margin-right: 0 !important;
}

.lSPThumb {
    margin-top: 7px !important;
    gap: 7px;
}

.profile-flex-container {
    display: flex;
    gap: 80px;
    align-items: flex-start;
    flex-wrap: wrap;
}

.profile-left {
    flex: 0 1 465px;
    max-width: 100%;
}

.profile-right {
    flex: 1;
    min-width: 0;
}

/* Vertical spacing between title, line, and bio */
.title {
    margin-bottom: 0;
}

.divider {
    height: 1px;
    background-color: #ccc;
    margin: 53px 0;
    /* 53px above and below */
}

/* Responsive: stack on smaller screens */
@media (max-width: 991.98px) {
    .profile-flex-container {
        flex-direction: column;
        gap: 40px;
    }

    .profile-left,
    .profile-right {
        width: 100%;
        max-width: 100%;
    }
}

@media (max-width: 1199px) {
    .profile-flex-container {
        gap: 40px;
    }

    .profile-left {
        flex: 1 1 100%;
        max-width: 100%;
    }

    .profile-right {
        flex: 1 1 100%;
        min-width: 100%;
    }
}



.enlarge-icon {
    position: absolute;
    bottom: -300px !important;
    right: 19px !important;
    top: unset !important;
    width: 17px !important;
    height: 17px !important;
}

.layout-wrapper {
    position: relative;
    overflow-x: clip;
}

/* This handles the background image outside the container */
.background-decorator {
    content: "";
    background: url('../img/sei_rotet.svg') no-repeat center center;
    background-size: contain;
    width: 800px;
    height: 804.4px;
    position: absolute;
    top: 80px;
    right: 220px;
    z-index: 0;
    pointer-events: none;
}


/* Responsive Screen */

/* Extra Small Devices (phones, less than 576px) */

@media (min-width: 320px) and (max-width: 574.98px) {
    .other-girls-img {
        height: 200px !important;
    }

    #gallery-static-preview img {
        height: 422.5px !important;
        width: 390px !important;
    }
    .section-title {
        font-size: 32px !important;
    }
}

@media (max-width: 575.98px) {
    .vrmedia-gallery {
        width: 100% !important;
    }

    .ecommerce-gallery li img {
        width: unset !important;
        height: unset !important;
    }

    #gallery-static-preview img {
        max-height: unset !important;
        height: 397px;
        width: 366px;
    }

    .lSPager li {
        height: unset !important;
    }

    #gallery-placeholder {
        height: unset !important;
    }

    .lSGallery {
        margin-bottom: unset !important;
    }

    .other-girl-section {
        margin-top: 0px !important;
    }

    .section-title {
        font-size: 32px;
    }
}

/* Small Devices (phones, 576px and up) */
@media (min-width: 576px) and (max-width: 767.98px) {
    .vrmedia-gallery {
        width: 100% !important;
    }
}

/* Medium Devices (tablets, 768px and up) */
@media (min-width: 768px) and (max-width: 991.98px) {}

/* Large Devices (desktops, 992px and up) */
@media (min-width: 992px) and (max-width: 1199.98px) {}

/* Extra Large Devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {}


/* Max 991.99px */
@media (max-width: 991.98px) {
    .hero-detail .title {
        font-size: 40px;
    }
}