/* =====================================================
   GHISA OFFICIAL STYLESHEET
   Project:
   Gujba Higher Institution Students Association Portal

   Theme:
   Primary Blue (#0b3d91)

   NOTE:
   Existing class names are preserved to avoid breaking
   any PHP pages.
===================================================== */


/* =====================================================
   CSS VARIABLES
==================================================== */

:root{

    --primary:#0b3d91;
    --primary-dark:#062c6b;

    --secondary:#1e63ff;

    --success:#16a34a;
    --warning:#f59e0b;
    --danger:#dc2626;

    --light:#f4f8ff;
    --white:#ffffff;

    --text:#222;
    --shadow:0 8px 20px rgba(0,0,0,.15);

    --radius:8px;

}





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

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html{
    scroll-behavior:smooth;
}

body{

    font-family:"Segoe UI",Tahoma,sans-serif;

    color:var(--text);

    background:
    linear-gradient(
        135deg,
        rgba(11,61,145,.15),
        rgba(0,128,0,.10),
        rgba(255,255,255,.95)
    ),
    url("image/Log.jpeg");

    background-size:
        cover,
        400px;

    background-position:
        center,
        center;

    background-repeat:
        no-repeat,
        no-repeat;

    background-attachment:fixed;

}


/* =====================================================
   GLOBAL LINKS
===================================================== */

a{
    text-decoration:none;
    transition:.3s;
}

a:hover{
    opacity:.9;
}


/* =====================================================
   IMAGES
===================================================== */

img{
    max-width:100%;
    display:block;
}


/* =====================================================
   COMMON BUTTONS
===================================================== */

button,
.cta-btn,
.portal-btn{

    cursor:pointer;

    border:none;

    border-radius:var(--radius);

    transition:.3s;

}

.cta-btn{

    display:inline-block;

    padding:12px 24px;

    background:var(--secondary);

    color:white;

    font-weight:600;

}

.cta-btn:hover{

    background:var(--primary);

}

.portal-btn{

    width:100%;

    padding:10px;

    margin-bottom:10px;

    background:var(--primary);

    color:white;

}

.portal-btn:hover{

    background:var(--primary-dark);

}


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

.form-container{

    width:90%;

    max-width:900px;

    margin:40px auto;

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

    backdrop-filter:blur(8px);

    padding:30px;

    border-radius:12px;

    box-shadow:var(--shadow);

}


/* =====================================================
   COMMON PAGE CONTAINER
===================================================== */

.page-container{

    width:90%;

    max-width:1100px;

    margin:auto;

}


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

h1,h2,h3{

    color:var(--primary);

    margin-bottom:15px;

}


/* =====================================================
   HORIZONTAL LINE
===================================================== */

hr{

    margin:20px 0;

    border:none;

    border-top:1px solid #ddd;

}


/* =====================================================
   SIMPLE TABLE DESIGN
   Used by:
   Admin
   Dashboard
   Approval Pages
===================================================== */

table{

    width:100%;

    border-collapse:collapse;

    margin-top:20px;

}

table th{

    background:var(--primary);

    color:white;

    padding:12px;

}

table td{

    padding:12px;

    border:1px solid #ddd;

}

table tr:nth-child(even){

    background:#f8fbff;

}

table tr:hover{

    background:#eef5ff;

}


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

.status-badge{

    padding:5px 12px;

    border-radius:20px;

    color:white;

    font-size:12px;

}

.verified{
    background:var(--success);
}

.pending{
    background:var(--warning);
}

.not-verified{
    background:var(--danger);
}


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

.dashboard-card,
.stat-card{

    background:white;

    border-radius:10px;

    padding:20px;

    box-shadow:0 5px 15px rgba(0,0,0,.08);

}

.dashboard-card{

    transition:.25s;
}

.dashboard-card:hover{

    transform:translateY(-5px);

}













/* =====================================================
   HEADER
===================================================== */

.ghisa-header{

    position:sticky;
    top:0;
    z-index:1000;

    display:flex;
    justify-content:space-between;
    align-items:center;

    padding:15px 25px;

    background:var(--primary);

    color:white;

    box-shadow:0 3px 10px rgba(0,0,0,.12);

}

.logo img{

    height:55px;

}


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

.nav-menu{

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

}

.nav-menu a{

    color:white;

    font-weight:600;

    position:relative;

}

.nav-menu a::after{

    content:"";

    position:absolute;

    left:0;
    bottom:-5px;

    width:0;

    height:2px;

    background:white;

    transition:.3s;

}

.nav-menu a:hover::after{

    width:100%;

}


/* =====================================================
   AUTH BUTTONS
===================================================== */

.auth-buttons{

    display:flex;
    gap:10px;

}

.auth-buttons .btn{

    padding:10px 18px;

    border-radius:6px;

    background:#ffffff20;

    color:white;

    font-weight:600;

}

.auth-buttons .btn:hover{

    background:white;
    color:var(--primary);

}

.auth-buttons .primary{

    background:var(--secondary);

}

.auth-buttons .primary:hover{

    background:white;

}


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

.menu-toggle{

    display:none;

    font-size:30px;

    cursor:pointer;

    color:white;

}

.mobile-auth{

    display:none;

}


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

.hero{

    position:relative;

    height:500px;

    overflow:hidden;

}


/* =====================================================
   HERO SLIDER
===================================================== */

.hero-slider{

    display:flex;

    width:200%;

    animation:slideMove 20s linear infinite;

}

.slide{

    min-width:100%;

    position:relative;

}

.slide img{

    width:100%;

    height:500px;

    object-fit:cover;

}


/* =====================================================
   HERO IMAGE CAPTION
===================================================== */

.slide-text{

    position:absolute;

    bottom:30px;

    left:30px;

    max-width:600px;

    background:rgba(0,0,0,.60);

    color:white;

    padding:18px 25px;

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

    border-radius:5px;

    font-size:18px;

}


/* =====================================================
   HERO CONTENT
===================================================== */

.hero-content{

    position:absolute;

    top:50%;
    left:50%;

    transform:translate(-50%,-50%);

    text-align:center;

    width:90%;

    color:white;

}

.hero-content h1{

    color:white;

    font-size:45px;

    margin-bottom:15px;

    text-shadow:2px 2px 6px rgba(0,0,0,.5);

}

.hero-content p{

    font-size:18px;

    margin-bottom:20px;

}


/* =====================================================
   HERO SLIDER ANIMATION
===================================================== */

@keyframes slideMove{

    0%{

        transform:translateX(0);

    }

    100%{

        transform:translateX(-50%);

    }

}


/* =====================================================
   ABOUT GHISA
===================================================== */

.about-ghisa{

    max-width:950px;

    margin:60px auto;

    padding:40px;

    background:white;

    border-radius:10px;

    box-shadow:0 3px 15px rgba(0,0,0,.08);

    line-height:1.9;

}

.about-ghisa h2{

    text-align:center;

    font-size:32px;

}

.about-ghisa p{

    text-align:justify;

    margin-bottom:18px;

}

.about-ghisa > img{

    display:block;

    margin:25px auto;

    max-width:650px;

    width:100%;

    border-radius:8px;

}

/* =====================================================
   APPRECIATION BOX
===================================================== */

.appreciation-box{

    background:#f2f6ff;

    border-left:6px solid var(--primary);

    padding:25px;

    border-radius:6px;

}


/* =====================================================
   QUICK INFORMATION
===================================================== */

.info-links{

    display:grid;

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

    gap:20px;

    padding:40px;

}

.info-item{

    display:flex;

    align-items:center;

    gap:15px;

    background:white;

    padding:20px;

    border-radius:10px;

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

    transition:.3s;

}

.info-item:hover{

    transform:translateY(-5px);

}

.info-item img{

    width:35px;

}


/* =====================================================
   NEWSLETTER
===================================================== */

.newsletter{

    background:var(--primary);

    color:white;

    text-align:center;

    padding:50px 20px;

}

.newsletter h2{

    color:white;

}

.newsletter input{

    width:300px;

    max-width:90%;

    padding:12px;

    margin:8px;

    border:none;

    border-radius:6px;

}

.newsletter button{

    padding:12px 25px;

    background:white;

    color:var(--primary);

    font-weight:bold;

}

.newsletter button:hover{

    background:#eeeeee;

}


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

@media(max-width:768px){

    .menu-toggle{

        display:block;

    }

    .nav-menu{

        display:none;

        flex-direction:column;

        position:absolute;

        top:85px;

        left:0;

        width:100%;

        background:var(--primary);

        padding:20px;

        gap:15px;

    }

    .nav-menu.active{

        display:flex;

    }

    .auth-buttons{

        display:none;

    }

    .mobile-auth{

        display:flex;

        flex-direction:column;

        gap:10px;

    }

    .hero{

        height:350px;

    }

    .slide img{

        height:350px;

    }

    .hero-content h1{

        font-size:28px;

    }

    .slide-text{

        left:10px;

        right:10px;

        bottom:15px;

        font-size:15px;

        max-width:none;

    }

}

.page-image{

width:100%;

max-width:700px;

display:block;

margin:25px auto;

border-radius:15px;

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

}

.values-gallery{

display:grid;

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

gap:20px;

margin-top:35px;

}

.values-gallery img{

width:100%;

height:220px;

object-fit:cover;

border-radius:12px;

transition:.4s;

box-shadow:0 6px 18px rgba(0,0,0,.15);

}

.values-gallery img:hover{

transform:scale(1.05);

}




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

.partnership-section{

padding:70px 8%;

background:#f8f9fc;

}

.partnership-section h2{

text-align:center;

font-size:36px;

color:#0b3d91;

margin-bottom:15px;

}

.partnership-section p{

font-size:16px;

line-height:1.9;

color:#555;

}

.partnership-container{

display:grid;

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

gap:35px;

margin-top:45px;

align-items:stretch;

}

.partnership-card{

background:#fff;

border-radius:15px;

overflow:hidden;

box-shadow:0 8px 20px rgba(0,0,0,.12);

display:flex;

flex-direction:column;

height:100%;

transition:.4s;

}

.partnership-card:hover{

transform:translateY(-8px);

box-shadow:0 15px 35px rgba(0,0,0,.18);

}

.partnership-card img{

width:100%;

height:220px;

object-fit:cover;

display:block;

}

.partnership-card:hover img{

transform:scale(1.05);

}

.partnership-card h3{

padding:20px 22px 12px;

font-size:24px;

color:#0b3d91;

font-weight:700;

}

.partnership-card p{

padding:0 22px 25px;

text-align:justify;

font-size:16px;

line-height:1.8;

color:#555;

flex:1;

}
/*=====================================
MISSION PAGE ENDING
======================================*/

.mission-ending{

position:relative;

padding:100px 8%;

margin-top:70px;

background:url("image/Ghisa Team.jpeg") center/cover no-repeat;

text-align:center;

overflow:hidden;

}

.ending-overlay{

position:absolute;

top:0;

left:0;

width:100%;

height:100%;

background:rgba(11,61,145,.82);

}

.ending-content{

position:relative;

z-index:2;

max-width:850px;

margin:auto;

color:#fff;

}

.ending-content h2{

font-size:42px;

margin-bottom:25px;

}

.ending-content p{

font-size:18px;

line-height:2;

margin-bottom:20px;

}

.ending-buttons{

margin-top:35px;

display:flex;

justify-content:center;

gap:20px;

flex-wrap:wrap;

}

.join-btn,
.contact-btn{

display:inline-block;

padding:14px 35px;

border-radius:50px;

text-decoration:none;

font-weight:bold;

transition:.3s;

}

.join-btn{

background:#FFD700;

color:#0b3d91;

}

.join-btn:hover{

background:#fff;

}

.contact-btn{

border:2px solid #fff;

color:#fff;

}

.contact-btn:hover{

background:#fff;

color:#0b3d91;

}

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

.join-ghisa{

padding:80px 10%;

text-align:center;

background:linear-gradient(135deg,#0b3d91,#1457c0);

color:#fff;

margin-top:60px;

}

.join-ghisa h2{

font-size:38px;

margin-bottom:20px;

}

.join-ghisa p{

max-width:750px;

margin:auto;

font-size:18px;

line-height:1.9;

margin-bottom:35px;

}

.join-buttons{

display:flex;

justify-content:center;

gap:20px;

flex-wrap:wrap;

}

.join-btn,
.contact-btn{

padding:14px 35px;

border-radius:50px;

text-decoration:none;

font-size:17px;

font-weight:bold;

transition:.3s;

}

.join-btn{

background:#fff;

color:#0b3d91;

}

.contact-btn{

background:transparent;

border:2px solid #fff;

color:#fff;

}

.join-btn:hover{

background:#ffd700;

color:#000;

}

.contact-btn:hover{

background:#fff;

color:#0b3d91;

}









/* =====================================================
   SECTION 3
   FORMS, LOGIN & AUTHENTICATION
===================================================== */


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

.form-container h2{

    text-align:center;

    margin-bottom:10px;

}

.form-container h3{

    margin:30px 0 15px;

    padding-bottom:8px;

    border-bottom:2px solid #eef3ff;

    color:var(--primary);

}


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

.form-row{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:20px;

}

.form-group{

    position:relative;

    margin-bottom:20px;

}


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

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

    width:100%;

    padding:14px;

    border:1px solid #cfd8e3;

    border-radius:8px;

    background:#fff;

    outline:none;

    transition:.25s;

    font-size:15px;

}

.form-group textarea{

    resize:vertical;

    min-height:120px;

}


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

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus{

    border-color:var(--secondary);

    box-shadow:0 0 0 3px rgba(30,99,255,.15);

}


/* =====================================================
   FLOATING LABELS
===================================================== */

.form-group label{

    position:absolute;

    top:14px;

    left:14px;

    background:#fff;

    padding:0 5px;

    color:#777;

    pointer-events:none;

    transition:.25s;

}

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

    top:-9px;

    font-size:12px;

    color:var(--secondary);

}


/* =====================================================
   FILE UPLOAD
===================================================== */

input[type=file]{

    width:100%;

    padding:12px;

    border:2px dashed #b8c7ea;

    border-radius:8px;

    background:#fafcff;

    cursor:pointer;

}

input[type=file]:hover{

    border-color:var(--secondary);

}


/* =====================================================
   PASSPORT PREVIEW
===================================================== */

#photoPreview{

    width:120px;

    height:120px;

    border-radius:8px;

    object-fit:cover;

    border:3px solid var(--primary);

    display:none;

    margin:auto;

}


/* =====================================================
   CAMERA OPTIONS
===================================================== */

.camera-options{

    display:flex;

    gap:15px;

    flex-wrap:wrap;

    margin-top:10px;

}

.camera-options button{

    flex:1;

    min-width:180px;

}


/* =====================================================
   HELP TEXT
===================================================== */

small{

    color:#666;

    display:block;

    margin-top:6px;

}


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

.checkbox-group{

    display:flex;

    align-items:flex-start;

    gap:10px;

    margin:20px 0;

}

.checkbox-group input{

    width:auto;

}


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

.form-actions{

    margin-top:30px;

}

.form-actions button{

    width:100%;

    padding:15px;

    font-size:16px;

}


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

.login-body{

    background:

    linear-gradient(

    rgba(0,0,0,.55),

    rgba(0,0,0,.55)

    ),

    url("image/.jpeg");

    background-size:cover;

    background-position:center;

    background-attachment:fixed;

}


.login-overlay{

    min-height:100vh;

    display:flex;

    justify-content:center;

    align-items:center;

    padding:20px;

}


.login-card{

    width:100%;

    max-width:400px;

    background:white;

    padding:35px;

    border-radius:10px;

    box-shadow:var(--shadow);

}


.login-card input{

    width:100%;

    padding:13px;

    margin-bottom:15px;

    border:1px solid #ccc;

    border-radius:6px;

}


.login-card button{

    width:100%;

    padding:13px;

    background:var(--primary);

    color:white;

    border:none;

    border-radius:6px;

    font-size:15px;

}


.login-card button:hover{

    background:var(--primary-dark);

}


/* =====================================================
   AUTH PAGES
===================================================== */

.auth-body{

    display:flex;

    justify-content:center;

    align-items:center;

    min-height:100vh;

    background:#f4f8ff;

}


.auth-card{

    width:100%;

    max-width:420px;

    background:white;

    padding:35px;

    border-radius:10px;

    box-shadow:var(--shadow);

}


.auth-card input{

    width:100%;

    padding:13px;

    margin-bottom:15px;

    border:1px solid #ccc;

    border-radius:6px;

}


.auth-card button{

    width:100%;

    padding:13px;

    background:var(--primary);

    color:white;

    border:none;

    border-radius:6px;

}


.auth-card button:hover{

    background:var(--primary-dark);

}


/* =====================================================
   SUCCESS / ERROR MESSAGE
===================================================== */

.success-message{

    background:#eaf9ef;

    color:#0f7a35;

    padding:12px;

    border-radius:6px;

    margin-bottom:15px;

}

.error-message{

    background:#ffe9e9;

    color:#b30000;

    padding:12px;

    border-radius:6px;

    margin-bottom:15px;

}


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

@media(max-width:768px){

    .form-row{

        grid-template-columns:1fr;

    }

    .form-container{

        width:95%;

        padding:20px;

    }

    .camera-options{

        flex-direction:column;

    }

}














/* =====================================================
   SECTION 4
   PORTAL • DASHBOARD • ADMIN PANEL
===================================================== */


/* =====================================================
   PORTAL BODY
===================================================== */

/*.portal-body{*/

/*    margin:0;*/

/*    background:#f4f8ff;*/

/*    color:#222;*/

/*}*/


/* =====================================================
   TOP BAR
===================================================== */

/*.portal-topbar{*/

/*    position:sticky;*/

/*    top:0;*/

/*    z-index:999;*/

/*    display:flex;*/

/*    justify-content:space-between;*/

/*    align-items:center;*/

/*    background:var(--primary);*/

/*    color:white;*/

/*    padding:12px 25px;*/

/*    box-shadow:0 2px 8px rgba(0,0,0,.15);*/

/*}*/

/*.portal-topbar h2{*/

/*    color:white;*/

/*    margin:0;*/

/*}*/

/*.portal-logo{*/

/*    height:50px;*/

/*}*/


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

.welcome-box{

    display:flex;

    align-items:center;

    gap:10px;

    font-weight:600;

}

.portal-avatar{

    width:55px;

    height:55px;

    border-radius:50%;

    object-fit:cover;

    border:3px solid white;

}


/* =====================================================
   MAIN LAYOUT
===================================================== */

.portal-container{

    display:flex;

    min-height:calc(100vh - 70px);

}


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

.portal-sidebar{

    width:240px;

    background:#1e293b;

    padding:20px;

}

.portal-sidebar h3{

    color:white;

    margin-bottom:20px;

    text-align:center;

}

.portal-sidebar a{

    display:block;

    color:white;

    padding:12px 15px;

    margin-bottom:8px;

    border-radius:6px;

    transition:.25s;

}

.portal-sidebar a:hover{

    background:var(--primary);

    padding-left:22px;

}


/* =====================================================
   CONTENT AREA
===================================================== */

.portal-content{

    flex:1;

    padding:30px;

}

.portal-content-full{

    padding:40px;

}


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

.dashboard-title{

    margin-bottom:25px;

}


/* =====================================================
   ANNOUNCEMENT BAR
===================================================== */

.announcement-bar{

    background:linear-gradient(

    90deg,

    var(--primary),

    var(--secondary)

    );

    color:white;

    overflow:hidden;

    white-space:nowrap;

    border-radius:6px;

    margin-bottom:25px;

}

.announcement-text{

    display:inline-block;

    padding:12px 0;

    animation:scrollText 18s linear infinite;

}

@keyframes scrollText{

    from{

        transform:translateX(100%);

    }

    to{

        transform:translateX(-100%);

    }

}


/* =====================================================
   DASHBOARD GRID
===================================================== */

.dashboard-grid{

    display:grid;

    grid-template-columns:

    repeat(auto-fit,minmax(260px,1fr));

    gap:20px;

}


/* =====================================================
   STATISTICS
===================================================== */

.stats-grid{

    display:grid;

    grid-template-columns:

    repeat(auto-fit,minmax(220px,1fr));

    gap:20px;

}

.stat-card{

    text-align:center;

    transition:.25s;

}

.stat-card:hover{

    transform:translateY(-6px);

}

.stat-card h3{

    font-size:16px;

    color:#666;

}

.stat-card p{

    margin-top:12px;

    font-size:30px;

    font-weight:bold;

    color:var(--primary);

}


/* =====================================================
   SEARCH BAR
===================================================== */

.search-box{

    margin-bottom:20px;

}

.search-box input{

    width:100%;

    padding:13px;

    border:1px solid #ccc;

    border-radius:6px;

}


/* =====================================================
   ADMIN TABLES
===================================================== */

.table-responsive{

    overflow-x:auto;

}

table{

    min-width:850px;

}


/* =====================================================
   TABLE ACTION BUTTONS
===================================================== */

.action-btn{

    display:inline-block;

    padding:8px 14px;

    border-radius:5px;

    color:white;

    font-size:13px;

    margin:2px;

}

.view-btn{

    background:#2563eb;

}

.edit-btn{

    background:#0284c7;

}

.approve-btn{

    background:#16a34a;

}

.reject-btn{

    background:#dc2626;

}

.delete-btn{

    background:#7f1d1d;

}

.action-btn:hover{

    opacity:.9;

}


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

.status-approved{

    color:#15803d;

    font-weight:bold;

}

.status-pending{

    color:#ca8a04;

    font-weight:bold;

}

.status-rejected{

    color:#dc2626;

    font-weight:bold;

}


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

.profile-card{

    display:flex;

    align-items:center;

    gap:25px;

    background:white;

    padding:25px;

    border-radius:10px;

    box-shadow:0 4px 15px rgba(0,0,0,.08);

}

.profile-card img{

    width:120px;

    height:120px;

    object-fit:cover;

    border-radius:10px;

}


/* =====================================================
   QUICK ACTIONS
===================================================== */

.quick-actions{

    display:grid;

    grid-template-columns:

    repeat(auto-fit,minmax(200px,1fr));

    gap:20px;

}

.quick-actions a{

    display:block;

    text-align:center;

    background:white;

    padding:25px;

    border-radius:10px;

    color:var(--primary);

    font-weight:bold;

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

    transition:.25s;

}

.quick-actions a:hover{

    transform:translateY(-5px);

}


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

@media(max-width:900px){

    .portal-container{

        flex-direction:column;

    }

    .portal-sidebar{

        width:100%;

    }

    .portal-content{

        padding:20px;

    }

}

























/* =====================================================
   SECTION 5
   FOOTER • PAGE BANNER • UTILITIES • RESPONSIVE
   (Final Section)
===================================================== */


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

.footer{

    background:#081f4b;

    color:white;

    display:flex;

    justify-content:space-between;

    flex-wrap:wrap;

    gap:30px;

    padding:40px;

}

.footer h3{

    color:white;

    margin-bottom:15px;

}

.footer p{

    line-height:1.8;

}

.footer a{

    color:#b9d8ff;

    display:block;

    margin-bottom:8px;

}

.footer a:hover{

    color:white;

}


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

.page-banner{

    position:relative;

    width:100%;

    height:300px;

    overflow:hidden;

}

.page-banner img{

    position:absolute;

    width:100%;

    height:300px;

    object-fit:cover;

    opacity:0;

    transition:opacity .8s ease;

}

.page-banner img.active{

    opacity:1;

}

.banner-overlay{

    position:absolute;

    inset:0;

    background:rgba(0,0,0,.45);

}

.banner-title{

    position:absolute;

    bottom:35px;

    left:50px;

    color:white;

    font-size:34px;

    font-weight:bold;

}


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

.page-section{

    margin-bottom:45px;

}

.page-section img{

    width:100%;

    border-radius:8px;

    margin-top:15px;

}


/* =====================================================
   COMMON UTILITIES
===================================================== */

.text-center{

    text-align:center;

}

.text-left{

    text-align:left;

}

.text-right{

    text-align:right;

}

.mt-10{

    margin-top:10px;

}

.mt-20{

    margin-top:20px;

}

.mt-30{

    margin-top:30px;

}

.mb-10{

    margin-bottom:10px;

}

.mb-20{

    margin-bottom:20px;

}

.mb-30{

    margin-bottom:30px;

}

.hidden{

    display:none;

}


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

@media(max-width:900px){

    .footer{

        flex-direction:column;

        text-align:center;

    }

    .banner-title{

        left:20px;

        right:20px;

        font-size:26px;

    }

}

@media(max-width:768px){

    .page-banner{

        height:220px;

    }

    .page-banner img{

        height:220px;

    }

    .banner-overlay{

        height:220px;

    }

}

@media(max-width:500px){

    .form-container{

        width:96%;

        padding:18px;

    }

    .footer{

        padding:25px;

    }

    h1{

        font-size:28px;

    }

    h2{

        font-size:24px;

    }

    h3{

        font-size:20px;

    }

}


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

@media print{

    body{

        background:white !important;

    }

    .ghisa-header,
    .footer,
    .portal-sidebar,
    .portal-topbar{

        display:none;

    }

    .portal-content,
    .page-container,
    .form-container{

        width:100%;

        margin:0;

        padding:0;

        box-shadow:none;

        background:white;

    }

}

.sidebar-title{
    color:#ffffff;
    font-size:18px;
    font-weight:700;
    text-align:center;
    margin:0 0 20px 0;
    padding-bottom:12px;
    border-bottom:1px solid rgba(255,255,255,.25);
    letter-spacing:.5px;
}







/* ===========================================
   REGISTRATION HEADER
=========================================== */

.register-header{

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:15px;

    margin-bottom:25px;

}

.header-logo,
.header-passport{

    width:80px;

    min-width:80px;

    display:flex;

    justify-content:center;

    align-items:center;

}

.register-logo,
.passport-preview{

    width:80px;

    height:80px;

    border-radius:8px;

    object-fit:cover;

    border:2px solid #d9d9d9;

    background:#fff;

}

.register-title{

    flex:1;

    text-align:center;

    padding:0 10px;

}

.register-title h2{

    margin:0;

    color:#0b3d91;

    font-size:28px;

}

.register-title p{

    margin:6px 0 2px;

    font-size:15px;

    font-weight:600;

}

.register-title small{

    color:#666;

    font-size:13px;

}

@media (max-width:768px){

    .header-logo,
    .header-passport{

        width:65px;

        min-width:65px;

    }

    .register-logo,
    .passport-preview{

        width:65px;

        height:65px;

    }

    .register-title h2{

        font-size:20px;

    }

    .register-title p{

        font-size:13px;

    }

}


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

.president-section{

    text-align:center;

}

.president-photo{

    width:220px;

    height:220px;

    object-fit:cover;

    border-radius:50%;

    border:6px solid #0b3d91;

    margin:20px auto;

    display:block;

    box-shadow:0 8px 20px rgba(0,0,0,.15);

}

.president-name{

    color:#0b3d91;

    margin-bottom:20px;

    font-size:28px;

}

.president-section .appreciation-box{

    text-align:justify;

}

@media(max-width:768px){

    .president-photo{

        width:170px;

        height:170px;

    }

    .president-name{

        font-size:22px;

    }

}

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

.contact-hero{

background:linear-gradient(135deg,#0b3d91,#1b5fd1);

padding:80px 10%;

text-align:center;

color:#fff;

}

.contact-hero h1{

font-size:42px;

margin-bottom:20px;

}

.contact-hero p{

max-width:700px;

margin:auto;

font-size:18px;

line-height:1.8;

}

.contact-grid{

display:grid;

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

gap:25px;

margin:50px 0;

}

.contact-card{

background:#fff;

padding:30px;

border-radius:15px;

box-shadow:0 8px 20px rgba(0,0,0,.12);

text-align:center;

transition:.3s;

}

.contact-card:hover{

transform:translateY(-8px);
/*=====================================
MISSION PAGE ENDING
======================================*/

.mission-ending{

position:relative;

padding:100px 8%;

margin-top:70px;

background:url("image/Ghisa Team.jpeg") center/cover no-repeat;

text-align:center;

overflow:hidden;

}

.ending-overlay{

position:absolute;

top:0;

left:0;

width:100%;

height:100%;

background:rgba(11,61,145,.82);

}

.ending-content{

position:relative;

z-index:2;

max-width:850px;

margin:auto;

color:#fff;

}

.ending-content h2{

font-size:42px;

margin-bottom:25px;

}

.ending-content p{

font-size:18px;

line-height:2;

margin-bottom:20px;

}

.ending-buttons{

margin-top:35px;

display:flex;

justify-content:center;

gap:20px;

flex-wrap:wrap;

}

.join-btn,
.contact-btn{

display:inline-block;

padding:14px 35px;

border-radius:50px;

text-decoration:none;

font-weight:bold;

transition:.3s;

}

.join-btn{

background:#FFD700;

color:#0b3d91;

}

.join-btn:hover{

background:#fff;

}

.contact-btn{

border:2px solid #fff;

color:#fff;

}

.contact-btn:hover{

background:#fff;

color:#0b3d91;

}

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

.join-ghisa{

padding:80px 10%;

text-align:center;

background:linear-gradient(135deg,#0b3d91,#1457c0);

color:#fff;

margin-top:60px;

}

.join-ghisa h2{

font-size:38px;

margin-bottom:20px;

}

.join-ghisa p{

max-width:750px;

margin:auto;

font-size:18px;

line-height:1.9;

margin-bottom:35px;

}

.join-buttons{

display:flex;

justify-content:center;

gap:20px;

flex-wrap:wrap;

}

.join-btn,
.contact-btn{

padding:14px 35px;

border-radius:50px;

text-decoration:none;

font-size:17px;

font-weight:bold;

transition:.3s;

}

.join-btn{

background:#fff;

color:#0b3d91;

}

.contact-btn{

background:transparent;

border:2px solid #fff;

color:#fff;

}

.join-btn:hover{

background:#ffd700;

color:#000;

}

.contact-btn:hover{

background:#fff;

color:#0b3d91;

}









/* =====================================================
   SECTION 3
   FORMS, LOGIN & AUTHENTICATION
===================================================== */


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

.form-container h2{

    text-align:center;

    margin-bottom:10px;

}

.form-container h3{

    margin:30px 0 15px;

    padding-bottom:8px;

    border-bottom:2px solid #eef3ff;

    color:var(--primary);

}


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

.form-row{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:20px;

}

.form-group{

    position:relative;

    margin-bottom:20px;

}


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

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

    width:100%;

    padding:14px;

    border:1px solid #cfd8e3;

    border-radius:8px;

    background:#fff;

    outline:none;

    transition:.25s;

    font-size:15px;

}

.form-group textarea{

    resize:vertical;

    min-height:120px;

}


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

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus{

    border-color:var(--secondary);

    box-shadow:0 0 0 3px rgba(30,99,255,.15);

}


/* =====================================================
   FLOATING LABELS
===================================================== */

.form-group label{

    position:absolute;

    top:14px;

    left:14px;

    background:#fff;

    padding:0 5px;

    color:#777;

    pointer-events:none;

    transition:.25s;

}

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

    top:-9px;

    font-size:12px;

    color:var(--secondary);

}


/* =====================================================
   FILE UPLOAD
===================================================== */

input[type=file]{

    width:100%;

    padding:12px;

    border:2px dashed #b8c7ea;

    border-radius:8px;

    background:#fafcff;

    cursor:pointer;

}

input[type=file]:hover{

    border-color:var(--secondary);

}


/* =====================================================
   PASSPORT PREVIEW
===================================================== */

#photoPreview{

    width:120px;

    height:120px;

    border-radius:8px;

    object-fit:cover;

    border:3px solid var(--primary);

    display:none;

    margin:auto;

}


/* =====================================================
   CAMERA OPTIONS
===================================================== */

.camera-options{

    display:flex;

    gap:15px;

    flex-wrap:wrap;

    margin-top:10px;

}

.camera-options button{

    flex:1;

    min-width:180px;

}


/* =====================================================
   HELP TEXT
===================================================== */

small{

    color:#666;

    display:block;

    margin-top:6px;

}


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

.checkbox-group{

    display:flex;

    align-items:flex-start;

    gap:10px;

    margin:20px 0;

}

.checkbox-group input{

    width:auto;

}


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

.form-actions{

    margin-top:30px;

}

.form-actions button{

    width:100%;

    padding:15px;

    font-size:16px;

}


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

.login-body{

    background:

    linear-gradient(

    rgba(0,0,0,.55),

    rgba(0,0,0,.55)

    ),

    url("image/.jpeg");

    background-size:cover;

    background-position:center;

    background-attachment:fixed;

}


.login-overlay{

    min-height:100vh;

    display:flex;

    justify-content:center;

    align-items:center;

    padding:20px;

}


.login-card{

    width:100%;

    max-width:400px;

    background:white;

    padding:35px;

    border-radius:10px;

    box-shadow:var(--shadow);

}


.login-card input{

    width:100%;

    padding:13px;

    margin-bottom:15px;

    border:1px solid #ccc;

    border-radius:6px;

}


.login-card button{

    width:100%;

    padding:13px;

    background:var(--primary);

    color:white;

    border:none;

    border-radius:6px;

    font-size:15px;

}


.login-card button:hover{

    background:var(--primary-dark);

}


/* =====================================================
   AUTH PAGES
===================================================== */

.auth-body{

    display:flex;

    justify-content:center;

    align-items:center;

    min-height:100vh;

    background:#f4f8ff;

}


.auth-card{

    width:100%;

    max-width:420px;

    background:white;

    padding:35px;

    border-radius:10px;

    box-shadow:var(--shadow);

}


.auth-card input{

    width:100%;

    padding:13px;

    margin-bottom:15px;

    border:1px solid #ccc;

    border-radius:6px;

}


.auth-card button{

    width:100%;

    padding:13px;

    background:var(--primary);

    color:white;

    border:none;

    border-radius:6px;

}


.auth-card button:hover{

    background:var(--primary-dark);

}


/* =====================================================
   SUCCESS / ERROR MESSAGE
===================================================== */

.success-message{

    background:#eaf9ef;

    color:#0f7a35;

    padding:12px;

    border-radius:6px;

    margin-bottom:15px;

}

.error-message{

    background:#ffe9e9;

    color:#b30000;

    padding:12px;

    border-radius:6px;

    margin-bottom:15px;

}


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

@media(max-width:768px){

    .form-row{

        grid-template-columns:1fr;

    }

    .form-container{

        width:95%;

        padding:20px;

    }

    .camera-options{

        flex-direction:column;

    }

}














/* =====================================================
   SECTION 4
   PORTAL • DASHBOARD • ADMIN PANEL
===================================================== */


/* =====================================================
   PORTAL BODY
===================================================== */

/*.portal-body{*/

/*    margin:0;*/

/*    background:#f4f8ff;*/

/*    color:#222;*/

/*}*/


/* =====================================================
   TOP BAR
===================================================== */

/*.portal-topbar{*/

/*    position:sticky;*/

/*    top:0;*/

/*    z-index:999;*/

/*    display:flex;*/

/*    justify-content:space-between;*/

/*    align-items:center;*/

/*    background:var(--primary);*/

/*    color:white;*/

/*    padding:12px 25px;*/

/*    box-shadow:0 2px 8px rgba(0,0,0,.15);*/

/*}*/

/*.portal-topbar h2{*/

/*    color:white;*/

/*    margin:0;*/

/*}*/

/*.portal-logo{*/

/*    height:50px;*/

/*}*/


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

.welcome-box{

    display:flex;

    align-items:center;

    gap:10px;

    font-weight:600;

}

.portal-avatar{

    width:55px;

    height:55px;

    border-radius:50%;

    object-fit:cover;

    border:3px solid white;

}


/* =====================================================
   MAIN LAYOUT
===================================================== */

.portal-container{

    display:flex;

    min-height:calc(100vh - 70px);

}


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

.portal-sidebar{

    width:240px;

    background:#1e293b;

    padding:20px;

}

.portal-sidebar h3{

    color:white;

    margin-bottom:20px;

    text-align:center;

}

.portal-sidebar a{

    display:block;

    color:white;

    padding:12px 15px;

    margin-bottom:8px;

    border-radius:6px;

    transition:.25s;

}

.portal-sidebar a:hover{

    background:var(--primary);

    padding-left:22px;

}


/* =====================================================
   CONTENT AREA
===================================================== */

.portal-content{

    flex:1;

    padding:30px;

}

.portal-content-full{

    padding:40px;

}


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

.dashboard-title{

    margin-bottom:25px;

}


/* =====================================================
   ANNOUNCEMENT BAR
===================================================== */

.announcement-bar{

    background:linear-gradient(

    90deg,

    var(--primary),

    var(--secondary)

    );

    color:white;

    overflow:hidden;

    white-space:nowrap;

    border-radius:6px;

    margin-bottom:25px;

}

.announcement-text{

    display:inline-block;

    padding:12px 0;

    animation:scrollText 18s linear infinite;

}

@keyframes scrollText{

    from{

        transform:translateX(100%);

    }

    to{

        transform:translateX(-100%);

    }

}


/* =====================================================
   DASHBOARD GRID
===================================================== */

.dashboard-grid{

    display:grid;

    grid-template-columns:

    repeat(auto-fit,minmax(260px,1fr));

    gap:20px;

}


/* =====================================================
   STATISTICS
===================================================== */

.stats-grid{

    display:grid;

    grid-template-columns:

    repeat(auto-fit,minmax(220px,1fr));

    gap:20px;

}

.stat-card{

    text-align:center;

    transition:.25s;

}

.stat-card:hover{

    transform:translateY(-6px);

}

.stat-card h3{

    font-size:16px;

    color:#666;

}

.stat-card p{

    margin-top:12px;

    font-size:30px;

    font-weight:bold;

    color:var(--primary);

}


/* =====================================================
   SEARCH BAR
===================================================== */

.search-box{

    margin-bottom:20px;

}

.search-box input{

    width:100%;

    padding:13px;

    border:1px solid #ccc;

    border-radius:6px;

}


/* =====================================================
   ADMIN TABLES
===================================================== */

.table-responsive{

    overflow-x:auto;

}

table{

    min-width:850px;

}


/* =====================================================
   TABLE ACTION BUTTONS
===================================================== */

.action-btn{

    display:inline-block;

    padding:8px 14px;

    border-radius:5px;

    color:white;

    font-size:13px;

    margin:2px;

}

.view-btn{

    background:#2563eb;

}

.edit-btn{

    background:#0284c7;

}

.approve-btn{

    background:#16a34a;

}

.reject-btn{

    background:#dc2626;

}

.delete-btn{

    background:#7f1d1d;

}

.action-btn:hover{

    opacity:.9;

}


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

.status-approved{

    color:#15803d;

    font-weight:bold;

}

.status-pending{

    color:#ca8a04;

    font-weight:bold;

}

.status-rejected{

    color:#dc2626;

    font-weight:bold;

}


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

.profile-card{

    display:flex;

    align-items:center;

    gap:25px;

    background:white;

    padding:25px;

    border-radius:10px;

    box-shadow:0 4px 15px rgba(0,0,0,.08);

}

.profile-card img{

    width:120px;

    height:120px;

    object-fit:cover;

    border-radius:10px;

}


/* =====================================================
   QUICK ACTIONS
===================================================== */

.quick-actions{

    display:grid;

    grid-template-columns:

    repeat(auto-fit,minmax(200px,1fr));

    gap:20px;

}

.quick-actions a{

    display:block;

    text-align:center;

    background:white;

    padding:25px;

    border-radius:10px;

    color:var(--primary);

    font-weight:bold;

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

    transition:.25s;

}

.quick-actions a:hover{

    transform:translateY(-5px);

}


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

@media(max-width:900px){

    .portal-container{

        flex-direction:column;

    }

    .portal-sidebar{

        width:100%;

    }

    .portal-content{

        padding:20px;

    }

}

























/* =====================================================
   SECTION 5
   FOOTER • PAGE BANNER • UTILITIES • RESPONSIVE
   (Final Section)
===================================================== */


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

.footer{

    background:#081f4b;

    color:white;

    display:flex;

    justify-content:space-between;

    flex-wrap:wrap;

    gap:30px;

    padding:40px;

}

.footer h3{

    color:white;

    margin-bottom:15px;

}

.footer p{

    line-height:1.8;

}

.footer a{

    color:#b9d8ff;

    display:block;

    margin-bottom:8px;

}

.footer a:hover{

    color:white;

}


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

.page-banner{

    position:relative;

    width:100%;

    height:300px;

    overflow:hidden;

}

.page-banner img{

    position:absolute;

    width:100%;

    height:300px;

    object-fit:cover;

    opacity:0;

    transition:opacity .8s ease;

}

.page-banner img.active{

    opacity:1;

}

.banner-overlay{

    position:absolute;

    inset:0;

    background:rgba(0,0,0,.45);

}

.banner-title{

    position:absolute;

    bottom:35px;

    left:50px;

    color:white;

    font-size:34px;

    font-weight:bold;

}


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

.page-section{

    margin-bottom:45px;

}

.page-section img{

    width:100%;

    border-radius:8px;

    margin-top:15px;

}


/* =====================================================
   COMMON UTILITIES
===================================================== */

.text-center{

    text-align:center;

}

.text-left{

    text-align:left;

}

.text-right{

    text-align:right;

}

.mt-10{

    margin-top:10px;

}

.mt-20{

    margin-top:20px;

}

.mt-30{

    margin-top:30px;

}

.mb-10{

    margin-bottom:10px;

}

.mb-20{

    margin-bottom:20px;

}

.mb-30{

    margin-bottom:30px;

}

.hidden{

    display:none;

}


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

@media(max-width:900px){

    .footer{

        flex-direction:column;

        text-align:center;

    }

    .banner-title{

        left:20px;

        right:20px;

        font-size:26px;

    }

}

@media(max-width:768px){

    .page-banner{

        height:220px;

    }

    .page-banner img{

        height:220px;

    }

    .banner-overlay{

        height:220px;

    }

}

@media(max-width:500px){

    .form-container{

        width:96%;

        padding:18px;

    }

    .footer{

        padding:25px;

    }

    h1{

        font-size:28px;

    }

    h2{

        font-size:24px;

    }

    h3{

        font-size:20px;

    }

}


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

@media print{

    body{

        background:white !important;

    }

    .ghisa-header,
    .footer,
    .portal-sidebar,
    .portal-topbar{

        display:none;

    }

    .portal-content,
    .page-container,
    .form-container{

        width:100%;

        margin:0;

        padding:0;

        box-shadow:none;

        background:white;

    }

}

.sidebar-title{
    color:#ffffff;
    font-size:18px;
    font-weight:700;
    text-align:center;
    margin:0 0 20px 0;
    padding-bottom:12px;
    border-bottom:1px solid rgba(255,255,255,.25);
    letter-spacing:.5px;
}







/* ===========================================
   REGISTRATION HEADER
=========================================== */

.register-header{

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:15px;

    margin-bottom:25px;

}

.header-logo,
.header-passport{

    width:80px;

    min-width:80px;

    display:flex;

    justify-content:center;

    align-items:center;

}

.register-logo,
.passport-preview{

    width:80px;

    height:80px;

    border-radius:8px;

    object-fit:cover;

    border:2px solid #d9d9d9;

    background:#fff;

}

.register-title{

    flex:1;

    text-align:center;

    padding:0 10px;

}

.register-title h2{

    margin:0;

    color:#0b3d91;

    font-size:28px;

}

.register-title p{

    margin:6px 0 2px;

    font-size:15px;

    font-weight:600;

}

.register-title small{

    color:#666;

    font-size:13px;

}

@media (max-width:768px){

    .header-logo,
    .header-passport{

        width:65px;

        min-width:65px;

    }

    .register-logo,
    .passport-preview{

        width:65px;

        height:65px;

    }

    .register-title h2{

        font-size:20px;

    }

    .register-title p{

        font-size:13px;

    }

}


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

.president-section{

    text-align:center;

}

.president-photo{

    width:220px;

    height:220px;

    object-fit:cover;

    border-radius:50%;

    border:6px solid #0b3d91;

    margin:20px auto;

    display:block;

    box-shadow:0 8px 20px rgba(0,0,0,.15);

}

.president-name{

    color:#0b3d91;

    margin-bottom:20px;

    font-size:28px;

}

.president-section .appreciation-box{

    text-align:justify;

}

@media(max-width:768px){

    .president-photo{

        width:170px;

        height:170px;

    }

    .president-name{

        font-size:22px;

    }

}

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

.contact-hero{

background:linear-gradient(135deg,#0b3d91,#1b5fd1);

padding:80px 10%;

text-align:center;

color:#fff;

}

.contact-hero h1{

font-size:42px;

margin-bottom:20px;

}

.contact-hero p{

max-width:700px;

margin:auto;

font-size:18px;

line-height:1.8;

}

.contact-grid{

display:grid;

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

gap:25px;

margin:50px 0;

}

.contact-card{

background:#fff;

padding:30px;

border-radius:15px;

box-shadow:0 8px 20px rgba(0,0,0,.12);

text-alig
}

.contact-card h3{

color:#0b3d91;

margin-bottom:15px;

}

.contact-form-box{

background:#fff;

padding:35px;

border-radius:15px;

box-shadow:0 8px 20px rgba(0,0,0,.12);

margin-bottom:50px;

}

.contact-form-box h2{

text-align:center;

color:#0b3d91;

margin-bottom:25px;

}

.contact-form-box input,

.contact-form-box textarea{

width:100%;

padding:14px;

margin-bottom:18px;

border:1px solid #ccc;

border-radius:8px;

font-size:16px;

}

.contact-form-box button{

background:#0b3d91;

color:#fff;

padding:14px 35px;

border:none;

border-radius:8px;

cursor:pointer;

font-size:17px;

}

.contact-form-box button:hover{

background:#145fd4;

}

.social-box{

text-align:center;

padding:50px 20px;

background:#f5f7fb;

border-radius:15px;

}

.social-box h2{

color:#0b3d91;

margin-bottom:15px;

}

.social-box a{

display:inline-block;

margin:10px;

padding:12px 25px;

background:#0b3d91;

color:#fff;

text-decoration:none;

border-radius:30px;

transition:.3s;

}

.social-box a:hover{

background:#145fd4;

}



/*=====================================
CREATE PASSWORD PAGE
======================================*/

.password-wrapper{

min-height:100vh;

display:flex;

justify-content:center;

align-items:center;

padding:30px 20px;

background:linear-gradient(135deg,#0b3d91,#145fd4);

}

.password-box{

width:100%;

max-width:500px;

background:#fff;

padding:40px;

border-radius:20px;

box-shadow:0 15px 35px rgba(0,0,0,.2);

animation:fadeIn .6s;

}

.password-icon{

width:80px;

height:80px;

margin:auto;

background:#e8f0ff;

border-radius:50%;

display:flex;

align-items:center;

justify-content:center;

font-size:38px;

margin-bottom:20px;

}

.password-box h2{

text-align:center;

color:#0b3d91;

margin-bottom:10px;

}

.subtitle{

text-align:center;

color:#666;

line-height:1.7;

margin-bottom:30px;

}

.password-box label{

display:block;

font-weight:bold;

margin:15px 0 8px;

color:#333;

}

.password-box input{

width:100%;

padding:14px;

border:1px solid #ccc;

border-radius:8px;

font-size:16px;

box-sizing:border-box;

}

.password-box input:focus{

border-color:#0b3d91;

outline:none;

box-shadow:0 0 8px rgba(11,61,145,.2);

}

.password-box button{

width:100%;

margin-top:25px;

padding:15px;

font-size:17px;

}

.tips{

margin-top:25px;

background:#f5f7fb;

padding:15px;

border-radius:10px;

font-size:14px;

line-height:1.8;

color:#555;

}

.error-box{

background:#fdeaea;

color:#c62828;

padding:12px;

border-radius:8px;

margin-bottom:20px;

text-align:center;

}

@keyframes fadeIn{

from{

opacity:0;

transform:translateY(25px);

}

to{

opacity:1;

transform:translateY(0);

}

}

@media(max-width:768px){

.password-box{

padding:25px;

}

.password-box h2{

font-size:28px;

}

.subtitle{

font-size:15px;

}

}


/*.table-responsive{*/
/*    width:100%;*/
/*    overflow-x:auto;*/
/*    -webkit-overflow-scrolling:touch;*/
/*}*/

/*.portal-table{*/
/*    width:100%;*/
/*    min-width:850px;*/
/*    border-collapse:collapse;*/
/*}*/


/*.admin-content{*/
/*    flex:1;*/
/*    padding:25px;*/
/*    width:100%;*/
/*    box-sizing:border-box;*/
/*}*/


/*.page-header{*/
/*    display:flex;*/
/*    justify-content:space-between;*/
/*    align-items:center;*/
/*    flex-wrap:wrap;*/
/*    gap:15px;*/
/*    margin-bottom:25px;*/
/*}*/

/*.page-header h2{*/
/*    margin:0;*/
/*    color:#0b3d91;*/
/*    font-size:28px;*/
/*}*/

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

/*.page-header{*/
/*    flex-direction:column;*/
/*    align-items:flex-start;*/
/*}*/

/*}*/


/* =====================================================
   GHISA PORTAL SYSTEM
   (Add at the END of GhisaStyle.css)
===================================================== */


/* =====================================================
   PORTAL BODY
===================================================== */

.portal-body{

    background:#f4f7fc;

    font-family:"Segoe UI",Tahoma,sans-serif;

    color:#333;

}



/* =====================================================
   PORTAL HEADER
===================================================== */

.portal-topbar{

    width:100%;

    background:#0b3d91;

    color:#fff;

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:15px 25px;

    box-shadow:0 3px 12px rgba(0,0,0,.15);

    position:sticky;

    top:0;

    z-index:999;

}

.portal-left,
.portal-right{

    display:flex;

    align-items:center;

    gap:15px;

}

.portal-logo{

    width:50px;

    height:50px;

    border-radius:50%;

    object-fit:cover;

}

.portal-avatar{

    width:45px;

    height:45px;

    border-radius:50%;

    object-fit:cover;

    border:2px solid #fff;

}

.welcome-box{

    color:white;

    font-size:15px;

    font-weight:600;

}



/* =====================================================
   ANNOUNCEMENT BAR
===================================================== */

.announcement-bar{

    background:#062c6b;

    color:white;

    overflow:hidden;

    white-space:nowrap;

}

.announcement-text{

    display:inline-block;

    padding:12px 0;

    animation:announcementMove 20s linear infinite;

}

@keyframes announcementMove{

    from{

        transform:translateX(100%);

    }

    to{

        transform:translateX(-100%);

    }

}



/* =====================================================
   MAIN LAYOUT
===================================================== */

.portal-container{

    display:flex;

    min-height:calc(100vh - 70px);

}



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

.portal-sidebar{

    width:260px;

    background:#0b3d91;

    color:white;

    padding:25px 0;

    flex-shrink:0;

}

.sidebar-title{

    color:white;

    text-align:center;

    font-size:20px;

    margin-bottom:25px;

    padding-bottom:15px;

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

}

.portal-sidebar a{

    display:block;

    color:white;

    padding:14px 25px;

    font-weight:500;

    transition:.3s;

}

.portal-sidebar a:hover{

    background:#062c6b;

    padding-left:35px;

}



/* =====================================================
   MAIN CONTENT
===================================================== */

.portal-content{

    flex:1;

    padding:30px;

    overflow-x:auto;

}

.portal-content-full{

    max-width:1000px;

    margin:30px auto;

    background:white;

    padding:30px;

    border-radius:12px;

    box-shadow:0 5px 20px rgba(0,0,0,.08);

}



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

.dashboard-title{

    font-size:28px;

    margin-bottom:25px;

}



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

.dashboard-grid,
.stats-grid{

    display:grid;

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

    gap:20px;

}



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

.dashboard-card,
.stat-card{

    background:white;

    border-radius:10px;

    padding:25px;

    box-shadow:0 5px 15px rgba(0,0,0,.08);

    transition:.25s;

}

.dashboard-card:hover,
.stat-card:hover{

    transform:translateY(-5px);

}



/* =====================================================
   TABLE
===================================================== */

.portal-table{

    width:100%;

    border-collapse:collapse;

    background:white;

    border-radius:10px;

    overflow:hidden;

}

.portal-table th{

    background:#0b3d91;

    color:white;

    padding:14px;

}

.portal-table td{

    padding:12px;

    border-bottom:1px solid #eee;

}

.portal-table tr:hover{

    background:#f7fbff;

}



/* =====================================================
   BUTTONS
===================================================== */

.portal-btn{

    display:inline-block;

    background:#0b3d91;

    color:white;

    padding:10px 18px;

    border-radius:6px;

    text-decoration:none;

    transition:.3s;

    width:auto;

    margin:3px;

}

.portal-btn:hover{

    background:#062c6b;

}



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

.status-approved{

    background:#198754;

    color:white;

    padding:6px 12px;

    border-radius:20px;

    font-size:13px;

}

.status-pending{

    background:#ffc107;

    color:black;

    padding:6px 12px;

    border-radius:20px;

    font-size:13px;

}

.status-rejected{

    background:#dc3545;

    color:white;

    padding:6px 12px;

    border-radius:20px;

    font-size:13px;

}



/* =====================================================
   PASSPORT IMAGE
===================================================== */

.passport{

    width:60px;

    height:60px;

    border-radius:50%;

    object-fit:cover;

    border:2px solid #0b3d91;

}



/* =====================================================
   ACTION BUTTON GROUP
===================================================== */

.action-group{

    display:flex;

    flex-wrap:wrap;

    gap:8px;

}



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

@media(max-width:992px){

.portal-container{

    flex-direction:column;

}

.portal-sidebar{

    width:100%;

}

.portal-sidebar a{

    text-align:center;

}

.portal-content{

    padding:20px;

}

.portal-content-full{

    margin:15px;

    padding:20px;

}

}



@media(max-width:768px){

.portal-topbar{

    flex-direction:column;

    gap:12px;

    text-align:center;

}

.portal-left,
.portal-right{

    justify-content:center;

    flex-wrap:wrap;

}

.dashboard-grid,
.stats-grid{

    grid-template-columns:1fr;

}

.portal-table{

    min-width:700px;

}

.portal-btn{

    width:100%;

    text-align:center;

}

.dashboard-title{

    text-align:center;

    font-size:24px;

}

.sidebar-title{

    font-size:18px;

}

}



@media(max-width:480px){

.portal-content{

    padding:15px;

}

.portal-content-full{

    padding:15px;

}

.portal-avatar{

    width:40px;

    height:40px;

}

.portal-logo{

    width:45px;

    height:45px;

}

}

/* =====================================================
   GHISA PORTAL BUTTON SYSTEM
===================================================== */

.btn,
.action-btn{

    display:inline-block;

    padding:10px 18px;

    border:none;

    border-radius:6px;

    font-size:14px;

    font-weight:600;

    text-decoration:none;

    text-align:center;

    cursor:pointer;

    transition:.3s;

    margin:3px;
    color:blue;

}


/* Primary Button */

.btn-primary,
.primary,
.view-btn{

    background:#0b3d91;

    color:#fff;

}

.btn-primary:hover,
.primary:hover,
.view-btn:hover{

    background:#062c6b;

}


/* Success */

.btn-success,
.approve-btn{

    background:#198754;

    color:#fff;

}

.btn-success:hover,
.approve-btn:hover{

    background:#146c43;

}


/* Danger */

.btn-danger,
.reject-btn{

    background:#dc3545;

    color:#fff;

}

.btn-danger:hover,
.reject-btn:hover{

    background:#bb2d3b;

}


/* Warning */

.btn-warning{

    background:#ffc107;

    color:#222;

}

.btn-warning:hover{

    background:#e0a800;

}


/* Secondary */

.btn-secondary{

    background:#6c757d;

    color:#fff;

}

.btn-secondary:hover{

    background:#5c636a;

}


/* Light */

.btn-light{

    background:#f8f9fa;

    color:#0b3d91;

    border:1px solid #ddd;

}

.btn-light:hover{

    background:#e9ecef;

}


/* Full Width */

.btn-block{

    display:block;

    width:100%;

}


/* Small */

.btn-sm{

    padding:6px 12px;

    font-size:13px;

}


/* Large */

.btn-lg{

    padding:14px 26px;

    font-size:16px;

}


/* Disabled */

.btn-disabled,
.btn:disabled{

    background:#bfc7d5;

    color:#fff;

    cursor:not-allowed;

    opacity:.7;

}


/* Action Group */

.action-group{

    display:flex;

    flex-wrap:wrap;

    gap:10px;

    align-items:center;

}

@media(max-width:768px){

.action-group{

    flex-direction:column;

}

.action-group .btn,
.action-group .action-btn{

    width:100%;

}

}




/*======================================================
GHISA MOBILE RESPONSIVE DESIGN
======================================================*/

@media screen and (max-width:768px){

/* Top Bar */

.portal-topbar{

    display:flex;
    flex-direction:column;
    align-items:center;
    text-align:center;
    padding:15px;

}

.portal-left,
.portal-right{

    width:100%;
    justify-content:center;
    margin:8px 0;

}

.portal-logo{

    width:60px;
    height:60px;

}

.portal-avatar{

    width:80px;
    height:80px;

}


/* Main Layout */

.portal-container{

    display:block;
    padding:10px;

}


/* Sidebar */

.portal-sidebar{

    width:100%;
    display:flex;
    overflow-x:auto;
    white-space:nowrap;
    margin-bottom:15px;
    border-radius:10px;

}

.portal-sidebar a{

    display:inline-block;
    min-width:150px;
    text-align:center;
    margin:5px;

}


/* Content */

.portal-content{

    width:100%;
    padding:0;

}


/* Dashboard Cards */

.dashboard-grid{

    display:grid;
    grid-template-columns:1fr;
    gap:15px;

}

.dashboard-card{

    width:100%;
    box-sizing:border-box;

}


/* Buttons */

.portal-btn,
.cta-btn{

    display:block;
    width:100%;
    text-align:center;
    margin-bottom:10px;

}


/* Tables */

.portal-table{

    display:block;
    overflow-x:auto;
    white-space:nowrap;

}

.portal-table table{

    min-width:600px;

}


/* Images */

img{

    max-width:100%;
    height:auto;

}


/* Text */

.dashboard-title{

    font-size:22px;
    text-align:center;

}

h2{

    font-size:22px;

}

h3{

    font-size:18px;

}

p{

    font-size:15px;
    line-height:1.6;

}

}


/*======================================================
SMALL PHONES
======================================================*/

@media screen and (max-width:480px){

.portal-logo{

    width:50px;
    height:50px;

}

.portal-avatar{

    width:70px;
    height:70px;

}

.dashboard-title{

    font-size:20px;

}

.portal-sidebar a{

    min-width:130px;
    font-size:14px;

}

.portal-btn,
.cta-btn{

    font-size:15px;
    padding:12px;

}

}



/*======================================================
MODERN DASHBOARD DESIGN
======================================================*/

.dashboard-grid{

    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
    gap:20px;
    margin-top:20px;

}

.dashboard-card{

    background:#ffffff;
    border-radius:15px;
    padding:20px;
    box-shadow:0 3px 12px rgba(0,0,0,.08);
    border:1px solid #e5e5e5;
    transition:.3s ease;

}

.dashboard-card:hover{

    transform:translateY(-3px);
    box-shadow:0 8px 22px rgba(0,0,0,.12);

}

.dashboard-card h3{

    margin:0 0 15px;
    color:#0b3d91;
    font-size:20px;
    border-bottom:2px solid #f1f1f1;
    padding-bottom:10px;

}

.dashboard-card p{

    margin:12px 0;
    color:#444;
    line-height:1.7;

}

.dashboard-title{

    color:#0b3d91;
    font-size:28px;
    font-weight:bold;
    margin-bottom:20px;

}


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

.status-badge{

    display:inline-block;
    padding:6px 14px;
    border-radius:30px;
    font-size:13px;
    font-weight:bold;
    color:#fff;

}

.status-badge.verified{

    background:#28a745;

}

.status-badge.pending{

    background:#f39c12;

}

.status-badge.not-verified{

    background:#dc3545;

}


/*======================================================
PORTAL BUTTONS
======================================================*/

.portal-btn{

    display:inline-block;
    background:#0b3d91;
    color:#fff;
    padding:10px 18px;
    border-radius:8px;
    text-decoration:none;
    transition:.3s;

}

.portal-btn:hover{

    background:#072b68;

}



/*=========================================
TOP NOTIFICATION
=========================================*/

.top-success-message{

width:100%;

background:#d4edda;

color:#155724;

padding:15px;

text-align:center;

font-weight:bold;

border-bottom:3px solid #28a745;

animation:fadeDown .5s ease;

}

.top-error-message{

width:100%;

background:#f8d7da;

color:#721c24;

padding:15px;

text-align:center;

font-weight:bold;

border-bottom:3px solid #dc3545;

animation:fadeDown .5s ease;

}

@keyframes fadeDown{

from{

opacity:0;

transform:translateY(-20px);

}

to{

opacity:1;

transform:translateY(0);

}

}


/*=====================================
APPLICANT PROFILE
=====================================*/

.page-subtitle{

    color:#666;
    margin-top:5px;
    font-size:14px;

}

.applicant-profile{

    display:flex;

    gap:30px;

    align-items:flex-start;

    flex-wrap:wrap;

}

/*.profile-photo{*/

/*    flex:0 0 100px;*/

/*}*/

/*.profile-photo img{*/

/*    width:100px;*/

/*    height:125px;*/

/*    object-fit:cover;*/

/*    border-radius:8px;*/

/*    border:3px solid #0b3d91;*/

/*}*/

.profile-details{

    flex:1;

}

.profile-details h2{

    margin-bottom:10px;

    color:#0b3d91;

}

.profile-grid{

    display:grid;

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

    gap:18px;

    margin-top:20px;

}

.info-item{

    background:#f8f9fc;

    border-left:4px solid #0b3d91;

    padding:12px 15px;

    border-radius:8px;

}

.info-item label{

    display:block;

    font-size:12px;

    color:#666;

    margin-bottom:5px;

    font-weight:bold;

}

.info-item span{

    font-size:15px;

    color:#222;

    word-break:break-word;

}


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

.section-title{

    margin-bottom:20px;

    color:#0b3d91;

    font-size:20px;

    font-weight:600;

    padding-bottom:10px;

    border-bottom:2px solid #eef2f7;

}

/*=====================================
COMMON INFO GRID
=====================================*/

.info-grid{

    display:grid;

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

    gap:18px;

}

/* Hover Effect */

.info-item{

    transition:.25s;

}

.info-item:hover{

    transform:translateY(-2px);

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

}



/*=====================================
DOCUMENTS
=====================================*/

.document-grid{

    display:grid;

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

    gap:20px;

    margin-bottom:20px;

}

.document-card{

    background:#fafafa;

    border:1px solid #e8e8e8;

    border-radius:10px;

    padding:20px;

}

.document-card h4{

    margin-bottom:15px;

    color:#0b3d91;

}

.document-preview{

    width:150px;

    height:180px;

    object-fit:cover;

    border-radius:8px;

    border:3px solid #ddd;

}

.empty-text{

    color:#888;

    font-style:italic;

}

/*=====================================
AMBITION
=====================================*/

.ambition-box{

    background:#f8f9fc;

    padding:20px;

    border-left:5px solid #0b3d91;

    border-radius:8px;

    line-height:1.8;

}

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

.action-group{

    display:flex;

    gap:15px;

    flex-wrap:wrap;

}
.success-box{

background:#d4edda;
color:#155724;
padding:15px;
border-radius:8px;
margin-bottom:20px;

}

.error-box{

background:#f8d7da;
color:#721c24;
padding:15px;
border-radius:8px;
margin-bottom:20px;

}