/*--------------------------------------------------------------------
Template Name: ponno;
Description:  eCommerce Bootstrap 4 Template;
Version: 1.0;
-----------------------------------------------------

    CSS INDEX
    ================
    1. Theme Default CSS
    2. Newsletter Popup CSS
    3. Header CSS
    4. Slider CSS
    5. Hot Deal CSS
    6. All Products  CSS
    7. Single Apple Watch CSS
    8. Footer CSS
    9. Blog & Blog Details CSS
    10. Breadcrumb CSS
    11. Shop Page CSS
    12. Product Details CSS
    13. Compare Page CSS
    14. Checkout CSS
    15. Cart & Wish List CSS
    16. About us CSS
    17. Your Account CSS
    18. Login CSS
    19. Register Account & Contact Form CSS
    20. Forgot Password CSS
    21. 404 Page CSS
   
    
-----------------------------------------------------------------*/

/* googel fonts source sans pro */

@import url('https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600,700');

/*----------------------------------------*/
/* 1. Theme Default CSS
/*----------------------------------------*/

body {
    background: #fff none repeat scroll 0 0;
    color: #222;
    font-family: "Source Sans Pro", sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.25em;
}

a {
    color: #222;
}

a:hover {
    text-decoration: none;
}

a:active,
a:hover,
a:focus {
    outline: 0 none;
    text-decoration: none
}

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

.clear {
    clear: both
}

.fix {
    overflow: hidden;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    margin: 0;
    /* text-transform: uppercase; */
    font-weight: 600;
}

p {
    font-size: 16px;
    font-weight: 400;
    line-height: 28px;
    margin-bottom: 0;
}

/* btn style start */

.small-btn {
    margin-top: 40px;
}

.small-btn a,
.pro-add-cart a {
    background: #0438a1 none repeat scroll 0 0;
    border-radius: 5px;
    -webkit-box-shadow: none;
    box-shadow: none;
    color: #fff;
    display: inline-block;
    font-size: 16px;
    padding: 12px 40px;
    text-transform: capitalize;
}

.small-btn a:hover {
    background: #027ad1 none repeat scroll 0 0;
    color: #fff;
}

/* btn style end */

.tooltip-inner {
    padding: 2px 12px 6px;
    font-size: 14px;
    background: #0438a1;
}

.tooltip .arrow:before {
 border-bottom-color:#0438a1 !important;
 border-top-color:#0438a1 !important;
 }

.section-title h2 {
    text-transform: capitalize;
}

/* all background bg */

.bg-image-1 {
    background-image: url(../img/slider/s1.jpg);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
}

.bg-image-2 {
    /*background-image: url(../img/slider/s2.jpg);*/
    background-image: url(../img/slider/Student_Laptop_On_Rent.jpg);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
}
.bg-image-3 {
    background-image: url(../img/slider/s3.jpg);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
}

/*----------------------------------------*/
/* 2. Newsletter Popup CSS
/*----------------------------------------*/

.popup_wrapper {
    background: rgba(0, 0, 0, 0.7) none repeat scroll 0 0;
    height: 100%;
    opacity: 0;
    position: fixed;
    -webkit-transition: all 0.5s ease 0s;
    transition: all 0.5s ease 0s;
    visibility: hidden;
    width: 100%;
    z-index: 9999999;
}

.test {
    background: #ffffff none repeat scroll 0 0;
    bottom: 0;
    height: 390px;
    left: 0;
    margin: auto;
    max-width: 790px;
    padding: 25px 50px;
    position: absolute;
    right: 0;
    top: 0;
}

.popup_off {
    background: #666666 none repeat scroll 0 0;
    border: 1px solid #ffffff;
    color: #ffffff;
    cursor: pointer;
    display: block;
    font-size: 11px;
    font-weight: 500;
    height: 25px;
    line-height: 25px;
    position: absolute;
    right: 0;
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;
    top: -26px;
    -webkit-transition: all 0.3s ease-in 0s;
    transition: all 0.3s ease-in 0s;
    width: 75px;
}

.popup_off:hover {
    background: #1a1a1a none repeat scroll 0 0;
}

.subscribe-form-group {
    margin-top: 15px;
}

.subscribe-form-group input {
    background: #eaeaea none repeat scroll 0 0;
    border: 0 none;
    color: #333;
    height: 40px;
    padding: 0 15px;
    width: 380px;
}

.subscribe-bottom label {
    font-size: 16px;
    margin: 0;
    vertical-align: middle;
}

.subscribe-bottom input {
    vertical-align: middle;
}

.subscribe-form-group button {
    background: #0438a1 none repeat scroll 0 0;
    border: 0 none;
    color: #fff;
    display: block;
    font-size: 12px;
    font-weight: 600;
    line-height: 38px;
    margin: 0px auto;
    padding: 2px 170px 0;
    text-transform: uppercase;
    -webkit-transition: all 0.3s ease-in-out 0s;
    transition: all 0.3s ease-in-out 0s;
}

.subscribe-form-group.subscribe-form-style-two button {
    background: #61c0bf;
}

.subscribe-form-group.subscribe-form-style-three button {
    background: #ffb400;
}

.subscribe-form-group.subscribe-form-style-four button {
    background: #35a875;
}

.subscribe-form-group button:hover {
    background: #303030 none repeat scroll 0 0;
    color: #fff;
}

.subscribe_area h2 {
    font-size: 35px;
    font-weight: 600;
    margin-bottom: 10px;
    text-transform: uppercase;
}

.subscribe_area p {
    padding: 0 50px;
}

/*----------------------------------------*/
/* 3. Header CSS
/*----------------------------------------*/

.header-top {
    padding: 10px 0;
}

.header-sticky.sticky {
    -webkit-box-shadow: 0 8px 6px -6px rgba(0, 0, 0, 0.4);
    box-shadow: 0 8px 6px -6px rgba(0, 0, 0, 0.4);
    left: 0;
    position: fixed;
    right: 0;
    top: 0;
    -webkit-transition: all 300ms ease-in 0s;
    transition: all 300ms ease-in 0s;
    z-index: 1049;
}

.sticky {
    -webkit-animation: 800ms ease-in-out 0s normal none 1 running fadeInDown;
    animation: 800ms ease-in-out 0s normal none 1 running fadeInDown;
}

.header-menu-list>li,
.cart-box>ul>li {
    position: relative;
}

.setting-box>ul>li {
    padding: 20px 0;
}

.setting-box>ul>li a {
    display: block;
    line-height: 1;
}

.header-menu-list>li {
    display: inline-block;
}

.drop-icon::after {
    content: "";
    font-family: FontAwesome;
    font-size: 12px;
    margin-left: 5px;
}

.header-menu-list>li>a:hover {
    background: #f5f6f7;
}
.header-menu-list>li:hover>a {
    color: black;
}

.header-menu-list>li>a {
    border: 1px solid transparent;
    border-radius: 20px;
}

.header-menu-list>li>a {
    color: #f4f6ff;
    display: block;
    font-size: 16px;
    font-weight: 600;
    line-height: 26px;
    padding: 10px 10px;
    text-transform: capitalize;
}



.header-menu-list>li:not(:last-child) {
    margin-right: 40px;
}

.header-menu-list>li>ul.ht-dropdown li a {
    display: block;
    font-size: 18px;
    font-weight: 400;
    padding: 7px 10px;
    text-align: left;
    text-transform: capitalize;
}

.header-menu-list>li>ul.ht-dropdown li a:hover {
    background: #0438a1;
    color: white;
}

.menu-tile {
    border-bottom: 1px solid #0438a1;
    display: inline-block;
    font-size: 18px;
    font-weight: 600;
    line-height: 20px;
    margin-bottom: 15px;
    padding-bottom: 5px;
    text-align: left;
    text-transform: capitalize;
}

/* header bottom megamenu  css end */

.megamenu {
    background: #fff none repeat scroll 0 0;
    border: 1px solid #e5e5e3;
    padding: 20px 25px;
}

.header-menu-list ul.ht-dropdown.megamenu {
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}

.header-menu-list ul.ht-dropdown.megamenu li a {
    padding-left: 0;
}

.header-menu-list ul.ht-dropdown.megamenu>li:last-child {
    margin-right: 0;
}

.header-menu-list ul.ht-dropdown.megamenu {
    border-radius: 15px;
    padding: 45px 30px;
    width: 850px;
}

.header-menu-list ul.ht-dropdown.megamenu>li {
    margin-right: 40px;
    width: 33.333333%;
}

.header-menu-list ul.ht-dropdown.megamenu>li:not(:last-child) {
    border-right: 1px solid #f1f1f1;
}

.ht-dropdown {
    background: #fff;
    left: 0;
    opacity: 0;
    /*padding: 10px;*/
    position: absolute;
    top: 107%;
    -webkiit-transform: scaleY(0);
    -webkit-transform: scaleY(0);
    transform: scaleY(0);
    -webkit-transform-origin: 0 0 0;
    transform-origin: 0 0 0;
    width: 170px;
    visibility: hidden;
    z-index: 9999;
    -webkit-transition: 0.5s;
    transition: 0.5s;
    -webkit-box-shadow: 0 0 6px 1px rgba(0, 0, 0, 0.1);
    -ms-box-shadow: 0 0 6px 1px rgba(0, 0, 0, 0.1);
    box-shadow: 0 0 6px 1px rgba(0, 0, 0, 0.1);
}

.header-menu-list li:hover ul.ht-dropdown {
    opacity: 1;
    visibility: visible;
    -webkiit-transform: scaleY(1);
    -webkit-transform: scaleY(1);
    transform: scaleY(1);
}

.dropdown {
    border-radius: 15px;
    -webkit-box-shadow: 0 0 6px 1px rgba(0, 0, 0, 0.1);
    box-shadow: 0 0 6px 1px rgba(0, 0, 0, 0.1);
    display: none;
    position: absolute;
    right: 0;
    top: 180%;
    z-index: 999;
}

.dropdown.categorie-search-box {
    border-radius: 0;
}

.categorie-search-box form {
    color: #a9a9a9;
    padding: 0;
    position: relative;
    width: 100%;
}

.categorie-search-box input {
    border: 1px solid #0438a1;
    border-radius: 15px;
    font-size: 16px;
    height: 55px;
    padding: 0 95px 0 30px;
    width: 100%;
}

.categorie-search-box button {
    background: transparent none repeat scroll 0 0;
    border: 0 none;
    color: #0438a1;
    font-size: 15px;
    height: 55px;
    line-height: 59px;
    padding: 0;
    position: absolute;
    right: 30px;
    text-align: center;
    top: 0;
    -webkit-transition: all 300ms ease-in 0s;
    transition: all 300ms ease-in 0s;
}

.categorie-search-box button::before {
    background: #0438a1 none repeat scroll 0 0;
    content: "";
    height: 30px;
    position: absolute;
    right: 50px;
    top: 50%;
    width: 1px;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
}

.categorie-search-box button span {
    font-size: 15px;
}

.categorie-search-box button:focus {
    border: none;
}

.categorie-search-box button:hover {
    color: #0438a1;
}

.categorie-search-box .form-group {
    background: transparent none repeat scroll 0 0;
    display: inline-block;
    left: 0;
    margin: 0;
    position: absolute;
    top: 12px;
    width: 150px;
}

.bootstrap-select option {
    font-size: 13px;
}

.nice-select::after {
    margin-top: -3px;
}

.nice-select .current {
    display: block;
    overflow: hidden;
    width: 100%;
}

.categorie-search-box .nice-select .list {
    height: 350px;
    overflow-y: auto;
}

.bootstrap-select {
    border-radius: 15px 0 0 15px;
    border-style: none solid none none;
    border-width: 0 1px 0 0;
    color: #777777;
    font-size: 13px;
    height: 25px;
    line-height: 25px;
    margin: 0;
    width: 150px;
    background: #ededed;
}

.cart-box>ul {
    -moz-box-pack: end;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: end;
    -ms-flex-pack: end;
    justify-content: flex-end;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}

.cart-box>ul>li {
    line-height: 1;
}

.cart-box span.ti-bag {
    position: absolute;
    left: 0;
}

.cart-box .total-pro {
    background: #0438a1 none repeat scroll 0 0;
    border-radius: 5px;
    color: #f4f6ff;
    display: inline-block;
    font-size: 15px;
    line-height: 20px;
    padding: 6px 20px 6px 60px;
    position: relative;
}

.cart-box .total-pro::before {
    content: "";
    font-family: "themify";
    font-size: 25px;
    left: 20px;
    position: absolute;
    top: 15px;
}

.cart-box .total-pro:hover {
    color: #fff;
}

.setting-box ul li a span {
    color: #fff;
    font-size: 20px;
}

.cart-box-width {
    left: auto;
    right: 0;
    background: white;
    -webkit-box-shadow: 0 3px 9.3px 0.7px rgba(0, 0, 0, 0.15);
    box-shadow: 0 3px 9.3px 0.7px rgba(0, 0, 0, 0.15);
    padding: 0;
    width: 220px;
}

.cart-box>ul>li>a>span {
    font-size: 18px;
    position: relative;
}

.cart-box>ul>li:not(:first-child) {
    margin-left: 35px;
}

.cart-box>ul>li>a {
    display: block;
}

.cart-text {
    display: block;
}

.single-cart-box {
    margin-bottom: 18px;
    overflow: hidden;
    position: relative;
}

.cart-img {
    float: left;
    padding-right: 10px;
    position: relative;
    width: 35%;
}

.cart-img img {
    max-width: 100%;
}

.cart-content {
    float: left;
    padding: 0 15px 15px 0;
    width: 65%;
}

.cart-content h6 a {
    display: block;
    font-size: 16px;
    line-height: 20px;
    overflow: hidden;
    overflow-wrap: break-word;
    text-overflow: ellipsis;
    text-transform: capitalize;
    white-space: nowrap;
}

.cart-content span {
    display: block;
    font-size: 14px;
    line-height: 20px;
}

.cart-price {
    margin: 5px 0;
}

.cart-actions a {
    background: #2c2c2c none repeat scroll 0 0;
    -webkit-box-shadow: none;
    box-shadow: none;
    color: white;
    display: block;
    font-size: 14px;
    font-weight: 400;
    padding: 10px 20px;
}

.cart-checkout {
    background: #f26667 none repeat scroll 0 0;
    color: #fff;
}

.cart-checkout:hover {
    background-color: #0438a1;
    border-color: transparent;
    color: #fff;
}

.del-icone {
    font-size: 12px;
    position: absolute;
    right: 0;
    top: 3px;
    z-index: 45;
}

.del-icone:hover,
.cart-content h6 a:hover,
.currency-selector ul li a:hover {
    color: #0438a1;
}

.wish-list-item {
    position: relative;
    padding-right: 30px;
    margin-right: 30px;
}

.cart-box-width {
    padding: 25px 30px;
}

.cart-box>ul>li>a span+span.total-pro {
    background: #fff none repeat scroll 0 0;
    border-radius: 100%;
    color: #343434;
    font-size: 11px;
    height: 18px;
    left: 12px;
    line-height: 18px;
    position: absolute;
    text-align: center;
    top: 25px;
    width: 18px;
}

.single-cart-box,
.price-content {
    border-bottom: 1px solid #ededed;
    margin-bottom: 20px;
}

.price-content {
    overflow: hidden;
    padding-bottom: 20px;
}

.price-content li {
    font-size: 16px;
    font-weight: 500;
    line-height: 1.5;
}

.price-content li span, .cart-content span.cart-price {
    color: #0438a1;
    float: right;
    font-size: 15px;
    font-weight: 600;
}

.cart-content span.cart-price {
    float: none;
}

.pro-quantity {
    background: #0438a1 none repeat scroll 0 0;
    border-radius: 100%;
    color: white;
    font-size: 12px;
    left: 5px;
    line-height: 23px;
    min-width: 25px;
    padding: 2px 0 0;
    position: absolute;
    text-align: center;
    top: 3px;
}

.currency-selector h3 {
    display: inline-block;
    font-size: 15px;
    font-weight: 600;
    line-height: 20px;
    margin-bottom: 12px;
    text-transform: uppercase;
}

.currency-selector>li:not(:last-child) {
    border-bottom: 1px solid #ededed;
    margin-bottom: 25px;
    padding-bottom: 15px;
}

.currency-selector ul li a {
    display: block;
    font-size: 15px;
    line-height: 20px;
    padding: 5px 0;
    text-transform: capitalize;
}

.currency-selector ul li a img {
    margin-right: 5px;
}

/*----------------------------------------*/
/* 4. Slider CSS
/*----------------------------------------*/

.align-center-left {
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}

.slider-content {
    left: 140px;
    position: relative;
    max-width: 465px;
}

.slider-content h6 {
    font-size: 24px;
    line-height: 1;
    position: relative;
    text-transform: capitalize;
}

.slider-content h1 {
    font-size: 48px;
    line-height: 1;
    margin-bottom: 20px;
    margin-top: 15px;
    text-transform: capitalize;
}

.sldier-right-img {
    bottom: 205px;
    overflow: hidden;
    z-index: -9;
}

.slider-style-two .slide {
    height: 670px;
}

.slider-style-two .slider-content {
    margin: auto 60px 140px auto;
    left: 0;
}

.slider-style-two .slider-content h1 {
    font-size: 36px;
    line-height: 1.3;
    margin-bottom: 0;
    margin-top: 15px;
    text-transform: uppercase;
}

.fullscreen {
  height: 580px;
}

.slider-style-two .slider-content h6 {
    font-size: 20px;
    font-weight: 400;
}

.owl-item.active .sldier-right-img img {
    -webkit-animation-delay: 0s;
    animation-delay: 0s;
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    -webkit-animation-name: slideInUp;
    animation-name: slideInUp;
}

/* animation-style-01 */

.owl-item.active .animation-style-01 .slider-content h1 {
    -webkit-animation: 2s linear 0s alternate none 1 running bounceIn;
    animation: 2s linear 0s alternate none 1 running bounceIn;
}

.owl-item.active .animation-style-01 .slider-content h6 {
    -webkit-animation: 1200ms ease-in-out 0s alternate none 1 running rollIn;
    animation: 1200ms ease-in-out 0s normal none 1 running rollIn;
}

.owl-item.active .animation-style-01 .slider-content p {
    -webkit-animation: 1600ms ease-in-out 0s normal none 1 running zoomInRight;
    animation: 1600ms ease-in-out 0s normal none 1 running zoomInRight;
}

.owl-item.active .animation-style-01 .slider-content .slide-btn {
    -webkit-animation: 0.5s linear 0s alternate none 1 running slideInUp;
    animation: 0.5s linear 0s alternate none 1 running slideInUp;
}

/* animation-style-02 */

.owl-item.active .animation-style-02 .slider-content h1 {
    -webkit-animation: 2s linear 0s alternate none 1 running slideInDown;
    animation: 2s linear 0s alternate none 1 running slideInDown;
}

.owl-item.active .animation-style-02 .slider-content h6 {
    -webkit-animation: 1s linear 0s alternate none 1 running zoomIn;
    animation: 1s linear 0s alternate none 1 running zoomIn;
}

.owl-item.active .animation-style-02 .slider-content p {
    -webkit-animation: 1600ms ease-in-out 0s normal none 1 running zoomInUp;
    animation: 1600ms ease-in-out 0s normal none 1 running zoomInUp;
}

.owl-item.active .animation-style-02 .slider-content .slide-btn {
    -webkit-animation: 0.5s linear 0s alternate none 1 running slideInUp;
    animation: 0.5s linear 0s alternate none 1 running slideInUp;
}

/* All Sliding Css */

.owl-nav div {
    background: rgba(255, 255, 255, 0.75) none repeat scroll 0 0;
    border-radius: 100%;
    color: #0438a1;
    cursor: pointer;
    display: block;
    font-size: 18px;
    height: 50px;
    left: 0;
    line-height: 50px;
    opacity: 0;
    position: absolute;
    text-align: center;
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    -webkit-transition: all 0.5s ease-in-out 0s;
    transition: all 0.5s ease-in-out 0s;
    width: 50px;
    z-index: 8;
}

.owl-nav div.owl-next {
    right: 0;
    left: auto;
}

.owl-nav div:hover {
    background: #0438a1;
    color: #fff;
}

.slider-activation:hover .owl-nav div,
.feature-pro-active:hover .owl-nav div {
    opacity: 1;
}

.slider-activation .owl-nav div {
    left: 15px;
    background: #fff;
    border: none;
}

.slider-activation .owl-nav div:hover {
    background: #0438a1;
    color: #fff;
}

.slider-activation .owl-nav div.owl-next {
    right: 15px;
    left: auto;
}

/* default pagination dot css */

.owl-dots {
    bottom: 15px;
    margin-top: 40px;
    position: static;
    text-align: center;
    width: 100%;
    z-index: 12;
}

.owl-dots .owl-dot {
    background: #dcdcdc;
    border-radius: 100%;
    cursor: pointer;
    display: inline-block;
    font-size: 0;
    height: 12px;
    margin: 0 4px;
    position: relative;
    text-align: center;
    -webkit-transition: all 300ms ease-in 0s;
    transition: all 300ms ease-in 0s;
    width: 12px;
    z-index: 8;
}

.owl-dots .owl-dot.active {
    background: #fff;
    border: 1px solid #26b5f1;
}

.slider-activation .owl-dots {
    position: absolute;
    margin-top: 0;
    bottom: 35px;
}

.slider-activation .owl-dots .owl-dot.active {
    background: #0438a1 none repeat scroll 0 0;
    border: medium none;
}

.slider-style-two .owl-dots .owl-dot {
    background: #c1c1c1;
    background: -webkit-gradient(linear, right top, left top, from(#c1c1c1), to(#e0dfe0));
    background: linear-gradient(-90deg, #c1c1c1, #e0dfe0);
}

.slider-style-two .owl-dots .owl-dot.active {
    border-radius: 20px;
    width: 45px;
    height: 12px;
    background: -webkit-gradient(linear, right top, left top, from(#c1c1c1), to(#e0dfe0));
    background: linear-gradient(-90deg, #c1c1c1, #e0dfe0);
}

/*----------------------------------------*/
/* 5. Hot Deal CSS
/*----------------------------------------*/

.single-hot-deal {
    background: rgba(0, 0, 0, 0) url("img/banner/b1_1.jpg") no-repeat scroll center center / cover;
    padding: 80px 70px 62px;
}

.deal-text h6 {
    font-size: 18px;
}

.deal-text h2 {
    font-size: 36px;
    font-weight: 400;
    margin-bottom: 20px;
    margin-top: 10px;
    text-transform: capitalize;
}

.deal-text p {
    font-size: 16px;
    padding-right: 55px;
}

.countdown {
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    margin-top: 35px;
}

.countdown .count:not(:last-child) {
    margin-right: 45px;
}

.count p {
    font-size: 24px;
    font-weight: 600;
    line-height: 1;
    padding-bottom: 8px;
}

.count span {
    display: block;
    font-size: 24px;
    font-weight: normal;
    line-height: 14px;
    text-transform: capitalize;
}

/*------------------------------------------------*/
/* 6. All Products  CSS
/*------------------------------------------------*/

.single-ponno-product {
    position: relative;
    text-align: center;
    /*background: #f7f8f9 none repeat scroll 0 0;*/
    -webkit-transition: all 300ms ease-in-out 0s;
    transition: all 300ms ease-in-out 0s;
}

.single-ponno-product:hover,
.single-testmonial:hover {
    border-color: #fff;
}

.pro-img {
    position: relative;
}

.pro-img img {
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-transition: all 0.5s ease-in-out 0s;
    transition: all 0.5s ease-in-out 0s;
    width: 100%;
}

.pro-img .secondary-img {
    left: 0;
    opacity: 0;
    position: absolute;
    top: 0;
    z-index: 3;
}

.single-ponno-product:hover .pro-img .secondary-img {
    opacity: 1;
}

.hot-deal .pro-content {
    padding: 40px 0;
}

.pro-content {
    padding: 10px;
}

.pro-info h4 a {
    display: block;
    font-size: 15px;
    font-weight: 500;
    line-height: 20px;
    text-transform: capitalize;
}

.pro-info h4 a:hover {
    color: #0438a1;
}

.pro-info p {
    line-height: 1;
    margin: 15px 0;
}

.product-rating i {
    color: #0438a1;
    font-size: 16px;
}

.quantity-pro {
    color: #0438a1;
}

.pro-actions-link {
    background: #fff none repeat scroll 0 0;
    border-radius: 10px;
    bottom: 90px;
    opacity: 0;
    padding: 6px 10px;
    position: absolute;
    right: 10px;
    -webkit-transition: all 300ms ease-in-out 0s;
    transition: all 300ms ease-in-out 0s;
    visibility: hidden;
    z-index: 3;
}

.single-ponno-product:hover .pro-actions-link {
    opacity: 1;
    visibility: visible;
}

.pro-actions-link a {
    background-color: #fff;
    color: #434343;
    display: block;
    font-size: 14px;
    font-weight: normal;
    line-height: 33px;
    text-align: center;
    width: 28px;
}

.pro-actions-link a:hover {
    color: #0438a1;
}

.special-price {
    font-size: 18px;
    font-weight: 600;
}

.old-price {
    color: #555;
    font-size: 14px;
    font-weight: 400;
    text-decoration: line-through;
    margin-left: 5px;
}

.quantity-pro {
    margin-left: 10px;
}

.pro-add-cart {
    bottom: 15px;
    left: 50%;
    margin: auto;
    opacity: 0;
    position: absolute;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    visibility: hidden;
    white-space: nowrap;
    -webkit-transition: all 300ms ease-in-out 0s;
    transition: all 300ms ease-in-out 0s;
}

/*.single-ponno-product:hover .pro-add-cart {*/
/*    bottom: 20px;*/
/*    opacity: 1;*/
/*    visibility: visible;*/
/*}*/

.single-ponno-product .pro-add-cart {
    bottom: 20px;
    opacity: 1;
    visibility: visible;
}

.pro-add-cart a {
    /*background: #fff none repeat scroll 0 0;*/
    border: 1px solid #e5e5e5;
    color: white;
    font-size: 14px;
    font-weight: 600;
    line-height: 38px;
    padding: 0 32px;
    text-transform: uppercase;
}

/* product sticker */

.sticker-new,
.sticker-sale {
    background: #46ce91 none repeat scroll 0 0;
    display: inline-block;
    font-size: 14px;
    font-weight: 600;
    height: 0;
    left: 20px;
    position: absolute;
    text-transform: capitalize;
    top: 20px;
    z-index: 5;
}

.sticker-sale {
    right: 15px;
    left: auto;
}

.nav.tabs-area.pro-tabs-area {
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    margin-bottom: 40px;
    position: relative;
}

.nav.tabs-area.pro-tabs-area::before {
    border-color: #e5e5e5;
    border-style: solid;
    border-width: 0 0 1px;
    content: "";
    left: 0;
    position: absolute;
    top: 50%;
    width: 100%;
    z-index: -1;
}

.pro-tabs-area li a {
    border: 1px solid transparent;
    background: #fff;
    border-radius: 20px;
    color: #454545;
    cursor: pointer;
    display: block;
    font-size: 20px;
    font-weight: 600;
    line-height: 40px;
    padding: 0 40px;
    position: relative;
    text-transform: capitalize;
}

.pro-tabs-area li a.active {
    border-color: #e5e5e5;
}

/* laptop computer tabs css */

.e-header {
    line-height: 1;
    text-transform: capitalize;
}

.categorie-tabs-area li:not(:last-child) {
    margin-right: 40px;
}

.categorie-tabs-area li a {
    font-size: 16px;
    font-weight: 600;
    text-transform: capitalize;
}

.categorie-tabs-area li a.active {
    color: #0438a1;
}

.pro-style-changer .single-ponno-product {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    text-align: left;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}

.pro-style-changer .single-ponno-product .pro-img {
    border: 1px solid #e5e5e5;
    -ms-flex-preferred-size: 45%;
    flex-basis: 45%;
    max-width: 45%;
    position: relative;
}

.pro-style-changer .single-ponno-product .pro-content {
    background: #f7f8f9 none repeat scroll 0 0;
    -ms-flex-preferred-size: 55%;
    flex-basis: 55%;
    max-width: 55%;
}

.pro-style-changer .tripple-pro .single-ponno-product:not(:last-child),
.pro-style-changer .dual-pro .single-ponno-product:not(:last-child) {
    margin-bottom: 30px;
}

/*----------------------------------------*/
/* 7. Single Apple Watch CSS
/*----------------------------------------*/

.slick-vertical .slick-slide {
    border: none;
    outline: none;
    cursor: pointer;
}

.slick-vertical .small-img.slick-active {
    border-bottom: 1px solid #e5e5e5;
}

.slick-vertical .small-img {
    padding-bottom: 10px;
    padding-top: 10px;
}

.slick-vertical .small-img.slick-active.last-item {
    border-bottom: medium none;
}

.slick-slide img {
    display: inline-block;
}

.main-watch-content {
    padding: 20px 70px 20px 40px;
}

.watch-pricing {
    margin-top: 45px;
}

.watch-pricing .current-price {
    font-size: 25px;
}

.watch-content h2 {
    font-size: 36px;
    text-transform: capitalize;
    margin-bottom: 20px;
}

.watch-content p {
    color: #000;
    font-size: 16px;
    line-height: 25px;
}

.watch-content .countdown {
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
}

.watch-content .countdown .count:not(:last-child) {
    margin-right: 25px;
}

.watch-content .countdown p {
    background: #fff none repeat scroll 0 0;
    -webkit-box-shadow: 3px 3px 0 0 #dcddde;
    box-shadow: 3px 3px 0 0 #dcddde;
    color: #333;
    font-size: 36px;
    font-weight: 400;
    margin-bottom: 13px;
    padding: 15px 20px;
}

.watch-content .countdown .count span {
    display: block;
    font-size: 18px;
    color: #0438a1;
}

.watch-pricing>p {
    line-height: 1;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-align-items: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}

.watch-pricing .current-price {
    font-size: 36px;
    line-height: 1;
    color: #0438a1;
}

.watch-pricing .old-price {
    font-size: 22px;
    line-height: 1;
    text-decoration: line-through;
    margin-left: 8px;
}

.buy-now {
    border: 1px solid #333;
    font-size: 14px;
    padding: 10px 25px;
    text-transform: capitalize;
    border-radius: 20px;
    margin-left: 35px;
}

.buy-now:hover {
    background: #0438a1;
    color: #fff;
    border-color: #0438a1;
}

/*----------------------------------------*/
/* 8. Footer CSS
/*----------------------------------------*/

.footer-logo p {
    color: #ccc;
    font-size: 18px;
    margin: 35px auto 0;
    max-width: 40%;
}

.support-area {
    border-bottom: 1px solid #26282b;
    padding: 60px 0;
}

.support-desc h6,
.support-desc p {
    color: #f1f1f1;
}

.support-desc h6 {
    font-size: 18px;
    text-transform: capitalize;
    position: relative;
    padding-bottom: 10px;
    margin-bottom: 10px;
}

.support-desc h6:before {
    content: "";
    position: absolute;
    left: 0;
    top: 100%;
    height: 2px;
    width: 45px;
    background: #0438a1;
}

.support-desc p {
    font-size: 16px;
}

.support-area .single-support {
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}

.single-support .support-icon {
    position: relative;
    z-index: 1;
    padding-left: 12px;
}

.single-support .support-icon::before {
    background: transparent none repeat scroll 0 0;
    border: 10px solid #1a1c1f;
    border-radius: 100%;
    content: "";
    height: 60px;
    left: 0;
    position: absolute;
    top: -25px;
    width: 60px;
    z-index: -1;
}

.single-support .support-desc {
    margin-left: 30px;
}

.onsale-banner .single-banner {
    float: left;
}

.onsale-banner .single-banner.img-big {
    padding-right: 15px;
    width: 63%;
}

.onsale-banner .single-banner.img-small {
    padding-left: 15px;
    width: 37%;
}

/* footer middle css */

.footer-title {
    margin-bottom: 10px;
}

.footer-title.e-header {
    /*color: #f1f1f1;*/
    font-size: 20px;
}

.single-footer .recent-img {
    width: 120px;
    margin-right: 30px;
}

.single-footer .recent-desc h6 a {
    color: #f1f1f1;
    font-size: 18px;
    font-weight: normal;
    line-height: 30px;
    text-transform: initial;
}

.single-footer .recent-desc h6 a:hover,
.footer-list li a:hover {
    /*color: #fff;*/
}

.single-footer .recent-desc span {
    color: #f1f1f1;
    font-size: 14px;
} 

.footer-list li {
    line-height: 40px;
    position: relative; 
}
.gaps_footer-list li {
    line-height: 35px;
    position: relative;
}

section.top_footer {
    padding: 10px 0px;
}

.footer-list li,
.footer-list li a {
    /*color: #f1f1f1;*/
    font-size: 16px;
}

.footer-social li a:hover,
.footer-list li a:hover {
    /*color: #fff;*/
}

.quick-link li a {
    text-transform: capitalize;
}

.contact-info li {
    padding-left: 35px;
    line-height: 28px;
}

.contact-info li:not(:last-child) {
    margin-bottom: 20px;
}

.contact-info li:before {
    content: "\f1ab";
    font-family: "Material-Design-Iconic-Font";
    position: absolute;
    left: 0;
    top: 0;
    font-size: 24px;
}

.contact-info li.mail:before {
    content: "\f159";
}

.contact-info li.phone:before {
    content: "\f2be";
}

.newsletter-text li p {
    font-size: 16px;
    margin-bottom: 20px;
}

.footer-search {
    position: relative;
}

.footer-search input {
    background: transparent none repeat scroll 0 0;
    border: 1px solid #444445;
    color: #f1f1f1;
    font-size: 16px;
    font-weight: 300;
    height: 45px;
    padding: 0 50px 0 20px;
    width: 100%;
}

.footer-search button {
    background: transparent none repeat scroll 0 0;
    border: medium none;
    color: #f1f1f1;
    font-size: 16px;
    line-height: 45px;
    position: absolute;
    right: 20px;
    top: 0;
}

.footer-social li:not(:last-child) {
    margin-right: 30px;
}

.footer-list .footer-social li {
    line-height: 1;
}

.copyright,.copyright a {
    color: #bfbfbf;
}
.copyright a:hover{
    color: #fff;
}

/*----------------------------------------*/
/* 9. Blog & Blog Details CSS
/*----------------------------------------*/

.blog-area .row [class*="col-"] {
    margin-bottom: 40px;
}

.single-ponno-blog img {
    width: 100%;
    height: 100%;
}

.single-ponno-blog .small-btn a {
    border: 1px solid #232323;
    border-radius: 25px;
    color: #232323;
    line-height: 38px;
    margin-top: 25px;
    padding: 0 25px;
}

.single-ponno-blog .small-btn a:hover {
    color: #fff;
    background: #0438a1;
    border-color: #0438a1;
}

.blog-content {
    padding-top: 20px;
}

.blog-left-sidebar-desc {
    padding-left: 20px;
}

.blog-right-sidebar-desc {
    padding-right: 20px;
}

.blog-img img {
    width: 100%;
}

.blog-content h4 a {
    color: #333;
    display: block;
    font-size: 18px;
    font-weight: 600;
    /*text-transform: uppercase;*/
}

.meta-box {
    margin: 15px 0 12px;
}

.meta-box li {
    display: inline-block;
}

.meta-box li {
    display: inline-block;
    line-height: 25px;
    margin-right: 20px;
    text-transform: capitalize;
}

.meta-box li i {
    margin-right: 5px;
}

.meta-box li a {
    display: inline-block;
    font-size: 14px;
    line-height: 25px;
    margin-right: 20px;
    text-transform: capitalize;
}

.blog-content .small-btn {
    margin-top: 30px;
}

.blog-content .small-btn a {
    padding: 10px 25px;
}

.meta-box li a:hover,
.blog-content h4 a:hover {
    color: #0438a1;
}

.blog-brown-color .meta-box li a:hover,
.blog-brown-color .blog-content h4 a:hover {
    color: #ba9f74;
}

.blog-img,
.blog-hero-img {
    position: relative;
    overflow: hidden;
}

.single-ponno-blog .blog-img:hover img {
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
}

.entry-meta {
    left: 10px;
    line-height: 18px;
    position: absolute;
    text-align: center;
    top: 10px;
    width: 55px;
}

.entry-meta .date {
    background: #fff none repeat scroll 0 0;
    padding: 12px 15px;
    text-transform: uppercase;
}

.date span {
    display: block;
    font-size: 14px;
    font-weight: 400;
    line-height: 14px;
}

.date p {
    display: block;
    font-size: 25px;
    font-weight: 600;
    margin-bottom: 2px;
}

.ponnoi-blog .meta-box li a:hover,
.ponnoi-blog .blog-content h4 a:hover {
    color: #0438a1;
}

.pagination-blog {
    text-align: center;
}

.pagination-blog li a {
    background: #ffffff none repeat scroll 0 0;
    border: 1px solid #e7e7e7;
    color: #444;
    display: block;
    font-size: 16px;
    height: 35px;
    line-height: 35px;
    text-align: center;
    width: 40px;
}

.pagination-blog li {
    display: inline-block;
    margin-right: 1px;
}

.pagination-blog li.active a,
.pagination-blog li a:hover {
    background: #0438a1 none repeat scroll 0 0;
    color: #ffffff;
    border-color: #0438a1;
}

.newsletter-box.blog-details-box form {
    position: relative;
}

.newsletter-box.blog-details-box .subscribe {
    background: #ffffff none repeat scroll 0 0;
    border: 1px solid #ebebeb;
    height: 47px;
    line-height: 47px;
    margin-top: 0;
    padding: 11px 90px 10px 20px;
    width: 100%;
}

.newsletter-box.blog-details-box .submit {
    background: #292929 none repeat scroll 0 0;
    border: medium none;
    color: #ffffff;
    font-size: 12px;
    font-weight: 600;
    height: 47px;
    line-height: 50px;
    margin-top: 0;
    padding: 0 15px;
    position: absolute;
    right: 0;
    text-transform: uppercase;
    top: 0;
    -webkit-transition: all 300ms ease 0s;
    transition: all 300ms ease 0s;
}

.newsletter-box.blog-details-box .submit:hover {
    background: #0438a1 none repeat scroll 0 0;
}

/* blog details css */

.blog-details {
    padding-right: 20px;
}

.blog-details.blog-details-two {
    padding-right: 0;
    padding-left: 20px;
}

.submit-review .login-btn {
    margin-bottom: 0;
}

.details-meta {
    margin-bottom: 30px;
}

.meta-box.meta-blog {
    border-bottom: 1px solid #ebebeb;
    margin-bottom: 30px;
    margin-top: 13px;
    padding-bottom: 15px;
}

.blogquote.blockquote {
    background: #f1f1f1 none repeat scroll 0 0;
    margin: 40px 0;
    padding: 45px;
    border-left: 3px solid #0438a1;
}

.blogquote.blockquote p {
    font-size: 18px;
    line-height: 30px;
    padding-bottom: 10px;
}

.blockquote-footer {
    color: #222;
    font-size: 100%;
    font-weight: 500;
    letter-spacing: 1px;
}

.blog-dtl-header {
    font-size: 28px;
    font-weight: 600;
    line-height: 1;
    text-transform: capitalize;
}

.tags-social {
    border-bottom: 1px solid #ebebeb;
    margin-bottom: 15px;
    padding-bottom: 10px;
}

.t-list {
    font-weight: 600;
    text-transform: capitalize;
}

.tags-social li a {
    font-size: 16px;
    margin-left: 5px;
    text-transform: capitalize;
}

.tags-social li a:hover,
.pagination li a:hover {
    color: #0438a1;
}

.pagination li a {
    font-size: 15px;
    font-weight: 500;
    line-height: 1;
    text-transform: capitalize;
}

.pagination li a i.fa-long-arrow-left {
    margin-right: 5px;
}

.pagination li a i.fa-long-arrow-right {
    margin-left: 5px;
}

.submit-review .form-group input,
.submit-review textarea {
    -moz-border-bottom-colors: none;
    -moz-border-left-colors: none;
    -moz-border-right-colors: none;
    -moz-border-top-colors: none;
    border-color: currentcolor currentcolor #eee;
    -o-border-image: none;
    border-image: none;
    border-radius: 0;
    border-style: none none solid;
    border-width: medium medium 1px;
    color: #222;
    padding-bottom: 20px;
    padding-left: 0;
    width: 100%;
}

.submit-review .form-group {
    margin-bottom: 45px;
}

.submit-review textarea {
    height: 150px;
}

.submit-review .form-group input:focus,
.submit-review textarea:focus {
    border-color: #0438a1;
}

.single-comment {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}

.comments-area .single-comment:not(:last-child) {
    margin-bottom: 70px;
}

.reply-comment {
    margin-left: 135px;
}

.author .single-comment {
    background: #fafafa none repeat scroll 0 0;
    margin-bottom: 0;
    padding: 40px;
}

.comment-img {
    margin-right: 20px;
}

.comment-desc h6 {
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 0;
    text-transform: capitalize;
}

.author h6 {
    margin-bottom: 5px;
}

.comment-desc h6 a {
    color: #323232;
    font-size: 18px;
    font-weight: 600;
}

.comment-title span {
    display: inline-block;
    font-size: 15px;
    margin: 5px 0 4px;
}

.comment-reply a {
    font-size: 13px;
    font-weight: 600;
    text-transform: capitalize;
}

.comment-reply a:hover,
.comment-desc h6 a:hover {
    color: #0438a1;
}

.sidebar-header {
    border-bottom: 4px double #303030;
    display: inline-block;
    font-size: 22px;
    font-weight: 600;
    line-height: 22px;
    margin-bottom: 35px;
    padding-bottom: 10px;
    text-transform: capitalize;
}

.categorie-list a::before {
    content: "";
    font-family: FontAwesome;
    font-size: 13px;
    padding-right: 5px;
}

.categorie-list li a {
    background: #fff none repeat scroll 0 0;
    font-weight: 500;
    padding-right: 20px;
    text-transform: capitalize;
}

.categorie-list li span {
    background: #fff none repeat scroll 0 0;
    float: right;
    padding-left: 20px;
}

.categorie-list li:not(:last-child) {
    margin-bottom: 12px;
    padding-bottom: 12px;
}

.all-recent-post .single-recent-post:not(:last-child) {
    margin-bottom: 30px;
}

.single-recent-post {
    overflow: hidden;
}

.recent-img {
    float: left;
    margin-right: 15px;
    width: 90px;
}

.recent-img img {
    width: 100%;
}

.recent-desc {
    overflow: hidden;
}

.recent-desc span {
    display: inline-block;
    font-size: 15px;
}

.recent-desc h6 a {
    display: block;
    font-size: 16px;
    margin-bottom: 5px;
    text-transform: capitalize;
    line-height: 22px;
}

.recent-desc h6 a:hover,
.categorie-list li a:hover {
    color: #0438a1;
}

.tag-list {
    margin: 0 -6px;
}

.tag-list li a {
    background-color: #232323;
    border: 1px solid #efefef;
    color: #fff;
    display: inline-block;
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 1px;
    margin: 0 6px 10px;
    padding: 8px 20px;
    text-transform: uppercase;
}

.tag-list li a:hover {
    background: #0438a1;
}

/*----------------------------------------*/
/* 10. Breadcrumb CSS
/*----------------------------------------*/

.breadcrumb-area {
    background: #efefef none repeat scroll 0 0;
    padding: 20px 0;
}

.breadcrumb-area .breadcrumb {
    background-color: transparent;
    border-radius: 0;
    list-style: outside none none;
    margin-bottom: 0;
    padding: 0;
}

.breadcrumb-item a,
.breadcrumb-item {
    text-transform: capitalize;
}

.breadcrumb-item a:hover,
.breadcrumb-item.active {
    color: #0438a1;
}

/*----------------------------------------*/
/* 11. Shop Page CSS
----------------------------------------*/

/* shop sidebar css */

.sidebar .form-check {
    padding-left: 0;
}

.sidebar-title {
    border-bottom: 1px solid #ededed;
    display: block;
    font-size: 20px;
    font-weight: 600;
    line-height: 35px;
    margin-bottom: 25px;
    position: relative;
    text-transform: capitalize;
}

.sidebar-title::after {
    background: #0438a1 none repeat scroll 0 0;
    bottom: -1px;
    content: "";
    display: block;
    height: 1px;
    position: absolute;
    width: 100px;
}

/* price slider css */

.ui-slider-handle.ui-state-default.ui-corner-all {
    background: #0438a1 none repeat scroll 0 0;
    border: medium none;
    border-radius: 50%;
    height: 13px;
    margin-left: -1px;
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    width: 13px;
}

.slider-sidebar {
    margin-top: 40px;
}

.ui-slider-range.ui-widget-header.ui-corner-all {
    background: #d7d7d7 none repeat scroll 0 0;
    border-radius: 0;
    height: 4px;
}

.ui-widget.ui-widget-content {
    background: #ededed none repeat scroll 0 0;
    border: medium none;
    height: 4px;
}

.ui-slider-horizontal .ui-slider-handle {
    margin-left: 0;
}

.ui-slider-handle.ui-corner-all.ui-state-default.ui-state-focus {
    outline: medium none;
}

.amount-range {
    background: rgba(0, 0, 0, 0) none repeat scroll 0 0;
    border: medium none;
    font-size: 15px;
    margin-top: 10px;
    padding: 5px 0;
}

.amount-range,
.price-button {
    width: 100%;
    word-spacing: 15px;
}

.flter-option.mb-80 {
    padding-right: 15px;
}

/* price slider css end */

.sidbar-style li {
    -webkit-transition: all 300ms ease-in 0s;
    transition: all 300ms ease-in 0s;
}

.sidbar-style .form-check label {
    cursor: pointer;
    text-transform: capitalize;
    -webkit-transition: all 0.3s ease-in-out 0s;
    transition: all 0.3s ease-in-out 0s;
}

.sidebar li.form-check:not(:last-child) {
    margin-bottom: 12px;
}

.sidebar .form-check {
    padding-left: 0;
}

.color-option li {
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}

.color-option li a {
    padding: 5px 0;
    text-transform: capitalize;
}

.color-option li a:hover,
.sidbar-style .form-check label:hover {
    color: #0438a1;
}

.color-option li span {
    -webkit-box-shadow: 0 0 3px 0 rgba(0, 0, 0, 0.15);
    box-shadow: 0 0 3px 0 rgba(0, 0, 0, 0.15);
    display: block;
    height: 15px;
    margin-right: 5px;
    width: 15px;
}

.color-option li span.white {
    background: #fff none repeat scroll 0 0;
}

.color-option li span.orange {
    background: #f39c11 none repeat scroll 0 0;
}

.color-option li span.blue {
    background: #5d9cec none repeat scroll 0 0;
}

.color-option li span.yellow {
    background: #f1c40f none repeat scroll 0 0;
}

.color-option li span.black {
    background: #434A54 none repeat scroll 0 0;
}

.color-option li span.biege {
    background: #f5f5dc none repeat scroll 0 0;
}

.color-option li span.green {
    background: #A0D468 none repeat scroll 0 0;
}

.color-option li span.pink {
    background: #FCCACD none repeat scroll 0 0;
}

.sidebar-banner img,
.shop-banner img {
    width: 100%;
}

.sidebar-banner::before {
    background: rgba(255, 255, 255, 0.2) none repeat scroll 0 0;
    bottom: 0;
    content: "";
    left: 50%;
    opacity: 1;
    position: absolute;
    right: 50%;
    top: 0;
    -webkit-transition: all 900ms ease-in 0s;
    transition: all 900ms ease-in 0s;
}

.sidebar-banner::after {
    background: rgba(255, 255, 255, 0.2) none repeat scroll 0 0;
    bottom: 50%;
    content: "";
    left: 0;
    opacity: 1;
    position: absolute;
    right: 0;
    top: 50%;
    -webkit-transition: all 900ms ease-in 0s;
    transition: all 900ms ease-in 0s;
}

.sidebar-banner:hover::before {
    left: 0;
    opacity: 0;
    right: 0;
}

.sidebar-banner:hover::after {
    bottom: 0;
    opacity: 0;
    top: 0;
}

/* shop page css */

.border-default {
    padding: 15px;
    border: 1px solid #ebebeb;
}

.single-ponno-product.border-none {
    border-right: none !important;
}

.grid-list-top .tabs-area>li {
    margin-left: 0;
    margin-right: 10px;
}

.grid-list-view .tabs-area li a {
    border-radius: 4px;
    color: #333;
    display: block;
    font-size: 20px;
    padding: 0;
    text-align: center;
}

.grid-list-view .tabs-area li a.active {
    color: #0438a1;
}

.grid-list-top .tabs-area>li span,
.toolbar-sorter label,
.show-items {
    font-size: 15px;
}

.grid-list-top.border-default {
    padding: 15px;
}

.grid-list-view span {
    padding-left: 40px;
}

.toolbar-sorter label {
    font-weight: 500;
    margin-bottom: 0;
    margin-right: 15px;
    width: 65px;
}

.toolbar-sorter {
    width: 355px;
}

.main-toolbar-sorter .nice-select {
    height: 35px;
    line-height: 32px;
    z-index: 55;
    background: #f8f8f8;
    font-size: 15px;
}

#grid-view .single-ponno-product {
    margin-bottom: 30px;
}

#list-view .single-ponno-product {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}

#list-view .single-ponno-product {
    /*border: 1px solid #e5e5e5;*/
    margin: 8px 8px 30px;
    padding: 30px;
}

#list-view .single-ponno-product .pro-img {
    -ms-flex-preferred-size: 33.416%;
    flex-basis: 33.416%;
    max-width: 100%;
    padding-right: 15px;
}

#list-view .single-ponno-product .pro-content {
    -ms-flex-preferred-size: 66.584%;
    flex-basis: 66.584%;
    padding-bottom: 0;
    padding-left: 15px;
    padding-top: 0;
    text-align: left;
}

#list-view .single-ponno-product .pro-info p {
    font-size: 16px;
    line-height: 26px;
}

#list-view .single-ponno-product .pro-content h4 a {
    font-size: 18px;
}

#list-view .single-ponno-product .pro-content p+p {
    margin-top: 18px;
}

#list-view .single-ponno-product .pro-content .special-price {
    font-size: 20px;
}

#list-view .single-ponno-product .pro-add-cart {
    opacity: 1;
    visibility: visible;
    bottom: 0;
    position: static;
    left: 0;
    -webkit-transform: translateX(0);
    transform: translateX(0);
    margin: 0;
}

#list-view .single-ponno-product .pro-add-cart a {
    margin-top: 0;
}

#list-view .single-ponno-product .pro-actions-link {
    background: transparent none repeat scroll 0 0;
    border-radius: 0;
    margin-left: 10px;
    opacity: 1;
    padding: 0;
    position: static;
    visibility: visible;
}

#list-view .single-ponno-product .sticker-new,
#list-view .single-ponno-product .sticker-sale {
    top: 0;
}

#list-view .single-ponno-product .pro-actions {
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    /*margin-top: 30px;*/
}

#list-view .single-ponno-product .pro-actions-link a {
    display: inline-block;
    background: transparent none repeat scroll 0 0;
    border: 1px solid #e5e5e5;
    border-radius: 100%;
    -webkit-box-shadow: 1px 1px 0 0 #fff;
    box-shadow: 1px 1px 0 0 #fff;
    color: #454545;
    float: left;
    height: 38px;
    line-height: 38px;
    margin-right: 10px;
    width: 38px;
}

#list-view .single-ponno-product .pro-actions-link a:hover {
    background: #0438a1;
    color: #fff;
    border-color: #0438a1;
}

.shop-breadcrumb-area.border-default {
    padding: 20px;
}

.pfolio-breadcrumb-list li {
    display: inline;
}

.pfolio-breadcrumb-list li a {
    font-size: 15px;
    font-weight: 400;
    padding: 0 5px;
}

.pfolio-breadcrumb-list li.active a {
    color: #acaaa6;
}

.pfolio-breadcrumb-list li i {
    font-size: 16px;
}

.pfolio-breadcrumb-list li.prev a i {
    margin-right: 8px;
}

.pfolio-breadcrumb-list li.next a i {
    margin-left: 8px;
}

.pfolio-breadcrumb-list li:hover a {
    color: #0438a1;
}

/*----------------------------------------*/
/* 12. Product Details CSS
-----------------------------------------*/

.main-product-thumbnail .tab-content img,
.product-thumbnail .thumb-menu div img {
    width: 100%;
}

.thumb-menu.owl-carousel .owl-item a {
    border: 1px solid #e5e5e5;
    display: block;
}

.thumb-menu.owl-carousel .owl-item a:hover {
    border-color: #0438a1;
}

#myModal .close:focus,
#myModal .close:hover {
    color: #0438a1;
}

#myModal .close {
    position: relative;
    top: -10px;
    right: -5px;
}

.modal-content .modal-header {
    border-bottom: 0 none;
    padding-bottom: 0;
}

.modal-content .modal-body {
    padding: 0 40px 40px;
}
.modal-body-login {
    padding: 120px 20px 40px !important;
}

.modal-content .social-sharing ul li a {
    font-size: 14px;
    height: 35px;
    line-height: 35px;
    width: 35px;
}

.quick-thumb-content .modal-lg {
    max-width: 970px;
    margin: 70px auto;
}

.product-thumbnail .thumb-menu .nav-link {
    padding: 0;
}

.main-product-thumbnail .tab-content {
    /*border: 1px solid #ededed;*/
    margin-bottom: 20px;
}

.thumb-bg .tabs-area {
    border-bottom: medium none;
}

.thumb-menu .owl-stage-outer {
    margin: 0 -1px;
}

.thumb-menu .owl-nav div {
    border-radius: 0;
    font-size: 15px;
    height: 35px;
    left: -10px;
    line-height: 36px;
    width: 35px;
}

.thumb-menu .owl-nav div.owl-next {
    right: -10px;
    left: auto;
}

.thumb-menu:hover .owl-nav div {
    opacity: 1;
}

.product-header {
    font-size: 22px;
    font-weight: 500;
    line-height: 28px;
    margin-bottom: 10px;
    text-transform: capitalize;
}

.rating-pro i,
.review-list i {
    color: #0438a1;
    font-size: 12px;
}

.rating-summary li a {
    display: inline-block;
    font-size: 14px;
    line-height: 21px;
    text-transform: capitalize;
}

.rating-summary li {
    display: inline-block;
    margin-right: 8px;
}

.rating-summary li.read-review::before,
.rating-summary li.write-review::before {
    color: #555;
    content: "";
    font-family: FontAwesome;
    font-size: 15px;
    font-weight: 400;
    line-height: 1;
    margin-right: 6px;
}

.rating-summary li.write-review:before {
    content: "\f040";
}

.rating-summary li a:hover,
.rating-summary li a:hover {
    color: #0438a1;
}

.modal-body .pro-list-features {
    border-bottom: 1px solid #e5e5e5;
    border-top: 1px solid #e5e5e5;
    padding: 25px 0;
}

.pro-list-features {
    margin-top: 25px;
}

.pro-list-features li {
    line-height: 24px;
}

.pro-list-features li a {
    color: #0438a1;
}

.pro-desc-details {
    /*border-bottom: 1px solid #e5e5e5;*/
    /*border-top: 1px solid #e5e5e5;*/
    line-height: 25px;
    /*margin-top: 25px;*/
    padding: 25px 0;
}

.thubnail-desc h3 {
    font-size: 24px;
}

.pro-thumb-price span:not(:last-child) {
    margin-right: 5px;
}

.pro-thumb-price .special-price {
    font-size: 28px;
}

.pro-thumb-price .old-price {
    font-size: 18px;
    vertical-align: top;
}

.saving-price {
    background: #343434 none repeat scroll 0 0;
    border-radius: 20px;
    color: #fff;
    display: inline-block;
    font-size: 12px;
    font-weight: 500;
    height: 30px;
    line-height: 31px;
    padding: 0 15px;
    text-align: center;
    text-transform: uppercase;
}

.nice-select {
    font-size: 15px;
}

.product-size .nice-select {
    padding-right: 40px;
}

.product-size .nice-select .option {
    padding-right: 36px;
}

.thubnail-desc label,
.social-sharing ul li label {
    display: block;
    margin-bottom: 5px;
    text-transform: capitalize;
}

.product-size select,
.quantity {
    background-color: #ffffff;
    border: 1px solid #ebebeb;
    color: #7a7a7a;
    width: 70px;
}

.quantity {
    padding: 11px;
}

.color-list li {
    border: 1px solid #ccc;
    display: inline-block;
    margin-right: 7px;
    padding: 2px;
    -webkit-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;
}

.color-list li a {
    display: block;
    height: 20px;
    width: 20px;
}

.quatity-stock ul li:first-child {
    margin-bottom: 10px;
}

.quatity-stock ul li:not(:last-child) {
    margin-right: 25px;
}

.pro-cart {
    background: #0438a1 none repeat scroll 0 0;
    border: medium none;
    border-radius: 5px;
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    line-height: 12px;
    padding: 14px 30px;
    text-transform: uppercase;
}
.pro-cart-login {
    background: #0438a1 none repeat scroll 0 0;
    border: medium none;
    border-radius: 5px;
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    line-height: 12px;
    padding: 8px 19px;
    text-transform: uppercase;
}

.pro-cart:hover {
    background: #0438a1;
    color: white;
}


.color-list li.active,
.color-list li:hover {
    border-color: #ff0000;
}

.color-list li a.black {
    background: #000;
}

.color-list li a.white {
    background: #fff;
}

.color-list li a.orange {
    background: #f39c11 none repeat scroll 0 0;
}

.color-list li a.paste {
    background: #5d9cec none repeat scroll 0 0;
}

.in-stock {
    color: #333;
    font-size: 14px;
    font-weight: 600;
    text-transform: capitalize;
}

.in-stock i {
    color: #333;
    font-size: 16px;
    margin-right: 5px;
}

.social-sharing ul li a {
    background: white none repeat scroll 0 0;
    border: 1px solid #777;
    border-radius: 100%;
    color: #4b4b4b;
    display: block;
    height: 40px;
    line-height: 40px;
    text-align: center;
    width: 40px;
}

.social-sharing ul li a:hover {
    background: #0438a1;
    border-color: #0438a1;
    color: #fff;
}

.social-sharing ul li {
    display: inline-block;
}

.social-sharing ul li:not(:last-child) {
    margin-right: 10px;
}

.product-policy p {
    color: #666;
    padding: 5px 0;
}

.product-policy p i {
    color: #333333;
    font-size: 20px;
    margin-right: 15px;
    vertical-align: middle;
}

.thumnail-desc .tabs-area {
    /*border-bottom: 1px solid #e5e5e5;*/
    display: block;
    padding: 15px 0;
    text-align: center;
}

.tab-content.thumb-content {
    padding: 30px;
}

.thumb-desc-inner {
    /*border: 1px solid #e5e5e5;*/
}

.main-thumb-desc.tabs-area>li {
    display: inline-block;
    margin: 0 15px;
}

.main-thumb-desc.tabs-area>li>a {
    border-bottom: 2px solid transparent;
    font-size: 16px;
    font-weight: 600;
    line-height: 30px;
    padding: 0;
    text-transform: uppercase;
}

.main-thumb-desc li a.active {
    border-bottom: 2px solid #0438a1;
    color: #0438a1;
}

.main-thumb-desc li a:hover {
    color: #0438a1;
}

#dtail p {
    line-height: 25px;
}

.border-default {
    border: 1px solid #ededed;
    border-radius: 3px;
    padding-bottom: 30px;
}

.universal-padding {
    padding-left: 15px;
    padding-right: 15px;
}

.group-title {
    -moz-box-align: center;
    -moz-box-pack: justify;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    border-bottom: 1px solid #ebebeb;
    color: #363f4d;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    margin-bottom: 20px;
    padding-bottom: 25px;
    position: relative;
}

.group-title h2 {
    font-size: 18px;
    font-weight: 600;
    text-transform: uppercase;
}

.review-mini-title {
    color: #292929;
    font-size: 18px;
    font-weight: 500;
    margin: 30px 0;
    text-transform: capitalize;
}

.review-list li {
    text-align: left;
}

.review-list li>span {
    display: inline-block;
    font-weight: 500;
    margin-right: 5px;
    width: 49px;
}

.review-list li label span {
    font-weight: 500;
}

.review-list li label {
    left: 120px;
    position: relative;
}

.review-list li label a {
    color: #303030;
    font-weight: 500;
}

.review-list li label a:hover {
    color: #0438a1;
}

.review-title {
    border-bottom: 1px solid #ebebeb;
    font-size: 18px;
    font-weight: 600;
    line-height: 25px;
    padding-bottom: 25px;
    padding-top: 15px;
}

.review-title span {
    font-weight: 500;
}

.riview-field input,
.riview-field textarea {
    border: 1px solid #ebebeb;
    -webkit-box-shadow: none;
    box-shadow: none;
    width: 60%;
}

.riview-field label {
    font-weight: 500;
}

.customer-btn,
.return-customer-btn {
    background: #0438a1 none repeat scroll 0 0;
    border: medium none;
    color: #ffffff;
    cursor: pointer;
    display: inline-block;
    font-size: 20px;
    font-weight: 500;
    margin-top: 20px;
    padding: 10px 30px 8px;
    text-align: center;
    text-transform: uppercase;
    -webkit-transition: all 300ms ease-in 0s;
    transition: all 300ms ease-in 0s;
}

.customer-btn:hover {
    background: #303030 none repeat scroll 0 0;
    color: #fff;
}

.return-customer-btn {
    background: #0438a1;
}

.return-customer-btn:hover {
    background: #0438a1;
}

/*----------------------------------------*/
/* 13. Compare Page CSS
/*----------------------------------------*/

.table>tbody>tr>td,
.table>tbody>tr>th,
.table>tfoot>tr>td,
.table>tfoot>tr>th,
.table>thead>tr>td,
.table>thead>tr>th {
    border: 1px solid #ebebeb;
}

.table-responsive>.table>tbody>tr>td,
.table-responsive>.table>tbody>tr>th,
.table-responsive>.table>tfoot>tr>td,
.table-responsive>.table>tfoot>tr>th,
.table-responsive>.table>thead>tr>td,
.table-responsive>.table>thead>tr>th {
    white-space: normal;
}

.compare-content>tbody>tr>td {
    padding: 20px 15px;
    vertical-align: middle;
}

.product-title {
    font-size: 16px;
    font-weight: 600;
    width: 120px;
}

.product-description {
    font-weight: 500;
    width: 200px;
}

.product-description p {
    line-height: 24px;
    text-align: left;
}

.product-description i {
    color: #666;
    font-size: 18px;
}

.compare-detail-content {
    padding-top: 16px;
}

.product-description .compare-cart {
    background: #0438a1 none repeat scroll 0 0;
    border-radius: 20px;
    color: #ffffff;
    display: inline-block;
    font-size: 11px;
    padding: 6px 0 6px 22px;
    position: relative;
    width: 120px;
}

.product-description .compare-cart:hover {
    background: #303030 none repeat scroll 0 0;
    color: #ffffff;
}

.product-description .compare-cart:hover i {
    border-color: #303030;
}

.product-description .compare-cart i {
    background: #ffffff none repeat scroll 0 0;
    border-radius: 50%;
    -webkit-box-shadow: 0 1px 1px #efefef;
    box-shadow: 0 1px 1px #efefef;
    color: #777777;
    font-size: 12px;
    height: 32px;
    left: 0px;
    line-height: 31px;
    position: absolute;
    text-align: center;
    top: 0;
    width: 31px;
    border: 1px solid #0438a1;
    -webkit-transition: all 0.3s;
    transition: all 0.3s;
}

.product-description img {
    width: 100%;
}

.compare-details {
    text-align: left;
}

.product-description .product-rating i {
    font-size: 12px;
    color: #0438a1;
}

.compare-details span {
    display: inline-block;
    font-size: 15px;
    text-transform: capitalize;
    margin-bottom: 3px;
}

.compare-details h4 {
    font-size: 18px;
    font-weight: 600;
    line-height: 1;
}

.compare-details h4 a {
    font-size: 16px;
    text-transform: capitalize;
}

.compare-details h4 a:hover,
.product-description .fa-trash-o:hover {
    color: #0438a1;
    cursor: pointer;
}

/*----------------------------------------*/
/* 14. Checkout CSS
/*----------------------------------------*/

.coupon-area .coupon-info input {
    background: transparent;
    border: 1px solid #e5e5e5;
}

.coupon-area .coupon-info .checkout-coupon .code:focus {
    border: 1px solid #e5e5e5;
}

.coupon-accordion h3 {
    /*background-color: #f5f5f5;*/
    /*border-top: 3px solid #0438a1;*/
    font-size: 20px;
    font-weight: 400;
    list-style: outside none none;
    margin-bottom: 30px;
    /*padding: 1em 2em 1em 3.5em;*/
    position: relative;
    text-transform: capitalize;
    width: auto;
}

/*.coupon-accordion h3::before {*/
/*    color: #777;*/
/*    content: "\f0f6";*/
/*    display: inline-block;*/
/*    font-family: 'FontAwesome';*/
/*    left: 16px;*/
/*    position: absolute;*/
/*    top: 14px;*/
/*}*/

.coupon-accordion span {
    color: #555;
    cursor: pointer;
    -webkit-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;
}

.coupon-accordion span:hover,
p.lost-password a:hover {
    color: #0438a1;
}

.coupon-content {
    /*border: 1px solid #e5e5e5;*/
    display: none;
    margin-bottom: 20px;
    padding: 0px;
}

.coupon-info {}

.coupon-info p.coupon-text {
    margin-bottom: 15px
}

.form-row>label {
    margin: 0;
}

.coupon-info p {
    margin-bottom: 0
}

.coupon-info p.form-row-first {}

.coupon-info p.form-row-first label,
.coupon-info p.form-row-last label {
    color: inherit;
    display: block;
}

.coupon-info p.form-row-first label span.required,
.coupon-info p.form-row-last label span.required {
    color: red;
    font-weight: 700;
}

.coupon-info p.form-row-first input,
.coupon-info p.form-row-last input {
    border: 1px solid #ccc;
    height: 34px;
    margin: 0 0 14px;
    max-width: 100%;
    padding: 0 0 0 10px;
    width: 370px;
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
}

.coupon-info p.form-row input[type="submit"]:hover,
p.checkout-coupon input[type="submit"]:hover {
    background: #0438a1 none repeat scroll 0 0;
}

.coupon-info p.form-row input[type="checkbox"] {
    height: inherit;
    position: relative;
    top: 2px;
    width: inherit;
}

p.lost-password {
    margin-top: 15px;
}

p.lost-password a {
    color: #6f6f6f;
    font-size: 12px;
}

p.checkout-coupon input[type=text] {
    height: 36px;
    padding-left: 10px;
    width: 170px;
    font-size: 13px;
}

p.checkout-coupon input[type="submit"] {
    background: #333 none repeat scroll 0 0;
    border: medium none;
    border-radius: 0;
    color: #fff;
    height: 36px;
    margin-left: 6px;
    padding: 5px 10px;
    -webkit-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;
    width: inherit;
}

.coupon-checkout-content {
    margin-bottom: 30px;
    display: none;
}

.checkbox-form>h3 {
    border-bottom: 1px solid #ebebeb;
    font-size: 24px;
    font-weight: 600;
    margin-bottom: 30px;
    padding-bottom: 10px;
    text-transform: uppercase;
}

.ship-different-title h3 label {
    display: inline-block;
    margin-right: 20px;
    font-size: 24px;
    font-weight: 600;
}

.country-select label,
.country-select label,
.checkout-form-list label {
    margin: 0 0 5px;
    display: block;
    font-weight: 600;
}

.country-select label span.required,
.checkout-form-list label span.required {
    color: red;
}

.country-select select {
    border: 1px solid #ddd;
    height: 32px;
    padding-left: 10px;
    width: 100%;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background: #fff;
    -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.075);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.075)
}

.checkout-form-list label {
    font-size: 16px;
}

.checkout-form-list label span.required {}

.checkout-form-list input[type="text"],
.checkout-form-list input[type="password"],
.checkout-form-list input[type="email"] {
    background: #ffffff none repeat scroll 0 0;
    border: 1px solid #ebebeb;
    border-radius: 0;
    -webkit-box-shadow: 0 0 2px rgba(0, 0, 0, 0.075);
    box-shadow: 0 0 2px rgba(0, 0, 0, 0.075);
    height: 40px;
    padding: 0 0 0 10px;
    width: 100%;
}

.country-select .nice-select {
    height: 40px;
    line-height: 40px;
}

.checkout-form-list {}

.checkout-form-list input[type="checkbox"] {
    display: inline-block;
    height: inherit;
    margin-right: 10px;
    position: relative;
    top: 0;
    width: inherit;
}

.create-acc label {
    color: #333;
    display: inline-block;
}

.checkout-form-list input[type=password] {}

.create-accounts {
    display: none
}

.ship-different-title h3 label {
    display: inline-block;
    margin-right: 20px;
    margin-bottom: 0;
}

.order-notes textarea {
    background: #ffffff none repeat scroll 0 0;
    border: 2px solid #eceff8;
    font-size: 14px;
    height: 90px;
    padding: 15px;
    width: 100%;
}

#ship-box-info {
    display: none;
    padding-top: 30px;
}

.your-order {
    background: #f2f2f2 none repeat scroll 0 0;
    padding: 30px 40px 45px;
}

.your-order h3 {
    border-bottom: 1px solid #ebebeb;
    font-size: 24px;
    margin: 0 0 20px;
    padding-bottom: 10px;
    text-transform: uppercase;
    width: 100%;
    font-weight: 600;
}

.your-order-table table {
    background: rgba(0, 0, 0, 0) none repeat scroll 0 0;
    border: medium none;
    width: 100%;
}

.your-order-table table th,
.your-order-table table td {
    border-bottom: 1px solid #d8d8d8;
    border-right: medium none;
    color: #222;
    font-size: 15px;
    padding: 15px 0;
    text-align: center;
}

.amount {
    font-size: 16px;
    font-weight: 600;
}

.your-order-table table th {
    border-top: medium none;
    font-family: Montserrat, Arial, Helvetica, sans-serif;
    font-weight: normal;
    text-align: center;
    text-transform: uppercase;
    vertical-align: middle;
    white-space: nowrap;
    width: 250px;
    font-weight: 600;
}

.your-order-table table .shipping ul li input {
    position: relative;
    top: 2px;
}

.your-order-table table .shipping th {
    vertical-align: top;
}

.your-order-table table .order-total th {
    border-bottom: medium none;
    font-size: 16px;
    font-weight: 600;
}

.your-order-table table .order-total td {
    border-bottom: medium none;
}

.your-order-table table tr.cart_item:hover {
    background: #F9F9F9
}

.your-order-table table tr.order-total td span {
    color: #0438a1;
    font-size: 22px;
    font-weight: 600;
}

.cart-subtotal .amount {
    font-weight: 600;
}

.your-order-table table {}

.payment-method {
    margin-top: 40px;
}

.ship-different-title h3 {
    line-height: 1;
}

.payment-accordion {}

.payment-accordion h3 {
    border-bottom: 0 none;
    margin-bottom: 10px;
    padding-bottom: 0;
}

.payment-accordion h3 a {
    color: #6f6f6f;
    font-size: 14px;
    padding-left: 25px;
    position: relative;
    text-transform: capitalize;
    text-decoration: none
}

.payment-accordion h3 a:before,
.payment-accordion h3.open a:after {
    content: "";
    display: inline-block;
    font-family: fontawesome;
    font-size: 20px;
    left: 0;
    position: absolute;
    top: -2px;
}

.payment-accordion h3.open a:after {
    content: "\f056";
}

.payment-content {}

.payment-content p {
    font-size: 13px;
}

.payment-accordion img {
    height: 60px;
    margin-left: 15px;
}

.order-button-payment input {
    background: #0438a1;
    border: medium none;
    color: #fff;
    font-size: 17px;
    font-weight: 600;
    height: 50px;
    margin: 20px 0 0;
    padding: 0;
    text-transform: uppercase;
    -webkit-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;
    width: 100%;
}

.order-button-payment input:hover {
    background: #444
}

/* .card-header {
    background-color: #f5f5f5;
    padding: 0;
} */

.card {
    margin-top: 5px;
}

.card .btn-link {
    color: #333;
    font-size: 18px;
    font-weight: 600;
}

/*----------------------------------------*/
/* 15. Cart & Wish List CSS
/*----------------------------------------*/

.cart-main-area .section-title h2,
.coupon-area .section-title h2 {
    text-transform: capitalize;
    color: #555;
    font-weight: 500;
}

.shipping_method input {
    background: #eceff8 none repeat scroll 0 0;
    border: 2px solid #eceff8;
    -webkit-box-shadow: none;
    box-shadow: none;
    color: #626262;
    font-size: 14px;
    height: 45px;
    padding-left: 10px;
    width: inherit;
}

.cart-title-area {
    padding-top: 30px;
}

.car-header-title {}

.car-header-title h2 {
    font-size: 20px;
    margin: 0;
    text-transform: uppercase;
}

.table-content table {
    background: #fff none repeat scroll 0 0;
    border-color: #e5e5e5;
    border-radius: 0;
    border-style: solid;
    border-width: 1px 0 0 1px;
    text-align: center;
    width: 100%;
}

.table-content table th {
    border-top: medium none;
    font-size: 17px;
    font-weight: 600;
    padding: 20px 10px;
    text-align: center;
    text-transform: capitalize;
    vertical-align: middle;
    white-space: nowrap;
}

.table-content table th,
.table-content table td {
    border-bottom: 1px solid #e5e5e5;
    border-right: 1px solid #e5e5e5;
}

.table-content table td {
    border-top: medium none;
    padding: 20px 10px;
    vertical-align: middle;
    font-size: 13px;
}

.table-content table td input {
    background: #e5e5e5 none repeat scroll 0 0;
    border: medium none;
    border-radius: 3px;
    font-size: 15px;
    font-weight: normal;
    height: 40px;
    padding: 0 5px 0 10px;
    width: 60px;
}

.table-content table td.product-subtotal {
    font-size: 16px;
    font-weight: 600;
    width: 120px;
}

.table-content table td.product-name a,
.product-stock-status span {
    font-size: 16px;
    font-weight: 500;
    margin-left: 10px;
    text-transform: capitalize;
}

.product-stock-status span {
    color: #0438a1;
    font-weight: 500;
}

.table-content table td.product-name {
    width: 270px;
}

.table-content table td.product-thumbnail {
    width: 100px;
}

.table-content table td.product-remove a {
    display: inline-block;
    font-size: 18px;
    text-align: center;
    -webkit-transition: all 0.3s ease-in;
}

.table-content table .product-price .amount {
    font-size: 16px;
    font-weight: 600;
}

.table-content table td.product-remove i:hover,
.table-content table td.product-remove a:hover i {
    color: #0438a1;
}

.table-content table td.product-quantity {
    width: 180px;
}

.table-content table td.product-remove {
    width: 150px;
}

.table-content table td.product-price {
    width: 130px;
}

.table-content table td.product-name a:hover,
.buttons-cart a:hover {
    color: #0438a1;
}

.product-thumbnail img {
    width: 100%;
}

.buttons-cart {
    margin-bottom: 30px;
    overflow: hidden;
}

.buttons-cart input,
.coupon input[type="submit"],
.buttons-cart a,
.coupon-info p.form-row input[type="submit"] {
    background: #303030 none repeat scroll 0 0;
    border: medium none;
    border-radius: 0;
    -webkit-box-shadow: none;
    box-shadow: none;
    color: #fff;
    display: inline-block;
    float: left;
    font-size: 14px;
    font-weight: 600;
    height: 40px;
    line-height: 41px;
    margin-right: 15px;
    padding: 0 20px;
    text-shadow: none;
    text-transform: uppercase;
    -webkit-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;
    white-space: nowrap;
    width: inherit;
}

.wc-proceed-to-checkout {
    clear: both;
    display: block;
}

.buttons-cart input:hover,
.coupon input[type="submit"]:hover,
.buttons-cart a:hover {
    background: #0438a1 none repeat scroll 0 0;
    color: #fff;
}

.buttons-cart a {
    color: #fff;
    float: left;
    height: 40px;
}

.coupon input[type=submit] {}

.cart_totals {
    width: 100%;
}

.cart_totals h2 {
    border-bottom: 2px solid #222;
    display: inline-block;
    font-size: 28px;
    margin: 0 0 35px;
    text-transform: uppercase;
    font-weight: 600;
}

.cart_totals table {
    border: medium none;
    margin: 0;
    text-align: right;
}

.cart_totals table th {
    border: medium none;
    font-size: 14px;
    font-weight: bold;
    padding: 0 20px 12px 0;
    text-align: right;
    text-transform: uppercase;
    vertical-align: top;
}

.cart_totals table td {
    border: medium none;
    padding: 0 0 12px;
    vertical-align: top;
}

.cart_totals table td .amount {
    color: #0438a1;
    font-size: 15px;
    font-weight: bold;
    margin-left: 5px;
    text-align: right;
    text-transform: uppercase;
}

.cart_totals table td ul#shipping_method {
    list-style: outside none none;
    margin: 0;
    padding: 0;
}

.cart_totals table td ul#shipping_method li {
    float: left;
    margin: 0 0 10px;
    padding: 0;
    text-indent: 0;
    width: 100%;
}

.cart_totals table td ul#shipping_method li input {
    margin: 0;
    position: relative;
    top: 2px;
}

.cart_totals table {}

a.shipping-calculator-button {
    font-weight: bold;
    color: #6f6f6f;
}

a.shipping-calculator-button:hover {
    color: #83CBDC
}

.cart_totals table tr.order-total th,
.cart_totals table tr.order-total .amount {
    font-size: 20px;
    text-transform: uppercase;
    white-space: nowrap;
    font-weight: 600;
}

.cart_totals table tr.order-total th {
    font-weight: 700;
}

.wc-proceed-to-checkout a {
    background: #303030 none repeat scroll 0 0;
    color: #fff;
    display: inline-block;
    font-size: 13px;
    font-weight: 600;
    height: 45px;
    line-height: 46px;
    margin-top: 20px;
    padding: 0 20px;
    text-transform: uppercase;
}

.wc-proceed-to-checkout a:hover {
    background: #0438a1;
}

.amount del {
    font-size: 13px;
    margin-left: 5px;
    font-weight: 600;
}

.cart-main-area.wish-list .product-remove {
    width: 20px;
}

.cart-main-area.wish-list table td.product-thumbnail {
    width: 140px;
}

.cart-main-area.wish-list .product-add-to-cart a {
    background: #0438a1 none repeat scroll 0 0;
    color: #ffffff;
    display: block;
    font-size: 14px;
    font-weight: 700;
    margin: 0 auto;
    padding: 10px 56px;
    text-transform: uppercase;
    width: 260px;
}

.cart-main-area.wish-list .product-add-to-cart a:hover {
    background: #1a1a1a;
}

.cart-main-area.wish-list td.product-add-to-cart {
    width: 240px;
}

/*----------------------------------------*/
/* 16. About us CSS
/*----------------------------------------*/

.about-content .section-title {
    margin-bottom: 5px;
}

.our-team .section-title {
    margin-bottom: 25px;
}

.skill-content {
    margin-left: 50px;
    overflow: hidden;
    padding-top: 40px;
}

.skill .progress-bar {
    background: #303030 none repeat scroll 0 0;
    position: relative;
}

.skill .progress .lead {
    font-size: 16px;
    font-weight: 500;
    left: 0;
    position: absolute;
    text-transform: capitalize;
    top: -35px;
    width: 100%;
    z-index: 99;
}

.progress-bar>span {
    color: #303030;
    font-size: 14px;
    height: 24px;
    line-height: 25px;
    position: absolute;
    right: -12px;
    top: -38px;
    width: auto;
}

.progress-bar>span::before {
    border-left: 7px solid transparent;
    border-right: 7px solid transparent;
    border-top: 10px solid #000;
    bottom: -8px;
    content: "";
    left: 50%;
    position: absolute;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
}

.skill .progress {
    background: #ebebeb none repeat scroll 0 0;
    border-radius: 0;
    -webkit-box-shadow: none;
    box-shadow: none;
    height: 13px;
    margin-bottom: 55px;
    overflow: visible;
    position: relative;
}

.skill .progress:last-child {
    margin-bottom: 0;
}

.all-skill {
    overflow: hidden;
}

.single-skill {
    background: #303030 none repeat scroll 0 0;
    float: left;
    padding: 80px 0;
    text-align: center;
    width: 25%;
}

.skill-area .login-btn {
    margin-bottom: 0;
    margin-top: 32px;
}

.single-team {
    background: #fff none repeat scroll 0 0;
    padding: 10px 10px 0;
    position: relative;
}

.team-info {
    padding: 15px;
}

.team-info h4 {
    font-size: 18px;
    font-weight: 600;
    line-height: 18px;
    margin-bottom: 3px;
    text-transform: capitalize;
}

.team-info p {
    font-size: 14px;
    font-style: italic;
    font-weight: 400;
    text-transform: capitalize;
}

.team-link {
    background: #fff none repeat scroll 0 0;
    left: 0;
    opacity: 0;
    padding: 10px;
    position: absolute;
    right: 0;
    text-align: center;
    top: 48%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    -webkit-transition: all 0.6s ease 0s;
    transition: all 0.6s ease 0s;
    width: 100%;
    z-index: 5;
}

.team-link ul li {
    display: inline-block;
    margin: 0 10px;
}

.team-link ul li a {
    color: #0438a1;
    font-size: 20px;
    -webkit-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;
}

.team-link ul li a:hover {
    color: #333;
}

.single-team:hover .team-link {
    opacity: 1;
    top: 50%;
}

.brand-logo-active.owl-carousel img {
    margin: auto;
    width: auto;
}

.logo-active {
    border-top: 1px solid #e5e5e5;
}

.about-title h3 {
    display: inline-block;
    font-size: 28px;
    padding-bottom: 15px;
    font-weight: 600;
}

.about-title.team-title h3 {
    margin-bottom: 15px;
}

/*----------------------------------------*/
/* 17. Your Account CSS
/*----------------------------------------*/

.dashboard-upper-info {
    border-bottom: 1px solid #ebebeb;
    border-top: 1px solid #ebebeb;
    margin-bottom: 45px;
}

.dashboard-content .tab-pane:not(.active) {
    display: none;
}

.dashboard-upper-info .d-single-info {
    padding: 30px 20px;
}

.dashboard-upper-info [class*="col-"]:not(:last-child) .d-single-info {
    border-right: 1px solid #ebebeb;
}

.user-name {
    position: relative;
    padding-left: 25px;
}

.view,
.view-cart {
    background: #0438a1 none repeat scroll 0 0;
    color: #fff;
    padding: 5px 12px;
    text-transform: capitalize;
}

.user-name::before {
    color: #555;
    content: "";
    font-family: FontAwesome;
    font-size: 18px;
    left: 0;
    position: absolute;
    top: 0;
}

.account-dashboard p {
    font-size: 16px;
}

.dashboard-upper-info a {
    font-size: 16px;
}

.view-cart {
    display: inline-block;
    text-transform: capitalize;
}

.user-name span {
    color: #303030;
    font-size: 15px;
    font-weight: 500;
}

.dashboard-list li:not(:last-child) a {
    border-bottom: 1px solid #ebebeb;
}

.dashboard-list li a {
    color: #0438a1;
    display: block;
    padding: 12px 0;
    text-transform: capitalize;
}

.dashboard-list li a.active,
.dashboard-list li a:hover {
    color: #128aed;
}

.view:hover,
.view:focus,
.show-btn:hover,
.view-cart:hover,
.view-cart:focus {
    background: #303030 none repeat scroll 0 0;
    color: #fff;
}

.dashboard-list li a.active:after {
    content: "\f105";
    font-family: FontAwesome;
    margin-left: 5px;
    -webkit-transition: 0.10s;
    transition: 0.10s;
}

.dashboard-content {
    border: 1px solid #ebebeb;
    padding: 30px;
}

.dashboard-content h3 {
    text-transform: capitalize;
}

.dashboard-content h3 {
    border-bottom: 1px solid #ebebeb;
    font-size: 24px;
    line-height: 24px;
    margin-bottom: 20px;
    padding-bottom: 15px;
    text-transform: capitalize;
}

.dashboard-content .table-responsive .table>tbody>tr>td,
.dashboard-content .table-responsive .table>tbody>tr>th,
.dashboard-content .table-responsive .table>tfoot>tr>td,
.dashboard-content .table-responsive .table>tfoot>tr>th,
.dashboard-content .table-responsive .table>thead>tr>td,
.dashboard-content .table-responsive .table>thead>tr>th {
    border: none;
}

.dashboard-content .table-responsive>.table>thead {
    border-bottom: 1px solid #ebebeb;
}

.dashboard-content .table-responsive .table>thead>tr>th {
    font-size: 14px;
    font-weight: 600;
}

.dashboard-content .table-responsive .table>tbody>tr>td {
    font-size: 16px;
}

.view-cart i {
    font-size: 15px;
    margin-right: 5px;
}

.log-out {
    color: #0438a1;
}

.log-out:hover {
    color: #333;
}

#dashboard a {
    color: #0438a1;
    text-transform: capitalize;
}

#dashboard a:hover {
    color: #128aed;
}

.billing-address {
    font-size: 16px;
    font-weight: 700;
    margin-top: 25px;
    margin-bottom: 10px;
}

#address .view {
    display: inline-block;
    margin: 5px 0;
    font-size: 14px;
}

.show-btn {
    background: #878787 none repeat scroll 0 0;
    border-radius: 0;
    color: #fff;
    font-size: 12px;
    height: 35px;
    position: absolute;
    right: 15px;
    text-transform: uppercase;
    top: 0;
    -webkit-transition: all 0.5s ease-in-out 0s;
    transition: all 0.5s ease-in-out 0s;
    line-height: 24px;
}

.show-btn:hover {
    background: #0438a1;
}

.show-btn:focus {
    -webkit-box-shadow: none;
    box-shadow: none;
}

.login-form .form-check label {
    font-size: 15px;
}

.login-form .form-control,
.login-form .custom-radio,
.login-form span {
    height: 35px;
    padding-top: 5px;
}

.login-form .form-control {
    font-size: 15px;
}

/*----------------------------------------*/
/* 18. Login CSS
/*----------------------------------------*/

.login-header {
    font-size: 25px;
    font-weight: 600;
    line-height: 1;
    margin-bottom: 40px;
    text-transform: inherit;
}

.login-form {
    background: white none repeat scroll 0 0;
    -webkit-box-shadow: 2px 2px 11px 0 rgba(0, 0, 0, 0.1);
    box-shadow: 2px 2px 11px 0 rgba(0, 0, 0, 0.1);
    padding: 30px 30px 20px;
}

.login-form input,
.nice-select.bootstrap-select {
    background: #ebebeb none repeat scroll 0 0;
    border: 1px solid #ebebeb;
    border-radius: 0;
    font-size: 14px;
    height: auto;
}

.nice-select.bootstrap-select {
    width: 100%;
}

.address-area .nice-select .list {
    height: 150px;
    overflow-y: auto;
}

.nice-select.bootstrap-select:active,
.nice-select.bootstrap-select.open,
.nice-select.bootstrap-select:focus {
    border-color: #ebebeb;
}

.nice-select.bootstrap-select .list {
    width: 100%;
}

.login-details a {
    display: block;
    font-size: 15px;
    margin-bottom: 20px;
    text-transform: capitalize;
}

.login-btn {
    background: #333 none repeat scroll 0 0;
    border: medium none;
    color: #fff;
    display: inline-block;
    font-size: 13px;
    font-weight: 600;
    padding: 8px 18px 8px;
    text-transform: uppercase;
}

.login-btn:hover {
    background: #0438a1;
    color: #fff;
}

.login-footer p a {
    color: #303030;
}

.login-footer p,
.login-footer a {
    color: #444;
    display: inline-block;
}

.login-details a:hover {
    color: #0438a1;
}

.login-footer p a:hover {
    color: #0438a1;
}

.login-footer.text-center {
    border-top: 1px solid #ebebeb;
    padding-top: 20px;
}

.show-btn {
    background: #333 none repeat scroll 0 0;
    border-radius: 0;
    color: #fff;
    font-size: 12px;
    height: 35px;
    position: absolute;
    right: 15px;
    text-transform: uppercase;
    top: 0;
    -webkit-transition: all 0.5s ease-in-out 0s;
    transition: all 0.5s ease-in-out 0s;
}

.show-btn:hover {
    background: #303030;
}

/*----------------------------------------*/
/* 19. Register Account & Contact Form CSS
/*----------------------------------------*/

.goole-map>div {
    min-height: 600px;
}

.register-form p {
    margin-bottom: 20px;
}

.register-form a {
    font-size: 16px;
}

.register-form a:hover {
    color: #0438a1;
}

.register-form {
    padding: 40px;
}

.contact-form input {
    background: #ebebeb none repeat scroll 0 0;
    border: 1px solid #ebebeb;
    font-size: 15px;
    height: 40px;
    margin-bottom: 20px;
    max-width: 100%;
    -webkit-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;
}

.send-email input {
    background: #0438a1 none repeat scroll 0 0;
    margin-bottom: 0;
}

.contact-form textarea {
    height: 200px;
    font-size: 15px;
    border: 1px solid #ebebeb;
    background: #ebebeb;
    -webkit-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;
}

.register-contact {
    background: #fff none repeat scroll 0 0;
    -webkit-box-shadow: 2px 2px 11px 0 rgba(0, 0, 0, 0.1);
    box-shadow: 2px 2px 11px 0 rgba(0, 0, 0, 0.1);
    padding: 40px;
}

.form-message.error {
    color: red;
}

.form-message.success {
    color: green;
}

/*----------------------------------------*/
/* 20. Forgot Password CSS
/*----------------------------------------*/

.password-forgot legend {
    border-bottom: 1px solid #ededed;
    font-size: 18px;
    font-weight: 500;
    line-height: 16px;
    margin-bottom: 20px;
    padding: 7px 0;
}

.password-forgot label {
    font-size: 16px;
}

.password-forgot .form-group input {
    background: #ebebeb none repeat scroll 0 0;
    border: 1px solid #ebebeb;
    height: 40px;
}

.password-forgot .form-group input:focus {
    background: #fff;
}

.require {
    color: #cc0000;
    font-weight: 600;
    margin-right: 5px;
}

.password-forgot .form-group {
    margin-bottom: 0;
}

/*----------------------------------------*/
/* 21. 404 Page CSS
/*----------------------------------------*/

.error-text h1 {
    color: #0438a1;
    font-size: 200px;
    font-weight: 700;
    letter-spacing: 10px;
    line-height: 150px;
    margin-bottom: 30px;
}

.error-text h2 {
    font-size: 32px;
    font-weight: 600;
    line-height: 32px;
    margin-bottom: 20px;
    text-transform: uppercase;
}

.error-text>p {
    font-size: 18px;
    line-height: 30px;
    margin-bottom: 25px;
    padding: 0 280px;
}

#search-form {
    display: inline-block;
    position: relative;
    text-align: center;
    width: 450px;
}

#search-form input {
    background: #f8f8f8 none repeat scroll 0 0;
    border: 1px solid #e9e9e9;
    border-radius: 30px;
    color: #333;
    float: left;
    font-size: 14px;
    height: 45px;
    padding: 0 50px 0 20px;
    width: 100%;
}

#search-form button {
    background: rgba(0, 0, 0, 0) none repeat scroll 0 0;
    border: medium none;
    color: #4f4f4f;
    font-size: 18px;
    height: 100%;
    position: absolute;
    right: 0;
    top: 0;
    -webkit-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;
    width: 50px;
}

#search-form button:hover {
    color: #0438a1;
}

.after-before-separator:before, .after-before-separator:after {
    width: 35px;
    margin: 0 15px;
    height: 1px;
    background: #0438a1;
    content: "";
    display: inline-block;
    vertical-align: super;
}

.error-button a {
    background: #0438a1 none repeat scroll 0 0;
    border-radius: 35px;
    color: #ffffff;
    display: inline-block;
    font-size: 14px;
    font-weight: bold;
    letter-spacing: 1px;
    line-height: 40px;
    margin-top: 40px;
    padding: 1px 30px 0;
    text-transform: uppercase;
    -webkit-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;
}

.error-button a:hover {
    background: #303030;
}

.gaps{
    padding: 0 45px; 
    position: relative;
    line-height: 1;
}
/*.gaps a{*/
/*    color: white;*/
/*}*/
.noUi-target {
  border-color: transparent;
  border-radius: 0; }
  
  .colorpicker-slider .sliders.noUi-target#red, .colorpicker-slider .sliders.noUi-target#green, .colorpicker-slider .sliders.noUi-target#blue {
  margin: 0.625rem;
  display: inline-block;
  height: 12.5rem; }

.colorpicker-slider .sliders.noUi-target#red .noUi-connect {
  background: #c0392b; }

.colorpicker-slider .sliders.noUi-target#green .noUi-connect {
  background: #27ae60; }

.colorpicker-slider .sliders.noUi-target#blue .noUi-connect {
  background: #2980b9; }
  
  .noUi-horizontal {
  height: 0.125rem;
  border: 0;
  margin-bottom: 0.625rem; }

.noUi-horizontal .noUi-handle, .noUi-vertical .noUi-handle {
  height: 0.9375rem;
  width: 0.9375rem;
  border-radius: 3.125rem;
  box-shadow: none;
  border: none;
  background-color: var(--primary); }
  .noUi-horizontal .noUi-handle::after, .noUi-horizontal .noUi-handle::before, .noUi-vertical .noUi-handle::after, .noUi-vertical .noUi-handle::before {
    display: none; }

.noUi-vertical .noUi-handle {
  left: -0.35rem;
  top: -0.375rem; }

.noUi-horizontal .noUi-handle {
  top: -0.4375rem;
  cursor: pointer; }

html:not([dir=rtl]) .noUi-horizontal .noUi-handle {
  right: -0.375rem; }
  
  
.span-error {
    margin-top: -10px;
    color: red;
    margin-left: 10px;
    margin-bottom: 10px;
    display: none;
    font-size: 12px;
}
/* .whats-app {
    position: fixed;
    width: 60px;
    height: 60px;
    bottom: 122px;
    right: 20px;
    color: #FFF;
    border-radius: 50px;
    text-align: center;
    font-size: 30px;
    z-index: 100;
    } */ 

.whats-app {
    border-radius: 50%;
    bottom: 10px;
    cursor: pointer;
    font-weight: normal;
    height: 60px;
    line-height: 56px;
    position: fixed;
    text-align: center;
    transition: all 500ms ease 0s;
    width: 60px;
    z-index: 99999999;
    right: 20px; 
}
.call-app {
    border-radius: 50%;
    bottom: 50px;
    cursor: pointer;
    font-weight: normal;
    height: 55px;
    line-height: 56px;
    position: fixed;
    text-align: center;
    transition: all 500ms ease 0s;
    width: 55px;
    z-index: 99999999;
    left: 30px; 
}

.call-popup {
            height: 100%;
            width: 0;
            position: fixed;
            top: 230px;
            right: 0;
            background-color: #f1f1f1;
            overflow-x: hidden;
            transition: 0.5s;
            padding-top: 60px;
        }

        /* The form inside the popup */
        .call-popup-content {
            margin: 20px;
            padding: 20px;
        }

        .call-popup input[type="text"] {
            width: 100%;
            padding: 10px;
            margin: 8px 0;
            display: inline-block;
            border: 1px solid #ccc;
            border-radius: 4px;
            box-sizing: border-box;
        }

        .call-popup input[type="submit"] {
            width: 100%;
            background-color: #0438a0;
            color: white;
            padding: 12px;
            border: none;
            border-radius: 4px;
            cursor: pointer;
        }

        .call-popup input[type="submit"]:hover {
            background-color: black;
        }

        .close-btn {
            position: absolute;
            top: 10px;
            right: 25px;
            font-size: 36px;
            color: #000;
            text-decoration: none;
        }

        /* Button to open the popup */
        .open-btn {
            font-size: 13px;
            padding: 0px 15px;
            background-color: #0438a1;
            color: white;
            border: none;
            cursor: pointer;
            border-radius: 30px;
	    bottom: 150px;
        }

        .open-btn:hover {
            background-color: black;
        }