*{

margin:0;
padding:0;
box-sizing:border-box;

}

html{

scroll-behavior:smooth;

}

body{

font-family:Vazirmatn,sans-serif;

background:#F7F8F7;

color:#1A1A1A;

}


.container{

width:90%;

max-width:1280px;

margin:auto;

}




header{

position:fixed;

top:0;

right:0;

width:100%;

background:#fff;

box-shadow:0 4px 20px rgba(0,0,0,.05);

z-index:999;

}


header .container{

    position:relative;

    height:80px;

    display:flex;

    align-items:center;

}

.logo{

    position:absolute;

    right:0;

}

.logo img{

    height:50px;

    width:auto;

    display:block;

}

nav{

    width:100%;

    display:flex;

    justify-content:center;

}

nav ul{

    display:flex;

    gap:40px;

    list-style:none;

}



nav ul{

    display:flex;

    gap:40px;

    list-style:none;

}



nav a{

text-decoration:none;

color:#222;

font-weight:500;

transition:.3s;

}


nav a:hover{

color:#295C45;

}






.hero{

height:100vh;

background:url("../images/hero.jpg") center center;

background-size:cover;

position:relative;

display:flex;

align-items:center;

}



.overlay{

position:absolute;

top:0;

left:0;

width:100%;

height:100%;

background:linear-gradient(to left,
rgba(0,0,0,.2),
rgba(0,0,0,.65));

}



.hero-content{

position:relative;

z-index:2;

color:white;

max-width:650px;

}



.hero h1{

font-size:56px;

line-height:1.4;

margin-bottom:30px;

}



.hero p{

font-size:20px;

line-height:2;

margin-bottom:40px;

}



.hero-buttons{

display:flex;

gap:20px;

}



.btn-primary{

background:#295C45;

padding:18px 36px;

border-radius:14px;

color:white;

text-decoration:none;

transition:.3s;

}



.btn-primary:hover{

background:#347255;

}



.btn-secondary{

border:2px solid white;

padding:18px 36px;

border-radius:14px;

color:white;

text-decoration:none;

transition:.3s;

}



.btn-secondary:hover{

background:white;

color:#295C45;

}



.trust{

background:#295C45;

padding:28px 0;

color:white;

}



.trust .container{

display:flex;

justify-content:space-between;

text-align:center;

font-size:18px;

font-weight:600;

}

/*==========================
WHY
==========================*/

.why{

padding:120px 0;

background:#ffffff;

}


.section-title{

text-align:center;

max-width:700px;

margin:auto;

margin-bottom:70px;

}


.section-title span{

color:#295C45;

font-size:14px;

letter-spacing:3px;

font-weight:700;

}


.section-title h2{

font-size:42px;

margin:20px 0;

}


.section-title p{

font-size:18px;

line-height:2;

color:#666;

}


.why-grid{

display:grid;

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

gap:30px;

max-width:1100px;

margin:auto;

}


.why-card{

background:#fff;

padding:45px 25px;

border-radius:18px;

text-align:center;

border:1px solid #ECECEC;

transition:.35s;

cursor:pointer;

}


.why-card:hover{

transform:translateY(-8px);

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

}


.icon{

width:72px;
height:72px;

background:#295C45;

border-radius:50%;

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

margin:0 auto 25px;

color:#fff;

font-size:30px;

transition:.35s;

}


.why-card:hover .icon{

transform:rotate(8deg) scale(1.08);

background:#347255;

}


.why-card h3{

font-size:20px;

font-weight:600;

line-height:1.8;

}

/*==========================
COLORS
==========================*/

.colors{

padding:120px 0;

background:#F7F8F7;

}


.color-grid{

display:grid;

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

gap:30px;

}


.color-card{

overflow:hidden;

border-radius:18px;

background:#fff;

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

transition:.35s;

cursor:pointer;

}


.color-card img{

width:100%;

display:block;

transition:.4s;

}


.color-card:hover{

transform:translateY(-8px);

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

}


.color-card:hover img{

transform:scale(1.08);

}


/*==========================
LIGHTBOX
==========================*/

.lightbox{

position:fixed;

top:0;
left:0;

width:100%;
height:100%;

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

display:flex;

align-items:center;
justify-content:center;

opacity:0;
visibility:hidden;

transition:.3s;

z-index:9999;

}

.lightbox.active{

opacity:1;

visibility:visible;

}

.lightbox img{

max-width:85%;

max-height:85%;

border-radius:18px;

box-shadow:0 20px 60px rgba(0,0,0,.5);

animation:zoom .3s;

}

.close{

position:absolute;

top:40px;

right:50px;

font-size:48px;

color:white;

cursor:pointer;

user-select:none;

}


.color-card img{

cursor:zoom-in;

}


/*==========================
APPLICATIONS
==========================*/

.applications{

padding:120px 0;

background:#fff;

}

.app-grid{

display:grid;

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

gap:30px;

}

.app-card{

overflow:hidden;

border-radius:18px;

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

background:#fff;

transition:.35s;

}

.app-card:hover{

transform:translateY(-8px);

}

.app-card img{

width:100%;

height:260px;

object-fit:cover;

display:block;

}

.app-card h3{

padding:22px;

text-align:center;

font-size:22px;

}



/*==========================
ABOUT
==========================*/

.about{

padding:120px 0;

background:#F7F8F7;

}

.about-grid{

display:grid;

grid-template-columns:1fr 1fr;

gap:60px;

align-items:center;

}

.about img{

width:100%;

display:block;

border-radius:20px;

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

transition:.3s;

}
.about img:hover{

transform:translateY(-6px);

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

}

.about h2{

font-size:42px;

margin-bottom:30px;

}

.about p{

line-height:2.2;

font-size:18px;

color:#555;

}



/*==========================
STATISTICS
==========================*/

.stats{

padding:80px 0;

background:#295C45;

color:white;

}

.stats .container{

display:grid;

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

text-align:center;

gap:30px;

}

.stat h2{

font-size:52px;

margin-bottom:10px;

}

.stat p{

font-size:18px;

}

/*==========================
FAQ
==========================*/

.faq{

padding:120px 0;

background:#fff;

}

.faq-item{

background:#F7F8F7;

padding:30px;

border-radius:18px;

margin-bottom:20px;

border-right:5px solid #295C45;

}

.faq-item h3{

margin-bottom:15px;

font-size:22px;

}

.faq-item p{

line-height:2;

color:#666;

}


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

.contact{

padding:100px 0;

background:#295C45;

text-align:center;

color:white;

}

.contact h2{

font-size:36px;

margin-bottom:40px;

}

.contact-btn{

display:inline-block;

background:white;

color:#295C45;

padding:18px 40px;

border-radius:14px;

text-decoration:none;

font-size:20px;

font-weight:bold;

transition:.3s;

}

.contact-btn:hover{

transform:translateY(-5px);

}


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

footer{

background:#1A1A1A;

color:white;

padding:70px 0 20px;

}

.footer-grid{

display:grid;

grid-template-columns:2fr 1fr 1fr;

gap:50px;

}

.footer-grid h3{

margin-bottom:20px;

}

.footer-grid p{

line-height:2;

color:#ccc;

}

.footer-grid ul{

list-style:none;

}

.footer-grid li{

margin-bottom:12px;

}

.footer-grid a{

color:#ccc;

text-decoration:none;

}

.footer-grid a:hover{

color:white;

}

.copyright{

margin-top:60px;

text-align:center;

color:#888;

padding-top:20px;

border-top:1px solid #333;

}

.phone-number{
    direction:ltr;
    unicode-bidi:isolate;
    display:inline-block;
}

@media(max-width:768px){

.footer-grid{

grid-template-columns:1fr;

text-align:center;

}

.contact h2{

font-size:28px;

}

}


@keyframes zoom{

from{

transform:scale(.8);

opacity:0;

}

to{

transform:scale(1);

opacity:1;

}

}



@media(max-width:992px){

.color-grid{

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

}

}

@media(max-width:576px){

.color-grid{

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

}

}