:root{
    --dark: #221114;
    --dark-2 : #2d161a;
    --dark-3: #3a1f24;
    --border: #47242a;
    --accent: #cf1736;
    --accent-hover: #e01d3f;
    --muted: #c8939c;
    --text: #fff;
    --text-down: #b88a91;
    --subtitle:#848484;
    --fast:1px solid black;
}


/*----------------------------------------- main-top */
.main-org{
    width: 100%;
    /* display: none; */

}

.main-top{
    width: 100%;
    height: 44rem;
    background: linear-gradient(360deg,#0c0305db,#37181d47), url("../image/hero.png");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    box-shadow: 0 10px 30px -2px var(--dark-2);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: var(--text);
}

.main-top__icon{
    width: 13rem;
    height: 13rem;
    filter: drop-shadow(0 0 5px rgb(93, 15, 28));
    animation: ani 3000ms ease-in-out infinite;
}
.main-top__title{
    margin-top: 1rem;
    font-size: 3rem;
    filter: drop-shadow(0 0 5px rgb(207, 23, 54));
}
.main-top__subtitle{
    margin-bottom: 1.5rem;
    color: var(--text-down);
}
.main-top-btns{
    margin-top: 1rem;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.8rem;
}
.main-top-btns button{
    width: 10rem;
    height: 3.5rem;
    border-radius: 0.5rem;
    cursor: pointer;
    font-size: 1rem;
    transition: all 100ms ease-in 5ms;

}
.main-top__button__kavosh{
    background-color: var(--accent);
}
.main-top__button__sections{
    background-color: #47242a50;
    border: var(--subtitle) 1px solid;
}
.main-top__button__kavosh:hover{
    transform: translateY(-6px);
    transform: scale(1.05);
    box-shadow: 0 5px 20px -2px var(--accent-hover);
}
.main-top__button__sections:hover{
    border-style: none;
    box-shadow: 0 5px 20px -4px var(--muted);
    transform: scale(1.05);

    /* transform: translateY(-6px);   */
}


/*---------------------------------------------- main-bottom */


.main-bottom{
    margin-top: 2rem;
    color: var(--text);
    display: flex;
    justify-content: start;
    align-items: center;
    flex-direction: column;
    padding: 0 3rem;
    width: 100%;
}
.main-bottom__title{
    font-size: 1.9rem;
}
.main-bottom__subtitle{
    font-size: 0.8rem;
    color: var(--subtitle);
}
.main-bottom-cards{
    margin-top: 4rem;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}
.main-bottom__seeAll{
    position: absolute;
    right: 0;
    top: -3rem;
    text-decoration: none;
    color: var(--muted);
    font-weight: 200;
    text-align: end;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.9rem;
}
.main-bottom__seeAll__arrow{
    font-size: 1rem;
    transform: scale(1.5);
    transition: all 100ms ease 10ms;
}
.main-bottom__seeAll:hover .main-bottom__seeAll__arrow{
    margin-left: 0.8rem;
}
.main-bottom__seeAll:hover{
    color: var(--text-down);
}
.main-bottom-card-container{
    width: 40rem;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 25rem;
}
.main-bottom-cards-card{
    border: 1px solid var(--back-ground);
    backdrop-filter: blur(10px);
    border-radius: 1rem;
    transition: all 0.5s ease-out;
    position: absolute;
    padding: 1rem;
    color: black;
    width: 18rem;
    height: 24rem;
    opacity: 0; 
    pointer-events: none;
    z-index: 1;
    background: linear-gradient(120deg,rgba(255, 255, 255, 0.4),rgba(255, 247, 210, 0.4));
}

.main-bottom-cards-card__img{
    width: 100%;
    height: 80%;
    border-radius: 0.2rem; 
}


.main-bottom-cards-card-info{

}
.cards-card-info__date{
    color: var(--dark);
}

.active{
    opacity: 1;
    z-index: 3;
    transform: translate(0, 0) scale(1);
    backdrop-filter: blur(25px);
    box-shadow: 0 0 10px 2px rgba(0, 0, 0, 0.6);

}

.bad{
    opacity: 0.6;
    z-index: 2;
    transform: translateX(70%) rotate(20deg) scale(0.7);
}

.ghabl{
    opacity: 0.6;
    z-index: 2;
    transform: translateX(-70%) rotate(-20deg) scale(0.7);
} 



.main-bottom-special{
    margin-top: 7rem;
    display: flex;
    justify-content: center;
    flex-direction: row-reverse;
    width: 70rem;
    height: 30rem;
    background-color: var(--dark);
    border: 1px solid var(--border);
    padding: 2rem;
    border-radius: 2rem;
    position: relative;
    
}
.special-image-box{
    width: 50%;
    display: flex;
    justify-content: end;
    align-items: center;
    padding: 2rem;
}
.special-image-box__img{
    width: 25rem;
    height: 25rem;
    border-radius: 2rem;
    filter: drop-shadow(0 0 15px rgba(207, 23, 54, 0.175));
}
.special-info{
    width: 50%;
}
.special-info__toptle{
    color: rgb(195, 198, 200);
    margin-bottom: 0.5rem;
    font-size: 0.8rem;
    position: absolute;
    background-color: var(--border);
    padding: 0.4rem 1.5rem ;
    border-radius: 2rem;
    top: -1rem;
    right: 42%;
    transition: all 200ms ease-in 10ms;
}
.main-bottom-special:hover .special-info__toptle{
    filter: drop-shadow(0 0 15px rgba(207, 23, 54, 0.403));
}
.special-info__title{
    font-size: 2rem;
    margin-bottom: 1rem;
}
.special-info__subtitle{
    margin-bottom: 3rem;
    color: var(--text-down);
}
.special-info-tics{
    display: flex;
    flex-direction: row-reverse;
    align-items: center;
    justify-content: start;
    gap: 0.3rem;
    margin-bottom: 0.2rem;
}
.tics__text{
    color: rgb(220, 220, 220);
    font-weight: 200;
}
.tics__svg{
    width: 2rem;
    height: 2rem;
    color: var(--accent);
    transition: margin-left 100ms linear 10ms;
}

.tics__svg:hover{
    margin-left: 1rem;
}


.special-info__short{
    margin-top: 1.5rem;
    font-size: 0.8rem;
    background-color: #3a1f24;
    border: #47242a 1px solid;
    color: var(--muted);
    padding: 0.5rem;
    border-radius: 0.5rem;
    display: inline-block;
    box-shadow: 0 0 10px 2px #47242a;

}

.special-info-btn{
    margin-right: 1rem;
    padding: 1rem 2rem;
    border-radius: 0.5rem;
    cursor: pointer;
    font-size: 1rem;
    transition: all 100ms ease-in-out 10ms;
    background-color: var(--accent);

}
.special-info-btn:hover{
    transform: translateY(-6px);
    box-shadow: 0 5px 20px -2px var(--accent-hover);
}


.main-bottom-news{
    margin-top: 2rem;
    color: var(--text);
    display: flex;
    justify-content: start;
    align-items: center;
    flex-direction: column;
    padding: 0 3rem;
    width: 100%;
}
.news__title{
    font-size: 1.9rem;
}
.news__seeAll{
    position: absolute;
    right: 0;
    top: -3rem;
    text-decoration: none;
    color: var(--muted);
    font-weight: 200;
    text-align: end;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.9rem;
}
.news__seeAll__arrow{
    font-size: 1rem;
    transform: scale(1.5);
    transition: all 100ms ease 10ms;
}
.news-cards{
    margin-top: 4rem;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 2rem;
    position: relative;
}
.news-cards-card{
    width: 15rem;
    height: 20rem;
    border-radius: 2rem;
    border: 1px var(--muted) solid;
    transition: transform 200ms ease 20ms;
    padding: 0.5rem 0.5rem 0.8rem 0.5rem;
    overflow: hidden;
    background-color: var(--dark);
}
.news__seeAll:hover .news__seeAll__arrow{
    margin-left: 0.8rem;
}
.news__seeAll:hover{
    color: var(--text-down);
}
/* .news-cards-card:hover{
    transform: scale(1.05);
} */
.news-cards-card__img{
    width: 100%;
    height: 80%;
    border-radius: 2rem;
    z-index: 1000;
    transition: transform 200ms ease 20ms;    
}
.news-cards-card:has(.news-cards-card__img:hover){
    transform: scale(1.05);
}

.news-cards-card__img:hover{
    transform: scale(2);
}
.news-cards-card-info{
    display: flex;
    justify-content: space-around;
    align-items: center;
    margin-top: 0.5rem;
    font-size: 0.9rem;
}
.news-info__date{
    color: var(--subtitle);
}