@font-face{
  font-family: "Ethnocentric";
  src: url('assets/fonts/ethnocentric_rg.ttf');
  font-style: normal;
  font-display: swap;
}
@font-face{
  font-family: "Exo 2" ;
  src: url('assets/fonts/exo2_variable.ttf');
  font-style: normal;
  font-display: swap;
}

:root{
  /*Typography*/
  --headerFont: "Ethnocentric", sans-serif;
  --primaryFont:  "Exo 2", sans-serif;


  /*Colors*/

  /*Light Theme(Default)*/
  --primaryColor: hsl(210, 10%, 8%);
  --secondaryColor: hsl(0, 57%, 56%);
  --headerColor: hsla(210, 30%, 18%, 0.6);
  --hoverColor: hsl(0, 92%, 65%);
  --shadowColor: hsl(209, 70%, 25%);
  --fontcolorPrimary: hsl(0, 0%, 95%);   
  --boxBorderColor: hsla(210, 42%, 22%, 0.4);
  --bgColor: hsla(210, 30%, 18%, 0.5);
  --sectionColor:hsla(215, 75%, 85%, 0.75);
  --progressStrokeNormal: hsl(0, 0%, 95%); 

  --githubColor: hsl(0, 0%, 20%);
  --linkedinColor: hsl(210, 90%, 40%);
  --gmailColor:hsl(5, 81%, 56%); 

}
/*Dark Theme*/
.dark_theme{
  --primaryColor: hsl(0, 57%, 56%);
  --secondaryColor: hsl(209, 31%, 18%);
  --headerColor: hsla(0, 57%, 56%, 0.9);
  --hoverColor: hsl(0, 0%, 95%);
  --shadowColor:hsl(0, 40%, 52%);  
  --fontcolorPrimary: hsl(210, 60%, 14%); 
  --boxBorderColor: hsla(0, 57%, 56%, 0.300);
  --bgColor: hsla(0, 17%, 12%, 0.5);  
  --sectionColor: hsla(214, 65%, 17%, 0.9);  
  --progressStrokeNormal: hsl(204, 65%, 36%); 
}

*,*::after,*::before{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
h2{
  font-size: 1.4rem;
  margin-block: .5rem .25rem; 
}
h3{
  text-align: center;
  padding-block: .5rem .25rem; 
  font-size: 1.3rem;
}
p{
  font-size: 1.1rem;
  line-height: 1.4;
}
ul li {
  line-height: 1.4;
  list-style:none ;
}

html,body{
  min-height: 100vh;
  scroll-padding-block-start: 2.75rem;
  scroll-behavior: smooth;
}
img{
max-width: 100%;
height: auto;
display: block;
}
body{
  background:linear-gradient(var(--bgColor)), url('assets/images/bg-mobile.webp');
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: fixed;
  background-position: top 3vh right 0vw;
  font-family: var(--primaryFont);
  font-size: 1rem;
  font-weight: 500;
  color: var(--primaryColor); 
}

header{
  background: var(--headerColor);
  color: var(--fontcolorPrimary);
  display: flex;
  align-items: center;
  justify-content: space-between;
  backdrop-filter: blur(5px);
  border-bottom: 1.5px solid var(--primaryColor);
  padding: .4rem .5rem;
  position: fixed;
  width: 100%;
  z-index: 10;
}
a.header_logo{
  max-width: 12rem;
  font-size: 1.15rem;
  color: var(--fontcolorPrimary);
  font-family: var(--headerFont); 
  transition: .6s;
  line-height: 1;
  cursor: pointer;
  text-decoration: none;

}
a.header_logo span{
  font-family: var(--primaryFont);
  font-size: 1rem;
  font-weight: normal;
  letter-spacing: 1.65px;
  white-space: nowrap;
}
a.header_logo:active{
  transform: scale(1.05);
}
.themeBtn{
  background-color: var(--primaryColor);
  color: var(--fontcolorPrimary);
  font-family: var(--primaryFont);
  font-weight: 500;
  padding: .3rem .5rem;
  border-radius: 30px;
  border: 2px solid var(--primaryColor);
  cursor: pointer;
  transition: .6s;
  overflow: hidden;
}

.themeBtn:active{
  background-color: var(--secondaryColor);
  color: var(--primaryColor);
}

nav ul{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-evenly;
  position: absolute;
  background-color: var(--headerColor);
  top: 100%;
  height: 35vh;
  left: 0;
  right: 0;
  border-radius: 0 0 25px 25px ;
  backdrop-filter: blur(5px);
  border-bottom: 3px solid var(--hoverColor);
  transform: scaleY(0);
  transform-origin: top;
  transition: .6s ease-in-out;
  opacity: 0;
  pointer-events: none;
}

.show_menu ul{
  transform: scaleY(1) ;
  opacity: 1;
  z-index: 2000;
  pointer-events: auto;
}


nav ul li a{
  position: relative;
  color: var(--fontcolorPrimary);
  font-weight: 600;
  text-decoration: none;
  padding: 0 6px;
  background-image: linear-gradient(to left, var(--hoverColor) 50%,var(--fontcolorPrimary) 50%);
  background-size: 200% 100%;
  background-position:  0 100%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  transition: .6s ease-in-out;
}
nav ul li a:active,
nav ul li a.active{
  background-position: 100% 0;
}

/*Border bottom effect*/
nav ul li a::after{
  content:'';
  position: absolute;
  left: 0;
  bottom: -8px;
  width: 100%;
  height: 3px;
  border-radius: 3px;
  background-color: var(--hoverColor);
  transform: scaleX(0);
  transform-origin: left;
  transition: .6s ease-in-out;
}
nav a.active::after{
  transform: scaleX(1);  
}

.menu_icon{
  width: 2rem;
  height: 1.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-around;
  cursor: pointer;
}
.menu_icon span{
  width: 100%;
  height: 3px;
  background-color: var(--fontcolorPrimary);
  border-radius: 3px;
  transition: .6s ease-in-out;
  display: block;
}
.menu_icon:active span,
.menu_icon.active_menu span{
  background-color: var(--hoverColor);
}
.menu_icon.active_menu span:nth-child(1){
  transform: rotate(45deg) translate(5px,6px);
}
.menu_icon.active_menu span:nth-child(2){
  opacity: 0;
}
.menu_icon.active_menu span:nth-child(3){
  transform: rotate(-45deg) translate(5px, -6px) ;
}

main{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 0;
  gap: .65rem;
}

/*For scrolling effects*/
section{
 overflow: hidden;
}

.home{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-color: var(--sectionColor);
  padding: 3.5rem .75rem .85rem;
  width: 100%;
}
.home_container{
  display: flex;
  flex-direction: column-reverse;
  gap: .30rem;
}
.home_text{
  display: flex;
  flex-direction: column;
  align-items: center;  
  border-top: 5px solid var(--primaryColor);
  border-radius: 20px;
  box-shadow:0 3px 5px rgba(0,0,0,0.4);
  padding: .25rem .5rem .5rem;
}
.home_text p{
  font-weight: 600;
}
.home_text h1{
  font-size: 1.75rem;
  margin-block: 0;
}
p.description{
  font-weight: 500;
  text-align: center;
}
p.text_animation{
  text-align: left;
  border: none;
  font-size: 1.5rem;
  margin-block: 0;  
}
p.text_animation span{
  position: relative;
  display: inline-block;
  color: transparent;
   -webkit-text-stroke: .75px var(--headerColor);
  white-space: nowrap;
}
p.text_animation span::before{
  content: attr(data-text);
  position: absolute;
  left: 0;
  right: 0;
  width: 0;
  color: var(--hoverColor);
  white-space: nowrap;
  overflow: hidden;
  border-right: 2px solid var(--hoverColor);
  animation: typing 3s steps(40) infinite;
}
@keyframes typing{
  0%,100%{ width: 0}
  60%,80%{ width:100%}
}
h2.skill{
  font-weight: bold;
  font-size: 1rem;
  margin-block: .25rem .45rem; 
}

.action{
  display: flex;
  gap: 1rem;
  margin-block: .75rem; 
}
.btn{
  background: var(--primaryColor);
  color: var(--fontcolorPrimary);
  border: 2px solid var(--primaryColor);
  box-shadow: 0 0 6px var(--shadowColor);
  text-align: center;
  padding: .5rem .85rem;
  border-radius: 20px;
  font-weight: 400; 
  cursor: pointer;
  text-decoration: none;
  transition: .6s ease;  
}
.btn:active{
  background: transparent;
  color: var(--primaryColor);
  transform: scale(1.05) ;
}
.social_icon{
  margin-inline: auto;  
}
.social_icon i{
  color: var(--primaryColor);
  font-size: 1.5rem;
  text-align: center;
  cursor: pointer;
  transition: .6s;
  padding: .5rem;  
  border: 2px solid var(--primaryColor);
  border-radius: 50%;
  margin-right: 1rem;  
}
.social_icon i:active{
  transform: rotate(360deg);
  box-shadow:0 0 10px var(--shadowColor);  
  color: var(--fontcolorPrimary);
}
.github i:active{
  background: var(--githubColor);
  box-shadow:0 0 10px var(--githubColor);
  border: 2px solid var(--githubColor);
}
.linkedin i:active{
  background: var(--linkedinColor);
  box-shadow:0 0 10px var(--linkedinColor);
  border: 2px solid var(--linkedinColor);
}
.gmail i:active{
  background: var(--gmailColor) ;
  box-shadow:0 0 10px var(--gmailColor);
  border: 2px solid var(--gmailColor);
}
.home_image {
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: 90%;
  margin-inline: auto;
  animation-name: avatarMobile ;
  animation-iteration-count: infinite;
  animation-duration: 4s;
} 

@keyframes avatarMobile{
  0%{
    transform: translateX(-20px);
  } 50%{  
    transform: translateX(20px);
} 100%{
    transform: translateX(-20px);
}
}
.home_image img{
  border-radius: 50%;
  border: 10px solid var(--primaryColor);
  box-shadow: 0 0 20px var(--shadowColor); 
  opacity: .9;
}

.about{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-color: var(--sectionColor);
  padding: .5rem .75rem .85rem;
}
.about_container{
  border-top: 5px solid var(--primaryColor);
  border-radius: 20px;
  box-shadow:0 3px 5px rgba(0,0,0,0.4);
}
.about_container p{
  padding: .5rem;
}

.skills{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-color: var(--sectionColor);
  width: 100%;
  padding: .5rem .75rem .85rem;
}
.skill_view{
  display: flex;
  flex-direction: column;
  width: 100%;
  gap: .75rem;
}
.wordpress_skill,
.supporting_skill{
  border-top: 5px solid var(--primaryColor);
  border-radius: 20px;
}

.skill_card{
  border-radius: 10px;
  padding: .5rem;
  margin-bottom: .25rem;
  box-shadow:0 3px 5px rgba(0,0,0,0.4);
}
.skill_card:active{
  transform: translateY(3px);
}

/* Skill Header */
.skill_header{
  display:flex;
  align-items:center;
  font-size: 1rem;
  font-weight: bold;
}
.skill_header i{
  font-size: 1.25rem;
}

/* Skill Description */
.skill_card p{
  font-size: 1.1rem;
  color: var(--shadowColor);
  margin: .15rem 0;
}

/* Progress Bar */
.progress_container{
  background: var(--headerColor);
  border-radius:20px;
  height: 14px;
  line-height: 1;
  overflow: hidden;
}
.progress_bar{
  height: 100%;
  border-radius:20px;
  text-align:right;
  padding-right: 10px;
  color: hsl(210, 60%, 14%);
  font-size: .9rem;
  transition: width 1s ease-in-out;
}
/* Gradient Colors */
.core { background: linear-gradient(90deg,#00aaff,#00ff88);}
.support { background: linear-gradient(90deg,#9b2cca,#ff69b4);
}

.projects{
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: var(--sectionColor);
  padding: .5rem .75rem .85rem;
}

.project_container{
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: .75rem;
}

.project_card{
  display: flex;
  flex-direction: column;  
  border-top: 5px solid var(--primaryColor);
  border-radius: 20px;
  box-shadow:0 3px 5px rgba(0,0,0,0.4);
  padding-block: 0 .5rem;
}
.project_title span{
  font-weight: bold;
}
.project_title{
  font-weight: 500;
}
.project_card p,
.project_card ul{
  font-size: 1.1rem;
} 
.project_card img{
   transition: .6s;
   width: 100%;
}
.project_card img:active{
  transform:scale(.98);
}
.project_card p,
.features{
  padding: .5rem .5rem 0;
}
span.info{
  font-weight: bold;
  display: block;
}
.score{
  display: flex;
  justify-content: space-between;
  padding: 0 .5rem;
  font-weight: 600;
}
.action_buttons{
  display: flex;
  justify-content: center;
  padding-block: .65rem .5rem;
}
.project_btn{  
  border-radius: 20px;
  width: 180px;
  box-shadow: none;
}
.project_btn:active{
  background-color: var(--secondaryColor);
  transform: scale(1.01);
  box-shadow: 0 0 6px var(--shadowColor);
}
.project_card li span{
  color: var(--primaryColor);
}

.services{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background-color: var(--sectionColor);
  padding: .5rem .75rem .85rem;
  width: 100%;
}
.services_area{
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: .75rem;
  width: 100%;
}
.service_card{
  display: flex;
  flex-direction: column;
  border-top: 5px solid var(--primaryColor);
  border-radius: 20px;
  box-shadow:0 3px 5px rgba(0,0,0,0.4);
  padding-block: 0 .5rem;
}
.service_card:hover{
  transform: translateY(5px);
}
.service_card h3{
  padding: .5rem;
}
.service_card ul{
  font-size: 1.1rem;
  padding: 0 .5rem;
}
.provided span{
  margin-inline-end: 2px;
  font-weight: bold;
  color: rgb(6, 80, 150);
}
.standards span{
  margin-inline-end: 2px;
  font-weight: bold;
  color: rgb(6, 126, 22);
}
.ethics span{
  margin-inline-end: 2px;
  font-weight: bold;
  color: rgb(83, 6, 128);
}

.contact{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-color: var(--sectionColor);
  padding: .5rem .75rem .85rem;
  width: 100%; 
}
.form_area{
  width: 100%;
  border-top: 5px solid var(--primaryColor);
  border-radius: 20px;
  box-shadow:0 3px 5px rgba(0,0,0,0.4);
}
form{
  margin-inline: auto;  
}
.contact_form{
  display: flex;
  flex-direction: column;
  width: 100%;
  padding: .5rem;
  gap: .5rem;
}

input,textarea{
background: transparent;
color: var(--primaryColor);
font-family: var(--primaryFont);
padding:  .6rem 1rem;
border-radius: .5rem;
border: 2px solid var(--boxBorderColor);
outline: none;
transition: .6s;
font-size: 1.1rem;
font-weight: 500;
}
input:focus,textarea:focus{
  background: transparent;
  box-shadow: 0 0 5px var(--shadowColor);
}
/*Chrome autofill fix*/
input:-webkit-autofill,
textarea:-webkit-autofill{
  -webkit-text-fill-color: var(--primaryColor);
  transition: background-color 5000s ease-in-out 0s;
}

input::placeholder,
textarea::placeholder{
  color: var(--primaryColor);
  opacity: .6;
}
.cf-turnstile{
  transform: scale(.9);
  transform-origin: left;
}

.send{  
  border-radius: 20px;
  box-shadow: none;
  width: 180px;
  margin-inline: auto;
}
.send:active{
  background-color: var(--secondaryColor);
  box-shadow: 0 0 6px var(--shadowColor);
  transform: scale(1.01);
}
.form_status{
  max-width: 100%;
  text-align: center;
  margin-block: 0 .35rem;
  font-weight: 500;
}

/*Scroll*/
.round{
  position: relative;
}
.scroll_circle {
  position: fixed;
  bottom: 25px;
  right: 20px;
  cursor: pointer;
  z-index: 999;
}
.scroll_circle:hover{
  filter:drop-shadow(0 0 15px var(--progressStrokeNormal));
  transform: scale(1.05);
}
.scroll_circle svg{
  transform: rotate(-90deg);
}
.scroll_circle circle{
  fill: var(--sectionColor);
  stroke-width: 4;
}
.bg{
  stroke: var(--progressStrokeNormal);
}
.progress {
  stroke: var(--hoverColor);
  stroke-dasharray: 150;
  stroke-dashoffset: 150;
  transition: stroke-dashoffset 0.4s linear;
}
.center_content {
  position: absolute;
  top: 42%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  font-size: 14px;
  font-weight: 600;
  color: var(--primaryColor);
}
.fa-arrow-up{
  display: block;
  font-size: 14px;
  margin-block-start: 8px;
  -webkit-text-stroke: 1.5px var(--primaryColor);
}
footer{
  background-color: var(--primaryColor);
  color: var(--fontcolorPrimary);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: .5rem .25rem;
}
footer a{
  color: var(--hoverColor);
  font-weight: bold;
  text-decoration: none;
  transition: .6s ease;
}
footer a:active{
  color: var(--fontcolorPrimary);
}

/*----Large Mobile View----*/
@media screen and (min-width: 576px){
 .home,
 .about,
 .skills,
 .projects,
 .services,
 .contact{
  padding-inline: 2rem ;
}
}
   
/*----Tablet View----*/
@media screen and (min-width: 768px){
  section{
  max-width: 85%;
  margin-inline: auto;
}
.home_image {
  animation-duration: 3s;
}
}

/*----Desktop View (Small Screen)----*/
@media screen and (min-width: 1024px){  

h2{
  font-size: 2rem;
  padding-block: .5rem;
}
body{
  background:linear-gradient(var(--bgColor)), url('assets/images/bg-desktop.webp');
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: fixed;
  background-position: top 0vh right 0vw;
}
header{
  padding: .35rem 2rem;
  border-bottom: 3px solid var(--primaryColor);
}
a.header_logo{
  max-width: 16rem;
  font-size: 1.5rem;
}
a.header_logo span{
  font-size: 1.15rem;
  letter-spacing: 3.45px;
}
a.header_logo:hover{
  transform: scale(1.05);
}
.themeBtn{
  font-weight: 600;
  padding: .45rem .75rem;
  border: 3px solid var(--primaryColor);
}
.themeBtn:hover{
  background-color: var(--secondaryColor);
  color: var(--primaryColor);
}

nav ul{
  flex-direction: row;
  justify-content: center;
  position: relative;
  height: auto;
  border-radius: 0;
  backdrop-filter: none;
  border-bottom: none;
  transform: none;
  transform-origin: none;
  opacity: 1;
  pointer-events: auto; 
  background-color: transparent;
}
.show_menu ul{
  transform: none;
}
nav ul li a{
  padding: 8px;
}
nav ul li a:hover,
nav ul li a.active{
  background-position: 100% 0;
}
/*Border bottom effect*/
nav ul li a::after{
  bottom: -16px;
}

.menu_icon{
  display: none;
}
section{ 
  min-height: 92vh;
  max-width: 85%;
}
.home{
  gap: .5rem;
  padding-inline: 1rem; 
  min-height: 100vh;
}
.home_container{ 
  flex-direction: row;
  flex: 1;
  border-top: 5px solid var(--primaryColor);
  border-radius: 20px;
  box-shadow:0 3px 5px rgba(0,0,0,0.4);
  padding: .5rem;
  margin-top: 3.75rem;  
 }
.home_text{
  justify-content: center;
  text-align: center;
  flex-basis: 55%;
  box-shadow: none;
  border: none;  
}
h2.skill{
  font-size: 1.15rem;
}
h2.skill{
  margin-block: .125rem; 
}

.home_text p{
  max-width: 80%;
}
.action{
  margin-block: 1.5rem; 
}
.btn{
  padding: .4rem .75rem;
}
.btn:hover{
  background: transparent;
  color: var(--primaryColor);
  transform: scale(1.05) ;
}
.social_icon i:hover{
  transform: rotate(360deg);
  box-shadow:0 0 6px var(--shadowColor);  
  color: var(--fontcolorPrimary);
}
.github i:hover{
  background: var(--githubColor);
  box-shadow:0 0 15px var(--githubColor);
  border: 2px solid var(--githubColor);
}
.linkedin i:hover{
  background: var(--linkedinColor);
  box-shadow:0 0 15px var(--linkedinColor);
  border: 2px solid var(--linkedinColor);
}
.gmail i:hover{
  background: var(--gmailColor) ;
  box-shadow:0 0 15px var(--gmailColor);
  border: 2px solid var(--gmailColor);
}
.home_image {
  flex-basis: 45%;
  margin-inline-end: 3rem;
  animation-name: avatarDesktop ;
  animation-iteration-count: infinite;
  animation-duration: 3s;
} 

@keyframes avatarDesktop{
  0%{
    transform: translateX(0px);
  } 50%{  
    transform: translateX(40px);
} 100%{
    transform: translateX(0);
}
}
.about{
  padding: .5rem 1rem 1rem;
  
}
.about h2{
  font-size: 2rem;
}
.about_container{
  display: flex;
  flex-direction: column;
  justify-content: center;
  flex: 1;  
}

.skills{
  padding: .5rem 1rem 1rem;
}
.skill_view{
  flex-direction: row;
   
}
.wordpress_skill{
  display: flex;
  flex-direction: column;
  flex-basis: 50%;
}
.supporting_skill{
  display: flex;
  flex-direction: column;
  flex-basis: 50%; 
}
.skill_card{
  transition: .6s;
  flex: 1;
}
.skill_card:hover{
  transform: translateY(3px);
}
.projects{
  padding: .5rem 1rem 1rem;
}
.project_container{
  flex-direction: row;
}

.project_card img:hover{
  transform:scale(.98);
}
.project_card{
  flex-basis: 33%;
}
.project_desc{
  min-height: 270px;
}
.features{
  min-height: 300px;
}

.project_btn:hover{
  background-color: var(--secondaryColor);
  transform: scale(1.01);
  box-shadow: 0 0 10px var(--shadowColor);
}
.services{
  min-height: 92vh;
  justify-content: flex-start;
  padding: .5rem 1rem 1rem;
}
.services_area{
  min-height: auto;
  flex-direction: row;
  justify-content: space-evenly;
 }
.provided,
.standards,
.ethics{
  flex-basis: 33%;
  transition: .6s;
}
.service_card h3{
  min-height: 70px;

}
.service_card ul{
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.contact{
  padding: .5rem 1rem 1rem;
  min-height: 80vh;
}
.form_area{
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.contact_form{
  display: flex;
  justify-content: center;
  gap: .3rem;
  width: 25rem;
}
.send:hover{
  background-color: var(--secondaryColor);
  box-shadow: 0 0 10px var(--shadowColor);
  transform: scale(1.01);
}
footer{
  padding: .4rem .25rem;
}
footer a:hover{
  color: var(--fontcolorPrimary);
}
}

/*----Extra Large Screen View----*/

@media screen and (min-width: 1920px){
  .home_container{
    max-width: 85%;
  }
  .about_container{
    max-width: 85%;
  }
  .skill_view{
    max-width: 85%;
  }
  .project_container{
    max-width: 85%;
  }
  .services_area{
    max-width: 85%;
  }
  .form_area{
    max-width: 85%;
  }
}