/* Reset + Base */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    text-decoration: none;
    border: none;
    outline: none;
    scroll-behavior: smooth;
    font-family: 'Nunito', sans-serif;
  }
  
  :root {
    --bg-color: #191f36;
    --snd-bg-color: #262840;
    --text-color: #fff;
    --main-color: #59B2F4;
  }
  html { font-size: 62.5%; overflow-x: hidden; }
  body { background: var(--bg-color); color: var(--text-color); }
  
  /* Sections */
  section { min-height: 100vh; padding: 10rem 9% 2rem; }
  
  /* Header */
  .header {
    position: fixed; top: 0; left: 0; width: 100%;
    padding: 2rem 9%;
    background: var(--bg-color);
    display: flex; justify-content: space-between; align-items: center;
    z-index: 100;
  }
  .logo { font-size: 2.5rem; color: var(--text-color); font-weight: 700; cursor: default; }
  .navbar a { font-size: 1.5rem; color: var(--text-color); font-weight: 700; margin-left: 4rem; }
  .navbar a:hover, .navbar a.active { color: var(--main-color); }
  #menu-icon { font-size: 3.6rem; color: var(--text-color); display: none; }
  
  /* Home */
  .home { display: flex; justify-content: center; align-items: center; }
  .home-content h3 { font-size: 3.2rem; font-weight: 700; }
  .home-content h3:nth-of-type(2) { margin-bottom: 2rem; }
  span { color: var(--main-color); }
  .home-content h1 { font-size: 5.6rem; font-weight: 700; line-height: 1.3; }
  .home-img img { width: 25vw; animation: floatImage 4s ease-in-out infinite; }
  @keyframes floatImage {
    0% { transform: translateY(0); }
    50% { transform: translateY(-2.4rem); }
    100% { transform: translateY(0); }
  }
  .home-content p { font-size: 1.6rem; }
  
  /* Social Links */
  .social-links a {
    display: inline-flex; justify-content: center; align-items: center;
    width: 4rem; height: 4rem;
    background: transparent; border: .2rem solid var(--main-color);
    border-radius: 50%;
    font-size: 2rem; color: var(--main-color);
    margin: 3rem 1.5rem 3rem 0;
    transition: .5s ease;
  }
  .social-links a:hover { background: var(--main-color); color: var(--snd-bg-color); box-shadow: 0 0 1rem var(--main-color); }
  
  /* Buttons */
  .btn {
    display: inline-block; padding: 1rem 2.8rem;
    background: var(--main-color); border-radius: 4rem;
    box-shadow: 0 0 1rem var(--main-color);
    font-size: 1.6rem; color: var(--bg-color);
    letter-spacing: 0.1rem; font-weight: 600;
    transition: .5s ease;
  }
  .btn:hover { box-shadow: none; }
  
  /* About */
  .about { display: flex; justify-content: center; align-items: center; gap: 2rem; background: var(--snd-bg-color); }
  .about-img img { width: 35vw; }
  .heading { text-align: center; font-size: 4.5rem; }
  .about-content h2 { text-align: left; line-height: 1.2; }
  .about-content h3 { font-size: 2.6rem; }
  .about-content p { font-size: 1.6rem; margin: 2rem 0 3rem; }
  
  /* Services */
  .services h2 { margin-bottom: 5rem; }
  .services-container {
    display: flex; justify-content: center; align-items: center;
    flex-wrap: wrap; gap: 2rem;
  }
  .services-container .services-box {
    flex: 1 1 30rem; background: var(--snd-bg-color);
    padding: 3rem 2rem 4rem; border-radius: 2rem; text-align: center;
    border: .2rem solid var(--bg-color); transition: .5s ease;
  }
  .services-container .services-box:hover { border-color: var(--main-color); transform: scale(1.02); }
  .services-box i { font-size: 7rem; color: var(--main-color); }
  .services-box h3 { font-size: 2.6rem; }
  .services-box p { font-size: 1.6rem; margin: 1rem 0 3rem; }
  
  /* Portfolio */
  .portfolio { background: var(--snd-bg-color); }
  .portfolio h2 { margin-bottom: 4rem; }
/* ===== Portfolio: always-visible title, description, and top-right link ===== */

/* Uniform grid stays the same; keeping from earlier fix */
.portfolio-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 2rem;
    align-items: stretch;
  }
  
 /* ===== Portfolio: title + arrow always visible, description only on hover ===== */

.portfolio-container .portfolio-box {
    position: relative;
    aspect-ratio: 4 / 3;
    border-radius: 1.2rem;
    overflow: hidden;
    box-shadow: 0 0 1rem var(--bg-color);
    background: #0f1426;
    display: flex;
    flex-direction: column;
  }
  
  .portfolio-box img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .5s ease;
  }
  .portfolio-box:hover img { transform: scale(1.05); }
  
  /* Overlay stays but description hidden initially */
  .portfolio-box .portfolio-layer {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    background: linear-gradient(
      180deg,
      rgba(0,0,0,0.0) 30%,
      rgba(0,0,0,0.35) 60%,
      rgba(0,0,0,0.85) 100%
    );
    padding: 1.2rem 1.6rem 1.6rem;
    color: var(--text-color);
  }
  
  /* Title always visible */
  .portfolio-layer h4 {
    font-size: 1.8rem;
    line-height: 1.2;
    margin: 0;
    z-index: 2;
  }
  
  /* Description hidden until hover */
  .portfolio-layer p {
    font-size: 1.4rem;
    margin-top: .4rem;
    opacity: 0;
    max-height: 0;
    overflow: hidden;
    transition: opacity .3s ease, max-height .3s ease;
  }
  .portfolio-box:hover .portfolio-layer p {
    opacity: 1;
    max-height: 10rem; /* expand space on hover */
  }
  
  /* Arrow link pinned top-right, always visible */
  .portfolio-layer a {
    position: absolute;
    top: 1rem;
    right: 1rem;
    width: 4.5rem;
    height: 4.5rem;
    border-radius: 50%;
    background: var(--text-color);
    display: inline-flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0 0 .6rem rgba(0,0,0,.25);
    transition: transform .2s ease, box-shadow .2s ease;
    z-index: 2;
  }
  .portfolio-layer a:hover {
    transform: scale(1.08);
    box-shadow: 0 0 1rem rgba(0,0,0,.35);
  }
  .portfolio-layer a i {
    font-size: 2rem;
    color: var(--snd-bg-color);
  }
  
  
  /* Touch devices: no hover, but text is already visible. Keep behavior the same. */
  @media (hover: none) and (pointer: coarse) {
    .portfolio-layer p { -webkit-line-clamp: 4; } /* slightly more text on mobile */
  }
  
  
  /* Contact */
  .contact h2 { margin-bottom: 3rem; }
  .contact form { max-width: 70rem; margin: 1rem auto 3rem; text-align: center; }
  .contact form .input-box { display: flex; justify-content: space-between; flex-wrap: wrap; }
  .contact form .input-box input, .contact form textarea {
    width: 100%; padding: 1.5rem; font-size: 1.6rem;
    color: var(--text-color); background: var(--snd-bg-color);
    border-radius: .8rem; margin: .7rem 0;
  }
  .contact form .input-box input { width: 49%; }
  .contact form textarea { resize: none; }
  .contact form .btn { margin-top: 2rem; cursor: pointer; }
  
  /* Footer */
  .footer {
    display: flex; justify-content: space-between; align-items: center;
    flex-wrap: wrap; padding: 2rem 9%;
    background: var(--snd-bg-color);
  }
  .footer-text { font-size: 1.6rem; }
  .footer-iconTop { display: inline-flex; justify-content: center; align-items: center; padding: .8rem 1rem; background: var(--main-color); border-radius: .8rem; transition: .5s ease; }
  .footer-iconTop a:hover { box-shadow: 0 0 1rem var(--main-color); }
  .footer-iconTop a i { font-size: 2.4rem; color: var(--snd-bg-color); }
  
  /* Responsive */
  @media (max-width: 1200px) { html { font-size: 55%; } }
  @media (max-width: 991px) {
    .header { padding: 2rem 3%; }
    section { padding: 18rem 3%; }
    .services { padding: 7rem; }
    .portfolio { padding-bottom: 7rem; }
    .contact { min-height: auto; }
    .footer { padding: 2rem 3%; }
  }
  @media (max-width: 768px) {
    #menu-icon { display: block; }
    .navbar { position: absolute; top: 100%; left: 0; width: 100%; background: var(--bg-color); display: none; }
    .navbar.active { display: block; }
    .navbar a { display: block; font-size: 2rem; margin: 3rem 0; }
    .home { flex-direction: column; }
    .home-img img { width: 70vw; margin-top: 4rem; }
    .about { flex-direction: column; }
    .about-img img { width: 90vw; margin-top: 4rem; }
    .portfolio-container { grid-template-columns: repeat(2, 1fr); }
  }
  @media (max-width: 617px) {
    .portfolio-container { grid-template-columns: 1fr; }
    .home-img img { width: 80vw; margin-top: 8rem; }
    .about-img img { width: 100vw; margin-top: 4rem; }
  }
  @media (max-width: 450px) {
    html { font-size: 50%; }
    .contact form .input-box input { width: 100%; }
  }
  
  /* Contact form status */
  .form-status { margin-top: 1rem; font-size: 1.4rem; opacity: .95; }
  .form-status.success { color: #4ade80; }
  .form-status.error { color: #f87171; }