/* =======================================================================
KeySoft - Software Landing Page 
======================================================================= */

:root {
    --color1: #9a8e31;
    --color1_dark: #5d521f;
    --color2: #b4af80;
    --color2_light: #b4af80;
    --color3: #e3e3cd;
    --color3_light: #ebebea;
  }
  
  /*
  1. GLOBAL STYLES
  2. TYPOGRAPHY
       2.1 FONTS
       2.2 HEADINGS
  3. LAYOUT     
       3.1 GENERAL
       3.2 PRELOADER
       3.3 LOGO
       3.4 CAROUSELS
  4. MENU
  5. HEADER
  6. SECTIONS
       6.1 ABOUT
       6.2 FEATURES
       6.3 VIDEO
       6.4 SOLUTIONS
       6.5 PRICING
       6.6 TESTIMONIALS
       6.7 TEAM
       6.8 CLIENTS
       6.9 SUBSCRIBE
       6.10 CONTACT
  7.FOOTER
  8.ICONS
  9.LIVE PREVIEW
  10. Mobile
  11. Material Textfield
  12. Signup Popup
  13. Egift
  */
  /* --------------------------------------
  1. GLOBAL STYLES
  -----------------------------------------*/
  
    @font-face 
  {
       src:url(../fonts/Excellent.otf);   
       font-family:Excellent;     
  }
  @font-face 
  {
        font-family: Belleza;
        src:
        url('fonts/Belleza.ttf2') format('ttf2'), /* Super Modern Browsers */
        url('fonts/Belleza.svg#svgFontName') format('svg'); /* Legacy iOS */      
  }
   #home-slider
      {
          height:660px;
          border: none;
          width: 100%;
      }
  .title-sign
  {
      font-family: Excellent;  
      font-size: 32pt;
      margin-top: -38px;
      color: var(--color1);
      margin-bottom: 20px;
  }
  .title-sign.color2 {
      color: #fff;
      text-shadow: 1px 1px 1px var(--color1);
  }
  .about-section
  {
      background: url("../img/flower1.webp") no-repeat left top, #fff;
      background-size: 18%;
      margin-top: -10px;
  }
  .info-section
  {
      text-align: center;
      background: var(--color3);
  }
  .info-item
  {
      margin-bottom: 65px;
      height: 80px;
  }
  .info-item a:hover {
      color: #000;
  }
  .info-item-2
  {
      margin-bottom: 40px;
      height: 120px;
  }
  .service-section {
      background: #fff;
  }
  .service-section a {
      font-size: 22px !important;
      text-shadow: 1px 1px 2px var(--color3);
  }
  .service-1
  {
      background: url("../img/services/services-01.jpg") no-repeat bottom center;
      background-size: cover;
      border-radius: 30px 0 0 0;
  }
  .service-2
  {
      background: url("../img/services/services-02.jpg") no-repeat bottom center;
      background-size: cover;
      border-radius: 0 30px 0 0;
  }
  .service-3
  {
      background: url("../img/services/services-03.jpg") no-repeat bottom center;
      background-size: cover;
      border-radius: 0 0 0 30px;
  }
  .service-4
  {
      background: url("../img/services/services-04.jpg") no-repeat bottom center;
      background-size: cover;
      border-radius: 0 0 30px 0;
  }
  .service-item {
      padding: 50px 50px 30%;
      position: relative;
      overflow: hidden;
  }
  .service-item:after {
      content: '';
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0;
      top: 0;
      background-color: rgba(255, 255, 255, 0.3);
  }
  .service-item a {
      position: relative;
      z-index: 1;
  }
  .service-item a i {
      transition: 0.3s;
  }
  .service-item a:hover i {
      transform: translateX(10px);
  }
  /* plus glyph for showing collapsible panels */
  .panel-default > .panel-heading
  {
      background: none;
      border: none;
  }
  .panel-default
  {
      border: none;
  }
  .panel
  {
      padding: 15px 0;
      margin-bottom: 0;
  }
  .panel-heading .accordion-plus-toggle:before {
     font-family: FontAwesome;
     content: "\f077";
     float: right;
     color: #3f1715;
     
  }
  
  .panel-heading .accordion-plus-toggle.collapsed:before {
     content: "\f078";
     color: #3f1715;
  }
  
  /* arrow glyph for showing collapsible panels */
  .panel-heading .accordion-arrow-toggle:before {
     font-family: FontAwesome;
     content: "\f078";
     float: right;
     color: #3f1715;
  }
  
  .panel-heading .accordion-arrow-toggle.collapsed:before {
     content: "\f054";
     color: silver;
  }
  
  /* sets the link to the width of the entire panel title */
  .panel-title > a {
     display: block;
     color: #3f1715;
     text-transform: uppercase;
  }
      
  body {
      overflow-x: hidden;
      font-weight: normal;
      padding: 0;
      background: url("../img/bg-footer.jpg") no-repeat left bottom, var(--color3_light);
      padding-top: 40px;
      padding-bottom: 412.5px;    
      color: #3f1715;
      font-size: 12pt;
      line-height: 1.5;
      font-family: Belleza;
  }
  
  @media screen and (max-width: 768px) {
      body {
          padding-top: 0;
      }
  }
  
  .container
  {
      
  }
  .container-2
  {
      background: none;
      width: 120%;
      margin: 0 auto;
      margin-left: -10%;
  }
  a,
  a:hover,
  a:focus,
  a:active,
  a.active {
      outline: 0;
      text-decoration: none;
  }
  a {
      color: var(--color1_dark);
  }
  a:hover,
  a:focus,
  a:active,
  a.active {
      color: var(--color1);
  }
  .btn:focus,
  .btn:active,
  .btn.active,
  .btn:active:focus {
      outline: 0;
  }
  p {
      color: #3f1715;
      font-size: 12pt;
      line-height: 1.5;
      margin-bottom: 0;
  }
  ::-moz-selection {
      text-shadow: none;
      background: #1080f2;
      color: #fff;
  }
  ::selection {
      text-shadow: none;
      background: #1080f2;
      color: #fff;
  }
  img::selection {
      background: 0 0;
  }
  img::-moz-selection {
      background: 0 0;
  }
  /* --------------------------------------
  2. TYPOGRAPHY
  -----------------------------------------*/
  /* 2.2 HEADINGS */
  
  h1,
  h2,
  h3 {
      font-family: Belleza;
      font-weight: normal;
  }
  h2.title
  {
      font-size: 40px;
      line-height: 1.2;
  }
  section h2.section-heading {
      margin-top: 0;
      margin-bottom: 70px;    
      color: var(--color1);
  }
  section .section-subheading {
      margin-bottom: 20px;
      text-transform: none;
      font-size: 18px;
      font-style: normal;
      line-height: 1;
      color: #2b0301;
  }
  .separator {
      width: 30px;
      height: 2px;
      display: block;
      margin: auto;
      background-color: #1080f2;
  }
  /* --------------------------------------
  3. LAYOUT
  -----------------------------------------*/
  /*Gallery*/
      .wrap {
         overflow: hidden;
         margin: 10px;
      }
      .box {
         float: left;
         position: relative;
         width: 33.333%;
          height: 410px;
         padding-bottom: 20%;
      }
      .boxInner {
         position: absolute;
         left: 10px;
         right: 10px;
         top: 10px;
         bottom: 10px;
         overflow: hidden;
      }
      .boxInner img {
         width: 100%;
      }
      .boxInner .titleBox {
         position: absolute;
         bottom: 0;
         left: 0;
         right: 0;
         margin-bottom: -50px;
         background: #040404;
         background: rgba(0, 0, 0, 0.5);
         color: #FFF;
         padding: 10px;
         text-align: center;
         -webkit-transition: all 0.3s ease-out;
         -moz-transition: all 0.3s ease-out;
         -o-transition: all 0.3s ease-out;
         transition: all 0.3s ease-out;
      }
      .boxInner:hover .titleBox {
         margin-bottom: 0;
      }
      @media only screen and (max-width : 480px) {
         /* Smartphone view: 1 tile */
         .box {
            width: 100%;
            padding-bottom: 80%;
         }
      }
      @media only screen and (max-width : 650px) and (min-width : 481px) {
         /* Tablet view: 2 tiles */
         .box {
            width: 50%;
            padding-bottom: 50%;
         }
      }
      @media only screen and (max-width : 1050px) and (min-width : 651px) {
         /* Small desktop / ipad view: 3 tiles */
         .box {
            width: 33.3%;
            padding-bottom: 33.3%;
         }
      }
      @media only screen and (max-width : 1290px) and (min-width : 1051px) {
         /* Medium desktop: 4 tiles */
         .box {
            width: 25%;
            padding-bottom: 25%;
         }
      }
    
  /*Gallery*/
  /* 3.1 GENERAL*/
  
  section {
      padding: 50px 0;
  }
  .row {
      margin: 0;
      padding: 0 100px;
      position: relative;
  /*    z-index: 99999999;*/
  }
  .row-2
  {
      padding: 0;
  }
  .container {
      padding: 0;
      position: relative;
  }
  .outer-margin {
      margin: 0 -15px;
  }
  .bg-light-gray {
      background-color: #f7f7f7;
  }
  .btn-primary {
      text-transform: uppercase;
      font-family: "WorkSans", Helvetica, Arial, sans-serif;
      font-weight: 700;
      color: #fff;
  }
  .btn-primary:hover,
  .btn-primary:focus,
  .btn-primary:active,
  .btn-primary.active,
  .open .dropdown-toggle.btn-primary {
      border-color: #f6bf01;
      color: #fff;
      background-color: #fec503;
  }
  .btn-primary:active,
  .btn-primary.active,
  .open .dropdown-toggle.btn-primary {
      background-image: none;
  }
  .btn-xl {
      height: 50px;
      background-color: #1080f2;
      border-radius: 2px;
      color: white;
      font-size: 14px;
      font-weight: 700;
      text-transform: uppercase;
      width: 100%;
      transition: 0.3s;
  }
  .btn-xl:hover,
  .btn-xl:focus,
  .btn-xl:active,
  .btn-xl.active {
      background-color: #273140;
      color: #fff;
  }
  .btn-xl:active,
  .btn-xl.active,
  .open .dropdown-toggle.btn-xl {
      background-image: none;
  }
  body.modal-open {
      overflow: hidden;
  }
  .parallax {
      background: #1080f2;
  }
  .parallax h2.section-heading,
  .parallax .section-subheading {
      color: #fff;
  }
  .parallax .separator {
      background: #fff;
  }
  .gray-bg {
      background: #fbe8d9;
  }
  .header-buttons {
      margin: 60px auto 100px auto;
  }
  .primary-button {
      min-width: 150px;
      padding: 0 20px;
      background-color: white;
      border-radius: 2px;
      color: #1080f2;
      display: inline-block;
      text-align: center;
      font-size: 14px;
      font-weight: 700;
      text-transform: uppercase;
      line-height: 36px;
      margin: 0 10px;
      border: 2px solid white;
      -webkit-transition: 0.3s;
      -o-transition: 0.3s;
      transition: 0.3s;
  }
  .primary-button.button-inverse {
      color: #fff;
      background: #1080f2;
      border: 2px solid #1080f2;
      margin: 0;
  }
  .primary-button.button-inverse:hover {
      color: #1080f2;
      background: transparent;
      border: 2px solid #1080f2;
  }
  .secondary-button {
      min-width: 150px;
      text-align: center;
      line-height: 36px;
      background: #1080f2;
      display: inline-block;
      line-height: 36px;
      color: white;
      font-size: 14px;
      margin: 0 10px;
      font-weight: 700;
      text-transform: uppercase;
      border: 2px solid white;
      border-radius: 2px;
      -webkit-transition: 0.3s;
      -o-transition: 0.3s;
      transition: 0.3s;
  }
  .secondary-button-inverse {
      color: #1080f2;
      border-color: #1080f2;
      background: #fff
  }
  .secondary-button.secondary-button-inverse:hover {
      color: #fff;
      background: #1080f2;
  }
  .primary-button:hover {
      background: none;
      color: #fff;
      text-decoration: none;
  }
  .secondary-button:hover {
      background: #fff;
      color: #273140;
      text-decoration: none;
  }
  /*3.2 LOGO*/
  
  .logo img {
      width: 100%;
      max-width: 120px;
      padding: 20px;
  }
  .logo-footer img {
      background: var(--color3);
      padding: 10px;
      border-radius: 5px;
  }
  /*3.3 PRELOADER*/
  
  #preloader {
      position: fixed;
      left: 0;
      top: 0;
      z-index: 9999;
      width: 100%;
      height: 100%;
      overflow: visible;
      background: #deba4c
  }
  .spinner {
      opacity: 0.9;
      width: 50px;
      height: 50px;
      border-radius: 100%;
      margin: auto;
      position: absolute;
      left: 0;
      right: 0;
      top: 0;
      bottom: 0;
      margin: auto;
  }
  .spinner:after,
  .spinner:before {
      content: '';
      position: absolute;
      left: 0;
      right: 0;
      top: 0;
      bottom: 0;
      margin: auto;
      width: 30px;
      height: 30px;
      border: 5px solid transparent;
      border-bottom: 5px solid #fff;
      border-radius: 100%;
      -webkit-animation: rotate 1s linear infinite;
      animation: rotate 1s linear infinite;
  }
  .spinner:before {
      width: 40px;
      height: 40px;
      -webkit-animation-direction: reverse;
      animation-direction: reverse;
  }
  @-webkit-keyframes rotate {
      from {
          -webkit-transform: rotate(0deg);
          transform: rotate(0deg);
      }
      to {
          -webkit-transform: rotate(360deg);
          transform: rotate(360deg);
      }
  }
  @keyframes rotate {
      from {
          -ms-transform: rotate(0deg);
          -webkit-transform: rotate(0deg);
          transform: rotate(0deg);
      }
      to {
          -ms-transform: rotate(360deg);
          -webkit-transform: rotate(360deg);
          transform: rotate(360deg);
      }
  }
  /*3.4 CAROUSELS*/
  #myCarousel
  {
      padding: 60px 0 10px 0;
      margin-bottom: 40px;
  } 
  .owl-theme .owl-controls .owl-buttons {
      display: none;
  }
  .owl-theme .owl-controls .owl-buttons div {
      background: url(../img/arrow.png);
      display: inline-block;
      zoom: 1;
      margin: 0;
      width: 10px;
      text-indent: -9999px;
      height: 18px;
      font-size: 0;
      position: absolute;
      right: 0;
      margin-top: 8px;
      margin-right: -72px;
      top: 50%;
      padding: 0;
      filter: Alpha(Opacity=30);
      opacity: 0.3;
      -webkit-transition: 0.2s;
      -o-transition: 0.2s;
      transition: 0.2s;
  }
  .owl-theme .owl-controls .owl-buttons div.owl-prev {
      -webkit-transform: rotate(180deg);
      -moz-transform: rotate(180deg);
      -o-transform: rotate(180deg);
      -ms-transform: rotate(180deg);
      transform: rotate(180deg);
      right: auto;
      left: 0;
      margin-left: -72px;
  }
  .owl-theme .owl-controls.clickable .owl-buttons div:hover {
      filter: Alpha(Opacity=100);
      opacity: 1;
      text-decoration: none;
  }
  .owl-theme .owl-controls .owl-page {
      display: inline-block;
      zoom: 1;
      *display: inline;
  }
  .owl-theme .owl-controls .owl-page span {
      display: block;
      width: 10px;
      height: 10px;
      margin: 0 10px;
      -webkit-border-radius: 20px;
      -moz-border-radius: 20px;
      border-radius: 20px;
      opacity: 0.22;
      background-color: #248df8;
      -webkit-transition: 0.3s;
      -o-transition: 0.3s;
      transition: 0.3s;
  }
  .owl-theme .owl-controls .owl-page.active span,
  .owl-theme .owl-controls.clickable .owl-page:hover span {
      filter: Alpha(Opacity=100);
      /*IE7 fix*/
      
      opacity: 1;
  }
  .owl-theme .owl-controls .owl-page span.owl-numbers {
      height: auto;
      width: auto;
      color: #FFF;
      padding: 2px 10px;
      font-size: 12px;
      -webkit-border-radius: 30px;
      -moz-border-radius: 30px;
      border-radius: 30px;
  }
  .owl-item.loading {
      min-height: 150px;
  }
  .owl-carousel .owl-wrapper:after {
      content: ".";
      display: block;
      clear: both;
      visibility: hidden;
      line-height: 0;
      height: 0;
  }
  /* display none until init */
  
  .owl-carousel {
      display: none;
      position: relative;
      width: 100%;
      -ms-touch-action: pan-y;
  }
  .owl-carousel .owl-wrapper {
      display: none;
      position: relative;
      -webkit-transform: translate3d(0px, 0px, 0px);
  }
  .owl-carousel .owl-wrapper-outer {
      overflow: hidden;
      position: relative;
      z-index: 2;
      width: 100%;
  }
  .owl-carousel .owl-wrapper-outer.autoHeight {
      -webkit-transition: height 500ms ease-in-out;
      -moz-transition: height 500ms ease-in-out;
      -ms-transition: height 500ms ease-in-out;
      -o-transition: height 500ms ease-in-out;
      transition: height 500ms ease-in-out;
  }
  .owl-carousel .owl-item {
      float: left;
  }
  .owl-controls .owl-page,
  .owl-controls .owl-buttons div {
      cursor: pointer;
  }
  .owl-controls {
      -webkit-user-select: none;
      -khtml-user-select: none;
      -moz-user-select: none;
      -ms-user-select: none;
      user-select: none;
      -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  }
  .grabbing {
      cursor: url(../img/grabbing.png) 8 8, move;
  }
  .owl-carousel .owl-wrapper,
  .owl-carousel .owl-item {
      -webkit-backface-visibility: hidden;
      -moz-backface-visibility: hidden;
      -ms-backface-visibility: hidden;
      -webkit-transform: translate3d(0, 0, 0);
      -moz-transform: translate3d(0, 0, 0);
      -ms-transform: translate3d(0, 0, 0);
  }
  /* --------------------------------------
  4. MENU
  -----------------------------------------*/
  
  .navbar-default {
      border-color: transparent;
      /*background-color: #FAECE1;
      width: inherit;*/
      background: #fff;
  }
  .navbar-default .navbar-brand:hover,
  .navbar-default .navbar-brand:focus,
  .navbar-default .navbar-brand:active,
  .navbar-default .navbar-brand.active {
      color: #fec503;
  }
  .navbar-default .navbar-collapse {
      border: none;
      box-shadow: none;
  }
  .navbar-default .navbar-toggle {
      border: none;
      margin-top: 35px;
  }
  .navbar-default .navbar-toggle .icon-bar {
      background-color: #040404;
  }
  .navbar-default .navbar-toggle:hover,
  .navbar-default .navbar-toggle:focus {
      background: none;
  }
  .navbar-default .nav li a {
      color: #040404;
      font-size: 13pt;
      padding: 20px 15px;
      line-height: 1;
      text-transform: uppercase;
      -webkit-transition: 0.25s;
      -o-transition: 0.25s;
      transition: 0.25s;
  }
  .navbar-default .nav li a:hover,
  .navbar-default .nav li a:focus,
  .navbar-default .nav li a.active {
      outline: 0;
      color: var(--color2);
      opacity: 1;
  }
  .navbar-default.navbar-shrink .nav li a {
      opacity: 0.8
  }
  .navbar-default.navbar-shrink .nav .active a {
      opacity: 1
  }
  .navbar-default.navbar-shrink .nav li a:hover,
  .navbar-default.navbar-shrink .nav li a:focus {
      outline: 0;
      color: #fff;
      opacity: 1;
      background: none;
  }
  .navbar-default.navbar-shrink .navbar-nav>.active>a:focus,
  .navbar-default.navbar-shrink .navbar-nav>.active>a:hover,
  .navbar-default .navbar-nav>.active>a {
      border-radius: 0;
      background: none;
      opacity: 1;
      color: #1080f2;
      -webkit-filter: brightness(1.2);
  }
  @media(min-width:960px) {
      .navbar-default {
          -webkit-transition: all 0.25s ease-in-out;
          -moz-transition: all 0.25s ease-in-out;
          -o-transition: all 0.25s ease-in-out;
          -ms-transition: all 0.25s ease-in-out;
          transition: all 0.25s ease-in-out;
      }
      .navbar-default.navbar-shrink {
          padding: 10px 0;
      }
      .navbar-fixed-top
      {
          top: 40px;
      }
      .modal-dialog{
          width: 60%;
      }
        #popup-ads .modal-dialog{
            width: 28%;
        }
            
  }
  /* --------------------------------------
  5. HEADER
  -----------------------------------------*/
  #header,
  header {
      position: relative;
      text-align: center;
      padding-bottom: 5vh;
  }
  
  #headerbackground{
      background-image: url(../img/headerbg.webp);
      background-attachment: fixed;
      background-size: cover;
      position: absolute;
      background-position: center center;
      width: 100%;
      height: 100%;
      top: 0;
  }
  #headerbackground2 {
      background-image: url(../img/headerbg.webp);
      background-attachment: fixed;
      background-size: cover;
      position: absolute;
      background-position: center 700px;
      width: 100%;
      height: 100%;
      top: 0;
  }
  
  #headergradient
  {
      position: absolute;
      height: 5vh;
      background-image: linear-gradient(180deg, rgba(217, 217, 217, 0) 0%, #FAECE1 87.5%);
      background-size: 100% 100%;
      background-repeat: no-repeat no-repeat;
      z-index: 999;
      width: 100%;
  }
  header .intro-text {
      padding-top: 100px;
      padding-bottom: 50px;
  }
  header .intro-text .intro-heading {
      font-size: 18px;
      font-weight: 400;
      line-height: 25px;
      max-width: 75%;
      display: block;
      text-align: left;
      float: left;
      margin-top: 30px;
      margin-bottom: 40px;
  }
  
  .header-buttons .secondary-button ,
  .header-buttons .primary-button {
  float: left;
  margin-left: 0;
  margin-right: 20px;
  }
  
  #header .primary-button.button-inverse:hover {
     color:  #273140;
     background: #fff;
     border-color: #fff
  }
  
  header .intro-text {
      padding-top: 180px;
      padding-bottom: 0;
      float: left;
      width: 50%;
  }
  header .intro-text .intro-lead-in {
      font-family: WorkSans;
      font-size: 52px;
      font-weight: 200;
      letter-spacing: -1px;
      margin: 0;
      text-align: left;
      margin-top: 50px;
      float: left;
      line-height: 1.2;
  }
  header .header-dashboard {
      display: block;
      margin: auto;
      float: right;
      text-align: right;
  }
  header .header-dashboard .dashboard {
       margin-top: 170px;
      margin-bottom: 0;
  }
  header .container {
      position: relative;
      z-index: 10;
  }
  #particles-js {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
  }
  .navbar-nav
  {
      margin-top: 35px !important;
  }
  .top-social
  {
      margin-top: 30px;
      float: right;
  }
  #top-phone
  {
      border-radius: none;
      -moz-border-radius: none;
      height: auto;
      width: auto;
      background: none;
      font-size: 15pt;
      line-height: 46px;
  }
  .top-social li a
  {
      padding: 0px !important;
      margin: 5px;
      border-radius: 180px;
      -moz-border-radius: 180x;
      height: 40px;
      width: 40px;
      text-align: center;
      background: var(--color3);
  }
  .top-social li a:hover
  {
      background: #fff !important;
      box-shadow: 3px 3px 10px #dfdfdf;
  }
  .top-social li a i{
      margin-top: 12px;
      color: var(--color1);
      font-size: 18px;
  }
  .header-content-row
  {
      margin-top: 200px;
  }
  .header-info
  {
      -moz-border-radius: 10px;
      min-height: 580px;
      padding: 20px;
      vertical-align: middle;
  }
  .header-info h2
  {
      margin-top: 0;
      margin-bottom: 20px;
  }
  .header-info i
  {
      font-size: 18pt;
  }
  
  .header-info-text
  {
      font-size: 12pt;
  }
  .header-info > .row
  {
      margin-bottom: 30px;
  }
  .name-link
  {
      text-decoration: underline;
      color: #336cd4;
  }
  #section1
  {
      position: absolute;
      width: 100%;
      max-width: 56px;
      left: 50%;
      margin-left: -28px;
      z-index: 9997;
  }
  #section1 a
  {
      background: none;
      box-shadow: none;
  }
  #section1 a img
  {
      width: 100%;
      max-width: 180px;
      text-align: center;
  }
  .header-bottom
  {
      background: #FAECE1;
      text-align: center;
      padding-top: 20px;
      padding-bottom: 20px;
  }
  .header-bottom > h2
  {
      font-weight: bold;
      color: #66423C;
      margin-top: 60px;
  }
  .header-bottom a
  {
      display: block;
      max-width: 300px;
      margin: 0px auto;
      font-size: 14pt;
      font-weight: normal;
      padding: 20px;
      border-radius: 10px;
      -moz-border-radius: 10px;
      color: #fff;
      background: linear-gradient(180deg, #7C2F2F 0%, #A55A5A 100%);
      box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
      margin-top: 30px;
      margin-bottom: 40px;
      font-family: "WorkSans", sans-serif
  }
  .header-bottom a:hover
  {
      opacity: 0.8;
  }
  .header-info-page-title
  {
      margin-top: 50px;
  }
  .header-info-page-title h1
  {
      font-size: 40pt;
      font-weight: 300;
  }
  .header-background-page
  {
      opacity: 0.5;
  }
  .no-header-background
  {
      padding-top: 50px;
      min-height: 500px;
  }
  
  .body-social i
  {
      font-size: 18px;
      color: #310101;
  }
  /* --------------------------------------
  6. SECTIONS
  -----------------------------------------*/
  /*     6.1 ABOUT*/
  #services ul {
      padding: 0;
  }
  #services ul li {
      list-style-type: none;
  }
  #services ul li {
      list-style-type: none;
  }
  #services .col-md-3.last {
      padding-right: 0;
  }
  #services .nc-icon-outline {
      color: #1080f2;
      margin-bottom: 36px;
      font-size: 40px
  }
  .service-heading {
      text-transform: none;
      font-size: 20px;
      line-height: 22px;
  }
  /*6.2 FEATURES*/
  
  .page-section
  {
      background: url(../img/flower3.webp) no-repeat 18% 40%, var(--color2_light);
  }
  #features 
  {
      overflow: hidden;
      background: url(../img/leaf2.webp) no-repeat right bottom, var(--color3);
      background-size: 22%;
  }
  #features .container {
      position: relative;
  }
  #features img {
      position: absolute;
      top: 0;
      right: 0
  }
  #features .section-subheading {
      margin-bottom: 30px;
      margin-top: 5px;
      max-width: 450px;
      float: left;
      line-height: 25px;
  }
  .features-tabs .tabs {
      margin: 0;
      padding: 0;
      width: 1170px;
      height: 60px;
      background-color: white;
      border: 1px solid #d1d1d1;
      margin-top: 100px;
  }
  .features-tabs .tab {
      -webkit-transition: 0.3s;
      -o-transition: 0.3s;
      transition: 0.3s;
      padding: 0;
      display: inline-block;
      zoom: 1;
      background: none;
      border: none;
      border-bottom: none;
      text-align: center;
      font-size: 14px;
      font-weight: 700;
      height: 58px;
      line-height: 60px;
      background: #fafafa;
  }
  .features-tabs .tab a {
      color: #bbb;
      text-transform: uppercase;
      display: block;
      -webkit-transition: 0.3s;
      -o-transition: 0.3s;
      transition: 0.3s;
  }
  .features-tabs .tab.active {
      background: #fff;
  }
  .features-tabs .tab a.active {
      color: #1080f2
  }
  .features-tabs .tab:hover a {
      color: #1080f2
  }
  .features-tabs .panel-container {
      background: #fff;
      border: solid #666 1px;
      padding: 10px;
      -moz-border-radius: 0 4px 4px 4px;
      -webkit-border-radius: 0 4px 4px 4px;
  }
  .features-tabs .tab a .triangle {
      opacity: 0;
      visibility: hidden;
      -webkit-transition: 0.3s;
      -o-transition: 0.3s;
      transition: 0.3s;
  }
  .features-tabs .tab a.active .triangle {
      border-bottom: 0;
      visibility: visible;
      width: 0;
      -webkit-transition: 0s;
      -o-transition: 0s;
      transition: 0s;
      height: 0;
      border-left: 10px solid transparent;
      border-right: 10px solid transparent;
      border-bottom: 10px solid #d1d1d1;
      opacity: 1;
      position: absolute;
      left: 50%;
      margin-left: -5px;
      top: -10px;
  }
  .features-tabs .tab .triangle .inner-triangle {
      display: block;
      -webkit-transition: 0s;
      -o-transition: 0s;
      transition: 0s;
      border-left: 8px solid transparent;
      border-right: 8px solid transparent;
      border-bottom: 8px solid #fff;
      top: 2px;
      position: absolute;
      left: -8px;
  }
  #features-tab1 img {
      margin-right: -200px;
  }
  #features-tab2 img {
      margin-right: 60px;
  }
  #features-tab3 img {
      margin-top: -50px;
      margin-right: 30px;
  }
  .features-tabs ul {
      padding-left: 0px;
      margin-bottom: 30px;
  }
  .features-tabs li {
      margin: 0;
      margin-left: 20px;
      margin-bottom: 10px;
      font-size: 16px;
      font-weight: 400;
      color: #fff;
  }
  .features-tabs li span{
      font-size: 10pt;
  }
  .animated {
      -webkit-animation-duration: 1s;
      animation-duration: 1s;
      -webkit-animation-fill-mode: both;
      animation-fill-mode: both;
  }
  @-webkit-keyframes fadeInRight {
      from {
          opacity: 0;
          -webkit-transform: translate3d(100%, 0, 0);
          transform: translate3d(100%, 0, 0);
      }
      to {
          opacity: 1;
          -webkit-transform: none;
          transform: none;
      }
  }
  @keyframes fadeInRight {
      from {
          opacity: 0;
          -webkit-transform: translate3d(100%, 0, 0);
          transform: translate3d(100%, 0, 0);
      }
      to {
          opacity: 1;
          -webkit-transform: none;
          transform: none;
      }
  }
  .fadeRight {
      -webkit-animation-name: fadeInRight;
      animation-name: fadeInRight;
  }
  .features-title
  {
      font-size: 14pt;
      font-style: italic;
      margin-bottom: 10px;
  }
  .features-title-red
  {
      color:#803333;
  }
  h3.title
  {
      text-align: center;
      margin-bottom: 30px;
  }
  .job-left
  {
      background: var(--color2);
      border-radius: 180px;
      padding: 50px;
      position: relative;
  /*    height: 600px;*/
  }
  .job-left > *:not(.job-left-icon) {
      position: relative;
      z-index: 1;
  }
  .job-left-icon
  {
      position: absolute;
      left: 50px;
      top: 0;
  }
  .features-right-icon
  {
      position: absolute;
      right: 50px;
      bottom: 250px;
  }
  
  .features-right
  {
      /*background: #e0d9c7;
      border-radius: 180px;
      padding: 50px;
      height: 600px;*/
  }
  
  /*6.3 VIDEO*/
  
  #video .section-subheading {
      margin-bottom: 55px;
  }
  .video-container {
      position: relative;
  }
  .video-container a {
      display: block;
      cursor: pointer;
      width: 630px;
      margin: auto;
  }
  .video-container img {
      margin: auto;
      display: block;
  }
  .play-video {
      position: absolute;
      left: 50%;
      top: 50%;
      margin-left: -38px;
      margin-top: -48px;
      width: 76px;
      height: 76px;
      background-color: rgba(39, 49, 64, 0.6);
      -webkit-transition: 0.2s;
      -o-transition: 0.2s;
      transition: 0.2s;
      border-radius: 50%;
      cursor: pointer;
  }
  .video-container a:hover .play-video {
      background-color: rgba(39, 49, 64, 1);
  }
  .play-video .fa-play {
      width: 22px;
      height: 26px;
      color: white;
      font-size: 28px;
      font-weight: 400;
      position: absolute;
      top: 25px;
      left: 30px;
  }
  #video {
      background: url(../img/video/videobg.jpg);
      position: relative;
      background-size: 100%;
      background-attachment: fixed;
  }
  #video .overlay {
      width: 100%;
      height: 100%;
      opacity: 0.9;
      position: absolute;
      top: 0;
  }
  .video-socials {
      position: relative;
      margin: auto;
      width: auto;
      text-align: center;
      margin-top: 45px;
  }
  .video-socials a:hover .fa {
      color: #273140
  }
  .video-socials .fa {
      color: white;
      margin: 0 17px;
      font-family: FontAwesome;
      -webkit-transition: 0.3s;
      -o-transition: 0.3s;
      transition: 0.3s;
      font-size: 22px;
      font-weight: 400;
      line-height: 25px;
      height: 25px;
      text-transform: uppercase;
  }
  .video-modal {
      padding: 0!important;
      background: rgba(39, 49, 64, 0.5);
  }
  .video-modal iframe {
      border: 5px solid rgba(255, 255, 255, 0.25);
      border-radius: 3px;
      box-sizing: content-box;
      box-shadow: 0 0px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
  }
  .video-modal .modal-content {
      /* padding: 0;
      border: 0;
      position: fixed;
      width: 712px;
      left: 50%;
      margin-top: -200px;
      top: 50%;
      margin-left: -356px;
      border-radius: 0;
      text-align: center;
      background-clip: border-box;
      -webkit-box-shadow: none;
      box-shadow: none;
      background: none; */
  }
  /*6.4 SOLUTIONS*/
  
  .chart {
      position: relative;
      display: block;
      margin: 0 auto 40px auto;
      width: 230px;
      height: 230px;
      line-height: 230px;
      letter-spacing: -1px;
      font-family: WorkSans;
      text-align: center;
      font-weight: 300;
      font-size: 48px;
      color: #1080f2;
      background: #fff;
      border-radius: 50%;
  }
  .chart .percent {
      font-size: 28px;
      position: relative;
      margin-left: 3px;
  }
  .chart canvas {
      position: absolute;
      top: 0;
      left: 0;
  }
  .chart-content {
      text-align: center;
      height: 30px;
      line-height: 30px;
  }
  .chart-content h4 {
      color: #666;
      font-size: 18px;
      margin: 0;
      font-weight: 400;
      display: inline-block;
      line-height: 30px;
      margin-left: 10px;
      position: relative;
      top: -6px;
  }
  .chart-content .nc-icon-outline {
      color: #1080f2;
      display: inline-block;
      font-size: 30px;
  }
  /*6.5 PRICING*/
  
  .pricing {
      overflow: hidden;
      position: relative;
      border: 2px solid #e6e6e6;
      border-top: none;
      -webkit-border-bottom-right-radius: 2px;
      -webkit-border-bottom-left-radius: 2px;
      -moz-border-radius-bottomright: 2px;
      -moz-border-radius-bottomleft: 2px;
      border-bottom-right-radius: 2px;
      border-bottom-left-radius: 2px;
      width: 100%;
      margin: 0;
  }
  .pricing.active {
      background-color: #1080f2;
      border: 2px solid #1080f2;
      opacity: 0.85;
      border-top: 0;
  }
  .pricing-title {
      background-color: #1080f2;
      border-radius: 2px 2px 0 0;
      text-align: center;
      color: white;
      font-size: 16px;
      font-weight: 700;
      line-height: 62px;
      height: 60px;
  }
  .pricing .pricing-row {
      padding-top: 23px;
      float: left;
      padding-left: 0;
      text-align: center;
      padding-right: 0;
      width: 100%;
  }
  .pricing .pricing-row.selected {
      background-color: whitesmoke;
      font-weight: bold;
      color: #666;
      font-size: 14px;
      padding-top: 13px;
      margin-top: 10px;
      margin-bottom: -13px;
      padding-bottom: 13px;
  }
  .pricing.active .pricing-row.selected {
      background: rgba(255, 255, 255, 0.2);
      color: #fff;
  }
  .pricing .col-lg-3 {
      padding: 50px 0 20px 0;
      font-family: WorkSans;
      font-weight: 300;
      line-height: 25px;
      color: #1080f2;
      width: 100%;
      text-align: center;
  }
  .pricing.active .col-lg-3 {
      color: #fff;
  }
  .pricing .button-container {
      text-align: center;
      position: relative;
      padding: 42px 0 45px 0;
      width: 100%;
      margin: 0;
      height: auto;
      background: none;
  }
  .pricing .pricing-price {
      font-size: 60px;
      letter-spacing: -2px;
      line-height: 42px;
      display: inline-block;
  }
  .pricing .pricing-time {
      font-weight: 300;
      letter-spacing: -1px;
      margin-top: 5px;
      font-size: 30px;
  }
  .pricing .iconita {
      line-height: 52px;
      font-size: 48px;
      height: 52px;
  }
  .pricing .pricing-title {
      font-weight: 700;
      font-size: 32px;
      margin-top: 25px;
      margin-bottom: 15px;
      line-height: 32px;
  }
  .pricing .pricing-option {
      text-transform: capitalize;
      text-align: center;
      line-height: 1;
      color: #666;
      font-size: 16px;
  }
  .pricing .pricing-row.selected .pricing-option {
      font-size: 14px;
  }
  .pricing .pricing-option.selected {
      background: #3595f8;
  }
  .pricing.active .pricing-option {
      color: #fff;
  }
  .pricing .pricing-row.selected .fa {
      font-size: 13px;
      top: 0;
  }
  .pricing .fa {
      color: #1080f2;
      font-size: 11px;
      margin-right: 10px;
      position: relative;
      top: -1px;
  }
  .pricing.active .fa {
      color: #fff;
  }
  .pricing .currency {
      font-size: 34px;
      margin-right: 5px;
      position: relative;
      top: -20px;
  }
  .pricing .billing-time {
      color: #b3b3b3;
      font-size: 14px;
      line-height: 14px;
      margin-top: 8px;
  }
  .pricing.active .billing-time {
      color: #fff;
  }
  .pricing .secondary-button {
      background: transparent;
  }
  .pricing .secondary-button:hover {
      background: #fff;
  }
  .pricing .secondary-button.secondary-button-inverse:hover {
      background: #1080f2;
  }
  /*6.6 TESTIMONIALS*/
  
  #testimonials {
      padding-bottom: 0px;
      margin-bottom: 52px;
  }
  .tt-content h3 {
      font-size: 30px;
      font-weight: 300;
      letter-spacing: -1px;
      line-height: 1.65;
      text-align: center;
      color: #333;
      margin: auto;
      font-family: WorkSans;
      max-width: 850px;
  }
  .tt-content h4 {
      font-size: 16px;
      font-weight: 700;
      text-transform: uppercase;
      margin: 0;
      margin-bottom: 5px;
      padding-top: 20px;
  }
  .tt-content .content {
      font-size: 16px;
      font-weight: 400;
  }
  .tt-content .tt-container {
      margin-top: 15px;
      text-align: center;
  }
  .tt-images {
      text-align: center;
      margin-bottom: -42px;
      font-size: 0;
  }
  .tt-image {
      display: inline-block;
      margin: 0;
      /*   border: 2px solid #D1D1D1;*/
      
      border-radius: 90px;
      margin: 0 15px;
  }
  .tt-image img {
      display: inline-block;
      width: 84px;
      height: 84px;
      border-radius: 90px;
  }
  .tt-quote {
      font-size: 75px;
      font-weight: 700;
      line-height: 70px;
      margin-right: 20px;
      float: left;
      color: #D1D1D1;
      display: block;
      margin-bottom: 40px;
      margin-left: 2px;
  }
  .tt-quote-right {
      float: right;
      margin-right: 0;
      position: relative;
      margin-left: 20px;
      bottom: 0;
      margin-bottom: 0;
  }
  #testimonials .owl-pagination {
      position: absolute;
      width: 100%;
  }
  #testimonials .owl-controls span {
      width: 84px;
      height: 84px;
      opacity: 0.65;
      -webkit-transition: 0.3s;
      -o-transition: 0.3s;
      transition: 0.3s;
      background: #fff;
      border-radius: 90px;
      margin: 0 15px;
  }
  #testimonials .owl-controls .owl-page:hover span,
  #testimonials .owl-controls .owl-page.active span {
      opacity: 0;
  }
  /*6.7 TEAM*/
  
  .team-member {
      text-align: center;
      overflow: hidden;
      position: relative;
  }
  .team-member img {
      margin: 0 auto;
      border: none;
      -webkit-transition: -webkit-transform 0.3s;
      -moz-transition: -moz-transform 0.3s;
      transition: transform 0.3s;
  }
  .team-content {
      padding: 50px;
      background: #1080f2;
      color: #fff;
      position: relative;
      z-index: 100;
      margin-top: -50px;
  }
  .team-member-down .team-content {
      margin-top: 0;
      margin-bottom: -50px;
  }
  .team-content h5 {
      font-size: 20px;
      font-weight: 700;
      line-height: 1;
      margin: 0;
      margin-bottom: 15px;
  }
  .team-content .team-subtitle {
      font-size: 14px;
      font-style: italic;
      margin-bottom: 30px;
      display: block;
      line-height: 1.2;
  }
  .team-content p {
      color: #fff;
      font-size: 16px;
      font-weight: 400;
      line-height: 25px;
  }
  .team-content .triangle {
      width: 0;
      height: 0;
      border-left: 10px solid transparent;
      border-right: 10px solid transparent;
      -webkit-transition: 0.3s;
      -o-transition: 0.3s;
      transition: 0.3s;
      border-bottom: 10px solid #1080f2;
      position: absolute;
      left: 50%;
      margin-left: -5px;
      top: -10px;
  }
  .team-member-down .triangle {
      border-bottom: 0;
      border-top: 10px solid #1080f2;
      top: auto;
      bottom: -10px;
  }
  .team-member:hover .triangle {
      border-bottom: 700px solid;
      border-color: #1080f2;
      opacity: 0.85;
      border-left: 700px solid transparent;
      border-right: 700px solid transparent;
      margin-left: -700px;
      top: -650px;
  }
  .team-member-down:hover .triangle {
      border-bottom: 0;
      top: auto;
      border-top: 700px solid;
      border-color: #1080f2;
      opacity: 0.85;
      border-left: 700px solid transparent;
      border-right: 700px solid transparent;
      margin-left: -700px;
      bottom: -650px;
  }
  .team-member:hover img {
      -webkit-transform: translateY(-50px);
      -moz-transform: translateY(-50px);
      -ms-transform: translateY(-50px);
      transform: translateY(-50px);
  }
  .team-member-down:hover img {
      -webkit-transform: translateY(50px);
      -moz-transform: translateY(50px);
      -ms-transform: translateY(50px);
      transform: translateY(50px);
  }
  .team-socials {
      position: absolute;
      top: 215px;
      width: 100%;
      z-index: 101;
      margin: auto;
      text-align: center;
      margin-top: 0;
      opacity: 0;
      visibility: hidden;
      -webkit-transition: 0.4s;
      -o-transition: 0.4s;
      transition: 0.4s;
  }
  .team-member-down .team-socials {
      top: auto;
      bottom: 215px;
  }
  .team-socials a:hover .fa {
      color: #273140
  }
  .team-socials .fa {
      color: white;
      margin: 0 15px;
      font-family: FontAwesome;
      -webkit-transition: 0.3s;
      -o-transition: 0.3s;
      transition: 0.3s;
      font-size: 22px;
      font-weight: 400;
      line-height: 25px;
      height: 25px;
      text-transform: uppercase;
  }
  .team-member:hover .team-socials {
      opacity: 1;
      visibility: visible;
  }
  /*6.8 CLIENTS*/
  
  #clients .owl-controls .owl-buttons {
      display: block;
  }
  #testimonials .owl-controls {
      text-align: center;
      margin-top: 70px;
  }
  #clients .owl-theme .owl-controls {
      margin-top: 0;
      text-align: center;
      position: absolute;
      display: block;
      width: 100%;
      top: 0;
      z-index: 1;
  }
  #clients .slider {
      max-width: 1024px;
      margin: 38px auto
  }
  #clients .slider img {
      display: block;
      margin: auto;
      -webkit-transition: 0.3s;
      -o-transition: 0.3s;
      transition: 0.3s;
      opacity: 0.30;
  }
  #clients .slider img:hover {
      opacity: 1;
  }
  /*6.9 SUBSCRIBE*/
  
  #subscribe {
      padding: 50px;
  }
  #subscribe h3 {
      color: white;
      font-family: WorkSans;
      letter-spacing: -1px;
      font-size: 30px;
      font-weight: 300;
      float: left;
      margin: 0;
      line-height: 50px;
  }
  #subscribe .subscribe-form {
      float: right;
      position: relative;
  }
  
  #subscribe-success {
      position: absolute;
      top: 0;
      width: 100%;
  }
  
  #subscribe-success .alert-success {
      margin: 0;
      width: 100%;
      border-radius: 2px;
      background: #fff;
      text-align: center;
      color: #273140;
  }
  
  #subscribe #subscribe-success .close {
      outline: none;
  }
  
  #subscribe #subscribe-success .close:hover {
      color: #273140;
  }
  
  
  
  #subscribe .subscribe-form input {
      width: 400px;
      border-radius: 2px;
      height: 50px;
      color: #fff;
      border: 1px solid rgba(255, 255, 255, 0.5);
      background: none;
      padding: 0 20px;
  }
  #subscribe .subscribe-form button[type="submit"] {
      width: 150px;
      border: 2px solid white;
      height: 50px;
      color: inherit;
      font-size: 14px;
      font-weight: 700;
      text-transform: uppercase;
      outline: none;
      background-color: white;
      border-radius: 2px;
      float: right;
      margin-left: 20px;
      -webkit-transition: 0.3s;
      -o-transition: 0.3s;
      transition: 0.3s;
  }
  #subscribe .subscribe-form input::-webkit-input-placeholder {
      color: rgba(255, 255, 255, 0.7);
  }
  #subscribe .subscribe-form input:-moz-placeholder {
      color: rgba(255, 255, 255, 0.7);
  }
  #subscribe .subscribe-form input::-moz-placeholder {
      color: rgba(255, 255, 255, 0.7);
  }
  #subscribe .subscribe-form input:-ms-input-placeholder {
      color: rgba(255, 255, 255, 0.7);
  }
  #subscribe .subscribe-form button:hover {
      color: #fff;
      background: none;
  }
  #subscribe .subscribe-form input:focus {
      box-shadow: none;
      border: 1px solid #fff;
      outline: none;
  }
  /*6.10 CONTACT*/
  
  #contact {
      background-color: #fff;
      position: relative;
  }
  #contact .contact-form-container {
      float: right;
      width: 570px;
  }
  #contact .form-group {
      margin-bottom: 30px;
      float: left;
      width: 270px;
      position: relative;
  }
  #contact .form-textarea {
      width: 100%;
  }
  #contact .form-group input,
  #contact .form-group textarea {
      padding: 20px;
      float: left;
      border-radius: 2px;
      resize: none;
  }
  #contact .section-subheading {
      margin-bottom: 50px;
      margin-top: 30px;
      line-height: 25px;
  }
  #contact .form-group input.form-control {
      border-radius: 2px;
      width: 100%;
      height: 50px;
      background-color: white;
      padding: 0 20px;
      line-height: 50px;
      border: 1px solid #ccc;
  }
  #contact .form-group textarea.form-control {
      width: 100%;
      border: 1px solid #ccc;
      border-radius: 0;
      border-radius: 2px;
      min-height: 150px;
  }
  #contact .form-group textarea.form-control:focus,
  #contact .form-group input.form-control:focus {
      border-color: #1080f2;
      box-shadow: none;
      outline: none;
  }
  #contact .text-danger ul {
      margin: 0;
      padding: 0;
      float: right;
      list-style-type: none;
      text-align: right;
      font-size: 14px;
      line-height: 1;
      top: 0;
      max-width: 130px;
      padding-top: 11px;
      right: 20px;
      position: absolute;
  }
  #contact .text-danger {
      color: #1080f2;
      margin: 0;
  }
  .contact-map-container {
      position: absolute;
      top: 0;
      height: 100%;
      width: 50%;
      margin-left: -85px;
  }
  .contact-map-container #map {
      width: 100%;
      height: 100%;
  }
  #contactForm .alert-success {
      color: #1080f2;
      background-color: #fff;
      border-color: #1080f2;
      padding: 14px;
      border-radius: 2px;
  }
  /* --------------------------------------
  7.FOOTER
  -----------------------------------------*/
  .policy-section
  {
      background: url(../img/flower.webp) no-repeat center center, #fff;
  }
  .policy
  {
      padding: 0;
  }
  .policy li
  {
      margin-top: 10px;
      list-style-position: inside;
  }
  .policy-last {
      text-align: center;
      margin-top: 40px;
      padding: 8px;
      font-size: 14pt;
      background: linear-gradient(to right, rgba(255,255,255,0),rgba(255,255,255,1), rgba(255,255,255,0));
      box-shadow: 2px 5px 50px #f0f0f0;
      color: var(--color1_dark);
  }
  .policy-after {
      padding: 11px 0;
      background: var(--color3);
  }
  .social img
  {
      max-width: 60px;
  }
  .contact-info
  {
      text-transform: uppercase;
      text-align: left;
      color: var(--color3);
  }
  footer {
      text-align: center;
      font-size: 12pt;
      padding: 80px 0;
      background: var(--color1);
      border-radius: 0 0 30px 30px;
  }
  footer a
  {
      color: var(--color3);
  }
  footer a:hover
  {
      color: var(--color2);
  }
  footer li
  {
      list-style-type: none;
      margin-bottom: 20px;
      text-align: left;
      color: var(--color3);
  }
  footer i
  {
      font-size: 16px;
  }
  .lower-footer span,
  .lower-footer a {
  }
  .lower-footer a {
      -webkit-transition: 0.3s;
      -o-transition: 0.3s;
      transition: 0.3s;
  }
  .lower-footer a:hover {
      opacity: 1;
      text-decoration: none;
  }
  .lower-footer .pull-right a {
      margin: 0;
      margin-left: 35px;
      float: left;
      display: inline-block;
  }
  .lower-footer .fa {
      margin: 0;
      opacity: 1;
      font-family: FontAwesome;
      font-size: 20px;
      font-weight: 400;
      float: left;
      margin-right: 0;
  }
  .lower-footer {
      margin-top: 50px;
      border-top: 1px solid rgba(255,255,255,0.2);
      padding-top: 40px;
      width: 100%;
      float: left;
      color: #fff;
      font-size: 10pt;
  }
  .upper-footer {
      width: 100%
  }
  .upper-footer .pull-right {
      width: 570px;
  }
  .upper-footer .pull-left p {
      opacity: 0.2;
      max-width: 250px;
      margin-top: 30px;
      color: white;
      font-size: 14px;
      font-weight: 400;
      text-align: left;
      line-height: 25px;
  }
  .footer-nav {
      float: left;
      max-width: 280px;
      padding: 0;
      margin: 0;
      margin-top: 5px;
  }
  .footer-nav li {
      width: 120px;
      display: inline-block;
      float: left;
      margin-bottom: 30px;
  }
  .footer-nav a {
      color: #040404;
      font-size: 14px;
      font-weight: 700;
      padding: 0;
      display: inline-block;
      text-align: left;
      float: left;
      line-height: 1;
      text-transform: uppercase;
      -webkit-transition: 0.3s;
      -o-transition: 0.3s;
      transition: 0.3s;
  }
  .footer-nav a:hover {
      text-decoration: none;
      color: #1080f2
  }
  .footer-secondary-nav {
      float: left;
      padding: 0;
      width: auto;
      margin-top: 5px;
      margin-bottom: 0;
      padding-left: 50px;
      max-width: 280px;
  }
  .footer-secondary-nav li {
      display: inline-block;
      float: left;
      margin-bottom: 30px;
      width: 100%;
  }
  .footer-secondary-nav a {
      font-size: 14px;
      font-weight: 400;
      color: #040404;
      float: left;
      line-height: 14px;
  }
  .footer-secondary-nav .fa {
      display: inline-block;
      margin-right: 15px;
      font-size: 18px;
      height: 14px;
      line-height: 13px;
  }
  .footer-secondary-nav .fa.fa-envelope {
      font-size: 14px;
  }
  /*-----------------------------------------------------------------*/
  /* 8. ICONS
  /*-----------------------------------------------------------------*/
  
  .iconspage header {
      text-align: center;
      padding: 120px 0 0;
  }
  .iconspage header h1 {
      font-size: 2rem;
  }
  .iconspage header p {
      font-size: 1.4rem;
      margin-top: .6em;
  }
  .iconspage header a:hover {
      text-decoration: underline;
  }
  .iconspage section {
      width: 90%;
      max-width: 1200px;
      margin: 50px auto;
  }
  .iconspage section h2 {
      border-bottom: 1px solid #e2e2e2;
      padding: 0 0 1em .2em;
      margin-bottom: 1em;
  }
  .iconspage ul::after {
      clear: both;
      content: "";
      display: table;
  }
  .iconspage ul li {
      width: 25%;
      float: left;
      padding: 16px 0;
      text-align: center;
      border-radius: .25em;
      cursor: pointer;
      -webkit-transition: background 0.2s;
      -moz-transition: background 0.2s;
      transition: background 0.2s;
      -webkit-user-select: none;
      -moz-user-select: none;
      -ms-user-select: none;
      user-select: none;
      overflow: hidden;
  }
  .iconspage ul li:hover {
      background: #dbdbdb;
  }
  .iconspage ul p {
      display: inline-block;
      font-size: 1rem;
      margin-top: 10px;
      color: #999999;
      -webkit-user-select: auto;
      -moz-user-select: auto;
      -ms-user-select: auto;
      user-select: auto;
      white-space: nowrap;
      width: 100%;
      padding: 10px;
      overflow: hidden;
      text-overflow: ellipsis;
  }
  .nc-icon-outline {
      display: inline-block;
      font: 100 32px/1 'Nucleo Outline';
      speak: none;
      text-transform: none;
      /* Better Font Rendering */
      
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
  }
  .nc-icon-outline.air-baloon:before {
      content: "\e600";
  }
  .nc-icon-outline.album:before {
      content: "\e601";
  }
  .nc-icon-outline.banana:before {
      content: "\e602";
  }
  .nc-icon-outline.bear:before {
      content: "\e603";
  }
  .nc-icon-outline.beer:before {
      content: "\e604";
  }
  .nc-icon-outline.board:before {
      content: "\e605";
  }
  .nc-icon-outline.bookmark-add:before {
      content: "\e606";
  }
  .nc-icon-outline.bookmark-remove:before {
      content: "\e607";
  }
  .nc-icon-outline.bookmark:before {
      content: "\e608";
  }
  .nc-icon-outline.cake:before {
      content: "\e609";
  }
  .nc-icon-outline.cart-add:before {
      content: "\e60a";
  }
  .nc-icon-outline.cart:before {
      content: "\e60b";
  }
  .nc-icon-outline.chat:before {
      content: "\e60c";
  }
  .nc-icon-outline.cloud:before {
      content: "\e60d";
  }
  .nc-icon-outline.coffee:before {
      content: "\e60e";
  }
  .nc-icon-outline.controller:before {
      content: "\e60f";
  }
  .nc-icon-outline.diamond:before {
      content: "\e610";
  }
  .nc-icon-outline.dislike:before {
      content: "\e611";
  }
  .nc-icon-outline.evil:before {
      content: "\e612";
  }
  .nc-icon-outline.eye-ban:before {
      content: "\e613";
  }
  .nc-icon-outline.eye:before {
      content: "\e614";
  }
  .nc-icon-outline.flight:before {
      content: "\e615";
  }
  .nc-icon-outline.headphones:before {
      content: "\e616";
  }
  .nc-icon-outline.heart:before {
      content: "\e617";
  }
  .nc-icon-outline.home:before {
      content: "\e618";
  }
  .nc-icon-outline.image:before {
      content: "\e619";
  }
  .nc-icon-outline.keyboard:before {
      content: "\e61a";
  }
  .nc-icon-outline.laptop:before {
      content: "\e61b";
  }
  .nc-icon-outline.like:before {
      content: "\e61c";
  }
  .nc-icon-outline.money:before {
      content: "\e61d";
  }
  .nc-icon-outline.moon-storm:before {
      content: "\e61e";
  }
  .nc-icon-outline.moon:before {
      content: "\e61f";
  }
  .nc-icon-outline.moto:before {
      content: "\e620";
  }
  .nc-icon-outline.mouse:before {
      content: "\e621";
  }
  .nc-icon-outline.pc:before {
      content: "\e622";
  }
  .nc-icon-outline.pizza:before {
      content: "\e623";
  }
  .nc-icon-outline.player:before {
      content: "\e624";
  }
  .nc-icon-outline.print:before {
      content: "\e625";
  }
  .nc-icon-outline.reflex:before {
      content: "\e626";
  }
  .nc-icon-outline.robot:before {
      content: "\e627";
  }
  .nc-icon-outline.shirt:before {
      content: "\e628";
  }
  .nc-icon-outline.sign:before {
      content: "\e629";
  }
  .nc-icon-outline.skull:before {
      content: "\e62a";
  }
  .nc-icon-outline.suitcase:before {
      content: "\e62b";
  }
  .nc-icon-outline.sun-cloud:before {
      content: "\e62c";
  }
  .nc-icon-outline.sushi:before {
      content: "\e62d";
  }
  .nc-icon-outline.taxi:before {
      content: "\e62e";
  }
  .nc-icon-outline.vespa:before {
      content: "\e62f";
  }
  .nc-icon-outline.wallet:before {
      content: "\e630";
  }
  .nc-icon-outline.world:before {
      content: "\e631";
  }
  /*-----------------------------------------------------------------*/
  /* 9 LIVE PREVIEW
  /*-----------------------------------------------------------------*/
  
  #customizer {
      position: fixed;
      top: 100px;
      padding: 20px;
      background: #fff;
      width: 190px;
      left: -190px;
      -webkit-transition: 0.5s;
      -moz-transition: 0.5s;
      -ms-transition: 0.5s;
      -o-transition: 0.5s;
      transition: 0.5s;
      z-index: 999;
      font-weight: 300;
      -webkit-border-bottom-right-radius: 2px;
      -moz-border-radius-bottomright: 2px;
      border-bottom-right-radius: 2px;
  }
  #customizer.active {
      left: 0;
  }
  #customizer li {
      list-style-type: none;
  }
  .options {
      background: #fff;
      width: 44px;
      height: 44px;
      position: absolute;
      top: 30px;
      top: 0;
      right: -44px;
      cursor: pointer;
      border-left: none;
      -webkit-border-top-right-radius: 2px;
      -webkit-border-bottom-right-radius: 2px;
      -moz-border-radius-topright: 2px;
      -moz-border-radius-bottomright: 2px;
      border-top-right-radius: 2px;
      border-bottom-right-radius: 2px;
  }
  .options .pc {
      color: #273140;
      font-size: 25px;
      margin-left: 9px;
      margin-right: 9px;
      margin-top: 11px;
  }
  #colors li a {
      display: block;
      width: 35px;
      float: left;
      height: 35px;
      margin-right: 8px;
      margin-bottom: 8px;
      margin-top: 0px;
      border: none;
      border-radius: 2px;
      font-size: 0;
      text-indent: -9999;
      -webkit-transition: 0.3s;
      -moz-transition: 0.3s;
      -ms-transition: 0.3s;
      -o-transition: 0.3s;
      transition: 0.3s;
      cursor: pointer;
  }
  #colors li a:hover {
      opacity: 0.75;
  }
  #customizer span {
  text-transform: uppercase;
      text-decoration: none;
      margin-bottom: 0px;
      margin-top: 5px;
      display: block;
      float: left;
      font-weight: 900;
      font-style: normal;
      color: #273140;
      text-align: left;
      margin-bottom: 20px;
      line-height: 1;
      font-size: 14px;
      width: 100%;
      
  }
  #headerbg {    padding-left: 0;
      float: left;
      margin-bottom: 15px;}
  #headerbg li a {
         color: #888;
      font-size: 13px;
      display: block;
      margin-bottom: 2px;
      font-weight: bold;
      font-family: WorkSans;
      float: left;
          -webkit-transition: 0.2s;
      -moz-transition: 0.2s;
      -ms-transition: 0.2s;
      -o-transition: 0.2s;
      transition: 0.2s;    
  }
  #headerbg li a.active,
  #headerbg li a.active:hover { color: #1080f2 }
  
  #headerbg li a:hover {color: #040404;}
  
  #customizer #colors {
      display: block;
      float: left;
      width: 100%;
      margin-bottom: 0;
      padding: 0;
  }
  #colors li #blue {
      background: #1080f2;
  }
  #colors li #green {
      background: #8BC34A;
  }
  #colors li #teal {
      background: #009688;
  }
  #colors li #indigo {
      background: #3f51b5;
  }
  #colors li #magenta {
      background: #c2185b;
  }
  #colors li #orange {
      background: #ff9800;
  }
  
  /*-----------------------------------------------------------------*/
  /* 10 SERVICES
  /*-----------------------------------------------------------------*/
  
  .sv-mb, .sv-desk
  {
      width: 95%;
      max-width: 727px;
      margin: 0px auto;
  }
  .sv-mb
  {
      display: none;
  }
  .sv-mb img, .sv-desk img
  {
      width: 100%;
      text-align: center;
      margin-bottom: 20px;
  }
  .tabs:after {
      content: "";
      width: 100%;
      display: inline-block;
  }
  .tabs {
      list-style: none;
      text-align: center;
      margin: 0 auto 30px;
      max-width:1100px;
      width: 100%;
      padding-left: 0;
      text-align: justify;
      display: flex;
      overflow-x: auto;
      white-space: nowrap;
      list-style-type: none;
      scrollbar-width: thin;
  }
  .tab-content {
      display: none;
  }
  .tab-content.current{
      display: inherit;
  }
  .tabs li {
      display: block;
      vertical-align: middle;
      cursor: pointer;
      font-size: 17px;
      line-height: 2;
      color: #4e2425;
      width: auto;
      float: left;
      text-align: center;
      font-size: 14pt;
      text-transform: uppercase; 
      padding: 10px 20px; 
      margin: 5px 10px 10px;
  }
  
  .tabs li.current,
  .tabs li:hover {
      color: var(--color1);
      box-shadow: 1px 1px 2px;
      border-radius: 5px;
  }
  /*.tabs li.current::before
  {
      width: 100%;
      height: 2px;
      background: #040404;
      top: 20px;
  }
  .tabs li:first-child {
      
  }*/
  .info-left {
      position: absolute;
      top: -12.5%;
      left: -160px;
      max-width: 270px;
      background: url(../img/flower-info.webp) no-repeat 100% 5%, #fff;
      background-size: 40%;
      border-radius: 20px;
      /* z-index: 999999; */
      z-index: 1;
      padding: 15px 15px 0 15px;
      text-align: left;
      border: 1px solid #dfdace;
  }
  .info-left img
  {
      width: 100%;
      max-width: 250px;
      border-radius: 0 80px 0 0;
      margin-top: 20px;
      margin-bottom: 15px;
      height: 285px;
      object-fit: cover;
  }
  .info-right {
      position: absolute;
      top: 25%;
      right: -160px;
      max-width: 270px;
      background: var(--color3);
      border-radius: 20px;
      /* z-index: 999999; */
      z-index: 2;
      padding: 15px;
      text-align: left;
      border: 1px solid #cbc5b4;
  }
  
  .left1-icon
  {
      position: absolute;
      left: -200px;
      bottom: 30px; 
      /* z-index: 9999;  */
  /*    width: 100%;  */
  }
  .left1-icon img
  {
      max-width: 350px;
  }
  .right1-icon
  {
      position: absolute;
      right: -200px;
      top: -150px; 
      /* z-index: 9999;    */
  }
  .right1-icon img
  {
      max-width: 350px;
  }
  
  .right1-2-icon
  {
      position: absolute;
      right: 10%;
      bottom:25%; 
      z-index: 9999;   
  }
  .left2-icon
  {
      position: absolute;
      left: 0;
      bottom: -50px;  
      z-index: 9999;  
  }
  .right2-icon
  {
      position: absolute;
      right: 0;
      top: 28.7%; 
      z-index: 9999;   
  }
  .left2-1-icon
  {
      position: absolute;
      left: 3%;
      bottom: 13%;  
      z-index: 9999;  
  }
  .right2-1-icon
  {
      position: absolute;
      right: 3%;
      bottom: 25%;
      z-index: 9999;  
  }
  .left2-2-icon
  {
      position: absolute;
      left: 10%;
      top: 23%;   
      z-index: 9999; 
  }
  .right2-2-icon
  {
      position: absolute;
      right: 13%;
      top: 8%; 
      z-index: 9999; 
  }
  .left3-icon
  {
      position: absolute;
      left: 0;
      bottom: 12%;  
      z-index: 9999;
  }
  .about-left
  {
      text-align: left;
  }
  .about-left img.img-last-left
  {
      border-radius: 120px 0 0 0;
      width: 100%;
      max-width: 700px;
      margin-top: 30px;
      height: 453px;
      object-fit: cover;
  }
  .about-right
  {
      color: var(--color1);
      transform: translateY(85px);
  }
  .about-right img
  {
      width: 100%;
      max-width: 300px;
      border-radius: 0 140px 0 0;
      height: 345px;
      object-fit: cover;
  }
  .about-right img.img-last
  {
      width: 100%;
      border-radius: 0 0 100px 0;
      margin-top: 30px;
      height: 255px;
  }
  .slogan
  {
      font-weight: 300;
      margin: 0 auto;
      padding: 80px;
      overflow: hidden;
  }
  .about-img img
  {
      width: 100%;
      margin-bottom: 20px;
  }
  
  .about-img-2 img, .about-img-3 img
  {
      width: 100%;
  }
  .about-img-3 img
  {
      border: 10px solid rgba(255,255,255,0.6);
  }
  .about-img-3
  {
      margin-left: -70px;
      margin-top: 40px;
      z-index: 99999;
  }
  .header-info
  {
      min-height: 580px;
      padding: 20px;
  }
  .header-info i
  {
      font-size: 20pt;
  }
  
  .header-info-text
  {
      font-size: 12pt;
  }
  .header-info > .row
  {
      margin-bottom: 30px;
  }
  .name-link
  {
      text-decoration: underline;
      color: #336cd4;
  }
  
  /*Our Services*/
  .video-section
  {
      background: linear-gradient(to bottom, #fff, #fff 31%, #fbe8d9 31%);
  }
  #signup
  {
      background: url("../img/flower.webp") no-repeat center center, #fff;
      padding-bottom: 100px;
  }
  #img-footer
  {
      background: linear-gradient(to bottom, #fff, #fff 40%, #fbe8d9 40%);
      padding-bottom: 130px;
  }
  #services
  {
      background: url(../img/flower.webp) no-repeat center center, #fff;
  }
  .services-page
  {
      background: #fff;
  }
  .egift-section-top
  {
      background: url(../img/flower3.webp) no-repeat left top, url(../img/leaf2.webp) no-repeat right bottom, var(--color3);
      background-size: 22%;
  }
  
  .egift-section
  {
      background: #fff;
  }
  .pro-section
  {
      background: var(--color3);
  }
  #gallery-section {
       background: url("../img/flower2.webp") no-repeat 95% 93%, #fff;
       background-size: 25%;
       padding: 50px 0 30px;
       
  }
  .left-icon-2
  {
      position: absolute;
      top: 20px;
      left: 50px;
  }
  .left-icon-2 img
  {
      width: 100%;
      max-width: 180px;
  }
  .gallery-img img
  {
      width: 100%;
      max-width: 400px;
      border-radius: 220px;
      margin-top: 100px;
  }
  .gallery-img-mid img
  {
      width: 100%;
      max-width: 400px;
      border-radius: 220px;
  }
  .contact-section
  {
      background: url("../img/leaf2.webp") no-repeat right bottom, var(--color3);
      background-size: 22%;
  }
  
  /*-----------------------------------------------------------------*/
  /* 10 SERVICES
  /*-----------------------------------------------------------------*/
  
  .service-img-left
  {
      width: 100%;
  }
  .service-img-left img {
      width: 100%;
      margin-bottom: 10px;
  }
  .service-right
  {
      background: url("../img/flower2.webp") no-repeat center bottom;
      background-size: 60%;
  }
  .service-title {
      text-align: center;
      font-size: 20pt;
      margin-bottom: 50px;
      border-bottom: 1px solid rgba(0, 0, 0, 0.2);
      padding: 10px;
      color: #fff;
      background: var(--color2_light);
      border-top-left-radius: 15px;
  }
  .small-title
  {
      font-size: 14pt;
      margin-top: 23px;
      margin-bottom: 10px;
      text-transform: uppercase;
      color: var(--color1);
  }
  .row_svpage
  {
      width: 100%;
      overflow: hidden;
      margin-bottom: 15px;
      font-size: 12pt;
      border-bottom: 1px solid #ccc;
      padding-bottom: 10px;
      margin-top: 15px;
  }
  .row_name {
      width: 90%;
      float: left;
      text-align: left;
      text-transform: capitalize;
      padding-right: 10px;
  }
  .price {
      width: 10%;
      float: left;
      text-align: left;
      color: var(--color1);
  }
  .row_note {
      width: 100%;
      overflow: hidden;
      margin-top: -5px;
      font-style: italic;
      color: #888;
      text-align: justify;
  }
  .social-bottom
  {
      margin-top: 20px;
      overflow: hidden;
      width: 100%;
      padding: 0;
  }
  .social-bottom li
  {
      float: left;
      border-radius: 100%;
      width: 35px;
      height:35px;
      text-align: center; 
      margin-right: 8px;  
      background: var(--color3);   
  }
  .social-bottom li a
  {
      display: block;
      border: 1px solid transparent;
      border-radius: 50%;
      transition: 0.3s;
  }
  .social-bottom li a i
  {
      line-height: 35px;
       color: var(--color1);
  }
  .social-bottom li a:hover {
      background-color: var(--color1);
      border-color: #fff;
  }
  .social-bottom li a:hover i {
      color: #fff;
  }
  /*-----------------------------------------------------------------*/
  /* 11 Mobile
  /*-----------------------------------------------------------------*/
  @media screen and (max-width: 1300px) 
  {
      .info-left, .info-right, .left1-icon, .right1-icon
      {
          display: none;
      }
      .container-2
      {
          width: 100%;
          margin-left: 0;
      }
  }
  @media screen and (max-width: 1024px) 
  {
      body
      {
          background: url(../img/footer-mb.webp) no-repeat center bottom, var(--color3_light);
          background-size: 180%;
      } 
      .col-lg-8
      {
          padding: 0;
      } 
      .drink-img img
      {
          max-width: 300px;
      }  
      .job-left, .features-right
      {
          border-radius: 0 180px;
          margin-bottom: 20px;
      }
      .features-right, .features-right > div {
          padding: 15px 0 !important;
      }
      #headerbackground {
          background-image: url(../img/headerbg.webp);
          background-attachment: scroll;
          background-size: cover;
          position: absolute;
          background-position: center bottom;
          width: 100%;
          height: 100%;
          top: 0;
      }
      .header-info
      {
          min-height: 700px;
      }
      .about-left
      {
          font-size: 40px;
      }
      .about-right
      {
          color: var(--color1);
          transform: translateY(45px);
      }
      ul.top-social li a
      {
           background: none;
           width: 25px;
      }
      ul.top-social li a
      {
           color: #3f1715;
           margin-top: 0;
      }
  }
  
  @media screen and (max-width: 991px) {
      #headerbackground
      {
          background: #FAECE1;
      }
      .navbar-nav
      {
          margin-top: 0px;
      }
      .top-social
      {
          text-align: center;
      }
      .top-social > li
      {
          float: left !important;
      }
      .header-content-row
      {
          margin-top: 100px;
      }
      .header-info
      {
          width: 100%;
          min-height: 400px;
          margin-top: 50px;
      }
      #signuppopup
      {
          background-image: none !important;
          background-color: #fff !important;
          width: 90% !important;
          height: auto !important;
          padding-bottom: 20px;
          display: none;
      }
      .signupformdiv
      {
          max-width: 90% !important;
      }
      .signupclosediv
      {
          margin-top: 10px !important;
      }
      #btnSignupClose
      {
          margin-right: 10px !important;
      }
      #signupnote
      {
          display: block !important;
          text-align: center;
          font-size: 16pt;
          font-style: italic;
      }
      #signupnote span
      {
          font-size: 25pt;
          font-style:normal;
          color: #FFA2BB;
          text-transform: uppercase;
      }
      .signupformdiv
      {
          margin-top: 20px !important;
      }
      .no-header-background
      {
          padding-top: 0px;
      }
      .label3 {
          background-color: #fff !important;
      }
      .header-info h1{
          padding-top: 65px;
      }
  }
  
  /*-----------------------------------------------------------------*/
  /* 11 Material Textfield
  /*-----------------------------------------------------------------*/
  .material-textfield {
      position: relative;
      margin-top: 30px;
  }
  
  label {
      position: relative;
      font-size: 12pt;
      transition: .1s ease-out;
      transform-origin: left top;
      pointer-events: none;
      top: 0;
  }
  
  input ,textarea {
      font-size: 10pt;
      outline: none;
      border: 1px solid rgba(63,23,21,0.2);
      padding-top: 40px;
      padding: 1rem 0.7rem;
      color: #3f1715;
      transition: 0.1s ease-out;
      background: none;
      width: 100%;
  }
  
  input:focus, textarea:focus {
      border-color: #040404;
  }
  
  input:focus+label, textarea:focus+label {
      color: #040404;
      top: 0;
      transform: translateY(-50%) scale(.9);
  }
  
  input:not(:placeholder-shown)+label, textarea:not(:placeholder-shown)+label {
      top: 0;
      transform: translateY(-50%) scale(.9);
  }
  .end-button
  {
      border: 1px solid var(--color1) !important;
      border-radius: 50px;
      font-size: 14pt;
      max-width: 250px;
      margin: 0 auto;
      border: none;
      margin-top: 20px;
      color: #3f1715;
      display: block;
      text-align: center;
      padding: 10px 0;
      margin-bottom: 50px 0; 
      margin-top: 40px;  
  }
  .form-button
  {
      background: var(--color1);
      border-radius: 70px 0;
      font-size: 14pt;
      max-width: 200px;
      margin: 0 auto;
      border: none;
      margin-top: 20px;
      color: #fff;
      padding: 5px 0;
  }
  
  .form-button:hover
  {
      opacity: 0.8;
      cursor: pointer;
  }
  
  .txt2
  {
      border-color: rgba(63,23,21,0.2);
      background: none;
  }
  
  .label2
  {
      color: #2b0301;
      font-weight: 600;
  }
  
  .label3 {
      background-color: #faf9f8;
  }
  
  /*-----------------------------------------------------------------*/
  /* 12 Signup Popup
  /*-----------------------------------------------------------------*/
  #signuppopup
  {
      position: fixed;
      background-color: #fff;
      background: url(../img/signupback.png) 0px 0px no-repeat;
      background-size: cover;
      top: 0px;
      z-index: 9998;
      width: 826px;
      height: 638px;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      display: none;
  }
  .signupclosediv
  {
      margin-top: 40px;
  }
  .signupformdiv
  {
      max-width: 50%;
      margin: 0px auto;
      margin-top: 260px;
  }
  #btnSignupClose
  {
      font-size: 25pt;
      margin-right: 50px;
      cursor: pointer;
  }
  #btnSignupClose:hover
  {
      opacity: 0.8;
  }
  #signupnote
  {
      display: none;
  }
  
  /*-----------------------------------------------------------------*/
  /* 13 EGift
  /*-----------------------------------------------------------------*/
  .egift-preview
  {
      padding-top: 50px;
      padding-bottom: 50px;
  }
  #giftPreview img{
      width: 100%;
      max-width: 658px;
  }
  #egiftInfo, #divPaymentMethod {
      background: var(--color3);
      width: 100%;
      max-width: 658px;
      margin: 0px auto;
      text-align: left;
      padding-top: 10px;
      padding-bottom: 10px;
  }
  .egiftInfoRow {
      margin-bottom: 10px;
  }
  .egiftInfoRowtitle {
      font-weight: bold;
      margin-left: 10px;
      color: #DF2278;
  }
  #divPaymentMethod {
      margin-top: 20px;
  }
  #divPaymentMethod label {
      background: none;
  }
  #divConfirmEgift {
      display: none;
      text-align: center;
      color: #DF2278;
  }
  /* 14 Form notify
  /*-----------------------------------------------------------------*/
  #popupnotify {
      width: 98%;
      max-width: 400px;
      min-height: 160px;
      background: #fff;
      border: 1px solid #ccc;
      border-radius: 10px;
      -moz-border-radius: 10px;
      position: fixed;
      top: 30%;
      left: 50%;
      margin-left: -200px;
      padding: 10px;
      text-align: center;
      box-shadow: 2px 2px 5px #666;
      z-index: 9999999999;
      display: none;
  }
  #popupnotifycontent
  {
      font-size: 12pt;
      color: #666;
      margin-top: 30px;
  }
  #popupnotifyok
  {
      margin: 0px auto;
      margin-top:20px;
      padding: 0.5rem 0.2rem;
      cursor: pointer;
  }
  
      /* 15 Promotions
  /*-----------------------------------------------------------------*/
  .group_promotion
  {
      margin-bottom:20px;
  } 
  /*** back to top **/
  #myBtn {
    display: none;
    position: fixed;
    bottom: 20px;
    right: 30px;
    z-index: 99;
    font-size: 18px;
    border: none;
    outline: none;
    background-color: var(--color1);
    color: var(--color3);
    cursor: pointer;
    padding: 15px;
    border-radius: 360px;
    width: 50px;
    height: 50px;
    z-index: 9999999999;
  }
  
  #myBtn:hover {
    opacity: 0.8;
  }
  
  /* Flyer*/
  #groupnoti
  {
      width:100%;
      height:100%;
      position:absolute;
      top:0px;
      z-index:9999999999;
      display:block;
  }
  #noti
  {
      width:90%;
      overflow: hidden;
      max-width:500px;
      margin:0px auto;
      padding:10px;   
      margin-top:130px;
      background: var(--color3_light);
      overflow: hidden;
      text-align: center;
  }
  #noti img
  {
      width: 100%;
      border: 1px solid #ccc;
  }
  #closenoti
  {
      width: 100%;
      cursor:pointer;
      margin-bottom:5px;
      color: var(--color1);
      font-weight: bold;
      text-align:right;
  }
  
  /* Notification*/
  #notification {
      width: 100%;
      background: var(--color1);
      position: fixed;
      top: 0;
      z-index: 99999999999;
      text-align: center;
      color: #fff;
      font-weight: bold;
      line-height: 1.5em;
      font-size: 15pt;
      display: none;
      padding: 5px;
      font-family: Calibri,Candara,Segoe,Segoe UI,Optima,Arial,sans-serif;
      border-bottom: 1px solid rgba(2552,255,255,0.3);
  }
  .notificationtop a
  {
      color:var(--color1);
      text-decoration:none;    
      background:var(--color3);
      padding:4px 5px 4px 5px;
      font-size:11pt;
      border-radius:5px;
      -moz-border-radius:5px;
      margin-left:10px;
      cursor:pointer;
  }
  .top-page
  {
      width: 95%;
      max-width: 800px;
      margin: 0px auto;
      text-align: center;
  }
  .top-page img
  {
      width: 100%;
      margin: 0px auto;
      text-align: center;
  }
  .video-home
  {
      width: 100%;
      max-width: 650px;
      margin: 0px auto;
      margin-bottom: 40px;
  }
  
  /*Custom*/
  #nav-home
  {
      margin-bottom: 0px;
      border: none;
      border-radius: 0px;
  }
  .container
  {
      /* background: #fff; */
  }
  .carousel-control.left,.carousel-control.right {
      background: none !important;
  }
  @media screen and (max-width: 768px) {
      body {
          padding-bottom: 90px;
      }
      .title-sign 
      {
          margin-top: -15px;
      }
      .about-right
      {
          display: none;
      }
      .about-left img.img-last-left
      {
          border-radius: 0;
          height: auto;
      }
      .job-left, .features-right
      {
          border-radius: 0 100px;
          height: auto;
      }
      .gallery-img img, .gallery-img-mid img
      {
          border-radius: 220px;
          margin-top: 30px;
      }
      .service-1
      {
          border-radius: 30px 30px 0 0;
      }
      .service-2, .service-3
      {
          border-radius: 0;
      }
      .service-4
      {
          border-radius: 0 0 30px 30px;
      }
      .service-item {
          padding: 30px 30px 55%;
      }
      #home-slider
      {
          height:550px;
      }
      .row
      {
          padding: 0 20px;
      }
      .about-img-3
      {
          margin-left: 0;
          border: none;
      }
      .about-img-3 img
      {
          border: none;
      }
      .carousel-inner .item a
      {
          display: block;
          text-align: center;
      }
      .carousel-inner .item a img
      {
          width: 100%;
          text-align: center;
      }
      .slogan
      {
          padding: 0 20px;
      }
      .material-textfield label {
          float: left;
      }
      .contact-info
      {
          text-align: left;
          padding-left: 40px;
      }
      .social-bottom
      {
          padding-left: 40px;
      }
      .about-right
      {
          transform: translateY(0);
      }
      .logo-footer {
          display: block;
          width: 60%;
          margin: 0 auto 30px;
      }
      .modal.in .modal-dialog {
          position: fixed;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
          width: 100%;
          margin: 0;
          padding: 15px;
      }
      #popup-ads .modal-dialog{
        /* width: initial !important; */
      }
  }
  @media screen and (max-width: 700px) {
      ul.top-social li {
          float: left;
          margin-right: 13px;
      }
      ul.top-social li a i {
          font-size: 25px;
      }
      .job-left, .features-right
      {
          border-radius: 0 50px;
          padding: 15px;
      }
      .policy-section, #signup
      {
          background-size: 80%;
      }
  }
  
  @media screen and (max-width: 500px) {
      .row
      {
          padding: 0 20px;
      }
      .row-2
      {
          padding: 0 !important;
      }
      .col-xs-12, .col-xs-10, .col-xs-2, .col-xs-6
      {
          padding-right: 0;
          padding-left: 0;
      }
      .col-xs-12, .col-xs-10, .col-xs-2, .col-xs-6
      {
          padding-right: 5px;
          padding-left: 5px;
      }
      .lower-footer
      {
          text-align: center;
      }
      .body-social i {
          font-size: 26px;
          margin-top: 20px;
      }
      .header-info-text
      {
          padding-left: 5px;
      }
      .tabs
      {
          padding: 0;
      }
      .tabs li
      {
          width: 100%;
          border-bottom: none;
      }
      .tabs li.current
      {
          border-bottom: none;
      }
  }
  
  
  
  /* MODAL */
  .popup-ads-custom .modal-header{
     background-color: var(--color3);
     border-radius: 5px;
  }
  .popup-ads-custom .modal-content{
     box-shadow: 5px 5px 5px 1px var(--color3);
  }
  .popup-ads-custom img{
      width: 100%;
  }


     /* Popup container */
     .custom-popup-container {
        display: flex;
        justify-content: center; 
        align-items: center; 
        position: fixed; 
        z-index: 1032;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.5);
        opacity: 0; 
        transition: opacity 0.5s ease; 
        }
    
        /* Popup content */
        .custom-popup-content {
        position: relative;
        padding: 0px 20px 20px;
        width: 80%;
        max-width: 500px;
        background: linear-gradient(90deg, var(--color3) 0%, var(--color3) 44.4%, var(--color3) 83.21%, var(--color3) 100%);
        border-radius: 10px;
        }
    
        /* Close button */
        .custom-popup-close {
        font-size: 30px;
        font-weight: bold;
        cursor: pointer;
        }
    
        /* Class to show the popup */
        .custom-popup-show {
        opacity: 1;
        }