/* header */

    a.navbar-brand>img {
        width: 100px;
        height: 50px;
    }

    @media (max-width:768px) {
        .course-sidebar {
            margin-top: 0px;
        }
    }
    /* home */

    .course-box-wrap {
        width: 50%;
        float: left;
    }

    @media (min-width:768px) {
        .course-box-wrap {
            width: 20%;
            float: left;
        }
    }

    .course-box .course-details .title {
        display: flex !important;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    .course-popover-content .course-subtitle {
        text-align: justify;
        ;
        line-clamp: inherit;
        -webkit-line-clamp: inherit;
        -moz-line-clamp: inherit;
        -ms-line-clamp: inherit;
        -o-line-clamp: inherit;
    }

    .course-popover-content .popover-btns {
        margin-top: 20px;
        padding-right: 0;
    }

    .course-popover-content .course-meta {
        text-align: right;
    }

    .course-box .course-details .price {
        padding-bottom: 0;
        margin-bottom: 0;
    }

    .course-box-wrap a {
        color: #888;
        font-size: 0.8em;
        text-align: center;
    }
    /* categoria */

    @media (min-width: 768px) {
        #collapseFilter {
            display: block;
            height: auto !important;
            visibility: visible;
        }
    }

    .course-box-2 .course-price-rating .rating .average-rating {
        font-size: 0.7em;
    }
    /* curso */

    .course-sidebar {
        margin-top: -300px;
    }

    div.average-rating>.rating>i.fa-star {
        color: #abb0bb !important;
    }

    div.average-rating>.rating>i.fa-star.filled {
        color: #f5c85b !important;
    }

    .rating-row>span i.fa-star {
        color: #ffffff !important;
    }

    .rating-row>span i.fa-star.filled {
        color: #f5c85b !important;
    }

    .course-curriculum-box {
        margin-top: 40px;
    }

    .what-you-get-box ul li {
        display: inline-block;
    }

    .description-box {
        max-height: 410px;
    }

    .view-more {
        text-align: center;
    }

    .preview-video-box {
        text-align: center;
    }

    .course-comparism-item {
        padding: 10px 0;
    }

    .course-comparism-item .item-title {
        width: 85%;
        padding-left: 0;
    }

    .course-comparism-item .item-details {
        width: 15%;
        padding-left: 2em;
    }

    .course-comparism-item-container a:hover {
        background-color: transparent;
    }

    .course-comparism-item-container.this-course {
        border-bottom: transparent;
    }

    .course-comparism-item .item-details .item-duration {
        width: 6em;
        text-align: right;
    }

    .course-comparism-item .item-details .item-price {
        right: 0;
        flex-direction: row;
        justify-content: space-evenly;
        align-items: baseline;
    }

    .course-comparism-item .item-details .item-price .original-price {
        margin: 0 10px;
    }

    .about-instructor-details {
        text-align: center;
    }

    .about-instructor-box .about-instructor-image img {
        border-radius: 10%;
        margin-bottom: 10px;
        width: 120 px;
        height: auto;
    }

    .student-feedback-box {
        margin: 0;
    }
    /* form */

    .g-recaptcha>div {
        margin: 0 auto;
    }
    /* texts */

    #legal {
        text-align: justify;
        margin: 2em 0 3em 0;
    }

    #legal .inner {
        padding-left: 3em;
    }

    #legal h2,
    #legal h4 {
        padding-top: 1em;
    }

    #legal h4 {
        padding-bottom: 0.3em;
        color: #555;
    }

    #legal h2 {
        font-weight: bold;
        padding-bottom: 0.3em;
        border-bottom: 1px solid #ddd;
    }

    #legal dt {
        float: left;
        min-width: 12em;
    }

    iframe {
        border-radius: 8px;
    }

    iframe.is-invalid,
    .form-control.is-invalid,
    .form-control.is-invalid:focus {
        border: 2px solid #dc3545 !important;
        box-shadow: 0 0 0 0.2rem rgb(220 53 69 / 25%) !important;
    }
    /* CALCULATED COLORS */

    section.course-header-area {
        background-color: var(--color2);
    }

    .home-fact-area {
        background: linear-gradient( -45deg, var(--color1), var(--color1darker)) !important;
    }

    .search-box button,
    .home-banner-wrap .btn {
        color: #fff !important;
    }

    a.pdf {
        font-size: 1.2em;
        color: var(--color1darker);
    }

    a.pdf:hover {
        color: var(--color1);
    }

    .alert-success {
        background-color: var(--color1lighter);
        color: var(--color1darker);
        border-color: var(--color1darker);
    }

    .footer-area {
        border-bottom: 6px solid var(--color1) !important;
    }

    .custom-radio:checked+label:after,
    .custom-radio:not(:checked)+label:after {
        background-color: var(--color1) !important;
    }

    .search-box button:hover,
    .search-box button:focus {
        background-color: var(--color1darker) !important;
        border-color: var(--color1darker) !important;
    }

    .btn {
        background-color: var(--color1) !important;
        border: 1px solid var(--color1) !important;
    }

    .btn:hover,
    .btn:focus {
        background-color: var(--color1darker) !important;
        border-color: var(--color1darker) !important;
    }

    .sign-in-box .btn-sign-up {
        background-color: var(--color1) !important;
        border: 1px solid var(--color1) !important;
    }

    .sign-in-box .btn-sign-up:hover,
    .sign-in-box .btn-sign-up:focus {
        background-color: var(--color1darker) !important;
        border-color: var(--color1darker) !important;
    }

    .sign-in-modal form button[type="submit"] {
        background-color: var(--color1) !important;
        border-color: var(--color1) !important;
    }

    .sign-in-modal form button[type="submit"]:hover,
    .sign-in-modal form button[type="submit"]:focus {
        background-color: var(--color1darker) !important;
        border-color: var(--color1darker) !important;
    }

    .course-sidebar-text-box .buy-btns .btn-buy-now {
        background-color: var(--color1) !important;
        border-color: var(--color1) !important;
    }

    .course-sidebar-text-box .buy-btns .btn-buy-now:hover,
    .course-sidebar-text-box .buy-btns .btn-buy-now:focus {
        background-color: var(--color1darker) !important;
        border-color: var(--color1darker) !important;
    }

/* Contenedor principal */
.pagination {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    margin-top: 2rem;
}

/* Información de resultados */
.pagination-info {
    font-size: 0.875rem;
    color: #6b7280;
    width: 100%;
    text-align: center;
    margin-bottom: 1rem;
}

/* Navegación de páginas */
.pagination-nav {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
}

/* Enlaces de navegación */
.pagination-nav a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.5rem 0.75rem;
    text-decoration: none;
    color: #374151;
    border: 1px solid #d1d5db;
    border-radius: 0.375rem;
    transition: all 0.2s;
}

.pagination-nav a:hover {
    background-color: #f3f4f6;
    color: #111827;
}

/* Página actual */
.pagination-nav span[aria-current="page"] span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.5rem 0.75rem;
    background-color: #3b82f6;
    color: white;
    border: 1px solid #3b82f6;
    border-radius: 0.375rem;
    font-weight: 600;
}

/* Separador de puntos suspensivos */
.pagination-nav span[aria-disabled="true"] span {
    padding: 0.5rem 0.75rem;
    color: #9ca3af;
}

/* Enlaces anterior/siguiente (ocultos visualmente) */
.pagination-prev,
.pagination-next {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* SVG de flechas */
.pagination-nav svg {
    width: 1.25rem;
    height: 1.25rem;
    fill: currentColor;
}