/* ===========================
   Soft Play Kids Website
   style.css
=========================== */

/* ===== Google Font ===== */

@import url('https://fonts.googleapis.com/css2?family=Vazirmatn:wght@300;400;500;700;800&display=swap');

/* ===== CSS Variables ===== */

:root{

--blue:#3B82F6;
--green:#22C55E;
--yellow:#FACC15;
--orange:#FB923C;
--purple:#8B5CF6;
--pink:#EC4899;

--dark:#1F2937;
--gray:#6B7280;
--light:#F8FAFC;
--white:#ffffff;

--radius:20px;
--shadow:0 15px 40px rgba(0,0,0,.12);
--transition:.35s ease;

}

/* ===== Reset ===== */

*{

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

}

html{

scroll-behavior:smooth;

}

body{

font-family:'Vazirmatn',sans-serif;
background:var(--light);
color:var(--dark);
line-height:1.9;
overflow-x:hidden;

}

img{

max-width:100%;
display:block;

}

a{

text-decoration:none;

}

ul{

list-style:none;

}

.container{

width:min(1200px,92%);
margin:auto;

}

/* ===== Loader ===== */

#loader{

position:fixed;
top:0;
left:0;
width:100%;
height:100%;
background:#fff;
display:flex;
align-items:center;
justify-content:center;
z-index:99999;

}

.spinner{

width:70px;
height:70px;
border-radius:50%;
border:8px solid #eee;
border-top:8px solid var(--blue);
animation:spin 1s linear infinite;

}

@keyframes spin{

100%{

transform:rotate(360deg);

}

}

/* =====================
HEADER
===================== */

header{

position:fixed;
top:0;
right:0;
left:0;
z-index:999;
background:rgba(255,255,255,.95);
backdrop-filter:blur(14px);
box-shadow:0 5px 20px rgba(0,0,0,.06);

}

.navbar{

height:85px;

display:flex;

justify-content:space-between;

align-items:center;

width:min(1200px,92%);
margin:auto;

}

.logo{

display:flex;

align-items:center;

gap:12px;

font-weight:800;

font-size:24px;

color:var(--blue);

}

.logo img{

width:55px;

}

.menu{

display:flex;

gap:40px;

}

.menu li a{

font-size:17px;

font-weight:600;

color:var(--dark);

position:relative;

transition:var(--transition);

}

.menu li a::after{

content:'';

position:absolute;

bottom:-8px;

right:0;

width:0;

height:3px;

background:var(--orange);

transition:.3s;

border-radius:30px;

}

.menu li a:hover{

color:var(--blue);

}

.menu li a:hover::after{

width:100%;

}

.hamburger{

display:none;

font-size:28px;

cursor:pointer;

color:var(--blue);

}

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

.hero{

padding-top:120px;

min-height:100vh;

display:grid;

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

align-items:center;

gap:70px;

width:min(1200px,92%);

margin:auto;

position:relative;

overflow:hidden;

}

/* رنگ‌های شناور */

.hero::before{

content:'';

position:absolute;

width:450px;

height:450px;

background:var(--yellow);

opacity:.15;

border-radius:50%;

top:-180px;

right:-120px;

}

.hero::after{

content:'';

position:absolute;

width:350px;

height:350px;

background:var(--pink);

opacity:.12;

border-radius:50%;

left:-150px;

bottom:-150px;

}

.hero-content{

position:relative;
z-index:2;

}

.hero h1{

font-size:58px;

font-weight:800;

line-height:1.3;

margin-bottom:20px;

}

.hero p{

font-size:20px;

color:var(--gray);

margin-bottom:35px;

}

.btn{

display:inline-block;

padding:18px 42px;

background:linear-gradient(45deg,var(--orange),var(--yellow));

color:#fff;

font-weight:700;

border-radius:50px;

box-shadow:var(--shadow);

transition:var(--transition);

}

.btn:hover{

transform:translateY(-8px);

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

}

.hero-image{

position:relative;

animation:float 5s ease-in-out infinite;

}

.hero-image img{

width:100%;

}

@keyframes float{

0%,100%{

transform:translateY(0);

}

50%{

transform:translateY(-18px);

}

}

/* موج پایین Hero */

.hero-wave{

position:absolute;

bottom:0;

left:0;

width:100%;

}

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

section{

padding:100px 0;

}

section h2{

font-size:40px;

text-align:center;

margin-bottom:60px;

position:relative;

font-weight:800;

}

section h2::after{

content:'';

position:absolute;

width:90px;

height:5px;

background:linear-gradient(90deg,var(--blue),var(--orange));

bottom:-18px;

left:50%;

transform:translateX(-50%);

border-radius:30px;

}

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

#about{

    background:#fff;

}

.features{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(220px,1fr));

    gap:30px;

    margin-top:60px;

}

.feature{

    background:#fff;

    border-radius:25px;

    padding:40px 25px;

    text-align:center;

    transition:.35s;

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

    cursor:pointer;

    position:relative;

    overflow:hidden;

}

.feature::before{

    content:"";

    position:absolute;

    inset:0;

    background:linear-gradient(135deg,var(--blue),var(--purple));

    opacity:0;

    transition:.35s;

}

.feature:hover::before{

    opacity:1;

}

.feature>*{

    position:relative;

    z-index:2;

}

.feature i{

    font-size:55px;

    color:var(--orange);

    margin-bottom:20px;

    transition:.35s;

}

.feature h3{

    font-size:24px;

    margin-bottom:12px;

}

.feature p{

    color:var(--gray);

}

.feature:hover{

    transform:translateY(-12px);

}

.feature:hover i,

.feature:hover h3,

.feature:hover p{

    color:#fff;

}

/*==================================================
PRODUCTS
==================================================*/

#products{

    background:#F7FAFF;

}

.cards{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(280px,1fr));

    gap:35px;

}

.card{

    background:#fff;

    border-radius:25px;

    overflow:hidden;

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

    transition:.35s;

    position:relative;

}

.card:hover{

    transform:translateY(-12px);

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

}

.card img{

    width:100%;

    height:240px;

    object-fit:cover;

    transition:.5s;

}

.card:hover img{

    transform:scale(1.08);

}

.card h3{

    margin:25px;

    font-size:26px;

}

.card p{

    margin:0 25px 25px;

    color:var(--gray);

}

.card a{

    display:inline-block;

    margin:0 25px 30px;

    padding:12px 28px;

    border-radius:40px;

    background:linear-gradient(45deg,var(--orange),var(--yellow));

    color:#fff;

    font-weight:700;

    transition:.35s;

}

.card a:hover{

    transform:scale(1.08);

}

.card::after{

    content:"";

    position:absolute;

    width:100%;

    height:6px;

    bottom:0;

    left:0;

    background:linear-gradient(90deg,

    var(--blue),

    var(--green),

    var(--yellow),

    var(--orange));

}

/*==================================================
GALLERY
==================================================*/

.gallery{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(250px,1fr));

    gap:20px;

}

.gallery img{

    border-radius:20px;

    width:100%;

    height:250px;

    object-fit:cover;

    cursor:pointer;

    transition:.4s;

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

}

.gallery img:hover{

    transform:scale(1.05) rotate(2deg);

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

}

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

#faq{

    background:#fff;

}

.faq-item{

    background:#fff;

    margin-bottom:20px;

    padding:28px;

    border-radius:18px;

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

    transition:.3s;

}

.faq-item:hover{

    transform:translateX(-8px);

}

.faq-item h3{

    color:var(--blue);

    margin-bottom:15px;

    font-size:22px;

}

.faq-item p{

    color:var(--gray);

}

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

#contact{

    background:linear-gradient(

    135deg,

    #EFF6FF,

    #FFFDF2

    );

}

form{

    max-width:750px;

    margin:auto;

    display:flex;

    flex-direction:column;

    gap:22px;

}

form input,

form textarea{

    width:100%;

    padding:18px;

    border:none;

    border-radius:18px;

    font-family:inherit;

    font-size:17px;

    background:#fff;

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

    transition:.3s;

}

form textarea{

    min-height:180px;

    resize:vertical;

}

form input:focus,

form textarea:focus{

    outline:none;

    box-shadow:0 0 0 4px rgba(59,130,246,.25);

}

form button{

    border:none;

    padding:18px;

    border-radius:50px;

    background:linear-gradient(

    45deg,

    var(--blue),

    var(--purple)

    );

    color:#fff;

    font-size:18px;

    font-weight:700;

    cursor:pointer;

    transition:.35s;

}

form button:hover{

    transform:translateY(-5px);

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

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

footer{

    background:linear-gradient(135deg,#2563EB,#7C3AED);

    color:#fff;

    text-align:center;

    padding:35px 15px;

}

footer p{

    font-size:16px;

    letter-spacing:.5px;

}

/*==================================================
WHATSAPP BUTTON
==================================================*/

.phone{

    position:fixed;

    left:25px;

    bottom:25px;

    width:65px;

    height:65px;

    border-radius:50%;

    background:#fff;

    color:#2563eb;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:32px;

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

    z-index:999;

    transition:.35s;

}

.whatsapp:hover{

    transform:scale(1.15) rotate(10deg);

}

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

.reveal{

    opacity:0;

    transform:translateY(60px);

    transition:all .8s ease;

}

.reveal.active{

    opacity:1;

    transform:translateY(0);

}

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

.top-btn{

    position:fixed;

    right:25px;

    bottom:25px;

    width:55px;

    height:55px;

    border-radius:50%;

    background:var(--blue);

    color:#fff;

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:24px;

    cursor:pointer;

    opacity:0;

    visibility:hidden;

    transition:.3s;

    z-index:998;

}

.top-btn.show{

    opacity:1;

    visibility:visible;
	
	text-align: center;
	
	align-content: end;

}

/*==================================================
CUSTOM SCROLLBAR
==================================================*/

::-webkit-scrollbar{

    width:10px;

}

::-webkit-scrollbar-track{

    background:#f2f2f2;

}

::-webkit-scrollbar-thumb{

    background:linear-gradient(

        var(--blue),

        var(--purple)

    );

    border-radius:20px;

}

/*==================================================
SELECTION
==================================================*/

::selection{

    background:var(--orange);

    color:#fff;

}

/*==================================================
MOBILE MENU
==================================================*/

@media(max-width:992px){

.menu{

    position:fixed;

    top:85px;

    right:-100%;

    width:280px;

    height:calc(100vh - 85px);

    background:#fff;

    flex-direction:column;

    align-items:center;

    justify-content:flex-start;

    padding-top:40px;

    gap:30px;

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

    transition:.4s;

}

.menu.active{

    right:0;

}

.hamburger{

    display:block;

}

.hero{

    grid-template-columns:1fr;

    text-align:center;

    gap:40px;

}

.hero h1{

    font-size:42px;

}

.hero p{

    font-size:18px;

}

.hero-image{

    order:-1;

}

}

/*==================================================
TABLET
==================================================*/

@media(max-width:768px){

section{

    padding:70px 0;

}

section h2{

    font-size:34px;

}

.logo span{

    font-size:20px;

}

.cards{

    grid-template-columns:1fr;

}

.gallery{

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

}

.features{

    grid-template-columns:1fr 1fr;

}

}

/*==================================================
PHONE
==================================================*/

@media(max-width:576px){

.navbar{

    height:75px;

}

.hero{

    padding-top:100px;

}

.hero h1{

    font-size:34px;

}

.hero p{

    font-size:16px;

}

.btn{

    padding:15px 28px;

}

.gallery{

    grid-template-columns:1fr;

}

.features{

    grid-template-columns:1fr;

}

.card h3{

    font-size:22px;

}

.card img{

    height:210px;

}

form input,

form textarea{

    font-size:15px;

}

.whatsapp{

    width:58px;

    height:58px;

    font-size:28px;

}

}

/*==================================================
LARGE DESKTOP
==================================================*/

@media(min-width:1400px){

.container{

    max-width:1320px;

}

.hero h1{

    font-size:70px;

}

.hero p{

    font-size:24px;

}

}

/*==================================================
UTILITY CLASSES
==================================================*/

.text-center{

    text-align:center;

}

.mt-2{margin-top:20px;}
.mt-3{margin-top:30px;}
.mt-4{margin-top:40px;}
.mb-2{margin-bottom:20px;}
.mb-3{margin-bottom:30px;}
.mb-4{margin-bottom:40px;}

.shadow{

    box-shadow:var(--shadow);

}

.rounded{

    border-radius:var(--radius);

}

.hide{

    display:none;

}

.show{

    display:block;

}

/*==================================================
END OF CSS
==================================================*/

/*=============================
Testimonials
=============================*/

#testimonials{

background:#F8FAFC;

}

.testimonial-slider{

max-width:850px;

margin:auto;

position:relative;

}

.testimonial{

display:none;

background:#fff;

padding:50px;

border-radius:25px;

text-align:center;

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

animation:fadeTestimonial .6s;

}

.testimonial.active{

display:block;

}

.quote{

font-size:55px;

color:var(--orange);

margin-bottom:20px;

}

.testimonial p{

font-size:20px;

line-height:2;

color:var(--gray);

margin-bottom:30px;

}

.testimonial h3{

font-size:24px;

color:var(--blue);

margin-bottom:8px;

}

.testimonial span{

color:#777;

}

.testimonial-buttons{

display:flex;

justify-content:center;

gap:15px;

margin-top:35px;

}

.testimonial-buttons button{

width:55px;

height:55px;

border:none;

border-radius:50%;

background:var(--blue);

color:#fff;

cursor:pointer;

font-size:18px;

transition:.3s;

}

.testimonial-buttons button:hover{

transform:scale(1.1);

background:var(--orange);

}

@keyframes fadeTestimonial{

from{

opacity:0;

transform:translateY(20px);

}

to{

opacity:1;

transform:translateY(0);

}

}
```css
/*==================================================
PRODUCT PAGE
==================================================*/

/* ---------- Hero ---------- */

.product-hero{

padding:150px 0 80px;

background:linear-gradient(135deg,#60A5FA,#A78BFA);

color:#fff;

text-align:center;

}

.product-hero h1{

font-size:48px;

font-weight:800;

margin-bottom:15px;

}

.product-hero p{

font-size:18px;

opacity:.95;

}

/* ---------- Layout ---------- */

.product-page{

padding:80px 0;

background:#fff;

}

.product-grid{

display:grid;

grid-template-columns:1fr 1fr;

gap:60px;

align-items:start;

}

/* ---------- Gallery ---------- */

.product-gallery{

position:sticky;

top:110px;

}

.main-image{

width:100%;

height:500px;

object-fit:cover;

border-radius:25px;

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

transition:.35s;

cursor:zoom-in;

}

.main-image:hover{

transform:scale(1.02);

}

.thumbs{

display:flex;

gap:15px;

margin-top:20px;

flex-wrap:wrap;

}

.thumb{

width:90px;

height:90px;

object-fit:cover;

border-radius:15px;

cursor:pointer;

border:3px solid transparent;

transition:.3s;

}

.thumb:hover{

transform:scale(1.08);

}

.thumb.active{

border-color:var(--blue);

}

/* ---------- Product Info ---------- */

.product-info h2{

font-size:36px;

margin-bottom:20px;

}

.product-info p{

color:var(--gray);

font-size:18px;

margin-bottom:30px;

line-height:2;

}

.spec-list{

display:grid;

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

gap:15px;

margin-bottom:40px;

}

.spec-list li{

background:#F8FAFC;

padding:15px 18px;

border-radius:15px;

display:flex;

align-items:center;

gap:10px;

font-weight:500;

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

}

.spec-list i{

color:var(--green);

font-size:18px;

}

.product-buttons{

display:flex;

gap:20px;

flex-wrap:wrap;

}

/* ---------- Specifications Table ---------- */

.product-specs{

background:#F8FAFC;

}

.product-specs table{

width:100%;

border-collapse:collapse;

background:#fff;

border-radius:20px;

overflow:hidden;

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

}

.product-specs th{

background:linear-gradient(90deg,var(--blue),var(--purple));

color:#fff;

padding:18px;

font-size:18px;

}

.product-specs td{

padding:18px;

border-bottom:1px solid #eee;

text-align:center;

}

.product-specs tr:hover{

background:#F5F9FF;

}

/* ---------- Product Features ---------- */

.product-features{

background:#fff;

}

.product-features .card{

padding:35px;

text-align:center;

}

.product-features .card i{

font-size:55px;

color:var(--orange);

margin-bottom:20px;

}

/* ---------- Related Products ---------- */

.related-products{

background:#F8FAFC;

}

.related-products .card img{

height:220px;

object-fit:cover;

}

/* ---------- Quote Form ---------- */

.quote-form{

background:#fff;

}

.quote-form form{

max-width:850px;

margin:auto;

}

/* ---------- Zoom Animation ---------- */

.main-image.zoom{

transform:scale(1.4);

cursor:zoom-out;

}

/* ---------- Responsive ---------- */

@media(max-width:992px){

.product-grid{

grid-template-columns:1fr;

}

.product-gallery{

position:relative;

top:0;

}

.main-image{

height:420px;

}

}

@media(max-width:768px){

.product-hero{

padding:120px 0 60px;

}

.product-hero h1{

font-size:36px;

}

.product-info h2{

font-size:30px;

}

.spec-list{

grid-template-columns:1fr;

}

.main-image{

height:350px;

}

.thumbs{

justify-content:center;

}

}

@media(max-width:576px){

.product-hero h1{

font-size:30px;

}

.product-info p{

font-size:16px;

}

.main-image{

height:280px;

}

.thumb{

width:70px;

height:70px;

}

.product-buttons{

flex-direction:column;

}

.product-buttons .btn{

width:100%;

text-align:center;

}

.product-specs th,

.product-specs td{

font-size:14px;

padding:12px;

}

}

/*==========================
Language Switcher
==========================*/

.language-switcher{

display:flex;

align-items:center;

gap:10px;

}

.lang-btn{

width:42px;

height:42px;

border:none;

border-radius:50%;

cursor:pointer;

font-size:22px;

background:#fff;

transition:.3s;

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

}

.lang-btn:hover{

transform:translateY(-4px);

}

.lang-btn.active{

background:var(--orange);

color:#fff;

transform:scale(1.12);

}

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

.contact-section{

    padding:100px 0;

    background:#f8fbff;

}

.contact-section h2{

    text-align:center;

    margin-bottom:50px;

    font-size:38px;

}

.contact-cards{

    display:grid;

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

    gap:25px;

}

.contact-card{

    background:#fff;

    border-radius:20px;

    padding:35px 20px;

    text-align:center;

    text-decoration:none;

    color:#333;

    transition:.35s;

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

}

.contact-card:hover{

    transform:translateY(-12px);

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

}

.contact-card i{

    font-size:55px;

    margin-bottom:20px;

}

.contact-card img{

    width:55px;

    height:55px;

    margin-bottom:20px;

}

.contact-card h3{

    margin-bottom:10px;

    font-size:24px;

}

.contact-card p{

    color:#666;

}

/* Colors */
.cardsphone{
		border-top:5px solid #2563eb;

}
.cardsphone i{

    color:#2563eb;

}
.cardwhats{
		border-top:5px solid #25D366;
		
}
.cardwhats i{
    color:#25D366;

}
.telegram{
		border-top:5px solid #27A7E7;
		
}

.telegram i{

    color:#27A7E7;

}

.eitaa{

    border-top:5px solid #F9A825;

}

.bale{

    border-top:5px solid #00A86B;

}

/* Responsive */

@media(max-width:1100px){

.contact-cards{

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

}

}

@media(max-width:768px){

.contact-cards{

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

}

.lang-btn{

width:30px;

height:30px;

border:none;

border-radius:50%;

cursor:pointer;

font-size:16px;

background:#fff;

transition:.3s;

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

}

}

@media(max-width:500px){

.contact-cards{

grid-template-columns:1fr;

}

#lolo{
	display:none;	
}

.lang-btn{

width:25px;

height:25px;

border:none;

border-radius:50%;

cursor:pointer;

font-size:12px;

background:#fff;

transition:.3s;

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

}

}