*{
box-sizing:border-box;
}

body{
margin:0;
font-family:Arial, sans-serif;
background:white;
color:black;
}

/* HEADER */

header{
display:grid;
grid-template-columns:1fr auto 1fr;
align-items:center;
padding:20px 40px;
background:#202020;
border-bottom:5px solid orange;
}

.logo{
font-size:42px;
font-weight:bold;
color:white;
letter-spacing:2px;
justify-self:start;
}

.links{
display:flex;
gap:20px;
justify-content:center;
}

.links img{
width:40px;
cursor:pointer;
transition:0.2s;
}

.links img:hover{
transform:scale(1.1);
}

/* TICKER */

.ticker{
background:white;
overflow:hidden;
width:100%;
margin-top:12px;
}

.ticker-track{
display:flex;
gap:12px;
width:max-content;
animation:tickerMove 50s linear infinite;
}

@keyframes tickerMove{
0%{transform:translateX(-50%)}
100%{transform:translateX(0)}
}

.tick{
padding:6px 14px;
background:black;
border-radius:5px;
font-weight:bold;
white-space:nowrap;
}

.green{color:#00ff00;}
.red{color:red;}

/* MAIN CONTAINER */

.main-box{
border:2px solid #bfbfbf;
margin:40px auto;
padding:30px;
background:#f5f5f5;
max-width:1200px;
}

/* CONTENT GRID */

.content{
display:grid;
grid-template-columns:1.2fr 1fr 0.9fr;
gap:30px;
}

/* VIDEO */

.left video{
width:100%;
max-width:100%;
border-radius:6px;
}

/* RIGHT SIDE */

.right{
text-align:center;
}

.coin-video{
width:100%;
max-width:320px;
margin:10px auto;
display:block;
}

.right p{
max-width:420px;
margin:auto;
line-height:1.5;
}

/* VITAMIN BOX */

.vitamin-box{
border:2px solid #bfbfbf;
max-width:900px;
margin:40px auto;
padding:30px;
background:#f5f5f5;
text-align:center;
}

.vitamin-grid{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:30px;
margin-top:20px;
}

.vitamin{
width:120px;
transition:transform 0.25s ease;
cursor:pointer;
}

.vitamin:hover{
transform:translateX(10px);
}

.buy-btn-main{
display:inline-block;
margin-top:25px;
padding:12px 26px;
background:black;
color:white;
text-decoration:none;
font-weight:bold;
border-radius:5px;
}

.buy-btn-main:hover{
background:orange;
color:black;
}

/* MOBILE */

@media (max-width:900px){

.content{
grid-template-columns:1fr;
}

.middle{
order:2;
}

.right{
order:3;
}

.vitamin-grid{
grid-template-columns:repeat(2,1fr);
}

header{
flex-direction:column;
gap:15px;
}

.logo{
font-size:36px;
}

}

@media (max-width:500px){

.vitamin-grid{
grid-template-columns:1fr;
}

.links img{
width:35px;
}

.logo{
font-size:32px;
}

}




/* ================= LIVE TV SECTION ================= */


.live-title{
font-size:22px;
margin-bottom:20px;
display:flex;
gap:10px;
align-items:center;
}

.live-red{
color:red;
font-weight:bold;
}

.live-brand{
color:black;
font-weight:bold;
}



.live-box{
border:2px solid #bfbfbf;
max-width:1200px;
margin:40px auto;
padding:30px;
background:#f5f5f5;
}

.live-title{
font-size:22px;
margin-bottom:20px;
color:#ff9900;
}

.live-grid{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:25px;
}

.live-card video{
width:100%;
border-radius:4px;
}

.live-text{
margin-top:8px;
font-weight:600;
}


/* MOBILE */

@media (max-width:900px){

.live-grid{
grid-template-columns:1fr;
}

}