/*======================================
REVENUE CALCULATOR
======================================*/

.revenue-calculator{

    padding:160px 0;

}

.calculator{

    display:grid;

    grid-template-columns:1fr 420px;

    gap:50px;

    margin-top:70px;

    align-items:start;

}

.calculator-form{

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

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

    border-radius:24px;

    padding:40px;

}

.calculator-form label{

    display:block;

    font-size:15px;

    font-weight:600;

    margin-bottom:12px;

    color:#EAF5EF;

}

.calculator-form input{

    width:100%;

    padding:16px 20px;

    margin-bottom:28px;

    border-radius:14px;

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

    background:#10231C;

    color:#fff;

    font-size:18px;

    transition:.25s;

}

.calculator-form input:focus{

    outline:none;

    border-color:#58F0A6;

    box-shadow:0 0 0 4px rgba(88,240,166,.15);

}

.calculator-result{

    position:sticky;

    top:120px;

    background:linear-gradient(
        135deg,
        rgba(31,169,113,.18),
        rgba(7,26,18,.95)
    );

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

    border-radius:28px;

    padding:45px;

}

.calculator-result h3{

    font-size:28px;

    margin-bottom:25px;

}

.profit{

    font-size:64px;

    font-weight:800;

    color:#58F0A6;

    line-height:1;

    margin-bottom:30px;

    font-family:Manrope,sans-serif;

}

.calculator-result p{

    color:#BFCFC7;

    line-height:1.8;

}

/*--------------------------------------
Breakdown
--------------------------------------*/

.breakdown{

    margin:35px 0;

}

.breakdown-row{

    display:flex;

    justify-content:space-between;

    margin-bottom:14px;

    color:#D7E6DD;

}

.breakdown-row.total{

    margin-top:25px;

    padding-top:25px;

    border-top:1px solid rgba(255,255,255,.08);

    font-size:22px;

    font-weight:700;

}

/*--------------------------------------
Mobile
--------------------------------------*/

@media (max-width:991px){

    .calculator{

        grid-template-columns:1fr;

    }

    .calculator-result{

        position:relative;

        top:auto;

    }

}

@media (max-width:768px){

    .revenue-calculator{

        padding:100px 0;

    }

    .calculator{

        gap:30px;

        margin-top:50px;

    }

    .calculator-form{

        padding:28px;

    }

    .calculator-result{

        padding:30px;

    }

    .calculator-form input{

        font-size:16px;

        padding:14px 18px;

    }

    .profit{

        font-size:48px;

    }

    .calculator-result h3{

        font-size:24px;

    }

}