@font-face {
    font-family: "BrockmannRegular";
    src: url("../fonts/BrockmannRegular.eot");
    src: url("../fonts/BrockmannRegular.eot") format("embedded-opentype"),
        url("../fonts/BrockmannRegular.woff2") format("woff2"),
        url("../fonts/BrockmannRegular.woff") format("woff"),
        url("../fonts/BrockmannRegular.ttf") format("truetype"),
        url("../fonts/BrockmannRegular.svg#BrockmannRegular") format("svg");
}

@font-face {
    font-family: "BrockmannMedium";
    src: url("../fonts/BrockmannMedium.eot");
    src: url("../fonts/BrockmannMedium.eot") format("embedded-opentype"),
        url("../fonts/BrockmannMedium.woff2") format("woff2"),
        url("../fonts/BrockmannMedium.woff") format("woff"),
        url("../fonts/BrockmannMedium.ttf") format("truetype"),
        url("../fonts/BrockmannMedium.svg#BrockmannMedium") format("svg");
}

.text-description {
    line-height: 35px;
}

html {
    font-family: "BrockmannRegular";
    font-size: 18px;
    line-height: 1.1;
    width: 100%;
    margin: 0;
    scroll-behavior: smooth;
}

body {
    font-family: "BrockmannRegular";
    width: 100%;
    color: #000000;
}

body.package-opened {
    width: 100vw;
    height: 100vh;
    overflow: hidden;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

#loader {
    position: fixed;
    top: 0;
    left: 0;
    /* Changed from -34% to 0 for simpler centering */
    width: 100%;
    /* Adjusted to fit viewport */
    height: 100vh;
    /* Simplified to viewport height */
    background: url("../images/loader-page.png") no-repeat center center;
    background-size: cover;
    /* Changed to cover for better responsiveness */
    z-index: 9999;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: transform 0.5s ease-in-out;
    transform: translateY(0);
}

#loader.loaded {
    transform: translateY(-100%);
}

.mindsparkle-text {
    font-family: "BrockmannMedium", Arial, sans-serif;
    /* Fallback fonts */
    font-size: 4rem;
    color: #ffffff;
    /* Explicit white for visibility */
    text-align: center;
    /* Ensure text alignment */
    z-index: 10000;
    /* Above loader */
    opacity: 1;
    /* Ensure visibility */
}

.size-12 {
    font-size: 12px;
}

.size-14 {
    font-size: 0.778rem;
}

.size-16 {
    font-size: 0.889rem;
}

.size-18 {
    font-size: 1rem;
}

.size-22 {
    font-size: 1.222rem;
}

.size-25 {
    font-size: 1.389rem;
}

.size-27 {
    font-size: 1.5rem;
}

.size-30 {
    font-size: 1.667rem;
    /* font-size: 30px; */
}

.size-37 {
    font-size: 2.056rem;
}

.size-40 {
    font-size: 2.222rem;
}

.size-45 {
    font-size: 2.5rem;
}

.size-50 {
    font-size: 2.778rem;
}

.size-60 {
    font-size: 3rem;
}

.size-90 {
    font-size: 5rem;
}

.size-100 {
    font-size: 6.111rem;
}

.size-115 {
    font-size: 5.556rem;
}

.size-115 {
    font-size: 6.389rem;
}

.size-120 {
    font-size: 6.667rem;
}

.size-140 {
    font-size: 7.778rem;
}

.size-200 {
    font-size: 10rem;
    line-height: 1;
    letter-spacing: -8px;
}

.size-240 {
    font-size: 10rem;
    letter-spacing: -0.444rem;
}

.max-18 {
    max-width: 16px;
}

.mid-light-grey {
    color: #efefef;
}

.grey-2 {
    color: #949494;
}

h1 {
    font-size: 4.444rem;
    line-height: 1.11;
}

h1.title {
    max-width: 1160px;
    font-family: "BrockmannMedium";
}

ul {
    list-style: none;
}

a {
    text-decoration: none;
    color: #000000;
    font-size: 0.778rem;
}

a:hover {
    color: #000000;
}

a.detail-btn {
    width: 200px;
    height: 200px;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 1px solid #fff;
    color: #fff;
    position: absolute;
    border-radius: 100%;
    z-index: 1;
}

div.detail-btn {
    width: 250px;
    height: 250px;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 4px solid #000000;
    position: absolute;
    border-radius: 100%;
    z-index: 1;
}

main {
    padding-top: 142px;
}

.banner-area {
    background: #fff;
    padding: 0 0 20px;
    position: relative;
    z-index: 9;
}

.banner-area .banner-dis {
    padding-bottom: 10px;
    /* border-bottom: 1px solid #cdcdcd; */
}

.banner-area.settings-page .banner-dis {
    border-bottom: none;
}

.banner-area .banner-dis p.size-22 {
    max-width: 764px;
}

input {
    outline: none;
}

.sticky-title {
    position: sticky;
    bottom: 180px;
    margin-top: 88px;
}

.site-container {
    max-width: 2074px;
    padding: 0 77px;
    margin: 0 auto;
}

header {
    position: fixed;
    background: transparent;
    top: 30px;
    width: 100%;
    z-index: 10;
    transition: top 0.5s ease;
}

header.hidden {
    top: -130px;
}

header .site-container {
    max-width: 2074px;
    padding: 0 77px;
}

header .site-menu {
    padding: 10px;
    border-radius: 50px;
    overflow: hidden;
}

header .site-menu::before {
    content: "";
    position: absolute;
    inset: 0 0 0 0;
    background-color: rgba(255, 255, 255, 0);
    backdrop-filter: blur(10px);
}

header .site-menu * {
    position: relative;
}

header .site-menu span {
    min-width: 70px;
}

header .user-area {
    padding: 10px 18px 10px 22px;
    z-index: 99;
}

header .user-area::before {
    content: "";
    position: absolute;
    inset: 0 0 0 0;
    background-color: rgba(255, 255, 255, 0);
    backdrop-filter: blur(10px);
    border-radius: 50px;
    overflow: hidden;
}

header .user-area * {
    position: relative;
}

header .user-area .dropdown-toggle {
    display: flex;
    align-items: center;
}

header .user-area .dropdown-toggle::after {
    content: '';
    width: 14px !important;
    height: 14px !important;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e") !important;
    background-repeat: no-repeat !important;
    margin-left: 0.4rem !important;
    border: none !important;
}

header.blend-menu {
    mix-blend-mode: difference;
}

header.blend-menu img {
    filter: brightness(0) saturate(100%) invert(100%) sepia(100%) saturate(0%) hue-rotate(108deg) brightness(104%) contrast(104%);
}

header.blend-menu .pro-menu {
    background: #fff;
}

header.blend-menu .pro-menu span {
    background: #000;
}

.slider-arrow a.slick-disabled {
    opacity: 0.5;
    cursor: default;
}

.global-authors {
    position: absolute;
    z-index: 1;
    bottom: 23px;
    left: 23px;
    margin: 0;
    display: flex;
    justify-content: flex-end;
}

.global-authors .author-item {
    width: 40px;
    height: 40px;
    margin-right: -16px;
    background-color: rgba(255, 255, 255, 0.2);
    transition-timing-function: ease;
    transition-duration: 0.2s;
    border: 5px solid transparent;
    border-radius: 100%;
}

.global-authors .author-item img {
    width: 30px;
    height: 30px;
    margin: 0;
    border-radius: 25px;
    object-fit: cover;
}

.global-authors .author-item:nth-child(1) {
    z-index: 5;
}

.global-authors .author-item:nth-child(2) {
    z-index: 4;
}

.global-authors .author-item:nth-child(3) {
    z-index: 3;
}

.global-authors .author-item:nth-child(4) {
    z-index: 2;
}

.global-authors .author-item:nth-child(5) {
    z-index: 1;
}

.global-authors .author-item:hover {
    transform: scale(0.9);
    background-color: #ffffff;
}

.hero-area {
    background: linear-gradient(180deg,
            #f3f3f3 0%,
            rgba(243, 243, 243, 0) 100%);
    cursor: none;
}

.hero-area .site-banner-area {
    width: 100%;
    height: 100vh;
    padding: 0;
    position: relative;
    z-index: 9;
}

.hero-area h1 {
    position: sticky;
    bottom: 130px;
    margin-top: 66px !important;
    cursor: pointer;
    padding: 0 25px;
    max-width: 1200px;
    margin: 0 auto;
    text-align: center;
    width: 100%;

}

.hero-area .size-80 h1 {
    font-size: 5rem;
}

.hero-area h1 .goto-link {
    display: inline-block;
    margin-top: 16px;
    width: 24px;
    height: 24px;
    overflow: hidden;
}

.hero-area h1 .goto-link img {
    display: block;
    width: 100%;
    height: 100%;
    transform: translate(-25px, 25px);
    transition: 0.3s all;
}

.hero-area h1:hover .goto-link img {
    transform: translate(0);
}

.main-top-site h1 {
    cursor: pointer;
}

.main-top-site h1 .goto-link {
    display: inline-block;
    margin-top: 16px;
    width: 24px;
    height: 24px;
    overflow: hidden;
}

.main-top-site h1 .goto-link img {
    display: block;
    width: 100%;
    height: 100%;
    transform: translate(-25px, 25px);
    transition: 0.3s all;
}

.main-top-site h1:hover .goto-link img {
    transform: translate(0);
}

.goto-link-arrow {
    display: inline-block;
    margin-top: 16px;
    width: 14px;
    height: 14px;
    overflow: hidden;
}

.goto-link-arrow img {
    display: block;
    width: 100%;
    height: 100%;
    transform: translate(-14px, 14px);
    transition: 0.3s all;
    border-radius: 0 !important;
}

.between-area .area-60-width:hover h4 .goto-link-arrow img,
.between-area .area-40-width:hover h4 .goto-link-arrow img {
    transform: translate(0, 0);
}

.hero-banner {
    width: 100%;
    height: 100%;
    overflow: hidden;
    margin: 0 auto;
    cursor: none;
}

.hero-banner img {
    object-fit: cover;
    width: 100%;
    height: calc(100% + 32px);
    margin-top: -32px;
}

.hero-banner .detail-btn {
    cursor: none;
    transition: 0.3s all;
    transform: scale(1);
}

.hero-banner:hover .detail-btn {
    transform: translate(-50%, -50%) scale(1);
    transition: unset;
}

.between-area {
    gap: 1%;
}

.between-area .area-60-width {
    flex: 0 0 58.5%;
    cursor: pointer;
    overflow: auto !important;
}

.fit-video,
.fit-image {
    width: 100%;
    height: 100%;
    max-height: 1000px;
    object-fit: cover;
    object-position: center;
    display: block;
}

.between-area .area-60-width .bluury-effect {
    overflow: hidden;
    border-radius: 25px;
}

.between-area .area-60-width .bluury-effect .post-box-blur {
    width: 100%;
    height: 50%;
    filter: blur(4.75em);
    background-color: #f6f361;
    border-radius: 100vw;
    position: absolute;
    top: auto;
    bottom: -20%;
    left: 0%;
    right: 0%;
    opacity: 0;
    transition: 650ms all ease-out;
}

.between-area .area-60-width:hover .post-box-blur {
    opacity: 1;
    transition: 650ms all ease;
}

.b_title {
    padding-bottom: 4rem;
}

.between-area .area-60-width:hover img {
    transform: translate3d(0px, 0px, 0px) scale3d(1.05, 1.05, 1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) skew(0deg, 0deg);
}

.between-area .area-40-width {
    flex: 0 0 40.5%;
    cursor: pointer;
    overflow: auto !important;
}

.between-area .area-40-width .bluury-effect {
    overflow: hidden;
    border-radius: 25px;
}

.between-area .area-40-width .bluury-effect .post-box-blur {
    width: 100%;
    height: 50%;
    filter: blur(4.75em);
    background-color: #f6f361;
    border-radius: 100vw;
    position: absolute;
    top: auto;
    bottom: -20%;
    left: 0%;
    right: 0%;
    opacity: 0;
    transition: 650ms all ease-out;
}

.between-area .area-40-width:hover .post-box-blur {
    opacity: 1;
    transition: 650ms all ease;
}

.between-area .area-40-width:hover img {
    transform: translate3d(0px, 0px, 0px) scale3d(1.05, 1.05, 1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) skew(0deg, 0deg);
}

.between-area img {
    width: 100%;
    object-fit: cover;
    border-radius: 25px;
    transition: 0.5s all;
}

/* This keeps your original .tags styles intact */
.tags {
    gap: 10px;
    width: 100%;
    /* min-width: fit-content; */
    overflow: auto;

}

/* Custom styles for the specific tags with .custom-tags */
.custom-tags {
    display: flex;
    gap: 10px;
    width: 100%;
    overflow: hidden;
    /* Prevent overflow of tags */
}

.custom-tag-item {
    white-space: nowrap;
    /* Prevent wrapping within each tag */
}



.tags a {
    padding: 5px 20px;
    background: #f3f3f3;
    border-radius: 120px;
    transition: 0.3s ease;
    min-width: fit-content;
}

.tags a:hover {
    background: #e3e3e3;
}

.top-site {
    padding: 212px 0 110px;
    background: #4154ff;
    border-radius: 35px;
    z-index: 9;
    overflow: hidden;
}

.top-site .site-preview-image {
    max-width: 850px;
    margin: 0 auto;
    box-shadow: 70px 100px 100px 0px rgba(0, 0, 0, 0.7);
    border-radius: 28px;
}

.top-site .site-preview-image .sotd {
    transition: all 1000ms ease;
    overflow: hidden;
}

.top-site .site-preview-image .sotd:hover {
    transform: scale(1.02);
    border-radius: 28px;
}

/* --------------------------------------- */
#Sotd {
    position: relative;
    overflow: hidden;
}

.arrow-container {
    display: none;
    transition: transform 0.3s ease, opacity 0.3s ease;
    opacity: 0;
}

.icon-circle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 35px;
    height: 35px;
    /* background-color: rgba(255, 255, 255, 0.8); */
    border: 1px solid #fff;
    border-radius: 50%;
    cursor: pointer;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    transition: background-color 0.3s ease, transform 0.3s ease;
}

.top-site .site-preview-image .icon-circle img {
    max-width: 20px;
}

.icon-circle:hover {
    /* background-color: rgba(255, 255, 255, 1); */
    transform: scale(1.1);
}

/* --------------------------------------- */
.top-site .site-preview-image img {
    width: 100%;
    object-fit: cover;
    border-radius: 28px;
}

.top-site .site-preview-image img.top-site-title {
    position: absolute;
    max-width: 540px;
    width: auto;
    top: -156px;
    left: 50%;
    transform: translate(-50%, 0);
    opacity: 0.5;
    padding-top: 25px;
}

.top-site .site-preview-image .detail-btn {
    border-color: #fff;
    color: #ffffff;
    cursor: none;
    overflow: hidden;
}

.top-site .title {
    position: relative;
    margin-top: 70px;
    color: #fff;
}

.fixed-areafor .top-site {
    padding: 170px 0 240px;
}

.website-category-page .fixed-areafor .websites-tabs {
    position: fixed;
    left: 0;
    width: 100%;
}

.msm-badge {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: -108px;
    padding: 22px 28px;
    background: #1c1d20;
    border-top-left-radius: 50px;
    border-bottom-left-radius: 50px;
    transition: 1s ease;
    cursor: default;
}

.msm-badge p {
    letter-spacing: 2px;
    margin-left: 22px !important;
}

.msm-badge:hover {
    right: 0 !important;
}

.post-box .msm-badge {
    padding: 15px 20px;
    bottom: 50%;
    transform: translateY(-50%);
    z-index: 2;
    right: -98px;
    min-height: 60px;
}

.post-box .msm-badge img {
    max-height: 30px;
    border-radius: 0;
}

.post-box .msm-badge:hover {
    right: 0;
}

.post-box .msm-badge img {
    width: auto;
    height: auto;
}

.slider .slick-list {
    margin-right: -54px;
}

.slider .design-slides {
    height: auto;
}

.slider .design-slides .design-slides-main {
    background: #fbeae4;
    padding: 36px 40px;
    border-radius: 30px;
    gap: 130px;
    margin-right: 54px;
}

.slider .design-slides .design-slides-main .top-site-logo {
    padding: 32px;
    background: #fdc8d5;
    border-radius: 20px;
    width: 615px;
    flex: 0 0 615px;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}

.slider .design-slides .design-slides-main .top-site-logo img {
    max-width: 100%;
    border-radius: 25px;
    object-fit: cover;
}

.slider .design-slides .design-slides-main .top-designed-info {
    padding-right: 150px;
}

.trending-area {
    background: #f7f7f7;
}

.lazy-slider {
    padding-top: 90px;
}

.p-highlights .lazy-slider {
    padding-top: 0;
    padding-left: 77px;
}

.lazy-slides-area-inner {
    padding: 70px 0 88px 0;
}

.slick-track .post-box {
    margin-right: 25px;
}

.post-box {
    height: auto !important;
    cursor: pointer;
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
    overflow: hidden;
    transition: 1s all;
}

.post-box p {
    color: #949494;
}

.post-box h5 {
    width: 84%;
    display: -webkit-box;
    text-overflow: ellipsis;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.post-box img {
    object-fit: cover;
    border-radius: 20px;
    width: 100%;
    height: 100%;
    transition: 0.5s all;
    object-position: center;
}

.post-box .size-sm,
.post-box .size-lg,
.post-box .size-md,
.post-box .size-xlg,
.post-box .size-screenshot {
    width: 100%;
    height: 16.833rem;
    position: relative;
    overflow: hidden;
    border-radius: 20px;
}

.post-box .size-lg {
    height: 26.889rem;
}

.post-box .size-md {
    height: 19.722rem;
}

.post-box .size-xlg {
    height: auto;
    aspect-ratio: 1 / 1.5;
}

.post-box-image {
    height: auto !important;
    aspect-ratio: 1 / 1.2 !important;
}

.post-box .size-screenshot {
    height: 39rem;
}

.post-box .size-screenshot a.webss {
    display: flex;
    justify-content: center;
    width: 100%;
    height: 100%;
    position: relative;
}

.post-box .size-screenshot .bgwebss {
    position: absolute;
    inset: 0;
    z-index: -1;
    width: 100%;
    height: 100%;
}

.post-box .size-screenshot .bgwebss::before {
    content: "";
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    background-color: #808080b8;
    backdrop-filter: blur(10px);
    z-index: 9;
    border-radius: 20px;
    overflow: hidden;
}

.post-box .size-screenshot .bgwebss img.bgActwebss {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.post-box:hover .size-screenshot .bgwebss img.bgActwebss {
    transform: scale(1);
}

.post-box .size-screenshot a.webss img.Actwebss {
    object-fit: unset;
    object-position: unset;
    border-radius: 20px;
    width: 100%;
    height: auto;
    transition: 0.5s all;
    margin: auto 0;
}

.post-box .post-box-blur {
    transition: 650ms all ease;
}

.post-box .post-box-blur {
    width: 100%;
    height: 50%;
    filter: blur(4.75em);
    background-color: #f6f361;
    border-radius: 100vw;
    position: absolute;
    top: auto;
    bottom: -20%;
    left: 0%;
    right: 0%;
    opacity: 0;
    transition: 650ms all ease-out;
}

.post-box:hover .post-box-blur {
    opacity: 1;
    transition: 650ms all ease;
}

.post-box:hover img {
    transform: scale(1.05);
}

.post-box a.post-avatar {
    position: absolute;
    width: 43px;
    height: 43px;
    bottom: 18px;
    left: 18px;
    border-radius: 33px;
    overflow: hidden;
    border: 5px solid rgba(255, 255, 255, 0.2);
    transition: 0.2s ease;
    z-index: 2;
}

.post-box a.post-avatar img {
    width: 33px;
    height: 33px;
    object-fit: cover;
    border-radius: 33px;
}

.post-box a.post-avatar:hover {
    border-color: #fff;
    transform: scale(0.9);
}

/* ------------------------------------------------------------ */

.recording-slides .post-avatar {
    position: absolute;
    width: 43px;
    height: 43px;
    bottom: 18px;
    left: 18px;
    border-radius: 33px;
    overflow: hidden;
    border: 5px solid rgba(255, 255, 255, 0.2);
    transition: 0.2s ease;
    z-index: 2;
}

.recording-slides .post-avatar img {
    width: 33px;
    height: 33px;
    object-fit: cover;
    border-radius: 33px;
}

.recording-slides .post-avatar:hover {
    border-color: #fff;
    transform: scale(0.9);
}

/* ------------------------------------------------------------ */
.stories-box a.post-avatar {
    position: relative;
    width: 43px;
    height: 43px;
    bottom: 5px;
    left: -10px;
    border-radius: 33px;
    overflow: hidden;
    border: 5px solid rgba(255, 255, 255, 0.2);
    transition: 0.2s ease;
    z-index: 2;
}

.stories-box a.post-avatar img {
    width: 33px;
    height: 33px;
    object-fit: cover;
    border-radius: 33px;
}

.stories-box a.post-avatar:hover {
    border-color: #fff;
    transform: scale(0.9);
}

.post-box .media-container {
    display: block;
    width: 100%;
    height: 100%;
}

.text-muted {
    color: #000 !important;
}

@keyframes boxBlur {
    0% {
        opacity: 0;
    }

    25% {
        opacity: 0.25;
    }

    50% {
        opacity: 0.5;
    }

    75% {
        opacity: 0.75;
    }

    100% {
        opacity: 1;
    }
}

.top-website {
    padding-top: 42px;
}

.top-website .webiste-slider {
    padding-left: 215px;
}

.top-website .spec-title {
    opacity: 0;
    visibility: hidden;
}

.p-linked-btn {
    position: absolute;
    left: 70px;
    transform: rotate(-90deg) translate(0, -50%);
    top: 50%;
    z-index: 9;
}

.p-linked-btn a {
    gap: 12px;
}

.p-linked-btn a img {
    transform: rotate(90deg);
}

.newsletter {
    background: #ada0f9;
    padding: 150px 0 75px;
}

.newsletter h1 {
    margin-bottom: 160px;
    font-size: 18vw;
}

.newsletter .signup-today {
    display: none;
}

.newsletter .signup-today button {
    background: #000000;
    border-radius: 28px;
    font-size: 0.964rem;
    color: #ffffff;
    padding: 9px 30px;
    border: none;
}

.subsc-email {
    position: relative;
    height: 75px;
    background: #fff;
    border-radius: 99px;
}

.subsc-email input {
    height: 100%;
    border: none;
    outline: none;
    min-width: 450px;
    padding: 10px 20px;
    border-radius: 99px;
}

.subsc-email button {
    background: #151618;
    position: absolute;
    right: 0;
    top: 0;
    padding: 10px 38px;
    bottom: 0;
    border-radius: 99px;
    border: none;
    color: #ffffff;
}

.email-subscription p {
    max-width: 242px;
}

.directory-area {
    padding: 145px 0;
    background: #080808;
    position: relative;
    z-index: 2;
}

.directory-area .lazy-slides-area-top-header .lazy-slides-area-top-header {
    display: none;
}

.directory-area .directory-slider {
    padding-left: 215px;
}

.directory-area .pro-cards {
    height: auto;
}

.directory-area .p-linked-btn a {
    color: #ffffff;
}

.directory-area .p-linked-btn a img {
    filter: brightness(0) saturate(100%) invert(100%) sepia(1%) saturate(2%) hue-rotate(197deg) brightness(114%) contrast(100%);
}

.card-tag {
    background: #000000;
    border-radius: 125px;
    padding: 10px 12px 10px 8px;
    gap: 0.5rem;
}

.card-tag img {
    width: 23px !important;
    height: auto !important;
}

.card-tag span {
    min-width: 35px;
    color: #fff;
}

.pro-cards {
    margin-right: 25px;
    background: linear-gradient(180deg, #454545 0%, #000 100%);
    border-radius: 30px;
}

.pro-cards .card-head {
    padding: 30px 25px 25px 35px;
}

.pro-cards .card-head img {
    width: 110px;
    height: 110px;
    border-radius: 50%;
    overflow: hidden;
    object-fit: cover;
}

.pro-cards .card-content {
    padding: 0 35px 25px;
    color: #ffffff;
}

.pro-cards .card-content p {
    color: #8f8f8f;
    letter-spacing: 0.2px;
}

.pro-cards .card-content a,
.pro-cards .card-content span {
    color: #ffffff;
    letter-spacing: 0.2px;
}

.pro-cards .card-content .tags a {
    color: #000000;
}

.creative-jobs {
    background: #ffffff;
    padding: 80px 0 80px 77px;
    border-bottom-left-radius: 50px;
    border-bottom-right-radius: 50px;
    z-index: 9;
}

.creative-jobs-box {
    border-radius: 30px;
    background: #ff5f5f;
    padding: 35px 20px 25px;
    margin-right: 25px;
    height: auto !important;
}

.creative-jobs-box .creative-jobs-box-content {
    min-height: 430px;
}

.creative-jobs-box:nth-child(2) {
    background: #8e0000;
}

.creative-jobs-box:nth-child(3) {
    background: #ceffa8;
}

.creative-jobs-box:nth-child(4) {
    background: #85bdca;
}

.creative-jobs-box:nth-child(5) {
    background: #d9d9d9;
}

.footer {
    padding: 206px 0 44px;
    background: linear-gradient(0deg, #444 0%, #131313 100%);
    position: sticky;
    bottom: 0px;
    margin-top: -54px;
    display: flex;
    flex-direction: column;
}

.footer h1 {
    font-size: 14vw;
    line-height: 140px;
    letter-spacing: -7px;
    color: #fff;
    padding: 0 77px 155px;
    margin-left: -1vw !important;
}

.footer .footer-mid-area {
    padding: 0 77px;
}

.footer .footer-mid-area .footer-columns {
    display: flex;
    gap: 158px;
    color: #fff;
}

.footer .footer-mid-area .footer-columns a {
    color: #ffffff;
}

.footer .footer-copywrite {
    display: flex;
    padding: 77px 77px 0;
    gap: 177px;
}

.footer .footer-copywrite p,
.footer .footer-copywrite a {
    color: #949494;
}

.footer .footer-copywrite .site-policies-links {
    display: flex;
    gap: 42px;
}

.add-msm {
    position: absolute;
    top: 14px;
    right: 22px;
    padding: 5px 7px;
    background: #000000;
    border-radius: 50px;
    color: #fff;
    gap: 6px;
    z-index: 2;
}

.add-msm img {
    transform: unset !important;
    transition: 650ms ease;
}

.add-msm img.pf-icon {
    width: 22px;
}

.add-msm:hover {
    color: #ffffff;
}

.add-msm:hover img.checky-ef {
    transform: scale(1.14) !important;
}

/****** Collections******/
.recent-pro-members a {
    position: relative;
    margin-right: -34px;
    width: 87px;
    height: 87px;
    border: 6px solid transparent;
    border-radius: 100px;
    transition-timing-function: ease;
    transition-duration: 0.2s;
}

.recent-pro-members a img {
    width: 100%;
    object-fit: cover;
    border-radius: 100px;
    height: 100%;
}

.recent-pro-members a:last-of-type {
    margin-right: -10px;
}

.recent-pro-members a:hover {
    transform: translateY(-2px);
}

.recent-pro-members a:nth-child(1) {
    z-index: 5;
}

.recent-pro-members a:nth-child(2) {
    z-index: 4;
}

.recent-pro-members a:nth-child(3) {
    z-index: 3;
}

.recent-pro-members a:nth-child(4) {
    z-index: 2;
}

.recent-pro-members a:nth-child(5) {
    z-index: 1;
}

.recent-pro-members p {
    white-space: nowrap;
}

.collections-listing {
    border-bottom-left-radius: 50px;
    border-bottom-right-radius: 50px;
    padding-bottom: 80px;
    background: #ffffff;
    position: relative;
    z-index: 9;
}

.collections-listing .video-box {
    border-radius: 20px;
    background: #d9d9d9;
    overflow: hidden;
    position: relative;
    cursor: default;
}

.collections-listing .video-box::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.6);
}

.collections-listing .video-box .box-rely-content {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 25px;
}

.collections-listing .video-box .box-rely-content a {
    font-weight: 500;
    line-height: 1.19;
    position: relative;
    z-index: 2;
}

.collections-listing video {
    width: 100%;
    height: 19.722rem;
    display: block;
    background: #ccc;
    object-fit: cover;
}

.msm-pagination .page-item {
    position: relative;
}

.msm-pagination .page-item .page-link {
    border: none;
    background: transparent;
    color: #000;
    padding: 10px 15px 5px;
    font-size: 1.222rem;
    outline: none;
    box-shadow: none;
}

.msm-pagination .page-item.active::after {
    content: "";
    height: 2px;
    width: 23px;
    background: #000;
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translate(-50%, 0);
}

.collections-listing .post-box {
    width: 100%;
    margin-right: 0;
}

.collections-listing .post-box img {
    width: 100%;
}

.collections-listing .post-box img.pf-icon {
    width: 22px;
}

/****** Collections******/

.d-tags {
    max-width: 1000px;
}

.dropdown-area .form-select {
    max-width: 200px;
    min-width: 200px;
}

/****** Project Detail ******/

.fixed-pages-hero-area {
    background: linear-gradient(180deg, #f3f3f3 0%, #ffffff 100%);
    position: relative;
    z-index: 9;
    cursor: default;
}

.fixed-pages-hero-area .hero-banner {
    cursor: default;
}

.fixed-pages-hero-area .project-banner {
    padding: 128px 77px 0;
    position: relative;
}

.fixed-pages-hero-area .project-banner img.project-poster {
    object-fit: cover;
    border-radius: 20px;
    width: 100%;
    height: 520px;
    overflow: hidden;
}

.fixed-pages-hero-area .project-banner .global-authors {
    left: 100px;
}

.fixed-pages-hero-area .add-msm {
    right: 77px;
    top: 134px;
}

.fixed-pages-hero-area .add-msm img {
    margin: 0;
}

.fixed-pages-hero-area .global-authors {
    left: 23px;
}

.fixed-pages-hero-area .hero-banner-badge {
    position: absolute;
    right: 0;
    bottom: 54px;
    background: #1c1d20;
    padding: 10px;
    max-width: 205px;
    border-top-left-radius: 50px;
    border-bottom-left-radius: 50px;
    z-index: 9;
}

.fixed-pages-hero-area .hero-banner-badge img {
    margin: 0;
    width: 64px;
    height: 64px;
    border-radius: 64px;
}

.fixed-pages-hero-area .hero-banner-badge p {
    color: #ffffff;
}

.fixed-pages-hero-area .category-titles-area {
    position: sticky;
    bottom: 166px;
    margin-top: 55px;
}

.o-project-info {
    display: flex;
    gap: 8px;
}

.o-project-info .inner-info {
    min-width: 234px;
}

.project-user img {
    width: 80px;
    height: 80px;
    border-radius: 10px;
}

.sticky-bar .info .logoImage {
    max-width: 66px;
    max-height: 66px;
    border-radius: 10px;
}

.about-project-detail {
    padding: 70px 0 0 0;
}

.about-project-detail h1 {
    margin-bottom: 75px;
    font-weight: 600;
}

.about-project-detail .project-gallery {
    padding-top: 80px;
    padding-bottom: 80px;
}

.about-project-detail .project-full-banner {
    margin: 80px 0;
}

.p-highlights {
    background: #f7f7f7;
}

.credits-tags .pro-cards {
    margin-right: 0;
}

.behind-scene {
    padding: 90px 0 90px 77px;
    background: url("../images/dots-bg.svg"), #000000 repeat;
}

.behind-scene h4,
.behind-scene p {
    color: #ffffff;
}

.behind-scene .tabs-area {
    padding-right: 77px;
}

.behind-scene .tabs-area .nav-tabs {
    border: none;
}

.behind-scene .tabs-area .nav-tabs .nav-link {
    background: transparent;
    border: none;
    padding: 0 0 6px 0;
    font-size: 1.389rem;
    color: #949494;
    margin-right: 40px;
}

.behind-scene .tabs-area .nav-tabs .nav-link.active {
    border-bottom: 3px solid #ffffff;
    color: #ffffff;
}

.behind-scene .tabs-area .tab-content {
    margin-top: 45px;
}

.behind-scene .tabs-area .tab-content p {
    font-size: 1.222rem;
    font-weight: normal;
    line-height: 1.5;
}

.behind-scene .tabs-slider-bts .slider-arrow {
    padding-right: 77px;
    margin-bottom: 34px;
}

.behind-scene .tabs-slider-bts .slider-arrow img {
    filter: brightness(0) saturate(100%) invert(100%) sepia(9%) saturate(7500%) hue-rotate(286deg) brightness(109%) contrast(113%);
}

.key-insights {
    background: #f7f7f7;
    padding: 74px 16px 60px;
}

.key-insights-box {
    min-height: 105px;
    border: 1px solid #000;
    border-radius: 20px;
}

.key-insights-box .insights-box-item {
    flex: 1;
    height: 100%;
    padding: 0 50px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    border-right: 1px solid #000;
}

.key-insights-box .insights-box-item label {
    margin-bottom: 3px;
    color: #3c3c3c;
    line-height: 1.3;
}

.key-insights-box .insights-box-item:last-child {
    border: none;
}

.credits-tags {
    padding: 50px 0;
    position: relative;
    z-index: 9;
    background: #fff;
}

.credits-tags .pro-card-box {
    border: 1px solid #000;
    border-radius: 20px;
    padding: 25px 35px;
}

.credits-tags .tags-area {
    margin-top: 80px;
}

.related-listing {
    background: #f7f7f7;
    z-index: 9;
}

.site-bottom section {
    border-bottom-left-radius: 50px;
    border-bottom-right-radius: 50px;
}

/********** blog_content *********/

.about-project-detail p {
    font-size: 1.667rem;
    margin-top: 0.25rem;
    margin-bottom: 1.1rem;
}

.about-project-detail p a {
    color: inherit;
    text-decoration: underline;
    font-size: inherit;
}

/* --Image and Video Start-- */
.image-row,
.image-column {
    display: flex;
    flex-direction: column;
    max-height: 1280px;
}

.image-column {
    gap: 1.1rem;
}

.image-container,
.image-column-container,
.video-container,
.video-column-container {
    margin: 0;
    padding: 0;
    border-radius: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    margin-bottom: 10px;
    overflow: hidden;
    max-height: 1280px;
}

.stretched-vertical {
    height: 1280px !important;
    max-height: none !important;
}

.responsive-image,
.responsive-video {
    width: 100%;
    max-width: 100%;
    flex-grow: 1;
    display: block;
    border-radius: 20px;
    overflow: hidden;
    object-fit: cover;
}

.video-column-container .responsive-video {
    width: auto;
    max-width: 100%;
}

.image-caption,
.video-caption {
    text-align: center;
    font-size: 14px;
    color: #555;
    margin-top: 30px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-height: 20px;
}

figure.image-container,
figure.image-column-container,
figure.stretched-vertical {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    max-height: 1280px;
}

.video-container,
.video-column-container,
.stretched-vertical.video-container,
.stretched-vertical.video-column-container {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    max-height: 1280px;
}

/* --Image and Video End-- */

/* --Gallery Start-- */
.gallery-container {
    display: block;
    margin: 0 auto;
    align-items: center;
    text-align: center;
}

.media-item {
    margin-bottom: 1.1rem;
}

.media {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 20px;
}

/* --Gallery End-- */

/* --Quote Start-- */
.quote-container {
    margin: 20px 0;
    text-align: center;
}

.quote-text {
    display: inline-block;
    margin: 0 auto;
    text-align: center;
}

.quote-container p {
    font-style: italic;
    margin-bottom: 10px;
}

.quote-container cite {
    display: block;
    text-align: right;
    font-style: normal;
    margin-top: 10px;
}

/* --Quote End-- */

/* --Columns Start-- */
.columns {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
    justify-content: center;
    margin-top: 10px;
}

.column {
    flex: 1;
    min-width: 300px;
    gap: 1.1rem;
    margin-bottom: 1.1rem;
    display: flex;
    justify-content: center;
    align-content: center;
    align-items: center;
    /* flex-direction: column; */
}

/* --Cell Content Styling-- */
.column .cell {
    box-sizing: border-box;
    overflow: hidden;
    max-height: 1280px;
    display: flex;
    align-items: stretch;
    flex-direction: column;
    justify-content: center;
}

/* Handle overflow content */
.column .cell>* {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    text-overflow: ellipsis;
}

/* --Columns End-- */


/* --CodeBlock Start-- */
.codeBlock {
    background-color: rgb(255, 255, 255);
    color: rgb(95, 92, 92);
    border-radius: 4px;
    padding: 10px;
    overflow-x: auto;
    font-family: monospace;
    font-size: 0.75em;
    border: 1px solid;
}

/* --CodeBlock End-- */

/* --Table Start-- */
.styled-table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 20px;
    font-family: Arial, sans-serif;
}

.styled-table th,
.styled-table td {
    padding: 10px;
    text-align: left;
    border: 1px solid #ddd;
}

.styled-table th {
    background-color: #f4f4f4;
    font-weight: bold;
}

.styled-table td {
    font-size: 14px;
}

.styled-table td strong {
    font-weight: bold;
}

.styled-table td em {
    font-style: italic;
}

.styled-table caption {
    font-size: 18px;
    font-weight: bold;
    margin-bottom: 10px;
}

.styled-table tr:nth-child(even) {
    background-color: #f9f9f9;
}

.styled-table tr:hover {
    background-color: #f1f1f1;
}

/* --Table End-- */
.image-caption {
    font-size: 18px;
    margin-top: 15px;
}

/* --embed Start-- */
.embed-container {
    width: 100%;
    max-width: 100%;
    position: relative;
    padding-bottom: 56.25%;
    /* 16:9 aspect ratio (9/16 = 0.5625) */
    height: 0;
    overflow: hidden;
    border-radius: 20px;
}

.embed-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

.embed-container .embed-caption {
    text-align: center;
    margin-top: 8px;
    font-size: 14px;
    color: #333;
}

/********** blog_content end *********/


/********** Profile Page *********/
.profile_info {
    border-bottom-left-radius: 50px;
    border-bottom-right-radius: 50px;
}

.profile-main-info .site-container {
    max-width: 1358px;
}

.profile-main-info h2 {
    -webkit-line-clamp: 5;
    -webkit-box-orient: vertical;
    display: -webkit-box;
    overflow: hidden;
    line-height: 1.35;
}

.profile-main-info .social-icon {
    gap: 14px;
}

.profile-main-info .social-icon a {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 48px;
    height: 48px;
    border: 1px solid #949494;
    border-radius: 90px;
}

.primary-btn {
    padding: 12px 48px;
    background: #000000;
    border-radius: 48px;
    color: #ffffff;
    border: 1px solid transparent;
}

.primary-btn:hover {
    color: #909090;
}

.primary-btn.outline {
    border: 1px solid #000000;
    color: #000000;
    background: transparent;
}

.primary-btn.outline:hover {
    color: #000000;
}

.google-logo {
    width: 2em;
    height: auto;
}

.profile-sotd .top-site {
    background: #eb6545;
}

.featured-story {
    background: #ffffff;
    overflow: hidden;
    cursor: none;
}

.featured-story .fullscreen-layered-images {
    position: absolute;
    transition: transform 0.5s;
}

.featured-story .fullscreen-layered-images.layered-images-right {
    right: 0;
    top: 10%;
}

.featured-story .fullscreen-layered-images.layered-images-left {
    left: 0;
    bottom: 15%;
}

.featured-story .featured-story-main {
    background: #3d4951;
    padding: 275px 0;
    border-radius: 44px;
    position: relative;
}

.featured-story .fullscreen-layered-images-item {
    position: relative;
}

.featured-story .fullscreen-layered-images-item .fullscreen-layered-images-item-wrapper {
    padding: 0 140px;
    max-width: 1088px;
    margin: 0 auto;
    color: #ffffff;
}

.site-banner-area .profile-logo {
    position: absolute;
    bottom: -64px;
    left: 64px;
}

.site-banner-area .profile-logo img {
    border-radius: 10px;
    max-width: 132px;
}

.profile-page .hero-area h1 {
    line-height: 0.9;
}

.profile-page .hero-area h1 .card-tag {
    position: absolute;
    right: 77px;
    top: -48px;
}

/********* Site Pro Menu ******/
input#menu {
    display: none;
}

header .pro-menu {
    width: 48px;
    height: 48px;
    background: #000;
    border-radius: 99px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    cursor: pointer;
    position: relative;
}

header .pro-menu span {
    min-width: 23px;
    width: 23px;
    height: 1px;
    background: #fff;
    transition: transform 0.3s;
}

header .pro-menu span.bar-2 {
    margin-top: 10px;
}

header .pro-menu.close-menu span {
    transform: rotate(45deg);
    margin: 0px;
}

header .pro-menu.close-menu span.bar-2 {
    transform: rotate(-45deg);
}

.pro-menu-listing {
    display: flex;
    flex-direction: column;
    background: linear-gradient(180deg, #262626 0%, #000 100%);
    min-width: 1156px;
    height: 617px;
    position: fixed;
    top: 30px;
    left: 150px;
    padding: 62px 66px 62px 80px;
    border-radius: 26px;
    z-index: 9;
    overflow: auto;
    transition: 0.2s all;
    transform: scale(1);
}

.pro-menu-listing.scale-0 {
    transition: 0.2s all;
    transform: scale(0);
    top: -250px;
    left: -375px;
}

.pro-menu-listing .pro-menu-listing-nav {
    display: flex;
    justify-content: space-between;
    flex-direction: column;
    height: 100%;
}

.pro-menu-listing .pro-menu-listing-nav .nav-links-main {
    display: flex;
    height: 430px;
    overflow: auto;
}

.pro-menu-listing .pro-menu-listing-nav .nav-links-main .nav-links {
    width: 364px;
    padding-bottom: 130px;
}

.pro-menu-listing .pro-menu-listing-nav .nav-links-main .nav-links ul {
    padding: 0;
    margin: 0;
}

.pro-menu-listing .pro-menu-listing-nav .nav-links-main .nav-links ul li {
    overflow: hidden;
}

.pro-menu-listing .pro-menu-listing-nav .nav-links-main .nav-links ul a {
    font-size: 2.778rem;
    color: #fff;
    position: relative;
    padding-right: 15px;
    transition: 0.3s all;
    overflow: hidden;
}

.pro-menu-listing .pro-menu-listing-nav .nav-links-main .nav-links ul a::before {
    content: "";
    position: absolute;
    width: 48px;
    height: 30px;
    top: 50%;
    left: -50%;
    background: url("../images/nav-arrow.svg") no-repeat;
    transform: translate(0px, -50%);
    transition: 0.3s all;
    overflow: hidden;
}

.pro-menu-listing .pro-menu-listing-nav .nav-links-main .nav-links ul a.active,
.pro-menu-listing .pro-menu-listing-nav .nav-links-main .nav-links ul a:hover {
    padding-left: 68px;
}

.pro-menu-listing .pro-menu-listing-nav .nav-links-main .nav-links ul a.active::before,
.pro-menu-listing .pro-menu-listing-nav .nav-links-main .nav-links ul a:hover::before {
    left: 0;
}

.pro-menu-listing .pro-menu-listing-nav .nav-links-main .sub-nav-links {
    border-left: 1px solid #555;
}

.pro-menu-listing .pro-menu-listing-nav .nav-links-main .sub-nav-links ul li {
    overflow: hidden;
}

.pro-menu-listing .pro-menu-listing-nav .nav-links-main .sub-nav-links ul a {
    font-size: 2.778rem;
    color: #fff;
    position: relative;
    transition: 0.3s all;
}

.pro-menu-listing .pro-menu-listing-nav .nav-links-main .sub-nav-links ul a::before {
    content: "";
    position: absolute;
    width: 48px;
    height: 30px;
    top: 50%;
    left: -50%;
    background: url("../images/nav-arrow.svg") no-repeat;
    transform: translate(0px, -50%);
    transition: 0.3s all;
    overflow: hidden;
}

.pro-menu-listing .pro-menu-listing-nav .nav-links-main .sub-nav-links ul a.active,
.pro-menu-listing .pro-menu-listing-nav .nav-links-main .sub-nav-links ul a:hover {
    padding-left: 68px;
}

.pro-menu-listing .pro-menu-listing-nav .nav-links-main .sub-nav-links ul a.active::before,
.pro-menu-listing .pro-menu-listing-nav .nav-links-main .sub-nav-links ul a:hover::before {
    left: 0;
}

.pro-menu-listing .pro-menu-listing-nav .pro-member-info {
    display: flex;
    justify-content: space-between;
}

.pro-menu-listing .pro-menu-listing-nav .pro-member-info .member-info {
    width: 365px;
    border-right: 1px solid #555;
}

.pro-menu-listing .pro-menu-listing-nav .pro-member-info .member-info .member-info-links p {
    color: #fff;
    width: 150px;
    margin-right: 10px !important;
}

.pro-menu-listing .pro-menu-listing-nav .pro-member-info .pro-social-links {
    gap: 14px;
}

.pro-menu-listing .pro-menu-listing-nav .pro-member-info .pro-social-links a {
    display: flex;
    justify-content: center;
    align-items: center;
    border: 1px solid #fff;
    width: 50px;
    height: 50px;
    border-radius: 100%;
}

.pro-menu-listing .pro-menu-listing-nav .pro-member-info .pro-social-links a img {
    filter: brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(21%) hue-rotate(329deg) brightness(103%) contrast(101%);
}

.mobile-menu {
    display: none;
}

.close-mobile-menu {
    display: none;
    width: 36px;
    height: 36px;
    justify-content: center;
    align-items: center;
    background: #000;
    border-radius: 100%;
    position: absolute;
    top: 13px;
    right: 12px;
}

/********* Site Pro Menu ******/
/******** Site Filter ********/
.site-filter .select-filters {
    gap: 16px;
}

/* .site-filter .rounded-pill {
    width: 220px !important;
} */
.site-filter .select-filters button {
    width: 200px;
    font-size: 0.889rem;
    height: 46px;
    min-width: 200px;
    border-radius: 24px;
    border: 1px solid #949494;
    background: transparent;
    text-align: start;
    padding: 8px 22px;
    transition: 0.3s all;
    position: relative;
    color: #000;
}

.site-filter .select-filters button.dropdown-toggle::after {
    border: none;
    background: url("../images/down.svg") no-repeat;
    background-size: 100%;
    position: absolute;
    right: 15px;
    width: 12px;
    height: 8px;
    top: 52%;
    transform: translate(0px, -50%);
    transition: 0.3s all;
}

.site-filter .select-filters button.dropdown-toggle.show {
    border-bottom: none;
    border-radius: 0;
    border-top-left-radius: 24px;
    border-top-right-radius: 24px;
}

.site-filter .select-filters button.dropdown-toggle.show::after {
    transform: rotate(180deg) translate(0, 35%);
}

.site-filter .select-filters ul.dropdown-menu {
    border: 1px solid #949494;
    width: 100%;
    top: -5px !important;
    padding: 0;
    border-top: none;
    border-radius: 0;
    border-bottom-left-radius: 24px;
    border-bottom-right-radius: 24px;
    overflow: hidden;
    z-index: 1000;
}

.site-filter .select-filters ul.dropdown-menu .dropdown-item {
    font-size: 0.889rem;
    white-space: normal;
    padding: 4px 22px;
    color: #000;
}

/******** Site Filter ********/
/* ****************Series Page Description*********************** */
.bordor-bottom {
    border-bottom: 1px solid #cdcdcd;
}

/* ********************************************** */
/******** Slides Post BOXes ********/
.slick-slide {
    height: auto;
}

.slides-boxes .slides-box-slider img {
    width: 100%;
    height: 420px;
    object-fit: cover;
    border-radius: 10px;
}

.slides-boxes .slides-box-slider img.df-image {
    height: 20rem;
}

.slides-boxes h4 {
    color: #949494;
    line-height: 1.4;
}

.slides-boxes a.goto-link {
    width: 20px;
    transition: 0.5s all;
    position: relative;
    overflow: hidden;
}

.slides-boxes a.goto-link img {
    transform: translate(30px, 0);
    transition: 0.3s all;
}

.slides-boxes .post-box-goto:hover .goto-link img {
    transform: translate(0, 0);
}

.tag-avail {
    background: #d7a8a8;
    padding: 0px 10px;
    border-radius: 100px;
    background: #e6ff9d;
}

.tag-avail.available-tag {
    background: #e6ff9d;
}

.profile-pro-tag {
    width: 85px;
    padding: 5px 12px 5px 8px !important;
    text-align: center;
}

.post-box-slides {
    overflow: hidden;
    height: 20rem;
    border-radius: 20px;
    background: #e9e9e9;
}

.post-box-slides .company-logo {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 2;
}

.post-box-slides .company-logo img {
    width: 172px;
    height: 172px;
    object-fit: cover;
    border-radius: 20px;
    box-shadow: 0 100px 80px #00000033;
}

.post-box-slides .card-tag {
    position: absolute;
    top: 10px;
    right: 14px;
    padding: 8px;
    gap: 6px;
}

.post-box-slides .card-tag img {
    width: 20px;
}

.post-box-slides .card-tag span {
    min-width: 35px;
    font-size: 14px;
}

.post-box-slides .slides-box-links {
    padding: 16px;
}

.ProgressBarDots {
    position: absolute;
    top: 10px;
    margin: 0;
    padding: 0;
    left: 10px;
    width: calc(100% - 145px);
    z-index: 3;
}

.post-box-slides:hover .ProgressBarDots .slick-dots li.slick-active .ProgressBarDotsItem {
    width: 100%;
}

.slides-box-links {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 96%;
    background: linear-gradient(180deg,
            rgba(217, 217, 217, 0) 0%,
            rgba(0, 0, 0, 0.54));
    padding: 23px 23px 18px 23px;
    display: flex;
    justify-content: end;
    align-items: end;
    transition: 650ms all ease-out;
    z-index: 1;
    opacity: 0;
}

.slides-box-links .d-flex {
    margin-bottom: -35%;
    transition: all 0.5s;
}

.slides-box-links a {
    width: 55px;
    height: 55px;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 1px solid #fff;
    border-radius: 90px;
}

.slides-box-links a img {
    filter: brightness(0) saturate(100%) invert(100%) sepia(6%) saturate(24%) hue-rotate(277deg) brightness(108%) contrast(107%);
    width: auto !important;
    height: auto;
}

.post-box-slides:hover .slides-box-links,
.post-box:hover .slides-box-links,
.video-box:hover .slides-box-links {
    opacity: 1;
    transition: 650ms all ease;
}

.post-box-slides:hover .slides-box-links .d-flex,
.post-box:hover .slides-box-links .d-flex,
.video-box:hover .slides-box-links .d-flex {
    margin-bottom: 0;
}

.video-box:hover .slides-box-links {
    background: transparent;
}

.directory-featured-area {
    padding: 92px 0 120px;
    background: #000;
    color: #fff;
    position: relative;
    z-index: 9;
}

.directory-featured-area p {
    color: #949494;
}

.truncated-about-text {
    /* width: 20%; */
    display: -webkit-box;
    /* Webkit box model for line clamping */
    display: box;
    /* Standard box model */
    -webkit-box-orient: vertical;
    /* Webkit orientation for vertical text */
    box-orient: vertical;
    /* Standard orientation for vertical text */
    -webkit-line-clamp: 2;
    /* Webkit-specific line clamp */
    line-clamp: 2;
    /* Standard line clamp */
    overflow: hidden;
    /* Hide overflowing content */
    text-overflow: ellipsis;
    /* Add ellipsis for overflowing text */
    white-space: normal;
    /* Ensure text wraps within lines */
}

.directory-featured-area .primary-btn {
    background: #fff;
    color: #000;
    font-weight: 600;
}

.directory-featured-area .size-90 {
    line-height: 1;
}

.directory-featured-area .post-box-slides .company-logo img {
    width: 220px;
    height: 220px;
}

/******** Slides Post BOXes ********/
/*********** Directory Title *****************/
.body-key .banner-area h1 {
    letter-spacing: -8px;
}

.progressBarContainer {
    position: absolute;
    top: 12px;
    left: 16px;
    right: 109px;
    display: flex;
    justify-content: space-between;
    gap: 12px;
    z-index: 9;
}

.progressBarContainer div {
    display: block;
    padding: 0;
    cursor: pointer;
    margin-right: 0;
    color: white;
    flex: 1;
}

.progressBarContainer div span.progressBar {
    width: 100%;
    height: 6px;
    background-color: rgba(255, 255, 255, 0.2);
    /* Inactive bar color */
    display: block;
    border-radius: 22px;
    position: relative;
    overflow: hidden;
}

.progressBarContainer div span.progressBar .inProgress {
    background-color: rgb(255, 255, 255);
    /* Active bar color */
    width: 0%;
    height: 100%;
    border-radius: 22px;
    transition: width 5s linear;
    /* Adjust duration as needed */
}

.progressBarContainer div.active span.progressBar {
    background-color: rgba(255,
            255,
            255,
            0.6);
    /* Highlight the current bar background */
}

.progressBarContainer div.active span.progressBar .inProgress {
    width: 100%;
    /* Fills the active bar over time */
    background-color: rgba(255, 255, 255, 0.8);
}

.directory-featured-area .post-box-slides {
    height: 496px;
}

.directory-featured-area .slides-boxes .slides-box-slider img {
    height: 496px;
}

.slide-post-box {
    z-index: 9;
    background: #fff;
    border-bottom-left-radius: 50px;
    border-bottom-right-radius: 50px;
}

/********** Websites Page ***************/
.websites-page .banner-area .banner-dis {
    border-bottom: none !important;
}

.site-tabs-contents {
    background: #ffffff;
    z-index: 1;
    position: relative;
}

.website-tabs {
    border-bottom: 1px solid #cdcdcd;
    overflow: auto;
}

.website-tabs .nav-tabs {
    flex-wrap: nowrap;
}

.nav-tabs {
    border-bottom: none !important;
}

.nav-tabs .nav-link {
    color: #949494;
    border: none;
    outline: none;
}

.nav-tabs .nav-item.show .nav-link,
.nav-tabs .nav-link.active {
    color: #000000;
    border: none;
}

.nav-link {
    padding: 0 40px 0 0;
}

.ad-area {
    background: #f7f7f7;
    border-radius: 20px;
}

.ad-area img {
    width: auto;
    height: auto;
    max-width: 100%;
}

.post-box:hover .ad-area img {
    transform: scale(1);
}

.site-bottom .site-plus-subscription {
    border-bottom-left-radius: 50px;
    border-bottom-right-radius: 50px;
}

.site-plus-subscription {
    z-index: 1;
    background: #000000;
    padding: 90px 0 60px;
}

.site-plus-subscription p {
    color: #949494;
}

.site-plus-subscription .plus-features ul {
    max-width: 770px;
}

.site-plus-subscription .plus-features ul li {
    width: 50%;
    flex: 0 0 50%;
    padding-left: 38px;
    position: relative;
}

.site-plus-subscription .plus-features ul li::before {
    content: "";
    background: url("../images/plus-check.svg") no-repeat;
    position: absolute;
    left: 0;
    top: 9px;
    width: 22px;
    height: 22px;
}

.site-plus-subscription .plan-toogle {
    max-width: 420px;
}

.site-plus-subscription .nav {
    position: relative;
    width: 100%;
    height: 70px;
    border-radius: 300px;
    background-color: #1f1f1f;
}

.site-plus-subscription .nav__list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    height: 100%;
    width: 100%;
    z-index: 1;
}

.site-plus-subscription .nav__item {
    position: relative;
    flex: 1;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1;
}

.site-plus-subscription .nav__link {
    display: flex;
    flex: 1;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: #ffffff;
    text-decoration: none;
    transition: color 0.3s ease-in-out;
}

.site-plus-subscription .nav-copy .nav__link {
    transition: color 0.3s ease-in-out;
}

.site-plus-subscription .nav__link_active {
    color: #000000;
}

.site-plus-subscription .nav__slider {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    padding: 10px 12px;
    pointer-events: none;
    z-index: 0;
}

.site-plus-subscription .nav-copy .nav__slider {
    left: 12px;
    right: 12px;
    padding: 10px 12px;
}

.site-plus-subscription .nav__slider-rect {
    width: 50%;
    height: 100%;
    background-color: #ffffff;
    border-radius: 77px;
    transition: transform 0.4s;
    box-shadow: 1px 1px 3px rgba(0, 42, 50, 0.15);
    box-shadow: 0px 2px 7px 0px rgba(15, 40, 81, 0.37);
}

.site-plus-subscription .nav-copy .nav__slider-rect {
    position: absolute;
    top: 10px;
    left: 0;
    right: 50%;
    bottom: 10px;
    height: auto;
    width: auto;
    transition: all 0.3s cubic-bezier(1, 0.48, 0.71, 0.96);
}

.select-plan-card {
    max-width: 824px;
    gap: 24px;
}

.select-plan-card .plan-card {
    flex: 1;
    background: linear-gradient(180deg, #232323 0%, #0b0b0b 100%);
    border-radius: 20px;
    padding: 16px 16px 26px;
    max-width: 500px;
    min-height: 236px;
    justify-content: space-between;
    cursor: pointer;
    border: 1px solid #000000;
}

.select-plan-card .plan-card .add-msm {
    top: 0;
    right: 0;
}

.dropdown-item .add-msm {
    top: 0;
    right: 0;
}

.select-plan-card .plan-card.selected,
.select-plan-card .plan-card:hover {
    background: linear-gradient(180deg, #7a7979 0%, #292929 100%);
    border: 1px solid #ebff98;
}

.select-plan-card .plan-card .save-tag .peroff-tag {
    color: #e7ff88;
    padding: 2px 12px;
    background: #000;
    border-radius: 16px;
}

.subscription-btn {
    width: 265px;
    height: 74px;
    color: #000000;
    background: #e7ff88;
    border: 1px solid #949494;
    font-size: 22px;
    font-weight: 600;
    margin-bottom: 54px;
}

.websites-page .primary-btn {
    padding: 12px 44px;
}

/********** Websites Page ***************/
/********* Plus Page ************/
.plus-page main {
    padding-top: 0;
}

.plus-page .banner-area {
    background: #000000;
    padding-top: 80px;
    padding-bottom: 0;
}

.plus-page .banner-area .site-container {
    position: relative;
}

.plus-page .banner-area .site-container video {
    position: sticky;
    top: 220px;
    display: block;
    transform: scale(1);
    transition: transform 0.5s ease;
    margin: 0 auto;
    width: 518px;
    z-index: 3;
}

.plus-page .banner-area .site-container h1 {
    padding-bottom: 480px;
    max-width: 1256px;
    display: block;
    margin: -52vh auto 0;
}

.plus-page .banner-area .bottom-overlay {
    position: absolute;
    bottom: 50px;
    height: 945px;
    width: 100%;
    left: 0;
    background: linear-gradient(180deg, #000 45%, rgba(15, 15, 15, 0) 100%);
    transform: rotate(-180deg);
}

.plus-page .site-plus-subscription {
    padding: 40px 0 60px;
}

.plus-main-info {
    background: #f7f7f7;
}

.plus-page .subscription-btn {
    background: #e7ff88;
}

.plus-advantages {
    background: #ffffff;
    z-index: 9;
}

.plus-advantages .col-lg-6:first-child .get-plus-post {
    background: #f19100;
}

.plus-advantages .col-lg-6:nth-child(2) .get-plus-post {
    background: #e2e0ce;
}

.plus-advantages .col-lg-6:nth-child(4) .get-plus-post {
    background: #303030;
}

.plus-advantages .add-msm {
    right: 0;
    top: 0;
    padding: 5px 7px 5px 12px;
}

.get-plus-post {
    background: #efefef;
    border-radius: 18px;
    padding: 54px 0 48px 0;
}

.get-plus-post .top-post-image {
    margin-bottom: 58px;
    flex: 1;
}

.get-plus-post .top-post-image img {
    max-width: 80%;
}

.get-plus-post .get-plus-post-dis {
    padding: 0 42px;
}

.get-plus-post .get-plus-post-dis h4 {
    max-width: 432px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    text-overflow: ellipsis;
    overflow: hidden;
}

.get-plus-post .get-plus-post-dis p {
    max-width: 410px;
}

.event-area {
    background-color: #ffffff;
    z-index: 1;
}

.top-designed-slides .event-area-main {
    margin-right: 54px;
}

.event-area-main {
    padding: 60px 75px 50px 80px;
    background: #fdc8d5;
    border-radius: 18px;
}

.event-area-main .event-below-title {
    max-width: 618px;
}

.plus-page .event-area {
    margin-right: 0 !important;
}

.event-details {
    gap: 120px;
    background: #eceef3;
    border-radius: 18px;
    margin-right: 54px;
}

.event-details .event-poster {
    width: 552px;
    height: 400px;
}

.event-details .event-poster .poster-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 18px;
}

.event-details .event-poster .add-msm {
    right: unset;
    left: 22px;
}

.event-details .event-poster .add-msm .indicator-aler {
    background: #7d0000;
    width: 25px;
    height: 25px;
    border-radius: 25px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.event-details .event-poster .add-msm .indicator-aler::after {
    content: "";
    width: 15px;
    height: 15px;
    border-radius: 15px;
    background: #ff0000;
}

.event-details .event-poster .poster-event-logo {
    position: absolute;
    width: 190px;
    height: 190px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 18px;
    box-shadow: 0px 61px 90px 0px rgba(0, 0, 0, 0.55);
}

.event-poster-dis {
    flex: 1;
}

.event-poster-dis .event-dateandtime {
    background: #fff;
    border-radius: 25px;
}

.event-poster-dis .global-authors {
    left: 0;
    bottom: 0;
}

.event-poster-dis .primary-btn {
    padding: 12px 28px;
}

.faq-area {
    padding: 112px 0;
    z-index: 1;
    background: #fff;
    border-bottom-left-radius: 50px;
    border-bottom-right-radius: 50px;
}

.faq-area .faq-main .faq-subtitle {
    color: #949494;
    max-width: 245px;
}

.accordion-item,
.accordion-item:first-of-type,
.accordion-item:not(:first-of-type),
.accordion-item:last-of-type {
    border: 1px solid #000;
    border-radius: 30px;
    margin-bottom: 16px;
}

.accordion-item button,
.accordion-item .accordion-button:not(.collapsed),
.accordion-item:first-of-type button,
.accordion-item:first-of-type .accordion-button:not(.collapsed),
.accordion-item:not(:first-of-type) button,
.accordion-item:not(:first-of-type) .accordion-button:not(.collapsed),
.accordion-item:last-of-type button,
.accordion-item:last-of-type .accordion-button:not(.collapsed) {
    border-radius: 30px;
    background: transparent;
    border: none;
    box-shadow: none;
    padding: 20px;
    color: #000;
}

.accordion-item .accordion-button:not(.collapsed)::after,
.accordion-item:first-of-type .accordion-button:not(.collapsed)::after,
.accordion-item:not(:first-of-type) .accordion-button:not(.collapsed)::after,
.accordion-item:last-of-type .accordion-button:not(.collapsed)::after {
    background-image: url("../images/minus.svg");
    transform: none;
}

.accordion-item .accordion-button::after,
.accordion-item:first-of-type .accordion-button::after,
.accordion-item:not(:first-of-type) .accordion-button::after,
.accordion-item:last-of-type .accordion-button::after {
    background-image: url("../images/plus.svg");
}

/********* Plus Page ************/
/******** Pro page************/
.pro-page .banner-area .site-container h1 {
    max-width: 1120px;
}

.pro-page .plus-advantages .col-lg-6:first-child .get-plus-post {
    background: #000000;
}

.pro-page .plus-advantages .col-lg-6:nth-child(2) .get-plus-post img {
    margin-top: -54px;
}

.pro-page .plus-advantages .col-lg-6:nth-child(4) .get-plus-post,
.pro-page .plus-advantages .col-lg-6:nth-child(5) .get-plus-post {
    background: #000000;
}

.pro-page .plus-advantages .col-lg-6:nth-child(6) .get-plus-post {
    background: #e5e0d9;
}

.pro-page .plus-advantages .card-tag img {
    width: 35px !important;
}

.pro-page .plus-advantages .card-tag span {
    min-width: 58px;
}

.plus-page .plus-advantages .add-msm img.pf-icon {
    width: 35px !important;
}

.plus-page .plus-advantages .add-msm img.checky-ef {
    width: 46px;
}

.get-plus-post .get-plus-post-dis h4 {
    max-width: 525px;
}

/******** Pro page************/
/******* Choose Package *********/
#openPackage {
    transition: transform 0.3s ease;
    transform: rotate(0);
}

#openPackage.open-package {
    transform: rotate(45deg);
}

.choose-package.scale-0 {
    transition: 0.2s all;
    transform: scale(0);
    top: -41%;
    right: -42%;
    left: unset;
    bottom: unset;
}

.choose-package {
    position: fixed;
    top: 0;
    right: 0;
    background: #fff;
    z-index: 9;
    padding: 115px 77px 35px;
    width: 100%;
    height: 100vh;
    transition: 0.2s all;
    transform: scale(1);
}

.choose-package .package-area {
    display: block;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.choose-package .package-area .package-box {
    padding: 40px 36px 50px;
    border-radius: 20px;
    background: linear-gradient(180deg, #404040 0%, #000 52.6%, #141414 100%);
    cursor: default;
    transition: 1s all;
    cursor: pointer;
}

.choose-package .package-area .package-box p {
    color: #949494;
}

.choose-package .package-area .package-box.submit-package {
    background: #efefef;
}

.choose-package .package-area .package-box.submit-package .package-logo {
    max-width: 248px;
}

.choose-package .package-area .package-box .package-logo {
    max-width: 290px;
    margin: 0 auto;
    transition: 1s all;
}

.choose-package .package-area .package-box .package-logo img {
    width: 100%;
}

.choose-package .package-area .package-box .package-title .hover-detail {
    overflow: hidden;
}

.choose-package .package-area .package-box .package-title .hover-detail p {
    margin-top: -400px !important;
    transition: 0.5s ease;
}

.choose-package .package-area .package-box:hover .package-title .hover-detail {
    height: auto;
}

.choose-package .package-area .package-box:hover .package-title .hover-detail p {
    margin-top: 8px !important;
}

.choose-package .package-area .action-btn {
    display: flex;
    justify-content: center;
    align-items: center;
}

.choose-package .package-area .action-btn button {
    padding: 20px 15px;
    min-width: 265px;
    border: 1px solid #949494;
}

.choose-package .package-area .package-area-inner {
    height: 100%;
}

/******* Choose Package *********/
/******* Category Page *********/
.standered-area {
    position: relative;
    z-index: 9;
    background-color: #ffffff;
}

.standered-area .tags a {
    min-width: fit-content;
    padding: 8px 26px;
    font-size: 1.111rem;
}

.site-bottom .top-website .webiste-slider {
    padding-left: 77px;
}

section .directory-featured-area {
    border-radius: 58px;
    padding: 45px 0 62px;
    background: #1a1a1a;
}

section .directory-featured-area .progressBarContainer {
    right: 16px;
}

.top-website .lazy-slides-area-top-header {
    padding-right: 20px;
}

.directory-featured-area .card-tag {
    max-width: 94px;
}

hr {
    margin: 0;
    height: 1px;
    background: #000;
}

/************** Website Category *****************/
.website-category-page .profile-sotd .top-site {
    border-radius: 0;
    border-bottom-right-radius: 44px;
    border-bottom-left-radius: 44px;
}

.website-category-page .websites-tabs {
    margin-top: 64px;
}

.website-category-page .websites-tabs.fixed-active {
    position: fixed;
    bottom: 110px;
    width: 100%;
    left: 0;
}

.website-category-page .websites-tabs .nav-tabs {
    padding: 10px;
    border-radius: 120px;
    position: relative;
    backdrop-filter: blur(5px);
}

.website-category-page .websites-tabs .nav-tabs::before {
    content: "";
    position: absolute;
    inset: 0 0 0 0;
    background: rgba(0, 0, 0, 0.15);
    border-radius: 120px;
    z-index: -1;
}

.website-category-page .websites-tabs .nav-tabs button {
    padding: 12px 18px;
    border-radius: 120px;
    color: #fff;
}

.website-category-page .websites-tabs .nav-tabs .nav-link.active {
    background: #000000;
    color: #ffffff;
}

.website-category-page .top-site .site-preview-image img.top-site-title {
    top: -138px;
}

.website-category-page .msm-badge {
    bottom: unset;
    top: 500px;
}

.top-site .site-preview-image .sotd video {
    width: 100%;
    height: auto;
    border-radius: 28px;
    display: block;
}

.scrollable-content {
    overflow: hidden;
}

.scrollable-content.scrolled {
    overflow-y: scroll;
}

.top-site .fixed-nabs .nav-tabs {
    position: fixed !important;
    bottom: 110px;
    backdrop-filter: blur(5px);
}

.fixed-nabs .scroll-div {
    height: 70px;
}

.top-site.active .fixed-nabs .nav-tabs {
    position: unset !important;
    width: auto;
}

.top-site.active .scroll-div {
    height: 0;
    margin: 0;
}

/************** Website Category *****************/
/************ Submit Page ***********/
.submit-page .hero-area {
    cursor: default;
}

.submit-page .fixed-pages-hero-area {
    z-index: unset;
}

.site-tabs {
    padding: 15px 0 30px 0;
    position: sticky;
    bottom: 166px;
    max-width: calc(931px + 77px + 77px);
    margin: 0 auto;
}

.site-tabs.highz {
    z-index: 99;
}

.site-tabs .nav-tabs {
    padding: 10px 12px;
    background: #2f2f2f;
    border-radius: 300px;
}

.site-tabs .nav-tabs .nav-link {
    padding: 12px 40px;
    border-radius: 140px;
    font-size: 1rem;
    color: #fff;
}

.site-tabs .nav-tabs .nav-link.active {
    color: #000;
}

.submit-tabs-content {
    padding-bottom: 30px;
    z-index: 9;
}

.submit-tabs-content .tab-content {
    background: #f6f6f6;
    border-radius: 20px;
    padding: 45px 24px 35px 40px;
    height: calc(100vh - 157px);
}

.submit-tabs-content .tab-content .tab-pane {
    height: 100%;
}

.submit-tabs-content .tab-content .msm-tab-content {
    gap: 105px;
    height: 100%;
}

.submit-tabs-content .tab-content .msm-tab-content .tab-title-area {
    flex: 0 0 470px;
    width: 470px;
}

.submit-tabs-content .tab-content .msm-tab-content .scrollable-content::-webkit-scrollbar {
    width: 7px;
    background: #fff;
    border-radius: 20px;
}

.submit-tabs-content .tab-content .msm-tab-content .scrollable-content::-webkit-scrollbar-track {
    background: #ffffff;
    border-radius: 20px;
}

.submit-tabs-content .tab-content .msm-tab-content .scrollable-content::-webkit-scrollbar-thumb {
    background: #a3a3a3;
    border-radius: 20px;
}

.submit-tabs-content .tab-content .msm-tab-content .main-basic-content {
    padding: 0 32px;
}

.submit-tabs-content .tab-content .msm-tab-content .main-basic-content .site-filter .select-filters button {
    font-size: 1.222rem;
    height: auto;
    padding: 12px 52px 12px 15px;
    border: 1px solid #000;
    border-radius: 10px;
    color: #000;
    width: 100%;
    outline: none;
    box-shadow: none;
}

.submit-tabs-content .tab-content .msm-tab-content .main-basic-content .site-filter .select-filters button.dropdown-toggle.show {
    border-bottom: none;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

.submit-tabs-content .tab-content .msm-tab-content .main-basic-content .site-filter .select-filters ul.dropdown-menu {
    background: #fff;
    border: 1px solid #000;
    border-top: none;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
}

.submit-tabs-content .tab-content .msm-tab-content .main-basic-content .site-filter .select-filters ul.dropdown-menu .dropdown-item {
    font-size: 1.222rem;
    padding-left: 15px;
}

.submit-tabs-content .tab-content .msm-tab-content .main-basic-content .site-filter .select-filters button.dropdown-toggle::after {
    width: 18px;
    height: 12px;
}

.submit-tabs-content .tab-content .msm-tab-content .tab-basic-content {
    flex: 1;
    overflow: hidden;
}

.submit-tabs-content .tab-content .accordion-item,
.submit-tabs-content .tab-content .accordion-item:first-of-type,
.submit-tabs-content .tab-content .accordion-item:not(:first-of-type),
.submit-tabs-content .tab-content .accordion-item:last-of-type {
    border: none;
    background: transparent;
    border-bottom: 1px solid #cdcdcd;
    border-radius: 0;
    margin: 0;
}

.submit-tabs-content .tab-content .accordion-item .accordion-button::after,
.submit-tabs-content .tab-content .accordion-item:first-of-type .accordion-button::after,
.submit-tabs-content .tab-content .accordion-item:not(:first-of-type) .accordion-button::after,
.submit-tabs-content .tab-content .accordion-item:last-of-type .accordion-button::after {
    background-image: url("../images/plus-icon-black.svg");
    background-color: #fff;
    border-radius: 30px;
    width: 30px;
    height: 30px;
    background-position: center;
    background-size: 18px;
}

.submit-tabs-content .tab-content .accordion-item .accordion-button:not(.collapsed)::after,
.submit-tabs-content .tab-content .accordion-item:first-of-type .accordion-button:not(.collapsed)::after,
.submit-tabs-content .tab-content .accordion-item:not(:first-of-type) .accordion-button:not(.collapsed)::after,
.submit-tabs-content .tab-content .accordion-item:last-of-type .accordion-button:not(.collapsed)::after {
    transform: rotate(90deg);
}

.card-tag.card-tag-lg img {
    width: 35px !important;
}

.card-tag.card-tag-lg span {
    min-width: 58px;
}

.plus-includes-box {
    max-width: calc(50% - 0.5rem);
}

.plus-includes-box .check-icon {
    position: absolute;
    top: 14px;
    left: 18px;
}

.testimonial-box {
    padding: 25px 32px 32px;
    background: #fff;
    border-radius: 15px;
}

.testimonial-box:last-child {
    margin: 0 !important;
}

.testimonial-box img {
    width: 88px;
    height: 88px;
    object-fit: cover;
    border-radius: 15px;
    overflow: hidden;
    flex: 0 0 88px;
}

.testimonial-box .testimonial-content p {
    position: relative;
}

.req-box {
    min-height: 275px;
    position: relative;
    border-radius: 15px;
    padding: 20px;
    /* Combined the padding */
    background: #e6e8fa;
    /* Default background color */
    max-width: calc(50% - 0.5rem);
    /* Ensures it takes 50% of the container width */
    width: 100%;
    /* Ensures full width of container */
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    box-sizing: border-box;
    /* Ensures padding and border are included in the element's total width/height */
}

.req-box-website {
    background-color: #ffffff;
}

.req-box-instagram {
    background-color: #e6e8fa;
}

.req-box-facebook {
    background-color: #ecfe97;
}

.req-box-pinterest {
    background-color: #e2f1c0;
}

.req-box-twitter {
    background-color: #d9bfe4;
}

.req-box-newsletter {
    background-color: #e6e8fa;
}

.req-box-linkedin {
    background-color: #f9ffeb;
}

.req-box.grey-bg {
    background: #aeb8c6;
}

.req-box.brown-bg {
    background: #c3c6ae;
}

.req-box.green-bg {
    background: #b3c6ae;
}

.req-box .check-icon {
    position: absolute;
    top: 14px;
    left: 16px;
}

.hero-area .banner-title {
    position: absolute;
    inset: 0;
}

.hero-area .banner-title h1 {
    margin: 0 !important;
    letter-spacing: -8px;
}

/************ Submit Page ***********/
/*********** Sigin dialog **********/
.form-field input {
    display: block;
    width: 100%;
    padding: 13px 15px;
    font-size: 16px;
    border-radius: 10px;
    border: 1px solid #e2e1e5;
}

.form-field .form-select {
    padding: 13px 15px;
    font-size: 16px;
    border-radius: 10px;
    border: 1px solid #e2e1e5;
}

.select2-container--default .select2-selection--multiple {
    min-height: 52px !important;
    padding: 5px !important;
    border-radius: 10px !important;
    border: 1px solid #e2e1e5 !important;
}

.form-field input::placeholder {
    color: #d2d2d2;
}

.form-field input:focus {
    border: 1px solid #000;
}

.form-field textarea {
    width: 100%;
    padding: 13px 15px;
    border: 1px solid #e2e1e5;
    border-radius: 5px;
    resize: none;
    height: 150px;
    color: #000;
    box-shadow: none;
    outline: none;
    font-size: 16px;
}

.form-field textarea::placeholder {
    color: #d2d2d2;
}

.form-field textarea:focus {
    border: 1px solid #000;
}

.form-field .dropdown-toggle {
    padding: 13px 15px;
    background: transparent;
    color: #000;
    width: 100%;
    font-size: 16px;
    text-align: left;
    border-color: #000;
    border-radius: 10px;
    position: relative;
    box-shadow: none !important;
}

.form-field .dropdown-toggle::after {
    border: none;
    background: url(../images/down.svg) no-repeat;
    background-size: 100%;
    position: absolute;
    right: 15px;
    width: 12px;
    height: 8px;
    top: 52%;
    transform: translate(0px, -50%);
    transition: 0.3s all;
}

.form-field .dropdown-menu {
    width: 100%;
}

.form-field.required .req-field {
    color: #f14668;
    letter-spacing: 0.2px;
    display: none !important;
}

.form-field.required.is-required .req-field {
    display: block !important;
}

.form-field.required.is-required input {
    border: 1px solid #f14668;
}

.msm-dialog .modal-body {
    padding: 40px 45px 20px;
}

.msm-dialog .modal-body h1 {
    margin-bottom: 30px;
}

.msm-dialog .modal-body button,
.msm-dialog .modal-body a {
    max-width: 384px;
    width: 100%;
    min-height: 64px;
}

.msm-dialog .modal-content {
    border-radius: 30px;
    border: none;
}

.msm-dialog .modal-dialog {
    max-width: 572px;
}

.msm-dialog .form-check-input:checked {
    background-color: #000;
    border-color: #000;
}

/*********** Sigin dialog **********/
/*********** Register dialog 1 **********/
#Reg1 .add-msm {
    top: unset;
    right: unset;
}

#Reg1 .input-group-text {
    background: transparent;
    padding: 0;
    border: none;
}

/*********** Register dialog 1 **********/
/*********** Settings Page ***********/
#settingsTabContent {
    margin-top: 60px;
}

.accout-card {
    background: #000;
    border-radius: 20px;
    padding: 38px 30px 30px 38px;
}

.accout-card video {
    max-width: 264px;
}

.accout-card .primary-btn.outline {
    border: 1px solid #fff;
    color: #fff;
    min-height: auto;
    padding: 12px 28px;
}

.submit-btn {
    display: block;
    background: #f2f2f2;
    border: 1px solid #dadada;
    padding: 13px 15px;
    border-radius: 5px;
}

.large-primary-btn {
    padding: 14px 48px;
    /* Added 2px padding to top and bottom */
    background: #2f2f2f;
    /* Default background color */
    border-radius: 48px;
    color: #ffffff;
    /* White text color */
    border: 1px solid transparent;
    font-size: 22px;
    font-weight: 300;
    /* Thinner font weight */
    text-align: center;
    display: inline-block;
    min-height: 50px;
    transition: background-color 0.3s ease;
    /* Smooth transition on hover */
}

.large-primary-btn:hover {
    background: #000000;
    /* Full black background on hover */
    color: #ffffff;
    /* Keep text white */
}

.toggle-area {
    padding: 20px 15px 20px 25px;
    border: 1px solid #e2e1e5;
    border-radius: 5px;
}

.toggle-area input {
    height: 40px;
    width: 70px;
    margin: 0;
    background: #949494;
    border: 1px solid #949494;
    box-shadow: none;
}

.toggle-area input.form-check-input {
    background-image: url("../images/toggle-icon.svg");
    width: 70px;
    height: 40px;
    margin: 0;
    background-repeat: no-repeat;
    background-position: 6px;
}

.toggle-area input.form-check-input:checked {
    background-image: url("../images/toggle-icon.svg");
    background-position: 33px;
}

.toggle-area input:checked {
    background-color: #4bb543;
    border-color: #4bb543;
}

.toggle-area input:checked:focus {
    border-color: #4bb543 !important;
}

.toggle-area input:focus {
    background-image: url("../images/toggle-icon.svg") !important;
    box-shadow: none;
    border-color: #949494 !important;
}

.pro-badge-strip {
    padding: 20px 15px 20px 25px;
    background: linear-gradient(180deg, #444 0%, #000 100%);
    border-radius: 15px;
}

.pro-badge-strip p {
    letter-spacing: 1px;
}

.lock-icon {
    width: 10px;
    height: auto;
}

.profile-form {
    margin-top: 30px;
}

.upload-dragarea input {
    position: absolute;
    opacity: 0;
    inset: 0 0 0 0;
}

.upload-dragarea .upload-dragable-box {
    border-radius: 10px;
    border: 1px solid #e2e1e5;
    padding: 20px 15px 20px 25px;
}

.upload-dragable {
    position: relative;
}

.remove-img-edit {
    position: absolute;
    top: -10px;
    right: -10px;
    background-color: rgba(54, 53, 53, 0.911);
    border: none;
    cursor: pointer;
    padding: 5px;
    border-radius: 50%;
    display: none;
    width: 30px;
    height: 30px;
    z-index: 10;
    transition: background-color 0.2s ease;
}

.remove-img-edit svg {
    width: 100%;
    height: 100%;
    stroke: #ffffff;
}

.remove-img-edit:hover {
    background-color: rgba(0, 0, 0, 0.986);
}

.perk-box {
    padding: 30px;
    background: #ec612b;
    border-radius: 20px;
    height: 100%;
}

.perk-box .perk-logo {
    width: 40px;
    height: 40px;
    border-radius: 40px;
}

.perk-box h2,
.perk-box p {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.perk-box p {
    -webkit-line-clamp: 5;
}

.perk-box .perk-action-btns a {
    display: block;
    background: #fff;
    padding: 18px 25px;
    border-radius: 90px;
    text-align: center;
}

.perk-box .perk-action-btns a .short-code-inner {
    display: none;
}

.perk-box .perk-action-btns a.submission-btn {
    background: #000;
}

.perk-box .perk-action-btns span {
    flex: 1;
}

/*********** Settings Page ***********/
/********** Home Page Insights Area ***********/
.insights-area {
    background: url("../images/dots-bg.svg") #1d1d1d;
    background-repeat: repeat;
    border-radius: 35px;
}

.insights-inner-area {
    padding: 0 82px;
}

.insights-inner-area .insights-inner-area-top-header {
    margin-bottom: 110px;
}

.insights-inner-area .insights-inner-area-top-header h5 {
    color: #ffffff;
}

.insights-inner-area .slider-arrow {
    margin-bottom: 30px;
}

.insights-inner-area .insights-event {
    max-width: 1300px;
    margin: 0 auto;
}

/* --------------------------------------------------------------------------- */
.insights-event {
    background: #e5342d;
    border-radius: 30px;
    padding: 20px 68px 20px 25px;
    display: flex;
    align-items: center;
    gap: 90px;
    /* margin-right: 20px; */
    min-height: 450px;
}

.insights-event .event-poster {
    width: 44.8%;
}

.insights-event .event-poster .b-img {
    width: 100%;
    border-radius: 15px;
}

.insights-event .post-avatar {
    position: absolute;
    width: 43px;
    height: 43px;
    bottom: 8px;
    left: 8px;
    border-radius: 33px;
    overflow: hidden;
    border: 5px solid rgba(255, 255, 255, 0.2);
    transition: 0.2s ease;
    z-index: 2;
}

.insights-event .post-avatar img {
    width: 33px;
    height: 33px;
    object-fit: cover;
    border-radius: 33px;
}

.insights-event .post-avatar:hover {
    border-color: #fff;
    transform: scale(0.9);
}

.insights-event .insights-event-info .event-head {
    display: flex;
    gap: 13px;
    margin-bottom: 32px;
}

.insights-event-info {
    display: flex;
    flex-direction: column;
    flex: 1;
    /* gap: 200px !important; */
}

.insights-event .insights-event-info .event-head .add-msm {
    position: relative;
    left: unset;
    right: unset;
    top: unset;
    bottom: unset;
    text-transform: uppercase;
    padding: 5px 18px 5px 7px;
}

.insights-event .insights-event-info .event-head .add-msm .indicator-alert {
    background: #7d0000;
    width: 25px;
    height: 25px;
    border-radius: 25px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.insights-event .insights-event-info .event-head .add-msm .indicator-alert::after {
    content: "";
    width: 15px;
    height: 15px;
    border-radius: 15px;
    background: #ff0000;
}

.insights-event .insights-event-info .event-head .event-dateandtime {
    background: #fff;
    border-radius: 25px;
    margin: 0;
}


.insights-event .size-60 {
    line-height: 1.16;
}


/* --------------------------------------------------------------------------- */

.insights-inner-area .insights-event {
    background: #e5342d;
    border-radius: 30px;
    padding: 20px 68px 20px 25px;
    display: flex;
    align-items: center;
    gap: 90px;
}

.insights-inner-area .insights-event .event-poster {
    width: 44.8%;
}

.insights-inner-area .insights-event .event-poster .b-img {
    width: 100%;
    border-radius: 15px;
}

.insights-inner-area .insights-event .post-avatar {
    position: absolute;
    width: 43px;
    height: 43px;
    bottom: 8px;
    left: 8px;
    border-radius: 33px;
    overflow: hidden;
    border: 5px solid rgba(255, 255, 255, 0.2);
    transition: 0.2s ease;
    z-index: 2;
}

.insights-inner-area .insights-event .post-avatar img {
    width: 33px;
    height: 33px;
    object-fit: cover;
    border-radius: 33px;
}

.insights-inner-area .insights-event .post-avatar:hover {
    border-color: #fff;
    transform: scale(0.9);
}

.insights-inner-area .insights-event .insights-event-info .event-head {
    display: flex;
    gap: 13px;
    margin-bottom: 32px;
}

.insights-inner-area .insights-event .insights-event-info .event-head .add-msm {
    position: relative;
    left: unset;
    right: unset;
    top: unset;
    bottom: unset;
    text-transform: uppercase;
    padding: 5px 18px 5px 7px;
}

.insights-inner-area .insights-event .insights-event-info .event-head .add-msm .indicator-alert {
    background: #7d0000;
    width: 25px;
    height: 25px;
    border-radius: 25px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.insights-inner-area .insights-event .insights-event-info .event-head .add-msm .indicator-alert::after {
    content: "";
    width: 15px;
    height: 15px;
    border-radius: 15px;
    background: #ff0000;
}

.insights-inner-area .insights-event .insights-event-info .event-head .event-dateandtime {
    background: #fff;
    border-radius: 25px;
    margin: 0;
}

.insights-inner-area .insights-event .size-60 {
    line-height: 1.16;
}

.insights-inner-area .insights-event .primary-btn {
    padding: 15px 48px;
}

.recording-area {
    padding: 88px 0 0 0px;
    color: #fff;
}

.recording-area .recording-area-toptitle {
    padding-right: 82px;
}

.recording-area .recording-slides {
    margin-top: 44px;
}

.recording-area .recording-slides .recording-banner {
    margin-right: 20px;
    opacity: 0.75;
    position: relative;
}

.recording-area .recording-slides .recording-banner.slick-current {
    opacity: 1;
}

.recording-area .recording-slides .recording-banner .add-msm {
    cursor: pointer;
    right: 7px;
    top: 10px;
}

.recording-area .recording-slides .recording-banner .add-msm img {
    width: auto;
}

.recording-area .recording-slides .recording-banner .add-msm img.pf-icon {
    width: 22px;
}

.recording-area .recording-slides img {
    width: 100%;
    object-fit: cover;
    border-radius: 15px;
    overflow: hidden;
}

.section-btn {
    margin-top: 62px;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
}

.section-btn .btn {
    padding: 18px 22px;
    color: #fff;
    border: 1px solid #fff;
    border-radius: 99px;
}

.section-btn .btn span {
    min-width: 340px;
    display: block;
}

.section-btn.dark-btn .btn {
    color: #fff;
    background: #000;
    border: 1px solid #000;
}

.section-btn.dark-outline .btn {
    color: #000;
    border-color: #000;
}

/********** Home Page Insights Area ***********/
/********** Home page Stories Area ************/
.stories-area-main {
    background: #1d1d1d;
    border-radius: 30px;
    margin-top: 35px;
}

.stories-area-main .stories-area-top-header {
    padding: 0 82px;
}

.stories-area-main .stories-area-top-header h5 {
    color: #fff;
}

.stories-area-main .stories-slider {
    margin-top: 102px;
}

.stories-area-main .stories-box {
    background: #c3e0bb;
    border-radius: 20px;
    display: flex !important;
    padding: 18px;
    gap: 20px;
    margin-right: 130px;
    margin-bottom: 142px;
}

.stories-area-main .stories-box .stories-info {
    display: flex;
    flex: 1;
    flex-direction: column;
    padding: 10px 0 0 15px;
}

.stories-area-main .stories-box .stories-info .stories-info-top {
    display: flex;
    gap: 17px;
}

.stories-area-main .stories-box .stories-info .stories-content {
    margin: auto 0;
}

.stories-area-main .stories-box .stories-info .stories-content h4 {
    display: -webkit-box;
    line-clamp: 6;
    -webkit-line-clamp: 6;
    overflow: hidden;
    -webkit-box-orient: vertical;
}

.stories-area-main .stories-box .stories-banner {
    max-width: 340px;
    position: relative;
}

.stories-area-main .stories-box .stories-banner .stories-img img {
    height: 466px;
}

.stories-area-main .stories-box .stories-banner img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    border-radius: 20px;
}

.stories-area-main .stories-box .stories-banner .add-msm {
    top: 8px;
    right: 8px;
}

.stories-area-main .stories-box .stories-banner .add-msm .pf-icon {
    width: 22px;
}

.stories-area-main .stories-box:first-child(2n) {
    background: #fe5200;
}

.stories-area-main .stories-box:nth-child(3n) {
    background: #ffffff;
}

.stories-area-main .stories-box:nth-child(4n) {
    background: #bbdce0;
}

.stories-area-main .stories-box {
    box-shadow: 30px 50px 50px 0 #000000;
}

.stories-area-main .section-btn {
    margin: 0;
}

/********** Home page Stories Area ************/
/********** Home page Jobs Area *************/
.jobs-area-inner .jobs-area-top-header .slider-arrow {
    margin-bottom: 30px;
}

.jobs-area-inner .jobs-slider {
    margin: 88px 0;
}

.job-box h2 {
    white-space: normal;
    overflow: visible;
    text-overflow: unset;
    word-wrap: break-word;
    line-height: 1.4em;
}


.jobs-area-inner .jobs-slider .job-box a {
    display: flex;
    flex-direction: column;
    min-height: 464px;
    margin-right: 20px;
    border: 1px solid #000;
    border-radius: 30px;
    padding: 36px 40px;
    text-align: center;
}

.jobs-area-inner .jobs-slider .job-box a .job-name {
    text-transform: uppercase;
}

.jobs-area-inner .jobs-slider .job-box a .size-50 {
    margin: auto 0;
}

.jobs-area-inner .jobs-slider .job-box a .job-dis {
    display: flex;
    flex-direction: column;
}

.jobs-area-inner .jobs-slider .job-box a:hover {
    background: #f2f2f2;
}

.job-area .section-btn .btn {
    color: #000;
    border: 1px solid #000;
}

/********** Home page Jobs Area *************/
/********** Home page Inspiration Area *************/
.inspiration-area {
    background: #f5ff95;
    border-radius: 30px;
    padding: 85px 0 150px;
    overflow: hidden;
}

.inspiration-area .inspiration-top-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.inspiration-area .inspiration-content {
    padding: 110px 0;
}

.inspiration-area .inspiration-content h1 {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    white-space: nowrap;
    transition: 0.5s ease;
}

/********** Home page Inspiration Area *************/
/********** Home page Branding Area ***************/
.branding-area {
    background: #fff;
    z-index: 1;
    position: relative;
    padding: 90px 0;
    margin-top: -30px;
}

/* @keyframes slide {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(-100%);
    }
}

@keyframes slidert {
    from {
        transform: translateX(-100%);
    }

    to {
        transform: translateX(0%);
    }
} */

.branding-main-area {
    padding: 102px 0 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.branding-main-area .barding-main-ltr,
.branding-main-area .barding-main-rtl {
    white-space: nowrap;
    margin-bottom: 80px;
}

.branding-main-area .barding-main-ltr:hover .grid-brands,
.branding-main-area .barding-main-rtl:hover .grid-brands {
    animation-play-state: paused;
}

.branding-main-area .barding-main-ltr .grid-brands {
    display: inline-block;
    /* animation: 20s slide infinite linear; */
}

/* .branding-main-area .barding-main-ltr .grid-brands .relevant-box {
    display: flex;
    gap: 35px;
    white-space: nowrap;
    align-items: center;
}
.branding-main-area .barding-main-ltr .grid-brands .relevant-box img {
    width: auto;
    height: 113px;
    border-radius: 25px;
}
.branding-main-area .barding-main-ltr .grid-brands .relevant-box span {
    display: flex;
    align-items: flex-start;
}
.branding-main-area .barding-main-ltr .grid-brands .relevant-box span sup {
    font-size: 1.111rem;
    padding: 7px 25px;
    display: block;
    line-height: normal;
    border-radius: 23px;
    border: 1px solid #000;
    margin-left: 1rem;
    top: 0;
} */
.branding-main-area .barding-main-ltr .grid-brands .relevant-box,
.branding-main-area .barding-main-rtl .grid-brands .relevant-box {
    display: inline-block;
    margin: 0 35px;
}

.branding-main-area .barding-main-ltr .grid-brands .relevant-box img,
.branding-main-area .barding-main-rtl .grid-brands .relevant-box img {
    width: 90px;
    height: 90px;
    border-radius: 25px;
    display: inline-block;
    margin-top: -50px;
    margin-right: 32px;
}

.branding-main-area .barding-main-ltr .grid-brands .relevant-box span,
.branding-main-area .barding-main-rtl .grid-brands .relevant-box span {
    display: inline-block;
}

.branding-main-area .barding-main-ltr .grid-brands .relevant-box span.for-dis,
.branding-main-area .barding-main-rtl .grid-brands .relevant-box span.for-dis {
    display: flex;
    line-height: 1;
    align-items: flex-start;
}

.branding-main-area .barding-main-ltr .grid-brands .relevant-box span sup,
.branding-main-area .barding-main-rtl .grid-brands .relevant-box span sup {
    font-size: 1.111rem;
    padding: 7px 25px;
    display: block;
    line-height: normal;
    border-radius: 23px;
    border: 1px solid #000;
    margin-left: 1rem;
    top: 0;
}

.branding-main-area .barding-main-rtl .grid-brands {
    /* animation: 20s slidert infinite linear; */
}

/********** Home page Branding Area ***************/
/********** Home page New Websites Area *************/
.new-websites-area .websites-area-top-header {
    padding: 0 82px;
}

.new-websites-area .new-websites-slider {
    padding: 70px 0 18px 82px;
}

.new-websites-area .new-websites-slider .post-box {
    padding-right: 22px;
}

/********** Home page New Websites Area *************/
/********** Home page New Directory Area *************/
.new-directory-area {
    background: #000;
    padding-bottom: 102px !important;
    border-radius: 30px;
    position: relative;
    z-index: 2;
}

.new-directory-area .size-200 {
    color: #fff;
}

.new-directory-area .websites-area-top-header {
    padding: 0 82px;
}

.new-directory-area .directory-websites-slider {
    padding: 120px 82px 60px 82px;
}

.new-directory-area .directory-websites-slider .slides-boxes {
    padding-right: 22px;
}

.new-directory-area .directory-websites-slider .slides-boxes h2 {
    color: #ffffff;
}

.new-directory-area .directory-websites-slider .slides-boxes a .goto-link img {
    filter: brightness(0) saturate(100%) invert(100%) sepia(8%) saturate(30%) hue-rotate(308deg) brightness(108%) contrast(106%);
}

/********** Home page New Directory Area *************/
/********** Home page Series Area *************/
.series-area .lazy-slides-area-top-header {
    padding: 0 82px;
}

.series-area .series-slider {
    padding-left: 82px;
}

/********** Home page Series Area *************/
.post-boxes-area {
    padding: 165px 0 114px;
}

/************ Search Page ************/
.banner-search {
    max-width: 982px;
    width: 100%;
    padding-bottom: 70px;
}

.search-area {
    width: 100%;
    height: 100px;
    border-radius: 100px;
    box-shadow: 0px 0px 48px rgba(0, 0, 0, 0.07);
    position: relative;
    overflow: hidden;
}

.search-area input {
    width: 100%;
    height: 100%;
    padding: 14px 90px 14px 14px;
    border: none;
    border-radius: 0;
    outline: none;
    font-size: 2.056rem;
}

.search-area button {
    position: absolute;
    top: 50%;
    right: 12px;
    transform: translateY(-50%);
    background: #020202;
    width: 75px;
    height: 75px;
    border-radius: 75px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.tag-area-listing {
    border-bottom-left-radius: 50px;
    border-bottom-right-radius: 50px;
    padding-bottom: 80px;
    background: #ffffff;
    position: relative;
    z-index: 9;
}

/* Container for the tags */
.selected-keywords {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    border-radius: 4px;
    min-height: 32px;
    position: relative;
}

/* Individual tag */
.keyword-item {
    display: inline-flex;
    align-items: center;
    background-color: #dadce3;
    font-size: 14px;
    font-weight: 500;
    padding: 4px 8px;
    border-radius: 16px;
    text-decoration: none;
    transition: background-color 0.2s ease;
}

/* Hover effect for tags */
.keyword-item:hover {
    background-color: #c7d2fe;
}

/* Remove button - Increased specificity to override .search-area button */
.selected-keywords .remove-keyword {
    position: static;
    transform: none;
    width: 18px;
    height: 18px;
    margin-left: 6px;
    background-color: #9799a6;
    color: #fff;
    border: none;
    border-radius: 50%;
    font-size: 12px;
    font-weight: bold;
    line-height: 1;
    cursor: pointer;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    transition: background-color 0.2s ease;
}

/* Remove button hover */
.selected-keywords .remove-keyword:hover {
    background-color: #020202;
}

/* Remove button focus for accessibility */
.selected-keywords .remove-keyword:focus {
    outline: 2px solid #3b82f6;
    outline-offset: 2px;
}

/* Optional: Disabled state */
.selected-keywords .remove-keyword:disabled {
    background-color: #9ca3af;
    cursor: not-allowed;
}

/************ Search Page ************/

/********** Branding Tags ************/
/* .branding-tags {
    display: flex;
    flex-wrap: wrap;
    max-width: 982px;
    padding-bottom: 50px;
    gap: 12px;
}
.branding-tags a {
    font-size: 1.389rem;
}
.branding-tags a sup {
    font-size: 14px;
} */

/********** Branding Tags ************/
/********** Sticky Bar ************/
.sticky-bar {
    width: 100%;
    max-width: 560px;
    position: fixed;
    bottom: 30px;
    padding: 12px 20px;
    left: 50%;
    transform: translateX(-50%);
    border-radius: 20px;
    overflow: hidden;
    background-color: rgba(255, 255, 255, 0);
    backdrop-filter: blur(10px);
}

/* .sticky-bar .blur {
    content: "";
    position: absolute;
    inset: 0 0 0 0;
    background-color: rgba(255, 255, 255, 0);
    backdrop-filter: blur(10px);
    display: none;
} */

.sticky-bar .info {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 11px;
}

.sticky-bar .info .text {
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.sticky-bar .info .text span.title {
    font-size: 22px;
}

.sticky-bar .info .text .extra-detail {
    display: flex;
    align-items: center;
    gap: 7px;
}

.sticky-bar .info .text .extra-detail span.tag {
    padding: 3px 22px;
    border-radius: 100px;
    background: #e6ff9d;
    font-size: 0.778rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.sticky-bar .info .text .extra-detail span.location {
    font-size: 0.778rem;
}

.sticky-bar a.hire {
    width: 117px;
    height: 48px;
    background: #000;
    border-radius: 37px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    font-weight: 500;
    color: #fff;
    position: relative;
}

/********** Sticky Bar ************/

/********** Branding Tags ************/
.branding-tags {
    display: flex;
    flex-wrap: wrap;
    max-width: 982px;
    padding-bottom: 50px;
    gap: 12px;
}

.branding-tags a {
    font-size: 1.389rem;
}

.branding-tags a sup {
    font-size: 14px;
}

/********** Branding Tags ************/

#HeroVideo {
    height: 100%;
    object-fit: cover;
}

@media (max-width: 1650px) {
    .stories-area-main .stories-box {
        margin-right: 65px;
    }
}

@media (max-width: 1600px) {

    .slider .design-slides,
    .event-area {
        margin-right: 20px;
    }

    .slider .slick-list {
        margin-right: -20px;
    }

    .slider .design-slides .design-slides-main,
    .event-details {
        gap: 48px;
        margin-right: 0;
    }

    .slider .design-slides .design-slides-main .top-designed-info {
        padding-right: 0;
    }
}

@media (max-width: 1440px) {
    html {
        font-size: 16px;
    }

    .size-200 {
        font-size: 9rem;
    }

    header .site-container {
        padding: 0 40px;
    }

    .site-container {
        max-width: 100%;
        padding: 0 40px;
    }

    .fixed-pages-hero-area .hero-area-inner .project-banner {
        padding: 128px 40px 0;
    }

    .p-highlights .lazy-slider {
        padding-left: 40px;
    }

    .fixed-pages-hero-area .project-banner .global-authors {
        left: 63px;
    }

    .insights-inner-area,
    .new-websites-area .websites-area-top-header,
    .stories-area-main .stories-area-top-header,
    .new-directory-area .websites-area-top-header,
    .series-area .lazy-slides-area-top-header {
        padding: 0 40px;
    }

    .series-area .series-slider {
        padding-left: 40px;
    }

    .recording-area {
        padding-left: 40px;
    }

    .new-websites-area .new-websites-slider {
        padding: 50px 0 0 40px;
    }

    .new-directory-area .directory-websites-slider {
        padding-left: 40px;
        padding-right: 40px;
    }

    .footer h1 {
        padding: 0 40px 155px;
    }

    .footer .footer-mid-area {
        padding: 0 40px;
    }

    .footer .footer-copywrite {
        padding: 77px 40px 0;
    }

    .recording-area .recording-area-toptitle {
        padding-right: 40px;
    }
}

@media (max-width: 1400px) {

    .slider .design-slides .design-slides-main .top-site-logo,
    .event-details .event-poster {
        width: 495px;
        flex: 0 0 495px;
        height: auto;
    }

    .stories-area-main .stories-box .stories-info {
        padding: 0;
    }
}

@media (max-width: 1340px) {
    .hero-area .site-banner-area {
        height: 80vh;
    }

    .hero-area h1 {
        bottom: 230px;
    }
}

@media (max-width: 1350px) {
    .pro-menu-listing {
        min-width: 85%;
    }
}

@media (max-width: 1366px) {
    .submit-tabs-content .tab-content .msm-tab-content {
        gap: 40px;
    }

    .submit-tabs-content .tab-content .msm-tab-content .tab-title-area {
        flex: 0 0 370px;
        width: 370px;
    }

    .insights-inner-area .insights-event .b-img {
        max-width: 360px;
        width: 100%;
    }

    .insights-inner-area .insights-event {
        align-items: inherit;
        padding-right: 25px;
        min-height: auto;
    }

    .insights-inner-area .insights-event .event-poster {
        display: flex;
        justify-content: flex-start;
        align-items: center;
    }
}

@media (max-width: 1280px) {
    .size-240 {
        font-size: 6.667rem;
    }

    .banner-area p {
        font-size: 1rem;
        margin-top: 16px;
    }

    .banner-area .size-14 {
        font-size: 0.778rem;
    }

    .recent-pro-members a {
        display: none;
    }

    .recent-pro-members a:nth-child(1),
    .recent-pro-members a:nth-child(2),
    .recent-pro-members a:nth-child(3) {
        display: flex;
    }

    .recent-pro-members a:nth-child(3) {
        margin-right: -10px;
    }

    .stories-area-main .stories-box {
        margin-right: 25px;
    }

    .stories-area-main .stories-box .stories-info .stories-content .size-50 {
        font-size: 2.2rem;
    }

    .stories-area-main .stories-box {
        padding: 13px;
    }

    .stories-area-main .stories-box {
        flex-direction: column-reverse;
    }

    .stories-area-main .stories-box .stories-banner {
        width: 100%;
        max-width: 100%;
    }

    .stories-area-main .stories-box .stories-banner .stories-img img {
        border-radius: 10px;
        height: 200px;
    }

    .stories-area-main .stories-box .stories-banner img {
        border-radius: 10px;
        height: 200px;
    }

    .stories-area-main .stories-box .stories-banner .add-msm img {
        height: auto;
    }

    .stories-area-main .stories-box .stories-info .stories-content h4 {
        -webkit-line-clamp: 3;
    }

    .hero-area .site-banner-area {
        height: 70vh;
    }

    .hero-area h1 {
        bottom: 32%;
    }
}

@media (max-width: 1200px) {
    header .site-container {
        padding: 0 25px;
    }

    .site-container {
        max-width: 100%;
        padding: 0 25px;
    }

    .fixed-pages-hero-area .hero-area-inner .project-banner {
        padding: 128px 25px 0;
    }

    .p-highlights .lazy-slider {
        padding-left: 25px;
    }

    .fixed-pages-hero-area .project-banner .global-authors {
        left: 48px;
    }

    .lazy-slides-area-inner {
        padding: 72px 0 56px 0;
    }

    .insights-inner-area,
    .new-websites-area .websites-area-top-header,
    .stories-area-main .stories-area-top-header,
    .new-directory-area .websites-area-top-header,
    .series-area .lazy-slides-area-top-header {
        padding: 0 25px;
    }

    .series-area .series-slider {
        padding-left: 25px;
    }

    .recording-area {
        padding-left: 25px;
    }

    .new-websites-area .new-websites-slider {
        padding: 50px 0 0 25px;
    }

    .new-directory-area .directory-websites-slider {
        padding-left: 25px;
        padding-right: 25px;
    }

    .footer h1 {
        padding: 0 25px 155px;
    }

    .footer .footer-mid-area {
        padding: 0 25px;
    }

    .footer .footer-copywrite {
        padding: 77px 25px 0;
    }

    .size-200 {
        font-size: 6.667rem;
    }

    .profile-main-info h2 {
        padding: 0 62px;
        -webkit-line-clamp: 4;
    }

    .site-banner-area .profile-logo {
        bottom: -34px;
        left: 48px;
    }

    .site-banner-area .profile-logo img {
        max-width: 98px;
    }

    .featured-story .fullscreen-layered-images.layered-images-right img {
        max-height: 375px;
    }

    .featured-story .fullscreen-layered-images.layered-images-left {
        left: -250px;
    }

    .featured-story .fullscreen-layered-images.layered-images-left img {
        max-height: 388px;
    }

    .progressBarContainer {
        left: 11px;
        right: 93px;
        gap: 8px;
    }

    .post-box-slides .card-tag {
        padding: 7px;
        right: 8px;
    }

    .nav-link.size-30 {
        font-size: 25px;
    }

    .select-filters {
        width: 100%;
    }

    .select-filters .dropdown-area {
        flex: 1;
    }

    .select-filters .dropdown-area .form-select {
        max-width: 100%;
        min-width: 100%;
    }

    .site-filter .select-filters button {
        width: 100%;
    }

    .choose-package {
        padding: 115px 50px 20px;
        overflow-y: auto;
    }

    .choose-package .package-area {
        height: auto;
    }

    .choose-package .package-area .package-area-inner {
        flex-direction: column;
        overflow: hidden;
        height: auto;
    }

    .choose-package .package-area .package-area-inner::-webkit-scrollbar {
        width: 4px;
        border-radius: 6px;
    }

    .choose-package .package-area .package-area-inner::-webkit-scrollbar-thumb {
        background: #000;
    }

    .choose-package .package-area .package-area-inner::-webkit-scrollbar-track {
        border-radius: 6px;
    }

    .choose-package .package-area .package-box {
        padding: 26px 36px;
    }

    .choose-package .package-area .package-box .package-logo {
        max-width: 268px;
    }

    .choose-package .package-area .package-box.submit-package .package-logo {
        max-width: 202px;
    }

    .choose-package {
        padding: 115px 15px 20px;
    }

    .choose-package .package-area .action-btn button {
        padding: 13px 40px;
        min-width: auto;
    }

    .plus-includes-box,
    .req-box {
        max-width: 100%;
        flex: 1;
    }

    .site-tabs .nav-tabs .nav-link {
        padding: 12px 25px;
    }

    .testimonial-box img {
        display: none;
    }

    .between-area img,
    .post-box img,
    .top-site .site-preview-image img {
        border-radius: 15px;
    }

    .top-site .title {
        padding-bottom: 0;
    }

    .inspiration-content img {
        max-width: 100px;
    }

    .branding-main-area .barding-main-ltr .grid-brands .relevant-box span {
        font-size: 4rem;
    }

    .branding-main-area .barding-main-ltr .grid-brands .relevant-box img {
        height: 100px;
    }

    .branding-main-area .barding-main-ltr .grid-brands .relevant-box span sup {
        font-size: 1rem;
    }

    .branding-main-area .barding-main-ltr {
        margin-bottom: 50px;
    }

    .branding-main-area {
        padding: 50px 0 0px;
    }

    .body-key .banner-area h1 {
        letter-spacing: -4px;
    }

    .website-category-page .profile-sotd .top-site {
        padding: 170px 90px 110px;
    }

    section .directory-featured-area .site-container {
        padding: 0 40px;
    }

    section .directory-featured-area .site-container .size-90 {
        font-size: 4rem;
    }

    .recording-area .recording-area-toptitle {
        padding-right: 25px;
    }

    .post-box .size-screenshot .bgwebss::before {
        border-radius: 15px;
    }
}

@media (max-width: 1024px) {
    .site-bottom .top-website .webiste-slider {
        padding: 0 50px;
    }

    .hero-area .site-banner-area {
        padding: 0;
    }

    h1 {
        font-size: 3.333rem;
    }

    .size-60 {
        font-size: 2.056rem;
    }

    .size-37 {
        font-size: 1.389rem;
    }

    .collections-listing .size-37 {
        font-size: 1.786rem;
        line-height: 1.4 !important;
    }

    .slider .design-slides .design-slides-main {
        gap: 64px;
    }

    .hero-banner .detail-btn {
        display: none;
    }

    .top-website .webiste-slider {
        padding-left: 50px;
        background: linear-gradient(360deg,
                #f7f7f7 0%,
                rgba(247, 247, 247, 0) 100%);
    }

    .top-website .lazy-slides-area-top-header {
        margin-top: 60px;
    }

    .directory-area {
        padding: 64px 0 64px 50px;
    }

    .directory-area .directory-slider {
        padding: 0;
    }

    .lazy-slides-area-top-header {
        padding-right: 50px;
    }

    .creative-jobs {
        padding: 80px 0 80px 50px;
    }

    .creative-jobs-box .creative-jobs-box-content {
        min-height: 396px;
    }

    .slider .design-slides .design-slides-main .top-site-logo,
    .event-details .event-poster {
        width: 340px;
        flex: 0 0 340px;
        height: auto;
    }

    .event-details .event-poster .poster-event-logo {
        padding: 32px;
    }

    .top-site {
        padding: 200px 0 110px;
    }

    .top-site .site-preview-image img.top-site-title {
        max-width: 420px;
        top: -129px;
    }

    .p-linked-btn {
        display: none;
    }

    .top-website .spec-title {
        visibility: visible;
        opacity: 1;
    }

    .directory-area .lazy-slides-area-top-header a {
        color: #fff;
    }

    .directory-area .lazy-slides-area-top-header img {
        filter: brightness(0) saturate(100%) invert(100%) sepia(9%) saturate(7500%) hue-rotate(286deg) brightness(109%) contrast(113%);
    }

    .subsc-email input {
        padding-right: 117px;
        max-width: 322px;
        min-width: 100%;
    }

    .subsc-email button {
        padding: 10px 16px;
    }

    .email-subscription p {
        font-size: 0.889rem;
    }

    .top-site .site-preview-image .detail-btn {
        display: none;
    }

    .footer-columns {
        gap: 55px;
    }

    .behind-scene {
        padding: 60px 0 90px 50px;
    }

    .key-insights {
        padding: 60px 0;
    }

    .key-insights .gap-4 {
        flex-direction: column;
    }

    .key-insights-box {
        width: 100%;
        min-height: 90px;
    }

    .key-insights-box .insights-box-item {
        padding: 0 30px;
    }

    .tags-area .justify-content-end {
        justify-content: flex-start !important;
    }

    .o-project-info .inner-info {
        min-width: 134px;
    }

    .behind-scene .tabs-slider-bts .slider-arrow {
        padding-right: 50px;
    }

    .profile-page .size-90 {
        font-size: 3.75rem;
    }

    .featured-story .fullscreen-layered-images-item .fullscreen-layered-images-item-wrapper {
        max-width: 842px;
    }

    .featured-story .featured-story-main {
        border-radius: 25px;
    }

    .profile-page .hero-area h1 .card-tag {
        right: 50px;
        font-size: 14px;
    }

    .profile-page .hero-area h1 .card-tag img {
        width: 20px;
    }

    .profile-page .hero-area h1 .card-tag span {
        min-width: 34px;
    }

    .pro-menu-listing {
        left: 50%;
        padding: 62px 22px 34px 34px;
        min-width: auto;
        width: calc(100% - 120px);
        transform: translate(-50%, 0);
        height: 84vh;
        z-index: 999;
    }

    .pro-menu-listing .pro-menu-listing-nav .nav-links-main {
        height: 54vh;
    }

    .pro-menu-listing .pro-menu-listing-nav .nav-links-main .nav-links {
        padding-bottom: 40px;
    }

    .pro-menu-listing .pro-menu-listing-nav .nav-links-main .nav-links ul a.active,
    .pro-menu-listing .pro-menu-listing-nav .nav-links-main .nav-links ul a:hover {
        padding-left: 0;
    }

    .pro-menu-listing .pro-menu-listing-nav .nav-links-main .nav-links ul a.active::before,
    .pro-menu-listing .pro-menu-listing-nav .nav-links-main .nav-links ul a:hover::before,
    .pro-menu-listing .pro-menu-listing-nav .nav-links-main .nav-links ul a::before {
        display: none;
    }

    .pro-menu-listing .pro-menu-listing-nav .nav-links-main .sub-nav-links {
        display: none;
    }

    .pro-menu-listing .pro-menu-listing-nav .nav-links-main .nav-links {
        width: auto;
        flex: 1;
    }

    .pro-menu-listing .pro-menu-listing-nav .nav-links-main .nav-links ul a {
        font-size: 30px;
    }

    .pro-menu-listing .pro-menu-listing-nav .nav-links-main .nav-links ul a.active+.mobile-menu {
        display: block;
    }

    .mobile-menu a {
        padding-left: 42px !important;
    }

    .mobile-menu a::before {
        content: "" !important;
        display: block !important;
        position: absolute !important;
        width: 33px !important;
        height: 1px !important;
        left: 0 !important;
        top: 18px !important;
        background: #646464 !important;
    }

    .pro-menu-listing .pro-menu-listing-nav .pro-member-info .member-info {
        border: none;
        width: auto;
    }

    .close-mobile-menu {
        display: flex;
    }

    .select-filters .dropdown-area {
        display: none;
    }

    .select-filters .dropdown-area:nth-child(1),
    .select-filters .dropdown-area:nth-child(2),
    .select-filters .dropdown-area:nth-child(3) {
        display: unset;
    }

    .website-category-page .top-site .site-preview-image img.top-site-title {
        top: -120px;
        border-radius: 0;
    }

    .submit-tabs-content .tab-content {
        padding: 35px 16px;
        height: auto;
    }

    .submit-tabs-content .tab-content .msm-tab-content {
        height: auto;
    }

    .submit-tabs-content .tab-content .msm-tab-content .tab-title-area .size-60 {
        font-size: 37px;
        text-align: center;
    }

    .submit-tabs-content .tab-content .msm-tab-content .tab-title-area {
        flex: 1;
        width: 100%;
        align-items: center;
    }

    .submit-tabs-content .tab-content .msm-tab-content .main-basic-content {
        padding: 0;
    }

    .insights-area {
        border-radius: 30px;
    }

    .insights-inner-area .insights-event {
        flex-direction: column;
        gap: 16px;
        margin: 0;
    }

    .insights-inner-area .insights-event .insights-event-info .event-head {
        align-items: center;
    }

    .insights-inner-area .insights-event .insights-event-info .event-content h2 {
        text-align: left !important;
    }

    .insights-inner-area .insights-event .post-avatar {
        display: none;
    }

    .recording-area {
        padding-top: 0;
    }

    .recording-area .recording-slides {
        margin-top: 20px;
    }

    .jobs-area-inner .jobs-slider .job-box a {
        margin-right: 10px;
    }

    .new-directory-area .directory-websites-slider .slides-boxes {
        padding-right: 10px;
    }

    .lazy-slides-area-inner .site-container {
        padding-right: 0;
    }

    .p-highlights .lazy-slides-area-inner .site-container {
        padding-right: 25px;
    }

    .hero-area h1 .goto-link img,
    .between-area .area-60-width h4 .goto-link-arrow img,
    .between-area .area-40-width h4 .goto-link-arrow img {
        transform: translate(0);
    }

    .arrow-container {
        display: block;
        opacity: 1;
        transform: scale(1.2);
    }

    .insights-inner-area .insights-event .event-poster {
        margin: 0 auto;
    }
}

@media (max-width: 991px) {

    .insights-event-info {
        /* gap: 150px; */
    }

    .plus-page .banner-area {
        padding-top: 90px;
    }

    .plus-page .banner-area .site-container video {
        width: 380px;
    }

    .plus-page .banner-area .site-container h1 {
        font-size: 6.778rem;
        margin: -38vh auto 0;
    }

    .event-area-main {
        padding: 60px 42px 50px;
    }

    .size-90,
    .size-120 {
        font-size: 4rem;
    }

    .select-plan-card .plan-card .size-120 {
        font-size: 6rem;
    }

    .select-plan-card .plan-card .size-100 {
        font-size: 5rem;
    }
}

@media (max-width: 966px) {

    .site-filter .select-filters button,
    .site-filter .select-filters ul.dropdown-menu {
        width: 100%;
        min-width: 100%;
    }
}

@media (max-width: 845px) {
    .site-tabs .nav-tabs {
        flex-wrap: nowrap;
    }

    .site-tabs .nav-tabs .nav-link {
        white-space: nowrap;
    }
}

@media (max-width: 767px) {
    html {
        font-size: 14px;
    }

    h1.title {
        font-size: 2.643rem;
        max-width: 480px;
        margin: 0 auto;
    }

    .size-25,
    .size-37,
    .size-30 {
        font-size: 1.286rem;
    }

    .size-90,
    .size-120 {
        font-size: 3.75rem;
    }

    .size-140 {
        font-size: 3.778rem;
    }

    .size-240 {
        font-size: 4.286rem;
        letter-spacing: 0;
        overflow: hidden;
    }

    .primary-btn {
        padding: 12px 40px;
        min-height: 50px;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .site-bottom .post-box {
        margin-right: 0;
    }

    .site-bottom .top-website.related-listing .lazy-slides-area-top-header {
        padding: 0;
    }

    header .site-menu img {
        height: 35px;
    }

    header .site-menu .pro-menu {
        width: 35px;
        height: 35px;
    }

    header .site-menu span {
        min-width: 14px;
        width: 14px;
        height: 1px;
    }

    header .pro-menu span.bar-2 {
        margin-top: 6px;
    }

    #openPackage {
        height: 35px;
    }

    #openPackage img {
        height: 100%;
    }

    .behind-scene {
        padding: 60px 0 90px 30px;
    }

    .tags a {
        padding: 5px 14px;
    }

    .hero-area h1 .goto-link {
        display: none;
    }

    .banner-area .banner-dis {
        padding-top: 19px !important;
    }

    .recent-pro-members a {
        width: 67px;
        height: 67px;
    }

    .banner-area .size-14 {
        font-size: 1rem;
        white-space: nowrap;
    }

    .slider .design-slides .design-slides-main .top-site-logo {
        flex: 0 0 212px;
        width: 212px;
        padding: 16px;
    }

    .slider .design-slides .design-slides-main .top-designed-info {
        flex: 1;
    }

    .slider .design-slides .design-slides-main,
    .event-details {
        flex-direction: column;
        align-items: flex-start !important;
        gap: 24px;
    }

    .event-details {
        align-items: center !important;
    }

    .event-details .event-poster-dis {
        width: 100%;
    }

    .event-details .event-poster {
        flex: 1;
        width: 100%;
    }

    .event-details .poster-event-logo {
        box-shadow: 0px 28px 44px 0px rgba(0, 0, 0, 0.55);
    }

    .creative-jobs-box {
        padding: 30px;
    }

    .creative-jobs-box .creative-jobs-box-content {
        height: 215px;
    }

    .newsletter {
        padding: 50px 0 35px;
    }

    .newsletter h1 {
        padding: 0;
        margin-bottom: 40px;
    }

    .footer {
        padding: 80px 0 44px;
    }

    .footer h1 {
        padding: 0 34px 55px;
        letter-spacing: -1px;
        font-size: 14.5vw;
    }

    .footer .footer-mid-area {
        padding: 0 34px;
    }

    .footer .footer-mid-area .footer-columns {
        gap: 55px;
    }

    .footer .footer-copywrite {
        padding: 28px 34px 0;
        gap: 55px;
    }

    .fixed-pages-hero-area .add-msm,
    .fixed-pages-hero-area .hero-area-inner .project-banner .hero-banner-badge {
        display: none !important;
    }

    .o-project-info .inner-info:last-child {
        display: none;
    }

    .about-project-detail {
        padding: 34px 0 50px;
    }

    .credits-tags .tags-area {
        display: none;
    }

    .related-listing .spec-title img {
        display: none;
    }

    .top-website.related-listing .lazy-slides-area-top-header {
        margin-top: 0;
    }

    .key-insights-box .insights-box-item:nth-child(3) {
        display: none;
    }

    .behind-scene .tabs-slider-bts .slider-arrow {
        padding-right: 30px;
    }

    .behind-scene .tabs-area {
        padding-right: 15px;
    }

    .about-project-detail h1 {
        margin-bottom: 20px;
    }

    .about-project-detail .project-gallery {
        padding-top: 35px;
        padding-bottom: 35px;
    }

    .behind-scene .tabs-area .tab-content {
        margin-top: 25px;
    }

    .behind-scene .tabs-area .nav-tabs .nav-link {
        font-size: 1rem;
    }

    .behind-scene .tabs-area .tab-content p {
        font-size: 1rem;
    }

    .profile-main-info button.primary-btn:first-child {
        display: none;
    }

    .profile-main-info .social-icon {
        gap: 7px;
    }

    .profile-main-info .social-icon a {
        width: 36px;
        height: 36px;
    }

    .profile-main-info .social-icon a img {
        width: 16px;
    }

    .profile-main-info .social-icon a:last-child {
        display: none;
    }

    .site-banner-area .profile-logo {
        bottom: -20px;
        left: 15px;
    }

    .site-banner-area .profile-logo img {
        max-width: 83px;
    }

    .hero-area h1 {
        margin-top: 40px !important;
    }

    .size-200 {
        font-size: 60px;
        letter-spacing: -1px;
    }

    .profile-page .size-90 {
        font-size: 2.143rem;
    }

    .featured-story .fullscreen-layered-images-item .fullscreen-layered-images-item-wrapper {
        max-width: 342px;
        padding: 0 40px;
    }

    .featured-story .fullscreen-layered-images.layered-images-right img {
        max-height: 161px;
    }

    .featured-story .fullscreen-layered-images.layered-images-left {
        left: 0;
        max-height: 158px;
    }

    .featured-story .fullscreen-layered-images.layered-images-left img {
        max-height: 158px;
    }

    .featured-story .featured-story-main {
        padding: 84px 0 104px;
        border-radius: 17px;
    }

    .profile-page .hero-area h1 .card-tag {
        right: 22px;
        top: -64px;
        font-size: 10px;
    }

    .profile-page .hero-area h1 .card-tag img {
        width: 15px;
    }

    .profile-page .hero-area h1 .card-tag span {
        min-width: 26px;
    }

    .post-box .msm-badge {
        display: none !important;
    }

    .site-filter .select-filters button,
    .site-filter .select-filters ul.dropdown-menu .dropdown-item {
        font-size: 11px;
        padding: 4px 12px;
    }

    .site-filter .select-filters button {
        padding: 8px 12px;
        height: 32px;
        border-radius: 16px;
    }

    .body-key .banner-area h1 {
        font-size: 60px;
        letter-spacing: -6px;
    }

    .body-key .recent-pro-members {
        display: none !important;
    }

    .site-filter .select-filters button.dropdown-toggle.show {
        border-top-left-radius: 16px;
        border-top-right-radius: 16px;
    }

    .site-filter .select-filters ul.dropdown-menu {
        border-bottom-left-radius: 16px;
        border-bottom-right-radius: 16px;
    }

    .site-filter .select-filters {
        gap: 8px;
    }

    .directory-featured-area {
        padding: 32px 0 32px;
    }

    .directory-featured-area .row {
        flex-direction: column-reverse;
    }

    .directory-featured-area .size-22 {
        font-size: 16px;
    }

    .directory-featured-area .size-90 {
        font-size: 30px;
    }

    .nav-tabs .nav-link {
        white-space: nowrap;
    }

    .site-plus-subscription .plus-features ul li::before {
        top: 1px;
    }

    .post-box-slides .company-logo img,
    .directory-featured-area .post-box-slides .company-logo img {
        width: 102px;
        height: 102px;
    }

    .nav-link.size-30 {
        font-size: 18px;
        padding-right: 20px;
    }

    .plus-page .banner-area .site-container h1 {
        font-size: 5rem;
        margin: -34vh auto 0;
    }

    .plus-page .site-plus-subscription {
        padding-top: 0;
    }

    .get-plus-post .get-plus-post-dis {
        padding: 0 15px;
    }

    .get-plus-post {
        padding: 38px 0 30px 0;
    }

    .get-plus-post .top-post-image {
        margin-bottom: 24px;
    }

    .event-area-main {
        padding: 20px 15px;
    }

    .faq-area {
        padding-top: 40px;
    }

    .post-box-slides,
    .post-box img {
        border-radius: 10px;
    }

    .post-box .size-sm,
    .post-box .size-lg,
    .post-box .size-md,
    .post-box .size-xlg,
    .post-box .size-screenshot,
    .post-box {
        border-radius: 10px;
    }

    .site-filter .select-filters button.dropdown-toggle::after {
        width: 12px;
        background-size: 100%;
    }

    .slides-box-links a {
        width: 45px;
        height: 45px;
    }

    .pro-menu-listing {
        width: calc(100% - 60px);
    }

    .pro-menu-listing.scale-0 {
        top: -50px;
        left: 50%;
    }

    .fixed-pages-hero-area .category-titles-area {
        margin-top: 34px;
    }

    .category-titles-area .p-action-btns img {
        width: 40px;
        height: 40px;
    }

    .site-tabs .nav-tabs {
        background: transparent;
        padding: 0;
        padding-bottom: 18px;
        border-bottom: 1px solid #cdcdcd;
        border-radius: 0;
        gap: 25px;
        overflow: auto;
        justify-content: start !important;
        align-items: start !important;
    }

    .site-tabs .nav-tabs .nav-link {
        padding: 0;
        font-size: 18px;
        color: #949494;
    }

    .submit-page .hero-area .site-banner-area {
        display: none;
    }

    .submit-tabs-content .tab-content .msm-tab-content .main-basic-content .site-filter .select-filters button {
        font-size: 16px;
        padding: 8px 12px;
        line-height: 22px;
    }

    .submit-tabs-content .accordion-item button,
    .submit-tabs-content .accordion-item .accordion-button:not(.collapsed),
    .submit-tabs-content .accordion-item:first-of-type button,
    .submit-tabs-content .accordion-item:first-of-type .accordion-button:not(.collapsed),
    .submit-tabs-content .accordion-item:not(:first-of-type) button,
    .submit-tabs-content .accordion-item:not(:first-of-type) .accordion-button:not(.collapsed),
    .submit-tabs-content .accordion-item:last-of-type button,
    .submit-tabs-content .accordion-item:last-of-type .accordion-button:not(.collapsed) {
        padding: 15px 15px 15px 0;
    }

    .submit-tabs-content .tab-content .msm-tab-content .main-basic-content .site-filter .select-filters button.dropdown-toggle::after {
        width: 12px;
        height: 6px;
    }

    .main-basic-content h4.size-37 {
        font-size: 22px;
    }

    .disclaimer-area p.size-22 {
        font-size: 16px;
    }

    section .directory-featured-area {
        padding: 32px 0;
        border-radius: 20px;
    }

    .accout-card video {
        max-width: 160px;
    }

    .pro-badge-strip {
        padding: 12px 15px;
    }

    .website-category-page .msm-badge {
        top: 50%;
        transform: translate(0, -50%);
        padding: 10px 14px;
        right: -74px;
    }

    .website-category-page .msm-badge img {
        width: 22px;
        height: 22px;
    }

    .website-category-page .msm-badge p {
        margin-left: 8px !important;
    }

    .lazy-slider {
        padding-top: 50px;
    }

    .lazy-slides-area-top-header .slider-arrow,
    .new-websites-area .websites-area-top-header .slider-arrow,
    .stories-area-main .stories-area-top-header .slider-arrow,
    .new-directory-area .websites-area-top-header .slider-arrow,
    .insights-inner-area-top-header .slider-arrow,
    .jobs-area-top-header .slider-arrow,
    .recording-area .slider-arrow {
        display: none !important;
    }

    .slick-track .post-box {
        margin-right: 10px;
    }

    .insights-inner-area .insights-inner-area-top-header {
        margin-bottom: 50px;
    }

    .post-boxes-area {
        padding: 68px 0 55px;
    }

    .recording-area .recording-slides .recording-banner {
        margin-right: 10px;
    }

    .new-websites-area .new-websites-slider .post-box {
        padding-right: 10px;
    }

    .stories-area-main .stories-box {
        margin-right: 10px;
        border-radius: 10px;
        margin-bottom: 50px;
        box-shadow: 16px 16px 12px 0 #000000 !important;
    }

    .stories-area-main .stories-slider {
        margin-top: 50px;
    }

    .jobs-area-inner .jobs-slider .job-box a {
        min-height: 277px;
        padding: 16px 20px;
        border-radius: 20px;
    }

    .jobs-area-inner .jobs-slider .job-box a .size-50 {
        font-size: 2rem;
    }

    .jobs-area-inner .jobs-slider {
        margin: 50px 0;
    }

    .inspiration-area {
        padding: 50px 0;
    }

    .inspiration-area .inspiration-top-header p {
        display: none;
    }

    /* .post-box .size-xlg {
        height: 26.444rem;
    } */

    .new-directory-area {
        margin: 0 !important;
    }

    /* .new-directory-area .websites-area-top-header {
        padding: 0 82px;
    } */

    .new-directory-area .directory-websites-slider {
        padding-top: 50px;
    }

    .section-btn .btn {
        padding: 10px 30px;
    }

    .section-btn .btn span {
        min-width: auto;
    }

    .between-area img {
        border-radius: 15px;
    }

    .stories-area-main .stories-box .stories-banner img {
        height: 153px;
    }

    .stories-area-main .stories-box .stories-banner .add-msm img {
        height: auto;
    }

    .inspiration-area .inspiration-content {
        padding: 50px 0;
    }

    .inspiration-content img {
        max-width: 65px;
    }

    .new-directory-area {
        padding-bottom: 50px !important;
    }

    .branding-main-area .barding-main-ltr .grid-brands {
        gap: 30px;
    }

    .branding-main-area .barding-main-ltr .grid-brands .relevant-box {
        gap: 15px;
    }

    .branding-main-area .barding-main-ltr .grid-brands .relevant-box img {
        height: 80px;
    }

    .branding-main-area .barding-main-ltr .grid-brands .relevant-box span {
        font-size: 3rem;
    }

    .msm-badge {
        padding: 12px 15px;
        right: -80px;
    }

    .msm-badge img {
        width: 28px;
    }

    .msm-badge p {
        margin-left: 15px !important;
    }

    .progressBarContainer {
        gap: 4px;
    }

    .progressBarContainer div span.progressBar {
        height: 3px;
    }

    .slides-box-links {
        z-index: 9;
    }

    .insights-inner-area .insights-event .event-poster {
        width: 100%;
    }

    .insights-inner-area .insights-event .b-img {
        max-width: 100%;
    }

    .post-box .size-screenshot .bgwebss::before {
        border-radius: 10px;
    }
}

@media (max-width: 667px) {
    .hero-area h1.title {
        padding: 0 15px;
    }

    .newsletter .site-container {
        display: none;
    }

    .newsletter .signup-today {
        display: flex;
    }

    .choose-package .package-area .package-box .package-logo {
        max-width: 192px;
    }

    .choose-package .package-area .package-box.submit-package .package-logo {
        max-width: 160px;
    }

    header .site-container,
    .site-container {
        padding: 0 15px;
    }

    .fixed-pages-hero-area .hero-area-inner .project-banner {
        padding: 128px 15px 0;
    }

    .hero-area .site-banner-area {
        padding: 0;
    }

    header .site-menu span {
        font-size: 1.286rem;
    }

    h1.title {
        padding: 0 32px;
        max-width: 100%;
        font-size: 1.786rem;
        line-height: 1.71;
    }

    .between-area {
        gap: 22px;
        flex-direction: column;
    }

    .between-area .area-60-width,
    .between-area .area-40-width {
        flex: 1;
    }

    .fixed-pages-hero-area .project-banner .global-authors {
        left: 23px;
    }

    .slider .design-slides {
        margin-right: 15px;
    }

    .slider .slick-list {
        margin-right: -15px;
    }

    .slider .design-slides .design-slides-main {
        padding: 16px 16px 25px;
    }

    .top-designed-slides {
        margin-bottom: 0 !important;
    }

    .latest-stories,
    .trending-area {
        margin-top: 0 !important;
    }

    .top-designed-slides {
        margin: 0 !important;
    }

    .lazy-slides-area-inner {
        padding: 32px 0 32px 16px;
    }

    .p-highlights .lazy-slides-area-inner .lazy-slider {
        padding-left: 0;
        padding-top: 0;
    }

    .series-area .series-slider {
        padding-left: 0;
    }

    .top-site {
        padding: 105px 0 57px;
        border-radius: 15px;
    }

    .top-site .site-preview-image img.top-site-title {
        max-width: 380px;
        top: -117;
    }

    .website-category-page .top-site .site-preview-image img.top-site-title {
        top: -42px;
    }

    .top-website .webiste-slider {
        padding-left: 16px;
    }

    .top-website .lazy-slides-area-top-header,
    .lazy-slides-area-top-header {
        padding-right: 16px;
    }

    .top-website {
        padding-bottom: 0 !important;
    }

    .series-area {
        margin-top: 0 !important;
    }

    .creative-jobs {
        padding: 40px 0 40px 16px;
    }

    .directory-area {
        padding: 40px 0 40px 16px;
    }

    .footer {
        bottom: -650px;
    }

    .footer h1 {
        padding: 0 16px 35px;
        font-size: 15vw;
    }

    .footer-logo {
        width: 43px;
        height: 43px;
    }

    .footer-logo img {
        width: 100%;
    }

    .footer .footer-mid-area {
        padding: 0 16px;
    }

    .footer .footer-mid-area .footer-columns {
        gap: 50px;
    }

    .footer .footer-mid-area .footer-columns .columns-links {
        text-align: left;
    }

    .footer .footer-mid-area .footer-columns .columns-links:last-child {
        display: none;
    }

    .footer .footer-copywrite {
        padding: 28px 16px 0;
        gap: 20px;
    }

    .key-insights-box {
        flex-direction: column;
        height: auto;
    }

    .key-insights-box .insights-box-item {
        padding: 12px 40px;
        border: none;
        width: 100%;
    }

    .key-insights-box .insights-box-item:nth-child(3) {
        display: flex;
    }

    .lazy-slides-area-inner .site-container {
        padding: 0;
    }

    .lazy-slides-area-inner .lazy-slides-area-top-header {
        padding: 0;
    }

    .lazy-slides-area-inner .lazy-slides-area-top-header .size-200 {
        font-size: 4.286rem;
        letter-spacing: 0;
    }

    .lazy-slides-area-inner .lazy-slides-area-top-header .slider-arrow {
        display: none !important;
    }

    .lazy-slides-area-inner .lazy-slider {
        padding-top: 45px;
    }

    .insights-inner-area,
    .new-websites-area .websites-area-top-header,
    .stories-area-main .stories-area-top-header,
    .new-directory-area .websites-area-top-header {
        padding: 0 16px;
    }

    .recording-area {
        padding-left: 16px;
    }

    .new-websites-area .new-websites-slider {
        padding: 50px 0 0 16px;
    }

    .new-directory-area .directory-websites-slider {
        padding: 50px 0px 0 16px;
    }

    .inspiration-content img {
        max-width: 45px;
    }

    .top-site .site-preview-image .sotd:hover {
        transform: unset;
    }

    .stories-area-main,
    .inspiration-area,
    .new-directory-area {
        border-radius: 15px;
    }

    .site-bottom section {
        border-bottom-left-radius: 15px !important;
        border-bottom-right-radius: 15px !important;
    }

    .stories-area-main .stories-box .stories-info .stories-content .size-50 {
        font-size: 2rem;
    }

    .website-category-page .profile-sotd .top-site {
        padding: 150px 25px 80px;
    }

    section .directory-featured-area .site-container {
        padding: 0 25px;
    }
}

@media (max-width: 576px) {
    .post-box .size-screenshot {
        height: 44.429rem;
    }

    .post-box .size-md,
    .collections-listing video {
        size: 15.714rem;
    }
}

@media (max-width: 567px) {
    .text-break {
        font-size: 18px !important;
    }

    .recent-pro-members {
        display: none !important;
    }

    .banner-area p {
        margin: 0;
    }

    .banner-area .banner-dis {
        padding-bottom: 20px;
        padding-top: 0 !important;
    }

    .pro-menu-listing {
        width: calc(100% - 30px);
    }

    .pro-menu-listing .pro-menu-listing-nav .pro-member-info .member-info {
        gap: 24px;
    }

    .pro-menu-listing .pro-menu-listing-nav .pro-member-info .member-info .member-info-links p {
        width: auto;
    }

    .pro-menu-listing .pro-menu-listing-nav .pro-member-info .pro-social-links a {
        display: none;
    }

    .pro-menu-listing .pro-menu-listing-nav .pro-member-info .pro-social-links a:first-child {
        display: flex;
    }

    .slides-boxes .slides-box-slider img,
    .post-box-slides,
    .post-box .size-md,
    .collections-listing video {
        height: 225px;
    }

    .directory-featured-area .post-box-slides,
    .directory-featured-area .slides-boxes .slides-box-slider img {
        height: 225px;
    }

    .post-box .size-screenshot {
        height: 44.429rem;
    }

    .select-plan-card {
        flex-direction: column;
    }

    .select-plan-card .plan-card {
        width: 100%;
    }

    .site-plus-subscription .plus-features ul {
        flex-direction: column;
    }

    .site-plus-subscription .plus-features ul li {
        width: 100%;
        flex: 1;
    }

    .add-msm {
        top: 8px;
        right: 4px;
        transform: scale(0.9);
    }

    .accout-card {
        flex-direction: column-reverse;
        align-items: center;
        padding: 25px 16px;
    }

    .accout-card .account-written-info {
        width: 100%;
        align-items: center !important;
    }

    .accout-card .account-written-info button {
        width: 100%;
    }

    .toggle-area {
        padding: 12px 15px;
    }
}

@media (max-width: 522px) {
    .job-area .site-container {
        padding: 0;
    }

    .job-area .jobs-area-top-header {
        padding: 0 15px;
    }

    .job-area .jobs-slider {
        padding-left: 15px;
    }
}

/* Main container for the partner logos */
.partnerlogo-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    /* Left-align the logos */
    padding: 20px;
    gap: 20px;
    /* Gap between the logos */
}

/* Each partnerlogo item */
.partnerlogo-item {
    flex: 1 1 calc(20% - 20px);
    /* 5 items per row on larger screens */
    text-align: center;
    min-width: 120px;
    /* Minimum width for the logos */
}

/* Image styling for the logos */
.partnerlogo-item img {
    width: 100px;
    /* Adjust as needed */
    height: auto;
    display: block;
    margin: 0 auto;
}

/* Underlined text with the appropriate font size */
.partnerlogo-link {
    margin-top: 10px;
    font-size: 18px;
    text-decoration: underline;
}

/* Responsive rules for different screen sizes */
@media (max-width: 1200px) {
    .partnerlogo-item {
        flex: 1 1 calc(33.33% - 20px);
        /* 3 items per row */
    }
}

@media (max-width: 768px) {
    .partnerlogo-item {
        flex: 1 1 calc(50% - 20px);
        /* 2 items per row */
    }

    /* Media query to hide extra tags on small screens */
    .custom-tags {
        display: flex;
        flex-wrap: nowrap;
        max-width: 100%;
        /* Ensures it doesn't overflow */
    }

    .custom-tag-item:nth-child(n + 4) {
        display: none;
        /* Hide tags after the 3rd one */
    }

    .hero-area h1 {
        position: sticky;
        bottom: 0px !important;
        font-size: 2.5rem;
        letter-spacing: -1px;
        line-height: 1.2;
    }

    .hero-area .size-80 h1 {
        font-size: 3rem;
    }
}

@media (max-width: 480px) {
    .partnerlogo-item {
        flex: 1 1 100%;
        /* 1 item per row */
    }

    .insights-event-info {
        gap: 0px !important;
    }
}

.lazy {
    filter: blur(10px);
    transition: filter 0.5s ease, opacity 1s ease;
}

.lazy.loaded {
    filter: blur(0);
    opacity: 1;
}

.lazy-placeholder {
    filter: blur(10px);
    transition: filter 0.5s ease-in-out;
}

.transparent-spacer {
    width: 100%;
    /* Full width like the <hr> */
    height: 0.5rem;
    /* Adjust the height as needed */
    margin: 0.5rem 0;
    /* Equivalent to my-4, adjust as necessary */
    background-color: transparent;
    /* Transparent background */
}

.terms-area {
    background: #ffffff;
    position: relative;
    z-index: 9;
}

.responsive-iframe {
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    /* Maintains a 16:9 aspect ratio */
    border: none;
}

.iframe-video-container {
    display: block;
}

.collections-listing .post-box .size-sm,
.new-websites-slider .post-box .size-md,
.lazy-slider .post-box .size-lg {
    height: auto !important;
}

.collections-listing .post-box .media-container,
.new-websites-slider .post-box .media-container {
    position: relative !important;
    width: 100% !important;
    padding-top: calc(940 / 1500* 100%) !important;
    height: auto !important;
}

.lazy-slider .post-box .media-container {
    position: relative !important;
    width: 100% !important;
    padding-top: calc(381 / 509* 100%) !important;
    height: auto !important;
}

.post-box .size-screenshot {
    position: relative !important;
    width: 100% !important;
    /* padding-top: calc(16 / 9* 100%) !important; */
    aspect-ratio: 9 / 16;
    height: auto !important;
}

.collections-listing .media-container video.fit-video,
.collections-listing .media-container img.fit-image,
.collections-listing .media-container img.aspect-image,
.new-websites-slider .media-container video.fit-video,
.new-websites-slider .media-container img.fit-image,
.lazy-slider .media-container img.fit-image,
.lazy-slider .media-container video.fit-video {
    position: absolute !important;
    left: 0 !important;
    top: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
}

.category-info-labels:blank {
    display: none;
}

.submit-tabs-content .trusted-partners img {
    mix-blend-mode: multiply;
}

/*# sourceMappingURL=style.css.map */

/* 
  Custom Scrollbar Styles (for WebKit-based browsers like Chrome, Safari, and Edge):

  1. `::-webkit-scrollbar`: 
     - Targets the scrollbar itself.
     - The `width` property defines the vertical scrollbar's width, and `height` defines the horizontal scrollbar's height.
     - Here, both are set to `10px` to control the size of the scrollbar.

  2. `::-webkit-scrollbar-track`: 
     - Targets the track (the background area of the scrollbar).
     - The `background` is set to a light gray (`#f1f1f1`) for the default color of the scrollbar track.
     - `border-radius: 10px` rounds the corners of the scrollbar track to give it a smooth appearance.

  3. `::-webkit-scrollbar-thumb`: 
     - Targets the thumb (the draggable part of the scrollbar).
     - The `background` is set to a darker gray (`#888`) for the thumb's default color.
     - `border-radius: 10px` rounds the edges of the thumb to create a smooth look.
  
  4. `::-webkit-scrollbar-thumb:hover`: 
     - Targets the thumb when the user hovers over it.
     - The `background` color changes to a darker shade (`#555`) to give the user a visual cue that the thumb is interactable.
*/

/* ::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

::-webkit-scrollbar-track {
    background: none;
    border-radius: 10px;
}

::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 10px;
}

::-webkit-scrollbar-thumb:hover {
    background: #555;
} */

/* ********* Home page Ad Area *************/
/*
.ad-area {
    background: #fff;
    z-index: 1;
    position: relative;
    padding: 45px 0 90px 0;
    margin-top: -55px;
}

.ad-bottom-area {
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.Ad-div-bottom {
    max-width: 2000px;
    max-height: 1000px;
    object-fit: cover;
    display: flex;
    align-items: center;
    justify-content: center;
}


.ad-middle-area {
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.Ad-div-middle {
    max-width: 2000px;
    max-height: 1000px;
    object-fit: cover;
    display: flex;
    align-items: center;
    justify-content: center;
}

.collections-listing .media-container .fit-ad {
    position: absolute !important;
    left: 0 !important;
    top: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
} */

/********** Home page Ad Area *************/
.ad-area {
    background: #fff;
    z-index: 1;
    position: relative;
    padding: 3rem 0 6rem 0;
    margin-top: -3.5rem;
}

.ad-bottom-area {
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    box-sizing: border-box;
}

.Ad-div-bottom {
    width: 100%;
    max-width: 1200px;
    height: auto;
    max-height: 600px;
    object-fit: cover;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-top: 50px;
}

.ad-middle-area {
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    box-sizing: border-box;
}

.Ad-div-middle {
    width: 100%;
    max-width: 1200px;
    height: auto;
    max-height: 600px;
    object-fit: cover;
    display: flex;
    align-items: center;
    justify-content: center;
}

.collections-listing .media-container .fit-ad {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Media Queries for Responsiveness */
@media screen and (max-width: 768px) {
    .ad-area {
        padding: 1.5rem 0 3rem 0;
        margin-top: -2rem;
    }

    .hero-area h1 {
        position: sticky;
        bottom: 0px !important;
    }

    .Ad-div-bottom,
    .Ad-div-middle {
        max-width: 100%;
        max-height: 400px;
    }
}


@media screen and (max-width: 480px) {
    .ad-area {
        padding: 1rem 1.5rem 2rem 1.5rem;
        /* Added side padding for mobile */
        margin-top: -1.5rem;
    }

    .Ad-div-bottom,
    .Ad-div-middle {
        max-width: 100%;
        max-height: 300px;
        margin-top: 1rem;
        /* Added margin-top for mobile */
    }
}



.lh-sm {
    line-height: 1 !important;
}

@media (min-width: 768px) and (max-width: 1024px) {
    .hero-area h1 {
        position: sticky;
        bottom: 0px !important;
    }

    .dropdown-item {
        font-size: 18px !important;
        font-weight: 500 !important;
    }

    .dropdown-menu {
        min-width: 220px !important;
        /* Adjust dropdown width */
    }

}

@media (max-width: 576px) {
    .goto-arrow {
        width: 14px !important;
        height: auto;
    }

    .recording-title {
        padding-top: 20px !important;
    }

    .hero-area h1 {
        position: sticky;
        bottom: 0px !important;
    }
}

@media screen and (min-width: 1280px) and (min-height: 760px) {
    .hero-area h1 {
        position: sticky;
        bottom: 0px !important;
    }
}


@media (max-width: 576px) {
    .stories-box {
        height: 400px !important;
        /* Adjust as needed */
        overflow: hidden;
    }

    .job-box {
        width: 220px !important;
    }
}



@media (max-width: 1366px) {
    .event-action {
        bottom: 10px !important;
        right: 20px !important;
    }
}

@media (max-width: 1024px) {
    .event-action {
        bottom: 15px !important;
        right: 15px !important;
    }
}

@media (max-width: 768px) {
    .event-action {
        bottom: 20px !important;
        right: 10px !important;
    }
}

@media (max-width: 767px) {
    .goto-arrow {
        width: 18px !important;
        /* Thoda bada for mid screens */
        height: auto !important;
    }

    .recording-title {
        padding-top: 25px !important;
        font-size: 16px !important;
        /* Optional: Adjust text size */
        text-align: center !important;
        /* Optional: For better alignment */
    }
}

@media (max-width: 576px) {
    .goto-arrow {
        width: 14px !important;
        height: auto !important;
    }

    .profile-main-info h2 {
        padding: 0 0px !important;
        -webkit-line-clamp: 4;
    }

    .subscription-btn {
        margin-bottom: 0px !important;
    }

    .main-text {
        font-size: 8rem !important;
    }


    .recording-title {
        padding-top: 20px !important;
    }

    .insights-event .insights-event-info .event-head .event-dateandtime {
        background: #fff;
        border-radius: 25px;
        font-size: 12px !important;
        margin: 0;

    }

    .section-btn {
        margin-top: 42px !important;
    }

    .section-btn .btn span {
        min-width: auto;
    }

    .insights-event-info {
        flex-direction: column;
        text-align: center;
    }

    .insights-event-info .event-head {
        margin-bottom: 20px;
    }

    .insights-event-info .event-head h1 {
        font-size: 24px;
    }

    .insights-event-info .event-head p {
        font-size: 14px;
    }

    .input-text {
        font-size: 18px !important;
    }

    .dropdown-item {
        font-size: 15px !important;
    }
}

@media (min-width: 768px) {
    .nav-bottom {
        font-size: 1rem !important;
    }

}

/* Responsive Banner Video/Image Switch */
/* Default: Show video, hide image */
#bannerVideo {
    display: block;
}

#bannerImage {
    display: none;
}

#plusbannerImage {
    display: none;
}

/* Mobile screens: Hide video, show image */
@media (max-width: 768px) {
    #bannerVideo {
        display: none !important;
    }

    #bannerImage {
        display: block !important;
        width: 100%;

    }

    #plusbannerImage {
        display: block !important;
        width: 100%;
    }
}

.plus-page .banner-area .site-container img {
    position: sticky;
    top: 220px;
    display: block;
    transform: scale(1);
    transition: transform 0.5s ease;
    margin: 0 auto;
    width: 518px;
    z-index: 3;
}

#plusbannerImage {
    width: 100%;
    height: auto;
    max-width: 518px;
    margin: 0 auto;
    position: relative;
    z-index: 3;
}