.home-page {
    background-color: #ffffff;
    /* display: flex; */
    /* flex-direction: row; */
    /* justify-content: center;
    width: 100%; */
}

.home-page .div {
    background-color: #ffffff;
    overflow: hidden;
    width: 430px;
    height: 3718px;
    position: relative;
}

.home-page .top-bar {
    position: absolute;
    width: 378px;
    height: 36px;
    top: 25px;
    left: 26px;
}

.home-page .frame {
    position: absolute;
    width: 440px;
    height: 156px;
    top: 412px;
    left: -5px;
    background-color: #dadada;
}

.home-page .text-wrapper {
    position: absolute;
    top: 67px;
    left: 192px;
    font-family: "Inter-Bold", Helvetica;
    font-weight: 700;
    color: #000000;
    font-size: 16px;
    text-align: right;
    letter-spacing: 0;
    line-height: normal;
    white-space: nowrap;
}

.home-page .frame-wrapper {
    position: absolute;
    width: 98px;
    height: 5px;
    top: 138px;
    left: 171px;
    background-color: #ffffff;
    border-radius: 16px;
    overflow: hidden;
}

.home-page .frame-2 {
    position: relative;
    width: 24px;
    height: 5px;
    left: 37px;
    background-color: #a6a6a6;
    border-radius: 6px;
}

.home-page .frame-3 {
    position: absolute;
    width: 430px;
    height: 156px;
    top: 910px;
    left: 0;
    background-color: #dadada;
}

.home-page .text-wrapper-2 {
    position: absolute;
    top: 67px;
    left: 187px;
    font-family: "Inter-Bold", Helvetica;
    font-weight: 700;
    color: #000000;
    font-size: 16px;
    text-align: right;
    letter-spacing: 0;
    line-height: normal;
    white-space: nowrap;
}

.home-page .div-wrapper {
    position: absolute;
    width: 98px;
    height: 5px;
    top: 138px;
    left: 166px;
    background-color: #ffffff;
    border-radius: 16px;
    overflow: hidden;
}

.home-page .frame-4 {
    display: inline-flex;
    align-items: flex-start;
    gap: 16px;
    position: absolute;
    top: 583px;
    left: -14px;
}

.home-page .frame-5 {
    display: flex;
    flex-direction: column;
    width: 95px;
    height: 95px;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 22px 4px;
    position: relative;
    background-color: #dadada;
}

.thumbnail {
    background-color: #ffffff;
    border-radius: 12px;
    padding: 10px;
    margin: 10px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    width: 300px;
    height: 200px;
    background-color: #ccc;
}

video {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    /* Cover the entire space while maintaining aspect ratio */
}

img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    /* Cover the entire space while maintaining aspect ratio */
}

.text-wrapper-3 {
    position: relative;
    width: fit-content;
    font-family: "Inter-Bold", Helvetica;
    font-weight: 700;
    color: #000000;
    font-size: 14px;
    text-align: center;
    letter-spacing: 0;
    line-height: 20.9px;
    direction: rtl;
}


.frame-6 {
    align-items: center;
    /*
    for the slider
    */
    display: flex;
    overflow: hidden;
}

.frame-7,
.frame-8 {
    flex: 1;
    text-align: center;
    padding: 0 10px;
    /*
    for the slider
    */
    flex: 0 0 33.33%;

}

@media (min-width: 768px) {
    .frame-7 {
        flex: 0 0 auto;
        /* Allow as many stories as possible with 10px padding */
        margin-right: 10px;
        /* width: 500px; */
    }

    .slider-controls {
        margin-top: 10px;
    }

    .prev-btn,
    .next-btn {
        cursor: pointer;
    }



}


.text-wrapper-4 {
    background-color: #ffffff;
    border-radius: 12px;
    /* padding: 7px; */
    margin: 5px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    width: 150px;
    height: 200px;
}



.home-page .frame-9 {
    display: flex;
    flex-direction: column;
    width: 430px;
    height: 38px;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 67px 22px;
    position: absolute;
    top: 359px;
    left: 0;
    background-color: #dadada;
}

.home-page .text-wrapper-5 {
    position: relative;
    width: fit-content;
    margin-top: -58.5px;
    margin-bottom: -56.5px;
    font-family: "Inter-Bold", Helvetica;
    font-weight: 700;
    color: #000000;
    font-size: 16px;
    text-align: right;
    letter-spacing: 0;
    line-height: normal;
    white-space: nowrap;
}

.home-page .frame-10 {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 30px;
    position: absolute;
    top: 1096px;
    left: 14px;
}

.home-page .text-wrapper-6 {
    position: relative;
    width: fit-content;
    margin-top: -1px;
    font-family: "Cairo-Bold", Helvetica;
    font-weight: 700;
    color: #000000;
    font-size: 24px;
    text-align: center;
    letter-spacing: 0;
    line-height: normal;
    direction: rtl;
}

.home-page .frame-11 {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 45px;
    position: relative;
    flex: 0 0 auto;
}

.home-page .frame-12 {
    display: inline-flex;
    flex-direction: column;
    height: 766px;
    align-items: center;
    justify-content: space-between;
    position: relative;
}

.home-page .frame-13 {
    display: flex;
    width: 401px;
    align-items: center;
    justify-content: space-between;
    position: relative;
    flex: 0 0 auto;
}

.home-page .frame-14 {
    display: inline-flex;
    flex-direction: column;
    height: 353px;
    align-items: center;
    justify-content: space-between;
    position: relative;
    flex: 0 0 auto;
}

.home-page .frame-15 {
    display: inline-flex;
    flex-direction: column;
    height: 304px;
    align-items: flex-end;
    justify-content: space-between;
    position: relative;
}

.home-page .frame-16 {
    position: relative;
    width: 190px;
    height: 190px;
    border-radius: 5px;
    overflow: hidden;
    background-image: url(./img/frame-64-2.png);
    background-size: cover;
    background-position: 50% 50%;
}

.home-page .overlap-group {
    position: absolute;
    width: 189px;
    height: 66px;
    top: 0;
    left: 0;
    background: linear-gradient(180deg, rgb(51, 51, 51) 0%, rgba(51, 51, 51, 0) 100%);
}

.home-page .vector {
    position: absolute;
    width: 19px;
    height: 15px;
    top: 13px;
    left: 158px;
}

.home-page .frame-17 {
    display: inline-flex;
    flex-direction: column;
    height: 24px;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 10px;
    position: absolute;
    top: 159px;
    left: 128px;
    background-color: #c23a3a;
    border-radius: 4px;
}

.home-page .text-wrapper-7 {
    position: relative;
    width: 34px;
    margin-top: -10px;
    margin-bottom: -8px;
    font-family: "Cairo-Regular", Helvetica;
    font-weight: 400;
    color: #ffffff;
    font-size: 12px;
    letter-spacing: 0;
    line-height: normal;
    direction: rtl;
}

.home-page .frame-18 {
    display: inline-flex;
    flex-direction: column;
    height: 94px;
    align-items: flex-end;
    position: relative;
}

.home-page .frame-19 {
    display: inline-flex;
    flex-direction: column;
    height: 50px;
    align-items: flex-end;
    justify-content: space-between;
    position: relative;
}

.home-page .text-wrapper-8 {
    position: relative;
    width: fit-content;
    margin-top: -1px;
    font-family: "Cairo-Bold", Helvetica;
    font-weight: 700;
    color: #333333;
    font-size: 14px;
    letter-spacing: 0;
    line-height: normal;
    direction: rtl;
}

.home-page .text-wrapper-9 {
    position: relative;
    width: fit-content;
    margin-top: -2px;
    font-family: "Cairo-Regular", Helvetica;
    font-weight: 400;
    color: #979696;
    font-size: 14px;
    text-align: right;
    letter-spacing: 1.4px;
    line-height: normal;
}

.home-page .frame-20 {
    display: flex;
    width: 38px;
    height: 19px;
    align-items: center;
    justify-content: space-between;
    position: relative;
}

.home-page .text-wrapper-10 {
    position: relative;
    width: fit-content;
    margin-top: -4px;
    margin-bottom: -2px;
    font-family: "Cairo-Regular", Helvetica;
    font-weight: 400;
    color: #333333;
    font-size: 14px;
    text-align: right;
    letter-spacing: 0;
    line-height: 25px;
    white-space: nowrap;
}

.home-page .img {
    position: relative;
    width: 14px;
    height: 12px;
}

.home-page .text-wrapper-11 {
    position: relative;
    width: fit-content;
    font-family: "Cairo-Bold", Helvetica;
    font-weight: 700;
    color: #333333;
    font-size: 14px;
    text-align: right;
    letter-spacing: 0;
    line-height: normal;
}

.home-page .frame-21 {
    display: flex;
    width: 185px;
    height: 37px;
    align-items: center;
    justify-content: center;
    gap: 10px;
    position: relative;
    background-color: #ffffff;
    border-radius: 5px;
    box-shadow: 0px 0px 9px #00000024;
}

.home-page .frame-22 {
    position: relative;
    width: 103px;
    height: 25px;
}

.home-page .text-wrapper-12 {
    position: absolute;
    top: -1px;
    left: 9px;
    font-family: "Cairo-SemiBold", Helvetica;
    font-weight: 600;
    color: #000000;
    font-size: 13px;
    letter-spacing: 0;
    line-height: 25px;
    white-space: nowrap;
    direction: rtl;
}

.home-page .plus {
    position: absolute;
    width: 17px;
    height: 17px;
    top: 4px;
    left: 83px;
}

.home-page .frame-23 {
    position: relative;
    width: 190px;
    height: 190px;
    border-radius: 5px;
    overflow: hidden;
    background-image: url(./img/frame-64-3.png);
    background-size: cover;
    background-position: 50% 50%;
}

.home-page .vector-wrapper {
    position: absolute;
    width: 191px;
    height: 66px;
    top: 0;
    left: 0;
    background: linear-gradient(180deg, rgb(51, 51, 51) 0%, rgba(51, 51, 51, 0) 100%);
}

.home-page .vector-2 {
    position: absolute;
    width: 19px;
    height: 15px;
    top: 14px;
    left: 159px;
}

.home-page .frame-24 {
    display: inline-flex;
    flex-direction: column;
    height: 24px;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 10px;
    position: absolute;
    top: 158px;
    left: 136px;
    background-color: #c23a3a;
    border-radius: 4px;
}

.home-page .text-wrapper-13 {
    position: relative;
    width: fit-content;
    margin-top: -10px;
    margin-bottom: -8px;
    font-family: "Cairo-Regular", Helvetica;
    font-weight: 400;
    color: #ffffff;
    font-size: 12px;
    letter-spacing: 0;
    line-height: normal;
    direction: rtl;
}

.home-page .frame-25 {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-end;
    position: relative;
    flex: 0 0 auto;
}

.home-page .frame-26 {
    display: inline-flex;
    flex-direction: column;
    height: 49px;
    align-items: flex-end;
    justify-content: space-between;
    position: relative;
}

.home-page .text-wrapper-14 {
    position: relative;
    width: fit-content;
    margin-top: -3px;
    font-family: "Cairo-Regular", Helvetica;
    font-weight: 400;
    color: #979696;
    font-size: 14px;
    text-align: right;
    letter-spacing: 1.4px;
    line-height: normal;
}

.home-page .frame-27 {
    position: relative;
    width: 190px;
    height: 190px;
    border-radius: 5px;
    overflow: hidden;
    background-image: url(./img/frame-64-5.png);
    background-size: cover;
    background-position: 50% 50%;
}

.home-page .frame-28 {
    display: inline-flex;
    flex-direction: column;
    height: 350px;
    align-items: center;
    justify-content: space-between;
    position: relative;
    flex: 0 0 auto;
}

.home-page .frame-29 {
    position: relative;
    width: 190px;
    height: 190px;
    border-radius: 5px;
    overflow: hidden;
    background-image: url(./img/frame-64-4.png);
    background-size: cover;
    background-position: 50% 50%;
}

.home-page .frame-30 {
    display: flex;
    width: 395px;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 9px 180px;
    position: relative;
    flex: 0 0 auto;
    background-color: #000000;
    border-radius: 5px;
    overflow: hidden;
}

.home-page .text-wrapper-15 {
    position: relative;
    width: fit-content;
    margin-top: -1px;
    margin-left: -16px;
    margin-right: -16px;
    font-family: "Cairo-Bold", Helvetica;
    font-weight: 700;
    color: #ffffff;
    font-size: 14px;
    text-align: center;
    letter-spacing: 0;
    line-height: normal;
    direction: rtl;
}

.home-page .overlap-wrapper {
    position: absolute;
    width: 430px;
    height: 221px;
    top: 2090px;
    left: 0;
    background-image: url(./img/frame-74.png);
    background-size: cover;
    background-position: 50% 50%;
}

.home-page .overlap {
    position: relative;
    width: 404px;
    height: 221px;
    left: 26px;
    background: linear-gradient(180deg, rgb(0, 0, 0) 0%, rgba(89, 115, 90, 0) 100%, rgba(0, 0, 0, 0) 100%);
}

.home-page .frame-31 {
    display: inline-flex;
    flex-direction: column;
    height: 166px;
    align-items: flex-end;
    justify-content: space-between;
    position: relative;
    top: 28px;
    left: 148px;
}

.home-page .frame-32 {
    display: flex;
    flex-direction: column;
    width: 239px;
    height: 128px;
    align-items: flex-end;
    justify-content: space-between;
    position: relative;
}

.home-page .return-svgrepo-com {
    position: relative;
    width: 39px;
    height: 39px;
}

.home-page .element {
    position: relative;
    width: 239px;
    margin-top: -2px;
    font-family: "Cairo-Bold", Helvetica;
    font-weight: 700;
    color: #ffffff;
    font-size: 32px;
    letter-spacing: 0;
    line-height: 45px;
    direction: rtl;
}

.home-page .text-wrapper-16 {
    position: relative;
    width: fit-content;
    margin-top: -8px;
    font-family: "Cairo-Regular", Helvetica;
    font-weight: 400;
    color: #ffffff;
    font-size: 10px;
    letter-spacing: 0;
    line-height: 45px;
    text-decoration: underline;
    white-space: nowrap;
    direction: rtl;
}

.home-page .frame-33 {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 28px;
    position: absolute;
    top: 2352px;
    left: 18px;
}

.home-page .frame-34 {
    display: flex;
    width: 395px;
    align-items: flex-start;
    justify-content: space-between;
    position: relative;
    flex: 0 0 auto;
}

.home-page .frame-35 {
    display: inline-flex;
    flex-direction: column;
    height: 292px;
    align-items: flex-end;
    justify-content: space-between;
    position: relative;
    flex: 0 0 auto;
}

.home-page .overlap-group-wrapper {
    position: relative;
    width: 185px;
    height: 210px;
    border-radius: 5px;
    overflow: hidden;
    background-image: url(./img/frame-64.png);
    background-size: cover;
    background-position: 50% 50%;
}

.home-page .img-wrapper {
    position: relative;
    height: 66px;
    background: linear-gradient(180deg, rgb(51, 51, 51) 0%, rgba(51, 51, 51, 0) 100%);
}

.home-page .vector-3 {
    position: absolute;
    width: 19px;
    height: 16px;
    top: 15px;
    left: 154px;
}

.home-page .frame-36 {
    position: relative;
    width: 185px;
    height: 210px;
    border-radius: 5px;
    overflow: hidden;
    background-image: url(./img/image.png);
    background-size: cover;
    background-position: 50% 50%;
}

.home-page .p {
    position: relative;
    width: 395px;
    font-family: "Cairo-Regular", Helvetica;
    font-weight: 400;
    color: #979696;
    font-size: 14px;
    text-align: center;
    letter-spacing: 0;
    line-height: normal;
    direction: rtl;
}

.home-page .text-wrapper-17 {
    position: relative;
    width: fit-content;
    margin-top: -1px;
    font-family: "Cairo-Bold", Helvetica;
    font-weight: 700;
    color: #ffffff;
    font-size: 14px;
    text-align: center;
    letter-spacing: 0;
    line-height: normal;
    direction: rtl;
}

.home-page .footer {
    position: absolute;
    width: 430px;
    height: 382px;
    top: 2978px;
    left: 0;
    background-color: #000000;
}

.home-page .frame-37 {
    display: inline-flex;
    flex-direction: column;
    height: 342px;
    align-items: center;
    justify-content: space-between;
    position: relative;
    top: 20px;
    left: 26px;
}

.home-page .frame-38 {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    position: relative;
    flex: 0 0 auto;
}

.home-page .logo {
    position: relative;
    width: 86px;
    height: 36px;
    margin-right: -2px;
}

.home-page .logo-2 {
    position: absolute;
    width: 24px;
    height: 32px;
    top: 0;
    left: 0;
}

.home-page .FACE-DEER {
    position: absolute;
    width: 55px;
    top: 5px;
    left: 29px;
    font-family: "BR Firma-Black", Helvetica;
    font-weight: 900;
    color: #ffffff;
    font-size: 18px;
    letter-spacing: 0;
    line-height: 15px;
}

.home-page .frame-39 {
    position: relative;
    width: 33px;
    flex: 0 0 auto;
}

.home-page .frame-40 {
    display: inline-flex;
    flex-direction: column;
    height: 153px;
    align-items: center;
    justify-content: space-between;
    position: relative;
}

.home-page .frame-41 {
    display: flex;
    width: 376px;
    align-items: center;
    justify-content: space-between;
    position: relative;
    flex: 0 0 auto;
}

.home-page .vector-4 {
    position: relative;
    width: 12px;
    height: 7px;
    margin-left: -1px;
}

.home-page .text-wrapper-18 {
    position: relative;
    width: fit-content;
    margin-top: -1px;
    font-family: "Cairo-Bold", Helvetica;
    font-weight: 700;
    color: #ffffff;
    font-size: 16px;
    text-align: left;
    letter-spacing: 0;
    line-height: 15px;
    white-space: nowrap;
    direction: rtl;
}

.home-page .line {
    position: relative;
    width: 377.02px;
    height: 1px;
}

.home-page .frame-42 {
    display: inline-flex;
    align-items: center;
    gap: 16px;
    position: relative;
    flex: 0 0 auto;
}

.home-page .file {
    position: relative;
    width: 28px;
    height: 36px;
}

.home-page .gold-logo {
    position: relative;
    width: 42px;
    height: 21px;
    object-fit: cover;
}

.home-page .frame-43 {
    display: inline-flex;
    flex-direction: column;
    height: 41px;
    align-items: center;
    gap: 12px;
    position: relative;
}

.home-page .text-wrapper-19 {
    position: relative;
    width: 138px;
    height: 14px;
    margin-top: -1px;
    font-family: "Cairo-Regular", Helvetica;
    font-weight: 400;
    color: #ffffff;
    font-size: 10px;
    text-align: left;
    letter-spacing: 0;
    line-height: 4px;
    direction: rtl;
}

.home-page .frame-44 {
    display: flex;
    width: 157px;
    align-items: center;
    justify-content: space-between;
    position: relative;
    flex: 0 0 auto;
}

.home-page .text-wrapper-20 {
    position: relative;
    width: fit-content;
    margin-top: -1px;
    font-family: "Cairo-Regular", Helvetica;
    font-weight: 400;
    color: #ffffff;
    font-size: 14px;
    letter-spacing: 0;
    line-height: 15px;
    white-space: nowrap;
}

.home-page .logo-3 {
    position: relative;
    width: 76px;
    height: 15px;
}

.home-page .navbar {
    display: flex;
    width: 361px;
    align-items: center;
    justify-content: space-between;
    position: absolute;
    top: 165px;
    left: 34px;
}

.home-page .text-wrapper-21 {
    position: relative;
    width: fit-content;
    margin-top: -1px;
    font-family: "Cairo-Regular", Helvetica;
    font-weight: 400;
    color: #000000;
    font-size: 15px;
    text-align: center;
    letter-spacing: 0;
    line-height: normal;
    direction: rtl;
}

.home-page .text-wrapper-22 {
    position: relative;
    width: fit-content;
    margin-top: -1px;
    font-family: "Cairo-Bold", Helvetica;
    font-weight: 700;
    color: #000000;
    font-size: 15px;
    text-align: center;
    letter-spacing: 0;
    line-height: normal;
    direction: rtl;
}

.home-page .frame-45 {
    display: inline-flex;
    align-items: flex-start;
    gap: 20px;
    position: absolute;
    top: 692px;
    left: 17px;
}

.home-page .banner-wrapper {
    display: flex;
    flex-direction: column;
    width: 188px;
    height: 204px;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 10px;
    position: relative;
    background-color: #dadada;
}

.home-page .banner {
    position: relative;
    width: fit-content;
    font-family: "Inter-Bold", Helvetica;
    font-weight: 700;
    color: #000000;
    font-size: 14px;
    text-align: center;
    letter-spacing: 0;
    line-height: 20.9px;
}

.home-page .bar-wrapper {
    display: flex;
    flex-direction: column;
    width: 431px;
    height: 77px;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 10px;
    position: absolute;
    top: 72px;
    left: -1px;
    background-color: #ffffff;
    box-shadow: 0px 4px 7px #0000000f;
}

.home-page .bar {
    display: flex;
    width: 397px;
    align-items: center;
    justify-content: space-between;
    position: relative;
    flex: 0 0 auto;
    background-color: #ffffff;
}

.home-page .frame-46 {
    display: flex;
    width: 76px;
    align-items: flex-end;
    justify-content: space-between;
    position: relative;
}

.home-page .shopping-cart {
    position: relative;
    width: 26px;
    height: 26px;
}

.home-page .likes {
    position: relative;
    width: 31px;
    height: 32px;
}

.home-page .overlap-2 {
    position: relative;
    width: 33px;
    height: 32px;
}

.home-page .heart {
    position: absolute;
    width: 24px;
    height: 24px;
    top: 8px;
    left: 0;
}

.home-page .notification-badge {
    position: absolute;
    width: 16px;
    height: 14px;
    top: 0;
    left: 17px;
}

.home-page .overlap-group-2 {
    position: relative;
    width: 14px;
    height: 14px;
    background-color: #eb0000;
    border-radius: 7px;
}

.home-page .text-wrapper-23 {
    position: absolute;
    width: 5px;
    top: 0;
    left: 4px;
    font-family: "Cairo-Bold", Helvetica;
    font-weight: 700;
    color: #ffffff;
    font-size: 8px;
    text-align: right;
    letter-spacing: 0;
    line-height: normal;
    white-space: nowrap;
}

.home-page .frame-47 {
    display: flex;
    width: 59px;
    align-items: center;
    justify-content: space-between;
    padding: 10px 0px;
    position: relative;
}

.home-page .search {
    position: relative;
    width: 24px;
    height: 24px;
}

.home-page .side-bar {
    position: relative;
    flex: 0 0 auto;
    height: 9px;
    margin-right: -1px;
}

.home-page .frame-48 {
    position: fixed;
    width: 32px;
    height: 93px;
    top: 667px;
    left: 398px;
}

.pop-video-container {
    display: none;
    position: fixed;
    z-index: 9999;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    justify-content: center;
    align-items: center;
    order: 2;
}

.pop-video {
    background-color: #ffffff;
    border-radius: 12px;
    padding: 10px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    /* max-width: 80%; */
    width: 50%;
    height: 70%;
    object-fit: cover;
    /* Adjusted maximum width */
    /* max-height: 80%; */
    /* Adjusted maximum height */
}

.video-container {
    position: relative;
    width: 100%;
    height: 100%;
}

.videoPlayer-pop-up {
    width: 100%;
    height: 100%;
    /* object-fit: contain; */
    object-fit: cover;
    order: 1;
}









.pop-image-container {
    display: none;
    position: fixed;
    z-index: 9999;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    /*background: rgba(0, 0, 0, 0.5);*/
    /* Darkened background */
    justify-content: center;
    align-items: center;
    order: 2;
}

.pop-image {
    background-color: #575555d4;
    border-radius: 12px;
    padding: 10px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    /* max-width: 80%; */
    width: 50%;
    height: 70%;

}

.image-container {
    position: relative;
    width: 100%;
    height: 100%;
}

.imagePlayer-pop-up {
    width: 100%;
    height: 100%;
    /* object-fit: contain; */
    object-fit: cover;
    order: 1;
}