/* Styling the body with a background color and padding */
*{
      margin: 0;
      padding: 0;
      box-sizing: border-box;
      text-decoration: none;
      border: none;
      outline: none;
      scroll-behavior: smooth;
      font-family: "Poppins", sans-serif;
}
:root{
   --bg-color:#000000;
   --second-bg-color:#131313;
   --text-color:white;
   --main-color:#ff8ac4;
   --card:#1a1a1a;
}
html{
   font-size: 62.5%;
   overflow-x: hidden;
}
body{
   background-color: var(--bg-color);
   color: var(--text-color);
}
.header{
   position: fixed;
   top: 0;
   left: 0;
   width: 100%;
   padding:4rem 12% 4rem;
   display: flex;
   align-items: center;
   justify-content: space-between;
   z-index: 5;

}
.container{
   max-width:1200px;
   margin:0 auto;
}

.logo{
   font-size: 3rem;
   font-weight: 800;
   color: var(--text-color);
   cursor: pointer;
   transition: 0.3s ease;
}
.logo:hover{
   transform: scale(1.1);
}
.logo span{
   text-shadow: 0 0 25px var(--main-color);
}
.navbar a{
   font-size: 1.8rem;
   color: var(--text-color);
   margin-left: 4rem;
   font-weight: 500;
   transition: 0.3s ease;
   border-bottom: 3px solid transparent;
}
.navbar a:hover,
.navbar a.active{
   color: var(--main-color);
   border-bottom: 3px solid var(--main-color);
}
#menu-icon{
   font-size: 3.6rem;
   color: var(--text-color);
   display: none;
}
section{
   min-height: 100vh;
   padding:10rem 12% 10rem; ;
}
.home{
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 15rem;
}
.home-content{
   display: flex;
   flex-direction: column;
   align-items: baseline;
   text-align:left;
   justify-content: center;
   margin-top: 3rem;
}
span{
   color: var(--main-color);
}
.logo span{
   color: var(--main-color);
}

.home-content h3{
   font-size:3.5rem;
   margin-top: 1rem;
   margin-bottom: 2rem;
} 
.home-content h1{
   font-size: 7rem;
   font-weight: 700;
   margin-top: 1.5rem;
   line-height: 1;
}
.home-img{
   border-radius: 50%;
   
}
.home-img img{
   position: relative;
   top:3rem;
   width: 32vw;
   border-radius: 50%;
   box-shadow: 0 0 25px var(--main-color);
   cursor: pointer;
   transition: 0.4s ease-in-out;

}
.home-img img:hover{
   box-shadow:0 0 25px var(--main-color), 
               0 0 50px var(--main-color),
               0 0 100px var(--main-color);
  
}

.home-content p{
   font-size: 1.5rem;
   font-weight: 500;
   line-height: 1.8;
   max-width: 1000px;
}
.social-icons a{
   display: inline-flex;
   justify-content: center;
   align-items: center;
   width: 4.5rem;
   height: 4.5rem;
   background:transparent;
   border: 2px solid var(--main-color);
   font-size: 2.5rem;
   border-radius: 50%;
   color: var(--main-color);
   margin:3rem 1.5rem 3rem 0 ;
   transition: 0.3s ease-in-out;
}
.social-icons a:hover{
   color: var(--text-color);
   transform: scale(1.3)translateY(-5px);
   box-shadow: 0 0 25px var(--main-color);
   background-color: var(--main-color);
}
.btn{
   display: inline-block;
   padding: 1rem 2.8rem;
   box-shadow: 0 0 15px var(--main-color);
   border-radius: 4rem;
   font-size: 1.6rem;
   color: black;
   background: var(--main-color);
   border: 2px solid transparent;
   letter-spacing: 0.1rem;
   font-weight: 600;
   transition: 0.3s ease-in-out;
   cursor: pointer;
   
}
.btn:hover{
 transform: scale(1.05);
 box-shadow: 0 0 20px var(--main-color);
}
.btn-group{
   display: flex;
   align-items: center;
   gap: 1.5rem;
}
.btn-group a:nth-of-type(2){
   box-shadow: 0 0 25px transparent;
   background-color: black;
   border: 2px solid var(--main-color);
   color: var(--main-color);
}
.btn-group a:nth-of-type(2):hover{
   box-shadow: 0 0 25px var(--main-color);
   background-color: var(--main-color);
   color: black;
}
.text-animation{
   font-size: 34px;
   font-weight: 600;
   min-width:280px;
}
.text-animation span{
   position: relative;
}
.text-animation span::before{
   content: "CS Student";
   color: var(--main-color);
   animation: words 20s infinite;
}
.text-animation span::after{
   content:"";
   background-color: var(--bg-color);
   position: absolute;
   width: calc(100% +8px);
   height: 100%;
   border-left: 3px solid var(--bg-color);
   right: -8px;
   animation: cursor 0.6s infinite, typing 20s steps(14) infinite;
}
@keyframes cursor{
   to{
      border-left: 2px solid var(--main-color);
   }
   
}
@keyframes words{
   0%,
   20%
   {
      content: "Web Developer";
   }
   21%, 
   40%
   {
      content: "Frontend Designer";
   }
   41%,
   60%
   {
      content: "UI/UX Designer";
   }
   61%, 
   80%
   {
      content: "CS Student";
   }
   81%, 
   100%
   {
      content: "Graphic Designer";
   }
   
}
@keyframes typing{
   10%,
   15%, 
   30%,
   35%, 
   50%, 
   55%, 
   70%, 
   75%,
   90%, 
   95%
   {
      width:0;
   
   }
   5%, 
   20%, 
   25%,
   40%,
   45%,
   60%,
   65%,
   80%,
   85%{
      width: calc(100% + 8px);
   }
}

.heading{
   text-align: center;
   font-size: 8rem;
   margin: 5rem 0;
}

/* About Section */

.about h2{
   margin-bottom:3rem ;
   color: white;
}

.about-list{
   list-style:none;
   padding:3rem;
   border-radius:2rem;
   background: var(--second-bg-color);
}
.about-list li{
   font-size:1.7rem;
   padding:1rem 0;
   border-bottom:1px solid rgba(255,255,255,0.05);
}
.about-list li:last-child{
   border-bottom:none;
}

.about-grid{
   display:grid;
   grid-template-columns:1.3fr .7fr;
   gap:4rem;
   align-items:center;
}

.about-grid p{
   font-size:1.8rem;
   line-height:1.8;
   background:var(--card);
   padding:3rem;
   border-radius:2rem;
   border:1px solid rgba(255,255,255,0.05);
}


.about-list strong{
   color:var(--main-color);
}


.about-list li:last-child{
   border-bottom:none;
}


.about-list li{
   padding:.35rem 0;
}

/* Projects Section */
.projects h2{
   margin-bottom:3rem ;
   color: white;
}
.section-title{
   text-align: center;
   font-size: 4rem;
   margin-bottom: 1rem;

}
.projects-grid{
   display:grid;
   grid-template-columns:repeat(3,1fr);
   gap:3rem;
   align-content: center;


}
.project-card img{
   width:100%;
   height:200px;
   object-fit:cover;
   transition:.4s ease;
}

.project-card{
   background:var(--card);
   border-radius:10px;
   overflow:hidden;
   cursor:pointer;
   transition:transform .22s cubic-bezier(.2,.9,.2,1),box-shadow .22s;
}
.project-card img{
   width:100%;
   height:200px;
   object-fit:cover;
   display:block;
}

.project-card:hover{
   transform:translateY(-10px);
   box-shadow:0 20px 40px rgba(0,0,0,.6);
}

.project-card:hover img{
   transform:scale(1.08);
}

.project-buttons{
   margin-top:2rem;
   display:flex;
   justify-content:space-between; 
   gap:2rem;
}

.project-buttons .btn{
   flex:1; 
   text-align:center;
   padding:.9rem 0;
   font-size:1.4rem;
   border-radius:1rem;
   letter-spacing:.05rem;
   box-shadow:none;
   background:transparent;
   color:var(--main-color);
   border:2px solid var(--main-color);
}

.project-buttons .btn:hover{
   background:var(--main-color);
   color:black;
   box-shadow:none;
   transform:translateY(-2px);
}

/* Contact Section */

.contact h2{
   margin-bottom:3rem ;
   color: white;
}
.contact form{
   max-width:900px;
   margin:5rem auto;
   display:grid;
   grid-template-columns:1fr 1fr;
   gap:2rem;
}


/* left column */
.input-group{
   display:flex;
   flex-direction:column;
   gap:2rem;
}


/* inputs + textarea */
.contact input,
.contact textarea{
   width:100%;
   padding:2rem;
   font-size:1.6rem;
   color:var(--text-color);
   background:var(--second-bg-color);
   border-radius:1.5rem;
   border:1px solid rgba(255,255,255,0.08);
   transition:.25s;
}




/* focus effect */
.contact input:focus,
.contact textarea:focus{
   border:1px solid var(--main-color);
}

.input-group-2{
   display:flex;
   flex-direction:column;
}

.input-group-2 textarea{
   flex:1;
   resize:none;
}

/* CENTER THE BUTTON */
.input-group-2 .btn{
   margin-top:2rem;
   width:200px;
   align-self:center;   /* ⭐ THIS centers it */
}

/* mobile */
@media (max-width:800px){
   .contact form{
      grid-template-columns:1fr;
   }
   .input-group-2 .btn{
      width:100%;
   }
}
/* mobile */
@media (max-width:800px){
   .contact form{
      grid-template-columns:1fr;
   }
   .input-group-2 .btn{
      width:100%;
   }
}

.footer{
   position: relative;
   bottom:0;
   width: 100%;
   padding: 50px 0;
   text-align: center;
   background-color: var(--second-bg-color);
   font-size: large;
}
.footer .social{
   display:flex;
   justify-content:center;
   gap:2rem;
   margin-bottom:3rem;
}
.footer .social a{
   display:flex;
   align-items:center;
   justify-content:center;
   width:48px;
   height:48px;
   font-size:22px;
   color:var(--main-color);
   border:2px solid var(--main-color);
   border-radius:50%;
   transition:.3s ease;
}
.footer .social a:hover{
   background-color: var(--main-color);
   color: black;
   transform: scale(1.2) translateY(-10px);
   box-shadow: 0 0 25px var(--main-color);
}
.footer ul{
   text-align: center;
   margin-top: 0;
   padding: 0;
   font-size: 18px;
   line-height: 1.6;
   margin-bottom: 0;

}


/* responsive */
@media (max-width:980px){
  .home-inner{grid-template-columns:1fr; text-align:center}
  .home-image{order:-1;margin-bottom:1rem}
  .about-grid{grid-template-columns:1fr}
  .projects-grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:640px){
  #nav-toggle{display:block}
  .nav{position:absolute;left:0;right:0;top:64px;background:rgba(2,6,23,.9);display:none;padding:1rem;border-top:1px solid rgba(255,255,255,0.03)}
  .nav ul{flex-direction:column}
  .projects-grid{grid-template-columns:1fr}
  .header-inner{align-items:center}
}