@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap");
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  text-decoration: none;
  font-family: "Poppins", sans-serif;
}

body {
  overflow-x: hidden;
  background: var(--bg-color);
}

html {
  scroll-behavior: smooth;
}

:root {
  --main-color: rgba(56, 84, 216, 1);
  --text-color: #000;
  --contact-border: #000;
  --bg-color: #ecf0f3;
  --sidebar-color: #f3f3f3;
  --sidebar-link-color: var(--main-color);
  --secondary-color: #000;
  --home-icon-color: linear-gradient(45deg, var(--main-color), #db00af, #000);
  --home-btn-color: linear-gradient(90deg, var(--main-color), #000);
  --skill-item-color: #fff;
  --box-color: rgba(0, 0, 0, 1);
  --contact-info-background: #000;
  --contact-color: #fff;
  --nav-text-color: #bbb;
  --service-texts-color: #555;
  --github-color: #000;
  --contact-inset: inset 10px 10px 10px #cbc3d1, inset -10px -10px 10px #fff;
}

.dark-theme {
  --text-color: #fff;
  --contact-border: #000;
  --bg-color: #161616;
  --sidebar-color: #767676;
  --sidebar-link-color: #bfbfbf;
  --secondary-color: var(--main-color);
  --skill-item-color: #000;
  --box-color: rgba(255, 255, 255, 1);
  --contact-info-background: #fff;
  --contact-color: #000;
  --nav-text-color: #999;
  --service-texts-color: #ddd;
  --github-color: #444;
  --contact-inset: inset 10px 10px 10px rgba(0, 0, 0, 0.7),
    inset -10px -10px 10px rgba(0, 0, 0, 0.7);
}

/* Loading Animation 2 */
.loading-page {
  background: var(--bg-color);
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  z-index: 99999;
  pointer-events: none;
  opacity: 1;
  transition: opacity 0.1s ease;
}

.loading-page.hidden {
  opacity: 0;
  pointer-events: none;
}

.svg-container {
  display: flex;
}

#svg,
#svg2 {
  height: 150px;
  width: 150px;
  stroke: var(--text-color);
  fill-opacity: 0;
  stroke-width: 20px;
  stroke-dasharray: 4500;
  animation: draw 7s ease;
}

#svg2 {
  height: 175px;
  margin-top: -0.7rem;
}

.logo-name {
  color: var(--text-color);
  font-size: 30px;
  letter-spacing: 10px;
  text-transform: uppercase;
  font-weight: bold;
  text-align: center;
  margin-top: 10px;
}

.name-container {
  height: 30px;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}

/* What's New Design */
.whats-new {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.8);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 5000;
}

.whats-new-content {
  background: #333;
  padding: 5rem;
  border: 0.2rem solid #fff;
  border-radius: 20px;
  box-shadow: 0.5rem 1rem 2rem var(--main-color);
  max-width: 80%;
}

.whats-new-content h2 {
  text-align: center;
  font-size: 2rem;
}

.whats-new-content p {
  text-align: center;
  width: 100%;
  margin-bottom: 1rem;
  font-size: 1.2rem;
}

#exit-button {
  margin-top: 1rem;
  background: var(--main-color);
  padding: 1rem 2.5rem;
  border-radius: 0.9rem;
  font-size: 1rem;
  font-weight: 600;
  color: #fff;
  transition: 0.5s ease;
  border: 0.1rem solid transparent;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-left: auto;
  margin-right: auto;
}

#exit-button:hover {
  background-color: transparent;
  border: 0.1rem solid #fff;
  box-shadow: 0 0 1rem var(--main-color);
}

/* Navigation Bar Design */
.header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  padding: 1rem 4%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  z-index: 10000;
  transition: 0.3s ease;
  border-radius: 3rem;
}

.header.sticky {
  background: var(--skill-item-color);
  box-shadow: 0 0.1rem 1rem var(--secondary-color);
}

.logo {
  font-size: 2.5rem;
  color: var(--text-color);
  font-weight: 600;
  cursor: pointer;
  transition: 0.2s ease;
}

.logo span {
  color: var(--main-color);
}

.logo:hover {
  transform: scale(1.1);
}

.navbar {
  display: flex;
  justify-content: center;
  align-items: center;
  flex: 1;
  margin-right: 2rem;
}

.navbar a {
  position: relative;
  overflow: hidden;
  font-size: 1.2rem;
  color: var(--nav-text-color);
  font-weight: 500;
  transition: color 0.4s ease, background-color 0.4s ease;
  padding: 0.1rem 0.6rem;
}

.navbar span {
  display: inline-block;
  transition: transform 0.4s ease;
}

.navbar a:hover span {
  transform: translateY(-100%);
}

.navbar a:before {
  content: attr(data-link-alt);
  position: absolute;
  top: 100%;
  margin-left: 25px;
  font-size: inherit;
  opacity: 0;
  color: var(--main-color);
  transition: top 0.4s ease, opacity 0.4s ease;
}

.navbar a:hover:before {
  top: 0;
  opacity: 1;
}

.navbar ul {
  display: flex;
  list-style-type: none;
}

.navbar ul li {
  position: relative;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
}

.navbar ul li:before {
  content: "";
  position: absolute;
  inset: calc(100% - 3px) 0 0 0;
  background: var(--main-color);
  scale: 0 1;
  transition: scale 0.4s ease, translate 0s 0.4s ease;
}

.navbar ul:hover li:before {
  scale: 1;
}

.navbar ul li:hover:before {
  translate: 0;
  transition: all 0.4s ease;
}

.navbar ul:hover li:has(~ li:hover):before {
  translate: 100% 0;
  transition: translate 0.2s ease 0.2s, scale 0s 0.5s ease;
}

.navbar ul:hover li:hover ~ li:before {
  translate: -100% 0;
  transition: translate 0.2s ease 0.2s, scale 0s 0.5s ease;
}

.navbar:hover a {
  color: var(--text-color);
  transition: color 0.4s ease;
}

.navbar a:hover i {
  color: var(--main-color);
  transition: color 0.3s ease;
}

/* Navbar Active state styling */
.navbar a.active {
  color: var(--main-color);
  border-bottom: 4px solid var(--main-color);
}

.navbar a.active:hover {
  color: var(--main-color);
  transition: none;
}

.navbar a.active:hover span {
  transform: translateY(0);
  transition: none;
}

.navbar a.active:hover:before {
  top: 100%;
  opacity: 0;
}

.appear-btn {
  z-index: 1;
  background: linear-gradient(
    90deg,
    #ff6a00,
    #ee0979,
    #9b59b6,
    #3498db,
    #2ecc71,
    #f9d923,
    #00a19d,
    #ff6a00
  );
  background-size: 600%;
  animation: glow 10s linear infinite;
  color: #fff;
  border: none;
  padding: 10px 20px;
  font-size: 20px;
  border-radius: 3rem;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: 0.2s ease;
}

.appear-btn:hover {
  transform: scale(0.9);
}

@keyframes glow {
  from {
    background-position: 0%;
  }
  to {
    background-position: -600%;
  }
}

/* Appearance Popup */
.appearance {
  position: fixed;
  transform: translate(-50%, -50%);
  top: 50%;
  left: 50%;
  background: rgba(0, 0, 0, 0.7);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
  padding: 5rem;
  width: 100vw;
  height: 100vh;
  z-index: 99999;
  opacity: 0;
  pointer-events: none;
  transition: 0.3s ease;
  display: flex;
  justify-content: center;
  align-items: center;
}

.appearance .appearance-heading {
  color: var(--text-color);
  text-align: center;
  font-size: 2.5rem;
  border-bottom: 2px solid var(--text-color);
  margin-bottom: 2rem;
}

.appearance-container {
  position: fixed;
  background-color: var(--skill-item-color);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
  padding: 5rem;
  border-radius: 3rem;
  transform: scale(0);
  transition: 0.3s ease;
}

.dropdown-menu .theme-switch {
  color: var(--text-color);
  font-size: 1.6rem;
}

.show-appearance {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background: rgba(0, 0, 0, 0.5);
  z-index: 9999;
}

.appearance-close {
  position: absolute;
  top: 20px;
  cursor: pointer;
  right: 15px;
}

.appearance-close a {
  color: var(--text-color);
  font-size: 2rem;
  font-weight: bold;
  transition: all 0.3s ease;
}

.appearance-close a:hover {
  color: var(--main-color);
}

.appearance h2 {
  font-size: 1.2rem;
  margin-bottom: 10px;
}

.appearance .theme ul li {
  display: inline-block;
  margin: 5px;
  cursor: pointer;
  width: 30px;
  height: 30px;
  border-radius: 50%;
}

.color-switch {
  font-size: 1.6rem;
  font-weight: 600;
  color: var(--text-color);
}

/* Dark Mode Toggle Switch 2 */

.theme-switch {
  display: flex;
  align-items: center;
  gap: 5rem;
}

.theme-switch input {
  display: none;
}

.slider {
  position: relative;
  width: 4rem;
  height: 2rem;
  background-color: #111;
  border-radius: 30px;
  transition: background-color 0.4s;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: 0 0.2em;
}

.slider::before {
  content: "";
  position: absolute;
  height: 1.4rem;
  width: 1.4rem;
  border-radius: 50%;
  top: 50%;
  left: 0.3em;
  transform: translateY(-50%);
  background: transparent;
  transition: all 0.3s;
}

input:checked + .slider {
  background-color: #0b3d91;
}

input:checked + .slider::before {
  left: calc(120% - (1.4em + 0.3em));
  background: #0b3d91;
  box-shadow: 0.2em -0.2em 0 0.2em #fff inset;
}

.theme-switch .theme-text {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--text-color);
  font-weight: 600;
  font-size: 1.6rem;
}

.sun {
  position: absolute;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  transition: transform 0.4s;
  display: flex;
  justify-content: center;
  align-items: center;
}

.sun img {
  width: 25px;
  height: 25px;
}

input:checked + .slider .sun {
  opacity: 0;
  transform: scale(0.5) rotate(1080deg);
}

/* End Dark Mode Toggle Switch 2 */
/* Color Selection */

.all {
  position: relative;
  width: 100%;
  top: 15px;
  padding: 1rem;
  border: 2px solid var(--text-color);
  background: #000;
  border-radius: 2rem;
}

.all .main {
  width: 100%;
  text-align: center;
  color: #fff;
}

.all .choose {
  overflow: hidden;
}

.all .choose .colors {
  padding: 2px;
  width: 100%;
  max-width: 400px;
  margin: 0 auto;
}

.all .choose .colors ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.all .choose .colors ul li {
  display: inline-block;
  width: 30px;
  height: 30px;
  margin: 5px;
  cursor: pointer;
  border: 3px solid transparent;
  border-radius: 50%;
  transition: 0.3s ease;
}

.themes-colors {
  width: 18rem;
}

.all .choose .colors .theme ul li:nth-child(1) {
  background: #3854d8;
}

.all .choose .colors .theme ul li:nth-child(2) {
  background: #fff424;
}

.all .choose .colors .theme ul li:nth-child(3) {
  background: #0084d6;
}

.all .choose .colors .theme ul li:nth-child(4) {
  background: #dc143c;
}

.all .choose .colors .theme ul li:nth-child(5) {
  background: #00fa9a;
}

.all .choose .colors .theme ul li:nth-child(6) {
  background: #6f45e5;
}

.all .choose .colors .theme ul li:nth-child(7) {
  background: #01b008;
}

.all .choose .colors .theme ul li:nth-child(8) {
  background: #19c4b4;
}

.all .choose .colors .theme ul li:nth-child(9) {
  background: #ff69b4;
}

.all .choose .colors .theme ul li:nth-child(10) {
  background: #008080;
}

.all .choose .colors .theme ul li:nth-child(11) {
  background: #d400ad;
}

.all .choose .colors .theme ul li:nth-child(12) {
  background: #daa520;
}

.all .choose .colors .theme ul li.active4 {
  border: 3px solid #fff;
  border-radius: 50%;
  transform: scale(1.3);
}

/*End Color Selection */
/* Sections Design */

section {
  min-height: 100vh;
  background: var(--bg-color);
  background-blend-mode: soft-light, screen;
  position: relative;
}

.about span,
.portfolio span,
.blog span,
.testimonials span,
.contact span {
  color: var(--main-color);
}

/* General All Sections Heading Design */

.heading-container {
  position: relative;
  text-align: center;
  margin-bottom: 3rem;
}

.heading {
  font-size: 3.6rem;
  color: var(--text-color);
  margin-bottom: 2rem;
  position: relative;
  display: inline-block;
  position: relative;
}

.background-text {
  position: absolute;
  margin-top: -1rem;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -webkit-text-stroke: 6px var(--text-color);
  font-size: 8rem;
  color: transparent;
  opacity: 0.09;
  z-index: 1;
  font-weight: bold;
  pointer-events: none;
  white-space: nowrap;
}

.heading::after {
  content: "";
  width: 9rem;
  height: 0.5rem;
  background-color: var(--heading-after-color, #2f3d7f);
  position: absolute;
  bottom: -1rem;
  left: 50%;
  transform: translateX(-50%);
}

.heading::before {
  content: attr(data-text);
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 100%;
  color: var(--main-color);
  -webkit-text-stroke: 0vw #000;
  border-right: 5px solid var(--main-color);
  overflow: hidden;
  animation: text-filling 2s linear infinite;
}

/* End Sections Design */
/* Home Section Design */

.home {
  background-size: cover;
  background-attachment: fixed;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.centered-background {
  height: 80vh;
  width: 75%;
  margin: 5rem auto;
  box-shadow: 0 8px 32px 0 var(--secondary-color);
  border-radius: 3rem;
  display: flex;
  justify-content: center;
  backdrop-filter: blur(5px);
  align-items: center;
}

.centered-background::before {
  content: "SR";
  font-size: 30em;
  font-weight: bold;
  color: var(--main-color);
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-transform: uppercase;
  font-family: "Galada", serif;
  opacity: 0.7;
  pointer-events: none;
}

.home-content h3 {
  font-size: 3.4rem;
  font-weight: 700;
  line-height: 1.2;
  color: var(--text-color);
}

.rotating-text {
  font-family: sans-serif;
  font-weight: 600;
  margin-top: -0.8rem;
}

.rotating-text .me-text {
  font-size: 3.5rem;
  font-weight: bold;
  color: var(--text-color);
}

.rotating-text p {
  display: inline-flex;
  margin: 0;
  font-size: 3.5rem;
  vertical-align: top;
  font-weight: bold;
}

.rotating-text p .word {
  position: absolute;
  display: flex;
  font-size: 3.5rem;
  color: var(--main-color);
  opacity: 0;
}

.rotating-text p .word .letter {
  transform-origin: center center 25px;
  font-size: 3.5rem;
}

.rotating-text p .word .letter.out {
  transform: rotateX(90deg);
  transition: 0.15s cubic-bezier(0.6, 0, 0.7, 0.2);
}

.rotating-text p .word .letter.in {
  transition: 0.2s ease;
}

.rotating-text p .word .letter.behind {
  transform: rotateX(-90deg);
}

.home-content h1 {
  -webkit-box-reflect: below -46px linear-gradient(transparent, #fff);
  margin-bottom: 2rem;
}

.home-content h1 span {
  font-size: 4rem;
  font-weight: 700;
  animation: text-animate 5s linear infinite;
  cursor: pointer;
  display: inline-block;
  margin-right: 0.5rem;
  transition: 0.3s ease;
}

.home-content h1 span:hover {
  transform: translateY(-20px);
}

.home-content h1 span:nth-child(even) {
  animation-delay: 0.4s;
}

.home-content .home-text {
  font-size: 1.6rem;
  color: var(--text-color);
  width: 60rem;
}

/* Home Social Icon style 2 */

.wrapper {
  display: flex;
  align-items: center;
}

.wrapper .icon {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  margin: 1rem 1rem -0.5rem 0;
  text-align: center;
  cursor: pointer;
  position: relative;
  z-index: 2;
  text-decoration: none;
  transition: 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.wrapper .icon span {
  display: block;
  height: 60px;
  width: 60px;
  color: var(--skill-item-color);
  background: var(--text-color);
  border-radius: 50%;
  position: relative;
  z-index: 2;
  box-shadow: 0px 10px 10px rgba(0, 0, 0, 0.4);
  transition: 0.5s;
}

.wrapper .icon span i {
  line-height: 60px;
  font-size: 25px;
}

.wrapper .icon .tooltip {
  position: absolute;
  top: 0;
  z-index: 1;
  background: var(--text-color);
  color: #fff;
  padding: 10px 18px;
  font-size: 20px;
  font-weight: 500;
  border-radius: 25px;
  opacity: 0;
  pointer-events: none;
  box-shadow: 0px 10px 10px rgba(0, 0, 0, 0.3);
  transition: 0.4s;
}

.wrapper .icon:hover .tooltip {
  top: -70px;
  opacity: 1;
  pointer-events: auto;
}

.icon .tooltip:before {
  position: absolute;
  content: "";
  height: 15px;
  width: 15px;
  background: inherit;
  left: 50%;
  bottom: -6px;
  transform: translateX(-50%) rotate(45deg);
}

.wrapper .icon:hover span {
  color: #fff;
}

.wrapper .icon:hover span,
.wrapper .icon:hover .tooltip {
  text-shadow: 0px -1px 0px rgba(0, 0, 0, 0.4);
}

.wrapper .linkedin:hover span,
.wrapper .linkedin:hover .tooltip {
  background: #0077b5;
}

.wrapper .instagram:hover span {
  background: linear-gradient(120deg, #833ab4, #fd1d1d, #f56040, #f77737);
}

.wrapper .instagram:hover .tooltip {
  background: #f56040;
}

.wrapper .github:hover span,
.wrapper .github:hover .tooltip {
  background: #181717;
}

.wrapper .youtube:hover span,
.wrapper .youtube:hover .tooltip {
  background: #d90808;
}

/* End Home Social Icon style 2 */

.home-content .btn {
  position: relative;
  display: inline-block;
  justify-content: center;
  align-items: center;
  padding: 1rem 2rem;
  border-radius: 0.5rem;
  font-size: 1rem;
  margin-top: 3rem;
  color: #fff;
  letter-spacing: 2px;
  font-weight: 600;
  transition: all 0.5s ease;
  z-index: 1;
}

.home-content .btn i {
  font-size: 1.2rem;
}

.home-content .btn::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  inset: 0;
  background: var(--home-btn-color);
  box-shadow: 0px 10px 10px rgba(0, 0, 0, 0.4);
  z-index: -1;
  background-position: 0 0;
  background-size: 200%;
  border-radius: 40px;
  transition: background-position 0.5s ease, filter 0.5s ease, 0.3s ease;
}

.home-content .btn:hover::before {
  background-position: 100% 0;
}

.home-img {
  width: 450px;
  height: 450px;
  position: relative;
  animation: floating 3s ease-in-out infinite;
}

.home-img .glowing-circle {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}

.home-img .glowing-circle::after {
  content: "";
  position: absolute;
  width: 500px;
  height: 500px;
  background: #0c1022;
  border-radius: 50%;
}

.glowing-circle span {
  position: absolute;
  width: 530px;
  height: 530px;
  background: var(--home-icon-color);
  border-radius: 50%;
  animation: circleRotate 2s linear infinite;
}

.glowing-circle span:nth-child(1) {
  filter: blur(15px);
}

.glowing-circle .image {
  position: relative;
  top: 10px;
  width: 450px;
  height: 450px;
  border-radius: 50%;
  z-index: 1;
  overflow: hidden;
}

.image img {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  max-width: 460px;
  object-fit: cover;
}

/* End Home Section */
/* About Section Design */

.about {
  padding: 8rem 7%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.about-content .heading-container {
  margin-bottom: 3rem;
}

.about-content .heading-container .heading {
  margin-top: 2rem;
  right: 34%;
}

.about-content .background-text {
  margin-top: -1.4rem;
  top: 50%;
  left: 16%;
}

.about-content .heading::after {
  bottom: -1rem;
}

.about-image {
  position: relative;
  height: 30rem;
  width: 30rem;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 8rem;
  margin-right: 2rem;
  animation: floating 3s ease-in-out infinite;
}

.about-image img {
  width: 90%;
  height: 90%;
  border-radius: 50%;
  border: 4px solid var(--main-color);
  transition: 0.3s ease;
  transform: translate(0, 0);
  position: relative;
}

.about-image .circle-spin {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(0deg);
  width: calc(90% + 50px);
  height: calc(90% + 50px);
  border-radius: 50%;
  border-top: 0.3rem solid var(--bg-color);
  border-bottom: 0.3rem solid var(--bg-color);
  border-left: 0.3rem solid var(--main-color);
  border-right: 0.3rem solid var(--main-color);
  animation: aboutSpinner 8s linear infinite;
}

@keyframes aboutSpinner {
  100% {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}

.about-image img:hover {
  box-shadow: 0 0 2rem var(--main-color);
}

.about .about-texts {
  font-size: 1.2rem;
  color: var(--text-color);
  max-width: 80rem;
  margin-top: 3rem;
  margin-bottom: 3rem;
  text-align: left;
}

.about .about-texts span {
  color: var(--main-color);
  font-weight: bold;
}

.about .btn {
  background: var(--main-color);
  padding: 1rem 2.5rem;
  border-radius: 5rem;
  font-size: 1rem;
  font-weight: 600;
  width: 20rem;
  color: var(--text-color);
  z-index: 1000;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  transition: 0.3s ease;
  color: #fff;
}

.about .btn::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 2px;
  background: linear-gradient(45deg, #ff00cc, #3333ff, #00ffcc, #ff9900);
  background-size: 300%;
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask-composite: exclude;
  -webkit-mask-composite: destination-out;
  z-index: -1;
  transition: opacity 0.3s ease;
  opacity: 0;
}

.about .btn:hover::before {
  opacity: 1;
  animation: borderAnimation 0.5s linear infinite;
}

.about .btn:hover {
  background: transparent;
  color: var(--text-color);
}

/* End About Section */
/* Education Section */

.education {
  padding: 8rem 4%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.education .heading-container {
  margin-bottom: -1rem;
}

.education .heading-container .heading {
  margin-top: 3rem;
}

.education .heading-container .heading span {
  color: var(--main-color);
}

/* Education Timeline styling */
.timeline {
  position: relative;
  max-width: 1200px;
  margin: 100px auto;
}

.timeline::after {
  content: "";
  position: absolute;
  width: 6px;
  height: 100%;
  background: var(--main-color);
  top: 0;
  left: 50%;
  margin-left: -3px;
  border-radius: 1rem;
  z-index: -1;
  box-shadow: 0 0 1rem var(--main-color);
}

.timeline.animate-line::after {
  animation: moveLine 2s linear forwards;
}

@keyframes moveLine {
  0% {
    height: 0;
  }
  100% {
    height: 100%;
  }
}

.timeline-dot {
  height: 21px;
  width: 21px;
  background-color: var(--skill-item-color);
  position: absolute;
  top: 2.6rem;
  left: 50%;
  margin-left: 18.1rem;
  border-radius: 50%;
  box-shadow: 0 0 1rem var(--main-color);
  z-index: 1000;
  transition: 0.1s ease;
  pointer-events: none;
}

.right-container:hover .timeline-dot,
.left-container:hover .timeline-dot {
  background-color: var(--main-color);
}

.right-container .timeline-dot {
  left: 0;
  margin-left: -10.5px;
}

.education .container2 {
  padding: 10px 45px;
  position: relative;
  width: 50%;
  opacity: 0;
  transform: translateY(-30px);
  pointer-events: none;
}

.education .container2.animate-container {
  animation: moveDown 1s ease-out forwards;
}

@keyframes moveDown {
  0% {
    opacity: 0;
    transform: translateY(-30px);
  }
  100% {
    opacity: 1;
    transform: translateY(0px);
    pointer-events: auto;
  }
}

.education .container2:nth-child(1) {
  animation-delay: 0s;
}
.education .container2:nth-child(2) {
  animation-delay: 0.5s;
}
.education .container2:nth-child(3) {
  animation-delay: 0.8s;
}
.education .container2:nth-child(4) {
  animation-delay: 1s;
}

.text-box {
  padding: 30px 50px;
  background: var(--skill-item-color);
  box-shadow: 0 5px 7px #000;
  position: relative;
  border-radius: 20px;
  font-size: 15px;
  transition: 0.1s ease;
  cursor: pointer;
  border-right: 0.3rem solid var(--main-color);
  border-bottom: 0.3rem solid var(--main-color);
}

.text-box:hover {
  transform: scale(1.05);
  box-shadow: 0 0 3rem var(--main-color);
  border-color: transparent;
  background: var(--main-color);
}

.text-box:hover h2,
.text-box:hover p,
.text-box:hover small {
  color: #fff;
}

.left-container {
  left: 0;
}

.right-container {
  left: 50%;
}

.text-box h2 {
  font-weight: 600;
  color: var(--text-color);
  transition: 0.3s ease;
}

.text-box small {
  display: inline-block;
  margin-bottom: 15px;
  font-size: 1rem;
  transition: 0.3s ease;
  color: var(--text-color);
}

.text-box p {
  color: var(--text-color);
  transition: 0.3s ease;
}

.left-container-arrow {
  height: 0;
  width: 0;
  position: absolute;
  top: 28px;
  border-top: 15px solid transparent;
  border-bottom: 15px solid transparent;
  border-left: 15px solid var(--skill-item-color);
  right: -12px;
  transition: 0.1s ease;
}

.right-container-arrow {
  height: 0;
  width: 0;
  position: absolute;
  top: 28px;
  z-index: 1;
  border-top: 15px solid transparent;
  border-bottom: 15px solid transparent;
  border-right: 15px solid var(--skill-item-color);
  left: -13px;
  transition: 0.1s ease;
}

.text-box:hover .left-container-arrow {
  border-left: 15px solid var(--main-color);
}

.text-box:hover .right-container-arrow {
  border-right: 15px solid var(--main-color);
}

/* End Timeline Styling */
/* End Education Section */
/* Services Section */

.services {
  padding: 8rem 7%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.services .heading {
  margin-bottom: 4rem;
}

.services .heading span {
  color: var(--main-color);
}

.services .background-text {
  margin-top: -3.5rem;
}

.services-container {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 2rem;
}

.service-box {
  background: transparent;
  padding: 3rem 2rem;
  border-radius: 1.4rem;
  box-shadow: 0 10px 7px #000;
  text-align: center;
  transition: all 0.2s ease;
  height: 22rem;
  width: 30rem;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
  flex-direction: column;
  z-index: 1;
  border: none;
  cursor: pointer;
}

.service-box:hover .service-view {
  padding-left: 40px;
  color: var(--main-color);
}

.service-box .service-view {
  margin-top: 1rem;
  font-weight: bold;
  transition: 0.3s ease;
}

.service-box .service-view .view {
  font-size: 20px;
}

.service-box .service-view .view:hover {
  color: var(--text-color);
}

.service-box::after,
.service-box::before {
  content: "";
  position: absolute;
  width: 600px;
  height: 600px;
  animation: border 4s linear infinite;
  z-index: 0;
}

.service-box::after {
  background-image: conic-gradient(
    transparent,
    transparent,
    transparent,
    var(--main-color)
  );
  animation-delay: -2s;
}

.service-box::before {
  background-image: conic-gradient(
    transparent,
    transparent,
    transparent,
    var(--main-color)
  );
}

.service-box .border {
  position: absolute;
  inset: 5px;
  border-radius: 16px;
  background: var(--bg-color);
  z-index: 1;
}

.services-container .service-box:hover {
  transform: scale(1.1);
  box-shadow: 0 0 4rem var(--main-color);
}

.services-container .service-box:hover h3,
.services-container .service-box:hover i {
  color: var(--main-color);
}

.service-box i {
  font-size: 3rem;
  color: var(--text-color);
  margin-bottom: 1.5rem;
  transition: color 0.5s ease;
  z-index: 1000;
}

.service-box h3 {
  font-size: 1.5rem;
  color: var(--text-color);
  margin-bottom: 1rem;
  transition: color 0.5s ease;
  z-index: 1000;
}

.service-box p {
  font-size: 1.1rem;
  color: var(--text-color);
  z-index: 1000;
}

.service-box i,
.service-box h3,
.service-box p {
  z-index: 10;
}

/* More About Services */

.service-popup {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.6);
  justify-content: center;
  align-items: center;
  z-index: 99999;
  opacity: 0;
  pointer-events: none;
  display: flex;
  transition: 0.3s ease;
}

.service-heading-texts {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

.service-heading-texts h3 {
  margin-top: 2rem;
  color: var(--text-color);
  font-weight: bold;
  font-size: 2rem;
}

.service-heading-texts p {
  margin-top: 1rem;
  color: var(--service-texts-color);
}

.service-popup-content {
  background: var(--bg-color);
  padding: 4rem;
  border-radius: 2rem;
  width: 100%;
  max-width: 650px;
  text-align: center;
  transition: 0.3s ease;
  transform: scale(0);
}

.service-more {
  margin-top: 2rem;
}

.service-more p {
  margin-top: 1rem;
  color: var(--service-texts-color);
  text-align: left;
}

.service-more p i {
  color: var(--main-color);
}

.service-close-popup {
  position: absolute;
  top: 3rem;
  right: 3rem;
  font-size: 2rem;
  cursor: pointer;
  color: var(--service-texts-color);
  transition: 0.3s ease;
}

.service-close-popup:hover {
  color: var(--main-color);
}

/* Skills Section */

.skills {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

#skill-heading-1 {
  margin-top: 5rem;
}

#skill-heading-2 .heading {
  margin-top: 3rem;
}

.skills .heading {
  margin-top: 2rem;
}

.skills .heading span {
  color: var(--main-color);
}

.skills-container {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 1.5rem;
  margin-top: 3rem;
  max-width: 100%;
}

.skill-item {
  background: var(--skill-item-color);
  padding: 1.5rem;
  border-radius: 1rem;
  width: 100%;
  height: 12rem;
  max-width: 300px;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  cursor: pointer;
  box-shadow: 0 5px 8px rgba(0, 0, 0, 0.6);
}

.skill-item:hover {
  transform: translateY(-25px);
  border-color: transparent;
  box-shadow: 0 5px 8px var(--main-color);
}

.skill-item img {
  width: 50px;
  height: 50px;
  object-fit: cover;
  margin-bottom: 2rem;
}

.skill-item p {
  font-size: 18px;
  font-weight: bold;
  color: var(--text-color);
}

.skill-item .skill-span {
  font-size: 14px;
  color: var(--text-color);
  font-weight: normal;
}

.skill-item .skill-span span {
  color: var(--main-color);
  font-weight: bold;
}

.skill-item .skill-span .skill-left-icon {
  top: 1rem;
  font-style: normal;
}

.skill-item .skill-span .skill-left-icon i {
  transition: 0.3s ease;
}

.skill-item:hover .skill-span .skill-left-icon i {
  padding-left: 4rem;
}

.skill-text {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

#skill-heading-2 {
  margin-top: 5rem;
}

.skill-left h3 span,
.skill-right h3 span {
  color: var(--main-color);
}

.skill-main {
  width: 100%;
  padding: 100px 10%;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-row-gap: 30px;
  grid-column-gap: 50px;
}

.skill-bar {
  margin-bottom: 2rem;
}

.skill-main h3 {
  font-size: 4rem;
  margin-bottom: 2rem;
  text-align: center;
  color: var(--text-color);
}

.skill-left .skill-bar .info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 10px;
  color: var(--text-color);
}

.skill-left .skill-bar .bar {
  width: 100%;
  height: 10px;
  background-color: #111;
  border-radius: 25px;
  margin-top: 10px;
  position: relative;
}

.skill-bar .bar span {
  width: 50%;
  height: 100%;
  background: var(--main-color);
  position: absolute;
  left: 0;
  border-radius: 25px;
  box-shadow: 0 0 2rem var(--main-color);
}

.skill-bar .bar .html {
  width: 90%;
  animation: html 2s;
}

.skill-bar .bar .css {
  width: 85%;
  animation: css 3s;
}

.skill-bar .bar .js {
  width: 50%;
  animation: js 4s;
}

.skill-bar .bar .python {
  width: 62%;
  animation: python 5s;
}

.professional {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
}

.pro-skill-box {
  position: relative;
  margin-top: -2rem;
}

.pro-skill-box .text {
  text-align: center;
  color: var(--text-color);
  font-size: 2rem;
}

.pro-skill-box .text h4 {
  font-weight: bold;
  font-size: 1.5rem;
  position: absolute;
  top: 40%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.circle {
  width: 100%;
  height: 150px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.circle .points {
  width: 1px;
  height: 10px;
  background-color: #000;
  position: absolute;
  border-radius: 3px;
  transform: rotate(calc(var(--i) * var(--rot))) translateY(-45px);
}

.points.marked {
  animation: skill-glow 0.04s linear forwards;
  animation-delay: calc(var(--i) * 0.03s);
}

/* Blog section */

.blog {
  padding: 8rem 7%;
}

.blog .heading {
  margin-top: 2.5rem;
}

.blog-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}

.blog-post {
  background: var(--skill-item-color);
  border-radius: 40px;
  box-shadow: 0 12px 18px rgba(0, 0, 0, 0.5);
  margin: 20px;
  padding: 3rem;
  text-align: center;
  transition: all 0.2s;
  cursor: pointer;
}

.blog-post:hover {
  transform: scale(1.03);
  box-shadow: 0 12px 18px var(--main-color);
}

.blog-post img {
  width: 80%;
  border-radius: inherit;
  margin-bottom: 20px;
}

.blog-post h1 {
  font-size: 1.8rem;
  color: var(--text-color);
}

.blog-post p {
  font-size: 1rem;
  color: var(--text-color);
  margin-bottom: 30px;
}

.blog-post a {
  font-size: 1.2rem;
  color: #fff;
  padding: 1rem 2rem;
  background: var(--main-color);
  border-radius: 1.5rem;
  transition: 0.3s ease;
  border: 2px solid var(--main-color);
}

.blog-post a:hover {
  background: transparent;
  color: var(--main-color);
}

/* Portfolio Section */

.portfolio {
  padding: 8rem 7%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  width: 100%;
}

.portfolio .heading-container{
  margin-bottom: -3rem;
}

.portfolio .heading {
  margin-top: -1rem;
  margin-bottom: 4rem;
}

.portfolio .background-text {
  margin-top: -4rem;
}

.portfolio .heading-container h2::after {
  margin-top: 6rem;
}

.filter-buttons {
  margin: 2rem;
  text-align: center;
}

.filter-buttons .port-btn {
  background: transparent;
  outline: 0;
  border: 2px solid var(--text-color);
  cursor: pointer;
  font-size: 1.5rem;
  font-weight: 600;
  margin-left: 1rem;
  color: var(--text-color);
  border-radius: 2rem;
  padding: 1rem 1.5rem;
  transition: all 0.3s ease;
}

.filter-buttons .port-btn:hover {
  color: var(--main-color);
  border: 2px solid var(--main-color);
}

.filter-buttons .port-btn.active {
  background: var(--main-color);
  color: #fff;
  border: 2px solid var(--main-color);
  box-shadow: 0 5px 10px var(--secondary-color);
}

.portfolio .portfolio-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 2rem;
  max-width: 1570px;
  width: 100%;
  margin: 0 auto;
  text-align: center;
}

.portfolio-item {
  width: 30rem;
  height: 20rem;
  border-radius: 1.5rem;
  overflow: hidden;
  position: relative;
  color: var(--text-color);
  box-shadow: 0 10px 15px #000;
  margin: 1.25rem;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}

.portfolio-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transition: 0.3s ease;
}

.portfolio-item:hover img {
  transform: scale(1.1);
}

.portfolio-item .portfolio-info {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100%;
  padding: 1rem;
  border-radius: inherit;
  background: linear-gradient(rgba(0, 0, 0, 0.5), var(--main-color));
  color: #fff;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  transform: translateY(100%);
  transition: 0.2s ease;
}

.portfolio-item:hover .portfolio-info {
  transform: translateY(0);
}

.portfolio-item h4 {
  font-size: 1.5rem;
  margin-bottom: 0.5rem;
}

.portfolio-item p {
  font-size: 1rem;
  width: 25rem;
}

.portfolio-item .btn {
  width: 16rem;
  padding: 0.8rem 2rem;
  font-size: 1rem;
  color: #fff;
  border-radius: 3rem;
  transition: 0.2s ease;
  margin-top: 2rem;
  border: 0.1rem solid #fff;
  ]background: transparent;
}

.portfolio-item .btn:hover {
  background: var(--main-color);
}

/* Contact Section */

.contact {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 2rem 7%;
  overflow: hidden;
}

.contact .heading {
  margin-top: 2rem;
}

.contact .background-text {
  margin-top: -1.5rem;
}

/* Contact Information */

.contact .info-box {
  display: flex;
  justify-content: space-between;
  margin-bottom: 30px;
  gap: 1rem;
  z-index: 100;
}

.info-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  background: var(--skill-item-color);
  box-shadow: 0 10px 15px rgba(0, 0, 0, 0.5);
  padding: 1.5rem 1.2rem;
  margin: 8px;
  border-radius: 2rem;
  width: 100%;
  transition: 0.2s ease;
  cursor: pointer;
}

.info-item:hover {
  background: var(--main-color);
  transform: scale(1.1);
}

.info-item i {
  font-size: 2rem;
  color: var(--text-color);
  padding: 0.5rem;
  border-radius: 50%;
  transition: .3s ease;
}

.info-item p {
  font-size: 14px;
  color: var(--text-color);
  transition: .3s ease;
}

.info-item strong {
  font-size: 16px;
  transition: .1s ease;
}

.info-item:hover i{
  transform: translateY(-10px) scale(1.5);
}

.info-item:hover i,
.info-item:hover p,
.info-item:hover strong {
  color: #fff;
}

/* End Contact Information */
/* Contact Form */

.contact-container {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

form {
  width: 57rem;
  display: grid;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  grid-template-columns: repeat(2, 1fr);
  grid-gap: 1rem;
}

.input-box {
  position: relative;
}

.input-box.full-width {
  grid-column: span 2;
}

.input-box input,
.input-box textarea {
  width: 100%;
  padding: 1.5rem;
  font-size: 1rem;
  color: var(--text-color);
  background: transparent;
  border-radius: 2rem;
  outline: none;
  border: 3px solid transparent;
  box-shadow: var(--contact-inset);
  transition: box-shadow 0.3s ease, border 0.3s ease;
}

.input-box input::placeholder,
.input-box textarea::placeholder {
  color: transparent;
}

.input-box label {
  position: absolute;
  top: 1.5rem;
  left: 1rem;
  font-size: 1rem;
  color: var(--text-color);
  pointer-events: none;
  transition: 0.3s ease;
  background: transparent;
  padding: 0 0.3rem;
}

.input-box input:focus,
.input-box textarea:focus {
  border-color: var(--main-color);
  outline: none;
  box-shadow: none;
}

.input-box input:not(:placeholder-shown),
.input-box textarea:not(:placeholder-shown) {
  border-color: var(--main-color);
  box-shadow: none;
}

.input-box input:focus + label,
.input-box textarea:focus + label {
  top: -0.6rem;
  left: 2rem;
  background: var(--bg-color);
  border-radius: 100%;
  font-size: 0.8rem;
  color: var(--text-color);
}

.input-box input:not(:placeholder-shown) + label,
.input-box textarea:not(:placeholder-shown) + label {
  top: -0.6rem;
  left: 2rem;
  background: var(--bg-color);
}

.textarea-box textarea {
  height: 20rem;
  resize: none;
}

.contact-btn {
  background: var(--main-color);
  padding: 1rem 6rem;
  border-radius: 2rem;
  font-size: 1.2rem;
  color: #fff;
  transition: all 0.3s ease;
  border: none;
  cursor: pointer;
  resize: none;
  z-index: 100;
}

.contact-btn:hover {
  background: transparent;
  color: var(--text-color);
  letter-spacing: 3px;
  box-shadow: var(--contact-inset);
}

.contact-btn i {
  position: relative;
  left: -20px;
  opacity: 0;
  transition: opacity 0.2s ease, left 0.3s ease;
}

.contact-btn:hover i {
  left: 5px;
  opacity: 1;
}

/* End Contact Form */
/* Email Sent Confirmation Popup */

.popup {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.7);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 99999;
  opacity: 0;
  pointer-events: none;
  transition: 0.3s ease;
}

.popup-content {
  background: var(--skill-item-color);
  box-shadow: 0 8px 32px 0 var(--main-color);
  border-radius: 10px;
  padding: 5rem 1rem;
  border-radius: 2rem;
  text-align: center;
  font-size: 2rem;
  color: var(--text-color);
  transform: scale(0);
  transition: 0.2s ease;
}

.popup-content .success {
  font-size: 15rem;
  color: var(--main-color);
}

.popup-content p {
  margin-top: 1rem;
  max-width: 40rem;
  color: var(--text-color);
}

.contact-popup-dismiss {
  margin-top: 2rem;
  border-color: transparent;
  background: var(--main-color);
  color: #fff;
  padding: 1rem 3rem;
  font-size: 20px;
  border-radius: 1rem;
  transition: 0.2s ease;
  cursor: pointer;
}

.contact-popup-dismiss:hover {
  transform: scale(1.11);
}

/* End Email Sent Confirmation Popup */
/* End Contact Section */
/* Footer Section */

.footer {
  background-image: linear-gradient(to bottom, #434343 0%, black 100%);
  color: #fff;
  padding: 100px 0;
  border-top-left-radius: 10rem;
  border-top-right-radius: 10rem;
}

.container {
  width: 60%;
  margin: 0 auto;
}

.footer-content {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}

.footer-section h3 {
  font-size: 1.5rem;
}

h3 .underline {
  width: 5rem;
  height: 5px;
  background: #000;
  border-radius: 3px;
  margin-top: 5px;
  margin-bottom: 1rem;
  position: relative;
  overflow: hidden;
}

.underline span {
  position: absolute;
  width: 25px;
  height: 100%;
  background: var(--main-color);
  border-radius: 3px;
  top: 0;
  left: -25px;
  animation: LineMove 2s linear infinite;
}

.footer-section p {
  margin-bottom: -1px;
  color: #ddd;
}

.footer-section a {
  color: #ddd;
  text-decoration: none;
  transition: 0.2s ease;
}

.footer-section a:hover {
  color: var(--main-color);
}

.social-link {
  display: block;
  margin: 5px 0;
}

.footer-bottom {
  text-align: center;
  margin-top: 3rem;
  padding-top: 1rem;
  border-top: 1px solid #ccc;
  color: #fff;
}

/* Website Scroll-Progress Bar */
/* (Circular) Scroll Progress 1 */

#Scroll-progress {
  height: 100px;
  width: 100px;
  border-radius: 50%;
  position: fixed;
  bottom: 25px;
  left: 25px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
  display: grid;
  place-items: center;
  z-index: 9999;
}

#progress-value {
  display: block;
  height: calc(100% - 20px);
  width: calc(100% - 20px);
  background-color: #fff;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-weight: 600;
  font-size: 20px;
}

/* End Scroll Progress 1 */
/* End Website Scroll-Progress Bar */
/* Scrollbar */

::-webkit-scrollbar {
  width: 10px;
}

::-webkit-scrollbar-thumb {
  background-color: var(--main-color);
  border-radius: 20px;
}

::-webkit-scrollbar-track {
  background-color: var(--bg-color);
}

/* End Scrollbar */
/* Background Animation */

.box {
  height: auto;
}

.box div {
  height: 60px;
  width: 60px;
  position: absolute;
  top: 10%;
  left: 10%;
  animation: animate 4s linear infinite;
  background: var(--box-color);
  border-radius: 50%;
  transition: opacity 0.1s ease;
}

.box div:nth-child(1) {
  top: 20%;
  left: 20%;
  animation: animate 8s linear infinite;
}

.box div:nth-child(2) {
  top: 26%;
  left: 89%;
  animation: animate 10s linear infinite;
}

.box div:nth-child(3) {
  top: 80%;
  left: 90%;
  animation: animate 5s linear infinite;
}

.box div:nth-child(4) {
  top: 65%;
  left: 75%;
  animation: animate 7s linear infinite;
}

.box div:nth-child(5) {
  top: 90%;
  left: 10%;
  animation: animate 9s linear infinite;
}

.box div:nth-child(6) {
  top: 30%;
  left: 60%;
  animation: animate 5s linear infinite;
}

.box div:nth-child(7) {
  top: 70%;
  left: 33%;
  animation: animate 8s linear infinite;
}

.box div:nth-child(8) {
  top: 75%;
  left: 60%;
  animation: animate 10s linear infinite;
}

.box div:nth-child(9) {
  top: 23%;
  left: 50%;
  animation: animate 6s linear infinite;
}

.box div:nth-child(10) {
  top: 35%;
  left: 7%;
  animation: animate 10s linear infinite;
}

/* End Background Animation */
/* Contact Section Background Animation */

.background-animation {
  width: 110%;
  height: 100%;
  display: flex;
  z-index: 1;
}

#stars {
  width: 5px;
  height: 5px;
  background: transparent;
  animation: animStar 50s linear infinite;
  box-shadow: 779px 1331px var(--text-color), 324px 42px var(--text-color),
    303px 586px var(--text-color), 1312px 276px var(--text-color),
    451px 625px var(--text-color), 521px 1931px var(--text-color),
    1087px 1871px var(--text-color), 36px 1546px var(--text-color),
    132px 934px var(--text-color), 1698px 901px var(--text-color),
    1418px 664px var(--text-color), 1448px 1157px var(--text-color),
    1084px 232px var(--text-color), 347px 1776px var(--text-color),
    1722px 243px var(--text-color), 1629px 835px var(--text-color),
    479px 969px var(--text-color), 1231px 960px var(--text-color),
    586px 384px var(--text-color), 164px 527px var(--text-color),
    8px 646px var(--text-color), 1150px 1126px var(--text-color),
    665px 1357px var(--text-color), 1556px 1982px var(--text-color),
    1260px 1961px var(--text-color), 1675px 1741px var(--text-color),
    1843px 1514px var(--text-color), 718px 1628px var(--text-color),
    242px 1343px var(--text-color), 1497px 1880px var(--text-color),
    1364px 230px var(--text-color), 1739px 1302px var(--text-color),
    636px 959px var(--text-color), 304px 686px var(--text-color),
    614px 751px var(--text-color), 1935px 816px var(--text-color),
    1428px 60px var(--text-color), 355px 335px var(--text-color),
    1594px 158px var(--text-color), 90px 60px var(--text-color),
    1553px 162px var(--text-color), 1239px 1825px var(--text-color),
    1945px 587px var(--text-color), 749px 1785px var(--text-color),
    1987px 1172px var(--text-color), 1301px 1237px var(--text-color),
    1039px 342px var(--text-color), 1585px 1481px var(--text-color),
    995px 1048px var(--text-color), 524px 932px var(--text-color),
    214px 413px var(--text-color), 1701px 1300px var(--text-color),
    1037px 1613px var(--text-color), 1871px 996px var(--text-color),
    1360px 1635px var(--text-color), 1110px 1313px var(--text-color),
    412px 1783px var(--text-color), 1949px 177px var(--text-color),
    903px 1854px var(--text-color), 700px 1936px var(--text-color),
    378px 125px var(--text-color), 308px 834px var(--text-color),
    1118px 962px var(--text-color), 1350px 1929px var(--text-color),
    781px 1811px var(--text-color), 561px 137px var(--text-color),
    757px 1148px var(--text-color), 1670px 1979px var(--text-color),
    343px 739px var(--text-color), 945px 795px var(--text-color),
    576px 1903px var(--text-color), 1078px 1436px var(--text-color),
    1583px 450px var(--text-color), 1366px 474px var(--text-color),
    297px 1873px var(--text-color), 192px 162px var(--text-color),
    1624px 1633px var(--text-color), 59px 453px var(--text-color),
    82px 1872px var(--text-color), 1933px 498px var(--text-color),
    1966px 1974px var(--text-color), 1975px 1688px var(--text-color),
    779px 314px var(--text-color), 1858px 1543px var(--text-color),
    73px 1507px var(--text-color), 1693px 975px var(--text-color),
    1683px 108px var(--text-color), 1768px 1654px var(--text-color),
    654px 14px var(--text-color), 494px 171px var(--text-color),
    1689px 1895px var(--text-color), 1660px 263px var(--text-color),
    1031px 903px var(--text-color), 1203px 1393px var(--text-color),
    1333px 1421px var(--text-color), 1113px 41px var(--text-color),
    1206px 1645px var(--text-color), 1325px 1635px var(--text-color),
    142px 388px var(--text-color), 572px 215px var(--text-color),
    1535px 296px var(--text-color), 1419px 407px var(--text-color),
    1379px 1003px var(--text-color), 329px 469px var(--text-color),
    1791px 1652px var(--text-color), 935px 1802px var(--text-color),
    1330px 1820px var(--text-color), 421px 1933px var(--text-color),
    828px 365px var(--text-color), 275px 316px var(--text-color),
    707px 960px var(--text-color), 1605px 1554px var(--text-color),
    625px 58px var(--text-color), 717px 1697px var(--text-color),
    1669px 246px var(--text-color), 1925px 322px var(--text-color),
    1154px 1803px var(--text-color), 1929px 295px var(--text-color),
    1248px 240px var(--text-color), 1045px 1755px var(--text-color),
    166px 942px var(--text-color), 1888px 1773px var(--text-color),
    678px 1963px var(--text-color), 1370px 569px var(--text-color),
    1974px 1400px var(--text-color), 1786px 460px var(--text-color),
    51px 307px var(--text-color), 784px 1400px var(--text-color),
    730px 1258px var(--text-color), 1712px 393px var(--text-color),
    416px 170px var(--text-color), 1797px 1932px var(--text-color),
    572px 219px var(--text-color), 1557px 1856px var(--text-color),
    218px 8px var(--text-color), 348px 1334px var(--text-color),
    469px 413px var(--text-color), 385px 1738px var(--text-color),
    1357px 1818px var(--text-color), 240px 942px var(--text-color),
    248px 1847px var(--text-color), 1535px 806px var(--text-color),
    236px 1514px var(--text-color), 1429px 1556px var(--text-color),
    73px 1633px var(--text-color), 1398px 1121px var(--text-color),
    671px 1301px var(--text-color), 1404px 1663px var(--text-color),
    740px 1018px var(--text-color), 1600px 377px var(--text-color),
    785px 514px var(--text-color), 112px 1084px var(--text-color),
    1915px 1887px var(--text-color), 1463px 1848px var(--text-color),
    687px 1115px var(--text-color), 1268px 1768px var(--text-color),
    1729px 1425px var(--text-color), 1284px 1022px var(--text-color),
    801px 974px var(--text-color), 1975px 1317px var(--text-color),
    1354px 834px var(--text-color), 1446px 1484px var(--text-color),
    1283px 1786px var(--text-color), 11px 523px var(--text-color),
    1842px 236px var(--text-color), 1355px 654px var(--text-color),
    429px 7px var(--text-color), 1033px 1128px var(--text-color),
    157px 297px var(--text-color), 545px 635px var(--text-color),
    52px 1080px var(--text-color), 827px 1520px var(--text-color),
    1121px 490px var(--text-color), 9px 309px var(--text-color),
    1744px 1586px var(--text-color), 697px 1740px var(--text-color),
    462px 1530px var(--text-color), 1516px 1514px var(--text-color),
    1930px 354px var(--text-color), 1715px 1244px var(--text-color),
    1181px 448px var(--text-color);
}

#stars:after {
  content: "";
  position: absolute;
  top: 2000px;
  width: 3px;
  height: 3px;
  background: transparent;
  animation: animStar 100s linear infinite;
  box-shadow: 779px 1331px var(--text-color), 324px 42px var(--text-color),
    303px 586px var(--text-color), 1312px 276px var(--text-color),
    451px 625px var(--text-color), 521px 1931px var(--text-color),
    1087px 1871px var(--text-color), 36px 1546px var(--text-color),
    132px 934px var(--text-color), 1698px 901px var(--text-color),
    1418px 664px var(--text-color), 1448px 1157px var(--text-color),
    1084px 232px var(--text-color), 347px 1776px var(--text-color),
    1722px 243px var(--text-color), 1629px 835px var(--text-color),
    479px 969px var(--text-color), 1231px 960px var(--text-color),
    586px 384px var(--text-color), 164px 527px var(--text-color),
    8px 646px var(--text-color), 1150px 1126px var(--text-color),
    665px 1357px var(--text-color), 1556px 1982px var(--text-color),
    1260px 1961px var(--text-color), 1675px 1741px var(--text-color),
    1843px 1514px var(--text-color), 718px 1628px var(--text-color),
    242px 1343px var(--text-color), 1497px 1880px var(--text-color),
    1364px 230px var(--text-color), 1739px 1302px var(--text-color),
    636px 959px var(--text-color), 304px 686px var(--text-color),
    614px 751px var(--text-color), 1935px 816px var(--text-color),
    1428px 60px var(--text-color), 355px 335px var(--text-color),
    1594px 158px var(--text-color), 90px 60px var(--text-color),
    1553px 162px var(--text-color), 1239px 1825px var(--text-color),
    1945px 587px var(--text-color), 749px 1785px var(--text-color),
    1987px 1172px var(--text-color), 1301px 1237px var(--text-color),
    1039px 342px var(--text-color), 1585px 1481px var(--text-color),
    995px 1048px var(--text-color), 524px 932px var(--text-color),
    214px 413px var(--text-color), 1701px 1300px var(--text-color),
    1037px 1613px var(--text-color), 1871px 996px var(--text-color),
    1360px 1635px var(--text-color), 1110px 1313px var(--text-color),
    412px 1783px var(--text-color), 1949px 177px var(--text-color),
    903px 1854px var(--text-color), 700px 1936px var(--text-color),
    378px 125px var(--text-color), 308px 834px var(--text-color),
    1118px 962px var(--text-color), 1350px 1929px var(--text-color),
    781px 1811px var(--text-color), 561px 137px var(--text-color),
    757px 1148px var(--text-color), 1670px 1979px var(--text-color),
    343px 739px var(--text-color), 945px 795px var(--text-color),
    576px 1903px var(--text-color), 1078px 1436px var(--text-color),
    1583px 450px var(--text-color), 1366px 474px var(--text-color),
    297px 1873px var(--text-color), 192px 162px var(--text-color),
    1624px 1633px var(--text-color), 59px 453px var(--text-color),
    82px 1872px var(--text-color), 1933px 498px var(--text-color),
    1966px 1974px var(--text-color), 1975px 1688px var(--text-color),
    779px 314px var(--text-color), 1858px 1543px var(--text-color),
    73px 1507px var(--text-color), 1693px 975px var(--text-color),
    1683px 108px var(--text-color), 1768px 1654px var(--text-color),
    654px 14px var(--text-color), 494px 171px var(--text-color),
    1689px 1895px var(--text-color), 1660px 263px var(--text-color),
    1031px 903px var(--text-color), 1203px 1393px var(--text-color),
    1333px 1421px var(--text-color), 1113px 41px var(--text-color),
    1206px 1645px var(--text-color), 1325px 1635px var(--text-color),
    142px 388px var(--text-color), 572px 215px var(--text-color),
    1535px 296px var(--text-color), 1419px 407px var(--text-color),
    1379px 1003px var(--text-color), 329px 469px var(--text-color),
    1791px 1652px var(--text-color), 935px 1802px var(--text-color),
    1330px 1820px var(--text-color), 421px 1933px var(--text-color),
    828px 365px var(--text-color), 275px 316px var(--text-color),
    707px 960px var(--text-color), 1605px 1554px var(--text-color),
    625px 58px var(--text-color), 717px 1697px var(--text-color),
    1669px 246px var(--text-color), 1925px 322px var(--text-color),
    1154px 1803px var(--text-color), 1929px 295px var(--text-color),
    1248px 240px var(--text-color), 1045px 1755px var(--text-color),
    166px 942px var(--text-color), 1888px 1773px var(--text-color),
    678px 1963px var(--text-color), 1370px 569px var(--text-color),
    1974px 1400px var(--text-color), 1786px 460px var(--text-color),
    51px 307px var(--text-color), 784px 1400px var(--text-color),
    730px 1258px var(--text-color), 1712px 393px var(--text-color),
    416px 170px var(--text-color), 1797px 1932px var(--text-color),
    572px 219px var(--text-color), 1557px 1856px var(--text-color),
    218px 8px var(--text-color), 348px 1334px var(--text-color),
    469px 413px var(--text-color), 385px 1738px var(--text-color),
    1357px 1818px var(--text-color), 240px 942px var(--text-color),
    248px 1847px var(--text-color), 1535px 806px var(--text-color),
    236px 1514px var(--text-color), 1429px 1556px var(--text-color),
    73px 1633px var(--text-color), 1398px 1121px var(--text-color),
    671px 1301px var(--text-color), 1404px 1663px var(--text-color),
    740px 1018px var(--text-color), 1600px 377px var(--text-color),
    785px 514px var(--text-color), 112px 1084px var(--text-color),
    1915px 1887px var(--text-color), 1463px 1848px var(--text-color),
    687px 1115px var(--text-color), 1268px 1768px var(--text-color),
    1729px 1425px var(--text-color), 1284px 1022px var(--text-color),
    801px 974px var(--text-color), 1975px 1317px var(--text-color),
    1354px 834px var(--text-color), 1446px 1484px var(--text-color),
    1283px 1786px var(--text-color), 11px 523px var(--text-color),
    1842px 236px var(--text-color), 1355px 654px var(--text-color),
    429px 7px var(--text-color), 1033px 1128px var(--text-color),
    157px 297px var(--text-color), 545px 635px var(--text-color),
    52px 1080px var(--text-color), 827px 1520px var(--text-color),
    1121px 490px var(--text-color), 9px 309px var(--text-color),
    1744px 1586px var(--text-color), 697px 1740px var(--text-color),
    462px 1530px var(--text-color), 1516px 1514px var(--text-color),
    1930px 354px var(--text-color), 1715px 1244px var(--text-color),
    1181px 448px var(--text-color);
}

@keyframes animStar {
  from {
    transform: translateY(0px);
  }
  to {
    transform: translateY(-2000px);
  }
}

/* Scroll To Home */

.scroll-to-home {
  position: fixed;
  width: 3.5rem;
  height: 3.5rem;
  display: flex;
  justify-content: center;
  align-items: center;
  bottom: 30px;
  right: 50px;
  opacity: 0;
  transition: 0.5s ease;
  visibility: hidden;
  background-color: var(--main-color);
  color: #fff;
  font-size: 2rem;
  border-radius: 50%;
}

.scroll-to-home.show {
  opacity: 1;
  visibility: visible;
}

.scroll-to-home:hover {
  background: var(--bg-color);
  color: var(--text-color);
  box-shadow: 0 0 1rem var(--main-color);
}

/* End Scroll To Home */
/* Fixed Positioned Social Icons */

.fixed-social-icons {
  position: fixed;
  left: 30px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 20px;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.5s ease, visibility 0.5s ease;
}

.fixed-social-icons.visible {
  opacity: 1;
  visibility: visible;
}

.fixed-social-icons .icon {
  text-decoration: none;
  color: var(--text-color);
  background-color: transparent;
  width: 50px;
  height: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
  position: relative;
  transition: all 0.3s ease;
}

.fixed-social-icons .icon:hover {
  color: #fff;
  transform: scale(1.2);
}

.fixed-social-icons .icon:nth-child(1):hover {
  background-color: #ff6200;
}

.fixed-social-icons .icon:nth-child(2):hover {
  background-color: #00b4f0;
}

.fixed-social-icons .icon:nth-child(3):hover {
  background-color: var(--github-color);
}

.fixed-social-icons .icon:nth-child(4):hover {
  background-color: red;
}

.fixed-social-icons .icon i {
  font-size: 1.5rem;
}

/* Tooltip styles */
.icon-tooltip {
  position: absolute;
  left: 110%;
  background-color: inherit;
  color: #fff;
  padding: 5px 15px;
  border-radius: 2rem;
  font-size: 0.9rem;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

.icon:hover .icon-tooltip {
  opacity: 1;
  visibility: visible;
}

/* End Fixed Positioned Social Icons */
/* All Animations */

/* Home Section 'Soumik Riyan Madhu' Name Blinking Animation */

@keyframes text-animate {
  0%,
  18%,
  20%,
  50.1%,
  60%,
  65.1%,
  80%,
  90.1%,
  92% {
    color: var(--text-color);
    text-shadow: none;
  }
  18.1%,
  20.1%,
  30%,
  50%,
  60.1%,
  65%,
  80.1%,
  90%,
  92.1%,
  100% {
    color: #fff;
    text-shadow: 0 0 10px var(--main-color), 0 0 20px var(--main-color),
      0 0 20px var(--main-color), 0 0 80px var(--main-color),
      0 0 40px var(--main-color), 0 0 400px var(--main-color);
  }
}

/* End Home Section 'Soumik Riyan Madhu' Name Blinking Animation */
/* Home Section Image Floating Animation */

@keyframes floating {
  0% {
    transform: translateY(0px);
  }

  50% {
    transform: translateY(-30px);
  }

  100% {
    transform: translateY(0px);
  }
}

/* End Home Section Image Floating Animation */
/* Home Section Image Border Glowing Animation */

@keyframes circleRotate {
  0% {
    transform: rotate(0);
  }

  100% {
    transform: rotate(360deg);
  }
}

/* End Home Section Image Border Glowing Animation */
/* All Section Heading Text Cursor Move Animation */

@keyframes text-filling {
  0% {
    width: 0;
  }
  70% {
    width: 100%;
  }
}

/* End All Section Heading Text Cursor Move Animation */
/* About Section Download Full Intro Button Animation */

@keyframes borderAnimation {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

/* End About Section Download Full Intro Button Animation */
/* Services Box Border Animation */

@keyframes border {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(350deg);
  }
}

/* End Services Box Border Animation */
/* Loading Animation 1 Name Drawing */

@keyframes draw {
  0% {
    stroke-dashoffset: 4500;
  }
  100% {
    stroke-dashoffset: 0;
  }
}

/* End Loading Animation 1 Name Drawing */
/* Background Animation */

@keyframes animate {
  0% {
    transform: scale(0) translateY(0) rotate(50deg);
  }

  100% {
    transform: scale(1.6) translateY(-250px) rotate(360deg);
    opacity: 0;
  }
}

/* End Background Animation */
/* Education Line-Moving Animation */

@keyframes LineMove {
  0% {
    left: -15px;
  }
  100% {
    left: 110%;
  }
}

/* End Education Line-Moving Animation */
/* Skill Section Professional Skill Circle Animation */

@keyframes skill-glow {
  0% {
    background: var(--text-color);
    box-shadow: none;
  }
  100% {
    background: var(--main-color);
    box-shadow: 0 0 1rem var(--main-color);
  }
}

/* End Skill Section Professional Skill Circle Animation */
/* Skill Section Programming Skill Bar Animation */

@keyframes html {
  0% {
    width: 0%;
  }
  100% {
    width: 90%;
  }
}

@keyframes css {
  0% {
    width: 0%;
  }
  100% {
    width: 85%;
  }
}

@keyframes js {
  0% {
    width: 0%;
  }
  100% {
    width: 50%;
  }
}

@keyframes python {
  0% {
    width: 0%;
  }
  100% {
    width: 62%;
  }
}

/* End Skill Section Programming Skill Bar Animation */
/* End All Animations */

/* Media Queries */

@media (max-width: 1900px) {
  .home-content h4 {
    font-size: 2rem;
    margin: 0.2rem 0;
  }

  .home-content p {
    max-width: 35rem;
  }
}

@media (max-width: 1710px) {
  .home {
    display: flex;
    flex-direction: column-reverse;
    justify-content: center;
    min-height: 100vh;
  }

  .home-img {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 50%;
    margin: 8rem 0 9rem 12rem;
  }

  .home-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    width: 100%;
  }

  .home-content .btn {
    margin: 10px 0;
  }
}

@media (max-width: 1281px) {
  .home {
    display: flex;
    margin-right: 8rem;
  }
}

@media (max-width: 768px) {
  .logo-name {
    font-size: 24px;
    letter-spacing: 8px;
  }

  #svg,
  #svg2 {
    height: 120px;
    width: 120px;
  }

  #svg2 {
    height: 140px;
  }
}

@media (max-width: 768px) {
  .whats-new-content {
    padding: 3rem;
  }

  .whats-new-content h2 {
    font-size: 1.8rem;
  }

  .whats-new-content p {
    font-size: 1.1rem;
  }

  #exit-button {
    padding: 0.8rem 2rem;
    font-size: 0.9rem;
  }
}
@media (max-width: 480px) {
  .logo-name {
    font-size: 18px;
    letter-spacing: 5px;
  }

  #svg,
  #svg2 {
    height: 90px;
    width: 90px;
  }

  #svg2 {
    height: 100px;
  }
}

@media (max-width: 480px) {
  .whats-new-content {
    padding: 2rem;
  }

  .whats-new-content h2 {
    font-size: 1.5rem;
  }

  .whats-new-content p {
    font-size: 1rem;
  }

  #exit-button {
    padding: 0.7rem 1.5rem;
    font-size: 0.8rem;
  }
}

@media (max-width: 480px) {
  .sidebar {
    width: 55px;
  }

  .sidebar:hover {
    width: 200px;
  }

  .sidebar .sidebar-header img {
    width: 32px;
  }

  .sidebar .sidebar-header h2 {
    font-size: 0.9rem;
    margin-left: 10px;
  }

  .sidebar-links h4 {
    font-size: 0.9rem;
  }

  .sidebar-links li a {
    font-size: 0.8rem;
    padding: 10px 6px;
  }

  .sidebar .user-account {
    padding: 8px 6px;
  }
}

@media (max-width: 840px) {
  html {
    font-size: 72%;
  }

  .skill-item {
    margin: 0 5rem;
  }

  .contact form {
    max-width: 45rem;
  }
}

@media (max-width: 450px) {
  html {
    font-size: 50%;
  }
}