/* ================================================= */
/* GEAR PAGE */
/* ================================================= */

.gear-page {
    background: #FFF9ED;
    background-size: cover;
    min-height: 100vh;
    position: relative;
    overflow-x: hidden !important;
}

@media (min-width: 1025px) {
    .gear-page .hero-title {
        font-size: 3.2rem;
        padding-top: 145px;
        color: #0d2b7a;
    }
}

@media (max-width: 1024px) {
    .gear-page {
        padding-top: 100px;
    }

    .gear-page .hero-title {
        font-size: 3.2rem;
        font-weight: 700;
        color: #0d2b7a;
        line-height: 1.2;
        padding-top: 90px;
    }
}

@media (max-width: 767px) {
    .gear-page .hero-title {
        font-size: 2.4rem;
        padding-top: 50px;
    }
}


/* ================================================= */
/* SECTION TITLES */
/* ================================================= */

.gear-section-title {
    font-weight: 700;
    color: #0d2b7a;
    margin-bottom: 30px;
    font-size: 1.8rem;
}


/* ================================================= */
/* OUTLINE BUTTON */
/* ================================================= */

.btn-outline-gear {
    border: none;
    color: #fff;
    border-radius: 999px;
    padding: 12px 32px;
    font-weight: 700;
    font-size: 0.95rem;
    background: linear-gradient(135deg, #f29b38, #e07f1f);
    box-shadow: 0 6px 18px rgba(242, 155, 56, 0.4);
    transition: box-shadow 0.2s ease;
}

.btn-outline-gear:hover {
    background: linear-gradient(135deg, #e07f1f, #cc6d10);
    color: #fff;
    box-shadow: 0 8px 24px rgba(242, 155, 56, 0.55);
    text-decoration: none;
}


/* ================================================= */
/* HOW IT WORKS STEPS */
/* ================================================= */

.gear-how-section {
    margin-top: 20px;
    padding: 50px 30px;
    background: #ffffff;
    border-radius: 24px;
    box-shadow: 0 6px 20px rgba(0,0,0,0.05);
}

.gear-step-card {
    background: #f8f9fa;
    border-radius: 18px;
    padding: 30px 22px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.05);
    border-top: 4px solid #ffd84d;
    height: 100%;
    text-align: center;
}

.gear-step-num {
    width: 48px;
    height: 48px;
    margin: 0 auto 16px;
    background: linear-gradient(135deg, #304a8e, #1f3b7a);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-weight: 700;
    font-size: 1.3rem;
}

.gear-step-card h6 {
    font-weight: 700;
    color: #0d2b7a;
    margin-bottom: 10px;
}

.gear-step-card p {
    font-size: 0.95rem;
    color: #555;
    line-height: 1.4;
}


/* ================================================= */
/* PERKS SECTION */
/* ================================================= */

.gear-perks-section {
    padding: 50px 30px;
    margin-top: 30px;
    background: #ffffff;
    border-radius: 24px;
    box-shadow: 0 6px 20px rgba(0,0,0,0.05);
}

.gear-perk-card {
    background: #f8f9fa;
    border-radius: 18px;
    padding: 30px 22px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.05);
    border-top: 4px solid #304a8e;
    height: 100%;
    text-align: center;
}

.gear-perk-icon {
    width: 58px;
    height: 58px;
    margin: 0 auto 16px;
    background: linear-gradient(135deg, #ffd84d, #ffbf00);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.gear-perk-icon i {
    font-size: 1.4rem;
    color: #5a4500;
}

.gear-perk-card h6 {
    font-weight: 700;
    color: #0d2b7a;
    margin-bottom: 10px;
}

.gear-perk-card p {
    font-size: 0.95rem;
    color: #555;
    line-height: 1.4;
}


/* ================================================= */
/* CAUSE GEAR SECTION */
/* ================================================= */

.gear-cause-section {
    padding: 50px 30px;
    margin-top: 30px;
    background: #ffffff;
    border-radius: 24px;
    box-shadow: 0 6px 20px rgba(0,0,0,0.05);
    text-align: center;
}

.gear-cause-subtext {
    font-size: 1.05rem;
    color: #555;
    max-width: 600px;
    margin: 0 auto 30px;
    line-height: 1.6;
}

.gear-cause-badge-link {
    text-decoration: none !important;
    color: inherit !important;
    display: block;
    height: 100%;
}

.gear-cause-badge {
    background: #f8f9fa;
    border-radius: 16px;
    padding: 24px 16px;
    border: 2px solid #ccc;
    text-align: center;
    height: 100%;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.gear-cause-badge:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(0,0,0,0.1);
}

.gear-cause-badge i {
    font-size: 2rem;
    margin-bottom: 10px;
    display: block;
}

.gear-cause-badge span {
    font-weight: 700;
    font-size: 0.85rem;
    color: #0d2b7a;
    line-height: 1.3;
}


/* ================================================= */
/* SHOP CTA CARD */
/* ================================================= */

.gear-shop-section {
    padding: 50px 0 20px;
    margin-top: 30px;
}

.gear-shop-card {
    background: #fff;
    border-radius: 24px;
    box-shadow: 0 18px 45px rgba(13, 43, 122, 0.12);
    border: 2px solid #38b24d;
    padding: 50px 40px;
    max-width: 750px;
    margin: 0 auto;
    text-align: center;
}

.gear-shop-card h3 {
    font-weight: 700;
    color: #0d2b7a;
    margin-bottom: 14px;
}

.gear-shop-card p {
    font-size: 1.05rem;
    color: #555;
    max-width: 550px;
    margin: 0 auto 24px;
    line-height: 1.6;
}

.gear-shop-note {
    font-size: 0.9rem;
    color: #6b7280;
}

.btn-gear-shop {
    background: linear-gradient(135deg, #22b24c, #1a9a3e);
    color: #fff !important;
    border: none;
    border-radius: 999px;
    padding: 12px 32px;
    font-weight: 700;
    font-size: 0.95rem;
    box-shadow: 0 6px 18px rgba(34, 178, 76, 0.35);
    transition: box-shadow 0.2s ease;
}

.btn-gear-shop:hover {
    background: linear-gradient(135deg, #1a9a3e, #158832);
    color: #fff !important;
    box-shadow: 0 8px 24px rgba(34, 178, 76, 0.5);
    text-decoration: none;
}


/* ================================================= */
/* SUBSCRIBE SECTION */
/* ================================================= */

.gear-subscribe-section {
    padding: 50px 30px 60px;
    margin-top: 30px;
    margin-bottom: 60px;
    background: #ffffff;
    border-radius: 24px;
    box-shadow: 0 6px 20px rgba(0,0,0,0.05);
    text-align: center;
}

.gear-subscribe-text {
    font-size: 1.05rem;
    color: #555;
    max-width: 580px;
    margin: 0 auto 24px;
    line-height: 1.6;
}

.gear-subscribe-btn {
    border-radius: 999px !important;
    padding: 12px 32px;
    font-weight: 700;
    font-size: 0.95rem;
}