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



*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    font-family:'Poppins',sans-serif;
}

body{
    background:#f8fafc;
    color:#1f2937;
}



.planner-title{

    text-align:center;
    padding:60px 20px 30px;

}

.planner-title h1{

    font-size:42px;
    color:#2E8B57;
    margin-bottom:10px;

}

.planner-title p{

    color:#6b7280;
    font-size:18px;

}



.planner{

    width:100%;
    display:flex;
    justify-content:center;
    padding:40px 20px 80px;

}


.planner-form{

    width:100%;
    max-width:950px;

    background:white;

    padding:40px;

    border-radius:20px;

    box-shadow:0 10px 35px rgba(0,0,0,0.08);

    display:grid;

    grid-template-columns:repeat(2,1fr);

    gap:25px;

}



.input-box{

    display:flex;
    flex-direction:column;

}

.input-box label{

    font-size:15px;
    font-weight:600;
    margin-bottom:8px;

}

.input-box input,
.input-box select,
.input-box textarea{

    padding:15px;

    border:2px solid #e5e7eb;

    border-radius:12px;

    outline:none;

    font-size:16px;

    transition:0.3s;

}

.input-box input:focus,
.input-box select:focus,
.input-box textarea:focus{

    border-color:#2E8B57;

    box-shadow:0 0 8px rgba(46,139,87,.2);

}

.input-box textarea{

    resize:none;

}

/* Full width textarea */

.full{

    grid-column:1/3;

}



.btn-primary{

    grid-column:1/3;

    padding:18px;

    border:none;

    background:#2E8B57;

    color:white;

    font-size:18px;

    font-weight:600;

    border-radius:12px;

    cursor:pointer;

    transition:0.3s;

}

.btn-primary:hover{

    background:#236b45;

    transform:translateY(-3px);

    box-shadow:0 8px 18px rgba(46,139,87,.3);

}



@media(max-width:768px){

    .planner-form{

        grid-template-columns:1fr;

        padding:25px;

    }

    .full{

        grid-column:1;

    }

    .btn-primary{

        grid-column:1;

    }

    .planner-title h1{

        font-size:32px;

    }

    .planner-title p{

        font-size:16px;

    }

}