/* RESET */
* {margin:0; padding:0; box-sizing:border-box; font-family:"Cairo", sans-serif;}
body {background:#ffffff; overflow-x:hidden;}
.container {width:90%; max-width:1300px; margin:auto;}

/* تنسيق الأفتتاحية */
#intro-screen {position:fixed; top:0; left:0; width:100%; height:100%; background:white; display:flex; justify-content:center; align-items:center; flex-direction:column; z-index:9999; animation:introFadeOut 1s ease 3s forwards;}
#intro-screen img {width:160px; opacity:0; animation:introLogo 1.8s ease forwards;}
#intro-bg {position:absolute; width:100%; height:100%; top:0; left:0; background-size:cover; background-position:center; opacity:0.35;}

@keyframes introLogo {0%{opacity:0; transform:scale(0.5);} 100%{opacity:1; transform:scale(1);}}
@keyframes introFadeOut {0%{opacity:1;} 100%{opacity:0; visibility:hidden;}}


/* NAV */
header {background:rgba(255, 255, 255, 0.71); box-shadow:0 4px 20px rgba(0,0,0,0.05); position:relative; top:0; z-index:500; padding:15px 0;}
.nav {display:flex; justify-content:space-between; align-items:center;position: relative;}
.nav-logo {width:130px;}
.nav ul {display:flex; gap:25px; list-style:none;}
.nav a {text-decoration:none; color:#0c1d2e; font-size:17px; transition:0.2s;}
.all-links a {position: relative;z-index: 1;overflow: hidden;padding: 8px 10px;color: #0c1d2e;transition: color 220ms ease;-webkit-tap-highlight-color: transparent;}
.all-links a::before {content: "";position: absolute;left: 50%;top: 50%;transform: translate(-50%, -50%) scale(0.92);transform-origin: center;width: 110%;height: 90%;background: linear-gradient(90deg, rgba(13,27,42,0.92) 0%, rgba(37,69,95,0.92) 100%);border-radius: 8px; z-index: -1;transition: transform 300ms cubic-bezier(.25,.8,.25,1), opacity 260ms ease;box-shadow: 0 6px 14px rgba(13,27,42,0.06);opacity: 0;}
    /* gentle hover/focus effect */
.all-links a:hover,.all-links a:focus {color: #ffffff;}
.all-links a:hover::before,.all-links a:focus::before {transform: translate(-50%, -50%) scale(1);opacity: 1;}
    /* subtle press feedback */
.all-links a:active::before {transform: translate(-50%, -50%) scale(0.985);transition-duration: 120ms;}
   /* Respect users who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
  .all-links a,.all-links a::before {transition: none !important;transform: none !important;opacity: 1 !important;}
}
.btn-nav {background:#0d1b2a; padding:10px 18px; color:white !important; border-radius:8px;}
        /* Mnu butn */
.nav input#menu-toggler {display: none;}
.nav #hamburger-btn {cursor: pointer;display: inline-flex;align-items: center; gap: 6px; }
.nav .all-links {display: flex;align-items: center;}
        /* Close butn */
#menu-toggler { display: none; }
#close-btn {display: none;position: absolute;top: 10px;left: 10px; background: transparent;color: #b21705;border-radius: 6px;padding: 6px;font-weight: 600;font-size: 14px;line-height: 1;cursor: pointer;z-index: 10001;box-shadow: 0 2px 6px rgba(0,0,0,0.08);display: none; }
#close-btn svg { display: block; width: 20px; height: 20px; }
#menu-toggler:checked ~ #close-btn { display: inline-block; }
#menu-toggler:checked ~ #hamburger-btn { display: none; }

/* HERO */
.hero {position: relative; overflow: hidden; height:100vh; display:flex; align-items:center; position:relative; background:#f7fbfd; overflow:hidden;}
.hero-content {position:relative; z-index:3; animation:heroFade 1.6s ease forwards; opacity:0; transform:translateY(40px);position: relative; z-index: 1;}
.hero-title {font-size:46px; color:#0c1d2e; line-height:1.4; margin-bottom:20px;}
.hero-desc {font-size:20px; color:#555; margin-bottom:35px; max-width:550px;}
.hero-btn {display:inline-block; background:#0d1b2a; color:white; padding:14px 30px; font-size:18px; border-radius:10px; text-decoration:none; transition:0.3s;}
.hero-btn:hover {opacity:0.8;}
.hero-animated-bg {position:absolute; top:0; left:0; width:100%; height:100%; opacity:0.18; animation:heroBG 20s linear infinite alternate; background-size:cover;}
.hero-bg-video {position: absolute;top: 0; left: 0; width: 100%; height: 100%;object-fit: cover;z-index: 0;pointer-events: none;}

@keyframes heroFade {100%{opacity:1; transform:translateY(0);}}
@keyframes heroBG {0%{transform:scale(1);} 100%{transform:scale(1.15);} }

/* خدماتنا */

.services {display: grid;grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));gap: 25px;margin-top: 50px;}
.service-card {background: #fff;padding: 30px;border-radius: 14px;box-shadow: 0 5px 20px rgba(0,0,0,0.06);text-align: center;transition: 0.3s;}
.service-card:hover {transform: translateY(-5px);}


/* أعمالنا */

.projects-section {  display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));  margin-top: 50px;  gap: 25px;}
.project-card { background: #fff; padding:30px; border-radius: 16px; box-shadow: 0 5px 20px rgba(0,0,0,0.06); transition: 0.3s; text-align: center;transition: 0.3s;}
.project-card:hover {transform: translateY(-5px);box-shadow: 0 6px 20px #00000025;}
.project-info h2 {margin: 0;font-size: 28px;}
.project-info p {margin: 5px 0;font-size: 16px;}
.testimonial {margin-top: 10px;font-style: italic;background: #f0f7ff;padding: 10px;border-radius: 8px;}
.rating {margin-top: 10px;font-size: 20px;color: #ffbb00;font-weight: bold;}
.client-logo {width: 120px;height: auto;background: #0d1b2a;padding: 15px;border-radius: 12px;display:inline-block;padding: 12px;background: transparent;}
.client-logo img {width: 120px;height: auto;display:block;max-width:100%;filter: none;}


/* contact */

.contact .row {margin: 60px 0 90px;display: flex;max-width: 1200px; width: 100%; align-items:center; justify-content: space-between;direction: ltr; text-align: left}
.contact .row .col {padding: 0 10px; width: calc(100% / 2 - 50px);}
.contact .col p {margin-bottom: 10px;}
.contact .col p i {color: #7a7a7a;margin-right: 10px;}
.contact .col-form input {height: 45px;margin-bottom: 20px;padding: 10px;width: 100%;font-size: 16px;outline: none;border: 1px solid #bfbfbf;text-align: right;}
.contact .col-form textarea {padding: 10px; width: 100%;font-size: 16px; height: 150px;outline: none; resize: vertical; border: 1px solid #bfbfbf;text-align: right;}
.contact .col-form button {margin-top: 10px;padding: 10px 20px;font-size: 17px;color: #fff;border: none;cursor: pointer;border-radius: 5px;background: #0d1b2a;transition: 0.2s ease;text-align: right;}
.contact .col-form button:hover {background: #525252;}
.contact {padding: 90px 8%;text-align: center;}
.contact h2 {font-size: 38px;margin-bottom: 25px;color: #0d1b2a;}
.contact-details {text-align: left;}
#msg {
        margin-top: 10px; padding: 10px; display: none; border-radius: 6px; text-align: center; opacity: 1;transition: opacity 1s ease; /* تأثير التلاشي */
    }
#msg.hide {opacity: 0;}
.success { background: #d4edda; color: #155724; }
.error   { background: #f8d7da; color: #721c24; }
@media screen and (max-width: 860px) {
.content a {font-size: 17px;padding: 9px 20px;}
.contact .row {flex-direction: column;}
.contact .row .col { width: 100%;}
.contact .row .col:last-child { margin-top: 40px;}
}

/* الأسفل */

img.payment-image { content: url('images/Pyment.jpg'); width: 100%; height:auto; display:block; }  
.btn-primary:hover {background: #102c42;}
.section {padding: 70px 6%;text-align: center;}
.section h2 {font-size: 38px;margin-bottom: 25px;color: #0d1b2a;}
footer {background: #0d1b2a;color: #fff;padding: 22px 6%; text-align: center; margin-top: 0px;}

/* Phone */
@media screen and (max-width: 860px) {

  /* nav */
  .nav .all-links {position: fixed;left: -100%;width: 300px;display: block;height: 100vh;top: 75px;background: white;transition: left 0.3s ease;}
  .nav #menu-toggler:checked~.all-links {right: 0;}
  .nav .all-links li {font-size: 18px;margin: 0;padding-right: 10px;  width: 100%;}
  .nav .all-links li a {display: block;border-radius: 18px;width: 100%;}
  .nav #hamburger-btn {display: block;}
  .nav-logo { width:100px; }

  /* hero responsive */
  .hero { height:auto; padding: 80px 5% 40px; }
  .hero-content { text-align:center; margin:auto; }
  .hero-title { font-size:32px; }
  .hero-desc { font-size:16px; max-width:100%; margin-inline:auto 0; color:#444; }

  .hero-btn, .btn-primary, .contact .col-form button { width:100%; display:inline-block; box-sizing:border-box; }

  /* services / projects / contact spacing */
  .services, .projects-section { gap:18px; margin-top:30px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
  .service-card, .project-card { padding:22px; border-radius:12px; }
  .contact { padding:50px 5%; }
  .contact .row { margin: 30px 0 50px; flex-direction:column; text-align:center; }
  .contact .row .col { width:100%; padding:0; }
  
  /* tighten footer */
  
  img.payment-image { content: url('images/Pyment-phone.jpg'); width: 100%; height:auto; display:block; }  
  footer { padding:18px 5%; font-size:15px; }
}

@media screen and (max-width: 480px) {
  header { padding:12px 4%; }
  .hero-title { font-size:28px; }
  .section h2 { font-size:28px; }
}

@media(min-width: 900px) {
  
  #hamburger-btn, #close-btn { display: none !important; }

}


/* ---------------------------
   SCROLL ANIMATION
----------------------------*/
.scroll-animate {
  opacity: 0;
  transform: translateY(30px);
  transition: 2.8s ease;
}

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

/* ---------------------------
   DARK MODE SWITCH
----------------------------*/
#darkToggle {
  background: #0d1b2a;
  color: white;
  border: none;
  padding: 8px 15px;
  border-radius: 50%;
  cursor: pointer;
  transition: 0.3s;
  margin-right: 10px;
}
#darkToggle:hover {
  background: #1f2e3d;
}
body.dark #darkToggle {
  background: #ddd;
  color: #222;
}
/* ---------------------------
      DARK MODE
----------------------------*/
body.dark {
  background: #0e1117;
  color: #e7e7e7;
}

/* جميع البطاقات */
body.dark .service-card,
body.dark .project-card {
  background: #161b22;
  color: #eee;
  box-shadow: 0 5px 20px rgba(0,0,0,0.4);
}

/* النصوص */
body.dark h1,
body.dark h2,
body.dark h3,
body.dark p {
  color: #e4e4e4;
}

/* الهيدر */
body.dark header {
  background: rgba(15, 18, 25, 0.85);
}

/* زر البداية */
body.dark .hero-btn ,.send-btn{
  background: #1f4e79;
}

/* الفوتر */
body.dark footer {
  background: #0a0d13;
}

/* خلفية أقسام مميزة */
body.dark .testimonial {
  background: #1d242f;
}

/* فورم التواصل */
body.dark .col-form input,
body.dark .col-form textarea {
  background: #11151c;
  color: white;
  border-color: #333;
}

/* روابط */
body.dark .all-links a {
  color: #fff !important;
}
/* ==============================
    SOLUTIONS NEW DESIGN
============================== */

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

.solution-card {
  background: #ffffff;
  padding: 28px;
  border-radius: 14px;
  text-align: center;
  box-shadow: 0 4px 15px rgba(0,0,0,0.06);
  transition: 0.3s ease;
  position: relative;
  overflow: hidden;
}

.solution-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 6px 25px rgba(0,0,0,0.10);
}

.icon-box {
  width: 70px;
  height: 70px;
  border-radius: 14px;
  margin: 0 auto 18px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.icon-box i {
  font-size: 32px;
}

.solution-card h3 {
  font-size: 22px;
  margin-bottom: 12px;
  color: #0d1b2a;
}

.solution-card p {
  color: #555;
  line-height: 1.7;
  font-size: 16px;
}

/* Dark mode compatibility */
body.dark .solution-card {
  background: #161b22;
}
body.dark .solution-card h3 {
  color: #eee;
}
body.dark .solution-card p {
  color: #c9c9c9;
}