body {
    font-family: 'Montserrat', sans-serif;
    min-height: 100%;
    margin-left: 10%;
    margin-right: 10%;
    display: flow;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: rgb(239,243,248); /* Medium grey */
}


/* Left side label styling (Black) */
.form-left label {
    color: #959494;
}

/* Right side label styling (White) */
.form-right label {
    color: white;
}

.input-text {
    border: 1px solid #ccc; /* Adds a border to all sides */
    border-radius: 4px; /* Optional: Makes the corners slightly rounded */
    padding: 8px 10px; /* Adds padding inside the text box */
    width: 100%; /* Makes the input take the full width of its container */
    box-sizing: border-box; /* Ensures padding does not increase total width */
}

    .input-text:focus {
        border-color: #007BFF; /* Changes border color to blue on focus */
        outline: none; /* Removes the default outline */
    }

.form-row {
    margin-bottom: 20px;
}

.form-group {
    margin-bottom: 0px;
}

/* Style for the Date of Birth Heading with lines */
.dob-heading {
    color: #333; /* Match the color with the form text */
    padding-left: 20px; /* Add padding to the left side */
    font-size: 12px; /* Adjust font size as needed */
    font-weight: bold; /* Make it bold */
    margin: 10px 0; /* Add margin to space out from other elements */
    padding-top: 10px; /* Optional padding for spacing above the text */
    padding-bottom: 10px; /* Optional padding for spacing below the text */
}



.header-container {
    display: flex;
    flex-direction: column; /* Arrange items in a column */
    align-items: center; /* Center align both logo and text */
    justify-content: center; /* Center the items vertically */
    padding-top: 10px; /* Optional: Adjust padding */
    margin-bottom: 0px; /* Optional: Adjust margin */
    color: #fff; /* Text color */
}


/* Logo Container */
.logo-container {
    width: 150px; /* Adjust to fit content dynamically */
    height: 50px; /* Maintain the height */
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 20px; /* Add 20px padding to the left and right */
    border-radius: 8%;
}

    /* Logo Image */
    .logo-container img {
        max-width: 100%; /* Ensure the image stays within container */
        max-height: 100%; /* Ensure it respects the container's height */
        object-fit: contain;
    }

/* Logo Image */
.logo-square {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

/* School Name */
.school-name {
    color: black;
    font-family: 'Montserrat', sans-serif;
    font-size: 34px;
    font-weight: 700;
    text-align: left;
}

/* Style for labels */
label {
    font-size: 14px;
    font-weight: bold;
    margin-bottom: 5px;
    display: block;
}
/* Style the Date of Birth group */
.dob-group {
    display: flex;
    gap: 10px; /* Adds space between the day, month, and year */
}

/* Style for each dob-item (day, month, and year) */
.dob-item {
    display: flex;
    flex-direction: column; /* Stack label and select vertically */
    width: 100px; /* You can adjust the width of each select box */
    position: relative; /* Make the parent container relative */
}

/* Optional: Style the label to have a white color */
.dob-group label {
    color: black; /* Set the label color to black */
    margin-bottom: 0px; /* Adds space below the label */
}



.form-group {
    display: flex; /* Ensures the child elements are placed in a row */
    justify-content: space-between; /* Spaces out the input fields */
}

.form-row {
    width: 50%; /* Adjusts width to ensure both fields fit in one row */
}

.form-row-1, .form-row-2 {
    /* You can also adjust the width individually if needed, but the above width works in most cases */
}

.form-right {
    display: flex;
    flex-direction: column; /* Stack items vertically */
    justify-content: flex-start; /* Align items to the top */
    padding-right: 20px; /* Add padding on the right */
}

    .form-right .form-row, .form-right .form-group {
        width: 100%; /* Ensure full width for inputs */
    }

        .form-right .form-row form-row-1, .form-right .form-row form-row-2 {
            width: 100%; /* Set input rows to full width */
        }

    /* Align the 'Father's Number', 'Mother's Number' and 'Submit' button to the right */
    .form-right .form-group,
    .form-right .form-row-last {
        display: flex;
        justify-content: flex-end; /* Align children to the right */
        width: 100%; /* Ensure these elements take full width */
    }

        /* Styling for the submit button */
        .form-right .form-row-last input[type="submit"] {
            width: auto;
            padding: 10px 20px; /* Optional: Add some padding for button */
            margin-top: 20px; /* Optional: space above the button */
        }

.form-v10-content {
    background: #fff;
    width: 100%; /* Increase width to use more of the page */

    margin: 5% auto;
    border-radius: 10px;
    box-shadow: 0px 8px 20px 0px rgba(0, 0, 0, 0.15);
    position: relative;
    font-family: 'Montserrat', sans-serif;
}

    .form-v10-content .form-detail {
        width: 100%; /* Make the form detail section take the full width */
        display: flex;
        flex-wrap: wrap; /* Allow wrapping of content to better adjust on different screen sizes */
    }

        .form-v10-content .form-detail h2 {
            font-weight: 500;
            font-size: 25px; /* Font size in pixels */
            margin-bottom: 5%; /* Bottom margin set to percentage */
            padding-top: 2%; /* Add 2% margin at the top */
            padding: 3% 5% 0 6%; /* Padding in percentage */
        }

        .form-v10-content .form-detail .form-left {
            width: 48%; /* Left section width set to percentage */
            margin-top: 2%; /* Add 2% margin at the top */
        }

            .form-v10-content .form-detail .form-left h2 {
                color: #2271dd;
            }

        .form-v10-content .form-detail .form-right {
            width: 50%; /* Right section width set to percentage */
            background: rgb(0,144,217);
            border-top-right-radius: 10px;
            border-bottom-right-radius: 10px;
            padding-top: 2%; /* Add 2% margin at the top */
        }

            .form-v10-content .form-detail .form-right h2 {
                color: #fff;
            }

        .form-v10-content .form-detail .form-group {
            display: flex;
        }

        .form-v10-content .form-detail .form-row {
            position: relative;
            margin-bottom: 3%; /* Bottom margin set to percentage */
            padding-left: 5%; /* Left padding set to percentage */
            padding-right: 5%; /* Right padding set to percentage */
        }

        .form-v10-content .form-detail .form-left .form-group .form-row.form-row-1 {
            width: 48%; /* Width set to percentage */
            padding: 0 1% 0 5%; /* Padding set to percentage */
        }

        .form-v10-content .form-detail .form-left .form-group .form-row.form-row-2 {
            width: 48%; /* Width set to percentage */
            padding: 0 5% 0 1%; /* Padding set to percentage */
        }

        .form-v10-content .form-detail .form-left .form-group .form-row.form-row-3 {
            width: 70%; /* Width set to percentage */
            padding: 0 1% 0 5%; /* Padding set to percentage */
        }

        .form-v10-content .form-detail .form-left .form-group .form-row.form-row-4 {
            width: 48%; /* Width set to percentage */
            padding: 0 5% 0 1%; /* Padding set to percentage */
        }

        .form-v10-content .form-detail .form-right .form-group .form-row.form-row-1 {
            width: 48%; /* Width set to percentage */
            padding: 0 1% 0 5%; /* Padding set to percentage */
        }

        .form-v10-content .form-detail .form-right .form-group .form-row.form-row-2 {
            width: 100%; /* Full width */
            padding: 0 5% 0 2%; /* Padding in percentages */
        }

        .form-v10-content .form-detail select,
        .form-v10-content .form-detail input {
            width: 100%; /* Full width */
            padding: 3% 4% 4% 4%; /* Padding in percentages */
            border: 1px solid transparent;
            background: transparent;
            appearance: unset;
            -moz-appearance: unset;
            -webkit-appearance: unset;
            -o-appearance: unset;
            -ms-appearance: unset;
            outline: none;
            font-family: 'Montserrat', sans-serif;
            font-size: 16px; /* Font size in pixels */
            box-sizing: border-box;
        }

        
        

        .form-v10-content .form-detail .form-left input {
            color: #000;
            width: 100%; /* Ensure form rows take full width */
        }

        .form-v10-content .form-detail .form-right input {
            color: #fff;
        }

        /* For the left column inputs and selects */
        .form-v10-content .form-detail .form-left input,
        .form-v10-content .form-detail .form-left select {
            border: 1px solid #ccc; /* Add border on all sides */
            border-radius: 8px; /* Rounded corners */
            padding: 10px; /* Optional: Adds padding inside the input/select */
            width: 100%; /* Ensure form rows take full width */
        }

            .form-v10-content .form-detail .form-left input:focus,
            .form-v10-content .form-detail .form-left select:focus {
                border: 1px solid #999; /* Change border color on focus */
                box-shadow: 0 0 5px rgba(153, 153, 153, 0.5); /* Optional: Adds a focus glow effect */
            }

        /* For the right column inputs and selects */
        .form-v10-content .form-detail .form-right input,
        .form-v10-content .form-detail .form-right select {
            border: 1px solid rgba(255, 255, 255, 0.3); /* Add border on all sides */
            border-radius: 8px; /* Rounded corners */
            padding: 10px; /* Optional: Adds padding inside the input/select */
        }

            .form-v10-content .form-detail .form-right input:focus,
            .form-v10-content .form-detail .form-right select:focus {
                border: 1px solid #ccc; /* Change border color on focus */
                box-shadow: 0 0 5px rgba(204, 204, 204, 0.5); /* Optional: Adds a focus glow effect */
            }

            .form-v10-content .form-detail .form-right select option {
                background: #666;
            }

        .form-v10-content .form-detail .form-checkbox {
            margin-top: 5%; /* Top margin in percentage */
            padding: 3% 5% 3% 6%; /* Padding in percentage */
            position: relative;
        }

            .form-v10-content .form-detail .form-checkbox input {
                position: absolute;
                opacity: 0;
            }

            .form-v10-content .form-detail .form-checkbox .checkmark {
                position: absolute;
                top: 0; /* Adjusted for correct positioning */
                left: 6%; /* Adjusted left position for checkmark */
                height: 2.5%; /* Adjusted height to be proportional */
                width: 2.5%; /* Adjusted width to be proportional */
                border: 1px solid #e5e5e5;
                cursor: pointer;
            }

                .form-v10-content .form-detail .form-checkbox .checkmark::after {
                    content: "";
                    position: absolute;
                    left: 5%; /* Adjusted left position in percentage */
                    top: 2%; /* Adjusted top position in percentage */
                    width: 1.5%; /* Adjusted width in percentage */
                    height: 5%; /* Adjusted height in percentage */
                    border: 1px solid #fff;
                    border-width: 0 0.1rem 0.1rem 0;
                    transform: rotate(45deg); /* Maintain rotation */
                    display: none;
                }

            .form-v10-content .form-detail .form-checkbox input:checked ~ .checkmark::after {
                display: block;
            }

            .form-v10-content .form-detail .form-checkbox p {
                margin-left: 10%; /* Adjusted margin-left in percentage */
                color: #e5e5e5;
                font-size: 14px; /* Font size in pixels */
                font-weight: 400;
            }

            .form-v10-content .form-detail .form-checkbox .text {
                font-weight: 400;
                color: #fff;
                text-decoration: underline;
            }

        .form-v10-content .form-detail .form-right .form-row-last {
            padding-left: 5%; /* Adjusted padding-left in percentage */
            margin: 5% 0 2%; /* Adjusted margin in percentage */
        }



        .form-v10-content .form-detail .form-right .register {
            background: #fff;
            border-radius: 25px;
            box-shadow: 0px 6px 17px 0px rgba(0, 0, 0, 0.15);
            width: 30%; /* Adjusted width in percentage */
            border: none;
            margin: 2% 0 5%; /* Adjusted margin in percentage */
            cursor: pointer;
            color: #333;
            font-weight: 700;
            font-size: 15px; /* Font size in pixels */
        }

            .form-v10-content .form-detail .form-right .register:hover {
                background: #ccc;
            }

        .form-v10-content .form-detail .form-right .form-row-last input {
            padding: 3%; /* Adjusted padding in percentage */
            margin-right: 20px;
        }

        .form-v10-content .form-detail .form-left input::-webkit-input-placeholder { /* Chrome/Opera/Safari */
            color: #666;
            font-size: 16px; /* Font size in pixels */
        }

        .form-v10-content .form-detail .form-left input::-moz-placeholder { /* Firefox 19+ */
            color: #666;
            font-size: 16px; /* Font size in pixels */
        }

        .form-v10-content .form-detail .form-left input:-ms-input-placeholder { /* IE 10+ */
            color: #666;
            font-size: 16px; /* Font size in pixels */
        }

        .form-v10-content .form-detail .form-left input:-moz-placeholder { /* Firefox 18- */
            color: #666;
            font-size: 16px; /* Font size in pixels */
        }

        .form-v10-content .form-detail .form-right input::-webkit-input-placeholder { /* Chrome/Opera/Safari */
            color: #f2f2f2;
            font-size: 16px; /* Font size in pixels */
        }

        .form-v10-content .form-detail .form-right input::-moz-placeholder { /* Firefox 19+ */
            color: #f2f2f2;
            font-size: 16px; /* Font size in pixels */
        }

        .form-v10-content .form-detail .form-right input:-ms-input-placeholder { /* IE 10+ */
            color: #f2f2f2;
            font-size: 16px; /* Font size in pixels */
        }

        .form-v10-content .form-detail .form-right input:-moz-placeholder { /* Firefox 18- */
            color: #f2f2f2;
            font-size: 16px; /* Font size in pixels */
        }
/* Responsive */
@media screen and (max-width: 1199px) {
    .form-v10-content {
        margin: 5% 2%; /* Adjusted margin in percentage */
    }
}

@media screen and (max-width: 991px) and (min-width: 768px) {
    .form-v10-content .form-detail .form-group {
        flex-direction: column;
    }

    .form-v10-content .form-detail .form-left .form-group .form-row.form-row-1,
    .form-v10-content .form-detail .form-left .form-group .form-row.form-row-2,
    .form-v10-content .form-detail .form-left .form-group .form-row.form-row-3,
    .form-v10-content .form-detail .form-left .form-group .form-row.form-row-4,
    .form-v10-content .form-detail .form-right .form-group .form-row.form-row-1,
    .form-v10-content .form-detail .form-right .form-group .form-row.form-row-2 {
        width: 100%; /* Ensure form rows take full width */

        padding: 0 4% 0 5%; /* Adjusted padding in percentage */
    }

        .form-v10-content .form-detail .select-btn,
        .form-v10-content .form-detail .form-left .form-group .form-row.form-row-4 .select-btn,
        .form-v10-content .form-detail .form-right .form-group .form-row.form-row-2 .select-btn {
            right: 15%;
        }
}

@media screen and (max-width: 767px) {
    .form-v10-content .form-detail {
        flex-direction: column;
    }

        .form-v10-content .form-detail .form-right {
            border-top-right-radius: 0;
            border-bottom-left-radius: 10px;
        }

        .form-v10-content .form-detail .form-left {
            padding-bottom: 8%; /* Adjusted padding in percentage */
        }
}

@media screen and (max-width: 575px) {
    .form-v10-content .form-detail .form-group {
        flex-direction: column;
    }

    .form-v10-content .form-detail .form-row,
    .form-v10-content .form-detail .form-left .form-group .form-row.form-row-1,
    .form-v10-content .form-detail .form-left .form-group .form-row.form-row-2,
    .form-v10-content .form-detail .form-left .form-group .form-row.form-row-3,
    .form-v10-content .form-detail .form-left .form-group .form-row.form-row-4,
    .form-v10-content .form-detail .form-right .form-group .form-row.form-row-1,
    .form-v10-content .form-detail .form-right .form-group .form-row.form-row-2 {
        width: 100%; /* Ensure form rows take full width */
        padding: 0 5%; /* Adjusted padding in percentage */
    }

        .form-v10-content .form-detail .select-btn,
        .form-v10-content .form-detail .form-left .form-group .form-row.form-row-4 .select-btn,
        .form-v10-content .form-detail .form-right .form-group .form-row.form-row-2 .select-btn {
            right: 15%;
        }

    .form-v10-content .form-detail h2 {
        padding: 5% 5% 0 5%; /* Adjusted padding in percentage */
    }

    .form-v10-content .form-detail .form-checkbox {
        padding: 0 5%; /* Adjusted padding in percentage */
    }

        .form-v10-content .form-detail .form-checkbox .checkmark {
            left: 5%; /* Adjusted left position in percentage */
        }

    .form-v10-content .form-detail .form-right .form-row-last {
        padding-left: 0;
        text-align: center;
        margin: 5% 0 5%; /* Adjusted margin in percentage */
    }
}









@media screen and (max-width: 770px) {
    .form-v10-content {
        width: 100%;
        padding: 20px;
    }

    .form-detail {
        display: flex;
        flex-direction: column;
    }

    .form-left, .form-right {
        width: 100%; /* Make each section take full width */
    }

    .form-group, .form-row, .dob-group {
        flex-direction: column; /* Stack items vertically */
        align-items: flex-start;
    }

    .form-row {
        width: 100%;
    }

    .dob-item {
        width: 100%;
        margin-bottom: 10px;
    }

    .input-text, select, .form-row input {
        width: 100%;
        box-sizing: border-box;
    }

    .form-row-last {
        text-align: center;
        margin-top: 20px;
    }

    /* Adjustments for header and logo */
    .header-container {
        text-align: center;
        padding: 20px;
    }

    .logo-container img {
        width: 100px; /* Adjust logo size for smaller screens */
    }

    .school-name {
        font-size: 18px; /* Adjust school name font size */
    }

    h3 {
        font-size: 16px;
        margin: 0px;
    }
}

@media only screen and (max-width: 768px) {
    .form-left, .form-right {
        width: 100%; /* Make columns stack vertically */
        margin-bottom: 20px;
    }

    .form-row, .input-text {
        width: 100%; /* Make inputs stretch full width */
    }

    .form-row-1, .form-row-2 {
        width: 100%; /* Stacking the rows */
    }

    select, input[type="text"], input[type="submit"] {
        width: 100%;
        box-sizing: border-box;
    }
}
/* Responsive form design for better usability on smaller screens */
@media (max-width: 767px) {
    .form-v10-content {
        width: 95%;
        margin: 10px auto;
    }

        .form-v10-content .form-detail .form-left,
        .form-v10-content .form-detail .form-right {
            width: 100%;
        }

        .form-v10-content .form-detail {
            flex-direction: column;
        }

            .form-v10-content .form-detail h2 {
                padding: 5% 5% 0;
            }

            .form-v10-content .form-detail .form-right {
                border-top-right-radius: 0;
                border-bottom-left-radius: 10px;
                border-bottom-right-radius: 10px;
                padding-bottom: 20px;
            }
}

/* Input focus styles for accessibility */
.form-v10-content .form-detail input:focus,
.form-v10-content .form-detail select:focus {
    border-color: #e0e0e0;
    box-shadow: 0 0 5px rgba(34, 113, 221, 0.5);
}

/* Button hover and active states */
.form-v10-content .form-detail .form-row-last input[type="submit"]:hover {
    background: #e0e0e0;
    color: #fff;
    transform: translateY(-2px);
    transition: all 0.3s ease;
}

.form-v10-content .form-detail .form-row-last input[type="submit"]:active {
    background: #e0e0e0;
    box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.2);
    transform: translateY(1px);
}

/* Optional: Smooth animations for input appearance */
input,
select {
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}
/* General styles for form container */
.form-v10-content {
    display: flex;
    width: 100%;
    max-width: 1200px;
    margin: auto;
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
    border-radius: 15px; /* Add rounded corners to the entire form */
    overflow: hidden; /* Ensures rounded corners are visible */
    flex-wrap: wrap; /* Allow the form sections to wrap to the next line */
}

    /* Left side of the form */
    .form-v10-content .form-left,
    .form-v10-content .form-right {
        width: 50%; /* By default, each section takes up 50% of the space */
        padding: 0px;
    }

        /* Inputs and form-row styling */
        .form-v10-content .form-left .form-row,
        .form-v10-content .form-right .form-row {
            margin-bottom: 15px;
        }

    /* Submit button */
    .form-v10-content .form-row-last input[type="submit"] {
        width: 100%;
        padding: 15px;
        background: #e0e0e0;
        color: white;
        font-size: 18px;
        border: none;
        border-radius: 8px; /* Rounded button */
        cursor: pointer;
        transition: background 0.3s ease;
    }

        .form-v10-content .form-row-last input[type="submit"]:hover {
            background: #e0e0e0; /* Slightly darker green on hover */
        }

/* Adjustments for responsiveness */
@media (max-width: 767px) {
    .form-v10-content {
        flex-direction: column; /* Stack form sections vertically */
    }

        .form-v10-content .form-left,
        .form-v10-content .form-right {
            width: 100%; /* Each section now takes 100% width */
            padding: 10px;
        }

            .form-v10-content .form-left .form-row,
            .form-v10-content .form-right .form-row {
                margin-bottom: 5px;
            }

            /* Ensure no block-level styles override the layout */
            .form-v10-content .form-left .form-group,
            .form-v10-content .form-right .form-group {
                display: block;
            }

            .form-v10-content .form-left .dob-group,
            .form-v10-content .form-right .dob-group {
                display: block;
            }

    /* Remove the form-section overflow */
    .form-v10-content {
        overflow: visible;
    }
}