/* Front Page Custom Styles */

:root {
    --secondary-color:#0f9152;
    --white-color: #ffffff;
    --light-gray: #eaeaeb;
    --gray-color: #c1c2c3;
    --discount-red:#d71827;
}

#main-content{margin-top:-10px;}
.container{width:100%;max-width:1440px;margin:0 auto;padding:0 1rem;}
.section-padding{padding:4rem 0;}
.section-title{position:relative;margin-bottom:40px;margin-top:50px;color:var(--text-color);font-size:2rem;text-align:center;}
.section-title:after{content:'';display:block;width:6rem;height:0.25rem;background-color:var(--brand-color);margin:0.75rem auto 0;border-radius:0.125rem;}
.button{
    position:relative;display:inline-block;padding:0.75rem 1.5rem;background-color:var(--green-color);color:var(--white-color);border-radius:10px;
    font-size:1.65rem;font-weight:500;text-align:center;cursor:pointer;overflow:hidden;
}
.primary-button{background-color:var(--brand-color);}
.primary-button:hover{background-color:#037ad0;transform:translateY(-2px);}
.secondary-button{background-color:var(--secondary-color);color:var(--white-color);}
.secondary-button:hover{background-color:#0b7a44;transform:translateY(-2px);}
.view-all-container{margin-top:50px;text-align:center;}



/* Hero Section */
.hero-section{position:relative;width:100%;overflow:hidden;}
.hero-image{position:relative;width:100%;height:70vh;min-height:24rem;background-size:cover;background-position:center;background-repeat:no-repeat;}
.hero-image:before{position:absolute;content:'';width:100%;height:100%;top:0;left:0;background:linear-gradient(91deg, #12291c33, #12291cd9);}
.hero-content{position:absolute;top:50%;right:10%;transform:translateY(-50%);color:var(--white-color);text-align:right;max-width:35rem;}
.hero-content h1{font-size:3.2rem;margin-bottom:1rem;text-shadow:1px 1px 3px rgba(0, 0, 0, 0.5);}
.hero-content p{font-size:1.6rem;margin-bottom:2rem;text-shadow:1px 1px 2px rgba(0, 0, 0, 0.5);}


/* Categories Section */
.categories-grid{display:grid;grid-template-columns:repeat(auto-fill, minmax(15rem, 1fr));gap:1.5rem;}
.category-card{position:relative;background-color:#fbfbfb;border-radius:20px;box-shadow:0 3px 10px rgba(0, 0, 0, 0.05);overflow:hidden;}
.category-card:hover{transform:translateY(-5px);box-shadow:0 5px 15px rgba(0, 0, 0, 0.15);}
.category-image{width:100%;height:150px;overflow:hidden;}
.category-image img{width:100%;height:100%;object-fit:cover;transition: transform 0.5s ease;}
.category-card:hover .category-image img {transform: scale(1.1);}
.category-title{position:absolute;width:calc(100% - 14px);right:7px;bottom:7px;padding:5px;background:rgb(0 0 0 / 30%);backdrop-filter:blur(2px);color:var(--white-color);border-radius:12px;font-size:1.25rem;text-align:center;}
.category-card a{text-decoration:none;color:var(--text-color);}


/* Products Grid */
.products-grid{display:grid;grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));gap:2rem;}
.product-card{position:relative;padding:10px;background-color:var(--white-color);border-radius:20px;box-shadow:0 3px 10px rgba(0, 0, 0, 0.05);overflow:hidden;}
.product-card:hover{transform:translateY(-5px);box-shadow:0 8px 20px rgba(0, 0, 0, 0.12);}
.product-image{position:relative;width:100%;height:210px;overflow:hidden;}
.product-image > a{display:flex;width:100%;height:100%;}
.product-image img{width:100%;height:100%;object-fit:cover;border-radius:10px;transition: transform 0.5s ease;}
.product-card:hover .product-image img{transform:scale(1.05);}
.product-category{position:absolute;z-index:1;right:7px;top:7px;padding:5px 10px;background: rgb(11 183 100);color:var(--white-color);border-radius:12px;font-weight:600;font-size:1.1rem;}
.product-details{padding:1.25rem;}
.countdown-timer{display:flex;justify-content:space-around;align-items:center;gap:0.5rem;padding:0.75rem;background-color:var(--discount-red);color:var(--white-color);border-radius:12px;}
.countdown-item{display:flex;flex-direction:column;align-items:center;min-width:3rem;}
.countdown-item span{font-size:1.6rem;font-weight:700;}
.countdown-item .label{font-size:1.2rem;font-weight:400;}


/* banners styles */
#product_banners_list{display:flex;position:relative;width:100%;height:750px;margin-top:50px;}
#product_banners_list::before{position:absolute;z-index:-1;content: "";width:100%;height:100%;top:0;right:0;background:#000;opacity:0.3;}
#product_banners_list .product_banner_item{position:unset;width:25%;border-left:2px solid var(--body-bg);}
#product_banners_list .product_banner_item:last-of-type{border-left:none;}
#product_banners_list .product_banner_item .item_thumbnail{opacity:0;position:absolute;z-index:-2;width:100%;height:100%;top:0;right:0;object-fit:cover;}
#product_banners_list .product_banner_item:first-of-type .item_thumbnail, #product_banners_list .product_banner_item:hover .item_thumbnail{opacity:1;}
#product_banners_list .product_banner_item .product_banner_item_title{position:relative;z-index:1;width:100%;padding-top:100px;}
#product_banners_list .product_banner_item .product_banner_item_title::before{position:absolute;z-index:-1;content:"";width:100%;height:0;top:0;right:0;background:var(--body-bg);transition:all 0.3s ease-in-out;}
#product_banners_list .product_banner_item:hover .product_banner_item_title::before{height:230px;}
#product_banners_list .product_banner_item:hover .product_banner_item_title p{color:#000 !important;}
#product_banners_list .product_banner_item .product_banner_item_title p{color:#fff;font-size:24px;text-align:center;}

/* Testimonials Section */
.testimonials-section{background-color:var(--light-gray);}
.testimonials-slider{position: relative;max-width:1000px;margin:0 auto;overflow:hidden;}
.testimonials-wrapper{display:flex;transition:transform 0.5s ease;}
.testimonial-slide{display:flex;justify-content:right;flex-wrap:wrap;min-width:100%;gap:1.5rem;padding:0 10px;}
.testimonial-card{display:flex;flex-direction:column;width:calc(33.333% - 1rem);min-height:120px;padding:15px;border-radius:20px 2px 20px 20px;background-color:var(--white-color);box-shadow:0 4px 12px rgba(0, 0, 0, 0.08);}
.testimonial-rating{margin-bottom:5px;}
.star{color:#ddd;font-size:2rem;}
.star.filled{color:#ffc107;}
.testimonial-content{flex-grow:1;font-size:1.45rem;}
.testimonial-author{color:var(--text-color);font-size:1.7rem;font-weight:600;}
.testimonial-controls{display:flex;justify-content:center;align-items:center;margin-top:20px;}
.testimonial-controls button{
    display:flex;align-items:center;justify-content:center;width:30px;height:30px;margin:0 0.5rem;border-radius:12px;background-color:var(--white-color);font-size:14px;box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);cursor:pointer;
}
.testimonial-controls button:hover {background-color:var(--brand-color);color:var(--white-color);}
.testimonial-dots{display:flex;justify-content:center;align-items:center;margin:0 1rem;}
.testimonial-dot{width:8px;height:8px;margin:0 0.25rem;border-radius:3px;background-color:var(--gray-color);cursor:pointer;}
.testimonial-dot.active{background-color:var(--brand-color);transform:scale(1.2);}


/* blog cards */
.blog-grid{display:grid;grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));gap:2rem;}
.blog_card_item{width:100%;flex-shrink:0;}
.blog_card_item_inner{
    display:flex;flex-direction:column;position:relative;height:100%;background:var(--white-color);border:2px solid transparent;border-radius:40px;box-shadow:0 3px 10px rgba(0, 0, 0, 0.08);transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.blog_card_item_inner:hover{transform: translateY(-5px);box-shadow:0 8px 20px rgba(0, 0, 0, 0.12);}
.blog_card_item_inner:hover .blog_card_item_thumbnail img{transform:scale(1.05);}
.blog_card_item_inner:hover .blog_card_item_more_btn i{transform:translateX(-10px);}
.blog_card_item_inner .product-category{top:15px;right:15px;}
.blog_card_item_thumbnail{height:244px;border-radius:40px 40px 0 0;overflow:hidden;}
.blog_card_item_thumbnail img{width:100%;height:100%;object-fit:cover;}
.blog_card_item_info{padding:20px;display:flex;flex-direction:column;flex-grow:1;}
.blog_card_item_info *{color:var(--footer-text-color);}
.blog_card_item_title{flex-grow:1;font-size:1.8rem;font-weight:700;line-height:34px;}
.blog_card_item_excerpt{margin-top:8px;}
.blog_card_item_excerpt p{
    font-size:1.4rem;line-height:25px;height:50px;
    display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;white-space:pre-wrap;overflow:hidden;
}
.blog_post_seprator{width:100%;height:1px;margin:13px 0;background-color:var(--light-text-color);}
.blog_card_item_more_btn{background:transparent;font-size:1.8rem;font-weight:500;line-height:33px;}
.blog_card_item_more_btn i{font-size:1.4rem;letter-spacing:8px;}

/* accordion styles */
.yooz_accordion{padding:15px;}
.yooz_accordion_box{width:min(820px , 100%);margin:auto;}
.yooz_accordion .yooz_accordion_item{margin-bottom:24px;background:var(--card-bg);border:1px solid rgba(55, 81, 68, 0.6);border-radius:16px;}
.yooz_accordion .yooz_accordion_header{padding:10px;cursor:pointer;}
.yooz_accordion .yooz_accordion_title{flex-grow:1;font-size:1.8rem;font-weight:500;user-select:none;}
.yooz_accordion .yooz_accordion_appearance{display:flex;justify-content:center;align-items:center;flex-shrink:0;width:30px;margin-right:10px;font-size:1.7rem;}
.yooz_accordion .yooz_accordion_appearance::before{transition:all 0.3s ease;}
.yooz_accordion_item.isCollapse .yooz_accordion_appearance::before{transform:rotateX(180deg);}
.yooz_accordion .yooz_accordion_body{height:0;transform:scaleY(0);visibility:hidden;opacity:0;overflow:hidden;}
.yooz_accordion_item.isCollapse .yooz_accordion_body{height:fit-content !important;transform:scaleY(1) !important;;visibility:visible !important;;opacity:1 !important;}
.yooz_accordion .yooz_accordion_body .yooz_accordion_text{padding:10px;font-size:1.5rem;}


/* Responsive Styles */
@media (max-width:1280px){
    .section-title{font-size:1.8rem;}
    .hero-content h1{font-size:2.5rem;}
}
@media (max-width:1024px){
    .hero-content{max-width:30rem;right:5%;}
    .hero-content h1{font-size:2.3rem;}
    .hero-content p{font-size:1.5rem;}
    .hero-content .button{font-size:1.45rem;}
}
@media (max-width:820px){
    #main-content{margin-top:0;}
    .section-title{font-size:1.6rem;}
    #product_banners_list{display:none;}
}
@media (max-width:768px){
    .section-padding{padding:3rem 0;}
    .hero-image{height:50vh;}
    .hero-image:before{background:rgba(0, 0, 0, 0.4);}
    .hero-content{width: 90%;right:50%;transform:translate(50%, -50%);text-align:center;}
    .hero-content h1{font-size:2.1rem;}
    .products-grid, .blog-grid{grid-template-columns:repeat(auto-fill, minmax(250px, 1fr));}
    .testimonial-slide{flex-direction:column;}
    .testimonial-card{width:100%;margin-bottom:15px;}
    .blog_card_item{margin-bottom:18px;}
    .blog_card_item_title{font-size:1.5rem;line-height:28px;}
}
@media (max-width:640px){
    .yooz_accordion .yooz_accordion_title{font-size:1.4rem;font-weight:400;}
    .yooz_accordion .yooz_accordion_body .yooz_accordion_text{font-size:1.35rem;}
}
@media (max-width:576px){
    .section-title{font-size:1.5rem;}
    .hero-content h1{font-size:1.75rem;}
    .hero-content p{font-size:1.4rem;}
    .category-card{margin-bottom:1rem;}
    .products-grid, .blog-grid{grid-template-columns:1fr;gap:1.5rem;}
}