/*
Template Name: Synrok - Mobile HTML Template
Author: codervent
Email: codervent@gmail.com
File: style.css
*/

/*
Table of index
*/

/* 
- General
- Header
- Searchbar
- loader
- Footer
- Pag Content
- Utilities
- Radio & Checkbox
- Product Details
- Metis Menu
- Order Tracking
- Animation
 */


@media screen and (max-height: 480px) {
    .top-header { height: 40px !important; }
    .wrapper .page-footer { height: 40px !important; }
}

/*General*/
[data-href] { cursor: pointer; }
.course-class { background-color: #fafafa; border-top: 1px dotted; padding: 8px; }
    .course-class:nth-child(2n+1) { background-color: #dfdfdf; }
    .course-class:last-child { border-bottom: none; }



body { font-size: 14px; color: #646464; font-family: 'Open Sans', sans-serif; background-color: #ffffff; }

a { text-decoration: none; }

.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 { color: #212529; }

::placeholder { color: #000; opacity: 0.3 !important; }

::-webkit-scrollbar { width: 0px; }


/* Header */

.top-header { width: auto; height: 60px; background-color: #25282c; padding-left: 1.0rem; padding-right: 1.0rem; }

.page-content { min-height: calc(100vh - 120px); padding: 1rem; }

.top-header .navbar .nav-button a { font-size: 25px; color: #212529; }

.top-header .navbar .top-right-menu a.nav-link { font-size: 20px; color: #212529; }

.top-header .top-right-menu .cart-badge { position: absolute; top: 6px; right: 0px; color: #fff; width: 20px; height: 20px; font-size: 12px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background-color: #212529; }

/* Searchbar */

.top-header .navbar .searchbar { display: none; }

.top-header .navbar .full-search-bar { display: flex; align-items: center; width: 100%; position: fixed; left: 0; right: 0; top: 0; bottom: 0; border-bottom: 1px solid #dee2e6; z-index: 100; background-color: #ffffff; height: 65px; padding: 0 1.0rem; -webkit-animation: .6s cubic-bezier(.25, .8, .25, 1) 0s normal forwards 1 animdropdown; animation: .6s cubic-bezier(.25, .8, .25, 1) 0s normal forwards 1 animdropdown; }

    .top-header .navbar .full-search-bar .form-control { background-color: #f6f6f6; border-radius: 0.5rem; }

        .top-header .navbar .full-search-bar .form-control:focus { background-color: #ffffff; border: 1px solid #212529; }


.searchbar .search-icon { margin-left: 2rem !important; }

.searchbar .search-close-icon { margin-right: 2rem !important; }

.form-control:focus { color: #212529; background-color: #fff; border-color: #212529; border: 1px solid #212529; outline: 0; box-shadow: 0 0 0 .25rem rgba(33, 37, 41, 0.0) }


/* loader */

.loader-wrapper { position: fixed; top: 0%; left: 0%; width: 100%; height: 100%; z-index: 10000; background-color: #212529; }
    .loader-wrapper img { max-width: 80%; margin: auto; mix-blend-mode: multiply; animation: zoomInOut 0.8s infinite ease-in-out; }

@keyframes zoomInOut {
    0% { transform: scale(0.8); }
    50% { transform: scale(1); }
    100% { transform: scale(0.8); }
}
/* footer */
.page-footer { width: auto; height: 60px; background-color: #25282c; padding-left: 1.0rem; padding-right: 1.0rem; }

    .page-footer .navbar a.nav-link { color: #ffffff; }


        .page-footer .navbar a.nav-link .icon { font-size: 20px; }

        .page-footer .navbar a.nav-link .name { font-size: 14px; }


.sidenav .offcanvas-header { height: auto; }

.sidenav .offcanvas { width: 300px; }

/* Pag Content */

.category-img figure { margin: auto; }

.category-img figcaption { font-size: 12px; color: #212529; text-align: center; padding-top: 5px; font-weight: 600; }


/* Utilities */

.bg-red { background-color: #ff2c2c !important; }

.bg-green { background-color: #21ad61 !important; }

.bg-purple { background-color: #723da6 !important; }

.border-light { border-color: rgba(255, 255, 255, 0.12) !important }

.bg-facebook { background-color: #3b5998 !important; }

.bg-pinterest { background-color: #c8232c !important; }

.bg-linkedin { background-color: #0072b1 !important; }

.bg-apple { background-color: #000 !important; }

.text-purple { color: #723da6 !important; }
.text-orange { color: #ff822c !important; }
.text-cyane { color: #00FFFF !important; }
.text-brown { color: #ce5334 !important; }
.text-ten { color: #5eff00 !important; }
.text-pink { color: #ff006f !important; }

.section-title { color: #212529; font-size: 18px; }

.review-item .client-name { color: #212529; font-size: 14px; }

.product-short-title { color: #212529; font-size: 14px; }

.font-12 { font-size: 12px; }

.rounded-end-0 { border-top-right-radius: 0 !important; border-bottom-right-radius: 0 !important; }

.rounded-start-0 { border-top-left-radius: 0 !important; border-bottom-left-radius: 0 !important; }

.btn-ecomm { font-size: 14px; text-transform: uppercase; font-weight: 600; padding: 0.5rem 1.5rem; border-radius: 0; z-index: 6; }


.filter-menu .nav-link { border-radius: 0; color: #363d46; background-color: #fbfbfb; border-bottom: 1px solid #eee; }

    .filter-menu .nav-link.active { color: #1b222d; background-color: #ffffff; }

.filter-content .product-number { color: #b7b7b7; margin-left: 7px; }


/* Radio & Checkbox */

.form-check-input,
.form-check-input,
.form-check-label { cursor: pointer; }

.product-number { color: #b7b7b7; margin-left: 7px; }


.form-check-input:checked,
.form-check-input:checked { background-color: #212529; border-color: #212529; }

.form-check-input:focus,
.form-check-input:focus { border-color: #212529; outline: 0; box-shadow: 0 0 0 .25rem rgba(34, 38, 42, 0.0) }

.similar-products a { width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; background-color: #ffffff; color: #212529; font-size: 16px; border-radius: 50%; }

.h-90 { height: 90% !important; }

.rounded-top-left-right-lg { border-top-left-radius: 25px; border-top-right-radius: 25px; }


.offcanvas-footer { background-color: #ffffff; }


/* Product Details */

.product-image-slider .slick-list { margin: 0 0; }

.product-image-slider .slick-slide { margin: 0 0; }


.product-image-slider .slick-dots { bottom: 0; }

.share-product { width: 35px; height: 35px; font-size: 14px; font-weight: 600; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #212529; background-color: #fff; z-index: 1; cursor: pointer; }

    .share-product:hover { color: #212529; }

.product-image-slider .slick-dots li button:before { opacity: 1; color: white; }

.product-image-slider .slick-dots li.slick-active button:before { opacity: 1; color: rgb(0, 0, 0); }


.product-image-slider .slick-prev, .product-image-slider .slick-next { font-size: 24px; color: #fff; opacity: 0.7; background: rgba(255, 255, 255, 0.0); box-shadow: none }

    .product-image-slider .slick-prev:hover, .product-image-slider .slick-next:hover,
    .product-image-slider .slick-prev:focus, .product-image-slider .slick-next:focus { opacity: 1; background: rgba(255, 255, 255, 0.0); box-shadow: none }


.product-image-slider .slick-prev { left: 0; }

.product-image-slider .slick-next { right: 0; }

.width-content { width: fit-content; }

.size-chart div button { width: 50px; height: 50px; display: flex; align-items: center; justify-content: center; font-size: 14px; border: 1px solid #dee2e6; border-radius: 50%; color: #222121; font-weight: 600; background-color: #ffffff; transition: 0.3s cubic-bezier(0.075, 0.82, 0.165, 1); }

    .size-chart div button:hover, .size-chart div button:focus { color: #ffffff; border: 1px solid #212529; background-color: #212529; }


.product-info .product-title { color: #222121; }

.separator { display: flex; align-items: center; }

    .separator .line { height: 1px; flex: 1; background-color: #dee2e6; }

    .separator h3 { padding: 0 1.5rem; }


.wishlist-close { background-color: #ffffff; border-radius: 50%; padding: 10px; margin: 7px; }


.block-button { height: 60px; display: flex; align-items: center; justify-content: center; }

.payment-input { width: 1.2em; height: 1.2em; }

.profile-item,
.profile-item:hover,
.profile-item:focus { color: #141619; text-decoration: none; }


.noti-box { width: 40px; height: 40px; color: #fff; display: flex; align-items: center; justify-content: center; font-size: 18px; font-weight: 600; background-color: #eff1f3; border-radius: 50%; }

.forgot-link { color: #646464; }

    .forgot-link:hover { color: #646464; }


.social-login a { width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 16px; background-color: #eaebeb; border-radius: 50%; }

.verification-controls input { width: 50px; height: 50px; text-align: center; padding: 0; }

.splash-bg-2 { background-image: url(../../../../../../images.pexels.com/photos/5655511/pexels-photo-56555117874.jpg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1); background-size: cover; background-position: center; background-attachment: fixed; }


/* Metis Menu */

.sidebar-nav .metismenu a { font-size: 14px; font-weight: 500; padding: 10px 16px; border-bottom: 1px solid #dee2e6; }


    .sidebar-nav .metismenu .mm-active > a,
    .sidebar-nav .metismenu a:hover,
    .sidebar-nav .metismenu a:focus { color: #212529; background-color: #f8f9fa; }

.sidebar-nav .metismenu li:first-child { margin-top: 0px; }

.sidebar-nav .metismenu .mm-active > a { border-radius: 0; }

.sidebar-nav .metismenu li + li { margin-top: 0px; }

.sidebar-nav .metismenu ul a { padding: 8px 16px 8px 42px; }


/* Order Tracking */

.timeline-with-icons { border-left: 1px solid #dee2e6; position: relative; list-style: none; }

    .timeline-with-icons .timeline-item { position: relative; }

        .timeline-with-icons .timeline-item:after { position: absolute; display: block; top: 0; }

    .timeline-with-icons .timeline-icon.active { color: #fff; background-color: #212529; }

    .timeline-with-icons .timeline-icon { position: absolute; left: -48px; background-color: #f8f9fa; color: #bcc0c5; border-radius: 50%; height: 31px; width: 31px; display: flex; align-items: center; justify-content: center; }



/* animation */

@-webkit-keyframes animdropdown {
    from { -webkit-transform: translate3d(0, 6px, 0); transform: translate3d(0, 6px, 0); opacity: 0 }
    to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); opacity: 1 }
}

@keyframes animdropdown {
    from { -webkit-transform: translate3d(0, 6px, 0); transform: translate3d(0, 6px, 0); opacity: 0 }
    to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); opacity: 1 }
}