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

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

:root {
    --about-navy: #102d59;
    --about-blue: #17457d;
    --about-gold: #9b7600;
    --about-text: #26364a;
    --about-border: #d8dee7;
    --about-light: #f4f1f1;
    --about-background: #f6f7f9;
    --about-white: #ffffff;
    
}

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

.about-page {
    min-height: 100vh;
    background: var(--about-background);
    font-family: "Poppins", "Battambang", Arial, sans-serif;
}

/* ==================================================
   HERO BANNER
================================================== */

.about-hero {
    position: relative;
    min-height: 330px;

    display: flex;
    align-items: flex-end;

    overflow: hidden;

    background-image: url("../images/about-background.jpg");
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}

.about-hero-overlay {
    position: absolute;
    inset: 0;

    background: linear-gradient(
        to bottom,
        rgba(3, 24, 48, 0.08) 15%,
        rgba(3, 24, 48, 0.4) 55%,
        rgba(3, 24, 48, 0.94) 100%
    );
}

.about-hero-content {
    position: relative;
    z-index: 2;

    /* width: min(100%, 1180px); */
    margin: 0 auto;
    padding: 55px 60px 38px;

    color: var(--about-white);
}

.about-hero-label {
    display: inline-flex;

    margin-bottom: 13px;
    padding: 7px 15px;

    border-radius: 4px;
    background: var(--about-gold);
    color: var(--about-white);

    font-family: "Poppins", sans-serif;
    font-size: 12px;
    font-weight: 500;
}

.about-hero-content h1 {
    margin: 0 0 8px;

    color: var(--about-white);

    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(38px, 5vw, 55px);
    font-weight: 700;
    line-height: 1.2;
}

.about-hero-content p {
    max-width: 760px;
    margin: 0;

    color: rgba(255, 255, 255, 0.96);

    font-family: "Poppins", "Battambang", sans-serif;
    font-size: 15px;
    line-height: 1.8;
}

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

.about-container {
    width: min(calc(100% - 40px), 920px);
    margin: 45px auto 70px;
}

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

.about-tab-content {
    display: none;

    padding: 42px 48px;

    border: 1px solid var(--about-border);
    border-radius: 7px;

    background: var(--about-white);

    box-shadow: 0 7px 22px rgba(18, 43, 70, 0.05);

    animation: aboutFadeIn 0.35s ease;
}

.about-tab-content.active {
    display: block;
}

@keyframes aboutFadeIn {
    from {
        opacity: 0;
        transform: translateY(8px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

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

.about-content-heading {
    display: flex;
    align-items: center;
    gap: 14px;

    margin-bottom: 20px;
}

.about-heading-icon {
    display: grid;
    place-items: center;

    width: 38px;
    height: 38px;
    flex: 0 0 38px;

    border: 2px solid var(--about-navy);
    border-radius: 50%;

    color: var(--about-navy);

    font-size: 17px;
}

.about-content-heading h2 {
    margin: 0;

    color: #061e3b;

    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(26px, 4vw, 34px);
    font-weight: 700;
}

/* ==================================================
   QUOTE
================================================== */

.about-quote {
    margin: 0 0 26px;
    padding: 3px 0 3px 18px;

    border-left: 4px solid var(--about-gold);

    color: #27364a;

    font-family: "Battambang", sans-serif;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.9;
}

/* ==================================================
   DESCRIPTION
================================================== */

.about-description {
    color: var(--about-text);

    font-family: "Battambang", sans-serif;
    font-size: 15px;
    line-height: 2;

    text-align: justify;
}

.about-description p {
    margin: 0 0 18px;
}

.about-description p:last-child {
    margin-bottom: 0;
}

.about-description strong {
    color: var(--about-navy);
    font-weight: 700;
}

/* ==================================================
   CLEAN ABOUT SIDEBAR
================================================== */

/* លុបចន្លោះធំៗរវាង menu */
li:has(> a[href="#welcome"]),
li:has(> a[href="#introduction"]),
li:has(> a[href="#about-lmtc"]),
li:has(> a[href="#background"]) {
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
}

/* Menu */
a[href="#welcome"],
a[href="#introduction"],
a[href="#about-lmtc"],
a[href="#background"] {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;

    width: 100% !important;
    min-height: 42px !important;
    margin: 0 !important;
    padding: 10px 16px !important;

    border: 0 !important;
    border-left: 3px solid transparent !important;
    border-radius: 0 !important;

    background: #ffffff !important;
    color: #08254a !important;

    font-family: Georgia, "Times New Roman", serif !important;
    font-size: 13px !important;
    font-weight: 400 !important;
    line-height: 1.4 !important;

    text-decoration: none !important;
    box-shadow: none !important;
    transform: none !important;
}

/* លុបសញ្ញាព្រួញខាងឆ្វេង */
a[href="#welcome"] > :first-child,
a[href="#introduction"] > :first-child,
a[href="#about-lmtc"] > :first-child,
a[href="#background"] > :first-child {
    display: none !important;
}

/* Icon info មូលពណ៌មាស */
a[href="#welcome"] > :nth-child(2),
a[href="#introduction"] > :nth-child(2),
a[href="#about-lmtc"] > :nth-child(2),
a[href="#background"] > :nth-child(2) {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    width: 18px !important;
    height: 18px !important;
    min-width: 18px !important;

    margin: 0 !important;
    padding: 0 !important;

    border: 0 !important;
    border-radius: 50% !important;

    background: #9b7600 !important;
    color: #ffffff !important;

    font-size: 10px !important;
    line-height: 1 !important;

    box-shadow: none !important;
    transform: none !important;
}

/* កុំឱ្យ icon ខាងក្នុងបង្កើតប្រអប់មួយទៀត */
a[href="#welcome"] > :nth-child(2) i,
a[href="#introduction"] > :nth-child(2) i,
a[href="#about-lmtc"] > :nth-child(2) i,
a[href="#background"] > :nth-child(2) i {
    width: auto !important;
    height: auto !important;
    min-width: 0 !important;

    margin: 0 !important;
    padding: 0 !important;

    border: 0 !important;
    background: transparent !important;
    color: #ffffff !important;

    font-size: 9px !important;
    box-shadow: none !important;
}

/* Active */
a[href="#welcome"].active,
a[href="#introduction"].active,
a[href="#about-lmtc"].active,
a[href="#background"].active {
    border-left-color: #102b52 !important;
    border-radius: 5px !important;
    background: #f2f7fd  !important;
    color: #08254a !important;
}

/* Hover */
a[href="#welcome"]:hover,
a[href="#introduction"]:hover,
a[href="#about-lmtc"]:hover,
a[href="#background"]:hover {
    border-left-color: #102b52 !important;
    border-radius: 5px !important;
    background: #f2f7fd  !important;
    color: #08254a !important;
}

a[href="#welcome"].active::after,
a[href="#introduction"].active::after,
a[href="#about-lmtc"].active::after,
a[href="#background"].active::after {
    display: none !important;
    content: none !important;
}

/* ទំហំអក្សរ Sidebar */
a[href="#welcome"],
a[href="#introduction"],
a[href="#about-lmtc"],
a[href="#background"] {
    font-size: 16px !important;
}

/* =========================================
   Hero photo animation
========================================= */

.about-hero {
    position: relative !important;
    overflow: hidden !important;

    /* លុប background ចេញពី element មេ */
    background-image: none !important;
}

/* ដាក់រូបក្នុង layer ផ្សេងដើម្បី animate */
.about-hero::before {
    content: "" !important;

    position: absolute !important;
    inset: -15px !important;
    z-index: 0 !important;

    display: block !important;

    background-image: url("../images/about-background.jpg") !important;
    background-repeat: no-repeat !important;
    background-position: center 42% !important;
    background-size: cover !important;

    animation: aboutPhotoZoom 12s ease-in-out infinite alternate;
    will-change: transform;
}

/* Overlay នៅពីលើរូប */
.about-hero-overlay {
    position: absolute !important;
    inset: 0 !important;
    z-index: 1 !important;
}

/* អក្សរនៅពីលើ overlay */
.about-hero-content {
    position: relative !important;
    z-index: 2 !important;
}

/* Zoom យឺតៗ */
@keyframes aboutPhotoZoom {
    from {
        transform: scale(1);
    }

    to {
        transform: scale(1.08);
    }
}

/* បិទ animation សម្រាប់អ្នកប្រើដែលមិនចង់បានចលនា */
@media (prefers-reduced-motion: reduce) {
    .about-hero::before {
        animation: none !important;
    }
}


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

@media (max-width: 991px) {
    .about-hero {
        min-height: 290px;
    }

    .about-hero-content {
        padding: 45px 35px 32px;
    }

    .about-container {
        width: min(calc(100% - 30px), 920px);
        margin-top: 32px;
    }
}

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

@media (max-width: 767px) {
    .about-hero {
        min-height: 270px;
    }

    .about-hero-content {
        padding: 38px 22px 27px;
    }

    .about-hero-content h1 {
        font-size: 36px;
    }

    .about-hero-content p {
        font-size: 14px;
        line-height: 1.7;
    }

    .about-container {
        width: calc(100% - 24px);
        margin: 25px auto 45px;
    }

    .about-tab-content {
        padding: 28px 23px;
    }

    .about-content-heading {
        gap: 11px;
    }

    .about-heading-icon {
        width: 34px;
        height: 34px;
        flex-basis: 34px;

        font-size: 15px;
    }

    .about-content-heading h2 {
        font-size: 25px;
    }

    .about-description,
    .about-quote {
        font-size: 14px;
        line-height: 1.9;
    }
}

@media (max-width: 480px) {
    .about-hero {
        min-height: 250px;
    }

    .about-hero-content {
        padding: 32px 17px 23px;
    }

    .about-hero-content h1 {
        font-size: 31px;
    }

    .about-tab-content {
        padding: 23px 18px;
    }

    .about-description {
        text-align: left;
    }
}

/* =========================================
   Full hero ជាប់នឹង Sidebar
========================================= */

.has-page-sidebar {
    padding: 0 !important;
}

.has-page-sidebar .about-page {
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* រូបភាពពេញផ្នែកខាងស្ដាំ */
.about-hero {
    width: 100% !important;
    min-height: 520px !important;

    margin: 0 !important;
    padding: 0 !important;

    border: 0 !important;
    border-radius: 0 !important;

    background-image: url("../images/about-background.jpg");
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
}

/* ទុកចន្លោះតែអក្សរខាងក្នុង */
.about-hero-content {
    width: 100% !important;
    max-width: none !important;

    margin: 0 !important;
    padding: 60px 70px !important;
}

/* Content ខាងក្រោម */
.about-container {
    width: min(calc(100% - 80px), 1100px) !important;
    margin: 45px auto 70px !important;
}

/* Tablet */
@media (max-width: 991px) {
    .about-hero {
        min-height: 420px !important;
    }

    .about-hero-content {
        padding: 45px 35px !important;
    }

    .about-container {
        width: calc(100% - 40px) !important;
    }
}

/* Mobile */
@media (max-width: 767px) {
    .about-hero {
        min-height: 330px !important;
    }

    .about-hero-content {
        padding: 35px 22px !important;
    }

    .about-container {
        width: calc(100% - 24px) !important;
        margin-top: 25px !important;
    }
}

/* ធ្វើឱ្យ icon Sidebar ធំជាងមុន */
a[href="#welcome"] > :nth-child(2),
a[href="#introduction"] > :nth-child(2),
a[href="#about-lmtc"] > :nth-child(2),
a[href="#background"] > :nth-child(2) {
    width: 25px !important;
    height: 25px !important;
    min-width: 25px !important;
    flex: 0 0 25px !important;

    font-size: 12px !important;
}

/* ទំហំរូប icon ខាងក្នុង */
a[href="#welcome"] > :nth-child(2) i,
a[href="#introduction"] > :nth-child(2) i,
a[href="#about-lmtc"] > :nth-child(2) i,
a[href="#background"] > :nth-child(2) i {
    font-size: 12px !important;
}

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

#welcome {
    font-family: "Battambang", sans-serif;
}

/* Heading */
.welcome-heading {
    display: flex;
    align-items: center;
    gap: 15px;

    margin-bottom: 25px;
    padding-bottom: 18px;

    border-bottom: 1px solid #e3eaf3;
}

.welcome-heading-icon {
    display: grid;
    place-items: center;

    width: 48px;
    height: 48px;
    flex: 0 0 48px;

    border-radius: 12px;

    background: linear-gradient(145deg, #0d376b, #08254c);
    color: #ffffff;

    font-size: 20px;

    box-shadow: 0 7px 16px rgba(8, 37, 76, 0.18);
}

.welcome-heading span {
    display: block;
    margin-bottom: 3px;

    color: #a17a00;

    font-family: "Poppins", sans-serif;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.4px;
}

.welcome-heading h2 {
    margin: 0;

    color: #082b5c;

    font-family: "Poppins", "Battambang", sans-serif;
    font-size: clamp(25px, 3vw, 33px);
    font-weight: 700;
    line-height: 1.5;
}

/* Introduction */
.welcome-introduction {
    display: flex;
    align-items: flex-start;
    gap: 17px;

    margin-bottom: 28px;
    padding: 22px 24px;

    border: 1px solid #d7e5f5;
    border-left: 4px solid #3f78b8;
    border-radius: 8px;

    background: #eef6ff;
}

.welcome-introduction-icon {
    display: grid;
    place-items: center;

    width: 40px;
    height: 40px;
    flex: 0 0 40px;

    border-radius: 50%;

    background: #ffffff;
    color: #16477e;

    font-size: 17px;
}

.welcome-introduction p {
    margin: 0;

    color: #213a57;
    font-family: "Poppins", "Battambang", sans-serif;
    font-size: 15px;
    font-weight: 600;
    line-height: 2;
    text-align: justify;
}

/* Section title */
.welcome-section-title {
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: "Poppins", "Battambang", sans-serif;
    margin-bottom: 12px;
}

.welcome-section-title i {
    color: #a17a00;
    font-size: 17px;
}

.welcome-section-title h3 {
    margin: 0;

    color: #092d5c;

    font-family: "Poppins", "Battambang", sans-serif;
    font-size: 19px;
    font-weight: 700;
}

/* Normal text */
.welcome-text,
.welcome-government p,
.welcome-leadership p,
.welcome-slogan p {
    color: #34485f;

    font-size: 15px;
    line-height: 2;
    text-align: justify;
}

.welcome-text {
    margin: 0 0 22px;
}

.welcome-text strong,
.welcome-leadership strong {
    color: #9b7400;
    font-weight: 700;
}

/* Training levels */
.training-levels {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;

    margin: 22px 0 25px;
}

.training-level {
    min-height: 95px;
    padding: 16px 10px;

    border: 1px solid #dce5ef;
    border-radius: 8px;

    background: #ffffff;
    text-align: center;

    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease,
        border-color 0.25s ease;
}

.training-level:hover {
    transform: translateY(-4px);
    border-color: #89acd3;
    box-shadow: 0 8px 18px rgba(14, 48, 86, 0.1);
}

.training-level span,
.training-level i {
    display: block;

    margin-bottom: 6px;

    color: #0b3a70;

    font-family: "Poppins", sans-serif;
    font-size: 22px;
    font-weight: 700;
}

.training-level p {
    margin: 0;

    color: #5b6e83;

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

/* Quote */
.welcome-quote {
    position: relative;

    margin: 30px 0;
    padding: 27px 30px 25px 68px;

    border: 0;
    border-radius: 9px;

    background: linear-gradient(135deg, #0b376a, #10284b);
    color: #ffffff;

    overflow: hidden;
}

.welcome-quote::after {
    content: "“";

    position: absolute;
    right: 20px;
    bottom: -35px;

    color: rgba(255, 255, 255, 0.08);

    font-family: Georgia, serif;
    font-size: 140px;
    line-height: 1;
}

.welcome-quote-icon {
    position: absolute;
    top: 28px;
    left: 27px;

    color: #e1b62e;
    font-size: 24px;
}

.welcome-quote p {
    position: relative;
    z-index: 1;
    font-family: "Poppins", "Battambang", sans-serif;
    margin: 0;

    color: rgba(255, 255, 255, 0.95);

    font-size: 15px;
    font-weight: 600;
    line-height: 2;
    text-align: justify;
}

/* Government section */
.welcome-government {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 230px;
    gap: 25px;
    align-items: stretch;

    margin-top: 28px;
}

.welcome-government-content {
    padding: 25px;

    border: 1px solid #e0e6ee;
    border-radius: 9px;

    background: #ffffff;
}

.welcome-government-content p {
    margin: 0 0 14px;
}

.welcome-government-content p:last-child {
    margin-bottom: 0;
}

/* Statistic */
.welcome-statistic {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    padding: 24px 18px;

    border-radius: 9px;

    background: linear-gradient(145deg, #f3f7fc, #e8f1fb);
    text-align: center;
}

.welcome-statistic-icon {
    display: grid;
    place-items: center;

    width: 46px;
    height: 46px;

    margin-bottom: 12px;

    border-radius: 50%;

    background: #0d3b70;
    color: #ffffff;

    font-size: 18px;
}

.welcome-statistic strong {
    color: #0a3568;

    font-family: "Battambang", sans-serif;
    font-size: 29px;
    font-weight: 700;
    line-height: 1.4;
}

.welcome-statistic > span {
    color: #a17a00;
    font-size: 15px;
    font-weight: 700;
}

.welcome-statistic p {
    margin: 10px 0 0;

    color: #536b84;

    font-size: 12px;
    line-height: 1.7;
    text-align: center;
}

/* Leadership */
.welcome-leadership {
    display: flex;
    align-items: flex-start;
    gap: 14px;

    margin-top: 25px;
    padding: 20px 22px;

    border: 1px solid #ecdca5;
    border-radius: 8px;

    background: #fffaf0;
}

.welcome-leadership > i {
    margin-top: 7px;

    color: #a17a00;
    font-size: 18px;
}

.welcome-leadership p {
    margin: 0;
}

/* Slogan */
.welcome-slogan {
    margin-top: 27px;
    padding: 27px;

    border-radius: 10px;

    background: #f5f8fc;
    text-align: center;
}

.welcome-slogan-label {
    display: inline-block;

    margin-bottom: 17px;
    padding: 5px 18px;

    border-radius: 30px;

    background: #0d376b;
    color: #ffffff;

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

.welcome-slogan-items {
    display: flex;
    justify-content: center;
    gap: 13px;
    flex-wrap: wrap;

    margin-bottom: 18px;
}

.welcome-slogan-items div {
    display: inline-flex;
    align-items: center;
    gap: 8px;

    padding: 10px 17px;

    border: 1px solid #d5e1ef;
    border-radius: 6px;

    background: #ffffff;
    color: #113962;

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

.welcome-slogan-items i {
    color: #a17a00;
}

.welcome-slogan p {
    max-width: 760px;
    margin: 0 auto;

    text-align: center;
}

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

@media (max-width: 767px) {
    .welcome-heading {
        align-items: flex-start;
    }

    .welcome-heading-icon {
        width: 42px;
        height: 42px;
        flex-basis: 42px;

        font-size: 17px;
    }

    .welcome-heading h2 {
        font-size: 23px;
    }

    .welcome-introduction {
        padding: 18px;
    }

    .welcome-introduction-icon {
        display: none;
    }

    .welcome-introduction p,
    .welcome-text,
    .welcome-quote p,
    .welcome-government p,
    .welcome-leadership p {
        font-size: 14px;
        line-height: 1.9;
        text-align: left;
    }

    .training-levels {
        grid-template-columns: repeat(2, 1fr);
    }

    .welcome-quote {
        padding: 24px 21px;
    }

    .welcome-quote-icon {
        position: static;
        margin-bottom: 10px;
    }

    .welcome-government {
        grid-template-columns: 1fr;
    }

    .welcome-statistic {
        min-height: 220px;
    }

    .welcome-leadership {
        padding: 18px;
    }

    .welcome-slogan {
        padding: 22px 17px;
    }

    .welcome-slogan-items {
        flex-direction: column;
    }

    .welcome-slogan-items div {
        justify-content: center;
    }
}

.training-level > i {
    display: block !important;

    width: auto !important;
    height: auto !important;

    margin: 0 0 10px !important;

    border: 0 !important;
    background: transparent !important;
    color: #0b3a70 !important;

    font-size: 26px !important;
    line-height: 1 !important;
}

.training-level span {
    font-family: Georgia, "Times New Roman",
    "Battambang", "Khmer OS Battambang", serif !important;
}

.training-level i {
    font-family: "Font Awesome 5 Free" !important;
    font-weight: 900 !important;
}


/* Font ទាំងអស់ក្នុង Welcome */
#welcome,
#welcome h1,
#welcome h2,
#welcome h3,
#welcome h4,
#welcome p,
#welcome span,
#welcome strong,
#welcome blockquote,
#welcome div {
    font-family: Georgia, "Times New Roman",
    "Battambang", "Khmer OS Battambang", serif !important;
}

/* Welcome image */
.welcome-image {
    position: relative;
    width: 100%;
    height: 360px;

    margin: 0 0 30px;

    overflow: hidden;
    border-radius: 10px;

    background: #eaf2fb;
    box-shadow: 0 8px 24px rgba(8, 43, 92, 0.12);
}

.welcome-image img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: center;

    transition: transform 0.7s ease;
}

.welcome-image:hover img {
    transform: scale(1.04);
}

/* Caption លើរូប */
.welcome-image-caption {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;

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

    padding: 22px 25px;

    background: linear-gradient(
        to top,
        rgba(4, 29, 61, 0.94),
        rgba(4, 29, 61, 0.05)
    );

    color: #ffffff;
}

.welcome-image-caption > i {
    font-family: "Font Awesome 5 Free" !important;
    font-size: 25px;
    font-weight: 900;
}

.welcome-image-caption h3 {
    margin: 0 0 4px;

    color: #ffffff;
    font-family: "Poppins", "Battambang", sans-serif;
    font-size: 18px;
    font-weight: 700;
}

.welcome-image-caption p {
    margin: 0;

    color: rgba(255, 255, 255, 0.9);
    font-family: "Poppins", "Battambang", sans-serif;
    font-size: 13px;
    line-height: 1.6;
}

/* Mobile */
@media (max-width: 767px) {
    .welcome-image {
        height: 260px;
    }

    .welcome-image-caption {
        padding: 18px;
    }

    .welcome-image-caption h3 {
        font-size: 15px;
    }

    .welcome-image-caption p {
        font-size: 12px;
        text-align: left;
    }
}

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

#introduction {
    font-family: "Poppins", "Battambang", sans-serif;
}

/* កុំឱ្យ Poppins ជាន់លើ Font Awesome */
#introduction i {
    font-family: "Font Awesome 5 Free" !important;
    font-style: normal;
    font-weight: 900;
}

/* Heading */
.introduction-heading {
    display: flex;
    align-items: center;
    gap: 15px;

    margin-bottom: 26px;
    padding-bottom: 18px;

    border-bottom: 1px solid #dfe7f1;
}

.introduction-heading-icon {
    display: grid;
    place-items: center;

    width: 48px;
    height: 48px;
    flex: 0 0 48px;

    border-radius: 12px;

    background: linear-gradient(145deg, #0f437d, #082a56);
    color: #ffffff;

    font-size: 20px;
    box-shadow: 0 8px 18px rgba(8, 42, 86, 0.18);
}

.introduction-heading span {
    display: block;

    margin-bottom: 3px;

    color: #a37a00;

    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.4px;
}

.introduction-heading h2 {
    margin: 0;

    color: #082b5c;

    font-family: "Poppins", "Battambang", sans-serif;
    font-size: clamp(25px, 3vw, 33px);
    font-weight: 700;
    line-height: 1.5;
}

/* Opening */
.introduction-opening {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;

    margin-bottom: 25px;
    padding: 28px 30px;

    border: 1px solid #d8e6f5;
    border-left: 4px solid #407dbd;
    border-radius: 10px;

    background: linear-gradient(135deg, #eef6ff, #f8fbff);
}

.introduction-opening-content {
    flex: 1;
}

.introduction-small-title {
    display: block;

    margin-bottom: 5px;

    color: #59718c;

    font-size: 13px;
    font-weight: 600;
}

.introduction-opening h3 {
    margin: 0 0 12px;

    color: #0a376d;

    font-family: "Poppins", "Battambang", sans-serif;
    font-size: 24px;
    font-weight: 700;
}

.introduction-opening p {
    margin: 0;

    color: #314a64;

    font-size: 15px;
    line-height: 2;
    text-align: justify;
}

.introduction-opening-icon {
    display: grid;
    place-items: center;

    width: 90px;
    height: 90px;
    flex: 0 0 90px;

    border-radius: 50%;

    background: #ffffff;
    color: #174f88;

    font-size: 35px;
    box-shadow: 0 10px 24px rgba(15, 61, 110, 0.13);
}

/* Learning methods */
.introduction-methods {
    display: grid;
    grid-template-columns: 1fr 42px 1fr;
    gap: 13px;
    align-items: center;

    margin-bottom: 27px;
}

.introduction-method-card {
    display: flex;
    align-items: flex-start;
    gap: 15px;

    min-height: 140px;
    padding: 22px;

    border: 1px solid #dfe7f0;
    border-radius: 9px;

    background: #ffffff;
}

.introduction-method-icon {
    display: grid;
    place-items: center;

    width: 42px;
    height: 42px;
    flex: 0 0 42px;

    border-radius: 9px;

    background: #eaf3fd;
    color: #0d477f;

    font-size: 18px;
}

.introduction-method-card h3 {
    margin: 0 0 7px;

    color: #0a315f;

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

.introduction-method-card p {
    margin: 0;

    color: #5a6d81;

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

.introduction-method-arrow {
    display: grid;
    place-items: center;

    width: 37px;
    height: 37px;

    border-radius: 50%;

    background: #a37a00;
    color: #ffffff;

    font-size: 13px;
}

/* Experts */
.introduction-experts {
    display: flex;
    align-items: flex-start;
    gap: 18px;

    margin-bottom: 27px;
    padding: 24px;

    border-radius: 9px;

    background: #0d376b;
    color: #ffffff;
}

.introduction-experts-icon {
    display: grid;
    place-items: center;

    width: 48px;
    height: 48px;
    flex: 0 0 48px;

    border-radius: 50%;

    background: rgba(255, 255, 255, 0.13);
    color: #e4bb37;

    font-size: 20px;
}

.introduction-experts h3 {
    margin: 0 0 8px;

    color: #ffffff;

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

.introduction-experts p {
    margin: 0;

    color: rgba(255, 255, 255, 0.91);

    font-size: 14px;
    line-height: 2;
    text-align: justify;
}

/* Section title */
.introduction-section-title {
    display: flex;
    align-items: center;
    gap: 10px;

    margin-bottom: 12px;
}

.introduction-section-title > i {
    color: #a37a00;
    font-size: 18px;
}

.introduction-section-title h3 {
    margin: 0;

    color: #0a315f;

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

/* Workshops */
.introduction-workshops {
    display: grid;
    grid-template-columns: 220px minmax(0, 1fr);
    gap: 22px;

    margin-bottom: 28px;
}

.introduction-workshop-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    padding: 25px 18px;

    border-radius: 10px;

    background: linear-gradient(145deg, #0b3b71, #10294d);
    color: #ffffff;
    text-align: center;
}

.introduction-workshop-number {
    font-size: 45px;
    font-weight: 700;
    line-height: 1.25;
}

.introduction-workshop-label {
    color: #e4bb37;

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

.introduction-workshop-stat p {
    margin: 10px 0 0;

    color: rgba(255, 255, 255, 0.83);

    font-size: 12px;
    line-height: 1.7;
}

.introduction-workshop-content {
    padding: 25px;

    border: 1px solid #dde6f0;
    border-radius: 10px;

    background: #ffffff;
}

.introduction-workshop-content p {
    margin: 0;

    color: #455d75;

    font-size: 14px;
    line-height: 2;
    text-align: justify;
}

/* Skills */
.introduction-skills {
    margin-bottom: 29px;
}

.introduction-skills-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}

.introduction-skill-card {
    display: flex;
    align-items: center;
    gap: 11px;

    min-height: 65px;
    padding: 14px 16px;

    border: 1px solid #dce5ef;
    border-radius: 8px;

    background: #ffffff;
    color: #173c67;

    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease,
        border-color 0.25s ease;
}

.introduction-skill-card:hover {
    transform: translateY(-3px);

    border-color: #88acd3;

    box-shadow: 0 8px 18px rgba(12, 52, 95, 0.09);
}

.introduction-skill-card i {
    display: grid;
    place-items: center;

    width: 34px;
    height: 34px;
    flex: 0 0 34px;

    border-radius: 50%;

    background: #eaf3fd;
    color: #0d477f;

    font-size: 14px;
}

.introduction-skill-card span {
    font-size: 13px;
    font-weight: 700;
}

/* Vision */
.introduction-vision {
    margin-bottom: 25px;
    padding: 28px;

    border: 1px solid #dce7f2;
    border-radius: 10px;

    background: linear-gradient(135deg, #f2f7fd, #ffffff);
}

.introduction-vision-heading {
    display: flex;
    align-items: center;
    gap: 14px;

    margin-bottom: 16px;
}

.introduction-vision-icon {
    display: grid;
    place-items: center;

    width: 45px;
    height: 45px;
    flex: 0 0 45px;

    border-radius: 10px;

    background: #0c3b71;
    color: #ffffff;

    font-size: 18px;
}

.introduction-vision-heading span {
    display: block;

    color: #a37a00;

    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1.4px;
}

.introduction-vision-heading h3 {
    margin: 3px 0 0;

    color: #0a315f;

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

.introduction-vision > p {
    margin: 0 0 20px;

    color: #455d75;

    font-size: 14px;
    line-height: 2;
    text-align: justify;
}

.introduction-vision strong {
    color: #a37a00;
    font-size: 18px;
}

.introduction-vision-items {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 11px;
}

.introduction-vision-items div {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;

    padding: 12px;

    border-radius: 7px;

    background: #ffffff;
    color: #163b65;

    font-size: 12px;
    font-weight: 700;
    text-align: center;
}

.introduction-vision-items i {
    color: #a37a00;
}

/* Industry 4.0 */
.introduction-industry {
    display: flex;
    align-items: center;
    gap: 22px;

    margin-bottom: 25px;
    padding: 23px 26px;

    border-radius: 10px;

    background: #102d55;
    color: #ffffff;
}

.introduction-industry-number {
    display: grid;
    place-items: center;

    width: 90px;
    height: 90px;
    flex: 0 0 90px;

    border: 2px solid rgba(255, 255, 255, 0.25);
    border-radius: 50%;

    background: rgba(255, 255, 255, 0.08);
}

.introduction-industry-number span {
    color: #e4bb37;

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

.introduction-industry-content h3 {
    margin: 0 0 7px;

    color: #ffffff;

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

.introduction-industry-content p {
    margin: 0;

    color: rgba(255, 255, 255, 0.87);

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

/* Closing */
.introduction-closing {
    display: flex;
    align-items: flex-start;
    gap: 15px;

    padding: 21px 23px;

    border: 1px solid #eadb9d;
    border-left: 4px solid #a37a00;
    border-radius: 8px;

    background: #fffaf0;
}

.introduction-closing > i {
    margin-top: 6px;

    color: #a37a00;
    font-size: 21px;
}

.introduction-closing p {
    margin: 0;

    color: #4a5c70;

    font-size: 14px;
    line-height: 2;
    text-align: justify;
}

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

@media (max-width: 767px) {
    .introduction-heading-icon {
        width: 42px;
        height: 42px;
        flex-basis: 42px;

        font-size: 17px;
    }

    .introduction-heading h2 {
        font-size: 23px;
    }

    .introduction-opening {
        padding: 22px 19px;
    }

    .introduction-opening-icon {
        display: none;
    }

    .introduction-opening h3 {
        font-size: 20px;
    }

    .introduction-opening p,
    .introduction-experts p,
    .introduction-workshop-content p,
    .introduction-vision > p,
    .introduction-closing p {
        font-size: 14px;
        line-height: 1.9;
        text-align: left;
    }

    .introduction-methods {
        grid-template-columns: 1fr;
    }

    .introduction-method-arrow {
        margin: 0 auto;
    }

    .introduction-workshops {
        grid-template-columns: 1fr;
    }

    .introduction-workshop-stat {
        min-height: 220px;
    }

    .introduction-skills-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .introduction-vision {
        padding: 22px 18px;
    }

    .introduction-vision-items {
        grid-template-columns: 1fr;
    }

    .introduction-industry {
        align-items: flex-start;
        padding: 21px 18px;
    }

    .introduction-industry-number {
        width: 67px;
        height: 67px;
        flex-basis: 67px;
    }

    .introduction-industry-number span {
        font-size: 21px;
    }
}

@media (max-width: 480px) {
    .introduction-skills-grid {
        grid-template-columns: 1fr;
    }

    .introduction-experts {
        padding: 20px 17px;
    }

    .introduction-experts-icon {
        display: none;
    }

    .introduction-industry {
        flex-direction: column;
    }
}

/* Font សម្រាប់ Introduction */
#introduction {
    font-family: Georgia, "Times New Roman",
    "Battambang", "Khmer OS Battambang", serif !important;
}

#introduction h1,
#introduction h2,
#introduction h3,
#introduction h4,
#introduction h5,
#introduction h6,
#introduction p,
#introduction span,
#introduction strong,
#introduction blockquote {
    font-family: Georgia, "Times New Roman",
    "Battambang", "Khmer OS Battambang", serif !important;
}

/* កុំឱ្យ Font Awesome បាត់ icon */
#introduction i.fas,
#introduction i.fa {
    font-family: "Font Awesome 5 Free" !important;
    font-style: normal !important;
    font-weight: 900 !important;
}
/* ==================================================
   INTRODUCTION IMAGES
================================================== */

/* Main image */
.introduction-main-image {
    position: relative;

    width: 100%;
    height: 380px;

    margin: 0 0 28px;

    overflow: hidden;
    border-radius: 10px;

    background: #e9f1fa;
    box-shadow: 0 9px 25px rgba(7, 42, 83, 0.12);
}

.introduction-main-image img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: center;

    transition: transform 0.7s ease;
}

.introduction-main-image:hover img {
    transform: scale(1.04);
}

/* Caption រូបធំ */
.introduction-main-image figcaption {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;

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

    padding: 50px 25px 22px;

    background: linear-gradient(
        to top,
        rgba(5, 32, 65, 0.96),
        rgba(5, 32, 65, 0)
    );

    color: #ffffff;
}

.introduction-main-image figcaption > i {
    font-size: 25px;
}

.introduction-main-image figcaption h3 {
    margin: 0 0 3px;

    color: #ffffff;

    font-family: Georgia, "Times New Roman",
    "Battambang", "Khmer OS Battambang", serif !important;
    font-size: 18px;
    font-weight: 700;
}

.introduction-main-image figcaption p {
    margin: 0;

    color: rgba(255, 255, 255, 0.88);

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

/* Gallery រូបទី២ និងទី៣ */
.introduction-gallery {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;

    margin: 0 0 28px;
}

.introduction-gallery-item {
    position: relative;

    height: 260px;
    margin: 0;

    overflow: hidden;
    border-radius: 9px;

    background: #e9f1fa;
    box-shadow: 0 7px 19px rgba(8, 43, 83, 0.1);
}

.introduction-gallery-item img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: center;

    transition: transform 0.6s ease;
}

.introduction-gallery-item:hover img {
    transform: scale(1.06);
}

/* Gallery caption */
.introduction-gallery-item figcaption {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;

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

    padding: 38px 18px 16px;

    background: linear-gradient(
        to top,
        rgba(5, 32, 65, 0.94),
        rgba(5, 32, 65, 0)
    );

    color: #ffffff;
}

.introduction-gallery-item figcaption > i {
    color: #e4bb37;
    font-size: 17px;
}

.introduction-gallery-item figcaption span {
    color: #ffffff;

    font-family: Georgia, "Times New Roman",
    "Battambang", "Khmer OS Battambang", serif !important;
    font-size: 14px;
    font-weight: 700;
}

/* Mobile */
@media (max-width: 767px) {
    .introduction-main-image {
        height: 280px;
    }

    .introduction-main-image figcaption {
        padding: 40px 18px 17px;
    }

    .introduction-main-image figcaption h3 {
        font-size: 15px;
    }

    .introduction-gallery {
        grid-template-columns: 1fr;
    }

    .introduction-gallery-item {
        height: 240px;
    }
}

/* អត្ថបទខ្មែរក្នុង Introduction */
#introduction p {
    font-family: Georgia, "Times New Roman",
    "Battambang", "Khmer OS Battambang", serif !important;
    font-size: 17px !important;
    line-height: 2 !important;
}

/* ចំណងជើងតូច */
#introduction h3 {
    font-family: Georgia, "Times New Roman",
    "Battambang", "Khmer OS Battambang", serif !important;
    font-size: 20px !important;
    line-height: 1.7 !important;
}

/* ចំណងជើងធំ */
#introduction h2 {
    font-family: Georgia, "Times New Roman",
    "Battambang", "Khmer OS Battambang", serif !important;
    font-size: 30px !important;
    line-height: 1.6 !important;
}

/* អក្សរក្នុង cards និង captions */
#introduction span {
    font-family: Georgia, "Times New Roman",
    "Battambang", "Khmer OS Battambang", serif !important;
    font-size: 15px !important;
    line-height: 1.7 !important;
}
@media (max-width: 767px) {
    #introduction p {
        font-size: 15px !important;
        line-height: 1.9 !important;
    }

    #introduction h2 {
        font-size: 25px !important;
    }

    #introduction h3 {
        font-size: 18px !important;
    }

    #introduction span {
        font-size: 14px !important;
    }
}

/* ==================================================
   ABOUT LMTC SECTION
================================================== */

#about-lmtc {
    font-family: Georgia, "Times New Roman",
    "Battambang", "Khmer OS Battambang", serif !important;
}

#about-lmtc h1,
#about-lmtc h2,
#about-lmtc h3,
#about-lmtc h4,
#about-lmtc p,
#about-lmtc span,
#about-lmtc strong {
    font-family: Georgia, "Times New Roman",
    "Battambang", "Khmer OS Battambang", serif !important;
}

/* រក្សា Font Awesome */
#about-lmtc i.fas,
#about-lmtc i.fa {
    font-family: "Font Awesome 5 Free" !important;
    font-style: normal !important;
    font-weight: 900 !important;
}

/* Heading */
.lmtc-heading {
    display: flex;
    align-items: center;
    gap: 15px;

    margin-bottom: 26px;
    padding-bottom: 18px;

    border-bottom: 1px solid #dfe7f0;
}

.lmtc-heading-icon {
    display: grid;
    place-items: center;

    width: 50px;
    height: 50px;
    flex: 0 0 50px;

    border-radius: 12px;

    background: linear-gradient(145deg, #0e437d, #082a56);
    color: #ffffff;

    font-size: 21px;
    box-shadow: 0 8px 18px rgba(8, 42, 86, 0.18);
}

.lmtc-heading span,
.lmtc-section-title span,
.lmtc-objectives-heading span {
    display: block;

    color: #a37a00;

    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.4px;
}

.lmtc-heading h2 {
    margin: 3px 0 0;

    color: #082b5c;

    font-size: clamp(26px, 3vw, 33px);
    font-weight: 700;
    line-height: 1.6;
}

/* Introduction */
.lmtc-introduction {
    display: flex;
    align-items: flex-start;
    gap: 17px;

    margin-bottom: 27px;
    padding: 23px 25px;

    border: 1px solid #d4e4f5;
    border-left: 4px solid #3977b8;
    border-radius: 9px;

    background: #edf6ff;
}

.lmtc-introduction-icon {
    display: grid;
    place-items: center;

    width: 42px;
    height: 42px;
    flex: 0 0 42px;

    border-radius: 50%;

    background: #ffffff;
    color: #104778;

    font-size: 17px;
}

.lmtc-introduction p {
    margin: 0;

    color: #314a64;

    font-size: 17px;
    line-height: 2;
    text-align: justify;
}

.lmtc-introduction strong {
    color: #9c7500;
    font-weight: 700;
}

/* Partner institutions */
.lmtc-partners {
    display: grid;
    grid-template-columns: 1fr 55px 1fr;
    gap: 13px;
    align-items: center;

    margin-bottom: 27px;
}

.lmtc-partner-card {
    min-height: 190px;
    padding: 23px;

    border: 1px solid #dce5ef;
    border-radius: 9px;

    background: #ffffff;
}

.lmtc-partner-country {
    display: flex;
    align-items: center;
    gap: 8px;

    margin-bottom: 12px;

    color: #a37a00;

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

.lmtc-partner-card h3 {
    margin: 0 0 10px;

    color: #0b3566;

    font-size: 17px;
    font-weight: 700;
    line-height: 1.6;
}

.lmtc-partner-card p {
    margin: 0;

    color: #586d82;

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

.lmtc-partner-connection {
    display: grid;
    place-items: center;

    width: 47px;
    height: 47px;

    border-radius: 50%;

    background: #0d3b70;
    color: #ffffff;

    font-size: 18px;
}

/* Memorandum */
.lmtc-memorandum {
    display: grid;
    grid-template-columns: 125px minmax(0, 1fr);
    gap: 22px;

    margin-bottom: 27px;
    padding: 22px;

    border-radius: 10px;

    background: linear-gradient(135deg, #0c3a70, #10294d);
    color: #ffffff;
}

.lmtc-date {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    padding: 15px;

    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 8px;

    background: rgba(255, 255, 255, 0.08);
}

.lmtc-date-day {
    color: #ffffff;

    font-size: 36px !important;
    font-weight: 700;
    line-height: 1.2;
}

.lmtc-date > span:not(.lmtc-date-day) {
    color: #e5bd3c;
    font-size: 15px;
    font-weight: 700;
}

.lmtc-date strong {
    color: rgba(255, 255, 255, 0.9);
    font-size: 14px;
}

.lmtc-memorandum-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.lmtc-memorandum-content > span {
    color: #e5bd3c;

    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1.2px;
}

.lmtc-memorandum-content h3 {
    margin: 5px 0 8px;

    color: #ffffff;

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

.lmtc-memorandum-content p {
    margin: 0;

    color: rgba(255, 255, 255, 0.9);

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

/* Two-image gallery */
.lmtc-gallery {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;

    margin-bottom: 28px;
}

.lmtc-gallery-item {
    position: relative;

    height: 300px;
    margin: 0;

    overflow: hidden;
    border-radius: 10px;

    background: #e9f1fa;
    box-shadow: 0 8px 21px rgba(8, 43, 83, 0.11);
}

.lmtc-gallery-item img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: center;

    transition: transform 0.65s ease;
}

.lmtc-gallery-item:hover img {
    transform: scale(1.06);
}

.lmtc-gallery-item figcaption {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;

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

    padding: 50px 20px 18px;

    background: linear-gradient(
        to top,
        rgba(5, 31, 64, 0.96),
        rgba(5, 31, 64, 0)
    );

    color: #ffffff;
}

.lmtc-gallery-item figcaption > i {
    color: #e5bd3c;
    font-size: 20px;
}

.lmtc-gallery-item figcaption h3 {
    margin: 0 0 3px;

    color: #ffffff;

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

.lmtc-gallery-item figcaption p {
    margin: 0;

    color: rgba(255, 255, 255, 0.88);

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

/* Equipment */
.lmtc-equipment {
    display: flex;
    align-items: flex-start;
    gap: 17px;

    margin-bottom: 30px;
    padding: 23px;

    border: 1px solid #e7daa8;
    border-radius: 9px;

    background: #fffaf0;
}

.lmtc-equipment-icon {
    display: grid;
    place-items: center;

    width: 45px;
    height: 45px;
    flex: 0 0 45px;

    border-radius: 10px;

    background: #a37a00;
    color: #ffffff;

    font-size: 18px;
}

.lmtc-equipment h3 {
    margin: 0 0 7px;

    color: #17395e;

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

.lmtc-equipment p {
    margin: 0;

    color: #4d6074;

    font-size: 16px;
    line-height: 2;
    text-align: justify;
}

/* Section title */
.lmtc-section-title {
    display: flex;
    align-items: center;
    gap: 13px;

    margin-bottom: 17px;
}

.lmtc-section-title > i {
    color: #a37a00;
    font-size: 22px;
}

.lmtc-section-title h3 {
    margin: 3px 0 0;

    color: #0a315f;

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

/* Programs */
.lmtc-programs {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;

    margin-bottom: 31px;
}

.lmtc-program-card {
    position: relative;

    min-height: 220px;
    padding: 27px 18px 21px;

    overflow: hidden;

    border: 1px solid #dce5ef;
    border-radius: 10px;

    background: #ffffff;
    text-align: center;

    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease;
}

.lmtc-program-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 24px rgba(8, 43, 83, 0.12);
}

.lmtc-program-number {
    position: absolute;
    top: 9px;
    right: 13px;

    color: #e7edf4;

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

.lmtc-program-icon {
    display: grid;
    place-items: center;

    width: 55px;
    height: 55px;

    margin: 8px auto 14px;

    border-radius: 50%;

    background: #eaf3fd;
    color: #0d477f;

    font-size: 21px;
}

.lmtc-program-card h3 {
    margin: 0 0 8px;

    color: #0a3567;

    font-size: 17px;
    font-weight: 700;
    line-height: 1.7;
}

.lmtc-program-card p {
    margin: 0;

    color: #607286;

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

/* Objectives */
.lmtc-objectives {
    padding: 28px;

    border-radius: 11px;

    background: #f4f8fc;
}

.lmtc-objectives-heading {
    display: flex;
    align-items: center;
    gap: 14px;

    margin-bottom: 20px;
}

.lmtc-objectives-icon {
    display: grid;
    place-items: center;

    width: 46px;
    height: 46px;
    flex: 0 0 46px;

    border-radius: 10px;

    background: #0d3b70;
    color: #ffffff;

    font-size: 19px;
}

.lmtc-objectives-heading h3 {
    margin: 3px 0 0;

    color: #0a315f;

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

.lmtc-objectives-list {
    display: grid;
    gap: 13px;
}

.lmtc-objective-item {
    display: flex;
    align-items: flex-start;
    gap: 17px;

    padding: 19px 20px;

    border: 1px solid #dce5ef;
    border-radius: 8px;

    background: #ffffff;
}

.lmtc-objective-number {
    display: grid;
    place-items: center;

    width: 38px;
    height: 38px;
    flex: 0 0 38px;

    border-radius: 50%;

    background: #0c3b70;
    color: #ffffff;

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

.lmtc-objective-item h4 {
    margin: 0 0 6px;

    color: #123c68;

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

.lmtc-objective-item p {
    margin: 0;

    color: #566b80;

    font-size: 16px;
    line-height: 1.9;
    text-align: justify;
}

/* Countries */
.lmtc-countries {
    margin-top: 25px;
    padding: 22px;

    border-radius: 9px;

    background: #102d55;
    text-align: center;
}

.lmtc-countries > span {
    display: block;

    margin-bottom: 14px;

    color: #ffffff;

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

.lmtc-country-list {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 9px;
}

.lmtc-country-list div {
    padding: 7px 17px;

    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 30px;

    background: rgba(255, 255, 255, 0.09);
    color: #ffffff;

    font-size: 14px;
}

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

@media (max-width: 767px) {
    .lmtc-heading-icon {
        width: 43px;
        height: 43px;
        flex-basis: 43px;
    }

    .lmtc-heading h2 {
        font-size: 24px;
    }

    .lmtc-introduction {
        padding: 19px;
    }

    .lmtc-introduction-icon {
        display: none;
    }

    .lmtc-introduction p,
    .lmtc-equipment p,
    .lmtc-objective-item p {
        font-size: 15px;
        line-height: 1.9;
        text-align: left;
    }

    .lmtc-partners {
        grid-template-columns: 1fr;
    }

    .lmtc-partner-connection {
        margin: 0 auto;
    }

    .lmtc-memorandum {
        grid-template-columns: 1fr;
    }

    .lmtc-date {
        min-height: 140px;
    }

    .lmtc-gallery {
        grid-template-columns: 1fr;
    }

    .lmtc-gallery-item {
        height: 270px;
    }

    .lmtc-programs {
        grid-template-columns: 1fr;
    }

    .lmtc-objectives {
        padding: 22px 17px;
    }

    .lmtc-objective-item {
        padding: 17px;
    }
}

/* ==================================================
   LMTC IMAGE SLIDER
================================================== */

.lmtc-slider {
    position: relative;

    width: 100%;
    height: 470px;

    margin: 0 0 30px;

    overflow: hidden;
    border-radius: 11px;

    background: #dce7f2;
    box-shadow: 0 9px 25px rgba(8, 43, 83, 0.14);
}

.lmtc-slider-track {
    position: relative;

    width: 100%;
    height: 100%;
}

/* Slide */
.lmtc-slide {
    position: absolute;
    inset: 0;

    width: 100%;
    height: 100%;
    margin: 0;

    visibility: hidden;
    opacity: 0;

    transform: scale(1.04);

    transition:
        opacity 0.7s ease,
        visibility 0.7s ease,
        transform 5s ease;
}

.lmtc-slide.active {
    visibility: visible;
    opacity: 1;

    transform: scale(1);
}

.lmtc-slide img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: center;
}

/* Dark overlay */
.lmtc-slide::after {
    content: "";

    position: absolute;
    inset: 0;
    z-index: 1;

    background: linear-gradient(
        to top,
        rgba(4, 28, 59, 0.92) 0%,
        rgba(4, 28, 59, 0.27) 48%,
        rgba(4, 28, 59, 0.05) 100%
    );
}

/* Caption */
.lmtc-slide figcaption {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 2;

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

    padding: 75px 70px 48px;

    color: #ffffff;
}

.lmtc-slide-icon {
    display: grid;
    place-items: center;

    width: 50px;
    height: 50px;
    flex: 0 0 50px;

    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 50%;

    background: rgba(255, 255, 255, 0.13);
    color: #e5bd3c;

    font-size: 20px;
    backdrop-filter: blur(5px);
}

.lmtc-slide figcaption span {
    display: block;

    margin-bottom: 3px;

    color: #e5bd3c;

    font-family: "Poppins", sans-serif !important;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1.3px;
}

.lmtc-slide figcaption h3 {
    margin: 0 0 4px;

    color: #ffffff;

    font-family: Georgia, "Times New Roman",
    "Battambang", "Khmer OS Battambang", serif !important;
    font-size: 22px;
    font-weight: 700;
}

.lmtc-slide figcaption p {
    margin: 0;

    color: rgba(255, 255, 255, 0.9);

    font-family: Georgia, "Times New Roman",
    "Battambang", "Khmer OS Battambang", serif !important;
    font-size: 14px;
    line-height: 1.7;
}

/* Previous and next buttons */
.lmtc-slider-button {
    position: absolute;
    top: 50%;
    z-index: 4;

    display: grid;
    place-items: center;

    width: 43px;
    height: 43px;
    padding: 0;

    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 50%;

    background: rgba(7, 36, 73, 0.72);
    color: #ffffff;

    cursor: pointer;
    transform: translateY(-50%);

    transition:
        background-color 0.25s ease,
        transform 0.25s ease;
}

.lmtc-slider-button:hover {
    background: #a37a00;
    transform: translateY(-50%) scale(1.08);
}

.lmtc-slider-button i {
    font-family: "Font Awesome 5 Free" !important;
    font-size: 14px;
    font-weight: 900;
}

.lmtc-slider-previous {
    left: 18px;
}

.lmtc-slider-next {
    right: 18px;
}

/* Dots */
.lmtc-slider-dots {
    position: absolute;
    right: 25px;
    bottom: 19px;
    z-index: 4;

    display: flex;
    align-items: center;
    gap: 7px;
}

.lmtc-slider-dot {
    width: 9px;
    height: 9px;
    padding: 0;

    border: 0;
    border-radius: 50%;

    background: rgba(255, 255, 255, 0.48);

    cursor: pointer;

    transition:
        width 0.25s ease,
        border-radius 0.25s ease,
        background-color 0.25s ease;
}

.lmtc-slider-dot.active {
    width: 25px;

    border-radius: 10px;
    background: #e5bd3c;
}

/* Mobile */
@media (max-width: 767px) {
    .lmtc-slider {
        height: 340px;
    }

    .lmtc-slide figcaption {
        padding: 60px 55px 42px;
    }

    .lmtc-slide-icon {
        display: none;
    }

    .lmtc-slide figcaption h3 {
        font-size: 18px;
    }

    .lmtc-slide figcaption p {
        font-size: 13px;
    }

    .lmtc-slider-button {
        width: 37px;
        height: 37px;
    }

    .lmtc-slider-previous {
        left: 10px;
    }

    .lmtc-slider-next {
        right: 10px;
    }

    .lmtc-slider-dots {
        right: 17px;
        bottom: 15px;
    }
}

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

#background {
    font-family: Georgia, "Times New Roman",
    "Battambang", "Khmer OS Battambang", serif !important;
}

#background h1,
#background h2,
#background h3,
#background h4,
#background p,
#background span,
#background strong,
#background blockquote {
    font-family: Georgia, "Times New Roman",
    "Battambang", "Khmer OS Battambang", serif !important;
}

/* កុំឱ្យ font ថ្មីធ្វើឱ្យ Font Awesome បាត់ */
#background i.fas,
#background i.fa {
    font-family: "Font Awesome 5 Free" !important;
    font-style: normal !important;
    font-weight: 900 !important;
}

/* Heading */
.background-heading {
    display: flex;
    align-items: center;
    gap: 15px;

    margin-bottom: 25px;
    padding-bottom: 18px;

    border-bottom: 1px solid #dfe7f0;
}

.background-heading-icon {
    display: grid;
    place-items: center;

    width: 49px;
    height: 49px;
    flex: 0 0 49px;

    border-radius: 12px;

    background: linear-gradient(145deg, #0e437d, #082a56);
    color: #ffffff;

    font-size: 20px;
    box-shadow: 0 8px 18px rgba(8, 42, 86, 0.18);
}

.background-heading span,
.background-section-title span {
    display: block;

    color: #a37a00;

    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.3px;
}

.background-heading h2 {
    margin: 3px 0 0;

    color: #082b5c;

    font-size: clamp(26px, 3vw, 33px);
    font-weight: 700;
    line-height: 1.6;
}

/* Introduction */
.background-introduction {
    display: flex;
    align-items: flex-start;
    gap: 16px;

    margin-bottom: 27px;
    padding: 22px 24px;

    border: 1px solid #d4e4f5;
    border-left: 4px solid #3b79ba;
    border-radius: 9px;

    background: #edf6ff;
}

.background-introduction-icon {
    display: grid;
    place-items: center;

    width: 42px;
    height: 42px;
    flex: 0 0 42px;

    border-radius: 50%;

    background: #ffffff;
    color: #0d477f;

    font-size: 17px;
}

.background-introduction p {
    margin: 0;

    color: #314a64;

    font-size: 17px;
    line-height: 2;
    text-align: justify;
}

/* ==================================================
   BACKGROUND SLIDER
================================================== */

.background-slider {
    position: relative;

    width: 100%;
    height: 470px;

    margin-bottom: 28px;

    overflow: hidden;
    border-radius: 11px;

    background: #dce7f2;
    box-shadow: 0 9px 25px rgba(8, 43, 83, 0.14);
}

.background-slider-track {
    position: relative;

    width: 100%;
    height: 100%;
}

.background-slide {
    position: absolute;
    inset: 0;

    width: 100%;
    height: 100%;
    margin: 0;

    visibility: hidden;
    opacity: 0;

    transform: scale(1.04);

    transition:
        opacity 0.65s ease,
        visibility 0.65s ease,
        transform 4s ease;
}

.background-slide.active {
    visibility: visible;
    opacity: 1;

    transform: scale(1);
}

.background-slide img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: center;
}

.background-slide::after {
    content: "";

    position: absolute;
    inset: 0;
    z-index: 1;

    background: linear-gradient(
        to top,
        rgba(4, 28, 59, 0.94) 0%,
        rgba(4, 28, 59, 0.27) 50%,
        rgba(4, 28, 59, 0.03) 100%
    );
}

.background-slide figcaption {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 2;

    padding: 75px 70px 45px;

    color: #ffffff;
}

.background-slide figcaption span {
    display: block;

    margin-bottom: 3px;

    color: #e5bd3c;

    font-family: "Poppins", sans-serif !important;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1.3px;
}

.background-slide figcaption h3 {
    margin: 0 0 5px;

    color: #ffffff;

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

.background-slide figcaption p {
    max-width: 680px;
    margin: 0;

    color: rgba(255, 255, 255, 0.9);

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

/* Slider buttons */
.background-slider-button {
    position: absolute;
    top: 50%;
    z-index: 4;

    display: grid;
    place-items: center;

    width: 42px;
    height: 42px;
    padding: 0;

    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 50%;

    background: rgba(7, 36, 73, 0.72);
    color: #ffffff;

    cursor: pointer;
    transform: translateY(-50%);

    transition:
        background-color 0.25s ease,
        transform 0.25s ease;
}

.background-slider-button:hover {
    background: #a37a00;
    transform: translateY(-50%) scale(1.08);
}

.background-slider-previous {
    left: 17px;
}

.background-slider-next {
    right: 17px;
}

/* Slider dots */
.background-slider-dots {
    position: absolute;
    right: 25px;
    bottom: 19px;
    z-index: 4;

    display: flex;
    gap: 7px;
}

.background-slider-dot {
    width: 9px;
    height: 9px;
    padding: 0;

    border: 0;
    border-radius: 50%;

    background: rgba(255, 255, 255, 0.5);
    cursor: pointer;

    transition:
        width 0.25s ease,
        background-color 0.25s ease;
}

.background-slider-dot.active {
    width: 25px;

    border-radius: 10px;
    background: #e5bd3c;
}

/* Section title */
.background-section-title {
    display: flex;
    align-items: center;
    gap: 13px;

    margin-bottom: 14px;
}

.background-section-title > i {
    color: #a37a00;
    font-size: 21px;
}

.background-section-title h3 {
    margin: 3px 0 0;

    color: #0a315f;

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

/* Ceremony */
.background-ceremony {
    margin-bottom: 24px;
    padding: 25px;

    border: 1px solid #dce5ef;
    border-radius: 9px;

    background: #ffffff;
}

.background-ceremony > p {
    margin: 0;

    color: #465d74;

    font-size: 17px;
    line-height: 2;
    text-align: justify;
}

.background-ceremony strong {
    color: #a07800;
    font-weight: 700;
}

/* Leaders */
.background-leaders {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;

    margin-bottom: 24px;
}

.background-leader-card {
    display: flex;
    align-items: flex-start;
    gap: 14px;

    padding: 21px;

    border: 1px solid #dce5ef;
    border-radius: 9px;

    background: #ffffff;

    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease;
}

.background-leader-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 9px 20px rgba(8, 43, 83, 0.1);
}

.background-leader-icon {
    display: grid;
    place-items: center;

    width: 44px;
    height: 44px;
    flex: 0 0 44px;

    border-radius: 10px;

    background: #0d3b70;
    color: #ffffff;

    font-size: 17px;
}

.background-leader-card span {
    display: block;

    margin-bottom: 4px;

    color: #a37a00;

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

.background-leader-card h3 {
    margin: 0 0 6px;

    color: #0a3567;

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

.background-leader-card p {
    margin: 0;

    color: #5a6e82;

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

/* Training */
.background-training {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 25px;

    margin-bottom: 24px;
    padding: 25px;

    border-radius: 10px;

    background: linear-gradient(135deg, #edf6ff, #f9fcff);
}

.background-training-content {
    flex: 1;
}

.background-training-content p {
    margin: 0;

    color: #465d74;

    font-size: 16px;
    line-height: 2;
    text-align: justify;
}

.background-training-icon {
    display: grid;
    place-items: center;

    width: 90px;
    height: 90px;
    flex: 0 0 90px;

    border-radius: 50%;

    background: #ffffff;
    color: #0d477f;

    font-size: 34px;
    box-shadow: 0 9px 22px rgba(8, 43, 83, 0.11);
}

/* Features */
.background-features {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;

    margin-bottom: 24px;
}

.background-feature-card {
    min-height: 205px;
    padding: 23px 18px;

    border: 1px solid #dce5ef;
    border-radius: 9px;

    background: #ffffff;
    text-align: center;
}

.background-feature-icon {
    display: grid;
    place-items: center;

    width: 52px;
    height: 52px;

    margin: 0 auto 13px;

    border-radius: 50%;

    background: #eaf3fd;
    color: #0d477f;

    font-size: 20px;
}

.background-feature-card h3 {
    margin: 0 0 8px;

    color: #0b3567;

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

.background-feature-card p {
    margin: 0;

    color: #607286;

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

/* Quote */
.background-quote {
    display: flex;
    align-items: flex-start;
    gap: 16px;

    margin: 0;
    padding: 24px 26px;

    border: 0;
    border-radius: 9px;

    background: linear-gradient(135deg, #0d376b, #10294d);
}

.background-quote > i {
    margin-top: 5px;

    color: #e5bd3c;
    font-size: 22px;
}

.background-quote p {
    margin: 0;

    color: rgba(255, 255, 255, 0.92);

    font-size: 16px;
    line-height: 2;
    text-align: justify;
}

/* Responsive */
@media (max-width: 767px) {
    .background-heading h2 {
        font-size: 24px;
    }

    .background-introduction-icon,
    .background-training-icon {
        display: none;
    }

    .background-slider {
        height: 340px;
    }

    .background-slide figcaption {
        padding: 60px 52px 43px;
    }

    .background-slide figcaption h3 {
        font-size: 18px;
    }

    .background-slide figcaption p {
        font-size: 13px;
    }

    .background-introduction p,
    .background-ceremony > p,
    .background-training-content p,
    .background-quote p {
        font-size: 15px;
        line-height: 1.9;
        text-align: left;
    }

    .background-leaders,
    .background-features {
        grid-template-columns: 1fr;
    }
}
/* ទុក wrapper នៅទីតាំងមូលដ្ឋាន */
.has-page-sidebar:has(.about-page) {
    margin-left: var(--sidebar-closed-width, 105px) !important;

    width: calc(
        100% - var(--sidebar-closed-width, 105px)
    ) !important;

    transform: none !important;
}

.about-content-layout {
    display: block;
    width: 100% !important;

    margin-left: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;

    transform: none !important;
}

/* JS គណនាទីតាំងតាមគែម Sidebar */
.about-content-layout > .about-container {
    box-sizing: border-box;

    min-width: 0 !important;
    max-width: none !important;

    transition: none !important;
}

.about-page .about-hero {
    box-sizing: border-box;

    min-width: 0 !important;
    max-width: none !important;

    margin: 0 !important;
    transition: none !important;
}

/* Sidebar មានចលនា; Hero និង content តាមគែមវា */
#pageSideNav {
    transition:
        width 450ms cubic-bezier(0.22, 1, 0.36, 1),
        left 450ms cubic-bezier(0.22, 1, 0.36, 1),
        transform 450ms cubic-bezier(0.22, 1, 0.36, 1) !important;
}

body:has(.about-page) {
    background-color: var(--about-background, #f6f7f9) !important;
}

@media (prefers-reduced-motion: reduce) {
    #pageSideNav {
        transition: none !important;
    }
}
body:has(.about-page) #pageSideNav {
    transition:
        width 180ms ease-out,
        left 180ms ease-out,
        transform 180ms ease-out !important;
}

@media (prefers-reduced-motion: reduce) {
    body:has(.about-page) #pageSideNav {
        transition: none !important;
    }
}

@media (max-width: 767px) {
    /* លាក់ Sidebar លើ Mobile */
    .page-side-nav:has(.about-side-nav),
    .page-side-nav.about-side-nav {
        display: none !important;
    }

    /* ដកចន្លោះ Sidebar ចេញពី Content */
    .has-page-sidebar:has(.about-page),
    body.sidebar-expanded .has-page-sidebar:has(.about-page) {
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding-left: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0;
        left: 0 !important;
        transform: none !important;
    }

    .about-container,
    body.sidebar-expanded .about-container,
    body:not(.sidebar-expanded) .about-container {
        left: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        transform: none !important;
    }
}

@media (max-width: 767px) {
    .about-page .about-content-layout {
        padding-top: 16px;
    }

    .about-page .about-content-layout > .about-container {
        margin-top: 0;
    }
}

@media (max-width: 767px) {
    .lmtc-heading {
        gap: 8px;
    }

    .lmtc-heading h2 {
        font-size: clamp(14px, 4vw, 19px) !important;
        line-height: 1.6;
        white-space: nowrap;
        margin: 0;
    }

    .lmtc-heading-icon {
        width: 36px;
        height: 36px;
        flex: 0 0 36px;
        font-size: 16px;
    }
}
@media (max-width: 767px) {
    body .about-page #welcome .welcome-heading h2,
    body .about-page #introduction .introduction-heading h2,
    body .about-page #about-lmtc .lmtc-heading h2,
    body .about-page #background .background-heading h2 {
        font-size: 18px !important;
        font-weight: 350 !important;
        line-height: 1.5 !important;
        letter-spacing: normal !important;
        margin: 0 !important;
    }

    /* Icon មានទំហំស្មើគ្នា */
    body .about-page .lmtc-heading-icon,
    body .about-page .background-heading-icon {
        width: 36px !important;
        height: 36px !important;
        flex: 0 0 36px !important;
        font-size: 16px !important;
    }

    body .about-page .lmtc-heading,
    body .about-page .background-heading {
        gap: 10px !important;
    }
}

body .about-page .welcome-heading,
body .about-page .introduction-heading {
    display: flex;
    align-items: center;
    gap: 14px;
}

body .about-page .about-title-icon {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 48px;
    height: 48px;
    flex: 0 0 48px;

    border-radius: 12px;
    background: #123f73;
    color: #fff;
    box-shadow: 0 4px 10px rgba(18, 63, 115, 0.1);
}

body .about-page .about-title-icon i {
    font-family: "Font Awesome 6 Free" !important;
    font-weight: 900 !important;
    font-size: 21px;
}

@media (max-width: 767px) {
    body .about-page .welcome-heading,
    body .about-page .introduction-heading {
        gap: 10px;
    }

    body .about-page .about-title-icon {
        width: 36px;
        height: 36px;
        flex-basis: 36px;
        border-radius: 10px;
    }

    body .about-page .about-title-icon i {
        font-size: 16px;
    }
}
body .about-page,
body .about-page *:not(i):not(svg):not(svg *) {
    font-variant-numeric: lining-nums !important;
    font-feature-settings: "lnum" 1 !important;
}

body #pageSideNav.about-side-nav .side-nav-icon {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 30px !important;
    height: 30px !important;
    min-width: 30px !important;
    flex: 0 0 30px !important;
    padding: 0 !important;
    border-radius: 50% !important;
    background: #9b7600 !important;
    color: #fff !important;
}

body #pageSideNav.about-side-nav .side-nav-icon i {
    font-size: 16px !important;
    line-height: 1 !important;
}