:root{

    --clr-primary:#6a82fb;
    --clr-bg:#121212;

    --clr-bg-secondary:#1f1f1f;
   
  
    --clr-txt:#f8f9fa;
    --clr-txt:#c4c4c4;


    --space-xs:2rem;
    --space-s:4rem;
    --space-m:8rem;
    --space-l:10rem;

--gradient:linear-gradient(to right bottom, #6a82fb ,#fc5c7d );
--border-radius: 1rem;
}

.light-mode{
    --clr-bg:#fff;
    --clr-bg-secondary:#f8f9fa;
}

html{
    scroll-behavior: smooth;
    font-size: 62.5%;
}
body{
    background-color: var(--clr-bg);
    color:var(--clr-txt);
    font-family: 'Courier Prime', monospace;

}
*,
*::after,
*::before{
    box-sizing: border-box;
    margin:0;
    padding:0;


}

ul{
    list-style: none;
}

a,
button{
text-decoration: none;
display: inline-block;
border:none;
cursor: pointer;
text-transform: capitalize;
}




.container,
section{
  
    padding:var(--space-l) 2rem;
    margin-inline:auto;

    max-width: 140rem;

}

.heading--sub,
.heading--primary,
.heading--secondary{
    text-transform: uppercase;
    text-align:center;
}
.heading--primary{
    font-size: 2.4rem;
color:var(--clr-txt);
font-weight: 300;

}
.heading--primary--sub{
    font-size:3.8rem;
    font-weight: 700;
display:block;
letter-spacing:0.2rem;
margin:var(--space-xs) 0;
text-transform: capitalize;
color:var(--clr-primary);
}

.heading--secondary{
    font-size: 3rem;
    font-weight:700;
    letter-spacing: 1rem;

}

.txt{
    text-align: center;
    max-width:50rem;
    margin-inline: auto;
    font-size: 1.6rem;
    line-height: 1.6;
    hyphens: auto;
    -webkit-hyphens: auto;
    -ms-hyphens: auto;

}

.heading--sub{
    font-size: 1.8rem;
    font-weight: 700;
    color:#fff;
    letter-spacing: 0.2rem;

    
}

/******** helper classes ************/
.overflowY{
    overflow-y: hidden;
}
.margin-t-sm{
    margin-top:var(--space-s);
}
.margin-t-m{
    margin-top:var(--space-m);
}
.margin-bt-sm{
    margin-bottom: var(--space-s);
}
.margin-bt-xs{
    margin-bottom: var(--space-xs);
}

.margin-l-xs{
    margin-left: var(--space-xs); 
}
.btn,
.btn:link,
.btn:visited{
    font-size: 1.6rem;
    padding:0.5rem 2rem;
    border-radius: var(--border-radius);
    transition: all 0.5s;
}

.btn--filled:link,
.btn--outline:link{
    font-size: 1.8rem;
    font-weight: 700;
    transition: all 0.3s;
    letter-spacing:0.1rem;

}
.btn--filled{

  
    
    color:var(--clr-txt);

    background-color: var(--clr-primary);
    border:3px solid var(--clr-primary);


}
.btn--outline{
 
    color:var(--clr-primary);
    border:3px solid var(--clr-primary);
  


}
.btn--outline:hover,

.btn--filled:hover
{

  transform: scale(1.1) translateY(-1rem);
  letter-spacing: 0.3rem;
  box-shadow: 0 4px 2px -2px  rgba(151, 142, 142, 0.2) ;



}
.btn--filled:active,
.btn--outline:active{
    transform: scale(1.1) translateY(0rem);
    letter-spacing: 0.3rem;
    box-shadow: 0 4px 2px -2px  rgba(151, 142, 142, 0.2) ;
}


.flex-row{
    display: flex;
    justify-content: center;
    align-items:flex-start;
    gap:2rem;
    flex-wrap: wrap;
}
.card{
    background-color: var(--clr-bg-secondary);
  padding:2rem 4rem;
    margin:1rem;
    position: relative;
    border-radius: var(--border-radius);
    transition: all 0.8s;
    align-self: stretch;

}

.skill::after,
.card::after{
    content: " ";
    display:block;
    width:103%;
    height: 105%;
    background-image: linear-gradient(to right bottom, #fc5c7d, #6a82fb);
    border-radius: 1rem;
    position: absolute;
    top:50%;
    left:50%;
    transform: translate(-50%,-50%) scale(0);
    z-index: -1;
}

.skill::after{
    transform: translate(-50%,-50%) scale(1);
}
.card:hover::after{
    transform: translate(-50%,-50%) scale(1);
}



.txt--gradient{


background-image: var(--gradient);

background-clip: text;
-webkit-background-clip: text;
color: transparent;

color:var(--clr-primary);
}

.icon-wrapper{
 
    text-align: center;
    margin-bottom: 2rem;

}
.icon{
    font-size: 6rem;
}

.icon--primary{
    color:var(--clr-primary);
}
.flex--row{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
}
img{
    display: inline-block;
    margin-inline: auto;
    max-width: 100%;
}
/******** header *****/
.header{
    position: sticky;
    top:0;
    left:0;
    width:100%;
    padding: var(--space-xs) var(--space-s);
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: var(--clr-bg);
    z-index:9999;

    box-shadow: 0 4px 2px -2px  rgba(151, 142, 142, 0.2) ;

}

.logo{
    font-size: 2.4rem;
    font-weight: 700;
}
/************** navbar **********/


.nav__list{
gap:0.2rem;

}
.nav__link:link,
.nav__link:visited
{
    color:var(--clr-txt);



}


.nav__link:hover,
.nav__link:active{
    background-color:var(--clr-primary);
    color:#fff;
    border-radius: var(--border-radius);

}
.nav{
    display: none;
}

.open-nav .nav{

    position: absolute;
    left:0;
    top:6rem;
    height:calc( 100vh - 6rem );
    width:100%;
 
    background-color: var(--clr-bg);
    display: flex;
    justify-content: center;
    align-items: center;


}
.open-nav .nav .nav__list{
 flex-direction: column;
 gap:2rem;
 
}
.open-nav .nav  .nav__link:link{
    font-size: 2rem;
}

.btn-nav{
    background-color: transparent;
    color:var(--clr-primary);
    font-size: 2rem;
}
.hide{
  display: none;
}

/***** hero ********/
.section-hero{
    /* height:calc( 100vh - 60px ); */
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap:4rem;
 
}


/********* about me ***********/
.section-about{
    background-color: var(--clr-bg-secondary);
}
.btns{

    text-align: center;
    gap:3rem;
}
.about-content .txt{
    max-width: 65rem;
}
/****** skills *********/

.skill.card{
    width:20rem;
   

}






/********* services ******/
.service .icon{
    font-size: 4rem;
}

.projects-list .card,
.service.card{
    width:90%;
    max-width:32rem;
    padding:3rem  2rem;
}

/********* projects ******/
.project{
    position: relative;
    overflow: hidden;
}

.project__overlay{
    position: absolute;
    top:0;
    left:0;
    height: 100%;
    width: 100%;
    background-color: rgba(0, 0, 0, 0.766);
    display: flex;
    justify-content: center;
    align-items:center;
    transform: scale(0);
    transition: all 0.5s;

}
.project:hover .project__overlay{
    transform: scale(1);
}
.project__tags{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    justify-content:center;
    gap:1rem;
    margin:1rem auto;
   


}
.tag{
  font-size:1.4rem;
  border-radius:1rem;
  background-color:var(--clr-primary);
  color:#fff;
  padding:0.5rem 1.5rem;
}

/****** contact me **********/
.form__gp--flex,
.form{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap:2rem;
    
}

.form__input{
width:32rem;

padding:1rem;
background-color:#353535;
background-color:var(--clr-bg-secondary);
color:var(--clr-txt);
border:none;
outline: none;
border-bottom:4px solid rgba(151, 142, 142, 0.4);

}

.form__input:focus{
    border-bottom: 4px solid  var(--clr-primary);
}

.form__input:focus:invalid{
    border-bottom: 4px solid red;
}
.form__input:focus:valid{
    border-bottom: 4px solid  var(--clr-primary);
}
.form__label{
    display: block;
}

/***** footer *******/
.footer__list{
 gap:2rem;
 margin:2rem 0;
}
.footer__icon{
    font-size: 4.4rem;
}
.footer__link:link,
.footer__link:visited{
    color:var(--clr-txt);
}
.footer__link:hover,
.footer__link:active{
  
    color:  var(--clr-primary);

}
.cp{
    color:var(--clr-txt);
    font-size: 1.4rem;
    text-align: center;
}
.footer-cp__link:link,
.footer-cp__link:visited
{
    border-radius: 0;
    color:var(--clr-primary);
    box-shadow: 0 4px 2px -2px var(--clr-primary);
}