/*=============== GOOGLE FONTS ===============*/
  @import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&display=swap");

  /*=============== VARIABLES CSS ===============*/
  :root {
    --header-height: 3.5rem;

    /*========== Colors ==========*/
    /*Color mode HSL(hue, saturation, lightness)*/
    /*   
          Purple: hsl(250, 66%, 75%)
          Blue: hsl(207, 90%, 72%)
          Pink: hsl(356, 66%, 75%)
          Teal: hsl(174, 63%, 62%)
          orange: hsl(14, 97%, 64%) ...............#e69050
    */
    --first-hue: 250;
    --sat: 66%;
    --lig: 75%;
    --second-hue: 219;
    --first-color: hsl(var(--first-hue), var(--sat), var(--lig));
    --first-color-alt: hsl(var(--first-hue), var(--sat), 71%); /* -4% */
    --title-color: hsl(var(--second-hue), 15%, 95%);
    --text-color: hsl(var(--second-hue), 8%, 75%);
    --text-color-light: hsl(var(--second-hue), 4%, 55%);
    --body-color: hsl(var(--second-hue), 48%, 8%);
    --container-color: hsl(var(--second-hue), 32%, 12%);

    /*========== Font and typography ==========*/
    /*.5rem = 8px | 1rem = 16px ...*/
    --body-font: "Poppins", sans-serif;
    --biggest-font-size: 1.75rem;
    --h1-font-size: 1.5rem;
    --h2-font-size: 1.25rem;
    --h3-font-size: 1rem;
    --normal-font-size: 0.938rem;
    --small-font-size: 0.813rem;
    --smaller-font-size: 0.75rem;
    --tiny-font-size: 0.625rem;

    /*========== Font weight ==========*/
    --font-medium: 500;
    --font-semibold: 600;

    /*========== z index ==========*/
    --z-tooltip: 10;
    --z-fixed: 100;
    --z-modal: 1000;
  }

  /* Responsive typography */
  @media screen and (min-width: 968px) {
    :root {
      --biggest-font-size: 2.5rem;
      --h1-font-size: 2.25rem;
      --h2-font-size: 1.5rem;
      --h3-font-size: 1.25rem;
      --normal-font-size: 1rem;
      --small-font-size: 0.875rem;
      --smaller-font-size: 0.813rem;
    }
  }

  /*=============== BASE ===============*/
  * {
    box-sizing: border-box;
    padding: 0;
    margin: 0;
  }

  html {
    scroll-behavior: smooth;
  }

  body,
  button,
  input,
  textarea {
    font-family: var(--body-font);
    font-size: var(--normal-font-size);
  }

  body {
    background-color: var(--body-color);
    color: var(--text-color);
    transition: 0.4s; /* for light mode animation */
  }

  h1,
  h2,
  h3 {
    color: var(--title-color);
    font-weight: var(--font-semibold);
  }

  ul {
    list-style: none;
  }

  a {
    text-decoration: none;
  }

  button {
    cursor: pointer;
    border: none;
    outline: none;
  }

  img {
    max-width: 100%;
    height: auto;
  }

  /*=============== THEME ===============*/
  .change__theme {
    font-size: 1.25rem;
    cursor: pointer;
    transition: 0.3s;
  }

  .change__theme:hover {
    color: var(--first-color);
  }

  /*========== Variables light theme ==========*/
  body.light-theme {
    --title-color: hsl(var(--second-hue), 15%, 15%);
    --text-color: hsl(var(--second-hue), 8%, 35%);
    --body-color: hsl(var(--second-hue), 100%, 99%);
    --container-color: #e9e9e9;
  }

  /*========== 
      Color changes in some parts of 
      the website, in light theme
  ==========*/
  .light-theme .scroll-header {
    box-shadow: 0 2px 4px hsla(0, 0%, 1%, 0.1);
  }

  .light-theme .about-text {
    box-shadow: 0 2px 4px hsla(0, 0%, 1%, 0.1);
  }

  .light-theme .nav__menu {
    background-color: hsla(var(--second-hue), 32%, 90%, 0.8);
  }

  .light-theme .section__subtitle {
    color: var(--text-color);
  }

  .light-theme .home__social-link {
    box-shadow: 0 2px 16px hsla(var(--second-hue), 48%, 8%, 0.1);
  }

  .light-theme .home__social-link::after,
  .light-theme .footer__social-link {
    background-color: var(--title-color);
  }

  .light-theme .home__social-link,
  .light-theme .home__scroll,
  .light-theme .button,
  .light-theme .button:hover,
  .light-theme .active-work,
  .light-theme .footer__title,
  .light-theme .footer__link,
  .light-theme .footer__copy {
    color: var(--title-color);
  }

  .light-theme .about__box {
    box-shadow: 0 2px 16px hsla(var(--second-hue), 48%, 8%, 0.1);
  }

  .light-theme .button,
  .light-theme .skills__content,
  .light-theme .services__card,
  .light-theme .work__card,
  .light-theme .testimonial__card,
  .light-theme .contact__card,
  .light-theme .contact__form-div {
    box-shadow: 0 2px 16px hsla(var(--second-hue), 48%, 8%, 0.1);
  }

  .light-theme p {
    color: var(--text-color);
  }
  .light-theme #p {
    color: var(--text-color);
  }

  .light-theme::-webkit-scrollbar {
    background-color: hsl(var(--second-hue), 8%, 80%);
  }
  /*=============== REUSABLE CSS CLASSES ===============*/
  .container {
    max-width: 968px;
    margin-left: 1rem;
    margin-right: 1rem;
  }
  .grid {
    display: grid;
    gap: 1.25rem;
  }

  .main {
    overflow: hidden;
  }

  .section {
    padding: 4.5rem 0 1rem;
  }

  .section__title,
  .section__subtitle {
    text-align: center;
  }

  .section__title {
    font-size: var(--h2-font-size);
    color: var(--first-color);
    margin-bottom: 2rem;
  }

  .section__subtitle {
    display: block;
    font-size: var(--smaller-font-size);
    color: var(--text-color-light);
  }

  /*=============== HEADER & NAV===============*/
  .header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    /* height: var(--header-height); */
    background-color: var(--body-color);
    z-index: var(--z-fixed);
    transition: 0.4s;
  }

  .nav {
    height: var(--header-height);
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .nav__logo {
    color: var(--first-color);
    font-weight: var(--font-medium);
    transition: 0.4s;
  }

  .nav__logo:hover {
    color: var(--first-color-alt);
  }

  .nav__menu {
    position: fixed;
    bottom: 1rem;
    background-color: hsla(var(--second-hue), 32%, 16%, 0.8);
    width: 90%;
    border-radius: 4rem;
    padding: 1rem 2.25rem;
    backdrop-filter: blur(10px);
    transition: 0.4s;
  }

  .nav__list {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .nav__link {
    color: var(--text-color);
    font-size: 1.25rem;
    padding: 0.4rem;
    font-weight: var(--font-medium);
    text-decoration: none;
    transition: 0.4s;
    display: flex;
    border-radius: 5rem;
  }

  /* Active link */
  .active-link {
    background: linear-gradient(
      180deg,
      hsla(var(--first-hue), var(--sat), var(--lig), 0.5),
      hsla(var(--first-hue), var(--sat), var(--lig), 0.2)
    );
    box-shadow: 0 0 16px hsla(var(--first-hue), var(--sat), var(--lig), 0.4);
    border-radius: 5rem;

    color: var(--title-color);
  }

  /* Change background header */
  .scroll-header {
    box-shadow: 0 4px 4px hsla(0, 0%, 4%, 0.3);
  }

  /*=============== HOME ===============*/
  .home__container {
    position: relative;
    row-gap: 4.5rem;
    padding-top: 2rem;
  }

  .home__data {
    text-align: center;
  }

  .home__greeting,
  .home__education {
    font-size: var(--small-font-size);
    font-weight: var(--font-medium);
  }

  .home__greeting {
    display: block;
    color: var(--title-color);
    margin-bottom: 0.25rem;
  }

  .home__education {
    color: var(--text-color);
    margin-bottom: 2.5rem;
  }

  .home__name {
    font-size: var(--biggest-font-size);
    color: var(--first-color);
  }

  .home__img {
    width: 198px;
  }

  .home__handle {
    justify-self: center;  
    width: 290px;
    height: 390px;
    background: linear-gradient(
      180deg,
      hsla(var(--first-hue), var(--sat), var(--lig), 0.5),
      hsla(var(--first-hue), var(--sat), var(--lig), 0.1)
    );

    border-radius: 10rem 10rem 1rem 1rem;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    overflow: hidden;
  }

  .home__button {
    display: flex;
    justify-content: center ;
    align-items: center;
    gap: 1rem;
  }

  .home__social,
  .home__scroll {
    position: absolute;
  }

  .home__social {
    bottom: 4rem;
    left: 0;
    display: grid;
    row-gap: 0.5rem;
  }

  .home__social-link {
    width: max-content;
    background-color: var(--container-color);
    color: var(--first-color);
    padding: 0.25rem;
    border-radius: 0.5rem;
    display: flex;
    font-size: 1rem;
    transition: 0.4s;
  }

  .home__social-link:hover {
    background-color: var(--first-color);
    color: #ffffff;
  }

  .home__social::after {
    content: "";
    width: 32px;
    height: 1px;
    background-color: var(--first-color);
    transform: rotate(90deg) translate(16px, 4px);
  }

  .home__scroll {
    color: var(--first-color);
    right: -1.5rem;
    bottom: 4rem;
    display: grid;
    row-gap: 2.25rem;
    justify-items: center;
  }

  .home__scroll-icon {
    font-size: 1.25rem;
  }

  .home__scroll-name {
    font-size: var(--smaller-font-size);
    transform: rotate(-90deg);
  }

  /*=============== BUTTONS ===============*/
  .button {
    display: inline-block;
    background-color: var(--first-color);
    color: var(--body-color);
    padding: 0.75rem 1rem;
    border-radius: 0.8rem;
    font-weight: var(--font-medium);
    transition: 0.4s;
  }

  .button:hover {
    background-color: var(--first-color-alt);
    color: var(--body-color);
  }

  .button--ghost {
    background-color: transparent;
    color: var(--first-color);
    border: 1px solid var(--first-color);
  }

  /*=============== ABOUT ===============*/
  .about{
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    align-items: center;
    gap: 1.5rem;
  }
  .about-img img{
    padding-bottom: 10%;
    margin-top: 15%;
    margin-left: 40%;
    max-width: 300px;
    height: auto;
    width: 100%;
    border-radius: 8px;
  }
  .about-text h2{
    font-size: 60px;
    padding-top: 40px;
  }
  .about-text h2 span{
    color: #0ef;
  }
  .about-text h4{
    font-size: 29px;
    font-weight: 600;
    color: #fff;
    line-height: 1.7;
    margin: 15px 0 30px;
  }
  .about-text p{
    color: aliceblue;
    font-size: 18px;
    line-height: 1.4;
    margin-bottom: 4rem;
    margin-right: 3.8rem;
    line-height: 30px;
  }

  /*=============== SKILLS ===============*/
  #m{
    display: flex;
    flex-wrap: wrap;
  }
  .container1{
    width: 600px;
    height: auto;
    margin-left: 120px;
    padding-bottom: 0%;
  }
  .heading1{
    text-align: center;
    text-decoration: underline;
    text-underline-offset: 10px;
    text-decoration-thickness: 5px;
    margin-bottom: 50px;
  }
  #skills
  {
    display: flex;
    flex-wrap: wrap;
  }
  .bar{
    font-size: 23px;
  }
  .Technical-bars .bar{
    margin-top: 40px 0;
  }
  .Technical-bars .bar:first-child{
    margin-top: 0;
  }
  .Technical-bars .bar:last-child{
    margin-bottom: 0;
  }
  .Technical-bars .bar .info{
    margin-bottom: 5px;
  }
  .Technical-bars .bar .info span{
    font-size: 17px;
    font-weight: 500;
    animation: showText 0.5s 1s linear forwards;
    opacity: 0;
  }
  .Technical-bars .bar .progress-line{
    position: relative;
    border-radius: 10px;
    width: 100%;
    height: 5px;
    background-color: #000000;
    animation: animate 1s cubic-bezier(1,0,0.5,1) forwards;
    transform: scaleX(0);
    transform-origin: left;
  }
  @keyframes animate{
    100%{
        transform: scaleX(1);
    }
  }
  .Technical-bars .bar .progress-line span{
    height: 100%;
    background-color: #0ef;
    position: absolute;
    border-radius: 10px;
    animation: animate 1s 1s cubic-bezier(1,0,0.5,1) forwards;
    transform: scaleX(0);
    transform-origin: left;
  }
  .progress-line.html span{
    width: 98%;
  }
  .progress-line.css span{
    width: 80%;
  }
  .progress-line.javascript span{
    width: 65%;
  }
  .progress-line.python span{
    width: 50%;
  }
  .progress-line.react span{
    width: 20%;
  }
  .progress-line span::after{
    position: absolute;
    padding: 1px 8px;
    background-color: #000;
    color: #fff;
    font-size: 12px;
    border-radius: 3px;
    top: -28px;
    right: -28px;
    animation: showText 0.5s 1s linear forwards;
    opacity: 0;
  }
  .progress-line.html span::after{
    content: "98%";
  }
  .progress-line.css span::after{
    content: "80%";
  }
  .progress-line.javascript span::after{
    content: "65%";
  }
  .progress-line.python span::after{
    content: "64%";
  }
  .progress-line.react span::after{
    content: "21%";
  }
  .progress-line span::after{
    content: "";
    position: absolute;
    width: 0;
    height: 0;
    border: 0px solid transparent;
    border-bottom-width: 0px;
    border-right-width: 0px;
    border-top-color: #000;
    top: 10px;
    right: 0;
    animation: showText 0.5s 1s linear forwards;
    opacity: 0;
  }
  @keyframes showText{
    100%{
        opacity: 1;
    }
  }
  .radial-bars{
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
    align-items: flex-start;
  }
  .radial-bars .radial-bar{
    width: 50%;
    height: 170px;
    margin-bottom: 10px;
    position: relative;
  }
  .radial-bars .radial-bar svg{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(-90deg);
    width: 120px;
    height: 160px;
  }
  .radial-bars .radial-bar .progress-bar{
    stroke-width: 10;
    stop-color: black;
    fill: transparent;
    stroke-dasharray: 502;
    stroke-dashoffset: 502;
    stroke-linecap: round;
    animation: animate-bar 1s linear forwards;
  }
  @keyframes animate-bar{
    100%{
        stroke-dashoffset: -1;
    }
  }
  .path{
    stroke-width: 10;
    stroke: #0ef;
    fill: transparent;
    stroke-dasharray: 502;
    stroke-dashoffset: 502;
    stroke-linecap: round;
  }

  .path-1{animation: animate-path1 1s 1s linear forwards}
  .path-2{animation: animate-path2 1s 1s linear forwards}
  .path-3{animation: animate-path3 1s 1s linear forwards}
  .path-4{animation: animate-path4 1s 1s linear forwards}
  @keyframes animate-path1{
    100%{
        stroke-dashoffset: 50%;
    }
  }
  @keyframes animate-path2{
    100%{
        stroke-dashoffset: 100%;
    }
  }
  @keyframes animate-path3{
    100%{
        stroke-dashoffset: 90%;
    }
  }
  @keyframes animate-path4{
    100%{
        stroke-dashoffset: 30%;
    }
  }
  .radial-bar .percentage{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 17px;
    font-weight: 500;
    animation: showText 0.5s 1s linear forwards;
    opacity: 0;
  }
  .radial-bar .text{
    width: 100%;
    position: absolute;
    text-align: center;
    left: 50%;
    bottom: -5px;
    transform: translateX(-50px);
    font-size: 17px;
    font-weight: 500;
    animation: shoeText 0.5s 1s linear forwards;
    opacity: 0;
  }
  /*=============== SERVICES ===============*/
  #services{
    color: aliceblue;
    font-size: 20px;
    line-height: 1.4;
    margin-bottom: 4rem;
    margin-left: 2%;
    margin-right: 2%;
  }
  .sub-title{
    text-align: center;
    font-size: 60px;
    padding-bottom: none;
  }
  .sub-title span{
    color: #0ef;
  }
  .services-list{
    display: grid;
    grid-template-columns: repeat(auto-fit,minmax(259px,1fr));
    grid-gap: 40px;
    margin-top: 10px;
  }
  .services-list div{
    background-color: transparent;
    padding: 40px;
    font-size: 13px;
    font-weight: 13px;
    border-radius: 20px;
    border-right: 10px;
    transition: background .5s, transform .5s;
    box-shadow: 1px 1px 20px #012290f7,
    1px 1px 40px #0053b8f7;
  }
  .services-list div i{
    font-size: 50px;
    margin-bottom: 30px;
  }
  .services-list div h2{
    font-size: 30px;
    font-weight: 500;
    margin-bottom: 15px;
  }
  .services-list div a{
    text-decoration: none;
    color: #000000;
    font-size: 12px;
    margin-top: 30px;
    display: inline-block;
  }
  .read{
    display: inline-block;
    padding: 12px 28px;
    background: #0ef;
    border-radius: 40px;
    font-size: 16px;
    color: #081b29;
    letter-spacing: 1px;
    text-decoration: none;
    font-weight: 600;
    opacity: 0;
    animation: slideTop 1s ease forwards;
    animation-delay: 2s;
    box-shadow: 0 0 5px #0ef,0 0 25px #0ef;
  }
  .read:hover{
    box-shadow: 0 0 5px cyan,
    0 0  25px cyan, 0 0 45px cyan;
  }
  .services-list div:hover{
    transform: translateY(-10px);
  }
  /*Active modal*/

  .active-modal {
    visibility: visible;
    opacity: 1;
  }

  /*=============== project ===============*/


  @import url('https://fonts.googleapis.com/css?family=Fira+Sans:400,500,600,700,800');
  * {
    box-sizing: border-box;
  }
  .main-text{
    margin-top: 100px;
  }
  #portfolio{
    width: 100%;
  }
  .main-text h2{
    font-size: 60px;
    line-height: 1;
    text-align: center;
  }
  .main-text h2 span{
    color: #0ef;
  }
  .project {
    min-height: 80vh;
    font-family: 'Fira Sans', sans-serif;
    display: flex;
  }
  .blog-slider {
    width: 95%;
    position: relative;
    max-width: 800px;
    margin: auto;
    background:linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    box-shadow: 0px 14px 80px rgba(34, 35, 58, 0.2);
    padding: 25px;
    border-radius: 25px;
    height: 400px;
    transition: all 0.3s;
  }
  @media screen and (max-width: 992px) {
    .blog-slider {
      max-width: 680px;
      height: 400px;
    }
  }
  @media screen and (max-width: 768px) {
    .blog-slider {
      min-height: 500px;
      height: auto;
      margin: 180px auto;
    }
  }
  @media screen and (max-height: 500px) and (min-width: 992px) {
    .blog-slider {
      height: 350px;
    }
  }
  .blog-slider__item {
    display: flex;
    align-items: center;
  }
  @media screen and (max-width: 768px) {
    .blog-slider__item {
      flex-direction: column;
    }
  }
  .blog-slider__item.swiper-slide-active .blog-slider__img img {
    opacity: 1;
    transition-delay: 0.3s;
  }
  .blog-slider__item.swiper-slide-active .blog-slider__content > * {
    opacity: 1;
    transform: none;
  }
  .blog-slider__item.swiper-slide-active .blog-slider__content > *:nth-child(1) {
    transition-delay: none;
  }
  .blog-slider__item.swiper-slide-active .blog-slider__content > *:nth-child(2) {
    transition-delay: none;
  }
  .blog-slider__item.swiper-slide-active .blog-slider__content > *:nth-child(3) {
    transition-delay: none;
  }
  .blog-slider__item.swiper-slide-active .blog-slider__content > *:nth-child(4) {
    transition-delay: none;
  }
  .blog-slider__item.swiper-slide-active .blog-slider__content > *:nth-child(5) {
    transition-delay: none;
  }
  .blog-slider__item.swiper-slide-active .blog-slider__content > *:nth-child(6) {
    transition-delay: none;
  }
  .blog-slider__item.swiper-slide-active .blog-slider__content > *:nth-child(7) {
    transition-delay: none;
  }
  .blog-slider__item.swiper-slide-active .blog-slider__content > *:nth-child(8) {
    transition-delay: none;
  }
  .blog-slider__item.swiper-slide-active .blog-slider__content > *:nth-child(9) {
    transition-delay: none;
  }
  .blog-slider__item.swiper-slide-active .blog-slider__content > *:nth-child(10) {
    transition-delay: none;
  }
  .blog-slider__item.swiper-slide-active .blog-slider__content > *:nth-child(11) {
    transition-delay: none;
  }
  .blog-slider__item.swiper-slide-active .blog-slider__content > *:nth-child(12) {
    transition-delay: none;
  }
  .blog-slider__item.swiper-slide-active .blog-slider__content > *:nth-child(13) {
    transition-delay: none;
  }
  .blog-slider__item.swiper-slide-active .blog-slider__content > *:nth-child(14) {
    transition-delay: none;
  }
  .blog-slider__item.swiper-slide-active .blog-slider__content > *:nth-child(15) {
    transition-delay: none;
  }
  .blog-slider__img {
    width: 300px;
    flex-shrink: 0;
    height: 300px;
    background-image: linear-gradient(147deg, #0e0101 0%, #070101 100%);
    border-radius: 20px;
    transform: translateX(-90px);
    overflow: hidden;
  }
  .blog-slider__img:after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: linear-gradient(147deg, #0a0000 0%, #010000 100%);
    border-radius: 20px;
    opacity: 0;
  }
  .blog-slider__img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    opacity: 0;
    border-radius: 20px;
    transition: all 0.3s;
  }
  @media screen and (max-width: 768px) {
    .blog-slider__img {
      transform: translateY(-50%);
      width: 50%;
    }
  }
  @media screen and (max-width: 576px) {
    .blog-slider__img {
      width: 95%;
    }
  }
  @media screen and (max-height: 500px) and (min-width: 992px) {
    .blog-slider__img {
      height: 200px;
    }
  }
  .blog-slider__content {
    padding-right: 25px;
  }
  @media screen and (max-width: 768px) {
    .blog-slider__content {
      margin-top: -80px;
      text-align: center;
      padding: 0 30px;
    }
  }
  @media screen and (max-width: 576px) {
    .blog-slider__content {
      padding: 0;
    }
  }
  .blog-slider__content > * {
    opacity: 0;
    transform: translateY(25px);
    transition: all 0.4s;
  }
  .blog-slider__code {
    margin-bottom: 15px;
    display: block;
    font-weight: 500;
  }
  .blog-slider__title {
    font-size: 24px;
    font-weight: 700;
    color: #000000;
    margin-bottom: 20px;
  }
  .blog-slider__text {
    color: #c4bdef;
    margin-bottom: 30px;
    line-height: 1.5em;
  }
  .blog-slider__button {
    display: inline-flex;
    background:linear-gradient(135deg, #201f1f 0%, #050505 100%);
    padding: 15px 35px;
    border-radius: 50px; 
    color: #fff;
    box-shadow: 0px 14px 80px rgba(241, 189, 141, 0.4);
    text-decoration: none;
    font-weight: 500;
    justify-content: center;
    text-align: center;
    letter-spacing: 1px;
    margin: 5px;
  }
  @media screen and (max-width: 576px) {
    .blog-slider__button {
      width: 100%;
    }
  }
  .blog-slider .swiper-container-horizontal > .swiper-pagination-bullets, .blog-slider .swiper-pagination-custom, .blog-slider .swiper-pagination-fraction {
    bottom: 10px;
    left: 0;
    width: 100%;
  }
  .blog-slider__pagination {
    position: absolute;
    z-index: 21;
    right: 20px;
    width: 11px !important;
    text-align: center;
    left: auto !important;
    top: 50%;
    bottom: auto !important;
    transform: translateY(-50%);
  }
  @media screen and (max-width: 768px) {
    .blog-slider__pagination {
      transform: translateX(-50%);
      left: 50% !important;
      top: 205px;
      width: 100% !important;
      display: flex;
      justify-content: center;
      align-items: center;
    }
  }
  .blog-slider__pagination.swiper-pagination-bullets .swiper-pagination-bullet {
    margin: 8px 0;
  }
  @media screen and (max-width: 768px) {
    .blog-slider__pagination.swiper-pagination-bullets .swiper-pagination-bullet {
      margin: 0 5px;
    }
  }
  .blog-slider__pagination .swiper-pagination-bullet {
    width: 11px;
    height: 11px;
    display: block;
    border-radius: 10px;
    background: #062744;
    opacity: 0.2;
    transition: all 0.3s;
  }
  .blog-slider__pagination .swiper-pagination-bullet-active {
    opacity: 1;
    background:linear-gradient(135deg, #0f0f0f 0%, #0e0e0e 100%);
    height: 30px;
    box-shadow: 0px 0px 20px rgba(57, 56, 56, 0.3);
  }
  @media screen and (max-width: 768px) {
    .blog-slider__pagination .swiper-pagination-bullet-active {
      height: 11px;
      width: 30px;
    }
  }

  /*=============== CONTACT ===============*/
  .contact__container {
    row-gap: 3rem;
    padding-bottom: 3rem;
  }

  .contact__title {
    text-align: center;
    font-size: var(--h3-font-size);
    margin-bottom: 1.5rem;
  }

  .contact__info {
    display: grid;
    gap: 1rem;
  }

  .contact__card {
    background-color: var(--container-color);
    padding: 2rem 1rem;
    border-radius: 0.75rem;
    text-align: center;
  }

  .contact__card-icon {
    font-size: 2rem;
    color: var(--title-color);
    margin-bottom: 0.25rem;
  }

  .contact__card-title,
  .contact__card-data {
    font-size: var(--small-font-size);
  }

  .contact__card-title {
    font-weight: var(--font-medium);
  }

  .contact__card-data {
    display: block;
    margin-bottom: 0.75rem;
  }

  .contact__button {
    color: var(--first-color);
    font-size: var(--small-font-size);
    display: flex;
    align-items: center;
    justify-content: center;
    column-gap: 0.25rem;
    cursor: pointer;
  }

  .contact__button:hover .contact__button-icon {
    transform: translateX(0.25rem);
  }

  .contact__button-icon {
    font-size: 1rem;
    transition: 0.4s;
  }

  .contact__form-div {
    position: relative;
    margin-bottom: 2rem;
    height: 4rem;
  }

  .contact__form-input {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 2px solid var(--text-color-light);
    background: none;
    border-radius: 0.75rem;
    padding: 1.5rem;
    font-size: var(--normal-font-size);
    color: var(--text-color);
    outline: none;
    z-index: 1;
  }

  .contact__form-tag {
    position: absolute;
    top: -0.75rem;
    left: 1.25rem;
    font-size: var(--smaller-font-size);
    padding: 0.25rem;
    background-color: var(--body-color);
    z-index: 10;
  }

  .contact__form-area {
    height: 17rem;
  }

  .contact__form-area textarea {
    resize: none;
  }
  /*=============== FOOTER ===============*/
  .footer {
    background-color: var(--first-color);
  }

  .footer__container {
    padding: 2rem 0 6rem;
  }

  .footer__title,
  .footer__link {
    color: var(--body-color);
  }

  .footer__title {
    text-align: center;
    margin-bottom: 2rem;
  }

  .footer__list {
    display: flex;
    justify-content: center;
    align-items: center;
    column-gap: 1.5rem;
    margin-bottom: 2rem;
  }

  .footer__social {
    display: flex;
    justify-content: center;
    align-items: center;
    column-gap: 1.25rem;
  }

  .footer__social-link {
    background-color: var(--body-color);
    color: var(--first-color);
    padding: 0.35rem;
    border-radius: 0.25rem;
    font-size: 1rem;
    display: inline-flex;
  }

  .footer__copy {
    display: block;
    margin-top: 4.5rem;
    color: var(--container-color);
    text-align: center;
    font-size: var(--smaller-font-size);
    margin-bottom: 2rem;
  }

  /*=============== SCROLL BAR ===============*/
  ::-webkit-scrollbar {
    width: 0.5rem;
    border-radius: 0.5rem;
    background-color: var(--container-color);
  }

  ::-webkit-scrollbar-track {
    border-radius: 1.5rem;
  }

  ::-webkit-scrollbar-thumb {
    background-color: var(--first-color);
    border-radius: 0.5rem;
  }

  ::-webkit-scrollbar-thumb:hover {
    background-color: var(--first-color-alt);
  }

  /*=============== BREAKPOINTS ===============*/
  /* For small devices */
  @media screen and (max-width: 320px) {
    .nav__menu {
      padding: 1rem 1.5rem;
    }

    .home__button {
      flex-direction: column;
    }

    .home__handle {
      width: 169px;
      height: 230px;
    }

    .button{
      font-size: 10px;
    }
    .home__img {
      width: 90px;
    }

    .about__info {
      grid-template-columns: repeat(2, 1fr);
    }
    #about
  {
    display: flex;
    flex-wrap: wrap;

  }
  #about-img
  {
  width: none;
  }

  .radial-bars{
    margin-left: 0px;
    width: 150%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
    align-items: flex-start;
  }
  .radial-bars .radial-bar{
    width: 35%;
    position: relative;
  }
  .radial-bar .percentage{
    position: absolute;
    top: 50%;
    left: 0%;
    transform: translate(-50%, -50%);
    font-size: 19px;
    font-weight: 500;
    animation: showText 0.5s 1s linear forwards;
    opacity: 0;
  }

  .radial-bar .test
  {
    transform: translate(-50%, -50%);
    margin-top: 25%;
    font-size: 12px;
    font-weight: 500;
    animation: showText 0.5s 1s linear forwards;
    opacity: 0;
  }

  .radial-bars .radial-bar svg{
    position:relative;
    top: 50%;
    left: 0%;
    transform: translate(-50%, -50%) rotate(-90deg);
    width: 120px;
    height: 120px;
    margin-right: 10px;
  }
  .radial-bars .radial-bar .progress-bar{
    stroke-width: 10;
    stop-color: black;
    fill: transparent;
    stroke-dasharray: 502;
    stroke-dashoffset: 502;
    stroke-linecap: round;
    animation: animate-bar 1s linear forwards;
  }
  .heading1
  {
    font-size: 15px;
  }
    .skills__box {
      column-gap: 1rem;
      size: 20px;
      padding: 0%;
      margin: 0%;
    }

    .skills__name {
      font-size: var(--smaller-font-size);
    }

    .skills__level {
      font-size: var(--smaller-font-size);
    }

    .services__container {
      grid-template-columns: 145px;
      justify-content: center;
    }

    .work__item {
      font-size: var(--small-font-size);
    }

    .work__filters {
      column-gap: 0.25rem;
    }
    .about-text h2{
      font-size: 50px;
      padding-top: 20px;
    }
    .about-text h2 span{
      color: #0ef;
    }
    .about-text h4{
      font-size: 50px;
      font-weight: 60;
      color: #fff;
      line-height: 1.7;
      margin: 0px 0 30px;
    }
    .about-text p{
      color: rgb(255, 255, 255);
      font-size: 15px;
      line-height: 0px;
      margin-bottom: 1rem;
      margin-right: 0rem;
      line-height: 10px;
    }



    .certificate h2{
      font-size: 10px;
      line-height: 1;
      text-align: center;
    }
    .certificate h2 span{
      color: #0ef;
    }
    
    .swiper-container {
      width: 100%;
      height: 90%;
    }
    
    .swiper-slide {
      text-align: center;
      /* Center slide text vertically */
      display: flex;
      justify-content: center;
      align-items: center;
      margin: auto 5% auto 5%;
    }
    
    .container-general {
      margin: 0 auto;
      width: 35vw;
    }
    .container-general .gallery-wrap {
      display: flex;
      flex-direction: row;
      width: 100%;
      height: 10vh;
    }
    
    .container-general .gallery-wrap .item {
      flex: 1;
      height: 60%;
      background-position: center;
      background-size: cover;
      background-repeat: none;
      transition: all 0.8s ease;
    }


  }

  @media screen and (min-width: 435px) {
    .work__container {
      justify-content: center;
      grid-template-columns: repeat(2, max-content);
    }

    .work__img {
      width: 165px;
    }
    .about-img
    {
      margin-bottom: 0px;
      margin-left: 0%;
    }

  .certificate h2{
      font-size: 10px;
      line-height: 1;
      text-align: center;
    }
    .certificate h2 span{
      color: #0ef;
    }
    
    .swiper-container {
      width: 100%;
      height: 90%;
    }
    
    .swiper-slide {
      text-align: center;
      /* Center slide text vertically */
      display: flex;
      justify-content: center;
      align-items: center;
      margin: auto 5% auto 5%;
    }
    
    .container-general {
      margin: 0 auto;
      width: 35vw;
    }
    .container-general .gallery-wrap {
      display: flex;
      flex-direction: row;
      width: 100%;
      height: 10vh;
    }
    
    .container-general .gallery-wrap .item {
      flex: 1;
      height: 60%;
      background-position: center;
      background-size: cover;
      background-repeat: none;
      transition: all 0.8s ease;
    }



  }

  /* For medium devices */
  @media screen and (min-width: 630px) {
    .about-img
    {
      margin-bottom: none;
      margin-left: none;
    }
    .nav__menu {
      width: 328px;
      left: 0;
      right: 0;
      margin: 0 auto;
    }

    .about__info {
      grid-template-columns: repeat(3, 180px);
      justify-content: center;
    }

    .about__description {
      padding: 1rem 5rem;
      width: 600px;
      margin: 0 auto 2rem auto;
    }

    .about__box {
      padding: 1.75rem 0.95rem;
    }

    .skills__container {
      justify-content: center;
    }

    .skills__content {
      padding: 4rem 8.8rem;
    }

    .skills__title {
      font-size: var(--h3-font-size);
      margin-bottom: 0.5rem;
    }

    .skills__box {
      column-gap: 5.5rem;
    }

    .services__container {
      grid-template-columns: repeat(3, 177px);
      justify-content: center;
    }

    .services__modal-content {
      width: 500px;
      padding: 4.5rem 2.5rem 2.5rem;
    }

    .services__modal-description {
      padding: 0 3.5rem;
    }

    .work__container {
      justify-content: center;
      grid-template-columns: repeat(2, max-content);
    }

    .work__img {
      width: 250px;
    }

    .testimonial__container {
      width: 600px;
      margin: auto;
    }

    .contact__container {
      display: grid;
      grid-template-columns: 220px 340px;
      column-gap: 2rem;
      justify-content: center;
    }

    .contact__info {
      grid-template-columns: 200px;
      gap: 1rem;
    }

    .contact__form {
      width: 340px;
    }


    .certificate h2{
      font-size: 10px;
      line-height: 1;
      text-align: center;
    }
    .certificate h2 span{
      color: #0ef;
    }
    
    .swiper-container {
      width: 100%;
      height: 90%;
    }
    
    .swiper-slide {
      text-align: center;
      /* Center slide text vertically */
      display: flex;
      justify-content: center;
      align-items: center;
      margin: auto 5% auto 5%;
    }
    
    .container-general {
      margin: 0 auto;
      width: 75vw;
    }
    .container-general .gallery-wrap {
      display: flex;
      flex-direction: row;
      width: 100%;
      height: 10vh;
    }
    
    .container-general .gallery-wrap .item {
      flex: 1;
      height: 100%;
      background-position: center;
      background-size: cover;
      background-repeat: none;
      transition: all 0.8s ease;
    }



    /* .contact__info {
      grid-template-columns: 350px;
      justify-content: center;
    }

    .contact__form {
      width: 360px;
      margin: 0 auto;
    } */
  }

  /* @media screen and (min-width: 767px) {
    /* .work__container {
      grid-template-columns: repeat(2, max-content);
    } */

  /* .contact__info {
      grid-template-columns: 300px;
    }

    .contact__container {
      grid-template-columns: repeat(2, 325px);
      justify-content: center;
    }
  } */

  /* For large devices */
  @media screen and (min-width: 992px) {
    .container {
      margin-left: auto;
      margin-right: auto;
    }

    .section1 {
      padding: 6.5rem 0 1rem;
    }

    .section__title {
      margin-bottom: 3.5rem;
    }

    .nav {
      height: calc(var(--header-height) + 1rem);
    }

    .home__handle {
      width: 250px;
      height: 350px;
    }

    .home__img {
      width: 150px;
    }
    .home__social-link {
      padding: 0.4rem;
      font-size: 1.25rem;
    }

    .home__social::after {
      transform: rotate(90deg) translate(16px, -1px);
    }

    .home__scroll-icon {
      font-size: 2rem;
    }

    .about__container {
      grid-template-columns: repeat(2, 1fr);
      align-items: center;
      column-gap: 4rem;
    }

    .about__img {
      width: 350px;
    
    }

    .about__data {
      text-align: initial;
    }

    .about__info {
      justify-content: initial;
      gap: 2rem;
    }

    .about__box {
      text-align: center;
      padding: 1rem 1.25rem;
    }

    .about__description {
      padding: 0 4rem 0 0;
      margin-bottom: 2.5rem;
    }

    .skills__container {
      grid-template-columns: repeat(2, 460px);
      column-gap: 3rem;
    }

    .skills__title {
      margin-bottom: 3.5rem;
    }

    .services__container {
      grid-template-columns: repeat(3, 300px);
      column-gap: 2rem;
    }

    .services__card {
      padding: 5rem 2rem 1.5rem;
    }

    .work__container {
      grid-template-columns: repeat(3, max-content);
      gap: 3rem;
    }

    .work__card {
      padding: 1.25rem;
    }

    .work__img {
      margin-bottom: 2rem;
    }

    .work__title {
      margin-bottom: 0.5rem;
    }

    .testimonial__container {
      width: 970px;
    }

    .testimonial__card {
      padding: 1.5rem 2rem;
    }

    .contact__info {
      grid-template-columns: 430px;
      gap: 1rem;
    }

    .contact__form {
      width: 430px;
    }

    .contact__form-area {
      height: 18rem;
    }

    .contact__container {
      grid-template-columns: repeat(2, 430px);
      column-gap: 6rem;
    }

    .footer__social-link {
      font-size: 1.25rem;
      padding: 0.4rem;
      border-radius: 0.5rem;
    }
  }
  @media (max-width: 768px) 
  {
    .about-img
    {
      width: none;
      margin-bottom: 0px; 
      margin-left: 0%;
      margin-right: 100px;
      }
      .about-text h2 span{
        color: #0ef;
      }
      .about-text h4{
        font-size: 20px;
        font-weight: 60;
        color: #fff;
        line-height: 1.7;
        margin: 0px 0 30px;
      }
      .about-text p{
        color: rgb(255, 255, 255);
        margin-bottom: 1rem;
        margin-right: 0rem;
        line-height: 20px;
      }
  }

  .certificate {
    margin: 8% auto 8% auto;
  }

  .certificate h2{
    font-size: 60px;
    line-height: 1;
    text-align: center;
  }
  .certificate h2 span{
    color: #0ef;
  }

  /*              *\
    certificate
  \*              */

  .certificate-container1 {
    position: relative;
    width: 100%;
    max-width: 1200px;
    height: 600px;
    margin: 0 auto;
    perspective: 1000px;
    padding: 0 20px;
  }

  .slider1 {
    position: relative;
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
    transition: transform 0.8s ease;
  }

  .card1 {
    position: absolute;
    width: 300px;
    height: 400px;
    background:linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: 15px;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    padding: 30px;
    backface-visibility: hidden;
    transition: all 0.8s ease;
    transform-style: preserve-3d;
    left: 50%;
    top: 50%;
    margin-left: -150px;
    margin-top: -200px;
  }

  .card1 img {
    width: 100%;
    height: 180px;
    object-fit: cover;
    border-radius: 10px;
    margin-bottom: 20px;
  }

  .card1 h2 {
    font-size: 24px;
    color: #faf4f4;
    margin-bottom: 10px;
    text-align: center;
  }

  .card1 p {
    font-size: 16px;
    color: #fdf2f2;
    text-align: center;
    line-height: 1.5;
  }

  .navigation {
    position: absolute;
    bottom: 30px;
    left: 0;
    width: 100%;
    display: flex;
    justify-content: center;
    gap: 20px;
    z-index: 10;
  }

  .nav-btn {
    background: white;
    color: #764ba2;
    border: none;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
  }

  .nav-btn:hover {
    background: #764ba2;
    color: white;
    transform: translateY(-3px);
  }

  .nav-btn:active {
    transform: translateY(0);
  }

  .dots {
    position: absolute;
    bottom: 00px;
    left: 0;
    width: 100%;
    display: flex;
    justify-content: center;
    gap: 10px;
  }

  .dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.5);
    cursor: pointer;
    transition: all 0.3s ease;
  }

  .dot.active {
    background: white;
    transform: scale(1.2);
  }
  .light-theme .nav-btn{
    color: #000;
  }
  .light-theme .nav-btn:hover{
    color: white;
  }
  .light-theme .certificate-container1 .nav-btn  {
      background:linear-gradient(135deg, #667eea 0%, #764ba2 100%);
      }
  .light-theme .dot{
    background:linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  }

  @media (max-width: 768px) {
    .certificate-container1 {
      height: 500px;
    }
    
  
    .card1 {
      width: 260px;
      height: 350px;
      margin-left: -130px;
      margin-top: -175px;
      padding: 20px;
    }
    
    .card1 img {
      height: 150px;
    }
    
    .card1 h2 {
      font-size: 20px;
    }
    
    .card1 p {
      font-size: 14px;
    }
  }