/*
  Template Name: Pintex - Mobile App & Software Landing Page Template
  Theme URL: https://themeforest.net/user/jthemes
  Description: Pintex - Mobile App Landing Page Template
  Author: Jthemes
  Author URL: https://themeforest.net/user/jthemes
  Version: 1.0.0
  Website: https://www.jthemes.com/
  Tags: Responsive, HTML5 template, Jthemes, Mobile, Application, Software, One Page, Landing, Digital Product, Mobile App
*/




/* ==========================================================================
  01. GENERAL & BASIC STYLES
  =========================================================================== */

  :root {
    --alice-blue: #f1f3ff;
    --black: #353f4f;
    --blue: #0083ff;
    --coal: #111b21;
    --disable: #b5b5b5;
    --form-control: #fafafd;
    --gray: #545465;
    --green: #0fbc49;
    --header-color: #120036;
    --indigo: #7b5dd6;
    --ink: #1d222f;
    --lavender: #f8f5fd;
    --light-blue: #edf8fd;
    --light-gray: #90a0b2;
    --lilac: #beaedb;
    --magnolia: #f9f7fd;
    --metal: #2c3840;
    --noice: #f8f9fa;
    --orchid: #ce67c9;
    --pink: #fc5a8d;
    --purple: #9370db;
    --silver: #ccc;
    --sky-blue: #04aaff;
    --smoke: #e7e7e7;
    --snow: #f5f6f6;
    --violet-red: #c73e9b;
    --white: #fff;
    --white-smoke: #f4f4f9;
    --yellow: #ffbf15; 
    --tra-black: rgba(5, 5, 5, .05);
    --tra-gray: rgba(96, 96, 96, .13);
    --tra-indigo: rgba(128, 96, 225, .13);
    --tra-ink: rgba(1, 1, 1, .1); 
    --tra-purple: rgba(102, 51, 255, .13);
    --tra-white: rgba(255, 255, 255, .2); 
    --tra-violet-red: rgba(237, 230, 244, .84);
    --tra-white-smoke: rgba(244, 244, 249, .13);
  }
  
  html {
    -webkit-font-smoothing: antialiased;
    font-size: 16px;
  } 
  
  body {
    font-family: 'Inter', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    color: var(--gray);
    line-height: 1.6666;
    font-weight: 400;
  }
  
  /*------------------------------------------*/
  /*  PAGE CONTENT
  /*------------------------------------------*/
  
  #page,
  .hidd { 
    overflow: hidden; 
  }
  
  .rel,
  section,
  .container { 
    position: relative!important; 
    z-index: 3; 
  }
  
  .section-overlay {
    width: 100%;
    height: 100%;
  }
  
  /*------------------------------------------*/
  /*  BLOCK SHADOW
  /*------------------------------------------*/
  
  .block--shadow { 
    -webkit-box-shadow: 0 4px 12px 0 var(--tra-black);
    -moz-box-shadow: 0 4px 12px 0 var(--tra-black);
    box-shadow: 0 4px 12px 0 var(--tra-black);
  }
  
  .img-block .block--shadow { 
    -webkit-box-shadow: 0 4px 12px 0 rgba(20, 20, 20, .18); 
    -moz-box-shadow: 0 4px 12px 0 rgba(20, 20, 20, .18); 
    box-shadow: 0 4px 12px 0 rgba(20, 20, 20, .18); 
  }
  
  /*------------------------------------------*/
  /*  BORDER SETTINGS
  /*------------------------------------------*/
  
  .block--border {
    border: 1px solid var(--silver);
  }
  
  .block--border.border--light,
  .block--border.block--shadow {
    border: 1px solid var(--smoke);
  }
  
  .x-border {
    border-top: 1px solid var(--silver);
    border-bottom: 1px solid var(--silver);
  }
  
  .x-border.border--light {
    border-top: 1px solid var(--smoke);
    border-bottom: 1px solid var(--smoke);
  }
  
  .t-border {
    border-top: 1px solid var(--silver);
  }
  
  .t-border.border--light {
    border-top: 1px solid var(--smoke);
  }
  
  .b-border {
    border-bottom: 1px solid var(--silver);
  }
  
  .b-border.border--light {
    border-bottom: 1px solid var(--smoke);
  }
  
  /*------------------------------------------*/
  /*  BORDER RADIUS SETTING
  /*------------------------------------------*/ 
  
  .r-0 { -webkit-border-radius: 0px; -moz-border-radius: 0px; -o-border-radius: 0px; border-radius: 0px; }
  .r-02 { -webkit-border-radius: 2px; -moz-border-radius: 2px; -o-border-radius: 2px; border-radius: 2px; }
  .r-04 { -webkit-border-radius: 4px; -moz-border-radius: 4px; -o-border-radius: 4px; border-radius: 4px; }
  .r-06 { -webkit-border-radius: 6px; -moz-border-radius: 6px; -o-border-radius: 6px; border-radius: 6px; }
  .r-08 { -webkit-border-radius: 8px; -moz-border-radius: 8px; -o-border-radius: 8px; border-radius: 8px; }
  .r-10 { -webkit-border-radius: 10px; -moz-border-radius: 10px; -o-border-radius: 10px; border-radius: 10px; }
  .r-12 { -webkit-border-radius: 12px; -moz-border-radius: 12px; -o-border-radius: 12px; border-radius: 12px; }
  .r-14 { -webkit-border-radius: 14px; -moz-border-radius: 14px; -o-border-radius: 14px; border-radius: 14px; }
  .r-16 { -webkit-border-radius: 16px; -moz-border-radius: 16px; -o-border-radius: 16px; border-radius: 16px; }
  .r-18 { -webkit-border-radius: 18px; -moz-border-radius: 18px; -o-border-radius: 18px; border-radius: 18px; }
  .r-20 { -webkit-border-radius: 20px; -moz-border-radius: 20px; -o-border-radius: 20px; border-radius: 20px; }
  .r-22 { -webkit-border-radius: 22px; -moz-border-radius: 22px; -o-border-radius: 22px; border-radius: 22px; }
  .r-26 { -webkit-border-radius: 26px; -moz-border-radius: 26px; -o-border-radius: 26px; border-radius: 26px; }
  .r-28 { -webkit-border-radius: 28px; -moz-border-radius: 28px; -o-border-radius: 28px; border-radius: 28px; }
  .r-30 { -webkit-border-radius: 30px; -moz-border-radius: 30px; -o-border-radius: 30px; border-radius: 30px; }
  .r-32 { -webkit-border-radius: 32px; -moz-border-radius: 32px; -o-border-radius: 32px; border-radius: 32px; }
  .r-34 { -webkit-border-radius: 34px; -moz-border-radius: 34px; -o-border-radius: 34px; border-radius: 34px; }
  .r-36 { -webkit-border-radius: 36px; -moz-border-radius: 36px; -o-border-radius: 36px; border-radius: 36px; }
  .r-100 { -webkit-border-radius: 100px; -moz-border-radius: 100px; -o-border-radius: 100px; border-radius: 100px; }
  
  /*------------------------------------------*/
  /*  SPACING & INDENTS
  /*------------------------------------------*/
  
  .py-40 { padding-top: 40px; padding-bottom: 40px; }
  .py-50 { padding-top: 50px; padding-bottom: 50px; }
  .py-60 { padding-top: 60px; padding-bottom: 60px; }
  .py-70 { padding-top: 70px; padding-bottom: 70px; }
  .py-80 { padding-top: 80px; padding-bottom: 80px; }
  .py-90 { padding-top: 90px; padding-bottom: 90px; }
  .py-100 { padding-top: 100px; padding-bottom: 100px; }
  
  .pt-30 { padding-top: 30px; }
  .pt-40 { padding-top: 40px; }
  .pt-50 { padding-top: 50px; }
  .pt-60 { padding-top: 60px; }
  .pt-70 { padding-top: 70px; }
  .pt-80 { padding-top: 80px; }
  .pt-90 { padding-top: 90px; }
  .pt-100 { padding-top: 100px; }
  
  .pb-30 { padding-bottom: 30px; }
  .pb-40 { padding-bottom: 40px; }
  .pb-50 { padding-bottom: 50px; }
  .pb-60 { padding-bottom: 60px; }
  .pb-70 { padding-bottom: 70px; }
  .pb-80 { padding-bottom: 80px; }
  .pb-90 { padding-bottom: 90px; }
  .pb-100 { padding-bottom: 100px; }
  
  .px-15 { padding-right: 15x; padding-left: 15px; }
  .px-20 { padding-right: 20px; padding-left: 20px; }
  .px-20 { padding-right: 25px; padding-left: 25px; }
  .px-30 { padding-right: 30px; padding-left: 30px; }
  
  .mt-0 { margin-top: 0!important; }
  .mt-15 { margin-top: 15x; }
  .mt-20 { margin-top: 20px; }
  .mt-25 { margin-top: 25px; }
  .mt-30 { margin-top: 30px; }
  .mt-35 { margin-top: 35px; }
  .mt-40 { margin-top: 40px; }
  .mt-45 { margin-top: 45px; }
  .mt-50 { margin-top: 50px; }
  .mt-55 { margin-top: 55px; }
  .mt-60 { margin-top: 60px; }
  .mt-65 { margin-top: 65px; }
  .mt-70 { margin-top: 70px; }
  .mt-75 { margin-top: 75px; }
  .mt-80 { margin-top: 80px; }
  .mt-90 { margin-top: 90px; }
  .mt-100 { margin-top: 100px; }
  
  .mb-0 { margin-bottom: 0!important; }
  .mb-15 { margin-bottom: 15px; }
  .mb-20 { margin-bottom: 20px; }
  .mb-25 { margin-bottom: 25px; }
  .mb-30 { margin-bottom: 30px; }
  .mb-35 { margin-bottom: 35px; }
  .mb-40 { margin-bottom: 40px; }
  .mb-45 { margin-bottom: 45px; }
  .mb-50 { margin-bottom: 50px; }
  .mb-55 { margin-bottom: 55px; }
  .mb-60 { margin-bottom: 60px; }
  .mb-65 { margin-bottom: 65px; }
  .mb-70 { margin-bottom: 70px; }
  .mb-75 { margin-bottom: 75px; }
  .mb-80 { margin-bottom: 80px; }
  .mb-90 { margin-bottom: 90px; }
  .mb-100 { margin-bottom: 100px; }
  
  /*------------------------------------------*/
  /*  BACKGROUND SETTINGS
  /*------------------------------------------*/
  
  .bg--fixed,
  .bg--scroll {
    width: 100%;
    background-repeat: no-repeat;
    background-position: center center;   
    background-size: cover;
  }
  
  .bg--fixed {
    background-attachment: scroll!important;
  }
  
  .bg--scroll {
    background-attachment: fixed!important;
  }
  
  /*------------------------------------------*/
  /*  BACKGROUND COLORS
  /*------------------------------------------*/
  
  .bg--aliceblue { background-color: var(--alice-blue); }
  .bg--black { background-color: var(--black); }
  .bg--blue { background-color: var(--blue); }
  .bg--coal { background-color: var(--coal); }
  .bg--indigo { background-color: var(--indigo); }
  .bg--lavender { background-color: var(--lavender); }
  .bg--lightblue { background-color: var(--light-blue); }
  .bg--lilac { background-color: var(--lilac); }
  .bg--magnolia { background-color: var(--magnolia); }
  .bg--noice { background-color: var(--noice); }
  .bg--orchid { background-color: var(--orchid); }
  .bg--pink { background-color: var(--pink); }
  .bg--purple { background-color: var(--purple); }
  .bg--red { background-color: var(--red); }
  .bg--skyblue { background-color: var(--sky-blue); }
  .bg--snow { background-color: var(--snow); }
  .bg--violet-red { background-color: var(--violet-red); }
  .bg--white { background-color: var(--white); }
  .bg--whitesmoke { background-color: var(--white-smoke); }
  .bg--yellow { background-color: var(--yellow); }
  
  /*------------------------------------------*/
  /*  TRANSPARENT BACKGROUND COLORS
  /*------------------------------------------*/
  
  .bg--tra-indigo { background-color: var(--tra-indigo); }
  .bg--tra-purple { background-color: var(--tra-purple); }
  .bg--tra-violet-red { background-color: var(--tra-violet-red); }
  
  /*------------------------------------------*/
  /*  GRADIENT COLOR BACKGROUND
  /*------------------------------------------*/
  
  .gr--whitesmoke { 
    background-image: linear-gradient(-180deg, rgba(244, 244, 249, .8) 50%, rgba(244, 244, 249, .05) 100%); 
  }
  
  /*------------------------------------------*/
  /*  BACKGROUND SHAPE
  /*------------------------------------------*/
  
  .shape--01:after,
  .shape--02:after {
    position: absolute;
    content: '';
    width: 100%;
    height: 55%;
    right: 0;
    z-index: -1;
  }
  
  .shape--01:after {
    top: 0; 
  }
  
  .shape--02:after {
    top: 45%;
  }
  
  .shape--whitesmoke:after { background-color: var(--white-smoke); }
  
  /*------------------------------------------*/
  /*  BACKGROUND IMAGE
  /*------------------------------------------*/
  
  .bg--01, 
  .bg--02, 
  .bg--03, 
  .bg--04, 
  .bg--05,
  .bg--06,
  .bg--07 {
    background-repeat: no-repeat;
    background-position: center center;   
    background-size: cover;
  }
  
  .bg--01 { background-image: url(../images/bg-01.jpg); }
  .bg--02 { background-image: url(../images/bg-02.jpg); }
  .bg--03 { background-image: url(../images/bg-03.jpg); }
  .bg--04 { background-image: url(../images/bg-04.jpg); }
  .bg--05 { background-image: url(../images/bg-05.jpg); }
  .bg--06 { background-image: url(../images/bg-06.jpg); }
  .bg--07 { background-image: url(../images/bg-07.jpg); }
  
  /*------------------------------------------*/
  /*  BACKGROUND PATTERN
  /*------------------------------------------*/
  
  .pattern--01, 
  .pattern--02, 
  .pattern--03 {
    background-repeat: no-repeat;
    background-position: center center;   
    background-size: cover;
  }
  
  .pattern--01 { background-image: url(../images/pattern-01.png); }
  .pattern--02 { background-image: url(../images/pattern-02.png); }
  .pattern--03 { background-image: url(../images/pattern-03.png); }
  
  /*------------------------------------------*/
  /*  SECTION DIVIDER
  /*------------------------------------------*/
  
  hr.divider {
    width: 100%;
    height: 1px;
    background-color: transparent;
    background-image: linear-gradient(-90deg, rgba(206,211,246,0) 0, #bbb 38%, #999 64%, rgba(206,211,246,0) 99%);
    opacity: .4;
    border: none;
    margin: 0;
  }
  
  /*------------------------------------------*/
  /*  WAVE SHAPE BOTTOM
  /*------------------------------------------*/
  
  .wave-shape-bottom {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 100%;
  }
  
  
  
  
  /* ==========================================================================
    02. TYPOGRAPHY
    =========================================================================== */
  
  /*------------------------------------------*/
  /*  HEADERS
  /*------------------------------------------*/
  
  h6, h5, h4, h3, h2, h1 {  
    font-family: 'Plus Jakarta Sans', sans-serif;
    color: var(--header-color);
    font-weight: 700;
    letter-spacing: 0;
    margin-bottom: 0;
  }
  
  /*------------------------------------------*/
  /*  HEADER SIZE
  /*------------------------------------------*/
  
  h6 { font-size: 1rem; }              /* 16px */
  h6.h6-md { font-size: 1.125rem; }    /* 18px */
  h6.h6-lg { font-size: 1.25rem; }     /* 20px */
  h6.h6-xl { font-size: 1.3125rem; }   /* 21px */
  
  h5 { font-size: 1.375rem; }          /* 22px */
  h5.h5-md { font-size: 1.5rem; }      /* 24px */
  h5.h5-lg { font-size: 1.625rem; }    /* 26px */
  h5.h5-xl { font-size: 1.75rem; }     /* 28px */
  
  h4 { font-size: 1.875rem; }          /* 30px */
  h4.h4-md { font-size: 2rem; }        /* 32px */
  h4.h4-lg { font-size: 2.125rem; }    /* 34px */
  h4.h4-xl { font-size: 2.25rem; }     /* 36px */
  
  h3 { font-size: 2.375rem; }          /* 38px */
  h3.h3-md { font-size: 2.5rem; }      /* 40px */
  h3.h3-lg { font-size: 2.6255rem; }   /* 42px */
  h3.h3-xl { font-size: 2.75rem; }     /* 44px */
  
  h2 { font-size: 2.875rem; }          /* 46px */
  h2.h2-md { font-size: 3rem; }        /* 48px */
  h2.h2-lg { font-size: 3.125rem; }    /* 50px */
  h2.h2-xl { font-size: 3.25rem; }     /* 52px */
  h2.h2-title { font-size: 3.375rem; } /* 54px */
  
  /*------------------------------------------*/
  /*  PARAGRAPHS
  /*------------------------------------------*/
  
  p.p-sm { font-size: 0.9375rem; }    /* 15px */
  p { font-size: 1rem; }              /* 16px */
  p.p-md { font-size: 1.0625rem; }    /* 17px */
  p.p-lg { font-size: 1.125rem; }     /* 18px */
  p.p-xl { font-size: 1.1875rem; }    /* 19px */
  
  /*------------------------------------------*/
  /*  LINK SETTINGS
  /*------------------------------------------*/
  
  a {
    color: var(--header-color);
    text-decoration: none;
    -webkit-transition: all 400ms ease-in-out;
    -moz-transition: all 400ms ease-in-out;
    -o-transition: all 400ms ease-in-out;
    -ms-transition: all 400ms ease-in-out;
    transition: all 400ms ease-in-out; 
  }
  
  a:hover {
    color: var(--header-color);
    text-decoration: none;
  }
  
  a:focus {
    outline: none;
    text-decoration: none;
  }
  
  a.tra-link {
    font-size: 1rem;
    line-height: 1;
    font-weight: 600;
  }
  
  a.tra-link span {
    -webkit-transition: all 400ms ease-in-out;
    -moz-transition: all 400ms ease-in-out;
    -o-transition: all 400ms ease-in-out;
    -ms-transition: all 400ms ease-in-out;
    transition: all 400ms ease-in-out; 
  }
  
  .tra-link.ico-20 [class*="flaticon-"]:before, 
  .tra-link.ico-20 [class*="flaticon-"]:after { 
    position: relative;
    font-size: 0.75rem; 
    line-height: 0.7rem!important;
    top: 1.5px;
    right: 1px;
  }
  
  a.tra-link:hover span {
    color: var(--black)!important;
  }
  
  /*------------------------------------------*/
  /*  LISTS
  /*------------------------------------------*/
  
  ul {
    margin: 0;
    padding: 0;
    list-style: none;
  } 
  
  /*------------------------------------------*/
  /*  TEXT LIST
  /*------------------------------------------*/
  
  ul.simple-list {
    list-style: disc;
    margin-right: 15px;
  }
  
  ol.digit-list p,
  ul.simple-list.long-list p {
    margin-bottom: 8px;
  }
  
  .content-section ul.simple-list.long-list p {
    margin-bottom: 5px;
  }
  
  /*------------------------------------------*/
  /*  DIGIT LIST
  /*------------------------------------------*/
  
  ol.digit-list {
    padding: 0;
    margin-right: 15px;
  }
  
  /*------------------------------------------*/
  /*  BUTTON SETTINGS
  /*------------------------------------------*/
  
  .btn {
    font-size: 1rem;
    line-height: 1;
    font-weight: 600;
    background-color: transparent;
    padding: 0.9rem 1.8rem;
    border: 2px solid transparent;
    -webkit-transition: all 400ms ease-in-out;
    -moz-transition: all 400ms ease-in-out;
    -o-transition: all 400ms ease-in-out;
    -ms-transition: all 400ms ease-in-out;
    transition: all 400ms ease-in-out; 
  }
  
  .btn.btn-sm {
    font-size: 0.975rem;
    padding: 0.7rem 1.5rem;
  }
  
  .btn.btn-md {
    font-size: 1rem;
    padding: 0.9425rem 1.75rem;
  }
  
  .btn.btn-lg {
    font-size: 1.05rem;
    padding: 1.1rem 1.8rem;
  }
  
  .btn.ico-20.ico-left,
  .btn.ico-20.ico-right {
    padding: 0.9rem 1.55rem;
  }
  
  .btn.ico-25.ico-left,
  .btn.ico-25.ico-right {
    font-size: 1.1rem;
    letter-spacing: -0.35px;
    padding: 0.9rem 1.35rem;
  }
  
  .btn.ico-30.ico-left,
  .btn.ico-30.ico-right {
    padding: 0.37rem 0;
  }
  
  /*------------------------------------------*/
  /*  Buttons Group
  /*------------------------------------------*/
  
  .text-center .btns-group {
    display: inline-block;
  }
  
  .btns-group .btn:first-child {
    margin-left: 15px;
  }
  
  .btns-group .btn.ico-30.ico-left {
    padding: 0.37rem 0.5rem;
  }
  
  .btns-group .btn.ico-30.ico-right {
    padding: 0.37rem 0;
  }
  
  /*------------------------------------------*/
  /*  Button Icon
  /*------------------------------------------*/
  
  .btn.ico-20 [class*="flaticon-"]:before, 
  .btn.ico-20 [class*="flaticon-"]:after { 
    position: relative;
    font-size: 1rem; 
    line-height: 0.7rem!important;
    top: 4px;
  }
  
  .btn.ico-25 [class*="flaticon-"]:before, 
  .btn.ico-25 [class*="flaticon-"]:after { 
    position: relative;
    font-size: 1.275rem;
    line-height: 1rem!important;
    top: 1px;
  }
  
  .btn.ico-25.ios-btn [class*="flaticon-"]:before, 
  .btn.ico-25.ios-btn [class*="flaticon-"]:after { 
    top: 0;
  }
  
  .ico-25-txt {
    position: relative;
    top: -3px;
  }
  
  .btn.ico-left span {
    margin-left: 5px;
  }
  
  .btn.ico-right span {
    margin-right: 5px;
  }
  
  .btn.ico-30.ico-left span {
    position: relative;
    top: 0;
    left: 4px;
  }
  
  .btn.ico-30.ico-right span {
    position: relative;
    top: 0;
    right: 4px;
  }
  
  .btn.ico-30.ico-left span.ico-30-txt,
  .btn.ico-30.ico-right span.ico-30-txt {
    position: relative;
    top: -10px;
    left: 0;
  }
  
  .btn.ico-30.ico-right span.ico-30-txt {
    right: 0;
  }
  
  /*------------------------------------------*/
  /*  Button Text
  /*------------------------------------------*/
  
  p.btn-txt {
    margin: 15px 0 0 0;
  }
  
  p.btn-txt span {
    font-weight: 700;
  }
  
  .btn-rating p.btn-txt {
    margin: 0;
  }
  
  .star-rating small,
  .star-rating span.rating-txt {
    font-size: 0.9375rem;
  }
  
  p.btns-group-txt {
    margin: 14px 0 0 0;
  }
  
  .btn-rating {
    margin-top: 10px;
  }
  
  .text-center p.btns-group-txt {
    margin-top: 20px;
  }
  
  p.btn-txt.ico-15,
  p.btns-group-txt.ico-15 {
    padding-right: 5px;
  }
  
  .text-center p.btn-txt.ico-15,
  .text-center p.btns-group-txt.ico-15 {
    padding-right: 0;
  }
  
  p.btn-txt span,
  p.btns-group-txt span {
    position: relative;
    top: 0.5px;
    left: 2px;
  }
  
  p.btns-group-txt span.txt-data {
    display: block;
    top: 0;
    left: 0;
  }
  
  p.btns-group-txt span.txt-data a {
    margin-right: 4px;
    text-decoration: underline;
  }
  
  p.btns-group-txt span.txt-data a:hover {
    text-decoration: none;
  }
  
  .hero-section .color--white p.btns-group-txt span.txt-data a:hover {
    color: var(--white)!important;
  }
  
  .btn-txt.ico-15 [class*="flaticon-"]:before, 
  .btn-txt.ico-15 [class*="flaticon-"]:after,
  .btns-group-txt.ico-15 [class*="flaticon-"]:before, 
  .btns-group-txt.ico-15 [class*="flaticon-"]:after { font-size: 0.75rem; }
  
  .star-rating.ico-10 [class*="flaticon-"]:before, 
  .star-rating.ico-10 [class*="flaticon-"]:after { position: relative; font-size: 0.9rem; top: 1px; }
  
  .star-rating.ico-15 [class*="flaticon-"]:before, 
  .star-rating.ico-15 [class*="flaticon-"]:after { position: relative; font-size: 1rem; top: 3px; }
  
  .star-rating.ico-20 [class*="flaticon-"]:before, 
  .star-rating.ico-20 [class*="flaticon-"]:after { position: relative; font-size: 0.95rem; top: 1px; }
  
  .p-sm.btn-txt.ico-20 [class*="flaticon-"]:before, 
  .p-sm.btn-txt.ico-20 [class*="flaticon-"]:after { position: relative; font-size: 0.875rem; top: 1px; }
  
  .os-version-ext {
    margin-top: 16px; 
  }
  
  .os-version-ext .star-rating small {
    font-size: 0.9rem;
    margin-right: 6px;
  }
  
  span.os-version {
    display: block;
    font-size: 0.9rem;
    line-height: 1;
    margin-top: 5px;
  }
  
  /*------------------------------------------*/
  /*  TRANPARENT BUTTON
  /*------------------------------------------*/
  
  .btn--transparent {
    color: var(--black)!important;
    background-color: transparent!important;
    border-color: transparent!important;
  }
  
  .btn--transparent.color--white {
    color: var(--white)!important;
  }
  
  .btn--transparent:hover {
    background-color: transparent!important;
    border-color: transparent!important;
  } 
  
  /*------------------------------------------*/
  /*  WHITE BUTTON
  /*------------------------------------------*/
  
  .btn--white, .hover--white:hover, .color--white .hover--white:hover {
    color: var(--black)!important; background-color: var(--white)!important; border-color: var(--white)!important;
  }
  
  .btn--tra-white, .hover--tra-white:hover, .color--white .hover--tra-white:hover {
    color: var(--white)!important; background-color: transparent!important; border-color: var(--white)!important;
  }
  
  .white-scroll .scroll .hover--tra-white:hover {
    color: var(--black)!important; background-color: transparent!important; border-color: var(--black)!important;
  }
  
  .white-scroll .scroll .hover--white:hover {
    color: var(--whte)!important; background-color: var(--black)!important; border-color: var(--black)!important;
  }
  
  /*------------------------------------------*/
  /*  BLACK BUTTON
  /*------------------------------------------*/
  
  .btn--black, .hover--black:hover, .white-scroll .scroll .hover--black:hover {
    color: var(--white)!important; background-color: var(--black)!important; border-color: var(--black)!important;
  }
  
  .btn--tra-black, .hover--tra-black:hover {
    color: var(--black)!important; background-color: transparent!important; border-color: var(--black)!important;
  }
  
  /*------------------------------------------*/
  /*  TRA GRAY BUTTON
  /*------------------------------------------*/
  
  .btn--tra-gray, .hover--tra-gray:hover {
    color: var(--black)!important; background-color: transparent!important; border-color: var(--silver)!important;
  }
  
  /*------------------------------------------*/
  /*  BLUE BUTTON
  /*------------------------------------------*/
  
  .btn--blue, .hover--blue:hover, .color--white .hover--blue:hover, .white-scroll .scroll .hover--blue:hover {
    color: var(--white)!important; border-color: var(--blue)!important; background-color: var(--blue)!important;
  }
  
  .btn--tra-blue, .hover--tra-blue:hover, .color--white .btn--tra-blue {
    color: var(--blue)!important; background-color: transparent!important; border-color: var(--blue)!important;
  }
  
  /*------------------------------------------*/
  /*  GREEN BUTTON
  /*------------------------------------------*/
  
  .btn--green, .hover--green:hover, .color--white .hover--green:hover, .white-scroll .scroll .hover--green:hover {
    color: var(--white)!important;border-color: var(--green)!important; background-color: var(--green)!important;
  }
  
  .btn--tra-green, .hover--tra-green:hover, .color--white .btn--tra-green {
    color: var(--green)!important; background-color: transparent!important; border-color: var(--green)!important;
  }
  
  /*------------------------------------------*/
  /*  INDIGO BUTTON
  /*------------------------------------------*/
  
  .btn--indigo, .hover--indigo:hover, .color--white .hover--indigo:hover, .white-scroll .scroll .hover--indigo:hover {
    color: var(--white)!important;border-color: var(--indigo)!important; background-color: var(--indigo)!important;
  }
  
  .btn--tra-indigo, .hover--tra-indigo:hover, .color--white .btn--tra-indigo {
    color: var(--indigo)!important; background-color: transparent!important; border-color: var(--indigo)!important;
  }
  
  /*------------------------------------------*/
  /*  ORCHID BUTTON
  /*------------------------------------------*/
  
  .btn--orchid, .hover--orchid:hover, .color--white .hover--orchid:hover, .white-scroll .scroll .hover--orchid:hover {
    color: var(--white)!important; border-color: var(--orchid)!important; background-color: var(--orchid)!important;
  }
  
  .btn--tra-orchid, .hover--tra-orchid:hover, .color--white .btn--tra-orchid {
    color: var(--orchid)!important; background-color: transparent!important; border-color: var(--orchid)!important;
  }
  
  /*------------------------------------------*/
  /*  PINK BUTTON
  /*------------------------------------------*/
  
  .btn--pink, .hover--pink:hover, .color--white .hover--pink:hover, .white-scroll .scroll .hover--pink:hover {
    color: var(--white)!important; border-color: var(--pink)!important; background-color: var(--pink)!important;
  }
  
  .btn--tra-pink, .hover--tra-pink:hover, .color--white .btn--tra-pink {
    color: var(--pink)!important; background-color: transparent!important; border-color: var(--pink)!important;
  }
  
  /*------------------------------------------*/
  /*  PURPLE BUTTON
  /*------------------------------------------*/
  
  .btn--purple, .hover--purple:hover, .color--white .hover--purple:hover, .white-scroll .scroll .hover--purple:hover {
    color: var(--white)!important; border-color: var(--purple)!important; background-color: var(--purple)!important;
  }
  
  .btn--tra-purple, .hover--tra-purple:hover, .color--white .btn--tra-purple {
    color: var(--purple)!important; background-color: transparent!important; border-color: var(--purple)!important;
  }
  
  /*------------------------------------------*/
  /*  RED BUTTON
  /*------------------------------------------*/
  
  .btn--red, .hover--red:hover, .color--white .hover--red:hover, .white-scroll .scroll .hover--red:hover {
    color: var(--white)!important;border-color: var(--red)!important; background-color: var(--red)!important;
  }
  
  .btn--tra-red, .hover--tra-red:hover, .color--white .btn--tra-red {
    color: var(--red)!important; background-color: transparent!important; border-color: var(--red)!important;
  }
  
  /*------------------------------------------*/
  /*  SKY BLUE BUTTON
  /*------------------------------------------*/
  
  .btn--skyblue, .hover--skyblue:hover, .color--white .hover--skyblue:hover, .white-scroll .scroll .hover--skyblue:hover {
    color: var(--white)!important; border-color: var(--sky-blue)!important; background-color: var(--sky-blue)!important;
  }
  
  .btn--tra-skyblue, .hover--tra-skyblue:hover, .color--white .btn--tra-skyblue {
    color: var(--sky-blue)!important; background-color: transparent!important; border-color: var(--sky-blue)!important;
  }
  
  /*------------------------------------------*/
  /*  VIOLET RED BUTTON
  /*------------------------------------------*/
  
  .btn--violet-red, .hover--violet-red:hover, .color--white .hover--violet-red:hover, .white-scroll .scroll .hover--violet-red:hover {
    color: var(--white)!important; border-color: var(--violet-red)!important; background-color: var(--violet-red)!important;
  }
  
  .btn--tra-violet-red, .hover--tra-violet-red:hover, .color--white .btn--tra-violet-red {
    color: var(--violet-red)!important; background-color: transparent!important; border-color: var(--violet-red)!important;
  }
  
  /*------------------------------------------*/
  /*  YELLOW BUTTON
  /*------------------------------------------*/
  
  .btn--yellow, .hover--yellow:hover, .color--white .hover--yellow:hover, .white-scroll .scroll .hover--yellow:hover {
    color: var(--black)!important; border-color: var(--yellow)!important; background-color: var(--yellow)!important;
  }
  
  /*------------------------------------------*/
  /*  BUTTON FOCUS
  /*------------------------------------------*/
  
  .btn:focus,
  .btn.btn--black:focus {
    color: var(--white);
    -webkit-box-shadow: none;
    box-shadow: none; 
  }
  
  .btn--transparent:focus {
    background-color: transparent;
    border-color: transparent;
  } 
  
  .btn--tra-black:focus, 
  .btn--transparent:focus,
  .btn.btn--tra-gray:focus {
    color: var(--black); 
    -webkit-box-shadow: none;
    box-shadow: none; 
  }
  
  /*------------------------------------------*/
  /*  STORE BADGE ICONS
  /*------------------------------------------*/
  
  .stores-badge {
    display: inline-block;
  }
  
  .store {
    display: inline-block;
    text-align: center;
    margin-left: 12px;
  }
  
  .store:last-child {
    margin-left: 0;
  } 
  
  .store img {
    width: auto;
    max-width: inherit;
  }
  
  .badge-img-xs .store img { max-height: 2.5rem; }
  .badge-img-sm .store img { max-height: 2.625rem; }
  .badge-img-md .store img { max-height: 2.875rem; }
  .badge-img-lg .store img { max-height: 3rem; }
  .badge-img-xl .store img { max-height: 3.25rem; }
  
  /*------------------------------------------*/
  /*  WATCH VIDEO LINK
  /*------------------------------------------*/
  
  .watch-video {
    display: flex;
    position: relative;
    flex-flow: row wrap;
    align-items: stretch!important;
    justify-content: flex-start;
    margin-top: 25px;
  }
  
  .btns-group .watch-video {
    display: inline-block;
    margin-top: 0!important;
    top: 22px;
  }
  
  /*------------------------------------------*/
  /*  Link Icon
  /*------------------------------------------*/
  
  .watch-video-link {
    position: relative;
    text-align: center;
    float: right;
    width: 2.85rem;
    height: 2.85rem; 
    color: var(--white);
    border: none;
    margin-left: 12px;
    -webkit-border-radius: 100%;
    -moz-border-radius: 100%;
    border-radius: 100%; 
  }
  
  .watch-video-link:before {
    content: '';
    position: absolute;
    right: -3px;
    left: -3px;
    top: -3px;
    bottom: -3px;
    background: var(--tra-white);
    opacity: 0;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    -webkit-transition: all 400ms ease-in-out;
    -moz-transition: all 400ms ease-in-out;
    -o-transition: all 400ms ease-in-out;
    -ms-transition: all 400ms ease-in-out;
    transition: all 400ms ease-in-out;
  }
  
  .watch-video-link:hover:before {
    opacity: .75;
    right: -8px;
    left: -8px;
    top: -8px;
    bottom: -8px;
  }
  
  .watch-video-link span[class^="flaticon-"]:before, 
  .watch-video-link span[class^="flaticon-"]:after {
    font-size: 2rem; 
    line-height: 2.85rem!important;   
    margin-right: 5px;
  }
  
  /*------------------------------------------*/
  /*  Link Text
  /*------------------------------------------*/
  
  .watch-video-txt {
    overflow: hidden;
    flex: 1;
    max-width: 100%;
    text-align: right!important;
  }
  
  p.video-txt-lg {
    font-size: 1rem;
    line-height: 1;
    font-weight: 400;
    margin-bottom: 5px;
  }
  
  p.video-txt-sm {
    font-size: 0.925rem;
    line-height: 1;
    margin-bottom: 0;
  }
  
  /*------------------------------------------*/
  /*  VIDEO POPUP ICON
  /*------------------------------------------*/
  
  .video-preview {
    position: relative; 
    text-align: center;
  }
  
  .video-btn {
    position: absolute!important;
    top: 50%;
    right: 50%;
    display: inline-block;
    text-align: center;
    color: var(--white);
    -webkit-border-radius: 100%;
    -moz-border-radius: 100%;
    border-radius: 100%; 
  }
  
  .video-btn-xl {
    width: 6.25rem;
    height: 6.25rem;
    margin-top: -3.125rem;
    margin-right: -3.125rem;
  }
  
  .video-btn-lg {
    width: 5.625rem;
    height: 5.625rem;
    margin-top: -2.8125rem;
    margin-right: -2.8125rem;
  }
  
  .video-btn-md {
    width: 5rem;
    height: 5rem;
    margin-top: -2.5rem;
    margin-right: -2.5rem;
  }
  
  .video-btn-sm {
    width: 4.375rem;
    height: 4.375rem;
    margin-top: -2.1875rem;
    margin-right: -2.1875rem;
  }
  
  .video-block-wrapper {
    -webkit-transition: all 400ms ease-in-out;
    -moz-transition: all 400ms ease-in-out;
    -o-transition: all 400ms ease-in-out;
    -ms-transition: all 400ms ease-in-out;
    transition: all 400ms ease-in-out;
  }
  
  .video-btn.video-btn-xl [class^="flaticon-"]:before, 
  .video-btn.video-btn-xl [class^="flaticon-"]:after {
    font-size: 5rem;
    line-height: 6.25rem!important;   
    margin-right: 10px;
  }
  
  .video-btn.video-btn-lg [class^="flaticon-"]:before, 
  .video-btn.video-btn-lg [class^="flaticon-"]:after {
    font-size: 4.5rem;
    line-height: 5.625rem!important;   
    margin-right: 8px;
  }
  
  .video-btn.video-btn-md [class^="flaticon-"]:before, 
  .video-btn.video-btn-md [class^="flaticon-"]:after {
    font-size: 4.35rem;
    line-height: 5rem!important;   
    margin-right: 8px;
  }
  
  .video-btn.video-btn-sm [class^="flaticon-"]:before, 
  .video-btn.video-btn-sm [class^="flaticon-"]:after {
    font-size: 3.5rem;
    line-height: 4.375rem!important;   
    margin-right: 5px;
  }
  
  .video-btn:hover .video-block-wrapper {
    -moz-transform: scale(0.95);
    -ms-transform: scale(0.95);
    -webkit-transform: scale(0.95);
    -o-transform: scale(0.95);
    transform: scale(0.95);
  }
  
  .video-btn:before {
    content: '';
    position: absolute;
    right: -5px;
    left: -5px;
    top: -5px;
    bottom: -5px;
    background: var(--tra-white);
    opacity: 0;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    -webkit-transition: all 400ms ease-in-out;
    -moz-transition: all 400ms ease-in-out;
    -o-transition: all 400ms ease-in-out;
    -ms-transition: all 400ms ease-in-out;
    transition: all 400ms ease-in-out;
  }
  
  .video-btn.video-btn-xl:hover:before {
    opacity: .75;
    right: -1.5rem;
    left: -1.5rem;
    top: -1.5rem;
    bottom: -1.5rem;
  }
  
  .video-btn.video-btn-lg:hover:before {
    opacity: .75;
    right: -1.25rem;
    left: -1.25rem;
    top: -1.25rem;
    bottom: -1.25rem;
  }
  
  .video-btn.video-btn-md:hover:before {
    opacity: .75;
    right: -1rem;
    left: -1rem;
    top: -1rem;
    bottom: -1rem;
  }
  
  .video-btn.video-btn-sm:hover:before {
    opacity: .75;
    right: -0.75rem;
    left: -0.75rem;
    top: -0.75rem;
    bottom: -0.75rem;
  }
  
  /*------------------------------------------*/
  /*  VECTOR ICONS
  /*------------------------------------------*/
  
  .ico-10 [class*="flaticon-"]:before, .ico-10 [class*="flaticon-"]:after { font-size: 0.75rem; }      /* 12px */
  .ico-15 [class*="flaticon-"]:before, .ico-15 [class*="flaticon-"]:after { font-size: 0.9375rem; }    /* 15px */
  .ico-20 [class*="flaticon-"]:before, .ico-20 [class*="flaticon-"]:after { font-size: 1.25rem; }      /* 20px */
  .ico-25 [class*="flaticon-"]:before, .ico-25 [class*="flaticon-"]:after { font-size: 1.5625rem; }    /* 25px */
  .ico-30 [class*="flaticon-"]:before, .ico-30 [class*="flaticon-"]:after { font-size: 1.875rem; }     /* 30px */
  .ico-35 [class*="flaticon-"]:before, .ico-35 [class*="flaticon-"]:after { font-size: 2.1875rem; }    /* 35px */
  .ico-40 [class*="flaticon-"]:before, .ico-40 [class*="flaticon-"]:after { font-size: 2.5rem; }       /* 40px */
  .ico-45 [class*="flaticon-"]:before, .ico-45 [class*="flaticon-"]:after { font-size: 2.8125rem; }    /* 45px */
  .ico-50 [class*="flaticon-"]:before, .ico-50 [class*="flaticon-"]:after { font-size: 3.125rem; }     /* 50px */
  .ico-55 [class*="flaticon-"]:before, .ico-55 [class*="flaticon-"]:after { font-size: 3.4375rem; }    /* 55px */
  .ico-60 [class*="flaticon-"]:before, .ico-60 [class*="flaticon-"]:after { font-size: 3.75rem; }      /* 60px */
  .ico-65 [class*="flaticon-"]:before, .ico-65 [class*="flaticon-"]:after { font-size: 4.0625rem; }    /* 65px */
  .ico-70 [class*="flaticon-"]:before, .ico-70 [class*="flaticon-"]:after { font-size: 4.375rem; }     /* 70px */
  .ico-75 [class*="flaticon-"]:before, .ico-75 [class*="flaticon-"]:after { font-size: 4.6875rem; }    /* 75px */
  .ico-80 [class*="flaticon-"]:before, .ico-80 [class*="flaticon-"]:after { font-size: 5rem; }         /* 80px */
  .ico-85 [class*="flaticon-"]:before, .ico-85 [class*="flaticon-"]:after { font-size: 5.3125rem; }    /* 85px */
  .ico-90 [class*="flaticon-"]:before, .ico-90 [class*="flaticon-"]:after { font-size: 5.625rem; }     /* 90px */
  .ico-95 [class*="flaticon-"]:before, .ico-95 [class*="flaticon-"]:after { font-size: 5.9375rem; }    /* 95px */
  .ico-100 [class*="flaticon-"]:before, .ico-100 [class*="flaticon-"]:after { font-size: 6.25rem; }    /* 100px */
  .ico-105 [class*="flaticon-"]:before, .ico-105 [class*="flaticon-"]:after { font-size: 6.5625rem; }  /* 105px */
  .ico-110 [class*="flaticon-"]:before, .ico-110 [class*="flaticon-"]:after { font-size: 6.875rem; }   /* 110px */
  .ico-115 [class*="flaticon-"]:before, .ico-115 [class*="flaticon-"]:after { font-size: 7.1875rem; }  /* 115px */
  .ico-120 [class*="flaticon-"]:before, .ico-120 [class*="flaticon-"]:after { font-size: 7.5rem; }     /* 120px */
  .ico-125 [class*="flaticon-"]:before, .ico-125 [class*="flaticon-"]:after { font-size: 7.8125rem; }  /* 125px */
  
  /*------------------------------------------*/
  /*  VECTOR ICON BACKGROUND
  /*------------------------------------------*/ 
  
  .shape-ico {
    position: relative;
    display: inline-block;
    margin: 0 auto;
  }
  
  .shape-ico span {
    position: relative;
    z-index:  2;
  }
  
  .shape-ico svg {
    position: absolute;
    z-index:  1;
  }
  
  .ico-55 .shape-ico svg {
    width: 125px;
    height: 125px;
    top: -42px;
    right: calc(50% - 66px);
  }
  
  .ico-60 .shape-ico svg {
    width: 140px;
    height: 140px;
    top: -48px;
    right: calc(50% - 75px);
  }
  
  .shape-ico.color--blue path {
    fill: #f4f9fc;
  }
  
  .shape-ico.color--indigo path {
    fill: #f6f4fd;
  }
  
  .shape-ico.color--orchid path {
    fill: rgba(218, 112, 214, .1);
  }
  
  .shape-ico.color--pink path {
    fill: rgba(252, 234, 239, .7);
  }
  
  .shape-ico.color--purple path {
    fill: #f6f4fd;
  }
  
  .shape-ico.color--skyblue path {
    fill: rgba(4, 170, 255, .09);
  }
  
  .shape-ico.color--violet-red path {
    fill: rgba(199, 62, 155, .08);
  }
  
  /*------------------------------------------*/
  /*   PNG ICONS SETTINGS
  /*------------------------------------------*/ 
  
  .img-20 img { width: 20px; height: 20px; }
  .img-25 img { width: 25px; height: 25px; }
  .img-30 img { width: 30px; height: 30px; }
  .img-35 img { width: 35px; height: 35px; }
  .img-40 img { width: 40px; height: 40px; }
  .img-45 img { width: 45px; height: 45px; }
  .img-50 img { width: 50px; height: 50px; }
  .img-55 img { width: 55px; height: 55px; }
  .img-60 img { width: 60px; height: 60px; }
  .img-65 img { width: 65px; height: 65px; }
  .img-70 img { width: 70px; height: 70px; }
  .img-75 img { width: 75px; height: 75px; }
  .img-80 img { width: 80px; height: 80px; }
  .img-85 img { width: 85px; height: 85px; }
  .img-90 img { width: 90px; height: 90px; }
  .img-95 img { width: 95px; height: 95px; }
  .img-100 img { width: 100px; height: 100px; }
  .img-105 img { width: 105px; height: 105px; }
  .img-110 img { width: 110px; height: 110px; }
  .img-115 img { width: 115px; height: 115px; }
  .img-120 img { width: 120px; height: 120px; }
  .img-125 img { width: 125px; height: 125px; }
  .img-130 img { width: 130px; height: 130px; }
  .img-135 img { width: 135px; height: 135px; }
  .img-140 img { width: 140px; height: 140px; }
  .img-145 img { width: 145px; height: 145px; }
  
  /*------------------------------------------*/
  /*  IMAGE HOVER OVERLAY
  /*------------------------------------------*/
  
  .hover-overlay {
    width: 100%;
    height: auto;
    overflow: hidden;
    position: relative; 
  }
  
  .hover-overlay img {
    transform: scale(1);
    -ms-transform: scale(1);
    -webkit-transform: scale(1);
    -o-transform: scale(1);
    -moz-transform: scale(1);
    overflow: hidden;
    -webkit-transition: transform 400ms;
    -moz-transition: transform 400ms;
    -o-transition: transform 400ms;
    transition: transform 400ms;
  }
  
  /*------------------------------------------*/
  /*  Overlay Background 
  /*------------------------------------------*/ 
  
  .item-overlay {
    opacity: 0;
    -moz-opacity: 0; 
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
    background: rgba(20, 20, 20, .5);
    -webkit-transition: all 400ms ease-in-out;
    -moz-transition: all 400ms ease-in-out;
    -o-transition: all 400ms ease-in-out;
    -ms-transition: all 400ms ease-in-out;
    transition: all 400ms ease-in-out;
  }
  
  /*------------------------------------------*/
  /*   SECTION ID
  /*------------------------------------------*/
  
  .section-id {
    display: block;
    font-size: 0.85rem;
    line-height: 1;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
    margin-bottom: 32px;   
  }
  
  /*------------------------------------------*/
  /*  SECTION TITLE
  /*------------------------------------------*/
  
  .section-title p {
    margin-top: 22px;
    margin-bottom: 0;
  }
  
  .section-title .btns-group {
    margin-top: 35px;
  }
  
  /*------------------------------------------*/
  /*  ADVANTAGES LIST
  /*------------------------------------------*/
  
  .advantages,
  .text-center .advantages {
    margin-top: 15px;
  }
  
  .advantages li {
    width: auto!important;
    display: inline-block!important;
    vertical-align: top;
    clear: none!important;
  }
  
  .advantages-links-divider {
    position: relative;
    top: 1px;
    transform: rotate(90deg);
  }
  
  .advantages li p {
    display: inline-block;
    float: right;
    margin-bottom: 0;
  }
  
  .advantages.ico-15 li p span {
    position: relative;
    top: 2px;
    left: -1px;
  }
  
  .advantages.ico-15 [class*="flaticon-"]:before, 
  .advantages.ico-15 [class*="flaticon-"]:after { font-size: 0.75rem; }
  
  .advantages li p a {
    font-weight: 400;
    text-decoration: underline;
  }
  
  .advantages li p a:hover {
    text-decoration: underline;
  }
  
  .white--color .advantages li p a:hover {
    color: var(--white);
  }
  
  /*------------------------------------------*/
  /*  COMPATABILITY
  /*------------------------------------------*/
  
  .compatibility {
    display: inline-block;
    padding: 3px 20px;
    margin-top: 15px;
    margin-bottom: 0;
  }
  
  .compatibility span {
    position: relative;
    top: -1.5px;
    left: 2px;
  }
  
  .compatibility.ico-10 [class*="flaticon-"]:before, 
  .compatibility.ico-10 [class*="flaticon-"]:after { font-size: 0.5rem; }
  
  /*------------------------------------------*/
  /*  TOOLS LIST / PAYMENT METHODS
  /*------------------------------------------*/
  
  .tools-list,
  .payment-methods {
    margin-top: 25px;
  }
  
  .tools-list p,
  .payment-methods p {
    font-weight: 400;
    margin-bottom: 12px;
  }
  
  .tools-list.ico-35 [class*="flaticon-"]:before, 
  .tools-list.ico-35 [class*="flaticon-"]:after { line-height: 2.1875rem!important; margin-left: 6px; }
  
  /*------------------------------------------*/
  /*  Payment Icons
  /*------------------------------------------*/
  
  .payment-icons li {
    display: inline-block!important;
    vertical-align: top;
    clear: none!important;
    margin: 0;
    padding-left: 5px;
  }
  
  .payment-icons li:last-child {
    padding-left: 0;
  }
  
  .payment-icons img {
    width: auto;
    max-width: inherit;
    max-height: 32px;
  }
  
  /*------------------------------------------*/
  /*  QUOTE
  /*------------------------------------------*/ 
  
  .quote p {
    color: var(--gray);
    border-right: 3px solid var(--green);
    font-style: italic;
    padding-right: 20px;
    margin-bottom: 16px;
  }
  
  /*------------------------------------------*/
  /*  Quote Avatar 
  /*------------------------------------------*/ 
  
  .quote-avatar {
    display: inline-block;
    margin: 0 auto; 
  }
  
  .quote-avatar img {
    width: 60px;
    height: 60px;
    -webkit-border-radius: 100%;
    -moz-border-radius: 100%;
    -o-border-radius: 100%;
    border-radius: 100%;
  }
  
  /*------------------------------------------*/
  /*  Quote Author 
  /*------------------------------------------*/ 
  
  .quote-author {
    position: relative;
    display: inline-block;
    padding: 0 15px 0 0;
    text-align: right;
    top: 16px;
  } 
     
  .quote-author h6 {
    margin-bottom: 1px;
  }
  
  .quote-author span {
    font-size: 0.95rem;
  }
  
  /*------------------------------------------*/
  /*  USER AVATARS
  /*------------------------------------------*/
  
  .txt-block .users {
    margin-top: 22px;
  }
  
  .users img {
    width: auto;
    max-width: inherit;
    max-height: 50px;
  }
  
  .users p {
    font-size: 0.935rem;
    position: relative;
    top: 13px;
    right: 10px;
    display: inline-block;
    line-height: 1.4;
    margin-bottom: 0;
  }
  
  .users p span {
    display: block;
  }
  
  /*------------------------------------------*/
  /*  TEXT COLORS
  /*------------------------------------------*/
  
  .color--white,
  .color--white a,
  .color--white :is(h1, h2, h3, h4, h5, h6) { color: var(--white); }
  
  .color--black,
  .color--black a,
  .color--black :is(h1, h2, h3, h4, h5, h6) { color: var(--black); }
  
  .color--header,
  .color--header a,
  .color--header :is(h1, h2, h3, h4, h5, h6) { color: var(--header-color); }
  
  .color--gray,
  .color--gray a,
  .color--gray :is(h1, h2, h3, h4, h5, h6) { color: var(--gray); }
  
  .color--lightgray,
  .color--lightgray a,
  .color--lightgray :is(h1, h2, h3, h4, h5, h6) { color: var(--light-gray); }
  
  .color--blue,
  .color--blue a,
  .color--blue :is(h1, h2, h3, h4, h5, h6) { color: var(--blue); }
  
  .color--green,
  .color--green a,
  .color--green :is(h1, h2, h3, h4, h5, h6) { color: var(--green); }
  
  .color--indigo,
  .color--indigo a,
  .color--indigo :is(h1, h2, h3, h4, h5, h6) { color: var(--indigo); }
  
  .color--lilac,
  .color--lilac a,
  .color--lilac :is(h1, h2, h3, h4, h5, h6) { color: var(--lilac); }
  
  .color--orchid,
  .color--orchid a,
  .color--orchid :is(h1, h2, h3, h4, h5, h6) { color: var(--orchid); }
  
  .color--pink,
  .color--pink a,
  .color--pink :is(h1, h2, h3, h4, h5, h6) { color: var(--pink); }
  
  .color--purple,
  .color--purple a,
  .color--purple :is(h1, h2, h3, h4, h5, h6) { color: var(--purple); }
  
  .color--red,
  .color--red a,
  .color--red :is(h1, h2, h3, h4, h5, h6) { color: var(--red); }
  
  .color--skyblue,
  .color--skyblue a,
  .color--skyblue :is(h1, h2, h3, h4, h5, h6) { color: var(--sky-blue); }
  
  .color--violet-red,
  .color--violet-red a,
  .color--violet-red :is(h1, h2, h3, h4, h5, h6) { color: var(--violet-red); }
  
  .color--yellow,
  .color--yellow a,
  .color--yellow :is(h1, h2, h3, h4, h5, h6) { color: var(--yellow); }
  
  /*------------------------------------------*/
  /*  FONT WEIGHT
  /*------------------------------------------*/
  
  .txt-upcase { 
    text-transform: uppercase 
  }
  
  .w-200 { font-weight: 200; }
  .w-300 { font-weight: 300; }
  .w-400 { font-weight: 400; }
  .w-500 { font-weight: 500; }
  .w-600 { font-weight: 600; }
  .w-700 { font-weight: 700; }
  .w-800 { font-weight: 800; }
  .w-900 { font-weight: 900; } 
  
  /*------------------------------------------*/
  /*  TEXT HIGHLIGHT
  /*------------------------------------------*/
  
  .highlight {
      background: linear-gradient(to left, rgba(255, 193, 7, 0.25), rgba(255, 193, 7, 0.1875));
  }
  
  
  /* ==========================================================================
    03. PRELOADER SPINNER
    ========================================================================== */
  
  #loading {
    position: fixed;
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
    z-index: 1000;
    background-color: #f5f5f5;
  }
  
  #loader {
    display: block;
    position: relative;
    top: 50%;
    transform: translateY(-50%);
  }
  
  .cssload-spinner {
    position: absolute;
    width: 68px;
    height: 68px;
    right: 50%;
    margin-right: -34px;
    margin-top: -34px;
  }
  
  .cssload-spinner:after, 
  .cssload-spinner:before {
    position: absolute;
    content: "";
    border: 4px solid var(--blue);
    width: 64px;
    height: 64px;
  }
  
  .theme--blue .cssload-spinner:after, 
  .theme--blue .cssload-spinner:before {
    border-color: var(--blue);
  }
  
  .theme--green .cssload-spinner:after, 
  .theme--green .cssload-spinner:before {
    border-color: var(--green);
  }
  
  .theme--indigo .cssload-spinner:after, 
  .theme--indigo .cssload-spinner:before {
    border-color: var(--indigo);
  }
  
  .theme--orchid .cssload-spinner:after, 
  .theme--orchid .cssload-spinner:before {
    border-color: var(--orchid);
  }
  
  .theme--pink .cssload-spinner:after, 
  .theme--pink .cssload-spinner:before {
    border-color: var(--pink);
  }
  
  .theme--purple .cssload-spinner:after, 
  .theme--purple .cssload-spinner:before {
    border-color: var(--purple);
  }
  
  .theme--red .cssload-spinner:after, 
  .theme--red .cssload-spinner:before {
    border-color: var(--purple);
  }
  
  .theme--skyblue .cssload-spinner:after, 
  .theme--skyblue .cssload-spinner:before {
    border-color: var(--sky-blue);
  }
  
  .theme--violet-red .cssload-spinner:after, 
  .theme--violet-red .cssload-spinner:before {
    border-color: var(--violet-red);
  }
  
  .cssload-spinner:after {
    animation: cssload-spinner1 2.5s linear infinite;
     -o-animation: cssload-spinner1 2.5s linear infinite;
    -ms-animation: cssload-spinner1 2.5s linear infinite;
    -webkit-animation: cssload-spinner1 2.5s linear infinite;
    -moz-animation: cssload-spinner1 2.5s linear infinite;
  }
  
  .cssload-spinner:before {
    width: 88px;
    height: 88px;
    margin-right: -13.5px;
    margin-top: -13.5px;
    animation: cssload-spinner2 2.5s linear infinite;
    -o-animation: cssload-spinner2 2.5s linear infinite;
    -ms-animation: cssload-spinner2 2.5s linear infinite;
    -webkit-animation: cssload-spinner2 2.5s linear infinite;
    -moz-animation: cssload-spinner2 2.5s linear infinite;
  }
  
  @keyframes cssload-spinner1 {
    from {
      transform: rotate(0deg);
    }
    to {
      transform: rotate(-360deg);
    }
  }
  
  @-o-keyframes cssload-spinner1 {
    from {
      -o-transform: rotate(0deg);
    }
    to {
      -o-transform: rotate(-360deg);
    }
  }
  
  @-ms-keyframes cssload-spinner1 {
    from {
      -ms-transform: rotate(0deg);
    }
    to {
      -ms-transform: rotate(-360deg);
    }
  }
  
  @-webkit-keyframes cssload-spinner1 {
    from {
      -webkit-transform: rotate(0deg);
    }
    to {
      -webkit-transform: rotate(-360deg);
    }
  }
  
  @-moz-keyframes cssload-spinner1 {
    from {
      -moz-transform: rotate(0deg);
    }
    to {
      -moz-transform: rotate(-360deg);
    }
  }
  
  @keyframes cssload-spinner2 {
    from {
      transform: rotate(0deg);
    }
    to {
      transform: rotate(360deg);
    }
  }
  
  @-o-keyframes cssload-spinner2 {
    from {
      -o-transform: rotate(0deg);
    }
    to {
      -o-transform: rotate(360deg);
    }
  }
  
  @-ms-keyframes cssload-spinner2 {
    from {
      -ms-transform: rotate(0deg);
    }
    to {
      -ms-transform: rotate(360deg);
    }
  }
  
  @-webkit-keyframes cssload-spinner2 {
    from {
      -webkit-transform: rotate(0deg);
    }
    to {
      -webkit-transform: rotate(360deg);
    }
  }
  
  @-moz-keyframes cssload-spinner2 {
    from {
      -moz-transform: rotate(0deg);
    }
    to {
      -moz-transform: rotate(360deg);
    }
  }
  
  
  
  
  /* ==========================================================================
    04. HEADER & NAVIGATION
    =========================================================================== */
  
  #header {
    width: 100%;
    display: block;
    padding-top: 0px;
  }
  
  .header-wrapper {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1030;
  }
  
  .headerwp {
    max-width: 1140px;
    margin: 0 auto;
    padding: 0;
  }
  
  .posrlt {
    position: relative;
  }
  
  /*------------------------------------------*/
  /*  HEADER LOGO
  /*------------------------------------------*/
  
  .desktoplogo img {
    width: auto;
    max-width: inherit;
    max-height: 32px;
  }
  
  /*------------------------------------------*/
  /*  NAVIGATION MENU
  /*------------------------------------------*/
  
  .wsmainfull {
    width: 100%;
    height: auto;
    z-index: 1031;
    -webkit-transition: all 450ms ease-in-out;
    -moz-transition: all 450ms ease-in-out;
    -o-transition: all 450ms ease-in-out;
    -ms-transition: all 450ms ease-in-out;
    transition: all 450ms ease-in-out; 
  }
  
  .tra-menu .wsmainfull {
    padding: 20px 0;
    background-color: transparent!important;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
  }
  
  .white-menu .wsmainfull {
    padding: 6px 0;
    background-color: var(--white)!important;
    -webkit-box-shadow: 0 2px 3px var(--tra-gray);
    -moz-box-shadow: 0 2px 3px var(--tra-gray);
    box-shadow: 0 2px 3px var(--tra-gray);
  }
  
  .dark-menu .wsmainfull {
    padding: 6px 0;
    background-color: var(--ink)!important;
    -webkit-box-shadow: 0 2px 3px var(--tra-ink);
    -moz-box-shadow: 0 2px 3px var(--tra-ink);
    box-shadow: 0 2px 3px var(--tra-ink);
  }
  
  #header.hiddden-header {
    display: none;
  }
  
  .hidden-nav .wsmainfull {
    margin-top: -140px;
    -webkit-box-shadow: 0 2px 3px var(--tra-gray);
    -moz-box-shadow: 0 2px 3px var(--tra-gray);
    box-shadow: 0 2px 3px var(--tra-gray);
    -webkit-transition: all 400ms ease-in-out;
    -moz-transition: all 400ms ease-in-out;
    -o-transition: all 400ms ease-in-out;
    -ms-transition: all 400ms ease-in-out;
    transition: all 400ms ease-in-out;
  }
  
  /*------------------------------------------*/
  /*  HEADER LINK
  /*------------------------------------------*/ 
  
  .wsmenu > .wsmenu-list > li > a {
    font-family: 'Plus Jakarta Sans', sans-serif;
    display: block;
    font-size: 1rem;
    line-height: 50px;
    font-weight: 600;
    letter-spacing: 0;
    text-decoration: none;  
    margin: 0 7px;
    padding: 10px 15px;
  }
  
  .navbar-dark .wsmenu > .wsmenu-list > li > a.h-link {
    color: var(--black);
  }
  
  .navbar-light .wsmenu > .wsmenu-list > li > a.h-link {
    color: var(--white);
  }
  
  .wsmenu > .wsmenu-list > li > a.h-link.last-link {
    padding: 10px 0px;
    margin: 0;
  }
  
  .wsmenu > .wsmenu-list > li > a .wsarrow:after {
    border-right: 4px solid rgba(0, 0, 0, 0);
    border-left: 4px solid rgba(0, 0, 0, 0);
    border-top: 4px solid;
    content: "";
    float: left;
    left: 0;
    height: 0;
    margin: 0 14px 0 0;
    position: absolute;
    text-align: left;
    top: 35px;
    width: 0;
  }
  
  /*------------------------------------------*/
  /*  HEADER LINK INFO
  /*------------------------------------------*/
  
  span.sm-info {
    position: relative;
    display: inline-block;
    text-align: center;
    width: 20px;
    height: 20px;
    color: var(--white);
    font-size: 0.65rem;
    line-height: 19px;
    font-weight: 700;
    margin-right: 5px;
    -webkit-border-radius: 100%;
    -moz-border-radius: 100%;
    -o-border-radius: 100%;
  }
  
  .nav-blue .sm-info { background-color: var(--blue); }
  .nav-green .sm-info { background-color: var(--green); }
  .nav-indigo .sm-info { background-color: var(--indigo); }
  .nav-orchid .sm-info { background-color: var(--orchid); }
  .nav-pink .sm-info { background-color: var(--pink); }
  .nav-purple .sm-info { background-color: var(--purple); }
  .nav-red .sm-info { background-color: var(--red); }
  .nav-skyblue .sm-info { background-color: var(--sky-blue); }
  .nav-violet-red .sm-info { background-color: var(--violet-red); }
  
  /*------------------------------------------*/
  /*  HEADER BUTTONS
  /*------------------------------------------*/
  
  .wsmenu > .wsmenu-list > li a.btn {
    font-size: 1rem;
    line-height: 30px;
    font-weight: 600;
    text-transform: none;
    letter-spacing: 0;
    margin-top: 14px;
    padding: 6px 28px 8px;
  }
  
  .wsmenu > .wsmenu-list > li a.btn.reg-btn {
    padding: 4px 22px;
  }
  
  .wsmenu > .wsmenu-list > li.reg-fst-link > a,
  .wsmenu > .wsmenu-list > li a.btn.fst-btn-link {
    margin-right: 25px;
  }
  
  .wsmenu > .wsmenu-list > li a.store.header-store {
    line-height: 1;
    margin-top: 13px;
    margin-right: 10px;
    margin-bottom: 0;
    padding: 0;
  }
  
  /*------------------------------------------*/
  /*  LANGUAGE SELECT
  /*------------------------------------------*/
  
  .wsmenu > .wsmenu-list > li.lang {
    margin-left: 12px;
  }
  
  .wsmenu > .wsmenu-list > li.lang > ul.sub-menu {
    width: auto;
    min-width: 115px!important;
    padding: 8px 5px;
  }
  
  .wsmenu > .wsmenu-list > li.lang > ul.sub-menu > li > a {
    font-size: 0.875rem;
    padding: 8px 11px;
  }
  
  .wsmenu > .wsmenu-list > li.lang > ul.sub-menu > li > a:hover {
    padding: 8px 11px;
  }
  
  /*------------------------------------------*/
  /*  HEADER STORE BADGES
  /*------------------------------------------*/
  
  .store.header-store img {
    max-height: 44px;
  }
  
  /*------------------------------------------*/
  /*  HEADER SOCIAL LINKS  
  /*------------------------------------------*/
  
  .header-socials {
    margin: 0;
    display: inline-block; 
    text-align: center;
  }
  
  .header-socials span {
    float: right;
    width: auto!important;
    display: inline-block!important;
    vertical-align: top;
    clear: none!important;
    margin: 0;
  }
  
  .header-socials a {
    display: block; 
    margin-right: 15px;
  }
  
  .navbar-light .header-socials a {
    color: #ddd;
  }
  
  .navbar-light .header-socials a:hover {
    color: var(--silver);
  }
  
  .header-socials.ico-20 [class*="flaticon-"]:before, 
  .header-socials.ico-20 [class*="flaticon-"]:after { line-height: 70px!important; } 
  
  /*------------------------------------------*/
  /*  HEADER SUBMENU
  /*------------------------------------------*/
  
  .wsmenu > .wsmenu-list > li > ul.sub-menu {
    width: auto;
    min-width: 200px;
    top: 62px;
    padding: 12px 10px;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    -o-border-radius: 6px;
    -webkit-box-shadow: 0 2px 3px var(--tra-gray);
    -moz-box-shadow: 0 2px 3px var(--tra-gray);
    box-shadow: 0 2px 3px var(--tra-gray);
  }
  
  .wsmenu > .wsmenu-list > li > ul.sub-menu > li > a {
    background-color: var(--tra-white-smoke);
    font-family: 'Plus Jakarta Sans', sans-serif;
    color: var(--black);
    font-size: 1rem;
    font-weight: 600;
    padding: 11px 14px;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    -o-border-radius: 6px;
    transition: all 0.3s ease-in-out;
  }
  
  .wsmenu > .wsmenu-list > li > ul.sub-menu > li > a:hover {
    background-color: var(--white-smoke);
    padding: 11px 14px;
  }
  
  /*------------------------------------------*/
  /*  HEADER SUBMENU SUBMENU
  /*------------------------------------------*/
  
  .wsmenu > .wsmenu-list > li > ul.sub-menu > li > ul.sub-menu {
    min-width: 210px;
    position: absolute;
    right: 102%;
    top: 0;
    margin: 0;
    padding: 10px;
    border: none;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    border-radius: 6px;
    -webkit-box-shadow: 0 2px 3px var(--tra-gray);
    -moz-box-shadow: 0 2px 3px var(--tra-gray);
    box-shadow: 0 2px 3px var(--tra-gray);
  }
  
  .wsmenu > .wsmenu-list > li > ul.sub-menu > li > ul.sub-menu > li {
    border-bottom: none;
  }
  
  .wsmenu > .wsmenu-list > li > ul.sub-menu > li > ul.sub-menu > li > a {
    background-color: var(--tra-white-smoke);
    font-family: 'Plus Jakarta Sans', sans-serif;
    color: var(--black);
    font-size: 1rem;
    font-weight: 600;
    padding: 11px 14px;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    -o-border-radius: 6px;
    transition: all 0.3s ease-in-out;
  }
  
  .wsmenu > .wsmenu-list > li > ul.sub-menu > li > ul.sub-menu > li > a:hover {
    background-color: var(--white-smoke);
    padding: 11px 14px;
  }
  
  .wsmenu > .wsmenu-list > li > ul.sub-menu > li > a span {
    position: absolute;
    top: 12px;
    left: 12px;
  }
  
  .sub-menu.ico-10 [class*="flaticon-"]:before, 
  .sub-menu.ico-10 [class*="flaticon-"]:after { font-size: 0.7rem; } 
  
  /*------------------------------------------*/
  /*  HALFMENU
  /*------------------------------------------*/
  
  .wsmenu > .wsmenu-list > li > .wsmegamenu {
    top: 62px;
  }
  
  .wsmenu > .wsmenu-list > li > .wsmegamenu.halfmenu {
    width: 33%;
    padding: 12px 0;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    -o-border-radius: 6px;
    -webkit-box-shadow: 0 2px 3px var(--tra-gray);
    -moz-box-shadow: 0 2px 3px var(--tra-gray);
    box-shadow: 0 2px 3px var(--tra-gray);
  }
  
  .wsmenu > .wsmenu-list > li > .wsmegamenu .link-list li {
    border-bottom: none;
  }
  
  .wsmenu > .wsmenu-list > li > .wsmegamenu.w-75 ul.link-list > li > a,
  .wsmenu > .wsmenu-list > li > .wsmegamenu.halfmenu ul.link-list > li > a {
    font-family: 'Plus Jakarta Sans', sans-serif;
    background-color: var(--tra-white-smoke);
    color: var(--black);
    font-size: 1rem;
    font-weight: 600;
    padding: 11px 14px;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    -o-border-radius: 6px;
    transition: all 0.3s ease-in-out;
  }
  
  .wsmenu > .wsmenu-list > li > .wsmegamenu.w-75 ul.link-list > li > a:hover,
  .wsmenu > .wsmenu-list > li > .wsmegamenu.halfmenu ul.link-list > li > a:hover {
    background-color: var(--white-smoke);
    padding: 11px 14px;
  }
  
  /*------------------------------------------*/
  /*  MEGAMENU
  /*------------------------------------------*/
  
  .wsmenu > .wsmenu-list > li > .wsmegamenu {
    padding: 12px 0;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    -o-border-radius: 6px;
    -webkit-box-shadow: 0 2px 3px var(--tra-gray);
    -moz-box-shadow: 0 2px 3px var(--tra-gray);
    box-shadow: 0 2px 3px var(--tra-gray);
  }
  
  .wsmenu > .wsmenu-list > li > .wsmegamenu.w-75 {
    width: 74%!important;
    right: 25%;
    padding: 20px 10px;
  }
  
  .wsmegamenu.w-75 .col-lg-3 {
    padding: 0 6px;
  }
  
  /*------------------------------------------*/
  /*  SUBMENU TITLE
  /*------------------------------------------*/
  
  .wsmenu > .wsmenu-list > li > .wsmegamenu .title,
  .wsmenu > .wsmenu-list > li > .wsmegamenu.halfmenu .title {
    color: var(--light-gray);
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 0.875rem;
    line-height: 1;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0;
    margin: 10px 13px 15px 0;
  }
  
  /*------------------------------------------*/
  /*  DARK HEADER SUBMENU / MEGAMENU
  /*------------------------------------------*/
  
  .dark-menu .wsmenu > .wsmenu-list > li > ul.sub-menu,
  .dark-menu .wsmenu > .wsmenu-list > li > .wsmegamenu,
  .dark-menu .wsmenu > .wsmenu-list > li > .wsmegamenu.halfmenu,
  .black-scroll .scroll .wsmenu > .wsmenu-list > li > ul.sub-menu,
  .black-scroll .scroll .wsmenu > .wsmenu-list > li > .wsmegamenu,
  .black-scroll .scroll .wsmenu > .wsmenu-list > li > .wsmegamenu.halfmenu {
    background-color: var(--metal)!important; 
    border: solid 1px var(--metal)!important; 
    -webkit-box-shadow: 0 2px 3px var(--tra-ink);
    -moz-box-shadow: 0 2px 3px var(--tra-ink);
    box-shadow: 0 2px 3px var(--tra-ink);
  }
  
  .dark-menu .wsmenu > .wsmenu-list > li > ul.sub-menu > li > a,
  .dark-menu .wsmenu > .wsmenu-list > li > .wsmegamenu.w-75 ul.link-list > li > a,
  .dark-menu .wsmenu > .wsmenu-list > li > .wsmegamenu.halfmenu ul.link-list > li > a,
  .black-scroll .scroll .wsmenu > .wsmenu-list > li > ul.sub-menu > li > a,
  .black-scroll .scroll .wsmenu > .wsmenu-list > li > .wsmegamenu.w-75 ul.link-list > li > a,
  .black-scroll .scroll .wsmenu > .wsmenu-list > li > .wsmegamenu.halfmenu ul.link-list > li > a {
    color: #ddd;
    background-color: rgba(255, 255, 255, 0)!important;
  }
  
  .dark-menu .wsmenu > .wsmenu-list > li > ul.sub-menu > li > a:hover,
  .dark-menu .wsmenu > .wsmenu-list > li > .wsmegamenu.w-75 ul.link-list > li > a:hover,
  .dark-menu .wsmenu > .wsmenu-list > li > .wsmegamenu.halfmenu ul.link-list > li > a:hover,
  .black-scroll .scroll .wsmenu > .wsmenu-list > li > ul.sub-menu > li > a:hover,
  .black-scroll .scroll .wsmenu > .wsmenu-list > li > .wsmegamenu.w-75 ul.link-list > li > a:hover,
  .black-scroll .scroll .wsmenu > .wsmenu-list > li > .wsmegamenu.halfmenu ul.link-list > li > a:hover {
    background-color: rgba(255, 255, 255, .05)!important;
  }
  
  .dark-menu .title, .black-scroll .scroll .title,
  .dark-menu .icons-menu-txt span, .black-scroll .scroll .icons-menu-txt span {
    color: var(--white)!important;
  }
  
  /*------------------------------------------*/
  /*  NAVBAR HOVER
  /*------------------------------------------*/
  
  .navbar-light .wsmenu-list > li > a.h-link:hover {
    color: var(--smoke);
  }
  
  .navbar-dark .wsmenu-list > li > a.h-link:hover {
    color: var(--ink);
  }
  
  .wsmenu > .wsmenu-list.nav-blue > li > ul.sub-menu > li > a:hover,
  .wsmenu > .wsmenu-list.nav-blue > li > ul.sub-menu > li > ul.sub-menu > li > a:hover,
  .wsmenu > .wsmenu-list.nav-blue > li > .wsmegamenu.w-75 ul.link-list > li > a:hover,
  .wsmenu > .wsmenu-list.nav-blue > li > .wsmegamenu.halfmenu ul.link-list > li > a:hover {
    color: var(--blue);
  }
  
  .wsmenu > .wsmenu-list.nav-green > li > ul.sub-menu > li > a:hover,
  .wsmenu > .wsmenu-list.nav-green > li > ul.sub-menu > li > ul.sub-menu > li > a:hover,
  .wsmenu > .wsmenu-list.nav-green > li > .wsmegamenu.w-75 ul.link-list > li > a:hover,
  .wsmenu > .wsmenu-list.nav-green > li > .wsmegamenu.halfmenu ul.link-list > li > a:hover {
    color: var(--green);
  }
  
  .wsmenu > .wsmenu-list.nav-indigo > li > ul.sub-menu > li > a:hover,
  .wsmenu > .wsmenu-list.nav-indigo > li > ul.sub-menu > li > ul.sub-menu > li > a:hover,
  .wsmenu > .wsmenu-list.nav-indigo > li > .wsmegamenu.w-75 ul.link-list > li > a:hover,
  .wsmenu > .wsmenu-list.nav-indigo > li > .wsmegamenu.halfmenu ul.link-list > li > a:hover {
    color: var(--indigo);
  }
  
  .wsmenu > .wsmenu-list.nav-orchid > li > ul.sub-menu > li > a:hover,
  .wsmenu > .wsmenu-list.nav-orchid > li > ul.sub-menu > li > ul.sub-menu > li > a:hover,
  .wsmenu > .wsmenu-list.nav-orchid > li > .wsmegamenu.w-75 ul.link-list > li > a:hover,
  .wsmenu > .wsmenu-list.nav-orchid > li > .wsmegamenu.halfmenu ul.link-list > li > a:hover {
    color: var(--orchid);
  }
  
  .wsmenu > .wsmenu-list.nav-pink > li > ul.sub-menu > li > a:hover,
  .wsmenu > .wsmenu-list.nav-pink > li > ul.sub-menu > li > ul.sub-menu > li > a:hover,
  .wsmenu > .wsmenu-list.nav-pink > li > .wsmegamenu.w-75 ul.link-list > li > a:hover,
  .wsmenu > .wsmenu-list.nav-pink > li > .wsmegamenu.halfmenu ul.link-list > li > a:hover {
    color: var(--pink);
  }
  
  .wsmenu > .wsmenu-list.nav-purple > li > ul.sub-menu > li > a:hover,
  .wsmenu > .wsmenu-list.nav-purple > li > ul.sub-menu > li > ul.sub-menu > li > a:hover,
  .wsmenu > .wsmenu-list.nav-purple > li > .wsmegamenu.w-75 ul.link-list > li > a:hover,
  .wsmenu > .wsmenu-list.nav-purple > li > .wsmegamenu.halfmenu ul.link-list > li > a:hover {
    color: var(--purple);
  }
  
  .wsmenu > .wsmenu-list.nav-red > li > ul.sub-menu > li > a:hover,
  .wsmenu > .wsmenu-list.nav-red > li > ul.sub-menu > li > ul.sub-menu > li > a:hover,
  .wsmenu > .wsmenu-list.nav-red > li > .wsmegamenu.w-75 ul.link-list > li > a:hover,
  .wsmenu > .wsmenu-list.nav-red > li > .wsmegamenu.halfmenu ul.link-list > li > a:hover {
    color: var(--red);
  }
  
  .wsmenu > .wsmenu-list.nav-skyblue > li > ul.sub-menu > li > a:hover,
  .wsmenu > .wsmenu-list.nav-skyblue > li > ul.sub-menu > li > ul.sub-menu > li > a:hover,
  .wsmenu > .wsmenu-list.nav-skyblue > li > .wsmegamenu.w-75 ul.link-list > li > a:hover,
  .wsmenu > .wsmenu-list.nav-skyblue > li > .wsmegamenu.halfmenu ul.link-list > li > a:hover {
    color: var(--sky-blue);
  }
  
  .wsmenu > .wsmenu-list.nav-violet-red > li > ul.sub-menu > li > a:hover,
  .wsmenu > .wsmenu-list.nav-violet-red > li > ul.sub-menu > li > ul.sub-menu > li > a:hover,
  .wsmenu > .wsmenu-list.nav-violet-red > li > .wsmegamenu.w-75 ul.link-list > li > a:hover,
  .wsmenu > .wsmenu-list.nav-violet-red > li > .wsmegamenu.halfmenu ul.link-list > li > a:hover {
    color: var(--violet-red);
  }
  
  /*------------------------------------------*/
  /*  HIDDEN NAVBAR SCROLL
  /*------------------------------------------*/
  
  .hidden-nav .wsmainfull.scroll {
    margin-top: 0;
  }
  
  /*------------------------------------------*/
  /*  NAVBAR WHITE SCROLL
  /*------------------------------------------*/
  
  .tra-menu.white-scroll .wsmainfull.scroll,
  .white-menu.white-scroll .wsmainfull.scroll,
  .tra-menu.border-header.white-scroll .wsmainfull.scroll {
    padding: 0;
    border: none;
    background-color: rgba(255, 255, 255, .7)!important;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    -webkit-box-shadow: 0 2px 3px var(--tra-gray);
    -moz-box-shadow: 0 2px 3px var(--tra-gray);
    box-shadow: 0 2px 3px var(--tra-gray);
  }
  
  .tra-menu.navbar-dark.white-scroll .scroll .wsmenu > .wsmenu-list > li > a.h-link, 
  .tra-menu.navbar-light.white-scroll .scroll .wsmenu > .wsmenu-list > li > a.h-link {
    color: var(--black);
  }
  
  .navbar-light.white-scroll .scroll .wsmenu-list > li > a.h-link:hover {
    color: var(--ink)!important;
  }
  
  /*------------------------------------------*/
  /*  NAVBAR BLACK SCROLL
  /*------------------------------------------*/
  
  .tra-menu.black-scroll .wsmainfull.scroll,
  .dark-menu.black-scroll .wsmainfull.scroll {
    padding: 0;
    background-color: var(--ink)!important;
    -webkit-box-shadow: 0 2px 3px var(--tra-ink);
    -moz-box-shadow: 0 2px 3px var(--tra-ink);
    box-shadow: 0 2px 3px var(--tra-ink);
  }
  
  .tra-menu.navbar-dark.black-scroll .scroll .wsmenu > .wsmenu-list > li > a.h-link {
    color: var(--white);
  }
  
  .tra-menu.navbar-dark.black-scroll .scroll .wsmenu > .wsmenu-list > li > a.h-link:hover {
    color: var(--silver)!important;
  }
  
  /*------------------------------------------*/
  /*  WHITE SCROLL BUTTONS
  /*------------------------------------------*/
  
  .white-scroll .scroll .btn--tra-white {
    color: var(--black)!important;
    border-color: var(--black)!important;
  }
  
  /*------------------------------------------*/
  /*  BLACK SCROLL BUTTONS
  /*------------------------------------------*/
  
  .black-scroll .scroll .btn--tra-black {
    color: var(--white)!important;
    border-color: var(--white)!important;
  }
  
  /*------------------------------------------*/
  /*  LOGO IMAGE
  /*------------------------------------------*/
  
  .logo-white, 
  .logo-black {
    display: block;
  }
  
  .navbar-dark .logo-white,
  .navbar-light .logo-black,
  .tra-menu.navbar-light .scroll .logo-white,
  .tra-menu.navbar-dark.black-scroll .scroll .logo-black {
    display: none;
  }
  
  .tra-menu.navbar-light .scroll .logo-black,
  .tra-menu.navbar-dark.black-scroll .scroll .logo-white {
    display: block;
  }
  
  
  
  
  /* ==========================================================================
    05. HERO
    ========================================================================== */
  
  .hero-section .container {
    position: relative;
    z-index: 3;
  }
  
  /*------------------------------------------*/
  /*  HERO DIGITS
  /*------------------------------------------*/
  
  .hero-digits {
    padding-left: 20px;
  }
  
  #hd-1-1, #hd-1-2 {
    display: inline-block;
    float: right;
    padding-left: 20px;
  } 
  
  #hd-1-1 { width: 48%; }
  #hd-1-2 { width: 48%; }
  
  .hero-digits h2.statistic-number {
    font-size: 3.35rem;
    line-height: 1;
    letter-spacing: -1.5px;
    margin-bottom: 10px;
  } 
  
  .hero-digits h2.statistic-number small {
    font-size: 2.25rem;
    margin-right: 5px;
  }
  
  .hero-digits .block-txt p.p-sm {
    margin-bottom: 0;
  }
  
  /*------------------------------------------*/
  /*  HERO-1
  /*------------------------------------------*/
  
  #hero-1 {
    position: relative;
    z-index: 3;
    background-image: url(../images/hero-1.jpg);
    padding-top: 150px;
    margin-bottom: 80px;
  }
  
  .hero-1-txt {
    margin-top: -15px;
  }
  
  .hero-1-txt h2 {
    font-size: 3.45rem;
    font-weight: 600;
  }
  
  .hero-1-txt p.p-lg {
    margin-top: 25px;
    margin-bottom: 35px;
  }
  
  .hero-1-txt .os-version-ext {
    margin-top: 22px;
  }
  
  .hero-1-img {
    text-align: center;
    padding: 0 20px;
    margin-bottom: -80px;
  }
  
  /*------------------------------------------*/
  /*  HERO-2
  /*------------------------------------------*/
  
  #hero-2 {
    background-image: url(../images/hero-2.jpg);
    padding-top: 180px;
    padding-bottom: 130px;
  }
  
  .hero-2-txt h2 {
    font-size: 3.75rem;
  }
  
  .hero-2-txt p.p-xl {
    padding: 0 8%;
    margin-top: 22px;
    margin-bottom: 30px;
  }
  
  /*------------------------------------------*/
  /*  HERO-3
  /*------------------------------------------*/
  
  #hero-3 {
    overflow: hidden;
    background-image: url(../images/hero-3.jpg);
    padding-top: 175px;
  }
  
  .theme--dark #hero-3 {
    background-image: url(../images/hero-3d.jpg);
  }
  
  .hero-3-txt .hero-app-logo img {
    width: auto;
    max-width: inherit;
    max-height: 70px;
    margin-bottom: 60px;
  }
  
  .hero-3-txt h2 {
    font-size: 3.75rem;
  }
  
  .hero-3-txt p.p-xl {
    font-size: 1.25rem;
    margin-top: 20px;
    margin-bottom: 32px;
  }
  
  .hero-3-txt .btn-txt {
    margin-top: 25px;
  }
  
  .hero-3-img {
    margin-top: 60px;
  }
  
  /*------------------------------------------*/
  /*  HERO-4
  /*------------------------------------------*/
  
  #hero-4 {
    overflow: hidden; 
    margin-bottom: 160px;
    padding-top: 300px;
  }
  
  .content-btn{
    background-color: #7E5EDD !important;
    color: white !important;
  }
  .content-btn:hover{
    border-color: #13161f !important;
    background-color: #3e2c75 !important;
    border-color: #3e2c75 !important;
  }
  
  .content-title{
    color: #EECE7B;
  }
  
  .hero-4-txt h2 {
    font-size: 3.5rem;
  }
  
  .hero-4-txt p.p-xl {
    padding: 0 2%;
    margin-top: 30px;
    margin-bottom: 30px;
  }
  
  .hero-4-img {
    margin-top: 60px;
  }
  
  /*------------------------------------------*/
  /*  HERO-5
  /*------------------------------------------*/
  
  #hero-5 {
    position: relative;
    z-index: 3;
    background-image: url(../images/hero-5.jpg);
    padding-top: 150px;
    margin-bottom: 60px;
  }
  
  #hero-5 .wave-shape-bottom path {
    fill: var(--white);
  }
  
  .theme--dark #hero-5 .wave-shape-bottom path {
    fill: var(--dark-theme-bg);
  }
  
  .hero-5-txt {
    margin-top: -15px;
    padding-right: 5px;
  }
  
  .hero-5-txt h2 {
    font-size: 3.45rem;
    line-height: 1.3;
    font-weight: 600;
  }
  
  .hero-5-txt p.p-xl {
    padding-left: 2%;
    margin-top: 25px;
    margin-bottom: 35px;
  }
  
  .hero-5-img {
    text-align: center;
    padding-left: 30px;
    margin-bottom: -60px;
  }
  
  /*------------------------------------------*/
  /*  HERO-6
  /*------------------------------------------*/
  
  #hero-6 {
    background-image: url(../images/hero-6.jpg);
    padding-top: 170px;
  }
  
  .theme--dark #hero-6 {
    background-image: url(../images/bg-dark.jpg);
  }
  
  #hero-6:after {
    position: absolute;
    content: '';
    z-index: -1;
    width: 100%;
    height: 10%;
    bottom: 0;
    right: 0;
    background-color: var(--white);
  }
  
  .theme--dark #hero-6:after {
    background-color: var(--dark-theme-bg);
  }
  
  .hero-6-txt h2 {
    font-size: 3.65rem;
  }
  
  .hero-6-txt p.p-lg {
    padding: 0 4%;
    margin-top: 25px;
    margin-bottom: 30px;
  }
  
  .hero-6-img {
    margin-top: 60px;
  }
  
  /*------------------------------------------*/
  /*  HERO-7
  /*------------------------------------------*/
  
  #hero-7 {
    overflow: hidden;
    position: relative;
    background-image: url(../images/hero-7.jpg);
    padding-top: 140px;
    padding-bottom: 40px;
  }
  
  #hero-7 .wave-shape-bottom {
    z-index: 6;
  }
  
  #hero-7 .wave-shape-bottom path {
    fill: var(--white);
  }
  
  .theme--dark #hero-7 .wave-shape-bottom path {
    fill: var(--dark-theme-bg);
  }
  
  .hero-7-txt {
    margin-top: -30px;
  }
  
  .hero-7-txt h2 {
    font-size: 3.65rem;
    font-weight: 600;
    margin-bottom: 40px;
  }
  
  .hero-7-txt .os-version-ext {
    margin-top: 22px;
  }
  
  .hero-7-img {
    text-align: center;
    margin-bottom: -30%;
  }
  
  /*------------------------------------------*/
  /*  HERO-8
  /*------------------------------------------*/
  
  #hero-8 {
    position: relative;
    background-image: url(../images/hero-8.jpg);
    padding-top: 160px;
    margin-bottom: 30px;
  }
  
  #hero-8 .wave-shape-bottom path {
    fill: var(--white);
  }
  
  .theme--dark #hero-8 .wave-shape-bottom path {
    fill: var(--dark-theme-bg);
  }
  
  .hero-8-txt {
    margin-top: -30px;
  }
  
  .hero-8-txt h2 {
    font-size: 3.65rem;
    font-weight: 600;
  }
  
  .hero-8-txt p.p-lg {
    margin-top: 25px;
    margin-bottom: 35px;
  }
  
  .hero-8-txt .quick-form {
    margin-top: 35px;
    margin-left: 3%;
  }
  
  .hero-8-img {
    position: relative;
    text-align: center;
    margin: 0 0 -30px -100%;
  }
  
  /*------------------------------------------*/
  /*  HERO-9
  /*------------------------------------------*/
  
  #hero-9 {
    position: relative;
    background-image: url(../images/hero-9.jpg);
    padding-top: 170px;
  }
  
  .theme--dark #hero-9 {
    background-image: url(../images/hero-9d.jpg);
  }
  
  .hero-9-txt {
    margin-top: -30px;
  }
  
  .hero-9-txt h2 {
    font-size: 4rem;
  }
  
  .hero-9-txt p.p-lg {
    margin-top: 25px;
    margin-bottom: 35px;
  }
  
  .hero-9-img {
    text-align: center;
    padding-right: 15px;
  }
  
  /*------------------------------------------*/
  /*  HERO-10
  /*------------------------------------------*/
  
  #hero-10 {
    background-image: url(../images/hero-10.jpg);
    padding-top: 170px;
  }
  
  .theme--dark #hero-10 {
    background-image: url(../images/hero-10d.jpg);
  }
  
  .hero-10-txt h2 {
    font-size: 3.5rem;
  }
  
  .hero-10-txt p.p-lg {
    padding: 0 2%;
    margin-top: 25px;
    margin-bottom: 35px;
  }
  
  .hero-10-txt p.btn-txt {
    margin-top: 40px;
  }
  
  #hero-10 .quick-form {
    margin: 35px 7% 0;
  }
  
  .hero-10-img {
    margin-top: 65px;
  }
  
  /*------------------------------------------*/
  /*  HERO-11
  /*------------------------------------------*/
  
  #hero-11 {
    background-image: linear-gradient(-180deg, rgba(233, 224, 242, .8) 50%, rgba(233, 224, 242, .05) 100%); 
    padding-top: 170px;
  }
  
  .theme--dark #hero-11 {
    background-image: linear-gradient(-180deg, rgba(29, 33, 44, .8) 50%, rgba(29, 33, 44, .05) 100%);
  }
  
  .hero-11-txt h2 {
    font-size: 3.35rem;
  }
  
  .hero-11-txt p.p-lg {
    margin-top: 25px;
    margin-bottom: 30px;
  }
  
  .hero-11-txt .quick-form {
    margin-top: 35px;
    margin-left: 3%;
  }
  
  .hero-11-img {
    text-align: center;
    padding-right: 25px;
  }
  
  /*------------------------------------------*/
  /*  HERO-12
  /*------------------------------------------*/
  
  #hero-12 {
    overflow: hidden; 
    background-image: url(../images/hero-12.jpg);
    padding-top: 180px;
  }
  
  .theme--dark #hero-12 {
    background-image: url(../images/hero-12d.jpg);
  }
  
  .hero-12-txt h2 {
    font-size: 3.65rem;
  }
  
  .hero-12-txt p.p-lg,
  .hero-12-txt p.p-xl { 
    margin-top: 24px;
    margin-bottom: 28px;
    padding: 0 5%;
  }
  
  .hero-12-txt .advantages {
    margin-top: 20px;
  }
  
  .hero-12-img {
    margin-top: 60px;
  }
  
  /*------------------------------------------*/
  /*  HERO-13
  /*------------------------------------------*/
  
  #hero-13 {
    background-image: url(../images/hero-13.jpg);
    padding-top: 90px;
    padding-bottom: 15px;
    margin-bottom: 60px;
  }
  
  #hero-13 .wave-shape-bottom path {
    fill: var(--white);
  }
  
  .theme--dark #hero-13 .wave-shape-bottom path {
    fill: var(--dark-theme-bg);
  }
  
  .hero-13-txt {
    margin-top: -25px;
  }
  
  .hero-13-txt h2 {
    font-size: 3.25rem;
  }
  
  .hero-13-txt p.p-lg,
  .hero-13-txt p.p-xl { 
    margin-top: 25px;
    margin-bottom: 30px;
  }
  
  .hero-13-txt .quick-form {
    margin-top: 35px;
    margin-left: 4%;
  }
  
  .hero-13-img {
    text-align: center;
    padding-left: 35px;
    margin-bottom: -60px;
  }
  
  /*------------------------------------------*/
  /*  HERO-14
  /*------------------------------------------*/
  
  #hero-14 {
    background-image: url(../images/hero-14.jpg);
    padding-top: 170px;
    padding-bottom: 130px;
  }
  
  .hero-14-txt h2 {
    font-size: 4.35rem;
  }
  
  .hero-14-txt p.p-xl {
    padding: 0 3%;
    margin-top: 30px;
    margin-bottom: 30px;
  }
  
  /*------------------------------------------*/
  /*  HERO-15
  /*------------------------------------------*/
  
  #hero-15 {
    background-image: url(../images/hero-15.jpg);
    padding-top: 150px;
    margin-bottom: 100px;
  }
  
  .hero-15-txt {
    margin-top: -25px;
    padding-right: 20px;
  }
  
  .hero-15-txt .hero-app-logo img {
    width: auto;
    max-width: inherit;
    max-height: 105px;
    margin-bottom: 30px;
  }
  
  .hero-15-txt h2 {
    font-size: 3.25rem;
  }
  
  .hero-15-txt p.p-lg {
    padding-left: 2%;
    margin-top: 25px;
    margin-bottom: 25px;
  }
  
  .hero-15-img {
    text-align: center;
    padding-left: 20px;
    margin-bottom: -100px;
  }
  
  /*------------------------------------------*/
  /*  HERO-16
  /*------------------------------------------*/
  
  #hero-16 {
    overflow: hidden; 
    padding-top: 180px;
  }
  
  .hero-16-txt h2 {
    font-size: 3.75rem;
  }
  
  .hero-16-txt p.p-lg,
  .hero-16-txt p.p-xl { 
    margin-top: 24px;
    margin-bottom: 28px;
    padding: 0 5%;
  }
  
  .hero-16-img {
    padding: 80px 60px 0;
    margin-top: 70px;
  }
  
  .hero-16-img img {
    margin-bottom: -30px;
  }
  
  /*------------------------------------------*/
  /*  HERO-17
  /*------------------------------------------*/
  
  #hero-17 {
    background-image: url(../images/hero-17.jpg);
    padding-top: 80px;
  }
  
  .theme--dark #hero-17 {
    background-image: url(../images/hero-17d.jpg);
  }
  
  .hero-17-txt .hero-app-logo img {
    width: auto;
    max-width: inherit;
    max-height: 90px;
    margin-bottom: 35px;
  }
  
  .hero-17-txt h2 {
    font-size: 4rem;
    letter-spacing: -0.5px;
  }
  
  .hero-17-txt p.p-md {
    margin-top: 20px;
    margin-bottom: 30px;
  }
  
  .hero-17-img {
    margin: 0 15px 0 -30px;
  }
  
  /*------------------------------------------*/
  /*  HERO-18
  /*------------------------------------------*/
  
  #hero-18 {
    background-image: url(../images/hero-18.jpg);
    padding-top: 100px;
  }
  
  .theme--dark #hero-18 {
    background-image: url(../images/hero-18d.jpg);
  }
  
  .hero-18-txt .hero-app-logo img {
    width: auto;
    max-width: inherit;
    max-height: 115px;
    margin-bottom: 35px;
  }
  
  .hero-18-txt h2 {
    font-size: 3.35rem;
  }
  
  .hero-18-txt p.p-xl {
    padding: 0 5%;
    margin-top: 35px;
    margin-bottom: 35px;
  }
  
  .hero-18-img {
    text-align: center;
    margin-top: 30px;
  }
  
  /*------------------------------------------*/
  /*  HERO QUICK FORM
  /*------------------------------------------*/
  
  .hero-section .quick-form .input-group {
    border: none;
  }
  
  /*------------------------------------------*/
  /*  Hero Quick Form Input
  /*------------------------------------------*/
  
  .hero-section .quick-form .form-control {
    height: 64px;
    background-color: var(--white);
    border: 2px solid var(--silver);
    color: #666;
    font-size: 1.125rem;
    font-weight: 400;
    padding: 0 20px;
    -webkit-transition: all 450ms ease-in-out;
    -moz-transition: all 450ms ease-in-out;
    -o-transition: all 450ms ease-in-out;
    -ms-transition: all 450ms ease-in-out;
    transition: all 450ms ease-in-out;  
  }
  
  .hero-section .quick-form.form--shadow .form-control {
    border-color: transparent;
    -webkit-box-shadow: 0 5px 10px var(--tra-black);
    -moz-box-shadow: 0 5px 10px var(--tra-black);
    box-shadow: 0 5px 10px var(--tra-black);
  }
  
  .hero-section .quick-form.form-stroke .form-control {
    border-color: var(--black);
  }
  
  .hero-section .quick-form.form-half .form-control {
    height: 58px;
   font-size: 1.0625rem;
  }
  
  /*------------------------------------------*/
  /*  Hero Quick Form Placeholder
  /*------------------------------------------*/
  
  .hero-section .quick-form .form-control::-moz-placeholder { color: var(--light-gray); }
  .hero-section .quick-form .form-control:-ms-input-placeholder { color: var(--light-gray); }
  .hero-section .quick-form .form-control::-webkit-input-placeholder { color: var(--light-gray); }
  
  /*------------------------------------------*/
  /*  Hero Quick Form Focus
  /*------------------------------------------*/
  
  .hero-section .quick-form .form-control:focus {
    background-color: var(--white);
    border-color: var(--black);
    outline: 0;
    box-shadow: none;
  }
  
  /*------------------------------------------*/
  /*  Hero Quick Form Button
  /*------------------------------------------*/
  
  .hero-section .quick-form .btn {
    height: 64px;
    font-size: 1.0625rem;
    padding: 12px 45px;
    margin-right: 15px;
  }
  
  .hero-section .quick-form.form-half .btn {
    height: 58px;
    font-size: 1rem;
    padding: 13px 40px;
    margin-right: 12px;
  }
  
  /*------------------------------------------*/
  /*  Hero Quick Form Message
  /*------------------------------------------*/
  
  .hero-section .quick-form-msg {
    width: 100%!important;
    display: block;
    margin: 20px 5px 15px 0;
  }
  
  .hero-section .text-center .quick-form-msg {
    margin: 20px 0 -15px 0;
  }
  
  .hero-section .quick-form-msg .loading {
    color: #3eb1ff;
    font-size: 1.05rem;
    line-height: 1;
    font-weight: 500;
  }
  
  .hero-section .text-center .quick-form-msg .loading {
    font-size: 1.125rem;
  }
  
  
  
  
  /* ==========================================================================
    06. ABOUT
    ========================================================================== */
  
  .about-1 {
    background-image: url(../images/about-1.jpg);
    margin-bottom: 80px;
  }
  
  .theme--dark .about-1 {
    background-image: url(../images/about-1d.jpg);
  }
  
  .about-2-title {
    margin-bottom: 25px;
  }
  
  .about-4-title {
    padding-left: 4%;
  }
  
  /*------------------------------------------*/
  /*  ABOUT TYPOGRAPHY
  /*------------------------------------------*/ 
  
  .about-1-txt h2 {
    font-size: 3.65rem;
    margin-bottom: 20px;
  }
  
  .about-1-txt h4 {
    line-height: 1.44;
    font-weight: 400;
    padding-left: 2%;
  }
  
  /*------------------------------------------*/
  /*  ABOUT IMAGE
  /*------------------------------------------*/ 
  
  .about-1-img {
    margin-top: 60px;
    margin-bottom: -80px;
  }
  
  .about-3 .img-block.left-column {
    margin-left: 40px;
  }
  
  .about-3 .img-block.right-column {
    margin-right: 40px;
  }
  
  
  
  
  /* ==========================================================================
    07. CAREERS
    ========================================================================== */
  
  .jobs-category {
    padding: 0 50px 18px;
    margin-bottom: 30px;
    border: 1.5px solid transparent;
  }
  
  .jobs-category h4 {
    line-height: 1;
    padding-top: 40px;
    margin-bottom: 14px;
  }
  
  .career-item {
    position: relative;
    padding: 22px 0;
  }
  
  /*------------------------------------------*/
  /*  OPEN ROLE DESCRIPTION 
  /*------------------------------------------*/
  
  .position-data {
    margin-top: 3px;
  }
  
  .position-data li {
    width: auto!important;
    display: inline-block!important;
    vertical-align: top;
    clear: none !important;
  }
  
  .rb-divider {
    position: relative;
    top: 1.25px;
    transform: rotate(90deg);
    margin-right: 2px;
  }
  
  .position-data.ico-15 [class*="flaticon-"]:before, 
  .position-data.ico-15 [class*="flaticon-"]:after { font-size: 0.8rem; }
  
  .position-data li p {
    display: inline-block;
    float: right;
    margin-bottom: 0;
  }
  
  /*------------------------------------------*/
  /*  OPEN ROLE LINK
  /*------------------------------------------*/
  
  .position-link {
    color: var(--header-color);
    position: absolute;
    top: 26px;
    left: 5px;
    transform: rotate(45deg);
  }
  
  .position-link.ico-25 [class*="flaticon-"]:before, 
  .position-link.ico-25 [class*="flaticon-"]:after { font-size: 1.35rem; }
  
  /*------------------------------------------*/
  /*  MORE CAREERS BUTTON
  /*------------------------------------------*/ 
  
  .more-careers {
    text-align: center;
    margin-top: 60px;
  }
  
  .more-careers-holder {
    display: inline-block;
    margin: 0 auto;
  }
  
  .more-careers-txt {
    text-align: right!important;
    display: inline-block;
    float: right;
  }
  
  .more-careers-txt p {
    position: relative;
    top: 6px;
    margin-bottom: 0;
  }
  
  .more-careers-btn {
    display: inline-block;
    margin-right: 20px;
  }
  
  .more-careers-btn .btn {
    font-size: 0.875rem;
    padding: 0.6rem 1.35rem;
  }
  
  
  
  
  /* ==========================================================================
    08. JOB POSITION
    =========================================================================== */
  
  .job-position-title {
    padding-top: 170px;
    padding-bottom: 100px;
    margin-bottom: 30px;
  }
  
  .jb-txt {
    position: relative;
  }
  
  .jb-txt h2 {
    padding-left: 20%;
  }
  
  .job-position-title .position-data {
    margin-top: 20px;
  }
  
  .job-position-title .rb-divider {
    top: 3.5px;
  }
  
  .job-position-title .btn {
    position: absolute;
    left: 0;
    bottom: 0;
    font-size: 0.9rem;
    padding: 0.7rem 1.4rem;
  }
  
  /*------------------------------------------*/
  /*  JOB POSITION TYPOGRAPHY
  /*------------------------------------------*/
  
  .position-info h5 {
    margin-top: 60px;
    margin-bottom: 30px;
  }
  
  .position-info p span {
    color: var(--header-color);
    font-weight: 600;
  }
  
  .position-info .btn {
    margin-top: 35px;
  }
  
  
  
  
  /* ==========================================================================
    09. FEATURES
    ========================================================================== */
  
  .fbox-5-wrapper {
    padding: 90px 55px;
  }
  
  .features-2 .section-title p.p-xl {
    font-size: 1.25rem;
    margin-top: 0;
  }
  
  .rows-2 .fb-1, 
  .rows-2 .fb-2, 
  .rows-2 .fb-3,
  .rows-3 .fb-1, 
  .rows-3 .fb-2, 
  .rows-3 .fb-3, 
  .rows-3 .fb-4,
  .rows-4 .fb-1, 
  .rows-4 .fb-2, 
  .rows-4 .fb-3, 
  .rows-4 .fb-4,
  .rows-4 .fbox-2.fb-1, 
  .rows-4 .fbox-2.fb-2, 
  .rows-4 .fbox-2.fb-3, 
  .rows-4 .fbox-2.fb-4, 
  .rows-4 .fbox-2.fb-5, 
  .rows-4 .fbox-2.fb-6 { 
    margin-bottom: 40px; 
  }
  
  .fbox-wrapper.left-align .rows-2 .fb-1, 
  .fbox-wrapper.left-align .rows-2 .fb-2, 
  .fbox-wrapper.left-align .rows-2 .fb-3 { 
    margin-bottom: 50px; 
  }
  
  /*------------------------------------------*/
  /*  FEATURE BOX
  /*------------------------------------------*/
  
  .fbox-3 {
    border: 2px solid white;
    padding: 40px 20px 30px;
  }
  
  .fbox-3.bg--white {
    border: 1px solid transparent;
    padding: 40px 20px 30px;
  }
  
  .fbox-4 { 
    padding: 60px; 
    border: 1px solid transparent;
  } 
  
  .fbox-4.fb-5,
  .fbox-4.fb-6 { 
    padding: 70px 65px; 
  }
  
  .ico-title .fbox-4.fb-5,
  .ico-title .fbox-4.fb-6 { 
    padding: 45px 50px 35px; 
  }  
  
  .fbox-4.fb-7,
  .fbox-4.fb-8 { 
    position: relative;
    overflow: hidden;
    padding: 70px 50px 0; 
  } 
  
  .ico-title .fbox-4.fb-7,
  .ico-title .fbox-4.fb-8 { 
    padding: 45px 50px 0; 
  }  
  
  .fbox-4-txt {
    padding-right: 60px;
  }
  
  .fbox-4-txt h2,
  .fbox-4-txt h3 {
    margin-bottom: 20px;
  }
  
  .fbox-4-txt h3.h3-lg {
    font-size: 2.5625rem;
  }
  
  .fbox-4-txt .btn {
    margin-top: 25px;
  }
  
  .fbox-5 { 
    padding: 80px 53px 70px; 
    border: 1.5px solid transparent;
  } 
  
  /*------------------------------------------*/
  /*  FEATURE BOX VECTOR ICON
  /*------------------------------------------*/ 
  
  .fbox-ico,
  .fbox-ico.ico-rounded {
    margin-bottom: 15px;
  }
  
  .fbox-1 .fbox-ico.ico-60 {
    margin-bottom: 20px;
  }
  
  .fbox-ico[class*="img-"],
  .fbox-ico.ico-rounded-md,
  .fbox-ico.ico-rounded-lg {
    margin-bottom: 20px;
  }
  
  /*------------------------------------------*/
  /*  FEATURE BOX IMAGE
  /*------------------------------------------*/ 
  
  .fbox-img img {
    width: auto;
    max-width: inherit;
  }
  
  .fbox-img.h-175 img { max-height: 175px; }
  .fbox-img.h-180 img { max-height: 180px; }
  
  .fbox-6 .fbox-img { 
    margin-bottom: 35px; 
  }
  
  /*------------------------------------------*/
  /*  FBOX-4 IMAGE
  /*------------------------------------------*/ 
  
  .fbox-4.fb-1 .fbox-4-img {
    margin: 40px 5% 0;
  }
  
  .fbox-4.fb-5 .fbox-4-img,
  .fbox-4.fb-6 .fbox-4-img {
    margin: 45px 0 0;
  }
  
  .fbox-4.fb-2 .fbox-4-img,
  .fbox-4.fb-3 .fbox-4-img,
  .fbox-4.fb-4 .fbox-4-img {
     margin: 0 5% 40px;
  }
  
  .fbox-4.fb-7 .fbox-4-img,
  .fbox-4.fb-8 .fbox-4-img {
    margin: 40px 5% 0;
  }
  
  /*------------------------------------------*/
  /*  FBOX-5 IMAGE
  /*------------------------------------------*/
  
  .fbox-5-img img {
    width: auto;
    max-width: inherit;
    max-height: 255px;
    margin-bottom: 25px;
  }
  
  /*------------------------------------------*/
  /*  FBOX-7 IMAGE
  /*------------------------------------------*/ 
  
  .fbox-7 .fbox-img {
    -webkit-border-radius: 12px 12px 0 0;
    -moz-border-radius: 12px 12px 0 0;
    -o-border-radius: 12px 12px 0 0;
    border-radius: 12px 12px 0 0;
  } 
  
  .fbox-7 .fbox-img.h-175 { padding-top: 40px; margin: 0 8px 60px; }
  .fbox-7 .fbox-img.h-180 { padding-top: 42px; margin: 0 5px 60px; }  
  
  .fbox-7 .fbox-img img { 
    margin-bottom: -25px; 
  } 
  
  /*------------------------------------------*/
  /*  FBOX-2
  /*------------------------------------------*/ 
  
  .fbox-2 {
    display: flex;
    position: relative;
    flex-flow: row wrap;
    align-items: stretch!important;
    justify-content: flex-start;
  }
  
  .fbox-ico-wrap {
    position: relative;
    margin-left: 30px;
  }
  
  .fbox-2 .fbox-ico {
    margin-top: 2px;
  }
  
  .fbox-2 .fbox-txt {
    overflow: hidden;
    flex: 1;
    max-width: 100%;
  }
  
  /*------------------------------------------*/
  /*  FBOX TYPOGRAPHY
  /*------------------------------------------*/ 
  
  .fbox-2 h5,
  .fbox-wrapper .row-cols-md-2 h6,
  .fbox-wrapper .row-cols-md-3 h6 {
    margin-bottom: 12px;
  }
  
  .fbox-3 h6 {
    margin-top: 20px;
    margin-bottom: 12px;
  }
  
  .fbox-4 h5 {
    margin-bottom: 16px;
  }
  
  .fbox-4.fb-5 h5, 
  .fbox-4.fb-6 h5 { 
    margin-bottom: 24px; 
  }
  
  .fbox-5 h5 {
    margin-bottom: 16px;
  }
  
  .fbox-3 p,
  .fbox-5 p,
  .fbox-wrapper p,
  .fbox-4 p.mb-0 {
    margin-bottom: 0;
  }
  
  .fbox-4 p {
    margin-bottom: 14px;
  }
  
  /*------------------------------------------*/
  /*  FEATURES DOWNLOAD BUTTON
  /*------------------------------------------*/ 
  
  .features-2-download {
    margin-top: 80px;
  }
  
  .features-2-download p.p-sm {
    font-size: 0.9rem;
    margin-top: 20px;
    margin-bottom: 0;
  }
  
  
  
  
  /* ==========================================================================
    10. CONTENT
    ========================================================================== */
  
  .ct-07 {
    overflow: hidden;
  }
  
  .ct-08 {
    margin-bottom: 80px;
  }
  
  .ct-09 {
    margin-top: 80px;
  }
  
  .ct-06 .section-overlay {
    margin-bottom: 100px;
  }
  
  .bc-03 .section-title {
    margin-bottom: 50px;
  }
  
  .bc-04 {
    margin: 30px 0;
  }
  
  /*------------------------------------------*/
  /*  CONTENT BOX WRAPPER
  /*------------------------------------------*/
  
  .bc-01-wrapper,
  .bc-02-wrapper {
    border: 1px solid transparent;
  }
  
  .bc-04-wrapper {
    border: 2.5px solid #d2d2eb;
    padding-right: 60px;
  }
  
  .bc-01 .section-overlay {
    padding: 80px 65px;
  }
  
  .bc-02 .section-overlay {
    padding: 65px 60px;
  }
  
  .bc-02.pt-30 .section-overlay,
  .bc-02.pb-30 .section-overlay { 
    padding: 60px; 
  }
  
  .bc-02.pt-30.bc-02-top { 
    margin-top: 70px;
  }
  
  .bc-03 .section-overlay {
    padding: 80px 70px 0;
  }
  
  /*------------------------------------------*/
  /*  TEXT BLOCK
  /*------------------------------------------*/ 
  
  .txt-box { 
    margin-bottom: 25px;
  }
  
  .bc-01 .txt-box {
    margin-bottom: 30px;
  }
  
  .txt-box:last-child,
  .bc-01 .txt-box:last-child { 
    margin-bottom: 0; 
  }
  
  .ct-07 .txt-block {
    margin-top: -30px;
  }
  
  .ct-08 .txt-block {
    margin-top: -30px;
  }
  
  .bc-01 .txt-block.left-column {
    padding-left: 20px;
  }
  
  .bc-01 .txt-block.right-column {
    padding-right: 20px;
  }
  
  .bc-04 .txt-block {
    padding-left: 30px;
  }
  
  /*------------------------------------------*/
  /*  CONTENT BOX
  /*------------------------------------------*/
  
  .cbox-1,
  .cbox-2 {
    display: flex;
    position: relative;
    flex-flow: row wrap;
    align-items: stretch!important;
    justify-content: flex-start;
  }
  
  .cbox-4-wrapper {
    margin-top: 20px;
  }
  
  .cbox-5 {
    display: inline-block;
    width: 390px;
    min-width: 390px;
    padding: 18px 24px 16px 24px;
  }
  
  .cbox-5.cb-1 {
    margin: 12px 0 25px;
  }
  
  /*------------------------------------------*/
  /*  CONTENT BOX ICON
  /*------------------------------------------*/
  
  .cbox-1 .ico-wrap {
    position: relative;
    margin-left: 1.625rem;
  }
  
  .cbox-1-ico {
    text-align: center;
    position: relative;
    width: 2.25rem;
    height: 2.25rem;
    font-size: 1.125rem;
    line-height: 2rem;
    font-weight: 600;
    border: 3px solid transparent;
    border-radius: 100%;
    -webkit-transition: all 450ms ease-in-out;
    -moz-transition: all 450ms ease-in-out;
    -o-transition: all 450ms ease-in-out;
    -ms-transition: all 450ms ease-in-out;
    transition: all 450ms ease-in-out; 
  }
  
  .cbox-1-line {
    position: absolute;
    bottom: 14px;
    right: 50%;
    width: 2px;
    background-color: var(--smoke);
    height: calc(100% - 70px);
    -webkit-transform: translateX(50%);
    -ms-transform: translateX(50%);
    transform: translateX(50%);
  }
  
  .cbox-1:hover .cbox-1-ico {
    background-color: transparent;
  }
  
  .cbox-1:hover .cbox-1-ico.bg--black { color: var(--black); border-color: var(--black); }
  .cbox-1:hover .cbox-1-ico.bg--blue { color: var(--blue); border-color: var(--blue); }
  .cbox-1:hover .cbox-1-ico.bg--green { color: var(--green); border-color: var(--green); }
  .cbox-1:hover .cbox-1-ico.bg--indigo { color: var(--indigo); border-color: var(--indigo); }
  .cbox-1:hover .cbox-1-ico.bg--orchid { color: var(--orchid); border-color: var(--orchid); }
  .cbox-1:hover .cbox-1-ico.bg--pink { color: var(--pink); border-color: var(--pink); }
  .cbox-1:hover .cbox-1-ico.bg--purple { color: var(--purple); border-color: var(--purple); }
  .cbox-1:hover .cbox-1-ico.bg--red { color: var(--red); border-color: var(--red); }
  .cbox-1:hover .cbox-1-ico.bg--skyblue { color: var(--sky-blue); border-color: var(--sky-blue); }
  .cbox-1:hover .cbox-1-ico.bg--violet-red { color: var(--violet-red); border-color: var(--violet-red); }
  
  /*------------------------------------------*/
  /*  CBOX #2
  /*------------------------------------------*/
  
  .cbox-2 .ico-wrap {
    position: relative;
    text-align: center;
    margin-top: 0;
    margin-left: 1.25rem;
  }
  
  .cbox-2 .cbox-2-ico {
    position: relative;
    top: 5px;
  }
  
  .cbox-2-ico span[class*="flaticon-"]:before,
  .cbox-2-ico span[class*="flaticon-"]:after {  
    font-size: 3rem;
  }
  
  /*------------------------------------------*/
  /*  CBOX #5
  /*------------------------------------------*/
  
  .cbox-5-ico {   
    display: inline-block!important;  
    float: right;
    text-align: center;
  }
  
  /*------------------------------------------*/
  /*  CBOX #6
  /*------------------------------------------*/ 
  
  .cbox-6-wrapper {
    position: relative;
  }
  
  .cbox-6 {
    border: 1px solid var(--snow);
    padding: 40px;
    margin: 0 12%;
    z-index: 1;
  }
  
  .cbox-6 hr {
    margin-top: 35px;
    margin-bottom: 25px;
  }
  
  /*------------------------------------------*/
  /*  CBOX #6 TITLE
  /*------------------------------------------*/ 
  
  .cbox-6-title p.p-md {
    line-height: 1;
  }
  
  .cbox-6 .statistic-number sup {
    font-size: 3rem;
    top: -10px;
    left: 0;
    margin-left: 5px;
  }
  
  .cbox-6-title p.p-md.ico-10 {
    margin-top: 15px;
  }
  
  .cbox-6-title p.p-md.ico-10 span {
    font-weight: 600;
  }
  
  /*------------------------------------------*/
  /*  CBOX #6 TEXT
  /*------------------------------------------*/ 
  
  .cbox-6-txt h5 {
    margin-bottom: 10px;
  }
  
  /*------------------------------------------*/
  /*  CBOX #6 DATA
  /*------------------------------------------*/ 
  
  .cbox-6-data {
    padding: 18px 25px;
  }
  
  .cbox-6-data h4 {
    letter-spacing: -0.5px;
  }
  
  .cbox-6-data p {
    margin: 0;
  }
  
  /*------------------------------------------*/
  /*  CBOX #6 SHAPE
  /*------------------------------------------*/ 
  
  .cb-shape-1 {
    position: absolute;
    left: 30px;
    top: -35px;
    z-index: -1;
  }
  
  .cb-shape-2 {
    position: absolute;
    right: 30px;
    bottom: -25px;
    z-index: -1;
  }
  
  .cb-shape-1 img,
  .cb-shape-2 img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  
  /*------------------------------------------*/
  /*  CBOX #7
  /*------------------------------------------*/ 
  
  .cbox-7 {
    display: flex;
    position: relative;
    flex-flow: row wrap;
    align-items: stretch!important;
    justify-content: flex-start;
  }
  
  .cbox-7-txt {
    overflow: hidden;
    flex: 1;
    max-width: 100%;
    padding-right: 14px;
  }
  
  .cbox-7-ico {   
    background-image: linear-gradient(0deg, #d4dbff 0%, #fff 100%);
    width: 28px;
    height: 28px;
    margin-top: 2px;
    text-align: center;
    -webkit-border-radius: 100%;
    -moz-border-radius: 100%;
    -o-border-radius: 100%;
    border-radius: 100%;
  }
  
  .cbox-7-ico.ico-15 [class*="flaticon-"]:before,
  .cbox-7-ico.ico-15 [class*="flaticon-"]:after { font-size: 0.7rem; }
  
  .cbox-7-ico span { 
    line-height: 26px; 
  }
  
  .cbox-7-txt p {
    margin-bottom: 14px;
  }
  
  /*------------------------------------------*/
  /*  CONTENT BOX TEXT
  /*------------------------------------------*/
  
  .cbox-1-txt,
  .cbox-2-txt {
    overflow: hidden;
    flex: 1;
    max-width: 100%;
  }
  
  .cbox-1-txt {
    margin-bottom: 30px;
  }
  
  .cbox-2-txt {
    margin-bottom: 40px;
  }
  
  .two-txt .cbox-2-txt {
    margin-bottom: 25px;
  }
  
  .cbox-1:last-child .cbox-1-txt,
  .cbox-2:last-child .cbox-2-txt {
    margin-bottom: 0;
  }
  
  .cbox-3-txt {
    margin-bottom: 40px;
  }
  
  .cbox-3:last-child .cbox-3-txt {
    margin-bottom: 0;
  }
  
  .cbox-5-txt {
    display: inline-block!important;
    padding-right: 18px;
  }
  
  /*------------------------------------------*/
  /*  CONTENT BOX TITLE
  /*------------------------------------------*/ 
  
  .cbox-title {
    margin-bottom: 18px;
  }
  
  .cbox-title span {
    float: right;
    line-height: 1!important;
    margin-left: 20px; 
  }
  
  .cbox-title span[class*="flaticon-"]:before,
  .cbox-title span[class*="flaticon-"]:after {   
    font-size: 2.35rem;
  }
  
  .cbox-title h5 {  
    line-height: 2.1875rem!important;
    margin-bottom: 0!important;
  }
  
  .box-title {   
    margin-bottom: 14px;
  }
  
  .box-title span {   
    position: relative;
    top: 10px;
    left: 4px;
  }
  
  .box-title h6 {  
    display: inline-block;
    margin-bottom: 0;
  }
  
  /*------------------------------------------*/
  /*  CONTENT BOX TYPOGRAPHY
  /*------------------------------------------*/
  
  .cbox-1-txt h5,
  .cbox-2-txt h5 {
    margin-bottom: 15px!important;
  }
  
  .cbox-5-txt h6 { 
    margin-bottom: 2px;
  }
  
  .bc-02 .txt-block h5 {
    margin-bottom: 25px;
  }
  
  .cbox-1-txt p,
  .cbox-2-txt p,
  .cbox-3-txt p,
  .cbox-5-txt p,
  .cbox-4 p { 
    margin-bottom: 0;
  }
  
  /*------------------------------------------*/
  /*  TEXT BLOCK TYPOGRAPHY
  /*------------------------------------------*/ 
  
  .txt-block h3,
  .txt-block h2 {
    margin-bottom: 25px;
  }
  
  .txt-block h5 {
    margin-bottom: 20px;
  }
  
  h5.h5-title {
    margin: 20px 0;
  }
  
  .txt-block-tra-link {
    margin-top: 20px;
  }
  
  .txt-block .btn {
    margin-top: 30px;
  }
  
  .txt-block .btn.btn--transparent {
    margin-top: 0;
  }
  
  .txt-block .stores-badge {
    margin-top: 30px;
  }
  
  /*------------------------------------------*/
  /*  ACCORDION  
  /*------------------------------------------*/
  
  .txt-block .accordion-1 .accordion-item {
    background-color: transparent;
    padding: 22px 0 26px;
    border: none;
    border-bottom: 1.5px solid var(--smoke);
    border-radius: 0 0;
  }
  
  .txt-block .accordion-thumb {
    margin: 0;
    padding: 0;
    cursor: pointer;
    position: relative;
  }
  
  .txt-block .accordion-1 .accordion-item .accordion-thumb:after,
  .txt-block .accordion-1 .accordion-item.is-active .accordion-thumb:after {
    font-family: Flaticon;
    font-weight: 300; 
    content: "\f146";
    position: absolute;
    top: 1px;
    left: 0;
    text-align: center;
    background-color: var(--white-smoke);
    width: 34px;
    height: 34px;
    color: var(--header-color);
    font-size: 0.75rem;
    line-height: 34px;
    -webkit-border-radius: 100%;
    -moz-border-radius: 100%;
    -o-border-radius: 100%;
    border-radius: 100%;
    -webkit-transition: all 200ms ease-in-out;
    -moz-transition: all 200ms ease-in-out;
    -o-transition: all 200ms ease-in-out;
    -ms-transition: all 200ms ease-in-out;
    transition: all 200ms ease-in-out; 
  }
  
  .txt-block .accordion-item.is-active .accordion-thumb:after {
    transform: rotate(-45deg);
  }
  
  .txt-block .accordion-1 .accordion-panel {
    color: var(--gray);
    margin: 0;
    padding: 0 5px 0 0;
    display: none;
  }
  
  .txt-block .accordion-1 .accordion-thumb h5 {
    color: var(--header-color);
    line-height: 1;
    padding-right: 5px;
    margin-bottom: 0;
  }
  
  .txt-block .accordion-1 .accordion-item.is-active .accordion-thumb h5 {
    margin-bottom: 24px;
  }
  
  /*------------------------------------------*/
  /*  TEXT BLOCK TABS
  /*------------------------------------------*/
  
  #tabs-1 .tab-content {
    display: none;
  }
  
  #tabs-1 .tab-content.current {
    display: inherit;
  }
  
  .tabs-1 li {
    cursor: pointer;
    background-color: transparent;
    border: none;
    margin-bottom: 8px;
    padding: 25px 30px;
    -webkit-transition: all 400ms ease-in-out;
    -moz-transition: all 400ms ease-in-out;
    -o-transition: all 400ms ease-in-out;
    -ms-transition: all 400ms ease-in-out;
    transition: all 400ms ease-in-out; 
  }
  
  .tabs-1 li:last-child {
    margin-bottom: 0;
  }
  
  .tab-link h5,
  .tab-link p {
    color: #858585;
    -webkit-transition: all 400ms ease-in-out;
    -moz-transition: all 400ms ease-in-out;
    -o-transition: all 400ms ease-in-out;
    -ms-transition: all 400ms ease-in-out;
    transition: all 400ms ease-in-out; 
  }
  
  .tab-link p {
    margin: 10px 0 0;
  }
  
  /*------------------------------------------*/
  /*  TAB LINK HOVER
  /*------------------------------------------*/
  
  .tabs-1 li:hover {
    background-color: #f9f9f9;
  }
  
  /*------------------------------------------*/
  /*  TAB LINK CURRENT
  /*------------------------------------------*/
  
  #tabs-1 .tabs-1 li.current,
  #tabs-1 .tabs-1 li.current:hover {
    background-color: #f3f3f5;
  }
  
  #tabs-1 .tabs-1 li.current {
    cursor: auto;
  }
  
  #tabs-1 .tabs-1 li:hover h5,
  #tabs-1 .tabs-1 li.current h5 {
    color: var(--header-color);
  }
  
  #tabs-1 .tabs-1 li:hover p,
  #tabs-1 .tabs-1 li.current p {
    color: var(--gray);
  }
  
  /*------------------------------------------*/
  /*  IMG BLOCK IMAGE
  /*------------------------------------------*/ 
  
  .img-block {
    text-align: center;
  }
  
  .ct-01 .img-block.right-column,
  .ct-02 .img-block.right-column,
  .ct-07 .img-block.right-column,
  .ct-08 .img-block.right-column,
  .ct-09 .img-block.right-column {
    margin-right: 25px;
  }
  
  .ct-01 .img-block.left-column,
  .ct-02 .img-block.left-column,
  .ct-07 .img-block.left-column,
  .ct-08 .img-block.left-column,
  .ct-09 .img-block.left-column {
    margin-left: 25px;
  }
  
  .ct-03 .img-block img {
    max-width: none;
    display: inline-block;
    margin-right: 30px;
  }
  
  .ct-04 .img-block img {
    max-width: none;
    margin-right: -100%;
  }
  
  .img-block-hidden,
  .ct-06 .img-block {
    margin-bottom: -100px;
  }
  
  .ct-07 .img-block,
  .ct-08 .img-block {
    margin-bottom: -80px;
  }
  
  .ct-09 .img-block {
    margin-top: -80px;
  }
  
  .img-block-txt,
  .img-block-btn {
    text-align: center;
    margin-top: 45px;
  }
  
  .img-block-hidden .video-btn {
    top: calc(50% - 30px);
  }
  
  .bc-3-img .video-btn {
    top: calc(50% - 70px);
  }
  
  .bc-2-img.right-column {
    margin-right: 20px;
  }
  
  .bc-2-img.left-column {
    margin-left: 20px;
  }
  
  .bc-3-img {
    margin-bottom: -200px;
  }
  
  .bc-4-img {
    transform: rotate(-3deg);
    margin: -20px 0;
  }
  
  
  
  
  /* ==========================================================================
    11. STATISTIC
    =========================================================================== */
  
  .statistic-1-wrapper .statistic-block-digit {   
    width: 36%;
    display: inline-block!important;  
    float: right;
  }
  
  .statistic-1-wrapper .statistic-block-txt {
    width: 64%;
    display: inline-block!important;
    padding-right: 16px;
  }
  
  #sb-3-1,
  #sb-3-2 {
    width: 48%;
    display: inline-block;
    float: right;
  }
  
  .statistic-4-wrapper .statistic-block {
    padding: 10px 40px;
  }
  
  #sb-4-1, 
  #sb-4-2 {
    border-left: 1px solid var(--tra-smoke);
  }
  
  /*------------------------------------------*/
  /*  STATISTIC BLOCK ICON
  /*------------------------------------------*/
  
  .statistic-ico {
    margin-bottom: 15px;
  }
  
  .statistic-block .txt-block-rating {
    margin-bottom: -3px;
  }
  
  /*------------------------------------------*/
  /*  STATISTIC BLOCK NUMBER
  /*------------------------------------------*/
  
  h3.statistic-number,
  h2.statistic-number {
    line-height: 1; 
    font-weight: 700;
    letter-spacing: -1px;
    margin-bottom: 0;
  }
  
  #sb-2-2 h2.statistic-number {
    letter-spacing: -2px;
  }
  
  #sb-3-1 h2.statistic-number,
  #sb-3-2 h2.statistic-number {
    margin-bottom: 15px;
  }
  
  /*------------------------------------------*/
  /*  STATISTIC BLOCK TYPOGRAPHY
  /*------------------------------------------*/
  
  .statistic-2-wrapper h2 {
    margin-bottom: 15px;
  }
  
  .statistic-2-wrapper .txt-block h4,
  .statistic-2-wrapper .txt-block h3 {
    line-height: 1.35;
  }
  
  .statistic-4-wrapper h5 {
    margin-top: 25px;
    margin-bottom: 15px;
  }
  
  .statistic-1-wrapper p {
    position: relative;
    line-height: 1.35;
    top: 4px;
    margin-bottom: 0;
  }
  
  .txt-block-stat p,
  .statistic-block-txt p,
  .statistic-2-wrapper p,
  .statistic-4-wrapper p {
    margin-bottom: 0;
  }
  
  
  
  
  /* ==========================================================================
    12. RATING
    =========================================================================== */
  
  .rating-1-wrapper.text-center {
    padding: 0 16%;
  }
  
  .rating-2-wrapper.text-center {
    padding: 0 13%;
  }
  
  .rating-title {
    text-align: center;
  }
  
  .rating-title h6,
  .rating-title h5 {
    margin-bottom: 0;
  }
  
  /*------------------------------------------*/
  /*  RATING BOX LOGO
  /*------------------------------------------*/
  
  .rbox-1-img {
    margin-bottom: 15px;
  }
  
  .rbox-1-img img {
    width: auto;
    max-width: inherit;
    max-height: 35px;
  }
  
  .rbox-2-img img {
    width: auto;
    max-width: inherit;
    max-height: 80px;
  }
  
  #rb-2-2 .rbox-2-img img {
    max-height: 145px;
  }
  
  /*------------------------------------------*/
  /*  RATING BOX TYPOGRAPHY
  /*------------------------------------------*/
  
  .rbox-1 .star-rating {
    display: inline-block;
    font-size: 1rem;
    line-height: 15px;
    font-weight: 500;
    vertical-align: inherit;
    background-color: var(--white);
    padding: 5px 18px;
  }
  
  .rbox-1 .star-rating span {
    position: relative;
    color: #ffb30c;
    top: -1px;
  }
  
  .rbox-1 .star-rating.ico-15 [class*="flaticon-"]:before, 
  .rbox-1 .star-rating.ico-15 [class*="flaticon-"]:after { 
    font-size: 0.9rem; 
  } 
  
  .rbox-1 .star-rating { 
    font-size: 0.86rem; 
    line-height: 1; 
  }
  
  .rbox-2 p { 
    font-family: 'Plus Jakarta Sans', sans-serif;
    line-height: 1; 
    font-weight: 500;
    margin-top: 15px;
    margin-bottom: 0;
  }
  
  .rbox-2 p span { 
    font-weight: 700;
  }
  
  
  
  
  /* ==========================================================================
    13. TESTIMONIALS
    =========================================================================== */
  
  .reviews-3-wrapper {
    padding: 0 10px;
  }
  
  .reviews-3-wrapper:after {
    position: absolute;
    content: '';
    z-index: -1;
    width: 86%;
    height: 85%;
    top: 8%;
    right: 7%;
    background-color: var(--white-smoke);
  }
  
  /*------------------------------------------*/
  /*  TESTIMONIAL
  /*------------------------------------------*/
  
  .review-1 { 
    position: relative;
    border: 1.5px solid transparent;
    padding: 35px;
    margin: 0 12px 30px;                                
  }
  
  .review-1.no-title { 
    padding: 50px 35px 35px;                             
  }
  
  .review-2 { 
    padding: 0 30px;
    margin-bottom: 30px;
  }
  
  .review-3 { 
    position: relative;
    padding: 45px 40px 35px;
  }
  
  #rw-3-1, #rw-3-2 {
    margin-bottom: 20px;
  }
  
  .review-item { 
    position: relative;
    width: 33.33%;
    padding: 0 12px;
    margin-bottom: 24px;                           
  }
  
  .review-4 { 
    position: relative;
    padding: 35px 28px;  
    border: 1px solid transparent;                           
  }
  
  /*------------------------------------------*/
  /*  TESTIMONIAL ICON
  /*------------------------------------------*/
  
  .review-ico.ico-45 {   
    position: absolute;
    top: 15px;
    left: 25px;
    opacity: .12;
  }
  
  .review-ico.ico-60 {   
    position: absolute;
    top: 15px;
    right: 25px;
    opacity: .12;
  }
  
  /*------------------------------------------*/
  /*  TESTIMONIAL TEXT
  /*------------------------------------------*/
  
  .review-1-txt h6.h6-md,
  .review-2-txt h6.h6-lg,
  .review-3-txt h6.h6-lg,
  .review-4-txt h6.h6-lg {
    line-height: 1.4;
    padding-left: 5%;
    margin-bottom: 10px;
  }
  
  .review-1-txt h6.h6-lg {
    font-size: 1.225rem;
    line-height: 1.4;
    padding-left: 5%;
    margin-bottom: 12px;
  }
  
  .review-1.text-center h6.h6-md,
  .review-1.text-center h6.h6-lg {
    padding-left: 0;
  }
  
  .review-2-txt h6.h6-lg {
    margin-bottom: 14px;
  }
  
  .review-1-txt p,
  .review-2-txt p,
  .review-3-txt p,
  .review-4-txt p {
    margin-bottom: 15px;
  }
  
  .review-4-txt p.mb-0 {
    margin-bottom: 0;
  }
  
  /*------------------------------------------*/
  /*  TESTIMONIAL RATING
  /*------------------------------------------*/
  
  .review-rating.ico-10 {
    margin-bottom: 5px;
  }
  
  .review-author .review-rating.ico-10 {
    margin-bottom: 2px;
  }
  
  .review-rating.ico-15 {
    margin-bottom: 8px;
  }
  
  .review-rating.ico-15.mb-15 {
    margin-bottom: 12px;
  }
  
  .review-rating.ico-10 [class*="flaticon-"]:before, 
  .review-rating.ico-10 [class*="flaticon-"]:after { font-size: 0.935rem; }
  
  .review-rating.ico-15 [class*="flaticon-"]:before, 
  .review-rating.ico-15 [class*="flaticon-"]:after { font-size: 1rem; }
  
  /*------------------------------------------*/
  /*  TESTIMONIAL DATA
  /*------------------------------------------*/ 
  
  .author-data {
    margin-top: 20px;
  }
  
  .author-data.mt-25 {
    margin-top: 25px;
  }
  
  .author-data.mb-15 {
    margin-top: 0;
    margin-bottom: 12px;
  }
  
  /*------------------------------------------*/
  /*  TESTIMONIAL AVATAR
  /*------------------------------------------*/ 
  
  .review-avatar {
    margin: 0 auto; 
    float: right;
  }
  
  .review-avatar img {
    width: 46px;
    height: 46px;
    -webkit-border-radius: 100%;
    -moz-border-radius: 100%;
    -o-border-radius: 100%;
    border-radius: 100%;
  }
  
  .review-3 .review-avatar img {
    width: 54px;
    height: 54px;
  }
  
  /*------------------------------------------*/
  /*  TESTIMONIAL AUTHOR
  /*------------------------------------------*/ 
  
  .author-data .review-author {
    position: relative;
    display: inline-block;
    text-align: right;
    padding: 0 14px 0 0;
  }
  
  .review-author.mt-15 {
    margin-top: 16px;
  }
  
  .review-3 .review-author {
    margin-top: 5px;
  }
  
  .review-author h6 {
    font-size: 0.975rem;
    line-height: 1;
    margin-bottom: 9px;
  }
  
  .review-author.mt-15 h6 { 
    margin-bottom: 0; 
  }
  
  .review-author h6 span {
    color: var(--gray);
    font-size: 0.95rem;
    font-weight: 400;
  }
  
  .review-author p {
    font-size: 0.925rem;
    line-height: 1;
    font-weight: 300;
    margin-bottom: 0;
  }
  
  .review-author p a {
    font-weight: 400;
  }
  
  /*------------------------------------------*/
  /*  TESTIMONIAL BUTTON
  /*------------------------------------------*/
  
  .reviews-btn {
    text-align: center;
    margin-top: 65px;
  }
  
  /*------------------------------------------*/
  /*  TESTIMONIAL CAROUSEL DOTS
  /*------------------------------------------*/
  
  .reviews-section button {
    background-color: transparent;
    border: none;
    padding: 0 2px;
  }
  
  .owl-theme .owl-dots .owl-dot span {
    margin: 0 7px;
  }
  
  .owl-dots button:focus {
    outline: none;
    text-decoration: none;
  }
  
  
  
  
  /* ==========================================================================
    14. TEAM
    =========================================================================== */
  
  .team-member {
    margin-bottom: 50px;
  }
  
  /*------------------------------------------*/
  /*  TEAM MEMBER PHOTO
  /*------------------------------------------*/
  
  .team-member-photo {
    position: relative;
    overflow: hidden;
    text-align: center;
    margin-bottom: 30px;
  }
  
  /*------------------------------------------*/
  /*  PHOTO HOVER ZOOM
  /*------------------------------------------*/ 
  
  .team-member:hover img {
    transform: scale(1.05);
    -ms-transform: scale(1.05);
    -webkit-transform: scale(1.05);
    -o-transform: scale(1.05);
    -moz-transform: scale(1.05);
  }
  
  .team-member:hover .item-overlay {
    opacity: .45; 
    -moz-opacity: .45; 
  }
  
  /*------------------------------------------*/
  /*  TEAM MEMBER TYPOGRAPHY
  /*------------------------------------------*/
  
  .team-member-data {
    padding-right: 8px;
  }
  
  .team-member-data h6 {
    margin-bottom: 8px;
  }
  
  .team-member-data p {
    font-size: 0.975rem;
    line-height: 1;
    font-weight: 400;
    letter-spacing: 0;
    margin-bottom: 0;
  }
  
  
  
  
  /* ==========================================================================
    15. PRICING
    =========================================================================== */
  
  .pricing-3-wrapper {
    padding: 0 4%;
  }
  
  .p-table {
    border: 1.5px solid transparent;
    margin-bottom: 40px;
  }
  
  .p-table.theme--border { border: 3px solid var(--theme-color); }
  .p-table.gray--border { border: 3px solid var(--tra-black); }
  .p-table.blue--border { border: 3px solid var(--blue); }
  .p-table.green--border { border: 3px solid var(--green); }
  .p-table.indigo--border { border: 3px solid var(--indigo); }
  .p-table.orchid--border { border: 3px solid var(--orchid); }
  .p-table.pink--border { border: 3px solid var(--pink); }
  .p-table.purple--border { border: 3px solid var(--purple); }
  .p-table.red--border { border: 3px solid var(--red); }
  .p-table.skyblue--border { border: 3px solid var(--sky-blue); }
  .p-table.violet-red--border { border: 3px solid var(--violet-red); }
  
  .pricing-1-table { 
    padding: 45px 35px; 
  }
  
  .pricing-2-table,
  .pricing-3-table {
    padding: 30px 40px;
  }
  
  .pricing-2-table.bg--white,
  .pricing-3-table.bg--white {
    border: 1px solid #ddd;
    -webkit-box-shadow: -4px 8px 20px 0 rgba(20, 20, 20, .05); 
    -moz-box-shadow: -4px 8px 20px 0 rgba(20, 20, 20, .05); 
    box-shadow: -4px 8px 20px 0 rgba(20, 20, 20, .05); 
  }
  
  #pt-3-1 { margin: 0 50px 40px 10px; }
  #pt-3-2 { margin: 0 10px 40px 50px; }
  
  /*------------------------------------------*/
  /*  TABLE HEADER 
  /*------------------------------------------*/
  
  .pricing-table-header {
    position: relative;
  }
  
  .pricing-table-header h5 {
    margin-bottom: 30px;
  }
  
  /*------------------------------------------*/
  /*  PRICING TABLE DISCOUNT
  /*------------------------------------------*/
  
  .pricing-discount {
    position: absolute;
    top: -2px;
    left: -5px;
    padding: 7px 13px;
  }
  
  .pricing-discount h6 {
    font-size: 0.915rem;
    line-height: 1;
    margin-bottom: 0;
  }
  
  /*------------------------------------------*/
  /*  PRICE
  /*------------------------------------------*/
  
  .price span {
    color: var(--header-color);
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 3rem;
    line-height: 1;
    font-weight: 600;
    letter-spacing: -2px;
  } 
  
  .pricing-2-table .price span,
  .pricing-3-table .price span {
    font-size: 2.5rem;
  } 
  
  /*------------------------------------------*/
  /*  DOLLAR SIGN
  /*------------------------------------------*/
  
  .price sup {
    font-family: 'Plus Jakarta Sans', sans-serif;
    color: var(--header-color);
    font-size: 2.05rem;
    font-weight: 600;
    top: -5px;
    left: 2px;
    letter-spacing: -1px;
  }
  
  /*------------------------------------------*/
  /*  Validity
  /*------------------------------------------*/
  
  .price sup.validity {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 1.4rem;
    font-weight: 400;
    top: -2px;
    right: 0;
  }
  
  .pricing-2-table .price sup.validity,
  .pricing-3-table .price sup.validity {
    font-size: 1.65rem;
  }
  
  /*------------------------------------------*/
  /*  Text
  /*------------------------------------------*/
  
  .price p {
    margin-top: 20px;
    margin-bottom: 20px;
  }
  
  .pricing-section .btn-txt a {
    text-decoration: underline;
  }
  
  /*------------------------------------------*/
  /*  PRICING FEATURES
  /*------------------------------------------*/
  
  .pricing-2-table .pricing-features,
  .pricing-3-table .pricing-features {
    margin-top: 20px;
  }
  
  .pricing-features li {
    padding: 11px 8px;
  }
  
  .pricing-2-table .pricing-features li,
  .pricing-3-table .pricing-features li {
    padding: 9px 8px;
  }
  
  .pricing-features li p {
    line-height: 1;
    font-weight: 400;
    margin-bottom: 0;
  }
  
  .pricing-features li p span {
    position: relative;
    top: -2px;
    left: 5px;
  }
  
  .pricing-features.ico-10 li p span {
    top: 0;
    left: 4px;
  }
  
  .pricing-features.ico--blue span { color: var(--blue); }
  .pricing-features.ico--green span { color: var(--green); }
  .pricing-features.ico--indigo span { color: var(--indigo); }
  .pricing-features.ico--orchid span { color: var(--orchid); }
  .pricing-features.ico--pink span { color: var(--pink); }
  .pricing-features.ico--purple span { color: var(--purple); }
  .pricing-features.ico--red span { color: var(--red); }
  .pricing-features.ico--skyblue span { color: var(--sky-blue); }
  .pricing-features.ico--violet-red span { color: var(--violet-red); }
  
  .pricing-features.ico-5 [class*="flaticon-"]:before, 
  .pricing-features.ico-5 [class*="flaticon-"]:after { font-size: 0.5rem; }
  
  .pricing-features li.disabled-option p,
  .pricing-features li.disabled-option span {
    color: var(--disable)!important;
  }
  
  /*------------------------------------------*/
  /*  PRICING TABLE BUTTON
  /*------------------------------------------*/
  
  .pt-btn {
    display: block;
    width: 100%;
    margin-top: 25px;
  }
  
  .p-table p.btn-txt {
    margin: 14px 0 0 0;
  }
  
  /*------------------------------------------*/
  /*  PRICING TOGGLE BUTTON
  /*------------------------------------------*/
  
  .ext-toggle-btn {
    text-align: center;
  }
  
  .toggle-btn.inn-toggle-btn {
    position: absolute;
  }
  
  /*------------------------------------------*/
  /*  TOGGLE BUTTON TYPOGRAPHY
  /*------------------------------------------*/
  
  .toggler-txt {
    font-size: 1.15rem;
    font-weight: 500;
    line-height: 36px;
  }
  
  .toggle-btn p {
    margin-top: 12px;
    letter-spacing: -0.25px;
    margin-bottom: 0;
  }
  
  /*------------------------------------------*/
  /*  TOGGLE BUTTON SWITCHER
  /*------------------------------------------*/
  
  .switch-wrap {
    position: relative;
    display: inline-block;
    vertical-align: middle;
    min-width: 60px;
    height: 36px;
    margin: 0 8px;
  }
  
  .switcher {
    display: block;
    cursor: pointer;
    color: var(--white);
    font-size: 0.925rem;
    font-weight: 500;
    height: 36px;
    padding: 0 40px 0 20px;
    position: relative;
    border-radius: 36px;
    -webkit-transition: all 450ms ease-in-out;
    -moz-transition: all 450ms ease-in-out;
    -o-transition: all 450ms ease-in-out;
    -ms-transition: all 450ms ease-in-out;
    transition: all 450ms ease-in-out;
  }
  
  .theme--blue .switcher { background-color: var(--blue); }
  .theme--green .switcher { background-color: var(--green); }
  .theme--indigo .switcher { background-color: var(--indigo);}
  .theme--orchid .switcher { background-color: var(--orchid); }
  .theme--pink .switcher { background-color: var(--pink); }
  .theme--purple .switcher { background-color: var(--purple); }
  .theme--red .switcher { background-color: var(--red); }
  .theme--skyblue .switcher { background-color: var(--sky-blue); }
  .theme--violet-red .switcher { background-color: var(--violet-red); }
  
  .switcher .show-annual, 
  .switcher .show-monthly {
    line-height: 36px;
  }
  
  .switcher .show-monthly {
    display: block;
  }
  
  .switcher .show-annual {
    display: none;
  }
  
  .switcher:before {
    position: absolute;
    right: 5px;
    bottom: 4px;
    content: " ";
    background-color: var(--white);
    width: 28px;
    height: 28px;
    border-radius: 50%;
    -webkit-transition: all 450ms ease-in-out;
    -moz-transition: all 450ms ease-in-out;
    -o-transition: all 450ms ease-in-out;
    -ms-transition: all 450ms ease-in-out;
    transition: all 450ms ease-in-out;
  }
  
  .switch-wrap input {
    display: none;
  }
  
  .switch-wrap input:checked + .switcher {
    padding: 0 20px 0 40px;
  }
  
  .switch-wrap input:checked + .switcher:before {
    right: auto;
    left: 4px;
    -webkit-transition: all 350ms ease-in-out;
    -moz-transition: all 350ms ease-in-out;
    -o-transition: all 350ms ease-in-out;
    -ms-transition: all 350ms ease-in-out;
    transition: all 350ms ease-in-out;
  }
  
  .switch-wrap input:checked + .switcher .show-annual {
    display: block;
  }
  
  .switch-wrap input:checked + .switcher .show-monthly {
    display: none;
  }
  
  /*------------------------------------------*/
  /*  PRICING NOTICE TEXT
  /*------------------------------------------*/
  
  .pricing-notice {
    text-align: center;
    margin-top: 20px;
  }
  
  .pricing-notice p {
    padding: 0 5%;
    margin-bottom: 0;
  }
  
  .pricing-notice p span {
    font-weight: 600;
  }
  
  /*------------------------------------------*/
  /*  COMPARE PRICING TABLE
  /*------------------------------------------*/
  
  .table>:not(caption)>*>* {
    padding: 17px 0;
    border: none!important;
    background-color: transparent!important;
  }
  
  .comp-table .pricing-header {
    max-width: 700px;
  }
  
  .comp-table .table thead tr,
  .comp-table .table tbody tr {
    border-bottom: 1px solid var(--silver)!important;
  }
  
  .comp-table .table tbody tr.table-last-tr {
    border-bottom: none!important;
  }
  
  .comp-table .table-responsive thead th {
    font-size: 1.0625rem;
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-weight: 700;
  }
  
  .comp-table .table-responsive tbody th {
    font-size: 0.95rem;
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-weight: 700;
  }
  
  .comp-table .table-responsive tbody td {
    position: relative;
    font-size: 0.95rem;
    line-height: inherit;
    top: 1px;
  }
  
  .comp-table .table-responsive tbody td span {
    position: relative;
    top: 1px;
  }
  
  .table>:not(caption)>*>* {
    color: var(--header-color);
  }
  
  .table-responsive .ico-15 [class*="flaticon-"]:before, 
  .table-responsive .ico-15 [class*="flaticon-"]:after { font-size: 0.7rem; }
  
  .table-responsive .ico-20 [class*="flaticon-"]:before, 
  .table-responsive .ico-20 [class*="flaticon-"]:after { font-size: 0.9rem; }
  
  .comp-table .disabled-option { color: var(--light-gray); }
  .comp-table .color--blue { color: var(--blue); }
  .comp-table .color--green { color: var(--green); }
  .comp-table .color--indigo { color: var(--indigo); }
  .comp-table .color--orchid { color: var(--orchid); }
  .comp-table .color--purple { color: var(--purple); }
  .comp-table .color--red { color: var(--red); }
  .comp-table .color--sky { color: var(--sky); }
  .comp-table .color--skyblue { color: var(--sky-blue); }
  .comp-table .color--violet-red { color: var(--violet-red); }
  
  /*------------------------------------------*/
  /*  PRICING COMPARE PAYMENT
  /*------------------------------------------*/
  
  .comp-table-payment h6 {
    margin-bottom: 16px;
  }
  
  .comp-table-payment p {
    margin-bottom: 0;
  }
  
  
  
  
  /* ==========================================================================
    16. INTEGRATIONS
    =========================================================================== */
  
  .int-1-wrapper {
    padding: 80px 70px;
  }
  
  .int-2-wrapper {
    padding: 0 3%;
  }
  
  .integrations-3 { 
    margin-bottom: -22px; 
  }
  
  /*------------------------------------------*/
  /*  FILTER BUTTONS
  /*------------------------------------------*/ 
  
  .filter-btns button {
    background-color: transparent; 
    font-family: 'Plus Jakarta Sans', sans-serif;
    color: var(--black);
    font-size: 1.0625rem;
    line-height: 1;
    font-weight: 600;
    margin: 0 14px;
    padding: 0.5rem 0.1rem;
    border: none;
    cursor: pointer;
    border-bottom: 3px solid transparent;
    outline: 0px none;
    -webkit-transition: all 400ms ease-in-out;
    -moz-transition: all 400ms ease-in-out;
    -o-transition: all 400ms ease-in-out;
    -ms-transition: all 400ms ease-in-out;
    transition: all 400ms ease-in-out;
  }
  
  /*------------------------------------------*/
  /*  Filter Button Active
  /*------------------------------------------*/ 
  
  .filter-btns button.is-checked {
    color: var(--blue);
    cursor: default;
    border-color: var(--blue);
    outline: 0px none;
  }
  
  .theme--blue .filter-btns button.is-checked { color: var(--blue); border-color: var(--blue); }
  .theme--green .filter-btns button.is-checked { color: var(--green); border-color: var(--green); }
  .theme--indigo .filter-btns button.is-checked { color: var(--indigo); border-color: var(--indigo); }
  .theme--orchid .filter-btns button.is-checked { color: var(--orchid); border-color: var(--orchid); }
  .theme--pink .filter-btns button.is-checked { color: var(--pink); border-color: var(--pink); }
  .theme--purple .filter-btns button.is-checked { color: var(--purple); border-color: var(--purple); }
  .theme--red .filter-btns button.is-checked { color: var(--red); border-color: var(--red); }
  .theme--skyblue .filter-btns button.is-checked { color: var(--sky-blue); border-color: var(--sky-blue); }
  .theme--violet-red .filter-btns button.is-checked { color: var(--violet-red); border-color: var(--violet-red); }
  
  /*------------------------------------------*/
  /*  FILTER ITEM
  /*------------------------------------------*/ 
  
  .integrations-3 .filter-item {
    position: relative;
    width: 33.33%;
    padding: 0 10px;
    margin-bottom: 22px;
  }
  
  /*------------------------------------------*/
  /*  INTEGRATION TOOL
  /*------------------------------------------*/ 
  
  .int_tool-1 {
    display: block;
    margin-bottom: 40px;
  }
  
  .int_tool-2 {
    text-align: center;
    vertical-align: center;
    background-color: var(--white);
    border: 1px solid var(--silver);
    padding: 25px 20px;
    margin-bottom: 30px;
    -webkit-transition: all 400ms ease-in-out;
    -moz-transition: all 400ms ease-in-out;
    -o-transition: all 400ms ease-in-out;
    -ms-transition: all 400ms ease-in-out;
    transition: all 400ms ease-in-out;
  }
  
  .int_tool-3 {
    background-color: var(--white);
    padding: 20px 26px 22px;
    border: 1px solid var(--silver);
    -webkit-transition: all 400ms ease-in-out;
    -moz-transition: all 400ms ease-in-out;
    -o-transition: all 400ms ease-in-out;
    -ms-transition: all 400ms ease-in-out;
    transition: all 400ms ease-in-out;
  }
  
  /*------------------------------------------*/
  /*  INTEGRATION TOOL LOGO
  /*------------------------------------------*/ 
  
  .int_tool-1 .tool_logo {
    border: 1.5px solid transparent;
    padding: 35px 25px;
    margin-bottom: 30px;
  }
  
  .int_tool-1 img {
    width: 65px;
    height: 65px;
  }
  
  .int_tool-2 img {
    width: 60px;
    height: 60px;
  }
  
  .int_tool-3 img {
    width: 40px;
    height: 40px;
  }
  
  /*------------------------------------------*/
  /*  INTEGRATION TOOL TEXT
  /*------------------------------------------*/ 
  
  .tool_txt {
    overflow: hidden;
    flex: 1;
    max-width: 100%;
  }
  
  /*------------------------------------------*/
  /*  INTEGRATION TOOL TYPOGRAPHY
  /*------------------------------------------*/ 
  
  .tool_txt h6 {
    font-size: 1.1875rem;
    margin-top: 2px;
  }
  
  .tool_logo h6 {
    position: relative;
    display: inline-block;
    line-height: 40px;
    top: 3px;
    margin-right: 10px;
  }
  
  .int_tool-1 h6 {
    line-height: 1;
    margin-bottom: 0;
  }
  
  .int_tool-2 h6 {
    font-size: 0.925rem;
    line-height: 1;
    margin-top: 18px;
  }
  
  .tool_txt p {
    margin-top: 3px;
    margin-bottom: 0;
  }
  
  .tool_description p {
    font-size: 0.95rem;
    margin-top: 14px;
    margin-bottom: 0;
  }
  
  /*------------------------------------------*/
  /*  INTEGRATION TOOL HOVER
  /*------------------------------------------*/ 
  
  .int_tool-2:hover,
  .int_tool-3:hover {
    border-color: transparent;
    -webkit-box-shadow: 0 4px 12px 0 var(--tra-black);
    -moz-box-shadow: 0 4px 12px 0 var(--tra-black);
    box-shadow: 0 4px 12px 0 var(--tra-black);
  } 
  
  /*------------------------------------------*/
  /*  INTEGRATION MORE BUTTON
  /*------------------------------------------*/ 
  
  .integrations-1 .more-btn {
    margin-top: 15px;
  }
  
  
  
  
  /* ==========================================================================
    17. MORE APPS
    =========================================================================== */
  
  .apps-1-wrapper {
    padding: 0 5%;
  }
  
  .app-box {
    display: block;
  }
  
  .rows-2 .ab-1, .rows-2 .ab-2, .rows-2 .ab-3, .rows-2 .ab-4 {
    margin-bottom: 50px;
  }
  
  /*------------------------------------------*/
  /*  MORE APPS TYPOGRAPHY
  /*------------------------------------------*/
  
  .app-box h6,
  .app-box h5 {
    line-height: 1;
    margin-top: 30px;
    margin-bottom: 12px;
  }
  
  .app-box p.app-cat {
    color: var(--gray);
    line-height: 1;
    margin-bottom: 0;
  }
  
  .app-logo-img {
    padding: 0 10%;
  }
  
  
  
  
  /* ==========================================================================
    18. BRANDS
    =========================================================================== */
  
  /*------------------------------------------*/
  /*  BRANDS SECTION TITLE
  /*------------------------------------------*/ 
  
  .brands-title {
    text-align: center;
  }
  
  .brands-title h6,
  .brands-title h5 {
    margin-bottom: 50px;
  }
  
  .brands-title p {
    margin-bottom: 55px;
  }
  
  /*------------------------------------------*/
  /*  BRANDS LOGO IMAGE
  /*------------------------------------------*/ 
  
  .brand-logo {
    overflow: hidden;
    position: relative;
    top: 0;
    -webkit-transition: all 400ms ease-in-out;
    -moz-transition: all 400ms ease-in-out;
    -o-transition: all 400ms ease-in-out;
    -ms-transition: all 400ms ease-in-out;
    transition: all 400ms ease-in-out;
  } 
  
  .brands-carousel-5 .brand-logo {
    padding: 0 25px;
  } 
  
  .brands-carousel-6 .brand-logo {
    padding: 0 16px;
  }
  
  .brands-2-wrapper .row-cols-md-6 .brand-logo {
    padding: 0 5px;
  }
  
  .brands-section .more-btn {
    text-align: center;
    margin-top: 35px;
  }
  
  .brands-section .owl-dots {
    display: none;
  }
  
  
  
  
  /* ==========================================================================
    19.CHANGELOG
    =========================================================================== */
  
  .version-release {
    margin-bottom: 80px;
  }
  
  .version-release:last-child {
    margin-bottom: 0;
  }
  
  .release-data {
    padding-bottom: 30px;
    border-bottom: 1px dashed var(--silver);
    margin-bottom: 30px;
  }
  
  span.version-data {
    display: block;
    color: var(--header-color);
    font-size: 1.5rem;
    line-height: 1;
    font-weight: 600;
    margin-bottom: 15px;
  }
  
  span.release-date {
    display: block;
    color: var(--gray);
    font-size: 0.975rem;
    line-height: 1;
    margin-bottom: 0;
  }
  
  span.release-date span {
    color: var(--header-color);
    font-weight: 500;
  }
  
  .release-highlights h6 {
    margin-bottom: 16px;
  }
  
  .release-highlights .simple-list p {
    margin-bottom: 2px;
  }
  
  .release-highlights p b {
    color: var(--header-color);
  }
  
  .release-preview {
    margin-bottom: 30px;
  }
  
  
  
  
  /* ==========================================================================
    20.DOWNLOAD
    =========================================================================== */
  
  .download-item {
    display: block;
    text-align: center;
    padding: 45px 40px 35px;
    border: 1.5px solid transparent;
  }
  
  .download-item img {
    width: auto;
    max-width: inherit;
    max-height: 64px;
    margin-bottom: 25px;
  }
  
  .download-item h6 {
    line-height: 1;
  }
  
  .download-item p {
    font-size: 0.975rem;
    margin: 6px 0 0;
  }
  
  
  
  
  /* ==========================================================================
    21. FAQS
    =========================================================================== */
  
  /*------------------------------------------*/
  /*  FAQs-3 TITLE
  /*------------------------------------------*/
  
  .faq-3-title {
    margin-top: 20px;
  }
  
  .faq-3-title p {
    font-size: 1.0725rem;
    padding-left: 3%;
    margin-top: 18px;
    margin-bottom: 28px;
  }
  
  /*------------------------------------------*/
  /*  FAQs QUESTION
  /*------------------------------------------*/
  
  .faqs-2 .question {
    margin-bottom: 30px;
  }
  
  .faqs-2-questions .left-column {
    padding-left: 15px;
  }
  
  .faqs-2-questions .right-column {
    padding-right: 15px;
  }
  
  /*------------------------------------------*/
  /*  FAQs TYPOGRAPHY
  /*------------------------------------------*/
  
  
  .faqs-2 .question h6,
  .faqs-2 .question h5 {
    line-height: 1.5;
    padding-left: 5%;
    margin-bottom: 15px;
  }
  
  .faqs-3-question h5 {
    line-height: 1.5;
    margin-bottom: 20px;
  }
  
  .faqs-1 .accordion-item p,
  .faqs-3 .accordion-item p {
   color: var(--gray);
  }
  
  /*------------------------------------------*/
  /*  FAQS ACCORDION  
  /*------------------------------------------*/
  
  .faqs-section .accordion-item {
    background-color: transparent!important;
    border: none;
    border-bottom: 1px solid var(--silver);
  }
  
  .faqs-3.faqs-section .accordion-item {
    border-bottom: 1px solid var(--silver);
  }
  
  .faqs-section .accordion-item.acc-last-item,
  .faqs-3.faqs-section .accordion-item.acc-last-item {
    border-bottom: none;
  }
  
  /*------------------------------------------*/
  /*  Question
  /*------------------------------------------*/
  
  .faqs-section .accordion-thumb {
    margin: 0;
    padding: 25px 0;
    cursor: pointer;
    position: relative;
  }
  
  .faqs-section .accordion-item .accordion-thumb:after,
  .faqs-section .accordion-item.is-active .accordion-thumb:after {
    font-family: Flaticon;
    font-weight: 300; 
    content: "\f146";
    position: absolute;
    top: 22px;
    left: 0;
    text-align: center;
    background-color: var(--white-smoke);
    width: 34px;
    height: 34px;
    color: var(--header-color);
    font-size: 0.75rem;
    line-height: 34px;
    -webkit-border-radius: 100%;
    -moz-border-radius: 100%;
    -o-border-radius: 100%;
    border-radius: 100%;
    -webkit-transition: all 200ms ease-in-out;
    -moz-transition: all 200ms ease-in-out;
    -o-transition: all 200ms ease-in-out;
    -ms-transition: all 200ms ease-in-out;
    transition: all 200ms ease-in-out; 
  }
  
  .faqs-section .accordion-item.is-active .accordion-thumb:after {
    transform: rotate(-45deg);
  }
  
  /*------------------------------------------*/
  /*  Answer
  /*------------------------------------------*/
  
  .faqs-section .accordion-panel {
    margin: 0;
    padding: 0 0 15px 0;
    display: none;
  }
  
  .faqs-section .accordion-thumb h5 {
    line-height: 1;
    margin-bottom: 0;
  }
  
  /*------------------------------------------*/
  /*  MORE QUESTIONS BUTTON
  /*------------------------------------------*/ 
  
  .more-questions {
    text-align: center;
    margin-top: 80px;
  }
  
  .faqs-2 .more-questions {
    margin-top: 50px;
  }
  
  .more-questions-holder {
    display: inline-block;
    margin: 0 auto;
  }
  
  .more-questions-txt {
    text-align: right!important;
    display: inline-block;
    float: right;
  }
  
  .more-questions-txt h6 {
    margin-bottom: 3px;
  }
  
  .more-questions-txt p {
    margin-bottom: 0;
  }
  
  .more-questions-btn {
    display: inline-block;
    margin-right: 30px;
  }
  
  
  
  
  /* ==========================================================================
    22. BANNER
    =========================================================================== */
  
  .banner-1-wrapper {
    overflow: hidden;
    padding: 90px 75px 95px;
  }
  
  .banner-2-wrapper {
    position: relative;
    overflow: hidden;
    text-align: center;
  } 
  
  .banner-2-wrapper .banner-overlay {
    padding: 85px 70px 95px;
  }
  
  .banner-4-wrapper {
    overflow: hidden;
    padding: 55px 60px;
    border: 1.5px solid transparent;
  }
  
  .banner-5 {
    overflow: hidden;
    padding-top: 50px;
  }
  
  .banner-5-wrapper .banner-overlay {
    padding: 0 75px;
  }
  
  /*------------------------------------------*/
  /*  BANNER TYPOGRAPHY
  /*------------------------------------------*/
  
  .banner-section .section-id {
    font-weight: 600;
    padding-top: 10px;
    margin-bottom: 30px;
  }
  
  .banner-2-txt h2 {
    padding: 0 4%;
  }
  
  .banner-4-txt h4.h4-md {
    line-height: 1.35;
    padding-left: 3%;
  }
  
  .banner-1-txt p.p-md,
  .banner-1-txt p.p-lg {
    padding-left: 10%;
    margin: 22px 0 28px;
  }
  
  .banner-2-txt p.p-lg,
  .banner-2-txt p.p-xl {
    padding: 0 2%;
    margin: 20px 0 28px;
  }
  
  .banner-3-txt p.p-lg,
  .banner-3-txt p.p-xl {
    margin-top: 22px;
    margin-bottom: 0;
  }
  
  .banner-5-txt p.p-md,
  .banner-5-txt p.p-lg {
    margin-top: 25px;
    margin-bottom: 30px;
  }
  
  /*------------------------------------------*/
  /*  BANNER BUTTON
  /*------------------------------------------*/
  
  .banner-4-btn {
    position: relative;
    display: inline-block;
    margin: 0 auto;
    top: 10px;
  }
  
  .banner-4-btn p {
    margin: 12px 0 0;
  }
  
  .banner-section p.btn-txt {
    margin-top: 20px;
    margin-bottom: 0;
  }
  
  /*------------------------------------------*/
  /*  BANNER IMAGE
  /*------------------------------------------*/
  
  .banner-5-img.right-column {
    margin-top: -40px;
    padding-right: 25px;
  }
  
  .banner-5-img.left-column {
    margin-top: -40px;
    padding-left: 25px;
  }
  
  /*------------------------------------------*/
  /*  BANNER QR CODE
  /*------------------------------------------*/
  
  .banner-qr-code {
    position: absolute;
    bottom: 0;
    left: 55px;
    max-width: 110px;
    text-align: center;
    background: var(--white);
    padding: 14px 10px 10px;
    border-radius: 12px 12px 0 0;
  }
  
  .banner-qr-code img {
   padding: 0 4%;
  }
  
  .banner-qr-code p {
    font-size: 0.8rem;
    line-height: 1.35;
    margin: 10px 0 0;
  }
  
  
  
  
  /* ==========================================================================
    23. BLOG
    =========================================================================== */
  
  .blog-1 .blog-post {
    margin-bottom: 40px;
  }
  
  /*------------------------------------------*/
  /*  BLOG POST IMAGE
  /*------------------------------------------*/ 
  
  .blog-post-img {
    overflow: hidden;
    text-align: center;
  }
  
  /*------------------------------------------*/
  /*  BLOG POST TEXT
  /*------------------------------------------*/ 
  
  .blog-post-txt {
    margin-top: 35px;
    padding-right: 5px;
    padding-left: 5px;
  }
  
  /*------------------------------------------*/
  /*  BLOG POST TYPOGRAPHY
  /*------------------------------------------*/ 
  
  .post-tag {
    display: block;
    font-size: 0.75rem;
    line-height: 1;
    font-weight: 600;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    margin-bottom: 15px;
  }
  
  .blog-post-txt h6,
  .blog-post-txt h5 {
    line-height: 1.35;
    margin-bottom: 10px;
  }
  
  .blog-post-txt h4 {
    line-height: 1.35;
    margin-bottom: 20px;
  }
  
  .blog-post-txt p {
    margin-bottom: 0;
  }
  
  /*------------------------------------------*/
  /*  BLOG POST META
  /*------------------------------------------*/
  
  .blog-post-meta {
    margin-top: 18px;
    margin-bottom: 0;
  }
  
  .wide-post .blog-post-meta {
    margin-top: 25px;
    margin-bottom: 0;
  }
  
  .post-meta-list li {
    width: auto!important;
    display: inline-block!important;
    vertical-align: top;
    clear: none !important;
  }
  
  .post-meta-list p {
    line-height: 1;
    margin-bottom: 0;
  }
  
  .meta-list-divider {
    position: relative;
    top: 0px;
    transform: rotate(90deg);
    padding: 0 1px;
  }
  
  
  
  
  /* ==========================================================================
    24. BLOG LISTING
    =========================================================================== */
  
  #blog-page .blog-post {
    margin-bottom: 60px;
  }
  
  /*------------------------------------------*/
  /*  WIDE BLOG POSTS
  /*------------------------------------------*/
  
  #blog-page .blog-post.wide-post {
    margin-bottom: 60px;
  }
  
  .wide-post .blog-post-img {
    margin-left: 15px;
  }
  
  .wide-post .blog-post-txt {
    margin-top: 0;
    margin-right: 15px;
  }
  
  /*------------------------------------------*/
  /*  BLOG POSTS CATEGORY
  /*------------------------------------------*/
  
  .posts-category {
    margin-top: 40px;
    margin-bottom: 50px;
  }
  
  .posts-category h4 {
    line-height: 1;
    margin-bottom: 0;
  }
  
  .posts-category span {
    position: relative;
    top: 1px;
  }
  
  
  
  
  /* ==========================================================================
    25. SINGLE BLOG POST
    =========================================================================== */
  
  .blog-post-preview {
    padding: 0 3%;
    margin-bottom: 50px;
  }
  
  /*------------------------------------------*/
  /*  Single Post Title
  /*------------------------------------------*/
  
  .single-post-title {
    padding: 0 8% 0 10%;
    margin-bottom: 50px;
  }
  
  .single-post-title .blog-post-meta {
    margin-bottom: 25px;
  }
  
  .single-post-title h2 {
    margin-bottom: 25px;
  }
  
  /*------------------------------------------*/
  /*  Single Post Text
  /*------------------------------------------*/
  
  .single-post-txt {
    padding: 0 8%;
  }
  
  .single-post-txt h6 {
    margin-bottom: 16px;
  }
  
  .single-post-txt h5.h5-xl {
    margin-top: 60px;
    margin-bottom: 25px;
  }
  
  .single-post-txt h5 {
    margin-top: 30px;
    margin-bottom: 25px;
  }
  
  .single-post-txt p span {
    color: var(--black);
    font-weight: 600;
  }
  
  .single-post-txt p a {
    color: var(--theme-color);
    font-weight: 600;
    text-decoration: underline;
  }
  
  .single-post-txt p a:hover {
    color: var(--black);
  }
  
  /*------------------------------------------*/
  /*  Single Post Image
  /*------------------------------------------*/
  
  .post-inner-img {
    text-align: center;
    margin-top: 60px;
    margin-bottom: 60px;
  }
  
  /*------------------------------------------*/
  /*  POST DATA
  /*------------------------------------------*/ 
  
  .post-data {
    margin: 60px 5% 0;
    padding: 60px 3% 100px;
  }
  
  /*------------------------------------------*/
  /*  POST AUTHOR
  /*------------------------------------------*/ 
  
  .post-author-avatar {
    margin: 0 auto; 
    float: right;
    margin-left: 20px;
  }
  
  .post-author-avatar img {
    width: 70px;
    height: 70px;
    -webkit-border-radius: 100%;
    -moz-border-radius: 100%;
    -o-border-radius: 100%;
    border-radius: 100%;
  }
  
  .post-author-txt {
    position: relative;
    top: 8px;
  }
  
  .post-author-txt p {
    line-height: 1;
    margin-top: 8px;
    margin-bottom: 0;
  }
  
  .post-author-txt p a {
    color: var(--black);
    font-weight: 500;
  }
  
  /*------------------------------------------*/
  /*  POST SHARE ICONS
  /*-----------------------------------------*/
  
  .post-share-list p {
    margin-bottom: 12px;
  }
  
  .share-social-icons {
    display: inline-block; 
    padding-right: 0;
  }
  
  .share-social-icons li {
    width: auto !important;
    display: inline-block !important;
    vertical-align: top;
    clear: none !important;
    padding: 0;
  }
  
  .share-social-icons.ico-25 [class*="flaticon-"]:before, 
  .share-social-icons.ico-25 [class*="flaticon-"]:after { font-size: 1.4rem; }
  
  .share-social-icons a.share-ico span {
    color: var(--gray);
    opacity: .6;
    margin-right: 10px;
    -webkit-transition: all 450ms ease-in-out;
    -moz-transition: all 450ms ease-in-out;
    -o-transition: all 450ms ease-in-out;
    -ms-transition: all 450ms ease-in-out;
    transition: all 450ms ease-in-out;
  }
  
  .share-social-icons a.share-ico:hover span {
    opacity: 1;
  }
  
  
  
  
  /* ==========================================================================
    26. NEWSLETTER
    =========================================================================== */
  
  .newsletter-1 .newsletter-overlay,
  .newsletter-4 .newsletter-overlay {
    padding: 70px 0;
  } 
  
  .newsletter-2 .newsletter-overlay {
    padding: 80px 0 70px;
  } 
  
  .newsletter-3 .container {
    padding-right: 0;
    padding-left: 0;
  }
  
  .newsletter-3 .newsletter-overlay {
    padding: 60px 50px;
  }
  
  /*------------------------------------------*/
  /*  NEWSLETTER TYPOGRAPHY
  /*------------------------------------------*/ 
  
  .newsletter-txt h2 {
    margin-bottom: 35px;
  }
  
  .newsletter-txt h4,
  .newsletter-txt h3,
  .newsletter-txt p.p-sm {
    margin-bottom: 0;
  }
  
  .newsletter-txt a {
    font-weight: 500;
    text-decoration: underline;
  }
  
  .newsletter-2 .newsletter-txt p,
  .newsletter-4 .newsletter-txt p {
    padding: 0 10%;
  }
  
  /*------------------------------------------*/
  /*  NEWSLETTER FORM
  /*------------------------------------------*/ 
  
  .newsletter-1 .newsletter-form,
  .newsletter-3 .newsletter-form {
    margin-top: 30px;
    padding-right: 10%;
  }
  
  .newsletter-2 .newsletter-form,
  .newsletter-4 .newsletter-form {
    padding: 0 5%;
    margin-top: 40px;
  }
  
  /*------------------------------------------*/
  /*  Newsletter Form Input
  /*------------------------------------------*/
  
  .newsletter-section .form-control {
    height: 58px;
    background-color: var(--white);
    border: 1.5px solid var(--silver);
    font-size: 1rem;
    color: var(--gray);
    font-weight: 400;
    padding: 0 15px;  
    margin-left: 12px;
    box-shadow: none;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    -o-border-radius: 6px;
    border-radius: 6px;
  }
  
  .newsletter-2.newsletter-section .form-control {
    border: none;
  }
  
  .input-group:not(.has-validation)>:not(:last-child):not(.dropdown-toggle):not(.dropdown-menu):not(.form-floating) {
    border-top-left-radius: 6px;
    border-bottom-left-radius: 6px;
  }
  
  /*------------------------------------------*/
  /*  Newsletter Form Input Focus
  /*------------------------------------------*/
  
  .newsletter-section .form-control:focus {
    background-color: var(--white);
    outline: 0;
    box-shadow: none;
  }
  
  /*------------------------------------------*/
  /*  Newsletter Form Input Placeholder
  /*------------------------------------------*/
  
  .newsletter-section .form-control::-moz-placeholder { color: var(--light-gray); } 
  .newsletter-section .form-control:-ms-input-placeholder { color: var(--light-gray); } 
  .newsletter-section .form-control::-webkit-input-placeholder { color: var(--light-gray); } 
  
  /*------------------------------------------*/
  /*  Newsletter Form Button
  /*------------------------------------------*/
  
  .newsletter-section .btn {
    display: block; 
    width: 100%!important;
    height: 58px;
    font-size: 0.925rem;
    padding: 0.7rem 1.3rem;
  }
  
  .newsletter-2.newsletter-section .btn {
    font-size: 0.975rem;
    padding: 0.7rem 1.5rem;
  }
  
  /*------------------------------------------*/
  /*  Newsletter Form Notification
  /*------------------------------------------*/
  
  .newsletter-section .form-notification {
    color: #3eb1ff;
    font-size: 0.9rem;
    font-weight: 400;
    line-height: 1;
    margin-top: 15px;
    margin-right: 5px;
  }
  
  .newsletter-section .text-center .form-notification {
    margin-right: 0;
  }
  
  .newsletter-section .form-notification.valid,
  .newsletter-section .form-notification.error {
    color: #fc2f4b;
  }
  
  .newsletter-section .newsletter-form.valid {
    color: #0fbc49;
  }
  
  
  
  
  /* ==========================================================================
    27. CONTACTS
    =========================================================================== */
  
  .contacts-info {
    margin-top: 10px;
  }
  
  .contacts-info p {
    padding-left: 3%;
    margin-top: 25px;
    margin-bottom: 30px;
  }
  
  .contacts-1 .contact-form p {
    color: var(--header-color);
    font-size: 0.95rem;
    line-height: 1;
    font-weight: 600;
    margin-bottom: 16px;
    padding-right: 8px;
  }
  
  .contacts-1 .contact-form .contact-form-notice p {
    font-size: 0.835rem;
    font-weight: 300;
    line-height: 1.6;
    padding-right: 0;
    margin-top: 35px;
    margin-bottom: 10px;
  }
  
  .contact-form-notice p a {
    color: var(--header-color);
    font-weight: 600;
    text-decoration: underline;
  }
  
  /*------------------------------------------*/
  /*  CONTACT FORM INPUT
  /*------------------------------------------*/
  
  .contact-form .form-control,
  .contact-form .form-select {
    height: 60px;
    background-color: #fdfdfe;
    border: 1.5px solid #d5d5d5;
    box-shadow: 0 0 0 0;
    color: #3a4a56;
    font-size: 1rem;
    font-weight: 400;
    padding: 0 20px;
    margin-bottom: 35px;
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    border-radius: 8px;
  }
  
  .contact-form .form-select {
    display: inline-block;
    width: 100%;
    color: var(--gray);
    box-shadow: none;
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    border-radius: 8px;
  }
  
  /*------------------------------------------*/
  /*  Contact Form Textarea
  /*------------------------------------------*/
  
  .contact-form textarea { min-height: 190px; }
  .contact-form textarea.form-control { 
    padding: 20px;
  }
  
  /*------------------------------------------*/
  /*  Contact Form Placeholder
  /*------------------------------------------*/
  
  .contact-form .form-control::-moz-placeholder { color: var(--gray); } 
  .contact-form .form-control:-ms-input-placeholder { color: var(--gray); } 
  .contact-form .form-control::-webkit-input-placeholder { color: var(--gray); } 
  
  /*------------------------------------------*/
  /*  Contact Form Input Focus
  /*------------------------------------------*/
  
  .contact-form .form-control:focus,
  .contact-form .form-select:focus {
    outline: 0px none;
    box-shadow: none;
    background-color: var(--white);
  }
  
  /*------------------------------------------*/
  /*  Contact Form Message
  /*------------------------------------------*/
  
  .contact-form-msg {
    width: 100%!important;
    display: block;
    margin-top: 20px;
    padding-right: 0;
  }
  
  .contact-form .loading {
    color: #00b2e4;
    font-size: 1.0625rem;
    line-height: 1;
    font-weight: 500;
    padding-right: 15px;
  }
  
  .contact-form  .error {
    color: #e74c3c;
    font-size: 0.85rem;
    line-height: 1;
    font-weight: 400;
    margin-bottom: 10px;
    padding-right: 10px;
  }
  
  
  
  
  /* ==========================================================================
    28. FOOTER
    =========================================================================== */
  
  .footer {
    padding-bottom: 40px;
  }
  
  .footer-data-logo,
  .footer-data-socials {
    margin-bottom: 65px;
  }
  
  .footer-info,
  .footer-links {
    margin-bottom: 40px;
    display: flex;
    justify-content: center;
  
  }
  
  
  /*------------------------------------------*/
  /*  FOOTER LINKS MOBILE
  /*------------------------------------------*/
  
  .footer h6.m-title {
    display: none;
    position: relative;
  }
  
  .footer h6.m-title:after {
    font-family: Flaticon;
    font-weight: 300; 
    content: "\f14f";
    position: absolute;
    font-size: 0.9rem;
    top: 5px;
    left: 5px;
  }
  
  .footer h6.m-title.expanded:after {
    content: "\f14e";
  }
  
  /*------------------------------------------*/
  /*  FOOTER LOGO
  /*------------------------------------------*/
  
  img.footer-logo {
    width: auto;
    max-width: inherit;
    max-height: 32px;
    margin-bottom: 25px;
  }
  
  .footer-data-logo img.footer-logo {
    max-height: 35px;
    margin-bottom: 0;
  }
  
  .footer-copyright-logo {
    position: relative;
    display: inline-block;
    float: right;
    top: -4px;
  }
  
  .footer-copyright-logo img.footer-logo {
    max-height: 28px;
    margin-bottom: 0;
  }
  
  /*------------------------------------------*/
  /*  BANNER QR CODE
  /*------------------------------------------*/
  
  .footer-qr-code {
    max-width: 100px;
    text-align: center;
    background: var(--snow);
    padding: 9px;
  }
  
  /*------------------------------------------*/
  /*  FOOTER TYPOGRAPHY
  /*------------------------------------------*/
  
  .footer h6 {
    font-size: 1.0815rem;
    line-height: 1;
    margin-bottom: 26px;
  }
  
  .footer .footer-links h6.h6-lg {
    margin-bottom: 14px;
  }
  
  .footer a {
    color: var(--gray);
  }
  
  .footer.bg--black a {
    color: var(--snow);
  }
  
  .footer-contacts p {
    margin-bottom: 4px;
  }
  
  .footer-phone {
    margin-top: 12px;
    margin-bottom: 4px;
  }
  
  .footer .footer-links h6.h6-lg a {
    text-decoration: underline;
  }
  
  .footer.color--white a,
  .footer.color--white li a {
    color: var(--snow);
  }
  
  .footer.color--white a:hover,
  .footer.color--white li a:hover {
    color: var(--white)!important;
  }
  
  /*------------------------------------------*/
  /*  FOOTER MAIL LINK
  /*------------------------------------------*/
  
  .footer-mail-link {
    margin: 10px 3px 0 0;
  }
  
  .footer-mail-link a {
    font-size: 1rem;
    font-weight: 400;
  }
  
  .footer-mail-link span {
    position: relative;
    top: 5px;
    left: 5px;
  }
  
  .footer-mail-link.ico-20 [class*="flaticon-"]:before, 
  .footer-mail-link.ico-20 [class*="flaticon-"]:after { font-size: 1.175rem; }
  
  /*------------------------------------------*/
  /*  FOOTER INFO
  /*------------------------------------------*/
  
  .footer-info-socials {
    margin-top: 5px;
  }
  
  .footer-info-socials li {
    width: auto!important;
    display: inline-block!important;
    vertical-align: top;
    clear: none !important;
  }
  
  .footer-info-socials li {
    padding-left: 14px; 
  }
  
  .footer-2 .footer-info-socials li {
    padding-left: 10px; 
  }
  
  .footer-info-socials li span { 
    position: relative;
    opacity: .8;
    -webkit-transition: all 400ms ease-in-out;
    -moz-transition: all 400ms ease-in-out;
    -o-transition: all 400ms ease-in-out;
    -ms-transition: all 400ms ease-in-out;
    transition: all 400ms ease-in-out;
  }
  
  .footer-info-socials.ico-25 [class*="flaticon-"]:before, 
  .footer-info-socials.ico-25 [class*="flaticon-"]:after { font-size: 1.3rem; }
  
  .footer-info-socials li:hover span { 
    opacity: 1;
  }
  
  /*------------------------------------------*/
  /*  FOOTER LINKS
  /*------------------------------------------*/
  
  .foo-links li {
    width: auto!important;
    display: block!important;
    vertical-align: top;
    clear: none !important;
    margin: 0;
    padding: 0;
  }
  
  .foo-links.ico-10 li span {
    position: relative;
    top: 1.5px;
    left: 4px;
  }
  
  .foo-links li p {
    font-weight: 400;
    margin-bottom: 10px;
  }
  
  .foo-links li:last-child p {
    margin-bottom: 10px;
  }
  
  .foo-links li p a:hover{
    color: #EECE7B !important;
  }
  .d-title {
    color: #EECE7B !important;
  }
  .m-title {
    color: #EECE7B !important;
  }
  /*------------------------------------------*/
  /*  FOOTER SOCIAL
  /*------------------------------------------*/
  
  .footer-socials {
    margin: 0;
    display: inline-block; 
  }
  
  .footer-socials li {
    float: right;
    width: auto!important;
    display: inline-block!important;
    vertical-align: top;
    clear: none!important;
    margin: 0;
  }
  
  .footer-socials a {
    display: block;
    margin-left: 14px;
  }
  
  .footer-socials.ico-20 a,
  .footer-socials.ico-25 a { 
    margin-left: 15px; 
  } 
  
  .footer-socials li span { 
    opacity: .7;
    -webkit-transition: all 400ms ease-in-out;
    -moz-transition: all 400ms ease-in-out;
    -o-transition: all 400ms ease-in-out;
    -ms-transition: all 400ms ease-in-out;
    transition: all 400ms ease-in-out;
  }
  
  .footer-socials li span:hover { 
    opacity: 1;
  }
  
  .footer-socials.ico-25 [class*="flaticon-"]:before, 
  .footer-socials.ico-25 [class*="flaticon-"]:after { font-size: 1.35rem; }
  
  /*------------------------------------------*/
  /*  FOOTER STORE BAGES
  /*------------------------------------------*/
  
  .footer .store {
    float: none;
    margin-left: 0;
    margin-bottom: 15px;
  }
  
  /*------------------------------------------*/
  /*  FOOTER NEWSLETTER FORM
  /*------------------------------------------*/
  
  .footer-form {
    margin-bottom: 20px;
  }
  
  .footer .newsletter-form {
    margin-top: 25px;
  }
  
  .footer-form .newsletter-form .input-group {
    background-color: var(--form-control);
    border: 1.5px solid var(--smoke);
    padding: 9px 2px;
    -webkit-transition: all 400ms ease-in-out;
    -moz-transition: all 400ms ease-in-out;
    -o-transition: all 400ms ease-in-out;
    -ms-transition: all 400ms ease-in-out;
    transition: all 400ms ease-in-out;
  }
  
  .footer-form .form-control {
    height: 32px;
    background-color: transparent;
    border: none;
    color: var(--gray);
    font-size: 1rem;
    font-weight: 400;
    padding: 0 10px;
    box-shadow: none;
  }
  
  /*------------------------------------------*/
  /*  Newsletter Form Input Focus
  /*------------------------------------------*/
  
  .footer-form .newsletter-form .input-group:focus-within {
    background-color: var(--white)!important;
  }
  
  .footer-form .form-control:focus {
    border: none;
    border-left: none;
    outline: 0;
    box-shadow: none;
  }
  
  /*------------------------------------------*/
  /*  Footer Form Placeholder
  /*------------------------------------------*/
  
  .footer-form .form-control::-moz-placeholder { color: var(--gray); } 
  .footer-form .form-control:-ms-input-placeholder { color: var(--gray); } 
  .footer-form .form-control::-webkit-input-placeholder { color: var(--gray); } 
  
  /*------------------------------------------*/
  /*  Newsletter Form Button
  /*------------------------------------------*/
  
  .footer-form .btn {
    height: 32px;
    padding: 0 10px;
    border: none!important;
  }
  
  .footer-form .ico-15 [class*="flaticon-"]:before, 
  .footer-form .ico-15 [class*="flaticon-"]:after { line-height: 28px!important; }
  
  .footer-form .btn:hover {
    color: var(--black)!important;
  }
  
  .footer-form .btn:focus {
    border: none!important;
    outline: 0;
    box-shadow: none;
  }
  
  /*------------------------------------------*/
  /*  Footer Form Notification
  /*------------------------------------------*/
  
  .footer-form .form-notification {
    color: #1680fb;
    font-size: 0.85rem;
    line-height: 1.25;
    font-weight: 400;
    margin-top: 12px;
    margin-right: 5px;
  }
  
  .footer-form .form-notification.error {
    color: #fc2f4b;
  }
  
  .footer-form .form-notification.valid {
    color: #48af4b;
  }
  
  /*------------------------------------------*/
  /*  BOTTOM FOOTER
  /*------------------------------------------*/
  
  .footer hr {
    margin-top: 30px;
    margin-bottom: 40px;
  }
  
  .footer hr.footer-top-hr {
    margin-top: 0;
    margin-bottom: 100px;
  }
  
  /*------------------------------------------*/
  /*  BOTTOM FOOTER COPYRIGHT
  /*------------------------------------------*/
  
  .footer-copyright p {
    margin-bottom: 0;
  }
  
  .footer-copyright.copyright-logo p {
    display: inline-block;
    line-height: 28px;
    margin-right: 15px;
  }
  
  /*------------------------------------------*/
  /*  BOTTOM FOOTER SECONDARY LINK
  /*------------------------------------------*/
  
  .bottom-secondary-link p {
    margin-bottom: 0;
  }
  
  .bottom-secondary-link p span {
    position: relative;
    top: 1.5px;
    padding: 0 2px;
  }
  
  .bottom-secondary-link.ico-15 [class*="flaticon-"]:before, 
  .bottom-secondary-link.ico-15 [class*="flaticon-"]:after { font-size: 0.75rem; }
  
  /*------------------------------------------*/
  /*  BOTTOM FOOTER LINKS
  /*------------------------------------------*/
  
  .footer-data-socials li,
  .bottom-footer-list li,
  .bottom-footer-socials li,
  .bottom-footer-payment li {
    width: auto!important;
    display: inline-block!important;
    vertical-align: top;
    clear: none !important;
  }
  
  .footer-data-socials li {
    padding-right: 11px; 
  }
  
  .bottom-foo-socials li,
  .bottom-footer-socials li {
    padding-right: 12px; 
  }
  
  .footer-data-socials p {
    position: relative;
    line-height: 1;
    top: 9px;
    margin-bottom: 0;
  }
  
  .footer-list-divider {
    position: relative;
    top: -0.5px;
    transform: rotate(90deg);
    margin-right: 4px;
  }
  
  .bottom-footer-list.ico-15 [class*="flaticon-"]:before, 
  .bottom-footer-list.ico-15 [class*="flaticon-"]:after { font-size: 0.8rem; }
  
  .bottom-footer-list li p {
    display: inline-block;
    float: right;
    margin-bottom: 0;
  }
  
  .footer-data-socials li span,
  .bottom-footer-socials li span { 
    position: relative;
    top: 4px; 
    opacity: .7;
    -webkit-transition: all 400ms ease-in-out;
    -moz-transition: all 400ms ease-in-out;
    -o-transition: all 400ms ease-in-out;
    -ms-transition: all 400ms ease-in-out;
    transition: all 400ms ease-in-out;
  }
  
  .footer-data-socials li span:hover,
  .bottom-footer-socials li span:hover { 
    opacity: 1;
  }
  
  .bottom-foo-socials li span { 
    position: relative;
    top: 1px; 
    left: 1px;
    opacity: .8;
  }
  
  .bottom-footer-payment li span {
    line-height: 1!important;
    position: relative;
    top: 4px; 
    opacity: .8;
  }
  
  .footer-data-socials.ico-25 [class*="flaticon-"]:before, 
  .footer-data-socials.ico-25 [class*="flaticon-"]:after { font-size: 1.375rem; }
  
  .bottom-footer-socials.ico-20 [class*="flaticon-"]:before, 
  .bottom-footer-socials.ico-20 [class*="flaticon-"]:after { font-size: 1.2125rem; }
  
  .bottom-footer-socials.ico-25 [class*="flaticon-"]:before, 
  .bottom-footer-socials.ico-25 [class*="flaticon-"]:after { font-size: 1.25rem; }
  
  
  
  
  /* ==========================================================================
    29. INNER PAGE WRAPPER
    =========================================================================== */
  
  .inner-page-hero {
    padding-top: 190px;
  }
  
  .page-hero-section {
    position: relative;
    width: 100%;
    background-repeat: no-repeat;
    background-position: center center;   
    background-size: cover;
    background-attachment: scroll!important;
    padding-top: 180px;
    padding-bottom: 100px;
  }
  
  /*------------------------------------------*/
  /*  INNER PAGE TITLE
  /*------------------------------------------*/
  
  .inner-page-title {
    margin-bottom: 80px;
  }
  
  .inner-page-title h3,
  .inner-page-title h2 {
    margin-bottom: 0;
  }
  
  .inner-page-title p {
    line-height: 1;
    margin-top: 25px;
    margin-bottom: 0;
  }
  
  .inner-page-title p span {
    color: var(--black);
    font-weight: 600;
  }
  
  .page-hero-section p {
    margin-top: 16px;
    margin-bottom: 0;
  }
  
  
  
  
  /* ==========================================================================
    30. PAGE PAGINATION
    =========================================================================== */
  
  .page-link {
    color: var(--gray);
    font-size: 1.1rem;
    font-weight: 500;
    padding: 2px 14px;
    margin: 0 8px;
    background-color: transparent;
    border: 2px solid transparent;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    -o-border-radius: 6px;
    border-radius: 6px;
    -webkit-transition: all 400ms ease-in-out;
    -moz-transition: all 400ms ease-in-out;
    -o-transition: all 400ms ease-in-out;
    -ms-transition: all 400ms ease-in-out;
    transition: all 400ms ease-in-out; 
  }
  
  .pagination.ico-20 [class*="flaticon-"]:before, 
  .pagination.ico-20 [class*="flaticon-"]:after { font-size: 0.9rem; } 
  
  .page-item:first-child .page-link {
    border-top-right-radius: 6px;
    border-bottom-right-radius: 6px;
  }
  
  .page-item:last-child .page-link {
    border-top-left-radius: 6px;
    border-bottom-left-radius: 6px;
  }
  
  .page-item.disabled .page-link {
    color: var(--gray);
    background-color: transparent;
    border-color: transparent;
  }
  
  .page-link:hover {
    color: var(--gray);
    background-color: transparent;
    border-color: var(--gray);
  }
  
  .page-link:focus {
    color: var(--gray);
    background-color: transparent;
    border-color: transparent;
    box-shadow: 0 0;
  }
  
  .page-item.active .page-link {
    color: var(--white)!important;
  }
  
  .theme--blue .page-item.active .page-link { background-color: var(--blue); border-color: var(--blue); }
  .theme--green .page-item.active .page-link { background-color: var(--green); border-color: var(--green); }
  .theme--indigo .page-item.active .page-link { background-color: var(--indigo); border-color: var(--indigo); }
  .theme--orchid .page-item.active .page-link { background-color: var(--orchid); border-color: var(--orchid); }
  .theme--pink .page-item.active .page-link { background-color: var(--pink); border-color: var(--pink); }
  .theme--purple .page-item.active .page-link { background-color: var(--purple); border-color: var(--purple); }
  .theme--red .page-item.active .page-link { background-color: var(--red); border-color: var(--red); }
  .theme--skyblue .page-item.active .page-link { background-color: var(--skyblue); border-color: var(--skyblue); }
  .theme--violet-red .page-item.active .page-link { background-color: var(--violet-red); border-color: var(--violet-red); }
  
  
  
  
  /* ==========================================================================
    31. TERMS, PRIVACY, COOKIES PAGES
    =========================================================================== */
  
  /*------------------------------------------*/
  /*  TERMS PAGE TYPOGRAPHY
  /*------------------------------------------*/
  
  .txt-block.legal-info h5 {
    margin: 50px 0 25px;
  }
  
  .txt-block.legal-info h6 {
    margin: 25px 0;
  }
  
  .txt-block.legal-info h6 span,
  .txt-block.legal-info h5 span {
    margin-left: 4px;
  }
  
  .legal-info p span {
    color: var(--black);
    font-weight: 700;
  }
  
  .legal-info a {
    font-weight: 700;
    text-decoration: underline;
  }
  
  .legal-info a:hover {
    color: var(--black);
  }
  
  
  
  
  /* ==========================================================================
    32. SIGN-IN / SIGN-UP PAGE
    =========================================================================== */
  
  .register-page {
    position: relative;
    width: 100%;
    min-height: 100vh;
    z-index: 3;
    background: url(../images/register-page.jpg);
    background-repeat: no-repeat;
    background-position: center center;   
    background-size: cover;
  }
  
  .theme--dark .register-page {
    background: url(../images/register-page-dark.jpg);
  }
  
  /*------------------------------------------*/
  /*  REGISTER PAGE LOGO
  /*------------------------------------------*/
  
  .register-page-logo {
    position: fixed;
    padding-top: 30px;
  }
  
  .register-page-logo img {
    width: auto;
    max-width: inherit;
    max-height: 28px;
  }
  
  /*------------------------------------------*/
  /*  REGISTER PAGE FORM
  /*------------------------------------------*/
  
  .register-page-form {
    margin: 0 3%;
    padding: 140px 20px;
  }
  
  .reset-page-wrapper {
    padding: 180px 20px 140px;
  }
  
  /*------------------------------------------*/
  /*  REGISTER PAGE TITLE
  /*------------------------------------------*/
  
  .register-form-title {
    text-align: center;
    margin-bottom: 30px;
  }
  
  .register-form-title p {
    font-size: 1.05rem;
    margin-top: 8px;
    margin-bottom: 0;
  }
  
  /*------------------------------------------*/
  /*  RESET PASSWORD PAGE TITLE
  /*------------------------------------------*/
  
  .reset-form-title {
    text-align: center;
    margin-bottom: 22px;
  }
  
  .reset-form-title p.p-sm {
    margin-top: 20px;
    margin-bottom: 0;
  }
  
  /*------------------------------------------*/
  /*  REGISTER PAGE TYPOGRAPHY
  /*------------------------------------------*/
  
  .reset-password-link p {
    position: relative;
    font-size: 0.85rem;
    line-height: 1;
    margin-bottom: 30px;
  }
  
  .reset-password-link p a {
    text-decoration: underline;
  }
  
  .form-data span {
    display: block;
    font-size: 0.825rem;
    margin-bottom: 0;
  }
  
  .reset-password-form .form-data p { 
    margin-top: 22px;
    margin-bottom: 12px; 
  }
  
  .form-data p a,
  .form-data span a {
    color: var(--header-color);
    font-weight: 500;
    text-decoration: underline;
  }
  
  .register-page-form p.create-account {
    font-size: 0.9rem;
    line-height: 1;
    margin-top: 24px;
    margin-bottom: 0;
  }
  
  .register-page-form p.create-account a {
    font-weight: 600;
    text-decoration: underline;
  }
  
  /*------------------------------------------*/
  /*  REGISTER PAGE SEPARATOR LINE
  /*------------------------------------------*/
  
  .separator-line {
    display: flex;
    width: 100%;
    -webkit-box-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    align-items: center;
    text-align: center;
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 0.9rem;
    font-weight: 500;
    margin: 25px 0;
  }
  
  .separator-line::before, 
  .separator-line::after {
    content: "";
    border-top: 1.5px solid rgba(5, 5, 5, .18);
    margin: 0 0 0 15px;
    flex: 1 0 20px;
  }
  
  .separator-line::after {
    margin: 0 15px 0 0;
  }
  
  /*------------------------------------------*/
  /*  REGISTER PAGE FORM INPUT
  /*------------------------------------------*/
  
  .reset-page-wrapper .form-control,
  .register-page-form .form-control {
    height: 56px;
    background-color: var(--white);
    border: 1.5px solid #d2d2d2;
    color: var(--black);
    font-size: 0.935rem;
    line-height: 1;
    font-weight: 400;
    margin-bottom: 25px;
    padding: 5px 20px;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    border-radius: 6px;
    -webkit-transition: all 300ms ease-in-out;
    -moz-transition: all 300ms ease-in-out;
    -o-transition: all 300ms ease-in-out;
    -ms-transition: all 300ms ease-in-out;
    transition: all 300ms ease-in-out;
  }
  
  .reset-page-wrapper .form-control {
    text-align: center;
    margin-bottom: 20px;
  }
  
  .register-page-form .form-control::-moz-placeholder { color: var(--gray); } 
  .register-page-form .form-control:-ms-input-placeholder { color: var(--gray); } 
  .register-page-form .form-control::-webkit-input-placeholder { color: var(--gray); } 
  
  .reset-page-wrapper .form-control::-moz-placeholder { color: var(--gray); } 
  .reset-page-wrapper .form-control:-ms-input-placeholder { color: var(--gray); } 
  .reset-page-wrapper .form-control::-webkit-input-placeholder { color: var(--gray); } 
  
  /*------------------------------------------*/
  /*  REGISTER PAGE FORM FOCUS
  /*------------------------------------------*/
  
  .reset-page-wrapper .form-control:focus,
  .register-page-form .form-control:focus {
    outline: 0px none;
    box-shadow: none;
  }
  
  /*------------------------------------------*/
  /*  REGISTER PAGE FORM BUTTON
  /*------------------------------------------*/
  
  #login .register-page-form .btn.submit,
  #signup .register-page-form .btn.submit {
    width: 100%;
    height: 54px;
    font-size: 0.95rem;
    margin-top: 0;
  }
  
  #signup .register-page-form .btn.submit {
    margin-top: 25px;
  }
  
  .reset-page-wrapper .btn.submit {
    width: 100%;
    height: 54px;
    font-size: 0.95rem;
  }
  
  .register-page-form .btn-google {
    width: 100%;
    color: var(--header-color);
    font-size: 0.975rem;
    padding: 0.75rem 1.6rem;
    background-color: var(--white);
    border: 1px solid var(--silver);
  }
  
  .btn-google img {
    position: relative;
    width: 25px;
    height: 25px;
    top: 0;
    left: 5px;
  }
  
  .btn-google span {
    position: relative;
    top: 1px;
  }
  
  .register-page-form .btn-google:hover {
    border: 1px solid var(--header-color);
  }
  
  /*------------------------------------------*/
  /*  REGISTER PAGE FORM MESSAGE
  /*------------------------------------------*/
  
  .reset-form-msg {
    text-align: center;
    width: 100%!important;
    display: block;
  }
  
  .reset-password-form .loading {
    color: #00b2e4;
    font-size: 1.0625rem;
    line-height: 1;
    font-weight: 500;
    padding-right: 15px;
  }
  
  .reset-password-form .error {
    position: relative;
    color: #e74c3c;
    font-size: 0.85rem;
    line-height: 1;
    font-weight: 400;
    top: -10px;
    margin-bottom: 12px;
    padding-right: 10px;
  }
  
  /*------------------------------------------*/
  /*  FORM HIDE PASSWORD
  /*------------------------------------------*/
  
  .wrap-input {
    position: relative;
  }
  
  .btn-show-pass {
    color: var(--light-gray); 
    align-items: center;
    position: absolute;
    height: 100%;
    top: 15px;
    left: 20px;
    cursor: pointer;
    -webkit-transition: all 0.4s;
    -o-transition: all 0.4s;
    -moz-transition: all 0.4s;
    transition: all 0.4s;
  }
  
  .btn-show-pass.ico-20 [class^="flaticon-"]:before, 
  .btn-show-pass.ico-20 [class^="flaticon-"]:after {
    font-size: 1.125rem;
  }
  
  .btn-show-pass:hover {
    color: var(--theme-color);
  }
  
  .eye-pass.flaticon-invisible {
    color: var(--gray);
  }
  
  
  
  
  /* ==========================================================================
    33. MODAL
    ========================================================================== */ 
  
  .modal-body {
    padding: 0!important;
  }  
  
  .modal-dialog.modal-xl {
    width: 760px;
  }
  
  .modal .modal-content {
    overflow: hidden;
    -webkit-border-radius: 10px; 
    -moz-border-radius: 10px; 
    -o-border-radius: 10px; 
    border-radius: 10px;
  }
  
  .modal-body-content {
    padding: 60px 35px 35px;
  }
  
  .modal-body-content h4 {
    margin-bottom: 15px;
  }
  
  .modal-body-content p {
    margin-bottom: 0;
  }
  
  .modal .bg-img {
    background: url(../images/modal.jpg);
    background-repeat: no-repeat;
    background-position: right center;   
    background-size: cover;
  }
  
  /*------------------------------------------*/
  /*  MODAL WINDOW CLOSE BUTTON
  /*------------------------------------------*/ 
  
  .modal .btn-close {
    position: absolute;
    z-index: 1;
    left: 20px!important;
    top: 20px!important;
    height: 1.5rem;
    width: 1.5rem;
    background: rgba(14, 14, 14, .11)!important;
    border-radius: 50%;
    padding: 0;
    opacity: .9;
    z-index: 9999;
  }
  
  .modal .btn-close span {
    position: relative;
    line-height: 24px!important;
    top: -2px;
  }
  
  .modal .btn-close.ico-10 [class^="flaticon-"]:before, 
  .modal .btn-close.ico-10 [class^="flaticon-"]:after {
    font-size: 0.6rem;
  }
  
  .modal .btn-close:focus {
    outline: none!important;
    box-shadow: none!important;
    text-decoration: none!important;
  }
  
  /*------------------------------------------*/
  /*  MODAL WINDOW NEWSLETTER FORM
  /*------------------------------------------*/ 
  
  .modal-body .newsletter-form {
    margin-top: 25px;
  }
  
  .modal .newsletter-form .form-control {
    text-align: center;
    height: 58px;
    background-color: #f3f4f5;
    border: 1.5px solid transparent;
    font-size: 1rem;
    color: var(--gray);
    font-weight: 400;
    padding: 0 15px;  
    margin-bottom: 20px;
    box-shadow: none;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    -o-border-radius: 6px;
    border-radius: 6px;
    -webkit-transition: all 400ms ease-in-out;
    -moz-transition: all 400ms ease-in-out;
    -o-transition: all 400ms ease-in-out;
    -ms-transition: all 400ms ease-in-out;
    transition: all 400ms ease-in-out; 
  }
  
  .modal .input-group:not(.has-validation)>:not(:last-child):not(.dropdown-toggle):not(.dropdown-menu):not(.form-floating) {
    border-top-left-radius: 6px;
    border-bottom-left-radius: 6px;
  }
  
  /*------------------------------------------*/
  /*  Form Input Focus
  /*------------------------------------------*/
  
  .modal .newsletter-form .form-control:focus {
    outline: 0;
    box-shadow: none;
    background-color: var(--white);
  }
  
  /*------------------------------------------*/
  /*  Form Input Placeholder
  /*------------------------------------------*/
  
  .modal .newsletter-form .form-control::-moz-placeholder { color: var(--light-gray); } 
  .modal .newsletter-form .form-control:-ms-input-placeholder { color: var(--light-gray); } 
  .modal .newsletter-form .form-control::-webkit-input-placeholder { color: var(--light-gray); } 
  
  /*------------------------------------------*/
  /*  Form Button
  /*------------------------------------------*/
  
  .modal .input-group-btn { 
    display: block; 
    width: 100%!important; 
  }
  
  .modal .newsletter-form .btn {
    display: block; 
    width: 100%!important;
    height: 58px;
    font-size: 0.975rem;
    margin: 0;
  }
  
  /*------------------------------------------*/
  /*  Form Notification
  /*------------------------------------------*/
  
  .modal .form-notification {
    text-align: center;
    color: #1680fb;
    font-size: 0.85rem;
    font-weight: 400;
    line-height: 1;
    margin-top: 12px;
  }
  
  .modal .form-notification.valid,
  .modal .form-notification.error {
     color: #fc2f4b;
  }
  
  .modal .newsletter-form.valid {
    color: #0fbc49;
  }
  
  
  
  
  /* ==========================================================================
    34. COOKIES
    =========================================================================== */
  
  #cookies {
    position: fixed;
    width: 90%;
    bottom: 25px;
    right: 5%;
    z-index: 200;
    padding: 25px;
    border: 1px solid #ddd;
    -webkit-border-radius: 12px; 
    -moz-border-radius: 12px; 
    -o-border-radius: 12px; 
    border-radius: 12px;
    -webkit-box-shadow: 0 10px 20px 0 rgba(3, 3, 3, .1);
    -moz-box-shadow: 0 10px 20px 0 rgba(3, 3, 3, .1);
    box-shadow: 0 10px 20px 0 rgba(3, 3, 3, .1);
  }
  
  #cookies p {
    color: #353f4f;
    font-size: 0.875rem;
    line-height: 1.5;
    margin: 0;
  }
  
  #cookies-ok {
    position: absolute;
    left: 52px;
    bottom: 18px;
    cursor: pointer;
    display: inline-block;
    font-size: 0.8rem;
    font-weight: 500;
    background-color: #353f4f!important;
    border: 2px solid #353f4f!important;
    padding: 6px 20px;
    -moz-border-radius: 36px; 
    -webkit-border-radius: 36px; 
    border-radius: 36px; 
  }
  
  #cookies-ok:hover {
    color: #353f4f!important;
    background-color: transparent!important;
    border-color: #353f4f!important;
  }
  
  #cookies-info {
    color: #353f4f!important;
    font-weight: 500;
    text-decoration: underline;
    margin-right: 10px;
  }
  
  .theme--blue #cookies-info:hover { color: var(--blue)!important; }
  .theme--green #cookies-info:hover { color: var(--green)!important; }
  .theme--indigo #cookies-info:hover { color: var(--indigo)!important; }
  .theme--orchid #cookies-info:hover { color: var(--orchid)!important; }
  .theme--pink #cookies-info:hover { color: var(--pink)!important; }
  .theme--purple #cookies-info:hover { color: var(--purple)!important; }
  .theme--red #cookies-info:hover { color: var(--red)!important; }
  .theme--skyblue #cookies-info:hover { color: var(--skyblue)!important; }
  .theme--violet-red #cookies-info:hover { color: var(--violet-red)!important; }
  
  #cookies-close {
    position: absolute;
    left: 25px;
    top: 20px;
    height: 12px;
    width: 12px;
  }
  
  #cookies-close svg { 
    width: 11px; 
    height: 11px; 
  }
  
  
  
  
  /* ==========================================================================
    35. COLOR SCHEME
    ========================================================================== */ 
  
  :root {
    --theme-color: #0083ff;
    --theme-color-secondary: #0083ff;
  }
  
  .bg--theme { 
    background-color: var(--theme-color);
  }
  
  .bg--theme-2 { 
    background-color: var(--theme-color-secondary);
  }
  
  /*------------------------------------------*/
  /*  BUTTON
  /*------------------------------------------*/
  
  .btn--theme, .hover--theme:hover, 
  .theme--dark .btn--theme, .theme--dark .hover--theme:hover, 
  .color--white .hover--theme:hover, .scroll .hover--theme:hover,
  .theme--dark .color--white .hover--theme:hover, .theme--dark .scroll .hover--theme:hover  {
    color: var(--white)!important; border-color: var(--theme-color)!important; background-color: var(--theme-color)!important;
  }
  
  .btn--tra-theme, .hover--tra-theme:hover, .color--white .btn--tra-theme,
  .theme--dark .btn--tra-theme, .theme--dark .hover--tra-theme:hover, .theme--dark .color--white .btn--tra-theme  {
    color: var(--theme-color)!important; background-color: transparent!important; border-color: var(--theme-color)!important;
  }
  
  .btn--theme-2, .hover--theme-2:hover, 
  .theme--dark .btn--theme-2, .theme--dark .hover--theme-2:hover, 
  .color--white .hover--theme-2:hover, .scroll .hover--theme-2:hover,
  .theme--dark .color--white .hover--theme-2:hover, .theme--dark .scroll .hover--theme-2:hover {
    color: var(--white)!important; 
    border-color: var(--theme-color-secondary)!important; 
    background-color: var(--theme-color-secondary)!important;
  }
  
  .btn--tra-theme-2, .hover--tra-theme-2:hover, .color--white .btn--tra-theme-2,
  .theme--dark .btn--tra-theme-2, .theme--dark .hover--tra-theme-2:hover, .theme--dark .color--white .btn--tra-theme-2 {
    color: var(--theme-color)!important; background-color: transparent!important; border-color: var(--theme-color)!important;
  }
  
  /*------------------------------------------*/
  /*  COLOR
  /*------------------------------------------*/
  
  .color--theme,
  .color--theme a,
  .color--theme :is(h1, h2, h3, h4, h5, h6) { color: var(--theme-color); }
  
  .color--theme-2,
  .color--theme-2 a,
  .color--theme-2 :is(h1, h2, h3, h4, h5, h6) { color: var(--theme-color-secondary); }
  
  /*------------------------------------------*/
  /*  VECTOR ICON BACKGROUND
  /*------------------------------------------*/ 
  
  .shape-ico.color--theme path,
  .shape-ico.color--theme-2 path {
    fill: #f4f9fc;
  }
  
  /*------------------------------------------*/
  /*  PRELOADER SPINNER
  /*------------------------------------------*/
  
  .loading--theme .cssload-spinner:after, 
  .loading--theme .cssload-spinner:before {
    border-color: var(--theme-color);
  }
  
  /*------------------------------------------*/
  /*  HEADER & NAVIGATION
  /*------------------------------------------*/
  
  .nav-theme .sm-info { 
    background-color: var(--theme-color); 
  }
  
  .wsmenu > .wsmenu-list.nav-theme > li > ul.sub-menu > li > a:hover,
  .wsmenu > .wsmenu-list.nav-theme > li > ul.sub-menu > li > ul.sub-menu > li > a:hover,
  .wsmenu > .wsmenu-list.nav-theme > li > .wsmegamenu.w-75 ul.link-list > li > a:hover,
  .wsmenu > .wsmenu-list.nav-theme > li > .wsmegamenu.halfmenu ul.link-list > li > a:hover {
    color: var(--theme-color);
  }
  
  /*------------------------------------------*/
  /*  HERO
  /*------------------------------------------*/
  
  .hero-section .quick-form .form-control:focus {
    border-color: var(--theme-color);
  }
  
  /*------------------------------------------*/
  /*  CONTENT
  /*------------------------------------------*/
  
  .cbox-1:hover .cbox-1-ico.bg--theme { 
    color: var(--theme-color); 
    border-color: var(--theme-color); 
  }
  
  .cbox-1:hover .cbox-1-ico.bg--theme-2 { 
    color: var(--theme-color-secondary); 
    border-color: var(--theme-color-secondary); 
  }
  
  /*------------------------------------------*/
  /*  PRICING
  /*------------------------------------------*/
  
  .p-table.theme--border { border: 3px solid var(--theme-color); }
  .pricing-features.ico--theme span { color: var(--theme-color); }
  .pricing-features.ico--theme-2 span { color: var(--theme-color-secondary); }
  .switcher { background-color: var(--theme-color); }
  .comp-table .color--theme { color: var(--theme-color); }
  .comp-table .color--theme-2 { color: var(--theme-color-secondary); }
  
  /*------------------------------------------*/
  /*  INTEGRATIONS
  /*------------------------------------------*/
  
  .filter-btns button.is-checked { color: var(--theme-color); border-color: var(--theme-color); }
  
  /*------------------------------------------*/
  /*  NEWSLETTER
  /*------------------------------------------*/
  
  .newsletter-section .form-control:focus {
    border-color: var(--theme-color);
  }
  
  /*------------------------------------------*/
  /*  CONTACTS
  /*------------------------------------------*/
  
  .contact-form .form-control:focus,
  .contact-form .form-select:focus {
    border-color: var(--theme-color);
  }
  
  /*------------------------------------------*/
  /*  FOOTER
  /*------------------------------------------*/
  
  .footer-form .newsletter-form .input-group:focus-within {
    border-color: var(--theme-color)!important;
  }
  
  .footer-form .btn {
    color: var(--theme-color);
  }
  
  /*------------------------------------------*/
  /*  PAGINATION
  /*------------------------------------------*/
  
  .page-item.active .page-link { background-color: var(--theme-color); border-color: var(--theme-color); }
  
  /*------------------------------------------*/
  /*  MODAL
  /*------------------------------------------*/
  
  .reset-password-link p a:hover,
  .reset-password-form .form-data p a:hover {
    color: var(--theme-color);
  }
  
  .reset-page-wrapper .form-control:focus,
  .register-page-form .form-control:focus {
    border-color: var(--theme-color);
  }
  
  .modal .newsletter-form .form-control:focus {
    border-color: var(--theme-color);
  }
  
  /*------------------------------------------*/
  /*  COOKIES
  /*------------------------------------------*/
  
  #cookies-ok {
    background-color: var(--theme-color)!important;
    border: 2px solid var(--theme-color)!important;
  }
  
  #cookies-info:hover { 
    color: var(--theme-color)!important; 
  }
  
  /*------------------------------------------*/
  /*  حالت تیره
  /*------------------------------------------*/
  
  .theme--dark .shape-ico.color--theme path,
  .theme--dark .shape-ico.color--theme-2 path {
    fill: rgba(43, 48, 64, .5);
  }
  
  .theme--dark .white-scroll .wsmainfull.scroll .hover--theme:hover {
    color: var(--white)!important; 
    border-color: var(--theme-color)!important; 
    background-color: var(--theme-color)!important;
  }
  
  .theme--dark .white-scroll .wsmainfull.scroll .hover--theme-2:hover {
    color: var(--white)!important; 
    border-color: var(--theme-color-secondary)!important; 
    background-color: var(--theme-color-secondary)!important;
  }
  
  .theme--dark .newsletter-1.newsletter-section .form-control:focus,
  .theme--dark .newsletter-3.newsletter-section .form-control:focus {
    border-color: var(--theme-color)!important;
  }
  
  
  
  
  /* ==========================================================================
    36. حالت تیره
    ========================================================================== */ 
  
  body.theme--dark {
    --dark-theme-bg: #13161f;
    --black: #f9f9f9;
    --gray: #c8c8c8;
    --ink: #101219;
    --form-control: #191c28;
    --header-color: #fff;
    --header-link: #dee1ea;
    --silver: rgba(43, 48, 64, 1);
    --smoke: rgba(43, 48, 64, .7);
    --white-smoke: #191c28;
  }
  
  body.theme--dark { 
    background-color: var(--dark-theme-bg);  
    color: var(--gray); 
  }
  
  .theme--dark .bg--white,
  .theme--dark .bg--coal,
  .theme--dark .bg--lavender,
  .theme--dark .bg--magnolia,
  .theme--dark .bg--aliceblue,
  .theme--dark .bg--tra-violet-red { 
    background-color: var(--white-smoke);
  }
  
  .theme--dark .gr--whitesmoke {
    background-image: linear-gradient(-180deg, rgba(29, 33, 44, .8) 50%, rgba(29, 33, 44, .05) 100%);
  }
  
  .theme--dark .bg--03 { 
    background-image: url(../images/bg-03d.jpg);
  }
  
  .theme--dark .bg--05 { 
    background-image: url(../images/bg-05d.jpg);
  }
  
  /*------------------------------------------*/
  /*  SECTION DIVIDER
  /*------------------------------------------*/
  
  .theme--dark hr.divider,
  .theme--dark .footer hr {
    background-image: linear-gradient(-90deg, rgba(122,125,147,0) 0, #7a7d93 38%, #7a7d93 64%, rgba(122,125,147,0) 99%); 
  }
  
  .theme--dark hr.divider.divider-light {
    background-color: #fff;
    background-image: linear-gradient(-90deg, rgba(206,211,246,0) 0, #dedede 38%, #dedede 64%, rgba(206,211,246,0) 99%);
    opacity: 1;
  }
  
  /*------------------------------------------*/
  /*  TYPOGRAPHY
  /*------------------------------------------*/
  
  .theme--dark a { 
    color: var(--gray); 
  }
  
  .theme--dark a:hover, 
  .theme--dark a.tra-link:hover span { 
    color: var(--white); 
  }
  
  /*------------------------------------------*/
  /*  BUTTONS
  /*------------------------------------------*/
  
  .theme--dark .btn--transparent {
    color: var(--white)!important;
  }
  
  /* WHITE BUTTON */
  .theme--dark .btn--white, .theme--dark .hover--white:hover, .theme--dark .color--white .hover--white:hover {
    color: #333!important; background-color: var(--white)!important; border-color: var(--white)!important;
  }
  
  /* BLACK BUTTON */
  .theme--dark .btn--black, .theme--dark .hover--black:hover, .theme--dark .color--white .hover--black:hover {
    color: var(--ink)!important; border-color: var(--black)!important; background-color: var(--black)!important;
  }
  
  .theme--dark .btn--tra-black, .theme--dark .hover--tra-black:hover, .theme--dark .color--white .btn--tra-black {
    color: var(--black)!important; background-color: transparent!important; border-color: var(--black)!important;
  }
  
  /* BLUE BUTTON */
  .theme--dark .btn--blue, .theme--dark .hover--blue:hover, .theme--dark .color--white .hover--blue:hover {
    color: var(--white)!important; border-color: var(--blue)!important; background-color: var(--blue)!important;
  }
  
  .theme--dark .btn--tra-blue, .theme--dark .hover--tra-blue:hover, .theme--dark .color--white .btn--tra-blue {
    color: var(--blue)!important; background-color: transparent!important; border-color: var(--blue)!important;
  }
  
  /* GREEN BUTTON */
  .theme--dark .btn--green, .theme--dark .hover--green:hover, .theme--dark .color--white .hover--green:hover {
    color: var(--white)!important; border-color: var(--green)!important; background-color: var(--green)!important;
  }
  
  .theme--dark .btn--tra-green, .theme--dark .hover--tra-green:hover, .theme--dark .color--white .btn--tra-green {
    color: var(--green)!important; background-color: transparent!important; border-color: var(--green)!important;
  }
  
  /* INDIGO BUTTON */
  .theme--dark .btn--indigo, .theme--dark .hover--indigo:hover, .theme--dark .color--white .hover--indigo:hover {
    color: var(--white)!important;border-color: var(--indigo)!important; background-color: var(--indigo)!important;
  }
  
  .theme--dark .btn--tra-indigo, .theme--dark .hover--tra-indigo:hover, .theme--dark .color--white .btn--tra-indigo {
    color: var(--indigo)!important; background-color: transparent!important; border-color: var(--indigo)!important;
  }
  
  /* ORCHID BUTTON */
  .theme--dark .btn--orchid, .theme--dark .hover--orchid:hover, 
  .theme--dark .color--white .hover--orchid:hover, .theme--dark .scroll .hover--orchid:hover {
    color: var(--white)!important; border-color: var(--orchid)!important; background-color: var(--orchid)!important;
  }
  
  .theme--dark .btn--tra-orchid, .theme--dark .hover--tra-orchid:hover, .theme--dark .color--white .btn--tra-orchid {
    color: var(--orchid)!important; background-color: transparent!important; border-color: var(--orchid)!important;
  }
  
  /* PINK BUTTON */
  .theme--dark .btn--pink, .theme--dark .hover--pink:hover, 
  .theme--dark .color--white .hover--pink:hover, .theme--dark .scroll .hover--pink:hover {
    color: var(--white)!important; border-color: var(--pink)!important; background-color: var(--pink)!important;
  }
  
  .theme--dark .btn--tra-pink, .theme--dark .hover--tra-pink:hover, .theme--dark .color--white .btn--tra-pink {
    color: var(--pink)!important; background-color: transparent!important; border-color: var(--pink)!important;
  }
  
  /* PURPLE BUTTON */
  .theme--dark .btn--purple, .theme--dark .hover--purple:hover, 
  .theme--dark .color--white .hover--purple:hover, .theme--dark .scroll .hover--purple:hover {
    color: var(--white)!important; border-color: var(--purple)!important; background-color: var(--purple)!important;
  }
  
  .theme--dark .btn--tra-purple, .theme--dark .hover--tra-purple:hover, .theme--dark .color--white .btn--tra-purple {
    color: var(--purple)!important; background-color: transparent!important; border-color: var(--purple)!important;
  }
  
  /* RED BUTTON */
  .theme--dark .btn--red, .theme--dark .hover--red:hover, .theme--dark .color--white .hover--red:hover {
    color: var(--white)!important; border-color: var(--red)!important; background-color: var(--red)!important;
  }
  
  .theme--dark .btn--tra-red, .theme--dark .hover--tra-red:hover, .theme--dark .color--white .btn--tra-red {
    color: var(--red)!important; background-color: transparent!important; border-color: var(--red)!important;
  }
  
  /* SKYBLUE BUTTON */
  .theme--dark .btn--skyblue, .theme--dark .hover--skyblue:hover, .theme--dark .color--white .hover--skyblue:hover {
    color: var(--white)!important; border-color: var(--sky-blue)!important; background-color: var(--sky-blue)!important;
  }
  
  .theme--dark .btn--tra-skyblue, .theme--dark .hover--tra-skyblue:hover, .theme--dark .color--white .btn--tra-skyblue {
    color: var(--sky-blue)!important; background-color: transparent!important; border-color: var(--sky-blue)!important;
  }
  
  /* VIOLET RED BUTTON */
  .theme--dark .btn--violet-red, .theme--dark .hover--violet-red:hover, 
  .theme--dark .color--white .hover--violet-red:hover, .theme--dark .scroll .hover--violet-red:hover {
    color: var(--white)!important; border-color: var(--violet-red)!important; background-color: var(--violet-red)!important;
  }
  
  .theme--dark .btn--tra-violet-red, .theme--dark .hover--tra-violet-red:hover, .theme--dark .color--white .btn--tra-violet-red {
    color: var(--violet-red)!important; background-color: transparent!important; border-color: var(--violet-red)!important;
  }
  
  /* YELLOW BUTTON */
  .theme--dark .btn--yellow, .theme--dark .hover--yellow:hover, .theme--dark .color--white .hover--yellow:hover {
    color: var(--black)!important; border-color: var(--yellow)!important; background-color: var(--yellow)!important;
  }
  
  /*------------------------------------------*/
  /*  VECTOR ICON BACKGROUND
  /*------------------------------------------*/ 
  
  .theme--dark .shape-ico.color--blue path, 
  .theme--dark .shape-ico.color--indigo path,
  .theme--dark .shape-ico.color--skyblue path,
  .theme--dark .shape-ico.color--lilac path,
  .theme--dark .shape-ico.color--orchid path,
  .theme--dark .shape-ico.color--pink path,
  .theme--dark .shape-ico.color--purple path,
  .theme--dark .shape-ico.color--violet-red path {
    fill: rgba(43, 48, 64, .5);
  }
  
  /*------------------------------------------*/
  /*  حالت تیره IMAGES SWITCHER
  /*------------------------------------------*/
  
  
  .theme--dark .dt-img { 
    display: inline-block; 
    position: relative;
    border-radius: 30px;
  }
  
  .feature-image{
    filter: brightness(50%);
  }
  .nigga{
    
  }
  
  .theme--dark .brand-logo img {
    filter: invert(100%);
  }
  
  .theme--dark img.ios-logo {
    filter: invert(100%);
  }
  
  /*------------------------------------------*/
  /*  NAVIGATION MENU
  /*------------------------------------------*/
  
  .theme--dark .dark-menu .wsmainfull,
  .theme--dark .white-menu .wsmainfull {
    background-color: var(--ink)!important;
    -webkit-box-shadow: 0 2px 3px var(--tra-ink);
    -moz-box-shadow: 0 2px 3px var(--tra-ink);
    box-shadow: 0 2px 3px var(--tra-ink);
  }
  
  /*------------------------------------------*/
  /*  HEADER LINK
  /*------------------------------------------*/
  
  .theme--dark .navbar-dark .wsmenu > .wsmenu-list > li > a,
  .theme--dark .navbar-light .wsmenu > .wsmenu-list > li > a,
  .theme--dark .navbar-dark.inner-page-header .wsmenu > .wsmenu-list > li > a,
  .theme--dark .navbar-dark.light-hero-header .wsmenu > .wsmenu-list > li > a {
    color: var(--header-link);
  }
  
  .theme--dark .navbar-dark .wsmenu-list > li > a.h-link:hover,
  .theme--dark .navbar-light .wsmenu-list > li > a.h-link:hover,
  .theme--dark .navbar-light .wsmenu > .wsmenu-list > li > a:hover,
  .theme--dark .navbar-dark.inner-page-header .wsmenu > .wsmenu-list > li > a:hover,
  .theme--dark .navbar-dark.light-hero-header .wsmenu > .wsmenu-list > li > a:hover {
    color: #eee!important;
  }
  
  .theme--dark .navbar-light .wsmenu > .wsmenu-list > li > a.btn:hover {
    color: var(--white)!important;
  }
  .wsmenu a:hover{
    color: #EECE7B;
  }
  .fbox-txt h6{
    color: #dee1ea;
  }
  
  .fbox-txt h6:hover{
    color: #EECE7B;
  }
  
  .features-6 h2{
    color: #EECE7B;
  }
  
  .fbox-txt h6 a{
    color: white;
  }
  .fbox-txt h6 a:hover{
    color: #EECE7B;
  }
  /*------------------------------------------*/
  /*  HEADER SUBMENU / MEGAMENU
  /*------------------------------------------*/
  
  .theme--dark .wsmenu > .wsmenu-list > li > ul.sub-menu,
  .theme--dark .wsmenu > .wsmenu-list > li > .wsmegamenu,
  .theme--dark .wsmenu > .wsmenu-list > li > ul.sub-menu > li > ul.sub-menu,
  .theme--dark .wsmenu > .wsmenu-list > li > .wsmegamenu.halfmenu {
    background-color: var(--white-smoke)!important; 
    border: solid 1px var(--smoke)!important; 
    -webkit-box-shadow: 0 2px 3px rgba(1, 1, 1, .1);
    -moz-box-shadow: 0 2px 3px rgba(1, 1, 1, .1);
    box-shadow: 0 2px 3px rgba(1, 1, 1, .1);
  }
  
  .theme--dark .wsmenu > .wsmenu-list > li > ul.sub-menu:before,
  .theme--dark .wsmenu > .wsmenu-list > li.mg_link:hover > a:after,
  .theme--dark .wsmenu > .wsmenu-list > li > .wsmegamenu.halfmenu:before {
    background-color: var(--ink);
    border-right: solid var(--ink);
    border-top: solid 1px var(--ink);
  }
  
  .theme--dark .wsmenu > .wsmenu-list > li > ul.sub-menu > li > a,
  .theme--dark .wsmenu > .wsmenu-list > li > ul.sub-menu > li > ul.sub-menu > li > a,
  .theme--dark .wsmenu > .wsmenu-list > li > .wsmegamenu.w-75 ul.link-list > li > a,
  .theme--dark .wsmenu > .wsmenu-list > li > .wsmegamenu.halfmenu ul.link-list > li > a {
    color: var(--header-link);
    background-color: transparent!important;
  }
  
  .theme--dark .scroll .wsmenu > .wsmenu-list > li > ul.sub-menu > li > a,
  .theme--dark .theme--dark .wsmenu > .wsmenu-list > li > ul.sub-menu > li > ul.sub-menu > li > a,
  .theme--dark .scroll .wsmenu > .wsmenu-list > li > .wsmegamenu.w-75 ul.link-list > li > a,
  .theme--dark .scroll .wsmenu > .wsmenu-list > li > .wsmegamenu.halfmenu ul.link-list > li > a {
    color: var(--header-link);
  }
  
  /*------------------------------------------*/
  /*  NAVBAR SCROLL
  /*------------------------------------------*/
  
  .theme--dark .tra-menu .wsmainfull.scroll,
  .theme--dark .white-menu .wsmainfull.scroll,
  .theme--dark .dark-menu.dark-scroll .wsmainfull.scroll {
    background-color: var(--ink)!important;
    padding: 0;
    -webkit-box-shadow: 0 25px 50px -12px rgba(0, 0, 0, .25);
    -moz-box-shadow: 0 25px 50px -12px rgba(0, 0, 0, .25);
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, .25);
  }
  
  .theme--dark .tra-menu.navbar-dark .scroll .wsmenu > .wsmenu-list > li > a,
  .theme--dark .tra-menu.navbar-light .scroll .wsmenu > .wsmenu-list > li > a,
  .theme--dark .tra-menu.navbar-dark.white-scroll .scroll .wsmenu > .wsmenu-list > li > a.h-link, 
  .theme--dark .tra-menu.navbar-light.white-scroll .scroll .wsmenu > .wsmenu-list > li > a.h-link {
    color: var(--header-link);
  }
  
  .theme--dark .navbar-light.white-scroll .scroll .wsmenu-list > li > a.h-link:hover {
    color: var(--white)!important;
  }
  
  .theme--dark .wsmenu > .wsmenu-list > li > ul.sub-menu > li > a:hover,
  .theme--dark .wsmenu > .wsmenu-list > li > .wsmegamenu.w-75 ul.link-list > li > a:hover,
  .theme--dark .wsmenu > .wsmenu-list > li > ul.sub-menu > li > ul.sub-menu > li > a:hover,
  .theme--dark .wsmenu > .wsmenu-list > li > .wsmegamenu.halfmenu ul.link-list > li > a:hover {
    background-color: rgba(44, 49, 66, .72)!important;
    color: var(--white);
  }
  
  .theme--dark .navbar-light .scroll .btn.btn--tra-white {
    color: var(--white)!important;
    border-color: var(--white)!important;
    background-color: transparent!important;
  }
  
  .theme--dark .wsmainfull .hover--black:hover {
    color: var(--white)!important; border-color: #353f4f!important; background-color: #353f4f!important;
  }
  
  .theme--dark .white-scroll .wsmainfull.scroll .hover--black:hover {
    color: var(--ink)!important; border-color: var(--white)!important; background-color: var(--white)!important;
  }
  
  .theme--dark .navbar-light .scroll .wsmenu > .wsmenu-list > li > a.btn.hover--black:hover {
    color: var(--ink)!important;
  }
  
  .theme--dark .white-scroll .wsmainfull.scroll .hover--blue:hover {
    color: var(--white)!important; border-color: var(--blue)!important; background-color: var(--blue)!important;
  }
  
  .theme--dark .white-scroll .wsmainfull.scroll .hover--green:hover {
    color: var(--white)!important; border-color: var(--green)!important; background-color: var(--green)!important;
  }
  
  .theme--dark .white-scroll .wsmainfull.scroll .hover--indigo:hover {
    color: var(--white)!important; border-color: var(--indigo)!important; background-color: var(--indigo)!important;
  }
  
  .theme--dark .white-scroll .wsmainfull.scroll .hover--orchid:hover {
    color: var(--white)!important; border-color: var(--orchid)!important; background-color: var(--orchid)!important;
  }
  
  .theme--dark .white-scroll .wsmainfull.scroll .hover--pink:hover {
    color: var(--white)!important; border-color: var(--pink)!important; background-color: var(--pink)!important;
  }
  
  .theme--dark .white-scroll .wsmainfull.scroll .hover--purple:hover {
    color: var(--white)!important; border-color: var(--purple)!important; background-color: var(--purple)!important;
  }
  
  .theme--dark .white-scroll .wsmainfull.scroll .hover--red:hover {
    color: var(--white)!important; border-color: var(--red)!important; background-color: var(--red)!important;
  }
  
  .theme--dark .white-scroll .wsmainfull.scroll .hover--skyblue:hover {
    color: var(--white)!important; border-color: var(--sky-blue)!important; background-color: var(--sky-blue)!important;
  }
  
  .theme--dark .white-scroll .wsmainfull.scroll .hover--violet-red:hover {
    color: var(--white)!important; border-color: var(--violet-red)!important; background-color: var(--violet-red)!important;
  }
  
  .theme--dark .white-scroll .wsmainfull .hover--tra-white:hover,
  .theme--dark .white-scroll .wsmainfull.scroll .hover--tra-white:hover {
    color: var(--white)!important; border-color: var(--white)!important; background-color: transparent!important;
  }
  
  /*------------------------------------------*/
  /*  Logo Image
  /*------------------------------------------*/
  
  .theme--dark .navbar-dark .logo-black,
  .theme--dark .navbar-dark .scroll .logo-black {
    display: none;
  }
  
  .theme--dark .navbar-dark .logo-white,
  .theme--dark .navbar-dark .logo-black,
  .theme--dark .navbar-dark .scroll .logo-white {
    display: block;
  }
  
  .theme--dark .navbar-dark .logo-white {
    display: none;
  }
  
  /*------------------------------------------*/
  /*  CAREERS
  /*------------------------------------------*/
  
  .theme--dark .jobs-category {
    background-color: #181b27;
    border-color: var(--silver);
  }
  
  /*------------------------------------------*/
  /*  FEATURES
  /*------------------------------------------*/
  
  .theme--dark .fbox-5.bg--white {
    background-color: #181a27;
    border-color: var(--silver);
  }
  
  .theme--dark .fbox-3.bg--white {
    background-color: #181a27;
    border-color: var(--silver);
  }
  
  /*------------------------------------------*/
  /*  CONTENT
  /*------------------------------------------*/
  
  .theme--dark .txt-block .accordion-1 .accordion-item .accordion-thumb:after,
  .theme--dark .txt-block .accordion-1 .accordion-item.is-active .accordion-thumb:after {
    background-color: var(--smoke);
    color: var(--gray);
  }
  
  .theme--dark .bc-04-wrapper {
    border-color: var(--silver);
  }
  
  /*------------------------------------------*/
  /*  TEAM
  /*------------------------------------------*/
  
  .theme--dark .team-member {
    background-color: var(--white-smoke);
  }
  
  /*------------------------------------------*/
  /*  PRICING
  /*------------------------------------------*/
  
  .theme--dark .p-table { 
    border-color: var(--silver);
  }
  
  .theme--dark .pricing-discount h6 {
    color: #353f4f;
  }
  
  /*------------------------------------------*/
  /*  INTEGRATIONS
  /*------------------------------------------*/
  
  .theme--dark .int_tool-1 .tool_logo.bg--white {
    background-color: #181a27;
    border-color: var(--silver);
  }
  
  /*------------------------------------------*/
  /*  RATING
  /*------------------------------------------*/
  
  .theme--dark .rbox-1 .star-rating {
    background-color: var(--white-smoke);
    border-color: var(--silver);
  }
  
  .theme--dark .rbox-3 p span { 
    color: #fff;
  }
  
  /*------------------------------------------*/
  /*  REVIEWS
  /*------------------------------------------*/
  
  .theme--dark .reviews-3-wrapper:after {
    background-color: #181a27;
  }
  
  .theme--dark .review-1 {
     background-color: var(--white-smoke);
    border-color: var(--silver);
  }
  
  .theme--dark .owl-theme .owl-dots .owl-dot span {
    background: #3a3a3a;
  }
  
  .theme--dark .owl-theme .owl-dots .owl-dot.active span {
    background: var(--white);
  }
  
  /*------------------------------------------*/
  /*  DOWNLOAD
  /*------------------------------------------*/
  
  .theme--dark .download-item {
    border-color: var(--silver);
  }
  
  /*------------------------------------------*/
  /*  FAQs
  /*------------------------------------------*/
  
  .theme--dark .accordion-panel {
    color: var(--gray);
  }
  
  .theme--dark .faqs-section .accordion-item .accordion-thumb:after,
  .theme--dark .faqs-section .accordion-item.is-active .accordion-thumb:after {
    background-color: var(--smoke);
    color: var(--gray);
  }
  
  /*------------------------------------------*/
  /*  BANNER
  /*------------------------------------------*/
  
  .theme--dark .os-link {
    border-color: var(--silver);
  }
  
  .theme--dark .os-qr-code {
   background-color: #fff;
  }
  
  .theme--dark .os-logo img {
    filter: invert(100%);
    opacity: .4;
  }
  
  .theme--dark .banner-qr-code p {
    color: var(--ink);
  }
  
  /*------------------------------------------*/
  /*  NEWSLETTER
  /*------------------------------------------*/
  
  .theme--dark .newsletter-section .form-control::-moz-placeholder { color: var(--gray); } 
  .theme--dark .newsletter-section .form-control:-ms-input-placeholder { color: var(--gray); } 
  .theme--dark .newsletter-section .form-control::-webkit-input-placeholder { color: var(--gray); } 
  
  .theme--dark .newsletter-1.newsletter-section .form-control,
  .theme--dark .newsletter-3.newsletter-section .form-control {
    background-color: var(--white-smoke);
  }
  
  .theme--dark .newsletter-1.newsletter-section .form-control:focus,
  .theme--dark .newsletter-3.newsletter-section .form-control:focus {
    background-color: var(--dark-theme-bg);
  }
  
  /*------------------------------------------*/
  /*  CONTACTS
  /*------------------------------------------*/
  
  .theme--dark .contact-form .form-control,
  .theme--dark .contact-form .form-select {
    background-color: var(--white-smoke);
    border: 1.5px solid var(--silver);
  }
  
  .theme--dark .contact-form .form-control:focus,
  .theme--dark .contact-form .form-select:focus {
    background-color: var(--dark-theme-bg);
    border: 1.5px solid var(--theme-color);
  }
  
  /*------------------------------------------*/
  /*  FOOTER
  /*------------------------------------------*/
  
  .theme--dark .footer-form .newsletter-form .input-group:focus-within {
    background-color: var(--dark-theme-bg)!important;
    border-color: var(--silver)!important;
  }
  
  /*------------------------------------------*/
  /*  INNER PAGE WRAPPER
  /*------------------------------------------*/
  
  .theme--dark .inner-page-title p span {
    color: var(--white);
  }
  
  /*------------------------------------------*/
  /*  TERMS, PRIVACY, COOKIES PAGES
  /*------------------------------------------*/
  
  .theme--dark .legal-info a,
  .theme--dark .legal-info p span {
    color: rgba(255, 255, 255, .86);
  }
  
  .theme--dark .legal-info a:hover {
    color: var(--theme-color);
  }
  
  /*------------------------------------------*/
  /*  MODAL
  /*------------------------------------------*/
  
  .theme--dark .modal .modal-body-content h4 {
    color: #313435;
  }
  
  .theme--dark .modal-body-content p {
    color: #6c757d;
  }
  
  .theme--dark .newsletter-form .hover--black:hover {
    color: #fff!important;
    border-color: #353f4f!important;
    background-color: #353f4f!important;
  }
  
  /*------------------------------------------*/
  /*  SIGN-IN / SIGN-UP PAGE
  /*------------------------------------------*/
  
  .theme--dark .separator-line::before, 
  .theme--dark .separator-line::after {
    border-top: 1.5px solid rgba(255, 255, 255, .18);
  }
  
  .theme--dark .reset-page-wrapper .form-control,
  .theme--dark .register-page-form .form-control {
    background-color: #2c3344;
    border: 1px solid #2c3344;
  }
  
  .theme--dark .reset-page-wrapper .form-control:focus,
  .theme--dark .register-page-form .form-control:focus {
    background-color: var(--dark-theme-bg);
    border-color: var(--theme-color);
  }
  
  .theme--dark .register-page-form .btn-google {
    color: var(--header-color);
    background-color: var(--white-smoke);
    border-color: var(--silver);
  }
  
  .theme--dark .register-page-form .btn-google:hover {
    border-color: var(--header-color);
  }
  
  
  
  
  /* ==========================================================================
     STYLE CHANGER 
    ========================================================================== */
  
  #stlChanger {
    position: fixed;
    z-index: 9999;
    overflow: hidden;
    left: -190px;
    top: 100px;
    cursor: pointer;
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    border-radius: 0;
    -webkit-transition: all 400ms ease-in-out;
    -moz-transition: all 400ms ease-in-out;
    -o-transition: all 400ms ease-in-out;
    -ms-transition: all 400ms ease-in-out;
    transition: all 400ms ease-in-out;
  }
  
  #stlChanger.open {
    left: 0px;
  }
  
  #stlChanger .bgChanger {
    min-width: 240px;
    min-height: 240px;
  }
  
  #stlChanger .blockChanger {
    width: 190px;
  }
  
  #stlChanger .chBody {
    background: #353f4f;
    width: 190px;
    position: relative;
    overflow: hidden;
    border: 1px solid #353f4f;
    border-radius: 0px 10px 10px 0px;
    height: 315px; 
    overflow: scroll; 
    overflow-x: hidden;
    direction: ltr;
    margin-right: 50px;
  }
  
  #stlChanger .chBody.chBody-sm {
    height: 260px; 
  }
  
  #stlChanger .chBut {
    background: #ef2853;
    width: 50px;
    height: 50px;
    position: absolute;
    top: 30px;
    right: 0;
    z-index: 1000000;
    text-align: center;
    border: 1px solid #ef2853;
    border-right: none;
    padding: 0 2px 0 0;
    border-radius: 0px 6px 6px 0px;
    -webkit-transition: all 300ms ease-in-out;
    -moz-transition: all 300ms ease-in-out;
    -o-transition: all 300ms ease-in-out;
    -ms-transition: all 300ms ease-in-out;
    transition: all 300ms ease-in-out;
  }
  
  #stlChanger .chBut [class*="flaticon-"]:before,
  #stlChanger .chBut [class*="flaticon-"]:after {   
    color: var(--white);
    font-size: 1.6rem;
    line-height: 48px!important;
  }
  
  .stBlock {
    margin: 25px 18px 0;
  }
  
  #stlChanger p {
    color: var(--white);
    font-size: 0.85rem;
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-weight: 600;
    letter-spacing: 0;
    margin-bottom: 16px;
  }
  
  #stlChanger .stBgs a {
    text-decoration: none;
    width: 44px;
    height: 44px;
    float: right;
    padding: 0;
    margin-bottom: 10px;
    cursor: pointer;
    opacity: 1;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    border-radius: 6px;
  }
  
  .stB1, .stB2, .stB4, 
  .stB5, .stB7, .stB8 {
    margin-left: 10px;
  }
  
  #stlChanger .stBgs a img {
    width: 44px;
    height: 44px;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    border-radius: 6px;
  }
  
  .stBlock1 {
    margin: 0 18px 25px;
  }
  
  .stBlock1 .btn {
    width: 100%;
    font-size: 0.85rem!important;
    line-height: 1;
    padding: 0.55rem 1.2rem;
    margin-top: 10px;
  }
  
  .switch {
    color: var(--white);
    font-size: 0.85rem!important;
    padding: 0.35rem 1.2rem;
    border: 2px solid var(--white);
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    border-radius: 6px;
     -webkit-transition: all 400ms ease-in-out;
    -moz-transition: all 400ms ease-in-out;
    -o-transition: all 400ms ease-in-out;
    -ms-transition: all 400ms ease-in-out;
    transition: all 400ms ease-in-out;
  }
  
  .switch:hover {
    color: #2b2e37!important;
    background-color: var(--white);
    border: 2px solid var(--white);
  }
  
  
  
  
  /* ==========================================================================
    XXXXX
    ========================================================================== */ 
  
  .t-title {
    text-align: center; 
    color: var(--white);
    background-color: var(--ink);
    padding: 10px 5px; 
    margin: 0;
  }
  
  .buttons-section .col-md-6,
  .buttons-section .col-xl-4,
  .buttons-section .col-xl-8,
  .buttons-section .col-lg-4,
  .buttons-section .col-lg-6 {
    padding-top: 10px;
    padding-bottom: 10px;
  }
  
  .t-title.btn-s-title {
    margin: 0;
  }
  
  .t-title h6 {
    color: var(--white);
    margin-bottom: 0;
  }