@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100;1,200;1,300;1,400;1,500;1,600;1,700&family=Montserrat:ital,wght@0,600;1,600&family=Playfair+Display:ital,wght@0,400..900;1,400..900&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');
* {
  margin: 0;
  /* padding: 0 !important; */
}
body {
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
}
nav {
  z-index: 999;
}
.nav-link {
    color: #9C9C9C;
    transition: 0.3s;
    -webkit-transition: 0.3s;
    -moz-transition: 0.3s;
    -ms-transition: 0.3s;
    -o-transition: 0.3s;
}
.nav-link:hover {
    color: #fff;
}
.my-name {
    /*font-size: 2rem;
    *//*letter-spacing: 0px;
    */font-size: 37px;
    border-right: 10px solid;
    width: 100%;
    white-space: nowrap;
    overflow: hidden;
    animation: typing 1.5s steps(25),    cursor 0.4s step-end infinite alternate;
    -webkit-animation: typing 1.5s steps(25),    cursor 0.4s step-end infinite alternate;
}
@keyframes cursor {
    50% {
        border-color: transparent;
    }
}
@keyframes typing {
    from {
        width: 0;
    }
}
.me {
  font-weight: 300;  
}
.header-btn {
    box-shadow: 0 4px 10px 0 #62ba1bab;
    transition: 
        background 0.3s,
        color 0.3s,
        box-shadow 0.3s;
}
.header-btn:hover {
    background: #62ba1b;
    color: #fff;
    box-shadow: 0 8px 24px 0 #62ba1b70;
}
.langs {
      display: inline-block;
      padding-left: 100%;
      animation: scroll-left 15s linear infinite;
      font-size: 20px;
      font-weight: bold;
      color: #333;
    }

    @keyframes scroll-left {
      0% {
        transform: translateX(0);
      }
      100% {
        transform: translateX(-100%);
      }
    }

    #education .card {
      transition:
            0.3s,         background 0.3s,        color 0.3s,        box-shadow 0.3s;
      -webkit-transition: 0.3s,         background 0.3s,        color 0.3s,        box-shadow 0.3s;;
      -moz-transition: 0.3s,         background 0.3s,        color 0.3s,        box-shadow 0.3s;;
      -ms-transition: 0.3s,         background 0.3s,        color 0.3s,        box-shadow 0.3s;;
      -o-transition: 0.3s,         background 0.3s,        color 0.3s,        box-shadow 0.3s;;
}
    #education .card:hover {
      transform: translateY(-10px);
      -webkit-transform: translateY(-10px);
      -moz-transform: translateY(-10px);
      -ms-transform: translateY(-10px);
      -o-transform: translateY(-10px);
      background: #fff;
      box-shadow: 0 8px 24px 14px #fff;

}


@media (max-width: 600px) {
  .my-name {
    transform: translateX(-10px);
    -webkit-transform: translateX(-10px);
    -moz-transform: translateX(-10px);
    -ms-transform: translateX(-10px);
    -o-transform: translateX(-10px);
}
}


.skill-blur {
    position: relative;
    overflow: hidden;
}
.skill-overlay {
    position: absolute;
    inset: 0;
    background: rgba(255,255,255,0.6);
    backdrop-filter: blur(1px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
}
.skill-overlay i {
    color: #888;
}

.skill,
.contact {
    box-shadow: 0 4px 24px 0 #9C9C9C;
    transition: 0.3s;
    -webkit-transition: 0.3s;
    -moz-transition: 0.3s;
    -ms-transition: 0.3s;
    -o-transition: 0.3s;
}
.skill:hover,
.contact:hover {
  background-color: #123;
  color: #fff;
}
.contact:hover a {
  color: #fff;
}
.skill-github:hover .fa-github,
.contact-github:hover .fa-github {
  color: #fff !important;
}

#projects .skill:hover {
    background-color: #123;
    color: #fff;
}

.carousel-control-next,
        .carousel-control-prev {
            height: 50px !important;
            background-color: transparent !important;
            margin-top: 170px !important;
        }
        .carousel-control-prev-icon,
        .carousel-control-next-icon {
            color: #000 !important;
            margin-top: 50px !important;
            margin-left: 20px !important;
            /* background-color: rgb(0,0,0,0.9) !important; */
            border-radius: 50% !important;
            
        }
        .carousel-control-prev-icon {
            margin-left: -70px !important;
        }
        .sliding {
          width: 30px !important;
          height: 1px !important;
          background-color: #000 !important;
          border-top: 2px solid #000 !important;
          border-bottom: 2px solid #000 !important;
        }


.proj-btn {
  transition: 0.3s !important;
  -webkit-transition: 0.3s !important;
  -moz-transition: 0.3s !important;
  -ms-transition: 0.3s !important;
  -o-transition: 0.3s !important;
}
.proj-btn:hover {
  transform: translateY(-5px) !important;
  -webkit-transform: translateY(-5px) !important;
  -moz-transform: translateY(-5px) !important;
  -ms-transform: translateY(-5px) !important;
  -o-transform: translateY(-5px) !important;
  background-color: #fff !important;
  border: 2px #123 solid !important;
}
.proj-btn:hover a,
.proj-btn:hover i {
    color: #123 !important;
}
  #projects {
    width: 100% !important;
  }
  .pro-slide {
    width: 80% !important;
  }
  .see-it:hover {
    color: #123 !important;
    background-color: #fff !important;
    border: 2px #123 solid !important;
  }
  .see-it:hover i {
    color: #123 !important;
  }

.contact:hover {
  color: #fff !important;
}

  @media (max-width: 1250px){
    #projects .card {
    margin: 0 auto !important;
    height: 50% !important;
    width: 75% !important;
    padding-bottom: 20px;
  }
  #projects .card img {
    height: 40% !important;
  }
  .third-img {
    height: 30% !important;
  }
  }
@media (max-width: 900px) {
  .skill {
    font-size: 12px !important;
    padding: 10px 0 !important;
    gap: 0p !important;
  }
  #projects .card {
    margin: 0 auto !important;
    height: 50% !important;
    width: 75% !important;
    padding-bottom: 20px;
  }
  #projects .card img {
    height: 40% !important;
  }
  .third-img {
    height: 30% !important;
  }
  
}
@media (max-width: 800px) {
  #projects .card {
    margin: 0 auto !important;
    height: 50% !important;
    width: 75% !important;
    padding-bottom: 20px;
  }
  #projects .card img {
    height: 40% !important;
  }
  .third-img {
    height: 30% !important;
  }
  #about img {
    width: 300px !important;
  }
  .bi-typescript {
    font-size: 16px !important;
  }
}

@media(max-width: 575.98px) {
  header nav {
    transform: translateX(10px) !important;
    width: 95% !important;
    -webkit-transform: translateX(10px) !important;
    -moz-transform: translateX(10px) !important;
    -ms-transform: translateX(10px) !important;
    -o-transform: translateX(10px) !important;
}
  header nav .nav-div {
    width: 100% !important;
  }
  .h-content h1 {
    width: 100%;
  }
  .h-content .h-content-text {
    margin-left: 100px;
  }
  .my-name {
    margin-left: 5px !important;
    font-size: 25px !important;
  }
  .edu h2 {
    margin-left: 20px !important;
  }
  #education {
    width: 100%;
    /* transform: translateX(-20px); */
    margin-right: 0 !important;
    /* -webkit-transform: translateX(-20px);
    -moz-transform: translateX(-20px);
    -ms-transform: translateX(-20px);
    -o-transform: translateX(-20px); */
}
  .edu {
    transform: translateX(-30px);
    -webkit-transform: translateX(-30px);
    -moz-transform: translateX(-30px);
    -ms-transform: translateX(-30px);
    -o-transform: translateX(-30px);
    width: 105% !important;
}
  #projects .card {
    margin: 0 auto !important;
    height: 50% !important;
    width: 95% !important;
    padding-bottom: 20px;
  }
  #projects .card img {
    height: 40% !important;
  }
  .third-img {
    height: 30% !important;
  }
  #skills {
    width: 100%;
    overflow: hidden;
  }
  .carousel-control-next-icon {
    transform: translateX(20px);
    -webkit-transform: translateX(20px);
    -moz-transform: translateX(20px);
    -ms-transform: translateX(20px);
    -o-transform: translateX(20px);
}
}

@media (max-width: 383px) {
  .my-name {
    margin-left: 0 !important;
    font-size: 22px !important;
  }
  #projects .card {
    margin: 0 auto !important;
    height: 50% !important;
    width: 95% !important;
    padding-bottom: 20px;
    gap: 0px !important;
  }
  #projects .card img {
    height: 40% !important;
  }
  #projects .card h3 {
    font-size: 18px;
  }
  .third-img {
    height: 30% !important;
  }
  .langus {
    gap: 0 !important;
  }
  .langus .skill{
    padding: 0 !important;
    flex-direction: column;
  }
  .proj-btn {
    margin: 0 20px;
  }
}
@media (max-width: 359.8px) {
  header nav {
      transform: translateX(10px) !important;
      width: 90% !important;
      -webkit-transform: translateX(10px) !important;
      -moz-transform: translateX(10px) !important;
      -ms-transform: translateX(10px) !important;
      -o-transform: translateX(10px) !important;
  }
  #about img {
    width: 280px !important;
    /* width: 200px !important; */
  }
  /* .carousel-control-prev-icon {
    width: 16px !important;
  } */
  .proj-btn {
    margin-left: 30px !important;
  }
}