/* Custom fonts */
@font-face {
    font-family: 'gilroy-regular';
    src: url('../fonts/gilroy/6581Gilroy-Regular.woff2') format('woff2'),
        url('../fonts/gilroy/6581Gilroy-Regular.woff') format('woff');
    font-display: auto;
}

@font-face {
    font-family: 'gilroy-semi-bold';
    src: url('../fonts/gilroy-semi-bold/8020Gilroy-Semi-Bold.woff2') format('woff2'),
        url('../fonts/gilroy-semi-bold/8020Gilroy-Semi-Bold.woff') format('woff');
    font-display: auto;
}

@font-face {
    font-family: 'gilroy-bold';
    src: url('../fonts/gilroy-bold/9235Gilroy-Bold.woff2') format('woff2'),
        url('../fonts/gilroy-bold/9235Gilroy-Bold.woff') format('woff');
    font-display: auto;
}

html,
body {
    overflow-x: hidden;
}

.site-description, body, p, blockquote, li, a, strong, em, .gilroy-regular {
    font-family: 'gilroy-regular';
}

h1, h2, h3, h4, h5, h6, body.page .entry-title, body.category .entry-title, .widget-title, .site-title, strong, b, .gilroy-bold {
    font-family: 'gilroy-bold';
}

.menu-primary-menu-container li a, .menu-primary-menu-container li span, #menu-primary-menu li a, #menu-primary-menu li span, .gilroy-semi-bold {
    font-family: 'gilroy-semi-bold';
}

body {
    color: #262626;
}

a {
    -webkit-transition: color 0.3s ease;
    -moz-transition: color 0.3s ease;
    -o-transition: color 0.3s ease;
    transition: color 0.3s ease;
}

a:hover {
    color: #D33791;
}

input, select, textarea {
    outline: none;
}

[type=button]:focus, [type=button]:hover, [type=submit]:focus, [type=submit]:hover, button:focus, button:hover {
    background-color: initial;
    color: #D33791;
}

input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-results-button,
input[type="search"]::-webkit-search-results-decoration {
    -webkit-appearance: none;
    appearance: none;
}

input[type="search"]::-ms-clear,
input[type="search"]::-ms-reveal {
    display: none;
    width: 0;
    height: 0;
}

.page-content {
    padding: 40px 20px;
}

[type=button], [type=submit], button {
    transition: none;
    -moz-transition: none;
    -webkit-transition: none;
    -o-transition: none;
}

/* Header */
.has-transparent {
    position: absolute !important;
    background-color: transparent;
    background-image: none;
    box-shadow: none;
}

.has-transparent:not(.stuck) {
    left: auto;
    right: auto;
}

.has-transparent .magenest-site-logo img {
    filter: brightness(0) invert(1);
    transition: filter 0.3s ease;
}

#header.stuck {
    left: 0;
    margin: 0 auto;
    position: fixed !important;
    right: 0;
    top: 0;
    box-shadow: 1px 1px 10px rgba(0, 0, 0, .15);
    -webkit-box-shadow: 1px 1px 10px rgba(0, 0, 0, .15);
    -o-box-shadow: 1px 1px 10px rgba(0, 0, 0, .15);
    -moz-box-shadow: 1px 1px 10px rgba(0, 0, 0, .15);
    animation: stuckMoveDown .6s;
    background-color: #fff;
	z-index: 2000;
}

.stuck .magenest-site-logo img {
    filter: none;
}

.magenest-site-logo a {
    display: block;
    height: max-content;
    max-width: 151px;
    /* Kill the inline-image baseline gap so the anchor matches the logo height */
    line-height: 0;
    font-size: 0;
}

.magenest-site-logo a img {
    display: block;
}

.header-nav-left,
.header-nav-main,
.header-nav-right {
    width: auto !important;
}

.header-nav-left {
    flex-shrink: 0 !important;
}

.header-nav-main {
    flex-grow: 1 !important;
    flex-shrink: 1 !important;
}

.header-nav-right {
    flex-shrink: 0 !important;
    flex-wrap: nowrap !important;
}

@keyframes stuckMoveDown {
    0% {
        transform:translateY(-100%)
    }
    to {
        transform:translateY(0)
    }
}

/* Custom Elementor */
.magenest_box-info {
    cursor: pointer;
}

.magenest_box-info:hover * {
    color: #fff !important;
}

.magenest_box-info:hover svg {
    filter: brightness(0) invert(1);
}

.filter-blur {
    backdrop-filter: blur(10px);
}

.elementor-button-icon svg {
    width: auto !important;
}

.placeholder-image {
    object-position: center !important;
}

.button-nowrap .elementor-button-text {
    white-space: nowrap;
}

/* Widget Slide */
.magenest_banner-overlay .elementor-image-box-content {
    position: absolute;
    left: 0px;
    min-height: 125px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    bottom: 7px;
    background: linear-gradient(0deg, rgb(211, 55, 145) 0%, rgba(211, 55, 145, 0) 100%);
    padding: 16px 16px 20px;
    border-radius: 0px 0px 8px 8px;
}

.magenest_banner-overlay .elementor-image-box-title a {
    position: relative;
    display: block;
}

.magenest_banner-overlay .elementor-image-box-title a::after {
    content: "";
    display: inline-block;
    width: 24px;
    height: 24px;
    background-image: url('../img/east.svg');
    background-repeat: no-repeat;
    position: absolute;
    right: 0px;
    bottom: 0px;
}

/* Archive */
.magenest_archive-header {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    margin: 0 0 24px;
}

.magenest_archive-header h1,
.magenest_archive-header h2,
.magenest_archive-header h3 {
    font-size: 32px;
    line-height: 40px;
    letter-spacing: 0;
    margin: 0;
}

/* Sticky Float */
.magenest-sticky-float {
    position: fixed;
    right: 15px;
    bottom: 100px;
    z-index: 9998;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    max-width: 186px;
}

.sticky-main-item {
    display: block;
    width: 100%;
    transition: transform 0.3s ease;
}

.sticky-main-item img {
    width: 100%;
    height: auto;
    display: block;
}

.sticky-main-item:hover {
    transform: translateY(-5px);
}

.magenest-sticky-float span {
    color: #D33791;
    text-align: center;
    /*text-shadow: 0 1px 2px rgba(211, 55, 145, 0.32);*/
    -webkit-text-stroke: 6px #fff;
    paint-order: stroke fill;
    font-size: 20px;
    line-height: 20px;
    position: absolute;
    width: 105px;
    height: 40px;
    left: 20px;
    top: 113px;
}

.magenest-sticky-float span.en {
    width: 125px;
    height: 20px;
    left: 8px;
    top: 127px;
}

.magenest-lucky-close {
    width: 24px !important;
    height: 24px !important;
    background-color: #fff;
    border-radius: 1000px;
    top: 0 !important;
    right: 0;
    left: auto !important;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1;
    cursor: pointer;
}

.magenest-text-gradient .elementor-heading-title {
    background: linear-gradient(90deg, #A273DE 0%, #E9AA5A 25%, #FF2650 50%, #E670C5 75%, #9D11F3 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: transparent;
    padding: 10px 0 0;
}

@media (max-width: 1439px) {
    .header-nav-left,
    .header-nav-main,
    .header-nav-right {
        width: 33.333% !important;
    }

    .magenest_archive-header {
        gap: 12px;
        flex-direction: column;
        justify-content: flex-start;
        align-items: flex-start;
        margin: 0 0 12px;
    }

    .magenest_archive-header h1,
    .magenest_archive-header h2,
    .magenest_archive-header h3 {
        font-size: 20px;
        line-height: 24px;
    }

    .magenest-form_filter {
        width: 100%;
    }

    .magenest-form_filter .search-btn {
        right: 0;
    }


    .category-slider .swiper-slide {
        flex: 0 0 auto !important;
    }

    .category-slider .e-con-inner {
        flex-wrap: nowrap !important;
    }
}

@media (max-width: 1024px) {
    .magenest-sticky-float {
        max-width: 100px !important;
        right: 10px;
    }

    .magenest-lucky-close {
        width: 18px !important;
        height: 18px !important;
    }

    .magenest-lucky-close img {
        max-width: 12px;
    }
}

@media (max-width: 768px) {
    .page-content {
        padding: 30px 0;
    }

    .magenest-sticky-float span {
        width: 61px;
        height: 24px;
        left: 4px;
        top: 60px;
        font-size: 12px;
        line-height: 12px;
    }

    .magenest-sticky-float span.en {
        width: 72px;
        height: 12px;
        left: 0;
        top: 65px;
    }

    .magenest-list-icons .elementor-icon-list-items {
        justify-content: space-between;
    }

    .magenest-list-icons .elementor-icon-list-item a {
        max-width: 62px;
        flex-direction: column;
        gap: 8px;
    }

    .magenest-list-icons .elementor-icon-list-text {
        padding-inline-start: 0 !important;
    }
}

/* Fills a Container opted in via this class with its background video at the Container's real size. Elementor's JS forces the hosted video box to 16:9 through inline width/height, so on a short, wide Container the video is scaled far beyond what is visible and only a zoomed-in middle strip shows. !important needed to beat those inline styles. */
.elementor .magenest-video-fill .elementor-background-video-hosted {
    width: 100% !important;
    height: 100% !important;
    -o-object-fit: cover;
    object-fit: cover;
    -o-object-position: center bottom;
    object-position: center bottom;
}

/* Same opt-in class on a Video widget means the box must follow the hosted video's own ratio (e.g. a 1128x720 banner) instead of Elementor's fixed Aspect Ratio preset, so nothing is cropped by object-fit: cover. That ratio is written onto .elementor-wrapper as an inline style by assets/js/video-fill.js, because sizing the video with height: auto and letting its intrinsic ratio drive the box is ignored by Safari. The Aspect Ratio set in Elementor stays as the placeholder box until the metadata is in. */

/* Lets an Image widget opted in via one of these classes keep its column width (e.g. 50%) while the image itself renders at its own size, pinned to the column edge facing the text and overflowing away from it: -left for an image column on the left, -right for one on the right. The text column never gets overlapped as the browser narrows; the image is clipped at the screen edge instead. Overflow to the left is never scrollable, and overflow to the right is cut by the overflow-x: hidden on html/body at the top of this file, so no horizontal scrollbar appears. Any Width set under Style > Image still applies. */
.elementor .magenest-image-bleed-left.elementor-widget-image img,
.elementor .magenest-image-bleed-right.elementor-widget-image img {
    display: block;
    max-width: none;
}

/* Moves the image's right edge onto the column's right edge. Done on the img rather than by making the widget a flex container, because any display value on the widget outranks Elementor's .elementor-hidden-* classes and would show a widget hidden on that device. */
.elementor .magenest-image-bleed-left.elementor-widget-image img {
    position: relative;
    left: 100%;
    transform: translateX(-100%);
}

/* Elementor paints every Video widget's box #000. A hosted video already covers its box, so that black is never meant to show; transparent makes any sub-pixel gap at the frame edge show the section underneath instead. */
.elementor .elementor-widget-video .e-hosted-video .elementor-video {
    background-color: transparent;
}

/* Override Elementor core's cover fit only for Containers opted in via this class, so a background video is never cropped whatever Min Height is set to. Scoped on purpose: other background videos on the site (e.g. the mobile hero variant) already match their container's ratio and must keep the default cover behavior. */
.elementor .magenest-video-fit-contain .elementor-background-video-hosted {
    -o-object-fit: contain;
    object-fit: contain;
}

/* Pins the background video of a Container opted in via this class to the Container's bottom edge, typically combined with magenest-video-fit-contain. Elementor's JS sizes the hosted video box to 16:9 through inline width/height and centers it, so a contained video floats mid-section with empty space above and below; resetting the box to the Container's own size and positioning the frame at the bottom moves all the empty space to the top. !important needed to beat those inline styles. */
.elementor .magenest-video-align-bottom .elementor-background-video-hosted {
    inset-block-start: 0;
    inset-inline-start: 0;
    width: 100% !important;
    height: 100% !important;
    transform: none;
    -o-object-position: center bottom;
    object-position: center bottom;
}

/* Hides the background video of a Container opted in via this class on tablet as well. Elementor's own "Play On Mobile" switch only covers its mobile breakpoint (up to 767px), so between 768px and the tablet breakpoint (1024px) the video keeps playing, often next to a tablet/mobile-only Video widget in the same Container. Only the Container's own video is targeted, not those of nested Containers. */
@media (max-width: 1024px) {
    .elementor .magenest-video-hide-tablet > .elementor-background-video-container,
    .elementor .magenest-video-hide-tablet > .e-con-inner > .elementor-background-video-container {
        display: none;
    }
}

/* Caps the positioning canvas for a Container holding an absolute-positioned child (Elementor already makes it position: relative via its own .e-parent class), so the child's offset is computed against a 1920px canvas instead of drifting outward on ultra-wide screens. !important needed: Elementor's own .e-con.e-con-boxed max-width rule outranks a single-class selector. */
.magenest-max-canvas-1920 {
    max-width: 1920px !important;
    margin-inline: auto;
}