@import url('https://fonts.googleapis.com/css2?family=Geist:wght@100..900&display=swap');
/****header css *********/
@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,200..800&family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&family=Geist:wght@100..900&family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');

body {
    font-family: "Geist", sans-serif !important;

}

.pageflows-header {
    position: fixed; /* Keep the navbar fixed at the top */
    top: 0; /* Start at the top */
    left: 0;
    right: 0;
    background-color: #18181B; /* Background color */
    color: white; /* Text color */
    padding: 30px 40px; /* Padding */
    transition: top 0.9s ease, opacity 0.9s ease; /* Smooth transition for top and opacity */
    opacity: 1; /* Start fully visible */
    z-index: 1000; /* Ensure it stays on top */

}

/* Keyframe animations for attractive effects */
@keyframes slideDown {
    0% {
        top: -60px; /* Start above the view */
        opacity: 0; /* Start invisible */
    }
    50% {
        opacity: 0.5; /* Midway opacity */
    }
    100% {
        top: 0; /* End at the top */
        opacity: 1; /* Fully visible */
    }
}

@keyframes slideUp {
    0% {
        top: 10px; /* Start at the top */
        opacity: 1; /* Start fully visible */
    }
    50% {
        opacity: 0.5; /* Midway opacity */
    }
    100% {
        top: -60px; /* Move the navbar up out of view */
        opacity: 0; /* Fade out */
    }
}

.pageflows-header.hidden {
    animation: slideUp 1.5s linear forwards; /* Faster hiding animation */
}

.pageflows-header.visible {
    animation: slideDown 0.3s ease forwards; /* Slide down animation */
}

.pageflows-header-main {
    display: flex;
    align-items: center;
    gap: 20px;
    flex: 0 0 34%;
}

.pageflows-header-nav {
    justify-content: center;
    display: flex;
    flex: 0 0 33%;
}

.pageflows-header-right-menu {
    flex: 0 0 33%;
    display: flex;
    justify-content: flex-end;
}

.pageflows-header-nav ul {
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #3F3F46;
    padding: 5px;
    border-radius: 10px;
    background: #27272A;
}

.pageflows-header-right-menu ul {
    display: flex;
    align-items: center;
    gap: 15px;
}

.pageflows-header-container {
    display: flex;
    align-items: center;
    box-sizing: border-box;
}

.pageflows-header-right-menu ul .user-dropdown {
    position: absolute;
    right: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 0px;
    gap: 0px;
    top: 60px;
    width: max-content;
    overflow: hidden;
    transition: height 0.5s ease;
    height: 0;
    opacity: 0;
    visibility: hidden;
    transition: .3s;
    z-index: 2;
    box-sizing: border-box;
    background: #27272A;
    border: 1px solid #3F3F46;
    box-shadow: 10px 4px 54px rgba(0, 0, 0, 0.65);
    border-radius: 10px;
}

.pageflows-header-right-menu ul .user-dropdown.open {
    height: auto;
    transition: height 0.5s ease;
    opacity: 1;
    visibility: visible;
}

.pageflows-searchbar {
    display: grid;
    grid-template-columns: 0.7fr 11fr;
    align-items: center;
    padding: 0px 0 0 16px;
    gap:10px;
    height: 48px;
    background: #27272A;
    border-radius: 10px;
    border: 1px solid #3F3F46;
    position: relative;
    transition: width 1s cubic-bezier(0.68, -0.55, 0.27, 1.55);
    width: 100%;
}

.pageflows-searchbar input {
    background: transparent;
    border: 0;
    padding: 0;
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    line-height: normal;
    color: #A1A1AA;
    height: 100%;
    padding-right: 16px;
    width: 100%;
}
.search-popup-content .pageflows-searchbar input {
    width: 78%;
}
.search-popup-content .pageflows-searchbar {
    display: flex;
}
.pageflows-searchbar svg path {
    fill: #A1A1AA !important;
}
.search-popup-content .pageflows-searchbar>svg path {
    fill: none !important;
}
.search-popup-content .pageflows-searchbar form {
    width: 100%;
}
.pageflows-searchbar input:focus {
    outline: none;
    box-shadow: none;
}

.pageflows-searchbar input::placeholder {
    color: #A1A1AA;
}

.pageflows-header-nav ul li a {
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 21px;
    display: flex;
    align-items: center;
    text-align: center;
    letter-spacing: -0.5px;
    color: #A1A1AA;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 10px 15px;
    height: 40px;
    border-radius: 10px;
    font-family: "Geist", sans-serif;
}

.pageflows-header-nav ul li.active a {
    font-weight: 600;
}

.pageflows-header-nav ul li a:hover,
.pageflows-header-nav ul li.active a {
    background: #F4F4F5;
    color: #0B0B0D;
}

.pageflows-header-right-menu ul li.get-premium-menu a {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 0 15px;
    gap: 10px;
    height: 35px;
    background: #4DC2F4;
    border-radius: 20px;
    font-style: normal;
    font-weight: 700;
    font-size: 12px;
    line-height: 15px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: #FFFFFF;
}

.team-signup-page .pageflows-header-bottom-nav {
    display: none;
}

.highlight {
    color: #201f1f;
    fill: #201f1f !important;
}

.pageflows-logo {
    width: 30px;
    flex: 0 0 25px;
}

.get-premium-menu {
    padding: 0 15px;
    gap: 10px;
    height: 48px;
    background: #FEF08A;
    border-radius: 10px;
    font-style: normal;
    font-weight: 600;
    font-size: 14px;
    line-height: 17px;
    display: flex;
    align-items: center;
    text-align: center;
    letter-spacing: -0.5px;
    color: #0B0B0D;
}

.signin-button a {
    font-style: normal;
    font-weight: 600;
    font-size: 16px;
    line-height: 20px;
    display: flex;
    align-items: center;
    text-align: center;
    letter-spacing: -0.5px;
    color: #FAFAFA;
}

.userflow-menu ul li a {
    font-style: normal;
    font-weight: 400;
    font-size: 20px;
    line-height: 28px;
    display: flex;
    align-items: center;
    letter-spacing: -1px;
    color: #A1A1AA;
    padding: 10px 15px;
    border-radius: 10px;
    cursor: pointer;
}

.signin-button a:hover {
    color: #FEF08A;
}

.pageflows-header-right-menu ul li .get-blog-menu a,
.right-menus .get-blog-menu a {
    transition: .3s;
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    font-style: normal;
    font-weight: 600;
    font-size: 16px;
    line-height: 21px;
    display: flex;
    align-items: center;
    text-align: center;
    letter-spacing: -0.5px;
    color: #D4D4D8;
}

.pageflows-header-right-menu ul li .get-blog-menu a:hover,
.right-menus .get-blog-menu a:hover {
    color: #FEF08A;
}

.pageflows-header-right-menu ul li a {
    font-style: normal;
    font-weight: 700;
    font-size: 12px;
    line-height: 15px;
    color: #FEF08A;
}

.pageflows-header-right-menu ul .user-dropdown li a {
    padding: 0;
    gap: 10px;
    width: 100%;
    font-style: normal;
    font-weight: 700;
    font-size: 16px;
    line-height: 24px;
    display: flex;
    align-items: center;
    letter-spacing: -0.5px;
    color: #FFFFFF;
}

.user-login-menu {
    cursor: pointer;
    position: relative;
    display: flex;
    gap: 15px;
}

.pageflows-header-right-menu ul .user-login-menu img {
    border-radius: 10px;
    height: 40px;
    width: 40px;
}

.pageflows-header-right-menu ul .user-login-menu .user-initials {
    border-radius: 10px;
    height: 40px;
    width: 40px;
}

.pageflows-header-right-menu ul .user-dropdown li.user-image-box .user-details {
    gap: 0;
    text-align: left;
    font-style: normal;
    font-weight: 700;
    font-size: 16px;
    line-height: 24px;
    display: flex;
    letter-spacing: -0.5px;
    color: #FFFFFF;
}

.pageflows-header-right-menu ul .user-dropdown li.user-image-box .user-details p {
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    line-height: 20px;
    color: #A1A1AA;
}

.pageflows-header-right-menu ul .user-dropdown li {
    width: 100%;
    padding: 10px 20px;
}

.pageflows-header-right-menu ul .user-dropdown li.user-image-box {
    display: flex;
    gap: 20px;
    align-items: center;
}

.userflow-menu ul li.userflow-menu-dropdown {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0;
    gap: 20px;
    position: relative;
    cursor: pointer;
    font-family: 'Geist';
    font-style: normal;
    font-weight: 600;
    font-size: 30px;
    line-height: 40px;
    letter-spacing: -1px;
    color: #FAFAFA;
}

.userflow-menu {
    display: flex;
    align-items: center;
    gap: 20px;
}
.all-product-a-z-left .userflow-menu {
    display: block;
}
.userflow-menu ul {
    display: flex;
    align-items: center;
    gap: 15px;
}

.userflow-menu ul li.active a {
    background: #F4F4F5;
    color: #0B0B0D;
    font-weight: 600;
}

.userflow-menu ul li a:hover {
    background: #F4F4F5;
    color: #0B0B0D;
}

.userflow-right-menu ul {
    display: flex;
    align-items: center;
    gap: 20px;
}
.userflow-menu ul ul, .userflow-right-menu .userflow-right-dropdown {
    position: absolute;
    left: 0;
    top: 30px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    padding: 24px;
    gap: 16px;
    border-radius: 12px;
    overflow: hidden;
    transition: height 0.5s ease;
    height: 0;
    opacity: 0;
    visibility: hidden;
    transition: .3s;
    z-index: 1;
    margin-top: 10px;
    box-sizing: border-box;
    background: #27272A;
    border: 1px solid #3F3F46;
    box-shadow: 10px 4px 54px rgba(0, 0, 0, 0.65);
    border-radius: 10px;
    width: 250px;
}
.all-products-block-inner {
    padding: 60px 0 0;
}

.userflow-menu ul ul.open,
.userflow-right-menu .userflow-right-dropdown.open {
    height: auto;
    transition: height 0.5s ease;
    opacity: 1;
    visibility: visible;
}

.userflow-menu ul ul li a {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 8px 16px;
    gap: 10px;
    height: 31px;
    background: #F1F1F1;
    border-radius: 20px;
    font-style: normal;
    font-weight: 700;
    font-size: 12px;
    line-height: 15px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: #000000;
    width: 100%;
    transition: .3s;
}

.userflow-right-menu .userflow-right-dropdown li a {
    padding: 0;
    transition: .3s;
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 20px;
    text-align: center;
    letter-spacing: -0.5px;
    color: #F4F4F5;
}

.userflow-menu ul ul li,
.userflow-right-menu .userflow-right-dropdown li {
    width: 100%;
    cursor: pointer;
}

.userflow-right-menu .userflow-right-dropdown li input {
    padding: 0;
    height: initial;
    width: initial;
    margin-bottom: 0;
    display: none;
    cursor: pointer;
}

.userflow-right-menu .userflow-right-dropdown li label {
    display: flex;
    position: relative;
    cursor: pointer;
    align-items: center;
    gap: 5px;
}

.userflow-right-menu .userflow-right-dropdown li input:checked+label:before {
    background: #fff;
}

.userflow-right-menu ul .userflow-right-dropdown-open {
    position: relative;
    cursor: pointer;
    box-sizing: border-box;
    justify-content: center;
    padding: 14px 12px;
    gap: 10px;
    height: 48px;
    background: #27272A;
    border: 1px solid #3F3F46;
    border-radius: 10px;
    font-style: normal;
    font-weight: 600;
    font-size: 16px;
    line-height: 20px;
    display: flex;
    align-items: center;
    text-align: center;
    letter-spacing: -0.5px;
    color: #D4D4D8;
}

.userflow-right-menu .userflow-right-dropdown {
    top: 50px;
    left: auto;
    right: 0px;
}

.filter-dropdown {
    cursor: pointer;
    box-sizing: border-box;
    justify-content: center;
    padding: 14px 12px;
    gap: 10px;
    height: 48px;
    background: #27272A;
    border: 1px solid #3F3F46;
    border-radius: 10px;
    font-style: normal;
    font-weight: 600;
    font-size: 16px;
    line-height: 20px;
    display: flex;
    align-items: center;
    text-align: center;
    letter-spacing: -0.5px;
    color: #D4D4D8;
}

.app-type .selected-box {
    cursor: pointer;
    box-sizing: border-box;
    padding: 10px 34px 10px 15px;
    gap: 10px;
    background: #27272A;
    border: 1px solid #3F3F46;
    border-radius: 10px;
    height: 48px;
    font-style: normal;
    font-weight: 600;
    font-size: 16px;
    line-height: 21px;
    display: flex;
    align-items: center;
    text-align: left;
    letter-spacing: -0.5px;
    color: #D4D4D8;
    position: relative;
}

.app-type .selected-box svg {
    position: absolute;
    right: 10px;
}

li.app-type {
    position: relative;
}

.app-type .dropdown {
    margin-top: 10px;
    display: none;
    box-sizing: border-box;
    position: absolute;
    background: #27272A;
    border: 1px solid #3F3F46;
    box-shadow: 10px 4px 54px rgba(0, 0, 0, 0.65);
    border-radius: 10px;
    width: max-content;
    right: 0px;
}

.app-type .dropdown label {
    position: relative;
    cursor: pointer;
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 20px;
    display: flex;
    align-items: center;
    text-align: center;
    letter-spacing: -0.5px;
    color: #F4F4F5;
    gap: 5px;
}

.app-type .dropdown label:before {
    content: '';
    -webkit-appearance: none;
    padding: 10px;
    display: inline-block;
    position: relative;
    vertical-align: middle;
    cursor: pointer;
    margin-right: 5px;
    box-sizing: border-box;
    width: 19px;
    height: 19px;
    background: #27272A;
    border: 1px solid #3F3F46;
    border-radius: 5px;
}

.app-type input:checked+label:after {
    content: '';
    display: block;
    position: absolute;
    top: 5px;
    left: 8px;
    width: 6px;
    height: 10px;
    border: solid #27272a;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.app-type input:checked+label:before {
    background: #fff;
}

.app-type input[type="checkbox"] {
    padding: 0;
    height: initial;
    width: initial;
    margin-bottom: 0;
    display: none;
    cursor: pointer;
}

.appsearchBar {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 5px 10px;
    position: relative;
    border-bottom: 1px solid #3F3F46;
}

.appsearchBar input#searchBar2 {
    width: 100%;
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 21px;
    letter-spacing: -0.5px;
    color: #F4F4F5;
    padding: 0 10px 0 35px;
    height: 40px;
    background: transparent;
    border: 0px;
}
div#noResultsMessage {
    color: #fff;
    text-align: center;
}
.appsearchBar svg {
    position: absolute;
    left: 20px;
}

.appsearchBar input#searchBar2:focus {
    outline: none;
    box-shadow: none;
}

.appNameoption {
    display: flex;
    flex-flow: column;
    gap: 10px;
    padding: 15px;
    max-height: 255px;
    overflow-y: scroll;
    padding-bottom: 60px;
}

.userflow-menu ul.main-navbar li a {
    font-style: normal;
    font-weight: 700;
    font-size: 12px;
    line-height: 15px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #000000;
    transition: .3s;
    position: relative;
}



.main-navbar-menus ul.main-navbar .filter-active {
    box-sizing: border-box;
    flex-direction: row;
    justify-content: center;
    gap: 10px;
    height: 48px;
    background: #27272A;
    border: 1px solid #3F3F46;
    border-radius: 100px;
    font-style: normal;
    font-weight: 600;
    font-size: 16px;
    line-height: 20px;
    display: flex;
    align-items: center;
    text-align: center;
    letter-spacing: -0.5px;
    color: #D4D4D8;
    padding: 0 15px;
}

.main-navbar-menus ul.main-navbar .filter-active a {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #4DC2F4;
}

.main-navbar-menus ul.main-navbar .filter-active .hide-filter-tag {
    display: block;
}

.main-navbar-menus ul.main-navbar .filter-active a:hover:after {
    display: none;
}

.pageflows-header-bottom-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 30px 0 0;
}

.userflow-menu ul.main-navbar li a:hover,
.userflow-menu ul.main-navbar li.active a {
    color: #4DC2F4;
    transition: .3s;
}

.userflow-menu ul.main-navbar li a:after {
    content: "";
    width: 6px;
    height: 6px;
    background: #4DC2F4;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    border-radius: 100%;
    top: -10px;
    transition: .3s;
    opacity: 0;
    visibility: hidden;
}

.userflow-menu ul.main-navbar li a:hover:after,
.userflow-menu ul.main-navbar li.active a:after {
    opacity: 1;
    visibility: visible;
    transition: .3s;
}

li.back-btn a {
    display: flex;
    align-items: center;
    gap: 5px;
}

li.back-btn a svg {
    fill: #000;
}

li.back-btn a:hover svg {
    fill: #4DC2F4;
    transition: .3s;
}

.filter-main-search {
    display: flex;
    align-items: center;
    padding: 12px 16px;
    gap: 12px;
    height: 48px;
    background: #F1F1F1;
    border-radius: 24px;
    width: 100%;
}

.filter-main-search input {
    border: 0;
    width: 100%;
    background: transparent;
    padding: 0;
    height: 100%;
    font-style: normal;
    font-weight: 400;
    font-size: 18px;
    line-height: normal;
    color: #000000;
}

.filter-main-search input:focus {
    outline: none;
    box-shadow: none;
}

.filter-userflow-search {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 20px;
}

svg.close-filter {
    cursor: pointer;
}

.filter-navbar-main {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    padding: 20px;
    background: #FFFFFF;
    border-top: 1px solid #DCDADA;
    border-bottom: 1px solid #DCDADA;
    justify-content: space-between;
}

.filter-navbar-main ul {
    display: flex;
    align-items: center;
    gap: 15px;
}

.filter-navbar-main ul li a {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 8px 16px;
    gap: 10px;
    background: #F1F1F1;
    border-radius: 20px;
    font-style: normal;
    font-weight: 700;
    font-size: 12px;
    line-height: 15px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: #000000;
    transition: .3s;
}

.filter-navbar-main ul li a:hover,
.filter-navbar-main ul li.active a,
.pageflows-header-right-menu ul .user-dropdown li a:hover,
.pageflows-header-right-menu ul .user-dropdown li.active a {
    color: #FEF08A;
    transition: .3s;
}

.pageflows-header-right-menu ul .user-dropdown li.theme-setting {
    display: flex;
    flex-flow: column;
    gap: 10px;
    border-top: 1px solid #3f3f46;
    border-bottom: 1px solid #3f3f46;
    padding: 15px 20px;
    margin: 5px 0px;
}

.pageflows-header-right-menu ul .user-dropdown li.theme-setting label {
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    line-height: 17px;
    display: flex;
    align-items: center;
    letter-spacing: -0.5px;
    color: #A1A1AA;
}

.theme-setting-icon {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
}

.theme-setting-option {
    box-sizing: border-box;
    width: 69px;
    height: 69px;
    border: 1px solid #3F3F46;
    border-radius: 10px;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-flow: column;
    font-style: normal;
    font-weight: 400;
    font-size: 12px;
    line-height: 20px;
    color: #FFFFFF;
}

.theme-setting-option.active {
    background: #3F3F46;
}

.see-all-userflow a {
    display: flex;
    align-items: center;
    font-style: normal;
    font-weight: 700;
    font-size: 12px;
    line-height: 15px;
    text-align: center;
    letter-spacing: 0.2em;
    color: #FEF08A;
}

.userflow-product-filter-list {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
    height: 600px;
    overflow-y: scroll;
}

.userflow-product-filter-list.filters-list.usersFlow {
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
}

.userflow-product-filter-column {
    border-right: 1px solid #DCDADA;
}

.searchbar-menulist {
    position: fixed;
    z-index: 99999;
    padding: 0px;
    border-top: 1px solid #DCDADA;
    left: 0;
    right: 0;
    top: 0;
    filter: drop-shadow(0px 4px 16px rgba(0, 0, 0, 0.08));
    background: #fff;
    display: none;
}

.userflow-product-filter-column ul li:first-child a {
    font-style: normal;
    font-weight: 700;
    font-size: 12px;
    line-height: 15px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: #4DC2F4;
    display: block;
    padding: 30px 20px 20px;
}

.userflow-product-filter-column ul li a {
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    line-height: 20px;
    color: #000000;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 20px;
    transition: .3s;
}

.userflow-product-filter-column ul li a:hover {
    color: #FEF08A;
    transition: .3s;
    font-weight: 600;
}

.userflow-product-filter-column ul li:first-child a:hover {
    color: #4DC2F4;
    font-weight: 700;
}

.userflow-product-filter-list.products .userflow-product-filter-column ul li a,
.userflow-product-filter-list.screens .userflow-product-filter-column ul li a,
.userflow-product-filter-list.uiElements .userflow-product-filter-column ul li a {
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    line-height: 20px;
    color: #000000;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 20px;
    transition: .3s;
    text-transform: capitalize;
    letter-spacing: normal;
}

.userflow-product-filter-column ul li a span {
    font-style: normal;
    font-weight: 400;
    font-size: 12px;
    line-height: 16px;
    color: #AAAAAA;
}

.userflow-product-filter-column ul li.clickable-category a {
    background: #F1F1F1;
    font-weight: 700;
    color: #000;
}

li.signin-menu,
li.get-premium-menu {
    display: none;
}

.pageflows-header-right-menu ul li.blog-menu a {
    color: #000;
}

body.emails-page.header-fixed .searchbar-menulist,
body.ios-page.header-fixed .searchbar-menulist,
body.android-page.header-fixed .searchbar-menulist,
body.web-page.header-fixed .searchbar-menulist {
    left: -30px;
    right: -30px;
    top: -20px;
}

.footer-menu {
    display: flex;
    gap: 130px;
}
.footer-menu {
    display: flex;
}

.footer-menu ul {
    display: flex;
    gap: 30px;
    line-height: normal;
    align-items: center;
}
.footer-social-menu-main {
    display: flex;
}

.footer-menu ul li a {
    transition: .3s;
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    line-height: 20px;
    color: #FFFFFF;
}

.pageflows-footer-menu {
    display: flex;
    justify-content: space-between;
    background:#000000;
    padding: 30px;
}
.footer-copyright-text {
    background: rgba(48, 48, 55, 1);
    padding: 15px;
    text-align: center;
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    line-height: 20px;
    color: #A1A1AA;
    display: flex;
    align-items: center;
    gap: 10px;
    justify-content: center;
}
.footer-social-menu li a {
    background: rgba(63, 63, 70, 1);
    width: 35px;
    height: 35px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 40px;
    padding: 0px;
    transition: .3s;
}
/* All social icons container */
.footer-social-menu li a svg path,
.footer-social-menu li a svg rect,
.footer-social-menu li a svg circle {
  animation: pulse-line 2s infinite ease-in-out;
  transform-origin: center;
}

/* Staggered animation delay */
.footer-social-menu li:nth-child(1) svg path:nth-of-type(1) { animation-delay: 0s; }
.footer-social-menu li:nth-child(1) svg path:nth-of-type(2) { animation-delay: 0.3s; }
.footer-social-menu li:nth-child(1) svg path:nth-of-type(3) { animation-delay: 0.6s; }

/* Add same for others if SVG has multiple paths */
.footer-social-menu li:nth-child(2) svg path:nth-of-type(1) { animation-delay: 0s; }
.footer-social-menu li:nth-child(2) svg path:nth-of-type(2) { animation-delay: 0.3s; }

@keyframes pulse-line {
  0%, 100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.5;
    transform: scale(1.1);
  }
}

.footer-logo {
    display: flex;
    margin: 0 0;
}
.footer-logo-main p {
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    line-height: 20px;
    color: #fff;
}

.footer-logo-main ul {
    display: flex;
    align-items: center;
    gap: 15px;
    margin: 20px 0 0;
}

.footer-logo-main ul li a svg {
    fill: #aaa;
    transition: .3s;
}

.footer-logo-main ul li a:hover svg {
    fill: #FEF08A;
    transform: scale(1.1);
    transition: .3s;
}

.footer-logo-main ul li a {
    transition: .3s;
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    line-height: 20px;
    color: #FFFFFF;
    text-transform: capitalize;
}

.footer-terms-menu {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 60px 0 0;
}

.footer-terms-menu ul li a {
    font-style: normal;
    font-weight: 700;
    font-size: 12px;
    line-height: 15px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: #fff;
    transition: .3s;
}

ul.footer-social-menu {
    display: flex;
    align-items: center;
    justify-content: end;
    gap: 10px;
    flex-wrap: wrap;
}

.footer-terms-menu p {
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    line-height: 20px;
    text-align: right;
    color: #000000;
}

.footer-terms-menu ul li a:hover,
.footer-menu ul li a:hover,
.footer-terms-menu ul li.active a,
.footer-menu ul li.active a {
    color: #FEF08A;
    transition: .3s;
}

.userflow-product-logo {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.product-info {
    display: flex;
    gap: 10px;
    align-items: center;
}

/*
.product-name-text {
font-style: normal;
font-weight: 700;
font-size: 16px;
line-height: 20px;
letter-spacing: 0.2em;
color: #000000;
text-transform: uppercase;
} */
.product-name-text a {
    font-weight: 700;
    line-height: 24px;
    letter-spacing: -0.5px;
    text-align: left;
    color: #FFFFFF;
    font-size: 16px;
    font-family: "Geist", serif;
}

.products-tags span {
    letter-spacing: normal;
    text-transform: initial;
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    line-height: 20px;
    display: flex;
    align-items: center;
    color: #A1A1AA;
    display: none;
}
.products-tags span:first-child {
    display: block;
}

.products-tags {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
    text-align: left;
    color: #A1A1AA;
    font-family: "Geist", serif;
}
.app-type .selected-box.active {
    border-color: #fff;
}
.userflow-right-menu ul li.active {
    border-color: #fff;
}
.bookmark-main-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.product-view-like {
    display: flex;
    align-items: center;
    gap: 10px;
}
.search-results .product-view-like, .search-page .userflow-right-menu {
    display: none;
}

.search-results .product-view-like, .search-page .userflow-menu ul li.active a {
    font-style: normal;
    font-weight: 400;
    font-size: 20px;
    line-height: 28px;
    display: flex;
    align-items: center;
    letter-spacing: -1px;
    color: #A1A1AA;
    padding: 10px 15px;
    border-radius: 10px;
    cursor: pointer;
    background: none;
}

.search-results .product-view-like, .search-page .userflow-menu ul li a:hover {
    background: #F4F4F5;
    color: #0B0B0D;
}

.search-results .product-name-text {
    color: white;
    font-weight: 700;
    font-size: 16px;
    line-height: 24px;
    letter-spacing: -0.5px;
    font-family: 'Geist';
}
.product-view-like span {
    display: flex;
    align-items: center;
    gap: 7px;
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 20px;
    text-align: center;
    color: #AAAAAA;
}

.userflow-products {
    padding: 0 0 50px 0;
}

.pageflows-container {
    margin: 0 auto;
    max-width: 1420px;
    padding: 0 20px;
}

.userflow-products-main {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    gap: 40px 20px;
    padding: 0 ;
}
.products-screenshot-item .video-on-hover {
    display: none;
    height: 100%;
    width: 100%;
}

.products-screenshot-item .video-on-hover video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.user-product-lock-option {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    padding: 12px;
    cursor: pointer;
    display: flex;
    align-items: flex-start;
    gap: 10px;
}
.user-product-lock-option .updated-tag {
    width: 64px;
    height: 24px;
    background: #71717A;
    border-radius: 10px;
    font-style: normal;
    font-weight: 500;
    font-size: 14px;
    line-height: 20px;
    display: flex;
    align-items: center;
    color: #FFFFFF;
}
.user-product-lock-option .new-tag, .userflow-products-item span.new-tag {
    width: 38px;
    height: 24px;
    background: #FAFAFA;
    border-radius: 10px;
    font-style: normal;
    font-weight: 500;
    font-size: 14px;
    line-height: 20px;
    display: flex;
    align-items: center;
    color: #3F3F46;
}

.lock-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    background: #71717A;
    border-radius: 10px;
    padding: 4px;
}

.lock-icon svg {
    width: 20px;
    height: 20px;
}

.products-screenshot-item img {
    transition: .3s;
    cursor: pointer;
    border-radius: 15px;
    height: 100%;
    width: 100% !important;
    object-fit: cover;
    margin-bottom: 0;
}

.page-banner-text h1 {
    font-style: normal;
    font-weight: 600;
    font-size: 44px;
    line-height: 50px;
    text-align: left;
    color: #FAFAFA;
    letter-spacing: -1px;
    font-family: "Geist", serif;
}

.page-banner-text p {
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 26px;
    text-align: left;
    color: #A1A1AA;
    font-family: "Geist", serif;
}

.page-banner-text {
    padding: 0px 0 40px;
}

main.flex-grow,
body {
    background: #18181b !important;
}

.userflow-products-item {
    position: relative;
}
.products-screenshot-item-inner {
    position: relative;
}
.product-notpaid {
    display: flex;
    align-items: center;
    gap: 24px;
    border-radius: 20px;
    z-index: 2;
    justify-content: center;
    padding: 0 15px;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    overflow: hidden;
}
.product-notpaid-content {
    position: relative;
    z-index: 1;
}
.product-notpaid:after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    filter: blur(20px);
    background: #ffffffeb;
}

.product-notpaid-content p {
    font-style: normal;
    font-weight: 600;
    font-size: 18px;
    line-height: 24px;
    color: #000000;
    text-align: center;
}

.product-notpaid-content a {
    justify-content: center;
    background: #ffef8a;
    width: fit-content;
    margin: 15px auto 0;
    color: #0b0b0d;
    transition: .3s;
    cursor: pointer;
    box-sizing: border-box;
    padding: 10px 20px;
    gap: 10px;
    border-radius: 10px;
    height: 48px;
    font-style: normal;
    font-weight: 600;
    font-size: 16px;
    line-height: 21px;
    display: flex;
    align-items: center;
    text-align: center;
    letter-spacing: -0.5px;
    position: relative;
    justify-content: center;
}

.userflow-products-item:hover .products-screenshot-item {
    transform: scale(0.93);
}

.products-screenshot-item {
    border-radius: 10px;
    overflow: hidden;
    padding: 0 0;
    align-items: center;
    display: flex;
    margin-bottom: 0;
    gap: 20px;
    transition: .3s;
}

.userflow-products-item {
    position: relative;
    width: 100%;
    overflow: hidden;
    border-radius: 15px;
    display: flex;
    flex-flow: column;
    justify-content: space-between;
    padding: 30px 100px;
    transition: .3s;
    background: #27272A;
}

.pageflow-userflow-products .userflow-products-item {
    background: none;
    border-radius: 0px;
}
.productCategory-tags:empty, .productCategory-tags span:empty {
    display: none;
}
body.custom-class,
body.login-page {
    margin: 0 !important;
}

body.custom-class header#header,
body.login-page header#header {
    /*position: static;*/
    transition: top 0.9s ease, opacity 0.9s ease; /* Smooth transition for top and opacity */
}

.userflow-products-main.desktop-web .userflow-products-item .products-screenshot-item,
.userflow-products-main.web .userflow-products-item .products-screenshot-item {
    align-items: flex-start;
}

.products-screenshot-item-inner.slick-slide {
    min-height: 400px;
    display: flex !important;
    align-items: center;
}

.product-info img {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    object-fit: cover;
    flex: 0 0 44px;
}
.product-brand-logo {
    flex: 0 0 44px;
}

.products-screenshot-item button.slick-prev.slick-arrow,
.products-screenshot-item button.slick-next.slick-arrow {
    z-index: 9;
    background-color: #FEF08A;
    visibility: hidden;
    transition: .3s;
}

.products-screenshot-item:hover button.slick-prev.slick-arrow,
.products-screenshot-item:hover button.slick-next.slick-arrow {
    transition: .3s;
    visibility: visible;
}

.products-screenshot-item button.slick-arrow.slick-disabled {
    opacity: 0;
}

.products-screenshot-item.slick-slider {
    margin-bottom: 0;
    min-height: 500px;
    /* display: flex;
    align-items: center; */
}

.products-screenshot-item.slick-slider .slick-track {
    display: flex;
    gap: 10px;
}

.mobile-navbar,
li.hide-desktop {
    display: none;
}

.main-navbar-menus ul::-webkit-scrollbar {
    display: none;
}

.request-update-main h3 {
    color: #FFFFFF;
    font-weight: 600;
    font-size: 30px;
    line-height: 40px;
    letter-spacing: -1px;
}

.request-update-main p {
    margin: 15px 0;
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 26px;
    color: #A1A1AA;
}

.request-update-main .website-form-main {
    border-radius: 12px;
    padding: 20px;
    display: flex;
    flex-flow: column;
    gap: 20px;
    border: 1px solid #3F3F46;
    margin: 30px 0 0;
}

.request-update-main .website-form-main label {
    font-style: normal;
    font-weight: 700;
    font-size: 16px;
    line-height: 24px;
    letter-spacing: -0.5px;
    color: #FFFFFF;
    margin-bottom: 10px;
}
.request-update-main .website-form-main .button {
    flex-direction: row;
    justify-content: center;
    padding: 11px 15px;
    gap: 10px;
    height: 40px;
    background: #FEF08A;
    border-radius: 8px;
    font-style: normal;
    font-weight: 600;
    font-size: 14px;
    line-height: 17px;
    display: flex;
    align-items: center;
    text-align: center;
    letter-spacing: -0.5px;
    color: #18181B;
    width: fit-content;
}
.request-update-main .website-form-main textarea {
    border-radius: 5px;
    height: 110px;
}
.product-publish-date .dropdown-menu {
    margin-top: 10px;
    box-sizing: border-box;
    background: #27272A;
    border: 1px solid #3F3F46;
    box-shadow: 10px 4px 54px rgba(0, 0, 0, 0.65);
    border-radius: 10px;
}
.product-publish-date .dropdown-menu a {
    position: relative;
    cursor: pointer;
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 20px;
    display: flex;
    align-items: center;
    text-align: center;
    letter-spacing: -0.5px;
    color: #F4F4F5;
    gap: 5px;
}

.product-publish-date .dropdown-menu a:hover {
    color: #000;
    background: #ffef8a;
}
.request-update-main {
    margin: 50px 0;
}
.main-searchBar-div {
    display: none;
    background: #27272A;
    border: 1px solid #3F3F46;
    /* box-shadow: 10px 4px 104px rgba(0, 0, 0, 0.45); */
    border-radius: 0 0 10px 10px;
    height: 550px !important;
    border-top: 0;
}
/* .pageflows-searchbar.active-search {
    border-radius: 10px 10px 0 0;
    width: 100%;
} */
.search-result-item {
    box-sizing: border-box;
    padding: 32px 40px;
    background: #FFFFFF;
    border-right: 1px solid #DCDADA;
}

.search-result-item h2 {
    font-style: normal;
    font-weight: 700;
    font-size: 12px;
    line-height: 15px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #4DC2F4;
    margin: 0 0 20px;
}

.searchBar-other {
    display: grid;
    grid-template-columns: 1fr;
}

.searchBar-other-item {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 20px 40px;
    gap: 20px;
    background: #FFFFFF;
    border-width: 1px 0px 1px 0px;
    border-style: solid;
    border-color: #DCDADA;
}

.searchBar-other-item h2 {
    font-style: normal;
    font-weight: 700;
    font-size: 12px;
    line-height: 15px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #4DC2F4;
}

.searchBar-other-item a {
    font-style: normal;
    font-weight: 700;
    font-size: 12px;
    line-height: 15px;
    text-align: center;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #FEF08A;
}

.searchBar-other-item p {
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    line-height: 20px;
    text-align: left;
    color: #000000;
}

.all-product-a-z {
    text-align: center;
    padding: 120px 0 40px;
}
.userflow-menu p {
    font-family: 'Geist';
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    line-height: 20px;
    color: #A1A1AA;
    text-align: left;
}
.heading-all-product {
    font-style: normal;
    font-weight: 700;
    font-size: 36px;
    line-height: 48px;
    display: flex;
    align-items: center;
    color: #000;
    justify-content: center;
    margin: 30px 0 0;
}

.all-products-alphabets {
    box-sizing: border-box;
    display: flex;
    flex-direction: row;
    align-items: center;
    border-width: 1px 0px;
    border-style: solid;
    border-color: #DCDADA;
    padding: 30px 30px;
    justify-content: center;
    background: #fff;
}

.all-products-alphabets-list-category ul {
    flex-direction: column;
    text-align: left;
    display: flex;
    gap: 7px;
}
.all-products-alphabets-list ul {
    display: flex;
    align-items: center;
    gap: 30px;
    flex-wrap: wrap;
    text-align: center;
}
.all-products-alphabets-list-category ul li a {
    text-transform: capitalize;
    position: relative;
    text-align: left;
    font-family: 'Geist';
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 21px;
    display: flex;
    align-items: center;
    letter-spacing: -0.5px;
    color: #F4F4F5;
}
#category-view .all-products-block-inner ul li {
    display: flex;
    flex-flow: column;
    width: fit-content;
}
.all-products-alphabets-list-category ul li.active a {
    color: #ffef8a;
    font-weight: 700;
}
.all-products-alphabets-list ul li a {
    text-transform: uppercase;
    position: relative;
    font-family: 'Geist';
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 26px;
    text-align: center;
    color: #A1A1AA;
}
.all-products-alphabets-list ul li a:hover,
.all-products-alphabets-list ul li.active a {
    color: #fff;
    transition: .3s;
}
.all-products-block {
    padding: 70px 0;
}
.all-products-alphabets-list {
    margin: 30px 0 0;
}

.all-products-block-inner ul {
    display: flex;
    flex-flow: column;
    gap: 20px;
}

.all-products-block-inner ul li {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}

    .hierarchy-list {
  list-style-type: none;
  padding-left: 0;
}

.group-title {
  font-weight: bold;
  font-size: 1.1em;
  margin: 15px 0 5px 0;
}

.category-sublist {
  padding-left: 20px;
  list-style-type: none;
}

.category-title {
  font-weight: 600;
  font-size: 1em;
  margin: 10px 0 5px 0;
  color: wheat;
}

.flow-sublist {
  padding-left: 30px;
  list-style-type: circle; /* Show bullets for flows */
}

.screen-sublist {
    padding-left: 30px;
    list-style-type: circle; /* Show bullets for flows */
}
.product-sublist {
    padding-left: 30px;
    list-style-type: circle; /* Show bullets for flows */
}

.element-sublist {
    padding-left: 30px;
    list-style-type: circle; /* Show bullets for flows */
}

.flow-item {
  margin: 5px 0;
  font-size: 0.95em;
}
.category-item {
    text-align: left;
}

.product-title-header {
    font-style: normal;
    font-weight: 700;
    font-size: 16px;
    line-height: 20px;
    text-transform: capitalize;
    color: #FEF08A;
    text-align: left;
    flex: 0 0 100%;
    margin: 30px 0 0px;
}

.all-products-block-inner ul li a {
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 24px;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex: 0 0 31%;
    text-align: left;
}
.all-product-row {
    display: grid;
    grid-template-columns: 1fr 3fr;
    gap: 150px;
}
.all-products-block-inner ul li a span {
    font-style: normal;
    font-weight: 400;
    font-size: 12px;
    line-height: 16px;
    color: #AAAAAA;
}

.all-products-block-inner ul li a:hover {
    color: #fff;
}

.loaders {
    width: 100%;
    box-sizing: border-box;
    display: flex;
    flex: 0 1 auto;
    flex-direction: row;
    flex-wrap: wrap;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1199999;
    justify-content: center;
    bottom: 0;
    align-items: center;
    top: 0;
    background: #000000e0;
}

.loader {
    box-sizing: border-box;
    display: flex;
    flex: 0 1 auto;
    flex-direction: column;
    flex-grow: 1;
    flex-shrink: 0;
    flex-basis: 25%;
    max-width: 25%;
    height: 200px;
    align-items: center;
    justify-content: center;
}

.blink {
    animation: blink-animation 3s steps(1, start) infinite;
}

@keyframes blink-animation {
    to {
        opacity: 0;
    }
}

@-webkit-keyframes ball-grid-pulse {
    0% {
        -webkit-transform: scale(1);
        transform: scale(1);
    }

    50% {
        -webkit-transform: scale(0.5);
        transform: scale(0.5);
        opacity: 0.7;
    }

    100% {
        -webkit-transform: scale(1);
        transform: scale(1);
        opacity: 1;
    }
}

@keyframes ball-grid-pulse {
    0% {
        -webkit-transform: scale(1);
        transform: scale(1);
    }

    50% {
        -webkit-transform: scale(0.5);
        transform: scale(0.5);
        opacity: 0.7;
    }

    100% {
        -webkit-transform: scale(1);
        transform: scale(1);
        opacity: 1;
    }
}

.ball-grid-pulse {
    width: 57px;
}

.ball-grid-pulse>div:nth-child(1) {
    -webkit-animation-delay: 0.22s;
    animation-delay: 0.22s;
    -webkit-animation-duration: 0.9s;
    animation-duration: 0.9s;
}

.ball-grid-pulse>div:nth-child(2) {
    -webkit-animation-delay: 0.64s;
    animation-delay: 0.64s;
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
}

.ball-grid-pulse>div:nth-child(3) {
    -webkit-animation-delay: -0.15s;
    animation-delay: -0.15s;
    -webkit-animation-duration: 0.63s;
    animation-duration: 0.63s;
}

.ball-grid-pulse>div:nth-child(4) {
    -webkit-animation-delay: -0.03s;
    animation-delay: -0.03s;
    -webkit-animation-duration: 1.24s;
    animation-duration: 1.24s;
}

.ball-grid-pulse>div:nth-child(5) {
    -webkit-animation-delay: 0.08s;
    animation-delay: 0.08s;
    -webkit-animation-duration: 1.37s;
    animation-duration: 1.37s;
}

.ball-grid-pulse>div:nth-child(6) {
    -webkit-animation-delay: 0.43s;
    animation-delay: 0.43s;
    -webkit-animation-duration: 1.55s;
    animation-duration: 1.55s;
}

.ball-grid-pulse>div:nth-child(7) {
    -webkit-animation-delay: 0.05s;
    animation-delay: 0.05s;
    -webkit-animation-duration: 0.7s;
    animation-duration: 0.7s;
}

.ball-grid-pulse>div:nth-child(8) {
    -webkit-animation-delay: 0.05s;
    animation-delay: 0.05s;
    -webkit-animation-duration: 0.97s;
    animation-duration: 0.97s;
}

.ball-grid-pulse>div:nth-child(9) {
    -webkit-animation-delay: 0.3s;
    animation-delay: 0.3s;
    -webkit-animation-duration: 0.63s;
    animation-duration: 0.63s;
}

.ball-grid-pulse>div {
    background-color: #facc14;
    width: 15px;
    height: 15px;
    border-radius: 100%;
    margin: 2px;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    display: inline-block;
    float: left;
    -webkit-animation-name: ball-grid-pulse;
    animation-name: ball-grid-pulse;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    -webkit-animation-delay: 0;
    animation-delay: 0;
}

.right-menus {
    display: flex;
    gap: 15px;
}

.openbtn {
    width: 40px;
    height: 40px;
    border-radius: 5px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    display: none;
}

.openbtn .openbtn-area {
    transition: all 0.4s;
}

.openbtn span {
    position: absolute;
    background: #fff;
    display: inline-block;
    border-radius: 3px;
    left: 11px;
    height: 2px;
    transition: all 0.4s;
    width: 50%;
}

.openbtn span:nth-of-type(1) {
    top: 12px;
}

.openbtn span:nth-of-type(2) {
    top: 20px;
}

.openbtn span:nth-of-type(3) {
    top: 28px;
}

.openbtn.active .openbtn-area {
    transform: rotatex(360deg);
}

.openbtn.active span:nth-of-type(1) {
    width: 45%;
    top: 13px;
    left: 11px;
    transform: translateY(6px) rotate(-135deg);
}

.openbtn.active span:nth-of-type(2) {
    opacity: 0;
}

.openbtn.active span:nth-of-type(3) {
    width: 45%;
    top: 25px;
    left: 11px;
    transform: translateY(-6px) rotate(135deg);
}

.landing-page-header {
    text-align: center;
    padding: 30px 0;
}

.landing-page-header h1 {
    font-style: normal;
    font-size: 57px;
    color: #ffffff;
    font-family: "Geist", sans-serif;
    font-weight: 700;
    line-height: 66px;
    letter-spacing: -3px;
    text-align: center;
    width:730px;
    max-width: 100%;
    margin: 0 auto;
}

.header-icon {
    position: absolute;
    right: -40px;
    bottom: -40px;
}

.landing-page-header p {
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 26px;
    text-align: center;
    color: #A1A1AA;
    margin: 25px 0 0;
}
.landing-page-header .home-discovery-content{
    width: 620px;
    max-width: 100%;
    margin: 25px auto 0;
}
.landing-page-header a {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 16px 20px;
    height: 52px;
    border-radius:10px;
    width: fit-content;
    margin: 0 auto;
    font-style: normal;
    font-weight: 700;
    font-size: 16px;
    line-height: 20px;
    letter-spacing: 0.16em;
    color: #FFFFFF;
}

.journeys-pageflows h2 {
    font-size: 44px;
    font-weight: 600;
    line-height: 55px;
    letter-spacing: -3px;
    text-align: center;
    color: #FFFFFF;
    max-width: 100%;
    width: 500px;
    margin: 0 auto 45px;
}

.why-choose-list ul li h3 {
    font-style: normal;
    font-weight: 700;
    font-size: 24px;
    line-height: 36px;
    color: #3C3C3C;
}

.why-choose-list ul li p {
    font-style: normal;
    font-weight: 400;
    font-size: 18px;
    line-height: 24px;
    color: #5C5C5C;
}

.why-choose-list ul li {
    display: flex;
    flex-flow: column;
    gap: 10px;
}

.why-choose-list ul {
    display: flex;
    flex-flow: column;
    gap: 20px;
}

.pageflows-website-image img {
    width: 100%;
}

.journeys-pageflows {
    padding:100px 0 100px;
}

.landing-logos ul:last-child {
    padding-left: 190px;
}

.landing-logos ul {
    display: flex;
    align-items: center;
    gap: 15px;
    justify-content: center;
}

.landing-logos ul li {
    width: 79.95px;
    height: 79.95px;
    background: #DBF4FF;
    border-radius: 6.22634px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.landing-logos {
    display: flex;
    flex-flow: column;
    gap: 15px;
    padding: 40px 0 70px;
}

.trusted-logs ul {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 60px;
}

.trusted-heading {
    font-family:  "Geist", serif;
    font-weight: 700;
    font-size: 16px;
    line-height: 24px;
    text-align: center;
    letter-spacing: -0.5px;
    color: #A1A1AA;
    margin-bottom:30px;
}

.trusted-logs {
    margin: 80px 0 20px;
}

#logoMarqueeSection {
    margin: 0 auto;
}

.default-content-container {
    margin-left: auto;
    margin-right: auto;
    margin-top: 0;
    margin-bottom: 0;
    width: 100%;
}

div.marquee>a>img {
    height: 50px;
}

.logoMarqueeSection>div>div {
    padding-top: 0;
    padding-bottom: 0;
    min-height: 0;
}

.marquee-wrapper {
    display: inline-block;
    white-space: nowrap;
}

.marquee {
    display: inline-block;
    white-space: nowrap;
    position: relative;
    transform: translate3d(0%, 0, 0);
    animation-name: marquee;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}

.marquee a {
    display: inline-block;
    white-space: nowrap;
    padding-right: 5.4rem;
}

.marquee-wrapper:hover .marquee {
    animation-play-state: paused !important;
}

@keyframes marquee {
    0% {
        transform: translate3d(0%, 0, 0);
    }

    100% {
        transform: translate3d(-100%, 0, 0);
    }
}

.logoMarqueeSection {
    background: #D9F4FF;
    padding: 20px 0 15px;
    margin: 70px 0 50px;
}

.ux-design-block {
    margin: 0 auto;
    text-align: center;
    max-width: 50%;
    display: flex;
    flex-flow: column;
    gap: 20px;
}

.ux-design-block h2 {
    font-style: normal;
    font-weight: 700;
    font-size: 48px;
    line-height: 60px;
    text-align: center;
    color: #1D1D1D;
}

.ux-design-block p {
    font-style: normal;
    font-weight: 400;
    font-size: 18px;
    line-height: 24px;
    text-align: center;
    color: #5C5C5C;
}

.ux-design-block a {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 16px 20px;
    gap: 8px;
    height: 52px;
    background: #4DC2F4;
    border-radius: 30px;
    width: fit-content;
    margin: 0 auto;
    font-style: normal;
    font-weight: 700;
    font-size: 16px;
    line-height: 20px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: #FFFFFF;
}

.choose-plan-fits-item-f h2 {
    font-style: normal;
    font-weight: 700;
    font-size: 48px;
    line-height: 60px;
    color: #1D1D1D;
}

.choose-plan-fits-item-f a {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 12px 16px;
    gap: 12px;
    height: 48px;
    background: #4DC2F4;
    border-radius: 30px;
    font-style: normal;
    font-weight: 700;
    font-size: 16px;
    line-height: 20px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: #FFFFFF;
    transition: .3s;
    width: fit-content;
}

.choose-plan-fits-item-f {
    display: flex;
    flex-flow: column;
    gap: 20px;
}

.choose-plan-fits-item-f a:hover {
    background: #000;
}

.choose-plan-fits-item {
    display: flex;
    flex-flow: column;
    gap: 20px;
    position: relative;
    overflow: visible;
    right: 50px;
}

.choose-plan-fits-row {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 200px;
    align-items: center;
}

.choose-plan-fits-item:after {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0;
    gap: 13.5px;
    position: absolute;
    background: #EAE8E8;
    border-radius: 6.75px;
    content: "";
    bottom: -40px;
    right: -40px;
    width: 100%;
    height: 100%;
}

.choose-plan-fits-item .choose-plan-box.pricing-plan-block {
    z-index: 2;
    box-sizing: border-box;
    padding: 60px 30px 30px 30px;
    background: #FFFFFF;
    border: 1.125px solid #32ACE0;
    border-radius: 6.75px;
}

.why-choose-main {
    position: relative;
}

.choose-plan-fits-item:before {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0;
    gap: 13.5px;
    position: absolute;
    left: 20px;
    top: 20px;
    background: #F1F1F1;
    border-radius: 6.75px;
    content: "";
    width: 100%;
    height: 100%;
    z-index: 1;
}

.choose-plan-fits {
    padding: 100px 0;
    overflow: hidden;
    width: 100%;
}

.choose-plan-fits-item .plan-benifits-list ul li svg {
    height: 10px;
}

.why-choose-list {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 50px;
    align-items: center;
}

.why-choose-head {
    margin: 0 0 40px;
}

.why-choose-head p {
    font-style: normal;
    font-weight: 400;
    font-size: 18px;
    line-height: 24px;
    text-align: center;
    color: #5C5C5C;
    max-width: 50%;
    margin: 20px auto 100px;
}

.pageflow-eork-head h2 {
    font-style: normal;
    font-weight: 700;
    font-size: 48px;
    line-height: 60px;
    text-align: center;
    color: #1D1D1D;
}

.pageflow-work-items {
    max-width: 80%;
    margin: 0 auto;
}

.pageflow-work-items ul {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 30px;
    padding: 60px 0 0;
}

.work-icon {
    height: 97px;
    width: 97px;
    background: #258AFF;
    box-shadow: 0px 32px 54px rgba(37, 138, 255, 0.224553);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 0 30px;
}

.work-item-heading {
    font-style: normal;
    font-weight: 700;
    font-size: 24px;
    line-height: 36px;
    color: #1D1D1D;
    margin: 0 0 10px;
}

.pageflow-work-items ul li {
    position: relative;
}

.pageflow-work-items ul li p {
    font-style: normal;
    font-weight: 400;
    font-size: 18px;
    line-height: 24px;
    color: #5C5C5C;
}

.pageflow-work-items ul li:nth-child(2) {
    padding-top: 60px;
}

.pageflow-work-items ul li:nth-child(3) {
    padding-top: 120px;
}

.pageflow-work-items ul li:after {
    content: "";
    background-image: url('../website/images/arrow.svg');
    position: absolute;
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    top: 40px;
    left: 125px;
}

.pageflow-work-items ul li:nth-child(2):after {
    background-image: url('../website/images/arrow2.svg');
    left: 110px;
}

.pageflow-work-items ul li:nth-child(3):after {
    display: none;
}

.pageFlows-work {
    padding: 70px 0 0;
    overflow: hidden;
}

.pageflow-testimonials {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 96px 0px;
    gap: 64px;
    background: #1199D4;
    margin: 70px 0 0;
}

.pageflow-testimonials-items .testi-heading {
    font-style: normal;
    font-weight: 500;
    font-size: 24px;
    line-height: 38px;
    text-align: center;
    color: #FFFFFF;
    border: 1px solid #fff;
    height: 140px;
    padding: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.pageflow-testimonials-slider-head  h2{
    font-style: normal;
    font-weight: 700;
    font-size: 44px;
    line-height:55px;
    letter-spacing: -3px;
    text-align: center;
    color: #FFFFFF;
    max-width: 100%;
    margin: 0 auto 25px;
    font-family: "Geist", sans-serif !important;
}

.avatar-img {
    text-align: center;
    margin: 50px auto 0;
    width: 64px;
    height: 64px;
    border-radius: 100px;
    overflow: hidden;
}

.pageflow-testimonials-items {
    display: flex;
    flex-flow: column;
    padding: 10px;
}

.pageflow-testimonials-items .testi-heading span {
    background: #fff;
    width: 20px;
    height: 20px;
    position: absolute;
    left: -10px;
    top: -10px;
}

.pageflow-testimonials-items .testi-heading span.square-two {
    left: auto;
    right: -10px;
}

.pageflow-testimonials-items .testi-heading span.square-three {
    top: auto;
    bottom: -10px;
}

.pageflow-testimonials-items .testi-heading span.square-four {
    top: auto;
    left: auto;
    right: -10px;
    bottom: -10px;
}

.pageflow-testimonials-slider {
    margin: 0 auto;
    max-width: 80%;
}

.avatar-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.user-details {
    text-align: center;
    display: flex;
    flex-flow: column;
    gap: 10px;
    justify-content: center;
}

.user-name {
    font-style: normal;
    font-weight: 600;
    font-size: 18px;
    line-height: 28px;
    text-align: center;
    color: #FFFFFF;
    margin: 20px 0 0;
}

.user-description {
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 24px;
    text-align: center;
    color: #E9D7FE;
}

.user-rateing {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px 0 0;
}

.pageflow-testimonials-slider .slick-dots li button:before {
    font-size: 6px;
    line-height: 20px;
    position: absolute;
    top: 0;
    left: 0;
    content: "";
    text-align: center;
    opacity: 1;
    width: 10px;
    height: 10px;
    background: #4DC2F4;
    border-radius: 6px;
    flex: none;
    order: 1;
    flex-grow: 0;
}

.pageflow-testimonials-slider .slick-dots li.slick-active button:before {
    opacity: 1;
    background: #fff;
}

.pagenotfound-block h1 {
    font-style: normal;
    font-weight: 700;
    font-size: 48px;
    line-height: 60px;
    text-align: center;
    color: #fff;
}

.pagenotfound-block p {
    font-style: normal;
    font-weight: 400;
    font-size: 24px;
    line-height: 36px;
    text-align: center;
    color: #A1A1AA;
}

.pagenotfound-description {
    padding: 20px 24px;
    background: #27272A;
    border-radius: 16px;
    text-align: center;
    max-width: 60%;
    margin: 0 auto;
    border: 1px solid #3F3F46;
}
.pagenotfound-description p {
    font-style: normal;
    font-weight: 400;
    font-size: 18px;
    line-height: 24px;
    text-align: center;
    color: #ffffff;
    flex: none;
}

.pagenotfound-description .goto-honepage {
    font-style: normal;
    font-weight: 400;
    font-size: 18px;
    line-height: 24px;
    color: #FEF08A;
    display: flex;
    align-items: center;
    justify-content: center;
    width: fit-content;
    margin: 15px auto 0;
    gap: 15px;
}

.pagenotfound-section {
    padding: 70px 0 100px;
    height: 100%;
    display: flex;
    align-items: center;
}

.pagenotfound-image {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 130px;
    overflow: hidden;
}

.pagenotfound-image img {
    height: 200px;
}

.pagenotfound-description p a {
    color: #FEF08A;
}

.pagenotfound-image-server {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 250px;
    overflow: hidden;
}

.pagenotfound-image-server img {
    height: 300px;
    position: relative;
    top: 10px;
}

.journeys-pageflows.journeys-pageflows2 .why-choose-list {
    grid-template-columns: 1fr 1.2fr;
}

.journeys-pageflows.journeys-pageflows2 .why-choose-list ul {
    order: 2;
}

.search-page .search-results .products-screenshot-item {
    max-height: 600px !important;
    align-items: center;
    display: flex;
    justify-content: center;
}

.search-page .search-results .products-screenshot-item a {
    display: block;
    height: 100%;
}

.search-page .search-results .products-screenshot-item img {
    transition: .3s;
    cursor: pointer;
    border-radius: 15px;
    height: 100%;
    width: 100% !important;
    object-fit: contain;
}

/* 11 Dec css*/
.page-new-block-add {
    display: flex;
    align-items: center;
    gap: 10px;
    position: relative;
    width: 100%;
    margin-bottom: 40px;
}
.subcategory-menu {
    display: flex;
    align-items: center;
    overflow-x: auto;
    max-width: 100%;
    white-space: nowrap;
    scroll-behavior: smooth;
    scrollbar-width: none;
    -ms-overflow-style: none;
    margin-bottom: 30px;
    gap : 10px;
}

.subcategory-menu.slick-slider {
    margin-bottom: 0;
    padding: 0 40px 0 0;
    direction: ltr;
}

.subcategory-menu .slick-prev {
    display: none !important;
    /* Hides the left arrow */
}

.subcategory-menu li {
    margin: 0;
    color: #A1A1AA;
    background: #27272A;
    border-radius: 50px;
}

.subcategory-menu li.active {
    background: #fff;
    color: #27272A;
    font-weight: 600;
}

.submenu-item {
    font-size: 16px;
    padding: 15px 20px;
    display: inline-block;
    font-family: "Geist", serif;
    border-radius: 50px;
    text-decoration: none;

}

.main-navbar-menus {
    position: relative;
    padding: 0;
    width: 100%;
    overflow: hidden;
}

.subcategory-menu-wrapper .scroll-left-btn-sub,
.subcategory-menu-wrapper .scroll-right-btn-sub {
    position: absolute;
    top : 7px;

}
.subcategory-menu-wrapper .scroll-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9;
  width: 40px;
  height: 40px;
  background: #3F3F46;
  border-radius: 50px;
  position: relative;
}
#scroll-left {
    transform: rotate(180deg);
    left: 0px;

}

#scroll-right {
    right: 0;
}
.scroll-right-btn-sub:after {
    content: "";
    position: absolute;
    width: 100px;
    height: 80px;
    background: #18181b;
    top: -30px;
    left: -25px;
    box-shadow: 0px 30px 10px rgb(24 24 27);
    filter: blur(9px);
}
.scroll-left-btn-sub:after {
    content: "";
    position: absolute;
    width: 100px;
    height: 80px;
    background: #18181b;
    top: -30px;
    right: -37px;
    box-shadow: 0px 30px 10px rgb(24 24 27);
    filter: blur(9px);
}
.scroll-right-btn-sub {
    position: relative;
}

.pageflow-search-tab {
    position: relative;
    width: 100%;
    display: flex;
    height: auto;
    overflow: hidden;
}

.pageflow-search-tab input {
    appearance: none;
    display: none;
}

.pageflow-search-tab .tab-name {
    position: relative;
    display: flex;
    flex-direction: column;
    border-right: 1px solid #3f3f46;
    padding: 0 20px 0px 0;
    flex: 0 0 25%;
    display: flex;
    justify-content: space-between;
    flex-flow: column;
}
.tab-seealllink {
    padding: 0 0px 20px;
}

.tab-seealllink a {
    font-family: 'Geist';
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    line-height: 18px;
    display: flex;
    align-items: center;
    letter-spacing: -0.5px;
    text-decoration-line: underline;
    color: #A1A1AA;
}

.tab-seealllink a:hover {
    color: #ffef8a;
    text-decoration: none;
}

.pageflow-search-tab .tab-name label {
    cursor: pointer;
    transition: 0.5s;
    padding: 10px;
    z-index: 2;
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 20px;
    display: flex;
    align-items: center;
    text-align: left;
    letter-spacing: -0.5px;
    color: #A1A1AA;
    text-transform: capitalize;
}

.content .contentBx .searchableList li a {
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 20px;
    display: flex;
    align-items: center;
    text-align: center;
    letter-spacing: -0.5px;
    color: #F4F4F5;
    padding: 10px 0px;
    text-align: left;
}

.content .contentBx .searchableList li a:hover {
    color: #FEF08A;
}

.pageflow-search-tab input:nth-child(1):checked~.tab-name label:nth-child(1),
.pageflow-search-tab input:nth-child(2):checked~.tab-name label:nth-child(2),
.pageflow-search-tab input:nth-child(3):checked~.tab-name label:nth-child(3),
.pageflow-search-tab input:nth-child(4):checked~.tab-name label:nth-child(4),
.pageflow-search-tab input:nth-child(5):checked~.tab-name label:nth-child(5),
.pageflow-search-tab input:nth-child(6):checked~.tab-name label:nth-child(6) {
    opacity: 1;
    color: #fff;
    background: #3F3F46;
    font-weight: 600;
    border-radius: 10px;
}

.content {
    color: #fff;
    padding:0 0 20px 20px;
    max-height: 470px;
    overflow-y: scroll;
    width: 100%;
    flex: 0 0 75%;
}

.content .contentBx {
    visibility: hidden;
    opacity: 0;
    display: none;
}

.pageflow-search-tab input:nth-child(1):checked~.content .contentBx:nth-child(1),
.pageflow-search-tab input:nth-child(2):checked~.content .contentBx:nth-child(2),
.pageflow-search-tab input:nth-child(3):checked~.content .contentBx:nth-child(3),
.pageflow-search-tab input:nth-child(4):checked~.content .contentBx:nth-child(4),
.pageflow-search-tab input:nth-child(5):checked~.content .contentBx:nth-child(5),
.pageflow-search-tab input:nth-child(6):checked~.content .contentBx:nth-child(6) {
    visibility: visible;
    opacity: 1;
    display: block;
}

.hide-desktop {
    display: none;
}

.pageflow-userflow-products .userflow-products-item {
    padding: 0 0;
}

.pageflow-userflow-products .product-name-text {
    color: white;
    font-weight: 700;
    font-size: 16px;
    line-height: 24px;
    letter-spacing: -0.5px;
    font-family: 'Geist';
}

.pageflow-userflow-products .product-info img {
    width: 20px;
    height: 20px;
    border-radius: 4px;
    flex: 0 0 20px;

}

.pageflow-userflow-products .userflow-product-logo {
    padding-top: 8px;
}

.pageflow-userflow-products .userflow-products-item {
    padding: 0 0;
}

.pageflow-userflow-products .product-name-text {
    color: white;
    font-weight: 700;
    font-size: 16px;
    line-height: 24px;
    letter-spacing: -0.5px;
    font-family: 'Geist';
}

.pageflow-userflow-products .product-info img {
    width: 20px;
    height: 20px;
    border-radius: 4px;
    flex: 0 0 20px;

}

.pageflow-userflow-products .userflow-product-logo {
    padding-top: 8px;
}

.userflow-products-main .userflow-product-logo {
    padding-top: 20px;
}

.userflow-products-main .product-name-text {
    color: white;
    font-weight: 700;
    font-size: 16px;
    line-height: 24px;
    letter-spacing: -0.5px;
    font-family: 'Geist';
}
.userflow-products-main.userflow-products-main-flows.ios,
.userflow-products-main.userflow-products-main-flows.web,
.userflow-products-main.userflow-products-main-flows.android {
    padding: 0 40px;
}

.userflow-products-main.userflow-products-main-flows.ios .product,
.userflow-products-main.userflow-products-main-flows.android .product,
.userflow-products-main.userflow-products-main-flows.web .product {
    padding: 0;
}


/* .pageflow-ui .userflow-products-item {
    background: none;
} */

/* .pageflow-ui .userflow-products-main {
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
} */
.userflow-products-main.userflow-products-main-flows.web {
    grid-template-columns: 1fr 1fr 1fr;
}
.products-screenshot-item.desktop-web {
    justify-content: center;
}
.pageflow-userflow-products .userflow-products-main {
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
}
.pageflow-userflow-products .userflow-products-main.desktop {
    grid-template-columns: 1fr 1fr;
}

.userflow-app-logo {
    width: 49px;
    height: 49px;
    background: #71717A;
    border-radius: 10px;
    overflow: hidden;
}

.userflow-app-logo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.userflow-app-list {
    font-style: normal;
    font-weight: 600;
    font-size: 20px;
    line-height: 28px;
    letter-spacing: -1px;
    color: #FFFFFF;
}

.userflow-app-list p {
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    line-height: 20px;
    display: flex;
    align-items: center;
    color: #A1A1AA;
}

.userflow-app-details {
    display: flex;
    align-items: center;
    gap: 15px;
}

.usersFlow-app-name {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 60px 0 40px;
    padding: 0 20px;
}
.flows-slider-loop .usersFlow-app-name {
    padding: 0;
    margin: 20px 0 0;
}
.flows-slider-loop .product {
    padding-left: 20px;
}

.flows-slider-loop .product .slick-track {
    margin: 0 -15px;
}

.flows-slider-loop .product .products-screenshot-item.slick-slider {
    min-height: auto;
}

span.plus-icon {
    width: 45px;
    height: 45px;
    box-sizing: border-box;
    background: #27272A;
    border: 1px solid #3F3F46;
    border-radius: 22.5px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #E4E4E7;
    font-size: 30px;
    line-height: normal;
    cursor: pointer;
}

span.plus-icon:hover,
.submenu-item:hover {
    background: #ffef8a;
    color: #18181b;
}
span.plus-icon svg {
    stroke: #71717A;
}
.view-more-btn {
    box-sizing: border-box;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 14px 18px;
    gap: 10px;
    height: 45px;
    background: #27272A;
    border: 1px solid #3F3F46;
    border-radius: 10px;
    font-style: normal;
    font-weight: 600;
    font-size: 14px;
    line-height: 17px;
    display: flex;
    align-items: center;
    text-align: center;
    letter-spacing: -0.5px;
    color: #D4D4D8;
}

.view-more-btn:hover {
    background: #ffef8a;
    color: #71717a;
}

.view-more-flows {
    display: flex;
    align-items: center;
    gap: 15px;
}
.userflow-products-main.desktop-web {
    grid-template-columns: 1fr 1fr 1fr;
}

/*.userflow-products-main.userflow-products-main-flows.slick-slider {*/
/*    padding-left: 30px;*/
/*}*/

/*.userflow-products-main.userflow-products-main-flows.slick-slider .product.slick-slide {*/
/*    padding: 0 10px;*/
/*}*/

form {
    margin: 0;
}

.userflow-products-main.desktop-web .products-screenshot-item-inner img, .userflow-products-main.web .products-screenshot-item-inner img {
    height: auto;
}

/* .userflow-products-main.userflow-products-main-flows {
    display: block;
} */

.products-screenshot-item.slick-slider {
    background: transparent;
}

.userflow-products-main-flows .userflow-products-item:hover .products-screenshot-item {
    transform: scale(1);
    transition: .3s;
}

.products-screenshot-onetime {
    margin: 0;
    border-radius: 10px;
    overflow: hidden;
    position: relative;
}
/* .products-screenshot-item.desktop-web .products-screenshot-onetime {
    flex: 0 0 40%;
} */
.products-screenshot-onetime:hover .products-screenshot-item {
    transform: scale(0.94) !important;
    transition: .3s;
}

/* Prevent body from scrolling when popup is open */
body.popup-open {
    overflow: hidden;
    /* Disables scrolling */
}

.popup {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgb(0 0 0 / 80%);
    justify-content: center;
    align-items: center;
    opacity: 0;
    transform: scale(0.8);
    transition: opacity 0.1s ease, transform 0.1s ease;
    z-index: 999999;
}

.popup.show {
    display: flex;
    /* Show when the popup is active */
    opacity: 1;
    /* Fade in */
    transform: scale(1);
    /* Zoom in */
}

@keyframes slideIn {
    from {
        transform: translateY(-20px);
        opacity: 0;
    }

    to {
        transform: translateY(0);
        opacity: 1;
    }
}

.popup-content {
    box-sizing: border-box;
    width: 1030px;
    background: #27272A;
    border: 1px solid #3F3F46;
    border-radius: 10px;
    position: relative;
}

.account-inner-main {
    display: grid;
    grid-template-columns: 1fr 3fr;
    margin: 20px 0 0;
    min-height: 700px;
}

.close-btn {
    position: absolute;
    top: 0px;
    right: 15px;
    font-size: 30px;
    color: #ccc;
    cursor: pointer;
}

.account-inner-main .pageflow-search-tab {
    display: flex;
    flex-flow: column;
    padding: 30px 40px 0 0;
}
.account-setting-left {
    display: flex;
    flex-flow: column;
    justify-content: space-between;
}
.account-inner-main .tab-button {
    font-size: 16px;
    line-height: 24px;
    display: flex;
    align-items: center;
    letter-spacing: -0.5px;
    color: #A1A1AA;
    background: transparent;
    border: 0px;
    transition: background-color 0.3s;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 15px 10px;
    width: 90%;
}

.account-inner-main .tab-button svg {
    stroke: rgba(113, 113, 122, 1);
}

.account-inner-main .tab-button.active {
    background: #3F3F46;
    border: 1px solid #52525B;
    border-radius: 10px;
    color: #fff;
    font-weight: 700;
}

.account-inner-main .tab-button.active svg {
    stroke: #fff;
}

.tab-content {
    display: none;
}

.tab-content.active {
    display: block;
}

.tab-content-main {
    box-sizing: border-box;
    background: #18181B;
    border: 1px solid #3F3F46;
    border-radius: 20px;
    border-bottom: 0;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    padding-bottom: 40px;
}

.user-account-image-box {
    display: flex;
    align-items: center;
    gap: 30px;
    padding: 30px;
}

.image-box {
    width: 120px;
    height: 120px;
    border-radius: 18px;
    overflow: hidden;
    background: #3F3F46;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 100px;
}

.image-box img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.upload-profile-photo {
    display: flex;
    flex-flow: column;
    gap: 20px;
}

.upload-profile-photo button {
    box-sizing: border-box;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 14px 12px;
    gap: 10px;
    height: 48px;
    background: #3F3F46;
    border: 1px solid #3F3F46;
    border-radius: 10px;
    font-style: normal;
    font-weight: 600;
    font-size: 16px;
    line-height: 20px;
    text-align: center;
    letter-spacing: -0.5px;
    color: #D4D4D8;
}

.upload-profile-photo button:hover {
    background: rgba(254, 240, 138, 1);
    color: #27272a;
}

.upload-profile-photo p {
    font-style: normal;
    font-weight: 400;
    font-size: 12px;
    line-height: 20px;
    display: flex;
    align-items: center;
    color: #A1A1AA;
    text-align: left;
    margin: 0;
}

.user-account-item label {
    font-style: normal;
    font-weight: 700;
    font-size: 14px;
    line-height: normal;
    color: #71717A;
}

.user-account-item {
    display: flex;
    flex-flow: column;
    align-items: baseline;
    gap: 10px;
}

.user-account-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
}

.user-account-edit-form {
    max-width: 70%;
    display: flex;
    flex-flow: column;
    gap: 20px;
    margin: 30px 0;
    padding: 0 30px 30px;
}

.user-account-item input {
    box-sizing: border-box;
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 14px 16px;
    gap: 10px;
    height: 48px;
    background: #27272A;
    border: 1px solid #3F3F46;
    border-radius: 10px;
    width: 100%;
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 26px;
    color: #FAFAFA;
}

.user-account-item input::placeholder {
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 26px;
    color: #FAFAFA;
}

.user-account-item input:focus {
    outline: none;
    box-shadow: none;
    border-color: #ffdd04;
}

.user-account-save {
    text-align: left;
    margin: 30px 0 0;
}

.user-account-save button {
    flex-direction: row;
    justify-content: center;
    padding: 11px 12px;
    height: 40px;
    background: #FEF08A;
    border-radius: 8px;
    font-style: normal;
    font-weight: 600;
    font-size: 14px;
    line-height: 17px;
    display: flex;
    align-items: center;
    text-align: center;
    letter-spacing: -0.5px;
    color: #18181B;
}

.user-account-delete {
    display: flex;
    flex-flow: column;
    align-items: baseline;
    gap: 10px;
    border-top: 1px solid rgba(63, 63, 70, 1);
    padding: 30px;
}
.gettouch-account {
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    line-height: 20px;
    color: #A1A1AA;
    padding-right: 40px;
    padding-bottom: 50px;
}
.subscription-main {
    padding: 30px;
}
.subscription-main h3 {
    font-style: normal;
    font-weight: 600;
    font-size: 30px;
    line-height: 40px;
    letter-spacing: -1px;
    color: #FAFAFA;
    text-align: left;
}
.subscription-main p {
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    line-height: 20px;
    color: #A1A1AA;
    text-align: left;
    margin: 10px 0 24px;
}

.expired-subscription-section {
    display: flex;
    gap: 12px;
}

.subscription-main .site-btn-account {
    flex-direction: row;
    justify-content: center;
    padding: 14px 12px;
    gap: 10px;
    height: 48px;
    background: #FEF08A;
    border-radius: 8px;
    width: fit-content;
    font-style: normal;
    font-weight: 600;
    font-size: 14px;
    line-height: 18px;
    display: flex;
    align-items: center;
    text-align: center;
    letter-spacing: -0.5px;
    color: #18181B;
}
button#resendBtn {
    flex-direction: row;
    justify-content: center;
    padding: 11px 15px;
    gap: 10px;
    height: 40px;
    background: #FEF08A;
    border-radius: 8px;
    font-style: normal;
    font-weight: 600;
    font-size: 14px;
    line-height: 17px;
    display: flex;
    align-items: center;
    text-align: center;
    letter-spacing: -0.5px;
    color: #18181B;
    width: fit-content;
}
.account-reset-password {
    padding: 30px;
    text-align: left;
}
.account-reset-password h3 {
    font-style: normal;
    font-weight: 600;
    font-size: 30px;
    line-height: 40px;
    letter-spacing: -1px;
    color: #FAFAFA;
}
.account-reset-password p {
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    line-height: 20px;
    color: #A1A1AA;
    max-width: 60%;
}
.account-reset-password form {
    max-width: 50%;
    margin: 20px 0 0;
    display: flex;
    flex-flow: column;
    gap: 10px;
}
.account-reset-password form div#id_name_group {
    display: none;
}
.gettouch-account a {
    color: #fff;
    text-decoration: underline;
}
.getin-touch-block a {
    font-style: normal;
    font-weight: 600;
    font-size: 16px;
    line-height: 20px;
    display: flex;
    align-items: center;
    letter-spacing: -0.5px;
    text-decoration-line: underline;
    color: #FFFFFF;
}
.getin-touch-block {
    padding: 10px 0 20px;
}
.user-account-delete h6 {
    font-style: normal;
    font-weight: 700;
    font-size: 16px;
    line-height: 24px;
    display: flex;
    align-items: center;
    letter-spacing: -0.5px;
    color: #FFFFFF;
    margin: 0;
}

.user-account-delete p {
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    line-height: 20px;
    color: #A1A1AA;
}

.user-account-delete button {

    flex-direction: row;
    justify-content: center;
    padding: 11px 12px;
    gap: 10px;
    height: 40px;
    background: #F87171;
    border-radius: 8px;
    font-style: normal;
    font-weight: 600;
    font-size: 14px;
    line-height: 17px;
    display: flex;
    align-items: center;
    text-align: center;
    letter-spacing: -0.5px;
    color: #FFFFFF;
}

.user-account-delete button:hover {
    background: #ffef8a;
    color: #18181b;
}

.quartly-upgrade-box {
    background: #FEF08A;
    padding: 20px;
    border-radius: 18px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
}

.diamond-icon {
    background: #27272a;
    width: 50px;
    height: 50px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.diamond-icon svg {
    fill: #fff;
    width: 30px;
}

.quartly-upgrade-icon {
    display: flex;
    align-items: center;
    gap: 15px;
}

.quartly-heading {
    display: flex;
    flex-flow: column;
    align-items: baseline;
    gap: 5px;
}

.quartly-heading span {
    font-weight: 700;
    color: #000;
    font-size: 16px;
}

.quartly-heading p {
    color: #000;
    font-size: 14px;
}

.upgrade-button button {
    background: #fff;
    height: 40px;
    padding: 0 20px;
    border-radius: 10px;
    color: #27272a;
    font-weight: 700;
}

.subscription-table {
    margin: 30px 0 0;
}

.subscription-table-head {
    display: grid;
    grid-template-columns: 1fr 2.5fr 1fr 1fr 1fr;
    text-align: left;
    padding: 10px 0;
    border-bottom: 1px solid #3f3f46;
}

.subscription-table-head span {
    font-size: 15px;
    color: #fff;
    font-weight: 600;
}

.subscription-table-row {
    display: grid;
    grid-template-columns: 1fr 2.5fr 1fr 1fr 1fr;
    text-align: left;
    padding: 10px 0;
    border-bottom: 1px solid #3f3f46;
    align-items: center;
}

.subscription-table-inner {
    max-height: 400px;
    overflow-y: scroll;
}

.subscription-table-row span {
    font-size: 14px;
    color: #fff;
    font-weight: 400;
}

.subscription-table-row:last-child {
    border: 0px;
}

.subscription-table-row span a {
    display: block;
    color: #ffef8a;
}

.subscription-table-row span a:hover {
    text-decoration: underline;
}
.pageflows-email-main {
    padding: 0px;
}
.emails-images-box {
    padding: 20px 30px;
    background: #27272A;
    border-radius: 15px;
    position: relative;
    min-height: 400px;
}
.pageflows-email-header .product-info {
    width: 44px;
    height: 44px;
    background: #71717A;
    border-radius: 10px;
    overflow: hidden;
    flex: 0 0 44px;
}
.pageflows-email-header .product-info img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.filterable-block h2 {
    color: #fff;
}

.filterable-block p {
    color: rgba(161, 161, 170, 1);
}

.filterable-block a, .filterable-block a:hover {
    color: #facc14;
}
.emails-page .pageflows-header-bottom-nav {
    display: none;
}

/* end 11 Dec css */
/* home page css */
.hero-discovery-section {
    display: inline-flex;
    color: #fff;
    margin: 0 auto 20px;
    justify-content: center;
    align-items: center;
}
.hero-discovery-section__buttons {
    display: inline-flex;
    gap: 1rem;
    align-items: center;
    justify-content: center;
    margin-top: 30px;
}
.hero-discovery-section__buttons  a.explore-flows-btn {
    background: #FEF08A;
    color: #18181B;

    font-size: 16px;
    font-weight: 600;
    line-height: 19.84px;
    letter-spacing: -0.5px;
    text-align: center;
    height: 48px;
    min-width: 163px;
}
.hero-discovery-section__buttons .join-for-free {
    background: #303037;
    color: #ffffff;

    font-size: 16px;
    font-weight: 600;
    line-height: 19.84px;
    letter-spacing: -0.5px;
    text-align: center;
    height: 48px;
    min-width: 163px;
}
.hero-discovery-section img {
    height: 22px;
    width: 22px;
    margin-right: 5px;
}

.home-designers-worldwide-img {
    display: inline-flex;
}

.hero-discovery-section p {
    font-size: 16px;
    font-weight: 400;
    line-height: 26px;
    text-align: center;
    margin-top: 0;
}

.worldwide-img {
    margin-left: -13px;
    border: 1px solid #18181B;
    border-radius: 50%;
}

.landing-page-header .hero-discovery-section__btn {
    padding: 0.75rem 1.5rem;
    border-radius: 10px;
    background: #303037;
    font-size: 16px;
    font-weight: 600;
    line-height: 19.84px;
    letter-spacing: -0.5px;
    text-align: center;
    height: 48px;
    margin-top: 30px;
    text-transform: capitalize;
}

.landing-page-header .hero-discovery-section__btn--explore {
    background-color: #FEF08A;
    color: #18181B;
}

.hero-discovery-section__btn--join {
    background-color: #303037;
    color: #fff;
    font-size: 16px;
    font-weight: 600;
    line-height: 19.84px;
    letter-spacing: -0.5px;
    text-align: center;
    padding: 14px 33px;
    display: inline-block;
    margin-top: 45px;
    border-radius: 10px 10px;
    height: 48px;
}
.home-testing-img li img {
    height:30px;
    object-fit: contain;
}
.featured-products {
    display: flex;
    gap: 20px;
    width: 90%;
    margin: 0 auto;
    max-width: 100%;
    align-items: center;
    justify-content: center;
    flex-flow: column;
}
.product-ft {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    background: #1D1D20;
    border-radius: 25px 25px;
    padding: 0 50px;
    width: 1021px;
    max-width: 100%;
    height: 400px;
    position: relative;
    gap:50px
}
.journeys-pageflows-img lottie-player {
    display: block;
    width: 100%;
    height: 100%;
}
.product-ft:last-child .journeys-pageflows-img img {
    height: 100%;
    width: 65%;
    object-fit: cover;
    position: absolute;
    right: 0px;
}
.ft-product-info h4 {
    font-size: 28px;
    font-weight: 600;
    line-height: 40px;
    letter-spacing: -1px;
    text-align: left;
    color:#FFFFFF;
}
.ft-product-info p {
    color: #A1A1AA;
    font-size: 16px;
    line-height: 26px;
    font-weight: 400;
    margin-top:30px;
}
.product-ft:first-child .journeys-pageflows-img{
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 15px;
}
.journeys-pageflows-img {
    display: flex;
    align-items: center;
    justify-content: end;
}
.journeys-pageflows-img img {
    height: 400px;
    object-fit: contain;
    width: 352px;
}
.journeys-pageflows-img img:nth-child(2) {
    display: none;
}
.product-ft:last-child {
    height: 380px;
    grid-template-columns: 1.5fr 1fr;
    gap: 0;
    padding-left: 0;
}

.product-ft:last-child .journeys-pageflows-img lottie-player {
    position: relative;
    left: -40px;
}
.home-design-library-col {
    display: grid;
    grid-template-columns: 5fr 7fr;
    gap:55px;
    align-items: center;
    width: 90%;
    margin: 0 auto 90px;
    max-width: 100%;
}
.home-design-library-col:nth-child(even) {
    grid-template-columns: 7fr 5fr;
}
.home-design-library-col:last-child{
    margin-bottom: 0;
}
.home-design-library-col:nth-child(even) .design-library-content {
    order: 2;
}
.design-library-content h2 {
    font-size: 44px;
    font-weight: 600;
    line-height: 55px;
    letter-spacing: -3px;
    color: #ffffff;
}
.design-library-content p {
    font-size: 16px;
    font-weight: 400;
    line-height: 26px;
    color: #A1A1AA;
    margin-top: 20px;
}
.explore-flows-btn {
    font-size: 16px;
    font-weight: 600;
    line-height: 19.84px;
    letter-spacing: -0.5px;
    text-align: center;
    background: #FEF08A;
    padding: 14px 33px;
    display: inline-block;
    margin-top: 45px;
    border-radius: 10px 10px;
    height: 48px;
}
.design-library-img {
    background: #303037;
    padding: 25px 25px;
    border-radius: 15px 15px;
    width: 728px;
    max-width: 100%;
}
.design-library-img img {
    width: 100%;
}
.faq {
    display: flex;
    gap: 100px;
    margin: 0 auto;
    max-width: 80%;
}
.designers-worldwide .still-got-quesions h4 {
    font-size: 20px;
    font-weight: 600;
    line-height: 28px;
    letter-spacing: -1px;
    text-align: left;
    margin: 15px 0  15px 0;
}
.still-got-quesions p {
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
    text-align: left;
    color:#A1A1AA;
}
.still-got-quesions a {
    font-size: 16px;
    font-weight: 600;
    line-height: 19.84px;
    letter-spacing: -0.5px;
    text-align: center;
}
.exploreflows-btn {
    font-size: 16px;
    font-weight: 600;
    line-height: 19.84px;
    letter-spacing: -0.5px;
    text-align: center;
    background: #FEF08A;
    margin-top: 20px;
    display: inline-flex;
    padding: 20px;
    height: 48px;
    align-items: center;
    border-radius: 10px 10px;
}
.stay-ahead-uxDesign h2 {
    max-width: 100%;
    margin: 0 auto;
    font-size: 44px;
    font-weight: 600;
    line-height: 55px;
    letter-spacing: -3px;
    text-align: center;
    color: #ffffff;
}
.stay-ahead-uxDesign p {
    font-size: 16px;
    font-weight: 400;
    line-height: 26px;
    text-align: center;
    color: #A1A1AA;
    margin-top: 25px;
    width:770px;
    max-width: 100%;
    margin: 25px auto 0;
}
.inspiration-btn-wrapper {
    display: flex;
    gap: 10px;
    justify-content: center;
}
.landing-page-main .pagelow-apps-library {
    padding-top: 40px;
}
.landing-page-main .acc .faqs-block {
    width: 791px;
    max-width: 100%;
}
.landing-page-main .pricing-faqs {
    padding-top: 0;
}
.stay-ahead-uxDesign-wrapper {
    padding-bottom: 100px;
    background: #27272A;
    padding: 80px 0 0;
}
.landing-page-main  .faqs-header {
    max-width: 80%;
    text-align: left;
    margin: 0 auto 40px;
}
.landing-page-main  .faqs-header h2{
    text-align: left;
}
.landing-page-main  .pageflow-slider-wrapper.slick-slide.slick-cloned {
    height: fit-content;
}
.pageflow-slider .slick-slide {
    height: fit-content;
}
.still-got-quesions img {
    width: 110px;
    height: 110px;
    object-fit: contain;
    border-radius: 12px;
}
.pageflow-supporter-img {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 40px;
    margin-bottom:40px;
}
.pageflow-supporter-img li img {
    height: 27px;
    object-fit: contain;
}
.still-got-quesions h4 {
    font-size: 20px;
    font-weight: 600;
    line-height: 28px;
    letter-spacing: -1px;
    color:#ffffff;
    margin: 15px 0 10px;
}
.landing-page-header a.discover-user-flows{
    background: #FEF08A;
    color: #18181B;
    font-size: 16px;
    font-weight: 600;
    line-height: 19.84px;
    letter-spacing: -0.5px;
    text-align: center;
    height: 48px;
    min-width: 163px;
}
.inspiration-btn-wrapper a.discover-user-flows {
    font-size: 16px;
    font-weight: 600;
    line-height: 19.84px;
    letter-spacing: -0.5px;
    text-align: center;
    background: #FEF08A;
    padding: 14px 33px;
    display: inline-block;
    margin-top: 45px;
    border-radius: 10px 10px;
    height: 48px;
}
.terms-privacy-page h1 {
    font-style: normal;
    font-weight: 700;
    font-size: 37px;
    line-height: 46px;
    color: #FFFFFF;
    margin: 20px 0 0;
}

.terms-privacy-page p {
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 26px;
    color: #A1A1AA;
    margin: 25px 0 0;
}

.terms-privacy-page h2 {
    font-style: normal;
    font-weight: 700;
    font-size: 27px;
    line-height: 36px;
    color: #FFFFFF;
}

.terms-privacy-page li {
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 26px;
    color: #A1A1AA;
    margin: 25px 0 0;
    list-style: disc;
}
.terms-privacy-page h3 {
    font-style: normal;
    font-weight: 700;
    font-size: 20px;
    line-height: 36px;
    color: #FFFFFF;
}

.terms-privacy-page p strong {
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 26px;
    color: #A1A1AA;
}

.terms-privacy-page a {
    color: #facc14;
}

.ux-research h2 {
    font-size: 44px;
    font-weight: 600;
    line-height: 55px;
    letter-spacing: -3px;
    text-align: center;
    color: #FFFFFF;
    max-width: 100%;
    width: 420px;
    margin: 0 auto 30px;
}
.ux-research  .ux-research-content {
    font-size: 16px;
    font-weight: 400;
    line-height: 26px;
    text-align: center;
    color: #A1A1AA;
    width: 565px;
    max-width: 100%;
    margin: 0 auto 40px;
}
.ux-research-wrapper {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 20px;
    width: 1033px;
    max-width: 100%;
    margin: 0 auto;
}
.ux-research-col {
    background: #27272A;
    padding: 20px 20px;
    border-radius: 10px;
}
.ux-research-col img {
    width: 46px;
    height: 46px;
    border-radius: 8px 0px 0px 0px;
}
.ux-research-col h4 {
    font-size: 20px;
    font-weight: 600;
    line-height: 28px;
    letter-spacing: -1px;
    color: #fff;
    padding: 15px 0 0 0;
    margin-bottom: 50px;
}

.ux-research-col p {
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
    letter-spacing: -0.5px;
    text-align: left;
    color: #ffffff;
    width: auto;
}
.home-pricing-section .pricing-page-header h2 {
    font-size: 44px;
    font-weight: 600;
    line-height: 55px;
    letter-spacing: -3px;
    text-align: center;
    color: #ffffff;
}
.home-pricing-section .home-pricing-section .pricing-page-header {
    width: 100%;
}
.home-pricing-section .pricing-page-header p {
    margin: 20px auto 45px;
    font-size: 16px;
    line-height: 26px;
}
.home-pricing-section .pricing-page-plans {
    padding: 0 0 100px 0;
}
.home-pricing-section .pricing-page-header {
    width: 787px;
}
.stay-ahead-slider.slick-initialized.slick-slider {
    margin: 70px 0 0 0  !important;
}
.stay-ahead-slider-col {
    height: 266px !important;
    overflow: hidden;
    border-radius: 20px 20px 0 0;
    margin: 0 10px;
}
.top-designer-img {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-bottom:20px;
}
.top-designer-img img {
    width: 35px;
    height: 35px;
    object-fit: contain;
}
/* home page css */
/* team sign up css*/
.team-signup-page .plan-selected-row .signup-form label {
    display: none;
}
.team-signup-page .plan-selected-container {
    width: 457px;
    max-width: 100%;
}
.team-signup-page .plan-name-and-price {
    background: #303037;
    border: 1px solid #52525B;
    border-radius: 20px;
    padding: 20px 20px;
    margin-bottom: 25px;
}
.team-signup-page .plan-selectedPlan-price span {
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    line-height: 20px;
    color: #AAAAAA;
    display: block;
    margin-top: 6px;
}
.team-signup-page .plan-selectedPlan-price {
    font-style: normal;
    font-weight: 600;
    font-size: 20px;
    line-height: 28px;
    text-align: right;
    color: #ffffff;
}
.team-signup-page .plan-selected-page .select-dropdown__button {
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
    text-align: left;
    background: transparent;
    border: 0;
    padding: 0;
    color:#fff;
    text-transform: lowercase;
    letter-spacing: normal;
    margin: 5px 0 0 0;
}
.plan-new-name{
    margin-bottom: 6px;
}
.team-signup-page .select-dropdown__button{
    margin-bottom: 5px;
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
    text-align: left;
}
.team-signup-memberships-content {
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
    text-align: center;
    color: #A1A1AA;
    margin-bottom:20px;
}
.plan-selected-page .select-dropdown__list {
    z-index: 1;
    margin-top: 10px;
    box-sizing: border-box;
    background: #27272A;
    border: 1px solid #3F3F46;
    box-shadow: 10px 4px 54px rgba(0, 0, 0, 0.65);
    border-radius: 10px;
    width: max-content;
}
.team-signup-page .plan-selected-page .select-dropdown__list li.select-dropdown__list-item {
    padding: 0;
    transition: .3s;
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    line-height: 20px;
    letter-spacing: -0.5px;
    color: #F4F4F5;
    text-transform: capitalize;
    align-items: start !important;
    background: transparent;
    display: inline-block;
}
.team-signup-page #dropdownList {
    background: #27272A;
    border: 1px solid #3F3F46;
    box-shadow: 10px 4px 54px rgba(0, 0, 0, 0.65);
    border-radius: 10px;
    width: max-content;
}
.userflow-products-main.userflow-products-main-bookmark .userflow-products-item .product-screenshots {
    padding: 0 20px;
}

.userflow-products-main.userflow-products-main-bookmark .userflow-products-item {
    padding: 20px;
}
.userflow-products-main.userflow-products-main-bookmark .userflow-products-item .product-logo-bg {
    height: 40px;
    background: #71717A;
    border-radius: 10px;
    flex: 0 0 40px;
    width: 40px;
}

.userflow-products-main.userflow-products-main-bookmark .userflow-products-item .product-logo-bg img {
    height: 100%;
    width: 100%;
    object-fit: cover;
}
.page-banner-text.bookmark-saved-header h1 {
    text-align: left;
}
.page-banner-text.bookmark-saved-header p {
    text-align: left;
}
.pageflows-container-saved {
    border-bottom: 1px solid rgba(63, 63, 70, 1);
    padding: 0 30px;
}

.pageflows-container-saved .userflows-header-menus {
    padding: 30px 0 0;
}
.product-tabs.product-tabs-bookmark {
    margin: 0 0 50px;
    padding: 0 30px;
    border: 0;
}
.page-banner-text.bookmark-saved-header {
    padding-bottom: 40px;
}
#clearIcon {
    position: absolute;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    font-size: 20px;
    border-radius: 100px;
    top: 50%;
    right: 8px;
    transform: translateY(-50%);
}
.working-in-teams-pricing {
    font-size: 16px;
    font-weight: 400;
    line-height: 26px;
    text-align: center;
    color: #A1A1AA;
}
.working-in-teams-pricing a{
    font-weight: 700;
    color: #FAFAFA;
    text-decoration:underline;
}
/* team sign up css */
.team-signup-page .pageflows-header , .team-signup-page  .pageflows-footer{
    display: none;
}

.search-result.pageflow-search-result {
    padding: 20px 15px 0px;
}
.search-result.pageflow-search-result .pageflow-searchList {
    /* border-bottom: 1px solid #3F3F46; */
    padding: 15px 0;
}
.search-result.pageflow-search-result .pageflow-searchList:first-child{
    padding-top:0;
}
.search-result.pageflow-search-result .pageflow-searchList:last-child{
    padding-bottom:0;
    border-bottom:0;
}
.pageflow-searchList h6 {
    font-size: 12px;
    font-weight: 400;
    line-height: 14px;
    text-align: left;
    color: #A1A1AA;
    margin-bottom:13px;
    padding: 0 10px;
    text-transform: capitalize;
}
.pageflow-searchList ul li a {
    font-size: 16px;
    font-weight: 600;
    line-height: 20.8px;
    letter-spacing: -0.5px;
    text-align: left;
    color: #F4F4F5;
    padding: 7px 10px;
    margin-bottom: 5px;
    width: 100%;
    display: block;
}
.pageflow-searchList ul li.activeList a {
    background: #3F3F46;
    border-radius: 5px;
}
.pageflow-searchList ul li:last-child a {
    margin-bottom: 0;
}
.pageflow-searchList ul li a.highlighted {
    background: #3f3f46;
    border-radius: 5px;
}
.search-results .userflow-products-item {
    background: transparent;
    padding: 0;
    gap: 20px;
}

.productPage-filtters {
    position: relative;
}
.pagefLow-productPage-tab {
    margin: 30px 30px 0;
}
.productPage-filtters #scroll-left {
    z-index: 9;
    width: 35px;
    height: 35px;
    background: #3F3F46;
    border-radius: 50px;
    position: absolute;
    top: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    left: 20px;
}
.productPage-filtters #scroll-right {
    z-index: 9;
    width: 35px;
    height: 35px;
    background: #3F3F46;
    border-radius: 50px;
    position: absolute;
    top: 10px;
    display: flex;
    align-items: center;
    justify-content: center;

}
.pageflow-login-box {
    padding: 60px 0;
}
.custom-pagination {
    flex-wrap: wrap;
    align-items: center;
    width: max-content;
    margin: 40px auto 70px;
    border: 1px solid #3F3F46;
    border-radius: 8px;
    overflow: hidden;
}
.custom-pagination .number-pages, .custom-pagination .dottes {
    font-style: normal;
    font-weight: 500;
    font-size: 14px;
    line-height: 20px;
    color: #A1A1AA;
    border-left: 1px solid #3F3F46;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.custom-pagination .prev-btn {
    width: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.custom-pagination .next-btn {
    width: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-left: 1px solid #3F3F46;
    height: 40px;
}
.custom-pagination .active {
    background: #fff;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #1D2939;
    font-size: 14px;
}
.back-to-top-btn {
    position: fixed;
    bottom: 20px;
    right: 20px;
    background-color: #fefefe;
    color: white;
    border-radius: 100px;
    cursor: pointer;
    display: none;
    z-index: 999999;
    width: 50px;
    height: 50px;
    align-items: center;
    justify-content: center;
    border: 3px solid #000;
}
.back-to-top-btn svg {
    width: 40px;
}
.userflow-products-main.userflow-product-ios .userflow-products-item .product-screenshots {
    overflow: hidden;
    border-radius: 10px;
    margin-bottom: 0px;
}
.annotation-header h1 {
    color: #FFFFFF;
    font-weight: 600;
    font-size: 30px;
    line-height: 40px;
    letter-spacing: -1px;
    text-align: center;
    font-family: "Geist";
    padding-bottom: 30px;
}

.annotation-header a {
    color: #facc14;
}

.annotation-header p {
    color: #fff;
    font-size: 18px;
}

body.people-onboarding-page .pageflows-header-bottom-nav {
    display: none;
}

body.people-onboarding-page main.flex-grow {
    margin-top: 100px !important;
}

body.people-onboarding-page main.flex-grow .row.content {
    overflow-y: auto;
    max-height: 100%;
}

body.people-onboarding-page main.flex-grow .row.content h2, body.people-onboarding-page main.flex-grow .row.content p, body.people-onboarding-page main.flex-grow .row.content a {
    color: #fff;
}

body.people-onboarding-page main.flex-grow .row.content .shadow.mt-6 {
    background: #27272A;
    border: 1px solid #3F3F46;
    box-shadow: 10px 4px 54px rgba(0, 0, 0, 0.65);
    border-radius: 10px;
}

body.people-onboarding-page main.flex-grow .row.content button {
    flex-direction: row;
    justify-content: center;
    padding: 11px 15px;
    gap: 10px;
    height: 40px;
    background: #FEF08A;
    border-radius: 8px;
    font-style: normal;
    font-weight: 600;
    font-size: 14px;
    line-height: 17px;
    display: flex;
    align-items: center;
    text-align: center;
    letter-spacing: -0.5px;
    color: #18181B;
    width: fit-content;
    margin: 20px 0 0;
}

body.people-onboarding-page main.flex-grow .row.content div#id_message_group {
    display: flex;
    flex-flow: column;
    gap: 10px;
    margin-top: 20px;
}
body.people-onboarding-page main.flex-grow .row.content div#id_recipient_group {
    display: flex;
    flex-flow: column;
    gap: 10px;
}
body.people-onboarding-page main.flex-grow .row.content button.close-alert-bar {
    margin: 0;
}
.white-border-btn {
    border: 1px solid #fff;
    padding: 10px 20px;
    border-radius: 100px;
    font-size: 14px;
    font-weight: bold;
}
.white-border-btn:hover {
    background: #facc14;
    border-color: #facc14;
    color: #18181b !important;
}
#welcome-sheet {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgb(0 0 0 / 2%);
    z-index: 99999999;
    display: flex;
    align-items: center;
    justify-content: center;
}

#welcome-sheet-inner {
    z-index: 1000;
    text-align: center;
    position: relative;
    width: 90%;
    box-sizing: border-box;
    padding: 25px;
    background: #27272A;
    border: 1px solid #3F3F46;
    border-radius: 10px;
    max-width: 550px;
}
#welcome-sheet-inner h3 {
    font-style: normal;
    font-weight: 600;
    font-size: 24px;
    line-height: 28px;
    letter-spacing: -1px;
    color: #FAFAFA;
    text-align: left;
    margin: 0 0 20px;
}

#welcome-sheet-inner p {
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 24px;
    color: #A1A1AA;
    text-align: left;
}

#welcome-sheet-inner p a {
    color: #FFFFFF;
    text-decoration: underline;;;
}

#welcome-sheet-inner p a:hover {
    text-decoration: none;
}
::-webkit-scrollbar {
  display: none; /* Webkit browsers mein scrollbar hide karna */
}
.invite-signup-main  button#signUpButton {
    flex-direction: row;
    justify-content: center;
    padding: 11px 15px;
    gap: 10px;
    height: 40px;
    background: #FEF08A;
    border-radius: 8px;
    font-style: normal;
    font-weight: 600;
    font-size: 14px;
    line-height: 17px;
    display: flex;
    align-items: center;
    text-align: center;
    letter-spacing: -0.5px;
    color: #18181B;
}

.invite-signup-main {
    box-sizing: border-box;
    background: #27272A;
    border: 1px solid #3F3F46;
    box-shadow: 10px 4px 54px rgba(0, 0, 0, 0.65);
    border-radius: 10px;
}

.invite-signup-main h3 {
    color: #fff;
}

.invite-signup-main .login-page-fieldgroup label,
.invite-signup-main .login-page-fieldgroup div#id_name_group label {
    margin: 10px 0 !important;!i;!;
}

.invite-signup-main .login-page-fieldgroup div#id_name_group,
.invite-signup-main .login-page-fieldgroup div#id_email_group {
    display: flex;
    flex-flow: column;
}
.invite-team-main-head {
    box-sizing: border-box;
    background: #27272A;
    border: 1px solid #3F3F46;
    box-shadow: 10px 4px 54px rgba(0, 0, 0, 0.65);
    border-radius: 10px;
}

.invite-team-main-head p {
    color: #fff;
}

.invite-team-main-head p strong {
    color: #fff;
}
.error-messages {
    color: red;
    margin: 0 0 10px;
    background: #ff00003b;
    border-radius: 5px;
    padding: 10px;
}
body.signup-page header#header {
    display: none;
}
.pageflows-container.seo-banner h1 {
    width: 830px;
    margin-top: 20px;
}
body.user-flow-page .stay-ahead-uxDesign-wrapper {
    background: transparent;
    padding: 0;
}
.why-userflow-essential-row {
    background: #27272A;
    border-radius: 25px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    padding: 40px 60px;
    gap: 50px;
    max-width: 1100px;
    margin: 0 auto;
    align-items: center;
}
body.user-flow-page .why-userflow-essential-item h2 {
    font-style: normal;
    font-weight: 600;
    font-size: 44px;
    line-height: 54px;
    display: flex;
    align-items: center;
    letter-spacing: -0.03em;
    color: #FFFFFF;
    margin: 0 0 15px;
    text-align: left;
}
.why-userflow-essential-item p {
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 26px;
    color: #A1A1AA;
}
.why-userflow-essential-item p a {
    text-decoration: underline;
}
.why-userflow-essential-item p a:hover, body.user-flow-page .ux-research-col p a:hover {
    text-decoration: none;
}
body.user-flow-page .ux-research-col {
    height: auto;
    flex: 0 0 33.333333%;
}

body.user-flow-page .ux-research-wrapper {
    display: flex;
    align-items: flex-start;
}
.why-userflow-essential-item.size-images {
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
}

.why-userflow-essential-item.size-images img {
    width: auto;
}

.why-userflow-essential-item ul li a {
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 26px;
    display: flex;
    align-items: center;
    text-decoration-line: underline;
    color: #A1A1AA;
    gap: 10px;
}
.why-userflow-essential-item ul {
    margin: 15px 0 0;
    padding: 0;
    display: flex;
    flex-flow: column;
    gap: 10px;
}
.why-userflow-essential {
    padding: 100px 0;
}
.why-userflow-essential-item img {
    width: 100%;
}
.why-userflow-essential-main {
    display: flex;
    flex-flow: column;
    gap: 30px;
}
.ux-research-col h3 {
    font-size: 20px;
    font-weight: 600;
    line-height: 28px;
    letter-spacing: -1px;
    color: #fff;
    padding: 15px 0 0 0;
    margin-bottom: 50px;
}
body.user-flow-page .ux-research-col p {
    color: #A1A1AA;
}

body.user-flow-page .ux-research-col p a {
    text-decoration: underline;
}
body.user-flow-page .ux-research .hero-discovery-section__buttons {
    justify-content: center;
    display: flex;
    align-items: center;
    margin: 50px 0 0;
}
body.user-flow-page .ux-research .hero-discovery-section__buttons .explore-flows-btn {
    margin: 0;
}
body.user-flow-page h2 {
    font-style: normal;
    font-weight: 700;
    font-size: 44px;
    line-height: 55px;
    letter-spacing: -3px;
    text-align: center;
    color: #FFFFFF;
    max-width: 100%;
    margin: 0 auto 25px;
    font-family: "Geist", sans-serif !important;
}
body.user-flow-page p {
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 26px;
    color: #A1A1AA;
}
body.user-flow-page .ux-research .hero-discovery-section__buttons .join-for-free {
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
}
.how-inspiration-pageflows {
    padding: 100px 0 0;
}
.how-inspiration-pageflows {
    padding: 100px 0 0;
}

.inspiration-pageflows-head p {
    text-align: center;
}

.inspiration-pageflows-row {
    max-width: 700px;
    margin: 0 auto;
}

.inspiration-pageflows-items {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 12px;
  gap: 12px;
  background: #27272A;
  border-radius: 12px;
}

.inspiration-pageflows-items h3 {
    font-family: 'Geist';
    font-style: normal;
    font-weight: 700;
    font-size: 20px;
    line-height: 28px;
    letter-spacing: -0.01em;
    color: #FAFAFA;
    display: flex;
    align-items: center;
    gap: 10px;
    border-bottom: 1px solid #787878;
    width: 100%;
    padding: 0 0 15px;
}

.inspiration-pageflows-inner {
    display: flex;
    flex-flow: column;
    gap: 20px;
    margin: 40px 0 0;
}

body.user-flow-page p a {
    text-decoration: underline;
}

body.user-flow-page p a:hover {
    text-decoration: none;
}
.why-userflow-essential-item ul.without-link li {
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 26px;
    display: flex;
    align-items: flex-start;
    color: #A1A1AA;
    gap: 10px;
}

.why-userflow-essential-item ul.without-link li svg {
    flex: 0 0 15px;
    position: relative;
    top: 7px;
}
.why-userflow-essential-row.why-userflow-essential-row2 {
    grid-template-columns: 1fr 1.5fr;
}
.pageflows-benifits-row {
    margin: 0 auto;
    max-width: 1100px;
}

.pageflows-benifits-items {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 30px;
    gap: 24px;
    background: #27272A;
    border-radius: 16px;
}

.pageflows-benifits-head p {
    text-align: center;
    max-width: 85%;
    margin: 0 auto 50px;
}

body.user-flow-page .pageflows-benifits-head h2 {
    margin-bottom: 10px;
}

.pageflows-benifits-inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
}

.pageflows-benifits-items h3 {
    font-style: normal;
    font-weight: 600;
    font-size: 44px;
    line-height: 54px;
    letter-spacing: -0.03em;
    color: #FAFAFA;
}
.pageflows-benifits-items:nth-child(2), .pageflows-benifits-items:nth-child(3) {
    background: #303037;
}
body.user-flow-page .pageflows-benifits {
    padding-bottom: 100px;
}
body.user-flow-page .selected-plan {
    background: #303037;
}
body.user-flow-page  .pageflow-testimonials-slider-head p {
    text-align: center;
    max-width: 70%;
    margin: 0 auto 30px;
}
body.user-flow-page .pricing-faqs .faqs-header {
    text-align: center;
}
body.user-flow-page .faqs-header h2 {
    text-align: center;
}
body.user-flow-page .testimonial.designers-worldwide {
    padding: 0 0 50px;
}
body.user-flow-page .faq {
    gap: 0;
    justify-content: center;
}
.why-userflow-essential-item .hero-discovery-section__buttons .explore-flows-btn {
    margin: 0;
}

.why-userflow-essential-item .hero-discovery-section__buttons .join-for-free {
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
}
body.user-flow-page .pricing-faqs {
    padding-bottom: 0;
}
.related-articles-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    text-align: left;
    margin-bottom: 50px;
}
.related-articles-head .related-articles-title h2 {
    text-align: left;
    margin: 0 0 10px;
}

.related-articles-head a {
    padding: 14px 18px;
    gap: 10px;
    height: 48px;
    background: #303037;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 21px;
    text-align: center;
    letter-spacing: -0.5px;
    color: #FAFAFA;
}

.related-articles-items {
    box-sizing: border-box;
    background: #27272A;
    border: 1px solid #3F3F46;
    border-radius: 16px;
    overflow: hidden;
    transition: .3s;
}

.related-articles-image {
    width: 100%;
    height: 350px;
    position: relative;
    overflow: hidden;
}

.related-articles-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
    transition: .3s;
}

.related-articles-row {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 30px;
}

.related-articles-content {
    padding: 30px;
}

.related-articles-content h3 {
    font-style: normal;
    font-weight: 700;
    font-size: 20px;
    line-height: 28px;
    letter-spacing: -0.01em;
    color: #FAFAFA;
    margin-bottom: 15px;
}

.related-articles-content span {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 14px 18px;
  gap: 10px;
  height: 48px;
  background: #303037;
  border-radius: 50px;
  width: max-content;
  margin: 15px 0 0;
  font-style: normal;
  font-weight: 400;
  font-size: 16px;
  line-height: 21px;
  display: flex;
  align-items: center;
  text-align: center;
  letter-spacing: -0.5px;
  color: #A1A1AA;
  transition: .3s;
}

.related-articles-items:hover {
    background: #303037;
    transition: .3s;
}

.related-articles-items:hover img {
    transform: scale(1.2);
    transition: .3s;
}

.related-articles-items:hover .related-articles-content span {
    background: #ffef8a;
    color: #000;
    transition: .3s;
}
.related-articles {
    padding-bottom: 100px;
}
a.discover-user-flows {
    background: #FEF08A;
    color: #18181B;
    font-size: 16px;
    font-weight: 600;
    line-height: 19.84px;
    letter-spacing: -0.5px;
    text-align: center;
    height: 48px;
    min-width: 163px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
}
#otpForm button.login-btn {
    width: 100%;
    margin: 20px 0 0;
}
.login-message {
    color: red;
    text-align: center;
    font-size: 20px;
    font-weight: 500;
}
.ios-page-header-inner h1 {
    font-style: normal;
    font-weight: 600;
    font-size: 44px;
    line-height: 50px;
    text-align: left;
    letter-spacing: -1px;
    color: #FAFAFA;
    margin: 0 0 10px;
}

.ios-page-header-inner p {
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 26px;
    text-align: left;
    color: #A1A1AA;
}

.ios-page-main-head {
    font-style: normal;
    font-weight: 400;
    font-size: 30px;
    line-height: 40px;
    display: flex;
    align-items: center;
    letter-spacing: -1px;
    color: #ffffff;
    justify-content: space-between;
    margin: 40px 0 20px;
}

.ios-page-row {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
    gap: 20px;
}

.ios-page-items {
    padding: 0px;
    cursor: pointer;
}

.ios-page-img {
    justify-content: center;
    display: flex;
    align-items: center;
    padding: 0;
    border-radius: 20px;
    overflow: hidden;
}

.ios-page-logo-main {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 15px 0 0;
}

.ios-page-logo-main span {
    width: 44px;
    height: 44px;
    background: #71717A;
    border-radius: 10px;
    display: flex;
    align-items: center;
    overflow: hidden;
    flex: 0 0 44px;
}

.ios-page-logo-main span img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.ios-page-logo-main .ios-page-details p {
    font-family: 'Geist';
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    line-height: 20px;
    display: flex;
    align-items: center;
    color: #A1A1AA;
    margin:  0 0;
}

.ios-page-logo-main .ios-page-details span {
    width: auto;
    height: auto;
    background: transparent;
    border-radius: 0px;
    font-family: 'Geist';
    font-style: normal;
    font-weight: 700;
    font-size: 16px;
    line-height: 24px;
    letter-spacing: -0.5px;
    color: #FFFFFF;
}

.ios-page-img img {
    transition: .3s;
    border-radius: 20px;
}
.ios-page-items:hover .ios-page-img img {
    transform: scale(.9);
    transition: .3s;
}
.ios-page-see-all {
    display: flex;
    align-items: center;
    justify-content: center;
}

.see-all-data-btn {
    flex-direction: row;
    justify-content: center;
    padding: 14px 18px;
    gap: 10px;
    background: #fff;
    border-radius: 100px;
    font-family: 'Geist';
    font-style: normal;
    font-weight: 600;
    font-size: 14px;
    line-height: 18px;
    display: flex;
    align-items: center;
    text-align: center;
    letter-spacing: -0.5px;
    color: #0B0B0D;
    width: auto;
}
.see-all-data-btn:hover {
    background: #ffef8a;
}
.ios-page-img.product-bg {
    background: #27272A;
    height: 300px;
    padding: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ios-page-img.product-bg a {
    height: 100%;
}

.ios-page-img.product-bg a img {
    height: 100%;
    width: auto;
}
.ios-page-row.product-row {
    grid-template-columns: 1fr 1fr 1fr 1fr;
}
.ios-page-sections {
    padding: 0 0 60px;
}
.ios-page-main.ios-page-main2 .ios-page-row {
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
}

.ios-page-main.ios-page-main2 .ios-page-row .ios-page-img {
    padding: 0;
    border-radius: 20px;
    height: 550px;
    background: #27272A;
}
.ios-page-main.ios-page-main2 .ios-page-row .ios-page-img a {
    height: 100%;
}

.ios-page-main.ios-page-main2 .ios-page-row .ios-page-img img {
    width: auto;
    border-radius: 20px;
    height: 100%;
}
.ios-page-main.ios-flows-main .ios-page-row {
    padding-left: 30px;
    display: flex;
    overflow-x: scroll;
    scroll-behavior: smooth;
}

.ios-page-main.ios-flows-main .ios-page-row .ios-page-items {
    padding: 0;
    background: transparent;
    height: auto;
    flex: 0 0 16%;
}
.ios-page-row.ios-flows-slider.web-flows .ios-page-items {
    flex: 0 0 40%;
}
.ios-page-main.ios-flows-main .ios-page-row .ios-page-img {
    padding: 0;
}

.ios-page-main.ios-flows-main .ios-page-row .ios-page-img img {
    width: 100%;
}
.ios-page-main.ios-flows-main .ios-page-details span {font-size: 14px;font-weight: 400;}
.ios-page-main.ios-flows-main .ios-page-logo-main {
    justify-content: center;
}
.ios-slider-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0px 30px;
    margin-bottom: 30px;
}

.ios-slider-head-main {
    display: flex;
    align-items: center;
    gap: 15px;
}

.ios-slider-head-main span {
    width: 44px;
    height: 44px;
    background: #71717A;
    border-radius: 10px;
    display: flex;
    align-items: center;
    overflow: hidden;
    flex: 0 0 44px;
}

.ios-slider-head-main span img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.ios-slider-head-main .ios-slider-head-count span {
    width: auto;
    height: auto;
    background: transparent;
    border-radius: 0px;
    font-family: 'Geist';
    font-style: normal;
    font-weight: 700;
    font-size: 16px;
    line-height: 24px;
    letter-spacing: -0.5px;
    color: #FFFFFF;
}

.ios-slider-head-main .ios-slider-head-count p {
    font-family: 'Geist';
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    line-height: 20px;
    display: flex;
    align-items: center;
    color: #A1A1AA;
    margin: 5px 0 0;
}
.ios-page-main.ios-flows-main .ios-page-row .slick-track {
    margin: 0 -15px;
}
.ios-page-main.web-grid .ios-page-row {
  grid-template-columns: 1fr 1fr 1fr;
}
.ios-page-main.web-grid .ios-page-row .ios-page-img.product-bg {
    height: 245px;
    padding: 30px 50px;
}
.ios-page-main.ios-page-main2.web-grid .ios-page-img {
    height: 350px;
}

.ios-page-main.ios-page-main2.web-grid .ios-page-img img {
    width: 100%;
    height: auto;
}

.ios-page-main.ios-page-main2.web-grid .ios-page-img a {
    display: flex;
    align-items: center;
    justify-content: center;
}
.all-product-a-z-left {
    position: sticky;
    top: 100px;
    height: fit-content;
}
.page-1 .userflow-products-main.android .product:first-child .product-screenshots .product-notpaid,
.page-1 .userflow-products-main.android .product:nth-child(2) .product-screenshots .product-notpaid,
.page-1 .userflow-products-main.android .product:nth-child(3) .product-screenshots .product-notpaid,
.page-1 .userflow-products-main.android .product:nth-child(4) .product-screenshots .product-notpaid,
.page-1 .userflow-products-main.android .product:nth-child(5) .product-screenshots .product-notpaid,
.page-1 .userflow-products-main.android .product:nth-child(6) .product-screenshots .product-notpaid,
.page-1 .userflow-products-main.android .product:nth-child(7) .product-screenshots .product-notpaid,
.page-1 .userflow-products-main.android .product:nth-child(8) .product-screenshots .product-notpaid,
.page-1 .userflow-products-main.android .product:nth-child(9) .product-screenshots .product-notpaid,
.page-1 .userflow-products-main.android .product:nth-child(10) .product-screenshots .product-notpaid{
    display: none;
}
.page-1 .userflow-products-main.ios .product:first-child .product-screenshots .product-notpaid,
.page-1 .userflow-products-main.ios .product:nth-child(2) .product-screenshots .product-notpaid,
.page-1 .userflow-products-main.ios .product:nth-child(3) .product-screenshots .product-notpaid,
.page-1 .userflow-products-main.ios .product:nth-child(4) .product-screenshots .product-notpaid,
.page-1 .userflow-products-main.ios .product:nth-child(5) .product-screenshots .product-notpaid,
.page-1 .userflow-products-main.ios .product:nth-child(6) .product-screenshots .product-notpaid,
.page-1 .userflow-products-main.ios .product:nth-child(7) .product-screenshots .product-notpaid,
.page-1 .userflow-products-main.ios .product:nth-child(8) .product-screenshots .product-notpaid,
.page-1 .userflow-products-main.ios .product:nth-child(9) .product-screenshots .product-notpaid,
.page-1 .userflow-products-main.ios .product:nth-child(10) .product-screenshots .product-notpaid{
    display: none;
}
.page-1 .userflow-products-main.desktop-web .product:first-child .product-screenshots .product-notpaid,
.page-1 .userflow-products-main.desktop-web .product:nth-child(2) .product-screenshots .product-notpaid,
.page-1 .userflow-products-main.desktop-web .product:nth-child(3) .product-screenshots .product-notpaid,
.page-1 .userflow-products-main.desktop-web .product:nth-child(4) .product-screenshots .product-notpaid,
.page-1 .userflow-products-main.desktop-web .product:nth-child(5) .product-screenshots .product-notpaid,
.page-1 .userflow-products-main.desktop-web .product:nth-child(6) .product-screenshots .product-notpaid,
.page-1 .userflow-products-main.desktop-web .product:nth-child(7) .product-screenshots .product-notpaid,
.page-1 .userflow-products-main.desktop-web .product:nth-child(8) .product-screenshots .product-notpaid,
.page-1 .userflow-products-main.desktop-web .product:nth-child(9) .product-screenshots .product-notpaid,
.page-1 .userflow-products-main.desktop-web .product:nth-child(10) .product-screenshots .product-notpaid{
    display: none;
}
.user-not-logged-modal, .openSubscribeBtn {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    cursor: pointer;
}
.loginModal  .modal-content-new h2 {
    font-weight: 600;
    font-size: 44px;
    line-height: 55px;
    letter-spacing: -3px;
    text-align: center;
    vertical-align: middle;
}

.loginModal  .modal-content-new {
    padding: 50px 100px;
}

.loginModal  .modal-content-new .google-btn {
    height: 48px;
    background: #F2F3F5;
    border-radius: 10px;
    width: 100%;
    font-weight: 600;
    font-size: 16px;
    line-height: 100%;
    letter-spacing: -0.5px;
    text-align: center;
    vertical-align: middle;
    color: #0B0B0D;
    position: relative;
}

.loginModal  .modal-content-new .google-btn svg {
    width: 20px;
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
}
.loginModal  .modal-content-new input[type="email"] {
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 12px 16px;
    gap: 12px;
    height: 52px;
    background: #27272A;
    border-radius: 10px;
    border: 1px solid #3F3F46;
    width: 100%;
    color: #fff;
}

.loginModal  .modal-content-new button.continue-btn {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 12px 16px;
    gap: 12px;
    height: 48px;
    background: #FEF08A;
    border-radius: 10px;
    font-style: normal;
    font-weight: 600;
    font-size: 16px;
    line-height: 19.84px;
    letter-spacing: -0.5px;
    text-transform: capitalize;
    color: #18181B;
    transition: .3s;
    width: 100%;
}
.loginModal-inner {
    padding: 20px 30px 0;
}
.loginModal-inner .plan-box {
    background: #2a2a2a;
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    border: 1px solid #3F3F46;
    margin-bottom: 30px;
    overflow: hidden;
}
.loginModal-inner .plan-box .plan-option {
    position: relative;
}
.loginModal-inner .plan-option-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #2d2d2d;
  padding: 15px;
  cursor: pointer;
  color: white;
  position: relative;
}
.loginModal-inner .plan-option:first-child {
    border-bottom: 1px solid #3F3F46;
}
.loginModal-inner .plan-option input[type="radio"] {
    accent-color: yellow;
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    cursor: pointer;
    opacity: 0;
}
.loginModal-inner .plan-option-inner:after {
    content: "";
    box-sizing: border-box;
    position: absolute;
    width: 20px;
    height: 20px;
    background: #3F3F46;
    border: 1px solid #A1A1AA;
    right: 20px;
    border-radius: 100px;
}

.loginModal-inner .plan-option-inner:before {
    content: "";
    position: absolute;
    box-sizing: border-box;
    width: 10px;
    height: 10px;
    background: #FFFFFF;
    border-radius: 100px;
    right: 25px;
    z-index: 1;
    opacity: 0;
    visibility: hidden;
}
.loginModal-inner .plan-option input[type="radio"]:checked + .plan-option-inner:after {
    border-color: #fff;
}
.loginModal-inner .plan-option input[type="radio"]:checked + .plan-option-inner:before {
    opacity: 1;
    visibility: visible;
}
.loginModal-inner .badge {
  background: #ffe45e;
  color: black;
  padding: 2px 6px;
  font-size: 12px;
  font-weight: bold;
  border-radius: 4px;
  margin-left: 10px;
}
.userflow-products.pageflow-ui .userflow-products-item {
    background: transparent;
    padding: 0;
    border-radius: 0px;
}
.pageflow-slider.pricing-page-slider {
    position: relative;
}
.pageflow-slider.pricing-page-slider:after {/* Rectangle 1000001558 */
    position: absolute;
    width: 160px;
    height: 100%;
    left: -30px;
    top: 0;
    background: #18181bc4;
    filter: blur(30px);
    content: "";
}
.pageflow-slider.pricing-page-slider:before {
    position: absolute;
    width: 160px;
    height: 100%;
    right: -30px;
    top: 0;
    background: #18181bc4;
    filter: blur(30px);
    content: "";
    z-index: 1;
}
.subcategory-menu, .products-screenshot-slideshow {
  overflow: auto;              /* scroll allow */
  -ms-overflow-style: none;    /* IE, Edge */
  scrollbar-width: none;       /* Firefox */
}
.subcategory-menu::-webkit-scrollbar, .products-screenshot-slideshow::-webkit-scrollbar {
  display: none;               /* Chrome, Safari */
}
@media only screen and (max-width: 1900px) {
.userflow-products-main.desktop-web, .userflow-products-main.userflow-products-main-flows.web, .userflow-products-main.web {
    grid-template-columns: 1fr 1fr 1fr;
}
}
@media only screen and (max-width: 1320px) {
    .faq {
        max-width: 90%;
        gap:50px;
    }
    .landing-page-main .faqs-header {
        max-width: 90%;
    }
    .landing-page-main .acc .faqs-block {
        width: 100%;
    }
}
@media only screen and (max-width: 1300px) {
    .userflow-products-main {
        grid-template-columns: 1fr 1fr 1fr;
    }

    .mobile-navbar .pageflows-header-bottom-nav {
        display: block;
        padding-left: 20px;
    }
    .mobile-navbar .main-navbar-menus {
        display: block;
        overflow-x: scroll;
        scroll-behavior: smooth;
    }

    .mobile-navbar .main-navbar-menus ul.main-navbar {
        text-align: left;
        padding: 0 0px 20px 0px;
        width: 930px;
    }

    .pageflows-container {
        max-width: 100%;
        padding: 0 20px;
    }
    .userflow-right-menu {
        width: 100%;
        justify-content: flex-end;
        display: flex;
    }
    .userflow-menu {
        width: 100%;
    }

    .mobile-navbar {
        display: block;
    }

    .userflow-products-main.desktop-web .userflow-products-item .products-screenshot-item {
        align-items: center;
    }
}
@media only screen and (max-width: 1200px){
    .pageflow-search-tab .tab-name label {
        font-size: 14px;
    }
    .content .contentBx .searchableList li a {
        font-size: 14px;
    }
}
@media only screen and (max-width: 1123px){
    .ft-product-info p br {
        display: none;
    }
}
@media only screen and (max-width: 1024px)
{
    .home-design-library-col {
        grid-template-columns: 6fr 6fr !important;
    }
    .design-library-img {
        width: auto;
    }
    .landing-page-main .designers-worldwide{
        padding: 80px 0;
    }
    .pageflow-search-tab {
        flex-flow: column;
    }
    .pageflow-search-tab {
        flex-flow: column;
    }
    .pageflow-search-tab .tab-name {
        border-right: 0;
        border-bottom: 1px solid #3f3f46;
    }
    .content {
        padding-left: 0;
    }
    .ios-page-row, .ios-page-main.ios-page-main2 .ios-page-row {
        grid-template-columns: 1fr 1fr;
    }
    .userflow-products.pageflow-ui .userflow-products-main {
        grid-template-columns: 1fr 1fr;
    }
}
@media only screen and (max-width: 992px) {
    ul.hide-mobile {
        display: none;
    }

    li.hide-desktop {
        display: block;
    }
    .footer-menu li.hide-desktop {
    display: none;
}
    .userflow-products-main {
        grid-template-columns: 1fr 1fr;
    }

    .pageflows-header-container {
        flex-wrap: wrap;
        gap: 10px;
        justify-content: space-between;
    }
    .get-premium-menu {
        height:48px;
        line-height: 15px;
        letter-spacing: normal;
        width:119px;
        padding: 0;
        justify-content: center;
    }

    .pageflows-header-nav {
        padding-right: 0;
        flex: 0 0 100%;
        order: 3;
    }

    #id_image_group label {
        font-style: normal;
        font-weight: 700;
        font-size: 12px;
        line-height: 15px;
        letter-spacing: 0.2em;
        text-transform: uppercase;
        color: #000000;
    }

    #id_image_group input#id_image {
        display: flex;
        flex-direction: row;
        align-items: center;
        padding: 9px 16px;
        gap: 12px;
        height: 50px;
        border-radius: 30px;
        border: 0px;
        width: 100%;
        background: #f1f1f1;
    }

    .pageflows-header-right-menu {
        order: 2;
    }
    .footer-menu {
        justify-content: center;
        display: flex;
    }

    .footer-logo, .footer-logo-main ul {
        justify-content: center;
        display: flex;
    }

    .footer-logo-main p, .footer-terms-menu p {
        text-align: center;
    }

    .footer-terms-menu {
        flex-flow: column;
        gap: 20px;
        margin: 20px 0 0;
    }

    .userflow-menu {
        display: block;
    }

    .userflow-menu ul {
        justify-content: flex-start;
        margin: 0 auto 10px;
        width: 100%;
        gap: 0px;
    }
    .all-product-a-z-left {
          position: static;
      }
    .userflow-right-menu {
        width: 100%;
        justify-content: center;
        display: none;
    }
    .app-type .selected-box, .userflow-right-menu ul .userflow-right-dropdown-open {
        height: 38px;
        font-size: 11px;
    }
    .userflow-right-menu .userflow-right-dropdown {
        top: 35px;
        left: auto;
        right: 0px;
        padding: 15px;
    }
    .app-type .dropdown {
        right: auto;
        left: 0;
        width: 240px;
    }
    .app-type .dropdown label {
        font-size: 12px;
        text-align: left;
    }

    .pageflows-searchbar input {
        width: 110px;
    }

    .pageflows-header-bottom-nav {
        flex-flow: column;
        margin-top: 10px;
    }

    .page-banner-text {
        padding: 20px 0;
    }

    .userflow-product-filter-list,
    .userflow-product-filter-list.filters-list.usersFlow {
        grid-template-columns: 1fr;
        height: calc(100vh - 230px);
    }

    .userflow-product-filter-column {
        border-right: 0px;
    }

    .filter-navbar-main {
        overflow-x: scroll;
        width: 100%;
        display: block;
        scroll-behavior: smooth;
    }

    .filter-navbar-main ul {
        width: 560px;
    }

    .see-all-userflow {
        margin: 20px 0 0;
    }

    .product-info img {
        width: 50px;
        flex: 0 0 25px;
    }

    .product-name-text {
        font-size: 12px;
        line-height: 20px;
        letter-spacing: 0.1em;
    }

    .products-tags span {
        font-size: 10px;
    }

    .search-result,
    .searchBar-other {
        grid-template-columns: 1fr;
    }

    .all-products-alphabets {
        display: none;
    }

    .all-products-block {
        padding: 20px 0 70px;
    }

    .pageflows-header-nav ul {
        width: auto;
    }

    /* .right-menus {
        display: none;
    } */

    .right-menus-main.active .right-menus {
        display: flex;
        position: absolute;
        right: 30px;
        padding: 15px;
        flex-flow: column;
        gap: 10px;
        top: 60px;
        box-sizing: border-box;
        background: #27272A;
        border: 1px solid #3F3F46;
        box-shadow: 10px 4px 54px rgba(0, 0, 0, 0.65);
        border-radius: 10px;
    }

    .right-menus-main.active .right-menus .get-premium-menu {
        width: 100%;
        justify-content: center;
        padding: 0 15px;
        gap: 10px;
        height: 48px;
        background: #FEF08A;
        border-radius: 10px;
        font-style: normal;
        font-weight: 600;
        font-size: 14px;
        line-height: 17px;
        display: flex;
        align-items: center;
        text-align: center;
        letter-spacing: -0.5px;
        color: #0B0B0D;
    }

    .right-menus-main.active .right-menus .get-premium-menu a {
        background: transparent;
        padding: 0;
    }

    /* .openbtn {
        display: block;
    } */

    .landing-logos ul:last-child {
        padding-left: 0;
    }

    .landing-logos ul li {
        width: 30px;
        height: 30px;
    }

    .landing-logos ul li img {
        max-width: 30px;
    }

    .landing-logos {
        padding: 40px 0 0;
    }

    .trusted-logs ul img {
        max-width: 100px;
    }

    .why-choose-list ul {
        max-width: 100%;
    }

    .why-choose-list ul li h3,
    .why-choose-list ul li p {
        text-align: center;
    }

    .journeys-pageflows {
        padding: 60px 0;
    }

    .why-choose-head p {
        max-width: 100%;
        margin: 15px 0 0;
        font-size: 16px;
    }

    .pageflow-work-items ul {
        grid-template-columns: 1fr;
        gap: 0;
    }

    .pageflow-work-items {
        max-width: 100%;
    }

    .work-icon {
        width: 70px;
        height: 70px;
    }

    .choose-plan-fits-row {
        grid-template-columns: 1fr;
        text-align: center;
        gap: 40px;
    }

    .choose-plan-fits-item {
        max-width: 85%;
        margin: 0 auto;
    }

    .ux-design-block p {
        font-size: 16px;
    }

    .ux-design-block {
        max-width: 100%;
    }

    .ux-design-block a {
        font-size: 14px;
    }

    .user-account-edit-form {
        max-width: 100%;
    }

    .subscription-table {
        overflow-x: scroll;
        width: 100%;
        scroll-behavior: smooth;
    }

    .subscription-table-main {
        width: 900px;
    }
    .home-pricing-section .pricing-page-plans{
        padding: 0 0 70px 0;
    }
    .pageflows-footer-menu {
        flex-flow: column;
        align-items: center;
        gap: 28px;
    }
    .footer-menu ul {
        gap: 10px;
        flex-wrap: wrap;
        justify-content: center;
    }
    .footer-copyright-text {font-size: 12px;text-align: left;}
    .stay-ahead-uxDesign h2 {
        font-size: 30px;
        line-height: 43px;
    }
    .footer-menu ul li a {
    font-size: 13px;
}
.why-userflow-essential-row {
    grid-template-columns: 1fr;
    padding: 20px;
    text-align: center;
}

body.user-flow-page .why-userflow-essential-item h2 {
    text-align: center;
}

body.user-flow-page h2, body.user-flow-page .why-userflow-essential-item h2 {
    font-size: 30px;
    line-height: 40px;
    text-align: center !important;!i;!;
    justify-content: center;
}

.why-userflow-essential-row:nth-child(2) {
    display: flex;
    flex-flow: column-reverse;
}

.why-userflow-essential-item ul li a {
    justify-content: center;
}

.why-userflow-essential-row.why-userflow-essential-row2, .pageflows-benifits-inner {
    grid-template-columns: 1fr;
}

.why-userflow-essential-item ul.without-link li {
    text-align: left;
}

body.user-flow-page .landing-page-main .acc .faqs-block:last-child {
    padding: 0;
}
.related-articles-head {
    flex-flow: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    gap: 20px;
}

.related-articles-head a {
    width: 100%;
}

.related-articles-row {
    grid-template-columns: 1fr;
}
.pageflows-benifits-items h3 {
    font-size: 30px;
    line-height: 40px;
}
.pageflows-benifits-items h3 br {display: none;}
.all-product-a-z {
    padding: 160px 0 40px;
}
.all-product-row {
    grid-template-columns: 1fr;
    gap: 0;
}
.all-products-block-inner {
    padding: 20px 0 0;
}
.all-products-block-inner ul li a {
    flex: 0 0 100%;
}
.userflow-menu ul li.userflow-menu-dropdown {
    font-size: 17px !important;
    padding: 0px !important;
}
.loginModal  .modal-content-new {
    padding: 20px;
}
.loginModal {
    padding: 0 20px;
}
.loginModal  .modal-content-new h2 {
    font-size: 24px;
    line-height: 35px;
}
.loginModal-inner {
    padding: 20px 0px 0;
}
.ios-page-main.web-grid .ios-page-row .ios-page-img.product-bg {
    height: 140px;
    padding: 20px 20px;
}
.ios-page-main.web-grid .ios-page-row {
    grid-template-columns: 1fr 1fr;
}
}
@media only screen and (max-width: 768px) {
    .pageflow-testimonials-slider-head br {
        display: none;
    }
    /* .userflow-products-main {
        grid-template-columns: auto;
    } */
    .featured-products,.product-ft, .product-ft:last-child {
        grid-template-columns: 1fr;
        height: auto;
        max-width: 100%;
        width: auto;
        padding: 0;
    }
    .product-ft:last-child .journeys-pageflows-img lottie-player {
        left: 0;
    }
    .product-screenshots {
        height: auto;
    }
    .home-design-library-col {
        grid-template-columns: 1fr !important;
        gap: 30px;
        margin-bottom: 30px;
    }
    .design-library-content {
        order: 2;
    }
    .design-library-content h2 br {
        display: none;
    }
    .faq {
        max-width: 100%;
        flex-flow: wrap;
        gap: 30px;
    }
    .landing-page-main .acc .faqs-block:last-child,
    .landing-page-main .pricing-faqs,
    .landing-page-main .designers-worldwide {
        margin-bottom: 0;
        padding-bottom: 60px;
    }
    .landing-page-main .faqs-header {
        max-width: 100%;
    }
    .still-got-quesions {
        width: 100%;
        text-align: center;
    }
    .still-got-quesions img {
        margin: 0 auto;
    }
    .still-got-quesions p {
        text-align: center;
    }
    .reviews-masonary .slick-slider {
        margin-bottom: 0;
    }
    .team-signup-page .plan-selected-page .select-dropdown__button,
    .team-signup-page .plan-selectedPlan-price span,
    .team-signup-page .plan-selectedPlan-price,
    .team-signup-memberships-content,
    .team-signup-page .plan-selected-page .select-dropdown__list li.select-dropdown__list-item {
        font-size: 12px;
    }
    .team-signup-page .plan-selectedPlan-price {
        font-size: 14px;
    }
    .journeys-pageflows-img {
        justify-content: center;
        padding: 25px 25px 0;
    }
    .product-ft:first-child .journeys-pageflows-img {
        padding: 25px 0 0;
    }
    .journeys-pageflows-img img:first-child {
        display: none;
    }
    .journeys-pageflows-img img:last-child {
        display: block !important;
        width: 100%;
    }
    .product-ft .ft-product-name {
        padding: 25px;
    }
    .ft-product-info {
        order: 2;
    }
    .journeys-pageflows-img img {
        height: auto;
        padding: 0 25px 25px;
    }
    .product-ft:last-child .journeys-pageflows-img img {
        position: unset;
        width: 100%;
    }
    .ux-research h2, .why-choose-head h2 {
        font-size: 30px;
        font-weight: 600;
        line-height: 43px;
        letter-spacing: -2px;
        margin-bottom: 20px;
    }
    .ux-research .ux-research-content {
        font-size: 16px;
        font-weight: 400;
        line-height: 24px;
        text-align: center;
        margin-bottom: 20px;
    }
    .ux-research-col h4 {
        font-size: 18px;
        line-height: 28px;
    }
    .ux-research-col.slick-slide {
        margin: 0 10px;
    }
    .ux-research-wrapper {
        display: inline-flex !important;
    }
    .ux-research .pageflows-container,
    .pricing-page-plans .pageflows-container {
        padding: 0;
    }
    .pricing-page-plans .main-plans-pricing .individual-plan-list {
        margin: 0 0px;
        height: auto;
    }
    .main-plans-pricing .slick-track {
        display: flex;
        align-items: center;
    }
    .landing-page-header h1 {
        font-size: 36px;
        line-height: 45px;
    }
    .hero-discovery-section {
        flex-flow: column;
        gap: 10px;
    }
    .trusted-logs ul {
        flex-flow: wrap;
        gap: 20px;
    }
    .trusted-logs ul img {
        max-width: 80px;
    }
    .pageflow-slider.pricing-page-slider:before, .pageflow-slider.pricing-page-slider:after {
          width: 60px;
      }
    /* .pageflows-searchbar {
        position: relative;
        padding: 0;
        border-radius: 10px;
    } */
    /* .pageflows-searchbar svg {
        position: absolute;
        left: 0;
        right: 0;
        margin: 0 auto;
    } */
}

@media only screen and (max-width: 767px) {
    .team-signup-page .plan-name-and-price {
        flex-flow: unset;
        padding: 20px 10px;
    }
    .userflow-products-main.userflow-product-ios .userflow-products-item .product-screenshots {
      max-height: max-content;
  }
  .account-inner-main {
      grid-template-columns: 1fr;
      margin: 130px 0 0;
  }
  .account-setting-left {
      gap: 30px;
  }
  div#subscribeModal {
    width: 100% !important;
}

div#subscribeModal .modal-content-new {
    width: 100%;
}
.userflow-products.pageflow-ui .userflow-products-main {
    grid-template-columns: 1fr;
}
.userflow-products-main.desktop-web, .userflow-products-main.userflow-products-main-flows.web, .userflow-products-main.web {
    grid-template-columns: 1fr;
}
.ios-page-header-inner h1 {
    font-size: 28px;
    line-height: 40px;
}
}
.signup-page .pageflows-header-bottom-nav,
.pricing-page .pageflows-header-bottom-nav {
    display: none;
}

@media only screen and (max-width: 600px) {
    .hide-mobile {
        display: none;
    }

    .hide-desktop {
        display: block;
    }
    .pageflows-header-right-menu ul .hide-mobile {
        display: block;
    }

    .pageflows-header {
        padding: 20px;
    }

    .pageflows-searchbar {
        padding: 0px 0 0 10px;
        gap: 9px;
        height: 48px;
    }
    /* .pageflows-searchbar.active-search{
        border-radius: 10px 10px;
    } */
    /* .pageflows-searchbar.active-search .main-searchBar-div {
        border-top: 1px solid #3F3F46;
        border-radius: 10px 10px;
    } */
    .pageflows-searchbar input {
        width: 80px;
        font-size: 12px;
        width: 100px;
    }
    .pageflows-header-right-menu ul li .get-blog-menu a {
        font-size: 9px;
        gap: 4px;
    }

    .pageflows-header-right-menu ul li .get-blog-menu a svg {
        width: 7px;
    }

    #get-premium-menu a {
        width: 48px !important;
        font-size: 8px !important;
        height: 35px !important;
        padding: 0 !important;
    }

    .pageflows-header-right-menu ul .user-login-menu .user-initials {
        width: 30px;
        height: 35px;
        border-radius: 5px;
        font-size: 11px;
    }
    .pageflows-header-right-menu ul li .get-blog-menu a {
        font-size: 9px;
        gap: 4px;
    }

    .pageflows-header-right-menu ul li .get-blog-menu a svg {
        width: 7px;
    }
    /* .pageflows-searchbar.mobile-active-search {
        width: 100%;
    }
    .pageflows-searchbar.mobile-active-search svg {
        position: unset;
    }
    .pageflows-searchbar.mobile-active-search input {
        opacity: 1;
    } */
    .pageflows-header-right-menu ul,
    .pageflows-header-main {
        gap: 5px;
    }

    .ios-page .pageflows-header.fixed,
    .android-page .pageflows-header.fixed,
    .web-page .pageflows-header.fixed,
    .emails-page .pageflows-header.fixed {
        left: 15px;
        right: 15px;
    }

    .pageflows-header-nav ul li a,
    .userflow-menu ul li.userflow-menu-dropdown,
    .filter-dropdown,
    .userflow-menu ul ul li a,
    .userflow-right-menu .userflow-right-dropdown li a,
    .pageflows-header-right-menu ul .user-dropdown li a,
    .userflow-menu ul li a {
        padding: 7px 10px;
        height: 30px;
        font-size: 12px;
        line-height: 24px;
    }

    .pageflows-header-right-menu ul .user-dropdown.open {
        height: auto;
    }

    .page-banner-text h1 {
        font-size: 28px;
        line-height: 40px;
    }

    .page-banner-text p {
        font-size: 16px;
        line-height: 22px;
    }

    .product-view-like {
        display: none;
    }

    .product-notpaid-content p {
        font-size: 13px;
        line-height: 18px;
    }

    .product-notpaid-content a {
        font-size: 12px;
        letter-spacing: 0em;
    }

    .mobile-navbar .main-navbar-menus ul.main-navbar {
        min-width: 780px;
        max-width: 100%;
    }

    .pagenotfound-description {
        max-width: 100%;
    }

    .pagenotfound-description p {
        font-size: 16px;
    }

    .pagenotfound-description .goto-honepage {
        font-size: 15px;
        gap: 5px;
    }

    .pagenotfound-description .goto-honepage svg {
        height: 8px;
    }

    .pagenotfound-block h1 {
        font-size: 30px;
        line-height: 40px;
    }

    .pagenotfound-block p {
        font-size: 16px;
        line-height: 24px;
    }

    .pagenotfound-block h1 br {
        display: none;
    }

    .userflow-products-main.desktop-web .userflow-products-item .products-screenshot-item {
        align-items: center;
    }

    .usersFlow-app-name {
        flex-wrap: wrap;
        gap: 30px;
    }

    .userflow-products-main.userflow-products-main-flows.slick-slider {
        padding-left: 10px;
    }

    .pageflow-search-tab {
        max-height: max-content;
        overflow-y: scroll;
        height: fit-content;
    }
    .search-popup-content .pageflows-searchbar.active-search input#searchBar {
        width: 100%;
    }
    .popular-product-search {
        margin: 20px 0 0;
    }
    .categories-head {
        margin: 20px 0 10px;
    }
    .tab-name-inner {
        margin-bottom: 0px;
    }
    .pageflows-searchbar.active-search .tabs-icons-data {
        display: none;
    }
    .pageflow-search-tab .tab-name {
        flex: 0 0 100%;
        border: 0;
    }

    .content {
        max-height: 100%;
        border-top: 1px solid #3f3f46;
    }

    .pageflow-userflow-products .userflow-products-main.desktop-web,
    .pageflow-userflow-products .userflow-products-main.web {
        grid-template-columns: 1fr;
    }
    .pageflow-userflow-products .userflow-products-main.desktop {
    grid-template-columns: 1fr;
}
  .pageflow-userflow-products .userflow-products-main {
    grid-template-columns: 1fr 1fr;
  }
    .userflow-products-main.desktop-web .products-screenshot-item-inner,
    .userflow-products-main.web .products-screenshot-item-inner {
        width: 100%;
    }

    .popup-content {
        height: 100%;
    }

    .emails-images-box {
        padding: 0;
    }

    .email-card-head p {
        white-space: normal;
    }

    .user-account-image-box {
        flex-flow: column;
        text-align: center;
        justify-content: center;
    }

    .upload-profile-photo p {
        justify-content: center;
    }

    .user-account-row {
        grid-template-columns: 1fr;
        gap: 10px;
        margin-bottom: 20px;
    }

    .user-account-save button,
    button#resendBtn {
        width: 100%;
    }
    .custom-pagination {
        flex-wrap: wrap;
        width: 90%;
        gap: 10px;
        border: 0px;
    }
    .custom-pagination .number-pages, .custom-pagination .dottes {
        border: 1px solid #3F3F46;
    }
    .custom-pagination .next-btn, .custom-pagination .prev-btn {
      width: 40px;
      border: 1px solid #3F3F46;
      height: 40px;
  }
  .ios-page-row, .ios-page-main.ios-page-main2 .ios-page-row, .ios-page-main.ios-page-main2.web-grid .ios-page-row {
      grid-template-columns: 1fr;
  }
  .see-all-data-btn {
    width: 100%;
}
.ios-page-main.ios-flows-main .ios-page-see-all {
    padding: 20px 20px;
}
.ios-page-main.ios-flows-main .ios-page-row .ios-page-items {
    flex: 0 0 70%;
}
.ios-page-row.ios-flows-slider.web-flows .ios-page-items {
    flex: 0 0 60%;
}

.ios-page-main.ios-flows-main .ios-page-row {
    padding-left: 20px;
}
.ios-slider-head {
    padding: 0px 0px;
}
.ios-slider-head.ios-slider-head2 {
    padding: 0 20px;
}

.products-screenshot-view-main {
    position: relative;
}
.products-screenshot-item {
    height: auto;
}
.userflow-products-item {
    padding: 20px 20px 20px;
}
.ios-page-main.web-grid .ios-page-row .ios-page-img.product-bg {
    height: 170px;
    padding: 20px 30px;
}
.ios-page-main.ios-page-main2.web-grid .ios-page-img {
    height: 170px;
}
.ios-page-main-head {
    flex-wrap: wrap;
    gap: 20px;
    font-size: 15px;
}
.ios-page-main-head .ios-page-see-all .see-all-data-btn {
    font-size: 9px;
    padding: 8px 10px;
}
.ios-page-row.product-row {
    grid-template-columns: 1fr;
}
.userflow-products-main {
    grid-template-columns: 1fr;
}
.ios-page-main.web-grid .ios-page-row {
    grid-template-columns: 1fr;
}
.userflow-products-main .userflow-products-item .slider-pagination,
.userflow-products-main .userflow-products-item button.slider-next,
.userflow-products-main .userflow-products-item button.slider-prev {
    opacity: 1 !important;
    visibility: visible !important;
    transition: .3s !important;
}
.userflow-products-main.desktop-web .userflow-products-item {
    justify-content: center;
}
}

@media only screen and (max-width: 380px) {
    .pageflows-logo svg {
        width: 20px;
    }

    .pageflows-header-main {
        gap: 10px;
    }

    .pageflows-searchbar {
        height: 40px;
        padding: 0px;
        gap: 0;
    }

    .pageflows-searchbar svg {
        width: 30px;
    }

    .pageflows-searchbar input {
        font-size: 11px;
    }

    .pageflows-header-right-menu ul li a,
    .filter-navbar-main ul li a,
    .pageflows-header-right-menu ul li .get-blog-menu a,
    .right-menus .get-blog-menu a {
        font-size: 10px;
        letter-spacing: 0.01em;
    }

    .user-initials {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 30px;
        height: 30px;
        background-color: #333;
        color: #fff;
        border-radius: 50%;
        font-size: 14px;
        font-weight: bold;
        text-transform: uppercase;
    }

    .user-login-menu img {
        width: 30px;
    }

    .filter-navbar-main ul {
        width: 430px;
    }

    .userflow-product-filter-column ul li a {
        font-size: 12px;
    }

    .userflow-product-filter-column ul li a span {
        font-size: 10px;
    }

    .filter-main-search {
        height: 38px;
    }

    .filter-main-search input {
        font-size: 15px;
    }

    .userflow-products-main {
        grid-template-columns: 1fr;
    }

    .footer-copyright-text {
        flex-flow: column;
    }

    .footer-copyright-text svg {
        display: none;
    }
    #welcome-popup h3 {
        font-size: 20px;
        line-height: 20px;
    }
    .hero-discovery-section__buttons {
        flex-flow: column;
        width: 100%;
    }
    .hero-discovery-section__buttons a.explore-flows-btn, .hero-discovery-section__buttons .join-for-free {
        width: 100%;
    }
    body.user-flow-page .ux-research .hero-discovery-section__buttons {
        padding: 0 20px;
    }
    ul.footer-social-menu {
        justify-content: center;
    }
    .pageflows-searchbar input {
        width:65px;
    }
    .pageflows-logo {
        width: 40px;
        flex: 0 0 20px;
    }
    .right-menus .get-premium-menu {
        height: 35px;
        width: 65px;
        font-size: 11px;
    }
    .right-menus {
        display: flex;
        gap: 10px;
    }
    .pageflows-header-main {
        gap: 10px;
        flex: 0 0 40%;
    }
    .inspiration-btn-wrapper {
            flex-flow: column;
            gap: 0;
        }

        .hero-discovery-section__btn--join {
            margin-top: 20px;
        }
}

/* Enhanced hide-filter-tag rules for cross-section compatibility */
.hide-filter-tag {
    cursor: pointer;
    display: none;
}

/* Make hide-filter-tag visible when parent has filter-active class */
.filter-active .hide-filter-tag {
    display: block !important;
}

/* Specific rule for main navbar context */
.main-navbar-menus ul.main-navbar .filter-active .hide-filter-tag {
    display: block;
}

/* Additional rules for different contexts */
.main-navbar .filter-active .hide-filter-tag,
.subcategory-menu .filter-active .hide-filter-tag,
ul.main-navbar .filter-active .hide-filter-tag {
    display: block !important;
}

/* Ensure the SVG is properly sized and positioned */
.hide-filter-tag svg {
    cursor: pointer;
    transition: opacity 0.3s ease;
    display: block;
}

/* Handle different SVG sizes - standardize to 9px for consistency */
.hide-filter-tag svg[width="9"],
.hide-filter-tag svg[width="9px"] {
    width: 9px !important;
    height: 9px !important;
}

/* Handle larger SVG sizes like 19x18 */
.hide-filter-tag svg[width="19"],
.hide-filter-tag svg[width="19px"] {
    width: 19px !important;
    height: 18px !important;
}

.hide-filter-tag:hover svg {
    opacity: 0.7;
}

/* Ensure the entire hide-filter-tag area is clickable */
.hide-filter-tag {
    cursor: pointer !important;
    pointer-events: auto !important;
    z-index: 10;
    position: relative;
    display: inline-block;
}

/* Additional specificity for different contexts */
.filter-active .hide-filter-tag,
.main-navbar .filter-active .hide-filter-tag,
.subcategory-menu .filter-active .hide-filter-tag,
ul.main-navbar .filter-active .hide-filter-tag,
.main-navbar-menus ul.main-navbar .filter-active .hide-filter-tag,
li.filter-active .hide-filter-tag {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* Ensure clickability */
.hide-filter-tag {
    pointer-events: auto !important;
    z-index: 10;
    position: relative;
}