/* 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;
         }

         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;
         }

         a {
             text-decoration: none !important;
         }

         ul li {
             list-style: none !important;
         }

         ul {
             list-style: none !important;
         }

         h3 {
             letter-spacing: 1px;
         }

         p {
             font-family: Arial, Helvetica, sans-serif;
             letter-spacing: 0.02vw;
             color: #000;
         }
         .help-block{
             color:red !important;
         }
         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: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 0rem;
             }

             .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: 5px;
        }
         
        ::-webkit-scrollbar-track {
            background-color: #ebebeb;
            -webkit-border-radius: 10px;
            border-radius: 10px;
        }
         .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;
         }

         @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 .list-unstyled {
            margin: 0% 10px !important;
            padding: 0% !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: 11% !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;
             color: #000 !important;
             /* font-family: 'Raleway', sans-serif; */
         }

         .list-unstyled a li i {
             /* font-size: 18px; */
             color: #000 !important;
         }

         .nav-card ul {
             margin: 0% 3em !important;
             padding: 0% 14px !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-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-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-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-card3 ul a li {
                color: black;
            }
             .nav-card4 {
                width: 100% !important;
                margin-left: 0%;
                border-top: 6px solid #ffdf6c !important;
            }

            .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 16px;
             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 {
                display: none !important;
             }

             .secondnav .nav-item .nav-link {
                 color: #000 !important;
                 margin-left: 0px;
                 padding: 0px !important;
             }
         }

         @media (max-width: 1575px) {

             .collapse{
                 background-color: transparent !important;
             }
             
         }
         @media (max-width: 991.98px) {
             .ftco-navbar-light .navbar-nav {
                 padding-bottom: 10px;
             }
             .collapse{
                 background-color: transparent !important;
             }
             
         }

         .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;
             }
         }

         .ftco-navbar-light .navbar-nav>.nav-item.active>a {
             color: #c8a97e;
         }

         @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: #fff;
             }
             .navbar-brand{
                 margin-left:2em !important;
             }
         }
         @media only screen and (max-width: 435px) {
            .trainer_card_margin{
                margin-left:20% !important;
            }

         }
         .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: 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; */
         }

         .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;
         }

         .panel-body {
             /* margin-top: -20px; */
             background: #646566;
             transition: all 0.5s;
         }


         .panel-body a {
             border-left: 3px solid #ffdf6c;
             margin-left: -2em;
             padding: 6px !important;

         }

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

         }

         #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:active {
             background-color: hsla(0, 0%, 1%, 0.659) !important;
             border-radius: 40px !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 .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 */