*{
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-size: 16px;
            font-family: sans-serif;
            overflow-x: hidden;
        }

.hero{
    z-index: 100px;
    /* position: absolute; */
    height: 100vh;
    /* background-color: rebeccapurple; */
    background-image:linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)),  url(img/img3.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    animation-name:ani;
     justify-content:center;
    align-items: center;
    justify-items: center;
    /* animation-play-state: running;
    animation-iteration-count: infinite;
    display: flex; */
    animation: ani 20s ease-out .2s infinite forwards;
    /*animation: slowZoomMove 15s ease-in-out infinite;*/
}

@keyframes ani {
    30%{
        transform: scale(30deg);
        transition: 0.5s;
background-image:linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)),  url(img/img6.jpg)
    }
    60%{
        transition: 0.5s;
background-image:linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)),  url(img/img9.jpg)
    }
    100%{
        transition: 0.5s;
background-image:linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)),  url(img/img10.jpg)
    }
}

.contentsBox{
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 50px;
    padding: 20px;
    z-index: 10000px;
}

.card1{
    background-color: rgba(250, 246, 233, 0.92);
    border-radius: 4px;
}
.card2{
    background-color: rgba(3, 23, 134, 0.653);
     border-radius: 4px;
}
.card1:hover{
    background-color: rgba(8, 152, 174, 0.92);
    color: white;
    transition: 0.7s ease-in-out;
}
.card2:hover{
    background-color: rgba(7, 176, 148, 0.653);
    color: white;
      transition: 0.7s ease-in-out;
}
.card2 button{
    background: yellow;
    padding: 3px 8px;
    border: none;
    border-radius: 5px;
    transition: 0.7s;
}
.card1 button{
    background: rgb(38, 38, 38);
    padding: 3px 8px;
    border: none;
    color: white;
    border-radius: 5px;
     transition: 0.7s;
}
.card1 button:hover{
    background: rgb(255, 255, 255);
    padding: 3px 8px;
    border: none;
    color: rgb(19, 17, 17);
    border-radius: 5px;
}

.card2 button:hover{
    background: rgb(1, 68, 68);
    padding: 3px 8px;
    border: none;
    color: rgb(255, 255, 255);
    border-radius: 5px;
}

.card2b button{
    background: rgb(204, 150, 3);
    padding: 3px 8px;
    border: none;
    border-radius: 5px;
    transition: 0.7s;
}
.card1b button{
    background: rgb(3, 2, 94);
    padding: 3px 8px;
    border: none;
    color: white;
    border-radius: 5px;
     transition: 0.7s;
      z-index: 9999;
}

.card1b button:hover{
    background: rgb(32, 149, 181);
    padding: 3px 8px;
    border: none;
    color: rgb(255, 255, 255);
    border-radius: 5px;
   
}

.card2b button:hover{
    background: rgba(102, 30, 3, 0.974);
    padding: 3px 8px;
    border: none;
    color: rgb(255, 255, 255);
    border-radius: 5px;
}


.displayimg {
       z-index: 10000px;
    /* position: absolute; */
    height: 100vh;
    /* background-color: rebeccapurple; */
    background-image:linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)),  url(img/img3.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    animation-name:ani2;
    justify-content:center;
    align-items: center;
    justify-items: center;
    animation-play-state: running;
    animation-iteration-count: infinite;
    display: flex;
    animation: ani2 20s ease-out .2s infinite forwards;
}
@keyframes ani2 {
    30%{
        transform: scale(30deg);
        transition: 0.5s;
background-image:linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)),  url(img/img6.jpg)
    }
    60%{
        transition: 0.5s;
background-image:linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)),  url(img/img9.jpg)
    }
    100%{
        transition: 0.5s;
background-image:linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)),  url(img/img10.jpg)
    }
}
/* animation boxes */
.animate div, .animate2 div{
 width: 100px;
 height: 100px;
 border: 2px solid rgb(232, 230, 230);
 border-radius: 5px;
 z-index: 10000;
}

.animate, .animate2{
    display: flex;
    position: absolute;
    gap: 40px;
}



.displayimg2 {
       z-index: 10000px;
    /* position: absolute; */
    height: 100vh;
    /* background-color: rebeccapurple; */
    background-image:linear-gradient(rgba(231, 189, 22, 0.5), rgba(2, 97, 180, 0.8)),  url(img/degg.png);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    animation-name:ani2;
    justify-content:center;
    align-items: center;
    justify-items: center;
    animation-play-state: running;
    animation-iteration-count: infinite;
    display: flex;

}
.wrap{
    margin: 0 auto;
}

.heroManage{
       z-index: 1000;
    /* position: absolute; */
    height: 100vh;
    /* background-color: rebeccapurple; */
    background-image:linear-gradient(rgba(235, 54, 9, 0.5), rgba(2, 97, 180, 0.8)),  url(img/img17.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    animation-name:ani2;
    justify-content:center;
    align-items: center;
    justify-items: center;
    animation-play-state: running;
    animation-iteration-count: infinite;
    display: flex;
    margin-top: -30px;
    /*animation: slowZoomMove 15s ease-in-out infinite;*/
}

/*@keyframes slowZoomMove {*/
/*    0% { transform: scale(1) translateX(0); }*/
/*    50% { transform: scale(1.1) translateX(10px); }*/
/*    100% { transform: scale(1) translateX(0); }*/
/*}*/
.card3{
    background-color: rgba(244, 189, 7, 0.92);
    border-radius: 4px;
}
.card4{
    background-color: rgba(9, 174, 168, 0.863);
     border-radius: 4px;
}
.card3:hover{
    background-color: rgba(243, 151, 71, 0.732);
    color: white;
    transition: 0.7s ease-in-out;
}
.card4:hover{
    background-color: rgba(12, 88, 92, 0.686);
    color: white;
    transition: 0.7s ease-in-out;
}

@media(max-width:850px){
.contentsBox{
    display: block;
    width: 100%;

}
.card2{
    margin-top: 30px;
}
.displayimg{
    display: none;
}
.cardgroup{
    display: block!important;
    margin-top: 300px;
}
.wrap{
    display: block!important;
     height: 100%;
    justify-content: center;
    align-items: center;
    margin: 0 auto;

}
.wrap button{
    margin: 20px 0;
}
}