@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600&family=Prata&family=Roboto:wght@100;300;400;500;700&display=swap');


/* ======  Start Static Style ======*/

:root {
    --primary-color: #2bcbba;
    --light-color: #d1d8e0;
    --gray-color: #687080;
    --red-color: #ff4757;
    --flashwhite-color: #f1f2f6;
    --white-color: #ffffff;
    --dark-color: #212121;
    --primary-font: 'Montserrat', sans-serif;
    --secound-font: 'Prata', serif ;
    --fs14: 14px;
    --fw600: 600;

    --transition-color: color 0.3s;
    --transition-background: background-color 0.3s;
    --transition-border: border 0.3s;
    --transition-transform: transform 0.3s;

    --shadow: 0px 10px 20px 0px rgb(0 0 0 / 20%);
    --fade: fade-bottom 0.3s cubic-bezier(0.39, 0.575, 0.0565, 1) both;
    
}

html { scroll-behavior: smooth; }

* { margin: 0; padding: 0; }

*,::before,::after { box-sizing: border-box; }

body {
    font-family: var(--primary-font);
    font-size: 16px;
    font-weight: 400;
    line-height: 1.8;
    color: var(--dark-color);
    background-color: var(--white-color);
}

a {
    text-decoration: none;
    color: inherit;
    -webkit-tap-highlight-color: transparent;
}

img { max-width: 100%; vertical-align: middle; }

ul {list-style: none;}

p {margin: 0 0 15px;}

input, textarea, select {font: inherit; width: 100%;}

input[type=checkbox], input[type=radio] {width: auto;}

input::placeholder, textarea::placeholder {color: inherit;}

button {font: inherit;}

strong {font-weight: var(--fw600);}

h1, h2, h3, h4 {
    font-family: var(--secound-font);
    font-weight: 400;
    line-height: normal;
}

h1 {font-size: 2.75em;} 
h2 {font-size: 2.5em;} 
h3 {font-size: 2em;} 
h4 {font-size: 1em;} 

/* ======  Start Static Style ======*/

/*  ------------------- * 
        #Reused Style Start
    * ------------------ */ 

.container { max-width: var(--mx-width, 1200px); padding: 0 var(--gutter, 15px); margin: 0 auto; }
    
.item-floating {
    position: absolute;
    font-size: 10px;
    font-weight: var(--fw600);
    top: -8px;
    right: 0;
    background-color: var(--primary-color);
    color: var(--white-color);
    width: 20px;
    height: 20px;
    border-radius: 50%;
    }

.button > [class*=-btn] {
    font-size: var(--fs14);
    font-weight: var(--fw600);
    text-transform: uppercase;
    padding: 0 30px;
    display: inline-block;
    line-height: 42px;
    border-width: 2px;
    border-style: solid;
    transition: var(--transition-background),
                var(--transition-color),
                var(--transition-border);
    text-decoration: none;
}

.secondary-btn, .primary-btn, .addToWish { border-color: var(--dark-color); }

.addToWish {background-color: white;}

.primary-btn:hover,
.secondary-btn, .addToWish:hover  { background-color: var(--dark-color); color: var(--white-color); }

.secondary-btn:hover { background-color: transparent; border-color: var(--dark-color); color: var(--dark-color); }

.title { font-size: clamp(30px, -0.875em + 8.333vw, var(--fs-max, 40px)); }

.grey-link { color: inherit; transition: var(--transition-color); }

.grey-color,
.grey-link:hover { color: var(--gray-color); text-decoration: none; }

.up a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 45px;
    height: 45px;
    border-radius: 50%;
    position: fixed;
    bottom: 10px;
    right: 10px;
    opacity: 0.5;
    background-color: var(--dark-color);
    color: var(--white-color);
    font-size: 28px;
    transition: all 0.3s ease;
    text-decoration: none;
    z-index: 10;
}

.up a:hover { transform: scale(1.2); opacity: 1; }

    /*  ------------------- * 
        #Reused Style End
    * ------------------ */ 

/*  ------------------- * 
        #Grouped Selector Start
    * ------------------ */ 

.item-floating,
.header-center .branding { display: flex; align-items: center; justify-content: center; }

.list-block a {
    position: relative;
    font-size: var(--fs14);
    color: var(--gray-color);
    padding: 5px 0;
    display: inline-block;
    transition: var(--transition-color);
    text-decoration: none;
}

.list-block a:hover { color: var(--dark-color); }

.list-block a::before {
    content: '';
    position: absolute;
    width: 0;
    height: 0;
    background-color: var(--dark-color);
    left: -15px;
    top: 50%;
    border-radius: 50%;
    transform: translateY(-50%);
    transition: width 0.3s, height 0.3s;
}

.list-block a:hover::before { width: 8px; height: 8px; }

@keyframes fade-bottom {
    0% { transform: translateY(10px); opacity: 0; }

    100% { transform: translateY(0); opacity: 1; }
}

.dot-title { font-size: 20px; font-weight: var(--fw600); line-height: 34px; }

.dot-title a { transition: var(--transition-color); }

.dot-title a:hover,
.dotgrid .product-price .before { text-decoration: none; color: var(--light-color); }

.overlay,
.mobile-menu,
.data-popup,
/* .cart-menu, */
.sidebar { position: fixed; top: 0; right: 0; left: 0; bottom: 0; }

.overlay {
    background-color: var(--dark-color);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    z-index: 999;
    transition: opacity 0.3s,  visibility 0.3s;
}

.overlay.active { opacity: 0.75; visibility: visible; pointer-events: all; }

.scrollto > .wrapper {
    --display: flex;
    padding-bottom: 20px;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scroll-snap-type: inline mandatory;
}

.scrollto .wrapper::-webkit-scrollbar { width: 12px; height: 12px; }

.scrollto .wrapper::-webkit-scrollbar-thumb {
    --border-color: var(var(var(--white-color)));
    background-color: var(--light-color);
    border: 3px solid var(--border-color);
    border-radius: 20px;
}

.scrollto .wrapper:hover::-webkit-scrollbar-thumb { background-color: var(--gray-color); }

.scrollto .wrapper::-webkit-scrollbar-thumb:hover { background-color: var(--gray-color); }

/*  ------------------- * 
        #Grouped Selector End
    * ------------------ */ 

/*  ------------------- * 
        #Header Section Start 
    * ------------------ */ 
.inner-header {
    line-height:  80px;
    background-color: white;
    position: fixed;
    top: 0;
    z-index: 900;
    width:  100%;
}

.inner-header :where(.wrap, .menu > ul),
.list-inline > ul { display: flex; align-items: center;  }

.header-left,
.header-right { flex-grow: 1; }

.header-center nav {
    display: none;
    grid-template-columns: 1fr 1fr;
    gap: 180px;
    max-width: 720px;
}

.header-center .branding {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: 0;
    right: 0;
    pointer-events: none;  
}

.header-center .branding a {
    font-family: var(--primary-font);
    font-size: 30px;
    line-height: inherit;
    pointer-events: auto;
    text-decoration: none;
    padding-right: 50px;
    padding-left: 15px;
}

.header-center .menu > ul > li > a {
    font-size: var(--fs14);
    font-weight: var(--fw600);
    text-transform: uppercase;
    padding: 0 15px;
    text-decoration: none;
}

.header-right ul { justify-content: flex-end; }

.list-inline a,
.menu-trigger,
.close-trigger {
    position: relative;
    font-size: 24px;
    padding: 0 10px;
    line-height: 1;
    display: flex;
    transition: var(--transition-color);
    text-decoration: none;
}

.list-inline a:hover,
.menu-trigger:hover { color: var(--light-color); }

.header-left .list-inline,
.sidebar .widget input[type="checkbox"] { display: none; } 

:where(.header-left, .header-right) li { display: flex; align-items: center; height: 80px; }

.user {
    font-weight: 500; 
    position:absolute; 
    top: 80px; 
    font-size: 14px; 
    background-color: white; 
    padding-top: 20px;
    width: 250px; 
    text-align:left; 
    box-shadow: 0px 10px 20px 0px rgb(0 0 0 / 20%);
    transition: all 3s ease-in-out;
    display: none;
}

.user a { padding: 0 ; font-size: 18px; }

.user li { padding: 0 10px; height: 50px; }

/*
    ----#Header ->> Product Start --- 
*/

.dotgrid .wrapper {
    display: var(--display, grid);
    --grid-col: 175px ;
    grid-template-columns: repeat(auto-fit, minmax(min(var(--grid-col), 100%), 1fr)) ;
    gap: var(--gutter, 30px);
    
}

.dotgrid .dot-image,
.row .dot-image { position: relative; margin-bottom: 15px; overflow: hidden; }

.dotgrid .dot-image > a,
.row .dot-image > a,
.dotgrid .thumbnail.hover,
.row .thumbnail.hover,
.dotgrid .actions { position: absolute; top: 0; left: 0; right: 0; bottom: 0; }

.dotgrid .dot-image > a,
.row .dot-image > a{ z-index: 1; }

.dotgrid .thumbnail.hover,
.row .thumbnail.hover{
    opacity: 0;
    transition: opacity 0.75s ease, 
                transform 1.1s cubic-bezier(0.15, 0.75, 0.5, 1) 0s;
    backface-visibility: hidden;
    transform: translateZ(0);
}

.dotgrid .dot-image:hover .thumbnail.hover { opacity: 1; transform: scale3d(0.95, 0.95, 0.95) translateZ(0); }

.dotgrid .actions {
    z-index: 2;
    top: auto;
    bottom: 45px;
    transform: translate3d(0, 100%, 0);
    opacity: 0;
    transition: all 0.3s cubic-bezier(0.0, 0.2, 1); 
}

.dot-image:hover .actions { opacity: 1; transform: translateZ(0); }

.dotgrid .actions ul { display: flex; justify-content: center; gap: 10px; }

.dotgrid .actions ul li a,
.dotgrid .dot-image .label span,
.card .cord .label span {
    font-size: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    background-color: var(--white-color);
    border-radius: 50%;
    transition: var(--transition-background), var(--transition-color);
}

.dotgrid .actions ul li a:hover { background-color: var(--dark-color); color: var(--white-color); }

.dotgrid .dot-image .label,
.card .cord .label { position: absolute; top: -10px; right: -10px; bottom: auto; }


.dotgrid .dot-image .label span,
.card .cord .label span { font-size: 14px; font-weight: var(--fw600); background-color: var(--primary-color); color: var(--white-color); }

.dotgrid .dot-info { text-align: center; }

.dotgrid .product-price .before,
.card-info .product-price .before { text-decoration: line-through; margin-right: 10px; color: red;}

/*
    ----#Header ->> Product End --- 
*/

/*  
    ----- #Search Field Start ------
    */

    /* .search-float {
        position: fixed;
        top: 0; 
        left: 0;
        right: 0;
        height: 80px;
        background-color: var(--white-color);
        z-index: 1000;
        display: none;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        border-radius: 4px;
    } */

/* .search-float form.search { position: relative; } */

/* form.search :where(.sear, .submit) { position: absolute; left: 0; top: 0; } */

form.search .input { outline: 0; padding: 5px 50px;  border: 2px solid var(--light-color);  font-size: 14;  }

/* Style the search icon */

/* form.search .sear {
    font-size: 14px; 
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px; 
    height: 100%;
    cursor: pointer;
    padding-left: 10px;
    padding-right: 10px;
} */

form.search :where(.submit, .sear:last-child) { left: auto; right: 0; }

form.search .submit {
    border: 2px solid var(--light-color); 
    background-color: transparent;
    color: var(--dark-color); 
    width: 60px; 
    height: 100%;
    right: 0;
    z-index: 1;
    cursor: pointer;
}

form :where(input, textarea, select) {
    font-size: var(--fs14);
    border: 1px solid var(--light-color);
    outline: 0;
    background-color: transparent;
    padding: 0 20px;
    transition: border 0.3s;
}

form :where(input, textarea, select):focus { border-color: var(--dark-color); }

form :where(input, textarea, select)::placeholder { color: var(--gray-color); }

.search .input { display: flex; border: none; height: 50px; font-size: 16px; font-weight: var(--fw600); }

/* .search-float.active { display: block; } */

.subscribe .search .send {
    border: none;
    width: 75px;
    font-size: 18px;
    font-weight: 600;
    position: absolute;
    top: 10px;
    left: 80%;
}
/*  
    ----- #Search Field End ------
    */

    
/*  ------------------- * 
        #Header Section End 
    * ------------------ */ 

/*  ------------------- * 
        #Mobile Menu Section Start 
    * ------------------ */ 

.mobile-menu,
/* .cart-menu, */
.sidebar { z-index: 1001; pointer-events: none; visibility: hidden; opacity: 0; }

.mobile-menu.active,
/* .cart-menu.active, */
.sidebar.active { visibility: visible; opacity: 1; }

.mobile-menu .wrap,
/* .cart-menu .wrap, */
.sidebar > .wrap {
    position: relative;
    max-width: calc(100% - 40px);
    width: 360px;
    height: 100%;
    background-color: var(--white-color);
    pointer-events: auto;
    transform: translateX(--transX, -100%);
    transition: var(--transition-transform);
}

.mobile-menu.active .wrap,
/* .cart-menu.active .wrap, */
.sidebar.active > .wrap { transform: translateX(0); }

.mobile-menu .close-trigger,
.mobile-menu  .child-trigger,
/* .cart-menu .close-trigger, */
.sidebar .close-trigger {
    position: absolute;
    top: 0;
    right: -40px;
    width: 40px;
    height: 40px;
    color: var(--primary-color);
    display: flex;
    align-items: center;
    justify-content: center;
}

.mobile-menu .main-menu,
/* .cart-menu .cart-list, */
.sidebar-content { height: 100%; padding: 0 20px; display: flex; flex-direction: column; }

.mobile-menu nav > ul { padding: 20px 0; }

.mobile-menu nav > ul > li > a {
    position: relative;
    padding: 12px 0;
    font-weight: 500;
    transition: var(--transition-color);
    text-decoration: none;
}

.mobile-menu nav li :where(li, a) { display: block; }

.mobile-menu nav > ul > li > a:hover { color: var(--gray-color); }

.mobile-menu  .child-trigger {
    color: var(--dark-color);
    font-size: 20px;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    border-radius: 50%;
    transition: var(--transition-background);
    z-index: 1;
}

.mobile-menu  .child-trigger:hover { background-color: var(--light-color); }

.mobile-menu nav .sub-menu {
    padding-left: 15px;
    max-height: 0;
    overflow: hidden;
    visibility: hidden;
    transition: 0.3s ease-in-out;
}

.mobile-menu nav li.active .sub-menu { visibility: visible; max-height: 1000px; }

.mobile-menu .button { margin: auto; padding: 20px 0 40px; text-align: center; }

.mobile-menu .button a { display: block; margin-top: 10px; }

.mobile-menu .button .log { padding-right: 10px; }

/*  ------------------- * 
        #Mobile Menu Section End 
    * ------------------ */ 

    /*  ------------------- * 
        #Slider Section Start 
    * ------------------ */ 
.slider { margin-top: 90px; }

.slider :where(.image, .ob-cover) { position: relative; }

.slider .ob-cover { height: 430px; }

.ob-cover img { position: absolute; width: 100%; object-fit: contain; }

.slider .title-info { background-color: var(--white-color);}

.slider .title-info .wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 30px;
    padding-bottom: 5vw;
    max-width: 600px;
    margin: 0 auto;
    text-align: center;
}

.slider .title-info .price {
    position: relative;
    font-size: 40px;
    width: 80px;
    height: 80px;
    margin-top: -40px;
    background-color: var(--dark-color);
    /*color: var(--white-color);*/
    background-color: var(--dark-color);
    color: var(--dark-color);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-family: var(--secound-font);
}

.slider .custom-pagination { position: absolute; right: 30px; top: 30%; }

.slider .custom-pagination .swiper-pagination {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.custom-pagination .swiper-pagination-bullet {
    position: relative;
    width: 24px;
    height: 24px;
    opacity: 1;
    background-color: transparent;
}

.custom-pagination .swiper-pagination-bullet::before {
    content: '';
    position: absolute;
    width: 8px;
    height: 8px;
    top: 50%;
    left: 50%;
    background-color: var(--dark-color);
    border: 1px solid var(--dark-color);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    transition: width 0.2s, height 0.2s, transform 0.2s;
}

.custom-pagination .swiper-pagination-bullet-active::before {
    background-color: transparent;
    width: 15px;
    height: 15px;
}

.slider .title-info :where(span, h3, .button) {
    transform: translateY(30px);
    opacity: 0;
    visibility: hidden;
    transition: transform 0.75s, opacity 0.75s, visibility 0.75s ;
}

.slider .swiper-slide-active .title-info :where(span, h3, .button) {
    transform: translateY(0);
    opacity: 1;
    visibility: visible;
}

.slider .swiper-slide-active .title-info h3 { transition-delay: 0.5s; }

.slider .swiper-slide-active .title-info .button { transition-delay: 0.75s; }

    /*  ------------------- * 
        #Slider Section End 
    * ------------------ */ 

    /*  ------------------- * 
        #Guide Section Start 
    * ------------------ */ 

.page-home main > div:not(.slider),
.inner-footer{ padding: 60px 0; }

.guide { background-color: var(--flashwhite-color); }

main > div .heading { text-align: center; margin-bottom: 60px; }

.guide .dotgrid .wrapper { --grid-col: 260px; }

:is(.guide) .dot-image .thumbnail { position: relative; opacity: unset; border: none; }

.guide .dot-image .thumbnail img { width: 100%; }

.row.cat { display: flex; flex-wrap: wrap; }

.guide .dot-title { --fs14: 18px; --fw600: 400; padding: 10px 0; }

.guide .dot-info p { line-height: 1.4; }

.guide .wrapper .item { width: 350px; scroll-snap-align: start; flex-shrink: 0; }

.guide .scrollto .wrapper::-webkit-scrollbar-thumb { --border-color: #f0f9f8 }

    /*  ------------------- * 
        #Guide Section End 
    * ------------------ */ 

    /*  ------------------- * 
        #Carousal Section Start 
    * ------------------ */ 

.carousel .inner-wrapper { position: relative; }

.carousel .dotgrid .wrapper {  display: flex;  grid-template-columns: unset;  gap: unset; }

.carousel .nav > div::after { content: none; }

.carousel .nav > div {
    width: 40px;
    height: 40px;
    border: 1px solid var(--gray-color);
    border-radius: 50%;
    color: var(--dark-color);
    font-size: 20px;
    -webkit-tap-highlight-color: transparent;
    transition: var(--transition-background),
                var(--transition-color),
                var(--transition-border);
}

.carousel .nav > div:hover { color: var(--white-color); background-color: var(--dark-color); border-color: var(--dark-color); }

.carousel .nav .swiper-button-disabled { opacity: 0; }

.row .item-box { overflow: hidden; }

.row .item-box img{ transition: all 0.3s ease-in-out; }

.row .item-box:hover img { transform: scale3d(1.1, 1.1, 1.1) translateZ(0); }

    /*  ------------------- * 
        #Carousal Section End 
    * ------------------ */ 

    /*  ------------------- * 
        #Categories Section Start 
    * ------------------ */

.background {
    width: 100%;
    min-height: 500px;
    margin-bottom: 50px;
    margin-top: 85px;
    text-align: start;
}

.background .back {
    background-color: rgba(2, 2, 2, 0.5);
    color: white;
    min-height: 500px;
    padding-top: 100px;
    text-align: start;
}

.background .back p{
    max-width: 600px;
}

        /* ==============
            # Product Category Start
            ===================*/

.cats { margin-top: 100px; }

.cats .cont {
    max-width: 95%;
    margin: 0 auto;
}

.cats .card {
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 30px;
    margin-bottom: 300px;
}

.cats .card a { text-decoration: none; }

.cats .card .cord { position: relative; box-shadow: 0 0 3px rgba(0, 0, 0, 0.1); margin-bottom: 15px; overflow: hidden;}

.cats .card .cord .card-image { width: 100%; display: block; margin-bottom: 10px;}

.cats .card .cord .card-info {
    margin-top: 40px;
    text-align: center;
    padding: 15px;
    display: block;
    font-size: 1em;
}

.hover-animation { position: relative; height: 150px; }

.hover-animation img {
    position: absolute;
    left: 0;
    transition: 0.75s ease-in-out;
    height: 175px;
    
}

.hover-animation img.img-front:hover { opacity: 0; cursor: pointer; }

        /* ==============
            # Product Category End
            ===================*/

      /*  ------------------- * 
        #Categories Section End 
    * ------------------ */ 

.page-single .carousel { padding-top: 40px; padding-bottom: 40px; }

    /*  ------------------- * 
        #Products Page  Start 
    * ------------------ */ 

    /*
        ====  # Breadcrumb Start ==== 
        */

.breadcrumb {
    width: 100%;
    line-height: initial;
    padding: 30px 0 50px;
    background-color: var(--white-color);
}

.breadcrumb ul { justify-content: center; }

.breadcrumb ul li { position: relative; margin-right: 10px; }

.breadcrumb ul li:not(:first-child) { padding-left: 25px; }

.breadcrumb ul li:not(:first-child)::before {
    content: '';
    position: absolute;
    left: 0;
    width: 16px;
    height: 16px;
    background: url(../img/angle-right-solid.svg) no-repeat;
    background-size: contain;
}

.breadcrumb ul :where(li, li a) { font-size: var(--fs14); padding: 0; }

.breadcrumb ul li:last-child {
    color: var(--gray-color);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/*
        ====  # Breadcrumb End ==== 
        */

        /*
        ====  # Product Image Satrt ==== 
        */

.product .wrapper { --grid-col: 331px; }

.product .main-image img { width: 100%; }

.product .outer-thumb { display: none; }

.product .outer-thumb .item { height: fit-content !important; cursor: pointer; }

.product .thumb-wrap { position: relative; width: 70px; height: 70px; }

.product .outer-thumb { transition: all 0.5 ease; }

.product .outer-thumb .swiper-slide-thumb-active > div,
.product .outer-thumb .item:hover > div { border: 1px solid rgb(183, 172, 172); }

.product .outer-thumb .swiper-slide-thumb-active img,
.product .outer-thumb .item:hover img { transform: scale3d(0.85, 0.85, 0.85); }

.product .custom-pagination { position: relative; height: 50px; }

        /*
        ====  # Product Image End ==== 
        */

        /*
        ====  # Product Summery Start ==== 
        */

.summary .entry { display: flex; flex-direction: column; gap: 30px; }

.summary .product-group { display: flex; justify-content: space-between; }

.summary .product-price { display: flex; align-items: center; }

.summary .product-price .current { font-size: 30px; }

.summary .product-price .wrap {  position: relative; display: flex; flex-direction: column; padding-left: 30px; }

.summary .product-price .wrap::before,
.product .head-review span::before{
    content: '';
    position: absolute;
    top: 0;
    left: 12px;
    height: 100%;
    width: 1px;
    background-color: var(--gray-color);
    transform: skewX(-25deg);
}

.summary .product-price .discount {
    display: inline-block;
    width: 44px;
    font-size: var(--fs14);
    padding: 5px;
    background-color: var(--primary-color);
    color: var(--white-color);
    margin-left: -10px;
    text-align: center;
    border-radius: 5px;
    line-height: 1;
}

.summary .product-rating { line-height: initial; text-align: right; }

.summary .product-rating a {
    font-size: var(--fs14);
    padding-left: 10px;
    color: var(--gray-color);
    text-decoration: dotted;
    text-decoration-line: underline;
    white-space: nowrap;
    transition: var(--transition-color);
}

.summary .product-rating a:hover { color: var(--dark-color); }

input.checker { position: relative; padding: 5px; margin: 20px 40px 0 2px; cursor: pointer; }

input.checkers { position: relative; padding: 5px; margin: 20px 10px 0 5px; cursor: pointer; }

input.checker::after,  
input.checker::before,
input.checkers::after,  
input.checkers::before { content:''; display: block; position: absolute; top: 50%; left: 50%; }

input.checkers::before {
    width: 16px;
    height: 16px;
    transform: translate(-50%, -50%);
    background-color: transparent;
    border-radius: 50%;
    transition: var(--transition-border);
}

input.checkers::after {
    width: 10px;
    height: 10px;
    transform: translate(-50%, -50%) scale(0);
    border-radius: 50%;
    transition: var(--transition-transform);
}


input.silver.checker::before,
input.gold.checker::before,
input.rose-gold.checker::before,
input.silvergold.checker::before, 
input.red.checker::before, 
input.pink.checker::before, 
input.blue.checker::before {
    width: 40px;
    height: 40px;
    transform: translate(-50%, -50%);
    /* background-color: #C0C0C0; */
    border: 1px solid black;
    border-radius: 50%;
    transition: var(--transition-border);
}

input.silver.checker::before,
input.silver.checker::after {
    background-color: #C0C0C0;
}

input.silver.checker::after,
input.gold.checker::after,
input.rose-gold.checker::after,
input.silvergold.checker::after, 
input.red.checker::after, 
input.blue.checker::after, 
input.pink.checker::after {
    width: 30px;
    height: 30px;
    /* background-color: #C0C0C0; */
    transform: translate(-50%, -50%) scale(0);
    border-radius: 50%;
    transition: var(--transition-transform);
}

input.checker:checked::after { transform: translate(-50%, -50%) scale(1); box-shadow: inset 0 0 0 4px var(--white-color); }

input.checkers:checked:after { transform: translate(-50%, -50%) scale(1); box-shadow: inset 0 0 0 1px var(--white-color); }

input.gold.checker::before,
input.gold.checker::after { border: 1px solid #ab9204; background-color: #ffd700; }

input.rose-gold.checker::before,
input.rose-gold.checker::after  { border: 1px solid #713d45; background-color: #b76e79; }

input.red.checker::before,
input.red.checker::after  { border: 1px solid #713d45; background-color: red; }

input.blue.checker::before,
input.blue.checker::after  { border: 1px solid #713d45; background-color: #89CFF0; }

input.pink.checker::before,
input.pink.checker::after  { border: 1px solid #713d45; background-color: pink; }

input.silvergold.checker::before,
input.silvergold.checker::after  {background: linear-gradient(90deg, #C0C0C0, #ffd700);}

.summary .wrap:has(button) { display: flex; flex-wrap: wrap; gap: 10px; }

.summary button {
    border-color: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    cursor: pointer;
}

.summary .wrap > button,
.summary .qty button {
    width: 40px;
    height: 40px;
    transition: box-shadow 0.3s,
                var(--transition-border),
                var(--transition-background),
                var(--transition-color);
}

.product-data .quantity button { 
    width: 30px;
    height: 30px;
    border: 1px solid gray;
    transition: box-shadow 0.3s,
                var(--transition-border),
                var(--transition-background),
                var(--transition-color);
                display: flex;
                align-items: center;
                justify-content: center;
}

.ups { width: 100px; }

.summary .product-color button { border-radius: 50%; }

.summary .product-color input.silver {background-color: #C0C0C0;}
.summary .product-color input.gold {background-color:#ffd700 ;}
.summary .product-color input.rose-gold {background-color: #b76e79 ;}
.summary .product-color input.red {background-color: red ;}
.summary .product-color input.blue {background-color: #89CFF0 ;}
.summary .product-color input.pink {background-color: pink ;}
.summary .product-color input.silvergold {background: linear-gradient(90deg, #C0C0C0, #ffd700) ;}


.summary .product-color button.selected,
.summary .product-color button:hover:not(.selected) { box-shadow: inset 0 0 0 4px var(--white-color); }

.summary .product-size label {
    font-size: var(--fs14);
    line-height: 44px;
    border: 1px solid var(--light-color);
    border-radius: 5px;
    background-color: transparent;
    padding-left: 10px;
    padding-right: 10px;
}

.summary .product-size label.selected { background-color: var(--dark-color); color: var(--white-color); border-color: var(--dark-color); }

.summary .product-size label:hover:not(.selected, [disabled]) { border-color: var(--dark-color); }

.summary .product-size label:disabled { pointer-events: none; }

.summary .product-stock .wrap,
.summary .product-control a { display: flex; gap: 5px; }

.summary .product-stock .wrap .check { color: var(--primary-color); padding-left: 5px; }

.summary .product-stock .wrap .cloes { color: red; padding-left: 5px; }

.summary .product-action .qty {
    display: flex;
    font-size: 18px;
    min-width: 150px;
    height: 50px;
    margin: 0 20px 20px 0;
    background-color: var(--flashwhite-color);
}

.product-data .quantity {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 18px;
    width: 100px;
    height: 30px;
    margin: 0 20px 20px 0;
    background-color: var(--flashwhite-color);
}

.summary .product-action .qty input,
.product-data .quantity input { text-align: center; border: 0; outline: 0; font-size: 18px; }

.summary .product-action .qty button { font-size: 22px; height: 100%; background-color: transparent; transition: color 0.3s; }

.product-data .quantity button {
    font-size: 22px;
    text-align: center;
    height: 30px;
    background-color: transparent;
    transition: color 0.3s;
}

.summary .product-action .qty button:hover,
.product-data .quantity button:hover { color: var(--gray-color); }

.summary .product-action { display: grid; grid-template-columns: 1fr 2fr; }

.summary .product-action .buynow { grid-column-start: 1; grid-column-end: 3; }

.summary .product-action :where(.addcart, .buynow) a { width: 100%;  height: 50px; border-color: var(--dark-color); padding: 0; }

.summary .product-action .addcart a { background-color: var(--white-color); }

.summary .product-action .addcart a:hover { background-color: var(--dark-color); }

.summary .product-control ul { align-items: flex-start; flex-wrap: wrap; gap: 20px; }

.summary .product-control span { font-size: var(--fs14); }

.summary .product-control a {
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 0;
}

.summary .product-control ul li:first-child a:hover .like { color: var(--red-color); }
.summary .product-control ul li:nth-child(2) a:hover .share { color: rgb(157, 239, 157); }
.summary .product-control ul li:last-child a:hover .ask { color: var(--primary-color); }

.product .summary .shipping { padding-top: 30px; border-top: 1px solid var(--flashwhite-color); }

.product .summary .shipping li { position: relative; padding-left: 35px; margin-top: 10px; line-height: 1.5; }

.product .summary .shipping li .fast {
    position: absolute;
    top: 0;
    left: 0;
    font-size: 24px;
    line-height: 1;
}

        /*
        ====  # Product Summery End ==== 
        */

        /*
        ====  # Product Details Start ==== 
        */
.product.detail { padding-top: 30px; margin: 70px 0; }

.product nav { position: relative; }

.product nav::before {
    content: '';
    position: absolute;
    left: 0;
    top: 58px;
    height: 2px;
    width: 100%;
    background-color: var(--light-color);
}

.product nav ul li a {
    position: relative;
    display: block;
    font-size: 18px;
    padding: 20px 0;
    margin-right: 30px;
    white-space: nowrap;
    color: var(--gray-color);
}

.product nav ul :is(li.active a, li a:hover) { color: var(--dark-color); }

.product nav ul li a::before {
    content: '';
    position: absolute;
    height: 2px;
    width: 0;
    left: 0;
    bottom: -2px;
    background-color: var(--dark-color);
    transition: width 0.3s;
}

.product nav ul li.active a::before { width: 100%; }

.product nav .item-floating { right: -18px; top: 0; }

.product .product-about {
    padding: 50px 0;
    max-width: 980px;
    margin: 0 auto;
    display: none;
    animation: var(--fade);
}

.product .product-about.active { display: block; }

.product .product-about .text-block { padding-bottom: 30px; }

.product .product-about :where(h3, h4) { font-family: var(--secound-font); margin-bottom: 15px; }

.product .product-about h3 { font-size: 22px; }

.product .product-about h4 { font-weight: var(--fw600); }

.product .product-about ul { margin-left: 20px; list-style-type: disc; }

.product.detail .dotgrid .wrapper { --grid-col: 250px; --gutter: 30px; }

.product .product-about.custom h3 { font-size: 50px; font-weight: var(--fw600); text-align: center; color: var(--light-color); }

.product .review { max-width: 770px; }

.product .review .head-review {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 30px;
    border-bottom: 1px solid var(--light-color);
}

.product .review .head-review strong { font-size: 30px; }

.product .review .head-review span { position: relative; padding-left: 20px; }

.product .head-review span::before { height: 50px; top: -30px; }

.product .head-review .primary-btn { border-width: 1px; text-transform: unset; font-weight: 500; }

.product .profile .thumb-name { display: flex; align-items: center; margin-bottom: 20px; }

.product .profile .image {
    width: 72px;
    height: 72px;
    margin-right: 10px;
    border-radius: 50%;
    overflow: hidden;
}

.product .profile .grouping { line-height: initial; }

.product .profile .name { font-weight: var(--fw600); margin-bottom: 5px; }

.product .profile .date { font-size: 12px; margin-top: 8px; }

.review .profile { padding-bottom: 40px; }

        /*
        ====  # Product Details End ==== 
        */

        /*
        ====  # Popup Model End ==== 
        */

        /*
        ====  # Share Popup Start ==== 
        */

/* .data-popup { z-index: 1001; pointer-events: none; }

.data-popup .wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
}

.data-popup .data-content {
    position: relative;
    background-color: var(--white-color);
    padding: 40px 20px;
    width: var(--data-width, 400px);
    max-width: calc(100vw - 50px);
    max-height: calc(100vh - 60px);
    border-radius: 5px;
    overflow-y: auto;
    pointer-events: auto;
}

.data-popup .close-trigger,
.data-popup .form span {
    position: absolute;
    top: 0;
    right: 0;
    height: 40px;
    display: flex;
    align-items: center;
}

.data-popup .form { position: relative; }

.data-popup label {
    font-weight: var(--fw600);
    font-size: var(--fs14);
    margin-bottom: 10px;
    display: block;
}

.data-popup .form input {
    color: var(--dark-color);
    background-color: var(--light-color);
    border: 0;
    padding: 7px 34px 7px 10px;
    border-radius: 3px;
    font-size: var(--fs14);
}

.data-popup .form span {
    top: auto;
    bottom: 0;
    right: 10px;
    cursor: pointer;
    transition: var(--transition-color);
}

.data-popup .form span:hover { color: var(--gray-color); }

.data-popup .media-share { margin-top: 20px; }
*/ 

/*
        ====  # Share Popup End ==== 
        */

        /*
        ====  # Ask Popup Start ==== 
        */

/* .data-popup form > div { margin-top: 20px; }

form .button button,
.d-review .stars label { cursor: pointer; }

.data-popup h3, form .button { text-align: center; } */

        /*
        ====  # Ask Popup End ==== 
        */

        /*
        ====  # Review Popup Start ==== 
        */

/* .d-review .data-content { --data-width: 500px; }

.d-review .dotgrid .wrapper { --gutter: 10px; }

.d-review .stars input { display: none; }

.d-review .stars .star { font-size: 16px; margin: 0; }

.d-review .stars > input:checked ~ label { color: #ffd700; }

.d-review :where(.rating, .stars) { display: flex; gap: 7px; }

.d-review .stars { flex-direction: row-reverse; }

.data-popup { display: none; animation: var(--fade); }

.data-popup.active { display: block; } */

        /*
        ====  # Review Popup End ==== 
        */

        /*
        ====  # Popup Model End ==== 
        */

        /*
        ====  # Floating Cart Start ==== 
        */

/* .cart-menu .wrap { float: right; --transX: 100%; }

.cart-menu .close-trigger { right: auto; left: -40px; }

.cart-menu .wrapper { height: 100%; display: flex; flex-direction: column; }

.cart-menu .cart-outer > .wrapper { height: 100vh; padding: 0; }

.cart-menu .cart-header { padding: 30px 0; } */

/* .product-list li { margin-bottom: 30px ; }

.product-list .thumbnail { width: 70px; margin-right: 20px; }

.product-list .grouping { position: relative; float: left; padding-left: 45px; }

.product-list .quantity { position: absolute; left: 0; top: 0; max-width: 30px; }

.product-list .quantity .control { background-color: var(--flashwhite-color); border-radius: 5px; }

.product-list .quantity .control > * {
    height: 30px;
    border: 0;
    outline: 0;
    text-align: center;
    background-color: transparent;
}

.product-list .quantity button {
    font-size: 20px;
    line-height: initial;
    width: 100%;
    cursor: pointer;
}

.product-list .variats {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.product-list .variats h4 {
    line-height: initial;
    margin-bottom: 5px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.product-list .variats > div { font-size: var(--fs14); line-height: 1.4; }

.product-list .variats .item-remove { position: absolute; right: 0; bottom: 0; }

.product-list .item-remove {
    color: var(--red-color);
    background-color: #ff47571a;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 5px;
    transition: var(--transition-color),
                var(--transition-background);
}

.product-list .item-remove:hover { color: var(--white-color); background-color: var(--dark-color); } */

/* .cart-menu .cart-footer {
    margin: 0 -20px;
    padding: 20px;
    background-color: var(--flashwhite-color);
    margin-top: auto;
}

.cart-footer form { position: relative; margin-bottom: 20px; }

.cart-footer form .input {
    line-height: 34px;
    border: 0;
    border-radius: 7px;
    background-color: var(--white-color);
}

.cart-footer form .submit {
    position: absolute;
    top: 10px;
    right: 10px;
    max-width: 90px;
    height: 34px;
    line-height: 1;
    background-color: var(--gray-color);
    color: var(--white-color);
    padding: 0;
    border-radius: 7px;
    cursor: pointer;
    transition: var(--transition-background);
}

.cart-footer form .submit:hover { background-color: var(--dark-color); }

.cart-footer .math-pricing ul li { position: relative; display: flex; justify-content: space-between; }

.cart-footer .math-pricing ul ul { width: 100%; }

.cart-footer .math-pricing ul li span:not(.value),
.cart-footer .math-pricing ul li label { color: var(--gray-color); }

.cart-footer .math-pricing ul ul li:not(:first-child) { padding-left: 20px; }

.cart-footer .math-pricing .total {
    font-size: 18px;
    font-weight: var(--fw600);
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid var(--light-color);
}

.cart-footer .button { text-align: center; }

.cart-footer .button .secondary-btn { display:  block; margin: 20px 0 10px; }

.cart-footer .button .secondary-btn {
    background-color: var(--primary-color);
    border: 0;
    text-transform: capitalize;
    line-height: 54px;
    border-radius: 7px;
    min-width: 240px;
}

.cart-footer .button .secondary-btn:hover { background-color: var(--gray-color); color: var(--white-color); }

.cart-menu .product-list > .wrapper { max-height: 400px; } */

        /*
        ====  # Floating Cart End ==== 
        */

    /*  ------------------- * 
        #Products Page End 
    * ------------------ */ 

    /*  ------------------- * 
        #Footer Page Start 
    * ------------------ */

.inner-footer { background-color: var(--flashwhite-color); line-height: 1.4; padding-bottom: 30px; }

.inner-footer .wrap > div {
    display: flex;
    flex-flow: wrap;
    justify-content: space-between;
    gap: 60px;
}

.inner-footer .subscribe { width: 100%; }

.inner-footer .top .subscribe h3 { margin-bottom: 20px; }

.inner-footer p { font-size: var(--fs14); }

.inner-footer .search { max-width: 400px;}

.inner-footer .search .input { font-size: var(--fs14); border: 2px solid var(--dark-color); }

.inner-footer .bottom { padding-top: 40px; padding-bottom: 20px; }

    /*  ------------------- * 
        #Footer Page End 
    * ------------------ */

    /***************  Login Page Start ******************/

.asterisk {
    color: red;
    font-size: 20px;
    position: absolute;
    right: 0;
    top: 10px;
    margin-right: 3px;
}

.containeres {
    height: 100vh;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.form {
    max-width: 430px;
    padding: 30px;
    width: 100%;
    background-color: white;
    border-radius: 6px;
    border: 1px solid #cacaca;
    margin-top: 85px;
    margin-bottom: 50px;
    margin-left: 30px;
}

header {
    font-size: 28px;
    font-weight: 600;
    color: black;
    text-align: center;
}

form { margin-top: 30px; }

.form .field {
    position: relative;
    height: 50px;
    width: 100%;
    margin-top: 20px;
    border-radius: 6px;
}

.field input,
.field button {
    height: 100%;
    width: 100%;
    border: none;
    font-size: 16px;
    font-weight: 400;
    border-radius: 6px;
}

.field input { outline: none; padding: 0 15px; border: 1px solid #cacaca; }

.field input:focus { border-bottom-width: 2px; }

.eye-icon {
    position: absolute;
    font-size: 18px;
    color: #8b8b8b;
    top: 50%;
    right: 10px;
    transform: translateY(-50%);
    cursor: pointer;
    padding: 5px;
}

.field .button {
    background-color: black;
    color: white;
    font-weight: var(--fw600);
    transition: all 0.5s ease;
    cursor: pointer;
}

.field .button:hover { background-color: white; color: black; border: 1px solid var(--dark-color); }

.form-link { text-align: center; margin-top: 10px; }

.form-link span,
.form-link a { color: black; font-size: 14px; font-weight: 400; }

.form a { color: #0171d3; text-decoration: none; }

.form-content a:hover { text-decoration: underline; }

.form .media-options a:hover { color: white; text-decoration: none; }

form label { margin-top: 10px; }

.login-page { margin-top: 100px; }

.login-page .selected { color: rgb(245, 142, 159); }

.login-page h1 { color: #C0C0C0; }

.login-page h1 span { cursor: pointer; }

.login-page .singup { display: none; }

.zoomable-image-container { position: relative; overflow: hidden; width: 100%;  height: 100%;  }

.zoomable-image { width: 100%; height: 100%; transform-origin: 0 0; transition: transform 0.75s; }



/***************  Login Page End ******************/

    /*  ------------------- * 
        #Shopping Page Start 
    * ------------------ */

.cart-page { margin: 80px auto; }

table{ width: 100%; border-collapse: collapse; }

.cart-info { display: flex; flex-wrap: wrap; }

th {
    text-align: left;
    padding: 5px;
    color: var(--white-color);
    background-color: var(--red-color);
    font-weight: normal;
}

td { padding: 10px 5px; }

td input { width: 40px; height: 30px; padding: 5px; }

td a,
td span,
td .remove {
    font-size: 16px;
    line-height: 1em;
    background-color: var(--red-color);
    color: var(--white-color);
    padding: 10px 10px;
    font-size: 12px;
    border-radius: 5px;
    border: 1px solid var(--red-color);
    transition: all 0.3s ease-in;
    font-weight: var(--fw600);
    margin-bottom: 5px;
}

td button { border-radius: 5px; background-color: transparent; font-weight: 500;  }

td a:hover { text-decoration: none; color: var(--red-color); background-color: var(--white-color); }
td .remove:hover { text-decoration: none; color: var(--red-color); background-color: var(--white-color); }

td img { width: 80px; height: 80px; margin-right: 10px; border-radius: 50%; }

.total-price { display: flex; justify-content: flex-end; margin-bottom: 10px; }

.total-price table { border-top: 3px solid var(--red-color); width: 100%; max-width: 400px; }

td:last-child { text-align: right; }

th:last-child { text-align: right; }

.total-price .delivary-info {
    font-family: var(--secound-font);
    margin-top: 15px;
    margin-right: 10px;
    font-size: var(--fs14);
}

.checkout,
.continue { display: flex; justify-content: flex-end; margin-top: 5px; }

.checkout a,
.continue a {
    width: 100%;
    max-width: 300px;
    display: block;
    background-color: var(--red-color);
    padding: 5px 10px;
    color: var(--white-color);
    border-radius: 7px;
    text-align: center;
    border: 1px solid var(--red-color);
    font-weight: var(--fw600);
    transition: all 0.3s ease;
}

.checkout a:hover,
.continue a:hover { background-color: var(--white-color); color: var(--red-color); text-decoration: none; }

.checkout .fa-truck,
.continue .fa-arrow-left { padding-right: 10px; }

@media  only screen and (max-width: 600px) {
    .cart-info small { display: none; }

    .checkout a,
    .continue a { max-width: 200px; }

    /* .header-center .branding { left: 10px; } */

    .cat .item-box .caption h4{ font-size: 14px; }

    .cat .item-box { height: 150px; }
}

@media  only screen and (max-width: 800px) {
    .cat { margin-right: 10px; margin-left: 10px; }
}

    /*  ------------------- * 
        #Shopping Page End 
    * ------------------ */

    /*  ------------------- * 
        #Profile Page Start 
    * ------------------ */

.block { margin-top: 20px; }


.main-table { box-shadow: 0 3px 10px #ccc; }

.main-table td { background-color: #fff; vertical-align: middle !important; }

.main-table tr:first-child td { background-color: #333; color: #fff; }

.main-table .activate { margin-left: 5px; }

.main-table .btn { padding: 3px 10px; margin-bottom: 5px; }

.main-table .btn .edit,
.main-table .btn .trash { position: relative; right: 5px; }

.main-table .activate { margin-right: 5px; }
    /*  ------------------- * 
        #Profile Page End 
    * ------------------ */

.information { margin-top: 20px; }

.information ul { padding: 0; margin: 0; }

.information ul li { padding: 5px; }

.information ul li:nth-child(odd) { background-color: #eee; }

.information ul li span { display: inline-block; width: 150px; }

/***************  Chekout Page Start ******************/

.cards {
    border: 2px solid rgb(162, 161, 161);
    margin-bottom: 30px;
    box-shadow: var(--shadow);
    font-family: var(--primary-font);
    border-radius: 5px;
}

.cards .account {
    padding: 10px;
    display: flex;
    justify-content: space-between;
}

.cards .log {
    display: flex;
    justify-content: center;
    align-items: center;
}

.cards .log a { margin-bottom: 10px; }

.cards .out { padding: 30px; }

.cards .out .cards-title { margin-bottom: 15px; }

.cards .out .info { margin-bottom: 5px; }

.mb-0 { margin-bottom: 0; }

.mb-3 { margin-bottom: 15px; }

.mb-2 { margin-bottom: 10px; }

.mb-4 { margin-bottom: 20px; }

.mt-3 { margin-top: 15px; }

.mt-4 { margin-top: 20px; }

.fw-bold { font-weight: bold; }

.ship { display: flex; justify-content: start; }

.ship .bay { display: flex; justify-content: space-between; }

.ship .apply { margin-top: 10px; border: 1px solid rgb(196, 193, 193); }

.ship .incart { display: flex; align-items: center; }

.float-end { display: flex; justify-content: flex-end; }

.float-end button { margin-right: 5px; }

/***************  Chekout Page End ******************/

    /*  ------------------- * 
        #Media Responsive Function Start 
    * ------------------ */ 

@media (min-width: 481px) {

    .slider .ob-cover { height: 300p }

    .product .wrapper { --gutter: 60p }

    .product.dotgrid .image {
        position: relative;
        max-width: 500px;
        width: 100%;
        margin: 0 auto;
        height: min-content;
        overflow: hidden;
    }

    .product .outer-main { width: calc(100% - 85px ); height: 100%; margin: 0 0 0 85px; }

    .product .outer-thumb { display: block; position: absolute; top: 0; left: 0; }

    .custom-pagination { display: none; }

    .product .profile .comment { padding-left: 92px; }

    .cards .log { flex-direction: column; }

    .hover-animation { position: relative; height: 150px; }

    .slider .title-info .ss { color: var(--white-color) !important; }

    .zoomable-image:hover { transform: scale(1); }

    .cats .card { grid-template-columns: repeat(auto-fill, minmax(175px, 1fr));}
}

@media (min-width : 768px) {
    
    /*=== Media Query For Tablet Devices ====*/

    .slider .ob-cover { height: 550px; }

    .product nav ul { justify-content: center; }

    .category-content .left span { display: block; }

    .cats .card { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));}
}

@media (min-width : 992px) {
    /*=== Media Query For Desktop Devices ====*/
    .menu-trigger,
    .sidebar .close-trigger,
    .category-content .sorter > a { display: none; }

    .header-center nav { display: grid; }

    .header-left .list-inline { display: block; }

    .hover-animation { position: relative; height: 170px;  }
    /*  
    ----- #Media Sub Menu & Mega Start ------
    */

    .mega-content { display: grid; grid-template-columns: 2fr 1fr; gap: 50px; }

    .mega-content .links {  display: grid; grid-template-columns: repeat(auto-fill, minmax(135px, 1fr)); gap: 15px; }

    nav.menu .sub-mega { left: 0; right: 0; padding: 50px 0; }

    nav.menu :where(.sub-menu, .sub-mega)  {
        position: absolute;
        top: auto;
        line-height: initial;
        background-color: var(--white-color);
        box-shadow: var(--shadow);
        z-index: 1000;
        display: none;
        animation: var(--fade);
    }

    nav.menu li:hover :where(.sub-menu, .sub-mega) { display: block; }

    nav.menu .sub-menu li { padding: 5px 30px; }

    /*  
    ----- #Media Sub Menu & Mega End ------
    */

    /*  
    ----- #Slider Start ------
    */

    .slider .ob-cover { height: 160vh; }

    .slider .title-info {
        position: absolute;
        bottom: 300px;
        left: 0;
        right: 0;
        background-color: transparent;
    }

    .slider .title-info .ss { color: var(--dark-color) !important; }

    .slider h3 { --fs-max: 80px; color: var(--white-color); }

    .slider .button a { border-color: var(--white-color); color: var(--white-color); }

    .slider .button a:hover { border-color: var(--dark-color); }

    .slider .title-info .price {
        font-size: 40px;
        border: 1px solid var(--white-color);
        background-color: transparent;
        color: var(--white-color);
        transition: all 0.5s ease;
    }

    .slider .title-info .price:hover { border: 1px solid var(--dark-color); color: var(--dark-color); }

    .scrollto .wrapper:not(.initial) {
        --display: grid;
        padding: 0;
        overflow: unset;
        scroll-snap-type: unset;
        overscroll-behavior-inline: unset;
    }

    .scrollto .wrapper .item { width: unset; }

    .page-category .content { display: grid; grid-template-columns: 1fr; gap: 60px; }

    .sidebar-title,
    .sidebar-content { padding: 0; }

    .sidebar,
    .sidebar > .wrap { all: unset; }

    .inner-footer .wrap > div { flex-flow: nowrap; }

    /*  
    ----- #Slider End ------
    */

    .ship { justify-content: end; }

    .zoomable-image:hover { transform: scale(1.5); }

    .cats .card { grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));}

    .cats .cont {
    max-width: 80%;
    margin: 0 auto;
}

.cats .card .cord { position: relative; box-shadow: 0 0 3px rgba(0, 0, 0, 0.1); margin-bottom: 15px; overflow: hidden; width: 75%; height: 325px;}

.cats .card .cord .card-image { width: 100%; display: block; margin-bottom: 10px;}

.cats .card .cord .card-info {
    margin-top: 30px;
    padding: 15px;
}

.hover-animation { position: relative; height: 150px; }

.hover-animation img {
    height: 175px;    
}
    
}



@media (max-width: 480px) {

    .carousel .dotgrid .item { width: 250px; }

    .slider .title-info .ss { color: var(--white-color) !important; }

    .slider .ob-cover { height: 300px; }

    .ob-cover img { position: absolute; width: 100%; object-fit: contain;}

}

@media (min-width: 1200px) {

    .container.wide { --mx-width: 1720px; --gutter: 40px; }
}

@media (min-width: 1400px) {
    .mega-content { grid-template-columns: 1fr 1fr; }
    .carousel .inner-wrapper { max-width: 1250px; margin: 0 auto; padding: 0 40px; }

    .carousel .nav > .swiper-button-next { right: -40px; }

    .carousel .nav > .swiper-button-prev { left: -40px; }

    .product .outer-main { width: 100%; margin: 0; }

    .product .image .outer-thumb { position: absolute; top: 0; left: -100px; height: 100%; }

    .product.dotgrid .image { overflow: unset; }
}

/*  ------------------- * 
        #Media Responsive Function End 
    * ------------------ */