[class^="icon-"], [class*=" icon-"] {
    font-family: 'icomoon' !important;
    speak: never;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale
}

.icon-left-4-shape:before {
    content: "\e964"
}

.icon-minus1:before {
    content: "\e962"
}

.icon-plus1:before {
    content: "\e963"
}

.icon-information:before {
    content: "\e961"
}

.icon-smiling:before {
    content: "\e95f"
}

.icon-quotation1:before {
    content: "\e960"
}

.icon-plus:before {
    content: "\e95d"
}

.icon-delete:before {
    content: "\e95e"
}

.icon-minus:before {
    content: "\e95c"
}

.icon-phone:before {
    content: "\e959"
}

.icon-menu:before {
    content: "\e95a"
}

.icon-headphones:before {
    content: "\e95b"
}

.icon-tick-circle:before {
    content: "\e954"
}

.icon-down-chevron:before {
    content: "\e955"
}

.icon-right-chevron:before {
    content: "\e956"
}

.icon-left-chevron:before {
    content: "\e957"
}

.icon-up-chevron:before {
    content: "\e958"
}

.icon-close:before {
    content: "\e949"
}

.icon-left-arrow:before {
    content: "\e94a"
}

.icon-right-arrow:before {
    content: "\e94b"
}

.icon-up-arrow:before {
    content: "\e94c"
}

.icon-down-arrow:before {
    content: "\e94d"
}

.icon-up:before {
    content: "\e94e"
}

.icon-left:before {
    content: "\e94f"
}

.icon-right:before {
    content: "\e950"
}

.icon-down-arrow-circle:before {
    content: "\e951"
}

.icon-up-arrow-circle:before {
    content: "\e952"
}

.icon-right-arrow-circle:before {
    content: "\e953"
}

.icon-cube:before {
    content: "\e900"
}

.icon-bitcoin:before {
    content: "\e901"
}

.icon-mining:before {
    content: "\e902"
}

.icon-shield:before {
    content: "\e903"
}

.icon-network:before {
    content: "\e904"
}

.icon-bitcoin1:before {
    content: "\e905"
}

.icon-ripple:before {
    content: "\e906"
}

.icon-server:before {
    content: "\e907"
}

.icon-gpu:before {
    content: "\e908"
}

.icon-locked:before {
    content: "\e909"
}

.icon-plus-circle:before {
    content: "\e90a"
}

.icon-key:before {
    content: "\e90b"
}

.icon-mobile:before {
    content: "\e90c"
}

.icon-wallet:before {
    content: "\e90d"
}

.icon-mining1:before {
    content: "\e90e"
}

.icon-bitcoin2:before {
    content: "\e90f"
}

.icon-mining2:before {
    content: "\e910"
}

.icon-wallet1:before {
    content: "\e911"
}

.icon-blockchain:before {
    content: "\e912"
}

.icon-speech:before {
    content: "\e913"
}

.icon-firefighter:before {
    content: "\e914"
}

.icon-spreadsheet:before {
    content: "\e915"
}

.icon-telegram:before {
    content: "\e916"
}

.icon-shopping:before {
    content: "\e917"
}

.icon-settings:before {
    content: "\e918"
}

.icon-wallet2:before {
    content: "\e919"
}

.icon-house:before {
    content: "\e91a"
}

.icon-notes:before {
    content: "\e91b"
}

.icon-filtration:before {
    content: "\e91c"
}

.icon-image:before {
    content: "\e91d"
}

.icon-pickaxe:before {
    content: "\e91e"
}

.icon-chat:before {
    content: "\e91f"
}

.icon-settings1:before {
    content: "\e920"
}

.icon-symbols:before {
    content: "\e921"
}

.icon-search:before {
    content: "\e922"
}

.icon-wallet3:before {
    content: "\e923"
}

.icon-pencil:before {
    content: "\e924"
}

.icon-visibility:before {
    content: "\e925"
}

.icon-wrench:before {
    content: "\e926"
}

.icon-clock:before {
    content: "\e927"
}

.icon-calculator:before {
    content: "\e928"
}

.icon-pin:before {
    content: "\e929"
}

.icon-email:before {
    content: "\e92a"
}

.icon-shopping-cart:before {
    content: "\e92b"
}

.icon-waze:before {
    content: "\e92c"
}

.icon-invoice:before {
    content: "\e92d"
}

.icon-like:before {
    content: "\e92e"
}

.icon-cloud-computing:before {
    content: "\e92f"
}

.icon-fan:before {
    content: "\e930"
}

.icon-phone-call:before {
    content: "\e931"
}

.icon-list:before {
    content: "\e932"
}

.icon-down:before {
    content: "\e933"
}

.icon-google-maps:before {
    content: "\e934"
}

.icon-quotation:before {
    content: "\e935"
}

.icon-symbol:before {
    content: "\e936"
}

.icon-clock1:before {
    content: "\e937"
}

.icon-left-arrow-circle:before {
    content: "\e938"
}

.icon-list1:before {
    content: "\e939"
}

.icon-whatsapp:before {
    content: "\e93a"
}

.icon-telegram1:before {
    content: "\e93b"
}

.icon-youtube:before {
    content: "\e93c"
}

.icon-instagram:before {
    content: "\e93d"
}

.icon-twitter:before {
    content: "\e93e"
}

.icon-happy:before {
    content: "\e93f"
}

.icon-calendar:before {
    content: "\e940"
}

.icon-chat1:before {
    content: "\e941"
}

.icon-id-card:before {
    content: "\e942"
}

.icon-note:before {
    content: "\e943"
}

.icon-user:before {
    content: "\e944"
}

.icon-email1:before {
    content: "\e945"
}

.icon-mobile-phone:before {
    content: "\e946"
}

.icon-bitcoin3:before {
    content: "\e947"
}

.icon-repair:before {
    content: "\e948"
}

@font-face {
    font-family: "iransans";
    font-style: normal;
    font-weight: normal;
    src: url("../fonts/iransans/IRANSansWebFaNum.woff") format("woff")
}

@font-face {
    font-family: "iransans";
    font-style: normal;
    font-weight: 200;
    src: url("../fonts/iransans/IRANSansWebFaNumUltraLight.woff") format("woff")
}

@font-face {
    font-family: "iransans";
    font-style: normal;
    font-weight: 500;
    src: url("../fonts/iransans/IRANSansWebFaNumMedium.woff") format("woff")
}

@font-face {
    font-family: "iransans";
    font-style: normal;
    font-weight: 300;
    src: url("../fonts/iransans/IRANSansWebFaNumLight.woff") format("woff")
}

@font-face {
    font-family: "iransans";
    font-style: normal;
    font-weight: 700;
    src: url("../fonts/iransans/IRANSansWebFaNumBold.woff") format("woff")
}

@font-face {
    font-family: "kalameh";
    font-style: normal;
    font-weight: 800;
    src: url("../fonts/Kalameh/KalamehWebBlack.woff") format("woff")
}

@font-face {
    font-family: "kalameh";
    font-style: normal;
    font-weight: 700;
    src: url("../fonts/Kalameh/KalamehWebBold.woff") format("woff")
}

@font-face {
    font-family: "kalameh";
    font-style: normal;
    font-weight: normal;
    src: url("../fonts/Kalameh/KalamehWebRegular.woff") format("woff")
}

@font-face {
    font-family: "kalameh";
    font-style: normal;
    font-weight: 100;
    src: url("../fonts/Kalameh/KalamehWebThin.woff") format("woff")
}

@font-face {
    font-family: "OCRAStd";
    font-style: normal;
    font-weight: normal;
    src: url("../fonts/OCRAStd/OCRAStd.woff") format("woff")
}

@font-face {
    font-family: 'icomoon';
    src: url("../fonts/icon/icomoon.eot?hzmw93");
    src: url("../fonts/icon/icomoon.eot?hzmw93#iefix") format("embedded-opentype"), url("../fonts/icon/icomoon.ttf?hzmw93") format("truetype"), url("../fonts/icon/icomoon.woff?hzmw93") format("woff"), url("../fonts/icon/icomoon.svg?hzmw93#icomoon") format("svg");
    font-weight: normal;
    font-style: normal;
    font-display: block
}

body {
    font-family: iransans !important;
    text-align: right;
    direction: rtl;
    overflow-x: hidden
}

a {
    text-decoration: none !important
}

li {
    list-style: none !important
}

button, input {
    outline: none !important
}

input[type=number]::-webkit-inner-spin-button, input[type=number]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    margin: 0;
    font-family: yekanbakh !important
}

input[type=number] {
    -moz-appearance: textfield
}

.badge {
    padding: 1.25em 1.4em
}

.iziToast {
    font-family: inherit !important
}

.datepicker-plot-area {
    font: inherit !important;
    width: 300px
}

.nav-count-badge {
    position: absolute;
    top: 0;
    z-index: 10000;
    background: red;
    font-size: 10px !important;
    color: #fff !important;
    padding: 5px 7px !important;
    border-radius: 100% !important;
    width: 20px;
    height: 20px
}

.nav {
    padding: 0;
    margin: 0
}

.swiper-button-next, .swiper-button-prev {
    outline: none !important
}

h1, h2, h3, h4, h5, h6 {
    line-height: normal !important;
    margin: 0
}

.menu-responsive {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 99;
    padding-top: 30px;
    padding-bottom: 30px;
    display: none
}

.menu-responsive:after {
    content: '';
    position: absolute;
    display: block;
    width: 0;
    height: 0;
    border-radius: 50%;
    right: -10px;
    top: 70px;
    background: #0b3476;
    transform: translate(50%, -50%);
    -webkit-transform: translate(50%, -50%);
    -moz-transform: translate(50%, -50%);
    -ms-transform: translate(50%, -50%);
    -o-transform: translate(50%, -50%);
    transition: width 1s, height 1s;
    -webkit-transition: width 1s, height 1s;
    -moz-transition: width 1s, height 1s;
    -ms-transition: width 1s, height 1s;
    -o-transition: width 1s, height 1s;
    z-index: -1
}

.menu-responsive.show:after {
    width: 250%;
    height: 350%;
    right: 0;
    top: 0
}

.menu-responsive .brand {
    display: block;
    margin-bottom: 30px
}

.menu-responsive .brand img {
    max-width: 145px;
    max-height: 55px;
    display: block
}

.menu-responsive .btn {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: transparent;
    border-radius: 5px;
    padding: 0;
    position: absolute;
    top: 0px;
    left: 15px;
    cursor: pointer;
    z-index: 99
}

.menu-responsive .btn i {
    font-size: 28px;
    height: 28px;
    color: #ffffff;
    display: block
}

.menu-responsive .nav .nav-item {
    width: 100%
}

.menu-responsive .nav .nav-item .nav-link {
    font-size: 16px;
    color: #FFFFFF;
    display: block;
    padding: 10px 0px;
    position: relative
}

.menu-responsive .nav .nav-item .nav-link:hover:after {
    width: 10%
}

.menu-responsive .nav .nav-item .nav-link:after {
    content: '';
    position: absolute;
    bottom: 0;
    right: 0;
    width: 0;
    height: 1px;
    background-color: #ffffff;
    transition: all 0.3s
}

.header {
    overflow: hidden
}

.header .top-bar {
    padding: 50px 0px
}

.header .top-bar .brand {
    display: block;
    margin-left: 30px
}

.header .top-bar .brand img {
    max-width: 160px;
    max-height: 60px;
    display: block
}

.header .top-bar .nav:hover .nav-item .nav-link {
    opacity: 0.4
}

.header .top-bar .nav .nav-item {
    position: relative
}

.header .top-bar .nav .nav-item:last-child:after {
    display: none
}

.header .top-bar .nav .nav-item:after {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateX(-50%) translateY(-50%) rotate(15deg);
    width: 3px;
    height: 20px;
    border-radius: 4px;
    background-color: #e0e0e0
}

.header .top-bar .nav .nav-item .nav-link {
    font-size: 16px;
    color: #4c4c4c;
    font-weight: 500;
    display: block;
    padding: 5px 20px;
    opacity: 1;
    transition: all 0.3s
}

.header .top-bar .nav .nav-item .nav-link:hover {
    opacity: 1
}

.header .top-bar .call {
    display: flex;
    align-items: center;
    font-size: 16px;
    font-weight: 500;
    color: #ffffff;
    text-align: left;
    margin-right: auto
}

.header .top-bar .call i {
    font-size: 60px;
    height: 60px;
    display: block;
    margin-right: 15px
}

.header .top-bar .shape {
    position: absolute;
    top: -50px;
    left: 550px;
    z-index: -1;
    transform: translateX(-100%) translateY(-25%);
    max-height: 830px
}

.header .top-bar .nav-mobile {
    padding: 0;
    margin: 0;
    display: flex;
    align-items: center
}

.header .top-bar .nav-mobile .nav-item {
    margin-left: 10px
}

.header .top-bar .nav-mobile .nav-item:last-child {
    margin-left: 0
}

.header .top-bar .nav-mobile .nav-item .nav-link {
    cursor: pointer;
    width: 40px;
    height: 40px;
    border-radius: 5px;
    border: 2px solid #e5e5e5;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center
}

.header .top-bar .nav-mobile .nav-item .nav-link.btn-menu {
    border-color: #0b3476;
    background-color: #0b3476
}

.header .top-bar .nav-mobile .nav-item .nav-link.btn-menu.orange-theme {
    background-color: #ff8400;
    border-color: #ff8400
}

.header .top-bar .nav-mobile .nav-item .nav-link.btn-menu.orange-theme i {
    color: #ffffff
}

.header .top-bar .nav-mobile .nav-item .nav-link.btn-menu.red-theme {
    background-color: #fd3030;
    border-color: #fd3030
}

.header .top-bar .nav-mobile .nav-item .nav-link.btn-menu.red-theme i {
    color: #ffffff
}

.header .top-bar .nav-mobile .nav-item .nav-link.btn-menu i {
    color: #ffffff
}

.header .top-bar .nav-mobile .nav-item .nav-link.orange-theme {
    background-color: #ff8400;
    border-color: #ff8400
}

.header .top-bar .nav-mobile .nav-item .nav-link.orange-theme i {
    color: #ffffff
}

.header .top-bar .nav-mobile .nav-item .nav-link.red-theme {
    background-color: #fd3030;
    border-color: #fd3030
}

.header .top-bar .nav-mobile .nav-item .nav-link.red-theme i {
    color: #ffffff
}

.header .top-bar .nav-mobile .nav-item .nav-link i {
    font-size: 16px;
    height: 16px;
    display: block;
    color: #4c4c4c
}

.header .main-bar {
    padding-top: 100px;
    padding-bottom: 150px
}

.header .main-bar .subtitle {
    font-size: 18px;
    color: #7f7f7f;
    display: block;
    margin-bottom: 5px
}

.header .main-bar .title {
    font-size: 42px;
    line-height: 1.2;
    font-weight: 700;
    color: #4c4c4c;
    display: block;
    margin-bottom: 15px
}

.header .main-bar .text {
    font-size: 16px;
    color: #858585;
    display: block;
    text-align: justify;
    text-align-last: right;
    margin-bottom: 20px
}

.header .main-bar .text b {
    font-size: 18px;
    display: block;
    font-weight: 500;
    color: #4c4c4c;
    margin-bottom: 5px
}

.header .main-bar .nav .nav-item {
    margin-left: 15px
}

.header .main-bar .nav .nav-item:last-child {
    margin-left: 0
}

.header .main-bar .nav .nav-item .nav-link {
    display: flex;
    align-items: center;
    padding: 15px 30px;
    border-radius: 10px;
    font-size: 16px;
    color: #767676;
    font-weight: 500;
    border: 2px solid #f0f0f0;
    background-color: #ffffff;
    transition: all 0.3s
}

.header .main-bar .nav .nav-item .nav-link.gra-theme {
    border: none;
    color: #ffffff;
    background-image: -moz-linear-gradient(180deg, #0b3577, #3e629c, #0b3577, #3e629c);
    background-image: -webkit-linear-gradient(180deg, #0b3577, #3e629c, #0b3577, #3e629c);
    background-image: -ms-linear-gradient(180deg, #0b3577, #3e629c, #0b3577, #3e629c);
    background-size: 300% 100%;
    moz-transition: all .4s ease-in-out;
    -o-transition: all .4s ease-in-out;
    -webkit-transition: all .4s ease-in-out;
    transition: all .4s ease-in-out
}

.header .main-bar .nav .nav-item .nav-link.gra-theme:hover {
    background-position: 100% 0;
    moz-transition: all .4s ease-in-out;
    -o-transition: all .4s ease-in-out;
    -webkit-transition: all .4s ease-in-out;
    transition: all .4s ease-in-out
}

.header .main-bar .nav .nav-item .nav-link:hover {
    background-color: #f0f0f0
}

.header .main-bar .nav .nav-item .nav-link:hover i {
    padding-right: 10px
}

.header .main-bar .nav .nav-item .nav-link i {
    font-size: 16px;
    height: 16px;
    display: block;
    padding-right: 0;
    margin-right: 10px;
    transition: all 0.3s
}

.why-us {
    padding: 75px 0px;
    overflow: hidden
}

.why-us .img {
    width: 100%;
    max-height: 550px;
    object-position: center;
    object-fit: contain
}

.why-us .subtitle {
    font-size: 18px;
    color: #7f7f7f;
    display: block;
    margin-bottom: 5px
}

.why-us .title {
    font-size: 42px;
    line-height: 1.2;
    font-weight: 700;
    color: #4c4c4c;
    display: block;
    margin-bottom: 15px
}

.why-us .text {
    font-size: 16px;
    color: #858585;
    display: block;
    text-align: justify;
    text-align-last: right;
    margin-bottom: 20px
}

.why-us .nav {
    margin-bottom: 20px
}

.why-us .nav .nav-item {
    width: 100%;
    display: flex;
    align-items: center;
    font-size: 20px;
    color: #4c4c4c;
    font-weight: 500;
    margin-bottom: 10px
}

.why-us .nav .nav-item:last-child {
    margin-bottom: 0
}

.why-us .nav .nav-item i {
    font-size: 20px;
    height: 20px;
    display: block;
    margin-left: 15px;
    color: #fd3030
}

.why-us .more {
    width: fit-content;
    width: -moz-fit-content;
    display: flex;
    align-items: center;
    padding: 15px 30px;
    border-radius: 10px;
    font-size: 16px;
    color: #ffffff;
    font-weight: 500;
    background-image: -moz-linear-gradient(180deg, #fd3030, #fd5858, #fd3030, #fd5858);
    background-image: -webkit-linear-gradient(180deg, #fd3030, #fd5858, #fd3030, #fd5858);
    background-image: -ms-linear-gradient(180deg, #fd3030, #fd5858, #fd3030, #fd5858);
    background-size: 300% 100%;
    moz-transition: all .4s ease-in-out;
    -o-transition: all .4s ease-in-out;
    -webkit-transition: all .4s ease-in-out;
    transition: all .4s ease-in-out
}

.why-us .more:hover {
    background-position: 100% 0;
    moz-transition: all .4s ease-in-out;
    -o-transition: all .4s ease-in-out;
    -webkit-transition: all .4s ease-in-out;
    transition: all .4s ease-in-out
}

.why-us .shape {
    position: absolute;
    top: 50%;
    right: 525px;
    z-index: -1;
    transform: translateX(100%) translateY(-50%);
    max-height: 700px
}

.our-services {
    padding: 75px 0px;
    overflow: hidden
}

.our-services .subtitle {
    font-size: 18px;
    color: #7f7f7f;
    display: block;
    margin-bottom: 5px
}

.our-services .title {
    font-size: 42px;
    line-height: 1.2;
    font-weight: 700;
    color: #4c4c4c;
    display: block;
    margin-bottom: 15px
}

.our-services .title.small-theme {
    font-size: 24px;
    font-weight: normal;
    display: block;
    margin-bottom: 5px
}

.our-services .text {
    font-size: 16px;
    color: #858585;
    display: block;
    text-align: justify;
    text-align-last: right;
    margin-bottom: 20px
}

.our-services .more {
    width: fit-content;
    width: -moz-fit-content;
    display: flex;
    align-items: center;
    padding: 15px 30px;
    border-radius: 10px;
    font-size: 16px;
    color: #767676;
    font-weight: 500;
    border: 2px solid #f0f0f0;
    background-color: #f0f0f0;
    transition: all 0.3s
}

.our-services .more:hover {
    color: #ffffff;
    border-color: #767676;
    background-color: #767676
}

.our-services .more:hover i {
    padding-right: 10px
}

.our-services .more i {
    font-size: 16px;
    height: 16px;
    display: block;
    padding-right: 0;
    margin-right: 10px;
    transition: all 0.3s
}

.our-services .item {
    padding: 30px 15px;
    display: block;
    background-color: #ffffff;
    box-shadow: 0px 0px 25px 0px rgba(0, 0, 0, 0.05);
    border-radius: 10px;
    margin-bottom: 10px;
    font-size: 15px;
    font-weight: 300;
    color: #707070;
    position: relative
}

.our-services .item.has-m-t {
    top: 30px
}

.our-services .item b {
    font-size: 18px;
    font-weight: 700;
    color: #4c4c4c;
    display: block;
    margin-bottom: 7.5px
}

.our-services .item img {
    max-height: 70px;
    display: block;
    object-fit: contain;
    margin-bottom: 15px
}

.our-services .shape {
    position: absolute;
    top: 50%;
    left: 525px;
    z-index: -1;
    transform: translateX(-100%) translateY(-50%);
    max-height: 660px
}

.what-devices {
    padding: 55px 0px;
    overflow: hidden
}

.what-devices .img {
    width: 100%;
    max-height: 600px;
    object-fit: contain;
    object-position: center
}

.what-devices .subtitle {
    font-size: 18px;
    color: #7f7f7f;
    display: block;
    margin-bottom: 5px
}

.what-devices .title {
    font-size: 42px;
    line-height: 1.2;
    font-weight: 700;
    color: #4c4c4c;
    display: block;
    margin-bottom: 15px
}

.what-devices .text {
    font-size: 16px;
    color: #858585;
    display: block;
    text-align: justify;
    text-align-last: right;
    margin-bottom: 20px
}

.what-devices .nav-info {
    margin-bottom: 20px
}

.what-devices .nav-info .nav-item {
    width: 100%;
    display: flex;
    align-items: center;
    font-size: 11px;
    color: #4c4c4c;
    font-weight: 500;
    margin-bottom: 10px;
    line-height: 30px
}

.what-devices .nav-info .nav-item:last-child {
    margin-bottom: 0
}

.what-devices .nav-info .nav-item i {
    font-size: 20px;
    height: 20px;
    display: block;
    color: #0b3476;
    margin-left: 15px
}

.what-devices .nav-menu .nav-item {
    margin-left: 15px
}

.what-devices .nav-menu .nav-item:last-child {
    margin-left: 0
}

.what-devices .nav-menu .nav-item .nav-link {
    display: flex;
    align-items: center;
    padding: 15px 30px;
    border-radius: 10px;
    font-size: 16px;
    color: #767676;
    font-weight: 500;
    border: 2px solid #f0f0f0;
    background-color: #ffffff;
    transition: all 0.3s
}

.what-devices .nav-menu .nav-item .nav-link.gra-theme {
    border: none;
    color: #ffffff;
    background-image: -moz-linear-gradient(180deg, #0b3577, #3e629c, #0b3577, #3e629c);
    background-image: -webkit-linear-gradient(180deg, #0b3577, #3e629c, #0b3577, #3e629c);
    background-image: -ms-linear-gradient(180deg, #0b3577, #3e629c, #0b3577, #3e629c);
    background-size: 300% 100%;
    moz-transition: all .4s ease-in-out;
    -o-transition: all .4s ease-in-out;
    -webkit-transition: all .4s ease-in-out;
    transition: all .4s ease-in-out
}

.what-devices .nav-menu .nav-item .nav-link.gra-theme:hover {
    background-position: 100% 0;
    moz-transition: all .4s ease-in-out;
    -o-transition: all .4s ease-in-out;
    -webkit-transition: all .4s ease-in-out;
    transition: all .4s ease-in-out
}

.what-devices .nav-menu .nav-item .nav-link.reverse-theme:hover i {
    padding-left: 10px
}

.what-devices .nav-menu .nav-item .nav-link.reverse-theme i {
    padding-right: 0 !important;
    margin-right: 10px !important;
    padding-left: 0;
    margin-left: 10px
}

.what-devices .nav-menu .nav-item .nav-link:hover {
    background-color: #f0f0f0
}

.what-devices .nav-menu .nav-item .nav-link:hover i {
    padding-right: 10px
}

.what-devices .nav-menu .nav-item .nav-link i {
    font-size: 16px;
    height: 16px;
    display: block;
    padding-right: 0;
    margin-right: 10px;
    transition: all 0.3s
}

.what-devices .shape {
    position: absolute;
    top: 50%;
    right: 525px;
    z-index: -1;
    transform: translateX(100%) translateY(-50%);
    max-height: 700px
}

.testimonial {
    padding: 175px 0px;
    overflow: hidden
}

.testimonial .subtitle {
    font-size: 18px;
    color: #7f7f7f;
    display: block;
    margin-bottom: 5px
}

.testimonial .title {
    font-size: 42px;
    line-height: 1.2;
    font-weight: 700;
    color: #4c4c4c;
    display: block;
    margin-bottom: 0px
}

.testimonial .slider-container {
    padding-right: 120px
}

.testimonial .main-container {
    overflow: hidden;
    position: relative;
    padding: 20px
}

.testimonial .swiper-container {
    overflow: visible
}

.testimonial .item {
    display: block;
    border-radius: 10px;
    background-color: #ffffff;
    box-shadow: 0px 10px 20px 0px rgba(0, 0, 0, 0.1);
    padding: 25px;
    padding-top: 100px;
    overflow: hidden
}

.testimonial .item .icon-quotation {
    position: absolute;
    top: -15px;
    right: 25px;
    font-size: 100px;
    color: #ebebeb
}

.testimonial .item .text {
    font-size: 16px;
    color: #000000;
    display: block;
    text-align: justify;
    text-align-last: right;
    margin-bottom: 20px
}

.testimonial .item .user {
    display: flex;
    align-items: center;
    font-size: 16px;
    color: #a0a0a0
}

.testimonial .item .user b {
    font-size: 17px;
    font-weight: 500;
    color: #4c4c4c;
    display: block
}

.testimonial .item .user img {
    width: 50px;
    height: 50px;
    display: block;
    border-radius: 50%;
    margin-left: 15px
}

.testimonial .button-nav {
    cursor: pointer;
    width: 55px;
    height: 55px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #ffffff;
    border-radius: 10px;
    border: 4px solid rgba(0, 0, 0, 0.06);
    position: absolute;
    right: 70px;
    top: 50%;
    transform: translateY(-50%) translateX(50%);
    transition: all 0.3s
}

.testimonial .button-nav:hover {
    border-color: #666666
}

.testimonial .button-nav:hover i {
    color: #4c4c4c
}

.testimonial .button-nav i {
    font-size: 16px;
    height: 16px;
    display: block;
    color: #bababa
}

.testimonial .shape {
    position: absolute;
    top: 50%;
    left: 525px;
    z-index: -1;
    transform: translateX(-100%) translateY(-50%);
    max-height: 650px
}

.order-steps {
    margin-bottom: 75px
}

.order-steps .subtitle {
    font-size: 18px;
    color: #7f7f7f;
    display: block;
    margin-bottom: 5px;
    text-align: center
}

.order-steps .title {
    font-size: 42px;
    line-height: 1.2;
    font-weight: 700;
    color: #4c4c4c;
    display: block;
    text-align: center;
    margin-bottom: 35px
}

.order-steps .items {
    display: flex;
    justify-content: center;
    margin-bottom: 25px;
    position: relative
}

.order-steps .item {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    font-size: 14px;
    color: #cfcfcf;
    text-align: center;
    padding: 15px 5px;
    border: 2px solid #e5e5e5;
    border-radius: 5px;
    margin-bottom: 10px
}

.order-steps .item.active {
    border-color: rgba(255, 132, 0, 0.2);
    color: rgba(255, 132, 0, 0.6)
}

.order-steps .item.active b {
    color: #ff8400
}

.order-steps .item.active i {
    background-image: linear-gradient(120deg, #ff8400, rgba(255, 132, 0, 0.25));
    background-image: -webkit-linear-gradient(120deg, #ff8400, rgba(255, 132, 0, 0.25));
    background-image: -moz-linear-gradient(120deg, #ff8400, rgba(255, 132, 0, 0.25));
    background-image: -o-linear-gradient(120deg, #ff8400, rgba(255, 132, 0, 0.25))
}

.order-steps .item b {
    color: #666666;
    font-size: 15px
}

.order-steps .item i {
    font-size: 50px;
    height: 50px;
    display: block;
    background-image: linear-gradient(120deg, #c6c4c4, #dadada);
    background-image: -webkit-linear-gradient(120deg, #c6c4c4, #dadada);
    background-image: -moz-linear-gradient(120deg, #c6c4c4, #dadada);
    background-image: -o-linear-gradient(120deg, #c6c4c4, #dadada);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    margin-bottom: 15px
}

.order-steps .img {
    width: 100%;
    max-width: 1000px;
    margin-left: auto;
    margin-right: auto;
    height: auto;
    object-position: center;
    object-fit: contain;
    margin-bottom: 50px;
    display: block
}

.order-steps .text {
    font-size: 22px;
    font-weight: 500;
    color: #888888;
    display: block;
    text-align: center;
    margin-bottom: 5px
}

.order-steps .number {
    font-size: 44px;
    color: #ff8400;
    display: block;
    text-align: center
}

.articles {
    overflow: hidden;
    padding: 95px 0px;
    margin-bottom: 50px
}

.articles .shape {
    position: absolute;
    top: 50%;
    left: 719px;
    z-index: -1;
    transform: translateX(-100%) translateY(-50%);
    max-height: 900px
}

.articles .subtitle {
    font-size: 18px;
    color: #7f7f7f;
    display: block;
    margin-bottom: 5px
}

.articles .title {
    font-size: 42px;
    line-height: 1.2;
    font-weight: 700;
    color: #4c4c4c;
    display: block;
    margin-bottom: 25px
}

.articles .title.small-theme {
    font-size: 24px;
    font-weight: normal;
    display: block;
    margin-bottom: 10px
}

.articles .text {
    font-size: 16px;
    color: #858585;
    display: block;
    text-align: justify;
    text-align-last: right;
    margin-bottom: 20px
}

.articles .nav-info {
    margin-bottom: 20px
}

.articles .nav-info .nav-item {
    display: flex;
    align-items: center;
    font-size: 16px;
    color: #666666;
    margin-left: 25px
}

.articles .nav-info .nav-item:last-child {
    margin-left: 0
}

.articles .nav-info .nav-item b {
    font-weight: 500;
    display: block;
    color: #4c4c4c
}

.articles .nav-info .nav-item .icon {
    width: 65px;
    height: 65px;
    border-radius: 10px;
    border: 5px solid #f0f0f0;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: 15px
}

.articles .nav-info .nav-item .icon i {
    font-size: 22px;
    height: 22px;
    display: block;
    color: #666666
}

.articles .more {
    width: fit-content;
    width: -moz-fit-content;
    display: flex;
    align-items: center;
    padding: 15px 30px;
    border-radius: 10px;
    font-size: 16px;
    color: #767676;
    font-weight: 500;
    border: 2px solid #f0f0f0;
    background-color: #f0f0f0;
    transition: all 0.3s
}

.articles .more:hover {
    color: #ffffff;
    border-color: #767676;
    background-color: #767676
}

.articles .more:hover i {
    padding-right: 10px
}

.articles .more i {
    font-size: 16px;
    height: 16px;
    display: block;
    padding-right: 0;
    margin-right: 10px;
    transition: all 0.3s
}

.articles .img {
    width: 100%;
    padding: 15px;
    height: 680px;
    border-radius: 10px;
    background-color: rgba(255, 255, 255, 0.3);
    box-shadow: 0px 10px 20px 0px rgba(0, 0, 0, 0.075)
}

.articles .img.small-theme {
    height: 325px;
    margin-bottom: 30px;
    position: relative;
    top: 45px
}

.articles .img img {
    width: 100%;
    height: 100%;
    border-radius: 10px;
    object-fit: cover;
    object-position: center
}

.brands {
    margin-bottom: 75px
}

.brands .subtitle {
    font-size: 18px;
    color: #7f7f7f;
    display: block;
    margin-bottom: 5px;
    text-align: center
}

.brands .title {
    font-size: 42px;
    line-height: 1.2;
    font-weight: 700;
    color: #4c4c4c;
    display: block;
    text-align: center;
    margin-bottom: 30px
}

.brands .item {
    width: 100%;
    height: 120px;
    border-radius: 10px;
    background-color: #fff3f3;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 25px 40px
}

.brands .item img {
    width: 100%;
    height: 100%;
    display: block;
    object-position: center;
    object-fit: contain
}

.brands .pagination {
    width: 100%;
    display: flex;
    justify-content: center;
    margin-top: 30px
}

.brands .pagination .swiper-pagination-bullet {
    width: 10px;
    height: 10px;
    border-radius: 100px;
    display: block;
    margin: 0px 5px;
    border: 2.5px solid #d9d9d9;
    background-color: transparent;
    opacity: 1 !important;
    transition: all 0.3s
}

.brands .pagination .swiper-pagination-bullet.swiper-pagination-bullet-active {
    width: 30px;
    background-color: #fd3030;
    border-color: #fd3030
}

.footer .container {
    padding-top: 50px !important;
    padding-bottom: 50px !important
}

.footer .shape {
    display: block;
    width: 100%;
    object-fit: cover
}

.footer .brand {
    display: block;
    margin-bottom: 30px
}

.footer .brand img {
    max-width: 160px;
    max-height: 60px;
    display: block
}

.footer .line {
    width: 200px;
    height: 5px;
    border-radius: 100px;
    display: block;
    background-color: #ebebeb;
    margin-bottom: 30px
}

.footer .text {
    font-size: 16px;
    color: #6b6b6b;
    display: block;
    text-align: justify;
    text-align-last: right;
    margin-bottom: 30px
}

.footer .text.email-theme {
    margin-bottom: 10px
}

.footer .number {
    font-size: 28px;
    color: #ff8400;
    display: block
}

.footer .title {
    font-size: 18px;
    font-weight: 700;
    color: #4c4c4c;
    display: block;
    margin-bottom: 30px
}

.footer .nav-menu {
    flex-direction: column
}

.footer .nav-menu .nav-item {
    margin-bottom: 20px
}

.footer .nav-menu .nav-item:last-child {
    margin-bottom: 0
}

.footer .nav-menu .nav-item .nav-link {
    padding: 0;
    font-size: 16px;
    color: #6b6b6b;
    display: block;
    transition: all 0.3s
}

.footer .nav-menu .nav-item .nav-link:hover {
    color: #ff8400
}

.footer .nav-social .nav-item {
    margin-left: 15px
}

.footer .nav-social .nav-item:last-child {
    margin-left: 0
}

.footer .nav-social .nav-item .nav-link {
    width: 50px;
    height: 50px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 4px solid #fff2e5;
    transition: all 0.3s
}

.footer .nav-social .nav-item .nav-link:hover {
    border-color: #ff8400
}

.footer .nav-social .nav-item .nav-link i {
    font-size: 16px;
    height: 16px;
    display: block;
    color: #ff8400;
    transition: all 0.3s
}

.header.header-single {
    background-color: white;
    box-shadow: 0px 0px 80px 0px rgba(0, 0, 0, 0.1)
}

.header.header-single .top-bar {
    padding: 30px 0px
}

.header.header-single .top-bar .call {
    color: #666666
}

.header.header-single .top-bar .call.orange-theme .number {
    color: #ff8400
}

.header.header-single .top-bar .call.orange-theme i {
    color: #ff8400
}

.header.header-single .top-bar .call.red-theme .number {
    color: #fd3030
}

.header.header-single .top-bar .call.red-theme i {
    color: #fd3030
}

.header.header-single .top-bar .call.green-theme i {
    color: #47b047
}

.header.header-single .top-bar .call .number {
    color: #0b3476
}

.header.header-single .top-bar .call i {
    color: #0b3476
}

.page-404 .container {
    padding-top: 30px;
    padding-bottom: 30px
}

.page-404 img {
    width: 100%;
    max-height: 175px;
    display: block;
    object-position: center;
    object-fit: contain;
    margin-bottom: 35px
}

.page-404 .subtitle {
    font-size: 16px;
    color: #7f7f7f;
    display: block;
    margin-bottom: 10px;
    text-align: center
}

.page-404 .title {
    font-size: 36px;
    line-height: 1.2;
    font-weight: 700;
    color: #4c4c4c;
    display: block;
    text-align: center;
    margin-bottom: 25px
}

.page-404 .nav {
    width: 100%;
    justify-content: center
}

.page-404 .nav .nav-item {
    margin-left: 15px
}

.page-404 .nav .nav-item:last-child {
    margin-left: 0
}

.page-404 .nav .nav-item .nav-link {
    font-size: 16px;
    font-weight: 500;
    color: #666666;
    display: block;
    padding: 12.5px 30px;
    border-radius: 10px;
    border: 3px solid #f0f0f0;
    position: relative;
    transition: all 0.3s;
    overflow: hidden
}

.page-404 .nav .nav-item .nav-link:hover {
    color: #ffffff;
    border-color: rgba(255, 255, 255, 0)
}

.page-404 .nav .nav-item .nav-link:hover:before {
    width: 100%;
    opacity: 1
}

.page-404 .nav .nav-item .nav-link:before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 0;
    height: 100%;
    background-image: -moz-linear-gradient(-180deg, #ff7e00 0%, #ffa800 100%);
    background-image: -webkit-linear-gradient(-180deg, #ff7e00 0%, #ffa800 100%);
    background-image: -ms-linear-gradient(-180deg, #ff7e00 0%, #ffa800 100%);
    opacity: 0;
    z-index: -1;
    border-radius: 10px;
    transition: all 0.3s
}

.page-404 .text-box {
    padding: 15px 35px;
    border-radius: 10px;
    display: block;
    text-align: center;
    background-color: #f6f6f6;
    font-size: 16px;
    color: #666666;
    font-weight: 500
}

.error-section .container {
    padding-top: 30px;
    padding-bottom: 30px
}

.error-section img {
    width: 100%;
    max-height: 175px;
    display: block;
    object-position: center;
    object-fit: contain;
    margin-bottom: 35px
}

.error-section .subtitle {
    font-size: 16px;
    color: #7f7f7f;
    display: block;
    margin-bottom: 10px;
    text-align: center
}

.error-section .title {
    font-size: 36px;
    line-height: 1.2;
    font-weight: 700;
    color: #4c4c4c;
    display: block;
    text-align: center;
    margin-bottom: 25px
}

.error-section .nav {
    width: 100%;
    justify-content: center
}

.error-section .nav .nav-item {
    margin-left: 15px
}

.error-section .nav .nav-item:last-child {
    margin-left: 0
}

.error-section .nav .nav-item .nav-link {
    font-size: 16px;
    font-weight: 500;
    color: #666666;
    display: block;
    padding: 12.5px 30px;
    border-radius: 10px;
    border: 3px solid #f0f0f0;
    position: relative;
    transition: all 0.3s;
    overflow: hidden
}

.error-section .nav .nav-item .nav-link:hover {
    color: #ffffff;
    border-color: rgba(255, 255, 255, 0)
}

.error-section .nav .nav-item .nav-link:hover:before {
    width: 100%;
    opacity: 1
}

.error-section .nav .nav-item .nav-link:before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 0;
    height: 100%;
    background-image: -moz-linear-gradient(-180deg, #ff7e00 0%, #ffa800 100%);
    background-image: -webkit-linear-gradient(-180deg, #ff7e00 0%, #ffa800 100%);
    background-image: -ms-linear-gradient(-180deg, #ff7e00 0%, #ffa800 100%);
    opacity: 0;
    z-index: -1;
    border-radius: 10px;
    transition: all 0.3s
}

.error-section .text-box {
    padding: 15px 35px;
    border-radius: 10px;
    display: block;
    text-align: center;
    background-color: #f6f6f6;
    font-size: 16px;
    color: #666666;
    font-weight: 500
}

.login-section {
    position: relative;
    background-image: url("../img/shape-icon.png");
    background-size: contain;
    background-repeat: repeat;
    background-position: center;
    overflow-x: hidden
}

.login-section .shape {
    position: absolute;
    max-height: 400px;
    z-index: -1
}

.login-section .shape.after {
    bottom: 0;
    right: -40px
}

.login-section .shape.before {
    top: 0;
    left: -40px
}

.login-section .container {
    padding-top: 50px;
    padding-bottom: 50px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-start
}

.login-section .brand {
    display: block;
    margin: 0 auto
}

.login-section .brand img {
    max-width: 160px;
    max-height: 60px;
    display: block
}

.login-section form {
    width: 100%;
    max-width: 470px;
    margin: 0 auto;
    display: block
}

.login-section .title {
    font-size: 32px;
    font-weight: 700;
    color: #4c4c4c;
    display: block;
    text-align: center;
    margin-bottom: 30px
}

.login-section .relative-bar {
    margin-bottom: 15px;
    position: relative
}

.login-section .form-group {
    margin-bottom: 0
}

.login-section .label {
    font-size: 18px;
    font-weight: 500;
    color: #666666;
    display: block;
    position: absolute;
    top: 50%;
    right: 25px;
    transform: translateY(-50%)
}

.login-section .input {
    width: 100%;
    height: 75px;
    border-radius: 10px;
    border: 3px solid #ebebeb;
    display: block;
    padding-left: 25px;
    text-align: left;
    font-size: 18px;
    font-weight: 500;
    color: #000000
}

.login-section .input.text-right {
    padding-right: 15px;
    color: #666666
}

.login-section .input.text-right::placeholder {
    color: #666666;
    opacity: 1
}

.login-section .input::placeholder {
    color: #b2b2b2
}

.login-section .btn-submit {
    width: 100%;
    height: 75px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    font-weight: 500;
    color: #ffffff;
    background-image: -moz-linear-gradient(180deg, #0b3577, #3e629c, #0b3577, #3e629c);
    background-image: -webkit-linear-gradient(180deg, #0b3577, #3e629c, #0b3577, #3e629c);
    background-image: -ms-linear-gradient(180deg, #0b3577, #3e629c, #0b3577, #3e629c);
    background-size: 300% 100%;
    moz-transition: all .4s ease-in-out;
    -o-transition: all .4s ease-in-out;
    -webkit-transition: all .4s ease-in-out;
    transition: all .4s ease-in-out
}

.login-section .btn-submit.orange-theme {
    background-image: -moz-linear-gradient(180deg, #ff7e00, #ffa800, #ff7e00, #ffa800);
    background-image: -webkit-linear-gradient(180deg, #ff7e00, #ffa800, #ff7e00, #ffa800);
    background-image: -ms-linear-gradient(180deg, #ff7e00, #ffa800, #ff7e00, #ffa800)
}

.login-section .btn-submit:hover {
    background-position: 100% 0;
    moz-transition: all .4s ease-in-out;
    -o-transition: all .4s ease-in-out;
    -webkit-transition: all .4s ease-in-out;
    transition: all .4s ease-in-out
}

.login-section .btn-submit i {
    font-size: 18px;
    height: 18px;
    display: block;
    margin-right: 15px
}

.login-section .call {
    display: flex;
    align-items: center;
    font-size: 14px;
    font-weight: 500;
    color: #b2b2b2;
    text-align: left;
    margin-right: auto
}

.login-section .call i {
    font-size: 50px;
    height: 50px;
    display: block;
    margin-right: 15px
}

.login-section .nav:hover .nav-item .nav-link {
    opacity: 0.4
}

.login-section .nav .nav-item {
    position: relative
}

.login-section .nav .nav-item:last-child:after {
    display: none
}

.login-section .nav .nav-item:after {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateX(-50%) translateY(-50%) rotate(15deg);
    width: 3px;
    height: 20px;
    border-radius: 4px;
    background-color: #e0e0e0
}

.login-section .nav .nav-item .nav-link {
    font-size: 16px;
    color: #999999;
    font-weight: 500;
    display: block;
    padding: 5px 20px;
    opacity: 1;
    transition: all 0.3s
}

.login-section .nav .nav-item .nav-link:hover {
    opacity: 1
}

.login-section .return {
    width: 55px;
    height: 55px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #ebebeb;
    margin-bottom: 20px;
    margin-right: auto;
    margin-left: auto;
    transition: all 0.3s
}

.login-section .return:hover {
    background-color: #0b3476
}

.login-section .return i {
    font-size: 24px;
    height: 24px;
    display: block;
    color: #ffffff
}

.login-section .phone-number {
    width: 100%;
    height: 75px;
    border-radius: 10px;
    background-color: #f5f5f5;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    color: #666666;
    font-weight: 500;
    position: relative;
    margin-bottom: 15px
}

.login-section .phone-number .edit {
    position: absolute;
    top: 50%;
    left: 20px;
    transform: translateY(-50%);
    padding: 5px;
    transition: all 0.3s
}

.login-section .phone-number .edit:hover i {
    color: #0b3476
}

.login-section .phone-number .edit i {
    font-size: 18px;
    height: 18px;
    display: block;
    color: #c4c4c4;
    transition: all 0.3s
}

.login-section .digit-group {
    width: 100%;
    margin-left: 15px
}

.login-section .digit-group .input-group {
    width: 25%;
    padding-left: 15px
}

.login-section .digit-group input {
    width: 100%;
    height: 75px;
    border-radius: 10px;
    border: 3px solid #ebebeb;
    display: block;
    padding-left: 0px;
    text-align: center;
    font-size: 22px;
    font-weight: 500;
    color: #666666
}

.login-section .digit-group input::placeholder {
    color: #666666;
    opacity: 0.6
}

.login-section .time {
    font-size: 14px;
    color: #666666;
    display: block;
    text-align: center;
    white-space: nowrap
}

.login-section .time #timer {
    white-space: nowrap;
    font-size: 22px;
    display: block;
    text-align: center
}

.login-section .title .iransans {
    font-size: 22px;
    font-weight: 400;
    margin-top: 5px
}

.login-section .return-link {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    font-weight: 500;
    color: #b2b2b2;
    margin-top: 25px;
    transition: all 0.3s
}

.login-section .return-link:hover {
    color: #0b3476
}

.login-section .return-link i {
    font-size: 16px;
    height: 16px;
    font-weight: 700;
    display: block;
    margin-left: 15px
}

.login-section .steps {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 25px 0px
}

.login-section .steps .item {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    font-size: 16px;
    color: #bfbfbf;
    text-align: center;
    padding: 0px 30px;
    position: relative
}

.login-section .steps .item.active svg {
    width: 99px;
    height: 99px;
    fill: #ff8400;
    margin-bottom: 0
}

.login-section .steps .item.active svg path {
    fill: #ff8400
}

.login-section .steps .item.active span {
    display: none
}

.login-section .steps .item:last-child {
    padding-left: 0
}

.login-section .steps .item:last-child:after {
    display: none
}

.login-section .steps .item:first-child {
    padding-right: 0
}

.login-section .steps .item:after {
    content: '';
    position: absolute;
    top: 30px;
    left: 0;
    transform: translateX(-50%) translateY(-50%);
    width: 25px;
    height: 8px;
    border-radius: 100px;
    background-color: #d9d9d9
}

.login-section .steps .item svg {
    width: 60px;
    height: 60px;
    fill: #bfbfbf;
    margin-bottom: 15px
}

.login-section .steps .item svg path {
    fill: #bfbfbf
}

.contact-us {
    margin: 75px 0px
}

.contact-us .grid-div {
    position: relative
}

.contact-us .grid-div:last-child:after {
    display: none
}

.contact-us .grid-div:after {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateX(-50%) translateY(-50%);
    width: 3px;
    height: 150px;
    background-color: #f0f0f0
}

.contact-us .item {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center
}

.contact-us .item img {
    max-height: 70px;
    margin-bottom: 25px
}

.contact-us .item .title {
    font-size: 22px;
    color: #4c4c4c;
    display: block;
    font-weight: 700;
    text-align: center;
    margin-bottom: 10px
}

.contact-us .item .subtitle {
    font-size: 15px;
    color: #7f7f7f;
    display: block;
    text-align: center;
    text-align-last: center
}

.contact-us .item .nav-social {
    width: 100%;
    justify-content: center;
    padding-top: 10px
}

.contact-us .item .nav-social .nav-item .nav-link {
    padding: 0px 10px
}

.contact-us .item .nav-social .nav-item .nav-link:hover i {
    color: #0b3476
}

.contact-us .item .nav-social .nav-item .nav-link i {
    font-size: 24px;
    height: 24px;
    display: block;
    color: #7f7f7f;
    transition: all 0.3s
}

.form-elements {
    margin-bottom: 75px
}

.form-elements .form-group {
    width: 100%;
    margin-bottom: 10px
}

.form-elements input, .form-elements textarea {
    width: 100%;
    height: 60px;
    border-radius: 10px;
    border: 3px solid #cacaca;
    display: block;
    padding-right: 15px;
    font-size: 15px;
    font-weight: normal;
    color: #666666
}

.form-elements input::placeholder, .form-elements textarea::placeholder {
    opacity: 1;
    color: #b2b2b2
}

.form-elements textarea {
    height: 300px;
    padding: 15px
}

.form-elements textarea.small-theme {
    height: 200px
}

.form-elements .btn-submit {
    cursor: pointer;
    width: fit-content;
    width: -moz-fit-content;
    margin-right: auto;
    font-size: 18px;
    color: #ffffff;
    font-weight: 500;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 5px 30px;
    height: 60px;
    border-radius: 10px;
    background-image: -moz-linear-gradient(180deg, #0b3577, #3e629c, #0b3577, #3e629c);
    background-image: -webkit-linear-gradient(180deg, #0b3577, #3e629c, #0b3577, #3e629c);
    background-image: -ms-linear-gradient(180deg, #0b3577, #3e629c, #0b3577, #3e629c);
    background-size: 300% 100%;
    moz-transition: all .4s ease-in-out;
    -o-transition: all .4s ease-in-out;
    -webkit-transition: all .4s ease-in-out;
    transition: all .4s ease-in-out
}

.form-elements .btn-submit.green-theme {
    background-image: -moz-linear-gradient(180deg, #48ae48, #83ce83, #48ae48, #83ce83);
    background-image: -webkit-linear-gradient(180deg, #48ae48, #83ce83, #48ae48, #83ce83);
    background-image: -ms-linear-gradient(180deg, #48ae48, #83ce83, #48ae48, #83ce83)
}

.form-elements .btn-submit:hover {
    background-position: 100% 0;
    moz-transition: all .4s ease-in-out;
    -o-transition: all .4s ease-in-out;
    -webkit-transition: all .4s ease-in-out;
    transition: all .4s ease-in-out
}

.form-elements.employment-theme .form-group {
    margin-bottom: 20px
}

.form-elements .label {
    font-size: 16px;
    font-weight: 500;
    color: #666666;
    display: block;
    margin-bottom: 10px
}

.form-elements .absolute-icon {
    font-size: 18px;
    height: 18px;
    display: block;
    color: #fd3030;
    position: absolute;
    top: 50%;
    left: 15px;
    transform: translateY(-50%)
}

.form-elements .select2 {
    width: 100% !important;
    height: 60px !important
}

.form-elements .select2 .selection {
    width: 100%;
    height: 100% !important;
    box-shadow: none !important;
    outline: none !important
}

.form-elements .select2 .selection .select2-selection {
    height: 100% !important;
    border-radius: 10px !important;
    border: 3px solid #f0f0f0 !important;
    box-shadow: none !important;
    outline: none !important;
    position: relative;
    display: flex;
    align-items: center
}

.form-elements .select2 .selection .select2-selection:after {
    content: "\e933";
    font-family: icomoon;
    position: absolute;
    top: 50%;
    left: 15px;
    transform: translateY(-50%);
    font-size: 10px;
    color: #fd3030;
    font-weight: 700
}

.form-elements .select2 .selection .select2-selection .select2-selection__rendered {
    padding-right: 15px;
    font-size: 15px;
    color: #b2b2b2;
    display: block
}

.form-elements .select2 .selection .select2-selection .select2-selection__arrow {
    display: none
}

.form-elements .select-multi .select2 {
    height: auto !important;
    min-height: 60px !important
}

.form-elements .select-multi .selection, .form-elements .select-multi .select2-selection {
    min-height: 60px !important
}

.form-elements .select-multi .selection:after, .form-elements .select-multi .select2-selection:after {
    display: none
}

.form-elements .select-multi .select2-search__field {
    padding-right: 0px !important;
    margin: 0 !important
}

.form-elements .select-multi .select2-selection__rendered {
    padding: 0 !important;
    padding-left: 35px !important;
    width: 100%;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    flex-wrap: wrap;
    padding-right: 15px !important
}

.form-elements .select-multi .select2-selection__rendered li {
    margin: 5px !important;
    margin-right: 0 !important;
    margin-left: 10px !important
}

.form-elements .select-multi .select2-selection__rendered .select2-selection__choice {
    background-color: #f7f7f7 !important;
    color: #acacac !important;
    padding: 7.5px 15px !important;
    border-radius: 5px !important;
    border: none !important;
    display: flex;
    align-items: center;
    justify-content: center
}

.form-elements .select-multi .select2-selection__rendered .select2-selection__choice .select2-selection__choice__remove {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #fd3030;
    color: #ffffff !important;
    font-size: 10px;
    padding-top: 2px;
    font-weight: 300;
    margin-left: 10px
}

.form-elements .select-multi .select2-selection__rendered .select2-search {
    margin: 0 !important
}

.form-elements .select-multi .select2-selection__rendered .select2-search input {
    height: 37.4px !important;
    padding-right: 0px !important
}

.form-elements .label-file {
    width: 100%;
    height: 60px;
    border-radius: 10px;
    border: 3px solid #f0f0f0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-right: 15px;
    font-size: 15px;
    font-weight: normal;
    color: #b2b2b2;
    position: relative;
    padding-left: 48px
}

.form-elements.order-theme {
    margin-top: 15px;
    margin-bottom: 10px
}

.form-elements.order-theme .form-group {
    margin-bottom: 20px
}

.form-elements.order-theme input, .form-elements.order-theme textarea {
    border-color: #e5e5e5
}

.form-elements.order-theme .select2 .selection .select2-selection {
    border-color: #e5e5e5 !important
}

.map-section {
    width: 100%;
    height: 630px;
    padding: 15px;
    border-radius: 10px;
    background-color: #ffffff;
    box-shadow: 10px 5px 15px 0px rgba(0, 0, 0, 0.05);
    display: block;
    margin-bottom: 0px;
    position: relative
}

.map-section iframe {
    width: 100%;
    height: 100%;
    border-radius: 10px;
    overflow: hidden
}

.map-section .nav-direct {
    position: absolute;
    top: 30px;
    right: 30px;
    z-index: 9;
    flex-direction: column
}

.map-section .nav-direct .nav-item {
    margin-bottom: 10px;
    width: 50px;
    height: 50px;
    border-radius: 10px;
    background-color: #ffffff;
    box-shadow: 5px 3px 15px 0px rgba(0, 0, 0, 0.075);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s
}

.map-section .nav-direct .nav-item:hover {
    background-color: #0b3476
}

.map-section .nav-direct .nav-item:hover i {
    color: #ffffff
}

.map-section .nav-direct .nav-item i {
    font-size: 18px;
    height: 18px;
    display: block;
    color: #666666;
    transition: all 0.3s
}

.form-contact {
    margin-bottom: 75px
}

.form-contact .time-work {
    width: 100%;
    padding: 20px 15px;
    border-radius: 10px;
    background-color: #f7f7f7;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    color: #7b7b7b;
    font-size: 16px;
    margin-bottom: 20px
}

.form-contact .time-work b {
    margin-left: 10px
}

.form-contact .time-work i {
    font-size: 20px;
    height: 20px;
    display: block;
    margin-left: 10px
}

.form-contact .img {
    width: 100%;
    height: 515px;
    padding: 15px;
    border-radius: 10px;
    background-color: #ffffff;
    box-shadow: 10px 5px 15px 0px rgba(0, 0, 0, 0.05);
    display: block;
    position: relative
}

.form-contact .img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    border-radius: 10px
}

.term-condition {
    margin: 75px 0px
}

.term-condition .nav-filter {
    display: flex;
    justify-content: center;
    width: 100%;
    margin-bottom: 30px
}

.term-condition .nav-filter .nav-item {
    cursor: pointer;
    padding: 12.5px 20px;
    border-radius: 10px;
    display: block;
    background-color: #f6f6f6;
    font-size: 17px;
    font-weight: 500;
    color: #a1a1a1;
    margin-left: 10px;
    position: relative
}

.term-condition .nav-filter .nav-item:after {
    content: '';
    position: absolute;
    bottom: 0;
    right: 50%;
    transform: translateX(50%) translateY(35%) rotate(45deg);
    background-color: #f6f6f6;
    width: 10px;
    height: 10px;
    border-radius: 2px;
    opacity: 0
}

.term-condition .nav-filter .nav-item.active {
    background-color: #fff3f3;
    color: #fd2f31
}

.term-condition .nav-filter .nav-item.active:after {
    opacity: 1;
    background-color: #fff3f3
}

.term-condition .item {
    background-color: white;
    box-shadow: 0px 5px 30px 0px rgba(0, 0, 0, 0.05);
    border-radius: 10px;
    display: block;
    margin-bottom: 10px;
    padding: 30px
}

.term-condition .item .title {
    display: flex;
    align-items: center;
    font-size: 18px;
    color: #4c4c4c;
    font-weight: 700;
    margin-bottom: 15px
}

.term-condition .item .title i {
    font-size: 22px;
    height: 22px;
    display: block;
    margin-left: 15px;
    color: #0b3476
}

.term-condition .item .title i.orange-theme {
    color: #ff8400
}

.term-condition .item .title i.red-theme {
    color: #fd3030
}

.term-condition .item .text {
    font-size: 16px;
    color: #666666;
    display: block;
    text-align: justify;
    text-align-last: right;
    margin-bottom: 0
}

.faq {
    margin: 75px 0px;
    background-image: url("../img/shape-icon-1.png");
    background-position: top center;
    background-repeat: no-repeat
}

.faq form {
    max-width: 700px;
    width: 100%;
    display: block;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 35px;
    position: relative
}

.faq .form-group {
    margin-bottom: 0;
    width: 100%
}

.faq input {
    width: 100%;
    height: 60px;
    border-radius: 10px;
    background-color: white;
    box-shadow: 4px 3px 30px 0px rgba(0, 0, 0, 0.06);
    border: none;
    padding-right: 20px;
    font-size: 16px;
    color: #666666;
    display: block
}

.faq input::placeholder {
    opacity: 0.6;
    color: #666666
}

.faq .btn-search {
    position: absolute;
    top: 50%;
    left: 15px;
    transform: translateY(-50%);
    padding: 5px
}

.faq .btn-search:hover i {
    color: #0b3476
}

.faq .btn-search i {
    font-size: 18px;
    height: 18px;
    display: block;
    color: #666666;
    transition: all 0.3s
}

.faq .nav-filter {
    width: 100%;
    justify-content: center;
    margin-bottom: 30px
}

.faq .nav-filter .nav-item {
    cursor: pointer;
    margin-left: 30px;
    width: 150px;
    height: 150px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    font-size: 16px;
    color: #868686;
    background-color: #f4f4f4;
    position: relative;
    transition: all 0.3s
}

.faq .nav-filter .nav-item:before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background-color: rgba(102, 102, 102, 0.35);
    z-index: -1;
    transition: all 0.3s
}

.faq .nav-filter .nav-item.active {
    background-color: #666666;
    color: #ffffff
}

.faq .nav-filter .nav-item.active:before {
    top: 5px
}

.faq .nav-filter .nav-item.active .number {
    color: #ffffff
}

.faq .nav-filter .nav-item.red-theme {
    background-color: #fff3f3
}

.faq .nav-filter .nav-item.red-theme:before {
    background-color: rgba(253, 48, 48, 0.35)
}

.faq .nav-filter .nav-item.red-theme .number {
    color: #fd3030
}

.faq .nav-filter .nav-item.red-theme.active {
    background-color: #fd3030;
    color: #ffffff
}

.faq .nav-filter .nav-item.red-theme.active .number {
    color: #ffffff
}

.faq .nav-filter .nav-item.orange-theme {
    background-color: #fff0dc
}

.faq .nav-filter .nav-item.orange-theme:before {
    background-color: rgba(255, 132, 0, 0.35)
}

.faq .nav-filter .nav-item.orange-theme .number {
    color: #ff8400
}

.faq .nav-filter .nav-item.orange-theme.active {
    background-color: #ff8400;
    color: #ffffff
}

.faq .nav-filter .nav-item.orange-theme.active .number {
    color: #ffffff
}

.faq .nav-filter .nav-item.blue-theme {
    background-color: #f1f3f7
}

.faq .nav-filter .nav-item.blue-theme:before {
    background-color: rgba(11, 52, 118, 0.35)
}

.faq .nav-filter .nav-item.blue-theme .number {
    color: #0b3476
}

.faq .nav-filter .nav-item.blue-theme.active {
    background-color: #0b3476;
    color: #ffffff
}

.faq .nav-filter .nav-item.blue-theme.active .number {
    color: #ffffff
}

.faq .nav-filter .nav-item .number {
    font-size: 30px;
    font-weight: 700;
    color: #4c4c4c;
    display: block;
    line-height: 1.2;
    margin-bottom: 7.5px;
    transition: all 0.3s
}

.faq .nav-filter .nav-item:last-child {
    margin-left: 0
}

.faq .accordion-menu {
    padding: 0;
    margin-bottom: 0
}

.faq .accordion-menu .item {
    margin-bottom: 15px !important;
    border: 2px solid #f0f0f0;
    background-color: #ffffff;
    border-radius: 10px;
    padding: 15px
}

.faq .accordion-menu .dropdownlink {
    cursor: pointer;
    display: flex;
    align-items: center;
    font-size: 18px;
    color: #4c4c4c;
    font-weight: 700;
    transition: color 0.3s
}

.faq .accordion-menu i {
    font-size: 22px;
    height: 22px;
    color: #cccccc;
    margin-left: 15px
}

.faq .accordion-menu .plus {
    display: block
}

.faq .accordion-menu .minus {
    display: none
}

.faq .accordion-menu .open i {
    color: #4c4c4c
}

.faq .accordion-menu .open .plus {
    display: none
}

.faq .accordion-menu .open .minus {
    display: block
}

.faq .submenuItems {
    display: none;
    padding-right: 0
}

.faq .submenuItems .text {
    font-size: 16px;
    padding-top: 10px;
    color: #666666;
    font-weight: 400;
    text-align: justify;
    display: block;
    margin-bottom: 0
}

.about-us {
    margin: 75px 0px;
    position: relative
}

.about-us .shape {
    position: absolute;
    top: -75px;
    left: 0;
    max-height: 500px;
    z-index: -1
}

.about-us .text {
    font-size: 16px;
    color: #858585;
    display: block;
    text-align: justify;
    text-align-last: right
}

.about-us .img {
    width: 100%;
    height: 450px;
    border-radius: 10px;
    object-position: center;
    object-fit: cover;
    background-color: white;
    box-shadow: 15px 12px 30px 0px rgba(0, 0, 0, 0.08);
    display: block
}

.status-section {
    margin-bottom: 75px;
    position: relative
}

.status-section .shape {
    position: absolute;
    top: calc(100% - 75px);
    right: 0;
    max-height: 500px;
    z-index: -1
}

.status-section .text {
    font-size: 16px;
    color: #858585;
    display: block;
    text-align: justify;
    text-align-last: right;
    margin-bottom: 20px
}

.status-section .nav .nav-item {
    width: 100%;
    display: flex;
    align-items: center;
    font-size: 16px;
    color: #4c4c4c;
    font-weight: 500;
    margin-bottom: 10px
}

.status-section .nav .nav-item:last-child {
    margin-bottom: 0
}

.status-section .nav .nav-item i {
    font-size: 20px;
    height: 20px;
    display: block;
    color: #fd3030;
    margin-left: 15px
}

.status-section .circle {
    width: 500px;
    height: 500px;
    position: relative;
    margin: 0 auto;
    background-image: url("../img/shape-icon-2.png");
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat
}

.status-section .circle .line {
    width: 425px;
    height: 425px;
    display: block;
    border-radius: 50%;
    border: 1px solid #eeeeee;
    position: absolute;
    top: 50%;
    right: 50%;
    transform: translateY(-50%) translateX(50%)
}

.status-section .circle .line.mid {
    width: 375px;
    height: 375px
}

.status-section .circle .line.small {
    width: 325px;
    height: 325px
}

.status-section .circle .item {
    width: 150px;
    height: 150px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    background-color: #ffffff;
    box-shadow: 4px 10px 30px 0px rgba(0, 0, 0, 0.08);
    font-size: 16px;
    color: #b9b9b9;
    position: absolute
}

.status-section .circle .item.pt {
    top: 0;
    right: 50%;
    transform: translateX(50%)
}

.status-section .circle .item.pb {
    bottom: 0;
    right: 50%;
    transform: translateX(50%)
}

.status-section .circle .item.pr {
    right: 0;
    top: 50%;
    transform: translateY(-50%)
}

.status-section .circle .item.pl {
    left: 0;
    top: 50%;
    transform: translateY(-50%)
}

.status-section .circle .item .number {
    font-size: 28px;
    color: #fd3030;
    font-weight: 700;
    display: block;
    line-height: 1.2;
    margin-bottom: 5px
}

.status-section .circle .brand {
    width: 85px;
    height: 85px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #fd3030;
    position: absolute;
    top: 50%;
    right: 50%;
    transform: translateX(50%) translateY(-50%)
}

.status-section .circle .brand img {
    max-height: 40px
}

.video-section {
    margin-bottom: 75px
}

.video-section .main {
    width: 100%;
    height: 400px;
    border-radius: 10px;
    background-color: white;
    box-shadow: 0px 5px 30px 0px rgba(0, 0, 0, 0.075);
    padding: 15px
}

.video-section .img {
    width: 100%;
    height: 100%;
    background-position: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border-radius: 10px;
    overflow: hidden;
    position: relative;
    cursor: pointer
}

.video-section .img:before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
    background-color: #000000;
    opacity: 0.7
}

.video-section .img:hover i, .video-section .img:hover .title, .video-section .img:hover .subtitle {
    opacity: 1
}

.video-section i {
    font-size: 70px;
    height: 70px;
    display: block;
    color: #ffffff;
    opacity: 0.75;
    margin-bottom: 15px;
    transition: all 0.3s;
    z-index: 9
}

.video-section .subtitle {
    font-size: 16px;
    color: #ffffff;
    display: block;
    margin-bottom: 5px;
    text-align: center;
    opacity: 0.75;
    transition: all 0.3s;
    z-index: 9
}

.video-section .title {
    font-size: 32px;
    line-height: 1.2;
    color: #ffffff;
    display: block;
    text-align: center;
    opacity: 0.75;
    transition: all 0.3s;
    z-index: 9
}

.awards {
    margin-bottom: 75px
}

.awards .header-section {
    margin-bottom: 10px
}

.awards .title.small-theme {
    color: #4c4c4c;
    font-size: 24px;
    font-weight: normal;
    display: block;
    margin-bottom: 10px
}

.awards .text {
    font-size: 16px;
    color: #858585;
    display: block;
    text-align: justify;
    text-align-last: right;
    margin-bottom: 20px
}

.awards .nav .nav-item {
    display: flex;
    align-items: center;
    font-size: 16px;
    color: #666666;
    margin-left: 25px
}

.awards .nav .nav-item:last-child {
    margin-left: 0
}

.awards .nav .nav-item b {
    font-weight: 500;
    display: block;
    color: #4c4c4c
}

.awards .nav .nav-item .icon {
    width: 65px;
    height: 65px;
    border-radius: 10px;
    border: 5px solid #f0f0f0;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: 15px
}

.awards .nav .nav-item .icon i {
    font-size: 22px;
    height: 22px;
    display: block;
    color: #666666
}

.awards .navigation {
    display: flex;
    margin-right: auto
}

.awards .navigation .btn {
    cursor: pointer;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #ffffff;
    border: 5px solid #f0f0f0;
    outline: none !important;
    box-shadow: none !important;
    position: relative;
    transition: all 0.3s;
    margin-left: 15px
}

.awards .navigation .btn.swiper-button-disabled {
    opacity: 0.5
}

.awards .navigation .btn:last-child {
    margin-left: 0
}

.awards .navigation .btn:hover {
    border-color: #0b3476
}

.awards .navigation .btn:hover i {
    color: #0b3476
}

.awards .navigation .btn i {
    font-size: 13px;
    height: 13px;
    display: block;
    color: #999999;
    transition: all 0.3s
}

.awards img {
    width: 100%;
    max-height: 460px;
    object-fit: contain;
    object-position: center
}

.testimonial-section {
    margin-bottom: 75px
}

.testimonial-section .header-section {
    margin-bottom: 15px
}

.testimonial-section .slider-container {
    overflow: hidden;
    padding: 20px;
    max-width: 650px;
    margin: 0 auto
}

.testimonial-section .swiper-container {
    overflow: visible
}

.testimonial-section .item {
    display: block;
    border-radius: 10px;
    background-color: #ffffff;
    box-shadow: 0px 10px 20px 0px rgba(0, 0, 0, 0.1);
    padding: 25px;
    padding-top: 100px;
    overflow: hidden
}

.testimonial-section .item .icon-quotation {
    position: absolute;
    top: -15px;
    right: 25px;
    font-size: 100px;
    color: #ebebeb
}

.testimonial-section .item .text {
    font-size: 16px;
    color: #a0a0a0;
    display: block;
    text-align: justify;
    text-align-last: right;
    margin-bottom: 20px
}

.testimonial-section .item .user {
    display: flex;
    align-items: center;
    font-size: 16px;
    color: #a0a0a0
}

.testimonial-section .item .user b {
    font-size: 17px;
    font-weight: 500;
    color: #4c4c4c;
    display: block
}

.testimonial-section .item .user img {
    width: 50px;
    height: 50px;
    display: block;
    border-radius: 50%;
    margin-left: 15px
}

.testimonial-section .button-nav {
    cursor: pointer;
    width: 55px;
    height: 55px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #ffffff;
    border-radius: 10px;
    border: 4px solid rgba(0, 0, 0, 0.06);
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    transition: all 0.3s
}

.testimonial-section .button-nav.prev {
    right: 15px
}

.testimonial-section .button-nav.next {
    left: 15px
}

.testimonial-section .button-nav:hover {
    border-color: #666666
}

.testimonial-section .button-nav:hover i {
    color: #4c4c4c
}

.testimonial-section .button-nav i {
    font-size: 16px;
    height: 16px;
    display: block;
    color: #bababa
}

.testimonial-section .shape {
    position: absolute;
    top: 50%;
    right: 50%;
    transform: translateX(50%) translateY(-50%);
    max-height: 220px;
    z-index: -1
}

.services-box {
    margin-bottom: 75px;
    position: relative
}

.services-box .shape {
    position: absolute;
    top: 100px;
    left: 0;
    transform: translateY(-100%);
    max-height: 400px;
    z-index: -1
}

.services-box .item {
    padding: 25px;
    border-radius: 10px;
    background-color: #fffbf5
}

.services-box .item img {
    max-height: 70px;
    display: block;
    object-fit: contain;
    margin-bottom: 15px
}

.services-box .item .title {
    font-size: 18px;
    font-weight: 700;
    color: #4c4c4c;
    display: block;
    margin-bottom: 7.5px
}

.services-box .item .text {
    font-size: 15px;
    font-weight: 300;
    color: #707070;
    text-align: justify;
    text-align-last: right;
    margin-bottom: 0
}

.blog-archive {
    margin: 75px 0px
}

.blog-archive form {
    max-width: 700px;
    width: 100%;
    display: block;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 35px;
    position: relative
}

.blog-archive .form-group {
    margin-bottom: 0;
    width: 100%
}

.blog-archive input {
    width: 100%;
    height: 60px;
    border-radius: 10px;
    background-color: white;
    box-shadow: 4px 3px 30px 0px rgba(0, 0, 0, 0.06);
    border: none;
    padding-right: 20px;
    font-size: 16px;
    color: #666666;
    display: block
}

.blog-archive input::placeholder {
    opacity: 0.6;
    color: #666666
}

.blog-archive .btn-search {
    position: absolute;
    top: 50%;
    left: 15px;
    transform: translateY(-50%);
    padding: 5px
}

.blog-archive .btn-search:hover i {
    color: #0b3476
}

.blog-archive .btn-search i {
    font-size: 18px;
    height: 18px;
    display: block;
    color: #666666;
    transition: all 0.3s
}

.blog-archive .nav-filter {
    display: flex;
    justify-content: center;
    width: 100%;
    margin-bottom: 30px
}

.blog-archive .nav-filter .nav-item {
    cursor: pointer;
    padding: 12.5px 35px;
    border-radius: 10px;
    display: block;
    background-color: #f1f3f7;
    font-size: 17px;
    font-weight: 500;
    color: rgba(11, 52, 118, 0.6);
    margin-left: 10px;
    position: relative
}

.blog-archive .nav-filter .nav-item:after {
    content: '';
    position: absolute;
    bottom: 0;
    right: 50%;
    transform: translateX(50%) translateY(35%) rotate(45deg);
    background-color: #f1f3f7;
    width: 10px;
    height: 10px;
    border-radius: 2px;
    opacity: 0
}

.blog-archive .nav-filter .nav-item.active {
    background-color: #0b3476;
    color: #ffffff
}

.blog-archive .nav-filter .nav-item.active:after {
    opacity: 1;
    background-color: #0b3476
}

.blog-archive .item {
    width: 100%;
    height: 425px;
    display: block;
    border-radius: 10px;
    padding: 15px;
    background-color: white;
    box-shadow: 0px 5px 30px 0px rgba(0, 0, 0, 0.08);
    margin-bottom: 30px;
    transition: all 0.3s
}

.blog-archive .item:hover {
    background-color: #fdd3d4
}

.blog-archive .item:hover .img:before {
    height: 0;
    opacity: 0
}

.blog-archive .item:hover .img:after {
    opacity: 1;
    height: 100%
}

.blog-archive .item:hover .subtitle {
    opacity: 1
}

.blog-archive .item.blue-theme {
    background-color: #dae1eb
}

.blog-archive .item.blue-theme .img:before {
    background-image: -moz-linear-gradient(90deg, #0a3476 0%, rgba(10, 52, 118, 0) 100%);
    background-image: -webkit-linear-gradient(90deg, #0a3476 0%, rgba(10, 52, 118, 0) 100%);
    background-image: -ms-linear-gradient(90deg, #0a3476 0%, rgba(10, 52, 118, 0) 100%)
}

.blog-archive .item.red-theme {
    background-color: #fadcdc
}

.blog-archive .item.red-theme .img:before {
    background-image: -moz-linear-gradient(90deg, #fd2f31 0%, rgba(253, 47, 49, 0) 100%);
    background-image: -webkit-linear-gradient(90deg, #fd2f31 0%, rgba(253, 47, 49, 0) 100%);
    background-image: -ms-linear-gradient(90deg, #fd2f31 0%, rgba(253, 47, 49, 0) 100%)
}

.blog-archive .item.orange-theme {
    background-color: #f9e9d3
}

.blog-archive .item.orange-theme .img:before {
    background-image: -moz-linear-gradient(90deg, #ff9000 0%, rgba(255, 144, 0, 0) 100%);
    background-image: -webkit-linear-gradient(90deg, #ff9000 0%, rgba(255, 144, 0, 0) 100%);
    background-image: -ms-linear-gradient(90deg, #ff9000 0%, rgba(255, 144, 0, 0) 100%)
}

.blog-archive .item .img {
    width: 100%;
    height: 100%;
    border-radius: 10px;
    overflow: hidden;
    position: relative;
    display: flex;
    align-items: flex-end;
    padding: 30px;
    background-position: center
}

.blog-archive .item .img:before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
    background-image: -moz-linear-gradient(90deg, black 0%, rgba(0, 0, 0, 0) 100%);
    background-image: -webkit-linear-gradient(90deg, black 0%, rgba(0, 0, 0, 0) 100%);
    background-image: -ms-linear-gradient(90deg, black 0%, rgba(0, 0, 0, 0) 100%);
    opacity: 1;
    transition: all 0.3s
}

.blog-archive .item .img:after {
    content: '';
    position: absolute;
    bottom: 0;
    right: 0;
    width: 100%;
    height: 0%;
    background-image: -moz-linear-gradient(90deg, #fd2f31 0%, rgba(253, 47, 49, 0) 100%);
    background-image: -webkit-linear-gradient(90deg, #fd2f31 0%, rgba(253, 47, 49, 0) 100%);
    background-image: -ms-linear-gradient(90deg, #fd2f31 0%, rgba(253, 47, 49, 0) 100%);
    opacity: 0;
    transition: all 0.3s
}

.blog-archive .item article {
    position: relative;
    z-index: 9
}

.blog-archive .item .subtitle {
    font-size: 16px;
    color: #ffffff;
    opacity: 0.6;
    display: block;
    margin-bottom: 5px;
    transition: all 0.3s
}

.blog-archive .item .title {
    font-size: 22px;
    font-weight: 700;
    color: #ffffff;
    display: block;
    margin-bottom: 15px
}

.blog-archive .item .nav-info .nav-item {
    display: flex;
    align-items: center;
    font-size: 14px;
    color: rgba(255, 255, 255, 0.6);
    margin-left: 25px;
    transition: all 0.3s
}

.blog-archive .item .nav-info .nav-item:last-child {
    margin-left: 0
}

.blog-archive .item .nav-info .nav-item b {
    font-weight: 500;
    display: block
}

.blog-archive .item .nav-info .nav-item .icon {
    width: 55px;
    height: 55px;
    border-radius: 10px;
    border: 4px solid rgba(255, 255, 255, 0.25);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: 15px;
    transition: all 0.3s
}

.blog-archive .item .nav-info .nav-item .icon i {
    font-size: 20px;
    height: 20px;
    display: block;
    color: #ffffff;
    opacity: 0.6;
    transition: all 0.3s
}

.join-us {
    margin: 75px 0px;
    position: relative
}

.join-us .shape {
    position: absolute;
    top: -75px;
    right: 0;
    max-height: 500px;
    transform: scaleX(-1);
    z-index: -1
}

.join-us .text {
    font-size: 16px;
    color: #858585;
    display: block;
    max-width: 900px;
    text-align: justify;
    text-align-last: center;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 20px
}

.join-us .more {
    width: fit-content;
    width: -moz-fit-content;
    display: flex;
    align-items: center;
    padding: 15px 30px;
    border-radius: 10px;
    font-size: 16px;
    color: #767676;
    font-weight: 500;
    border: 2px solid #f0f0f0;
    background-color: #ffffff;
    margin: 0 auto;
    transition: all 0.3s
}

.join-us .more:hover {
    background-color: #f0f0f0
}

.join-us .more:hover i {
    padding-right: 10px
}

.join-us .more i {
    font-size: 16px;
    height: 16px;
    display: block;
    padding-right: 0;
    margin-right: 10px;
    transition: all 0.3s
}

.line-section {
    margin-bottom: 75px;
    position: relative;
    z-index: -2
}

.line-section .line {
    display: block;
    width: 100%;
    height: 1px;
    background-color: #f0f0f0;
    margin-bottom: 4px
}

.line-section .line:last-child {
    margin-bottom: 0
}

body.order-theme {
    background-color: #05152f
}

.header.order-theme .top-bar .nav .nav-item:after {
    background-color: #12213a
}

.header.order-theme .top-bar .nav .nav-item .nav-link {
    color: #7d8593
}

.header.order-theme .top-bar .nav-mobile .nav-item .nav-link {
    border-color: rgba(255, 255, 255, 0.4)
}

.header.order-theme .top-bar .nav-mobile .nav-item .nav-link.btn-menu {
    border-color: #0b3476
}

.header.order-theme .top-bar .nav-mobile .nav-item .nav-link i {
    color: #ffffff
}

.header.order-theme .main-bar .subtitle {
    color: #697382
}

.header.order-theme .main-bar .title {
    color: #9ba1ac
}

.header.order-theme .main-bar .text {
    color: #485366
}

.header.order-theme .main-bar .nav .nav-item .nav-link {
    color: #9198a4;
    border-color: #0f1e37;
    background-color: rgba(255, 255, 255, 0)
}

.header.order-theme .main-bar .nav .nav-item .nav-link.gra-theme {
    color: #a3b3cd;
    background-image: -moz-linear-gradient(180deg, #0a3476, #214989, #0a3476, #214989);
    background-image: -webkit-linear-gradient(180deg, #0a3476, #214989, #0a3476, #214989);
    background-image: -ms-linear-gradient(180deg, #0a3476, #214989, #0a3476, #214989)
}

.header.order-theme .main-bar .nav .nav-item .nav-link:hover {
    background-color: #0f1e37
}

.header.header-order {
    position: fixed;
    top: 0;
    right: 0;
    width: 100%;
    z-index: 9
}

.header.header-order .top-bar {
    padding: 15px 0px
}

.header.header-order .top-bar .call {
    font-size: 14px
}

.header.header-order .top-bar .call i {
    font-size: 50px;
    height: 50px
}

.order-section {
    min-height: 100vh;
    margin: 0px 0px !important;
    padding-top: 115px;
    padding-bottom: 30px;
    display: flex;
    align-items: center
}

.order-section .part {
    margin: 0 !important
}

.order-section .steps-bar {
    margin-bottom: 30px
}

.order-section .steps-bar .top-bar {
    display: flex;
    margin-bottom: 20px
}

.order-section .steps-bar .top-bar .item {
    width: 20%;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative
}

.order-section .steps-bar .top-bar .item.yellow-theme i {
    color: #ffb400
}

.order-section .steps-bar .top-bar .item.yellow-theme .lines .line {
    background-color: #ffb400
}

.order-section .steps-bar .top-bar .item.orange-theme i {
    color: #ff8400
}

.order-section .steps-bar .top-bar .item.orange-theme .lines .line {
    background-color: #ff8400
}

.order-section .steps-bar .top-bar .item.red-theme i {
    color: #db2b2f
}

.order-section .steps-bar .top-bar .item.red-theme .lines .line {
    background-color: #db2b2f
}

.order-section .steps-bar .top-bar .item.blue-theme i {
    color: #214989
}

.order-section .steps-bar .top-bar .item.blue-theme .lines .line {
    background-color: #214989
}

.order-section .steps-bar .top-bar .item.blue-dark-theme i {
    color: #0a3271
}

.order-section .steps-bar .top-bar .item.blue-dark-theme .lines .line {
    background-color: #0a3271
}

.order-section .steps-bar .top-bar .item .lines {
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateX(-50%) translateY(-50%);
    width: 120px;
    display: block
}

.order-section .steps-bar .top-bar .item .lines .line {
    width: 100%;
    height: 2px;
    background-color: #e5e5e5;
    display: block;
    margin-bottom: 5px
}

.order-section .steps-bar .top-bar .item .lines .line:last-child {
    margin-bottom: 0
}

.order-section .steps-bar .top-bar .item i {
    font-size: 50px;
    height: 50px;
    display: block;
    color: #a5a5a5
}

.order-section .steps-bar .bottom-bar {
    width: 100%;
    border-radius: 10px;
    background-color: #f7f7f7;
    padding: 20px 0px;
    display: flex
}

.order-section .steps-bar .bottom-bar .item {
    width: 20%;
    display: block;
    padding: 0px 15px;
    font-size: 14px;
    color: #afafaf;
    text-align: center
}

.order-section .steps-bar .bottom-bar .item.active b {
    color: #666666
}

.order-section .steps-bar .bottom-bar .item b {
    font-size: 16px;
    font-weight: 700;
    display: block;
    text-align: center
}

.order-section .main-bar .header-section {
    margin-bottom: 25px
}

.order-section .main-bar .header-section .title {
    font-size: 26px
}

.order-section .main-bar .nav-select {
    width: 100%;
    justify-content: center;
    position: relative;
    margin-bottom: 15px
}

.order-section .main-bar .nav-select .nav-item {
    margin-left: 15px
}

.order-section .main-bar .nav-select .nav-item:last-child {
    margin-left: 0
}

.order-section .main-bar .nav-select .nav-item input {
    display: none
}

.order-section .main-bar .nav-select .nav-item label {
    cursor: pointer;
    font-size: 16px;
    font-weight: 500;
    color: #0b3476;
    display: block;
    padding: 15px 20px;
    border-radius: 10px;
    border: 3px solid rgba(11, 52, 118, 0.1);
    overflow: hidden;
    position: relative;
    transition: all 0.3s
}

.order-section .main-bar .nav-select .nav-item label:hover {
    border-color: rgba(11, 52, 118, 0.4)
}

.order-section .main-bar .nav-select .nav-item label:after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 0;
    height: 100%;
    background-image: -moz-linear-gradient(180deg, #0a3476 0%, #214989 100%);
    background-image: -webkit-linear-gradient(180deg, #0a3476 0%, #214989 100%);
    background-image: -ms-linear-gradient(180deg, #0a3476 0%, #214989 100%);
    opacity: 0;
    z-index: -1
}

.order-section .main-bar .nav-select .nav-item input[type="radio"]:checked label {
    color: #ffffff;
    border-color: rgba(255, 255, 255, 0) !important
}

.order-section .main-bar .nav-select .nav-item input[type="radio"]:checked label:after {
    width: 100%;
    opacity: 1
}

.order-section .main-bar .btn-next {
    width: 100%;
    max-width: 300px;
    margin-right: auto;
    margin-left: auto;
    height: 65px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    font-weight: 500;
    color: #ffffff;
    background-image: -moz-linear-gradient(180deg, #0b3577, #3e629c, #0b3577, #3e629c);
    background-image: -webkit-linear-gradient(180deg, #0b3577, #3e629c, #0b3577, #3e629c);
    background-image: -ms-linear-gradient(180deg, #0b3577, #3e629c, #0b3577, #3e629c);
    background-size: 300% 100%;
    moz-transition: all .4s ease-in-out;
    -o-transition: all .4s ease-in-out;
    -webkit-transition: all .4s ease-in-out;
    transition: all .4s ease-in-out
}

.order-section .main-bar .btn-next:hover {
    background-position: 100% 0;
    moz-transition: all .4s ease-in-out;
    -o-transition: all .4s ease-in-out;
    -webkit-transition: all .4s ease-in-out;
    transition: all .4s ease-in-out
}

.order-section .main-bar .btn-next i {
    font-size: 18px;
    height: 18px;
    display: block;
    margin-right: 15px
}

.order-section .main-bar .text {
    width: 100%;
    font-size: 16px;
    color: #666666;
    text-align: center;
    text-align-last: center;
    margin-bottom: 20px;
    display: block
}

.order-section .main-bar .text a {
    color: #0b3476;
    transition: all 0.3s
}

.order-section .main-bar .text a:hover {
    color: #ff8400
}

.order-section .main-bar .btn-add {
    width: 65px;
    height: 65px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background-color: #f7f7f7;
    margin: 0 auto;
    transition: all 0.3s
}

.order-section .main-bar .btn-add:hover {
    background-color: #0b3476
}

.order-section .main-bar .btn-add:hover i {
    color: #ffffff
}

.order-section .main-bar .btn-add i {
    font-size: 20px;
    height: 20px;
    display: block;
    color: #666666;
    transition: all 0.3s
}

.order-section .main-bar .form-group {
    margin-bottom: 20px
}

.order-section .main-bar textarea {
    width: 100%;
    height: 120px;
    max-width: 680px;
    margin: 0 auto;
    border-radius: 10px;
    border: 3px solid #e5e5e5;
    display: block;
    padding: 15px;
    font-size: 15px;
    font-weight: normal;
    color: #666666
}

.order-section .main-bar textarea::placeholder {
    opacity: 1;
    color: #b2b2b2
}

.order-section .main-bar .item-product {
    width: 100%;
    padding: 15px 30px;
    border-radius: 10px;
    border: 3px solid #e5e5e5;
    display: flex;
    align-items: center;
    margin-bottom: 20px
}

.order-section .main-bar .item-product img {
    width: 125px;
    height: 145px;
    object-fit: contain;
    object-position: center;
    margin-left: 20px
}

.order-section .main-bar .item-product .title {
    font-size: 21px;
    color: #666666;
    font-weight: 700;
    display: block;
    margin-bottom: 5px
}

.order-section .main-bar .item-product .subtitle {
    font-size: 17px;
    color: #8d8d8d;
    display: block
}

.order-section .main-bar .item-product input {
    width: 220px;
    height: 40px;
    border-radius: 5px;
    border: 2px solid rgba(253, 47, 47, 0.1);
    display: block;
    padding-right: 10px;
    font-size: 14px;
    color: #fd3030;
    margin-top: 10px
}

.order-section .main-bar .item-product input::placeholder {
    color: #fd3030;
    opacity: 0.75
}

.order-section .main-bar .item-product .actions {
    margin-right: auto;
    display: flex;
    align-items: center
}

.order-section .main-bar .item-product .count {
    margin-left: 15px
}

.order-section .main-bar .item-product .count .select2 {
    width: 120px !important;
    height: 50px !important
}

.order-section .main-bar .item-product .count .select2 .selection {
    width: 100%;
    height: 100% !important;
    box-shadow: none !important;
    outline: none !important
}

.order-section .main-bar .item-product .count .select2 .selection .select2-selection {
    height: 100% !important;
    border-radius: 200px !important;
    border: none !important;
    background-color: #f7f7f7 !important;
    box-shadow: none !important;
    outline: none !important;
    position: relative;
    display: flex;
    align-items: center
}

.order-section .main-bar .item-product .count .select2 .selection .select2-selection:after {
    content: "\e933";
    font-family: icomoon;
    position: absolute;
    top: 50%;
    left: 20px;
    transform: translateY(-50%);
    font-size: 10px;
    color: #666666;
    font-weight: 700
}

.order-section .main-bar .item-product .count .select2 .selection .select2-selection .select2-selection__rendered {
    padding-right: 25px;
    font-size: 16px;
    color: #666666;
    display: block
}

.order-section .main-bar .item-product .count .select2 .selection .select2-selection .select2-selection__arrow {
    display: none
}

.order-section .main-bar .item-product .btn-delete {
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    background-color: rgba(253, 47, 47, 0.1);
    border-radius: 50%;
    transition: all 0.3s
}

.order-section .main-bar .item-product .btn-delete:hover {
    background-color: #fd2f2f
}

.order-section .main-bar .item-product .btn-delete:hover i {
    color: #ffffff
}

.order-section .main-bar .item-product .btn-delete i {
    font-size: 18px;
    height: 18px;
    display: block;
    color: #fd2f2f;
    transition: all 0.3s
}

.order-section .main-bar .btn-add-p {
    font-size: 16px;
    color: #666666;
    display: flex;
    align-items: center;
    text-align: right;
    padding: 0;
    margin-bottom: 20px;
    transition: all 0.3s
}

.order-section .main-bar .btn-add-p:hover .icon {
    background-color: #666666
}

.order-section .main-bar .btn-add-p:hover .icon i {
    color: #ffffff
}

.order-section .main-bar .btn-add-p .icon {
    width: 65px;
    height: 65px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background-color: #f7f7f7;
    margin-left: 20px;
    transition: all 0.3s
}

.order-section .main-bar .btn-add-p .icon i {
    font-size: 20px;
    height: 20px;
    display: block;
    color: #666666;
    transition: all 0.3s
}

.order-section .main-bar .btn-add-p b {
    display: block;
    font-size: 20px;
    font-weight: 700
}

.order-section .main-bar .login-section {
    max-width: 500px;
    width: 100%;
    margin: 0 auto
}

.order-section .main-bar .login-section .digit-group {
    margin-left: 0
}

.order-section .main-bar .login-section .time {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border-radius: 10px;
    height: 75px;
    padding: 0px 20px
}

.order-section .main-bar .code {
    font-size: 28px;
    color: #666666;
    font-weight: 500;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 15px 15px;
    border: 3px solid #e5e5e5;
    border-radius: 10px;
    max-width: 500px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 20px
}

.order-section .main-bar .more {
    width: 100%;
    height: 75px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    font-weight: 500;
    color: #FFFFFF;
    background-color: #0b3476;
    max-width: 500px;
    margin-left: auto;
    margin-right: auto;
    background-image: -moz-linear-gradient(180deg, #0b3577, #3e629c, #0b3577, #3e629c);
    background-image: -webkit-linear-gradient(180deg, #0b3577, #3e629c, #0b3577, #3e629c);
    background-image: -ms-linear-gradient(180deg, #0b3577, #3e629c, #0b3577, #3e629c);
    background-size: 300% 100%;
    moz-transition: all .4s ease-in-out;
    -o-transition: all .4s ease-in-out;
    -webkit-transition: all .4s ease-in-out;
    transition: all .4s ease-in-out
}

.order-section .main-bar .more:hover {
    background-position: 100% 0;
    moz-transition: all .4s ease-in-out;
    -o-transition: all .4s ease-in-out;
    -webkit-transition: all .4s ease-in-out;
    transition: all .4s ease-in-out
}

.order-section .main-bar .more i {
    font-size: 18px;
    height: 18px;
    display: block;
    margin-right: 15px
}

.blog-single {
    margin: 75px 0px
}

.blog-single .box-info {
    border-radius: 10px;
    box-shadow: 0px 5px 30px 0px rgba(0, 0, 0, 0.075);
    padding: 25px 10px;
    margin-bottom: 25px
}

.blog-single .box-info .nav {
    width: 100%;
    justify-content: center
}

.blog-single .box-info .nav .nav-item {
    display: flex;
    align-items: center;
    font-size: 16px;
    color: #666666;
    margin-left: 25px
}

.blog-single .box-info .nav .nav-item:last-child {
    margin-left: 0
}

.blog-single .box-info .nav .nav-item b {
    font-weight: 500;
    display: block;
    color: #4c4c4c
}

.blog-single .box-info .nav .nav-item .icon {
    width: 65px;
    height: 65px;
    border-radius: 10px;
    border: 5px solid #f0f0f0;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: 15px
}

.blog-single .box-info .nav .nav-item .icon i {
    font-size: 22px;
    height: 22px;
    display: block;
    color: #666666
}

.blog-single .img {
    width: 100%;
    height: 400px;
    border-radius: 10px;
    object-position: center;
    display: block;
    margin-bottom: 25px;
    position: relative;
    overflow: hidden
}

.blog-single .img:before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
    background-image: -moz-linear-gradient(120deg, black 0%, rgba(0, 0, 0, 0) 100%);
    background-image: -webkit-linear-gradient(120deg, black 0%, rgba(0, 0, 0, 0) 100%);
    background-image: -ms-linear-gradient(120deg, black 0%, rgba(0, 0, 0, 0) 100%);
    opacity: 0.902;
    z-index: 9
}

.blog-single .img img {
    width: 100%;
    height: 100%;
    border-radius: 10px;
    object-fit: cover;
    display: block
}

.blog-single .img article {
    padding: 30px;
    position: absolute;
    bottom: 0;
    right: 0;
    width: 100%;
    z-index: 10
}

.blog-single .img .subtitle {
    font-size: 16px;
    color: #ffffff;
    opacity: 0.6;
    display: block;
    margin-bottom: 5px;
    transition: all 0.3s
}

.blog-single .img .title {
    font-size: 22px;
    font-weight: 700;
    color: #ffffff;
    display: block;
    margin-bottom: 15px
}

.blog-single .img .nav .nav-item {
    display: flex;
    align-items: center;
    font-size: 14px;
    color: rgba(255, 255, 255, 0.6);
    margin-left: 25px;
    transition: all 0.3s
}

.blog-single .img .nav .nav-item:last-child {
    margin-left: 0
}

.blog-single .img .nav .nav-item b {
    font-weight: 500;
    display: block
}

.blog-single .img .nav .nav-item .icon {
    width: 55px;
    height: 55px;
    border-radius: 10px;
    border: 4px solid rgba(255, 255, 255, 0.25);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: 15px;
    transition: all 0.3s
}

.blog-single .img .nav .nav-item .icon i {
    font-size: 20px;
    height: 20px;
    display: block;
    color: #ffffff;
    opacity: 0.6;
    transition: all 0.3s
}

.blog-single .table-of-content {
    background-color: #f6f6f6;
    border-radius: 10px;
    padding: 25px;
    margin-bottom: 25px
}

.blog-single .table-of-content .head {
    display: flex;
    align-items: center;
    justify-content: space-between
}

.blog-single .table-of-content .head .title {
    display: flex;
    align-items: center;
    font-size: 16px;
    color: #666666
}

.blog-single .table-of-content .head .title b {
    font-weight: 500;
    display: block;
    color: #4c4c4c
}

.blog-single .table-of-content .head .title .icon {
    width: 65px;
    height: 65px;
    border-radius: 200px;
    border: 4px solid #f7eaea;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: 15px
}

.blog-single .table-of-content .head .title .icon i {
    font-size: 22px;
    height: 22px;
    display: block;
    color: #fd2f31
}

.blog-single .table-of-content i {
    cursor: pointer;
    font-size: 14px;
    height: 14px;
    color: #aeaeae;
    display: block;
    transition: all 0.3s
}

.blog-single .table-of-content i:hover {
    color: #fd3030
}

.blog-single .table-of-content .body {
    display: none;
    padding-top: 25px
}

.blog-single .table-of-content .t-li {
    font-size: 16px;
    color: #626262;
    font-weight: 700;
    display: block;
    margin-bottom: 7.5px;
    transition: all 0.3s
}

.blog-single .table-of-content .t-li:hover {
    color: #0b3476
}

.blog-single .table-of-content .sub-li {
    margin-bottom: 15px
}

.blog-single .table-of-content .sub-li a {
    font-size: 14px;
    font-weight: 300;
    color: #626262;
    display: block;
    margin-bottom: 5px;
    transition: all 0.3s
}

.blog-single .table-of-content .sub-li a:hover {
    color: #0b3476
}

.blog-single .text {
    font-size: 16px;
    color: #666666;
    display: block;
    text-align: justify;
    text-align-last: right;
    margin-bottom: 25px
}

.blog-single .quote-box {
    padding: 25px;
    border-radius: 10px;
    background-color: #f6f6f6
}

.blog-single .quote-box .text {
    margin-bottom: 0
}

.blog-single .title-blog {
    display: flex;
    align-items: center;
    font-size: 18px;
    font-weight: 500;
    color: #666666;
    margin-bottom: 15px
}

.blog-single .title-blog i {
    font-size: 24px;
    height: 24px;
    display: block;
    margin-left: 15px
}

.blog-single .box-recent {
    border-radius: 10px;
    box-shadow: 0px 5px 30px 0px rgba(0, 0, 0, 0.075);
    padding: 20px 25px;
    display: flex;
    align-items: center;
    flex-wrap: wrap
}

.blog-single .box-recent .title-box {
    display: flex;
    align-items: center;
    font-size: 16px;
    color: #0b3476;
    padding-top: 5px;
    padding-bottom: 5px;
    margin-left: 25px
}

.blog-single .box-recent .title-box b {
    font-weight: 500;
    display: block
}

.blog-single .box-recent .title-box .icon {
    width: 65px;
    height: 65px;
    border-radius: 10px;
    border: 5px solid #eceff4;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: 15px
}

.blog-single .box-recent .title-box .icon i {
    font-size: 22px;
    height: 22px;
    display: block;
    color: #0b3476
}

.blog-single .box-recent .nav .nav-item {
    padding-top: 5px;
    padding-bottom: 5px;
    margin-left: 15px
}

.blog-single .box-recent .nav .nav-item .nav-link {
    font-size: 16px;
    padding: 15px 30px;
    border-radius: 10px;
    background-color: #f1f3f7;
    color: #96a8c4;
    display: block;
    transition: all 0.3s
}

.blog-single .box-recent .nav .nav-item .nav-link:hover {
    background-color: #0b3476;
    color: #ffffff
}

.blog-single .gallery-row {
    margin-bottom: 15px
}

.blog-single .img-gallery {
    padding: 10px;
    border-radius: 10px;
    background-color: white;
    box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.1);
    margin-bottom: 10px
}

.blog-single .img-gallery img {
    width: 100%;
    height: 300px;
    border-radius: 10px;
    object-position: center;
    object-fit: cover
}

.blog-single .video-box {
    width: 100%;
    height: 400px;
    padding: 15px;
    border-radius: 10px;
    background-color: white;
    box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.1);
    margin-bottom: 10px;
    position: relative;
    margin-bottom: 25px
}

.blog-single .video-box:before {
    content: '';
    position: absolute;
    top: 50%;
    right: 50%;
    transform: translateX(50%) translateY(-50%);
    width: calc(100% - 30px);
    height: calc(100% - 30px);
    border-radius: 10px;
    background-color: #000000;
    opacity: 0.8;
    z-index: 9
}

.blog-single .video-box img {
    width: 100%;
    height: 100%;
    display: block;
    border-radius: 10px;
    object-fit: cover;
    object-position: center
}

.blog-single .video-box .btn-play {
    display: block;
    position: absolute;
    top: 50%;
    right: 50%;
    transform: translateX(50%) translateY(-50%);
    z-index: 10
}

.blog-single .video-box .btn-play:hover svg {
    opacity: 1
}

.blog-single .video-box .btn-play svg {
    width: 80px;
    height: 80px;
    fill: #FFFFFF;
    opacity: 0.4;
    transition: all 0.3s
}

.blog-single .video-box .btn-play svg path {
    fill: #FFFFFF
}

.blog-archive.slider-theme .item {
    box-shadow: none !important;
    border: 2px solid #e5e5e5;
    margin-bottom: 0 !important
}

.blog-archive .slider-container {
    padding: 0px 25px;
    position: relative
}

.blog-archive .button-nav {
    cursor: pointer;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #ffffff;
    border: 5px solid #f0f0f0;
    outline: none !important;
    box-shadow: none !important;
    transition: all 0.3s;
    margin: 0;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 9
}

.blog-archive .button-nav.next {
    left: 0
}

.blog-archive .button-nav.prev {
    right: 0
}

.blog-archive .button-nav.swiper-button-disabled {
    opacity: 0.5
}

.blog-archive .button-nav:hover {
    border-color: #0b3476
}

.blog-archive .button-nav:hover i {
    color: #0b3476
}

.blog-archive .button-nav i {
    font-size: 13px;
    height: 13px;
    display: block;
    color: #999999;
    transition: all 0.3s
}

.form-elements .rate {
    font-size: 18px;
    font-weight: 500;
    color: #666666;
    display: block;
    margin-left: 25px
}

.form-elements .rate .jq-ry-rated-group svg {
    fill: #e5e5e5 !important
}

.comment-section {
    margin-bottom: 75px
}

.comment-section .nav-filter {
    display: flex;
    justify-content: center;
    width: 100%;
    margin-bottom: 30px
}

.comment-section .nav-filter .nav-item {
    cursor: pointer;
    padding: 12.5px 20px;
    border-radius: 10px;
    display: block;
    background-color: #f6f6f6;
    font-size: 17px;
    font-weight: 500;
    color: #949494;
    margin-left: 10px;
    position: relative
}

.comment-section .nav-filter .nav-item.active {
    background-color: #f1f3f7;
    color: #0b3476
}

.comment-section .item {
    display: flex;
    margin-bottom: 35px
}

.comment-section .item.reply {
    padding-right: 100px
}

.comment-section .item.red-theme img {
    border-color: #ffe6e6
}

.comment-section .item.red-theme .btn-reply {
    background-color: #fd3030;
    color: #ffffff
}

.comment-section .item.red-theme .btn-reply:hover {
    background-color: #cd2f2f
}

.comment-section .item.orange-theme img {
    border-color: #fff2e0
}

.comment-section .item.orange-theme .btn-reply {
    background-color: #fff8f0;
    color: #ff8400
}

.comment-section .item.orange-theme .btn-reply:hover {
    background-color: #ff8400;
    color: #ffffff
}

.comment-section .item img {
    width: 80px;
    height: 80px;
    min-width: 80px;
    display: block;
    border-radius: 50%;
    padding: 5px;
    border: 3px solid #e1e6ee;
    margin-left: 20px
}

.comment-section .item .info {
    width: 225px;
    min-width: 225px;
    margin-left: 20px
}

.comment-section .item .name {
    font-size: 16px;
    color: #666666;
    font-weight: 700;
    display: block;
    margin-bottom: 10px
}

.comment-section .item .date {
    font-size: 14px;
    color: #666666;
    font-weight: 300;
    display: block;
    margin-bottom: 10px
}

.comment-section .item .rate {
    display: flex;
    font-size: 16px;
    color: #b8b8b8;
    margin-bottom: 10px
}

.comment-section .item .rate .rateYo-c {
    margin-right: 10px
}

.comment-section .item .rate .jq-ry-rated-group svg {
    fill: #e5e5e5 !important
}

.comment-section .item .btn-reply {
    padding: 12.5px 25px;
    border-radius: 10px;
    background-color: #f1f3f7;
    display: block;
    font-size: 16px;
    font-weight: 500;
    color: #0b3476
}

.comment-section .item .btn-reply:hover {
    background-color: #0b3476;
    color: #ffffff
}

.comment-section .item .text {
    font-size: 16px;
    color: #666666;
    display: block;
    text-align: justify;
    text-align-last: right;
    margin-bottom: 0
}

.comment-section .reply-box {
    width: 100%;
    margin-top: 25px;
    position: relative;
    display: none
}

.comment-section .reply-box textarea {
    width: 100%;
    height: 250px;
    border-radius: 10px;
    font-size: 16px;
    padding: 20px;
    color: #666666;
    display: block;
    box-shadow: 0px 8px 80px 0px rgba(0, 0, 0, 0.1);
    border: none
}

.comment-section .reply-box textarea::placeholder {
    opacity: 0.7;
    color: #666666
}

.comment-section .reply-box .btn-send {
    width: fit-content;
    width: -moz-fit-content;
    margin-right: auto;
    font-size: 18px;
    color: #ffffff;
    font-weight: 500;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 5px 30px;
    height: 60px;
    border-radius: 10px;
    background-image: -moz-linear-gradient(180deg, #0b3577, #3e629c, #0b3577, #3e629c);
    background-image: -webkit-linear-gradient(180deg, #0b3577, #3e629c, #0b3577, #3e629c);
    background-image: -ms-linear-gradient(180deg, #0b3577, #3e629c, #0b3577, #3e629c);
    background-size: 300% 100%;
    moz-transition: all .4s ease-in-out;
    -o-transition: all .4s ease-in-out;
    -webkit-transition: all .4s ease-in-out;
    transition: all .4s ease-in-out;
    position: absolute;
    bottom: 20px;
    left: 20px
}

.comment-section .reply-box .btn-send:hover {
    background-position: 100% 0;
    moz-transition: all .4s ease-in-out;
    -o-transition: all .4s ease-in-out;
    -webkit-transition: all .4s ease-in-out;
    transition: all .4s ease-in-out
}

.header.header-profile {
    padding-bottom: 62.5px
}

.profile-section {
    margin-top: -62.5px;
    margin-bottom: 75px
}

.profile-section .top-bar {
    padding: 30px;
    border-radius: 10px;
    background-color: #0b3476;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 30px
}

.profile-section .top-bar .user {
    display: flex;
    align-items: center;
    font-size: 16px;
    font-weight: 300;
    color: #ffffff
}

.profile-section .top-bar .user b {
    font-weight: 700;
    display: block;
    margin-bottom: 5px
}

.profile-section .top-bar .user img {
    width: 65px;
    height: 65px;
    display: block;
    border-radius: 50%;
    border: 4px solid #3b5d91;
    margin-left: 15px
}

.profile-section .top-bar .nav .nav-item {
    margin-left: 15px
}

.profile-section .top-bar .nav .nav-item:last-child {
    margin-left: 0
}

.profile-section .top-bar .nav .nav-item .nav-link {
    font-size: 16px;
    font-weight: 500;
    color: #ffffff;
    padding: 15px 30px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid #2f528a;
    transition: all 0.3s
}

.profile-section .top-bar .nav .nav-item .nav-link:hover {
    border-color: #ffffff
}

.profile-section .top-bar .nav .nav-item .nav-link:hover i {
    padding-right: 10px
}

.profile-section .top-bar .nav .nav-item .nav-link.white-theme {
    background-color: #ffffff;
    border-color: #ffffff;
    color: #0b3476
}

.profile-section .top-bar .nav .nav-item .nav-link i {
    font-size: 14px;
    height: 14px;
    display: block;
    padding-right: 0;
    margin-right: 15px;
    transition: all 0.3s
}

.profile-section .btn-profile {
    padding: 7.5px 15px;
    background-color: #fd3030;
    border-radius: 5px;
    font-size: 16px;
    font-weight: 500;
    color: #ffffff;
    align-items: center;
    justify-content: center;
    margin-bottom: 25px
}

.profile-section .btn-profile i {
    font-size: 18px;
    height: 18px;
    display: block;
    margin-left: 10px
}

.profile-section .nav-side {
    flex-direction: column
}

.profile-section .nav-side .nav-item {
    margin-bottom: 20px;
    position: relative
}

.profile-section .nav-side .nav-item:last-child {
    margin-bottom: 0
}

.profile-section .nav-side .nav-item .nav-link {
    display: flex;
    align-items: center;
    font-size: 15px;
    font-weight: 300;
    color: #666666;
    padding: 0
}

.profile-section .nav-side .nav-item .nav-link.logout .icon {
    border-color: #fd3030;
    background-color: #fd3030
}

.profile-section .nav-side .nav-item .nav-link.logout .icon i {
    color: #ffffff
}

.profile-section .nav-side .nav-item .nav-link:hover b {
    color: #fd3030
}

.profile-section .nav-side .nav-item .nav-link b {
    display: block;
    font-size: 17px;
    font-weight: 700;
    color: #4c4c4c;
    margin-bottom: 3px;
    transition: all 0.3s
}

.profile-section .nav-side .nav-item .nav-link .icon {
    width: 70px;
    height: 70px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    border: 4px solid #ebebeb;
    margin-left: 15px;
    position: relative
}

.profile-section .nav-side .nav-item .nav-link .icon i {
    font-size: 22px;
    height: 22px;
    display: block;
    color: #fd3030
}

.profile-section .nav-side .nav-item .nav-link .icon .circle {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    transform: translateX(50%) translateY(-50%);
    border: 4px solid
}

.profile-section .nav-side .nav-item .nav-link .icon .number {
    width: 25px;
    height: 25px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 0;
    right: 0;
    transform: translateX(50%) translateY(-50%);
    border: 3px solid;
    font-size: 12px;
    color: #FFFFFF;
    padding-top: 1.5px;
    padding-left: 1px
}

.profile-section .nav-side .nav-item.active .icon {
    background: #1f4785
}

.profile-section .nav-side .nav-item.active .icon i {
    color: #fff
}

.profile-section .main-profile .part {
    margin-bottom: 35px
}

.profile-section .main-profile .part:last-child {
    margin-bottom: 0
}

.profile-section .main-profile .header-profile {
    position: relative;
    margin-bottom: 30px;
    font-size: 16px;
    color: #9a9a9a
}

.profile-section .main-profile .header-profile .lines {
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    width: 100%
}

.profile-section .main-profile .header-profile .lines .line {
    width: 100%;
    height: 10px;
    display: block;
    background-color: #ebebeb;
    margin-bottom: 3px
}

.profile-section .main-profile .header-profile .lines .line:last-child {
    margin-bottom: 0
}

.profile-section .main-profile .header-profile article {
    display: flex;
    align-items: center;
    padding-left: 30px;
    background-color: #ffffff;
    position: relative;
    z-index: 9;
    width: fit-content;
    width: -moz-fit-content
}

.profile-section .main-profile .header-profile i {
    font-size: 50px;
    height: 50px;
    display: block;
    color: #0b3476;
    margin-left: 20px
}

.profile-section .main-profile .header-profile img {
    width: 50px;
    height: auto;
    margin-left: 15px;
    display: block
}

.profile-section .main-profile .header-profile b {
    font-size: 20px;
    font-weight: normal;
    display: block;
    color: #666666
}

.profile-section .main-profile .form-group {
    margin-bottom: 20px
}

.profile-section .main-profile .form-group.error-theme .label {
    color: #fb8081;
    display: flex;
    align-items: center;
    justify-content: space-between
}

.profile-section .main-profile .form-group.error-theme input {
    border-color: #fee5e5
}

.profile-section .main-profile .label {
    font-size: 14px;
    color: #666666;
    font-weight: 500;
    padding-right: 15px;
    margin-bottom: 7.5px;
    display: block
}

.profile-section .main-profile input, .profile-section .main-profile textarea {
    width: 100%;
    height: 60px;
    border-radius: 10px;
    border: 3px solid #ebebeb;
    display: block;
    padding-right: 15px;
    font-size: 14px;
    color: #666666
}

.profile-section .main-profile input::placeholder, .profile-section .main-profile textarea::placeholder {
    color: #666666;
    opacity: 0.7
}

.profile-section .main-profile input[readonly] {
    background-color: #f4f4f4;
    border-color: #f4f4f4
}

.profile-section .main-profile textarea {
    height: 180px;
    padding: 15px;
    border-radius: 10px
}

.profile-section .main-profile .btn-submit {
    width: 100%;
    height: 60px;
    padding: 5px 5px;
    border-radius: 10px;
    display: block;
    font-size: 18px;
    font-weight: 500;
    color: #ffffff;
    transition: all 0.3s;
    margin-bottom: 20px;
    background-image: -moz-linear-gradient(180deg, #0b3577, #3e629c, #0b3577, #3e629c);
    background-image: -webkit-linear-gradient(180deg, #0b3577, #3e629c, #0b3577, #3e629c);
    background-image: -ms-linear-gradient(180deg, #0b3577, #3e629c, #0b3577, #3e629c);
    background-size: 300% 100%;
    moz-transition: all .4s ease-in-out;
    -o-transition: all .4s ease-in-out;
    -webkit-transition: all .4s ease-in-out;
    transition: all .4s ease-in-out
}

.profile-section .main-profile .btn-submit:hover {
    background-position: 100% 0;
    moz-transition: all .4s ease-in-out;
    -o-transition: all .4s ease-in-out;
    -webkit-transition: all .4s ease-in-out;
    transition: all .4s ease-in-out
}

.profile-section .main-profile .select2 {
    width: 100% !important;
    height: 60px !important
}

.profile-section .main-profile .select2 .selection {
    width: 100%;
    height: 100%
}

.profile-section .main-profile .select2 .selection .select2-selection {
    width: 100%;
    height: 100%;
    border-radius: 10px !important;
    border: 3px solid #ebebeb !important;
    background-color: #ffffff !important;
    outline: none !important;
    box-shadow: none !important;
    display: flex;
    align-items: center;
    position: relative
}

.profile-section .main-profile .select2 .selection .select2-selection:after {
    content: "\e933";
    font-family: icomoon;
    position: absolute;
    top: 50%;
    left: 20px;
    transform: translateY(-50%);
    font-size: 10px;
    color: #a1a1a1;
    font-weight: 700
}

.profile-section .main-profile .select2 .selection .select2-selection .select2-selection__rendered {
    font-size: 14px;
    color: #666666;
    padding-right: 15px
}

.profile-section .main-profile .select2 .selection .select2-selection .select2-selection__arrow {
    display: none !important
}

.profile-section .main-profile .show-pass {
    cursor: pointer;
    position: absolute;
    top: 50%;
    left: 15px;
    transform: translateY(-50%)
}

.profile-section .main-profile .show-pass i {
    font-size: 18px;
    height: 18px;
    color: #b2b2b2;
    display: block
}

.profile-section .main-profile .info {
    width: 100%;
    display: flex;
    align-items: center;
    font-size: 14px;
    color: #b2b2b2;
    margin-bottom: 20px
}

.profile-section .main-profile .info i {
    font-size: 18px;
    height: 18px;
    display: block;
    margin-left: 10px
}

.profile-section .main-profile .card-list {
    margin-bottom: 20px
}

.profile-section .main-profile .card-list .card {
    padding: 30px;
    border-radius: 10px;
    margin-bottom: 20px
}

.profile-section .main-profile .card-list .card img {
    height: 60px;
    width: 150px;
    object-fit: contain;
    object-position: bottom right;
    display: block;
    margin-bottom: 10px
}

.profile-section .main-profile .card-list .card .number {
    font-size: 20px;
    color: #ffffff;
    display: block;
    opacity: 0.6
}

.profile-section .main-profile .card-list .card .name {
    font-size: 16px;
    color: #ffffff;
    display: block;
    opacity: 0.6
}

.profile-section .main-profile .card-list .btn-add {
    padding: 0;
    margin-bottom: 20px
}

.profile-section .main-profile .card-list .btn-add:hover i {
    color: #0b3476
}

.profile-section .main-profile .card-list .btn-add i {
    font-size: 50px;
    height: 50px;
    display: block;
    color: #ebebeb;
    transition: all 0.3s
}

.profile-section .main-profile .text {
    font-size: 16px;
    font-weight: 500;
    color: #666666;
    text-align: justify;
    text-align-last: right;
    margin-bottom: 20px
}

.profile-section .main-profile .relative-bar {
    margin-bottom: 20px
}

.profile-section .main-profile .digit-group {
    width: 100%;
    margin-left: 15px
}

.profile-section .main-profile .digit-group .input-group {
    width: 25%;
    padding-left: 15px
}

.profile-section .main-profile .digit-group input {
    width: 100%;
    height: 65px;
    border-radius: 10px;
    display: block;
    text-align: center;
    font-size: 22px;
    font-weight: 500;
    color: #4c4c4c;
    padding: 0
}

.profile-section .main-profile .digit-group input::placeholder {
    color: #4c4c4c;
    opacity: 0.75
}

.profile-section .main-profile .time {
    font-size: 14px;
    color: #666666;
    display: block;
    text-align: center;
    white-space: nowrap
}

.profile-section .main-profile .time #timer {
    white-space: nowrap;
    font-size: 22px;
    display: block;
    text-align: center
}

.profile-section .main-profile .edit-mobile {
    display: flex;
    align-items: center;
    font-size: 16px;
    font-weight: 500;
    color: #666666;
    margin-bottom: 20px
}

.profile-section .main-profile .edit-mobile:hover .icon {
    background-color: #666666
}

.profile-section .main-profile .edit-mobile:hover .icon i {
    color: #ffffff
}

.profile-section .main-profile .edit-mobile .icon {
    width: 55px;
    height: 55px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #ffffff;
    box-shadow: 0px 0px 30px 0px rgba(0, 0, 0, 0.075);
    margin-left: 15px;
    transition: all 0.3s
}

.profile-section .main-profile .edit-mobile .icon i {
    font-size: 18px;
    height: 18px;
    display: block;
    color: #cccccc;
    transition: all 0.3s
}

.profile-section .main-profile .text-box {
    padding: 30px;
    border-radius: 10px;
    font-size: 16px;
    color: #666666;
    display: block;
    margin-bottom: 25px;
    box-shadow: 3px 5px 30px 0px rgba(0, 0, 0, 0.05);
    text-align: justify;
    text-align-last: right
}

.profile-section .main-profile .your-credit {
    height: 60px;
    border-radius: 10px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #f1f3f7;
    font-size: 16px;
    font-weight: 500;
    color: #0b3476;
    margin-bottom: 20px
}

.profile-section .main-profile .select2 .selection .select2-selection .select2-selection__rendered {
    width: 100%
}

.profile-section .main-profile .select2 .selection .select2-selection .select2-selection__rendered div {
    display: flex;
    align-items: center
}

.profile-section .main-profile .select2 .selection .select2-selection .select2-selection__rendered div img {
    display: block;
    max-height: 30px;
    width: fit-content;
    margin-left: 15px;
    object-fit: contain;
    object-position: right
}

.profile-section .main-profile .shadow-box {
    height: 60px;
    border-radius: 10px;
    border: 3px solid #e2e2e2;
    display: flex;
    align-items: center;
    padding: 0px 10px;
    margin-bottom: 20px
}

.profile-section .main-profile .shadow-box .count {
    display: flex;
    align-items: center;
    max-width: 55%;
    width: 100%;
    font-size: 16px;
    color: #666666;
    padding: 0px 10px;
    padding-left: 20px
}

.profile-section .main-profile .shadow-box .count input {
    border: none;
    box-shadow: none;
    height: unset;
    width: 55px;
    padding: 0;
    text-align: left;
    margin-left: 5px
}

.profile-section .main-profile .shadow-box .count .btn {
    padding: 0
}

.profile-section .main-profile .shadow-box .count .btn.btn-plus {
    margin-left: auto
}

.profile-section .main-profile .shadow-box .count .btn.btn-minus {
    margin-right: auto
}

.profile-section .main-profile .shadow-box .count .btn i {
    font-size: 16px;
    height: 16px;
    color: #666666;
    display: block
}

.profile-section .main-profile .shadow-box .btn-submit {
    max-width: 45%;
    width: 100%;
    height: 40px;
    margin: 0;
    font-size: 16px
}

.profile-section .main-profile .table-div {
    margin-bottom: 20px
}

.profile-section .main-profile .table-div .t-head {
    margin-bottom: 5px
}

.profile-section .main-profile .table-div .th {
    font-size: 16px;
    font-weight: 500;
    color: #666666;
    display: block
}

.profile-section .main-profile .table-div .tr {
    width: 100%;
    border-radius: 10px;
    border: 2px solid #f0f0f0;
    background-color: #ffffff;
    margin-bottom: 10px;
    padding: 10px 5px;
    position: relative;
    z-index: 8
}

.profile-section .main-profile .table-div .tr.bg-gray {
    background-color: #f6f6f6;
    border-color: #f6f6f6
}

.profile-section .main-profile .table-div .td {
    font-size: 14px;
    font-weight: 500;
    color: #666666;
    display: block;
    position: relative;
    padding-top: 5px;
    padding-bottom: 5px
}

.profile-section .main-profile .table-div .td:last-child:after {
    display: none
}

.profile-section .main-profile .table-div .td:after {
    content: "\e964";
    font-family: icomoon;
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateX(-50%) translateY(-50%);
    font-size: 6px;
    color: #b2b2b2
}

.profile-section .main-profile .table-div .td.after-none:after {
    display: none
}

.profile-section .main-profile .table-div .td.before-none:before {
    display: none
}

.profile-section .main-profile .table-div .td .price, .profile-section .main-profile .table-div .td .label {
    width: fit-content;
    width: -moz-fit-content;
    margin: 0 auto;
    display: block;
    padding: 5px 15px;
    border-radius: 100px;
    background-color: #f1f9f1;
    color: #4ab04a
}

.profile-section .main-profile .table-div .td .price.red, .profile-section .main-profile .table-div .td .label.red {
    color: #fd3030;
    background-color: #ffefef
}

.profile-section .main-profile .table-div .td .price.yellow, .profile-section .main-profile .table-div .td .label.yellow {
    background-color: #fef5ea;
    color: #fda52f
}

.profile-section .main-profile .table-div .td .price.red, .profile-section .main-profile .table-div .td .label.red {
    background-color: #ffefef;
    color: #fd3030
}

.profile-section .main-profile .table-div .td .price.gray, .profile-section .main-profile .table-div .td .label.gray {
    background-color: #f0f0f0;
    color: #787878
}

.profile-section .main-profile .table-div .td .price.blue, .profile-section .main-profile .table-div .td .label.blue {
    background-color: #eceff4;
    color: #0b3476
}

.profile-section .main-profile .table-div .td.td-drop-down {
    display: none
}

.profile-section .main-profile .table-div .td .show-text {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #ebebeb;
    cursor: pointer;
    transition: all 0.3s
}

.profile-section .main-profile .table-div .td .show-text:hover {
    background-color: #666666
}

.profile-section .main-profile .table-div .td .show-text.show i {
    transform: rotate(180deg)
}

.profile-section .main-profile .table-div .td .show-text i {
    font-size: 15px;
    height: 15px;
    display: block;
    color: #ffffff;
    transform: rotate(0deg);
    transition: transform 0.3s
}

.profile-section .main-profile .table-div .td .text {
    font-size: 14px;
    font-weight: 500;
    color: #666666;
    display: block;
    text-align: justify;
    text-align-last: right;
    margin-bottom: 0;
    padding: 10px 0px
}

.profile-section .main-profile .table-div .tr {
    transition: all 0.3s;
    box-shadow: 0px 0px 80px 0px rgba(0, 0, 0, 0)
}

.profile-section .main-profile .table-div .tr.show {
    box-shadow: 0px 0px 30px 0px rgba(0, 0, 0, 0.08);
    border-color: #ffffff
}

.profile-section .main-profile .table-div .pr {
    padding-right: 15px
}

.profile-section .main-profile .table-div .tr-drop-down {
    background-color: #f0f0f0;
    padding: 15px;
    padding-top: 30px;
    padding-bottom: 5px;
    border-radius: 10px;
    margin-top: -15px;
    position: relative;
    z-index: 7;
    margin-bottom: 15px
}

.profile-section .main-profile .table-div .nav-action {
    display: flex;
    margin-bottom: 10px
}

.profile-section .main-profile .table-div .nav-action .nav-item {
    cursor: pointer;
    padding: 0;
    display: flex;
    align-items: center;
    font-size: 16px;
    font-weight: 500;
    color: #666666;
    margin-left: 30px
}

.profile-section .main-profile .table-div .nav-action .nav-item:last-child {
    margin-left: 0
}

.profile-section .main-profile .table-div .nav-action .nav-item.active .icon {
    background-color: #666666
}

.profile-section .main-profile .table-div .nav-action .nav-item.active .icon i {
    color: #ffffff
}

.profile-section .main-profile .table-div .nav-action .nav-item.active.blue-theme .icon {
    background-color: #0b3476
}

.profile-section .main-profile .table-div .nav-action .nav-item.active.red-theme .icon {
    background-color: #fd3030
}

.profile-section .main-profile .table-div .nav-action .nav-item.active.orange-theme .icon {
    background-color: #ff8400
}

.profile-section .main-profile .table-div .nav-action .nav-item .icon {
    width: 55px;
    height: 55px;
    border-radius: 50%;
    background-color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: 15px
}

.profile-section .main-profile .table-div .nav-action .nav-item .icon i {
    font-size: 20px;
    height: 20px;
    display: block;
    color: #666666
}

.profile-section .main-profile .table-div .filter-item {
    padding-top: 15px
}

.profile-section .main-profile .table-div .inf {
    display: flex;
    align-items: center;
    font-size: 14px;
    color: #666666;
    font-weight: 300;
    margin-bottom: 10px
}

.profile-section .main-profile .table-div .inf b {
    font-weight: 500;
    display: block;
    margin-left: 10px
}

.profile-section .main-profile .table-div .inf i {
    font-size: 10px;
    height: 10px;
    display: block;
    margin-left: 10px;
    color: #a8a8a8
}

.profile-section .main-profile .table-div .nav-steps {
    padding: 0;
    margin: 0;
    margin-bottom: 10px
}

.profile-section .main-profile .table-div .nav-steps .nav-item {
    width: 20%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    font-size: 14px;
    color: #666666;
    position: relative;
    z-index: 9
}

.profile-section .main-profile .table-div .nav-steps .nav-item:before {
    content: '';
    position: absolute;
    top: 8px;
    right: 0;
    width: 100%;
    height: 2px;
    background-color: #dddddd;
    z-index: -1
}

.profile-section .main-profile .table-div .nav-steps .nav-item:after {
    content: '';
    position: absolute;
    top: 12px;
    right: 0;
    width: 100%;
    height: 2px;
    background-color: #dddddd;
    z-index: -1
}

.profile-section .main-profile .table-div .nav-steps .nav-item.active .circle {
    border-color: #6381b0;
    background-color: #0b3476
}

.profile-section .main-profile .table-div .nav-steps .nav-item.now .circle {
    background-color: #6381b0;
    border-color: #0b3476
}

.profile-section .main-profile .table-div .nav-steps .nav-item .circle {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background-color: #9a9a9a;
    border: 7px solid #ffffff;
    display: block;
    margin-bottom: 15px
}

.profile-section .main-profile .table-div .nav-steps .nav-item .num {
    display: none
}

.profile-section .main-profile .table-div .title {
    font-size: 16px;
    font-weight: 700;
    color: #666666;
    display: block;
    margin-bottom: 5px
}

.profile-section .main-profile .table-div .date {
    font-size: 15px;
    font-weight: 300;
    color: #666666;
    display: block;
    margin-bottom: 10px
}

.profile-section .main-profile .table-div .text {
    font-size: 14px;
    font-weight: normal;
    margin-bottom: 10px
}

.profile-section .main-profile .table-div .btn-submit {
    margin-bottom: 10px
}

.profile-section .main-profile .address-list {
    margin-top: 20px
}

.profile-section .main-profile .address-list .item {
    width: 100%;
    height: auto;
    display: flex;
    align-items: center;
    background-color: #ffffff;
    box-shadow: 3px 5px 30px 0px rgba(0, 0, 0, 0.05);
    border-radius: 10px;
    padding: 10px 15px;
    padding-left: 25px;
    font-size: 14px;
    color: #666666
}

.profile-section .main-profile .address-list .item .circle {
    min-width: 25px;
    width: 25px;
    height: 25px;
    border-radius: 50%;
    display: block;
    border: 10px solid #e5e5e5;
    margin-left: 15px
}

.profile-section .main-profile .address-list .item .group {
    display: flex;
    align-items: center;
    margin-right: auto
}

.profile-section .main-profile .address-list .item .btn-edit {
    font-size: 16px;
    color: #666666;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px 20px;
    border-radius: 10px;
    background-color: #f7f7f7;
    margin-left: 15px;
    transition: all 0.3s
}

.profile-section .main-profile .address-list .item .btn-edit:hover {
    background-color: #0b3476;
    color: #ffffff
}

.profile-section .main-profile .address-list .item .btn-edit:hover i {
    color: #ffffff
}

.profile-section .main-profile .address-list .item .btn-edit i {
    font-size: 18px;
    height: 18px;
    display: block;
    color: #c6c6c6;
    margin-left: 10px;
    transition: all 0.3s
}

.profile-section .main-profile .address-list .item .btn-bin {
    padding: 0
}

.profile-section .main-profile .address-list .item .btn-bin i {
    font-size: 20px;
    height: 20px;
    display: block;
    color: #fd3030
}

.profile-section .main-profile .address-list input[type="radio"] {
    display: none
}

.profile-section .main-profile .address-list input[type="radio"]:checked label .circle {
    border-color: #0b3476
}

.profile-section .main-profile .label-file {
    width: 100%;
    height: 60px;
    border-radius: 10px;
    border: 3px solid #ebebeb;
    display: flex;
    align-items: center;
    padding-right: 15px;
    padding-left: 15px;
    font-size: 14px;
    color: #666666;
    margin-bottom: 20px
}

.profile-section .main-profile .label-file i {
    font-size: 18px;
    height: 18px;
    margin-right: 15px;
    color: #0b3476
}

.profile-section .main-profile .btn-submit.red-theme {
    background-image: none !important;
    background-color: #fd3030
}

.profile-section .main-profile .btn-submit.red-theme:hover {
    background-color: #cd2e2e
}

.profile-section .main-profile .btn-submit.orange-theme {
    background-image: -moz-linear-gradient(180deg, #fe9200, #fda631, #fe9200, #fda631);
    background-image: -webkit-linear-gradient(180deg, #fe9200, #fda631, #fe9200, #fda631);
    background-image: -ms-linear-gradient(180deg, #fe9200, #fda631, #fe9200, #fda631)
}

.profile-section .main-profile .comment-section {
    margin-bottom: 20px
}

.profile-section .main-profile .comment-section .item {
    display: block;
    box-shadow: 0px 0px 30px 0px rgba(0, 0, 0, 0.05);
    background-color: #ffffff;
    padding: 25px;
    border-radius: 10px;
    margin-bottom: 15px
}

.profile-section .main-profile .comment-section .item.reply-theme {
    box-shadow: none;
    background-color: #f5f5f5;
    margin-right: 100px
}

.profile-section .main-profile .comment-section .item .top-bar-c {
    display: flex;
    align-items: center;
    margin-bottom: 15px;
    flex-wrap: wrap
}

.profile-section .main-profile .comment-section .item .info {
    margin-bottom: 0 !important;
    width: auto !important;
    min-width: auto !important
}

.profile-section .main-profile .comment-section .item .date {
    margin-bottom: 0 !important
}

.profile-section .main-profile .comment-section .item .text {
    font-weight: 400 !important
}

.profile-section .main-profile .comment-section .item .rate .jq-ry-rated-group svg {
    fill: #fe9200 !important
}

.profile-section .main-profile .comment-section .item .rate .jq-ry-normal-group svg {
    fill: #dedede !important
}

.profile-section .main-profile input.shadow-theme, .profile-section .main-profile textarea.shadow-theme {
    border: none;
    box-shadow: 4px 3px 30px 0px rgba(0, 0, 0, 0.07)
}

.profile-section .main-profile .btn-search {
    position: absolute;
    top: 50%;
    left: 10px;
    padding: 5px;
    transform: translateY(-50%)
}

.profile-section .main-profile .btn-search:hover i {
    color: #0b3476
}

.profile-section .main-profile .btn-search i {
    font-size: 18px;
    height: 18px;
    display: block;
    color: #666666;
    transition: all 0.3s
}

.profile-section .main-profile .nav-filter {
    display: flex;
    justify-content: flex-end;
    width: 100%;
    padding: 0;
    margin-bottom: 20px
}

.profile-section .main-profile .nav-filter .nav-item {
    cursor: pointer;
    padding: 12.5px 20px;
    border-radius: 10px;
    display: block;
    background-color: #f1f3f7;
    font-size: 17px;
    font-weight: 500;
    color: #6680aa;
    margin-left: 10px;
    position: relative;
    transition: all 0.3s
}

.profile-section .main-profile .nav-filter .nav-item:last-child {
    margin-left: 0
}

.profile-section .main-profile .nav-filter .nav-item:after {
    content: '';
    position: absolute;
    bottom: 0;
    right: 50%;
    transform: translateX(50%) translateY(35%) rotate(45deg);
    background-color: #f1f3f7;
    width: 10px;
    height: 10px;
    border-radius: 2px;
    opacity: 0;
    transition: all 0.3s
}

.profile-section .main-profile .nav-filter .nav-item.active {
    background-color: #0b3476;
    color: #ffffff
}

.profile-section .main-profile .nav-filter .nav-item.active:after {
    opacity: 1;
    background-color: #0b3476
}

.profile-section .main-profile .item-box {
    display: flex;
    align-items: center;
    padding: 7.5px;
    border-radius: 200px;
    border: 5px solid #f0f0f0;
    font-size: 14px;
    font-weight: 300;
    color: #666666;
    transition: all 0.3s
}

.profile-section .main-profile .item-box.gold-theme:hover {
    color: #ff8400
}

.profile-section .main-profile .item-box.gold-theme .icon {
    background-image: -moz-linear-gradient(120deg, #fe9200 0%, #ffb249 100%);
    background-image: -webkit-linear-gradient(120deg, #fe9200 0%, #ffb249 100%);
    background-image: -ms-linear-gradient(120deg, #fe9200 0%, #ffb249 100%)
}

.profile-section .main-profile .item-box:hover {
    color: #0b3476
}

.profile-section .main-profile .item-box b {
    display: block;
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 5px
}

.profile-section .main-profile .item-box .icon {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: 25px;
    background-image: -moz-linear-gradient(120deg, #0a3476 0%, #3e639c 100%);
    background-image: -webkit-linear-gradient(120deg, #0a3476 0%, #3e639c 100%);
    background-image: -ms-linear-gradient(120deg, #0a3476 0%, #3e639c 100%)
}

.profile-section .main-profile .item-box .icon i {
    font-size: 40px;
    height: 40px;
    display: block;
    color: #ffffff
}

.profile-section .main-profile .no-data {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    font-size: 16px;
    color: #999999;
    font-weight: 300;
    text-align: center;
    padding-top: 50px
}

.profile-section .main-profile .no-data b {
    font-size: 22px;
    display: block;
    font-weight: 700;
    margin-bottom: 5px
}

.profile-section .main-profile .no-data .main-icon {
    font-size: 150px;
    height: 150px;
    display: block;
    color: #d9d9d9;
    margin-bottom: 30px
}

.profile-section .main-profile .no-data .btn {
    padding: 10px 25px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #f0f0f0;
    font-size: 16px;
    font-weight: 500;
    color: #909090;
    margin-top: 20px;
    transition: all 0.3s
}

.profile-section .main-profile .no-data .btn:hover {
    color: #FFFFFF;
    background-color: #666666
}

.profile-section .main-profile .no-data .btn i {
    margin-left: 10px
}

.profile-section .main-profile .nav-tab-public {
    margin-bottom: 25px
}

.profile-section .main-profile .nav-tab-public .nav-item {
    cursor: pointer;
    padding: 12.5px 25px;
    background-color: #fff6eb;
    border-radius: 10px;
    color: #fe9200;
    font-size: 16px;
    font-weight: 500;
    display: block;
    margin-left: 15px;
    position: relative;
    transition: all 0.3s
}

.profile-section .main-profile .nav-tab-public .nav-item:before {
    content: '';
    position: absolute;
    top: 100%;
    right: 50%;
    transform: translateX(50%) translateY(-60%) rotate(45deg);
    width: 10px;
    height: 10px;
    border-radius: 3px;
    background-color: #fff6eb;
    opacity: 0;
    transition: all 0.3s
}

.profile-section .main-profile .nav-tab-public .nav-item.active {
    background-color: #fe9200;
    color: #FFFFFF
}

.profile-section .main-profile .nav-tab-public .nav-item.active:before {
    background-color: #fe9200;
    opacity: 1
}

.menu-popup {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    transform: translateX(-100%);
    opacity: 0;
    z-index: 999;
    transition: opacity 0.5s
}

.menu-popup.show {
    opacity: 1;
    transform: translateX(0)
}

.menu-popup .after {
    position: absolute;
    top: 0;
    left: 0;
    width: calc(100% - 280px);
    height: 100%
}

.menu-popup .header-item {
    padding-bottom: 15px;
    margin-bottom: 15px;
    border-bottom: 2px dashed #e5e5e5
}

.menu-popup .brand {
    display: block
}

.menu-popup .brand img {
    max-width: 115px
}

.menu-popup .btn-close {
    padding: 0;
    border-radius: 4px;
    background-color: transparent;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s
}

.menu-popup .btn-close:hover i {
    color: #0b3476
}

.menu-popup .btn-close i {
    font-size: 24px;
    height: 24px;
    display: block;
    color: #666666;
    transition: all 0.3s
}

.menu-popup .main-menu {
    overflow-y: auto;
    height: 100%;
    width: 280px;
    background-color: #ffffff;
    padding: 30px 15px
}

.bread-crumb {
    padding: 20px 0px;
    background-color: white;
    box-shadow: 0px 0px 80px 0px rgba(0, 0, 0, 0.1)
}

.bread-crumb .title {
    font-size: 20px;
    font-weight: 700;
    display: block;
    color: #4c4c4c;
    padding: 10px 0px
}

.bread-crumb .nav {
    flex-wrap: nowrap;
    overflow-x: auto;
    max-width: 100%
}

.bread-crumb .nav .nav-item:first-child .nav-link {
    padding-right: 0
}

.bread-crumb .nav .nav-item:last-child .nav-link {
    padding-left: 0
}

.bread-crumb .nav .nav-item:last-child .nav-link:after {
    display: none
}

.bread-crumb .nav .nav-item .nav-link {
    font-size: 15px;
    white-space: nowrap;
    color: #989898;
    display: block;
    padding: 10px 22.5px;
    position: relative;
    transition: all 0.3s
}

.bread-crumb .nav .nav-item .nav-link:hover {
    color: #0b3476
}

.bread-crumb .nav .nav-item .nav-link:after {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateX(-50%) translateY(-50%);
    width: 15px;
    height: 7px;
    background-color: #e4e4e4;
    border-radius: 100px
}

.bread-crumb .nav .nav-item .nav-link i {
    font-size: 22px;
    height: 22px;
    display: block;
    color: #0b3476
}

.modal-remove .modal-dialog {
    max-width: 550px;
    padding-top: 25px
}

.modal-remove .modal-content {
    border-radius: 10px;
    padding: 75px 15px;
    padding-bottom: 65px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: relative
}

.modal-remove .btn-close {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: white;
    box-shadow: 5px 8.66px 60px 0px rgba(0, 0, 0, 0.15);
    position: absolute;
    top: 0;
    right: 50%;
    transform: translateX(50%) translateY(-50%);
    transition: all 0.3s
}

.modal-remove .btn-close:hover {
    background-color: #e5e5e5
}

.modal-remove .btn-close:hover span {
    color: #666666
}

.modal-remove .btn-close span {
    color: #b2b2b2;
    font-size: 36px;
    font-weight: 100
}

.modal-remove .title {
    font-size: 26px;
    font-weight: 700;
    color: #4c4c4c;
    display: block;
    margin-bottom: 20px;
    text-align: center
}

.modal-remove .nav {
    align-items: center
}

.modal-remove .nav .nav-item.red-theme {
    margin-left: 35px
}

.modal-remove .nav .nav-item.red-theme .nav-link {
    padding: 10px 30px;
    color: #FFFFFF !important;
    background-image: -moz-linear-gradient(180deg, #fd2f31, #fc6466, #fd2f31, #fc6466);
    background-image: -webkit-linear-gradient(180deg, #fd2f31, #fc6466, #fd2f31, #fc6466);
    background-image: -ms-linear-gradient(180deg, #fd2f31, #fc6466, #fd2f31, #fc6466);
    background-size: 300% 100%;
    moz-transition: all .4s ease-in-out;
    -o-transition: all .4s ease-in-out;
    -webkit-transition: all .4s ease-in-out;
    transition: all .4s ease-in-out
}

.modal-remove .nav .nav-item.red-theme .nav-link:hover {
    background-position: 100% 0;
    moz-transition: all .4s ease-in-out;
    -o-transition: all .4s ease-in-out;
    -webkit-transition: all .4s ease-in-out;
    transition: all .4s ease-in-out
}

.modal-remove .nav .nav-item .nav-link {
    padding: 0px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #999999;
    font-size: 16px;
    cursor: pointer;
    transition: all 0.3s
}

.modal-remove .nav .nav-item .nav-link:hover {
    color: #0b3476
}

.order-new-section {
    padding-top: 50px
}

.order-new-section .steps-bar {
    margin-bottom: 30px
}

.order-new-section .steps-bar .top-bar {
    display: flex;
    justify-content: center;
    margin-bottom: 20px
}

.order-new-section .steps-bar .top-bar .item {
    width: 20%;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative
}

.order-new-section .steps-bar .top-bar .item:last-child .lines {
    display: none
}

.order-new-section .steps-bar .top-bar .item.blue-theme i {
    color: #214989
}

.order-new-section .steps-bar .top-bar .item.blue-theme svg {
    fill: #214989 !important
}

.order-new-section .steps-bar .top-bar .item.blue-theme svg path {
    fill: #214989 !important
}

.order-new-section .steps-bar .top-bar .item .lines {
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateX(-50%) translateY(-50%);
    width: 100px;
    display: block
}

.order-new-section .steps-bar .top-bar .item .lines .line {
    width: 100%;
    height: 2px;
    background-color: #e5e5e5;
    display: block;
    margin-bottom: 5px
}

.order-new-section .steps-bar .top-bar .item .lines .line:last-child {
    margin-bottom: 0
}

.order-new-section .steps-bar .top-bar .item i {
    font-size: 50px;
    height: 50px;
    display: block;
    color: #a5a5a5
}

.order-new-section .steps-bar .top-bar .item svg {
    width: 50px;
    height: 50px;
    fill: #a5a5a5 !important
}

.order-new-section .steps-bar .top-bar .item svg path {
    fill: #a5a5a5 !important
}

.order-new-section .steps-bar .bottom-bar {
    width: 100%;
    border-radius: 10px;
    background-color: #f7f7f7;
    padding: 20px 0px;
    display: flex;
    justify-content: center
}

.order-new-section .steps-bar .bottom-bar .item {
    width: 20%;
    display: block;
    padding: 0px 15px;
    font-size: 14px;
    color: #afafaf;
    text-align: center
}

.order-new-section .steps-bar .bottom-bar .item.active b {
    color: #666666
}

.order-new-section .steps-bar .bottom-bar .item b {
    font-size: 16px;
    font-weight: 700;
    display: block;
    text-align: center
}

.order-new-section .main-bar .header-section {
    margin-bottom: 25px
}

.order-new-section .main-bar .header-section .title {
    font-size: 26px
}

.order-new-section .main-bar .miner-item {
    padding: 30px 0px;
    box-shadow: 4px 6.928px 60px 0px rgba(0, 0, 0, 0.08);
    background-color: #FFFFFF;
    border-radius: 10px;
    position: relative;
    margin-bottom: 10px
}

.order-new-section .main-bar .miner-item .num {
    width: 35px;
    height: 35px;
    border-radius: 50%;
    background-color: #ececec;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #4c4c4c;
    font-size: 16px;
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateX(50%) translateY(-50%)
}

.order-new-section .main-bar .miner-item .widget {
    padding-right: 30px;
    padding-left: 50px;
    font-size: 16px;
    color: #666666;
    font-weight: 300;
    display: block;
    position: relative
}

.order-new-section .main-bar .miner-item .widget:first-child {
    padding-right: 50px
}

.order-new-section .main-bar .miner-item .widget:first-child:before {
    display: none
}

.order-new-section .main-bar .miner-item .widget:last-child {
    padding-left: 30px;
    margin-right: auto
}

.order-new-section .main-bar .miner-item .widget:last-child:before {
    display: none
}

.order-new-section .main-bar .miner-item .widget:before {
    content: '';
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: 0;
    width: 3px;
    height: 45px;
    background-color: #e5e5e5
}

.order-new-section .main-bar .miner-item .widget b {
    margin-top: 5px;
    font-weight: 500;
    display: block
}

.order-new-section .main-bar .miner-item .edit {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12.5px;
    border-radius: 10px;
    background-color: #f5f5f5;
    font-size: 15px;
    font-weight: 500;
    color: #666666;
    margin-left: 20px;
    transition: all 0.3s
}

.order-new-section .main-bar .miner-item .edit:hover {
    background-color: #666666;
    color: #FFFFFF
}

.order-new-section .main-bar .miner-item .edit:hover i {
    color: #FFFFFF
}

.order-new-section .main-bar .miner-item .edit i {
    font-size: 18px;
    height: 18px;
    display: block;
    margin-left: 10px;
    color: #c4c4c4
}

.order-new-section .main-bar .miner-item .btn-bin {
    padding: 0
}

.order-new-section .main-bar .miner-item .btn-bin:hover i {
    color: #e80000
}

.order-new-section .main-bar .miner-item .btn-bin i {
    font-size: 20px;
    height: 20px;
    color: #fd2f2f;
    display: block;
    transition: all 0.3s
}

.order-new-section .main-bar .login-section {
    max-width: 500px;
    width: 100%;
    margin: 0 auto
}

.order-new-section .main-bar .login-section .digit-group {
    margin-left: 0
}

.order-new-section .main-bar .login-section .time {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border-radius: 10px;
    height: 75px;
    padding: 0px 20px
}

.order-new-section .main-bar .text {
    width: 100%;
    font-size: 16px;
    color: #666666;
    text-align: center;
    text-align-last: center;
    margin-bottom: 20px;
    display: block
}

.order-new-section .main-bar .text a {
    color: #0b3476;
    transition: all 0.3s
}

.order-new-section .main-bar .text a:hover {
    color: #ff8400
}

.order-new-section .main-bar .code {
    font-size: 28px;
    color: #666666;
    font-weight: 500;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 15px 15px;
    border: 3px solid #e5e5e5;
    border-radius: 10px;
    max-width: 500px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 20px
}

.order-new-section .main-bar .more {
    width: 100%;
    height: 75px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    font-weight: 500;
    color: #FFFFFF;
    background-color: #0b3476;
    max-width: 500px;
    margin-left: auto;
    margin-right: auto;
    background-image: -moz-linear-gradient(180deg, #0b3577, #3e629c, #0b3577, #3e629c);
    background-image: -webkit-linear-gradient(180deg, #0b3577, #3e629c, #0b3577, #3e629c);
    background-image: -ms-linear-gradient(180deg, #0b3577, #3e629c, #0b3577, #3e629c);
    background-size: 300% 100%;
    moz-transition: all .4s ease-in-out;
    -o-transition: all .4s ease-in-out;
    -webkit-transition: all .4s ease-in-out;
    transition: all .4s ease-in-out
}

.order-new-section .main-bar .more:hover {
    background-position: 100% 0;
    moz-transition: all .4s ease-in-out;
    -o-transition: all .4s ease-in-out;
    -webkit-transition: all .4s ease-in-out;
    transition: all .4s ease-in-out
}

.order-new-section .main-bar .more i {
    font-size: 18px;
    height: 18px;
    display: block;
    margin-right: 15px
}

.order-new-section .main-bar .nav-tab {
    margin-bottom: 25px;
    justify-content: center;
    width: 100%
}

.order-new-section .main-bar .nav-tab .nav-item {
    cursor: pointer;
    padding: 12.5px 25px;
    background-color: #fff6eb;
    border-radius: 10px;
    color: #fe9200;
    font-size: 16px;
    font-weight: 500;
    display: block;
    margin-left: 15px;
    position: relative;
    transition: all 0.3s
}

.order-new-section .main-bar .nav-tab .nav-item:before {
    content: '';
    position: absolute;
    top: 100%;
    right: 50%;
    transform: translateX(50%) translateY(-60%) rotate(45deg);
    width: 10px;
    height: 10px;
    border-radius: 3px;
    background-color: #fff6eb;
    opacity: 0;
    transition: all 0.3s
}

.order-new-section .main-bar .nav-tab .nav-item.active {
    background-color: #fe9200;
    color: #FFFFFF
}

.order-new-section .main-bar .nav-tab .nav-item.active:before {
    background-color: #fe9200;
    opacity: 1
}

.form-elements .form-group {
    position: relative
}

.form-elements .scan-btn {
    cursor: pointer;
    height: 40px;
    font-size: 14px;
    color: #666666;
    background-color: #ededed;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0px 10px;
    border-radius: 5px;
    position: absolute;
    left: 10px;
    bottom: 10px;
    transition: all 0.3s
}

.form-elements .scan-btn:hover {
    background-color: #666666;
    color: #FFFFFF
}

.form-elements.order-new-theme {
    margin-bottom: 30px
}

.form-elements.order-new-theme .form-group {
    margin-bottom: 20px
}

.form-elements.order-new-theme input, .form-elements.order-new-theme textarea {
    border: 3px solid #ededed;
    color: #666666
}

.form-elements.order-new-theme input::placeholder, .form-elements.order-new-theme textarea::placeholder {
    opacity: 0.8;
    color: #666666
}

.form-elements.order-new-theme .btn-submit {
    width: 100%;
    padding: 5px 15px
}

.form-elements.order-new-theme .btn-submit.has-mb {
    margin-bottom: 20px
}

.form-elements.order-new-theme .btn-submit i {
    font-size: 80%;
    margin-left: 12.5px
}

.form-elements.order-new-theme .btn-submit i.ml-0 {
    margin-right: 12.5px
}

.form-elements.order-new-theme .btn-submit svg {
    width: 22px;
    height: 22px;
    fill: #FFFFFF;
    margin-left: 12.5px
}

.form-elements.order-new-theme .btn-submit svg path {
    fill: #FFFFFF
}

.form-elements.order-new-theme .select2 .selection .select2-selection {
    border: 3px solid #ededed !important
}

.form-elements.order-new-theme .select2 .selection .select2-selection:after {
    color: #666666
}

.form-elements.order-new-theme .select2 .selection .select2-selection .select2-selection__rendered {
    color: #666666;
    opacity: 0.8
}

.form-elements.order-new-theme textarea {
    height: 175px
}

.form-elements.order-new-theme .absolute-icon {
    color: #0b3476
}

@media screen and (max-width: 1200px) {
    .order-new-section .main-bar .miner-item {
        padding: 15px 15px
    }

    .order-new-section .main-bar .miner-item .num {
        width: 30px;
        height: 30px;
        font-size: 14px;
        position: relative;
        top: 0;
        right: 0;
        transform: translateX(0%) translateY(0%);
        border-radius: 5px;
        margin-bottom: 10px
    }

    .order-new-section .main-bar .miner-item .widget {
        padding: 10px !important;
        border-radius: 5px;
        font-size: 14px;
        background-color: #FFFFFF;
        border: 2px solid #e5e5e5;
        margin-left: 10px
    }

    .order-new-section .main-bar .miner-item .widget:last-child {
        margin-left: 0;
        border: none;
        padding: 0px !important;
        background-color: #FFFFFF
    }

    .order-new-section .main-bar .miner-item .widget:before {
        display: none
    }

    .order-new-section .main-bar .miner-item .edit {
        padding: 10px;
        border-radius: 5px;
        font-size: 14px;
        background-color: #666666;
        color: #FFFFFF
    }

    .order-new-section .main-bar .miner-item .edit i {
        color: #FFFFFF;
        font-size: 16px;
        height: 16px
    }

    .order-new-section .main-bar .miner-item .btn-bin i {
        font-size: 18px;
        height: 18px
    }
}

@media screen and (max-width: 992px) {
    .order-new-section .steps-bar {
        display: flex;
        align-items: center;
        margin-bottom: 20px
    }

    .order-new-section .steps-bar .top-bar {
        margin-left: 15px
    }

    .order-new-section .steps-bar .top-bar .item {
        width: auto;
        display: none !important
    }

    .order-new-section .steps-bar .top-bar .item.active-device {
        display: flex !important
    }

    .order-new-section .steps-bar .top-bar .item .lines {
        display: none
    }

    .order-new-section .steps-bar .top-bar .item i {
        font-size: 45px;
        height: 45px
    }

    .order-new-section .steps-bar .top-bar .item svg {
        width: 45px;
        height: 45px
    }

    .order-new-section .steps-bar .bottom-bar {
        padding: 15px 0px;
        width: fit-content;
        border-radius: 5px
    }

    .order-new-section .steps-bar .bottom-bar .item {
        width: auto;
        display: none !important;
        text-align: right
    }

    .order-new-section .steps-bar .bottom-bar .item.active-device {
        display: block !important
    }

    .order-new-section .steps-bar .bottom-bar .item b {
        font-size: 14px
    }

    .order-new-section .main-bar .header-section {
        margin-bottom: 15px
    }

    .order-new-section .main-bar .header-section .title {
        font-size: 20px;
        text-align: right
    }

    .order-new-section .main-bar .login-section {
        max-width: 500px;
        margin-right: 0
    }

    .order-new-section .main-bar .login-section .time {
        height: 60px;
        border-radius: 5px;
        padding: 0px 15px
    }

    .order-new-section .main-bar .login-section .time #timer {
        font-size: 17px
    }

    .order-new-section .main-bar .text {
        font-size: 14px;
        text-align: right;
        text-align-last: right;
        margin-bottom: 10px
    }

    .order-new-section .main-bar .code {
        font-size: 20px;
        margin-right: 0;
        padding: 10px 20px;
        max-width: 300px;
        margin-bottom: 10px
    }

    .order-new-section .main-bar .more {
        height: 55px;
        font-size: 17px;
        margin-right: 0;
        max-width: 300px
    }

    .order-new-section .main-bar .more i {
        font-size: 13px;
        height: 13px
    }

    .order-new-section .main-bar .nav-tab {
        justify-content: flex-start
    }

    .order-new-section .main-bar .nav-tab .nav-item {
        padding: 10px 15px;
        border-radius: 5px;
        font-size: 14px
    }

    .order-new-section .main-bar .nav-tab .nav-item:before {
        width: 8px;
        height: 8px
    }

    .form-elements .scan-btn {
        height: 35px;
        font-size: 12px;
        padding: 0px 10px;
        left: 7.5px;
        bottom: 7.5px
    }
}

@media screen and (max-width: 768px) {
    .order-new-section .main-bar .miner-item {
        padding-bottom: 5px
    }

    .order-new-section .main-bar .miner-item .w-100 {
        justify-content: space-between
    }

    .order-new-section .main-bar .miner-item .widget {
        margin-bottom: 10px;
        min-width: calc(50% - 5px);
        margin-left: 0
    }
}

@media screen and (max-width: 485px) {
    .order-new-section .main-bar .miner-item .widget {
        min-width: 100%
    }
}

.payment-status .container {
    padding-top: 50px !important;
    padding-bottom: 50px !important
}

.payment-status img {
    width: 100%;
    object-fit: contain;
    object-position: center;
    max-height: 300px
}

.payment-status .subtitle {
    font-size: 16px;
    color: #7f7f7f;
    display: block;
    margin-bottom: 5px
}

.payment-status .title {
    font-size: 36px;
    line-height: 1.2;
    font-weight: 700;
    color: #4c4c4c;
    display: block;
    margin-bottom: 30px
}

.payment-status .nav .nav-item {
    margin-left: 15px
}

.payment-status .nav .nav-item.red-theme .nav-link {
    background-color: #fd3030;
    color: #FFFFFF;
    transition: all 0.3s
}

.payment-status .nav .nav-item.red-theme .nav-link:hover {
    background-color: #e22c2c
}

.payment-status .nav .nav-item.green-theme .nav-link {
    transition: all 0.3s;
    color: #FFFFFF;
    background-color: #47b047
}

.payment-status .nav .nav-item.green-theme .nav-link:hover {
    background-color: #398d39
}

.payment-status .nav .nav-item .nav-link {
    padding: 15px 30px;
    border-radius: 10px;
    background-color: #f2f2f2;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    color: #666666;
    min-width: 200px
}

.payment-status .nav .nav-item .nav-link i {
    margin-right: 12.5px
}

.tooltip {
    z-index: 98 !important
}

.tooltip-inner {
    font-family: iransans !important
}

.alert-public {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    font-size: 14px;
    color: #666666;
    padding: 10px 15px;
    background-color: white;
    box-shadow: 0px 0px 80px 0px rgba(0, 0, 0, 0.08);
    border-radius: 10px;
    margin-bottom: 10px
}

.alert-public.alert-green i {
    color: #47af47
}

.alert-public.alert-green svg {
    fill: #47af47
}

.alert-public.alert-green .link {
    background-color: #47af47
}

.alert-public.alert-yellow i {
    color: #fd9100
}

.alert-public.alert-yellow svg {
    fill: #fd9100
}

.alert-public.alert-yellow .link {
    background-color: #fd9100
}

.alert-public.alert-blue i {
    color: #0a3476
}

.alert-public.alert-blue svg {
    fill: #0a3476
}

.alert-public.alert-blue .link {
    background-color: #0a3476
}

.alert-public.alert-red i {
    color: #fc2f31
}

.alert-public.alert-red svg {
    fill: #fc2f31
}

.alert-public.alert-red .link {
    background-color: #fc2f31
}

.alert-public i {
    font-size: 22px;
    height: 22px;
    display: block;
    margin-left: 15px;
    margin-top: 5px;
    margin-bottom: 5px
}

.alert-public svg {
    width: 22px;
    height: 22px;
    display: block;
    margin-left: 15px;
    fill: #FFFFFF;
    margin-top: 5px;
    margin-bottom: 5px
}

.alert-public .link {
    padding: 10px 25px;
    border-radius: 10px;
    font-size: 14px;
    color: #FFFFFF;
    font-weight: 500;
    display: block;
    width: fit-content;
    width: -moz-fit-content;
    text-align: center;
    min-width: 175px;
    margin-right: auto;
    margin-top: 5px;
    margin-bottom: 5px
}

.nav-pagination {
    width: 100%;
    display: flex;
    justify-content: center
}

.nav-pagination.circle-theme .nav-link {
    border-radius: 100px !important
}

.nav-pagination .nav-item {
    margin-left: 10px
}

.nav-pagination .nav-item:last-child {
    margin-left: 0
}

.nav-pagination .nav-item.navigation-item .nav-link {
    width: auto;
    padding: 0px 15px;
    border-color: #f4f4f4;
    background-color: #f4f4f4;
    color: #929292
}

.nav-pagination .nav-item.navigation-item .nav-link:hover {
    background-color: #0b3476;
    border-color: #0b3476;
    color: #ffffff
}

.nav-pagination .nav-item .nav-link {
    width: 40px;
    height: 40px;
    border-radius: 5px;
    border: 2px solid #f0f0f0;
    background-color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    color: #a0a0a0;
    padding: 0;
    transition: all 0.3s
}

.nav-pagination .nav-item .nav-link:hover {
    background-color: #f0f0f0
}

.header-section {
    margin-bottom: 35px
}

.header-section.right-theme .subtitle, .header-section.right-theme .title {
    text-align: right
}

.header-section.order-theme .subtitle, .header-section.order-theme .title {
    color: #7d8593
}

.header-section.bg-theme {
    margin-bottom: 50px
}

.header-section.bg-theme .title {
    width: fit-content;
    width: -moz-fit-content;
    padding: 20px 20px;
    border-radius: 10px;
    background-color: #f7f7f7;
    font-size: 30px;
    margin: 0 auto
}

.header-section.bg-theme .title .small {
    color: #7b7b7b;
    font-size: 18px;
    margin-top: 10px
}

.header-section .subtitle {
    font-size: 16px;
    color: #7f7f7f;
    display: block;
    margin-bottom: 5px;
    text-align: center
}

.header-section .title {
    font-size: 36px;
    line-height: 1.2;
    font-weight: 700;
    color: #4c4c4c;
    display: block;
    text-align: center
}

.select2-dropdown {
    border: 2px solid #f0f0f0 !important;
    border-radius: 4px !important;
    margin-top: 5px;
    overflow: hidden;
    padding: 7.5px 0px
}

.select2-dropdown .select2-search {
    display: none
}

.select2-dropdown .select2-results__option {
    font-size: 13px;
    font-weight: 700;
    color: #666666;
    padding: 7.5px 15px;
    transition: all 0.3s
}

.select2-dropdown .select2-results__option:hover {
    background-color: #0b3476 !important;
    color: #ffffff !important
}

.select2-dropdown .select2-results__option--highlighted[aria-selected] {
    background-color: #ffffff;
    color: #666666
}

.kalameh {
    font-family: kalameh !important
}

.tahoma {
    font-family: Tahoma !important
}

.OCRAStd {
    font-family: OCRAStd !important
}

.iransans {
    font-family: iransans !important
}

.prl-10px {
    padding-right: 10px !important;
    padding-left: 10px !important
}

.prl-5px {
    padding-right: 5px !important;
    padding-left: 5px !important
}

@media screen and (max-width: 1200px) {
    .header .top-bar .shape {
        left: 325px
    }

    .why-us .shape {
        right: 400px;
        max-height: 585px
    }

    .our-services .shape {
        left: 450px;
        max-height: 700px
    }

    .what-devices .shape {
        right: 425px;
        max-height: 620px
    }

    .testimonial {
        padding: 150px 0px
    }

    .testimonial .slider-container {
        padding-right: 80px
    }

    .testimonial .main-container {
        padding: 20px
    }

    .testimonial .button-nav {
        width: 45px;
        height: 45px;
        border: 3px solid rgba(0, 0, 0, 0.06);
        right: 50px
    }

    .testimonial .shape {
        position: absolute;
        top: 50%;
        left: 525px;
        z-index: -1;
        transform: translateX(-100%) translateY(-50%);
        max-height: 650px
    }

    .articles .shape {
        left: 450px;
        max-height: 750px
    }

    .articles .img {
        padding: 7.5px;
        height: 530px
    }

    .articles .img.small-theme {
        height: 250px
    }

    .footer .number {
        margin-bottom: 30px
    }

    .form-contact .form-elements {
        margin-bottom: 35px !important
    }

    .status-section .circle {
        width: 400px;
        height: 400px
    }

    .status-section .circle .line {
        width: 350px;
        height: 350px
    }

    .status-section .circle .line.mid {
        width: 300px;
        height: 300px
    }

    .status-section .circle .line.small {
        width: 250px;
        height: 250px
    }

    .status-section .circle .item {
        width: 120px;
        height: 120px;
        font-size: 14px
    }

    .status-section .circle .item .number {
        font-size: 24px
    }

    .status-section .circle .brand {
        width: 60px;
        height: 60px
    }

    .status-section .circle .brand img {
        max-height: 30px
    }

    .order-section .steps-bar .top-bar .item .lines {
        width: 100px
    }

    .order-section .steps-bar .top-bar .item i {
        font-size: 45px;
        height: 45px
    }

    .order-section .steps-bar .bottom-bar {
        padding: 20px 0px
    }

    .order-section .steps-bar .bottom-bar .item {
        font-size: 12px
    }

    .order-section .steps-bar .bottom-bar .item b {
        font-size: 16px
    }

    .order-section .main-bar .nav-select .nav-item {
        margin-left: 10px
    }

    .order-section .main-bar .nav-select .nav-item label {
        font-size: 17px;
        padding: 10px 15px;
        border-radius: 10px
    }

    .order-section .main-bar .text {
        font-size: 14px
    }

    .order-section .main-bar .btn-add {
        width: 50px;
        height: 50px
    }

    .order-section .main-bar .btn-add i {
        font-size: 17px;
        height: 17px
    }

    .order-section .main-bar .item-product {
        padding: 15px 15px
    }

    .order-section .main-bar .item-product img {
        width: 110px;
        height: 120px;
        margin-left: 15px
    }

    .order-section .main-bar .item-product .title {
        font-size: 18px
    }

    .order-section .main-bar .item-product .subtitle {
        font-size: 15px
    }

    .order-section .main-bar .item-product .count .select2 {
        height: 45px !important;
        width: 110px !important
    }

    .order-section .main-bar .item-product .count .select2 .selection .select2-selection:after {
        left: 15px;
        font-size: 8px
    }

    .order-section .main-bar .item-product .count .select2 .selection .select2-selection .select2-selection__rendered {
        padding-right: 20px;
        font-size: 15px
    }

    .order-section .main-bar .item-product .btn-delete {
        width: 45px;
        height: 45px
    }

    .order-section .main-bar .item-product .btn-delete i {
        font-size: 16px;
        height: 16px
    }

    .order-section .main-bar .btn-add-p {
        font-size: 14px
    }

    .order-section .main-bar .btn-add-p .icon {
        width: 45px;
        height: 45px;
        margin-left: 15px
    }

    .order-section .main-bar .btn-add-p .icon i {
        font-size: 16px;
        height: 16px
    }

    .order-section .main-bar .btn-add-p b {
        font-size: 17px
    }

    .order-section .main-bar .code {
        font-size: 24px;
        margin-bottom: 15px
    }

    .order-section .main-bar .more {
        height: 60px;
        font-size: 18px
    }

    .order-section .main-bar .more i {
        font-size: 15px;
        height: 15px
    }

    .blog-single .box-info .nav .nav-item {
        flex-direction: column;
        justify-content: flex-start;
        align-items: flex-start
    }

    .blog-single .box-info .nav .nav-item .icon {
        width: 50px;
        height: 50px;
        border-radius: 5px;
        border: 3px solid #f0f0f0;
        margin-left: 0px;
        margin-bottom: 10px
    }

    .blog-single .box-info .nav .nav-item .icon i {
        font-size: 20px;
        height: 20px
    }

    .header.header-profile {
        padding-bottom: 0px
    }

    .profile-section {
        margin-top: 50px;
        margin-bottom: 50px
    }

    .profile-section .top-bar {
        padding: 15px;
        border-radius: 5px;
        flex-wrap: wrap;
        margin-bottom: 15px
    }

    .profile-section .top-bar .user {
        font-size: 14px
    }

    .profile-section .top-bar .user b {
        font-size: 16px
    }

    .profile-section .top-bar .user img {
        width: 55px;
        height: 55px;
        display: block;
        border-radius: 50%;
        border: 4px solid #3b5d91;
        margin-left: 15px
    }

    .profile-section .top-bar .nav .nav-item {
        margin-left: 10px
    }

    .profile-section .top-bar .nav .nav-item .nav-link {
        font-size: 14px;
        padding: 10px 15px;
        border-radius: 5px
    }

    .profile-section .top-bar .nav .nav-item .nav-link i {
        font-size: 12px;
        height: 12px;
        margin-right: 10px
    }
}

@media screen and (max-width: 992px) {
    .header .top-bar {
        padding: 20px 0px
    }

    .header .top-bar .brand {
        margin-left: auto
    }

    .header .top-bar .brand img {
        max-width: 140px;
        max-height: 55px
    }

    .header .top-bar .nav {
        display: none
    }

    .header .top-bar .call {
        display: none
    }

    .header .top-bar .shape {
        display: none
    }

    .header .main-bar {
        padding-top: 50px;
        padding-bottom: 50px;
        background-image: url("../img/bg-main-bar.png");
        position: relative
    }

    .header .main-bar:before {
        content: '';
        position: absolute;
        top: 0;
        right: 0;
        width: 100%;
        height: 100%;
        background-color: #0b3476;
        opacity: 0.9
    }

    .header .main-bar .subtitle {
        color: #ffffff;
        font-size: 14px;
        opacity: 0.6
    }

    .header .main-bar .title {
        color: #ffffff;
        font-size: 25px
    }

    .header .main-bar .text {
        color: #ffffff;
        font-size: 13px;
        margin-bottom: 15px
    }

    .header .main-bar .text b {
        color: #ffffff;
        font-size: 15px
    }

    .header .main-bar .nav {
        width: fit-content;
        width: -moz-fit-content;
        padding: 5px 5px;
        border-radius: 5px;
        background-color: #ffffff
    }

    .header .main-bar .nav .nav-item {
        margin-left: 5px
    }

    .header .main-bar .nav .nav-item:last-child {
        margin-left: 0
    }

    .header .main-bar .nav .nav-item .nav-link {
        padding: 10px 15px;
        border-radius: 5px;
        font-size: 14px;
        border: none;
        color: #4c4c4c;
        background-color: #e0e0e0
    }

    .header .main-bar .nav .nav-item .nav-link i {
        font-size: 12px;
        height: 12px;
        padding-right: 0 !important
    }

    .header.order-theme {
        border-bottom: 2px solid rgba(255, 255, 255, 0.2)
    }

    .header.order-theme .main-bar {
        background-image: none !important
    }

    .header.order-theme .main-bar:before {
        display: none
    }

    .header.order-theme .main-bar .nav .nav-item .nav-link.gra-theme {
        color: #ffffff
    }

    .why-us {
        padding: 0px 0px;
        padding-bottom: 50px;
        margin: 50px 0px;
        border-bottom: 3px solid #e5e5e5
    }

    .why-us .img {
        display: none;
        max-height: 350px;
        object-position: right
    }

    .why-us .subtitle {
        font-size: 14px
    }

    .why-us .title {
        font-size: 25px
    }

    .why-us .text {
        font-size: 14px;
        margin-bottom: 15px
    }

    .why-us .nav {
        margin-bottom: 15px
    }

    .why-us .nav .nav-item {
        font-size: 15px
    }

    .why-us .nav .nav-item i {
        font-size: 17px;
        height: 17px;
        margin-left: 10px
    }

    .why-us .more {
        padding: 10px 20px;
        border-radius: 5px;
        font-size: 14px
    }

    .why-us .shape {
        display: none
    }

    .our-services {
        padding: 0px 0px;
        margin-bottom: 50px
    }

    .our-services .subtitle {
        font-size: 14px
    }

    .our-services .title {
        font-size: 25px
    }

    .our-services .text {
        font-size: 14px;
        margin-bottom: 15px
    }

    .our-services .more {
        padding: 10px 20px;
        border-radius: 5px;
        font-size: 14px;
        margin-bottom: 25px
    }

    .our-services .more i {
        font-size: 14px;
        height: 14px
    }

    .our-services .item {
        padding: 15px 15px;
        border-radius: 5px;
        font-size: 14px
    }

    .our-services .item.has-m-t {
        top: 0px
    }

    .our-services .item b {
        font-size: 16px
    }

    .our-services .item img {
        max-height: 60px
    }

    .our-services .shape {
        display: none
    }

    .what-devices {
        padding: 50px 0px;
        margin-bottom: 50px;
        background-image: -moz-linear-gradient(180deg, #0b3577, #3e629c);
        background-image: -webkit-linear-gradient(180deg, #0b3577, #3e629c);
        background-image: -ms-linear-gradient(180deg, #0b3577, #3e629c)
    }

    .what-devices .img {
        width: 200px;
        max-height: 250px;
        padding: 15px;
        border-radius: 5px;
        background-color: white;
        object-position: right;
        margin-bottom: 20px
    }

    .what-devices .subtitle {
        color: #ffffff;
        font-size: 14px;
        opacity: 0.6
    }

    .what-devices .title {
        font-size: 25px;
        color: #ffffff
    }

    .what-devices .text {
        color: #ffffff;
        font-size: 14px;
        margin-bottom: 15px
    }

    .what-devices .nav-info {
        margin-bottom: 15px
    }

    .what-devices .nav-info .nav-item {
        font-size: 13px;
        color: #ffffff
    }

    .what-devices .nav-info .nav-item i {
        font-size: 15px;
        color: #ffffff;
        height: 15px;
        margin-left: 7.5px
    }

    .what-devices .nav-menu {
        width: fit-content;
        width: -moz-fit-content;
        padding: 5px;
        background-color: #ffffff;
        border-radius: 5px
    }

    .what-devices .nav-menu .nav-item {
        margin-left: 5px
    }

    .what-devices .nav-menu .nav-item .nav-link {
        padding: 10px 15px;
        border-radius: 5px;
        font-size: 14px;
        border: none;
        background-color: #e0e0e0;
        color: #4c4c4c
    }

    .what-devices .nav-menu .nav-item .nav-link.reverse-theme i {
        margin-right: 0 !important
    }

    .what-devices .nav-menu .nav-item .nav-link i {
        font-size: 14px;
        height: 14px;
        padding: 0 !important
    }

    .what-devices .shape {
        display: none
    }

    .testimonial {
        padding: 0px 0px;
        padding-bottom: 50px;
        margin-bottom: 50px;
        border-bottom: 3px solid #e5e5e5
    }

    .testimonial .subtitle {
        font-size: 14px
    }

    .testimonial .title {
        font-size: 25px;
        margin-bottom: 20px
    }

    .testimonial .slider-container {
        position: relative;
        padding-right: 0px
    }

    .testimonial .main-container {
        padding: 0px
    }

    .testimonial .item {
        box-shadow: none !important;
        border: 2px solid #e5e5e5;
        border-radius: 5px;
        padding: 15px;
        padding-top: 75px
    }

    .testimonial .item .icon-quotation {
        right: 15px;
        font-size: 75px
    }

    .testimonial .item .text {
        font-size: 14px;
        margin-bottom: 15px
    }

    .testimonial .item .user {
        font-size: 14px
    }

    .testimonial .item .user b {
        font-size: 15px
    }

    .testimonial .button-nav {
        width: 30px;
        height: 30px;
        border-radius: 5px;
        border: 2px solid #e5e5e5;
        left: 50px;
        right: unset;
        top: 15px;
        transform: translateY(0%) translateX(0%);
        z-index: 9
    }

    .testimonial .button-nav.prev {
        left: 15px
    }

    .testimonial .button-nav i {
        font-size: 12px;
        height: 12px
    }

    .testimonial .shape {
        display: none
    }

    .order-steps {
        padding-bottom: 50px;
        margin-bottom: 50px;
        border-bottom: 3px solid #e5e5e5
    }

    .order-steps .subtitle {
        font-size: 14px
    }

    .order-steps .title {
        font-size: 25px;
        margin-bottom: 20px
    }

    .order-steps .items {
        margin-bottom: 20px
    }

    .order-steps .text {
        font-size: 16px
    }

    .order-steps .number {
        font-size: 26px
    }

    .articles {
        padding: 0;
        padding-bottom: 50px;
        margin-bottom: 50px;
        border-bottom: 3px solid #e5e5e5
    }

    .articles .shape {
        display: none
    }

    .articles .subtitle {
        font-size: 14px
    }

    .articles .title {
        font-size: 26px
    }

    .articles .title.small-theme {
        font-size: 20px
    }

    .articles .text {
        font-size: 14px;
        margin-bottom: 15px
    }

    .articles .nav-info {
        margin-bottom: 15px
    }

    .articles .nav-info .nav-item {
        font-size: 14px;
        margin-left: 20px
    }

    .articles .nav-info .nav-item .icon {
        width: 45px;
        height: 45px;
        border-radius: 5px;
        border: 3px solid #f0f0f0
    }

    .articles .nav-info .nav-item .icon i {
        font-size: 18px;
        height: 18px
    }

    .articles .more {
        padding: 10px 15px;
        border-radius: 5px;
        font-size: 14px
    }

    .articles .more i {
        font-size: 14px;
        height: 14px
    }

    .articles .img {
        padding: 10px;
        height: 200px;
        border-radius: 5px;
        margin-bottom: 15px;
        box-shadow: 0px 5px 10px 0px rgba(0, 0, 0, 0.1)
    }

    .articles .img img {
        border-radius: 5px;
        margin-bottom: 15px
    }

    .articles .img {
        display: none
    }

    .brands {
        overflow: hidden;
        margin-bottom: 50px
    }

    .brands .subtitle {
        font-size: 14px
    }

    .brands .title {
        font-size: 25px;
        margin-bottom: 25px
    }

    .brands .swiper-container {
        overflow: visible
    }

    .brands .item {
        height: 80px;
        border-radius: 5px;
        padding: 20px 20px;
        max-width: 140px
    }

    .brands .pagination {
        display: none
    }

    .footer {
        background-color: #fbfbfb;
        border-top: 3px solid #e5e5e5
    }

    .footer .container {
        padding-top: 30px !important;
        padding-bottom: 30px !important
    }

    .footer .shape {
        display: none
    }

    .footer .brand {
        margin-bottom: 15px
    }

    .footer .brand img {
        max-width: 145px;
        max-height: 55px
    }

    .footer .line {
        width: 100px;
        height: 3px;
        margin-bottom: 15px
    }

    .footer .text {
        font-size: 14px;
        margin-bottom: 15px
    }

    .footer .text.email-theme {
        margin-bottom: 7.5px
    }

    .footer .number {
        font-size: 22px
    }

    .footer .title {
        font-size: 15px;
        margin-bottom: 15px
    }

    .footer .nav-menu {
        margin-bottom: 30px
    }

    .footer .nav-menu .nav-item {
        margin-bottom: 15px
    }

    .footer .nav-menu .nav-item .nav-link {
        font-size: 14px
    }

    .footer .nav-social .nav-item {
        margin-left: 10px
    }

    .footer .nav-social .nav-item .nav-link {
        width: 45px;
        height: 45px;
        border-radius: 5px;
        border: 3px solid #fff2e5
    }

    .footer .nav-social .nav-item .nav-link i {
        font-size: 15px;
        height: 15px
    }

    .error-section img {
        max-height: 125px;
        margin-bottom: 25px
    }

    .error-section .subtitle {
        font-size: 13px
    }

    .error-section .title {
        font-size: 24px;
        margin-bottom: 25px
    }

    .error-section .nav .nav-item {
        margin-left: 10px
    }

    .error-section .nav .nav-item .nav-link {
        font-size: 14px;
        padding: 10px 20px;
        border-radius: 5px
    }

    .error-section .nav .nav-item .nav-link:before {
        border-radius: 5px
    }

    .error-section .text-box {
        padding: 15px 15px;
        border-radius: 5px;
        font-size: 14px
    }

    .login-section .shape {
        max-height: 300px
    }

    .login-section .container {
        padding-top: 30px;
        padding-bottom: 30px
    }

    .login-section .brand {
        padding-bottom: 15px
    }

    .login-section .brand img {
        max-width: 140px;
        max-height: 50px
    }

    .login-section form {
        max-width: 450px
    }

    .login-section .title {
        font-size: 24px;
        margin-bottom: 25px
    }

    .login-section .label {
        font-size: 16px;
        right: 15px
    }

    .login-section .input {
        height: 60px;
        border-radius: 5px;
        border: 2px solid #ebebeb;
        padding-left: 15px;
        font-size: 16px
    }

    .login-section .btn-submit {
        height: 60px;
        border-radius: 5px;
        font-size: 18px
    }

    .login-section .btn-submit i {
        font-size: 16px;
        height: 16px
    }

    .login-section .call {
        font-size: 13px
    }

    .login-section .call i {
        font-size: 45px;
        height: 45px
    }

    .login-section .call {
        display: none
    }

    .login-section .nav {
        width: 100%;
        justify-content: space-between;
        margin-bottom: -5px;
        padding-top: 15px
    }

    .login-section .nav .nav-item {
        position: relative;
        width: calc(25% - 5px);
        margin-bottom: 5px
    }

    .login-section .nav .nav-item:after {
        display: none
    }

    .login-section .nav .nav-item .nav-link {
        font-size: 14px;
        padding: 7.5px 5px;
        background-color: #f7f7f7;
        color: #666666;
        border-radius: 5px;
        text-align: center
    }

    .login-section .return {
        width: 45px;
        height: 45px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: #ebebeb;
        margin-bottom: 20px
    }

    .login-section .return:hover {
        background-color: #0b3476
    }

    .login-section .return i {
        font-size: 24px;
        height: 24px;
        display: block;
        color: #ffffff
    }

    .login-section .phone-number {
        height: 60px;
        border-radius: 5px;
        font-size: 16px;
        text-align: right;
        padding-right: 15px
    }

    .login-section .phone-number .edit {
        left: 10px
    }

    .login-section .phone-number .edit i {
        font-size: 16px;
        height: 16px
    }

    .login-section .digit-group {
        margin-left: 10px
    }

    .login-section .digit-group .input-group {
        padding-left: 5px
    }

    .login-section .digit-group input {
        height: 60px;
        border-radius: 5px;
        font-size: 20px
    }

    .login-section .time {
        font-size: 12px
    }

    .login-section .time #timer {
        font-size: 20px
    }

    .login-section .title .iransans {
        font-size: 16px
    }

    .login-section .return-link {
        font-size: 16px;
        margin-top: 20px
    }

    .login-section .return-link i {
        font-size: 14px;
        height: 14px;
        margin-left: 12.5px
    }

    .login-section .steps {
        padding: 20px 0px
    }

    .login-section .steps .item {
        font-size: 14px;
        padding: 0px 15px
    }

    .login-section .steps .item.active svg {
        width: 70px;
        height: 70px
    }

    .login-section .steps .item.active span {
        display: none
    }

    .login-section .steps .item:after {
        content: '';
        position: absolute;
        top: 20px;
        width: 15px;
        height: 5px
    }

    .login-section .steps .item svg {
        width: 40px;
        height: 40px;
        margin-bottom: 10px
    }

    .contact-us {
        margin: 50px 0px
    }

    .contact-us .grid-div:after {
        display: none
    }

    .contact-us .item {
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        align-items: flex-start;
        padding: 15px;
        border-radius: 5px;
        border: 2px solid #e5e5e5;
        background-color: #fafafa;
        margin-bottom: 10px
    }

    .contact-us .item img {
        max-height: 45px;
        margin-bottom: 0px;
        margin-left: 15px
    }

    .contact-us .item .title {
        font-size: 18px;
        text-align: right
    }

    .contact-us .item .subtitle {
        font-size: 13px;
        text-align: right;
        text-align-last: right
    }

    .contact-us .item .nav-social {
        justify-content: flex-start;
        padding-top: 5px
    }

    .contact-us .item .nav-social .nav-item .nav-link i {
        font-size: 20px;
        height: 20px
    }

    .form-elements {
        margin-bottom: 50px
    }

    .form-elements.blog-theme .btn-submit {
        font-size: 15px;
        padding: 5px 10px
    }

    .form-elements input, .form-elements textarea {
        height: 50px;
        border-radius: 5px;
        border: 2px solid #f0f0f0;
        font-size: 14px
    }

    .form-elements textarea {
        height: 200px
    }

    .form-elements .btn-submit {
        font-size: 16px;
        padding: 5px 20px;
        height: 50px;
        border-radius: 5px
    }

    .form-elements.employment-theme .form-group {
        margin-bottom: 20px
    }

    .form-elements .label {
        font-size: 14px
    }

    .form-elements .absolute-icon {
        font-size: 15px;
        height: 15px
    }

    .form-elements .select2 {
        height: 50px !important
    }

    .form-elements .select2 .selection .select2-selection {
        border-radius: 5px !important;
        border: 2px solid #f0f0f0 !important
    }

    .form-elements .select2 .selection .select2-selection .select2-selection__rendered {
        font-size: 14px
    }

    .form-elements .select-multi .select2 {
        min-height: 50px !important
    }

    .form-elements .select-multi .selection, .form-elements .select-multi .select2-selection {
        min-height: 50px !important
    }

    .form-elements .select-multi .select2-selection__rendered {
        padding-left: 30px !important
    }

    .form-elements .select-multi .select2-selection__rendered .select2-selection__choice {
        padding: 5px 10px !important
    }

    .form-elements .select-multi .select2-selection__rendered .select2-selection__choice .select2-selection__choice__remove {
        width: 12px;
        height: 12px;
        font-size: 8px;
        padding-top: 1.5px;
        margin-left: 7.5px
    }

    .form-elements .label-file {
        height: 50px;
        border-radius: 5px;
        border: 2px solid #f0f0f0;
        font-size: 14px;
        padding-left: 45px
    }

    .map-section {
        height: 300px;
        padding: 10px;
        border-radius: 5px;
        margin-bottom: 20px
    }

    .map-section iframe {
        border-radius: 5px
    }

    .map-section .nav-direct {
        top: 20px;
        right: 20px
    }

    .map-section .nav-direct .nav-item {
        margin-bottom: 7.5px;
        width: 40px;
        height: 40px;
        border-radius: 5px
    }

    .form-contact {
        margin-bottom: 50px
    }

    .form-contact .time-work {
        padding: 15px 15px;
        border-radius: 5px;
        justify-content: flex-start;
        font-size: 14px;
        flex-wrap: wrap
    }

    .form-contact .time-work b {
        margin-left: 7.5px
    }

    .form-contact .time-work i {
        font-size: 18px;
        height: 18px;
        margin-left: 10px
    }

    .term-condition {
        margin: 50px 0px
    }

    .term-condition .nav-filter {
        margin-bottom: 25px
    }

    .term-condition .nav-filter .nav-item {
        padding: 10px 15px;
        border-radius: 5px;
        font-size: 15px
    }

    .term-condition .item {
        border-radius: 5px;
        padding: 15px
    }

    .term-condition .item .title {
        font-size: 16px;
        align-items: flex-start;
        margin-bottom: 10px
    }

    .term-condition .item .title i {
        font-size: 18px;
        height: 18px;
        margin-left: 10px;
        position: relative;
        top: 2.5px
    }

    .term-condition .item .text {
        font-size: 14px
    }

    .faq {
        margin: 50px 0px
    }

    .faq form {
        max-width: 700px;
        margin-bottom: 25px
    }

    .faq input {
        height: 50px;
        border-radius: 5px;
        padding-right: 15px
    }

    .faq .btn-search {
        left: 10px
    }

    .faq .btn-search i {
        font-size: 16px;
        height: 16px
    }

    .faq .nav-filter .nav-item {
        margin-left: 15px;
        width: 110px;
        height: 100px;
        border-radius: 5px;
        font-size: 14px
    }

    .faq .nav-filter .nav-item:before {
        border-radius: 5px
    }

    .faq .nav-filter .nav-item .number {
        font-size: 24px
    }

    .faq .accordion-menu .item {
        border-radius: 5px;
        padding: 10px;
        margin-bottom: 10px !important
    }

    .faq .accordion-menu .dropdownlink {
        align-items: flex-start;
        font-size: 15px
    }

    .faq .accordion-menu i {
        font-size: 15px;
        height: 15px;
        margin-left: 10px;
        position: relative;
        top: 4px
    }

    .faq .submenuItems .text {
        font-size: 14px
    }

    .about-us {
        margin: 50px 0px
    }

    .about-us .container {
        flex-direction: column-reverse
    }

    .about-us .shape {
        top: -50px;
        max-height: 250px
    }

    .about-us .text {
        font-size: 14px
    }

    .about-us .img {
        height: 250px;
        border-radius: 5px;
        margin-bottom: 20px
    }

    .status-section {
        margin-bottom: 50px
    }

    .status-section .container {
        flex-direction: column-reverse
    }

    .status-section .shape {
        top: calc(100% - 50px);
        max-height: 250px
    }

    .status-section .text {
        font-size: 14px;
        margin-bottom: 15px
    }

    .status-section .nav .nav-item {
        font-size: 14px
    }

    .status-section .nav .nav-item i {
        font-size: 16px;
        height: 16px;
        margin-left: 10px
    }

    .status-section .circle {
        width: 100%;
        height: unset;
        position: relative;
        background-image: none;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        margin-top: 0px
    }

    .status-section .circle .line {
        display: none
    }

    .status-section .circle .item {
        position: relative;
        width: calc(25% - 5px);
        height: 110px;
        top: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        left: 0 !important;
        transform: unset !important;
        border-radius: 5px !important;
        border-bottom: 2px solid #fd3030
    }

    .status-section .circle .item .number {
        font-size: 22px
    }

    .status-section .circle .brand {
        display: none
    }

    .video-section {
        margin-bottom: 50px
    }

    .video-section .main {
        height: 275px;
        border-radius: 5px;
        padding: 10px
    }

    .video-section .img {
        border-radius: 5px;
        padding: 5px
    }

    .video-section i {
        font-size: 36px;
        height: 36px
    }

    .video-section .subtitle {
        font-size: 14px
    }

    .video-section .title {
        font-size: 22px
    }

    .awards {
        margin-bottom: 50px
    }

    .awards .title.small-theme {
        font-size: 18px
    }

    .awards .text {
        font-size: 14px;
        margin-bottom: 15px
    }

    .awards .nav .nav-item {
        font-size: 14px
    }

    .awards .nav .nav-item .icon {
        width: 45px;
        height: 45px;
        border-radius: 5px;
        border: 2px solid #f0f0f0;
        margin-left: 10px
    }

    .awards .nav .nav-item .icon i {
        font-size: 18px;
        height: 18px
    }

    .awards .navigation .btn {
        width: 40px;
        height: 40px;
        border: 2px solid #f0f0f0;
        margin-left: 10px
    }

    .awards .navigation .btn i {
        font-size: 11px;
        height: 11px
    }

    .awards img {
        max-height: 200px;
        object-position: right;
        margin-bottom: 20px
    }

    .testimonial-section {
        margin-bottom: 50px
    }

    .testimonial-section .header-section {
        margin-bottom: 15px
    }

    .testimonial-section .slider-container {
        max-width: 100%;
        position: relative;
        padding: 0
    }

    .testimonial-section .item {
        box-shadow: none !important;
        border: 2px solid #e5e5e5;
        border-radius: 5px;
        padding: 15px;
        padding-top: 75px
    }

    .testimonial-section .item .icon-quotation {
        right: 15px;
        font-size: 75px
    }

    .testimonial-section .item .text {
        font-size: 14px;
        margin-bottom: 15px
    }

    .testimonial-section .item .user {
        font-size: 14px
    }

    .testimonial-section .item .user b {
        font-size: 15px
    }

    .testimonial-section .button-nav {
        width: 30px;
        height: 30px;
        border-radius: 5px;
        border: 2px solid #e5e5e5;
        top: 15px;
        transform: translateY(0%) translateX(0%) !important;
        z-index: 9
    }

    .testimonial-section .button-nav.prev {
        left: 50px;
        right: unset
    }

    .testimonial-section .button-nav.next {
        left: 15px;
        right: unset
    }

    .testimonial-section .button-nav i {
        font-size: 12px;
        height: 12px
    }

    .testimonial-section .shape {
        display: none
    }

    .services-box {
        margin-bottom: 40px
    }

    .services-box .shape {
        max-height: 250px
    }

    .services-box .item {
        padding: 15px;
        border-radius: 5px;
        margin-bottom: 10px;
        border: 2px solid rgba(255, 132, 0, 0.2)
    }

    .services-box .item img {
        max-height: 55px
    }

    .services-box .item .title {
        font-size: 16px
    }

    .services-box .item .text {
        font-size: 13px
    }

    .blog-archive {
        margin: 50px 0px
    }

    .blog-archive form {
        max-width: 700px;
        margin-bottom: 25px
    }

    .blog-archive input {
        height: 50px;
        border-radius: 5px;
        padding-right: 15px
    }

    .blog-archive .btn-search {
        left: 10px
    }

    .blog-archive .btn-search i {
        font-size: 16px;
        height: 16px
    }

    .blog-archive .nav-filter {
        margin-bottom: 25px
    }

    .blog-archive .nav-filter .nav-item {
        padding: 10px 15px;
        border-radius: 5px;
        font-size: 15px
    }

    .blog-archive .item {
        height: 300px;
        border-radius: 5px;
        padding: 7.5px;
        margin-bottom: 15px
    }

    .blog-archive .item .img {
        border-radius: 5px;
        padding: 15px
    }

    .blog-archive .item .subtitle {
        font-size: 14px
    }

    .blog-archive .item .title {
        font-size: 18px
    }

    .blog-archive .item .nav-info {
        width: 100%;
        justify-content: space-between
    }

    .blog-archive .item .nav-info .nav-item {
        font-size: 11px;
        margin-left: 0px
    }

    .blog-archive .item .nav-info .nav-item .icon {
        width: 35px;
        height: 35px;
        border-radius: 5px;
        border: 2px solid rgba(255, 255, 255, 0.25);
        margin-left: 7.5px
    }

    .blog-archive .item .nav-info .nav-item .icon i {
        font-size: 16px;
        height: 16px
    }

    .join-us {
        margin: 50px 0px
    }

    .join-us .shape {
        top: -50px;
        max-height: 200px;
        display: none
    }

    .join-us .text {
        font-size: 14px;
        margin-bottom: 15px
    }

    .join-us .more {
        padding: 10px 20px;
        border-radius: 5px;
        font-size: 14px
    }

    .join-us .more i {
        font-size: 14px;
        height: 14px
    }

    .line-section {
        margin-bottom: 50px
    }

    .order-section .part {
        margin-bottom: 50px
    }

    .order-section .steps-bar {
        display: flex;
        align-items: center;
        margin-bottom: 20px
    }

    .order-section .steps-bar .top-bar {
        margin-left: 15px
    }

    .order-section .steps-bar .top-bar .item {
        width: auto;
        display: none !important
    }

    .order-section .steps-bar .top-bar .item.active-device {
        display: flex !important
    }

    .order-section .steps-bar .top-bar .item .lines {
        display: none
    }

    .order-section .steps-bar .top-bar .item i {
        font-size: 45px;
        height: 45px
    }

    .order-section .steps-bar .bottom-bar {
        padding: 15px 0px;
        width: fit-content;
        border-radius: 5px
    }

    .order-section .steps-bar .bottom-bar .item {
        width: auto;
        display: none !important;
        text-align: right
    }

    .order-section .steps-bar .bottom-bar .item.active-device {
        display: block !important
    }

    .order-section .steps-bar .bottom-bar .item b {
        font-size: 14px
    }

    .order-section .main-bar .header-section {
        margin-bottom: 15px
    }

    .order-section .main-bar .header-section .title {
        font-size: 20px;
        text-align: right
    }

    .order-section .main-bar .nav-select {
        justify-content: flex-start;
        margin-bottom: 10px
    }

    .order-section .main-bar .nav-select .nav-item {
        margin-left: 5px;
        margin-bottom: 5px
    }

    .order-section .main-bar .nav-select .nav-item label {
        font-size: 15px;
        border-radius: 5px
    }

    .order-section .main-bar .btn-next {
        max-width: 220px;
        margin-left: 0;
        height: 55px;
        border-radius: 5px;
        font-size: 16px
    }

    .order-section .main-bar .btn-next i {
        font-size: 16px;
        height: 16px
    }

    .order-section .main-bar .text {
        font-size: 14px;
        text-align: right;
        text-align-last: right;
        margin-bottom: 10px
    }

    .order-section .main-bar .btn-add {
        width: 40px;
        height: 40px;
        margin-right: 0
    }

    .order-section .main-bar .btn-add i {
        font-size: 15px;
        height: 15px
    }

    .order-section .main-bar .item-product {
        margin-bottom: 15px
    }

    .order-section .main-bar .item-product .title {
        font-size: 16px
    }

    .order-section .main-bar .item-product .subtitle {
        font-size: 14px
    }

    .order-section .main-bar .item-product .count .select2 {
        height: 40px !important;
        width: 90px !important
    }

    .order-section .main-bar .item-product .count .select2 .selection .select2-selection .select2-selection__rendered {
        padding-right: 15px;
        font-size: 14px
    }

    .order-section .main-bar .item-product .btn-delete {
        width: 40px;
        height: 40px
    }

    .order-section .main-bar .item-product .btn-delete i {
        font-size: 15px;
        height: 15px
    }

    .order-section .main-bar .btn-add-p {
        font-size: 13px
    }

    .order-section .main-bar .btn-add-p .icon {
        width: 40px;
        height: 40px
    }

    .order-section .main-bar .btn-add-p .icon i {
        font-size: 15px;
        height: 15px
    }

    .order-section .main-bar .btn-add-p b {
        font-size: 16px
    }

    .order-section .main-bar .login-section {
        max-width: 500px;
        margin-right: 0
    }

    .order-section .main-bar .login-section .time {
        height: 60px;
        border-radius: 5px;
        padding: 0px 15px
    }

    .order-section .main-bar .login-section .time #timer {
        font-size: 17px
    }

    .order-section .main-bar .code {
        font-size: 20px;
        margin-right: 0;
        padding: 10px 20px;
        max-width: 300px
    }

    .order-section .main-bar .more {
        height: 55px;
        font-size: 17px;
        margin-right: 0;
        max-width: 300px
    }

    .order-section .main-bar .more i {
        font-size: 13px;
        height: 13px
    }

    .blog-single {
        margin: 50px 0px
    }

    .blog-single .box-info {
        padding: 15px 15px
    }

    .blog-single .box-info .nav {
        justify-content: space-between
    }

    .blog-single .box-info .nav .nav-item {
        margin-left: 0;
        font-size: 14px
    }

    .blog-single .box-info .nav .nav-item .icon {
        width: 45px;
        height: 45px
    }

    .blog-single .box-info .nav .nav-item .icon i {
        font-size: 18px;
        height: 18px
    }

    .blog-single .img {
        height: 300px;
        border-radius: 5px;
        margin-bottom: 20px
    }

    .blog-single .img:before {
        opacity: 1
    }

    .blog-single .img img {
        border-radius: 5px
    }

    .blog-single .img article {
        padding: 15px
    }

    .blog-single .img .subtitle {
        font-size: 12px;
        opacity: 0.8
    }

    .blog-single .img .title {
        font-size: 18px
    }

    .blog-single .img .nav .nav-item {
        font-size: 12px;
        margin-left: 15px
    }

    .blog-single .img .nav .nav-item .icon {
        width: 45px;
        height: 45px;
        border-radius: 5px;
        border-width: 3px;
        margin-left: 10px
    }

    .blog-single .img .nav .nav-item .icon i {
        font-size: 18px;
        height: 18px;
        opacity: 0.8
    }

    .blog-single .table-of-content {
        border-radius: 5px;
        padding: 15px;
        margin-bottom: 20px
    }

    .blog-single .table-of-content .head .title {
        font-size: 14px
    }

    .blog-single .table-of-content .head .title .icon {
        width: 50px;
        height: 50px;
        border: 3px solid #f7eaea
    }

    .blog-single .table-of-content .head .title .icon i {
        font-size: 20px;
        height: 20px
    }

    .blog-single .table-of-content .body {
        padding-top: 15px
    }

    .blog-single .table-of-content .t-li {
        font-size: 14px;
        margin-bottom: 5px
    }

    .blog-single .table-of-content .sub-li {
        margin-bottom: 10px
    }

    .blog-single .table-of-content .sub-li a {
        font-size: 13px
    }

    .blog-single .text {
        font-size: 14px;
        margin-bottom: 20px
    }

    .blog-single .quote-box {
        padding: 15px;
        border-radius: 5px
    }

    .blog-single .quote-box .text {
        margin-bottom: 0
    }

    .blog-single .title-blog {
        font-size: 16px;
        margin-bottom: 10px
    }

    .blog-single .title-blog i {
        font-size: 20px;
        height: 20px;
        margin-left: 10px
    }

    .blog-single .box-recent {
        border-radius: 5px;
        padding: 10px 15px
    }

    .blog-single .box-recent .title-box {
        font-size: 14px;
        margin-left: 0px
    }

    .blog-single .box-recent .title-box .icon {
        width: 50px;
        height: 50px;
        border-radius: 5px;
        border: 3px solid #eceff4;
        margin-left: 10px
    }

    .blog-single .box-recent .title-box .icon i {
        font-size: 20px;
        height: 20px
    }

    .blog-single .box-recent .nav .nav-item {
        margin-left: 10px
    }

    .blog-single .box-recent .nav .nav-item .nav-link {
        font-size: 14px;
        padding: 7.5px 15px;
        border-radius: 5px
    }

    .blog-single .img-gallery {
        border-radius: 5px
    }

    .blog-single .img-gallery img {
        height: 225px;
        border-radius: 5px
    }

    .blog-single .video-box {
        height: 300px;
        padding: 15px;
        border-radius: 5px
    }

    .blog-single .video-box:before {
        border-radius: 5px
    }

    .blog-single .video-box img {
        border-radius: 5px
    }

    .blog-single .video-box .btn-play svg {
        width: 60px;
        height: 60px
    }

    .blog-archive .slider-container {
        padding: 0px 0px
    }

    .blog-archive .button-nav {
        width: 35px;
        height: 35px;
        border-radius: 5px;
        border: 3px solid #f0f0f0;
        top: 20px;
        transform: translateY(0%)
    }

    .blog-archive .button-nav.next {
        left: 20px
    }

    .blog-archive .button-nav.prev {
        right: unset;
        left: 60px
    }

    .blog-archive .button-nav i {
        font-size: 12px;
        height: 12px
    }

    .form-elements .rate {
        font-size: 16px;
        margin-left: 20px
    }

    .comment-section {
        margin-bottom: 50px
    }

    .comment-section .nav-filter {
        margin-bottom: 25px
    }

    .comment-section .nav-filter .nav-item {
        padding: 7.5px 10px;
        border-radius: 5px;
        font-size: 14px;
        margin-left: 5px
    }

    .comment-section .item {
        flex-wrap: wrap;
        padding: 10px !important;
        border: 2px solid #e5e5e5;
        border-radius: 5px;
        margin-bottom: 10px;
        position: relative
    }

    .comment-section .item.red-theme {
        border-color: rgba(253, 48, 48, 0.2)
    }

    .comment-section .item.orange-theme {
        border-color: rgba(255, 132, 0, 0.2)
    }

    .comment-section .item img {
        width: 70px;
        height: 70px;
        min-width: 70px;
        margin-left: 15px;
        margin-bottom: 15px
    }

    .comment-section .item .info {
        width: 100%;
        min-width: 100%;
        margin-left: 0px;
        margin-bottom: 15px
    }

    .comment-section .item .name {
        font-size: 14px
    }

    .comment-section .item .date {
        font-size: 13px
    }

    .comment-section .item .rate {
        font-size: 14px;
        margin-bottom: 0
    }

    .comment-section .item .btn-reply {
        padding: 10px 15px;
        border-radius: 5px;
        font-size: 14px;
        position: absolute;
        top: 10px;
        left: 10px
    }

    .comment-section .item .text {
        font-size: 14px
    }

    .comment-section .reply-box {
        margin-top: 15px
    }

    .comment-section .reply-box textarea {
        height: 225px;
        border-radius: 5px;
        font-size: 14px;
        padding: 15px
    }

    .comment-section .reply-box .btn-send {
        font-size: 14px;
        padding: 5px 15px;
        height: 45px;
        border-radius: 5px;
        left: 15px;
        bottom: 15px
    }

    .profile-section {
        margin: 30px 0px
    }

    .profile-section .btn-profile {
        padding: 7.5px 10px;
        font-size: 14px;
        margin-bottom: 20px
    }

    .profile-section .btn-profile i {
        font-size: 16px;
        height: 16px
    }

    .profile-section .nav-side .nav-item {
        margin-bottom: 15px
    }

    .profile-section .nav-side .nav-item .nav-link {
        font-size: 13px
    }

    .profile-section .nav-side .nav-item .nav-link b {
        font-size: 15px
    }

    .profile-section .nav-side .nav-item .nav-link .icon {
        width: 50px;
        height: 50px;
        border-radius: 5px;
        border: 2px solid #ebebeb
    }

    .profile-section .nav-side .nav-item .nav-link .icon i {
        font-size: 18px;
        height: 18px
    }

    .profile-section .main-profile .header-profile {
        margin-bottom: 25px;
        font-size: 14px
    }

    .profile-section .main-profile .header-profile .lines .line {
        height: 7.5px
    }

    .profile-section .main-profile .header-profile article {
        padding-left: 15px
    }

    .profile-section .main-profile .header-profile i {
        font-size: 40px;
        height: 40px;
        margin-left: 15px
    }

    .profile-section .main-profile .header-profile img {
        width: 40px
    }

    .profile-section .main-profile .header-profile b {
        font-size: 16px
    }

    .profile-section .main-profile input, .profile-section .main-profile textarea {
        height: 50px;
        border: 2px solid #ebebeb;
        font-size: 13px;
        border-radius: 5px
    }

    .profile-section .main-profile textarea {
        height: 170px
    }

    .profile-section .main-profile .btn-submit {
        height: 50px;
        padding: 5px 5px;
        font-size: 16px;
        border-radius: 5px
    }

    .profile-section .main-profile .select2 {
        height: 50px !important
    }

    .profile-section .main-profile .select2 .selection .select2-selection {
        border-radius: 5px !important;
        border: 2px solid #ebebeb !important
    }

    .profile-section .main-profile .select2 .selection .select2-selection:after {
        left: 15px;
        font-size: 10px
    }

    .profile-section .main-profile .select2 .selection .select2-selection .select2-selection__rendered {
        font-size: 13px
    }

    .profile-section .main-profile .info {
        font-size: 13px
    }

    .profile-section .main-profile .info i {
        font-size: 16px;
        height: 16px
    }

    .profile-section .main-profile .card-list {
        margin-top: 20px
    }

    .profile-section .main-profile .card-list .card {
        padding: 20px;
        border-radius: 5px
    }

    .profile-section .main-profile .card-list .card img {
        height: 50px;
        width: 130px
    }

    .profile-section .main-profile .card-list .card .number {
        font-size: 18px
    }

    .profile-section .main-profile .card-list .card .name {
        font-size: 14px
    }

    .profile-section .main-profile .card-list .btn-add i {
        font-size: 35px;
        height: 35px
    }

    .profile-section .main-profile .text {
        font-size: 14px
    }

    .profile-section .main-profile .digit-group {
        margin-left: 10px
    }

    .profile-section .main-profile .digit-group .input-group {
        padding-left: 10px
    }

    .profile-section .main-profile .digit-group input {
        height: 55px;
        border-radius: 5px;
        font-size: 20px
    }

    .profile-section .main-profile .time {
        font-size: 12px
    }

    .profile-section .main-profile .time #timer {
        font-size: 18px
    }

    .profile-section .main-profile .edit-mobile {
        font-size: 14px
    }

    .profile-section .main-profile .edit-mobile .icon {
        width: 45px;
        height: 45px
    }

    .profile-section .main-profile .edit-mobile .icon i {
        font-size: 16px;
        height: 16px
    }

    .profile-section .main-profile .text-box {
        padding: 15px;
        border-radius: 5px;
        font-size: 14px;
        margin-bottom: 20px
    }

    .profile-section .main-profile .your-credit {
        height: 50px;
        font-size: 14px
    }

    .profile-section .main-profile .select2 .selection .select2-selection .select2-selection__rendered div img {
        margin-left: 10px
    }

    .profile-section .main-profile .shadow-box .count {
        font-size: 14px;
        padding-left: 15px
    }

    .profile-section .main-profile .shadow-box .count .btn i {
        font-size: 14px;
        height: 14px
    }

    .profile-section .main-profile .shadow-box .btn-submit {
        font-size: 14px
    }

    .profile-section .main-profile .table-div {
        margin-bottom: 15px;
        margin-top: 15px
    }

    .profile-section .main-profile .table-div .t-head {
        display: none !important
    }

    .profile-section .main-profile .table-div .tr {
        padding: 5px;
        border-radius: 5px
    }

    .profile-section .main-profile .table-div .td {
        font-size: 13px;
        display: flex;
        align-items: center;
        position: relative;
        font-weight: 300;
        padding: 5px
    }

    .profile-section .main-profile .table-div .td:before {
        content: attr(data-title);
        margin-left: 5px;
        font-weight: 500
    }

    .profile-section .main-profile .table-div .td:after {
        display: none
    }

    .profile-section .main-profile .table-div .td .price, .profile-section .main-profile .table-div .td .label {
        padding: 0px;
        border-radius: 0;
        background-color: transparent !important;
        color: #4ab04a;
        margin: 0
    }

    .profile-section .main-profile .table-div .td .price.red, .profile-section .main-profile .table-div .td .label.red {
        color: #ff3b3c
    }

    .profile-section .main-profile .table-div .td .price.yellow, .profile-section .main-profile .table-div .td .label.yellow {
        color: #fda52f
    }

    .profile-section .main-profile .table-div .td .price.red, .profile-section .main-profile .table-div .td .label.red {
        color: #fd3030
    }

    .profile-section .main-profile .table-div .td .price.gray, .profile-section .main-profile .table-div .td .label.gray {
        color: #787878
    }

    .profile-section .main-profile .table-div .td .show-text {
        width: auto;
        height: auto;
        padding: 5px 10px;
        border-radius: 4px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 14px;
        background-color: #f7f7f7;
        color: #666666
    }

    .profile-section .main-profile .table-div .td .show-text:hover {
        color: #ffffff
    }

    .profile-section .main-profile .table-div .td .show-text:hover i {
        color: #ffffff
    }

    .profile-section .main-profile .table-div .td .show-text.show {
        color: #ffffff
    }

    .profile-section .main-profile .table-div .td .show-text.show i {
        color: #ffffff
    }

    .profile-section .main-profile .table-div .td .show-text i {
        font-size: 12px;
        height: 12px;
        color: #666666;
        margin-left: 10px
    }

    .profile-section .main-profile .table-div .td .text {
        font-size: 13px;
        padding: 5px 0px
    }

    .profile-section .main-profile .table-div .pr {
        padding-right: 5px !important
    }

    .profile-section .main-profile .table-div .tr-drop-down {
        border-radius: 5px
    }

    .profile-section .main-profile .table-div .nav-action {
        flex-wrap: wrap;
        justify-content: space-between;
        margin-bottom: 0
    }

    .profile-section .main-profile .table-div .nav-action .nav-item {
        font-size: 12px;
        margin-left: 0px;
        background-color: #ffffff;
        justify-content: center;
        flex-direction: column;
        width: calc(50% - 5px);
        padding: 10px 2.5px;
        border-radius: 5px;
        margin-bottom: 10px
    }

    .profile-section .main-profile .table-div .nav-action .nav-item.active {
        background-color: #666666;
        color: #ffffff
    }

    .profile-section .main-profile .table-div .nav-action .nav-item.active.blue-theme {
        background-color: #0b3476
    }

    .profile-section .main-profile .table-div .nav-action .nav-item.active.red-theme {
        background-color: #fd3030
    }

    .profile-section .main-profile .table-div .nav-action .nav-item.active.orange-theme {
        background-color: #ff8400
    }

    .profile-section .main-profile .table-div .nav-action .nav-item .icon {
        width: auto;
        height: auto;
        background-color: transparent !important;
        margin-left: 0px;
        margin-bottom: 7.5px
    }

    .profile-section .main-profile .table-div .nav-action .nav-item .icon i {
        font-size: 16px;
        height: 16px
    }

    .profile-section .main-profile .table-div .inf {
        flex-wrap: wrap;
        font-size: 13px
    }

    .profile-section .main-profile .table-div .inf b {
        margin-left: 7.5px
    }

    .profile-section .main-profile .table-div .inf i {
        font-size: 8px;
        height: 8px;
        margin-left: 7.5px
    }

    .profile-section .main-profile .table-div .nav-steps {
        margin-bottom: 0;
        justify-content: space-between
    }

    .profile-section .main-profile .table-div .nav-steps .nav-item {
        width: calc(50% - 5px);
        font-size: 12px;
        padding: 10px 10px;
        background-color: #ffffff;
        border-radius: 5px;
        margin-bottom: 10px;
        display: flex;
        align-items: center;
        justify-content: flex-start;
        flex-direction: row
    }

    .profile-section .main-profile .table-div .nav-steps .nav-item:before {
        display: none
    }

    .profile-section .main-profile .table-div .nav-steps .nav-item:after {
        display: none
    }

    .profile-section .main-profile .table-div .nav-steps .nav-item.active {
        background-color: #6381b0;
        color: #ffffff
    }

    .profile-section .main-profile .table-div .nav-steps .nav-item.active .num {
        color: #6381B0;
        background-color: #ffffff
    }

    .profile-section .main-profile .table-div .nav-steps .nav-item.now {
        background-color: #0b3476;
        color: #ffffff
    }

    .profile-section .main-profile .table-div .nav-steps .nav-item.now .num {
        color: #0b3476;
        background-color: #ffffff
    }

    .profile-section .main-profile .table-div .nav-steps .nav-item .circle {
        display: none
    }

    .profile-section .main-profile .table-div .nav-steps .nav-item .num {
        width: 20px;
        height: 20px;
        border-radius: 50%;
        margin-left: 7.5px;
        background-color: #f1f0f0;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 10px
    }

    .profile-section .main-profile .table-div .title {
        font-size: 14px
    }

    .profile-section .main-profile .table-div .date {
        font-size: 13px
    }

    .profile-section .main-profile .table-div .text {
        font-size: 12px
    }

    .profile-section .main-profile .address-list .item {
        flex-wrap: wrap;
        border-radius: 5px;
        padding: 10px 10px;
        padding-top: 5px;
        font-size: 13px
    }

    .profile-section .main-profile .address-list .item .circle {
        min-width: 20px;
        width: 20px;
        height: 20px;
        border: 7px solid #dbdbdb;
        margin-top: 5px;
        margin-bottom: 5px
    }

    .profile-section .main-profile .address-list .item .group {
        width: 100%;
        margin-top: 5px;
        justify-content: flex-end
    }

    .profile-section .main-profile .address-list .item .btn-edit {
        font-size: 14px;
        padding: 7.5px 15px
    }

    .profile-section .main-profile .address-list .item .btn-edit i {
        font-size: 16px;
        height: 16px
    }

    .profile-section .main-profile .address-list .item .btn-bin i {
        font-size: 18px;
        height: 18px
    }

    .profile-section .main-profile .label-file {
        height: 50px;
        border: 2px solid #ebebeb;
        font-size: 13px;
        border-radius: 5px
    }

    .profile-section .main-profile .label-file i {
        font-size: 15px;
        height: 15px;
        margin-right: auto
    }

    .profile-section .main-profile .comment-section .item {
        padding: 10px;
        border-radius: 5px
    }

    .profile-section .main-profile .comment-section .item.reply-theme {
        margin-right: 0px
    }

    .profile-section .main-profile .nav-filter {
        margin-bottom: 15px
    }

    .profile-section .main-profile .nav-filter .nav-item {
        padding: 10px 15px;
        border-radius: 5px;
        font-size: 13px
    }

    .profile-section .main-profile .nav-filter .nav-item:after {
        width: 8px;
        height: 8px
    }

    .profile-section .main-profile .item-box {
        padding: 5px;
        border: 3px solid #f0f0f0;
        font-size: 12px;
        border-radius: 5px;
        margin-bottom: 10px
    }

    .profile-section .main-profile .item-box b {
        font-size: 16px
    }

    .profile-section .main-profile .item-box .icon {
        width: 75px;
        height: 75px;
        border-radius: 5px;
        margin-left: 15px
    }

    .profile-section .main-profile .item-box .icon i {
        font-size: 30px;
        height: 30px
    }

    .profile-section .main-profile .no-data {
        font-size: 14px;
        padding-top: 0px
    }

    .profile-section .main-profile .no-data b {
        font-size: 16px
    }

    .profile-section .main-profile .no-data .main-icon {
        font-size: 80px;
        height: 80px;
        margin-bottom: 25px
    }

    .profile-section .main-profile .no-data .btn {
        padding: 10px 20px;
        border-radius: 5px;
        font-size: 14px
    }

    .profile-section .main-profile .nav-tab-public {
        margin-bottom: 20px
    }

    .profile-section .main-profile .nav-tab-public .nav-item {
        padding: 10px 20px;
        border-radius: 5px;
        font-size: 14px
    }

    .profile-section .main-profile .nav-tab-public .nav-item:before {
        width: 8px;
        height: 8px
    }

    .bread-crumb {
        padding: 10px 0px
    }

    .bread-crumb .title {
        font-size: 18px;
        padding: 7.5px 0px;
        padding-left: 10px
    }

    .bread-crumb .nav .nav-item .nav-link {
        font-size: 14px;
        padding: 7.5px 15px
    }

    .bread-crumb .nav .nav-item .nav-link:after {
        width: 10px;
        height: 5px
    }

    .bread-crumb .nav .nav-item .nav-link i {
        font-size: 20px;
        height: 20px
    }

    .payment-status .container {
        padding-top: 30px !important;
        padding-bottom: 30px !important
    }

    .payment-status img {
        max-height: 175px;
        margin-bottom: 20px
    }

    .payment-status .subtitle {
        font-size: 14px;
        text-align: center
    }

    .payment-status .title {
        font-size: 24px;
        margin-bottom: 25px;
        text-align: center
    }

    .payment-status .nav {
        width: 100%;
        justify-content: center
    }

    .payment-status .nav .nav-item {
        margin-left: 10px
    }

    .payment-status .nav .nav-item:last-child {
        margin-left: 0
    }

    .payment-status .nav .nav-item .nav-link {
        padding: 10px 20px;
        border-radius: 5px;
        font-size: 16px;
        min-width: auto
    }

    .payment-status .nav .nav-item .nav-link i {
        margin-right: 10px
    }

    .nav-pagination .nav-item {
        margin-left: 5px
    }

    .nav-pagination .nav-item.navigation-item .nav-link {
        padding: 0px 10px
    }

    .nav-pagination .nav-item .nav-link {
        width: 35px;
        height: 35px;
        font-size: 14px
    }

    .alert-public {
        font-size: 13px;
        padding: 5px 10px;
        border-radius: 5px
    }

    .alert-public i {
        font-size: 18px;
        height: 18px;
        margin-left: 10px
    }

    .alert-public svg {
        width: 18px;
        height: 18px;
        margin-left: 10px
    }

    .alert-public .link {
        padding: 10px 15px;
        border-radius: 5px;
        font-size: 13px;
        min-width: 125px
    }

    .header-section {
        margin-bottom: 25px
    }

    .header-section.bg-theme {
        margin-bottom: 30px
    }

    .header-section.bg-theme .title {
        padding: 15px 15px;
        border-radius: 5px;
        font-size: 20px;
        margin: 0 0;
        text-align: right
    }

    .header-section .subtitle {
        font-size: 14px
    }

    .header-section .title {
        font-size: 23px
    }
}

@media screen and (max-width: 768px) {
    .error-section .nav {
        width: auto;
        margin: 0 -5px
    }

    .error-section .nav .nav-item {
        width: 25%;
        margin-left: 0px;
        padding: 0px 5px;
        margin-bottom: 10px
    }

    .error-section .nav .nav-item .nav-link {
        text-align: center;
        padding: 10px 5px
    }

    .login-section .shape {
        max-height: 175px
    }

    .login-section .steps {
        padding-bottom: 10px
    }

    .login-section .steps .item {
        display: none
    }

    .login-section .steps .item.active {
        display: flex
    }

    .login-section .steps .item.active svg {
        width: 60px;
        height: 60px
    }

    .login-section .steps .item:after {
        display: none
    }

    .order-section .main-bar .login-section .btn-submit {
        font-size: 16px
    }

    .order-section .main-bar .item-product {
        flex-direction: column;
        justify-content: center;
        align-items: center
    }

    .order-section .main-bar .item-product img {
        margin-left: 0;
        margin-bottom: 15px
    }

    .order-section .main-bar .item-product .title {
        text-align: center
    }

    .order-section .main-bar .item-product .subtitle {
        text-align: center
    }

    .order-section .main-bar .item-product input {
        text-align: center;
        padding: 0px 5px
    }

    .order-section .main-bar .item-product .actions {
        margin-top: 15px;
        width: 100%;
        justify-content: center
    }

    .profile-section .top-bar {
        padding: 10px
    }

    .profile-section .top-bar .user {
        width: 100%;
        margin-bottom: 15px
    }

    .profile-section .top-bar .nav {
        width: 100%;
        justify-content: flex-end
    }

    .profile-section .top-bar .nav .nav-item {
        margin-left: 5px
    }

    .profile-section .top-bar .nav .nav-item .nav-link {
        font-size: 13px;
        padding: 7.5px 12px
    }

    .profile-section .top-bar .nav .nav-item .nav-link i {
        font-size: 10px;
        height: 10px;
        padding-right: 0 !important;
        margin-right: 10px
    }

    .profile-section .main-profile .card-list .card {
        margin-bottom: 10px
    }

    .profile-section .main-profile .card-list .btn-add {
        display: block;
        margin-right: auto;
        margin-bottom: 0
    }

    .profile-section .main-profile .card-list .btn-add i {
        font-size: 24px;
        height: 24px
    }

    .modal-remove .modal-dialog {
        padding-top: 20px
    }

    .modal-remove .modal-content {
        border-radius: 5px;
        padding: 50px 15px;
        padding-bottom: 35px
    }

    .modal-remove .btn-close {
        width: 40px;
        height: 40px
    }

    .modal-remove .btn-close span {
        font-size: 28px
    }

    .modal-remove .title {
        font-size: 20px;
        margin-bottom: 15px
    }

    .modal-remove .nav .nav-item.red-theme {
        margin-left: 20px
    }

    .modal-remove .nav .nav-item.red-theme .nav-link {
        padding: 10px 15px
    }

    .modal-remove .nav .nav-item .nav-link {
        border-radius: 5px;
        font-size: 14px
    }
}

@media screen and (max-width: 576px) {
    .login-section .nav {
        margin-bottom: -10px
    }

    .login-section .nav .nav-item {
        width: calc(50% - 5px);
        margin-bottom: 10px
    }

    .articles .nav-info .nav-item {
        font-size: 12px;
        margin-left: 15px
    }

    .articles .nav-info .nav-item .icon {
        width: 40px;
        height: 40px;
        margin-left: 10px
    }

    .articles .nav-info .nav-item .icon i {
        font-size: 15px;
        height: 15px
    }

    .error-section .nav .nav-item {
        width: 50%
    }

    .term-condition .nav-filter {
        margin-bottom: 15px;
        justify-content: space-between
    }

    .term-condition .nav-filter .nav-item {
        width: calc(50% - 5px);
        padding: 10px 5px;
        text-align: center;
        margin-bottom: 10px;
        margin-left: 0
    }

    .term-condition .item {
        padding: 10px
    }

    .term-condition .item .title {
        font-size: 14px;
        margin-bottom: 5px
    }

    .term-condition .item .title i {
        font-size: 16px;
        height: 16px
    }

    .term-condition .item .text {
        font-size: 13px
    }

    .faq .nav-filter {
        margin-bottom: 15px;
        justify-content: space-between
    }

    .faq .nav-filter .nav-item {
        margin-left: 0;
        width: calc(50% - 5px);
        margin-bottom: 10px
    }

    .status-section .circle .item {
        width: calc(50% - 5px);
        margin-bottom: 10px
    }

    .blog-archive input {
        font-size: 14px
    }

    .blog-archive .nav-filter {
        margin-bottom: 15px;
        justify-content: space-between
    }

    .blog-archive .nav-filter .nav-item {
        width: calc(50% - 5px);
        padding: 10px 5px;
        text-align: center;
        margin-bottom: 10px;
        margin-left: 0
    }

    .blog-single .box-info .nav {
        justify-content: flex-start
    }

    .blog-single .box-info .nav .nav-item {
        margin-left: 20px
    }

    .blog-single .box-info .nav .nav-item:nth-child(2) {
        margin-left: 0
    }

    .blog-single .header-section .title {
        font-size: 21px
    }

    .blog-single .img article {
        padding-bottom: 5px
    }

    .blog-single .img .nav .nav-item {
        font-size: 12px;
        margin-left: 10px;
        padding: 5px;
        border-radius: 4px;
        background-color: rgba(255, 255, 255, 0.1);
        color: #FFFFFF;
        margin-bottom: 10px
    }

    .blog-single .img .nav .nav-item .icon {
        display: none
    }

    .blog-single .video-box {
        height: 250px;
        padding: 10px
    }

    .blog-single .video-box:before {
        width: calc(100% - 20px);
        height: calc(100% - 20px)
    }

    .blog-single .video-box .btn-play svg {
        width: 45px;
        height: 45px
    }

    .profile-section .main-profile .your-credit {
        margin-bottom: 10px
    }

    .profile-section .main-profile .shadow-box {
        flex-wrap: wrap;
        border-radius: 5px;
        height: auto;
        padding: 10px;
        margin-bottom: 10px
    }

    .profile-section .main-profile .shadow-box .count {
        max-width: 100%;
        margin-bottom: 15px
    }

    .profile-section .main-profile .shadow-box .count input {
        margin-bottom: 0
    }

    .profile-section .main-profile .shadow-box .btn-submit {
        max-width: 100%;
        border-radius: 4px
    }

    .profile-section .main-profile .form-group.bank-theme .select2 {
        height: auto !important
    }

    .profile-section .main-profile .form-group.bank-theme .select2 .selection .select2-selection {
        border-radius: 5px !important
    }

    .profile-section .main-profile .form-group.bank-theme .select2 .select2-selection__rendered {
        height: auto;
        white-space: normal;
        padding-top: 10px;
        padding-bottom: 10px
    }

    .profile-section .main-profile .form-group.bank-theme .select2 .select2-selection__rendered div {
        flex-wrap: wrap
    }

    .profile-section .main-profile .comment-section .item .info {
        width: 100% !important;
        min-width: 100% !important
    }

    .profile-section .main-profile .comment-section .item .rate {
        position: absolute;
        top: 10px;
        left: 10px
    }

    .profile-section .main-profile .table-div .nav-steps .nav-item {
        width: 100%
    }
}