@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@200;300;400;600&display=swap');




@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@200;300;400;600&display=swap');

* {
  font-family: 'Nunito', Arial, Helvetica, sans-serif;
  box-sizing: border-box;
  text-decoration: none;
  text-transform: none;
  margin: 1px;
  padding: 0;
  transition: all 0.2s linear;
}




:root {
  --dodgerblue: #22b6f1;
  --white: #ffffff;
  --darkGreen: rgb(55, 98, 55);
}

html {
  font-size: 60%;
  scroll-behavior: smooth;
  overflow-x: hidden;
}

body {
  background: #fff;
  overflow-x: hidden;
  padding-left: 34rem;
}

/* select text with color  */
*::selection {
  background: var(--darkGreen);
  color: #faf8f8;
}

section {
  padding: 1.5rem 0;
  /* margin-bottom: 5rem; */
  margin: 0 auto;
  margin-left: 1%;
  width: 100%;
  box-sizing: border-box;
}

.heading {
  text-align: center;
  margin-top: .2rem;
  margin: 0 .4rem;
  padding: 1rem;
  font-weight: 600;
  font-size: 3rem;
  color: #0e0231;
  border-bottom: 1.5rem solid rgba(136, 140, 140, 0.25);
  width: 85%;
  text-transform: uppercase;
}

/* Header Section - left navbar */
header {
  display: flex;
  flex-flow: column;
  position: fixed;
  top: 0;
  left: 0;
  height: 100vh;
  width: 35rem;
  text-align: center;
  background: #e4e3e3;
  align-items: center;
  justify-content: center;
  overflow-y: auto;
  z-index: 1000;
}

header .myPhoto img {
  height: 12rem;
  width: 12rem;
  object-fit: cover;
  margin-top: 1rem;
  border-radius: 50rem;
  outline: none;
  transform: rotate(-10deg);
}

header .myPhoto .name {
  font-size: 3.1rem;
  color: #222;
}

header .myPhoto .jobTitle {
  font-size: 2rem;
  color: #797575;
}

header .navbar {
  width: 100%;
  margin-top: 10px;
}

header .navbar ul {
  list-style: none;
  padding: .2rem 5rem;
}

header .navbar ul li a {
  display: block;
  padding: 1rem;
  margin: 1.5rem 0;
  background: #b0b0b2;
  color: #575656;
  font-size: 1.7rem;
  border-radius: 3rem;
}

header .navbar ul li a:hover {
  background: var(--white);
  color: #1e90ff;
  font-weight: 800;
}

#ham-menu {
  display: none;
  top: 1.5rem;
  right: 2rem;
  position: fixed;
  background: #10aede;
  color: #fff;
  cursor: pointer;
  font-size: 2.5rem;
  padding: .7rem;
  z-index: 1000;
}

/* social media */
.fa {
  padding: 4px;
  font-size: 20px;
  width: 45px;
  border-radius: 25%;
  text-align: center;
  text-decoration: none;
  margin: 7px 4px;
}

.fa:hover {
  opacity: 0.8;
}

.fa-linkedin {
  background: #007bb5;
  color: white;
  font-size: 30px;
  margin-top: 5px;
}

.fa-linkedin:hover {
  background: #fff;
  color: #096894;
}


/* resume btn and coverletter btn animation */
.about-btn {
  font-size: 16px;
  padding: 20px 20px;
  border: 2px solid #000;
  background-color: #f0f0f0;
  cursor: pointer;
  display: inline-block;
  transition: background-color 0.3s ease-in-out;
}

.about-btn a {
  text-decoration: none;
  color: inherit;
  display: inline-block;
}

.about-btn:hover {
  background-color: #4CAF50; /* Change background on hover */
  transform: scale(1.5); /* Button grows on hover */
  z-index: 10; /* Make sure the button is above other elements */
}

@keyframes pulse {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.4); /* Button grows */
    margin: 18px;
    color:red;
  }
  100% {
    transform: scale(.7);
  }
}

.about-btn {
  animation: pulse 2s infinite; /* Infinite pulse animation */
}



.button {
  padding: .1rem 2rem;
  background: #d1eaf2;
  color: white;
  cursor: pointer;
  margin-top: 1rem;
  font-size: 1.3rem;
  border-radius: 1rem;
  border: none;
}

.button i {
  padding: 0.3rem;
  font-size: 1.3rem;
}

.button:hover {
  color: #0389aa;
  background: #cdcaca;
  font-weight: 800;
  border-radius: 5px 99% 99% 5px;
  text-align: left;
  /* create shadow  */
  -webkit-transform: scale(1.1);
  -moz-transform: scale(1.1);
  -ms-transform: scale(1.1);
  -o-transform: scale(1.1);
}

/* hello section */
.hello {
  display: flex;
  flex-flow: column;
  justify-content: left;
  padding: 1rem 4rem;
  margin-top: 50px;
}

.starting-info {
  font-size: 14px;
  font-weight: 500;
}

h1 {
  width: 100%;
 /*   background-image: repeating-linear-gradient(20deg,
      rgb(229, 235, 236) 10%,
      rgb(186, 237, 237) 12%,
      rgb(162, 195, 145) 22%);*/
  filter: drop-shadow(5px 10px 30px rgb(138, 145, 148));
  border-radius: 25px;
  font-size: 45px;
  font-weight: 700;
  /* color mask the text - add bg color to text 
  background: -webkit-linear-gradient(#16c8e7, rgb(21, 5, 99));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;*/
}

.proj {
  margin-top: 2.5rem;
  font-size: 20px;
  /* gradient text */
  background: -webkit-linear-gradient(#bde6ee, #054c50);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* About  Section */
.about .row {
  display: flex;
  align-items: left;
  justify-content: left; 
  flex-wrap: wrap;
  padding: .1rem 0;
}

.about .row .info {
  flex: 1 1 55rem;
  padding: 2rem 1rem;
  padding-left: 2.5rem;
}

.about .row .info h4 {
  font-size: 1.5rem;
  color: var(--darkGreen);
  font-weight: 500;
  padding: .1rem 0;
}

.about-btn {
  position: relative;
  border-radius: 0 90% 90% 0;
  min-width: 15%;
  padding: 5px;
  border: none;
  margin-top: 5px;
}

.about .row .skills-container {
  flex: 1 1 40rem;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
}

.about .row .skills-container {
  padding: 1.5rem;
  margin: 2rem;
  text-align: center;
  border-radius: 10px;
}

.all-skills {
  width: 100%;
}

.skill-container {
  width: 100%;
  background-color: #ddd;
  /* font-size: .1rem;
  margin-bottom: 0; */
  font-size: 1.5rem;
  font-weight: 500;
  padding: .1rem 0;
}

.course {
  font-size: 1.8rem;
}

.my-skills {
  color: #a5a8ac;
  font-weight: 800;
  font-size: 3rem;
  font-weight: 500;
  margin-top: 15px;
}

.progress-bar {
  text-align: right;
  color: white;
  height: 13px;
  font-size: 12px;
  line-height: 4px;
  padding-top: 4px;
  padding-bottom: 4px;
  font-weight: 700;
}

/* courses progress bar */
.html {
  width: 90%;
  background-color: #ff1616;
}

.css {
  width: 80%;
  background-color: #e94a97;
}

.bootstrap {
  width: 70%;
  background-color: #a123e9;
}

.js {
  width: 60%;
  background-color: #23b2d3;
}

.jQuery {
  width: 60%;
  background-color: #0dcb1d;
}

.react {
  width: 40%;
  background-color: #ccd175;
}


.school-info {
  font-size: 12px;
}

/* Education Section Starts */
.education .education-container {
  display: flex;
  align-items: center;
  text-align: left;
  flex-wrap: wrap;
  padding: .4rem 2px;
  margin: 2rem;
  flex-direction: row;
  width: 90%;
  padding: 1rem;
  background-color: rgb(235, 235, 235);
  border-radius: 30px;
  margin-bottom: 15px;
}

.education .education-container .school {
  width: 90%;
  margin: .5rem 1.2rem;
  padding-left: 1.2rem;
  border-left: .2rem solid rgb(6, 91, 122);
  position: relative;
}

.education .education-container .school span {
  font-size: 2.3rem;
  background: rgb(197, 202, 203);
  color: #fff;
  border-radius: 5rem;
  padding: .5rem 1.5rem;
}

.education .education-container .school h3 {
  font-size: 2.1rem;
  color: rgb(11, 146, 176);
  padding: .5rem 1.5rem;
  left: 0;
}

.education .education-container .school-info p {
  font-size: 1.4rem;
  color: rgb(103, 96, 67);
  padding: 1rem 0;
  font-weight: 600;
}

a {
  color: rgb(111, 112, 115);
}

a:hover {
  color: rgb(12, 72, 146);
  font-weight: 800;
}

h4 {
  font-size: 14px;
}

h3 {
  font-size: 2.5rem;
  padding-left: 30%;
  padding-top: .8rem;
  color: #096894;
  font-weight: 800;
}



.projectCategoryImg {
  float: left;
  border-style: inset;
  margin: 5px 15px 15px 15px;
  box-shadow: 5px 5px 20px 6px rgb(116, 119, 120);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  width: 90%;
  height: auto;
  min-height: 200px;
  max-width: 500px;
  padding: 0;
}

.projects {
  display: flex;
  flex-wrap: wrap;
  padding: 0;
  margin: 0;
}

.projectDesc {
  font-size: 14px;
  padding: 5px;
  margin-left:5px;
}

/* Contact Section */
.contact .row {
  display: flex;
  align-items: center;
  justify-content: center;
  /* flex-wrap: wrap; */
}

.contact .row .content {
  flex: 1 1 30rem;
  padding: 5rem;
  padding-bottom: 0;
}

section .projects {
  display: flex;
  flex-direction: column;
  font-family: 'Courier New', Courier, monospace;
  background: #ffffff;
  font-weight: 800;
  font-size: 20px;
  align-items: center;
  flex-wrap: wrap;
  width: fit-content;
  border-radius: 40px;
  justify-content: center;
}

.proj-category {
  transition: all 1s ease-out;
  min-width: 200px;
  background: linear-gradient(0.105turn, #0f1010, #8ee1ee, #052845);
  position: relative;
  margin: 15px;
}

.proj-category:hover {
  cursor: pointer;
}

.proj-category:hover img {
  opacity: 0.1;
}
.proj-category img {
  justify-content: center;
  margin: 5px auto;
}

.project-info {
  width: 90%;
  height: 90%;
  position: absolute;
  /* text coming from top */
  top: -122px;
  left: 17%;
  color: #031e32;
  font-weight: 800;
}

.project-info h3 {
  color: rgb(60, 80, 10);
  font-weight: 800;
}

.proj-category:hover .project-info {
  top: 10%;
}

.proj-category:hover .button {
  bottom: 8%;
}
proj-category > img{
  width: 270px;
  height: 180px;
}

/* btn in project categories */
.button {
  position: absolute;
}

/* stack category containers on top of each other */
.proj-category {
  position: relative;
  overflow: hidden;
}

.proj-category .button {
  position: absolute;
   /* move btn from -200 bottom */
  bottom: -200px;
  /* btn:in the middle left 20 + then 20 percents for right + width60 become 100 percent */
  left: 20%;
  width: 50%;
  border: 1px solid #095a60;
  padding: 5px;
  transition: all 0.3s ease-in-out;
  border-radius: 8px;
  margin-left: 20px;
  text-align: center;
  box-sizing: border-box;
  box-shadow: 20px 20px 10px rgb(103, 110, 110);
}

.proj-container {
  margin-top: 20px;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  flex-direction: row;
  width: 100%;
}

.projects img {
  width: 104%;
  height: 100%;
  border-radius: 17px;
  vertical-align: top;
}

/* title */
.contact .row .contact-content .title {
  text-transform: uppercase;
  color: #222;
  font-size: 3rem;
  padding-bottom: 2rem;
}

/* contact info */
.contact .row .contact-content .info h3 {
  display: flex;
  align-items: center;
  font-size: 1.5rem;
  text-transform: none;
  color: #222;
  padding: 1rem 0;
  font-weight: normal;
}

.contact .row .contact-content .info h3 i {
  padding-right: 1rem;
  color: var(--darkGreen);
}


/* Hello - animation*/
.hello-content h2 {
  /* position of text - moves to left top*/
  transform: translate(-30%, -50%);
  position: absolute;
  padding-bottom: 35px;
  padding-left: 30%;
  font-size: 5rem;
}

/* make the second hello clear*/
.hello-content h2:nth-child(1) {
  /* make text Hello to disappear */
  color: transparent;
  text-shadow:
       4px 4px 0 #babcbd,
      -.5px -.5px 0 #ede9e9,  
      .5px -.5px 0 #d1d0d0,
      -.5px .5px 0 #959595,
      .5px .5px 0 #656565;
 }

/* animate the Hello word */
.hello-content h2:nth-child(2) {
  color: #b2b5b685;
  animation: helloAnimation 1s infinite;
}

/* blinking shadow animation */
@-webkit-keyframes helloAnimation
{
    from {
      text-shadow: 5px 25px 10px #7c7205;
    }

    to {
      text-shadow : none;
    }
}

@-moz-keyframes helloAnimation
{
    from {
      text-shadow: 5px 25px 10px #7c7205;
    }
    to {
      text-shadow : none;
    }
}
@keyframes helloAnimation
{
    from {
      text-shadow: 5px 25px 10px #7c7205;
    }
    to {
      text-shadow : none;
    }
}

/* popout text Hello */
/* moving text with zoom to from right to left  */
.popoutText {
  animation: 6s animate-popoutinText ease-out infinite;
}

@keyframes animate-popoutinText {
  0% {
    transform: scale(0);
    opacity: 0;
    text-shadow: 0 0 0 rgba(0, 0, 0, 0);
  }

  25% {
    transform: scale(1.8);
    opacity: 1;
    text-shadow: 15px 55px 15px rgba(4, 45, 73, 0.8);
  }

  50% {
    transform: scale(0.5);
    opacity: 1;
  }

  75% {
    transform: scale(0.8);
    opacity: 1;
  }

  100% {
    /*no animate to stop animation */
    transform: scale(1);
    /* disappear text */
    opacity: 0;
    text-shadow: 0 0 0 rgba(0, 0, 0, 0);
  }
}

hr {
  border-bottom: 2 solid rgb(88, 86, 86);
}

.footer > p {
  text-align: center;
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  background-color: rgb(191, 188, 188);
  color: white;
  text-align: center;
  font-size: 14px;
}

/**************  Media Queries ************** /
/* media queries - smaller devices */
@media (max-width:1200px) {
  html {
    font-size: 55%;
  }

  .proj-category {
    max-width: 30%;
  }
}


@media (max-width:990px) {
  header {
    left: -80%;
  }

  #ham-menu {
    display: block;
  }

  proj-container {
    font-size: 20vw;
  }

  .proj-category {
    max-width: 50%;
  }

  /* menu bar */
  header.toggle {
    left: 0;
    overflow-y: auto;
  }

  body {
    padding: 0;
    margin: 0;
  }

  .vertical-line {
    border-left: 6px solid rgb(167, 169, 167);
    height: 95%;
    position: relative;
    left: 27%;
    margin-left: -15px;
    padding: 8px;
    top: 10px;
  }

}

/* media devices size */
@media only screen and (max-width: 768px) {
  .popoutText {
    margin-top: 25px;
    margin-bottom: 25px;
    font-size: 13px;
    padding: 20px;
  }

  /* to show menu - right side of menu bar */
  #ham-menu {
    right: 20%;
  }

  .proj-container {
    margin-top: 20px;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    float: left;
  }

  .proj-category {
    position: relative;
    width: 100vw;
    float: left;
    overflow: hidden;
    margin: 4px;
    min-width: 350px;
    max-width: 450px;
    text-align: center;
    box-shadow: 0 0 35px rgba(3, 35, 37, 0.9);
    box-sizing: border-box;
    border-radius: 10px;
    margin-bottom: 20px;
  }

  header {
    width: 50vw;
  }

  .about .row .skills-container .school {
    width: 100%;
  }

  .education .education-container .school {
    width: 100%;
  }

  .proj-container {
    width: 100%;
    float: left;
    position: relative;
    margin: 0;
    padding: 0;
  }

  .proj-category {
    width: 100vw;
  }
}

/* the small devices  */
@media only screen and (max-width: 600px) {
  .popoutText {
    margin-top: 40px;
    margin-bottom: 25px;
    /* font-size: 10px; */
    padding: 10px;
  }

  header {
    width: 80vw;
  }

 

  .about .row .skills-container .school {
    width: 100%;
  }

  .education .education-container .school {
    width: 100vw;
    margin: 0 auto;
  }

  .proj-container {
    margin-top: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    width: 100%;
  }

  .proj-category {
    margin: 5px;
    position: relative;
    float: left;
    overflow: hidden;
    width: 95vw;
    min-width: 90vw;
    text-align: left;
    box-shadow: 0 0 35px rgba(3, 35, 37, 0.9);
    box-sizing: border-box;
    border-radius: 10px;
  }

  /* max width 400px devices */
  /* the x-small devices  */
  @media only screen and (max-width: 400px) {
    .popoutText {
      margin-top: 40px;
      margin-bottom: 25px;
      /* font-size: 10px; */
      padding: 10px;
    }

    /* .proj-category  */
    .info img{
      width: 93%;
      height: auto;
    }

    header {
      width: 100vw;
      /* if incase some part of header isvisible - it goes completely to left */
      left: -500px
    }

    .heading {
      margin: 0 auto;
      font-weight: 900;
      text-transform: uppercase;
      font-size: 3rem;
      width: 90%;
     }
   
    .projects .heading span{
  font-size: 25px;
 width: 100%;
  margin: 0 auto;
    }

  .myName{
    font-size: 35px;
    text-align: center;
  }
    
    .about .row .skills-container .school {
      width: 100%;
    }

    .education .education-container .school span {
      font-size: 2rem;
      padding: .2rem 1.5rem;  
    }
    .education .education-container .school {
      width: 100vw;
      width: 100vw;
    }

    .proj-container {
      margin-top: 20px;
      display: flex;
      justify-content: center;
      align-items: center;
      flex-wrap: wrap;
      width: 100vw;
      margin: 0;
    }

    .proj-category {
      margin: 5px;
      float: left;
      overflow: hidden;
      min-width: 90vw;
      box-shadow: 0 0 35px rgba(3, 35, 37, 0.9);
      box-sizing: border-box;
      border-radius: 10px;
    }

    /* ******************************************** */
    /* landscape orientation on devices */
    @media screen and (orientation:landscape) {
      .myPhoto img {
        margin-top: 340px;
      }
    }