/**
* Template Name: ZenBlog - v1.0.0
* Template URL: https://bootstrapmade.com/zenblog-bootstrap-blog-template/
* Author: BootstrapMade.com
* License: https:///bootstrapmade.com/license/
*/

/**
* Check out variables.css for easy customization of colors, typography, and other repetitive properties
*/
/*--------------------------------------------------------------
# General
--------------------------------------------------------------*/
:root {
  scroll-behavior: smooth;
}

body {
  color: rgba(var(--color-primary-rgb), 1);
}

a {
  color: var(--color-links);
  text-decoration: none;
}

a:hover {
  color: var(--color-links-hover);
  text-decoration: none;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-primary);
}

#main {
  margin-top: 90px;
}

/*--------------------------------------------------------------
# Sections & Section Header
--------------------------------------------------------------*/
section {
  padding: 40px 0;
  overflow: hidden;
}


#header {
  height: 85px;
  transition: all 0.5s;
  z-index: 997;


  background: black;
}


 .header-logo{
    text-align: center;
}
 .header-logo img{
    width: 100%;
}
 .header-logo h3{
    color: white;
}
 .header-search{
    padding: 0px 0px;
    text-align: center;
}
.header-search input{
    font-family: helvetica;
    border: none;
    background: #1d1e22;
    box-shadow: none;
    outline: 0;
    padding-left: 40px;
    line-height: 35px;
    border-radius: 4px;
    width: 100%;
    font-size: 15px;
    color: #f7f7f7;
}
 .header-search a{/* color: white; */}
 .header-search span{
    font-size: 14px;
    left: 314px;
    color: #b5b5b5;
    top: 20px;
    position: absolute;
}
 .header-btn{
    text-align: left;
    padding-left: 17px;
}
 .header-btn button{
    font-family: helvetica;
    border-radius: 4px;
    border: none;
    padding: 5px 19px;
    color: white;
    background: #1d1e22;
}
 .header-btn button:hover{
    color: black;
    background: white;
    border: 1px solid white;
}
 .header-btn .login-btn{
    font-family: helvetica;
    border-radius: 4px;
    border: 1px solid #7ff39d;
    padding: 4px 19px;
    color: white;
    background: #7ff39d;
}

 .header-btn .login-btn:hover{
    background: #c8c45b;
    border: 1px solid #c8c45b;
    color: bl;
    color: black;
}

 .header-btn ul{
    padding: 0;
}
 .header-btn ul li{
    list-style: none;
    padding: 3px 5px;
    display: inline-block;
}


/*--------------------------------------------------------------
# top section 
--------------------------------------------------------------*/


.top-section{
    padding-bottom: 115px;
    background: black;
    background: #000000 url(../../2.png) no-repeat;
    background-size: cover;
}

section.top-section {}

.top-section .top-panel-left{
    padding-top: 151px;
    text-align: justify;

        animation-name: moveInleft;
    animation-duration: 3s;
}
.top-section .top-panel-left .top-head{

    font-weight: 700;
    font-family: helvetica;
    text-align: justify;
    font-size: 55px;
    color: white;
}


@keyframes moveInleft {
    0% {
        opacity: 0;
        transform: translateX(-100px);
    }

    80% {
        transform: translateX(10px);
    }
    100% {
        opacity: 1;
        transform: translate(0);
    }
}




.top-section .top-panel-left .top-pera{
    color: white;
    font-size: 24px;
    text-align: justify;
    font-family: helvetica;
}
.top-section .top-panel-left .top-pera::after {
    content: '';
    top: 351px;
    width: 8%;
    right: 427px;
    border-bottom: 3px solid #ffffff;
    left: -571px;
    display: inline-block;
    margin: 0 auto;
    position: absolute;
    }

.top-section .top-panel-left .small-pera{
    font-family: helvetica;
    padding-top: 21px;
    color: white;
    font-size: 20px;
}
.top-section .top-panel-left h2{
    color: #48c0db;
    font-family: helvetica;
    font-size: 31px;
}


.top-section  .code-img{
    padding-top: 83px;
}
.top-section  .code-img img{}



.service-panel-box{
    padding: 0px 20px;
    padding-top: 174px;
}
 .service-panel-box .info{
     -webkit-transform: translateZ(0);
     transform: translateZ(0);
     box-shadow: 0 0 1px rgba(0, 0, 0, 0);
     -webkit-backface-visibility: hidden;
     backface-visibility: hidden;
     -moz-osx-font-smoothing: grayscale;
     -webkit-transition-duration: 0.3s;
     transition-duration: 0.3s;
     -webkit-transition-property: box-shadow, transform;
     transition-property: box-shadow, transform;
     background: #1d1e22;
     border-radius: 10px;
     max-height: 198px;
     text-align: center;
     padding: 41px 31px;
}
.info:hover {
  border: 1px solid #545454;
  box-shadow: 0 0 11px rgb(179 167 167 / 20%);
  -webkit-transform: scale(1.1);
  transform: scale(1.1);
  background: black;
  }
.service-panel-box .info span{
    padding: 6px 11px;
    background: black;
    position: absolute;
    top: -27px;
    /* border-radius: 50%; */
    right: 130px;
    /* border: 1px solid #5c5757; */
}
 .service-panel-box .info span img{
    width: 50px;
}
 .service-panel-box .info h3{
    line-height: 2;
    font-weight: 600;
    font-family: helvetica;
    color: white;
}
 .service-panel-box .info p{
    color: white;
    font-family: helvetica;
}




.coding-section{background: black url(../../bg.png);background-size: cover;}
.coding-section .coding-grid{
    padding-top: 88px;
    text-align: center;
    padding: 197px 54px;
}
.coding-section .coding-grid h2{
    font-family: helvetica;
    color: black;
    font-weight: 700;
    font-size: 45px;
}
.coding-section .coding-grid p{
    font-family: helvetica;
    color: black;
    font-size: 18px;
}
.coding-section .coding-grid ul{
    padding: 0;
    text-align: center;
}
.coding-section .coding-grid ul li{
    padding: 16px 0px;
    list-style: none;
}
.coding-section .coding-grid ul li button{
     font-family: helvetica;
     -webkit-transform: translateZ(0);
     transform: translateZ(0);
     box-shadow: 0 0 1px rgba(0, 0, 0, 0);
     -webkit-backface-visibility: hidden;
     backface-visibility: hidden;
     -moz-osx-font-smoothing: grayscale;
     -webkit-transition-duration: 0.3s;
     transition-duration: 0.3s;
     -webkit-transition-property: box-shadow, transform;
     transition-property: box-shadow, transform;
     /* padding: 3px 17px; */
     /* border: none; */
     /* color: white; */
     /* background: #e7ab01; */
}
.coding-section .coding-grid ul li button:hover{
  border: none;
  box-shadow: 0 0 11px rgb(179 167 167 / 20%);
  -webkit-transform: scale(1.1);
  transform: scale(1.1);
  }
.coding-section .coding-img{}
.coding-section .coding-img img{}
.coding-section .btn1{
    padding: 11px 42px;
    font-weight: 600;
    border-radius: 20px;
    border: none;
    color: white;
    background: #e7ab00;
}
.coding-section .btn2{
    padding: 11px 40px;
    font-weight: 600;
    border-radius: 20px;
    border: none;
    color: white;
    background: #ffda6f;
}
.coding-section .btn3{
    padding: 11px 27px;
    font-weight: 600;
    border-radius: 20px;
    border: none;
    color: white;
    background: #1d1e22;
}





.css-section{
    background: #e56767;
}
.css-section .css-img{}
.css-section .css-img img{}
.css-section .css-grid{
    text-align: center;
    padding: 99px 54px;
}
.css-section .css-grid h2{
    font-weight: 700;
    font-family: helvetica;
    font-size: 45px;
    color: white;
}
.css-section .css-grid p{
    font-size: 18px;
    font-family: helvetica;
    color: white;
}
.css-section .css-grid ul{
    padding: 0;
}
.css-section .css-grid ul li{
    padding: 16px 0px;
    list-style: none;
}
.css-section .css-grid .btn4{
      font-family: helvetica;
      -webkit-transform: translateZ(0);
      transform: translateZ(0);
      box-shadow: 0 0 1px rgba(0, 0, 0, 0);
      -webkit-backface-visibility: hidden;
      backface-visibility: hidden;
      -moz-osx-font-smoothing: grayscale;
      -webkit-transition-duration: 0.3s;
      transition-duration: 0.3s;
      -webkit-transition-property: box-shadow, transform;
      transition-property: box-shadow, transform;
      padding: 11px 44px;
      font-weight: 600;
      border-radius: 20px;
      border: none;
      color: white;
      background: #7ff39d;
}
.css-section .css-grid .btn4:hover{  -webkit-transform: scale(1.1);
  transform: scale(1.1);}
.css-section .css-grid .btn5{
          -webkit-transform: translateZ(0);
          transform: translateZ(0);
          box-shadow: 0 0 1px rgba(0, 0, 0, 0);
          -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
          -moz-osx-font-smoothing: grayscale;
          -webkit-transition-duration: 0.3s;
          transition-duration: 0.3s;
          -webkit-transition-property: box-shadow, transform;
          transition-property: box-shadow, transform;
          padding: 11px 34px;
          font-weight: 600;
          border-radius: 20px;
          border: none;
          color: white;
          background: #1d1e22;
          font-family: helvetica;
}

.css-section .css-grid .btn5:hover{  -webkit-transform: scale(1.1);
  transform: scale(1.1);}
.JavaScript-section{
    background: orange;
}
.JavaScript-section.css-img{}
.JavaScript-section .css-img img{}
.JavaScript-section .css-grid{
    text-align: center;
    padding: 99px 54px;
}
.JavaScript-section .css-grid h2{
    font-family: helvetica;
    font-weight: 700;
    font-size: 45px;
    color: white;
}
.JavaScript-section .css-grid p{
    font-family: helvetica;
    font-size: 18px;
    color: white;
}
.JavaScript-section .css-grid ul{
    padding: 0;
}
.JavaScript-section .css-grid ul li{
    padding: 16px 0px;
    list-style: none;
}
.JavaScript-section .css-grid .btn6{
              font-family: helvetica;
              -webkit-transform: translateZ(0);
              transform: translateZ(0);
              box-shadow: 0 0 1px rgba(0, 0, 0, 0);
              -webkit-backface-visibility: hidden;
              backface-visibility: hidden;
              -moz-osx-font-smoothing: grayscale;
              -webkit-transition-duration: 0.3s;
              transition-duration: 0.3s;
              -webkit-transition-property: box-shadow, transform;
              transition-property: box-shadow, transform;
              padding: 11px 30px;
              font-weight: 600;
              border-radius: 20px;
              border: none;
              color: black;
              background: #ffffff;
}
.JavaScript-section .css-grid .btn6:hover{  -webkit-transform: scale(1.1);
  transform: scale(1.1);}
.JavaScript-section .css-grid .btn7{
                  -webkit-transform: translateZ(0);
                  transform: translateZ(0);
                  font-family: helvetica;
                  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
                  -webkit-backface-visibility: hidden;
                  backface-visibility: hidden;
                  -moz-osx-font-smoothing: grayscale;
                  -webkit-transition-duration: 0.3s;
                  transition-duration: 0.3s;
                  -webkit-transition-property: box-shadow, transform;
                  transition-property: box-shadow, transform;
                  padding: 11px 21px;
                  font-weight: 600;
                  border-radius: 20px;
                  border: none;
                  color: white;
                  background: #1d1e22;
}

.JavaScript-section .css-grid .btn7:hover{  -webkit-transform: scale(1.1);
  transform: scale(1.1);}
.python-section{
    background: #fbb0fb;
}
.python-section .css-grid {    text-align: center;
    padding: 99px 54px;}
.python-section .css-grid h2{
    font-weight: 700;
    font-family: helvetica;
    font-size: 45px;
    color: black;
}
.python-section .css-grid p{
    font-size: 18px;
    font-family: helvetica;
    color: black;
}
.python-section .css-grid ul{}
.python-section .css-grid ul li{
    padding: 16px 0px;
    list-style: none;
}
.python-section .css-grid ul li .btn8{
                      font-family: helvetica;
                      -webkit-transform: translateZ(0);
                      transform: translateZ(0);
                      box-shadow: 0 0 1px rgba(0, 0, 0, 0);
                      -webkit-backface-visibility: hidden;
                      backface-visibility: hidden;
                      -moz-osx-font-smoothing: grayscale;
                      -webkit-transition-duration: 0.3s;
                      transition-duration: 0.3s;
                      -webkit-transition-property: box-shadow, transform;
                      transition-property: box-shadow, transform;
                      padding: 11px 32px;
                      font-weight: 600;
                      border-radius: 20px;
                      border: none;
                      color: white;
                      background: #7ff39d;
}
.python-section .css-grid .btn8:hover{  -webkit-transform: scale(1.1);
  transform: scale(1.1);}
.python-section .css-grid ul li .btn9{
                      -webkit-transform: translateZ(0);
                      transform: translateZ(0);
                      font-family: helvetica;
                      box-shadow: 0 0 1px rgba(0, 0, 0, 0);
                      -webkit-backface-visibility: hidden;
                      backface-visibility: hidden;
                      -moz-osx-font-smoothing: grayscale;
                      -webkit-transition-duration: 0.3s;
                      transition-duration: 0.3s;
                      -webkit-transition-property: box-shadow, transform;
                      transition-property: box-shadow, transform;
                      padding: 11px 21px;
                      font-weight: 600;
                      border-radius: 20px;
                      border: none;
                      color: white;
                      background: #1d1e22;
}

.python-section .css-grid .btn9:hover{  -webkit-transform: scale(1.1);
  transform: scale(1.1);}




.sql-section{
    background: #7ff39d;
}
.sql-section .css-grid {    text-align: center;
    padding: 99px 54px;}
.sql-section .css-grid h2{
    font-family: helvetica;
    font-weight: 700;
    font-size: 45px;
    color: white;
}
.sql-section .css-grid p{
    font-size: 18px;
    font-family: helvetica;
    color: white;
}
.sql-section .css-grid ul{
    padding: 0;
}
.sql-section .css-grid ul li{
    padding: 16px 0px;
    list-style: none;
}
.sql-section .css-grid ul li .btn10{
                          font-family: helvetica;
                          -webkit-transform: translateZ(0);
                          transform: translateZ(0);
                          box-shadow: 0 0 1px rgba(0, 0, 0, 0);
                          -webkit-backface-visibility: hidden;
                          backface-visibility: hidden;
                          -moz-osx-font-smoothing: grayscale;
                          -webkit-transition-duration: 0.3s;
                          transition-duration: 0.3s;
                          -webkit-transition-property: box-shadow, transform;
                          transition-property: box-shadow, transform;
                          padding: 11px 40px;
                          font-weight: 600;
                          border-radius: 20px;
                          border: none;
                          color: black;
                          background: #ffffff;
}
.sql-section .css-grid .btn10:hover{  -webkit-transform: scale(1.1);
  transform: scale(1.1);}
.sql-section .css-grid ul li .btn11{
                          -webkit-transform: translateZ(0);
                          transform: translateZ(0);
                          font-family: helvetica;
                          box-shadow: 0 0 1px rgba(0, 0, 0, 0);
                          -webkit-backface-visibility: hidden;
                          backface-visibility: hidden;
                          -moz-osx-font-smoothing: grayscale;
                          -webkit-transition-duration: 0.3s;
                          transition-duration: 0.3s;
                          -webkit-transition-property: box-shadow, transform;
                          transition-property: box-shadow, transform;
                          padding: 11px 29px;
                          font-weight: 600;
                          border-radius: 20px;
                          border: none;
                          color: white;
                          background: #1d1e22;
}
.sql-section .css-grid .btn11:hover{  -webkit-transform: scale(1.1);
  transform: scale(1.1);}
.languages-section{
    background: #1d1e22;
    padding-bottom: 0;
}
.lan-panel{
    padding: 24px 23px;
}
.lang-bg-name{
    left: 44px;
    top: 39px;
    font-size: 45px;
    color: rgb(217 217 217 / 15%);
    position: relative;
    float: left;
    line-height: 1;
    font-family: helvetica;
    }
.lang-grid-box{
      /***                        -webkit-transform: translateZ(0);
     transform: translateZ(0);
     box-shadow: 0 0 1px rgba(0, 0, 0, 0);
     -webkit-backface-visibility: hidden;
     backface-visibility: hidden;
     -moz-osx-font-smoothing: grayscale;
     -webkit-transition-duration: 0.3s;
     transition-duration: 0.3s;
     -webkit-transition-property: box-shadow, transform;
     transition-property: box-shadow, transform;****/
    background: #ffbfe5;
    border-radius: 10px;
    min-height: 229px;
    text-align: center;
    padding: 41px 31px;
}
.lang-grid-box:hover{
  background-image: linear-gradient(-45deg, #ffe9f1 0%, #f55b2a 100%);
  border: none;
  cursor: pointer;
}
.lang-name{
    font-weight: 700;
    font-family: helvetica;
    color: black;
    font-size: 26px;
}
.about-lang{
    font-family: helvetica;
    color: black;
    font-size: 18px;
}
.lang-btn{
    font-family: helvetica;
    padding: 8px 32px;
    font-weight: 600;
    border-radius: 20px;
    border: none;
    color: white;
    background: #1d1e22;
}
.lang-btn:hover{background: white;
color: black;
border: 1px solid white;}


.lang-grid-box2{
    background: #e9e0e5;
    border-radius: 10px;
    min-height: 229px;
    text-align: center;
    padding: 41px 31px;
}

.lang-grid-box2:hover{
    background-image: linear-gradient(
-45deg, #ffe9f1 0%, #2ad9f5 100%);
    border: none;
    cursor: pointer;
    }

.lang-grid-box3{
    background: #b1ffc5;
    border-radius: 10px;
    min-height: 229px;
    text-align: center;
    padding: 41px 31px;
}
.lang-grid-box3:hover{background-image: linear-gradient(
-45deg, #ffe9f1 0%, #c3f52a 100%);border: none;cursor: pointer;}

.lang-grid-box4{
    background: #f0ff75;
    border-radius: 10px;
    min-height: 229px;
    text-align: center;
    padding: 41px 31px;
}
.lang-grid-box4:hover{background-image: linear-gradient(
-45deg, #ffe9f1 0%, #bf576a 100%);border: none;cursor: pointer;}
.lang-grid-box5{
    background: #a2bceb;
    border-radius: 10px;
    min-height: 229px;
    text-align: center;
    padding: 41px 31px;
}
.lang-grid-box5:hover{background-image: linear-gradient(
-45deg, #ffe9f1 0%, #bfa457 100%);border: none;cursor: pointer;}
.lang-grid-box6{
    background: #afeb91;
    border-radius: 10px;
    min-height: 229px;
    text-align: center;
    padding: 41px 31px;
}
.lang-grid-box6:hover{background-image: linear-gradient(
-45deg, #ffe9f1 0%, #8d8284 100%);border: none;cursor: pointer;}



.lang-grid-box7{
    background: #f5bbff;
    border-radius: 0px 38px;
    /* min-height: 155px; */
    text-align: center;
    padding: 41px 31px;
}

.lang-grid-box8{
    background: #d0dcf1de;
    border-radius: 0px 38px;
    /* min-height: 155px; */
    text-align: center;
    padding: 41px 31px;
}



.lang-grid-box9{
    background: #b29cd5;
    border-radius: 0px 38px;
    /* min-height: 155px; */
    text-align: center;
    padding: 41px 31px;
}

.lang-grid-box10{
    background: #e56767;
    border-radius: 0px 38px;
    /* min-height: 155px; */
    text-align: center;
    padding: 41px 31px;
}


.lang-grid-box11{
    background: #eadede;
    border-radius: 0px 38px;
    /* min-height: 155px; */
    text-align: center;
    padding: 41px 31px;
}

.lang-grid-box12{
    background: #ffa500;
    border-radius: 0px 38px;
    /* min-height: 155px; */
    text-align: center;
    padding: 41px 31px;
}


.lang-grid-box13{
    background: #ddcfb5;
    border-radius: 0px 38px;
    /* min-height: 155px; */
    text-align: center;
    padding: 41px 31px;
}


.lang-grid-box14{
    background: #f78472;
    border-radius: 0px 38px;
    /* min-height: 155px; */
    text-align: center;
    padding: 41px 31px;
}


.lang-grid-box15{
    background: #7c74eb;
    border-radius: 0px 38px;
    /* min-height: 155px; */
    text-align: center;
    padding: 41px 31px;
}


.bottom-top{
    background: gray;
    padding: 24px 37px;
    min-height: 200px;
}
.bottom-head{
    font-size: 30px;
    font-family: helvetica;
    color: #f9f996;
    font-weight: 500;
}
.bottom-pera{
    font-family: helvetica;
    color: whiote;
    color: white;
    font-size: 21px;
}
.get-btn{
    font-family: helvetica;
    padding: 11px 21px;
    font-weight: 500;
    border-radius: 20px;
    border: none;
    color: black;
    background: #f9f996;
}
.search-img{
    padding: 0;
}
.search-img img{width: 100%;max-height: 248px;}

.notification-section{
    text-align: center;
    background: black;
}

.notification-section  P{
    color: white;
    font-family: helvetica;
}



.notification-bottom{
    background-image: linear-gradient(#00000040, #000000);
    background: linear-gradient(
109.61deg, #4C4F5A 4.26%, #202125 84.84%);
}
.notification-bottom .bottom-noti{
    padding: 73px 37px;
}
.notification-bottom .bottom-noti .bottom-grid{
    font-family: helvetica;
    color: white;
    font-weight: 500;
    font-size: 35px;
}





/************auto typing code*************/
 



 
.illustration-editor {
  margin-top: -2rem;
  margin-right: -10rem;
  display: grid;
  grid-template-rows: 24px auto;
  justify-items: center;
  position: relative;
}

.code {
  position: absolute;
  width: 290px;
  height: 173px;
  background: #1D1E22;
  box-shadow: 0px 4px 30px rgba(0, 0, 0, 0.5);
  border-radius: 6px;
  z-index: 5;
}
.code header {
  display: grid;
  grid-template-columns: 42px auto 39px;
  align-items: center;
}
.code header svg {
  margin: 10px;
}
.code header h1 {
  font-family: Lato, sans-serif;
  font-weight: 900;
  font-size: 14px;
  letter-spacing: 1.57px;
  color: #C5C8D4;
  margin: 0;
}
.code-html {
  left: 256px;
  top: 2px;
}
.code-css {
  left: 357px;
  top: 183px;
}
.code-js {
  left: 250px;
  top: 368px;
}
.code .code-content {
  margin: 0 10px 10px;
  color: white;
}
.code .code-content .c-r {
  color: #A88038;
}
.code .code-content .c-o {
  color: #DE7300;
}
.code .code-content .c-y {
  color: #E1CA72;
}
.code .code-content .c-g {
  color: #74B087;
}
.code .code-content .c-p {
  color: #9F8198;
}
.code .code-content .c-b {
  color: #7A99AD;
}
.code .code-content .c-c {
  color: #666666;
}


.editor-block {
  position: relative;
  display: block;
  width: 500px;
  height: 472px;
  background: linear-gradient(109.61deg, #4C4F5A 4.26%, #202125 84.84%);
  border-radius: 10px;
}


.code-content code .line-1 {
  width: 0%;
  margin: 0;
  border-right: 0.15em solid transparent;
  overflow: hidden;
  display: inline-block;
  white-space: nowrap;
}
.code-content code .line-2 {
  width: 0%;
  margin: 0;
  border-right: 0.15em solid transparent;
  overflow: hidden;
  display: inline-block;
  white-space: nowrap;
}
.code-content code .line-3 {
  width: 0%;
  margin: 0;
  border-right: 0.15em solid transparent;
  overflow: hidden;
  display: inline-block;
  white-space: nowrap;
}
.code-content code .line-4 {
  width: 0%;
  margin: 0;
  border-right: 0.15em solid transparent;
  overflow: hidden;
  display: inline-block;
  white-space: nowrap;
}
 .code-content code .line-5 {
  width: 0%;
  margin: 0;
  border-right: 0.15em solid transparent;
  overflow: hidden;
  display: inline-block;
  white-space: nowrap;
}
.code-content code .line-1 {
  animation: typing-1 3s 0s steps(30, end) forwards, cursor 1s linear 0s 3;

}
 .code-content code .line-2 {
  animation: typing-2 3s 3s steps(30, end) forwards, cursor 1s linear 3s 3;
}
 .code-content code .line-3 {
  animation: typing-3 3s 6s steps(30, end) forwards, cursor 1s linear 6s 3;
}
 .code-content code .line-4 {
  animation: typing-4 3s 9s steps(30, end) forwards, cursor 1s linear 9s 3;
}
 .code-content code .line-5 {
  animation: typing-4 3s 12s steps(30, end) forwards, cursor 1s linear 9s 3;
}

 .code-content code .line-1, .code-html .code-content code .line-3, .code-html .code-content code .line-4 {
  animation-duration: 5s;
  animation-timing-function: steps(10, end);
}
 .code-content code .line-5 {
  border-color: transparent;
  animation: typing-5 3s 12s steps(30, end) forwards, cursor-persist 1s linear 12s infinite;
}
 .code-content code .line-2 {
  margin-left: 2rem;
}
.code-content code .line-3, .code-html .code-content code .line-4, .code-html .code-content code .line-5 {
  margin-left: 2rem;
}


/********html-autotyping code*******/

.autotype-code-panel{}
.code1 {
  position: absolute;
  width: 442px;
  height: 306px;
  background: #1D1E22;
  box-shadow: 0px 4px 30px rgba(0, 0, 0, 0.5);
  border-radius: 6px;
  z-index: 5;
}

.autotype-code-panel .code-1 {
  left: 717px;
  top: 1363px;
}


.code1 header {
  display: grid;
  grid-template-columns: 42px auto 39px;
  align-items: center;
}
.code1 header svg {
  margin: 10px;
}
.code1 header h1 {
  font-family: Lato, sans-serif;
  font-weight: 900;
  font-size: 14px;
  letter-spacing: 1.57px;
  color: #C5C8D4;
  margin: 0;
}



.code1 .code-content {
  margin: 0 10px 10px;
  color: white;
}
.code1 .code-content .c-r {
  color: #A88038;
}
.code1 .code-content .c-o {
  color: #DE7300;
}
.code1 .code-content .c-y {
  color: #E1CA72;
}
.code1 .code-content .c-g {
  color: #74B087;
}
.code1 .code-content .c-p {
  color: #9F8198;
}
.code1 .code-content .c-b {
  color: #7A99AD;
}
.code1 .code-content .c-c {
  color: #666666;
}



/**********css autotype code*************/
.code2 {
  position: absolute;
  width: 442px;
  height: 306px;
  background: #1D1E22;
  box-shadow: 0px 4px 30px rgba(0, 0, 0, 0.5);
  border-radius: 6px;
  z-index: 5;
}
.autotype-code-panel2{
    padding-top: 76px;
}
.autotype-code-panel2 .code-2 {
  left: 717px;
  top: 1363px;
}


.code2 header {
  display: grid;
  grid-template-columns: 42px auto 39px;
  align-items: center;
}
.code2 header svg {
  margin: 10px;
}
.code2 header h1 {
  font-family: Lato, sans-serif;
  font-weight: 900;
  font-size: 14px;
  letter-spacing: 1.57px;
  color: #C5C8D4;
  margin: 0;
}



.code2 .code-content {
  margin: 0 10px 10px;
  color: white;
}
.code2 .code-content .c-r {
  color: #A88038;
}
.code2 .code-content .c-o {
  color: #DE7300;
}
.code2 .code-content .c-y {
  color: #E1CA72;
}
.code2 .code-content .c-g {
  color: #74B087;
}
.code2 .code-content .c-p {
  color: #9F8198;
}
.code2 .code-content .c-b {
  color: #7A99AD;
}
.code2 .code-content .c-c {
  color: #666666;
}



















@keyframes typing-1 {
  from {
    width: 0;
  }
  to {
    width: 60px;
  }
}
@keyframes typing-2 {
  from {
    width: 0;
  }
  to {
    width: 220px;
  }
}
@keyframes typing-3 {
  from {
    width: 0;
  }
  to {
    width: 70px;
  }
}
@keyframes typing-4 {
  from {
    width: 0;
  }
  to {
    width: 75px;
  }
}
@keyframes typing-5 {
  from {
    width: 0;
  }
  to {
    width: 141px;
  }
}
@keyframes cursor {
  from, to, 20%, 80% {
    border-color: transparent;
  }
  25%, 75% {
    border-color: white;
  }
}
@keyframes cursor-persist {
  from, 45% {
    border-color: transparent;
  }
  50%, to {
    border-color: white;
  }
}/**
* Template Name: ZenBlog - v1.0.0
* Template URL: https://bootstrapmade.com/zenblog-bootstrap-blog-template/
* Author: BootstrapMade.com
* License: https:///bootstrapmade.com/license/
*/

/**
* Check out variables.css for easy customization of colors, typography, and other repetitive properties
*/
/*--------------------------------------------------------------
# General
--------------------------------------------------------------*/
:root {
  scroll-behavior: smooth;
}

body {
  color: rgba(var(--color-primary-rgb), 1);
}

a {
  color: var(--color-links);
  text-decoration: none;
}

a:hover {
  color: var(--color-links-hover);
  text-decoration: none;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-primary);
}

#main {
  margin-top: 90px;
}

/*--------------------------------------------------------------
# Sections & Section Header
--------------------------------------------------------------*/
section {
  padding: 40px 0;
  overflow: hidden;
}


#header {
  height: 85px;
  transition: all 0.5s;
  z-index: 997;


  background: black;
}


 .header-logo{
    text-align: center;
}
 .header-logo img{
    width: 100%;
}
 .header-logo h3{
    color: white;
}
 .header-search{
    padding: 0px 0px;
    text-align: center;
}
.header-search input{
    font-family: helvetica;
    border: none;
    background: #1d1e22;
    box-shadow: none;
    outline: 0;
    padding-left: 40px;
    line-height: 35px;
    border-radius: 4px;
    width: 100%;
    font-size: 15px;
    color: #f7f7f7;
}
 .header-search a{/* color: white; */}
 .header-search span{
    font-size: 14px;
    left: 314px;
    color: #b5b5b5;
    top: 20px;
    position: absolute;
}
 .header-btn{
    text-align: left;
    padding-left: 17px;
}
 .header-btn button{
    font-family: helvetica;
    border-radius: 4px;
    border: none;
    padding: 5px 19px;
    color: white;
    background: #1d1e22;
}
 .header-btn button:hover{
    color: black;
    background: white;
    border: 1px solid white;
}
 .header-btn .login-btn{
    font-family: helvetica;
    border-radius: 4px;
    border: 1px solid #7ff39d;
    padding: 4px 19px;
    color: white;
    background: #7ff39d;
}

 .header-btn .login-btn:hover{
    background: #c8c45b;
    border: 1px solid #c8c45b;
    color: bl;
    color: black;
}

 .header-btn ul{
    padding: 0;
}
 .header-btn ul li{
    list-style: none;
    padding: 3px 5px;
    display: inline-block;
}


/*--------------------------------------------------------------
# top section 
--------------------------------------------------------------*/


.top-section{
    padding-bottom: 115px;
    background: black;
    background: #000000 url(../../2.png) no-repeat;
    background-size: cover;
}

section.top-section {}

.top-section .top-panel-left{
    padding-top: 151px;
    text-align: justify;
}
.top-section .top-panel-left .top-head{
    animation-name: moveInleft;
    animation-duration: 3s;
    font-weight: 700;
    font-family: helvetica;
    text-align: justify;
    font-size: 55px;
    color: white;
}
.top-section .top-panel-left .top-pera{
    color: white;
    font-size: 24px;
    text-align: justify;
    font-family: helvetica;
}
.top-section .top-panel-left .top-pera::after {
    content: '';
    top: 351px;
    width: 8%;
    right: 427px;
    border-bottom: 3px solid #ffffff;
    left: -571px;
    display: inline-block;
    margin: 0 auto;
    position: absolute;
    }

.top-section .top-panel-left .small-pera{
    font-family: helvetica;
    padding-top: 21px;
    color: white;
    font-size: 20px;
}
.top-section .top-panel-left h2{
    color: #48c0db;
    font-family: helvetica;
    font-size: 31px;
}


.top-section  .code-img{
    padding-top: 83px;
}
.top-section  .code-img img{}



.service-panel-box{
    padding: 0px 20px;
    padding-top: 174px;
}
 .service-panel-box .info{
     -webkit-transform: translateZ(0);
     transform: translateZ(0);
     box-shadow: 0 0 1px rgba(0, 0, 0, 0);
     -webkit-backface-visibility: hidden;
     backface-visibility: hidden;
     -moz-osx-font-smoothing: grayscale;
     -webkit-transition-duration: 0.3s;
     transition-duration: 0.3s;
     -webkit-transition-property: box-shadow, transform;
     transition-property: box-shadow, transform;
     background: #1d1e22;
     border-radius: 10px;
     max-height: 198px;
     text-align: center;
     padding: 41px 31px;
}
.info:hover {
  border: 1px solid #545454;
  box-shadow: 0 0 11px rgb(179 167 167 / 20%);
  -webkit-transform: scale(1.1);
  transform: scale(1.1);
  background: black;
  }
.service-panel-box .info span{
    padding: 6px 11px;
    background: black;
    position: absolute;
    top: -27px;
    /* border-radius: 50%; */
    right: 130px;
    /* border: 1px solid #5c5757; */
}
 .service-panel-box .info span img{
    width: 50px;
}
 .service-panel-box .info h3{
    line-height: 2;
    font-weight: 600;
    font-family: helvetica;
    color: white;
}
 .service-panel-box .info p{
    color: white;
    font-family: helvetica;
}




.coding-section{background: black url(../../bg.png);background-size: cover;}
.coding-section .coding-grid{
    padding-top: 88px;
    text-align: center;
    padding: 197px 54px;
}
.coding-section .coding-grid h2{
    font-family: helvetica;
    color: black;
    font-weight: 700;
    font-size: 45px;
}
.coding-section .coding-grid p{
    font-family: helvetica;
    color: black;
    font-size: 18px;
}
.coding-section .coding-grid ul{
    padding: 0;
    text-align: center;
}
.coding-section .coding-grid ul li{
    padding: 16px 0px;
    list-style: none;
}
.coding-section .coding-grid ul li button{
     font-family: helvetica;
     -webkit-transform: translateZ(0);
     transform: translateZ(0);
     box-shadow: 0 0 1px rgba(0, 0, 0, 0);
     -webkit-backface-visibility: hidden;
     backface-visibility: hidden;
     -moz-osx-font-smoothing: grayscale;
     -webkit-transition-duration: 0.3s;
     transition-duration: 0.3s;
     -webkit-transition-property: box-shadow, transform;
     transition-property: box-shadow, transform;
     /* padding: 3px 17px; */
     /* border: none; */
     /* color: white; */
     /* background: #e7ab01; */
}
.coding-section .coding-grid ul li button:hover{
  border: none;
  box-shadow: 0 0 11px rgb(179 167 167 / 20%);
  -webkit-transform: scale(1.1);
  transform: scale(1.1);
  }
.coding-section .coding-img{}
.coding-section .coding-img img{}
.coding-section .btn1{
    padding: 11px 42px;
    font-weight: 600;
    border-radius: 20px;
    border: none;
    color: white;
    background: #e7ab00;
}
.coding-section .btn2{
    padding: 11px 40px;
    font-weight: 600;
    border-radius: 20px;
    border: none;
    color: white;
    background: #ca2f65;
}
.coding-section .btn3{
    padding: 11px 27px;
    font-weight: 600;
    border-radius: 20px;
    border: none;
    color: white;
    background: #1d1e22;
}





.css-section{
    background: #e56767;
}
.css-section .css-img{}
.css-section .css-img img{}
.css-section .css-grid{
    text-align: center;
    padding: 99px 54px;
}
.css-section .css-grid h2{
    font-weight: 700;
    font-family: helvetica;
    font-size: 45px;
    color: white;
}
.css-section .css-grid p{
    font-size: 18px;
    font-family: helvetica;
    color: white;
}
.css-section .css-grid ul{
    padding: 0;
}
.css-section .css-grid ul li{
    padding: 16px 0px;
    list-style: none;
}
.css-section .css-grid .btn4{
      font-family: helvetica;
      -webkit-transform: translateZ(0);
      transform: translateZ(0);
      box-shadow: 0 0 1px rgba(0, 0, 0, 0);
      -webkit-backface-visibility: hidden;
      backface-visibility: hidden;
      -moz-osx-font-smoothing: grayscale;
      -webkit-transition-duration: 0.3s;
      transition-duration: 0.3s;
      -webkit-transition-property: box-shadow, transform;
      transition-property: box-shadow, transform;
      padding: 11px 44px;
      font-weight: 600;
      border-radius: 20px;
      border: none;
      color: white;
      background: #7ff39d;
}
.css-section .css-grid .btn4:hover{  -webkit-transform: scale(1.1);
  transform: scale(1.1);}
.css-section .css-grid .btn5{
          -webkit-transform: translateZ(0);
          transform: translateZ(0);
          box-shadow: 0 0 1px rgba(0, 0, 0, 0);
          -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
          -moz-osx-font-smoothing: grayscale;
          -webkit-transition-duration: 0.3s;
          transition-duration: 0.3s;
          -webkit-transition-property: box-shadow, transform;
          transition-property: box-shadow, transform;
          padding: 11px 34px;
          font-weight: 600;
          border-radius: 20px;
          border: none;
          color: white;
          background: #1d1e22;
          font-family: helvetica;
}

.css-section .css-grid .btn5:hover{  -webkit-transform: scale(1.1);
  transform: scale(1.1);}
.JavaScript-section{
    background: orange;
}
.JavaScript-section.css-img{}
.JavaScript-section .css-img img{}
.JavaScript-section .css-grid{
    text-align: center;
    padding: 99px 54px;
}
.JavaScript-section .css-grid h2{
    font-family: helvetica;
    font-weight: 700;
    font-size: 45px;
    color: white;
}
.JavaScript-section .css-grid p{
    font-family: helvetica;
    font-size: 18px;
    color: white;
}
.JavaScript-section .css-grid ul{
    padding: 0;
}
.JavaScript-section .css-grid ul li{
    padding: 16px 0px;
    list-style: none;
}
.JavaScript-section .css-grid .btn6{
              font-family: helvetica;
              -webkit-transform: translateZ(0);
              transform: translateZ(0);
              box-shadow: 0 0 1px rgba(0, 0, 0, 0);
              -webkit-backface-visibility: hidden;
              backface-visibility: hidden;
              -moz-osx-font-smoothing: grayscale;
              -webkit-transition-duration: 0.3s;
              transition-duration: 0.3s;
              -webkit-transition-property: box-shadow, transform;
              transition-property: box-shadow, transform;
              padding: 11px 30px;
              font-weight: 600;
              border-radius: 20px;
              border: none;
              color: black;
              background: #ffffff;
}
.JavaScript-section .css-grid .btn6:hover{  -webkit-transform: scale(1.1);
  transform: scale(1.1);}
.JavaScript-section .css-grid .btn7{
                  -webkit-transform: translateZ(0);
                  transform: translateZ(0);
                  font-family: helvetica;
                  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
                  -webkit-backface-visibility: hidden;
                  backface-visibility: hidden;
                  -moz-osx-font-smoothing: grayscale;
                  -webkit-transition-duration: 0.3s;
                  transition-duration: 0.3s;
                  -webkit-transition-property: box-shadow, transform;
                  transition-property: box-shadow, transform;
                  padding: 11px 21px;
                  font-weight: 600;
                  border-radius: 20px;
                  border: none;
                  color: white;
                  background: #1d1e22;
}

.JavaScript-section .css-grid .btn7:hover{  -webkit-transform: scale(1.1);
  transform: scale(1.1);}
.python-section{
    background: #fbb0fb;
}
.python-section .css-grid {    text-align: center;
    padding: 99px 54px;}
.python-section .css-grid h2{
    font-weight: 700;
    font-family: helvetica;
    font-size: 45px;
    color: black;
}
.python-section .css-grid p{
    font-size: 18px;
    font-family: helvetica;
    color: black;
}
.python-section .css-grid ul{}
.python-section .css-grid ul li{
    padding: 16px 0px;
    list-style: none;
}
.python-section .css-grid ul li .btn8{
                      font-family: helvetica;
                      -webkit-transform: translateZ(0);
                      transform: translateZ(0);
                      box-shadow: 0 0 1px rgba(0, 0, 0, 0);
                      -webkit-backface-visibility: hidden;
                      backface-visibility: hidden;
                      -moz-osx-font-smoothing: grayscale;
                      -webkit-transition-duration: 0.3s;
                      transition-duration: 0.3s;
                      -webkit-transition-property: box-shadow, transform;
                      transition-property: box-shadow, transform;
                      padding: 11px 32px;
                      font-weight: 600;
                      border-radius: 20px;
                      border: none;
                      color: white;
                      background: #7ff39d;
}
.python-section .css-grid .btn8:hover{  -webkit-transform: scale(1.1);
  transform: scale(1.1);}
.python-section .css-grid ul li .btn9{
                      -webkit-transform: translateZ(0);
                      transform: translateZ(0);
                      font-family: helvetica;
                      box-shadow: 0 0 1px rgba(0, 0, 0, 0);
                      -webkit-backface-visibility: hidden;
                      backface-visibility: hidden;
                      -moz-osx-font-smoothing: grayscale;
                      -webkit-transition-duration: 0.3s;
                      transition-duration: 0.3s;
                      -webkit-transition-property: box-shadow, transform;
                      transition-property: box-shadow, transform;
                      padding: 11px 21px;
                      font-weight: 600;
                      border-radius: 20px;
                      border: none;
                      color: white;
                      background: #1d1e22;
}

.python-section .css-grid .btn9:hover{  -webkit-transform: scale(1.1);
  transform: scale(1.1);}




.sql-section{
    background: #7ff39d;
}
.sql-section .css-grid {    text-align: center;
    padding: 99px 54px;}
.sql-section .css-grid h2{
    font-family: helvetica;
    font-weight: 700;
    font-size: 45px;
    color: white;
}
.sql-section .css-grid p{
    font-size: 18px;
    font-family: helvetica;
    color: white;
}
.sql-section .css-grid ul{
    padding: 0;
}
.sql-section .css-grid ul li{
    padding: 16px 0px;
    list-style: none;
}
.sql-section .css-grid ul li .btn10{
                          font-family: helvetica;
                          -webkit-transform: translateZ(0);
                          transform: translateZ(0);
                          box-shadow: 0 0 1px rgba(0, 0, 0, 0);
                          -webkit-backface-visibility: hidden;
                          backface-visibility: hidden;
                          -moz-osx-font-smoothing: grayscale;
                          -webkit-transition-duration: 0.3s;
                          transition-duration: 0.3s;
                          -webkit-transition-property: box-shadow, transform;
                          transition-property: box-shadow, transform;
                          padding: 11px 40px;
                          font-weight: 600;
                          border-radius: 20px;
                          border: none;
                          color: black;
                          background: #ffffff;
}
.sql-section .css-grid .btn10:hover{  -webkit-transform: scale(1.1);
  transform: scale(1.1);}
.sql-section .css-grid ul li .btn11{
                          -webkit-transform: translateZ(0);
                          transform: translateZ(0);
                          font-family: helvetica;
                          box-shadow: 0 0 1px rgba(0, 0, 0, 0);
                          -webkit-backface-visibility: hidden;
                          backface-visibility: hidden;
                          -moz-osx-font-smoothing: grayscale;
                          -webkit-transition-duration: 0.3s;
                          transition-duration: 0.3s;
                          -webkit-transition-property: box-shadow, transform;
                          transition-property: box-shadow, transform;
                          padding: 11px 29px;
                          font-weight: 600;
                          border-radius: 20px;
                          border: none;
                          color: white;
                          background: #1d1e22;
}
.sql-section .css-grid .btn11:hover{  -webkit-transform: scale(1.1);
  transform: scale(1.1);}
.languages-section{
    background: #000000;
    padding-bottom: 0;
}
.lan-panel{
    padding: 24px 23px;
}
.lang-grid-box{
      /***                        -webkit-transform: translateZ(0);
     transform: translateZ(0);
     box-shadow: 0 0 1px rgba(0, 0, 0, 0);
     -webkit-backface-visibility: hidden;
     backface-visibility: hidden;
     -moz-osx-font-smoothing: grayscale;
     -webkit-transition-duration: 0.3s;
     transition-duration: 0.3s;
     -webkit-transition-property: box-shadow, transform;
     transition-property: box-shadow, transform;****/
    background: #ffbfe5;
    border-radius: 10px;
    min-height: 229px;
    text-align: center;
    padding: 41px 31px;
}
.lang-grid-box:hover{
  background-image: linear-gradient(-45deg, #ffe9f1 0%, #f55b2a 100%);
  border: none;
  cursor: pointer;
}
.lang-name{
    font-weight: 700;
    font-family: helvetica;
    color: black;
    font-size: 26px;
}
.about-lang{
    font-family: helvetica;
    color: black;
    font-size: 18px;
}
.lang-btn{
    font-family: helvetica;
    padding: 8px 32px;
    font-weight: 600;
    border-radius: 20px;
    border: none;
    color: white;
    background: #1d1e22;
}
.lang-btn:hover{background: white;
color: black;
border: 1px solid white;}


.lang-grid-box2{
    background: #e9e0e5;
    border-radius: 10px;
    min-height: 229px;
    text-align: center;
    padding: 41px 31px;
}

.lang-grid-box2:hover{
    background-image: linear-gradient(
-45deg, #ffe9f1 0%, #2ad9f5 100%);
    border: none;
    cursor: pointer;
    }

.lang-grid-box3{
    background: #b1ffc5;
    border-radius: 10px;
    min-height: 229px;
    text-align: center;
    padding: 41px 31px;
}
.lang-grid-box3:hover{background-image: linear-gradient(
-45deg, #ffe9f1 0%, #c3f52a 100%);border: none;cursor: pointer;}

.lang-grid-box4{
    background: #f0ff75;
    border-radius: 10px;
    min-height: 229px;
    text-align: center;
    padding: 41px 31px;
}
.lang-grid-box4:hover{background-image: linear-gradient(
-45deg, #ffe9f1 0%, #bf576a 100%);border: none;cursor: pointer;}
.lang-grid-box5{
    background: #a2bceb;
    border-radius: 10px;
    min-height: 229px;
    text-align: center;
    padding: 41px 31px;
}
.lang-grid-box5:hover{background-image: linear-gradient(
-45deg, #ffe9f1 0%, #bfa457 100%);border: none;cursor: pointer;}
.lang-grid-box6{
    background: #afeb91;
    border-radius: 10px;
    min-height: 229px;
    text-align: center;
    padding: 41px 31px;
}
.lang-grid-box6:hover{background-image: linear-gradient(
-45deg, #ffe9f1 0%, #8d8284 100%);border: none;cursor: pointer;}



.lang-grid-box7{
    background: #f5bbff;
    border-radius: 0px 38px;
    /* min-height: 155px; */
    text-align: center;
    padding: 41px 31px;
}

.lang-grid-box8{
    background: #d0dcf1de;
    border-radius: 0px 38px;
    /* min-height: 155px; */
    text-align: center;
    padding: 41px 31px;
}



.lang-grid-box9{
    background: #b29cd5;
    border-radius: 0px 38px;
    /* min-height: 155px; */
    text-align: center;
    padding: 41px 31px;
}

.lang-grid-box10{
    background: #e56767;
    border-radius: 0px 38px;
    /* min-height: 155px; */
    text-align: center;
    padding: 41px 31px;
}


.lang-grid-box11{
    background: #eadede;
    border-radius: 0px 38px;
    /* min-height: 155px; */
    text-align: center;
    padding: 41px 31px;
}

.lang-grid-box12{
    background: #ffa500;
    border-radius: 0px 38px;
    /* min-height: 155px; */
    text-align: center;
    padding: 41px 31px;
}


.lang-grid-box13{
    background: #ddcfb5;
    border-radius: 0px 38px;
    /* min-height: 155px; */
    text-align: center;
    padding: 41px 31px;
}


.lang-grid-box14{
    background: #f78472;
    border-radius: 0px 38px;
    /* min-height: 155px; */
    text-align: center;
    padding: 41px 31px;
}


.lang-grid-box15{
    background: #7c74eb;
    border-radius: 0px 38px;
    /* min-height: 155px; */
    text-align: center;
    padding: 41px 31px;
}


.bottom-top{
    background: gray;
    padding: 24px 37px;
    min-height: 200px;
}
.bottom-head{
    font-size: 34px;
    font-family: helvetica;
    color: #9c4aeb;
    font-weight: 600;
    line-height: 2;
}
.bottom-pera{
    font-weight: 600;
    font-family: helvetica;
    line-height: 2;
    color: whiote;
    color: #ffffff;
    font-size: 24px;
}
.get-btn{
    font-family: helvetica;
    padding: 11px 32px;
    font-weight: 700;
    border-radius: 20px;
    border: none;
    background-image: -webkit-linear-gradient( 
169deg, rgb(85,96,255) 0%, rgb(255,67,67) 100%);
    color: white;
    /* background: #ffa500; */
}
.get-btn:hover{box-shadow: 0px 10px 15px 0px rgb(59 55 188 / 50%);}
.search-img{
    padding: 0;
}
.search-img img{width: 100%;max-height: 248px;}

.notification-section{
    text-align: center;
    background: #eadede;
}

.notification-section  P{
    color: black;
    font-family: helvetica;
}



.notification-bottom{
    background-image: linear-gradient(#00000040, #000000);
    background: linear-gradient(
109.61deg, #4C4F5A 4.26%, #202125 84.84%);
}
.notification-bottom .bottom-noti{
    padding: 73px 37px;
}
.notification-bottom .bottom-noti .bottom-grid{
    font-family: helvetica;
    color: white;
    font-weight: 500;
    font-size: 35px;
}


.contact-us-section{
    padding-top: 161px;
    background: black url(../../bg.png);
    background-size: cover;
}
.contact-carrer{
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    box-shadow: 0 0 1px rgb(0 0 0 / 0%);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -moz-osx-font-smoothing: grayscale;
    -webkit-transition-duration: 0.3s;
    transition-duration: 0.3s;
    -webkit-transition-property: box-shadow, transform;
    transition-property: box-shadow, transform;
    min-height: 300px;
    text-align: center;
    border-radius: 5px;
    background-color: rgb(29 30 34);
    box-shadow: 0px 10px 15px 0px rgb(59 55 188 / 50%);
    padding: 101px 30px;
    }
.contact-carrer:hover{    border: 1px solid #545454;
    box-shadow: 0 0 11px rgb(179 167 167 / 20%);
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
    background: black;}
.contact-img{
    text-align: center;
}
.contact-img img{
    width: 100%;
}
/************auto typing code*************/
 



 
.illustration-editor {
  margin-top: -2rem;
  margin-right: -10rem;
  display: grid;
  grid-template-rows: 24px auto;
  justify-items: center;
  position: relative;
}

.code {
  position: absolute;
  width: 290px;
  height: 173px;
  background: #1D1E22;
  box-shadow: 0px 4px 30px rgba(0, 0, 0, 0.5);
  border-radius: 6px;
  z-index: 5;
}
.code header {
  display: grid;
  grid-template-columns: 42px auto 39px;
  align-items: center;
}
.code header svg {
  margin: 10px;
}
.code header h1 {
  font-family: Lato, sans-serif;
  font-weight: 900;
  font-size: 14px;
  letter-spacing: 1.57px;
  color: #C5C8D4;
  margin: 0;
}
.code-html {
  left: 256px;
  top: 2px;
}
.code-css {
  left: 357px;
  top: 183px;
}
.code-js {
  left: 250px;
  top: 368px;
}
.code .code-content {
  margin: 0 10px 10px;
  color: white;
}
.code .code-content .c-r {
  color: #A88038;
}
.code .code-content .c-o {
  color: #DE7300;
}
.code .code-content .c-y {
  color: #E1CA72;
}
.code .code-content .c-g {
  color: #74B087;
}
.code .code-content .c-p {
  color: #9F8198;
}
.code .code-content .c-b {
  color: #7A99AD;
}
.code .code-content .c-c {
  color: #666666;
}


.editor-block {
  position: relative;
  display: block;
  width: 500px;
  height: 472px;
  background: linear-gradient(109.61deg, #4C4F5A 4.26%, #202125 84.84%);
  border-radius: 10px;
}


.code-content code .line-1 {
  width: 0%;
  margin: 0;
  border-right: 0.15em solid transparent;
  overflow: hidden;
  display: inline-block;
  white-space: nowrap;
}
.code-content code .line-2 {
  width: 0%;
  margin: 0;
  border-right: 0.15em solid transparent;
  overflow: hidden;
  display: inline-block;
  white-space: nowrap;
}
.code-content code .line-3 {
  width: 0%;
  margin: 0;
  border-right: 0.15em solid transparent;
  overflow: hidden;
  display: inline-block;
  white-space: nowrap;
}
.code-content code .line-4 {
  width: 0%;
  margin: 0;
  border-right: 0.15em solid transparent;
  overflow: hidden;
  display: inline-block;
  white-space: nowrap;
}
 .code-content code .line-5 {
  width: 0%;
  margin: 0;
  border-right: 0.15em solid transparent;
  overflow: hidden;
  display: inline-block;
  white-space: nowrap;
}
.code-content code .line-1 {
  animation: typing-1 3s 0s steps(30, end) forwards, cursor 1s linear 0s 3;
}
 .code-content code .line-2 {
  animation: typing-2 3s 3s steps(30, end) forwards, cursor 1s linear 3s 3;
}
 .code-content code .line-3 {
  animation: typing-3 3s 6s steps(30, end) forwards, cursor 1s linear 6s 3;
}
 .code-content code .line-4 {
  animation: typing-4 3s 9s steps(30, end) forwards, cursor 1s linear 9s 3;
}
 .code-content code .line-1, .code-html .code-content code .line-3, .code-html .code-content code .line-4 {
  animation-duration: 3s;
  animation-timing-function: steps(10, end);
}
 .code-content code .line-5 {
  border-color: transparent;
  animation: typing-5 3s 12s steps(30, end) forwards, cursor-persist 1s linear 12s infinite;
}
 .code-content code .line-2 {
  margin-left: 2rem;
}
.code-content code .line-3, .code-html .code-content code .line-4, .code-html .code-content code .line-5 {
  margin-left: 2rem;
}


/********html-autotyping code*******/

.autotype-code-panel{}
.code1 {
  position: absolute;
  width: 442px;
  height: 306px;
  background: #1D1E22;
  box-shadow: 0px 4px 30px rgba(0, 0, 0, 0.5);
  border-radius: 6px;
  z-index: 5;
}

.autotype-code-panel .code-1 {
  left: 717px;
  top: 1363px;
}


.code1 header {
  display: grid;
  grid-template-columns: 42px auto 39px;
  align-items: center;
}
.code1 header svg {
  margin: 10px;
}
.code1 header h1 {
  font-family: Lato, sans-serif;
  font-weight: 900;
  font-size: 14px;
  letter-spacing: 1.57px;
  color: #C5C8D4;
  margin: 0;
}



.code1 .code-content {
  margin: 0 10px 10px;
  color: white;
}
.code1 .code-content .c-r {
  color: #A88038;
}
.code1 .code-content .c-o {
  color: #DE7300;
}
.code1 .code-content .c-y {
  color: #E1CA72;
}
.code1 .code-content .c-g {
  color: #74B087;
}
.code1 .code-content .c-p {
  color: #9F8198;
}
.code1 .code-content .c-b {
  color: #7A99AD;
}
.code1 .code-content .c-c {
  color: #666666;
}



/**********css autotype code*************/
.code2 {
  position: absolute;
  width: 442px;
  height: 306px;
  background: #1D1E22;
  box-shadow: 0px 4px 30px rgba(0, 0, 0, 0.5);
  border-radius: 6px;
  z-index: 5;
}
.autotype-code-panel2{
    padding-top: 76px;
}
.autotype-code-panel2 .code-2 {
  left: 717px;
  top: 1363px;
}


.code2 header {
  display: grid;
  grid-template-columns: 42px auto 39px;
  align-items: center;
}
.code2 header svg {
  margin: 10px;
}
.code2 header h1 {
  font-family: Lato, sans-serif;
  font-weight: 900;
  font-size: 14px;
  letter-spacing: 1.57px;
  color: #C5C8D4;
  margin: 0;
}



.code2 .code-content {
  margin: 0 10px 10px;
  color: white;
}
.code2 .code-content .c-r {
  color: #A88038;
}
.code2 .code-content .c-o {
  color: #DE7300;
}
.code2 .code-content .c-y {
  color: #E1CA72;
}
.code2 .code-content .c-g {
  color: #74B087;
}
.code2 .code-content .c-p {
  color: #9F8198;
}
.code2 .code-content .c-b {
  color: #7A99AD;
}
.code2 .code-content .c-c {
  color: #666666;
}



















@keyframes typing-1 {
  from {
    width: 0;
  }
  to {
    width: 70px;
  }
}
@keyframes typing-2 {
  from {
    width: 0;
  }
  to {
    width: 220px;
  }
}
@keyframes typing-3 {
  from {
    width: 0;
  }
  to {
    width: 70px;
  }
}
@keyframes typing-4 {
  from {
    width: 0;
  }
  to {
    width: 75px;
  }
}
@keyframes typing-5 {
  from {
    width: 0;
  }
  to {
    width: 141px;
  }
}
@keyframes cursor {
  from, to, 20%, 80% {
    border-color: transparent;
  }
  25%, 75% {
    border-color: white;
  }
}
@keyframes cursor-persist {
  from, 45% {
    border-color: transparent;
  }
  50%, to {
    border-color: white;
  }
}