@import url('https://v1.fontapi.ir/css/Vazir');

html {
    -webkit-font-smoothing: antialiased;
    font-size: 16px;
}

body {
    font-family: 'Vazir', sans-serif;
    color: var(--color-text);
    line-height: 1.6666;
    font-weight: 400;
    direction: rtl;
    text-align: right;

}

.container {
    position: relative;
    z-index: 3;
}

.rtl-direction {
    text-align: left!important;
}

/*------------------------------------------*/
/*  PAGE CONTENT
/*------------------------------------------*/

#page { overflow: hidden; }


/*------------------------------------------*/
/*  SPACING & INDENTS
/*------------------------------------------*/

.wide-100 { padding-top: 100px; padding-bottom: 100px; }
.wide-90 { padding-top: 100px; padding-bottom: 90px; }
.wide-80 { padding-top: 100px; padding-bottom: 80px; }
.wide-70 { padding-top: 100px; padding-bottom: 70px; }
.wide-60 { padding-top: 100px; padding-bottom: 60px; }
.wide-50 { padding-top: 100px; padding-bottom: 50px; }
.wide-40 { padding-top: 100px; padding-bottom: 40px; }
.wide-30 { padding-top: 100px; padding-bottom: 30px; }
.wide-20 { padding-top: 100px; padding-bottom: 20px; }

/*------------------------------------------*/
/*  Margin Top
/*------------------------------------------*/

.mt-100 { margin-top: 100px; }
.mt-95 { margin-top: 95px; }
.mt-90 { margin-top: 90px; }
.mt-85 { margin-top: 85px; }
.mt-80 { margin-top: 80px; }
.mt-75 { margin-top: 75px; }
.mt-70 { margin-top: 70px; }
.mt-65 { margin-top: 65px; }
.mt-60 { margin-top: 60px; }
.mt-55 { margin-top: 55px; }
.mt-50 { margin-top: 50px; }
.mt-45 { margin-top: 45px; }
.mt-40 { margin-top: 40px; }
.mt-35 { margin-top: 35px; }
.mt-30 { margin-top: 30px; }
.mt-25 { margin-top: 25px; }
.mt-20 { margin-top: 20px; }
.mt-15 { margin-top: 15px; }
.mt-10 { margin-top: 10px; }
.mt-5 { margin-top: 5px!important; }
.mt-0 { margin-top: 0; }

/*------------------------------------------*/
/*  Margin Top Inverse
/*------------------------------------------*/

.mt-inverse-150 { margin-top: -150px; }
.mt-inverse-140 { margin-top: -140px; }
.mt-inverse-130 { margin-top: -130px; }
.mt-inverse-120 { margin-top: -120px; }
.mt-inverse-110 { margin-top: -110px; }
.mt-inverse-100 { margin-top: -100px; }
.mt-inverse-90 { margin-top: -90px; }
.mt-inverse-80 { margin-top: -80px; }
.mt-inverse-70 { margin-top: -70px; }
.mt-inverse-60 { margin-top: -60px; }
.mt-inverse-50 { margin-top: -50px; }
.mt-inverse-40 { margin-top: -40px; }
.mt-inverse-30 { margin-top: -30px; }
.mt-inverse-20 { margin-top: -20px; }

/*------------------------------------------*/
/*  Margin Bottom
/*------------------------------------------*/

.mb-100 { margin-bottom: 100px; }
.mb-95 { margin-bottom: 95px; }
.mb-90 { margin-bottom: 90px; }
.mb-85 { margin-bottom: 85px; }
.mb-80 { margin-bottom: 80px; }
.mb-75 { margin-bottom: 75px; }
.mb-70 { margin-bottom: 70px; }
.mb-65 { margin-bottom: 65px; }
.mb-60 { margin-bottom: 60px; }
.mb-55 { margin-bottom: 55px; }
.mb-50 { margin-bottom: 50px; }
.mb-45 { margin-bottom: 45px; }
.mb-40 { margin-bottom: 40px; }
.mb-35 { margin-bottom: 35px; }
.mb-30 { margin-bottom: 30px; }
.mb-25 { margin-bottom: 25px; }
.mb-20 { margin-bottom: 20px; }
.mb-15 { margin-bottom: 15px; }
.mb-10 { margin-bottom: 10px; }
.mb-5 { margin-bottom: 5px!important; }
.mb-0 { margin-bottom: 0; }

/*------------------------------------------*/
/*  Margin Left
/*------------------------------------------*/

.ml-100 { margin-right: 100px; }
.ml-95 { margin-right: 95px; }
.ml-90 { margin-right: 90px; }
.ml-85 { margin-right: 85px; }
.ml-80 { margin-right: 80px; }
.ml-75 { margin-right: 75px; }
.ml-70 { margin-right: 70px; }
.ml-60 { margin-right: 60px; }
.ml-55 { margin-right: 55px; }
.ml-50 { margin-right: 50px; }
.ml-45 { margin-right: 45px; }
.ml-40 { margin-right: 40px; }
.ml-35 { margin-right: 35px; }
.ml-30 { margin-right: 30px; }
.ml-25 { margin-right: 25px; }
.ml-20 { margin-right: 20px; }
.ml-15 { margin-right: 15px; }
.ml-10 { margin-right: 10px; }
.ml-5 { margin-right: 5px!important; }

/*------------------------------------------*/
/*  Margin Right
/*------------------------------------------*/

.mr-100 { margin-left: 100px; }
.mr-95 { margin-left: 95px; }
.mr-90 { margin-left: 90px; }
.mr-85 { margin-left: 85px; }
.mr-80 { margin-left: 80px; }
.mr-75 { margin-left: 75px; }
.mr-70 { margin-left: 70px; }
.mr-65 { margin-left: 65px; }
.mr-60 { margin-left: 60px; }
.mr-55 { margin-left: 55px; }
.mr-50 { margin-left: 50px; }
.mr-45 { margin-left: 45px; }
.mr-40 { margin-left: 40px; }
.mr-35 { margin-left: 35px; }
.mr-30 { margin-left: 30px; }
.mr-25 { margin-left: 25px; }
.mr-20 { margin-left: 20px; }
.mr-15 { margin-left: 15px; }
.mr-10 { margin-left: 10px; }
.mr-5 { margin-left: 5px!important; }

/*------------------------------------------*/
/*  Padding Top
/*------------------------------------------*/

.pt-100 { padding-top: 100px; }
.pt-95 { padding-top: 95px; }
.pt-90 { padding-top: 90px; }
.pt-85 { padding-top: 85px; }
.pt-80 { padding-top: 80px; }
.pt-75 { padding-top: 75px; }
.pt-70 { padding-top: 70px; }
.pt-65 { padding-top: 65px; }
.pt-60 { padding-top: 60px; }
.pt-55 { padding-top: 55px; }
.pt-50 { padding-top: 50px; }
.pt-45 { padding-top: 45px; }
.pt-40 { padding-top: 40px; }
.pt-35 { padding-top: 35px; }
.pt-30 { padding-top: 30px; }
.pt-25 { padding-top: 25px; }
.pt-20 { padding-top: 20px; }
.pt-15 { padding-top: 15px; }
.pt-10 { padding-top: 10px; }
.pt-5 { padding-top: 5px!important; }

/*------------------------------------------*/
/*  Padding Bottom
/*------------------------------------------*/

.pb-200 { padding-bottom: 200px; }
.pb-190 { padding-bottom: 190px; }
.pb-180 { padding-bottom: 180px; }
.pb-170 { padding-bottom: 170px; }
.pb-160 { padding-bottom: 160px; }
.pb-150 { padding-bottom: 150px; }
.pb-100 { padding-bottom: 100px; }
.pb-95 { padding-bottom: 95px; }
.pb-90 { padding-bottom: 90px; }
.pb-85 { padding-bottom: 85px; }
.pb-80 { padding-bottom: 80px; }
.pb-75 { padding-bottom: 75px; }
.pb-70 { padding-bottom: 70px; }
.pb-65 { padding-bottom: 65px; }
.pb-60 { padding-bottom: 60px; }
.pb-55 { padding-bottom: 55px; }
.pb-50 { padding-bottom: 50px; }
.pb-45 { padding-bottom: 45px; }
.pb-40 { padding-bottom: 40px; }
.pb-35 { padding-bottom: 35px; }
.pb-30 { padding-bottom: 30px; }
.pb-25 { padding-bottom: 25px; }
.pb-20 { padding-bottom: 20px; }
.pb-15 { padding-bottom: 15px; }
.pb-10 { padding-bottom: 10px; }
.pb-5 { padding-bottom: 5px!important; }

/*------------------------------------------*/
/*  Padding Left
/*------------------------------------------*/

.pl-100 { padding-right: 100px; }
.pl-95 { padding-right: 95px; }
.pl-90 { padding-right: 90px; }
.pl-85 { padding-right: 85px; }
.pl-80 { padding-right: 80px; }
.pl-75 { padding-right: 75px; }
.pl-70 { padding-right: 70px; }
.pl-65 { padding-right: 65px; }
.pl-60 { padding-right: 60px; }
.pl-55 { padding-right: 55px; }
.pl-50 { padding-right: 50px; }
.pl-45 { padding-right: 45px; }
.pl-40 { padding-right: 40px; }
.pl-35 { padding-right: 35px; }
.pl-30 { padding-right: 30px; }
.pl-25 { padding-right: 25px; }
.pl-20 { padding-right: 20px; }
.pl-15 { padding-right: 15px; }
.pl-10 { padding-right: 10px; }
.pl-5 { padding-right: 5px!important; }

/*------------------------------------------*/
/*  Padding Right
/*------------------------------------------*/

.pr-100 { padding-left: 100px; }
.pr-95 { padding-left: 95px; }
.pr-90 { padding-left: 90px; }
.pr-85 { padding-left: 85px; }
.pr-80 { padding-left: 80px; }
.pr-75 { padding-left: 75px; }
.pr-70 { padding-left: 70px; }
.pr-65 { padding-left: 65px; }
.pr-60 { padding-left: 60px; }
.pr-55 { padding-left: 55px; }
.pr-50 { padding-left: 50px; }
.pr-45 { padding-left: 45px; }
.pr-40 { padding-left: 40px; }
.pr-35 { padding-left: 35px; }
.pr-30 { padding-left: 30px; }
.pr-25 { padding-left: 25px; }
.pr-20 { padding-left: 20px; }
.pr-15 { padding-left: 15px; }
.pr-10 { padding-left: 10px; }
.pr-5 { padding-left: 5px!important; }

/*------------------------------------------*/
/*  Padding Centered
/*------------------------------------------*/

.pc-70 { padding-left: 70px; padding-right: 70px; }
.pc-65 { padding-left: 65px; padding-right: 65px; }
.pc-60 { padding-left: 60px; padding-right: 60px; }
.pc-55 { padding-left: 55px; padding-right: 55px; }
.pc-50 { padding-left: 50px; padding-right: 50px; }
.pc-45 { padding-left: 45px; padding-right: 45px; }
.pc-40 { padding-left: 40px; padding-right: 40px; }
.pc-35 { padding-left: 35px; padding-right: 35px; }
.pc-30 { padding-left: 30px; padding-right: 30px; }
.pc-25 { padding-left: 25px; padding-right: 25px; }
.pc-20 { padding-left: 20px; padding-right: 20px; }
.pc-15 { padding-left: 15px; padding-right: 15px; }
.pc-10 { padding-left: 10px; padding-right: 10px; }

/*------------------------------------------*/
/*  BACKGROUND SETTINGS
/*------------------------------------------*/

.rel {
    position: relative!important;
    z-index: 3;
}

.bg-fixed,
.bg-scroll {
    width: 100%;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
}

.bg-scroll {
    background-attachment: fixed!important;
}

/*------------------------------------------*/
/*  Background Colors
/*------------------------------------------*/

.bg-dark { background-color: #282B38!important; }
.bg-deepdark { background-color: #222d3d; }
.bg-white { background-color: #fff!important; }
.bg-lightgrey { background-color: #f6f7f8; }
.bg-grey { background-color: #f3f4f5; }
.bg-whitesmoke { background-color: #f4f4f9; }
.bg-lavender { background-color: #ecf1f4; }
.bg-snow { background-color: #FFFFFF; }
.bg-blue { background-color: #0f53fa; }
.bg-indigo { background-color: #62147e; }
.bg-skyblue { background-color: #0195ff; }
.bg-stateblue { background-color: #6064e3; }
.bg-green { background-color: #0fbc49; }
.bg-magenta { background-color: #562d57; }
.bg-orange-red { background-color: #ff523d; }
.bg-pink { background-color: #eb1561; }
.bg-plum { background-color: #e8daf5; }
.bg-purple { background-color: #6a26da; }
.bg-red { background-color: #f6412d; }
.bg-salmon { background-color: #ff523d; }
.bg-violet { background-color: #9400d3; }
.bg-violet-red { background-color: #c73e9b; }
.bg-deepyellow { background-color: #ffa755; }

/*------------------------------------------*/
/*  Transparent Background Colors
/*------------------------------------------*/

.bg-tra { background-color: transparent; border: 1px solid #aaa;  }
.bg-tra-dark { background-color: rgba(10, 10, 10, .15); }
.bg-tra-white { background-color: rgba(255, 255, 255, .15); }
.bg-tra-grey { background-color: rgba(17, 36, 70, .04); }
.bg-tra-blue { background-color: rgba(37, 138, 255, .08); }
.bg-tra-skyblue { background: rgba(13, 135, 231, .08); }
.bg-tra-green { background-color: rgba(15, 188, 73, .08); }
.bg-tra-orange { background: rgba(255, 107, 15, .08); }
.bg-tra-purple { background-image: linear-gradient(190deg, var(--color-1) 48%, var(--color-2) 77%); }
.bg-tra-teal { background: rgba(0, 128, 128, .08); }
.bg-tra-red { background-color: rgba(240, 64, 55, .08); }
.bg-tra-paleviolet { background: rgba(199, 62, 155, .08); }
.bg-tra-salmon { background-color: rgba(255, 82, 61, .08); }
.bg-tra-violet { background: rgba(148, 0, 211, .08); }
.bg-tra-yellow { background: rgba(255, 179, 12, .08); }

/*------------------------------------------*/
/*  Gradient Background Colors
/*------------------------------------------*/

.bg-dark-gradient {
    background-image: linear-gradient(-180deg, #1d293f, #282B38);
}

.bg-whitesmoke-gradient {
    background-image: linear-gradient(-180deg, rgba(244, 244, 249, .8) 50%, rgba(244, 244, 249, .05) 100%);
}

.bg-lavender-gradient {
    background-image: linear-gradient(-180deg, rgba(236, 241, 244, .5) 50%, rgba(236, 241, 244, .05) 100%);
}

.bg-plum-gradient {
    background-image: linear-gradient(-180deg, rgba(232, 218, 245, .5) 50%, rgba(236, 241, 244, .05) 100%);
}

.bg-skyblue-gradient {
    background: linear-gradient(-140deg, #1b78e0, #004899);
}

.bg-stateblue-gradient {
    background-image: linear-gradient(-180deg, rgba(65, 62, 101, 1), rgba(76, 72, 119, 1));
}

.bg-purple-gradient {
    background-image: linear-gradient(48deg, #8731e8 0%, #4528dc 100%);
}

/*------------------------------------------*/
/*  Image Background
/*------------------------------------------*/

.bg-01, .bg-02, .bg-03, .bg-04, .bg-05, .bg-06, .bg-07, .bg-08 {
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    background-attachment: fixed!important;
}



/*------------------------------------------*/
/*  WAVE SHAPE BOTTOM
/*------------------------------------------*/

.wave-shape-bottom {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 100%;
}

.wave-shape-top {
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;
}

/*------------------------------------------*/
/*  SECTION DIVIDER
/*------------------------------------------*/

.section-divider {
    display: inline-block;
    max-width: 1150px;
    position: relative;
    top: -15px;
    width: 100%;
    border: 0;
    height: 2px;
    background-image: linear-gradient(-90deg,white 0%,#f1f1f1 12%,#dedede 50%,#f4f4f4 88%,white 100%);
}

.section-divider:before {
    position: absolute;
    content: "";
    display: inline-block;
    width: 30px;
    height: 30px;
    transform: rotate(-45deg);
    border-bottom: 2px solid #dedede;
    border-left: 2px solid #dedede;
    top: -14px;
    right: 49%;
    background: #fff;
    z-index: 2;
}

.bg-lightgrey .section-divider:before {
    background: #f6f7f8;
}

.newsletter-section hr {
    background-color: transparent;
    background-image: linear-gradient(-90deg, rgba(206,211,246,0) 0, #bbb 38%, #bbb 64%, rgba(206,211,246,0) 99%);
    opacity: .3;
    margin: 30px 0 0;
}

.newsletter-section.bg-dark hr {
    background-image: linear-gradient(-90deg, rgba(206,211,246,0) 0, #ced3f6 38%, #ced3f6 64%, rgba(206,211,246,0) 99%);
}

hr.divider {
    background-color: transparent;
    background-image: linear-gradient(-90deg, rgba(206,211,246,0) 0, #bbb 38%, #bbb 64%, rgba(206,211,246,0) 99%);
    opacity: .3;
    margin: 0;
}




/* ==========================================================================
  02. TYPOGRAPHY
  =========================================================================== */

/*------------------------------------------*/
/*  HEADERS
/*------------------------------------------*/

h1, h2, h3, h4, h5, h6 {
    color: var(--color-text);
    font-family: 'Vazir', sans-serif;
    font-weight: 500;
    letter-spacing: -0.75px;
}

h4, h5, h6 {
    line-height: 1.3;
}

footer,.txt-block,.txt-block h2 {
    color: #000;
}

/* Header H6 */
h6.h6-xs { font-size: 1rem; }        /* 16px */
h6.h6-sm { font-size: 1.0625rem; }   /* 17px */
h6.h6-md { font-size: 1.125rem; }    /* 18px */
h6.h6-lg {font-size: .9rem;}   /* 19px */
h6.h6-xl { font-size: 1.25rem; }     /* 20px */

/* Header H5 */
h5.h5-xs { font-size: 1.3125rem; }  /* 21px */
h5.h5-sm { 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 */

/* Header H4 */
h4.h4-xs { font-size: 1.875rem; }   /* 30px */
h4.h4-sm { font-size: 2rem; }       /* 32px */
h4.h4-md { font-size: 2.125rem; }   /* 34px */
h4.h4-lg { font-size: 2.25rem; }    /* 36px */
h4.h4-xl { font-size: 2.375rem; }   /* 38px */

h3.h3-xs { font-size: 2.5rem; }     /* 40px */
h3.h3-sm { font-size: 2.625rem; }   /* 42px */
h3.h3-md { font-size: 2.75rem; }    /* 44px */
h3.h3-lg { font-size: 2.875rem; }   /* 46px */
h3.h3-xl { font-size: 3rem; }       /* 48px */

/* Header H2 */
h2.h2-xs { font-size: 3.125rem; }   /* 50px */
h2.h2-sm { font-size: 3.25rem; }    /* 52px */
h2.h2-md { font-size: 3.375rem; }   /* 54px */
h2.h2-lg { font-size: 3.5rem; }     /* 56px */
h2.h2-xl { font-size: 3.75rem; }    /* 60px */

h2.h2-title-xs { font-size: 4.0625rem; letter-spacing: -1.5px; } /* 65px */
h2.h2-title-sm { font-size: 4.375rem; letter-spacing: -1.5px; }  /* 70px */
h2.h2-title-md { font-size: 4.6875rem; letter-spacing: -1.5px; } /* 75px */
h2.h2-title-lg { font-size: 5rem; letter-spacing: -1.5px; }      /* 80px */
h2.h2-title-xl { font-size: 5.3125rem; letter-spacing: -1.5px; } /* 85px */

.rtl-direction h5.h5-xs { font-size: 1.5rem; }     /* 24px */
.rtl-direction h5.h5-sm { font-size: 1.625rem; }   /* 26px */
.rtl-direction h5.h5-md { font-size: 1.625rem; }   /* 26px */
.rtl-direction h5.h5-lg { font-size: 1.625rem; }   /* 26px */
.rtl-direction h5.h5-xl { font-size: 1.75rem; }    /* 28px */

/*------------------------------------------*/
/*  PARAGRAPHS
/*------------------------------------------*/

p.p-sm { font-size: 1rem; }       /* 16px */
p { font-size: 1.0625rem; }       /* 17px */
p.p-md { font-size: 1.125rem; }   /* 18px */
p.p-lg { font-size: 1.1875rem; }  /* 19px */
p.p-xl { font-size: 1.25rem; }    /* 20px */

p.p-title-xs { font-size: 1.3125rem; }  /* 21px */
p.p-title-sm { font-size: 1.375rem; }   /* 22px */
p.p-title-md { font-size: 1.4375rem; }  /* 23px */
p.p-title-lg { font-size: 1.5rem; }     /* 24px */
p.p-title-xl { font-size: 1.5625rem; }  /* 25px */

.rtl-direction p.p-md { font-size: 1.25rem; }
.rtl-direction p.p-lg { font-size: 1.3125rem; }
.rtl-direction p.p-xl { font-size: 1.375rem; }

/*------------------------------------------*/
/*  LINK SETTINGS
/*------------------------------------------*/

a {
    color: #6c757d;
    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: #666;
    text-decoration: none;
}

.cadetblue-color a:hover {
    color: #f2f3f4;
}

a:focus {
    outline: none;
    text-decoration: none;
}

/*------------------------------------------*/
/*  LISTS
/*------------------------------------------*/

ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

/*------------------------------------------*/
/*  TEXT LIST
/*------------------------------------------*/

.txt-list li i {
    position: relative;
    font-size: 1.05rem;
    line-height: 1.5rem;
    float: right;
    margin-left: 10px;
    top: 2px;
}

.txt-list li p {
    overflow: hidden;
    margin-bottom: 10px;
}

ul.simple-list {
    list-style: disc;
    margin-right: 15px;
}

.rtl-direction ul.simple-list {
    direction: ltr;
    margin-right: 0;
    margin-left: 15px;
}

/*------------------------------------------*/
/*  NUMBER LIST
/*------------------------------------------*/

ol.num-list {
    margin-right: -20px;
}

ol.num-list li p {
    padding-right: 5px;
    margin-bottom: 5px;
}

ol.digit-list {
    padding: 0;
    margin-right: 15px;
}

ol.digit-list p {
    margin-bottom: 8px;
}

/*------------------------------------------*/
/*  BOX LIST
/*------------------------------------------*/

.box-list p {
    position: relative;
    font-weight: 400;
    padding-bottom: 8px;
    margin-bottom: 8px;
    border-bottom: 1px dashed #ddd;
}

.bg-dark .box-list p {
    border-bottom: 1px dashed #777;
}

.box-list p:last-child {
    position: relative;
    padding-bottom: 0;
    margin-bottom: 0;
    border-bottom: none;
}

.box-list p span {
    font-weight: 500;
    position: absolute;
    top: 0;
    left: 15px;
}

.bg-dark .box-list p span {
    color: #fff;
}

/*------------------------------------------*/
/*  BUTTON SETTINGS
/*------------------------------------------*/

.btn {
    background-color: transparent;
    color: #fff;
    font-size: 1.1rem;
    line-height: 1;
    font-weight: 500;
    padding: 16px 32px;
    border: 1px solid transparent;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    -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;
}

/*------------------------------------------*/
/*  Button Size
/*------------------------------------------*/

.btn.btn-sm {
    font-size: 1rem;
    padding: 13px 30px;
}

.btn.btn-md {
    font-size: 1.125rem;
    padding: 18px 34px;
}

.btn.btn-lg {
    font-size: 1.15rem;
    padding: 20px 36px;
}

.btn.btn-md.btn-transparent {
    padding: 18px 6px;
}

.btn.btn-lg.btn-transparent {
    padding: 20px 6px;
}

/*------------------------------------------*/
/*  Button Icon
/*------------------------------------------*/

.btn.ico-left span {
    position: relative;
    top: 1px;
    left: 3px;
}

.btn.ico-right span {
    position: relative;
    top: 1px;
    right: 3px;
}

.btn.ico-20.ico-left span {
    top: 4px;
    left: 6px;
}

/*------------------------------------------*/
/*  Button Color
/*------------------------------------------*/

.btn-transparent {
    padding: 16px 6px;
    background-color: transparent;
    border-color: transparent;
}

.white-color .btn-transparent:hover {
    color: #fff;
}

.dark-color.btn.btn-transparent:focus {
    color: #1d293f!important;
}

.btn-white,
.white-color .btn-white {
    color: #1d293f;
    background-color: #fff;
    border-color: #fff!important;
}

.btn-tra-white {
    color: #fff;
    background-color: transparent;
    border-color: #fff!important;
}

.scroll .btn-tra-white {
    color: #1d293f!important;
    background-color: transparent;
    border-color: #1d293f!important;
}

.btn-grey,
.white-color .btn-grey {
    color: #666;
    background-color: rgba(17, 36, 70, .04);
    border-color: rgba(17, 36, 70, .02)!important;
}

.btn-tra-grey,
.white-color .btn-tra-grey {
    color: #1d293f;
    background-color: transparent;
    border-color: #ccc!important;
}

.btn-black,
.white-color .btn-black {
    color: #fff;
    background-color: #1d293f;
    border-color: #1d293f;
}

.btn-tra-black,
.white-color .btn-tra-black {
    color: #1d293f;
    background-color: transparent;
    border-color: #1d293f;
}

.btn-blue,
.scroll .btn-blue,
.white-color .btn-blue,
.blue-hover:hover,
.scroll .blue-hover:hover,
.white-color .blue-hover:hover {
    color: #fff!important;
    background-color: #0f53fa;
    border-color: #0f53fa!important;
}

.btn-tra-blue,
.scroll .btn-tra-blue,
.white-color .btn-tra-blue,
.tra-blue-hover:hover,
.scroll .tra-blue-hover:hover,
.white-color .tra-blue-hover:hover {
    color: #0f53fa!important;
    background-color: transparent;
    border-color: #0f53fa!important;
}

.btn-green,
.scroll .btn-green,
.white-color .btn-green,
.green-hover:hover,
.scroll .green-hover:hover,
.white-color .green-hover:hover {
    color: #fff!important;
    background-color: #0fbc49;
    border-color: #0fbc49!important;
}

.btn-tra-green,
.scroll .btn-tra-green,
.white-color .btn-tra-green,
.tra-green-hover:hover,
.scroll .tra-green-hover:hover,
.white-color .tra-green-hover:hover {
    color: #0fbc49!important;
    background-color: transparent;
    border-color: #0fbc49!important;
}

.btn-indigo,
.scroll .btn-indigo,
.white-color .btn-indigo,
.indigo-hover:hover,
.scroll .indigo-hover:hover,
.white-color .indigo-hover:hover {
    color: #fff!important;
    background-color: #62147e;
    border-color: #62147e!important;
}

.btn-tra-indigo,
.scroll .btn-tra-indigo,
.white-color .btn-tra-indigo,
.tra-indigo-hover:hover,
.scroll .tra-indigo-hover:hover,
.white-color .tra-indigo-hover:hover {
    color: #62147e!important;
    background-color: transparent;
    border-color: #62147e!important;
}

.btn-orange-red,
.scroll .btn-orange-red,
.white-color .btn-orange-red,
.orange-red-hover:hover,
.scroll .orange-red-hover:hover,
.white-color .orange-red-hover:hover {
    color: #fff!important;
    background-color: #ff523d;
    border-color: #ff523d!important;
}

.btn-tra-orange-red,
.scroll .btn-tra-orange-red,
.white-color .btn-tra-orange-red,
.tra-orange-red-hover:hover,
.scroll .tra-orange-red-hover:hover,
.white-color .tra-orange-red-hover:hover {
    color: #ff523d!important;
    background-color: transparent;
    border-color: #ff523d!important;
}

.btn-pink,
.scroll .btn-pink,
.white-color .btn-pink,
.pink-hover:hover,
.scroll .pink-hover:hover,
.white-color .pink-hover:hover {
    color: #fff!important;
    background-color: #eb1561;
    border-color: #eb1561!important;
}

.btn-tra-pink,
.scroll .btn-tra-pink,
.white-color .btn-tra-pink,
.tra-pink-hover:hover,
.scroll .tra-pink-hover:hover,
.white-color .tra-pink-hover:hover {
    color: #eb1561!important;
    background-color: transparent;
    border-color: #eb1561!important;
}

.btn-purple,
.scroll .btn-purple,
.white-color .btn-purple,
.purple-hover:hover,
.scroll .purple-hover:hover,
.white-color .purple-hover:hover {
    color: #fff!important;
    background-color: #6a26da;
    border-color: #6a26da!important;
}

.btn-tra-purple,
.scroll .btn-tra-purple,
.white-color .btn-tra-purple,
.tra-purple-hover:hover,
.scroll .tra-purple-hover:hover,
.white-color .tra-purple-hover:hover {
    color: #6a26da!important;
    background-color: transparent;
    border-color: #6a26da!important;
}

.btn-red,
.scroll .btn-red,
.white-color .btn-red,
.red-hover:hover,
.scroll .red-hover:hover,
.white-color .red-hover:hover {
    color: #fff!important;
    background-color: #f6412d;
    border-color: #f6412d!important;
}

.btn-tra-red,
.scroll .btn-tra-red,
.white-color .btn-tra-red,
.tra-red-hover:hover,
.scroll .tra-red-hover:hover,
.white-color .tra-red-hover:hover {
    color: #f6412d!important;
    background-color: transparent;
    border-color: #f6412d!important;
}

.btn-skyblue,
.scroll .btn-skyblue,
.white-color .btn-skyblue,
.skyblue-hover:hover,
.scroll .skyblue-hover:hover,
.white-color .skyblue-hover:hover {
    color: #fff!important;
    background-color: #0195ff;
    border-color: #0195ff!important;
}

.btn-tra-skyblue,
.scroll .btn-tra-skyblue,
.white-color .btn-tra-skyblue,
.tra-skyblue-hover:hover,
.scroll .tra-skyblue-hover:hover,
.white-color .tra-skyblue-hover:hover {
    color: var(--color-1)!important;
    background-color: transparent;
    border-color: #0195ff!important;
}

.btn-stateblue,
.scroll .btn-stateblue,
.white-color .btn-stateblue,
.stateblue-hover:hover,
.scroll .stateblue-hover:hover,
.white-color .stateblue-hover:hover {
    color: var(--color-1)!important;
    background-color: var(--color-text);
    border-color: var(--color-text)!important;
}

.btn-tra-stateblue,
.scroll .btn-tra-stateblue,
.white-color .btn-tra-stateblue,
.tra-stateblue-hover:hover,
.scroll .tra-stateblue-hover:hover,
.white-color .tra-stateblue-hover:hover {
    color: var(--color-text)!important;
    background-color: transparent;
    border-color: var(--color-text)!important;
}

.btn-violet,
.scroll .btn-violet,
.white-color .btn-violet,
.violet-hover:hover,
.scroll .violet-hover:hover,
.white-color .violet-hover:hover {
    color: #fff!important;
    background-color: #9400d3;
    border-color: #9400d3!important;
}

.btn-tra-violet,
.scroll .btn-tra-violet,
.white-color .btn-tra-violet,
.tra-violet-hover:hover,
.scroll .tra-violet-hover:hover,
.white-color .tra-violet-hover:hover {
    color: #9400d3!important;
    background-color: transparent;
    border-color: #9400d3!important;
}

.btn-violet-red,
.scroll .btn-violet-red,
.white-color .btn-violet-red,
.violet-red-hover:hover,
.scroll .violet-red-hover:hover,
.white-color .violet-red-hover:hover {
    color: #fff!important;
    background-color: #c73e9b;
    border-color: #c73e9b!important;
}

.btn-tra-violet-red,
.scroll .btn-tra-violet-red,
.white-color .btn-tra-violet-red,
.tra-violet-red-hover:hover,
.scroll .tra-violet-red-hover:hover,
.white-color .tra-violet-red-hover:hover {
    color: #c73e9b!important;
    background-color: transparent;
    border-color: #c73e9b!important;
}

.btn-yellow,
.scroll .btn-yellow,
.white-color .btn-yellow,
.yellow-hover:hover,
.scroll .yellow-hover:hover,
.white-color .yellow-hover:hover {
    color: #1d293f!important;
    background-color: #ffb30c;
    border-color: #ffb30c!important;
}

.btn-tra-yellow,
.scroll .btn-tra-yellow,
.white-color .btn-tra-yellow,
.tra-yellow-hover:hover,
.scroll .tra-yellow-hover:hover,
.white-color .tra-yellow-hover:hover {
    color: #1d293f!important;
    background-color: transparent;
    border-color: #ffb30c!important;
}

/*------------------------------------------*/
/*  Button Hover
/*------------------------------------------*/

.white-hover:hover,
.scroll .white-hover:hover {
    color: #1d293f!important;
    background-color: #fff;
    border-color: #fff!important;
}

.tra-white-hover:hover,
.white-color .tra-white-hover:hover {
    color: #fff!important;
    background-color: transparent;
    border-color: #fff!important;
}

.scroll .tra-white-hover:hover {
    color: #1d293f!important;
    background-color: transparent;
    border-color: #1d293f!important;
}

.dark-menu .scroll .tra-white-hover:hover {
    color: #fff!important;
    background-color: transparent;
    border-color: #fff!important;
}

.black-hover:hover,
.scroll .black-hover:hover,
.white-color .black-hover:hover {
    color: #fff!important;
    background-color: #1d293f;
    border-color: #1d293f!important;
}

.tra-black-hover:hover,
.scroll .tra-black-hover:hover
.white-color .tra-black-hover:hover {
    color: #1d293f!important;
    background-color: transparent;
    border-color: #1d293f!important;
}

.grey-hover:hover,
.scroll .grey-hover:hover {
    color: #1d293f!important;
    background-color: rgba(17, 36, 70, .04);
    border-color: rgba(17, 36, 70, .02)!important;
}

.tra-grey-hover:hover,
.scroll .tra-grey-hover:hover {
    color: #1d293f!important;
    background-color: transparent;
    border-color: #ccc!important;
}

/*------------------------------------------*/
/*  Button Focus
/*------------------------------------------*/

.btn:focus {
    color: #fff;
    -webkit-box-shadow: none;
    box-shadow: none;
}

.btn.btn-black:focus {
    color: #fff;
    -webkit-box-shadow: none;
    box-shadow: none;
}

.btn-grey:focus {
    color: #666;
    -webkit-box-shadow: none;
    box-shadow: none;
}

.btn-tra-black:focus,
.btn.btn-tra-grey:focus {
    color: #333;
    -webkit-box-shadow: none;
    box-shadow: none;
}

/* ==========================================================================
  03. PRELOAD ANIMATION
  ========================================================================== */

#loading {
    background-color: #fff;
    height: 100%;
    width: 100%;
    position: fixed;
    z-index: 1;
    margin-top: 0px;
    top: 0px;
    z-index: 99999999;
}

#loading-center {
    width: 100%;
    height: 100%;
    position: relative;
}

#loading-center-absolute {
    position: absolute;
    right: 50%;
    top: 50%;
    height: 60px;
    width: 60px;
    margin-top: -30px;
    margin-right: -30px;
    -webkit-animation: loading-center-absolute 1s infinite;
    animation: loading-center-absolute 1s infinite;
}

.object {
    width: 20px;
    height: 20px;
    background-color: #0195ff;
    float: right;
    -moz-border-radius: 50% 50% 50% 50%;
    -webkit-border-radius: 50% 50% 50% 50%;
    border-radius: 50% 50% 50% 50%;
    margin-left: 20px;
    margin-bottom: 20px;
}

.stateblue-loading .object { background-color: var(--color-1); }

.object:nth-child(2n+0) {
    margin-left: 0px;
}

#object_one {
    -webkit-animation: object_one 1s infinite;
    animation: object_one 1s infinite;
}

#object_two {
    -webkit-animation: object_two 1s infinite;
    animation: object_two 1s infinite;
}

#object_three {
    -webkit-animation: object_three 1s infinite;
    animation: object_three 1s infinite;
}

#object_four {
    -webkit-animation: object_four 1s infinite;
    animation: object_four 1s infinite;
}

@-webkit-keyframes loading-center-absolute{
    100% {
        -ms-transform: rotate(-360deg);
        -webkit-transform: rotate(-360deg);
        transform: rotate(-360deg);
    }
}

@keyframes loading-center-absolute{
    100% {
        -ms-transform: rotate(-360deg);
        -webkit-transform: rotate(-360deg);
        transform: rotate(-360deg);
    }
}

@-webkit-keyframes object_one{
    50% {
        -ms-transform: translate(-20px,20px);
        -webkit-transform: translate(-20px,20px);
        transform: translate(-20px,20px);
    }
}

@keyframes object_one{
    50% {
        -ms-transform: translate(-20px,20px);
        -webkit-transform: translate(-20px,20px);
        transform: translate(-20px,20px);
    }
}

@-webkit-keyframes object_two{
    50% {
        -ms-transform: translate(20px,20px);
        -webkit-transform: translate(20px,20px);
        transform: translate(20px,20px);
    }
}

@keyframes object_two{
    50% {
        -ms-transform: translate(20px,20px);
        -webkit-transform: translate(20px,20px);
        transform: translate(20px,20px);
    }
}

@-webkit-keyframes object_three{
    50% {
        -ms-transform: translate(-20px,-20px);
        -webkit-transform: translate(-20px,-20px);
        transform: translate(-20px,-20px);
    }
}

@keyframes object_three{
    50% {
        -ms-transform: translate(-20px,-20px);
        -webkit-transform: translate(-20px,-20px);
        transform: translate(-20px,-20px);
    }
}

@-webkit-keyframes object_four{
    50% {
        -ms-transform: translate(20px,-20px);
        -webkit-transform: translate(20px,-20px);
        transform: translate(20px,-20px);
    }
}
@keyframes object_four{
    50% {
        -ms-transform: translate(20px,-20px);
        -webkit-transform: translate(20px,-20px);
        transform: translate(20px,-20px);
    }
}





/* ==========================================================================
  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.hiddden-header {
    display: none;
}

.hidden-nav .wsmainfull {
    margin-top: -100px;
    -webkit-box-shadow: 0 2px 3px rgba(96, 96, 96, .1);
    -moz-box-shadow: 0 2px 3px rgba(96, 96, 96, .1);
    box-shadow: 0 2px 3px rgba(96, 96, 96, .1);
    -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;
}

.hidden-nav .wsmainfull.scroll {
    margin-top: 0;
}

.rtl-direction .desktoplogo {
    float: left;
}

.rtl-direction .wsmenu {
    float: right;
}

.rtl-direction .wsmenu > .wsmenu-list > li {
    float: left;
}

/*------------------------------------------*/
/*  HEADER LOGO
/*------------------------------------------*/

.desktoplogo img {
    width: auto;
    max-width: inherit;
    max-height: 38px;
}

/*------------------------------------------*/
/*   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 {
    background-color: rgba(255,255,255,0.7)!important;
    padding: 20px 0;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
}

.white-menu .wsmainfull {
    background-color: #fff!important;
    padding: 5px 0;
    -webkit-box-shadow: 0 2px 3px rgba(96, 96, 96, .1);
    -moz-box-shadow: 0 2px 3px rgba(96, 96, 96, .1);
    box-shadow: 0 2px 3px rgba(96, 96, 96, .1);
}

/*------------------------------------------*/
/*  HEADER LINK
/*------------------------------------------*/

.wsmenu > .wsmenu-list > li > a {
    display: block;
    font-size: 17px;
    font-weight: 500;
    letter-spacing: 0;
    margin: 0 7px;
    padding: 10px 15px;
    line-height: 50px;
    text-decoration: none;
}

.rtl-direction .wsmenu > .wsmenu-list > li > a {
    font-size: 22px;
    text-align: left!important;
}

.navbar-dark .wsmenu > .wsmenu-list > li > a {
    color: #2c3e50;
}

.navbar-light .wsmenu > .wsmenu-list > li > a {
    color: #fff;
}

.wsmenu > .wsmenu-list > li > a.last-link {
    padding: 10px 0px;
    margin: 0 7px 0 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: 33px;
    width: 0;
}

/*------------------------------------------*/
/*  HEADER BUTTONS
/*------------------------------------------*/

.wsmenu > .wsmenu-list > li a.btn {
    font-size: 16.5px;
    line-height: 30px;
    font-weight: 500;
    text-transform: none;
    letter-spacing: 0;
    margin-top: 14px;
    margin-right: 12px;
    padding: 5px 30px;
}

.rtl-direction .wsmenu > .wsmenu-list > li a.btn {
    font-size: 20px;
}

.wsmenu > .wsmenu-list > li a.header-store {
    margin: 8px 12px 0 0;
    padding: 0;
}

/*------------------------------------------*/
/*  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;
    line-height: 70px!important;
    margin-right: 15px;
}

.header-socials a span {
    position: relative;
    top: 5px;
}

.header-socials.ico-20 [class*="flaticon-"]:before,
.header-socials.ico-20 [class*="flaticon-"]:after { font-size: 1.4rem; }

/*------------------------------------------*/
/*  HERO-6
/*------------------------------------------*/

#hero-6 {
    position: relative;
    background-image: linear-gradient(190deg, var(--color-1) 48%, var(--color-2) 77%);
    padding-top: 150px;
    padding-bottom: 100px;
}

.hero-6-txt {
    padding-right: 20px;
    padding-left: 30px;
}

.hero-6-txt h2 {
    line-height: 1.25;
    margin-bottom: 30px;
}

#hero-6 .quick-form {
    margin: 45px 0 0 15px;
}

#hero-6 .quick-form .btn {
    padding: 13px 40px;
}

.hero-6-img {
    margin-bottom: -50px;
}


/*------------------------------------------*/
/*  BRANDS LOGO HOLDER
/*------------------------------------------*/

#brands-1 .brand-logo {
    padding: 0 24px;
    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;
}

#brands-2 .brand-logo {
    opacity: .8;
    padding: 0 10px;
    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;
}

#brands-1 .brand-logo:hover,
#brands-2 .brand-logo:hover {
    opacity: 1;
}

#brands-1 .owl-dots {
    display: none;
}





/* ==========================================================================
  17. CALL TO ACTION
  =========================================================================== */

#cta-2 {
    padding-top: 50px;
    padding-bottom: 50px;
}

#cta-3 {
    position: relative;
    margin-top: 90px;
}

#cta-4 {
    position: relative;
    margin-bottom: 90px;
}

.cta-3-holder {
    padding-top: 10px;
}

.cta-4-holder {
    padding-bottom: 10px;
}

.cta-box,.cta-11-wrapper {
    -webkit-border-radius: 16px;
    -moz-border-radius: 16px;
    -o-border-radius: 16px;
    border-radius: 16px;
    overflow: hidden;
    -webkit-box-shadow: 0px 15px 20px 0px rgba(5, 5, 5, .05);
    -moz-box-shadow: 0px 15px 20px 0px rgba(5, 5, 5, .05);
    box-shadow: 0px 15px 20px 0px rgba(5, 5, 5, .05);
}
.cta-11-wrapper {
    position: relative;
    border: 1px solid #efefef;
    padding: 55px 60px;
}
.cta-11-wrapper {
    padding: 55px 70px;
}
.cta-box-wrapper {
    padding: 0 10px 20px;
    margin-top: -100px;
}

.cta-box {
    border: 1px solid #efefef;
    padding: 35px 20px 40px;
}

.cta-txt {
    width: 80%;
    display: inline-block!important;
    padding-right: 5px;
}

.rtl-direction .cta-txt {
    padding-right: 0;
    padding-left: 5px;
}

.cta-ico {
    width: 20%;
    display: inline-block!important;
    float: right;
    margin-top: 2px;
    text-align: center;
}

.rtl-direction .cta-ico {
    float: left;
}

.rtl-direction .cta-11-txt {
    padding-left: 20px;
}


/*------------------------------------------*/
/*  BOTTOM FOOTER LINKS
/*------------------------------------------*/

.bottom-footer-list li {
    width: auto!important;
    display: inline-block!important;
    vertical-align: top;
    clear: none !important;
    padding-right: 10px;
}

.bottom-footer-list li.first-li {
    padding-right: 0;
}

.bottom-footer-list li:after {
    content: "|";
    padding-right: 11px;
    position: relative;
    top: 2px;
}

.bottom-footer-list li.last-li:after {
    content: " ";
    padding-right: 0;
}

.bottom-footer-list li p {
    display: inline-block;
    float: right;
    margin-bottom: 0;
}


/* ==========================================================================
  28. SCROLL TO TOP
  ========================================================================== */

#scrollUp {
    display: none;
    width: 44px;
    height: 44px;
    position: fixed;
    bottom: 30px;
    left: 25px;
    -webkit-border-radius: 100%;
    -moz-border-radius: 100%;
    border-radius: 100%;
    background-image: url(../images/back-to-top.png);
    background-repeat: no-repeat;
    background-position: 50% 48%;
    background-color: rgba(10, 10, 10, .25);
    -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;
}

#scrollUp:hover {
    background-color: rgba(0, 0, 0, .4);
}
nav a#pull {
    display: none;
}

.bottom-footer {
    margin-top: 35px;
}
a#wsnavtoggle {
    transform: rotate(180deg);
}
.smllogo img {
    float: right;
}