/* HERO */
.hero{
    padding:70px 0 40px;
}

.hero-box{

    background:linear-gradient(
        135deg,
        #0ea5a4,
        #14b8a6
    );

    border-radius:32px;

    padding:50px;

    color:white;

    box-shadow:var(--shadow);
}

.hero h1{

    font-size:clamp(34px,5vw,58px);

    line-height:1.1;

    margin-bottom:18px;
}

.hero p{

    font-size:18px;

    max-width:760px;

    opacity:0.95;

    color:white;
}
        .vacation-section{
            padding:70px 0;
        }

        .vacation-card{
            background:#ffffff;
            border-radius:20px;
            padding:30px;
            box-shadow:0 4px 20px rgba(0,0,0,0.08);
            margin-bottom:30px;
        }

        .vacation-card h2{
            margin-bottom:20px;
            font-size:28px;
        }

        .info-text{
            font-size:18px;
            line-height:1.6;
        }

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

        .month-item{
            display:flex;
            flex-direction:column;
        }

        .month-item label{
            margin-bottom:8px;
            font-weight:600;
        }

        .month-item input{
            padding:14px;
            border:1px solid #dcdcdc;
            border-radius:12px;
            font-size:16px;
        }

        .settings-row{
            display:flex;
            flex-wrap:wrap;
            gap:20px;
            align-items:flex-end;
        }

        .settings-item{
            flex:1;
            min-width:220px;
        }

        .settings-item label{
            display:block;
            margin-bottom:8px;
            font-weight:600;
        }

        .settings-item input{
            width:100%;
            padding:14px;
            border:1px solid #dcdcdc;
            border-radius:12px;
            font-size:16px;
        }

        .checkbox-row{
            display:flex;
            align-items:center;
            gap:10px;
            margin-top:20px;
        }

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

        .result-box{
            background:#f5f7fb;
            border-radius:16px;
            padding:20px;
            text-align:center;
        }

        .result-box h3{
            font-size:18px;
            margin-bottom:10px;
        }

        .result-value{
            font-size:28px;
            font-weight:700;
        }

        .main-result{
            background:#dfffe0;
            border:2px solid #4caf50;
        }

        .main-result .result-value{
            color:#1b5e20;
        }

        .days-info{
            margin-top:20px;
            padding:16px;
            border-radius:12px;
            background:#fff8e1;
            font-size:16px;
            line-height:1.6;
        }

        input[type="number"]::-webkit-outer-spin-button,
        input[type="number"]::-webkit-inner-spin-button{
            -webkit-appearance:none;
            margin:0;
        }

        .notes-card{
    background:#fff8e1;
    border-left:6px solid #ffb300;
    border-radius:20px;
    padding:25px 30px;
    box-shadow:0 4px 20px rgba(0,0,0,0.06);
    margin-top:30px;
    margin-bottom: 30px;
}

.notes-card h3{
    margin-bottom:18px;
    font-size:24px;
    color:#e65100;
}

.notes-card ul{
    margin:0;
    padding-left:22px;
}

.notes-card li{
    margin-bottom:12px;
    font-size:17px;
    line-height:1.6;
    color:#333;
}

.notes-card li:last-child{
    margin-bottom:0;
}

        @media(max-width:768px){

            .months-grid{
        grid-template-columns:repeat(2,1fr);
    }

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

            .vacation-card{
                padding:20px;
            }

            .vacation-card h2{
                font-size:24px;
            }

            .result-value{
                font-size:24px;
            }
            .notes-card{
        padding:20px;
    }

    .notes-card h3{
        font-size:22px;
    }

    .notes-card li{
        font-size:16px;
    }
        }