/********** Template CSS **********/
/*** Spinner ***/
#spinner {
    opacity: 0;
    visibility: hidden;
    transition: opacity .5s ease-out, visibility 0s linear .5s;
    z-index: 99999;
}

#spinner.show {
    transition: opacity .5s ease-out, visibility 0s linear 0s;
    visibility: visible;
    opacity: 1;
}

.back-to-top {
    position: fixed;
    display: none;
    right: 45px;
    bottom: 45px;
    z-index: 99;
}

img.animated.pulse {
    animation-duration: 5s;
}

:is(h1, h2, h3, h4, h5, h6, p, span, a, small, li, label, button).text-dark {
    font-weight: 500 !important;
}

/*** Button ***/
.btn {
    font-weight: 500;
    transition: .5s;
}

.btn.btn-primary {
    color: var(--bs-white);
}

.btn-square {
    width: 38px;
    height: 38px;
}

.btn-sm-square {
    width: 32px;
    height: 32px;
}

.btn-lg-square {
    width: 48px;
    height: 48px;
}

.btn-square,
.btn-sm-square,
.btn-lg-square {
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: normal;
    border-radius: 50px;
}



/*** Site logos ***/
.site-logo {
    display: block;
    width: auto;
    object-fit: contain;
}

.navbar-brand .site-logo {
    max-width: 190px;
    max-height: 75px;
}

.footer .site-logo {
    max-width: 220px;
    max-height: 110px;
    margin-bottom: 1rem;
}

.feature-icon {
    display: block;
    width: 56px;
    height: 56px;
    object-fit: contain;
    margin: 0 auto 1.5rem;
}

.feature-icon[src$="icon-biodegradable.png"],
.feature-icon[src$="icon-thick-soft.png"],
.feature-icon[src$="icon-paraben-free.png"] {
    width: 58px;
    height: 58px;
}

/*** Navbar ***/
.sticky-top {
    top: -150px;
    transition: .5s;
}

.navbar {
    padding: 11px 0 !important;
    height: 85px;
}

.navbar .navbar-nav .nav-link {
    margin-right: 45px;
    padding: 0;
    color: var(--bs-dark);
    font-weight: 500;
    transition: .5s;
    outline: none;
}

.navbar .navbar-nav .nav-link:hover,
.navbar .navbar-nav .nav-link:focus-visible,
.navbar .navbar-nav .nav-link.active {
    color: var(--bs-dark);
}

.navbar .dropdown-toggle::after {
    border: none;
    content: "\f107";
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    vertical-align: middle;
    margin-left: 8px;
}


@media (max-width: 991.98px) {
    .navbar-brand {
        display: flex;
        align-items: center;
        padding: 0;
        margin-right: .5rem;
    }

    .navbar-brand .site-logo {
        max-width: 125px;
        max-height: 48px;
    }

    .navbar .navbar-nav {
        padding: 0 15px;
        background: var(--bs-primary);
    }

    .navbar .navbar-nav .nav-link  {
        margin-right: 0;
        padding: 10px 0;
        display: inline-block;
        width: fit-content;
    }
}

@media (min-width: 992px) {
    .navbar .nav-item .dropdown-menu {
        display: block;
        border: none;
        margin-top: 0;
        top: 150%;
        opacity: 0;
        visibility: hidden;
        transition: .5s;
    }

    .navbar .nav-item:hover .dropdown-menu {
        top: 100%;
        visibility: visible;
        transition: .5s;
        opacity: 1;
    }
}


/*** Hero Header ***/
.hero-header {
    position: relative;
    margin-top: -85px;
    padding-top: 12rem;
    padding-bottom: 6rem;
    background: url(../img/bg.webp) center center no-repeat;
    background-size: cover;
}

.hero-header::before {
    position: absolute;
    content: "";
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: rgba(255, 255, 255, .1);
    clip-path: polygon(66% 0, 100% 0, 100% 100%, 33% 100%);
}

.hero-header .container {
    position: relative;
    z-index: 1;
}

.hero-header .breadcrumb-item+.breadcrumb-item::before {
    color: var(--bs-light);
}


/*** Feature ***/
.feature-item::before {
    position: absolute;
    content: "";
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: rgba(255, 255, 255, .1);
    clip-path: polygon(66% 0, 100% 0, 100% 100%, 33% 100%);
}

.feature-item .border {
    position: relative;
    border-color: rgba(255, 255, 255, .2) !important;
    z-index: 1;
}


/*** Deal ***/
.deal .deal-woman-image {
    aspect-ratio: 713 / 929;
}

.deal {
    position: relative;
    background: url(../img/bg.webp) center center no-repeat;
    background-size: cover;
}

.deal::before {
    position: absolute;
    content: "";
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: rgba(255, 255, 255, .1);
    clip-path: polygon(66% 0, 100% 0, 100% 100%, 33% 100%);
}

@media (min-width: 992px) {
    .deal {
        height: 38rem;
    }
    .deal > .container {
        height: 100%;
        display: flex;
        align-items: center;
    }
    .deal .row {
        width: 100%;
    }
}

@media (min-width: 1200px) {
    .deal .deal-woman-image {
        position: absolute;
        z-index: 1;
        left: calc((100% - 1140px) / 2);
        bottom: 0;
        height: 100%;
        width: auto;
        max-width: 50%;
        transform: none;
    }
}

@media (min-width: 992px) and (max-width: 1199.98px) {
    .deal .deal-woman-image {
        position: absolute;
        z-index: 1;
        left: calc((100% - 960px) / 2);
        bottom: 0;
        height: 100%;
        width: auto;
        max-width: 50%;
        transform: none;
    }
}

@media (max-width: 991.98px) {
    .deal {
        padding-top: 0 !important;
    }
    .deal .container {
        padding-top: 0 !important;
    }
    .deal .row {
        --bs-gutter-y: 0;
    }
    .deal .deal-woman-image {
        position: relative;
        left: auto;
        bottom: auto;
        width: 100%;
        max-width: 100%;
        transform: none;
    }
}
.deal .deal-use-grid {
    margin-right: 0;
    margin-left: 0;
}

.deal .deal-use-item {
    display: flex;
    align-items: center;
    gap: .6rem;
    height: 100%;
    min-height: 3.75rem;
    padding: .6rem .7rem;
    border: 1px solid rgba(247, 201, 90, .35);
    border-radius: .65rem;
    background: #fffdf6;
}

.deal .deal-use-item > i {
    display: grid;
    flex: 0 0 2rem;
    width: 2rem;
    height: 2rem;
    place-items: center;
    border-radius: 50%;
    background: rgba(247, 201, 90, .2);
    color: #d7a82c;
}

.deal .deal-use-item h6 {
    margin: 0 0 .1rem;
    font-size: .9rem;
}

.deal .deal-use-item small {
    display: block;
    color: #656565;
    font-size: .72rem;
    line-height: 1.25;
}
@media (max-width: 575.98px) {
    .deal .deal-use-grid {
        row-gap: .75rem;
    }

    .deal .deal-use-grid > .col {
        flex: 0 0 100%;
        width: 100%;
    }

    .deal .deal-use-item {
        flex-direction: row;
        justify-content: flex-start;
        gap: .85rem;
        min-height: 4.5rem;
        padding: .75rem .9rem;
        text-align: left;
    }

    .deal .deal-use-item > i {
        flex-basis: 2.25rem;
        width: 2.25rem;
        height: 2.25rem;
    }

    .deal .deal-use-item h6 {
        font-size: .92rem;
        line-height: 1.25;
        overflow-wrap: normal;
        word-break: normal;
    }

    .deal .deal-use-item small {
        font-size: .78rem;
        line-height: 1.35;
    }

    .back-to-top {
        right: 12px;
        bottom: 12px;
    }
}
.deal .bg-white {
    position: relative;
    z-index: 1;
}

.deal {
    overflow: hidden;
}


/*** How To Use ***/
.how-to-use {
    position: relative;
    background: url(../img/bg.webp) center center no-repeat;
    background-size: cover;
}

.how-to-use::before {
    position: absolute;
    content: "";
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: rgba(255, 255, 255, .1);
    clip-path: polygon(66% 0, 100% 0, 100% 100%, 33% 100%);
}

.how-to-use .container {
    position: relative;
    z-index: 1;
}

.how-to-use .border {
    border-color: rgba(255, 255, 255, .2) !important;
}

.how-to-use-intro {
    max-width: 850px;
}

.how-to-use-intro h1 {
    font-size: clamp(1.75rem, 3vw, 2.5rem);
    line-height: 1.2;
}

.how-to-use-title {
    display: block;
    font-weight: 700;
}

.how-to-use-illustration-frame {
    display: flex;
    width: 160px;
    height: 160px;
    align-items: center;
    justify-content: center;
    border-color: rgba(255, 255, 255, .45) !important;
}

.how-to-use-illustration {
    display: block;
    width: 110px;
    height: 110px;
    object-fit: contain;
    margin: 0;
    transition: transform .25s ease;
}

.how-to-use-illustration-frame:hover .how-to-use-illustration {
    transform: scale(1.05);
}

@media (prefers-reduced-motion: reduce) {
    .how-to-use-illustration {
        transition: none;
    }
}


/*** Product ***/
.product-item {
    transition: .1s;
}

.product-item img {
    display: block;
    width: 100%;
    height: 220px;
    object-fit: contain;
}

.product-item:hover {
    border-width: 0 !important;
    box-shadow: 0 0 35px rgba(247, 201, 90, .25);
}

.product-item:hover a.btn {
    color: var(--bs-white);
    background: var(--bs-primary);
}


/*** Testimonial ***/
.testimonial {
    position: relative;
    background: url(../img/bg.webp) center center no-repeat;
    background-size: cover;
}

.testimonial::before {
    position: absolute;
    content: "";
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: rgba(255, 255, 255, .1);
    clip-path: polygon(66% 0, 100% 0, 100% 100%, 33% 100%);
}

.testimonial .testimonial-carousel {
    position: relative;
    z-index: 1;
}

.testimonial-carousel .owl-item img {
    width: 120px;
    height: 120px;
    border-color: rgba(255, 255, 255, .2) !important;
    margin: 0 auto 20px auto;
    border-radius: 100px;
}

.testimonial-carousel .owl-dots {
    margin-top: 25px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.testimonial-carousel .owl-dot {
    position: relative;
    display: inline-block;
    margin: 0 5px;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 3px solid rgba(255, 255, 255, .2);
    border-radius: 30px;
    transition: .5s;
}

.testimonial-carousel .owl-dot.active {
    background: var(--bs-dark);
}


/*** Blog ***/
.blog-item {
    transition: .1s;
}

.blog-item:hover {
    border-width: 0 !important;
    box-shadow: 0 0 35px rgba(247, 201, 90, .25);
}

.blog-item:hover a.btn {
    color: var(--bs-white);
    background: var(--bs-primary);
}


/*** Contact ***/
.contact-info-item::before {
    position: absolute;
    content: "";
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: rgba(255, 255, 255, .1);
    clip-path: polygon(66% 0, 100% 0, 100% 100%, 33% 100%);
}

.contact-info-item .border {
    position: relative;
    border-color: rgba(255, 255, 255, .2) !important;
    z-index: 1;
}


/*** Newsletter ***/
.newsletter {
    position: relative;
    background: url(../img/bg.webp) center center no-repeat;
    background-size: cover;
}

.newsletter::before {
    position: absolute;
    content: "";
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: rgba(255, 255, 255, .1);
    clip-path: polygon(66% 0, 100% 0, 100% 100%, 33% 100%);
}

.newsletter .container {
    position: relative;
    z-index: 1;
}

.newsletter .form-control {
    background: rgba(255, 255, 255, .3);
}


/*** Footer ***/
.footer .btn.btn-link {
    display: block;
    margin-bottom: 10px;
    padding: 0;
    text-align: left;
    color: var(--bs-body);
    font-weight: normal;
    transition: .3s;
}

.footer .btn.btn-link:hover {
    color: var(--bs-primary);
}

.footer .btn.btn-link::before {
    position: relative;
    content: "\f105";
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    margin-right: 10px;
}

.footer .btn.btn-link:hover {
    letter-spacing: 1px;
    box-shadow: none;
}

.footer .copyright {
    padding: 25px 0;
    border-top: 3px solid var(--bs-light);
}

.footer .copyright a {
    color: var(--bs-body);
}

.footer .copyright a:hover {
    color: var(--bs-primary);
}

.footer .footer-menu a {
    margin-right: 15px;
    padding-right: 15px;
    border-right: 3px solid var(--bs-light);
}

.footer .footer-menu a:last-child {
    margin-right: 0;
    padding-right: 0;
    border-right: none;
}

/* Keep interactive text aligned with the Meehygiene yellow theme. */
a:hover,
a:focus-visible {
    color: var(--bs-primary);
}

.navbar .navbar-nav .nav-link:hover,
.navbar .navbar-nav .nav-link.active {
    color: var(--bs-dark);
}

/* Keep navigation text steady and animate a slim black marker for hover/current page. */
.navbar .navbar-nav > .nav-link,
.navbar .navbar-nav > .nav-item > .nav-link {
    position: relative;
}

.navbar .navbar-nav > .nav-link::before,
.navbar .navbar-nav > .nav-item:not(.dropdown) > .nav-link::before {
    position: absolute;
    content: "";
    left: 0;
    right: 0;
    bottom: -.35rem;
    height: 2px;
    background: #fff;
    transform: scaleX(0);
    transform-origin: center center;
    transition: transform .25s ease;
}

.navbar .navbar-nav > .nav-link:hover::before,
.navbar .navbar-nav > .nav-link:focus-visible::before,
.navbar .navbar-nav > .nav-link.active::before,
.navbar .navbar-nav > .nav-item:not(.dropdown) > .nav-link:hover::before,
.navbar .navbar-nav > .nav-item:not(.dropdown) > .nav-link:focus-visible::before,
.navbar .navbar-nav > .nav-item:not(.dropdown) > .nav-link.active::before {
    transform: scaleX(1);
}

.navbar .dropdown-menu .dropdown-item {
    position: relative;
    color: var(--bs-dark);
    background: transparent;
}

.navbar .dropdown-menu .dropdown-item::after {
    position: absolute;
    content: "";
    left: .5rem;
    right: .5rem;
    bottom: .25rem;
    height: 2px;
    background: #fff;
    transform: scaleX(0);
    transform-origin: center center;
    transition: transform .25s ease;
}

.navbar .dropdown-menu .dropdown-item:hover::after,
.navbar .dropdown-menu .dropdown-item:focus-visible::after,
.navbar .dropdown-menu .dropdown-item.active::after {
    transform: scaleX(1);
}

.navbar .dropdown-menu .dropdown-item:hover,
.navbar .dropdown-menu .dropdown-item:focus-visible,
.navbar .dropdown-menu .dropdown-item.active {
    color: var(--bs-dark);
    background: transparent;
}

@media (max-width: 991.98px) {
    .navbar .navbar-nav > .nav-link::before,
    .navbar .navbar-nav > .nav-item:not(.dropdown) > .nav-link::before {
        bottom: .15rem;
    }
}

.hero-header .hero-shop-btn {
    background-color: #000 !important;
    border-color: #000 !important;
    color: #fff !important;
}

.hero-header .hero-shop-btn:hover {
    background-color: #222 !important;
    border-color: #222 !important;
}

.navbar .navbar-shop-btn {
    background-color: #000 !important;
    border-color: #000 !important;
    color: #fff !important;
}

.navbar .navbar-shop-btn:hover {
    background-color: #222 !important;
    border-color: #222 !important;
    color: #fff !important;
}

/* Blog author, sharing and comment UI */
.blog-share-row { display: flex; align-items: center; gap: .5rem; color: var(--bs-secondary); }
.blog-share-link { display: inline-flex; width: 2.25rem; height: 2.25rem; align-items: center; justify-content: center; border-radius: 50%; background: #526b7b; color: #fff; text-decoration: none; transition: background-color .2s ease, transform .2s ease; }
.blog-share-link:hover, .blog-share-link:focus-visible { background: var(--bs-primary); color: #fff; transform: translateY(-2px); }
.blog-author-card { display: grid; grid-template-columns: 112px 1fr; gap: 1.5rem; align-items: center; border: 1px solid #dce4e9; background: #f7f9fa; padding: 1.5rem 2rem; }
.blog-author-photo { width: 112px; height: 112px; border-radius: 50%; object-fit: cover; }
.blog-comment-form { border: 1px solid #dce4e9; padding: 1.5rem; }
.blog-comment-form .form-control { min-height: 48px; }
.blog-comment-form textarea.form-control { min-height: 150px; }
.blog-comment { border-bottom: 1px solid #e5eaee; padding: 1rem 0; }
.blog-comment:last-child { border-bottom: 0; }
.blog-comment-avatar { flex: 0 0 48px; width: 48px; height: 48px; border-radius: 50%; object-fit: cover; background: #f2f4f5; }
@media (max-width: 575.98px) { .blog-author-card { grid-template-columns: 1fr; padding: 1.25rem; } .blog-author-photo { width: 88px; height: 88px; } .blog-comment-form { padding: 1.1rem; } }
.wipe-reveal { width: 100%; max-width: 560px; margin-inline: auto; user-select: none; }
.wipe-reveal__stage { position: relative; width: 100%; aspect-ratio: 3 / 2; overflow: hidden; touch-action: pan-y; }
.wipe-reveal__tissue, .wipe-reveal__top { position: absolute; inset: 0; width: 100%; height: 100%; }
.wipe-reveal__tissue, .wipe-reveal__sachet { display: block; width: 100%; height: 100%; object-fit: contain; pointer-events: none; }
.wipe-reveal__top { overflow: hidden; clip-path: inset(0 calc(100% - var(--reveal-position)) 0 0); }
.wipe-reveal__sachet { max-width: none; }
.wipe-reveal__handle { position: absolute; z-index: 2; top: 0; bottom: 0; left: var(--reveal-position); width: 44px; padding: 0; border: 0; background: transparent; transform: translateX(-50%); cursor: ew-resize; touch-action: none; }
.wipe-reveal__handle::before { position: absolute; top: 0; bottom: 0; left: 50%; width: 3px; background: #f9c64f; box-shadow: 0 0 0 1px rgba(38,58,79,.18); content: ""; transform: translateX(-50%); }
.wipe-reveal__grip { position: absolute; top: 50%; left: 50%; display: grid; width: 42px; height: 42px; place-items: center; border: 3px solid #fff; border-radius: 50%; background: #f9c64f; box-shadow: 0 2px 9px rgba(0,0,0,.22); color: #263a4f; font-size: 20px; transform: translate(-50%,-50%); }
.wipe-reveal__handle:focus-visible { outline: none; }
.wipe-reveal__handle:focus-visible .wipe-reveal__grip { outline: 3px solid #263a4f; outline-offset: 3px; }
.wipe-reveal__hint { margin: 10px 0 0; color: #596b7c; font-size: .9rem; text-align: center; }

.lead-honeypot{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
.lead-form-status{min-height:1.45em;margin:8px 0 0;font-size:.92rem;color:inherit}
.lead-form-status[data-state="success"]{color:#176b38}.lead-form-status[data-state="pending"]{color:#664b00}.lead-form-status[data-state="error"]{color:#b02a37}
.newsletter .lead-form-status[data-state="success"],.newsletter .lead-form-status[data-state="pending"]{color:#fff}
.lead-submit:disabled{opacity:.8;cursor:wait}.lead-spinner{display:inline-block;width:1em;height:1em;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;animation:lead-spin .7s linear infinite;vertical-align:-.12em}@keyframes lead-spin{to{transform:rotate(360deg)}}
.submission-overlay{position:fixed;inset:0;z-index:1000000;display:none;align-items:center;justify-content:center;flex-direction:column;gap:20px;background:rgba(255,255,255,.96);color:#1c2900;font-size:16px;font-weight:600}.submission-overlay.is-active{display:flex}.submission-ring{width:64px;height:64px;border:6px solid #f3e7bd;border-top-color:#f9c64f;border-right-color:#d5a21e;border-radius:50%;animation:submission-spin .85s linear infinite}.submission-overlay-copy{text-align:center;padding:0 20px}@keyframes submission-spin{to{transform:rotate(360deg)}}
.submission-dialog{position:fixed;inset:0;z-index:1000001;display:none;align-items:center;justify-content:center;padding:20px;background:rgba(28,41,0,.58);backdrop-filter:blur(3px)}.submission-dialog.is-open{display:flex}.submission-dialog-open{overflow:hidden}.submission-dialog-card{position:relative;width:min(520px,100%);padding:30px 30px 28px;border-radius:18px;background:#fff;text-align:center;box-shadow:0 24px 80px rgba(0,0,0,.23);color:#1c2900}.submission-dialog-card img{width:min(210px,55%);height:150px;object-fit:contain;margin:0 auto 10px}.submission-dialog-eyebrow{margin:0;color:#9a6a00;font-size:.72rem;letter-spacing:.13em;font-weight:800}.submission-dialog-card h2{margin:7px 0 10px;color:#1c2900;font-size:clamp(1.45rem,4vw,1.9rem)}.submission-dialog-copy{margin:0 auto 22px;max-width:420px;color:#566043;line-height:1.65}.submission-dialog-close{position:absolute;top:8px;right:12px;border:0;background:transparent;color:#536044;font-size:30px;line-height:1;cursor:pointer}.submission-dialog-done{min-width:150px}
body{color:#1c2900}.text-dark{color:#1c2900!important}.form-control,.form-select,input:not([type=checkbox]):not([type=radio]),textarea,select{border:1px solid #d9dfd2!important;border-radius:6px}.form-control:focus,.form-select:focus,input:focus,textarea:focus,select:focus{border-color:#d5a21e!important;box-shadow:0 0 0 .2rem rgba(249,198,79,.22)}
.btn-primary:hover,.btn-check:focus+.btn-primary,.btn-primary:focus{background-color:#efbd48!important;border-color:#efbd48!important}.btn-primary:focus,.btn-check:focus+.btn-primary{box-shadow:0 0 0 .25rem rgba(213,162,30,.35)!important}.btn-check:checked+.btn-primary,.btn-check:active+.btn-primary,.btn-primary:active,.btn-primary.active,.show>.btn-primary.dropdown-toggle{background-color:#d5a21e!important;border-color:#d5a21e!important}.btn-check:checked+.btn-primary:focus,.btn-check:active+.btn-primary:focus,.btn-primary:active:focus,.btn-primary.active:focus,.show>.btn-primary.dropdown-toggle:focus{box-shadow:0 0 0 .25rem rgba(213,162,30,.35)!important}
.btn-dark{background-color:#f7c95a!important;border-color:#f7c95a!important}.btn-dark:hover,.btn-dark:focus{background-color:#efbd48!important;border-color:#efbd48!important}.btn-dark:focus{box-shadow:0 0 0 .25rem rgba(213,162,30,.35)!important}.btn-dark:active,.btn-dark.active,.show>.btn-dark.dropdown-toggle{background-color:#d5a21e!important;border-color:#d5a21e!important}
.newsletter-form .lead-submit{background-color:#000!important;border-color:#000!important}.newsletter-form .lead-submit:hover,.newsletter-form .lead-submit:focus,.newsletter-form .lead-submit:active{background-color:#1c1c1c!important;border-color:#1c1c1c!important}.newsletter-form .lead-submit:focus{box-shadow:0 0 0 .25rem rgba(0,0,0,.2)!important}
.footer .row>div:nth-child(2) h5,.footer .row>div:nth-child(2) p,.footer .row>div:nth-child(2) p a,.footer .row>div:nth-child(2) p i{color:#000!important}
.submission-overlay{background:rgba(255,255,255,.48);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);color:#222}
.submission-dialog{background:rgba(255,255,255,.16);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.loader{width:50px;aspect-ratio:1;border-radius:50%;background:radial-gradient(farthest-side,#ffa516 94%,#0000) top/8px 8px no-repeat,conic-gradient(#0000 30%,#ffa516);-webkit-mask:radial-gradient(farthest-side,#0000 calc(100% - 8px),#000 0);mask:radial-gradient(farthest-side,#0000 calc(100% - 8px),#000 0);animation:l13 1s infinite linear}
@keyframes l13{100%{transform:rotate(1turn)}}