/* Lexend "Light, Regular, Medium, Semi-bold, Bold" Fonts */
@import url('https://fonts.googleapis.com/css2?family=Lexend:wght@300;400;500;600;700&display=swap');
/* Amalfi Coast Font */
@import url('https://fonts.cdnfonts.com/css/amalfi-coast');

/* START Ui Kit lightbox styles */
.uk-lightbox.uk-open {
    display: block;
    opacity: 1;
    z-index: 999999; /* custom added to take over header */
}
.uk-overflow-hidden {
    overflow: hidden;
}
.uk-lightbox {
    display: none;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1010;
    background: #000;
    opacity: 0;
    transition: opacity .15s linear;
    touch-action: pinch-zoom;
}
.uk-lightbox-items>.uk-active {
    display: flex;
}
.uk-lightbox-items>* {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    display: none;
    justify-content: center;
    align-items: center;
    color: rgba(255,255,255,.7);
    will-change: transform,opacity;
}
.uk-lightbox-items>*>:not(iframe) {
    width: auto;
    height: auto;
}
.uk-lightbox-items>*>* {
    max-width: 100vw;
    max-height: 100vh;
}
canvas, img, video {
    max-width: 100%;
    height: auto;
    box-sizing: border-box;
}
audio, canvas, iframe, img, svg, video {
    vertical-align: middle;
}
.uk-transition-active.uk-active [class*=uk-transition-slide], .uk-transition-toggle:focus [class*=uk-transition-slide], .uk-transition-toggle:hover [class*=uk-transition-slide] {
    opacity: 1;
    transform: translate(0,0);
}
.uk-transition-opaque {
    opacity: 1;
}
.uk-transition-slide-top {
    transform: translateY(-100%);
}
.uk-transition-fade, [class*=uk-transition-scale], [class*=uk-transition-slide] {
    transition: .3s ease-out;
    transition-property: opacity,transform,filter;
    opacity: 0;
}
.uk-text-right {
    text-align: right!important;
}
.uk-lightbox-toolbar {
    padding: 10px 10px;
    background: rgba(0,0,0,.3);
    color: rgba(255,255,255,.7);
}
button.uk-icon:not(:disabled) {
    cursor: pointer;
}
button, [type='button'], [type='reset'], [type='submit'] {
    -webkit-appearance: button;
}
.uk-lightbox-toolbar-icon {
    padding: 5px;
    color: rgba(255,255,255,.7);
}
.uk-lightbox-toolbar>* {
    color: rgba(255,255,255,.7);
}
.uk-close {
    color: #999;
    transition: .1s ease-in-out;
    transition-property: color,opacity;
}

.uk-icon {
    margin: 0;
    border: none;
    border-radius: 0;
    overflow: visible;
    font: inherit;
    color: inherit;
    text-transform: none;
    padding: 0;
    background-color: transparent;
    display: inline-block;
    fill: currentcolor;
    line-height: 0;
}
svg:not(:root) {
    overflow: hidden;
}
.uk-icon>* {
    transform: translate(0,0);
}
svg {
    max-width: 100%;
    height: auto;
    box-sizing: border-box;
}
audio, canvas, iframe, img, svg, video {
    vertical-align: middle;
}
.uk-position-medium[class*=uk-position-center-left], .uk-position-medium[class*=uk-position-center-right] {
    transform: translateY(-50%) translateY(-30px);
}
.uk-transition-fade, [class*=uk-transition-scale], [class*=uk-transition-slide] {
    transition: .3s ease-out;
    transition-property: opacity,transform,filter;
    opacity: 0;
}
.uk-position-medium {
    max-width: calc(100% - (30px * 2));
    margin: 30px;
}
.uk-position-center-left {
    left: 0;
}
[class*=uk-position-center-left], [class*=uk-position-center-right] {
    top: 50%;
    transform: translateY(-50%);
}
[class*=uk-position-bottom], [class*=uk-position-center], [class*=uk-position-left], [class*=uk-position-right], [class*=uk-position-top] {
    position: absolute!important;
    max-width: 100%;
}
.uk-lightbox-button {
    box-sizing: border-box;
    width: 50px;
    height: 50px;
    background: rgba(0,0,0,.3);
    color: rgba(255,255,255,.7);
    display: inline-flex;
    justify-content: center;
    align-items: center;
}
.uk-slidenav {
    padding: 5px 10px;
    color: rgba(102,102,102,.5);
    transition: color .1s ease-in-out;
}
.uk-icon {
    margin: 0;
    border: none;
    border-radius: 0;
    overflow: visible;
    font: inherit;
    color: inherit;
    text-transform: none;
    padding: 0;
    background-color: transparent;
    display: inline-block;
    fill: currentcolor;
    line-height: 0;
}
.uk-lightbox-caption:empty {
    display: none;
}
.uk-transition-opaque {
    opacity: 1;
}
.uk-transition-slide-bottom {
    transform: translateY(100%);
}
.uk-transition-fade, [class*=uk-transition-scale], [class*=uk-transition-slide] {
    transition: .3s ease-out;
    transition-property: opacity,transform,filter;
    opacity: 0;
}
.uk-position-bottom {
    bottom: 0;
    left: 0;
    right: 0;
}
[class*=uk-position-bottom], [class*=uk-position-center], [class*=uk-position-left], [class*=uk-position-right], [class*=uk-position-top] {
    position: absolute!important;
    max-width: 100%;
}
.uk-text-center {
    text-align: center!important;
}
.uk-lightbox-toolbar {
    top: 0;
    right: 0;
    padding: 10px 10px;
    background: rgba(0,0,0,.3);
    color: rgba(255,255,255,.7);
    background: lightgrey;
}
/* For mobile only, so Close button is visible completely */
@media screen and (max-width: 767px) {
    .uk-lightbox-toolbar {
        top: 3%;
        right: 3%;
    }
}
/* Disable Left and right video nav buttons on mobile devices*/
@media screen and (max-width: 767px) {
    .uk-lightbox > .uk-lightbox-button {
        display: none;
    }
}

/* END Lightbox Styles */

#first-page-load {
    background-color: white;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 999;
}
/*#first-page-load {*/
/*    animation-name: firstPageLoad;*/
/*    animation-duration: 4s;*/
/*    animation-timing-function: ease-in;*/
/*}*/
/*@keyframes firstPageLoad{*/
/*    from {opacity: 1;}*/
/*    to {opacity: 0;}*/
/*}*/

/* Keep direction of country code dropdown regardless of site language */
.iti__flag-container {
    direction: ltr;
}

.mobile-floating-cart {
    position: fixed;
    bottom: 0;
    height: 75px;
    background-color: black;
    color: white;
}

/* Videos */
.video {
    width: 100%;
    /*height: 60vh;*/
}
.fix-vetical-stretch-video-container {
    height: 100%;
    height: -webkit-fit-content;
}
.fix-vetical-stretch-video {
    height: 100%;
    height: -webkit-fit-content;
}
.coupon-btn-padding {
    padding-top: 11px;
    /*padding-top: 9px;*/
    /*padding-bottom: 9.5px;*/
    padding-bottom: 8px;
}
.text-rtl {
    direction: rtl;
}
.text-ltr {
    direction: ltr;
}
.text-initial {
    direction: initial;
}
.header-shadow {
    box-shadow: 0px 3px 6px #0000000D;
}
.footer-shadow {
    box-shadow: 0px -3px 6px #0000000B;
}
.newsletter-gradient-bg {
    background-image: linear-gradient(to right, #FFF7F5, #F4FEFF);
}
#newsletter-email::placeholder {
    color: #D8D8D8;
}
.how-it-started-gradient {
    background-image: linear-gradient(to right, #FFF7F5, #F4FEFF);
}
.how-it-started-heading {
    bottom: -11rem;
    left: -3rem;
}
.vertical-line {
    border: 1px solid black;
    width: 1px;
    margin: auto;
}
.top-line {
    /* Imagine about it as a div which only has height and 1px width. this is how vertical bar is created */
    height: 90px;
}
.bottom-line {
    /* Imagine about it as a div which only has height and 1px width. this is how vertical bar is created */
    height: 90px;
}
@media screen and (min-width: 767px) {
    .bottom-line {
        /* Imagine about it as a div which only has height and 1px width. this is how vertical bar is created */
        height: 200px;
    }
}
.overlay {
    /*visibility: hidden;*/
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    /*z-index: 10;*/
    height: 100vh; /* Span over entire viewport since it stopped spanning entire viewport after making header sticky */
}

.mobile-menu-overlay {
     visibility: hidden;
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100vh;
    width: 100%;
}

.overlay-active {
    visibility: visible;
}
/* Seems that the scrolling problem fix is to add position:fixed to each modal. This will however create
   Problem of positioning as you won't be positioning relatively to parent.
*/
.cart-modal {
    /*display: flex;*/
    display: none;
    flex-direction: column;
    align-items: center;
    color: #FFFFFF;
    background-color: #404040;
    opacity: 1;
    backdrop-filter: blur(3px);
}
/*.cart-modal:target{*/
#cart-trigger:hover .cart-modal {
    display: flex;
    position: absolute;
    z-index: 10;
    top: 40px;
}
.account-modal {
    background-color: #404040;
}
/*.account-modal:target {*/
#account-trigger:hover .account-modal {
    display: block;
    position: absolute;
    z-index: 10;
    top: 40px;
    /*right: 75px;*/
    right: 0;
}
.account-modal-ar:target {
    right: 0;
}
.placeholder-gray::placeholder {
    color: #D8D8D8;
}
.placeholder-black::placeholder {
    color: black;
}
.arrow-up {
    width: 8px;
}
.dropdown-content {
    display: none;
    background: #404040 0% 0% no-repeat padding-box;
    opacity: 1;
    backdrop-filter: blur(3px);
    position: absolute;
    width: 250px;
    height: 80vh;
    top: 35px;
    left: 0px;
    z-index: 99;
    overflow-y: scroll;
}



/* Custom Scrollbar */
.custom-scrollbar::-webkit-scrollbar {
    width: 6px;
}
.custom-scrollbar::-webkit-scrollbar-track {
    background: #f1f1f1;
}
.custom-scrollbar::-webkit-scrollbar-thumb {
    background: #888;
}
.custom-scrollbar::-webkit-scrollbar-thumb:hover {
    background: #555;
}

/* Checkout Page css regarding Grouped buttons and intl-tel-input display for ar lang */
:lang(ar) .iti--allow-dropdown input, .iti--allow-dropdown input[type=text] {
    margin-left: 0 !important;
    padding-right: 52px !important;
}
:lang(ar) .iti--allow-dropdown .iti__flag-container {
    right: 0 !important;
    left: auto !important;
}
@media (max-width: 768px) {
    :lang(ar) .iti__country-list {
        right: 0 !important;
    }
}
:lang(ar) .iti__country-list--dropup {
    right: 0 !important;
    bottom: 100% !important;
    margin-bottom: -1px !important;
}

:lang(ar) .btn-request-otp {
    left: 0;
    right: auto;
    border-left: 0;
    border-right: 1px solid;
}
:lang(ar) .btn-verify-otp {
    left: 0;
    right: auto;
    border-left: 0;
    border-right: 1px solid;
}

.btn-request-otp {
    height: 42px;
    position: absolute;
    right: 0;
    top: 35px; /* Safari needs this, otherwise button sticks below the input field */
    border-left: 1px solid;
    background-color: black;
    color: white;
    width: 140px;
}
:lang(ar) .btn-request-otp {
    width: 180px;
}
.btn-verify-otp {
    height: 42px;
    position: absolute;
    right: 0;
    top: 35px; /* Safari needs this, otherwise button sticks below the input field */
    border-left: 1px solid;
    background-color: black;
    color: white;
    width: 140px;
}
:lang(ar) .btn-verify-otp {
    width: 180px;
}

.i-button {
    height: 42px;
    position: absolute;
    right: 0;
    top: 35px;
    /*border-left: 1px solid;*/
    background-color: black;
    color: white;
    /* width: 110px; */
    width: 40px;
}
.i-icon {
    display: inline-block;
    position: absolute;
    /*right: 0;*/
    right: 10px;
    bottom: 12px;
    height: 16px;
    width: 16px;
}
:lang(ar) .i-icon {
    left: 10px;
    right: auto;
}
:lang(ar) .i-button {
    left: 0;
    right: auto;
}
#request-tooltip {
    font-size: 9px;
    position: absolute;
    inset: auto auto 44px 150px; /* top, right, bottom, left */
    margin: 0;
}
#request-trigger:hover + #request-tooltip {
    opacity: 1;
    visibility: visible;
}
#verify-tooltip {
    font-size: 9px;
    position: absolute;
    inset: auto auto 44px 150px; /* top, right, bottom, left */
    margin: 0;
}
#verify-trigger:hover + #verify-tooltip {
    opacity: 1;
    visibility: visible;
}

:lang(ar) #request-tooltip {
    inset: auto 95px 44px auto;
    font-size: 10px;
}
:lang(ar) #verify-tooltip {
    inset: auto 175px 44px auto;
    font-size: 10px;
}

/* Hide arrows from number input */
/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Firefox */
input[type=number] {
    -moz-appearance: textfield;
}
/* END Checkout Page css regarding Grouped buttons and intl-tel-input display for ar lang */

/* Hide & Show Arrows */
.dropdown-trigger:hover .arrow-up {
    display: inline-block;
}
.dropdown-trigger:hover .arrow-down {
    display: none;
}
/* Show the dropdown */
@media screen and (max-width: 767px) {
    .dropdown-trigger:hover .dropdown-content {
        display: none;
    }
    /* Keep Arrows Hidden on mobile */
    .dropdown-trigger:hover .arrow-up {
        display: none;
    }
    .dropdown-trigger:hover .arrow-down {
        display: none;
    }
}
@media screen and (min-width: 768px) {
    .dropdown-trigger:hover .dropdown-content {
        display: block;
    }
}

.hamburger-line {
    width: 33px;
    height: 4px;
    margin-bottom: 5px;
    position: relative;
    background: black;
    border-radius: 3px;
    z-index: 1;
    transform-origin: 4px 0px;
}
.x {
    width: 20px;
}
.header-icon {
    width: 20px;
}

/* Keep this at the bottom of file */
@media screen and (min-width: 767px) {
    .arrow-up {
        display: none;
    }
}
/* Very important to specify dimensions or swiper will take up space more than expected */
.homepage-banner-swiper {
    width: 100%;
}
.swiper-slide {
    /*display: flex;*/
}
.swiper-button-next {
    color: black;
}
.swiper-button-prev {
    color: black;
}
.product-swiper-container {
    /*width: 100%;*/
    /*height: 100%;*/
}

.product-swiper-slide {
}

.add-to-cart-quantity-icons {
    width: 20px;
    display: inline-block;
}
.hidden-quantity-icon {
    display: none;
}

.reveal-password-register-page {
    height: 20px;
    width: 20px;
    display: inline-block;
    position: absolute;
    top: 10px;
    right: 10px;
}
.reveal-password-register-page-ar {
    height: 20px;
    width: 20px;
    display: inline-block;
    position: absolute;
    top: 10px;
    left: 10px;
}

.reveal-password-profile-page {
    height: 20px;
    width: 20px;
    display: inline-block;
    position: absolute;
    top: 45px;
    right: 10px;
}
.reveal-password-profile-page-ar {
    height: 20px;
    width: 20px;
    display: inline-block;
    position: absolute;
    top: 45px;
    left: 10px;
}


.logo-gallery-container-mobile {
    display: flex;
}
.logo-gallery-container-desktop {
    display: none;
}
.logo-gallery-image {
    object-fit: scale-down;
    display: inline-block;
}

.show-without-hover {
    display: inline-block;;
}
.show-on-hover {
    display: none;
}

#forbes {
    height: 30px;
}
#fta {
    height: 30px;
}
#hia {
    height: 30px;
}
#nawa {
    height: 30px;
}
#entre {
    height: 30px;
}
#vogue {
    height: 30px;
}
#marie {
    height: 30px;
}

@media screen and (min-width: 767px) {
    #forbes {
        height: 70px;
    }
    #fta {
        height: 70px;
    }
    #hia {
        height: 70px;
    }
    #nawa {
        height: 70px;
    }
    #entre {
        height: 70px;
    }
    #vogue {
        height: 70px;
    }
    #marie {
        height: 70px;
    }
}
@media screen and (min-width: 1400px) {
    .logo-gallery-container-mobile {
        display: none;
    }
    .logo-gallery-container-desktop {
        display: flex;
    }
}

.active-variant-selector {
    outline: 2px solid black;
    outline-offset: 3px;
}
.active-variant-selector:focus {
    outline: 2px solid black;
    outline-offset: 3px;
}

/* Glitch the Page loading with animation as per Sheikh Saab Request */
body{
    animation-name: pageLoad;
    animation-duration: 1s;
    animation-timing-function: ease-in;
}
.header-transition {
    animation-name: headerTrasnition;
    animation-duration: 200ms;
    animation-timing-function: ease-in;
}

@keyframes pageLoad {
    from {opacity: 0;}
    to {opacity: 1;}
}
@keyframes headerTrasnition {
    from {opacity: 0.5;}
    to {opacity: 1;}
}

.progress-bar {
    border: 1px solid white;
    height: 5px;
    background-color: #6B7280;
}
.progress-bar-active {
    background-color: black;
}

/* Utilities */
.w-200px {
    width: 200px;
}
.btn-disabled {
    background-color: lightgray;
    opacity: 0.6;
    cursor: not-allowed;
}
.active-thumbnail {
    outline: 2px solid black;
}
.min-h-90 {
    min-height: 90vh;
}
.text-end {
    text-align: end;
}
.text-start {
    text-align: start;
}
.fuck-box-shadow {
    box-shadow: none;
}
.fuck-box-shadow:focus {
    box-shadow: none;
}
.border-unset {
    border-color: unset;
}
.border-unset-on-focus:focus {
    border-color: unset;
}
.w-20px {
    width: 20px;
}
.h-20px {
    height: 20px;
}
.w-45px {
    width: 45px;
}
.w-55px {
    width: 55px;
}
.h-55px {
    height: 55px;
}
.w-75px {
    width: 75px;
}
.w-250px {
    width: 250px;
}
.w-35 {
    width: 35%;
}
.w-125 {
    width: 125%;
}
.discount-strikethrough-color {
    text-decoration-color: #FF6767;
}
.mr-10px {
    margin-right: 10px;
}
.ml-10px {
    margin-left: 10px;
}
@media screen and (min-width: 767px) {
    .mr-10px {
        margin-right: 40px;
    }
    .ml-10px {
        margin-left: 40px;
    }
}
.mr-20px {
    margin-right: 20px;
}
.ml-20px {
    margin-left: 20px;
}

button:focus {
    outline: none;
}