:root {
    --Colors-bluelight: #f4faff;
    --Colors-text: #303030;
    --Colors-main: #005ca3;
    --Colors-bg: #fff;
}

.certificates-section {
    overflow: hidden;
    background-color: var(--Colors-bg, #fff);
    margin: 0 -4px;
}

.certificates-section .content-header {
    justify-content: space-between;
    padding-top: 0;
    margin-bottom: 14px;
}

.slick-list {
    padding: 20px 0 !important;
}

.widget_certificates {
    margin-top: 101px;
}

.certificates-container {
    width: 100%;
}

@media (max-width: 991px) {
    .certificates-container {
        max-width: 100%;
    }
}

.section-heading {
    width: 100%;
}

@media (max-width: 991px) {
    .section-heading {
        max-width: 100%;
    }
}

.title-header {
    display: flex;
    min-height: 37px;
    width: 100%;
    align-items: center;
    gap: 16px;
    color: var(--Colors-text, #303030);
    white-space: nowrap;
    text-transform: uppercase;
    letter-spacing: 7.2px;
    flex-wrap: wrap;
    padding: 10px 0;
    font: 800 18px/1 NAMU, -apple-system, Roboto, Helvetica, sans-serif;
}

@media (max-width: 991px) {
    .title-header {
        max-width: 100%;
        white-space: initial;
    }
}

.btn-close {
    box-sizing: content-box;
    width: 1em;
    height: 1em;
    position: absolute;
    right: 5%;
    padding: .25em .25em;
    color: #000;
    background: transparent url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='currentColor' d='M2.146 2.146a.5.5 0 0 1 .708 0L8 7.293l5.146-5.147a.5.5 0 0 1 .708.708L8.707 8l5.147 5.146a.5.5 0 0 1-.708.708L8 8.707l-5.146 5.147a.5.5 0 0 1-.708-.708L7.293 8 2.146 2.854a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e") center/2em auto no-repeat;
    border: 0;
    border-radius: .375rem;
    opacity: .5;
}

.btn-close:hover {
    color: #000;
    text-decoration: none;
    opacity: .75;
}

.btn-close:focus {
    outline: 0;
    box-shadow: 0 0 0 .25rem rgba(13,110,253,.25);
    opacity: 1;
}

.btn-close:disabled, .btn-close.disabled {
    pointer-events: none;
    user-select: none;
    opacity: .25;
}

.navigation-controls {
    min-width: 240px;
    max-width: 540px;
    width: 100%;
    padding-top: 11px;
}

@media (max-width: 991px) {
    .navigation-controls {
        max-width: 100%;
        margin-bottom: 42px;
    }
}

.nav-content {
    display: flex;
    width: 100%;
    max-width: 541px;
    align-items: start;
    gap: 40px 100px;
    justify-content: space-between;
    flex-wrap: wrap;
}

@media (max-width: 991px) {
    .nav-content {
        max-width: 100%;
    }
}

.certificates-grid {
    display: block;
    width: auto;
    align-items: start;
    gap: 30px;
    justify-content: start;
    flex-wrap: wrap;
    margin: 0 -15px;
}

.certificates-grid.slick-initialized {
    display: flex;
}

@media (max-width: 991px) {
    .certificates-grid {
        max-width: 100%;
    }
}

.certificate-card-item {
    padding: 0 15px;
}

.certificates-grid .slick-slide {
    margin: 0;
}

.certificate-card {
    align-items: stretch;
    border-radius: 10px;
    border: 0.899px solid rgba(21, 27, 33, 0.2);
    display: flex;
    min-width: 240px;
    width: 100%;
    max-width: 404px;
    overflow: hidden;
    background-color: var(--Colors-bg, #fff);
    padding: 28px 0px 27px 25px;
    margin: 0;
    outline: none;
    position: relative;
    transition: all 0.3s ease;
}

/* Certificate overlay with view and download icons */
.certificate-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(0deg, rgba(0, 0, 0, 0.45), rgba(0, 0, 0, 0.45));
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 36px;
    opacity: 0;
    transition: opacity 0.3s ease;
    border-radius: 10px;
    padding: 17px 7px 0 0px;
}

/* Show overlay on hover for desktop */
@media (min-width: 992px) {
    .certificate-card:hover .certificate-overlay {
        opacity: 1;
    }
}

/* Show overlay on click for mobile */
.certificate-card.active .certificate-overlay {
    opacity: 1;
}

.certificate-icon {
    width: 68px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: transform 0.3s ease;
}

.certificate-icon:hover {
    transform: scale(1.1);
}

.certificate-icon svg {
    width: 100%;
    height: auto;
}

.certificate-icon.view-icon svg path {
    fill: white;
}

.certificate-icon.download-icon svg path {
    fill: white;
}

@media (max-width: 991px) {
    .certificate-card {
        padding: 0 20px;
    }
}

.certificate-image {
    width: 100%;
    max-width: 350px;
}

/* Slider styles */
.slick-slide {
    margin: 0 15px;
    outline: none;
}

.slick-prev, .slick-next {
    display: none !important;
}

.slick-dots {
    display: none !important;
}

/* Certificate modal styles */
.certificate-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.9);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    padding: 20px;
}

.certificate-modal-content {
    position: relative;
    max-width: 90%;
    max-height: 90%;
    display: flex;
    flex-direction: column;
}

.certificate-modal-close {
    position: absolute;
    top: -40px;
    right: 0;
    z-index: 10000;
    background-color: white;
    border-radius: 50%;
    width: 30px;
    height: 30px;
    padding: 5px;
}

.certificate-modal-body {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
}

.certificate-modal-image {
    max-width: 100%;
    max-height: 80vh;
    object-fit: contain;
}

/* Prevent scrolling when modal is open */
body.certificate-modal-open {
    overflow: hidden;
}

@media (max-width: 991px) {
    .certificate-modal {
        padding: 10px;
    }

    .widget_certificates {
        margin-top: 61px;
    }

    .certificate-modal-content {
        max-width: 100%;
        max-height: 100%;
    }

    .certificate-modal-close {
        top: -35px;
        right: 5px;
        width: 25px;
        height: 25px;
        padding: 3px;
    }
}

@media (max-width: 640px) {
    .certificates-section {
        margin: 0;
    }

    .certificates-section .navigation-controls {
        padding-top: 14px;
    }

    .certificates-section .nav-divider-container {
        margin-top: 22px;
    }

    .certificates-section .content-header {
    }

    .slick-list {
    }

    .widget_certificates {
    }

    .certificates-container {
    }

    .section-heading {
    }

    .title-header {
    }

    .btn-close {
    }

    .btn-close:hover {
    }

    .btn-close:focus {
    }

    .btn-close.disabled {
    }

    .navigation-controls {
    }

    .nav-content {
    }

    .certificates-grid {
        /* margin: 0; */
        width: auto;
        max-width: none;
    }

    .certificates-grid .slick-slide {
        margin: 0;
    }

    .certificates-grid.slick-initialized {
        display: block;
    }

    .certificate-card-item {
    }

    .certificate-card-item.slick-slide {
    }

    .certificate-card {
        padding: 25px 27px 27px 28px;
    }

    .certificate-overlay {
    }

    .certificate-card.active .certificate-overlay {
    }

    .certificate-icon {
    }

    .certificate-icon:hover {
    }

    .certificate-icon svg {
    }

    .certificate-icon.view-icon svg path {
    }

    .certificate-icon.download-icon svg path {
    }

    .certificate-image {
    }

    .slick-slide {
    }

    .slick-next {
    }

    .slick-dots {
    }

    .certificate-modal {
    }

    .certificate-modal-content {
    }

    .certificate-modal-close {
    }

    .certificate-modal-body {
    }

    .certificate-modal-image {
    }

    body.certificate-modal-open {
    }
}