.header-2 * {transition:.3s;}
.header-2 {position:fixed; top:0; left:0; width:100vw; padding-top: 1rem; z-index: 100;}
.header-2 .container {background: rgba(0,0,0,.7); backdrop-filter: blur(3px); border-radius: 2rem; padding-top:1rem; padding-bottom: 1rem;}


.header-2 #logo {display:block;}
.header-2 #logo:hover {opacity:.75;}
.header-2 #logo img {filter:invert(1);}

.header-2 #header_items {margin:.5rem 0; display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center;}
.header-2 #header_items .logo svg path {fill: var(--color-base);}
.header-2 #header_items .logo svg path.arrow {fill: var(--color-body);}
.header-2 .top_menu {}
.header-2 .top_menu ul {display:flex; padding: 0; gap:1rem; flex-wrap:wrap; margin:0;}
.header-2 .top_menu ul li {position: relative; flex: auto; text-align: center; display:block;}
.header-2 .top_menu ul li a {display:block; color:#fff;}
.header-2 .top_menu > ul > li:hover > a {text-decoration: underline;}
.header-2 .top_menu ul li ul {display:none; position:absolute; top:100%; right:0; background:rgba(0,0,0,.7); backdrop-filter: blur(3px); text-align:left; box-shadow: 0 6px 12px rgb(0 0 0 / 18%); padding: 1.5rem 0; border-radius: 2rem; white-space: nowrap;}
.header-2 .top_menu ul li ul li {text-align:left;}
.header-2 .top_menu ul li ul li a {color: #fff; text-decoration: none; padding:1rem 1.5rem; display: block;}
.header-2 .top_menu ul li ul li a i {margin-right: 1rem;}
.header-2 .top_menu ul li ul li:hover > a {background:rgba(0,0,0,1);}
.header-2 .top_menu ul li ul li ul li:hover a {box-shadow: 0 6px 12px rgb(0 0 0 / 18%);}
.header-2 .top_menu ul li:hover > ul {display: block;}
.header-2 .top_menu ul li ul li ul {display: none; top: 0; left: 100%; min-height: 100%;}
.header-2 .top_menu ul li ul li.parent > a {padding-right:2rem; position:relative;}
.header-2 .top_menu ul li ul li.parent > a::before {content: '\27A4'; position:absolute; right:.5rem; top:50%; transform:translateY(-50%);}

.mobile-window {position: fixed; z-index: 1000;}
.mobile-window * {transition: .3s;}
.mobile-window .logo img {filter:invert(1);}
.mobile-window .bg {position:fixed; background:rgba(0,0,0,.5); backdrop-filter: blur(1px); top:0; left:0; right:100%; bottom:0; border-radius:0 100% 100% 0;}
.mobile-window .window {width:0; background:rgba(0,0,0,.7); backdrop-filter: blur(2px); position:fixed; top:0; left:0; bottom:0; border-radius:0 100% 100% 0; opacity:0; padding:0; overflow:auto; display:flex; flex-direction: column; text-align: center;}
.mobile-window .close {position:fixed; top:0; left:300px; margin:1rem; font-size:0; color:#fff; cursor:pointer;}
.mobile-window .close:hover {opacity:.7;}
.mobile-window .window > div {margin:1rem 0;}
.mobile-window .mobile_menu {text-align:left; margin-bottom:auto;}
.mobile-window .mobile_menu ul {display:block; margin:0; padding:0;}
.mobile-window .mobile_menu ul li {display:block; margin:0; padding:0;}
.mobile-window .mobile_menu ul li a {color:#fff; display: block; padding: .5rem 1rem;}
.mobile-window .mobile_menu ul li ul {margin-left: 1rem; border-left: 1px dotted #ddd;}

body.active-menu {overflow:hidden;}
body.active-menu .mobile-window {display:block;}
body.active-menu .mobile-window .bg {right:0; border-radius:0;}
body.active-menu .mobile-window .close {font-size:3rem;}
body.active-menu .mobile-window .window {width:300px; border-radius: 0 2rem 2rem; opacity:1; padding:1rem;}

.breadcrumbs {display: none;}

[data-color="#000000FF"] {color:#000000FF}

@media (min-width: 781px) {
    .content-2 .sticky-top {top:110px; z-index: 10;}
}
@media (max-width: 780px) {
    .content-2 .sticky-top {position: relative; z-index: 10;}
    .content-2 .custom-cover {padding-top: 150px;}
}

.content-2 .card {overflow: hidden;}
.content-2 .card img {transition: .3s; object-fit: cover;}
.content-2 .card .card-body {display: flex; flex-direction: column;}
.content-2 .card .card-img-top {height:100px;}
.content-2 .card .card-img-left {width:150px;}
.content-2 .btn-link {text-wrap: nowrap;}

.content-2 .card:hover img {transform: scale(1.1) rotate(-1deg);}


.content-2 .super-button {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 14px 28px;
    background: linear-gradient(145deg, #0f0f0f, #1c1c1c);
    border: 2px solid rgba(255, 255, 255, 0.2);
    border-radius: 100px;
    color: #fff !important;
    font-size: 16px;
    font-weight: 600;
    letter-spacing: 0.5px;
    cursor: pointer;
    overflow: hidden;
    transition: all 0.4s ease-in-out;
    box-shadow: 0 0 20px rgba(0, 255, 255, 0.1);
    backdrop-filter: blur(8px);
    z-index: 1;
}

.content-2 .super-button::before {
    content: "";
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: conic-gradient(from 0deg, #00ffff, #ff00ff, #00ffff);
    animation: rotate 4s linear infinite;
    z-index: -2;
}

.content-2 .super-button::after {
    content: "";
    position: absolute;
    inset: 2px;
    background: #0a0a0a;
    border-radius: inherit;
    z-index: -1;
}

.content-2 .super-button:hover {
    transform: scale(1.05);
    box-shadow: 0 0 40px rgba(0, 255, 255, 0.2);
}

.content-2 .super-button:hover .arrow {
    transform: translateX(6px);
}

.content-2 .arrow {
    width: 22px;
    height: 22px;
    transition: transform 0.3s ease-in-out;
    color: #00ffff;
}

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

.footer-1 {padding:3rem 0;}
.footer-1 ul {display:block; margin:0; padding:0;}
.footer-1 ul li {display:block; margin:0; padding:0; border-bottom:1px solid var(--color-inverse);}
.footer-1 ul li a {display:block; margin:0; padding:.3rem 1rem;}
.footer-1 .zerro-author {display: flex; color:#A2A2A2;}
.footer-1 .zerro-author:hover {color:#A2A2A2;}
.footer-1 .zerro-author::before {content: url('/assets/images/zerro.svg'); margin-right:1rem; filter:grayscale(1) invert(1);}
.footer-1 .row:nth-child(1) {padding-bottom:1.5rem; margin-bottom:1.5rem; border-bottom:1px solid #a2a2a2;}
.footer-1 .row:nth-child(2) a:hover {filter:contrast(3);}


[data-color="#ffffffFF"] {color:#ffffffFF}
[data-color="#A2A2A2"] {color:#A2A2A2}