*{

margin:0;
padding:0;
box-sizing:border-box;
font-family:'Segoe UI',sans-serif;

}



body{

background:#f4f7fb;

color:#222;

}



header{


height:80px;

background:white;

display:flex;

justify-content:space-between;

align-items:center;

padding:0 8%;

box-shadow:0 5px 20px rgba(0,0,0,.08);

}



.logo{

font-size:28px;

font-weight:700;

}


.logo span{

background:#ff6b00;

color:white;

padding:5px 12px;

border-radius:20px;

font-size:14px;

}



.status{

color:green;

font-weight:600;

}






.hero{


display:flex;

justify-content:space-around;

align-items:center;

padding:80px 8%;

min-height:600px;


background:
linear-gradient(
135deg,
#fff4e8,
#ffffff
);


}



.hero-content{

max-width:600px;

}



.hero-content h1{

font-size:55px;

}



.hero-content span{

color:#ff6b00;

}



.hero-content p{

font-size:20px;

color:#666;

margin:25px 0;

line-height:1.6;

}




button{


padding:15px 35px;

border:none;

border-radius:30px;

background:#ff6b00;

color:white;

font-size:16px;

cursor:pointer;


}



.secondary{

background:#222;

margin-left:15px;

}






/* CLOCK */


.clock-section{

text-align:center;

}



.clock{


width:280px;

height:280px;

border-radius:50%;

border:12px solid #222;

background:white;

position:relative;

box-shadow:
0 20px 40px rgba(0,0,0,.2);

}



.clock-number{

position:absolute;

font-size:30px;

font-weight:bold;

}



.twelve{

top:15px;

left:120px;

}



.three{

right:20px;

top:120px;

}



.six{

bottom:15px;

left:130px;

}



.nine{

left:20px;

top:120px;

}




.hand{

position:absolute;

bottom:50%;

left:50%;

transform-origin:bottom;

border-radius:10px;

}



.hour{

height:70px;

width:8px;

background:#222;

}



.minute{

height:100px;

width:5px;

background:#333;

}



.second{

height:115px;

width:3px;

background:red;

}




.center-dot{

position:absolute;

width:16px;

height:16px;

background:#ff6b00;

border-radius:50%;

top:50%;

left:50%;

transform:translate(-50%,-50%);

}




#time{

margin-top:25px;

color:#ff6b00;

font-size:35px;

}



#date{

font-size:18px;

color:#666;

}







.info{


display:flex;

justify-content:center;

gap:30px;

padding:60px 8%;

flex-wrap:wrap;

}




.box{


background:white;

padding:35px;

width:300px;

border-radius:20px;

text-align:center;

box-shadow:0 10px 25px #ddd;

}




footer{


background:#111;

color:white;

text-align:center;

padding:30px;

}




@media(max-width:900px){


.hero{

flex-direction:column;

}



.hero-content h1{

font-size:38px;

}



.clock-section{

margin-top:50px;

}


}