*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    font-family: "Poppins",sans-serif;
    /*color: #ffffff;*/
}
body{
    background-color: #111111;
}
.countdown{
    /*width: 80vw;*/
    display: flex;
    justify-content: space-around;
    /*gap: 10px;*/
    position: absolute;
    transform: translate(-50%,-50%);
    top: 50%;
    left: 50%;
}
.countdown1{
    width: 80vw;
    display: flex;
    justify-content: space-around;
    gap: 10px;
    position: absolute;
    transform: translate(-50%,-50%);
    top: 50%;
    left: 50%;
}

.box{
    width: 17vmin;
    height: 17vmin;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-evenly;
    position: relative;
    box-shadow: 15px 15px 30px rgba(0,0,0,0.5);
    font-size: 16px;
}
.box:after{
    content: "";
    position: absolute;
    background-color: rgba(255,255,255,0.12);
    height: 100%;
    width: 50%;
    left: 0;
}
.box1{
    width: 47vmin;
    height: 47vmin;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-evenly;
    position: relative;
        font-size: 16px;
}
.box1:after{
    content: "";
    position: absolute;
    
    height: 100%;
    width: 50%;
    left: 0;
}

span.num{
    background-color: #202020;
    height: 50%;
    width: 50%;
    display: grid;
    place-items: center;
    font-weight: 600;
    font-size: 2em;
}
span.text{
    font-size: 1.2em;
   /* background-color: #2887e3; */
    display: block;
    width: 98%;
    text-align: center;
    padding: 0.5em 0;
    font-weight: 400;
}
@media screen and (max-width: 1024px){
    .countdown{
        width: 85vw;
    }
    .box{
        height: 26vmin;
        width: 26vmin;
        font-size: 12px;
    }
}
@media screen and (max-width: 768px){
    .countdown{
        width: 90vw;
        flex-wrap: wrap;
        gap: 30px;
    }
    .box{
        width: calc( 50% - 40px );
        height: 30vmin;
        font-size: 14px;
    }
}

@media screen and (max-width: 1024px){
    .countdown1{
        width: 85vw;
    }
    .box1{
        height: 26vmin;
        width: 26vmin;
        font-size: 12px;
    }
}
@media screen and (max-width: 768px){
    .countdown1{
        width: 90vw;
        flex-wrap: wrap;
        gap: 30px;
    }
    .box1{
        width: calc( 50% - 40px );
        height: 30vmin;
        font-size: 14px;
    }
}
@media screen and (max-width: 480px){
    .countdown1{
        display: none;   
 }
    .box1{
       display: none;   
 }
    .span.text{
        display: none;   
 }
}

@media screen and (max-width: 480px){
    .countdown{
        display: none;   
 }
 .fixed{
        display: none;   
 }

    .box{
       display: none;   
 }
    .span.text{
        display: none;   
 }
}