/*==============================
  GOOGLE FONT
==============================*/

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800&display=swap');

:root{

    --primary:#1e63ff;
    --secondary:#ff8a00;
    --dark:#15233c;
    --text:#5d6778;
    --border:#e8eefc;
    --bg:#f4f8ff;
    --white:#ffffff;

}

*{

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

}

body{font-family:'Poppins',sans-serif;margin: 0;min-height: 100vh;background: linear-gradient(rgb(0 0 0), rgb(255 255 255 / 0%)), url(https://hvt.obs.mybluehost.me/website_b89b2b2a/img/banner-2.webp) center center / cover no-repeat;background-attachment: fixed;background-blend-mode: lighten;color:var(--dark);overflow-x:hidden;}

#summaryAmount{

animation:pulse 1.2s infinite alternate;

}

@keyframes pulse{

from{

transform:scale(1);

}

to{

transform:scale(1.05);

}

}
.summary-panel{

backdrop-filter:blur(18px);

border-left:1px solid rgba(255,255,255,.15);

}
.pay-btn{

position:relative;

overflow:hidden;

}

.pay-btn::before{

content:"";

position:absolute;

top:0;

left:-100%;

width:100%;

height:100%;

background:

linear-gradient(

90deg,

transparent,

rgba(255,255,255,.35),

transparent

);

transition:.8s;

}

.pay-btn:hover::before{

left:100%;

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

.payment-section{

padding:80px 0;

min-height:100vh;

display:flex;

align-items:center;

}


/*==============================
MAIN CARD
==============================*/

.payment-wrapper{background: #e5e5e5bd;border-radius:30px;overflow:hidden;box-shadow:

0 30px 80px rgba(19,60,150,.12);position:relative;}

.payment-wrapper::before{

content:"";

position:absolute;

width:300px;

height:300px;

background:rgba(30,99,255,.05);

border-radius:50%;

right:-120px;

top:-120px;

}

.payment-wrapper::after{content:"";position:absolute;width:250px;height:250px;background: rgb(255 138 0 / 13%);border-radius:50%;left:-120px;bottom:-120px;}


/*==============================
LEFT
==============================*/

.payment-form{

padding:50px;

position:relative;

z-index:2;

}


/*==============================
LOGO
==============================*/

.logo-box{

text-align:center;

margin-bottom:25px;

}

.logo-box img{

width:170px;

transition:.4s;

}

.logo-box img:hover{

transform:scale(1.05);

}


/*==============================
TITLE
==============================*/

.title-box{

text-align:center;

margin-bottom:25px;

}

.title-box h2{

font-size:34px;

font-weight:700;

color:#1f2e55;

margin-bottom:10px;

}

.title-box p{

font-size:15px;

line-height:26px;

color:#6d7484;

}


/*==============================
BADGES
==============================*/

.trust-badge{

display:flex;

justify-content:center;

gap:12px;

flex-wrap:wrap;

margin-bottom:35px;

}

.trust-badge div{

background:#eef4ff;

padding:10px 18px;

border-radius:50px;

font-size:14px;

font-weight:600;

color:#2456d3;

border:1px solid #dce7ff;

transition:.3s;

}

.trust-badge div:hover{

background:#2456d3;

color:#fff;

transform:translateY(-3px);

}

.trust-badge i{

margin-right:8px;

}


/*==============================
FORM GRID
==============================*/

#paymentForm .row{

row-gap:22px;

}
/*=========================================
PREMIUM INPUTS
=========================================*/

.input-box{
    position:relative;
}

.input-box input,
.input-box select{width:100%;/* height:62px; *//* line-height: 62px; */border:2px solid #e6edff;border-radius:18px;background:#fff;padding: 18px 20px 18px 58px;font-size:15px;font-weight:500;color:#1c2948;transition:.35s;appearance:none;}

.input-box input:focus,
.input-box select:focus{

    outline:none;

    border-color:var(--primary);

    box-shadow:
    0 0 0 5px rgba(30,99,255,.08);

}


.input-box label{

    position:absolute;

    left:58px;

    top:20px;

    color:#8b93a4;

    transition:.25s;

    pointer-events:none;

    font-size:15px;

}


.input-box input:focus+label,
.input-box input:not(:placeholder-shown)+label{

    top:10px;

    font-size:11px;

    color:var(--primary);

    font-weight:600;

}


.input-box i{position:absolute;left:22px;top:22px;font-size:18px;color:#2456d3;}


.select-box::after{content:"\f107";font-family:"Font Awesome 6 Free";font-weight:900;position:absolute;right:22px;top:20px;pointer-events:none;color:#2456d3;}


/*=========================================
FEE CARDS
=========================================*/

.fee-card{

background:linear-gradient(135deg,#2456d3,#153ea8);

border-radius:22px;

padding: 10px 28px;

color:#fff;

box-shadow:

    0 20px 45px rgba(36,86,211,.28);
}

.fee-card span{

display:block;

opacity:.85;

/* margin-bottom:8px; */

font-size:14px;

letter-spacing:.5px;
}

.fee-card input{

background:none;

border:none;

color:#fff;

width:100%;

/* font-size:34px; */

font-weight:700;

padding:0;

outline:none;
}

.remain-card{

    background:linear-gradient(135deg,#ff8a00,#ffb347);

}


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

.pay-btn{

    width:100%;

    height:64px;

    border:none;

    border-radius:18px;

    font-size:18px;

    font-weight:700;

    color:#fff;

    cursor:pointer;

    background:linear-gradient(135deg,#2456d3,#153ea8);

    transition:.35s;

    box-shadow:

    0 18px 45px rgba(36,86,211,.30);

}

.pay-btn:hover{

    transform:translateY(-4px);

    box-shadow:

    0 28px 60px rgba(36,86,211,.38);

}

.pay-btn i{

    margin-right:10px;

}


/*=========================================
STATUS
=========================================*/

.status-card{margin-top:35px;background: #03A9F4;border: 1px solid #03A9F4;border-radius:20px;padding:20px;display:flex;align-items:center;gap:18px;}

.status-icon{

width:60px;

height:60px;

border-radius:50%;

background:#2456d3;

display:flex;

align-items:center;

justify-content:center;

color:#fff;

font-size:24px;
}

.status-card h5{

    margin:0;

    font-weight:700;

}

.status-card p{

    margin:4px 0 0;

    color:#667085;

}


/*=========================================
RIGHT PANEL
=========================================*/

.summary-panel{height:100%;background: linear-gradient(180deg, #163ea8, #1343bd00);color:#fff;padding:45px 35px;position:sticky;top:30px;}

.summary-panel h3{

    font-size:28px;

    margin-bottom:30px;

    font-weight:700;

}

.summary-item{

    display:flex;

    justify-content:space-between;

    margin-bottom:18px;

    padding-bottom:18px;

    border-bottom:1px solid rgba(255,255,255,.12);

}

.summary-item span{

    opacity:.8;

}

.summary-total{

    margin-top:30px;

}

.summary-total span{

    display:block;

    opacity:.8;

}

.summary-total h2{

    margin-top:10px;

    font-size:42px;

    font-weight:700;

    color:#ffd166;

}

.secure-box{

    margin-top:35px;

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

    padding:18px;

    border-radius:16px;

    font-size:14px;

    line-height:24px;

}

.payment-icons{

    margin-top:35px;

    display:flex;

    justify-content:space-between;

    font-size:36px;

    opacity:.95;

}


/*=========================================
ERROR
=========================================*/

.payment-error{

    display:none;

    background:#ffe8e8;

    color:#d32f2f;

    border-left:4px solid #d32f2f;

    padding:14px 18px;

    border-radius:12px;

    font-weight:600;

}


/*=========================================
RESPONSIVE
=========================================*/

@media(max-width:991px){

.payment-form{

padding:30px;

}

.summary-panel{

position:relative;

top:0;

border-radius:0 0 30px 30px;

}

}

@media(max-width:767px){

.payment-section{

padding:35px 0;

}

.payment-form{

padding:22px;

}

.logo-box img{

width:130px;

}

.title-box h2{

font-size:26px;

}

.summary-panel{

padding:28px 22px;

}

.summary-total h2{

font-size:34px;

}

.fee-card input{

font-size:28px;

}

.payment-icons{

font-size:30px;

}

}
/*==========================
LOGIN BOX
==========================*/

.login-box{width:100%;max-width:460px;margin:auto;padding:45px;background: #ffffff94;border-radius:28px;box-shadow:0 25px 70px rgba(0,0,0,.08);border:1px solid rgba(34,197,94,.12);position:relative;overflow:hidden;}

.login-box::before{content:"";position:absolute;top:0;left:0;width:100%;height:5px;background: linear-gradient(90deg, #3F51B5, #f59e0b);}

/*==========================
BADGE
==========================*/

.login-badge{display:inline-flex;align-items:center;gap:8px;padding:8px 18px;background: #5c8bc4;color: #ffffff;font-size:13px;font-weight:600;border-radius:50px;margin-bottom:25px;}

/*==========================
LOGO
==========================*/

.logo{

text-align:center;
margin-bottom:20px;

}

.logo img{

width:120px;

}

/*==========================
TITLE
==========================*/

.login-box h2{

font-size:34px;
font-weight:700;
color:#1f2937;
margin-bottom:10px;
text-align:center;

}

.subtitle{

text-align:center;
color:#6b7280;
font-size:15px;
line-height:26px;
margin-bottom:30px;

}

/*==========================
INFO
==========================*/

.login-info{

display:flex;
justify-content:center;
gap:12px;
flex-wrap:wrap;
margin-bottom:35px;

}

.login-info div{

background:#f8fafc;
padding:10px 16px;
border-radius:30px;
font-size:13px;
font-weight:600;
color:#374151;
border:1px solid #edf2f7;

}

.login-info i{

color:#16a34a;
margin-right:6px;

}

/*==========================
INPUT
==========================*/

.input-group{

margin-bottom:24px;

}

.input-group label{

display:block;
margin-bottom:10px;
font-size:14px;
font-weight:600;
color:#374151;

}

.input-group label i{

color:#16a34a;
margin-right:8px;

}

.input-group input{

width:100%;
height:58px;
padding:0 18px;
border:2px solid #e5e7eb;
border-radius:14px;
font-size:15px;
transition:.3s;
background:#fff;

}

.input-group input:focus{

border-color:#16a34a;
box-shadow:0 0 0 4px rgba(22,163,74,.12);
outline:none;

}

/*==========================
PASSWORD
==========================*/

.password-box{

position:relative;

}

.password-box input{

padding-right:55px;

}

.togglePassword{

position:absolute;
right:20px;
top:50%;
transform:translateY(-50%);
cursor:pointer;
color:#6b7280;
font-size:18px;

}

.togglePassword:hover{

color:#16a34a;

}

/*==========================
REMEMBER
==========================*/

.login-options{

display:flex;
justify-content:space-between;
align-items:center;
margin-bottom:30px;
font-size:14px;
color:#555;

}

.login-options input{

margin-right:6px;

}

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

.login-box button{width:100%;height:58px;border:none;border-radius:14px;background: linear-gradient(135deg, #5e8cc4, #ff9933);color:#fff;font-size:17px;font-weight:700;cursor:pointer;transition:.35s;position:relative;overflow:hidden;}

.login-box button:hover{

transform:translateY(-2px);
box-shadow:0 18px 35px rgba(22,163,74,.35);

}

.login-box button::before{

content:"";
position:absolute;
top:0;
left:-100%;
width:100%;
height:100%;
background:linear-gradient(90deg,transparent,rgba(255,255,255,.35),transparent);
transition:.8s;

}

.login-box button:hover::before{

left:100%;

}

/*==========================
ERROR
==========================*/

.error{

margin-top:22px;
padding:15px;
background:#fff1f2;
border:1px solid #fecdd3;
color:#dc2626;
border-radius:12px;
font-size:14px;
font-weight:600;

}

.error i{

margin-right:8px;

}

/*==========================
FOOTER
==========================*/

.footer{

margin-top:35px;
padding-top:25px;
border-top:1px solid #e5e7eb;
text-align:center;

}

.footer-icons{font-size:14px;color: #3F51B5;font-weight:600;margin-bottom:10px;}

.footer small{

display:block;
font-size:13px;
color:#6b7280;
line-height:22px;

}

/*==========================
RESPONSIVE
==========================*/

@media(max-width:576px){

.login-box{

padding:30px 22px;
border-radius:20px;

}

.login-box h2{

font-size:28px;

}

.logo img{

width:90px;

}

.login-info{

flex-direction:column;

}

.login-info div{

width:100%;
text-align:center;

}

}
.topbar{

background:#fff;

border-bottom:1px solid #edf2f7;

position:sticky;

top:0;

z-index:999;

}

.topbar-inner{

display:flex;

justify-content:space-between;

align-items:center;

padding:18px 0;

}

.brand{

display:flex;

align-items:center;

gap:18px;

}

.brand img{

width:62px;

height:62px;

border-radius:50%;

background:#fff;

box-shadow:0 8px 25px rgba(0,0,0,.08);

padding:8px;

}

.brand h2{

margin:0;

font-size:26px;

font-weight:700;

color:#1f2937;

}

.brand span{

color:#64748b;

font-size:14px;

}

.topbar-right{

display:flex;

align-items:center;

gap:15px;

}

.admin-box{

display:flex;

align-items:center;

gap:12px;

padding:10px 18px;

background:#fff;

border:1px solid #e5e7eb;

border-radius:16px;

}

.admin-avatar{

width:48px;

height:48px;

border-radius:50%;

background:#2563eb;

color:#fff;

display:flex;

align-items:center;

justify-content:center;

font-size:20px;

font-weight:700;

}

.admin-box h5{

margin:0;

font-size:16px;

}

.admin-box small{

color:#6b7280;

}

.profile-btn{

height:48px;

padding:0 22px;

border:none;

border-radius:14px;

background:#2563eb;

color:#fff;

font-weight:600;

cursor:pointer;

transition:.3s;

}

.profile-btn:hover{

background:#1d4ed8;

}

.logout-btn{

height:48px;

padding:0 22px;

display:flex;

align-items:center;

gap:8px;

border-radius:14px;

background:#ef4444;

color:#fff;

text-decoration:none;

font-weight:600;

transition:.3s;

}

.logout-btn:hover{

background:#dc2626;

color:#fff;

text-decoration:none;

}
/*==============================
DASHBOARD STATS
==============================*/

.dashboard-stats{

display:grid;

grid-template-columns:repeat(4,1fr);

gap:25px;

margin:35px 0;

}

.stat-card{

background:#fff;

padding:28px;

border-radius:22px;

display:flex;

align-items:center;

gap:18px;

box-shadow:0 15px 35px rgba(15,23,42,.06);

transition:.35s;

border:1px solid #eef2f7;

}

.stat-card:hover{

transform:translateY(-6px);

box-shadow:0 25px 45px rgba(15,23,42,.10);

}

.stat-icon{

width:70px;

height:70px;

border-radius:18px;

display:flex;

align-items:center;

justify-content:center;

font-size:28px;

color:#fff;

flex-shrink:0;

}

.blue{

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

}

.green{

background:linear-gradient(135deg,#16a34a,#15803d);

}

.orange{

background:linear-gradient(135deg,#f59e0b,#ea580c);

}

.purple{

background:linear-gradient(135deg,#7c3aed,#6d28d9);

}

.stat-content h3{

margin:0;

font-size:30px;

font-weight:700;

color:#111827;

}

.stat-content span{

display:block;

margin-top:6px;

font-size:14px;

color:#6b7280;

}

@media(max-width:991px){

.dashboard-stats{

grid-template-columns:repeat(2,1fr);

}

}

@media(max-width:576px){

.dashboard-stats{

grid-template-columns:1fr;

}

}
/*==========================
GRID
==========================*/

.dashboard-grid{

display:grid;

grid-template-columns:2fr 1fr;

gap:30px;

margin-bottom:35px;

}

/*==========================
CARD
==========================*/

.form-card,
.info-card{

background:#fff;

padding:35px;

border-radius:24px;

box-shadow:0 20px 45px rgba(15,23,42,.06);

border:1px solid #edf2f7;

}

.card-header{

margin-bottom:30px;

}

.card-header h3{

margin:0;

font-size:28px;

font-weight:700;

color:#111827;

}

.card-header p{

margin-top:10px;

color:#6b7280;

font-size:15px;

}

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

.form-group{

margin-bottom:25px;

}

.form-group label{

display:block;

margin-bottom:10px;

font-weight:600;

font-size:15px;

color:#374151;

}

.form-group input{

width:100%;

height:60px;

padding:0 18px;

border:2px solid #e5e7eb;

border-radius:14px;

font-size:15px;

transition:.3s;

background:#fff;

}

.form-group input:focus{

outline:none;

border-color:#2563eb;

box-shadow:0 0 0 4px rgba(37,99,235,.10);

}

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

.save-btn{

width:100%;

height:60px;

border:none;

border-radius:16px;

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

color:#fff;

font-size:17px;

font-weight:600;

cursor:pointer;

transition:.35s;

}

.save-btn:hover{

transform:translateY(-3px);

box-shadow:0 18px 35px rgba(37,99,235,.30);

}

/*==========================
INFO
==========================*/

.info-card h3{

margin-bottom:20px;

font-size:24px;

color:#111827;

}

.info-card ul{

padding-left:18px;

margin:0;

}

.info-card li{

margin-bottom:15px;

line-height:28px;

color:#4b5563;

}

/*==========================
RESPONSIVE
==========================*/

@media(max-width:992px){

.dashboard-grid{

grid-template-columns:1fr;

}

}
/*==========================
TABLE CARD
==========================*/

.table-card{

background:#fff;

border-radius:24px;

padding:30px;

margin-top:35px;

box-shadow:0 15px 40px rgba(15,23,42,.06);

border:1px solid #eef2f7;

}

/*==========================*/

.table-header{

display:flex;

justify-content:space-between;

align-items:center;

margin-bottom:25px;

}

.table-header h3{

margin:0;

font-size:28px;

font-weight:700;

color:#111827;

}

.table-header p{

margin-top:6px;

color:#6b7280;

}

.table-count{

background:#eff6ff;

padding:12px 22px;

border-radius:15px;

font-weight:600;

color:#2563eb;

}

.table-count span{

font-size:24px;

margin-right:8px;

}

/*==========================*/

.course-table{

width:100%;

border-collapse:collapse;

}

.course-table thead{

background:#2563eb;

color:#fff;

}

.course-table th{

padding:18px;

font-size:14px;

font-weight:600;

}

.course-table td{

padding:18px;

border-bottom:1px solid #eef2f7;

vertical-align:middle;

}

.course-table tbody tr{

transition:.3s;

}

.course-table tbody tr:hover{

background:#f8fbff;

}

/*==========================*/

.course-info{

display:flex;

align-items:center;

gap:15px;

}

.course-icon{

width:48px;

height:48px;

background:#eff6ff;

border-radius:14px;

display:flex;

align-items:center;

justify-content:center;

color:#2563eb;

font-size:18px;

}

/*==========================*/

.status{

padding:8px 16px;

border-radius:30px;

font-size:13px;

font-weight:600;

}

.status.active{

background:#dcfce7;

color:#15803d;

}

/*==========================*/

.btn-edit,
.btn-delete{

width:42px;

height:42px;

display:inline-flex;

align-items:center;

justify-content:center;

border-radius:12px;

text-decoration:none;

margin-right:8px;

transition:.3s;

}

.btn-edit{

background:#2563eb;

color:#fff;

}

.btn-edit:hover{

background:#1d4ed8;

color:#fff;

}

.btn-delete{

background:#ef4444;

color:#fff;

}

.btn-delete:hover{

background:#dc2626;

color:#fff;

}

.course-table h6{

margin:0;

font-size:15px;

font-weight:600;

}

.course-table small{

color:#6b7280;

}

/*==========================
RESPONSIVE
==========================*/

@media(max-width:991px){

.table-header{

flex-direction:column;

align-items:flex-start;

gap:15px;

}

.table-responsive{

overflow:auto;

}

.course-table{

min-width:900px;

}

}
/*==============================
EDIT MODAL
==============================*/

.edit-overlay{

position:fixed;

left:0;

top:0;

width:100%;

height:100%;

background:rgba(15,23,42,.55);

backdrop-filter:blur(8px);

display:flex;

align-items:center;

justify-content:center;

z-index:99999;

padding:20px;

}

.edit-modal{

width:100%;

max-width:650px;

background:#fff;

border-radius:24px;

padding:35px;

box-shadow:0 35px 80px rgba(0,0,0,.25);

animation:popup .35s ease;

}

@keyframes popup{

from{

opacity:0;

transform:translateY(40px) scale(.96);

}

to{

opacity:1;

transform:none;

}

}

.edit-header{

display:flex;

justify-content:space-between;

align-items:center;

margin-bottom:30px;

}

.edit-header h2{

margin:0;

font-size:30px;

font-weight:700;

color:#111827;

}

.edit-header p{

margin-top:8px;

color:#64748b;

}

.close-edit{

width:45px;

height:45px;

display:flex;

align-items:center;

justify-content:center;

background:#f3f4f6;

border-radius:12px;

text-decoration:none;

color:#374151;

font-size:20px;

transition:.3s;

}

.close-edit:hover{

background:#2563eb;

color:#fff;

}

.update-btn{

width:100%;

height:58px;

border:none;

border-radius:16px;

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

color:#fff;

font-size:17px;

font-weight:700;

margin-top:15px;

cursor:pointer;

transition:.35s;

}

.update-btn:hover{

transform:translateY(-2px);

box-shadow:0 20px 35px rgba(37,99,235,.30);

}

@media(max-width:768px){

.edit-modal{

padding:25px;

}

.edit-header{

flex-direction:column;

align-items:flex-start;

gap:15px;

}

.edit-header h2{

font-size:24px;

}

}
/*==========================
PAGE HEADER
==========================*/

.page-header{

display:flex;

justify-content:space-between;

align-items:center;

margin:35px 0;

}

.page-header h1{

margin:0;

font-size:38px;

font-weight:700;

color:#111827;

}

.page-header p{

margin-top:10px;

color:#6b7280;

font-size:15px;

}

.page-date{

background:#fff;

padding:15px 22px;

border-radius:16px;

box-shadow:0 10px 25px rgba(0,0,0,.06);

font-weight:600;

color:#2563eb;

}
/*====================================
PROFILE MODAL
====================================*/

.modal{display:none;position:fixed;inset:0;background:rgba(15,23,42,.65);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);z-index:99999;height: 100%;overflow-y:auto;padding:30px;}

.modal-content{position:relative;width:100%;height: 100%;max-width:560px;margin:40px auto;background:#fff;border-radius:24px;padding:40px;box-shadow:0 30px 80px rgba(15,23,42,.18);border:1px solid #edf2f7;animation:modalOpen .35s ease;overflow:hidden;}

/* Top Border */

.modal-content::before{

content:"";
position:absolute;
left:0;
top:0;
width:100%;
height:6px;
background:linear-gradient(90deg,#2563eb,#4f8dfd);

}

/*========================*/

@keyframes modalOpen{

from{

opacity:0;
transform:translateY(40px) scale(.96);

}

to{

opacity:1;
transform:none;

}

}

/*========================*/

.modal-content h3{

margin:0 0 35px;
font-size:32px;
font-weight:700;
color:#111827;
display:flex;
align-items:center;
gap:12px;

}

/*========================*/

.close{

position:absolute;
top:18px;
right:18px;
width:46px;
height:46px;
display:flex;
align-items:center;
justify-content:center;
border-radius:14px;
background:#f3f6fb;
font-size:22px;
cursor:pointer;
transition:.35s;
color:#475569;

}

.close:hover{

background:#2563eb;
color:#fff;
transform:rotate(90deg);

}

/*========================*/

.input-group{

margin-bottom:22px;

}

.input-group label{

display:block;
margin-bottom:10px;
font-size:15px;
font-weight:600;
color:#374151;

}

.input-group input{

width:100%;
height:58px;
padding:0 18px;
border:2px solid #e5e7eb;
border-radius:14px;
font-size:15px;
background:#fff;
transition:.3s;
box-sizing:border-box;

}

.input-group input::placeholder{

color:#9ca3af;

}

.input-group input:focus{

outline:none;
border-color:#2563eb;
box-shadow:0 0 0 5px rgba(37,99,235,.10);

}

/*========================*/

.modal-content button{

width:100%;
height:60px;
border:none;
border-radius:16px;
background:linear-gradient(135deg,#2563eb,#1d4ed8);
color:#fff;
font-size:17px;
font-weight:700;
cursor:pointer;
transition:.35s;
position:relative;
overflow:hidden;

}

.modal-content button::before{

content:"";
position:absolute;
top:0;
left:-100%;
width:100%;
height:100%;
background:linear-gradient(90deg,transparent,rgba(255,255,255,.30),transparent);
transition:.7s;

}

.modal-content button:hover::before{

left:100%;

}

.modal-content button:hover{

transform:translateY(-2px);
box-shadow:0 20px 40px rgba(37,99,235,.30);

}

/*========================*/

@media(max-width:768px){

.modal{

padding:15px;

}

.modal-content{

margin:20px auto;
padding:28px 22px;
border-radius:20px;

}

.modal-content h3{

font-size:26px;
margin-bottom:25px;

}

.close{

width:40px;
height:40px;
font-size:18px;

}

.input-group{

margin-bottom:18px;

}

.input-group label{

font-size:14px;

}

.input-group input{

height:54px;
font-size:14px;

}

.modal-content button{

height:54px;
font-size:16px;

}

}

@media(max-width:480px){

.modal-content{

padding:22px 18px;

}

.modal-content h3{

font-size:22px;

}

}
/*=========================================
FOOTER
=========================================*/

.dashboard-footer{

margin-top:60px;
padding:28px 0;
background:#fff;
border-top:1px solid #e5e7eb;
box-shadow:0 -8px 30px rgba(0,0,0,.05);

}

.footer-logo{

display:flex;
align-items:center;
gap:15px;

}

.footer-logo img{

height:55px;
width:auto;

}

.footer-logo h5{

margin:0;
font-size:20px;
font-weight:700;
color:#1e293b;

}

.footer-logo span{

font-size:14px;
color:#64748b;

}

.footer-links{

display:flex;
justify-content:center;
gap:28px;
flex-wrap:wrap;

}

.footer-links a{

text-decoration:none;
font-weight:600;
color:#475569;
transition:.3s;

}

.footer-links a:hover{

color:#2563eb;

}

.footer-copy p{

margin:0;
font-weight:700;
color:#1e293b;

}

.footer-copy small{

color:#64748b;

}

/*=========================
Responsive
=========================*/

@media(max-width:991px){

.footer-logo{

justify-content:center;

}

.footer-copy{

text-align:center;

}

.footer-links{

margin:15px 0;

}

}

@media(max-width:576px){

.dashboard-footer{

padding:22px 0;

}

.footer-logo{

flex-direction:column;
text-align:center;

}

.footer-logo img{

height:48px;

}

.footer-links{

gap:15px;

}

.footer-links a{

font-size:14px;

}

.footer-copy p{

font-size:15px;

}

.footer-copy small{

font-size:13px;

}

}