:root {
  --primary: #d4af37;
  --background: #000;
  --text: #fff;
  --muted: #ccc;
  --font-main: 'Cairo', sans-serif;
  --font-heading: 'El Messiri', sans-serif;
}

@font-face {
     font-family:'Ib';
    src:url(fonts/Ib.ttf); 
   
}

*{margin:0;padding:0;box-sizing:border-box;}
body{font-family:var(--font-main);color:var(--text);background:var(--background);line-height:1.6;scroll-behavior:smooth;}
a{;}
button{cursor:pointer;}
.container{width:90%;max-width:1200px;margin:0 auto;}
.muted-small{color:var(--muted);font-size:1.0rem; font-weight: 900;}
.muted-small2{color:var(--muted);font-size:0.8rem; font-weight: 900;}
/* Hide native scrollbar completely */
body::-webkit-scrollbar{width:0;background:transparent;}
body{scrollbar-width:none;-ms-overflow-style:none;}

.face
{
    color: #4a69ad;;
}
.whats
{
    color: #25D366;
    font-size: 20px;
    text-decoration:none;
     transition: 0.3s ease;
}
.whats2
{
    color: #25D366;
}
.gmail
{
 color: #D93025;
}
.insta-link {
  text-decoration: none;
  font-weight: bold;
  background: linear-gradient(45deg, #FEDA77, #FA7E1E, #D62976, #962FBF, #4F5BD5);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
font-size: 21px;
  transition: 0.3s ease;
}


.snap-link {
  background: linear-gradient(90deg, #FFFC00, #FFD500);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
    font-size: 21px;
  font-weight: bold;
  text-decoration: none;
transition: 0.3s ease;
}


.tiktok-link {
  background: linear-gradient(45deg, #69C9D0, #EE1D52);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
    font-size: 21px;
  font-weight: bold;
  text-decoration: none;
transition: 0.3s ease;
}


.google-link {
  background: linear-gradient(90deg, blue, #EA4335, #FBBC05, #34A853);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
    font-size: 21px;
  font-weight: bold;
  text-decoration: none;
  transition: 0.3s ease;
}

.insta-link:hover,.google-link:hover,.tiktok-link:hover,.snap-link:hover,.whats:hover {
  opacity: 0.8;
}
strong
{
    color:var(--primary);
}
/* Navbar */
.nav{position:fixed;top:0;width:100%;padding:2px 0;transition:0.3s;z-index:999;display:flex;justify-content:center;}
.nav.transparent{background:transparent;}
.nav.scrolled{background:#111;box-shadow:0 2px 8px rgba(0,0,0,0.6);}
.nav .container{display:flex;justify-content:space-between;align-items:center;}
.nav .brand{display:flex;align-items:center;gap:12px;}
.nav .logo{color:#000;padding:6px 12px;font-weight:bold;border-radius:6px;font-size:1.2rem;}
.logoimg{
    
    width: 90px;
}
.nav h1{font-family:Ib;font-size:2.2rem;}
.navlinks button{margin:0 6px;color:var(--text);padding:6px 10px;transition:0.3s;border-radius:4px; background: none; border-style: none; ;font-size: 1.2rem;}
.navlinks button:hover,.navlinks a.active{background:var(--primary);color:#000;}
.navlinks .cta{background:var(--primary);color:#000;}
.menu-btn{background:none;border:none;color:white;font-size:1.5rem;display:none;}
.menu-btn2{background:none;border:none;color:var(--text);font-size:1.5rem;display:none;}

/* Hero */
.hero{min-height:100vh;display:flex;align-items:center;justify-content:center;}
.hero .grid{display:grid;grid-template-columns:1fr 1fr;gap:24px;align-items:center;}
.hero .chip{display:inline-block;background:var(--primary);color:#000;padding:4px 10px;border-radius:20px;margin-bottom:12px;font-weight:bold;font-size:0.9rem;}
.hero h2{font-family:var(--font-heading);font-size:2rem;margin-bottom:12px;}
.hero .lead{font-size:1.1rem;color:var(--muted);margin-bottom:18px;}
.hero .btn{padding:10px 20px;border-radius:6px;border:none;font-weight:bold;transition:0.3s;}
.hero .btn.primary{background:var(--primary);color:#000;}
.hero .btn.primary:hover{opacity:0.9;}
.hero .btn.ghost{background:none;border:1px solid var(--primary);color:var(--primary);}
.hero .btn.ghost:hover{opacity:0.8;}
.hero-card video{width:100%;border-radius:12px;object-fit:cover; height: 600px;}

/* Sections */
section{padding:80px 0;}
.section-title{text-align:center;margin-bottom:36px;}
section p.lead{max-width:700px;margin:0 auto 24px auto;}

/* Services */
.services{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:24px;margin-top:24px;}
.service{background:#111;padding:18px;border-radius:12px;transition:0.3s;}
.service:hover{background:#222;}
.service h4{color:var(--primary);margin-bottom:8px;}
.service p{color:var(--muted);font-size:0.95rem;}

/* Gallery */
.gallery-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px;}
.gallery-grid img{width:100%;border-radius:10px;object-fit:cover;transition:0.3s;}
.gallery-grid img:hover{transform:scale(1.05);}

/* Testimonials */
.testi-wrap{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:18px;}
.testi{background:#111;padding:16px;border-radius:12px;transition:0.3s;}
.testi:hover{background:#222;}
.testi .stars{color:var(--primary);margin-bottom:6px;}
.testi p{color:var(--muted);font-size:0.95rem;}

/* Contact Form */
.contact-grid{display:flex;justify-content:center;}
.form{max-width:500px;width:100%;}
.form input,.form textarea{width:100%;padding:10px;border-radius:6px;border:none;margin-bottom:12px;background:#111;color:#fff;}
.form textarea{resize:none;height:120px;}

/* Footer */
footer{padding:24px 0;border-top:1px solid #222;font-size:0.9rem;text-align:center;}

/* ScrollBrush & Track */
#scrollbarTrack {
  position: fixed;
  top: 0;
  right: -35px;
  width: 50px;
  height: 100vh;
  pointer-events: none;
  z-index: 9999;
}
#scrollBrush {
  position: absolute;
  width: 100px;
  transform: rotate(-15deg);
  z-index: 10000;
  transition: top 0.05s linear;
}

/* Scroll to Top Button */
#scrollTopBtn {
  position: fixed;
  bottom: 80px;
  right: 20px;
  padding: 12px 16px;
  border: none;
  border-radius: 50%;
  background: var(--primary);
  color: #000;
  font-size: 1.5rem;
  display: none;
  cursor: pointer;
  box-shadow: 0 4px 8px rgba(0,0,0,0.4);
  z-index: 10001;
  transition: 0.3s;
}
#scrollTopBtn:hover{transform: scale(1.1);}

/* Responsive */
@media(max-width:992px){

.hero{margin-top: 30px;}
  .hero .grid{grid-template-columns:1fr;}
  .menu-btn{display:block;}
  .navlinks{display:none;flex-direction:column;background:#111;position:absolute;top:60px;right:10px;padding:12px;border-radius:8px;}
  .navlinks a{margin:6px 0;}
  .navlinks.show{display:flex;}
    .hero-card video{height: 500px;}
}
@media(min-width:995px){

.menu-btn{ background: none; color: #111; cursor:default;}
.menu-btn2{background: none; color: #111; cursor:default;}    
    

}