@font-face {
  font-family: Power Grotesk;
  src: url(../fonts/PowerGrotesk-Heavy.ttf);
}

/* @font-face {
  font-family: Raleway;
  src: url(../fonts/Raleway-Medium.ttf);
} */

@font-face {
  font-family: Raleway;
  src: url(../fonts/Raleway-VariableFont.ttf);
}

@font-face {
  font-family: Qwitcher Grypen;
  src: url(../fonts/QwitcherGrypen-Regular.ttf);
}

body::-webkit-scrollbar {
  display: none;
}

.modal::-webkit-scrollbar {
  display: none;
}

h6 {
  text-align: left;
}

.pos {
  position: absolute;
  right: -30px;
}

.navbar-collapses {
  display: block !important;
  z-index: 10000 !important;
}

.creator-signup-feilds {
  /* height: 590px !important; */
}

/* LANDING PAGE NEW DESIGN  */

/* BUTTON ANIMATIONS  */

/* overriding css  */
.css-166bipr-Input {
  color: black !important;
}

.css-dppxez-control:hover {
  border-color: hsl(181.67deg, 30%, 47.06%) !important;
}

.css-137z8bh-control:hover {
  border-color: hsl(181.67deg, 30%, 47.06%) !important;
}

.react-google-places-autocomplete__control {
  border-color: transparent !important;
  /* Override default style */
}

.css-1u9des2-indicatorSeparator,
.css-tj5bde-Svg {
  display: none !important;
}

.css-dppxez-control {
  border-color: #549aa49c !important;
  opacity: 0.9 !important;
}

/* .css-1qrxvr1-singleValue{
  color: red !important;
} */

.tooltipIcon-address {
  position: absolute !important;
  top: 7px !important;
  right: 20px !important;
}

.custom-placeholder {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 10;
  color: #999;
}

/* Hide placeholder when input is focused */
input[type="date"]:focus+.custom-placeholder {
  display: none;
}

input.tw-appearance-none[type="date"]::-webkit-calendar-picker-indicator {
  display: none;
  -webkit-appearance: none; /* For older WebKit versions */
}

/* overriding css  */
  .navbar-expand-lg .navbar-toggler.navbar-custom {
    /* display: block; */
  }

/* CSS for the button */
.align-center {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.new-filled-btn {
  border-radius: 50px;
  background: linear-gradient(263.11deg, #549a9c 5.13%, #65acae 86.84%);
  box-shadow: 17px 13px 18px rgba(0, 126, 197, 0.14);
  color: white;
  padding: 10px 0px;
}

.tag-selected {
  background-color: #549a9c !important;
  border: none !important;
  color: white !important;
}

.row {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.new-outline-btn {
  padding: 10px 0px;
  border-radius: 50px;
  border: 1px solid #63abad;
  background: white;
  color: #63abad;
}

.new-outline-btn:hover {
  border: 1px solid #63abad;
}

.first-sec p {
  color: gray;
  font-size: 18px;
}

.first-sec .LP-heading {
  font-size: 52px !important;
}

.new-filled-btn,
.common-button-style-filled {
  position: relative;
  /* Set the position to relative */
  overflow: hidden;
  /* Hide the icon by default */
}

.button-text {
  transition: margin-left 0.3s ease;
  /* Add a transition for smooth movement */
  color: white !important;
}

/* CSS for the icon */
.btn-icon {
  position: absolute;
  top: 50%;
  right: 25px;
  transform: translateY(-50%);
  opacity: 0;
  /* Icon is hidden by default */
  transition: opacity 0.3s ease;
  /* Add a transition for smooth appearance */
}

/* CSS to show the icon on hover */
.new-filled-btn:hover .btn-icon,
.common-button-style-filled:hover .btn-icon {
  opacity: 1;
}

/* CSS to move the text when the icon is visible */
.new-filled-btn:hover .button-text,
.common-button-style-filled:hover .button-text {
  margin-left: -20px;
  /* Adjust the value as needed */
  color: white !important;
  opacity: 0.95;
}

/* BUTTON ANIMATIONS  */

.common-button-style-filled {
  background: linear-gradient(263.11deg, #549a9c 5.13%, #65acae 86.84%);
  box-shadow: 17px 13px 18px rgba(0, 126, 197, 0.14);
  border-radius: 30px;
  color: #fff;
  font-style: normal;
  font-weight: 600;
  font-size: 18px;
  line-height: 21px;
  padding: 18px 20px;
  border: 0;
  cursor: pointer !important;
}

@media (max-width: 768px) {

  /* Mobile devices */
  .common-button-style-filled {
    padding: 18px 18px;
  }
}

.common-button-style-disabled {
  background-color: #e6e6e6 !important;
  box-shadow: 17px 13px 18px rgba(0, 126, 197, 0.1);
  border-radius: 30px;
  color: #fff;
  font-style: normal;
  font-weight: 600;
  font-size: 18px;
  line-height: 21px;
  padding: 18px 40px;
  border: 0;
}

.common-button-style-filled:disabled,
.common-button-style-filled:disabled:hover {
  opacity: 0.6;
  color: white;
  /* Adjust opacity to give a grayed-out effect */
  cursor: not-allowed;
  /* Change cursor to not-allowed when disabled */
}

.common-button-style-filled:hover {
  color: #000;
  opacity: 0.95;
}

.common-button-style-outline {
  background: #ffffff;
  box-shadow: 5px 7px 17px rgba(0, 94, 147, 0.08);
  border-radius: 30px;
  font-weight: 500;
  font-size: 18px;
  line-height: 21px;
  letter-spacing: 0.03em;
  color: #63abad;
  border: 1px solid #63abad !important;
  padding: 20px 35px;
  transition: 400ms;
  cursor: pointer !important;
  /* margin-bottom: 40px; */
}

.text-highlight {
  color: #63abad;
}

.custom-design {
  color: #63abad !important;
  font-weight: bold !important;
}

.custom-design:hover {
  color: white !important;
}

.pointer-cursor {
  cursor: pointer !important;
}

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

.filter-box-design {
  border-radius: 60px;
  height: 220px;
  background: linear-gradient(180deg,
      rgba(167, 231, 233, 0.5) -1.08%,
      rgba(255, 255, 255, 0.5) 100%);
  z-index: 2;
  width: 250px;
  position: relative;
  /* margin: 0 15px 0 0; */
}

.filter-box-design .common-button-style-outline {
  width: 215px;
}

.filter-box-design .filter-box-icon {
  position: absolute;
  bottom: 140px;
  left: 50px;
  display: flex;
}

.LP-filters-container {
  display: flex;
  justify-content: center !important;
}

.LP-dropdown-button {
  display: flex;
  justify-content: center;
  height: 100%;
  align-items: end;
}

.third-section2 .filter-heading {
  text-align: center;
  padding: 100px;
}

.top_content .LP-heading {
  font-family: Raleway;
  font-size: 52px;
  font-weight: 900;
  /* line-height: 77px; */
  text-align: left;
}

.top_content p {
  font-family: Raleway;
  font-size: 18px;
  font-weight: 500;
  line-height: 40px;
  letter-spacing: 0em;
  text-align: left;
  color: #818383;
  width: 85%;
  margin: 30px 0;
}

.arrow-1 {
  left: 70px;
  top: 100px;
}

.arrow-2 {
  bottom: 150px;
  left: 80px;
}

.arrow-filled {
  /* left: 100px; */
  top: 110px;
}

.section-color {
  padding-bottom: 80px;
  padding-top: 80px;
}

.section-color-rounded {
  background: linear-gradient(180deg, #ebfbfc 0%, rgba(255, 255, 220, 0) 100%);
  border-top-left-radius: 50px;
  border-top-right-radius: 50px;
  margin-bottom: 200px;
  margin-top: 150px;
}

.sec-height {
  height: 850px;
}

.section-color .third-section .container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  /* Vertically centers the contents */
  align-items: center;
  /* Horizontally centers the contents */
  height: 100vh;
  /* Optionally set a specific height for vertical alignment */
}

/* Add this CSS to your stylesheet */
.image-container {
  position: relative;
  /* Establishes a positioning context */
  display: inline-block;
  /* Ensures the container wraps its content */
}

/* .white-circle {
  position: absolute;
  top: 50%; 
  left: 80%; 
  transform: translate(-50%, -50%); 
  background: linear-gradient(
    200.45deg,
    #ffffff -4.16%,
    rgba(255, 255, 255, 0) 126.41%
  );
  width: 610px; 
  height: 610px;
  border-radius: 50%; 
} */

.white-circle-bg {
  position: absolute;
  top: 50%;
  /* Vertically center the circle */
  left: 50%;
  /* Horizontally center the circle */
  transform: translate(-50%, -50%);
  /* Center the circle precisely */
  background: linear-gradient(200.45deg,
      #ffffff -4.16%,
      rgba(255, 255, 255, 0) 126.41%);
  width: 410px;
  /* Set the width of the circle */
  height: 410px;
  /* Set the height of the circle */
  border-radius: 50%;
  /* Creates a circular shape */
}

.first-sec .cloud-position {
  top: 0 !important;
  position: absolute;
  z-index: 900 !important;
  right: 850px !important;
}

.filter-sec .cloud-position {
  top: 20px !important;
  position: absolute;
  z-index: 900 !important;
  right: 250px !important;
}

/* Apply the lift animation to the elements on hover */
.filter-box-design:hover .filter-box-icon img {
  transform: translateY(-10px);
  /* Adjust the value as needed */
  transition: transform 0.9s ease;
  /* Add a smooth transition effect */
}

.animation-box .bottom-animation {
  position: absolute;
  top: 0px;
  z-index: 1000;
}

.animation-box .top-animation {
  position: absolute;
  top: -650px;
  z-index: 1000;
}

/* Button animation  */
/* Style the arrow to be initially hidden */

/* Button aniamtion  */
/* Define the up-down animation */
@keyframes upDownAnimation {

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

  50% {
    transform: translateY(-30px);
    /* Adjust the value as needed for desired movement */
  }
}

/* Define the horizontal animation for top animations */
@keyframes horizontalAnimationTop {

  0%,
  100% {
    transform: translateX(0);
  }

  50% {
    transform: translateX(15px);
    /* Adjust the value as needed for desired horizontal movement */
  }
}

/* Define the vertical animation for bottom animations */
@keyframes verticalAnimationBottom {

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

  50% {
    transform: translateY(15px);
    /* Adjust the value as needed for desired vertical movement */
  }
}

/* Apply the animations to the elements */
.top-animation img {
  animation: horizontalAnimationTop 3s infinite;
}

.bottom-animation img {
  animation: verticalAnimationBottom 3s infinite;
}

.filter-sec .para-img {
  position: absolute !important;
  left: 950px !important;
  top: -300px !important;
  width: 120px !important;
}

.animation-item {
  position: relative;
}

.anim-img {
  position: absolute;
}

/* BROWSE CREATOR SECTION  */
.animation-item .anim-1 {
  right: 200px;
  top: 480px;
}

.animation-item .anim-2 {
  right: 760px;
  top: 420px;
}

.animation-item .anim-3 {
  right: 30px;
  top: 100px;
}

.animation-item .anim-4 {
  right: 30px;
  top: 300px;
}

.animation-item .anim-5 {
  right: 520px;
  top: 100px;
}

.animation-item .anim-6 {
  right: 110px;
  top: 0px;
}

.animation-item .anim-7 {
  right: 520px;
  top: 0px;
}

@keyframes rotateAnimation {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

.animation-item .anim-5 img,
.animation-item .anim-3 img {
  animation: rotateAnimation 6s linear infinite;
}

@keyframes bounceAnimation {

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

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

.animation-item .anim-1 img,
.animation-item .anim-4 img,
.animation-item .anim-7 img {
  animation: bounceAnimation 4s ease-in-out infinite;
}

@keyframes horizontalBounceAnimation {

  0%,
  100% {
    transform: translateX(0);
  }

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

.animation-item .anim-6 img,
.animation-item .anim-2 img {
  animation: horizontalBounceAnimation 6s ease-in-out infinite;
}

/* APPLY FILTER SECTION  */
.animation-item .anim-8 {
  right: 1000px;
  top: 610px;
}

.animation-item .anim-9 {
  left: 100px !important;
  top: 400px !important;
}

.animation-item .anim-10 {
  left: 20px;
  top: 460px !important;
}

.animation-item .anim-11 {
  right: 200px;
  top: 150px;
}

.animation-item .anim-12 {
  right: -30px;
  top: 700px;
}

.animation-item .anim-13 {
  right: 1700px;
  top: 680px;
}

.animation-item .anim-14 {
  right: 300px;
  top: 570px;
}

@keyframes moveDiagonalLeft {
  0% {
    left: 20px;
  }

  100% {
    left: -200px;
    /* Adjust this value based on how far you want it to move */
  }
}

.animation-item .anim-10 {
  animation: moveDiagonalLeft 5s linear infinite;
  /* Adjust the duration and timing function as needed */
  top: 80px;
  /* Initial position */
  left: 20px;
  /* Initial position */
}

@keyframes rotate {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
    /* Full rotation */
  }
}

.animation-item .anim-8,
.animation-item .anim-12,
.animation-item .anim-14 {
  animation: rotate 6s linear infinite;
  /* Adjust the duration and timing function as needed */
}

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

  50% {
    transform: translateY(-20px);
    /* Adjust the distance as needed */
  }

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

.animation-item .anim-13 {
  animation: moveUpDown 2s linear infinite;
  /* Adjust the duration and timing function as needed */
  top: 800px;
  /* Initial position */
  right: 1400px;
  /* Initial position */
}

.animation-item .anim-11 {
  animation: moveUpDown 2s linear infinite;
  /* Adjust the duration and timing function as needed */
  top: 450px;
  /* Initial position */
  right: 50px;
  /* Initial position */
}

@keyframes moveHorizontal {
  0% {
    left: 550px;
    /* Initial position */
  }

  50% {
    left: 570px;
    /* Adjust the distance as needed */
  }

  100% {
    left: 550px;
  }
}

.animation-item .anim-9 {
  animation: moveHorizontal 3s linear infinite;
  /* Adjust the duration and timing function as needed */
  top: 20px;
  /* Initial position */
  left: 550px;
  /* Initial position */
}

/* TABLE SECTION  */
.animation-item .anim-15 {
  left: 700px;
  top: 850px;
}

.animation-item .anim-16 {
  left: 150px;
  top: 550px;
}

.animation-item .anim-17 {
  top: 750px;
  right: 150px;
}

.animation-item .anim-18 {
  left: 800px;
  top: 100px;
}

.animation-item .anim-19 {
  right: 500px;
  top: 750px;
}

@keyframes rotatePPlus {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
    /* Full rotation */
  }
}

.animation-item .anim-15 {
  animation: rotatePPlus 6s linear infinite;
  /* Adjust the duration and timing function as needed */
  left: 700px;
  top: 850px;
}

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

  50% {
    transform: translateY(-20px);
    /* Adjust the distance as needed */
  }

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

.animation-item .anim-16,
.animation-item .anim-17,
.animation-item .anim-18 {
  animation: moveUpDownNewCircle 4s linear infinite;
  /* Adjust the duration and timing function as needed */
  width: 30px;
  /* Adjust the width as needed */
}

/* Position them individually */
.animation-item .anim-16 {
  left: 150px;
  top: 550px;
}

.animation-item .anim-17 {
  top: 750px;
  right: 150px;
}

.animation-item .anim-18 {
  left: 800px;
  top: 100px;
}

@keyframes moveHorizontalCircle {
  0% {
    left: 1150px;
    /* Initial position */
  }

  50% {
    left: 1155px;
    /* Adjust the distance as needed */
  }

  100% {
    left: 1200px;
    /* Initial position */
  }
}

.animation-item .anim-19 {
  animation: moveHorizontalCircle 5s linear infinite;
  /* Adjust the duration and timing function as needed */
  width: 20px;
  /* Adjust the width as needed */
  /* right: 500px; */
  left: 1150px;
  top: 850px;
}

/* LANDING PAGE NEW DESIGN  */

img {
  user-select: none;
  -webkit-user-drag: none;
}

html,
body {
  overflow-x: hidden;
}

body.modal-open-scroll {
  overflow-y: hidden !important;
}

/* * {
  font-family: "Raleway";
} */

body.modal-open {
  padding: 0px !important;
}

h1 {
  font-family: "Raleway";
  font-style: normal;
  font-weight: 700;
  font-size: 66px;
  /* line-height: 77px; */
  color: #000000;
  letter-spacing: 0em;
}

h2 {
  font-family: "Raleway";
  font-style: normal;
  font-weight: 900;
  font-size: 50px;
  line-height: 54px;
}

h3 {
  font-family: "Raleway";
  font-size: 44px;
  font-weight: 700;
  line-height: 61px;
  letter-spacing: 0em;
  text-align: left;
}

h4 {
  color: #000;
  font-family: Raleway;
  font-size: 30px !important;
  font-style: normal;
  font-weight: 700 !important;
  line-height: normal;
  text-transform: capitalize;
}

h5 {
  color: #000;
  font-family: Raleway;
  font-size: 24px !important;
  font-style: normal;
  font-weight: 700 !important;
  line-height: normal;
}

.navbar-collapse {
  flex-grow: 0;
}

/* .navbar .navbar-collapse .navbar-nav .nav-item a.active {
    border-bottom: 1px solid #000;
} */
.logo-text {
  font-weight: 900;
  font-size: 55px;
  line-height: 66px;
  font-family: "Power Grotesk";
}

.logo-size {
  width: 200px;
  height: 53px;
  top: 21px;
  left: 201px;
}

.beta-logo {
  font-family: "Power Grotesk";
  text-align: center;
  font-weight: 900;
  color: white;
  letter-spacing: 1px;
  /* margin-left: 10px; */
  font-size: 14px;
}

.beta-logo div {
  background-color: #549a9c;
  border-top-left-radius: 11px;
  border-bottom-right-radius: 11px;
  margin-top: 18px;
  padding: 4px 7px 2px 7px;
}

#loading-for-user {
  position: fixed;
  width: 100%;
  height: 100vh;
  background: #fff url("https://flevix.com/wp-content/uploads/2020/01/Bounce-Bar-Preloader-1.gif") no-repeat center;
  z-index: 99999;
  top: 0;
  left: 0;
}

.error {
  color: red;
  font-size: 16px;
  font-weight: 400;
  font-family: serif;
}

.notification-panel {
  position: fixed;
  top: 0;
  right: 0;
  width: 550px;
  height: 100vh;
  background-color: white;
  z-index: 9999;
  box-shadow: -4px 0px 16px 0px #0000001a;
  overflow: scroll;
  overflow-x: hidden;
}

.notification-panel::-webkit-scrollbar {
  display: none;
}

/* .notification-popup {
    width: 450px;
    height: fit-content;
    z-index: 9999;
    box-shadow: -4px 0px 16px 0px #0000001A;
    position: absolute;
    right: 0;    
    top: 110px;
    border-bottom-left-radius: 22px;
    border-top-left-radius: 22px;

} */
.notification-panel .notification-header {
  display: flex;
  justify-content: space-between;
  padding: 30px 20px 10px 20px;
  border-bottom: 2px solid #dedede;
  position: sticky;
  background-color: white;
  top: 0;
  z-index: 10;
}

.notification-panel .notification-body {
  position: relative;
  z-index: 9;
}

.notification-panel .notification-body .notification-item {
  border-bottom: 1px solid #dedede;
  font-family: Inter;
  font-size: 14px;
  font-weight: 400;
  line-height: 15px;
  letter-spacing: 0em;
  display: flex;
}

.margin-left {
  margin-left: 20px;
}

.notification-popup .notification-body {
  font-family: Inter;
  font-size: 14px;
  font-weight: 400;
  line-height: 15px;
  letter-spacing: 0em;
  background-color: white;
  width: 450px;
  height: fit-content;
  z-index: 9999;
  box-shadow: -4px 0px 16px 0px #0000001a;
  position: absolute;
  right: 0;
  top: 110px;
  border-bottom-left-radius: 22px;
  border-top-left-radius: 22px;
}

.notification-popup .notification-body .notification-item {
  display: flex;
}

/*Navbar Menu*/
.navbar-nav a {
  font-weight: 500;
  font-size: 1rem;
  line-height: 21px;
  letter-spacing: 0.03em;
}

/*Right menu */
.nav-icon {
  background: #fff;
  border: 1px solid #eeeeee;
  border-radius: 50px;
  width: 55px;
  height: 55px;
  padding: 0px;
  min-width: 55px;
  min-height: 55px;
  margin: 0px;
  object-fit: cover;
  overflow: hidden;
}

.dropdown-text-style {
  font-size: 14px;
  font-weight: 400;
  line-height: 15px;
  letter-spacing: 0em;
  text-align: left;
  padding: 10px;
  color: black;
}

/* .nav-icon img {
    width: 20px;
} */
.profile-btns {
  /* background: linear-gradient(180deg, #0094e7 0%, #005e93 100%); */
  background: linear-gradient(263.11deg, #549a9c 5.13%, #65acae 86.84%);
  box-shadow: 17px 13px 18px rgba(0, 126, 197, 0.14);
  border-radius: 30px;
  color: #fff;
  font-style: normal;
  font-weight: 600;
  font-size: 16px;
  line-height: 21px;
  border: 0;
  width: 209px;
  height: 49px;
  margin-bottom: 10px;
}

.profile-btns-dm {
  width: 240px;
}

.profile-btns:hover {
  text-decoration: underline;
}

.right-nav-btn {
  background: linear-gradient(180deg, #0094e7 0%, #005e93 100%);
  box-shadow: 17px 13px 18px rgba(0, 126, 197, 0.14);
  border-radius: 30px;
  color: #fff;
  font-style: normal;
  font-weight: 600;
  font-size: 18px;
  line-height: 21px;
  padding: 18px 60px;
  /* transition: 400ms; */
  border: 0;
}

/* .navbar-nav .nav-item .active {
  padding: 10px 8px;
  font-weight: 600;
} */

/* .navbar-nav .nav-li {
  /* transition: all 0.3s ease-in-out; 
} */

.navbar-nav .nav-li.active {
  border-bottom: 4px solid #549a9c;
}

/* 
.navbar-nav .nav-li:hover .nav-link {
  color: #3862a0;
  border-bottom: 1px solid #3862a0;

}

.navbar-nav .nav-li .nav-link .active {
  border-bottom: 1px solid #3862a0;
} */

/* .navbar-nav .nav-li:hover .nav-link::before {
  visibility: visible;  
  transform: scale(1, 1);
}

.navbar-nav .nav-li:hover .nav-link.active::before {
  visibility: hidden;
} */

.navbar-nav .nav-li a {
  color: #000;
  display: block;
  padding: 0 7px 0 7px;
  margin: 0 0 10px;
  text-decoration: none;
  position: relative;
}

.flex-box {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.primary-color {
  color: #005e93;
}

.green-color {
  color: #74bdbf;
}

.light-green-color {
  color: #c2e2e3;
}

.profile-image-sm {
  width: 3vw;
  height: 3vw;
  border-radius: 50%;
  object-fit: cover;
}

.profile-image-sm-v2 {
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  object-fit: cover;
}

.profile-image-md {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  margin-left: 0px !important;
  margin-right: 0px !important;
  padding-left: 0px !important;
  padding-right: 0px !important;
  object-fit: cover;
}

.profile-stars {
  display: inline-flex;
  align-items: center;
}

.profile-name-row {
  display: flex;
  align-items: center;
}

.brand-profile-image {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  /* object-fit: contain; */
  object-fit: cover;
  min-width: 55px;
  min-height: 55px;
  margin: 0px;
  padding: 0px;
  overflow: hidden;
}

.campaign-detail-image {
  width: 478px;
  height: 360px;
  border-radius: 24px;
  object-fit: cover;
}

.navbar-nav .nav-li a::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 3px;
  bottom: -10px;
  left: 0px;
  background-color: #3862a0;
  transition: all 0.2s ease-in-out;
  transform: scale(0, 0);
  visibility: hidden;
}

.creators-heading {
  color: #000;
  text-align: center;
  font-family: "Raleway";
  font-size: 50px;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
}

.fav-creators-style {
  color: #5ba1a3;
  text-align: center;
  font-family: "Raleway";
  font-size: 18px;
  font-style: normal;
  font-weight: 600;
  line-height: normal;
}

.fav-creators-style:hover {
  text-decoration: underline;
}

/* Login-popup */
.gradient-custom-2 {
  /* fallback for old browsers */
  background: #fccb90;

  /* Chrome 10-25, Safari 5.1-6 */
  background: -webkit-linear-gradient(to right,
      #ee7724,
      #d8363a,
      #dd3675,
      #b44593);

  /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
  background: linear-gradient(to right, #ee7724, #d8363a, #dd3675, #b44593);
}

#navbarSupportedContents .modal-dialog {
  /* max-width: 500px; */
}

#navbarSupportedContents .modal-header h5 {
  font-family: "Raleway";
  font-size: 38px;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
  /* text-transform: capitalize; */
  margin-bottom: 2%;
}

#navbarSupportedContents .modal-header {
  /* border-bottom: none;
  padding: 35px 0px 20px 0px; */
}

#navbarSupportedContents .modal.show .modal-dialog {
  /* max-width: 926px; */
  /* top: 15%; */
}

#navbarSupportedContents .modal-content {
  /* height: 305px; */
  /* border-radius: 20px; */
}

#navbarSupportedContents .creator-modal-content-signup {
  /* height: 650px; */
}

#navbarSupportedContents .modal-content .signup-header .btn-close {
  position: absolute;
  right: 50px;
  top: 12px;
}

#navbarSupportedContents .modal-content .brand-header .btn-close {
  position: absolute;
  right: 50px;
  top: 12px;
}

#navbarSupportedContents .modal-content .creator-header .btn-close {
  position: absolute;
  right: 50px;
  top: 12px;
}

#navbarSupportedContents .modal-body {
  flex: none;
}

#navbarSupportedContents .modal-body .popup-man-img {
  right: -35px;
  top: -55px;
}

#navbarSupportedContents .brand-popup-man-img {
  right: -35px;
  bottom: -158px;
}

#navbarSupportedContents .creator-popup-man-img {
  right: -35px;
  bottom: -120px;
}

#navbarSupportedContents .bitcoin-popup {
  position: absolute;
  right: 0px;
  top: -48px;
  animation: topbottom 5s linear 0s infinite;
}

#user-delete-settings-modal .purple-empty-circle-2-popup {
  left: 62%;
  bottom: 36%;
  /* animation: banimg5 2s linear 0s infinite; */
}

.popup-yellow-circle {
  bottom: 10%;
  right: 4%;
  left: unset;
  top: unset;
  animation: unset;
}

.blue-ball-popup {
  position: absolute;
  left: 10%;
  top: 20%;
}

.purple-plus-popup {
  position: absolute;
  right: 15%;
  top: 30%;
}

.purple-empty-circle-popup {
  position: absolute;
  left: 3%;
  bottom: 6%;
}

#user-delete-settings-modal .blue-ball-brand-popup {
  position: absolute;
  left: 15%;
  top: 10%;
}

@keyframes horizontalMove {
  0% {
    left: 15%;
  }

  50% {
    left: 20%;
  }

  /* Adjust the destination as needed */
  100% {
    left: 15%;
  }
}

#user-delete-settings-modal .blue-ball-brand-popup {
  animation: horizontalMove 4s linear infinite;
}

#user-delete-settings-modal .purple-plus-brand-popup {
  position: absolute;
  right: 15%;
  top: 20%;
}

@keyframes rotate {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

#user-delete-settings-modal .purple-plus-brand-popup {
  animation: rotate 4s linear infinite;
}

#user-delete-settings-modal .purple-empty-circle-brand-popup {
  position: absolute;
  left: 2%;
  bottom: -25%;
}

#user-delete-settings-modal .purple-empty-circle-2-brand-popup {
  left: 48%;
  bottom: -10%;
  /* animation: banimg5 2s linear 0s infinite; */
}

@keyframes verticalMove {
  0% {
    bottom: -10%;
  }

  50% {
    bottom: 1%;
  }

  /* Adjust the destination as needed */
  100% {
    bottom: -10%;
  }
}

#user-delete-settings-modal .purple-empty-circle-brand-popup,
#user-delete-settings-modal .purple-empty-circle-2-brand-popup {
  animation: verticalMove 4s linear infinite;
}

#user-delete-settings-modal .popup-yellow-brand-circle {
  bottom: -10%;
  right: 4%;
  left: unset;
  top: unset;
  animation: unset;
}

/* CONGRATULATIONS MODAL ANIMATION START */
.congratulations-modal-style .purple-empty-circle-2-popup {
  left: 82% !important;
  bottom: 46% !important;
  /* animation: banimg5 2s linear 0s infinite; */
}

.congratulations-modal-style .blue-ball-popup {
  position: absolute;
  left: 15%;
  top: 10%;
}

@keyframes horizontalMove {
  0% {
    left: 15%;
  }

  50% {
    left: 20%;
  }

  /* Adjust the destination as needed */
  100% {
    left: 15%;
  }
}

.congratulations-modal-style .blue-ball-popup {
  animation: horizontalMove 4s linear infinite;
}

.congratulations-modal-style .purple-plus-popup {
  position: absolute;
  right: 15%;
  top: 20%;
}

@keyframes rotate {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

.congratulations-modal-style .purple-plus-popup {
  animation: rotate 4s linear infinite;
}

.congratulations-modal-style .purple-empty-circle-popup {
  position: absolute;
  left: 2%;
  bottom: -10%;
}

.congratulations-modal-style .purple-empty-circle-2-popup {
  left: 48%;
  bottom: -10%;
}

@keyframes verticalMove {
  0% {
    bottom: 10%;
  }

  50% {
    bottom: 5%;
  }

  /* Adjust the destination as needed */
  100% {
    bottom: 10%;
  }
}

.congratulations-modal-style .purple-empty-circle-popup,
.congratulations-modal-style .purple-empty-circle-2-popup {
  animation: verticalMove 3s linear infinite;
}

.congratulations-modal-style .popup-yellow-circle {
  bottom: 10%;
  right: 4%;
  left: unset;
  top: unset;
  animation: unset;
}

/* CONGRATULATIONS MODAL ANIMATION END  */

/* VIEW OFFER MODAL ANIMATION START  */
.view-offer-modal .purple-empty-circle-2-popup {
  left: 82% !important;
  bottom: 46% !important;
  /* animation: banimg5 2s linear 0s infinite; */
}

.edit-campaign .blue-ball-popup,
.view-offer-modal .blue-ball-popup {
  position: absolute;
  left: 15%;
  top: 10%;
}

@keyframes horizontalMove {
  0% {
    left: 15%;
  }

  50% {
    left: 20%;
  }

  /* Adjust the destination as needed */
  100% {
    left: 15%;
  }
}

.edit-campaign .blue-ball-popup,
.view-offer-modal .blue-ball-popup {
  animation: horizontalMove 6s linear infinite;
}

.edit-campaign .purple-plus-popup,
.view-offer-modal .purple-plus-popup {
  position: absolute;
  right: 15%;
  top: 20%;
}

@keyframes rotate {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

.edit-campaign .purple-plus-popup,
.view-offer-modal .purple-plus-popup {
  animation: rotate 6s linear infinite;
}

.edit-campaign .purple-empty-circle-popup,
.view-offer-modal .purple-empty-circle-popup {
  position: absolute;
  left: 2%;
  bottom: -10%;
}

.edit-campaign .purple-empty-circle-2-popup,
.view-offer-modal .purple-empty-circle-2-popup {
  left: 48%;
  bottom: -10%;
}

@keyframes verticalMove {
  0% {
    bottom: 10%;
  }

  50% {
    bottom: 5%;
  }

  /* Adjust the destination as needed */
  100% {
    bottom: 10%;
  }
}

.edit-campaign .purple-empty-circle-popup,
.edit-campaign .purple-empty-circle-2-popup,
.view-offer-modal .purple-empty-circle-popup,
.view-offer-modal .purple-empty-circle-2-popup {
  animation: verticalMove 5s linear infinite;
}

.edit-campaign .popup-yellow-circle,
.view-offer-modal .popup-yellow-circle {
  position: absolute;
  bottom: 10%;
  right: 4%;
  left: unset;
  top: unset;
  animation: unset;
}

/* VIEW OFFER MODAL ANIMATION END  */

#navbarSupportedContents .blue-ball-brand-popup {
  /* position: absolute;
  left: 15%;
  top: -10%; */
}

#navbarSupportedContents .purple-plus-brand-popup {
  /* position: absolute;
  right: 15%;
  top: -25%; */
}

#navbarSupportedContents .purple-empty-circle-brand-popup {
  /* position: absolute;
  left: 20%;
  bottom: -5%; */
}

#navbarSupportedContents .purple-empty-circle-2-brand-popup {
  left: 62%;
  bottom: 36%;
  /* animation: banimg5 2s linear 0s infinite; */
}

#navbarSupportedContents .popup-yellow-brand-circle {
  /* bottom: -10%;
  right: 4%;
  left: unset;
  top: unset;
  animation: unset; */
}

@keyframes verticalMoveYellow {
  0% {
    bottom: -10%;
  }

  50% {
    bottom: 20%;
  }

  /* Adjust the destination as needed */
  100% {
    bottom: -10%;
  }
}

#user-delete-settings-modal .popup-yellow-brand-circle {
  animation: verticalMoveYellow 4s linear infinite;
}

/* Brand-login */

#navbarSupportedContents .brand-modal-content {
  /* height: 530px; */
  padding: 20px;
}

#navbarSupportedContents .modal.show .brand-modal-dialog {
  /* max-width: 550px;
  top: 15%; */
}

#navbarSupportedContents .modal.show .brand-modal-dialog-signup {
  max-width: 926px;
  top: 10%;
}

#navbarSupportedContents .modal-footer {
  border-top: 0px;
}

#navbarSupportedContents .brand-field {
  height: 50px;
  /* border-radius: 50px; */
  padding-left: 30px;
  /* border-radius: 50px; */
  /* border: 1px solid rgba(84, 154, 156, 0.5); */
}

.signup-pop-up-row {
  display: flex;
  flex-direction: row;
  align-content: center;
  text-align: center;
}

.brand-signup-logo {
  width: 38%;
  height: auto;
  padding: 8%;
  border-radius: 50%;
  background-color: #e7f9f9;
  margin-bottom: 4%;
  object-fit: contain;
  overflow: visible;
  margin: auto;
}

.brand-signup-inside-logo {
  /* position: absolute;
  width: 15%;
  height: auto;
  object-fit: contain;
  margin: auto;
  left: 0%;
  top: 0%; */
}

.creator-signup-background {
  width: 34%;
  padding: 8% 5%;
  border-radius: 50%;
  background-color: #e7f9f9;
  margin: auto;
}

.creator-signup-logo {
  width: 100%;
  height: auto;

  object-fit: cover;
  overflow: visible;
  margin: auto;
}

.creator-signup-inside-logo {
  /* position: absolute;
  width: 25%;
  height: auto;
  object-fit: contain;
  margin: auto;
  left: -6%;
  bottom: -3%; */
}

.brand-signup-col {
  padding-left: 0px !important;
  padding-right: 0px !important;
  align-content: center;
  text-align: center;
  flex-direction: column;
  display: flex;
  flex-wrap: unset;
}

.creator-signup-col {
  padding-left: 0px !important;
  padding-right: 0px !important;
  align-content: center;
  text-align: center;
  flex-direction: column;
  display: flex;
  flex-wrap: unset;
}

.brand-signup-btn {
  width: 60%;
  margin: auto;
}

.creator-signup-btn {
  width: 60%;
  margin: auto !important;
}

.divider-text {
  color: #818383;
  text-align: center;
  font-family: Raleway;
  font-size: 18px;
  font-style: normal;
  font-weight: 500;
  line-height: 40px;
  /* 222.222% */
  margin: auto;
}

.emptyVerticalSpace {
  margin: 4% 0px;
}

.verticalLine {
  min-width: 1px;
  max-width: 1px;
  height: 42%;
  background-color: rgba(84, 154, 156, 0.3);
  margin: auto;
}

/*Banner section*/
.ethereum_1 {
  position: absolute;
  /* right: 100px; */
  /* top: 200px; */
  animation: topbottom 2s linear 0s infinite;
}

.top_content {
  position: relative;
}

.top_content .button-box {
  position: relative;
}

.top_content .button-box .circle_top1 {
  position: absolute;
  left: 40px;
  top: 50px;
  animation: banimg5 2s linear 0s infinite !important;
}

.top_content h2 span {
  position: absolute;
  right: 180px;
  top: 0;
}

.circle_3 {
  animation: banimg5 2s linear 0s infinite;
}

.top_content h2 {
  position: relative;
}

.bitcoin_1 {
  position: absolute;
  right: 9%;
  top: 500px;
  animation: topbottom 5s linear 0s infinite;
}

.third-section2 ul.dropdown-menu.show a {
  color: #fff;
}

.third-section2 ul.dropdown-menu.show a:hover {
  color: #000;
}

tr th:last-child,
tr td:last-child {
  text-align: left;
}

/* signup-modal-popup */

.button-box .modal-header h5 {
  font-family: "Power Grotesk";
  font-size: 40px;
}

.button-box .modal-header {
  /* border-bottom: none;
  padding: 35px 0px; */
}

.button-box .modal.show .modal-dialog {
  /* max-width: 926px; */
}

.button-box .modal-content {
  /* height: 460px; */
  /* border-radius: 20px; */
}

.button-box .modal-content .signup-header .btn-close {
  position: absolute;
  right: 50px;
  top: 12px;
}

.button-box .modal-content .brand-header .btn-close {
  position: absolute;
  right: 50px;
  top: 12px;
}

.button-box .modal-content .creator-header .btn-close {
  position: absolute;
  right: 50px;
  top: 12px;
}

.button-box .modal-body {
  flex: none;
}

.button-box .modal-body .popup-man-img {
  right: -35px;
  top: -55px;
}

.brand-popup-man-img {
  right: -35px;
  bottom: -158px;
}

.creator-popup-man-img {
  /* right: -35px; */
  bottom: -120px;
}

.button-box .ethereum-popup {
  position: absolute;
  left: -5px;
  top: -150px;
  animation: topbottom 5s linear 0s infinite;
}

.button-box .bitcoin-popup {
  position: absolute;
  right: 140px;
  top: -48px;
  animation: topbottom 5s linear 0s infinite;
}

.button-box .popup-purple-circle {
  left: 36px;
  bottom: -25px;
  animation: banimg5 5s linear 0s infinite;
}

.button-box .popup-yellow-circle {
  top: -29px;
  left: 150px;
  animation: banimg5 5s linear 0s infinite;
}

/* brand-modal-popup */

.button-box .inner-content {
  /* margin: 0px 50px 0px 50px; */
}

.button-box .inner-content .select-dropdown {
  height: 60px;
  border-radius: 30px;
  padding-left: 30px;
}

.button-box .brand-modal-content {
  /* height: 582px; */
}

.button-box .creator-modal-content {
  /* height: 750px; */
}

.button-box .brand-field {
  height: 61px;
  /* border-radius: 30px; */
  padding-left: 30px;
}

.PhoneInputInput {
  border: none !important;
  outline: none !important;
  
  background: #fff;

}

.dropdown-arrow-position {
  position: absolute;
  right: 20px;
  bottom: 18px;
}

.button-box .signup-btn {
  /* width: 261px; */
}

.hide-show-icon {
  position: absolute;
  top: 16px;
  right: 30px;
}

.hide-show-icon-login {
  position: absolute;
  top: 0.75rem;
  right: 20px;
}

.button-box .modal-footer {
  border-top: 0px;
}

.button-box .modal.show .brand-modal-dialog {
  /* top: 10%; */
}

.button-box .creator-modal-body {
  padding-bottom: 0px;
}

.banner-section {
  background: linear-gradient(230.27deg,
      #eff9fa 0%,
      rgba(239, 249, 250, 0) 53.84%),
    linear-gradient(135.11deg, #f5ecf1 0%, rgba(245, 236, 241, 0) 45.19%);
}

.banner-section p {
  font-family: "Raleway";
  font-style: normal;
  font-weight: 500;
  font-size: 28px;
  line-height: 146%;
  color: #616161;
}

.button-box .btn.common-button-style-outline,
.button-box .btn.ban-wire-btn {
  margin: 0;
}

.ban-wire-btn {
  background: #ffffff;
  box-shadow: 5px 7px 17px rgba(0, 94, 147, 0.08);
  border-radius: 30px;
  font-weight: 600;
  font-size: 18px;
  line-height: 21px;
  letter-spacing: 0.03em;
  color: #00669f;
  border: 1px solid #005e93;
  padding: 20px 35px;
  transition: 400ms;
  margin-bottom: 40px;
}

.otp-verification-box {
  box-shadow: 0px 24px 65px 0px #0000000a;
  border: 1px solid lightgray;
  height: 550px + 40px;
  max-width: 360px;
  padding: 0px 20px;
  border-radius: 13px;
  /* padding: 45px 30px 50px 30px; */
}

.bottom-text {
  font-size: 14px;
  line-height: 18px;
  color: #aeadad;
}

.resend-otp-btn {
  font-size: 12px;
  text-align: center;
}

.otp-input-field {
  height: 40px;
  border-radius: 50%;
  width: 40px;
  text-align: center;
  background-color: #eee;
  color: #000;
}

.user-profile-img-box {
  display: flex;
  align-items: center;
  width: 150px;
  border: 1px solid #eee;
  border-radius: 50%;
  height: 150px;
  justify-content: center;
  margin: 0 auto;
  background-color: #eee;
}

.otp-close-btn {
  position: absolute;
  top: 10px;
  right: 10px;
}

.error-msg-box {
  background-color: #eee;
  width: 50%;
  margin: 0 auto;
  font-size: 14px;
  padding: 10px;
  border-radius: 20px;
}

.chat-person-image {
  width: 4vw;
  height: 4vw;
}

/*Second section*/
/* .creator-section {
  background: linear-gradient(50.89deg,
      #eff9fa 0.76%,
      rgba(239, 249, 250, 0) 59.73%),
    linear-gradient(314.14deg, #ffe6f4 0%, rgba(245, 236, 241, 0) 32.16%);
} */

.creator-section p {
  font-weight: 500;
  font-size: 20px;
  line-height: 146%;
  color: #616161;
}

.creator-section p strong {
  color: #000;
}

.creator-section .p2 {
  color: #000;
  line-height: 151%;
}

.para-img {
  left: -10%;
}

/*Third section*/
/* .third-section {
  background: linear-gradient(122.77deg,
      #eff9fa 1.25%,
      rgba(239, 249, 250, 0) 56.79%),
    linear-gradient(231.42deg, #ffe5f4 0%, rgba(245, 236, 241, 0) 37.82%);
} */

/* .third-section .circle-boy {
  transform: scale(1.3) translateX(50px);
  margin-left: 30px;
} */
.table-colm {
  /* box-shadow: 0px 0px 65px rgba(0, 126, 197, 0.04); */
  border-radius: 20px;
  /* padding: 20px 20px 0; */
  /* padding: 20px 0 0 0 !important; */
}

.table-colm tbody tr:last-child td {
  border-bottom: 0;
}

.table img {
  width: 44px;
}

.table td {
  vertical-align: middle;
}

.table th {
  font-size: 16px;
  line-height: 19px;
  color: #616161;
  padding: 10px 30px;
}

.table td {
  font-size: 20px;
  line-height: 27px;
  color: #000;
  padding: 10px 30px;
}

#Creator table tr:nth-child(1) {
  border-style: none !important;
}

#Creator table tr {
  background-color: #fff;
  margin: 10px;
}

#Creator table tr td {
  padding: 15px 10px;
}

#Creator input {
  box-shadow: 3px 0 5px rgb(0 0 0 / 5%);
  border: 1px solid #ddd;
  margin-left: 10px;
  padding: 6px 5px;
  border-radius: 5px;
}

#Creator input:focus {
  outline: none;
}

#creators-table tr th {
  background-color: #f1f5f9 !important;
  border-bottom: 0px !important;
}

#Creator label {
  color: #8d8d8d;
  font-family: "Power Grotesk";
}

#Creator .table tr td .dropdown a {
  background-color: transparent;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
}

#Creator .table tr td .dropdown a:hover a {
  color: #a5a5a5;
}

#Creator .table tr td .dropdown .btn:hover {
  color: #000 !important;
}

#Creator .table tr td .dropdown .dropdown-menu {
  min-width: 140px;
  border: none;
  box-shadow: 3px 0 10px rgb(0 0 0 / 10%);
}

#Creator .table tr td .dropdown .logout-box .approve-btn {
  border: 1px solid #009966;
  background-color: transparent;
  color: #009966;
  border-radius: 20px;
  font-size: 12px;
  width: 90px;
}

#Creator .table tr td .dropdown .logout-box .approve-btn:hover .approve-btn-item {
  background-color: #009966;
  color: #fff;
}

#Creator .table tr td .dropdown .logout-box .disapprove-btn {
  border: 1px solid #cc3333;
  background-color: transparent;
  color: #cc3333;
  border-radius: 20px;
  font-size: 12px;
}

#creators-table {
  border-spacing: 0 10px;
  border-collapse: separate;
}

.btn-check:checked+.btn,
:not(.btn-check)+.btn:active,
.btn:first-child:active,
.btn.active,
.btn.show {
  color: #000 !important;
}

.table_dlr_left {
  position: absolute;
  left: -75px;
  top: 0;
  animation: topbottom 2s linear 0s infinite;
}

.bitcoin_table {
  position: absolute;
  right: -100px;
  bottom: -30px;
  width: 50px;
  animation: banimg5 2s linear 0s infinite;
}

.ethereum_table {
  position: absolute;
  right: -150px;
  width: 50px;
  top: 20px;
  animation: banimg5 2s linear 0s infinite;
}

.circle_yello_table {
  position: absolute;
  right: -170px;
  top: 140px;
  width: 14px;
  animation: topbottom 2s linear 0s infinite;
}

.circle_table {
  position: absolute;
  right: -80px;
  bottom: 100px;
  animation: topbottom 2s linear 0s infinite;
}

.table-colm.bg-white {
  position: relative;
  height: 580px;
  overflow: scroll;
  overflow-x: hidden;
  z-index: 100;
}

.table-colm.bg-white::-webkit-scrollbar {
  display: none;
}

.head-color {
  background: #549a9c !important;
}

.table-row-highlight {
  background: #eaf9fa;
}

.onHoverRow:hover {
  background-color: #549a9c !important;
}

.table-colm.bg-white::-webkit-scrollbar {
  display: none;
}

.cylinder_wrap {
  display: flex;
  justify-content: center;
  position: relative;
  width: 198px;
}

.third-section h6 {
  font-size: 22px !important;
  width: 198px;
}

.cylinder_wrap .cylinder-img {
  width: 250px;
}

.cylinder_wrap .cylinder-img1 {
  position: absolute;
  bottom: 40px;
  width: 120px;
  height: 172px;
}

.sticky_bottom {
  position: absolute;
  left: 0;
  bottom: -60px;
}

.rotate_box .rotate_bx {
  transform: translate(-30px, 0px);
}

.creators {
  position: relative;
  margin: 40px 0 60px;
}

/* .creator_content {
      padding-top: 60px;
  } */
.creator_content .right-nav-btn {
  margin-top: 15px;
}

.rotate_box {
  z-index: 1;
  position: relative;
  width: 60%;
  margin: 0 auto;
}

.fly_1 {
  position: absolute;
  right: 35px;
  top: 50%;
  width: 40px;
  transform: translateY(-50%);
}

.fly_2 {
  position: absolute;
  left: -25px;
  top: 50%;
  width: 40px;
  transform: translateY(-50%);
}

.fly_3 {
  position: absolute;
  left: 20px;
  top: 65%;
  z-index: -1;
  width: 40px;
  transform: translateY(-50%);
  opacity: 0.5;
}

.cloud_1 {
  position: absolute;
  right: 0px;
  top: 100px;
  z-index: -1;
  width: 100px;
  transform: translateY(-50%);
  animation: cloud_2 10s linear 0s infinite;
  opacity: 0.5;
}

.cloud_2 {
  position: absolute;
  left: 0px;
  top: 140px;
  z-index: -1;
  width: 100px;
  animation: cloud_1 10s linear 0s infinite;
  transform: translateY(-50%);
  opacity: 0.5;
}

.men_select,
.women_select,
.social-icons {
  filter: grayscale(1);
  cursor: pointer;
}

.reset_bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  z-index: 10000;
}

.women_select.active,
.men_select.active,
.social-icons.active {
  -webkit-filter: drop-shadow(2px 2px 5px #0094e7a6) grayscale(0) !important;
  filter: drop-shadow(2px 2px 5px #0094e7a6) grayscale(0) !important;
}

/*Third section2*/

.cylinder-wrap-tracker {
  position: relative;
  width: 80px;
  padding: 10px 0px;
  align-self: flex-start;
}

.cylinder-wrap-tracker .tracker-btn {
  position: absolute;
  bottom: 0;
  width: 10px;
  height: 30px;
  border-radius: 20px;
  background-color: #a1ddff;
}

.cylinder-range-value .bottom-range {
  position: absolute;
  bottom: 0px;
}

/* .third-section2 {
  background: linear-gradient(142.52deg,
      #f5fbfc 1.07%,
      rgba(239, 249, 250, 0) 43.01%),
    linear-gradient(212.91deg, #fff4fb 0%, rgba(245, 236, 241, 0) 16.97%);
} */

#app {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  flex-direction: column;
  margin-left: 10px;
  margin-top: 30px;
}

.track-container {
  position: relative;
  cursor: pointer;
  height: 0.5rem;
}

.track,
.track-highlight {
  display: block;
  position: absolute;
  width: 100%;
  height: 15px;
  margin-top: 1px;
  border-radius: 15px;
}

.track {
  /* background-color: #ddd; */
  border: 1px solid #69b5b74d;
}

/* .slider-length {
   width: 370px; 
} */

.track-highlight {
  /* background-image: linear-gradient(180deg, #0094e7 0%, #005e93 100%); */
  background-color: #549a9c;
  z-index: 2;
}

.track-btn {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  outline: none;
  cursor: pointer;
  display: block;
  position: absolute;
  z-index: 2;
  width: 1.7rem;
  height: 1.7rem;
  top: calc(-50% - 0.15rem);
  /* margin-left: -1rem; */
  border: 1px solid #549a9c;
  /* background-image: linear-gradient(180deg, #0094e7 0%, #005e93 100%); */
  background-color: #fff;

  border-radius: 50%;
  -ms-touch-action: pan-x;
  touch-action: pan-x;
  transition: box-shadow 0.3s ease-out, background-color 0.3s ease,
    -webkit-transform 0.3s ease-out;
  transition: transform 0.3s ease-out, box-shadow 0.3s ease-out,
    background-color 0.3s ease;
  transition: transform 0.3s ease-out, box-shadow 0.3s ease-out,
    background-color 0.3s ease, -webkit-transform 0.3s ease-out;
}

.range_value {
  display: flex;
  justify-content: space-between;
  padding-top: 20px;
  font-size: 20px;
  color: #616161;
  width: 125% !important;
  margin-left: -17px;
}

.third-section2 .interest-sec .inner-dropdown {
  width: 100%;
  /* background-image: linear-gradient(180deg, #0094e7 0%, #005e93 100%); */
  background: linear-gradient(263.11deg, #549a9c 5.13%, #65acae 86.84%);
  border-radius: 10px;
  overflow-y: scroll;
  height: 120px;
}

.third-section2.interest-sec .inner-dropdown::-webkit-scrollbar {
  display: none;
}

.ctm_toggle {
  position: relative;
}

.ctm_toggle .box-ul {
  position: absolute;
  top: 100%;
  left: 0;
  margin-top: 10px;
  display: none;
  z-index: 3;
  text-align: left;
}

.toggle-change:after {
  border-top: 0;
  border-bottom: 0.3em solid;
}

.ctm_toggle.dropdown-toggle.toggle-change .box-ul {
  display: block;
}

.dropdown.w-100 {
  text-align: center;
}

.third-section2 .interest-sec ul li.active {
  background: #fff;
}

.third-section2 .interest-sec ul li.active p {
  color: #00669f !important;
}

.third-section2 .interest-sec ul li.active a {
  color: #00669f !important;
}

.reset_bar button.btn {
  font-weight: 400;
}

.box-ul li .int-para {
  color: #fff !important;
  padding-left: 10px;
  text-decoration: none;
  font-size: 15px;
  font-weight: 400;
}

.box-ul li {
  cursor: pointer;
  padding: 5px 10px;
}

.box-ul li:hover {
  background: #fff;
}

.box-ul li:hover .int-para {
  color: #00669f !important;
}

.third-section2 .interest-sec ul {
  height: 160px;
  padding: 10px 0;
  list-style: none;
  overflow: hidden;
  overflow-y: auto;
}

.third-section2 .interest-sec ul li {
  padding: 8px 0;
}

.third-section2 .interest-sec ul li a {
  text-decoration: none;
}

.third-section2 .interest-sec ul::-webkit-scrollbar {
  width: 5px;
  padding: 10px;
  margin-right: 50px;
}

.third-section2 .interest-sec ul::-webkit-scrollbar-track {
  background: #def3ff40;
  border-radius: 10px;
}

.third-section2 .interest-sec ul::-webkit-scrollbar-thumb {
  background: #c6ebff;
  border-radius: 10px;
}

#app .yrs {
  color: #000000;
  font-weight: 500;
  width: 50%;
  text-align: center;
}

span.range-value {
  width: 25%;
}

span.range-value.max {
  text-align: right;
}

/* Welcome screen */
.welcome-box {
  padding: 100px 0px;
}

.welcome-inner-box {
  width: 1170px;
  padding: 60px 213px;
  background-color: #fff;
  border-radius: 30px;
  margin: 0 auto;
}

.welcome-inner-box h1 {
  font-size: 48px;
  line-height: 58px;
  font-weight: 900;
  font-style: normal;
}

.welcome-inner-box .welcome-text {
  font-family: "Raleway";
  font-style: normal;
  font-weight: 500;
  font-size: 16px;
  color: #616161;
  padding-top: 12px;
  line-height: 30px;
}

.welcome-inner-box .welcome-bottom-text {
  font-size: 14px;
  padding-top: 30px;
  color: #616161;
}

.welcome-inner-box .button-box {
  padding-top: 30px;
}

.welcome-sec-main-img {
  position: absolute;
  left: 0px;
  left: -70px;
  top: 100px;
}

.welcome-screen-bitcoin {
  position: absolute;
  bottom: 100px;
  right: -20px;
}

/* .landing-page {
    background: linear-gradient(
            230.27deg,
            #eff9fa 0%,
            rgba(239, 249, 250, 0) 53.84%
        ),
        linear-gradient(135.11deg, #f5ecf1 0%, rgba(245, 236, 241, 0) 45.19%);
} */
.welcome-screen-purple-coin {
  position: absolute;
  right: 200px;
  bottom: 90px;
  animation: banimg5 2s linear 0s infinite;
}

.welcome-screen-dollor-coin {
  position: absolute;
  right: -300px;
  bottom: 200px;
  animation: banimg5 2s linear 0s infinite;
}

.welcome-screen-yellow-coin {
  position: absolute;
  left: -250px;
  top: 50px;
}

/* Chat Page */

.new-msg-btn {
  background: linear-gradient(180deg, #0094e7 0%, #005e93 100%);
  box-shadow: 17px 13px 18px rgba(0, 126, 197, 0.14);
  border-radius: 30.5px;
  padding: 5px 15px;
  color: #fff;
}

.chat-section-container {
  /* background-color:blue; */
  height: 90%;
}

.campaign-details-section {
  /* width: calc(100% - 100px);
  margin-left: 50px;
  background: #ffffff;
  box-shadow: 0px 24px 65px rgba(0, 0, 0, 0.04);
  border-radius: 23px;
  padding: 35px;
  border: 1px solid #549a9c80; */
}

.campaign-details-status-pos {
  /* width: calc(100% - 100px);
  margin-left: 50px;
  display: flex;
  justify-content: space-between; */
}

.campaign-details-status-pos .status-tag {
  /* display: inline-block; */
  
  /* display: flex;
  width: 180px;
  height: 45px;
  border-radius: 24px;
  border: none;
  justify-content: center;
  padding-top: 11px;
  color: white;
  font-family: Raleway;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0em; */
}

.tag-rejected {
  background-color: #ce3d3d;
}

.tag-pending {
  background-color: #feac00;
}

.tag-completed {
  background-color: #5abb71;
}

.tag-appealed {
  background-color: #ce3d3d;
}

.tag-ongoing {
  background-color: #feac00;
}

.tag-ongoing:hover {
  background-color: #feac00;
  text-decoration: underline;
}

.tag-approved {
  background-color: #65acae;
}

.navigaton-back-container {
  /* margin: auto 140px; */
  padding: 20px;
}

.payment-container-box {
  /* width: calc(100% - 300px); */
  width: 1000px;
  max-width: 90vw;
  margin: auto;
  background-color: white;
  border-radius: 23px;
}

.payment-container-box .payment-section {
  height: 200px;
}

.stripe-input-design {
  margin: 5px;
  border-radius: 20px;
  padding: 10px 30px;
  font-size: 12px;
  border: 0px;
  background-color: #f1f8ff;
}

.container-box-style {
  font-family: Raleway;
  font-size: 16px;
  font-weight: 400;
  line-height: 19px;
  letter-spacing: 0em;
  width: calc(100% - 150px);
  margin: auto;
  height: 100%;
}

.container-box-style .box-bg {
  border-radius: 20px;
  background: #ffffff;
  /* padding: 20px; */
}

.container-box-style .message-input-style textarea {
  /* height: 340px; */
  /* border-radius: 25.5px;
  border: none;
  box-shadow: 0px 0px 16px 0px #0000000d; */
  /* padding: 20px 30px; */
  resize: none;
}

.container-box-style .input-style input {
  /* height: 51px; */
  /* border-radius: 25.5px; */
  /* border: none;
  box-shadow: 0px 0px 16px 0px #0000000d; */
  /* padding: 10px 30px; */
}

.non-editable-chat-section {
  height: 753px;
  overflow-y: scroll;
  margin: auto;
  /* width: 1200px; */
  /* margin-left: 50px; */
  background: #ffffff;
  box-shadow: 0px 24px 65px rgba(0, 0, 0, 0.04);
  border-radius: 23px;
  padding: 30px 18px 30px 18px;
  position: relative;
  border: 1px solid #549a9c80;
}

.non-editable-chat-section::-webkit-scrollbar {
  width: 10px;
}

.border-dt {
  background: #989ba1;
  opacity: 0.2;
  border-radius: 10px;
  position: absolute;
  height: 1px;
  width: 100%;
  left: 0;
  top: 12px;
  z-index: 5;
}

.add-files-box {
  width: 580px;
}

.send-btn {
  background: #1d75dd;
  border-radius: 8px;
  width: 30.6px;
  height: 30.6px;
  display: flex;
  align-self: center;
  align-items: center;
  justify-content: center;
}

.rounded-btn-style {
  font-family: Raleway;
  font-size: 16px;
  font-weight: 600;
  line-height: 19px;
  letter-spacing: 0.03em;
  text-align: center;
  border-radius: 31px;
  height: 39px;
  color: white;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.custom-send-btn {
  background: linear-gradient(180deg, #0094e7 0%, #005e93 100%);
  box-shadow: 17px 13px 18px 0px #007ec524;
  width: 140px;
}

.collaboration-proposal-modal .custom-send-btn {
  box-shadow: 17px 13px 18px 0px #007ec524;
  width: 253px;
  background: linear-gradient(180deg, #0094e7 0%, #005e93 100%);
}

.custom-send-btn:hover {
  background-color: #0094e7;
  color: black;
}

.create-pack-dollar-icon {
  position: absolute;
  /* top: 17px;
  left: 12px; */
}

.campaign-faq-section-main {
  padding: 0px 0px 0px 0px;
  height: 100vh;
  position: relative;
  background-color: #eafbfc;
  overflow-y: hidden;
}

.container-fluid {
  padding-left: 0px !important;
}

.right-campaign-img {
  width: 12%;
  top: 5%;
  left: 44%;
  opacity: 1;
  /* animation: cloud2 10s linear 0s infinite; */
}

.background-arrow-campagin {
  position: absolute;
  left: 0%;
  top: 21%;
  width: 61%;
}

.background-arrow-small-one {
  position: absolute;
  left: 0%;
  top: 20%;
  width: 40%;
}

.background-arrow-small-two {
  position: absolute;
  left: 5%;
  bottom: -25%;
  width: 50%;
}

.bottom-numbering {
  position: absolute;
  left: 10%;
  bottom: 5%;
}

.bottom-numbering h4 {
  color: #74bdbf;
  font-family: Raleway;
  font-size: 50px;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
  text-transform: capitalize;
  /* text-align: start; */
}

.rotating-top {
  position: absolute;
  left: 27%;
  bottom: 31%;
  width: 45%;
  z-index: 1;
}

.sticky-rotate-bottom {
  position: absolute;
  bottom: 25%;
  left: 17%;
  width: 75%;
}

.campaign-faq-section-main .ethereum-coin {
  position: absolute;
  top: 15%;
  left: 55%;
  animation: topbottom 2s linear 0s infinite;
}

.campaign-col {
  /* height: 100vh; */
  overflow-y: hidden;
}

.campaign-left-col {
  padding-left: 10%;
}

.campaign-right-col {
  background-color: rgba(255, 255, 255, 0.5);
}

.campaign-top-btn {
  background-color: #f1f8ff;
  border: none;
  font-size: 12px;
  padding: 10px 30px;
  border-radius: 30px;
  margin-right: 10px;
}

.contact-btn-box-outer {
  z-index: 2;
}

.sm-close-position {
  position: absolute;
  bottom: 92px;
  right: -8px;
}

.new-lg-close-position {
  top: 15px;
  position: absolute;
  right: 15px;
}

.lg-close-position {
  position: absolute;
  top: -20px;
  right: -40px;
  background-color: #ffffff;
}

.verify-notice {
  background: #fede9f;
  width: 1469px;
  border-radius: 14px;
  display: flex;
  justify-content: space-between;
  padding: 10px 20px;
  margin-top: 3rem;
}

.link-style-notice:hover {
  color: gray !important;
  cursor: pointer !important;
}

.insta-heading {
  font-family: Power Grotesk;
  font-size: 35px;
  font-weight: 900;
  line-height: 48px;
  letter-spacing: 0em;
  text-align: center;
}

.info-heading {
  color: #000;
  text-align: center;
  font-family: "Raleway";
  font-size: 38px;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
  /* text-transform: capitalize; */
}

.info-subtitle {
  color: #818383;
  text-align: center;
  font-family: "Raleway";
  font-size: 18px;
  font-style: normal;
  font-weight: 500;
  line-height: 26px;
  /* 200% */
  padding: 20px 0px;
}

.congrats-heading {
  /* font-family: Qwitcher Grypen; */
  font-size: 40px;
  font-weight: 700;
  line-height: 141px;
  letter-spacing: 0em;
  text-align: center;
}

.congrats-text {
  font-family: Raleway;
  font-size: 18px;
  font-weight: 600;
  line-height: 35px;
  letter-spacing: 0.5px;
  text-align: center;
  color: #818383;
}

.close-btn-box-profile {
  position: absolute;
  background-color: #ffffff;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 35px;
  border-radius: 50%;
  width: 35px;
  right: 10px;
  top: 20px;
  z-index: 100;
}

.close-btn-box {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 35px;
  width: 35px;
  border-radius: 50%;
}

.close-btn-box:hover {
  background-color: #f5f5f5;
  cursor: pointer;
}

.campaign-col .social-btn {
  border: 1px solid #ddd;
  font-size: 14px;
  border-radius: 5px;
}

.icon-color {
  color: #000;
}

.campaign-col::-webkit-scrollbar {
  display: none;
}

.campaign-faq-section-main .purple-coin {
  position: absolute;
  top: 28%;
  left: 50px;
  animation: banimg5 2s linear 0s infinite;
}

.campaign-faq-section-main .dollor-coin {
  position: absolute;
  left: 30%;
  top: 38%;
  animation: banimg5 2s linear 0s infinite;
}

.campaign-row {
  height: 100vh;
}

.campaign-images-sec .bitcoin {
  position: absolute;
  left: 9%;
  bottom: 100px;
  animation: topbottom 2s linear 0s infinite;
}

.campaign-images-sec .yellow-circle-ball {
  position: absolute;
  top: 200px;
  right: 100px;
  animation: banimg5 2s linear 0s infinite;
}

.add-campaign .navbar,
.add-campaign footer {
  display: none;
}

.campaign-images-sec {
  justify-content: center;
  align-items: center;
  /* background-color: #f1f8ff; */
  overflow: hidden;
}

.campaign-images-sec .inner-curve {
  /* background-image: url("../images/campaign-curved-bg.png"); */
  height: 100%;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.campaign-images-sec .inner-curve img {
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  position: absolute;
  margin: auto;
  opacity: 0;
}

.campaign-images-sec .inner-curve img.active-image {
  opacity: 1;
}

.campaign-faq-section-main h3 {
  color: #000;
  font-family: "Raleway";
  font-size: 42px;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
  text-transform: capitalize;
}

.campaign-faq-section-main .back-btn {
  background: none;
  border-radius: 50px;
  border: 1px solid #63abad;
  background: #fff;
  color: #64abad;
  text-align: center;
  font-family: "Raleway";
  font-size: 18px;
  font-style: normal;
  font-weight: 600;
  line-height: normal;
  padding: 15px 45px;
  transition: 400ms;
}

.campaign-faq-section-main .back-btn:hover {
  /* background: linear-gradient(180deg, #0094e7 0%, #005e93 100%); */
  background: linear-gradient(263.11deg, #549a9c 5.13%, #65acae 86.84%);
  color: #fff;
  /* border: 0;  */
}

.campaign-category-box {
  gap: 20px;
  align-items: center;
  padding: 15px 0px;
  width: 90%;
}

.campaign-category-box .campaign-category {
  width: 75px;
  height: 75px;
  background: #f1f8ff;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

.campaign-category-box .campaign-category span {
  /* padding-top: 5px; */
  font-style: normal;
  font-weight: 400;
  font-size: 10px;
  color: #000;
}

.campaign-location-btn-outer .nav-tabs {
  border: none;
}

.bg-white-op-half {
  background-color: rgba(255, 255, 255, 0.5);
}

.completeProfileSubtitle {
  color: #616161;
  font-family: "Raleway";
  font-size: 20px;
  font-style: normal;
  font-weight: 400;
  line-height: 168.4%;
  /* 33.68px */
  text-align: left;
}

.purple-plus-right {
  position: absolute;
  top: 10%;
  right: 15%;
}

.purple-empty-circle-right {
  position: absolute;
  top: 10%;
  right: 20%;
}

.purple-plus-center {
  position: absolute;
  bottom: 40%;
  right: 45%;
}

.purple-empty-circle-center {
  position: absolute;
  bottom: 35%;
  right: 40%;
}

/* create-campaign-radio-boxes */
.settings-container {
  position: relative;
  max-width: 1190px;
}

.settings-container .circle_top1 {
  position: absolute;
  left: -60px;
  top: 310px;
  animation: banimg5 5s linear 0s infinite;
}

.settings-container .bitcoin_1 {
  position: absolute;
  right: -7%;
  bottom: 90px;
  animation: topbottom 2s linear 0s infinite;
}

.settings-container .ethereum_1 {
  position: absolute;
  right: -130px;
  left: auto;
  top: 131px;
  animation: topbottom 2s linear 0s infinite;
}

.settings-container .circle-03 {
  position: absolute;
  right: -190px;
  top: 263px;
  animation: banimg5 4s linear 0s infinite;
}

.settings-container .dollar-icon1 {
  position: absolute;
  left: -145px;
  top: 50px;
  animation: topbottom 5s linear 0s infinite;
}

.social-btn-box {
  width: 150px !important;
  background-color: #f1f8ff;
  border-radius: 10px;
  height: 50px !important;
}

div.radio-with-Icon {
  display: block;
}

div.radio-with-Icon p.radioOption-Item {
  display: inline-block;
  width: 75px;
  height: 75px;
  box-sizing: border-box;
  border: none;
}

div.radio-with-Icon p.radioOption-Item-category {
  width: auto;
  height: unset;
}

div.radio-with-Icon p.radioOption-Item .social-icon-label {
  padding-top: 15px !important;
  border-radius: 5px;
}

div.radio-with-Icon p.radioOption-Item label {
  display: block;
  height: 100%;
  width: 100%;
  padding: 10px;
  border-radius: 10px;
  border: 1px solid white;
  /* color: #de1831; */
  cursor: pointer;
  opacity: 1;
  transition: none;
  font-size: 13px;
  padding-top: 2%;
  text-align: center;
  margin: 0 !important;
  background: rgb(167, 231, 233);
  background: linear-gradient(186deg,
      rgba(167, 231, 233, 1) 0%,
      rgba(255, 255, 255, 1) 100%);
}

div.radio-with-Icon p.radioOption-Item label .category-icon {
  fill: #000;
}

div.radio-with-Icon p.radioOption-Item label:hover,
div.radio-with-Icon p.radioOption-Item label:focus,
div.radio-with-Icon p.radioOption-Item label:active {
  /* opacity: .5; */
  background-color: #ddd;
  margin: 0 !important;
}

div.radio-with-Icon p.radioOption-Item label::after,
div.radio-with-Icon p.radioOption-Item label:after,
div.radio-with-Icon p.radioOption-Item label::before,
div.radio-with-Icon p.radioOption-Item label:before {
  opacity: 0 !important;
  width: 0 !important;
  height: 0 !important;
  margin: 0 !important;
}

div.radio-with-Icon p.radioOption-Item label i.fa {
  display: block;
  font-size: 50px;
}

div.radio-with-Icon p.radioOption-Item input[type="checkbox"] {
  opacity: 0 !important;
  width: 0 !important;
  height: 0 !important;
  display: none;
}

div.radio-with-Icon p.radioOption-Item input[type="checkbox"]:active~label {
  opacity: 1;
}

div.radio-with-Icon p.radioOption-Item input[type="checkbox"]:checked~label {
  opacity: 1;
  border: none;
  background-color: #549a9c;
  color: #fff;
}

div.radio-with-Icon p.radioOption-Item input[type="checkbox"]:checked~label .category-icon {
  fill: #fff;
}

div.radio-with-Icon p.radioOption-Item input[type="checkbox"]:checked~label span {
  color: #fff;
}

div.radio-with-Icon p.radioOption-Item input[type="checkbox"]:hover,
div.radio-with-Icon p.radioOption-Item input[type="checkbox"]:focus,
div.radio-with-Icon p.radioOption-Item input[type="checkbox"]:active {
  margin: 0 !important;
}

div.radio-with-Icon p.radioOption-Item input[type="checkbox"]+label:before,
div.radio-with-Icon p.radioOption-Item input[type="checkbox"]+label:after {
  margin: 0 !important;
}

.animate__animated {
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

@keyframes fadeInUp {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
  }
}

.animate__fadeInUp {
  -webkit-animation-name: fadeInUp;
  animation-name: fadeInUp;
}

@keyframes fadeInDown {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
  }
}

.animate__fadeInDown {
  -webkit-animation-name: fadeInDown;
  animation-name: fadeInDown;
}

@keyframes fadeInLeft {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
  }
}

.animate__fadeInLeft {
  -webkit-animation-name: fadeInLeft;
  animation-name: fadeInLeft;
}

@keyframes fadeInRight {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
  }
}

.animate__fadeInRight {
  -webkit-animation-name: fadeInRight;
  animation-name: fadeInRight;
}

@keyframes fadeOutDown {
  0% {
    opacity: 1;
  }

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

.animate__fadeOutDown {
  -webkit-animation-name: fadeOutDown;
  animation-name: fadeOutDown;
}

@keyframes fadeOutRight {
  0% {
    opacity: 1;
  }

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

.animate__fadeOutRight {
  -webkit-animation-name: fadeOutRight;
  animation-name: fadeOutRight;
}

@keyframes fadeOutUp {
  0% {
    opacity: 1;
  }

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

.animate__fadeOutUp {
  -webkit-animation-name: fadeOutUp;
  animation-name: fadeOutUp;
}

@keyframes fadeOutLeft {
  0% {
    opacity: 1;
  }

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

.animate__fadeOutLeft {
  -webkit-animation-name: fadeOutLeft;
  animation-name: fadeOutLeft;
}

/* .campaign-faq-section-main .spacing{
  padding: 50px;
} */
.campaign-input,
.campaign-select {
  height: 45px;
  border-radius: 50px;
  border: 1px solid rgba(84, 154, 156, 0.5);
  background: #fff;
  width: 90%;
  margin-bottom: 20px;
  padding-left: 20px;
  padding-right: 20px;
}

.campaign-input::placeholder {
  color: #000;
  font-family: "Raleway";
  font-size: 13px;
  font-style: normal;
  font-weight: 400;
  line-height: 149.5%;
  /* 19.435px */
}

.campaign-select-box {
  width: 160px;
}

.currency-dropdown-box {
  width: 110px;
  margin-left: auto;
  font-size: 13px;
}

.campaign-input:focus,
.campaign-select:focus {
  box-shadow: none;
  outline: none;
}

.campaign-textarea {
  width: 90%;
  height: 130px;
  border-radius: 25px;
  background: #fff;
  border: none;
  padding: 20px;
}

.campaign-textarea::placeholder {
  color: #000;
  font-family: "Raleway";
  font-size: 13px;
  font-style: normal;
  font-weight: 400;
  line-height: 149.5%;
  /* 19.435px */
}

.campaign-textarea:focus {
  outline: none;
}

.collaborator h5 {
  margin-bottom: 20px;
}

.campaign-welcm {
  display: flex;
  flex-direction: column;
  align-items: start;
  justify-content: center;
  padding-right: 100px;
  /* padding-top: 30%; */
}

.campaign-section {
  /* -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  padding-bottom: 100px;
  max-height: 100vh;
  overflow-y: auto;
  overflow-x: hidden;
  height: 100%; */
}

.add-profile-pic-section {
  text-align: center;
  display: flex;
  align-items: center;
}

.disable-clear::-webkit-search-cancel-button {
  -webkit-appearance: none;
  display: none;
}

.add-more-info-section .inner-section,
.add-past-experience-section .inner-section,
.upload-portfolio-section .inner-section,
.verify-instagram-section .inner-section,
.add-profile-pic-section .inner-section {
  /* margin: auto; */
  /* padding: 0px 10%; */
}

.add-profile-pic-section .inner-section {
  margin: auto;
}

.add-past-experience-section .inner-section .description-input {
  height: 130px;
  padding-top: 0px;
}

.add-more-info-section .inner-section .upload-button {
  position: absolute;
  top: 0px;
  right: 0px;
  color: #64abad;
  text-align: center;
  font-family: "Raleway";
  font-size: 14px;
  font-style: normal;
  font-weight: 600;
  line-height: normal;
  border-radius: 50px;
  border: 1px solid #63abad;
  background: #fff;
  cursor: pointer;
  padding: 12px 22px;
}

.add-past-experience-section .inner-section .add-more-button {
  display: flex;
  justify-content: flex-end;
  margin: 15px 10px 20px 0;
  letter-spacing: 0em;
  text-align: left;
  font-family: "Poppins";
  font-size: 14px;
  font-style: normal;
  font-weight: 700;
  text-decoration-line: underline;
  color: #65acae;
}

#complete-profile-img4-sub {
  width: 25%;
  height: auto;
  position: absolute;
  bottom: 30%;
  right: 65%;
}

.add-past-experience-section .inner-section .add-more-button:hover {
  text-decoration: underline;
  cursor: pointer;
}

.add-profile-pic-section .inner-section .link-style:hover {
  cursor: pointer;
  text-decoration: underline;
}

.add-profile-pic-section .inner-section .brand-profile-image {
  width: 250px;
  height: 250px;
  border-radius: 50%;
  /* Use 50% for a perfect circle */
  /* background-color: #efefef; */
  /* margin: 30px 50px; */
  /* position: relative; */
  display: flex;
  justify-content: center;
  align-items: center;
  object-fit: cover;
}

.add-profile-pic-section .inner-section .image-circle {
  width: 35vw;
  height: 15vw;
  /* Use 50% for a perfect circle */
  border-radius: 16px;
  border: 1px solid #fff;
  background: linear-gradient(180deg,
      rgba(167, 231, 233, 0.5) -1.08%,
      rgba(255, 255, 255, 0.5) 100%);
  margin: 40px 0px;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}

.width-33 {
  width: 33% !important;
}

.add-profile-pic-section .inner-section .image-circle img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.complete-profile-section {
  margin-bottom: 80px;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  padding-bottom: 60px;
  max-height: calc(100vh - 160px);
  overflow-y: scroll;
  overflow-x: hidden;
  /* new  css */
  height: calc(100vh - 90px);
  position: relative;
  /* border: 1px solid red; */
  margin-top: 20px;
}

.complete-profile-section::-webkit-scrollbar {
  display: none;
}

.css-o9k5xi-MuiInputBase-root-MuiOutlinedInput-root {
  background-color: white;
  border-radius: 30px !important;
}

.css-o9k5xi-MuiInputBase-root-MuiOutlinedInput-root .MuiOutlinedInput-notchedOutline {
  border: 1px solid #549a9c80 !important;
}

.campaign-section .gallery {
  display: flex;
  margin-top: 20px;
  gap: 20px;
}

.campaign-section .gallery img {
  border-radius: 50%;
  object-fit: cover;
}

.campaign-section .campaign-section {
  --bs-form-select-bg-img: none;
}

.campaign-section::-webkit-scrollbar {
  display: none;
}

.campaign-section.active-campaign:after {
  display: none;
}

/* .campaign-kind-sec-main,
.campaign-welcm,
.campaign-incentives,
.campaign-location-outer,
.add-images-campaign,
.about-campaign,
.campaign-detail {
    height: 100vh;
    width: 750px;
} */
.campaign-kind-sec-main p {
  color: #818383;
  font-family: "Raleway";
  font-size: 24px;
  font-style: normal;
  font-weight: 500;
  line-height: 40px;
  /* 166.667% */
}

.campaign-kind-sec-main h5 {
  color: #000;
  font-family: "Raleway";
  font-size: 16px;
  font-style: normal;
  font-weight: 500;
  line-height: 40px;
  /* 250% */
}

.campaign-welcm h1 {
  font-family: "Raleway";
  color: #000;
  font-size: 42px;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
  text-transform: capitalize;
}

.campaign-welcm p {
  color: #818383;
  font-family: "Raleway";
  font-size: 24px;
  font-style: normal;
  font-weight: 500;
  line-height: 30px;
  /* 166.667% */
  margin-top: 5%;
  margin-bottom: 10%;
}

.campaign-welcm .lets-go-btn,
.button-box .next-btn {
  padding: 15px 95px;
}

.campaign-faq-section-main .button-box {
  /* margin-top: 40px; */
}

.creator-category-modal-btn-box {
  width: 95%;
}

.campaign-sec-label {
  color: #616161;
  font-family: "Raleway";
  font-size: 13px;
  font-style: normal;
  font-weight: 400;
}

#campaign-img2 {
  width: 60%;
  height: auto;
}

#campaign-img3 {
  width: 80%;
  height: auto;
}

#campaign-img4 {
  width: 65%;
  height: auto;
}

#campaign-img5 {
  width: 80%;
  height: auto;
}

#campaign-img6 {
  width: 80%;
  height: auto;
}

#campaign-img7 {
  width: 80%;
  height: auto;
}

.campaign-faq-section-main .arrow-icon-outer {
  width: 100%;
  text-align: right;
}

/* .campaign-faq-section-main .arrow-icon {} */

.campaign-nav .nav-item .create-campaign-link {
  padding: 15px 30px !important;
}

.campaign-nav .nav-item {
  padding: 0px 10px;
}

.campaign-nav .nav-item a {
  font-size: 16px;
}

.campaign-incentive-outer .campaign-incentive-inner1 {
  width: 5%;
}

.campaign-incentive-outer .campaign-incentive-inner2 {
  width: 90%;
  margin-left: 20px;
  align-items: center;
}

.campaign-incentives .incentive-checkbox {
  width: 27px;
  height: 27px;
  background: #f1f8ff;
  border: 1px solid #0094e7;
  border-radius: 6px;
}

.campaign-incentives span {
  color: #000;
  font-family: Raleway;
  font-size: 18px;
  font-style: normal;
  font-weight: 500;
  line-height: 149.5%;
  /* 26.91px */
}

.campaign-incentives p {
  font-family: "Raleway";
  font-style: normal;
  font-weight: 400;
  font-size: 13px;
  color: #818383;
}

.campaign-location-outer .map-box {
  margin: 30px 0px;
}

.campaign-location-outer .location-btn {
  background: white;
  border-radius: 26px;
  padding: 14px 80px;
  border: none;
  font-size: 14px;
  color: #000;
}

.nav-tabs .nav-link.active {
  border: 1px solid #fff;
  background: linear-gradient(180deg, #a7e7e9 -1.08%, #fff 100%);
}

.campaign-location-outer .location-icon {
  position: absolute;
  left: 12px;
  top: 38px;
}

.campaign-location-outer .location-input-box {
  padding-left: 31px !important;
  padding-right: 20px;
  font-size: 14px;
}

.campaign-location-btn-outer .agree-box {
  border: 1px solid white;
  padding: 10px;
  background: white;
  border-radius: 8px;
}

.campaign-location-outer .box-ul {
  background-image: linear-gradient(180deg, #0094e7 0%, #005e93 100%);
  border-radius: 10px;
  overflow: hidden;
}

.campaign-location-outer .box-ul ul {
  height: 160px;
  padding: 10px 0;
  list-style: none;
  overflow: hidden;
  overflow-y: auto;
}

.campaign-location-outer .box-ul ul li {
  padding: 8px 0;
}

.add-images-campaign .drop_box,
.add-images-campaign .center-seprater,
.add-images-campaign .color-selector {
  margin-top: 40px;
}

.change-img {
  position: absolute;
  left: 70px;
  top: 400px;
  border: 1px solid #63abad;
}

.change-img:hover {
  background-color: white;
  cursor: pointer;
}

.add-images-campaign .color-selector-btn {
  height: 15vw;
  width: 15vw;
  border: 1px solid white;
  border-radius: 16px;
  background-color: #ff7070;
}

.add-images-campaign .drop_box .btn {
  height: 15vw;
  width: 15vw;
  border-radius: 16px;
  border: 1px solid #fff;
  background: linear-gradient(180deg,
      rgba(167, 231, 233, 0.5) -1.08%,
      rgba(255, 255, 255, 0.5) 100%);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.photo-box {
  width: 85px;
  height: 106px;
  border-radius: 50%;
  /* position:absolute; */
  top: 90px;
  left: 18px;
}

.photo-box-outer::-webkit-scrollbar-track {
  width: 2rem;
  background-color: #005af0;
}

.photo-box-outer::-webkit-scrollbar-thumb {
  width: 2px;
  background-color: red;
}

.add-images-campaign .campaign-upload-text {
  font-family: "Raleway";
  font-style: normal;
  font-weight: 500;
  font-size: 10px;
}

.add-images-campaign .add-image-col {
  gap: 30px;
}

.add-images-campaign .color-selector-btn {
  font-family: "Raleway";
  font-style: normal;
  font-weight: 500;
  font-size: 12px;
}

/* .category-img{
    position: absolute;
    top: 22px;
    left: 27px;
} */
.form-group span {
  position: absolute;
  left: 27px;
  font-size: 10px;
  top: 48px;
}

.form-group {
  display: block;
  margin-bottom: 15px;
}

.form-group input {
  padding: 0;
  height: initial;
  width: initial;
  margin-bottom: 0;
  display: none;
  cursor: pointer;
}

.form-group label {
  position: relative;
  cursor: pointer;
}

.form-group label:before {
  content: "";
  appearance: none;
  -webkit-appearance: none;
  background-color: transparent;
  border: 2px solid #0079bf;
  padding: 10px;
  display: inline-block;
  position: relative;
  vertical-align: middle;
  cursor: pointer;
  margin-right: 5px;
  width: 75px;
  height: 75px;
  background-color: #f1f8ff;
  border-radius: 16px;
  border: none;
}

.form-group input:checked+label:after {
  content: "";
  display: block;
  position: absolute;
  top: 2px;
  left: 9px;
  width: 6px;
  height: 14px;
  border: solid #0079bf;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

/*Creators page */

.browse-catalog-banner {
  padding-top: 100px !important;
}

.browse-catalog-banner .dropdown-toggle::after {
  position: absolute;
  right: 16px;
  top: 29px;
}

.browse-catalog-banner .common-button-style-outline,
.browse-catalog-banner .ban-wire-btn {
  padding: 20px 25px;
}

.catalog-btn-dropdown {
  box-shadow: 5px 7px 17px rgb(0 94 147 / 8%);
  border-radius: 30px;
  font-weight: 600;
  font-size: 18px;
  line-height: 21px;
  letter-spacing: 0.03em;
  color: #00669f;
  border: 1px solid #005e93;
  padding: 20px 35px;
  transition: 400ms;
  margin-bottom: 40px;
}

.search-bar-input-content {
  display: flex;
  flex-wrap: wrap;
  align-content: center;
  gap: 8px;
}

.catalog-btn-dropdown:focus {
  box-shadow: none;
}

.catalog-btn-dropdown:hover {
  box-shadow: 0 2px 27px rgb(0 94 147 / 52%) !important;
}

.browse-catalog-banner .dollor-icon-img {
  position: absolute;
  left: -160px;
  animation: topbottom 2s linear 0s infinite;
}

.browse-catalog-banner .ethereum-img {
  position: absolute;
  left: -130px;
  bottom: -60px;
  animation: topbottom 2s linear 0s infinite;
}

.browse-catalog-banner .yellow-ball {
  position: absolute;
  left: 50px;
  animation: banimg5 2s linear 0s infinite;
}

.browse-catalog-banner .purple-ball {
  position: absolute;
  top: 300px;
  left: -80px;
  animation: banimg5 2s linear 0s infinite;
}

.browse-catalog-banner .box-ul {
  background-image: linear-gradient(180deg, #0094e7 0%, #005e93 100%);
  border-radius: 10px;
  overflow: hidden;
}

.browse-catalog-banner .box-ul ul {
  list-style-type: none;
}

/* .deals-btn{
      background: linear-gradient(180deg, #0094E7 0%, #005E93 100%);
      color: #00669F;
  }
  .deals-btn:hover{
      box-shadow: 0 2px 27px rgb(0 94 147 / 52%) !important;
      color: #c9ecff !important;
  } */
.inner-box {
  text-align: center;
  top: 104px;
  left: 60px;
}

.inner-box img {
  width: 100%;
}

.inner-box .blue-badge {
  background-color: #42c0d1;
  color: #fff;
  line-height: 32.68px;
}

.inner-box .content-box {
  margin-top: 40px;
}

.frame-outer-box:hover {
  opacity: 100% !important;
  transition: all 0.8s;
}

.inner-box .engagement-ratio {
  color: #006ca9;
}

.inner-box p {
  font-size: 16px;
  font-weight: 500;
  margin-bottom: 0px;
  line-height: 43.68px;
}

.creators-box .bird1-left {
  position: absolute;
  top: 112px;
  left: 60;
  animation: banimg5 2s linear 0s infinite;
}

.creators-box .bird2-left {
  position: absolute;
  left: 150px;
  animation: topbottom 2s linear 0s infinite;
}

.creators-box .cloud1 {
  position: absolute;
  left: 250px;
  animation: banimg5 2s linear 0s infinite;
}

.creators-box .cloud2 {
  position: absolute;
  right: 357px;
  top: 20px;
  animation: banimg5 2s linear 0s infinite;
}

.creators-box .air-ballon {
  position: absolute;
  right: 300px;
  bottom: 30px;
  animation: topbottom 2s linear 0s infinite;
}

.creators-box .cloud-right {
  position: absolute;
  right: 210px;
  top: 22px;
  animation: banimg5 2s linear 0s infinite;
}

.creators-box .bird-right {
  position: absolute;
  right: 240px;
  bottom: 10px;
  top: 90px;
  animation: topbottom 2s linear 0s infinite;
}

.selectedCatalogueIcon {
  border-radius: 50%;
  border: 1px solid #549a9c;
  background: #549a9c;
  padding: 0.6vw;
  width: 40px;
  height: 40px;
  overflow: visible;
}

.catalogueIcon {
  border-radius: 50%;
  border: 1px solid #549a9c;
  padding: 0.6vw;
  width: 40px;
  height: 40px;
  overflow: visible;
}

.resethover {
  transition: transform 0.3s ease-in-out;
  /* Adds smooth easing */
}

.resethover:hover {
  transform: rotate(-50deg);
  /* Rotates the element 22 degrees anticlockwise */
}

.creatorCatalogueSearch {
  width: 40%;
  border-radius: 50px;
  border: 1px solid rgba(84, 154, 156, 0.5);
  display: flex;
  height: 6vh;
}

table {
  background: #549a9c;
  margin-bottom: 20px;
}

.bg-table-stripe {
  background-color: #eaf9fa !important;
}

table thead th span {
  color: #fff;
  text-align: center;
  font-family: "Raleway";
  font-size: 20px;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
}

profile-outer-box div span {
  color: #282828;
  font-family: "Raleway";
  font-size: 20px;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
}

.text-capatilize {
  text-transform: capitalize;
}

.creator_content .content-sec-dolloricon {
  position: absolute;
  top: 140px;
  right: -200px;
  animation: topbottom 2s linear 0s infinite;
}

.creator_content .content-sec-purpleball {
  position: absolute;
  right: -220px;
  bottom: -25px;
  animation: banimg5 2s linear 0s infinite;
}

.creator_content .content-sec-yellowball {
  position: absolute;
  right: -230px;
  top: 300px;
  animation: banimg5 2s linear 0s infinite;
}

.creator_content .content-sec-bitcoin-img {
  position: absolute;
  right: -140px;
  bottom: 80px;
  animation: banimg5 2s linear 0s infinite;
}

.browse-catalog-banner .dropdown .box-ul {
  position: absolute;
  top: 100%;
  left: 0;
  margin-top: 4px;
  z-index: 3;
  text-align: left;
}

.browse-catalog-banner .dropdown .box-ul ul {
  height: 153px;
  padding: 10px 0;
  list-style: none;
  overflow: hidden;
  overflow-y: auto;
}

.browse-catalog-banner .dropdown .box-ul ul li a {
  text-decoration: none;
}

.browse-catalog-banner .dropdown ul::-webkit-scrollbar {
  width: 5px;
  padding: 10px;
  margin-right: 50px;
}

.browse-catalog-banner .dropdown ul::-webkit-scrollbar-track {
  background: #def3ff40;
  border-radius: 10px;
}

.browse-catalog-banner .dropdown ul::-webkit-scrollbar-thumb {
  background: #c6ebff;
  border-radius: 10px;
}

/***Range Slider**/
.range-slider {
  width: 230px;
  top: 110px;
  left: -70px;
  position: relative;
  transform: rotate(-90deg);
  display: inline-block;
}

#range {
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
}

#range:focus {
  outline: none;
}

#range::-webkit-slider-runnable-track {
  width: 100%;
  height: 1rem;
  cursor: pointer;
  animate: 0.2s;
  background: linear-gradient(90deg,
      #005e93 var(--range-progress),
      #dee4ec var(--range-progress));
  border-radius: 1rem;
}

#range::-webkit-slider-thumb {
  -webkit-appearance: none;
  border: 0.25rem solid #005e93;
  box-shadow: 0 1px 3px rgba(0, 0, 255, 0.3);
  border-radius: 50%;
  background: #fff;
  cursor: pointer;
  height: 32px;
  width: 32px;
  transform: translateY(calc(-50% + 8px));
}

#tooltip {
  position: absolute;
  top: -2.25rem;
}

#tooltip span {
  position: absolute;
  text-align: center;
  display: block;
  line-height: 1;
  color: #000;
  font-size: 1rem;
  top: 80px;
  transform: translate(-50%, 0) rotate(90deg);
  -webkit-transform: translate(-50%, 0) rotate(90deg);
}

.campaign-location-outer .box-ul ul::-webkit-slider-runnable-track {
  width: 100%;
  height: 1rem;
  cursor: pointer;
  animate: 0.2s;
  background: linear-gradient(90deg,
      #005e93 var(--range-progress),
      #dee4ec var(--range-progress));
  border-radius: 1rem;
}

.campaign-location-outer .box-ul ul::-webkit-slider-thumb {
  -webkit-appearance: none;
  border: 0.25rem solid #005e93;
  box-shadow: 0 1px 3px rgba(0, 0, 255, 0.3);
  border-radius: 50%;
  background: #fff;
  cursor: pointer;
  height: 32px;
  width: 32px;
  transform: translateY(calc(-50% + 8px));
}

/* creators-header */

/* .creator-header-main{
  height: 80px;
  border-bottom:1px solid #eee;
} */
.creators-header-main {
  border-bottom: 1px solid #eee;
}

.creators-header-main .main-board {
  padding: 20px;
}

/* .creators-header-main .category-img-box-inner{
    background-image: url("{{url('assets/images/Magzine.png");
    height: 250px;
    background-position: center;
    background-size: cover;
    border-radius: 10px;
} */

.creators-header-main .category-img-box-inner .new-box {
  top: 10px;
  left: 20px;
  background-color: #fff;
  width: 50px;
  border-radius: 8px;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 30px;
}

.creators-header-main .category-img-box-inner .new-box p {
  margin-bottom: 0px;
}

.creators-header-main .top-right-tabs p {
  margin-bottom: 0px;
}

.center-board-main .category-box .new-box {
  top: 20px;
  left: 20px;
  background-color: #fff;
  border-radius: 20px;
  padding: 5px 10px;
}

.center-board-main .category-box .new-box p {
  font-size: 14px;
  margin-bottom: 0px;
}

.center-board-main .category-box .category-img {
  height: 400px;
  width: 100%;
  border-radius: 30px;
  object-fit: cover;
}

.filter-categories {
  align-items: flex-end;
}

.top-header-filter-box {
  height: 100px;
}

.filter-search-box {
  position: relative;
  height: 45px;
}

.filter-search-box .search-icon {
  width: 40px;
  position: relative;
  top: 35px;
  left: 10px;
  z-index: 2;
}

.filter-categories .dropdown .dropdown-toggle {
  background-color: #fff;
  color: #000;
  margin-right: 15px;
  border: 1px solid #ddd;
  font-size: 14px;
}

.filter-search-box-input {
  position: relative;
  padding: 4px 11px 4px 35px;
  font-size: 14px;
  line-height: 1.5714285714285714;
  height: 40px;
  display: flex;
  align-items: center;
  border-radius: 8px;
  border: 1px solid #ddd;
  height: 100%;
}

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

.filter-dropdown-btn {
  border: 1px solid #eee;
}

.dropdown-heading {
  font-size: 14px;
}

.filter-categories .dropdown li {
  padding: 5px 0px;
}

.filter-categories .dropdown .dropdown-item {
  font-size: 12px;
}

/* .card-info{
  box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
  padding: 20px;
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
} */
.card-info p {
  margin: 0;
}

.card-meta ul li {
  display: inline-block;
  padding-right: 30px;
  font-size: 15px;
  list-style: none;
  position: relative;
}

.card-meta ul {
  padding-left: 0;
}

.card-meta ul .post-author::after {
  content: "";
  height: 6px;
  width: 6px;
  background-color: #03a9f4;
  position: absolute;
  top: 50%;
  right: 6%;
  border-radius: 50%;
  transform: translateY(-50%);
}

.card-meta .post-date a {
  color: #777;
}

.card-meta .post-author a {
  color: #03a9f4;
  padding-left: 5px;
}

.card-description h3 {
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 16px;
}

.card-description p {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: #52525e;
  font-size: 14px;
}

.card-info a {
  text-decoration: none;
}

.price-tag {
  gap: 10px;
}

.commission-tag {
  border: 1px solid #000;
  border-radius: 3px;
  font-weight: 700;
  font-size: 12px;
  line-height: 20px;
  text-transform: uppercase;
  padding: 0 4px;
}

/* .category-img-box-inner::before {
    right: 0;
    opacity: 0.7;
    top: 0;
}
.category-img-box-inner::after {
    bottom: 0;
    opacity: 0.7;
    left: 0;
}
.category-img-box-inner::before,
.category-img-box-inner::after {
    content: "";
    background: #fff;
    height: 0;
    width: 0;
    z-index: 1;
    position: absolute;
    -webkit-transition-duration: 1.3s !important;
    -o-transition-duration: 1.3s;
    transition-duration: 1.3s !important;
}
.category-img-box-inner:hover::after,
.category-img-box-inner:hover::before {
    height: 100%;
    opacity: 0;
    width: 100%;
} */
.dropdown-toggle::after {
  display: none;
}

.profile-box .dropdown-menu {
  padding: 0px;
  display: block;
  visibility: hidden;
  opacity: 0;
  transform: translateY(20px);
  transition: all 0.3s ease-in;
  right: 0;
  font-size: 0.875rem;
  line-height: 22px;
  border: none;
  box-shadow: 0 10px 30px 0 rgba(31, 45, 61, 0.1);
  border-radius: 0.5rem;
  min-width: 250px;
}

.profile-box .dropdown-menu .top-email-box {
  border-bottom: 1px solid #eee;
}

.profile-box .dropdown-menu .top-email-box .person-email {
  font-size: 12px;
}

.profile-box .dropdown-menu ul li {
  border-bottom: 1px solid #eee;
}

.profile-box .dropdown-menu ul li:hover {
  background-color: #eee;
}

.profile-box .dropdown-menu .sign-out-btn {
  width: 18%;
}

.profile-box .dropdown:hover>.dropdown-menu {
  transform: scaleY(1);
  opacity: 1;
  visibility: visible;
}

.profile-inner-heading .person-name {
  font-size: 16px;
}

.profile-box .meta-brand-tag .icon-box {
  border: 1px solid #000;
  border-radius: 100%;
  height: 40px;
  width: 40px;
  text-align: center;
  align-items: center;
  justify-content: center;
  font-size: 20px;
}

.profile-box .avatar {
  height: 35px;
  width: 35px;
  margin-right: 10px;
}

.profile-box .sign-out-box-outer {
  width: 100%;
  text-align: center;
}

.profile-box .avatar img {
  border-radius: 50%;
}

.category-box {
  box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
  border-radius: 10px;
}

.category-box :hover .category-description-box {
  opacity: 1;
  cursor: pointer;
}

.desc-box-outer .img {
  height: 20px;
  width: 20px;
  border-radius: 50%;
}

.desc-box-outer .desc-box1 {
  width: 40%;
}

/* .category-description-box{
    position: absolute;
    opacity: 0;
    bottom: 10px;
    -webkit-backface-visibility: hidden; 
    -webkit-transition: all 0.4s ease-in-out;
    -moz-transition: all 0.4s ease-in-out;
    transition: all 0.4s ease-in-out;
    -webkit-transform: translateY(-10%);
    -ms-transform: translateY(-10%);
    transform: translateY(-10%);
} */
.hover-container {
  background-color: #272829;
  width: 100%;
  height: 400px;
  position: relative;
  /* 1 */
  overflow: hidden;
  border-radius: 30px;

  &+& {
    margin-left: 10px;
  }
}

.hidden-text {
  width: 100%;
  font-size: 16px;
  color: #fff;
  position: absolute;
  border-radius: 30px;
  bottom: 40%;
  opacity: 0;
  z-index: 999;
  -webkit-backface-visibility: hidden;
  -webkit-transition: all 0.4s ease-in-out;
  -moz-transition: all 0.4s ease-in-out;
  transition: all 0.4s ease-in-out;
  -webkit-transform: translateY(-10%);
  -ms-transform: translateY(-10%);
  transform: translateY(-10%);
}

.hover-container:hover>.hidden-text {
  bottom: 0px;
  opacity: 1;
  cursor: pointer;
}

.darkened-image {
  height: 100%;
  position: relative;
  z-index: 99;
  width: 100%;
  -webkit-backface-visibility: hidden;
  -webkit-transition: opacity 0.3s ease-in-out;
  -moz-transition: opacity 0.3s ease-in-out;
  transition: opacity 0.3s ease-in-out;
}

.hover-container:hover>.darkened-image {
  opacity: 0.2;
}

.brand-tag ul,
a {
  padding-left: 0;
  text-decoration: none;
  color: #52525e;
}

.brand-text .post-author {
  font-weight: 600;
  line-height: 28px;
  font-size: 16px;
  color: #000;
}

.brand-text .post-date {
  line-height: 0;
  font-size: 14px;
}

.category-row {
  padding: 0px 40px;
}

.category-bottom-btn {
  font-size: 13px;
  border-radius: 20px;
  border: none;
}

.social-icon {
  display: grid;
  background-color: #fff;
  padding: 5px 8px;
  top: 10px;
  right: 10px;
  border-radius: 17px;
  z-index: 9999;
}

.brand-image {
  gap: 8px;
}

/* notification */
.notification {
  position: relative;
  display: inline-block;
}

.notBtn {
  transition: 0.5s;
  cursor: pointer;
}

.box {
  width: 400px;
  height: 0px;
  border-radius: 10px;
  transition: 0.5s;
  position: absolute;
  overflow-y: scroll;
  padding: 0px;
  left: -300px;
  margin-top: 5px;
  background-color: #f4f4f4;
  -webkit-box-shadow: 10px 10px 23px 0px rgba(0, 0, 0, 0.2);
  -moz-box-shadow: 10px 10px 23px 0px rgba(0, 0, 0, 0.1);
  box-shadow: 10px 10px 23px 0px rgba(0, 0, 0, 0.1);
  cursor: context-menu;
  z-index: 1;
}

.box::-webkit-scrollbar {
  display: none;
}

/* .fas:hover {
  color: #d63031;
} */
.notBtn:hover>.box {
  height: 60vh;
}

.content {
  padding: 20px;
  color: black;
  vertical-align: middle;
  text-align: left;
}

.gry {
  background-color: #f4f4f4;
}

.top {
  color: black;
  padding: 10px;
}

.display {
  position: relative;
}

.cont {
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: #f4f4f4;
}

.cont:empty {
  display: none;
}

.cent {
  text-align: center;
  display: block;
}

.sec {
  padding: 25px 10px;
  background-color: #f4f4f4;
  transition: 0.5s;
}

.profCont {
  padding-left: 15px;
}

.profile {
  -webkit-clippath: circle(50% at 50% 50%);
  clippath: circle(50% at 50% 50%);
  width: 75px;
  float: left;
}

.txt {
  vertical-align: top;
  font-size: 1.25rem;
  padding: 5px 10px 0px 115px;
}

.sub {
  font-size: 1rem;
  color: grey;
}

.new {
  border-style: none none solid none;
  border-color: red;
}

.sec:hover {
  background-color: #bfbfbf;
}

/* creator-catalogue */
.category-box {
  position: relative;
  z-index: 1;
}

.category-box .meta-brand-tag {
  width: 100%;
}

.category-box .meta-brand-tag a {
  width: 100%;
  display: flex;
  gap: 10px;
}

.category-box .meta-brand-tag a:hover {
  color: #000;
}

.category-box .brand-image-box {
  width: 40px;
  border: 1px solid #000;
  border-radius: 50%;
  display: flex;
  height: 40px;
  justify-content: center;
  align-items: center;
}

.category-box .meta-brand-tag .brand-category-name {
  font-size: 16px;
  font-weight: 500;
  line-height: 20px;
}

.category-box .meta-brand-tag .brand-category-date {
  font-size: 12px;
  line-height: 20px;
}

/* creators-filter-modal-css */
.filter-location-dialog-box {
  top: 30%;
  max-width: 600px;
}

.filter-location-dialog-box .modal-header {
  padding: 24px 40px;
}

.filter-location-dialog-box .modal-content {
  border-radius: 12px;
}

.filter-location-dialog-box .modal-body {
  padding: 50px 20px;
}

/* .location-form-input{
  height: 60px;
  border-radius: 30px;
  padding-left: 30px;
} */
.location-form-input:focus {
  box-shadow: none;
  border: 1px solid #dee2e6;
}

.location-main {
  position: relative;
  height: 45px;
}

.location-main .location-icon {
  width: 40px;
  position: relative;
  top: 50px;
  left: 10px;
  z-index: 2;
}

.location-form-input {
  border-radius: 8px;
  border: 1px solid #ddd;
  height: 100%;
  padding: 4px 11px 4px 35px;
}

/* brand-listing-table */
.search-bar-input-container {
  display: flex;
  /* width: calc(100% - 120px); */
  gap: 20px;
  width: 83%;
}

.creator-bar-container {
  width: 100% !important;
}

.change-view-catalogue-main {
  width: 112px;
  display: flex;
  gap: 10px;
}

.change-view-catalogue {
  padding: 10px;
  background: #f1f8ff;
  width: 100%;
  text-align: center;
  border-radius: 50%;
}

.active-button {
  border: 3px solid #0094e7;
}

.change-view-catalogue:hover {
  cursor: pointer;
}

.change-view-catalogue svg {
  color: #fff !important;
}

.search-bar-input-search {
  width: 40%;
}

.campaign-search-input {
  width: 35%;
}

.campaign-other-filters {
  width: 65%;
}

.creator-left-box {
  width: 20% !important;
}

.creator-right-box {
  width: 80% !important;
}

.ant-select-selection-search-input,
.pac-target-input {
  color: #616161;
  font-size: 15px;
  /* width: 100%; */
  padding: 10px 12px;
  border: 1px solid rgba(84, 154, 156, 0.5);
  height: 50px;
  border-radius: 25px;
  /* background-color: #f1f8ff; */
}

.complete-profile-input-portfolio {
  color: #616161;
  font-size: 15px;
  width: 97%;
  padding: 10px 12px;
  border: none;
  border-radius: 50px;
  margin-top: 15px;
  border: 1px solid rgba(84, 154, 156, 0.5);
}

.outerbox-select-attachment {
  width: 45vw;
  height: 16vw;
  border-radius: 16px;
  border: 1px solid #fff;
  background: linear-gradient(180deg,
      rgba(167, 231, 233, 0.5) -1.08%,
      rgba(255, 255, 255, 0.5) 100%);
}

.location-search__icon {
  /* position: absolute; */
  left: 10px;
}

.anticon-search {
  position: absolute;
  right: 25px;
}

.ant-select-selection-search-input:focus,
.pac-target-input:focus {
  outline: none;
}

.ant-select-auto-complete {
  width: 100%;
}

.location-search {
  width: 58%;
  border-radius: 50px;
  border: 1px solid rgba(84, 154, 156, 0.5);
  margin-left: 10px;
}

.creator-filter-box {
  width: 70% !important;
}

.filter-btn {
  background-color: #fff;
  color: #000;
  padding: 0px 30px;
  height: 50px;
  border-radius: 36px;
  font-size: 14px;
}

.filter-btn:hover {
  background: linear-gradient(180deg, #0094e7 0%, #005e93 100%);
  border: none;
}

/* toggle-switch */

input[switch] {
  display: none;
}

input[switch]+label {
  font-size: 1em;
  line-height: 1;
  width: 4.7rem;
  height: 1.5rem;
  background-color: #ddd;
  background-image: none;
  border-radius: 2rem;
  padding: 0.1666666667rem;
  cursor: pointer;
  display: inline-block;
  text-align: center;
  position: relative;
  box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.2) inset;
  font-family: inherit;
  -webkit-transition: all 0.1s ease-in-out;
  transition: all 0.1s ease-in-out;
}

input[switch]+label:before {
  /* Label */
  text-transform: uppercase;
  color: #b7b7b7;
  content: attr(data-off-label);
  display: block;
  font-family: inherit;
  font-family: FontAwesome, inherit;
  font-weight: 500;
  font-size: 0.6rem;
  line-height: 1.22rem;
  position: absolute;
  right: 0.2166666667rem;
  margin: 0.2166666667rem;
  top: 0;
  text-align: center;
  min-width: 1.6666666667rem;
  overflow: hidden;
  -webkit-transition: all 0.1s ease-in-out;
  transition: all 0.1s ease-in-out;
}

input[switch]+label:after {
  /* Slider */
  content: "";
  position: absolute;
  left: 0.1666666667rem;
  background-color: #f7f7f7;
  box-shadow: none;
  border-radius: 2rem;
  height: 1.22rem;
  width: 1.22rem;
  -webkit-transition: all 0.1s ease-in-out;
  transition: all 0.1s ease-in-out;
}

input[switch]:checked+label {
  background-color: lightblue;
  background-image: -webkit-gradient(linear,
      left top,
      left bottom,
      from(rgba(255, 255, 255, 0.15)),
      to(rgba(0, 0, 0, 0.2)));
  background-image: linear-gradient(rgba(255, 255, 255, 0.15),
      rgba(0, 0, 0, 0.2));
  box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.3) inset;
}

input[switch]:checked+label:before {
  color: #fff;
  content: attr(data-on-label);
  right: auto;
  left: 0.2166666667rem;
}

input[switch]:checked+label:after {
  left: 3.22rem;
  background-color: #f7f7f7;
  box-shadow: 1px 1px 10px 0 rgba(0, 0, 0, 0.3);
}

input[switch="bool"]+label {
  background-color: #ee6562;
}

input[switch="bool"]+label:before {
  color: #fff !important;
}

input[switch="bool"]:checked+label {
  background-color: #bce954;
}

input[switch="bool"]:checked+label:before {
  color: #fff !important;
}

input[switch="default"]:checked+label {
  background-color: #a2a2a2;
}

input[switch="default"]:checked+label:before {
  color: #fff !important;
}

input[switch="success"]:checked+label {
  background-color: #bce954;
}

input[switch="success"]:checked+label:before {
  color: #fff !important;
}

input[switch="warning"]:checked+label {
  background-color: gold;
}

input[switch="warning"]:checked+label:before {
  color: #fff !important;
}

.table-head-style {
  display: flex;
  flex-wrap: nowrap;
}

.brand-categories-outer-main .dropdown .dropdown-toggle {
  background-color: #fff;
  color: #000;
  margin-right: 15px;
  border: 1px solid #ddd;
  font-size: 14px;
}

.brand-categories-outer-main .dropdown .dropdown-toggle:focus {
  box-shadow: none;
}

#brand-detail-listing-table_wrapper {
  border-radius: 30px;
  background-color: #fff;
}

.brand-listing-table div.dataTables_wrapper div.dataTables_paginate ul.pagination {
  margin: 20px 20px 20px -55px !important;
}

.brand-listing-table .active>.page-link,
.page-link.active {
  border-radius: 50%;
  padding: 5px 14px;
  box-shadow: none;
  background: linear-gradient(180deg, #0094e7 0%, #005e93 100%);
}

.brand-categories-outer-main div.dataTables_wrapper div.dataTables_paginate ul.pagination {
  margin: 2px 0 0px -55px;
}

div.dataTables_wrapper div.dataTables_paginate ul.pagination {
  justify-content: start !important;
}

.brand-listing-table {
  /* margin-top: 20px; */
  border-radius: 20px;
}

.brand-listing-table .page-link {
  border: none;
}

.brand-listing-table table.dataTable thead>tr>th.sorting:before,
.brand-listing-table table.dataTable thead>tr>th.sorting:after,
.brand-listing-table #example_filter {
  display: none;
}

.brand-listing-table div.dataTables_wrapper div.dataTables_filter {
  display: none;
}

.brand-listing-table table.dataTable.table-striped>tbody>tr.odd>* {
  box-shadow: none;
}

.brand-listing-table table {
  width: 100%;
}

.brand-listing-table tr th {
  font-weight: 500;
  font-size: 12px;
}

.brand-listing-table tr th:nth-child(1) {
  padding-left: 27px;
}

#brand-detail-listing-table {
  margin-top: 0px !important;
}

.brand-listing-table tr th {
  font-size: 16px;
  letter-spacing: 0.04em;
  padding: 20px 10px 20px 10px !important;
}

.brand-listing-table tr td {
  padding: 10px !important;
}

.brand-listing-table tr td {
  font-size: 14px;
}

.brand-listing-table table tr th:nth-child(1) {
  width: 20%;
  padding-left: 27px !important;
}

.brand-listing-table table tr th:nth-child(2) {
  width: 10%;
}

.brand-listing-table table tr th:nth-child(3) {
  width: 10%;
}

.brand-listing-table table tr th:nth-child(4) {
  width: 10%;
}

.brand-listing-table table tr th:nth-child(5) {
  width: 20%;
}

.brand-listing-table table tr th:nth-child(6) {
  width: 30%;
}

.brand-listing-table .table.dataTable>tbody>tr:hover {
  background-color: #549a9c !important;
  cursor: pointer;
}

.profile-outer-box {
  align-items: center;
  gap: 30px;
  /* margin-left: 12px; */
}

.profile-inner1 {
  width: 20%;
}

.profile-inner2 {
  width: 70%;
}

.brand-listing-table .person-image {
  border-radius: 50%;
  object-fit: cover;
}

.brand-listing-table .person-image {
  display: inline-block;
  width: 50px;
  height: 50px;
  border-radius: 50%;
}

.brand-listing-table table .person-name-dark {
  display: inline-block;
  font-size: 14px;
  color: #000;
  font-weight: 400;
  max-width: 350px;
}

.brand-listing-table table .person-name-light {
  font-size: 14px;
}

.brand-listing-table table tr td {
  line-height: 20px;
}

.table-status-btn {
  width: 180px;
  height: 37px;
  border-radius: 11px;
  border: none;
  font-family: Raleway;
  font-size: 14px;
  text-align: center;
}

.status-complete {
  display: flex;
  align-items: center;
  color: #03a900;
  background: #00bc130a;
}

.status-complete:hover {
  background: white !important;
}

.status-complete.status-complete-not-hover:hover {
  background: #00bc130a !important;
  /* giữ nguyên màu gốc */
}

.dot-active {
  width: 8px !important;
  height: 8px !important;
  border-radius: 50px;
  /* background-color: #005e93; */
  background: #03a900;
}

.dot-in-active {
  width: 8px !important;
  height: 8px !important;
  border-radius: 50px;
  /* background-color: #005e93; */
  background: #bb0000;
}

.dot-draft {
  width: 8px !important;
  height: 8px !important;
  border-radius: 50px;
  /* background-color: #005e93; */
  background-color: gray;
}

.active-status-tag {
  width: 101px;
  height: 37px;
  border-radius: 11px;
  /* background: #49ec6f; */
  background: #00bc130a;
  color: #03a900;
}

.inactive-status-tag {
  width: 130px;
  height: 37px;
  border-radius: 11px;
  /* background: #eeeeee; */
  background: #ff00000a;
  color: #bb0000;
}

.draft-status-tag {
  width: 101px;
  height: 37px;
  border-radius: 11px;
  background: #bfc5c5;
  color: gray;
}

.icon-size-insta {
  width: 20px !important;
  margin: 0 5px 5px 0;
}

.status-rejected {
  display: flex;
  align-items: center;
  background: #ff00000a;
  color: #bb0000;
}

.status-rejected:hover {
  background: white;
}

.status-rejected.status-rejected-not-hover:hover {
  background: #ff00000a;
  /* giữ nguyên màu gốc */
}

.status-ongoing {
  display: flex;
  align-items: center;
  background: #f1f8ff;
  color: #005e93;
}

.status-ongoing:hover {
  background: white;
}

.status-ongoing.status-ongoing-not-hover:hover {
  background: #f1f8ff;
  /* Giữ nguyên màu gốc */
}

.row-hover:hover {
  background-color: #f1f8ff !important;
}


.dot-complete {
  width: 8px !important;
  height: 8px !important;
  border-radius: 50px;
  background-color: #03a900;
}

.dot-rejected {
  width: 8px !important;
  height: 8px !important;
  border-radius: 50px;
  background-color: #bb0000;
}

.dot-ongoing {
  width: 8px !important;
  height: 8px !important;
  border-radius: 50px;
  background-color: #005e93;
}

.table-request-btn {
  border: none;
  /* background: green; */
  font-family: Raleway;
  font-size: 13px;
  font-weight: 700;
  line-height: 19px;
  letter-spacing: 0em;
  text-align: center;
  width: 130px;
  height: 39px;
  border-radius: 19.5px;
  margin: 0 5px;
}

.btn-accept {
  background-color: #5abb71;
  color: white;
}

.btn-accept:hover {
  background-color: #5abb71;
  color: black;
}

.btn-deny {
  background-color: #fe0201;
  color: white;
}

.btn-deny:hover {
  background-color: #fe0201;
  color: black;
}

.btn-view {
  background-color: #0094e7;
  color: white;
}

.btn-view:hover {
  background-color: #0094e7;
  color: black;
}

#brand-detail-listing-table .table-category-btn {
  border-radius: 50px;
  border: 1px solid rgba(84, 154, 156, 0.5);
  background: #fff;
  color: #282828;
  text-align: center;
  font-family: "Raleway";
  font-size: 12px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  width: 100%;
  height: 39px;
}

#brand-detail-listing-table .table-category-btn-sm {
  background: #f1f8ff;
  font-size: 16px;
  width: 39px;
  height: 39px;
  border-radius: 19.5px;
  text-align: center;
  line-height: 19px;
  letter-spacing: 0em;
  align-items: center;
  display: flex;
  justify-content: center;
}

.creator-tile {
  border-radius: 40px;
  border: 1px solid rgba(84, 154, 156, 0.5);
  background: white;
  height: 36vh;
  width: 30%;
  justify-content: center;
}

.creator-tile .empty-top-space {
  border-radius: 40px 40px 0px 0px;
  background: linear-gradient(0deg, #549a9c 0.05%, #65acae 99.96%);
  height: 10vh;
}

.creator-tile .creator-image {
  display: block;
  background: white;
  border: 1px solid rgba(84, 154, 156, 0.5);
  object-fit: cover;
  width: 6vw;
  border-radius: 50%;
  margin-left: auto;
  margin-right: auto;
  margin-top: -5vh;
}

.creator-tile .creators-name {
  color: #282828;
  text-align: center;
  font-family: "Raleway";
  font-size: 20px;
  font-style: normal;
  font-weight: 600;
  line-height: normal;
  width: 100%;
  display: block;
  margin-top: 1vh;
  margin-bottom: 1vh;
}

.creator-inside-info {
  width: 100%;
}

.creator-inside-info tr {
  width: 100%;
}

.creator-inside-info td {
  color: #545454;
  font-family: "Raleway";
  font-size: 12px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  padding: 2% 6%;
}

.creator-inside-info td span {
  color: #282828;
  font-family: "Raleway";
  font-size: 14px;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
  padding: 1% 0px;
}

.link-design {
  font-family: Power Grotesk;
  text-decoration: underline;
  color: #005e93;
  font-size: 24px;
  font-weight: 400;
  line-height: 29px;
  letter-spacing: 0em;
  text-align: center;
  cursor: pointer;
}

#brand-detail-listing-table_paginate .page-item:first-child .page-link {
  border-top-left-radius: 0px !important;
  border-bottom-left-radius: 0px !important;
  margin-right: 10px;
}

#brand-detail-listing-table_paginate .page-item:first-child .page-link:focus {
  box-shadow: none !important;
}

#brand-detail-listing-table_paginate .page-item:last-child .page-link {
  border-top-left-radius: 0px !important;
  border-bottom-left-radius: 0px !important;
  margin-left: 10px;
}

#brand-detail-listing-table_paginate .page-item:last-child .page-link:focus {
  box-shadow: none !important;
  background: none !important;
}

.brand-listing-table .pagination .previous .page-link {
  font-size: 0px;
}

.brand-listing-table .pagination .previous .page-link::before {
  content: "";
  background-image: url("../images/arrow-left.png");
  font-size: 20px;
  font-weight: 700;
  position: absolute;
  height: 100%;
  width: 100%;
  /* left: 8px; */
  right: 10px;
  top: 0px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: 12px;
  border: 1px solid #ddd;
  padding: 18px;
  border-radius: 50%;
}

.brand-listing-table .pagination .next .page-link {
  font-size: 0px;
}

.page-link.disabled,
.disabled>.page-link {
  background-color: transparent !important;
}

.brand-listing-table .pagination .next .page-link::after {
  content: "";
  background-image: url("../images/arrow-right.png");
  font-size: 20px;
  color: #000;
  font-weight: 700;
  position: absolute;
  height: 100%;
  width: 100%;
  /* left: -8px; */
  left: 20px;
  top: 0px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: 12px;
  border: 1px solid #ddd;
  padding: 18px;
  border-radius: 50%;
}

/* .user-profile-settings-box-outer,
.help-center-heading-box {
    background: linear-gradient(180deg, #0094e7 0%, #005e93 100%);
    color: #fff;
    padding: 10px;
    border-bottom: 1px solid #ddd;
} */
/* .settings-top-box {
    background: linear-gradient(180deg, #0094e7 0%, #005e93 100%);
    color: #fff;
} */
.user-profile-settings-box-outer h3,
.help-center-heading-box h3 {
  font-size: 20px;
  margin-bottom: 0px;
}

.help-center-container .help-center-search-box-outer h1 {
  font-size: 30px;
  line-height: 20px;
  margin-bottom: 40px;
}

.help-center-inner-box {
  padding: 20px 20px 100px 20px;
}

.help-center-inner-box .main .nav {
  width: 565px;
  margin: 0 auto;
  max-height: 35vh;
  background-color: #fff;
  position: relative;
  overflow-y: scroll;
  z-index: 2;
}

.help-center-inner-box .main .nav::-webkit-scrollbar {
  display: none;
}

.help-center-inner-box .main .nav li {
  width: 100%;
  padding: 20px 40px;
  border-bottom: 1px solid #eee;
}

.home {
  
  /* old UI */
  /* background: linear-gradient(rgba(167, 231, 233, 0.5) 0.01%,
      rgba(255, 255, 255, 0.5) 101.76%);

  background-image: linear-gradient(to bottom right, #5F9EA0, #E0FFFF, #fff); */
  /* end old UI */


  /* background: url(blue-green-background-with-white-circle-middle.jpg), linear-gradient(0deg, #F7F7F7, #F7F7F7), #FFFFFF; */

  min-height: 100vh;
}

 .home::before {
    background-color: #F7F7F7;
    content: "";
    position: absolute;
    inset: 0;
    background: url('/images/blue-green-background-with-white-circle-middle.jpg') no-repeat center top;
    background-size: cover;
    opacity: 0.1;
    z-index: 0;
    pointer-events: none;
    
    /* min-height: 200vh; */
    filter: blur(10px);
  }
  .home.notBefore::before {
    background-color: transparent !important;
   }

.home main {
  /* background-image: linear-gradient(to bottom right, #5F9EA0, #E0FFFF, #fff); */
}

.home .navbar {
  /* old UI */
  /* background: linear-gradient(rgba(167, 231, 233, 0.5) 0.01%,
      rgba(255, 255, 255, 0.5) 101.76%); */

  /* new UI */
  background: #fff;
}

.help-center-inner-box .main .nav .faq-ques {
  color: #000;
  font-weight: 600;
}

.help-center-inner-box .main .nav .faq-ans {
  font-size: 14px;
  padding-top: 10px;
}

.help-center-row {
  max-width: 1110px;
  margin: 0 auto;
}

.help-center-container .help-center-heading {
  width: 100%;
  text-align: center;
}

@media (max-width: 640px) {
  /* new mobile */
  .help-center-container .help-center-heading h1 {
    font-family: 'Suisse Int\'l', sans-serif;
    font-style: normal;
    font-weight: 500;
    font-size: 24px;
    line-height: 140%;
    color: #040404;
  }
}

.help-center-container .help-center-card-box {
  width: 100%;
  padding: 35px 20px;
  background: #fff;
  color: #000;
  border-radius: 10px;
  box-shadow: 3px 0 10px rgb(0 0 0 / 3%);
  width: 560px;
  border-radius: 43px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.help-center-container .help-center-card-icon {
  width: 150px;
  text-align: center;
}

.help-center-container .help-center-content-box {
  width: 80%;
}

.help-center-container .help-center-card-box:hover {
  /* background: linear-gradient(180deg, #0094e7 0%, #005e93 100%); */
  background: linear-gradient(263.11deg, #549a9c 5.13%, #65acae 86.84%);
  color: #fff;
  cursor: pointer;
  box-shadow: 3px 0 10px rgb(0 0 0 / 12%);
}

/* desktop style */
.help-center-container .help-center-search-box {
  height: 50px;
  width: 565px;
  border-radius: 25px;
  margin: 0 auto;
  border: none;
  padding: 0px 30px 0px 45px; /* thêm padding-left để chừa chỗ cho icon */
  box-shadow: 3px 0 10px rgb(0 0 0 / 5%);
}

/* mobile */
@media (max-width: 640px) {
  .help-center-container .help-center-search-box {
    width: 343px;
    height: 48px;
    border-radius: 12px;
    padding-left: 40px; /* vẫn chừa icon */
    background: #FFFFFF;
  }
}



.help-center-container .rounded:focus {
  box-shadow: none;
}

.help-center-container .help-center-card-box .help-center-content-box h3 {
  font-size: 24px;
  font-weight: 600;
}

.help-center-container .help-center-card-box .help-center-content-box p {
  font-size: 14px;
  line-height: 22px;
  font-family: "Raleway";
  font-style: normal;
  font-weight: 400;
}

.profile-page-container,
.help-center-container {
  margin-top: 110px !important;
}

.user-profile-dashboard {
  padding: 50px auto 10px auto;
  max-width: 1040px;
  margin: 0 auto;
}

.user-profile-dashboard::-webkit-scrollbar {
  width: 5px;
  background-color: #ddd;
}

.user-profile-dashboard::-webkit-scrollbar-thumb {
  background-color: #005e93;
  width: 9px;
  height: 50px;
  border-radius: 20px;
}

.profile-settings-board::-webkit-scrollbar {
  width: 5px;
  background-color: #ddd;
}

.profile-settings-board::-webkit-scrollbar-thumb {
  background-color: #005e93;
  width: 9px;
  height: 50px;
  border-radius: 20px;
}

.user-profile-dashboard .user-profile-box {
  text-align: center;
  padding: 0 30px;
}

.user-profile-box-outer {
  padding: 30px 20px;
  gap: 30px;
  background-color: #ffffff;
  border-radius: 30px;
  border: 1px solid #549a9c80;
}

.right-img-box {
  background-color: #afee8e;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 24px;
  width: 24px;
  position: relative;
  margin-right: 0.5rem;
  padding: 0.3rem;
}

.right-tick-img {
  position: absolute;
  right: -2px;
}

.inner-box1 {
  width: 10%;
}

.inner-box2 {
  width: 80%;
}

.inner-box2 p {
  font-size: 14px;
}

.profile-dashboard {
  max-width: 100% !important;
}

.icon-bg {
  /* background-color: #e6e6e6;
  border-radius: 50%;
  width: 50px;
  height: 50px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center; */
}

.icon-bg-active {
  background-color: #fe2e2e;
  border-radius: 50%;
  width: 50px;
  height: 50px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.user-profile-box-inner {
  border-right: 1px solid #ddd;
}

.creatorProfileImage {
  width: 20%;
}

.social-icon-btn {
  border-radius: 22px;
  border: 1px solid #e6e6e6;
  opacity: 0.1;
  background: var(--Primary-color,
      linear-gradient(263deg, #549a9c 5.13%, #65acae 86.84%));
  width: 126px;
  max-width: 126px;
  height: 46px;
  flex-shrink: 0;
}

.collab-bg {
  border-radius: 22px;
  /* background: #F1F8FF; */
  background: #eef5f5;
}

/* 
.location-tag{
  display: flex;
  border-radius: 22px;
  flex-direction: row;
  justify-content: center;
  align-content: center;
  max-width: 200px;
  background: linear-gradient(263.11deg, #549A9C 5.13%, #65ACAE 86.84%),
      linear-gradient(0deg, #E6E6E6, #E6E6E6);
} */

.tag-bg {
  border-radius: 22px;
  border: 1px solid #e6e6e6;
  opacity: 0.1;
  background: var(--Primary-color,
      linear-gradient(263deg, #549a9c 5.13%, #65acae 86.84%));
  width: 186px;
  max-width: 186px;
  height: 46px;
  flex-shrink: 0;
}

.tag-info {
  display: flex;
  width: 150px;
  max-width: 186px;
  color: black;
  position: absolute;
  top: 8px;
  left: 27px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.tag-info-creator {
  display: flex;
  width: 150px;
  max-width: 186px;
  color: black;
  position: absolute;
  top: 13px;
  left: 38px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.confirmed-icons .tag-info {
  display: flex;
  width: 126px;
  max-width: 126px;
  color: black;
  /* position: absolute; */
  /* top: 9px; */
  text-align: center;
}

.user-profile-box-outer .user-profile-box-inner {
  width: 32%;
}

.user-profile-box-outer .user-profile-box-inner .share-icon,
.user-profile-box-outer .user-profile-box-inner .like-icon {
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #f1f8ff;
  border-radius: 50%;
}

.user-profile-dashboard .user-profile-outer-box-main {
  position: relative;
}

.user-profile-dashboard .user-profile-security-icon {
  height: 40px;
  width: 40px;
  position: absolute;
  left: 50%;
  bottom: -16px;
}

.user-profile-dashboard .user-profile-image {
  height: 80px;
  width: 80px;
  margin: 0 auto;
}

.user-profile-dashboard .user-profile-image img {
  border-radius: 50%;
}

.user-profile-dashboard .user-profile-box .updation-text {
  font-size: 14px;
  text-decoration: underline;
  margin-top: 10px;
}

.user-profile-description-box .edit-input {
  height: 40px;
  border: none;
  font-size: 12px;
  /* border-bottom: 1px solid #F3F3F3; */
}

/* .verification-settings {
    border-bottom: 1px solid #f3f3f3;
} */

.user-profile-description-box .edit-input:focus {
  outline: none;
}

.user-text {
  font-size: 12px;
  color: #cacaca;
}

.user-profile-description-box {
  /* margin-bottom: 30px;
  border-bottom: 1px solid #f3f3f3;
  padding-bottom: 25px; */
}

.user-profile-description-box .user-description-left-box {
  width: 100%;
}

.user-profile-description-box .user-description-right-box {
  width: 20%;
}

.user-profile-description-box .profile-name-text-light {
  font-size: 14px;
}

/* .container-help-center {
  /* margin-top: 200px; 
} */

.container-help-center .help-center-purple-coin {
  position: absolute;
  right: 25px;
  animation: banimg5 2s linear 0s infinite;
  top: 60%;
}

.container-help-center .help-center-ethereum-coin {
  position: absolute;
  right: -200px;
  animation: topbottom 2s linear 0s infinite;
  top: 90px;
}

.container-help-center .help-center-dollor-coin {
  position: absolute;
  left: -150px;
  animation: banimg5 2s linear 0s infinite;
}

.container-help-center .help-center-yellow-circle-ball {
  position: absolute;
  right: -250px;
  animation: banimg5 2s linear 0s infinite;
  top: 50%;
}

/* help-center-detail */

.vertical--section {
  position: relative;
}

.navbar- {
  margin-bottom: 0;
  position: absolute;
  width: 100%;
  top: 0;
  left: 0;
  border-radius: 0;
}

.content-outer- {
  min-height: 100%;
  background-color: #f9f9f9;
}

/* .container {
  /*max-width:400px;
} */

.content-outer- .content {
  border-left: 1px solid #ccc;
  border-right: 1px solid #ccc;
  background-color: #fff;
  min-height: 100%;
  font-size: 16px;
  text-align: left;
  color: #333;
}

.content-outer- .content .nav {
  display: block;
}

.content-outer- .menu-aside-show {
  position: fixed;
  top: 50%;
  left: 0;
  width: 40px;
  height: 40px;
}

.-center-box {
  margin-left: 200px;
}

/* Filter-range-slider */
.slider-selection {
  background: #f77500 !important;
}

.slider-success .slider-selection {
  background-color: #5cb85c !important;
}

.slider-primary .slider-selection {
  background-color: #428bca !important;
}

.slider-info .slider-selection {
  background-color: #5bc0de !important;
}

.slider-warning .slider-selection {
  background-color: #f0ad4e !important;
}

.slider-danger .slider-selection {
  background-color: #d9534f !important;
}

.slider.slider-horizontal {
  width: 100% !important;
  height: 20px;
}

.slider-handle {
  background-color: #fff !important;
  background-image: none !important;
  -webkit-box-shadow: 1px 1px 24px -2px rgba(0, 0, 0, 0.75) !important;
  -moz-box-shadow: 1px 1px 24px -2px rgba(0, 0, 0, 0.75) !important;
  box-shadow: 1px 1px 24px -2px rgba(0, 0, 0, 0.75) !important;
}

.slider-strips .slider-selection {
  background-image: repeating-linear-gradient(-45deg,
      transparent,
      transparent 5px,
      rgba(255, 252, 252, 0.08) 5px,
      rgba(252, 252, 252, 0.08) 10px) !important;
  background-image: -ms-repeating-linear-gradient(-45deg,
      transparent,
      transparent 5px,
      rgba(255, 252, 252, 0.08) 5px,
      rgba(252, 252, 252, 0.08) 10px) !important;
  background-image: -o-repeating-linear-gradient(-45deg,
      transparent,
      transparent 5px,
      rgba(255, 252, 252, 0.08) 5px,
      rgba(252, 252, 252, 0.08) 10px) !important;
  background-image: -webkit-repeating-linear-gradient(-45deg,
      transparent,
      transparent 5px,
      rgba(255, 252, 252, 0.08) 5px,
      rgba(252, 252, 252, 0.08) 10px) !important;
}

.tooltip-inner {
  max-width: 200px;
  padding: 3px 8px;
  color: #bdbdbd !important;
  text-align: center;
  background-color: transparent !important;
  border-radius: 4px;
}

.tooltip.top .tooltip-arrow {
  display: none !important;
}

.slider .tooltip.top {
  margin-top: -25px !important;
}

.well {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  width: 100% !important;
  padding: 0;
}

.slider-ghost .slider-track {
  height: 5px !important;
}

.slider-ghost .slider-handle {
  top: -2px !important;
  border: 5px solid #f77500;
}

.slider-success.slider-ghost .slider-handle {
  border-color: #5cb85c;
}

.slider-primary.slider-ghost .slider-handle {
  border-color: #428bca;
}

.slider-info.slider-ghost .slider-handle {
  border-color: #5bc0de;
}

.slider-warning.slider-ghost .slider-handle {
  border-color: #f0ad4e;
}

.slider-danger.slider-ghost .slider-handle {
  border-color: #d9534f;
}

.brand-catalogue-box {
  display: flex;
  justify-content: start;
  flex-wrap: wrap;
  padding-top: 50px;
  /* justify-content: center; */

}

.brand-catalogue-box-v2 {
  padding-top: 0px;
}

.image-overlay-container {
  position: relative;
  /* width: 260px; */
  /* width: 100%; */
  /* min-width: 260px; */
  /* height: 265px; */
  margin-bottom: 80px;
  border-radius: 30.5px;
  /* margin: 10px; */
  margin: 0;
  cursor: pointer;
  overflow: hidden;
}

.creator-campaign-image {
  width: 100%;
  height: 100%;
  border-radius: 20px;
  object-fit: cover;
  filter: blur(5px);
  opacity: 0;
  transition: opacity 0.5s ease, filter 0.5s ease;
}

.image-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(to bottom,
      rgba(0, 0, 0, 0.1),
      rgba(0, 0, 0, 0.4));
  /* border-radius: 20px; */
  display: flex;
  justify-content: center;
  align-items: center;
}

.image-placeholder-overlay {
  position: absolute;
  /* top: 0; */
  bottom: 10px;
  left: 14px;
  width: 90%;
  height: 96%;
  background: linear-gradient(to bottom,
      rgba(0, 0, 0, 0.1),
      rgba(0, 0, 0, 0.1));
  /* background-color: rgba(0, 0, 0, 0.4); */
  /* Adjust the opacity (last value) as needed */
  display: flex;
  border-radius: 20px;
  /* border-bottom-left-radius: 24px; */
  /* border-bottom-right-radius: 26px; */
  justify-content: center;
  align-items: center;
}

.campaigns-img-sec {
  display: flex;
  flex-wrap: wrap;
  /* justify-content: space-between; */
  /* gap: 40px; */
  /* padding-bottom: 45px; */
  /* border-bottom: 1px solid #f3f3f3; */
  /* margin-bottom: 30px; */
}

.brand-Catalogue-img {
  width: 362px;
  height: 386px;
  border-radius: 20px;
  margin: 20px 32px;
}

/* Add styles for the overlay content as needed */

.creator-pack-image {
  border-radius: 30.5px;
  margin: 5px;
  width: 277px;
  height: 260px;
  flex-shrink: 0;
  /* object-fit: cover; */
  filter: blur(5px);
  opacity: 0;
  transition: opacity 0.5s ease, filter 0.5s ease;
}

.creator-pack-overlay {
  border-radius: 30.5px;
  margin: 5px;
  width: 100%;
  height: 260px;
  flex-shrink: 0;
  position: absolute;
  top: 0;
  left: 0;
  background: linear-gradient(0.17deg, #000000 0.18%, rgba(0, 0, 0, 0) 99.88%);
}

.creator-campaign-tag {
  /* max-width: 195px; */
  position: absolute;
  bottom: 20px;
  left: 25px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.creator-pack-tag {
  max-width: 200px;
  position: absolute;
  bottom: 20px;
  left: 30px;
}

.creator-pack-bottom {
  border-bottom: 1px solid #f3f3f3;
  border-top: 1px solid #f3f3f3;
  padding-top: 40px;
  padding-bottom: 40px;
}

.review-heading {
  display: flex;
  justify-content: space-between;
  padding: 10px 20px;
  border-bottom: 1px solid #f3f3f3;
}

.review-heading div:nth-child(1) {
  font-family: Raleway;
  font-size: 22px;
  font-weight: 600;
  line-height: 26px;
  letter-spacing: 0em;
  text-align: left;
}

.review-heading div:nth-child(2) {
  font-family: Raleway;
  font-size: 16px;
  font-weight: 400;
  line-height: 19px;
  letter-spacing: 0em;
  text-align: right;
  color: #005e93;
}

.review-box {
  margin: 50px auto;
  padding: 30px;
  background-color: #ffffff;
  border-radius: 30px;
  /* width: 1171px; */
  height: 753px;
  overflow-y: scroll;
}

.review-box::-webkit-scrollbar {
  display: none;
}

.review-box .reviewer-name {
  font-family: Raleway;
  font-size: 20px;
  font-weight: 500;
  line-height: 23px;
  letter-spacing: 0em;
  text-align: left;
}

.review-box .review-content {
  font-family: Raleway;
  font-size: 12px;
  font-weight: 500;
  line-height: 14px;
  letter-spacing: 0em;
  text-align: left;
}

.review-box .review-rating {
  font-family: Raleway;
  font-weight: 400;
  line-height: 14px;
  letter-spacing: 0em;
  text-align: right;
  color: #005e93;
  display: flex;
  align-items: center;
}

.creator-pack-tag div {
  font-family: Raleway;
  font-size: 14px;
  font-weight: 600;
  line-height: 23px;
  letter-spacing: 0em;
  text-align: left;
  color: #ffffff;
}

.creator-campaign-tag div {
  font-family: Raleway;
  /* font-size: 20px;
  font-weight: 600;
  line-height: 23px;
  letter-spacing: 0em;
  text-align: left; */
  /* color: #ffffff; */
}

.campaign-social {
  display: inline-block;
  position: absolute;
  /* top: 35px; */
  /* right: 45px; */
  top: 10%;
  right: 10%;
}

.pack-delivery {
  display: inline-block;
  position: absolute;
  top: 20px;
  right: 15px;
  background: linear-gradient(263.11deg, #549a9c 5.13%, #65acae 86.84%);
  border-radius: 50px;
}

.creator-campaign-tag .brand-name {
  /* font-size: 15px;
  font-weight: 400; */
}

.brand-catalogue-tag {
  position: absolute;
  bottom: 20px;
  left: 25px;
  cursor: pointer;
}

.verified-tag {
  display: flex;
  align-items: center;
  border-radius: 22.5px;
  border: 1px solid #549a9c;
  background: #f4fff0;
  max-width: 100px;
  min-width: 100px;
}

.verified-tag span {
  font-size: 10px;
  color: #549a9c;
}

.verified-tag svg {
  margin: 7px 10px;
}

.brand-catalogue-tag div {
  font-family: Raleway;
  /* font-size: 20px;
  font-weight: 600;
  line-height: 23px;
  letter-spacing: 0em;
  text-align: left;
  color: #ffffff;
  margin-bottom: 10px;
  cursor: pointer; */
}

.input-search-icon {
  position: absolute;
  right: 20px;
  bottom: 15px;
}

/* Creator Pack Page */
.pack-catalogue-box {
  display: flex;
  flex-wrap: wrap;
  justify-content: start;
  margin-top: 30px;
  width: 100%;
}

.pack-Catalogue-img {
  width: 238px;
  height: 254px;
  border-radius: 20px;
  margin: 10px;
  filter: brightness(50%);
}

.pack-catalogue-tag {
  position: absolute;
  bottom: 20px;
  left: 30px;
}

.pack-catalogue-tag div {
  font-family: Raleway;
  font-size: 20px;
  font-weight: 600;
  line-height: 23px;
  letter-spacing: 0em;
  text-align: left;
  color: #ffffff;
  margin-bottom: 10px;
  margin-left: 2px;
  margin-right: 20px;
}

.create-pack-button {
  font-family: Raleway;
  font-size: 20px;
  font-weight: 600;
  line-height: 23px;
  letter-spacing: 0em;
  text-align: left;
  color: #005e93;
  margin-bottom: 10px;
  margin-left: 2px;
}

/* TODO: Fix this */
.pack-dark-overlay {
  color: #000;
  opacity: 100%;
  width: 238px;
  height: 254px;
  border-radius: 20px;
  position: absolute;
}

.user-dropdown-box {
  position: relative;
}

.unread-message-tag {
  left: 82px;
  bottom: 27px;
  position: absolute;
  min-width: 20px;
  height: 20px;
  border-radius: 50px;
  background-color: #65acae;
  display: flex;
  justify-content: center;
  align-items: center;
  color: white;
  font-size: 14px;
  /* Adjust font size as needed */
  padding: 4px 6px;
  /* Adjust padding as needed */
  font-weight: 800;
  white-space: nowrap;
  /* Prevent wrapping */
}

.user-dropdown-box .inner-dropdown {
  position: absolute;
  z-index: 900;
  color: #e3dfe9;
  font-size: 20px;
  font-weight: 400;
  background: white;
  /* padding-top: 10px;
    padding-bottom: 10px; */
  padding: 15px;
  border-radius: 15px;
  display: block;
  cursor: pointer;
  width: 180px;
  transform: scale(0.01);
  opacity: 0;
  transition: transform 0.3s ease, opacity 0.3s ease, box-shadow 0.3s ease 0.15s;
  transform-origin: center top;
  overflow: hidden;
  top: 60px;
  right: 50px;
}

.search-tag-position {
  position: absolute;
  right: 0;
}

/* campaign-detail-page */
.categories-dashboard .fixed-secondary-bar {
  padding: 15px 20px;
  background-color: #fff;
  border-radius: 100px;
  border: 1px solid rgba(84, 154, 156, 0.5);
}

.categories-dashboard .campaigns-fixed-secondary-bar {
  width: 100%;
  position: absolute;
  /* left: -70px; */
  z-index: 9;
}

.dropdown-button {
  color: #e3dfe9;
  background: white;
  padding: 12px 17px 12px 17px;
  /* border: 1px solid red; */
  border: 1px solid #549a9c80;
  border-radius: 30px;
  display: inline-block;
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease, color 0.2s ease;
  width: 200px;
}

.date-picker-button {
  color: #e3dfe9;
  background: white;
  padding: 12px 0px 12px 17px;
  /* border: 1px solid red; */
  border: 1px solid #549a9c80;
  border-radius: 30px;
  display: inline-block;
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease, color 0.2s ease;
  width: 180px;
}

.dropdown-button:hover {
  color: #dbd7e0;
  transform: translateY(3px);
}

.arrow {
  /* width: 13px; */
  transition: transform 0.3s ease;
}

.arrow.open {
  transform: rotate(180deg);
}

.dropdown-button p {
  display: inline;
  font-size: 12px;
  color: #000;
  margin-right: 75px;
}

.creator-right-box .inner-dropdown {
  position: absolute;
  z-index: 2;
  color: #e3dfe9;
  font-size: 18px;
  background: white;
  padding-top: 10px;
  padding-bottom: 10px;
  border-radius: 15px;
  display: block;
  cursor: pointer;
  width: 240px;
  transform: scale(0.01);
  opacity: 0;
  transition: transform 0.3s ease, opacity 0.3s ease, box-shadow 0.3s ease 0.15s;
  transform-origin: center top;
  overflow: hidden;
  top: 60px;
}

.inner-dropdown {
  position: absolute;
  z-index: 1000;
  color: #e3dfe9;
  font-size: 18px;
  background: white;
  padding-top: 10px;
  padding-bottom: 10px;
  border-radius: 22px;
  display: block;
  cursor: pointer;
  width: 200px;
  transform: scale(0.01);
  opacity: 0;
  transition: transform 0.3s ease, opacity 0.3s ease, box-shadow 0.3s ease 0.15s;
  transform-origin: center top;
  overflow: hidden;
  top: 70px;
  box-shadow: 1px 1px 10px #00000026;
}

/* Creator Catalogue Dropdown CSS  */
dropdown-button {
  width: 230px !important;
  margin-right: 5px;
}

.inner-dropdown {
  position: absolute;
  z-index: 1000;
  color: #e3dfe9;
  font-size: 18px;
  border-radius: 10px;
  /* border: 1px solid rgba(84, 154, 156, 0.5); */
  border: 1px solid #549a9c80;
  background: #fff;
  display: block;
  cursor: pointer;
  /* width: 18vw; */
  width: 230px;
  transform: scale(0.01);
  opacity: 0;
  transition: transform 0.3s ease, opacity 0.3s ease, box-shadow 0.3s ease 0.15s;
  transform-origin: center top;
  overflow: hidden;
  top: 55px;
  box-shadow: 1px 1px 10px #00000026;
  height: 200px;
}

.profile-complete .inner-dropdown {
  top: 370px !important;
  height: 155px !important;
}

.profile-complete .dropdown-button {
  width: 248px !important;
}

.campaigns-date-dropdown-box .inner-dropdown {
  height: 42px !important;
}

.collaboration-date-dropdown-box .inner-dropdown {
  height: 42px !important;
  top: 120px;
}

.packs-date-dropdown-box .inner-dropdown {
  height: 42px !important;
  top: 80px;
}

.inner-dropdown {
  height: 96px;
  font-family: Raleway;
  font-size: 12px;
  font-weight: 500;
  line-height: 14px;
  letter-spacing: 0em;
  text-align: left;
}

.status-dropdown-box .inner-dropdown {
  height: 86px;
  font-family: Raleway;
  font-size: 12px;
  font-weight: 500;
  line-height: 14px;
  letter-spacing: 0em;
  text-align: left;
}

.status-dropdown-box .inner-dropdown .status-dropdown-option,
.type-dropdown-box .inner-dropdown .type-dropdown-option {
  color: black;
  margin: 5px 15px;
}

.status-dropdown-box .inner-dropdown .status-dropdown-option,
.type-dropdown-box .inner-dropdown .type-dropdown-option div {
  padding-bottom: 4px;
}

.type-dropdown-box .inner-dropdown {
  height: 83px;
}

.price-dropdown-box .inner-dropdown {
  top: 120px;
}

.dropdown-box .inner-dropdown .list-box {
  border-bottom: 1px solid #d9d9d9;
  padding-top: 4px;
}

.inner-dropdown {
  height: 200px;
  overflow: auto;
  /* overflow-y: scroll; */
}

.inner-dropdown::-webkit-scrollbar {
  display: none;
}

.third-section2 .ctm_toggle .inner-dropdown {
  left: 0;
}

.third-section2 .ctm_toggle .inner-dropdown .dropdown-list-data div {
  padding: 5px 12px;
  font-family: Raleway;
  height: 27px;
  font-size: 16px;
  font-weight: 400;
  margin: 5px;
  border-radius: 8px;
  display: flex;
  align-items: center;
}

.search-input-style {
  background: transparent;
  height: 37px;
  border-radius: 50px;
  border: 0;
  outline: 1px solid #a9cccd80;
}

.reset-filter-icon {
  border: 1px solid #a9cccd80;
  border-radius: 50%;
  padding: 8px;
}

.reset-all-filter-icon {
  border: 1px solid #a9cccd;
  border-radius: 50%;
  padding: 4px 16px;
  cursor: pointer;
}

.search-filter-icon {
  position: absolute;
  right: 60px;
  top: 20px;
}

.dropdown-box .slider-box {
  width: 80%;
  margin-left: 35px;
  padding-right: 15px;
}

.dropdown-box .apply-btn {
  width: 80px;
  height: 25px;
  border-radius: 22px !important;
  display: flex;
  align-items: center;
  background: linear-gradient(263.11deg,
      #549a9c 5.13%,
      #65acae 86.84%) !important;
  /* background: linear-gradient(95.1deg, #005e93 0%, #0094e7 100%); */
  text-align: center;
  font-weight: 700;
}

.dropdown-box .date-box {
  width: 90%;
  display: flex;
  justify-content: space-between;
  margin-left: 10px;
  font-family: Raleway;
  font-size: 12px;
  font-weight: 500;
  line-height: 14px;
  letter-spacing: 0em;
  text-align: center;
  color: #616161;
  align-items: center;
  position: relative;
}

.no-outline {
  outline: none;
  border: none;
}

.calender-icon {
  position: absolute;
  right: 0;
  background-color: white;
}

.date-picker-button .calender-icon {
  position: absolute;
  right: 10px;
}

/* Creator Catalogue Dropdown CSS  */

.inner-dropdown.creator-filter-w100 {
  width: 100%;
  left: 0;
  box-shadow: 1px 1px 10px #00000026;
}

.box-ul.filter-box-h13 {
  height: 130px;
}

.inner-dropdown p {
  margin-left: 10px;
  font-size: 14px;
}

.inner-dropdown .apply-btn {
  background: linear-gradient(180deg, #0094e7 0%, #005e93 100%);
  color: #fff;
  font-size: 12px;
  padding: 8px 24px;
  border-radius: 4px;
  margin: 20px 0px;
  width: 80px;
}

.inner-dropdown.open {
  transform: scale(1);
  opacity: 1;
}

/* 
.inner-dropdown a {
    position: relative;
    color: #6c6185;
    text-decoration: none;
    display: block;
    padding: 6.5px 15px;
    transition: color 0.2s ease, background-color 0.2s ease,
        padding-left 0.2s ease;
    overflow: hidden;
}

.inner-dropdown a input {
    border: 1px solid #ddd;
    border-radius: 6px;
}

.inner-dropdown a input:focus {
    outline: none;
}

.inner-dropdown a.clicked {
    padding-left: 35px;
    color: #987cd9;
} */

.span {
  z-index: -1;
  top: 0;
  left: 0;
  bottom: 0;
  width: 0px;
  position: absolute;
  background: #987cd9;
  transition: width 0.4s ease;
  border-radius: 1px;
}

.span.clicked {
  width: 5px;
}

.categories-dashboard .date-range-input {
  font-size: 12px;
  width: 100%;
}

.container-animation {
  position: relative;
}

.container-animation .ethereum {
  position: absolute;
  top: 50px;
  right: -200px;
  animation: topbottom 5s linear 0s infinite;
}

.container-animation .bitcoin {
  position: absolute;
  top: 50%;
  right: -200px;
  animation: topbottom 5s linear 0s infinite;
}

.container-animation .purple-circle {
  position: absolute;
  top: 25%;
  left: -20px;
  animation: banimg5 5s linear 0s infinite;
}

.container-animation .yellow-circle {
  position: absolute;
  top: 17%;
  left: -80px;
  animation: banimg5 5s linear 0s infinite;
}

.container-animation .dollor-coin {
  position: absolute;
  left: -63px;
  animation: banimg5 5s linear 0s infinite;
  top: -30px;
}

#campaign-listing-table tr td span {
  font-family: "Raleway";
}

.about-us-text {
  font-family: Raleway;
  font-size: 16px;
  font-weight: 400;
  line-height: 40px;
  letter-spacing: 0em;
  text-align: left;
  color: #818383;
}

.custom-height .col-4 .about-us-single-box,
.custom-height {
  height: 500px;
}

.about-us-box {
  width: Fixed (460px);
  height: Hug (144px);
  padding: 16px;
  border-radius: 8px;
  border: 1px;
  gap: 16px;
  border: 1px solid #549a9c80;
}

.about-us-box h6 {
  font-family: Raleway;
  font-size: 14px;
  font-weight: 500;
  line-height: 23px;
}

.dot-active-about-us {
  width: 9px !important;
  height: 9px !important;
  border-radius: 50px;
  background: #63abad;
}

.about-us-box .about-us-description {
  font-family: Raleway;
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  letter-spacing: 0em;
  text-align: left;
  color: #818383;
}

/* Campaign Detail page */

.campaign-box-detail,
.campaign-box-detail-abt {
  background: #ffffff;
  box-shadow: 0px 0px 65px rgba(0, 126, 197, 0.04);
  border-radius: 20px;
  padding: 35px;
  border: 1px solid #549a9c80;
}

.campaign-box-detail .campaign-categories:nth-child(2) {
  width: 30%;
  border-right: 1px solid #e8e8e8;
  border-left: 1px solid #e8e8e8;
  padding: 0 30px;
  margin: 0 30px;
}

.campaign-categories,
.campaign-profile {
  width: 35%;
}

.campaign-profile p,
.collab-indv-sec p {
  font-weight: 500;
  font-size: 14px;
  line-height: 21px;
  color: #000;
}

.campaign-categories h6 {
  font-weight: 500;
  font-size: 17px;
  line-height: 20px;
  letter-spacing: 0.03em;
  color: #000000;
}

.color-span {
  width: 322px;
  height: 360px;
  border-radius: 30px;
}

.campaign-categories li,
.collab-indv-sec li {
  text-align: center;
  background: #f1f8ff;
  border-radius: 19.5px;
  padding: 10px 25px;
  font-size: 16px;
  line-height: 19px;
  color: #000000;
  list-style: none;
  margin: 15px 15px 0 0;
}

.collab-indv-sec li {
  margin: 5px 0;
  padding: 5px 10px;
}

.campaign-box-detail-abt h4 {
  font-weight: 600;
  font-size: 22px;
  /* line-height: 26px; */
  color: #000000;
  /* padding-bottom: 25px; */
  font-family: "Raleway";
}

.campaign-box-detail-abt .follower-div {
  text-align: center;
  background: #f1f8ff;
  border-radius: 19.5px;
  padding: 10px 25px;
  font-size: 16px;
  /* line-height: 19px; */
  color: #000000;
  margin-bottom: 25px;
}

.campaign-box-detail-abt .camp-text-bbord {
  /* margin-top: 30px; */
  font-weight: 400;
  font-size: 16px;
  /* line-height: 29px; */
  color: #616161;
  border-bottom: 1px solid #f3f3f3;
}

.img-text-campaign-set:before {
  content: "";
  background: linear-gradient(0.17deg, #000000 0.18%, rgba(0, 0, 0, 0) 99.88%);
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
}

.img-text-campaign-set {
  filter: drop-shadow(0px 0px 65px rgba(0, 126, 197, 0.04));
  border-radius: 30.5px;
  overflow: hidden;
  width: 23.3%;
  height: 250px;
  margin: 10px 5px auto;
}

.social-radius-sec {
  background: #ffffff;
  border-radius: 17px;
  padding: 10px;
  right: 15px;
  top: 15px;
}

.text-box {
  max-width: 700px;
  word-wrap: break-word;
}

.camp-text-box {
  position: absolute;
  bottom: 0;
  left: 20px;
  color: #fff;
}

.camp-text-box h5 {
  font-weight: 500;
  font-size: 20px;
  line-height: 23px;
  color: #ffffff;
}

.camp-text-box p {
  font-weight: 400;
  font-size: 16px;
  line-height: 19px;
  color: #ffffff;
}

.camp-text-box li {
  list-style: none;
  background: #ffffff;
  border: 1px solid #000000;
  border-radius: 12.5px;
  font-weight: 600;
  font-size: 13px;
  line-height: 15px;
  text-transform: uppercase;
  color: #000000;
  padding: 5px 9px;
}

/* creators-detail-page */
.creator-details-width {
  max-width: 1190px !important;
}

.creators-profile-detail li {
  text-align: center;
  background: #f1f8ff;
  border-radius: 19.5px;
  /* padding: 10px 25px; */
  width: 180px;
  height: 50px;
  padding-top: 15px;
  font-size: 16px;
  line-height: 19px;
  color: #000000;
  list-style: none;
  margin: 15px 15px 0 0;
}

.creator-deatil-section h5 {
  font-family: "Raleway";
  font-style: normal;
  font-weight: 500;
  font-size: 24px;
  line-height: 28px;
  color: #000000;
}

.creator-detail-top-box p {
  font-family: "Raleway";
  font-style: normal;
  font-weight: 500;
  font-size: 14px;
  line-height: 20px;
  /* identical to box height */
  letter-spacing: 0.03em;
  color: #000000;
}

.creator-detail-section .invite-btn {
  background: linear-gradient(180deg, #0094e7 0%, #005e93 100%);
  box-shadow: 17px 13px 18px rgba(0, 126, 197, 0.14);
  border-radius: 30px;
  color: #fff;
  font-style: normal;
  font-weight: 600;
  font-size: 18px;
  line-height: 21px;
  padding: 15px 82px;
  transition: 400ms;
}

.creator-detail-section .like-btn,
.creator-detail-section .share-btn {
  background-color: #f1f8ff;
  height: 33px;
  width: 33px;
  border: none;
  border-radius: 50%;
}

.creator-detail-section .top-icons {
  top: 10px;
  right: 25px;
}

.creator-detail-profile {
  border-bottom: 1px solid #f3f3f3;
  padding-bottom: 20px;
}

.creator-detail-profile .followers span {
  font-family: "Raleway";
  font-style: normal;
  font-weight: 500;
  font-size: 16px;
  line-height: 19px;
  color: #000000;
}

.creator-detail-profile .follower-img {
  width: 30px;
  height: 25px;
}

.creator-detail-section .social-btn-instagram {
  background: linear-gradient(180deg, #0094e7 0%, #005e93 100%);
  box-shadow: 17px 13px 18px rgba(0, 126, 197, 0.14);
  border-radius: 30px;
  color: #fff;
  font-style: normal;
  font-size: 18px;
  line-height: 21px;
  padding: 15px 70px;
  transition: 400ms;
}

.creator-detail-section .social-btn-brand {
  background-color: #fff;
  border-radius: 30px;
  color: #000;
  font-style: normal;
  font-size: 18px;
  line-height: 21px;
  padding: 15px 70px;
  transition: 400ms;
  border: 1px solid #005e93;
  filter: drop-shadow(17px 13px 39px rgba(0, 126, 197, 0.04));
}

.creators-detail .dollor-coin {
  position: absolute;
  left: 9%;
  animation: topbottom 2s linear 0s infinite;
}

.creators-detail .purple-circle {
  position: absolute;
  top: 23%;
  right: 9%;
  animation: banimg5 6s linear 0s infinite;
}

.creators-detail .yellow-circle {
  position: absolute;
  top: 30%;
  right: 3%;
  animation: banimg5 4s linear 0s infinite;
}

.creators-detail .bitcoin {
  position: absolute;
  top: 60%;
  right: 3%;
  animation: banimg5 4s linear 0s infinite;
}

.creators-detail .ethereum {
  position: absolute;
  top: 20%;
  right: 3%;
  animation: banimg5 4s linear 0s infinite;
}

/* Campaign-detail page */

.main-dashboard {
  padding: 50px 0px 100px 0px;
}

.campaign-detail-outer-box1 {
  gap: 40px;
}

.campaign-detail-outer-box2 {
  background: #ffffff;
  box-shadow: 0px 0px 65px rgba(0, 126, 197, 0.04);
  border-radius: 20px;
  padding: 50px 40px;
  position: relative;
  border: 1px solid #549a9c80;
}

.campaign-detail-inner-box1 {
  width: 30%;
}

.delete-btn {
  background: linear-gradient(263.11deg, #ce3d3d 5.13%, #b92d2d 86.84%);
  border-radius: 30px;
  color: #fff;
  font-style: normal;
  font-weight: 600;
  font-size: 18px;
  line-height: 21px;
  padding: 18px 60px;
  /* transition: 400ms; */
  border: 0;
}

.delete-btn:hover {
  background-color: #ff0501 !important;
  color: black;
  opacity: 0.95;
}

.text-box2 p {
  color: #616161;
}

.campaign-offered-box1 h6,
.campaign-offered-box2 h6,
.campaign-desc-box h6,
.collaboration-detail-box h6 {
  font-family: "Raleway";
  font-style: normal;
  font-weight: 600;
  font-size: 22px;
  line-height: 26px;
  color: #000000;
  margin-bottom: 22px;
}

.hidden-div {
  visibility: hidden;
}

.campaign-desc-box .category-btn {
  text-align: center;
  background: #f1f8ff;
  border-radius: 19.5px;
  padding: 10px 25px;
  font-size: 16px;
  line-height: 19px;
  color: #000000;
  list-style: none;
  margin-bottom: 24px;
  border: none;
}

.campaign-detail-img {
  position: absolute;
  z-index: -1;
  right: -165px;
  bottom: 10%;
}

.desc-text {
  max-width: 95%;
  font-family: "Raleway";
  font-style: normal;
  font-weight: 400;
  font-size: 16px;
  line-height: 39px;
  color: #616161;
  word-wrap: break-word;
}

.collaboration-detail-box {
  margin-top: 30px;
  border-top: 1px solid #f3f3f3;
  padding-top: 30px;
}

.icon-box .p-text {
  font-family: "Raleway";
  font-style: normal;
  font-weight: 400;
  font-size: 14px;
  line-height: 19px;
}

@media (min-width: 1599px) {
  .content-outer- .menu-aside-show {
    display: none;
  }
}

@media (max-width: 1440px) {
  .campaign-top-btn {
    margin-right: 0px;
  }

  .campaign-sec-label {
    font-size: 11px;
  }

  .campaign-images-sec .inner-curve .sec-img {
    height: 500px;
  }

  .campaign-detail-img {
    display: none;
  }

  .campaign-faq-section-main h3 {
    font-size: 30px;
  }

  .campaign-kind-sec-main p {
    font-size: 20px;
  }
}

@media (max-width: 640px) {
  .content-outer- .content-outer- .menu-aside-show {
    display: none;
  }
}

.content-outer- .menu-aside {
  position: absolute;
  top: 100px;
  width: 200px;
}

@media (max-width: 1600px) {
  .content-outer- .menu-aside {
    display: none;
  }

  .content-outer- .menu-aside.active {
    display: block;
    margin-left: 0;
    left: 0;
    height: 80%;
    position: fixed;
    background: rgba(255, 255, 255, 0.8);
    border-right: 1px solid #333;
    border-top: 1px solid #333;
    border-bottom: 1px solid #333;
  }
}

.content-outer- .menu-aside.affix {
  position: fixed;
  top: 48px;
}

.content-outer- .menu-aside ul {
  -webkit-transition: 0.5s ease-in-out;
  -moz-transition: 0.5s ease-in-out;
  -o-transition: 0.5s ease-in-out;
  transition: 0.5s ease-in-out;
  overflow: hidden;
}

.content-outer- .menu-aside ul li a {
  border: none;
  background: transparent;
  padding-left: 10px;
  border-radius: 0 !important;
  padding-top: 5px;
  padding-bottom: 5px;
  margin-bottom: -1px;
}

.content-outer- .menu-aside ul li li a {
  padding-left: 20px;
}

.content-outer- .menu-aside ul li li li a {
  padding-left: 30px;
}

.content-outer- .menu-aside ul li.active a {
  color: #333;
  border-left: 2px solid #563d7c;
}

.content-outer- .menu-aside ul li.active ul {
  height: auto;
  max-height: 200px;
}

.content-outer- .menu-aside ul li:not(.active) a {
  color: #999;
  border-left: 2px solid transparent;
}

.content-outer- .menu-aside ul li:not(.active) ul {
  max-height: 0;
  overflow: hidden;
  -webkit-transition: 0.5s ease-in-out;
  -moz-transition: 0.5s ease-in-out;
  -o-transition: 0.5s ease-in-out;
  transition: 0.5s ease-in-out;
}

.content-outer- .ham-menu {
  width: 40px;
  height: 40px;
  position: relative;
  -webkit-transform: rotate(0deg);
  -ms-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
  -webkit-transition: 0.5s ease-in-out;
  -moz-transition: 0.5s ease-in-out;
  -o-transition: 0.5s ease-in-out;
  transition: 0.5s ease-in-out;
  cursor: pointer;
  border-top-right-radius: 50%;
  border-bottom-right-radius: 50%;
  overflow: hidden;
  background: #ccc;
}

.content-outer- .ham-menu.active {
  left: 200px;
}

.content-outer- .ham-menu:hover,
.ham-menu.active:hover {
  background: #000;
}

.content-outer- .ham-menu:hover span,
.ham-menu.active:hover span {
  background: #fff;
}

/* .content-outer- .ham-menu.active {
  /*background:#009ee9;
}

.content-outer- .ham-menu.active span {
  /*background:#fff;
} */

.content-outer- .ham-menu span {
  display: block;
  position: absolute;
  height: 3px;
  width: 22px;
  background: #000;
  border-radius: 4px;
  opacity: 1;
  left: 9px;
  -webkit-transform: rotate(0deg);
  -ms-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
  -webkit-transition: 0.25s ease-in-out;
  -moz-transition: 0.25s ease-in-out;
  -o-transition: 0.25s ease-in-out;
  transition: 0.25s ease-in-out;
}

/* Icon 1 */
.content-outer- .nav-icon1 span {
  -webkit-transform-origin: left center;
  -ms-transform-origin: left center;
  -moz-transform-origin: left center;
  -o-transform-origin: left center;
  transform-origin: left center;
}

.content-outer- .nav-icon1 span.line1 {
  top: 12px;
}

.content-outer- .nav-icon1 span.line2 {
  top: 18px;
}

.content-outer- .nav-icon1 span.line3 {
  top: 24px;
}

.content-outer- .nav-icon1.active span.line1 {
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
  top: 10px;
  left: 12px;
}

.content-outer- .nav-icon1.active span.line2 {
  width: 0%;
  opacity: 0;
}

.content-outer- .nav-icon1.active span.line3 {
  -webkit-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  transform: rotate(-45deg);
  top: 26px;
  left: 12px;
}

/* insights-box */

.insights-outer-box .drop_box {
  height: 150px;
  margin: 10px 0;
  padding: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  border: 1px dotted #a3a3a3;
  border-radius: 5px;
  background-color: #f9f9fa;
}

.insights-outer-box .example-text {
  font-size: 14px;
  text-decoration: underline;
}

.insights-outer-box .drop_box h4 {
  font-size: 16px;
  font-weight: 400;
  color: #2e2e2e;
}

.insights-outer-box .drop_box p {
  margin-top: 10px;
  margin-bottom: 20px;
  font-size: 12px;
  color: #a3a3a3;
}

.insights-outer-box .btn {
  text-decoration: none;
  background-color: transparent;
  color: #000;
  padding: 10px 20px;
  border: none;
  outline: none;
  transition: 0.3s;
}

.insights-outer-box .btn:hover {
  text-decoration: none;
  background-color: #ffffff;
  color: #005af0;
  padding: 10px 20px;
  border: none;
}

.insights-outer-box .form input {
  margin: 10px 0;
  width: 100%;
  background-color: #e2e2e2;
  border: none;
  outline: none;
  padding: 12px 20px;
  border-radius: 4px;
}

/* Profile-settings-page */
.user-settings-container {
  max-width: 100%;
  margin: 15px auto;
}

.user-settings-container h1 {
  /* font-size: 38px; */
}

.profile-settings-board {
  /* padding: 30px 35px; */
  background-color: #fff;
  border-radius: 30px;
  box-shadow: 3px 0 10px rgb(0 0 0 / 8%);
}

/* .settings-top-box {
    padding: 10px !important;
    background: linear-gradient(180deg, #0094e7 0%, #005e93 100%);
    color: #fff;
} */
.settings-top-box .edit-icon-btn {
  background-color: transparent;
  border: none;
}

/* User-setting-modals */
.modal-dialog .input-box input {
  font-family: "Raleway", Raleway;
  height: 50px;
  border: 1px solid #ddd;
  border-radius: 5px;
}

.delete-account-modal .warning {
  color: #fe3600;
}

.delete-account-modal .email-highlight {
  color: #005e93;
  font-weight: 900;
}

.modal-footer .action-btns div:nth-child(1) {
  /* color: #616161; */
  cursor: pointer;
}

.modal-footer .action-btns div:nth-child(2) {
  /* color: #ef0044; */
  display: flex;
  flex-direction: column;
  justify-content: center;
  cursor: pointer;
}

.congratulations-modal-style {
  max-width: 650px !important;
  display: flex;
  align-items: center;
  height: 950px;
}

.congratulations-modal-style .congrats-img-bg {
  background-color: #e7f9f9;
  position: relative;
  border-radius: 50%;
  width: 200px;
  height: 200px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.congratulations-modal-style .congrats-img-bg img {
  position: absolute;
  left: 15px;
}

.view-offer-modal {
  /* max-width: 747px !important; */
  display: flex;
  align-items: center;
  /* height: 100%; */
}

.reject-tags {
  font-family: Raleway;
  font-size: 18px;
  font-weight: 500;
  line-height: 23px;
  letter-spacing: 0em;
  text-align: left;
}

.price-info {
  font-family: Raleway;
  font-size: 20px;
  font-weight: 600;
  line-height: 28px;
  letter-spacing: 0em;
  text-align: left;
  border-top: 1px solid #f3f3f3;
  border-bottom: 1px solid #f3f3f3;
  margin: 40px 0;
  padding: 20px;
}

.profile-name {
  font-family: Raleway;
  font-size: 24px;
  font-weight: 500;
  line-height: 28px;
  letter-spacing: 0em;
  text-align: left;
}

.accepted-collabs {
  width: 239px;
  /* height: 39px; */
  border-radius: 19.5px;
  background-color: #f1f8ff;
  font-size: 16px;
  display: flex;
  justify-content: center;
  padding-top: 5px;
  padding-bottom: 5px;
}

.campaign-details-section .view-offer-modal-bottom,
.view-offer-modal .view-offer-modal-bottom {
  display: flex;
  justify-content: space-between;
}

.view-offer-modal .modal-content {
  border-radius: 13px;
}

.campaign-details-section .view-offer-modal-bottom div,
.view-offer-modal .view-offer-modal-bottom div {
  color: #549a9c;
  font-family: Raleway;
  font-size: 20px;
  font-weight: 700;
  line-height: 28px;
  letter-spacing: 0em;
  text-align: right;
}

.collaboration-proposal-modal {
  top: 5%;
  max-width: 700px !important;
}

.collaboration-proposal-modal .modal-content {
  border-radius: 23px;
}

.congrats-modal .modal-content {
  width: 996px !important;
}

.edit-campaign .title {
  font-family: Raleway;
  font-size: 20px !important;
  font-weight: 500;
  line-height: 40px;
  letter-spacing: 0.03em !important;
  text-align: center;
  color: #818383;
}

.user-settings-modal {
  /* top: 15%; */
  max-width: 600px !important;
}

.user-settings-modal .modal-content {
  border-radius: 23px;
}

.user-settings-modal .modal-content p:nth-child(2) {
  font-size: 14px;
  font-weight: 400;
  font-family: "Raleway";
}

.user-settings-modal .modal-content p:nth-child(3) {
  color: #fe0201;
}

.user-settings-modal .modal-header {
  padding: 20px 40px 10px 40px;
}

.user-settings-modal h5 {
  color: #000;
}

.user-settings-modal .btn-primary {
  background: linear-gradient(180deg, #0094e7 0%, #005e93 100%);
  padding: 11px;
}

.user-settings-modal .modal-footer {
  border: none;
  padding-bottom: 30px;
  justify-content: center !important;
}

.user-settings-modal .modal-footer button {
  font-size: 18px;
  border-radius: 30px;
  padding: 15px 70px;
}

/* .user-settings-modal .popup-close-btn:hover{
    background-color: #ddd;
    border-radius: 50%;
    padding: 0px 7px;
} */
.user-settings-modal .modal-body .popup-box {
  overflow-y: scroll;
}

.user-settings-modal .modal-body .popup-box::-webkit-scrollbar {
  display: none;
}

.profile-tags-box-outer span {
  font-size: 12px;
}

.user-settings-modal .modal-body .profile-tag-btn {
  border: 1px solid #ddd;
  background: transparent;
  font-size: 14px;
  border-radius: 30px;
  padding: 6px 25px;
}

.profile-tag-selected {
  border: 1px solid #65acae;
  background: transparent;
  font-size: 14px;
  border-radius: 30px;
  padding: 6px 25px;
  color: #65acae;
  cursor: pointer;
}

.user-settings-modal .modal-body input {
  padding: 0px 15px;
}

.user-settings-modal .modal-body .textarea {
  height: 100px;
  padding: 10px 15px;
}

.user-settings-modal .modal-body .textarea:focus {
  outline: none;
}

.user-settings-modal .modal-body {
  padding: 20px 40px;
}

.modal-dialog .input-box input:focus {
  outline: none;
}

.user-settings-modal .popup-close-btn {
  background: transparent;
  border: none;
}

.label-style {
  font-family: Raleway;
  font-size: 18px;
  font-weight: 900;
  line-height: 19px;
  letter-spacing: 0em;
  text-align: left;
}

.creator-category-modal-btn {
  height: 45px;
  background-color: white;
  border-radius: 25px;
  border: none;
  width: 100%;
  margin-bottom: 20px;
  padding-left: 20px;
  padding-right: 20px;
}

.creator-category-modal-btn:hover {
  background-color: #f1f8ff !important;
}

/*Footer*/
footer p {
  font-family: "Raleway";
  font-style: normal;
  font-weight: 500;
  font-size: 18px;
  line-height: 171.4%;
  color: #616161;
}

footer li .nav-link {
  padding: 0 25px;
  font-family: "Raleway";
  font-style: normal;
  font-weight: 500;
  font-size: 18px;
  line-height: 21px;
  text-align: center;
  letter-spacing: 0.03em;
  color: #000000;
}

.copyright-div ul {
  list-style: none;
}

.copyright-div ul li {
  width: 40px;
  height: 40px;
  background-color: transparent;
  border: 1px solid #549a9c;
  border-radius: 30px;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  transition: background-color 0.3s;
}

.copyright-div ul li:hover {
  background-color: #549a9c;
}

.copyright-div ul li svg path {
  fill: #549a9c;
}

.copyright-div ul li:hover svg path {
  fill: white;
}

.copyright-div .icon:hover {
  background-color: #549a9c;
  border-radius: 30px;
}

.copyright-div .icon:hover path {
  fill: white;
}

.bg-ft-shape {
  /* background: linear-gradient(180deg, #e2eff8 0%, #f5ebf1 74.31%); */
  background: #effcfd;
  width: 120%;
  height: 200%;
  top: 0;
  left: -10%;
  z-index: -1;
}

/*Banner images*/
.ban-img {
  position: relative;
  z-index: 5;
}

.ban-img1 {
  top: 10%;
  right: 25%;
  width: 105px;
}

.ban-img2 {
  top: 21%;
  left: 11%;
  width: 85px;
  transform: rotateZ(-25deg);
  z-index: 6;
}

.ban-img3 {
  top: 19%;
  left: 26%;
  width: 70px;
}

.ban-img4 {
  bottom: 20.5%;
  right: 10%;
  width: 75px;
}

.ban-img5 {
  left: -3%;
  top: 11.5%;
  z-index: 7;
}

.ban-img6 {
  left: 40%;
  width: 180px;
  top: 35%;
  z-index: 6;
}

.ban-img7 {
  right: -15%;
  top: 6%;
  z-index: 6;
}

.ban-img8 {
  bottom: 9%;
  right: -10%;
  z-index: 5;
}

/*Hover Effects*/
.ban-wire-btn:hover {
  box-shadow: 0 2px 27px rgb(0 94 147 / 52%) !important;
}

.common-button-style-outline:hover {
  /* box-shadow: 7px 4px 71px -8px rgba(99,171,173,0.70); */
  box-shadow: 0px 0px 46px -8px rgba(99, 171, 173, 0.87);
}

.right-nav-btn:hover {
  box-shadow: 0 2px 27px rgb(0 94 147 / 52%) !important;
  color: #c9ecff;
}

.browse-catalog-banner .ban-wire-btn:hover,
.ban-wire-btn.active {
  background: linear-gradient(180deg, #0094e7 0%, #005e93 100%);
  color: #fff;
  box-shadow: none !important;
}

.inactive {
  opacity: 0;
}

/*Animations*/

.cylinder_wrap .cylinder-img1 {
  animation: audntr 6s linear 0s infinite;
}

@keyframes audntr {
  0% {
    height: 172px;
  }

  50% {
    height: 40px;
  }

  100% {
    height: 172px;
  }
}

.left-footimg {
  top: 50px;
  left: 0;
  opacity: 1;
  animation: cloud 16s linear 0s infinite;
  z-index: -1;
}

@keyframes cloud {
  0% {
    transform: translate3d(0px, 0px, 0) scale(0.75);
  }

  50% {
    transform: translate3d(150px, 50px, 0) scale(1.1);
  }

  100% {
    transform: translate3d(0px, 0px, 0) scale(0.75);
  }
}

.right-footimg {
  top: 50px;
  right: 0px;
  opacity: 1;
  animation: cloud2 16s linear 0s infinite;
  z-index: -1;
}

@keyframes cloud2 {

  /*from {right:-500px;}
    to {right: 102%;}*/
  0% {
    transform: translate3d(0px, 0px, 0);
  }

  50% {
    transform: translate3d(-150px, -50px, 0);
  }

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

@keyframes cloud_2 {

  /*from {right:-500px;}
    to {right: 102%;}*/
  0% {
    transform: translate3d(0px, 0px, 0);
  }

  50% {
    transform: translate3d(-80px, -30px, 0);
  }

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

@keyframes cloud_1 {

  /*from {right:-500px;}
    to {right: 102%;}*/
  0% {
    transform: translate3d(0px, 0px, 0);
  }

  50% {
    transform: translate3d(0px, -30px, -80px);
  }

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

.para-img {
  top: -50px;
  left: -10%;
  opacity: 1;
  animation: paraimg 16s linear 0s infinite;
  z-index: 22;
}

@keyframes paraimg {
  from {
    transform: translateY(0) scale(0.5);
    opacity: 1;
  }

  to {
    transform: translateY(250px) scale(1.2);
    opacity: 0;
  }
}

.plane-img {
  animation: planeimg 30s linear 0s infinite;
  right: 0%;
  top: 190px !important;
  width: 140px !important;
}

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

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

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

/* .circle-boy {
  animation: circleboy 4s linear 0s infinite;
} */

@keyframes circleboy {
  0% {
    transform: scale(1.3) translateX(50px);
  }

  50% {
    transform: scale(1.3) translateX(50px);
  }

  100% {
    transform: scale(1.3) translateX(50px);
  }
}

.ban-img1 {
  animation: banimg1 4s linear 0s infinite;
}

@keyframes banimg1 {
  0% {
    transform: translateY(0px) rotateZ(0deg);
  }

  50% {
    transform: translateY(80px) rotateZ(-30deg);
  }

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

.ban-img2 {
  animation: banimg2 8s linear 0s infinite;
}

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

  50% {
    transform: translateY(200px) translateX(55px);
  }

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

.ban-img3 {
  animation: banimg3 8s linear 0s infinite;
}

@keyframes banimg3 {
  0% {
    transform: rotate(0deg) translateX(0px);
  }

  100% {
    transform: rotate(-360deg) translateX(0px);
  }
}

.ban-img4 {
  animation: banimg4 2s linear 0s infinite;
}

@keyframes banimg4 {
  0% {
    transform: rotate(0deg);
  }

  50% {
    transform: rotate(-30deg);
  }

  100% {
    transform: rotate(0deg);
  }
}

.ban-img5 {
  animation: banimg5 2s linear 0s infinite;
}

@keyframes banimg5 {
  0% {
    transform: translateX(0px);
  }

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

  100% {
    transform: translateX(0);
  }
}

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

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

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

.ban-img7 {
  animation: banimg7 2s linear 0s infinite;
}

@keyframes banimg7 {
  0% {
    transform: translateX(0px);
  }

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

  100% {
    transform: translateX(0);
  }
}

.ban-img8 {
  animation: banimg8 4s linear 0s infinite;
}

@keyframes banimg8 {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

.social-icons img,
.social-icons {
  height: 70px;
  width: 70px;
  flex-shrink: 0;
}

.preferable-icons #list-view,
.preferable-icons #box-view {
  filter: grayscale(1);
}

#list-view:hover,
#box-view:hover {
  filter: grayscale(0);
}

/* check  */
/*Responsive*/
@media (min-width: 320px) and (max-width: 575px) {
  .reset_bar button.btn {
    padding: 10px;
    width: 50%;
    font-weight: 400;
  }

  .table-colm.bg-white {
    overflow-x: scroll;
  }

  .table-colm .bg-white::-webkit-scrollbar {
    display: none;
  }

  .logo-size {
    width: 150px;
    height: 44px;
    top: 21px;
    left: 201px;
  }

  .beta-logo {
    font-family: "Power Grotesk";
    text-align: center;
    font-weight: 900;
    color: white;
    font-size: 13px;
    letter-spacing: 1px;
    margin-left: 0px !important;
  }

  .beta-logo div {
    background-color: #549a9c;
    border-top-left-radius: 11px;
    border-bottom-right-radius: 11px;
    margin-top: 11px;
    padding: 4px 7px 2px 7px;
  }

  .verify-notice {
    width: auto;
    margin-left: 1rem;
    margin-right: 1rem;
    display: flex;
    flex-direction: column;
  }

  .add-profile-pic-section {
    margin-left: 1rem;
    margin-right: 1rem;
  }

  .reset_bar {
    display: block;
  }

  .sticky_bottom {
    bottom: -45px;
  }

  .rotate_box {
    left: 15px;
  }

  h1 {
    font-size: 36px;
    line-height: 50px;
  }

  h2 {
    font-size: 22px;
    line-height: 34px;
  }

  .third-section h2 {
    font-size: 18px;
    line-height: 24px;
  }

  .third-section .filter-dropdown {
    display: flex;
    justify-content: center;
    color: rgb(0, 102, 159);
    font-size: 23px;
  }

  .third-section .filter-responsive {
    display: block;
  }

  .map-section {
    display: none;
  }

  .browse-creator-btn {
    display: flex;
    justify-content: center;
    z-index: 1000 !important;
  }

  .browse-creator-btn .right-nav-btn {
    width: 80%;
    padding: 15px;
    font-size: 14px !important;
    z-index: 1000 !important;
  }

  .audience-section {
    display: none;
  }

  .creator-section p {
    font-weight: 500;
    font-size: 16px;
    line-height: 146%;
    color: #616161;
  }

  .creator-section p strong {
    color: #000;
  }

  .top_content h1 {
    font-family: Power Grotesk;
    font-size: 18px;
    font-weight: 900;
    line-height: 30px;
  }

  .top_content p {
    font-size: 12px !important;
    width: 100%;
  }

  /* .third-section .circle-boy {
    transform: none;
  } */

  .table-colm {
    overflow-x: auto;
  }

  .table-colm table {
    white-space: nowrap;
  }

  .third-section2 .common-button-style-outline,
  .third-section2 .ban-wire-btn {
    padding: 20px 20px;
    margin-top: 20px;
  }

  .footer-nav {
    flex-wrap: wrap;
    justify-content: flex-start !important;
  }

  .footer-nav li {
    width: 100%;
    padding-bottom: 15px;
  }

  .copyright-div p {
    text-align: center;
    padding-bottom: 20px;
  }

  .bg-ft-shape {
    width: 220%;
    left: -60%;
  }

  .button-box button,
  .button-box .common-button-style-outline {
    /* width: 80% !important; */
  }

  .button-box .right-nav-btn {
    margin-bottom: 20px;
  }

  .banner-section p {
    font-size: 20px;
  }

  #app {
    margin-left: 0;
    margin-top: 0;
    min-height: 75px;
    margin-bottom: 20px;
  }

  .ban-img-side {
    margin: 25px 0;
  }

  .cylinder_wrap,
  .third-section h6,
  .right-nav-btn,
  .ban-wire-btn,
  .common-button-style-outline {
    width: 100%;
  }

  .cylinder_wrap,
  /* .third-section h6,
  .right-nav-btn,
  .ban-wire-btn, */
  .common-button-style-filled {
    width: 100%;
  }



  .cylinder_wrap .cylinder-img1 {
    width: 150px;
    bottom: 55px;
  }

  /*moving img*/
  .bitcoin_1 {
    width: 8%;
  }

  .ban-img7 {
    width: 50%;
    right: -17px;
  }

  .ban-img5 {
    width: 35%;
    left: 0%;
  }

  .ethereum_1 {
    left: 0;
    width: 10%;
  }

  .para-img {
    left: -10%;
  }

  .ethereum_table,
  .circle_yello_table,
  .circle_table,
  .bitcoin_table,
  .table_dlr_left {
    display: none;
  }

  .left-footimg {
    top: 80%;
    left: -20%;
    width: 45%;
  }

  .right-footimg {
    width: 40%;
    right: -20%;
  }

  .ban-img8 {
    right: -5%;
    width: 50px;
    bottom: 4%;
  }

  .circle_3 {
    position: absolute;
    top: 40px;
    right: -150px;
    width: 20px;
  }

  .common-button-style-outline,
  .ban-wire-btn {
    padding: 20px 10px;
  }

  @keyframes circleboy {
    0% {
      transform: scale(1.1) translateX(0px);
    }

    50% {
      transform: scale(1.1) translateX(0px);
    }

    100% {
      transform: scale(1.1) translateX(0px);
    }
  }

  #navbarSupportedContents .modal.show .modal-dialog {
    /* top: 8%; */
  }

  .creator-signup-feilds {
    /* height: 47rem !important; */
  }

  .range_value {
    margin-left: -3rem;
  }

  .creator-signup-inside-logo {
    /* display: none; */
  }

  #navbarSupportedContents .brand-modal-content {
    /* height: 28rem !important; */
  }

  div#navbarSupportedContentMobile {
    /* height: auto !important;
    width: 16rem !important;
    padding: 1rem !important;
    padding-bottom: 2rem !important; */
  }

  .phoneFont {
    display: flex;
    justify-content: center;
    font-size: 0.75rem;
    text-align: center;
    padding: 0px !important;
  }

  .mobile-row {
    display: flex !important;
    flex-direction: row !important;
  }

  .mobile-col {
    display: flex !important;
    flex-direction: column !important;
  }

  .wm-50 {
    width: 50% !important;
  }

  .wm-100 {
    width: 100% !important;
  }

  .text-sm-center {
    text-align: center;
  }

  .hide-show-icon-login {
    top: 13px;
  }

  .categories-dashboard .fixed-secondary-bar {
    border-radius: 16px;
  }

  .ant-select-auto-complete {
    margin-bottom: 1rem;
  }

  .search-tag-position {
    top: -0.3rem;
  }

  .reset-all-filter-icon {
    border-radius: 12px;
    justify-content: center;
    margin-bottom: 1rem;
  }

  .image-overlay-container {
    /* width: 10rem; */
    /* height: 10rem; */
    /* margin: 0.5rem; */
    border-radius: 12px;
  }

  .image-overlay {
    /* border-radius: 12px; */
  }

  .creator-campaign-image {
    border-radius: 12px;
  }

  .brand-catalogue-box {
    /* padding-left: 1rem;
    padding-right: 1rem; */
    /* padding-top: 1.5rem; */
  }

  .brand-catalogue-tag {
    left: 0.6rem;
    bottom: 0.7rem;
  }

  .brand-catalogue-tag div {
    /* font-size: 14px;
    line-height: 15px;
    margin-bottom: 3px; */
  }

  .verified-tag svg {
    margin: 5px;
  }

  .verified-tag {
    max-width: 90px;
    min-width: 90px;
    margin-left: 5px;
  }

  /* Creator Campaigns - Mobile Design */
  .campaign-other-filters {
    flex-direction: column;
    margin-right: 0px !important;
    margin-left: 0px !important;
  }

  .categories-dashboard .campaigns-fixed-secondary-bar {
    width: 92%;
    /* z-index: unset; */
    /* z-index: 1; */
    position: unset;
  }

  .dropdown-box {
    position: relative;
  }

  .inner-dropdown {
    top: 2rem;
  }

  .creator-campaign-tag div {
    /* font-size: 12px;
    text-wrap: wrap;
    line-height: 15px;
    margin-right: 1rem;
    font-weight: bold; */
  }

  .creator-campaign-tag .brand-name {
    /* font-size: 12px; */
  }

  .campaign-social {
    /* top: 1rem;
    right: 1rem; */
  }

  .hide-on-phone {
    display: none !important;
  }

  .row>* {
    padding-right: 0px;
    padding-left: 0px;
    margin-left: 0px;
  }

  .row {
    /* margin-left: 0px !important; */
  }

  .date-picker-button {
    width: 100%;
    text-align: center;
    justify-content: center;
  }

  .reset-all-filter-icon {
    border-radius: 30px;
  }

  .location-search {
    margin-left: 0px;
  }

  .iconBox {
    width: 100% !important;
  }

  .catalogueIcon {
    width: 100%;
    height: 2rem;
    padding: 0.35rem;
    border-radius: 30px;
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
  }

  .selectedCatalogueIcon {
    width: 100%;
    height: 2rem;
    padding: 0.35rem;
    border-radius: 30px;
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
  }

  .creators-heading {
    font-size: 24px;
  }

  .fav-creators-style {
    font-size: 16px;
  }

  .creator-inside-info td span {
    font-size: 12px;
  }

  .collaborationsCatalogue .searchBar {
    flex-direction: column !important;
  }

  .searchBar {
    border-radius: 16px !important;
    padding: 16px 14px !important;
  }

  .collaborationsCatalogue .innerSection {
    flex-direction: column !important;
    margin-left: 0px !important;
  }

  .innerSection .dropDown {
    padding: 0.5rem 1rem !important;
  }

  .notificationPanel {
    width: 80vw !important;
  }

  .brand-profile-image {
    border: 1px solid rgba(84, 154, 156, 0.5);
  }

  .sm-align-to-center {
    justify-content: center;
    display: flex;
    margin: 0 auto;
  }

  .creatorProfileDetail li {
    width: unset !important;
    height: unset !important;
    margin: 0px !important;
    padding: 0.5rem 0.25rem !important;
    font-size: 12px !important;
  }

  .no-border-phone {
    border: unset !important;
  }

  .confirmationText {
    font-size: 16px !important;
    font-weight: 600 !important;
    text-align: center;
  }

  .campaign-detail-outer-box2 {
    margin: 2rem auto !important;
  }

  .profile-image-sm {
    width: 2rem;
    height: 2rem;
    border: 1px solid rgba(84, 154, 156, 0.5);
  }

  .margin-left {
    margin: 0px;
  }

  .delete-btn {
    font-size: 14px;
  }

  .campaign-offered-box1 {
    margin-bottom: 0.5rem !important;
  }

  .campaign-desc-box .category-btn {
    margin-top: 1rem !important;
    border-radius: 16px;
    padding: 10px 12px;
    font-size: 12px;
    line-height: 16px;
  }

  .tag-bg {
    max-width: 100%;
    width: 100%;
  }

  .tag-info {
    width: unset;
    max-width: unset;
    /* position: unset; */
  }

  .user-profile-box-outer .user-profile-box-inner {
    width: 100%;
  }

  .pack-delivery {
    right: 4rem;
  }

  .creator-pack-overlay {
    width: 98%;
  }

  .creator-pack-image {
    width: 98%;
  }

  .brand-detail-outer-box {
    text-align: center !important;
  }

  .social-link {
    font-size: 12px;
    line-height: 1.5rem;
  }

  .creator-campaign-tag {
    left: 1rem;
  }

  .color-span {
    width: 100%;
    border-radius: 30px;
    margin-bottom: 1rem;
  }

  .campaign-detail-image {
    border-radius: 14px;
    margin-bottom: 1rem;
    border: 1px solid rgba(84, 154, 156, 0.5);
    width: 100%;
    object-fit: cover;
  }

  .campaign-details-status-pos {
    width: 100%;
    margin-left: 0px;
    align-items: center;
  }

  .campaign-details-status-pos h4 {
    font-size: 18px;
    margin-bottom: 0px;
  }

  .campaign-details-status-pos .status-tag {
    width: auto;
    height: auto;
    font-size: 12px;
    padding: 0.5rem 0.5rem;
  }

  .campaign-details-section {
    /* width: 100%;
    margin-left: 0px;
    border-radius: 16px;
    padding: 1rem; */
  }

  .campaign-details-section .view-offer-modal-bottom div {
    font-size: 12px;
    font-weight: bold;
    line-height: 24px;
  }

  .profile-name {
    font-size: 18px;
    line-height: 36px;
    text-align: center;
  }

  .accepted-collabs {
    width: auto;
    border-radius: 24px;
    font-size: 12px;
    padding: 0.5rem 1rem;
  }

  .packCatalogue .createPackButton {
    width: 60% !important;
    padding: 0.5rem 1rem !important;
  }

  .packCatalogue .leaveEmptySpace {
    width: 100% !important;
  }

  .packCatalogue .emptySpace {
    flex: 1 !important;
  }

  .packDetails .packCount {
    font-size: 18px !important;
    font-weight: bold !important;
    margin-bottom: 1rem !important;
  }

  .packDetails .packTitle {
    font-size: 16px !important;
    font-weight: bold !important;
    flex: 4 !important;
  }

  .packColumnRight .smallHeading {
    font-size: 12px !important;
    font-weight: bold !important;
  }

  .packDetails .packColumnRight {
    flex: 4 !important;
  }

  .packDetails .packImage {
    height: 6rem !important;
    border-radius: 12px !important;
    width: 6rem !important;
    border: 1px solid rgba(84, 154, 156, 0.5);
  }

  .packDetails .packContent {
    font-size: 16px !important;
    line-height: 32px !important;
  }

  .packDetails .deleteButton,
  .packDetails .editButton {
    padding: 0.75rem 2rem !important;
  }

  .profileTagHeading {
    font-size: 12px !important;
    font-weight: bold !important;
  }

  .profileTagDescription {
    font-size: 12px !important;
  }

  .packHeading {
    margin-left: 1rem !important;
    margin-top: 1rem !important;
    font-size: 26px !important;
    font-weight: bold !important;
  }

  .packContainerBackground {
    margin: 0.5rem !important;
    padding: 1rem !important;
  }

  .columnOne .fieldsRow .dropDown,
  .packContainerBackground input {
    padding: 0.5rem 1rem !important;
  }

  .dropDown {
    margin-bottom: 0.5rem;
  }

  .perText {
    /* text-align: center !important;
    justify-content: center !important; */
  }

  .descriptionTextBox .counterText {
    margin-top: 0px !important;
  }

  .buttonsRow .cancelButton,
  .buttonsRow .saveButton {
    padding: 0.75rem 2rem !important;
    margin-left: 0.25rem;
    margin-right: 0.25rem;
  }

  .shortRow .imageContainer {
    border-radius: 16px !important;
  }

  .container-box-style {
    margin: 0rem 1rem;
    width: 90%;
  }

  .help-center-container .help-center-search-box {
    width: 100%;
  }

  .help-center-container .help-center-card-box .help-center-content-box h3 {
    line-height: normal;
  }

  .help-center-container .help-center-card-icon {
    width: 6rem;
    justify-content: left;
    display: flex;
  }

  .help-center-container .help-center-card-box {
    padding: 1.5rem;
    border-radius: 16px;
  }

  .about-us-text {
    font-size: 12px;
    line-height: normal;
  }

  .custom-height .col-4 .about-us-single-box,
  .custom-height {
    height: auto;
  }

  .about-us-box {
    margin-bottom: 1rem;
  }
}

@media (max-width: 767px) {
  .notificationPanel {
    width: 80vw !important;
  }
}


@media (min-width: 576px) and (max-width: 767px) {
  h1 {
    font-size: 50px;
    line-height: 65px;
  }

  h2 {
    font-size: 36px;
    line-height: 46px;
  }

  h4 {
    font-size: 24px;
  }

  .creator-section .para-img {
    width: 100px !important;
    left: -3%;
    top: 10%;
  }

  /* .third-section .circle-boy {
    transform: scale(1) translateX(0);
    padding-bottom: 50px;
  } */
  .third-section2 .common-button-style-outline,
  .third-section2 .ban-wire-btn {
    padding: 20px 20px;
    margin-top: 20px;
  }

  .table td {
    font-size: 16px;
  }

  .table th {
    font-size: 14px;
  }

  footer p {
    width: 100% !important;
  }

  .bg-ft-shape {
    width: 140%;
    height: 150%;
    top: 0;
    left: -20%;
  }

  .footer-nav {
    flex-wrap: wrap;
    justify-content: flex-start !important;
  }

  .footer-nav li {
    width: 50%;
    padding-bottom: 15px;
  }

  .copyright-div p {
    text-align: center;
    padding-bottom: 20px;
  }

  /*moving img*/
  .bitcoin_1 {
    width: 8%;
  }

  .ban-img7 {
    width: 50%;
    right: -17px;
  }

  .ban-img5 {
    width: 35%;
    left: 0%;
  }

  .ethereum_1 {
    left: -14px;
    width: 8%;
  }

  .para-img {
    left: -40px;
  }

  .ethereum_table {
    right: -15px;
  }

  .circle_yello_table {
    right: -30px;
  }

  .circle_table {
    right: -10px;
  }

  .bitcoin_table {
    right: 20px;
    bottom: -25px;
  }

  .left-footimg {
    top: 70%;
    left: 0;
    width: 35%;
  }

  .right-footimg {
    width: 30%;
  }

  .ban-img8 {
    right: -9%;
  }

  .user-profile-box-outer .user-profile-box-inner {
    width: 100%;
  }

  @keyframes circleboy {
    0% {
      transform: scale(1.1) translateX(0px);
    }

    50% {
      transform: scale(1.1) translateX(0px);
    }

    100% {
      transform: scale(1.1) translateX(0px);
    }
  }

  @keyframes cloud {
    0% {
      transform: translate3d(0px, 0px, 0) scale(0.75);
    }

    50% {
      transform: translate3d(60px, 30px, 0) scale(1);
    }

    100% {
      transform: translate3d(0px, 0px, 0) scale(0.75);
    }
  }

  .mobile-col-v2 {
    display: flex !important;
    flex-direction: column !important;
  }
}

@media screen and (max-width: 768px) {
  .campaign-welcm {
    padding-right: 0px;
  }

  .campaign-welcm h1 {
    font-size: 22px;
    margin-bottom: 0px;
  }

  /* .campaign-category-box {
    overflow-y: scroll;
  }

.campaign-category-box::-webkit-scrollbar {
  display: none;
} */

  .campaign-faq-section-main h3 {
    font-size: 18px;
    line-height: 22px;
  }

  .campaign-welcm p {
    font-size: 14px;
    margin: 15px 0px 25px 0px;
  }

  .campaign-welcm .lets-go-btn,
  .button-box .next-btn {
    padding: 10px 45px;
    font-size: 14px;
  }

  .campaign-images-sec .inner-curve .sec-img {
    height: 350px;
  }

  .search-bar-input-content {
    display: block;
  }

  .search-bar-input-search {
    width: 55%;
  }

  .ant-select-selection-search-input,
  .pac-target-input {
    padding-left: 30px;
    font-size: 10px;
  }

  .change-view-catalogue-main {
    margin-top: 12px;
    margin-left: 12px;
  }

  .dropdown-button {
    padding: 10px 16px 12px 16px;
  }

  .dropdown-button p {
    font-size: 10px;
    margin-right: 8px;
  }

  .profile-outer-box {
    /* gap: 20px;
    display: block !important; */
  }

  .brand-listing-table table .person-name-dark,
  .brand-listing-table table .person-name-light {
    font-size: 10px;
  }

  .profile-inner2 {
    width: 100%;
    line-height: 15px;
  }

  .brand-listing-table table tr td {
    font-size: 12px;
  }

  #brand-detail-listing-table .table-category-btn {
    margin-bottom: 10px;
  }

  .categories-dashboard {
    /* padding: 10px 0px !important; */
  }

  .change-view-catalogue-main {
    width: 45px;
    margin-top: 0px;
  }

  .brand-bar-input {
    display: flex !important;
  }

  .campaign-sec-label {
    font-size: 11px;
  }

  .campaign-box-detail {
    display: block !important;
  }

  .campaign-categories,
  .campaign-profile {
    width: 100%;
    margin-bottom: 20px;
  }

  .campaign-box-detail .campaign-categories:nth-child(3) {
    width: 100%;
  }

  .campaign-categories li,
  .collab-indv-sec li {
    padding: 10px 45px;
  }

  .campaign-box-detail .campaign-categories:nth-child(3) {
    border-right: none;
    border-left: none;
    padding: 0 0px;
    margin: 0 0px;
  }

  .campaigns-img-sec {
    display: block !important;
  }

  .img-text-campaign-set {
    width: 100%;
    margin-bottom: 40px;
  }

  .campaign-categories-box {
    justify-content: start !important;
    margin-top: 25px;
  }

  .creators-detail .dollor-coin {
    left: -3%;
    z-index: 9999;
    top: 45px;
  }

  .creators-detail .ethereum {
    z-index: 999;
  }

  .creators-detail .ethereum {
    top: 17%;
  }

  .creator-detail-center-box {
    margin-left: 40px;
  }

  .content-img-box {
    width: 100% !important;
    margin-bottom: 50px;
  }

  .creators-detail .bitcoin {
    z-index: 999;
    position: absolute;
    top: 10%;
  }

  .creator-detail-top-box ul {
    flex-wrap: unset !important;
  }
}

@media screen and (max-width: 991px) {
  .navbar-toggler[aria-expanded="true"] span:before {
    content: "X";
    font-size: 24px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #000;
  }

  .navbar-toggler[aria-expanded="true"] span {
    background: none;
    position: relative;
  }

  .navbar-toggler[aria-expanded="true"] {
    border: 1px solid;
  }

  .navbar-nav a {
    margin: 5px 0;
  }

  div#navbarSupportedContent {
    /* background: #fff;
    z-index: 1;
    padding: 45px 22px;
    border-radius: 8px;
    box-shadow: 0 10px 20px rgb(0 0 0 / 12%), 0 2px 10px rgb(0 0 0 / 7%); */
  }

  div#navbarSupportedContentMobile {
    /* position: absolute;
    right: 15px;
    top: 65px;
    background: #fff;
    z-index: 110;
    padding: 45px 22px;
    border-radius: 8px;
    box-shadow: 0 10px 20px rgb(0 0 0 / 12%), 0 2px 10px rgb(0 0 0 / 7%);
    height: 430px;
    width: 300px;
    list-style: none; */
  }

  div#navbarSupportedContentMobile .nav-box Link,
  div#navbarSupportedContentMobile .nav-box li {
    /* margin: 10px auto;
    border-bottom: 1px solid lightgray;
    width: 100%; */
  }

  .activeMob {
    color: #549a9c;
    font-weight: 700;
  }

  div#navbarSupportedContent .d-flex.m-0.align-items-center {
    padding: 0;
    flex-wrap: wrap;
    flex-direction: column;
    align-items: flex-start !important;
  }

  div#navbarSupportedContent .d-flex.m-0.align-items-center button {
    width: 100%;
  }

  div#navbarSupportedContent .d-flex .nav-icon {
    margin: 8px 0;
  }

  .navbar-toggler:focus {
    box-shadow: none;
  }

  .dropdown.w-100 {
    text-align: center;
  }

  .ban-img-side {
    margin: 50px 0;
  }
}

@media (max-width: 1024px) {
  .navbar-expand-lg .navbar-toggler {
    /* display: block; */
  }

  .creator-deatil-section h5 {
    font-size: 15px;
  }

  .creators-profile-detail li {
    font-size: 12px;
    padding: 10px 15px;
    margin: 15px 0px 0 0;
  }

  .creator-detail-top-box ul li {
    width: 100%;
    font-size: 14px;
    margin: 15px 8px 0 0;
    padding: 15px 40px;
    border-radius: 25.5px;
  }

  .creators-detail .ethereum,
  .creators-detail .dollor-coin,
  .creators-detail .purple-circle,
  .creators-detail .yellow-circle,
  .creators-detail .bitcoin {
    z-index: 9999;
  }

  .creators-detail .dollor-coin {
    left: 1%;
  }

  .campaign-img-box {
    margin: 10px 0px !important;
  }

  .desc-text {
    font-size: 14px;
    line-height: 25px;
  }
}

@media (min-width: 992px) {
   .navbar-expand-lg .navbar-toggler.navbar-custom {
        display: block;
    }
}

@media (min-width: 992px) and (max-width: 1199px) {
  h1 {
    font-size: 60px;
    line-height: 75px;
  }

  h2 {
    font-size: 28px;
    line-height: 40px;
  }

  .creator-section .para-img {
    width: 120px !important;
    left: -20px;
    top: 10%;
  }

  .cylinder-img {
    width: 70%;
  }

  /* .third-section .circle-boy {
    transform: scale(1.2) translateX(-40px);
  } */
  .third-section2 .common-button-style-outline,
  .third-section2 .ban-wire-btn {
    padding: 20px 20px;
    font-size: 16px;
  }

  .bg-ft-shape {
    width: 140%;
    left: -20%;
  }

  /*moving img*/
  .bitcoin_1 {
    width: 8%;
  }

  .ban-img7 {
    width: 50%;
    right: -8%;
  }

  .ban-img5 {
    width: 36%;
  }

  .ethereum_1 {
    left: -14px;
    width: 8%;
  }

  .para-img {
    left: -40px;
  }

  .ethereum_table {
    right: -15px;
  }

  .circle_yello_table {
    right: -30px;
  }

  .circle_table {
    right: -10px;
  }

  .bitcoin_table {
    right: 20px;
    bottom: -25px;
  }

  .left-footimg {
    top: -5%;
    left: -5%;
    width: 20%;
  }

  .right-footimg {
    width: 20%;
  }
}

.custom-height-campaign .campaign-sec-label {
  width: 90%;
}

/* my laptop screen SECTION START  */
@media (min-width: 1200px) and (max-width: 1399px) {
  .create-pack-dollar-icon {
    position: absolute;
    /* top: 15px;
    left: 8px; */
  }

  .change-img {
    left: 40px;
    top: 300px;
  }

  .custom-height-campaign {
    height: 370px;
    overflow-y: auto;
  }

  .profile-complete .dropdown-box .dropdown-button {
    width: 200px !important;
  }

  .profile-complete .dropdown-box .inner-dropdown {
    top: 370px !important;
    height: 170px !important;
    width: 200px !important;
  }

  .campaign-social {
    display: inline-block;
    position: absolute;
    /* top: 20px;
    right: 10px; */
  }

  .navbar-collapses {
    display: block !important;
    z-index: 10000 !important;
  }

  .animation-box .bottom-animation {
    position: absolute;
    top: -60px;
    z-index: 1000;
  }

  .animation-box .top-animation {
    position: absolute;
    top: -620px;
    z-index: 1000;
  }

  /* ANIMATION RESPONSIVENESS  */
  .animation-item .anim-1 {
    right: 140px;
    top: 480px;
  }

  .animation-item .anim-2 {
    right: 650px;
    top: 400px;
  }

  .animation-item .anim-3 {
    right: -30px;
    top: 120px;
  }

  .animation-item .anim-4 {
    right: -30px;
    top: 290px;
  }

  .animation-item .anim-5 {
    right: 460px;
    top: 100px;
  }

  .animation-item .anim-6 {
    right: 70px;
    top: 0px;
  }

  .animation-item .anim-7 {
    right: 430px;
    top: 0px;
  }

  @keyframes rotateAnimation {
    0% {
      transform: rotate(0deg);
    }

    100% {
      transform: rotate(360deg);
    }
  }

  .animation-item .anim-5 img,
  .animation-item .anim-3 img {
    animation: rotateAnimation 6s linear infinite;
  }

  @keyframes bounceAnimation {

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

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

  .animation-item .anim-1 img,
  .animation-item .anim-4 img,
  .animation-item .anim-7 img {
    animation: bounceAnimation 4s ease-in-out infinite;
  }

  @keyframes horizontalBounceAnimation {

    0%,
    100% {
      transform: translateX(0);
    }

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

  .animation-item .anim-6 img,
  .animation-item .anim-2 img {
    animation: horizontalBounceAnimation 6s ease-in-out infinite;
  }

  /* APPLY FILTER SECTION  */
  .animation-item .anim-8 {
    right: 850px;
    top: 340px;
  }

  .animation-item .anim-9 {
    left: 180px !important;
    top: 145px !important;
  }

  .animation-item .anim-10 {
    left: 30x !important;
    top: 120px !important;
  }

  .animation-item .anim-11 {
    right: -30px !important;
    top: 200px !important;
  }

  .animation-item .anim-12 {
    right: -50px !important;
    top: 500px;
  }

  .animation-item .anim-13 {
    right: 1700px;
    top: 680px;
  }

  .animation-item .anim-14 {
    right: 270px;
    top: 280px;
  }

  @keyframes moveDiagonalLeft {
    0% {
      left: 20px;
    }

    100% {
      left: -200px;
      /* Adjust this value based on how far you want it to move */
    }
  }

  .animation-item .anim-10 {
    animation: moveDiagonalLeft 5s linear infinite;
    /* Adjust the duration and timing function as needed */
    top: 80px;
    /* Initial position */
    left: 20px;
    /* Initial position */
  }

  @keyframes rotate {
    0% {
      transform: rotate(0deg);
    }

    100% {
      transform: rotate(360deg);
      /* Full rotation */
    }
  }

  .animation-item .anim-8,
  .animation-item .anim-12,
  .animation-item .anim-14 {
    animation: rotate 6s linear infinite;
    /* Adjust the duration and timing function as needed */
  }

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

    50% {
      transform: translateY(-20px);
      /* Adjust the distance as needed */
    }

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

  .animation-item .anim-13 {
    animation: moveUpDown 2s linear infinite;
    /* Adjust the duration and timing function as needed */
    top: 620px;
    /* Initial position */
    right: 1150px;
    /* Initial position */
  }

  .animation-item .anim-11 {
    animation: moveUpDown 2s linear infinite;
    /* Adjust the duration and timing function as needed */
    top: 150px;
    /* Initial position */
    right: 200px;
    /* Initial position */
  }

  @keyframes moveHorizontal {
    0% {
      left: 550px;
      /* Initial position */
    }

    50% {
      left: 570px;
      /* Adjust the distance as needed */
    }

    100% {
      left: 550px;
    }
  }

  .animation-item .anim-9 {
    animation: moveHorizontal 3s linear infinite;
    /* Adjust the duration and timing function as needed */
    left: 180px !important;
    top: 145px;
  }

  /* TABLE SECTION  */
  .animation-item .anim-15 {
    left: 700px;
    top: 850px;
  }

  .animation-item .anim-16 {
    left: 150px;
    top: 550px;
  }

  .animation-item .anim-17 {
    top: 750px;
    right: 150px;
  }

  .animation-item .anim-18 {
    left: 800px;
    top: 100px;
  }

  .animation-item .anim-19 {
    right: 500px;
    top: 750px;
  }

  @keyframes rotatePPlus {
    0% {
      transform: rotate(0deg);
    }

    100% {
      transform: rotate(360deg);
      /* Full rotation */
    }
  }

  .animation-item .anim-15 {
    animation: rotatePPlus 6s linear infinite;
    /* Adjust the duration and timing function as needed */
    left: 450px;
    top: 700px;
  }

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

    50% {
      transform: translateY(-20px);
      /* Adjust the distance as needed */
    }

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

  .animation-item .anim-16,
  .animation-item .anim-17,
  .animation-item .anim-18 {
    animation: moveUpDownNewCircle 4s linear infinite;
    /* Adjust the duration and timing function as needed */
    width: 30px;
    /* Adjust the width as needed */
  }

  /* Position them individually */
  .animation-item .anim-16 {
    left: 150px;
    top: 550px;
  }

  .animation-item .anim-17 {
    top: 550px;
    right: 35px;
  }

  .animation-item .anim-18 {
    left: 580px;
    top: -40px;
  }

  @keyframes moveHorizontalCircle {
    0% {
      left: 1150px;
      /* Initial position */
    }

    50% {
      left: 1155px;
      /* Adjust the distance as needed */
    }

    100% {
      left: 1200px;
      /* Initial position */
    }
  }

  .animation-item .anim-19 {
    animation: moveHorizontalCircle 5s linear infinite;
    /* Adjust the duration and timing function as needed */
    width: 20px;
    /* Adjust the width as needed */
    left: 1150px;
    top: 680px;
  }

  /* ANIMATION RESPONSEIVENESS  */
  .filter-sec .para-img {
    position: absolute !important;
    left: 650px !important;
    top: -300px !important;
    width: 100px !important;
  }

  .first-sec .cloud-position {
    top: -50px !important;
    position: absolute;
    z-index: 900 !important;
    right: 550px !important;
    width: 200px;
  }

  .filter-sec .cloud-position {
    top: 10px !important;
    position: absolute;
    z-index: 900 !important;
    right: 250px !important;
    width: 200px;
  }

  .sec-height {
    height: 700px;
  }

  .section-color .third-section .container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    /* Vertically centers the contents */
    align-items: center;
    /* Horizontally centers the contents */
    height: 100vh;
    /* Optionally set a specific height for vertical alignment */
  }

  /* Add this CSS to your stylesheet */
  .image-container {
    position: relative;
    /* Establishes a positioning context */
    display: inline-block;
    /* Ensures the container wraps its content */
  }

  /* .image-container .circle-boy {
    width: 80%;
  } */
  /* .white-circle {
  position: absolute;
  top: 50%; 
  left: 80%; 
  transform: translate(-50%, -50%); 
  background: linear-gradient(
    200.45deg,
    #ffffff -4.16%,
    rgba(255, 255, 255, 0) 126.41%
  );
  width: 610px; 
  height: 610px;
  border-radius: 50%; 
} */
  .top_content .LP-heading {
    font-family: Raleway;
    font-size: 45px;
    font-weight: 700;
    /* line-height: 77px; */
    text-align: left;
  }

  .top_content p {
    font-family: Raleway;
    font-size: 15px !important;
    font-weight: 500;
    line-height: 40px;
    letter-spacing: 0em;
    text-align: left;
    color: #818383;
    width: 85%;
    margin: 30px 0;
  }

  .arrow-1 {
    left: -170px;
    top: 90px;
  }

  .arrow-2 {
    top: 440px;
    left: -150px;
  }

  .creator_content h3 {
    font-family: "Raleway";
    font-size: 43px;
    font-weight: 700;
    line-height: 61px;
    letter-spacing: 0em;
    text-align: left;
  }

  /* .section-color {
      background-color: black;
    } */
  .arrow-filled {
    left: -70px;
    top: 70px;
    width: 50%;
    height: 90%;
  }

  h1 {
    font-size: 65px;
    line-height: 75px;
  }

  .third-section2 .common-button-style-outline,
  .third-section2 .ban-wire-btn {
    padding: 20px 30px;
  }

  .ban-img7 {
    width: 50%;
    right: -8%;
  }

  .ban-img5 {
    width: 36%;
  }

  .ethereum_1 {
    left: -30px;
  }

  .para-img {
    left: -10%;
    top: 15%;
  }

  .ethereum_table {
    right: -15px;
  }

  .circle_yello_table {
    right: -30px;
  }

  .circle_table {
    right: -10px;
  }

  .bitcoin_table {
    right: 20px;
    bottom: -25px;
  }

  .left-footimg {
    top: -5%;
    left: -5%;
    width: 20%;
  }

  .right-footimg {
    width: 20%;
  }

  .filters-height {
    height: 600px;
  }
}

/* my laptop screen SECTION END*/

/* IPAD SCREEN SIZE START */

@media (min-width: 768px) and (max-width: 1199px) {
  .create-pack-dollar-icon {
    position: absolute;
    /* top: 15px;
    left: 6px; */
  }

  .search-bar-input-container {
    width: 75%;
  }

  .modal-dialog {
    /* max-width: 720px !important; */
  }

  .modal-dialog .brand-signup-feilds {
    width: 740px !important;
  }

  .signup-option {
    height: 400px !important;
  }

  .signup-option .creator-signup-btn,
  .signup-option .brand-signup-btn {
    width: 60% !important;
  }

  .brand-signup-feilds {
    /* height: 550px !important; */
  }

  .modal-footer .signup-btn {
    width: 50% !important;
  }

  .creator-signup-feilds {
    /* height: 500px !important; */
  }

  .login-options .creator-sign-up,
  .login-options .brand-sign-up {
    width: 50% !important;
  }

  .navbar-collapses {
    display: block !important;
    z-index: 10000 !important;
  }

  .animation-box .bottom-animation {
    position: absolute;
    top: 0px;
    z-index: 1;
  }

  .animation-box .top-animation {
    position: absolute;
    top: -540px;
    z-index: 1;
  }

  .md-height {
    height: 900px;
  }

  /* ANIMATION RESPONSIVENESS  */
  .animation-item .anim-1 {
    right: 60px;
    top: 400px;
  }

  .animation-item .anim-2 {
    right: 350px;
    top: 390px;
  }

  .animation-item .anim-3 {
    right: -40px;
    top: 150px;
  }

  .animation-item .anim-4 {
    right: -100px;
    top: 250px;
  }

  .animation-item .anim-4 img {
    width: 50%;
  }

  .animation-item .anim-5 {
    right: 305px;
    top: 95px;
  }

  .animation-item .anim-6 {
    right: 20px;
    top: 50px;
  }

  .animation-item .anim-7 {
    right: 320px;
    top: 50px;
  }

  @keyframes rotateAnimation {
    0% {
      transform: rotate(0deg);
    }

    100% {
      transform: rotate(360deg);
    }
  }

  .animation-item .anim-5 img,
  .animation-item .anim-3 img {
    animation: rotateAnimation 6s linear infinite;
  }

  @keyframes bounceAnimation {

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

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

  .animation-item .anim-1 img,
  .animation-item .anim-4 img,
  .animation-item .anim-7 img {
    animation: bounceAnimation 4s ease-in-out infinite;
  }

  @keyframes horizontalBounceAnimation {

    0%,
    100% {
      transform: translateX(0);
    }

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

  .animation-item .anim-6 img,
  .animation-item .anim-2 img {
    animation: horizontalBounceAnimation 4s ease-in-out infinite;
  }

  /* APPLY FILTER SECTION  */
  .animation-item .anim-8 {
    right: 970px;
    top: 240px;
  }

  .animation-item .anim-9 {
    left: 50px !important;
    top: 5px !important;
  }

  .animation-item .anim-10 {
    left: 430x !important;
    top: 120px !important;
  }

  .animation-item .anim-11 {
    right: 50px !important;
    top: 105px !important;
  }

  .animation-item .anim-12 {
    right: 0px;
    top: 440px;
  }

  .animation-item .anim-13 {
    right: 700px !important;
    top: 580px !important;
  }

  .animation-item .anim-14 {
    right: 390px;
    top: 185px;
  }

  @keyframes moveDiagonalLeft {
    0% {
      left: 20px;
    }

    100% {
      left: -200px;
      /* Adjust this value based on how far you want it to move */
    }
  }

  .animation-item .anim-10 {
    animation: moveDiagonalLeft 5s linear infinite;
    /* Adjust the duration and timing function as needed */
    top: 80px;
    /* Initial position */
    left: 20px;
    /* Initial position */
  }

  @keyframes rotate {
    0% {
      transform: rotate(0deg);
    }

    100% {
      transform: rotate(360deg);
      /* Full rotation */
    }
  }

  .animation-item .anim-8,
  .animation-item .anim-12,
  .animation-item .anim-14 {
    animation: rotate 6s linear infinite;
    /* Adjust the duration and timing function as needed */
  }

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

    50% {
      transform: translateY(-20px);
      /* Adjust the distance as needed */
    }

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

  .animation-item .anim-13 {
    animation: moveUpDown 2s linear infinite;
    /* Adjust the duration and timing function as needed */
    top: 620px;
    /* Initial position */
    right: 1300px;
    /* Initial position */
  }

  .animation-item .anim-11 {
    animation: moveUpDown 2s linear infinite;
    /* Adjust the duration and timing function as needed */
    top: 150px;
    /* Initial position */
    right: 200px;
    /* Initial position */
  }

  @keyframes moveHorizontal {
    0% {
      left: 550px;
      /* Initial position */
    }

    50% {
      left: 570px;
      /* Adjust the distance as needed */
    }

    100% {
      left: 550px;
    }
  }

  .animation-item .anim-9 {
    animation: moveHorizontal 3s linear infinite;
    /* Adjust the duration and timing function as needed */
    left: 280px;
    top: 45px;
  }

  /* TABLE SECTION  */
  .animation-item .anim-15 {
    left: 350px !important;
    top: 900px !important;
  }

  .animation-item .anim-16 {
    left: 20px !important;
    top: 590px !important;
    z-index: 1000 !important;
  }

  .animation-item .anim-17 {
    top: 450px !important;
    right: -150px !important;
    z-index: 1000 !important;
  }

  .animation-item .anim-18 {
    left: 350px !important;
    top: 200px !important;
  }

  .animation-item .anim-19 {
    right: 800px !important;
    top: 450px !important;
    z-index: 1000 !important;
  }

  @keyframes rotatePPlus {
    0% {
      transform: rotate(0deg);
    }

    100% {
      transform: rotate(360deg);
      /* Full rotation */
    }
  }

  .animation-item .anim-15 {
    animation: rotatePPlus 6s linear infinite;
    /* Adjust the duration and timing function as needed */
    left: 450px;
    top: 700px;
  }

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

    50% {
      transform: translateY(-20px);
      /* Adjust the distance as needed */
    }

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

  .animation-item .anim-16,
  .animation-item .anim-17,
  .animation-item .anim-18 {
    animation: moveUpDownNewCircle 4s linear infinite;
    /* Adjust the duration and timing function as needed */
    width: 30px;
    /* Adjust the width as needed */
  }

  /* Position them individually */
  .animation-item .anim-16 {
    left: 150px;
    top: 550px;
  }

  .animation-item .anim-17 {
    top: 550px;
    right: 35px;
  }

  .animation-item .anim-18 {
    left: 580px;
    top: -40px;
  }

  @keyframes moveHorizontalCircle {
    0% {
      left: 1150px;
      /* Initial position */
    }

    50% {
      left: 1155px;
      /* Adjust the distance as needed */
    }

    100% {
      left: 1200px;
      /* Initial position */
    }
  }

  .animation-item .anim-19 {
    animation: moveHorizontalCircle 5s linear infinite;
    /* Adjust the duration and timing function as needed */
    width: 20px;
    /* Adjust the width as needed */
    left: 1150px;
    top: 680px;
  }

  /* ANIMATION RESPONSEIVENESS  */

  .first-sec .LP-heading {
    font-size: 32px !important;
  }

  .third-section h3 {
    font-size: 30px;
    line-height: 40px;
  }

  .white-circle-bg {
    position: absolute;
    top: 50%;
    /* Vertically center the circle */
    left: 50%;
    /* Horizontally center the circle */
    transform: translate(-50%, -50%);
    /* Center the circle precisely */
    background: linear-gradient(200.45deg,
        #ffffff -4.16%,
        rgba(255, 255, 255, 0) 126.41%);
    width: 330px;
    /* Set the width of the circle */
    height: 330px;
    /* Set the height of the circle */
    border-radius: 50%;
    /* Creates a circular shape */
  }

  @keyframes upDownAnimation {

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

    50% {
      transform: translateY(-30px);
      /* Adjust the value as needed for desired movement */
    }
  }

  /* Define the horizontal animation for top animations */
  @keyframes horizontalAnimationTop {

    0%,
    100% {
      transform: translateX(0);
    }

    50% {
      transform: translateX(15px);
      /* Adjust the value as needed for desired horizontal movement */
    }
  }

  /* Define the vertical animation for bottom animations */
  @keyframes verticalAnimationBottom {

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

    50% {
      transform: translateY(15px);
      /* Adjust the value as needed for desired vertical movement */
    }
  }

  /* Apply the animations to the elements */
  .top-animation img {
    animation: horizontalAnimationTop 3s infinite;
  }

  .bottom-animation img {
    animation: verticalAnimationBottom 3s infinite;
  }

  .sec-height {
    height: 950px;
  }

  .first-sec .sec-height {
    height: 550px;
  }

  .arrow-1 {
    left: 0px;
    width: 35%;
  }

  .arrow-2 {
    width: 55%;
    bottom: 560px;
  }

  .arrow-filled {
    width: 50%;
    top: 130px;
  }

  .common-button-style-filled {
    font-size: 15px;
    padding: 20px 40px;
  }

  .common-button-style-outline {
    font-size: 15px;
    padding: 20px;
  }

  .table-colm.bg-white {
    overflow-x: scroll;
  }

  .table-colm.bg-white::-webkit-scrollbar {
    display: none;
  }

  .map-section {
    display: none;
  }

  h1 {
    font-size: 65px;
    line-height: 78px;
  }

  h2 {
    font-size: 28px;
    line-height: 40px;
  }

  .ban-img {
    width: 65%;
  }

  .creator-section .para-img {
    width: 100px !important;
    left: -10%;
    top: 15%;
  }

  /* .third-section .circle-boy {
    transform: scale(1) translateX(0);
  } */

  .bg-ft-shape {
    width: 160%;
    left: -30%;
  }

  .third-section2 .interest-sec .box-ul {
    margin-bottom: 40px;
  }

  /*moving img*/
  .bitcoin_1 {
    width: 8%;
  }

  .ban-img7 {
    width: 35%;
    right: 8%;
  }

  .ban-img5 {
    width: 24%;
    left: 5%;
  }

  .ethereum_1 {
    left: -14px;
    width: 8%;
  }

  .para-img {
    left: -10%;
    top: 15%;
  }

  .ethereum_table {
    right: -15px;
  }

  .circle_yello_table {
    right: -30px;
  }

  .circle_table {
    right: -10px;
  }

  .bitcoin_table {
    right: 20px;
    bottom: -25px;
  }

  .left-footimg {
    top: -5%;
    left: -5%;
    width: 20%;
  }

  .right-footimg {
    width: 20%;
  }

  .ban-img8 {
    right: 10%;
  }

  @keyframes circleboy {
    0% {
      transform: scale(1.3) translateX(0px);
    }

    50% {
      transform: scale(1.3) translateX(0px);
    }

    100% {
      transform: scale(1.3) translateX(0px);
    }
  }
}

/* IPAD SCREEN SIZE  END*/

/* MOBILE SCREEN SIZE START  */
@media (max-width: 575px) {

  .brand-modal-dialog .brand-modal-content,
  .modal-dialog {
    /* max-width: 340px !important; */
    /* max-width: 90vw !important; */
    /* margin: auto; */
  }

  #navbarSupportedContents .blue-ball-brand-popup {
    position: absolute;
    left: 4%;
    top: -4%;
  }

  #navbarSupportedContents .purple-plus-brand-popup {
    position: absolute;
    right: 25%;
    top: -38%;
  }

  .modal-dialog .brand-signup-feilds {
    overflow-y: scroll;
    overflow-x: hidden;
  }

  .modal-dialog .brand-signup-feilds::-webkit-scrollbar {
    display: none;
  }

  .signup-option {
    height: 400px !important;
  }

  .signup-option .creator-signup-btn,
  .signup-option .brand-signup-btn {
    width: 60% !important;
  }

  .brand-signup-feilds {
    /* height: 550px !important; */
  }

  .creator-signup-feilds {
    overflow-y: scroll;
    overflow-x: hidden;
    /* height: 47rem !important; */
  }

  .creator-signup-feilds::-webkit-scrollbar {
    display: none;
  }

  /* .lg-close-position {
   position: absolute;
   top: -10px;
   right: -13px;
  } */

  .navbar-collapses {
    background-color: blue !important;
    display: block !important;
    z-index: 10000 !important;
  }

  .audience-slider-mob {
    margin-left: 13px;
  }

  .top_content .LP-heading {
    font-size: 22px !important;
  }

  .creator-section .d-md-none h3 {
    font-size: 26px !important;
  }

  .first-sec p {
    font-size: 12px;
    color: gray;
  }

  .top_content h1 {
    font-size: 15px;
    line-height: 60px;
  }

  .creator_content h3 {
    font-size: 26px;
    font-weight: 900;
  }

  .ban-img-side {
    display: none;
  }

  .common-button-style-filled {
    /* width: 200px !important; */
    font-size: 12px;
    font-weight: 900 !important;
  }

  .common-button-style-outline {
    /* width: 200px !important; */
    font-size: 14px;
  }

  .arrow-1 {
    left: 0;
    width: 60%;
  }

  .arrow-2 {
    left: 0;
    width: 80%;
    bottom: 250px;
  }

  .arrow-filled {
    left: 0;
    width: 80%;
    top: 170px;
  }

  .audience-size-btn .common-button-style-filled {
    width: 350px !important;
  }

  .tailor-sec h3 {
    font-size: 25px;
    line-height: 40px;
  }

  .tailor-sec .white-circle-bg {
    display: none;
  }

  .sec-two-animation {
    display: none;
  }

  .sec-height {
    height: 550px;
  }

  .creator-section {
    height: 900px !important;
  }

  .browse-creator-btn .common-button-style-filled {
    margin-top: 30px;
    width: 100% !important;
    /* z-index: 2000 !important; */
  }

  .top_content .LP-heading {
    font-size: 30px;
  }

  .top_content p {
    font-size: 15px;
    line-height: 20px;
  }

  .profile-page-container {
    max-width: 450px;
  }

  .search-bar-input-container {
    display: block;
    width: 100% !important;
  }

  .search-bar-input-search,
  .location-search {
    width: 100%;
    margin-top: 10px;
  }

  .categories-dashboard {
    /* padding: 10px 0px !important; */
  }

  .brand-categories-outer-main {
    display: block !important;
  }

  .dropdown-button {
    width: 100%;
    margin-bottom: 10px;
    position: relative;
  }

  .dropdown-button img {
    position: absolute;
    right: 20px;
    top: 15px;
  }

  .inner-dropdown {
    width: 21rem;
  }

  .dropdown-button p {
    font-size: 12px;
  }

  #brand-detail-listing-table_wrapper {
    overflow-x: scroll;
  }

  #brand-detail-listing-table_wrapper::-webkit-scrollbar {
    display: none;
  }

  .brand-listing-table tr th {
    font-size: 12px;
  }

  .creator-right-box {
    display: block !important;
  }

  .campaign-categories ul {
    display: block !important;
  }

  .campaign-profile p,
  .collab-indv-sec p {
    font-size: 15px;
  }

  .campaign-categories li,
  .collab-indv-sec li {
    padding: 18px 40px;
    border-radius: 30.5px;
  }

  .campaign-detail-outer-box1 {
    display: block !important;
  }

  .campaign-detail-inner-box1 {
    width: 100%;
  }

  .campaign-detail-inner-box1 img {
    margin-left: 15px;
  }

  .campaign-offered-outer-box {
    display: block !important;
  }

  .campaign-offered-box1 {
    width: 100% !important;
    margin-bottom: 40px;
  }

  .campaign-offered-box1 .icon-box {
    margin-bottom: 7px !important;
  }

  .campaign-offered-box1 h6,
  .campaign-offered-box2 h6,
  .campaign-desc-box h6,
  .collaboration-detail-box h6 {
    font-size: 20px;
  }

  .creator-requirement-box {
    display: block !important;
  }

  .creator-requiremnet-inner-box {
    width: 100% !important;
  }

  .collaboration-detail-box p {
    font-size: 14px;
  }
}

/* check here */
@media (max-width: 640px) {
  .home {
    /* background: linear-gradient(
      rgba(167, 231, 233, 0.5) 0.01%,
      rgba(255, 255, 255, 0.5) 101.76%
    );
    background-image: linear-gradient(to bottom right, #5F9EA0, #E0FFFF, #fff); */

    /* --tw-gradient-to: rgb(204 251 241 / 0.6) var(--tw-gradient-to-position);

    --tw-gradient-from: rgb(153 246 228 / 0.6) var(--tw-gradient-from-position);
    --tw-gradient-to: rgb(153 246 228 / 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);

    background-image: linear-gradient(to bottom, var(--tw-gradient-stops)); */

    /* background: rgba(255, 255, 255, 0.3); */
    /* background: url('/images/blue-green-background-with-white-circle-middle.jpg'), #F7F7F7; */


    /* background-color: #F7F7F7; */
    background-color: rgba(247, 247, 247, 0.1);
    /* background-image: url('/images/blue-green-background-with-white-circle-middle.jpg');
       */
    background-image: none;
    background-repeat: no-repeat;
    background-position: center top;
    /* hoặc center center nếu muốn đúng giữa */
    background-size: cover;
    /* hoặc contain nếu muốn nguyên vòng tròn */
    /* border-radius: 20px; */
    /* background: #f1f7f7; */

    position: relative;

  }

  .home::before {
    /* background-color: rgba(247, 247, 247, 0.1); */
    background-color: #F7F7F7;
    content: "";
    position: absolute;
    inset: 0;
    background: url('/images/blue-green-background-with-white-circle-middle.jpg') no-repeat center top;
    background-size: cover;
    opacity: 0.2;
    z-index: 0;
    pointer-events: none;
    min-height: 200vh;
  }
  .home.notBefore::before {
    background-color: transparent !important;
   }

  .home .navbar {

    /* .home header { */

    /* background: linear-gradient(
      rgba(167, 231, 233, 0.5) 0.01%,
      rgba(255, 255, 255, 0.5) 101.76%
    ); */

    /* version 1 */

    /* --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);

    --tw-gradient-to: rgb(153 246 228 / 0.8) var(--tw-gradient-to-position);

    --tw-gradient-from: rgb(153 246 228 / 0.9) var(--tw-gradient-from-position);
    --tw-gradient-to: rgb(153 246 228 / 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);

    background-image: linear-gradient(to bottom, var(--tw-gradient-stops));

    background: #9ff7e6; */

    /* end version 1 */

    /* version 2 */
    background: none;
  }

  /* new mobile auth */
  #navbarSupportedContents .modal.show .modal-dialog,
  .has-new-modal .modal.show .modal-dialog {
    /* top: 0%;
    max-width: 100% !important;
    max-height: 100vh; */
    /* max-width: fit-content; */
    /* max-width: 926px; */
  }

  #navbarSupportedContents .modal-header,
  .has-new-modal .modal-header {
    /* padding-top: 80px ; */
  }
  #navbarSupportedContents .modal.show .modal-dialog .modal-content,
  .has-new-modal .modal.show .modal-dialog .modal-content
  {
    /* height: 100vh; */
    /* border-radius: 0; */
    /* background-color: rgba(247, 247, 247, 1); */
    /* background-image: none;
    background-repeat: no-repeat;
    background-position: center top; */
    /* position: relative; */
  }
  #navbarSupportedContents .modal.show .modal-dialog .modal-content::before,
  .has-new-modal .modal.show .modal-dialog .modal-content::before {
    background-color: #F7F7F7;
    content: "";
    position: absolute;
    inset: 0;
    background: url('/images/blue-green-background-with-white-circle-middle.jpg') no-repeat center top;
    background-size: cover;
    opacity: 0.1;
    z-index: 0;
    pointer-events: none;
  }

  .has-new-modal.modal-content::before {
    background-color: #F7F7F7;
    content: "";
    position: absolute;
    inset: 0;
    background: url('/images/blue-green-background-with-white-circle-middle.jpg') no-repeat center top;
    background-size: cover;
    opacity: 0.1;
    z-index: 0;
    pointer-events: none;
  }
}

@media (max-width: 768px) {
  .campaign-offered-box1.border-end {
    border-right: none !important;
  }
}

/* MOBILE SCREEN SIZE END  */

@media screen and (max-width: 1024px) {
  .creator-bar-container {
    display: block !important;
  }

  .creator-left-box {
    width: 100% !important;
  }

  .creator-right-box {
    width: 100% !important;
    margin-top: 20px;
  }

  .dropdown-button {
    padding: 12px 16px 12px 16px;
  }

  .dropdown-button p {
    margin-right: 33px;
  }

  .brand-listing-table .person-image {
    width: 40px;
    height: 40px;
  }

  .brand-listing-table table .person-name-dark {
    font-size: 14px;
  }

  .campaign-welcm h1 {
    font-size: 24px;
  }

  .campaign-welcm p {
    font-size: 13px;
    margin: 20px 0px 30px 0px;
  }

  .campaign-welcm .lets-go-btn,
  .button-box .next-btn {
    padding: 8px 40px;
  }

  .campaign-faq-section-main .right-nav-btn {
    font-size: 14px;
  }

  .campaign-images-sec .inner-curve .sec-img {
    height: 400px;
  }

  /* .campaign-category-box {
    overflow-y: scroll;
  }


  .campaign-category-box::-webkit-scrollbar {
    display: none;
  } */

  .campaign-sec-label {
    font-size: 12px;
  }

  .campaign-input,
  .campaign-select {
    font-size: 14px;
  }

  .campaign-incentives .incentive-checkbox {
    width: 20px;
    height: 20px;
  }

  .campaign-incentives span {
    font-size: 14px;
  }

  .campaign-incentives p {
    font-size: 10px;
  }

  .currency-dropdown-box {
    width: 90px;
  }

  .campaign-select {
    font-size: 10px;
  }

  .campaign-location-outer .location-btn {
    padding: 14px 55px;
  }

  .campaign-location-btn-outer .-pane {
    margin-top: 20px !important;
  }

  .campaign-location-btn-outer .-pane span {
    font-size: 12px;
  }

  /* .navbar-nav{display: none;}
    .menu-btn{display: block!important;} */
}

.third-section2 .interest-sec a {
  text-decoration: none;
}

.third-section2 .interest-sec .int-para {
  color: #fff !important;
  text-decoration: none;
}

@media (min-width: 400px) and (max-width: 480px) {
  .profile-page-container {
    max-width: 400px;
  }
}

@media (min-width: 320px) and (max-width: 401px) {
  .profile-page-container {
    max-width: 300px;
  }
}

@media (max-width: 556px) {
  .verify-notice {
    width: auto;
    margin-left: 1rem;
    margin-right: 1rem;
    display: flex;
    flex-direction: column;
  }

  .add-profile-pic-section {
    margin-left: 1rem;
    margin-right: 1rem;
  }

  .button-box .modal-header h5 {
    font-size: 30px;
  }

  .button-box .modal-body {
    /* display: block !important; */
  }

  .button-box .brand-sign-up,
  .button-box .creator-sign-up {
    width: 200px;
    padding: 14px 36px;
    font-size: 14px;
  }

  .button-box .modal-body .popup-man-img {
    right: 5px;
    top: -36px;
  }

  .button-box .inner-content {
    /* margin: 0px; */
  }

  .button-box .brand-modal-content {
    /* height: 47rem !important; */
  }

  .brand-popup-man-img,
  .creator-popup-man-img {
    display: none;
  }

  .button-box .creator-modal-content {
    height: 970px;
  }

  .button-box .brand-field {
    height: 50px;
  }

  .button-box .inner-content .row {
    padding-left: 0px !important;
    padding-right: 0px !important;
  }

  .button-box .inner-content .select-dropdown {
    margin-bottom: 20px;
  }

  .button-box .common-button-style-outline,
  .button-box .ban-wire-btn,
  .button-box .right-nav-btn {
    width: 50%;
    padding: 15px;
    font-size: 14px !important;
    margin: 0;
  }

  .range-slider {
    width: 287px;
    top: 140px;
  }

  .cylinder-wrap-tracker {
    width: 100px;
  }

  .third-section h6 {
    text-align: left !important;
    padding-left: 78px;
  }

  .browse-catalog-banner h2 {
    font-size: 30px;
  }

  .creators-box .bird1-left,
  .creators-box .cloud1,
  .browse-catalog .plane-img,
  .browse-catalog .para-img,
  .creators-box .bird2-left {
    display: none;
  }

  .creators-box .air-ballon {
    top: 75px;
    top: -34px;
  }

  .creators-box .cloud-right {
    top: 0px;
  }

  .creators-box .cloud2 {
    top: 10px;
  }

  .browse-catalog-banner .dollor-icon-img {
    left: 0;
    top: 27px;
  }

  .browse-catalog-banner .ethereum-img {
    right: 7px;
    bottom: -27px;
  }

  .browse-catalog-banner .yellow-ball {
    left: 0;
  }

  .browse-catalog-banner .purple-ball {
    left: 0;
  }

  .creators-box .bird2-left {
    right: 0 !important;
    top: 80px !important;
  }

  .creators-box .bird-right {
    right: 0;
    top: 4px;
  }

  .browse-catalog-banner .banner-btns-row,
  .browse-catalog-banner .banner-btns-col,
  .browse-catalog-banner .age-col {
    display: block !important;
  }

  .creator-deatil-section h5 {
    font-size: 14px;
  }

  .creators-profile-detail li {
    font-size: 12px;
  }

  .creator-detail-section .invite-btn,
  .creator-detail-section .social-btn-instagram,
  .creator-detail-section .social-btn-brand {
    width: 100%;
    margin-right: 0px !important;
  }

  .creator-detail-center-box {
    margin-right: 40px;
  }

  .creator-detail-section .social-btn-instagram {
    margin-bottom: 20px;
  }

  .creator-detail-profile-box {
    /* display: block !important; */
  }

  .followers-box {
    width: 100% !important;
    text-align: left !important;
  }

  .followers-box div:nth-child(2) {
    margin-top: 10px !important;
  }

  .creators-detail .bitcoin,
  .creators-detail .ethereum {
    display: none;
  }
}

@media (max-width: 375px) {
  .creators-box .air-ballon {
    right: 260px;
    top: -70px;
  }

  .campaign-categories,
  .campaign-profile {
    display: block !important;
  }

  .campaign-profile-box {
    text-align: center;
  }

  .brand-detail-outer-box {
    margin-top: 20px;
  }

  .brand-detail-outer-box svg {
    margin-left: 6px;
  }

  .brand-detail-outer-box .icon-box,
  .brand-detail-outer-box .img-box {
    justify-content: center;
  }

  .campaign-categories,
  .campaign-profile {
    margin-top: 25px;
  }

  .campaign-box-detail .campaign-categories:nth-child(3) {
    margin-top: 25px;
  }

  .campaign-categories h6 {
    margin-bottom: 25px;
  }

  .logo-text img {
    width: 250px;
  }

  .camp-text-box h5 {
    font-size: 16px;
  }

  .camp-text-box p {
    font-size: 14px;
  }

  .creator-deatil-section {
    display: flex !important;
  }

  .creators-profile-detail li {
    margin: 15px 0px 0 0;
  }

  .campaign-detail-inner-box1 img {
    margin-left: 0px;
  }

  .campaign-text-box {
    display: block !important;
  }

  .campaign-text-box p:nth-child(2) {
    margin-left: 0px !important;
  }

  .campaign-offered-box1 h6,
  .campaign-offered-box2 h6,
  .campaign-desc-box h6,
  .collaboration-detail-box h6 {
    font-size: 18px;
  }

  .collaboration-detail-box p {
    font-size: 14px;
  }
}

@media (max-width: 320px) {
  .creators-box .air-ballon {
    right: 215px;
  }

  .creators-box .cloud-right {
    top: 140px;
    left: 0;
  }

  .logo-text img {
    width: 220px;
  }

  .brand-detail-outer-box svg {
    margin-left: 0px;
  }

  .campaign-categories li,
  .collab-indv-sec li {
    padding: 14px 40px;
  }

  .campaign-box-detail-abt h4 {
    font-size: 19px;
  }

  .camp-text-box h5 {
    font-size: 12px;
    margin-bottom: 0px;
  }

  .camp-text-box p {
    font-size: 10px;
  }

  .limited-box {
    margin-bottom: 5px !important;
  }

  .camp-text-box li {
    font-size: 8px;
    margin-left: 0px;
  }

  .camp-text-box li:nth-child(2) {
    margin-left: 8px;
  }

  .creator-deatil-section {
    display: block !important;
    text-align: center;
  }

  .campaign-categories li,
  .collab-indv-sec li {
    font-size: 14px;
    margin: 15px 0 0;
  }

  .creator-detail-center-box {
    margin-right: 20px;
    margin-left: 25px;
  }

  .creator-detail-section .invite-btn,
  .creator-detail-section .social-btn-instagram,
  .creator-detail-section .social-btn-brand {
    font-size: 14px;
  }

  .creators-detail .bitcoin,
  .creators-detail .ethereum {
    display: none;
  }
}

.creator-container {
  display: flex;
  flex-wrap: wrap;
  margin: auto;
  gap: 20px;
}

.campaign-upload-image {
  height: 15vw;
  width: 15vw;
  border-radius: 16px;
  border: 1px solid #fff;
  background: white;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
}

.scrollbar-none {
  scrollbar-width: none;
  /* Firefox */
  -ms-overflow-style: none;
  /* IE 10+ */
}

.scrollbar-none::-webkit-scrollbar {
  display: none;
  /* Chrome, Safari, Edge */
}


/* Wrapper cho phần cuộn ngang */
.horizontal-scroll-container {
  display: flex;
  overflow-x: auto;
  cursor: grab;
  /* Thiết lập con trỏ khi không kéo */
  width: 100%;
  /* Đảm bảo chiếm toàn bộ chiều rộng của container cha */
  padding: 10px 0;
  /* Thêm padding cho đẹp */
}


.horizontal-scroll-container::-webkit-scrollbar {
  display: none;
  /* Ẩn scrollbar trên Webkit browser như Chrome, Safari */
}

/* Phần tử bên trong của container (các mục cuộn) */
.horizontal-scroll-inner {
  display: flex;
  flex-wrap: nowrap;
  /* Không cho phép wrap, đảm bảo các mục luôn nằm ngang */
  /* padding: 0 10px; */
  user-select: none;
}

/* Mỗi item trong phần cuộn ngang */
.horizontal-scroll-item {
  flex-shrink: 0;
  /* Đảm bảo phần tử không bị co lại khi không đủ chỗ */
  margin-right: 15px;
  /* Khoảng cách giữa các item */
  text-align: center;
  cursor: pointer;
  /* Con trỏ chuột dạng pointer khi hover lên item */
}

.horizontal-scroll-item.selected {
  border: 2px solid #007bff;
  /* Thiết lập border khi được chọn */
  padding: 5px;
  border-radius: 8px;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

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

  to {
    transform: translateX(0);
  }
}

@keyframes slideInUp {
  from {
    transform: translateY(100%);
  }

  to {
    transform: translateY(0);
  }
}

@keyframes slideUp {
  0% {
    transform: translateY(100%);
  }
  100% {
    transform: translateY(0);
  }
}

.tw-animate-slideUp {
  animation: slideUp 0.3s ease-out;
}


.animate-fade-in {
  animation: fadeIn 0.2s ease-in-out forwards;
}

.animate-slide-in-right {
  animation: slideInRight 0.3s ease-out forwards;
}

.animate-slide-in-up {
  animation: slideInUp 0.3s ease-out forwards;
}

textarea:hover,
input:hover,
textarea:active,
input:active,
textarea:focus,
input:focus,
button:focus,
button:active,
button:hover,
label:focus,
.btn:active,
.btn.active {
  /* outline:0px !important; */
  /* -webkit-appearance:none; */
  box-shadow: none !important;
}

/* custom */

.tw-card.tw-card-custom > :not([hidden]) ~ :not([hidden]) {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

/* .react-joyride__tooltip button[aria-label="Close"] {
  display: none !important;
} */

/* .react-joyride__tooltip button[aria-label="Close"][data-test-id="button-primary"] {
  display: none !important;
} */

.MuiTooltip-popper {
  z-index: 200002000000003 !important;
}