/* ===================================
   Language Store
   Version 1
=================================== */

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

html{
    scroll-behavior:smooth;
}

:root{

    --primary:#2563eb;
    --secondary:#1d4ed8;

    --background:#f5f7fb;

    --white:#ffffff;

    --text:#1f2937;

    --gray:#6b7280;

    --success:#22c55e;

    --danger:#ef4444;

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

    --radius:15px;

}

body{

    direction:rtl;

    font-family:'Vazirmatn',sans-serif;

    background:var(--background);

    color:var(--text);

    line-height:1.8;

}

/*==========================
Container
==========================*/

.container{

    width:90%;

    max-width:1200px;

    margin:auto;

}

/*==========================
Navbar
==========================*/

header{

    background:white;

    position:sticky;

    top:0;

    z-index:1000;

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

}

.navbar{

    width:90%;

    max-width:1200px;

    margin:auto;

    display:flex;

    justify-content:space-between;

    align-items:center;

    height:75px;

}

.logo{

    color:var(--primary);

    font-size:30px;

    font-weight:bold;

}

.navbar ul{

    list-style:none;

    display:flex;

    gap:30px;

}

.navbar a{

    text-decoration:none;

    color:#333;

    transition:.3s;

    font-weight:500;

}

.navbar a:hover{

    color:var(--primary);

}

/*==========================
Hero
==========================*/

.hero{

    min-height:600px;

    display:flex;

    align-items:center;

    justify-content:center;

    text-align:center;

    color:white;

    background:

    linear-gradient(

    rgba(37,99,235,.82),

    rgba(29,78,216,.82)

    ),

    url("../images/hero/hero1.jpg");

    background-size:cover;

    background-position:center;

}

.hero-content{

    width:90%;

    max-width:800px;

}

.hero h1{

    font-size:58px;

    margin-bottom:20px;

}

.hero p{

    font-size:22px;

    margin-bottom:35px;

}

/*==========================
Button
==========================*/

.btn{

    display:inline-block;

    padding:15px 40px;

    border-radius:12px;

    background:white;

    color:var(--primary);

    text-decoration:none;

    font-weight:bold;

    transition:.35s;

}

.btn:hover{

    transform:translateY(-5px);

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

}

/*==========================
Features
==========================*/

.features{

    width:90%;

    max-width:1200px;

    margin:80px auto;

    display:grid;

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

    gap:30px;

}

.feature{

    background:white;

    border-radius:var(--radius);

    padding:40px;

    text-align:center;

    box-shadow:var(--shadow);

    transition:.35s;

}

.feature:hover{

    transform:translateY(-8px);

}

.feature h2{

    margin:20px 0;

    color:var(--primary);

}

.feature p{

    color:var(--gray);

}

.feature{

    font-size:50px;

}

/*==========================
Section Title
==========================*/

.section-title{

    text-align:center;

    font-size:38px;

    margin-bottom:50px;

}

/*==========================
Latest Products
==========================*/

.latest{

    width:90%;

    max-width:1200px;

    margin:80px auto;

}

/*==========================
Footer
==========================*/

footer{

    margin-top:100px;

    background:#111827;

    color:white;

    text-align:center;

    padding:40px;

}

footer p{

    opacity:.8;

}

/*==========================
Animation
==========================*/

.fade{

    animation:fade .8s ease;

}

@keyframes fade{

from{

opacity:0;

transform:translateY(30px);

}

to{

opacity:1;

transform:translateY(0);

}

}

/*==========================
Responsive
==========================*/

@media(max-width:900px){

.hero h1{

font-size:42px;

}

.hero p{

font-size:18px;

}

.features{

grid-template-columns:1fr;

}

.navbar{

height:auto;

padding:20px;

flex-direction:column;

}

.navbar ul{

margin-top:15px;

flex-wrap:wrap;

justify-content:center;

}

}

@media(max-width:600px){

.hero{

min-height:450px;

}

.hero h1{

font-size:32px;

}

.hero p{

font-size:16px;

}

.btn{

padding:12px 30px;

}

.logo{

font-size:24px;

}

}
/*==================================
Products Page
==================================*/

.products-page{

    width:90%;

    max-width:1300px;

    margin:60px auto;

}

.products-page h1{

    text-align:center;

    margin-bottom:40px;

    font-size:42px;

}

.search-box{

    width:100%;

    margin-bottom:30px;

}

.search-box input{

    width:100%;

    padding:16px 20px;

    border-radius:12px;

    border:1px solid #ddd;

    font-size:16px;

    outline:none;

    transition:.3s;

}

.search-box input:focus{

    border-color:var(--primary);

}

/*==================================
Filter
==================================*/

.filter-buttons{

    display:flex;

    justify-content:center;

    gap:15px;

    flex-wrap:wrap;

    margin-bottom:40px;

}

.filter-buttons button{

    padding:12px 28px;

    border:none;

    border-radius:30px;

    cursor:pointer;

    background:white;

    box-shadow:var(--shadow);

    transition:.3s;

    font-weight:bold;

}

.filter-buttons button:hover{

    background:var(--primary);

    color:white;

}

/*==================================
Grid
==================================*/

.products-grid{

    display:grid;

    grid-template-columns:repeat(auto-fill,minmax(300px,1fr));

    gap:30px;

}

/*==================================
Card
==================================*/

.product-card{

    background:white;

    border-radius:18px;

    overflow:hidden;

    box-shadow:var(--shadow);

    transition:.35s;

    position:relative;

}

.product-card:hover{

    transform:translateY(-8px);

}

/*==================================
Image
==================================*/

.product-image{

    position:relative;

}

.product-image img{

    width:100%;

    height:250px;

    object-fit:cover;

}

/*==================================
Discount
==================================*/

.discount{

    position:absolute;

    top:15px;

    right:15px;

    background:#ef4444;

    color:white;

    padding:6px 12px;

    border-radius:20px;

    font-size:13px;

    font-weight:bold;

}

/*==================================
NEW
==================================*/

.new{

    position:absolute;

    top:15px;

    left:15px;

    background:#22c55e;

    color:white;

    padding:6px 12px;

    border-radius:20px;

    font-size:13px;

}

/*==================================
Body
==================================*/

.product-content{

    padding:22px;

}

.product-content h3{

    font-size:22px;

    margin-bottom:12px;

}

.category{

    color:var(--gray);

    margin-bottom:10px;

}

/*==================================
Stars
==================================*/

.rating{

    color:#f59e0b;

    margin-bottom:10px;

    font-size:18px;

}

/*==================================
Info
==================================*/

.info{

    display:flex;

    justify-content:space-between;

    color:var(--gray);

    margin:18px 0;

    font-size:14px;

}

/*==================================
Price
==================================*/

.old-price{

    color:#999;

    text-decoration:line-through;

    font-size:15px;

}

.price{

    color:var(--primary);

    font-size:28px;

    font-weight:bold;

    margin:8px 0;

}

/*==================================
Button
==================================*/

.more-btn{

    display:block;

    text-align:center;

    padding:13px;

    background:var(--primary);

    color:white;

    border-radius:10px;

    text-decoration:none;

    transition:.3s;

}

.more-btn:hover{

    background:var(--secondary);

}

/*==================================
Responsive
==================================*/

@media(max-width:700px){

.products-grid{

grid-template-columns:1fr;

}

.info{

flex-direction:column;

gap:10px;

}

}
/* FAQ */

.faq{

max-width:900px;

margin:auto;

}

.faq-item{

background:#fff;

margin-bottom:20px;

border-radius:12px;

overflow:hidden;

box-shadow:var(--shadow);

}

.faq-question{

width:100%;

padding:20px;

background:#fff;

border:none;

cursor:pointer;

text-align:right;

font-size:18px;

font-weight:bold;

}

.faq-answer{

max-height:0;

overflow:hidden;

transition:.35s;

padding:0 20px;

}

.faq-answer p{

padding:20px 0;

color:#555;

}
/*==========================
Contact
==========================*/

.contact-page{

padding:70px 0;

}

.contact-grid{

display:grid;

grid-template-columns:1fr 1fr;

gap:35px;

}

.contact-card{

background:#fff;

padding:35px;

border-radius:15px;

box-shadow:var(--shadow);

}

.contact-card h2{

margin-bottom:20px;

color:var(--primary);

}

.contact-card p{

margin-bottom:15px;

}

.contact-card form{

display:flex;

flex-direction:column;

gap:18px;

}

.contact-card input,

.contact-card textarea{

padding:15px;

border:1px solid #ddd;

border-radius:10px;

font-family:inherit;

font-size:15px;

outline:none;

}

.contact-card input:focus,

.contact-card textarea:focus{

border-color:var(--primary);

}

.contact-card textarea{

resize:vertical;

}

@media(max-width:850px){

.contact-grid{

grid-template-columns:1fr;

}

}
.faq-page{
    width:90%;
    max-width:1000px;
    margin:70px auto;
}

.product-page{
    width:90%;
    max-width:1200px;
    margin:60px auto;
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:40px;
}

.gallery{
    background:#fff;
    padding:20px;
    border-radius:15px;
    box-shadow:var(--shadow);

    display:flex;
    flex-direction:column;
    align-items:center;
}

.main-image{
    width:100%;
    max-width:550px;
    height:auto;
    max-height:650px;
    object-fit:contain;
    display:block;
    margin:auto;
    border-radius:12px;
}

.thumbs{
    display:flex;
    justify-content:center;
    gap:10px;
    margin-top:20px;
    flex-wrap:wrap;
}

.thumb{
    width:90px;
    height:90px;
    object-fit:contain;
    background:#fff;
    border:2px solid #ddd;
    border-radius:8px;
    cursor:pointer;
    padding:4px;
    transition:.3s;
}

.thumb:hover{
    transform:scale(1.05);
    border-color:var(--primary);
}

.active-thumb{
    border-color:var(--primary);
}

.product-info{
    background:#fff;
    padding:30px;
    border-radius:15px;
    box-shadow:var(--shadow);
}

@media(max-width:900px){

.product-page{

grid-template-columns:1fr;

}

}