@import url("https://fonts.googleapis.com/css2?family=Red+Rose:wght@300..700&family=Roboto:ital,wght@0,100..900;1,100..900&display=swap");

@import url("https://fonts.googleapis.com/css2?family=Rubik:wght@300;400;500;700&display=swap");



* {

  margin: 0px;

  padding: 0px;

  font-family: "Inter", serif;

}



.cursor-pointer {

  cursor: pointer;

}



.red_rose_family {

  font-family: "Red Rose", serif;

}



body {

  background-color: #ffffff !important;
  font-family: 'Inter', sans-serif;
  
}



.user_termsconditions section.visible .container {

  min-height: calc(100vh - 100px);

}

.user_privacypolicy section.visible .container {

  min-height: calc(100vh - 240px);

}

body.user_products,

body.user_billing,

body.user_feedauth,

body.user_profile {

  background-color: #ffff !important;



  font-family: "Rubik", sans-serif !important;

}

body.user_products .cb_top_header_section .bg-white,

body.user_billing .cb_top_header_section .bg-white,

body.user_feedauth .cb_top_header_section .bg-white,

body.user_profile .cb_top_header_section .bg-white {

  background-color: #f3f4f6 !important;

}

.accordion-body {

  background-color: #f0efeb !important;

}



.-link.icon-link-hover:hover {

  color: var(--bs-nav-link-color) !important;

}



.cb_top_sectoion_header_img {

  width: calc(100% - 35%);

  top: 0px;

  left: 0px;

}



.cb_top_sectoion_header {

  z-index: 99;

  position: relative;

}



.cb_top_svg_wrap {

  right: -60px;

  top: 70px;

  width: 120px;

  height: auto;

  animation: rotate-center 2.5s linear infinite both;

}



.cb_top_svg_wrap > path,

.cb_bottom_svg_wrap > svg > path {

  fill: #10b981;

}



.cb_botton_sectoion_header_img {

  width: calc(100% - 30%);

  top: -160px;

  right: 0px;

}



.cb_bottom_svg_wrap > svg {

  width: 100px;

  height: auto;

}



.cb_bottom_svg_full {

  top: -90px;

  left: 0px;

  animation: rotate-center 1.8s linear infinite both;

}



.cb_bottom_svg_half_left {

  width: 120px !important;

  left: -50px;

  top: 10px;

  animation: rotate-center 2.2s linear infinite both;

}



.cb_bottom_svg_half_right {

  left: 75px;

  animation: rotate-center 2s linear infinite both;

}



.cb_botton_sectoion_header {

  width: 100%;

  height: 78px;

}



@keyframes rotate-center {

  0% {

    transform: rotate(0);

  }



  100% {

    transform: rotate(360deg);

  }

}



.cb_top_header_section {

  width: 100%;

  height: auto;

}



.cb_top_header_section.scrolled {

  animation: fade-in-top 0.6s cubic-bezier(0.39, 0.575, 0.565, 1) both !important;

  z-index: 99;

  box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;

  position: fixed;

  top: 0px;

}



@keyframes fade-out-top {

  0% {

    transform: translateY(0);

    opacity: 1;

  }



  100% {

    transform: translateY(-50px);

    opacity: 0;

  }

}



@keyframes fade-in-top {

  0% {

    transform: translateY(-50px);

    opacity: 0;

  }



  100% {

    transform: translateY(0);

    opacity: 1;

  }

}



.cb_feature_images {

  width: 100%;

  height: 100px;

  aspect-ratio: 1 / 1;

  object-fit: contain;

}



.feature-card,

.work-feature-card {

  background-color: #ffffff;

  margin: 0px 40px;

  position: relative;

  border: 8px solid #f0efeb !important;

}



.features-section-slick,

.work-section-slick {

  margin: 0px -40px;

}



.slick-prev {

  left: 0px;

}



.slick-arrow:before {

  content: "\f053";

  font-family: "FontAwesome";

  font-size: 24px;

  cursor: pointer;

  color: #ff7343;

}



.slick-arrow {

  font-size: 0px;

  border: none;

  position: absolute;

  top: 50%;

  transform: translate(0px, -50%);

  background-color: transparent;

  outline: none;

  z-index: 9;

}



.slick-next {

  right: 0px;

}



.slick-next:before {

  content: "\f054";

}



.cb_how_works_icon {

  width: 100%;

  height: 120px;

  aspect-ratio: 1 / 1;

  object-fit: contain;

}



.carousel-icon {

  i {

    font-size: 5rem;

    color: rgba(var(--bs-white-rgb), 0.3);

  }

}



.carousel-item {

  i {

    font-size: 1.6rem;

    color: rgba(var(--bs-white-rgb), 0.3);

  }

}



.t-card {

  background-color: rgba(var(--bs-dark-rgb), 0.5);

  border-radius: 1.25rem;

  color: var(--bs-white);

  height: auto;

}



.arrow-down {

  width: 0;

  height: 0;

  border-left: 1.5625rem solid transparent;

  border-right: 1.5625rem solid transparent;

  border-top: 1.25rem solid rgba(var(--bs-dark-rgb), 0.5);

}



.cb_testimonials_user_profile_wrap {

  height: 50px;

  width: 50px;

  margin-right: 10px;

  border: 3px solid #070730;

  border-radius: 100%;

  padding: 5px 5px;

}



.cb_testimonials_user_profile {

  height: 100% !important;

  width: 100% !important;

  object-fit: contain;

}



.cb_testimonials_user_info_wrap {

  width: calc(100% - 60px);

}



.carousel-inner {

  gap: 20px;

  display: flex;

}



.pricing-section,

.newsletter-signup {

  background: linear-gradient(282.76deg, #f6f6f6 37.64%, #909090 183.21%);

}



.pricing-card {

  border-radius: 0px;

  transition: transform 0.3s ease;

  padding-top: 100px !important;

  padding-bottom: 40px !important;

  clip-path: polygon(20% 0, 100% 0, 100% 100%, 100% 100%, 0 100%, 0 16%);

  overflow: hidden;

}



.pricing-card_catgory {

  transform: rotate(316deg);

  position: absolute;

  left: -80px;

  top: 0px;

  background-color: #ff7343;

  color: #fff !important;

  padding: 45px 20px 20px;

  min-width: 290px;

  text-align: center;

}



.pricing-card:before {

  content: "";

  width: 85px;

  height: 85px;

  position: absolute;

  right: 0px;

  bottom: 0px;

  background-color: #ff7343;

  clip-path: polygon(100% 0, 0 100%, 100% 100%);

}



.pricing-card h3 {

  color: #333;

}



.pricing-card ul {

  margin: 0;

  padding: 0;

}



.pricing-card .badge {

  font-size: 0.8rem;

  padding: 0.5rem 1rem;

  border-radius: 50px;

}



.pricing-card ul > li {

  color: #7a7a7a;

  margin: 0px 20px;

  font-weight: 500;

}



@keyframes scroll {

  0% {

    transform: translateX(0);

  }



  100% {

    transform: translateX(calc(-250px * 8));

  }

}



.integrations_slider {

  height: 100px;

  margin: auto;

  overflow: hidden;

  position: relative;

  width: 100%;

}



.integrations_slide-track {

  animation: scroll 30s linear infinite;

  display: flex;

  width: calc(250px * 16);

}



.integrations_slide {

  height: 100px;

  width: 200px;

  flex-shrink: 0;

}



.integrations_slide img {

  height: 100%;

  width: 100%;

  object-fit: contain;

}



.login-from-logo {

  width: 200px;

}



.login_logo {

  font-size: 1.5rem;

  font-weight: bold;

  display: flex;

  align-items: center;

}



.login_logo > img {

  height: 30px;

  margin-right: 10px;

}



.login-page-form-wrap {

  top: 3rem;

}



.vadio_play_btn_wrap {

  top: 0px;

  left: 0px;

  z-index: 9;

  display: flex;

  justify-content: center;

  align-items: center;

  background-color: #ffffff47;

  cursor: pointer;

}



.vadio_play_btn_wrap > i {

  color: #0f172a;

  font-size: 80px;

}



.cb_top_header_section.scrolled > .bg-white {

  background-color: #fff !important;

}



.feedbro_dashboard {

  margin-top: 90px;

  margin-bottom: 50px;

  box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;

  overflow: hidden !important;

}



.feedbro_dashboard > .table_wraper {

  margin-bottom: 10px;

  height: calc(100vh - 250px);

  overflow: auto;

}



::-webkit-scrollbar {

  width: 8px;

  height: 8px;

}



::-webkit-scrollbar-track {

  background: #b5b5b55e;

  border-radius: 6px;

}



::-webkit-scrollbar-thumb {

  background: #cecece;

  border-radius: 6px;

}



::-webkit-scrollbar-thumb:hover {

  background: #0f172ae8 !important;

}



.feedbro_dashboard tr > th,

.feedbro_dashboard tr > td {

  min-width: 110px;

}



.feedbro_dashboard > .table_wraper td {

  font-size: 13px;

  font-weight: normal;

}



.filter_tittle_input {

  width: calc(100% - 80px);

  outline: none;

  border-radius: 4px;

  border: 1px solid #bbb;

  padding: 5px 10px;

  font-size: 13px;

}



.filter_tittle_table {

  width: 80px;

}



.feedbro_dashboard > .table_wraper th {

  position: sticky;

  top: 0px;

}



.top_triangle_img {

  max-width: 165px;

  margin: 25px 0px 0px auto;

  display: block;

  max-height: 165px;

}



.top_right_arrow_round {

  height: 130px;

  right: 15px;

  top: 75px;

  transform: rotate(15deg);

}



.top_left_arrow_round {

  height: 130px;

  left: -15px;

  bottom: 30px;

  transform: rotate(190deg);

}



.arrow__top_round {

  height: 122px;

  transform: rotate(-75deg);

  margin-left: 25px;

}



.theme_color {

  color: #420e86;

}



#typing {

  max-width: 385px;

}



.top_img_wrapper_relative > .arrow_round {

  height: 70px;

  right: 86px;

  bottom: 52px;

  transform: rotate(190deg);

}



.cb_tittle_style {

  background: linear-gradient(

    90deg,

    rgb(255 115 67 / 40%) 0%,

    rgb(240 239 235 / 0%) 40%

  );

  border-left: 3px solid #ff7343;

  width: max-content;

  color: #070730;

  padding: 5px 50px 5px 5px;

  font-size: 30px;

  font-weight: 600;

  letter-spacing: 0.5px;

}



.feature-card:before,

.feature-card:after,

.work-feature-card:before,

.work-feature-card:after {

  content: "";

  position: absolute;

  background-color: #7b7b7b;

}



.feature-card:hover:before,

.feature-card:hover:after,

.work-feature-card:hover:before,

.work-feature-card:hover:after {

  background-color: #ff5733;

}



.feature-card:before,

.work-feature-card:before {

  bottom: 0;

  left: -8px;

  width: 8px;

  height: calc(100% - 50%);

  clip-path: polygon(0 0, 0% 0, 100% 8%, 100% 100%, 0 100%);

}



.feature-card:after,

.work-feature-card:after {

  bottom: -7px;

  left: -8px;

  width: calc(100% - 50%);

  height: 8px;

  clip-path: polygon(0 0, 0% 0, 92% 8%, 100% 100%, 0 100%);

}



.testimonials_client_card {

  background: #ffffff;

  border: 1px solid rgba(0, 0, 0, 0.21);

  box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);

  padding: 20px 20px 10px;

  border-radius: 5px;

  margin: 0px 40px 5px;

}



.testimonials_client_slick {

  margin: 0px -40px;

}



.testimonials_client_card .testimonial_subtitle,

.testimonials_client_card .testimonial_subtitle + p {

  color: #7b7b7b !important;

  font-size: 15px;

}



.testimonials_client_rank {

  color: #b9b9b9;

  font-size: 14px;

}



.custom-list {

  list-style-type: disc;

}



.Pricing_Plans_card_Wrap .pricing-card {

  margin: 0px 30px;

}



.Pricing_Plans_card_Wrap {

  margin: 0px -30px;

}



.Benefits_card_img_wrap {

  background: #fff;

  border: 3px solid #d7d7d3;

  position: relative;

  padding: 50px 30px;

  display: flex;

  justify-content: center;

  align-items: center;

  margin: 0px 6px 25px;

}



.Benefits_card_img_wrap:before {

  bottom: 0;

  left: -8px;

  width: 8px;

  height: calc(100% - 50%);

  clip-path: polygon(0 0, 0% 0, 100% 8%, 100% 100%, 0 100%);

}



.Benefits_card_img_wrap:before,

.Benefits_card_img_wrap:after {

  content: "";

  position: absolute;

  background-color: #ff7343;

}



.Benefits_card_img_wrap:after {

  bottom: -7px;

  left: -8px;

  width: calc(100% - 50%);

  height: 8px;

  clip-path: polygon(0 0, 0% 0, 92% 8%, 100% 100%, 0 100%);

}



.Benefits_card_img_wrap:hover {

  border-color: #ff7343;

  transition: 1s;

  background-color: #fdeee7;

}



#faqAccordion > .accordion-item {

  border-radius: 0px;

}



.Benefits_card_wrap {

  margin: 0px 30px;

}



.benefits-section_row {

  margin: 0px -30px;

}



.Benefits_card_img_wrap {

  background: #fff;

  border: 3px solid #d7d7d3;

  position: relative;

  padding: 50px 30px;

  display: flex;

  justify-content: center;

  align-items: center;

  margin: 0px 6px 25px;

}



.Benefits_card_img_wrap:before {

  bottom: 0;

  left: -8px;

  width: 8px;

  height: calc(100% - 50%);

  clip-path: polygon(0 0, 0% 0, 100% 8%, 100% 100%, 0 100%);

}



.Benefits_card_img_wrap:before,

.Benefits_card_img_wrap:after {

  content: "";

  position: absolute;

  background-color: #ff7343;

}



.Benefits_card_img_wrap:after {

  bottom: -7px;

  left: -8px;

  width: calc(100% - 50%);

  height: 8px;

  clip-path: polygon(0 0, 0% 0, 92% 8%, 100% 100%, 0 100%);

}



.Benefits_card_img_wrap:hover {

  border-color: #ff7343;

  transition: 1s;

  background-color: #fdeee7;

}



#faqAccordion > .accordion-item {

  border-radius: 0px;

}



#faqAccordion > .accordion-item .accordion-button.collapsed:after {

  content: "\2b";

  color: #ff7343;

}



#faqAccordion > .accordion-item .accordion-button:after {

  content: "\f068";

  background-image: none;

  font-size: 18px;

  font-family: "FontAwesome";

  width: auto;

  height: auto;

  position: absolute;

  right: 20px;

  top: 50%;

  transform: translate(0px, -50%);

  color: #ffffff;

}



.accordion-collapse.show > .accordion-body {

  background-color: #ffffff !important;

}



.accordion-button.collapsed {

  background-color: #ffffff !important;

  color: #000 !important;

}



#faqAccordion .accordion-button {

  background-color: #ff7343;

  color: #fff;

}



.Benefits_card_img_wrap > img {

  max-height: 200px;

  object-fit: contain;

  height: 200px;

}



.work-feature-card:hover .cb_how_works_icon,

.feature-card:hover > .feature-icon > .cb_feature_images {

  display: none;

}



.work-feature-card:hover .cb_how_works_icon.hover,

.feature-card:hover > .feature-icon > .cb_feature_images.hover {

  display: block !important;

}



.bg-shopify {

  width: 60px;

  height: auto;

  right: 292px;

  bottom: 165px;

}



.bg_drive {

  width: 70px;

  height: auto;

  right: 0px;

  top: 100px;

}



.bg-fb {

  width: 60px;

  height: auto;

  right: 45%;

  top: 50%;

  transform: translate(-55%, -50%);

}



.bg-google {

  width: 60px;

  height: auto;

  right: 36%;

  top: 40px;

  transform: translate(-64%, 0px);

}



.arrow_round-1 {

  width: 60px;

  height: auto;

  right: -25px;

  top: 20%;

}



.arrow_round-2 {

  width: 60px;

  height: auto;

  top: 50%;

  left: -30px;

  rotate: 180deg;

  transform: translate(0px, 0px);

}



.arrow_round-3 {

  width: 60px;

  height: auto;

  rotate: 288deg;

  top: 60px;

  left: 60px;

}



.arrow_round-4 {

  width: 20px;

  height: auto;

  right: 30px;

  top: 41%;

  rotate: 190deg;

  transform: translate(-59%, 0px);

}



.arrow_round-5 {

  width: 35px;

  height: auto;

  right: 52%;

  top: 55%;

  rotate: 190deg;

  transform: translate(-45%, -48%);

}



.cb_padding_full {

  padding: 120px 0px;

}



.cb_padiing_fields {

  padding: 12px 15px;

}



.cb_field_bg {

  background-color: #f1e5de !important;

  border-color: #f1e5de !important;

  color: #3f3f3f !important;

}



input.cb_field_bg:-internal-autofill-selected {

  background-color: #ff5e00 !important;

}



.cb_field_bg.form-control:focus {

  box-shadow: 0 0 0 0.25rem rgb(255 115 67 / 25%);

  background-color: #ff734363 !important;

}



.error_msgs {

  font-size: 14px;

}



.form-check-input:checked {

  background-color: #ff7343;

  border-color: #ff7343;

}

.form-check-input:focus {

  box-shadow: 0 0 0 0.25rem rgb(255 115 67 / 25%);

}



.form-check-input {

  background-color: #f1e5de;

  border-color: #ff734347;

}

.resend-link {

  color: #4867f1;

  text-decoration: none;
  font-size: 15px;
  font-weight: 200;

}



.resend-link:hover {

  text-decoration: underline;

}



.profile-pic-wrapper {

  border: none;

  border-radius: 8px;



  padding: 0px;

}



.profile-pic-preview {

  width: 100px;

  height: 100px;

  object-fit: cover;

  border-radius: 50%;

  border: 2px solid #ff7343;

}



.profile-pic-wrapper > .form-control {

  opacity: 0;

  position: absolute;

  top: 50%;

  left: 50%;

  transform: translate(-50%, -50%);

  width: 100%;

  height: 100%;

}



.profile-pic-wrapper > i {

  font-size: 40px;

  color: #ff7343;

}



.profile_img_wrap {

  display: flex;

  justify-content: center;

  align-items: center;

  padding: 5px 0px 20px;

  margin-top: -50px;

}



.setting-list > .setting-list-ul,

.setting-list > .border-padd > .setting-list-ul {

  padding: 0px;

  list-style: none;

  display: flex;

  margin-bottom: 8px;

  flex-wrap: wrap;

}



.setting-list > .setting-list-ul > li > span,

.setting-list > .border-padd > .setting-list-ul > li > span {

  display: block;

  font-weight: 600;

  font-size: 15px;

  margin-bottom: 10px;

}



.setting-list > .setting-list-ul > li,

.setting-list > .border-padd > .setting-list-ul > li {

  margin-block: 20px;

  width: 20%;

}

.stocks li {

  width: 22%;

}

.btn-ornge-outline {

  color: #ff7343 !important;

  border: 1px solid #ff7343 !important;

  background-color: transparent !important;

  box-shadow: 0 4px 6px rgb(0 0 0 / 15%) !important;

  font-size: 14px;

  font-weight: 500;

  border-radius: 4px !important;

  padding-block: 8px;

  min-width: 140px;

}

.setting-list > .setting-list-ul > li > .switch,

.setting-list > .border-padd > .setting-list-ul > li > .switch {

  display: flex;

  justify-content: flex-start;

  align-items: center;

  gap: 10px;

  margin-top: 5px;

}



.additional_country_chosen_wrap .chosen-container > ul {

  --bs-form-select-bg-img: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");

  display: block;

  width: 100%;

  padding: 0.375rem 2.25rem 0.375rem 0.75rem;

  font-size: 1rem;

  font-weight: 400;

  line-height: 1.5;

  color: var(--bs-body-color);

  -webkit-appearance: none;

  -moz-appearance: none;

  appearance: none;

  background-color: var(--bs-body-bg);

  background-image: var(--bs-form-select-bg-img),

    var(--bs-form-select-bg-icon, none);

  background-repeat: no-repeat;

  background-position: right 0.75rem center;

  background-size: 16px 12px;

  border: var(--bs-border-width) solid var(--bs-border-color);

  border-radius: var(--bs-border-radius);

  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;

}



.notification-dropdown .nav-link {

  width: 32px;

  height: 32px;

  display: flex;

  justify-content: center;

  align-items: center;

  margin: 0px 20px 0px 0px;

  border: 1px solid #ff7343;

  border-radius: 100%;

}

.notification-dropdown .nav-link > i {

  font-size: 16px;

  color: #ff7343;

}

.notification-dropdown .nav-link > span {

  font-size: 9px;

  height: 15px;

  width: 15px;

  padding: 0px;

  display: flex;

  justify-content: center;

  align-items: center;

}

.notification-dropdown .nav-link:hover {

  background-color: #ff7343;

}

.notification-dropdown .nav-link:hover > i {

  color: #ffffff;

}



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

  .feature-card,

  .work-feature-card {

    margin: 0px 20px;

  }



  .features-section-slick,

  .work-section-slick,

  .testimonials_client_slick {

    margin: 0px -20px;

  }



  .testimonials_client_card {

    margin: 0px 20px 5px;

  }



  .cb_tittle_style {

    font-size: 28px;

  }



  .Pricing_Plans_card_Wrap .pricing-card {

    margin: 0px 0px;

  }



  .Pricing_Plans_card_Wrap {

    margin: 0px 0px;

  }



  .Benefits_card_wrap {

    margin: 0px 20px;

  }



  .benefits-section_row {

    margin: 0px -20px;

  }



  .setting-list > .setting-list-ul > li,

  .setting-list > .border-padd > .setting-list-ul > li {

    width: 33%;

  }

  .user_contactus .arrow_round-1 {

    right: 0px;

  }

}



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

  .cb_top_sectoion_header_img {

    width: calc(100% - 0%);

  }



  .cb_tittle_style {

    font-size: 22px;

  }

}



.contact-us-textarea {

  resize: none;

  height: 200px;

}

.user_contactus .cb_padding_full {

  padding: 105px 0px;

}

.product-card-wraper {

  border: 1px solid #ebebeb;

  border-radius: 16px;

  padding: 10px 20px 0 20px;

  text-align: left;

  position: relative;

  width: calc((100% - 2 * 3.5rem) / 3);

}

.listing-view .product-card-wraper {

  width: 100%;

}

.product-card-wraper .sale-badge {

  position: absolute;

  top: -10px;

  left: -10px;

  background-color: #ff5722;

  color: white;

  padding: 5px 10px;

  border-radius: 3px;

  font-size: 14px;

}



.product-img {

  margin-left: -71px;



  background-color: #fff;

  padding: 14px 20px;

  box-shadow: rgba(67, 71, 85, 0.27) 0px 0px 0.25em,

    rgba(90, 125, 188, 0.05) 0px 0.25em 1em;

  width: 100px;

  height: 100px;

  border-radius: 50%; /* Makes it a perfect circle */

  box-shadow: rgba(67, 71, 85, 0.27) 0px 0px 0.25em,

    rgba(90, 125, 188, 0.05) 0px 0.25em 1em;

  display: flex;

  align-items: center;

  justify-content: center;

  flex-shrink: 0;

  border: 1px solid #bcbcbb;

}

.product-imgs {

  width: 100%;

  height: 100%;

  object-fit: contain;

}

.product-details p {

  margin: 3px 0;

  font-size: 14px;

}



.product-link {

  font-size: 13px;

  color: #555;

  word-break: break-word;

  display: -webkit-box;

  -webkit-line-clamp: 3;

  -webkit-box-orient: vertical;

  overflow: hidden;

  text-overflow: ellipsis;

}



.gap-6 {

  gap: 3.5rem;

}

.sale-tag::before {

  content: "";

  position: absolute;

  top: -18px;

  left: -22px;

  width: 60px;

  height: 60px;

  background-image: url(assets/images/sale-tag.png);

  background-size: contain;

  background-repeat: no-repeat;

  background-position: center;

  z-index: 1;

}

span.d-inlines {

  display: inline-block;

  min-width: 87px;

}

.product-details p,

.product-details span {

  font-size: 13px;

}

.product-card-wraper:hover::before,

.product-card-wraper.active::before {

  bottom: 0;

  left: -8px;

  width: 8px;

  height: 50px;

}



.product-card-wraper:hover::before,

.product-card-wraper:hover::after,

.product-card-wraper.active::before,

.product-card-wraper.active::after {

  content: "";

  position: absolute;

  background-color: #ff7343;

}

.product-card-wraper:hover:after,

.product-card-wraper.active:after {

  bottom: -7px;

  left: -8px;

  width: 58px;

  height: 8px;

  border-radius: 0px 0 0 16px;

}



.product-card-wraper:hover,

.product-card-wraper.active {

  border: 2px solid #ff7343;

  border-radius: 16px 16px 16px 0;

}

.filter-icon,

.view-btn {

  width: 24px;

  background-size: contain;

  background-repeat: no-repeat;

  background-color: transparent;

  border: none;

  height: 24px;

}

.product-details p,

.product-details span {

  color: #7b7b7b;

}

.product-details h6,

.price {

  color: #070730 !important;

}

.product-details h6 {

  font-size: 15px !important;

}

.flexy {

  margin-top: 15px;

}

.srchs {

  color: #72727299;

  font-size: 14px;

  border: none;

  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);

}

.srchs::placeholder {

  color: #72727299;

  font-size: 14px;

}

.product-list-wrap {

  flex-wrap: wrap;

}

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

  .product-card-wraper {

    width: calc((93% - 3.5rem) / 2); /* 2 items per row on medium screens */

  }

  .listing-view .product-card-wraper {

    width: 100%;

  }

  .wraps {

    flex-wrap: wrap;

    justify-content: center;

  }

}



.btn-orange {

  background-color: #ff7343;

  color: #fff;

  border: none;

  font-size: 14px;

}

body.user_products .btn-secondary,

body.user_feedauth .btn-secondary,

body.user_profile .btn-secondary {

  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);

  font-size: 14px;

  padding-block: 10px;

  font-weight: 500;

  background-color: #ff7343;

  border: none;

  border-radius: 4px !important;

}

.btn-orange:hover,

.btn-orange:active {

  background-color: #ff7343 !important;

  color: #fff !important;

}

.srchs.form-control:focus {

  box-shadow: 0 0 0 0.2rem rgba(255, 115, 67, 0.25);

  border-color: #ff7343;

}

.icon-btn {

  border: none;

  background: transparent;

  color: #999;

  font-size: 1.2rem;

}

.togli.dropdown-toggle::after {

  display: none;

}

.btn-outline-gray,

.btn-outline-gray:focus-visible {

  border: 1px solid #7b7b7b82 !important;

  color: #7b7b7b !important;

  border-radius: 4px !important;

}

.btn-outline-gray + .dropdown-menu .dropdown-item {

  color: #7b7b7b !important;

}

.product-list-wrap.listing-view {

  flex-direction: column;

}

.listing-view .product-img {

  margin-left: 0px;

}



.listing-view .flexy {

  display: flex;

  margin-top: 0px;

  /* gap: 30px; */

}

.listing-view span.d-inlines {

  display: none;

}

.listing-view .product-details {

  display: flex;

  align-items: center;

  /* gap: 50px; */



  width: 85%;

}

.listing-view .product-link {

  /* max-width: 340px; */

}

.listing-view .product-card-wraper:hover:after,

.listing-view .product-card-wraper:hover:before {

  display: none;

}

.listing-view .product-card-wraper:hover,

.listing-view .product-card-wraper.active {

  border-radius: 16px;

}

.listing-view .flexy p {

  color: #070730;

  min-width: 94px;

  text-align: center;

}

.listing-view.gap-6 {

  gap: 2rem;

}

.boldy-txt {

  color: #7b7b7b !important;

}

.hidden {

  display: none;

}

.listing-view .hidden {

  display: block;

}

p.boldy-txt {

  min-width: 52px;

}

.hidden .product-img.imgg {

  height: 0px;

}

.product-card-wraper.hidden:hover {

  border: 1px solid #ebebeb;

}



.bg-lightess {

  color: #727272;

  font-size: 13px;



  resize: none;

  border: 1px solid #d5d5d5;

}

.product-modal .btn-close {

  border: 1px solid #000;

  border-radius: 50%;

  width: 0.8rem;

  height: 0.8rem;

  opacity: 1;

  padding: 0.3rem;

  background-size: 0.7rem;

  background-position: center;

}

.product-modal .btn-close:active {

  box-shadow: none !important;

}

.modal-psedou {

  border: 1px solid #bebebe;

}

.togli + ul,

.togli {

  font-size: 13px;

}



.listing-view .sep-col {

  width: 300px;

}

.modal .form-control:focus,

.modal .form-select:focus {

  border-color: #ff7343;

  box-shadow: 0 0 0 0.25rem rgb(255 115 67 / 25%) !important;

}

.font-14 {

  font-size: 14px !important;

}

.srch-wrap {

  max-width: 500px;

}

@media screen and (min-width: 991px) {

  .listing-view p.boldy-txt.mb-0 {

    min-width: 100px;

  }



  .listing-view .product-details {

    justify-content: space-between;

  }

  .billing-table {

    table-layout: fixed;

  }

  .setting-list > .setting-list-ul > li > span,

  .setting-list > .border-padd > .setting-list-ul > li > span {

    text-wrap: nowrap;

    text-overflow: ellipsis;

    overflow: hidden;

    max-width: 180px;

  }

  .setting-list > .border-padd > .setting-list-ul > li > .setting_alert_span {

    max-width: 100%;

  }

}

.alertness li {

  width: 100% !important;

}

@media screen and (min-width: 768px) {

  input#email_product_disapproved_lmt {

    max-width: 150px;

    margin-inline: 10px;

  }

  span.setting_alert_span {

    display: flex !important ;

    align-items: center !important;

  }

}

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

  .work-feature-card {

    margin: 0px 0px;

  }

  .srch-wrap {

    max-width: 400px;

  }

  .work-section-slick {

    margin: 0px 0px;

  }



  .cb_how_works_icon {

    height: 85px;

  }



  .pricing-card {

    clip-path: polygon(10% 0, 100% 0, 100% 100%, 100% 100%, 0 100%, 0 16%);

  }



  .slick-next {

    right: 35px;

    z-index: 9;

  }



  .slick-prev {

    left: 35px;

    z-index: 9;

  }



  .Benefits_card_img_wrap {

    padding: 25px 20px;

  }



  .cb_tittle_style {

    font-size: 24px;

  }



  .feature-card,

  .work-feature-card {

    border-width: 0px 0px 8px 8px !important;

  }



  ::-webkit-scrollbar {

    width: 0;

    height: 0;

  }



  ::-webkit-scrollbar-thumb {

    background: transparent;

  }



  ::-webkit-scrollbar-track {

    background: transparent;

  }



  * {

    scrollbar-width: none;

  }



  * {

    -ms-overflow-style: none;

  }



  .otp-input {

    width: 34px;

    height: 34px;

    font-size: 14px;

  }



  .cb_padding_full {

    padding: 60px 0px;

  }



  .setting-list > .setting-list-ul > li,

  .setting-list > .border-padd > .setting-list-ul > li {

    width: 50%;

  }

  .col-md-auto.me-lg-3.text-end.welcome_show {

    margin-right: 10px;

  }

  .user_contactus

    .d-flex.flex-wrap.align-items-center.justify-content-center.justify-content-lg-start {

    gap: 0.5rem !important;

  }

  .listing-view .product-img {

    width: 70px;

    margin-right: 0.5rem !important;

    height: 70px;

  }

  .listing-view .product-details p,

  .listing-view .product-details span {

    font-size: 11px;

  }

  .listing-view .product-link {

    max-width: 233px;

  }

  .listing-view .product-details {

    width: 100%;

  }

  .listing-view .product-card-wraper {

    padding: 10px 10px 0 10px;

  }

  .listing-view .sep-col {

    width: 146px;

  }

  .listing-view .sale-tag::before {

    left: -12px;

  }

}



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

  .product-card-wraper {

    width: 85%;

  }

  .listing-view .product-card-wraper {

    width: 100%;

  }

  .gap-6 {

    gap: 2.5rem;

  }

}

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

  .view-btn {

    display: none;

  }

  .product-card-wraper {

    width: 100%;

    margin-left: 20px;

  }

}

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

  .cb_tittle_style {

    font-size: 20px;

    padding: 5px 20px 5px 5px;

  }



  .pricing-card {

    clip-path: polygon(16% 0, 100% 0, 100% 100%, 100% 100%, 0 100%, 0 16%);

  }



  .pricing-card_catgory {

    min-width: 230px;

    left: -76px;

    transform: rotate(310deg);

  }



  .otp-input {

    width: 30px;

    height: 30px;

    font-size: 13px;

  }



  .setting-list > .setting-list-ul > li,

  .setting-list > .border-padd > .setting-list-ul > li {

    width: 100%;

  }

  .product-img {

    margin-left: -47px;



    width: 87px;

    height: 86px;

  }

  .profile_img_wrap {

    margin-top: -20px;

  }

}

.listing-view .product-card.pt-4 {

  padding-top: 1rem !important;

}

.listing-view .product-card.pb-4 {

  padding-bottom: 1rem !important;

}

.billing-title {

  font-size: 32px;

  font-weight: bold;

  color: #0c1235;

}



.section-subtitle {

  font-size: 16px;

  color: #6c757d;

}



.billing-table {

  border-collapse: separate;

  border-spacing: 0;

  border-radius: 10px 10px 0 0;

}



.billing-table th {

  background-color: #ff6a2f;

  color: white;

  text-align: center;

  border: none;

  padding: 1rem;

}

.billing-table td:nth-child(2) {

  min-width: 150px;

}

.billing-table td {

  text-align: center;

  vertical-align: middle;

  border-right: 1px solid #e0e0e0;

  padding: 1rem;

  border: none;

  border-right: 1px solid #e0e0e0;

  color: #7b7b7b;

  font-size: 15px;

  min-width: 100px;

}

td.billing-total {

  color: #fff;

  background-color: #ff6a2f;

}



.billing-table thead tr:first-child th:first-child {

  border-top-left-radius: 10px;

}



.billing-table thead tr:first-child th:last-child {

  border-top-right-radius: 10px;

}



.billing-table tfoot td:last-child {

  background-color: #ff6a2f;

  color: white;

  font-weight: bold;

  border-bottom-right-radius: 10px;

  text-align: right;

}



.billing-table tfoot td:first-child {

  border-bottom-left-radius: 10px;

}



.payment-method-box {

  border: 1px solid #e0e0e0;

  border-radius: 10px;

  padding: 1.5rem 0.8rem 1.5rem 2rem;

  background-color: #f3f4f6;

  max-width: 300px;

}



.visa-badge {

  background: #2349a9;

  color: white;

  border-radius: 0.25rem;

  padding: 0.25rem 0.5rem;

  font-size: 12px;

  margin-right: 0.5rem;

}

.colspaning {

  border-top: 1px solid #e0e0e0 !important;

  border-bottom: 1px solid #e0e0e0 !important;

}

.billing-table td:nth-child(1) {

  border-left: 1px solid #e0e0e0;

}

.closed,

.closed:focus {

  background-image: none;

  font-size: 14px;

  margin-top: -94px !important;

  box-shadow: none !important;

}

.payment-body label,

.payment-body input,

.payment-body input::placeholder {

  font-size: 14px;

}

.border-right-0 {

  border-right: 0px !important;

}

.font-15 {

  font-size: 15px !important;

}

.payment-body input[type="text"],

.payment-body input[type="number"],

span.input-group-text {

  height: 40px;

}

.clrbk,

.clrbk a {

  color: #000;

}

.clr-d5,

input.clr-d5::placeholder {

  color: #d5d5d5;

}

.payment-method-box p,

.payment-method-box span {

  color: #7b7b7b;

}

.clr-unicode {

  color: #070730 !important;

  font-size: 20px;

}

p.description.mb-2 {

  color: #7b7b7b;

  font-size: 12px;

}

.extra-h {

  min-height: 50px;

}

.user_feedauth select:focus,

.user_feedauth .form-control:focus {

  border: 1px solid #ff7343 !important;

  background-color: #ff73430f !important;

  box-shadow: none !important;

}



.shopify-auth-data .chosen-container-multi .chosen-choices li.search-choice {

  border: 1px solid #ff7343 !important;

  border-radius: 3px;

  background-color: #fff7f4 !important;

  background-image: none !important;

}

.shopify-auth-data

  .chosen-container.chosen-container-multi.chosen-container-active

  ul.chosen-choices {

  border: 1px solid #ff7343 !important;

  background-color: #ff73430f !important;

  box-shadow: none !important;

}

.shopify-auth-data

  .chosen-container-multi

  .chosen-choices

  li.search-choice

  span {

  color: #ff7343;

  /* padding: 7px; */

  font-size: 14px !important;

}

.shopify-auth-data .chosen-container-multi .chosen-choices li.search-choice {

  padding: 6px 20px 6px 5px !important;

}

.shopify-auth-data

  .chosen-container-multi

  .chosen-choices

  li.search-choice

  .search-choice-close {

  top: 1px !important;

  right: 5px !important;

}

.shopify-auth-data .chosen-container-multi .chosen-choices li.search-choice {

  margin: 3px 16px 3px 0px !important;

}

.cb-radio {

  display: inline-flex;

  align-items: center;

  cursor: pointer;

  position: relative;

}



.cb-radio__input {

  position: absolute;

  opacity: 0;

}



.cb-radio__label {

  position: relative;

  padding-left: 28px;

  font-size: 14px;

  color: #7b7b7b;

  transition: color 0.15s ease-in-out;

}



/* Outer circle */

.cb-radio__label::before {

  content: "";

  position: absolute;

  top: 50%;

  left: 0;

  width: 15px;

  height: 15px;

  border: 1px solid #ff7343;

  border-radius: 50%;

  transform: translateY(-50%);

  box-sizing: border-box;

}



/* Inner dot */

.cb-radio__label::after {

  content: "";

  position: absolute;

  top: 50%;

  left: 0;

  width: 7px;

  height: 7px;

  background: #ff7343;

  border-radius: 50%;

  transform: translate(4px, -50%) scale(0.25);

  opacity: 0;

  transition: opacity 0.15s ease-in-out, transform 0.15s ease-in-out;

}

.setting-list > .setting-list-ul > li > span,

.setting-list > .border-padd > .setting-list-ul > li > span {

  display: block;

  font-weight: 500;

  color: #070730;

}

/* Checked state */

.cb-radio__input:checked + .cb-radio__label {

  color: #7b7b7b;

}



.setting-list h3.h5,

.auth-heading {

  color: #070730;

  font-size: 24px;

}

.border-padd {

  border: 1px solid #bebebe;

  padding: 22px 20px 0px 20px;

  border-radius: 6px;

}

.cb-radio__input:checked + .cb-radio__label::after {

  opacity: 1;

  transform: translate(4px, -50%) scale(1);

}



/* Focus state */

.cb-radio__input:focus-visible + .cb-radio__label::before {

  box-shadow: 0 0 0 4px rgba(240, 90, 40, 0.35);

}

.setting-list.inline-setting {

  margin-top: 20px;

}

.import-heading p {

  font-size: 15px;

  color: #7b7b7b;

}

span.font-11 {

  font-size: 12px;

}

.chosen-container.chosen-container-multi {

  max-width: 100%;

  width: 100% !important;

}

.user_feedauth select,

.user_feedauth input[type="text"] {

  color: #727272 !important;

  border: 1px solid #d5d5d5 !important;

  font-size: 14px;

  height: 38px;

}

.m-200 {

  max-width: 130px;

  margin: auto;

}

.profile-pic-wrapper {

  position: absolute;

  top: 74px;

  left: 51%;

  width: fit-content;

}

.edit_form input,

.edit_form label {

  color: #727272 !important;

  font-size: 14px !important;

}

.edit_form input {

  border: 1px solid #d5d5d5;

}

.edit_form input:focus {

  box-shadow: 0 0 0 4px rgba(240, 90, 40, 0.35);

  border-color: #ff7343;

}

.edit_form .form-check-input {

  margin-top: 0.35em;

}

.rule-name {

  color: #ff7343;

}

.edit_form input[type="text"],

.edit_form input[type="password"],

.edit_form input[type="email"] {

  background-repeat: no-repeat;

  background-position: right 10px center;

  padding-right: 30px;

  background-size: 20px 20px;

}

.shopify-auth-data

  .chosen-container-multi

  .chosen-choices

  li.search-field

  > input[type="text"] {

  font-size: 14px !important;

}

.shopify-auth-data

  .chosen-container-multi

  .chosen-choices

  li.search-field

  input[type="text"] {

  padding-left: 0 !important;

}

.tags_wrap_main_field {

  max-width: 250px;

  margin-bottom: 1rem;

}



.labeling {

  color: #727272;

  font-size: 14px;

  padding-left: 14px;

  font-weight: 500;

}

.product-modal .form-control {

  background-repeat: no-repeat;

  background-position: 10px center;

  background-size: 16px 16px;

  padding-left: 36px;

  padding-block: 8px;

}

.font-weight-500 {

  font-weight: 500 !important;

}

.import-setting-section-wrapper,

.mb--4 {

  margin-bottom: 2.5rem;

}

.product-card-wrapers {

  cursor: pointer;

}

a.btn.btn-secondary {

  -webkit-appearance: none;

  appearance: none;

}

.pricing-card_pricing .display-6 {

  font-size: 2rem !important;

}

.login-page-form-wrap

  .form-check-input[type="checkbox"]

  + label.form-check-label {

  font-size: 13px;

}

.login-page-form-wrap

  .form-check-input[type="checkbox"]

  + label.form-check-label

  a {

  color: #f97316;

}



/* ---------------------My New Style---------------------- */
/*==================================================
                    HEADER
==================================================*/

.fb_header{
    position: relative;
    width: 100%;
    background: #fff;
    padding: 22px 0;
    z-index: 9999;
}

.fb_header_wrapper{
    display: flex;
    align-items: center;
    justify-content: space-between;
}


/*==================================================
                    LOGO
==================================================*/

.fb_logo{
    display: flex;
    align-items: center;
    text-decoration: none;
    flex-shrink: 0;
}

.fb_logo img{
    height: 48px;
    width: auto;
    display: block;
}


/*==================================================
                NAVIGATION
==================================================*/

.fb_nav{
    flex: 1;
    display: flex;
    justify-content: center;
}

.fb_nav ul{
    display: flex;
    align-items: center;
    gap: 42px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.fb_nav ul li{
    position: relative;
}

.fb_nav ul li a{
    display: flex;
    align-items: center;
    gap: 5px;
    color: #1F2937;
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
    transition: .25s ease;
}

.fb_nav ul li a:hover{
    color: #5B5DF0;
}

.fb_dropdown svg{
    width: 12px;
    height: 12px;
}


/*==================================================
                HEADER ACTIONS
==================================================*/

.fb_header_actions{
    display: flex;
    align-items: center;
    gap: 24px;
}


/*==================================================
                SIGN IN
==================================================*/

.fb_signin{
    text-decoration: none;
    color: #111827;
    font-size: 15px;
    font-weight: 600;
    transition: .25s;
}

.fb_signin:hover{
    color: #5B5DF0;
}


/*==================================================
                BUTTON
==================================================*/

.fb_header_btn{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 44px;
    padding: 0 22px;
    min-width: 160px;
    background: linear-gradient(180deg, #5F4CFF 0%, #4D39F5 100%);
    color: #fff;
    text-decoration: none;
    font-size: 14px;
    font-weight: 600;
    border-radius: 8px;
    transition: all .25s ease;
}

.fb_header_btn:hover{
    color: #fff;
    background: linear-gradient(180deg, #6A59FF 0%, #5644F8 100%);
}

/*==================================================
                MOBILE TOGGLE
==================================================*/

.fb_mobile_toggle{
    display: none;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 46px;
    height: 46px;
    border: 1px solid #E5E7EB;
    border-radius: 10px;
    background: #fff;
    padding: 0;
    cursor: pointer;
    transition: .2s ease;
}

.fb_mobile_toggle span{
    display: block;
    width: 22px;
    height: 2px;
    background: #111827;
    margin: 3px 0;
    border-radius: 5px;
    transition: .3s ease;
}

/* Animated Hamburger to X */
.fb_header.menu-open .fb_mobile_toggle span:nth-child(1) {
    transform: translateY(8px) rotate(45deg);
}
.fb_header.menu-open .fb_mobile_toggle span:nth-child(2) {
    opacity: 0;
}
.fb_header.menu-open .fb_mobile_toggle span:nth-child(3) {
    transform: translateY(-8px) rotate(-45deg);
}


/*==================================================
          MOBILE MENU (HIDDEN BY DEFAULT)
==================================================*/

.fb_mobile_menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    background: #ffffff;
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.08);
    border-top: 1px solid #E5E7EB;
    padding: 24px 20px;
    z-index: 998;
}

.fb_header.menu-open .fb_mobile_menu {
    display: block !important;
}

.fb_mobile_nav ul {
    list-style: none;
    padding: 0;
    margin: 0 0 24px 0;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.fb_mobile_nav ul li a {
    text-decoration: none;
    color: #1F2937;
    font-size: 16px;
    font-weight: 600;
    display: block;
    transition: color .2s ease;
}

.fb_mobile_nav ul li a:hover {
    color: #5B5DF0;
}

.fb_mobile_actions {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding-top: 20px;
    border-top: 1px solid #F3F4F6;
}

.fb_mobile_actions .fb_header_btn {
    width: 100%;
}

.fb_mobile_actions .fb_signin {
    text-align: center;
    padding: 8px 0;
}


/*==================================================
                RESPONSIVE BREAKPOINTS
==================================================*/

@media(max-width: 1199px){
    .fb_nav ul{
        gap: 28px;
    }
}

@media(max-width: 991px){
    .fb_header{
        padding: 18px 0;
    }

    .fb_nav{
        display: none !important;
    }

    .fb_header_actions{
        display: none !important;
    }

    .fb_mobile_toggle{
        display: flex;
    }
}

@media(max-width: 576px){
    .fb_logo img{
        height: 38px;
    }

    .fb_header{
        padding: 14px 0;
    }

    .fb_mobile_toggle{
        width: 40px;
        height: 40px;
    }
}
/* ----------Hero Section---------------------- */
.hero-content{
    max-width:740px;
    margin-top:80px !important;
  
}

.hero-badge{
    display:inline-flex;
    align-items:center;
    gap:8px;
    background:#F3F0FF;
    color:#5B5DF0;
    padding:8px 16px;
    border-radius:50px;
    font-size:13px;
    font-weight:600;
    margin-bottom:32px;
    margin-top: 20px;
}

.hero-title{
    font-size:72px;
    line-height:1.05;
    font-weight:800;
    color:#111827;
    letter-spacing:-2px;
    margin-bottom:24px;
}

.hero-title span{
    background:linear-gradient(90deg,#2a2399,#926df8);
    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
}

.hero-description{
    font-size:18px;
    line-height:1.7;
    color:#6B7280;
    max-width:560px;
    margin-bottom:34px;
}

.hero-features{
    display:grid;
    grid-template-columns:repeat(2,minmax(220px,1fr));
    gap:18px 40px;
    margin-bottom:40px;
}

.hero-feature{
    display:flex;
    align-items:center;
    gap:12px;
    color:#374151;
    font-size:16px;
    font-weight:500;
}

.hero-feature i{
    color:#5B4DFF;
    font-size:20px;
}

.hero-buttons{
    display:flex;
    align-items:center;
    gap:18px;
    margin-bottom:42px;
}

.hero-btn{
    height:58px;
    padding:0 28px;
    border-radius:14px;
    display:inline-flex;
    align-items:center;
    gap:12px;
    text-decoration:none;
    font-size:16px;
    font-weight:600;
    transition:.3s;
}

.hero-btn-primary{
    background:linear-gradient(90deg,#4532FF,#7159FF);
    color:#fff;
}

.hero-btn-primary:hover{
    color:#fff;
    transform:translateY(-2px);
}

.hero-btn-outline{
    border:1px solid #E5E7EB;
    background:#fff;
    color:#111827;
}

.hero-btn-outline:hover{
    background:#F9FAFB;
    color:#111827;
}

.hero-users{
    display:flex;
    align-items:center;
    gap:18px;
}

.hero-avatars{
    display:flex;
}

.hero-avatars img{
    width:42px;
    height:42px;
    border-radius:50%;
    border:3px solid #fff;
    margin-left:-10px;
    object-fit:cover;
}

.hero-avatars img:first-child{
    margin-left:0;
}

.hero-users p{
    margin:0;
    font-size:16px;
    color:#6B7280;
}

.hero-users strong{
    color:#111827;
}

/* Fix mobile image scaling and clarity */
.hero-image-wrapper img {
    width: 100%;
    height: auto;
    object-fit: contain;
    border-radius: 16px;
    border: none !important;
   box-shadow: 0px 6px 25px rgba(0, 0, 0, 0.1);
    margin-top: 60px;
    
    /* Hardware acceleration to prevent mobile blurriness */
    -webkit-backface-visibility: hidden;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    image-rendering: -webkit-optimize-contrast;
}

@media(max-width:991px){
 
    .hero-content{
    margin-top:1px !important;
  
}

    .hero-title{
        font-size:52px;
    }

    .hero-description{
        font-size:18px;
    }

    .hero-features{
        grid-template-columns:1fr;
    }

    .hero-buttons{
        flex-direction:column;
        align-items:stretch;
    }

    .hero-btn{
        justify-content:center;
    }

}
/*======================================
            FEATURES SECTION
=======================================*/

.fb-features-section {
    padding: 100px 0;
    background: #ffffff;
}

.fb-section-heading {
    text-align: center;
    margin-bottom: 60px;
}

.fb-section-badge {
    display: inline-block;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: #5B5DF0;
    margin-bottom: 14px;
}

.fb-section-heading h2 {
    font-size: 46px;
    font-weight: 800;
    line-height: 1.15;
    color: #111827;
    margin: 0;
}


/*======================================
              FEATURE CARD
=======================================*/

.fb-feature-card {

    display: flex;
    align-items: flex-start;
    gap: 22px;

    height: 100%;

    padding: 34px 32px;

    background: #ffffff;

    border: 1px solid #EEF1F6;

    border-radius: 18px;

    transition: .35s ease;

    box-shadow:
        0 1px 2px rgba(15, 23, 42, .03),
        0 12px 30px rgba(15, 23, 42, .04);

}

.fb-feature-card:hover {

    transform: translateY(-8px);

    border-color: #635BFF;

    box-shadow:
        0 10px 30px rgba(99, 91, 255, .10);

}


/*======================================
                ICON
=======================================*/

.fb-feature-icon {

    min-width: 56px;
    width: 56px;
    height: 56px;

    border-radius: 16px;

    background: #F7F5FF;

    display: flex;
    justify-content: center;
    align-items: center;

}

.fb-feature-icon i {

    font-size: 23px;

    color: #635BFF;

}


/*======================================
              CONTENT
=======================================*/

.fb-feature-content h4 {

    font-size: 22px;

    font-weight: 700;

    color: #1E1B39;

    margin-bottom: 14px;

}

.fb-feature-content p {

    margin: 0;

    font-size: 15px;
    font-weight: 500;

    line-height: 1.85;

    color: #6B7280;

}


/*======================================
            RESPONSIVE
=======================================*/

@media (max-width:1200px){

.fb-section-heading h2{

    font-size:40px;

}

}


@media (max-width:991px){

.fb-features-section{

    padding:80px 0;

}

.fb-section-heading{

    margin-bottom:60px;

}

.fb-section-heading h2{

    font-size:34px;

}

.fb-feature-card{

    padding:28px;

}

}


@media (max-width:767px){

.fb-section-heading h2{

    font-size:30px;

}

.fb-feature-card{

    flex-direction:column;

    text-align:center;

    align-items:center;

    padding:26px;

}

.fb-feature-content h4{

    font-size:20px;

}

}


@media (max-width:575px){

.fb-features-section{

    padding:60px 0;

}

.fb-section-heading h2{

    font-size:26px;

}

.fb-feature-card{

    padding:22px;

}

.fb-feature-icon{

    width:52px;
    height:52px;
    min-width:52px;

}

.fb-feature-icon i{

    font-size:21px;

}

.fb-feature-content p{

    font-size:15px;

}

}

/*=========================================
        TRUSTED SOURCES SECTION
=========================================*/

.feed_sources_section{
    
    margin-top:100px;
    background:#ffffff;
    border-bottom:1px solid #eceef5;
    
}

.feed_sources_heading{
    text-align:center;
    font-size:25px;
    font-weight:600;
    color:#6B7280;
    margin-bottom:28px;
}

.feed_sources_wrapper{
    display:flex;
    width: 100%;
    align-items:center;
    justify-content:space-between;
    flex-wrap:wrap;
    gap:40px;
}

.feed_source_item{
    display:flex;
    align-items:center;
    gap:8px;
    cursor:pointer;
    transition:.3s ease;
}

.feed_source_item:hover{
    transform:translateY(-2px);
}

.feed_source_item span{
    font-size:20px;
    font-weight:600;
    color:#1F2937;
}

.feed_source_item i{
    font-size:30px;
}

.feed_source_item img{
    width:30px;
    height:30px;
    object-fit:contain;
}

/* Brand Colors */

.feed_youtube{
    color:#FF0000;
}

.feed_reddit{
    color:#FF4500;
}

.feed_github{
    color:#111827;
}

.feed_rss{
    color:#FF7A00;
}


/*==========================
      Responsive
==========================*/

@media(max-width:991px){

.feed_sources_wrapper{
    gap:28px;
}

.feed_source_item span{
    font-size:15px;
}

}

@media(max-width:767px){

.feed_sources_section{
    padding:24px 0;
}

.feed_sources_heading{
    font-size:14px;
    margin-bottom:22px;
}

.feed_sources_wrapper{
    gap:20px;
    justify-content:center;
    
}

.feed_source_item{
    width:45%;
    justify-content:flex-start;
}

.feed_source_item span{
    font-size:14px;
}

}
/*==================================================
                CTA SECTION
==================================================*/

.fb_cta_section{
    padding:90px 0;
    background:#ffffff;
}

.fb_cta_box{
    position:relative;
    overflow:hidden;

    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:70px;

    padding:40px 48px;

    border-radius:20px;

    background:linear-gradient(90deg,#140066 0%,#2C0CCF 50%,#6436FF 100%);

    box-shadow:
        0 20px 60px rgba(70,60,255,.18);
}

/* Decorative Glow */

.fb_cta_box::before{
    content:"";
    position:absolute;
    width:340px;
    height:340px;
    border-radius:50%;
    right:-150px;
    top:-140px;
    background:rgba(255,255,255,.06);
}

.fb_cta_box::after{
    content:"";
    position:absolute;
    width:220px;
    height:220px;
    border-radius:50%;
    left:-100px;
    bottom:-120px;
    background:rgba(255,255,255,.05);
}



/*==================================================
                    LEFT SIDE
==================================================*/

.fb_cta_left{
    display:flex;
    align-items:center;
    gap:22px;
    z-index:2;
}

.fb_cta_logo{

    flex-shrink:0;

    display:flex;
    justify-content:center;
    margin-top:-30px;

}

.fb_cta_logo img{
    width:120px;
    height:120px;
    object-fit:contain;
}

.fb_cta_content h2{
    margin:0 0 14px;

    color:#ffffff;

    font-size:38px;

    font-weight:800;

    line-height:1.18;

    letter-spacing:-0.5px;
}

.fb_cta_content p{
    margin:0;

    color:rgba(255,255,255,.82);

    font-size:16px;

    line-height:1.7;

    max-width:330px;
}



/*==================================================
                    RIGHT SIDE
==================================================*/

.fb_cta_right{
    width:100%;
    max-width:560px;
    z-index:2;
}

.fb_cta_form{
    display:flex;
    align-items:center;

    background:#ffffff;

    padding:8px;

    border-radius:12px;

    box-shadow:
        0 10px 35px rgba(0,0,0,.10);
}

.fb_cta_form input{
    flex:1;

    height:54px;

    border:none;

    outline:none;

    padding:0 18px;

    background:transparent;

    color:#111827;

    font-size:15px;
}

.fb_cta_form input::placeholder{
    color:#9CA3AF;
}

.fb_cta_form button{

    border:none;

    cursor:pointer;

    height:54px;

    padding:0 28px;

    border-radius:10px;

    background:#6B4CFF;

    color:#fff;

    font-size:15px;

    font-weight:700;

    transition:.3s;
}

.fb_cta_form button:hover{

    background:#5838f5;

    transform:translateY(-1px);
}



/*==================================================
                BOTTOM FEATURES
==================================================*/

.fb_cta_features{

    display:flex;

    align-items:center;

    gap:30px;

    margin-top:18px;

    flex-wrap:wrap;
}

.fb_cta_features span{

    display:flex;

    align-items:center;

    gap:8px;

    color:#fff;

    font-size:14px;

    font-weight:500;
}

.fb_cta_features i{

    font-size:15px;

    color:#fff;
}



/*==================================================
                RESPONSIVE
==================================================*/

@media(max-width:991px){

.fb_cta_box{

    flex-direction:column;

    text-align:center;

    gap:40px;

    padding:38px 30px;
}

.fb_cta_left{

    flex-direction:column;
}

.fb_cta_content p{

    max-width:100%;
}

.fb_cta_right{

    max-width:100%;
}

.fb_cta_features{

    justify-content:center;
}

}

@media(max-width:767px){

.fb_cta_section{

    padding:70px 0;
}

.fb_cta_box{

    padding:30px 24px;
}

.fb_cta_content h2{

    font-size:30px;
}

.fb_cta_form{

    flex-direction:column;

    background:transparent;

    padding:0;

    box-shadow:none;

    gap:12px;
}

.fb_cta_form input{

    width:100%;

    background:#fff;

    border-radius:10px;
    
}

.fb_cta_form button{

    width:100%;
   
}

.fb_cta_features{

    flex-direction:column;

    gap:12px;
}

}

@media(max-width:576px){

.fb_cta_logo{

    width:64px;
    height:64px;
}

.fb_cta_logo img{

    width:44px;
    height:44px;
    margin-top:20px;
}

.fb_cta_content h2{

    font-size:26px;
}

.fb_cta_content p{

    font-size:15px;
}

.fb_cta_features span{

    font-size:13px;
}
.fb_cta_form input{

     padding:14px 18px;
}
.fb_cta_form button{

    width:100%;
    height: 48px;
   
}

}
/*=========================================
        AI SECTION
=========================================*/

/* =================================================================
   FB AI SECTION - CRISP RESPONSIVE IMAGE & STYLING FIX
   ================================================================= */

.fb_ai_section {
    position: relative;
    overflow: hidden;
    padding: 50px 30px;
    max-width: 1290px;
    margin: 0 auto;
    background:
        linear-gradient(135deg, #fdf5fb 0%, transparent 60%),
        linear-gradient(315deg, #f3f4ff 0%, transparent 60%),
        #ffffff;
    border-radius: 24px;
}

.fb_ai_wrapper {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 60px;
}

/* ==========================================
            LEFT CONTENT
=========================================*/

.fb_ai_content {
    width: 100%;
    max-width: 500px;
    flex-shrink: 0;
}

.fb_ai_badge {
    display: inline-flex;
    align-items: center;
    padding: 8px 18px;
    border-radius: 999px;
    background: #EEF2FF;
    color: #5B5DF0;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    margin-bottom: 24px;
}

.fb_ai_title {
    font-size: 52px;
    line-height: 1.1;
    font-weight: 800;
    color: #111827;
    letter-spacing: -1.5px;
    margin-bottom: 22px;
}

.fb_ai_description {
    font-size: 18px;
    line-height: 1.7;
    color: #6B7280;
    margin-bottom: 32px;
}

/* ==========================================
            FEATURES LIST
=========================================*/

.fb_ai_features {
    list-style: none;
    margin: 0 0 36px;
    padding: 0;
}

.fb_ai_features li {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 16px;
    font-size: 16px;
    font-weight: 500;
    color: #374151;
}

.fb_ai_features li:last-child {
    margin-bottom: 0;
}

.fb_ai_features i {
    color: #5B5DF0;
    font-size: 18px;
    flex-shrink: 0;
}

/* ==========================================
              BUTTON
=========================================*/

.fb_ai_button {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 16px 28px;
    border-radius: 14px;
    background: linear-gradient(135deg,#5B5DF0,#7848FF);
    color: #fff;
    text-decoration: none;
    font-size: 16px;
    font-weight: 700;
    transition: .35s ease;
    box-shadow: 0 16px 35px rgba(91,93,240,.25);
}

.fb_ai_button:hover {
    color: #fff;
    transform: translateY(-4px);
    box-shadow: 0 24px 50px rgba(91,93,240,.32);
}

.fb_ai_button i {
    font-size: 18px;
}

/* ==========================================
          RIGHT CONTAINER (VISUAL)
=========================================*/

.fb_ai_visual {
    position: relative;
    width: 100%;
    max-width: 760px;
    min-height: 580px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

/* Background Glow */
.fb_ai_visual::before {
    content: "";
    position: absolute;
    width: 480px;
    height: 480px;
    background: radial-gradient(circle,rgba(231, 229, 250, 0.16),transparent 70%);
    top: 10px;
    right: 20px;
    border-radius: 50%;
    z-index: 0;
}

.fb_ai_visual::after {
    content: "";
    position: absolute;
    width: 320px;
    height: 320px;
    background: radial-gradient(circle,rgba(208, 201, 253, 0.12),transparent 70%);
    bottom: 0;
    right: 120px;
    border-radius: 50%;
    z-index: 0;
}

/* ==========================================
        DESKTOP DASHBOARD MOCKUP
=========================================*/

.fb_dashboard_mockup {
    position: relative;
    width: 100%;
    max-width: 760px;
    z-index: 2;
}

.fb_dashboard_mockup img {
    width: 100%;
    height: 610px;
    display: block;
    border-radius: 16px;
    box-shadow: none;
    
    /* Hardware acceleration & sharp rendering */
    -webkit-backface-visibility: hidden;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    image-rendering: -webkit-optimize-contrast;
    
    filter:
        drop-shadow(0 6px 18px rgba(0,0,0,0.08))
        drop-shadow(0 14px 32px rgba(0,0,0,0.14));
}

/* ==========================================
            RESPONSIVE BREAKPOINTS
=========================================*/

@media (max-width: 1200px) {
    .fb_ai_section {
        padding: 50px 30px;
    }

    .fb_ai_title {
        font-size: 44px;
    }

    .fb_ai_wrapper {
        gap: 40px;
    }

    .fb_ai_visual, 
    .fb_dashboard_mockup {
        max-width: 620px;
    }
}

@media (max-width: 991px) {
    .fb_ai_wrapper {
        flex-direction: column;
        gap: 50px;
    }

    .fb_ai_content {
        max-width: 100%;
        text-align: center;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .fb_ai_features {
        display: inline-block;
        text-align: left;
    }

    .fb_ai_visual {
        max-width: 100%;
        min-height: auto;
        justify-content: center;
    }

    .fb_dashboard_mockup {
        max-width: 100%;
    }
}

@media (max-width: 767px) {
    .fb_ai_section {
        padding: 40px 20px;
        border-radius: 16px;
    }

    .fb_ai_title {
        font-size: 32px;
        letter-spacing: -1px;
    }

    .fb_ai_description {
        font-size: 16px;
        margin-bottom: 24px;
    }

    .fb_ai_badge {
        margin-bottom: 18px;
    }

    /* Fix forced height causing mobile image distortion/blur */
    .fb_dashboard_mockup img {
        height: auto;
        max-height: 380px;
        object-fit: contain;
    }
}

@media (max-width: 576px) {
    .fb_ai_section {
        padding: 30px 16px;
    }

    .fb_ai_title {
        font-size: 26px;
        line-height: 1.2;
    }

    .fb_ai_description {
        font-size: 15px;
        line-height: 1.6;
    }

    .fb_ai_features li {
        font-size: 14px;
        gap: 10px;
    }

    .fb_ai_button {
        width: 100%;
        justify-content: center;
        padding: 14px 20px;
    }

    .fb_dashboard_mockup img {
        height: auto;
        max-height: 300px;
        object-fit: contain;
        border-radius: 10px;
    }
}
/*==================================================
            HOW IT WORKS SECTION
==================================================*/

.fb_steps_section{
    padding:100px 0;
    background:#ffffff;
    margin-top: -80px;
}

.fb_steps_heading{
    text-align:center;
    margin-bottom:60px;
}

.fb_steps_badge{
    display:inline-block;
    color:#5B5DF0;
    font-size:13px;
    font-weight:700;
    letter-spacing:1px;
    text-transform:uppercase;
    margin-bottom:12px;
}

.fb_steps_heading h2{
    margin:0;
    font-size:46px;
    font-weight:800;
    color:#111827;
    line-height:1.15;
}



/*==================================================
                STEPS WRAPPER
==================================================*/

.fb_steps_wrapper{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:22px;
}



/*==================================================
                    CARD
==================================================*/

.fb_step_card{

    position:relative;

    flex:1;

    max-width:360px;

    min-height:245px;

    padding:34px 32px;

    border:1px solid #ECEEF6;

    border-radius:18px;

    background:#fff;

    transition:.35s ease;

}

.fb_step_card:hover{

    transform:translateY(-8px);

    border-color:#5B5DF0;

    box-shadow:0 18px 45px rgba(91,93,240,.10);

}



/*==================================================
                STEP NUMBER
==================================================*/

.fb_step_number{

    position:absolute;

    top:22px;

    left:22px;

    width:34px;

    height:34px;

    border-radius:50%;

    background:#5B5DF0;

    color:#fff;

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:15px;

    font-weight:700;

}



/*==================================================
                    ICON
==================================================*/

.fb_step_icon{

    width:62px;

    height:62px;

    margin:0 auto 24px;

    display:flex;

    justify-content:center;

    align-items:center;

}

.fb_step_icon img{

    width:58px;

    height:58px;

    object-fit:contain;

}



/*==================================================
                  CONTENT
==================================================*/

.fb_step_card h3{

    text-align:center;

    font-size:24px;

    font-weight:700;

    color:#111827;

    margin-bottom:16px;

}

.fb_step_card p{

    text-align:center;

    color:#6B7280;

    font-size:16px;

    line-height:1.8;

    margin:0;

}



/*==================================================
                DOTTED ARROW
==================================================*/

.fb_step_arrow{

    position:relative;

    width:70px;

    height:2px;

    flex-shrink:0;

}

.fb_step_arrow::before{

    content:"";

    position:absolute;

    left:0;
    right:18px;
    top:50%;

    transform:translateY(-50%);

    border-top:2px dashed #6B5BFF;

}

.fb_step_arrow::after{

    content:"➜";

    position:absolute;

    right:0;

    top:50%;

    transform:translateY(-50%);

    color:#6B5BFF;

    font-size:20px;

}
.fb_step_icon{
    width:64px;
    height:64px;

    margin:0 auto 22px;

    display:flex;
    align-items:center;
    justify-content:center;

    border-radius:16px;
    background:#F7F5FF;

    color:#5B5DF0;
}

.fb_step_icon svg{
    width:32px;
    height:32px;
    display:block;
}

.fb_step_icon path{
    stroke:currentColor;
}



/*==================================================
                RESPONSIVE
==================================================*/

@media(max-width:1199px){

.fb_steps_heading h2{

    font-size:40px;

}

}


@media(max-width:991px){

.fb_steps_section{

    padding:80px 0;

}

.fb_steps_wrapper{

    flex-direction:column;

    gap:28px;

}

.fb_step_card{

    max-width:100%;
    width:100%;

}

.fb_step_arrow{

    width:2px;
    height:55px;

}

.fb_step_arrow::before{

    left:50%;
    right:auto;
    top:0;
    bottom:18px;

    width:0;
    height:100%;

    border-top:none;
    border-left:2px dashed #B8B4FF;

    transform:translateX(-50%);

}

.fb_step_arrow::after{

    content:"▼";

    left:50%;
    right:auto;

    top:auto;
    bottom:-10px;

    transform:translateX(-50%);

}

}


@media(max-width:767px){

.fb_steps_heading{

    margin-bottom:45px;

}

.fb_steps_heading h2{

    font-size:32px;

}

.fb_step_card{

    padding:30px 24px;

    min-height:auto;

}

.fb_step_card h3{

    font-size:21px;

}

.fb_step_card p{

    font-size:15px;

}

}


@media(max-width:576px){

.fb_steps_section{

    padding:60px 0;

}

.fb_steps_heading h2{

    font-size:27px;

}

.fb_step_icon{

    width:54px;
    height:54px;

}

.fb_step_icon img{

    width:50px;
    height:50px;

}

.fb_step_number{

    width:30px;
    height:30px;

    font-size:14px;

}

}
/*=========================================
                FOOTER
=========================================*/

.fb_footer{
    padding:80px 0 35px;
    background:#ffffff;
    border-top:1px solid #EEF2F7;
}

.fb_footer_wrapper{
    display:grid;
    grid-template-columns:1.5fr 1fr 1fr 1fr 1.6fr;
    gap:55px;
    align-items:flex-start;
}



/*=========================================
              ABOUT
=========================================*/

.fb_footer_logo{
    display:inline-block;
    margin-bottom:18px;
}

.fb_footer_logo img{
    height:42px;
    width:auto;
    display:block;
}

.fb_footer_about p{
    max-width:270px;
    margin:0 0 24px;
    color:#6B7280;
    font-size:15px;
    line-height:1.8;
}



/*=========================================
            SOCIAL ICONS
=========================================*/

/*=================================
        SOCIAL ICONS
=================================*/

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

.fb_socials a{
    width:42px;
    height:42px;

    display:flex;
    align-items:center;
    justify-content:center;

    text-decoration:none;

    background:#F5F6FA;

    border-radius:50%;

    color:#374151;

    font-size:18px;

    transition:.25s ease;
}

.fb_socials a:hover{
    background:#5B5DF0;
    color:#fff;
    transform:translateY(-2px);
}

.fb_socials i{
    line-height:1;
}



/*=========================================
              LINKS
=========================================*/

.fb_footer_links h4,
.fb_footer_newsletter h4{

    margin-bottom:22px;

    font-size:17px;

    font-weight:700;

    color:#111827;

}

.fb_footer_links ul{
    margin:0;
    padding:0;
    list-style:none;
}

.fb_footer_links li{
    margin-bottom:15px;
}

.fb_footer_links li:last-child{
    margin-bottom:0;
}

.fb_footer_links a{
    color:#6B7280;
    text-decoration:none;
    font-size:15px;
    transition:.3s;
}

.fb_footer_links a:hover{
    color:#5B5DF0;
}



/*=========================================
          NEWSLETTER
=========================================*/

.fb_footer_newsletter p{

    margin:0 0 20px;

    color:#6B7280;

    font-size:15px;

    line-height:1.8;
}

.fb_footer_newsletter form{

    position:relative;
}

.fb_footer_newsletter input{

    width:100%;

    height:50px;

    border:1px solid #E6EAF2;

    border-radius:10px;

    outline:none;

    padding:0 55px 0 18px;

    font-size:15px;

    transition:.3s;
}

.fb_footer_newsletter input:focus{

    border-color:#a0a0a191;
}

.fb_footer_newsletter button{

    position:absolute;

    right:6px;
    top:6px;

    width:38px;
    height:38px;

    border:none;

    border-radius:8px;

    background: none;

    color:#fff;

    cursor:pointer;

    transition:.3s;
}

.fb_footer_newsletter button:hover{

    background:#5B5DF0;
}



/*=========================================
            COPYRIGHT
=========================================*/

.fb_footer_bottom{

    margin-top:55px;

    padding-top:24px;

    border-top:1px solid #EEF2F7;

    text-align:center;

    color:#9CA3AF;

    font-size:14px;
}



/*=========================================
            RESPONSIVE
=========================================*/

@media(max-width:1200px){

.fb_footer_wrapper{

    grid-template-columns:repeat(2,1fr);

    gap:45px;
}

}

@media(max-width:768px){

.fb_footer{

    padding:60px 0 25px;
}

.fb_footer_wrapper{

    grid-template-columns:1fr;

    gap:40px;

    text-align:center;
}

.fb_footer_about p{

    max-width:100%;
}

.fb_socials{

    justify-content:center;
}

.fb_footer_newsletter form{

    max-width:420px;

    margin:auto;
}

.fb_footer_bottom{

    margin-top:45px;
}

}

@media(max-width:576px){

.fb_footer{

    padding:50px 0 20px;
}

.fb_footer_logo img{

    height:36px;
}

.fb_footer_links h4,
.fb_footer_newsletter h4{

    font-size:16px;
}

.fb_footer_links a,
.fb_footer_newsletter p,
.fb_footer_about p{

    font-size:14px;
}

.fb_socials a{

    width:36px;
    height:36px;

    font-size:15px;
}

.fb_footer_newsletter input{

    height:46px;
}

.fb_footer_newsletter button{

    width:34px;
    height:34px;

    top:6px;
    right:6px;
}

}
/* -------------Register-------------- */




/* =========================
   PAGE
========================= */

.signup-page {
    width: 100%;
    min-height: 100vh;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 30px 20px;
}

/* =========================
   CARD
========================= */

.signup-card {
    width: 100%;
    max-width: 500px;

    background: #ffffff;

    border: 1px solid #edf0f5;
    border-radius: 7px;

    padding: 27px 29px 22px;

    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.035);
}

/* =========================
   LOGO
========================= */

.signup-logo {
    width: 100%;
    height: 48px;

    display: flex;
    align-items: center;
    justify-content: center;

    margin-bottom: 16px;
}

.signup-logo img {
    max-width: 180px;
    max-height: 48px;

    object-fit: contain;
}


/* =========================
   HEADING
========================= */

.signup-heading {
    text-align: center;
    margin-bottom: 21px;
}

.signup-heading h1 {
    font-size: 22px;
    line-height: 1.3;
    font-weight: 700;

    color: #171c32;

    margin-bottom: 5px;
}

.signup-heading p {
    font-size: 16px;
    line-height: 1.35;

    color: #9297aa;

    font-weight: 400;
}

/* =========================
   SOCIAL BUTTONS
========================= */

.social-login {
    display: flex;
    flex-direction: column;
    gap: 11px;
}

.social-btn {
    width: 100%;
    height: 44px;

    display: flex;
    align-items: center;

    position: relative;

    background: #ffffff;

    border: 1px solid #e1e4e9;
    border-radius: 6px;

    color: #30323a;

    font-size: 16px;
    font-weight: 500;

    cursor: pointer;

    transition:
        background-color 0.2s ease,
        border-color 0.2s ease,
        box-shadow 0.2s ease;
}

.social-btn:hover {
    background: #fafbfc;
    border-color: #d3d7de;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
}

.social-icon {
    width: 22px;
    height: 22px;

    position: absolute;
    left: 64px ;

    display: flex;
    align-items: center;
    justify-content: center;
}


/* Google */

.google-icon {
    font-family: Arial, sans-serif;
    font-size: 19px;
    font-weight: 700;

    color: #4285f4;
}

/* GitHub */

.github-icon svg {
    width: 20px;
    height: 20px;

    fill: #161616;
}

/* Microsoft */

.microsoft-icon {
    display: grid;
    grid-template-columns: 9px 9px;
    grid-template-rows: 9px 9px;

    gap: 2px;
}

.microsoft-icon i {
    display: block;
    width: 9px;
    height: 9px;
}

.microsoft-icon i:nth-child(1) {
    background: #f25022;
}

.microsoft-icon i:nth-child(2) {
    background: #7fba00;
}

.microsoft-icon i:nth-child(3) {
    background: #00a4ef;
}

.microsoft-icon i:nth-child(4) {
    background: #ffb900;
}
.social-btn span {
    text-align: left !important;
}
.social-btn > span:last-child {
    position: absolute;
    left: 138px;
    text-align: left;
    white-space: nowrap;
}

/* =========================
   DIVIDER
========================= */

.divider {
    width: 100%;

    display: flex;
    align-items: center;

    gap: 10px;

    margin: 18px 0 14px;
}

.divider span {
    flex: 1;
    height: 1px;
    background: #e9ebef;
}

.divider p {
    color: #969aa8;

    font-size: 14px;
    line-height: 1;

    margin: 0;
}

/* =========================
   FORM
========================= */

.form-group {
    width: 100%;
    margin-bottom: 13px;
}

.form-group label {
    display: block;

    margin-bottom: 6px;

    color: #747781ef;

    font-size: 15px;
    font-weight: 600;
}

.form-group input {
    width: 100%;
    height: 41px;

    border: 1px solid #d1d4da;
    border-radius: 6px;

    outline: none;

    padding: 0 13px;

    background: #ffffff;

    color: #30333d;

    font-family: inherit;
    font-size: 15px;

    transition:
        border-color 0.2s ease,
        box-shadow 0.2s ease;
}

.form-group input::placeholder {
    color: #a3a7b1;
}

.form-group input:focus {
    border-color: #4c46ed;

    box-shadow: 0 0 0 2px rgba(76, 70, 237, 0.08);
}

/* =========================
   PASSWORD
========================= */

.password-group {
    margin-bottom: 28px;
}

.password-wrapper {
    width: 100%;
    position: relative;
}

.password-wrapper input {
    padding-right: 42px;
}

.password-toggle {
    position: absolute;

    right: 10px;
    top: 50%;

    transform: translateY(-50%);

    width: 25px;
    height: 25px;

    display: flex;
    align-items: center;
    justify-content: center;

    border: 0;
    background: transparent;

    cursor: pointer;

    padding: 0;
}

.password-toggle svg {
    width: 17px;
    height: 17px;

    fill: none;

    stroke: #788096;
    stroke-width: 1.8;

    stroke-linecap: round;
    stroke-linejoin: round;
}

.password-toggle:hover svg {
    stroke: #4c46ed;
}

/* =========================
   CREATE ACCOUNT
========================= */

.create-account-btn {
    width: 100%;
    height: 44px;

    border: 0;
    border-radius: 8px;

    background: linear-gradient(
        90deg,
        #4337e9 0%,
        #4b3cff 100%
    );

    color: #ffffff;

    font-size: 15px;
    font-weight: 600;

    cursor: pointer;

    box-shadow: 0 3px 7px rgba(70, 55, 235, 0.16);

    transition:
        transform 0.15s ease,
        box-shadow 0.2s ease,
        opacity 0.2s ease;
}

.create-account-btn:hover {
    box-shadow: 0 5px 12px rgba(70, 55, 235, 0.23);
}

.create-account-btn:active {
    transform: translateY(1px);
}

/* =========================
   TERMS
========================= */

.terms {
    text-align: center;

    margin-top: 17px;
}

.terms p {
    color: #a1a5b3;

    font-size: 12px;
    line-height: 1.55;

    font-weight: 500;
}

.terms a {
    color: #4c42e9;

    font-weight: 600;

    text-decoration: none;
}

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

/* =========================
   RESPONSIVE
========================= */

@media (max-width: 576px) {
    .social-btn > span:last-child {
        left: 85px;
    }
}

@media (max-width: 480px) {

    .signup-page {
        padding: 20px 12px;
    }

    .signup-card {
        max-width: 100%;

        padding: 25px 20px 20px;
    }

    .social-icon {
        left: 45px;
    }
}

@media (max-width: 360px) {

    .signup-card {
        padding-left: 16px;
        padding-right: 16px;
    }

    .social-icon {
        left: 30px;
    }
}
  /*-----------------Interest----------------*/
/* =========================
   GRID
========================= */

.interest-grid {
    display: grid;

    grid-template-columns: repeat(3, 1fr);

    gap: 12px;

    margin-bottom: 27px;
}


/* =========================
   INTEREST ITEM
========================= */

.interest-item {
    position: relative;
    height: 100px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 8px 4px;
    background: #ffffff;
    border: 1px solid #e7ecf4;
    border-radius: 6px;
    color: #111a38;
    cursor: pointer;
    transition:
        border-color 0.2s ease,
        box-shadow 0.2s ease,
        background-color 0.2s ease,
        transform 0.2s ease;
}

.interest-item:hover {
    border-color: #b8bfff;
    box-shadow: 0 3px 10px rgba(61, 54, 255, 0.08);
}

.interest-item.active {
    border: 2px solid #635bff;

    background: #ffffff;

    box-shadow:
        0 0 0 1px rgba(99, 91, 255, 0.05),
        0 4px 12px rgba(99, 91, 255, 0.08);
}
.interest-item::after {
    content: '';
    position: absolute;
    top: 4px;
    right: 4px;
    width: 16px;
    height: 16px;
    background-color: #6366f1;
    border-radius: 50%;
    display: none; 
}


.interest-item::before {
    content: '';
    position: absolute;
    top: 9px;
    right: 9px;
    width: 6px;
    height: 6px;
    background-color: #ffffff;
    border-radius: 50%;
    z-index: 1;
    display: none; 
}


.interest-item.active::after,
.interest-item.active::before {
    display: block;
}


/* =========================
   ICON
========================= */

.interest-icon img{
    width: 30px;
    height: 30px;

    display: flex;
    align-items: center;
    justify-content: center;
}


.interest-item > span:last-child {
    font-size: 13px;
    line-height: 1.6;
    font-weight: 600;

    white-space: nowrap;
}


.more-icon {
    color: #4c42ff;
    width: 30px;
    height: 30px;

    display: flex;
    align-items: center;
    justify-content: center;
}


/* =========================
   MORE ICON
========================= */

.more-icon {
    flex-direction: row;

    gap: 4px;
}

.more-icon span {
    width: 4px;
    height: 4px;

    border-radius: 50%;

    background: currentColor;
}


/* =========================
   CONTINUE BUTTON
========================= */

.continue-btn {
    width: 100%;
    height: 44px;

    display: flex;
    align-items: center;
    justify-content: center;

    gap: 10px;

    border: none;
    border-radius: 8px;

    background: linear-gradient(
        90deg,
        #4337e9 0%,
        #4b3cff 100%
    );

    color: #ffffff;
    font-size: 15px;
    font-weight: 600;

    cursor: pointer;

    box-shadow:
        0 4px 10px rgba(70, 55, 245, 0.18);

    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease;
}

.continue-btn svg {
    width: 16px;
    height: 16px;
}

.continue-btn:hover {
    transform: translateY(-1px);

    box-shadow:
        0 6px 14px rgba(70, 55, 245, 0.25);
}

.continue-btn:active {
    transform: translateY(0);
}


/* =========================
   MOBILE
========================= */

@media (max-width: 480px) {

   

    .interest-grid {
        gap: 8px;
    }

    .interest-item {
        height: 84px;
    }

    .interest-item > span:last-child {
        font-size: 10px;
    }

}


@media (max-width: 360px) {

   
    .interest-item {
        height: 80px;
    }

    .interest-icon {
        width: 27px;
        height: 27px;
    }

    .interest-icon svg {
        width: 26px;
        height: 26px;
    }

    .interest-item > span:last-child {
        font-size: 10px;
    }

}

/*------------------------Imported Feeds----------*/
.setup-container {
      width: 100%;
      max-width: 440px;
      display: flex;
      flex-direction: column;
      gap: 12px;
      margin-bottom: 20px;
    }

    .setup-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: #ffffff;
    border: 1px solid #edf0f5;
    border-radius: 8px;
    padding: 26px 20px;
    cursor: pointer;
    transition: all 0.2s ease-in-out;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03);
    user-select: none;
    position: relative; 
}

.setup-card:hover {
    border-color: #c3d6f8;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.06);
    transform: translateY(-1px);
}

/* Active State Styles */
.setup-card.active {
    border-color: #3539f1; 
    background-color: #f5f3ff;
    box-shadow: 0 4px 12px rgba(99, 102, 241, 0.1);
}


.setup-card.active::after {
    content: '';
    position: absolute;
    top: 4px;   
    right: 4px;  
    width: 16px;
    height: 16px;
    background-color: #6366f1; 
    border-radius: 50%;
}


.setup-card.active::before {
    content: '';
    position: absolute;
    top: 10px;  
    right: 10px; 
    width: 4px;
    height: 4px;
    background-color: #ffffff;
    border-radius: 50%;
    z-index: 1;
}

    .card-left {
      display: flex;
      align-items: center;
      gap: 16px;
    }

    .icon-box {
      width: 58px;
      height: 58px;
      border-radius: 10px;
      display: flex;
      align-items: center;
      justify-content: center;
      background-color: #f6f4fd;
      color:  #6840eb;
      flex-shrink: 0;
    }

    .icon-box.orange {
      background-color: #fcf3ef;
      color: #FF4500;
    }

    .icon-box svg {
      width: 28px;
      height: 28px;
      fill: none;
      stroke: currentColor;
      stroke-width: 3;
      stroke-linecap: round;
      stroke-linejoin: round;
    }
   
    .text-content {
      display: flex;
      flex-direction: column;
      gap: 3px;
    }

    .text-content .title {
      font-size: 16px;
      font-weight: 600;
      color: #171c32;
      margin: 0;
      line-height: 1.4;
    }

    .text-content .description {
      font-size: 13px;
      color: #888da0;
      margin: 0;
      line-height: 1.4;
    }

   .arrow {
      color: #6d8db9;
      transition: transform 0.2s ease, color 0.2s ease;
      display: flex;
      align-items: center;
      flex-shrink: 0;
    }

    .setup-card:hover .arrow {
      transform: translateX(3px);
      color: #3371c7;
    }

    .arrow svg {
      width: 24px;
      height: 24px;
      fill: none;
      stroke: currentColor;
      stroke-width: 2;
      stroke-linecap: round;
      stroke-linejoin: round;
    }
    .setup-card.active .arrow svg {
    stroke: #0509cf;
    transform: translateX(2px);
    transition: transform 0.2s ease;
   }

    /* Responsive */
    @media (max-width: 480px) {
      .setup-card {
        padding: 14px 16px;
      }
      .title {
        font-size: 14px;
      }
      .description {
        font-size: 12px;
      }
      .icon-box {
        width: 54px;
        height: 54px;
      }
    }

/* ----------------------- Recommended Feeds --------------------- */


/* =========================================
   RECOMMENDED LIST
========================================= */

.recommended-list {
    display: flex;
    flex-direction: column;

    gap: 8px;
}


/* =========================================
   FEED ITEM
========================================= */

.recommended-item {
    width: 100%;
    height: 71px;

    display: flex;
    align-items: center;

    padding: 8px 15px;

    background: #ffffff;

    border: 1px solid #edf1f6;

    border-radius: 5px;

    margin-bottom: -1px;

    position: relative;

    transition:
        background-color 0.2s ease,
        box-shadow 0.2s ease;
}

.recommended-item:hover {
    background: #fcfdff;

    box-shadow:
        0 3px 10px rgba(54, 73, 112, 0.05);

    z-index: 2;
}


/* =========================================
   LOGOS
========================================= */

.feed-logo {
    width: 46px;
    height: 46px;

    flex: 0 0 46px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 10px;

    overflow: hidden;
}


/* OpenAI */


.openai-logo img {
    width: 46px;
    height: 46px;

}


/* TechCrunch */

.techcrunch-logo {
    background: #19b66b;

    color: #ffffff;

    font-size: 19px;
    font-weight: 700;

    letter-spacing: -1.3px;
}

.techcrunch-logo span {
    transform: translateY(-1px);
}


/* Laravel */

.laravel-logo img {
    width: 46px;
    height: 46px;

}


/* Hacker News */

.hacker-logo {
    background: #ff6600;

    color: #ffffff;

    font-family: Georgia, serif;

    font-size: 34px;
    font-weight: 400;
}

.hacker-logo span {
    line-height: 1;
}


/* GitHub */


.github-logo img {
    width: 46px;
    height: 46px;

}


/* =========================================
   FEED INFORMATION
========================================= */

.feed-info {
    min-width: 0;

    flex: 1;

    margin-left: 15px;
    margin-top: 5px;
}

.feed-info h3 {
    font-size: 15px;
    line-height: 1.5;

    font-weight: 700;

    color: #16203a;

    margin-bottom: 3px;

    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.feed-info p {
    font-size: 12px;
    line-height: 1.25;

    font-weight: 400;

    color: #929bad;
}


/* =========================================
   FOLLOW BUTTON
========================================= */

.follow-btn {
    width: 86px;
    height: 34px;

    flex: 0 0 86px;

    display: flex;
    align-items: center;
    justify-content: center;

    gap: 8px;

    background: #ffffff;

    border: 1px solid #dfe4f4;
    border-radius: 8px;

    color: #4a42f4;

    font-size: 13px;
    font-weight: 600;

    cursor: pointer;

    box-shadow:
        0 1px 2px rgba(50, 65, 110, 0.02);

    transition:
        background-color 0.2s ease,
        border-color 0.2s ease,
        transform 0.2s ease;
}

.follow-btn:hover {
    background: #f7f6ff;

    border-color: #bcb8ff;

    transform: translateY(-1px);
}

.follow-btn.following {
    background: #4a42f4;

    border-color: #4a42f4;

    color: #ffffff;
}

.plus {
    font-size: 18px;
    line-height: 10px;
    font-weight: 500;
    margin-bottom: 2px;
}


/* =========================================
   START READING
========================================= */

.start-reading-btn {
    width: 100%;
    height: 44px;

    display: flex;
    align-items: center;
    justify-content: center;

    gap: 10px;

    margin-top: 14px;

    border: none;
    border-radius: 8px;

    background: linear-gradient(
        90deg,
        #4938f4 0%,
        #4d35f6 100%
    );

    color: #ffffff;

    font-family: "Inter", sans-serif;

    font-size: 15px;
    font-weight: 600;

    cursor: pointer;

    box-shadow:
        0 4px 10px rgba(73, 56, 244, 0.17);

    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease;
}

.start-reading-btn svg {
    width: 20px;
    height: 20px;

    fill: none;

    stroke: currentColor;
    stroke-width: 2;

    stroke-linecap: round;
    stroke-linejoin: round;
}

.start-reading-btn:hover {
    transform: translateY(-1px);

    box-shadow:
        0 6px 15px rgba(73, 56, 244, 0.25);
}


/* =========================================
   DISCOVER TEXT
========================================= */

.discover-text {
    text-align: center;

    margin-top: 9px;

    font-size: 12px;
    line-height: 1.3;

    color: #838da1;
}





/* =========================================
   MOBILE
========================================= */

@media (max-width: 600px) {

    .recommendation-page {
        padding: 15px;
    }

    .recommendation-card {
        max-width: 414px;

        padding: 27px 18px 18px;
    }

    

}


/* =========================================
   SMALL MOBILE
========================================= */

@media (max-width: 380px) {

    .recommendation-card {
        padding-left: 14px;
        padding-right: 14px;
    }

    .recommendation-header h1 {
        font-size: 19px;
    }

    .recommendation-item {
        height: 68px;

        padding-left: 12px;
        padding-right: 12px;
    }

    .feed-logo {
        width: 43px;
        height: 43px;

        flex-basis: 43px;
    }
    .feed-logo img{
        width: 43px;
        height: 43px;

        flex-basis: 43px;
    }


    .feed-info {
        margin-left: 11px;
    }

    .feed-info h3 {
        font-size: 13px;
    }

    .feed-info p {
        font-size: 10px;
    }

    .follow-btn {
        width: 78px;
        flex-basis: 78px;

        font-size: 11px;
         
        height: 28px;
    }

}    
/* ----------------------Welcome Page ---------------------- */

/* =========================
   CARD
========================= */

.success-card {
     width: 100%;
    max-width: 520px;

    background: #ffffff;

    border: 1px solid #edf0f5;
    border-radius: 7px;

    padding: 27px 29px 22px;

    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.035);

    display: flex;
    flex-direction: column;
    align-items: center;

    padding: 30px 30px 30px;

    overflow: hidden;
}

/* =========================
   CONFETTI
========================= */

.confetti img {
    position: relative;
    width: 300px;
    height: 160px;
    margin-bottom: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* =========================
   HEADING
========================= */

.success-card h1 {
    position: relative;
    z-index: 2;

    font-size: 36px;
    line-height: 1.2;
    font-weight: 700;

    letter-spacing: -1.3px;

    color: #171c32;

    margin-bottom: 19px;
}

/* =========================
   DESCRIPTION
========================= */

.success-description {
    font-size: 18px;
    line-height: 1.55;

    font-weight: 400;

    color: #9297aa;

    text-align: center;

    margin-bottom: 30px;
}

/* =========================
   STEPS
========================= */

.success-steps {
    width: 100%;
    max-width: 340px; /* Prevents it from stretching too wide on desktop */
    display: flex;
    flex-direction: column;
    background: #ffffff;
    border: 1px solid #edf0f5;
    border-radius: 12px;
    padding: 15px 25px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03);
    box-sizing: border-box;
    margin: 0 auto 30px auto; /* Centers the container */
}

.success-step {
    display: flex;
    align-items: center;
    min-height: 48px; /* Taller touch target for mobile */
    width: 100%;
    font-size: 16px;
    line-height: 1.4;
    padding: 8px 5px;
    color: #73829b; /* Darker, cleaner text color matching image */
    border-bottom: 1px solid #edf0f5;

}

/* Remove bottom border for the last step */
.success-step:last-child {
    border-bottom: none;
}

/* Green check */
.check-icon {
    flex: 0 0 auto;

    width: 20px;
    height: 20px;

    margin-right: 21px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 50%;

    background: #32b65c;
    color: #ffffff;
    line-height: 1;
}
.check-icon img{
  width: 12px;
  height: 12px;
  margin-right: 0px;
}

/* =========================
   BUTTON
========================= */

.dashboard-btn {
    width: 340px;
    height: 41px;

    display: flex;
    align-items: center;
    justify-content: center;

    text-decoration: none;

    background: linear-gradient(
        90deg,
        #4337e9 0%,
        #4b3cff 100%
    );
    border-radius: 8px;
    color: #ffffff;

    font-size: 15px;
    font-weight: 600;

    cursor: pointer;

    box-shadow: 0 3px 7px rgba(70, 55, 235, 0.16);

    transition:
        transform 0.15s ease,
        box-shadow 0.2s ease,
        opacity 0.2s ease;
     margin-bottom: 15px;   
}

.dashboard-btn:hover {
    background: #3d2ee0;

    transform: translateY(-1px);

    box-shadow:
        0 5px 12px rgba(70, 55, 235, 0.23),
        inset 0 1px 0 rgba(255, 255, 255, 0.15);
}

.dashboard-btn:active {
    transform: translateY(0);
}

/* =========================
   RESPONSIVE
========================= */

@media (max-width: 600px) {

    .success-card {
        width: 100%;
        max-width: 510px;

        padding: 20px 20px 18px;
    }

    .success-card h1 {
        font-size: 32px;
    }

    .success-description {
        font-size: 17px;
    }

    .success-steps {
      width: 100% !important;
      max-width: 300px;  
      padding: 10px 15px;
      margin: 0 15px 20px 15px; /* Adds side safety margins on mobile screens */
      width: auto;
    }
    
    .success-step {
        font-size: 15px;
        min-height: 44px;
    }
    .dashboard-btn {
        width: 300px;
        max-width: 100%;
    }
}

@media (max-width: 400px) {

    .success-card {
        padding-left: 18px;
        padding-right: 18px;
    }

    .success-card h1 {
        font-size: 29px;
    }

    .success-description {
        font-size: 16px;
    }

    .success-steps {
        padding: 5px 10px;
        width: 100%;
        max-width: 250px;
    }

   .dashboard-btn {
        width: 250px;
        max-width: 100%;
    }
    .confetti img {
    
    width: 180px;
    height: 90px;
    margin-bottom: 15px;
    }

}
/* =========================================
   OTP Page Styles (Matches Signup Page Theme)
   ========================================= */

.otp-inputs-wrapper {
    gap: 6px;
}

.otp-input {
    width: 42px;
    height: 48px;
    text-align: center;
    font-size: 1.25rem;
    font-weight: 600;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    outline: none;
    transition: border-color 0.2s, box-shadow 0.2s;
    background-color: #f9fafb;
}

.otp-input:focus {
    border-color: #4f46e5;
    background-color: #ffffff;
    box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.1);
}

.otp-dash {
    color: #9ca3af;
    font-weight: 500;
}

@media (max-width: 480px) {
    .otp-input {
        width: 36px;
        height: 42px;
        font-size: 1.1rem;
    }
}