@import url('https://fonts.googleapis.com/css2?family=Anton&family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&display=swap');

:root{
    --im-green:#1c5a34;
    --im-black:#151515;
    --im-cream:#ffffff;
    --im-border:#e8e8e8;
}

.im-magazine{
    width:100%;
    max-width:650px;
    font-family:'Plus Jakarta Sans',sans-serif;
    color:var(--im-black);
}



.im-fields{
    display:flex;
    gap:18px;
    margin-bottom:42px;
}

.im-card{
    flex:1;
    border-radius:22px;
    padding:24px;
    position:relative;
}

.im-fields .im-card:first-child{
    border:2px solid var(--im-green);
    background:rgba(28,90,52,.06);
}

.im-fields .im-card:last-child{
    border:2px solid rgba(0,0,0,.08);
    background: transparent !important;
}

.im-card-label{
    text-align:center;
    font-size:11px;
    text-transform:uppercase;
    letter-spacing:.14em;
    font-weight:700;
    color:rgba(0,0,0,.45);
    margin-bottom:14px;
}

.im-qty{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:14px;
}

.im-qty button{
    width:34px;
    height:34px;
    border:none;
    border-radius:50%;
    background:rgba(0,0,0,.08);
    cursor:pointer;
    font-size:20px;
    font-weight:700;
    transition:.25s;
}

.im-qty button:hover{
    background:rgba(0,0,0,.15);
    transform:translateY(-2px);
}

#im-quantity{
    min-width:46px;
    text-align:center;
    font-family:'Anton',sans-serif;
    font-size:34px;
    color:var(--im-black);
}

.im-delivery{
    margin-top:10px;
    text-align:center;
    font-size:12px;
    color:rgba(0,0,0,.45);
}

#im-sales-rep{
    width:100%;
    border:none;
    border-bottom:1px solid rgba(0,0,0,.15);
    background:transparent;
    text-align:center;
    font-size:15px;
    font-weight:700;
    padding:10px 0;
    outline:none;
    transition:.3s;
    color: #151515;
}

#im-sales-rep:focus{
    border-color:var(--im-green);
}

#im-sales-rep::placeholder{
    color:rgba(0,0,0,.25);
}

.im-features{
    display:flex;
    flex-direction:column;
    /*gap:18px;*/
    margin-bottom:30px;
}
#im-plus, #im-minus {
    color :black  !important;
     display:flex !important;
    justify-content: center !important;
    align-items:center !important;
}
#im-plus:hover,
#im-minus:hover{
    background:#dcd9d1;
}

#im-plus:focus,
#im-minus:focus,
#im-plus:active,
#im-minus:active,
#im-plus:focus-visible,
#im-minus:focus-visible{
    outline:none !important;
    box-shadow:none !important;
    background:#dcd9d1 !important;
    color:#000 !important;
    -webkit-tap-highlight-color: transparent;
}
.im-feature{
    display:flex;
    align-items:flex-start;
    gap:14px;
    font-size:15px;
    line-height:1.7;
    color:rgba(21,21,21,.66);
}

.im-feature span{
    color:var(--im-green);
    font-weight:800;
    font-size:18px;
    margin-top:2px;
}

.im-feature strong{
    color:var(--im-black);
}

.im-buttons{
    display:flex;
    gap:16px;
    flex-wrap:wrap;
}

.im-order-btn{
    background:var(--im-black) !important;
    color:#fff !important;
    border:none !important;
    border-radius:999px !important;
    padding:18px 34px !important;
    font-size:14px !important;
    font-weight:700 !important;
    letter-spacing:.08em !important;
    text-transform:uppercase !important;
    cursor:pointer !important;
    transition:all .35s ease !important;
    box-shadow:none !important;
}
@media only screen and (max-width: 767px) {
  button#im-order-btn, button.im-secondary-btn {
    font-size: 10px !important;
    
  }
}


.im-order-btn:hover{
     background:var(--im-black);
    color:#fff;
    border:none;
    border-radius:999px;
    transform:translateY(-4px);
    box-shadow:0 12px 30px rgba(0,0,0,.28);
}

.im-order-btn:disabled{
    opacity:.6;
    cursor:not-allowed;
    transform:none;
    box-shadow:none;
}

.im-secondary-btn{
    background:#fff !important;
    color:var(--im-black) !important;
    border:2px solid rgba(0,0,0,.12) !important;
    border-radius:999px !important;
    padding:18px 30px !important;
    font-size:14px !important;
    font-weight:700 !important;
    letter-spacing:.08em !important;
    text-transform:uppercase !important;
    cursor:pointer !important;
    transition:.3s !important;
}

.im-secondary-btn:hover{
    background:#fff;
    color:black;
    border-color:black;
    transform:translateY(-2px);
}

.im-magazine *,
.im-magazine *::before,
.im-magazine *::after{
    box-sizing:border-box;
}

.im-magazine button{
    font-family:'Plus Jakarta Sans',sans-serif;
}

.im-magazine input{
    font-family:'Plus Jakarta Sans',sans-serif;
}

.im-order-btn,
.im-secondary-btn,
.im-qty button,
#im-sales-rep{
    -webkit-tap-highlight-color:transparent;
}

.im-card,
.im-order-btn,
.im-secondary-btn{
    transition:
        transform .35s ease,
        box-shadow .35s ease,
        border-color .35s ease,
        background .35s ease;
}

.im-card:hover{
    transform:translateY(-3px);
}

.im-fields .im-card:first-child:hover{
    box-shadow:0 18px 40px rgba(28,90,52,.12);
}

.im-fields .im-card:last-child:hover{
    box-shadow:0 18px 40px rgba(0,0,0,.08);
}

.im-feature{
    transition:.25s;
}

.im-feature:hover{
    transform:translateX(5px);
}

.im-feature:hover span{
    transform:scale(1.15);
}

.im-feature span{
    transition:.25s;
}

@media(max-width:991px){

    .im-title{
        font-size:58px;
    }

    .im-fields{
        flex-direction:column;
    }

    .im-buttons{
        flex-direction:column;
    }

    .im-order-btn,
    .im-secondary-btn{
        width:100%;
        justify-content:center;
    }

}

@media(max-width:767px){

    .im-magazine{
        max-width:100%;
    }

    .im-badge{
        margin-bottom:18px;
    }

    .im-title{
        font-size:44px;
        margin-bottom:20px;
    }

    .im-description{
        font-size:15px;
        line-height:1.8;
    }

    .im-highlight{
        margin-bottom:30px;
    }

    .im-fields{
        gap:15px;
        margin-bottom:30px;
    }

    .im-card{
        padding:20px;
        border-radius:18px;
    }

    .im-card-label{
        font-size:10px;
    }

    #im-quantity{
        font-size:28px;
    }

    .im-features{
        gap:15px;
        margin-bottom:30px;
    }

    .im-feature{
        font-size:14px;
        gap:12px;
    }

    .im-order-btn,
    .im-secondary-btn{
        padding:16px 24px;
        font-size:13px;
    }

}

@media(max-width:480px){

    .im-title{
        font-size:36px;
    }

    .im-description{
        font-size:14px;
    }

    .im-qty button{
        width:30px;
        height:30px;
        font-size:18px;
    }

    #im-quantity{
        min-width:40px;
        font-size:24px;
    }

}