*{
margin:0;
padding:0;
box-sizing:border-box;
font-family:'Vazirmatn',sans-serif;
}

body{

background:#050505;

color:#fff;

overflow-x:hidden;

direction:rtl;

}

.backgroundGlow{

position:fixed;

width:700px;

height:700px;

background:radial-gradient(circle,#caa63b22 0%,transparent 70%);

top:-250px;

left:-250px;

z-index:-1;

}

.container{

width:95%;

max-width:1450px;

margin:auto;

padding:20px;

}

header{

text-align:center;

margin-bottom:35px;

}

.mainLogo{

width:170px;

height:170px;

object-fit:contain;

margin:auto;

display:block;

filter:

drop-shadow(0 0 20px rgba(212,175,55,.45));

transition:.40s;

}

.mainLogo:hover{

transform:scale(1.05);

}

.logoArea h1{

margin-top:18px;

font-size:34px;

font-weight:900;

color:#FFD700;

line-height:1.8;

}

.logoArea p{

margin-top:10px;

font-size:18px;

color:#d9d9d9;

letter-spacing:2px;

}

.topBar{

display:flex;

justify-content:space-between;

align-items:center;

flex-wrap:wrap;

gap:15px;

margin-bottom:30px;

padding:18px;

background:#101010;

border:1px solid #d4af37;

border-radius:18px;

box-shadow:0 0 20px rgba(212,175,55,.15);

}

.clockBox,
.dateBox,
.musicBox{

display:flex;

align-items:center;

gap:10px;

font-size:17px;

font-weight:700;

color:#ffffff;

}

.clockBox i,
.dateBox i,
.musicBox i{

color:#FFD700;

font-size:20px;

}
.liveBar{

display:flex;

justify-content:center;

align-items:center;

gap:25px;

flex-wrap:wrap;

margin:30px 0;

padding:18px;

background:#111;

border:1px solid #d4af37;

border-radius:18px;

}

.liveBar div{

display:flex;

align-items:center;

gap:8px;

color:#FFD700;

font-weight:700;

font-size:16px;

}

.quote{

margin:30px auto;

padding:20px;

max-width:900px;

background:#111;

border-right:4px solid #FFD700;

border-left:4px solid #FFD700;

border-radius:16px;

font-size:20px;

font-weight:700;

text-align:center;

color:#ffffff;

box-shadow:0 0 20px rgba(212,175,55,.15);

}

.slider{

margin:35px auto;

overflow:hidden;

border-radius:20px;

border:1px solid #d4af37;

background:#111;

box-shadow:0 0 20px rgba(212,175,55,.20);

}

.slide{

display:none;

position:relative;

}

.slide.active{

display:block;

animation:fade .8s;

}

.slide img{

width:100%;

height:320px;

object-fit:cover;

}

.slide div{

position:absolute;

bottom:0;

width:100%;

padding:18px;

background:rgba(0,0,0,.70);

font-size:22px;

font-weight:700;

color:#FFD700;

text-align:center;

}

@keyframes fade{

from{

opacity:0;

}

to{

opacity:1;

}

}

.toolGrid{

display:grid;

grid-template-columns:repeat(auto-fit,minmax(320px,1fr));

gap:25px;

margin-top:45px;

}

.toolCard{

background:#111;

border:1px solid #d4af37;

border-radius:22px;

padding:28px;

text-decoration:none;

transition:.35s;

box-shadow:0 0 20px rgba(212,175,55,.12);

}

.toolCard:hover{

transform:translateY(-8px);

box-shadow:0 0 30px rgba(212,175,55,.40);

}

.toolIcon{

display:block;

font-size:52px;

text-align:center;

color:#FFD700;

margin-bottom:18px;

}

.toolCard h3{

font-size:23px;

color:#FFD700;

text-align:center;

margin-bottom:15px;

}

.toolCard p{

color:#ddd;

line-height:2;

text-align:center;

min-height:75px;

}

.toolBtn{

display:block;

margin-top:25px;

background:#ffffff;

color:#111;

padding:15px;

text-align:center;

border-radius:12px;

font-weight:800;

font-size:17px;

border:2px solid #FFD700;

transition:.30s;

}

.toolBtn:hover{

background:#FFD700;

color:#000;

}
footer{

margin-top:70px;

padding:35px 20px;

background:#0d0d0d;

border-top:2px solid #d4af37;

border-radius:20px 20px 0 0;

text-align:center;

}

.footerLogo{

width:90px;

margin:auto;

display:block;

margin-bottom:20px;

filter:drop-shadow(0 0 15px rgba(212,175,55,.45));

}

.footerTitle{

font-size:24px;

font-weight:800;

color:#FFD700;

margin-bottom:15px;

}

.footerInfo{

display:flex;

justify-content:center;

flex-wrap:wrap;

gap:25px;

margin:20px 0;

}

.footerInfo a{

color:#fff;

text-decoration:none;

font-size:17px;

transition:.30s;

}

.footerInfo a:hover{

color:#FFD700;

}

.footerInfo i{

color:#FFD700;

margin-left:8px;

}

.counterBox{

display:flex;

justify-content:center;

gap:25px;

flex-wrap:wrap;

margin:30px 0;

}

.counterItem{

background:#111;

border:1px solid #d4af37;

border-radius:15px;

padding:18px 25px;

min-width:220px;

}

.counterTitle{

font-size:15px;

color:#FFD700;

margin-bottom:10px;

}

.counterValue{

font-size:28px;

font-weight:900;

color:#ffffff;

}

.copyRight{

margin-top:25px;

font-size:15px;

color:#cfcfcf;

line-height:2;

}

.copyRight strong{

color:#FFD700;

}

@media(max-width:992px){

.logoArea h1{

font-size:28px;

}

.slide img{

height:260px;

}

.toolGrid{

grid-template-columns:1fr 1fr;

}

}

@media(max-width:768px){

.container{

width:96%;

padding:12px;

}

.topBar{

flex-direction:column;

}

.logoArea h1{

font-size:22px;

line-height:1.9;

}

.logoArea p{

font-size:15px;

}

.mainLogo{

width:120px;

height:120px;

}

.toolGrid{

grid-template-columns:1fr;

}

.slide img{

height:200px;

}

.slide div{

font-size:16px;

}

.footerInfo{

flex-direction:column;

gap:12px;

}

.counterItem{

width:100%;

}

.counterValue{

font-size:24px;

}

}
