main{
    height: 150vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-evenly;
}
main h1{
    width: 100%;
    color: var(--bgColDark);
}
main.dark h1{
    color: var(--bgColLight);
}

h2{
    color: var(--purpDark);
    font-size: 3em;
    font-weight: bold;
    position: absolute;
    right: 0.33em;
    top: 2.3em;
    z-index: -1;
    opacity: 0.3;
    transition: 0.5s;
}
.cardsContainer.dark h2{
    color: var(--blueDark);
}
.mainContainer{
    width: 50em;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.cardsContainer{
    position: relative;
    justify-content: center;
    margin-top: 3em;
    flex-basis: 80%;
    width: 100%;
    display: grid;
    gap: 2em;
    grid-template: " cardOne cardTwo cardThree" 5fr
                    " cardBig cardBig cardBig" 3fr
                    /minmax(14.5em, 16em) minmax(14.5em, 16em) minmax(14.5em, 16em);
}
.cardsContainer div:nth-of-type(1){
    grid-area: cardOne;
}
.cardsContainer div:nth-of-type(2){
    grid-area: cardTwo;
}
.cardsContainer div:nth-of-type(3){
    grid-area: cardThree;
}
.cardsContainer div:nth-of-type(4){
    grid-area: cardBig;
}
.cardsContainer>div{
    display: flex;
    justify-content: center;
    align-items: center;
    background: var(--blueDark);
    position: relative;
    overflow: hidden;
}

.cardsContainer.dark>div{
    background: var(--purpDark);
}
.content{
    padding: 2em;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    z-index: 3;
    opacity: 0.5;
    transition: 0.5s;
}
.cardsContainer.dark .content a{
    color: var(--bgColDarkey);
    display: inline-block;
    padding: 0.4em 0.6em;
    background: var(--bgColLighty);
}
 .content a{
    color: var(--bgColLighty);
    display: inline-block;
    padding: 0.4em 0.6em;
    background: var(--bgColDarkey);
    
}
h1.eng + .cardsContainer::after{
    content: '*By category we mean product groups like dairy, seasonings etc. You can see the whole list of categories in your dashboard and choose the one you need. for more information on this, call us. ';
    position: absolute;
    text-align: center;
    bottom: -4.5em;
    left: 0;
    font-size: 0.7em;
    color: red;
}
h1.eng.pereng + .cardsContainer::after{
    content: '*منطور از دسته بندی گروه های محصولی چون لبنیات، ادویه جات و... هستند. شما میتوانید لیست کامل دسته بندی ها را در داشبورد خود مشاهده کرده و از میان آنها دسته بندی مورد نیازتان راتهیه کنید. جهت اطلاعات بیشتر با پشتیبانی تماس بگیرید';
    position: absolute;
    text-align: center;
    bottom: -4.5em;
    left: 0;
    font-size: 0.7em;
    color: red;
    direction: rtl;
}
.cardsContainer>div::before{
    content: '';
    position: absolute;
    width: 50%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 2;
    opacity: 0.3 ;
    background: black;
}
.cardsContainer.dark>div::before{
    background: black;
    opacity: 0.3;
}
main{
    color: var(--bgColDark);
}
main.dark{
    color: var(--bgColLight);
}
/* hover effects */
.cardsContainer>div:hover h2{
    opacity: 1;
    transform: translateY(-2.3em);
}
.content a:hover{
    transform: scale(1.1);
}
.cardsContainer>div:hover .content{
    opacity: 1;
}

/* real deal */
.cardsContainer>div:hover span:nth-of-type(1){
    display: inline-block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 0.2em;
    background: linear-gradient(to right, transparent, black );
    animation: cardsRealOne 2s linear infinite;
    z-index: 4;
}
.cardsContainer>div:hover span:nth-of-type(2){
    display: inline-block;
    position: absolute;
    top: 0;
    right: 0;
    width: 0.2em;
    height: 100%;
    background: linear-gradient(to bottom, transparent, black );
    animation: cardsRealTwo 2s linear 1s infinite;
    transform: translateY(100%);
    z-index: 4;
}
.cardsContainer>div:hover span:nth-of-type(3){
    display: inline-block;
    position: absolute;
    bottom: 0;
    right: 0;
    width: 100%;
    height: 0.2em;
    background: linear-gradient(to left, transparent, black );
    animation: cardsRealThree 2s linear infinite;
    z-index: 4;
}
.cardsContainer>div:hover span:nth-of-type(4){
    display: inline-block;
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0.2em;
    height: 100%;
    background: linear-gradient(to top, transparent, black  );
    animation: cardsRealFour 2s linear 1s infinite;
    transform: translateY(-100%);
    z-index: 4;
}

@keyframes cardsRealOne{
    0%{
        transform: translateX(-100%);
    }
    100%{
        transform: translateX(100%)
    }
}
@keyframes cardsRealTwo{
    0%{
        transform: translateY(-100%);
    }
    100%{
        transform: translateY(100%)
    }
}
@keyframes cardsRealThree{
    0%{
        transform: translateX(100%);
    }
    100%{
        transform: translateX(-100%)
    }
}
@keyframes cardsRealFour{
    0%{
        transform: translateY(100%);
    }
    100%{
        transform: translateY(-100%)
    }
}
main.dark .cardsContainer>div span:nth-of-type(1){
   background: linear-gradient(to right, transparent, var(--blueDark) );
}
main.dark .cardsContainer>div span:nth-of-type(2){
    background: linear-gradient(to bottom, transparent, var(--blueDark) );
}
main.dark .cardsContainer>div span:nth-of-type(3){
    background: linear-gradient(to left, transparent, var(--blueDark) );
}
main.dark .cardsContainer>div span:nth-of-type(4){
    background: linear-gradient(to top, transparent, var(--blueDark) );
 }



/* pattern */
main>*{
    z-index: 2;
}
.texture{
    width: 100%;
    height: 750px;
    top: 0;
    left: 0;
    position: absolute;
    z-index: 1;
    opacity: 0.5;
    filter: blur(3px);
    overflow: hidden;
}
.texture svg{
    position: absolute;
    transform: translateX(calc(50vw - 750px));
    height: 750px;
    width: 1500px;
}
radialGradient stop{
    stop-color: var(--bgColLight);
}
radialGradient.dark stop{
    stop-color: var(--bgColDark);
}
.stptt0{fill:none;}
.stptt1{fill: var(--bgColDark);}
.stptt1.dark{fill: var(--bgColLight);}
.stptt2{fill:url(#SVGID_1_);}
.stptt3{fill:url(#SVGID_2_);}


@media screen and (max-width: 792px){
    .cardsContainer>div h2{
        opacity: 1;
        transform: translateY(-2.3em);
        line-height: initial;
    }
    .cardsContainer>div:hover h2{
        opacity: 1;
        transform: translateY(0em);
    }
    .content a{
        transform: scale(1.1);
    }
    .cardsContainer>div .content{
        opacity: 1;
    }
    .content{
        line-height: 1.45em;
    }
    .cardsContainer{
        position: relative;
        justify-content: center;
        margin-top: 3em;
        flex-basis: 80%;
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: center;
        }
    .mainContainer{
        width: initial;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }
    main{
        padding: 6em 3em 10em 3em;
        height: initial;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-evenly;
        font-size: 0.8em;
    }
    h1{
        font-size: 1.4em
    }
    .cardsContainer>div{
        height: 27em;
        min-width: 10em;
        max-width: 17em;
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        background: var(--blueDark);
        position: relative;
    }
    h1.eng.pereng + .cardsContainer::after,
    h1.eng + .cardsContainer::after
    {
        bottom: -12.5em;
        left: 0;
        
    }
    .cardsContainer>div::before{
        content: '';
        background: var(--blueLight);
        position: absolute;
        width: 50%;
        height: 100%;
        top: 0;
        left: 0;
    }
    .cardsContainer>div:hover h2{
        opacity: 1;
        transform: translateY(-1.7em);
    }
}

@media screen and (max-width: 955px) and (min-width: 792px){
    
    
    main{
        font-size: 0.9em;
    }
    h1{
        font-size: 1.2em;
    }
    .cardsContainer{
        position: relative;
        justify-content: center;
        margin-top: 3em;
        flex-basis: 80%;
        width: 100%;
        display: grid;
        gap: 1em;
        grid-template: " cardOne cardTwo cardThree" 10fr
                        " cardBig cardBig cardBig" 7fr
                        /minmax(12.5em, 14em) minmax(12.5em, 14em) minmax(12.5em, 14em);
    }
    .mainContainer{
        width: initial;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }
}