body {
  margin: 0;
  font-family: Arial;
  background: linear-gradient(135deg, #5f5fff, #005ebe);
}
    /* NAVBAR */
  .teto{
  color: red;
  text-align:center;
  height:20px;
  margin-left:0px;
  margin-top:0px;
  font-size:25px;
  background:#04003cb7;
 transform:translateX(-300px);
  }
    nav{
        display:flex;
        justify-content:space-between;
        align-items:center;
        padding:15px 40px;
        background:#111827;
        position:sticky;
        top:0;
        z-index:1000;
    }
  
    nav .logo{
   font-size:22px;
   color:#38bdf8;
   font-weight:bolder;
  }
  nav .img{
  width:80px;
  position: absolute;
  top:-10px;
  left: 300px;
  border-radius:150px;
  transform:scale(.5);
   }

  nav a{
 text-decoration:none;
 color:red;
  display:flex;
 list-style:none;
  gap:20px;
    }

 nav a{
   cursor:pointer;
   color:#cbd5e1;
    transition:0.3s;
    }

    nav a:hover{
        color:#38bdf8;
    }
    
.typing{
    color:red;
    background:#cbcbcb;
    box-shadow:0px 10px 10px #cbcbcb;
    border-radius:100px;
    font-size:25px;
    font-family:Arial,Cairo;
    border-right:2px solid green;
    padding-right:5px;
    white-space:nowrap;
}

/* Navbar */
.navbar {
  top: 20px;
  left: 50%;
  padding: 10px 20px;
  border-top:5px solid red;
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);

  box-shadow: 0 10px 25px rgba(0,0,0,0.2);
}

.navbar ul {
  list-style: none;
  display: flex;
  gap: 20px;
  margin: 0;
  padding: 0;
}

.navbar a {
  text-decoration: none;
  color: white;
  padding: 10px 20px;
  border-radius: 30px;
  transition: 0.3s;
}


/* Hover */
.navbar a:hover {
  background:rgba(255,18,18);
}

/* Active */
.navbar .active {
  background: rgba(255,255,255,0.3);
}

/* Section */
section{
  height:80vh;
  background:#111827;
  display: flex;
  justify-content: center;
  align-items: center;
  direction:center;
  padding:110px 0px;
  margin-top:-100px;
  max-width:1200px;
}



/* Reset بسيط */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* Body */
body {
  background-color: #f50000;
  font-family: Arial, sans-serif;
}

/* Container */
 .container {
  display: flex;
  gap: 20px;
}
/* Images */
img {
  max-width: 100%;
  height: auto;
  display: block;
 }

/* Layout */
.parent {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

.child {
  flex: 1 1 300px;
}
.cards {
  display: flex;
  gap: 25px;
}

/* Navbar */
.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px 20px;
  background: #111;
}

.navbar h2 {
  color: #00ff99;
}

.navbar a {
  color: #00ff99;
  margin-left: 15px;
  text-decoration: none;
  transition: 0.3s;
}

.navbar a:hover {
  color: white;
}

/* عناصر خاصة */
.su{
  color:red;
}

.br{
  margin:auto;
  padding:0px 40px;
}
  header{padding:100px;display:flex;justify-content:space-between}
.w{
  font-size:35px;
  text-align:center;
}
.x {
  color: gold;
  background: #000a34;
  font-family: Courier, Arial;
  border: 3px solid white;
  padding: 10px 15px;
  margin: 20px auto;
  text-align: center;
  max-width: 400px;
}
::selection{
  background:red;
 color:white;
}
.sas {
  font-size:20px ;
  font-family:Arial,Sans-Serif,Cairo;
  text-decoration: none;
   color:red;
   background:none;
  height:20px;
  border-radius:50px;
  padding:10px 10px;
  position:relative;
  margin:100px;
  margin-top:100px;
  max-width:100px;
  gap:20px;
}
.sas:hover{
  
    background:red;
  color:white;
  cursor:pointer;
}
.sac{
  background:black;
 height:350px;
 display:block;
 padding-top:5px;
 line-height:60px;
 text-align:right;
 font-weight:bold;
 font-size:17px;
}
.pr:hover{
 color:white;
 font-size:19px;
}
.pr{
  text-decoration:none;
  color:gold;
  font-family:Arial;
  }
.gradient-text{

    font-size:70px;
    font-weight:bold;
    font-family:Arial;

    background:linear-gradient(
        90deg,
        red,
        orange,
        blue,
        green );

    background-size:300%;
 
    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;

    animation:gradient 5s linear infinite;
}

@keyframes gradient{

    0%{
        background-position:0%;
    }

    100%{
        background-position:300%;
    }

}
.z {
  color: yellow;
  font-family: Arial;
  text-align:right;
  font-size:20px;
  line-height:35px;
  padding:250px 0px;
  margin-top:-100px;
}
 /* 📱 موبايل */
@media (max-width: 768px) {

  body {
    font-size: 14px;
  }

  .navbar {
    flex-direction: column;
    text-align: center;
  }

  .navbar a {
    display: block;
    margin: 10px 0;
  }

  .parent {
    flex-direction: column;
  }

  .child {
    flex: 1 1 100%;
  }

  .container {
    width: 95%;
  }
}
.btn{
padding:15px 25px;
margin-left:100px;
text-align:center;
border-radius:30px;
color:gold;
text-decoration:none;
font-size:25px;
cursor:pointer;
 }
 .btn:hover{
  background:red;
  color:green;
}
.a{
  color:green;
  text-align:center;
  font-size:35px;
  font-family:Arial;
  font-weight:bolder;
}
.q{
  background:#ffff;
  color:red;
  font-family:Courier,Arial;
  font-size:15px;
  font-weight:bold;
  text-align:center;
}
.foo{
  background:red;
}
.spotlight{
    position:relative;
    font-size:clamp(50px,10vw,120px);
    font-weight:900;
    text-transform:uppercase;
    text-align:center;
    letter-spacing:6px;
    margin-top:60px;
    color:#1a1a1a;
    user-select:none;
}

.spotlight::after{
    content:attr(data-text);
    position:absolute;
    inset:0;
    color:red;
    text-shadow:
        0 0 10px white,
        0 0 20px white,
        0 0 40px white,
        0 0 80px white;

    -webkit-mask-image:radial-gradient(
        circle 120px at var(--x,50%) var(--y,50%),
        #000 0%,
        #000 35%,
        transparent 100%
    );

    mask-image:radial-gradient(
        circle 120px at var(--x,50%) var(--y,50%),
        #000 0%,
        #000 35%,
        transparent 100%
    );
}