/*==================================================
   دفتر وکالت هوشمند بالستانی
   نسخه جدید Style.css
==================================================*/

/* ===== فونت ها ===== */

@font-face{
font-family:"IranNastaliq";
src:url("/fonts/IranNastaliq.woff2") format("woff2");
font-weight:normal;
font-style:normal;
font-display:swap;
}

@font-face{
font-family:"IranianSans";
src:url("/fonts/Iranian Sans.woff2") format("woff2");
font-weight:normal;
font-style:normal;
font-display:swap;
}

/* ===== تنظیمات اولیه ===== */

*{
margin:0;
padding:0;
box-sizing:border-box;
}

html{
scroll-behavior:smooth;
}

body{

background:#050505;

color:#ffffff;

direction:rtl;

overflow-x:hidden;

font-family:"IranianSans",Tahoma,sans-serif;

line-height:1.8;

}

/* ===== لینک ===== */

a{

text-decoration:none;

color:inherit;

}

/* ===== عکس ===== */

img{

display:block;

max-width:100%;

height:auto;

}

/* ===== کانتینر ===== */

.container{

width:95%;

max-width:1450px;

margin:auto;

padding:20px;

}

/* ===== افکت زمینه ===== */

.backgroundGlow{

position:fixed;

top:-250px;

left:-250px;

width:700px;

height:700px;

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

pointer-events:none;

z-index:-1;

}
/*==================================
            HEADER
==================================*/

header{

text-align:center;

margin-bottom:35px;

}

.mainLogo{

width:165px;

height:165px;

margin:auto;

object-fit:contain;

animation:logoGlow 2.5s infinite;

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

}

@keyframes logoGlow{

0%{

transform:scale(1);

filter:drop-shadow(0 0 8px #D4AF37);

}

50%{

transform:scale(1.08);

filter:drop-shadow(0 0 30px #FFD700);

}

100%{

transform:scale(1);

filter:drop-shadow(0 0 8px #D4AF37);

}

}

.logoArea h1{

font-family:"IranNastaliq",serif;

font-size:60px;

font-weight:normal;

color:#D4AF37;

line-height:1.8;

margin-top:15px;

text-shadow:

0 0 10px rgba(212,175,55,.35),

0 0 20px rgba(212,175,55,.20);

}

.logoArea p{

margin-top:8px;

font-size:18px;

color:#d8d8d8;

letter-spacing:1px;

}

/*==================================
            TOP BAR
==================================*/

.topBar{ display:flex; justify-content:center; align-items:center; gap:18px; flex-wrap:nowrap; margin:30px auto; padding:10px 18px; background:#111; border:1px solid #D4AF37; border-radius:14px; width:fit-content; box-shadow:0 0 15px rgba(212,175,55,.18); } .clockBox, .dateBox, .musicBox{ display:flex; align-items:center; gap:8px; padding:8px 16px; border:1px solid rgba(212,175,55,.35); border-radius:10px; background:rgba(255,255,255,.03); color:#fff; font-size:16px; font-weight:bold; white-space:nowrap; } .clockBox i, .dateBox i, .musicBox i{ color:#FFD700; font-size:18px; } @media(max-width:768px){ .topBar{ width:95%; justify-content:space-between; gap:8px; padding:8px; } .clockBox, .dateBox, .musicBox{ flex:1; justify-content:center; padding:8px 6px; font-size:12px; } }
/*==================================
            TOOL GRID
==================================*/

.toolGrid{

display:grid;

grid-template-columns:repeat(4,1fr);

gap:22px;

margin-top:40px;

}

.toolCard{

background:linear-gradient(180deg,#141414,#0d0d0d);

border:2px solid rgba(212,175,55,.45);

border-radius:22px;

padding:22px 15px;

transition:.35s;

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

position:relative;

overflow:hidden;

}

.toolCard:hover{

transform:translateY(-8px);

border-color:#FFD700;

box-shadow:

0 0 20px rgba(255,215,0,.45),

0 0 35px rgba(255,215,0,.18);

}

.toolIcon{

display:block;

font-size:52px;

text-align:center;

color:#FFD700;

margin-bottom:18px;

}

.toolCard h3{

text-align:center;

font-size:22px;

color:#FFD700;

margin-bottom:14px;

font-weight:800;

}

.toolCard p{

text-align:center;

color:#d9d9d9;

line-height:2;

min-height:75px;

font-size:15px;

}

.toolBtn{

display:block;

margin-top:22px;

padding:14px;

text-align:center;

background:#ffffff;

color:#111;

border:2px solid #FFD700;

border-radius:12px;

font-weight:800;

transition:.30s;

}

.toolBtn:hover{

background:#FFD700;

color:#000;

}

.activeTool{

border:3px solid #FFD700 !important;

box-shadow:

0 0 15px rgba(255,215,0,.45),

0 0 30px rgba(255,215,0,.20);

}

.activeTool::before{

content:"فعال";

position:absolute;

top:12px;

left:-38px;

background:#FFD700;

color:#111;

padding:5px 42px;

font-size:11px;

font-weight:bold;

transform:rotate(-45deg);

}
/*==================================
         RESPONSIVE DESIGN
==================================*/

/* لپ تاپ و مانیتور */
@media (max-width:1200px){

.toolGrid{

grid-template-columns:repeat(4,1fr);

gap:18px;

}

}

/* تبلت */
@media (max-width:992px){

.logoArea h1{

font-size:48px;

}

.mainLogo{

width:140px;

height:140px;

}

.toolGrid{

grid-template-columns:repeat(3,1fr);

gap:16px;

}

.toolCard{

padding:18px 12px;

}

.toolCard h3{

font-size:18px;

}

.toolCard p{

display:none;

}

.toolIcon{

font-size:36px;

}

.toolBtn{

font-size:14px;

padding:10px;

}

}

/* موبایل */
@media (max-width:768px){

.container{

width:96%;

padding:12px;

}

.topBar{

flex-direction:column;

}

.logoArea h1{

font-size:36px;

line-height:2;

}

.logoArea p{

font-size:14px;

}

.mainLogo{

width:100px;

height:100px;

}

.toolGrid{

grid-template-columns:repeat(3,1fr);

gap:10px;

}

.toolCard{

padding:12px 8px;

border-radius:16px;

}

.toolIcon{

font-size:24px;

margin-bottom:10px;

}

.toolCard h3{

font-size:13px;

margin-bottom:0;

}

.toolCard p{

display:none;

}

.toolBtn{

font-size:12px;

padding:7px;

margin-top:10px;

}

}
/*==================================
              FOOTER
==================================*/

footer{

margin-top:70px;

padding:35px 20px;

background:#0d0d0d;

border-top:2px solid #D4AF37;

border-radius:20px 20px 0 0;

text-align:center;

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

}

.footerLogo{

width:90px;

margin:auto;

margin-bottom:18px;

animation:logoGlow 2.5s infinite;

}

.footerTitle{

font-family:"IranNastaliq",serif;

font-size:42px;

font-weight:normal;

color:#D4AF37;

margin-bottom:18px;

}

.footerInfo{

display:flex;

justify-content:center;

align-items:center;

flex-wrap:wrap;

gap:28px;

margin:20px 0;

}

.footerInfo a{

color:#ffffff;

font-size:17px;

font-weight:700;

transition:.30s;

}

.footerInfo a:hover{

color:#FFD700;

}

.footerInfo i{

color:#FFD700;

margin-left:8px;

font-size:20px;

}

.copyRight{

margin-top:20px;

font-size:15px;

color:#bfbfbf;

line-height:2;

}

.copyRight strong{

color:#FFD700;

}

/*=============================
      موبایل فوتر
=============================*/

@media(max-width:768px){

.footerTitle{

font-size:30px;

}

.footerInfo{

gap:14px;

}

.footerInfo a{

font-size:14px;

}

.footerLogo{

width:70px;

}

.copyRight{

font-size:13px;

}

}
/*==================================
          LIVE INFORMATION
==================================*/

.liveBar{

display:flex;

justify-content:center;

align-items:center;

flex-wrap:wrap;

gap:22px;

margin:30px 0;

padding:18px;

background:#111;

border:1px solid #D4AF37;

border-radius:18px;

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

}

.liveBar div{

display:flex;

align-items:center;

gap:8px;

font-size:16px;

font-weight:700;

color:#FFD700;

}

/*==================================
             QUOTE
==================================*/

.quote{

max-width:950px;

margin:35px auto;

padding:22px;

background:#111;

border-right:4px solid #FFD700;

border-left:4px solid #FFD700;

border-radius:18px;

text-align:center;

font-size:20px;

font-weight:700;

line-height:2;

color:#ffffff;

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

}

/*==================================
            SLIDER
==================================*/

.slider{

margin:40px auto;

overflow:hidden;

border-radius:20px;

border:1px solid #D4AF37;

background:#111;

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

}

.slide{

display:none;

position:relative;

}

.slide.active{

display:block;

animation:fade .7s;

}

.slide img{

width:100%;

height:320px;

object-fit:cover;

}

.slide div{

position:absolute;

bottom:0;

width:100%;

padding:18px;

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

text-align:center;

font-size:22px;

font-weight:700;

color:#FFD700;

}

@keyframes fade{

from{opacity:0;}

to{opacity:1;}

}

/*==================================
           COUNTERS
==================================*/

.counterBox{

display:flex;

justify-content:center;

flex-wrap:wrap;

gap:22px;

margin:35px 0;

}

.counterItem{

background:#111;

border:1px solid #D4AF37;

border-radius:15px;

padding:18px 24px;

min-width:220px;

text-align:center;

}

.counterTitle{

font-size:15px;

color:#FFD700;

margin-bottom:10px;

}

.counterValue{

font-size:28px;

font-weight:900;

color:#ffffff;

}

/*==================================
        MOBILE OPTIMIZATION
==================================*/

@media(max-width:768px){

.liveBar{

gap:12px;

padding:12px;

}

.liveBar div{

font-size:13px;

}

.quote{

font-size:15px;

padding:16px;

}

.slide img{

height:190px;

}

.slide div{

font-size:15px;

padding:12px;

}

.counterItem{

width:100%;

min-width:unset;

}

.counterValue{

font-size:22px;

}

}
.topBar{ display:flex; justify-content:center; align-items:center; gap:20px; margin:20px auto; } .topItem{ display:flex; align-items:center; justify-content:center; gap:8px; padding:10px 18px; border:1px solid #D4AF37; border-radius:12px; background:#111; min-width:180px; color:#fff; font-weight:bold; } .topItem i{ color:#FFD700; font-size:18px; } @media(max-width:768px){ .topBar{ gap:10px; } .topItem{ min-width:140px; padding:8px 10px; font-size:13px; } }
.topHeader{ display:flex; justify-content:center; align-items:center; gap:15px; flex-wrap:wrap; margin-bottom:25px; } .headerCounter, .topItem{ display:flex; flex-direction:column; justify-content:center; align-items:center; width:180px; height:75px; border:1px solid #D4AF37; border-radius:12px; background:#111; } .counterValue{ font-size:24px; font-weight:900; color:#FFD700; } .counterTitle{ font-size:13px; color:#fff; } .topItem{ flex-direction:row; gap:8px; font-size:18px; font-weight:bold; color:#fff; } .topItem i{ color:#FFD700; } @media(max-width:768px){ .topHeader{ display:grid; grid-template-columns:repeat(2,1fr); gap:10px; } .headerCounter, .topItem{ width:100%; } }
/*==================================
            END
==================================*/