:root {
  --dark: #0f172a;
  --light: #f8fafc;
  --muted: #64748b;
  --accent: #ef4444;
  --glass: rgba(255,255,255,0.6);
}




/* ===== HERO ===== */
.hero {
  min-height: 55vh;
  background: url("../img/UIUX\ &\ Web\ Experience\ Design\ -\ 007\ \(1\).png") center/cover no-repeat;
  display: flex;
  align-items: center;
}

.hero-content {
  max-width: 1200px;
  margin: auto;
  padding: 0 20px;
}

.hero h1 {
   font-size: clamp(2.2rem, 4.5vw, 3.4rem);
  color: #fff;
  max-width: 720px;
}

.hero p {
  margin-top: 18px;
  font-size: 1.1rem;
  color: #e5e7eb;
  max-width: 600px;
}

.hero .line {
  width: 90px;
  height: 4px;
  background: var(--accent);
  margin-bottom: 26px;
}


:root{
  /* --primary:#2563eb; */
  --accent:#ef4444;
  --dark:#0f172a;
  --muted:#64748b;
  --bg:#f8fafc;
  --glass:rgba(255,255,255,.65);
}




/* HERO */

/* SECTION */


.block{
  max-width:1200px;
  margin:auto;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:60px;
  align-items:center;
  margin-bottom:90px;
  opacity:0;
  transform:translateY(40px);
  animation:reveal 1s ease forwards;
}

.block:nth-child(2){animation-delay:.2s}
.block:nth-child(3){animation-delay:.4s}
.block:nth-child(4){animation-delay:.6s}

.text h2{
  font-size:1.9rem;
  margin-bottom:18px;
  color: #ef4444;
}

.text p{
  font-size:1rem;
  line-height:1.85;
  color:var(--muted);
  margin-bottom:14px;
}

/* VISUAL */
.visual{
  position:relative;
  animation:float 6s ease-in-out infinite;
}

.visual img{
  width:100%;
  height:520px;
  object-fit:cover;
  border-radius:22px;
  box-shadow:0 30px 60px rgba(0,0,0,.18);
}

/* FEATURES */
.features{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:22px;
  margin-top:30px;
}

.card{
  background:var(--glass);
  backdrop-filter:blur(14px);
  padding:22px;
  border-radius:18px;
  box-shadow:0 10px 25px rgba(0,0,0,.08);
  transition:.4s;
}

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

.card strong{
  display:block;
  margin-bottom:8px;
}


/* ANIMATIONS */
@keyframes reveal{to{opacity:1;transform:none}}
@keyframes float{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-14px)}
}

/* RESPONSIVE */
@media(max-width:900px){
  .block{grid-template-columns:1fr}
  .visual img{height:420px}
  .features{grid-template-columns:1fr}
}