.elementor-684 .elementor-element.elementor-element-b7c1a45{--display:flex;}/* Start custom CSS for shortcode, class: .elementor-element-221cba1 *//* ===================================
   SCHOOL REGISTRATION FORM UI
=================================== */

body {

    margin: 0;
    padding: 0;

    font-family: 'Poppins', sans-serif;

    background:
        linear-gradient(
            135deg,
            #0f4cbd,
            #001b44
        );

    min-height: 100vh;

    overflow-x: hidden;

    position: relative;
}

/* Animated Glow */
body::before {

    content: "";

    position: fixed;

    width: 800px;
    height: 800px;

    top: -300px;
    left: -200px;

    background:
        radial-gradient(
            circle,
            rgba(37,99,235,0.45),
            transparent 70%
        );

    animation: glowMove 10s ease-in-out infinite;

    z-index: -2;
}

/* Floating Dots */
body::after {

    content: "";

    position: fixed;

    inset: 0;

    background-image:
        radial-gradient(
            rgba(255,255,255,0.18) 2px,
            transparent 2px
        );

    background-size: 90px 90px;

    opacity: 0.35;

    animation: particleMove 30s linear infinite;

    z-index: -1;
}

/* MAIN FORM */
.fluentform {

    position: relative;

    max-width: 850px;

    margin: 50px auto;

    padding: 50px;

    border-radius: 32px;

    overflow: hidden;

    background: rgba(255,255,255,0.97);

    box-shadow:
        0 25px 60px rgba(0,0,0,0.28);

    backdrop-filter: blur(12px);

    z-index: 1;
}

/* Logo Watermark */
.fluentform::before {

    content: "";

    position: absolute;

    inset: 0;

    background-image:
        url("https://championship.testseriespro.com/wp-content/uploads/2026/05/Testseriespro.png");

    background-repeat: no-repeat;

    background-position: center;

    background-size: 480px;

    opacity: 0.04;

    z-index: -1;
}

/* Floating Blue Shape */
.fluentform::after {

    content: "";

    position: absolute;

    width: 260px;
    height: 260px;

    top: -100px;
    right: -100px;

    border-radius: 50%;

    background:
        rgba(37,99,235,0.08);

    animation: floatingShape 8s ease-in-out infinite;

    z-index: -1;
}

/* FORM TITLE */
.fluentform h1,
.fluentform h2,
.fluentform h3 {

    color: #0f172a;

    text-align: center;

    font-weight: 700;

    margin-bottom: 10px;
}

/* LABELS */
.fluentform label {

    color: #0f172a;

    font-size: 15px;

    font-weight: 700;

    margin-bottom: 8px;

    display: block;
}

/* INPUTS */
.fluentform input,
.fluentform textarea,
.fluentform select {

    width: 100%;

    padding: 16px 18px;

    border-radius: 16px;

    border: 1px solid #dbeafe;

    background: #f8fbff;

    color: #111827 !important;

    font-size: 15px;

    transition: all 0.35s ease;

    outline: none;
}

/* DATE FIELD FIX */
.fluentform input[type="date"],
.fluentform input[type="datetime-local"] {

    color: #111827 !important;

    background: white !important;
}

/* PLACEHOLDER */
.fluentform input::placeholder,
.fluentform textarea::placeholder {

    color: #64748b;
}

/* FOCUS EFFECT */
.fluentform input:focus,
.fluentform textarea:focus,
.fluentform select:focus {

    border-color: #2563eb;

    background: white;

    box-shadow:
        0 0 0 5px rgba(37,99,235,0.12),
        0 10px 25px rgba(37,99,235,0.15);

    transform: translateY(-2px);
}

/* FIELD SPACING */
.fluentform .ff-el-group {

    margin-bottom: 24px;
}

/* SECTION HEADINGS */
.fluentform .ff-section_break {

    background:
        linear-gradient(
            135deg,
            #eff6ff,
            #dbeafe
        );

    padding: 18px 20px;

    border-radius: 16px;

    margin-bottom: 25px;

    border-left: 5px solid #2563eb;
}

/* SUBMIT BUTTON */
.fluentform .ff-btn-submit {

    width: 100%;

    padding: 18px;

    border: none;

    border-radius: 18px;

    background:
        linear-gradient(
            135deg,
            #2563eb,
            #1d4ed8
        );

    color: white;

    font-size: 18px;

    font-weight: 700;

    cursor: pointer;

    transition: all 0.35s ease;

    box-shadow:
        0 10px 30px rgba(37,99,235,0.28);
}

/* BUTTON HOVER */
.fluentform .ff-btn-submit:hover {

    transform:
        translateY(-3px)
        scale(1.02);

    background:
        linear-gradient(
            135deg,
            #1d4ed8,
            #60a5fa
        );

    box-shadow:
        0 18px 40px rgba(37,99,235,0.40);
}

/* SUCCESS MESSAGE */
.fluentform .ff-message-success {

    padding: 24px;

    border-radius: 18px;

    background:
        linear-gradient(
            135deg,
            #2563eb,
            #06b6d4
        );

    color: white;

    text-align: center;

    font-size: 18px;

    font-weight: 700;

    animation: popup 0.6s ease;
}

/* ANIMATIONS */
@keyframes glowMove {

    0% {
        transform: translate(0px,0px);
    }

    50% {
        transform: translate(50px,30px);
    }

    100% {
        transform: translate(0px,0px);
    }
}

@keyframes particleMove {

    0% {
        transform: translateY(0px);
    }

    100% {
        transform: translateY(-200px);
    }
}

@keyframes floatingShape {

    0% {
        transform: translateY(0px);
    }

    50% {
        transform: translateY(20px);
    }

    100% {
        transform: translateY(0px);
    }
}

@keyframes popup {

    0% {
        opacity: 0;
        transform: scale(0.8);
    }

    100% {
        opacity: 1;
        transform: scale(1);
    }
}

/* MOBILE */
@media (max-width:768px){

    .fluentform {

        padding: 25px;

        margin: 20px;
    }

    .fluentform::before {

        background-size: 220px;
    }
}




/* HEADER */
.school-registration-header{

    text-align:center;

    margin-top:40px;

    margin-bottom:-10px;

    position:relative;

    z-index:5;
}

/* MAIN TITLE */
.school-registration-header h1{

    color:white;

    font-size:52px;

    font-weight:900; /* EXTRA BOLD */

    margin-bottom:10px;

    letter-spacing:2px;

    font-family:'Poppins',sans-serif;

    text-transform:uppercase;

    text-shadow:
        0 10px 30px rgba(0,0,0,0.45),
        0 0 20px rgba(255,255,255,0.15);
}

/* SUB TITLE */
.school-registration-header p{

    color:rgba(255,255,255,0.85);

    font-size:18px;

    font-weight:500;

    letter-spacing:1px;
}

/* MOBILE */
@media(max-width:768px){

    .school-registration-header h1{

        font-size:32px;
    }

    .school-registration-header p{

        font-size:14px;
    }
}






/* FIXED TOP BANNER */
.fixed-banner{

    position: fixed;

    top: 0;

    left: 0;

    width: 100%;

    z-index: 9999;

    background: transparent;
}

.fixed-banner img{

    width: 100%;

    display: block;

    height: auto;

    object-fit: cover;
}

/* PUSH CONTENT BELOW BANNER */
.school-registration-header{

    margin-top: 180px;

    text-align: center;
}

/* TITLE */
.school-registration-header h1{

    color: #fff;

    font-size: 52px;

    font-weight: 900;

    text-transform: uppercase;

    margin-bottom: 10px;

    text-shadow: 0 10px 30px rgba(0,0,0,.4);
}

/* REMOVE GAP */
.school-registration-header{

    margin-top: 0px !important;

    padding-top: 0px !important;

    margin-bottom: 20px !important;

    text-align: center;
}

/* REMOVE GAP ABOVE TITLE */
.school-registration-header h1{

    margin-top: 0 !important;

    padding-top: 0 !important;
}

/* FORM MOVE UP */
.fluentform{

    margin-top: 20px !important;
}

/* MOBILE */
@media(max-width:768px){

    .school-registration-header{

        margin-top: 100px;
    }

    .school-registration-header h1{

        font-size: 30px;
    }

    .school-registration-header p{

        font-size: 14px;
    }
}/* End custom CSS */