:root{
  --accent: #2e9d65;
  --bg-overlay: rgba(0,0,0,0.45);
  --card-bg: rgba(255,255,255,0.92);
  --max-width: 1200px;
}
*{box-sizing:border-box}
html,body{height:100%;margin:0;font-family: Tahoma, Arial, sans-serif;color:#222;scroll-behavior:smooth}
body{
  background-image: url('images/background.jpg'); 
  background-size: cover; 
  background-position: center; 
  background-attachment: fixed; 
  position:relative; 
  padding-top: 18px;
}
body::before{
  content:"";
  position:fixed;
  inset:0;
  background-image: url('images/background.jpg');
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  filter: blur(7px);
  z-index:-2;
}
body::after{
  content:"";
  position:fixed;
  inset:0;
  background:var(--bg-overlay);
  z-index:-1;
}
.page-wrap{position:relative;z-index:1;min-height:100%;display:flex;flex-direction:column}
header.site-header{max-width:var(--max-width);margin:0 auto;padding:10px 20px;color:white;background:rgba(0,0,0,0.55);border-radius:8px}
.header-top{display:flex;justify-content:center;align-items:center;gap:12px}
.logo-wrap{justify-self:center}
.logo-wrap a{display:block}
.logo-wrap img{height:115px;display:block}
.tagline{text-align:center;font-size:16px;font-weight:600;margin-top:8px}
nav.main-nav{margin-top:12px;display:flex;justify-content:center;gap:26px;background:rgba(255,255,255,0.04);padding:12px;border-radius:8px}
nav.main-nav a{color:white;text-decoration:none;padding:6px 10px;border-radius:6px;transition:all .25s;font-weight:600}
nav.main-nav a:hover{background:rgba(255,255,255,0.08);box-shadow:0 2px 8px rgba(0,0,0,0.2)}
nav.main-nav a.active{border-bottom:3px solid var(--accent);padding-bottom:3px}

.hero{
  max-width:var(--max-width);
  margin:30px auto 10px;
  padding:36px 20px;
  display:flex;
  justify-content:center;
  align-items:center;
  text-align:center;
  min-height: 200px;
}
.hero .hero-text{
  flex:1;
  color:white;
  display:flex;
  justify-content:center;
  align-items:center;
}
.text-box {
  background: rgb(3, 180, 174);
  padding: 15px 50px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.1);
  display: inline-block;
  margin: 20px 0;
  backdrop-filter: blur(8px);
}
.centered-green {
  text-align: center;
  color: rgb(255, 255, 255);
  font-size: 32px;
  font-weight: 600;
  margin: 0;
  font-family: 'Segoe UI', 'Vazir', Tahoma, Geneva, Verdana, sans-serif;
  letter-spacing: 0.5px;
  line-height: 1.4;
}
.centered-image {
    display: block;
    margin-left: auto;
    margin-right: auto;}
.hero-image{width:360px;max-width:40%;min-width:180px;position:relative}
.hero-image img{width:100%;height:220px;object-fit:contain;transition:transform .4s ease}
.hero-image img:hover{transform:scale(1.06) translateY(-4px)}
.btn{display:inline-block;background:var(--accent);color:white;padding:12px 18px;border-radius:8px;text-decoration:none;font-weight:700;position:absolute;bottom:-14px;right:-50px;z-index:5;box-shadow:0 8px 20px rgba(46,157,101,0.18)}
.gallery{max-width:var(--max-width);margin:20px auto;padding:30px 20px 120px}
.item{display:flex;gap:24px;align-items:center;margin:120px 0;opacity:0;transform:translateY(18px);transition:all .7s ease}
.item.in-view{opacity:1;transform:translateY(0)}
.item img{width:55%;height:300px;object-fit:cover;border-radius:10px;box-shadow:0 8px 22px rgba(0,0,0,0.4);flex-shrink:0;transition:transform .4s ease}
.item img:hover{transform:scale(1.05) rotate(-1.5deg)}
.item .desc{width:45%;padding:18px;border-radius:10px;background:var(--card-bg);color:#123;line-height:1.6}
.item .desc p {
    font-weight: bold;}
.item:nth-child(even){flex-direction:row-reverse}
.gallery .item:first-child {
    margin-top: -65px;
}
.white-panel{max-width:900px;margin:60px auto;padding:30px;background:rgba(255,255,255,0.95);border-radius:12px;backdrop-filter:blur(8px)}
.white-panel img{width:100%;max-width:400px;margin-bottom:20px;border-radius:10px}
footer.site-footer{background:linear-gradient(180deg, rgba(255,255,255,0.03), rgba(0,0,0,0.25));padding:20px 10px;border-top:1px solid rgba(255,255,255,0.03);margin-top:auto}
.footer-inner{max-width:var(--max-width);margin:0 auto;display:flex;justify-content:space-between;align-items:center;gap:20px;color:white}
.left-block{display:flex;align-items:center;gap:16px}
.contact-info{background:rgba(255,255,255,0.03);padding:16px 20px;border-radius:8px;line-height:1.9}
.social-icons a{color:white;font-size:20px;transition:color .3s}
.social-icons a:hover{color:var(--accent)}
.social-icons {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.company-name-english {
    position: absolute;
    top: 20px;
    left:0px;
    font-family: Arial, Tahoma, 'Segoe UI', sans-serif;
    font-size: clamp(28px, 2.8vw, 60px) !important;
    font-weight: 700;
    color: rgb(3, 180, 174);
    text-align: left;
    direction: ltr;
    line-height: 1.3;
    padding: clamp(12px, 1.5vw, 20px) clamp(20px, 3vw, 50px);
    z-index: 100;
    white-space: nowrap;
}

.company-name-persian {
    position: absolute;
    top: 20px;
    right:0px;
    font-family: Arial;
    font-size: clamp(28px, 3vw, 60px) !important;
    font-weight: 700;
    text-shadow: 0.5px 0.5px 0 rgb(3, 180, 174),
     -0.5px -0.5px 0 rgb(3, 180, 174);
    color: rgb(3, 180, 174);
    text-align: right;
    direction: rtl;
    line-height: 1.3;
    padding: clamp(12px, 1.5vw, 20px) clamp(20px, 3vw, 50px);
    z-index: 100;
    white-space: nowrap;
}

@media (max-width: 1600px) {
    .company-name-english,
    .company-name-persian {
        font-size: clamp(24px, 2.5vw, 45px);
    }
}

@media (max-width: 1300px) {
    .company-name-english,
    .company-name-persian {
        font-size: clamp(22px, 2.2vw, 40px);
    }
}

@media (max-width: 1000px) {
    .company-name-english,
    .company-name-persian {
        display: none;
    }
    
    header.site-header {
        margin-top: 20px;
    }
    
    .logo-wrap img {
        height: 95px;
    }
    
    nav.main-nav {
        gap: 20px;
    }
    
    nav.main-nav a {
        font-size: 14px;
        padding: 5px 8px;
    }
    
    .item {
        margin: 120px 0;
    }
    
    .gallery {
        padding: 30px 20px 160px;
    }
    
    .gallery .item:first-child {
        margin-top: -65px;
    }
}

@media (max-width: 900px){
    .hero{flex-direction:column;align-items:center;padding:20px}
    .hero h1{font-size:28px}
    .centered-green{font-size:24px}
    .item{flex-direction:column; margin: 100px 0; gap: 40px;}
    .item:nth-child(even){flex-direction:column}
    .item img{width:85%;height:auto;max-height:350px;object-fit:cover;margin:0 auto}
    .item .desc{width:100%}
    .btn{position:static;bottom:auto;right:auto;margin-top:12px}
    .gallery .item:first-child {
        margin-top: -65px;
    }
}

@media (max-width: 768px) {
    .company-name-english,
    .company-name-persian {
        display: none;
    }
    
    header.site-header {
        margin-top: 15px;
        padding: 6px 10px;
    }
    
    .header-top {
        margin-bottom: 5px;
    }
    
    .logo-wrap img {
        height: 70px;
    }
    
    .tagline {
        font-size: 14px;
        margin-top: 4px;
        margin-bottom: 8px;
    }
    
    nav.main-nav {
        margin-top: 8px;
        gap: 6px;
        padding: 6px;
    }
    
    nav.main-nav a {
        padding: 8px;
        font-size: 13px;
    }
    
    .hero {
        padding: 15px 10px;
        margin: 10px auto;
    }
    
    .centered-green {
        font-size: 20px;
    }
    
    .text-box {
        padding: 10px 20px;
    }
    
    .gallery {
        padding: 20px 15px 140px;
    }
    
    .item {
        margin: 80px 0;
        gap: 35px;
    }
    
    .item img {
        width: 90%;
        max-height: 300px;
    }
    
    .white-panel {
        margin: 20px 10px;
        padding: 15px;
    }
    
    .footer-inner {
        flex-direction: column;
        gap: 12px;
        text-align: center;
    }
    
    .left-block {
        flex-direction: column;
        gap: 12px;
    }
    
    .social-icons {
        flex-direction: row;
        justify-content: center;
    }
    
    .gallery .item:first-child {
        margin-top: -65px;
    }
}

@media (max-width: 480px) {
    .company-name-english,
    .company-name-persian {
        display: none;
    }
    
    header.site-header {
        margin-top: 10px;
        padding: 5px 8px;
    }
    
    .logo-wrap img {
        height: 60px;
    }
    
    .tagline {
        font-size: 12px;
        margin: 2px 0 6px 0;
    }
    
    nav.main-nav {
        margin-top: 6px;
        gap: 4px;
        padding: 4px;
    }
    
    nav.main-nav a {
        padding: 6px;
        font-size: 12px;
    }
    
    .centered-green {
        font-size: 18px;
    }
    
    .item {
        margin: 60px 0;
        gap: 30px;
    }
    
    .item img {
        width: 90%;
        max-height: 250px;
    }
    
    .gallery {
        padding: 15px 10px 120px;
    }
    
    .contact-info {
        font-size: 13px;
        padding: 10px 12px;
    }
    
    .text-box {
        padding: 8px 15px;
    }
    
    .white-panel {
        padding: 12px;
    }
    
    .gallery .item:first-child {
        margin-top: -65px;
    }
}

@media (max-width: 360px) {
    .company-name-english,
    .company-name-persian {
        display: none;
    }
    
    .centered-green {
        font-size: 16px;
    }
    
    .logo-wrap img {
        height: 50px;
    }
    
    nav.main-nav a {
        padding: 5px;
        font-size: 11px;
    }
    
    .text-box {
        padding: 6px 12px;
    }
    
    .contact-info {
        font-size: 12px;
        padding: 8px 10px;
    }
    
    .item {
        margin: 50px 0;
        gap: 25px;
    }
    
    .item img {
        width: 90%;
        max-height: 220px;
    }
    
    .gallery .item:first-child {
        margin-top: -65px;
    }
}