/* ==========================================================
   PROJECT 005 — AWARDS & HONOURS
========================================================== */

*{
    box-sizing:border-box;
}

body{
    margin:0;
    font-family:Arial, sans-serif;
    background:#f5f7fb;
    color:#333333;
}


/* ==========================================================
   AWARDS & HONOURS — HEADER
========================================================== */

.awards-header{
    width:100%;
    background:#0b2d6b;
    padding:55px 20px;
    text-align:center;
}

.awards-header-container{
    max-width:1000px;
    margin:0 auto;
}

.awards-header h1{
    color:#ffffff;
    font-size:38px;
    line-height:1.3;
    margin:0 0 10px;
}

.awards-header h2{
    color:#f4c430;
    font-size:20px;
    margin:0 0 20px;
}

.awards-header p{
    color:#ffffff;
    font-size:16px;
    line-height:1.8;
    max-width:850px;
    margin:0 auto;
}

/* ==========================================================
   FEATURED AWARD & HONOUR
========================================================== */

.featured-award{
    width:100%;
    padding:50px 20px;
    text-align:center;
}

.featured-award-container{
    max-width:1000px;
    margin:0 auto;
    text-align:center;
}

.featured-award h2{
    color:#0b2d6b;
    margin-bottom:20px;
}

.featured-award h3{
    color:#d97706;
    margin-bottom:10px;
}

.featured-award h4{
    color:#0b2d6b;
    margin-bottom:15px;
}

.featured-award-event{
    line-height:1.6;
    margin-bottom:25px;
}

.featured-award-image{
    display:block;
    width:100%;
    max-width:500px;
    height:auto;
    margin:0 auto 25px;
    border-radius:12px;
}

.featured-award-summary{
    max-width:800px;
    margin:0 auto;
    line-height:1.8;
    text-align:center;
}
/* ==========================================================
   AWARD & HONOUR RECORD
========================================================== */

.award-record{
    width:100%;
    padding:50px 20px;
    background:#ffffff;
}

.award-record-container{
    max-width:1000px;
    margin:0 auto;
    padding:40px;
    background:#ffffff;
    border-radius:12px;
    box-shadow:0 4px 18px rgba(0,0,0,0.08);
    text-align:center;
}

.award-record-container > h2{
    color:#d97706;
    font-size:30px;
    margin:0 0 20px;
}

.award-record-container > h3{
    color:#0b2d6b;
    font-size:24px;
    margin:0 0 12px;
}

.award-authority{
    color:#0b2d6b;
    font-weight:bold;
    font-size:17px;
    margin:0 0 12px;
}

.award-event{
    line-height:1.7;
    margin:0 0 30px;
}


/* ==========================================================
   AWARD & HONOUR DETAILS
========================================================== */

.award-details{
    max-width:900px;
    margin:35px auto 0;
    padding:30px;
    background:#f8faff;
    border:1px solid #d9e2f2;
    border-radius:8px;
}

.award-details h3{
    color:#0b2d6b;
    font-size:22px;
    margin:0 0 25px;
}

.award-details table{
    width:100%;
    border-collapse:collapse;
    background:#ffffff;
    border-radius:8px;
    overflow:hidden;
    box-shadow:0 2px 10px rgba(0,0,0,0.06);
}

.award-details th,
.award-details td{
    padding:14px 18px;
    border-bottom:1px solid #e5e7eb;
    text-align:center;
}

.award-details th{
    width:35%;
    color:#0b2d6b;
    background:#f1f5fb;
    font-weight:bold;
}

.award-details td{
    color:#333333;
}

.award-details tr:last-child th,
.award-details tr:last-child td{
    border-bottom:none;
}
.award-details h3{
    text-align:center;
}
/* ==========================================================
   OFFICIAL NARRATION
========================================================== */

.award-narration{
    margin-top:40px;
    padding:35px;
    background:#f8faff;
    border:1px solid #d9e2f2;
    border-radius:10px;
    text-align:left;
}

.award-narration h3{
    color:#0b2d6b;
    font-size:24px;
    text-align:center;
    margin:0 0 25px;
}

.award-narration p{
    color:#333333;
    font-size:16px;
    line-height:1.9;
    margin:0 0 20px;
}

.award-narration p:last-of-type{
    margin-bottom:0;
}

/* ==========================================================
   SPECIAL ACKNOWLEDGEMENT
========================================================== */

.special-acknowledgement{
    margin-top:30px;
    padding:25px 30px;
    background:#fffaf0;
    border-left:5px solid #d97706;
    border-radius:8px;
}

.special-acknowledgement h4{
    color:#0b2d6b;
    font-size:20px;
    text-align:center;
    margin:0 0 15px;
}

.special-acknowledgement p{
    color:#333333;
    line-height:1.9;
    margin:0;
    text-align:center;
}
/* ==========================================================
   PAGE SIGNATURE
========================================================== */

.page-signature{
    max-width:1000px;
    margin:45px auto 35px;
    padding:30px 20px;
    text-align:center;
    border-top:1px solid #d9e2f2;
}

.signature-english{
    color:#0b2d6b;
    font-family:Georgia, "Times New Roman", serif;
    font-size:22px;
    font-weight:bold;
    font-style:italic;
    letter-spacing:1px;
    margin-bottom:10px;
}

.signature-arabic{
    color:#0b2d6b;
    font-family:"Traditional Arabic", "Noto Naskh Arabic", Tahoma, Arial, sans-serif;
    font-size:30px;
    font-weight:bold;
    line-height:1.8;
    letter-spacing:0;
}
/* ==========================================================
   PERSONAL REFLECTION
========================================================== */

.award-reflection{
    max-width:850px;
    margin:30px auto 0;
    padding:28px 35px;
    background:#f7f9fc;
    border-left:5px solid #0b2d6b;
    border-radius:8px;
    text-align:center;
}

.award-reflection h4{
    color:#0b2d6b;
    font-size:20px;
    margin:0 0 18px;
}

.award-reflection p{
    font-family:Georgia, "Times New Roman", serif;
    font-size:17px;
    font-style:italic;
    line-height:1.9;
    color:#444444;
    margin:0;
}

.award-reflection .reflection-author{
    margin-top:15px;
    color:#d97706;
    font-weight:bold;
    font-style:normal;
    font-size:16px;
}
/* ==========================================================
   AWARD 003 - TWO IMAGE DISPLAY
========================================================== */

.award-003-images{
    display:flex;
    justify-content:center;
    align-items:flex-start;
    gap:20px;
    max-width:900px;
    margin:25px auto;
}

.award-003-images .featured-award-image{
    width:48%;
    max-width:420px;
    height:auto;
    margin:0;
    object-fit:contain;
}

@media (max-width:768px){

    .award-003-images{
        flex-direction:column;
        align-items:center;
    }

    .award-003-images .featured-award-image{
        width:100%;
        max-width:500px;
    }

}
/* ==========================================================
   AWARDS STICKY NAVIGATION
========================================================== */

.awards-sticky-nav{
    position:sticky;
    top:0;
    z-index:1000;

    display:flex;
    justify-content:center;
    align-items:center;
    gap:22px;

    padding:13px 20px;

    background:#0b2d6b;
    box-shadow:0 3px 10px rgba(0,0,0,0.15);
}

.awards-sticky-nav a{
    color:#ffffff;
    text-decoration:none;
    font-size:14px;
    font-weight:bold;
    padding:7px 12px;
    border-radius:5px;
    transition:0.3s;
}

.awards-sticky-nav a:hover{
    background:#ffffff;
    color:#0b2d6b;
}

.awards-nav-title{
    color:#ffffff;
    font-family:Georgia, "Times New Roman", serif;
    font-size:17px;
    font-weight:bold;
}

/* ==========================================================
   AWARDS DROPDOWN NAVIGATION
========================================================== */

.awards-dropdown{
    position:relative;
    display:inline-block;
}

.awards-dropbtn{
    background:transparent;
    color:#ffffff;
    border:1px solid rgba(255,255,255,0.5);
    padding:7px 14px;
    border-radius:5px;
    font-size:14px;
    font-weight:bold;
    cursor:pointer;
}

.awards-dropbtn:hover{
    background:#ffffff;
    color:#0b2d6b;
}

.awards-dropdown-content{
    display:none;
    position:absolute;
    top:100%;
    left:50%;
    transform:translateX(-50%);
    min-width:340px;
    background:#ffffff;
    border-radius:6px;
    box-shadow:0 8px 20px rgba(0,0,0,0.18);
    overflow:hidden;
    z-index:2000;
}

.awards-dropdown-content a{
    display:block;
    color:#0b2d6b;
    padding:12px 16px;
    text-decoration:none;
    font-size:13px;
    font-weight:bold;
    text-align:left;
    white-space:nowrap;
}

.awards-dropdown-content a:hover{
    background:#f1f5fb;
    color:#d97706;
}

.awards-dropdown:hover .awards-dropdown-content{
    display:block;
}

/* ==========================================================
   AWARDS & HONOURS — HEADER RESPONSIVE
========================================================== */

@media (max-width:700px){

    .awards-header{
        padding:40px 20px;
    }

    .awards-header h1{
        font-size:30px;
    }

    .awards-header h2{
        font-size:18px;
    }

    .awards-header p{
        font-size:15px;
    }

}
.volunteer-video-section{
    max-width:900px;
    margin:35px auto 0;
    text-align:center;
}

.volunteer-video-section video{
    width:100%;
    max-width:800px;
    height:auto;
    margin-top:20px;
    border-radius:8px;
    display:block;
    margin-left:auto;
    margin-right:auto;
}
.official-narration,
.special-acknowledgement{
    max-width:900px;
    margin:35px auto 0;
    padding:30px 35px;
    box-sizing:border-box;
}
.award-narration{
    max-width:900px;
    margin:35px auto 0;
    padding:30px 35px;
    box-sizing:border-box;
}
.instagram-video-btn{
    display:inline-block;
    margin-top:20px;
    padding:12px 24px;
    background:#0b2d6b;
    color:#ffffff;
    text-decoration:none;
    font-weight:bold;
    border-radius:6px;
    transition:0.3s;
}

.instagram-video-btn:hover{
    transform:translateY(-2px);
    opacity:0.9;
}
/* ================= AWARDS ARCHIVE DIRECTORY ================= */

.awards-directory{
    padding:35px 20px;
    background:#f4f7fc;
}

.awards-directory-container{
    max-width:1100px;
    margin:0 auto;
    text-align:center;
}

.awards-directory-container h2{
    color:#0b2d6b;
    margin-bottom:10px;
}

.awards-directory-intro{
    margin-bottom:30px;
    color:#555;
}

.awards-directory-grid{
    display:grid;
    grid-template-columns:repeat(5, 1fr);
    gap:15px;
}

.award-directory-card{
    display:block;
    padding:20px 12px;
    background:#ffffff;
    border-top:4px solid #0b2d6b;
    border-radius:8px;
    text-decoration:none;
    color:#0b2d6b;
    box-shadow:0 5px 15px rgba(0,0,0,0.08);
    transition:transform 0.3s ease, box-shadow 0.3s ease;
}

.award-directory-card:hover{
    transform:translateY(-4px);
    box-shadow:0 8px 20px rgba(0,0,0,0.14);
}

.directory-number{
    display:inline-block;
    padding:5px 14px;
    background:#0b2d6b;
    color:#ffffff;
    border-radius:20px;
    font-weight:bold;
    margin-bottom:12px;
}

.award-directory-card h3{
    margin:5px 0 12px;
    color:#0b2d6b;
}

.award-directory-card p{
    margin:0;
    color:#666;
}

/* Mobile */
@media (max-width:768px){
    .awards-directory-grid{
        grid-template-columns:1fr;
    }
}
/* ===== COMPACT AWARDS ARCHIVE CARDS ===== */

.award-directory-card{
    padding:14px 10px;
    min-height:95px;
    border-radius:12px;
}

.directory-number{
    padding:3px 10px;
    font-size:12px;
    margin-bottom:8px;
}

.award-directory-card h3{
    font-size:15px;
    line-height:1.2;
    margin:4px 0 7px;
}

.award-directory-card p{
    font-size:12px;
    line-height:1.25;
}
/* ===== EXTRA COMPACT ARCHIVE CARDS ===== */

.award-directory-card{
    padding:8px 6px;
    min-height:60px;
    border-radius:10px;
}

.directory-number{
    padding:2px 8px;
    font-size:10px;
    margin-bottom:4px;
}

.award-directory-card h3{
    font-size:12px;
    line-height:1.1;
    margin:3px 0 4px;
}

.award-directory-card p{
    font-size:10px;
    line-height:1.15;
}
/* ================= AWARD BOTTOM NAVIGATION ================= */

.award-bottom-navigation{
    max-width:900px;
    margin:35px auto;
    text-align:center;
}

.archive-return-btn{
    display:inline-block;
    padding:10px 20px;
    background:#0b2d6b;
    color:#ffffff;
    text-decoration:none;
    font-size:14px;
    font-weight:bold;
    border-radius:8px;
    transition:0.3s ease;
}

.archive-return-btn:hover{
    transform:translateY(-2px);
    opacity:0.9;
}
.award-prev-btn{
    display:inline-block;
    padding:10px 20px;
    background:#ffffff;
    color:#0b2d6b;
    text-decoration:none;
    font-size:14px;
    font-weight:bold;
    border:1px solid #0b2d6b;
    border-radius:8px;
    margin-right:12px;
    transition:0.3s ease;
}

.award-prev-btn:hover{
    background:#0b2d6b;
    color:#ffffff;
    transform:translateY(-2px);
}
.award-next-btn{
    display:inline-block;
    padding:10px 20px;
    background:#ffffff;
    color:#0b2d6b;
    text-decoration:none;
    font-size:14px;
    font-weight:bold;
    border:1px solid #0b2d6b;
    border-radius:8px;
    margin-left:12px;
    transition:0.3s ease;
}

.award-next-btn:hover{
    background:#0b2d6b;
    color:#ffffff;
    transform:translateY(-2px);
}
/* ==========================================================
   AWARDS NAVIGATION — TOP STICKY BAR
========================================================== */

html,
body{
    margin:0;
    padding:0;
}

.awards-sticky-nav{

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

    width:100%;

    margin:0;
    padding:10px 20px;

    display:flex;
    justify-content:center;
    align-items:center;
    gap:18px;

    box-sizing:border-box;

    background:#0b3475;

    box-shadow:0 2px 8px rgba(0,0,0,0.18);
}
/* ==========================================================
   FEATURED AWARD — PROFESSIONAL ARCHIVE PRESENTATION
========================================================== */

.featured-award{
    padding:38px 20px;
    background:#f5f7fb;
}

.featured-award-container{
    max-width:1050px;
    margin:0 auto;
    padding:36px 42px;

    display:grid;
    grid-template-columns:42% 58%;
    align-items:center;

    background:#ffffff;

    border-radius:12px;
    border:1px solid #e3e8ef;

    box-shadow:0 4px 16px rgba(0,0,0,0.07);

    box-sizing:border-box;
}


/* ================= IMAGE SIDE ================= */

.featured-award-image-wrap{
    padding-right:38px;
    border-right:2px solid #e3e8ef;
}

.featured-award-image-wrap .featured-award-image{
    display:block;

    width:100%;
    max-width:410px;
    height:auto;

    margin:0 auto;

    border-radius:7px;

    box-shadow:0 3px 10px rgba(0,0,0,0.12);
}


/* ================= CONTENT SIDE ================= */

.featured-award-content{
    padding-left:42px;

    text-align:left;
}


/* MAIN HEADING */

.featured-award-content h2{
    margin:0 0 10px;

    color:#0B3D91;

    font-size:25px;
    font-weight:800;

    line-height:1.25;
}


/* AWARD TITLE */

.featured-award-content h3{
    margin:0 0 16px;

    color:#d66a00;

    font-size:19px;
    font-weight:700;

    line-height:1.4;
}


/* AUTHORITY */

.featured-award-content h4{
    margin:0 0 16px;

    color:#123b7a;

    font-size:16px;
    font-weight:700;

    line-height:1.5;
}


/* EVENT */

.featured-award-content .featured-award-event{
    margin:0 0 20px;

    padding-bottom:18px;

    border-bottom:1px solid #e4e8ee;

    color:#444;

    font-size:15px;
    line-height:1.65;
}


/* NARRATION */

.featured-award-content .featured-award-summary{
    margin:0;

    max-width:560px;

    color:#333;

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

    text-align:left;
}


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

@media (max-width:700px){

    .featured-award{
        padding:25px 12px;
    }

    .featured-award-container{
        display:block;

        padding:24px 20px;
    }

    .featured-award-image-wrap{
        padding:0 0 25px;

        border-right:none;
        border-bottom:2px solid #e3e8ef;
    }

    .featured-award-image-wrap .featured-award-image{
        max-width:400px;
    }

    .featured-award-content{
        padding:25px 0 0;

        text-align:left;
    }

    .featured-award-content h2{
        font-size:22px;
    }

}
/* ==========================================================
   A-002 — PROFESSIONAL REVERSED AWARD PRESENTATION
========================================================== */

.award-002-feature{
    max-width:1050px;
    margin:0 auto 35px;
    padding:36px 42px;

    display:grid;
    grid-template-columns:58% 42%;
    align-items:center;

    background:#ffffff;

    border:1px solid #e3e8ef;
    border-radius:12px;

    box-shadow:0 4px 16px rgba(0,0,0,0.07);

    box-sizing:border-box;
}


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

.award-002-content{
    padding-right:42px;
    text-align:left;
}

.award-002-content h2{
    margin:0 0 10px;

    color:#0B3D91;

    font-size:25px;
    font-weight:800;
    line-height:1.25;
}

.award-002-content h3{
    margin:0 0 12px;

    color:#d66a00;

    font-size:19px;
    font-weight:700;
    line-height:1.4;
}

.award-002-content .award-authority{
    margin:0 0 15px;

    color:#123b7a;

    font-size:16px;
    font-weight:700;
}

.award-002-content .award-event{
    margin:0 0 15px;

    color:#444;

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


/* DATE + LOCATION */

.award-002-meta{
    display:flex;
    gap:45px;

    margin:18px 0;
    padding:15px 0;

    border-top:1px solid #e4e8ee;
    border-bottom:1px solid #e4e8ee;
}

.award-002-meta p{
    margin:0;

    font-size:14px;
    line-height:1.6;
}

.award-002-meta strong{
    color:#0B3D91;
}


/* SUMMARY */

.award-002-content .award-summary{
    margin:0;

    color:#333;

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

    text-align:left;
}


/* ================= IMAGE RIGHT ================= */

.award-002-image-wrap{
    padding-left:38px;

    border-left:2px solid #e3e8ef;
}

.award-002-image{
    display:block;

    width:100%;
    max-width:390px;
    height:auto;

    margin:0 auto;

    border-radius:7px;

    box-shadow:0 3px 10px rgba(0,0,0,0.12);
}


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

@media (max-width:700px){

    .award-002-feature{
        display:block;

        padding:24px 20px;
    }

    .award-002-content{
        padding:0 0 25px;
    }

    .award-002-image-wrap{
        padding:25px 0 0;

        border-left:none;
        border-top:2px solid #e3e8ef;
    }

    .award-002-meta{
        display:block;
    }

    .award-002-meta p + p{
        margin-top:10px;
    }

    .award-002-content h2{
        font-size:22px;
    }

}/* ==========================================================
   A-003 — PROFESSIONAL DUAL RECOGNITION PRESENTATION
========================================================== */

#award-003 .award-record-container{
    max-width:1050px;
    margin:35px auto;
    padding:36px 42px;

    background:#ffffff;

    border:1px solid #e3e8ef;
    border-radius:12px;

    box-shadow:0 4px 16px rgba(0,0,0,0.07);

    box-sizing:border-box;
}


/* ================= HEADING ================= */

#award-003 .award-record-container > h2{
    margin:0 0 10px;

    text-align:center;

    color:#0B3D91;

    font-size:25px;
    font-weight:800;
}


#award-003 .award-record-container > h3{
    margin:0 0 12px;

    text-align:center;

    color:#d66a00;

    font-size:19px;
    font-weight:700;
}


/* ================= AUTHORITY ================= */

#award-003 .award-authority{
    margin:0 0 18px;

    text-align:center;

    color:#123b7a;

    font-size:16px;
    font-weight:700;
}


/* ================= EVENT INFORMATION ================= */

#award-003 .award-event{
    max-width:700px;

    margin:0 auto 25px;
    padding-bottom:22px;

    text-align:center;

    color:#444;

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

    border-bottom:1px solid #e4e8ee;
}


/* ==========================================================
   TWO RECOGNITION IMAGES
========================================================== */

#award-003 .award-003-images{
    max-width:820px;

    margin:0 auto 28px;

    display:grid;
    grid-template-columns:1fr 1fr;

    gap:22px;

    align-items:center;
}


#award-003 .award-003-images img{
    display:block;

    width:100%;
    height:auto;

    margin:0;

    border-radius:8px;

    box-shadow:0 3px 12px rgba(0,0,0,0.12);
}


/* ================= INTRODUCTION ================= */

#award-003 .award-summary{
    max-width:850px;

    margin:0 auto;

    padding-top:24px;

    border-top:1px solid #e4e8ee;

    text-align:left;

    color:#333;

    font-size:15px;
    line-height:1.8;
}


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

@media (max-width:700px){

    #award-003 .award-record-container{
        margin:25px 12px;
        padding:24px 20px;
    }

    #award-003 .award-003-images{
        grid-template-columns:1fr;

        max-width:430px;

        gap:18px;
    }

    #award-003 .award-record-container > h2{
        font-size:22px;
    }

    #award-003 .award-event{
        text-align:left;
    }

}