/* ===========================
   Green Gallop Product Page
   =========================== */

html{
    scroll-behavior:smooth;
}

section{
    scroll-margin-top:90px;
}

#hero{
    padding-top:90px;
    padding-bottom:110px;

    background:
        radial-gradient(circle at top left,#edf9ef 0%,#ffffff 55%),
        linear-gradient(135deg,#eef8ee,#ffffff);

    box-shadow:
        inset 0 -25px 35px rgba(0,0,0,.03);
}

#hero .btn{
    border-radius:50px;
    padding:14px 32px;
    font-weight:600;
}

#hero img{
    border-radius:20px;
    box-shadow:0 20px 50px rgba(0,0,0,.15);
}

#productNav{
    transition:.3s;
}

#productNav .nav-link{
    font-weight:600;
}

#productNav .nav-link.active{
    color:#198754;
    border-bottom:3px solid #198754;
}

.card{
    transition:.35s ease;
}

.card:hover{
    transform:translateY(-8px);
    box-shadow:0 20px 40px rgba(0,0,0,.12);
}
/* ==========================
   Benefit Cards
   ========================== */

#benefits .card{

    border:none;
    border-radius:18px;

    transition:all .35s ease;

    box-shadow:0 8px 20px rgba(0,0,0,.05);

}

#benefits .card-body{

    padding:2.5rem;

}

#benefits .card:hover{

    transform:translateY(-10px);

    box-shadow:0 22px 45px rgba(0,0,0,.12);

}

#benefits .card i{

    font-size:3.2rem;

    color:#198754;

    transition:.3s;

}

#benefits .card:hover i{

    transform:scale(1.08);

}
#benefits h2{

    margin-bottom:.5rem;

}

#benefits p.text-muted{

    margin-bottom:4rem;

}
/* ==========================
   Section Headings
   ========================== */

.section-title{

    text-align:center;
    margin-bottom:60px;

}

.section-title h2{

    font-size:2.5rem;
    font-weight:700;
    margin-bottom:.75rem;

}

.section-title p{

    color:#6c757d;
    font-size:1.1rem;
    margin-bottom:20px;

}

.section-divider{

    width:80px;
    height:5px;

    background:#198754;

    border-radius:50px;

    margin:25px auto 0;

}
#meet{
    padding-bottom:60px;
}
/* ==========================
   Hero Image
   ========================== */

#hero img{

    border-radius:24px;

    box-shadow:
        0 30px 60px rgba(0,0,0,.18);

    transition:.4s ease;

}

#hero img:hover{

    transform:translateY(-6px);

}
#hero h1{

    font-size:4.25rem;
    line-height:1.05;
    font-weight:800;

}
#hero .d-flex{

    margin-top:35px;

}
#hero{

    position:relative;

}

#hero::after{

    content:"";

    position:absolute;

    left:0;
    right:0;
    bottom:0;

    height:120px;

    background:
        linear-gradient(
            rgba(255,255,255,0),
            #ffffff
        );

    pointer-events:none;

}
/* ==========================
   Specifications
   ========================== */

.spec-row{

display:flex;

justify-content:space-between;

align-items:center;

padding:18px 22px;

margin-bottom:14px;

background:white;

border-radius:14px;

box-shadow:0 8px 20px rgba(0,0,0,.05);

}

.spec-label{

font-weight:600;

font-size:1.05rem;

}

.spec-label i{

margin-right:10px;

}

.spec-value{

color:#555;

font-weight:500;

}
.spec-card{
    max-width:850px;
    margin:0 auto;
    background:#fff;
    border-radius:18px;
    box-shadow:0 15px 40px rgba(0,0,0,.08);
    overflow:hidden;
}

.spec-row{
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:18px 28px;
    border-bottom:1px solid #e9ecef;
}

.spec-row:last-child{
    border-bottom:none;
}

.spec-label{
    font-weight:600;
    color:#222;
}

.spec-label i{
    margin-right:10px;
}

.spec-value{
    color:#555;
    font-weight:500;
    text-align:right;
}
/* ===================================
   Downloads
=================================== */

.download-card{

    background:#fff;

    border-radius:22px;

    padding:45px 35px;

    text-align:center;

    box-shadow:0 12px 35px rgba(0,0,0,.08);

    transition:.35s;

    height:100%;

}

.download-card:hover{

    transform:translateY(-8px);

    box-shadow:0 25px 55px rgba(0,0,0,.14);

}

.download-icon{

    font-size:64px;

    color:#198754;

    margin-bottom:20px;

}

.download-card h4{

    font-weight:700;

    margin-bottom:18px;

}

.download-card p{

    color:#666;

    min-height:72px;

    margin-bottom:30px;

}

.download-card .btn{

    border-radius:50px;

    padding:12px 30px;

}
.bg-soft{
    background:#f8fbf8;
}
.narrow-content{
    max-width:900px;
    margin:auto;
}
.fade-up{
    opacity:0;
    transform:translateY(30px);
    transition:.6s ease;
}

.fade-up.show{
    opacity:1;
    transform:none;
}
.btn-success{

    border-radius:50px;

    padding:.8rem 2rem;

    font-weight:600;

}
@media (max-width:768px){

    #hero h1{
        font-size:2.5rem;
    }

    .section-title h2{
        font-size:2rem;
    }

    .download-card{
        padding:30px 24px;
    }
}
.cta-section .btn{

    border-radius:50px;

    padding:16px 42px;

    font-size:1.15rem;

    font-weight:600;

    min-width:220px;

}
.cta-section .btn:hover{

    transform:translateY(-3px);

    box-shadow:0 15px 30px rgba(0,0,0,.18);

}
html{
    scroll-behavior:smooth;
}
.btn{
    transition:.25s ease;
}

.btn:hover{
    transform:translateY(-2px);
    box-shadow:0 .75rem 1.5rem rgba(0,0,0,.15);
}
#productNav .nav-link{
    color:#555;
    transition:.25s;
}

#productNav .nav-link.active{
    color:#198754;
    font-weight:600;
}

#productNav .nav-link.active::after{
    content:"";
    display:block;
    height:2px;
    margin-top:4px;
    background:#198754;
}
.fade-in{
    opacity:0;
    transform:translateY(40px);
    transition:
        opacity .7s ease,
        transform .7s ease;
}

.fade-in.show{
    opacity:1;
    transform:translateY(0);
}
#backToTop{

    position:fixed;

    right:30px;

    bottom:30px;

    width:56px;

    height:56px;

    border-radius:50%;

    background:linear-gradient(135deg,#2d6a2d,#4b8d4b);

    border:2px solid rgba(255,255,255,.25);

    backdrop-filter:blur(6px);

    color:#fff;

    display:flex;

    align-items:center;

    justify-content:center;

    text-decoration:none;

    font-size:24px;

    box-shadow:0 10px 25px rgba(0,0,0,.20);

    opacity:0;

    visibility:hidden;

    transform:translateY(20px);

    transition:.3s;

    z-index:9999;

}

#backToTop:hover{

    background:linear-gradient(135deg,#3b8c3b,#67b567);

    color:#fff;

    transform:translateY(-4px) scale(1.05);

    box-shadow:0 15px 35px rgba(0,0,0,.30);

}
#backToTop.show{
    opacity:1;
    visibility:visible;
    transform:translateY(0);
}
#backToTop{
    opacity:0;
    visibility:hidden;
    transform:translateY(20px) scale(.9);
    transition:
        opacity .3s ease,
        transform .3s ease,
        visibility .3s;
}

#backToTop.show{
    opacity:1;
    visibility:visible;
    transform:translateY(0) scale(1);
}
#backToTop:active{
    transform:scale(.92);
}
.hero-small{

padding:90px 0;

background:linear-gradient(135deg,#2d6a2d,#4f8f46);

color:#fff;

}

.contact-card{

background:#fff;

padding:40px;

border-radius:18px;

box-shadow:0 15px 40px rgba(0,0,0,.08);

height:100%;

}

.contact-card h2{

font-weight:700;

margin-bottom:20px;

}

.contact-card label{

font-weight:600;

margin-bottom:6px;

}

.contact-card a{

color:#2d6a2d;

text-decoration:none;

}

.contact-card a:hover{

text-decoration:underline;

}
/* ==============================
CONTACT PAGE
============================== */

.contact-hero{

position:relative;

    padding:180px 0;

    background:
        linear-gradient(
            rgba(20,45,22,.60),
            rgba(20,45,22,.72)
        ),
url('../images/greengallop/horse-pasture.png');

background-size:cover;
    background-position:center center;
    background-repeat:no-repeat;
    background-attachment:fixed;

    color:#fff;

}

.contact-hero h1{

    font-size:4rem;
    font-weight:800;
    text-shadow:0 4px 18px rgba(0,0,0,.45);

}

.contact-hero .lead{

    font-size:1.35rem;
    max-width:700px;
    margin:25px auto 0;
    opacity:.95;

}

.contact-section{

background:#f6f8f7;

padding:90px 0;

}

.info-card{

background:#fff;

border-radius:20px;

padding:30px;

margin-bottom:25px;

box-shadow:0 15px 35px rgba(0,0,0,.08);

transition:.3s;

}

.info-card:hover{

transform:translateY(-6px);

}

.icon-circle{

width:70px;

height:70px;

background:#2d6a2d;

color:#fff;

border-radius:50%;

display:flex;

align-items:center;

justify-content:center;

font-size:28px;

margin-bottom:20px;

}

.help-box{

background:linear-gradient(135deg,#2d6a2d,#4c8d48);

color:#fff;

padding:35px;

border-radius:20px;

box-shadow:0 20px 40px rgba(0,0,0,.12);

}

.help-box ul{

padding-left:20px;

margin:0;

}

.form-card{

background:#fff;

padding:45px;

border-radius:24px;

box-shadow:0 20px 45px rgba(0,0,0,.08);

}

.form-card h2{

margin-bottom:35px;

font-weight:700;

}

.form-control,
.form-select{

height:56px;

border-radius:12px;

}

textarea.form-control{

height:auto;

}

.btn-green{

background:linear-gradient(135deg,#2d6a2d,#4b8d4b);

border:none;

color:#fff;

padding:18px;

border-radius:14px;

font-size:1.1rem;

font-weight:600;

transition:.3s;

}

.btn-green:hover{

transform:translateY(-3px);

box-shadow:0 12px 30px rgba(45,106,45,.35);

color:#fff;

}
.contact-bottom{

    border-top:1px solid #e8ece8;

    margin-top:80px;

}
.contact-bottom{

padding:90px 0;

background:#fff;

}

.bottom-card{

padding:40px;

border-radius:20px;

background:#fff;

box-shadow:0 15px 35px rgba(0,0,0,.08);

transition:.3s;

height:100%;

}

.bottom-card:hover{

transform:translateY(-6px);

}

.bottom-card i{

font-size:48px;

color:#2d6a2d;

margin-bottom:20px;

}
.hero-badge{

    display:inline-flex;
    align-items:center;
    gap:10px;

    padding:12px 26px;

    border-radius:50px;

    background:rgba(255,255,255,.15);

    border:1px solid rgba(255,255,255,.25);

    backdrop-filter:blur(10px);

    font-weight:600;

    margin-bottom:30px;

}
.contact-hero h1,
.contact-hero .lead,
.hero-badge{

    animation:fadeUp .8s ease forwards;

}

@keyframes fadeUp{

    from{
        opacity:0;
        transform:translateY(25px);
    }

    to{
        opacity:1;
        transform:translateY(0);
    }

}
.contact-form-card{

    background:#fff;

    border-radius:24px;

    padding:45px;

    box-shadow:
        0 25px 60px rgba(0,0,0,.12);

    border:1px solid rgba(0,0,0,.05);

}
.contact-form-card .form-control,
.contact-form-card .form-select,
.contact-form-card textarea{

    border:2px solid #e5ebe5;

    border-radius:12px;

    padding:14px 16px;

    font-size:16px;

    transition:.25s;

    box-shadow:none;

}

.contact-form-card .form-control:focus,
.contact-form-card .form-select:focus,
.contact-form-card textarea:focus{

    border-color:#2c6a2c;

    box-shadow:0 0 0 .25rem rgba(44,106,44,.15);

}
.contact-form-card label{

    font-weight:700;

    color:#1f3f20;

    margin-bottom:8px;

}
.btn-submit{

    background:linear-gradient(
        135deg,
        #2c6a2c,
        #4f9b49
    );

    color:#fff;

    border:none;

    border-radius:50px;

    padding:15px 34px;

    font-weight:700;

    font-size:17px;

    transition:.25s;

}
.btn-submit{

    width:100%;

    padding:18px;

    font-size:18px;

}
/* ==========================
   Testimonial
========================== */

.testimonial-section{

    padding:90px 0;

    background:#f8faf8;

}

.testimonial-card{

    background:#fff;

    border-radius:28px;

    padding:60px;

    text-align:center;

    box-shadow:0 25px 60px rgba(0,0,0,.10);

    position:relative;

    overflow:hidden;

    border-top:6px solid #2d6a2d;

}

.quote-icon{

    font-size:52px;

    color:#2d6a2d;

    opacity:.18;

    margin-bottom:20px;

}

.testimonial-stars{

    color:#d6a700;

    font-size:26px;

    letter-spacing:4px;

    margin-bottom:20px;

}

.testimonial-card blockquote{

    font-size:1.35rem;

    line-height:1.8;

    color:#444;

    font-style:italic;

    margin:0 auto 40px;

    max-width:700px;

}

.testimonial-author{

    display:flex;

    align-items:center;

    justify-content:center;

    gap:18px;

}

.testimonial-avatar{

    width:72px;

    height:72px;

    border-radius:50%;

    object-fit:cover;

    border:4px solid #edf7ed;

}

.testimonial-author strong{

    font-size:1.1rem;

}

.testimonial-author span{

    color:#777;

}

.btn-submit:hover{

    color:#fff;

    transform:translateY(-3px);

    box-shadow:
        0 18px 35px rgba(44,106,44,.35);

}
.info-card{

    background:#fff;

    border-radius:20px;

 padding:45px 35px;

    text-align:center;

    box-shadow:0 15px 40px rgba(0,0,0,.08);

    transition:.3s;

    height:100%;

    border-top:5px solid #2c6a2c;

}

.info-card:hover{

    transform:translateY(-8px);

    box-shadow:0 25px 55px rgba(0,0,0,.15);

}

.info-icon{

    width:80px;
    height:80px;

    border-radius:50%;

    background:#edf7ed;

    color:#2c6a2c;

    display:flex;

    align-items:center;

    justify-content:center;

    margin:0 auto 20px;

    font-size:34px;

}

.info-card h4{

    font-weight:700;

    margin-bottom:15px;

}

.info-card p{

    color:#6b7280;

    margin-bottom:20px;

    min-height:70px;

}

.info-card a{

    color:#2c6a2c;

    font-weight:700;

    text-decoration:none;

}

.info-card a:hover{

    text-decoration:underline;

}
.help-box{
    margin-top:15px;
}
/* ==========================================
   STORE HERO
========================================== */

.store-hero{

    padding:100px 0;

    background:linear-gradient(180deg,#f7fcf7 0%,#ffffff 100%);

}

.hero-product{

    max-height:500px;

    filter:drop-shadow(0 30px 40px rgba(0,0,0,.20));

}

.store-hero h1{

    font-size:3.4rem;

    font-weight:800;

    color:#214d22;

}

.store-hero .lead{

    font-size:1.3rem;

    color:#555;

    max-width:520px;

}
/* ==============================
   STORE PRODUCTS
============================== */

.product-image{

    width:260px;

    height:260px;

    margin:0 auto;

    display:flex;

    align-items:center;

    justify-content:center;

}

.product-image img{

    max-height:240px;

    transition:.35s;

}

.store-card:hover .product-image img{

    transform:scale(1.05);

}

.product-size{

    color:#666;

    font-size:1.1rem;

    margin-bottom:20px;

}

.price{

    font-size:2.4rem;

    font-weight:700;

    color:#2d6a2d;

    margin-bottom:25px;

}

.product-features{

    list-style:none;

    padding:0;

    margin:0 0 30px;

}

.product-features li{

    margin-bottom:12px;

    font-size:1.05rem;

}

.product-features i{

    color:#2d6a2d;

    margin-right:10px;

}

.purchase-note{

    text-align:center;

    margin-top:15px;

    color:#777;

    font-size:.9rem;

}
/*=========================================
 WHY GREEN GALLOP
=========================================*/

.why-section{

    background:#f8fbf8;

}

.why-card{

    background:#fff;

    border-radius:22px;

    padding:35px;

    text-align:center;

    height:100%;

    box-shadow:0 12px 30px rgba(0,0,0,.06);

    transition:.3s;

}

.why-card:hover{

    transform:translateY(-8px);

    box-shadow:0 22px 45px rgba(0,0,0,.12);

}

.why-icon{

    width:90px;

    height:90px;

    margin:0 auto 25px;

    background:#2d6a2d;

    color:#fff;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:38px;

}

.why-card h4{

    margin-bottom:18px;

    color:#214d22;

}

.why-card p{

    color:#666;

    line-height:1.7;

}
/*==================================
 PRODUCT COMPARISON
==================================*/

.comparison-section{

    background:#ffffff;

}

.comparison-table{

    border-radius:20px;

    overflow:hidden;

    box-shadow:0 20px 50px rgba(0,0,0,.08);

}

.comparison-table thead{

    background:#214d22;

    color:#fff;

}

.comparison-table th{

    padding:22px;

    font-size:1.1rem;

}

.comparison-table td{

    padding:20px;

    font-size:1.05rem;

}

.comparison-table tbody tr:nth-child(even){

    background:#f8fbf8;

}

.featured-column{

    background:#eef9ef;

    font-weight:600;

}

.comparison-table i{

    font-size:1.35rem;

}