@import url('https://fonts.googleapis.com/css2?family=Lato:wght@300;400;500;700;900&display=swap');

*{font-family: 'Lato', sans-serif;box-sizing: border-box;margin:0;padding:0;outline: none;}
body{font-size:.8em;color:#000;background: linear-gradient(180deg, rgba(255,255,255,1) 0%, rgba(240,244,253,1) 100%);
scroll-behavior: smooth;}

h1{font-size: 4.5em;line-height: 1.2em;}
h2{font-size:2.875em}
h3{font-size: 24px;}
h4{font-size: 1.313em;}
h5{font-size: 1.2em;}
h6{font-size: 14px;}
a{cursor: pointer;text-decoration: none;}
img {display: block;}
a.link{text-decoration: underline;}
.mr-2{margin-right:2em}
.mb-2 {margin-bottom: 2em;}
.mtb-3{margin-top:3em;margin-bottom: 3em;}
.g0{gap:0 !important}
h2.heading-style-1 {color: #E22118;font-weight: 900;padding-bottom: 15px;line-height: 1.2em;position: relative;margin-bottom: 30px;}
h2.heading-style-1:after {content: '';display: block;position: absolute;bottom: 0;border-bottom: 1px solid #BCBCBC;left: 0;width: 350px;}
h2.heading-style-1:before{content: '';display: block;position: absolute;border-bottom: 5px solid #000;bottom: -2px;width: 100%;z-index: 9;}
.container-fluid{padding:0 20px}
.container{width: 1200px;margin:0 auto}
.clear:after,.clear:before {clear: both;content: '';display: block;}
.text-center{text-align: center;}
.f-small,small{font-size: .875em;}
.ico {padding-left: 20px !important;position: relative;}
.ico:before {display: block;content: '';width: 16px;height: 16px;position: absolute;top: 0px;left: 0;}

header .ico img{width: 24px;display: inline-block;}
header a.ico {padding: 6px 0;display: inline-block;}


/* FlexBox */
.flexbox {display: flex;flex-wrap: wrap;gap: 20px 0.5%;}
.flexbox.space-between {justify-content: space-between;}
.flexbox.flex-start {justify-content: flex-start;}

.btn {display: inline-block;border-radius: 4px;}
.btn-gredient{background: linear-gradient(90deg, rgba(106,174,0,1) 0%, rgba(226,33,24,1) 100%);}
.btn-gredient span {display: block;margin: 2px;background: #fff;font-size: 1.3em;color: #000;}
.btn-gredient.btn-arrow span{padding:1.2em 3em 1.2em 2.5em}
.btn-gredient.btn-arrow span img{display: inline-block;}
.btn-gredient:hover {background: linear-gradient(90deg,  rgba(226,33,24,1) 0%, rgba(106,174,0,1) 100%);}
.btn-arrow img {display: inline-block;margin-left: 7px}
.btn-blue {background: rgb(23 180 224 / 20%);font-weight: 700;color: #1B2B81;}
a.btn.btn-small {border-radius: 10px;padding: 10px 15px;font-size: 1.075em;}
a.btn-call {display: block;border-radius: 16px;background: #131C32;padding: 15px 20px;color: #fff;font-size: 1.275em;position: relative;font-weight: 900;margin: 30px 0 10px;}
a.btn-call:before {top: 15px;right: 20px;left: unset;background: url(https://static.lenovo.com/id/in/merch/OMO/call.png) 0 0 no-repeat;background-size: 16px;}


/* tabs */
ul.tabs {border-bottom: 1px solid #BCBCBC;margin-bottom: 30px;width: clamp(360px, 75%, 800px);}
ul.tabs li {list-style: none;}
ul.tabs li a {font-size: 1.75em;color: #929292;line-height: 2.125em;padding: 20px;display: block;position: relative;}
ul.tabs li {float: left;}
ul.tabs li a.active{font-weight: 700;color:#000}
ul.tabs li a:after {content: '';display: block;width: 0;position: absolute;bottom: -3px;border: 3px solid transparent;left: 0;transition: all .1s ease;margin: 0 auto;/* opacity: 0; */}
ul.tabs li a.active:after {width: 100%;border-color: #333;}
ul.tabs li a:hover{color:rgb(225 20 10 / 70%)}
ul.tabs li a:hover::after{border-color:rgb(225 20 10 / 70%);width: 100%;}

.filter-wrap {margin-bottom: 30px;}
.filter-btn a {padding: .75em 1.5em;display: inline-block;font-size: 1.375em;color: #616161;background: #D9D9D9;border-radius: 4px;margin-right: 15px;}
.filter-btn a:hover,.filter-btn a.active {background: #131C32;color: #fff;}

.ico-location{background: #fff url('https://static.lenovo.com/id/in/merch/OMO/location.svg?r') 0 0 no-repeat;padding-left: 30px !important;}
.ico-detect{background: #fff url('https://static.lenovo.com/id/in/merch/OMO/detect-location.svg?r') 0 0 no-repeat;padding-left: 25px !important;margin-left: 20px;font-size: 1em;}
.view-toggle {color: #000;font-size: 1.1em;margin: 25px 0 25px;font-weight: 700;display: block;}
.view-toggle img {display: inline;width: 16px;margin-right: 7px;position: relative;top: 2px;}
#filter {font-size: 1.1em;color: #000;font-weight: 600;padding: 14px 0;position: relative;cursor: pointer;}
#filter img {display: inline-block;width: 17px;margin-right: 7px;position: relative;top: 2px;}
#filter:hover #filter-panel{display: block;}
#sort-by-price {font-size: 1.1em;color: #000;font-weight: 600;padding: 14px 0; float:left}
#sort-by-price img {display: inline-block;width: 17px;margin-right: 7px;position: relative;top: 2px;}
#sort-filter {display: flex;gap: 25px;}
/* newly added */
#filter-panel{display: none;position:absolute;top: 45px;right:0;width: 250px;background: #fff;border:1px solid #e5e5e5;border-radius:14px;box-shadow:0px 0px 14px rgb(0 0 0 / 10%);z-index: 1000;}

#filter-panel.active{display: block !important;}
#filter-panel ul li {list-style: none;}
#filter-panel >ul >li>label {padding: 10px 15px;/* border-bottom: 1px solid #e5e5e5; */display: block;font-size: 1.1em;}
#filter-panel >ul ul {border-bottom: 1px solid #e5e5e5;padding-bottom: 7px;}
#filter-panel >ul ul li {padding: 5px 15px;}
#filter-panel li input[type=checkbox] {margin-right: 7px;border: 1px solid #eee;}
#filter-panel:after {content: '';display: block;width: 10px;height: 10px;background: #fff;border-left: 1px solid #e5e5e5;border-top: 1px solid #e5e5e5;position: absolute;top: -6px;right: 20px;transform: rotate(45deg);}


/* Offer */
.offer {padding: 10px;;font-weight: 700;font-size: 1em;}
.offer.green {background: #6aae00;color: #fff}

/* Header */
header {padding: 12px 0;position: relative;}
header .location-text {font-size: 0.8rem;margin: 10px 10px 10px 30px;line-height: 1.6em;color: #1E2A7C;}
header .location-text2 {font-size: 0.8rem;padding: 9px 10px 10px 0px;line-height: 1.6em;color: #999999;display: inline-block;}
header img.close {width: 16px; vertical-align: middle; margin-left: 20px;}

/* Banner */
#banner{position: relative;padding:7em 0;background:url(https://static.lenovo.com/id/in/merch/OMO/banner.png) right top no-repeat #a243ec;background-size: 52%;}
/* .slide-item{padding:7em 0;}
#slide1{background:url(https://static.lenovo.com/id/in/merch/OMO/24hr-delivery-banner.png?r) right top no-repeat #FF9933;background-size: 52%;}
#slide2{background:#7e1b81} */
.banner-text {color: #fff;}
.banner-text h1 {margin-bottom: 50px;}
h1 small{display: block;}
.banner-text .banner-icons {margin-bottom: 50px;padding: 0 10px;max-width: 520px;}
.banner-text .banner-icons div {text-align: center;}
.banner-text .banner-icons img{width: 50px;margin: 0 auto 10px;display: block;}
.slick-arrow {cursor:pointer;position: absolute;z-index: 9;top: 48%;width: 40px;height: 60px;overflow: hidden;text-indent: 45px;background: none;border: none;}
.slick-next {right: 10px;}
.slick-prev {left: 10px;}
.slick-arrow:after {position: absolute;top: 0;content: '';display: block;border-top: 2px solid #fff;border-left: 2px solid #fff;width: 24px;height: 24px;}
.slick-prev:after {transform: rotate(-45deg);top: 20px;left: 20px;}
.slick-next:after {transform: rotate(135deg);top: 20px;right: 20px;}

/* products */
.card{width: 23.5%;box-shadow: 0px 0px 14px rgba(0, 0, 0, 0.1);border-radius: 10px;background: #fff;position:relative;}
.card1{ display: none;}
.cardhome{display: none;}
.card-body{padding: 20px 20px 10px;}
.card a.link{font-size:1.175em;font-weight:700;color:#1B2B81}
.card h4 {text-align: center;font-weight: 700;margin-bottom: 20px;}
.card h4 small {display: block;font-weight: 400;margin-top: 7px;}
.card ul {margin: 0;padding: 0;}
.card ul li {padding-left: 20px;list-style: none;margin: 10px 0;position: relative;line-height: 1.4em;font-size: 1.125em;}
.card ul li:before {content: '';display: block;width: 7px;height: 7px;background: #E22118;position: absolute;left: 5px;top: 5px;}
.card-footer {background:#1E2A7C;padding: 10px 15px;position: relative;color: #fff;border-radius: 0 0 10px 10px;}
.product-img {text-align: center;}
.product-img img {width: 160px;margin:0 auto 30px}
.real-price {text-decoration: line-through;}
.offer-price {font-size: 1.5em;font-weight: 900;line-height: 1.5em;}
.products-wrap .card-body{min-height:390px}

.products-wrap .card-body .product-info {
    height:205px;overflow:auto;
}
.products-wrap .card-body .product-info::-webkit-scrollbar{
    width: 3px;
}


  .products-wrap .card-body .product-info:hover::-webkit-scrollbar-track {
    background: #f1f1f1; 

  }
  
  
  .products-wrap .card-body .product-info:hover::-webkit-scrollbar-thumb {
    background: #555; 
    padding: 5px;

  }


.card-footer .buy-now-btn {background: rgb(23 180 224 / 50%);color: #FFF;/*background: #fff;color: #1E2A7C;*/padding: 18px 2rem;text-decoration: none;border-radius: 5px;font-weight: 900;font-size: 1em;}
#store{margin:10em 0 3em} 
.store-wrap .card {border-radius: 20px;background: none;}
.store-wrap .card-top {border-radius: 20px 20px 0 0}
.store-wrap .card-body {border-radius: 0 0 20px 20px;position: relative;z-index: 9;background: #fff;}
.store-wrap .card-footer.footer-style-2 {border-radius: 0 0 20px 20px;margin-top: -20px;transition: all .2s ease-in;}
.store-wrap .card-footer.footer-style-2:hover{margin-top:-15px}
.card-top {background: #fff;padding: 10px;border-bottom: 1px solid #E5E5E5;}
.store-wrap .card h5 {margin-bottom: 7px;min-height: 37px}
.store-wrap .card p {font-size: 1.1em;line-height: 1.3em;font-weight: 500;}
.store-wrap .card {color: #1B2B81;}
.card-footer.footer-style-1:before{content:'';width:100%;position: absolute;background: url(https://static.lenovo.com/id/in/merch/OMO/bg-arrow.png) 0 0 repeat;top: -3px;z-index: 99;height: 10px;left: 0;}
.card-footer.footer-style-2 a {color: #fff;font-size: 1.175em;padding: 30px 10px 10px;display: block;}
.card-footer.footer-style-2 a img {display: inline;width: 12px;margin-right: 10px;height: 12px;}
.ico.ico-time {font-weight: 700;margin: 10px 0px;background: url(https://static.lenovo.com/id/in/merch/OMO/time.png) 0 0 no-repeat;background-size: 16px;font-size: 1.075em;}
.ico.ico-location2 {font-weight: 700;margin: 10px 0px;background: url(https://static.lenovo.com/id/in/merch/OMO/location.png) 0 0 no-repeat;background-size: 16px;font-size: 1.075em;}

#load-more{font-size: 1.313em;color:#000;position:relative;display: inline-block;margin-right:20px}
#load-more-store{font-size: 1.313em;color:#000;position:relative;display: inline-block;margin-right:20px}
#load-more:after{content:'';display: block;width: 20px;height: 20px;background: url(https://static.lenovo.com/id/in/merch/OMO/down.png) 0 0 no-repeat;background-size: 20px;position: absolute;top: 1px;right: -27px;}
#load-more-store:after{content:'';display: block;width: 20px;height: 20px;background: url(https://static.lenovo.com/id/in/merch/OMO/down.png) 0 0 no-repeat;background-size: 20px;position: absolute;top: 1px;right: -27px;}
.banner-text span{display: block;}
#category {display: none;}
#category select {border: none;padding: 20px;width: 100%;background: #E9E9E9;display: block;-webkit-appearance: none;font-size: 1.215em;font-weight: 800;}
.select-arrow {position: relative;}
.select-arrow:after {border-bottom: 2px solid #000;border-right: 2px solid #000;content: '';display: block;width: 10px;height: 10px;transform: rotate(45deg);position: absolute;top: calc(50% - 9px);right: 20px;pointer-events: none;}



/* Above 1600 */
@media screen and (min-width: 1600px){
    .container{width:1500px}
    body{font-size:.975em}
}
/* Below 1600 */
@media screen and (max-width: 1600px){
    .container{width:1366px}
}
/* 1400 */
@media screen and (max-width: 1400px){
    .container{width:1180px}
}

/* 1280 */
@media screen and (max-width: 1300px){
    .container{width:90%}
}

/* 1100 */
@media screen and (max-width: 1100px){
    .card{width:49%}
    ul.tabs{width:100%}
    .banner-text {padding-top: 40em}
    #banner {background-position: right 0;background-size: 95%;}
}

/* 600 */
@media screen and (max-width: 600px){
    body{font-size: .8em;}
    h2 {font-size: 2.375em}
    h2.heading-style-1{margin-bottom: 0;}
    #category {display: block;margin-bottom:20px}
    .tabs,.location-text2{display: none;}
    .card{width:48%}
    .banner-text {padding-top: 30em}
    .banner-text h1{font-size: 2.2em;font-weight:800;margin-bottom: 20px;}
    .banner-text h1 > span{display: inline;}
    #banner{padding: 45px 0 1em;background-position: right 32px;margin-top: 50px;}
    .filter-wrap{margin-bottom: 0;}
    .filter-btn a {background: none;color: #000;padding: 10px;font-size: 1.215em;margin-right: 0;}
    .filter-btn {width: 100%;border-bottom: 1px solid #BCBCBC;}
    .filter-btn a:hover, .filter-btn a.active{background: none;color: #000;font-weight: 700;position: relative;}
    .filter-btn a:hover:after,.filter-btn a.active:after {position: absolute;left: 0;bottom: -2px;border-bottom: 3px solid #000;width: 100%;content: '';display: block;}
    .filter-wrap .flexbox{justify-content: flex-end;gap:0}
    #store .flex-end-mobile{justify-content: flex-end;gap:0  10px}
    #filter,#sort-by-price{padding:25px 0}
    #filter:hover #filter-panel{display: none;}
    #filter-panel{top:55px;}
    .btn-gredient{margin-bottom:10px;margin-right: 7px !important}
    .btn-gredient.btn-arrow span {padding: 1em;font-size: .8em;font-size: 1.125em;}
    h2.heading-style-1{width: 100%;}
    h2.heading-style-1:before{width:75%}
    h2.heading-style-1:after{width:100vw;max-width: 100%;}
    #store{margin-top:5em}
    header .ico-location, header .ico-detect{background-position: 16px 14px;font-size: 1.125em;}
    .location-text.ico::before {width: 100%;background: url(https://static.lenovo.com/id/in/merch/OMO/gredient.png) 0 0 no-repeat;background-size: 100%;}
    a.ico-detect span,header .location-text2{display: none;}
    a.ico-detect {
        width: 20px;
        height: 22px;
        background-size: 20px;
        display: block;
        background-position: 1px 3px;
        float: right;
    }
    .banner-text .banner-icons div{display: block;width: 100%;}
    #category{margin-top:2em}
    .banner-text .banner-icons {flex-wrap: nowrap;}
    
}

/* 480 */
@media screen and (max-width: 520px){
    .card{width:100%}
    header .location-text {position: absolute;left: 0;bottom: -42px;background-color: #fff;width: 100%;margin: 0;padding: 12px 10px 7px 45px !important;}
    .banner-text {padding-top: 22em;}
    a.ico-detect{
        margin-top: 10px;
    }
    .loction-log{
        display: none;
    }
}

@media screen and (max-width: 720px){
    
    .call-store{
        padding-left: 10% !important;
    }
}

@media screen and (min-width: 721px){
    
    .call-store{
        padding-left: 110px !important;
    }
}