.main-header {
    display:none;
}

.glow {
    height: 80rem;
    width: 80rem;
    background-color: rgba(36, 142, 255, 1);
    filter: blur(150px);
    border-radius: 50%;
    z-index: 99;
    position: fixed;
    opacity: 0.30;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}


.shead-logo a img {
    display:block;
    width: 120px;
    max-height: 27px;
}

.shead {
    background: rgba(7, 7, 12, 0.7);
    backdrop-filter: blur(10px);
    padding: 20px 40px;
    position: fixed;
    width: 100%;
    z-index: 113;
    height: 85px;
    display: flex;
    align-items: center;
}

.togglem {
    width: 32px;
    height: 32px;
    background: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50px;
    transition: 0.5s;
}

.togglem:hover {
    background: var(--primary-dark-color); 
    cursor: pointer;
}

.shead .search-form input[type="submit"] {
    display:none;
}

.fside {
    display:flex;
}

.nproducts .jl-products {
    max-width: 100%;
}

.nproducts .product-name {
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    margin-bottom: 20px;
}

.nproducts .swiper-pagination-bullets.swiper-pagination-horizontal {
    bottom:-40px;
}

.nvideos .jl-reviews .block-row {
    padding: 0;
    max-width: 100%;
}

.shead .search-form {
    margin-left:140px;
    width: 400px;
    position: relative;
}

.shead .search-form .searchf-icon {
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
}

.shead .search-form svg {
    fill:#484857;
    display:block;
    width: 20px;
    height: 20px;
}
.shead .search-form input[type="search"] {
    background: rgba(18,18,27,0.1);
    backdrop-filter: blur(10px);
    border-radius: var(--border-radius);
    padding: 10px 20px 10px 40px;
    outline: none;
    border: 0;
    width: 70%;
    color:#484857;
    transition: all 0.2s ease-in-out;
    font-size:14px;
}

.shead .search-form input[type="search"]:focus {
    width: 100%;
}

.shead .search-form input[type="search"]::placeholder {
    color:#484857;
    font-size:14px;
}

.shead-content {
    display: flex;
    align-items: center; 
    width: 100%;
}

.smenu {
    position: sticky;
    top: 85px;
    width: 260px;
    background: rgba(7, 7, 12, 0.7);
    height: calc(100vh - 85px);
    padding: 20px;
    box-sizing: border-box;
    backdrop-filter: blur(10px);
    z-index: 111;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    transition: .5s ;
    gap: 20px;
}

.smenu-content ul {
    margin:0;
    padding:0;
    list-style-type: none;
    display:flex;
    flex-direction: column;
    gap:5px;
}

.smenu-content ul li .icon svg {
    display:block;
    fill:white;
    width: 24px;
    height: 24px;

}

.shead-redeem {
    display:none;
}
.shead-redeem .icon svg {
    display:block;
    fill:white;
    width: 24px;
    height: 24px;
}


.smenu-content ul li {
    color: #fff;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px;
    border-radius: var(--border-radius);
    opacity:1;
    font-weight: normal;
    font-size:14px;
}

.smenu-content ul li a {
    color: #fff;
    text-decoration: none;
    font-weight: normal;
    font-size: 14px;
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
}

.smenu-content ul li a:visited,
.smenu-content ul li a:focus {
    color:#fff;
    text-decoration: none;
}

.smenu-content ul li .flag {
    background:linear-gradient(314deg, #1564c9, var(--primary-color));
    padding:2px 5px;
    color:#fff;
    font-size:10px;
    text-align: center;
    border-radius:var(--border-radius);
    margin-left:auto;
    text-transform: uppercase;
    transition: all 0.2s ease-in-out;
}

.smenu-content ul li:hover {
    background: rgba(18, 18, 27, 0.1);
    backdrop-filter: blur(10px);
    cursor: pointer;
    opacity:1;
}

.smenu-content ul li.current-menu-item {
    background: rgba(18, 18, 27, 0.1);
    backdrop-filter: blur(10px);
    opacity:1;
}


.shead-panel {
    margin-left:auto;
}

.shead-panel {
    display:flex;
    align-items: center;
    gap:20px;
}

.shead-user .avatar {
    width: 44px;
    height: 44px;
    border-radius: 50px;
    overflow: hidden;
}


.shead-user .avatar img {
    display: block;
}

.shead-user {
    display:flex;
    gap:10px;
}

.shead-user:hover {
    cursor: pointer;
}

.shead-user .meta .row:first-of-type {
    font-weight: 500;
    color:#fff;
}

.shead-panel-loggout {
    margin-left:auto;
}

.shead-user .meta .row:last-of-type {
    color:#484857;
    font-size:12px;
}

.ncontent {
    width: calc(100% - 260px);
    padding: 40px;
    min-height: 100vh;
    z-index: 110;
}
.ncontent-wrap {
    overflow: hidden;
    border-radius: 20px;
    margin-top: 80px;
}

.nbanners {
    position: relative;
}

.nbanner-content {
    border-radius: 20px;
    overflow: hidden; 
    width: 100%;
}

.nbanners .swiper-slide {
    background:transparent;
}

.nhotnews-list {
    display:flex;
    align-items: stretch;
    flex-direction: row;
    justify-content: flex-start;
    flex-wrap: wrap;
}


.nhot-item  .entry__meta__read {
    display:none; 
}
.nhotnews-list .block-post:first-of-type {
    flex-grow:2;
}

.nhotnews-list .block-post {
    flex-grow:1;
    position: relative;
    width: 33%;
}

.nhotnews-list .block-post-meta {
    position: absolute;
    bottom:20px;
    left:20px;
}

.nbanner-large {
    overflow: hidden;
    position: relative;
    height: 700px;
}

.nbanner-large .meta {
    position: absolute;
    z-index: 112;
    bottom: 40px;
    left: 40px;
    width: 50%;
}

.nbanner-large .meta .title h2 a {
    text-decoration: none;
    font-weight: 600;
    letter-spacing: 0;
    color: #fff;
    padding: 0;
    margin: 0;
    font-size: 2.2rem;
}

.nbanner-large .meta .title h2 a:hover {
    color:var(--primary-color);
}

a.underline:hover {
    animation: 0.4s cubic-bezier(0.58, 0.3, 0.005, 1) 0s 1 normal none running underline;
    background-image: linear-gradient(var(--primary-color) 0px, var(--primary-color) 100%);
    text-decoration: none;
    background-repeat: no-repeat;
    background-size: 100% 0.18em;
    background-position: 0px 110%;
}

@keyframes underline {
  0% {
    background-size: 100% 0.18em;
    background-position: 0 110%;
  }

  50% {
    background-size: 0% 0.18em;
    background-position: 0 110%;
  }

  50.01% {
    background-size: 0% 0.18em;
    background-position: right 0 top 110%;
  }

  100% {
    background-size: 100% 0.18em;
    background-position: right 0 top 110%;
  }
}

.nbanner-large .meta .descrip {
    letter-spacing: 0;
    color: rgba(255, 255, 255, 0.3);
}

.nbanner-large .meta .descrip  {
    font-weight: normal;
}
    

.nbanner-large:before {
    content: "";
    background: #2A7B9B;
    background: linear-gradient(180deg,rgba(42, 123, 155, 1) 0%, rgba(237, 221, 83, 1) 100%);
    position: absolute;
    bottom:0;
    width: 100%;
}

.nnews {
    padding:30px 0;
}
.nn-head {
    padding:30px 0;
}
.nn-head h2 {
    font-weight: 600;
    letter-spacing: 0;
    color: #fff;
    padding: 0;
    margin: 0;
}

.nhot-item {
    width: calc(25% - 1rem);
    margin: 0.5rem;
}

.nbanner-large img.selfslide {
    display: block;
    object-fit: cover;
    object-position: center;
    width: 100%;
    height: 100%;
}

.nhot-item .block__meta__extra {
    gap:20px;
}

.nhot-item-featured a img {
    display: block;
    width: 100%;
    height: 240px;
    object-fit: cover;
    object-position: center;
    border-radius: 10px;
    transition: all 0.2s ease-in-out;
}

.nhot-item-featured a img:hover {
    transform: scale(1.1);
}

.nhot-item-featured{
    position: relative;
    border-radius: 10px;
    overflow: hidden;
}

.nhot-item-extra {
    position: absolute;
    left: 20px;
    bottom: 0; 
    z-index: 113;
}


.nhot-item-extra .meta-author__name {
    color: #fff;
    font-weight: normal;
    letter-spacing: 0;
}

.nhot-item-extra .entry__meta__date__value  {
    color: #fff;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 5px;
    opacity: 1;
    font-size: 12px;
    padding: 2px 10px;
}

.nhot-item-featured:before {
    content: "";
    position: absolute;
    bottom:0;
    left:0;
    width: 100%;
    height: 100%;
    background: linear-gradient(180deg,rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0.98) 100%);
    transition: all 0.2s ease-in-out;
    pointer-events: none;
    z-index: 112;
}

.nhot-item-featured:hover:before {
    background: linear-gradient(180deg,rgba(0, 0, 0, 0.4) 0%, rgba(0, 0, 0, 0.98) 100%);
}

.nhot-item-content {
    position: relative;
}

.nhot-item-cat {
    position: absolute;
    top: 10px;
    right: 10px;
    display: flex;
    gap: 10px;
    z-index: 113;
}

.nn-head {
    display: flex;
    align-items: center;
    justify-content: space-between  
}

.nhot-item-meta .meta-title h2 {
    color: #fff;
    text-decoration: none;
    font-weight: 500;
    letter-spacing: 0;
    font-size: 16px;
    transition: all 0.2s ease-in-out;
}

.nn-more a {
    font-weight: 500;
    text-decoration: none;
    letter-spacing: 0;
    font-size: 12px;
    color: var(--primary-color);
    transition: all 0.2s ease-in-out;
    background: transparent;
    border: 1px solid var(--primary-color);
    padding: 5px 15px;
    border-radius: 5px;
}

.nn-more a:hover {
    text-decoration: underline;
}

.nhot-item-meta .meta-title a {
    color:#fff;
    text-decoration: none;
  
}

.nn-head .description p {
    font-size: 14px;
    padding: 0;
    margin: 0;
    letter-spacing: 0;
    color: rgba(255, 255, 255, 0.3);
}

.nhot-item-meta .meta-title a:hover{
    color:var(--primary-color);
}

.nvideos .swiper-slide {
    background:transparent;
}


.nvideos .jl-reviews .meta-title a {
    transition: all 0.2s ease-in-out;
}
.nvideos .jl-reviews .meta-title a:hover {
    text-decoration: none;

}
.nvideos .jl-reviews .meta-title h2 {
    font-weight: 500;
    letter-spacing: 0;
    font-size: 18px;
    line-height: 18px;
    width: 100%;
}

.nvideos .owl-reviews {
    padding:0;
}
.nvideos .block-post-featured {
    height: 240px;
}

.nvideos .jl-reviews .block-post-featured-play a {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(5px);  
}


.nvideos .block-post-featured-play:after, 
.nvideos .block-post-featured-play:before, 
.nvideos .lock-post-featured-play:before {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(5px);  
}

.nvideos .jl-reviews .block-post-featured-play svg {
    fill:#fff;
}

.nvideos .jl-reviews .block-post-featured:after {
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0.98) 100%)
}

.nproducts .swiper {
    padding:0;
}

.nproducts,
.nvideos,
.nnews {
    padding:30px 0;
}

.mycred-top-users {
    list-style-type: none;
    padding:0;
    margin:0;
    display:flex;
    flex-direction: column;
    gap:10px;
}

.hotuser-avatar {
    flex-shrink: 0;
    width: 38px;
    display:flex;
}

.hotuser-points {
    margin-left:auto;
}

.hotuser-name {
    color: #fff;
    letter-spacing: 0;
    font-size: 14px;
}

.hotuser-rank {
    font-size: 10px;
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(5px);
    color: #fff;
    padding: 0px 5px;
    border-radius: 50px;
    font-weight: normal;
    display: inline-flex;
}

.hotuser-meta {
    display: flex;
    flex-direction: column; 
    align-items: flex-start;
}

.hotusers {
    display: flex;
    flex-direction: column;
    gap: 10px;   
}

.hot-user {
    display: flex;
    flex-direction: row;
    align-items:center; /* or center, or baseline */
    gap:10px;
}


.smenu-content.extra ul li .icon.transparent svg {
    fill:transparent;
}

.hotuser-avatar img {
    display: block;
    flex-shrink: 0;
    width: 38px;
    height: 38px;
    border-radius: 50px;
}
.hotuser-points {
    color: #62ff62;
    font-weight: 400;
    font-size: 14px;
    letter-spacing: 0;
    align-self: baseline;
}

.smembers .title h2 {
    font-size: 16px;
    font-weight: 500;
    letter-spacing: 0;
    color: #fff;
    padding: 0;
}

.nslider {
    position: relative;
    width: 100%;
}

.nslider .mySwiper .swiper-slide {
    background:transparent;
    position: relative;
    border-radius:20px;
}

.nslider .mySwiper .swiper-slide:before {
    content: '';
    position: absolute;
    bottom: -20px;
    right: -28px;
    width: 86%;
    height: 47%;
    background: radial-gradient(circle at bottom right, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0.5) 35%, rgba(0, 0, 0, 0.0) 60%, transparent 100%);
    filter: blur(20px);
    pointer-events: none;
    z-index: 1;
}

.nslider .mySwiper .swiper-slide:after {
    content: '';
    position: absolute;
    bottom: -42px;
    right: -35px;
    width: 117%;
    height: 100%;
    background: #ffffff;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(0, 0, 0, 1) 100%);
    filter: blur(20px);
    pointer-events: none;
    z-index: 1;
}

.nslider .mySwiper2 .swiper-slide img {
    width: 100%;
    display: block;
    height: 100%;
    object-fit: cover;
}

.mySwiper2 .swiper-wrapper {
    justify-content: flex-end;
}

.mySwiper2 {
    height: 100px;
    box-sizing: border-box;
    padding: 10px 0;
    position: absolute;
    z-index: 112;
    right: 40px;
    bottom: 30px;
    width: 500px;
    display: flex;
    justify-content: flex-end;
    align-items: center;
  }

  .mySwiper2 .swiper-slide {
    width: 25%;
    height: 70px;
    opacity: 0.4;
    border: 2px solid transparent;
  }

    .mySwiper2 .swiper-slide:hover {
        cursor: pointer;
    }

  .mySwiper2 .swiper-slide-thumb-active {
    opacity: 1;
    border: 2px solid var(--primary-color);
  }

  .hotproducts .product-thumb img {
    padding-top:0;
  }

  .ypopup {
    position: fixed;
    z-index: 114;
    background:rgba(0,0,0,0.3);
    backdrop-filter: blur(12px);
    left: 0;
    width: 100%;
    height: 100vh;
    top: 0;
    opacity:0;
    transition: all 0.2s ease-in-out;
    pointer-events: none;
    display:flex;
    align-items: center;
    justify-content: center;
  }

  .ypopup.open {
    opacity:1;
    pointer-events: initial;
  }

  .ypop__inside {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 500px;
    background: var(--primary-dark-dark);
    border-radius: 20px;
    flex-direction: column;
    position: relative;
    padding: 40px;
    box-sizing: border-box;
  }

  .ypop__close {
    position: absolute;
    right:40px;
    top:40px;
  }

  .ypop__content input[type="text"] {
    background: rgba(18, 18, 27, 0.8);
    backdrop-filter: blur(10px);
    border-radius: var(--border-radius);
    padding: 20px;
    outline: none;
    border: 0;
    width: 100%;
    color: #484857;
    font-size: 14px;
    box-sizing: border-box;
    height: 50px;
    border: 2px solid;
}

.ypop__content #error_message,
.ypop__content #success_message {
    font-weight: normal;
    font-size: 14px; 
}

.ypop__content input[type="text"].error {
    border-color:red;
}

.ypop__content form {
    display:flex;
    flex-direction: column;
    gap:10px;
    margin-top: 50px;
}

.ypop__head {
    align-items: flex-start;
    display: flex;
    width: 100%;
    flex-direction: column;
    justify-content: center;
    padding-right: 90px;
}

.ypop__head h2 {
    color:#fff;
    margin:0;
}

.ypop__head span.description {
    font-size:14px;
    color:#fff;
}

.ypop__content {
   width: 100%;
   position: relative;
}

.ypop__inside {
    position: relative;
    overflow: hidden;
}
.ypop__inside:before {
    content: "";
    height: 500px;
    width: 500px;
    background-color: rgba(36, 142, 255, 1);
    filter: blur(150px);
    border-radius: 50%;
    z-index: 0;
    position: absolute;
    opacity: 0.50;
    left: 71%;
    top: 75%;
    z-index: 110;
}

.ypop__close svg {
    width: 24px;
    height: 24px;
    fill:#fff;
    opacity:0.1;
    transition: all 0.2s ease-in-out;
}

.ypop__close:hover svg {
    opacity:0.7;
    cursor: pointer;
}

.ypop__content button {
    width: 100%;
    box-shadow: 0 4px 6px rgba(50, 50, 93, 0.11), 0 1px 3px rgba(0, 0, 0, 0.08);
    background-image: linear-gradient(to right, #1564c9 0%, #5a90d6 50%, var(--primary-color) 100%);
    background-size: 200% auto;
    border: 0;
    padding: 20px;
    color: #fff;
    font-weight: 600;
    text-transform: uppercase;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    transition: 0.5s;
    height: 50px;
}

.ypop__content button.save:hover {
    background-position: right center;
}

.ypop__content button svg {
    display: block;
    fill: white;
    width: 24px;
    height: 24px;
}

.redb__content {
    display: flex;
    align-items: center;
    gap: 10px;
}


.shead-tools .row .icon svg {
    fill:#fff;
    width: 24px;
    height: 24px;
}

.gaway_prize__text {
    color: #fff;
    padding-bottom: 10px;
    letter-spacing: 0;
    font-weight: normal;
    font-size: 16px; 

}

.gaway-prizescustom {
    display:flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap:10px;
}

.gaway-prize-inside {
    background: linear-gradient(270deg, #1564c9, var(--primary-color));
    color: #fff;
    text-align: center;
    padding: 3px 10px;
    border-radius: 50px;
    font-size: 12px;
}

.gaway__over {
    color: #fff;
    font-weight: normal;
    font-size: 14px;
}
.gawayover {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;   
}


.gaway__date {
    font-size: 16px;
    color: #fff;
    background: linear-gradient(314deg, #1564c9, var(--primary-color));
    padding: 3px 20px;
    border-radius: 10px; 
}


.shead-user .meta-rank {
    display: inline-flex;
    padding: 0px 10px;
    box-sizing: border-box;
    border-radius: 50px;
    font-size: 12px;
    color:white;
}

.shead-toggle .togglem svg {
    display: block;
    width: 24px;
    height: 24px;
    fill: #ffff;
}

.shead-user .meta-rank.rookie {
    background:linear-gradient(135deg, #CBD5E0, #A0AEC0);
}

.shead-user .meta-rank.recruit {
    background:linear-gradient(135deg, #81E6D9, #38B2AC);
}

.shead-user .meta-rank.soldier {
    background:linear-gradient(135deg, #9AE6B4, #48BB78);
}

.shead-user .meta-rank.captain {
    background:linear-gradient(135deg, #90CDF4, #4299E1);
}

.shead-user .meta-rank.major {
    background:	linear-gradient(135deg, #FBD38D, #ED8936);
}

.shead-user .meta-rank.general {
    background:linear-gradient(135deg, #F6AD55, #DD6B20);
}

.shead-user .meta-rank.commander {
    background:linear-gradient(135deg, #D6BCFA, #9F7AEA);
}

.shead-user .meta-rank.legend {
    background:linear-gradient(135deg, #FAF089, #ECC94B);
}

.gaway-prizes .thumb img {
   display:block;
   width: 70px;
}

.gaway-prizes .prize {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;   
}

.gaway-prizes .prize .name {
    text-align: center;
    color: #fff;
    line-height: 14px;
    font-size: 12px;
    font-weight: normal;
}

.gwinners {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    gap: 20px;
    margin-bottom: 50px;
}

.product-thumb:hover ~ .product-name a {
    color:var(--primary-color);
}

.product-name:hover ~ .product-specs a {
    background:var(--primary-color-hover);
    border-color:var(--primary-color-hover);
}

.product-thumb:hover ~ .product-specs a {
    background:var(--primary-color-hover);
    border-color:var(--primary-color-hover);
}