@import url('https://fonts.googleapis.com/css2?family=Spartan:wght@200;300;400;500;600;700&display=swap');

@import url('https://fonts.googleapis.com/css2?family=Barlow:wght@200;300;400;500;600;700&display=swap');

:root{

    --Spartan: "Spartan";

    --Barlow: "Barlow";

    --teal-900: #052E2B;

    --teal-800: #073B37;

    --teal-600: #075E5E;

    --turquoise: #17D0CE;

    --turquoise-ink: #053733;

    --amber: #E0932A;

    --amber-bg: #F6E7C8;

    --amber-ink: #7A4E0C;

    --danger: #A32D2D;

    --ink: #10201F;

    --muted: #4C5A58;

    --surface: #F1F5F4;

    --card: #FFFFFF;

    --border: #D7E1DF;

    --cream: #EAF1EE;

    --cream-muted: #86A6A1;

    --first-color: var(--teal-800);

    --second-color: var(--turquoise);

    --third-color: var(--ink);

    --fourth-color: var(--cream);

    --fifth-color: var(--teal-600);

    --dark-color: var(--teal-900);

    --light-color: var(--card);

}

/*Contagem Regressiva*/

.contagem .title{

    font-family: var(--Spartan);

    color: var(--first-color);

    font-weight: 600;

    letter-spacing: 1px;

    position: relative;

    padding-bottom: 15px;

}



.contagem .title::after{

    content: " ";

    position: absolute;

    display: block;

    left: 40%;

    bottom: 0;

    width: 20%;

    height: 3px;

    background-color: var(--second-color);

    border-radius: 3px;

}



.countdown{

    width: 80vw;

    display: flex;

    justify-content: space-around;

    gap: 10px;

    align-items: center;

}



.box{

    border-radius: 10px;

    width: 28vmin;

    height: 28vmin;

    display: flex;

    flex-direction: column;

    font-family: var(--Spartan);

    align-items: center;

    justify-content: space-evenly;

    position: relative;

    box-shadow: 10px 10px 40px rgba(0, 0, 0, 0.3);

    font-size: 16px;

}



@media screen and (max-width:1024px){

    .countdown{

        width: 85vw;

    }

    .box{

        height: 26vmin;

        width: 26vmin;

    }

    span.text{

        font-size: 12px;

    }

    span.num{

        font-size:  70px;

    }

}



@media screen and (max-width:768px){

    .countdown{

        width: 90vw;

        flex-wrap: wrap;

        gap: 30px;

    }

    .sub-banner h1{

        font-size: 36px;

    }

    .box{

        width: (50% - 40px);

        height: 30vmin;

    }



    span.text{

        font-size: 13px;

    }

    span.num{

        font-size: 48px;

    }

    .banner h1{

        font-size: 28px;

    }

    .banner h4{

        font-size: 18px;

    }

    .contagem h2{

        font-size: 24px;

    }

}