::-webkit-scrollbar {
  width: 5px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: var(--accent);
  border-radius: 15px;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:'Cairo',sans-serif;
  background:var(--bg);
  color:#e9eef2;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

.navbar{
  position:fixed;top:0;left:0;right:0;
  z-index:50;
  backdrop-filter:blur(6px);
  background: linear-gradient(180deg, rgba(10,12,14,0.6), rgba(10,12,14,0.35));
  border-bottom:1px solid rgba(255,255,255,0.02);
}
.nav-inner{
  max-width:1200px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;padding:14px 20px;
}
.brand{display:flex;gap:10px;align-items:center}
.logo-icon{font-size:20px}
.logo-text{font-weight:700;color:var(--accent);font-size:18px}

.nav-links{display:flex;gap:20px;align-items:center}
.nav-links a{color:var(--muted);text-decoration:none;font-weight:500;padding:8px;border-radius:8px;transition:color .2s}
.nav-links a:hover{color:#fff}

.actions{display:flex;align-items:center;gap:10px}
.btn-cta{background:var(--accent);color:#0b0e12;padding:8px 14px;border-radius:9px;text-decoration:none;font-weight:700}
.burger{display:none;background:transparent;border:0;color:var(--accent);font-size:22px;cursor:pointer}

.hero{
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding-top:76px;
  position:relative;
  overflow:hidden;
  background:linear-gradient(90deg, rgba(5,6,8,0.95), rgba(15,16,18,0.9));
}
.hero-overlay{
  position:absolute;inset:0;
  background: linear-gradient(90deg, rgba(0,0,0,0.55) 40%, rgba(0,0,0,0.75));
  pointer-events:none;
  z-index:1;
}

.hero-container{
  max-width:1200px;width:100%;margin:auto;display:flex;gap:40px;align-items:center;padding:40px;
  position:relative;z-index:2;
}
.hero-text{flex:1;max-width:650px}
.hero-text h1{font-size:46px;margin:0 0 18px;line-height:1.05;color:#fff}
.hero-text p{color:var(--muted);font-size:18px;margin-bottom:24px}
.hero-actions{display:flex;gap:12px;flex-wrap:wrap}
.btn-primary{
  background:var(--accent);
  color:#071017;
  padding:12px 22px;
  border-radius:12px;
  text-decoration:none;
  font-weight:700;
  box-shadow:0 6px 20px rgba(19, 20, 20, 0.05);
}
.btn-outline{
  border:1px solid rgba(255,255,255,0.06);
  color:var(--muted);padding:10px 18px;border-radius:10px;text-decoration:none;
}

.hero-visual{
  width:480px;height:620px;border-radius:12px;
  background-image: url('https://i.ibb.co/PGpzgBKx/pexels-photo-120049-120049.jpg');
  background-size: cover;background-position: center right;
  box-shadow: 0 10px 40px rgba(0,0,0,0.6);
  flex-shrink:0;
  transform: translateX(30px);
}

.services{background:linear-gradient(180deg,#0d1116,#0b0e13);padding:80px 20px}
.container{max-width:1200px;margin:0 auto}
.section-title{color:var(--accent);font-size:26px;margin-bottom:22px;text-align:center}
.cards{display:flex;gap:20px;justify-content:center;flex-wrap:wrap}
.card{
  width:300px;background:var(--panel);padding:18px;border-radius:12px;box-shadow:0 8px 30px rgba(0,0,0,0.6);
  transition:transform .35s, box-shadow .35s;
}
.card:hover{transform:translateY(-8px);box-shadow:0 18px 40px rgba(0,0,0,0.7)}
.card img{width:100%;height:160px;object-fit:cover;border-radius:8px;margin-bottom:14px}
.card h3{color:var(--accent);margin:0 0 8px}
.card p{color:var(--muted);margin:0}
.card-btn { display: inline-block; margin-top: 15px; background-color: var(--accent); color: #000; text-decoration: none; padding: 10px 20px; border-radius: 8px; font-weight: bold; transition: 0.3s; } .card-btn:hover { background-color: var(--accent); transform: translateY(-3px); }

.about { padding: 60px 10%; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 60px;} .about-container { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; } .about-image img { width: 100%; border-radius: 20px; box-shadow: 0 0 30px rgba(255, 255, 255, 0.05); object-fit: cover; } .about-content h2 { font-size: 32px; color: #fff; margin-bottom: 15px; } .about-content h2 span { color: var(--accent); } .about-content p { line-height: 1.8; color: #ccc; margin-bottom: 25px; } .service-buttons { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 25px; } .service-buttons button {font-family: 'Cairo'; background-color: #1a1a1a; border: 1px solid #333; color: #fff; padding: 10px 18px; border-radius: 10px; font-size: 14px; cursor: pointer; transition: 0.3s; } .service-buttons button:hover { background-color: var(--accent); color: #000; } .cta-btn { background-color: var(--accent); color: #000; text-decoration: none; padding: 12px 25px; border-radius: 10px; font-weight: 700; display: inline-flex; align-items: center; gap: 8px; transition: 0.3s; } .cta-btn:hover { background-color: var(--accent); } /* Responsive */ @media (max-width: 992px) { .about-container { grid-template-columns: 1fr; text-align: center; } .about-image img { width: 90%; margin: auto; } .service-buttons { justify-content: center; } }
.section-header { text-align: center; margin-bottom: 60px; } .section-header h2 { font-size: 32px; color: var(--accent); margin-bottom: 10px; font-weight: 700; }

.footer { background-color: #0f0f0f; color: #ccc; padding: 30px 10% 3px; border-top: 2px solid #222; } .footer-container { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 40px; margin-bottom: 40px; } .footer-logo h2 { color: #fff; font-size: 26px; margin-bottom: 10px; } .footer-logo h2 span { color: var(--accent); } .footer-logo p { color: #aaa; line-height: 1.7; } .footer-contact h3, .footer-social h3 { color: var(--accent); margin-bottom: 15px; } .footer-contact ul { list-style: none; padding: 0; } .footer-contact li { margin-bottom: 10px; } .footer-contact a { color: #ccc; text-decoration: none; transition: 0.3s; } .footer-contact a:hover { color: var(--accent); } .footer-social .social-icons { display: flex; gap: 15px; } .footer-social a { font-size: 22px; text-decoration: none; color: #ccc; transition: 0.3s; } .footer-social a:hover { color: var(--accent); } .footer-bottom { text-align: center; border-top: 1px solid #222; padding-top: 2px; font-size: 14px; color: #777; } .footer-bottom span { color: var(--accent); } @media (max-width: 768px) { .footer-container { text-align: center; } .footer-social .social-icons { justify-content: center; } }


.whatsapp-float{z-index: 11111;position: fixed; bottom: 20px; left: 20px; background: #25D366; color: white; border-radius: 50%; font-size: 26px; width: 55px; height: 55px; display: flex; align-items: center; justify-content: center; text-decoration: none; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.4); transition: 0.3s}

.whatsapp-icon {
  width: 35px;
  height: 35px;
}

@media (max-width: 768px) {
  .whatsapp-icon {
    width: 30px;
    height: 30px;
  }
}


.fade-up, .fade-left { opacity:0; transform: translateY(20px); transition: all .8s cubic-bezier(.2,.9,.2,1) }
.fade-left{ transform: translateX(30px) }
.show { opacity:1; transform: translate(0,0) }

@media (max-width:1000px){
  .hero-visual{width:380px;height:520px}
  .hero-text h1{font-size:38px}
}
@media (max-width:768px){
  .nav-links{display:none;position:fixed;top:64px;right:0;left:0;background:rgba(8,10,12,0.96);flex-direction:column;padding:18px;gap:12px}
  .nav-links.show{display:flex}
  .burger{display:block}
  .btn-cta{display:none}
  .hero-container{flex-direction:column-reverse;gap:20px;padding:20px}
  .hero-visual{width:100%;height:420px;border-radius:10px;transform:none}
  .hero-text h1{font-size:28px}
  .card{width:100%}
}

a{cursor:pointer}