/** Shopify CDN: Minification failed

Line 1266:0 All "@import" rules must come first

**/
/* ==========================================================
   HERO SLIDER
   Horizon Theme Compatible
========================================================== */

.hero-slider{
    position:relative;
    width:100%;
    overflow:hidden;
}

.hero-slider .swiper{
    width:100%;
    height:100%;
}

.hero-slider .swiper-wrapper{
    height:100%;
}

.hero-slider .swiper-slide{
    position:relative;
    width:100%;
    height:100%;
}

.hero-slide{
    position:relative;
    overflow:hidden;
}

/* ==========================================================
   IMAGE
========================================================== */

.hero-slide__image{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    overflow:hidden;
}

.hero-slide__image picture{
    display:block;
    width:100%;
    height:100%;
}

.hero-image,
.hero-placeholder{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
}

.hero-slide__overlay{
    position:absolute;
    inset:0;
    background:#000;
    opacity:var(--overlay);
    z-index:2;
}

/* ==========================================================
   CONTENT WRAPPER
========================================================== */

.hero-slide__container{
    position:relative;
    z-index:5;
    height:100%;
}

.hero-slide__content{
    display:grid;
    height:100%;
    padding:60px;
    box-sizing:border-box;
}

/* ==========================================================
   CONTENT WIDTH
========================================================== */

.width-small{
    max-width:420px;
}

.width-medium{
    max-width:620px;
}

.width-large{
    max-width:820px;
}

/* ==========================================================
   TYPOGRAPHY
========================================================== */

.hero-subheading{
    font-size:14px;
    letter-spacing:3px;
    text-transform:uppercase;
    margin-bottom:12px;
    font-weight:600;
}

.hero-heading{
    margin:0;
    font-size:58px;
    line-height:1.05;
    font-weight:700;
}

.hero-text{
    margin-top:20px;
    font-size:18px;
    line-height:1.7;
}

.hero-text p{
    margin:0;
}

.hero-buttons{
    margin-top:32px;
}

/* ==========================================================
   BUTTON
========================================================== */

.hero-buttons .button{
    min-width:180px;
}

/* ==========================================================
   IMAGE ANIMATION
========================================================== */

.hero-image{
    transform:scale(1);
    transition:transform 8s linear;
}

.swiper-slide-active .hero-image{
    transform:scale(1.08);
}

/* ==========================================================
   FADE TEXT
========================================================== */

.hero-subheading,
.hero-heading,
.hero-text,
.hero-buttons{
    opacity:0;
    transform:translateY(30px);
    transition:
        opacity .7s ease,
        transform .7s ease;
}

.swiper-slide-active .hero-subheading{
    opacity:1;
    transform:none;
    transition-delay:.2s;
}

.swiper-slide-active .hero-heading{
    opacity:1;
    transform:none;
    transition-delay:.35s;
}

.swiper-slide-active .hero-text{
    opacity:1;
    transform:none;
    transition-delay:.5s;
}

.swiper-slide-active .hero-buttons{
    opacity:1;
    transform:none;
    transition-delay:.65s;
}

/* ==========================================================
   9 CONTENT POSITIONS
========================================================== */

.top-left{
    justify-items:start;
    align-content:start;
    text-align:left;
}

.top-center{
    justify-items:center;
    align-content:start;
    text-align:center;
}

.top-right{
    justify-items:end;
    align-content:start;
    text-align:right;
}

.center-left{
    justify-items:start;
    align-content:center;
    text-align:left;
}

.center-center{
    justify-items:center;
    align-content:center;
    text-align:center;
}

.center-right{
    justify-items:end;
    align-content:center;
    text-align:right;
}

.bottom-left{
    justify-items:start;
    align-content:end;
    text-align:left;
}

.bottom-center{
    justify-items:center;
    align-content:end;
    text-align:center;
}

.bottom-right{
    justify-items:end;
    align-content:end;
    text-align:right;
}

/* ==========================================================
   NAVIGATION ARROWS
========================================================== */

.hero-slider__arrow{
    width:54px !important;
    height:54px !important;
    border-radius:50%;
    background:rgba(255,255,255,.15);
    backdrop-filter:blur(10px);
    color:#fff !important;
    transition:.3s;
}

.hero-slider__arrow::after{
    display:none;
}

.hero-slider__arrow:hover{
    background:#fff;
    color:#000 !important;
}

.hero-slider__arrow svg{
    width:22px;
    height:22px;
}

.hero-slider__arrow--prev{
    left:25px;
}

.hero-slider__arrow--next{
    right:25px;
}

/* ==========================================================
   PAGINATION
========================================================== */

.hero-slider__pagination{
    bottom:25px !important;
}

.hero-slider .swiper-pagination-bullet{
    width:12px;
    height:12px;
    background:#fff;
    opacity:.4;
    transition:.3s;
}

.hero-slider .swiper-pagination-bullet-active{
    width:34px;
    border-radius:20px;
    opacity:1;
}

/* ==========================================================
   CONTENT SPACING
========================================================== */

.hero-heading + .hero-text{
    margin-top:22px;
}

.hero-buttons{
    display:flex;
    gap:15px;
    flex-wrap:wrap;
}

/* ==========================================================
   RESPONSIVE
========================================================== */

@media screen and (max-width:1200px){

.hero-heading{
    font-size:48px;
}

.hero-slide__content{
    padding:50px;
}

}

@media screen and (max-width:990px){

.hero-heading{
    font-size:40px;
}

.hero-text{
    font-size:17px;
}

.hero-slide__content{
    padding:40px;
}

.hero-slider__arrow{
    width:46px !important;
    height:46px !important;
}

}

@media screen and (max-width:749px){

.hero-slide__content{

    padding:
        35px
        20px;

}

.hero-heading{

    font-size:32px;

    line-height:1.15;

}

.hero-text{

    font-size:16px;

    line-height:1.6;

}

.hero-subheading{

    font-size:12px;

    letter-spacing:2px;

}

.hero-buttons{

    margin-top:24px;

}

.hero-buttons .button{

    width:100%;

}

.hero-slider__arrow{

    display:none !important;

}

.width-small,
.width-medium,
.width-large{

    max-width:100%;

}

}

/* ==========================================================
   SMALL MOBILES
========================================================== */

@media screen and (max-width:480px){

.hero-heading{

    font-size:28px;

}

.hero-text{

    font-size:15px;

}

.hero-slide__content{

    padding:24px;

}

.hero-slider__pagination{

    bottom:16px !important;

}

}

/* ==========================================================
   ACCESSIBILITY
========================================================== */

.hero-slider button:focus-visible,
.hero-slider a:focus-visible{

    outline:2px solid #ffffff;
    outline-offset:4px;

}

/* ==========================================================
   PERFORMANCE
========================================================== */

.hero-image{

    will-change:transform;

}

.hero-slide__overlay{

    pointer-events:none;

}
.swiper-button-lock {
    display: block !important;
}
/*==========================================================
MODERN SHOWCASE
==========================================================*/

.hero-modern{
    position:relative;
    height:100%;
    width:100%;
    background:#fff;
    overflow:hidden;
}

.hero-modern__bg{
    position:absolute;
    inset:0;
    z-index:1;
}
.social-icon-banner img {
    width: 60px;
    
}
.horbar{border-right: 2px solid #ed3f82;border-left: 2px solid #ed3f82;}
.social-icon-banner {
    position: absolute;
    bottom: 10px;
    right: 0px;
    z-index: 5;
    display: flex;
}
.hero-big-letter{
    position:absolute;
    left:50%;
    top:50%;
    transform:translate(-50%,-50%);
    font-size:40vw;
    line-height:.8;
    font-weight:900;
    opacity:.32;
    user-select:none;
    pointer-events:none;
    white-space:nowrap;
}

.hero-modern__content{
    position:relative;
    z-index:5;
    height:100%;
    max-width:1400px;
    margin:0 auto;
    padding:60px;
    display:flex;
    flex-direction:column;
}

.hero-modern-subheading{
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 18px;

    text-align: center;
    font-size: 14px;
    letter-spacing: 3px;
    text-transform: uppercase;
    font-weight: 600;

    margin-top: 10px;
    margin-bottom: 40px;
}
a.banner-shop-btn {
    position: absolute;
    right: 40px;
    top: 24%;
    z-index: 5;
    writing-mode: vertical-lr;
    text-orientation: upright;
    color: #ef4f82;
    font-weight: 700;
    border: 2px solid #ef4f82;
    padding: 15px 10px;
    border-radius: 5px;    background: #ffffff80;
}
.hero-modern-subheading::before,
.hero-modern-subheading::after{
    content: "";
    width: 60px;
    height: 2px;
    background: #8ED9CF;
    border-radius: 2px;
}

.hero-modern-wrapper{
    flex:1;
    display:grid;
    grid-template-columns:250px 1fr 250px;
    align-items:center;
}

.hero-modern-left,
.hero-modern-right{
    display:flex;
    flex-direction:column;
    justify-content:space-between;
    height:100%;
}

.hero-modern-center{
       position:absolute;
    left:50%;
    top:50%;
    transform:translate(-50%,-50%);
    z-index:5;
    text-align:center;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
}

/*==========================================================
PRODUCT IMAGE
==========================================================*/

.hero-modern-product{
    position: relative;
    z-index: 5;
    display: flex;
    justify-content: center;
    align-items: center;
    left:0%; /* Move image to the right */
}

.hero-modern-product-image{
    width: 100%;
    max-width: 340px; /* Reduce image size (change to 380px if needed) */
    display: block;
    margin: 0 auto;
}

.hero-modern-product img{
    width: 100%;
    height: auto;
    display: block;
    object-fit: contain;filter: drop-shadow(2px 9px 8px #222);
}

/*==========================================================
BUTTON
==========================================================*/

.hero-modern-button{
    position: absolute;
    left: 16%;
    top: 125%;
    transform: translateX(-50%);
}

.hero-modern-button .button{
    min-width:200px;
}

/*==========================================================
BRAND
==========================================================*/

/* Brand container */
/* Brand Container */
.hero-modern-brand{
    position:absolute;
    inset:0;
    z-index:5;
    pointer-events:none;
}

/* LEFT */
.hero-brand-left{
    position:absolute;
    top:50%;
    left:18%;
    transform:translateY(-50%);

    color:#EF4F82 !important;
    font-size:90px;
    font-weight:500;
    letter-spacing:12px;
    line-height:1;
    white-space:nowrap;
}

.hero-brand-right{
    position:absolute;
    top:50%;
    right:20%;
    transform:translateY(-50%);

    color:#EF4F82 !important;
    font-size:90px;
    font-weight:500;
    letter-spacing:12px;
    line-height:1;
    white-space:nowrap;
}

/*==========================================================
FLOATING TAGS
==========================================================*/

.hero-tag{
    font-size:15px;
    font-weight:600;
    position:relative;
    color:#222;
    display:flex;
    align-items:center;
    gap:10px;
}

.hero-tag::before{
    content:"";
    width:14px;
    height:14px;
    border-radius:50%;
    background:#d8cab8;
    flex-shrink:0;
}

.hero-modern-left{
    position:absolute;
    left:22%;
    top:50%;
    transform:translateY(-50%);
    z-index:5;

    display:flex;
    flex-direction:column;
    justify-content:space-between;
    height:260px;
}

.hero-modern-right{
    position:absolute;
    right:22%;
    top:50%;
    transform:translateY(-50%);
    z-index:5;

    display:flex;
    flex-direction:column;
    justify-content:space-between;
    height:260px;
}

.hero-tag-top-left{
    align-self:flex-start;
}

.hero-tag-bottom-left{
    align-self:flex-start;
}

.hero-tag-top-right{
    align-self:flex-end;
}

.hero-tag-bottom-right{
    align-self:flex-end;
}

.hero-tag-top-left,
.hero-tag-bottom-left,
.hero-tag-top-right,
.hero-tag-bottom-right{
    position: relative;
    display: inline-flex;
    align-items: center;
}

/* Left side line */
.hero-tag-top-left::after,
.hero-tag-bottom-left::after{
    content: "";
    position: absolute;
    left: calc(100% + 12px);
    top: 50%;
    width: 50px;
    height: 2px;
    background: #8ED9CF;
    transform: translateY(-50%);
}

/* Right side line */
.hero-tag-top-right::before,
.hero-tag-bottom-right::before{
    content: "";
    position: absolute;
    right: calc(100% + 12px);
    top: 50%;
    width: 50px;
    height: 2px;
    background: #8ED9CF;
    transform: translateY(-50%);
}

/*==========================================================
ANIMATION
==========================================================*/

.hero-modern-product{
    animation:heroFloat 5s ease-in-out infinite;
}

@keyframes heroFloat{

0%{
transform:translateY(0);
}

50%{
transform:translateY(-12px);
}

100%{
transform:translateY(0);
}

}

.hero-big-letter{
    animation:letterScale 8s linear infinite alternate;
}

@keyframes letterScale{

from{
transform:translate(-50%,-50%) scale(1);
}

to{
transform:translate(-50%,-50%) scale(1.05);
}

}
/*==========================================================
MODERN SHOWCASE DECORATION
==========================================================*/

.hero-modern::before{
    content:"";
    position:absolute;
    width:180px;
    height:180px;
    background:#ed3f82;
    border-radius:50%;
    left:-70px;
    top:80px;
    opacity:.65;
}

.hero-modern::after{
    content:"";
    position:absolute;
    width:220px;
    height:220px;
    background:#ff9fc4;
    border-radius:50%;
    right:-100px;
    bottom:-80px;
    opacity:.6;
}

/*==========================================================
PRODUCT SHADOW
==========================================================*/

.hero-modern-product{
    position:relative;
}

.hero-modern-product::after{
    content:"";
    position:absolute;
    left:50%;
    bottom:15px;
    transform:translateX(-50%);
    width:70%;
    height:30px;
    border-radius:50%;
    background:rgba(0,0,0,.12);
    filter:blur(18px);
    z-index:-1;
}

/*==========================================================
PLUS DECORATION
==========================================================*/

.hero-modern-center::before{
    content:"+";
    position:absolute;
    left:12%;
    top:22%;
    font-size:28px;
    font-weight:700;
    color:#d9cbb8;
}

.hero-modern-center::after{
    content:"+";
    position:absolute;
    right:12%;
    bottom:18%;
    font-size:28px;
    font-weight:700;
    color:#d9cbb8;
}

/*==========================================================
HOVER
==========================================================*/

.hero-modern-product-image{
    transition:transform .5s ease;
}

.hero-modern:hover .hero-modern-product-image{
    transform:scale(1.04);
}

.hero-tag{
    transition:.3s;
}

.hero-tag:hover{
    transform:translateY(-4px);
}

/*==========================================================
ENTRANCE ANIMATION
==========================================================*/

.hero-modern-subheading,
.hero-modern-brand,
.hero-tag,
.hero-modern-button{
    opacity:0;
    transform:translateY(30px);
}


.hero-slide.is-active .hero-modern-subheading{
    animation:fadeUp .6s .2s forwards;
}

.hero-slide.is-active .hero-tag-top-left{
    animation:fadeLeft .7s .3s forwards;
}

.hero-slide.is-active .hero-tag-bottom-left{
    animation:fadeLeft .7s .45s forwards;
}

.hero-slide.is-active .hero-tag-top-right{
    animation:fadeRight .7s .3s forwards;
}

.hero-slide.is-active .hero-tag-bottom-right{
    animation:fadeRight .7s .45s forwards;
}

.hero-slide.is-active .hero-modern-brand{
    animation:fadeUp .7s .6s forwards;
}

.hero-slide.is-active .hero-modern-button{
    animation:fadeUp .7s .75s forwards;
}

@keyframes fadeUp{
    from{
        opacity:0;
        transform:translateY(30px);
    }
    to{
        opacity:1;
        transform:none;
    }
}

@keyframes fadeLeft{
    from{
        opacity:0;
        transform:translateX(-35px);
    }
    to{
        opacity:1;
        transform:none;
    }
}

@keyframes fadeRight{
    from{
        opacity:0;
        transform:translateX(35px);
    }
    to{
        opacity:1;
        transform:none;
    }
}

/*==========================================================
TABLET
==========================================================*/

@media (max-width:990px){

.hero-modern__content{
    padding:40px;
}

.hero-modern-wrapper{
    grid-template-columns:180px 1fr 180px;
}

.hero-brand-left,
.hero-brand-right{
    font-size:42px;
}

.hero-modern-product-image{
    max-width:360px;
}

.hero-big-letter{
    font-size:42vw;
}

}

/*==========================================================
MOBILE
==========================================================*/

@media (max-width:749px){

.hero-modern__content{
    padding:24px;
}

.hero-modern-wrapper{
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    gap:24px;
}

.hero-modern-left,
.hero-modern-right{
          width: max-content;
        height: 40%;
        padding: 0;
        gap: 14px;
}
.hero-modern-right {
    right: 3px !important;
    top: 50% !important;
}
.hero-modern-left {
    left: 3px !important;
    top: 50% !important;
}
.social-icon-banner img {
    width: 30px;
    margin: 8px;
}
.hero-slider-next {left: 60px !important;}
.hero-slider-prev {left: 40px !important;}
.hero-modern-button{left: 15%;
    top: 88%;
    width: 70%;}
.hero-modern-center{ width: 70%; height: 70%;}
.hero-slider-prev, .hero-slider-next {
    position: relative !important;
    top: -36px !important;}
.hero-modern-right .hero-tag{text-align:end}
.hero-modern-left .hero-tag{text-align:left}
.banner-shop-btn{display:none !important}
.hero-tag:before{display:none !important}
.hero-tag:after{display:none !important}
.hero-tag{
    justify-content:center;
    text-align:center;
    align-self:center !important;
    width: 92%;
        font-size: 14px;
        font-weight: 400;
}

.hero-modern-product-image{
    max-width:260px;
}

.hero-brand-left,
.hero-brand-right{
    font-size:28px;
    letter-spacing:2px;
}

.hero-modern-subheading{
    position:absolute;
    top:60px;
    left:5%;
    transform:translateX(-50%);
    z-index:5;
        width: 90%;
    margin:0;
}

.hero-modern-button .button{
    width:100%;
}
.hero-brand-right, .hero-brand-left{top:22% !important}
.hero-brand-right:before{content:"B";        margin-right: -7px;}
.hero-big-letter{
    font-size:85vw;
    opacity:.3;
}

.hero-modern::before,
.hero-modern::after{
    display:none;
}

.hero-modern-center::before,
.hero-modern-center::after{
    display:none;
}

}

/*==========================================================
LARGE DESKTOP
==========================================================*/

@media (min-width:1600px){

.hero-modern-product-image{
    max-width:620px;
}

.hero-brand-left,
.hero-brand-right{
    font-size:72px;
}

.hero-big-letter{
    font-size:28vw;
}

}



.hero-slider-track {
    position: relative;
    width: 100%;
    height: 100%;
}

.hero-slide {
    /* position: absolute; */
    inset: 0;
    opacity: 0;
    visibility: hidden;
    transition: opacity .6s ease;display: none;
}

.hero-slide.is-active {
    opacity: 1;
    visibility: visible;
    z-index: 2;display:flex !important
}

.hero-slider-prev,
.hero-slider-next {
 position: absolute;
    top: 90%;
    transform: translateY(-50%);
    z-index: 5;
    border: 3px solid #44BCA4;
    border-radius: 5px;
    width: 40px;
    height: 40px;
}

.hero-slider-prev {
    left: 110px;
}

.hero-slider-next {
    left: 160px;
}

.hero-slider-dots {
    position: absolute;
    left: 50%;
    bottom: 24px;
    transform: translateX(-50%);
    display: flex;
    gap: 10px;
    z-index: 5;
}

.hero-slider-dots button {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    border: 0;
    background: rgba(255,255,255,.5);
    cursor: pointer;
}

.hero-slider-dots button.active {
    background: #fff;
}





/* STOP HERO ANIMATIONS WHILE PRELOADER IS RUNNING */

body.preloader-active .hero-slide,
body.preloader-active .hero-slide *,
body.preloader-active .hero-modern,
body.preloader-active .hero-modern * {
  animation-play-state: paused !important;
  transition: none !important;
}


/* KEEP HERO HIDDEN WHILE PRELOADER IS RUNNING */

body.preloader-active .hero-slider {
  visibility: hidden;
}

.hero-classic .hero-classic__container {
    position: absolute;
    top: 20%;
    z-index: 9999999999;
    opacity: 2;
    display: block;
    left: 8%;
}
.hero-classic .hero-subheading, .hero-classic .hero-heading, .hero-classic .hero-text, .hero-classic .hero-buttons {
opacity:1}

/* LEFT ALIGN HERO CONTENT */
.hero-classic__content.center-center {
  justify-items: start !important;
  align-items: flex-start !important;
  text-align: left !important;
}

.hero-classic__content.center-center .hero-subheading,
.hero-classic__content.center-center .hero-heading,
.hero-classic__content.center-center .hero-text,
.hero-classic__content.center-center .hero-buttons {
  text-align: left !important;
  justify-content: flex-start !important;
  align-self: flex-start !important;
}
.hero-subheading{
    color: #5B1F01;
}
@import url('https://fonts.googleapis.com/css2?family=Italianno&display=swap');

.hero-slider .hero-heading {
  font-family: "Italianno", cursive !important;
  font-style: normal !important;
  font-weight: 400 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  line-height: 1.1 !important;
  font-size: 72px !important;
}

.hero-slide-link{
    display:block;
    text-decoration:none;
    color:inherit;
    width:100%;
    height:100%;
}

.hero-slide-link:hover{
    text-decoration:none;
}