.elementor-15 .elementor-element.elementor-element-5d96872.elementor-element{--flex-grow:0;--flex-shrink:0;}:root{--page-title-display:none;}@media(max-width:767px){.elementor-15 .elementor-element.elementor-element-5d96872{width:var( --container-widget-width, 345px );max-width:345px;--container-widget-width:345px;--container-widget-flex-grow:0;}}/* Start custom CSS for html, class: .elementor-element-5d96872 */<!DOCTYPE html>
<html lang="fa" dir="rtl">
<head>

<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Coming Soon</title>

<link href="https://fonts.googleapis.com/css2?family=Vazirmatn:wght@300;400;600;700&display=swap" rel="stylesheet">


<style>

*{
margin:0;
padding:0;
box-sizing:border-box;
}


html,body{

width:100%;
height:100%;

}


body{

font-family:'Vazirmatn',sans-serif;

min-height:100svh;

display:flex;

justify-content:center;

align-items:center;

overflow:hidden;

background:#020617;

color:white;

position:relative;

padding:20px;

}



/* Background */

body::before{

content:"";

position:absolute;

inset:0;


background:

linear-gradient(
-45deg,
#020617,
#0f172a,
#0369a1,
#2563eb,
#1e1b4b,
#020617
);


background-size:400% 400%;

animation:bgmove 18s ease infinite;

z-index:-3;

}




/* Floating Lights */


body::after{

content:"";

position:absolute;

width:160%;

height:160%;


background:

radial-gradient(circle at 20% 30%,
rgba(255,255,255,.12),
transparent 120px),

radial-gradient(circle at 80% 60%,
rgba(255,255,255,.08),
transparent 100px),

radial-gradient(circle at 40% 80%,
rgba(255,255,255,.06),
transparent 80px);


animation:floating 35s linear infinite;


z-index:-2;

}





.container{


width:100%;

max-width:750px;


padding:60px 35px;


text-align:center;


background:

rgba(255,255,255,.08);


backdrop-filter:blur(20px);


-webkit-backdrop-filter:blur(20px);



border:

1px solid rgba(255,255,255,.15);



border-radius:35px;



box-shadow:

0 30px 80px rgba(0,0,0,.45);


}





.logo{


width:100px;

height:100px;


margin:0 auto 30px;



display:flex;

align-items:center;

justify-content:center;



background:white;


color:#0f172a;



border-radius:50%;



font-size:24px;


font-weight:700;



animation:float 4s ease-in-out infinite;


box-shadow:

0 0 40px rgba(255,255,255,.35);


}





h1{


font-size:clamp(32px,6vw,55px);


line-height:1.5;


margin-bottom:20px;


}




p{


font-size:clamp(15px,3vw,20px);


line-height:2;


color:#e5e7eb;


margin-bottom:35px;


}




/* Countdown */


.countdown{


display:flex;

justify-content:center;

gap:15px;

margin-bottom:35px;

direction:ltr;

}



.time{


background:

rgba(255,255,255,.12);



border-radius:15px;


padding:12px 15px;


min-width:70px;


}



.time span{


display:block;


font-size:25px;


font-weight:700;


}



.time small{


font-size:12px;


color:#ddd;


}







/* Loading */


.loader{


width:min(320px,80%);


height:8px;


margin:auto;


overflow:hidden;


background:

rgba(255,255,255,.15);


border-radius:50px;


}




.loader span{


display:block;


height:100%;


width:35%;


background:white;


border-radius:50px;


animation:loading 2s infinite;


}





.footer{


margin-top:35px;


font-size:14px;


color:#ccc;


}





/* Animations */


@keyframes bgmove{


0%{
background-position:0% 50%;
}


50%{
background-position:100% 50%;
}


100%{
background-position:0% 50%;
}


}





@keyframes floating{


0%{

transform:translate(0,0);

}


100%{

transform:translate(-250px,-250px) rotate(360deg);

}


}




@keyframes loading{


0%{

transform:translateX(300%);

}


100%{

transform:translateX(-300%);

}


}





@keyframes float{


0%,100%{

transform:translateY(0);

}


50%{

transform:translateY(-12px);

}


}





/* Mobile */


@media(max-width:600px){



body{

padding:15px;

}



.container{

padding:40px 20px;

border-radius:25px;

}



.logo{


width:80px;

height:80px;


font-size:18px;


}



h1{

font-size:32px;

}



p br{

display:none;

}




.countdown{

gap:8px;

}



.time{

min-width:55px;

padding:10px;

}



.time span{

font-size:20px;

}




.footer{

font-size:12px;

}


}



</style>


</head>



<body>



<div class="container">



<div class="logo">

LOGO

</div>



<h1>

به زودی باز می‌گردیم

</h1>



<p>

در حال طراحی و توسعه وب‌سایت هستیم.<br>

به زودی با امکانات جدید در خدمت شما خواهیم بود.

</p>





<div class="countdown">


<div class="time">

<span id="days">30</span>

<small>روز</small>

</div>



<div class="time">

<span id="hours">12</span>

<small>ساعت</small>

</div>



<div class="time">

<span id="minutes">30</span>

<small>دقیقه</small>

</div>



<div class="time">

<span id="seconds">45</span>

<small>ثانیه</small>

</div>


</div>






<div class="loader">

<span></span>

</div>





<div class="footer">

© تمامی حقوق محفوظ است

</div>



</div>





<script>


let endDate = new Date();

endDate.setDate(endDate.getDate()+30);



function countdown(){


let now = new Date().getTime();


let distance = endDate - now;



let days=Math.floor(distance/(1000*60*60*24));

let hours=Math.floor((distance%(1000*60*60*24))/(1000*60*60));

let minutes=Math.floor((distance%(1000*60*60))/(1000*60));

let seconds=Math.floor((distance%(1000*60))/1000);



document.getElementById("days").innerHTML=days;

document.getElementById("hours").innerHTML=hours;

document.getElementById("minutes").innerHTML=minutes;

document.getElementById("seconds").innerHTML=seconds;


}



setInterval(countdown,1000);


countdown();


</script>



</body>

</html>/* End custom CSS */