/* webuyly */

.title{
      font-size: clamp(24px, 2.2vw, 36px);
      font-weight: 800;
      letter-spacing:.3px;
      display:flex; align-items:center; gap:10px;
    }
    
    .title .dot{ width:10px; height:10px; border-radius:999px; background:var(--accent); box-shadow:0 0 0 6px var(--ring); display:inline-block;}
    .subtitle{ color:var(--muted); font-size:14px }

    /* GRID: أربع صور في كل سطر على الشاشات الكبيرة */
    .grid{
      display:grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 18px;
    }

    /* بطاقة المنتج */
    .card{
      background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.02));
      border: 1px solid rgba(148,163,184,.15);
      border-radius: 10px;
      overflow:hidden;
      transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
      box-shadow: 0 6px 24px rgba(0,0,0,.25);
    }
    .card:hover{
      transform: translateY(-4px);
      border-color: rgba(34,211,238,.35);
      box-shadow: 0 10px 32px rgba(34,211,238,.15);
    }
    .thumb{
      aspect-ratio: 1 / 1; /* مربع */
      width:100%;
      display:block;
      background: #0b1220;
    }
    figcaption{
      padding: 12px 14px 14px;
      font-size: 15px;
      font-weight: 600;
      display:flex; align-items:center; justify-content:space-between; gap:8px;
    }
    figcaption span{
      color: var(--muted);
      font-size: 12px;
      font-weight: 500;
    }
    .product_title {
        font-size:18px;
        text-align:center;
        margin-right:10px;
        margin-left:10px;
        padding-top:10px;
        padding-right:10px;
        padding-left:10px;
        padding-bottom:10px;
    }
     .product_title h4{
         color:#03163d;
        font-size:18px;
     }

    /* استجابة للشاشات المختلفة */
    @media (max-width: 1100px){
      .grid{ grid-template-columns: repeat(3, 1fr); }
    }
    @media (max-width: 800px){
      .grid{ grid-template-columns: repeat(2, 1fr); }
    }
    @media (max-width: 520px){
      .grid{ grid-template-columns: 1fr; }
      .logo a {    font-size: 18px !important;    }
      
      .section-heading {
      text-align: center;    margin-bottom: 30px; }
    }  
      

    /* شريط بحث اختياري للتجريب */
    .toolbar{
      display:flex; gap:10px; margin: 8px 0 22px; flex-wrap: wrap;
    }
    .search{
      flex: 1 1 260px;
      background: rgba(2,6,23,.5);
      border: 1px solid rgba(148,163,184,.2);
      border-radius: 12px;
      padding: 10px 12px;
      color: var(--text);
      outline: none;
    }
    
    
    
/* -------------Pagination numbers Off Pages -------------------*/
.pagination-numbers {
	margin: 5px auto 25px;
	font-family : Tahoma,Arial;
	font-size :15px;
}

.pagination-numbers .page-numbers {
	display: inline-block;
	background-color:#f5a425;
	color:#fff;
	padding: 5px 10px;
	font-weight:bold;
	webkit-transition: all .3s ease-in-out;
	-moz-transition: all .3s ease-in-out;
	-o-transition: all .3s ease-in-out;
	transition :all .3s ease-in-out
}

.pagination-numbers .page-numbers.curent{
	background-color:#fda638;
}
.pagination-numbers .page-numbers:hover{
	text-decoration:none;
	background-color:#06386d;
}
/*---------------------------------------------*/
/*---------------------------------------------*/
/*---------------------------------------------*/

/* -------------Pagination numbers web --------*/
/*--------------WEB DESIGN ---------------------*/
.pagination-numbers-web {
	margin: 5px auto 25px;
	font-family : Tahoma,Arial;
	font-size :15px;
}

.pagination-numbers-web .page-numbers {
	display: inline-block;
	background-color:#ff8f9d;
	color:#fff important;
	padding: 5px 10px;
	font-weight:bold;
	webkit-transition: all .3s ease-in-out;
	-moz-transition: all .3s ease-in-out;
	-o-transition: all .3s ease-in-out;
	transition :all .3s ease-in-out
}

.pagination-numbers-web .page-numbers.curent{
	background-color:#f37ba2;
}
.pagination-numbers-web .page-numbers:hover{
	text-decoration:none;
	background-color:#f37ba2;
}
/*---------------------------------------------*/
/*---------------------------------------------*/
/*---------------------------------------------*/


/* -------------Pagination numbers apps --------*/
/*--------------apps ---------------------------*/
.pagination-numbers-apps {
	margin: 5px auto 25px;
	font-family : Tahoma,Arial;
	font-size :15px;
}

.pagination-numbers-apps .page-numbers {
	display: inline-block;
	background-color:#e60e18;
	color:#fff;
	padding: 5px 10px;
	font-weight:bold;
	webkit-transition: all .3s ease-in-out;
	-moz-transition: all .3s ease-in-out;
	-o-transition: all .3s ease-in-out;
	transition :all .3s ease-in-out
}

.pagination-numbers-apps .page-numbers.curent{
	background-color:#e60e18;
}
.pagination-numbers-apps .page-numbers:hover{
	text-decoration:none;
	background-color:#5d50c6;
}
/*---------------------------------------------*/
/*---------------------------------------------*/
/*---------------------------------------------*/

/* -------------Pagination numbers seo --------*/
/*--------------SEO ---------------------------*/
.pagination-numbers-seo {
	margin: 5px auto 25px;
	font-family : Tahoma,Arial;
	font-size :15px;
}

.pagination-numbers-seo .page-numbers {
	display: inline-block;
	background-color:#8cc152;
	color:#fff;
	padding: 5px 10px;
	font-weight:bold;
	webkit-transition: all .3s ease-in-out;
	-moz-transition: all .3s ease-in-out;
	-o-transition: all .3s ease-in-out;
	transition :all .3s ease-in-out
}

.pagination-numbers-seo .page-numbers.curent{
	background-color:#8cc152;
}
.pagination-numbers-seo .page-numbers:hover{
	text-decoration:none;
	background-color:#5d50c6;
}
/*---------------------------------------------*/
/*---------------------------------------------*/
/*---------------------------------------------*/

/* -------------Pagination numbers mob --------*/
/*--------------mobile ---------------------------*/
.pagination-numbers-mob {
	margin: 5px auto 25px;
	font-family : Tahoma,Arial;
	font-size :15px;
}

.pagination-numbers-mob .page-numbers {
	display: inline-block;
	background-color:#5d50c6;
	color:#fff;
	padding: 5px 10px;
	font-weight:bold;
	webkit-transition: all .3s ease-in-out;
	-moz-transition: all .3s ease-in-out;
	-o-transition: all .3s ease-in-out;
	transition :all .3s ease-in-out
}

.pagination-numbers-mob .page-numbers.curent{
	background-color:#5d50c6;
}
.pagination-numbers-mob .page-numbers:hover{
	text-decoration:none;
	background-color:#f3b50a;
}
/*---------------------------------------------*/
/*---------------------------------------------*/
/*---------------------------------------------*/

/* -------------Pagination numbers any  --------*/
/*--------------any---------------------------*/
.pagination-numbers-any {
	margin: 5px auto 25px;
	font-family : Tahoma,Arial;
	font-size :15px;
}

.pagination-numbers-any .page-numbers {
	display: inline-block;
	background-color:#f3b50a;;
	color:#fff;
	padding: 5px 10px;
	font-weight:bold;
	webkit-transition: all .3s ease-in-out;
	-moz-transition: all .3s ease-in-out;
	-o-transition: all .3s ease-in-out;
	transition :all .3s ease-in-out
}

.pagination-numbers-any .page-numbers.curent{
	background-color:#f3b50a;
}
.pagination-numbers-any .page-numbers:hover{
	text-decoration:none;
	background-color:#5d50c6;
}
/*---------------------------------------------*/
/*---------------------------------------------*/
/*---------------------------------------------*/


 




/**
* ***********    POST-PAGE   ************
* ***********     CSS        ************
*/
 


.post-page {

    padding-top:150px;
    padding-right:20px;
    padding-left:20px;
    padding-bottom:30px;
    
}


  .post-title-page{
    border: 1px solid #d8d8d8; 
    font-size:20px;
    color:#fff !important;
   	background-color:#007bff;
   	padding-top:20px;
   	padding-bottom:20px;
   	margin-bottom:20px;
   
}

.post-title-page a {
     color:#ffc107 !important;
     
}

.post-title-page a:hover {
     color:#fff !important;
     
}
 .post-page-content{
    margin-top:80px;
    border: 1px solid #d8d8d8;
    
}
 .post-content {
     padding:20px 20px 20px 20px;
 }
 .post-content p {
     font-size :16px;
     text-align: justify;
     color:#7c7e81;
      
 }
 
 .post-content h3 {
    
     text-align: justify;
    
      
 }
.post-page .main-post img {
	display: block;
	width:100%;
	height: auto;
	margin-left: auto;
    margin-right: auto;
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

.post-page .main-post h3 {
	margin : 0 0 10px;
	font-size :20px;
	font-weight:bold;
	color:#777;
	letter-spacing: -1px;
}

 .post-page .main-post h2 {
	margin : 0 0 10px;
	font-size :22px;
	font-weight:bold;
	color:#064acb;
	letter-spacing: -1px;
}




 
.post-page .main-post .post-content h2,
.post-page .main-post .post-content h3,
.post-page .main-post .post-content h4,
.post-page .main-post .post-content h5,
.post-page .main-post .post-content h6
 {
	
		color :#064acb;
	}


.post-page .main-post i {
	color :#777;
}

.post-sidebar-page {
     border: 1px solid #d8d8d8;
     margin:5px 5px 5px 5px;
     padding:5px 5px 5px 5px;
}
.post-sidebar-page .post-sidebar-page-title{
    padding:10px 10px 10px 10px;
     background-color:#064acb;
     color:#fff;
}
.post-sidebar-page h3 {
    padding-top:5px;
    font-size:18px;
   
    text-align:center;
}
.post-sidebar-page .post-sidebar-page-content{
    padding:5px 5px 5px 5px;
}
.post-sidebar-page p {
 text-align: justify;
 font-size:16px;
 color:#6c757d;
}

 
/*--------------------------------------
phone number
---------------------------------------*/

/* -------------------------------
:: baunce animation 
------------------------------- */
.phone:hover{
    color:#fff !important;
    background:#f5a425;
}
.img-sidebar {
 
    border: 1px solid #d8d8d8;
  margin: 10px 5px 10px 5px;
  
    }
  .img-sidebar img {
        padding: 10px 10px 10px 10px;
  } 
    
.bounce {
    border: 1px solid #d8d8d8;
 
    padding: 15px 5px 5px 10px;
     
   
    
    font-size:18px;
    width: 100%;
    font-weight: 700;
   
    display: inline-flex;
   
    justify-content: center;
    -webkit-box-reflect: below -20px linear-gradient(transparent, #211e1e2e);
}
.bounce span {
    text-align:left;
    display: inline-flex;
    color: #ff8f9c;
    font-family: "Play", sans-serif;
    animation: bounce 1s infinite;
}
@keyframes bounce {
    0%,
    50%,
    100% {
        transform: translateY(0);
    }
    25% {
        transform: translateY(-20px);
    }
}
.ten span:nth-of-type(1) {
    animation-delay: 0.1s;
}
.ten span:nth-of-type(2) {
    animation-delay: 0.2s;
}
.ten span:nth-of-type(3) {
    animation-delay: 0.3s;
}
.ten span:nth-of-type(4) {
    animation-delay: 0.4s;
}
.ten span:nth-of-type(5) {
    animation-delay: 0.5s;
}
.ten1{margin-left:20px;}
.footer-style {
    background-color:#152036;
    color:#fff;
    padding-top:20px;
    padding-bottom:10px;
    font-size:16px;
}
 .footer-style a {
     color:#f5a425;
 }

/*---------------------------*/
 
  
    :root{
      --bg:#0f172a;          /* slate-900 */
      --card:#0b1227;        /* deep slate */
      --text:#e5e7eb;        /* gray-200 */
      --muted:#94a3b8;       /* slate-400 */
      --brand:#06b6d4;       /* cyan-500 */
      --brand-600:#0891b2;   /* cyan-600 */
      --accent:#22c55e;      /* green-500 */
      --warning:#f59e0b;     /* amber-500 */
      --danger:#ef4444;      /* red-500 */
      --ring: 0 0 0 4px rgba(6,182,212,.2);
      --radius: 20px;
    }
    
 

    /* layout */
    .container{max-width:1100px;margin:0 auto;padding:24px}
    header{
      position:sticky;top:0;z-index:50;backdrop-filter: blur(8px);
      background: linear-gradient(180deg, rgba(15,23,42,.9), rgba(15,23,42,.6));
      border-bottom:1px solid rgba(148,163,184,.15);
    }
    .nav{display:flex;align-items:center;justify-content:space-between;gap:16px}
    .brand{display:flex;align-items:center;gap:12px}
    .brand-logo{width:44px;height:44px;border-radius:12px;background:linear-gradient(135deg,var(--brand),#38bdf8);display:grid;place-items:center;box-shadow:0 10px 30px rgba(6,182,212,.25)}
    .brand-logo span{font-weight:800;color:#002d36}
    .brand-name{font-weight:800;font-size:1.1rem}
    .nav-actions{display:flex;gap:10px;align-items:center}
    .btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:10px 16px;border-radius:999px;border:1px solid rgba(148,163,184,.25);color:var(--text);background:#0b1227}
    .btn:hover{box-shadow:var(--ring);transform:translateY(-1px)}
    .btn.primary{background:linear-gradient(135deg,var(--brand),#38bdf8);color:#00242a;border:none}
    .btn.whats{background:#22c55e;color:#03200f;border:none}

    /* hero */
    .hero{padding:56px 0}
    
    .hero-grid{
    display:grid;
    grid-template-columns:1.1fr .9fr;
    gap:28px;align-items:center;
   
        
    }
     
 
    .badge{
        display:inline-flex;
        align-items:center;
        gap:10px;padding:10px 20px;
        border-radius:999px;
        background:rgba(6,182,212,.12);
        border:1px solid rgba(6,182,212,.25);
        font-weight:600;
        font-size:16px;
    }
    h1{font-size:clamp(28px,3.6vw,44px);line-height:1.3;margin:14px 0}
    .hero p{color:var(--muted);margin-top:6px}
    .kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:22px}
    .kpi{background:linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.01));border:1px solid rgba(148,163,184,.37);border-radius:var(--radius);padding:16px;text-align:center}
    .kpi strong{display:block;font-size:1.6rem}
    .hero-card{background:linear-gradient(180deg, rgba(11,18,39,.9), rgba(11,18,39,.7));border:1px solid rgba(148,163,184,.2);border-radius:var(--radius);padding:22px}

    /* sections */
    section{padding:40px 0}
    .section-title{font-size:1.6rem;margin:0 0 14px 0}
    .grid{display:grid;gap:16px}
    .grid.cols-3{grid-template-columns:repeat(3,1fr)}
    .grid.cols-2{grid-template-columns:repeat(2,1fr)}

    .card{background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));border:1px solid rgba(148,163,184,.15);border-radius:var(--radius);padding:18px}
    .chip{display:inline-block;padding:6px 10px;border-radius:999px;background:#e9ecef;border:1px solid rgba(148,163,184,.15);font-size:.9rem}

    /* steps */
    .steps{counter-reset:step}
    .step{position:relative;padding-right:56px}
    .step:before{
      counter-increment:step;content:counter(step);
      position:absolute;right:0;top:0;width:36px;height:36px;border-radius:50%;
      display:grid;place-items:center;font-weight:800;color:#062e36;
      background:linear-gradient(135deg,var(--brand),#38bdf8);
      box-shadow:0 10px 30px rgba(6,182,212,.25)
    }

    /* faq */
    details{background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));border:1px solid rgba(148,163,184,.15);border-radius:16px;padding:14px}
    summary{cursor:pointer;font-weight:700}
    details[open]{box-shadow:var(--ring)}

    /* form */
    form{display:grid;gap:12px}
    label{font-weight:700}
    input,select,textarea{
      width:100%;padding:12px 14px;border-radius:12px;
      border:1px solid rgba(148,163,184,.25);background:#e9ecef;color: #212529;
    }
    input:focus,select:focus,textarea:focus{outline:none;box-shadow:var(--ring);border-color:var(--brand)}
    textarea{min-height:130px;resize:vertical}
    .form-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}

    /* footer */
    footer{border-top:1px solid rgba(148,163,184,.15);padding:22px 0;color:var(--muted)}

    /* responsive */
    @media (max-width: 900px){
      .hero-grid{grid-template-columns:1fr}
      .grid.cols-3{grid-template-columns:repeat(2,1fr)}
    }
    @media (max-width: 640px){
      .grid.cols-3{grid-template-columns:1fr}
      .grid.cols-2{grid-template-columns:1fr}
      .kpis{grid-template-columns:1fr 1fr}
      .form-row{grid-template-columns:1fr}
    }
  /*-----------------------------*/
  .card-contact {
        background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.02));
        margin-top:20px 10px 10px 10px;
         border: 1px solid rgba(148,163,184,.15);
        padding:20px 20px 20px 20px;
       border-radius: 10px;
       overflow:hidden;
      transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
      box-shadow: 0 6px 24px rgba(0,0,0,.25);
  }
  
    
      
      
    
    .card-contact:hover{
      transform: translateY(-4px);
      border-color: rgba(34,211,238,.35);
      box-shadow: 0 10px 32px rgba(34,211,238,.15);
    }
  
  
  
   .card-contact  h2 {
       font-size:20px;
   }
   .card-contact input, select, textarea {
    width: 100%;
    padding: 12px 14px;
    border-radius: 12px;
    border: 1px solid rgba(148, 163, 184, .25);
    background: #e9ecef;
    color: #042e58;
}

  .card-contact .wpcf7-submit {
      text-align:center;
      width:80%;
  }
  .contact-itemx {
      margin-top:20px;
  }
  .location-nassr { 
      margin: 5px 5px 5px 5px;
      padding:5px 5px 5px 5px;
  }
 
  .socials {
    display: flex;              /* يجعل الأيقونات في صف أفقي */
    justify-content: center;    /* يوسّطهم في الصفحة */
    gap: 20px;                  /* مسافة بين الأيقونات */
    margin-top: 20px;
  }

  .socials a {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 55px;
    height: 55px;
    border-radius: 50%;         /* يخلي الشكل دائري */
    text-decoration: none;
    color: #fff;
    font-size: 24px;
    transition: 0.3s ease;
  }

  /* ألوان المنصات */
  .socials a.facebook { background: #1877f2; }
  .socials a.instagram { background: #e4405f; }
  .socials a.youtube { background: #ff0000; }
  .socials a.linkedin { background: #0077b5; }

  /* تأثير عند المرور */
  .socials a:hover {
    transform: translateY(-5px);
    opacity: 0.9;
  }
  
 
.cta {
  display: flex;
  gap: 12px;
  margin-top: 18px;
  flex-wrap: wrap;
}

 

 

.ghost {
  background: #e2e8f0;
  color: #0f172a;
}

.ghost:hover {
  background: #cbd5e1;
}

/* ===== Contact Form 7 Styling ===== */
.wpcf7-form {
  max-width: 600px;
  margin: 30px auto;
  padding: 25px;
  background: #ffffff;
  border-radius: 15px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
  font-family: "Tajawal", Arial, sans-serif;
  direction: rtl; /* للغة العربية */
}

/* تنسيق الحقول */
.wpcf7-form p {
  margin-bottom: 15px;
}

.wpcf7-form label {
  display: block;
  font-weight: bold;
  margin-bottom: 6px;
  color: #333;
}
.sp-form  .wpcf7-form label{
    color: #fff;
}

.wpcf7-form input[type="text"],
.wpcf7-form input[type="email"],
.wpcf7-form input[type="tel"],
.wpcf7-form textarea {
  width: 100%;
  padding: 12px 15px;
  border: 1px solid #ddd;
  border-radius: 10px;
  font-size: 15px;
  background: #f9f9f9;
  
  transition: all 0.3s ease-in-out;
}

/* عند التركيز */
.wpcf7-form input:focus,
.wpcf7-form textarea:focus {
  border-color: #007bff;
  background: #fff;
  box-shadow: 0 0 6px rgba(0,123,255,0.2);
  outline: none;
}

/* زر الإرسال */
.wpcf7-form input[type="submit"] {
  background: linear-gradient(135deg, #007bff, #00c6ff);
  color: #fff;
  font-size: 16px;
  font-weight: bold;
  padding: 12px 25px;
  border: none;
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.3s ease-in-out;
  width: 100%;
}

.wpcf7-form input[type="submit"]:hover {
  background: linear-gradient(135deg, #0056b3, #0090cc);
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(0,0,0,0.1);
}

/* رسائل النجاح أو الخطأ */
.wpcf7-response-output {
  margin-top: 15px;
  padding: 12px;
  border-radius: 10px;
  font-size: 14px;
}

.wpcf7-mail-sent-ok {
  background: #e8f9f0;
  border: 1px solid #34d399;}
  
  .post-content .wp-block-video{
      text-align:center;
 width:100%;}