/* ===================================================================
   Growmore Appliances — Homepage Redesign (Lightweight / Professional)
   Font: Poppins | Author: Vinit's rebuild
=================================================================== */

:root{
    --primary-color   : #081D0D;
    --secondary-color : #FBF8F2;
    --text-color      : #5c6b60;
    --accent-color    : #FFD268;
    --white-color     : #FFFFFF;
    --divider-color   : #081D0D1A;
    --dark-divider    : #FFFFFF1A;
    --radius          : 16px;
    --font            : 'Poppins', sans-serif;
}

*{ box-sizing: border-box; }

html{ scroll-behavior: smooth; }

body{
    font-family: var(--font);
    font-size: 16px;
    color: var(--text-color);
    background-color: var(--secondary-color);
    line-height: 1.65;
    overflow-x: hidden;
}

h1,h2,h3,h4,h5,h6{
    font-family: var(--font);
    color: var(--primary-color);
    font-weight: 600;
    line-height: 1.25;
    margin: 0;
}

img{ max-width: 100%; display: block; }
a{ text-decoration: none; }
.container{ max-width: 1240px; }

.dark-section{ background: var(--primary-color); }
.dark-section h1, .dark-section h2, .dark-section h3, .dark-section p{ color: #fff; }

/* ---- Reveal on scroll ---- */
.reveal-up{ opacity: 0; transform: translateY(24px); transition: all .6s ease; }
.reveal-up.in-view{ opacity: 1; transform: translateY(0); }

/* ---- Eyebrow ---- */
.eyebrow{
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--primary-color);
    margin-bottom: 10px;
}
.dark-section .eyebrow{ color: var(--accent-color); }
.eyebrow::before{
    content:'';
    width: 8px; height: 8px;
    border-radius: 50%;
    background: var(--accent-color);
    display: inline-block;
}

.section-pad{ padding: 70px 0; }
.section-pad-sm{ padding: 50px 0; }

.section-head{ max-width: 620px; margin: 0 auto 40px; text-align: center; }
.section-head h2{ font-size: 32px; font-weight: 700; }
.section-head p{ margin-top: 12px; color: var(--text-color); }
.dark-section .section-head p{ color: rgba(255,255,255,.75); }

.btn-primary-gm{
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--accent-color);
    color: var(--primary-color);
    font-weight: 600;
    font-size: 15px;
    padding: 14px 26px;
    border-radius: 50px;
    border: none;
    transition: all .3s ease;
}
.btn-primary-gm:hover{ background: var(--primary-color); color: var(--accent-color); }

.btn-outline-gm{
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: transparent;
    color: var(--white-color);
    font-weight: 600;
    font-size: 15px;
    padding: 13px 25px;
    border-radius: 50px;
    border: 1.5px solid rgba(255,255,255,.4);
    transition: all .3s ease;
}
.btn-outline-gm:hover{ background: #fff; color: var(--primary-color); border-color: #fff; }

/* ============ HEADER ============ */
.gm-header{
    position: sticky;
    top: 0;
    z-index: 999;
    background: var(--primary-color);
    border-bottom: 1px solid var(--dark-divider);
    transition: all .3s ease;
}
.gm-header .navbar{ padding: 14px 0; }
.gm-header .navbar-brand img{ height: 42px; width: auto; }
.gm-nav .nav-link{
    color: #fff !important;
    font-weight: 500;
    font-size: 15px;
    padding: 10px 14px !important;
    transition: color .25s ease;
}
.gm-nav .nav-link:hover{ color: var(--accent-color) !important; }
.gm-header .navbar-toggler{
    border: none;
    background: var(--accent-color);
    padding: 8px 10px;
    border-radius: 8px;
}
.gm-header .navbar-toggler:focus{ box-shadow: none; }

/* ============ HERO ============ */
.gm-hero{
    background: linear-gradient(180deg, var(--primary-color) 0%, #0d2b14 100%);
    padding: 60px 0 0;
    overflow: hidden;
}
.gm-hero-content h1{
    color: #fff;
    font-size: 42px;
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: 16px;
}
.gm-hero-content p{
    color: rgba(255,255,255,.75);
    font-size: 16px;
    max-width: 480px;
    margin-bottom: 26px;
}
.gm-hero-btns{ display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 30px; }

.gm-hero-badges{
    display: flex;
    flex-wrap: wrap;
    gap: 14px 28px;
    border-top: 1px solid var(--dark-divider);
    padding-top: 22px;
}
.gm-hero-badges span{
    display: flex;
    align-items: center;
    gap: 8px;
    color: #fff;
    font-size: 14px;
    font-weight: 500;
}
.gm-hero-badges i{ color: var(--accent-color); font-size: 16px; }

.gm-hero-image{
    position: relative;
    text-align: center;
    align-self: flex-end;
}
.gm-hero-image img{
    max-width: 88%;
    margin: 0 auto;
    position: relative;
    z-index: 1;
}
.gm-hero-image::before{
    content:'';
    position: absolute;
    bottom: 0; left: 50%;
    transform: translateX(-50%);
    width: 320px; height: 320px;
    background: radial-gradient(circle, rgba(255,210,104,.18) 0%, rgba(255,210,104,0) 70%);
    border-radius: 50%;
}

/* ============ TICKER ============ */
.gm-ticker{ background: var(--accent-color); padding: 16px 0; overflow: hidden; }
.gm-ticker-track{ display: flex; gap: 60px; width: max-content; animation: gmScroll 32s linear infinite; }
.gm-ticker-track span{
    font-size: 18px;
    font-weight: 600;
    color: var(--primary-color);
    white-space: nowrap;
    display: flex;
    align-items: center;
    gap: 10px;
}
.gm-ticker-track span::before{ content:''; width: 6px; height: 6px; border-radius: 50%; background: var(--primary-color); }
@keyframes gmScroll{ from{ transform: translateX(0);} to{ transform: translateX(-50%);} }

/* ============ WHAT WE FIX (category cards) ============ */
.gma-cat-card{
    border-radius: var(--radius);
    overflow: hidden;
    cursor: pointer;
    border: 1.5px solid var(--divider-color);
    background: #fff;
    height: 100%;
    transition: transform .25s ease, box-shadow .25s ease;
}
.gma-cat-card:hover{ transform: translateY(-6px); box-shadow: 0 14px 32px rgba(255,210,104,.22); }
.gma-cat-img{ width: 100%; height: 150px; overflow: hidden; position: relative; }
.gma-cat-img img{ width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.gma-cat-card:hover .gma-cat-img img{ transform: scale(1.06); }
.gma-cat-pill{
    position: absolute; top: 10px; left: 10px;
    background: rgba(255,210,104,.95);
    color: var(--primary-color);
    font-size: 10px; font-weight: 700;
    padding: 4px 11px; border-radius: 20px;
    text-transform: uppercase;
}
.gma-cat-body{ padding: 14px 16px 16px; }
.gma-cat-name{ font-size: 15px; font-weight: 600; margin-bottom: 10px; }
.gma-cat-btn{
    width: 100%; padding: 9px 0;
    background: var(--primary-color);
    color: var(--accent-color);
    font-size: 12px; font-weight: 600;
    border: none; border-radius: 50px;
}

/* ============ ABOUT (no images, text-driven) ============ */
.gm-about-feature{
    display: flex;
    gap: 16px;
    padding: 22px;
    background: #fff;
    border: 1px solid var(--divider-color);
    border-radius: var(--radius);
    height: 100%;
}
.gm-about-feature .icon-box{
    width: 52px; height: 52px;
    flex-shrink: 0;
    background: var(--accent-color);
    border-radius: 12px;
    display: flex; align-items: center; justify-content: center;
    font-size: 20px; color: var(--primary-color);
}
.gm-about-feature h3{ font-size: 17px; margin-bottom: 6px; }
.gm-about-feature p{ margin: 0; font-size: 14px; }

.gm-stat-row{ display: flex; flex-wrap: wrap; gap: 30px; margin-top: 36px; border-top: 1px solid var(--divider-color); padding-top: 30px; }
.gm-stat{ text-align: left; }
.gm-stat h2{ font-size: 34px; font-weight: 700; color: var(--primary-color); margin-bottom: 4px; }
.gm-stat span{ font-size: 14px; color: var(--text-color); }

/* ============ POPULAR SERVICES (icon-only, no images) ============ */
.gm-service-chip{
    display: flex;
    align-items: center;
    gap: 14px;
    background: #fff;
    border: 1px solid var(--divider-color);
    border-radius: 14px;
    padding: 16px 18px;
    height: 100%;
    transition: all .25s ease;
}
.gm-service-chip:hover{ border-color: var(--accent-color); background: #fffdf6; transform: translateY(-4px); }
.gm-service-chip .icon-box{
    width: 46px; height: 46px; flex-shrink: 0;
    background: var(--primary-color);
    color: var(--accent-color);
    border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    font-size: 18px;
}
.gm-service-chip h3{ font-size: 14.5px; font-weight: 600; color: var(--primary-color); margin: 0; }

/* ============ WHY CHOOSE US ============ */
.gm-why-item{
    display: flex;
    align-items: center;
    gap: 16px;
    background: rgba(255,255,255,.04);
    border: 1px solid var(--dark-divider);
    border-radius: 14px;
    padding: 18px;
    height: 100%;
}
.gm-why-item .icon-box{
    width: 52px; height: 52px; flex-shrink: 0;
    border: 1.5px solid var(--accent-color);
    border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    color: var(--accent-color);
    font-size: 20px;
}
.gm-why-item h3{ font-size: 15.5px; color: #fff; margin: 0; }

.gm-why-stats{ display: flex; flex-wrap: wrap; gap: 30px; margin-top: 40px; border-top: 1px solid var(--dark-divider); padding-top: 30px; }
.gm-why-stats .gm-stat h2{ color: var(--accent-color); }
.gm-why-stats .gm-stat span{ color: rgba(255,255,255,.7); }

/* ============ HOW IT WORK ============ */
.gm-work-nav{
    display: flex; flex-wrap: wrap; gap: 10px;
    border-bottom: 2px solid var(--dark-divider);
    margin-bottom: 36px;
}
.gm-work-nav button{
    background: transparent; border: none;
    color: rgba(255,255,255,.6);
    font-family: var(--font);
    font-weight: 600; font-size: 15px;
    padding: 0 4px 16px;
    position: relative;
    transition: color .3s ease;
}
.gm-work-nav button span{ color: var(--accent-color); margin-right: 6px; }
.gm-work-nav button.active{ color: #fff; }
.gm-work-nav button::after{
    content:''; position: absolute; bottom: -2px; left: 0; right: 0;
    height: 2px; background: var(--accent-color);
    transform: scaleX(0); transition: transform .3s ease;
}
.gm-work-nav button.active::after{ transform: scaleX(1); }

.gm-work-pane{ display: none; }
.gm-work-pane.active{ display: block; }
.gm-work-pane ul{ list-style: none; padding: 0; margin: 18px 0 0; display: flex; flex-wrap: wrap; gap: 14px 30px; }
.gm-work-pane ul li{ position: relative; padding-left: 26px; color: rgba(255,255,255,.85); width: calc(50% - 15px); }
.gm-work-pane ul li::before{ content:'\f00c'; font-family:'Font Awesome 6 Free'; font-weight:900; color: var(--accent-color); position:absolute; left:0; top:2px; font-size:13px; }
.gm-work-pane p{ color: rgba(255,255,255,.8); margin-bottom: 0; }

/* ============ TESTIMONIALS ============ */
.gm-testi-card{
    background: rgba(255,255,255,.05);
    border: 1px solid var(--dark-divider);
    border-radius: var(--radius);
    padding: 26px;
    height: 100%;
}
.gm-testi-head{ display: flex; align-items: center; gap: 14px; margin-bottom: 16px; }
.gm-testi-head img{ width: 48px; height: 48px; border-radius: 50%; object-fit: cover; }
.gm-testi-head h3{ font-size: 15.5px; color: #fff; margin-bottom: 2px; }
.gm-testi-head span{ font-size: 12.5px; color: rgba(255,255,255,.6); }
.gm-testi-card .stars{ color: var(--accent-color); font-size: 13px; margin-bottom: 12px; }
.gm-testi-card p{ color: rgba(255,255,255,.85); font-size: 14.5px; margin: 0; }

/* ============ FOOTER ============ */
.gm-footer{ background: var(--primary-color); padding-top: 60px; }
.gm-footer h3{ color: #fff; font-size: 17px; margin-bottom: 20px; }
.gm-footer p, .gm-footer a{ color: rgba(255,255,255,.7); }
.gm-footer ul{ list-style: none; padding: 0; margin: 0; }
.gm-footer ul li{ margin-bottom: 10px; font-size: 14px; }
.gm-footer ul li a:hover{ color: var(--accent-color); }
.gm-footer-logo img{ height: 40px; margin-bottom: 14px; }
.gm-footer-divider{ border-top: 1px solid var(--dark-divider); margin-top: 40px; padding-top: 24px; text-align: center; }
.gm-footer-divider p{ margin: 0; font-size: 13.5px; }
.gm-social{ display: flex; gap: 10px; margin-top: 16px; }
.gm-social a{
    width: 36px; height: 36px; border-radius: 50%;
    background: var(--accent-color); color: var(--primary-color);
    display: flex; align-items: center; justify-content: center;
    transition: all .3s ease;
}
.gm-social a:hover{ background: #fff; }
.gm-newsletter{ display: flex; gap: 0; margin-top: 8px; }
.gm-newsletter input{
    flex: 1;
    background: transparent;
    border: 1px solid var(--dark-divider);
    border-right: none;
    border-radius: 8px 0 0 8px;
    padding: 12px 16px;
    color: #fff;
    font-family: var(--font);
    font-size: 14px;
}
.gm-newsletter input::placeholder{ color: rgba(255,255,255,.4); }
.gm-newsletter button{
    border-radius: 0 8px 8px 0;
    padding: 12px 20px;
    font-size: 14px;
}

/* ============ MODAL (What We Fix popup) ============ */
#gmpOverlay{
    display: none; position: fixed; inset: 0;
    background: rgba(5,5,15,.7); z-index: 999999;
    align-items: center; justify-content: center; padding: 20px;
}
#gmpOverlay.gmp-show{ display: flex; }
#gmpBox{
    background: #fff; border-radius: 22px; width: 100%; max-width: 940px;
    max-height: 90vh; display: flex; flex-direction: column; overflow: hidden;
    box-shadow: 0 40px 100px rgba(0,0,0,.4);
}
#gmpHead{ background: var(--primary-color); padding: 22px 30px; display: flex; align-items: center; justify-content: space-between; }
#gmpHeadLeft{ display: flex; align-items: center; gap: 16px; }
#gmpIconWrap{ width: 50px; height: 50px; border-radius: 12px; background: rgba(255,210,104,.15); border: 2px solid rgba(255,210,104,.3); display: flex; align-items: center; justify-content: center; }
#gmpIconWrap svg{ width: 28px; height: 28px; }
#gmpTitle{ color: #fff; font-size: 1.15rem; font-weight: 600; margin: 0; }
#gmpSub{ color: rgba(255,255,255,.4); font-size: .78rem; margin-top: 3px; }
#gmpClose{ width: 38px; height: 38px; border-radius: 50%; background: rgba(255,255,255,.08); border: 1.5px solid rgba(255,255,255,.15); color: rgba(255,255,255,.75); font-size: 1rem; cursor: pointer; }
#gmpClose:hover{ background: rgba(255,210,104,.2); color: var(--accent-color); border-color: rgba(255,210,104,.45); }
#gmpBody{ padding: 26px 30px 20px; overflow-y: auto; flex: 1; background: #f9f8f5; }
#gmpGrid{ display: grid; grid-template-columns: repeat(auto-fill, minmax(170px,1fr)); gap: 14px; }
.gmp-card{ background: #fff; border: 1.5px solid var(--divider-color); border-radius: 14px; overflow: hidden; transition: all .25s ease; }
.gmp-card:hover{ transform: translateY(-5px); border-color: var(--accent-color); box-shadow: 0 10px 28px rgba(255,210,104,.22); }
.gmp-card-img{ width: 100%; height: 120px; background: #f0ece3; overflow: hidden; }
.gmp-card-img img{ width: 100%; height: 100%; object-fit: cover; }
.gmp-card-body{ padding: 12px; }
.gmp-card-title{ font-size: .78rem; font-weight: 600; color: var(--primary-color); min-height: 2.1em; margin: 0 0 10px; }
.gmp-card-btn{ display: block; width: 100%; text-align: center; font-size: .72rem; font-weight: 700; padding: 7px 0; border-radius: 50px; border: 2px solid var(--accent-color); background: transparent; color: var(--primary-color); }
.gmp-card-btn:hover{ background: var(--accent-color); }
#gmpFooter{ padding: 14px 30px; border-top: 1px solid var(--divider-color); background: #fff; display: flex; align-items: center; justify-content: space-between; }
#gmpFooter span{ font-size: .8rem; color: #aaa; }
#gmpFooterLink{ font-size: .82rem; font-weight: 700; color: var(--primary-color); background: var(--accent-color); padding: 7px 20px; border-radius: 50px; }

/* ============ RESPONSIVE ============ */
@media (max-width: 991px){
    .gm-hero-content h1{ font-size: 32px; }
    .section-head h2{ font-size: 26px; }
    .gm-work-pane ul li{ width: 100%; }
    .section-pad{ padding: 50px 0; }
}

@media (max-width: 767px){
    .gm-hero{ padding-top: 30px; text-align: center; }
    .gm-hero-content p{ margin-left: auto; margin-right: auto; }
    .gm-hero-btns{ justify-content: center; }
    .gm-hero-badges{ justify-content: center; }
    .gm-hero-content h1{ font-size: 27px; }
    .gm-hero-image{ margin-top: 30px; }
    .gm-hero-image img{ max-width: 70%; }
    .section-head h2{ font-size: 22px; }
    .gm-stat-row, .gm-why-stats{ gap: 20px; }
    .gm-stat h2, .gm-why-stats .gm-stat h2{ font-size: 26px; }
    .gm-work-nav{ overflow-x: auto; flex-wrap: nowrap; }
    .gm-work-nav button{ white-space: nowrap; }
    #gmpGrid{ grid-template-columns: 1fr 1fr; }
}