/* -----------------------------------------------------Header Start--------------------------------------------- */
header {
    margin-top: -7.5rem;
    margin-left: -1.6rem;
    height: 115vh;
    width: 100vw;
    background-image: linear-gradient(rgb(4 9 30 / 48%),rgb(4 9 30 / 58%)),url("../img/header_new.webp");
    background-color: #0056f3;
    background-size: cover;
    scroll-behavior: smooth;
}

/* Profile Image */
.profile-img {
    background-image: url("../img/Profile_Pic.jpeg");
    background-size: cover;
    top: 20px;
    left: 20px;
    height: 250px;
    width: 250px;
    border-radius: 50%;
    position: sticky;
}
.profile-img:hover {
    cursor: pointer;
    /* filter: blur(1px);  */
    opacity: 0.7;
    transition: opacity 1.5s;
}
.profile-img-discription {
    height: 60%;
    width: 100%;
    border-radius: 50%;
    font-size: 22px;
    text-align: center;
    color: white;
    font-weight: bolder;
    letter-spacing: 2px;
    margin-top: 42%;
    position: absolute;
    /* filter:none; */
    text-decoration-line: overline;
    opacity: 0;
    transition: opacity 0.5s, visibility 0.5s;
}
.profile-img-discription:hover {
    visibility: visible;
    opacity: 1;
}
.profile-img-discription a{
    text-decoration: none;
    color: white;
}

/* ----------------------------------------Navbar Start------------------------------ */

/* Add a black background color to the top navigation */
.topnav {
    /* background-color: blue; */
    overflow: hidden;
    margin-top: -8rem;
  }
  
  /* Style the links inside the navigation bar */
  .topnav a {
    float: right;
    display: block;
    color: #00d0ff;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    font-size: 22px;
    font-weight: bolder;
  }

.topnav a,button{
    margin-left: 20px;
    margin-right: 20px;
}
  
  /* Add an active class to highlight the current page */
  .active {
    border-left: 5px solid chartreuse;
  }
  
  /* Hide the link that should open and close the topnav on small screens */
  .topnav .icon {
    display: none;
  }
  
  /* Dropdown container - needed to position the dropdown content */
  .dropdown {
    float: right;
    overflow: hidden;
  }
  
  /* Style the dropdown button to fit inside the topnav */
  .dropdown .dropbtn {
    font-size: 22px;
    font-weight: bolder;
    border: none;
    outline: none;
    color: #00d0ff;
    padding: 14px 16px;
    background-color: inherit;
    font-family: inherit;
    margin: 0;
  }
  
  /* Style the dropdown content (hidden by default) */
  .dropdown-content {
    display: none;
    position: absolute;
    background-color: rgb(27 0 255 / 28%);
    max-width: 160px;
    float: right;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
  }
  
  /* Style the links inside the dropdown */
  .dropdown-content a {
    float: none;
    color: #00d0ff;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    text-align: center;
  }
  
  /* Add a background on topnav links and the dropdown button on hover */
  .topnav a:hover, .dropdown:hover .dropbtn {
    background-color: rgba(0, 0, 0, 0.404);
    color: chartreuse;
  }
  
  /* Add a background to dropdown links on hover */
  .dropdown-content a:hover {
    background-color: rgba(0, 0, 0, 0.404);
    color: chartreuse;
    border-radius: 20%;
  }
  
  /* Show the dropdown menu when the user moves the mouse over the dropdown button */
  .dropdown:hover .dropdown-content {
    display: block;
  }
  
  /* Navbar Tab Screen */
  /* When the screen is less than 800 pixels wide, hide all links, except for the first one ("Home"). Show the link that contains should open and close the topnav (.icon) */
  @media screen and (max-width: 800px) {
    .topnav a:not(:first-child), .dropdown .dropbtn {
      display: none;
    }
    .topnav a.icon {
      float: right;
      display: block;
    }
  }
  
  /* The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon. This class makes the topnav look good on small screens (display the links vertically instead of horizontally) */
  @media screen and (max-width: 800px) {
    .topnav.responsive {position: relative;}
    .topnav.responsive a.icon {
      position: absolute;
      right: 0;
      top: 0;
    }
    .topnav.responsive a {
      float: none;
      display: block;
      text-align: right;
    }
    .topnav.responsive .dropdown {float: none;}
    .topnav.responsive .dropdown-content {position: relative;}
    .topnav.responsive .dropdown .dropbtn {
      display: block;
      width: 100%;
      text-align: right;
    }
  .topnav {
    margin-top: 0rem;
  }
  .topnav.responsive {
    width: 140px;
    float: right;
  }
  .topnav.responsive a:first-child{
    margin-top: 4rem;
  }

}

  /* Navbar Mobile Screen  */
@media screen and (max-width: 480px) {
  .topnav a, .dropdown .dropbtn {
    display: none;
  }
}
/* -------------------------------------------Navbar Stop------------------------------------------ */

/* -----------------------------------------Typing Name Start ----------------------------- */
#container {
	text-align: center;
  margin-top: 10rem;
}

#text {
	display: inline-block;
	vertical-align: middle;
	color: #9dff00;
	letter-spacing: 2px;
  font-size: 4vw;
}

#cursor {
	display: inline-block;
	vertical-align: middle;
	width: 3px;
	height: 50px;
	background-color: #9dff00;
	animation: blink .75s step-end infinite;
}

@keyframes blink {
	from, to { 
		background-color: transparent 
	}
	50% { 
		background-color: #9dff00; 
	}
}
/* -----------------------------------------Typing Name Stop ----------------------------- */

/* -----------------------------------------------------Header Stop--------------------------------------------- */

.heading {
  text-align: center;
  font-size: 45px;
  color: #0400ff;
  text-transform: uppercase;
}

/* ---------------------------------------------Main Section Start ------------------------------------------------ */

/* ----------------------About Start----------------- */
.about {
  width: 80vw;
  height: auto;
  margin: auto;
  font-size: 1.5rem;
  font-family: 'Times New Roman', Times, serif;
  letter-spacing: 1px;
  background-color: #80808030;
  padding: 1rem 0rem 0rem 1rem;
}
.about::first-letter {
  font-size: xx-large;
  font-weight: bolder;
}
#about-head::before {
  content: '';
  background-image: url("../img/user-alt-solid.svg");
  /* background-image: url("../img/about.svg"); */
  display: inline-block;
  background-repeat: no-repeat;
  height: 32px;
  width: 45px;
}
/* hr {
  height: 1px;
  background-color: black;
} */

/* ----------------------About End----------------- */

/* ------------------------Skills Start----------------- */
#skills-head::before {
  content: '';
  /* background-image: url("../img/award-solid.svg"); */
  background-image: url("../img/skills.svg");
  height: 38px;
  width: 45px;
  display: inline-block;
  background-repeat: no-repeat;
}

.skills {
  display: flex;
  flex-wrap: wrap;
  width: 80vw;
  height: auto;
  margin: auto;
  justify-content: center; 
  /* border: 2px solid black; */
  background-color: #80808030;
  padding-top: 2rem;
}
.cell>div {
  border-radius: 1rem 0rem 0rem 1rem;
}
.cell {
  margin: 0.5rem 2rem 2.5rem 2rem;
  width: 14rem;
  height: 3rem;
  border-radius: 1rem;
  background-color: rgba(128, 128, 128, 0.637);
}
.cell:hover {
  cursor: pointer;
  background-color: rgba(128, 128, 128, 0.705);
}
.cell-text {
  font-size: 1.3rem;
  font-weight: bolder;
  color: white;
  display: inline-block;
  margin-left: 8px;
  margin-top: 8px;  
}

.ninty-percentage {
  width: 90%;
  height: inherit;
}
.eighty-percentage {
  width: 80%;
  height: inherit;
}
.seventy-percentage {
  width: 70%;
  height: inherit;
}
.sixty-percentage {
  width: 60%;
  height: inherit;
}

/* -----------------------Skills Stop------------------------- */

/*-------------------------------------- Interpersonal Skills Starts--------------------- */
/* Interpersonal Skills styling */
.interpersonal-skills {
  display: flex;
  flex-wrap: wrap;
  width: 80vw;
  margin: auto;
  justify-content: space-around;
  padding: 20px;
  background-color: #f5f5f5;
  border-radius: 10px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.interpersonal-skills div {
  width: 45%;
  margin: 10px;
  padding: 20px;
  background-color: #ffffff;
  border-radius: 8px;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
}

.interpersonal-skills div strong {
  display: block;
  font-weight: bold;
  margin-bottom: 10px;
}

/* Media query for smaller screens */
@media screen and (max-width: 768px) {
  .interpersonal-skills div {
    width: 100%;
  }
}

/*-------------------------------------- Interpersonal Skills Stop--------------------- */


/* ---------------------------------Main Section Stop--------------------------- */
  
/* ------------------ Mobile Screen--------------------- */
@media screen and (max-width: 480px) {
  .profile-img {
      top: 10px;
      height: 150px;
      width: 150px;
      display: block;
      margin-left: auto;
      margin-right: auto;
  }
  #text {
    font-size: 6.5vw;
  }
  /* About Start */
  .about {
    font-size: 1.1rem;
    width: 95vw;
  }
  /* About End */

/* ChatBot Start   */
  



/* ChatBot Stop   */

  /* Skills Start */
  .cell {
    margin: 0.5rem auto 2rem auto;
    width: 75vw;
  }
  .skills {
    width: 100vw;
  }
  /* Skills Stop */
  
}

/* ------------------ Tab Screen--------------------- */
@media screen and (max-width: 800px) {
  .profile-img {
      top: 10px;
      left: 10px;
      height: 150px;
      width: 150px;
  }
  .profile-img-discription {
      font-size: 90%;
  }
  #text {
    font-size: 6.5vw;
  }
   /* Skills Start */
  .cell {
    
  }
  .skills {
    width: 100vw;
  }
  /* Skills Stop */
}