/* ===============================
   ROOT VARIABLES
=============================== */

:root{
  --bg-dark:#0b0b0f;
  --bg-card:#14141c;
  --text-main:#ffffff;
  --text-soft:#bfbfbf;

  --grad-main:linear-gradient(135deg,#ff003c,#ff4da6,#ff8c00);
  --grad-hover:linear-gradient(135deg,#ff8c00,#ff003c,#ff4da6);

  --glow-red:rgba(255,0,60,0.6);
  --glow-pink:rgba(255,77,166,0.6);
  --glow-orange:rgba(255,140,0,0.6);
}

/* ===============================
   GLOBAL RESET
=============================== */

*{
  margin:0;
  padding:0;
  box-sizing:border-box;
  font-family:'Poppins',sans-serif;
  scroll-behavior:smooth;
}

body{
  background:var(--bg-dark);
  color:var(--text-main);
  overflow-x:hidden;
}

canvas{
  position:fixed;
  top:0;
  left:0;
  z-index:-1;
}

/* ===============================
   HEADER / NAVBAR
=============================== */

header{
  position:fixed;
  width:100%;
  padding:20px 8%;
  background:rgba(0,0,0,0.6);
  backdrop-filter:blur(12px);
  border-bottom:1px solid rgba(255,255,255,0.05);
  z-index:1000;
}

.navbar{
  display:flex;
  justify-content:space-between;
  align-items:center;
}

.logo{
  font-size:22px;
  font-weight:700;
  letter-spacing:2px;
  background:var(--grad-main);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
}

.nav-links{
  display:flex;
  list-style:none;
  gap:40px;
}

.nav-links a{
  text-decoration:none;
  color:white;
  font-weight:500;
  transition:0.3s ease;
  position:relative;
}

.nav-links a:hover{
  background:var(--grad-main);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
}

/* HAMBURGER */

.hamburger{
  display:none;
  flex-direction:column;
  gap:6px;
  cursor:pointer;
}

.hamburger span{
  width:28px;
  height:3px;
  border-radius:3px;
  background:var(--grad-main);
}

/* ===============================
   HERO SECTION
=============================== */

.hero{
  min-height:100vh;
  display:flex;
  align-items:center;
  padding:0 8%;
}

.hero-container{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:60px;
  width:100%;
}

/* HERO IMAGE */

.hero-image img{
  width:320px;
  height:320px;
  border-radius:50%;
  object-fit:cover;
  padding:4px;
  border:3px solid transparent;
  background:
    linear-gradient(var(--bg-dark),var(--bg-dark)) padding-box,
    var(--grad-main) border-box;
  transition:0.4s ease;
}

.hero-image img:hover{
  transform:scale(1.05);
  box-shadow:
    0 0 20px var(--glow-red),
    0 0 40px var(--glow-pink),
    0 0 60px var(--glow-orange);
}

/* HERO CONTENT */

.hero-content{
  flex:1.5;
}

.intro{
  color:var(--text-soft);
  margin-bottom:10px;
}

.hero-content h1{
  font-size:3.5rem;
  margin-bottom:20px;
}

.hero-content h1 span{
  background:var(--grad-main);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
}

.description{
  color:var(--text-soft);
  line-height:1.7;
  margin-bottom:20px;
  max-width:600px;
}

/* BUTTON */

.hero-btn{
  display:inline-block;
  padding:12px 35px;
  border-radius:30px;
  text-decoration:none;
  font-weight:600;
  color:white;
  background:var(--grad-main);
  transition:0.4s ease;
}

.hero-btn:hover{
  background:var(--grad-hover);
  transform:translateY(-4px);
  box-shadow:
    0 0 20px var(--glow-red),
    0 0 40px var(--glow-pink);
}

/* ===============================
   SECTIONS
=============================== */

.section{
  padding:120px 10%;
  text-align:center;
}

.section h2{
  font-size:2.2rem;
  margin-bottom:40px;
  background:var(--grad-main);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
}

/* ===============================
   SKILLS
=============================== */

.skills-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:40px;
}

.card{
  background:rgba(20,20,28,0.6);
  backdrop-filter:blur(20px);
  border-radius:20px;
  padding:40px 30px;
  border:1px solid rgba(255,255,255,0.08);
  transition:0.4s ease;
}

.card:hover{
  transform:translateY(-12px);
  box-shadow:
    0 10px 40px var(--glow-red),
    0 15px 60px var(--glow-pink);
}

.card h3{
  margin-bottom:10px;
  background:var(--grad-main);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
}

.card p{
  color:var(--text-soft);
  font-size:14px;
}

/* ===============================
   PROJECTS
=============================== */

.projects{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:30px;
}

.project-card{
  background:var(--bg-card);
  border-radius:15px;
  padding:30px;
  transition:0.4s ease;
}

.project-card:hover{
  transform:translateY(-10px);
  box-shadow:
    0 0 20px var(--glow-red),
    0 0 40px var(--glow-pink);
}

/* ===============================
   CONTACT
=============================== */

#contact p{
  margin:10px 0;
  color:var(--text-soft);
}

/* ===============================
   FOOTER
=============================== */

footer{
  text-align:center;
  padding:30px;
  background:#000;
  color:#888;
  border-top:1px solid rgba(255,255,255,0.05);
}

/* ===============================
   CURSOR GLOW BUTTON EFFECT
=============================== */

.glow-btn{
  position:relative;
  overflow:hidden;
}

.glow-btn::before{
  content:"";
  position:absolute;
  top:var(--y);
  left:var(--x);
  width:0;
  height:0;
  background:radial-gradient(circle,var(--glow-red) 0%,transparent 70%);
  border-radius:50%;
  transform:translate(-50%,-50%);
  pointer-events:none;
  transition:width 0.3s,height 0.3s;
}

.glow-btn:hover::before{
  width:200px;
  height:200px;
}

/* ===============================
   RESPONSIVE DESIGN
=============================== */

@media(max-width:900px){

  .nav-links{
    position:fixed;
    top:0;
    right:-100%;
    height:100vh;
    width:250px;
    background:rgba(10,10,15,0.95);
    backdrop-filter:blur(15px);
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:40px;
    transition:0.4s ease;
  }

  .nav-links.active{
    right:0;
  }

  .hamburger{
    display:flex;
  }

  .hero{
    padding-top:120px;
  }

  .hero-container{
    flex-direction:column;
    text-align:center;
    gap:40px;
  }

  .hero-image img{
    width:220px;
    height:220px;
  }

  .hero-content h1{
    font-size:2.3rem;
  }

  .section{
    padding:90px 7%;
  }

}
/* SECTION LAYOUT FIX */
.section{
  padding:120px 10%;
  text-align:center;
  position:relative;
}

/* FIX CONTENT WIDTH */
.section .description{
  max-width:750px;
  margin:0 auto;
  font-size:16px;
  line-height:1.9;
  letter-spacing:0.3px;
}
/* CUSTOM CURSOR DOT */

.cursor-dot{
  position:fixed;
  top:0;
  left:0;
  width:12px;
  height:12px;
  background:white;
  border-radius:50%;
  pointer-events:none;
  transform:translate(-50%,-50%);
  z-index:2000;
  transition:width 0.2s ease, height 0.2s ease;
  box-shadow:0 0 15px rgba(255,255,255,0.7);
}

/* Hide default cursor on desktop */
@media(min-width:900px){
  body{
    cursor:none;
  }
}

/* On mobile hide custom dot */
@media(max-width:900px){
  .cursor-dot{
    display:none;
  }
}
/* PREMIUM NAV TEXT SURROUND ANIMATION */

.nav-animated{
  position:relative;
  display:inline-block;
  padding:8px 18px;
  font-weight:600;
  color:white;
  text-decoration:none;
  z-index:1;
  overflow:hidden;
}

/* Animated border ring */
.nav-animated::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:30px;
  padding:2px;
  background:linear-gradient(270deg,#ff003c,#ff4da6,#ff8c00,#ff003c);
  background-size:400% 400%;
  animation:borderMove 6s linear infinite;
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  z-index:-1;
}

/* Smooth glow */
.nav-animated::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:30px;
  background:linear-gradient(270deg,#ff003c,#ff4da6,#ff8c00,#ff003c);
  background-size:400% 400%;
  animation:borderMove 6s linear infinite;
  filter:blur(15px);
  opacity:0.4;
  z-index:-2;
}

/* Animation */
@keyframes borderMove{
  0%{ background-position:0% 50%; }
  50%{ background-position:100% 50%; }
  100%{ background-position:0% 50%; }
}
/* HAMBURGER ANIMATION */

.hamburger{
  display:none;
  flex-direction:column;
  gap:6px;
  cursor:pointer;
  z-index:1100;
}

.hamburger span{
  width:28px;
  height:3px;
  border-radius:3px;
  background:white;
  transition:0.4s ease;
}

/* WHEN OPEN */

.hamburger.open span:nth-child(1){
  transform:rotate(45deg) translate(5px,5px);
}

.hamburger.open span:nth-child(2){
  opacity:0;
}

.hamburger.open span:nth-child(3){
  transform:rotate(-45deg) translate(6px,-6px);
}
.hamburger{
  display:flex;
}

.nav-links{
  z-index:1000;
}
.hamburger{
  display:none;   /* Hide by default */
}
@media(max-width:900px){

  .hamburger{
    display:flex;   /* Show only in mobile */
  }

  .nav-links{
    position:fixed;
    top:0;
    right:-100%;
    height:100vh;
    width:250px;
    background:rgba(10,10,15,0.95);
    backdrop-filter:blur(15px);
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:40px;
    transition:0.4s ease;
  }

}
.hamburger{
  display:flex;
}
/* ===== HAMBURGER DEFAULT (HIDDEN EVERYWHERE) ===== */
.hamburger{
  display:none !important;
  flex-direction:column;
  gap:6px;
  cursor:pointer;
  z-index:1100;
}

.hamburger span{
  width:28px;
  height:3px;
  border-radius:3px;
  background:white;
  transition:0.4s ease;
}

/* ===== SHOW ONLY ON MOBILE ===== */
@media screen and (max-width:900px){

  .hamburger{
    display:flex !important;
  }

}
/* ===============================
   PREMIUM CONTACT SECTION
=============================== */

.contact-section{
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:120px 10%;
}

.contact-container{
  max-width:800px;
}

.contact-subtitle{
  letter-spacing:3px;
  font-size:12px;
  color:#888;
  margin-bottom:20px;
}

.contact-title{
  font-size:3.5rem;
  font-weight:600;
  margin-bottom:25px;
}

.contact-description{
  color:#aaa;
  line-height:1.8;
  margin-bottom:40px;
  font-size:16px;
}

/* EMAIL BUTTON */

.contact-email{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:18px 40px;
  border-radius:50px;
  font-size:18px;
  text-decoration:none;
  color:white;
  background:rgba(255,255,255,0.05);
  backdrop-filter:blur(20px);
  border:1px solid rgba(255,255,255,0.1);
  transition:0.4s ease;
}

.contact-email span{
  font-size:18px;
  transition:0.3s;
}

.contact-email:hover{
  transform:translateY(-5px);
  background:rgba(255,255,255,0.1);
  box-shadow:0 15px 40px rgba(255,255,255,0.08);
}

.contact-email:hover span{
  transform:translateX(5px);
}

/* MOBILE RESPONSIVE */

@media(max-width:768px){

  .contact-title{
    font-size:2.3rem;
  }

  .contact-email{
    padding:14px 25px;
    font-size:15px;
  }

}
/* ===============================
   ARABIC CALLIGRAPHY DESIGN
=============================== */

.arabic-calligraphy{
  font-size:48px;
  margin-bottom:25px;
  font-weight:600;
  direction:rtl;
  letter-spacing:2px;
  font-family: "Amiri", serif;
  background: linear-gradient(90deg,#ffffff,#ff4da6,#ff8c00);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  opacity:0.9;
  position:relative;
}

/* Soft glow effect */
.arabic-calligraphy::after{
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(90deg,#ffffff,#ff4da6,#ff8c00);
  filter:blur(25px);
  opacity:0.25;
  z-index:-1;
}
.updates-container{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(300px, 1fr));
  gap:30px;
  margin-top:40px;
}

.update-card{
  background: rgba(20,20,28,0.6);
  backdrop-filter:blur(20px);
  border-radius:20px;
  padding:25px;
  border:1px solid rgba(255,255,255,0.08);
  transition:0.3s ease;
}

.update-card:hover{
  transform:translateY(-8px);
  box-shadow:
    0 10px 30px rgba(255,0,60,0.3),
    0 10px 40px rgba(255,77,166,0.3);
}

.update-card h3{
  margin-bottom:10px;
  background:var(--grad-main);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
}

.update-card p{
  color:var(--text-soft);
  line-height:1.6;
  font-size:15px;
}

.update-card small{
  color:#888;
  display:block;
  margin-top:12px;
  font-size:12px;
}
/* ===============================
   UPDATES CARDS
=============================== */
.updates-container{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(300px, 1fr));
  gap:30px;
  margin-top:40px;
}

.update-card{
  background: rgba(20,20,28,0.6);
  backdrop-filter: blur(20px);
  border-radius: 20px;
  padding: 25px;
  border: 1px solid rgba(255,255,255,0.08);
  transition:0.3s ease;
}

.update-card:hover{
  transform: translateY(-8px);
  box-shadow:
    0 10px 30px rgba(255,0,60,0.3),
    0 10px 40px rgba(255,77,166,0.3);
}

.update-card h3{
  margin-bottom:10px;
  background: var(--grad-main);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
}

.update-card p{
  color: var(--text-soft);
  line-height: 1.6;
  font-size:15px;
}

.update-card small{
  color:#888;
  display:block;
  margin-top:12px;
  font-size:12px;
}
/* ===============================
   INQUIRY SECTION
=============================== */

.inquiry-section{
  min-height:100vh;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  padding:120px 10%;
  text-align:center;
}

.inquiry-section h2{
  font-size:2.5rem;
  margin-bottom:50px;
  background:var(--grad-main);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
}

/* ===============================
   FORM CONTAINER
=============================== */

.inquiry-section form{
  width:100%;
  max-width:600px;
  display:flex;
  flex-direction:column;
  gap:25px;
  padding:40px;
  border-radius:25px;
  background:rgba(20,20,28,0.6);
  backdrop-filter:blur(20px);
  border:1px solid rgba(255,255,255,0.08);
  transition:0.4s ease;
}

.inquiry-section form:hover{
  box-shadow:
    0 0 30px rgba(255,0,60,0.2),
    0 0 50px rgba(255,77,166,0.2);
}

/* ===============================
   INPUTS & TEXTAREA
=============================== */

.inquiry-section input,
.inquiry-section textarea{
  width:100%;
  padding:16px 20px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,0.1);
  background:rgba(0,0,0,0.4);
  color:white;
  font-size:15px;
  outline:none;
  transition:0.3s ease;
}

.inquiry-section input::placeholder,
.inquiry-section textarea::placeholder{
  color:#aaa;
}

.inquiry-section input:focus,
.inquiry-section textarea:focus{
  border-color:#ff4da6;
  box-shadow:0 0 15px rgba(255,77,166,0.3);
}

/* ===============================
   SUBMIT BUTTON
=============================== */

.inquiry-section button{
  padding:14px 35px;
  border:none;
  border-radius:30px;
  font-weight:600;
  font-size:15px;
  cursor:pointer;
  color:white;
  background:var(--grad-main);
  transition:0.4s ease;
}

.inquiry-section button:hover{
  background:var(--grad-hover);
  transform:translateY(-4px);
  box-shadow:
    0 0 20px var(--glow-red),
    0 0 40px var(--glow-pink);
}

/* ===============================
   SUCCESS / MESSAGE TEXT
=============================== */

#formMessage{
  margin-top:20px;
  font-size:14px;
  color:#ff4da6;
}

/* ===============================
   RESPONSIVE
=============================== */

@media(max-width:768px){

  .inquiry-section{
    padding:100px 7%;
  }

  .inquiry-section h2{
    font-size:2rem;
  }

  .inquiry-section form{
    padding:30px 20px;
  }

}
/* Floating label container */
.form-group{
  position:relative;
  width:100%;
}

.form-group input,
.form-group textarea{
  width:100%;
  padding:18px 15px 10px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,0.1);
  background:rgba(0,0,0,0.4);
  color:white;
  font-size:15px;
  outline:none;
}

/* Label style */
.form-group label{
  position:absolute;
  left:15px;
  top:16px;
  color:#aaa;
  font-size:14px;
  pointer-events:none;
  transition:0.3s ease;
}

/* Move label when focused or filled */
.form-group input:focus + label,
.form-group input:not(:placeholder-shown) + label,
.form-group textarea:focus + label,
.form-group textarea:not(:placeholder-shown) + label{
  top:6px;
  font-size:11px;
  color:#ff4da6;
}