body{
        font-family: sans-serif;
      }
      h1,h2,h3,h4,h5,h6{
        font-family: serif;
      }

      #topSection{
        margin: 0 auto;
        display: flex;
        flex-direction: row;
        align-items: start;
        flex-wrap: wrap;
        grid-template: r;
        background-color: #ebf3f5d4;
        padding-top: 3t 6px !important;
        padding-bottom: 200px;
        height: 400px;
        width: 100%;
        margin-bottom: 80px;
        padding-right: 0 !important;
        padding-left: 0 !important;

      }
      #topSection h1{
        position: absolute;
        font-size: 35px;
        text-align: left;
      }

      /** Annimation **/
      #topSection h1,#projec{
        position: relative;
        left: -110%;
        color: #fff;
        animation: animate 1s forwards 1s;
      }

      #topSection #hero-text{
        line-height: 1em;
        letter-spacing: -0.2px;
        color: #fff;
        font-size: 26px;
        padding: 20px;
        background-color: #198754;
        width: 40%;
        height: 400px;
        margin-top: -47px;
      }

      #topSection img{
        width: 60%;
        margin-top: -47px;
        height: 400px;
      }

      #topSection .btns{
        margin-top: 100px;
      }
      #topSection > a{
        text-decoration: none;
        font-size: 25px;
      }

      .card h2{
        bottom: -300%;
        animation: card 1s forwards 3s;
      }

      .card > p{
        font-size: 18px;
      }


      form p{
        position: relative;
        right: 200%;
        animation: contact 2s forwards 2s;
      }
      input,textarea{
        position: relative;
        right: -200%;
        animation: input 1s forwards 3s;
      }

      @keyframes card h2{
        from{
          bottom: -300%;
        }
        to{
          bottom: 0;
        }
      }

      @keyframes input{
        from{
          right: -200%;
        }
        to{
          right: 0;
        }
      }

      @keyframes contact{
        from{
          right: -200%;
        }
        to{
          right: 0;
        }
      }
      @keyframes animate{
        from{
          left: -110%;
        }
        to{
          left: 0%;
        }
      }


      /** previous jobs list **/
      #projects{
        margin: 60px 0px;
      }
      #web-design-process .col{
        width: 47% !important;
      }
      

      #web-design-process .col{
        outline: auto #ccc;
        padding: 10px;
        margin: 10px;
      }

      #business{
        margin: 70px 0px;
      }
      .contactForm{
        background-color: #118a54;
        padding: 20px;
        width: 100%;
        margin: 20px 0px;
        color: #fff;
      }
      .contactForm form{
        margin: 0 auto;
        width: 40%;
      }
      .contactForm p,a{color: #fff; text-decoration: none;}
      #title{
        display: block;
      }

      .active{
        background-color: blue;
        padding: 10px 20px;
      }
      #technologies{
        margin:0 auto;
        width: 100%;
      }
      #technologies ul{
        display: flex;
        justify-content: left;
        padding: 20px;
        margin: 10px;
        background-color: #ebf3f5d4;
        flex-wrap: wrap;
        gap: 25px;
        list-style: none;
      }

      #aboutPage li{
          margin: 2px 0px;
          padding: 13px;
      }
      #technologies li img{
        box-shadow: 10px 10px 15px rgba(0, 0, 0, 0.5);
        width: 110px;
        height: 80px;
        object-fit: contain;
        object-position: center;
      }

      #technologies h1{
        margin-left: 30px;
        font-family: fantasy;
      }
      #aboutPage{
          max-width: 95%;
          margin-top: 100px;
      }
      #aboutPage p{
        text-align: left;
        font-size: 20px;
      }

      .card{
          height: 290px !important;
          border-radius: 10px;
          background-position: center;
          background-repeat: no-repeat;
          background-color: #118a54;
          color: #fff;
      }

      @property --angle{
        syntax: "<angle>";
        initial-value: 0deg;
        inherits: false;
      }

      .card::after,.card::before{
        content: '';
        position: absolute;
        height: 100%;
        width: 102%;
        background-image: conic-gradient(from var(--angle), red,blue);
        top:50%;
        left:50%;
        translate: -50% -50%;
        z-index: -1;
        padding: 5px;
        border-radius: 10px;
        animation: 3s spin linear infinite;
      }
      .card::before{filter: blur(3.5px); opacity: 1}

      @keyframes spin{
        from{
         --angle: 0deg;
        }

        to{
          --angle:360deg;
        }
      }

      .flipfront{
        -webkit-transform: perspective(600px) rotateY(0deg);
        transform: perspective(600px) rotateY(0deg);
        background-color: #2d61bf;
        transition: -webkit-transform 0.5s linear 0s;
        transition: transform 0.5s linear 0s;
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden;
        color: #fff;
        border-radius: 10px;

      }

      .flipback{
        -webkit-transform: perspective(600px) rotateY(0deg);
        transform: perspective(600px) rotateY(180deg);
        background-color: #118a54;
        transition: -webkit-transform 0.5s linear 0s;
        transition: transform 0.5s linear 0s;
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden;
        color: #fff;
        margin-top: -295px;
        height: 300px;
        border-radius: 10px;
      }


      .card:hover > .flipfront{
        -webkit-transform: perspective(600px) rotateY(-180deg);
        transform: perspective(600px) rotateY(-180deg);
      }
      .card:hover > .flipback{
        -webkit-transform: perspective(600px) rotateY(0deg);
       }  


      .flip3D{
        position: relative;
        height: 250px; width: 300px;
        border-radius: 7px;
        background-color: #118a54;
        padding: 20px;
        margin: 10px;
        float: left;
      }
      .flip3D > .businessCard1{
        height: 55px;
        width: 100%;
        background-color: #118a54;
        color: #fff;
        margin: 0;
        margin-top: -19px;
        margin-left: -19px;
        padding: 20px;
        font-size: 12px;
      }

      .businessCard1 hr{
        color: #fff;
      }

      .flip3D > .businessCard2{
        height: 55px;
        width: 100%;
        background-color: #118a54;
        color: #fff;
        margin: 0;
        margin-top: -19px;
        margin-left: -19px;
        padding: 20px;
        font-size: 12px;
      }

      .flip3D > .businessCard3{
        height: 55px;
        width: 100%;
        background-color: #118a54;
        color: #fff;
        margin: 0;
        margin-top: -19px;
        margin-left: -19px;
        padding: 20px;
        font-size: 12px;
      }
      .flip3D > .businessCard1 img{
        height: 55px;
        width: 70px;
        margin-top: -20px;
        margin-left: -19px;
        object-fit: contain;
      }

      .flip3D > .businessCard2 img{
        height: 55px;
        width: 70px;
        margin-top: -20px;
        margin-left: -19px;
        object-fit: contain;
      }

      .flip3D > .businessCard3 img{
        height: 55px;
        width: 70px;
        margin-top: -20px;
        margin-left: -19px;
        object-fit: contain;
      }

      .flip3D > .back{
        position: absolute;
        -webkit-transform: perspective(600px) rotateY(0deg);
        transform: perspective(600px) rotateY(180deg);
        background-color: #118a54;
        transition: -webkit-transform 0.5s linear 0s;
        transition: transform 0.5s linear 0s;
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden;
        color: #fff;
        top: 37%;
      }
      .flip3D > .front{
        position: absolute;
        -webkit-transform: perspective(600px) rotateY(0deg);
        transform: perspective(600px) rotateY(0deg);
        background-color: #118a54;
        transition: -webkit-transform 0.5s linear 0s;
        transition: transform 0.5s linear 0s;
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden;
        color: #fff;
        top: 37%;

      }

      .flip3D:hover > .front{
        -webkit-transform: perspective(600px) rotateY(-180deg);
        transform: perspective(600px) rotateY(-180deg);
      }
      .flip3D:hover > .back{
        -webkit-transform: perspective(600px) rotateY(0deg);
        transform: perspective(600px) rotateY(0deg);
      }
      .slogan{
        position: relative;
        top: -12px;
        padding: 20px;
        font-size: 13px;
      }
      .flipback button{
        margin-top: -60px;
        height: 30px;
        width: 100px;
      }
      .flipback a {
          color: #fff;
          text-decoration: none;
    }

          .designProcess {
            width: 80%;
            margin: 0 auto;
            padding: 20px;
            background: #fff;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        }
        h1 {
            text-align: center;
        }

        .step-title {
            font-weight: bold;
            color: #333;
            text-align: left;
        }

        footer{
          height: 100px;
          min-height: 100px;
          background: #118a54;
          color: #fff !important;
          text-align: center;
        }


      @media screen and (max-width: 1024px){
        flip3D > .businessCard1,.businessCard2,.businessCard3{width: 100%;}
        #topSection img{
          order: 1;
          width: 103%;
          margin-top: 42px;
          height: 230px;
        }
      }
      
      @media screen and (max-width: 767px){

        flip3D .businessCard1,.businessCard3,.businessCard3{width: 100%}
        #topSection{
          width: 100%;
        height: auto;
        margin-bottom: 20px;
        background-color: #9ea8abd4;
        margin-left: 0px;
        }
        #topSection img{
          order: 1;
          width: 103%;
          margin-top: 42px;
          height: 210px;
        }

        #topSection #hero-text {
          order: 2;
          margin: 0 auto;
          width: 103%;
          min-height: 230px;
        }

        .contactForm{
          width: 100%;
        }

        .contactForm form{
          margin: 0 auto;
          width: 90%;

          }

        .flipfront{
          margin: 0 auto;
          width: 95%;
        }

        #technologies{
          margin: 0 auto;
          width: 100%;
          padding: 0px;
          margin-left: -10px;
        }

        #technologies ul img{
          width: 105px;
        }
      }

    @media screen and (max-width: 500px){
        #topSection{margin-top: -58px;min-height: 580px;}
        #topSection img{margin-top: 85px;height: 200px;}
        #topSection #hero-text {
          width: 100%;
          margin-left: 0px;
          font-size: 20px;
          min-height: 230px;
          max-height: 230px;
        }
        .contactForm form{
          margin: 0 auto;
          width: 100%;
        }
      }


      @media screen and (max-width: 400px){
        #topSection{margin-top: -70px;min-height: 550px;}
        #topSection img{
          margin-top: 100px;
        }
        #topSection #hero-text {
        width: 103%;
        margin-left: 0px;
        font-size: 20px;
        margin-left: -8px;
        min-height: 230px;
        max-height: 250px;
        }
      }
      @media screen and (max-width: 320px){
      #topSection{
        width: 108%;
        margin-top: -44px;
        margin-left: -12px;
      }
        #topSection #hero-text {
          width: 100%;
          margin-left: 0px;
          font-size: 15px;
        }
      }