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

/*====================================================
  ROOT COLORS
=====================================================*/
:root{

    --navy:#0D2240;
    --navy-light:#153A67;
    --red:#D22E43;
    --red-dark:#b82337;

    --white:#ffffff;

    --bg:#f5f7fb;

    --border:#e8edf5;

    --text:#334155;

    --muted:#64748b;

    --success:#16a34a;

    --danger:#dc2626;

    --radius:16px;

    --shadow:0 12px 35px rgba(0,0,0,.08);

}

*{

    margin:0;

    padding:0;

    box-sizing:border-box;

}



/*====================================================
 PAGE
=====================================================*/

.account-wrapper{

    width:min(1400px,95%);

    margin:60px auto;

    display:grid;

    grid-template-columns:290px 1fr;

    gap:30px;

}

/*====================================================
 SIDEBAR
=====================================================*/

.sidebar{

    background:#fff;

    border-radius:18px;

    overflow:hidden;

    box-shadow:var(--shadow);

    height:fit-content;

}

.user-card{

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

    color:#fff;

    text-align:center;

    padding:35px 25px;

}

.avatar-circle{

    width:95px;

    height:95px;

    margin:auto;

    border-radius:50%;

    background:#fff;

    color:var(--navy);

    font-size:38px;

    font-weight:700;

    display:flex;

    justify-content:center;

    align-items:center;

    margin-bottom:20px;

}

.user-card h3{

    font-size:22px;

    margin-bottom:6px;

}

.user-card p{

    opacity:.8;

    font-size:14px;

}

.member-status{

    display:inline-block;

    margin-top:18px;

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

    padding:8px 18px;

    border-radius:50px;

    font-size:13px;

}

/*====================================================
 MENU
=====================================================*/

.sidebar-menu{

    list-style:none;

    padding:20px 0;

}

.sidebar-menu li{

    margin:4px 15px;

}

.sidebar-menu li a{

    display:flex;

    align-items:center;

    gap:14px;

    text-decoration:none;

    color:#334155;

    padding:14px 18px;

    border-radius:10px;

    transition:.35s;

    font-weight:500;

}

.sidebar-menu li i{

    width:22px;

    text-align:center;

    font-size:17px;

}

.sidebar-menu li:hover a{

    background:#eef3fb;

    color:var(--red);

}

.sidebar-menu li.active a{

    background:var(--red);

    color:#fff;

}

.sidebar-menu li.active a:hover{

    background:var(--red-dark);

}

/*====================================================
 RIGHT CONTENT
=====================================================*/

.content{

    background:#fff;

    border-radius:18px;

    box-shadow:var(--shadow);

    padding:40px;

}

.content-header{

    margin-bottom:35px;

}

.content-header h2{

    color:var(--navy);

    font-size:32px;

    margin-bottom:8px;

}

.content-header p{

    color:var(--muted);

    font-size:15px;

}

/*====================================================
 ALERTS
=====================================================*/

.alert-success{

    background:#ecfdf5;

    border-left:5px solid var(--success);

    padding:16px 20px;

    border-radius:10px;

    color:#166534;

    margin-bottom:25px;

}

.alert-error{

    background:#fef2f2;

    border-left:5px solid var(--danger);

    padding:16px 20px;

    border-radius:10px;

    color:#991b1b;

    margin-bottom:25px;

}

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

.profile-grid{

    display:grid;

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

    gap:25px;

}

.full{

    grid-column:1/-1;

}

.form-group-p{

    display:flex;

    flex-direction:column;

}

.form-group-p label{

    font-weight:600;

    margin-bottom:8px;

    color:var(--navy);

    font-size:14px;

}

.form-group-p input,

.form-group-p select{

    width:100%;

    height:52px;

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

    border-radius:10px;

    padding:0 15px;

    font-size:15px;

    transition:.3s;

    background:#fff;
    color: #0D2240;

}

.form-group-p input:focus,

.form-group-p select:focus{

    border-color:var(--red);

    outline:none;

    box-shadow:0 0 0 4px rgba(210,46,67,.12);

}

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

.form-group-p input[readonly]{
    background:#f8fafc;
    color:#64748b;
    cursor:not-allowed;
}

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

.button-area{

    display:flex;

    justify-content:flex-end;

    align-items:center;

    gap:15px;

    margin-top:40px;

}

.save-btn{

    background:linear-gradient(135deg,var(--red),#e84d60);

    color:#fff;

    border:none;

    border-radius:12px;

    padding:14px 35px;

    font-size:15px;

    font-weight:600;

    cursor:pointer;

    transition:.35s;

    box-shadow:0 8px 20px rgba(210,46,67,.25);

}

.save-btn:hover{

    transform:translateY(-3px);

    background:linear-gradient(135deg,#b82337,var(--red));

    box-shadow:0 15px 30px rgba(210,46,67,.35);

}

.save-btn:active{

    transform:scale(.98);

}

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

.sidebar,
.content{

    transition:.35s;

}

.sidebar:hover,
.content:hover{

    box-shadow:0 20px 45px rgba(13,34,64,.10);

}

/*====================================================
  MENU EFFECT
=====================================================*/

.sidebar-menu li a{

    position:relative;

    overflow:hidden;

}

.sidebar-menu li a::before{

    content:"";

    position:absolute;

    left:0;

    top:0;

    width:4px;

    height:100%;

    background:var(--red);

    transform:scaleY(0);

    transition:.35s;

}

.sidebar-menu li:hover a::before{

    transform:scaleY(1);

}

.sidebar-menu li.active a::before{

    background:#fff;

    transform:scaleY(1);

}

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

.form-group-p input:hover,
.form-group-p select:hover{

    border-color:#ccd6e5;

}

/*====================================================
  PLACEHOLDER
=====================================================*/

::placeholder{

    color:#94a3b8;

}

/*====================================================
  SCROLLBAR
=====================================================*/

::-webkit-scrollbar{

    width:8px;

}

::-webkit-scrollbar-thumb{

    background:var(--navy);

    border-radius:20px;

}

::-webkit-scrollbar-track{

    background:#eef2f7;

}

/*====================================================
  MOBILE MENU STYLE
=====================================================*/

@media(max-width:991px){

.account-wrapper{

grid-template-columns:1fr;

}

.sidebar{

order:2;

}

.content{

order:1;

}

}

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

@media(max-width:768px){

.content{

padding:30px;

}

.profile-grid{

grid-template-columns:1fr;

gap:20px;

}

.button-area{

justify-content:center;

}

.save-btn{

width:100%;

}

.sidebar-menu li a{

padding:15px;

}

.avatar-circle{

width:80px;

height:80px;

font-size:30px;

}

.user-card h3{

font-size:20px;

}

}

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

@media(max-width:576px){

.account-wrapper{

width:95%;

margin:25px auto;

gap:20px;

}

.content{

padding:20px;

border-radius:14px;

}

.sidebar{

border-radius:14px;

}

.user-card{

padding:25px 20px;

}

.content-header{

margin-bottom:25px;

}

.content-header h2{

font-size:26px;

}

.content-header p{

font-size:14px;

}

.form-group-p label{

font-size:13px;

}

.form-group-p input,
.form-group-p select{

height:48px;

font-size:14px;

}

.save-btn{

padding:13px;

font-size:15px;

}

}

/*====================================================
  LARGE SCREEN
=====================================================*/

@media(min-width:1400px){

.account-wrapper{

max-width:1400px;

}

}

/*====================================================
  OPTIONAL PAGE TITLE BORDER
=====================================================*/

.content-header{

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

padding-bottom:20px;

}

/*====================================================
  OPTIONAL SECTION TITLE
=====================================================*/

.section-title{

font-size:18px;

font-weight:600;

/* color:var(--navy); */

margin-bottom:25px;

}

.success-message{
    background:#dcfce7;
    color:#166534;
    padding:15px 20px;
    border-left:5px solid #16a34a;
    border-radius:10px;
    margin-bottom:25px;
}

.error-message{
    background:#fee2e2;
    color:#991b1b;
    padding:15px 20px;
    border-left:5px solid #dc2626;
    border-radius:10px;
    margin-bottom:25px;
}