/************ CSS Styles ************

    Template Name: Taso - Personal Portfolio Template
    Author: Tanmoy Dhar
    version: 1.0
    Copyright: 2018

************************************/
/*==================================

        Table of Content
        1. Body Css
        2. Preloader
        3. Navbar
        4. Banner Section
        5. About Section
        6. Skill Section
        7. Services Section
        8. Portfolio Section
        9. Contact Section
        10. Footer
        11. Mobile Responsive

==================================*/

/*============ 1. Body Css ============*/
      * {
      -webkit-box-sizing: border-box;
      box-sizing: border-box;
      padding: 0;
      margin: 0;
      text-decoration: none ;
      list-style: none;
      outline: none !important; }

      h1,
      h2,
      h3,
      h4,
      h5,
      h6 {
      color: #3B4A3F; }

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

      a,
      a:hover,
      a:focus {
      color: inherit; }

      body {
      font-family: "Helvetica Neue",
      Arial,
      "Hiragino Kaku Gothic ProN",
      "Hiragino Sans",
      Meiryo,
      sans-serif;
      position: relative;
      font-size: 16px;
      line-height: 1.65;
      color: #646F70;
      -webkit-font-smoothing: antialiased; }

      p {
      font-size: 16px;
      line-height: 1.65;
      }

      span {
      display: inline-block; }

      .sp-only {
      display: none;
      }
      .arrow-right::after {
      font-family: "Font Awesome 5 Free";
      content: '\f061';
      font-weight: 900;
      padding-left: 0.5rem;}

      .send-mail::after {
      font-family: "Font Awesome 5 Free";
      content: '\f1d8';
      font-weight: 900;
      padding-left: 0.5rem;
      }

      /*===========Margin And Paddings============*/
      .mt-0 {
      margin-top: 0 !important; }

      .mt-5 {
      margin-top: 5px !important; }

      .mt-10 {
      margin-top: 10px !important; }

      .mt-15 {
      margin-top: 15px !important; }

      .mt-20 {
      margin-top: 20px !important; }

      .mt-25 {
      margin-top: 25px !important; }

      .mt-30 {
      margin-top: 30px !important; }

      .mt-35 {
      margin-top: 35px !important; }

      .mt-40 {
      margin-top: 40px !important; }

      .mt-45 {
      margin-top: 45px !important; }

      .mt-50 {
      margin-top: 50px !important; }

      .mt-55 {
      margin-top: 55px !important; }

      .mt-60 {
      margin-top: 60px !important; }

      .mt-62 {
      margin-top: 62px !important; }

      .mt-65 {
      margin-top: 65px !important; }

      .mt-70 {
      margin-top: 70px !important; }

      .mt-75 {
      margin-top: 75px !important; }

      .mt-80 {
      margin-top: 80px !important; }

      .mt-85 {
      margin-top: 85px !important; }

      .mt-90 {
      margin-top: 90px !important; }

      .mt-95 {
      margin-top: 95px !important; }

      .mt-100 {
      margin-top: 100px !important; }

      /* Custom Margin Bottom */
      .mb-0 {
      margin-bottom: 0 !important; }
      .mb-10 {
      margin-bottom: 10px !important; }
      .mb-15 {
      margin-bottom: 15px !important; }
      .mb-30 {
      margin-bottom: 30px !important; }
      .mb-35 {
      margin-bottom: 37px !important; }
      .mb-20 {
      margin-bottom: 20px !important; }
      .mb-50 {
      margin-bottom: 50px !important; }
      .mb-100 {
      margin-bottom: 100px !important; }

      .m-0 {
      margin: 0px !important; }

      /* Custom Padding top */
      .pt-0 {
      padding-top: 0 !important; }
      .pt-20 {
      padding-top: 20px !important; }
      .pt-30{
        padding-top: 30px !important; 
      }
      .pt-50 {
      padding-top: 50px !important; }
      .pt-100 {
      padding-top: 100px !important; }
      .pt-150 {
      padding-top: 150px !important; }

      /* Custom Padding top */
      .pb-0 {
      padding-bottom: 0 !important; }

      .pb-5 {
      padding-bottom: 5px !important; }
      .pb-20 {
      padding-bottom: 20px !important; }

      .pb-30 {
      padding-bottom: 30px !important; }

      .pb-50 {
      padding-bottom: 50px !important; }
      .pb-70{
      padding-bottom: 70px !important;  
      }
      .pb-100 {
      padding-bottom: 100px !important; }

      .p-0 {
      padding: 0 !important; }

      .owl-theme .owl-dot span {
      width: 20px !important; }

      .bg-gray {
      background-color: #F7F7F7; }

      .div-btn {
      display: inline-block;
      background-color: #639244;
      padding: 10px 30px;
      border: 2px solid #639244;
      border-radius: 5px;
      color: #fff;
      text-transform: uppercase;
      -webkit-transition: .2s background-color ease;
      -o-transition: .2s background-color ease;
      transition: .2s background-color ease;
      font-size: 14px;
      letter-spacing: 1px;
      font-weight: 600;
      cursor: pointer;
      margin-right: 10px;
      }
      .div-btn:hover {
      color:#639244;
      background-color: transparent; }

      .bread-crumb a {
      color: #fff;
      display: inline-block;
      margin: 0 10px;
      position: relative;
      font-size: 14px;
      text-transform: uppercase; }
      .bread-crumb a:before {
      content: "/";
      position: absolute;
      right: -15px; }
      .bread-crumb a:last-child:before {
      display: none; }

      blockquote {
      font-size: 15px;
      color: #3B4A3F;
      border-left: 4px solid #3B4A3F;
      padding-left: 20px;
      margin: 40px 0;
      font-weight: 500; }

      /*=========== Section Style ============*/

      .section-title p {
      color: #6f6e6e;
      }

      .section-padding {
      padding:120px 0;
      }
      .m-60 {
      margin: 0 60px;
      }

      .paddingtop{
      padding: 70px 0;
      }
      .section-title{
      margin-bottom: 55px;
      }
      .main-title h4 {
      font-size: 45px;
      text-transform: uppercase;
      margin-bottom: 5px;
      font-weight: 700;
      }
      .main-title h6 {
      font-size: 14px;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 2px;
      display: inline-block;
      padding: 0 15px;
      position: relative;
      }
      .main-title h6:before, .main-title h6:after {
      content: '';
      width: 30px;
      height: 3px;
      background-color: #639244;
      position: absolute;
      bottom: 8px;
      }
      .main-title h6:before {
      left: -25px;
      }
      .main-title h6:after {
      right: -25px;
      }
      .main-title {
      position:  relative;
      text-align:  center;
      }
      .section-title p{
      text-align: center;
      }

      .section-title p{
      margin-bottom: 50px;
      font-size: 16px;
      text-align: center;
      }
      .main-title span {
      color: #639244;
      font-weight: 700;
      }
      .divi-title {
      margin-bottom: 20px;
      }

      .divi-title h4 {
      font-size: 35px;
      font-weight: 600;
      position: relative;
      margin-bottom: 20px;
      }

      .divi-title span {
      color: #639244;
      }
      .divi-title h4:before {
      content: '';
      width: 40px;
      height: 3px;
      background-color: #639244;
      position: absolute;
      bottom: -10px;
      }

      /*============ 2. Preloader ============*/
      .preloader {
      width: 100%;
      height: 100%;
      position: fixed;
      background: #fff;
      z-index: 9999;
      }
      .sk-three-bounce {
      margin: 25% auto;
      width: 80px;
      text-align: center;
      }
      .sk-three-bounce .sk-child {
      width: 20px;
      height: 20px;
      background-color:  #639244;
      border-radius: 100%;
      display: inline-block;
      -webkit-animation: sk-three-bounce 1.4s ease-in-out 0s infinite both;
      animation: sk-three-bounce 1.4s ease-in-out 0s infinite both;
      }
      .sk-three-bounce .sk-bounce1 {
      -webkit-animation-delay: -0.32s;
      animation-delay: -0.32s;
      }
      .sk-three-bounce .sk-bounce2 {
      -webkit-animation-delay: -0.16s;
      animation-delay: -0.16s;
      }
      @-webkit-keyframes sk-three-bounce {
      0%, 80%, 100% {
      -webkit-transform: scale(0);
      transform: scale(0);
      }
      40% {
      -webkit-transform: scale(1);
      transform: scale(1);
      }
      }
      @keyframes sk-three-bounce {
      0%, 80%, 100% {
      -webkit-transform: scale(0);
      transform: scale(0);
      }
      40% {
      -webkit-transform: scale(1);
      transform: scale(1);
      }
      }


      /*============ 3. Navbar ============*/
      nav.navbar {
      position: absolute;
      width: 100%;
      top: 0;
      z-index: 999;
      padding-top: 30px;
      padding-bottom: 20px;
      -webkit-transition: all .5s ease;
      -o-transition: all .5s ease;
      transition: all .5s ease; }
      nav.navbar .navbar-toggler {
      border: 0;
      padding-right: 0;
      padding-left: 0; }
      nav.navbar .navbar-toggler .navbar-toggler-icon {
      background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(26,83,0, 1)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E");}
      nav.navbar .nav-item {
      font-size: 13px;
      font-weight: 400;
      padding-right: 13px;
      padding-left: 13px;
      color: #1A5300;
      text-transform: uppercase; }
      nav.navbar .nav-item:first-child {
      padding-left: 0; }
      nav.navbar .nav-item:last-child {
      padding-right: 0; }
      nav.navbar .nav-item .nav-link {
      color: #1A5300;
      position: relative;
      text-decoration: none;
      padding: 0; }
      nav.navbar .nav-item .nav-link:hover {
        color: #8FC31F;}
      nav.navbar .nav-item .nav-link.active {
        color: #1A5300;}
      nav.navbar .nav-item .nav-link:before {
      content: "";
      position: absolute;
      width: 2px;
      height: 14px;
      bottom: 3px;
      left: -6px;
      background-color: #1A5300;
      visibility: hidden;
      -webkit-transform: scaleY(0);
      -ms-transform: scaleX(0);
      transform: scaleY(0);
      -webkit-transition: all 0.3s ease-in-out 0s;
      -o-transition: all 0.3s ease-in-out 0s;
      transition: all 0.3s ease-in-out 0s; 
      }
      nav.navbar .nav-item .nav-link:after {
      content: "";
      position: absolute;
      width: 2px;
      height: 14px;
      bottom: 3px;
      right: -6px;
      background-color: #1A5300;
      visibility: hidden;
      -webkit-transform: scaleY(0);
      -ms-transform: scaleX(0);
      transform: scaleY(0);
      -webkit-transition: all 0.3s ease-in-out 0s;
      -o-transition: all 0.3s ease-in-out 0s;
      transition: all 0.3s ease-in-out 0s; 
      }
      nav.navbar .nav-item .nav-link.active:before {
        visibility: visible;
        -webkit-transform: scaleY(1);
        -ms-transform: scaleY(1);
        transform: scaleY(1);
         }
      nav.navbar .nav-item .nav-link.active:after {
        visibility: visible;
        -webkit-transform: scaleY(1);
        -ms-transform: scaleY(1);
        transform: scaleY(1);
         }

        nav.fixed-top {
        position: fixed;
        padding-top: 25px;
        padding-bottom: 25px;
        background-color: #fff;
        -webkit-box-shadow: 0px 0px 18px 1px rgba(0, 0, 0, 0.1);
        box-shadow: 0px 0px 18px 1px rgba(0, 0, 0, 0.1); }
        nav.fixed-top .navbar-toggler .navbar-toggler-icon {
        background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(0,0,0, 1)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E"); }
        nav.fixed-top .nav-item {
        color: #3B4A3F; }
        nav.fixed-top .nav-item .nav-link {
        color: #3B4A3F !important; }
        nav.fixed-top .nav-item .nav-link:hover {
          color: #8FC31F !important; }
        nav.fixed-top .nav-item .nav-link:before {
        background-color: #8FC31F; }
        nav.fixed-top .nav-item .nav-link:after {
        background-color: #8FC31F; }
        
        /*============ 4. Banner Section============*/
        .banner {
        position: relative;
        background-color: #F8FBEF;
        }
        .banner:after {
        content: " ";
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: -1;
        opacity: .6; }
        .banner-div {
        top: 50%;
        position: absolute;
        color:#1A5300;
        z-index: 11;
        -webkit-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
        transform: translateY(-50%); }
        .banner-div h1 {
        font-family: "Raleway", san-serif;
        font-size: 85px;
        font-weight: 700;
        letter-spacing: 0px;
        color: #1A5300;
        }
        .banner-div p {
        color: #1A5300;
        font-size: 25px;
        font-weight: 500;
        text-transform: capitalize;
        letter-spacing: 6px;
        margin-bottom: 20px;
        }
        .banner-div-center{
        text-align: center;
        width: 100%;
        left: 0px;
        }
        .cd-headline {
        font-size: 3rem;
        line-height: 1.2; }

        .cd-words-wrapper {
        display: inline-block;
        position: relative;
        text-align: left; }

        .cd-words-wrapper b {
        display: inline-block;
        position: absolute;
        white-space: nowrap;
        font-weight: 500 !important;
        left: 0;
        top: 0; }

        .cd-words-wrapper b.is-visible {
        position: relative; }

        .no-js .cd-words-wrapper b {
        opacity: 0; }

        .no-js .cd-words-wrapper b.is-visible {
        opacity: 1; }

        /* xclip */
        .cd-headline.clip span {
        display: inline-block;
        padding: .2em 0; }

        .cd-headline.clip .cd-words-wrapper {
        overflow: hidden;
        vertical-align: top; }

        .cd-headline.clip .cd-words-wrapper::after {
        /* line */
        content: '';
        position: absolute;
        top: 10%;
        right: 0;
        width: 2px;
        height: 70%;
        background-color: #aebcb9; }

        .cd-headline.clip b {
        opacity: 0; }

        .cd-headline b.is-visible {
        opacity: 1;
        font-weight: 700; }

        .arrow {
        position: absolute;
        bottom: 10vh;
        z-index: 11;
        padding-left: 0px;
        }
        .arrow a {
        color: #1A5300;
        text-decoration: none;
        }

        .bounce {
        -webkit-animation: bounce 2s infinite;
        animation: bounce 2s infinite; }

        .banner-center{
        top: 50%;
        position: absolute;
        left: 0px;
        color: #fff;
        text-align: center;
        z-index: 11;
        width: 100%;
        -webkit-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
        transform: translateY(-50%);
        }
        .arrow-center{
        position: absolute;
        bottom: 10vh;
        left: -15px;
        width: 100%;
        text-align: center;
        z-index: 11;
        padding-left: 0px;
        }

        .social-icons a i {
        font-size: 18px;
        width: 35px;
        height: 35px;
        background: #1A5300;
        text-align: center;
        color: #ffffff;
        line-height: 35px;
        border-radius: 50%;
        }

        h2.headline {
        margin-bottom: 15px;
        font-size: 45px;
        font-weight: 700;
        text-transform: uppercase;
        }
        h2.headline span {
        color: #639244;
        }

        .home-img img{
          height: 100vh;
          width: auto;
        }

       /*============ 5. About Section ============*/
        .about .about-img {
        position: relative; }

        .about .about-img img {
        position: relative;
        width: 100%;
        z-index: 1;
        transition: .3s;
        }
        .about-title h2 {
            margin-bottom: 15px;
          }
          .about-title {
          margin-bottom: 20px;
          }  
        .about .about-div .about-title h2 {
        font-size: 45px;
        font-weight: 700;
        text-transform: uppercase; }
        .about .about-div .about-title span {
        color: #639244;
        }
        .about-title h4 {
        color: #3B4A3F;
        font-size: 24px;
        }
        .about .about-div p {
        line-height: 28px; }

        table.info-table span {
            font-weight: 600;
        }
        .info-table {
        font-size: 16px;
        color: #696969;
        line-height: 26px;
        margin-top: 10px;
        margin-bottom: 10px;}

        .info-table th {
        position: relative;
        padding-right: 15px;
        text-transform: capitalize;
        z-index: 0;
        }

        .info-table th:after {
        content: ":";
        position: absolute;
        right: 0;
        font-weight: 400
        }

        .info-table th i {
        width: 30px;
        height: 30px;
        border: 2px solid #646F70;
        text-align: center;
        line-height: 25px;
        border-radius: 0px;
        font-size: 14px;
        color: #646F70;
        margin-right: 10px;
        margin-bottom: 10px;
        }

        .info-table td {
        margin-left: 8px;
        text-decoration: underline;
        display: inline-block;}
        .info-table tr+tr td,
        .info-table tr+tr th {
        padding-top: 5px
        }

        .info-table tr+tr th:after {
        top: 5px
        }
        table.info-table td:hover {
        border-color: #639244;
        color: #639244;
        }

      /*============ 6.  Skills Section ============*/
      .skills {
        position: relative;
        /* background-color: #f2f2f2; */
        overflow: hidden;
        }
        .skills .part-text h4 {
        font-size: 18px;
        font-weight: 700;
        }
        .skills .skill-div {
        position: relative;
        }
        .skills .skill-div .skills-item {
        position: relative;
        width: 100%;
        }
        .skills .skill-div .skills-item h6 {
        position: relative;
        font-size: 14px;
        font-weight: 600;
        margin-bottom: 10px;
        }
        .skills .skill-div .skills-item .bar {
        position: relative;
        width: 100%;
        height: 7px;
        background-color: #EDEDED
        ;
        border-radius: 4px;
        }
        .skills .skill-div .skills-item .bar .fill {
        position: absolute;
        width: 0;
        height: 100%;
        background-color: #639244;
        border-radius: 4px;
        -webkit-transition: all 3s;
        transition: all 3s;
        }
        .skills .skill-div .skills-item .bar .fill:before {
          content: attr(data-width);
              position: absolute;
              top: -30px;
              right: -15px;
              color: #3B4A3F;
              font-size: 14px;
              font-weight: 400;
        }
        .cd-headline.clip .cd-words-wrapper::after {
        content: '';
        position: absolute;
        top: 10%;
        right: 0;
        width: 2px;
        height: 70%;
        background-color: #fff;
        }
  
        section#home {
        width:  100%;
        height: 100vh;
        }

        /*============ 7. Services Section ============*/
        .service-item {
          background-color: #fff;
          text-align: center;
          padding: 20px 20px;
          border-radius: 7px;
          box-shadow: 0 1px 20px 1px rgba(0,0,0,.1);
          margin-bottom: 30px;
          height: 100%;
        }

        .service-icon {
        margin-top: 15px;
        margin-bottom: 15px;
        }
        .service-item h2 {
          margin-top: 10px;
          margin-bottom: 10px;
          font-weight: 500;
          font-size: 22px;
        }
        .service-item p span {
          font-size: 1.25rem;
        }
        .service-item .text-leftCenter {
          display: table;
          margin: 0 auto;
          text-align: left;
        }

        .service-icon i {
        height: 70px;
        width: 70px;
        line-height: 70px;
        background: #639244;
        color: #fff;
        border-radius: 50%;
        font-size: 30px;
        }
        .service-text h5 {
        font-weight: 600;
        }

        /*============ 8. Portfolio Section ============*/
        .portfolio .port-filter {
          margin-bottom: 40px; }
        .portfolio .port-filter ul li {
          display: inline-block;
          font-size: 13px;
          margin-right: 20px;
          position: relative;
          cursor: pointer;
          text-transform: uppercase;
          font-weight: 500;
          border: 1px solid currentColor;
          padding: 8px 12px;
          }
          .portfolio .port-filter ul li:last-child {
          margin-right: 0; }
          .portfolio .port-filter ul li:last-child:before {
          visibility: hidden; }
          .portfolio .port-filter ul li.filter-item {
          font-weight: 600;
          background: #639244;
          color: #fff;
          border-color: #639244;
          }

        .portfolio .portfolio-section .item {
        margin-bottom: 30px; }
        .portfolio .portfolio-section .item .portfolio-item {
        position: relative;
        overflow: hidden;
        margin-bottom: 7px;}
        .portfolio .portfolio-section .item .portfolio-item img {
        aspect-ratio: 16 / 10;
        object-fit: contain; }
        .portfolio .portfolio-section .item .portfolio-item .item-overlay {
        position: absolute;
        width: 100%;
        top: 50%;
        -webkit-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
        transform: translateY(-50%);
        text-align: center; }
        .portfolio .portfolio-section .item .portfolio-item .item-overlay h6 {
        text-transform: uppercase;
        -webkit-transform: translateY(-10px);
        -ms-transform: translateY(-10px);
        transform: translateY(-10px);
        opacity: 0;
        -webkit-transition: .5s all ease;
        -o-transition: .5s all ease;
        transition: .5s all ease;
        font-size: 14px;
        font-weight: 800;
        letter-spacing: 1px; }
        .portfolio .portfolio-section .item .portfolio-item:hover .item-overlay h6 {
        -webkit-transform: translateY(0);
        -ms-transform: translateY(0);
        transform: translateY(0);
        opacity: 1; }

        .item-overlay h6 {
        background: white;
        padding: 20px;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.36);
        }

        /* Project Details */
        .project-details-title h6 {
          margin-bottom: 25px;
        }
        .project-details-title h4 {
        font-size:  32px;
        font-weight:  600;
        margin-bottom: 25px;
      }
      .project-details-title.uppercase h4 {
          text-transform:  uppercase;
        }
        .project-details-title h6 {
        font-size: 18px;
        color: #639244;
        }
        .project-details-title h4 span {
        font-size: 18px;
        text-transform: none;
        }
        .project-details-table {
          margin-bottom: 25px;
        }
        .project-details-table table td {
        padding-bottom: 10px;
        }
        .project-details-table table tr:last-child td {
        padding-bottom: 0;
        }
        .project-details-table td span {
        padding-right: 10px;
        font-weight: 600;
        }
        .project-img img {
          object-fit: contain;
          box-shadow: 0 1px 20px 1px rgba(0,0,0,.1);
        }

        .project-description {
          margin-bottom: 25px;
        }
        .project-description tr {
          font-weight: 600;
        }
        .project-description ul {
          padding-left: 1em;
        }
        .project-description ul li{
          list-style: disc;
        }

        .page-title {
          height: 40vh;
          width: 100%;
          background-color: #F8FBEF;
          position: relative;
          overflow: hidden;
          z-index: 0; }
          .page-title-div {
          top: 50%;
          position: absolute;
          z-index: 11;
          width: 100%;
          left: 0;
          text-align: center;
          -webkit-transform: translateY(-50%);
          -ms-transform: translateY(-50%);
          transform: translateY(-50%); }
          .page-title-div h1 {
          font-size: 50px;
          font-weight: 700;
          letter-spacing: 0px;
          color: #1A5300;
          }

      /*============ 9. Contact Section ============*/

      .section-title.contact-title{
      margin-bottom: 0;
      }
      .contact-link {
      text-decoration: underline;
      }

      form#contact-form input {
      height: 50px;
      border-radius: 5px;
      }

      form#contact-form textarea {
      height: 170px;
      border-radius:  5px;
      margin-top: 15px;
      }

      .success {
      text-align:  center;
      background: #639244;
      color:  #fff;
      font-size: 18px;
      padding: 20px 15px;
      border-radius: 5px;
      box-shadow: 0 1px 27px -3px rgba(0,0,0,.2);
      }
      .contact-text h2 {
      font-size: 22px;
      }
      .contact-info-item i {
      /* margin-right: 10px; */
      width: 30px;
      height: 30px;
      border: 2px solid #646F70;
      text-align: center;
      line-height: 25px;
      border-radius: 0px;
      font-size: 14px;
      color: #646F70;
      margin-right: 10px;
      margin-bottom: 10px;
      }
      .contact-info-item i:hover {
      border-color: #639244;
      color: #639244;
      }
      button#contact-submit {
      margin-top: 15px;
      }

      /* privacy policy */
      .privacy-policy h3 {
      font-weight: 700;
      }
      .privacy-policy h4 {
      margin-top: 30px;
      }
      .privacy-policy ol {
      padding-left: 2rem;
      }
      .privacy-policy li {
      list-style-type: decimal;
      }

      /*============ 10. Footer  ============*/

      footer {
      background: #222; }
      footer .copy {
      font-size: 14px;
      color: #aaa; }

      /*============ 11. Mobile Responsive  ============*/
      @media screen and (max-width: 991px) {
      .sp-only{
      display: block;
      }
      .navbar-collapse {
      text-align: center;
      background: #1A5300;
      border-radius: 10px;
      }
      .navbar-collapse .nav-item {
      padding: 0 !important;}
      .navbar-collapse .nav-item a {
      color: #fff !important;
      display: inline-block;
      margin-top: 10px;
      margin-bottom: 10px; }
      .navbar-collapse .nav-item a:hover {
      color: #8FC31F !important;
      }
      nav.navbar .navbar-collapse .nav-item a:before,
      nav.navbar .navbar-collapse .nav-item a:after {
        background-color: #8FC31F;}
      .fixed-top .navbar-collapse {
      background-color: transparent; }
      .home-img{
      position: absolute;
      right: -12%;
      }
      .about .about-img:before {
      display: none; }
      button#contact-submit {
      margin-bottom: 50px;
      }
        .skills .skill-div {
            position: relative;
            margin-top: 50px;
        }
          .counter-area .counter-item h5 {
          margin-bottom: 30px;
          }
        .about .about-img {
            margin-top: 50px;
        }
      }

      @media screen and (max-width: 767px) {
      .banner-div h1 {
      font-size: 56px; }
      .banner-div p {
      font-size: 18px; }
      .home-img {
      right: -42%;
      }

      button#contact-submit {
       margin-bottom: 20px;
      }
      .post-slide {
      margin-bottom: 30px;
      }
      .port-filter ul li {
        margin-bottom: 15px;
      }
      .page-title-div h1 {
      font-size: 35px !important;
      font-weight: 700;
      letter-spacing: 0px;
      }
        .about .about-img img {
        position: relative;
        width: 100%;
        z-index: 1;
        box-shadow: none;
        }
        .portfolio .port-filter ul li {
            margin-right: 15px;
        }
        .social-icons a {
            margin-bottom: 10px;
            display: inline-block;
        }  
        form#contact-form textarea {
            height: 170px;
            border-radius: 0px;
            margin-top: 0px;
        }  
        form#contact-form input {
         margin-bottom: 30px;
        } 
        .counter-area .counter-item h2 {
              font-size: 35px;
          } 
        .testi-description {
            font-size: 16px;
        }
    .contact-info {
        margin-top: 50px;
    }
            .blog-grid .mb-20 {
              margin-bottom: 5px !important;
          }
        .main-title h4 {
            font-size: 35px;
            text-transform: uppercase;
            margin-bottom: 5px;
            font-weight: 700;
        }
          .main-title h6 {
              font-size: 12px;
          }
          .post-slide{
            margin-bottom: 50px;
          }
        .service-item {
          margin-bottom: 50px;
          height: unset;
        }
        .project-img img {
          height: 100%  ;
          box-shadow: 0 1px 20px 1px rgba(0,0,0,.1);
        }
        .project-img {
          margin-bottom: 50px;
        }
         }
      @media screen and (max-width: 370px){
      .main-title h4 {
      font-size: 35px;
      }
      .main-title h6:before {
      display: none;
      }
      .main-title h6:after {
      display: none;
      }
        table.info-table i {
            display: none;
        }
      span.about-btn a {
      margin-top: 15px;
      }

      span.about-btn {
      display:  inline-block;
      }
      .about .about-img img {
          position: relative;
          width: 100%;
          z-index: 1;
          box-shadow: none;
      }
      .banner-div {
                left: 0;
                text-align: left;
                padding-left: 15px;

            }
        table.info-table span {
            font-weight: 500;
            font-size: 13px;
        }
        .info-table td {
            padding-left: 8px;
            /* font-family: "Open Sans", sans-serif; */
            display: inline-block;
            font-size: 13px;
        }
        .div-btn {
            padding: 6px 20px;
        }
        .arrow-center {
            position: absolute;
            bottom: 10vh; 
            width: 100%;
             text-align: left; 
            z-index: 11;

            left: 15px;
            padding-left: 0px;
        }
      }