/* =========================
   RESET
========================= */

button,
input {
font-family: inherit;
}

/* =========================
   COMMON
========================= */

.container {
margin: 0 auto;
}

.container * {
box-sizing: border-box;
}

.container img {
max-width: 100%;
display: block;
}

.btn {
height: 40px;
    border: none;
    cursor: pointer;
    border-radius: 4px;
    padding: 0 15px;
    font-size: 15px;
    font-weight: 600;
    text-transform: uppercase;
}

.btn-orange {
background: #daa550;
color: white;
}

.btn-orange:hover {
background: #db6611;
}

/* =========================
   HERO
========================= */

.hero {
min-height: 520px;
background:linear-gradient(90deg, rgba(255,255,255,.95), rgba(255,255,255,.25)), url("hero-bg.webp");
background-size: cover;
background-position:center;
}

.hero-inner {
display:grid;
grid-template-columns: 1fr 650px;
align-items:center;
gap:40px;
padding-top:70px;
padding-bottom:70px;
}

.hero-content {
    padding: 0 15px;
}

.hero-content h1 {
font-size:56px;
line-height:1.1;
margin:0 0 25px;
font-weight:800;
}

.hero-content h1 span {
color:#daa550;
}

.hero-description {
font-size:20px;
line-height:1.5;
max-width:700px;
}

.hero-image img {
width:100%;
}

.advantages {
margin-top:40px;
display:grid;
grid-template-columns:repeat(2,1fr);
gap:20px;
}

.advantage {
background:white;
border-radius:18px;
padding:18px;
display:flex;
gap:15px;
align-items:center;
box-shadow:0 10px 30px rgba(0,0,0,.06);
}

.icon {
width:45px;
height:45px;
border-radius:50%;
background:#daa550;
color:white;
display:flex;
justify-content:center;
align-items:center;
font-size:22px;
}

.advantage strong {
display:block;
}

.advantage span {
color:#777;
font-size:14px;
}

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

.calculator {
padding:70px 0;
}

.calculator-grid {
display:grid;
grid-template-columns:minmax(500px,750px) minmax(400px,1fr);
gap:35px;
}

.card {
background:white;
border-radius:24px;
padding:30px;
margin-bottom:25px;
box-shadow:0 15px 40px rgba(0,0,0,.05);
}

.card h3 {
margin-top:0;
font-size:22px;
}

/* CHOICE */

.transport-select {
display: grid;
grid-template-columns: repeat(3, 1fr);
    gap: 15px;
}

.choice-grid {
display:grid;
grid-template-columns:repeat(3,1fr);
gap:15px;
}

.choice,
.transport,
.model {
display: inline-block;
    vertical-align: top;
background:#f7f7f7;
border:1px solid #ddd;
border-radius:15px;
    padding: 0 15px;
    height: 70px;
cursor:pointer;
transition:.2s;
}

.choice:hover,
.transport:hover,
.model:hover {
border-color:#daa550;
}

.choice.active,
.transport.active,
.model.active {
border:2px solid #daa550;
background:#fff7ef;
}

/* PARAMETERS */

.fields {
    display: grid;
    position: relative;
    gap: 15px;
    grid-template-columns: 1fr 1fr;
}

.field {
    display: flex;
    padding: 10px;
    flex-wrap: wrap;
    align-content: space-between;
    justify-content: space-between;
    align-items: center;
    border: 1px solid #ccc;
    border-radius: 4px;
	-webkit-border-radius: 4px;
}

.field label {
    font-size: 14px;
font-weight:600;
}

.field input[type="number"] {
    float: right;
width: 75px;
    padding: 5px 0 5px 10px;
    font-size: 20px;
    font-weight: 700;
    border-radius: 10px;
-webkit-border-radius: 10px;
    border: 1px solid #ccc;
}

.field input[type="range"] {
width: 100%;
    margin: 15px 0 0;
}

.field .value {
float: right;
font-size:20px;
font-weight:700;
}

/* MODELS */

.model-list {
display:grid;
grid-template-columns:repeat(4,1fr);
gap:15px;
}

.model {
padding:12px;
text-align:center;
}

.model img {
height:90px;
object-fit:contain;
margin:auto;
}

.model strong {
display:block;
margin-top:10px;
}

.model span {
color:#777;
font-size:13px;
}

/* =========================
   RESULT
========================= */

.calc-result {
position:sticky;
top:20px;
}

.result-header {
background:#1d1d1d;
border-radius:25px;
padding:35px;
color:white;
margin-bottom:25px;
}

.result-header p {
    margin: 0 0 10px;
color:#ddd;
}

.saving {
font-size:52px;
font-weight:600;
}

.saving span {
display: inline-block;
    line-height: 50px;
}

.saving span:last-child {
font-size:18px;
font-weight:400;
    line-height: 20px;
}

/* TABLE */

.comparison table {
width:100%;
border-collapse:collapse;
}

.comparison td,
.comparison th {
padding:15px;
border-bottom:1px solid #eee;
text-align:left;
}

.total {
font-weight:800;
}

.result-boxes {
background:white;
border-radius:20px;
box-shadow: 0 15px 40px rgba(0, 0, 0, .05);
}

.small-result {
padding:25px;
    text-align: center;
}

.small-result span {
display: block;
color:#777;
}

.small-result strong {
    display: block;
    font-size: 48px;
    line-height: 48px;
    margin-top: 5px;
    font-family: inherit;
    font-weight: 600;
}

.lead-box {
margin-top:25px;
background:#daa550;
color:white;
    font-size: 0;
padding:30px;
border-radius:25px;
}

.lead-box h3 {
margin: 0;
}

.lead-box p {
    margin: 15px 0px;
font-size: 15px;
}

.lead-box-left {
    display: inline-block;
    vertical-align: top;
    width: 50%;
}

.lead-box-right {
    display: inline-block;
    vertical-align: top;
    width: 50%;
padding: 0 15px;
}

.lead-box .input {
    position: relative;
margin: 15px 0 0;
}

.lead-box .input.calcName {
margin: 0;
}

.lead-box .input input[type="text"],
.lead-box .input input[type="tel"] {
display: block;
width: 100%;
    height: 40px;
    margin: 0;
    padding: 0 10px;
    border: 0;
    outline: 0;
    font-family: inherit;
    font-size: 14px;
border-radius: 4px;
}

.lead-box .input input[type="checkbox"] {
display: none;
}

.lead-box .input input[type="checkbox"] + label {
    cursor: pointer;
}

.lead-box .input input[type="checkbox"] + label:before {
content: "";
    display: inline-block;
    vertical-align: middle;
    width: 14px;
    height: 14px;
    margin: 0 5px 0 0;
    background: #fff;
    border-radius: 2px;
    -webkit-border-radius: 2px;
    -webkit-transition: all 0.1s linear;
    transition: all 0.1s linear;
}

.lead-box input[type="checkbox"]:checked + label:before {
    background: #fff url(check.svg) no-repeat center center;
    background-size: 10px;
    box-shadow: none;
    -webkit-box-shadow: none;
}

.lead-box label span {
    display: inline-block;
    vertical-align: middle;
    width: calc(100% - 25px);
    font-size: 12px;
    font-weight: 400;
    letter-spacing: -0.5px;
    line-height: 14px;
}

.lastname {
display: none !important;
}

.lead-box .politic {
    margin: 0;
    font-size: 12px;
    line-height: 40px;
}

.lead-box .politic a {
color: #fff;
}

.lead-box .btn {
    display: block;
    background: white;
    color: #daa550;
    margin: 15px auto 0;
}

.lead-box .input.error:before {
    content: "!";
    position: absolute;
    bottom: 0px;
    left: -10px;
    display: block;
    font-size: 21px;
    font-weight: 600;
    line-height: 40px;
    color: #fff;
}

.lead-box .success {
    color: #fff;
    font-size: 20px;
    text-align: center;
}



@media(max-width:1200px){

.hero-inner {
grid-template-columns:1fr;
}

.hero-image {
max-width:700px;
}

.calculator-grid {
grid-template-columns:1fr;
}

.calc-result {
position:static;
}

}

@media(max-width:768px){

.container {
padding-left:20px;
padding-right:20px;
}

.menu {
display:none;
}

.header-inner {
height:auto;
padding:20px 0;
flex-wrap:wrap;
}

.hero-content h1 {
font-size:36px;
}

.hero-description {
font-size:17px;
}

.advantages,
.choice-grid,
.model-list,
.result-boxes,
.footer .container {
grid-template-columns:1fr;
}

.card {
padding:20px;
}

.transport-select {
grid-template-columns: 1fr;
}

.fields {
grid-template-columns:1fr;
}

.comparison td, .comparison th {
font-size: 14px;
        padding: 10px 5px;
}

.lead-box-left {
width: 100%;
}

.lead-box-right {
width: 100%;
padding: 0;
}

.lead-box .politic {
margin: 10px 0 0;
}

.saving {
font-size:38px;
}

}

@media(max-width:480px){

.hero {
min-height:auto;
}

.hero-inner {
padding-top:40px;
padding-bottom:40px;
}

}