/* ===================================================================
   Sepidar Landing v1.0
   File: assets/css/style.css
=================================================================== */

@font-face{

font-family:"Vazirmatn";

src:url("../fonts/Vazirmatn-Regular.woff2") format("woff2");

font-weight:400;

font-style:normal;

}

@font-face{

font-family:"Vazirmatn";

src:url("../fonts/Vazirmatn-SemiBold.woff2") format("woff2");

font-weight:600;

font-style:normal;

}

@font-face{

font-family:"Vazirmatn";

src:url("../fonts/Vazirmatn-Bold.woff2") format("woff2");

font-weight:700;

font-style:normal;

}

:root{

--primary:#178341;
--primary-light:#26a355;

--gold:#C99A2E;
--gold-light:#E6C56A;

--red:#d71818;

--black:#1f1f1f;
--gray:#6b7280;

--bg:#f7f8fa;

--card:#ffffff;

--border:#ececec;

--shadow:0 12px 35px rgba(0,0,0,.08);

--radius:26px;

--transition:.35s ease;

}

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

html{

scroll-behavior:smooth;

}

body{

direction:rtl;

background:#fff;

color:var(--black);

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

overflow-x:hidden;

line-height:1.8;

position:relative;

}

body::before{

content:"";

position:fixed;

inset:0;

background:

url("../images/bg-pattern.svg") center center/cover no-repeat;

opacity:.55;

z-index:-2;

}

a{

text-decoration:none;

transition:var(--transition);

color:inherit;

}

img{

max-width:100%;

display:block;

}

.container{

max-width:1320px;

margin:auto;

padding-inline:18px;

}

section{

padding:70px 0;

}

.text-primary{

color:var(--primary)!important;

}

.text-gold{

color:var(--gold)!important;

}

.text-red{

color:var(--red)!important;

}

.shadow-soft{

box-shadow:var(--shadow);

}

.rounded-30{

border-radius:30px;

}

.bg-white{

background:#fff;

}

::-webkit-scrollbar{

width:10px;

}

::-webkit-scrollbar-thumb{

background:var(--primary);

border-radius:30px;

}

::-webkit-scrollbar-track{

background:#efefef;

}

/* ==========================================================
   HERO
========================================================== */

.hero{

position:relative;

padding:80px 0 110px;

text-align:center;

overflow:hidden;

}

.hero .container{

position:relative;

z-index:5;

}

.hero-logo{
    display:block;
    width:100%;
    max-width:220px;
    height:auto;
    margin:0 auto 32px;
}

.hero-logo:hover{

transform:scale(1.02);

}

.hero h1{

font-size:3.1rem;

font-weight:700;

color:#222;

margin-bottom:18px;

line-height:1.45;

}

.hero h1 span{

color:var(--primary);

}

.hero p{

max-width:760px;

margin:auto;

font-size:1.12rem;

color:#666;

margin-bottom:45px;

}

.hero-wave{

position:absolute;

left:0;

bottom:0;

width:100%;

pointer-events:none;

z-index:1;

}

.hero-wave img{

width:100%;

display:block;

}

.hero-buttons{

display:flex;

justify-content:center;

gap:15px;

flex-wrap:wrap;

margin-top:25px;

}

.hero-buttons .btn{

padding:15px 34px;

border-radius:60px;

font-weight:700;

font-size:1rem;

transition:.3s;

box-shadow:0 12px 30px rgba(0,0,0,.08);

}

.btn-primary{

background:var(--primary);

border:none;

color:#fff;

}

.btn-primary:hover{

background:#126734;

transform:translateY(-3px);

}

.btn-outline{

background:#fff;

border:2px solid var(--primary);

color:var(--primary);

}

.btn-outline:hover{

background:var(--primary);

color:#fff;

}

.hero-scroll{

margin-top:45px;

display:inline-flex;

width:54px;

height:54px;

border-radius:50%;

justify-content:center;

align-items:center;

background:#fff;

box-shadow:var(--shadow);

animation:float 2.2s infinite;

}

.hero-scroll i{

font-size:26px;

color:var(--primary);

}

@keyframes float{

0%{

transform:translateY(0);

}

50%{

transform:translateY(10px);

}

100%{

transform:translateY(0);

}

}

/* ==========================================================
   SYSTEMS
========================================================== */

.systems{

padding:80px 0;

position:relative;

z-index:5;

}

.system-card{

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

backdrop-filter:blur(18px);

border-radius:30px;

padding:38px 30px;

height:100%;

text-align:center;

box-shadow:0 18px 45px rgba(0,0,0,.08);

transition:.35s;

position:relative;

overflow:hidden;

border:1px solid rgba(255,255,255,.75);

}

.system-card::before{

content:"";

position:absolute;

top:0;

right:0;

left:0;

height:5px;

background:var(--primary);

}

.system-card:hover{

transform:translateY(-12px);

box-shadow:0 25px 55px rgba(0,0,0,.12);

}

.system-card img{

height:110px;

width:auto;

margin:auto;

margin-bottom:28px;

transition:.35s;

}

.system-card:hover img{

transform:scale(1.05);

}

.system-card h3{

font-size:2rem;

font-weight:700;

margin-bottom:18px;

}

.system-card p{

font-size:1rem;

line-height:2;

color:#666;

min-height:90px;

margin-bottom:28px;

}

.system-card .btn{

width:100%;

padding:15px;

border-radius:60px;

font-weight:700;

font-size:1rem;

transition:.3s;

}

.system-card .btn i{

margin-left:8px;

}

.system-card:hover .btn{

transform:translateY(-2px);

}

/* Sepidar */

.system-card.sepidar::before{

background:linear-gradient(90deg,#b88417,#f0d28d);

}

.system-card.sepidar h3{

color:#b88417;

}

.system-card.sepidar .btn{

background:#b88417;

color:#fff;

border:none;

}

.system-card.sepidar .btn:hover{

background:#9f7415;

}

/* Divarmelk */

.system-card.divarmelk::before{

background:#d62b34;

}

.system-card.divarmelk h3{

color:#d62b34;

}

.system-card.divarmelk .btn{

background:#d62b34;

color:#fff;

border:none;

}

.system-card.divarmelk .btn:hover{

background:#b41f27;

}

/* Vilachand */

.system-card.vilachand::before{

background:#178341;

}

.system-card.vilachand h3{

color:#178341;

}

.system-card.vilachand .btn{

background:#178341;

color:#fff;

border:none;

}

.system-card.vilachand .btn:hover{

background:#126734;

}

.system-card .btn:active{

transform:scale(.98);

}

/* ==========================================================
   FEATURES
========================================================== */

.features{

padding:80px 0;

}

.feature-box{

background:#fff;

border-radius:26px;

padding:35px;

height:100%;

text-align:center;

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

transition:.35s;

border:1px solid #f2f2f2;

}

.feature-box:hover{

transform:translateY(-8px);

box-shadow:0 25px 50px rgba(0,0,0,.12);

}

.feature-box i{

font-size:52px;

color:var(--primary);

margin-bottom:22px;

display:block;

}

.feature-box h5{

font-size:1.35rem;

font-weight:700;

margin-bottom:15px;

}

.feature-box p{

color:#666;

line-height:2;

margin:0;

}

/* ==========================================================
   CONTACT
========================================================== */

.contact{

padding:80px 0;

}

.contact-card{

background:#fff;

border-radius:30px;

padding:45px;

box-shadow:var(--shadow);

}

.contact-item{

display:flex;

align-items:flex-start;

gap:18px;

margin-bottom:28px;

}

.contact-item:last-child{

margin-bottom:0;

}

.contact-item i{

font-size:34px;

color:var(--primary);

width:40px;

}

.contact-item strong{

display:block;

font-weight:700;

margin-bottom:8px;

}

.contact-item span,

.contact-item a{

color:#555;

display:block;

line-height:2;

}

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

footer{

margin-top:80px;

background:#fff;

padding:60px 0 25px;

border-top:1px solid #ececec;

}

.footer-logo{

max-width:180px;

margin-bottom:20px;

}

.footer-title{

font-size:1.15rem;

font-weight:700;

margin-bottom:18px;

color:var(--primary);

}

.footer-links{

list-style:none;

padding:0;

margin:0;

}

.footer-links li{

margin-bottom:14px;

}

.footer-links a{

color:#666;

transition:.3s;

}

.footer-links a:hover{

color:var(--primary);

padding-right:8px;

}

.footer-bottom{

margin-top:40px;

padding-top:25px;

border-top:1px solid #eee;

display:flex;

justify-content:space-between;

align-items:center;

font-size:.95rem;

color:#777;

}

.footer-social{

display:flex;

gap:12px;

}

.footer-social a{

width:42px;

height:42px;

display:flex;

align-items:center;

justify-content:center;

border-radius:50%;

background:#f5f5f5;

color:var(--primary);

transition:.3s;

}

.footer-social a:hover{

background:var(--primary);

color:#fff;

transform:translateY(-3px);

}

/* ==========================================================
   BACK TO TOP
========================================================== */

#backTop{

position:fixed;

left:22px;

bottom:22px;

width:48px;

height:48px;

border:none;

border-radius:50%;

background:var(--primary);

color:#fff;

display:flex;

align-items:center;

justify-content:center;

cursor:pointer;

opacity:0;

visibility:hidden;

transition:.3s;

box-shadow:0 12px 25px rgba(0,0,0,.2);

z-index:999;

}

#backTop.show{

opacity:1;

visibility:visible;

}

/* ==========================================================
   RESPONSIVE
========================================================== */

@media(max-width:992px){

.hero{

padding-top:60px;

}

.hero h1{

font-size:2.4rem;

}

.hero-logo{

max-width:320px;

}

.system-card{

margin-bottom:25px;

}

.contact-card{

padding:30px;

}

.footer-bottom{

flex-direction:column;

gap:18px;

text-align:center;

}

}

@media(max-width:768px){

.hero{

padding:50px 0 90px;

}

.hero h1{

font-size:1.9rem;

}

.hero p{

font-size:1rem;

}

.hero-logo{

max-width:250px;

}

.system-card{

padding:28px;

}

.system-card img{

height:90px;

}

.system-card h3{

font-size:1.55rem;

}

.feature-box{

margin-bottom:25px;

}

.contact-item{

flex-direction:column;

text-align:center;

align-items:center;

}

footer{

text-align:center;

}

.footer-logo{

margin:0 auto 20px;

}

.footer-social{

justify-content:center;

}

}

@media(max-width:576px){

.container{

padding-inline:15px;

}

.hero h1{

font-size:1.6rem;

}

.hero-buttons{

flex-direction:column;

}

.hero-buttons .btn{

width:100%;

}

.system-card{

padding:24px;

}

.contact-card{

padding:24px;

}

.footer-bottom{

font-size:.85rem;

}

}

/* ===== Contact CTA ===== */

.contact{

padding:110px 0;

}

.contact-cta{

background:#fff;

border-radius:34px;

padding:70px;

position:relative;

overflow:hidden;

border:1px solid rgba(201,154,46,.18);

}

.contact-cta::before{

content:"";

position:absolute;

top:-220px;

left:-220px;

width:520px;

height:520px;

border-radius:50%;

background:radial-gradient(circle,#E8D4A4 0%,transparent 72%);

opacity:.35;

}

.contact-logo{

width:190px;

margin:auto auto 28px;

}

.contact-cta h2{

font-size:2rem;

font-weight:700;

margin-bottom:18px;

}

.contact-cta p{

color:#666;

line-height:2;

margin-bottom:35px;

}

.contact-buttons{

display:flex;
justify-content:center;
align-items:center;
gap:16px;
flex-wrap:wrap;
margin-top:25px;

}

.cta-btn{

display:inline-flex;
align-items:center;
justify-content:center;

min-width:170px;
height:54px;

padding:0 28px;

border-radius:999px;

font-weight:700;

font-size:.98rem;

color:#fff;

text-decoration:none;

transition:.35s;

box-shadow:0 12px 28px rgba(0,0,0,.12);

}

.cta-btn:hover{

transform:translateY(-4px);

color:#fff;

}

.cta-btn.gold{

background:#C99A2E;

}

.cta-btn.gold:hover{

background:#B58825;

}

.cta-btn.red{

background:#D62B34;

}

.cta-btn.red:hover{

background:#BC2029;

}

.cta-btn.green{

background:#178341;

}

.cta-btn.green:hover{

background:#126734;

}

.info-card{

height:100%;

background:#fafafa;

border-radius:24px;

padding:30px;

transition:.35s;

border:1px solid #eee;

}

.info-card:hover{

transform:translateY(-8px);

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

}

.info-card i{

font-size:34px;

color:#178341;

margin-bottom:16px;

display:block;

}

.info-card h5{

font-weight:700;

margin-bottom:15px;

}

.info-card a{

display:block;

margin-bottom:8px;

color:#555;

}

.socials{

display:flex;

justify-content:center;

align-items:center;

gap:18px;

margin-top:20px;

}

.socials img{
    width:28px;
    height:28px;
    display:block;
}

.socials a{

width:58px;

height:58px;

display:flex;

align-items:center;

justify-content:center;

flex:0 0 58px;

padding:0;

margin:0;

text-decoration:none;

border-radius:50%;

background:#fff;

border:1px solid rgba(201,154,46,.25);

box-shadow:0 8px 18px rgba(0,0,0,.08);

color:#178341;

font-size:28px;

transition:.3s;

}

.socials a i{

display:block;

line-height:1;

}

.socials a:hover{

background:#178341;

color:#fff;

transform:translateY(-5px);

box-shadow:0 18px 35px rgba(23,131,65,.25);

}

.footer-minimal{

margin-top:60px;

padding:28px 0;

border-top:1px solid #ececec;

background:#fff;

font-size:.95rem;

}

#backTop{

position:fixed;

left:28px;

bottom:28px;

width:58px;

height:58px;

border:none;

border-radius:50%;

background:linear-gradient(135deg,#178341,#31b65b);

color:#fff;

font-size:34px;

cursor:pointer;

display:flex;

justify-content:center;

align-items:center;

box-shadow:0 18px 45px rgba(23,131,65,.35);

opacity:0;

visibility:hidden;

transition:.35s;

z-index:9999;

}

#backTop.show{

opacity:1;

visibility:visible;

}

#backTop:hover{

transform:translateY(-5px) scale(1.08);

}