* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: "lato", sans serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 1.7;
    color: #777;
    padding: 30px;
}

.header {
    height: 95vh;
    background-image: linear-gradient(to right bottom,
    rgb(57, 207, 255, 0.8),
    rgb(51, 114, 255, 0.8)),
    url(/imges/backgroud1.png);
    background-size: cover;
    background-position: top;

    clip-path: polygon(0 0, 100% 0, 100% 75%, 0 100%);
}

/* Form container */
.order-form-container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 95vh;
    background-image: linear-gradient(to right bottom,
    rgb(57, 207, 255, 0.8),
    rgb(51, 114, 255, 0.8)),
    url(/imges/backgroud1.png);
    background-size: cover;
    background-position: top;
}

/* Form styling */
.order-form {
    background: #fff;
    padding: 2rem;
    border-radius: 8px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
    max-width: 400px;
    width: 100%;
    font-family: 'Lato', sans-serif;
    text-align: center;
}

/* Form title */
.form-title {
    font-size: 1.5rem;
    font-weight: 900;
    margin-bottom: 1.5rem;
    color: #333;
}

/* Label Styling */
.form-group label {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: 700;
    color: #555;
    text-align: left;
}

/* Input, select styling */
.form-group input,
.form-group select {
    width: 100%;
    padding: 0.75rem;
    margin-bottom: 1rem;
    border: 1px solid #ccc;
    border-radius: 5px;
    background: #f9f9f9;
    font-size: 1rem;
    font-family: inherit;
}

.form-group input:focus,
.form-group select:focus {
    outline: none;
    border-color: #1ac0c6;
    background: #eaf7f8;
}

/* Form submit button */
.form-submit {
    padding: 0.75rem 1.5rem;
    font-size: 1.1rem;
    font-weight: 700;
    color: #fff;
    background-color: #1ac0c6;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s;
}

/*.form-reset {*/
/*    padding: 0.75rem 1.5rem;*/
/*    font-size: 1.1rem;*/
/*    font-weight: 700;*/
/*    color: #fff;*/
/*    background-color: #f31414;*/
/*    border: none;*/
/*    border-radius: 5px;*/
/*    cursor: pointer;*/
/*    transition: background-color 0.3s;*/
/*}*/

.form-submit:hover {
    background-color: #148d92;
}

.message {
    width: 100%;
    padding: 0.75rem;
    margin-bottom: 1rem;
    border: 1px solid #ccc;
    border-radius: 5px;
    background: #f9f9f9;
    font-size: 1rem;
    font-family: inherit;
}

.form-more {
    padding: 0.75rem 1.5rem;
    font-size: 1.1rem;
    font-weight: 700;
    color: #fff;
    background-color: #1ac0c6;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s;
}

.text-p {
    display: none;
    margin-top: 10px;
}

.address {
    margin-top: 10px;;
    margin-bottom: 10px;
    padding: 0.75rem 1.5rem;
    font-size: 1.1rem;
    font-weight: 700;
    color: #fff;
    background-color: #1ac0c6;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s;
}


.pickup-delivery {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100%;
    margin-top: 1rem;
    margin-bottom: 1rem;
}

.pickup-delivery .checkbox {
    margin-top: 1rem;
}

/*I am playing around*/
/*.sleeping-guy {*/
/*    position: relative;*/
/*    margin: 2rem auto;*/
/*    width: 100px;*/
/*    height: 150px;*/
/*}*/

/*!* Head of the guy *!*/
/*.head {*/
/*    width: 50px;*/
/*    height: 50px;*/
/*    background-color: #f9c773;*/
/*    border-radius: 50%;*/
/*    position: absolute;*/
/*    top: 0;*/
/*    left: 25%;*/
/*}*/

/*!* Body of the guy *!*/
/*.body {*/
/*    width: 60px;*/
/*    height: 80px;*/
/*    background-color: #6a8caf;*/
/*    border-radius: 10px;*/
/*    position: absolute;*/
/*    top: 50px;*/
/*    left: 20%;*/
/*}*/

/*!* Legs *!*/
/*.leg {*/
/*    width: 20px;*/
/*    height: 50px;*/
/*    background-color: #6a8caf;*/
/*    position: absolute;*/
/*    bottom: 0;*/
/*    border-radius: 10px;*/
/*}*/

/*.left-leg {*/
/*    left: 15%;*/
/*    transform: rotate(20deg);*/
/*}*/

/*.right-leg {*/
/*    right: 15%;*/
/*    transform: rotate(-20deg);*/
/*}*/

/*!* Arms *!*/
/*.arm {*/
/*    width: 15px;*/
/*    height: 60px;*/
/*    background-color: #6a8caf;*/
/*    position: absolute;*/
/*    bottom: 70px;*/
/*    border-radius: 10px;*/
/*}*/

/*.left-arm {*/
/*    left: -15px;*/
/*    transform: rotate(50deg);*/
/*}*/

/*.right-arm {*/
/*    right: -15px;*/
/*    transform: rotate(-50deg);*/
/*}*/

/*!* ZZZ effects *!*/
/*.zzz {*/
/*    font-size: 16px;*/
/*    color: #555;*/
/*    position: absolute;*/
/*    font-weight: bold;*/
/*    animation: floatZ 2s infinite;*/
/*}*/

/*.z1 {*/
/*    top: -20px;*/
/*    left: -15px;*/
/*    animation-delay: 0s;*/
/*}*/

/*.z2 {*/
/*    top: -40px;*/
/*    left: 0;*/
/*    animation-delay: 0.2s;*/
/*}*/

/*.z3 {*/
/*    top: -60px;*/
/*    left: 15px;*/
/*    animation-delay: 0.4s;*/
/*}*/

/*@keyframes floatZ {*/
/*    0% {*/
/*        transform: translateY(0);*/
/*        opacity: 1;*/
/*    }*/
/*    50% {*/
/*        transform: translateY(-10px);*/
/*        opacity: 0.7;*/
/*    }*/
/*    100% {*/
/*        transform: translateY(-20px);*/
/*        opacity: 0;*/
/*    }*/
/*}*/