/* ===========================
   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);
}