/* general header styles */
:root {
    --header: 76px;
    --white: #ffffff;
    --soft-white: #fffdfb;
}

@media (max-width: 1023.9px) {
    :root {
        --header: 56px;
        --turquoise: #00d1d2;
    }
}

.border-t {
    border-top-width: 1px;
    border-style: solid;
}

.border-tints-15 {
    border-color: rgb(225 224 226);
}

.pd-b-5 {
    padding-bottom: 20px;
}

.pd-t-2 {
    padding-top: 8px;
}

.mn-t-1 {
    margin-top: 4px;
}

.mn-b-1 {
    margin-bottom: 4px;
}

.mn-t-6 {
    margin-top: 24px;
}

.mn-t-8 {
    margin-top: 32px;
}

.mn-t-10 {
    margin-top: 40px;
}

.mn-y-8 {
    margin-top: 32px;
    margin-bottom: 32px;
}

.mn-x-8 {
    margin-left: 32px;
    margin-right: 32px;
}

.text-title-1 {
    font-size: 64px;
    line-height: 72px;
}

.text-title-2 {
    font-size: 64px;
    line-height: 72px;
}

.text-title-3 {
    font-size: 44px;
    line-height: 56px;
}

.text-title-4 {
    font-size: 42px;
    line-height: 56px;
}

.text-title-5 {
    font-size: 40px;
    line-height: 48px;
}

.text-title-6 {
    font-size: 36px;
    line-height: 44px;
}

.text-title-7 {
    font-size: 32px;
    line-height: 40px;
}

.text-title-8 {
    font-size: 28px;
    line-height: 36px;
}

.text-title-9 {
    font-size: 24px;
    line-height: 32px;
}

.text-title-10 {
    font-size: 20px;
    line-height: 24px;
}

.text-body-1 {
    font-size: 16px;
    line-height: 24px;
}

.text-body-2 {
    font-size: 14px;
    line-height: 20px;
}

@media (min-width: 768px) {
    .md\:text-title-9 {
        font-size: 24px;
        line-height: 32px;
    }
}

.font-bold {
    font-weight: 700;
    font-family: "Iqos-Bold", sans-serif;
}

.font-normal {
    font-weight: 400;
    font-family: "Iqos-Regular", sans-serif;
}

.font-bold {
    font-weight: 700;
    font-family: "Iqos-Bold", sans-serif;
}

.to-right {
    transform: translateX(-40px);
    opacity: 0;
    transition: transform 0.7s ease, opacity 0.5s ease;
}

.animated .to-right,
.header-iqos-menu.active .to-right,
.header-iqos-mobile.active .to-right {
    transform: translateX(0px);
    opacity: 1;
}

.to-top {
    transform: translateY(40px);
    opacity: 0;
    transition: transform 0.7s ease, opacity 0.5s ease;
}

.animated .to-top,
.header-iqos-menu-middle-item.active .to-top,
.header-iqos-moblie-menu-item.active .to-top {
    transform: translateY(0px);
    opacity: 1;
}

.header-iqos-moblie-menu-item .to-top {
    transition: transform 0s ease, opacity 0s ease;
}

.header-iqos-moblie-menu-item:not(.active) .to-top {
    transition-delay: 0s !important;
}

.header-iqos-moblie-menu-item.active .to-top {
    transition: transform 0.7s ease, opacity 0.5s ease;
}

.hover-effect {
    opacity: 0.6;
}

@media (max-width: 1023.9px) {
    .hover-effect {
        opacity: 1;
    }
}

.header-iqos-container {
    max-width: 1440px;
    margin: 0 auto;
    padding: 0 32px;
}

@media (min-width: 1024px) {
    .header-iqos-container {
        padding: 0 44px;
    }
}

@media (min-width: 1440px) {
    .header-iqos-container {
        padding: 0 64px;
    }
} 

.header-iqos {
    width: 100%;
    position: relative;
    z-index: 12;
    letter-spacing: normal;
}

.header-iqos .header-iqos-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    background-color: rgba(0, 0, 0, 0.8);
    opacity: 0;
    transition: all 0.6s cubic-bezier(0.3, 0, 0, 1);
    z-index: 2;
}

.header-iqos.header-iqos-show-dropdown .header-iqos-overlay {
    opacity: 1;
    pointer-events: all;
}

.header-iqos-content {
    width: 100%;
    background-color: var(--white);
    position: relative;
    z-index: 4;
}

.header-iqos-inner {
    display: flex;
    align-items: center;
    height: var(--header);
}

.header-iqos-row {
    width: 50%;
}

.header-iqos-list {
    display: flex;
    align-items: center;
}

.header-iqos-list li {
    display: block;
}

.header-iqos-row-end {
    display: flex;
    justify-content: flex-end;
}

.header-iqos-row-start .header-iqos-list li {
    margin: 0 20px 0 0;
}

.header-iqos-row-end .header-iqos-list li {
    margin: 0 0 0 24px;
}

.header-iqos-btn {
    display: flex;
    align-items: center;
    border: none;
    background-color: transparent;
    font-size: 14px;
    line-height: 20px;
    padding: 0;
    margin: 0;
    font-family: "Iqos-Regular", sans-serif;
    transition-property: opacity;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 300ms;
}

.header-iqos-btn.header-iqos-btn-active svg {
    transform: rotate(-180deg);
}

.header-iqos-btn svg {
    width: 16px;
    height: 16px;
    margin: 0 0 0 4px;
    transition-property: all;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 500ms;
}

.header-iqos.header-iqos-show-dropdown .header-iqos-btn,
.header-iqos.header-iqos-show-dropdown .header-iqos-link,
.header-iqos.header-iqos-show-dropdown .header-iqos-link-icon {
    opacity: 0.6;
}

.header-iqos.header-iqos-show-dropdown .header-iqos-btn.header-iqos-btn-active {
    opacity: 1;
}

.header-iqos.header-iqos-show-dropdown .header-iqos-btn:hover,
.header-iqos.header-iqos-show-dropdown .header-iqos-link:hover,
.header-iqos.header-iqos-show-dropdown .header-iqos-link-icon:hover {
    opacity: 1;
}

.header-iqos-link-icon svg {
    width: 24px;
    height: 24px;
    display: block;
}

.header-iqos-link {
    font-size: 14px;
    line-height: 20px;
    transition-property: opacity;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 300ms;
}

.header-iqos-link:hover {
    opacity: 1;
}

.header-iqos-logo {
    position: relative;
    width: 80px;
    height: 20px;
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

.header-iqos-logo-text {
    position: absolute;
    width: 80px;
    height: 20px;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    transition: all 0.6s ease;
}

.header-iqos-logo-active .header-iqos-logo-text {
    opacity: 0;
}

.header-iqos-logo-text .logo_letter {
    transition: all 0.6s cubic-bezier(0.3, 0, 0, 1);
}

.header-iqos-logo-text .logo_letter_first {
    transform: translateX(0);
}

.header-iqos-logo-text .logo_letter_second {
    transform: translateX(18px);
}

.header-iqos-logo-text .logo_letter_third {
    transform: translateX(86px);
}

.header-iqos-logo-text .logo_letter_fourth {
    transform: translateX(152px);
}

.header-iqos-logo-active .header-iqos-logo-text .logo_letter_first {
    transform: translateX(35%);
    opacity: 0;
}

.header-iqos-logo-active .header-iqos-logo-text .logo_letter_second {
    transform: translateX(20%);
    opacity: 0;
}

.header-iqos-logo-active .header-iqos-logo-text .logo_letter_third {
    transform: translateX(50%);
    opacity: 0;
}

.header-iqos-logo-active .header-iqos-logo-text .logo_letter_fourth {
    transform: translateX(50%);
    opacity: 0;
}

.header-iqos-logo-icon {
    position: absolute;
    display: block;
    width: 40px;
    height: 40px;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    opacity: 0;
    transition: all 0.6s ease;
    transition-delay: 0.1s;
}

.header-iqos-logo-icon svg {
    width: 40px;
    height: 40px;
}

.header-iqos-logo-active .header-iqos-logo-icon {
    opacity: 1;
    transition-delay: 0;
}

.header-iqos-burger {
    display: none;
}

@media (max-width: 1023.9px) {
    .header-iqos-burger {
        display: block;
    }

    .header-iqos-burger {
        position: relative;
        display: block;
        width: 24px;
        height: 14px;
        background-color: transparent;
        border: none;
    }

    .header-iqos-burger::after,
    .header-iqos-burger::before {
        content: "";
        position: absolute;
        left: 0;
        width: 100%;
        height: 2px;
        background-color: #34303d;
    }

    .header-iqos-burger::before {
        top: 0;
    }

    .header-iqos-burger::after {
        bottom: 0;
    }

    .header-iqos-row-start .header-iqos-list li {
        display: none;
    }

    .header-iqos-row-end .header-iqos-list li:not(:last-child) {
        display: none;
    }

    .header-iqos .header-iqos-overlay {
        display: none;
    }

    .header-iqos.header-iqos-show-dropdown .header-iqos-btn,
    .header-iqos.header-iqos-show-dropdown .header-iqos-link,
    .header-iqos.header-iqos-show-dropdown .header-iqos-link-icon {
        opacity: 1;
    }
}

/* general header styles end */

/* header iqos dropdown */

.header-iqos-menu {
    position: absolute;
    left: 0;
    top: var(--header);
    width: 100%;
    background-color: var(--soft-white);
    transform: translateY(calc(-100% - var(--header)));
    transition-property: all;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 500ms;
    z-index: 3;
    padding: 56px 0 76px 0;
    max-height: calc(100vh - var(--header));
}

.header-iqos-menu.active {
    transform: translateY(0);
}

.header-iqos-menu-inner {
    display: flex;
    overflow-y: auto;
    max-height: calc(100vh - var(--header) - 132px);
    scrollbar-width: none;
}

.header-iqos-menu-inner::-webkit-scrollbar {
    width: 10px;
    display: none;
}

.header-iqos-menu-inner::-webkit-scrollbar-track {
    border: 0px solid rgba(0, 0, 0, 0);
    background-color: #f4f4f4;
    border-right: 8px white solid;
    border-bottom-right-radius: 20px;
    border-top-right-radius: 20px;
    width: 2px;
}

.header-iqos-menu-inner::-webkit-scrollbar-thumb {
    background: #c4c4c4;
    border-radius: 20px;
    border-right: 8px white solid;
    border-top: 5px white solid;
    border-bottom: 5px white solid;
    width: 2px;
}

.header-iqos-menu-info {
    width: 396px;
}

.header-iqos-menu-middle {
    width: 292px;
}

.header-iqos-menu-preview {
    max-width: 512px;
    width: 40%;
    margin-left: auto;
}

@media (max-width: 1300px) {
    .header-iqos-menu-preview {
        width: 40%;
        padding: 0 0 0 30px;
    }
}

.header-iqos-menu-list li:not(:last-child) {
    margin: 0 0 32px 0;
}

.header-iqos-menu-link {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.header-iqos-menu-link-top {
    padding: 0 0 4px 0;
    margin: 0 0 4px 0;
}

.header-iqos-menu-link-description {
    font-size: 16px;
    line-height: 24px;
    font-family: "Iqos-Regular", sans-serif;
}

.header-iqos-menu-link-title {
    font-size: 28px;
    line-height: 36px;
    font-family: "Iqos-Bold", sans-serif;
    position: relative;
    padding: 0 0 4px 0;
}

.header-iqos-menu-link-title::before {
    content: "";
    position: absolute;
    bottom: 0px;
    height: 4px;
    width: 0px;
    transition-property: all;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 500ms;
    background-color: var(--turquoise);
}

.header-iqos-menu-link:hover .header-iqos-menu-link-title::before {
    width: 100%;
}

.header-iqos-menu-link-top {
    display: flex;
}

.header-iqos-menu-link-right-icon {
    width: 24px;
    height: 24px;
    padding: 0 0 0 8px;
    flex-shrink: 0;
    transform: translateY(calc(18px - 50%));
}

.header-iqos-menu-link-preview {
    width: 54px;
}

.header-iqos-menu-middle-list li:not(:last-child) {
    margin: 0 0 32px 0;
}

.header-iqos-menu-middle-link {
    display: flex;
    align-items: flex-start;
}

.header-iqos-menu-middle-link-article {
    padding: 0 20px 0 0;
}

.header-iqos-menu-middle-link-title {
    font-size: 28px;
    line-height: 36px;
    font-family: "Iqos-Bold", sans-serif;
    margin: 0 0 4px 0;
}

.header-iqos-menu-middle-list-mini {
    margin: 48px 0 0 0;
}

.header-iqos-menu-middle-list-mini li:not(:last-child) {
    margin: 0 0 24px 0;
}

.header-iqos-menu-middle-list-mini li a {
    font-size: 16px;
    line-height: 24px;
    font-family: "Iqos-Regular", sans-serif;
}

.header-iqos-menu-middle-link-preview {
    width: 32px;
}

.header-iqos-menu-middle-link-description {
    font-size: 16px;
    line-height: 24px;
}

.header-iqos-menu-middle-item {
    visibility: hidden;
    pointer-events: none;
}

.header-iqos-menu-middle-item.active {
    visibility: initial;
    pointer-events: all;
}

.header-iqos-banner {
    display: none;
    flex-direction: column;
}

.header-iqos-banner.active {
    display: flex;
}

.header-iqos-banner-img {
    width: 100%;
    margin: 0 0 32px 0;
}

.header-iqos-banner-title {
    font-size: 28px;
    line-height: 36px;
    font-family: "Iqos-Bold", sans-serif;
    margin: 0 0 4px 0;
}

.header-iqos-banner-description {
    font-size: 16px;
    line-height: 24px;
    font-family: "Iqos-Regular", sans-serif;
}

@media (max-width: 1023.9px) {
    .header-iqos-dropdown {
        display: none;
    }
}

/* header iqos dropdown end */

/* header mobile start */
.header-iqos-mobile {
    position: fixed;
    z-index: 4;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
    pointer-events: none;
    visibility: hidden;
}

.header-iqos-mobile.active {
    pointer-events: all;
    visibility: visible;
}

.header-iqos-mobile-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    opacity: 0;
    visibility: hidden;
    background-color: rgba(0, 0, 0, 0.8);
    transition: all 0.6s cubic-bezier(0.3, 0, 0, 1);
    z-index: 1;
    pointer-events: none;
}

.header-iqos-mobile.active .header-iqos-mobile-overlay {
    opacity: 1;
    visibility: visible;
    pointer-events: all;
}

.header-iqos-mobile-inner {
    width: 50%;
    height: 100%;
    position: relative;
    z-index: 2;
    background-color: var(--soft-white);

    pointer-events: none;
    visibility: hidden;
    opacity: 0;
    transition-property: all;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 700ms;
    transform: translateX(-40px);
}

.header-iqos-mobile.active .header-iqos-mobile-inner {
    pointer-events: all;
    visibility: visible;
    opacity: 1;
    transform: translateX(0px);
}

.header-iqos-mobile-add {
    position: relative;
    z-index: 2;
}

.header-iqos-mobile-menu-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 32px;
    height: 56px;
    border-bottom: 1px solid rgb(229 231 235);
}

.header-iqos-mobile-back,
.header-iqos-mobile-close {
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    margin: 0;
    outline: none;
    border: none;
    background-color: transparent;
}

.header-iqos-mobile-back svg,
.header-iqos-mobile-close svg {
    width: 100%;
    height: 100%;
}

.header-iqos-mobile-back {
    visibility: hidden;
    pointer-events: none;
}

.header-iqos-mobile-back.active {
    visibility: visible;
    pointer-events: all;
}

.header-iqos-moblie-menu-item {
    padding: 0 32px;
    visibility: hidden;
    opacity: 0;
    transition-property: all;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 700ms;
}

.header-iqos-moblie-menu-item.active {
    opacity: 1;
    visibility: visible;
}

.header-iqos-moblie-menu-item.header-iqos-moblie-menu-item-right {
    position: fixed;
    right: 0;
    top: 0;
    height: 100%;
    width: 50%;
    background-color: #fbfaf8;
    padding: 56px 32px 76px 32px;
    overflow-y: auto;
}

.header-iqos-moblie-menu-item.header-iqos-moblie-menu-item-right.header-iqos-moblie-menu-item-with-slider {
    padding: 0;
}

.header-iqos-mobile-add-bg {
    position: fixed;
    right: 0;
    top: 0;
    height: 100%;
    width: 50%;
    background-color: #fbfaf8;
    z-index: -1;

    visibility: hidden;
    opacity: 0;
    transition-property: all;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 700ms;
}

.header-iqos-mobile-add-bg.active {
    opacity: 1;
    visibility: visible;
}

.header-iqos-moblie-menu-btn {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    background-color: transparent;
    padding: 0;
    border: none;
    outline: none;
    text-align: left;
}

.header-iqos-moblie-menu-btn svg {
    width: 24px;
    height: 24px;
}

.header-iqos-moblie-menu-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    background-color: transparent;
    padding: 0;
    border: none;
    outline: none;
    text-align: left;
}

.header-iqos-moblie-menu-link svg {
    width: 24px;
    height: 24px;
}

.header-iqos-mobile-menu-link-preview {
    width: 100%;
}

.header-iqos-mobile-menu-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 20px 32px;
    position: absolute;
    bottom: 0;
    left: 0;
}

.header-iqos-mobile-btn {
    box-sizing: border-box;
    display: inline-flex;
    border-radius: 24px;
    border-width: 2px;
    --tw-border-opacity: 1;
    border-color: rgb(52 48 61 / var(--tw-border-opacity));
    padding-left: 24px;
    padding-right: 24px;
    padding-top: 10px;
    padding-bottom: 10px;
    text-align: center;
    --tw-text-opacity: 1;
    color: rgb(255 253 251 / var(--tw-text-opacity));
    outline: 2px solid transparent;
    outline-offset: 2px;
    transition-property: all;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
    --tw-bg-opacity: 1;
    background-color: rgb(52 48 61 / var(--tw-bg-opacity));
    --tw-current-bg-color: rgb(52 48 61 / var(--tw-bg-opacity));
    font-size: 16px;
    line-height: 24px;
}

.header-iqos-mobile-btn:hover {
    --tw-border-opacity: 1;
    border-color: rgb(0 209 210 / var(--tw-border-opacity));
    --tw-text-opacity: 1;
    color: rgb(52 48 61 / var(--tw-text-opacity));
    outline: 2px solid transparent;
    outline-offset: 2px;
    --tw-bg-opacity: 1;
    background-color: rgb(0 209 210 / var(--tw-bg-opacity));
    --tw-current-bg-color: rgb(0 209 210 / var(--tw-bg-opacity));
}

.header-iqos-lang {
    position: relative;
}

.header-iqos-lang-current {
    display: flex;
    align-items: center;
}

.header-iqos-lang-current svg {
    width: 24px;
    height: 24px;
    transform: rotate(0);
    transition-property: transform;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 300ms;
}

.header-iqos-lang.active .header-iqos-lang-current svg {
    transform: rotate(180deg);
}

.header-iqos-lang-modal {
    position: absolute;
    box-shadow: 0 0 50px 0 rgba(0, 0, 0, 0.1);
    background-color: var(--soft-white);
    transition-property: all;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 500ms;
    left: 0px;
    top: 0;
    transform: translateY(-88px);
    opacity: 0;
    visibility: hidden;
    border-radius: 0.25rem;
    overflow: hidden;
}

.header-iqos-lang.active .header-iqos-lang-modal {
    transform: translateY(-108px);
    opacity: 1;
    visibility: visible;
}

.heaer-iqos-lang-modal-item {
    padding: 12px 24px;
    transition-duration: 300ms;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-property: color, background-color, border-color,
        text-decoration-color, fill, stroke, -webkit-text-decoration-color;
    background-color: var(--soft-white);
    text-align: center;
}

.heaer-iqos-lang-modal-item:hover {
    background-color: rgb(243 244 246);
}

.heaer-iqos-lang-modal-item:not(:last-child) {
    border-bottom: 1px solid rgb(225 224 226);
}

.header-iqos-mobile-menu-slider.swiper {
    padding-left: 32px;
    height: fit-content;
    margin-top: 56px;
}

.header-iqos-mobile-menu-slider .swiper-slide a {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.header-iqos-mobile-menu-slider .swiper-slide img {
    width: 100px;
    height: 80px;
    object-fit: cover;
}

@media (min-width: 1024px) {
    .header-iqos-mobile {
        display: none;
    }
}

@media (max-width: 767px) {
    .header-iqos-mobile-inner {
        width: 100%;
    }

    .header-iqos-moblie-menu-item.header-iqos-moblie-menu-item-right {
        width: 100%;
        background-color: var(--soft-white);
        padding: 8px 32px 76px 32px;
        top: 56px;
    }

    .header-iqos-mobile-add-bg,
    .header-iqos-mobile-add-bg.active {
        display: none;
    }

    .header-iqos-mobile-menu-slider.swiper {
        margin-top: 0;
    }

    .header-iqos-mobile-menu-slider .swiper-slide img {
        width: 100px;
        height: 140px;
    }

    .header-iqos-moblie-menu-item.header-iqos-moblie-menu-item-right.header-iqos-moblie-menu-item-with-slider {
        padding: 0 0 72px 0;
    }

    .header-iqos-mobile-menu-content {
        /* minus footer header elements height */
        max-height: calc(100% - 56px - 84px);
        overflow-y: auto;
    }
}


.header-iqos-option-lang select {
    border: none;
    font-size: 14px;
    line-height: 20px;
    letter-spacing: 0.4px;
    font-family: "Iqos-Regular", sans-serif;
}