/*====================================
    font
=====================================*/
@import url(https://fonts.googleapis.com/css?family=Lato:100,300,400,900|Poppins:300,400,500,600);
:root {
    --font-color-body: #38384f;
    --font-size-body: 14px;
    --background-color-body: #ffffff;
    --font-stack-body: "Poppins", sans-serif; 
    --font-weight-body: 400;
    --font-style-body: normal;
    --font-letter-spacing-body: 0.5px;
    --font-color-header: #333333;
    --font-stack-header: "Poppins", sans-serif;
    --font-weight-header: 600;
    --font-style-header: normal;
    --font-color-section-header: #333333;
    --font-stack-section-header: "Poppins", sans-serif;
    --font-weight-section-header: 600;
    --font-style-section-header: normal;
    --font-color-paragraph: #6f6f6f;
    --font-stack-paragraph: "Poppins", sans-serif;
    --font-line-height-paragraph: 25px;
    --font-color-primary: #ffd90c;
    --font-color-secondary: #333333;
}

/*====================================
    Typography
=====================================*/
body {
    color: var(--font-color-body);
    font-size: var(--font-size-body);
    background-color: var(--background-color-body);
    font-family: var(--font-stack-body);
    font-weight: var(--font-weight-body);
    font-style: var(--font-style-body);
    line-height: var(--font-style-body); 
    letter-spacing: var(--font-letter-spacing-body);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: antialiased;
    text-size-adjust: 100%;
}
html.hidden {
    overflow: hidden;
    margin-right: 17px;
}
@media (max-width: 1199px) {
    html.hidden {
        margin: 0 auto;
    }
    body.hidden {
        overflow: hidden;
        margin: 0 auto;
    }
}

/*====================================
    heading css
=====================================*/
h1,
h2,
h3,
h4,
h5,
h6 {
    color: var(--font-color-header);
    margin: 0;
    padding: 0;
    font-family: var(--font-stack-header);
    font-weight: var(--font-weight-header);
    font-style: var(--font-style-header);
}

/*====================================
    section-heading css
=====================================*/
.section-title h2 {
    color: var(--font-color-section-header);
    font-family: var(--font-stack-section-header);
    font-weight: var(--font-weight-section-header);
    font-style: var(--font-style-section-header);
}

/*====================================
    'p' tag css
=====================================*/
p {
    color: var(--font-color-paragraph);
    margin-bottom: 0;
    font-family: var(--font-stack-paragraph);
    line-height: var(--font-line-height-paragraph);
}

/*====================================
    'a' tag css
=====================================*/
a {
    color: var(--font-color-header);
    display: inline-block;
    text-decoration: none;
}
a:hover {
    color: var(--font-color-primary);
}
a,
a:hover {
    -webkit-transition: all 0.3s ease-in-out 0s;
    -o-transition: all 0.3s ease-in-out 0s;
    transition: all 0.3s ease-in-out 0s;
}

/*====================================
    'span' tag css
=====================================*/
span {
    display: inline-block;
}

/*====================================
    'button' tag css
=====================================*/
button {
    display: inline-block;
    padding: 0;
    background: 0 0;
    font-family: 'Open Sans', sans-serif;
    border: none;
    line-height: normal;
}
button,
button:hover {
    -webkit-transition: all 0.3s ease-in-out 0s;
    -o-transition: all 0.3s ease-in-out 0s;
    transition: all 0.3s ease-in-out 0s;
}
button,
button:focus {
    outline: 0;
    box-shadow: none;
}
.btn.active:focus,
.btn:active:focus,
.btn:focus {
    outline: 0;
    box-shadow: none;
}
.navbar-toggler:focus {
    box-shadow: none;
}
a.disabled,
a.btn.disabled,
a.btn[disabled],
a.quick-view.disabled,
button.btn.disabled,
button.btn[disabled],
button[disabled] {
    color: #eaeaea!important;
    background-color: #ababab!important;
    opacity: .65;
    pointer-events: none;
    border-color: #ababab!important;
}

/*====================================
    btn-style css
=====================================*/
/* btn-style css */
.btn-style {
    color: #ffffff;
    font-size: 16px;
    padding: 15px 30px;
    background-color:#6c63ff;
    text-transform: uppercase;
    font-weight: 600;
    border: 1px solid #6c63ff;
    border-radius: 30px;
    letter-spacing: .5px;
}
.btn-style:hover {
    color: var(--background-color-body);
    background-color: var(--font-color-header);
    border: 1px solid var(--font-color-header);
}
.btn-style2 {
    color: #ffffff;
    font-size: 14px;
    padding: 12px 40px;
    background-color: #6c63ff;
    text-transform: uppercase;
    font-weight: 600;
    border: 2px solid #6c63ff;
    border-radius: 0;
    letter-spacing: .5px;
    line-height: 1;
}
.btn-style2:hover {
    color: #ffffff;
    background-color: #333333;
    border: 2px solid #333333;
}
@media(max-width: 1199px){
    .btn-style{
        font-size: 14px;
        padding: 12px 20px;
    }
}
.btn-style3 {
    color: #ffffff;
    font-size: 16px;
    padding: 20px 30px;
    background-color: #6c63ff;
    text-transform: uppercase;
    font-weight: 600;
    border: 2px solid #6c63ff;
    border-radius: 30px;
    letter-spacing: .5px;
    line-height: 1;
}
.btn-style3:hover {
    color: #ffffff;
    background-color: #333333;
    border: 2px solid #333333;
}

/*====================================
    'ul' tag css
=====================================*/
ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

/*====================================
    'other' tag css
=====================================*/
input,
select,
textarea {
    color: var(--font-color-body);
    font-size: 14px;
    padding: 10px 15px;
    background-color: var( --background-color-body);
    font-family: 'Open Sans', sans-serif;
    text-transform: none;
    font-weight: 400;
    border: 1px solid #e2e2e2;
    border-radius: 0;
}
input::placeholder,
textarea::placeholder {
    color: var(--font-color-body);
}
input:focus,
select:focus,
textarea:focus {
    outline: none;
    border: 1px solid #e2e2e2;
    box-shadow: none;
}   
input.disabled,
input[disabled],
select.disabled,
select[disabled],
textarea.disabled,
textarea[disabled] {
    color: var(--font-color-body);
    background-color: var( --background-color-body);
    border: 1px solid #e2e2e2;
}

/* clears the ‘X’ from Internet Explorer */
input[type=search]::-ms-clear,
input[type=search]::-ms-reveal {
    display: none;
    width: 0;
    height: 0;
}

/* clears the ‘X’ from Chrome */
input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-results-button,
input[type="search"]::-webkit-search-results-decoration {
    display: none;
}

/*====================================
    section-capture css
====================================*/
.section-heading {
    font-size: 18px;
    color: #888;
    line-height: 1;
}
.section-heading-center {
    margin-left: auto;
    margin-right: auto;
    max-width: 600px;
    text-align: center;
}
.section-heading .subtitle {
    color: #fb435f;
    text-transform: uppercase;
    margin-bottom: 24px;
}
.section-heading .subtitle h2 span.title {
    font-size: 32px;
}

/*====================================
    box-header css
=====================================*/
.main-menu-area .box-header button.close-box {
    color: var(--font-color-header);
    font-size: 13px;
    line-height: 0;
}
@media (max-width: 1199px) {
    .mobile-menu .box-header {
        display: block;
    }
}

/*====================================
    header css
====================================*/
.header-area {
    background-color: var(--background-color-body);
    padding: 35px;
}
.header-area .header-main {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.header-area .header-main .header-element.logo {
    width: 50%;
}
@media (max-width: 1199px) {
    .header-area {
        padding: 15px 0px;
    }
    .header-area .header-main .header-element.logo {
        width: 50%;
    }
}

/*====================================
    header-bottom css
====================================*/
.main-menu-area .mega-menu-area  {
    width: 50%;
    padding-left: 15px;
    justify-content: flex-end;
}
.megamenu-content  span.menu-arrow i {
    font-weight: 600;
}
.megamenu-content .mainwrap.collapse:not(.show) {
    display: block;
}
@media (max-width: 1199px) {
    .megamenu-content .mainwrap.collapse:not(.show) {
        display: none;
    }
    .main-menu-area .main-menu-wrap {
        display: flex;
        flex-direction: column-reverse;
        border-bottom: 1px solid #e2e2e2;
    }
    .megamenu-content .mainwrap ul.main-menu {
        display: flex;
        flex-direction: column;
    }
    .megamenu-content .mainwrap ul.main-menu li.menu-link {
        border-bottom: 1px solid #e2e2e2;
    }
}

/* mainwrap-menu css */
.mainwrap ul.main-menu {
    display: flex;
}
.mainwrap ul.main-menu li.menu-link {
    position: relative;
}
.mainwrap ul.main-menu li.menu-link a.link-title {
    position: relative;
    color: var(--font-color-header);
    font-size: 16px;
    display: flex;
    align-items: center;
    padding: 12px 0px;
    margin: 0px 20px;
    text-transform: capitalize;
    font-weight: 600;
    white-space: nowrap;
}
.mainwrap ul.main-menu li.menu-link a.link-title.link-title-lg {
    display: none;
}
.mainwrap ul.main-menu li.menu-link:hover a.link-title {
    color: var(--font-color-header);
}
.mainwrap ul.main-menu li.menu-link a.link-title::before {
    content: "";
    position: absolute;
    width: 0;
    height: 5px;
    opacity: 0;
    background-color: #e3e1ff;
    border-radius: 2.5px;
    left: 0;
    right: 0;
    bottom: 10px;
    z-index: -1;
    -webkit-transition: all 0.3s ease-in-out 0s;
    -o-transition: all 0.3s ease-in-out 0s;
    transition: all 0.3s ease-in-out 0s;
}
.mainwrap ul.main-menu li.menu-link.active a.link-title::before {
    right: 0;
}
.mainwrap ul.main-menu li.menu-link.active a.link-title::before,
.mainwrap ul.main-menu li.menu-link:hover a.link-title::before {
    opacity: 1;
    width: 100%;
    z-index: 1;
}
.mainwrap ul.main-menu li.menu-link a.link-title span.sp-link-title {
    display: flex;
    align-items: center;
    position: relative;
}
.mainwrap ul.main-menu li.menu-link a.link-title span.menu-arrow {
    margin-left: 5px;
}
.mainwrap ul.main-menu li.menu-link a.link-title span.menu-arrow i {
    font-weight: 600;
}   
.mainwrap ul.main-menu li.menu-link .menu-dropdown {
    position: absolute;
    top: 100%;
    min-width: 230px;
    background-color: var( --background-color-body);
    z-index: 3;
    opacity: 0;
    visibility: hidden;
    border-radius: 5px;
    -webkit-animation-name: DropDownSlide;
    animation-name: DropDownSlide;
    -webkit-animation-duration: .3s;
    animation-duration: .3s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    box-shadow: 0px 0px 10px rgba(51, 51, 51, 0.15);
}
.mainwrap ul.main-menu li.menu-link:hover .menu-dropdown {
    opacity: 1;
    visibility: visible;
}
.mainwrap ul.main-menu li.menu-link:hover .menu-dropdown.collapse:not(.show) {
    display: block;
}
@media (max-width: 1199px) {
    .mainwrap ul.main-menu {
        flex-direction: column;
    }
    .mainwrap ul.main-menu li.menu-link {
        border-top: 1px solid #e2e2e2;
    }
    .mainwrap ul.main-menu li.menu-link a.link-title {
        display: none;
        font-size: 14px;
        padding: 10px 0px;
        font-weight: 500;
    }
    .mainwrap ul.main-menu li.menu-link a.link-title.link-title-lg {
        display: flex;
        justify-content: space-between;
    }
    .mainwrap ul.main-menu li.menu-link a.link-title.link-title-lg,
    .mainwrap ul.main-menu li.menu-link a.link-title.link-title-lg[aria-expanded=false] {
        color: var(--font-color-body);
        background-color: var( --background-color-body);
    }
    .mainwrap ul.main-menu li.menu-link a.link-title.link-title-lg[aria-expanded=true] {
        color: var(--font-color-header);
    }
    .mainwrap ul.main-menu li.menu-link a.link-title.link-title-lg[aria-expanded=true] span.menu-arrow i {
        -webkit-transform: rotate(270deg);
        -o-transform: rotate(270deg);
        transform: rotate(270deg);
    }
    .mainwrap ul.main-menu li.menu-link .menu-dropdown {
        position: unset;
        padding: 0;
        opacity: 1;
        visibility: visible;
        box-shadow: none;
    }
    .mainwrap ul.main-menu li.menu-link:hover .menu-dropdown.collapse:not(.show) {
        display: none;
    }
    .mainwrap ul.main-menu li.menu-link a.link-title::before {
        display: none;
    }
}

/*shop-megamenu css*/
.mainwrap ul.main-menu li.menu-link .menu-dropdown ul.ul li.menu-li .shop-title a {
    display: block;
    color: var(--font-color-body);
    font-size: 16px;
    width: 100%;
    padding: 15px 15px 0;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    font-weight: 600;
}
.mainwrap ul.main-menu li.menu-link .menu-dropdown ul.ul li.menu-li .shop-title a:hover {
    color: var(--font-color-header);
}
@media (max-width: 1199px) {
    .mainwrap ul.main-menu li.menu-link .menu-dropdown ul.ul li.menu-li .shop-title a {
        font-size: 14px;
        padding: 15px 15px 0px 25px;
    }
    .mainwrap ul.main-menu li.menu-link .menu-dropdown ul.ul li.menu-li .shop-title:last-child a {
        padding: 15px 15px 15px 25px;
    }
}
.mainwrap ul.main-menu li.menu-link .menu-dropdown.single-menu {
    left: auto;
    min-width: 175px;
    padding: 0px;
}
.mainwrap ul.main-menu li.menu-link .menu-dropdown.single-menu li.singlemenu-li a.singlelink-title {
    display: block;
    color: var(--font-color-body);
    font-size: 14px;
    width: 100%;
    padding: 10px 15px;
    background-color: var( --background-color-body);
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}
.mainwrap ul.main-menu li.menu-link .menu-dropdown.single-menu li.singlemenu-li:hover a.singlelink-title {
    color: var(--font-color-header);
    background-color: #f9f9f9;
}
.mainwrap ul.main-menu li.menu-link .menu-dropdown.single-menu li.singlemenu-li a.singlelink-title span.sp-link-title {
    position: relative;
}
@media (max-width: 1199px) {
    .mainwrap ul.main-menu li.menu-link .menu-dropdown.single-menu {
        min-width: 100%;
    }
    .mainwrap ul.main-menu li.menu-link .menu-dropdown.single-menu li.singlemenu-li {
        border-top: 1px solid #e2e2e2;
    }
    .mainwrap ul.main-menu li.menu-link .menu-dropdown.single-menu li.singlemenu-li a.singlelink-title {
        padding: 10px 15px 10px 25px;
    }
    .mainwrap ul.main-menu li.menu-link a.link-title.link-title-lg[aria-expanded=true] {
        color: var(--font-color-header);
    }
}

/*shop-submega menu css*/
.mainwrap ul.main-menu li.menu-link .menu-dropdown.shop-menu {
    left: 0px;
    right: 0px;
    margin: 0px auto;
}
.mainwrap ul.main-menu li.menu-link .menu-dropdown.shop-menu ul.ul {
    display: flex;
    flex-wrap: wrap;
}
.mainwrap ul.main-menu li.menu-link .menu-dropdown.shop-menu ul.ul li.shoplink-li {
    width: 100%;
    border-bottom: 1px solid #e2e2e2;
}
.mainwrap ul.main-menu li.menu-link .menu-dropdown.shop-menu ul.ul li.shoplink-li:last-child {
    border-bottom: none;
}
.mainwrap ul.main-menu li.menu-link .menu-dropdown.shop-menu ul.ul li.shoplink-li a.shoplink-title {
    display: flex;
    justify-content: space-between;
    position: relative;
    color: var(--font-color-body);
    font-size: 16px;
    width: 100%;
    padding: 10px 20px 10px 10px;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    font-weight: 500;
}
.mainwrap ul.main-menu li.menu-link .menu-dropdown.shop-menu ul.ul li.shoplink-li a.shoplink-title span.menu-arrow {
    margin-left: auto;
} 
.mainwrap ul.main-menu li.menu-link .menu-dropdown.shop-menu ul.ul li.shoplink-li a.shoplink-title span {
    display: inline-block;
    position: relative;
}
.mainwrap ul.main-menu li.menu-link .menu-dropdown.shop-menu ul.ul li.shoplink-li a.shoplink-title span.sp-link-title::before {
    content: "";
    position: absolute;
    width: 0;
    height: 5px;
    opacity: 0;
    background-color: #e3e1ff;
    border-radius: 2.5px;
    left: 0;
    right: 0;
    bottom: 0px;
    z-index: -1;
    -webkit-transition: all 0.3s ease-in-out 0s;
    -o-transition: all 0.3s ease-in-out 0s;
    transition: all 0.3s ease-in-out 0s;
}
.mainwrap ul.main-menu li.menu-link .menu-dropdown.shop-menu ul.ul li.shoplink-li a.shoplink-title span.sp-link-title::before {
    right: 0px;
}
.mainwrap ul.main-menu li.menu-link .menu-dropdown.shop-menu ul.ul li.shoplink-li:hover a.shoplink-title span.sp-link-title::before {
    opacity: 1;
    width: 100%;
    z-index: 1;
}
.mainwrap ul.main-menu li.menu-link .menu-dropdown.shop-menu ul.ul li.shoplink-li a.shoplink-title.shoplink-title-lg {
    display: none;
}
.mainwrap ul.main-menu li.menu-link .menu-dropdown.shop-menu ul.ul li.shoplink-li a.shoplink-title:hover {
    color: var(--font-color-header);
}
.mainwrap ul.main-menu li.menu-link .menu-dropdown.shop-menu ul.ul li.shoplink-li ul.shopsupmenu-dropdown.collapse:not(.show) {
    display: block;
}
.mainwrap ul.main-menu li.menu-link .menu-dropdown.shop-menu ul.ul li.shoplink-li ul.shopsupmenu-dropdown li.shopsupmenu-li a.shopsuplink-title {
    display: block;
    color: var(--font-color-body);
    font-size: 14px;
    width: 100%;
    padding: 10px 15px;
    background-color: var( --background-color-body);
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}
.mainwrap ul.main-menu li.menu-link .menu-dropdown.shop-menu ul.ul li.shoplink-li ul.shopsupmenu-dropdown li.shopsupmenu-li:hover a.shopsuplink-title {
    color: var(--font-color-header);
    background-color: #f9f9f9;
}
.mainwrap ul.main-menu li.menu-link .menu-dropdown.shop-menu ul.ul li.shoplink-li ul.shopsupmenu-dropdown li.shopsupmenu-li a.shopsuplink-title span.sp-link-title {
    position: relative;
}
.mainwrap ul.main-menu li.menu-link .menu-dropdown.shop-menu ul.ul li.shoplink-li .shop-banner a {
    display: block;
    padding: 15px;
}
@media (max-width: 1199px) {
    .mainwrap ul.main-menu li.menu-link .menu-dropdown.shop-menu ul.ul li.shoplink-li:first-child {
        border-top: 1px solid #e2e2e2;
    }
    .mainwrap ul.main-menu li.menu-link .menu-dropdown.shop-menu ul.ul li.shoplink-li {
        width: 100%;
    }
    .mainwrap ul.main-menu li.menu-link .menu-dropdown.shop-menu ul.ul li.shoplink-li a.shoplink-title {
        display: none;
        font-size: 14px;
        padding-left: 10px;
        font-weight: 400;
    }
    .mainwrap ul.main-menu li.menu-link .menu-dropdown.shop-menu ul.ul li.shoplink-li a.shoplink-title.shoplink-title-lg {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 10px 40px;
    }
    .mainwrap ul.main-menu li.menu-link .menu-dropdown.shop-menu ul.ul li.shoplink-li ul.shopsupmenu-dropdown.collapse:not(.show) {
        display: none;
    }
    .mainwrap ul.main-menu li.menu-link .menu-dropdown.shop-menu ul.ul li.shoplink-li ul.shopsupmenu-dropdown li.shopsupmenu-li {
        border-top: 1px solid #e2e2e2;
    }
    .mainwrap ul.main-menu li.menu-link .menu-dropdown.shop-menu ul.ul li.shoplink-li ul.shopsupmenu-dropdown li.shopsupmenu-li a.shopsuplink-title {
        padding: 10px 15px 10px 35px;
    }
    .mainwrap ul.main-menu li.menu-link .menu-dropdown.shop-menu ul.ul li.shoplink-li .shop-banner a {
        padding: 15px 15px 15px 25px;
    }
    .mainwrap ul.main-menu li.menu-link .menu-dropdown.shop-menu ul.ul li.shoplink-li a.shoplink-title span.sp-link-title::before{
        display: none;
    }
}

/* sup-menu css */
.mainwrap ul.main-menu li.menu-link .menu-dropdown ul.ul li.shoplink-li ul.dropdown-supmenu {
    position: absolute;
    top: 0;
    left: 100%;
    width: 200px;
    z-index: 2;
    opacity: 0;
    visibility: hidden;
    background-color: #ffffff;
    border-radius: 5px;
    -webkit-animation-name: fadeIn;
    animation-name: fadeIn;      
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    -webkit-animation-delay: 0.3s;
    animation-delay: 0.3s;
    -webkit-animation-duration: 0.3s;
    animation-duration: 0.3s;
    box-shadow: 0px 0px 15px rgba(51, 51, 51, 0.15);
}
.mainwrap ul.main-menu li.menu-link .menu-dropdown ul.ul li.shoplink-li:hover ul.dropdown-supmenu {
    opacity: 1;
    visibility: visible;
}
.mainwrap ul.main-menu li.menu-link .menu-dropdown ul.ul li.shoplink-li:hover ul.dropdown-supmenu.collapse:not(.show) {
    display: block;
}
.mainwrap ul.main-menu li.menu-link .menu-dropdown ul.ul li.shoplink-li ul.dropdown-supmenu li.supmenu-li {
    padding: 0px 15px;
    border-bottom: 1px solid #e2e2e2;
}
.mainwrap ul.main-menu li.menu-link .menu-dropdown ul.ul li.shoplink-li ul.dropdown-supmenu li.supmenu-li:last-child {
    border-bottom: none;
}
.mainwrap ul.main-menu li.menu-link .menu-dropdown ul.ul li.shoplink-li ul.dropdown-supmenu li.supmenu-li a {
    color: var(--font-color-body);
    padding: 10px 15px;
}
.mainwrap ul.main-menu li.menu-link .menu-dropdown ul.ul li.shoplink-li ul.dropdown-supmenu li.supmenu-li:hover a {
    color: var(--font-color-header);
}

/*login-contact button css*/
.mainwrap ul.main-menu li.menu-link.login-button a.login-con {
    color: #00000a;
    font-weight: 600;
    padding: 8px 15px;
    text-align: center;
    text-transform: uppercase;
    border: 2px solid #e2e2e2;
    border-radius: 5px;
    margin-left: 30px;
}
.mainwrap ul.main-menu li.menu-link.login-button a:hover {
    border-style: solid;
    border-color: #6c63ff;
}
.mainwrap ul.main-menu li.menu-link.login-button a.login-con:hover {
    color: #ffffff;
    background-color: #6c63ff;
}
@media (max-width: 1199px) {
    .mainwrap ul.main-menu li.menu-link.login-button a.login-con {
        margin: 18px 0px 0px 15px;
    }
}

/*====================================
    slider css
=====================================*/
/* slider content css */
.slider-content {
    margin-top: 30px;
}

/* slider text-info css */
.slider-content .home-slider .slide-image .slider-text-info {
    width: calc(50% - 45px);
    position: absolute;
    bottom: 50%;
    transform: translateY(50%);
}
@media (max-width: 1199px) {
    .slider-content .home-slider .slide-image .slider-text-info {
        width: calc(55% - 30px);
    }
}
@media (max-width: 767px) {
    .slider-content .home-slider .slide-image img{
        height: 375px;
        object-fit: cover;
    }
    .slider-content .home-slider .slide-image .slider-text-info {
        width: calc(65% - 15px);
    }
}
@media (max-width: 479px) {
    .slider-content .home-slider .slide-image .slider-text-info {
        width: calc(70% - 15px);
    }
}
.slider-content .home-slider .slide-image .slider-text-info.slider-content-left {
    left: 45px;
    margin-right: auto;
}
.slider-content .home-slider .slide-image .slider-text-info.slider-content-right {
    right: 45px;
    margin-left: auto;
}
.slider-content .home-slider .slide-image .slider-text-info.slider-content-center {
    left: 45px;
    right: 45px;
    margin: 0px auto;
}
.slider-content .home-slider .slide-image .slider-text-info.slider-text-left {
    text-align: left;
}
.slider-content .home-slider .slide-image .slider-text-info.slider-text-right {
    text-align: right;
}
.slider-content .home-slider .slide-image .slider-text-info.slider-text-center {
    text-align: center;
}
@media (max-width: 1199px) {
    .slider-content .home-slider .slide-image .slider-text-info.slider-content-left {
        left: 30px;
    }
    .slider-content .home-slider .slide-image .slider-text-info.slider-content-right {
        right: 30px;
    }
    .slider-content .home-slider .slide-image .slider-text-info.slider-content-center {
        left: 30px;
        right: 30px;
    }
}
@media (max-width: 767px) {
    .slider-content .home-slider .slide-image .slider-text-info.slider-content-left {
        left: 15px;
    }
    .slider-content .home-slider .slide-image .slider-text-info.slider-content-right {
        right: 15px;
    }
    .slider-content .home-slider .slide-image .slider-text-info.slider-content-center {
        left: 15px;
        right: 15px;
    }
}

/* effect transition css */
.slider-content .home-slider .owl-item.active .slide-image .slider-text-info span.sub-title {
    -webkit-animation-delay: 1.0s;
    animation-delay: 1.0s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    -webkit-animation-duration: 1.0s;
    animation-duration: 1.0s;
}
.slider-content .home-slider .owl-item.active .slide-image .slider-text-info h2 {
    -webkit-animation-delay: 1.5s;
    animation-delay: 1.5s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    -webkit-animation-duration: 1.5s;
    animation-duration: 1.5s;
}
.slider-content .home-slider .owl-item.active .slide-image .slider-text-info a {
    -webkit-animation-delay: 2.0s;
    animation-delay: 2.0s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    -webkit-animation-duration: 2.0s;
    animation-duration: 2.0s;
}

/* effect style */
.slider-content .home-slider .owl-item.active .slide-image .slider-text-info span.e1,
.slider-content .home-slider .owl-item.active .slide-image .slider-text-info h2.e1,
.slider-content .home-slider .owl-item.active .slide-image .slider-text-info a.e1 {
    -webkit-animation-name: fadeInUp;
    animation-name: fadeInUp;
}
.slider-content .home-slider .owl-item.active .slide-image .slider-text-info span.e2,
.slider-content .home-slider .owl-item.active .slide-image .slider-text-info h2.e2,
.slider-content .home-slider .owl-item.active .slide-image .slider-text-info a.e2 {
    -webkit-animation-name: bounceInLeft;
    animation-name: bounceInLeft;
}
.slider-content .home-slider .owl-item.active .slide-image .slider-text-info span.e3,
.slider-content .home-slider .owl-item.active .slide-image .slider-text-info h2.e3,
.slider-content .home-slider .owl-item.active .slide-image .slider-text-info a.e3 {
    -webkit-animation-name: slideInRight;
    animation-name: slideInRight;
}
.slider-content .home-slider .owl-item.active .slide-image .slider-text-info span.e4,
.slider-content .home-slider .owl-item.active .slide-image .slider-text-info h2.e4,
.slider-content .home-slider .owl-item.active .slide-image .slider-text-info a.e4 {
    -webkit-animation-name: zoomIn;
    animation-name: zoomIn;
}
.slider-content .home-slider .owl-item.active .slide-image .slider-text-info span.e5,
.slider-content .home-slider .owl-item.active .slide-image .slider-text-info h2.e5,
.slider-content .home-slider .owl-item.active .slide-image .slider-text-info a.e5 {
    -webkit-animation-name: backInDown;
    animation-name: backInDown;
}
.slider-content .home-slider .slide-image .slider-text-info span.sub-title {
    color: var(--font-color-header);
    font-size: 16px;
    position: relative;
    margin-bottom: 34px;
    padding: 0px 15px;
    text-transform: uppercase;
    font-weight: 600;
}
.slider-content .home-slider .slide-image .slider-text-info span.sub-title::before,
.slider-content .home-slider .slide-image .slider-text-info span.sub-title::after {
    content: "";
    position: absolute;
    bottom: 50%;
    transform: translateY(50%);
    height: 2px;
    width: 10px;
    background-color: var(--font-color-header);
}
.slider-content .home-slider .slide-image .slider-text-info span.sub-title::before {
    left: 0px;
}
.slider-content .home-slider .slide-image .slider-text-info span.sub-title::after {
    right: 0px;
}
.slider-content .home-slider .slide-image .slider-text-info h2 {
    font-size: 60px;
}
.slider-content .home-slider .slide-image .slider-text-info h2 span {
    display: block;
}
.slider-content .home-slider .slide-image .slider-text-info a {
    margin-top: 42px;
}
@media (max-width: 1399px) {
    .slider-content .home-slider .slide-image .slider-text-info span.sub-title {
        margin-bottom: 24px;
    }
    .slider-content .home-slider .slide-image .slider-text-info h2 {
        font-size: 45px;
    }
    .slider-content .home-slider .slide-image .slider-text-info a {
        margin-top: 32px;
    }
}
@media (max-width: 1199px) {
    .slider-content .home-slider .slide-image .slider-text-info span.sub-title {
        margin-bottom: 14px;
    }
    .slider-content .home-slider .slide-image .slider-text-info h2 {
        font-size: 30px;
    }
    .slider-content .home-slider .slide-image .slider-text-info a {
        margin-top: 22px;
    }
}
@media (max-width: 479px) {
    .slider-content .home-slider .slide-image .slider-text-info span.sub-title {
        font-size: 14px;
        margin-bottom: 10px;
    }
    .slider-content .home-slider .slide-image .slider-text-info h2 {
        font-size: 14px;
    }
    .slider-content .home-slider .slide-image .slider-text-info a {
        margin-top: 18px;
    }
}

/* slider-arrow css */
.slider-content .home-slider.owl-carousel .owl-nav {
    margin-top: 0px;
}
.slider-content .home-slider.owl-carousel .owl-nav button {
    color: var(--font-color-header);
    font-size: 20px;
    position: absolute;
    bottom: 50%;
    transform: translateY(50%);
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var( --background-color-body);
    margin: 0px;
    opacity: 0;
    visibility: hidden;
    border: 1px solid #e2e2e2;
    border-radius: 0;
    line-height: 0;
}
.slider-content:hover .home-slider.owl-carousel .owl-nav button {
    opacity: 1;
    visibility: visible;
}
.slider-content .home-slider.owl-carousel .owl-nav button:hover {
    color: var( --background-color-body);
    background-color: transparent;
    border: 1px solid #e2e2e2;
}
.slider-content .home-slider.owl-carousel .owl-nav button.owl-prev {
    left: 0px;
}
.slider-content:hover .home-slider.owl-carousel .owl-nav button.owl-prev {
    left: 15px;
}
.slider-content .home-slider.owl-carousel .owl-nav button.owl-next {
    right: 0px;
}
.slider-content:hover .home-slider.owl-carousel .owl-nav button.owl-next {
    right: 15px;
}
@media (max-width: 1199px) {
    .slider-content .home-slider.owl-carousel .owl-nav {
        display: none;
    }
    .slider-content:hover .home-slider.owl-carousel .owl-nav button {
        opacity: 1;
        visibility: visible;
    }
    .slider-content .home-slider.owl-carousel .owl-nav button.owl-prev {
        left: 15px;
    }
    .slider-content .home-slider.owl-carousel .owl-nav button.owl-prev {
        right: 15px;
    }
}

/* slider-dot css */
.slider-content .home-slider.owl-carousel .owl-dots {
    display: flex;
    flex-direction: column;
    position: absolute;
    bottom: 30px;
    right: 30px;
    line-height: 0;
}
.slider-content .home-slider.owl-carousel .owl-dots button {
    display: block;
    margin-bottom: 5px;
}
.slider-content .home-slider.owl-carousel .owl-dots button:last-child {
    margin-bottom: 0px;
}
.slider-content .home-slider.owl-carousel .owl-dots button span {
    margin: 0;
    background-color: var(--font-color-header);
    border-radius: 0;
}
.slider-content .home-slider.owl-carousel .owl-dots button:hover span,
.slider-content .home-slider.owl-carousel .owl-dots button.active span {
    color: var(--font-color-header);
    background-color: var(--font-color-primary);
}

@media (max-width: 767px) {
    .slider-content .home-slider.owl-carousel .owl-dots {
        bottom: 12px;
        right: 12px;
    }
}

/*====================================
    aboust-us css
======================================*/
.about-area {
    padding-top: 100px;
    padding-bottom: 100px;
    background-color: #ffffff;
}
@media (max-width: 1199px) {
    .about-area {
        padding-top: 80px;
        padding-bottom: 80px;
    }
}
@media (max-width: 767px) {
    .about-area {
        padding-top: 60px;
        padding-bottom: 60px;
    }
}

/* about content css */
.about-area .about-us ul {
    display: flex;
    flex-wrap: wrap;
    margin: -30px 0px 0px -30px;
}
.about-area .about-us ul li {
    width: calc(50% - 30px);
    margin: 30px 0px 0px 30px;
    display: flex;
    align-items: center;
    justify-content: center;
}
@media (max-width: 767px) {
    .about-area .about-us ul {
        margin: -24px 0px 0px -12px;
    }
    .about-area .about-us ul li {
        width: calc(100% - 12px);
        margin: 24px 0px 0px 12px;
    }
}

/* img css */
.about-area .about-us ul li.about-company-us img {
    display: block;
}

/* about dec. css */
.about-area .about-us ul li.about-desc {
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.about-area .about-us ul li.about-desc .content-main-title .section-cont-title span.sub-title {
    color: #fb435f;
    font-size: 16px;
    font-weight: 600;
}
.about-area .about-us ul li.about-desc .content-main-title .section-cont-title h2 {
    margin-top: 15px;
}
.about-area .about-us ul li.about-desc .content-main-title .section-cont-title h2 span.blod-text {
    font-weight: 600;
}
.about-area .about-us ul li.about-desc .content-main-title .section-cont-title h2 span {
    display: block;
    font-weight: 300;
}
.about-area .about-us ul li.about-desc .content-main-title .description {
    margin-top: 35px;
}
.about-area .about-us ul li.about-desc .content-main-title .description .dec-wrap p {
    margin-top: 15px;
}

/* about btn css */
.about-area .about-us ul li.about-desc .content-main-title .about-btn {
    margin-top: 30px;
} 
@media (max-width: 767px) {
    .btn-style3 {
        font-size: 16px;
        padding: 14px 20px;
    }
}

/*====================================
    feature css 
=====================================*/
.feature-section {
    padding-top: 100px;
    padding-bottom: 100px;
    background-color: #f9fbfc;
}
@media (max-width: 1199px) {
    .feature-section {
        padding-top: 80px;
        padding-bottom: 80px;
    }
}
@media (max-width: 767px) {
    .feature-section {
        padding-top: 60px;
        padding-bottom: 60px;
    }
}
@media (max-width: 479px) {
    .feature-section {
        padding-top: 40px;
        padding-bottom: 40px;
    }
}

/* feature title css */
.feature-section .section-heading h2 span.title {
    font-size: 40px;
    font-weight: bold;
}
.feature-section .section-heading h2 span {
    font-weight: 300;
}
.feature-section .section-heading .description {
    font-size: 16px;
    margin-top: 24px;
    margin-bottom: 50px;
    line-height: 1.5;
}
.feature-section .push-lg-4 {
    left: 33.33333%;
    position: relative;
}
.feature-section .pull-lg-6{
    right: 50%;
    position: relative;
}
@media (max-width: 767px) {
    .feature-section .push-lg-4 {
        left: 0%;
        position: unset;
    }
    .feature-section .pull-lg-6 {
        right: 0%;
        position: unset;
    }
}

/*====================================
    serivce css
====================================*/
.home-service {

}
.home-service .service-main {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    margin-left: -30px;
}
.home-service .service-main ul.service-ul {
    margin-left: 30px;
    text-align: center;
}
.home-service .service-main ul.service-ul.service-1,
.home-service .service-main ul.service-ul.service-3 {
    width: calc(35% - 30px);
}
.home-service .service-main ul.service-ul.service-2 {
    width: calc(30% - 30px);
}
.home-service .service-main ul.service-ul {
    margin-top: -50px;
}
.home-service .service-main ul.service-ul li.service-li {
    margin-top: 50px;
}
.home-service .service-main ul.service-ul li.service-li .service-text h4.title {
    font-size: 16px;
    margin-top: 10px;
    font-weight: 700;
    text-decoration: none;
}
.home-service .service-main ul.service-ul li.service-li .service-text p {
    margin-top: 10px;
}
@media (max-width: 991px) {
    .home-service .service-main {
        margin-left: 0px;
    }
    .home-service .service-main ul.service-ul {
        margin-left: 0px;
    }
    .home-service .service-main ul.service-ul.service-2,
    .home-service .service-main ul.service-ul.service-1,
    .home-service .service-main ul.service-ul.service-3 {
        width: calc(100% - 0px);
    }
}


/*====================================
    our-serivce css
====================================*/
.ourservices {
    padding-top: 100px;
    padding-bottom: 100px;
    background-color: #ffffff;
}
@media (max-width: 1199px) {
    .ourservices {
        padding-top: 80px;
        padding-bottom: 80px;
    }
}
@media (max-width: 767px) {
    .ourservices {
        padding-top: 60px;
        padding-bottom: 60px;
    }
}
@media (max-width: 479px) {
    .ourservices {
        padding-top: 40px;
        padding-bottom: 40px;
    }
}
.ourservices .section-heading-center {
    margin-left: auto;
    margin-right: auto;
    max-width: 600px;
    text-align: center;
}
.ourservices .section-heading h2 span.title {
    font-size: 34px;
    font-weight: 600;
}
.ourservices .section-heading h2 span {
    display: block;
    font-weight: 300;
}
.ourservices .section-heading .description {
    font-size: 16px;
    margin-top: 22px;
    line-height: 1.5;
}
.ourservices .screens-app {
    padding-top: 80px;
}
.ourservices .screens-app .item.text-center {
    width: 100%;
    display: inline-block;
}
.ourservices .screens-app .slick-list .slick-track .item.text-center {
    height: 100%;
}
.ourservices .item.item-shadow, 
.ourservices .screens-app .item {
    padding-top: 50px;
    background-color: #ffffff;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);
}
.ourservices .projects--s4 .item .image, 
.ourservices .screens-app .item .image {
    max-width: 300px;
    margin: 0px auto;
}
@media (max-width: 479px) {
    .ourservices .screens-app {
        padding-top: 40px;
    }
}
.wpb_single_image.vc_align_center {
    text-align: center;
}
.vc_custom {
    margin-bottom: 50px !important;
}
.wpb_single_image .vc_figure {
    display: inline-block;
    vertical-align: top;
    margin: 0px;
    max-width: 100%;
}
.wpb_single_image .vc_single_image-wrapper {
    display: inline-block;
    vertical-align: top;
    max-width: 100%;
}
.ourservices .projects .item .image img, 
.ourservices .screens-app .item .image img {
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%;
}

/* title css */
.nt-ch.nt-custom-heading {
    color: #333333;
}
.ourservices .screens-app .item p.vc_custom_heading {
    padding: 20px 20px 40px;
}

.screens-app .pro-slider .slider-small .slick-list .slick-slide {
    margin: 0px 10px;
    line-height: 0;
}
.screens-app .pro-slider .slider-small .slick-list.draggable {
    padding-top: 10px;
    padding-bottom: 10px;
}

/* our-service slick-slider dots css */
.ourservices .screens-app .pro-slider .slider-small ul.slick-dots {
    margin-top: 45px;
    text-align: center;
    line-height: 0;
}
.ourservices .screens-app .pro-slider .slider-small ul.slick-dots li {
    display: inline-flex;
    margin-right: 5px;
}
.ourservices .screens-app .pro-slider .slider-small ul.slick-dots li:last-child {
    margin-right: 0px;
}
.ourservices .screens-app .pro-slider .slider-small ul.slick-dots li button {
    text-indent: -9999px;
    width: 10px;
    height: 10px;
    background-color: transparent;
    border: 1px solid #145495;
    border-radius: 100%;
}
.ourservices .screens-app .pro-slider .slider-small ul.slick-dots li.slick-active button {
    background-color: #145495;
    border: 1px solid #145495;
}

/*====================================
    features4 css
====================================*/
.features4 {
    padding-top: 100px;
    padding-bottom: 100px;
    border-top: 1px solid #e2e2e2;
}
@media (max-width: 1199px) {
    .features4 {
        padding-top: 80px;
        padding-bottom: 80px;
    }
}
@media (max-width: 767px) {
    .features4 {
        padding-top: 60px;
        padding-bottom: 60px;
    }
}
@media (max-width: 479px) {
    .features4 {
        padding-top: 40px;
        padding-bottom: 40px;
    }
}

/* title css */
.features4 .section-heading-center {
    margin-left: auto;
    margin-right: auto;
    max-width: 600px;
    text-align: center;
}

.features4 .section-heading-center h2 span.title {
    font-weight: 600;
}
.features4 .section-heading-center h2 span {
    display: block;
    font-weight: 300;
}
.features4 .section-heading .description {
    margin-top: 20px;
    margin-bottom: 0px;
    line-height: 1.5;
}

/*content css*/
.vc-custom {
    margin-top: 60px;
} 
.features-parent-box .services-s3 .item {
    text-align: center;
}
.services-s3 .item {
    margin-bottom: 50px;
}
.features-parent-box .services-s3 .icon {
    display: block;
    line-height: 1;
}
.features-parent-box h4.title {
    margin-bottom: 15px;
}

/*====================================
    banner css
====================================*/
.banner-nt-section {
    background-image: url(../img/banner/our_vision_bg.jpg);
    padding-top: 100px;
    padding-bottom: 100px;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    height: 490px;
}
@media (max-width: 1199px) {
    .banner-nt-section {
        padding-top: 80px;
        padding-bottom: 80px;
    }
}
@media (max-width: 767px) {
    .banner-nt-section {
        padding-top: 60px;
        padding-bottom: 60px;
    }
}

/* banner-title css */
.banner-nt-section .section-heading-white h6.subtitle {
    color: #ffffff;
}
.banner-nt-section h2.title {
    color: #ffffff;
}
.banner-nt-section span.blod-text {
    font-weight: 600;
}
.banner-nt-section span {
    font-weight: 300;
}

/* gallery img css */
.wpb_gallery {
    margin-top: 30px;
}
.wpb_image_grid_ul {
    position: relative;
    height: 79px;
    display: flex;
    flex-wrap: wrap;
}
.wpb_image_grid .wpb_image_grid_ul img {
    display: block;
    max-width: 100%;
    height: auto;
}
.technology-grid ul.wpb_image_grid_ul li.isotope-item, .technology-grid ul.wpb_image_grid_ul li.isotope-item:first-child {
    padding: 0px 4px 8px;
}
.technology-grid ul.wpb_image_grid_ul li.isotope-item img.attachment-full {
    width: 70px;
}

/*====================================
    industries css
====================================*/
.industries {
    padding-top: 100px;
    padding-bottom: 100px;
    background-color: #ffffff;
}
@media (max-width: 1199px) {
    .industries {
        padding-top: 80px;
        padding-bottom: 80px;
    }
}
@media (max-width: 767px) {
    .industries {
        padding-top: 60px;
        padding-bottom: 60px;
    }
}      

/* title css */
.industries .title h2 {
    font-size: 30px;
    color: #333333;
    text-align: center;
    font-weight: 700;
    position: relative;
}
.industries .title h2::before {
    content: "";
    background-image: url(../img/indsutries/line.svg);
    background-repeat: no-repeat;
    width: 190px;
    background-size: cover;
    height: 21px;
    position: absolute;
    bottom: -40px;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 2;
}
.industries .item {
    margin: 10px 15px;
}
@media (max-width: 1199px) {
    .industries .title h2 {
        font-size: 18px;
    }
}

/* button css */
.technology .industries .b button {
    display: inline-block;
    position: relative;
    background: none;
    border: none;
    color: #fff;
    font-size: 18px;
    cursor: default;
    padding: 4px 0px 0px 0px;
    width: 100%;
    margin-top: 15px;
    margin-bottom: 15px;
}
.technology .industries .b span {
    display: block;
    padding: 30px;
}
.technology span {
    background: #ffffff;
    border: 0;
    box-sizing: border-box;
    position: relative;
    vertical-align: middle;
    padding: 20px;
    box-shadow: 0px 0 25px 0 rgb(0 0 0 / 5%);
    display: block;
    transition: all 0.3s;
}
.technology .tech-box p {
    font-size: 19px;
    font-weight: 600;
    color: #656665;
    padding: 0px;
}
.sol .b button::before, 
.sol .b button::after {
    content: "";
    width: 0;
    height: 0px;
    position: absolute;
    transition: all 0.2s linear;
    background: #028fcc;
}

/*====================================
    project-count css
====================================*/
/* project-count area css */
.project-count-area {
    padding-top: 0px;
    padding-bottom: 0px;
    background-color: #ffffff;
}
@media (max-width: 1199px) {
    .project-count-area {
        padding-top: 0px;
        padding-bottom: 0px;
    }
}
@media (max-width: 767px) {
    .project-count-area {
        padding-top: 0px;
        padding-bottom: 0px;
    }
}
/* counter grid css */
.project-count-area .single-count ul {
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}
.project-count-area .single-count ul li.count-wrap {
    width: 25%;
    padding: 30px;
}
@media (max-width: 991px) {
    .project-count-area .single-count ul li.count-wrap {
        width: 50%;
    }
}
@media (max-width: 767px) {
    .project-count-area .single-count ul li.count-wrap {
        padding: 30px 15px;
    }
}
@media (max-width: 479px) {
    .project-count-area .single-count ul li.count-wrap {
        width: 100%;
    }
}

/* counter content css */
.project-count-area .single-count ul li.count-wrap .count-info {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}
.project-count-area .single-count ul li.count-wrap .count-info h2 {
    color: #6c63ff;
    font-size: 30px;
    display: inline-flex;
}
.project-count-area .single-count ul li.count-wrap .count-info a {
    color: #6c63ff;
    width: 90px;
    height: 90px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 21px;
    border: 1px solid transparent;
    border-radius: 100%;
    box-shadow: 0px 0px 10px rgba(51, 51, 51, 0.15);
    overflow: hidden;
    line-height: 0;
    webkit-transition: all 0s ease-in-out 0s;
    -o-transition: all 0s ease-in-out 0s;
    transition: all 0s ease-in-out 0s;
}
.project-count-area .single-count ul li.count-wrap .count-info a span.count-icon {
    font-size: 30px;
    line-height: 0;
}
.project-count-area .single-count ul li.count-wrap .count-info a span.count-icon i {
    display: block;
    line-height: 0;
} 
.project-count-area .single-count ul li.count-wrap .count-info span.count-title {
    font-size: 24px;
    margin-top: 24px;
    font-weight: 600;
}

/*====================================
    contact css
====================================*/
.form-contact-2 {
    padding-top: 100px;
    padding-bottom: 100px;
    background-color: #ffffff;
}
@media (max-width: 1199px) {
    .form-contact-2 {
        padding-top: 80px;
        padding-bottom: 80px;
    }
}
@media (max-width: 767px) {
    .form-contact-2 {
        padding-top: 60px;
        padding-bottom: 60px;
    }
}

/* title css */
.form-contact-2 .content-main-title {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}
.form-contact-2 .content-main-title .section-cont-title {
    margin-bottom: 20px;
}
.form-contact-2 .content-main-title p {
    max-width: 100%;
}

/* aboust-contact css */
.about-contact ul {
    flex-direction: row-reverse;
}
.about-contact ul {
    display: flex;
    flex-wrap: wrap;
    margin: -30px 0px 0px -30px;
}
.about-contact ul li {
    width: calc(50% - 30px);
    margin: 30px 0px 0px 30px;
}
.about-contact ul li.about-company{
    text-align: center;
}
@media (max-width: 1199px) {}
@media (max-width: 991px) {}
@media (max-width: 767px) {
    .about-contact ul {
        margin: -24px 0px 0px -12px;
    }
    .about-contact ul li {
        width: calc(100% - 12px);
        margin: 24px 0px 0px 12px;
    }
}


/* contact form css */
.form-contact-2 .form-warp {
    max-width: 100%;
    margin-top: 30px;
}
@media (max-width: 1199px) {
    .form-contact-2 .form-warp {
        max-width: 100%;
    }
}
@media (max-width: 991px) {
    .form-contact-2 .form-warp {
        max-width: 100%;
    }
}

/* input-fill css */
ul.form-fill {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    margin: -25px 0px 0px -30px;
}
ul.form-fill li.Name, 
ul.form-fill li.Email {
    width: calc(50% - 30px);
}
ul.form-fill li {
    width: calc(100% - 30px);
    margin: 25px 0px 0px 30px;
}
ul.form-fill li label {
    display: block;
    color: #333333;
    cursor: auto;
    margin-bottom: 11px;
}
ul.form-fill li input, 
ul.form-fill li textarea {
    display: block;
    width: 100%;
}
textarea {
    display: block;
    resize: none;
}
@media (max-width: 767px) { 
    ul.form-fill li.Name, 
    ul.form-fill li.Email {
        width: calc(100% - 12px);
    }
}
.contact-submit {
    margin-top: 30px;
}

/*====================================
    footer-top css
====================================*/
.footer-top-area {
    padding-top: 100px;
    padding-bottom: 100px;
    background-color: #f9f9f9;
}
@media (max-width: 1199px) {
    .footer-top-area {
        padding-top: 80px;
        padding-bottom: 80px;
    }
}
@media (max-width: 767px) {
    .footer-top-area {
        padding-top: 60px;
        padding-bottom: 60px;
    }
}

/* footer-list css */
.footer-list-wrap{
    margin-top: 30px;
    padding-top: 30px;
}
.footer-list-wrap ul.footer-list {
    display: flex;
    flex-wrap: wrap;
    margin: -30px 0px 0px -30px;
}
.footer-list-wrap ul.footer-list li.ftlink-li {
    width: calc(20% - 30px);
    margin: 30px 0px 0px 30px;
}
.footer-list-wrap ul.footer-list li.ftlink-li .ft-title {
    font-size: 18px;
    font-weight: 600;
    line-height: 1;
}
.footer-list-wrap ul.footer-list li.ftlink-li ul.footer-sublist li.ftsublink-li {
    margin-top: 12px;
}
.footer-list-wrap ul.footer-list li.ftlink-li ul.footer-sublist li.ftsublink-li:first-child {
    margin-top: 31px;
}
.footer-list-wrap ul.footer-list li.ftlink-li ul.footer-sublist li.ftsublink-li a {
    display: block;
    color: #6f6f6f;
    position: relative;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}
.footer-list-wrap ul.footer-list li.ftlink-li ul.footer-sublist li.ftsublink-li a:hover {
    color: #6c63ff;
}

/* logo css */
a.theme-footer-logo {
    display: block;
}
  
/* store css */
a.shop-footer-name {
    display: block;
}
a.shop-footer-name span {
    color: var(--font-color-header);
    font-size: 16px;
    font-weight: 600;
}

/* footer info css */
.footer-list-wrap ul.footer-list li.ftlink-li .footer-info {
    margin-top: 23px;
}

/* footer-contact css */
.footer-list-wrap ul.footer-list li.ftlink-li ul.footer-sublist li.ftcon-li {
    display: flex;
    align-items: center;
    margin-top: 12px;
}
.footer-list-wrap ul.footer-list li.ftlink-li ul.footer-sublist li.ftcon-li.ftcon-li-add {
    align-items: baseline;
}
.footer-list-wrap ul.footer-list li.ftlink-li ul.footer-sublist li.ftcon-li:first-child {
    margin-top: 35px;
}
.footer-list-wrap ul.footer-list li.ftlink-li ul.footer-sublist li.ftcon-li span.con-icon {
    color: #333333;
    font-size: 16px;
    width: 30px;
}
.footer-list-wrap ul.footer-list li.ftlink-li ul.footer-sublist li.ftcon-li span.con-icon i {
    display: block;
    line-height: 0;
}
.footer-list-wrap ul.footer-list li.ftlink-li ul.footer-sublist li.ftcon-li span.con-add,
.footer-list-wrap ul.footer-list li.ftlink-li ul.footer-sublist li.ftcon-li a.con-add {
    color: #333333;
}
.footer-list-wrap ul.footer-list li.ftlink-li ul.footer-sublist li.ftcon-li a.con-add:hover {
    color: #6c63ff;
}
.footer-list-wrap ul.footer-list li.ftlink-li ul.footer-sublist li.ftcon-li span.con-add span {
    display: block;
    margin-top: 12px;
}
.footer-list-wrap ul.footer-list li.ftlink-li ul.footer-sublist li.ftcon-li span.con-add span:first-child {
    margin-top: 0;
}
@media (max-width: 991px) {
    .footer-list-wrap ul.footer-list li.ftlink-li{
        width: calc(50% - 30px);
    }
}
@media (max-width: 767px) {
    .footer-list-wrap{
        border-top: none;
    }
    .footer-list-wrap ul.footer-list {
        margin: -30px 0px 0px -15px;
    }
    .footer-list-wrap ul.footer-list li.ftlink-li {
        width: calc(50% - 15px);
        margin: 30px 0px 0px 15px;
    }
}
@media (max-width: 479px) {
    .footer-list-wrap ul.footer-list{
        margin: -25px 0px 0px -15px;
    }
    .footer-list-wrap ul.footer-list li.ftlink-li {
        width: calc(100% - 15px);
        margin: 25px 0px 0px 15px;
    }
}

/*====================================
    footer-bottom css
====================================*/
.footer-bottom-area {
    padding-top: 15px;
    padding-bottom: 15px;
    background-color: #ffffff;
}
@media (max-width: 1199px){
    .footer-bottom-area {
        padding-top: 15px;
        padding-bottom: 15px;    }
}
@media (max-width: 767px){
    .footer-bottom-area {
        padding-top: 15px;
        padding-bottom: 15px;
    }
}
.footer-bottom-area ul.ft-bottom li.copy-right p {
    text-align: center;
}

/*====================================
    button-toggler css
====================================*/
button.toggler-button {
    display: none;
}   
@media (max-width:1199px) {
    button.toggler-button {
        display: block;
    }
    button.toggler-button span {
        position: relative;
    }
    button.toggler-button span::before,
    button.toggler-button span::after {
        content: "";
        position: absolute;
    }
    button.toggler-button span,
    button.toggler-button span::before,
    button.toggler-button span::after {
        display: block;
        width: 26px;
        height: 2px;
        background-color: #6c63ff;
    }
    button.toggler-button span::before {
        top: -7px;
    }
    button.toggler-button span::after {
        top: 7px;
    }
}

/* header-bottom css */
.header-bottom-area {
    position: relative;
}
.header-bottom-area .header-container {
    position: static;
}

/*====================================
    desktop-menu css
====================================*/
@media (max-width:1199px) {
    .header-area .mega-menu-area {
        display: none;
    }
}
/*====================================
    mobile-menu css
====================================*/
.mobile-menu {
    display: none;
}
@media (max-width: 1199px) {
    .mobile-menu {
        display: block;
        position: fixed;
        top: 0px;
        left: -300px;
        width: 300px;
        height: 100%;
        background-color: var( --background-color-body);
        transform: translateX(-100%);
        z-index: 3;
        box-shadow: 0px 0px 10px rgba(51, 51, 51, 0.15);
        overflow: auto;
    }
    .mobile-menu.active {
        left: 300px;
    }
    .mobile-menu,
    .mobile-menu.active {
        -webkit-transition: all 0.3s ease-in-out 0s;
        -o-transition: all 0.3s ease-in-out 0s;
        transition: all 0.3s ease-in-out 0s;
    }
    .mobile-menu .close-menu {
        width: 100%;
        padding: 10px 15px;
        position: sticky;
        top: 0;
        z-index: 1;
        background-color: var( --background-color-body);
        text-align: right;
    }
    .mobile-menu .close-menu button.close-button {
        line-height: 0;
    }
}

/*====================================
    social-icon css
====================================*/
ul.social-icon {
    display: flex;
    flex-wrap: wrap;
    margin: -15px 0px 0px -15px;
    margin-top: 20px;
}
ul.social-icon li {
    margin: 15px 0px 0px 15px;
}
ul.social-icon li a span.facebook {
    color: #0E63FF;
}
ul.social-icon li a span.twitter {
    color: #1DA1F2;
}
ul.social-icon li a span.instagram {
    color: #8a3ab9;
}
ul.social-icon li a span.skype {
    color: #00aff0 ;
}
@media (max-width: 767px) {
    ul.social-icon li {
        margin-right: 15px;
    }
}

/*====================================
   footer-payament css
====================================*/
.payment-icon {
    display: flex;
    flex-wrap: wrap;
    margin: -5px 0px 0px -5px;
}
.payment-icon svg,
.payment-icon img {
    margin: 5px 0px 0px 5px;
}

/*====================================
    sticky-header css
====================================*/
.header-area.is-sticky {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 2;
    border-bottom: none;
    padding: 15px;
    animation: smoothScroll 1s forwards;
    box-shadow: 0px 0px 10px rgba(51, 51, 51, 0.15);
}
@keyframes smoothScroll {
    0% {
        transform: translateY(-100%);
    }
    100% {
        transform: translateY(0px);
    }
  }

/*====================================
   animation css
=====================================*/
@-webkit-keyframes DropDownSlide {
    to {
        -webkit-transform: translateY(0);
        -moz-transform: translateY(0);
        transform: translateY(0);
    }
    0% {
        -webkit-transform: translateY(10px);
        -moz-transform: translateY(10px);
        transform: translateY(10px);
    }
}

@-moz-keyframes DropDownSlide {
    to {
        -webkit-transform: translateY(0);
        -moz-transform: translateY(0);
        transform: translateY(0);
    }
    0% {
        -webkit-transform: translateY(10px);
        -moz-transform: translateY(10px);
        transform: translateY(10px);
    }
}

@keyframes DropDownSlide {
    to {
        -webkit-transform: translateY(0);
        -moz-transform: translateY(0);
        transform: translateY(0);
    }
    0% {
        -webkit-transform: translateY(10px);
        -moz-transform: translateY(10px);
        transform: translateY(10px);
    };
}




/*====================================
    screen-bg css
=====================================*/
.screen-bg {
    position: fixed;
    top: 0px;
    bottom: 0px;
    left: 0px;
    right: 0px;
    background-color: rgba(0, 0, 0, 0.6);
    z-index: 2;
    opacity: 0;
    visibility: hidden;
}
.screen-bg.active {
    opacity: 1;
    visibility: visible;
}
.screen-bg,
.screen-bg.active {
    -webkit-transition: all 0.3s ease-in-out 0s;
    -o-transition: all 0.3s ease-in-out 0s;
    transition: all 0.3s ease-in-out 0s;
}

/*====================================
    product-timer css
=====================================*/
.product-timer ul.timer-section {
    display: flex;
    width: 250px;
    margin: 26px 0px 15px;
}
.product-timer ul.timer-section li.timer-count {
    width: 25%;
    padding: 10px 15px;
    text-align: center;
}
.product-timer ul.timer-section li.timer-count:nth-child(odd) {
    background-color: #f9f9f9;
}
.product-timer ul.timer-section li.timer-count:nth-child(even) {
    background-color: var( --background-color-body);
}
.product-timer ul.timer-section li.timer-count span {
    display: block;
    line-height: 1;
}
.product-timer ul.timer-section li.timer-count span.timer-text {
    color: var(--font-color-header);
    font-size: 16px;
    font-weight: 600;
}
.product-timer ul.timer-section li.timer-count span.small-text {
    color: var(--font-color-body);
    font-size: 13px;
    margin-top: 10px;
}
@media (max-width: 767px) {
    .product-timer ul.timer-section {
        width: 100%;
    }
}

/*====================================
    preloader css
=====================================*/
.preloader {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: #ffffff;
    z-index: 999999;
}   
.preloader-animate {
    border: 0 soild transparent;
    border-radius: 50%;
    width: 100px;
    height: 100px;
    position: absolute;
    top: calc(50vh - 75px);
    left: calc(50vw - 75px);
}
.preloader-animate::before {
    content: '';
    border: 1em solid #6c63ff;
    border-radius: 50%;
    width: inherit;
    height: inherit;
    position: absolute;
    top: 0;
    left: 0;
    animation: loader 2s linear infinite;
    opacity: 0;
}
.preloader-animate::before{
    animation-delay: .5s;
}
@keyframes loader{
    0%{
        transform: scale(0);
        opacity: 0;
    }
    50%{
        opacity: 1;
    }
    100%{
        transform: scale(1);
        opacity: 0;
    }
}

/*====================================
    back-to-top css
=====================================*/
a#top {
    position: fixed;
    bottom: 30px;
    right: 30px;
    z-index: 2;
    opacity: 0;
    visibility: hidden;
    -webkit-transition: all 0s ease-in-out 0s;
    -o-transition: all 0s ease-in-out 0s;
    transition: all 0s ease-in-out 0s;
}
a#top.show {
    opacity: 1;
    visibility: visible;
    -webkit-transition: all 0.3s ease-in-out 0s;
    -o-transition: all 0.3s ease-in-out 0s;
    transition: all 0.3s ease-in-out 0s;
}
a.scroll span {
    color: #ffffff;
    font-size: 16px;
    height: 30px;
    width: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #6c63ff;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);
}
a.scroll span i {
    display: block;
    line-height: 0;
}
a.scroll:hover span {
    color: #333333;
    background-color: #ffffff;
}
a.scroll span,
a.scroll:hover span {
    -webkit-transition: all 0.3s ease-in-out 0s;
    -o-transition: all 0.3s ease-in-out 0s;
    transition: all 0.3s ease-in-out 0s;
}

/*====================================
    ovl-buttons css
====================================*/
.cart-slider.owl-carousel .owl-nav, 
.blog-slider.owl-carousel .owl-nav, 
.brand-logo.owl-carousel .owl-nav, 
.testimonial-slider.owl-carousel .owl-nav {
    top: -79px;
}
.cart-slider.owl-carousel .owl-nav, 
.blog-slider.owl-carousel .owl-nav, 
.brand-logo.owl-carousel .owl-nav, 
.testimonial-slider.owl-carousel .owl-nav {
    display: flex;
    position: absolute;
    right: 0px;
    margin-top: 0px;
} 
.cart-slider.owl-carousel .owl-nav button, 
.blog-slider.owl-carousel .owl-nav button, 
.brand-logo.owl-carousel .owl-nav button, 
.testimonial-slider.owl-carousel .owl-nav button {
    color: var(--font-color-body);
    font-size: 14px;
    margin: 0px 10px 0px 0px;
    padding: 0px 10px 0px 0px!important;
    border-right: 1px solid #e2e2e2;
    background-color: transparent;
    border-radius: 0px;
    line-height: 1;
} 
.cart-slider.owl-carousel .owl-nav button:last-child, 
.blog-slider.owl-carousel .owl-nav button:last-child, 
.brand-logo.owl-carousel .owl-nav button:last-child, 
.testimonial-slider.owl-carousel .owl-nav button:last-child {
    margin: 0px;
    padding: 0px!important;
    border-right: none;
} 
.cart-slider.owl-carousel .owl-nav button:hover, 
.blog-slider.owl-carousel .owl-nav button:hover, 
.brand-logo.owl-carousel .owl-nav button:hover, 
.testimonial-slider.owl-carousel .owl-nav button:hover {
    color: var(--font-color-header);
    background-color: transparent;
} 
.cart-slider.owl-carousel .owl-nav button i, 
.blog-slider.owl-carousel .owl-nav button i, 
.brand-logo.owl-carousel .owl-nav button i, 
.testimonial-slider.owl-carousel .owl-nav button i {
    font-weight: 600;
}

/*====================================
    swiper-buttons css
====================================*/
.collection-category,
.product-tab-area,
.deal-slider,
.side-cat-wrap,
.product-related      {
    position: relative;
}
.product-tab-ptb .swiper-buttons, 
.collection-category .swiper-buttons, 
.deal-product .swiper-buttons, 
.side-collection-category .swiper-buttons, 
.product-related .swiper-buttons {
    top: 2px;
}
.product-tab-ptb .swiper-buttons, 
.collection-category .swiper-buttons, 
.deal-product .swiper-buttons, 
.side-collection-category .swiper-buttons, 
.product-related .swiper-buttons {
    display: flex;
    position: absolute;
    right: 0px;
    margin-top: 0px;
}
.product-tab-ptb .swiper-buttons button, 
.collection-category .swiper-buttons button, 
.deal-product .swiper-buttons button, 
.side-cat .swiper-buttons button, 
.product-related .swiper-buttons button {
    color: var(--font-color-body);
    font-size: 14px;
    margin: 0px 10px 0px 0px;
    padding: 0px 10px 0px 0px!important;
    border-right: 1px solid #e2e2e2;
    background-color: transparent;
    border-radius: 0px;
    line-height: 1;
}
.product-tab-ptb .swiper-buttons button:hover, 
.collection-category .swiper-buttons button:hover, 
.deal-product .swiper-buttons button:hover, 
.side-cat .swiper-buttons button:hover, 
.product-related .swiper-buttons button:hover {
    color: var(--font-color-header);
    background-color: transparent;
}
.product-tab-ptb .swiper-buttons button:last-child, 
.collection-category .swiper-buttons button:last-child, 
.deal-product .swiper-buttons button:last-child, 
.side-cat .swiper-buttons button:last-child, 
.product-related .swiper-buttons button:last-child {
    margin: 0px;
    padding: 0px!important;
    border-right: none;
}
.product-tab-ptb .swiper-buttons button i, 
.collection-category .swiper-buttons button i, 
.deal-product .swiper-buttons button i, 
.side-cat .swiper-buttons button i, 
.product-related .swiper-buttons button i {
    font-weight: 600;
}

/*====================================
    slider-dot css
=====================================*/
/* swiper dot css */
.product-tab-area .swiper-pagination {
    position: unset;
    display: none;
    justify-content: center;
    margin-top: 100px;
    line-height: 0;
}
.product-tab-area .swiper-pagination span.swiper-pagination-bullet {
    height: 10px;
    width: 10px;
    background-color: transparent;
    margin-right: 5px;
    border: 2px solid var(--font-color-header);
    opacity: 1;
}
.product-tab-area .swiper-pagination span.swiper-pagination-bullet:last-child {
    margin-right: 0px;
}
.product-tab-area .swiper-pagination span.swiper-pagination-bullet.swiper-pagination-bullet-active {
    background-color: #91c4b1;
    border: 2px solid #91c4b1;
}
@media (max-width: 1199px) {
    .product-tab-area .swiper-pagination {
        margin-top: 80px;
    }
}
@media (max-width: 767px) {
    .product-tab-area .swiper-pagination {
        margin-top: 60px;
    }
}

/*====================================
    scrollbar css
=====================================*/
.filter-sidebar,
.shop-sidebar ul.scrollbar,
.mini-cart ul.cart-item,
.productmodal .quick-view-content,
.currency-wrap .local-currency ul {
    scrollbar-width: thin;
    -webkit-scrollbar-width: thin;
}
.filter-sidebar::-webkit-scrollbar,
.shop-sidebar ul.scrollbar::-webkit-scrollbar,
.currency-wrap .local-currency ul::-webkit-scrollbar,
.mini-cart ul.cart-item::-webkit-scrollbar,
.productmodal .quick-view-content::-webkit-scrollbar {
    width: 4px;
}
.filter-sidebar::-webkit-scrollbar-track,
.shop-sidebar ul.scrollbar::-webkit-scrollbar-track,
.currency-wrap .local-currency ul::-webkit-scrollbar-track,
.mini-cart ul.cart-item::-webkit-scrollbar-track,
.productmodal .quick-view-content::-webkit-scrollbar-track {
    background-color: #e2e2e2;
}
.filter-sidebar::-webkit-scrollbar-thumb,
.shop-sidebar ul.scrollbar::-webkit-scrollbar-thumb,
.currency-wrap .local-currency ul::-webkit-scrollbar-thumb,
.mini-cart ul.cart-item::-webkit-scrollbar-thumb,
.productmodal .quick-view-content::-webkit-scrollbar-thumb {
    background-color: #c1c1c1;
}
.filter-sidebar::-webkit-scrollbar-thumb:hover,
.shop-sidebar ul.scrollbar::-webkit-scrollbar-thumb:hover,
.currency-wrap .local-currency ul::-webkit-scrollbar-thumb:hover,
.mini-cart ul.cart-item::-webkit-scrollbar-thumb:hover,
.productmodal .quick-view-content::-webkit-scrollbar-thumb:hover {
    background-color: var(--font-color-header);
}