*{
    box-sizing: border-box;
}
.balance{
    text-align: center !important;
    margin-bottom:20px;
    overflow: hidden;
}
.told{
    list-style-type:none;
}
.win{
    overflow: hidden;
    margin:50px 0;
}
.told a{
    text-decoration: none;
    color:white;
}
.rou{
    background: linear-gradient(to bottom left, rgba(225,225,225,0),rgb(57, 129, 231),rgb(54, 43, 212)) !important;
}
.small_card{
    display:flex;
    flex-direction: column;
    justify-content:center;
    text-align:center;
    align-items:center;
}
.told a:hover{
    opacity:0.7;
    color:white;
}
.told .box:hover{
    border:2px solid grey;
    border-radius:10px;
    opacity:0.8;
}
.bg-color{
    background-color: rgb(63, 63, 233);
}
.hello{
    align-self:center;
    position: relative;
    text-align:left;
    overflow: hidden;
    position:relative;
    animation:hello 2s steps(7,end) infinite;
}
@keyframes hello{
    0%{
        width: 0;
      }
    to{
        width:500px;
      }
      1%,47%{
        border:none;
      }
      100%{
        border-right: none;
      }
}
.image{
    background:url("M.png") no-repeat center center/cover; 
    height:100vh;
}
/*card for large screen */
.shoe{
    background:url("shoe.png") no-repeat center center/cover;
    border-radius:10px;
    height:360px;
    width:100%;
}
.shirt{
    background:url("shirt.png") no-repeat center center/cover;
    border-radius:10px;
    height:360px;
    width:100%;
}
.bag{
    background:url("bag.png") no-repeat center center/cover;
    border-radius:10px;
    height:360px;
    width:100%;
}
.ket{
    background:url("ke.png") no-repeat center center/cover;
    border-radius:10px;
    height:360px;
    width:100%;
}
.unique{
    background:url("ji.png") center center/cover no-repeat;
    height:100vh;
    width:50vw;
    margin-left:5%;
}
.overflow{
    overflow: hidden;
}
.index{
    z-index:1 !important;
}
.cul a{
    color:black;
}
.cul a:hover{
    color:white;
}
.direction{
    display:grid;
    grid-template-columns: repeat(2,1fr);
    justify-content:center;
    align-items:center;
    overflow:hidden;
    position: relative;
}
.direction::before{
    content: "";
    position:absolute; 
    background:linear-gradient(to top , rgba(255,255,255,0),rgb(255, 255, 255));
    top:0px;
    width:100%;
    height:90vh;

}
.direction::after{
    content: "";
    position:absolute; 
    background:linear-gradient(to bottom , rgba(255,255,255,0),rgb(255, 255, 255));
    bottom:0px;
    width:100%;
    height:90vh;
}
.increase{
    padding:30px 200px;
    border-radius:20px !important;
}
.shift{
    margin-right:190px;
}
.react .card{
    overflow: hidden !important;
    border-radius:15px !important;
    cursor:pointer;
    transform:scale(0);
    transition: all 2s ease-in-out;
    opacity:0;
    animation: card 4s ease-in-out forwards;
}
.react .card:hover{
    transform:scale(1.2) !important;
    z-index:1;
}
.react .card.animate { 
    transform: scale(1); /* Final state (visible) */
    opacity:1;
}
/*Card for small screen*/
.hoe{
    background:url("shoe.png") no-repeat center center/cover;
    border-radius:10px;
    height:360px;
    width:100%;
}
.hirt{
    background:url("shirt.png") no-repeat center center/cover;
    border-radius:10px;
    height:500px;
    width:100%; 
}
.tek{
    background:url("ke.png") no-repeat center center/cover;
    border-radius:10px;
    height:500px;
    width:100%;
}
.gab{
    background:url("un.png") no-repeat center center/cover;
    border-radius:10px;
    height:500px;
    width:100%;
}
.small_card .card{
    border-radius:15px ;
    transform:scale(0);
    cursor:pointer;
    animation:small 2s ease-in-out forwards;
    transition:all 2s ease-in-out;

}
.produce{
    position:absolute !important;
    bottom:-20px !important;
}
.tick{
    padding:60px !important;
    
}
.nord{
    margin-top:20px;
    margin-left:5px;
    margin-right:5px;
    box-shadow:0 4px 8px rgba(0, 0, 0, 0.2),0 -4px 8px rgba(0, 0, 0, 0.2) !important;
}
.tick .card{
    border-radius:15px !important;
}
@keyframes small {
    from{
        transform:scale(0);
    }
    to{
        transform:scale(1);
    }
}
/* silde movement of logos*/
.logo-slide{
    padding:0,30px;
    display:inline-block;
    animation:35s move infinite linear;
}

.logo{
    overflow:hidden;
    white-space:nowrap;
    position:relative;
}
.logo:before{
    position: absolute;
    top: 0;
    left:0;
    z-index:2;
    width:250px;
    height:100%;
    background: linear-gradient(to left,rgba(255,255,255,0),white);
    content: "";
}
.logo:hover .logo-slide{
    animation-play-state:paused;
}
.logo:after{
    position: absolute;
    z-index:2;
    top: 0;
    right:0;
    width:250px;
    height:100%;
    background: linear-gradient(to right,rgba(255,255,255,0),white);
    content: "";
 
}
.logo-slide img{
    width:190px;
    margin:0 20px;
}
.dord{
    border:white 2px solid;
    border-radius:100rem;
    background:linear-gradient(to top right , rgba(255,255,255,0),rgb(26, 26, 219),rgb(235, 7, 136));
    padding:60px;
    display: flex;
    flex-direction: column;
}
.OBJ{
    display:flex;
    flex-direction:column;
    border-radius:150px;
    justify-content: center;
    color: black;
    align-items:center;
    text-align:center;
    background:linear-gradient(to bottom left,rgba(255,255,255,0),rgb(240, 90, 79) ,rgb(0, 0, 97));
    border:3px solid white;
}
.bord{
    border-right:2px solid white;
}
.footer{
background-color: black;
}

@keyframes move{
    from{
        transform:translateX(0px);
    }
    to{
        transform:translateX(-100%);
    }
}
@media (max-width:1000px){
    .direction{
        display:grid;
        grid-template-columns: repeat(1,1fr);
        text-align: center;
    }
    .unique{
        background:url("ji.png") center center/cover no-repeat;
        height:100vh;
        width:100vw;
    }
    .hello{
        align-self:center;
        position: relative;
        text-align:left;
        overflow: hidden;
        position:relative;
        width:170px;
        animation:hello 2s steps(7,end) infinite;
    }
    .bord{
        border-right:none;
        margin:15px 0px;
    }
    .dord{
        border:white 2px solid;
        border-radius:100rem;
        background:linear-gradient(to top right , rgba(255,255,255,0),rgb(26, 26, 219),rgb(235, 7, 136));
        padding:60px;
        justify-content: center;
        align-content:center;
        display: flex;
        flex-direction: column;
    }
    .OBJ{
        display: none;
    }
    .footer{
        background-color: black;
        padding:50px 50px;
    }

    @keyframes hello{
        0%{
            width: 0;
          }
        to{
            width:300px;
          }
          1%,47%{
            border:none;
          }
          100%{
            border-right: none;
          }
    }
    .test{
        background-color: rgb(122, 122, 242) !important;
    }
    .check{ 
        border-top:2px solid rgb(238, 238, 249);
        margin-top:40px !important;
    }
    .lin{
        border-radius:10px;
        border:2px rgb(255, 253, 253) solid ;
        background-color: rgb(122, 122, 242) ;
        text-align: center;
        padding:10px;
    }
    .lin:hover{
        border:2px rgb(229, 229, 237) solid ;
    }
    .lin a:hover{
        color: white !important;
    }
    .logo-slide{
        padding:0,30px;
        display:inline-block;
        animation:35s move infinite linear;
    }
    
    .logo{
        overflow:hidden;
        white-space:nowrap;
        position:relative;
    }
    .logo:before{
        position: absolute;
        top: 0;
        left:0;
        z-index:2;
        width:50px;
        height:100%;
        background: linear-gradient(to left,rgba(255,255,255,0),white);
        content: "";
    }
    .logo:hover .logo-slide{
        animation-play-state:paused;
    }
    .logo:after{
        position: absolute;
        z-index:2;
        top: 0;
        right:0;
        width:50px;
        height:100%;
        background: linear-gradient(to right,rgba(255,255,255,0),white);
        content: "";
     
    }
    .logo-slide img{
        width:190px;
        margin:0 20px;
    }
}