/* Topbar */
/* Custom Properties */
:root{
    --hommex-rep-primary:#091f5b;
    --hommex-rep-primary-dark:#041033;
    --hommex-rep-accent:#ff9900;
    --hommex-rep-accent-soft:#ffe6c2;
    --hommex-rep-bg:#f6f7fb;
    --hommex-rep-bg-alt:#eef1fb;
    --hommex-rep-text:#333;
    --hommex-rep-muted:#6a6a6a;
    --hommex-rep-radius:18px;
    --hommex-rep-radius-lg:22px;
    --hommex-rep-shadow:0 18px 40px rgba(9,31,91,.14);
    --hommex-rep-shadow-card:0 10px 28px rgba(0,0,0,.06);
    --hommex-rep-transition:.28s ease;
  }
  
.hommex-rep-topbar{
    position:sticky;top:0;z-index:50;
    background:#fff;border-bottom:1px solid #eceff6;
    box-shadow:0 2px 10px rgba(0,0,0,.04);
  }
  .hommex-rep-nav{display:flex;align-items:center;justify-content:space-between;gap:.8rem}
  .hommex-rep-brand{display:inline-flex;align-items:center;gap:.5rem;color:var(--hommex-rep-primary);text-decoration:none;font-weight:700}
  .hommex-rep-btn-nav{
    display:inline-flex;align-items:center;justify-content:center;
    padding:.55rem 1rem;border-radius:999px;border:1px solid #e7e9f5;background:#fff;color:var(--hommex-rep-primary);
    text-decoration:none;font-size:.85rem;transition:box-shadow var(--hommex-rep-transition),transform var(--hommex-rep-transition);
  }
  .hommex-rep-btn-nav:hover{box-shadow:0 8px 20px rgba(9,31,91,.12);transform:translateY(-1px)}
  
  /* Buttons */
  .hommex-rep-btn-primary,.hommex-rep-btn-secondary{
    display:inline-flex;align-items:center;justify-content:center;
    padding:.75rem 1.6rem;border-radius:999px;font-size:.9rem;border:none;text-decoration:none;white-space:nowrap;cursor:pointer;
    transition:transform var(--hommex-rep-transition),box-shadow var(--hommex-rep-transition),background var(--hommex-rep-transition),opacity var(--hommex-rep-transition);
  }
  .hommex-rep-btn-primary{background:linear-gradient(135deg,var(--hommex-rep-accent),#ffb347);color:#22150a;box-shadow:0 12px 28px rgba(255,153,0,.35)}
  .hommex-rep-btn-primary:hover{transform:translateY(-2px);box-shadow:0 16px 36px rgba(255,153,0,.45)}
  .hommex-rep-btn-secondary{background:rgba(255,255,255,.12);color:#fff;border:1px solid rgba(255,255,255,.28)}
  .hommex-rep-btn-secondary:hover{background:rgba(255,255,255,.22)}
  .hommex-rep-btn-lg{padding:.95rem 2.2rem;font-size:1rem}
  
  /* Hero */
  .hommex-rep-hero{
      position:relative;
      border-radius:0 0 var(--hommex-rep-radius) var(--hommex-rep-radius);
      overflow:hidden;
      color:#ffffff00;
    
      /* ŲŖŲĀµÅĀˆÅŖĀŒÅ²Ā± Å²Ć˜Åā€ ŲĀ± */
      background:
      linear-gradient(to left, rgba(4,16,51,.85), rgba(4,16,51,.45)),
      url("https://hommex.ir/public/media/pages/image/2026-04-27_072532.6593730000.jpg");
    
      background-size:cover;
      background-position:center;
      background-repeat:no-repeat;
    
      min-height:420px;
      display:flex;
      align-items:center;
      border-radius: 15px;
    }
    
    /* ÅŖĀ². Å²Å–Å²Ć˜Å²Ć†ÅŖĀŒÅā€˛ Å²Ć˜Å²Ā§ÅšĀ©Å²Ā³ ŲŖŲĀµÅĀˆÅŖĀŒÅ²Ā± Å²Ć˜Åā€� ŁĀ¾Å²Ā³Äā‚¬ĀŒÅ²Ā²Åā€¦ÅŖĀŒÅā€ Łā€� ŚĀ©Åā€˛ ŲĀ³ÅšĀ©Å²Ā´Åā€  */
  
    
    /* ÅŖĀ³. ŲĀ§ÅŖĀŒÅ²Ā¬Å²Ā§Å²Ć† ÅŖĀŒÅšĀ© Łā€˛Å²Ā§ÅŖĀŒÅā€� ŲŖÅŖĀŒÅ²Ā±Åā€� (Overlay) Å²Ć˜Å²Ā±Å²Ā§ÅŖĀŒ ŲĀ§ÅŖĀŒÅā€ ŚĀ©Åā€� Łā€¦Å²Å–Łā€ āā‚¬ĀŒÅā€�ŲĀ§ Å²Ć˜Åā€�ŲŖŲĀ± ŲĀ®ÅĀˆÅ²Ā§Åā€ Å²Ć†Åā€� ŲĀ´ÅĀˆÅā€ Å²Ć† */
  
    
    /* ÅŖĀ´. ŲĀ¢ÅĀˆÅ²Ā±Å²Ć†Åā€  Łā€¦Å²Ā­Å²Å–ŁĀˆÅ²Ā§ ŲĀ±ÅĀˆÅŖĀŒ Łā€˛Å²Ā§ÅŖĀŒÅā€�āā‚¬ĀŒÅā€�ŲĀ§ÅŖĀŒ ŲŖŲĀµÅĀˆÅŖĀŒÅ²Ā± ŁĀˆ ŲĀ³Å²Ā§ÅŖĀŒÅā€� */
    .hommex-rep-hero-inner {
      position: relative;
      z-index: 3; /* Å²Ć˜Å²Ā§Åā€˛Å²Ā§Å²Å–ŲĀ± ŲĀ§Å²Ā² Łā€�Łā€¦Åā€� */
      width: 100%;
    }
  .hommex-rep-badge{
    display:inline-block;padding:.35rem .9rem;border-radius:999px;background:rgba(0,0,0,.26);
    border:1px solid rgba(255,255,255,.25);font-size:.78rem;margin-bottom:.8rem
  }
  .hommex-rep-hero-text h1{margin:0 0 .7rem;font-size:1.6rem; color:#ffff; font-weight: 800;}
  .hommex-rep-hero-text p{margin:0 0 1rem;color:#eef1ff;font-size:.96rem; max-width: 700px;}
  .hommex-rep-hero-points{display:flex;flex-wrap:wrap;gap:.45rem;list-style:none;padding:0;margin:0 0 1.1rem}
  .hommex-rep-hero-points li{font-size:.8rem;padding:.35rem .7rem;border-radius:999px;background:rgba(0,0,0,.22);display:flex;align-items:center;gap:8px}
  .hommex-rep-hero-actions{display:flex;flex-wrap:wrap;gap:.7rem;margin-bottom:-100%}
  
  .hommex-rep-hero-visual{
    position:relative;border-radius:var(--hommex-rep-radius-lg);background:rgba(8,17,53,.6);padding:1rem;box-shadow:var(--hommex-rep-shadow);overflow:hidden
  }
  .hommex-rep-hero-visual picture,.hommex-rep-hero-visual img{display:block;width:100%;max-height:280px;object-fit:cover;border-radius:calc(var(--hommex-rep-radius-lg) - 4px)}
  .hommex-rep-floating{
    position:absolute;background:rgba(10,19,60,.92);color:#fff;border-radius:14px;padding:.6rem .8rem;font-size:.78rem;
    box-shadow:0 14px 36px rgba(0,0,0,.45)
  }
  .hommex-rep-kpi-card{left:.9rem;bottom:.9rem;min-width:140px}
  .hommex-rep-kpi-label{display:block;opacity:.85;margin-bottom:.2rem}
  .hommex-rep-kpi-value{display:block;font-weight:700;margin-bottom:.15rem}
  .hommex-rep-kpi-hint{opacity:.85}
  .hommex-rep-tag-card{top:.9rem;right:.9rem}
  
  /* Breadcrumbs */
  .hommex-rep-breadcrumbs{padding:.3rem 0 1.2rem}
  .hommex-rep-breadcrumbs ol{display:flex;gap:.5rem;list-style:none;margin:0;padding:0;color:#d6dbff;font-size:.82rem}
  .hommex-rep-breadcrumbs a{color:#fff;text-decoration:none;border-bottom:1px dashed rgba(255,255,255,.4)}
  .hommex-rep-breadcrumbs li[aria-current="page"]{opacity:.9}
  
  /* Grids & Cards */
  .hommex-rep-grid-3{display:grid;gap:1.2rem}
  .hommex-rep-grid-2{display:grid;gap:1.2rem}
  .hommex-rep-card{
    background:#fff;border-radius:var(--hommex-rep-radius);padding:1.3rem 1.2rem;box-shadow:var(--hommex-rep-shadow-card);
    /* Ć„ā€ Ä€ĀšĆ„ā‚¬Ä€Ā©Ć„ā€ Ä€Ā˜Ć„ā‚¬Ä€Ā±Ć„ā€ āā€˛Ā¢Ć„ā€“āā‚¬  Ć„ā€ Ä€ĀšĆ„ā‚¬Ä€Ā©Ć„ā€ Ä€Ā˜Ć„ā‚¬Ä€Ā±Ć„ā€ Ä€Ā˜Ć„ā‚¬Ä†ā€ Ć„ā€ āā€˛Ā¢Ć„ĀÄā€šĀ¬  Ć„ā€ Ä€ĀšĆ„ā‚¬Ä†ā€ Ć„ā€ āā€˛Ā¢Ć„ā€“āā‚¬ Ć„ā€ Ä€Ā˜Ć„ā‚¬Ä€Ā´Ć„ā€ āā€˛Ā¢Ć„ĀÄā€šĀ¬Ä¼Ć¦Ā½ Ć„ā€ āā€˛Ā¢Ć„ĀÄā€šĀ¬Ä¼Ć¦Ā½Ć„ā€ Ä€Ā˜Ć„ā‚¬Ä€Ā§ Ć„ā€ Ä€Ā˜Ć„ā‚¬Ä€Ā§Ć„ā€ Ä€Ā˜Ć„ā‚¬Ä€Ā¹Ć„ā€ āā€˛Ā¢Ć„ĀÄā€šĀ¬Ä€Ā¦Ć„ā€ Ä€Ā˜Ć„ā‚¬Ä€Ā§Ć„ā€ āā€˛Ā¢Ć„ĀÄā€šĀ¬Ä–ā€ŗ Ć„ā€ Ä€Ā˜Ć„ā‚¬Ä€Ā´Ć„ā€ Ä€Ā˜Ć„ā‚¬Ä†ā€  */
  }
  .hommex-rep-card h3{margin:.2rem 0 .7rem;color:var(--hommex-rep-primary);font-size:1.02rem}
  .hommex-rep-card p{margin:0 0 .8rem}
  .hommex-rep-card ul{padding-right:1.2rem;margin:.2rem 0 0;list-style:none}
  .hommex-rep-card li{margin-bottom:.55rem;line-height:2.2;display:flex;gap:8px;align-items:center}
  .hommex-rep-icon{width:40px;height:40px;border-radius:12px;background:var(--hommex-rep-accent-soft);display:flex;align-items:center;justify-content:center;margin-bottom:.7rem}
  .hommex-rep-icon i{color:var(--hommex-rep-primary)}
  
  /* Steps */
  .hommex-rep-steps{display:grid;gap:1rem}
  .hommex-rep-step-card{
    background:#fff;border-radius:var(--hommex-rep-radius);padding:1.2rem 1.1rem;box-shadow:var(--hommex-rep-shadow-card);position:relative;overflow:hidden
  }
  .hommex-rep-step-card h3 {text-align: center;}
  /* Ć„ā€ āā€˛Ā¢Ć„ĀÄā€šĀ¬ Ć„ā€ āā€˛Ā¢Ć„ā€“āā‚¬ Ć„ā€ Ä€Ā˜Ć„ā‚¬Ä€Ā§Ć„ā€ Ä€Ā˜Ć„ā‚¬Ä€Ā± Ć„ā€ Ä€Ā˜Ć„ā‚¬Ä€Ā¹Ć„ā€ āā€˛Ā¢Ć„ĀÄā€šĀ¬Ä€Ā¦Ć„ā€ āā€˛Ā¢Ć„ā€“āā‚¬ Ć„ā€ Ä€Ā˜Ć„ā‚¬Ä†ā€ Ć„ā€ āā‚¬Å—Ćā€¦Äā‚¬ā„¢ Ć„ā€ Ä€Ā˜Ć„ā‚¬Ä†Ā˜Ć„ā€ Ä€Ā˜Ć„ā‚¬Ä€Ā±Ć„ā€ Ä€Ā˜Ć„ā‚¬Ä€Ā§Ć„ā€ āā‚¬Å—Ćā€¦Äā‚¬ā„¢ Ć„ā€ āā€˛Ā¢Ć„ĀÄā€šĀ¬Ä€Ā¦Ć„ā€ Ä€Ā˜Ć„ā‚¬Ä€Ā±Ć„ā€ Ä€Ā˜Ć„ā‚¬Ä€Ā­Ć„ā€ āā€˛Ā¢Ć„ĀÄā€šĀ¬Ä–ā€ŗĆ„ā€ āā€˛Ā¢Ć„ĀÄā€šĀ¬Ä¼Ć¦Ā½ Ć„ā€ Ä€Ā˜Ć„ā‚¬Ä†Ā˜Ć„ā€ āā€˛Ā¢Ć„ĀÄā€šĀ¬ Ć„ā€ Ä€Ā˜Ć„ā‚¬Ä†ā€ Ć„ā€ āā‚¬Å—Ćā€¦Äā‚¬ā„¢ */
  .hommex-rep-step-card::before{content:"";position:absolute;inset-inline-start:0;top:0;bottom:0;width:4px;background:linear-gradient(to bottom,var(--hommex-rep-accent),#ffb347)}
  .hommex-rep-step-number{
    width:36px;height:36px;border-radius:11px;background:rgba(255,153,0,.1);color:var(--hommex-rep-accent);display:flex;align-items:center;justify-content:center;
    font-weight:700;margin-bottom:.6rem
  }
  
  /* Checklist */
  .hommex-rep-checklist{padding-right:1.2rem;margin:0;list-style:none}
  .hommex-rep-checklist li{position:relative;padding-right:.2rem;margin-bottom:.55rem;line-height:2.2}
  .hommex-rep-checklist li::after{
    content:"";position:absolute;right:-1.2rem;top:.55rem;width:10px;height:10px;border-radius:50%;
    background:radial-gradient(circle at 30% 30%,#ffb347,var(--hommex-rep-accent));
    box-shadow:0 0 0 3px rgba(255,153,0,.12)
  }
  
  /* CTA */
  .hommex-rep-cta{background:linear-gradient(135deg,#0a1f5e,#071338);color:#fff}
  .hommex-rep-cta-inner{display:flex;flex-direction:column;gap:1rem;align-items:flex-start}
  .hommex-rep-cta-text h2{margin:0 0 .5rem;font-size:1.28rem}
  .hommex-rep-cta-text p{margin:0;color:#f5f5f5}
  .hommex-rep-cta-actions{display:flex;flex-direction:column;gap:.5rem}
  .hommex-rep-cta-note{font-size:.8rem;opacity:.9}
  .card-body {max-width: 50%; margin:0 auto;}

.hommex-rep-container{max-width:1120px;margin:0 auto;padding:1.5rem 1.2rem}
.hommex-rep-section{padding:2.6rem 0;border-radius:var(--hommex-rep-radius) var(--hommex-rep-radius) var(--hommex-rep-radius) var(--hommex-rep-radius)}
.hommex-rep-alt-bg{background:var(--hommex-rep-bg-alt)}
.hommex-rep-section-header{text-align:center;margin-bottom:1.8rem}
.hommex-rep-section-header h2{margin:.1rem 0 .6rem;color:var(--hommex-rep-primary);font-size:1.35rem}
.hommex-rep-section-header p{margin:0 auto;max-width:640px;color:var(--hommex-rep-muted);font-size:.95rem}


body {
    font-family: 'IRANYEKAN', sans-serif;
    background-color: #f8f9fa;
    color: #343a40;
    line-height: 1.8;
    overflow-x: hidden; /* Hide horizontal scrollbar */
}
.section {
    padding: 60px 0;
}
.container-fluid {
    padding-right: 15px;
    padding-left: 15px;
}

/* Header Section */
.banner{
    width:1100px;
    max-width: 95%;
    margin:40px auto;
    border-radius:20px;
    overflow:hidden;
    position:relative;
    box-shadow:0 8px 20px rgba(0,0,0,.1);
}

.banner img{
    width:100%;
    display:block;
}

.banner-btn{
    position:absolute;
    bottom:80px;
    right:40px;
    background:#2e607d;
    color:#fff;
    padding:12px 28px;
    border-radius:30px;
    text-decoration:none;
    font-size:14px;
    transition:.3s;
    z-index: 2;
}

.banner-btn:hover{
    background:#1f465c;
}

/* زیرنویس خوشگل روی بنر */
.banner-subtitle{
    position:absolute;
    bottom:9px;
    right:30px;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    padding:10px 22px;
    border-radius:14px;
    font-size:18px;
    font-weight:400;
    color:#ffffff;
    box-shadow:0 4px 14px rgba(0,0,0,.18);
    z-index:2;
}

@media (max-width:768px){
    .banner-subtitle{
        right:20px;
        left:20px;
        text-align:center;
        bottom:75px;
        font-size:16px;
    }
    .banner-btn{
        right:20px;
        bottom:20px;
        padding:10px 22px;
        font-size:13px;
    }
}

.text-center{
    max-width: 800px;
    margin: 0 auto;
}

.header-images-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    max-width: 600px;
    margin: 0 auto;
}
.header-images-grid img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}
.header-banner::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 1px, transparent 2px);
    background-size: 30px 30px;
    z-index: 0;
}
.header-content {
    position: relative;
    z-index: 1;
}

/* Counter Section */
.counter-section {
    background-color: #ffffff;
    text-align: center;
    padding: 70px 15px;
}
.counter-section h2 {
    font-size: 30px;
    font-weight: 800;
    margin-bottom: 15px;
    color: #0884b6;
}
.counter-section .large-number {
    font-size: 72px;
    font-weight: 800;
    color: #0884b6;
    line-height: 1;
    margin-bottom: 25px;
    text-shadow: 2px 2px 8px rgba(14, 51, 120, 0.3);
}
.counter-section p {
    font-size: 19px;
    margin-bottom: 30px;
    color: #555;
}
.btn-join {
    background-color: #0884b6;
    color: white !important;
    padding: 14px 35px;
    border-radius: 8px;
    font-size: 17px;
    font-weight: 500;
    text-decoration: none;
    transition: all 0.3s ease;
    box-shadow: 0 6px 15px rgba(14, 120, 80, 0.3);
}
.btn-join:hover {
    background-color: #1d73b9;
    box-shadow: 0 8px 20px rgba(29, 141, 185, 0.4);
    transform: translateY(-2px);
}
.background-figure {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 150px;
    background-image: url('pics/background_figure.png'); /* Add this image if you have it */
    background-size: contain;
    background-repeat: no-repeat;
    opacity: 0.1;
    z-index: 0;
}

/* Steps Section */
.steps-section {
    background-color: #f8f9fa;
    text-align: center;
}

.section-title {
    font-size: 32px;
    font-weight: 700;
    color: #2b2c2c;
    margin-bottom: 45px;
    position: relative;
    margin-right: 0;
}
.section-title::after {
    content: '';
    position: absolute;
    bottom: -10px;
    left: 50%;
    transform: translateX(-50%);
    width: 80px;
    height: 4px;
    background: #5698c8;
    border-radius: 2px;
}
.step-boxes {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 25px;
    max-width: 1000px;
    margin: 0 auto;
}
.step-box {
    background: white;
    border-radius: 15px;
    padding: 25px;
    box-shadow: 0 6px 18px rgba(0,0,0,0.07);
    transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
    cursor: pointer;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-height: 180px;
}
.step-box:hover {
    background: #5698c8;
    color: white;
    box-shadow: 0 10px 25px rgba(14,120,80,0.3);
    transform: translateY(-8px);
}
.step-box img {
    width: 70px;
    height: 70px;
    margin-bottom: 20px;
    transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
    filter: invert(0%);
}
.step-box:hover img {
    filter: brightness(0) invert(1);
}

.step-box p {
    font-size: 16px;
    font-weight: 500;
    margin-bottom: 0;
}

/* Values Section */
.values-section {
    background: #ffffff;
    text-align: center;
}
.value-boxes {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 20px;
    max-width: 900px;
    margin: 0 auto;
}
.value-box {
    background: white;
    border-radius: 15px;
    padding: 25px;
    box-shadow: 0 6px 18px rgba(0,0,0,0.07);
    transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
    cursor: pointer;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.value-box:hover {
    background: #5698c8;
    color: white;
    box-shadow: 0 10px 25px rgba(14,120,80,0.3);
    transform: translateY(-8px);
}
.value-box img {
    width: 70px;
    height: 70px;
    margin-bottom: 20px;
    transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
    filter: invert(0%);
}
.value-box:hover img {           
    filter: brightness(0) invert(1);
}
.value-box p {
    font-size: 16px;
    font-weight: 500;
    margin-bottom: 0;
}
.values-section .section-title::after {
    background: #069bc0; /* Matching color */
}

/* Benefits Section */
.benefits-section {
    background-color: #f8f9fa;
    text-align: center;
}
.benefit-boxes {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    max-width: 900px;
    margin: 0 auto;
}
.benefit-box {
    background: white;
    border-radius: 15px;
    padding: 25px;
    box-shadow: 0 6px 18px rgba(0,0,0,0.07);
    transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
    cursor: pointer;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.benefit-box:hover {
    background: #077bbe;
    color: white;
    box-shadow: 0 10px 25px rgba(14,120,80,0.3);
    transform: translateY(-8px);
}
.benefit-box img {
    width: 70px;
    height: 70px;
    margin-bottom: 20px;
    transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
    filter: invert(0%);
}
.benefit-box:hover img {
    filter: brightness(0) invert(1);
}
.benefit-box p {
    font-size: 16px;
    font-weight: 500;
    margin-bottom: 0;
}
.benefits-section .section-title::after {
    background: #1db982; /* Matching color */
}

/* Gallery Section */
.gallery-section {
    background: #ffffff;
    text-align: center;
}
.gallery-images-wrapper {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 15px;
    max-width: 1000px;
    margin: 0 auto;
}
.gallery-item {
    position: relative;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    transition: transform 0.4s ease, box-shadow 0.4s ease;
    cursor: pointer;
}
.gallery-item:hover {
    transform: translateY(-8px);
    box-shadow: 0 12px 25px rgba(14,120,80,0.25);
}
.gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.video-placeholder {
    position: relative;
    background-image: url('pics/gallery1.png'); /* Replace with your main video thumbnail */
    background-size: cover;
    background-position: center;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 300px; /* Adjust as needed */
    border-radius: 10px;
}
.video-placeholder .play-button {
    width: 80px;
    height: 80px;
    background-color: rgba(255,255,255,0.8);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 36px;
    color: #0884b6;
    transition: all 0.3s ease;
    box-shadow: 0 0 15px rgba(0,0,0,0.2);
}
.video-placeholder .play-button:hover {
    background-color: white;
    color: #1d8db9;
    transform: scale(1.1);
}
.small-gallery-images {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
    margin-top: 15px;
}
.small-gallery-images img {
    width: 100%;
    height: 150px;
    object-fit: cover;
    border-radius: 8px;
}
.gallery-section .section-title::after {
    background: #0884b6;
}

/* FAQ Section */
.faq-section {
    background-color: #f8f9fa;
    text-align: center;
}

/* راست‌چین کردن کامل FAQ */
.faq-item {
    background: white;
    border-radius: 12px;
    margin: 15px auto;
    width: 85%;
    max-width: 1010px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.06);
    transition: all 0.3s ease;
    direction: rtl;
    text-align: right;
}
.faq-item:hover {
    box-shadow: 0 8px 20px rgba(14,120,80,0.15);
    background: #e6fff4; /* Light green hover background */
}
.faq-header {
    padding: 20px 25px;
    font-size: 18px;
    font-weight: 500;
    color: #333;
    cursor: pointer;
    position: relative;
    text-align: right;
}
.faq-header::after {
    content: '+';
    position: absolute;
    left: 25px;
    font-size: 24px;
    color: #0884b6;
    transition: transform 0.3s ease;
}
.faq-item.active .faq-header::after {
    transform: rotate(45deg);
}
.faq-content {
    padding: 0 25px;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-out, padding 0.3s ease-out;
    text-align: right;
    font-size: 16px;
    color: #555;
    direction: rtl;
}
.faq-item.active .faq-content {
    max-height: 200px; /* Adjust as needed for content height */
    padding-bottom: 20px;
}

.jobs-section {
    max-width: 1200px;
    margin: 40px auto;
    padding: 0 20px;
    font-family: Vazirmatn, sans-serif;
}

.jobs-section h2 {
    text-align: right;
    margin-bottom: 30px;
    font-size: 22px;
    color: #222;
}

.anser {
    text-align: right;
    margin-bottom: 30px;
    font-size: 22px;
    max-width: 1200px;
    margin: 40px auto;
    margin-right: 100px;
    padding: 0 20px;
    font-family: Vazirmatn, sans-serif;
    font-weight: 700;
}

/* == دپارتمان‌بندی فرصت‌های شغلی == */
.jobs-section {
    max-width: 1200px;
    margin: 40px auto;
    padding: 0 20px;
    font-family: Vazirmatn, sans-serif;
}

.jobs-section h2 {
    text-align: right;
    margin-bottom: 30px;
    font-size: 22px;
    color: #222;
    
}
.anser {
    text-align: right;
    margin-bottom: 30px;
    font-size: 22px;
    max-width: 1200px;
    margin: 40px auto;
    margin-right: 100px;
    padding: 0 20px;
    font-family: Vazirmatn, sans-serif;
    font-weight: 700;
}
    

.job-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(460px, 1fr));
    gap: 20px;
}

.job-card {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border: 1px solid #dcdcdc;
    background: #fff;
    border-radius: 8px;
    padding: 16px 20px;
    box-shadow: 0 1px 2px rgba(0,0,0,0.05);
}

.job-card h3 {
    margin: 0 0 8px 0;
    font-size: 16px;
    color: #333;
}

.job-card p {
    margin: 2px 0;
    font-size: 14px;
    color: #555;
}

.job-btn {
    display: inline-block;
    background-color: #5698c8;
    color: #fff;
    text-decoration: none;
    border-radius: 6px;
    padding: 8px 16px;
    transition: background 0.2s ease;
    font-size: 14px;
}

.job-btn:hover {
    background-color: #0c1e44;
}


/* Responsive adjustments */
@media (max-width: 768px) {
    .header-banner h1 { font-size: 30px; }
    .header-banner p { font-size: 16px; }
    .counter-section .large-number { font-size: 56px; }
    .section-title { font-size: 28px; }
    .step-boxes, .value-boxes, .benefit-boxes {
        grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    }
    .gallery-images-wrapper {
        grid-template-columns: 1fr;
    }
    .small-gallery-images {
        grid-template-columns: 1fr;
    }
    .faq-item { width: 95%; }

    .job-card{
        flex-direction:column;
        align-items:flex-start;
        gap:8px;
    }
    .job-btn{
        align-self:flex-end;
    }
}
@media (max-width: 576px) {
    .header-banner { padding: 40px 15px; }
    .header-images-grid { grid-template-columns: 1fr; }
    .step-box, .value-box, .benefit-box { padding: 20px; min-height: 150px; }
    .step-box img, .value-box img, .benefit-box img { width: 50px; height: 50px; margin-bottom: 15px; }
    .btn-join { padding: 12px 25px; font-size: 15px; }
    .faq-header { font-size: 16px; }
    .faq-item.active .faq-content { max-height: 260px; }
}