.s6 {
      display: flex;
      justify-content: center;
      align-items: center;
      min-height: 100vh;
      background: #101010;
    }
    .containers {
      position: relative;
      left:20%;
      width: 900px;
      display: flex;
      justify-content: space-between;
    }
    .containers .card {
      position: relative;
      width: 250px;
      background: linear-gradient(0deg, #1b1b1b, #222, #1b1b1b);
      display: flex;
      justify-content: center;
      align-items: center;
      height: 300px;
      border-radius: 4px;
      text-align: center;
      overflow: hidden;
      transition: all .5s;
    }
    .containers .card:hover {
      transform: translateY(-10px);
      box-shadow: 0 15px 35px rgba(0, 0, 0, 0.5);
    }
    .containers .card:hover .percent .number h2 {
      color: #fff;
      font-size: 60px;
    }
    .containers .card:hover .percent .number h2 span {
      color: #fff;
    }
    .containers .card:hover .text {
      color: #fff;
    }
    .containers .card:before {
      content: "";
      position: absolute;
      top: 0;
      left: -50%;
      width: 100%;
      height: 100%;
      background: rgba(255, 255, 255, 0.03);
      pointer-events: none;
      z-index: 1;
    }
    .containers .card:nth-child(1) svg circle:nth-child(2) {
      stroke: #00ff43;
      stroke-dashoffset: calc(440 - (440 * 30) / 100);
    }
    .containers .card:nth-child(2) svg circle:nth-child(2) {
      stroke: #00a1ff;
      stroke-dashoffset: calc(440 - (440 * 80) / 100);
    }
    .containers .card:nth-child(3) svg circle:nth-child(2) {
      stroke: #ff03f7;
      stroke-dashoffset: calc(440 - (440 * 20) / 100);
    }
    .containers .card .percent {
      position: relative;
      width: 150px;
      height: 150px;
      border-radius: 50%;
      box-shadow: inset 0 0 50px #000;
      background: #222;
      z-index: 900;
    }
    .containers .card .percent .number {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      border-radius: 50%;
    }
    .containers .card .percent .number h2 {
      color: #777;
      font-weight: 700;
      font-size: 40px;
      transition: .5s;
    }
    .containers .card .percent .number h2 span {
      font-size: 24px;
      color: #777;
      transiton: .5s;
    }
    .containers .card .text {
      position: relative;
      color: #777;
      margin-top: 20px;
      font-weight: 800;
      font-size: 18px;
      text-transform: uppercase;
      letter-spacing: 1px;
      transition: .5s;
    }

    .s6 svg {
      position: relative;
      width: 150px;
      height: 150px;
      z-index: 1000;
    }
    .s6 svg circle {
      width: 100%;
      height: 100%;
      fill: none;
      stroke: #191919;
      stroke-width: 10;
      stroke-linecap: round;
      transform: translate(5px, 5px);
    }
    .s6 svg circle:nth-child(2) {
      stroke-dasharray: 440;
      stroke-dashoffset: 440;
    }

        .education{
            width:800px;
            margin:40px auto 0;
            padding:40px;
            background:#052152;
            box-sizing:border-box;
       }
       .education ul{
            margin:0;
            padding:0;
            border-left:2px solid #020c1d;
       }
       .education ul li{
            list-style:none;
       }
       .education ul li .dars{
            position:relative;
            padding:30px 20px;
       }
       .education ul li .dars:hover{
            background:#041940;
       }
       .education ul li .dars:before{
            content:";
            position:absolute;
            top:32px;
            left:-6px;
            width:12px;
            height:12px;
            background:#021434;
            border-radius:50%;
            box-shadow:inset 0 0 10px; rgba(0,0,0,1);
       }
       .education ul li .dars:after{
            content:";
            position:absolute;
            top:32px;
            left:-6px;
            width:12px;
            height:12px;
            background:#ff0;
            border-radius:50%;
            box-shadow:inset 0 0 10px rgba(255,255,0,1);
            opacity:0;
       }
       .education ul li .dars:hover:after{
            animation:hhhhhhh 0.5s linear infinite;
       }
       .education ul li .dars span{
            padding:4px 12px;
            background:#007faf;
            border-radius:15px;
            color:#fff;
       }
       .education ul li .dars:hover span{
            background:#e91e63;
       }
       .education ul li .dars h3{
            margin:10px 0 0;
            padding:0;
            color:#0007faf;
       }
       .education uli li .dars:hover h3{
            color:#ff0;
       }
       .education ul li .dars p{
            margin:10px 0 0;
            padding:0;
            color:#fff;
       }
       @keyframes hhhhhhh{
            0%{
                opacity:0;
            }
            50%{
                opacity:1;
            }
            100%{
                opacity:0;
            }
       }
        .circle-chart {
          width: 150px;
          height: 150px;
        }

        .circle-chart__circle {
          stroke: #00acc1;
          stroke-width: 2;
          stroke-linecap: square;
          fill: none;
          animation: circle-chart-fill 2s reverse; /* 1 */ 
          transform: rotate(-90deg); /* 2, 3 */
          transform-origin: center; /* 4 */
        }

        /**
         * 1. Rotate by -90 degree to make the starting point of the
         *    stroke the top of the circle.
         * 2. Scaling mirrors the circle to make the stroke move right
         *    to mark a positive chart value.
         * 3. Using CSS transforms on SVG elements is not supported by Internet Explorer
         *    and Edge, use the transform attribute directly on the SVG element as a
         * .  workaround.
         */

        .circle-chart__circle--negative {
          transform: rotate(-90deg) scale(1,-1); /* 1, 2, 3 */
        }

        .circle-chart__background {
          stroke: #efefef;
          stroke-width: 2;
          fill: none; 
        }

        .circle-chart__info {
          animation: circle-chart-appear 2s forwards;
          opacity: 0;
          transform: translateY(0.3em);
        }

        .circle-chart__percent {
          alignment-baseline: central;
          text-anchor: middle;
          font-size: 8px;
        }

        .circle-chart__subline {
          alignment-baseline: central;
          text-anchor: middle;
          font-size: 3px;
        }

        .success-stroke {
          stroke: #00C851;
        }

        .warning-stroke {
          stroke: #ffbb33;
        }

        .danger-stroke {
          stroke: #ff4444;
        }

        @keyframes circle-chart-fill {
          to { stroke-dasharray: 0 100; }
        }

        @keyframes circle-chart-appear {
          to {
          opacity: 1;
          transform: translateY(0);
          }
        }


        .skills{
        color: black;
        }

        .skills_section{
          width: 100%;
          margin: 0 auto;
          margin-bottom: 80px;
        }

        .skill-head{
          margin: 80px 0;
        }

        .skill-head h1{
          font-size: 60px;
          font-weight: 700;
        }


        .skill-head p{
          margin-bottom: 10px;
        }

        .skills-area {
          margin-top: 5%;
          display: flex;
          flex-wrap: wrap;
        }

        .single-skill {
          width: 25%;
          margin-bottom: 80px;
        }

        .success-stroke {
          stroke: rgb(129, 86, 252);
        }

        .circle-chart__background {
          stroke: #ede4e4;
          stroke-width: 1;
        }

        /* Extra small devices (portrait phones, less than 576px) */
        @media (max-width: 575.98px) {

          .skill-head {
            margin: 50px 0;
          }   

          .skill-head h1 {
            font-size: 30px;
          }

          .skill-icon {
            width: 50%;
          }
          
          .skill-icon i {
            font-size: 70px;
          }

          .single-skill {
            width: 50%;
          }

          .circle-chart {
            width: 130px;
            height: 130px;
          }
        }

    .s8
    {
        display:flex;
        justify-content: center;
        align-items: center;
        min-height: 100vh;
        background:url(hero.jpg);
        background-size:cover;
    }
    .vasat{
      float:left;
      left:35%;
    }
    .raast{
        float:right;
        right:10%;
    }
    .chaap{
        float:left;
        left:10%;
    }
    .secondary{
        position:relative;
        width:500px;
    }
    .secondary h2{
        color:#fff;
    }
    .secondary .maharats{
        position: relative;
        display:flex;
        margin:20px 0;
        padding:24px 10px 18px;
        background:linear-gradient(#616161 0%, #333 10%, #222);
        /*background:linear-gradient(45deg, #22ffde, #2196F3); */
        border-radius: 8px;
        overflow:hidden;
        border:2px solid #000;
        transition:0.5s;
    }
    .secondary .maharats:before{
        content:'';
        position: absolute;
        top:0;
        left:0;
        width:100%;
        height:50%;
        background:rgba(255,255,255,0.1);
        z-index: 10;
    }
    .secondary .maharats .Name{
        position: relative;
        width:110px;
        text-align: right;
        color:#fff;
        margin-top:-2px;
        text-transform: uppercase;
    }
    .secondary .maharats .Value{
        position: relative;
        width:40px;
        text-align: left;
        color:#fff;
        margin-top:-2px;
        text-transform: uppercase;
    }
    .secondary .maharats .darsad{
        position: relative;
        width:calc(100% - 150px);
        height:20px;
        margin:0 10px;
        border-radius: 10px;
        background-color: #151515;
        box-shadow:inset 0 0 10px #000;
        overflow:hidden;
    }
    .secondary .maharats .darsad .mizaan{
        position: absolute;
        top:0;
        left:0;
        width:70%;
        height:100%;
        border-radius: 10px;
        background:#fff;
        box-shadow: inset 0 0 2px #000;
        animation:gogogo 4s ease-in-out forwards;
    }
    @keyframes gogogo{
        from{
            width:0;
        }
    }
    .secondary .maharats:nth-child(2) .darsad .mizaan{
        background:linear-gradient(45deg, #1fe6ff, #673AB7);
    }
    .secondary .maharats:nth-child(3) .darsad .mizaan{
        background:linear-gradient(45deg, #3bc0ff, #33ff00);
    }
    .secondary .maharats:nth-child(4) .darsad .mizaan{
        background:linear-gradient(45deg, #ffee54, #ff00ca);
    }
    .secondary .maharats:nth-child(5) .darsad .mizaan{
        background:linear-gradient(45deg, #8F00FF, #ff00ca);
    }
    .secondary .maharats:nth-child(6) .darsad .mizaan{
        background:linear-gradient(45deg, #FFC500, #008BFF);
    }
    .secondary .maharats:nth-child(7) .darsad .mizaan{
        background:linear-gradient(45deg, #FF6565, #00FF42);
    }

    .s9{
      display:flex;
      justify-content:center;
      align-items:center;
      min-height:100vh;
      background:#f7fcff;
    }
    .mohtaviat{
      position:relative;
      left:10%;
      width:1100px;
      display:flex;
      justify-content:center;
      align-items:center;
      flex-wrap:wrap;
      margin:40px 0;
    }
    .mohtaviat .jabeh{
      position:relative;
      width:300px;
      height:300px;
      margin:30px;
      background:#fff;
      box-shadow:0px 30px 50px rgba(0,0,0,0.05);
    }
    .mohtaviat .jabeh:hover .imgBx{
      transform:scale(0);
      transition-delay:0.5s;
    }
    .mohtaviat .jabeh .imgBx{
      position:absolute;
      top:0;
      left:0;
      width:100%;
      height:100%;
      display:flex;
      justify-content:center;
      align-items:center;
      transition:0.5s;
      transition-delay:0.5s;
    }
    .mohtaviat .jabeh .imgBx img{
      max-width:100px;
    }
    .mohtaviat .jabeh .content{
      position:relative;
      top:0;
      left:0;
      width:100%;
      height:100%;
      padding:20px;
      display:flex;
      justify-content:center;
      align-items:center;
      flex-direction:column;
      transition:0.5s;
      background:#ff3579;
      transform:scale(0);
      transition-delay:0s;
    }
    .mohtaviat .jabeh:hover .content{
      transform:scale(1);
      transition-delay:0.5s;
    }
    .mohtaviat .jabeh:nth-child(2) .content{
      background:#2ba1ff;
    }
    .mohtaviat .jabeh:nth-child(3) .content{
      background:#c630e0;
    }
    .mohtaviat .jabeh .content .icon img{
      max-width:80px;
      filter:invert(1);
    }
    .mohtaviat .jabeh .content h3{
      color:#fff;
      text-transform:uppercase;
      font-size:16px;
      letter-spacing:2px;
      margin-top:20px;
    }
    .mohtaviat .jabeh .content h4{
      color:#fff;
      font-size:16px;
      font-weight:500
    }
    .s10{
      margin:0;
      padding:0;
      padding-left:10% !important;
      justify-content: center;
      box-sizing:border-box;
      font-family:'Poppins',sans-serif;
      display:flex;
      justify-content:center;
      align-items:center;
      min-height:100vh;
      background:#03080a;
    }
    .rahacontainer{
      width:80%;
      justify-content: center;
      padding:20px;
    }
    .rahacontainer h2{
      width:100%;
      color:#45f3ff;
      font-size:36px;
      text-align:center;
      margin-bottom:10px;
    }
    .rahacontainer .raharow{
      position:relative;
      width:100%;
      display:grid;
      grid-template-columns:repeat(auto-fit, minmax(300px,1fr));
    }
    .rahacontainer .raharow .rahacol{
      position:relative;
      width:100%;
      padding:0 10px;
      margin:30px 0 10px;
      transition:0.5s;
    }
    .rahacontainer .raharow .rahainput{
      position:relative;
      width:100%;
      height:40px;
      color:#45f3ff;
    }
    .rahacontainer .raharow .rahainput input,
    .rahacontainer .raharow .rahainput.textarea textarea{
      position:absolute;
      width:100%;
      height:100%;
      background:transparent;
      box-shadow:none;
      border:none;
      outline:none;
      font-size:18px;
      padding:0 10px;
      z-index:1;
      color:#000;
    }
    .rahacontainer .raharow .rahainput .rahatext{
      position:absolute;
      top:0;
      left:0;
      line-height:40px;
      font-size:18px;
      padding:0 10px;
      display:block;
      transition:0.5s;
      pointer-events:none;
    }
    .rahacontainer .raharow .rahainput input:focus + .rahatext,
    .rahacontainer .raharow .rahainput input:valid + .rahatext{
      top:-35px;
      left:-10px;
    }
    .rahacontainer .raharow .rahainput .rahaline{
      position:absolute;
      bottom:0;
      display:block;
      width:100%;
      height:2px;
      background:#45f3ff;
      transition:0.5s;
      border-radius:2px;
      pointer-events:none;
    }
    .rahacontainer .raharow .rahainput input:focus ~ .rahaline,
    .rahacontainer .raharow .rahainput input:valid ~ .rahaline{
      height:100%;
    }
    .rahacontainer .raharow .rahainput.textarea{
      position:relative;
      width:100%;
      height:100px;
      padding:10px 0;
    }
    .rahacontainer .raharow .rahainput.textarea textarea{
      height:100%;
      resize:none;
    }
    .rahacontainer .raharow .rahainput textarea:focus + .rahatext,
    .rahacontainer .raharow .rahainput textarea:valid + .rahatext{
      top:-35px;
      left:-10px;
    }
    .rahacontainer .raharow .rahainput textarea:focus ~ .rahaline,
    .rahacontainer .raharow .rahainput textarea:valid ~ .rahaline{
      height:100%;
    }
    .raharow input[type="submit"]{
      border:none;
      padding:7px 35px;
      cursor:pointer;
      outline:none;
      background:#45f3ff;
      color:#000;
      font-size:18px;
      border-radius:2px;
    }
    .containerbbs{
      position:relative;
      display:flex;
      justify-content:center;
      align-items:center;
      padding:40px 0;
      flex-wrap:wrap;
    }
    .containerbbs .boxbbs{
      position:relative;
      width:320px;
      height:400px;
      color:#fff;
      background:#111;
      display:flex;
      justify-content:center;
      align-items:center;
      margin:20px 30px;
      transition:0.5s;
    }
    .containerbbs{
      transform:translateY(-20px);
    }
    .containerbbs .boxbbs::before{
      content:'';
      position:absolute;
      top:0;
      left:0;
      width:100%;
      height:100%;
      background:linear-gradient(45deg,#ffbc00,#ff0058);
    }
    .containerbbs .boxbbs::after{
      content:'';
      position:absolute;
      top:0;
      left:0;
      width:100%;
      height:100%;
      background:linear-gradient(45deg,#ffbc00,#ff0058);
      filter:blur(30px);
    }
    .containerbbs .boxbbs:nth-child(2)::before,
    .containerbbs .boxbbs:nth-child(2)::after{
      background:linear-gradient(315deg,#03a9f4,#ff0058);
    }
    .containerbbs .boxbbs:nth-child(3)::before,
    .containerbbs .boxbbs:nth-child(3)::after{
      background:linear-gradient(315deg,#4dff03,#00d0ff);
    }
    .containerbbs .boxbbs span{
      position:absolute;
      top:6px;
      left:6px;
      right:6px;
      bottom:6px;
      background:rgba(0,0,0,0.6);
      z-index:2;
    }
    .containerbbs .boxbbs span:before{
      content:'';
      position:absolute;
      top:0;
      left:0;
      width:50%;
      height:100%;
      background:rgba(255,255,255,0.1);
      pointer-events:none;
    }
    .containerbbs .boxbbs .contentbbs{
      position:relative;
      z-index:10;
      padding:20px 40px;
    }
    .containerbbs .boxbbs .contentbbs h2{
      font-size:2em;
      color:#fff;
      margin-bottom:10px;
    }
    .containerbbs .boxbbs .contentbbs p{
      font-size:1.1em;
      color:#fff;
      margin-bottom:10px;
      line-height:1.4em;
    }
    .containerbbs .boxbbs .contentbbs a{
      display:inline-block;
      font-size:1.1em;
      color:#111;
      background:#fff;
      padding:10px;
      text-decoration:none;
      font-weight:700px;
    }
    .s11{
      margin:0;
      padding:0;
      box-sizing:border-box;
      font-family:consolas;
      display:flex;
      justify-content:center;
      align-items:center;
      min-height:100vh;
      background:#111;
    }
    .s13{
      margin:0;
      padding:0;
      background:#262626;
    }
    .reserveicons ul{
      position:absolute;
      top:50%;
      left:50%;
      transform:translate(-50%,-50%);
      margin:0;
      padding:0;
      display:flex;
    }
    .reserveicons ul li{
      list-style:none;
    }
    .reserveicons ul li a{
      position:relative;
      display:block;
      width:150px;
      height:80px;
      line-height:80px;
      text-align:center;
      color:#fff;
      font-family:sans-serif;
      transition:0.5s;
      text-decoration:none;
      font-size:16px;
      border:1px solid #000;
      border-right:none;
    }
    .reserveicons ul li a:last-child a{
      border-right:1px solid #000;
    }
    .reserveicons ul li a:before{
      content:'';
      position:absolute;
      top:0;
      left:0;
      width:100%;
      height:100%;
      background:#f00;
      overflow:hidden;
      z-index:-1;
      transform:scaleX(0);
      transform-origin:right;
      transition:transform 0.5s ease-in-out;
    }
    .reserveicons ul li a:hover:before{
      transform-origin:left;
      transform:scaleX(1);
    }
    .reserveicons ul li:nth-child(1) a:before{
      background:#3b5999; 
    }
    .reserveicons ul li:nth-child(2) a:before{
      background:#55acee;
    }
    .reserveicons ul li:nth-child(3) a:before{
      background:#dd4b39;
    }
    .reserveicons ul li:nth-child(4) a:before{
      background:#0077B5;
    }
    .reserveicons ul li:nth-child(5) a:before{
      background:#e4405f;
    }
    .wavysection section{
      position:relative;
      width:100%;
      height:100vh;
      overflow:hidden;
      display:flex;
      justify-content:center;
      align-items:center;
    }
    .wavysection section .wave{
      position:absolute;
      left:0;
      width:100%;
      height:100%;
      background:#4973ff;
    }
    .wavysection section .content{
      position:relative;
      z-index:1;
      color:#fff;
      font-size:4em;
    }
    .wavysection section .wave span{
      position:absolute;
      width:325vh;
      height:325vh;
      top:0;
      left:50%;
      transform:translate(-50%,-50%);
      background:#000;
    }
    .wavysection section .wave span:nth-child(1){
      animation:waaavy 5s linear infinite;
      border-radius:45%;
      background:rgba(20,20,20,1);
    }
    .wavysection section .wave span:nth-child(2){
      animation:waaavy 10s linear infinite;
      border-radius:40%;
      background:rgba(20,20,20,0.5);
    }
    .wavysection section .wave span:nth-child(3){
      animation:waaavy 15s linear infinite;
      border-radius:42.5%; 
      background:rgba(20,20,20,0.5);
    }
    @keyframes waaavy{
      0%{
        transform:translate(-50%,-75%) rotate(0deg);
      }
      100%{
        transform:translate(-50%,-75%) rotate(360deg);
      }
    }