*{
    box-sizing: border-box;

}

html{
    scroll-behavior: smooth;

}

:root{
  --bodyBackground: #faf8ec;
}

body{
    margin: auto;
    font-family: sans-serif;
    background-color: var(--bodyBackground)
}

.introPage{
    
    background: url("../img/introPage-bg.jpg") no-repeat;
    background-position: left;
    background-size: 75%;
  }




/* navigation bar design */

.navbar{
    background: rgb(68, 68, 68);
    background: linear-gradient(180deg, rgb(75, 74, 74,.5) 0%, rgb(230, 230, 230,.1) 70%, rgba(255,255,255,.1) 100%);
    height: 5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    ;
}



.navLink>a{
    text-decoration: none;
    font-weight: bold;
    color: rgb(32, 32, 32);
    padding: 0.22rem 1em;
    padding-top: 8rem;
}

.navLink>a:last-child{
   padding-right: 4rem;
}




.navLink>a:hover{
    color: rgb(100, 82, 50);
}

/* navigation bar design end here */

/* intro section design start here */

.introSection{
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: end;
}

.introImg{
    padding: 0 10rem 0rem 4rem;
}

.introImg>.avater{
    height:20rem;
    border-radius: 100%;
    filter: drop-shadow(2mm 1mm 1mm rgb(97, 97, 97));
    transition: all 0.3s ease-in-out;
}

.introImg>.avater:hover{
    transform: scale(1.05);
}

.introText{
     padding: 0 0 0 3rem;
}

#highlight{
    color: rgb(255, 115, 0);
}

.introText>h1{
    font-size: xxx-large;
}

.animated>p{
    font-size: x-large;
    font-weight: bold;
}

.passion>a{
    text-decoration: none;
}

.contact{
    padding: 0;
    display: flex;
}

.contact>a>img{
    height: 3rem;
    width: 3rem;
    transition: all 0.33s ease-in-out;
}

.contact>a>img:hover{
    transform: scale(1.09)
}

.aboutMebtn{
    text-decoration: none;
    background-color: rgb(32, 32, 32);
    margin-left: 3px;
    margin-top: 2px;
    display: flex;
    align-items: center;
    padding: 0 10px;
    height: 2.7rem;
    border-radius: 8px;
    color: white;
    font-weight: bold;
    transition: all 0.33s ease-in-out;
}


.aboutMebtn:hover{
    transform: scale(1.09);
}

/* intro section design ends here */


/* about section design */

.aboutMeSection{
    display: grid;
    grid-template-columns: 1fr 3fr;
    background-color: rgb(234, 238, 186);
    position: relative;

}


.aboutMeImg>img{
    height: 30rem;
    margin: 0 0 0 10rem;
    padding: 3rem 0 17% 0;
    border-radius: 10rem 15%;
    transition: all .30s ease-in-out;
    -webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */
    filter: grayscale(100%);
}

.aboutMeTxt{
    width: 50%;
    margin: 5rem 0 0 0;
    line-height: 1.5rem;
}

.aboutMeImg>img:hover{
    transform: scale(1.02);
    -webkit-filter: none; /* Safari 6.0 - 9.0 */
    filter: none;
}

.bgSticker{
    position: absolute;
    height: 15rem;
    top: 5rem;
    right: 15rem;
    filter: drop-shadow(2mm 1mm 1mm rgb(97, 97, 97));
}

/* about section design ends here */



/*Start of the skill section*/



/* progress bar */

:root {
    --progress-bar-width: 100px;
    --progress-bar-height: 100px;
    --font-size: 1.5rem;
    --progressBarColor: #E49E83;
    --skillNameColor: #1A2130;
  }
  
  .circular-progress {
    width: var(--progress-bar-width);
    height: var(--progress-bar-height);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;

  }
  .inner-circle {
    position: absolute;
    width: calc(var(--progress-bar-width) - 15px);
    height: calc(var(--progress-bar-height) - 15px);
    border-radius: 50%;
    background-color: #faf8ec;
  }
  
  .percentage {
    position: relative;     
    font-size: var(--font-size);
    color: rgb(0, 0, 0, 0.8);
  }

  /*end of progress bar style */

/* skill section start */

  .skillSection{
    background-color: var(--bodyBackground);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 9rem 0 0 0;
  }

  .head{
    display:block;
  }

  .head>h1{
    text-align: center;
    padding: 2rem 0 0 0 ;
    margin: 0;
    color: #464646;
    /* drop-shadow(left-right up-down spread color) -- for reference */
  }

  .abilities{
    color: rgb(136, 54, 16);
  }


  .head>h3{
    color: rgb(246,151,151);
    color: linear-gradient(70deg, rgba(246,151,151,1) 0%, rgba(196,194,255,1) 100%);
    padding: 2rem 0 0 0rem;
    text-align: center;
  }

  .skillList{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
    padding: 0 2rem 0 2rem;
    background-color: white;
    width: 95%;
    border-radius: 9px;

  }

  .skill{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 2.5rem 0 0 0;
    margin: 2rem 1rem;
    border-radius: 61px;
    opacity: 0.9;
    transition: all .20s ease-in-out;
    background: #e0e0e0;
    box-shadow: inset 32px 32px 35px #a1a1a1,
                inset -32px -32px 35px #ffffff;
  } 

  .skill:hover{
    opacity: 1;
    transform: scale(1.02);
    filter: drop-shadow(0rem 0rem 10px black);
    box-shadow: inset -0.5rem -0.5rem 20px white;
  }
  .skillName>p{
    color: var(--skillNameColor);
    font-weight: bold;
    font-size: 1.2rem;
  }

  .system>h3{
    color:#148EEB;
  }

  .web>h3{
    color:#14eb38;
  }

  .redTeam>h3{
    color: #c52323;
  }


  /* gliching loading effect starts here */

  .loader{
    padding: 15rem 0;
    display:flex;
    justify-content: center;
  }
  .glitch {
    position: relative;
    font-size: 25px;
    font-weight: 700;
    line-height: 1.2;
    color: #c52323;
    letter-spacing: 5px;
    z-index: 1;
    animation: shift 1s ease-in-out infinite alternate;
    text-align: center;
    width: 70%;
  }
  
 

  @keyframes glitch {
    0% {
      transform: translate(0);
    }
  
    20% {
      transform: translate(-2px, 2px);
    }
  
    40% {
      transform: translate(-2px, -2px);
    }
  
    60% {
      transform: translate(2px, 2px);
    }
  
    80% {
      transform: translate(2px, -2px);
    }
  
    to {
      transform: translate(0);
    }
  }
  
  @keyframes shift {
    0%, 40%, 44%, 58%, 61%, 65%, 69%, 73%, 100% {
      transform: skewX(0deg);
    }
  
    41% {
      transform: skewX(8deg);
    }
  
    42% {
      transform: skewX(-8deg);
    }
  
    59% {
      transform: skewX(30deg) skewY(10deg);
    }
  
    60% {
      transform: skewX(-25deg) skewY(-10deg);
    }
  
    63% {
      transform: skewX(10deg) skewY(-5deg);
    }
  
    70% {
      transform: skewX(-40deg) skewY(-20deg);
    }
  
    71% {
      transform: skewX(10deg) skewY(-10deg);
    }
  }
  

  /* gliching loading effect Ends here*/

/*Skill Section ends here*/

/*Education Section Starts Here*/

.educationSection{
  display: flex;
  flex-direction: column;
  font-family: "Roboto", sans-serif;
  font-style: normal;
}

.education{
  padding: 0 0 3rem 0;
}

.eduHeader{ 
  text-align: center;
}

.eduHeader>h1>span{
  color: #3d5a80
}

.institute{
  display: flex;
  padding: 3rem;
  background-color: #293241;
  margin: 1rem 19rem;
  border-radius: 30px;
  
}

.img>img{
  height: 10rem;
  width: 15rem;
  border-radius: 20px;
}

.eduInfo{
  padding: 0 0 0 2rem;
  color:#FFAC84;
}

.eduInfo>p{
  line-height: 0.5rem;
  font-weight: 500;
}

.eduInfo>header>h2{
  font-weight: bold;
}

.eduInfo>p:nth-child(2){
  color: rgb(4, 180, 13);
  font-weight: 500;
}


/* work section start here */

:root{
  --speechBubbleColor: rgb(205, 240, 207);
}

.workSection{
  position: relative;
  margin: 4rem 0 0 0;
}

.workHead{
  display: flex;
  align-items: center;
  justify-content: center;
  span{
    color: rgb(95, 189, 145);
  }
}

.lineContainer{
  display: flex;
  justify-content: center;
  align-items: center;
}

.verticalLine{
  background-color: rgb(41, 41, 41);
  width: 5px;
  height: 47rem;
}

.workIcon{
  background-color: red;
  border: solid 2px rgb(70, 70, 70);
  display: inline;
  position: absolute;
  border-radius: 100%;
  background-color: var(--bodyBackground);
  top: 15%;
  left: 48.5%;
}

#work2Icon{
  top: 23.7rem;
}

#work3Icon{
  top: 39.7rem;
}

.fa-briefCase{
  height: 50px;
  width: 50px;
  padding: 7px 3px;
}


.bubblePointerLeft{
  background-color: black;
  height: 0;
  width: 0;
  border-top: 20px solid var(--bodyBackground);
  border-left: 20px solid var(--bodyBackground);
  border-bottom: 20px solid var(--bodyBackground);
  border-right: 20px solid var(--speechBubbleColor)

}


.bubblePointerRight{
  background-color: black;
  height: 0;
  width: 0;
  border-top: 20px solid var(--bodyBackground);
  border-left: 20px solid var(--speechBubbleColor);
  border-bottom: 20px solid var(--bodyBackground);
  border-right: 20px solid var(--bodyBackground);

}

.works{
  background-color: var(--speechBubbleColor);
  display: inline-block;
  position: absolute;
  padding: 2rem;  
  border-radius: 12px;
}

#work1{
  top: 15%;
  right: 22.32%;
}

#work1Pointer{
  position: absolute;
  right: 24rem;
  top: 0.7rem;
}

#work2{
  top: 23.5rem;
  left: 17.32rem;
}


#work2Pointer{
  position: absolute;
  left: 31.3rem;
  top: 0.7rem;
}

#work3{
  top: 39.5rem;
  right: 9.32rem;
}


#work3Pointer{
  position: absolute;
  right: 40.2rem;
  top: 0.7rem;
}

.workTitle span{
  color: rgb(105, 2, 189);
}


.speechBubble{
  color: rgb(41, 41, 41);
  opacity: 0.8;
}


/* work section ends here */


/* certification section starts here */

.certificationSection{
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
  padding: 2rem 1rem 5rem 2rem;
}

.certificationHead{
  text-align: center;
  padding: 10rem 2rem 2rem 2rem;
  h1{
    span{
      color: #815355;
    }
  }
}

.certification{
  background-color: rgba(241, 208, 208, 0.596);
  margin: 0 0.5rem;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 20px;
  overflow: hidden;
  transition: transform 0.4s ease-in-out;
}

.certification:hover{
  transform: scale(1.05)
}

/* certification section ends here */


/*footer*/

footer{
  text-align: center;
  background-color: #1A2130;
  color: white;
  padding: 3rem 5rem 0 5rem;
}

.footerContainer{
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
}

.quickLinks>a{
  display: flex; 
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-end;
  color: white;
  text-decoration: none;
  padding: 0.5rem 0
}

hr{
  opacity: 0.2;
}
.quickLinks>a:hover{
  color: rgb(161, 231, 161);
}

/* foote end */


/* responsive design for small screen */




@media screen and (max-width:480px) {
  .navbar{
    display: none;
  }

  .introPage{
    background-position: right;
  }

  .introSection{
    display: grid;
    grid-template-columns: 1fr;
    align-items: center;
    justify-content: center;
    padding: 0 1rem;
  }
  .introText{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 0;
  }
  .introText>h1{
    font-size: x-large;
    white-space: pre;
}

.animated>p{
  font-size: large;
  font-weight: bold;
}
.contact{
  justify-content: center;
}

.introImg{
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}

.aboutMeSection{
  grid-template-columns: 1fr;
}

.aboutMeImg{
  display: grid;
  grid-template-columns: 1fr;
  justify-content: center;
  align-content: center;
}
.aboutMeImg>img{
  margin: auto;
}

.aboutMeTxt{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  padding: 0 2rem;
}
.bgSticker{
  display: none;
}

.skillList{
  grid-template-columns: 1fr;
}

.educationSection{
  padding: 0 0.5rem;
}

.education{
  display: grid;
  grid-template-columns: 1fr;
  padding: 0;
}

.institute{
  margin: 0.5rem 0;
  display: grid;
  justify-content: center;
  align-content: center;
}

.lineContainer{
  display: none;
}

.workSection{
  padding: 0 0.5rem;
}

.workIcon{
  display: none;
}

.bubblePointerLeft, .bubblePointerRight{
  display: none;
}

.works{
  position:initial;
  margin: 0.5rem 0;
}

.certificationSection{
  grid-template-columns: 1fr;
  padding: 0 1rem;
}

.certification{
  margin: 0.5rem 0;
}

.footerContainer{
  grid-template-columns: 1fr;
}

.quickLinks>a{
  justify-content: center;
  align-items: center;
  border: solid 1px white;
  margin: 0.5rem 0;
  border-radius: 25px;
}


}


@media screen and (max-width:1249px) and (min-width: 479px){
  .introPage{
    background-size: 50%;
    background-position: center;
  }
  .navbar{
    width: 100%;
    justify-content: flex-start;
  }

  .bgSticker{
    left:40%;
    opacity: 0.1;
  }

  .skillList{
    grid-template-columns: 1fr 1fr;
  }
  .educationSection{
    padding: 0 1rem;
  }
  .education{
    display: grid;
    grid-template-columns: 1fr;
    padding: 0;
  }
  
  .institute{
    margin: 0.5rem 0;
    display: grid;
    grid-template-columns: 1fr 2fr;
    align-items: center;
  }

  .workSection{
    margin: 4rem 1rem 0 1rem;
  }


  .workIcon{
    display: none;
  }
  .bubblePointerLeft, .bubblePointerRight{
    display: none;
  }

  .works{
    display: grid;
    width: 100%;
    text-align: center;
  }
  #work1,#work2, #work3{
    left: 0;
  }
  
  .certificationSection{
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
  }

  .certification{
    margin: 5% 5%;
  }

  .quickLinks>a{
    justify-content: center;
    align-items: center;
    border: solid 1px white;
    margin: 0.5rem 0;
    border-radius: 25px;
  }

}

/*for large Screens*/

@media screen and (max-width: 1600px) and (min-width: 1250px) {
  .introPage{
    background-size: 50%;
    background-position: center;
  }
  .bgSticker{
    left:40%;
    opacity: 0.1;
  }
  .aboutMeTxt{
    padding: 0 0 0 3rem;
  }
  .skillList{
    grid-template-columns: 1fr 1fr 1fr 1fr;
  }

  

  .workIcon{
    display: none;
  }
  .bubblePointerLeft, .bubblePointerRight{
    display: none;
  }
  #work1{
    left: 50%;
  }
  #work2{
    right: 50%;
  }
  #work3{
    left: 50%;
  }

  .certificationSection{
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
  }
  .certification{
    margin: 5% 5%;
  }

  .quickLinks>a{
    justify-content: center;
    align-items: center;
    border: solid 1px white;
    margin: 0.5rem 0;
    border-radius: 25px;
  }
}


@media screen and (max-width: 780px) and (min-width: 479px) {
  .introSection{
    display: grid;
    justify-content: center;
    align-items: center;
  }
  .introImg{
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .aboutMeSection{
    grid-template-columns: 1fr;
  }
  .aboutMeTxt{
    width: 100%;
    margin: 2rem 0 0 0;
    text-align: center;
  }
  .aboutMeImg  {
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .aboutMeImg>img{
    margin: auto;
  }
  .bgSticker{
    left:30%;
    opacity: 0.1;
    top: 75%;
    height: 150px;
  } 
  
  .certificationSection{
    grid-template-columns: 1fr 1fr;
  } 
  .footerContainer{
    grid-template-columns: 1fr 1fr;    justify-content: center;
    align-items: center;
    width: 100%;
  }
  .basicInfo, .contactInfo{
    padding: 1rem;
  }
}