/*
   SARFRAZ SAEED — PORTFOLIO 2026
   Dark Navy + Gold — Premium Look
   */

/* 
   1. Google fonts import
    */
   @import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;700;900&family=Inter:wght@300;400;500;600&display=swap');

   /* 
      2. Color Palette
       */
   :root {
     --bg:           #060912;
     --bg-alt:       #0c1020;
     --bg-card:      #111827;

     --gold:         #d4a853;
     --gold-light:   #f0c878;
     --gold-dim:     rgba(212, 168, 83, 0.08);
     --gold-border:  rgba(212, 168, 83, 0.20);
     --text:         #f0ede8;

     --text-muted:   #6b7280;
     --text-soft:    #9ca3af;
     --white:        #ffffff;
     --shadow:       0 20px 60px rgba(0, 0, 0, 0.5);
     --shadow-gold:  0 8px 32px rgba(212, 168, 83, 0.15);
   }
   
   /* 
      3. Reset
       */
   *, *::before, *::after {
     margin: 0;

     padding: 0;
     box-sizing: border-box;
   }
   
   html {
     scroll-behavior: smooth;
     font-size: 16px;
   }
   
   body {
     background-color: var(--bg);
      color: var(--text);
     font-family: 'Inter', sans-serif;
     font-weight: 300;

     line-height: 1.75;
     overflow-x: hidden;
   }
   
   a {
     text-decoration: none;
     transition: color 0.3s;
   }
   
   ul {
     list-style: none;

     padding: 0;
   }
   
   /* 
      4. SCROLLBAR STYLING
       */
   ::-webkit-scrollbar {
     width: 6px;
   }
   
   ::-webkit-scrollbar-track {
     background: var(--bg);
   }
   
   ::-webkit-scrollbar-thumb {
     background: var(--gold);
     border-radius: 10px;
   }
   
   /*
      5. Navigation
       */
   nav {
     position: fixed;
     top: 0;
     left: 0;
      right: 0;
     z-index: 1000;
     padding: 0 5rem;

     height: 70px;
     display: flex;
     align-items: center;
     background: rgba(6, 9, 18, 0.90);

     backdrop-filter: blur(20px);
     -webkit-backdrop-filter: blur(20px);
     border-bottom: 1px solid var(--gold-border);
   }
   
   nav div {
     width: 100%;
     display: flex;
     align-items: center;

      justify-content: space-between;
   }
   
   .nav-logo {
     font-family: 'Playfair Display', serif;
      font-size: 1.8rem;
     font-weight: 900;

     color: var(--gold);
     letter-spacing: 0.05em;
     transition: color 0.3s, text-shadow 0.3s;
   }
   
   .nav-logo:hover {
     color: var(--gold-light);
      text-shadow: 0 0 20px rgba(212, 168, 83, 0.4);
   }
   
   .nav-links {
     display: flex;
      align-items: center;
     gap: 2.5rem;
   }
   
   .nav-links li a {
     color: var(--text-muted);
     font-size: 0.82rem;
      font-weight: 500;
     letter-spacing: 0.14em;
     text-transform: uppercase;

     padding-bottom: 4px;
      border-bottom: 1px solid transparent;
     transition: color 0.3s, border-color 0.3s;
   }
   
   .nav-links li a:hover {
     color: var(--gold);
     border-bottom-color: var(--gold);
   }
   
   /* 
      6. Hero Section
 */
   #home {
     min-height: 100vh;
     padding: 70px 5rem 0;
     display: flex;
     flex-direction: column;
     justify-content: center;
     position: relative;
     overflow: hidden;
   }
   
   /* Background decoration */
   #home::before {
     content: '';
      position: absolute;
     top: 20%;
     right: -10%;
     width: 600px;
     height: 600px;
      background: radial-gradient(circle, rgba(212, 168, 83, 0.05) 0%, transparent 65%);
     pointer-events: none;
   }
   
   #home::after {
     content: '';
     position: absolute;
     bottom: 10%;
     left: -5%;
     width: 400px;
     height: 400px;
     background: radial-gradient(circle, rgba(212, 168, 83, 0.03) 0%, transparent 65%);
     pointer-events: none;
   }
   
   .hero-tag {
     display: inline-flex;
     align-items: center;
     gap: 0.5rem;
     background: var(--gold-dim);
     border: 1px solid var(--gold-border);
     color: var(--gold);
     font-size: 0.75rem;
     font-weight: 500;
     letter-spacing: 0.2em;
     text-transform: uppercase;
     padding: 0.5rem 1.2rem;
     border-radius: 50px;
     margin-bottom: 2rem;
     width: fit-content;
     animation: fadeInDown 0.8s ease both;
   }
   
   .hero-tag::before {
     content: '';
     width: 8px;
     height: 8px;
     background: var(--gold);
     border-radius: 50%;
     animation: pulse 2s infinite;
   }
   
   #home h1 {
     font-family: 'Playfair Display', serif;
     font-size: clamp(3.5rem, 8vw, 6.5rem);
     font-weight: 900;
     line-height: 1.05;
     color: var(--text);
     margin-bottom: 1.5rem;
     animation: fadeInDown 0.8s ease 0.15s both;
   }
   
   #home > div:first-of-type > p {
     font-size: 1.1rem;
     color: var(--text-soft);
     max-width: 560px;
     line-height: 1.9;
     margin-bottom: 3rem;
     animation: fadeInDown 0.8s ease 0.3s both;
   }
   
   /* Hero buttons container */
   #home > div:last-of-type {
     display: flex;
     gap: 1rem;
     flex-wrap: wrap;
     animation: fadeInDown 0.8s ease 0.45s both;
   }
   
   #home button {
     background: transparent;
     border: none;
     padding: 0;
     cursor: pointer;
   }
   
   .viewproject-btn {
     display: inline-block;
     background: var(--gold);
     color: #060912;
     padding: 1rem 2.2rem;
     border-radius: 6px;
     font-size: 0.9rem;
     font-weight: 700;
     letter-spacing: 0.05em;
     transition: all 0.3s ease;
     box-shadow: var(--shadow-gold);
   }
   
   .viewproject-btn:hover {
     background: var(--gold-light);
     color: #060912;
     transform: translateY(-3px);
     box-shadow: 0 12px 40px rgba(212, 168, 83, 0.3);
   }
   
   .getintouch-btn {
     display: inline-block;
     background: transparent;
     color: var(--text);
     border: 1px solid var(--gold-border);
     padding: 1rem 2.2rem;
     border-radius: 6px;
     font-size: 0.9rem;
     font-weight: 400;
     letter-spacing: 0.05em;
     transition: all 0.3s ease;
   }
   

   .getintouch-btn:hover {
     border-color: var(--gold);
     color: var(--gold);
     transform: translateY(-3px);
     background: var(--gold-dim);
   }
   

   /*
      7. Shared Section Styles
       */
   section {
     padding: 7rem 5rem;
   }
   

   .section-label {
     font-size: 0.72rem;
      font-weight: 600;
     letter-spacing: 0.3em;
     text-transform: uppercase;
     color: var(--gold);
      margin-bottom: 0.8rem;
     display: flex;

     align-items: center;
     gap: 0.8rem;
   }
   
   .section-label::after {
      content: '';
     display: inline-block;
     width: 30px;
     height: 1px;

     background: var(--gold);
   }
   
   .divider {
     width: 55px;
     height: 3px;
     background: linear-gradient(90deg, var(--gold), transparent);
     margin-bottom: 3rem;
     border-radius: 2px;
   }
   
   /* 
      8. About Section
 */
   #about {
     background-color: var(--bg-alt);
     position: relative;
   }
   
   #about h1 {
     font-family: 'Playfair Display', serif;
     font-size: clamp(2rem, 4vw, 3rem);
     font-weight: 700;
     color: var(--text);
     margin-bottom: 2rem;
     line-height: 1.2;
   }
   
   .about-content p {
     color: var(--text-soft);
     font-size: 1rem;
     line-height: 1.95;
     margin-bottom: 1.3rem;
     max-width: 780px;
   }
   
   .about-content p strong {
     color: var(--text);
     font-weight: 600;
   }
   


   /* 
      9. Education Section
*/
   #education {
     background-color: var(--bg);
   }
   
   #educationOne {
     font-family: 'Playfair Display', serif;

     font-size: clamp(2rem, 4vw, 3rem);
      font-weight: 700;
     color: var(--text);
      margin-bottom: 3rem;
     line-height: 1.2;
   }
   
   /* Education cards */
   .education-degree {
     font-size: 1.15rem;
     font-weight: 600;
     color: var(--text);

     margin-top: 0;
      padding: 1.8rem 2rem 0.5rem;
     background: var(--bg-card);
     border: 1px solid var(--gold-border);
     border-left: 3px solid var(--gold);

     border-bottom: none;
      border-radius: 8px 8px 0 0;
     margin-top: 1.5rem;
      max-width: 680px;
     transition: transform 0.3s;
   }
   
   .education-degree:hover {
     transform: translateX(4px);
   }
   
   .education-school {
     color: var(--gold);
     font-size: 0.92rem;
     font-weight: 500;
     padding: 0.3rem 2rem;
     background: var(--bg-card);
     border-left: 3px solid var(--gold);
     border-right: 1px solid var(--gold-border);
     max-width: 680px;
   }
   
   .education-detail {
     color: var(--text-muted);
     font-size: 0.85rem;

     padding: 0.5rem 2rem 1.5rem;
     background: var(--bg-card);
      border: 1px solid var(--gold-border);
     border-left: 3px solid var(--gold);

     border-top: none;
     border-radius: 0 0 8px 8px;
     margin-bottom: 0;
     max-width: 680px;
   }
   
   /* 
      10. Skills Section
       */
   #skills {
     background-color: var(--bg-alt);
   }
   
   #skills h1 {
     font-family: 'Playfair Display', serif;

     font-size: clamp(2rem, 4vw, 3rem);
      font-weight: 700;
      color: var(--text);
     margin-bottom: 3rem;

   }
   
   .skill-card {
     background: var(--bg-card);
     border: 1px solid var(--gold-border);
     border-radius: 10px;
     padding: 1.8rem 2rem;

     margin-bottom: 1rem;
      max-width: 600px;
     transition: all 0.3s ease;

     position: relative;
     overflow: hidden;
   }
   
   .skill-card::before {
     content: '';
      position: absolute;
     top: 0;
     left: 0;
     width: 3px;
     height: 0;
     background: var(--gold);

     transition: height 0.4s ease;
   }
   

   .skill-card:hover::before {
     height: 100%;
   }
   
   .skill-card:hover {
     border-color: var(--gold);
     transform: translateX(8px);
     box-shadow: var(--shadow-gold);
   }
   
   .skill-card strong {
     display: block;
      color: var(--gold);
     font-size: 0.75rem;
     font-weight: 600;

     letter-spacing: 0.2em;
     text-transform: uppercase;
      margin-bottom: 1.2rem;
     padding-bottom: 0.8rem;

     border-bottom: 1px solid var(--gold-border);
   }
   


   .skill-card ul {
     display: grid;
     grid-template-columns: repeat(2, 1fr);
     gap: 0.6rem;
   }
   
   .skill-card li {
     color: var(--text-soft);
     font-size: 0.9rem;
      padding-left: 1.2rem;
     position: relative;

     transition: color 0.3s;
   }
   
   .skill-card li::before {
     content: '▸';

     position: absolute;
     left: 0;

     color: var(--gold);
     font-size: 0.7rem;
     top: 2px;
   }
   

   .skill-card:hover li {
     color: var(--text);
   }
   

   /* 
      11. Project Section
       */
   #projects {
     background-color: var(--bg);
   }
   
   #projects h1 {
     font-family: 'Playfair Display', serif;
      font-size: clamp(2rem, 4vw, 3rem);

     font-weight: 700;
      color: var(--text);
     margin-bottom: 3rem;
   }
   


   #projects > div {
     background: var(--bg-card);
     border: 1px solid var(--gold-border);

     border-radius: 10px 10px 0 0;
     padding: 1.5rem 2rem 0.8rem;

     margin-top: 2rem;
     max-width: 750px;
     transition: border-color 0.3s;
     border-bottom: none;
   }
   
   #projects > div:hover {
     border-color: var(--gold);
   }
   
   #projects > div > strong {
     display: inline-block;
     font-size: 0.72rem;
      font-weight: 600;
     letter-spacing: 0.15em;

     text-transform: uppercase;
     color: var(--gold);
     background: var(--gold-dim);

     border: 1px solid var(--gold-border);
     padding: 0.2rem 0.8rem;
     border-radius: 50px;
     margin-bottom: 0.7rem;
   }
   

   #projects > div > b {
     display: block;
     font-family: 'Playfair Display', serif;

     font-size: 1.25rem;
     font-weight: 700;
     color: var(--text);
   }
   
   #projects p {
     color: var(--text-soft);
     font-size: 0.92rem;
      line-height: 1.8;
      padding: 1rem 2rem 1.5rem;
     background: var(--bg-card);
     border: 1px solid var(--gold-border);
      border-top: 1px solid var(--gold-border);
     border-radius: 0 0 10px 10px;
     max-width: 750px;

     margin-bottom: 0;
     transition: border-color 0.3s;
   }
   
   #projects p strong,
   #projects p b {
     display: inline-block;

     margin-top: 0.8rem;
     font-size: 0.8rem;
     color: var(--gold);

     background: var(--gold-dim);
     padding: 0.2rem 0.7rem;
     border-radius: 4px;
     font-weight: 500;
   }
   
   /* 
      12. CONTACTS Section
 */
   #contacts {
     background-color: var(--bg-alt);
   }
   
   #contacts h1 {
     font-family: 'Playfair Display', serif;

     font-size: clamp(2rem, 4vw, 3rem);
      font-weight: 700;
     color: var(--text);
     margin-bottom: 2.5rem;

   }
   
   #contacts > div {
     background: var(--bg-card);

     border: 1px solid var(--gold-border);
     border-radius: 12px;
     padding: 2.5rem;
     max-width: 480px;
     transition: border-color 0.3s, box-shadow 0.3s;
   }
   

   #contacts > div:hover {
     border-color: var(--gold);
     box-shadow: var(--shadow-gold);
   }
   
   #contacts b {
     color: var(--gold);

     font-weight: 600;
     margin-right: 0.4rem;
   }
   
   #contacts div br {
     margin-bottom: 0.8rem;
   }
   
   #contacts a {
     color: var(--text-soft);
      font-size: 0.95rem;
     transition: color 0.3s;
   }
   
   #contacts a:hover {
     color: var(--gold);
   }
   

   /* 
      13. Footer
       */
   footer {
     background: var(--bg);
     
     border-top: 1px solid var(--gold-border);
     padding: 2rem 5rem;
     color: var(--text-muted);
     font-size: 0.85rem;
     text-align: center;
     letter-spacing: 0.05em;
   }
   
   /* 
      14. Animations
       */
   @keyframes fadeInDown {
     from {
       opacity: 0;
       transform: translateY(-24px);
     }
     to {
       opacity: 1;
       transform: translateY(0);
     }
   }
   
   @keyframes pulse {
     0%, 100% {
       opacity: 1;
       transform: scale(1);
     }
     50% {
       opacity: 0.5;
       transform: scale(0.8);
     }
   }
   
   /* 
      15. RESPONSIVE MOBILE
     */
   @media (max-width: 768px) {
   
     nav {
       padding: 0 1.5rem;
     }
   

     .nav-links {
       display: none;
     }
   
     section {
       padding: 4.5rem 1.5rem;
     }
   

     #home {
       padding: 70px 1.5rem 3rem;
     }
   

     .skill-card ul {
       grid-template-columns: 1fr;
     }
   

     footer {
       padding: 1.5rem;
       font-size: 0.78rem;
     }
   
   }