.home{
    max-width: 100%;
    overflow: hidden;
}
.collection-container {
    width: 100%;
    margin: auto;
}
.collection-li {
    font-size: 1.6rem;
    padding: 0.4rem 2rem;
    border-radius: 2rem;
    cursor: pointer;
    font-weight: 500;
    color: var(--text-3);
}
.collection-li:hover {
    color: var(--primary);
    transition: all 200ms ease-in;
}
.collection-li.activeCollectionBtn {
    background-color: var(--bg-2);
    color: var(--primary);
    border-right: 3px solid var(--primary);
    border-left: 3px solid var(--primary);
}
.collection-content {
    height: 0;
    opacity: 0;
    overflow: hidden;
    transition: all 400ms ease-in-out;
    font-size: 1.4rem;
    color: var(--text-1);
}
.collection-content.activeCollectionContent {
    height: auto;
    opacity: 1;
}
/*-----------slider-----------*/
.slider-container {
    width: 100%;
    height: 100%;
    min-height: 40rem;
    max-height: 40rem;
    margin: 0 auto 10rem;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    border-radius: 0.5rem;
    overflow: hidden;
    margin-top: 7rem;
}
.slider-ul {
    width: 100%;
    height: 100%;
    overflow-x: hidden;
    flex-shrink: 0;
    border: 0.1rem solid var(--border-5);
}
.slider-li {
    width: 100%;
    height: 100%;
    scroll-snap-align: start;
    cursor: pointer;
    border: 0;
    overflow: hidden;
    border-radius: 0;
    position: relative;
}
.slider-item {
    width: 100%;
    overflow: hidden;
    position: relative;
    height: clamp(300px, 60vh, 500px); /* ارتفاع واکنش‌گرا */
    border-radius: 1rem; /* اختیاری: برای زیبایی */
}
.slider-item img{
    width: 100%;
    height: 100%;
    object-fit: cover; /* مهم: عکس رو پر می‌کنه بدون کشیدگی */
    object-position: center;
    display: block;
    max-width: none; /* برای جلوگیری از رفتار پیش‌فرض img */
}
.slider-details{
    max-width: 90%;
    transform: translate(50%,-50%);
    position: absolute;
    top: 50%;
    right: 50%;
    z-index: 99;
}
.title-h1 {
    color: var(--text-6);
}
.slider-text{
    /*position: absolute;*/
    /*top: 10rem;*/
    /*right: 5rem;*/
    /*z-index: 99;*/
    text-align: center;
    width: 70rem;
    max-width: 100%;
}
.slider-title{
    font-size: 3rem;
    font-weight: 600;
    color: var(--text-5);
}
.slider-description {
    font-size: 2rem;
    font-weight: 400;
    color: var(--text-4);
}
.slider-form{
    background-color: rgba(255, 255, 255, 0.2);
    width: 70rem;
    margin-top: 2rem;
    max-width: 100%;
    height: 5rem;
    border-radius: 0.5rem;
    border: 2px solid #a385fd;
    z-index: 9;
}
.slider-form input{
    width: 100%;
    background-color: transparent;
    padding: 0.4rem 1.5rem;
    color: var(--text-6);
    font-size: 1.6rem;
}
.slider-form:has(input:focus) {
    border: 2px solid var(--primary);
}
.slider-icon-cover{
    width: 5rem;
    height: 5rem;
    background-color: transparent;
}
.slider-icon-cover svg{
    width: 2.5rem;
    height: 2.5rem;
    fill: var(--text-6);
    transition: all 400ms;
}
.slider-icon-cover:hover svg{
    transform: scale(1.1);
}
.circle {
    position: absolute;
    top: calc(100% - 150px);
    left: calc(1% - 150px);
    width: 300px;
    height: 300px;
    border-radius: 50%;
    box-shadow:
        inset 0 0 50px #fff,
        inset 20px 0 80px #f0f,
        inset -20px 0 80px #0ff,
        inset 20px 0 300px #f0f,
        inset -20px 0 300px #0ff,
        0 0 50px #fff,
        -10px 0 80px #f0f,
        10px 0 80px #0ff;
}
/*-----Services-----*/
.service-container {
    width: 100%;
    margin: 0 auto 10rem;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}
.service-title{
    font-size: 1.6rem;
    font-weight: 600;
    width: 100%;
    margin: 1rem auto;
    color: var(--text-1);
}
.service-ul{
    width: 100%;
    max-width: 100%;
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: calc(100% / 4);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scrollbar-width: none;
    flex-shrink: 0;
    flex-grow: 0;
    border: none;
}
.service-li{
    height: 100%;
    max-height: 50rem;
    margin: auto 1rem auto 0;
    border-radius: 1rem;
    overflow: hidden;
    background-color: #daecea;
    position: relative;
    flex-grow: 1;
    user-select: none;
}
.service-li:first-child{
     margin-right:  0;
 }

.service-li::after {
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    transition: opacity 0.3s ease;
    background: linear-gradient(243.87deg,
    #91cefd 2.04%,
    #ebbdf2 83.55%);
}
.service-li:hover::after {
    opacity: 1;
}
.service-li:hover * {
    color: #0b0c0e;
    fill: #0b0c0e;
    stroke: #0b0c0e;
}
.service-box {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 3rem 2rem;
    cursor: pointer;
}
.service-box-head{
    width: 100%;
}
.service-box-body{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    flex: 1;
}
.icon-service{
    width: 4rem;
    height: 4rem;
    margin-bottom: 1rem;
    fill: #323439;
}
.star-wrapper{
    margin-bottom: 1rem;
}
.icon-star{
    width: 1.4rem;
    height: 1.4rem;
    margin-left: 0.4rem;
    fill: #ff8108;
    stroke: #ff8108;
}
.icon-star-f{
    transform: rotateY(180deg);
}
/*------Introduction------*/
.introduction-container {
    width: 100%;
    margin: 0 auto 10rem;
}
.introduction-content {
    width: 100%;
    height: 100%;
    border-radius: 0.5rem;
}
.introduction-rgt{
    width: 40%;
    height: 50rem;
    display: flex;
    align-items: center;
    justify-content: center;
}
.introduction-cover {
    width: 100%;
    height: 100%;
    border-radius: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
}
.introduction-cover img {
    width: 100%;
    height: 100%;
    border-radius: 0.5rem;
    object-fit: contain;
}
.introduction-left {
    width: 60%;
    height: 100%;
    display: flex;
    flex-direction: column;
    padding: 3rem 2rem;
}
.introduction-title {
    font-size: 2.5rem;
    font-weight: 900;
    margin-bottom: 2rem;
    color: var(--text-2);
}
.introduction-description {
    font-size: 1.4rem;
    color: var(--text-2);
    line-height: 2.5rem;
}
.introduction-second-title {
    font-size: 2rem;
    font-weight: 700;
    margin: 2rem 0 1rem;
    color: var(--text-2);
}

.introduction-ul{
    margin-bottom: 2rem;
}
.introduction-li{
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--text-3);
    padding-bottom: 1rem;
}
.introduction-buttons {
    width: 100%;
}

/*-----support-----*/
.support-container {
    width: 100%;
    margin: 0 auto 10rem;
}
.support-content {
    width: 100%;
    display: flex;
    align-items: stretch;
    justify-content: space-between;
    gap: 2rem;
}
.support-lft,
.support-rgt {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.support-rgt{
    width: 100%;
    gap: 2rem;
}
.support-lft {
    padding: 2rem;
    border: .0625rem solid #e4e5e7;
    border-radius: .75rem;
    text-align: right;
    cursor: pointer;
    transition: all .3s;
    position: relative;
}

.support-rgt-box {
    width: 100%;
    padding: 2rem;
    display: flex;
    align-items: center;
    border: .0625rem solid #e4e5e7;
    border-radius: .75rem;
    text-align: right;
    cursor: pointer;
    transition: all .3s;
}
.img-cover-large {
    width: 100%;
}
.support-text-box {
    width: 100%;
}
.support-img-box{
    max-width: 12rem;
    max-height: 12rem;
    padding: 0.6rem 0.6rem 0.1rem 0.6rem;
    background-color: #f2f7fd;
    margin-left: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 0.5rem;
}
.support-img-box-large{
    margin-bottom: 3rem;
}
.support-img-box-large img{
    width: 100%;
    height: auto;
    object-fit: cover;
}
.support-head-container:hover .arrow-icon {
    display: block;
}
.arrow-icon {
    width: 1.6rem;
    height: 1.6rem;
    fill: var(--primary);
    transform: rotate(-90deg);
    display: none;
}
.support-btn-container {
    margin-top: 1rem;
    flex-wrap: wrap;
}
.support-btn-container-large{
    margin-top: 3rem;
}
/*---------------------------Platform-----*/
.platform-container {
    width: 100%;
    position: relative;
    display: flex;
    align-items: center;
    padding: 3rem 0;
    margin: 0 auto 10rem;
}
.platform-content {
    width: 90%;
    padding: 1rem;
    margin: auto;
    display: flex;
    align-items: center;
    justify-content: flex-start; /* آیتم‌ها از ابتدا */
    gap: 2rem;
    overflow-x: auto;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
}
.platform-content::-webkit-scrollbar { display: none; }

.scroll-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: transparent;
    border: none;
    padding: 0.5rem;
    cursor: pointer;
}
.scroll-btn svg {
    fill: var(--text-1);
    transition: all 0.3s;
}
.scroll-btn:hover svg {
    fill: var(--text-1);
}
.scroll-left {
    left: 0;
    transform: rotate(-90deg);
}
.scroll-right {
    right: 0;
    transform: rotate(90deg);
}
.platform-box{
    flex-shrink: 0;
    min-width: 15rem;
    width: calc((100% / 7) - 3rem);
    padding: 1rem 2rem;
    background-color: var(--bg-1);
    border-radius: 10rem;
    border: 3px solid var(--text-5);
}
.platform-box:last-child{
    margin-left: 0;
}
.platform-box h3{
    width: 100%;
    margin: auto;
    font-size: 1.4rem;
    direction: ltr;
    color: var(--text-3);
    font-weight: 700;
    text-align: center;
}
.glow-on-hover {
    flex: 0 0 calc((100% - 8rem) / 5);
    height: 150px;
    border: none;
    outline: none;
    color: var(--text-2);
    background: #111;
    cursor: pointer;
    position: relative;
    z-index: 0;
    border-radius: 10px;
}

.glow-on-hover:before {
    content: '';
    background: linear-gradient(45deg, #ff0000, #ff7300, #fffb00, #48ff00, #00ffd5, #002bff, #7a00ff, #ff00c8, #ff0000);
    position: absolute;
    top: -2px;
    left:-2px;
    background-size: 400%;
    z-index: -1;
    filter: blur(0);
    width: calc(100% + 4px);
    height: calc(100% + 4px);
    animation: glowing 20s linear infinite;
    opacity: 1;
    transition: opacity .3s ease-in-out;
    border-radius: 10px;
}

.glow-on-hover:hover {
    color: #000;
}

.glow-on-hover:hover:after {
    background: transparent;
}

.glow-on-hover:hover:before {
    opacity: 1;
    background: linear-gradient(45deg, #d4daf7, #dec6f7, #f7bdeb, #f9c7c7);
}

.glow-on-hover:after {
    z-index: -1;
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background: var(--bg-2);
    left: 0;
    top: 0;
    border-radius: 10px;
}

@keyframes glowing {
    0% { background-position: 0 0; }
    50% { background-position: 400% 0; }
    100% { background-position: 0 0; }
}

/*------Head--------*/
.home-head {
    margin-bottom: 4rem;
}
.home-head-title {
    font-size: 2.6rem;
    color: var(--text-2);
    text-align: center;
}
.home-head-caption {
    font-size: 1.4rem;
    color: var(--text-3);
    text-align: center;
    margin: 0.5rem 0 2rem 0;
}
.home-head-line {
    display: block;
    width: 15rem;
    height: 0.2rem;
    margin: 0 auto;
    border-radius: 1rem;
    background-color: var(--primary);
    position: relative;
}
.home-head-line::after {
    content: "";
    display: block;
    width: 4rem;
    height: 1.2rem;
    margin: auto;
    border-radius: 3rem;
    background-color: var(--primary);
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}
.support-head-btn-container{
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 3rem 0;
    flex-wrap: wrap;
}
.support-head-btn{
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: 2rem;
    margin-top: 1rem;
}
.support-head-btn:last-child{
    margin-left: 0;
}
.support-head-btn svg{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.6rem;
    height: 1.6rem;
    fill: var(--success);
}
.support-head-btn span{
     font-size: 1.2rem;
    font-weight: 600;
    margin-right: 1rem;
 }
.introduction-head-btn-container{
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 3rem 0;
    flex-wrap: wrap;
}
.introduction-head-btn{
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem 2rem;
    margin-left: 2rem;
    border: 1px solid #e4e5e7;
    border-radius: 0.5rem;
    margin-top: 1rem;
}
.introduction-head-btn:last-child{
    margin-left: 0;
}
.introduction-head-btn span:first-child{
    font-size: 1.6rem;
    font-weight: 600;
    margin-right: 1rem;
    color: var(--primary);
}
.introduction-head-btn span{
    font-size: 1.2rem;
    font-weight: 600;
    margin-right: 1rem;
    color: var(--text-3);
}
/*------Show btn--------*/
.home-btn{
    width: fit-content;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 1.2rem;
    padding: 0.4rem 2rem;
    border-radius: 5rem;
    color: var(--text-2);
    font-weight: 600;
    border: 1px solid var(--border-5);
    cursor: pointer;
    margin-left: 1rem;
    margin-top: 1rem;
}
.home-btn:last-child{
    margin-left: 0;
}
/*------Show more btn--------*/
.home-more-btn{
    width: fit-content;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 1.4rem;
    padding: 0.8rem 2rem;
    border-radius: 0.5rem;
    color: var(--primary);
    border: 1px solid var(--primary);
    margin-top: 5rem;
    cursor: pointer;
}
/*------Image--------*/
.home-img-cover{
    width: 100%;
    height: 100%;
    padding: 0.2rem;
    border-radius: 0.5rem;
}
.home-img-cover img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 0.5rem;
}
/*------Title 1--------*/
.home-title {
    color: var(--text-1);
    margin-bottom: 2rem ;
    font-size: 2rem ;
    font-weight: 600 ;
}
/*------Title 2--------*/
.home-child-title{
    color: var(--text-1);
    margin-bottom: 1rem ;
    font-size: 1.4rem ;
    font-weight: 600 ;
}
/*------Text--------*/
.home-p{
    color: var(--text-2);
    font-size: 1.4rem ;
    font-weight: 500 ;
    line-height: 3rem;
}
/*------------------offer*/

.offer{
    width: 100%;
    margin: 5rem 0;
}
/*----------------story*/
.story{

}
.story-create-container{

}
.story-create-container .modal-title{
    width: 8rem;
    height: 8rem;
    border-radius: 50%;
    overflow: hidden;
    cursor: pointer;
    padding: 0.2rem;
    border: 2px solid var(--border-5);
}
.story-create-container svg{
    transform: rotate(45deg);
    width: 2.5rem;
    height: 2.5rem;
    fill: var(--text-2);
}
.story .story-title{
    display: block;
    text-align: center;
    font-size: 1.2rem;
    margin-top: 0.5rem;
    font-weight: 400;
}
.story-cover{
    width: 8rem;
    height: 8rem;
    border-radius: 50%;
    overflow: hidden;
    cursor: pointer;
    padding: 0.2rem;
    border: 2px solid var(--border-5);
}
.story-cover img{
    object-fit: cover;
    width: 100%;
    height: 100%;
    border-radius: 50%;
}
#videoModal{
    display:none;
    width: 400px;
    height: auto;
    z-index: 999;
    margin: auto;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateY(-50%) translateX(-50%);
}
#videoPlayer{
    width: -webkit-fill-available;
}
/*----------------home global*/
.sr-only{
    display: none !important;
}