/* =====================================================
   AGRIKSTARTEX REGISTRATION PAGE
   IMAGE + FORM GRID DESIGN
===================================================== */


.regform{

    min-height:90vh;

    padding:70px 5%;

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:50px;

    align-items:center;

    background:#f5f7f6;

}


/* IMAGE */

.reg-image{
    margin-top:10px;
    height:250px;

    border-radius:25px;

    overflow:hidden;

    position:relative;

    box-shadow:0 20px 50px rgba(0,0,0,.12);

}


.reg-image img{

    width:100%;

    height:100%;

    object-fit:cover;

    display:block;

}



/* optional dark overlay */

.reg-image::after{

    content:"";

    position:absolute;

    inset:0;

    background:linear-gradient(
        rgba(0,100,0,.15),
        rgba(0,0,0,.35)
    );

}



/* FORM CARD */

.form-container{

    width:100%;

    background:#fff;

    padding:45px;

    border-radius:25px;

    box-shadow:
    0 20px 50px rgba(0,0,0,.10);

    border-top:6px solid #006400;

}


/* FORM */

.form-container form{

    display:grid;

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

    gap:20px;

}


.form-group{

    display:flex;

    flex-direction:column;

}


.form-group label{

    font-weight:700;

    color:#17411f;

    margin-bottom:7px;

}


.form-group input,
.form-group select{

    padding:14px 16px;

    border-radius:10px;

    border:1px solid #ddd;

    font-size:15px;

}


.form-group input:focus,
.form-group select:focus{

    outline:none;

    border-color:#006400;

    box-shadow:0 0 0 4px rgba(0,100,0,.12);

}


/* BUTTON */

.btn{

    grid-column:1/-1;

    padding:16px;

    border:none;

    border-radius:50px;

    background:#006400;

    color:white;

    font-size:17px;

    font-weight:700;

    cursor:pointer;

}



/* TABLET */

@media(max-width:900px){

    .regform{

        grid-template-columns:1fr;

        padding:40px 20px;

    }


    .reg-image{

        height:400px;

    }

}



/* MOBILE */

@media(max-width:600px){

    .form-container{

        padding:25px 18px;

    }


    .form-container form{

        grid-template-columns:1fr;

    }


    .reg-image{

        height:280px;

    }


    .btn{

        grid-column:auto;

    }

}