.gradient-text,
.overlay-right-item .icon {
    background: linear-gradient(90deg, #f33164, #f85641)
}

.gradient-text,
.price {
    -webkit-text-fill-color: #fff0
}

#chatbot-open,
#chatbot-send,
.button-container button,
.cross-btn,
.register-form form input[type=file],
.step-item {
    cursor: pointer
}

#chatbot-header,
.copyright,
.step-text,
.sub-catg-para,
.toggle-panel {
    text-align: center
}

.auth-social-follow ul li,
.menu-links,
.timeline>ul>li {
    list-style: none
}

*,
.timeline,
.timeline>ul>li {
    box-sizing: border-box
}

.timeline>ul>li:nth-child(2n):before,
.timeline>ul>li:nth-child(odd):before {
    box-shadow: 0 0 0 3px rgb(233 33 99 / .2);
    background: var(--gradinet);
    position: absolute
}

.all-page .wp-block-table .has-fixed-layout td,
.bttn,
.wp-block-table .has-fixed-layout th {
    white-space: nowrap
}

* {
    font-family: Poppins;
    margin: 0;
    padding: 0
}

:root {
    --primary-color: #000;
    --secondry-color: #fa6431;
    --gradinet: linear-gradient(90deg, #f2276e, #fa6431);
    --bg-color: #F5F5F5;
    --white-color: #fff;
    --dark: #000;
    --fw-600: 600;
    --fw-500: 500;
    --fw-700: 700;
    --fs-14: 14px;
    --fs-18: 18px;
    --fs-20: 20px;
    scroll-behavior: smooth
}

body {
    background: #ffffff;
    color: #000;
}

p {
    line-height: 30px;
    margin-bottom: 10px
}

a {
    text-decoration: none;
    transition: .5s;
    color: var(--secondry-color)
}

.orange-shade {
    color: var(--secondry-color) !important
}

header {
    background: #ffffff;
    border-bottom: 1px solid #dbdbdb;
    height: 75px;
    inset: 0;
    position: fixed;
    width: 100%;
    z-index: 99
}

.dropdown svg:not(:is(.dropdown a span, .dropdown .mega-tab-content) svg) {
    fill: var(--primary-color)
}

.dropdown .dropdown svg {
    fill: var(--dark)
}

#table_of_content a,
.all-page h2,
.all-page ol,
.all-page p,
.all-page ul,
.artist-bottom,
.artist-bottom a,
.artist-inner-head .h3,
.author-name,
.big-head,
.booking-box,
.booking-box .h3,
.co-aut span,
.footer-strip,
.h2,
.h3,
.h4,
.h5,
.h6,
.influencer-overlay,
.mail a,
.read-more a,
.strip-btn,
.sub-catg-para,
.text-white,
.toc-body ul li a,
.web-mail,
.web-mail a,
.why-choose-card:hover .gradient-list li,
details,
h3,
h4,
h5,
h6,
header nav ul li a,
summary {
    color: #000000;
}

header nav ul li ul li a {
    color: var(--dark);
    font-weight: 400
}

header ul .dropdown ul {
    background-color: #ffe5e5
}

.overlay-right-item {
    align-items: center;
    padding: 20px;
    background: #ffffff;
    border: 1px solid #dbdbdb;
    border-radius: 8px;
    display: flex;
    gap: 20px;
    height: 100%;
    width: 100%;
    justify-content: center
}

.stats.bg-wrapper {
    padding: 20px !important
}

.overlay-right-item .icon {
    width: 60px;
    aspect-ratio: 1/1;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center
}

.gradient-text {
    -webkit-background-clip: text;
    background-clip: text;
    color: #fff0
}

.service-section {
    padding-block: 50px
}

.service-card,
.ul-box {
    border: 1px solid #dfdfdf;
    background-color: var(--bg-color);
    border-radius: 1rem;
    padding: 2rem;
    transition: .3s
}

.service-card .gap-15 {
    gap: 16px !important
}

.service-card:hover {
    border-color: rgb(243 49 100 / .5);
    transform: scale(1.05)
}

.service-card p {
    -webkit-line-clamp: unset !important;
    font-size: 15px;
    line-height: 24px
}

.services-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 4rem;
    height: 4rem;
    background: linear-gradient(90deg, #f2276e, #fa6431);
    border-radius: 12px;
    color: #fff
}

.testimonial-container,
footer {
    background-color: var(--bg-color);
}

.testimonial-card {
    background: #f5f5f5;
    border: 1px solid #e4e4e4;
    border-radius: 16px;
    padding: 30px;
    margin: 20px;
    box-shadow: 0 0px 8px rgb(0 0 0 / 18%);
    transition: .3s;
}

.testimonial-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 30px rgb(0 0 0 / .4)
}

.testimonial-rating,
.toggle-panel p {
    margin-bottom: 20px
}

.testimonial-card .author-title {
    line-height: normal
}

.stars {
    display: flex;
    gap: 4px
}

.star {
    color: #fa6431;
    font-size: 18px;
    font-weight: 700
}

.testimonial-content {
    margin-bottom: 25px
}

.testimonial-content p {
    color: #030303;
    font-style: italic;
    font-size: 16px;
    line-height: 1.6;
    margin: 0
}

.testimonial-author {
    display: flex;
    align-items: center;
    gap: 15px
}

.author-image,
.menu-links li svg,
.services-icon {
    flex-shrink: 0
}

.author-image img {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid #fa6431
}

.author-info,
.content-text {
    flex: 1
}

.author-name {
    color: #000000;
    font-size: 18px;
    font-weight: 600;
    margin: 0 0 5px
}

.author-title {
    color: #fa6431;
    font-size: 14px;
    font-weight: 500;
    margin: 0 0 3px
}

.author-company {
    color: #000000;
    font-size: 14px;
    margin: 0;
    opacity: .8
}

.button-container {
    display: flex;
    gap: 10px;
    justify-content: center;
    margin-top: 20px
}

.button-container button {
    background: var(--gradinet);
    border: unset;
    border-radius: 50%;
    box-shadow: 1px 1px 9px 1px rgb(0 0 0 / .1);
    display: grid;
    height: 35px;
    place-items: center;
    width: 35px
}

button:is(.button-next, .button-prev):disabled,
button:is(.button-next, .button-prev)[disabled] {
    background: var(--bg-color)
}

button:is(.button-next, .button-prev):disabled,
button:is(.button-next, .button-prev)[disabled] svg path {
    fill: #000;
}

.button-prev svg path {
    fill: #ffffff;
}

.about-artist,
.influencer-card,
.influencer-pg-header,
.wp-block-table table {
    background-color: var(--bg-color);
}

.inlfuencers-stats {
    position: absolute;
    color: var(--white-color);
    top: -176px;
    right: 10px
}

.artist-circle,
.brand-portfolio .influencer-card,
.fomr-cht,
.goal .feature-card,
.influencer .influencer-card .img-placeholder,
.register-form,
.team-slider .influencer-card,
.why-choose-card {
    position: relative
}

.influencer .influencer-card .img-placeholder:after {
    content: '';
    width: 100%;
    height: 100%;
    display: flex;
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at top left, #fff0 32%, rgb(0 0 0 / 35%) 64%, rgb(0 0 0 / 96%) 100%)
}

.influencer .influencer-card .img-placeholder:has(a img) {
    background: unset
}

.influencer-card .influencer-content a img:not(.nf-author img) {
    border: 4px solid var(--bg-color);
    border-radius: 50%;
    height: 70px;
    margin-top: -50px;
    object-fit: cover;
    position: relative;
    width: 70px;
    z-index: 1
}

.about-influencer,
.influencer-content {
    color: var(--primary-color);
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 8px;
    padding: 5px
}

.influencer-title,
.wp-block-table table th {
    color: var(--primary-color);
    font-size: var(--fs-18);
    font-weight: var(--fw-600)
}

.influencer-content-overlay span{
 color: white!important;
}

.footer-links li a:hover,
.influencer-title:hover,
.menu-links li a:hover,
.toc-body a:hover {
    text-decoration: underline
}

.brand-portfolio .tag {
    position: absolute;
    top: 110px;
    padding: 10px;
    width: 95%
}

.brand-portfolio .inlfuencers-stats .ribbon {
    clip-path: polygon(50% 0, 100% 0, 100% 0, 93% 49%, 100% 100%, 50% 100%, 0 100%, 0 0, 0 0, 0 0)
}

.brand-portfolio .inlfuencers-stats {
    right: 20px;
    position: absolute;
    top: 35px !important;
    left: -10px !important;
    justify-content: start !important
}

.brand-logo img {
    height: 45px;
    width: 100%;
    object-fit: cover
}

.brand-logo img:hover {
    transform: translatey(-5px);
    transition: .4s ease-in
}

.scroller {
    max-width: 100%
}

.scroller img {
    margin-right: 60px;
    height: 50px
}

.marquee-list .scroller__inner {
    display: flex;
    gap: 40px
}

.scroller[data-animated=true] {
    overflow: hidden
}

.scroller[data-animated=true] .scroller__inner {
    width: max-content;
    flex-wrap: nowrap;
    animation: scroll var(--_animation-duration, 40s) var(--_animation-direction, forwards) linear infinite;
    filter: brightness(0.6);
}

.scroller[data-direction=right] {
    --_animation-direction: reverse
}

.scroller[data-direction=left] {
    --_animation-direction: forwards
}

.scroller[data-speed=fast] {
    --_animation-duration: 20s
}

.scroller[data-speed=slow] {
    --_animation-duration: 60s
}

@keyframes scroll {
    to {
        transform: translate(calc(-50% - .5rem))
    }
}

.case-study-card p {
    -webkit-line-clamp: 4 !important
}

.case-study-card .btn {
    justify-content: center;
    width: 100%
}

.why-choose-card {
    background-color: #F5F5F5;
    border-radius: 0 60px;
    color: var(--primary-color);
    padding: 30px;
    counter-increment: process-step
}

.why-choose-card p {
    line-height: 30px
}

.why-choose-card:hover {
    background: #fff0f0;
    transition: .5s ease-in
}

.why-choose-card:hover p {
    color: var(--primary-color) !important
}

.why-choose-card-head {
    align-items: center;
    display: flex;
    gap: 20px;
    justify-content: space-between
}

.dots-seperator {
    align-items: center;
    display: flex;
    gap: 5px;
    margin-top: -15px
}

.dots-seperator span {
    background-color: var(--primary-color);
    display: flex;
    gap: 5px;
    height: 2px
}

.dots-seperator span:first-child {
    width: 35px
}

.dots-seperator span:nth-child(2),
.dots-seperator span:nth-child(3) {
    width: 4px
}

.why-choose-card::after {
    content: counter(process-step, decimal-leading-zero);
    position: absolute;
    bottom: 20px;
    right: 20px;
    font-size: 65px;
    font-weight: 700;
    color: #decbc5cc;
    opacity: .3;
    z-index: 1;
    transition: .3s
}

.why-choose-card:hover::after {
    opacity: 1;
    color: #ffd3d3;
    transform: scale(1.1)
}

.process-section {
    counter-reset: process-step
}

.gradient-list li,
:is(.service-card, .case-study-card, .ul-box) ul li {
    position: relative;
    padding-left: 20px;
    list-style: none;
    line-height: 1.8;
    color: #323232;
    font-size: 15px;
    transition: .3s
}

.case-study-card ul li {
    line-height: 2;
    color: #323232;
    font-size: 15px;
    font-weight: 500
}

.gradient-list li::before,
:is(.service-card, .case-study-card, .ul-box, .gradient-list) ul li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 11px;
    width: 6px;
    aspect-ratio: 1/1;
    background: linear-gradient(90deg, #f2276e, #fa6431);
    border-radius: 50%;
    display: inline-block;
    transition: .3s
}

.why-choose-card:hover .gradient-list li::before {
    /* background: #ffe5e5; */
    transform: scale(1.2)
}

.why-choose-card:hover ul li::marker {
    color: #1e2125
}

.about-section {
    background: #fff0f0;
    padding: 50px 0
}

.about-main-heading {
    font-size: 48px;
    font-weight: 700;
    color: var(--primary-color);
    line-height: 1.2;
    margin-bottom: 30px
}

.about-description p {
    color: #323232;
    font-size: 16px;
    line-height: 1.8;
    margin-bottom: 20px
}

.mission-card {
    background: #ffffff;
    border-radius: 16px;
    padding: 30px;
    border: 1px solid #dbdbdb;
}

.mission-heading {
    font-size: 24px;
    font-weight: 600;
    color: var(--primary-color);
    margin-bottom: 15px
}

.mission-text {
    color: #000000;
    font-size: 16px;
    line-height: 1.7;
    margin: 0
}

.feature-cards {
    display: flex;
    gap: 20px;
    margin-top: 30px
}

.feature-card {
    background: #ffffff;
    border-radius: 12px;
    padding: 25px;
    flex: 1;
    border: 1px solid #dbdbdb;
    transition: .3s;
    height: 100%
}

.feature-card:hover {
    transform: translateY(-5px);
    border-color: var(--secondry-color)
}

/* .feature-content{
    filter: brightness(0.6);
} */

.feature-content img {
    filter: brightness(0.6);
}

.feature-icon {
    width: 50px;
    height: 50px;
    background: linear-gradient(90deg, #f2276e, #fa6431);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 15px;
    flex-shrink: 0;
    color: #fff
}

.feature-icon i {
    font-size: 20px;
    color: var(--primary-color)
}

.feature-title {
    font-size: 18px;
    font-weight: 600;
    color: var(--primary-color);
/*     margin-bottom: 8px */
}

.feature-description,
.overlay-description {
    color: #000000;
    font-size: 14px;
    line-height: 1.6;
    margin: 0
}

.about-image-container {
    position: relative;
    border-radius: 12px;
    /* height: 500px */
}

.about-image {
    width: 100%;
    height: 380px;
    object-fit: cover;
    border-radius: 20px
}

.image-overlay {
    position: absolute;
    left: 0;
    bottom: -120px;
    padding: 25px;
    border-radius: 12px;
    width: 100%
}

.overlay-title {
    font-size: 20px;
    font-weight: 600;
    color: var(--primary-color);
    margin-bottom: 10px
}

#table_of_content .thead,
.influencer-widget-title {
    background: var(--gradinet);
    font-size: var(--fs-18)
}

.call a,
.foot-catg {
    font-weight: var(--fw-600);
    color: var(--primary-color)
}

.team-slider .float-btn {
    position: absolute;
    top: 20px !important;
    right: 20px !important;
    padding: 15px !important
}

.cta-bg {
    padding: 50px 30px;
    position: relative;
    z-index: 0
}

.cta-bg:after {
    position: absolute;
    content: '';
    inset: 0;
    background: url(https://metropolitanhost.com/themes/themeforest/html/flimzyfans/assets/img/404.png) top center/cover no-repeat;
    height: 100%;
    width: 100%;
    z-index: -1
}

.cta-bg-wrap:before {
    content: '';
    position: absolute;
    height: 100%;
    width: 50%;
    background: linear-gradient(90deg, #f2276e30, #fa643140);
    top: 0;
    right: 0;
    z-index: 1
}

.cta-bg-wrap .col-lg-5:last-child {
    z-index: 1
}

.foot-catg {
    margin-bottom: 25px;
    position: relative;
    width: fit-content
}

.foot-catg:after {
    background-color: var(--primary-color);
    bottom: -8px;
    content: "";
    height: 2px;
    left: 0;
    position: absolute;
    width: 100%
}

.footer-links li {
    border-bottom: 1px solid #dbdbdb;
    padding-bottom: 13px;
    padding-top: 13px
}

.footer-links li:last-child,
.toggle-btn,
.toggle-btn2 {
    border: none
}

.footer-links li a {
    color: #000000;
}

.copyright {
    color: var(--primary-color)
}

#breadcrumbs,
#breadcrumbs a,
.author-role,
.blog-author-details p,
.booking-box p,
.d-grid-footer-strip p,
.influencer-content p,
.testimonial p,
.why-choose-card p {
    color: #323232
}

.influencer-widget-title,
.toc-header{
  color: #fff;
}

.pn-header {
    color: var(--primary-color);
    font-weight: var(--fw-600)
}

.influencer-pg-header .blog-details {
    border-top: 1px solid #3b3b3b;
    padding-top: 1.6rem;
    position: relative
}

.blog-details ul a,
.blog-details ul li {
    align-items: center;
    color: #323232;
    display: flex;
    flex-wrap: wrap;
    gap: 10px
}

.blog-details ul a:hover,
.toc-body ul li.active a {
    color: var(--secondry-color)
}

.blog-details img {
    border: 3px solid #fff;
    border-radius: 50%
}

.influencer-widget-title {
    border-radius: 0 10px 0 0
}

.blog-author-details:before,
.influencer-widget .influencer-widget-content {
    background-color: var(--bg-color);
    border-top: 3px solid var(--secondry-color)
}

.blog-author-details img {
    border: 2px solid #c7c7c7;
    border-radius: 50%
}

#table_of_content a {
    border-bottom: 0
}

.modal-header,
.toc-header,
.wp-block-table.is-style-stripes table thead {
    background: var(--gradinet)
}

#table_of_content .thead:after {
    background: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23fff' viewBox='0 0 512 512'%3E%3Cpath d='M233.4 406.6c12.5 12.5 32.8 12.5 45.3 0l192-192c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L256 338.7 86.6 169.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l192 192z'/%3E%3C/svg%3E");
    content: "";
    flex: none;
    height: 16px;
    margin-left: auto;
    width: 16px
}

#table_of_content .thead {
    position: relative;
    color: #fff
}

ul.table-list li {
    font-size: 15px;
    font-weight: var(--fw-600);
    line-height: 1.5;
    list-style-type: none
}

ul.table-list {
    border: 1px solid #c7c7c7
}

.toc-body::-webkit-scrollbar {
    width: 5px
}

.toc-body::-webkit-scrollbar-track {
    background: #c7c7c7
}

.toc-body::-webkit-scrollbar-thumb {
    background: var(--gradinet);
    border-radius: 20px
}

.all-page a:not(.toc-body a, .pagination a, .related-post a, .all-page .bg-box a, .blog-details li a, .btn, .influencer-widget .influencer-widget-content a) {
    color: var(--secondry-color);
    font-weight: var(--fw-500)
}

.all-page :is(p>a, li>a, h2>a, h3>a, h4>a, h5>a, h6>a):not(.toc-body li a) {
    border-bottom: 1px solid var(--secondry-color);
    color: var(--secondry-color)
}

.all-page :is(p>a, li>a, h2>a, h3>a, h4>a, h5>a, h6>a):not(.toc-body li a):hover {
    border-bottom: unset
}

blockquote {
    background: var(--bg-color);
    border-radius: 8px;
    box-shadow: 0 1px 4px 0 rgb(0 0 0 / .25);
    font-style: italic
}

blockquote:before {
    background: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='90' height='45' fill='none'%3E%3Cpath fill='%234E77A8' fill-opacity='.15' d='M42.922 42.254q3.741-6.48 8.883-13.68 5.144-7.2 10.988-14.58c5.844-7.38 7.636-9.54 11.22-13.86h15.43q-3.975 7.02-8.416 14.94-4.208 7.92-8.182 15.48-3.74 7.38-6.546 13.68H43.857zm-42.78 0q3.74-6.48 8.649-13.68 5.143-7.2 10.754-14.58 5.844-7.38 11.22-13.86h15.663q-3.038 5.4-6.311 11.16-3.039 5.76-6.078 11.7a1982 1982 0 0 0-5.845 11.16q-2.804 5.4-4.91 10.08H.844z'/%3E%3C/svg%3E") no-repeat
}

.sources:before {
    background: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='25' fill='none'%3E%3Cpath fill='%23fff' d='M14.1 9.763H9.773l1.597-5.07c.15-.594-.28-1.18-.87-1.18H5.1a.914.914 0 0 0-.892.812l-1.2 9.375c-.071.563.349 1.063.892 1.063h4.452l-1.73 7.597c-.134.594.3 1.153.875 1.153a.9.9 0 0 0 .78-.47l6.6-11.874c.348-.621-.083-1.406-.777-1.406'/%3E%3C/svg%3E") 50% no-repeat
}

.notes:before {
    background: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='25' fill='none'%3E%3Cpath stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M14 2.083H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-12z'/%3E%3Cpath stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M14 2.083v6h6M16 13.083H8M16 17.083H8M10 9.083H8'/%3E%3C/svg%3E") no-repeat
}

.also-read:before {
    background: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none'%3E%3Cpath fill='%23fff' stroke='%23367EA2' stroke-width='.049' d='M3.036 19.808c-.57-.03-1.012-.486-1.012-1.032v-8.703c0-.596.517-1.07 1.139-1.034.944.054 2.353.178 3.816.466s2.978.74 4.133 1.446a.5.5 0 0 1 .239.427v9.61c0 .376-.413.618-.765.441-2.39-1.203-5.844-1.531-7.55-1.62ZM12 1.538a3.726 3.726 0 1 1 0 7.45 3.726 3.726 0 0 1 0-7.45Zm.889 9.413c1.155-.707 2.67-1.158 4.132-1.446a29 29 0 0 1 3.816-.466c.622-.035 1.139.438 1.139 1.034v8.704c0 .546-.442 1.003-1.012 1.032-1.705.09-5.158.418-7.547 1.62-.353.178-.767-.065-.767-.443v-9.601c0-.175.086-.34.239-.434Z'/%3E%3C/svg%3E") no-repeat
}

.widget-pn-container .widget-pn-col:first-child .pn-header {
    background-color: #68a624
}

.pn-header {
    background-color: #e00000;
    font-size: var(--fs-20)
}

.pn-header:before {
    border-left: 10px solid #fff0;
    border-top: 8px solid #b40404
}

.widget-pn-container .widget-pn-col:first-child .pn-header:before {
    border-top-color: #4e8118
}

.pc-body {
    box-shadow: 0 0 2px 0 #c7c7c7
}

.accordion,
summary {
    border-top-left-radius: 25px;
    border-top-right-radius: 25px
}

.accordion .content {
    padding: 15px 0 0;
    color: #000
}

.wp-block-table table :is(td, th) {
    color: var(--primary-color);
    padding: 12px 16px;
    text-align: left;
    word-break: auto-phrase
}

.wp-block-table.is-style-stripes tbody tr:nth-child(odd) {
    background-color: #f0f0f024 !important
}

.all-page .wp-block-table .has-fixed-layout {
    border-collapse: collapse;
    table-layout: auto
}

.all-page .wp-block-table::-webkit-scrollbar {
    width: 20px;
    height: 10px
}

.all-page .wp-block-table::-webkit-scrollbar-track {
    box-shadow: inset 0 0 5px grey;
    border-radius: 10px
}

.all-page .wp-block-table::-webkit-scrollbar-thumb {
    background: var(--gradinet);
    border-radius: 10px
}

.page-numbers:before {
    background-color: #f32d68
}

.artist-activites,
.celebrities {
    padding-top: 40px;
    background: var(--bg-color);
}

.artist-content-head {
    color: #c7c7c7;
    gap: 15px
}

.artist-content ul li{
    margin-bottom: 15px;
    line-height: 30px;
}

.artist-category ul {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    list-style-type: none
}

.artist-category ul li a {
    border: 1px solid #c7c7c7;
    border-radius: 50px;
    color: #c7c7c7;
    padding: 4px 10px
}

.artist-bottom {
    border-top: 1px solid hsl(0 0% 100% / .1);
    flex-wrap: wrap;
    margin: 10px 0;
    padding-top: 15px
}

.artist-link {
    display: block;
    font-size: 18px;
    font-weight: var(--fw-600);
    margin: 20px auto 0;
    position: relative;
    width: fit-content
}

.artist-btn,
.contact-detail-box .bg-box a,
.fill-form .register-form label,
.read-more a {
    font-weight: 600
}

.artist-btn,
.artist-link {
    color: var(--primary-color);
    text-transform: uppercase
}

.artist-btn {
    background: linear-gradient(90deg, #f2276e, #fa6431);
    border-radius: 4px;
    padding: 8px 18px
}

.artist-links li a {
    align-items: center;
    background: var(--gradinet);
    border-radius: 50%;
    display: flex;
    height: 40px;
    justify-content: center;
    width: 40px
}

.artist-item .img-cont a>img {
    border-radius: 50%;
    background: #fff;
    padding: 25px
}

.co-aut {
    border: 1px solid var(--secondry-color)
}

.co-img img {
    border-radius: 8px;
    height: 40px;
    width: 40px
}

.auth-social-follow ul {
    padding: 0
}

.auth-social-follow ul a,
.border-none {
    border: none !important
}

.contact-detail-box ul,
.contact-detail-box ul li {
    margin-bottom: 0 !important
}

.contact-detail-box .bg-box {
    padding: 20px;
    background: #fff;
    height: 100%;
    margin-bottom: 20px;
/*     width: fit-content */
}

.page-template-contact-layout .contact-detail-box{
    height: 100% !important
}

.page-template-contact-layout .ip-contact-form .form-content{
    margin-bottom: 0
}

.contact-detail-box .bg-box>strong {
    display: block;
    margin-bottom: 10px !important
}

.contact-detail-box ul {
    padding-left: 0 !important
}

.row-gap-2 {
    row-gap: 20px
}

.thank-you {
    display: grid;
    place-items: center;
    gap: 12px
}

.thank-you div {
    text-align: center !important
}

.btn_float {
    position: fixed;
    top: 52%;
    right: -82px;
    transform: rotate(90deg);
    z-index: 99999999;
    border-radius: 10px 10px 0 0;
    box-shadow: 1px 0 9px -5px rgb(0 0 0 / .75)
}

.conatact-details {
    gap: 20px
}

.conatact-details .services-icon .h6,
.mb-1 {
    margin-bottom: 5px !important
}

.conatact-details .services-icon p {
    line-height: 20px !important
}

.big-head {
    font-weight: var(--fw-600)
}

.sub-catg-para {
    font-size: var(--fs-18)
}

.plus-icon {
    color: #fc4a0a
}

.card-btn,
.form-content {
    color: var(--primary-color)
}

.position-unset {
    position: unset !important
}

.btn-full {
    width: 100% !important;
    justify-content: center
}

.bg-black-shade {
    background: #00000026 !important
}

.mt-20 {
    margin-top: 20px
}

form button,
form input,
form textarea {
    border: 0;
    font-size: 16px;
    padding: 0 10px
}

form input:focus {
    outline: 0
}

.form-content {
    margin-bottom: 15px
}

.form-content textarea {
    margin-bottom: 30px;
    width: 100%
}

.form-content input,
.form-content textarea {
    background-color: var(--white-color);
    border-bottom: 1px solid #dbdbdb;
    margin-top: 10px
}

.form-content input {
    padding: 8px 12px;
}

.search-form button,
.sponsor-wrap .sponsored-card .img-placeholder {
    background: 0 0
}

#chatbot-header,
#chatbot-send,
.btn,
.user-message {
    background: linear-gradient(90deg, #f2276e, #fa6431)
}

.card-btn {
    background-color: var(--dark);
    border: 1px solid #fa6431;
    border-radius: 50px;
    padding: 8px 18px;
    width: fit-content
}

.card-btn:hover,
.tag .ribbon {
    background: var(--gradinet);
    color: var(--white-color) !important
}

.artist-btn:hover,
.btn:hover,
.card-btn:hover {
    -webkit-animation: 2s infinite pulse;
    animation: 1.5s infinite pulse512;
    background-position: 100%;
    background-size: 200% auto
}

.unfill_btn {
    border: 2px solid #fa6431;
    background-image: unset !important
}

.unfill_btn:hover {
    background-image: linear-gradient(90deg, #f2276e, #fa6431) !important;
    transition: .4s ease-in
}

.read-btn-meeting {
    background: linear-gradient(90deg, #f2276e, #fa6431);
    color: #fff !important;
    padding: 8px 20px;
    letter-spacing: 4px
}

.price {
    background: var(--gradinet);
    -webkit-background-clip: text;
    font-size: var(--fs-20)
}

.price,
.time {
    font-weight: var(--fw-700)
}

.time {
    align-items: center;
    display: flex
}

.booking-box {
    background-color: #FFF0F0;
    border-radius: 4px;
    height: 100%;
    padding: 40px
}

.booking-box,
.booking-box span {
    align-items: center;
    display: flex;
    justify-content: center
}

.booking-box span {
    border: 1px solid #dbdbdb;
    background: #fff;
    border-radius: 50px;
    height: 70px;
    width: 70px
}

.booking-box .footer-strip {
    border-top: 1px dotted #4a4a4a;
    padding-top: 20px
}

.booking-box form input {
    border: unset;
    border-bottom: 1px solid #bbbbbb;
    color: var(--primary-color)
}

.booking-box form input::placeholder {
    color: #808080 !important;
}

.modal-header .close-btn {
    align-items: center;
    background: var(--gradinet);
    border-radius: 50%;
    display: flex;
    height: 40px;
    justify-content: center;
    width: 40px;
    background: var(--primary-color) !important
}

.modal-b ody input,
.modal-body textarea {
    border-bottom: 1px solid #dbd2d2
}

.all-page form input:focus,
.all-page textarea:focus,
.booking-box form input:focus,
.modal-body input:focus,
.modal-body textarea:focus {
    border-bottom: 1px solid #f2276e !important;
    outline: unset;
    transition: .5s
}

.pop-up-head {
    background-color: #fff;
    color: var(--primary-color)
}

.strip-btn {
    align-items: center;
    background-color: var(--dark);
    color: #fff;
    border-radius: 50px;
    display: flex;
    gap: 5px;
    padding: 6px 25px
}

.mail-address,
.menu-links li,
.tag-list li {
    gap: 10px;
    display: flex
}

.mail-address {
    align-items: center;
    color: var(--secondry-color)
}

.bg-box {
    /* background-color: #ffffff; */
    background-color: #FFF0F0;
    border: 1px solid #dbdbdb;
    padding: 30px;
    border-radius: 12px;
    boder-radius: 12px;
}

.grid-3 {
    display: grid;
    grid-template-columns: auto auto auto;
    gap: 30px;
    align-items: center;
    justify-content: center
}

.artist-circle img {
    border-radius: 20px;
    overflow: hidden;
    width: 100px;
    height: 100px;
    object-fit: cover;
    position: relative
}

.artist-circle::before {
    position: absolute;
    content: '';
    bottom: -1px;
    right: -6px;
    border-bottom: 12px solid #f32b6b;
    border-left: 10px solid #fff0;
    rotate: 358deg
}

.events-slider .tag {
    justify-content: end
}

.celebrities .events-slider .influencer-card{
    background: #fff;
    border: 1px solid var(--secondry-color)
}

.sponsored-card {
    background: unset;
    width: 100%
}

.sponsored-card :is(.img-placeholder, .img-placeholder img) {
    height: 250px;
    border-radius: 4px;
    box-shadow: 1px 5px 20px 10px rgb(215 215 215 / 2%)
}

.sponsored-card .influencer-content {
    padding: unset
}

.sponsored-card .artist-links {
    top: -130px
}

.sponsor-wrap .sponsored-card .img-placeholder img {
    object-fit: contain
}

.fill-form.container {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    display: flex;
    align-items: center;
    height: 550px;
    background: #fff;
    margin: 50px auto;
    border-radius: 30px;
    overflow: hidden;
    z-index: 1
}

.fill-form,
.hidden {
    display: none !important
}

.fill-form.show {
    display: flex !important
}

.fill-form .form-box {
    position: absolute;
    right: 0;
    width: 60%;
    height: fit-content;
    background: #fff;
    display: flex;
    align-items: center;
    color: #333;
    text-align: center;
    padding: 40px;
    z-index: 1;
    transition: .6s ease-in-out 1.2s, visibility 0s 1s
}

.container.active .form-box {
    right: 40%
}

.fill-form.active .register-form.Influencer,
.form-box.register,
.register-form.brand {
    visibility: hidden
}

.container.active .form-box.register,
.fill-form.active .register-form.brand {
    visibility: visible
}

.toggle-box {
    position: absolute;
    width: 100%;
    height: 100%
}

.toggle-box::before {
    content: '';
    position: absolute;
    left: -250%;
    width: 290%;
    height: 100%;
    background: linear-gradient(3deg, #f2276e, #fa6431);
    border-radius: 150px;
    z-index: 2;
    transition: 1.8s ease-in-out
}

.form-title::after,
.form-title::before {
    position: absolute;
    width: 23px;
    height: 29px;
    z-index: 1;
    opacity: 1;
    transform: rotate(180deg);
    bottom: 0
}

.container.active .toggle-box::before {
    left: 60%
}

.toggle-panel {
    position: absolute;
    width: 38%;
    height: 100%;
    color: #fff;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 2;
    transition: .6s ease-in-out
}

.toggle-panel.toggle-left {
    left: 0;
    transition-delay: 1.2s
}

.container.active .toggle-panel.toggle-left {
    left: -50%;
    transition-delay: .6s
}

.toggle-panel.toggle-right {
    right: -50%;
    transition-delay: .6s
}

.container.active .toggle-panel.toggle-right {
    right: 0;
    transition-delay: 1.2s
}

.toggle-panel .btn {
    border: 2px solid #fff;
    background: var(--gradinet)
}

.register-form form:not(.all-page form) {
    display: block;
    text-align: left;
    margin-top: 30px
}

.fill-form .register-form form :is(input, textarea, select) {
    background-color: #e5e5e5;
    color: #242424 !important
}

.cross-btn {
    position: absolute;
    z-index: 22;
    background: #fff;
    right: 28px;
    top: 11px;
    width: 36px;
    height: 36px;
    border: 1px solid #505050;
    border-radius: 30px;
    fill: #505050
}

.menu-links {
    display: grid;
    gap: 15px;
    margin-bottom: 30px
}

.menu-links li:first-child svg {
    margin-top: 5px
}

.menu-links li a {
    color: #000000;
}

.bg-wrapper {
    background: var(--white-color);
    padding-block: 50px
}

.stats {
    background: #ffe5e5;
    padding-block: 20px
}

:not(.search-form) form :is(input:not([type=checkbox]), textarea, select) {
    margin-bottom: 22px;
    padding: 10px 10px;
    width: 100%;
    background-color: #ffffff;
    border-radius: 4px !important;
    color: #060606 !important;
    font-size: 16px;
}

.register-form form :is(input:focus, textarea:focus, select:focus) {
    border-bottom: unset !important
}

.register-form form textarea,
.register-form form textarea::placeholder,
.register-form input,
.register-form input::placeholder {
    color: #585858 !important;
    font-size: 15px
}

.register-form label {
    margin-bottom: 10px;
    display: block;
    font-size: 15px
}

.form-title {
    color: #fff;
    padding: 10px 24px;
    background: linear-gradient(90deg, #f2276e, #fa6431);
    position: absolute;
    top: -20px;
    left: 55px;
    border-radius: 20px 20px 0 0
}

.form-title::before {
    content: "";
    right: 99.9%;
    background: linear-gradient(90deg, #b71950, #fa6431);
    clip-path: polygon(0 0, 0% 100%, 100% 100%)
}

.form-title::after {
    content: " ";
    left: 100%;
    background: linear-gradient(90deg, #fa6431, #b71950);
    border-radius: 50px 0 0;
    clip-path: polygon(100% 0, 0% 100%, 100% 100%)
}

.register-form .bg-box {
    padding-top: 45px
}

input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0
}

input[type=number] {
    -moz-appearance: textfield
}

#recaptcha_widget {
    margin-bottom: 20px !important
}

#chatbot-container,
#chatbot-open {
    position: fixed;
    right: 20px;
    z-index: 2
}

#chatbot-close,
#chatbot-header {
    cursor: pointer;
    font-weight: 700;
    color: #fff
}

#chatbot-container {
    bottom: 20px;
    width: 350px;
    border-radius: 15px;
    background: #f9f9f9;
    box-shadow: 0 5px 15px rgb(0 0 0 / .3);
    font-family: Poppins, sans-serif;
    overflow: hidden;
    transition: .3s ease-in-out;
    display: none;
    padding: 0
}

#chatbot-open,
.whatsapp_float {
    bottom: 20px;
    width: fit-content
}

#chatbot-header {
    padding: 15px;
    border-radius: 15px 15px 0 0
}

#chatbot-open {
    padding: 10px 20px;
    color: #fff;
    border: none;
    border-radius: 50px;
    font-size: 16px;
    box-shadow: 0 4px 10px rgb(0 0 0 / .3)
}

#chatbot-messages {
    height: 250px;
    overflow-y: auto;
    padding: 15px;
    background: #fff
}

.bot-message,
.user-message {
    padding: 8px 12px;
    margin: 8px;
    border-radius: 10px;
    max-width: 75%;
    word-wrap: break-word;
    font-size: 14px
}

.user-message {
    color: #fff;
    align-self: flex-end
}

.bot-message {
    background: #e0e0e0;
    color: #000;
    align-self: flex-start
}

#chatbot-input {
    width: 60%;
    padding: 10px;
    border-radius: 50px;
    border: 1px solid #ccc;
    outline: 0;
    margin: 10px
}

#chatbot-send {
    width: 18%;
    padding: 10px;
    color: #fff;
    border: none;
    border-radius: 50px
}

.typing-indicator {
    font-size: 12px;
    font-style: italic;
    color: gray
}

#chatbot-close {
    font-size: 18px;
    position: absolute;
    right: 30px
}

#chatbot-close:hover {
    color: #f44
}

.whatsapp_float {
    position: fixed;
    left: 15px;
    z-index: 996;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px
}

.overlay-image,
.process-steps,
.step-item,
.timeline,
.timeline>ul>li,
.yt-card {
    position: relative
}

.whatsapp_float svg {
    width: 48px;
    height: 48px
}

.chat-label {
    padding: 6px 10px;
    background: #fff;
    color: #2d2d2e;
    border-radius: 4px
}

.whatsapp-btn {
    background: #25d366 !important
}

.call-btn {
    background: #4286f0 !important
}

.whatsapp-btn:hover {
    -webkit-animation: 2s infinite pulse;
    animation: 1.5s infinite pulse513;
    background: linear-gradient(90deg, #25d366, #25d366) !important
}

.call-btn:hover {
    -webkit-animation: 2s infinite pulse;
    animation: 1.5s infinite pulse514;
    background: #4286f0 !important
}

@keyframes pulse512 {
    0% {
        box-shadow: 0 0 0 0 #fa6431
    }

    70% {
        box-shadow: 0 0 0 10px #fff0
    }

    to {
        box-shadow: 0 0 0 0 #fff0
    }
}

@keyframes pulse513 {
    0% {
        box-shadow: 0 0 0 0 #25d366
    }

    70% {
        box-shadow: 0 0 0 10px #fff0
    }

    to {
        box-shadow: 0 0 0 0 #fff0
    }
}

@keyframes pulse514 {
    0% {
        box-shadow: 0 0 0 0 #4286f0
    }

    70% {
        box-shadow: 0 0 0 10px #fff0
    }

    to {
        box-shadow: 0 0 0 0 #fff0
    }
}

@media screen and (max-width: 1023px) {
    header ul {
        background: var(--bg-color)
    }

    footer:before {
        background: unset
    }

    .dropdown .dropdown svg {
        fill: var(--primary-color)
    }

    header nav ul li ul li a {
        color: var(--primary-color);
        white-space: normal;
        /* max-width: 80%; */
    }

    header ul .dropdown ul {
        background-color: var(--bg-color);
        margin: 0 0 20px
    }
    
    .btn{
        white-space: unset !important;
    }
    
    .bg-box,
    .booking-box{
        padding: 20px
    }

    .plus-icon {
        font-size: 20px
    }

    .overflow-mob {
        overflow-x: scroll
    }

    .cta-bg-wrap:before {
        bottom: 0;
        width: 100%;
        height: 50%
    }

    .brand-logo-inner {
        margin-bottom: 50px
    }
}

@media screen and (min-width: 600px) and (max-width:1023px) {

    .big-h,
    .big-head {
        font-size: 35px;
        line-height: 50px
    }

    .md-w-100 {
        width: 100% !important
    }
}

@media (max-width: 600px) {
    .fill-form .form-box {
        bottom: 0;
        width: 100%;
        top: 0;
        border-radius: 14px
    }

    .fill-form.container.active .form-box {
        right: 0;
        bottom: 30%
    }

    .fill-form .toggle-box::before {
        left: 0;
        top: -270%;
        width: 100%;
        height: 292%;
        border-radius: 20vw
    }

    .fill-form.container.active .toggle-box::before,
    .toggle-box {
        left: 0
    }

    .fill-form.container.active .toggle-panel.toggle-left {
        left: 0;
        top: -30%
    }

    .fill-form .toggle-panel {
        width: 100%;
        height: 20%;
        justify-content: unset;
        gap: 10px
    }

    .fill-form.container.active .toggle-panel.toggle-right,
    .toggle-panel.toggle-left {
        top: 0
    }

    .toggle-panel.toggle-right {
        right: 0;
        top: -30%;
        visibility: hidden
    }

    .fill-form.active .toggle-right {
        visibility: visible
    }

    .toggle-panel p {
        display: none
    }
}

@media screen and (max-width: 400px) {
    .form-box {
        padding: 20px
    }
}

@media (max-width: 991px) {
    .about-main-heading {
        font-size: 36px
    }

    .feature-cards {
        flex-direction: column
    }
}

.page-header {
    background: #fff0f0;
    margin-bottom: 30px;
    height: auto;
    padding: 60px 0;
    display: flex;
    align-items: center;
    justify-content: center
}

.offer .why-choose-card-head {
    display: unset
}

.offer .why-choose-card::after {
    top: 10px;
    right: 30px;
    font-size: 45px
}

.feature .feature-card {
    padding: 15px;
    gap: 20px;
    height: 100%
}

.write-mode .feature-card {
    padding: 30px 30px 30px 60px
}

.package .feature-card .feature-icon {
    width: 30px;
    height: 30px;
    border-radius: 50%
}

.container.feature-card:hover {
    transform: unset;
    /* border: unset */
}


.package .feature-card {
    padding: 10px
}

.package .feature-title {
    font-weight: 300
}

.write-mode .border {
    border: unset
}

@media screen and (min-width: 992px) {
    .write-mode .seperator {
        top: 40% !important;
        transform: translate(-50%, -40%) !important;
        left: 34% !important
    }

    .write-mode .seperator h2 {
        font-size: 32px !important
    }
}

.process-steps {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 20px;
    margin-bottom: 40px
}

.step-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    transition: .3s;
    padding: 10px 15px;
    border-radius: 12px;
    background: #fff0f0;
    border: 2px solid #fff0
}

.step-arrow,
.step-icon {
    display: flex;
    align-items: center;
    transition: .3s
}

.step-item:hover {
    transform: translateY(-5px);
    background: rgb(250 100 49 / .1);
    border-color: rgb(250 100 49 / .3)
}

.step-item.active {
    background: linear-gradient(135deg, #fa6431, #f2276e);
    border-color: #fa6431;
    box-shadow: 0 10px 30px rgb(250 100 49 / .3)
}

.step-icon {
    width: 60px;
    height: 60px;
    justify-content: center;
    background: rgb(255 255 255 / .1);
    border-radius: 50%;
    margin-bottom: 15px
}

.step-item.active .step-icon {
    background: rgb(255 255 255 / .2);
    transform: scale(1.1)
}

.step-icon svg {
    width: 24px;
    height: 24px;
    color: #fff;
    transition: .3s
}

.step-text {
    font-size: 16px;
    font-weight: 600;
    color: #000000;
    transition: .3s
}

.step-item.active .step-text {
    color: #fff;
    font-weight: 700
}

.step-arrow {
    justify-content: center;
    color: #fa6431;
    opacity: .6
}

.execution .process-image {
    width: 526px;
    height: 480px;
    border-radius: 20px;
    overflow: hidden
}

.about-us img,
.execution .process-image img {
    width: 100%;
    height: 100%;
    object-fit: cover
}

.tab-content {
    background: #fff0f0;
    border-radius: 20px;
    padding: 40px;
    backdrop-filter: blur(10px);
    border: 1px solid rgb(255 255 255 / .1)
}

.tab-pane {
    display: none;
    animation: .5s ease-in-out fadeIn
}

.tab-pane.active {
    display: block
}

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

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

.content-wrapper {
    display: flex;
    align-items: center;
    gap: 40px
}

.content-text p {
    font-size: 15px;
    line-height: 1.8;
    color: rgba(0, 0, 0, 0.8);
    margin-bottom: 30px
}

@media (max-width: 768px) {
    .md-w-100 {
        width: 100% !important
    }

    .float-icon:before {
        width: 85px;
        height: 85px;
        bottom: 2%;
        left: 3%
    }

    .float-icon:after {
        width: 50px;
        height: 50px;
        top: 4%;
        right: 18px
    }

    .d-grid-50 {
        grid-template-columns: auto
    }

    .process-image,
    .toggle-box::before,
    .toggle-panel {
        display: none
    }

    .fill-form .form-box {
        width: 100%;
        right: 0 !important;
        padding: 40px 40px 0
    }

    .tab-content {
        padding: 30px 20px
    }

    .product .h3 {
        font-size: 20px
    }

    .campaign-details .h5 {
        font-size: 16px
    }
}

@media (max-width: 480px) {
    .page-header {
        padding: 40px 0 30px
    }

    .process-steps {
        justify-content: flex-start;
        gap: 9px
    }

    .step-arrow {
        display: none
    }

    .tab-content {
        padding: 20px 15px
    }

    .step-text {
        font-size: 14px
    }
}

.campaign-details img {
    height: 100px
}

.gap-10 {
    gap: 10px
}

.gap-6 {
    gap: 6px
}

.campaign-details .agency {
    border-block: 1px solid #484c4d14;
    padding-block: 10px
}

.campaign-details .agency span strong {
    font-weight: 500
}

.campaign-details .feature-icon {
    width: 35px;
    height: 35px;
    border-radius: 50%;
        color: #fff;
}

.goal .feature-description {
    font-size: 16px
}

.goal .feature-icon {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    position: absolute;
    top: -15px;
    left: 15px
}

.overlay-image {
    width: 100%;
    height: 100%;
    overflow: hidden
}

.overlay-image img {
    width: 380px;
    height: auto;
    object-fit: cover;
    margin-top: auto;
    position: absolute;
    bottom: 0;
    transform: translateX(20px)
}

.overlay-image::before {
    content: '';
    position: absolute;
    inset: 0;
    background: #fff0f0;
    border-radius: 12px;
}

.overlay-image .seperator {
    position: absolute;
    top: 0;
    padding: 30px
}

.about-page-header {
    background-color: #fff0f0;
    padding: 50px 0 60px
}

.future .feature-icon {
    width: 70px
}

.future .row-gap {
    row-gap: 40px
}

.about-us {
    width: 100%;
    height: 400px;
    overflow: hidden
}

.timeline {
    margin: 50px auto;
    padding: 40px 0;
    width: 1000px
}

.timeline:before {
    content: '';
    position: absolute;
    left: 50%;
    width: 2px;
    height: 98%;
    background: #c5c5c5
}

.timeline>ul {
    padding: 0;
    margin: 0
}

.timeline>ul>li {
    width: 50%;
    padding: 20px 40px
}

.timeline>ul>li:nth-child(odd) {
    float: left;
    text-align: right;
    clear: both
}

.timeline>ul>li:nth-child(2n) {
    float: right;
    text-align: left;
    clear: both
}

.content {
    padding-bottom: 20px
}

.timeline>ul>li:nth-child(odd):before {
    content: '';
    width: 10px;
    height: 10px;
    top: 24px;
    right: -6px;
    border-radius: 50%
}

.timeline>ul>li:nth-child(2n):before {
    content: '';
    width: 10px;
    height: 10px;
    top: 24px;
    left: -4px;
    border-radius: 50%
}

.timeline>ul>li:nth-child(2n) .time,
.timeline>ul>li:nth-child(odd) .time {
    position: absolute;
    top: 12px;
    margin: 0;
    padding: 8px 16px;
    background: var(--gradinet);
    color: #fff;
    border-radius: 18px;
    box-shadow: 0 0 0 3px rgb(233 33 99 / .3)
}

.timeline>ul>li h3 {
    padding: 0;
    margin: 0;
    font-weight: 600
}

.timeline>ul>li p {
    margin: 10px 0 0;
    padding: 0
}

.timeline>ul>li .time h4 {
    margin: 0;
    padding: 0;
    font-size: 14px;
    color: #fff
}

.timeline>ul>li:nth-child(odd) .time {
    right: -75px
}

.timeline>ul>li:nth-child(2n) .time {
    left: -75px
}

@media(max-width: 1000px) {
    .timeline {
        width: 100%
    }
}

@media(max-width: 767px) {
    .timeline {
        width: 100%;
        padding-bottom: 0;
        margin-bottom: 0 !important
    }

    .timeline:before {
        left: 20px;
        height: 97%
    }

    .timeline>ul>li:nth-child(2n),
    .timeline>ul>li:nth-child(odd) {
        width: 100%;
        text-align: left;
        padding-left: 50px;
        padding-bottom: 30px
    }

    .timeline>ul>li:nth-child(2n):before,
    .timeline>ul>li:nth-child(odd):before {
        top: -18px;
        left: 16px
    }

    .timeline>ul>li:nth-child(2n) .time,
    .timeline>ul>li:nth-child(odd) .time {
        top: -30px;
        left: 50px;
        right: inherit
    }
}

.yt-card {
    background: var(--white);
    align-items: unset;
    transition: .4s ease-in
}

.execution .process-image {
    position: sticky;
    top: 80px
}

.yt-btn-wave,
.yt-card .bttn {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 2
}

.bttn {
    border: 1px solid #fff0;
    display: inline-block;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    padding: .475rem .75rem;
    transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;
    user-select: none;
    background-color: #000;
    border-radius: 50%
}

.yt-card,
.yt-card img,
.yt-card::after {
    border-radius: 10px
}

@media screen and (min-width: 600px) {
    .write-mode .seperator {
        writing-mode: sideways-lr;
        padding: 40px 10px;
        /* border: 1px solid #333; */
        border-radius: 20px;
        z-index: 2;
        background: var(--gradinet);
        position: absolute;
        top: 30%;
        left: 7px;
        margin-bottom: 0;
        color: white;
    }

    .write-mode .seperator h2 {
        font-size: 20px
    }

    .right-box {
        padding-left: 0
    }

    .container.feature-card {
        padding: 0;
        overflow: hidden
    }

    .image-box {
        padding-right: 0 !important;
        /* height: 435px */
    }

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

    .time.extra {
        left: -162px !important
    }
}

@media screen and (max-width: 768px) {
    .intro-section .influencer-card.service-card {
        padding: 1.3rem
    }

    .intro-section .influencer-card.service-card div {
        flex-direction: column;
        justify-content: unset;
        align-items: flex-start
    }

    .package .feature-card {
        padding: 10px
    }

    .package .feature-card .feature-title {
        font-size: 16px !important
    }

    .overlay-image {
        height: auto !important;
        overflow: unset !important
    }

    .overlay-image img,
    .overlay-image::before {
        display: none
    }

    .overlay-image .seperator {
        position: unset;
        padding: 0;
        text-align: center
    }

    .about-page-header .hero-btn {
        align-items: center !important
    }
}

@media screen and (max-width: 600px) {

    .write-mode,
    .write-mode .feature-card .price-box {
        flex-direction: column;
        align-items: unset
    }

    .write-mode .feature-card {
        padding: 10px
    }

    .write-mode .feature-card .price-box {
        align-items: unset;
        gap: 20px
    }

    .write-mode .pac-line {
        align-items: unset
    }

    .right-box {
        order: 1
    }

    .register-form .form-title.h5,
    p {
        font-size: 15px !important
    }

    .home .influencer-overlay {
        padding-bottom: 0 !important
    }

    .influencer-overlay .big-head {
        font-size: 25px;
        line-height: 40px;
        text-align: center !important;
        margin-bottom: 10px !important
    }

    .influencer-overlay .text-left {
        text-align: center !important
    }

    .influencer-overlay .hero-btn {
        gap: 5px !important;
        margin: 0 0 20px !important
    }

    :is(.influencer-overlay, .service-card) .hero-btn a {
        font-size: 14px
    }

    :is(.influencer-overlay, .home-cta) .hero-btn a svg {
        display: none
    }

    :is(.home, .about-stats) .col-md-6:has(.overlay-right-item) {
        width: 50%
    }

    :is(.home, .about-stats) .overlay-right-item {
        background-color: var(--bg-color);
        border-radius: 1rem
    }

    .service-card .hero-btn {
        flex-direction: column !important
    }

    .overlay-right-item {
        text-align: center;
        flex-direction: column !important;
        padding: 15px !important
    }

    .overlay-right-item .h2 {
        font-size: 20px !important
    }

    .overlay-right-item span {
        font-size: 14px !important
    }

    .big-head {
        line-height: normal
    }

    .about-content,
    .campaign-about a,
    .feature .container>p,
    .intro-section p {
        text-align: center
    }

    .about-content .h3 {
        font-size: 18px
    }

    .seperator {
        margin-bottom: 20px !important;
        text-align: center !important
    }

    .about-content .feature-card {
        padding: 15px !important;
        display: flex;
        text-align: left;
        gap: 10px
    }

    .about-content :is(.feature-icon, .feature-title) {
        margin-bottom: 0 !important
    }

    .about-page-header {
        padding: 20px 0 40px
    }

    .about-page-header .hero-btn .btn {
        margin-top: 10px;
        padding: 10px 20px !important
    }

    .intro-section.goal.mb-5.future {
        margin-bottom: 0 !important
    }

    .contact-content :is(.h3, p.fs-14) {
        text-align: center
    }

    .page-header .fs-20 {
        font-size: 16px !important
    }

    .campaign-about a {
        display: flex;
        align-items: center;
        justify-content: center
    }

    .campaign-about a img {
        width: 200px;
        margin: 0 auto
    }

    .home-cta .service-card:hover {
        border-color: unset !important;
        transform: unset !important
    }

    .whatsapp_float .chat-label {
        display: none
    }
}

.currency-dropdown ul {
    background-color: #1a1a1a
}

.rightmenu .currency ul li a {
    color: #fff
}

#currencyConverter {
    background-color: #fff0
}

/* ZnZ Case Study Css */
.hero-case-study .badge {
    width: fit-content;
    font-size: 12px;
    letter-spacing: .3px;
    text-transform: uppercase;
    background: linear-gradient(90deg, rgba(243, 49, 100, 0.2) 0%, rgba(248, 86, 65, 0.2) 100%);
    color: #F33164;
    border-radius: 999px;
    padding: 8px 12px;
}

.hero-case-study .feature-card {
    padding: 15px !important;
}

.hero-case-study .feature-card:hover {
    transform: translateY(0px) !important;
}

.flex-direction-row {
    flex-direction: row;
}

.fs-24 {
    font-size: 24px;
}

.text-underline {
    text-decoration: underline;
}

.w-70 {
    width: 70%;
}

.goals-section .why-choose-card::after {
    top: 20px;
}

.roadmap .tag {
    padding: 8px 12px;
    background: linear-gradient(90deg, rgba(243, 49, 100, 0.2) 0%, rgba(248, 86, 65, 0.2) 100%);
    border-radius: 8px;
    width: fit-content;
    color: #F33164;
}

.ecosystem-section .why-choose-card {
    gap: 10px;
}

.ecosystem-section .why-choose-card-head {
    justify-content: unset !important;
    gap: 10px;
    align-items: center;
}

.stick {
    position: sticky;
    top: 80px;
}

.ecosystem-section video,
.ecosystem-section img,
.teamvideo-section video,
.teamvideo-section img {
    border-radius: 12px;
}

.video-wrap {
    position: relative;
    display: inline-block;
}

.video-wrap video {
    display: block;
}

.video-sec {
    position: sticky;
    top: 85px;
    display: inline-block;
}

.video-wrap img,
.video-wrap video {
    display: block;
    width: 100%;
}

#coverImg,
#playBtn {
    position: absolute;
    inset: 0;
}

#coverImg {
    object-fit: cover;
    z-index: 2;
}

#playBtn {
    z-index: 3;
    margin: auto;
    width: 60px;
    height: 60px;
    border: 0;
    border-radius: 50%;
    cursor: pointer;
    background: #00000033;
}

.playing #coverImg,
.playing #playBtn {
    display: none;
}

.roadmap .timeline>ul>li:first-child .time {
    right: -120px !important;
}

.roadmap .timeline>ul>li:nth-child(odd) .time {
    right: -101px;
}

.roadmap .timeline>ul>li:nth-child(2n) .time {
    left: -98px;
}

.roadmap .timeline>ul>li:nth-child(12) .time {
    left: -120px !important;
}

.hero-case-study .img-float {
    height: 70px;
    width: 70px;
    position: absolute;
    left: 0;
    top: -25px;
}

.gradient-bg {
    background: #ffe5e5;
}

.reels-card {
    padding: 32px;
    background: #f5f5f5;
    border: 0.5px solid #C5C5C5;
    border-radius: 8px;
}

.rounded {
    border-radius: 50%;
}

.object-cover {
    object-fit: cover;
}

.br-10 {
    border-radius: 10px;
}

.seperate {
    border-left: 1px solid #3C3F43;
    padding-left: 15px;
}

.gap-10 {
    /* gap: 10%; */
}

.snapshot .influencer-card {
    padding: 16px;
}

.goals-section .col-md-12:nth-child(even) .why-choose-card {
    margin-left: 50px;
}

.goals-section .col-md-12:nth-child(odd) .why-choose-card {
    margin-right: 50px;
}

.challange-section .feature-card {
    background: #fddfdb;
}

.fw-600 {
    font-weight: 600;
}

.hero-case-study .thumb-wrap {
    position: relative;
}

.hero-case-study .thumb-wrap.active::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 0, rgba(0, 0, 0, .15) 24%, rgba(0, 0, 0, .45) 90%);
    border: solid 1px var(--gradinet);
}

.hero-case-study .gallery-thumb {
    cursor: pointer;
    /* border: 2px solid transparent; */
    transition: border-color .15s ease, opacity .15s ease;
    height: 100%;
    object-fit: cover;
}

.hero-case-study .gallery-thumb:hover {
    opacity: 0.85;
}

.hero-case-study #mainImage {
    transition: opacity .25s ease;
    aspect-ratio: 1.86/1;
    object-fit: cover;
}

.challange-section .gradient-list li strong {
    /* color: #fff; */
}

.strategy {
    /* background: #202020; */
}

@media (max-width: 1024px) {
    .d-sm-none {
        display: none;
    }

    .challange-section .feature-card {
        gap: 15px;
        flex-direction: column;
    }

    .challange-section .feature-card .w-70 {
        width: 100%;
    }
}

@media (max-width: 600px) {

    #mainImage,
    .gallery-thumb,
    .hero-case-study .img-float,
    .challange-section img {
        display: none;
    }

    .roadmap .timeline>ul>li:nth-child(2n) .time {
        left: 26px !important;
    }

    .roadmap .timeline>ul>li:nth-child(odd) .time {
        left: 27px;
        width: fit-content;
    }

    .goals-section .col-md-12:nth-child(odd) .why-choose-card,
    .goals-section .col-md-12:nth-child(even) .why-choose-card {
        margin: 0;
    }

    .snapshot .influencer-content,
    .hero-case-study .influencer-content,
    .result .influencer-content {
        flex-direction: column;
        align-items: start;
    }

    .seperate {
        border: unset;
        padding: unset;
    }

    .case-study .seperator {
        text-align: left !important;
    }

    .roadmap p {
        text-align: left;
    }

    .roadmap .timeline:before {
        top: 0;
    }
}

/* ZnZ Case Study Css */


/* main style for page <style> */

.ftrd .feature-card {
    padding: 15px;
}

.fs-25 {
    font-size: 25px;
}

.line-seperator {
    width: 45%;
    height: 2px;
    background: linear-gradient(90deg, #f33164, #f85641);
    margin-block: 10px;
}

.analysis {
    background: unset;
}

.influencers-card {
    gap: 20px;
    flex: 1;
    transition: all 0.3s ease;
    margin-block: 15px;
}

.goal .content {
    text-align: left;
}

.succes-card {
    display: grid;
    grid-template-columns: 35% auto;
    gap: 20px;
    border: 1px solid #dbdbdb;
    border-radius: 8px;
}

.brand {
    display: flex;
    flex-direction: column;
    gap: 10px;
    background: #FFF0F0;
    padding: 20px;

    border-radius: 8px 0px 0px 8px;
}

.brand-tag {
    display: block;
    width: fit-content;
    background: linear-gradient(90deg, #f33164, #f85641);
    padding: 4px 12px;
    border-radius: 25px;
    font-size: 14px;
    color: #FFF;
}

.results {
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 25px;
}

/* .btn {
      white-space: nowrap;
    } */

.stat .overlay-right-item {
    text-align: center;
}

.stat .service-card:hover {
    transform: scale(1.0);
}

.ftrd .feature .feature-card,
.story-sec .feature-card {
    padding: 5px !important;
}

.tag {
    display: flex;
    gap: 15px;
    flex-wrap: wrap;
}

.tag .btn {
    border-radius: 5px;
    cursor: unset;
}

@media (max-width: 768px) {
    .succes-card {
        grid-template-columns: auto;
    }

    .goal .ul-box {
        padding: 15px;
        margin-block: 15px;
    }

    .goal .content p {
        text-align: left;
    }
}

/* service page */

.hero {
    padding: clamp(48px, 6vw, 96px) 20px;
    background: radial-gradient(1200px 600px at 10% 10%, rgba(255, 255, 255, .06), transparent 60%), radial-gradient(900px 500px at 90% 10%, rgba(255, 255, 255, .06), transparent 60%), linear-gradient(120deg, var(--bg-1), var(--bg-2));
}

.wrap {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    gap: 48px;
    align-items: center;
    grid-template-columns: 1.05fr 1fr;
}

@media (max-width:980px) {
    .wrap {
        grid-template-columns: 1fr;
    }
}

.copy h1 {
    margin: 0 0 14px;
    line-height: 1.02;
    font-size: clamp(34px, 5vw, 64px);
    letter-spacing: -.02em
}

.copy p {
    margin: 0 0 28px;
    color: var(--muted);
    font-size: clamp(16px, 1.6vw, 18px);
    max-width: 58ch
}

.badges {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 16px
}

.badge {
    font-size: 12px;
    letter-spacing: .3px;
    text-transform: uppercase;
    color: #121423;
    background: #fff;
    border-radius: 999px;
    padding: 8px 12px;
    opacity: .95
}

.cta {
    display: flex;
    gap: 14px;
    flex-wrap: wrap
}

/* Scene base */
.scene {
    position: relative;
    min-height: clamp(520px, 46vw, 800px);
}

.mesh {
    position: absolute;
    inset: -20% -20%;
    background-image: radial-gradient(rgba(255, 255, 255, .12) 1px, transparent 1px);
    background-size: 18px 18px;
    opacity: .16;
    z-index: 0;
    animation: pan 55s linear infinite;
    mask-image: radial-gradient(90% 70% at 55% 50%, #000 55%, transparent 82%);
}

@keyframes pan {
    from {
        transform: translateY(0)
    }

    to {
        transform: translateY(-260px)
    }
}

.blob {
    position: absolute;
    border-radius: 50%;
    filter: blur(90px);
    opacity: .9;
    animation: float 16s ease-in-out infinite;
    z-index: 0
}

.blob.a {
    width: 460px;
    height: 460px;
    left: -40px;
    top: -40px;
    background: radial-gradient(circle at 30% 30%, #ff5ab3, transparent 60%)
}

.blob.b {
    width: 380px;
    height: 380px;
    right: -20px;
    top: 18%;
    background: radial-gradient(circle at 60% 40%, #6a5cff, transparent 60%)
}

.blob.c {
    width: 320px;
    height: 320px;
    left: 46%;
    bottom: -60px;
    background: radial-gradient(circle at 40% 60%, #ffb156, transparent 60%)
}

@keyframes float {

    0%,
    100% {
        transform: translateY(0)
    }

    50% {
        transform: translateY(-16px)
    }
}

/* STACK with perspective */
.stack {
    position: relative;
    display: grid;
    place-items: center;
    perspective: 1400px;
    perspective-origin: 50% 40%;
    z-index: 1
}

.tilt {
    transition: transform .25s ease;
    will-change: transform
}

/* NEW: creative 3D layer behind the tablet */
.bg3d {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    transform-style: preserve-3d;
}

.token,
.ribbon,
.halo {
    position: absolute;
    will-change: transform;
    transform-style: preserve-3d;
}

@keyframes wave {
    to {
        transform: translateX(120px) rotate(var(--rot, 12deg))
    }
}

/* Halo ring */
.halo {
    width: 84vmin;
    height: 84vmin;
    border-radius: 50%;
    background: conic-gradient(from 0deg, rgba(255, 255, 255, 0) 0 83%, rgba(255, 255, 255, .26) 83% 100%), radial-gradient(closest-side, rgba(255, 255, 255, .08), transparent);
    mix-blend-mode: screen;
    animation: spinHalo 26s linear infinite;
    filter: blur(.3px);
    opacity: .6;
}

@keyframes spinHalo {
    to {
        transform: rotate(360deg) translateZ(-80px)
    }
}

/* Tablet */
.tablet {
    position: relative;
    z-index: 3;
    /*width: clamp(341px, 35vw, 512px);*/
    width: clamp(200px, 30vw, 350px);
    height: clamp(400px, 43vw, 580px);
    /*height: clamp(454px, 50vw, 682px);*/
    border-radius: 2.5rem;
    padding: 14px;
    background: linear-gradient(180deg, #1f2937, #0f172a);
    box-shadow: 0 26px 80px rgba(0, 0, 0, .55), inset 0 0 0 1px rgba(255, 255, 255, .08);
    transform-style: preserve-3d;
}

.ringGlow {
    position: absolute;
    inset: -14px;
    width: 200px;
    border-radius: calc(2.5rem + 14px);
    background: conic-gradient(from 0deg, #6a5cff, #ff5ab3, #ffb156, #6a5cff);
    filter: blur(16px);
    opacity: .18;
    animation: spinLinear 18s linear infinite;
    z-index: -1;
}

@keyframes spinLinear {
    to {
        transform: rotate(360deg)
    }
}

.screen {
    position: relative;
    height: 100%;
    border-radius: 2rem;
    overflow: hidden;
    background: #000;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06);
}

.screen::after {
    content: "";
    position: absolute;
    inset: -20% -40%;
    background: linear-gradient(105deg, rgba(255, 255, 255, 0) 30%, rgba(255, 255, 255, .10) 45%, rgba(255, 255, 255, 0) 60%);
    transform: translateX(-60%) rotate(8deg);
    animation: sheen 6.5s ease-in-out infinite;
    pointer-events: none;
}

@keyframes sheen {
    0% {
        transform: translateX(-60%) rotate(8deg)
    }

    50% {
        transform: translateX(60%) rotate(8deg)
    }

    100% {
        transform: translateX(-60%) rotate(8deg)
    }
}

/* Videos */
.reel {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity .6s ease;
    background: #000
}

.reel.is-active {
    opacity: 1
}

/* Corner Social Rotator (unchanged) */
.corner {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 34%;
    aspect-ratio: 1/1;
    border-radius: 16px;
    overflow: hidden;
    z-index: 4;
    background: radial-gradient(120% 120% at 0% 0%, rgba(255, 255, 255, .18), rgba(255, 255, 255, .04) 35%, rgba(0, 0, 0, .35) 70%);
    backdrop-filter: blur(8px);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14), 0 18px 40px rgba(0, 0, 0, .45);
    transform: translateZ(2px);
}

.corner .bg {
    position: absolute;
    inset: -30% -30%;
    filter: blur(30px);
    opacity: .9;
    background: radial-gradient(circle at 30% 30%, #ff5ab3, transparent 60%), radial-gradient(circle at 70% 30%, #6a5cff, transparent 60%), radial-gradient(circle at 50% 80%, #ffb156, transparent 60%);
    animation: drift 20s ease-in-out infinite;
}

@keyframes drift {

    0%,
    100% {
        transform: translate(0, 0)
    }

    50% {
        transform: translate(10px, -12px)
    }
}

.corner .orbit {
    position: absolute;
    inset: 10%;
    border-radius: 16px;
    pointer-events: none;
    border: 2px dashed rgba(255, 255, 255, .22);
    animation: spinC 10s linear infinite;
}

@keyframes spinC {
    to {
        transform: rotate(360deg)
    }
}

.corner .label {
    position: absolute;
    left: 10px;
    bottom: 8px;
    right: 10px;
    text-align: center;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .3px;
    color: #fff;
    text-shadow: 0 2px 10px rgba(0, 0, 0, .4)
}

.logoStage {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    perspective: 800px
}

.logo {
    position: absolute;
    width: 62%;
    transform-style: preserve-3d;
    opacity: 0;
    transform: rotateY(-90deg) translateZ(0);
    transition: transform .7s ease, opacity .5s ease
}

.logo.is-show {
    opacity: 1;
    transform: rotateY(0deg) translateZ(24px)
}

.logo .disc {
    width: 100%;
    aspect-ratio: 1/1;
    border-radius: 50%;
    background: linear-gradient(180deg, #222741, #0f1222);
    box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .16), inset 0 18px 40px rgba(255, 255, 255, .08);
}

.logo svg {
    position: absolute;
    inset: 18%;
    width: 64%;
    height: 64%;
    margin: auto;
    fill: #fff
}

@media (max-width:980px) {

    .mesh,
    .blob,
    .bg3d {
        display: none
    }

    .scene {
        min-height: auto
    }
}

@media (prefers-reduced-motion:reduce) {

    .mesh,
    .blob,
    .ringGlow,
    .corner .bg,
    .corner .orbit,
    .screen::after,
    .bg3d * {
        animation: none;
        transition: none
    }
}

.pos-sticky {
    position: sticky;
    top: 90px;
}

.inf-brands {
    height: 100px;
    object-fit: contain;
}

.top-ranking-sec .feature-card .feature-icon {
    width: 26px;
    height: 26px;
    background: #f5f5f525;
}

.badge-1 {
    font-size: 12px;
    font-weight: 400 !important;
    letter-spacing: 0.3px;
    text-transform: uppercase;
    color: #121423;
    background: #fff;
    border-radius: 999px;
    padding: 8px 12px;
    opacity: 0.95;
    width: fit-content;
}



.category-search-box .search-input-box {
    background: #f5f5f5;
    border-radius: 50px;
}

.category-search-box input:focus {
    outline: none !important;
}

.search-input-box.active {
    outline: 1px solid var(--secondry-color) !important;
}



.search-input-box input[placeholder] {
    font-size: 16px;
}

.custom-select {
    min-width: 180px;
}

.select-box {
    background: #ffe5e5;
    border-radius: 50px;
    cursor: pointer;
    gap: 10px;
}

.arrow {
    width: 12px;
    height: 12px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 7.06 7.06'%3E%3Cpath d='M3.53 5.542a.5.5 0 0 1-.35-.145L.145 2.362a.494.494 0 1 1 .699-.699L3.53 4.349l2.686-2.686a.494.494 0 1 1 .699.699L3.879 5.398a.5.5 0 0 1-.35.145z' fill='%23fff'/%3E%3C/svg%3E") no-repeat center;
    background-size: cover;
/*     filter: brightness(0.3); */
}

.options {
    list-style: none;
    margin: 10px 0 0;
    background: #ffe5e5;
    border-radius: 12px;
    display: none;
    overflow: hidden;
}

.options li {
    padding: 5px 15px;
    cursor: pointer;
}

.options li:hover {
    background: var(--secondry-color);
}

.custom-select.active .options {
    display: block;
}

@media (max-width: 600px) {
    .mob-flex-wrap {
        flex-wrap: wrap;
    }

    .mob-w-100 {
        width: 100%;
    }
}


/* brand page */


.card-social-icn ul li a {
    width: 30px;
    height: 30px;
    background: #f33164;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
}

.card-social-icn ul li a:hover {
    border: 1px solid var(--secondry-color) !important;
}

.colored-para span {
    color: var(--secondry-color);
    font-weight: 600;
}

.ind-card {
    gap: 15px;
    /* background: #141414; */
    padding: 20px;
}

.ind-card .feature-icon {
    height: 70px;
    width: 70px;
}

.ind-card p {
    line-height: 1;
    font-size: 16px;
}

/* h2 {
    text-align: center
} */

.influ-card {
    gap: 20px;
    padding: 25px;
    border: 1px solid #dbdbdb;
}

.influ-card .detl-wrap {
    display: flex;
    align-items: center;
    gap: 20px;
}

.influ-card .img-holder {
    position: relative;
}

.influ-card .img-holder img {
    width: 80px;
    height: 80px;
    object-fit: cover;
    border-radius: 10px;
}

.influ-card .artist-links {
    position: absolute;
    bottom: -10px;
    right: -10px;
}

.influ-card .artist-links li a {
    height: 32px;
    width: 32px;
}

.influ-card .influ-detl p {
    margin: 0;
    font-size: 14px;
    /* color: #b3b3b3; */
}

.influ-card .colored-para p {
    display: inline;
}

.influ-card .card-ttl {
    font-size: 18px;
    font-weight: 700;
    line-height: 28px;
    color: #000;
}

.influ-card .card-ttl:hover {
    color: var(--secondry-color) !important
}

/* .bg-light {
    background: #1f1f1f;
    padding-block: 60px;
} */

.branding-srvc-wrap .service-card {
    border: 1px solid #080c132e;
}

.member-con .member-list-wrap {
    background: #fff0f0;
    padding: 30px;
    border-radius: 20px;
}

.member-con .member-list-wrap .membr-ttl {
    gap: 15px;
    font-size: 20px;
    font-weight: 600;
}

.member-con .member-list-wrap .membr-ttl span {
    height: 45px;
    width: 45px;
    background: #f32e68;
    border-radius: 10px;
    flex-shrink: 0
}

.chk-list {
    padding-left: 5px;
    margin-top: 30px;
}

.chk-list li {
    position: relative;
    list-style: none;
    padding-left: 30px;
}

.chk-list li:not(:last-child) {
    margin-bottom: 15px;
}

.gradient-list li {
    color: #030303;
    font-size: 15px;
}

/* .light-list li {
    color: #ffff;
} */

.chk-list li:after {
    content: '';
    position: absolute;
    height: 19px;
    width: 19px;
    left: 0;
}

.gradient-list li:after {
    top: 4px;
    background: url('data:image/svg+xml,<svg width="19" height="19" viewBox="0 0 19 19" fill="none" xmlns="http://www.w3.org/2000/svg"><rect width="18.927" height="18.927" rx="4" fill="url(%23a)"/><path d="m13.249 6.625-5.205 5.204-2.366-2.365" stroke="%23fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><defs><linearGradient id="a" x1="0" y1="9.464" x2="18.927" y2="9.464" gradientUnits="userSpaceOnUse"><stop stop-color="%23f33164"/><stop offset="1" stop-color="%23f85641"/></linearGradient></defs></svg>') no-repeat;
}

.light-list li:after {
    top: 3px;
    background-image: url("data:image/svg+xml,%3Csvg width='19' height='19' viewBox='0 0 19 19' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0_8_53)'%3E%3Cpath d='M14.927 0H4C1.79086 0 0 1.79086 0 4V14.927C0 17.1361 1.79086 18.927 4 18.927H14.927C17.1361 18.927 18.927 17.1361 18.927 14.927V4C18.927 1.79086 17.1361 0 14.927 0Z' fill='url(%23paint0_linear_8_53)'/%3E%3Cpath d='M13.249 6.625L8.04401 11.829L5.67801 9.464' stroke='white' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/g%3E%3Cdefs%3E%3ClinearGradient id='paint0_linear_8_53' x1='-224.93' y1='10.5635' x2='20.3316' y2='3.82267' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%23F2296D'/%3E%3Cstop offset='1' stop-color='%23F94B4A'/%3E%3C/linearGradient%3E%3CclipPath id='clip0_8_53'%3E%3Crect width='19' height='19' fill='white'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E%0A");
}

.member-con .membr-card {
    padding: 20px;
}

.member-con .membr-card .h5 {
    font-size: 18px
}



.contact-ftrs-wrap {
    background: #f5f5f5;
    padding: 30px;
    border-radius: 20px;
}

/* .contact-ftrs-wrap .sub-ttl,
.branding-hero .sub-ttl {
    background: #ffffff26;
    color: #fddbe1;
    display: flex;
    align-items: center;
    gap: 8px;
}

.branding-hero .sub-ttl {
    color: #fff;
    margin-inline: auto
}

.sub-ttl {
    width: fit-content;
    padding: 8px 15px;
    border-radius: 90px;
    font-size: 15px;
    color: var(--secondry-color);
}

.subTtl-center {
    margin-inline: auto;
    background: rgb(255 0 0 / 14%);
    margin-bottom: 10px;
    font-size: 14px;
    font-weight: 700;
} */

.contact-ftrs-wrap .ftrs-price {
    align-items: flex-end;
    gap: 10px;
    margin-block: 30px 10px;
}

.contact-ftrs-wrap .ftrs-price {
    font-size: 40px;
    font-weight: 700;
    line-height: 1;
}

.contact-ftrs-wrap p {
    /* color: rgba(255, 255, 255, 80%); */
    margin-bottom: 0;
    font-weight: normal;
    font-size: 16px;
}

.contact-ftrs-wrap .ftrs-price p {
    text-decoration: line-through;
}

.border-top {
    border-top: 1px solid #ffffff38;
    padding-top: 30px;
}

.contact-ftrs-wrap ul li p {
    margin-top: 10px
}

.mt-30 {
    margin-top: 35px;
}

.pay-ftrs {
    gap: 5px;
}

.membr-card .influencer-content {
    padding: 0
}


.branding-hero {
    background: url(https://influencersplace.com/wp-content/uploads/2026/02/brand-hero-bg.webp) center/cover no-repeat;
    padding-block: 60px 70px;
}

.branding-hero .big-head {
    font-size: 46px;
    line-height: 1.3;
    text-align: center !important;
}

.branding-hero .overlay-left .hero-btn {
    margin-inline: auto;
}

.branding-hero .overlay-right-item {
    background: #ffffff0f;
    justify-content: start;
    padding: 17px 20px;
    gap: 15px;
    border-radius: 10px;
}

.branding-hero .overlay-right-item .overlay-inner-item .plus {
    font-size: 24px;
    font-weight: 600;
}

.branding-hero .overlay-right-item .overlay-inner-item .text {
    font-size: 14px;
}

.float-a {
    animation: floatA 3s ease-in-out infinite;
}

@keyframes floatA {
    0% {
        transform: translateY(0px);
    }

    50% {
        transform: translateY(-20px);
    }

    100% {
        transform: translateY(0px);
    }
}

.float-b {
    animation: floatB 3s ease-in-out infinite;
}

@keyframes floatB {
    0% {
        transform: translateY(-0px);
    }

    50% {
        transform: translateY(20px);
    }

    100% {
        transform: translateY(-0px);
    }
}

@media (width <=1023px) {

    .branding-hero,
    .service-section,
    .bg-light {
        padding-block: 30px !important;
    }



    .service-card,
    .member-con .member-list-wrap,
    .contact-ftrs-wrap {
        padding: 20px !important;
    }

    .d-md-none {
        display: none !important;
    }

    .branding-hero .big-head {
        font-size: 26px;
        text-align: left !important;
    }

    .branding-hero .big-head,
    .branding-hero .sub-ttl {
        margin: 0 !important;
    }

    .branding-hero .overlay-left {
        text-align: left;
    }

    .influencer-overlay .overlay-left .hero-btn {
        margin-block: 10px 0 !important;
    }

    .influencer-overlay .overlay-left .hero-btn a {
        padding: 10px 15px !important;
        font-size: 13px;
    }

}