/* body section start  */

         @import url('https://fonts.googleapis.com/css2?family=Artifika&family=PT+Serif&display=Noto+Sans+HK:wght@300&display=swap');
         /* should be used after new login form commented css */
         /* @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@600&display=swap'); */
         /* should be used after new login form commented css */
         h2 {
             letter-spacing: 2px !important;
             font-family: 'Artifika', serif;
         }
         .help-block{
            color:red !important;
        }
         a{
             text-decoration: none !important;
             cursor: pointer !important;
         }
         i {
             font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
         }
 
         h3 {
             letter-spacing: 1px;
         }
 
         p {
             font-family: Arial, Helvetica, sans-serif;
             letter-spacing: 0.02vw;
             color: #000;
         }
 
         body {
             background-color: #f0f7fa;
             overflow-x: hidden;
            }
 
         html {
             scroll-behavior: smooth;
             text-decoration: none !important;
         }
 
         /* navbar start */
         .navcol {
             background: #030303;
         }
         .navbar-nav .nav-item .nav-link{
             color: #fff !important;
             cursor: pointer !important;
         }

         .navbar-nav .nav-item .nav-link i{
            margin-top: 5px !important;
         }
         .navbar-nav .nav-item .nav-link:hover{
             color: #ffdf6c !important;
         }
 
         .navbar-nav .nav-item:after {
             position: absolute !important;
             bottom: -5px !important;
             left: 0;
             width: 100%;
             height: 2px;
             content: '';
             background-color: #ffdf6c !important;
             opacity: 0 !important;
             transition: all 200ms linear !important;
           }
           
           .navbar-nav .nav-item:hover:after {
             bottom: 0;
             opacity: 1;
           }
           
           .navbar-nav .nav-item.active:hover:after {
             opacity: 0;
           }
           
           .navbar-nav .nav-item {
             position: relative;
             transition: all 200ms linear !important;
           }
 
         .navbar .dropdown-menu div[class*="col"] {
             margin-bottom: 1rem !important;
         }
 
         .navbar-brand {
             padding: 0% !important;
             margin: 0px !important;
         }
 
         .navbar-brand img {
             height: 55px;
             width: 190px;
             padding: 0% !important;
             margin-right: 3px !important;
         }
 
         .navbar .dropdown-menu {
             border: none;
         }
 
         @media screen and (min-width: 992px) {
 
             .navbar {
                 padding-top: 0px;
                 padding-bottom: 0px;
             }
 
             .navbar .nav-item {
                 padding: 2px 0% !important;
                 margin: 0px 0.15rem;
             }
 
             .navbar .dropdown {
                 position: static;
             }
 
             .navbar .dropdown-menu {
                 left: 0;
                 right: 0;
                 top: 45px;
                 display: block;
                 visibility: hidden;
                 opacity: 0;
             }
 
             .navbar .dropdown:hover .dropdown-menu,
             .navbar .dropdown .dropdown-menu:hover {
                 display: block;
                 visibility: visible;
                 opacity: 1;
             }
 
             .navbar .dropdown-menu {
                 border: 1px solid rgba(0, 0, 0, .15);
                 background-color: #fff;
             }
         }
 
         @media (max-width: 991.98px) {
             .top {
                 display: none;
             }
 
             .nav-top {
                 display: none;
             }
 
             .searchinput {
                 display: none;
             }
 
         }
 
 
         /* First Navbar end */
         /* Top SideBard start -----------------------------------------------------*/
         /* For right Arrow in Card end */
         ::-webkit-scrollbar {
            width: 6px;
        }
         
        ::-webkit-scrollbar-track {
            background-color: #b3b3b3;
        }
         .div-fixed{
             display:block;
             max-height:25em;
             width: 100%;
             overflow-y:auto;
         }
         .table-fixed{
             display:block;
             max-height:25em;
             width: 100%;
             overflow-y:auto;
         }
         .table-fixed{
             display:block;
             max-height:25em;
             width: 100%;
             overflow-y:auto;
         }
         .table-fixed thead{
           display:table;
           width:100%;
           table-layout:fixed;
           position: -webkit-sticky;
           position: sticky;
           top: 0;
         }
         .table-fixed tbody tr {
           display:table;
           width:100%;
           table-layout:fixed;
         }
         .table-fixed tr {
           display:table;
           width:100%;
           table-layout:fixed;
         }
         .tabs_wrapper {
             width: 98%;
             text-align: center;
             margin-top: 0 1%;
             background: transparent;
         }
 
         ul.tabs {
             display: inline-block;
             vertical-align: top;
             position: relative;
             z-index: 2;
             margin: 30px 0;
             padding: 0;
             width: 22%;
             min-width: 178px;
             list-style: none;
         }
 
         .tabs li {
             cursor: pointer;
             padding: 10% 0%;
             height: 5.5em;
             color: #fff;
             font-size: 1.2em;
             font-weight: bold;
             top: 0px;
             margin: 6% 0%;
             border-radius: 10px;
             text-align: left;
             border: 1px solid #fff;
             background-color: #080808;
             letter-spacing: 1px;
             font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
         }
 
         .tabs li:hover {
             background-color: #ced7d8;
             color: #eaebec;
         }
 
         .tabs li.active {
             /* position: relative; */
             background-color: #fff;
             color: #000;
         }
 
         .tabs li.active.arrow_right:after {
             content: " ";
             position: absolute;
             right: -28px;
             margin-top: 0px;
             border-top: 28px solid transparent;
             border-right: none;
             border-left: 28px solid #fff;
             border-bottom: 28px solid transparent;
         }
 
         .tab_container {
             display: inline-block;
             vertical-align: top;
             position: relative;
             margin-top: 1%;
             z-index: 1;
             left: 2%;
             width: 76%;
             border-radius: 10px;
             min-width: 10px;
             text-align: left;
             /* opacity: 0.3; */
             background: rgb(247, 244, 244);
             background: hsla(0, 100%, 100%, 0.502);
             box-shadow: 0px 0px 10px #0a0a0a;
         }
 
         .tab_content {
             padding: 10px;
             height: 100%;
             display: none;
         }
 /* Profile Css Start */
 
.container_nav {
    max-width: 1370px;
    margin: 0 auto;
    background-color: #fff;  
    }
    
    .profile_nav > ul {
      display:flex;
      margin: 0;
      padding: 0;
      justify-content: space-around;
      height: 100%;
    }
        
    .profile_nav > ul > li {
        list-style:none;
        height: 100%;
        border-right:1px solid red;
        width: 100%;
        text-align: center;
       position: relative;
    }
          
    .profile_nav > ul > li > a {
          color: #fff;
          text-decoration: none;
          display: inline-block;
          padding: 16px 0;
          width: 100%;
          /* font-weight: bold; */
          text-transform: uppercase;
          background-color: #0277C6;
    }
    
    .profile_nav > ul > li > a:hover {
    background-color: #000;
    color: #fff;
    }
    .profile_nav > ul > li > span {
        cursor:pointer;
        color: #fff;
        text-decoration: none;
        display: inline-block;
        padding: 16px 0;
        width: 100%;
        /* font-weight: bold; */
        text-transform: uppercase;
        background-color: #0277C6;
    }
    
    .profile_nav > ul > li > span:hover {
        cursor:pointer;
        background-color: #000;
        color: #fff;
    }
    @media only screen and (max-width: 768px) {
        .profile_nav > ul > li > a {
          color: #fff;
          padding: 1px 0;
          width: 100%;
          text-transform: uppercase;
          font-size:8px !important;
        }
    
        .profile_nav > ul > li > span {
            cursor:pointer;
            color: #fff;
            padding: 1px 0;
            width: 100%;
            text-transform: uppercase;
            font-size:8px !important;
        }
        h4{
            font-size:8px !important;
        }
        .h2{
            font-size:12px !important;
        }
    }
 /* Profile Css End */
         @media screen and (max-width: 781px) {
             ul.tabs {
                 display: inline-block;
                 vertical-align: top;
                 position: relative;
                 z-index: 2;
                 /* float: left; */
                 margin: 0px 2px;
                 /* padding: 0; */
                 width: 50%;
                 min-width: 40px;
                 list-style: none;
             }
 
             .tabs li.active.arrow_right:after {
                 content: " ";
                 position: absolute;
                 right: -20px;
                 margin-top: 0px;
                 border-top: 20px solid transparent;
                 border-right: none;
                 border-left: 20px solid #ffdf6c !important;
                 border-bottom: 20px solid transparent;
             }
 
             .tabs img {
                 display: none;
             }
 
             .tab_container {
                 display: block;
                 margin: 0 auto;
                 width: 100%;
                 border-top: none;
                 border-radius: 0;
                 box-shadow: 0px 0px 10px black;
             }
 
             .d_active {
                 background: #fff;
                 background: #0a0a0a;
             }
         }
 
         /* Progress Bar start */
 
         .line-container {
             margin-top: 3vh;
             display: flex;
             width: 100%;
         }
 
         .line-container .progress-line {
             position: relative;
             margin: 0 auto;
             border-radius: 10px;
             width: 90%;
             background: grey;
             height: 5px;
             z-index: -1;
             display: flex;
             justify-content: space-between;
         }
 
         .line-container .progress-line .progress {
             position: absolute;
             width: 100%;
             height: 100%;
             background: #ffdf6c;
             /* transition: width 1s ease-in-out; */
         }
 
         .line-container .status {
             position: relative;
             top: -9.5px;
         }
 
         .line-container .status h4 {
             letter-spacing: 1px;
         }
 
         .line-container .status .dot {
             width: 25px;
             height: 25px;
             border-radius: 50%;
             background: white;
             border: 5px solid grey;
             cursor: pointer;
         }
 
         .line-container .status .dot.current {
             background: white;
             border: 5px solid #ffdf6c;
         }
 
         .line-container .status .dot.completed {
             position: relative;
             background: #ffdf6c;
             border: 5px solid #ffdf6c;
         }
 
         .line-container .status .dot.completed::after {
             content: '';
             position: absolute;
             top: calc(50% - 5px);
             left: calc(50% - 5.5px);
             height: 5px;
             width: 10px;
             border-left: 2px solid white;
             border-bottom: 2px solid white;
             transform-origin: center;
             transform: rotate(-45deg);
             z-index: 2;
         }
 
         /* Progress Bar end */
         /* Top SideBard end -------------------------------------------------------------------------*/
         /* Second Navbar dropdown end */
         /* Page Load popup Section Start  */
         .section-services {
             padding: 2% 0%;
             font-family: "Poppins", sans-serif;
             background-color: #524e58;
             border-radius: 5px;
             color: #fff;
         }
 
         .section-services .header-section {
             margin-bottom: 2px;
         }
 
         .section-services .header-section .title {
             position: relative;
             padding-bottom: 5px;
             text-transform: uppercase;
         }
 
         .section-services .header-section .title:before {
             content: "";
             position: absolute;
             bottom: 0;
             left: 50%;
             transform: translateX(-50%);
             width: 140px;
             height: 1px;
             background-color: #ffdf6c;
         }
 
         .section-services .header-section .title:after {
             content: "";
             position: absolute;
             bottom: -1px;
             left: 50%;
             transform: translateX(-50%);
             width: 45px;
             height: 3px;
             background-color: #ffdf6c;
         }
 
         .section-services .header-section .title span {
             color: #ffdf6c;
         }
 
         .section-services .header-section .description {
             color: #6f6f71;
         }
 
         .engimg {
             height: 15em;
             width: 9em;
         }
 
         .section-services .single-service {
             margin-top: 1em;
             border-radius: 10px;
             background-color: #24252a;
             box-shadow: 2px 3px 4px #b8b9be, -2px -2px 4px #fff;
         }
 
         .section-services .single-service .part-1 {
             padding: 7px 10px;
             height: 100px;
             border-bottom: 2px solid #1d1e23;
         }
 
         .section-services .single-service .part-1 i {
             margin-bottom: 5px;
             font-size: 2em;
             color: #ffdf6c;
         }
 
         .section-services .single-service .part-1 .title {
             font-size: 17px;
             letter-spacing: 1px;
             line-height: 1.8em;
         }
 
         /* Page Load popup Section End */
         .dsec h5 {
             color: #000;
             font-size: 18px;
             padding: 20px 0 50px;
             position: relative;
         }
 
         .fa {
             margin-right: 1%;
         }
 
         /* Modal button strt  */
 
         .-box-sd-effect1 {
             box-shadow: 0 4px 8px rgba(60, 61, 61, 0.2);
             background-color: #c4c4c4;
             color: #000;
             padding: 2% 3%;
             font-size: 1.3em;
             margin: 2% 0%;
             width: 265px;
         }
 
         .-box-sd-effect2 {
             box-shadow: 0 4px 8px rgba(60, 61, 61, 0.2);
             background-color: #ffdf6c;
             color: #000;
             padding: 2% 3%;
             font-size: 1.3em;
             margin: 2% 0%;
             width: 265px;
         }
 
         .-box-sd-effect3 {
             box-shadow: 0 4px 8px rgba(60, 61, 61, 0.2);
             background-color: #979795;
             color: #fff;
             padding: 2% 3%;
             font-size: 1.3em;
             margin: 2% 0%;
             width: 265px;
         }
 
         .-box-sd-effect4 {
             box-shadow: 0 4px 8px rgba(60, 61, 61, 0.2);
             background-color: #0c0c0c;
             color: #fff;
             padding: 2% 2%;
             font-size: 1.2em;
             margin: 2% 0%;
             width: 265px;
         }
 
         .-box-sd-effect4:hover {
             color: #fff;
         }
 
         .-box-sd-effect i {
             color: #fff;
         }
 
         /* Modal button end  */
         /* search input start*/
 
         .table.gsc-search-box {
             margin: 0% !important;
             padding: 0px !important;
         }
 
         .gsc-input-box {
             border-radius: 40px !important;
             border: #fff !important;
         }
 
         .gsc-control-cse {
             padding: 0px;
             margin: 0px;
         }
 
         .gsc-control-cse,
         .gsc {
             background-color: #fff !important;
             border: #000;
             height: 37px;
             width: 350px !important;
             margin-top: -2% !important;
             padding: 0px 0px !important;
             border-radius: 40px;
         }
 
         .gsc-search-button-v2 {
             background-color: #1a0be9 !important;
             border-radius: 40px !important;
             margin-top: 5%
         }
 
         /* search input end*/
         /* Second Navbar start */
 
         /* dropdown */
         .nav-card1 {
             width: 15em !important;
             margin-left: 9%;
             border-top: 6px solid #f0bc03 !important;
         }
 
         .nav-card1 ul {
             margin: 0% 10px !important;
             padding: 0% 2% !important;
         }
         .nav-card3 {
            width: 225px !important;
            margin-left: 51%;
            border-top: 6px solid #f0bc03 !important;
        }
         .nav-card4 {
            width: 225px !important;
            margin-left: 64%;
            border-top: 6px solid #f0bc03 !important;
        }

        .nav-card3 ul {
            margin: 0% 3% !important;
            padding: 0% 2% !important;
        }
        .nav-card4 ul {
            margin: 0% 3% !important;
            padding: 0% 2% !important;
        }
        .nav-card5 {
            width: 300px !important;
            margin-left: 75%;
            border-top: 6px solid #f0bc03 !important;
        }
        .nav-card5 ul {
            margin: 0% 3% !important;
            padding: 0% 2% !important;
        }
         .nav-card {
             width: 470px !important;
             margin-left: 12% !important;
             position: absolute !important;
             z-index: -1000 !important;
             border-top: 6px solid #f0bc03 !important;
         }
 
         .list-unstyled a li {
             /* font-size: 15px !important; */
             padding-top: 0px !important;
             /* font-family: 'Raleway', sans-serif; */
         }
 
         .list-unstyled a li i {
             /* font-size: 18px; */
             color: #000 !important;
         }
 
         .nav-card ul {
             margin: 0% 3% !important;
             padding: 0% 2% !important;
         }
 
         .nav-card ul a {
             margin-top: 0% !important;
         }
 
         @media only screen and (max-width:1200px) {
             .nav-card {
                 width: 100% !important;
                 margin-left: 0% !important;
             }
 
             .nav-card ul a li {
                 color: black !important;
             }
             .nav-card ul a li:hover {
                 color: black !important;
             }
 
             .nav-card1 {
                 width: 100% !important;
                 margin-left: 0% !important;
                 border-top: 6px solid #f0bc03 !important;
             }
 
             .nav-card1 ul a li {
                 color: black !important;
             }
             .nav-card1 ul a li:hover {
                 color: black !important;
             }
             .nav-card3 {
                width: 100% !important;
                margin-left: 0% !important;
                border-top: 6px solid #f0bc03 !important;
            }
             .nav-card4 {
                width: 100% !important;
                margin-left: 0% !important;
                border-top: 6px solid #f0bc03 !important;
            }

            .nav-card3 ul a li {
                color: black !important;
            }
            .nav-card4 ul a li {
                color: black !important;
            }
            .nav-card3 ul a li:hover {
                color: black !important;
            }
            .nav-card4 ul a li:hover {
                color: black !important;
            }
            .nav-card5 ul a li {
                color: black !important;
            }
            .nav-card5 ul a li:hover {
                color: black !important;
            }
            .nav-card5 {
                width: 100% !important;
                margin-left: 0% !important;
                border-top: 6px solid #f0bc03 !important;
            }
         }
 
         .nav-card ul {
             margin: 0% 3% !important;
             padding: 0% 2% !important;
         }
 
         .nav-card ul a {
             margin-top: 0% !important;
         }
 
         @media only screen and (max-width:1200px) {
             .nav-card {
                 width: 100% !important;
                 margin-left: 0% !important;
             }
 
             .nav-card ul a li {
                 color: black !important;
             }
 
             .nav-card1 {
                 width: 100% !important;
                 margin-left: 0%;
                 border-top: 6px solid #ffdf6c !important;
             }
 
             .nav-card1 ul a li {
                 color: black;
             }
             .nav-card3 {
                width: 100% !important;
                margin-left: 0%;
                border-top: 6px solid #ffdf6c !important;
            }

             .nav-card4 {
                width: 100% !important;
                margin-left: 0%;
                border-top: 6px solid #ffdf6c !important;
            }

            .nav-card3 ul a li {
                color: black;
            }
            .nav-card4 ul a li {
                color: black;
            }
            .nav-card5 ul a li {
                color: black !important;
            }
            .nav-card5 ul a li:hover {
                color: black !important;
            }
            .nav-card5 {
                width: 100% !important;
                margin-left: 0% !important;
                border-top: 6px solid #f0bc03 !important;
            }
         }
 
         .ftco-navbar-light {
             background: transparent !important;
             background: #f9f9f9 !important;
             position: absolute;
             top: 60px;
             left: 0;
             right: 0;
             height: 40px;
             z-index: 7;
             padding: 0;
         }
 
         .secondnav .nav-item .nav-link {
             color: #000 !important;
             font-size: 17px;
             margin: 0px 18px;
             transform: translateY(0);
         }
 
         .secondnav .nav-item .nav-link:hover {
             color: #ffdf6c !important;
         }
 
         @media (min-width: 992px) {
             .ftco-navbar-light {
                 border-bottom: 1px solid rgba(255, 255, 255, 0.1);
                 /* border-bottom: 1px solid #021b79; */
             }
         }
 
         @media (max-width: 991.98px) {
             .ftco-navbar-light {
                 background: #5f5e5e !important;
                 position: relative;
                 top: 0;
                 height: 100%;
                 padding: 10px 15px;
             }
 
             .secondnav .nav-item .nav-link {
                 color: #000 !important;
                 margin-left: 0px;
                 padding: 0px !important;
             }
         }
 
         @media (max-width: 991.98px) {
             .ftco-navbar-light .navbar-nav {
                 padding-bottom: 10px;
             }
         }
 
         .ftco-navbar-light .navbar-nav>.nav-item>.nav-link {
             font-size: 16px !important;
             padding-top: .8rem;
             padding-bottom: .8rem;
             padding-left: 20px;
             padding-right: 15px;
             color: #fff;
             font-family: Arial, Helvetica, sans-serif;
             letter-spacing: 1px;
             /* opacity: 1 !important; */
         }
 
         .ftco-navbar-light .navbar-nav>.nav-item>.nav-link:hover {
             color: #fff;
         }
 
         @media (max-width: 991.98px) {
             .ftco-navbar-light .navbar-nav>.nav-item>.nav-link {
                 padding-left: 0;
                 padding-right: 0;
                 padding-top: .9rem;
                 padding-bottom: .9rem;
                 color: #000;
             }
 
             .ftco-navbar-light .navbar-nav>.nav-item>.nav-link:hover {
                 color: #fff;
             }
         }
 
         .ftco-navbar-light .navbar-nav>.nav-item .dropdown-menu {
             border: none;
             background: #fff;
             -webkit-box-shadow: 0px 10px 34px -20px rgba(0, 0, 0, 0.41);
             -moz-box-shadow: 0px 10px 34px -20px rgba(0, 0, 0, 0.41);
             box-shadow: 0px 10px 34px -20px rgba(0, 0, 0, 0.41);
         }
 
         .ftco-navbar-light .navbar-nav>.nav-item .dropdown-menu .dropdown-item {
             font-size: 14px;
         }
 
         .ftco-navbar-light .navbar-nav>.nav-item .dropdown-menu .dropdown-item:hover,
         .ftco-navbar-light .navbar-nav>.nav-item .dropdown-menu .dropdown-item:focus {
             background: transparent;
             color: #000;
         }
 
         @media (max-width: 991.98px) {
             .ftco-navbar-light .navbar-nav>.nav-item.cta>a {
                 padding-left: 15px;
                 padding-right: 15px;
             }
         }
 
         @media (max-width: 991.98px) {
             .ftco-navbar-light .navbar-nav>.nav-item.cta>a {
                 color: #fff;
                 background: #c8a97e;
             }
         }
 
         .ftco-navbar-light .navbar-nav>.nav-item.active>a {
             color: #c8a97e;
         }
 
         @media (max-width: 991.98px) {
             .ftco-navbar-light .navbar-nav>.nav-item.active>a {
                 color: #fff;
             }
         }
 
         .ftco-navbar-light .navbar-toggler {
             border: none;
             color: rgba(255, 255, 255, 0.5) !important;
             cursor: pointer;
             padding-right: 0;
             text-transform: uppercase;
             font-size: 16px;
             letter-spacing: .1em;
         }
 
         .ftco-navbar-light .navbar-toggler:focus {
             outline: none !important;
         }
 
         /* Second navbar end */
         /*carousel start*/
 
         .fa-check {
             margin-right: 2%;
         }
 
         @media only screen and (max-width: 435px) {
            .trainer_card_margin{
                margin-left:20% !important;
            }
             
         }
         @media only screen and (max-width: 600px) {
             .top-bann img {
                 display: none;
             }
 
             .hero-wrap-2 {
                 height: 100% !important;
                 padding-bottom: 2%;
             }
             .table th{
                font-size: 8px !important;
                padding: 0px !important;
             }
             .table td{
                font-size: 8px !important;
                padding: 0px !important;
                text-align: center !important;
             }

         }
 
         /* a {
             -webkit-transition: .3s all ease;
             -o-transition: .3s all ease;
             transition: .3s all ease;
         } */
 
         .hero-wrap {
             width: 100%;
             height: 100%;
             position: inherit;
             background-size: cover;
             background-repeat: no-repeat;
             background-position: top center;
             position: relative;
         }
 
         @media (max-width: 991.98px) {
             .hero-wrap {
                 background-position: top center !important;
             }
         }
 
         .hero-wrap .overlay {
             position: absolute;
             top: 0;
             left: 0;
             right: 0;
             bottom: 0;
             content: '';
             opacity: .5;
             background: #000000;
         }
 
         .hero-wrap.hero-wrap-2 {
             height: 577px;
             margin-top: 3%;
         }
 
         /* .badge-warning {
             background-color: #90deff;
         } */
         .tophead {
             border-radius: 3px;
             padding: 8px 16px;
             padding: 8px 16px;
             transform: translate(-50%, -50%);
             background-color: rgb(31, 35, 59);
             font-size: 1.8rem;
             /* border-bottom: 2px solid #000; */
             outline: none;
             /* color: rgb(82, 255, 255); */
             color: #fff;
             font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
         }
 
         /*=======carousel end======*/
         /* welcome start */
 
         .wsec {
             padding-top: 0.5%;
         }
 
         .wsec1 {
             margin-top: 0%;
             padding-top: 1%;
         }
 
         .wsec3 {
             padding-top: 1%;
         }
 
         .hrhead {
             border-top: 4px solid #ffdf6c;
             width: 19vw;
             margin-left: 2% !important;
             margin-top: -1%;
         }
 
         .vrhead {
             border-left: 6px solid #04ee23;
             height: 2vw;
             padding-right: 1%;
         }
 
         .wsec3 h2 {
             margin: 2% 2%;
             font-size: 2.9vw;
             letter-spacing: 0.1vw;
         }
 
         .wsec1 h2 {
             margin: 2% 2%;
             font-size: 2.9vw;
             letter-spacing: 0.1vw;
         }
 
         .wsec h2 {
             margin: 2% 2%;
             font-size: 2.9vw;
             letter-spacing: 0.1vw;
         }
 
         .needcard {
             margin: 6% 4%;
             padding: 2% 0%;
             background-color: #fff;
             height: 310px;
             border: 20px solid #fff;
             box-shadow: 0 1px 6px rgba(57, 73, 76, .35);
             border-radius: 30px;
         }
 
         .needspan {
             padding: 2% 5%;
         }
 
         .needspan1 {
             padding: 2% 0%;
         }
 
         .needcard:hover {
             background-color: #f9f9f9;
             border: 20px solid#fff;
             box-shadow: 0 2px 20px 0 rgba(17, 121, 239, 0.2);
             overflow: hidden;
             text-decoration: none;
         }
 
         .needcard .fa {
             font-size: 3.6vw;
             color: #ffdf6c;
             float: left;
             margin-left: 1%;
         }
 
         .ntext {
             font-size: 1.8vw;
             margin-top: 10px;
             letter-spacing: 1px;
         }
 
         .ntext1 {
             font-size: 1.6vw;
             margin-top: 10px;
             letter-spacing: 1px;
         }
 
         .needcard p {
             font-size: 16px;
             margin: 5% 2% 2% 2%;
             color: #000;
         }
 
         @media only screen and (max-width:600px) {
             .needcard {
                 height: 250px;
             }
 
             .wsec h2 {
                 font-size: 6.5vw;
             }
 
             .needcard .fa {
                 font-size: 15vw !important;
             }
 
             .needcard p {
                 font-size: 14px;
                 margin: 1% 3%;
             }
 
             .ntext {
                 font-size: 5vw;
             }
 
             .ntext1 {
                 font-size: 4.5vw;
             }
         }
 
         /* welcome end */
         /* How it Works start */
         /* Stats (Counte) section start  */
 
         .timer {
             font-size: 3em;
         }
 
         .count {
             margin: 0% 1.5%;
         }
 
         /* .counter {
             margin-right: 1%;
             border-radius: 10px;
             width: 250px;
             background-color: #0098d9;
             padding: 2%;
         } */
 
         .count-text {
             color: #fdfcfc;
             font-size: 20px;
             letter-spacing: 1px;
             /* font-family: 'Hammersmith One', sans-serif; */
         }
 
         .count-hr {
             border-bottom: 3px solid #ffdf6c;
             /* height: 2.5vw; */
             width: 20%;
             margin-left: 40% !important;
         }
 
         /* .count-text{
             border-bottom: 2px solid rgb(251, 253, 251);
             width:30%;
             margin-left:0
         } */
 
         .counter .far {
             color: #00f260;
         }
 
         .counter .fas {
             color: #00f260;
         }
 
         .fa-2x {
             margin: 0 auto;
             float: none;
             display: table;
             color: #ffdf6c;
         }
 
         @media only screen and (max-width:600px) {
             .timer {
                 font-size: 1.5em;
             }
 
             .count-text {
                 font-size: 12px;
             }
         }
 
         /* Stats (Counte) section end */
         /*Profile Card 5*/
 
         .howcard {
             padding: 0% 2%;
             margin-top: 5%;
         }
 
         .ncard {
             display: flex;
             align-items: center;
             justify-content: space-around;
             flex-wrap: wrap;
         }
 
         .ncard .work-sample-card {
             width: 250px;
             height: 170px;
             position: relative;
             background-color: #ffdf6c;
             margin: 50px 0px;
             padding: 20px 8px;
             display: flex;
             flex-direction: column;
             box-shadow: 0 1px 6px rgba(57, 73, 76, .35);
             border-radius: 5px;
         }
 
         .ncard .work-sample-card:hover {
             height: 260px;
         }
 
         .ncard .work-sample-card:hover .content {
             visibility: visible;
             opacity: 1;
             margin-top: -50px;
             /* transition-delay: 0.3s; */
         }
 
         .close {
             color: red;
         }
 
         .close:hover {
             color: red;
         }
 
         .ncard .work-sample-card:hover .titr {
             opacity: 0;
             visibility: hidden;
         }
 
         .titr-hr {
             border-bottom: 2px solid #000;
             width: 5em;
             margin-left: 30% !important;
         }
 
         .imgBx {
             position: relative;
             background-color: #fff;
             border: 1px solid #000;
             min-height: 140px;
             max-height: 140px;
             width: 80%;
             top: -60px;
             align-self: center;
             z-index: 1;
             background-size: cover;
             background-repeat: no-repeat;
             background-position: 50%;
             box-shadow: 0 1px 6px rgba(57, 73, 76, .35);
             border-radius: 5px;
         }
 
         .lccard .fab {
             color: #fff;
         }
 
         .lccard .fas {
             color: #fff;
         }
 
         .lccard .far {
             color: #fff;
         }
 
         .imgBx:hover {
             box-shadow: 0 2px 20px 0 rgba(17, 121, 239, 0.2);
         }
 
         .imgBx img {
             padding: 15% 25%;
             min-height: 130px;
             max-height: 130px;
         }
 
         .ncard .work-sample-card .content {
             margin-top: -140px;
             padding: 10px 15px;
             text-align: center;
             visibility: hidden;
             opacity: 0;
             /* transition: 0.3s ease-in-out; */
         }
 
         .ncard .work-sample-card .content h2,
         .ncard .work-sample-card .content p {
             color: #000;
             margin: 0 0 7px;
         }
 
         .ncard .work-sample-card .content .title {
             font-size: 15px;
         }
 
         .ncard .work-sample-card .content a {
             text-decoration: none;
             color: #01579b;
         }
 
         .description {
             font-size: 14px;
         }
 
         .ncard .work-sample-card .titr {
             /* transition: 0.3s ease-in-out; */
             width: 100%;
             position: absolute;
             bottom: 15px;
             text-align: center;
             right: 0px;
             left: 0;
         }
 
         .ncard .work-sample-card .titr h5 {
             color: #000;
             /* letter-spacing: 1px; */
             font-size: 1.5em;
             font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
         }
 
         @media only screen and (min-width: 768px) {
             .work-sample-card {
                 margin: 30px 10px;
             }
         }
 
         /* How it Works end */
         /* In Demand Talent start */
 
         .dmdsec {
             padding-top: 0.5%;
             margin-bottom: 1%;
             margin-left: 2%;
         }
 
         .dmdsech2 {
             margin: 2% 0%;
             font-size: 2.9vw;
             letter-spacing: 0.3vw;
         }
 
         .dmdcard {
             margin: 6% 2%;
             padding: 2% 0%;
             background-color: #fff;
             height: 240px;
             border: 20px solid #fff;
             border-radius: 20px;
             overflow: hidden;
             text-decoration: none;
             box-shadow: 0 1px 6px rgba(57, 73, 76, .35);
         }
 
         .dmdcard:hover {
             background-color: #f9f9f9;
             border: 20px solid#fff;
             box-shadow: 0 2px 20px 0 rgba(17, 121, 239, 0.2);
             overflow: hidden;
             text-decoration: none;
         }
 
         .dmdcard1 img {
             height: 100px;
             width: 100px;
         }
 
         .dmdcard h6 {
             font-size: 20px;
             color: #000;
         }
 
         .dmdcard:hover h6 {
             font-size: 20px;
             color: #070707;
         }
 
         .angle i {
             color: #fff;
         }
 
         .dhr {
             border: 3px solid #ffdf6c;
             border-radius: 5px;
             width: 100px;
             margin-right: 70%;
         }
 
         @media only screen and (max-width: 583px) {
             .dmdcard {
                 margin: 3% 1%;
                 padding: 0%;
                 background-color: #fff;
                 height: 70px;
                 border: 0px solid #fff;
                 border-radius: 20px;
                 overflow: hidden;
                 text-decoration: none;
             }
 
             .dmdcard:hover {
                 background-color: #fff;
                 border: 0px solid #fff;
             }
 
             .angle i {
                 color: #000;
                 font-size: 27px;
                 float: right;
                 margin-top: 5%;
             }
 
             .rtangle {
                 font-size: 14px;
                 float: left;
                 margin-top: 5%;
             }
 
             .dmdcard1 img {
                 height: 50px;
                 width: 50px;
             }
         }
 
         /* In Demand Talent end */
         /* Hire for Module start */
 
         .video_modal {
             background-color: transparent !important;
             border: none;
         }
 
         .btn-lg {
             font-size: 3vw;
         }
 
         .dmdcontainer {
             margin: 0%;
             padding: 0%;
             margin-top: 3%;
         }
 
         .bg-cover {
             background-attachment: static;
             /* background-position: center; */
             height: 400px;
             background-repeat: no-repeat;
             background-size: cover;
             width: 100%;
         }
 
         .hirecard {
             /* border-radius: 4px; */
             background: transparent;
             /* box-shadow: 0 6px 10px rgba(0, 0, 0, .08), 0 0 6px rgba(0, 0, 0, .05); */
             /* transition: .3s transform cubic-bezier(.155, 1.105, .295, 1.12), .3s box-shadow, .3s -webkit-transform cubic-bezier(.155, 1.105, .295, 1.12); */
             /* padding: 5px; */
             /* margin-top: -3vw; */
             cursor: pointer;
             /* width: 100%; */
             height: 350px;
             border-left: 2px solid rgb(233, 233, 238);
             box-shadow: 0 20px 20px 0 rgba(254, 254, 255, 0.15);
         }
 
         .hirecard p {
             color: #000;
             font-size: 14px;
         }
 
         .hirline {
             font-weight: 900;
             letter-spacing: 3px;
         }
 
         .hirbt {
             background-color: #f7fcf8;
             color: rgb(7, 7, 7);
             border: 1px solid #000;
             padding: 1% 8%;
             font-size: 17px;
             letter-spacing: 1px;
         }
 
         .hirbt2 {
             background-color: #050505;
             border: 1px solid #fff;
             color: #fff;
             margin-top: 2%;
             padding: 1% 8%;
             font-size: 17px;
             letter-spacing: 1px;
             /* margin-left: 1%; */
         }
 
         .hirbt3 {
             background-color: #050505;
             border: 1px solid #fff;
             color: #fff;
             margin-top: 2%;
             padding: 1% 8%;
             letter-spacing: 1px;
             font-size: 17px;
             /* margin-left: 1%; */
         }
 
         .hirbt2:hover {
             color: #fff;
         }
 
         .hirbt3:hover {
             color: #fff;
         }
 
         .hirecard img {
             /* top: 20px; */
             height: 120px;
         }
 
         .hirecard .card-header {
             background-color: transparent;
             border: 1px solid transparent;
         }
 
         .hirecard .card-header img {
             /* background-color: rgb(253, 253, 253); */
             border: 2px solid #ffdf6c;
             border-radius: 15px;
         }
 
         @media(max-width: 990px) {
             .hirecard {
                 margin: 3px;
             }
         }
 
         /* Hire for Module end */
         /* featured courses start  */
         /* tab pan start */
 
         .product-selector-section {
             margin: 0% 3%;
         }
 
         .product-selector-section .arrow {
             display: flex;
             justify-content: center;
             cursor: pointer;
             color: rgb(80, 6, 252);
             font-size: 3.4rem;
             z-index: 2;
         }
 
         .product-selector-section .arrow:hover {
             color: #0098d9;
             cursor: pointer;
         }
 
         .content-col {
             margin-top: auto;
             margin-bottom: auto;
         }
 
         .content-col .slider-nav {
             border-bottom: 1px solid#B4B5B8;
             height: auto;
             max-width: 100%;
             margin-left: auto;
             margin-right: auto;
         }
 
         .content-col .slider-nav .nav-item {
             color: #000;
             padding-bottom: 4px;
             padding-top: 4px;
             font-size: 1.3em;
             cursor: pointer;
             border-bottom: 1px solid transparent;
             /* transition: border-bottom 0.5s; */
         }
 
         /* .content-col .slider-nav .nav-item div {
         } */
 
         .content-col .slider-nav .nav-item:focus {
             outline: 0;
         }
 
         .content-col .slider-nav .nav-item.slick-slide.slick-current.slick-center {
             border-bottom: 4px solid #1afc05;
             /* transition: border-bottom 0.75s; */
         }
 
         .product-deck-wrapper {
             position: relative;
             outline: none;
         }
 
         .product-deck-wrapper .product-deck {
             top: 0;
         }
 
         .product-image {
             height: 330px;
             padding-left: 2%;
             background-size: cover;
         }
 
         .product-image .lccard {
             width: 225px;
             height: 234px;
             box-shadow: 0 2px 5px 0 rgba(2, 118, 250, 0.15);
             outline: none;
         }
 
         .product-image .spancolor1 {
             height: 110px;
             background: linear-gradient(to right, #36d1dc, #5b86e5);
         }
 
         .product-image .spancolor2 {
             height: 110px;
             background: linear-gradient(to right, #673ab7, #512da8);
         }
 
         .product-image .spancolor3 {
             height: 110px;
             background: linear-gradient(to right, #0575e6, #021b79);
         }
 
         .product-image .spancolor4 {
             height: 110px;
             background: linear-gradient(to right, #00f260, #0575e6);
         }
 
         .product-image .spancolor5 {
             height: 110px;
             background: linear-gradient(to right, #4e54c8, #8f94fb);
         }
 
         .product-image .spancolor6 {
             height: 110px;
             background: linear-gradient(to right, #6441a5, #2a0845);
         }
 
         .product-image .spancolor7 {
             height: 110px;
             background: linear-gradient(to right, #4b6cb7, #182848);
         }
 
         .product-image .spancolor8 {
             height: 110px;
             background: linear-gradient(to right, #1488cc, #2b32b2);
         }
 
         .product-image .spancolor9 {
             height: 110px;
             background: linear-gradient(to right, #536976, #292e49);
         }
 
         .product-image .spancolor10 {
             height: 110px;
             background: linear-gradient(to right, #5433ff, #20bdff, #a5fecb);
         }
 
         .lccard h5 {
             color: #f7f2f2;
         }
         .lccard i {
             color: #f7f2f2;
             margin-top: 1em;
         }
 
         .product-image .lccard .card-header {
             padding: 2% 0%;
             height: 100px;
         }
 
         .product-image .lccard .card-body {
             width: 225px;
             padding: 20px 2px 0px 0px;
             margin: 5px 0px;
             height: 70px;
         }
 
         .product-image .lccard h6 {
             color: #000;
             /* font-family: 'Noto Serif', serif; */
         }
 
         .product-image .lccard div span {
             color: #000;
             font-size: 15px;
             letter-spacing: 1px;
             /* font-family: 'Montserrat', sans-serif; */
         }
 
         .product-image .lccard div {
             padding-top: 10px;
         }
 
         .product-image .fill {
             position: absolute;
             display: flex;
             width: 100%;
             height: 100%;
             opacity: 0.9;
             z-index: 0;
         }
 
         .product-slide .arrow {
             bottom: 40%;
         }
 
         #child-product-next {
             right: 0;
         }
 
         .child-product-image {
             position: relative;
             height: 365px;
             background-size: cover;
         }
 
         .child-product-image .fill {
             position: absolute;
             display: flex;
             width: 100%;
             height: 100%;
             background-color: #404040;
             opacity: 0.5;
             z-index: 0;
         }
 
         .child-product-image p {
             display: none;
         }
 
         .child-product-image.slick-center .fill {
             background-color: rgba(249, 158, 28, .9);
             opacity: 1;
             border-left: 0;
             border-right: 0;
         }
 
         @media (min-width: 768px) {
             .child-product-image.slick-center .fill {
                 border-left: 15px solid #a55723;
                 border-right: 15px solid #a55723;
             }
         }
 
         .child-product-image.slick-center p {
             display: block;
         }
 
         /* featured class start */
 
         .card__overlay {
             position: absolute;
             top: 0;
             bottom: 0;
             left: 0;
             right: 0;
             height: 100%;
             width: 100%;
             opacity: 0;
             visibility: none;
             /* transition: .5s ease; */
             background-color: #363636;
         }
 
         .lccard:hover .card__overlay {
             opacity: 1;
         }
 
         .lccard .card-footer a h6 {
             color: #0098d9;
             /* font-family: 'Hammersmith One', sans-serif; */
             letter-spacing: 1px;
         }
 
         .lccard .card-footer:hover {
             background-color: rgb(4, 206, 105);
         }
 
         .lccard .card-footer {
             background-color: #fff;
         }
 
         .lccard .card-footer:hover a h6 {
             color: #fff;
         }
 
         /* .lccard .card-footer .fa-shopping-cart {
             color: rgb(238, 9, 9) !important;
         }
         .lccard .card-footer:hover .fa-shopping-cart {
             color: rgb(209, 255, 2) !important;
         } */
 
         .overlay__text {
             color: white;
             position: absolute;
             top: 50%;
             left: 50%;
             -webkit-transform: translate(-50%, -50%);
             -ms-transform: translate(-50%, -50%);
             transform: translate(-50%, -50%);
         }
 
         /* Featured Classes end */
         /* Featured Class SEction start  */
 
         .content-col2 {
             /* background-color: #fff; */
             margin-top: auto;
             margin-bottom: auto;
         }
 
         .content-col2 .slider-nav2 {
             /* background-color: #fff; */
             border-bottom: 1px solid#B4B5B8;
             height: auto;
             max-width: 100%;
             margin-left: auto;
             margin-right: auto;
         }
 
         .content-col2 .slider-nav2 .nav-item {
             color: #f6f7fa;
             padding-bottom: 4px;
             padding-top: 4px;
             font-size: 1.3em;
             cursor: pointer;
             border-bottom: 1px solid transparent;
             /* transition: border-bottom 0.5s; */
         }
 
         .content-col2 .slider-nav2 .nav-item:focus {
             outline: 0;
         }
 
         .content-col2 .slider-nav2 .nav-item.slick-slide.slick-current.slick-center {
             border-bottom: 3px solid #1afc05;
             /* transition: border-bottom 0.75s; */
         }
 
         .product-image .lccard1 {
             width: 225px;
             height: 300px;
             box-shadow: 0 2px 5px 0 rgba(17, 121, 239, 0.15);
             outline: none;
         }
 
         .lccard1 h5 {
             color: #f7f2f2;
             /* font-family: 'Jura', sans-serif; */
         }
 
         .lccard1 i {
             color: #f7f2f2;
             margin-top: 1em;
             /* font-family: 'Jura', sans-serif; */
         }
 
         .product-image .lccard1 .card-body {
             width: 225px;
             padding: 10px 2px 2px 2px;
             margin: 5px 0px;
             height: 150px;
         }
 
         .product-image .lccard1 h6 {
             color: #000;
             /* font-family: 'Noto Serif', serif; */
             letter-spacing: 1px;
         }
 
         .product-image .lccard1 div span {
             color: #000;
             font-size: 12px;
             /* font-family: 'Nanum Gothic', sans-serif; */
         }
 
         .lccard1 .card-footer {
             padding: 1% 0%;
             background-color: #fff;
         }
 
         .lccard1 .card-header {
             padding: 2% 0%;
             height: 94px;
         }
 
         .product-image .lccard1 div {
             padding-top: 2px;
         }
 
         .lccard1:hover .card__overlay {
             opacity: 1;
         }
 
         .lccard1 .card-footer a h6 {
             color: #0098d9;
             padding: 0% 1%;
             letter-spacing: 1px;
             /* font-family: 'Hammersmith One', sans-serif; */
         }
 
         .lccard1 .card-footer del {
             color: #d92100;
             padding: 0% 1%;
             letter-spacing: 1px;
         }
 
         .lccard1 .card-footer:hover del {
             color: #0a0ef8;
             padding: 0% 1%;
             letter-spacing: 1px;
         }
 
         .lccard1 .card-footer:hover {
             background-color: rgb(4, 206, 105);
         }
 
         .lccard1 .card-footer:hover a h6 {
             color: #fff;
             padding: 0% 1%;
             letter-spacing: 1px;
         }
 
         .lccard1 .fab {
             color: #fff;
         }
 
         .lccard1 .fas {
             color: #fff;
         }
 
         .lccard1 .far {
             color: #fff;
         }
 
         .fa-rupee-sign {
             color: #000000 !important;
             padding-top: 1%;
         }
 
         /* Featured Class SEction end */
 
         /* tab pan end */
 
         body .owl-carousel.owl-loading {
             opacity: 1;
             display: block;
             text-align: center;
         }
 
         .framebox {
             width: 95%;
             margin: auto;
             padding-top: 10px;
         }
 
         .owl-prev,
         .owl-next {
             height: 37px;
             width: 37px;
             font-size: 22px;
             display: inline-block;
             background: rgb(3, 184, 240);
             color: rgb(224, 238, 227);
             border-radius: 50%;
             border: 0;
             margin: 7px;
             box-shadow: 1px 1px 2px #b8b9be, -1px -1px 2px #fff;
         }
 
         .owl-prev:hover,
         .owl-next:hover,
         .owl-prev:focus,
         .owl-next:focus {
             outline: none;
         }
 
         .owl-item {
             border-radius: 4px;
         }
 
         a.item {
             display: flex;
             align-items: center;
             justify-content: center;
             cursor: pointer;
             padding: 78px 30px;
         }
 
         .item:hover {
             text-decoration-line: none;
         }
 
         .owl-carousel .owl-dots.disabled,
         .owl-carousel .owl-nav.disabled {
             display: block;
             margin-top: 10px;
         }
 
         body .owl-carousel .owl-dots,
         body .owl-carousel .owl-nav {
             display: block;
             margin-top: 10px;
             text-align: center;
         }
 
         body .owl-carousel .owl-dots.disabled,
         body .owl-carousel .owl-nav.disabled {
             display: block;
         }
 
         .owl-dot {
             display: none;
         }
 
         @media only screen and (max-width: 600px) {
 
             body .owl-carousel .owl-dots,
             body .owl-carousel .owl-nav {
                 margin-right: 100px;
             }
         }
 
         /* featured courses end  */
         /* Top Trainers start */
 
         .toprow {
             margin: 0% 1.5%;
         }
 
         .trncard img {
             display: block;
         }
 
         .trncard h6 {
             font-size: 15px !important;
         }
 
         .trncard p {
             font-size: 12px;
             color: #000;
         }
 
         @media only screen and (max-width: 600px) {
             .trncard {
                 width: 160px !important;
             }
 
             .product-image {
                 margin-left: 15%;
             }
 
             .im2 img {
                 height: 50px;
                 width: 50px;
                 margin: 0 10px !important;
             }
         }
 
         .trncard {
             width: 190px;
             height: 250px;
             background-color: #fff;
             margin: 5% 0%;
             box-shadow: 0 1px 3px rgba(57, 73, 76, .35);
         }
 
         .trncard:hover {
             box-shadow: 0 2px 20px 0 rgba(17, 121, 239, 0.2);
         }
 
         .im2 img {
             height: 90px;
             width: 90px;
             margin: 0 33px;
             border-radius: 50%;
         }
 
         /* Top Trainers end */
         /* truste by business start===================================================================================================================== */
 
         .clientcontainer {
             margin: 0% 2%;
         }
 
         .th5 {
             margin-left: 2%;
             font-family: 'Artifika', serif;
         }
 
         .client-img {
             width: 96%;
             height: 390px;
             margin-right: 2%;
         }
 
         @media only screen and (max-width: 600px) {
             .client-img {
                 height: 220px;
                 width: 100%;
                 padding: 0 !important;
             }
 
             .th5 {
                 margin-left: 0%;
                 margin-top: 2%;
             }
         }
 
         #demo {
             margin: auto
         }
 
         .carousel-caption {
             position: initial;
             z-index: 10;
         }
 
         @media(max-width:767px) {
             .carousel-caption {
                 position: initial;
                 margin: 0% 3%;
             }
         }
 
         /* truste by business end===================================================================================================================== */
         /* footer start */
 
         .footer .contain {
             padding-top: 1%;
             /* padding-left: 1.7%; */
             margin: 0;
         }
 
         .footer {
             /* width: 100%; */
             position: relative;
             height: auto;
             background: #1d1d1d;
         }
 
         .footer .col {
             width: 310px;
             height: auto;
             float: left;
             box-sizing: border-box;
             -webkit-box-sizing: border-box;
             -moz-box-sizing: border-box;
             padding: 0px 20px 20px 20px;
         }
 
         .footer .col ul li i {
             color: #fff;
         }
 
         .fa-angle-double-right {
             font-size: 12px;
         }
 
         .footer .col h1 {
             font-family: Verdana, Geneva, Tahoma, sans-serif;
             margin: 0;
             padding: 0;
             font-size: 18px;
             line-height: 17px;
             padding: 20px 5px 5px 0px;
             color: #fff;
             font-weight: normal;
             text-transform: uppercase;
             letter-spacing: 0.150em;
         }
 
         .footer .col ul {
             list-style-type: none;
             margin: 0;
             padding: 0;
         }
 
         .footer .col ul li {
             color: #999999;
             font-size: 14px;
             padding: 5px 0px 5px 0px;
             font-family: Arial, Helvetica, sans-serif;
         }
 
         .footer .col ul li a {
             color: #999999;
 
             font-size: 14px;
             padding: 5px 0px 5px 0px;
             font-family: Arial, Helvetica, sans-serif;
         }
 
         .social ul li {
             display: inline-block;
             padding-right: 5px !important;
         }
 
         .footer .col ul li:hover {
             color: #ffffff;
         }
 
         .footer .col ul li a:hover {
             color: #ffffff;
         }
 
         .clearfix {
             clear: both;
         }
 
         @media only screen and (min-width: 1280px) {
             .contain {
                 width: 1320px;
                 margin: 0 auto;
                 padding: 0% 5%;
             }
         }
 
         @media only screen and (max-width: 1139px) {
             .contain .social {
                 width: 1000px;
                 display: block;
             }
 
             .social h1 {
                 margin: 0px;
             }
         }
 
         @media only screen and (max-width: 950px) {
             .footer .col {
                 width: 33%;
             }
 
             .footer .col h1 {
                 font-size: 14px;
             }
 
             .footer .col ul li {
                 font-size: 13px;
             }
         }
 
         @media only screen and (max-width: 500px) {
             .footer .col {
                 width: 50%;
             }
 
             .footer .col h1 {
                 font-size: 14px;
             }
 
             .footer .col ul li {
                 font-size: 13px;
             }
         }
 
         @media only screen and (max-width: 340px) {
             .footer .col {
                 width: 100%;
             }
         }
 
         /* footer end */
         /* Sidebar Section Start */
         hr {
             padding: 0px;
             margin: 0px;
             border-top: 1px solid rgb(122, 121, 121) !important;
         }
 
         @keyframes navLinksFade {
             from {
                 opacity: 0;
                 margin-left: 0px;
             }
 
             to {
                 opacity: 1;
                 margin-left: 30px;
             }
         }
 
         #togglenew {
             cursor: pointer;
         }
 
         #togglenew.on .one {
             -webkit-transform: rotate(-45deg) translate(-5px, 5px);
             -moz-transform: rotate(-45deg) translate(-5px, 5px);
             -ms-transform: rotate(-45deg) translate(-5px, 5px);
             -o-transform: rotate(-45deg) translate(-5px, 5px);
             transform: rotate(-45deg) translate(-5px, 5px);
         }
 
         #togglenew.on .two {
             opacity: 0;
         }
 
         #togglenew.on .three {
             -webkit-transform: rotate(45deg) translate(-6px, -7px);
             -moz-transform: rotate(45deg) translate(-6px, -7px);
             -ms-transform: rotate(45deg) translate(-6px, -7px);
             -o-transform: rotate(45deg) translate(-6px, -7px);
             transform: rotate(45deg) translate(-6px, -7px);
         }
 
         #togglenew .bar {
             -webkit-transition: all 0.3s;
             -moz-transition: all 0.3s;
             -ms-transition: all 0.3s;
             -o-transition: all 0.3s;
             transition: all 0.3s;
             width: 20px;
             height: 4px;
             margin: 2px 2px;
             background-color: white;
         }
 
         #sp_sidebar {
             width: 250px;
             height: 100%;
             min-height:42em;
             overflow-y: scroll;
             display: flex;
             flex-direction: column;
             position: absolute;
             /* position: fixed; */
             top: 0;
             background: #202020;
             transition: all 0.5s;
             margin-top: 6.3em;
             margin-bottom: 6.3em;
             /* z-index: 1; */
         }
 
         .panel-body {
            /* margin-top: -20px; */
            background: #3d3d3d;
            transition: all 0.5s;
        }

        .panel-body a li {
            color: #fff;
        }
        .panel-body a {
            border-left: 2px solid #ffdf6c;
            margin-left: -1em;
            padding:3px !important;

        }
        .panel-body a span{
            padding: 7px 5px;
            color: #fff !important;

        }



       .w3-bar-item.active{
           background-color: #C40647 !important;
           color: #ffdf6c !important;
           border-radius: 0px 40px 40px 0px;
        }
       .w3-bar-item li .active{
           background-color: #C40647 !important;
           color: #ffdf6c !important;
           border-radius: 0px 40px 40px 0px;
        }

        #sp_sidebar.active {
            width: 60px;
            transition: all 0.5s;
        }

        #sp_sidebar.active span {
            display: none;
        }

        #sp_sidebar::-webkit-scrollbar {
            width: 10px;
        }

        /* #sp_sidebar::-webkit-scrollbar-thumb {
	 background: rgb(41, 233, 2);
} */
        #sp_sidebar .w3-button {
            display: flex;
            /* align-items: center; */
            border-left: 3px solid #ffdf6c;
            color: #fff!important;
            font-size: 14px;
            padding: 1em 0;
            transition: all 0.7s ease-out;
            font-family: 'Nunito', sans-serif;
            text-transform: uppercase!important;
        }

        #sp_sidebar .w3-button:hover {
            background-color: hsla(0, 0%, 1%, 0.659)!important;
            border-radius: 0px 40px 40px 0px !important;
            color: #ffdf6c!important;
        }

        #sp_sidebar .w3-button i {
            width: 0;
            color: #ffdf6c!important;
            font-size: 20px;
            margin-left: 10px;
            display:block !important;
        }

        /* #sp_sidebar a:active{
            background-color:#FFF6DF!important;
        }

        #sp_sidebar .w3-button:active i span{
            display:block!important;
            color:#fff!important;
        } */

        #sp_sidebar  .w3-button i:hover {
            color: #ffdf6c;
        }

        #sp_sidebar  .w3-button span {
            animation: navLinksFade 0.8s forwards;
            margin-left: 30px !important;
            display:block!important;
            color:#fff!important;
        }

        @media only screen and (max-width: 600px) {
            .welcometext {
                display: none;
            }

            .user-avatar {
                display: none;
            }
        }

 
         /* Sidebar SEction end */
         
 /*----------------------------- 
 adding codoodler css here 
 ---------------------------*/
 
 #background {
     font-family: "Segoe UI Web Light", "Segoe UI Light", "Segoe UI Web Regular", "Segoe UI", "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; 
     font-size: 1.2rem;
     margin: 1em;
     
     background: url('../../images/grid-pattern.png') left top repeat, 
                 -webkit-radial-gradient(50% 15%, #2c98dd, #1a5f96) no-repeat;
     background: url('../../images/grid-pattern.png') left top repeat, 
                 -moz-radial-gradient(50% 15%, #2c98dd, #1a5f96) no-repeat;
     background: url('../../images/grid-pattern.png') left top repeat, 
                 -ms-radial-gradient(50% 15%, #2c98dd, #1a5f96) no-repeat;
     background: url('../../images/grid-pattern.png') left top repeat, 
                 -o-radial-gradient(50% 15%, #2c98dd, #1a5f96) no-repeat;
     background: url('../../images/grid-pattern.png') left top repeat, 
                 radial-gradient(circle farthest-side at 50% 15%, #2c98dd, #1a5f96) no-repeat;
     background-color: #1a5f96;
 }
 #background.alt {
     background: url('../../images/grid-pattern.png') left top repeat, 
                 -webkit-radial-gradient(50% 15%, #1c802e, #012e13) no-repeat;
     background: url('../../images/grid-pattern.png') left top repeat, 
                 -moz-radial-gradient(50% 15%, #1c802e, #012e13) no-repeat;
     background: url('../../images/grid-pattern.png') left top repeat, 
                 -ms-radial-gradient(50% 15%, #1c802e, #012e13) no-repeat;
     background: url('../../images/grid-pattern.png') left top repeat, 
                 -o-radial-gradient(50% 15%, #1c802e, #012e13) no-repeat;
     background: url('../../images/grid-pattern.png') left top repeat, 
                 radial-gradient(circle farthest-side at 50% 15%, #1c802e, #012e13) no-repeat;
     background-color: #012e13;
 }
 #background.alt2 {
     background: url('../../images/grid-pattern.png') left top repeat, 
                 -webkit-radial-gradient(50% 15%, #ababab, #505050) no-repeat;
     background: url('../../images/grid-pattern.png') left top repeat, 
                 -moz-radial-gradient(50% 15%, #ababab, #505050) no-repeat;
     background: url('../../images/grid-pattern.png') left top repeat, 
                 -ms-radial-gradient(50% 15%, #ababab, #505050) no-repeat;
     background: url('../../images/grid-pattern.png') left top repeat, 
                 -o-radial-gradient(50% 15%, #ababab, #505050) no-repeat;
     background: url('../../images/grid-pattern.png') left top repeat, 
                 radial-gradient(circle farthest-side at 50% 15%, #ababab, #505050) no-repeat;
     background-color: #505050;
 }
 header {
     margin-bottom: 1em;
 }
 /* h1, h2, h3 {
     margin: 0;
     font-weight: normal;
 }
 h1 {
     font-size: 3.375rem;
     text-transform: lowercase;
     text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.8);
 }
 h2 {
     font-size: 1rem;
     text-transform: uppercase;
     line-height: 1.6rem;
     text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
 }
 a {
     color: #fff;
     text-decoration: underline;
 } */
 footer {
     font-size: .75em;
     color: silver;
     position: fixed;
     bottom: 1em;
     right: 1em;
 }
 #drawCanvas {
       -ms-touch-action: none;
       position: absolute;
     top: 0;
     left: 0;
 }
 #drawCanvas:hover, #drawCanvas:active {
   cursor: url('data:image/x-icon;base64,AAACAAEAICAAAAEAAQCoEAAAFgAAACgAAAAgAAAAQAAAAAEAIAAAAAAAABAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAGgYDGhoGA70aBgO9GgYDNwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABoGAxoaBgO9fnl5/4yHh/8aBgO9GgYDNwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAaBgMaGgYDvX55ef9XTEr/v7+//62oqP8aBgO9GgYDNwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAGgYDGhoGA71+eXn/V0xK/7+/v/9pXlz/6enp/8jEw/8aBgO9GgYDNwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABoGAxoaBgO9fnl5/6urq/+/v7//aV5c/+np6f+rpKL//////87Jyf8aBgO9AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAaBgMaGgYDvX55ef+rq6v/v7+//9XV1f/p6en/q6Si//////+vqKf/6Obl/xoGA70AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAGgYDGhoGA71+eXn/q6ur/7+/v//V1dX/6enp//j4+P//////r6in/+jm5f97b27/GgYDvQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABoGAxoaBgO9fnl5/6urq/+/v7//1dXV/+np6f/4+Pj////////////o5uX/e29u/87Jyf8aBgO9AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAaBgMaGgYDvX55ef+rq6v/v7+//9XV1f/p6en/+Pj4/////////////////3tvbv/Oycn/6Obl/xoGA70AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAGgYDGhoGA71+eXn/q6ur/7+/v//V1dX/6enp//j4+P////////////////97b27/zsnJ///////o5uX/GgYDvQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABoGAxoaBgO9fnl5/6urq/+/v7//1dXV/+np6f/4+Pj/////////////////e29u/87Jyf//////6Obl/xoGA70aBgM3AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAaBgMaGgYDvX55ef+rq6v/v7+//9XV1f/p6en/+Pj4/////////////////3tvbv/Oycn//////+jm5f8aBgO9GgYDNwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAGgYDGhoGA71+eXn/q6ur/7+/v//V1dX/6enp//j4+P////////////////97b27/zsnJ///////o5uX/GgYDvRoGAzcAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABoGAxoaBgO9fnl5/1dMSv+/v7//1dXV/+np6f/4+Pj/////////////////e29u/87Jyf//////6Obl/xoGA70aBgM3AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAaBgMaGgYDvX55ef+rq6v/v7+//2leXP/p6en/+Pj4/////////////////3tvbv/Oycn//////+jm5f8aBgO9GgYDNwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAGgYDGhoGA71+eXn/q6ur/7+/v//V1dX/6enp/6ukov////////////////97b27/zsnJ///////o5uX/GgYDvRoGAzcAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABoGAxoaBgO9fnl5/6urq/+/v7//1dXV/+np6f/4+Pj//////6+op//o5uX/VUZE/87Jyf//////6Obl/xoGA70aBgM3AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAaBgMaGgYDvX55ef+rq6v/v7+//9XV1f/p6en/+Pj4////////////6Obl/1VGRP9VRkT/zsnJ/+jm5f8aBgO9GgYDNwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAGgYDGhoGA71+eXn/q6ur/7+/v//V1dX/6enp//j4+P////////////////9VRkT/GgYDNxoGAzcaBgM3GgYDvRoGAzcAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABoGAxoaBgO9fnl5/6urq/+/v7//1dXV/+np6f/4+Pj/////////////////VUZE/xoGAzcAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAaBgMaGgYDvX55ef+rq6v/v7+//9XV1f/p6en/+Pj4/////////////////1VGRP8aBgM3AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAGgYDGhoGA71+eXn/q6ur/7+/v//V1dX/6enp//j4+P////////////////9VRkT/GgYDNwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAaBgO9fnl5/6urq/+/v7//1dXV/+np6f/4+Pj/////////////////VUZE/xoGAzcAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAGgYDGhoGA72rq6v/v7+//9XV1f/p6en/+Pj4/////////////////1VGRP8aBgM3AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAaBgO9nJqa/7+/v//V1dX/6enp//j4+P////////////////9VRkT/GgYDNwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAGgYDGhoGA72/v7//1dXV/+np6f/4+Pj/////////////////VUZE/xoGAzcAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAaBgO9rqys/9XV1f/p6en/+Pj4/////////////////1VGRP8aBgM3AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAGgYDGhoGA73CwMD/6enp//j4+P//////6Obl/1VGRP9VRkT/GgYDNwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAaBgO9wsDA/+np6f/4+Pj/6Obl/1VGRP9VRkT/GgYDNwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABoGA73U0tL/4d/f/1VGRP9VRkT/GgYDNwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAaBgO96enp/1NFQv9VRkT/GgYDNwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABTRUL/AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA////z////4f///8D///+Af///AD///gA///wAP//4AD//8AA//+AAP//AAH//gAD//wAB//4AA//8AAf/+AAP//AAH//gAD//wAd//4AP//8AH//+AD///AB///wA///4Af//+AP///AH///wD///4D///+D////D////7////8='), 
   pointer;
 }
 #colorSwatch {
     position: absolute;
     bottom: 20px;
     right: 20px;
 }
 
 
 #colorSwatch input[type=radio] {
     margin: 0;
     display: none;
     width: 0;
 }
 #colorSwatch input[type=radio]:checked + label::after {
     content: '\2712';
     position: absolute;
     left: 8px;
 }
 
 #colorSwatch label {
     display: inline-block; 
     width: 48px; height: 48px; 
     position: relative;
     padding-right: 5px;
     border-radius: 50%;
     text-shadow: 1px 1px 2px #000;
     color: #fff;
     font-size: 32px;
     line-height: 46px;
 }
 #colorSwatch label[for=color01] {background: gold;}
 #colorSwatch label[for=color02] {background: darkorange;}
 #colorSwatch label[for=color03] {background: navy;}
 #colorSwatch label[for=color04] {background: yellowgreen;}
 #colorSwatch label[for=color05] {background: firebrick;}
 #colorSwatch label[for=color06] {background: powderblue;}
 #colorSwatch label[for=color07] {background: white;}
 
 /*footer {
     margin-top: 1.5em;
 }*/
 
 /* Occupancy Animation */
 
 .anim {
     transform: scale(1.5);
 }
 header div {
     float: left;
 }
 .bubble {
     -webkit-transition: all .5s;
     transition: all .5s;
 }
 .bubble {
     position: absolute;
     top: 20px;
     right: 15px;
       min-width: 48px;
       height: 48px;
       padding: .3em;
       display: inline-block;
       border-radius: 8px;
       line-height: .9em;
       color: #fff;
       text-align: center;
       background: #0142a3;
 }
 .bubble span {
       display: block;
       margin: 5px auto;
       font-size: 10px;
 }
 .bubble #occupancy {
       font-size: 32px;
 }
 .github {
     display: none;
 }
 
 @media all and (orientation: landscape) {
     canvas {
         display: inline-block;
         margin-right: 10px;
     }
     #colorSwatch {
         display: inline-block;
         width: 50px;
         top: 40px;
         right: 60px;
     }
     .alt2 #colorSwatch {
         top: 30px;
     }
     .bubble {
         top: 0;
         position: relative;
           min-width: 60px;
           height: 60px;
           padding: .4em;
           margin: 5px 10px 20px 30px;
           display: inline-block;
           border-radius: 8px;
           line-height: 1.05em;
           color: #fff;
           text-align: center;
           background: #0142a3;
     }
     .bubble:after {
           content: "";
           position: absolute;
           bottom: -15px;
           right: 28px;
           border: 0;
           border-left-width: 20px;
           border-bottom-width: 15px;
           border-style: solid;
           border-color: transparent #0142a3;
           display: block;
           width: 0;
     }
     .bubble span {
           display: block;
           margin: 5px auto;
           font-size: 12px;
     }
     .bubble #occupancy {
           font-size: 40px;
           text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
     }
     .github {
         display: block;
     }
 }	
 
 /* for mobile devices */
 @media only screen and (max-width:600px){
     canvas {
         display: inline-block;
         margin-right: 10px;
     }
     #colorSwatch {
         /* display: inline-block; */
         width: 50px;
         top: 50px;
         right: 45%;
     }
     .alt2 #colorSwatch {
         top: 30px;
     }
 }
  /* whatsapp css start*/
  a:link,
  a:visited {
    /* color: #444; */
    text-decoration: none;
    transition: all 0.4s ease-in-out;
    
  }
  h1 {
    /* font-size: 20px; */
    /* text-align: center; */
    display: block;
    background: linear-gradient(to right top,);
    padding: 20px;
    color: #fff;
    border-radius: 50px;
  }
  
  /* CSS Multiple Whatsapp Chat */
  .whatsapp-name {
    font-size: 16px;
    font-weight: 600;
    padding-bottom: 0;
    margin-bottom: 0;
    line-height: 0.5;
    color: white;
  }
  .typing{
    color: white;
  }
  
  #whatsapp-chat {
    box-sizing: border-box !important;
  
    outline: none !important;
    position: fixed;
    width: 350px;
    border-radius: 10px;
    box-shadow: 0 1px 15px rgba(32, 33, 36, 0.28);
    bottom: 50px;
    right: 3px;
    overflow: hidden;
    z-index: 100;
    animation-name: showchat;
    animation-duration: 1s;
    transform: scale(1);
    
  }
  a.blantershow-chat {
    /*   background: #009688; */
    background: #fff;
    color: #404040;
    position: fixed;
    display: flex;
    font-weight: 400;
    justify-content: space-between;
    z-index: 100;
    bottom: 5px;
    right: 30px;
    font-size: 15px;
    padding: 10px 20px;
    border-radius: 30px;
    box-shadow: 0 1px 15px rgba(32, 33, 36, 0.28);
  }
  a.blantershow-chat svg {
    transform: scale(1.2);
    margin: 0 10px 0 0;
  }
  .header-chat {
    /*   background: linear-gradient(to right top, #6f96f3, #164ed2); */
    background: #009688;
    background: #095e54;
    color: #fff;
    padding: 20px;
  }
  .header-chat h3 {
    margin: 0 0 10px;
  }
  .header-chat p {
    font-size: 14px;
    line-height: 1.7;
    margin: 0;
  }
  .info-avatar {
    position: relative;
  }
  .info-avatar img {
    border-radius: 100%;
    width: 50px;
    float: left;
    margin: 0 10px 0 0;
  }
  
  a.informasi {
    padding: 20px;
    display: block;
    overflow: hidden;
    animation-name: showhide;
    animation-duration: 0.5s;
  }
  a.informasi:hover {
    background: #f1f1f1;
  }
  .info-chat span {
    display: block;
  }
  #get-label,
  span.chat-label {
    font-size: 12px;
    color: #888;
  }
  #get-nama,
  span.chat-nama {
    margin: 5px 0 0;
    font-size: 15px;
    font-weight: 700;
    color: #222;
  }
  #get-label,
  #get-nama {
    color: #fff;
  }
  span.my-number {
    display: none;
  }
  /* .blanter-msg {
    color: #444;
    padding: 20px;
    font-size: 12.5px;
    text-align: center;
    border-top: 1px solid #ddd;
  } */
  textarea#chat-input {
      border: none;
      font-family: "Arial", sans-serif;
      width: 100%;
      height: 40px;
      outline: none;
      resize: none;
      padding: 10px;
      font-size: 12px;
  }
  
  a#send-it {
    width: 40px;
    font-weight: 800;
    padding: 8px 8px 0;
    background:#eee;
    /* border-radius: 5px; */
    
    svg {
      fill:#a6a6a6;
      height: 24px;
      width: 24px;
    }
  }
  
  .first-msg {
    background: transparent;
    padding: 30px;
    text-align: center;
    & span {
      background: #e2e2e2;
      color: #333;
      font-size: 14.2px;
      line-height: 1.7;
      border-radius: 10px;
      padding: 15px 20px;
      display: inline-block;
    }
  }
  
  .start-chat .blanter-msg {
    display: flex;
  }
  #get-number {
    display: none;
  }
  a.close-chat {
    position: absolute;
    top: 5px;
    right: 15px;
    color: #fff;
    font-size: 30px;
  
  }
  
  @keyframes ZpjSY{
    0% {
      background-color: rgb(182, 181, 186);
    }
    15% {
      background-color: rgb(17, 17, 17);
    }
    25% {
      background-color: rgb(182, 181, 186);
    }
  }
  
  @keyframes hPhMsj {
    15% {
      background-color: rgb(182, 181, 186);
    }
    25% {
      background-color: rgb(17, 17, 17);
    }
    35% {
      background-color: rgb(182, 181, 186);
    }
  }
  
  @keyframes iUMejp {
    25% {
      background-color: rgb(182, 181, 186);
    }
    35% {
      background-color: rgb(17, 17, 17);
    }
    45% {
      background-color: rgb(182, 181, 186);
    }
  }
  
  
  @keyframes showhide {
    from {
      transform: scale(0.5);
      opacity: 0;
    }
  }
  @keyframes showchat {
    from {
      transform: scale(0);
      opacity: 0;
    }
  }
  @media screen and (max-width: 480px) {
    #whatsapp-chat {
      width: auto;
      left: 5%;
      right: 5%;
      font-size: 80%;
    }
  }
  .hide {
    display: none;
    animation-name: showhide;
    animation-duration: 0.5s;
    transform: scale(1);
    opacity: 1;
  }
  .show {
    display: block;
    animation-name: showhide;
    animation-duration: 0.5s;
    transform: scale(1);
    opacity: 1;
  }
  
  .whatsapp-message-container {
    display: flex;
    z-index: 1;
  }
  
  .whatsapp-message {
    padding: 7px 14px 6px;
    background-color: rgb(255, 255, 255);
    border-radius: 0px 8px 8px;
    position: relative;
    transition: all 0.3s ease 0s;
    opacity: 0;
    transform-origin: center top 0px;
    z-index: 2;
    box-shadow: rgba(0, 0, 0, 0.13) 0px 1px 0.5px;
    margin-top: 4px;
    margin-left: -54px;
    max-width: calc(100% - 66px);
  }
  
  .whatsapp-chat-body {
    padding: 20px 20px 20px 10px;
    background-color: rgb(230, 221, 212);
    position: relative;
    &::before {
      display: block;
      position: absolute;
      content: "";
      left: 0px;
      top: 0px;
      height: 100%;
      width: 100%;
      z-index: 1000;
      opacity: 0.08;
      background-image: url("https://elfsight.com/assets/chats/patterns/whatsapp.png");
      // background-image: url(https://res.cloudinary.com/eventbree/image/upload/v1575782560/Widgets/whatsappbg_opt.jpg);
    }
  }
  
  .dAbFpq {
    display: flex;
    z-index: 10000;
  }
  
  .eJJEeC {
    background-color: rgb(255, 255, 255);
    width: 52.5px;
    height: 32px;
    border-radius: 16px;
    display: flex;
    -moz-box-pack: center;
    justify-content: center;
    -moz-box-align: center;
    align-items: center;
    margin-left: 10px;
    opacity: 0;
    transition: all 0.1s ease 0s;
    z-index: 1000;
    box-shadow: rgba(0, 0, 0, 0.13) 0px 1px 0.5px;
  }
  
  .hFENyl {
      position: relative;
      display: flex;
  }
  
  .ixsrax {
      height: 5px;
      width: 5px;
      margin: 0px 2px;
      border-radius: 50%;
      display: inline-block;
      position: relative;
      animation-duration: 1.2s;
      animation-iteration-count: infinite;
      animation-timing-function: linear;
      top: 0px;
      background-color: rgb(158, 157, 162);
      animation-name: ZpjSY;
  }
  
  .dRvxoz {
  
      height: 5px;
      width: 5px;
      margin: 0px 2px;
      background-color: rgb(182, 181, 186);
      border-radius: 50%;
      display: inline-block;
      position: relative;
      animation-duration: 1.2s;
      animation-iteration-count: infinite;
      animation-timing-function: linear;
      top: 0px;
      animation-name: hPhMsj;
  }
  
  .kAZgZq {
      padding: 7px 14px 6px;
      background-color: rgb(255, 255, 255);
      border-radius: 0px 8px 8px;
      position: relative;
      transition: all 0.3s ease 0s;
      opacity: 0;
      transform-origin: center top 0px;
      z-index: 1000;
      box-shadow: rgba(0, 0, 0, 0.13) 0px 1px 0.5px;
      margin-top: 4px;
      margin-left: -54px;
      max-width: calc(100% - 66px);
      &::before {
      position: absolute;
      background-image: url("../assets/assets1/images/devopsschool-whatsapp-click-to-chat-1.png");
      background-position: 50% 50%;
      background-repeat: no-repeat;
      background-size: contain;
      content: "";
      top: 0px;
      left: -12px;
      width: 12px;
      height: 19px;
  }
  }
  
  .bMIBDo {
      font-size: 13px;
      font-weight: 700;
      line-height: 18px;
      color: rgba(0, 0, 0, 0.4);
  }
  
  .iSpIQi {
      font-size: 14px;
      line-height: 19px;
      margin-top: 4px;
      color: rgb(17, 17, 17);
  }
  
  .iSpIQi {
      font-size: 14px;
      line-height: 19px;
      margin-top: 4px;
      color: rgb(17, 17, 17);
  }
  
  .cqCDVm {
      text-align: right;
      margin-top: 4px;
      font-size: 12px;
      line-height: 16px;
      color: 
      rgba(17, 17, 17, 0.5);
      margin-right: -8px;
      margin-bottom: -4px;
  }
  /* whatsapp ends */