/*========================================
      ENROL TODAY + ENQUIRY FORM
========================================*/

.enrol-enquiry-section{
    width:100%;
    max-width:1200px;
    margin:45px auto 60px;
    padding:0 20px;

    display:grid;
    grid-template-columns:30% 70%;

    border-radius:18px;
    overflow:hidden;

    background:#fff;

    box-shadow:0 10px 35px rgba(0,0,0,.09);

    transition:.35s ease;
}

.enrol-enquiry-section:hover{
    box-shadow:0 18px 45px rgba(0,0,0,.12);
}


/*========================================
          LEFT - ENROL TODAY
========================================*/

.enrol-box{
    position:relative;

    padding:32px 30px;

    display:flex;
    flex-direction:column;
    justify-content:center;

    background:linear-gradient(
        135deg,
        #0a2706 0%,
        #062103 55%,
        #0f3b09 100%
    );

    color:#fff;

    overflow:hidden;
}


/* Decorative glow */

.enrol-box::before{
    content:"";

    position:absolute;

    width:180px;
    height:180px;

    right:-80px;
    top:-80px;

    border-radius:50%;

    background:rgba(255,255,255,.04);

    transition:.5s ease;
}

.enrol-box::after{
    content:"";

    position:absolute;

    width:140px;
    height:140px;

    left:-70px;
    bottom:-70px;

    border-radius:50%;

    border:1px solid rgba(255,255,255,.05);

    transition:.5s ease;
}

.enrol-box:hover::before{
    transform:scale(1.4);
}

.enrol-box:hover::after{
    transform:scale(1.3);
}


/*========================================
              HEADING
========================================*/

.enrol-box h2{
    position:relative;
    z-index:2;

    margin:0 0 12px;

    font-size:32px;
    font-weight:800;

    line-height:1.2;

    color:#fff;
}

.enrol-box h2::after{
    content:"";

    display:block;

    width:45px;
    height:3px;

    margin-top:10px;

    border-radius:10px;

    background:#ff9800;

    transition:.35s ease;
}

.enrol-box:hover h2::after{
    width:75px;
}


/*========================================
              DESCRIPTION
========================================*/

.enrol-box p{
    position:relative;
    z-index:2;

    margin:0 0 18px;

    font-size:13px;
    line-height:1.7;

    color:#e5eee5;
}


/*========================================
          MAIN TAGLINE
========================================*/

.enrol-box h3{
    position:relative;
    z-index:2;

    margin:0 0 22px;

    font-size:17px;
    font-weight:700;

    line-height:1.4;

    color:#fff;
}


/*========================================
           ENROL FEATURES
========================================*/

.enrol-features{
    position:relative;
    z-index:2;

    display:flex;
    flex-direction:column;

    gap:10px;
}

.enrol-feature{
    display:flex;
    align-items:center;

    gap:10px;

    font-size:12px;
    font-weight:600;

    color:#fff;

    transition:.3s ease;
}

.enrol-feature i{
    width:32px;
    height:32px;

    display:flex;
    align-items:center;
    justify-content:center;

    flex-shrink:0;

    border-radius:50%;

    background:rgba(255,255,255,.10);

    color:#7ee68d;

    font-size:14px;

    transition:.35s ease;
}

.enrol-feature:hover{
    transform:translateX(6px);
}

.enrol-feature:hover i{
    background:#ff9800;

    color:#fff;

    transform:rotate(360deg);

    box-shadow:0 5px 15px rgba(255,152,0,.25);
}


/*========================================
          RIGHT - ENQUIRY FORM
========================================*/

.enquiry-box{
    position:relative;

    padding:30px 38px;

    background:#fff;
    border-radius: 18px;
}


/*========================================
              FORM HEADING
========================================*/

.enquiry-box h2{
    margin:0 0 22px;

    font-size:30px;
    font-weight:800;

    line-height:1.2;

    color:#111827;
}

.enquiry-box h2::after{
    content:"";

    display:block;

    width:45px;
    height:3px;

    margin-top:9px;

    border-radius:10px;

    background:#ff9800;

    transition:.35s ease;
}

.enquiry-box:hover h2::after{
    width:75px;
}


/*========================================
              FORM ROW
========================================*/

.form-row{
    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:14px;
}


/*========================================
              INPUT BOX
========================================*/

.input-box{
    display:flex;
    flex-direction:column;
}

.input-box label,
.message-box label{
    margin-bottom:6px;

    font-size:15px;
    font-weight:700;

    color:#333;
}


/*========================================
                INPUT
========================================*/

.input-box input{
    width:100%;
    height:42px;

    padding:0 13px;

    border:1px solid #e2e2e2;

    border-radius:7px;

    outline:none;

    background:#fafafa;

    font-family:inherit;

    font-size:14px;

    color:#363333;

    transition:.3s ease;
}

.input-box input:hover{
    border-color:#b9d8bd;

    background:#fff;
}

.input-box input:focus{
    border-color:#0f7b3b;

    background:#fff;

    box-shadow:
        0 0 0 3px rgba(15,123,59,.08);

    transform:translateY(-1px);
}

.input-box input::placeholder{
    color:#aaa;
}


/*========================================
              MESSAGE BOX
========================================*/

.message-box{
    margin-top:15px;

    display:flex;
    flex-direction:column;
}

.message-box textarea{
    width:100%;

    min-height:88px;

    padding:11px 13px;

    resize:none;

    border:1px solid #e2e2e2;

    border-radius:7px;

    outline:none;

    background:#fafafa;

    font-family:inherit;

    font-size:12px;

    line-height:1.5;

    color:#333;

    transition:.3s ease;
}

.message-box textarea:hover{
    border-color:#b9d8bd;

    background:#fff;
}

.message-box textarea:focus{
    border-color:#0f7b3b;

    background:#fff;

    box-shadow:
        0 0 0 3px rgba(15,123,59,.08);
}

.message-box textarea::placeholder{
    color:#aaa;
}


/*========================================
            SUBMIT BUTTON
========================================*/

.submit-btn{
    position:relative;

    margin-top:16px;

    width:175px;
    height:42px;

    display:flex;
    align-items:center;
    justify-content:center;

    gap:9px;

    border:none;

    border-radius:7px;

    background:#0d4724;

    color:#fff;

    font-family:inherit;

    font-size:14px;
    font-weight:700;

    cursor:pointer;

    overflow:hidden;

    transition:.35s ease;
}


/* Button shine */

.submit-btn::before{
    content:"";

    position:absolute;

    top:0;
    left:-100%;

    width:100%;
    height:100%;

    background:linear-gradient(
        120deg,
        transparent,
        rgba(255,255,255,.25),
        transparent
    );

    transition:.6s ease;
}

.submit-btn:hover::before{
    left:100%;
}

.submit-btn:hover{
    background:#063b00;

    transform:translateY(-3px);

    box-shadow:
        0 10px 22px rgba(6,59,0,.25);
}

.submit-btn i{
    position:relative;
    z-index:2;

    transition:.35s ease;
}

.submit-btn:hover i{
    transform:translateX(5px);
}


/*========================================
            TABLET
========================================*/

@media(max-width:991px){

    .enrol-enquiry-section{
        grid-template-columns:1fr;
    }

    .enrol-box{
        padding:35px;
    }

    .enrol-features{
        display:grid;

        grid-template-columns:repeat(3,1fr);

        gap:12px;
    }

    .enrol-feature{
        flex-direction:column;

        justify-content:center;

        text-align:center;
    }

    .enrol-feature:hover{
        transform:translateY(-4px);
    }

    .enquiry-box{
        padding:35px;
    }

}


/*========================================
              MOBILE
========================================*/

@media(max-width:576px){

    .enrol-enquiry-section{
        margin:30px auto 45px;

        padding:0 15px;

        display:block;

        box-shadow:none;

        overflow:visible;
    }

    .enrol-box{
        padding:28px 22px;

        border-radius:15px 15px 0 0;
    }

    .enrol-box h2{
        font-size:28px;
    }

    .enrol-box p{
        font-size:12px;
    }

    .enrol-box h3{
        font-size:16px;
    }

    .enrol-features{
        grid-template-columns:1fr;
    }

    .enrol-feature{
        flex-direction:row;

        justify-content:flex-start;

        text-align:left;
    }

    .enquiry-box{
        padding:28px 22px;

        border-radius:0 0 15px 15px;

        box-shadow:
            0 10px 30px rgba(0,0,0,.08);
    }

    .enquiry-box h2{
        font-size:26px;
    }

    .form-row{
        grid-template-columns:1fr;

        gap:13px;
    }

    .submit-btn{
        width:100%;
    }

}

/*========================================
        FORM STATUS + HONEYPOT
========================================*/

.hp-field{
    position:absolute !important;
    left:-9999px;
    width:1px;
    height:1px;
    overflow:hidden;
}

.form-status{
    display:none;
    margin-top:14px;
    padding:11px 14px;
    border-radius:8px;
    font-size:14px;
    font-weight:600;
    line-height:1.5;
}

.form-status.is-success{
    display:block;
    background:#EAF8EC;
    border:1px solid #CDEFD5;
    color:#0b4a1f;
}

.form-status.is-error{
    display:block;
    background:#FDECEC;
    border:1px solid #F5C6C6;
    color:#8a1f1f;
}

.submit-btn[disabled]{
    opacity:.7;
    cursor:not-allowed;
}

.input-box input.is-invalid,
.message-box textarea.is-invalid{
    border-color:#d64545;
}
