*{margin:0;padding:0}
html{
    background-color:#eefbf8;
    background-image:
      radial-gradient(circle,hsla(0,0%,100%,.1),hsla(0,0%,0%,.75)),
      linear-gradient(left,transparent 50%,hsla(0,0%,0%,.01) 50%);
    background-position:50% 75%,50% 50%;
    background-repeat:no-repeat,repeat;
    background-size:150% 150%,3em 3em;
}

/* -------------------------
   SLIDER FRAME — SAME STYLE 
   JUST FIXED WIDTH/HEIGHT 
------------------------- */
.slider-frame{
    background:#fff;
    box-shadow: inset 0 0 2px hsla(0,0%,0%,.2),
                0 3px 1px hsla(0,0%,100%,.75),
                0 -1px 1px 2px hsla(0,0%,0%,.1);
    width:25em;
    height:25em;
    position:absolute;
    top:50%;
    left:50%;
    margin:-12.5em -12.5em;
    padding:.5em;
}

/* wood frame & mat same as before */
.slider-frame:before{
    background:#22130c;
    content:"";
    position:absolute;
    top:-2.5em;left:-2.5em;right:-2.5em;bottom:-2.5em;
    z-index:-1;
    box-shadow: inset 0 1px 1px 1px hsla(0,0%,100%,.2),
                inset 0 -2px 1px hsla(0,0%,0%,.4),
                0 5px 50px hsla(0,0%,0%,.25),
                0 20px 20px -15px hsla(0,0%,0%,.2),
                0 30px 20px -15px hsla(0,0%,0%,.15),
                0 40px 20px -15px hsla(0,0%,0%,.1);
}
.slider-frame:after{
    background:#fff5e5;
    content:"";
    position:absolute;
    top:-1.5em;left:-1.5em;right:-1.5em;bottom:-1.5em;
    z-index:-1;
    box-shadow:0 2px 1px hsla(0,0%,100%,.2),
               0 -1px 1px 1px hsla(0,0%,0%,.4),
               inset 0 2px 3px 1px hsla(0,0%,0%,.2),
               inset 0 4px 3px 1px hsla(0,0%,0%,.2),
               inset 0 6px 3px 1px hsla(0,0%,0%,.1);
}

.swiper{ width:100%; height:100%; }

.swiper-slide{
    display:flex;
    justify-content:center;
    align-items:center;
}

.media-wrapper{
    width:100%;
    height:100%;
    position:relative;
}

/* -------------------------
   SHOW FULL IMAGE/VIDEO WITHOUT CROP
------------------------- */
.swiper-slide img,
.swiper-slide video{
    width:100%;
    height:100%;
    object-fit:contain;
    background:#000;
    border-radius:6px;
}

/* -------------------------
   CAPTION UNDER SLIDER
------------------------- */
.slider-text-wrapper{
    text-align:center;
    margin-top:28em; /* تحت السلايدر */
    width:100%;
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%, -50%);
    margin-top:15.5em; /* final perfect spacing */
}

/* underline style EXACT like you wanted background-image: url(https://odoocdn.com/openerp_website/static/src/img/highlights/blue_highlight_01.svg);*/
.slider-caption-label {
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size: 1.5rem;
    font-weight: 600;
    color: #222;

    /* Allow text to wrap into 2 lines */
    white-space: normal;      /* important */
    line-height: 1.3;

    /* Layout */
    display: inline-block;
    text-align: center;
    direction: rtl;

    padding-top: 150px;
    padding-bottom: .35em;
}
/* The underline */
.slider-caption-label::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);

    width: 60%;          /* adjust underline width */
    height: 3px;         /* line thickness */
    background-color: #222;   /* line color */
    border-radius: 2px;
}

@media (max-width: 768px){
        .slider-frame {
        position: relative;
        margin: auto;
        width: 79vw;
        height: 79vw;
        left: 0;
        right: 0;
        top: 120px;
        bottom: 0;
    }
	.slider-caption-label::after {
    bottom: 47px;
	}
    .slider-text-wrapper{
        position:static;
        margin-top:7.2rem;
        transform:none;
    }
	    .slider-caption-label {
        font-size: 1.5rem;
        background-size: cover;
        padding-top: 78px;
    }
}
.back-button {
    position: fixed;
    top: 25px;
    right: 25px;
    z-index: 999;
    background: rgba(255, 255, 255, 0.25);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    
    width: 50px;
    height: 50px;
    border-radius: 50%;
    
    display: flex;
    align-items: center;
    justify-content: center;

    cursor: pointer;
    transition: 0.3s ease;
}

.back-button:hover {
    background: rgba(255, 255, 255, 0.4);
    transform: scale(1.1);
}

/* Arrow icon */
.back-button span {
    font-size: 28px;
    color: #000;
    line-height: 1;
}