/* ==========================================================
   MERITZA CLASSES
   BOOK FREE COUNSELLING
   ========================================================== */


/* ==========================================================
   ROOT VARIABLES
   ========================================================== */

:root {

    --primary: #0A1946;
    --primary-light: #16307d;

    --secondary: #D4AF37;
    --secondary-light: #f5d97a;

    --success: #198754;
    --danger: #dc3545;

    --white: #ffffff;

    --text-dark: #212529;
    --text-light: #6c757d;

    --border: #e7ebf2;

    --background: #f6f8fc;

    --shadow-sm: 0 8px 20px rgba(10,25,70,.06);
    --shadow-md: 0 18px 40px rgba(10,25,70,.10);
    --shadow-lg: 0 28px 60px rgba(10,25,70,.16);

    --radius-sm: 10px;
    --radius: 18px;
    --radius-lg: 28px;

    --transition: all .30s ease;

}


/* ==========================================================
   RESET
   ========================================================== */

*{

    margin:0;
    padding:0;
    box-sizing:border-box;

}

html{

    scroll-behavior:smooth;

}

body{

    font-family:"Inter",sans-serif;

    background:var(--background);

    color:var(--text-dark);

    line-height:1.7;

}


/* ==========================================================
   SECTION
   ========================================================== */

.book-counselling{

    padding:0 0 70px;

    position:relative;

}


/* ==========================================================
   CONTAINER
   ========================================================== */

.book-counselling .container{

    position:relative;
    z-index:2;

}
/* ==========================================================
   BOOKING CARD
   ========================================================== */

.booking-card{

    background:var(--white);

    border-radius:18px;

    border:1px solid rgba(10,25,70,.08);

    box-shadow:0 16px 36px rgba(10,25,70,.08);

    overflow:hidden;

    margin:0 auto;

    transition:var(--transition);

    max-width:860px;

    animation:fadeUp .7s ease both;

}

.booking-card:hover{

    box-shadow:var(--shadow-lg);

}

.booking-card-header{

    background:linear-gradient(135deg,var(--primary),var(--primary-light));

    color:var(--white);

    text-align:center;

    padding:26px 26px 24px;

}
.success-icon{

    width:90px;

    height:90px;

    margin:0 auto 22px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:50%;

    background:rgba(25,135,84,.10);

}

.success-icon i{

    color:var(--success);

    font-size:48px;

}
.booking-card-header h1{

    margin:0;

    font-size:1.6rem;

    font-weight:700;

    line-height:1.3;

}
.text-gold{

    color: var(--secondary);

}

.booking-card-header p{

    margin:0;

    opacity:.9;

    line-height:1.45;

    font-size:.88rem;

}

.booking-card-body{

    padding:28px;

}

/* ==========================================================
   ALERT
   ========================================================== */

#formAlert{

    border-radius:var(--radius-sm);

    margin-bottom:25px;

}


/* ==========================================================
   FORM LABELS
   ========================================================== */

.form-label{

    font-size:.84rem;

    margin-bottom:6px;

    color:var(--primary);

    display:block;

}

.form-label .text-muted{

    font-weight:400;

    font-size:.78rem;

}

.form-label .text-danger{

    color:var(--danger)!important;

}


/* ==========================================================
   INPUTS
   ========================================================== */

.form-control,
.form-select{

    height:42px;
width:100%;
    border:1px solid var(--border);

    border-radius:14px;

    background:#fff;

    padding:8px 14px;

    font-size:.97rem;

    transition:var(--transition);

    box-shadow:none;

}

.form-control:focus,
.form-select:focus{

        border-color:var(--primary);

    box-shadow:0 0 0 .20rem rgba(10,25,70,.10);

    outline:none;

}

.form-control::placeholder{

    color:#9aa3af;

}


/* ==========================================================
   TEXTAREA
   ========================================================== */

textarea.form-control{

    height:auto;

    min-height:130px;

    resize:vertical;

    padding-top:14px;

}

.subject-grid{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(180px,1fr));

    gap:14px;

}

.subject-option{

    display:flex;

    align-items:center;

    gap:10px;

    padding:10px 14px;

    background:#fff;

    border:1px solid var(--border);

    border-radius:14px;

    cursor:pointer;

    transition:var(--transition);

    font-size:.88rem;
font-weight:500;

}

.subject-option:hover{

    border-color:var(--primary);

    background:#f7f9ff;

}

.subject-option input{

    width:18px;

    height:18px;

}
/* ==========================================================
   CHECKBOX
   ========================================================== */

.form-check{

    display:flex;

    align-items:flex-start;

    gap:12px;

}

.form-check-input{

    width:20px;

    height:20px;

    margin-top:3px;

    cursor:pointer;

    border:1px solid #bfc8d4;

}

.form-check-input:checked{

    background-color:var(--primary);

    border-color:var(--primary);

}

.form-check-label{

    color:var(--text-light);

    line-height:1.7;

    cursor:pointer;

}

.form-check-label strong{

    color:var(--primary);

}


/* ==========================================================
   BUTTON
   ========================================================== */

.btn-primary{

    background:linear-gradient(135deg,var(--primary),var(--primary-light));
color:#fff;
    border:none;

    border-radius:14px;

    height:48px;

    font-weight:700;

    font-size:1rem;

    transition:var(--transition);

}

.btn-primary:hover{

    transform:translateY(-2px);

    background:linear-gradient(135deg,var(--primary-light),var(--primary));

    box-shadow:0 12px 26px rgba(10,25,70,.20);

}

.btn-primary:focus{

    box-shadow:0 0 0 .25rem rgba(10,25,70,.18);

}

.btn-primary:disabled{

    opacity:.75;

    cursor:not-allowed;

}


/* ==========================================================
   SPINNER
   ========================================================== */

#submitSpinner{

    width:1rem;

    height:1rem;

    vertical-align:middle;

}


/* ==========================================================
   INVALID FIELDS
   ========================================================== */

.form-control.is-invalid,
.form-select.is-invalid{

    border-color:var(--danger);

    box-shadow:none;

}

.form-control.is-valid,
.form-select.is-valid{

    border-color:var(--success);

    box-shadow:none;

}

.invalid-feedback{

    font-size:.88rem;

    margin-top:6px;

}
/* ==========================================================
   SUCCESS MODAL
   ========================================================== */

.modal-content{

    border:none;

    border-radius:24px;

    overflow:hidden;

    box-shadow:0 30px 80px rgba(0,0,0,.20);

}

.modal-header{

    background:linear-gradient(135deg,var(--primary),var(--primary-light));

    color:var(--white);

    border:none;

    padding:22px 28px;

}

.modal-title{

    font-weight:700;

}

.modal-body{

    padding:36px;

    color:var(--text-dark);

    line-height:1.9;

}

.modal-footer{

    border:none;

    padding:20px 30px 30px;

}

.modal-footer .btn{

    min-width:140px;

}


/* ==========================================================
   LOADER
   ========================================================== */

.page-loader{

    position:fixed;

    inset:0;

    background:rgba(255,255,255,.92);

    display:flex;

    align-items:center;

    justify-content:center;

    z-index:99999;

    transition:opacity .35s ease,
               visibility .35s ease;

}

.page-loader.hidden{

    opacity:0;

    visibility:hidden;

}

.loader-circle{

    width:64px;

    height:64px;

    border:5px solid rgba(10,25,70,.12);

    border-top-color:var(--secondary);

    border-radius:50%;

    animation:loaderSpin .9s linear infinite;

}


/* ==========================================================
   ANIMATIONS
   ========================================================== */

@keyframes loaderSpin{

    from{

        transform:rotate(0deg);

    }

    to{

        transform:rotate(360deg);

    }

}

@keyframes fadeUp{

    from{

        opacity:0;

        transform:translateY(30px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}
/* ==========================================================
   LARGE DESKTOP
   ========================================================== */

@media (min-width:1400px){

    .hero-description{

        max-width:820px;

    }

     .booking-card{

        max-width:900px;

    }

}


/* ==========================================================
   DESKTOP
   ========================================================== */

@media (max-width:1199.98px){

    .booking-card-body{

        padding:40px;

    }

    .feature-card{

        padding:32px 24px;

    }

    .stat-box{

        padding:34px 20px;

    }

}


/* ==========================================================
   TABLET
   ========================================================== */

@media (max-width:991.98px){

    .book-counselling{

        padding:60px 0 80px;

    }

    .booking-card{

        margin-top:18px;

    }

    .booking-card-header{

        padding:34px 28px;

    }

    .booking-card-header h2{

        font-size:1.75rem;

    }

    .booking-card-body{

        padding:32px;

    }
}


/* ==========================================================
   MOBILE
   ========================================================== */

@media (max-width:767.98px){

    .book-counselling{

        padding:45px 0 70px;

    }

    .back-home{

        margin-bottom:24px;

        font-size:.95rem;

    }

    .booking-card{

        border-radius:20px;

        margin-top:16px;

    }

    .booking-card-header{

        padding:28px 22px;

    }

    .booking-card-header h2{

        font-size:1.45rem;

    }

    .booking-card-header p{

        font-size:.95rem;

    }

    .booking-card-body{

        padding:24px 20px;

    }

    .form-control,
    .form-select{

        height:50px;

        font-size:.95rem;

    }

    textarea.form-control{

        min-height:120px;

    }

    .btn-primary{

        height:54px;

        font-size:.96rem;

    }

    .modal-body{

        padding:26px 22px;

    }

}


/* ==========================================================
   SMALL MOBILE
   ========================================================== */

@media (max-width:575.98px){

    .book-counselling{

        padding:40px 0 60px;

    }

    .booking-card-header{

        padding:24px 18px;

    }

    .booking-card-body{

        padding:20px 16px;

    }

    .form-check{

        gap:10px;

    }

    .form-check-label{

        font-size:.92rem;

    }
}


/* ==========================================================
   ACCESSIBILITY
   ========================================================== */

.form-control:focus,
.form-select:focus,
.btn:focus,
.form-check-input:focus{

    outline:none;

}

::selection{

    background:var(--secondary);

    color:var(--primary);

}


/* ==========================================================
   PRINT
   ========================================================== */

@media print{

    .back-home,
    .btn,
    .page-loader{

        display:none !important;

    }

    body{

        background:#ffffff;

    }

    .book-counselling{

        padding:0;

    }

    .booking-card,
    .feature-card,
    .stat-box{

        box-shadow:none;

        border:1px solid #d9d9d9;

    }

}


/* ==========================================================
   END OF FILE
   ========================================================== */