body {
    font-family: "Poppins", sans-serif;
    scroll-behavior: smooth;
}

#mainNavbar {
    transition: 0.4s;

    padding: 15px 0;

    background: rgba(0, 0, 0, 0.2);

    backdrop-filter: blur(10px);
}

#mainNavbar.scrolled {
    background: #0d6efd;

    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);

    padding: 8px 0;
}

.nav-link {
    color: #fff !important;

    font-weight: 500;

    margin-left: 10px;
}

.nav-link:hover {
    color: #ffc107 !important;
}

.navbar-brand {
    color: #fff !important;
}

#scrollTop {
    position: fixed;

    right: 20px;

    bottom: 20px;

    display: none;

    z-index: 9999;

    width: 45px;

    height: 45px;
}

#preloader {
    position: fixed;

    inset: 0;

    background: #fff;

    display: flex;

    justify-content: center;

    align-items: center;

    z-index: 99999;
}

/*==========================
        HERO SECTION
==========================*/

.hero-section {
    position: relative;

    overflow: hidden;

    background: linear-gradient(135deg, #0f172a, #1d4ed8);

    color: #fff;

    padding: 120px 0;
}

.hero-title {
    font-size: 52px;

    font-weight: 800;

    color: #fff;

    margin-bottom: 15px;

    letter-spacing: 0.5px;
}

.hero-designation {
    color: #ffc107;

    font-weight: 600;
}

.hero-about {
    font-size: 17px;
    color: rgba(255, 255, 255, 0.75);
    opacity: 0.9;

    line-height: 30px;
}

.hero-badge {
    display: inline-flex;

    align-items: center;

    gap: 10px;

    color: #4ea8ff;

    border: 1px solid rgba(78, 168, 255, 0.35);

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

    padding: 10px 25px;

    border-radius: 50px;

    font-size: 14px;

    font-weight: 600;

    letter-spacing: 2px;

    backdrop-filter: blur(10px);
}

.hero-image-wrapper {
    position: relative;

    display: inline-block;
}

.hero-image {
    width: 420px;

    height: 420px;

    object-fit: cover;

    border-radius: 50%;

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

    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.35);

    animation: float 4s ease-in-out infinite;
}

@keyframes float {
    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-12px);
    }
}

.hero-social a {
    width: 50px;

    height: 50px;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    margin-right: 10px;

    border-radius: 50%;

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

    color: #fff;

    text-decoration: none;

    transition: 0.4s;
}

.hero-social a:hover {
    background: #ffc107;

    color: #000;

    transform: translateY(-5px);
}
.hero-shape {
    position: absolute;

    border-radius: 50%;

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

    animation: moveShape 12s linear infinite;
}

.shape-1 {
    width: 250px;

    height: 250px;

    top: -80px;

    left: -80px;
}

.shape-2 {
    width: 180px;

    height: 180px;

    bottom: 60px;

    right: 120px;
}

.shape-3 {
    width: 120px;

    height: 120px;

    top: 30%;

    right: 10%;
}

@keyframes moveShape {
    0% {
        transform: translateY(0) rotate(0deg);
    }

    50% {
        transform: translateY(-30px) rotate(180deg);
    }

    100% {
        transform: translateY(0) rotate(360deg);
    }
}
/* 
.hero-stat-card {
    position: relative;

    overflow: hidden;

    padding: 25px;

    border-radius: 20px;

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

    backdrop-filter: blur(20px);

    border: 1px solid rgba(255, 255, 255, 0.15);

    transition: 0.4s;

    height: 100%;
}

.hero-stat-card:hover {
    transform: translateY(-10px);

    background: #fff;

    color: #0d6efd;

    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.18);
}

.hero-stat-card h2 {
    font-size: 42px;

    font-weight: 700;

    margin-top: 20px;

    margin-bottom: 5px;
}

.hero-stat-card h6 {
    font-weight: 600;

    margin-bottom: 4px;
}

.hero-stat-card small {
    opacity: 0.75;
}

.stat-icon {
    width: 65px;

    height: 65px;

    border-radius: 18px;

    display: flex;

    justify-content: center;

    align-items: center;

    color: #fff;

    font-size: 26px;
}

.hero-stat-card::before {
    content: "";

    position: absolute;

    left: 0;

    top: 0;

    width: 100%;

    height: 5px;

    background: linear-gradient(90deg, #0d6efd, #00c6ff);
} */

/*==================================
      ACHIEVEMENT SECTION
==================================*/

.achievement-section {
    position: relative;

    padding: 100px 0;

    background: linear-gradient(135deg, #071426, #0b1f3a);

    overflow: hidden;
}

.achievement-title {
    font-size: 52px;

    font-weight: 800;

    color: #fff;

    margin-bottom: 15px;

    letter-spacing: 0.5px;
}

.achievement-subtitle {
    color: rgba(255, 255, 255, 0.75);

    font-size: 18px;

    max-width: 700px;

    margin: auto;

    line-height: 30px;
}

.achievement-tag {
    display: inline-flex;

    align-items: center;

    gap: 10px;

    color: #4ea8ff;

    border: 1px solid rgba(78, 168, 255, 0.35);

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

    padding: 10px 25px;

    border-radius: 50px;

    font-size: 14px;

    font-weight: 600;

    letter-spacing: 2px;

    backdrop-filter: blur(10px);
}

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

.achievement-card {
    position: relative;

    overflow: hidden;

    border-radius: 24px;

    padding: 35px 25px;

    height: 100%;

    text-align: center;

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

    border: 1px solid rgba(255, 255, 255, 0.08);

    backdrop-filter: blur(20px);

    transition: 0.45s;
}

.achievement-card:hover {
    transform: translateY(-15px);

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

    box-shadow:
        0 25px 50px rgba(0, 0, 0, 0.35),
        0 0 35px rgba(13, 110, 253, 0.3);
}
.achievement-card h2 {
    font-size: 48px;

    font-weight: 800;

    color: #fff;

    margin: 25px 0 8px;
}

.achievement-card h5 {
    color: #fff;

    font-size: 22px;

    font-weight: 700;

    margin-bottom: 10px;
}

.achievement-card p {
    color: rgba(255, 255, 255, 0.7);

    font-size: 15px;

    line-height: 26px;

    margin-bottom: 30px;
}

.achievement-icon {
    width: 85px;

    height: 85px;

    margin: auto;

    border-radius: 22px;

    display: flex;

    justify-content: center;

    align-items: center;

    color: #fff;

    font-size: 34px;

    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.35);
}

.achievement-line {
    width: 60px;

    height: 4px;

    margin: auto;

    border-radius: 50px;

    background: linear-gradient(90deg, #00d2ff, #3a7bd5);
}

.achievement-card:hover .achievement-line {
    width: 120px;

    transition: 0.4s;
}
/*=========================================
        PREMIUM ANIMATIONS
=========================================*/

.achievement-card::before {
    content: "";

    position: absolute;

    inset: -2px;

    border-radius: 24px;

    padding: 2px;

    background: linear-gradient(135deg, #00d4ff, #6a5cff, #ff4fd8, #00d4ff);

    background-size: 300% 300%;

    animation: borderMove 6s linear infinite;

    -webkit-mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);

    -webkit-mask-composite: xor;

    mask-composite: exclude;

    pointer-events: none;
}

@keyframes borderMove {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}

/*=========================
      GLOW EFFECT
=========================*/

.achievement-card::after {
    content: "";

    position: absolute;

    width: 180px;

    height: 180px;

    background: rgba(13, 110, 253, 0.25);

    border-radius: 50%;

    filter: blur(70px);

    top: -70px;

    right: -70px;

    opacity: 0;

    transition: 0.5s;
}

.achievement-card:hover::after {
    opacity: 1;
}

.achievement-card:hover .achievement-icon {
    transform: rotate(-10deg) scale(1.15);

    box-shadow: 0 15px 35px rgba(13, 110, 253, 0.45);
}

.achievement-icon {
    transition: 0.45s;
}
/*=========================================
      FLOATING CIRCLES
=========================================*/

.achievement-bg-circle {
    position: absolute;

    border-radius: 50%;

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

    animation: floating 12s ease-in-out infinite;
}

.circle-1 {
    width: 260px;

    height: 260px;

    left: -80px;

    top: -80px;
}

.circle-2 {
    width: 180px;

    height: 180px;

    right: 100px;

    bottom: 50px;

    animation-delay: 2s;
}

.circle-3 {
    width: 120px;

    height: 120px;

    top: 35%;

    right: 8%;

    animation-delay: 4s;
}

@keyframes floating {
    0%,
    100% {
        transform: translateY(0) rotate(0deg);
    }

    50% {
        transform: translateY(-35px) rotate(180deg);
    }
}
/*=========================================
      GLASS REFLECTION
=========================================*/

.achievement-card {
    isolation: isolate;
}

.achievement-card span {
    position: relative;

    z-index: 2;
}

.achievement-card .achievement-icon {
    position: relative;

    z-index: 2;
}

.achievement-card h2,
.achievement-card h5,
.achievement-card p {
    position: relative;

    z-index: 2;
}

.achievement-card {
    overflow: hidden;
}

.achievement-card .shine {
    display: none;
}

.achievement-card:hover {
    cursor: pointer;
}

.achievement-card:hover {
    transition: all 0.45s ease;
}
/*=========================================
        RESPONSIVE
=========================================*/

@media (max-width: 992px) {
    .achievement-title {
        font-size: 40px;
    }
}

@media (max-width: 768px) {
    .achievement-title {
        font-size: 32px;
    }

    .achievement-card {
        padding: 25px 18px;
    }

    .achievement-card h2 {
        font-size: 34px;
    }

    .achievement-icon {
        width: 70px;

        height: 70px;

        font-size: 28px;
    }
}
/*=========================================
        RESPONSIVE
=========================================*/

@media (max-width: 992px) {
    .achievement-title {
        font-size: 40px;
    }
}

@media (max-width: 768px) {
    .achievement-title {
        font-size: 32px;
    }

    .achievement-card {
        padding: 25px 18px;
    }

    .achievement-card h2 {
        font-size: 34px;
    }

    .achievement-icon {
        width: 70px;

        height: 70px;

        font-size: 28px;
    }
}
/*=========================================
        MOUSE GLOW EFFECT
=========================================*/

.achievement-card {
    position: relative;

    overflow: hidden;

    transform-style: preserve-3d;

    perspective: 1000px;
}

.achievement-card .mouse-glow {
    position: absolute;

    width: 220px;

    height: 220px;

    background: radial-gradient(
        circle,
        rgba(255, 255, 255, 0.28) 0%,
        rgba(255, 255, 255, 0.1) 35%,
        transparent 75%
    );

    border-radius: 50%;

    pointer-events: none;

    transform: translate(-50%, -50%);

    opacity: 0;

    transition: opacity 0.25s;

    mix-blend-mode: screen;
}

.achievement-card:hover .mouse-glow {
    opacity: 1;
}

/*=========================
      3D HOVER
=========================*/

.achievement-card {
    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease;
}

.achievement-card:hover {
    box-shadow:
        0 30px 70px rgba(0, 0, 0, 0.3),
        0 0 40px rgba(13, 110, 253, 0.35);
}

/*=========================
        SHINE EFFECT
=========================*/

.achievement-card::after {
    content: "";

    position: absolute;

    top: -120%;

    left: -60%;

    width: 50%;

    height: 250%;

    background: linear-gradient(
        90deg,
        transparent,
        rgba(255, 255, 255, 0.35),
        transparent
    );

    transform: rotate(25deg);

    transition: 0.9s;
}

.achievement-card:hover::after {
    left: 150%;
}

/*=========================
      ICON FLOAT
=========================*/

.achievement-icon {
    animation: iconFloat 3s ease-in-out infinite;
}

@keyframes iconFloat {
    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-8px);
    }
}

/*=========================
      NUMBER GLOW
=========================*/

.achievement-card h2 {
    text-shadow:
        0 0 10px rgba(255, 255, 255, 0.15),
        0 0 25px rgba(0, 123, 255, 0.25);
}

/*==================================================
            RESEARCH PROFILE SECTION
==================================================*/

.research-profile-section {
    position: relative;

    overflow: hidden;

    background: linear-gradient(135deg, #0f172a, #1e3a8a);

    padding: 100px 0;
}

/*==========================
        GLASS CARD
===========================*/

.glass-card {
    position: relative;

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

    border: 1px solid rgba(255, 255, 255, 0.12);

    backdrop-filter: blur(18px);

    -webkit-backdrop-filter: blur(18px);

    border-radius: 25px;

    padding: 35px;

    transition: 0.45s;

    overflow: hidden;
}

.glass-card:hover {
    transform: translateY(-10px);

    box-shadow:
        0 20px 45px rgba(0, 0, 0, 0.35),
        0 0 30px rgba(13, 110, 253, 0.35);
}

/*==========================
        PROFILE PHOTO
===========================*/

.research-photo {
    width: 180px;

    height: 180px;

    border-radius: 50%;

    object-fit: cover;

    border: 6px solid rgba(255, 255, 255, 0.18);

    box-shadow:
        0 15px 40px rgba(0, 0, 0, 0.35),
        0 0 25px rgba(13, 110, 253, 0.35);

    transition: 0.4s;
}

.research-photo:hover {
    transform: scale(1.05);
}

/*==========================
        INFO LIST
===========================*/

.profile-info {
    display: flex;

    align-items: center;

    margin-bottom: 22px;
}

.profile-info i {
    width: 52px;

    height: 52px;

    border-radius: 15px;

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

    display: flex;

    justify-content: center;

    align-items: center;

    color: #4ea8ff;

    margin-right: 18px;

    font-size: 18px;
}

.profile-info small {
    color: #b8c7dc;

    display: block;

    margin-bottom: 4px;
}

.profile-info strong {
    color: #fff;

    font-weight: 600;
}

/*==========================
      BIOGRAPHY
===========================*/

.profile-biography {
    color: #dbe4f0;

    line-height: 32px;

    font-size: 17px;

    text-align: justify;
}

/*==========================
     RESEARCH TAGS
===========================*/

.research-area-tags {
    display: flex;

    flex-wrap: wrap;

    gap: 15px;
}

.research-tag {
    background: rgba(255, 255, 255, 0.1);

    color: #fff;

    padding: 12px 22px;

    border-radius: 50px;

    border: 1px solid rgba(255, 255, 255, 0.1);

    transition: 0.35s;

    font-weight: 500;
}

.research-tag:hover {
    background: #0d6efd;

    transform: translateY(-4px);
}

/*==========================
     SOCIAL CARDS
===========================*/

.research-link-card {
    display: flex;

    align-items: center;

    text-decoration: none;

    padding: 20px;

    border-radius: 18px;

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

    border: 1px solid rgba(255, 255, 255, 0.08);

    transition: 0.4s;

    color: #fff;
}

.research-link-card:hover {
    background: #fff;

    color: #0d6efd;

    transform: translateY(-6px);
}

.research-link-card h5 {
    margin: 0;

    font-size: 18px;

    font-weight: 600;
}

.research-link-card small {
    color: #cdd7e6;
}

.research-link-card:hover small {
    color: #666;
}

.research-icon {
    width: 60px;

    height: 60px;

    border-radius: 18px;

    display: flex;

    justify-content: center;

    align-items: center;

    color: #fff;

    font-size: 22px;

    margin-right: 18px;

    flex-shrink: 0;
}

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

@media (max-width: 991px) {
    .hero-title {
        font-size: 38px;
    }

    .glass-card {
        padding: 25px;
    }
}

@media (max-width: 768px) {
    .research-photo {
        width: 150px;

        height: 150px;
    }

    .research-link-card {
        padding: 15px;
    }

    .research-icon {
        width: 50px;

        height: 50px;

        font-size: 18px;
    }
}

/*==================================================
        PREMIUM ANIMATION EFFECT
==================================================*/

.glass-card::before {
    content: "";

    position: absolute;

    inset: 0;

    border-radius: 25px;

    padding: 1px;

    background: linear-gradient(
        135deg,
        rgba(255, 255, 255, 0.35),
        transparent,
        rgba(13, 110, 253, 0.45)
    );

    -webkit-mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);

    -webkit-mask-composite: xor;

    mask-composite: exclude;

    pointer-events: none;
}

.glass-card::after {
    content: "";

    position: absolute;

    top: -60%;

    left: -120%;

    width: 80%;

    height: 220%;

    background: linear-gradient(
        120deg,
        transparent,
        rgba(255, 255, 255, 0.18),
        transparent
    );

    transform: rotate(25deg);

    transition: 1s;
}

.glass-card:hover::after {
    left: 150%;
}

/*==================================================
            FLOATING LIGHT
==================================================*/

.research-profile-section .hero-shape {
    opacity: 0.18;

    animation: profileFloat 12s linear infinite;
}

@keyframes profileFloat {
    0% {
        transform: translateY(0) rotate(0);
    }

    50% {
        transform: translateY(-25px) rotate(180deg);
    }

    100% {
        transform: translateY(0) rotate(360deg);
    }
}

.shape-1 {
    left: -80px;

    top: -80px;
}

.shape-2 {
    right: -60px;

    bottom: 50px;
}

.shape-3 {
    right: 20%;

    top: 25%;
}

/*==================================================
            PROFILE IMAGE
==================================================*/

.profile-left-card {
    text-align: center;
}

.profile-left-card:hover .research-photo {
    transform: scale(1.08) rotate(2deg);
}

.profile-left-card:hover .profile-info i {
    background: #0d6efd;

    color: #fff;

    transform: rotate(-8deg);
}

/*==================================================
            BUTTONS
==================================================*/

.glass-card .btn {
    transition: 0.35s;
}

.glass-card .btn-warning:hover {
    transform: translateY(-4px);

    box-shadow: 0 12px 30px rgba(255, 193, 7, 0.35);
}

.glass-card .btn-outline-light:hover {
    transform: translateY(-4px);
}

/*==================================================
        SOCIAL CARD
==================================================*/

.research-link-card {
    position: relative;

    overflow: hidden;
}

.research-link-card::before {
    content: "";

    position: absolute;

    width: 0;

    height: 100%;

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

    left: 0;

    top: 0;

    transition: 0.4s;
}

.research-link-card:hover::before {
    width: 100%;
}

.research-link-card > * {
    position: relative;

    z-index: 2;
}

/*==================================================
        GLOW
==================================================*/

.glass-card:hover {
    box-shadow:
        0 20px 50px rgba(0, 0, 0, 0.35),
        0 0 45px rgba(13, 110, 253, 0.28),
        inset 0 0 25px rgba(255, 255, 255, 0.03);
}

/*==================================================
            EDUCATION SECTION
==================================================*/

.education-section {
    position: relative;

    overflow: hidden;

    padding: 100px 0;

    background: linear-gradient(135deg, #0f172a, #1e3a8a);
}

.education-timeline {
    position: relative;

    max-width: 1000px;

    margin: auto;

    padding: 20px 0;
}

.education-timeline::before {
    content: "";

    position: absolute;

    left: 50%;

    top: 0;

    transform: translateX(-50%);

    width: 4px;

    height: 100%;

    border-radius: 10px;

    background: linear-gradient(
        to bottom,

        #0dcaf0,
        #0d6efd,
        #6610f2
    );
}

/*========================================
            TIMELINE ITEM
========================================*/

.timeline-item {
    position: relative;

    width: 50%;

    margin-bottom: 60px;
}

.timeline-item:nth-child(odd) {
    padding-right: 70px;

    text-align: right;
}

.timeline-item:nth-child(odd) .timeline-card {
    text-align: left;
}

.timeline-item:nth-child(even) {
    margin-left: 50%;

    padding-left: 70px;
}

/*========================================
            TIMELINE DOT
========================================*/

.timeline-dot {
    position: absolute;

    top: 30px;

    width: 60px;

    height: 60px;

    border-radius: 50%;

    background: #0d6efd;

    display: flex;

    justify-content: center;

    align-items: center;

    color: #fff;

    font-size: 24px;

    box-shadow:
        0 0 0 8px rgba(13, 110, 253, 0.15),
        0 10px 25px rgba(0, 0, 0, 0.25);

    z-index: 10;
}

.timeline-item:nth-child(odd) .timeline-dot {
    right: -30px;
}

.timeline-item:nth-child(even) .timeline-dot {
    left: -30px;
}

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

.timeline-card {
    position: relative;

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

    border: 1px solid rgba(255, 255, 255, 0.1);

    backdrop-filter: blur(16px);

    border-radius: 22px;

    padding: 30px;

    transition: 0.4s;

    overflow: hidden;
}

.timeline-card:hover {
    transform: translateY(-10px);

    box-shadow:
        0 20px 45px rgba(0, 0, 0, 0.35),
        0 0 25px rgba(13, 110, 253, 0.3);
}

.timeline-year {
    display: inline-block;

    padding: 8px 18px;

    border-radius: 50px;

    background: #0d6efd;

    color: #fff;

    font-weight: 600;

    margin-bottom: 18px;
}

.timeline-card h3 {
    color: #fff;

    font-size: 28px;

    font-weight: 700;
}

.timeline-card h5 {
    color: #0dcaf0;

    margin-bottom: 15px;
}

.timeline-card p {
    color: #dbe4f0;

    margin-bottom: 10px;
}

.timeline-card strong {
    color: #fff;
}

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

@media (max-width: 991px) {
    .education-timeline::before {
        left: 30px;
    }

    .timeline-item {
        width: 100%;

        margin-left: 0 !important;

        padding-left: 90px !important;

        padding-right: 0 !important;

        text-align: left !important;
    }

    .timeline-dot {
        left: 0 !important;

        right: auto !important;
    }
}

@media (max-width: 576px) {
    .timeline-card {
        padding: 20px;
    }

    .timeline-card h3 {
        font-size: 22px;
    }

    .timeline-dot {
        width: 50px;

        height: 50px;

        font-size: 20px;
    }
}

.edu-info-box {
    display: flex;

    align-items: flex-start;

    gap: 15px;

    padding: 15px;

    border-radius: 15px;

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

    border: 1px solid rgba(255, 255, 255, 0.08);

    height: 100%;
}

.edu-info-box i {
    width: 45px;

    height: 45px;

    border-radius: 12px;

    display: flex;

    align-items: center;

    justify-content: center;

    background: #0d6efd;

    color: #fff;

    flex-shrink: 0;
}

.edu-info-box small {
    display: block;

    color: #b7c8dd;

    margin-bottom: 4px;

    font-size: 13px;
}

.edu-info-box strong {
    color: #fff;

    font-size: 15px;

    line-height: 22px;

    display: block;
}

/*==================================================
            EXPERIENCE SECTION
==================================================*/

.experience-section {
    position: relative;

    overflow: hidden;

    padding: 100px 0;

    background: linear-gradient(135deg, #08111f, #10284d);
}

.experience-timeline {
    position: relative;

    max-width: 1000px;

    margin: auto;

    padding: 20px 0;
}

.experience-timeline::before {
    content: "";

    position: absolute;

    left: 50%;

    top: 0;

    transform: translateX(-50%);

    width: 4px;

    height: 100%;

    border-radius: 20px;

    background: linear-gradient(
        to bottom,

        #00c6ff,
        #0072ff,
        #5f27cd
    );
}

/*==================================
        TIMELINE ITEM
==================================*/

.experience-item {
    position: relative;

    width: 50%;

    margin-bottom: 70px;
}

.experience-item:nth-child(odd) {
    padding-right: 70px;
}

.experience-item:nth-child(even) {
    margin-left: 50%;

    padding-left: 70px;
}

/*==================================
            DOT
==================================*/

.experience-dot {
    position: absolute;

    top: 30px;

    width: 62px;

    height: 62px;

    border-radius: 50%;

    background: #0d6efd;

    display: flex;

    justify-content: center;

    align-items: center;

    color: #fff;

    font-size: 24px;

    z-index: 5;

    box-shadow:
        0 0 0 8px rgba(13, 110, 253, 0.15),
        0 10px 30px rgba(0, 0, 0, 0.25);
}

.experience-item:nth-child(odd) .experience-dot {
    right: -31px;
}

.experience-item:nth-child(even) .experience-dot {
    left: -31px;
}

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

.experience-card {
    background: rgba(255, 255, 255, 0.08);

    border: 1px solid rgba(255, 255, 255, 0.1);

    backdrop-filter: blur(16px);

    border-radius: 22px;

    padding: 30px;

    transition: 0.4s;

    text-align: left;
}

.experience-card:hover {
    transform: translateY(-10px);

    box-shadow:
        0 20px 45px rgba(0, 0, 0, 0.35),
        0 0 25px rgba(13, 110, 253, 0.3);
}

.experience-duration {
    display: inline-block;

    padding: 8px 18px;

    border-radius: 50px;

    background: #0d6efd;

    color: #fff;

    font-weight: 600;
}

.experience-card h3 {
    color: #fff;

    font-size: 28px;

    font-weight: 700;

    margin-top: 20px;
}

.experience-card h5 {
    color: #38bdf8;

    margin-bottom: 20px;
}

.experience-card p {
    color: #dbe4f0;

    margin-bottom: 12px;
}

.experience-description {
    line-height: 30px;

    text-align: justify;
}

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

@media (max-width: 991px) {
    .experience-timeline::before {
        left: 30px;
    }

    .experience-item {
        width: 100%;

        margin-left: 0 !important;

        padding-left: 90px !important;

        padding-right: 0 !important;
    }

    .experience-dot {
        left: 0 !important;

        right: auto !important;
    }
}

@media (max-width: 576px) {
    .experience-card {
        padding: 22px;
    }

    .experience-card h3 {
        font-size: 22px;
    }

    .experience-dot {
        width: 50px;

        height: 50px;

        font-size: 20px;
    }
}

/*==================================================
                PUBLICATIONS
==================================================*/

.publication-section {
    position: relative;

    overflow: hidden;

    padding: 100px 0;

    background: linear-gradient(135deg, #08111f, #10284d);
}

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

.publication-card {
    position: relative;

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

    backdrop-filter: blur(16px);

    border: 1px solid rgba(255, 255, 255, 0.1);

    border-radius: 24px;

    overflow: hidden;

    transition: 0.45s;

    height: 100%;
}

.publication-card:hover {
    transform: translateY(-12px);

    box-shadow:
        0 25px 55px rgba(0, 0, 0, 0.35),
        0 0 35px rgba(13, 110, 253, 0.25);
}

/*====================================
            COVER
=====================================*/

.publication-cover {
    height: 100%;

    min-height: 280px;

    background: #132746;

    display: flex;

    align-items: center;

    justify-content: center;

    overflow: hidden;
}

.publication-cover img {
    width: 100%;

    height: 100%;

    object-fit: cover;

    transition: 0.5s;
}

.publication-card:hover .publication-cover img {
    transform: scale(1.08);
}

.publication-placeholder {
    font-size: 70px;

    color: #4ea8ff;
}

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

.publication-content {
    padding: 28px;
}

.publication-title {
    color: #fff;

    font-size: 24px;

    font-weight: 700;

    line-height: 34px;

    margin-bottom: 18px;

    min-height: 70px;
}

.publication-author {
    color: #38bdf8;

    font-size: 15px;

    margin-bottom: 18px;
}

.publication-meta {
    color: #dbe4f0;

    margin-bottom: 12px;
}

.publication-description {
    color: #cdd7e6;

    line-height: 28px;

    margin-top: 18px;
}

/*====================================
            BADGES
=====================================*/

.publication-type {
    display: inline-block;

    padding: 8px 18px;

    border-radius: 40px;

    background: #0d6efd;

    color: #fff;

    font-size: 13px;

    font-weight: 600;
}

.publication-year {
    color: #0dcaf0;

    font-weight: 700;

    font-size: 16px;
}

.publication-doi {
    color: #ffc107;

    font-size: 14px;

    margin-top: 15px;
}

/*====================================
            BUTTONS
=====================================*/

.publication-footer {
    margin-top: 25px;
}

.publication-footer .btn {
    border-radius: 40px;

    padding: 9px 20px;

    transition: 0.35s;
}

.publication-footer .btn:hover {
    transform: translateY(-3px);
}

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

@media (max-width: 991px) {
    .publication-cover {
        min-height: 220px;
    }
}

@media (max-width: 767px) {
    .publication-content {
        padding: 22px;
    }

    .publication-title {
        font-size: 20px;

        line-height: 30px;

        min-height: auto;
    }

    .publication-cover {
        min-height: 220px;
    }
}

/*==========================================
        PREMIUM GLASS EFFECT
==========================================*/

.publication-card::before {
    content: "";

    position: absolute;

    inset: 0;

    border-radius: 24px;

    padding: 1px;

    background: linear-gradient(
        135deg,
        rgba(255, 255, 255, 0.25),
        transparent,
        rgba(13, 110, 253, 0.4)
    );

    -webkit-mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);

    -webkit-mask-composite: xor;

    mask-composite: exclude;

    pointer-events: none;
}

.publication-card::after {
    content: "";

    position: absolute;

    top: -120%;

    left: -120%;

    width: 70%;

    height: 250%;

    background: linear-gradient(
        120deg,
        transparent,
        rgba(255, 255, 255, 0.15),
        transparent
    );

    transform: rotate(25deg);

    transition: 1s;
}

.publication-card:hover::after {
    left: 160%;
}

/*==========================================
            TYPE COLORS
==========================================*/

.publication-type {
    background: #0d6efd;
}

.publication-type.book {
    background: #198754;
}

.publication-type.research_paper {
    background: #0d6efd;
}

.publication-type.conference_paper {
    background: #6f42c1;
}

.publication-type.article {
    background: #dc3545;
}

.publication-type.book_chapter {
    background: #fd7e14;
}

.publication-cover {
    position: relative;
}

.publication-cover::before {
    content: "";

    position: absolute;

    inset: 0;

    background: linear-gradient(to top, rgba(8, 17, 31, 0.7), transparent);

    z-index: 1;
}

.publication-cover img {
    position: relative;

    z-index: 0;
}

.publication-footer .btn-success {
    background: #198754;

    border: none;
}

.publication-footer .btn-success:hover {
    box-shadow: 0 12px 25px rgba(25, 135, 84, 0.35);
}

.publication-footer .btn-primary {
    background: #0d6efd;

    border: none;
}

.publication-footer .btn-primary:hover {
    box-shadow: 0 12px 25px rgba(13, 110, 253, 0.35);
}
.publication-card:hover .publication-title {
    color: #38bdf8;
}

.publication-card:hover .publication-type {
    transform: scale(1.05);
}

.publication-type {
    transition: 0.35s;
}

.publication-card:hover .publication-placeholder {
    transform: scale(1.1);
}

.publication-placeholder {
    transition: 0.35s;
}
.glass-card {
    background: rgba(255, 255, 255, 0.08);

    border: 1px solid rgba(255, 255, 255, 0.1);

    backdrop-filter: blur(15px);

    border-radius: 24px;
}

/*==================================================
                ACHIEVEMENT SECTION
==================================================*/

.achievement-section {
    position: relative;

    overflow: hidden;

    padding: 100px 0;

    background: linear-gradient(135deg, #08111f, #10284d);
}

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

.achievement-card {
    position: relative;

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

    border: 1px solid rgba(255, 255, 255, 0.1);

    backdrop-filter: blur(16px);

    border-radius: 24px;

    overflow: hidden;

    transition: 0.45s;

    height: 100%;
}

.achievement-card:hover {
    transform: translateY(-12px);

    box-shadow:
        0 25px 55px rgba(0, 0, 0, 0.35),
        0 0 35px rgba(255, 193, 7, 0.25);
}

/*=====================================
            IMAGE
=====================================*/

.achievement-image {
    height: 100%;

    min-height: 280px;

    background: #132746;

    display: flex;

    justify-content: center;

    align-items: center;

    overflow: hidden;
}

.achievement-image img {
    width: 100%;

    height: 100%;

    object-fit: cover;

    transition: 0.5s;
}

.achievement-card:hover .achievement-image img {
    transform: scale(1.08);
}

.achievement-placeholder {
    font-size: 70px;

    color: #ffc107;
}

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

.achievement-content {
    padding: 28px;
}

.achievement-title {
    color: #fff;

    font-size: 24px;

    font-weight: 700;

    line-height: 34px;

    margin-bottom: 18px;

    min-height: 70px;
}

.achievement-organization {
    color: #38bdf8;

    margin-bottom: 12px;
}

.achievement-location {
    color: #dbe4f0;

    margin-bottom: 12px;
}

.achievement-description {
    color: #cdd7e6;

    line-height: 28px;

    margin-top: 15px;
}

/*=====================================
            BADGES
=====================================*/

.achievement-type {
    display: inline-block;

    padding: 8px 18px;

    border-radius: 40px;

    background: #ffc107;

    color: #111;

    font-size: 13px;

    font-weight: 700;
}

.achievement-year {
    color: #ffc107;

    font-weight: 700;

    font-size: 16px;
}

/*=====================================
            BUTTONS
=====================================*/

.achievement-footer {
    margin-top: 25px;
}

.achievement-footer .btn {
    border-radius: 40px;

    padding: 9px 20px;

    transition: 0.35s;
}

.achievement-footer .btn:hover {
    transform: translateY(-3px);
}

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

@media (max-width: 991px) {
    .achievement-image {
        min-height: 220px;
    }
}

@media (max-width: 767px) {
    .achievement-content {
        padding: 22px;
    }

    .achievement-title {
        font-size: 20px;

        line-height: 30px;

        min-height: auto;
    }

    .achievement-image {
        min-height: 220px;
    }
}

/*==========================================
        PREMIUM GLASS EFFECT
==========================================*/

.achievement-card::before {
    content: "";

    position: absolute;

    inset: 0;

    border-radius: 24px;

    padding: 1px;

    background: linear-gradient(
        135deg,
        rgba(255, 255, 255, 0.25),
        transparent,
        rgba(255, 193, 7, 0.45)
    );

    -webkit-mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);

    -webkit-mask-composite: xor;

    mask-composite: exclude;

    pointer-events: none;
}

.achievement-card::after {
    content: "";

    position: absolute;

    top: -120%;

    left: -120%;

    width: 70%;

    height: 240%;

    background: linear-gradient(
        120deg,
        transparent,
        rgba(255, 255, 255, 0.15),
        transparent
    );

    transform: rotate(25deg);

    transition: 1s;
}

.achievement-card:hover::after {
    left: 160%;
}

/*==========================================
        TYPE COLORS
==========================================*/

.achievement-type {
    color: #fff;
}

.achievement-type.award {
    background: #0d6efd;
}

.achievement-type.achievement {
    background: #198754;
}

.achievement-type.honor {
    background: #6f42c1;
}

.achievement-type.gold_medal {
    background: #ffc107;

    color: #111;
}

.achievement-type.best_paper {
    background: #fd7e14;
}

.achievement-type.research_grant {
    background: #20c997;
}

.achievement-type.patent {
    background: #dc3545;
}

.achievement-type.fellowship {
    background: #6610f2;
}

.achievement-type.scholarship {
    background: #198754;
}

.achievement-type.certificate {
    background: #0dcaf0;

    color: #111;
}

.achievement-type.recognition {
    background: #6c757d;
}

.achievement-image {
    position: relative;
}

.achievement-image::before {
    content: "";

    position: absolute;

    inset: 0;

    background: linear-gradient(
        to top,

        rgba(8, 17, 31, 0.65),
        transparent
    );

    z-index: 1;
}

.achievement-image img {
    position: relative;

    z-index: 0;
}

.achievement-card:hover .achievement-title {
    color: #ffd54f;
}

.achievement-card:hover .achievement-placeholder {
    transform: scale(1.1);
}

.achievement-placeholder {
    transition: 0.35s;
}

.achievement-card:hover .achievement-type {
    transform: scale(1.05);
}

.achievement-type {
    transition: 0.35s;
}

.achievement-footer .btn-primary:hover {
    box-shadow: 0 12px 25px rgba(13, 110, 253, 0.35);
}

.achievement-footer .btn-success:hover {
    box-shadow: 0 12px 25px rgba(25, 135, 84, 0.35);
}

.achievement-footer .btn-warning:hover {
    box-shadow: 0 12px 25px rgba(255, 193, 7, 0.35);
}

.glass-card {
    background: rgba(255, 255, 255, 0.08);

    border: 1px solid rgba(255, 255, 255, 0.1);

    backdrop-filter: blur(16px);

    border-radius: 24px;
}

/*==================================================
                GALLERY SECTION
==================================================*/

.gallery-section {
    position: relative;

    overflow: hidden;

    padding: 100px 0;

    background: linear-gradient(135deg, #08111f, #10284d);
}

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

.gallery-card {
    position: relative;

    overflow: hidden;

    border-radius: 22px;

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

    border: 1px solid rgba(255, 255, 255, 0.08);

    backdrop-filter: blur(16px);

    transition: 0.45s;

    height: 100%;
}

.gallery-card:hover {
    transform: translateY(-10px);

    box-shadow:
        0 25px 55px rgba(0, 0, 0, 0.35),
        0 0 35px rgba(13, 110, 253, 0.25);
}

/*======================================
            IMAGE
=======================================*/

.gallery-img {
    width: 100%;

    height: 320px;

    object-fit: cover;

    object-position: center;

    display: block;

    transition: 0.6s ease;
}

.gallery-card:hover .gallery-img {
    transform: scale(1.12);
}

/* Placeholder */

.gallery-placeholder {
    width: 100%;

    height: 320px;

    display: flex;

    justify-content: center;

    align-items: center;

    background: #132746;

    color: #4ea8ff;

    font-size: 70px;
}

/*======================================
            OVERLAY
=======================================*/

.gallery-overlay {
    position: absolute;

    inset: 0;

    display: flex;

    flex-direction: column;

    justify-content: flex-end;

    padding: 25px;

    background: linear-gradient(
        to top,

        rgba(0, 0, 0, 0.92),
        rgba(0, 0, 0, 0.45),
        transparent
    );

    opacity: 0;

    transition: 0.45s;
}

.gallery-card:hover .gallery-overlay {
    opacity: 1;
}

/* Category */

.gallery-category {
    display: inline-block;

    width: max-content;

    padding: 7px 16px;

    border-radius: 30px;

    background: rgba(13, 110, 253, 0.85);

    color: #fff;

    font-size: 12px;

    font-weight: 600;

    margin-bottom: 15px;
}

/* Title */

.gallery-overlay h5 {
    color: #fff;

    font-size: 20px;

    font-weight: 700;

    line-height: 28px;

    margin-bottom: 15px;
}

/*======================================
            ICON
=======================================*/

.gallery-icon {
    width: 55px;

    height: 55px;

    border-radius: 50%;

    background: #fff;

    color: #0d6efd;

    display: flex;

    justify-content: center;

    align-items: center;

    font-size: 22px;

    transition: 0.35s;
}

.gallery-card:hover .gallery-icon {
    transform: scale(1.12) rotate(12deg);

    background: #0d6efd;

    color: #fff;
}

/* Anchor */

.gallery-card a {
    text-decoration: none;

    color: inherit;

    display: block;
}

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

@media (max-width: 991px) {
    .gallery-img,
    .gallery-placeholder {
        height: 260px;
    }
}

@media (max-width: 768px) {
    .gallery-img,
    .gallery-placeholder {
        height: 230px;
    }

    .gallery-overlay {
        opacity: 1;

        background: linear-gradient(
            to top,

            rgba(0, 0, 0, 0.88),
            rgba(0, 0, 0, 0.3),
            transparent
        );
    }
}

@media (max-width: 576px) {
    .gallery-img,
    .gallery-placeholder {
        height: 210px;
    }
}

/*==========================================
        PREMIUM GLASS BORDER
==========================================*/

.gallery-card::before {
    content: "";

    position: absolute;

    inset: 0;

    border-radius: 22px;

    padding: 1px;

    background: linear-gradient(
        135deg,
        rgba(255, 255, 255, 0.2),
        transparent,
        rgba(13, 110, 253, 0.45)
    );

    -webkit-mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);

    -webkit-mask-composite: xor;

    mask-composite: exclude;

    pointer-events: none;

    z-index: 5;
}

.gallery-card::after {
    content: "";

    position: absolute;

    top: -120%;

    left: -120%;

    width: 70%;

    height: 250%;

    background: linear-gradient(
        120deg,
        transparent,
        rgba(255, 255, 255, 0.18),
        transparent
    );

    transform: rotate(25deg);

    transition: 1s;
}

.gallery-card:hover::after {
    left: 160%;
}

.gallery-card:hover {
    box-shadow:
        0 25px 55px rgba(0, 0, 0, 0.4),
        0 0 40px rgba(13, 110, 253, 0.3),
        inset 0 0 20px rgba(255, 255, 255, 0.04);
}

.gallery-img {
    transition:
        transform 0.6s,
        filter 0.6s;
}

.gallery-card:hover .gallery-img {
    transform: scale(1.15);

    filter: brightness(0.75);
}

.gallery-overlay {
    transform: translateY(40px);
}

.gallery-card:hover .gallery-overlay {
    transform: translateY(0);
}

.gallery-overlay h5 {
    transition: 0.35s;
}

.gallery-card:hover h5 {
    color: #4dabff;
}

.gallery-icon {
    transition: 0.35s;
}

.gallery-card:hover .gallery-icon {
    transform: scale(1.15) rotate(15deg);

    background: #0d6efd;

    color: #fff;

    box-shadow: 0 15px 30px rgba(13, 110, 253, 0.35);
}

.gallery-category {
    transition: 0.35s;
}

.gallery-card:hover .gallery-category {
    background: #0d6efd;
}

.gallery-placeholder {
    transition: 0.4s;
}

.gallery-card:hover .gallery-placeholder {
    transform: scale(1.08);

    color: #fff;
}

/*==================================================
                CONTACT SECTION
==================================================*/

.contact-section {
    position: relative;

    overflow: hidden;

    padding: 100px 0;

    background: linear-gradient(135deg, #08111f, #10284d);
}

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

.contact-card {
    position: relative;

    height: 100%;

    padding: 40px;

    border-radius: 24px;

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

    backdrop-filter: blur(16px);

    border: 1px solid rgba(255, 255, 255, 0.1);

    transition: 0.4s;
}

.contact-card:hover {
    transform: translateY(-8px);

    box-shadow:
        0 25px 55px rgba(0, 0, 0, 0.35),
        0 0 30px rgba(13, 110, 253, 0.25);
}

.contact-card h3 {
    color: #fff;

    font-weight: 700;
}

/*=========================================
            CONTACT ITEM
=========================================*/

.contact-item {
    display: flex;

    align-items: center;

    gap: 20px;

    margin-bottom: 28px;
}

.contact-icon {
    width: 60px;

    height: 60px;

    border-radius: 18px;

    background: #0d6efd;

    color: #fff;

    display: flex;

    justify-content: center;

    align-items: center;

    font-size: 22px;

    flex-shrink: 0;
}

.contact-item small {
    display: block;

    color: #8fa9c8;

    margin-bottom: 5px;
}

.contact-item h6 {
    color: #fff;

    font-size: 17px;

    margin: 0;
}

/*=========================================
            SOCIAL
=========================================*/

.contact-social {
    display: flex;

    gap: 15px;

    flex-wrap: wrap;

    margin-top: 40px;
}

.contact-social a {
    width: 55px;

    height: 55px;

    border-radius: 50%;

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

    border: 1px solid rgba(255, 255, 255, 0.1);

    color: #fff;

    display: flex;

    justify-content: center;

    align-items: center;

    font-size: 22px;

    transition: 0.35s;
}

.contact-social a:hover {
    background: #0d6efd;

    color: #fff;

    transform: translateY(-5px);
}

/*=========================================
            FORM
=========================================*/

.contact-form .form-control {
    background: rgba(255, 255, 255, 0.06);

    border: 1px solid rgba(255, 255, 255, 0.1);

    color: #fff;

    border-radius: 14px;

    padding: 15px 18px;
}

.contact-form .form-control:focus {
    background: rgba(255, 255, 255, 0.08);

    border-color: #0d6efd;

    color: #fff;

    box-shadow: none;
}

.contact-form .form-control::placeholder {
    color: #9fb2c9;
}

.contact-form textarea {
    min-height: 180px;

    resize: none;
}

/*=========================================
            BUTTON
=========================================*/

.contact-form .btn {
    padding: 14px 35px;

    border-radius: 50px;

    font-weight: 600;

    transition: 0.35s;
}

.contact-form .btn:hover {
    transform: translateY(-3px);

    box-shadow: 0 12px 25px rgba(13, 110, 253, 0.35);
}

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

@media (max-width: 991px) {
    .contact-card {
        padding: 30px;
    }
}

@media (max-width: 768px) {
    .contact-item {
        gap: 15px;
    }

    .contact-icon {
        width: 50px;

        height: 50px;

        font-size: 18px;
    }
}

/*==========================================
        PREMIUM GLASS BORDER
==========================================*/

.contact-card::before {
    content: "";

    position: absolute;

    inset: 0;

    border-radius: 24px;

    padding: 1px;

    background: linear-gradient(
        135deg,
        rgba(255, 255, 255, 0.2),
        transparent,
        rgba(13, 110, 253, 0.4)
    );

    -webkit-mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);

    -webkit-mask-composite: xor;

    mask-composite: exclude;

    pointer-events: none;
}

.contact-card::after {
    content: "";

    position: absolute;

    top: -120%;

    left: -120%;

    width: 70%;

    height: 240%;

    background: linear-gradient(
        120deg,
        transparent,
        rgba(255, 255, 255, 0.15),
        transparent
    );

    transform: rotate(25deg);

    transition: 1s;
}

.contact-card:hover::after {
    left: 160%;
}

.contact-icon {
    transition: 0.35s;
}

.contact-item:hover .contact-icon {
    transform: rotate(10deg) scale(1.1);

    background: #0b5ed7;
}

.contact-social a {
    transition: 0.35s;
}

.contact-social a:hover {
    transform: translateY(-6px) rotate(8deg);

    box-shadow: 0 12px 25px rgba(13, 110, 253, 0.35);
}

.contact-form .form-control {
    transition: 0.35s;
}

.contact-form .form-control:hover {
    border-color: #0d6efd;
}

.contact-form .form-control:focus {
    transform: translateY(-2px);
}

.contact-form .btn {
    position: relative;

    overflow: hidden;
}

.contact-form .btn::before {
    content: "";

    position: absolute;

    top: 0;

    left: -100%;

    width: 100%;

    height: 100%;

    background: linear-gradient(
        90deg,
        transparent,
        rgba(255, 255, 255, 0.35),
        transparent
    );

    transition: 0.8s;
}

.contact-form .btn:hover::before {
    left: 100%;
}

.contact-card:hover {
    box-shadow:
        0 25px 55px rgba(0, 0, 0, 0.4),
        0 0 35px rgba(13, 110, 253, 0.3),
        inset 0 0 20px rgba(255, 255, 255, 0.03);
}

/*==================================================
                    FOOTER
==================================================*/

.footer-section {
    position: relative;

    overflow: hidden;

    padding: 80px 0 25px;

    background: linear-gradient(135deg, #050b18, #08111f);

    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.footer-title {
    color: #fff;

    font-size: 30px;

    font-weight: 700;

    margin-bottom: 10px;
}

.footer-text {
    color: #b9c8d9;

    line-height: 30px;

    margin-top: 20px;
}

.footer-heading {
    color: #fff;

    font-size: 22px;

    margin-bottom: 25px;

    font-weight: 600;
}

.footer-links {
    list-style: none;

    padding: 0;

    margin: 0;
}

.footer-links li {
    margin-bottom: 15px;
}

.footer-links a {
    color: #b9c8d9;

    text-decoration: none;

    transition: 0.35s;
}

.footer-links a:hover {
    color: #4dabff;

    padding-left: 8px;
}

.footer-contact {
    list-style: none;

    padding: 0;

    margin: 0;
}

.footer-contact li {
    display: flex;

    align-items: flex-start;

    gap: 15px;

    margin-bottom: 18px;

    color: #b9c8d9;
}

.footer-contact i {
    width: 40px;

    height: 40px;

    border-radius: 12px;

    display: flex;

    justify-content: center;

    align-items: center;

    background: #0d6efd;

    color: #fff;

    flex-shrink: 0;
}

.footer-social {
    display: flex;

    gap: 15px;

    margin-top: 30px;
}

.footer-social a {
    width: 50px;

    height: 50px;

    border-radius: 50%;

    display: flex;

    justify-content: center;

    align-items: center;

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

    border: 1px solid rgba(255, 255, 255, 0.08);

    color: #fff;

    transition: 0.35s;
}

.footer-social a:hover {
    background: #0d6efd;

    transform: translateY(-5px);
}

.footer-divider {
    border-color: rgba(255, 255, 255, 0.08);

    margin: 50px 0 25px;
}

.footer-section p {
    color: #9db3c9;
}

.scroll-top {
    position: fixed;

    right: 30px;

    bottom: 30px;

    width: 55px;

    height: 55px;

    border-radius: 50%;

    background: #0d6efd;

    color: #fff;

    display: flex;

    justify-content: center;

    align-items: center;

    text-decoration: none;

    font-size: 20px;

    z-index: 999;

    transition: 0.35s;
}

.scroll-top:hover {
    color: #fff;

    transform: translateY(-5px);

    box-shadow: 0 15px 30px rgba(13, 110, 253, 0.35);
}

@media (max-width: 991px) {
    .footer-section {
        text-align: center;
    }

    .footer-social {
        justify-content: center;
    }

    .footer-contact li {
        justify-content: center;

        text-align: left;
    }
}

@media (max-width: 768px) {
    .footer-title {
        font-size: 26px;
    }

    .footer-heading {
        margin-top: 20px;
    }
}

/*==================================================
                PUBLICATION PAGE
==================================================*/

.pub-page {
    position: relative;

    background: #f4f8fc;

    padding: 90px 0;

    overflow: hidden;
}

.pub-page::before {
    content: "";

    position: absolute;

    width: 450px;

    height: 450px;

    border-radius: 50%;

    background: rgba(13, 110, 253, 0.05);

    top: -120px;

    right: -150px;

    filter: blur(120px);
}

.pub-page::after {
    content: "";

    position: absolute;

    width: 350px;

    height: 350px;

    border-radius: 50%;

    background: rgba(0, 180, 255, 0.05);

    left: -120px;

    bottom: 150px;

    filter: blur(100px);
}

/*==================================================
                FILTER
==================================================*/

.pub-filter-section {
    margin-top: -90px;

    margin-bottom: 50px;

    position: relative;

    z-index: 20;
}

.pub-filter-card {
    background: #ffffff;

    border-radius: 24px;

    padding: 35px;

    border: 1px solid #e7edf5;

    box-shadow: 0 15px 40px rgba(15, 23, 42, 0.08);
}

.pub-filter-label {
    display: block;

    margin-bottom: 10px;

    color: #183153;

    font-size: 14px;

    font-weight: 700;
}

.pub-search-box {
    position: relative;
}

.pub-search-box i {
    position: absolute;

    left: 18px;

    top: 50%;

    transform: translateY(-50%);

    color: #0d6efd;

    font-size: 17px;
}

.pub-search-input {
    height: 58px;

    padding-left: 52px !important;
}

.pub-search-input {
    border: 2px solid #dce6f3;

    border-radius: 16px;

    background: #fff;

    color: #1d3557;

    transition: 0.35s;
}

.pub-search-input::placeholder {
    color: #8ca1b8;
}

.pub-search-input:focus {
    border-color: #0d6efd;

    box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.15);
}

.pub-filter-select {
    height: 58px;

    border-radius: 16px;

    border: 2px solid #dce6f3;

    background: #fff;

    color: #16355d;

    font-weight: 500;

    transition: 0.35s;
}

.pub-filter-select:focus {
    border-color: #0d6efd;

    box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.15);
}

.pub-filter-select option {
    background: #fff;

    color: #16355d;
}

.pub-filter-btn {
    height: 58px;

    border-radius: 16px;

    background: linear-gradient(135deg, #0d6efd, #3ea6ff);

    border: none;

    color: #fff;

    transition: 0.35s;
}

.pub-filter-btn:hover {
    transform: translateY(-3px);

    box-shadow: 0 15px 35px rgba(13, 110, 253, 0.25);
}

.pub-chip-group {
    display: flex;

    flex-wrap: wrap;

    gap: 12px;

    margin-top: 28px;
}

.pub-chip {
    display: inline-flex;

    align-items: center;

    justify-content: center;

    padding: 10px 22px;

    border-radius: 50px;

    text-decoration: none;

    background: #f4f8fc;

    color: #355070;

    border: 1px solid #dfe7f2;

    font-weight: 600;

    transition: 0.35s;
}

.pub-chip:hover {
    background: #0d6efd;

    color: #fff;

    border-color: #0d6efd;
}

.pub-chip.active {
    background: linear-gradient(135deg, #0d6efd, #3ea6ff);

    color: #fff;
}

.pub-chip-reset {
    background: #fff4f4;

    color: #dc3545;
}

@media (max-width: 991px) {
    .pub-filter-section {
        margin-top: -40px;
    }

    .pub-filter-card {
        padding: 25px;
    }
}

@media (max-width: 767px) {
    .pub-filter-card {
        padding: 20px;

        border-radius: 18px;
    }

    .pub-chip {
        font-size: 13px;

        padding: 8px 16px;
    }
}

/*==================================================
                PUBLICATION CARD
==================================================*/

.pub-grid-section {
    margin-top: 50px;
}

.pub-card {
    position: relative;

    display: flex;

    flex-direction: column;

    height: 100%;

    background: #ffffff;

    border-radius: 24px;

    overflow: hidden;

    border: 1px solid #e5edf7;

    transition: 0.35s;

    box-shadow: 0 10px 30px rgba(15, 23, 42, 0.06);
}

.pub-card:hover {
    transform: translateY(-10px);

    border-color: #c6ddff;

    box-shadow: 0 25px 60px rgba(13, 110, 253, 0.15);
}

/*==================================================
                    COVER
==================================================*/

.pub-card-cover {
    position: relative;

    height: 240px;

    overflow: hidden;

    background: #10284d;
}

.pub-card-cover img {
    width: 100%;

    height: 100%;

    object-fit: cover;

    transition: 0.5s;
}

.pub-card:hover .pub-card-cover img {
    transform: scale(1.08);
}

.pub-card-overlay {
    position: absolute;

    inset: 0;

    background: linear-gradient(
        180deg,
        rgba(0, 0, 0, 0.08),
        rgba(0, 0, 0, 0.25),
        rgba(8, 17, 31, 0.82)
    );
}

.pub-card-placeholder {
    width: 100%;

    height: 100%;

    display: flex;

    align-items: center;

    justify-content: center;

    background: linear-gradient(135deg, #0d6efd, #123d78);
}

.pub-card-placeholder i {
    color: #fff;

    font-size: 72px;
}

.pub-type-badge {
    position: absolute;

    left: 18px;

    top: 18px;

    z-index: 5;

    padding: 8px 18px;

    border-radius: 50px;

    color: #fff;

    font-size: 12px;

    font-weight: 700;

    letter-spacing: 0.4px;

    text-transform: uppercase;
}

.pub-type-book .pub-type-badge {
    background: #198754;
}

.pub-type-research_paper .pub-type-badge {
    background: #0d6efd;
}

.pub-type-conference_paper .pub-type-badge {
    background: #fd7e14;
}

.pub-type-book_chapter .pub-type-badge {
    background: #6f42c1;
}

.pub-type-article .pub-type-badge {
    background: #dc3545;
}

.pub-year-badge {
    position: absolute;

    top: 18px;

    right: 18px;

    z-index: 5;

    padding: 8px 14px;

    border-radius: 50px;

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

    backdrop-filter: blur(10px);

    color: #fff;

    font-weight: 600;

    font-size: 13px;
}

/*==================================================
                    BODY
==================================================*/

.pub-card-body {
    flex: 1;

    display: flex;

    flex-direction: column;

    padding: 24px;
}

.pub-card-title {
    font-size: 22px;

    font-weight: 700;

    color: #16355d;

    line-height: 32px;

    margin-bottom: 18px;

    min-height: 70px;

    transition: 0.35s;
}

.pub-card:hover .pub-card-title {
    color: #0d6efd;
}

.pub-meta {
    display: flex;

    align-items: flex-start;

    gap: 12px;

    margin-bottom: 12px;

    color: #55697f;

    line-height: 24px;

    font-size: 14px;
}

.pub-meta i {
    width: 18px;

    color: #0d6efd;

    margin-top: 4px;

    flex-shrink: 0;
}

.pub-card-desc {
    margin-top: 15px;

    padding-top: 15px;

    border-top: 1px dashed #dbe6f3;

    color: #6b7d91;

    line-height: 28px;

    flex: 1;
}

.pub-card-footer {
    padding: 20px 24px;

    border-top: 1px solid #edf2f7;

    background: #fbfdff;
}

.pub-btn-group {
    display: flex;

    gap: 10px;

    flex-wrap: wrap;
}

.pub-btn-group .btn {
    border-radius: 12px;

    padding: 10px 18px;

    font-size: 14px;

    font-weight: 600;

    transition: 0.35s;
}

.pub-btn-pdf {
    background: #0d6efd;

    color: #fff;
}

.pub-btn-link {
    background: #198754;

    color: #fff;
}

.pub-btn-read {
    background: #fff;

    color: #16355d;

    border: 1px solid #d9e5f2;
}

.pub-btn-group .btn:hover {
    transform: translateY(-3px);
}

/*==================================================
                EMPTY STATE
==================================================*/

.pub-empty-card {
    background: #fff;

    border-radius: 24px;

    padding: 70px 40px;

    text-align: center;

    border: 1px solid #e6edf7;

    box-shadow: 0 10px 30px rgba(15, 23, 42, 0.06);
}

.pub-empty-card i {
    font-size: 70px;

    color: #0d6efd;

    margin-bottom: 25px;
}

.pub-empty-card h3 {
    color: #16355d;

    margin-bottom: 12px;

    font-weight: 700;
}

.pub-empty-card p {
    color: #6c7d90;

    max-width: 500px;

    margin: auto auto 25px;

    line-height: 30px;
}

/*==================================================
                BUTTONS
==================================================*/

.pub-btn-pdf:hover {
    background: #0b5ed7;

    color: #fff;

    box-shadow: 0 10px 25px rgba(13, 110, 253, 0.25);
}

.pub-btn-link:hover {
    background: #157347;

    color: #fff;

    box-shadow: 0 10px 25px rgba(25, 135, 84, 0.25);
}

.pub-btn-read:hover {
    background: #0d6efd;

    color: #fff;

    border-color: #0d6efd;
}

/*==================================================
                ANIMATION
==================================================*/

.pub-card {
    transition:
        transform 0.35s,
        box-shadow 0.35s,
        border-color 0.35s;
}

.pub-card:hover .pub-meta i {
    transform: translateX(2px);
}

.pub-meta i {
    transition: 0.35s;
}

.pub-card:hover .pub-year-badge {
    background: #0d6efd;
}

.pub-card:hover .pub-type-badge {
    transform: scale(1.05);
}

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

@media (max-width: 1199px) {
    .pub-card-cover {
        height: 220px;
    }
}

@media (max-width: 991px) {
    .pub-filter-card {
        padding: 25px;
    }

    .pub-stat-card {
        margin-bottom: 15px;
    }
}

@media (max-width: 767px) {
    .pub-filter-card {
        padding: 20px;
    }

    .pub-card {
        border-radius: 20px;
    }

    .pub-card-cover {
        height: 210px;
    }

    .pub-card-title {
        min-height: auto;

        font-size: 20px;

        line-height: 30px;
    }

    .pub-btn-group {
        flex-direction: column;
    }

    .pub-btn-group .btn {
        width: 100%;

        justify-content: center;
    }

    .pub-pagination-wrapper .page-link {
        width: 42px;

        height: 42px;
    }
}

@media (max-width: 575px) {
    .pub-filter-card {
        border-radius: 18px;
    }

    .pub-card-body {
        padding: 20px;
    }

    .pub-card-footer {
        padding: 18px;
    }

    .pub-card-cover {
        height: 200px;
    }
}

/*=====================================
        PAGINATION
======================================*/
.pub-pagination {
    display: flex;

    justify-content: center;

    gap: 12px;

    margin-top: 60px;
}

.pub-page-btn {
    width: 48px;

    height: 48px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 14px;

    text-decoration: none;

    background: #fff;

    border: 1px solid #dfe7f2;

    color: #16355d;

    font-weight: 600;

    transition: 0.3s;
}

.pub-page-btn:hover {
    background: #0d6efd;

    color: #fff;
}

.pub-page-btn.active {
    background: linear-gradient(135deg, #0d6efd, #3ea6ff);

    color: #fff;
}

.pub-page-btn.disabled {
    opacity: 0.4;

    pointer-events: none;
}

.pub-pagination-info {
    margin-top: 20px;

    text-align: center;

    color: #6c7d90;
}

/*==================================================
            PUBLICATION STATS
==================================================*/

.pub-stat-section {
    margin: 50px 0 70px;
}

.pub-stat-card {
    position: relative;

    display: flex;

    align-items: center;

    gap: 18px;

    padding: 25px;

    height: 100%;

    background: #ffffff;

    border-radius: 22px;

    border: 1px solid #e7edf6;

    overflow: hidden;

    transition: 0.35s;

    box-shadow: 0 10px 30px rgba(15, 23, 42, 0.06);
}

.pub-stat-card::before {
    content: "";

    position: absolute;

    left: 0;

    top: 0;

    width: 5px;

    height: 100%;

    background: linear-gradient(180deg, #0d6efd, #3ea6ff);
}

.pub-stat-card:hover {
    transform: translateY(-8px);

    box-shadow: 0 20px 45px rgba(13, 110, 253, 0.15);

    border-color: #cfe2ff;
}

/*==================================================
                ICON
==================================================*/

.pub-stat-icon {
    width: 72px;

    height: 72px;

    border-radius: 18px;

    display: flex;

    align-items: center;

    justify-content: center;

    flex-shrink: 0;

    color: #fff;

    font-size: 28px;

    transition: 0.35s;
}

/*==================================================
            ICON COLORS
==================================================*/

.pub-primary {
    background: linear-gradient(135deg, #0d6efd, #3ea6ff);
}

.pub-success {
    background: linear-gradient(135deg, #16a34a, #22c55e);
}

.pub-warning {
    background: linear-gradient(135deg, #f59e0b, #fbbf24);
}

.pub-danger {
    background: linear-gradient(135deg, #dc3545, #ff6b81);
}

.pub-info {
    background: linear-gradient(135deg, #06b6d4, #38bdf8);
}

/*==================================================
                TEXT
==================================================*/

.pub-stat-card h2 {
    margin: 0;

    color: #16355d;

    font-size: 34px;

    font-weight: 800;

    line-height: 1;
}

.pub-stat-card span {
    display: block;

    margin-top: 8px;

    color: #6c7d90;

    font-size: 15px;

    font-weight: 600;
}

/*==================================================
                HOVER
==================================================*/

.pub-stat-card:hover .pub-stat-icon {
    transform: rotate(-8deg) scale(1.08);
}

.pub-stat-card:hover h2 {
    color: #0d6efd;
}

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

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

@media (max-width: 767px) {
    .pub-stat-section {
        margin: 40px 0 50px;
    }

    .pub-stat-card {
        padding: 18px;

        border-radius: 18px;
    }

    .pub-stat-icon {
        width: 60px;

        height: 60px;

        font-size: 24px;
    }

    .pub-stat-card h2 {
        font-size: 28px;
    }

    .pub-stat-card span {
        font-size: 14px;
    }
}

/*==================================================
            SHOW PAGE
==================================================*/

.pub-show-page {
    position: relative;

    padding: 90px 0;

    background: #f5f9ff;

    overflow: hidden;
}

.pub-show-page::before {
    content: "";

    position: absolute;

    width: 420px;

    height: 420px;

    border-radius: 50%;

    background: rgba(13, 110, 253, 0.05);

    top: -120px;

    right: -150px;

    filter: blur(120px);
}

.pub-show-page::after {
    content: "";

    position: absolute;

    width: 320px;

    height: 320px;

    border-radius: 50%;

    background: rgba(0, 180, 255, 0.05);

    left: -120px;

    bottom: 80px;

    filter: blur(100px);
}

/*==================================================
            HERO META
==================================================*/

.pub-show-meta {
    display: flex;

    flex-wrap: wrap;

    gap: 18px;
}

.pub-show-meta span {
    display: flex;

    align-items: center;

    gap: 8px;

    padding: 12px 18px;

    border-radius: 50px;

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

    backdrop-filter: blur(12px);

    color: #fff;

    font-size: 14px;

    font-weight: 500;
}

.pub-show-meta span i {
    color: #7fd2ff;
}

/*==================================================
            HERO BUTTONS
==================================================*/

.pub-show-buttons {
    display: flex;

    flex-wrap: wrap;

    gap: 18px;
}

/*==================================================
            COVER CARD
==================================================*/

.pub-show-cover-card {
    background: #fff;

    border-radius: 24px;

    overflow: hidden;

    border: 1px solid #e7edf6;

    box-shadow: 0 18px 40px rgba(15, 23, 42, 0.08);

    transition: 0.35s;
}

.pub-show-cover-card:hover {
    transform: translateY(-8px);

    box-shadow: 0 25px 55px rgba(13, 110, 253, 0.12);
}

.pub-show-cover-card img {
    width: 100%;

    height: 520px;

    object-fit: cover;
}

/*==================================================
            PLACEHOLDER
==================================================*/

.pub-show-placeholder {
    height: 520px;

    display: flex;

    align-items: center;

    justify-content: center;

    background: linear-gradient(135deg, #0d6efd, #123d78);
}

.pub-show-placeholder i {
    font-size: 90px;

    color: #fff;
}

/*==================================================
            MAIN CARD
==================================================*/

.pub-show-card {
    background: #fff;

    border-radius: 24px;

    border: 1px solid #e7edf6;

    overflow: hidden;

    margin-bottom: 30px;

    box-shadow: 0 10px 30px rgba(15, 23, 42, 0.06);
}

/*==================================================
            CARD HEADER
==================================================*/

.pub-show-card-header {
    display: flex;

    align-items: center;

    gap: 15px;

    padding: 22px 28px;

    background: linear-gradient(135deg, #0d6efd, #3ea6ff);

    color: #fff;
}

.pub-show-card-header i {
    font-size: 24px;
}

.pub-show-card-header h3 {
    margin: 0;

    font-size: 22px;

    font-weight: 700;
}

/*==================================================
            CARD BODY
==================================================*/

.pub-show-card-body {
    padding: 30px;

    color: #5d6f82;

    line-height: 30px;

    font-size: 16px;
}

/*==================================================
            DETAIL ITEM
==================================================*/

.pub-show-item {
    height: 100%;

    padding: 18px;

    border-radius: 18px;

    background: #f8fbff;

    border: 1px solid #e6edf7;

    transition: 0.35s;
}

.pub-show-item:hover {
    border-color: #0d6efd;

    transform: translateY(-4px);
}

.pub-show-item span {
    display: block;

    margin-bottom: 8px;

    color: #7a8ca3;

    font-size: 13px;

    text-transform: uppercase;

    letter-spacing: 0.5px;
}

.pub-show-item strong {
    color: #16355d;

    font-size: 16px;

    font-weight: 700;
}

/*==================================================
                SIDEBAR
==================================================*/

.pub-show-sidebar {
    position: relative;

    background: #ffffff;

    border-radius: 24px;

    border: 1px solid #e7edf6;

    overflow: hidden;

    box-shadow: 0 10px 30px rgba(15, 23, 42, 0.06);

    transition: 0.35s;
}

.pub-show-sidebar:hover {
    transform: translateY(-6px);

    box-shadow: 0 22px 50px rgba(13, 110, 253, 0.12);
}

/* Sticky Sidebar */

@media (min-width: 992px) {
    .pub-show-sidebar {
        position: sticky;

        top: 100px;
    }
}

/*==================================================
            SIDEBAR HEADER
==================================================*/

.pub-show-sidebar-header {
    display: flex;

    align-items: center;

    gap: 14px;

    padding: 22px 24px;

    background: linear-gradient(135deg, #0d6efd, #3ea6ff);

    color: #fff;
    margin-bottom: 5px;
}

.pub-show-sidebar-header i {
    font-size: 22px;
}

.pub-show-sidebar-header h4 {
    margin: 0;

    font-size: 20px;

    font-weight: 700;
}

/*==================================================
            INFO LIST
==================================================*/

.pub-show-sidebar-list {
    list-style: none;

    margin: 0;

    padding: 0;
}

.pub-show-sidebar-list li {
    display: flex;

    justify-content: space-between;

    align-items: flex-start;

    gap: 15px;

    padding: 18px 24px;

    border-bottom: 1px solid #eef3f8;
}

.pub-show-sidebar-list li:last-child {
    border-bottom: none;
}

.pub-show-sidebar-list span {
    color: #7c8ea3;

    font-size: 14px;

    font-weight: 500;
}

.pub-show-sidebar-list strong {
    color: #16355d;

    text-align: right;

    font-size: 15px;

    font-weight: 700;

    word-break: break-word;
}

/*==================================================
            QUICK ACTION BUTTONS
==================================================*/

.pub-show-btn-primary,
.pub-show-btn-success,
.pub-show-btn-light {
    display: flex;

    align-items: center;

    justify-content: center;

    width: 100%;

    height: 54px;

    border-radius: 14px;

    font-weight: 600;

    font-size: 15px;

    transition: 0.35s;

    text-decoration: none;
}

/* PDF */

.pub-show-btn-primary {
    background: linear-gradient(135deg, #0d6efd, #3ea6ff);

    color: #fff;

    border: none;
}

.pub-show-btn-primary:hover {
    color: #fff;

    transform: translateY(-3px);

    box-shadow: 0 12px 30px rgba(13, 110, 253, 0.25);
}

/* Visit */

.pub-show-btn-success {
    background: linear-gradient(135deg, #16a34a, #22c55e);

    color: #fff;

    border: none;
}

.pub-show-btn-success:hover {
    color: #fff;

    transform: translateY(-3px);

    box-shadow: 0 12px 30px rgba(22, 163, 74, 0.25);
}

/* Back */

.pub-show-btn-light {
    background: #f8fbff;

    color: #16355d;

    border: 1px solid #dfe7f3;
}

.pub-show-btn-light:hover {
    background: #0d6efd;

    color: #fff;

    border-color: #0d6efd;
}

/*==================================================
            ICONS
==================================================*/

.pub-show-btn-primary i,
.pub-show-btn-success i,
.pub-show-btn-light i {
    margin-right: 10px;
}

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

@media (max-width: 991px) {
    .pub-show-sidebar {
        position: relative;

        top: auto;

        margin-top: 30px;
    }
}

@media (max-width: 767px) {
    .pub-show-sidebar {
        border-radius: 18px;
    }

    .pub-show-sidebar-header {
        padding: 18px 20px;
    }

    .pub-show-sidebar-list li {
        padding: 15px 18px;
    }

    .pub-show-sidebar-list {
        font-size: 14px;
    }
}

/*==================================================
            RELATED SECTION
==================================================*/

.pub-show-related-section {
    margin-top: 80px;
}

.pub-show-section-title {
    text-align: center;

    margin-bottom: 50px;
}

.pub-show-section-title span {
    display: inline-flex;

    align-items: center;

    padding: 10px 24px;

    border-radius: 50px;

    background: rgba(13, 110, 253, 0.08);

    color: #0d6efd;

    font-weight: 600;

    margin-bottom: 18px;
}

.pub-show-section-title h2 {
    font-size: 42px;

    font-weight: 800;

    color: #16355d;

    margin-bottom: 15px;
}

.pub-show-section-title p {
    max-width: 650px;

    margin: auto;

    color: #6b7d91;

    line-height: 30px;
}

/*==================================================
            RELATED CARD
==================================================*/

.pub-show-related-card {
    position: relative;

    background: #fff;

    border-radius: 24px;

    overflow: hidden;

    border: 1px solid #e6edf7;

    transition: 0.35s;

    box-shadow: 0 10px 30px rgba(15, 23, 42, 0.06);

    height: 100%;
}

.pub-show-related-card:hover {
    transform: translateY(-8px);

    box-shadow: 0 25px 55px rgba(13, 110, 253, 0.12);
}

/*==================================================
                IMAGE
==================================================*/

.pub-show-related-image {
    position: relative;

    height: 220px;

    overflow: hidden;
}

.pub-show-related-image img {
    width: 100%;

    height: 100%;

    object-fit: cover;

    transition: 0.5s;
}

.pub-show-related-card:hover img {
    transform: scale(1.08);
}

/*==================================================
            PLACEHOLDER
==================================================*/

.pub-show-related-placeholder {
    width: 100%;

    height: 100%;

    display: flex;

    align-items: center;

    justify-content: center;

    background: linear-gradient(135deg, #0d6efd, #123d78);
}

.pub-show-related-placeholder i {
    color: #fff;

    font-size: 65px;
}

/*==================================================
                BADGE
==================================================*/

.pub-show-related-badge {
    position: absolute;

    top: 18px;

    left: 18px;

    padding: 8px 18px;

    border-radius: 50px;

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

    backdrop-filter: blur(12px);

    color: #fff;

    font-size: 12px;

    font-weight: 700;
}

/*==================================================
                BODY
==================================================*/

.pub-show-related-body {
    padding: 25px;
}

.pub-show-related-body h4 {
    font-size: 22px;

    color: #16355d;

    font-weight: 700;

    line-height: 32px;

    min-height: 64px;

    margin-bottom: 18px;
}

.pub-show-related-body p {
    color: #6b7d91;

    margin-bottom: 15px;
}

.pub-show-related-body p i {
    color: #0d6efd;

    margin-right: 8px;
}

/*==================================================
                META
==================================================*/

.pub-show-related-meta {
    margin-bottom: 22px;
}

.pub-show-related-meta span {
    display: inline-flex;

    align-items: center;

    gap: 8px;

    color: #6b7d91;

    font-size: 14px;
}

/*==================================================
                BUTTON
==================================================*/

.pub-show-related-btn {
    display: inline-flex;

    align-items: center;

    justify-content: center;

    width: 100%;

    height: 50px;

    border-radius: 14px;

    background: linear-gradient(135deg, #0d6efd, #3ea6ff);

    color: #fff;

    text-decoration: none;

    font-weight: 600;

    transition: 0.35s;
}

.pub-show-related-btn:hover {
    color: #fff;

    transform: translateY(-3px);

    box-shadow: 0 12px 30px rgba(13, 110, 253, 0.25);
}

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

@media (max-width: 991px) {
    .pub-show-section-title h2 {
        font-size: 34px;
    }
}

@media (max-width: 767px) {
    .pub-show-related-image {
        height: 200px;
    }

    .pub-show-related-body {
        padding: 20px;
    }

    .pub-show-related-body h4 {
        font-size: 20px;

        line-height: 30px;

        min-height: auto;
    }
}

/*==================================================
            ACHIEVEMENT PAGE
==================================================*/

.ach-page {
    position: relative;

    padding: 90px 0;

    background: #f7faff;

    overflow: hidden;
}

.ach-page::before {
    content: "";

    position: absolute;

    width: 420px;

    height: 420px;

    border-radius: 50%;

    top: -120px;

    right: -150px;

    background: rgba(255, 193, 7, 0.08);

    filter: blur(120px);
}

.ach-page::after {
    content: "";

    position: absolute;

    width: 320px;

    height: 320px;

    border-radius: 50%;

    bottom: 80px;

    left: -120px;

    background: rgba(13, 110, 253, 0.05);

    filter: blur(100px);
}

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

.ach-hero {
    position: relative;

    overflow: hidden;
}

.ach-hero-card {
    position: relative;

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

    backdrop-filter: blur(18px);

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

    border-radius: 28px;

    padding: 45px 35px;

    text-align: center;

    color: #fff;

    box-shadow: 0 20px 45px rgba(0, 0, 0, 0.15);

    transition: 0.4s;
}

.ach-hero-card:hover {
    transform: translateY(-8px);
}

.ach-hero-card h2 {
    font-size: 58px;

    font-weight: 800;

    margin: 25px 0 10px;

    color: #fff;
}

.ach-hero-card h5 {
    font-size: 24px;

    margin-bottom: 15px;

    color: #fff;

    font-weight: 700;
}

.ach-hero-card p {
    color: rgba(255, 255, 255, 0.85);

    line-height: 30px;

    margin: 0;
}

/*==================================================
                HERO ICON
==================================================*/

.ach-hero-icon {
    width: 110px;

    height: 110px;

    margin: auto;

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

    background: linear-gradient(135deg, #ffd54f, #ffb300);

    box-shadow: 0 15px 35px rgba(255, 193, 7, 0.35);
}

.ach-hero-icon i {
    font-size: 48px;

    color: #fff;
}

/*==================================================
            FLOATING EFFECT
==================================================*/

.ach-hero-card {
    animation: achFloat 5s ease-in-out infinite;
}

@keyframes achFloat {
    0% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-8px);
    }

    100% {
        transform: translateY(0);
    }
}

/*==================================================
            HERO BUTTONS
==================================================*/

.ach-hero .btn {
    min-width: 210px;

    height: 56px;

    border-radius: 50px;

    font-weight: 600;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    transition: 0.35s;
}

.ach-hero .btn-primary {
    background: linear-gradient(135deg, #ffc107, #ff9800);

    border: none;
}

.ach-hero .btn-primary:hover {
    transform: translateY(-4px);

    box-shadow: 0 15px 30px rgba(255, 193, 7, 0.35);
}

.ach-hero .btn-outline-light:hover {
    background: #fff;

    color: #16355d;
}

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

@media (max-width: 991px) {
    .ach-hero-card {
        margin-top: 40px;
    }
}

@media (max-width: 767px) {
    .ach-page {
        padding: 70px 0;
    }

    .ach-hero-card {
        padding: 35px 25px;

        border-radius: 22px;
    }

    .ach-hero-card h2 {
        font-size: 42px;
    }

    .ach-hero-card h5 {
        font-size: 20px;
    }

    .ach-hero-icon {
        width: 90px;

        height: 90px;
    }

    .ach-hero-icon i {
        font-size: 40px;
    }
}

/*==================================================
                FILTER SECTION
==================================================*/

.ach-filter-section {
    margin-top: -80px;

    margin-bottom: 60px;

    position: relative;

    z-index: 20;
}

.ach-filter-card {
    background: #fff;

    border-radius: 26px;

    padding: 35px;

    border: 1px solid #e8eef6;

    box-shadow: 0 18px 45px rgba(15, 23, 42, 0.08);

    transition: 0.35s;
}

.ach-filter-card:hover {
    transform: translateY(-4px);

    box-shadow: 0 22px 55px rgba(15, 23, 42, 0.1);
}

/*==================================================
                LABEL
==================================================*/

.ach-filter-label {
    display: block;

    margin-bottom: 10px;

    color: #16355d;

    font-size: 14px;

    font-weight: 700;

    letter-spacing: 0.3px;
}

/*==================================================
            SEARCH BOX
==================================================*/

.ach-search-box {
    position: relative;
}

.ach-search-box i {
    position: absolute;

    top: 50%;

    left: 18px;

    transform: translateY(-50%);

    color: #f4a300;

    font-size: 17px;

    z-index: 5;
}

/*==================================================
                INPUT
==================================================*/

.ach-search-input {
    height: 58px;

    padding-left: 52px !important;

    border: 2px solid #dce6f3;

    border-radius: 16px;

    background: #fff;

    color: #16355d;

    transition: 0.35s;
}

.ach-search-input::placeholder {
    color: #97a6b8;
}

.ach-search-input:focus {
    border-color: #ffc107;

    box-shadow: 0 0 0 0.25rem rgba(255, 193, 7, 0.15);
}

/*==================================================
                SELECT
==================================================*/

.ach-filter-select {
    height: 58px;

    border-radius: 16px;

    border: 2px solid #dce6f3;

    background: #fff;

    color: #16355d;

    font-weight: 500;

    transition: 0.35s;

    cursor: pointer;
}

.ach-filter-select option {
    color: #16355d;
}

.ach-filter-select:focus {
    border-color: #ffc107;

    box-shadow: 0 0 0 0.25rem rgba(255, 193, 7, 0.15);
}

/*==================================================
            SEARCH BUTTON
==================================================*/

.ach-filter-btn {
    height: 58px;

    border: none;

    border-radius: 16px;

    font-weight: 700;

    color: #fff;

    background: linear-gradient(135deg, #ffc107, #ff9800);

    transition: 0.35s;
}

.ach-filter-btn:hover {
    color: #fff;

    transform: translateY(-3px);

    box-shadow: 0 15px 35px rgba(255, 193, 7, 0.3);
}

/*==================================================
            FORM SPACING
==================================================*/

.ach-filter-card .row {
    align-items: end;
}

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

@media (max-width: 991px) {
    .ach-filter-section {
        margin-top: -40px;
    }

    .ach-filter-card {
        padding: 25px;
    }
}

@media (max-width: 767px) {
    .ach-filter-card {
        padding: 20px;

        border-radius: 20px;
    }

    .ach-filter-label {
        margin-bottom: 8px;
    }
}

/*==================================================
            ACHIEVEMENT STATISTICS
==================================================*/

.ach-stat-section {
    margin: 50px 0 70px;
}

.ach-stat-card {
    position: relative;

    display: flex;

    align-items: center;

    gap: 18px;

    padding: 25px;

    height: 100%;

    background: #ffffff;

    border-radius: 22px;

    border: 1px solid #e8eef6;

    overflow: hidden;

    transition: 0.35s;

    box-shadow: 0 10px 30px rgba(15, 23, 42, 0.06);
}

.ach-stat-card::before {
    content: "";

    position: absolute;

    left: 0;

    top: 0;

    width: 5px;

    height: 100%;

    background: linear-gradient(180deg, #ffc107, #ff9800);
}

.ach-stat-card:hover {
    transform: translateY(-8px);

    border-color: #ffe082;

    box-shadow: 0 20px 45px rgba(255, 193, 7, 0.18);
}

/*==================================================
                ICON
==================================================*/

.ach-stat-icon {
    width: 72px;

    height: 72px;

    border-radius: 20px;

    display: flex;

    align-items: center;

    justify-content: center;

    flex-shrink: 0;

    color: #fff;

    font-size: 28px;

    transition: 0.35s;
}

/*==================================================
            ICON COLORS
==================================================*/

.ach-gold {
    background: linear-gradient(135deg, #ffc107, #ff9800);
}

.ach-primary {
    background: linear-gradient(135deg, #0d6efd, #3ea6ff);
}

.ach-success {
    background: linear-gradient(135deg, #16a34a, #22c55e);
}

.ach-warning {
    background: linear-gradient(135deg, #f59e0b, #fbbf24);
}

.ach-info {
    background: linear-gradient(135deg, #06b6d4, #38bdf8);
}

/*==================================================
                TEXT
==================================================*/

.ach-stat-card h2 {
    margin: 0;

    color: #16355d;

    font-size: 34px;

    font-weight: 800;

    line-height: 1;

    transition: 0.35s;
}

.ach-stat-card span {
    display: block;

    margin-top: 8px;

    color: #6b7d91;

    font-size: 15px;

    font-weight: 600;
}

/*==================================================
                HOVER
==================================================*/

.ach-stat-card:hover .ach-stat-icon {
    transform: rotate(-8deg) scale(1.08);
}

.ach-stat-card:hover h2 {
    color: #ff9800;
}

/*==================================================
            NUMBER ANIMATION
==================================================*/

.ach-stat-card h2 {
    letter-spacing: 0.5px;
}

.ach-stat-card:hover::before {
    width: 8px;
}

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

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

@media (max-width: 767px) {
    .ach-stat-section {
        margin: 40px 0 50px;
    }

    .ach-stat-card {
        padding: 18px;

        border-radius: 18px;
    }

    .ach-stat-icon {
        width: 60px;

        height: 60px;

        font-size: 24px;

        border-radius: 16px;
    }

    .ach-stat-card h2 {
        font-size: 28px;
    }

    .ach-stat-card span {
        font-size: 14px;
    }
}

/*==================================================
                ACHIEVEMENT GRID
==================================================*/

.ach-grid-section {
    margin-top: 60px;
}

.ach-grid-section .row {
    row-gap: 30px;
}

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

.ach-card {
    position: relative;

    display: flex;

    flex-direction: column;

    height: 100%;

    background: #fff;

    border-radius: 24px;

    overflow: hidden;

    border: 1px solid #e6edf7;

    transition: 0.35s;

    box-shadow: 0 10px 30px rgba(15, 23, 42, 0.06);
}

.ach-card:hover {
    transform: translateY(-10px);

    border-color: #ffd76a;

    box-shadow: 0 25px 55px rgba(255, 193, 7, 0.2);
}

/*==================================================
                IMAGE
==================================================*/

.ach-card-image {
    position: relative;

    height: 240px;

    overflow: hidden;

    background: #16355d;
}

.ach-card-image img {
    width: 100%;

    height: 100%;

    object-fit: cover;

    transition: 0.5s;
}

.ach-card:hover .ach-card-image img {
    transform: scale(1.08);
}

/*==================================================
                OVERLAY
==================================================*/

.ach-card-overlay {
    position: absolute;

    inset: 0;

    background: linear-gradient(
        180deg,
        rgba(0, 0, 0, 0.08),
        rgba(0, 0, 0, 0.18),
        rgba(0, 0, 0, 0.72)
    );
}

/*==================================================
                PLACEHOLDER
==================================================*/

.ach-card-placeholder {
    width: 100%;

    height: 100%;

    display: flex;

    align-items: center;

    justify-content: center;

    background: linear-gradient(135deg, #ffc107, #ff9800);
}

.ach-card-placeholder i {
    font-size: 70px;

    color: #fff;
}

/*==================================================
                TYPE BADGE
==================================================*/

.ach-badge {
    position: absolute;

    top: 18px;

    left: 18px;

    z-index: 5;

    padding: 8px 18px;

    border-radius: 50px;

    background: #ffc107;

    color: #fff;

    font-size: 12px;

    font-weight: 700;

    text-transform: uppercase;

    letter-spacing: 0.5px;
}

/*==================================================
                YEAR
==================================================*/

.ach-year {
    position: absolute;

    top: 18px;

    right: 18px;

    z-index: 5;

    padding: 8px 14px;

    border-radius: 50px;

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

    backdrop-filter: blur(12px);

    color: #fff;

    font-size: 13px;

    font-weight: 700;
}

/*==================================================
                BODY
==================================================*/

.ach-card-body {
    flex: 1;

    display: flex;

    flex-direction: column;

    padding: 24px;
}

.ach-card-body h3 {
    font-size: 22px;

    line-height: 32px;

    color: #16355d;

    font-weight: 700;

    margin-bottom: 18px;

    min-height: 68px;

    transition: 0.35s;
}

.ach-card:hover .ach-card-body h3 {
    color: #ff9800;
}

/*==================================================
                META
==================================================*/

.ach-meta {
    display: flex;

    align-items: flex-start;

    gap: 10px;

    margin-bottom: 12px;

    color: #697b91;

    font-size: 14px;

    line-height: 24px;
}

.ach-meta i {
    width: 18px;

    color: #ff9800;

    margin-top: 3px;
}

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

.ach-desc {
    margin-top: 12px;

    padding-top: 16px;

    border-top: 1px dashed #dce6f2;

    color: #708295;

    line-height: 28px;

    flex: 1;
}

/*==================================================
                FOOTER
==================================================*/

.ach-card-footer {
    padding: 22px 24px;

    border-top: 1px solid #edf2f7;

    background: #fcfdff;
}

/*==================================================
                BUTTON
==================================================*/

.ach-btn {
    display: flex;

    align-items: center;

    justify-content: center;

    width: 100%;

    height: 52px;

    border-radius: 14px;

    text-decoration: none;

    font-weight: 600;

    color: #fff;

    background: linear-gradient(135deg, #ffc107, #ff9800);

    transition: 0.35s;
}

.ach-btn:hover {
    color: #fff;

    transform: translateY(-3px);

    box-shadow: 0 15px 30px rgba(255, 193, 7, 0.3);
}

.ach-btn i {
    transition: 0.35s;
}

.ach-btn:hover i {
    transform: translateX(4px);
}

/*==================================================
                EMPTY STATE
==================================================*/

.ach-empty {
    background: #fff;

    border-radius: 24px;

    border: 1px solid #e7edf6;

    padding: 70px 40px;

    text-align: center;

    box-shadow: 0 10px 30px rgba(15, 23, 42, 0.06);
}

.ach-empty i {
    font-size: 70px;

    color: #ffc107;

    margin-bottom: 25px;
}

.ach-empty h3 {
    color: #16355d;

    font-weight: 700;

    margin-bottom: 15px;
}

.ach-empty p {
    color: #708295;

    max-width: 550px;

    margin: auto;

    line-height: 30px;
}

/*==================================================
                PAGINATION
==================================================*/

.ach-pagination-wrapper {
    margin-top: 70px;

    display: flex;

    flex-direction: column;

    align-items: center;
}

.ach-pagination-info {
    margin-bottom: 20px;

    color: #708295;

    font-size: 15px;
}

.ach-pagination-info strong {
    color: #16355d;
}

.ach-pagination {
    display: flex;

    align-items: center;

    justify-content: center;

    gap: 12px;

    flex-wrap: wrap;
}

.ach-page-btn {
    width: 50px;

    height: 50px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 15px;

    text-decoration: none;

    background: #fff;

    border: 1px solid #e4ebf5;

    color: #16355d;

    font-weight: 700;

    transition: 0.35s;

    box-shadow: 0 10px 25px rgba(15, 23, 42, 0.06);
}

.ach-page-btn:hover {
    background: linear-gradient(135deg, #ffc107, #ff9800);

    color: #fff;

    border-color: #ffc107;

    transform: translateY(-4px);
}

.ach-page-btn.active {
    background: linear-gradient(135deg, #ffc107, #ff9800);

    color: #fff;

    border-color: #ffc107;

    box-shadow: 0 15px 35px rgba(255, 193, 7, 0.3);
}

.ach-page-btn.disabled {
    opacity: 0.35;

    pointer-events: none;
}

/*==================================================
            CARD HOVER EFFECTS
==================================================*/

.ach-card:hover .ach-badge {
    transform: scale(1.05);
}

.ach-card:hover .ach-year {
    background: #ffc107;
}

.ach-card:hover .ach-meta i {
    transform: translateX(3px);
}

.ach-meta i {
    transition: 0.35s;
}

.ach-card:hover .ach-card-placeholder i {
    transform: scale(1.08);
}

.ach-card-placeholder i {
    transition: 0.35s;
}

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

@media (max-width: 1199px) {
    .ach-card-image {
        height: 220px;
    }
}

@media (max-width: 991px) {
    .ach-card {
        border-radius: 20px;
    }
}

@media (max-width: 767px) {
    .ach-card-image {
        height: 200px;
    }

    .ach-card-body {
        padding: 20px;
    }

    .ach-card-body h3 {
        font-size: 20px;

        line-height: 30px;

        min-height: auto;
    }

    .ach-card-footer {
        padding: 18px;
    }

    .ach-page-btn {
        width: 42px;

        height: 42px;

        border-radius: 12px;

        font-size: 14px;
    }
}

@media (max-width: 575px) {
    .ach-empty {
        padding: 45px 20px;
    }

    .ach-empty i {
        font-size: 55px;
    }

    .ach-pagination {
        gap: 8px;
    }
}

/*==================================================
            ACHIEVEMENT SHOW PAGE
==================================================*/

.ach-show-page {
    position: relative;

    padding: 90px 0;

    background: #f7faff;

    overflow: hidden;
}

.ach-show-page::before {
    content: "";

    position: absolute;

    width: 420px;

    height: 420px;

    border-radius: 50%;

    background: rgba(255, 193, 7, 0.08);

    top: -120px;

    right: -150px;

    filter: blur(120px);
}

.ach-show-page::after {
    content: "";

    position: absolute;

    width: 320px;

    height: 320px;

    border-radius: 50%;

    background: rgba(13, 110, 253, 0.05);

    left: -120px;

    bottom: 80px;

    filter: blur(100px);
}

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

.ach-show-hero {
    position: relative;

    overflow: hidden;
}

/*==================================================
            META
==================================================*/

.ach-show-meta {
    display: flex;

    flex-wrap: wrap;

    gap: 15px;
}

.ach-show-meta span {
    display: flex;

    align-items: center;

    gap: 8px;

    padding: 12px 18px;

    border-radius: 50px;

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

    backdrop-filter: blur(15px);

    color: #fff;

    font-size: 14px;

    font-weight: 500;
}

.ach-show-meta span i {
    color: #ffd54f;
}

/*==================================================
            BUTTONS
==================================================*/

.ach-show-buttons {
    display: flex;

    flex-wrap: wrap;

    gap: 18px;
}

/*==================================================
            COVER CARD
==================================================*/

.ach-show-cover-card {
    background: #fff;

    border-radius: 24px;

    overflow: hidden;

    border: 1px solid #e7edf6;

    box-shadow: 0 18px 45px rgba(15, 23, 42, 0.08);

    transition: 0.35s;
}

.ach-show-cover-card:hover {
    transform: translateY(-8px);

    box-shadow: 0 25px 55px rgba(255, 193, 7, 0.18);
}

.ach-show-cover-card img {
    width: 100%;

    height: 520px;

    object-fit: cover;
}

/*==================================================
            PLACEHOLDER
==================================================*/

.ach-show-placeholder {
    height: 520px;

    display: flex;

    align-items: center;

    justify-content: center;

    background: linear-gradient(135deg, #ffc107, #ff9800);
}

.ach-show-placeholder i {
    color: #fff;

    font-size: 90px;
}

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

.ach-show-card {
    background: #fff;

    border-radius: 24px;

    border: 1px solid #e7edf6;

    overflow: hidden;

    margin-bottom: 30px;

    box-shadow: 0 10px 30px rgba(15, 23, 42, 0.06);
}

/*==================================================
            CARD HEADER
==================================================*/

.ach-show-card-header {
    display: flex;

    align-items: center;

    gap: 15px;

    padding: 22px 28px;

    background: linear-gradient(135deg, #ffc107, #ff9800);

    color: #fff;
}

.ach-show-card-header i {
    font-size: 22px;
}

.ach-show-card-header h3 {
    margin: 0;

    font-size: 22px;

    font-weight: 700;
}

/*==================================================
            CARD BODY
==================================================*/

.ach-show-card-body {
    padding: 30px;

    color: #5f7185;

    line-height: 30px;

    font-size: 16px;
}

/*==================================================
            DETAIL ITEM
==================================================*/

.ach-show-item {
    height: 100%;

    padding: 18px;

    border-radius: 18px;

    background: #fafcff;

    border: 1px solid #e8eef6;

    transition: 0.35s;
}

.ach-show-item:hover {
    border-color: #ffc107;

    transform: translateY(-4px);
}

.ach-show-item span {
    display: block;

    margin-bottom: 8px;

    color: #7a8ca3;

    font-size: 13px;

    text-transform: uppercase;

    letter-spacing: 0.5px;
}

.ach-show-item strong {
    color: #16355d;

    font-size: 16px;

    font-weight: 700;
}

/*==================================================
                SIDEBAR
==================================================*/

.ach-show-sidebar {
    position: relative;

    background: #fff;

    border-radius: 24px;

    border: 1px solid #e7edf6;

    overflow: hidden;

    box-shadow: 0 10px 30px rgba(15, 23, 42, 0.06);

    transition: 0.35s;
}

.ach-show-sidebar:hover {
    transform: translateY(-6px);

    box-shadow: 0 20px 45px rgba(255, 193, 7, 0.15);
}

/*==================================================
            STICKY SIDEBAR
==================================================*/

@media (min-width: 992px) {
    .ach-show-sidebar {
        position: sticky;

        top: 100px;
    }
}

/*==================================================
            SIDEBAR HEADER
==================================================*/

.ach-show-sidebar-header {
    display: flex;

    align-items: center;

    gap: 14px;

    padding: 22px 24px;

    background: linear-gradient(135deg, #ffc107, #ff9800);

    color: #fff;
}

.ach-show-sidebar-header i {
    font-size: 22px;
}

.ach-show-sidebar-header h4 {
    margin: 0;

    font-size: 20px;

    font-weight: 700;
}

/*==================================================
                INFO LIST
==================================================*/

.ach-show-sidebar-list {
    margin: 0;

    padding: 0;

    list-style: none;
}

.ach-show-sidebar-list li {
    display: flex;

    justify-content: space-between;

    align-items: flex-start;

    gap: 15px;

    padding: 18px 24px;

    border-bottom: 1px solid #eef3f8;
}

.ach-show-sidebar-list li:last-child {
    border-bottom: none;
}

.ach-show-sidebar-list span {
    color: #7c8ea3;

    font-size: 14px;

    font-weight: 500;
}

.ach-show-sidebar-list strong {
    color: #16355d;

    text-align: right;

    font-size: 15px;

    font-weight: 700;

    word-break: break-word;
}

/*==================================================
            QUICK ACTION BUTTONS
==================================================*/

.ach-show-btn-primary,
.ach-show-btn-success,
.ach-show-btn-light {
    display: flex;

    align-items: center;

    justify-content: center;

    width: 100%;

    height: 54px;

    border: none;

    border-radius: 14px;

    text-decoration: none;

    font-weight: 600;

    transition: 0.35s;
}

/*==================================================
            DOWNLOAD BUTTON
==================================================*/

.ach-show-btn-primary {
    background: linear-gradient(135deg, #ffc107, #ff9800);

    color: #fff;
}

.ach-show-btn-primary:hover {
    color: #fff;

    transform: translateY(-3px);

    box-shadow: 0 12px 30px rgba(255, 193, 7, 0.3);
}

/*==================================================
            WEBSITE BUTTON
==================================================*/

.ach-show-btn-success {
    background: linear-gradient(135deg, #16a34a, #22c55e);

    color: #fff;
}

.ach-show-btn-success:hover {
    color: #fff;

    transform: translateY(-3px);

    box-shadow: 0 12px 30px rgba(22, 163, 74, 0.25);
}

/*==================================================
            BACK BUTTON
==================================================*/

.ach-show-btn-light {
    background: #f8fbff;

    border: 1px solid #dfe7f3;

    color: #16355d;
}

.ach-show-btn-light:hover {
    background: #16355d;

    color: #fff;

    border-color: #16355d;
}

/*==================================================
                ICONS
==================================================*/

.ach-show-btn-primary i,
.ach-show-btn-success i,
.ach-show-btn-light i {
    margin-right: 10px;
}

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

@media (max-width: 991px) {
    .ach-show-sidebar {
        position: relative;

        top: auto;

        margin-top: 30px;
    }
}

@media (max-width: 767px) {
    .ach-show-sidebar {
        border-radius: 18px;
    }

    .ach-show-sidebar-header {
        padding: 18px 20px;
    }

    .ach-show-sidebar-list li {
        padding: 16px 18px;
    }
}

/*==================================================
            RELATED SECTION
==================================================*/

.ach-show-related-section {
    margin-top: 80px;
}

.ach-show-section-title {
    text-align: center;

    margin-bottom: 50px;
}

.ach-show-section-title span {
    display: inline-flex;

    align-items: center;

    gap: 8px;

    padding: 10px 24px;

    border-radius: 50px;

    background: rgba(255, 193, 7, 0.12);

    color: #ff9800;

    font-weight: 700;

    margin-bottom: 18px;
}

.ach-show-section-title h2 {
    font-size: 42px;

    font-weight: 800;

    color: #16355d;

    margin-bottom: 15px;
}

.ach-show-section-title p {
    max-width: 650px;

    margin: auto;

    color: #708295;

    line-height: 30px;
}

/*==================================================
            RELATED CARD
==================================================*/

.ach-show-related-card {
    position: relative;

    background: #fff;

    border-radius: 24px;

    overflow: hidden;

    border: 1px solid #e7edf6;

    transition: 0.35s;

    height: 100%;

    box-shadow: 0 10px 30px rgba(15, 23, 42, 0.06);
}

.ach-show-related-card:hover {
    transform: translateY(-10px);

    border-color: #ffd54f;

    box-shadow: 0 25px 55px rgba(255, 193, 7, 0.2);
}

/*==================================================
            IMAGE
==================================================*/

.ach-show-related-image {
    position: relative;

    height: 230px;

    overflow: hidden;

    background: #16355d;
}

.ach-show-related-image img {
    width: 100%;

    height: 100%;

    object-fit: cover;

    transition: 0.5s;
}

.ach-show-related-card:hover .ach-show-related-image img {
    transform: scale(1.08);
}

/*==================================================
            PLACEHOLDER
==================================================*/

.ach-show-related-placeholder {
    width: 100%;

    height: 100%;

    display: flex;

    justify-content: center;

    align-items: center;

    background: linear-gradient(135deg, #ffc107, #ff9800);
}

.ach-show-related-placeholder i {
    font-size: 65px;

    color: #fff;
}

/*==================================================
            BADGE
==================================================*/

.ach-show-related-badge {
    position: absolute;

    top: 18px;

    left: 18px;

    padding: 8px 18px;

    border-radius: 50px;

    background: #ffc107;

    color: #fff;

    font-size: 12px;

    font-weight: 700;

    text-transform: uppercase;

    z-index: 5;
}

/*==================================================
            BODY
==================================================*/

.ach-show-related-body {
    padding: 25px;
}

.ach-show-related-body h4 {
    color: #16355d;

    font-size: 22px;

    font-weight: 700;

    line-height: 32px;

    min-height: 65px;

    margin-bottom: 16px;

    transition: 0.35s;
}

.ach-show-related-card:hover h4 {
    color: #ff9800;
}

.ach-show-related-body p {
    color: #708295;

    margin-bottom: 15px;
}

.ach-show-related-body p i {
    color: #ff9800;

    margin-right: 8px;
}

/*==================================================
            META
==================================================*/

.ach-show-related-meta {
    margin-bottom: 20px;
}

.ach-show-related-meta span {
    display: inline-flex;

    align-items: center;

    gap: 8px;

    color: #708295;

    font-size: 14px;
}

/*==================================================
            BUTTON
==================================================*/

.ach-show-related-btn {
    width: 100%;

    height: 50px;

    display: flex;

    justify-content: center;

    align-items: center;

    border-radius: 14px;

    background: linear-gradient(135deg, #ffc107, #ff9800);

    color: #fff;

    text-decoration: none;

    font-weight: 600;

    transition: 0.35s;
}

.ach-show-related-btn:hover {
    color: #fff;

    transform: translateY(-3px);

    box-shadow: 0 12px 30px rgba(255, 193, 7, 0.3);
}

.ach-show-related-btn i {
    transition: 0.35s;
}

.ach-show-related-btn:hover i {
    transform: translateX(4px);
}

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

@media (max-width: 991px) {
    .ach-show-section-title h2 {
        font-size: 34px;
    }
}

@media (max-width: 767px) {
    .ach-show-related-image {
        height: 200px;
    }

    .ach-show-related-body {
        padding: 20px;
    }

    .ach-show-related-body h4 {
        font-size: 20px;

        line-height: 30px;

        min-height: auto;
    }

    .ach-show-section-title h2 {
        font-size: 28px;
    }

    .ach-show-section-title p {
        font-size: 15px;
    }
}

/*==================================================
            ANIMATIONS
==================================================*/

.ach-show-related-card:hover .ach-show-related-badge {
    transform: scale(1.05);
}

.ach-show-related-card:hover .ach-show-related-placeholder i {
    transform: scale(1.1);
}

.ach-show-related-placeholder i {
    transition: 0.35s;
}

/*==================================================
            SMOOTH TRANSITION
==================================================*/

.ach-show-card,
.ach-show-sidebar,
.ach-show-related-card,
.ach-show-cover-card {
    transition: all 0.35s ease;
}

/*==================================================
                GALLERY PAGE
==================================================*/

.gallery-page {
    position: relative;

    padding: 90px 0;

    background: #f7faff;

    overflow: hidden;
}

.gallery-page::before {
    content: "";

    position: absolute;

    width: 450px;

    height: 450px;

    right: -180px;

    top: -120px;

    border-radius: 50%;

    background: rgba(13, 110, 253, 0.05);

    filter: blur(120px);
}

.gallery-page::after {
    content: "";

    position: absolute;

    width: 320px;

    height: 320px;

    left: -100px;

    bottom: 60px;

    border-radius: 50%;

    background: rgba(255, 193, 7, 0.08);

    filter: blur(110px);
}

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

.gallery-hero {
    position: relative;
}

.gallery-hero-card {
    background: rgba(255, 255, 255, 0.12);

    backdrop-filter: blur(18px);

    border-radius: 28px;

    padding: 45px 35px;

    text-align: center;

    color: #fff;

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

    box-shadow: 0 20px 45px rgba(0, 0, 0, 0.15);

    transition: 0.35s;
}

.gallery-hero-card:hover {
    transform: translateY(-8px);
}

.gallery-hero-icon {
    width: 110px;

    height: 110px;

    margin: auto;

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

    background: linear-gradient(135deg, #0d6efd, #3ea6ff);

    box-shadow: 0 15px 35px rgba(13, 110, 253, 0.3);
}

.gallery-hero-icon i {
    font-size: 46px;

    color: #fff;
}

.gallery-hero-card h2 {
    font-size: 56px;

    font-weight: 800;

    margin: 22px 0 10px;
}

.gallery-hero-card h5 {
    font-size: 24px;

    font-weight: 700;

    margin-bottom: 15px;
}

.gallery-hero-card p {
    color: rgba(255, 255, 255, 0.88);

    line-height: 30px;
}

/*==================================================
                FILTER
==================================================*/

.gallery-filter-section {
    position: relative;

    margin-top: -70px;

    margin-bottom: 60px;

    z-index: 10;
}

.gallery-filter-card {
    background: #fff;

    border-radius: 24px;

    padding: 35px;

    border: 1px solid #e8eef6;

    box-shadow: 0 18px 45px rgba(15, 23, 42, 0.08);
}

.gallery-filter-label {
    display: block;

    margin-bottom: 10px;

    font-weight: 700;

    color: #16355d;
}

/*==================================================
                SEARCH
==================================================*/

.gallery-search-box {
    position: relative;
}

.gallery-search-box i {
    position: absolute;

    left: 18px;

    top: 50%;

    transform: translateY(-50%);

    color: #0d6efd;

    z-index: 2;
}

.gallery-search-input {
    height: 58px;

    border-radius: 16px;

    padding-left: 48px;

    border: 2px solid #dce6f3;
}

.gallery-search-input:focus {
    border-color: #0d6efd;

    box-shadow: 0 0 0 0.2rem rgba(13, 110, 253, 0.12);
}

/*==================================================
                FILTER CHIPS
==================================================*/

.gallery-type-list {
    display: flex;

    flex-wrap: wrap;

    gap: 10px;
}

.gallery-chip {
    padding: 10px 20px;

    border-radius: 50px;

    background: #f5f8fc;

    border: 1px solid #dfe7f3;

    color: #16355d;

    text-decoration: none;

    font-size: 14px;

    font-weight: 600;

    transition: 0.35s;
}

.gallery-chip:hover {
    background: #0d6efd;

    color: #fff;

    border-color: #0d6efd;
}

.gallery-chip.active {
    background: linear-gradient(135deg, #0d6efd, #3ea6ff);

    color: #fff;

    border-color: #0d6efd;
}

/*==================================================
                SEARCH BUTTON
==================================================*/

.gallery-search-btn {
    height: 58px;

    border: none;

    border-radius: 16px;

    background: linear-gradient(135deg, #0d6efd, #3ea6ff);

    color: #fff;

    font-weight: 700;

    transition: 0.35s;
}

.gallery-search-btn:hover {
    color: #fff;

    transform: translateY(-3px);

    box-shadow: 0 15px 30px rgba(13, 110, 253, 0.25);
}

/*==================================================
                STATISTICS
==================================================*/

.gallery-stat-section {
    margin: 50px 0 70px;
}

.gallery-stat-card {
    position: relative;

    display: flex;

    align-items: center;

    gap: 18px;

    padding: 25px;

    background: #fff;

    border-radius: 22px;

    border: 1px solid #e8eef6;

    overflow: hidden;

    transition: 0.35s;

    box-shadow: 0 10px 30px rgba(15, 23, 42, 0.06);
}

.gallery-stat-card::before {
    content: "";

    position: absolute;

    left: 0;

    top: 0;

    width: 5px;

    height: 100%;

    background: linear-gradient(180deg, #0d6efd, #3ea6ff);
}

.gallery-stat-card:hover {
    transform: translateY(-8px);

    box-shadow: 0 20px 45px rgba(13, 110, 253, 0.15);
}

.gallery-stat-icon {
    width: 72px;

    height: 72px;

    border-radius: 18px;

    display: flex;

    align-items: center;

    justify-content: center;

    color: #fff;

    font-size: 28px;
}

.gallery-stat-icon.gold {
    background: linear-gradient(135deg, #ffc107, #ff9800);
}

.gallery-stat-icon.blue {
    background: linear-gradient(135deg, #0d6efd, #3ea6ff);
}

.gallery-stat-icon.green {
    background: linear-gradient(135deg, #22c55e, #16a34a);
}

.gallery-stat-icon.purple {
    background: linear-gradient(135deg, #7c3aed, #9333ea);
}

.gallery-stat-card h2 {
    margin: 0;

    font-size: 34px;

    font-weight: 800;

    color: #16355d;
}

.gallery-stat-card span {
    color: #708295;

    font-weight: 600;
}

/*==================================================
                GALLERY GRID
==================================================*/

.gallery-grid-section {
    margin-top: 60px;
}

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

.gallery-card {
    position: relative;

    background: #fff;

    border-radius: 22px;

    overflow: hidden;

    border: 1px solid #e8eef6;

    transition: 0.35s;

    height: 100%;

    box-shadow: 0 10px 30px rgba(15, 23, 42, 0.06);
}

.gallery-card:hover {
    transform: translateY(-8px);

    box-shadow: 0 25px 55px rgba(13, 110, 253, 0.15);
}

/*==================================================
                IMAGE
==================================================*/

.gallery-image {
    position: relative;

    height: 270px;

    overflow: hidden;
}

.gallery-image img {
    width: 100%;

    height: 100%;

    object-fit: cover;

    transition: 0.55s;
}

.gallery-card:hover img {
    transform: scale(1.12);
}

/*==================================================
                OVERLAY
==================================================*/

.gallery-overlay {
    position: absolute;

    inset: 0;

    display: flex;

    justify-content: center;

    align-items: center;

    text-align: center;

    background: linear-gradient(
        180deg,
        rgba(13, 110, 253, 0.05),
        rgba(13, 110, 253, 0.88)
    );

    opacity: 0;

    transition: 0.35s;
}

.gallery-card:hover .gallery-overlay {
    opacity: 1;
}

.gallery-overlay-content {
    color: #fff;

    transform: translateY(20px);

    transition: 0.35s;
}

.gallery-card:hover .gallery-overlay-content {
    transform: translateY(0);
}

.gallery-overlay-content i {
    width: 75px;

    height: 75px;

    border-radius: 50%;

    display: flex;

    justify-content: center;

    align-items: center;

    margin: auto;

    margin-bottom: 18px;

    font-size: 28px;

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

    backdrop-filter: blur(10px);
}

.gallery-overlay-content h4 {
    font-size: 24px;

    margin-bottom: 8px;

    font-weight: 700;
}

.gallery-overlay-content span {
    opacity: 0.9;
}

/*==================================================
                BADGES
==================================================*/

.gallery-badge {
    position: absolute;

    top: 18px;

    left: 18px;

    z-index: 5;

    padding: 8px 18px;

    border-radius: 40px;

    background: #0d6efd;

    color: #fff;

    font-size: 12px;

    font-weight: 700;

    text-transform: uppercase;
}

.gallery-featured {
    position: absolute;

    top: 18px;

    right: 18px;

    width: 42px;

    height: 42px;

    border-radius: 50%;

    background: #ffc107;

    color: #fff;

    display: flex;

    justify-content: center;

    align-items: center;

    z-index: 5;
}

/*==================================================
                BODY
==================================================*/

.gallery-body {
    padding: 24px;
}

.gallery-body h3 {
    font-size: 22px;

    font-weight: 700;

    color: #16355d;

    margin-bottom: 18px;

    line-height: 32px;

    min-height: 65px;
}

.gallery-meta {
    display: flex;

    align-items: center;

    gap: 10px;

    margin-bottom: 12px;

    color: #708295;

    font-size: 14px;
}

.gallery-meta i {
    width: 18px;

    color: #0d6efd;
}

/*==================================================
                EMPTY STATE
==================================================*/

.gallery-empty{

    background:#fff;

    border-radius:24px;

    padding:80px 40px;

    text-align:center;

    border:1px solid #e8eef6;

    box-shadow:0 15px 35px rgba(15,23,42,.06);

}

.gallery-empty i{

    font-size:70px;

    color:#0d6efd;

    margin-bottom:20px;

}

.gallery-empty h3{

    color:#16355d;

    font-size:30px;

    font-weight:700;

    margin-bottom:15px;

}

.gallery-empty p{

    color:#708295;

    margin:0;

}



/*==================================================
                PAGINATION
==================================================*/

.gallery-pagination-wrapper{

    margin-top:70px;

    display:flex;

    flex-direction:column;

    align-items:center;

}

.gallery-pagination-info{

    margin-bottom:20px;

    color:#708295;

    font-size:15px;

}

.gallery-pagination-info strong{

    color:#16355d;

}

.gallery-pagination{

    display:flex;

    gap:12px;

    flex-wrap:wrap;

    justify-content:center;

}

.gallery-page-btn{

    width:50px;

    height:50px;

    display:flex;

    justify-content:center;

    align-items:center;

    border-radius:15px;

    background:#fff;

    border:1px solid #dfe7f3;

    text-decoration:none;

    color:#16355d;

    font-weight:700;

    transition:.35s;

    box-shadow:0 10px 25px rgba(15,23,42,.05);

}

.gallery-page-btn:hover{

    background:linear-gradient(135deg,#0d6efd,#3ea6ff);

    color:#fff;

    transform:translateY(-3px);

}

.gallery-page-btn.active{

    background:linear-gradient(135deg,#0d6efd,#3ea6ff);

    color:#fff;

    border-color:#0d6efd;

}

.gallery-page-btn.disabled{

    opacity:.35;

    pointer-events:none;

}



/*==================================================
                CARD ANIMATION
==================================================*/

.gallery-card:hover .gallery-badge{

    transform:scale(1.05);

}

.gallery-card:hover .gallery-featured{

    transform:rotate(15deg) scale(1.08);

}

.gallery-badge,

.gallery-featured{

    transition:.35s;

}



/*==================================================
                FANCYBOX
==================================================*/

.fancybox__backdrop{

    background:rgba(8,15,35,.96);

}

.fancybox__toolbar{

    background:rgba(255,255,255,.08);

    backdrop-filter:blur(12px);

}

.fancybox__caption{

    background:rgba(255,255,255,.08);

    backdrop-filter:blur(12px);

    border-radius:15px;

    max-width:700px;

    margin:auto;

    margin-bottom:20px;

    padding:20px;

}

.fancybox__caption h4{

    color:#fff;

    margin-bottom:10px;

}

.fancybox__caption p{

    color:#ddd;

    margin-bottom:8px;

}

.fancybox__caption strong{

    color:#4ea1ff;

}



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

@media(max-width:1199px){

    .gallery-image{

        height:240px;

    }

}

@media(max-width:991px){

    .gallery-filter-card{

        padding:25px;

    }

    .gallery-stat-card{

        padding:20px;

    }

}

@media(max-width:767px){

    .gallery-page{

        padding:70px 0;

    }

    .gallery-filter-section{

        margin-top:-40px;

    }

    .gallery-image{

        height:220px;

    }

    .gallery-body{

        padding:20px;

    }

    .gallery-body h3{

        font-size:20px;

        min-height:auto;

        line-height:30px;

    }

    .gallery-overlay-content h4{

        font-size:20px;

    }

    .gallery-overlay-content i{

        width:60px;

        height:60px;

        font-size:22px;

    }

}

@media(max-width:576px){

    .gallery-filter-card{

        padding:18px;

        border-radius:18px;

    }

    .gallery-chip{

        font-size:13px;

        padding:8px 14px;

    }

    .gallery-page-btn{

        width:42px;

        height:42px;

        border-radius:12px;

        font-size:14px;

    }

    .gallery-empty{

        padding:50px 20px;

    }

    .gallery-empty h3{

        font-size:24px;

    }

}