/* designs for tab's or ipad's */
/* /// 1024 ipad DESIGN /// */
@media (max-width: 1024px) {
  .top-header {
    height: 20rem;
  }
  .nav-bar {
    position: relative;
    padding: 0.5rem 17.5rem;
    padding-right: 5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .logo {
    font-size: 5rem;
    width: 10ch;
  }
  .nav-list {
    position: absolute;
    padding-top: 5rem;
    row-gap: 5rem;
    font-size: 3.5rem;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    background-color: rgba(32, 29, 29, 0.322);
    box-shadow: 0 0 20px var(--main-color) inset;
    width: 30rem;
    height: 60rem;
    top: 8rem;
    border-radius: 15px;
    border: 1px solid rgba(255, 255, 255, 0);
    right: 17rem;
    opacity: 0;
    transition: opacity .5s;
    animation-duration: 1.5s;
    animation-fill-mode: forwards;
    top: -75rem;
  }
  /* hover  */
  .nav-list a:hover {
    border-bottom: 0.4rem solid var(--main-color);
  }
  /* MENU ICON SECTION  */
  .menu-icon {
    display: inline;
    width: 12rem;
    height: 12rem;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .menu-icon .menu-i {
    font-size: 8em;
    color: var(--main-color);
  }
  .menu-icon:hover .menu-i {
    transform: scale(1.03);
    text-shadow: 0 0 15px var(--main-color);
  }
  /* HERO SECTION START */
  .hero {
    position: absolute;
    top: 20rem;
    width: 100%;
    height: calc(100vh - 20rem);
    height: calc(100svh - 20rem);
    display: flex;
    flex-direction: column-reverse;
    row-gap: 5rem;
  }
  .my-info {
    height: calc((90% - 45%) - 1%);
    width: 80%;
  }
  .my-info .heading {
    font-size: 10rem;
  }
  .my-info h2 {
    font-size: 5rem;
  }
  .my-info h2 span::after {
    width: calc(100% + 4px);
    border-left: 7.5px solid var(--main-color);
    right: -5px;
  }
  .my-info p {
    margin: 2.5rem 0;
    font-size: 3rem;
  }
  .hero-socials {
    font-size: 6rem;
    column-gap: 5rem;
  }
  .hero-socials li {
    width: 10rem;
    height: 10rem;
    border: 3.5px solid var(--main-color);
    margin: 2rem 0;
  }
  /* hover  */
  .hero-socials li:hover {
    box-shadow: 0 0 27.5px var(--main-color);
    transform: scale(1.25) translateY(-1rem);
  }
  .hero-btns {
    width: 50%;
    column-gap: 5rem;
    margin: 2rem 0;
  }
  .hire-btn {
    font-size: 2.25rem;
    width: 20rem;
    height: 8rem;
    border: 2.5px solid var(--main-color);
    border-radius: 25px;
    box-shadow: 0 0 25px var(--main-color);
  }
  /* hover  */
  .hire-btn:hover {
    font-weight: 500;
    box-shadow: 0 0 50px var(--main-color);
  }
  .contact-btn {
    font-size: 2.25rem;
    width: 22.5rem;
    height: 8rem;
    border: 3.5px solid var(--main-color);
    border-radius: 25px;
  }
  /* hover  */
  .contact-btn:hover {
    color: var(--secont-bg-color);
    background-color: var(--main-color);
    font-weight: 500;
    box-shadow: 0 0 25px var(--main-color), 0 0 50px var(--main-color);
  }
  .my-image {
    width: 45%;
    height: auto;
  }
  .my-image img {
    border: 2.5px solid var(--main-color);
    box-shadow: 0 0 50px var(--main-color);
  }
  .my-image img:hover {
    box-shadow: 0 0 25px var(--main-color), 0 0 50px var(--main-color),
      0 0 100px var(--main-color);
  }
  .main-container {
    overflow: hidden;
  }
  /* //////////////////////////////////////////////////////// */
  /* //////////////////////////////////////////////////////// */

  .left-door {
    top: 20rem;
    height: calc(100svh - 0rem);
    left: -125%;
  }
  .left-door span {
    width: 1.5rem;
  }
  .right-door {
    top: 20rem;
    height: calc(100svh - 0rem);
    right: -125%;
  }
  .right-door span {
    width: 1.5rem;
  }
  .top-left-to-right {
    width: 50rem;
    height: 2rem;
    z-index: 50;
    top: 20rem;
    left: 1rem;
  }
  .top-right-filer {
    height: 2.25rem;
    top: 20rem;
    left: 49rem;
    width: 3.7rem;
  }
  .top-left-corner {
    width: 2rem;
    height: 2rem;
    top: 20.05rem;
  }
  .top-top-to-bottom {
    width: 2rem;
    height: 50rem;
    top: 21rem;
  }
  .top-bottom-filer {
    width: 2.25rem;
    height: 5rem;
    top: 69rem;
  }
  .bottom-right-to-left {
    width: 50rem;
    height: 2rem;
    bottom: 0rem;
    right: 1rem;
  }
  .bottom-left-filer {
    width: 3.7rem;
    height: 2.25rem;
    right: 49rem;
  }
  .bottom-right-corner {
    width: 2rem;
    height: 2rem;
  }
  .bottom-bottom-to-top {
    width: 2rem;
    height: 50rem;
    bottom: 1rem;
  }
  .bottom-top-filer {
    width: 2.25rem;
    height: 5rem;
    bottom: 49rem;
  }
  /* EDUCATION SECTION START  */
  .education {
    position: relative;
    width: 100%;
    height: calc(100svh - 20rem);
    top: 20rem;
    font-size: 4rem;
    background-color: var(--first-bg-color);
  }
  .education .edu-timeline {
    position: absolute;
    width: 95%;
    height: 1rem;
    box-shadow: 0 0 25px var(--main-color);
    transform: rotate(-90deg);
    top: 90rem;
    left: -55rem;
  }
  .edu-timeline .dot-school {
    width: 2.5rem;
    /* height: rem; */
    left: 85rem;
  }
  .dot-school h3 {
    top: 2.5rem;
    font-size: 5rem;
    transform: rotate(90deg);
    left: 0rem;
  }
  .dot-school .high-school {
    width: 105rem;
    height: 40rem;
    top: 40rem;
    left: -77rem;
    border: 0.5rem solid var(--main-color);
    border-radius: 25px;
    box-shadow: 0 0 25px var(--main-color);
    padding: 5rem;
    padding-top: 2.5rem;
    transform: rotate(90deg);
  }
  /* hover  */
  .high-school:hover {
    transform: scale(1.09) translateY(-1rem);
    box-shadow: 0 0 15px var(--main-color), 0 0 30px var(--main-color),
      0 0 45px var(--main-color);
      transform: rotate(90deg);
  }
  .place-name-of-school {
    top: 1rem;
    left: 0rem;
    margin-bottom: 2.5rem;
    border-radius: 50px;
    border: 0.25rem solid var(--main-color);
  }
  .high-school p {
    font-size: 2.5rem;
  }
  .edu-timeline .dot-university {
    width: 2.5rem;
    height: 2.5rem;
    right: 5rem;
  }
  .dot-university h3 {
    position: relative;
    top: 2.5rem;
    right: 0%;
    font-size: 5rem;
    transform: rotate(90deg);
  }
  .dot-university .university {
    width: 105rem;
    height: 40rem;
    top: 40rem;
    right: -25.5rem;
    border: 0.5rem solid var(--main-color);
    border-radius: 25px;
    box-shadow: 0 0 25px var(--main-color);
    padding: 5rem;
    padding-top: 2.5rem;
    transform: rotate(90deg);
  }
  /* HOVER  */
  .university:hover {
    transform: scale(1.09) translateY(1rem);
    transition: transform 0.5s, box-shadow 0.5s;
    box-shadow: 0 0 15px var(--main-color), 0 0 30px var(--main-color),
      0 0 45px var(--main-color);
      transform: rotate(90deg);
  }
  .place-name-of-university {
    top: 1rem;
    left: 0rem;
    margin-bottom: 2.5rem;
    border-radius: 50px;
    border: 0.25rem solid var(--main-color);
  }
  .university p {
    font-size: 2.5rem;
  }
  /* EDUCATION SECTION END  */

  /* SKILLS SECTION START */
  .skills {
    height: calc(100svh - 20rem);
    top: 20rem;
    font-size: 4rem;
  }
  .skills h2 span {
    color: var(--main-color);
  }
  .skills h2 {
    font-size: 7.5rem;
    height: 10%;
  }
  .tech-skills {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 50%;
    height: 100%;
  }
  .tech-skills h3 {
    font-size: 4rem;
    height: 5%;
  }
  .tech-skills-list {
    grid-template-columns: 10rem 1fr 10rem;
    margin-bottom: 0%;
    grid-template-rows: repeat(9, 1fr);
  }
  .tech-skills-list li p {
    font-size: 3rem;
  }
  .tech-skills-list li .bx {
    font-size: 6rem;
  }
  /* <!-- html bar --> */
  .html-bar {
    box-shadow: 0 0 12.5px var(--main-color);
  }
  /* <!-- css-bar --> */
  .css-bar {
    box-shadow: 0 0 12.5px var(--main-color);
  }
  /* <!-- js-bar --> */
  .js-bar {
    box-shadow: 0 0 12.5px var(--main-color);
  }
  /* <!-- react-bar --> */
  .react-bar {
    box-shadow: 0 0 12.5px var(--main-color);
  }
  /* <!-- nodejs-bar --> */
  .nodejs-bar {
    box-shadow: 0 0 12.5px var(--main-color);
  }
  /* <!-- python-bar --> */
  .python-bar {
    box-shadow: 0 0 12.5px var(--main-color);
  }
  /* <!-- django-bar --> */
  .django-bar {
    box-shadow: 0 0 12.5px var(--main-color);
  }
  /* <!-- c++ bar --> */
  .c-bar {
    box-shadow: 0 0 12.5px var(--main-color);
  }
  /* <!-- git bar --> */
  .git-bar {
    box-shadow: 0 0 12.5px var(--main-color);
  }
  .pro-skills h3 {
    font-size: 4rem;
    margin-top: 5%;
    height: 5%;
  }
  .pro-skills-list {
    width: 90%;
    height: 90%;
    margin-bottom: 0%;
    display: flex;
    align-items: center;
    justify-content: start;
    flex-direction: column;
    row-gap: 5%;
    margin-top: 30%;
  }
  .progressbar {
    border: 5rem solid var(--main-color);
  }
  div[role="progressbar"] {
    --size: 40rem;
    box-shadow: 0 0 25px var(--main-color);
    border: 0.5rem;
  }
  .pro-skills-list h3 {
    font-size: 3rem;
  }
  .mid-man {
    box-shadow: 0 0 25px var(--main-color) inset;
    border: 0.5rem solid var(--main-color);
  }
  .back-man {
    box-shadow: 0 0 25px var(--main-color);
    border: 0.75rem solid var(--main-color);
  }
  /* SKILLS SECTION END */
  /* SERVICES SECTION START  */
  .services {
    height: calc(100svh - 20rem);
    top: 20rem;
    font-size: 4rem;
  }
  .services h2 {
    font-size: 7.5rem;
    margin-bottom: 2.5%;
  }
  .services-container {
    width: 85%;
    height: 80%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    column-gap: 8%;
    row-gap: 1%;
  }
  .service-cards {
    border: 0.5rem solid var(--main-color);
    box-shadow: 0 0 12.5px var(--main-color);
    border-radius: 25px;
    padding: 1rem 2.5rem;
    height: 45%;
    width: 40%;
  }
  .service-cards:hover {
    box-shadow: 0 0 25px var(--main-color), 0 0 30px var(--main-color),
      0 0 42.5px var(--main-color);
  }
  .service-cards h3 {
    font-size: 4rem;
    margin-bottom: 1rem;
  }
  .service-cards i {
    font-size: 7.5rem;
  }
  .service-cards p {
    font-size: 2.5rem;
  }
  .service-card-1 {
    padding: 1rem 2.5rem;
  }
  .service-card-1 h3 {
    font-size: 4rem;
  }
  /* SERVICES SECTION END */
  /* CONTACT SECTION START */
  .contact {
    height: calc(100svh - 20rem);
    top: 20rem;
    font-size: 4rem;
  }
  .contact h2 {
    font-size: 7.5rem;
  }
  .contact-form input:first-child {
    margin-top: 10%;
  }
  .contact-form input {
    font-size: 3.5rem;
    padding-left: 5rem;
    line-height: 5rem;
    border-radius: 50px;
    border: 0.5rem solid var(--main-color);
    box-shadow: 0 0 12.5px var(--main-color);
  }
  /* hover  */
  .contact-form input:hover {
    box-shadow: 0 0 12.5px var(--main-color), 0 0 25px var(--main-color),
      0 0 37.5px var(--main-color);
  }
  .input-group-1 {
    width: 50%;
    height: 100%;
    display: flex;
    justify-content: start;
    align-items: center;
    flex-direction: column;
    row-gap: 5%;
    margin-top: 13rem;
  }
  .input-group-2 {
    width: 50%;
    height: 100%;
    display: flex;
    justify-content: start;
    align-items: center;
    flex-direction: column;
    row-gap: 5%;
  }
  .contact-form textarea {
    font-size: 3rem;
    padding-left: 5rem;
    padding-top: 5rem;
    line-height: 4rem;
    border-radius: 50px;
    border: 0.5rem solid var(--main-color);
    box-shadow: 0 0 12.5px var(--main-color);
    margin-top: 10%;
  }
  .contact-form textarea:hover {
    box-shadow: 0 0 12.5px var(--main-color), 0 0 25px var(--main-color),
      0 0 37.5px var(--main-color);
  }
  #submit-btn {
    font-size: 4rem;
    background-color: var(--main-color);
    padding: 0rem;
  }
  #reset-btn {
    font-size: 4rem;
    color: var(--main-color);
    padding: 0rem;
  }
  /* CONTACT SECTION END */

  /* page switching animations */
    /* 01 */
@keyframes right-door-01 {
  0% {
    right: -125%;
    transform: skewX(15deg);
  }
  40% {
    right: -50%;
    transform: skewX(15deg);
  }
  60% {
    right: -50%;
    transform: skewX(-15deg);
  }
  100% {
    right: -125%;
    transform: skewX(-15deg);
  }
}
@keyframes left-door-01 {
  0% {
    left: -125%;
    transform: skewX(15deg);
  }
  40% {
    left: -50%;
    transform: skewX(15deg);
  }
  60% {
    left: -50%;
    transform: skewX(-15deg);
  }
  100% {
    left: -125%;
    transform: skewX(-15deg);
  }
}
/* 02 */
@keyframes right-door-02 {
  0% {
    right: -125%;
    transform: skewX(15deg);
  }
  40% {
    right: -50%;
    transform: skewX(15deg);
  }
  60% {
    right: -50%;
    transform: skewX(-15deg);
  }
  100% {
    right: -125%;
    transform: skewX(-15deg);
  }
}
@keyframes left-door-02 {
  0% {
    left: -125%;
    transform: skewX(15deg);
  }
  40% {
    left: -50%;
    transform: skewX(15deg);
  }
  60% {
    left: -50%;
    transform: skewX(-15deg);
  }
  100% {
    left: -125%;
    transform: skewX(-15deg);
  }
}
  /* 1 */
  @keyframes right-door-1 {
    0% {
      right: -125%;
      transform: skewX(15deg);
    }
    40% {
      right: -50%;
      transform: skewX(15deg);
    }
    60% {
      right: -50%;
      transform: skewX(-15deg);
    }
    100% {
      right: -125%;
      transform: skewX(-15deg);
    }
  }
  @keyframes left-door-1 {
    0% {
      left: -125%;
      transform: skewX(15deg);
    }
    40% {
      left: -50%;
      transform: skewX(15deg);
    }
    60% {
      left: -50%;
      transform: skewX(-15deg);
    }
    100% {
      left: -125%;
      transform: skewX(-15deg);
    }
  }
  /* 2 */
  @keyframes right-door-2 {
    0% {
      right: -125%;
      transform: skewX(15deg);
    }
    40% {
      right: -50%;
      transform: skewX(15deg);
    }
    60% {
      right: -50%;
      transform: skewX(-15deg);
    }
    100% {
      right: -125%;
      transform: skewX(-15deg);
    }
  }
  @keyframes left-door-2 {
    0% {
      left: -125%;
      transform: skewX(15deg);
    }
    40% {
      left: -50%;
      transform: skewX(15deg);
    }
    60% {
      left: -50%;
      transform: skewX(-15deg);
    }
    100% {
      left: -125%;
      transform: skewX(-15deg);
    }
  }
  /* 3 */
  @keyframes right-door-3 {
    0% {
      right: -125%;
      transform: skewX(15deg);
    }
    40% {
      right: -50%;
      transform: skewX(15deg);
    }
    60% {
      right: -50%;
      transform: skewX(-15deg);
    }
    100% {
      right: -125%;
      transform: skewX(-15deg);
    }
  }
  @keyframes left-door-3 {
    0% {
      left: -125%;
      transform: skewX(15deg);
    }
    40% {
      left: -50%;
      transform: skewX(15deg);
    }
    60% {
      left: -50%;
      transform: skewX(-15deg);
    }
    100% {
      left: -125%;
      transform: skewX(-15deg);
    }
  }
  /* 4 */
  @keyframes right-door-4 {
    0% {
      right: -125%;
      transform: skewX(15deg);
    }
    40% {
      right: -50%;
      transform: skewX(15deg);
    }
    60% {
      right: -50%;
      transform: skewX(-15deg);
    }
    100% {
      right: -125%;
      transform: skewX(-15deg);
    }
  }
  @keyframes left-door-4 {
    0% {
      left: -125%;
      transform: skewX(15deg);
    }
    40% {
      left: -50%;
      transform: skewX(15deg);
    }
    60% {
      left: -50%;
      transform: skewX(-15deg);
    }
    100% {
      left: -125%;
      transform: skewX(-15deg);
    }
  }
  /* 5 */
  @keyframes right-door-5 {
    0% {
      right: -125%;
      transform: skewX(15deg);
    }
    40% {
      right: -50%;
      transform: skewX(15deg);
    }
    60% {
      right: -50%;
      transform: skewX(-15deg);
    }
    100% {
      right: -125%;
      transform: skewX(-15deg);
    }
  }
  @keyframes left-door-5 {
    0% {
      left: -125%;
      transform: skewX(15deg);
    }
    40% {
      left: -50%;
      transform: skewX(15deg);
    }
    60% {
      left: -50%;
      transform: skewX(-15deg);
    }
    100% {
      left: -125%;
      transform: skewX(-15deg);
    }
  }
  /* 6 */
  @keyframes right-door-6 {
    0% {
      right: -125%;
      transform: skewX(15deg);
    }
    40% {
      right: -50%;
      transform: skewX(15deg);
    }
    60% {
      right: -50%;
      transform: skewX(-15deg);
    }
    100% {
      right: -125%;
      transform: skewX(-15deg);
    }
  }
  @keyframes left-door-6 {
    0% {
      left: -125%;
      transform: skewX(15deg);
    }
    40% {
      left: -50%;
      transform: skewX(15deg);
    }
    60% {
      left: -50%;
      transform: skewX(-15deg);
    }
    100% {
      left: -125%;
      transform: skewX(-15deg);
    }
  }
  /* 7 */
  @keyframes right-door-7 {
    0% {
      right: -125%;
      transform: skewX(15deg);
    }
    40% {
      right: -50%;
      transform: skewX(15deg);
    }
    60% {
      right: -50%;
      transform: skewX(-15deg);
    }
    100% {
      right: -125%;
      transform: skewX(-15deg);
    }
  }
  @keyframes left-door-7 {
    0% {
      left: -125%;
      transform: skewX(15deg);
    }
    40% {
      left: -50%;
      transform: skewX(15deg);
    }
    60% {
      left: -50%;
      transform: skewX(-15deg);
    }
    100% {
      left: -125%;
      transform: skewX(-15deg);
    }
  }
  /* 8 */
  @keyframes right-door-8 {
    0% {
      right: -125%;
      transform: skewX(15deg);
    }
    40% {
      right: -50%;
      transform: skewX(15deg);
    }
    60% {
      right: -50%;
      transform: skewX(-15deg);
    }
    100% {
      right: -125%;
      transform: skewX(-15deg);
    }
  }
  @keyframes left-door-8 {
    0% {
      left: -125%;
      transform: skewX(15deg);
    }
    40% {
      left: -50%;
      transform: skewX(15deg);
    }
    60% {
      left: -50%;
      transform: skewX(-15deg);
    }
    100% {
      left: -125%;
      transform: skewX(-15deg);
    }
  }
  /* 9 */
  @keyframes right-door-9 {
    0% {
      right: -125%;
      transform: skewX(15deg);
    }
    40% {
      right: -50%;
      transform: skewX(15deg);
    }
    60% {
      right: -50%;
      transform: skewX(-15deg);
    }
    100% {
      right: -125%;
      transform: skewX(-15deg);
    }
  }
  @keyframes left-door-9 {
    0% {
      left: -125%;
      transform: skewX(15deg);
    }
    40% {
      left: -50%;
      transform: skewX(15deg);
    }
    60% {
      left: -50%;
      transform: skewX(-15deg);
    }
    100% {
      left: -125%;
      transform: skewX(-15deg);
    }
  }
  /* 10 */
  @keyframes right-door-10 {
    0% {
      right: -125%;
      transform: skewX(15deg);
    }
    40% {
      right: -50%;
      transform: skewX(15deg);
    }
    60% {
      right: -50%;
      transform: skewX(-15deg);
    }
    100% {
      right: -125%;
      transform: skewX(-15deg);
    }
  }
  @keyframes left-door-10 {
    0% {
      left: -125%;
      transform: skewX(15deg);
    }
    40% {
      left: -50%;
      transform: skewX(15deg);
    }
    60% {
      left: -50%;
      transform: skewX(-15deg);
    }
    100% {
      left: -125%;
      transform: skewX(-15deg);
    }
  }
}
/* 1024 DESIGN COMPLETE */
/* /// 1024 ipad DESIGN /// */
@media (max-width: 1000px) {
  .top-header {
    height: 20rem;
  }
  .nav-bar {
    position: relative;
    padding: 0.5rem 17.5rem;
    padding-right: 5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .logo {
    font-size: 5rem;
    width: 10ch;
  }
  .nav-list {
    position: absolute;
    padding-top: 5rem;
    row-gap: 5rem;
    font-size: 3.5rem;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    background-color: rgba(32, 29, 29, 0.322);
    box-shadow: 0 0 20px var(--main-color) inset;
    width: 30rem;
    height: 60rem;
    top: 8rem;
    border-radius: 15px;
    border: 1px solid rgba(255, 255, 255, 0);
    right: 17rem;
    opacity: 0;
    transition: opacity .5s;
    animation-duration: 1.5s;
    animation-fill-mode: forwards;
    top: -75rem;
  }
  /* hover  */
  .nav-list a:hover {
    border-bottom: 0.4rem solid var(--main-color);
  }
  /* MENU ICON SECTION  */
  .menu-icon {
    display: inline;
    width: 12rem;
    height: 12rem;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .menu-icon .menu-i {
    font-size: 8em;
    color: var(--main-color);
  }
  .menu-icon:hover .menu-i {
    transform: scale(1.03);
    text-shadow: 0 0 15px var(--main-color);
  }
  /* HERO SECTION START */
  .hero {
    position: absolute;
    top: 20rem;
    width: 100%;
    height: calc(100vh - 20rem);
    height: calc(100svh - 20rem);
    display: flex;
    flex-direction: column-reverse;
    row-gap: 5rem;
  }
  .my-info {
    height: calc((90% - 45%) - 1%);
    width: 80%;
  }
  .my-info .heading {
    font-size: 10rem;
  }
  .my-info h2 {
    font-size: 5rem;
  }
  .my-info h2 span::after {
    width: calc(100% + 4px);
    border-left: 7.5px solid var(--main-color);
    right: -5px;
  }
  .my-info p {
    margin: 2.5rem 0;
    font-size: 3rem;
  }
  .hero-socials {
    font-size: 6rem;
    column-gap: 5rem;
  }
  .hero-socials li {
    width: 10rem;
    height: 10rem;
    border: 3.5px solid var(--main-color);
    margin: 2rem 0;
  }
  /* hover  */
  .hero-socials li:hover {
    box-shadow: 0 0 27.5px var(--main-color);
    transform: scale(1.25) translateY(-1rem);
  }
  .hero-btns {
    width: 50%;
    column-gap: 5rem;
    margin: 2rem 0;
  }
  .hire-btn {
    font-size: 2.25rem;
    width: 20rem;
    height: 8rem;
    border: 2.5px solid var(--main-color);
    border-radius: 25px;
    box-shadow: 0 0 25px var(--main-color);
  }
  /* hover  */
  .hire-btn:hover {
    font-weight: 500;
    box-shadow: 0 0 50px var(--main-color);
  }
  .contact-btn {
    font-size: 2.25rem;
    width: 22.5rem;
    height: 8rem;
    border: 3.5px solid var(--main-color);
    border-radius: 25px;
  }
  /* hover  */
  .contact-btn:hover {
    color: var(--secont-bg-color);
    background-color: var(--main-color);
    font-weight: 500;
    box-shadow: 0 0 25px var(--main-color), 0 0 50px var(--main-color);
  }
  .my-image {
    width: 45%;
    height: auto;
  }
  .my-image img {
    border: 2.5px solid var(--main-color);
    box-shadow: 0 0 50px var(--main-color);
  }
  .my-image img:hover {
    box-shadow: 0 0 25px var(--main-color), 0 0 50px var(--main-color),
      0 0 100px var(--main-color);
  }
  .main-container {
    overflow: hidden;
  }
  /* //////////////////////////////////////////////////////// */
  /* //////////////////////////////////////////////////////// */

  .left-door {
    top: 20rem;
    height: calc(100svh - 0rem);
    left: -125%;
  }
  .left-door span {
    width: 1.5rem;
  }
  .right-door {
    top: 20rem;
    height: calc(100svh - 0rem);
    right: -125%;
  }
  .right-door span {
    width: 1.5rem;
  }
  .top-left-to-right {
    width: 50rem;
    height: 2rem;
    z-index: 50;
    top: 20rem;
    left: 1rem;
  }
  .top-right-filer {
    height: 2.25rem;
    top: 20rem;
    left: 49rem;
    width: 3.7rem;
  }
  .top-left-corner {
    width: 2rem;
    height: 2rem;
    top: 20.05rem;
  }
  .top-top-to-bottom {
    width: 2rem;
    height: 50rem;
    top: 21rem;
  }
  .top-bottom-filer {
    width: 2.25rem;
    height: 5rem;
    top: 69rem;
  }
  .bottom-right-to-left {
    width: 50rem;
    height: 2rem;
    bottom: 0rem;
    right: 1rem;
  }
  .bottom-left-filer {
    width: 3.7rem;
    height: 2.25rem;
    right: 49rem;
  }
  .bottom-right-corner {
    width: 2rem;
    height: 2rem;
  }
  .bottom-bottom-to-top {
    width: 2rem;
    height: 50rem;
    bottom: 1rem;
  }
  .bottom-top-filer {
    width: 2.25rem;
    height: 5rem;
    bottom: 49rem;
  }
  /* EDUCATION SECTION START  */
  .education {
    position: relative;
    width: 100%;
    height: calc(100svh - 20rem);
    top: 20rem;
    font-size: 4rem;
    background-color: var(--first-bg-color);
  }
  .education .edu-timeline {
    position: absolute;
    width: 1rem;
    height:calc(100vh - 30rem);
    box-shadow: 0 0 25px var(--main-color);
    transform: rotate(0deg);
    bottom: 2rem;
    top: 8rem;
    left: 8rem;
  }
  .edu-timeline .dot-school {
    width: 2.5rem;
    height: 2.5rem;
    left: .5rem;
    top: calc(50vh  20rem);
  }
  .dot-school h3 {
    top: 2.5rem;
    font-size: 5rem;
    transform: rotate(0deg);
    left: 5rem;
  }
  .dot-school .high-school {
    width: 105rem;
    height: 40rem;
    border: 0.5rem solid var(--main-color);
    border-radius: 25px;
    box-shadow: 0 0 25px var(--main-color);
    padding: 5rem;
    padding-top: 2.5rem;
    transform: rotate(0deg);
    left: 10rem;
    top: 12.5rem;
  }
  /* hover  */
  .high-school:hover {
    transform: scale(1.09) translateY(-1rem);
    box-shadow: 0 0 15px var(--main-color), 0 0 30px var(--main-color),
      0 0 45px var(--main-color);
      transform: rotate(0deg);
  }
  .place-name-of-school {
    top: 1rem;
    left: 0rem;
    margin-bottom: 2.5rem;
    border-radius: 50px;
    border: 0.25rem solid var(--main-color);
  }
  .high-school p {
    font-size: 2.5rem;
  }
  .edu-timeline .dot-university {
    width: 2.5rem;
    height: 2.5rem;
    right: 0rem;
    left:0.5rem;
    top: 5rem;
  }
  .dot-university h3 {
    position: relative;
    top: 2.5rem;
    right: 0;
    font-size: 5rem;
    transform: rotate(0deg);
    left: 5rem;
  }
  .dot-university .university {
    width: 105rem;
    height: 40rem;
    border: 0.5rem solid var(--main-color);
    border-radius: 25px;
    box-shadow: 0 0 25px var(--main-color);
    padding: 5rem;
    padding-top: 2.5rem;
    transform: rotate(0deg);
    left: 10rem;
    top: 12.5rem;
  }
  /* HOVER  */
  .university:hover {
    transform: scale(1.09) translateY(1rem);
    transition: transform 0.5s, box-shadow 0.5s;
    box-shadow: 0 0 15px var(--main-color), 0 0 30px var(--main-color),
      0 0 45px var(--main-color);
  }
  .place-name-of-university {
    top: 1rem;
    left: 0rem;
    margin-bottom: 2.5rem;
    border-radius: 50px;
    border: 0.25rem solid var(--main-color);
  }
  .university p {
    font-size: 2.5rem;
  }
  /* EDUCATION SECTION END  */

  /* SKILLS SECTION START */
  .skills {
    height: calc(100svh - 20rem);
    top: 20rem;
    font-size: 4rem;
  }
  .skills h2 span {
    color: var(--main-color);
  }
  .skills h2 {
    font-size: 7.5rem;
    height: 10%;
  }
  .tech-skills {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 50%;
    height: 100%;
  }
  .tech-skills h3 {
    font-size: 4rem;
    height: 5%;
  }
  .tech-skills-list {
    grid-template-columns: 10rem 1fr 10rem;
    margin-bottom: 0%;
    grid-template-rows: repeat(9, 1fr);
  }
  .tech-skills-list li p {
    font-size: 3rem;
  }
  .tech-skills-list li .bx {
    font-size: 6rem;
  }
  /* <!-- html bar --> */
  .html-bar {
    box-shadow: 0 0 12.5px var(--main-color);
  }
  /* <!-- css-bar --> */
  .css-bar {
    box-shadow: 0 0 12.5px var(--main-color);
  }
  /* <!-- js-bar --> */
  .js-bar {
    box-shadow: 0 0 12.5px var(--main-color);
  }
  /* <!-- react-bar --> */
  .react-bar {
    box-shadow: 0 0 12.5px var(--main-color);
  }
  /* <!-- nodejs-bar --> */
  .nodejs-bar {
    box-shadow: 0 0 12.5px var(--main-color);
  }
  /* <!-- python-bar --> */
  .python-bar {
    box-shadow: 0 0 12.5px var(--main-color);
  }
  /* <!-- django-bar --> */
  .django-bar {
    box-shadow: 0 0 12.5px var(--main-color);
  }
  /* <!-- c++ bar --> */
  .c-bar {
    box-shadow: 0 0 12.5px var(--main-color);
  }
  /* <!-- git bar --> */
  .git-bar {
    box-shadow: 0 0 12.5px var(--main-color);
  }
  .pro-skills h3 {
    font-size: 4rem;
    margin-top: 5%;
    height: 5%;
  }
  .pro-skills-list {
    width: 90%;
    height: 90%;
    margin-bottom: 0%;
    display: flex;
    align-items: center;
    justify-content: start;
    flex-direction: column;
    row-gap: 5%;
    margin-top: 30%;
  }
  .progressbar {
    border: 5rem solid var(--main-color);
  }
  div[role="progressbar"] {
    --size: 40rem;
    box-shadow: 0 0 25px var(--main-color);
    border: 0.5rem;
  }
  .pro-skills-list h3 {
    font-size: 3rem;
  }
  .mid-man {
    box-shadow: 0 0 25px var(--main-color) inset;
    border: 0.5rem solid var(--main-color);
  }
  .back-man {
    box-shadow: 0 0 25px var(--main-color);
    border: 0.75rem solid var(--main-color);
  }
  /* SKILLS SECTION END */
  /* SERVICES SECTION START  */
  .services {
    height: calc(100svh - 20rem);
    top: 20rem;
    font-size: 4rem;
  }
  .services h2 {
    font-size: 7.5rem;
    margin-bottom: 2.5%;
  }
  .services-container {
    width: 85%;
    height: 80%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    column-gap: 8%;
    row-gap: 1%;
  }
  .service-cards {
    border: 0.5rem solid var(--main-color);
    box-shadow: 0 0 12.5px var(--main-color);
    border-radius: 25px;
    padding: 1rem 2.5rem;
    height: 45%;
    width: 40%;
  }
  .service-cards:hover {
    box-shadow: 0 0 25px var(--main-color), 0 0 30px var(--main-color),
      0 0 42.5px var(--main-color);
  }
  .service-cards h3 {
    font-size: 4rem;
    margin-bottom: 1rem;
  }
  .service-cards i {
    font-size: 7.5rem;
  }
  .service-cards p {
    font-size: 2.5rem;
  }
  .service-card-1 {
    padding: 1rem 2.5rem;
  }
  .service-card-1 h3 {
    font-size: 4rem;
  }
  /* SERVICES SECTION END */
  /* CONTACT SECTION START */
  .contact {
    height: calc(100svh - 20rem);
    top: 20rem;
    font-size: 4rem;
  }
  .contact h2 {
    font-size: 7.5rem;
  }
  .contact-form input:first-child {
    margin-top: 10%;
  }
  .contact-form input {
    font-size: 3.5rem;
    padding-left: 5rem;
    line-height: 5rem;
    border-radius: 50px;
    border: 0.5rem solid var(--main-color);
    box-shadow: 0 0 12.5px var(--main-color);
  }
  /* hover  */
  .contact-form input:hover {
    box-shadow: 0 0 12.5px var(--main-color), 0 0 25px var(--main-color),
      0 0 37.5px var(--main-color);
  }
  .input-group-1 {
    width: 50%;
    height: 100%;
    display: flex;
    justify-content: start;
    align-items: center;
    flex-direction: column;
    row-gap: 5%;
  }
  .input-group-2 {
    width: 50%;
    height: 100%;
    display: flex;
    justify-content: start;
    align-items: center;
    flex-direction: column;
    row-gap: 5%;
  }
  .contact-form textarea {
    font-size: 3rem;
    padding-left: 5rem;
    padding-top: 5rem;
    line-height: 4rem;
    border-radius: 50px;
    border: 0.5rem solid var(--main-color);
    box-shadow: 0 0 12.5px var(--main-color);
    margin-top: 10%;
  }
  .contact-form textarea:hover {
    box-shadow: 0 0 12.5px var(--main-color), 0 0 25px var(--main-color),
      0 0 37.5px var(--main-color);
  }
  #submit-btn {
    font-size: 4rem;
    background-color: var(--main-color);
    padding: 0rem;
  }
  #reset-btn {
    font-size: 4rem;
    color: var(--main-color);
    padding: 0rem;
  }
  /* CONTACT SECTION END */

  /* page switching animations */
  /* 1 */
  @keyframes right-door-1 {
    0% {
      right: -125%;
      transform: skewX(15deg);
    }
    40% {
      right: -50%;
      transform: skewX(15deg);
    }
    60% {
      right: -50%;
      transform: skewX(-15deg);
    }
    100% {
      right: -125%;
      transform: skewX(-15deg);
    }
  }
  @keyframes left-door-1 {
    0% {
      left: -125%;
      transform: skewX(15deg);
    }
    40% {
      left: -50%;
      transform: skewX(15deg);
    }
    60% {
      left: -50%;
      transform: skewX(-15deg);
    }
    100% {
      left: -125%;
      transform: skewX(-15deg);
    }
  }
  /* 2 */
  @keyframes right-door-2 {
    0% {
      right: -125%;
      transform: skewX(15deg);
    }
    40% {
      right: -50%;
      transform: skewX(15deg);
    }
    60% {
      right: -50%;
      transform: skewX(-15deg);
    }
    100% {
      right: -125%;
      transform: skewX(-15deg);
    }
  }
  @keyframes left-door-2 {
    0% {
      left: -125%;
      transform: skewX(15deg);
    }
    40% {
      left: -50%;
      transform: skewX(15deg);
    }
    60% {
      left: -50%;
      transform: skewX(-15deg);
    }
    100% {
      left: -125%;
      transform: skewX(-15deg);
    }
  }
  /* 3 */
  @keyframes right-door-3 {
    0% {
      right: -125%;
      transform: skewX(15deg);
    }
    40% {
      right: -50%;
      transform: skewX(15deg);
    }
    60% {
      right: -50%;
      transform: skewX(-15deg);
    }
    100% {
      right: -125%;
      transform: skewX(-15deg);
    }
  }
  @keyframes left-door-3 {
    0% {
      left: -125%;
      transform: skewX(15deg);
    }
    40% {
      left: -50%;
      transform: skewX(15deg);
    }
    60% {
      left: -50%;
      transform: skewX(-15deg);
    }
    100% {
      left: -125%;
      transform: skewX(-15deg);
    }
  }
  /* 4 */
  @keyframes right-door-4 {
    0% {
      right: -125%;
      transform: skewX(15deg);
    }
    40% {
      right: -50%;
      transform: skewX(15deg);
    }
    60% {
      right: -50%;
      transform: skewX(-15deg);
    }
    100% {
      right: -125%;
      transform: skewX(-15deg);
    }
  }
  @keyframes left-door-4 {
    0% {
      left: -125%;
      transform: skewX(15deg);
    }
    40% {
      left: -50%;
      transform: skewX(15deg);
    }
    60% {
      left: -50%;
      transform: skewX(-15deg);
    }
    100% {
      left: -125%;
      transform: skewX(-15deg);
    }
  }
  /* 5 */
  @keyframes right-door-5 {
    0% {
      right: -125%;
      transform: skewX(15deg);
    }
    40% {
      right: -50%;
      transform: skewX(15deg);
    }
    60% {
      right: -50%;
      transform: skewX(-15deg);
    }
    100% {
      right: -125%;
      transform: skewX(-15deg);
    }
  }
  @keyframes left-door-5 {
    0% {
      left: -125%;
      transform: skewX(15deg);
    }
    40% {
      left: -50%;
      transform: skewX(15deg);
    }
    60% {
      left: -50%;
      transform: skewX(-15deg);
    }
    100% {
      left: -125%;
      transform: skewX(-15deg);
    }
  }
  /* 6 */
  @keyframes right-door-6 {
    0% {
      right: -125%;
      transform: skewX(15deg);
    }
    40% {
      right: -50%;
      transform: skewX(15deg);
    }
    60% {
      right: -50%;
      transform: skewX(-15deg);
    }
    100% {
      right: -125%;
      transform: skewX(-15deg);
    }
  }
  @keyframes left-door-6 {
    0% {
      left: -125%;
      transform: skewX(15deg);
    }
    40% {
      left: -50%;
      transform: skewX(15deg);
    }
    60% {
      left: -50%;
      transform: skewX(-15deg);
    }
    100% {
      left: -125%;
      transform: skewX(-15deg);
    }
  }
  /* 7 */
  @keyframes right-door-7 {
    0% {
      right: -125%;
      transform: skewX(15deg);
    }
    40% {
      right: -50%;
      transform: skewX(15deg);
    }
    60% {
      right: -50%;
      transform: skewX(-15deg);
    }
    100% {
      right: -125%;
      transform: skewX(-15deg);
    }
  }
  @keyframes left-door-7 {
    0% {
      left: -125%;
      transform: skewX(15deg);
    }
    40% {
      left: -50%;
      transform: skewX(15deg);
    }
    60% {
      left: -50%;
      transform: skewX(-15deg);
    }
    100% {
      left: -125%;
      transform: skewX(-15deg);
    }
  }
  /* 8 */
  @keyframes right-door-8 {
    0% {
      right: -125%;
      transform: skewX(15deg);
    }
    40% {
      right: -50%;
      transform: skewX(15deg);
    }
    60% {
      right: -50%;
      transform: skewX(-15deg);
    }
    100% {
      right: -125%;
      transform: skewX(-15deg);
    }
  }
  @keyframes left-door-8 {
    0% {
      left: -125%;
      transform: skewX(15deg);
    }
    40% {
      left: -50%;
      transform: skewX(15deg);
    }
    60% {
      left: -50%;
      transform: skewX(-15deg);
    }
    100% {
      left: -125%;
      transform: skewX(-15deg);
    }
  }
  /* 9 */
  @keyframes right-door-9 {
    0% {
      right: -125%;
      transform: skewX(15deg);
    }
    40% {
      right: -50%;
      transform: skewX(15deg);
    }
    60% {
      right: -50%;
      transform: skewX(-15deg);
    }
    100% {
      right: -125%;
      transform: skewX(-15deg);
    }
  }
  @keyframes left-door-9 {
    0% {
      left: -125%;
      transform: skewX(15deg);
    }
    40% {
      left: -50%;
      transform: skewX(15deg);
    }
    60% {
      left: -50%;
      transform: skewX(-15deg);
    }
    100% {
      left: -125%;
      transform: skewX(-15deg);
    }
  }
  /* 10 */
  @keyframes right-door-10 {
    0% {
      right: -125%;
      transform: skewX(15deg);
    }
    40% {
      right: -50%;
      transform: skewX(15deg);
    }
    60% {
      right: -50%;
      transform: skewX(-15deg);
    }
    100% {
      right: -125%;
      transform: skewX(-15deg);
    }
  }
  @keyframes left-door-10 {
    0% {
      left: -125%;
      transform: skewX(15deg);
    }
    40% {
      left: -50%;
      transform: skewX(15deg);
    }
    60% {
      left: -50%;
      transform: skewX(-15deg);
    }
    100% {
      left: -125%;
      transform: skewX(-15deg);
    }
  }
}
/* 1024 DESIGN COMPLETE */
/* /////////////////////////////////////////////////////////////////// */
/* /// 912 ipad DESIGN /// */
@media (max-width: 912px) {
  html {
    font-size: 37%;
  }
  .top-header {
    height: 20rem;
  }
  .nav-bar {
    position: relative;
    padding: 0.5rem 17.5rem;
    padding-right: 5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    /* background-color: rgb(50, 42, 57); */
  }
  .logo {
    font-size: 5rem;
    width: 10ch;
  }
  .nav-list {
    position: absolute;
    padding-top: 5rem;
    row-gap: 5rem;
    font-size: 3.5rem;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    background-color: rgba(32, 29, 29, 0.322);
    box-shadow: 0 0 20px var(--main-color) inset;
    width: 30rem;
    height: 60rem;
    top: 8rem;
    border-radius: 15px;
    border: 1px solid rgba(255, 255, 255, 0);
    right: 17rem;
    opacity: 0;
    transition: opacity 0.5s;
    top: -75rem;
  }
  /* hover  */
  .nav-list a:hover {
    border-bottom: 0.4rem solid var(--main-color);
  }
  /* MENU ICON SECTION  */
  .menu-icon {
    display: inline;
    width: 12rem;
    height: 12rem;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .menu-icon .menu-i {
    font-size: 8em;
    color: var(--main-color);
  }
  .menu-icon:hover .menu-i {
    transform: scale(1.03);
    text-shadow: 0 0 15px var(--main-color);
  }
  /* HERO SECTION START */
  .hero {
    position: absolute;
    top: 20rem;
    width: 100%;
    height: calc(100vh - 20rem);
    height: calc(100svh - 20rem);
    display: flex;
    flex-direction: column-reverse;
    row-gap: 5rem;
  }
  .my-info {
    height: calc((90% - 45%) - 1%);
    width: 80%;
  }
  .my-info .heading {
    font-size: 10rem;
  }
  .my-info h2 {
    font-size: 5rem;
  }
  .my-info h2 span::after {
    width: calc(100% + 4px);
    border-left: 7.5px solid var(--main-color);
    right: -5px;
  }
  .my-info p {
    margin: 2.5rem 0;
    font-size: 3.5rem;
  }
  .hero-socials {
    font-size: 6rem;
    column-gap: 5rem;
  }
  .hero-socials li {
    width: 10rem;
    height: 10rem;
    border: 3.5px solid var(--main-color);
    margin: 2rem 0;
  }
  /* hover  */
  .hero-socials li:hover {
    box-shadow: 0 0 27.5px var(--main-color);
    transform: scale(1.25) translateY(-1rem);
  }
  .hero-btns {
    width: 50%;
    column-gap: 5rem;
    margin: 2rem 0;
  }
  .hire-btn {
    font-size: 3rem;
    width: 20rem;
    height: 8rem;
    border: 2.5px solid var(--main-color);
    border-radius: 25px;
    box-shadow: 0 0 25px var(--main-color);
  }
  /* hover  */
  .hire-btn:hover {
    font-weight: 500;
    box-shadow: 0 0 50px var(--main-color);
  }
  .contact-btn {
    font-size: 3rem;
    width: 22.5rem;
    height: 8rem;
    border: 3.5px solid var(--main-color);
    border-radius: 25px;
  }
  /* hover  */
  .contact-btn:hover {
    color: var(--secont-bg-color);
    background-color: var(--main-color);
    font-weight: 500;
    box-shadow: 0 0 25px var(--main-color), 0 0 50px var(--main-color);
  }
  .my-image {
    width: 45%;
    height: auto;
  }
  .my-image img {
    border: 2.5px solid var(--main-color);
    box-shadow: 0 0 50px var(--main-color);
  }
  .my-image img:hover {
    box-shadow: 0 0 25px var(--main-color), 0 0 50px var(--main-color),
      0 0 100px var(--main-color);
  }
  .main-container {
    overflow: hidden;
  }
  /* //////////////////////////////////////////////////////// */
  /* //////////////////////////////////////////////////////// */

  .left-door {
    top: 20rem;
    height: calc(100svh - 0rem);
    left: -125%;
  }
  .left-door span {
    width: 1.5rem;
  }
  .right-door {
    top: 20rem;
    height: calc(100svh - 0rem);
    right: -125%;
  }
  .right-door span {
    width: 1.5rem;
  }
  .top-left-to-right {
    width: 50rem;
    height: 2rem;
    z-index: 50;
    top: 20rem;
    left: 1rem;
  }
  .top-right-filer {
    height: 2.25rem;
    top: 20rem;
    left: 49rem;
    width: 3.7rem;
  }
  .top-left-corner {
    width: 2rem;
    height: 2rem;
    top: 20.05rem;
  }
  .top-top-to-bottom {
    width: 2rem;
    height: 50rem;
    top: 21rem;
  }
  .top-bottom-filer {
    width: 2.25rem;
    height: 5rem;
    top: 69rem;
  }
  .bottom-right-to-left {
    width: 50rem;
    height: 2rem;
    bottom: 0rem;
    right: 1rem;
  }
  .bottom-left-filer {
    width: 3.7rem;
    height: 2.25rem;
    right: 49rem;
  }
  .bottom-right-corner {
    width: 2rem;
    height: 2rem;
  }
  .bottom-bottom-to-top {
    width: 2rem;
    height: 50rem;
    bottom: 1rem;
  }
  .bottom-top-filer {
    width: 2.25rem;
    height: 5rem;
    bottom: 49rem;
  }

  /* EDUCATION SECTION START  */
  .education {
    position: relative;
    width: 100%;
    height: calc(100svh - 20rem);
    top: 20rem;
    font-size: 4rem;
    background-color: var(--first-bg-color);
  }
  .education .edu-timeline {
    position: absolute;
    width: 1rem;
    height:calc(100vh - 30rem);
    box-shadow: 0 0 25px var(--main-color);
    transform: rotate(0deg);
    bottom: 2rem;
    top: 8rem;
    left: 8rem;
  }
  .edu-timeline .dot-school {
    width: 2.5rem;
    height: 2.5rem;
    left: .5rem;
    top: calc(50vh  20rem);
  }
  .dot-school h3 {
    top: 2.5rem;
    font-size: 5rem;
    transform: rotate(0deg);
    left: 5rem;
  }
  .dot-school .high-school {
    width: 105rem;
    height: 40rem;
    border: 0.5rem solid var(--main-color);
    border-radius: 25px;
    box-shadow: 0 0 25px var(--main-color);
    padding: 5rem;
    padding-top: 2.5rem;
    transform: rotate(0deg);
    left: 10rem;
    top: 12.5rem;
  }
  /* hover  */
  .high-school:hover {
    transform: scale(1.09) translateY(-1rem);
    box-shadow: 0 0 15px var(--main-color), 0 0 30px var(--main-color),
      0 0 45px var(--main-color);
      transform: rotate(0deg);
  }
  .place-name-of-school {
    top: 1rem;
    left: 0rem;
    margin-bottom: 2.5rem;
    border-radius: 50px;
    border: 0.25rem solid var(--main-color);
  }
  .high-school p {
    font-size: 2.5rem;
  }
  .edu-timeline .dot-university {
    width: 2.5rem;
    height: 2.5rem;
    right: 0rem;
    left:0.5rem;
    top: 5rem;
  }
  .dot-university h3 {
    position: relative;
    top: 2.5rem;
    right: 0;
    font-size: 5rem;
    transform: rotate(0deg);
    left: 5rem;
  }
  .dot-university .university {
    width: 105rem;
    height: 40rem;
    border: 0.5rem solid var(--main-color);
    border-radius: 25px;
    box-shadow: 0 0 25px var(--main-color);
    padding: 5rem;
    padding-top: 2.5rem;
    transform: rotate(0deg);
    left: 10rem;
    top: 12.5rem;
  }
  /* HOVER  */
  .university:hover {
    transform: scale(1.09) translateY(1rem);
    transition: transform 0.5s, box-shadow 0.5s;
    box-shadow: 0 0 15px var(--main-color), 0 0 30px var(--main-color),
      0 0 45px var(--main-color);
  }
  .place-name-of-university {
    top: 1rem;
    left: 0rem;
    margin-bottom: 2.5rem;
    border-radius: 50px;
    border: 0.25rem solid var(--main-color);
  }
  .university p {
    font-size: 2.5rem;
  }
  /* EDUCATION SECTION END  */

  /* SKILLS SECTION START */
  .skills {
    height: calc(100svh - 20rem);
    top: 20rem;
    font-size: 4rem;
  }
  .skills h2 span {
    color: var(--main-color);
  }
  .skills h2 {
    font-size: 7.5rem;
    height: 10%;
  }
  .tech-skills {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 50%;
    height: 100%;
  }
  .tech-skills h3 {
    font-size: 5rem;
    height: 5%;
  }
  .tech-skills-list {
    grid-template-columns: 10rem 1fr 10rem;
    margin-bottom: 0%;
    grid-template-rows: repeat(9, 1fr);
  }
  .tech-skills-list li p {
    font-size: 4rem;
  }
  .tech-skills-list li .bx {
    font-size: 8rem;
  }
  /* <!-- html bar --> */
  .html-bar {
    box-shadow: 0 0 12.5px var(--main-color);
  }
  /* <!-- css-bar --> */
  .css-bar {
    box-shadow: 0 0 12.5px var(--main-color);
  }
  /* <!-- js-bar --> */
  .js-bar {
    box-shadow: 0 0 12.5px var(--main-color);
  }
  /* <!-- react-bar --> */
  .react-bar {
    box-shadow: 0 0 12.5px var(--main-color);
  }
  /* <!-- nodejs-bar --> */
  .nodejs-bar {
    box-shadow: 0 0 12.5px var(--main-color);
  }
  /* <!-- python-bar --> */
  .python-bar {
    box-shadow: 0 0 12.5px var(--main-color);
  }
  /* <!-- django-bar --> */
  .django-bar {
    box-shadow: 0 0 12.5px var(--main-color);
  }
  /* <!-- c++ bar --> */
  .c-bar {
    box-shadow: 0 0 12.5px var(--main-color);
  }
  /* <!-- git bar --> */
  .git-bar {
    box-shadow: 0 0 12.5px var(--main-color);
  }
  .pro-skills h3 {
    font-size: 5rem;
    margin-top: 5%;
    height: 5%;
  }
  .pro-skills-list {
    width: 90%;
    height: 90%;
    margin-bottom: 0%;
    display: flex;
    align-items: center;
    justify-content: start;
    flex-direction: column;
    row-gap: 5%;
    margin-top: 30%;
  }
  .progressbar {
    border: 5rem solid var(--main-color);
  }
  div[role="progressbar"] {
    --size: 40rem;
    box-shadow: 0 0 25px var(--main-color);
    border: 0.5rem;
  }
  .pro-skills-list h3 {
    font-size: 4rem;
  }
  .mid-man {
    box-shadow: 0 0 25px var(--main-color) inset;
    border: 0.5rem solid var(--main-color);
  }
  .back-man {
    box-shadow: 0 0 25px var(--main-color);
    border: 0.75rem solid var(--main-color);
  }
  /* SKILLS SECTION END */
  /* SERVICES SECTION START  */
  .services {
    height: calc(100svh - 20rem);
    top: 20rem;
    font-size: 4rem;
  }
  .services h2 {
    font-size: 7.5rem;
    margin-bottom: 2.5%;
  }
  .services-container {
    width: 85%;
    height: 80%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    column-gap: 8%;
    row-gap: 1%;
  }
  .service-cards {
    border: 1rem solid var(--main-color);
    box-shadow: 0 0 12.5px var(--main-color);
    border-radius: 15px;
    padding: 1rem 2.5rem;
    height: 45%;
    width: 40%;
    overflow-y: scroll;
    scroll-behavior: smooth;
    scrollbar-width: thin;
    scrollbar-color: rgba(0, 0, 0, 0) rgba(0, 0, 0, 0);
  }
  .service-cards:hover {
    box-shadow: 0 0 25px var(--main-color), 0 0 30px var(--main-color),
      0 0 42.5px var(--main-color);
  }
  .service-cards h3 {
    font-size: 4rem;
    margin-bottom: 1rem;
  }
  .service-cards i {
    font-size: 7.5rem;
  }
  .service-cards p {
    font-size: 3rem;
  }
  .service-card-1 {
    padding: 1rem 2.5rem;
  }
  .service-card-1 h3 {
    font-size: 4rem;
  }
  /* SERVICES SECTION END */
  /* CONTACT SECTION START */
  .contact {
    height: calc(100svh - 20rem);
    top: 20rem;
    font-size: 4rem;
  }
  .contact h2 {
    font-size: 7.5rem;
  }
  .contact-form input:first-child {
    margin-top: 10%;
  }

  .contact-form input {
    font-size: 3.5rem;
    padding-left: 5rem;
    line-height: 5rem;
    border-radius: 50px;
    border: 0.5rem solid var(--main-color);
    box-shadow: 0 0 12.5px var(--main-color);
  }
  /* hover  */
  .contact-form input:hover {
    box-shadow: 0 0 12.5px var(--main-color), 0 0 25px var(--main-color),
      0 0 37.5px var(--main-color);
  }
  .input-group-1 {
    width: 50%;
    height: 100%;
    display: flex;
    justify-content: start;
    align-items: center;
    flex-direction: column;
    row-gap: 5%;
  }
  .input-group-2 {
    width: 50%;
    height: 100%;
    display: flex;
    justify-content: start;
    align-items: center;
    flex-direction: column;

    row-gap: 5%;
  }
  .contact-form textarea {
    font-size: 3rem;
    padding-left: 5rem;
    padding-top: 5rem;
    line-height: 4rem;
    border-radius: 50px;
    border: 0.5rem solid var(--main-color);
    box-shadow: 0 0 12.5px var(--main-color);
    margin-top: 10%;
  }
  .contact-form textarea:hover {
    box-shadow: 0 0 12.5px var(--main-color), 0 0 25px var(--main-color),
      0 0 37.5px var(--main-color);
  }
  #submit-btn {
    font-size: 4rem;
    background-color: var(--main-color);
    padding: 0rem;
  }
  #reset-btn {
    font-size: 4rem;
    color: var(--main-color);
    padding: 0rem;
  }
  /* CONTACT SECTION END */

  /* page switching animations */
  /* 1 */
  @keyframes right-door-1 {
    0% {
      right: -125%;
      transform: skewX(15deg);
    }
    40% {
      right: -50%;
      transform: skewX(15deg);
    }
    60% {
      right: -50%;
      transform: skewX(-15deg);
    }
    100% {
      right: -125%;
      transform: skewX(-15deg);
    }
  }
  @keyframes left-door-1 {
    0% {
      left: -125%;
      transform: skewX(15deg);
    }
    40% {
      left: -50%;
      transform: skewX(15deg);
    }
    60% {
      left: -50%;
      transform: skewX(-15deg);
    }
    100% {
      left: -125%;
      transform: skewX(-15deg);
    }
  }
  /* 2 */
  @keyframes right-door-2 {
    0% {
      right: -125%;
      transform: skewX(15deg);
    }
    40% {
      right: -50%;
      transform: skewX(15deg);
    }
    60% {
      right: -50%;
      transform: skewX(-15deg);
    }
    100% {
      right: -125%;
      transform: skewX(-15deg);
    }
  }
  @keyframes left-door-2 {
    0% {
      left: -125%;
      transform: skewX(15deg);
    }
    40% {
      left: -50%;
      transform: skewX(15deg);
    }
    60% {
      left: -50%;
      transform: skewX(-15deg);
    }
    100% {
      left: -125%;
      transform: skewX(-15deg);
    }
  }
  /* 3 */
  @keyframes right-door-3 {
    0% {
      right: -125%;
      transform: skewX(15deg);
    }
    40% {
      right: -50%;
      transform: skewX(15deg);
    }
    60% {
      right: -50%;
      transform: skewX(-15deg);
    }
    100% {
      right: -125%;
      transform: skewX(-15deg);
    }
  }
  @keyframes left-door-3 {
    0% {
      left: -125%;
      transform: skewX(15deg);
    }
    40% {
      left: -50%;
      transform: skewX(15deg);
    }
    60% {
      left: -50%;
      transform: skewX(-15deg);
    }
    100% {
      left: -125%;
      transform: skewX(-15deg);
    }
  }
  /* 4 */
  @keyframes right-door-4 {
    0% {
      right: -125%;
      transform: skewX(15deg);
    }
    40% {
      right: -50%;
      transform: skewX(15deg);
    }
    60% {
      right: -50%;
      transform: skewX(-15deg);
    }
    100% {
      right: -125%;
      transform: skewX(-15deg);
    }
  }
  @keyframes left-door-4 {
    0% {
      left: -125%;
      transform: skewX(15deg);
    }
    40% {
      left: -50%;
      transform: skewX(15deg);
    }
    60% {
      left: -50%;
      transform: skewX(-15deg);
    }
    100% {
      left: -125%;
      transform: skewX(-15deg);
    }
  }
  /* 5 */
  @keyframes right-door-5 {
    0% {
      right: -125%;
      transform: skewX(15deg);
    }
    40% {
      right: -50%;
      transform: skewX(15deg);
    }
    60% {
      right: -50%;
      transform: skewX(-15deg);
    }
    100% {
      right: -125%;
      transform: skewX(-15deg);
    }
  }
  @keyframes left-door-5 {
    0% {
      left: -125%;
      transform: skewX(15deg);
    }
    40% {
      left: -50%;
      transform: skewX(15deg);
    }
    60% {
      left: -50%;
      transform: skewX(-15deg);
    }
    100% {
      left: -125%;
      transform: skewX(-15deg);
    }
  }
  /* 6 */
  @keyframes right-door-6 {
    0% {
      right: -125%;
      transform: skewX(15deg);
    }
    40% {
      right: -50%;
      transform: skewX(15deg);
    }
    60% {
      right: -50%;
      transform: skewX(-15deg);
    }
    100% {
      right: -125%;
      transform: skewX(-15deg);
    }
  }
  @keyframes left-door-6 {
    0% {
      left: -125%;
      transform: skewX(15deg);
    }
    40% {
      left: -50%;
      transform: skewX(15deg);
    }
    60% {
      left: -50%;
      transform: skewX(-15deg);
    }
    100% {
      left: -125%;
      transform: skewX(-15deg);
    }
  }
  /* 7 */
  @keyframes right-door-7 {
    0% {
      right: -125%;
      transform: skewX(15deg);
    }
    40% {
      right: -50%;
      transform: skewX(15deg);
    }
    60% {
      right: -50%;
      transform: skewX(-15deg);
    }
    100% {
      right: -125%;
      transform: skewX(-15deg);
    }
  }
  @keyframes left-door-7 {
    0% {
      left: -125%;
      transform: skewX(15deg);
    }
    40% {
      left: -50%;
      transform: skewX(15deg);
    }
    60% {
      left: -50%;
      transform: skewX(-15deg);
    }
    100% {
      left: -125%;
      transform: skewX(-15deg);
    }
  }
  /* 8 */
  @keyframes right-door-8 {
    0% {
      right: -125%;
      transform: skewX(15deg);
    }
    40% {
      right: -50%;
      transform: skewX(15deg);
    }
    60% {
      right: -50%;
      transform: skewX(-15deg);
    }
    100% {
      right: -125%;
      transform: skewX(-15deg);
    }
  }
  @keyframes left-door-8 {
    0% {
      left: -125%;
      transform: skewX(15deg);
    }
    40% {
      left: -50%;
      transform: skewX(15deg);
    }
    60% {
      left: -50%;
      transform: skewX(-15deg);
    }
    100% {
      left: -125%;
      transform: skewX(-15deg);
    }
  }
  /* 9 */
  @keyframes right-door-9 {
    0% {
      right: -125%;
      transform: skewX(15deg);
    }
    40% {
      right: -50%;
      transform: skewX(15deg);
    }
    60% {
      right: -50%;
      transform: skewX(-15deg);
    }
    100% {
      right: -125%;
      transform: skewX(-15deg);
    }
  }
  @keyframes left-door-9 {
    0% {
      left: -125%;
      transform: skewX(15deg);
    }
    40% {
      left: -50%;
      transform: skewX(15deg);
    }
    60% {
      left: -50%;
      transform: skewX(-15deg);
    }
    100% {
      left: -125%;
      transform: skewX(-15deg);
    }
  }
  /* 10 */
  @keyframes right-door-10 {
    0% {
      right: -125%;
      transform: skewX(15deg);
    }
    40% {
      right: -50%;
      transform: skewX(15deg);
    }
    60% {
      right: -50%;
      transform: skewX(-15deg);
    }
    100% {
      right: -125%;
      transform: skewX(-15deg);
    }
  }
  @keyframes left-door-10 {
    0% {
      left: -125%;
      transform: skewX(15deg);
    }
    40% {
      left: -50%;
      transform: skewX(15deg);
    }
    60% {
      left: -50%;
      transform: skewX(-15deg);
    }
    100% {
      left: -125%;
      transform: skewX(-15deg);
    }
  }
}
/* 912 DESIGN COMPLETE */
/* /////////////////////////////////////////////////////////////// */
/* /// 860 ipad DESIGN /// */
@media (max-width: 860px) {
  html {
    font-size: 37%;
  }
  .top-header {
    height: 20rem;
  }
  .nav-bar {
    position: relative;
    padding: 0.5rem 17.5rem;
    padding-right: 5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .logo {
    font-size: 5rem;
    width: 10ch;
  }
  .nav-list {
    position: absolute;
    padding-top: 5rem;
    row-gap: 5rem;
    font-size: 3.5rem;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    background-color: rgba(32, 29, 29, 0.322);
    box-shadow: 0 0 20px var(--main-color) inset;
    width: 30rem;
    height: 60rem;
    top: 8rem;
    border-radius: 15px;
    border: 1px solid rgba(255, 255, 255, 0);
    right: 17rem;
    opacity: 0;
    transition: opacity 0.5s;
    top: -75rem;
  }
  /* hover  */
  .nav-list a:hover {
    border-bottom: 0.4rem solid var(--main-color);
  }
  /* MENU ICON SECTION  */
  .menu-icon {
    display: inline;
    width: 12rem;
    height: 12rem;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .menu-icon .menu-i {
    font-size: 8em;
    color: var(--main-color);
  }
  .menu-icon:hover .menu-i {
    transform: scale(1.03);
    text-shadow: 0 0 15px var(--main-color);
  }
  /* HERO SECTION START */
  .hero {
    position: absolute;
    top: 20rem;
    width: 100%;
    height: calc(100vh - 20rem);
    height: calc(100svh - 20rem);
    display: flex;
    flex-direction: column-reverse;
    row-gap: 5rem;
  }
  .my-info {
    height: calc((90% - 45%) - 1%);
    width: 80%;
  }
  .my-info .heading {
    font-size: 10rem;
  }
  .my-info h2 {
    font-size: 5rem;
  }
  .my-info h2 span::after {
    width: calc(100% + 4px);
    border-left: 7.5px solid var(--main-color);
    right: -5px;
  }
  .my-info p {
    margin: 2.5rem 0;
    font-size: 3.5rem;
  }
  .hero-socials {
    font-size: 6rem;
    column-gap: 5rem;
  }
  .hero-socials li {
    width: 10rem;
    height: 10rem;
    border: 3.5px solid var(--main-color);
    margin: 2rem 0;
  }
  /* hover  */
  .hero-socials li:hover {
    box-shadow: 0 0 27.5px var(--main-color);
    transform: scale(1.25) translateY(-1rem);
  }
  .hero-btns {
    width: 50%;
    column-gap: 5rem;
    margin: 2rem 0;
  }
  .hire-btn {
    font-size: 3rem;
    width: 20rem;
    height: 8rem;
    border: 2.5px solid var(--main-color);
    border-radius: 25px;
    box-shadow: 0 0 25px var(--main-color);
  }
  /* hover  */
  .hire-btn:hover {
    font-weight: 500;
    box-shadow: 0 0 50px var(--main-color);
  }
  .contact-btn {
    font-size: 3rem;
    width: 22.5rem;
    height: 8rem;
    border: 3.5px solid var(--main-color);
    border-radius: 25px;
  }
  /* hover  */
  .contact-btn:hover {
    color: var(--secont-bg-color);
    background-color: var(--main-color);
    font-weight: 500;
    box-shadow: 0 0 25px var(--main-color), 0 0 50px var(--main-color);
  }
  .my-image {
    width: 45%;
    height: auto;
  }
  .my-image img {
    border: 2.5px solid var(--main-color);
    box-shadow: 0 0 50px var(--main-color);
  }
  .my-image img:hover {
    box-shadow: 0 0 25px var(--main-color), 0 0 50px var(--main-color),
      0 0 100px var(--main-color);
  }

  .main-container {
    overflow: hidden;
  }
  /* //////////////////////////////////////////////////////// */
  /* //////////////////////////////////////////////////////// */

  .left-door {
    top: 20rem;
    height: calc(100svh - 0rem);
    left: -125%;
  }
  .left-door span {
    width: 1.5rem;
  }
  .right-door {
    top: 20rem;
    height: calc(100svh - 0rem);
    right: -125%;
  }
  .right-door span {
    width: 1.5rem;
  }
  .top-left-to-right {
    width: 50rem;
    height: 2rem;
    z-index: 50;
    top: 20rem;
    left: 1rem;
  }
  .top-right-filer {
    height: 2.25rem;
    top: 20rem;
    left: 49rem;
    width: 3.7rem;
  }
  .top-left-corner {
    width: 2rem;
    height: 2rem;
    top: 20.05rem;
  }
  .top-top-to-bottom {
    width: 2rem;
    height: 50rem;
    top: 21rem;
  }
  .top-bottom-filer {
    width: 2.25rem;
    height: 5rem;
    top: 69rem;
  }
  .bottom-right-to-left {
    width: 50rem;
    height: 2rem;
    bottom: 0rem;
    right: 1rem;
  }
  .bottom-left-filer {
    width: 3.7rem;
    height: 2.25rem;
    right: 49rem;
  }
  .bottom-right-corner {
    width: 2rem;
    height: 2rem;
  }
  .bottom-bottom-to-top {
    width: 2rem;
    height: 50rem;
    bottom: 1rem;
  }
  .bottom-top-filer {
    width: 2.25rem;
    height: 5rem;
    bottom: 49rem;
  }

  /* EDUCATION SECTION START  */
  .education {
    position: relative;
    width: 100%;
    height: calc(100svh - 20rem);
    top: 20rem;
    font-size: 4rem;
    background-color: var(--first-bg-color);
  }
  .education .edu-timeline {
    position: absolute;
    width: 1rem;
    height:calc(100vh - 30rem);
    box-shadow: 0 0 25px var(--main-color);
    transform: rotate(0deg);
    bottom: 2rem;
    top: 8rem;
    left: 8rem;
  }
  .edu-timeline .dot-school {
    width: 2.5rem;
    height: 2.5rem;
    left: .5rem;
    top: calc(50vh  20rem);
  }
  .dot-school h3 {
    top: 2.5rem;
    font-size: 5rem;
    transform: rotate(0deg);
    left: 5rem;
  }
  .dot-school .high-school {
    width: 105rem;
    height: 40rem;
    border: 0.5rem solid var(--main-color);
    border-radius: 25px;
    box-shadow: 0 0 25px var(--main-color);
    padding: 5rem;
    padding-top: 2.5rem;
    transform: rotate(0deg);
    left: 10rem;
    top: 12.5rem;
  }
  /* hover  */
  .high-school:hover {
    transform: scale(1.09) translateY(-1rem);
    box-shadow: 0 0 15px var(--main-color), 0 0 30px var(--main-color),
      0 0 45px var(--main-color);
      transform: rotate(0deg);
  }
  .place-name-of-school {
    top: 1rem;
    left: 0rem;
    margin-bottom: 2.5rem;
    border-radius: 50px;
    border: 0.25rem solid var(--main-color);
  }
  .high-school p {
    font-size: 2.5rem;
  }
  .edu-timeline .dot-university {
    width: 2.5rem;
    height: 2.5rem;
    right: 0rem;
    left:0.5rem;
    top: 5rem;
  }
  .dot-university h3 {
    position: relative;
    top: 2.5rem;
    right: 0;
    font-size: 5rem;
    transform: rotate(0deg);
    left: 5rem;
  }
  .dot-university .university {
    width: 105rem;
    height: 40rem;
    border: 0.5rem solid var(--main-color);
    border-radius: 25px;
    box-shadow: 0 0 25px var(--main-color);
    padding: 5rem;
    padding-top: 2.5rem;
    transform: rotate(0deg);
    left: 10rem;
    top: 12.5rem;
  }
  /* HOVER  */
  .university:hover {
    transform: scale(1.09) translateY(1rem);
    transition: transform 0.5s, box-shadow 0.5s;
    box-shadow: 0 0 15px var(--main-color), 0 0 30px var(--main-color),
      0 0 45px var(--main-color);
  }
  .place-name-of-university {
    top: 1rem;
    left: 0rem;
    margin-bottom: 2.5rem;
    border-radius: 50px;
    border: 0.25rem solid var(--main-color);
  }
  .university p {
    font-size: 2.5rem;
  }
  /* EDUCATION SECTION END  */

  /* SKILLS SECTION START */
  .skills {
    height: calc(100svh - 20rem);
    top: 20rem;
    font-size: 4rem;
  }
  .skills h2 span {
    color: var(--main-color);
  }
  .skills h2 {
    font-size: 7.5rem;
    height: 10%;
  }
  .tech-skills {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 50%;
    height: 100%;
  }
  .tech-skills h3 {
    font-size: 5rem;
    height: 5%;
  }
  .tech-skills-list {
    grid-template-columns: 10rem 1fr 10rem;
    margin-bottom: 0%;
    grid-template-rows: repeat(9, 1fr);
  }
  .tech-skills-list li p {
    font-size: 4rem;
  }
  .tech-skills-list li .bx {
    font-size: 8rem;
  }
  /* <!-- html bar --> */
  .html-bar {
    box-shadow: 0 0 12.5px var(--main-color);
  }
  /* <!-- css-bar --> */
  .css-bar {
    box-shadow: 0 0 12.5px var(--main-color);
  }
  /* <!-- js-bar --> */
  .js-bar {
    box-shadow: 0 0 12.5px var(--main-color);
  }
  /* <!-- react-bar --> */
  .react-bar {
    box-shadow: 0 0 12.5px var(--main-color);
  }
  /* <!-- nodejs-bar --> */
  .nodejs-bar {
    box-shadow: 0 0 12.5px var(--main-color);
  }
  /* <!-- python-bar --> */
  .python-bar {
    box-shadow: 0 0 12.5px var(--main-color);
  }
  /* <!-- django-bar --> */
  .django-bar {
    box-shadow: 0 0 12.5px var(--main-color);
  }
  /* <!-- c++ bar --> */
  .c-bar {
    box-shadow: 0 0 12.5px var(--main-color);
  }
  /* <!-- git bar --> */
  .git-bar {
    box-shadow: 0 0 12.5px var(--main-color);
  }
  .pro-skills h3 {
    font-size: 5rem;
    margin-top: 5%;
    height: 5%;
  }
  .pro-skills-list {
    width: 90%;
    height: 90%;
    margin-bottom: 0%;
    display: flex;
    align-items: center;
    justify-content: start;
    flex-direction: column;
    row-gap: 5%;
    margin-top: 30%;
  }
  .progressbar {
    border: 5rem solid var(--main-color);
  }
  div[role="progressbar"] {
    --size: 40rem;
    box-shadow: 0 0 25px var(--main-color);
    border: 0.5rem;
  }
  .pro-skills-list h3 {
    font-size: 4rem;
  }
  .mid-man {
    box-shadow: 0 0 25px var(--main-color) inset;
    border: 0.5rem solid var(--main-color);
  }
  .back-man {
    box-shadow: 0 0 25px var(--main-color);
    border: 0.75rem solid var(--main-color);
  }
  /* SKILLS SECTION END */
  /* SERVICES SECTION START  */
  .services {
    height: calc(100svh - 20rem);
    top: 20rem;
    font-size: 4rem;
  }
  .services h2 {
    font-size: 7.5rem;
    margin-bottom: 2.5%;
  }
  .services-container {
    width: 85%;
    height: 80%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    column-gap: 8%;
    row-gap: 1%;
  }
  .service-cards {
    border: 1rem solid var(--main-color);
    box-shadow: 0 0 12.5px var(--main-color);
    border-radius: 15px;
    padding: 1rem 2.5rem;
    height: 45%;
    width: 40%;
    overflow-y: scroll;
    scroll-behavior: smooth;
    scrollbar-width: thin;
    scrollbar-color: rgba(0, 0, 0, 0) rgba(0, 0, 0, 0);
  }
  .service-cards:hover {
    box-shadow: 0 0 25px var(--main-color), 0 0 30px var(--main-color),
      0 0 42.5px var(--main-color);
  }
  .service-cards h3 {
    font-size: 4rem;
    margin-bottom: 1rem;
  }
  .service-cards i {
    font-size: 7.5rem;
  }
  .service-cards p {
    font-size: 3rem;
  }
  .service-card-1 {
    padding: 1rem 2.5rem;
  }
  .service-card-1 h3 {
    font-size: 4rem;
  }
  /* SERVICES SECTION END */
  /* CONTACT SECTION START */
  .contact {
    height: calc(100svh - 20rem);
    top: 20rem;
    font-size: 4rem;
  }
  .contact h2 {
    font-size: 7.5rem;
  }
  .contact-form input:first-child {
    margin-top: 10%;
  }

  .contact-form input {
    font-size: 3.5rem;
    padding-left: 5rem;
    line-height: 5rem;
    border-radius: 50px;
    border: 0.5rem solid var(--main-color);
    box-shadow: 0 0 12.5px var(--main-color);
  }
  /* hover  */
  .contact-form input:hover {
    box-shadow: 0 0 12.5px var(--main-color), 0 0 25px var(--main-color),
      0 0 37.5px var(--main-color);
  }
  .input-group-1 {
    width: 50%;
    height: 100%;
    display: flex;
    justify-content: start;
    align-items: center;
    flex-direction: column;
    row-gap: 5%;
  }
  .input-group-2 {
    width: 50%;
    height: 100%;
    display: flex;
    justify-content: start;
    align-items: center;
    flex-direction: column;

    row-gap: 5%;
  }
  .contact-form textarea {
    font-size: 3rem;
    padding-left: 5rem;
    padding-top: 5rem;
    line-height: 4rem;
    border-radius: 50px;
    border: 0.5rem solid var(--main-color);
    box-shadow: 0 0 12.5px var(--main-color);
    margin-top: 10%;
  }
  .contact-form textarea:hover {
    box-shadow: 0 0 12.5px var(--main-color), 0 0 25px var(--main-color),
      0 0 37.5px var(--main-color);
  }
  #submit-btn {
    font-size: 4rem;
    background-color: var(--main-color);
    padding: 0rem;
  }
  #reset-btn {
    font-size: 4rem;
    color: var(--main-color);
    padding: 0rem;
  }
  /* CONTACT SECTION END */

  /* page switching animations */
  /* 1 */
  @keyframes right-door-1 {
    0% {
      right: -125%;
      transform: skewX(15deg);
    }
    40% {
      right: -50%;
      transform: skewX(15deg);
    }
    60% {
      right: -50%;
      transform: skewX(-15deg);
    }
    100% {
      right: -125%;
      transform: skewX(-15deg);
    }
  }
  @keyframes left-door-1 {
    0% {
      left: -125%;
      transform: skewX(15deg);
    }
    40% {
      left: -50%;
      transform: skewX(15deg);
    }
    60% {
      left: -50%;
      transform: skewX(-15deg);
    }
    100% {
      left: -125%;
      transform: skewX(-15deg);
    }
  }
  /* 2 */
  @keyframes right-door-2 {
    0% {
      right: -125%;
      transform: skewX(15deg);
    }
    40% {
      right: -50%;
      transform: skewX(15deg);
    }
    60% {
      right: -50%;
      transform: skewX(-15deg);
    }
    100% {
      right: -125%;
      transform: skewX(-15deg);
    }
  }
  @keyframes left-door-2 {
    0% {
      left: -125%;
      transform: skewX(15deg);
    }
    40% {
      left: -50%;
      transform: skewX(15deg);
    }
    60% {
      left: -50%;
      transform: skewX(-15deg);
    }
    100% {
      left: -125%;
      transform: skewX(-15deg);
    }
  }
  /* 3 */
  @keyframes right-door-3 {
    0% {
      right: -125%;
      transform: skewX(15deg);
    }
    40% {
      right: -50%;
      transform: skewX(15deg);
    }
    60% {
      right: -50%;
      transform: skewX(-15deg);
    }
    100% {
      right: -125%;
      transform: skewX(-15deg);
    }
  }
  @keyframes left-door-3 {
    0% {
      left: -125%;
      transform: skewX(15deg);
    }
    40% {
      left: -50%;
      transform: skewX(15deg);
    }
    60% {
      left: -50%;
      transform: skewX(-15deg);
    }
    100% {
      left: -125%;
      transform: skewX(-15deg);
    }
  }
  /* 4 */
  @keyframes right-door-4 {
    0% {
      right: -125%;
      transform: skewX(15deg);
    }
    40% {
      right: -50%;
      transform: skewX(15deg);
    }
    60% {
      right: -50%;
      transform: skewX(-15deg);
    }
    100% {
      right: -125%;
      transform: skewX(-15deg);
    }
  }
  @keyframes left-door-4 {
    0% {
      left: -125%;
      transform: skewX(15deg);
    }
    40% {
      left: -50%;
      transform: skewX(15deg);
    }
    60% {
      left: -50%;
      transform: skewX(-15deg);
    }
    100% {
      left: -125%;
      transform: skewX(-15deg);
    }
  }
  /* 5 */
  @keyframes right-door-5 {
    0% {
      right: -125%;
      transform: skewX(15deg);
    }
    40% {
      right: -50%;
      transform: skewX(15deg);
    }
    60% {
      right: -50%;
      transform: skewX(-15deg);
    }
    100% {
      right: -125%;
      transform: skewX(-15deg);
    }
  }
  @keyframes left-door-5 {
    0% {
      left: -125%;
      transform: skewX(15deg);
    }
    40% {
      left: -50%;
      transform: skewX(15deg);
    }
    60% {
      left: -50%;
      transform: skewX(-15deg);
    }
    100% {
      left: -125%;
      transform: skewX(-15deg);
    }
  }
  /* 6 */
  @keyframes right-door-6 {
    0% {
      right: -125%;
      transform: skewX(15deg);
    }
    40% {
      right: -50%;
      transform: skewX(15deg);
    }
    60% {
      right: -50%;
      transform: skewX(-15deg);
    }
    100% {
      right: -125%;
      transform: skewX(-15deg);
    }
  }
  @keyframes left-door-6 {
    0% {
      left: -125%;
      transform: skewX(15deg);
    }
    40% {
      left: -50%;
      transform: skewX(15deg);
    }
    60% {
      left: -50%;
      transform: skewX(-15deg);
    }
    100% {
      left: -125%;
      transform: skewX(-15deg);
    }
  }
  /* 7 */
  @keyframes right-door-7 {
    0% {
      right: -125%;
      transform: skewX(15deg);
    }
    40% {
      right: -50%;
      transform: skewX(15deg);
    }
    60% {
      right: -50%;
      transform: skewX(-15deg);
    }
    100% {
      right: -125%;
      transform: skewX(-15deg);
    }
  }
  @keyframes left-door-7 {
    0% {
      left: -125%;
      transform: skewX(15deg);
    }
    40% {
      left: -50%;
      transform: skewX(15deg);
    }
    60% {
      left: -50%;
      transform: skewX(-15deg);
    }
    100% {
      left: -125%;
      transform: skewX(-15deg);
    }
  }
  /* 8 */
  @keyframes right-door-8 {
    0% {
      right: -125%;
      transform: skewX(15deg);
    }
    40% {
      right: -50%;
      transform: skewX(15deg);
    }
    60% {
      right: -50%;
      transform: skewX(-15deg);
    }
    100% {
      right: -125%;
      transform: skewX(-15deg);
    }
  }
  @keyframes left-door-8 {
    0% {
      left: -125%;
      transform: skewX(15deg);
    }
    40% {
      left: -50%;
      transform: skewX(15deg);
    }
    60% {
      left: -50%;
      transform: skewX(-15deg);
    }
    100% {
      left: -125%;
      transform: skewX(-15deg);
    }
  }
  /* 9 */
  @keyframes right-door-9 {
    0% {
      right: -125%;
      transform: skewX(15deg);
    }
    40% {
      right: -50%;
      transform: skewX(15deg);
    }
    60% {
      right: -50%;
      transform: skewX(-15deg);
    }
    100% {
      right: -125%;
      transform: skewX(-15deg);
    }
  }
  @keyframes left-door-9 {
    0% {
      left: -125%;
      transform: skewX(15deg);
    }
    40% {
      left: -50%;
      transform: skewX(15deg);
    }
    60% {
      left: -50%;
      transform: skewX(-15deg);
    }
    100% {
      left: -125%;
      transform: skewX(-15deg);
    }
  }
  /* 10 */
  @keyframes right-door-10 {
    0% {
      right: -125%;
      transform: skewX(15deg);
    }
    40% {
      right: -50%;
      transform: skewX(15deg);
    }
    60% {
      right: -50%;
      transform: skewX(-15deg);
    }
    100% {
      right: -125%;
      transform: skewX(-15deg);
    }
  }
  @keyframes left-door-10 {
    0% {
      left: -125%;
      transform: skewX(15deg);
    }
    40% {
      left: -50%;
      transform: skewX(15deg);
    }
    60% {
      left: -50%;
      transform: skewX(-15deg);
    }
    100% {
      left: -125%;
      transform: skewX(-15deg);
    }
  }
}
/* 860 DESIGN COMPLETE */
/* /////////////////////////////////////////////////////////////// */
/* /// 820 ipad DESIGN /// */
@media (max-width: 820px) {
  html {
    font-size: 37%;
  }
  .top-header {
    height: 20rem;
  }
  .nav-bar {
    position: relative;
    padding: 0.5rem 17.5rem;
    padding-right: 5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    /* background-color: rgb(50, 42, 57); */
  }
  .logo {
    font-size: 5rem;
    width: 10ch;
  }
  .nav-list {
    position: absolute;
    padding-top: 5rem;
    row-gap: 5rem;
    font-size: 3.5rem;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    background-color: rgba(32, 29, 29, 0.322);
    box-shadow: 0 0 20px var(--main-color) inset;
    width: 30rem;
    height: 60rem;
    top: 8rem;
    border-radius: 15px;
    border: 1px solid rgba(255, 255, 255, 0);
    right: 17rem;
    opacity: 0;
    transition: opacity 0.5s;
    top: -75rem;
  }
  /* hover  */
  .nav-list a:hover {
    border-bottom: 0.4rem solid var(--main-color);
  }
  /* MENU ICON SECTION  */
  .menu-icon {
    display: inline;
    width: 12rem;
    height: 12rem;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .menu-icon .menu-i {
    font-size: 8em;
    color: var(--main-color);
  }
  .menu-icon:hover .menu-i {
    transform: scale(1.03);
    text-shadow: 0 0 15px var(--main-color);
  }
  /* HERO SECTION START */
  .hero {
    position: absolute;
    top: 20rem;
    width: 100%;
    height: calc(100vh - 20rem);
    height: calc(100svh - 20rem);
    display: flex;
    flex-direction: column-reverse;
    row-gap: 5rem;
  }
  .my-info {
    height: calc((90% - 45%) - 1%);
    width: 80%;
  }
  .my-info .heading {
    font-size: 10rem;
  }
  .my-info h2 {
    font-size: 5rem;
  }
  .my-info h2 span::after {
    width: calc(100% + 4px);
    border-left: 7.5px solid var(--main-color);
    right: -5px;
  }
  .my-info p {
    margin: 2.5rem 0;
    font-size: 3.5rem;
  }
  .hero-socials {
    font-size: 6rem;
    column-gap: 5rem;
  }
  .hero-socials li {
    width: 10rem;
    height: 10rem;
    border: 3.5px solid var(--main-color);
    margin: 2rem 0;
  }
  /* hover  */
  .hero-socials li:hover {
    box-shadow: 0 0 27.5px var(--main-color);
    transform: scale(1.25) translateY(-1rem);
  }
  .hero-btns {
    width: 50%;
    column-gap: 5rem;
    margin: 2rem 0;
  }
  .hire-btn {
    font-size: 3rem;
    width: 20rem;
    height: 8rem;
    border: 2.5px solid var(--main-color);
    border-radius: 25px;
    box-shadow: 0 0 25px var(--main-color);
  }
  /* hover  */
  .hire-btn:hover {
    font-weight: 500;
    box-shadow: 0 0 50px var(--main-color);
  }
  .contact-btn {
    font-size: 3rem;
    width: 22.5rem;
    height: 8rem;
    border: 3.5px solid var(--main-color);
    border-radius: 25px;
  }
  /* hover  */
  .contact-btn:hover {
    color: var(--secont-bg-color);
    background-color: var(--main-color);
    font-weight: 500;
    box-shadow: 0 0 25px var(--main-color), 0 0 50px var(--main-color);
  }
  .my-image {
    width: 45%;
    height: auto;
  }
  .my-image img {
    border: 2.5px solid var(--main-color);
    box-shadow: 0 0 50px var(--main-color);
  }
  .my-image img:hover {
    box-shadow: 0 0 25px var(--main-color), 0 0 50px var(--main-color),
      0 0 100px var(--main-color);
  }

  .main-container {
    overflow: hidden;
  }
  /* //////////////////////////////////////////////////////// */
  /* //////////////////////////////////////////////////////// */

  .left-door {
    top: 20rem;
    height: calc(100svh - 0rem);
    left: -125%;
  }
  .left-door span {
    width: 1.5rem;
  }
  .right-door {
    top: 20rem;
    height: calc(100svh - 0rem);
    right: -125%;
  }
  .right-door span {
    width: 1.5rem;
  }
  .top-left-to-right {
    width: 50rem;
    height: 2rem;
    z-index: 50;
    top: 20rem;
    left: 1rem;
  }
  .top-right-filer {
    height: 2.25rem;
    top: 20rem;
    left: 49rem;
    width: 3.7rem;
  }
  .top-left-corner {
    width: 2rem;
    height: 2rem;
    top: 20.05rem;
  }
  .top-top-to-bottom {
    width: 2rem;
    height: 50rem;
    top: 21rem;
  }
  .top-bottom-filer {
    width: 2.25rem;
    height: 5rem;
    top: 69rem;
  }
  .bottom-right-to-left {
    width: 50rem;
    height: 2rem;
    bottom: 0rem;
    right: 1rem;
  }
  .bottom-left-filer {
    width: 3.7rem;
    height: 2.25rem;
    right: 49rem;
  }
  .bottom-right-corner {
    width: 2rem;
    height: 2rem;
  }
  .bottom-bottom-to-top {
    width: 2rem;
    height: 50rem;
    bottom: 1rem;
  }
  .bottom-top-filer {
    width: 2.25rem;
    height: 5rem;
    bottom: 49rem;
  }

  /* EDUCATION SECTION START  */
  .education {
    position: relative;
    width: 100%;
    height: calc(100svh - 20rem);
    top: 20rem;
    font-size: 4rem;
    background-color: var(--first-bg-color);
  }
  .education .edu-timeline {
    position: absolute;
    width: 1rem;
    height:calc(100vh - 30rem);
    box-shadow: 0 0 25px var(--main-color);
    transform: rotate(0deg);
    bottom: 2rem;
    top: 8rem;
    left: 8rem;
  }
  .edu-timeline .dot-school {
    width: 2.5rem;
    height: 2.5rem;
    left: .5rem;
    top: calc(50vh  20rem);
  }
  .dot-school h3 {
    top: 2.5rem;
    font-size: 5rem;
    transform: rotate(0deg);
    left: 5rem;
  }
  .dot-school .high-school {
    width: 105rem;
    height: 40rem;
    border: 0.5rem solid var(--main-color);
    border-radius: 25px;
    box-shadow: 0 0 25px var(--main-color);
    padding: 5rem;
    padding-top: 2.5rem;
    transform: rotate(0deg);
    left: 10rem;
    top: 12.5rem;
  }
  /* hover  */
  .high-school:hover {
    transform: scale(1.09) translateY(-1rem);
    box-shadow: 0 0 15px var(--main-color), 0 0 30px var(--main-color),
      0 0 45px var(--main-color);
      transform: rotate(0deg);
  }
  .place-name-of-school {
    top: 1rem;
    left: 0rem;
    margin-bottom: 2.5rem;
    border-radius: 50px;
    border: 0.25rem solid var(--main-color);
  }
  .high-school p {
    font-size: 2.5rem;
  }
  .edu-timeline .dot-university {
    width: 2.5rem;
    height: 2.5rem;
    right: 0rem;
    left:0.5rem;
    top: 5rem;
  }
  .dot-university h3 {
    position: relative;
    top: 2.5rem;
    right: 0;
    font-size: 5rem;
    transform: rotate(0deg);
    left: 5rem;
  }
  .dot-university .university {
    width: 105rem;
    height: 40rem;
    border: 0.5rem solid var(--main-color);
    border-radius: 25px;
    box-shadow: 0 0 25px var(--main-color);
    padding: 5rem;
    padding-top: 2.5rem;
    transform: rotate(0deg);
    left: 10rem;
    top: 12.5rem;
  }
  /* HOVER  */
  .university:hover {
    transform: scale(1.09) translateY(1rem);
    transition: transform 0.5s, box-shadow 0.5s;
    box-shadow: 0 0 15px var(--main-color), 0 0 30px var(--main-color),
      0 0 45px var(--main-color);
  }
  .place-name-of-university {
    top: 1rem;
    left: 0rem;
    margin-bottom: 2.5rem;
    border-radius: 50px;
    border: 0.25rem solid var(--main-color);
  }
  .university p {
    font-size: 2.5rem;
  }
  /* EDUCATION SECTION END  */

  /* SKILLS SECTION START */
  .skills {
    height: calc(100svh - 20rem);
    top: 20rem;
    font-size: 4rem;
  }
  .skills h2 span {
    color: var(--main-color);
  }
  .skills h2 {
    font-size: 7.5rem;
    height: 10%;
  }
  .tech-skills {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 50%;
    height: 100%;
  }
  .tech-skills h3 {
    font-size: 5rem;
    height: 5%;
  }
  .tech-skills-list {
    grid-template-columns: 10rem 1fr 10rem;
    margin-bottom: 0%;
    grid-template-rows: repeat(9, 1fr);
  }
  .tech-skills-list li p {
    font-size: 4rem;
  }
  .tech-skills-list li .bx {
    font-size: 8rem;
  }
  /* <!-- html bar --> */
  .html-bar {
    box-shadow: 0 0 12.5px var(--main-color);
  }
  /* <!-- css-bar --> */
  .css-bar {
    box-shadow: 0 0 12.5px var(--main-color);
  }
  /* <!-- js-bar --> */
  .js-bar {
    box-shadow: 0 0 12.5px var(--main-color);
  }
  /* <!-- react-bar --> */
  .react-bar {
    box-shadow: 0 0 12.5px var(--main-color);
  }
  /* <!-- nodejs-bar --> */
  .nodejs-bar {
    box-shadow: 0 0 12.5px var(--main-color);
  }
  /* <!-- python-bar --> */
  .python-bar {
    box-shadow: 0 0 12.5px var(--main-color);
  }
  /* <!-- django-bar --> */
  .django-bar {
    box-shadow: 0 0 12.5px var(--main-color);
  }
  /* <!-- c++ bar --> */
  .c-bar {
    box-shadow: 0 0 12.5px var(--main-color);
  }
  /* <!-- git bar --> */
  .git-bar {
    box-shadow: 0 0 12.5px var(--main-color);
  }
  .pro-skills h3 {
    font-size: 5rem;
    margin-top: 5%;
    height: 5%;
  }
  .pro-skills-list {
    width: 90%;
    height: 90%;
    margin-bottom: 0%;
    display: flex;
    align-items: center;
    justify-content: start;
    flex-direction: column;
    row-gap: 5%;
    margin-top: 30%;
  }
  .progressbar {
    border: 5rem solid var(--main-color);
  }
  div[role="progressbar"] {
    --size: 40rem;
    box-shadow: 0 0 25px var(--main-color);
    border: 0.5rem;
  }
  .pro-skills-list h3 {
    font-size: 4rem;
  }
  .mid-man {
    box-shadow: 0 0 25px var(--main-color) inset;
    border: 0.5rem solid var(--main-color);
  }
  .back-man {
    box-shadow: 0 0 25px var(--main-color);
    border: 0.75rem solid var(--main-color);
  }
  /* SKILLS SECTION END */
  /* SERVICES SECTION START  */
  .services {
    height: calc(100svh - 20rem);
    top: 20rem;
    font-size: 4rem;
  }
  .services h2 {
    font-size: 7.5rem;
    margin-bottom: 2.5%;
  }
  .services-container {
    width: 85%;
    height: 80%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    column-gap: 8%;
    row-gap: 1%;
  }
  .service-cards {
    border: 1rem solid var(--main-color);
    box-shadow: 0 0 12.5px var(--main-color);
    border-radius: 15px;
    padding: 1rem 2.5rem;
    height: 45%;
    width: 40%;
    overflow-y: scroll;
    scroll-behavior: smooth;
    scrollbar-width: thin;
    scrollbar-color: rgba(0, 0, 0, 0) rgba(0, 0, 0, 0);
  }
  .service-cards:hover {
    box-shadow: 0 0 25px var(--main-color), 0 0 30px var(--main-color),
      0 0 42.5px var(--main-color);
  }
  .service-cards h3 {
    font-size: 4rem;
    margin-bottom: 1rem;
  }
  .service-cards i {
    font-size: 7.5rem;
  }
  .service-cards p {
    font-size: 3rem;
  }
  .service-card-1 {
    padding: 1rem 2.5rem;
  }
  .service-card-1 h3 {
    font-size: 4rem;
  }
  /* SERVICES SECTION END */
  /* CONTACT SECTION START */
  .contact {
    height: calc(100svh - 20rem);
    top: 20rem;
    font-size: 4rem;
  }
  .contact h2 {
    font-size: 7.5rem;
  }
  .contact-form input:first-child {
    margin-top: 10%;
  }

  .contact-form input {
    font-size: 3.5rem;
    padding-left: 5rem;
    line-height: 5rem;
    border-radius: 50px;
    border: 0.5rem solid var(--main-color);
    box-shadow: 0 0 12.5px var(--main-color);
  }
  /* hover  */
  .contact-form input:hover {
    box-shadow: 0 0 12.5px var(--main-color), 0 0 25px var(--main-color),
      0 0 37.5px var(--main-color);
  }
  .input-group-1 {
    width: 50%;
    height: 100%;
    display: flex;
    justify-content: start;
    align-items: center;
    flex-direction: column;
    row-gap: 5%;
  }
  .input-group-2 {
    width: 50%;
    height: 100%;
    display: flex;
    justify-content: start;
    align-items: center;
    flex-direction: column;

    row-gap: 5%;
  }
  .contact-form textarea {
    font-size: 3rem;
    padding-left: 5rem;
    padding-top: 5rem;
    line-height: 4rem;
    border-radius: 50px;
    border: 0.5rem solid var(--main-color);
    box-shadow: 0 0 12.5px var(--main-color);
    margin-top: 10%;
  }
  .contact-form textarea:hover {
    box-shadow: 0 0 12.5px var(--main-color), 0 0 25px var(--main-color),
      0 0 37.5px var(--main-color);
  }
  #submit-btn {
    font-size: 4rem;
    background-color: var(--main-color);
    padding: 0rem;
  }
  #reset-btn {
    font-size: 4rem;
    color: var(--main-color);
    padding: 0rem;
  }
  /* CONTACT SECTION END */

  /* page switching animations */
  /* 1 */
  @keyframes right-door-1 {
    0% {
      right: -125%;
      transform: skewX(15deg);
    }
    40% {
      right: -50%;
      transform: skewX(15deg);
    }
    60% {
      right: -50%;
      transform: skewX(-15deg);
    }
    100% {
      right: -125%;
      transform: skewX(-15deg);
    }
  }
  @keyframes left-door-1 {
    0% {
      left: -125%;
      transform: skewX(15deg);
    }
    40% {
      left: -50%;
      transform: skewX(15deg);
    }
    60% {
      left: -50%;
      transform: skewX(-15deg);
    }
    100% {
      left: -125%;
      transform: skewX(-15deg);
    }
  }
  /* 2 */
  @keyframes right-door-2 {
    0% {
      right: -125%;
      transform: skewX(15deg);
    }
    40% {
      right: -50%;
      transform: skewX(15deg);
    }
    60% {
      right: -50%;
      transform: skewX(-15deg);
    }
    100% {
      right: -125%;
      transform: skewX(-15deg);
    }
  }
  @keyframes left-door-2 {
    0% {
      left: -125%;
      transform: skewX(15deg);
    }
    40% {
      left: -50%;
      transform: skewX(15deg);
    }
    60% {
      left: -50%;
      transform: skewX(-15deg);
    }
    100% {
      left: -125%;
      transform: skewX(-15deg);
    }
  }
  /* 3 */
  @keyframes right-door-3 {
    0% {
      right: -125%;
      transform: skewX(15deg);
    }
    40% {
      right: -50%;
      transform: skewX(15deg);
    }
    60% {
      right: -50%;
      transform: skewX(-15deg);
    }
    100% {
      right: -125%;
      transform: skewX(-15deg);
    }
  }
  @keyframes left-door-3 {
    0% {
      left: -125%;
      transform: skewX(15deg);
    }
    40% {
      left: -50%;
      transform: skewX(15deg);
    }
    60% {
      left: -50%;
      transform: skewX(-15deg);
    }
    100% {
      left: -125%;
      transform: skewX(-15deg);
    }
  }
  /* 4 */
  @keyframes right-door-4 {
    0% {
      right: -125%;
      transform: skewX(15deg);
    }
    40% {
      right: -50%;
      transform: skewX(15deg);
    }
    60% {
      right: -50%;
      transform: skewX(-15deg);
    }
    100% {
      right: -125%;
      transform: skewX(-15deg);
    }
  }
  @keyframes left-door-4 {
    0% {
      left: -125%;
      transform: skewX(15deg);
    }
    40% {
      left: -50%;
      transform: skewX(15deg);
    }
    60% {
      left: -50%;
      transform: skewX(-15deg);
    }
    100% {
      left: -125%;
      transform: skewX(-15deg);
    }
  }
  /* 5 */
  @keyframes right-door-5 {
    0% {
      right: -125%;
      transform: skewX(15deg);
    }
    40% {
      right: -50%;
      transform: skewX(15deg);
    }
    60% {
      right: -50%;
      transform: skewX(-15deg);
    }
    100% {
      right: -125%;
      transform: skewX(-15deg);
    }
  }
  @keyframes left-door-5 {
    0% {
      left: -125%;
      transform: skewX(15deg);
    }
    40% {
      left: -50%;
      transform: skewX(15deg);
    }
    60% {
      left: -50%;
      transform: skewX(-15deg);
    }
    100% {
      left: -125%;
      transform: skewX(-15deg);
    }
  }
  /* 6 */
  @keyframes right-door-6 {
    0% {
      right: -125%;
      transform: skewX(15deg);
    }
    40% {
      right: -50%;
      transform: skewX(15deg);
    }
    60% {
      right: -50%;
      transform: skewX(-15deg);
    }
    100% {
      right: -125%;
      transform: skewX(-15deg);
    }
  }
  @keyframes left-door-6 {
    0% {
      left: -125%;
      transform: skewX(15deg);
    }
    40% {
      left: -50%;
      transform: skewX(15deg);
    }
    60% {
      left: -50%;
      transform: skewX(-15deg);
    }
    100% {
      left: -125%;
      transform: skewX(-15deg);
    }
  }
  /* 7 */
  @keyframes right-door-7 {
    0% {
      right: -125%;
      transform: skewX(15deg);
    }
    40% {
      right: -50%;
      transform: skewX(15deg);
    }
    60% {
      right: -50%;
      transform: skewX(-15deg);
    }
    100% {
      right: -125%;
      transform: skewX(-15deg);
    }
  }
  @keyframes left-door-7 {
    0% {
      left: -125%;
      transform: skewX(15deg);
    }
    40% {
      left: -50%;
      transform: skewX(15deg);
    }
    60% {
      left: -50%;
      transform: skewX(-15deg);
    }
    100% {
      left: -125%;
      transform: skewX(-15deg);
    }
  }
  /* 8 */
  @keyframes right-door-8 {
    0% {
      right: -125%;
      transform: skewX(15deg);
    }
    40% {
      right: -50%;
      transform: skewX(15deg);
    }
    60% {
      right: -50%;
      transform: skewX(-15deg);
    }
    100% {
      right: -125%;
      transform: skewX(-15deg);
    }
  }
  @keyframes left-door-8 {
    0% {
      left: -125%;
      transform: skewX(15deg);
    }
    40% {
      left: -50%;
      transform: skewX(15deg);
    }
    60% {
      left: -50%;
      transform: skewX(-15deg);
    }
    100% {
      left: -125%;
      transform: skewX(-15deg);
    }
  }
  /* 9 */
  @keyframes right-door-9 {
    0% {
      right: -125%;
      transform: skewX(15deg);
    }
    40% {
      right: -50%;
      transform: skewX(15deg);
    }
    60% {
      right: -50%;
      transform: skewX(-15deg);
    }
    100% {
      right: -125%;
      transform: skewX(-15deg);
    }
  }
  @keyframes left-door-9 {
    0% {
      left: -125%;
      transform: skewX(15deg);
    }
    40% {
      left: -50%;
      transform: skewX(15deg);
    }
    60% {
      left: -50%;
      transform: skewX(-15deg);
    }
    100% {
      left: -125%;
      transform: skewX(-15deg);
    }
  }
  /* 10 */
  @keyframes right-door-10 {
    0% {
      right: -125%;
      transform: skewX(15deg);
    }
    40% {
      right: -50%;
      transform: skewX(15deg);
    }
    60% {
      right: -50%;
      transform: skewX(-15deg);
    }
    100% {
      right: -125%;
      transform: skewX(-15deg);
    }
  }
  @keyframes left-door-10 {
    0% {
      left: -125%;
      transform: skewX(15deg);
    }
    40% {
      left: -50%;
      transform: skewX(15deg);
    }
    60% {
      left: -50%;
      transform: skewX(-15deg);
    }
    100% {
      left: -125%;
      transform: skewX(-15deg);
    }
  }
}
/* 820 DESIGN COMPLETE */
/* /////////////////////////////////////////////////////////////// */
/* /// 768 ipad DESIGN /// */
@media (max-width: 768px) {
  html {
    font-size: 35%;
  }
  .top-header {
    height: 20rem;
  }
  .nav-bar {
    position: relative;
    padding: 0.5rem 17.5rem;
    padding-right: 5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    /* background-color: rgb(50, 42, 57); */
  }
  .logo {
    font-size: 5rem;
    width: 10ch;
  }
  .nav-list {
    position: absolute;
    padding-top: 5rem;
    row-gap: 5rem;
    font-size: 3.5rem;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    background-color: rgba(32, 29, 29, 0.322);
    box-shadow: 0 0 20px var(--main-color) inset;
    width: 30rem;
    height: 60rem;
    top: 8rem;
    border-radius: 15px;
    border: 1px solid rgba(255, 255, 255, 0);
    right: 17rem;
    opacity: 0;
    transition: opacity 0.5s;
    top: -75rem;
  }
  /* hover  */
  .nav-list a:hover {
    border-bottom: 0.4rem solid var(--main-color);
  }
  /* MENU ICON SECTION  */
  .menu-icon {
    display: inline;
    width: 12rem;
    height: 12rem;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .menu-icon .menu-i {
    font-size: 8em;
    color: var(--main-color);
  }
  .menu-icon:hover .menu-i {
    transform: scale(1.03);
    text-shadow: 0 0 15px var(--main-color);
  }
  /* HERO SECTION START */
  .hero {
    position: absolute;
    top: 20rem;
    width: 100%;
    height: calc(100vh - 20rem);
    height: calc(100svh - 20rem);
    display: flex;
    flex-direction: column-reverse;
    row-gap: 5rem;
  }
  .my-info {
    height: calc((90% - 45%) - 1%);
    width: 80%;
  }
  .my-info .heading {
    font-size: 10rem;
  }
  .my-info h2 {
    font-size: 5rem;
  }
  .my-info h2 span::after {
    width: calc(100% + 4px);
    border-left: 7.5px solid var(--main-color);
    right: -5px;
  }
  .my-info p {
    margin: 2.5rem 0;
    font-size: 3.5rem;
  }
  .hero-socials {
    font-size: 6rem;
    column-gap: 5rem;
  }
  .hero-socials li {
    width: 10rem;
    height: 10rem;
    border: 3.5px solid var(--main-color);
    margin: 2rem 0;
  }
  /* hover  */
  .hero-socials li:hover {
    box-shadow: 0 0 27.5px var(--main-color);
    transform: scale(1.25) translateY(-1rem);
  }
  .hero-btns {
    width: 50%;
    column-gap: 5rem;
    margin: 2rem 0;
  }
  .hire-btn {
    font-size: 3rem;
    width: 20rem;
    height: 8rem;
    border: 2.5px solid var(--main-color);
    border-radius: 25px;
    box-shadow: 0 0 25px var(--main-color);
  }
  /* hover  */
  .hire-btn:hover {
    font-weight: 500;
    box-shadow: 0 0 50px var(--main-color);
  }
  .contact-btn {
    font-size: 3rem;
    width: 22.5rem;
    height: 8rem;
    border: 3.5px solid var(--main-color);
    border-radius: 25px;
  }
  /* hover  */
  .contact-btn:hover {
    color: var(--secont-bg-color);
    background-color: var(--main-color);
    font-weight: 500;
    box-shadow: 0 0 25px var(--main-color), 0 0 50px var(--main-color);
  }
  .my-image {
    width: 45%;
    height: auto;
  }
  .my-image img {
    border: 2.5px solid var(--main-color);
    box-shadow: 0 0 50px var(--main-color);
  }
  .my-image img:hover {
    box-shadow: 0 0 25px var(--main-color), 0 0 50px var(--main-color),
      0 0 100px var(--main-color);
  }

  .main-container {
    overflow: hidden;
  }
  /* //////////////////////////////////////////////////////// */
  /* //////////////////////////////////////////////////////// */

  .left-door {
    top: 20rem;
    height: calc(100svh - 0rem);
    left: -125%;
  }
  .left-door span {
    width: 1.5rem;
  }
  .right-door {
    top: 20rem;
    height: calc(100svh - 0rem);
    right: -125%;
  }
  .right-door span {
    width: 1.5rem;
  }
  .top-left-to-right {
    width: 50rem;
    height: 2rem;
    z-index: 50;
    top: 20rem;
    left: 1rem;
  }
  .top-right-filer {
    height: 2.25rem;
    top: 20rem;
    left: 49rem;
    width: 3.7rem;
  }
  .top-left-corner {
    width: 2rem;
    height: 2rem;
    top: 20.05rem;
  }
  .top-top-to-bottom {
    width: 2rem;
    height: 50rem;
    top: 21rem;
  }
  .top-bottom-filer {
    width: 2.25rem;
    height: 5rem;
    top: 69rem;
  }
  .bottom-right-to-left {
    width: 50rem;
    height: 2rem;
    bottom: 0rem;
    right: 1rem;
  }
  .bottom-left-filer {
    width: 3.7rem;
    height: 2.25rem;
    right: 49rem;
  }
  .bottom-right-corner {
    width: 2rem;
    height: 2rem;
  }
  .bottom-bottom-to-top {
    width: 2rem;
    height: 50rem;
    bottom: 1rem;
  }
  .bottom-top-filer {
    width: 2.25rem;
    height: 5rem;
    bottom: 49rem;
  }

  /* EDUCATION SECTION START  */
  .education {
    position: relative;
    width: 100%;
    height: calc(100svh - 20rem);
    top: 20rem;
    font-size: 4rem;
    background-color: var(--first-bg-color);
  }
  .education .edu-timeline {
    position: absolute;
    width: 95%;
    height: 1rem;
    box-shadow: 0 0 25px var(--main-color);
    transform: rotate(-90deg);
    top: 75rem;
    left: -55rem;
  }
  .edu-timeline .dot-school {
    width: 2.5rem;
    left: 65rem;
  }
  .dot-school h3 {
    top: 2.5rem;
    font-size: 5rem;
    transform: rotate(90deg);
    left: 0rem;
  }
  .dot-school .high-school {
    width: 105rem;
    height: 40rem;
    top: 40rem;
    left: -77rem;
    border: 1rem solid var(--main-color);
    border-radius: 25px;
    box-shadow: 0 0 25px var(--main-color);
    padding: 5rem;
    padding-top: 2.5rem;
    transform: rotate(90deg);
  }
  /* hover  */
  .high-school:hover {
    transform: scale(1.09) translateY(-1rem);
    box-shadow: 0 0 15px var(--main-color), 0 0 30px var(--main-color),
      0 0 45px var(--main-color);
    transform: rotate(90deg);
  }
  .place-name-of-school {
    top: 1rem;
    left: 0rem;
    margin-bottom: 2.5rem;
    border-radius: 50px;
    border: 0.5rem solid var(--main-color);
    font-size: 5.5rem;
  }
  .high-school p {
    font-size: 3.5rem;
  }
  .edu-timeline .dot-university {
    width: 2.5rem;
    height: 2.5rem;
    right: 5rem;
  }
  .dot-university h3 {
    position: relative;
    top: 2.5rem;
    right: 0%;
    font-size: 5rem;
    transform: rotate(90deg);
  }
  .dot-university .university {
    width: 105rem;
    height: 40rem;
    top: 40rem;
    right: -25.5rem;
    border: 1rem solid var(--main-color);
    border-radius: 25px;
    box-shadow: 0 0 25px var(--main-color);
    padding: 5rem;
    padding-top: 2.5rem;
    transform: rotate(90deg);
  }
  /* HOVER  */
  .university:hover {
    transform: scale(1.09) translateY(1rem);
    transition: transform 0.5s, box-shadow 0.5s;
    box-shadow: 0 0 15px var(--main-color), 0 0 30px var(--main-color),
      0 0 45px var(--main-color);
    transform: rotate(90deg);
  }
  .place-name-of-university {
    top: 1rem;
    left: 0rem;
    margin-bottom: 2.5rem;
    border-radius: 50px;
    border: 0.5rem solid var(--main-color);
    font-size: 5.5rem;
  }
  .university p {
    font-size: 3.5rem;
  }
  /* EDUCATION SECTION END  */

  /* SKILLS SECTION START */
  .skills {
    height: calc(100svh - 20rem);
    top: 20rem;
    font-size: 4rem;
  }
  .skills h2 span {
    color: var(--main-color);
  }
  .skills h2 {
    font-size: 7.5rem;
    height: 10%;
  }
  .tech-skills {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 50%;
    height: 100%;
  }
  .tech-skills h3 {
    font-size: 5rem;
    height: 5%;
  }
  .tech-skills-list {
    grid-template-columns: 10rem 1fr 10rem;
    margin-bottom: 0%;
    grid-template-rows: repeat(9, 1fr);
  }
  .tech-skills-list li p {
    font-size: 4rem;
  }
  .tech-skills-list li .bx {
    font-size: 8rem;
  }
  /* <!-- html bar --> */
  .html-bar {
    box-shadow: 0 0 12.5px var(--main-color);
  }
  /* <!-- css-bar --> */
  .css-bar {
    box-shadow: 0 0 12.5px var(--main-color);
  }
  /* <!-- js-bar --> */
  .js-bar {
    box-shadow: 0 0 12.5px var(--main-color);
  }
  /* <!-- react-bar --> */
  .react-bar {
    box-shadow: 0 0 12.5px var(--main-color);
  }
  /* <!-- nodejs-bar --> */
  .nodejs-bar {
    box-shadow: 0 0 12.5px var(--main-color);
  }
  /* <!-- python-bar --> */
  .python-bar {
    box-shadow: 0 0 12.5px var(--main-color);
  }
  /* <!-- django-bar --> */
  .django-bar {
    box-shadow: 0 0 12.5px var(--main-color);
  }
  /* <!-- c++ bar --> */
  .c-bar {
    box-shadow: 0 0 12.5px var(--main-color);
  }
  /* <!-- git bar --> */
  .git-bar {
    box-shadow: 0 0 12.5px var(--main-color);
  }
  .pro-skills h3 {
    font-size: 5rem;
    margin-top: 5%;
    height: 5%;
  }
  .pro-skills-list {
    width: 90%;
    height: 90%;
    margin-bottom: 0%;
    display: flex;
    align-items: center;
    justify-content: start;
    flex-direction: column;
    row-gap: 5%;
    margin-top: 30%;
  }
  .progressbar {
    border: 5rem solid var(--main-color);
  }
  div[role="progressbar"] {
    --size: 40rem;
    box-shadow: 0 0 25px var(--main-color);
    border: 0.5rem;
  }
  .pro-skills-list h3 {
    font-size: 4rem;
  }
  .mid-man {
    box-shadow: 0 0 25px var(--main-color) inset;
    border: 0.5rem solid var(--main-color);
  }
  .back-man {
    box-shadow: 0 0 25px var(--main-color);
    border: 0.75rem solid var(--main-color);
  }
  /* SKILLS SECTION END */
  /* SERVICES SECTION START  */
  .services {
    height: calc(100svh - 20rem);
    top: 20rem;
    font-size: 4rem;
  }
  .services h2 {
    font-size: 7.5rem;
    margin-bottom: 2.5%;
  }
  .services-container {
    width: 85%;
    height: 80%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    column-gap: 8%;
    row-gap: 1%;
  }
  .service-cards {
    border: 1rem solid var(--main-color);
    box-shadow: 0 0 12.5px var(--main-color);
    border-radius: 15px;
    padding: 1rem 2.5rem;
    height: 45%;
    width: 40%;
    overflow-y: scroll;
    scroll-behavior: smooth;
    scrollbar-width: thin;
    scrollbar-color: rgba(0, 0, 0, 0) rgba(0, 0, 0, 0);
  }
  .service-cards:hover {
    box-shadow: 0 0 25px var(--main-color), 0 0 30px var(--main-color),
      0 0 42.5px var(--main-color);
  }
  .service-cards h3 {
    font-size: 4rem;
    margin-bottom: 1rem;
  }
  .service-cards i {
    font-size: 7.5rem;
  }
  .service-cards p {
    font-size: 3rem;
  }
  .service-card-1 {
    padding: 1rem 2.5rem;
  }
  .service-card-1 h3 {
    font-size: 4rem;
  }
  /* SERVICES SECTION END */
  /* CONTACT SECTION START */
  .contact {
    height: calc(100svh - 20rem);
    top: 20rem;
    font-size: 4rem;
  }
  .contact h2 {
    font-size: 7.5rem;
  }
  .contact-form input:first-child {
    margin-top: 10%;
  }

  .contact-form input {
    font-size: 3.5rem;
    padding-left: 5rem;
    line-height: 5rem;
    border-radius: 50px;
    border: 0.5rem solid var(--main-color);
    box-shadow: 0 0 12.5px var(--main-color);
  }
  /* hover  */
  .contact-form input:hover {
    box-shadow: 0 0 12.5px var(--main-color), 0 0 25px var(--main-color),
      0 0 37.5px var(--main-color);
  }
  .input-group-1 {
    width: 50%;
    height: 100%;
    display: flex;
    justify-content: start;
    align-items: center;
    flex-direction: column;
    row-gap: 5%;
    margin-top: 13rem;
  }
  .input-group-2 {
    width: 50%;
    height: 100%;
    display: flex;
    justify-content: start;
    align-items: center;
    flex-direction: column;

    row-gap: 5%;
  }
  .contact-form textarea {
    font-size: 3rem;
    padding-left: 5rem;
    padding-top: 5rem;
    line-height: 4rem;
    border-radius: 50px;
    border: 0.5rem solid var(--main-color);
    box-shadow: 0 0 12.5px var(--main-color);
    margin-top: 10%;
  }
  .contact-form textarea:hover {
    box-shadow: 0 0 12.5px var(--main-color), 0 0 25px var(--main-color),
      0 0 37.5px var(--main-color);
  }
  #submit-btn {
    font-size: 4rem;
    background-color: var(--main-color);
    padding: 0rem;
  }
  #reset-btn {
    font-size: 4rem;
    color: var(--main-color);
    padding: 0rem;
  }
  /* CONTACT SECTION END */

  /* page switching animations */
  /* 1 */
  @keyframes right-door-1 {
    0% {
      right: -125%;
      transform: skewX(15deg);
    }
    40% {
      right: -50%;
      transform: skewX(15deg);
    }
    60% {
      right: -50%;
      transform: skewX(-15deg);
    }
    100% {
      right: -125%;
      transform: skewX(-15deg);
    }
  }
  @keyframes left-door-1 {
    0% {
      left: -125%;
      transform: skewX(15deg);
    }
    40% {
      left: -50%;
      transform: skewX(15deg);
    }
    60% {
      left: -50%;
      transform: skewX(-15deg);
    }
    100% {
      left: -125%;
      transform: skewX(-15deg);
    }
  }
  /* 2 */
  @keyframes right-door-2 {
    0% {
      right: -125%;
      transform: skewX(15deg);
    }
    40% {
      right: -50%;
      transform: skewX(15deg);
    }
    60% {
      right: -50%;
      transform: skewX(-15deg);
    }
    100% {
      right: -125%;
      transform: skewX(-15deg);
    }
  }
  @keyframes left-door-2 {
    0% {
      left: -125%;
      transform: skewX(15deg);
    }
    40% {
      left: -50%;
      transform: skewX(15deg);
    }
    60% {
      left: -50%;
      transform: skewX(-15deg);
    }
    100% {
      left: -125%;
      transform: skewX(-15deg);
    }
  }
  /* 3 */
  @keyframes right-door-3 {
    0% {
      right: -125%;
      transform: skewX(15deg);
    }
    40% {
      right: -50%;
      transform: skewX(15deg);
    }
    60% {
      right: -50%;
      transform: skewX(-15deg);
    }
    100% {
      right: -125%;
      transform: skewX(-15deg);
    }
  }
  @keyframes left-door-3 {
    0% {
      left: -125%;
      transform: skewX(15deg);
    }
    40% {
      left: -50%;
      transform: skewX(15deg);
    }
    60% {
      left: -50%;
      transform: skewX(-15deg);
    }
    100% {
      left: -125%;
      transform: skewX(-15deg);
    }
  }
  /* 4 */
  @keyframes right-door-4 {
    0% {
      right: -125%;
      transform: skewX(15deg);
    }
    40% {
      right: -50%;
      transform: skewX(15deg);
    }
    60% {
      right: -50%;
      transform: skewX(-15deg);
    }
    100% {
      right: -125%;
      transform: skewX(-15deg);
    }
  }
  @keyframes left-door-4 {
    0% {
      left: -125%;
      transform: skewX(15deg);
    }
    40% {
      left: -50%;
      transform: skewX(15deg);
    }
    60% {
      left: -50%;
      transform: skewX(-15deg);
    }
    100% {
      left: -125%;
      transform: skewX(-15deg);
    }
  }
  /* 5 */
  @keyframes right-door-5 {
    0% {
      right: -125%;
      transform: skewX(15deg);
    }
    40% {
      right: -50%;
      transform: skewX(15deg);
    }
    60% {
      right: -50%;
      transform: skewX(-15deg);
    }
    100% {
      right: -125%;
      transform: skewX(-15deg);
    }
  }
  @keyframes left-door-5 {
    0% {
      left: -125%;
      transform: skewX(15deg);
    }
    40% {
      left: -50%;
      transform: skewX(15deg);
    }
    60% {
      left: -50%;
      transform: skewX(-15deg);
    }
    100% {
      left: -125%;
      transform: skewX(-15deg);
    }
  }
  /* 6 */
  @keyframes right-door-6 {
    0% {
      right: -125%;
      transform: skewX(15deg);
    }
    40% {
      right: -50%;
      transform: skewX(15deg);
    }
    60% {
      right: -50%;
      transform: skewX(-15deg);
    }
    100% {
      right: -125%;
      transform: skewX(-15deg);
    }
  }
  @keyframes left-door-6 {
    0% {
      left: -125%;
      transform: skewX(15deg);
    }
    40% {
      left: -50%;
      transform: skewX(15deg);
    }
    60% {
      left: -50%;
      transform: skewX(-15deg);
    }
    100% {
      left: -125%;
      transform: skewX(-15deg);
    }
  }
  /* 7 */
  @keyframes right-door-7 {
    0% {
      right: -125%;
      transform: skewX(15deg);
    }
    40% {
      right: -50%;
      transform: skewX(15deg);
    }
    60% {
      right: -50%;
      transform: skewX(-15deg);
    }
    100% {
      right: -125%;
      transform: skewX(-15deg);
    }
  }
  @keyframes left-door-7 {
    0% {
      left: -125%;
      transform: skewX(15deg);
    }
    40% {
      left: -50%;
      transform: skewX(15deg);
    }
    60% {
      left: -50%;
      transform: skewX(-15deg);
    }
    100% {
      left: -125%;
      transform: skewX(-15deg);
    }
  }
  /* 8 */
  @keyframes right-door-8 {
    0% {
      right: -125%;
      transform: skewX(15deg);
    }
    40% {
      right: -50%;
      transform: skewX(15deg);
    }
    60% {
      right: -50%;
      transform: skewX(-15deg);
    }
    100% {
      right: -125%;
      transform: skewX(-15deg);
    }
  }
  @keyframes left-door-8 {
    0% {
      left: -125%;
      transform: skewX(15deg);
    }
    40% {
      left: -50%;
      transform: skewX(15deg);
    }
    60% {
      left: -50%;
      transform: skewX(-15deg);
    }
    100% {
      left: -125%;
      transform: skewX(-15deg);
    }
  }
  /* 9 */
  @keyframes right-door-9 {
    0% {
      right: -125%;
      transform: skewX(15deg);
    }
    40% {
      right: -50%;
      transform: skewX(15deg);
    }
    60% {
      right: -50%;
      transform: skewX(-15deg);
    }
    100% {
      right: -125%;
      transform: skewX(-15deg);
    }
  }
  @keyframes left-door-9 {
    0% {
      left: -125%;
      transform: skewX(15deg);
    }
    40% {
      left: -50%;
      transform: skewX(15deg);
    }
    60% {
      left: -50%;
      transform: skewX(-15deg);
    }
    100% {
      left: -125%;
      transform: skewX(-15deg);
    }
  }
  /* 10 */
  @keyframes right-door-10 {
    0% {
      right: -125%;
      transform: skewX(15deg);
    }
    40% {
      right: -50%;
      transform: skewX(15deg);
    }
    60% {
      right: -50%;
      transform: skewX(-15deg);
    }
    100% {
      right: -125%;
      transform: skewX(-15deg);
    }
  }
  @keyframes left-door-10 {
    0% {
      left: -125%;
      transform: skewX(15deg);
    }
    40% {
      left: -50%;
      transform: skewX(15deg);
    }
    60% {
      left: -50%;
      transform: skewX(-15deg);
    }
    100% {
      left: -125%;
      transform: skewX(-15deg);
    }
  }
}
/* 768 DESIGN COMPLETE */
@media (max-width: 768px) {
    /* EDUCATION SECTION START  */
    .education {
      position: relative;
      width: 100%;
      height: calc(100svh - 20rem);
      top: 20rem;
      font-size: 4rem;
      background-color: var(--first-bg-color);
    }
    .education .edu-timeline {
      position: absolute;
      width: 1rem;
      height:calc(100vh - 30rem);
      box-shadow: 0 0 25px var(--main-color);
      transform: rotate(0deg);
      bottom: 2rem;
      top: 8rem;
      left: 8rem;
    }
    .edu-timeline .dot-school {
      width: 2.5rem;
      height: 2.5rem;
      left: .5rem;
      top: calc(50vh  20rem);
    }
    .dot-school h3 {
      top: 2.5rem;
      font-size: 5rem;
      transform: rotate(0deg);
      left: 5rem;
    }
    .dot-school .high-school {
      width: 105rem;
      height: 40rem;
      border: 0.5rem solid var(--main-color);
      border-radius: 25px;
      box-shadow: 0 0 25px var(--main-color);
      padding: 5rem;
      padding-top: 2.5rem;
      transform: rotate(0deg);
      left: 10rem;
      top: 12.5rem;
    }
    /* hover  */
    .high-school:hover {
      transform: scale(1.09) translateY(-1rem);
      box-shadow: 0 0 15px var(--main-color), 0 0 30px var(--main-color),
        0 0 45px var(--main-color);
        transform: rotate(0deg);
    }
    .place-name-of-school {
      top: 1rem;
      left: 0rem;
      margin-bottom: 2.5rem;
      border-radius: 50px;
      border: 0.25rem solid var(--main-color);
    }
    .high-school p {
      font-size: 2.5rem;
    }
    .edu-timeline .dot-university {
      width: 2.5rem;
      height: 2.5rem;
      right: 0rem;
      left:0.5rem;
      top: 5rem;
    }
    .dot-university h3 {
      position: relative;
      top: 2.5rem;
      right: 0;
      font-size: 5rem;
      transform: rotate(0deg);
      left: 5rem;
    }
    .dot-university .university {
      width: 105rem;
      height: 40rem;
      border: 0.5rem solid var(--main-color);
      border-radius: 25px;
      box-shadow: 0 0 25px var(--main-color);
      padding: 5rem;
      padding-top: 2.5rem;
      transform: rotate(0deg);
      left: 10rem;
      top: 12.5rem;
    }
    /* HOVER  */
    .university:hover {
      transform: scale(1.09) translateY(1rem);
      transition: transform 0.5s, box-shadow 0.5s;
      box-shadow: 0 0 15px var(--main-color), 0 0 30px var(--main-color),
        0 0 45px var(--main-color);
    }
    .place-name-of-university {
      top: 1rem;
      left: 0rem;
      margin-bottom: 2.5rem;
      border-radius: 50px;
      border: 0.25rem solid var(--main-color);
    }
    .university p {
      font-size: 2.5rem;
    }
    /* EDUCATION SECTION END  */
  
}
/* animation for menubar */
@keyframes menuBabAnimation-1 {
  from {
    opacity: 1;
    top: 8rem;
  }
  to {
    opacity: 0;
    top: -75rem;
  }
}
@keyframes menuBabAnimation-2 {
  from {
    opacity: 0;
    top: -75rem;
  }
  to {
    opacity: 1;
    top: 8rem;
  }
}