/* CountDown */
.CountD_index {
    overflow: hidden;
}

#CountDown_Index {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url("../../images/CountDown/Countdown_BG.png");
    z-index: 100;
    overflow: hidden;
    padding-top: 8rem;
}

@media (max-width: 1440px) {
    #CountDown_Index {
        padding-top: 3.5rem !important;
    }
}


@media (max-width: 991px) {
    #CountDown_Index {
        padding-top: 5.5rem !important;
    }
}

.CountDown_Index_Content1 {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    color: #fff;
}
.CountDown_Index_Content1 h1 {
    padding: 48px 0 30px;
    font-size: 5rem;
    font-weight: 600;
    position: relative;
    text-shadow: 5px 5px 10px #000;
    text-transform: uppercase;
}

.CountDown_Index_Content1 p {
    font-size: 22px;
}

.CountDown_Index_Content1 h1::after {
    content: '';
    position: absolute;
    left: 50%;
    top: -56px;
    width: 11.5em;
    height: 2em;
    background: url('../../images/CountDown/Bar_01-01.png') no-repeat center;
    background-size: contain;
    transform: translateX(-50%);
    pointer-events: none;
}

.CountDown_Index_Content1 h1::before {
    content: '';
    position: absolute;
    left: 50%;
    top: 78px;
    width: 11.5em;
    height: 2em;
    background: url('../../images/CountDown/Bar_01-01.png') no-repeat center;
    background-size: contain;
    transform: translateX(-50%);
    pointer-events: none;
}

.CountDown_Index_Content1 img {
    width: 480px;
    object-fit: cover;
}

@media (max-width: 991px) {
    .CountDown_box_B1 strong {
        font-size: 65px !important;
    }

    .CountDown_Index_Content1 img {
        width: 250px;
    }

    .CountDown_Index_Content1 h1 {
        font-size: 4rem;
    }

    .CountDown_Index_Content1 h1::after {
        top: -30px;
    }

    .CountDown_Index_Content1 h1::before {
        top: 73px;
    }

    .CountDown_Index_Content1 p {
        font-size: 15px;
        text-align: center;
        padding: 0 20px;
    }

    .CountDown_box1 {
        gap: 20px !important;
    }

}

@media (max-width: 767px) {

    .CountDown_Index_Content1 img {
        width: 250px;
    }

    .CountDown_Index_Content1 h1 {
        font-size: 2rem;
    }

    .CountDown_Index_Content1 h1::after {
        top: -2px;
    }

    .CountDown_Index_Content1 h1::before {
        top: 67px;
    }
    .Down_Inp_Count button{
        padding: 8px 13px !important;
         font-size:13px;
    }
    .Down_Inp_Count input{
        font-size: 12px;
    }
    .CountDown_Index_Content1 p {
        font-size: 15px;
        text-align: center;
        padding: 0 20px;
    }

    .CountD_Bg1 {
        width: 75px;
        height: 75px;
    }

    .CountDown_box_B1 strong {
        font-size: 23px !important;
    }

    .CountDown_box_B1 span {
        font-size: 12px;
    }

    .CountDown_box1 {
        gap: 10px !important;
    }
}

@media (max-width: 320px) {
    .CountDown_Index_Content1 h1 {
        font-size: 1.5rem;
    }

    .CountDown_Index_Content1 h1::after {
        top: -1px;
    }

    .CountD_Bg1 {
        width: 70px !important;
        height: 70px !important;
    }
     .Down_Inp_Count input {
        font-size: 11px;
    }
    .Down_Inp_Count button {
        padding: 8px 7px !important;
        font-size:10px;
    }
}

.CountDown_box1 {
    display: flex;
    flex-direction: row;
    gap: 62px;
    padding: 60px 0 20px;
    border-radius: 8px;
}

.CountD_Bg1 {
    position: relative;
    padding: 4px;
    border-radius: 12px;
    overflow: hidden;
    width: 160px;
    height: 160px;
    margin: 0 auto 10px;
}

@media (max-width: 991px) {

    .CountD_Bg1 {
        width: 160px;
        height: 160px;
    }
}

@media (max-width: 767px) {
    .CountD_Bg1 {
        width: 80px;
        height: 80px;
    }

    .Down_Inp_Count {
        width: 90% !important;
    }
}

.CountD_Bg1::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: conic-gradient(rgb(82, 84, 212),
            rgb(93, 120, 129),
            rgb(98, 207, 247),
            rgb(137, 70, 201),
            rgb(82, 84, 212));
    animation: rotateGradient 4s linear infinite;
    z-index: 1;
}

.CountDown_box_B1 {
    position: relative;
    z-index: 1;
    color: #fff;
    border-radius: 10px;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    background: linear-gradient(250deg, #171833, #00263a);
}



@keyframes rotateGradient {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

.CountDown_box_B1 strong {
    font-size: 70px;
    font-weight: 600;
}

.CountDown_box_B1 span {
    font-weight: 200;
}

.Down_Inp_Count {
    padding: 8px 8px;
    width: 30%;
    margin: 40px auto;
    border-radius: 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border: none;
    background: #18395d;
    box-shadow: rgba(0, 0, 0, 0.25) 0px 54px 55px, rgba(0, 0, 0, 0.12) 0px -12px 30px, rgba(0, 0, 0, 0.12) 0px 4px 6px, rgba(0, 0, 0, 0.17) 0px 12px 13px, rgba(0, 0, 0, 0.09) 0px -3px 5px;
}

@media (max-width: 1320px) {
    .Down_Inp_Count {
        width: 50%;
    }
}

@media (max-width: 991px) {
    .Down_Inp_Count {
        width: 70%;
    }
}

.Down_Inp_Count button {
    display: inline-block;
    background: rgb(141 81 199);
    padding: 8px 20px;
    width: max-content;
    font-weight: 500;
    border-radius: 4px;
    color: #fff;

}

.Down_Inp_Count input {
    background: transparent;
    color: #fff;
    width: 100%;
    height: 40px;
    border: transparent;
    outline: none;
    padding-left: 10px;
} 
.Down_Inp_Count:focus-within{
 box-shadow: 0 0px 6px #432f6e, 0 0 1px #927bb0;
}
.Down_Inp_Count button:hover {
    background: rgb(137, 70, 201);
    box-shadow: none;
}

.Down_Inp_Count button:hover span {
    color: #000;
}

.Down_Inp_Count input::placeholder {
    color: #fff;
}