/********** Template CSS — Diamond Edition **********/

/* ─── Diamond Color Palette ────────────────────────────────────────
   --diamond-ice     : #E8F4FD  (lightest ice blue — backgrounds)
   --diamond-pale    : #B8D4EA  (pale blue — light surfaces)
   --diamond-mid     : #5B9EC9  (mid blue — accents)
   --diamond-deep    : #1A4A72  (deep navy blue — primary)
   --diamond-sparkle : #C0E8FF  (brilliant icy sparkle)
   --diamond-silver  : #A8C4D8  (silver-blue shimmer)
   --diamond-dark    : #0D2B45  (darkest navy — text / footer)
   --diamond-gold    : #E8D5A3  (champagne gold — accent pop)
   Bootstrap overrides: --bs-primary → diamond-deep
                        --bs-secondary → diamond-mid
                        --bs-light    → diamond-ice
                        --bs-dark     → diamond-dark
──────────────────────────────────────────────────────────────────── */

:root {
  --bs-primary:          #1A4A72;
  --bs-primary-rgb:      26, 74, 114;
  --bs-secondary:        #5B9EC9;
  --bs-secondary-rgb:    91, 158, 201;
  --bs-light:            #E8F4FD;
  --bs-light-rgb:        232, 244, 253;
  --bs-dark:             #0D2B45;
  --bs-dark-rgb:         13, 43, 69;

  --diamond-ice:         #E8F4FD;
  --diamond-pale:        #B8D4EA;
  --diamond-mid:         #5B9EC9;
  --diamond-deep:        #1A4A72;
  --diamond-sparkle:     #C0E8FF;
  --diamond-silver:      #A8C4D8;
  --diamond-dark:        #0D2B45;
  --diamond-gold:        #E8D5A3;
  --diamond-gradient:    linear-gradient(135deg, #1A4A72 0%, #5B9EC9 50%, #C0E8FF 100%);
  --diamond-shimmer:     linear-gradient(120deg, #E8F4FD 0%, #C0E8FF 40%, #B8D4EA 60%, #E8F4FD 100%);
}

/* ─── General ─────────────────────────────────────────────────────── */

body {
  background-color: #f5f9fc;
  color: var(--diamond-dark);
}

.back-to-top {
    position: fixed;
    display: none;
    right: 30px;
    bottom: 30px;
    z-index: 99;
    background: var(--diamond-gradient);
    border: none;
}

.fw-medium { font-weight: 500; }

/* ─── Spinner ─────────────────────────────────────────────────────── */
#spinner {
    opacity: 0;
    visibility: hidden;
    transition: opacity .5s ease-out, visibility 0s linear .5s;
    z-index: 99999;
}
#spinner.show {
    transition: opacity .5s ease-out, visibility 0s linear 0s;
    visibility: visible;
    opacity: 1;
}

/* ─── Buttons ─────────────────────────────────────────────────────── */
.btn { transition: .5s; font-weight: 500; }

.btn-primary {
    color: #ffffff;
    background: var(--diamond-gradient);
    border: none;
    box-shadow: 0 4px 15px rgba(26, 74, 114, 0.3);
}
.btn-primary:hover {
    background: linear-gradient(135deg, #0D2B45 0%, #1A4A72 50%, #5B9EC9 100%);
    box-shadow: 0 6px 20px rgba(26, 74, 114, 0.45);
    color: #fff;
}

.btn-outline-primary:hover { color: var(--bs-light); }

.btn-secondary,
.btn-outline-secondary:hover {
    color: var(--diamond-dark);
    background: linear-gradient(135deg, #5B9EC9, #B8D4EA);
    border: none;
}

.btn-square  { width: 38px; height: 38px; }
.btn-sm-square { width: 32px; height: 32px; }
.btn-lg-square { width: 48px; height: 48px; }

.btn-square,
.btn-sm-square,
.btn-lg-square {
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50px;
    font-weight: normal;
}

/* ─── Icon Boxes ──────────────────────────────────────────────────── */
.icon-box-primary,
.icon-box-light {
    position: relative;
    padding: 0 0 10px 10px;
    z-index: 1;
}

.icon-box-primary i,
.icon-box-light i { font-size: 60px; line-height: 0; }

.icon-box-primary::before,
.icon-box-light::before {
    position: absolute;
    content: "";
    width: 35px;
    height: 35px;
    left: 0;
    bottom: 0;
    border-radius: 35px;
    transition: .5s;
    z-index: -1;
}

.icon-box-primary::before {
    background: linear-gradient(135deg, var(--diamond-mid), var(--diamond-sparkle));
}
.icon-box-light::before {
    background: var(--diamond-ice);
}

/* ─── Topbar ──────────────────────────────────────────────────────── */
.container-fluid.py-2 {
    background: var(--diamond-ice);
    border-bottom: 1px solid var(--diamond-pale);
}

/* ─── Brand bar ───────────────────────────────────────────────────── */
.bg-primary {
    background: var(--diamond-gradient) !important;
}

/* ─── Navbar ──────────────────────────────────────────────────────── */
.sticky-top { top: -100px; transition: .5s; }

.navbar .navbar-nav .nav-link {
    margin-right: 35px;
    padding: 20px 0;
    color: var(--diamond-dark);
    font-size: 18px;
    font-weight: 500;
    outline: none;
}
.navbar .navbar-nav .nav-link:hover,
.navbar .navbar-nav .nav-link.active { color: var(--diamond-deep); }

.navbar .dropdown-toggle::after {
    border: none;
    content: "\f107";
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    vertical-align: middle;
    margin-left: 8px;
}

@media (max-width: 991.98px) {
    .navbar .navbar-nav .nav-link { margin-right: 0; padding: 10px 0; }
    .navbar .navbar-nav { margin-top: 15px; border-top: 1px solid var(--diamond-pale); }
}

@media (min-width: 992px) {
    .sticky-top { margin-top: -34px; }
    .navbar { height: 68px; }
    .navbar .nav-item .dropdown-menu {
        display: block;
        border: none;
        margin-top: 0;
        top: 150%;
        opacity: 0;
        visibility: hidden;
        transition: .5s;
    }
    .navbar .nav-item:hover .dropdown-menu {
        top: 100%;
        visibility: visible;
        transition: .5s;
        opacity: 1;
    }
}

/* ─── Header / Carousel ───────────────────────────────────────────── */
@media (min-width: 992px) {
    .header-carousel,
    .page-header { margin-top: -34px; }
}

.carousel-caption {
    top: 0; left: 0; right: 0; bottom: 0;
    display: flex;
    align-items: center;
    background: linear-gradient(135deg, rgba(13,43,69,.55), rgba(26,74,114,.3), rgba(91,158,201,.15));
    z-index: 1;
}

.carousel-control-prev,
.carousel-control-next { width: 15%; }

.carousel-control-prev-icon,
.carousel-control-next-icon {
    width: 3.5rem;
    height: 3.5rem;
    border-radius: 3.5rem;
    background-color: var(--diamond-deep);
    border: 15px solid var(--diamond-deep);
}

@media (max-width: 767.98px) {
    #header-carousel .carousel-item {
        position: relative;
        min-height: 450px;
    }
    #header-carousel .carousel-item img {
        position: absolute;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
}

.page-header {
    background: linear-gradient(rgba(13,43,69,.45), rgba(26,74,114,.4)), url(../img/testimonial.jpg) center center no-repeat;
    background-size: cover;
}
.page-header .breadcrumb-item+.breadcrumb-item::before { color: var(--bs-white); }
.page-header .breadcrumb-item,
.page-header .breadcrumb-item a { font-size: 18px; color: var(--bs-white); }

/* ─── About ───────────────────────────────────────────────────────── */
.about-fact {
    width: 220px;
    height: 220px;
    box-shadow: 0 0 30px rgba(26,74,114,.15);
}

.about-fact.bg-primary  { background: var(--diamond-gradient) !important; }
.about-fact.bg-secondary { background: linear-gradient(135deg, #5B9EC9, #B8D4EA) !important; }
.about-fact.bg-dark      { background: linear-gradient(135deg, #0D2B45, #1A4A72) !important; }

@media (min-width: 576px) {
    .about-fact.mt-n130 { margin-top: -130px; }
}

/* ─── Service ─────────────────────────────────────────────────────── */
.container-service { position: relative; }
.container-service::before {
    position: absolute;
    content: '';
    background: var(--diamond-ice);
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    clip-path: polygon(0 0, 100% 0, 100% 30%, 0 70%);
    z-index: -1;
}

.service-item {
    position: relative;
    height: 100%;
    padding: 45px 30px;
    background: var(--bs-white);
    box-shadow: 0 0 45px rgba(26,74,114,.07);
    border-top: 3px solid transparent;
    transition: border-color .3s;
}
.service-item:hover { border-color: var(--diamond-mid); }

.service-item::before {
    position: absolute;
    content: "";
    width: 100%;
    height: 0;
    left: 0;
    bottom: 0;
    transition: .5s;
    background: var(--diamond-gradient);
}
.service-item:hover::before { height: 100%; top: 0; }

.service-item * { position: relative; transition: .5s; z-index: 1; }
.service-item:hover h5,
.service-item:hover p { color: var(--bs-white); }
.service-item:hover .icon-box-primary::before { background: rgba(255,255,255,.2); }
.service-item:hover .icon-box-primary i { color: var(--diamond-sparkle) !important; }

/* ─── Team ────────────────────────────────────────────────────────── */
.container-team { position: relative; }
.container-team::before {
    position: absolute;
    content: '';
    background: var(--diamond-ice);
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    clip-path: polygon(0 70%, 100% 30%, 100% 100%, 0% 100%);
    z-index: -1;
}

.team-item {
    background: var(--bs-white);
    box-shadow: 0 0 45px rgba(26,74,114,.07);
}
.team-item .team-social {
    position: absolute;
    width: 0;
    height: 100%;
    top: 0;
    right: 0;
    transition: .5s;
    background: var(--diamond-gradient);
    display: flex;
    align-items: center;
    justify-content: center;
}
.team-item:hover .team-social { width: 100%; left: 0; }
.team-item .team-social .btn { opacity: 0; transition: .5s; }
.team-item:hover .team-social .btn { opacity: 1; }

/* ─── Contact ─────────────────────────────────────────────────────── */
@media (min-width: 992px) {
    .contact-info::after {
        position: absolute;
        content: "";
        width: 0;
        height: 100%;
        top: 0;
        left: 50%;
        border-left: 1px dashed rgba(192,232,255,.3);
    }
}
@media (max-width: 991.98px) {
    .contact-info::after {
        position: absolute;
        content: "";
        width: 100%;
        height: 0;
        top: 50%;
        left: 0;
        border-top: 1px dashed rgba(192,232,255,.3);
    }
}

/* ─── Footer ──────────────────────────────────────────────────────── */
.footer {
    background: linear-gradient(rgba(13,43,69,.92), rgba(13,43,69,.92)), url(../img/footer.png) center center no-repeat;
    background-size: contain;
}

@media (min-width: 992px) {
    .footer::after {
        position: absolute;
        content: "";
        width: 0;
        height: 100%;
        top: 0;
        left: 50%;
        border-left: 1px dashed rgba(192,232,255,.2);
    }
}

.footer .btn.btn-link {
    display: block;
    margin-bottom: 5px;
    padding: 0;
    text-align: left;
    color: var(--diamond-silver);
    font-weight: normal;
    text-transform: capitalize;
    transition: .3s;
}
.footer .btn.btn-link::before {
    position: relative;
    content: "\f105";
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    color: var(--diamond-silver);
    margin-right: 10px;
}
.footer .btn.btn-link:hover {
    color: var(--diamond-sparkle);
    letter-spacing: 1px;
    box-shadow: none;
}

.copyright { border-top: 1px dashed rgba(192,232,255,.2); }
.copyright a { color: var(--bs-white); }
.copyright a:hover { color: var(--diamond-sparkle); }

/* ─── Diamond shimmer on headings ─────────────────────────────────── */
h1.display-1,
h1.display-6 {
    background: linear-gradient(135deg, var(--diamond-dark) 0%, var(--diamond-deep) 50%, var(--diamond-mid) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* Carousel headings should stay white */
.carousel-caption h1.display-1 {
    background: none;
    -webkit-text-fill-color: white;
    color: white;
}

/* ─── Track Certificates ─────────────────────────────────── */
/* ─── Track Page Hero ─────────────────────────────────────── */
        .cert-hero {
            width: 100%;
            min-height: 380px;
            background: linear-gradient(rgba(0,0,0,0.52), rgba(0,0,0,0.52)),
                url('https://images.unsplash.com/photo-1532187863486-abf9dbad1b69?w=1600&q=80') center/cover no-repeat;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .cert-hero h1 {
            color: #fff;
            font-size: 2.8rem;
            font-weight: 700;
            letter-spacing: 0.14em;
            text-transform: uppercase;
            text-align: center;
            font-family: 'Red Rose', serif;
            margin: 0;
        }

        /* ─── Track Form Section ──────────────────────────────────── */
        .cert-track-section {
            background: #f5f5f3;
            padding: 90px 0 110px;
        }
        .cert-track-section h2 {
            font-size: 2.1rem;
            font-weight: 700;
            color: #222;
            margin-bottom: 55px;
            text-align: center;
            font-family: 'Red Rose', serif;
        }
        .cert-form-wrap {
            max-width: 740px;
            margin: 0 auto;
            padding: 0 20px;
        }
        .cert-form-wrap label {
            display: block;
            font-size: 15px;
            color: #555;
            margin-bottom: 10px;
            font-family: 'Roboto', sans-serif;
        }
        .cert-input {
            width: 100%;
            padding: 16px 20px;
            font-size: 16px;
            border: 1.5px solid #ddd;
            border-radius: 8px;
            background: #fff;
            color: #333;
            outline: none;
            margin-bottom: 36px;
            font-family: 'Roboto', sans-serif;
            transition: border-color 0.2s;
        }
        .cert-input:focus { border-color: #5B9EC9; }
        .cert-btn-row {
            display: flex;
            gap: 18px;
            justify-content: center;
        }
        .btn-cert-view, .btn-cert-download {
            padding: 14px 44px;
            border-radius: 50px;
            font-size: 13px;
            font-weight: 700;
            letter-spacing: 0.1em;
            text-transform: uppercase;
            cursor: pointer;
            border: none;
            font-family: 'Roboto', sans-serif;
            transition: opacity 0.18s, transform 0.12s;
            background: #5B9EC9;
            color: #fff;
        }
        .btn-cert-view:hover, .btn-cert-download:hover { opacity: 0.85; transform: scale(1.03); }
        .btn-cert-view:active, .btn-cert-download:active { transform: scale(0.97); }

        .cert-result {
            display: none;
            margin-top: 40px;
            background: #fff;
            border: 1.5px solid #e0e0e0;
            border-radius: 12px;
            padding: 28px 32px;
        }
        .cert-result.visible { display: block; }
        .cert-result-title {
            font-size: 13px;
            font-weight: 700;
            color: #6a8f18;
            text-transform: uppercase;
            letter-spacing: 0.08em;
            margin-bottom: 18px;
            font-family: 'Roboto', sans-serif;
        }
        .cert-result-row {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 10px 0;
            border-bottom: 1px solid #f0f0f0;
            font-size: 14px;
            font-family: 'Roboto', sans-serif;
        }
        .cert-result-row:last-child { border-bottom: none; }
        .cert-result-row .field { color: #888; }
        .cert-result-row .value { color: #222; font-weight: 500; }
        .cert-status-badge {
            display: inline-block;
            padding: 4px 14px;
            border-radius: 50px;
            font-size: 12px;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.06em;
        }
        .badge-ready { background: #eaf3de; color: #3b6d11; }
        .badge-processing { background: #faeeda; color: #854f0b; }
        .cert-error {
            display: none;
            margin-top: 18px;
            color: #c0392b;
            font-size: 14px;
            text-align: center;
            font-family: 'Roboto', sans-serif;
        }
        .cert-error.visible { display: block; }

        /* ─── Certificate Modal Overlay ───────────────────────────── */
        .cert-overlay {
            display: none;
            position: fixed;
            inset: 0;
            background: rgba(13, 43, 69, 0.72);
            z-index: 99999;
            align-items: center;
            justify-content: center;
            padding: 20px;
            backdrop-filter: blur(3px);
        }
        .cert-overlay.active { display: flex; }

        .cert-modal {
            background: #fff;
            border-radius: 14px;
            max-width: 700px;
            width: 100%;
            max-height: 92vh;
            overflow-y: auto;
            position: relative;
            box-shadow: 0 24px 80px rgba(13,43,69,0.45);
            animation: certSlideIn 0.28s cubic-bezier(0.34,1.3,0.64,1);
        }
        @keyframes certSlideIn {
            from { opacity: 0; transform: scale(0.88) translateY(30px); }
            to   { opacity: 1; transform: scale(1) translateY(0); }
        }

        .cert-modal-close {
            position: absolute;
            top: 14px;
            right: 18px;
            font-size: 24px;
            cursor: pointer;
            color: #fff;
            background: rgba(255,255,255,0.18);
            border: none;
            line-height: 1;
            z-index: 10;
            width: 32px;
            height: 32px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: background 0.2s;
        }
        .cert-modal-close:hover { background: rgba(255,255,255,0.35); }

        /* ─── Certificate Card Design ─────────────────────────────── */
        #certPreview {
            padding: 0;
            font-family: 'Roboto', sans-serif;
            background: #fff;
            border-radius: 14px 14px 0 0;
            overflow: hidden;
        }

        .cert-header-band {
            background: linear-gradient(135deg, #1A4A72 0%, #2a6099 50%, #5B9EC9 100%);
            color: #fff;
            text-align: center;
            padding: 26px 30px 22px;
            position: relative;
        }
        .cert-header-band::after {
            content: '';
            position: absolute;
            bottom: -12px;
            left: 50%;
            transform: translateX(-50%);
            width: 0;
            height: 0;
            border-left: 16px solid transparent;
            border-right: 16px solid transparent;
            border-top: 13px solid #2a6099;
        }
        .cert-org-name {
            font-size: 1.35rem;
            font-weight: 700;
            letter-spacing: 0.1em;
            text-transform: uppercase;
            font-family: 'Red Rose', serif;
            margin: 0 0 4px;
        }
        .cert-org-sub {
            font-size: 11.5px;
            opacity: 0.82;
            letter-spacing: 0.05em;
            text-transform: uppercase;
            margin: 0;
        }

        .cert-body-wrap {
            padding: 32px 40px 24px;
        }

        .cert-logo-row {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 20px;
        }
        .cert-logo-text {
            font-size: 1.7rem;
            font-weight: 700;
            color: #1A4A72;
            letter-spacing: 0.04em;
            font-family: 'Red Rose', serif;
        }
        .cert-logo-text span { color: #5B9EC9; }

        .cert-badge-pill {
            font-size: 11px;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.07em;
            padding: 5px 16px;
            border-radius: 50px;
        }
        .badge-pill-ready    { background: #eaf3de; color: #3b6d11; }
        .badge-pill-process  { background: #faeeda; color: #854f0b; }

        .cert-divider-title {
            text-align: center;
            border-top: 2px solid #1A4A72;
            border-bottom: 2px solid #1A4A72;
            padding: 8px 0;
            margin-bottom: 26px;
        }
        .cert-divider-title h3 {
            margin: 0;
            font-size: 11px;
            font-weight: 700;
            color: #1A4A72;
            letter-spacing: 0.14em;
            text-transform: uppercase;
        }

        .cert-fields-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 14px 32px;
            margin-bottom: 24px;
        }
        .cert-field {
            border-bottom: 1px dashed #d0dce6;
            padding-bottom: 8px;
        }
        .cert-field.full-width { grid-column: span 2; }
        .cf-label {
            font-size: 10px;
            color: #8a9bb0;
            text-transform: uppercase;
            letter-spacing: 0.07em;
            margin-bottom: 3px;
        }
        .cf-value {
            font-size: 14px;
            font-weight: 500;
            color: #1A4A72;
        }

        .cert-notice {
            background: #f0f6fb;
            border-left: 3px solid #5B9EC9;
            border-radius: 0 6px 6px 0;
            padding: 10px 14px;
            font-size: 11.5px;
            color: #5a7a96;
            margin-bottom: 24px;
            line-height: 1.6;
        }

        .cert-footer-strip {
            background: linear-gradient(135deg, #0D2B45 0%, #1A4A72 100%);
            padding: 16px 40px;
            display: flex;
            align-items: center;
            justify-content: space-between;
        }
        .cert-footer-left {
            font-size: 12px;
            color: rgba(255,255,255,0.75);
            line-height: 1.6;
        }
        .cert-footer-left strong { color: #fff; }

        .cert-qr-box {
            width: 58px;
            height: 58px;
            background: #fff;
            border-radius: 8px;
            display: grid;
            grid-template-columns: repeat(5,1fr);
            grid-template-rows: repeat(5,1fr);
            gap: 2px;
            padding: 6px;
        }
        .qr-dot {
            background: #1A4A72;
            border-radius: 1px;
        }
        .qr-dot.empty { background: transparent; }

        /* ─── Modal Action Bar ────────────────────────────────────── */
        .cert-modal-actions {
            padding: 14px 40px 18px;
            display: flex;
            gap: 12px;
            justify-content: flex-end;
            border-top: 1px solid #e8edf2;
            background: #fafcfe;
            border-radius: 0 0 14px 14px;
        }
        .btn-modal-close-out {
            padding: 11px 28px;
            border-radius: 50px;
            font-size: 12px;
            font-weight: 700;
            letter-spacing: 0.08em;
            text-transform: uppercase;
            cursor: pointer;
            border: 1.5px solid #c8d6e0;
            background: #fff;
            color: #5a7a96;
            font-family: 'Roboto', sans-serif;
            transition: background 0.15s;
        }
        .btn-modal-close-out:hover { background: #f0f6fb; }
        .btn-modal-dl {
            padding: 11px 30px;
            border-radius: 50px;
            font-size: 12px;
            font-weight: 700;
            letter-spacing: 0.08em;
            text-transform: uppercase;
            cursor: pointer;
            border: none;
            background: linear-gradient(135deg, #1A4A72, #5B9EC9);
            color: #fff;
            font-family: 'Roboto', sans-serif;
            transition: opacity 0.15s, transform 0.12s;
        }
        .btn-modal-dl:hover  { opacity: 0.88; transform: scale(1.03); }
        .btn-modal-dl:active { transform: scale(0.97); }