/*!
Theme Name: raad-electric
Theme URI: http://underscores.me/
Author: Ali Abbaszadeh
Author URI: https://techseo.ir/
Description: Description
Version: 1.0.0
Tested up to: 5.4
Requires PHP: 5.6
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: httpsraadelectric-ir
Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned.

raad-electric is based on Underscores https://underscores.me/, (C) 2012-2020 Automattic, Inc.
Underscores is distributed under the terms of the GNU GPL v2 or later.

Normalizing styles have been helped along thanks to the fine work of
Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/
*/

/*--------------------------------------------------------------
>>> TABLE OF CONTENTS:
----------------------------------------------------------------
# Generic
	- Normalize
	- Box sizing
# Base
	- Typography
	- Elements
	- Links
	- Forms
## Layouts
# Components
	- Navigation
	- Posts and pages
	- Comments
	- Widgets
	- Media
	- Captions
	- Galleries
# plugins
	- Jetpack infinite scroll
# Utilities
	- Accessibility
	- Alignments

--------------------------------------------------------------*/

/*--------------------------------------------------------------
# Generic
--------------------------------------------------------------*/

/* Normalize
--------------------------------------------- */

/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */

/* Document
	 ========================================================================== */

/**
 * 1. Correct the line height in all browsers.
 * 2. Prevent adjustments of font size after orientation changes in iOS.
 */
 @font-face {
    font-family: IRANSans;
    font-style: normal;
    font-weight: 700;
    src: url('assets/fonts/eot/IRANSansWeb(FaNum)_Bold.eot');
    src: url('assets/fonts/eot/IRANSansWeb(FaNum)_Bold.eot?#iefix') format('embedded-opentype'), url('assets/fonts/woff2/IRANSansWeb(FaNum)_Bold.woff2') format('woff2'), url('assets/fonts/woff/IRANSansWeb(FaNum)_Bold.woff') format('woff'), url('assets/fonts/ttf/IRANSansWeb(FaNum)_Bold.ttf') format('truetype');
}
@font-face {
    font-family: IRANSans;
    font-style: normal;
    font-weight: 500;
    src: url('assets/fonts/eot/IRANSansWeb(FaNum)_Medium.eot');
    src: url('assets/fonts/eot/IRANSansWeb(FaNum)_Medium.eot?#iefix') format('embedded-opentype'), url('assets/fonts/woff2/IRANSansWeb(FaNum)_Medium.woff2') format('woff2'), url('assets/fonts/woff/IRANSansWeb(FaNum)_Medium.woff') format('woff'), url('assets/fonts/ttf/IRANSansWeb(FaNum)_Medium.ttf') format('truetype');
}
@font-face {
    font-family: IRANSans;
    font-style: normal;
    font-weight: 300;
    src: url('assets/fonts/eot/IRANSansWeb(FaNum)_Light.eot');
    src: url('assets/fonts/eot/IRANSansWeb(FaNum)_Light.eot?#iefix') format('embedded-opentype'), url('assets/fonts/woff2/IRANSansWeb(FaNum)_Light.woff2') format('woff2'), url('assets/fonts/woff/IRANSansWeb(FaNum)_Light.woff') format('woff'), url('assets/fonts/ttf/IRANSansWeb(FaNum)_Light.ttf') format('truetype');
}
@font-face {
    font-family: IRANSans;
    font-style: normal;
    font-weight: 200;
    src: url('assets/fonts/eot/IRANSansWeb(FaNum)_UltraLight.eot');
    src: url('assets/fonts/eot/IRANSansWeb(FaNum)_UltraLight.eot?#iefix') format('embedded-opentype'), url('assets/fonts/woff2/IRANSansWeb(FaNum)_UltraLight.woff2') format('woff2'), url('assets/fonts/woff/IRANSansWeb(FaNum)_UltraLight.woff') format('woff'), url('assets/fonts/ttf/IRANSansWeb(FaNum)_UltraLight.ttf') format('truetype');
}
@font-face {
    font-family: IRANSans;
    font-style: normal;
    font-weight: 400;
    src: url('assets/fonts/eot/IRANSansWeb(FaNum).eot');
    src: url('assets/fonts/eot/IRANSansWeb(FaNum).eot?#iefix') format('embedded-opentype'), url('assets/fonts/woff2/IRANSansWeb(FaNum).woff2') format('woff2'), url('assets/fonts/woff/IRANSansWeb(FaNum).woff') format('woff'), url('assets/fonts/ttf/IRANSansWeb(FaNum).ttf') format('truetype');
}
*{
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font-weight: 400;
    vertical-align: baseline;
    background: 0 0;
    font-family: IRANSans;
}

 a:visited{
  color: #fff !important;;
 }
:root{
    --navy-950:#0c1526;
    --navy-900:#101d33;
    --navy-800:#16243d;
    --navy-700:#1d3050;
    --gold:#f4b400;
    --gold-light:#ffc93c;
    --copper:#c8703f;
    --copper-light:#e08a54;
    --ink:#ffffff;
    --muted:#aab4c4;
    --muted-dark:#7c8aa0;
    --paper:#f4f6f9;
    --paper-2:#ffffff;
    --line:#e6e9ef;
    --radius:10px;
    --shadow:0 20px 45px -20px rgba(12,21,38,.35);
  }
  *{box-sizing:border-box; margin:0; padding:0;}
  html{scroll-behavior:smooth;}
  body{
    font-family:'Vazirmatn', Tahoma, sans-serif;
    background:var(--paper);
    color:var(--navy-950);
    line-height:1.9;
    overflow-x:hidden;
  }
  img{max-width:100%; display:block;}
  a{color:inherit; text-decoration:none;}
  ul{list-style:none;}
  button{font-family:inherit; cursor:pointer; border:none;}
  .container{max-width:1280px; margin:0 auto; padding:0 32px;}
  .eyebrow{
    display:inline-flex; align-items:center; gap:8px;
    color:var(--gold); font-weight:700; font-size:14px; letter-spacing:.3px;
    margin-bottom:14px;
  }
  .eyebrow::before{content:""; width:22px; height:2px; background:var(--gold); display:inline-block; border-radius:2px;}
  h1,h2,h3{font-weight:800;}
  .btn{
    display:inline-flex; align-items:center; justify-content:center; gap:8px;
    padding:14px 30px; border-radius:6px; font-weight:700; font-size:15px;
    transition:.25s ease;
  }
  .btn-gold{background:var(--gold); color:var(--navy-950);}
  .btn-gold:hover{background:var(--gold-light); transform:translateY(-2px);}
  .btn-outline{background:transparent; color:#fff; border:1.5px solid rgba(255,255,255,.5);}
  .btn-outline:hover{background:rgba(255,255,255,.1); border-color:#fff;}

  /* ===== HEADER ===== */
  .topbar{
    background:var(--navy-950); color:#fff;
    position:sticky; top:0; z-index:100;
    border-bottom:1px solid rgba(255,255,255,.06);
  }
  .topbar .container{
    display:flex; align-items:center; justify-content:space-between;
    height:82px;
  }
  .brand{display:flex; align-items:center; gap:12px;}
  .brand .logo-mark{
    width:70px; height:44px; border-radius:10px;
    /* background:linear-gradient(135deg, var(--gold) 0%, var(--copper) 100%); */
    display:flex; align-items:center; justify-content:center;
    font-weight:900; font-size:20px; color:var(--navy-950);
    box-shadow:0 6px 16px -4px rgba(244,180,0,.5);
  }
  .brand .txt strong{display:block; font-size:18px; font-weight:800;}
  .brand .txt span{display:block; font-size:11.5px; color:var(--muted); font-weight:400;}
  nav.main-nav ul{display:flex; gap:34px; align-items:center;}
  nav.main-nav a{
    font-size:14.5px; font-weight:500; color:#dfe4ec; position:relative; padding:6px 0;
  }
  nav.main-nav a.active{color:var(--gold); font-weight:700;}
  nav.main-nav a:hover{color:var(--gold);}
  .topbar-right{display:flex; align-items:center; gap:22px;}
  .phone-chip{display:flex; align-items:center; gap:10px; font-size:14px; color:#fff;}
  .phone-chip .ic{
    width:34px; height:34px; border-radius:50%; background:rgba(244,180,0,.14);
    display:flex; align-items:center; justify-content:center; color:var(--gold);
  }
  .icon-btn{
    width:34px; height:34px; border-radius:50%; display:flex; align-items:center; justify-content:center;
    background:rgba(255,255,255,.06); color:#fff;
  }

  /* ===== HERO ===== */
  .hero{
    position:relative;
    background:
      linear-gradient(100deg, rgba(10,17,31,.94) 20%, rgba(10,17,31,.55) 55%, rgba(10,17,31,.25) 100%),
      radial-gradient(circle at 80% 30%, #24365a 0%, #0c1526 65%);
    color:#fff; overflow:hidden;
  }
  .hero-inner{
    display:grid; grid-template-columns:1.05fr .95fr; align-items:center; gap:40px;
    min-height:560px; padding:70px 0;
  }
  .hero-visual{
    position:relative; height:440px; border-radius:16px; overflow:hidden;
    background:
      radial-gradient(circle at 30% 20%, rgba(200,112,63,.35), transparent 55%),
      linear-gradient(160deg,#1a2740 0%, #0c1526 70%);
  }
  .cable-strand{position:absolute; border-radius:999px;}
  .hero-visual .strand1{width:420px; height:60px; background:linear-gradient(90deg,#8a4a26,#c8703f 40%,#e6a06a 60%,#8a4a26); left:-40px; top:70px; transform:rotate(-18deg); box-shadow:0 12px 30px rgba(0,0,0,.4);}
  .hero-visual .strand2{width:440px; height:50px; background:linear-gradient(90deg,#22293a,#3a4560 45%,#22293a); left:0; top:150px; transform:rotate(-10deg); box-shadow:0 12px 30px rgba(0,0,0,.4);}
  .hero-visual .strand3{width:400px; height:70px; background:linear-gradient(90deg,#b46a3a,#f0b27a 40%,#b46a3a); left:-20px; top:250px; transform:rotate(-22deg); box-shadow:0 12px 30px rgba(0,0,0,.4);}
  .hero-visual .ring{position:absolute; border-radius:50%; border:10px solid rgba(244,180,0,.15);}
  .hero-visual .ring1{width:180px; height:180px; right:20px; top:30px;}
  .hero-visual .ring2{width:100px; height:100px; right:90px; bottom:40px; border-color:rgba(230,160,106,.25);}

  .hero-text .eyebrow{color:var(--gold-light);}
  .hero-text h1{font-size:44px; line-height:1.35; margin-bottom:18px;}
  .hero-text h1 .accent{color:var(--gold); display:block;}
  .hero-text h3{font-size:19px; font-weight:600; color:var(--muted); margin-bottom:16px;}
  .hero-text p{color:#c3cadb; font-size:15px; max-width:520px; margin-bottom:30px;}
  .hero-actions{display:flex; gap:16px;}

  .hero-nav-arrow{
    position:absolute; top:50%; transform:translateY(-50%);
    width:46px; height:46px; border-radius:50%; background:rgba(255,255,255,.08);
    display:flex; align-items:center; justify-content:center; color:#fff; z-index:5;
    border:1px solid rgba(255,255,255,.15);
  }
  .hero-nav-arrow.left{left:32px;}
  .hero-nav-arrow.right{right:32px;}
  .hero-dots{position:absolute; bottom:26px; left:50%; transform:translateX(-50%); display:flex; gap:8px;}
  .hero-dots span{width:8px; height:8px; border-radius:50%; background:rgba(255,255,255,.3);}
  .hero-dots span.on{background:var(--gold); width:22px; border-radius:5px;}

  /* ===== FEATURE STRIP ===== */
  .feature-strip{background:var(--navy-950); padding-bottom:0;}
  .feature-grid{
    display:grid; grid-template-columns:repeat(5,1fr);
    gap:18px;
    /*transform:translateY(50%);*/
  }
  .feature-card{
    background:var(--navy-800); border:1px solid rgba(255,255,255,.06);
    border-radius:12px; padding:26px 18px; text-align:center;
    box-shadow:var(--shadow);
    transition:.25s;
  }
  .feature-card:hover{background: #e7e6d8; transform:translateY(-4px);}
  .feature-card .fi{
    width:54px; height:54px; margin:0 auto 14px; border-radius:50%;
    background:rgba(244,180,0,.1); color:var(--gold);
    display:flex; align-items:center; justify-content:center;
  }
  .feature-card h4{color:#fff; font-size:15.5px; margin-bottom:8px;}
  .feature-card p{color:var(--muted); font-size:12.5px; line-height:1.8;}

  /* ===== ABOUT / CAPABILITY ===== */
  .capability{padding:150px 0 90px;}
  .cap-grid{display:grid; grid-template-columns:.85fr 1.15fr; gap:56px; align-items:center;}
  .cap-media{position:relative; border-radius:14px; overflow:hidden; box-shadow:var(--shadow);}
  .cap-media .ph{
    height:320px;
    background:
      linear-gradient(160deg, #3a5a86 0%, #24405f 45%, #12233c 100%);
    position:relative;
  }
  .cap-media .ph::before,.cap-media .ph::after{
    content:""; position:absolute; background:#1a3252; opacity:.6;
  }
  .cap-media .ph::before{width:46%; height:60%; left:8%; top:22%; border-radius:4px;}
  .cap-media .ph::after{width:30%; height:40%; right:10%; top:35%; border-radius:4px; background:#274a72;}
  .play-btn{
    position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
    width:66px; height:66px; border-radius:50%; background:rgba(255,255,255,.92);
    display:flex; align-items:center; justify-content:center; color:var(--navy-950);
    box-shadow:0 10px 30px rgba(0,0,0,.35);
  }
  .cap-content h2{font-size:30px; margin-bottom:18px;}
  .cap-content p{color:#4a5568; font-size:15px; margin-bottom:34px;}
  .stat-row{display:grid; grid-template-columns:repeat(4,1fr); gap:20px;}
  .stat{text-align:center; border-right:1px solid var(--line); padding-right:20px;}
  .stat:first-child{border-right:none; padding-right:0;}
  .stat .num{font-size:28px; font-weight:800; color:var(--navy-950);}
  .stat .num span{color:var(--gold);}
  .stat .lbl{font-size:13px; color:#7a8494; margin-top:6px;}
  .stat .stic{color:var(--copper); margin-bottom:8px;}

  /* ===== PRODUCTS ===== */
  .products{padding:90px 0; background:var(--paper-2);}
  .sect-head{display:flex; align-items:center; justify-content:space-between; margin-bottom:40px;}
  .sect-head h2{font-size:28px;}
  .sect-head .more{font-size:14px; font-weight:700; color:var(--copper); display:flex; align-items:center; gap:6px;}
  .prod-track{position:relative;}
  .prod-grid{display:grid; grid-template-columns:repeat(6,1fr); gap:18px;}
  .prod-card{
    border-radius:12px; overflow:hidden; position:relative; box-shadow:0 12px 26px -14px rgba(12,21,38,.25);
    border:1px solid var(--line);
  }
  .prod-card .ph{
    height:auto;
    display:flex; align-items:center; justify-content:center;
    position:relative;
  }
  .prod-card:nth-child(1) .ph{background:linear-gradient(160deg,#3a4560,#1a2233);}
  .prod-card:nth-child(2) .ph{background:linear-gradient(160deg,#5a3a24,#2a1c12);}
  .prod-card:nth-child(3) .ph{background:linear-gradient(160deg,#26364f,#111a29);}
  .prod-card:nth-child(4) .ph{background:linear-gradient(160deg,#3d4a63,#151f30);}
  .prod-card:nth-child(5) .ph{background:linear-gradient(160deg,#4a2f42,#1c1420);}
  .prod-card:nth-child(6) .ph{background:linear-gradient(160deg,#243a4a,#101c26);}
  .prod-ring{width:70px; height:70px; border-radius:50%; border:8px solid rgba(244,180,0,.55); position:relative;}
  .prod-ring::after{content:""; position:absolute; inset:14px; border-radius:50%; background:rgba(255,255,255,.08);}
  .prod-plus{
    position:absolute; top:12px; left:12px; width:30px; height:30px; border-radius:7px;
    background:var(--gold); color:var(--navy-950); display:flex; align-items:center; justify-content:center;
    font-weight:800; font-size:18px;
  }
  .prod-card .cap{
    background:var(--navy-950); color:#fff; text-align:center; padding:14px 6px; font-size:14px; font-weight:600;
  }
  .prod-arrow{
    position:absolute; top:38%; width:40px; height:40px; border-radius:50%;
    background:#fff; box-shadow:0 8px 20px rgba(0,0,0,.15); display:flex; align-items:center; justify-content:center; color:var(--navy-950); z-index:3;
  }
  .prod-arrow.left{left:-20px;}
  .prod-arrow.right{right:-20px;}

  /* ===== CONTACT ===== */
  .contact{
    background:var(--navy-950); color:#fff; padding:80px 0; position:relative; overflow:hidden;
  }
  .contact-grid{display:grid; grid-template-columns:.9fr 1.1fr; gap:50px; align-items:center; position:relative; z-index:2;}
  .contact-media{
    height: auto;
    border-radius:14px;
    position:relative;
    overflow:hidden;
    background:linear-gradient(200deg,#3a2416,#0c1526 65%);
  }
  .contact-media .strand{position:absolute; border-radius:999px;}
  .contact-media .s1{width:340px; height:44px; background:linear-gradient(90deg,#8a4a26,#e6a06a,#8a4a26); top:40px; left:-30px; transform:rotate(18deg);}
  .contact-media .s2{width:340px; height:34px; background:linear-gradient(90deg,#8a4a26,#c8703f,#8a4a26); top:100px; left:-10px; transform:rotate(22deg);}
  .contact-media .s3{width:320px; height:50px; background:linear-gradient(90deg,#8a4a26,#f0c090,#8a4a26); top:160px; left:-20px; transform:rotate(15deg);}
  .contact-content h2{font-size:26px; margin-bottom:10px;}
  .contact-content .sub{color:var(--muted); font-size:14px; margin-bottom:26px;}
  .form-row{display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-bottom:14px;}
  .field{
    background:var(--navy-800); border:1px solid rgba(255,255,255,.08); border-radius:8px;
    display:flex; align-items:center; gap:10px; padding:14px 16px;
  }
  .field input, .field textarea{
    background:transparent; border:none; outline:none; color:#fff; font-family:inherit; font-size:13.5px; width:100%;
  }
  .field textarea{resize:none; height:70px;}
  .field .fic{color:var(--muted-dark); font-size:15px;}
  .field.area{align-items:flex-start; padding-top:16px;}
  .send-btn{margin-top:6px;}

  /* ===== CLIENTS ===== */
  .clients{padding:60px 0; background:var(--paper-2); text-align:center;}
  .clients h3{font-size:22px; margin-bottom:6px;}
  .clients p{color:#7a8494; font-size:13.5px; margin-bottom:36px;}
  .client-row{display:flex; align-items:center; justify-content:space-between; gap:14px;}
  .client-logo{
    flex:1; height:66px; border:1px solid var(--line); border-radius:8px;
    display:flex; align-items:center; justify-content:center;
    color:#39445a; font-weight:700; font-size:13px; background:#fff;
  }

  /* ===== QUALITY ===== */
  .quality{background:var(--navy-950); color:#fff; padding:90px 0;}
  .qual-head{max-width:640px; margin-bottom:44px;}
  .qual-head h2{font-size:28px; margin-bottom:16px;}
  .qual-head p{color:var(--muted); font-size:14.5px;}
  .qual-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:20px;}
  .qual-card{
    background:var(--navy-800); border:1px solid rgba(255,255,255,.06); border-radius:12px; padding:28px 20px;
  }
  .qual-card .tag{color:var(--gold); font-size:11.5px; font-weight:800; letter-spacing:1px; margin-bottom:14px; display:block;}
  .qual-card .qi{
    width:48px; height:48px; border-radius:10px; background:rgba(244,180,0,.1); color:var(--gold);
    display:flex; align-items:center; justify-content:center; margin-bottom:16px;
  }
  .qual-card p{font-size:13.5px; color:#c3cadb; line-height:1.85;}

  /* ===== DEVELOPMENT ===== */
  .development{padding:90px 0; background:var(--paper-2);}
  .dev-grid{display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center;}
  .dev-content h2{font-size:28px; margin-bottom:18px;}
  .dev-content p{color:#4a5568; font-size:15px; margin-bottom:28px;}
  .dev-media{display:grid; grid-template-columns:1fr 1fr; gap:16px;}
  .dev-media .ph{height:230px; border-radius:12px; box-shadow:var(--shadow);}
  .dev-media .ph1{background:linear-gradient(160deg,#3a5a86,#12233c);}
  .dev-media .ph2{background:linear-gradient(160deg,#5a3a24,#1c1210);}

  /* ===== FOOTER ===== */
  footer{background:var(--navy-950); color:#c3cadb; padding-top:70px;}
  .foot-grid{display:grid; grid-template-columns:1.3fr 1fr 1fr 1.3fr; gap:40px; padding-bottom:50px; border-bottom:1px solid rgba(255,255,255,.06);}
  .foot-brand .brand{margin-bottom:16px;}
  .foot-brand p{font-size:13px; color:var(--muted-dark);  line-height:1.9;}
  .foot-col h5{color:#fff; font-size:15.5px; margin-bottom:20px;}
  .foot-col ul li{margin-bottom:12px; font-size:13.5px;}
  .foot-col ul li a:hover{color:var(--gold);}
  .foot-contact li{display:flex; gap:10px; font-size:13.5px; margin-bottom:16px; align-items:flex-start;}
  .foot-contact .fic{color:var(--gold); margin-top:2px;}
  .social-row{display:flex; gap:10px; margin-top:18px;}
  .social-row a{
    width:34px; height:34px; border-radius:50%; background:rgba(255,255,255,.06);
    display:flex; align-items:center; justify-content:center; font-size:13px;
  }
  .foot-bottom{padding:20px 0; text-align:center; font-size:12.5px; color:var(--muted-dark);}

  @media (max-width:1100px){
    nav.main-nav{display:none;}
    .hero-inner{grid-template-columns:1fr;}
    .hero-visual{order:-1; height:280px;}
    .feature-grid{grid-template-columns:repeat(3,1fr);}
    .cap-grid, .contact-grid, .dev-grid{grid-template-columns:1fr;}
    .prod-grid{grid-template-columns:repeat(3,1fr);}
    .qual-grid{grid-template-columns:repeat(2,1fr);}
    .foot-grid{grid-template-columns:1fr 1fr;}
    .form-row{grid-template-columns:1fr;}
    .client-row{flex-wrap:wrap;}
    .client-logo{flex:1 1 30%;}
  }
  @media (max-width:640px){
    .feature-grid, .prod-grid, .qual-grid, .foot-grid{grid-template-columns:1fr 1fr;}
    .stat-row{grid-template-columns:1fr 1fr;}
    .hero-text h1{font-size:32px;}
  }
  label.gfield_label.gform-field-label {
    color: #f4b400;
}

input#gform_submit_button_1 {
    margin-top: 6px;
    background: var(--gold);
    color: var(--navy-950);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14px 30px;
    border-radius: 6px;
    font-weight: 700;
    font-size: 15px;
    transition: .25s ease;
}


.foot-bottom a {
    color: var(--gold);
    font-weight: bold;
    text-decoration: underline;
}

.foot-bottom a:visited {
    color: var(--gold);
    font-weight: bold;
    text-decoration: underline;
}
.raad-process-grid {
    margin-bottom: 9px;
}



/* ===================== FEATURE STRIP (بخش ۲) ===================== */
.feature-strip {
    padding: 50px 0;
    background: #f7f8fa;
}

/* ---- دسکتاپ: همان ۵ ستون قبلی ---- */
.feature-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 18px;
    align-items: stretch;
}

.feature-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    background: #fff;
    border: 1px solid #eef0f4;
    border-radius: 16px;
    padding: 26px 18px;
    box-shadow: 0 14px 34px -26px rgba(12, 21, 38, .25);
    transition: transform .2s, box-shadow .2s;
    height: 100%;
    min-width: 0;
}

.feature-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 20px 40px -20px rgba(12, 21, 38, .28);
}

.feature-card .fi {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(244, 180, 0, .12);
    color: var(--gold, #f4b400);
    margin-bottom: 14px;
    flex: 0 0 auto;
}

.feature-card h4 {
    font-size: 14.5px;
    font-weight: 800;
    color: #0c1526;
    margin: 0 0 8px;
    line-height: 1.6;
}

.feature-card p {
    font-size: 13px;
    line-height: 1.85;
    color: #4a5568;
    margin: 0;
    word-break: break-word;
}

/* ============================================================
   تبلت و موبایل: همه‌ی کارت‌ها داخل یک باکس زیبا، هر سطر یکی
   ============================================================ */
@media (max-width: 1024px) {

    .feature-strip {
        padding: 32px 0;
        background: #f7f8fa;
    }

    /* تبدیل گرید به یک باکس کارت‌مانند */
    .feature-grid {
        display: flex;
        flex-direction: column;
        gap: 0;                        /* جداکننده‌ها بین آیتم‌ها کار می‌کنند */
        background: #fff;
        border: 1px solid #eef0f4;
        border-radius: 20px;
        box-shadow: 0 20px 50px -30px rgba(12, 21, 38, .3);
        overflow: hidden;
        padding: 0;
    }

    /* هر کارت یک ردیف افقی داخل باکس */
    .feature-card {
        flex-direction: row;
        align-items: center;
        justify-content: flex-start;
        text-align: right;
        gap: 16px;
        padding: 18px 20px;
        border: none;
        border-radius: 0;
        box-shadow: none;
        background: transparent;
        border-bottom: 1px solid #eef0f4;
        transition: background .2s;
        min-width: 0;
    }

    .feature-card:last-child {
        border-bottom: none;
    }

    .feature-card:hover {
        transform: none;
        box-shadow: none;
        background: #fbfbfc;
    }

    .feature-card .fi {
        width: 46px;
        height: 46px;
        margin-bottom: 0;
        flex: 0 0 auto;
        border-radius: 12px;
    }

    /* متن‌ها کنار هم در یک ستون کوچک */
    .feature-card h4 {
        margin: 0 0 4px;
        font-size: 14.5px;
    }

    .feature-card p {
        font-size: 13px;
        line-height: 1.75;
        color: #7a8494;
    }

    /* برای اینکه h4 و p در یک بلوک کنار آیکون قرار بگیرند */
    .feature-card > h4,
    .feature-card > p {
        flex: 1 1 100%;
        min-width: 0;
    }

    /* ساختار ردیف: آیکون + یک بلوک متنی */
    .feature-card {
        display: grid;
        grid-template-columns: 46px 1fr;
        grid-template-areas:
            "icon title"
            "icon desc";
        column-gap: 16px;
        row-gap: 2px;
    }

    .feature-card .fi {
        grid-area: icon;
        align-self: center;
    }

    .feature-card h4 {
        grid-area: title;
        align-self: end;
    }

    .feature-card p {
        grid-area: desc;
        align-self: start;
    }
}

/* موبایل: فشرده‌تر */
@media (max-width: 560px) {
    .feature-strip {
        padding: 24px 0;
    }

    .feature-grid {
        border-radius: 16px;
    }

    .feature-card {
        grid-template-columns: 40px 1fr;
        column-gap: 12px;
        padding: 14px 16px;
    }

    .feature-card .fi {
        width: 40px;
        height: 40px;
    }

    .feature-card .fi svg {
        width: 20px;
        height: 20px;
    }

    .feature-card h4 {
        font-size: 14px;
    }

    .feature-card p {
        font-size: 12.5px;
        line-height: 1.7;
    }
}







/* =========================================================
   RAAD ELECTRIC
   VALUES MATRIX
   5 COLUMNS
   ========================================================= */

.raad-values-list {
    display: grid !important;

    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;

    gap: 18px !important;

    width: 100%;

    align-items: stretch;
}


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

.raad-value-item {

    display: flex !important;

    flex-direction: column !important;

    width: 100%;

    min-width: 0;

    min-height: 0 !important;

    height: 100%;

    background: #ffffff;

    border: 1px solid rgba(16, 44, 67, 0.08);

    border-radius: 18px !important;

    overflow: hidden;

    box-shadow:
        0 8px 25px rgba(16, 44, 67, 0.07);

    transition:
        transform .35s ease,
        box-shadow .35s ease,
        border-color .35s ease;
}


.raad-value-item:hover {

    transform: translateY(-6px);

    border-color: rgba(184, 115, 51, 0.30);

    box-shadow:
        0 18px 40px rgba(16, 44, 67, 0.13);
}


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

.raad-value-image {

    position: relative;

    width: 100% !important;

    height: 150px !important;

    min-height: 150px !important;

    overflow: hidden;

    flex-shrink: 0;
}


.raad-value-image-inner {

    width: 100%;

    height: 100%;
}


.raad-value-image img {

    width: 100% !important;

    height: 100% !important;

    display: block;

    object-fit: cover;

    transition:
        transform .6s ease;
}


.raad-value-item:hover
.raad-value-image img {

    transform: scale(1.06);
}


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

.raad-value-image::after {

    content: "";

    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            180deg,
            rgba(8, 28, 44, 0.02),
            rgba(8, 28, 44, 0.42)
        );

    pointer-events: none;
}


/* =========================================================
   NUMBER
   ========================================================= */

.raad-value-number {

    position: absolute;

    top: 10px;

    right: 10px;

    z-index: 5;

    width: 32px;

    height: 32px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 9px;

    color: #ffffff;

    background:
        rgba(16, 44, 67, 0.72);

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

    backdrop-filter: blur(8px);

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

    font-size: 10px;

    font-weight: 900;
}


/* =========================================================
   ICON
   ========================================================= */

.raad-value-icon {

    position: absolute;

    left: 10px;

    top: 10px;

    z-index: 5;

    width: 32px;

    height: 32px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 50%;

    color: #ffffff;

    background:
        rgba(184, 115, 51, 0.90);

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

    backdrop-filter: blur(8px);

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

    font-size: 13px;

    transition:
        transform .3s ease;
}


.raad-value-item:hover
.raad-value-icon {

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


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

.raad-value-content {

    display: flex;

    flex-direction: column;

    flex: 1;

    padding: 17px 16px 18px !important;

    text-align: right;
}


.raad-value-content h3 {

    margin: 0 !important;

    color: #102c43;

    font-size: 15px !important;

    line-height: 1.65;

    font-weight: 900;

    min-height: 50px;
}


/* =========================================================
   GOLD LINE
   ========================================================= */

.raad-value-line {

    width: 32px;

    height: 2px;

    margin: 8px 0 10px !important;

    border-radius: 20px;

    background:
        linear-gradient(
            90deg,
            #b87333,
            #e2b06c
        );

    transition:
        width .35s ease;
}


.raad-value-item:hover
.raad-value-line {

    width: 58px;
}


/* =========================================================
   TEXT
   ========================================================= */

.raad-value-content p {

    margin: 0 !important;

    color: #6e7982;

    font-size: 11px !important;

    line-height: 1.9 !important;

    text-align: right;
}


/* =========================================================
   DESKTOP
   5 × 3
   ========================================================= */

@media (min-width: 1200px) {

    .raad-values-list {

        grid-template-columns:
            repeat(5, minmax(0, 1fr)) !important;

        gap: 18px !important;
    }

}


/* =========================================================
   LAPTOP
   4 COLUMNS
   ========================================================= */

@media (max-width: 1199px) {

    .raad-values-list {

        grid-template-columns:
            repeat(4, minmax(0, 1fr)) !important;

        gap: 16px !important;
    }

}


/* =========================================================
   TABLET
   3 COLUMNS
   ========================================================= */

@media (max-width: 900px) {

    .raad-values-list {

        grid-template-columns:
            repeat(3, minmax(0, 1fr)) !important;

        gap: 14px !important;
    }


    .raad-value-image {

        height: 135px !important;

        min-height: 135px !important;
    }


    .raad-value-content {

        padding: 14px 13px 15px !important;
    }


    .raad-value-content h3 {

        font-size: 14px !important;

        min-height: 46px;
    }


    .raad-value-content p {

        font-size: 10.5px !important;
    }

}


/* =========================================================
   MOBILE
   2 COLUMNS
   ========================================================= */

@media (max-width: 600px) {

    .raad-values-list {

        grid-template-columns:
            repeat(2, minmax(0, 1fr)) !important;

        gap: 11px !important;
    }


    .raad-value-item {

        border-radius: 14px !important;
    }


    .raad-value-image {

        height: 110px !important;

        min-height: 110px !important;
    }


    .raad-value-content {

        padding: 12px 11px 13px !important;
    }


    .raad-value-content h3 {

        font-size: 13px !important;

        min-height: 43px;
    }


    .raad-value-content p {

        font-size: 9.5px !important;

        line-height: 1.8 !important;
    }


    .raad-value-number,
    .raad-value-icon {

        width: 29px;

        height: 29px;
    }

}


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

@media (max-width: 390px) {

    .raad-values-list {

        gap: 8px !important;
    }


    .raad-value-image {

        height: 95px !important;

        min-height: 95px !important;
    }


    .raad-value-content {

        padding: 10px 9px 11px !important;
    }


    .raad-value-content h3 {

        font-size: 12px !important;

        min-height: 40px;
    }


    .raad-value-content p {

        font-size: 9px !important;
    }

}