*{
    margin: 0;
    padding: 0;
}
body{
    font-family: 'Montserrat', sans-serif;
    
}
header{
    background:#f36e21f5;
    padding: 0.3% 0%;
    display: flex;
    justify-content: center;
    align-items: center;
}
header>h5{
    font-weight: 700;
    color: white;
}

/*  */

#countdown {
display: flex;
align-items: center;
gap: 1px;
background-color: #f58220; /* Orange background */
padding: 4px;
border-radius: 3px;
font-family: Arial, sans-serif;
height: 100%;
}

.time-box {
background: white;
color: #0b1841;
padding: 3px 0px;
border-radius: 3px;
text-align: center;
min-width: 32px;
}

.time-box span {
font-size: 13px;
font-weight: bold;
line-height: 1;
}

.label {
font-size: 8px;
margin-top: 0px;
line-height: 1;
}

.colon {
font-size: 14px;
font-weight: bold;
color: white;
margin-top: -4px;
}
/* >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> */
nav{
background: #000
;
color: white;
display: flex;
justify-content: center;
align-items: baseline;
gap: 5px;
padding: 0.5% 0%;
}
nav>small{
font-weight: bold;
}
nav>button{
background: rgb(195, 11, 11);
border-radius: 5px;
padding: 0.4% ;
color: white;
display: grid;
place-items: center;
font-weight: bold;
border: none;
}
#sec1{
max-width: 800px;
place-self: center;
box-sizing: border-box;
padding: 1.2% 2%;

}
#sec1>h1{
font-weight: 700;
color: #353535;
margin-bottom: 1%;
}
.circle-img {
width: 46px;
height: 46px;
border-radius: 50%;
margin-right: 10px;
}
.userdiv1{
font-size: small;
}
.userdiv2{
color: #353535;
font-size:small;
}
#sec1>p{
margin: 2% 0%;
}
/* >?>>>>>>>>>>>>> */

#sec2{
max-width: 740px;
display: flex;
justify-content: center;
align-items: center;
place-self: center;
margin-bottom: 6%;
height: 320px;

}
#sec2>div{
box-sizing: border-box;
padding: 0%;
height: 100%;
/* border: 1px solid black; */
padding: 2% 1%; 
box-sizing: border-box; 
}
#sec2>div>img{
max-width: 340px;
max-height:340px;
border-radius: 16px;  
}
#sec2>div>video{
max-width: 340px;
max-height: 340px;
border-radius: 16px;
}
#sec2>div>h2{

max-width: 1300px;
font-size:28px;
color: #353535;
}
#sec2>div>p{

max-width: 1300px;

}

/* ↓ Tablet landscape and below */
@media (max-width: 1024px) {
#sec2 > div > h2 {
font-size: 24px;
}
}

/* ↓ Tablet portrait and below */
@media (max-width: 768px) {
#sec2 > div > h2 {
font-size: 20px;
}

#sec2{
height: auto;
box-sizing: border-box;
padding: 0% 2%;
}
#sec2>div{
width: 100%;
display: grid;
place-items: center;
box-sizing: border-box;
padding: 3%;

}
#sec2{
flex-wrap: wrap;
justify-items: center !important;
}
}

/* ↓ Mobile */
@media (max-width: 480px) {
#sec2 > div > h2 {
font-size: 16px;
}
}

/* ↓ Very small devices */
@media (max-width: 360px) {
#sec2 > div > h2 {
font-size: 14px;
}
}
/* >>>>>>>>>>>>>>>>>>> */

#sec4{
margin: 0 5%;
max-width: 400px;
border: 1px solid black;
border-style: dotted;
border-radius: 16px;
overflow: hidden;
place-self: center;
padding-bottom: 20px;
margin-bottom: 50px;
}
#sec4>img{
width: 100%;
margin-bottom: 30px;
}
#sec4>div{
display: flex;
justify-content: center;
align-items: center;
width:90%;
gap: 5px;
place-self: center;
}
#sec4>div>h5{
   color: #353535d2;
   white-space: nowrap;
}
#sec4>div>div{
    border: 0.2px solid rgba(0, 0, 0, 0.126);
    width: 50px;
}
#sec4>h1{
width: 70%;
place-self: center;
margin: 40px 0%;
text-align: center;
color: #353535;
}
#sec4>h1>span{

color:#f36e21f5;
}

#sec4>div>button{
color: white;
background: #009bdf;
width: 100%;
border: none;
padding: 5% 0%;
border-radius: 10px;
margin-bottom: 20px;
cursor: pointer;

}
#sec4>div>button>h1{
font-size: large;
}
#sec4>div i{
transform: translateX(70px);
}

#time{
color: red;
}
#sec4>section{
margin: 5% 0%;
place-self: center;
font-size: small;
background:#f0d6c982;
padding: 4.3%;
width: 80%;
display: grid;
place-items: center;
border-radius: 10px;
}
#sec4>section>p>span{
color: #009bdf;
}
#smaller{
font-size: xx-small;
}


/* >>>>>>>>>>>>>>>>>>>>> */


footer{
box-shadow: 0 -4px 10px rgba(0, 0, 0, 0.1);
background: white;
width: 100%;
position: fixed;
bottom: 0;
right: 0;
}
footer>div{
place-self: center;
width: 40%;
margin: 10px;
}
footer>div>button{
background: #009bdf;
color: white;
width: 100%;
height: 70px;
border-radius: 10px;
padding: 4% 0%;
border: none;
font-size:medium;
cursor: pointer;

}
footer>div>button>h3{
display: flex;
justify-content: center;
align-items: center;
gap: 30px;

}
footer>div>button>h3>i{
transform: translateX(80px);
}
footer>div>p{
display: flex;
font-size: small;

justify-content: center;
align-items: center;
color: #353535;
}
footer>div>p>small{
font-weight: 700 !important;
}
footer>div>div{
display: flex;
justify-content: space-between;
}
footer>div>div>p img{
height: 20px;
margin-right: 3px;
transform: translateY(5px);
}
footer{
white-space: nowrap;
}


#sec2 h1{
display: none;
}
@media(max-width:1068px){
footer i{
transform: translateX(30px) !important;
}
}
@media(max-width:700px){
#sec2 h1{
    display: block;
    font-size: 24px;
    box-sizing: border-box;
    padding: 3%;
}
#sec2 h2{
    display: none;
}
#sec1{
    box-sizing: border-box;
    padding: 5% !important;
}
footer>div{
width: 90%;
}
footer i{
transform: translateX(20px);
}
}
@media(max-width:400px){
header{
    box-sizing: border-box;
    padding: 2%;
    white-space:nowrap;
    font-size: small;
}
footer>div>div>p{
font-size: small;
}
}






/* Default line height for larger screens */
#sec1{
line-height: 1;
}
#sec1>h1{
margin-bottom: 10px;
}

#sec1>p{
line-height: 1.6;
font-weight: 500;
}
#sec2 h1{
line-height: 1;

}
#sec2 h2{
line-height:1;

}
#sec2{
line-height: 1.7;
}

@media(max-width:390px){
#sec2>div>img{
max-width: 320px;
max-height:320px;
border-radius: 16px;  
}
#sec2>div>video{
max-width: 320px;
max-height: 320px;
border-radius: 16px;
}
}