@font-face { font-family: "vazir"; src: url("fonts/Vazir-Medium.ttf") format("truetype"); }
	@font-face { font-family: "sf"; src: url("fonts/SFArabic-Ultralight.ttf") format("truetype"); }
	@font-face { font-family: "yekan"; src: url("fonts/Yekan.ttf") format("truetype"); }
		*{
			 margin: 0;
  padding: 0;
  direction: rtl;
  transition: all ease-in-out 0.5s;
  box-sizing: border-box;
		}
		body{
			font-family: sf;
		}

		/* هدر سایت position:fixed هست و روی محتوا شناوره؛ بدون این خط،
		   با پرش به هر #anchor (مثل لینک درخواست دموی داخل پیامک)،
		   عنصر مقصد دقیقاً زیر هدر شناور قرار می‌گیره و دیده نمی‌شه */
		html{
			scroll-padding-top: 110px;
		}
	/* ================= HEADER ================= */

header{
    position:fixed;
    top:15px;
    left:50%;
    transform:translateX(-50%);
    width:95%;
    max-width:1450px;

    display:flex;
    align-items:center;
    justify-content:space-between;
    flex-wrap:wrap;

    padding:18px 35px;

   background:linear-gradient(135deg,hsl(171.56deg 75.42% 35.1%),#1bccb3a1);

    border-radius:32px;

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

   overflow:visible;

    z-index:999;

    transition:.45s ease;
}

/* حباب ها
   این حباب‌ها قبلاً pseudo-element خودِ header بودن و چون header
   overflow:visible داره (برای اینکه منوی موبایل بتونه بیرون از هدر نشون داده بشه)،
   حباب‌ها هم از هدر بیرون می‌زدن و روی کل صفحه پخش می‌شدن و جلوی کلیک‌ها رو می‌گرفتن.
   الان یه wrapper جدا (.header-bg) داخل header داریم که خودش overflow:hidden داره
   و دقیقاً هم‌شکل و هم‌اندازه‌ی header هست، پس حباب‌ها فقط داخل همون قاب دیده می‌شن. */

.header-bg{
    position:absolute;
    inset:0;
    border-radius:32px;
    overflow:hidden;
    pointer-events:none;
    z-index:0;
}

.header-bg::before{

    content:"";

    position:absolute;

    width:340px;
    height:340px;

    border-radius:50%;

    background:rgba(255,255,255,.08);

    right:-130px;
    top:-180px;

    animation:float1 9s infinite ease-in-out;

}

.header-bg::after{

    content:"";

    position:absolute;

    width:240px;
    height:240px;

    border-radius:50%;

    background:rgba(255,255,255,.08);

    left:-80px;
    bottom:-120px;

    animation:float2 8s infinite ease-in-out;

}

/* ================= LOGO ================= */

.logo-section{

    display:flex;

    align-items:center;

    gap:15px;

    position:relative;

    z-index:5;

}

.logo-section img{

    height:50px;

    transition:.4s;

}

.logo-section span{

    color:#fff;

    font-size:20px;

    font-weight:bold;

    transition:.4s;

}

		#just-logo{
    display:flex;
    align-items:center;
    justify-content:center;
    height:100%;
    z-index:10;
}

#just-logo svg,
#just-logo img{
    height:45px;   /* کنترل سایز لوگو */
    width:auto;
    display:block;
}
		@media(max-width:768px){
    #just-logo svg,
    #just-logo img{
        height:36px;
    }
}
/* ================= NAV ================= */

nav{

    display:flex;

    align-items:center;

    justify-content:center;

    flex:1;

    gap:35px;

    position:relative;

    z-index:5;

}

nav a{

    color:#fff;

    text-decoration:none;

    font-weight:600;

    font-size:16px;

    padding:10px 0;

    position:relative;

}

nav a::after{

    content:"";

    position:absolute;



    bottom:0;

    right:0;

    width:0;

    height:2px;

    border-radius:20px;

    background:#fff;

    transition:.35s;

}

nav a:hover{

    transform:translateY(-3px);

}

nav a:hover::after{

    width:100%;

}

/* دکمه */

nav a:nth-child(3){

    background:#fff;

    color:hsl(170 81% 28% / 1);

    padding:12px 22px;

    border-radius:50px;

    box-shadow:0 8px 20px rgba(0,0,0,.15);

}

nav a:nth-child(3)::after{

    display:none;

}

nav a:nth-child(3):hover{

    background:#eef9fd;

}

/* ================= HAMBURGER ================= */

.hamburger{
  display:none;
  cursor:pointer;
  z-index:1002;
}

.hamburger svg {
    width: 42px;
    height: 42px;
    /* margin-top: 5px; */
    padding-top: 5px;
}
.line{
  fill:none;
  stroke:#fff;
  stroke-width:6;
  stroke-linecap:round;
  transition:stroke-dasharray 400ms, stroke-dashoffset 400ms;
}

/* خطوط */
.ham1 .top{
  stroke-dasharray: 40 139;
}

.ham1 .bottom{
  stroke-dasharray: 40 180;
}

/* انیمیشن تبدیل به X */
.hamburger.active .top{
  stroke-dashoffset: -98px;
}

.hamburger.active .bottom{
  stroke-dashoffset: -138px;
}

/* چرخش کل آیکن */
.hamburger.active svg{
  transform: rotate(45deg);
  transition: transform 400ms;
}
/* ================= MOBILE MENU ================= */

.mobile-menu{

    position:absolute;

    top:calc(100% + 12px);

    right:0;

    left:0;

    background:#fff;

    border-radius:28px;

    box-shadow:
        0 20px 50px rgba(0,0,0,.15);

    overflow:hidden;

    max-height:0;

    opacity:0;

    pointer-events:none;

    transition:.45s ease;

}

.mobile-menu.active{

    max-height:400px;

    opacity:1;

    pointer-events:auto;

    padding:18px;

}

.mobile-menu a{

    display:block;

    color:#169d8a;

    text-decoration:none;

    padding:16px 20px;

    border-radius:18px;

    font-size:18px;

    font-weight:bold;

    margin-bottom:10px;

}

.mobile-menu a:last-child{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    background:#169d8a;

    color:#fff;

    padding:14px 28px;

    border-radius:50px;

    font-weight:bold;

    width:auto;

    margin:15px auto 0;

    box-shadow:0 10px 25px rgba(22,157,138,.25);

}
		.mobile-menu a:last-child:hover{

    background:#118876;

}

/* ================= SCROLL ================= */

header.scrolled{

    top:8px;

    padding:12px 30px;

   background:linear-gradient(135deg,hsl(171.56deg 75.42% 35.1%),#1bccb3a1);
    backdrop-filter:blur(18px);

}

header.scrolled .logo-section img{

    height:42px;

}

header.scrolled .logo-section span{

    font-size:17px;

}

/* ================= ANIMATION ================= */

@keyframes float1{

0%{

transform:translate(0,0) scale(1);

}

25%{

transform:translate(-35px,25px) scale(1.12);

}

50%{

transform:translate(-60px,5px) scale(.95);

}

75%{

transform:translate(-15px,35px) scale(1.08);

}

100%{

transform:translate(0,0) scale(1);

}

}

@keyframes float2{

0%{

transform:translate(0,0) scale(1);

}

25%{

transform:translate(25px,-25px) scale(1.08);

}

50%{

transform:translate(60px,-5px) scale(.92);

}

75%{

transform:translate(15px,-40px) scale(1.12);

}

100%{

transform:translate(0,0) scale(1);

}

}
/* ================= MOBILE ================= */

@media(max-width:768px){




header{

width:96%;

padding:15px 20px;

border-radius:25px;

flex-wrap:nowrap;

justify-content:flex-start;

}

.header-bg{
border-radius:25px;
}

.logo-section span{
    font-size:14px;
    white-space:nowrap;
}
nav{

display:none;

}

.logo-section{

order:2;

}

.hamburger{

display:block;

order:1;

}

.mobile-menu{

display:block;

}

header.scrolled{

padding:15px 20px;

}

  
}