/* =========================================================
   CORE VALUES PAGE
   ========================================================= */


/* ---------------------------------------------------------
   BREADCRUMB
   --------------------------------------------------------- */

.page-breadcrumb {

    background: var(--light-blue);

    padding: 18px 0;

    font-size: 14px;

    color: var(--gray-700);

}

.page-breadcrumb .container {

    display: flex;

    align-items: center;

    gap: 8px;

}

.page-breadcrumb span {

    color: var(--gray-500);

}

.page-breadcrumb strong {

    color: #1769c2;

}


/* ---------------------------------------------------------
   CORE VALUES HERO
   --------------------------------------------------------- */

.core-values-hero {

    height: 430px;

    display: flex;

    align-items: center;

    position: relative;

    overflow: hidden;

    background:
        linear-gradient(
            135deg,
            var(--navy) 0%,
            var(--navy-dark) 65%,
            #092d52 100%
        );

}


/* subtle decorative circle */

.core-values-hero::after {

    content: "";

    position: absolute;

    width: 420px;

    height: 420px;

    border: 1px solid rgba(242, 182, 50, 0.18);

    border-radius: 50%;

    right: -120px;

    top: -180px;

}


.core-values-hero-content {

    max-width: 760px;

    position: relative;

    z-index: 2;

}


.core-values-hero .section-label {

    color: var(--gold-light);

    letter-spacing: 3px;

    font-size: 13px;

    font-weight: 700;

}


.core-values-hero h1 {

    color: var(--white);

    font-size: clamp(3rem, 6vw, 5rem);

    line-height: 1.02;

    margin-top: 15px;

}


.core-values-hero p {

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

    font-size: 17px;

    margin-top: 25px;

}


/* ---------------------------------------------------------
   CORE VALUES SECTION
   --------------------------------------------------------- */

.core-values-section {

    background: #f8f9fb;

    padding: 100px 0;

}


.core-values-heading {

    margin-bottom: 50px;

}


.core-values-heading .section-label {

    color: var(--gold);

    font-size: 13px;

    font-weight: 700;

    letter-spacing: 2px;

}


.core-values-heading h2 {

    margin-top: 12px;

    font-size: clamp(2.2rem, 4vw, 3.4rem);

}


/* ---------------------------------------------------------
   CORE VALUES GRID
   --------------------------------------------------------- */

.core-values-grid {

    display: grid;

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

    gap: 24px;

}


/* ---------------------------------------------------------
   VALUE CARD
   --------------------------------------------------------- */

.core-value-card {

    background: var(--white);

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

    border-radius: var(--radius-md);

    padding: 32px;

    display: grid;

    grid-template-columns: 55px 70px 1fr;

    align-items: center;

    gap: 20px;

    position: relative;

    overflow: hidden;

    min-height: 190px;

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

}


.core-value-card::before {

    content: "";

    position: absolute;

    left: 0;

    top: 0;

    bottom: 0;

    width: 4px;

    background: var(--gold);

    transform: scaleY(0);

    transform-origin: bottom;

    transition: transform 0.25s ease;

}


.core-value-card:hover {

    transform: translateY(-5px);

    box-shadow: var(--shadow-md);

    border-color: #d6dde7;

}


.core-value-card:hover::before {

    transform: scaleY(1);

}


/* ---------------------------------------------------------
   NUMBER
   --------------------------------------------------------- */

.core-value-number {

    font-family: "Playfair Display", serif;

    font-size: 18px;

    font-weight: 700;

    color: var(--gold);

    align-self: start;

}


/* ---------------------------------------------------------
   ICON
   --------------------------------------------------------- */

.core-value-icon {

    width: 62px;

    height: 62px;

    border-radius: 50%;

    background: var(--navy);

    color: var(--gold-light);

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 27px;

    flex-shrink: 0;

}


/* ---------------------------------------------------------
   CONTENT
   --------------------------------------------------------- */

.core-value-content h3 {

    font-family: "DM Sans", sans-serif;

    color: var(--navy);

    font-size: 18px;

    font-weight: 700;

    margin-bottom: 8px;

    letter-spacing: 0.3px;

}


.core-value-content p {

    color: var(--gray-500);

    font-size: 14px;

    line-height: 1.7;

    margin: 0;

}


/* ---------------------------------------------------------
   CLOSING
   --------------------------------------------------------- */

.core-values-closing {

    background: var(--white);

    padding: 80px 0 100px;

}


.core-values-closing-box {

    background: var(--navy);

    border-radius: var(--radius-lg);

    padding: 60px;

    text-align: center;

    position: relative;

    overflow: hidden;

}


.core-values-closing-box::before {

    content: "";

    position: absolute;

    width: 180px;

    height: 180px;

    border: 1px solid rgba(242, 182, 50, 0.2);

    border-radius: 50%;

    left: -70px;

    bottom: -80px;

}


.core-values-closing-box::after {

    content: "";

    position: absolute;

    width: 220px;

    height: 220px;

    border: 1px solid rgba(242, 182, 50, 0.15);

    border-radius: 50%;

    right: -100px;

    top: -110px;

}


.core-values-closing-box .section-label {

    color: var(--gold-light);

    font-size: 12px;

    font-weight: 700;

    letter-spacing: 2px;

}


.core-values-closing-box h2 {

    color: var(--white);

    font-size: clamp(2rem, 4vw, 3rem);

    margin: 15px 0;

}


.core-values-closing-box p {

    max-width: 600px;

    margin: 0 auto;

    color: #dce4ee;

    font-size: 16px;

}


/* ---------------------------------------------------------
   RESPONSIVE
   --------------------------------------------------------- */

@media (max-width: 800px) {

    .core-values-grid {

        grid-template-columns: 1fr;

    }

}


@media (max-width: 600px) {

    .core-values-hero {

        padding: 65px 0;

    }

    .core-values-section {

        padding: 70px 0;

    }

    .core-value-card {

        grid-template-columns: 45px 60px 1fr;

        padding: 24px;

        gap: 14px;

    }

    .core-value-icon {

        width: 52px;

        height: 52px;

        font-size: 22px;

    }

    .core-value-content h3 {

        font-size: 16px;

    }

    .core-value-content p {

        font-size: 13px;

    }

    .core-values-closing-box {

        padding: 45px 25px;

    }

}


/* FIVE CORE VALUES — COMPACT EDITION */
.core-values-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
.core-value-card { grid-template-columns: 42px 58px 1fr; min-height: 150px; padding: 26px; gap: 16px; }
.core-value-card:nth-child(4) { grid-column: 1 / 2; }
.core-value-card:nth-child(5) { grid-column: 2 / 3; }
.core-value-card:nth-child(5) .core-value-icon { background: var(--gold); color: var(--navy); }
.core-value-content h3 { margin: 0; line-height: 1.35; }
@media (max-width: 800px) { .core-values-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .core-value-card:nth-child(4), .core-value-card:nth-child(5) { grid-column: auto; } }
@media (max-width: 600px) { .core-values-grid { grid-template-columns: 1fr; } }