@font-face{     font-family:'Inter';     font-style:normal;     font-weight:300;     font-display:swap;     src:url('fonts/Inter-300.woff2') format('woff2'); }  @font-face{     font-family:'Inter';     font-style:normal;     font-weight:400;     font-display:swap;     src:url('fonts/Inter-400.woff2') format('woff2'); }  @font-face{     font-family:'Inter';     font-style:normal;     font-weight:500;     font-display:swap;     src:url('fonts/Inter-500.woff2') format('woff2'); }  @font-face{     font-family:'Inter';     font-style:normal;     font-weight:600;     font-display:swap;     src:url('fonts/Inter-600.woff2') format('woff2'); }  @font-face{     font-family:'Inter';     font-style:normal;     font-weight:700;     font-display:swap;     src:url('fonts/Inter-700.woff2') format('woff2'); }   h1{     font-size:3.5rem;     font-weight:700;     line-height:1.2;     margin:0 0 1rem 0; }  h2{     font-size:2.5rem;     font-weight:600;     line-height:1.3;     margin:0 0 1.5rem 0; }  h3{     font-size:1.4rem;     font-weight:600;     line-height:1.3;     margin:0 0 1rem 0; }  h4{     font-size:1.2rem;     font-weight:500;     line-height:1.4;     margin:0 0 0.8rem 0; }  h5{     font-size:1.1rem;     font-weight:500;     line-height:1.4;     margin:0 0 0.6rem 0; }  h6{     font-size:1rem;     font-weight:500;     line-height:1.4;     margin:0 0 0.5rem 0; }  *{     margin:0;     padding:0;     box-sizing:border-box; }  body{     font-family:'Inter', sans-serif;     line-height:1.6;     color:#333;     background:linear-gradient(135deg, #667eea 0%, #764ba2 100%);     min-height:100vh; }  .container{     max-width:1200px;     margin:0 auto;     padding:0 20px; }   header{     background:rgba(255, 255, 255, 0.95);     backdrop-filter:blur(10px);     position:fixed;     top:0;     width:100%;     z-index:1000;     box-shadow:0 2px 20px rgba(0, 0, 0, 0.1); }  nav{     display:flex;     justify-content:space-between;     align-items:center;     padding:1rem 0; }  .logo{     font-size:1.5rem;     font-weight:700;     color:#667eea; }  .nav-links{     display:flex;     list-style:none;     gap:2rem; }  .nav-links a{     text-decoration:none;     color:#333;     font-weight:500;     transition:color 0.3s ease; }  .nav-links a:hover{     color:#667eea; }   .hero{     padding:120px 0 80px;     text-align:center;     color:white; }  .hero h1{     margin-bottom:1rem;     background:linear-gradient(45deg, #fff, #f0f0f0);     -webkit-background-clip:text;     -webkit-text-fill-color:transparent;     background-clip:text; }  .hero .subtitle{     font-size:1.5rem;     font-weight:300;     margin-bottom:2rem;     opacity:0.9; }  .hero .description{     font-size:1.1rem;     max-width:600px;     margin:0 auto;     opacity:0.8; }   section{     padding:80px 0; }  .section-title{     text-align:center;     margin-bottom:3rem;     color:white; }   .about{     background:rgba(255, 255, 255, 0.95);     backdrop-filter:blur(10px);     margin:40px 0;     border-radius:20px;     padding:60px 40px; }  .about-content{     display:grid;     grid-template-columns:1fr 1fr;     gap:40px;     align-items:center; }  .about-text h2{     margin-bottom:1.5rem;     color:#333; }  .about-text p{     font-size:1.1rem;     margin-bottom:1.5rem;     color:#666; }  .about-image{     text-align:center; }  .profile-placeholder{     width:300px;     height:300px;     background:linear-gradient(135deg, #667eea, #764ba2);     border-radius:50%;     display:flex;     align-items:center;     justify-content:center;     margin:0 auto;     font-size:4rem;     color:white;     font-weight:300; }   .skills{     color:white; }  .skills-grid{     display:grid;     grid-template-columns:repeat(auto-fit, minmax(250px, 1fr));     gap:30px;     margin-top:3rem; }  .skill-card{     background:rgba(255, 255, 255, 0.1);     backdrop-filter:blur(10px);     padding:30px;     border-radius:15px;     text-align:center;     transition:transform 0.3s ease; }  .skill-card:hover{     transform:translateY(-5px); }  .skill-icon{     font-size:3rem;     margin-bottom:1rem;     color:#fff; }  .skill-card h3{     margin-bottom:1rem; }  .skill-card p{     opacity:0.9; }   .projects{     color:white; }  .projects-grid{     display:grid;     grid-template-columns:repeat(auto-fit, minmax(300px, 1fr));     gap:30px; }  .project-card{     background:rgba(255, 255, 255, 0.1);     backdrop-filter:blur(10px);     border-radius:15px;     overflow:visible;     transition:transform 0.3s ease;     border:1px solid rgba(255, 255, 255, 0.2);     display:flex;     flex-direction:column; }  .project-card:hover{     transform:translateY(-5px); }  .project-header{     display:flex;     justify-content:center;     align-items:center;     padding:15px;     background:rgba(255, 255, 255, 0.2);     backdrop-filter:blur(10px);     border-radius:15px 15px 0 0;     margin-bottom:15px; }  .project-icon{     font-size:2rem;     margin-right:10px; }  .project-role{     font-size:1.2rem;     font-weight:600; }  .project-content{     padding:0 25px 25px 25px;     display:flex;     flex-direction:column;     flex-grow:1; }  .project-title{     margin-bottom:15px;     color:white;     line-height:1.3;     text-align:center; }  .project-excerpt{     font-size:1rem;     margin-bottom:20px;     opacity:0.9;     line-height:1.6;     flex-grow:1;     margin-bottom:10px;     margin-top:10px; }  .project-tech{     display:flex;     flex-wrap:wrap;     gap:8px;     justify-content:center;     margin-top:15px; }  .tech-tag{     background:rgba(255, 255, 255, 0.2);     padding:4px 12px;     border-radius:20px;     font-size:0.8rem;     font-weight:500; }  .project-link{     display:inline-flex;     align-items:center;     gap:8px;     padding:12px 24px;     background:rgba(255, 255, 255, 0.2);     backdrop-filter:blur(10px);     color:white;     text-decoration:none;     border-radius:25px;     font-weight:500;     transition:all 0.3s ease;     border:1px solid rgba(255, 255, 255, 0.3); }  .project-link:hover{     background:rgba(255, 255, 255, 0.3);     transform:translateY(-2px);     color:white; }  .project-link.coming-soon{     background:rgba(255, 255, 255, 0.1);     cursor:default;     opacity:0.7; }  .project-link.coming-soon:hover{     background:rgba(255, 255, 255, 0.1);     transform:none; }   .achievements{     background:rgba(255, 255, 255, 0.95);     backdrop-filter:blur(10px);     margin:40px 0;     border-radius:20px;     padding:60px 40px; }  .achievements h2{     text-align:center;     margin-bottom:3rem;     color:#333; }  .achievement-cards{     display:grid;     grid-template-columns:repeat(auto-fit, minmax(300px, 1fr));     gap:30px; }  .achievement-card{     background:linear-gradient(135deg, #667eea, #764ba2);     color:white;     padding:30px;     border-radius:15px;     text-align:center; }  .achievement-card h3{     margin-bottom:1rem; }  .achievement-card p{     opacity:0.9;     font-size:1.1rem; }   .blog{     color:white; }  .blog h2{     text-align:center;     margin-bottom:3rem;     color:white; }  .blog-grid{     display:grid;     grid-template-columns:repeat(auto-fit, minmax(400px, 1fr));     gap:30px; }  .blog-card{     background:rgba(255, 255, 255, 0.1);     backdrop-filter:blur(10px);     border-radius:15px;     overflow:hidden;     transition:transform 0.3s ease;     border:1px solid rgba(255, 255, 255, 0.2); }  .blog-card:hover{     transform:translateY(-5px); }  .blog-image{     width:100%;     height:200px;     overflow:hidden; }  .blog-thumbnail{     width:100%;     height:100%;     object-fit:cover;     transition:transform 0.3s ease; }  .blog-card:hover .blog-thumbnail{     transform:scale(1.05); }  .coming-soon-placeholder{     width:100%;     height:200px;     background:linear-gradient(135deg, #667eea, #764ba2);     display:flex;     align-items:center;     justify-content:center;     font-size:4rem;     color:white;     opacity:0.8; }  .blog-content{     padding:25px; }  .blog-meta{     display:flex;     justify-content:space-between;     align-items:center;     margin-bottom:15px;     font-size:0.9rem;     opacity:0.8; }  .blog-title{     margin-bottom:15px;     color:white;     line-height:1.3; }  .blog-excerpt{     font-size:1rem;     margin-bottom:20px;     opacity:0.9;     line-height:1.6; }  .blog-tags{     display:flex;     flex-wrap:wrap;     gap:8px;     margin-bottom:20px; }  .tag{     background:rgba(255, 255, 255, 0.2);     padding:4px 12px;     border-radius:20px;     font-size:0.8rem;     font-weight:500; }  .blog-link{     display:inline-flex;     align-items:center;     gap:8px;     padding:12px 24px;     background:rgba(255, 255, 255, 0.2);     backdrop-filter:blur(10px);     color:white;     text-decoration:none;     border-radius:25px;     font-weight:500;     transition:all 0.3s ease;     border:1px solid rgba(255, 255, 255, 0.3); }  .blog-link:hover{     background:rgba(255, 255, 255, 0.3);     transform:translateY(-2px);     color:white; }  .blog-link.coming-soon{     background:rgba(255, 255, 255, 0.1);     cursor:default;     opacity:0.7; }  .blog-link.coming-soon:hover{     background:rgba(255, 255, 255, 0.1);     transform:none; }   .contact{     color:white;     text-align:center; }  .contact-content{     max-width:600px;     margin:0 auto; }  .contact p{     font-size:1.2rem;     margin-bottom:2rem;     opacity:0.9; }  .contact-buttons{     display:flex;     gap:20px;     justify-content:center;     flex-wrap:wrap; }  .contact-btn{     display:inline-flex;     align-items:center;     gap:10px;     padding:15px 30px;     background:rgba(255, 255, 255, 0.2);     backdrop-filter:blur(10px);     color:white;     text-decoration:none;     border-radius:50px;     font-weight:500;     transition:all 0.3s ease;     border:2px solid rgba(255, 255, 255, 0.3); }  .contact-btn:hover{     background:rgba(255, 255, 255, 0.3);     transform:translateY(-2px); }   footer{     background:rgba(0, 0, 0, 0.8);     color:white;     text-align:center;     padding:2rem 0;     margin-top:80px; }   .section-divider{     height:1px;     background:linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);     margin:60px auto;     max-width:800px;     position:relative; }  .section-divider::before{     content:'';     position:absolute;     top:-2px;     left:50%;     transform:translateX(-50%);     width:60px;     height:4px;     background:linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.5), transparent);     border-radius:2px; }   @media (max-width:768px){     .nav-links{         display:none;     }      .hero h1{         font-size:2.5rem;     }      .hero .subtitle{         font-size:1.2rem;     }      .about-content{         grid-template-columns:1fr;         text-align:center;     }      .profile-placeholder{         width:200px;         height:200px;         font-size:3rem;     }      .section-title{         font-size:2rem;     }      .about-text h2{         font-size:2rem;     }      .achievements h2{         font-size:2rem;     }      .contact-buttons{         flex-direction:column;         align-items:center;     }      .blog-grid{         grid-template-columns:1fr;     }      .blog-card{         margin:0 10px;     }      .blog-content{         padding:20px;     }      .blog-title{         font-size:1.2rem;     }      .projects-grid{         grid-template-columns:1fr;     }      .project-card{         margin:0 10px;     }      .project-content{         padding:20px;     }      .project-header{         padding:15px 20px;     }      .project-role{         font-size:1rem;     }      .section-divider{         margin:40px auto;         max-width:600px;     } }   @keyframes fadeInUp{     from{         opacity:0;         transform:translateY(30px);     }      to{         opacity:1;         transform:translateY(0);     } }  .fade-in-up{     animation:fadeInUp 0.6s ease-out; }