body{background: white;}

/* Section */
.services-section{width:98%;padding:0% 0% 0 1%;margin:auto;background:#edf7ef;margin-bottom: 15px;}

/* Header */
.section-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px;}
.section-header h2{font-size:20px;font-weight:700;color:#222;}
.view-all{text-decoration:none;color:#16a34a;font-size:16px;font-weight:600;}
.view-all i{margin-left:5px;}
.category-list{display: flex;flex-wrap: nowrap;overflow-x: auto;gap: 5px;scrollbar-width: none;-ms-overflow-style: none;cursor: grab;user-select: none;padding: 1% 1% 0 1%;}
.category-list::-webkit-scrollbar{display: none;}
.category-list:active{cursor: grabbing;}

/* Item */
.category-item{flex:0 0 auto;width: 80px;height:50px;gap: 5px;text-align:center;cursor:pointer;border-radius:15px;margin: 0 6px;padding:2px;transition:0.3s;position: relative;}
.category-item:hover{transform:translateY(-5px);}
.category-item.active{background:#f7f7f7;}

/* Circle */
.category-box{width:40px;height:40px;margin:auto;border-radius:50%;display:flex;justify-content:center;align-items:center;font-size:20px;margin-bottom:12px;transition:0.3s;}
.category-item.active .icon-box{transform:scale(1.08);box-shadow:0 8px 20px rgba(0,0,0,0.12);}
.category-item span{width: 120px;font-size: 14px;font-weight: 600;color: #333;position: absolute;left: 50%;top: -10%;transform: translateX(-50%) translateY(15px);opacity: 0;visibility: hidden;transition: all 0.4s ease;}

/* Hover Animation */
.category-item:hover span{opacity: 1;visibility: visible;transform: translateX(-50%) translateY(0);}

/* Background Colors */
.pink{background:#ffe8ee;}
.blue{background:#e8f3ff;}
.green{background:#e8f8ea;}
.purple{background:#efe8ff;}
.orange{background:#fff2e8;}

/* Mobile */
@media(max-width:768px){
    .section-header h2{font-size:20px;}
    .view-all{font-size:14px;}
    .category-list{flex-wrap:nowrap;overflow:auto;justify-content:flex-start;gap:1px;scrollbar-width:none;-ms-overflow-style:none;padding: 8px;padding-bottom:5px;}
    .category-list::-webkit-scrollbar{display:none;}
    .category-item{flex:0 0 auto;width:80px;}
    .category-box{width:40px;height:40px;font-size:20px;}
    .category-item span{width: 80px;font-size: 12px;font-weight: 600;color: #333;position: absolute;left: 50%;top: 35%;transform: translateX(-50%) translateY(18px);opacity: 1;visibility: visible;}
    /* Hover Animation */
    .category-item:hover span{opacity: 1;visibility: visible;transform: translateX(-50%) translateY(15px);}
}

/*<!-- Offers style css-->*/
.offer-wrapper{width:94%;margin:30px auto;display:grid;grid-template-columns:repeat(2,1fr);gap:25px;padding:20px 15px 10px 15px;}
.offer-box{border-radius:20px;padding:20px;}
.today{background:#edf7ef;}
.limited{background:#fff8ea;}
.offer-header{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:20px;}
.offer-header h2{font-size:22px;font-weight:700;margin-bottom:8px;}
.offer-header p{margin-top: -3px;font-size:20px;font-weight:600;}
.offer-header a{color:#0a7a43;text-decoration:none;font-weight:700;}
.offer-grid{margin-top: -10px;display:grid;grid-template-columns:repeat(4,1fr);gap:10px;}
.offer-card{background:#fff;border-radius:15px;padding:10px;text-align:center;box-shadow:0 3px 12px rgba(0,0,0,.08);transition:.3s;}
.offer-card:hover{transform:translateY(-5px);}
.offer-card img{width:100%;height:100px;border-radius:12px;object-fit:cover;}
.offer-card h4{margin:8px 0;font-size:18px;font-weight:600;}
.offer-card button{border:none;background:#00753f;color:#fff;padding:6px 14px;border-radius:8px;font-size:14px;font-weight:700;cursor:pointer;}

@media(max-width:992px){
    .offer-wrapper{grid-template-columns:1fr;}
    .offer-grid{grid-template-columns:repeat(2,1fr);}
}
@media(max-width:500px){
    .offer-wrapper{width:100%;margin:5px auto;gap:10px;padding:0 1px;}
    .offer-box{border-radius:20px;padding:15px;margin: 10px;}
    .offer-header h2{font-size:24px;}
    .offer-header p{font-size:16px;}
    .offer-grid{grid-template-columns:repeat(2,1fr);gap:8px;}
    .offer-card img{height:130px;}
    .offer-card h4{font-size:18px;}
    .offer-card button{width:100%;font-size:13px;padding:7px;}
}

.service{width:80%; padding:0 1%; font-weight: bold; font-size: 20px; margin-left: 2%; margin-top:; border-radius: 8px; background:white;}
/* Product Grid */
.products{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:;20px;padding:2%;}
.card{background:#fff;border-radius:8px;overflow:hidden;box-shadow:0 2px 8px rgba(0,0,0,.08);position:relative;transition:.3s;margin: 8px;}
.card:hover{transform:translateY(-5px);}
.badge{position:absolute;top:10px;left:10px;background:red;color:#fff;padding:6px 10px;font-size:13px;font-weight:bold;border-radius:4px;z-index:2;}
.card img{width:100%;height:180px;object-fit:cover;}
.info{padding:15px;}
.info h3{text-overflow: ellipsis;white-space: nowrap;overflow: hidden;font-size:18px;margin-bottom:8px;}
.price{font-size:24px;font-weight:bold;color:#b12704;margin-bottom:5px;}
.old{font-size:14px;color:#777;text-decoration:line-through;margin-left:8px;}
.rating{color:#ff9900;margin-bottom:10px;}
.btn{display:block;text-align:center;padding:10px;background:#ffd814;text-decoration:none;color:#111;font-weight:bold;border-radius:6px;}
.btn:hover{background:#f7ca00;}
/* Mobile */
@media(max-width:500px){
 .products{display:grid;grid-template-columns:repeat(2,1fr);padding: 2px;gap:2px;}
 .card{background:#fff;border-radius:8px;overflow:hidden;box-shadow:0 2px 8px rgba(0,0,0,.08);position:relative;transition:.3s;margin: 2px;}
}


.service-wrap{width: 96%;min-height: 290px; overflow: auto;margin: auto;margin-top: 70px;}
.service-box{width: 19%;margin: 0.5%;height: 340px;background:#fff;border-radius:8px;box-shadow:0 2px 10px rgba(0,0,0,0.5);float: left;position: relative;}
.shareBtn{position: absolute;top: 10px;right: 10px;z-index: 9;width: 42px;height: 42px;display: flex;align-items: center;justify-content: center;border: none;border-radius: 50%;background: rgba(16,185,129,.95);color: #fff;font-size: 18px;cursor: pointer;box-shadow: 0 4px 12px rgba(0,0,0,.25);transition: all .3s ease;}
.shareBtn:hover{background: #059669;transform: scale(1.08);}
.shareBtn:active{transform: scale(.95);}
.service-box img{width:96%;height:150px;margin: 2%; margin-top:;object-fit:;cover;border-radius:5px;background: rgba(204, 204, 204, 0.3);}
.price-detail{margin: 5%;font-size:20px;margin-top:-1px;}
.title{ margin-top: -3%;padding:2% 0 5% 5%;font-size:20px;font-weight: bold;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.old-adount{text-decoration:; line-through;color:#999;font-size:20px;font-weight: bold;}
.discount{color:green;font-size:15px;font-weight:bold;}
.netamount{font-weight:  bold; padding-top:3%; }
.description{ height: 40px;margin-top: -1%;padding:0 2% 0 5%;font-size: 15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.card-btn{width:80%;background:;border-radius:14px;overflow:hidden;display:flex;flex-direction:column;margin: auto;margin-top: -10px;}
.card-btn a{margin: 0 5px 5px 5px;padding:5px;font-size: 20px;text-align:center;background:#9333ea;font-weight: bold;color:#fff;text-decoration:none;border-radius:8px;}

@media(max-width: 992px) {
.service-wrap{width: 100%;}
.service-box{width: 49.4%;margin: 0.3%;height: 700px;}
.service-box img{width:96%;height:400px;margin: 2%;}
.price-detail{font-size:25px;margin-top:-5px;}
.title{font-size:30px;}
.netamount{font-weight:bold; font-size:35px; padding-top:1%; }
.old-adount{font-size:25px;}
.discount{font-size:23px;}
.description{ width: 90%;height: 70px;padding:0 0 0 1px;font-size:25px;margin-left: 5%;}
.card-btn{margin-top: -20px;}
.card-btn a{margin:10px;padding:15px;font-size: 25px;}
}
@media(max-width: 500px) {
.service-wrap{margin-top: 55px;min-height: 520px;}
.service-box{width: 49%;margin: 0.5%;height: 300px;}
.service-box img{width:96%;height:150px;margin: 2%; margin-top: ;}
.price-detail{font-size:20px;}
.title{font-size:18px;}
.netamount{font-size: 16px;padding-top:0.5%;}
.old-adount{font-size:16px;}
.discount{font-size:12px;}
.description{ height: 40px;padding:0 0 0 0;font-size: 14px;}
.card-btn{margin-top: -22px;}
.card-btn a{margin:5px;padding:5px;font-size: 18px;}
}



.footer{background:#063d24;color:#fff;padding:60px 40px 20px;}
.footer-container{max-width:1300px;margin:auto;display:grid;grid-template-columns:2fr 1fr 1fr 1fr 1.3fr;gap:40px;}
.footer-logo h2{font-size:52px;margin-bottom:20px;}
.footer-logo .span{color:#ffb300;}
.footer-logo p{line-height:1.8;color:#ddd;font-size:17px;}
.social-icons{display:flex;gap:15px;margin-top:25px;}
.social-icons a{width:48px;height:48px;border-radius:50%;background:rgba(255,255,255,.08);display:flex;justify-content:center;align-items:center;color:#fff;font-size:20px;text-decoration:none;transition:.3s;}
.social-icons a:hover{background:#ffb300;color:#000;}
.footer h3{font-size:32px;margin-bottom:20px;}
.footer h4{font-size:24px;margin-bottom:20px;}
.footer ul{list-style:none;}
.footer ul li{margin:14px 0;}
.footer ul li a{text-decoration:none;color:#ddd;font-size:18px;transition:.3s;}
.footer ul li a:hover{color:#ffb300;}
.contact li{display:flex;align-items:center;gap:12px;color:#ddd;font-size:17px;}
.contact i{color:#ffb300;font-size:18px;width:20px;}
.footer-bottom{margin-top:40px;padding-top:20px;border-top:1px solid rgba(255,255,255,.2);display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;}
.payment-icons{display:flex;gap:15px;flex-wrap:wrap;font-size:40px;color:#fff;margin-right:40px;}
.payment-icons i:hover{color:#ffc107;transition:.3s;}
.payment{display:flex;gap:15px;flex-wrap:wrap;}
.payment img{height:36px;}
.copy{color:#ddd;font-size:17px;}
.top-btn{position:fixed;right:20px;bottom:20px;width:40px;height:40px;border-radius:50%;background:#0a7b43;display:flex;justify-content:center;align-items:center;text-decoration:none;color:#fff;font-size:22px;}

/*=====================

TABLET

=====================*/

@media(max-width:992px){
.footer{padding:50px 25px 20px;}
.footer-container{grid-template-columns:repeat(2,1fr);gap:40px;}
.footer-logo{grid-column:1/-1;}
.footer-bottom{flex-direction:column-reverse;text-align:center;gap:20px;}
.payment-icons{margin-right:0px;}
.payment{justify-content:center;}
.top-btn{width:55px;height:55px;}
}

/*===================== MOBILE =====================*/
@media(max-width:600px){
.footer{padding:35px 18px 20px;}
.footer-container{grid-template-columns:repeat(2,1fr);gap:35px 20px;}
.footer-logo{grid-column:1/-1;}
.footer-logo h2{font-size:44px;}
.footer h4{font-size:22px;}
.footer ul li a{font-size:17px;}
.contact li{font-size:16px;}
.social-icons{flex-wrap:wrap;}
.payment img{height:34px;}
.copy{font-size:16px;}
}