@media screen and (width >= 1200px) {
    .footer-main-page {
    position: fixed; 
    bottom:2px;  
    color : red  
    }
}   

/* Reset-ish */
    :root{
      --bg:#0f1720; /* dark slate */
      --card:#0b1220;
      --muted:#9aa4b2;
      --accent:#e6b89c; /* warm sand */
      --accent-2:#76c7c0; /* teal */
      --glass: rgba(255,255,255,0.04);
      --max-width:1120px;
      --radius:12px;
      --ff-sans: Inter, ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
    }
    *{box-sizing:border-box}
    html,body{height:100%}
    body{
      margin:0;
      font-family:var(--ff-sans);
      /* background:linear-gradient(180deg,#07101a 0%, var(--bg) 60%); */
       background:linear-gradient(var(--bg));
      color:#e8eef6;
      -webkit-font-smoothing:antialiased;
      -moz-osx-font-smoothing:grayscale;
      line-height:1.5;
      padding:32px 20px;
    }
    .wrap{width:100%;max-width:var(--max-width)}

    .grid-for-texts{
        display: grid;
        grid-template-columns: 25% 50% 25%;
    }


    @media screen and (width <= 1000px) {
      .grid-for-texts{
        display: grid;
        grid-template-columns: 5% 90% 5%;
    }
  }

  .text-space{
    background-color: white;
    color: black;
    padding: 100px;
    
  }

    @media screen and (width <= 1000px) {
      .text-space{
        background-color: white;
        color: black;
        padding: 60px;
        margin-bottom:50px;
      }
    }


    #readMore:hover {
        color: var(--accent);
        text-decoration: underline;
        cursor: pointer;

    }
    .column {
        margin-bottom: 10px;
    }
    /* Header */
    header{
      display:flex;align-items:center;gap:20px;margin-bottom:28px
    }
    .avatar{
      width:84px;height:84px;border-radius:10px;flex:0 0 84px;
      background-image:linear-gradient(135deg, rgba(255,255,255,0.03), rgba(255,255,255,0.01));
      display:flex;align-items:center;justify-content:center;font-weight:700;color:var(--accent);
      font-size:28px;border:1px solid rgba(255,255,255,0.04)
    }
    h1{font-size:22px;margin:0}
    .subtitle{color:var(--muted);font-size:13px;margin-top:6px}

    /* layout grid */
    .grid{display:grid;grid-template-columns:320px 1fr;gap:28px}

    /* Left column */
    .card{background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));padding:18px;border-radius:var(--radius);box-shadow:0 6px 22px rgba(2,6,23,0.6);border:1px solid rgba(255,255,255,0.03)}
    .meta p{margin:8px 0;color:var(--muted);font-size:14px}
    .skill-list{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
    .chip{background:var(--glass);padding:8px 10px;border-radius:999px;font-size:13px;color:var(--muted);border:1px solid rgba(255,255,255,0.02)}

    /* Right column */
    main{min-height:300px}
    section{margin-bottom:18px}
    h2{margin:0 0 10px 0;font-size:18px;color:var(--accent)}
    p.lead{color:var(--muted);margin:0 0 12px 0}

    /* Portfolio grid */
    .projects{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:14px}
    .project{background:var(--card);padding:14px;border-radius:10px;border:1px solid rgba(255,255,255,0.02);cursor:pointer;transition:transform .18s ease}
    .project:hover{transform:translateY(-6px)}
    .project .kicker{font-size:12px;color:var(--muted);margin-bottom:8px}
    .project h3{margin:0;font-size:15px}
    .project p{color:var(--muted);font-size:13px;margin:8px 0 0}

    /* controls */
    .filters{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:12px}
    .btn{background:transparent;border:1px solid rgba(255,255,255,0.04);padding:8px 12px;border-radius:8px;color:var(--muted);cursor:pointer}
    .btn.active{border-color:var(--accent);color:var(--accent)}

    /* modal */
    .modal{position:fixed;inset:0;display:none;align-items:center;justify-content:center;background:rgba(2,6,23,0.6);padding:20px}
    .modal.open{display:flex}
    .modal .sheet{width:100%;max-width:900px;background:linear-gradient(180deg,#08101a,#06111a);padding:22px;border-radius:14px;border:1px solid rgba(255,255,255,0.04)}
    .meta-row{display:flex;gap:16px;align-items:center}

    /* contact */
    .contact-row{display:flex;gap:10px;flex-wrap:wrap}
    .link{color:var(--accent-2);text-decoration:none}

    /* responsive */
    @media (max-width:880px){
      .grid{grid-template-columns:1fr;}
      .avatar{width:72px;height:72px}
    }