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

/* ===== VARIABLES ===== */
:root {
  --primary: #0a7a6c;
  --primary-light: #00d9a6;
  --primary-dark: #053c36;
  --accent: #00a8ff;

  --bg: #edf7f5;
  --card-bg: rgba(255, 255, 255, 0.95);

  --text: #1a1a1a;
  --text-light: #666;

  --shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
  --shadow-hover: 0 20px 60px rgba(0, 0, 0, 0.16);

  --radius: 24px;

  --transition: all 0.35s ease;
}

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

html {
  scroll-behavior: smooth;
}

/* ===== BODY ===== */
body {
  font-family: 'Vazirmatn', sans-serif;
  background: var(--bg);
  color: var(--text);
  direction: rtl;
  line-height: 1.9;
  overflow-x: hidden;
}

/* ===== SCROLLBAR ===== */
::-webkit-scrollbar {
  width: 10px;
}

::-webkit-scrollbar-track {
  background: #edf2f1;
}

::-webkit-scrollbar-thumb {
  background: linear-gradient(
    to bottom,
    var(--primary),
    var(--accent)
  );
  border-radius: 20px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--primary-dark);
}

/* ===== ANIMATIONS ===== */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(35px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes float {
  0%,100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-10px);
  }
}

@keyframes pulse {
  0%,100% {
    box-shadow: 0 0 0 0 rgba(0,217,166,0.4);
  }

  50% {
    box-shadow: 0 0 0 20px rgba(0,217,166,0);
  }
}

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

header {
  position: relative;

  min-height: 100vh;

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

  background:
    linear-gradient(
      135deg,
      rgba(2, 14, 22, 0.76),
      rgba(6, 55, 65, 0.68),
      rgba(0, 120, 105, 0.55)
    ),
    url('/images/2-25.jpg');

  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed;

  overflow: hidden;

  text-align: center;

  color: white;
}

/* GRID EFFECT */
header::before {
  content: '';

  position: absolute;
  inset: 0;

  background:
    radial-gradient(
      circle at top right,
      rgba(0,255,200,0.18),
      transparent 35%
    ),

    radial-gradient(
      circle at bottom left,
      rgba(0,170,255,0.15),
      transparent 40%
    ),

    linear-gradient(
      rgba(255,255,255,0.03) 1px,
      transparent 1px
    ),

    linear-gradient(
      90deg,
      rgba(255,255,255,0.03) 1px,
      transparent 1px
    );

  background-size:
    auto,
    auto,
    40px 40px,
    40px 40px;

  z-index: 1;
}

/* LIGHT EFFECT */
header::after {
  content: '';

  position: absolute;

  width: 900px;
  height: 280px;

  bottom: -120px;
  left: 50%;

  transform: translateX(-50%);

  background: radial-gradient(
    circle,
    rgba(0,255,200,0.22),
    transparent 70%
  );

  filter: blur(40px);

  z-index: 1;
}

/* HEADER CONTENT */
.header-content {
  position: relative;
  z-index: 5;

  max-width: 950px;

  padding: 20px;

  animation: fadeInUp 1s ease;
}

/* LOGO */
.logo {
  width: 130px;
  height: 130px;

  border-radius: 50%;

  object-fit: cover;

  margin-bottom: 30px;

  border: 4px solid rgba(255,255,255,0.3);

  box-shadow:
    0 0 25px rgba(0,255,200,0.35),
    0 10px 40px rgba(0,0,0,0.45);

  animation: float 3s ease-in-out infinite;
}

/* AIRSA TITLE */
header h1 {
  font-size: 74px;

  font-weight: 900;

  margin-bottom: 20px;

  letter-spacing: 2px;

  color: #fff;

  text-shadow:
    0 0 10px rgba(255,255,255,0.35),
    0 0 25px rgba(0,255,200,0.35),
    0 4px 20px rgba(0,0,0,0.8);
}

/* SUBTITLE */
header p {
  font-size: 24px;

  font-weight: 400;

  color: rgba(255,255,255,0.92);

  line-height: 2;

  margin-bottom: 45px;

  text-shadow:
    0 2px 10px rgba(0,0,0,0.6);
}

/* CTA BUTTON */
.cta-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  gap: 10px;

  padding: 16px 42px;

  border-radius: 50px;

  background: linear-gradient(
    45deg,
    #00d9a6,
    #00a8ff
  );

  color: white;

  text-decoration: none;

  font-size: 18px;
  font-weight: 700;

  transition: var(--transition);

  position: relative;

  overflow: hidden;

  border: 1px solid rgba(255,255,255,0.15);

  box-shadow:
    0 10px 35px rgba(0,255,200,0.35);
}

.cta-button::before {
  content: '';

  position: absolute;

  top: 0;
  left: -100%;

  width: 100%;
  height: 100%;

  background: linear-gradient(
    90deg,
    transparent,
    rgba(255,255,255,0.35),
    transparent
  );

  transition: 0.6s;
}

.cta-button:hover {
  transform: translateY(-4px) scale(1.03);

  box-shadow:
    0 15px 45px rgba(0,255,200,0.45);
}

.cta-button:hover::before {
  left: 100%;
}

/* ========================================================= */
/* ====================== SECTIONS ========================== */
/* ========================================================= */

section {
  max-width: 1400px;

  margin: auto;

  padding: 110px 20px;
}

section h2 {
  text-align: center;

  margin-bottom: 65px;

  color: var(--primary);

  font-size: 42px;

  font-weight: 900;

  position: relative;
}

section h2::after {
  content: '';

  display: block;

  width: 90px;
  height: 5px;

  margin: 18px auto 0;

  border-radius: 20px;

  background: linear-gradient(
    to right,
    var(--primary),
    var(--accent)
  );
}

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

#products{

    padding:110px 20px;

    background:
    linear-gradient(
    180deg,
    #ffffff,
    #f7fafc
    );

}

#products h2{

    text-align:center;

    font-size:42px;

    color:#0a7d6c;

    font-weight:900;

    margin-bottom:55px;

}

.products{

    max-width:1450px;

    margin:auto;

    display:grid;

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

    gap:35px;

    align-items:stretch;

}

/* ================= CARD ================= */

.product-card{

    display:flex;

    flex-direction:column;

    height:100%;

    background:#fff;

    border-radius:28px;

    overflow:hidden;

    border:1px solid #edf2f7;

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

    transition:
    transform .45s ease,
    box-shadow .45s ease;

}

.product-card:hover{

    transform:
    translateY(-12px);

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

}

/* ================= IMAGE ================= */

.product-image{

    position:relative;

    height:280px;

    overflow:hidden;

    background:#f8fafc;

}

.product-img{

    position:absolute;

    inset:0;

    width:100%;

    height:100%;

    object-fit:cover;

    transition:
    opacity .55s ease,
    transform .7s ease;

}

.first-image{

    opacity:1;

    z-index:2;

}

.second-image{

    opacity:0;

    z-index:1;

}

.product-card:hover .first-image{

    opacity:0;

    transform:scale(1.08);

}

.product-card:hover .second-image{

    opacity:1;

    transform:scale(1.08);

}

/* ================= CONTENT ================= */

.product-info{

    flex:1;

    display:flex;

    flex-direction:column;

    padding:28px;

}

.product-info h3{

    color:#0a7d6c;

    font-size:26px;

    font-weight:900;

    margin-bottom:18px;

    line-height:1.5;

}

/* ================= DESCRIPTION ================= */

.product-desc{

    flex:1;

    color:#64748b;

    line-height:2;

    font-size:16px;

    margin-bottom:28px;

}

/* ================= BOTTOM ================= */

.product-bottom{

    margin-top:auto;

}

/* ================= PRICE ================= */

.product-price{

    color:#16a34a;

    font-size:27px;

    font-weight:900;

    margin-bottom:22px;

}

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

.view-btn{

    display:flex;

    align-items:center;

    justify-content:center;

    width:100%;

    height:55px;

    border-radius:16px;

    text-decoration:none;

    background:
    linear-gradient(
    135deg,
    #0a7d6c,
    #13a38f
    );

    color:#fff;

    font-size:17px;

    font-weight:800;

    transition:.35s;

}

.view-btn:hover{

    background:
    linear-gradient(
    135deg,
    #086657,
    #0a8d7d
    );

    transform:translateY(-3px);

}

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

@media(max-width:992px){

.products{

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

}

}

@media(max-width:768px){

.product-image{

height:230px;

}

.product-info{

padding:22px;

}

.product-info h3{

font-size:22px;

}

.product-price{

font-size:23px;

}

}

@media(max-width:500px){

.products{

grid-template-columns:1fr;

}

}

/* ================= NEWS ================= */

.news-section{
    padding:100px 20px;
    background:#f8fafc;
}

.newsSwiper{
    width:100%;
    overflow:visible !important;
    padding:35px 15px 90px;
}

.swiper-wrapper{
    align-items:stretch;
}

.swiper-slide{
    height:auto;
    display:flex;

    transition:
        transform .45s ease,
        opacity .45s ease,
        filter .45s ease;

    opacity:.45;
    transform:scale(.88);
    filter:blur(2px);
}

/* کارت فعال */
.swiper-slide-active{

    opacity:1;

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

    filter:none;

    z-index:30;

}
/* دو کارت کناری */

.swiper-slide-prev,
.swiper-slide-next{

    opacity:.75;

    transform:
        scale(.92);

    filter:blur(1px);

}
/* ---------- Card ---------- */

.news-card{

    width:100%;

    background:#fff;

    border-radius:24px;

    overflow:hidden;

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

    transition:
        transform .45s ease,
        box-shadow .45s ease;

}
.swiper-slide-active .news-card:hover{

    transform:
        translateY(-8px)
        scale(1.04);

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

}

.news-card img{

    width:100%;

    height:230px;

    object-fit:cover;

    display:block;

}

.news-content{

    padding:22px;

}

.news-content h3{

    color:#0a7d6c;

    margin-bottom:14px;

    font-size:22px;

    font-weight:800;

    line-height:1.5;

}

.news-content p{

    color:#555;

    line-height:1.9;

    margin-bottom:20px;

}

.news-date{

    color:#999;

    font-size:13px;

    margin-bottom:15px;

}

.news-btn{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:12px 22px;

    border-radius:30px;

    background:#0a7d6c;

    color:#fff;

    text-decoration:none;

    transition:.3s;

}

.news-btn:hover{

    background:#086657;

}

/* ---------- فلش ها ---------- */

.swiper-button-next,
.swiper-button-prev{

    width:54px;

    height:54px;

    border-radius:50%;

    background:#fff;

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

    color:#0a7d6c;

    transition:.35s;

}

.swiper-button-next:hover,
.swiper-button-prev:hover{

    background:#0a7d6c;

    color:#fff;

    transform:scale(1.08);

}

.swiper-button-next::after,
.swiper-button-prev::after{

    font-size:20px;

    font-weight:bold;

}

/* ---------- نقطه ها ---------- */

.swiper-pagination{

    bottom:15px !important;

}

.swiper-pagination-bullet{

    width:12px;

    height:12px;

    background:#cbd5e1;

    opacity:1;

    transition:.35s;

}

.swiper-pagination-bullet-active{

    background:#16a34a;

    transform:scale(1.4);

}

/* ---------- Tablet ---------- */

@media(max-width:992px){

    .swiper-slide{

        transform:scale(.94);

        opacity:.7;

    }

}

/* ---------- Mobile ---------- */

@media(max-width:768px){

    .newsSwiper{

        padding-bottom:75px;

    }

    .swiper-slide{

        transform:scale(.96);

        opacity:.9;

        filter:none;

    }

    .swiper-slide-active{

        transform:scale(1);

    }

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

.about-section {
  background: linear-gradient(
    135deg,
    #ffffff,
    #eef9f7
  );

  border-radius: 30px;

  margin-top: 40px;

  position: relative;

  overflow: hidden;
}

.about-section::before {
  content: '☀';

  position: absolute;

  top: -40px;
  left: -20px;

  font-size: 220px;

  opacity: 0.04;
}

.about-section p {
  max-width: 850px;

  margin: auto;

  text-align: center;

  font-size: 18px;

  color: var(--text-light);

  line-height: 2.1;
}

.read-more {
  display: inline-flex;

  margin-top: 30px;

  padding: 14px 34px;

  border-radius: 40px;

  text-decoration: none;

  color: var(--primary);

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

  font-weight: 700;

  transition: var(--transition);
}

.read-more:hover {
  background: var(--primary);

  color: white;
}

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

footer {
  background: linear-gradient(
    135deg,
    var(--primary-dark),
    var(--primary)
  );

  color: white;

  margin-top: 80px;

  padding: 70px 20px 30px;

  position: relative;

  overflow: hidden;
}

footer::before {
  content: '';

  position: absolute;

  top: 0;
  left: 0;

  width: 100%;
  height: 5px;

  background: linear-gradient(
    to right,
    var(--primary-light),
    var(--accent)
  );
}

.footer-content {
  max-width: 1200px;

  margin: auto;

  display: grid;

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

  gap: 40px;
}

.footer-section h3 {
  font-size: 22px;

  margin-bottom: 20px;

  font-weight: 800;
}

.footer-section p,
.footer-section a {
  color: rgba(255,255,255,0.86);

  text-decoration: none;

  margin-bottom: 14px;

  display: block;

  transition: 0.3s;
}

.footer-section a:hover {
  color: white;

  transform: translateX(-5px);
}

.copyright {
  text-align: center;

  margin-top: 50px;

  padding-top: 25px;

  border-top: 1px solid rgba(255,255,255,0.2);

  font-size: 14px;
}

/* ========================================================= */
/* ====================== HELPERS =========================== */
/* ========================================================= */

.loading,
.no-products,
.error {
  text-align: center;

  padding: 50px;

  color: var(--text-light);

  grid-column: 1 / -1;
}

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

@media (max-width: 768px) {

  header {
    background-attachment: scroll;
  }

  .logo {
    width: 95px;
    height: 95px;
  }

  header h1 {
    font-size: 42px;
  }

  header p {
    font-size: 18px;
  }

  section {
    padding: 80px 18px;
  }

  section h2 {
    font-size: 32px;
  }

  .products {
    grid-template-columns: 1fr;
  }

  .product-card:hover {
    transform: translateY(-5px);
  }

  .footer-content {
    text-align: center;
  }
}
/* ========================================================= */
/* ======================= NAVBAR ========================== */
/* ========================================================= */

.main-navbar{

    position:absolute;

    top:20px;
    left:0;
    right:0;

    width:100%;

    z-index:1000;

    padding:0 20px;

}


.navbar-container{

    max-width:1400px;

    height:72px;

    margin:0 auto;

    padding:0 22px;

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:30px;

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

    backdrop-filter:blur(18px);

    -webkit-backdrop-filter:blur(18px);

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

    border-radius:22px;

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

}


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

.navbar-logo{

    display:flex;

    align-items:center;

    gap:12px;

    color:#fff;

    text-decoration:none;

    white-space:nowrap;

    transition:.3s;

}


.navbar-logo img{

    width:46px;

    height:46px;

    object-fit:cover;

    border-radius:12px;

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

}


.navbar-logo span{

    font-size:20px;

    font-weight:900;

    letter-spacing:.3px;

}


.navbar-logo:hover{

    transform:translateY(-2px);

}


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

.navbar-menu{

    display:flex;

    align-items:center;

    justify-content:center;

    gap:8px;

    list-style:none;

    margin:0;

    padding:0;

}


.navbar-menu li{

    margin:0;

    padding:0;

}


.navbar-menu a{

    position:relative;

    display:block;

    padding:10px 15px;

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

    text-decoration:none;

    font-size:15px;

    font-weight:600;

    border-radius:12px;

    transition:.3s;

}


/* Hover background */

.navbar-menu a:hover{

    color:#fff;

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

}


/* خط زیر منو */

.navbar-menu a::after{

    content:"";

    position:absolute;

    right:15px;

    bottom:5px;

    width:0;

    height:2px;

    background:#22c55e;

    border-radius:10px;

    transition:.3s;

}


.navbar-menu a:hover::after{

    width:calc(100% - 30px);

}


/* ================= MOBILE BUTTON ================= */

.navbar-toggle{

    display:none;

    width:46px;

    height:46px;

    border:none;

    border-radius:12px;

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

    color:#fff;

    font-size:24px;

    cursor:pointer;

}


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

@media(max-width:900px){

    .navbar-menu{

        display:none;

    }

    .navbar-toggle{

        display:flex;

        align-items:center;

        justify-content:center;

    }

}


@media(max-width:600px){

    .main-navbar{

        top:12px;

        padding:0 12px;

    }


    .navbar-container{

        height:64px;

        padding:0 14px;

        border-radius:18px;

    }


    .navbar-logo img{

        width:40px;

        height:40px;

        border-radius:10px;

    }


    .navbar-logo span{

        font-size:17px;

    }

}

/* ========================================================= */
/* ===================== MAIN NAVBAR ======================= */
/* ========================================================= */

.main-navbar{

    position:fixed;

    top:20px;

    left:0;

    right:0;

    width:100%;

    z-index:1000;

    padding:0 20px;

    transition:
        top .35s ease,
        padding .35s ease;

}


.navbar-container{

    max-width:1100px;

    margin:0 auto;

    min-height:64px;

    padding:8px 16px;

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:30px;

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

    backdrop-filter:blur(18px);

    -webkit-backdrop-filter:blur(18px);

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

    border-radius:18px;

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

}


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

.navbar-logo{

    display:flex;

    align-items:center;

    gap:10px;

    color:#fff;

    text-decoration:none;

    font-size:18px;

    font-weight:800;

    white-space:nowrap;

    transition:.3s;

}


.navbar-logo img{

    width:42px;

    height:42px;

    object-fit:cover;

    border-radius:50%;

    border:2px solid rgba(255,255,255,.8);

    background:#fff;

    transition:.35s;

}


.navbar-logo:hover img{

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

}


.navbar-logo:hover{

    color:#d1fae5;

}


/* ========================================================= */
/* ====================== DESKTOP MENU ===================== */
/* ========================================================= */

.navbar-menu{

    list-style:none;

    display:flex;

    align-items:center;

    justify-content:center;

    gap:8px;

    margin:0;

    padding:0;

}


.navbar-menu li{

    margin:0;

    padding:0;

}


.navbar-menu a{

    position:relative;

    display:block;

    padding:10px 14px;

    color:#fff;

    text-decoration:none;

    font-size:14px;

    font-weight:600;

    border-radius:10px;

    transition:
        color .3s ease,
        background .3s ease;

}


/* خط زیر لینک */

.navbar-menu a::after{

    content:"";

    position:absolute;

    right:50%;

    bottom:4px;

    width:0;

    height:2px;

    border-radius:10px;

    background:#22c55e;

    transform:translateX(50%);

    transition:.3s;

}


.navbar-menu a:hover{

    color:#fff;

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

}


.navbar-menu a:hover::after{

    width:45%;

}


/* ========================================================= */
/* ====================== MOBILE BUTTON ==================== */
/* ========================================================= */

.navbar-toggle{

    display:none;

    width:44px;

    height:44px;

    border:none;

    border-radius:12px;

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

    color:#fff;

    font-size:23px;

    cursor:pointer;

    transition:.3s;

}


.navbar-toggle:hover{

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

    transform:scale(1.05);

}


/* ========================================================= */
/* ====================== MOBILE NAVBAR ==================== */
/* ========================================================= */

@media(max-width:850px){

    .main-navbar{

        top:12px;

        padding:0 12px;

    }


    .navbar-container{

        min-height:60px;

        padding:7px 10px;

        border-radius:16px;

    }


    .navbar-logo{

        font-size:16px;

    }


    .navbar-logo img{

        width:40px;

        height:40px;

    }


    .navbar-toggle{

        display:flex;

        align-items:center;

        justify-content:center;

    }


    .navbar-menu{

        position:absolute;

        top:calc(100% + 10px);

        left:12px;

        right:12px;

        display:flex;

        flex-direction:column;

        align-items:stretch;

        gap:5px;

        padding:10px;

        background:rgba(3,30,35,.90);

        backdrop-filter:blur(20px);

        -webkit-backdrop-filter:blur(20px);

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

        border-radius:16px;

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

        opacity:0;

        visibility:hidden;

        transform:
            translateY(-10px)
            scale(.98);

        transition:

            opacity .3s ease,

            visibility .3s ease,

            transform .3s ease;

    }


    .navbar-menu.active{

        opacity:1;

        visibility:visible;

        transform:
            translateY(0)
            scale(1);

    }


    .navbar-menu a{

        width:100%;

        padding:13px 16px;

        font-size:14px;

    }


    .navbar-menu a::after{

        display:none;

    }


    .navbar-menu a:hover{

        background:rgba(34,197,94,.15);

        color:#86efac;

    }

}


/* ========================================================= */
/* ===================== SMALL MOBILE ====================== */
/* ========================================================= */

@media(max-width:480px){

    .navbar-logo span{

        display:none;

    }


    .navbar-container{

        padding:7px 9px;

    }

}