/* =====================================================
   SHAKNET.IR
   Style.css
   Version 2.0
   ===================================================== */

/* =========================
   RESET
========================= */

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

html{
    scroll-behavior:smooth;
}

body{

    direction:rtl;
    font-family:Tahoma,Arial,sans-serif;
    background:#f4f6f9;
    color:#333;
    line-height:1.9;
    overflow-x:hidden;

}

img{

    max-width:100%;
    display:block;

}

a{

    text-decoration:none;
    transition:.3s;

}

ul{

    list-style:none;

}


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

:root{

    --primary:#081b29;
    --secondary:#00b8ff;
    --light:#f4f6f9;
    --white:#ffffff;
    --text:#333333;
    --gray:#666666;

    --radius:16px;

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

}


/* =========================
      CONTAINER
========================= */

.container{

    width:92%;
    max-width:1200px;

    margin:auto;

}


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

header{

    position:sticky;

    top:0;

    z-index:9999;

    background:#fff;

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

}


header .container{

    display:flex;

    justify-content:space-between;

    align-items:center;

    min-height:80px;

}


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

.logo{

    display:flex;

    align-items:center;

    gap:15px;

    color:var(--primary);

    font-weight:bold;

}

.logo img{

    width:70px;

}

.logo span{

    font-size:28px;

    color:var(--secondary);

}

.logo small{

    display:block;

    font-size:12px;

    color:#888;

}


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

nav{

    display:flex;

    align-items:center;

    gap:25px;

}

nav a{

    color:var(--text);

    font-weight:bold;

    position:relative;

}

nav a::after{

    content:"";

    position:absolute;

    bottom:-8px;

    right:0;

    width:0;

    height:2px;

    background:var(--secondary);

    transition:.3s;

}

nav a:hover{

    color:var(--secondary);

}

nav a:hover::after{

    width:100%;

}


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

.btn{

    display:inline-block;

    padding:12px 28px;

    background:var(--secondary);

    color:#fff;

    border-radius:50px;

    font-weight:bold;

    transition:.3s;

}

.btn:hover{

    background:var(--primary);

}


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

.menu-btn{

    display:none;

    width:45px;

    height:45px;

    border:none;

    background:var(--primary);

    color:#fff;

    font-size:22px;

    border-radius:10px;

    cursor:pointer;

}


/* =========================
      SECTION
========================= */

section{

    padding:70px 20px;

}

section h2{

    text-align:center;

    color:var(--primary);

    margin-bottom:40px;

    font-size:34px;

}


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

footer{

    background:var(--primary);

    color:#fff;

    padding:45px 20px;

}

footer a{

    color:#fff;

}

footer a:hover{

    color:var(--secondary);

}

.copyright{

    text-align:center;

    margin-top:25px;

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

    padding-top:20px;

}




/* =====================================================
   HERO SLIDER
===================================================== */

.hero-slider{
    position:relative;
    height:520px;
    overflow:hidden;
    background:#081b29;
}

.slide{
    position:absolute;
    inset:0;
    display:flex;
    justify-content:center;
    align-items:center;
    text-align:center;
    color:#fff;

    opacity:0;
    visibility:hidden;

    transition:all .8s ease;
}

.slide.active{
    opacity:1;
    visibility:visible;
}

.slide-content{
    width:90%;
    max-width:900px;
}

.slide h1{
    font-size:52px;
    margin-bottom:20px;
}

.slide h2{
    font-size:42px;
    margin-bottom:20px;
}

.slide p{
    font-size:20px;
    line-height:2;
    margin-bottom:30px;
}



/* =====================================================
   HERO PAGE
===================================================== */

.page-hero{

    position:relative;

    min-height:330px;

    display:flex;

    justify-content:center;

    align-items:center;

    text-align:center;

    color:#fff;

    background:#081b29;

}

.page-hero::before{

content:"";

position:absolute;

inset:0;

background:rgba(8,27,41,.65);

}

.hero-content{

position:relative;

z-index:2;

max-width:850px;

padding:20px;

}

.hero-content h1{

font-size:48px;

margin-bottom:15px;

}

.hero-content p{

font-size:20px;

line-height:2;

}



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

.cards{

display:grid;

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

gap:30px;

}

.card{

background:#fff;

padding:35px;

border-radius:18px;

box-shadow:var(--shadow);

transition:.35s;

text-align:center;

}

.card:hover{

transform:translateY(-8px);

}

.card h3{

margin:20px 0;

color:var(--primary);

font-size:24px;

}

.card p{

color:#666;

line-height:2;

}



/* =====================================================
   PROJECT CARDS
===================================================== */

.gallery{

display:grid;

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

gap:30px;

}

.project-card{

background:#fff;

border-radius:18px;

overflow:hidden;

box-shadow:var(--shadow);

transition:.35s;

}

.project-card:hover{

transform:translateY(-8px);

}

.project-card img{

width:100%;

height:240px;

object-fit:cover;

}

.project-card h3{

padding:20px;

font-size:24px;

color:var(--primary);

}

.project-card p{

padding:0 20px 20px;

line-height:2;

color:#666;

}



/* =====================================================
   TRUST
===================================================== */

.trust{

background:var(--primary);

color:#fff;

}

.trust h2{

color:#fff;

}

.trust-box{

display:grid;

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

gap:25px;

margin-top:40px;

}

.trust-box div{

background:#fff;

color:#333;

padding:35px;

border-radius:18px;

text-align:center;

}

.trust-box h3{

font-size:44px;

color:var(--secondary);

margin-bottom:10px;

}



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

.animate{

opacity:0;

transform:translateY(40px);

transition:all .8s ease;

}

.animate.show{

opacity:1;

transform:none;

}



/* =====================================================
   FLOAT BUTTONS
===================================================== */

.floating-buttons{

position:fixed;

right:25px;

bottom:25px;

display:flex;

flex-direction:column;

gap:12px;

z-index:9999;

}

.float-call,
.float-whatsapp{

width:60px;

height:60px;

border-radius:50%;

display:flex;

align-items:center;

justify-content:center;

font-size:28px;

color:#fff;

text-decoration:none;

box-shadow:0 10px 25px rgba(0,0,0,.2);

transition:.3s;

}

.float-call{

background:var(--primary);

}

.float-whatsapp{

background:#25D366;

animation:whatsappPulse 2s infinite;

}

.float-call:hover,
.float-whatsapp:hover{

transform:scale(1.08);

}

@keyframes whatsappPulse{

0%{

box-shadow:0 0 0 0 rgba(37,211,102,.7);

}

70%{

box-shadow:0 0 0 15px rgba(37,211,102,0);

}

100%{

box-shadow:0 0 0 0 rgba(37,211,102,0);

}

}



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

@media(max-width:768px){

.hero-slider{

height:330px;

}

.slide h1{

font-size:30px;

}

.slide h2{

font-size:26px;

}

.slide p{

font-size:16px;

}

.page-hero{

min-height:240px;

}

.hero-content h1{

font-size:30px;

}

.cards,
.gallery,
.trust-box{

grid-template-columns:1fr;

}

}





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

@media(max-width:768px){

header .container{

    flex-direction:column;

    padding:15px;

}

.menu-btn{

    display:block;

}

nav{

    display:none;

    flex-direction:column;

    width:100%;

    margin-top:15px;

}

nav.active{

    display:flex;

}

.logo{

    flex-direction:column;

    text-align:center;

}

.logo span{

    font-size:24px;

}

section{

    padding:50px 15px;

}

section h2{

    font-size:28px;

}

}


/* SECTION */


section{

padding:60px 20px;

text-align:center;

}


section h2{

color:#0a3d62;

margin-bottom:25px;

}





/* CARDS */


.cards{

display:flex;

flex-wrap:wrap;

justify-content:center;

gap:25px;

}



.card{

background:white;

width:220px;

padding:30px;

border-radius:15px;

box-shadow:0 5px 15px #ddd;

font-weight:bold;

transition:.3s;

}



.card:hover{

background:#0a3d62;

color:white;

transform:translateY(-10px);

}





/* TECHNOLOGY */


.tech-box{

display:flex;

justify-content:center;

flex-wrap:wrap;

gap:25px;

}



.tech-box div{

background:white;

width:260px;

padding:30px;

border-radius:15px;

box-shadow:0 5px 15px #ddd;

}






/* TRUST */


.trust{

background:#0a3d62;

color:white;

}



.trust h2{

color:white;

}



.trust-box{

display:flex;

justify-content:center;

flex-wrap:wrap;

gap:25px;

}



.trust-box div{

background:white;

color:#222;

width:200px;

padding:25px;

border-radius:15px;

}



.trust-box h3{

font-size:35px;

color:#0a3d62;

}





/* CONTACT HOME */


.contact-box{

display:flex;

justify-content:center;

flex-wrap:wrap;

gap:25px;

}



.contact-box div{

background:white;

width:230px;

padding:25px;

border-radius:15px;

box-shadow:0 5px 15px #ddd;

}





/* CONTACT PAGE */


.contact-hero{

background:linear-gradient(45deg,#0a3d62,#00c6ff);

color:white;

padding:80px 20px;

}



.contact-section{

display:flex;

justify-content:center;

gap:40px;

flex-wrap:wrap;

}



.contact-info,
.contact-form{

background:white;

width:350px;

padding:30px;

border-radius:15px;

box-shadow:0 5px 15px #ddd;

}



.contact-form input,
.contact-form textarea{

width:100%;

padding:14px;

margin-bottom:15px;

border:1px solid #ddd;

border-radius:8px;

}



.contact-form textarea{

height:120px;

}



button{

background:#00c6ff;

color:white;

border:none;

padding:14px;

border-radius:25px;

cursor:pointer;

width:100%;

}





.call-btn{

display:block;

background:#00c6ff;

color:white;

padding:12px;

border-radius:25px;

margin-top:20px;

}





/* FOOTER */


footer{

background:#081b29;

color:white;

padding:40px 20px;

}



.footer-box{

display:flex;

justify-content:center;

flex-wrap:wrap;

gap:50px;

}



.footer-box div{

width:220px;

}



.footer-box h3{

color:#00c6ff;

margin-bottom:15px;

}



.footer-box a{

display:block;

color:white;

margin:8px;

}



.copyright{

text-align:center;

margin-top:30px;

border-top:1px solid #555;

padding-top:20px;

}




/* WHATSAPP */


.whatsapp{

position:fixed;

bottom:20px;

left:20px;

background:#25d366;

color:white;

padding:15px 20px;

border-radius:30px;

}





/* ANIMATION */


.animate{

opacity:0;

transform:translateY(40px);

transition:1s;

}



.animate.show{

opacity:1;

transform:none;

}





/* MOBILE */


@media(max-width:768px){


.container{

flex-direction:column;

}


nav{

margin-top:20px;

}


.menu-btn{

display:block;

}


.hero-slider{

height:350px;

}



.slide h2{

font-size:28px;

}



.cards{

flex-direction:column;

align-items:center;

}


}
/* SLIDER FIX */

.hero-slider{
position:relative;
overflow:hidden;
}


.slide{

position:absolute;

width:100%;

opacity:0;

transition:1s;

}



.slide.active{

opacity:1;

position:relative;

}
.gallery{
display:flex;
flex-wrap:wrap;
justify-content:center;
gap:25px;
}

.project-card{
width:320px;
background:#fff;
border-radius:15px;
overflow:hidden;
box-shadow:0 5px 15px rgba(0,0,0,.15);
}

.project-card img{
width:100%;
height:220px;
object-fit:cover;
display:block;
}

.project-card h3{
padding:15px;
color:#0a3d62;
}

.project-card p{
padding:0 15px 20px;
line-height:1.8;
}
.client-logo{
width:100px;
height:auto;
margin:15px auto;
display:block;
}
.ceo-photo{
width:180px;
height:180px;
border-radius:50%;
object-fit:cover;
margin:20px auto;
display:block;
box-shadow:0 5px 15px rgba(0,0,0,.2);
}
.logo{
display:flex;
flex-direction:column;
align-items:center;
}

.logo-img{
width:90px;
height:auto;
margin-bottom:5px;
}

.logo small{
font-size:11px;
color:#ddd;
}
.logo {
  display: flex;
  align-items: center;
  gap: 10px;
}

.logo-img {
  width: 60px;
  height: auto;
  display: block;
}
/* Header */

.site-header {
  width: 100%;
  background: #ffffff;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
  position: sticky;
  top: 0;
  z-index: 1000;
}

.header-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 12px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.logo {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: #0a3d62;
}

.logo-img {
  width: 64px;
  height: 64px;
  object-fit: contain;
  display: block;
}

.logo-text {
  display: flex;
  flex-direction: column;
  line-height: 1.5;
}

.logo-text strong {
  font-size: 22px;
  font-weight: 800;
  color: #0a3d62;
  letter-spacing: 1px;
}

.logo-text small {
  font-size: 12px;
  color: #555;
}

.main-menu {
  display: flex;
  align-items: center;
  gap: 18px;
}

.main-menu a {
  color: #222;
  text-decoration: none;
  font-size: 15px;
  transition: 0.3s;
}

.main-menu a:hover {
  color: #0a3d62;
}

.nav-btn {
  background: #0a3d62;
  color: #ffffff !important;
  padding: 9px 16px;
  border-radius: 8px;
}

.nav-btn:hover {
  background: #075083;
}

.menu-btn {
  display: none;
  background: #0a3d62;
  color: #ffffff;
  border: none;
  border-radius: 8px;
  font-size: 24px;
  width: 44px;
  height: 44px;
  cursor: pointer;
}

/* Hero SEO */

.hero-slider h1 {
  font-size: 38px;
  margin-bottom: 15px;
  color: #ffffff;
}

/* Cards improvement */

.card h3 {
  margin-bottom: 10px;
  color: #0a3d62;
}

.card p {
  font-size: 14px;
  line-height: 1.9;
  color: #555;
}

/* Footer links */

footer a {
  color: inherit;
  text-decoration: none;
}

footer a:hover {
  color: #38bdf8;
}

/* Floating buttons */

.floating-actions {
  position: fixed;
  left: 20px;
  bottom: 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  z-index: 9999;
}

.float-btn {
  min-width: 110px;
  padding: 12px 16px;
  border-radius: 50px;
  text-align: center;
  color: #ffffff;
  text-decoration: none;
  font-size: 14px;
  font-weight: 700;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.18);
}

.call-btn {
  background: #0a3d62;
}

.whatsapp-btn {
  background: #25d366;
}

/* Mobile */

@media (max-width: 768px) {
  .header-container {
    padding: 10px 15px;
  }

  .logo-img {
    width: 52px;
    height: 52px;
  }

  .logo-text strong {
    font-size: 18px;
  }

  .logo-text small {
    font-size: 11px;
  }

  .menu-btn {
    display: block;
  }

  .main-menu {
    position: absolute;
    top: 76px;
    right: 0;
    width: 100%;
    background: #ffffff;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 0;
    max-height: 0;
    overflow: hidden;
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.08);
    transition: max-height 0.35s ease;
  }

  .main-menu.active {
    max-height: 500px;
  }

  .main-menu a {
    padding: 14px 20px;
    border-bottom: 1px solid #eeeeee;
  }

  .nav-btn {
    margin: 12px 20px;
    text-align: center;
  }

  .hero-slider h1 {
    font-size: 26px;
  }

  .floating-actions {
    left: 12px;
    bottom: 12px;
  }

  .float-btn {
    min-width: 95px;
    padding: 10px 12px;
    font-size: 13px;
  }
}
.floating-actions {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.float-btn {
  display: inline-block;
  padding: 12px 16px;
  border-radius: 50px;
  color: #fff;
  font-weight: bold;
  text-decoration: none;
  box-shadow: 0 4px 12px rgba(0,0,0,.2);
}

.call-btn {
  background: #0a3d62;
}

.whatsapp-btn {
  background: #25d366;
}

.float-btn:hover {
  opacity: 0.9;
}
.whatsapp-float{
  position: fixed;
  width: 60px;
  height: 60px;
  bottom: 25px;
  right: 25px;
  z-index: 9999;
}

.whatsapp-float img{
  width: 60px;
  height: 60px;
  border-radius: 50%;
  box-shadow: 0 4px 10px rgba(0,0,0,0.3);
  transition: transform .2s;
}

.whatsapp-float img:hover{
  transform: scale(1.1);
}
.floating-contact{
  position: fixed;
  right: 25px;
  bottom: 25px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  z-index: 9999;
}

.call-float{
  width: 55px;
  height: 55px;
  background: #0a3d62;
  color: #fff;
  font-size: 26px;
  text-align: center;
  line-height: 55px;
  border-radius: 50%;
  text-decoration: none;
  box-shadow: 0 4px 12px rgba(0,0,0,0.3);
}

.whatsapp-float img{
  width: 55px;
  height: 55px;
  border-radius: 50%;
  box-shadow: 0 4px 12px rgba(0,0,0,0.3);
}

.call-float:hover,
.whatsapp-float img:hover{
  transform: scale(1.1);
  transition: 0.2s;
}
.floating-buttons{
  position: fixed;
  right: 20px;
  bottom: 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  z-index: 99999;
}

.float-call{
  width: 55px;
  height: 55px;
  background: #0a3d62;
  color: #fff;
  font-size: 26px;
  text-align: center;
  line-height: 55px;
  border-radius: 50%;
  text-decoration: none;
  box-shadow: 0 4px 12px rgba(0,0,0,.3);
  transition: 0.2s;
}

.float-whatsapp img{
  width: 55px;
  height: 55px;
  border-radius: 50%;
  box-shadow: 0 4px 12px rgba(0,0,0,.3);
  transition: 0.2s;
}

.float-call:hover,
.float-whatsapp img:hover{
  transform: scale(1.1);
}
.floating-buttons{
  position: fixed;
  right: 20px;
  bottom: 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  z-index: 99999;
}

.float-call{
  width: 55px;
  height: 55px;
  background: #0a3d62;
  color: #fff;
  font-size: 26px;
  text-align: center;
  line-height: 55px;
  border-radius: 50%;
  text-decoration: none;
  box-shadow: 0 4px 12px rgba(0,0,0,.3);
}

.float-whatsapp{
  position: relative;
}

.float-whatsapp img{
  width: 55px;
  height: 55px;
  border-radius: 50%;
  box-shadow: 0 4px 12px rgba(0,0,0,.3);
  animation: whatsapp-pulse 2s infinite;
}

/* افکت ضربان */
@keyframes whatsapp-pulse{
  0%{
    box-shadow: 0 0 0 0 rgba(37,211,102,0.7);
  }
  70%{
    box-shadow: 0 0 0 15px rgba(37,211,102,0);
  }
  100%{
    box-shadow: 0 0 0 0 rgba(37,211,102,0);
  }
}
.floating-buttons{
  position: fixed;
  right: 20px;
  bottom: 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  z-index: 99999;
}

.float-call,
.float-whatsapp{
  width: 55px;
  height: 55px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
  text-decoration: none;
  color: #fff;
  box-shadow: 0 4px 10px rgba(0,0,0,.3);
}

.float-call{
  background:#0a3d62;
}

.float-whatsapp{
  background:#25d366;
  animation:pulse 2s infinite;
}

@keyframes pulse{
  0%{box-shadow:0 0 0 0 rgba(37,211,102,0.7);}
  70%{box-shadow:0 0 0 15px rgba(37,211,102,0);}
  100%{box-shadow:0 0 0 0 rgba(37,211,102,0);}
}
.whatsapp-chat{
position:fixed;
bottom:25px;
right:25px;
display:flex;
align-items:center;
gap:10px;
background:#25d366;
color:#fff;
padding:10px 16px;
border-radius:50px;
text-decoration:none;
font-size:14px;
font-weight:500;
box-shadow:0 6px 15px rgba(0,0,0,.2);
z-index:9999;
animation:floatWhatsapp 2.5s ease-in-out infinite;
}

.whatsapp-chat img{
width:28px;
height:28px;
}

.whatsapp-chat:hover{
background:#1ebe5d;
}

/* حرکت بالا پایین */
@keyframes floatWhatsapp{

0%{
transform:translateY(0px);
}

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

100%{
transform:translateY(0px);
}

}
/* رفع فضای خالی اضافی صفحه اصلی */

.hero-section,
.banner-section,
.slider-section {
    min-height: auto !important;
    height: auto !important;
    padding: 60px 0 !important;
}

/* حذف فاصله‌های بیش از حد */
section {
    padding-top: 60px;
    padding-bottom: 60px;
}

/* تصاویر اسلایدر */
.hero-section img,
.slider-section img {
    width: 100%;
    height: 450px;
    object-fit: cover;
}

/* جلوگیری از ایجاد فضای خالی */
.container,
.row {
    min-height: auto !important;
}

/* رفع باکس‌های خالی */
.empty-space,
.spacer {
    display: none !important;
}
section {
    height: auto !important;
    min-height: auto !important;
}
/* ===== SHAKNET FIX ===== */

html,
body{
    margin:0;
    padding:0;
    overflow-x:hidden;
    background:#f4f6f9;
}

/* هدر */
.site-header,
header{
    position:sticky;
    top:0;
    z-index:1000;
}

/* اسلایدر */
.hero-slider{
    position:relative;
    min-height:450px;
    height:450px;
    overflow:hidden;
    display:flex;
    align-items:center;
    justify-content:center;
}

.slide{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    opacity:0;
    display:flex;
    justify-content:center;
    align-items:center;
    transition:opacity .8s ease;
}

.slide.active{
    opacity:1;
    z-index:2;
}

/* سکشن‌ها */
section{
    padding:60px 20px;
    margin:0;
    height:auto !important;
    min-height:auto !important;
}

/* جلوگیری از ایجاد فضای سفید */
section:empty,
div:empty{
    display:none;
}

/* کانتینر */
.container{
    max-width:1200px;
    margin:auto;
}

/* کارت‌ها */
.cards,
.trust-box,
.contact-box,
.tech-box,
.gallery{
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    gap:25px;
}

/* پروژه‌ها */
.project-card{
    background:#fff;
    border-radius:15px;
    overflow:hidden;
    box-shadow:0 5px 15px rgba(0,0,0,.15);
}

.project-card img{
    width:100%;
    height:220px;
    object-fit:cover;
}

/* حذف فاصله‌های اضافی */
main{
    margin:0;
    padding:0;
}

.hero-slider + section{
    margin-top:0;
    padding-top:60px;
}

/* فوتر */
footer{
    margin-top:0;
}

/* موبایل */
@media(max-width:768px){

.hero-slider{
    height:320px;
    min-height:320px;
}

.slide h1,
.slide h2{
    font-size:26px;
}

.cards,
.trust-box,
.contact-box,
.tech-box{
    flex-direction:column;
    align-items:center;
}

.project-card{
    width:95%;
}

}
.project-gallery{
  max-width:1100px;
  margin:auto;
  padding:40px 20px;
}

.project-gallery .slider{
  position:relative;
  overflow:hidden;
  border-radius:12px;
}

.project-gallery .slides{
  display:flex;
  transition:0.5s;
}

.project-gallery .slide{
  min-width:100%;
}

.project-gallery .slide img{
  width:100%;
  height:500px;
  object-fit:cover;
  cursor:pointer;
}

.project-gallery .nav{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  background:rgba(0,0,0,.6);
  color:#fff;
  border:none;
  padding:10px 15px;
  font-size:20px;
  cursor:pointer;
  border-radius:6px;
}

.project-gallery .prev{right:10px;}
.project-gallery .next{left:10px;}

.project-gallery .thumbs{
  display:flex;
  gap:10px;
  margin-top:15px;
  flex-wrap:wrap;
}

.project-gallery .thumbs img{
  width:90px;
  height:65px;
  object-fit:cover;
  cursor:pointer;
  opacity:.6;
  border-radius:6px;
  transition:.3s;
}

.project-gallery .thumbs img.active,
.project-gallery .thumbs img:hover{
  opacity:1;
  border:2px solid #007bff;
}

.lightbox{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.9);
  display:none;
  justify-content:center;
  align-items:center;
  z-index:999;
}

.lightbox img{
  max-width:90%;
  max-height:90%;
}

.close{
  position:absolute;
  top:30px;
  right:40px;
  font-size:40px;
  color:white;
  cursor:pointer;
}

@media(max-width:768px){
  .project-gallery .slide img{
    height:300px;
  }
}
/* ===== Project Gallery Fix Responsive ===== */
.project-gallery{
  width:100%;
  max-width:100%;
  margin:0 auto;
  padding:20px 15px;
  box-sizing:border-box;
  overflow:hidden;
}

.project-gallery *{
  box-sizing:border-box;
}

.project-gallery .slider{
  position:relative;
  width:100%;
  overflow:hidden;
  border-radius:12px;
  background:#000;
}

.project-gallery .slides{
  display:flex;
  transition:transform .4s ease;
  will-change:transform;
}

.project-gallery .slide{
  min-width:100%;
  max-width:100%;
  flex:0 0 100%;
}

.project-gallery .slide img{
  display:block;
  width:100%;
  height:420px;
  object-fit:cover;
  border-radius:12px;
}

.project-gallery .nav{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  width:42px;
  height:42px;
  border:none;
  border-radius:50%;
  background:rgba(0,0,0,.55);
  color:#fff;
  cursor:pointer;
  z-index:5;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:18px;
  padding:0;
}

.project-gallery .prev{
  right:12px;
}

.project-gallery .next{
  left:12px;
}

.project-gallery .thumbs{
  display:flex;
  gap:8px;
  margin-top:12px;
  overflow-x:auto;
  overflow-y:hidden;
  padding-bottom:5px;
  scrollbar-width:thin;
  -webkit-overflow-scrolling:touch;
}

.project-gallery .thumbs img{
  flex:0 0 auto;
  width:80px;
  height:60px;
  object-fit:cover;
  border-radius:8px;
  cursor:pointer;
  opacity:.65;
  border:2px solid transparent;
}

.project-gallery .thumbs img.active{
  opacity:1;
  border-color:#007bff;
}

.lightbox{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.92);
  display:none;
  justify-content:center;
  align-items:center;
  z-index:9999;
  padding:20px;
}

.lightbox img{
  max-width:100%;
  max-height:90vh;
  object-fit:contain;
}

.close{
  position:absolute;
  top:15px;
  right:20px;
  font-size:34px;
  line-height:1;
  color:#fff;
  cursor:pointer;
  z-index:10000;
}

/* ===== Tablet ===== */
@media (max-width:992px){
  .project-gallery .slide img{
    height:340px;
  }
}

/* ===== Mobile ===== */
@media (max-width:768px){
  .project-gallery{
    padding:15px 10px;
  }

  .project-gallery .slide img{
    height:240px;
    border-radius:10px;
  }

  .project-gallery .nav{
    width:36px;
    height:36px;
    font-size:15px;
  }

  .project-gallery .prev{
    right:8px;
  }

  .project-gallery .next{
    left:8px;
  }

  .project-gallery .thumbs{
    gap:6px;
    margin-top:10px;
  }

  .project-gallery .thumbs img{
    width:68px;
    height:52px;
    border-radius:6px;
  }

  .close{
    top:10px;
    right:14px;
    font-size:30px;
  }
}

/* ===== Small Mobile ===== */
@media (max-width:480px){
  .project-gallery .slide img{
    height:200px;
  }

  .project-gallery .thumbs img{
    width:60px;
    height:46px;
  }

  .project-gallery .nav{
    width:32px;
    height:32px;
    font-size:14px;
  }
}

.shk-main-display{
    position:relative;
    overflow:hidden;
    height:450px;
}

.shk-track{
    display:flex;
    transition:transform .5s ease;
    height:100%;
}

.shk-item{
    min-width:100%;
    flex:0 0 100%;
}

.shk-item img{
    width:100%;
    height:100%;
    object-fit:contain;
}
body{
font-family:'Vazirmatn',sans-serif;
margin:0;
padding:0;
line-height:1.8;
color:#333;
background:#f8fafc;
}

img{
max-width:100%;
height:auto;
display:block;
}

.container{
width:90%;
max-width:1200px;
margin:auto;
}

header{
position:sticky;
top:0;
z-index:999;
background:#fff;
box-shadow:0 2px 15px rgba(0,0,0,.08);
}

.logo{
font-size:26px;
font-weight:800;
}

.logo span{
color:#0d6efd;
}

nav a{
text-decoration:none;
color:#333;
margin:0 12px;
font-weight:500;
transition:.3s;
}

nav a:hover{
color:#0d6efd;
}

.project-card{
background:#fff;
border-radius:15px;
overflow:hidden;
box-shadow:0 5px 20px rgba(0,0,0,.08);
transition:.3s;
}

.project-card:hover{
transform:translateY(-6px);
}

.project-card:hover{
transform:translateY(-6px);
}

.project-card img{
aspect-ratio:16/9;
object-fit:cover;
}

footer{
background:#111827;
color:#fff;
text-align:center;
padding:25px;
}

/* ===== SHAKNET PROJECTS ===== */

.project-gallery h2,
.projects h2{
font-size:32px;
margin-bottom:30px;
color:#0a3d62;
font-weight:800;
}

.shk-wrapper{
max-width:1100px;
margin:auto;
}

.shk-main-display{
position:relative;
height:550px;
overflow:hidden;
border-radius:20px;
background:#fff;
box-shadow:0 10px 30px rgba(0,0,0,.15);
}

.shk-track{
display:flex;
height:100%;
transition:transform .5s ease;
}

.shk-item{
min-width:100%;
}

.shk-item img{
width:100%;
height:100%;
object-fit:cover;
}

.shk-btn{
position:absolute;
top:50%;
transform:translateY(-50%);
width:50px;
height:50px;
border:none;
border-radius:50%;
background:rgba(0,0,0,.6);
color:#fff;
font-size:24px;
cursor:pointer;
z-index:10;
}

.shk-btn:hover{
background:#0d6efd;
}

.shk-btn.prev{
right:15px;
}

.shk-btn.next{
left:15px;
}

.shk-dots{
display:flex;
justify-content:center;
gap:10px;
margin-top:15px;
overflow-x:auto;
padding-bottom:10px;
}

.shk-dots img{
width:90px;
height:70px;
object-fit:cover;
border-radius:8px;
cursor:pointer;
opacity:.5;
border:3px solid transparent;
transition:.3s;
}

.shk-dots img.active{
opacity:1;
border-color:#0d6efd;
}

.gallery{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(320px,1fr));
gap:30px;
max-width:1200px;
margin:auto;
}

.project-card{
background:#fff;
border-radius:20px;
overflow:hidden;
box-shadow:0 8px 25px rgba(0,0,0,.1);
transition:.3s;
}

.project-card:hover{
transform:translateY(-8px);
}

.project-card img{
width:100%;
height:240px;
object-fit:cover;
}

.project-card h3{
padding:20px 20px 10px;
font-size:22px;
color:#0a3d62;
}

.project-card p{
padding:0 20px 20px;
line-height:2;
}

@media(max-width:768px){

.shk-main-display{
height:280px;
}

.shk-dots img{
width:60px;
height:45px;
}

.project-card{
width:100%;
}

}
.services{
    padding:80px 20px;
    background:#f4f6f9;
}

.services .container{
    display:flex;
    gap:30px;
    flex-wrap:wrap;
    justify-content:center;
}

.service-box{
    background:#fff;
    width:500px;
    padding:30px;
    border-radius:15px;
    box-shadow:0 5px 20px rgba(0,0,0,.1);
    transition:.3s;
}

.service-box:hover{
    transform:translateY(-5px);
}

.service-box h2{
    color:#081b29;
    margin-bottom:15px;
}

.service-box p{
    line-height:2;
    margin-bottom:15px;
}

.service-box ul{
    padding-right:20px;
}

.service-box ul li{
    margin-bottom:10px;
}

.btn{
    display:inline-block;
    margin-top:20px;
    padding:10px 25px;
    background:#00a8ff;
    color:#fff;
    border-radius:8px;
    transition:.3s;
}

.btn:hover{
    background:#081b29;
}
/* خدمات */

.services{
    padding:70px 20px;
    background:#f4f6f9;
}

.services-container{
    max-width:1200px;
    margin:auto;
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(350px,1fr));
    gap:30px;
}

.service-card{
    background:#fff;
    border-radius:15px;
    padding:30px;
    box-shadow:0 5px 20px rgba(0,0,0,0.08);
    transition:0.3s;
    text-align:right;
}

.service-card:hover{
    transform:translateY(-8px);
}

.service-card h3{
    color:#081b29;
    margin-bottom:15px;
    font-size:24px;
}

.service-card p{
    line-height:2;
    color:#555;
    margin-bottom:20px;
}

.service-card ul{
    padding-right:20px;
}

.service-card ul li{
    margin-bottom:10px;
    color:#333;
}

.service-btn{
    display:inline-block;
    background:#081b29;
    color:#fff;
    padding:10px 20px;
    border-radius:8px;
    transition:0.3s;
}

.service-btn:hover{
    background:#00a8ff;
}
.blog-section{
    padding:80px 20px;
    background:#ffffff;
}

.section-title{
    text-align:center;
    margin-bottom:50px;
}

.section-title h2{
    color:#081b29;
    margin-bottom:10px;
}

.section-title p{
    color:#666;
}

.blog-container{
    max-width:1200px;
    margin:auto;
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
    gap:25px;
}

.blog-card{
    background:#f8f9fa;
    border-radius:15px;
    padding:25px;
    box-shadow:0 4px 15px rgba(0,0,0,.08);
    transition:.3s;
}

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

.blog-card h3{
    color:#081b29;
    margin-bottom:15px;
}

.blog-card p{
    line-height:1.9;
    color:#555;
    margin-bottom:20px;
}

.blog-card a{
    color:#0d6efd;
    font-weight:bold;
}
/* HERO SECTION */

.page-hero{
    min-height:350px;
    display:flex;
    align-items:center;
    justify-content:center;
    text-align:center;
    color:#fff;
    position:relative;
    overflow:hidden;
}

.page-hero::before{
    content:'';
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background:rgba(8,27,41,.75);
}

.hero-content{
    position:relative;
    z-index:2;
    max-width:800px;
    padding:20px;
}

.hero-content h1{
    font-size:48px;
    margin-bottom:15px;
}

.hero-content p{
    font-size:20px;
    line-height:2;
    margin-bottom:25px;
}

.hero-btn{
    display:inline-block;
    padding:12px 30px;
    background:#00a8ff;
    color:#fff;
    border-radius:8px;
    font-weight:bold;
    transition:.3s;
}

.hero-btn:hover{
    background:#fff;
    color:#081b29;
}

/* صفحه فیبر نوری */

.fiber-hero{
    background:
    linear-gradient(rgba(8,27,41,.7),rgba(8,27,41,.7)),
    url('images/fiber-banner.jpg');
    background-size:cover;
    background-position:center;
}

/* صفحه مالی */

.accounting-hero{
    background:
    linear-gradient(rgba(8,27,41,.7),rgba(8,27,41,.7)),
    url('images/accounting-banner.jpg');
    background-size:cover;
    background-position:center;
}
.shk-wrapper{
    max-width:1000px;
    margin:40px auto;
}

.shk-main-display{
    position:relative;
    overflow:hidden;
    border-radius:15px;
}

.shk-track{
    display:flex;
    transition:0.5s;
}

.shk-item{
    min-width:100%;
}

.shk-item img{
    width:100%;
    height:550px;
    object-fit:cover;
    display:block;
}
/* ===========================
   SHAKNET PROJECT GALLERY FIX
=========================== */

.shk-wrapper{
    max-width:1200px;
    margin:40px auto;
    padding:0 20px;
}

.shk-main-display{
    position:relative;
    overflow:hidden;
    border-radius:15px;
    background:#fff;
    box-shadow:0 10px 25px rgba(0,0,0,.15);
}

.shk-track{
    display:flex;
    transition:transform .5s ease;
}

.shk-item{
    min-width:100%;
    flex:0 0 100%;
}

.shk-item img{
    width:100%;
    height:600px;
    object-fit:cover;
    display:block;
}

.shk-btn{

    position:absolute;

    top:50%;

    transform:translateY(-50%);

    width:50px;

    height:50px;

    border:none;

    border-radius:50%;

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

    color:#fff;

    cursor:pointer;

    z-index:100;

}

.shk-btn.prev{

    right:20px;

}

.shk-btn.next{

    left:20px;

}

.shk-dots{

    display:flex;

    justify-content:center;

    gap:10px;

    flex-wrap:wrap;

    margin-top:20px;

}

.shk-dots img{

    width:90px;

    height:70px;

    object-fit:cover;

    border-radius:8px;

    cursor:pointer;

    border:3px solid transparent;

    opacity:.6;

    transition:.3s;

}

.shk-dots img:hover{

    opacity:1;

}

.shk-dots img.active{

    border-color:#00b4ff;

    opacity:1;

}
.shk-track{
    display:flex;
    transition:transform .5s ease;
    width:100%;
}

.shk-item{
    min-width:100%;
    flex:0 0 100%;
}

.shk-item img{
    width:100%;
    height:600px;
    object-fit:cover;
    display:block;
}
/* ===== پروژه های مالی ===== */

.finance-projects{
    padding:70px 20px;
    background:#f7f9fc;
}

.finance-projects h2{
    text-align:center;
    color:#003366;
    margin-bottom:20px;
    font-size:32px;
}

.section-desc{
    text-align:center;
    max-width:900px;
    margin:0 auto 40px;
    line-height:2;
    color:#555;
}

.project-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(320px,1fr));
    gap:25px;
}

.project-card{
    background:#fff;
    border-radius:12px;
    padding:25px;
    box-shadow:0 5px 15px rgba(0,0,0,.08);
    transition:.3s;
}

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

.project-card h3{
    color:#0056b3;
    margin-bottom:15px;
}

.project-card ul{
    padding:0;
    list-style:none;
}

.project-card ul li{
    padding:10px 0;
    border-bottom:1px solid #eee;
}

.project-contact{
    text-align:center;
    margin-top:50px;
}

.project-btn{
    display:inline-block;
    background:#0077cc;
    color:#fff;
    padding:14px 35px;
    border-radius:8px;
    margin-top:20px;
    text-decoration:none;
    font-weight:bold;
    transition:.3s;
}

.project-btn:hover{
    background:#005fa3;
}
/*==================================================
      SHAKNET - Finance Projects
==================================================*/

:root{

--primary:#0b5ed7;
--secondary:#0a2540;
--light:#f5f8fc;
--white:#ffffff;
--text:#444;
--radius:14px;

}
body{

margin:0;
direction:rtl;
font-family:'Vazirmatn',sans-serif;
background:#f5f7fb;
color:#333;

}
/*=========================
      Section
=========================*/

section{

padding:80px 0;

}

.container{

width:90%;
max-width:1200px;
margin:auto;

}

.section-title{

text-align:center;
margin-bottom:50px;

}

.section-title span{

display:inline-block;
padding:6px 18px;
background:#eaf3ff;
color:var(--primary);
border-radius:30px;
font-size:14px;
font-weight:700;
margin-bottom:15px;

}

.section-title h2{

font-size:36px;
color:var(--secondary);
margin-bottom:20px;

}

.section-title p{

max-width:750px;
margin:auto;
color:#666;

}


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

.hero{

background:linear-gradient(135deg,#0a2540,#0b5ed7);
color:#fff;
overflow:hidden;

}

.hero-box{

display:flex;
align-items:center;
justify-content:space-between;
gap:60px;
padding:90px 0;

}

.hero-text{

flex:1;

}

.badge{

display:inline-block;
padding:8px 18px;
background:rgba(255,255,255,.15);
border-radius:30px;
margin-bottom:20px;
font-size:14px;

}

.hero h1{

font-size:52px;
line-height:1.4;
margin-bottom:25px;

}

.hero p{

font-size:18px;
line-height:2;
opacity:.95;
margin-bottom:35px;

}

.hero-buttons{

display:flex;
gap:15px;
flex-wrap:wrap;

}

.btn-primary{

background:#fff;
color:var(--primary);
padding:15px 34px;
border-radius:10px;
font-weight:bold;
transition:.3s;

}

.btn-primary:hover{

transform:translateY(-4px);

}

.btn-secondary{

background:transparent;
border:2px solid #fff;
color:#fff;
padding:15px 34px;
border-radius:10px;
transition:.3s;

}

.btn-secondary:hover{

background:#fff;
color:var(--primary);

}

.hero-image{

flex:1;
text-align:center;

}

.hero-image img{

max-width:100%;
animation:float 5s ease-in-out infinite;

}


/*=========================
    About
=========================*/

.about-project{

background:var(--light);

}

.about-project h2{

text-align:center;
font-size:36px;
margin-bottom:25px;
color:var(--secondary);

}

.about-project> .container>p{

max-width:900px;
margin:auto;
text-align:center;
margin-bottom:50px;
color:#666;

}

.about-grid{

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

}

.about-card{

background:#fff;
padding:30px;
border-radius:var(--radius);
box-shadow:0 8px 25px rgba(0,0,0,.08);
transition:.3s;

}

.about-card:hover{

transform:translateY(-8px);

}

.about-card h3{

color:var(--primary);
margin-bottom:15px;

}

.about-card p{

color:#666;

}


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

@keyframes float{

0%{

transform:translateY(0);

}

50%{

transform:translateY(-12px);

}

100%{

transform:translateY(0);

}

}
/*==================================================
        Services Section
==================================================*/

.services-section{
background:#fff;
}

.service-grid{

display:grid;
grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
gap:30px;
margin-top:50px;

}

.service-card{

background:#fff;
padding:35px 30px;
border-radius:16px;
box-shadow:0 10px 30px rgba(0,0,0,.08);
transition:.35s;
border-top:5px solid var(--primary);

}

.service-card:hover{

transform:translateY(-10px);
box-shadow:0 15px 40px rgba(0,0,0,.15);

}

.service-card .icon{

width:70px;
height:70px;
display:flex;
align-items:center;
justify-content:center;
font-size:34px;
background:#eef5ff;
border-radius:50%;
margin-bottom:20px;

}

.service-card h3{

color:var(--secondary);
margin-bottom:15px;
font-size:24px;

}

.service-card p{

color:#666;
line-height:2;

}


/*==================================================
          Counter
==================================================*/

.counter-section{

background:linear-gradient(135deg,#0b5ed7,#0a2540);
color:#fff;

}

.counter-grid{

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

}

.counter-box{

text-align:center;
padding:35px 20px;

}

.counter-box h2{

font-size:52px;
margin-bottom:10px;
font-weight:800;

}

.counter-box p{

font-size:18px;
opacity:.95;

}


/*==================================================
          Why Us
==================================================*/

.why-us{

background:#f7f9fc;

}

.why-grid{

display:grid;
grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
gap:30px;
margin-top:45px;

}

.why-item{

background:#fff;
padding:30px;
border-radius:15px;
box-shadow:0 8px 25px rgba(0,0,0,.08);
transition:.3s;

}

.why-item:hover{

transform:translateY(-8px);

}

.why-item h3{

color:var(--primary);
margin-bottom:15px;
font-size:22px;

}

.why-item p{

line-height:2;
color:#666;

}


/*==================================================
            SEO Content
==================================================*/

.seo-content{

background:#fff;

}

.seo-content h2{

text-align:center;
font-size:36px;
color:var(--secondary);
margin-bottom:30px;

}

.seo-content p{

max-width:1000px;
margin:20px auto;
line-height:2.3;
font-size:17px;
color:#555;
text-align:justify;

}


/*==================================================
      Hover Effects
==================================================*/

.service-card,
.why-item,
.about-card{

transition:all .35s ease;

}

.service-card:hover,
.why-item:hover,
.about-card:hover{

border-color:var(--primary);

}
/*==================================================
        Process Section
==================================================*/

.process{
background:#fff;
}

.process-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
gap:30px;
margin-top:50px;
}

.step{
background:#fff;
padding:35px 25px;
text-align:center;
border-radius:16px;
box-shadow:0 10px 30px rgba(0,0,0,.08);
position:relative;
transition:.35s;
}

.step:hover{
transform:translateY(-8px);
}

.step span{
display:inline-flex;
align-items:center;
justify-content:center;
width:70px;
height:70px;
background:var(--primary);
color:#fff;
border-radius:50%;
font-size:28px;
font-weight:bold;
margin-bottom:20px;
}

.step h3{
margin-bottom:15px;
color:var(--secondary);
}

.step p{
color:#666;
line-height:2;
}


/*==================================================
        Request Form
==================================================*/

.request-form{
background:#f7f9fc;
}

.request-form form{
max-width:800px;
margin:40px auto 0;
}

.request-form input,
.request-form select,
.request-form textarea{

width:100%;
padding:15px 18px;
margin-bottom:18px;
border:1px solid #d8d8d8;
border-radius:10px;
font-size:16px;
font-family:inherit;
transition:.3s;
background:#fff;

}

.request-form input:focus,
.request-form select:focus,
.request-form textarea:focus{

outline:none;
border-color:var(--primary);
box-shadow:0 0 10px rgba(11,94,215,.15);

}

.request-form textarea{
resize:vertical;
min-height:160px;
}

.request-form button{

width:100%;
padding:16px;
background:var(--primary);
color:#fff;
border:none;
border-radius:10px;
font-size:18px;
font-weight:bold;
cursor:pointer;
transition:.3s;

}

.request-form button:hover{

background:#094db0;

}


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

.faq{
background:#fff;
}

.faq details{

background:#f8f8f8;
margin-bottom:18px;
border-radius:10px;
padding:18px;

}

.faq summary{

cursor:pointer;
font-weight:bold;
font-size:18px;
color:var(--secondary);

}

.faq p{

margin-top:15px;
line-height:2;
color:#555;

}


/*==================================================
             CTA
==================================================*/

.cta{

background:linear-gradient(135deg,#0a2540,#0b5ed7);
color:#fff;
text-align:center;

}

.cta h2{

font-size:42px;
margin-bottom:20px;

}

.cta p{

font-size:18px;
margin-bottom:35px;

}

.cta-btn{

display:inline-block;
padding:16px 38px;
background:#fff;
color:var(--primary);
border-radius:10px;
font-weight:bold;
transition:.3s;

}

.cta-btn:hover{

transform:translateY(-4px);

}


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

footer{

background:#081b29;
color:#fff;
padding:30px 0;
text-align:center;

}

footer p{

margin:0;

}


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

@media(max-width:992px){

.hero-box{

flex-direction:column-reverse;
text-align:center;

}

.hero h1{

font-size:38px;

}

.hero-buttons{

justify-content:center;

}

.section-title h2{

font-size:30px;

}

.cta h2{

font-size:34px;

}

}

@media(max-width:768px){

section{

padding:60px 0;

}

.hero{

padding-top:40px;

}

.hero h1{

font-size:30px;

}

.hero p{

font-size:16px;

}

.btn-primary,
.btn-secondary{

width:100%;
text-align:center;

}

.counter-box h2{

font-size:42px;

}

.service-card,
.why-item,
.about-card,
.step{

padding:25px;

}

}

@media(max-width:480px){

.container{

width:94%;

}

.section-title h2{

font-size:26px;

}

.hero h1{

font-size:26px;

}

.hero p{

font-size:15px;

}

.cta h2{

font-size:28px;

}

}
/* انیمیشن نمایش */

.hidden{
opacity:0;
transform:translateY(40px);
transition:.8s;
}

.show{
opacity:1;
transform:translateY(0);
}


/* دکمه بازگشت به بالا */

#topButton{

position:fixed;
left:25px;
bottom:25px;
width:50px;
height:50px;
border:none;
border-radius:50%;
background:#0b5ed7;
color:#fff;
font-size:20px;
cursor:pointer;
opacity:0;
visibility:hidden;
transition:.3s;
z-index:9999;

}

#topButton.showTop{

opacity:1;
visibility:visible;

}

#topButton:hover{

transform:translateY(-4px);

}


/* ===========================
   PROJECT STORE
=========================== */

.project-store{

padding:80px 0;
background:#f7f9fc;

}

.section-title{

text-align:center;
margin-bottom:40px;

}

.section-title h2{

font-size:34px;
color:#0b2d5c;
margin-bottom:15px;

}

.section-title p{

color:#666;
font-size:17px;
max-width:800px;
margin:auto;
line-height:2;

}

.project-filter{
    display:flex;
    flex-direction:row;
    justify-content:center;
    align-items:center;
    flex-wrap:wrap;
    gap:15px;
    margin:40px auto;
    max-width:1200px;
}

.project-filter button{
    background:#0b63ce;
    color:#fff;
    border:none;
    border-radius:30px;
    padding:12px 28px;
    cursor:pointer;
    font-size:15px;
    font-weight:bold;
    transition:.3s;
}

.project-filter button:hover,
.project-filter button.active{
    background:#082d63;
    transform:translateY(-2px);
}
.project-filter button{

padding:10px 22px;
border:none;
border-radius:30px;
background:#e5e5e5;
cursor:pointer;
transition:.3s;

}

.project-filter button.active,
.project-filter button:hover{

background:#0b63ce;
color:#fff;

}

.project-grid{

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

}

.project-card{

background:#fff;
border-radius:15px;
overflow:hidden;
box-shadow:0 8px 25px rgba(0,0,0,.08);
transition:.35s;
position:relative;

}

.project-card:hover{

transform:translateY(-8px);

}

.project-card img{

width:100%;
height:220px;
object-fit:cover;

}

.project-content{

padding:25px;

}

.project-content h3{

color:#0b2d5c;
margin-bottom:15px;

}

.project-content p{

line-height:1.9;
color:#666;
font-size:15px;
margin-bottom:20px;

}

.price{

font-size:24px;
font-weight:bold;
color:#0b63ce;
margin-bottom:20px;

}

.project-filter buttons{

display:flex;
justify-content:space-between;

}

.project-filter buttons a{

padding:12px 22px;
border-radius:8px;
text-decoration:none;
font-weight:bold;
transition:.3s;

}

.buttons a:first-child{

background:#ececec;
color:#333;

}

.buy{

background:#0b63ce;
color:white;

}

.buy:hover{

background:#083f86;

}

.badge{

position:absolute;
top:15px;
right:15px;
background:#ff5722;
color:white;
padding:6px 14px;
border-radius:30px;
font-size:13px;
font-weight:bold;

}

.badge.new{

background:#16a34a;

}

@media(max-width:768px){

.buttons{

flex-direction:column;
gap:10px;

}

.buttons a{

text-align:center;

}

}
.project-filter{
    display:flex !important;
    flex-direction:row !important;
    justify-content:center !important;
    align-items:center !important;
    flex-wrap:wrap !important;
    gap:15px !important;
}

.project-filter button,
.project-filter a{
    display:inline-block !important;
    width:auto !important;
    flex:none !important;
    padding:12px 25px !important;
    border-radius:30px;
}
.article-page{
padding:60px 0;
background:#f5f7fb;
}

.article-page .container{
max-width:900px;
margin:auto;
background:#fff;
padding:40px;
border-radius:12px;
box-shadow:0 10px 25px rgba(0,0,0,.08);
}

.article-page h1{
font-size:34px;
color:#003366;
margin-bottom:25px;
}

.article-page h2{
margin-top:35px;
color:#0056b3;
}

.article-page p,
.article-page li{
line-height:2.2;
font-size:18px;
}

.article-image{
width:100%;
border-radius:10px;
margin-bottom:30px;
}
.page-title{
    margin-top:80px;
    text-align:center;
}

.page-title h1{
    margin-bottom:15px;
}
.blog-container{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(340px,1fr));
    gap:30px;
}

.blog-card{
    background:#fff;
    border-radius:18px;
    overflow:hidden;
    box-shadow:0 10px 30px rgba(0,0,0,.08);
    transition:.3s;
}

.blog-card:hover{
    transform:translateY(-8px);
}

.blog-card img{
    width:100%;
    height:220px;
    object-fit:cover;
}

.blog-content{
    padding:25px;
}

.blog-content h3{
    font-size:24px;
    margin-bottom:15px;
    color:#003366;
    line-height:1.8;
}

.blog-content p{
    line-height:2;
    color:#555;
    height:90px;
    overflow:hidden;
}

.blog-content a{
    display:inline-block;
    margin-top:20px;
    padding:10px 25px;
    background:#0056b3;
    color:#fff;
    text-decoration:none;
    border-radius:30px;
}

.blog-content a:hover{
    background:#ff9800;
}
/* ===========================
   Responsive Mobile
=========================== */

@media (max-width:768px){

.header-box{
    flex-direction:column;
    gap:15px;
    padding:15px;
}

.logo{
    text-align:center;
    font-size:24px;
}

nav{
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    gap:10px;
}

nav a{
    margin:0;
    padding:8px 12px;
    font-size:14px;
}

.hero{
    padding:70px 20px;
}

.hero h1{
    font-size:30px;
}

.hero p{
    font-size:16px;
}

.section{
    padding:50px 15px;
}

.about-card{
    padding:25px;
}

.about-card h2{
    font-size:28px;
}

.ceo-photo{
    width:170px !important;
    height:170px !important;
}

.stats-box{
    grid-template-columns:1fr;
}

}
.menu-toggle{
display:none;
font-size:32px;
cursor:pointer;
color:#fff;
}

@media(max-width:768px){

.header-box{
display:flex;
justify-content:space-between;
align-items:center;
position:relative;
}

.menu-toggle{
display:block;
}

nav{

display:none;
position:absolute;
top:70px;
right:0;
left:0;

background:#0a3d62;

padding:15px;

border-radius:0 0 12px 12px;

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

}

nav.show{

display:flex;

flex-direction:column;

}

nav a{

padding:14px;

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

text-align:center;

margin:0;

}

}
/* کدهای قبلی سایت */

/* کدهای قبلی سایت */

/* کدهای قبلی سایت */


/* ===== منوی موبایل ===== */

.menu-toggle{
    display:none;
    font-size:30px;
    color:#fff;
    cursor:pointer;
}

@media (max-width:768px){

.menu-toggle{
    display:block;
}

nav{
    display:none;
    width:100%;
    background:#0a3d62;
}

nav a{
    display:block;
    padding:15px;
    text-align:center;
    color:#fff;
    text-decoration:none;
}

}
.menu-toggle{
    display:none;
    font-size:30px;
    color:#fff;
    cursor:pointer;
}

@media (max-width:768px){

.menu-toggle{
    display:block;
}

nav{
    display:none;
    width:100%;
    background:#0a3d62;
}

nav a{
    display:block;
    padding:15px;
    text-align:center;
    color:#fff;
    text-decoration:none;
}

}
.hero{
background:linear-gradient(rgba(10,61,98,.85),rgba(10,61,98,.85)),
url(images/fiber-banner.jpg) center/cover;
padding:110px 20px;
text-align:center;
color:#fff;
}

.hero h1{
font-size:46px;
margin-bottom:20px;
}

.hero p{
max-width:850px;
margin:auto;
font-size:20px;
line-height:2;
}

.hero-btn{
display:inline-block;
margin-top:30px;
padding:15px 35px;
background:#ffc107;
color:#000;
text-decoration:none;
border-radius:40px;
font-weight:bold;
transition:.3s;
}

.hero-btn:hover{
background:#ffb300;
}

.service-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
gap:25px;
margin-top:40px;
}

.service-card{
background:#fff;
padding:30px;
border-radius:15px;
box-shadow:0 10px 30px rgba(0,0,0,.08);
transition:.3s;
}

.service-card:hover{
transform:translateY(-8px);
}

.service-card h3{
color:#0a3d62;
margin-bottom:15px;
}
/* کدهای قبلی سایت */

/* کدهای قبلی سایت */

/* کدهای قبلی سایت */


/* ===== منوی موبایل ===== */

.menu-toggle{
    display:none;
    font-size:30px;
    color:#fff;
    cursor:pointer;
}

@media (max-width:768px){

.menu-toggle{
    display:block;
}

nav{
    display:none;
    width:100%;
    background:#0a3d62;
}

nav a{
    display:block;
    padding:15px;
    text-align:center;
    color:#fff;
    text-decoration:none;
}

}
/* ===== هدر ===== */

header{
    background:#0a3d62;
    position:sticky;
    top:0;
    z-index:999;
    width:100%;
}

.header-box{
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:15px 20px;
}

/* ===== منوی موبایل ===== */

.menu-toggle{
    display:none;
    font-size:32px;
    font-weight:bold;
    color:#ffffff;
    cursor:pointer;
}

@media (max-width:768px){

    .menu-toggle{
        display:block;
    }

    nav{
        display:none;
        width:100%;
        background:#0a3d62;
    }

    nav.show{
        display:flex;
        flex-direction:column;
    }

    nav a{
        color:#fff;
        padding:15px;
        text-align:center;
        border-bottom:1px solid rgba(255,255,255,.15);
    }

}
/* ===== هدر ===== */

header{
    background:#0a3d62;
    position:sticky;
    top:0;
    z-index:999;
    width:100%;
}

.header-box{
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:15px 20px;
}

/* ===== منوی موبایل ===== */

.menu-toggle{
    display:none;
    font-size:32px;
    font-weight:bold;
    color:#ffffff;
    cursor:pointer;
}

@media (max-width:768px){

    .menu-toggle{
        display:block;
    }

    nav{
        display:none;
        width:100%;
        background:#0a3d62;
    }

    nav.show{
        display:flex;
        flex-direction:column;
    }

    nav a{
        color:#fff;
        padding:15px;
        text-align:center;
        border-bottom:1px solid rgba(255,255,255,.15);
    }

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

header{
    background:#0a3d62;
    position:sticky;
    top:0;
    z-index:999;
    width:100%;
}

.header-box{
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:15px 0;
}

.logo{
    color:#fff;
    font-size:28px;
    font-weight:bold;
}

.logo span{
    display:block;
}

.logo small{
    font-size:12px;
}

#menu{
    display:flex;
    gap:20px;
}

#menu a{
    color:#fff;
    text-decoration:none;
}

.menu-toggle{
    display:none;
    color:#fff;
    font-size:34px;
    cursor:pointer;
}

@media(max-width:768px){

.menu-toggle{
    display:block;
}

#menu{
    display:none;
    position:absolute;
    top:70px;
    right:0;
    left:0;
    background:#0a3d62;
    flex-direction:column;
}

#menu.show{
    display:flex;
}

#menu a{
    padding:15px;
    border-bottom:1px solid rgba(255,255,255,.15);
    text-align:center;
}

}

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

header{
    background:#0a3d62;
    position:sticky;
    top:0;
    z-index:999;
    width:100%;
}

.header-box{
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:15px 0;
}

.logo{
    color:#fff;
    font-size:28px;
    font-weight:bold;
}

.logo span{
    display:block;
}

.logo small{
    font-size:12px;
}

#menu{
    display:flex;
    gap:20px;
}

#menu a{
    color:#fff;
    text-decoration:none;
}

.menu-toggle{
    display:none;
    color:#fff;
    font-size:34px;
    cursor:pointer;
}

@media(max-width:768px){

.menu-toggle{
    display:block;
}

#menu{
    display:none;
    position:absolute;
    top:70px;
    right:0;
    left:0;
    background:#0a3d62;
    flex-direction:column;
}

#menu.show{
    display:flex;
}

#menu a{
    padding:15px;
    border-bottom:1px solid rgba(255,255,255,.15);
    text-align:center;
}

}
.site-header{
    background:#0a3d62;
    position:sticky;
    top:0;
    z-index:999;
}

.header-box{
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:18px 0;
}

.logo span{
    color:#fff;
    font-size:28px;
    font-weight:bold;
}

.logo small{
    display:block;
    color:#dfefff;
    margin-top:4px;
}

.menu-toggle{
    display:none;
    color:#fff;
    font-size:34px;
    cursor:pointer;
}

.main-menu{
    display:flex;
    gap:25px;
}

.main-menu a{
    color:#fff;
    text-decoration:none;
    font-weight:600;
}

.main-menu a.active{
    color:#ffd54f;
}

.fiber-hero{
    background:linear-gradient(rgba(10,61,98,.85),rgba(10,61,98,.85)),url(images/fiber-bg.jpg);
    background-size:cover;
    background-position:center;
    color:#fff;
    text-align:center;
    padding:120px 20px;
}

.fiber-hero h1{
    font-size:48px;
    margin-bottom:20px;
}

.fiber-hero p{
    max-width:800px;
    margin:auto;
    line-height:2;
    font-size:20px;
}

.hero-btn{
    display:inline-block;
    margin-top:35px;
    padding:14px 35px;
    background:#00b894;
    color:#fff;
    border-radius:8px;
    text-decoration:none;
}

@media(max-width:768px){

    .menu-toggle{
        display:block;
    }

    .main-menu{
        display:none;
        position:absolute;
        top:75px;
        right:15px;
        left:15px;
        background:#0a3d62;
        border-radius:10px;
        padding:15px;
        flex-direction:column;
        text-align:center;
    }

    .main-menu.show{
        display:flex;
    }

    .fiber-hero{
        padding:80px 15px;
    }

    .fiber-hero h1{
        font-size:32px;
    }

    .fiber-hero p{
        font-size:16px;
    }
}
.shk-wrapper{
max-width:1100px;
margin:auto;
}

.shk-main-display{
overflow:hidden;
position:relative;
}

.shk-track{
display:flex;
transition:.5s;
}

.shk-item{
min-width:100%;
}

.shk-item img{
width:100%;
display:block;
cursor:pointer;
border-radius:12px;
}

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

.shk-dots img{

width:90px;
height:70px;

object-fit:cover;

cursor:pointer;

opacity:.5;

border-radius:8px;

transition:.3s;

}

.shk-dots img.active{

opacity:1;

transform:scale(1.08);

border:3px solid #00a8ff;

}

.shk-btn{

position:absolute;

top:50%;

transform:translateY(-50%);

width:45px;

height:45px;

border:none;

border-radius:50%;

cursor:pointer;

font-size:24px;

background:#fff;

box-shadow:0 3px 10px rgba(0,0,0,.2);

}

.prev{

left:20px;

}

.next{

right:20px;

}



/* Lightbox */

#lightbox{

display:none;

position:fixed;

left:0;

top:0;

width:100%;

height:100%;

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

justify-content:center;

align-items:center;

z-index:9999;

}

#lightbox img{

max-width:90%;

max-height:90%;

border-radius:10px;

}

#closeLightbox{

position:absolute;

top:30px;

right:40px;

font-size:45px;

color:#fff;

cursor:pointer;

}
.projects-grid img,
.project-card img,
.projects-card img {
    width: 100% !important;
    height: 250px !important;
    object-fit: cover !important;
    display: block;
}
.services-section { padding: 60px 20px; background-color: #f9f9f9; direction: rtl; text-align: center; }
.section-title { font-size: 2.2rem; color: #333; margin-bottom: 10px; }
.section-subtitle { color: #666; margin-bottom: 40px; }

.services-grid { 
  display: grid; 
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); 
  gap: 20px; 
  max-width: 1200px; 
  margin: 0 auto; 
}

.service-card { 
  background: white; 
  padding: 30px; 
  border-radius: 12px; 
  box-shadow: 0 4px 6px rgba(0,0,0,0.1); 
  transition: transform 0.3s ease; 
}

.service-card:hover { transform: translateY(-10px); background: #f0f8ff; }
.service-card .icon { font-size: 3rem; margin-bottom: 15px; }
.service-card h3 { color: #0056b3; margin-bottom: 10px; }
.service-card p { font-size: 0.95rem; color: #555; line-height: 1.6; }

/* Responsive Adjustments */
@media (max-width: 768px) {
  .section-title { font-size: 1.8rem; }
}
/* استایل کلی و ریست */
* { box-sizing: border-box; margin: 0; padding: 0; font-family: Tahoma, Arial, sans-serif; }
body { line-height: 1.6; color: #333; background: #fff; }
.container { max-width: 1100px; margin: 0 auto; padding: 20px; }

/* هدر و فوتر ساده */
header, footer { background: #333; color: #fff; padding: 20px; text-align: center; }
a { text-decoration: none; color: #0056b3; }

/* استایل صفحه اصلی (بخش خدمات) */
.services-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px; margin-top: 30px; }
.service-card { border: 1px solid #ddd; padding: 20px; border-radius: 8px; transition: 0.3s; }
.service-card:hover { box-shadow: 0 5px 15px rgba(0,0,0,0.1); border-color: #0056b3; }

/* استایل صفحات داخلی (جزئیات خدمت) */
.service-detail { padding: 40px 0; }
.service-detail h1 { color: #0056b3; margin-bottom: 20px; }
.service-detail img { width: 100%; max-height: 400px; object-fit: cover; border-radius: 10px; margin-bottom: 20px; }
.btn-back { display: inline-block; margin-top: 20px; padding: 10px 20px; background: #333; color: #fff; border-radius: 5px; }
/* استایل باکس آیکون */
.icon-box {
    width: 70px;
    height: 70px;
    background-color: #f0f4f8; /* یک رنگ ملایم پشت‌زمینه */
    border-radius: 50%; /* دایره‌ای کردن */
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 30px; /* اندازه ایموجی */
    margin: 0 auto 20px auto; /* وسط‌چین کردن */
    transition: all 0.3s ease;
}

/* افکت هاور (زمانی که موس روی کارت می‌رود) */
.service-card:hover .icon-box {
    background-color: #0056b3; /* تغییر رنگ پشت‌زمینه به آبی هنگام هاور */
    transform: translateY(-5px); /* کمی بالا رفتن آیکون */
}
/* برای اینکه آیکون‌ها رنگی و جذاب‌تر باشند */
.icon-box {
    background-color: #f8f9fa; /* خاکستری روشن */
    border: 1px solid #e9ecef;
}

/* افکت هاور که قبلاً داشتید */
.service-card:hover .icon-box {
    background-color: #0056b3;
    color: white; /* رنگ ایموجی سفید می‌شود تا روی آبی دیده شود */
}
/* تنظیمات کلی گرید خدمات */
.services-grid {
    display: grid;
    /* این خط باعث می‌شود در دسکتاپ کارت‌ها خودکار سایز بگیرند */
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
    padding: 40px 20px;
    max-width: 1200px;
    margin: 0 auto;
}

/* استایل کارت‌های خدمات */
.service-card {
    background: #fff;
    padding: 30px;
    border-radius: 15px;
    text-align: center;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    border: 1px solid #eee;
}

/* افکت هاور (زمانی که موس روی کارت می‌رود) */
.service-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 10px 25px rgba(0,0,0,0.2);
}

/* استایل باکس آیکون */
.icon-box {
    font-size: 40px;
    margin-bottom: 15px;
}

/* استایل عنوان کارت‌ها */
.service-card h3 {
    margin-bottom: 15px;
    color: #333;
}

/* استایل متن کارت‌ها */
.service-card p {
    color: #666;
    font-size: 0.95rem;
    line-height: 1.6;
    margin-bottom: 20px;
    min-height: 80px; /* این خط باعث می‌شود ارتفاع کارت‌ها یکسان بماند */
}

/* استایل دکمه لینک */
.service-card a {
    display: inline-block;
    padding: 10px 20px;
    background-color: #007bff;
    color: #fff;
    text-decoration: none;
    border-radius: 5px;
    transition: background 0.3s;
}

.service-card a:hover {
    background-color: #0056b3;
}
/* کانتینر تصویر بزرگ */
.gallery-preview {
  width: 100%;
  max-width: 100%;
  height: 420px;          /* اگر زیاد/کم است تنظیم شود */
  overflow: hidden;       /* اگر لازم نیست، موقتاً remove کنید */
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f5f5f5;
}

/* خود تصویر بزرگ */
.gallery-preview img {
  width: 100%;
  height: 100%;
  object-fit: contain;     /* مهم: به جای cover */
  object-position: center;
  display: block;
}