@media (max-width: 350px) {
  .line-background-svg {
    position: absolute;
    top: -14% !important;
    left: auto !important;
    right: 5% !important;
    width: 80% !important;
    height: 80% !important;
    background-image: url("../images/bg-header-phone.svg") !important;
  }
  .how-it-work-why-choose-item {
    height: auto !important;
  }
}

@media (min-width: 350px) and (max-width: 405px) {
  .line-background-svg {
    position: absolute;
    top: -10% !important;
    left: auto !important;
    right: 5% !important;
    transform: translateX(0) !important;
    width: 80% !important;
    height: 80% !important;
    background-image: url("../images/bg-header-phone.svg") !important;
  }
}

@media (max-width: 405px) {
  .bold-title-1 {
    font-size: 32px !important;
    text-align: center !important;
    line-height: 40px !important;
  }
  .bold-title-2 {
    font-size: 24px !important;
  }
  .bold-title-3 {
    font-size: 22px !important;
  }
  .bold-title-4 {
    font-size: 18px !important;
  }
  .top-title {
    padding: 25px !important;
  }
  .step-part .row .col-12 {
    height: 650px !important;
    margin: 0 !important;
  }
  .step-part .as-curator-steps .col-12 {
    height: 770px !important;
  }
  .step-side-image-large {
    width: 250px !important;
    height: 250px !important;
  }

  .step-side-image {
    width: 100% !important;
    height: 100% !important;
  }
  .music-professional-image {
    width: 100% !important;
    height: 100% !important;
  }
  .footer-links {
    display: contents !important;
  }
  .how-work-badge .rh-badge:nth-child(2) {
    bottom: 65px !important;
    left: -25px !important;
  }
  .how-work-badge .rh-badge:nth-child(3) {
    bottom: 20px !important;
    left: -15px !important;
  }
  .line-background-as-curator-1 {
    width: 340px !important;
  }
  .blog-recent-row-img {
    width: 116px !important;
    height: 100% !important;
  }
  .blog-date span {
    font-size: 9px !important;
  }
  .badge-success,
  .badge-warning {
    font-size: 7px !important;
  }
  .click-avalible h3 {
    line-height: 20px !important;
    font-size: 13px !important;
  }
}

@media (min-width: 405px) and (max-width: 576px) {
  .bold-title-1 {
    font-size: 32px !important;
    text-align: center !important;
    line-height: 40px !important;
  }
  .bold-title-2 {
    font-size: 24px !important;
  }
  .bold-title-3 {
    font-size: 22px !important;
  }
  .bold-title-4 {
    font-size: 18px !important;
  }
  .top-title {
    padding: 30px !important;
  }
  .step-side-image {
    width: 325px !important;
    height: 325px !important;
  }
  .step-part .row .col-12 {
    height: 615px !important;
    margin: 10px 0 !important;
  }
  .step-side-image-large {
    width: 300px !important;
    height: 300px !important;
  }
  .step-part .as-curator-steps .col-12 {
    height: 790px !important;
  }
  .music-professional-image {
    width: 380px !important;
    height: 380px !important;
  }
  .bold-title-1 {
    font-size: 32px !important;
    text-align: center !important;
    line-height: 40px !important;
  }
  .bold-title-2 {
    font-size: 24px !important;
  }
  .bold-title-3 {
    font-size: 22px !important;
  }
  .how-work-badge .rh-badge:nth-child(2) {
    bottom: 65px !important;
    left: -25px !important;
  }
  .how-work-badge .rh-badge:nth-child(3) {
    bottom: 20px !important;
    left: -15px !important;
  }
  .badge-success,
  .badge-warning {
    font-size: 9px !important;
  }
  .blog-recent-row-img {
    width: 116px !important;
    height: 180px !important;
  }
  .blog-date span {
    font-size: 9px !important;
  }
  .click-avalible h3 {
    line-height: 22px !important;
    font-size: 15px !important;
  }
}

@media (max-width: 500px) {
  .how-it-work-badge {
    top: -10px !important;
    right: -10px !important;
  }
  .newsletter-form input {
    width: 100% !important;
  }
}

@media (max-width: 576px) {
  .navbar-brand {
    width: 120px !important;
  }
  .custom-offcanvas {
    top: 55px !important;
  }
  .btn-sm {
    font-size: var(--font-xs-size) !important;
    padding: 0.5rem 1rem !important;
  }
  .btn-base {
    font-size: 12px !important;
    padding: 0.75rem 1.2rem !important;
  }

  .nav-item .nav-link.active::before {
    top: 3% !important;
  }

  .line-background-as-curator-1 {
    background-image: url("../images/bg-header-as-curator-phone-1.svg") !important;
    top: -100px !important;
  }

  .rh-badge-position-1 {
    bottom: 30px;
    left: 0 !important;
    width: 100% !important;
    margin: 0 0.75rem !important;
  }
  .rh-badge-position-2 {
    top: -15px !important;
    left: -10px !important;
  }
  .rh-badge-2 {
    width: 202px !important;
    height: 163px !important;
  }

  .blur-bg {
    padding: 6px 10px !important;
  }

  .blur-bg img {
    width: 52px !important;
  }

  .description-lg {
    font-size: var(--font-sm-size) !important;
  }

  .title-with-icon {
    font-size: 14px !important;
    text-align: center;
  }
  .why-choose .row .col-12,
  .why-choose .row .col-12 div {
    justify-content: center;
    text-align: center;
  }
  .how-works-item-content {
    width: 100% !important;
    border-right: none !important;
    padding-right: 0 !important;
  }
  .as-curator-steps-item-content {
    width: 100% !important;
    border-right: none !important;
  }

  .step-part .as-curator-steps .col-12 {
    top: 60px !important;
  }
  .padding-y-section-1 {
    padding: 50px 0 40px !important;
  }

  .padding-y-section-2 {
    padding: 30px 0 !important;
  }
  .padding-y-section-3 {
    padding: 20px 0 40px !important;
  }

  .how-works-item {
    padding: 15px 0 !important;
  }
  .arrow-icon {
    width: 17px !important;
  }

  .music-professional {
    padding: 15px 15px 0 !important;
  }

  .rh-badge-slider-1 {
    max-width: 220px !important;
    height: 80px !important;
    padding: 10px !important;
  }

  .rh-badge-slider-1 div {
    font-size: 10px !important;
  }

  .rh-badge-slider-1 img {
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    object-fit: cover !important;
    object-position: center !important;
  }

  .rh-badge-slider-2 {
    max-width: 220px !important;
    height: 80px !important;
    padding: 10px !important;
  }

  .rh-badge-slider-2 div {
    font-size: 10px !important;
  }

  .rh-badge-slider-2 img {
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    object-fit: cover !important;
    object-position: center !important;
  }

  .how-work-badge .rh-badge {
    padding: 8px !important;
    max-width: 100px !important;
  }

  .how-work-badge .rh-badge img {
    width: 18px !important;
    height: 18px !important;
  }

  .how-work-badge .rh-badge h6 {
    font-size: 9px !important;
  }
  .comma {
    width: 42px !important;
    height: 42px !important;
  }
  .comma-description {
    font-size: 22px !important;
    line-height: 30px !important;
  }

  .blog-title {
    font-size: 14px !important;
    line-height: 22px !important;
  }
  .blog-description {
    font-size: 12px !important;
    line-height: 20px !important;
  }
  .blog-learn-more h5 {
    font-size: 12px !important;
  }

  .contact-form-container {
    margin-top: -50px !important;
    padding: 20px !important;
  }

  .about-header {
    height: 280px !important;
  }
  .line-background-as-curator-1 {
    left: 2% !important;
  }
  .why-choose-item {
    height: auto !important;
  }
}

@media (min-width: 576px) {
  .navbar-brand {
    width: 150px !important;
  }
}

@media (max-width: 767.9px) {
  .personal-image-part {
    justify-content: center !important;
  }

  .footer .container {
    margin: 0 !important;
    padding: 0 !important;
  }
  .footer-links {
    display: flex;
    flex: 2 1 400px;
    justify-content: space-between;
    gap: 40px;
  }
  .pricing-list li i {
    padding-top: 5px;
  }
  .line-background-blog-1 {
    top: -25px !important;
    left: 2% !important;
    width: 90px !important;
    height: 140px !important;
    background: url("../images/bg-header-phone-blog-1.svg") center no-repeat !important;
  }
  .line-background-blog-2 {
    top: -40px !important;
    right: 0% !important;
    width: 90px !important;
    height: 260px !important;
    background: url("../images/bg-header-phone-blog-2.svg") center no-repeat !important;
  }
  .form-section {
    padding: 20px !important;
  }
  .success-box {
    max-width: 700px !important;
  }
}

@media (min-width: 405px) and (max-width: 767.9px) {
  .blog-recent-row-img {
    width: 137px !important;
    height: 100% !important;
  }
}

@media (min-width: 576px) and (max-width: 767.9px) {
  .btn-base {
    font-size: 12px !important;
    padding: 0.75rem 1.2rem !important;
  }
  .bold-title-1 {
    font-size: 40px !important;
    line-height: 50px !important;
  }
  .bold-title-2 {
    font-size: 34px !important;
  }
  .bold-title-3 {
    font-size: 28px !important;
  }
  .bold-title-4 {
    font-size: 18px !important;
  }
  .top-title {
    padding: 30px !important;
  }
  .line-background-svg {
    top: 0% !important;
    left: 45% !important;
    width: 60% !important;
    height: 60% !important;
    background-image: url("../images/bg-header-phone.svg") !important;
  }
  .title-with-icon {
    font-size: 14px !important;
  }
  .why-choose-item {
    font-size: var(--font-base-size) !important;
    height: 260px !important;
    padding: 15px !important;
  }
  .why-choose-item h5 {
    font-size: var(--font-base-size) !important;
  }
  .how-it-work-why-choose-item {
    height: 100px !important;
  }
  .description-lg {
    font-size: var(--font-md-size) !important;
  }
  .description-md {
    font-size: var(--font-base-size) !important;
  }
  .btn-base {
    font-size: var(--font-sm-size) !important;
    padding: 0.75rem 1.2rem !important;
  }
  .padding-y-section-1 {
    padding: 60px 0 40px !important;
  }
  .padding-y-section-2 {
    padding: 40px 0 !important;
  }
  .padding-y-section-3 {
    padding: 30px 0 !important;
  }
  .blur-bg {
    gap: 7px !important;
    padding: 8px 10px !important;
  }
  .rh-badge-position-1 {
    bottom: 30px !important;
    left: 25px !important;
  }
  .personal-image-part {
    justify-content: center !important;
  }
  .personal-image {
    width: 400px !important;
    height: 400px !important;
  }
  .rh-badge-position-2 {
    top: -50px !important;
    left: -20px !important;
  }
  .rh-badge-slider-1 img {
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    object-fit: cover !important;
    object-position: center !important;
  }
  .step-part .row .col-12 {
    height: 500px !important;
    top: 58px !important;
    margin: 15px 0 !important;
  }
  .step-part .as-curator-steps .col-12 {
    height: auto !important;
    top: -10% !important;
  }
  .step-side-image-large {
    width: 250px !important;
    height: 200px !important;
  }
  .how-works-item {
    padding: 30px 20px 20px !important;
  }
  .how-works-item-content {
    padding-right: 0 !important;
    width: 100% !important;
    border-right: none !important;
  }
  .as-curator-steps-item-content {
    padding-right: 50px !important;
    width: 100% !important;
    border-right: none !important;
  }
  .step-side-image {
    width: 280px !important;
    height: 250px !important;
  }
  .music-professional {
    padding: 30px 0 !important;
  }
  .music-professional-image {
    width: 370px !important;
    height: 370px !important;
  }
  .item-testimonials {
    flex: 0 0 42.5% !important;
  }
  .how-work-badge .rh-badge img {
    width: 18px !important;
    height: 18px !important;
  }
  .how-work-badge .rh-badge:nth-child(2) {
    bottom: 75px !important;
    left: -10px !important;
  }
  .how-work-badge .rh-badge:nth-child(3) {
    bottom: 20px !important;
    left: 10px !important;
  }
  .comma-description {
    font-size: 22px !important;
    line-height: 28px !important;
  }
  .how-it-work-badge {
    top: -40px !important;
    right: 10px !important;
  }
  .click-avalible h3 {
    line-height: 25px !important;
    font-size: 17px !important;
  }
}

@media (min-width: 405px) and (max-width: 500px) {
  .line-background-svg {
    position: absolute;
    top: -7% !important;
    left: auto !important;
    right: 5% !important;
    width: 70% !important;
    height: 70% !important;
    background-image: url("../images/bg-header-phone.svg") !important;
    z-index: 1 !important;
  }
}

@media (min-width: 500px) and (max-width: 575.5px) {
  .line-background-svg {
    position: absolute;
    top: -3% !important;
    left: auto !important;
    right: 3% !important;
    width: 60% !important;
    height: 60% !important;
    background-image: url("../images/bg-header-phone.svg") !important;
    z-index: 1 !important;
  }
  .how-it-work-badge {
    top: -25px !important;
    right: -10px !important;
  }
}

@media (min-width: 768px) {
  .w-md {
    width: auto !important;
  }
  .w-md-50 {
    width: 50% !important;
  }
}

@media (max-width: 991.98px) {
  .blog-item-image {
    height: auto !important;
  }
  .center-nav {
    justify-content: center !important;
  }
  .newsletter-form,
  .search-label input {
    width: 100% !important;
  }
  .blog-post {
    max-width: 100% !important;
  }
  .bg-contact-submit {
    display: none !important;
  }
  .faq-sidebar {
    min-height: auto !important;
  }
  .form-sign {
    height: 50vh !important;
  }
  .form-sign-bg-dark {
    height: 50vh !important;
  }
  .form-box-sign {
    height: 85vh !important;
  }
}

@media (min-width: 991.98px) {
  .navbar {
    padding: 17px 0;
  }
  .navbar-collapse {
    margin: 5px;
  }
  .bold-title-3 {
    font-size: 28px !important;
  }
  .w-lg-75 {
    width: 75% !important;
  }
  .accordion-filter-bar {
    height: auto !important;
    display: block !important;
  }

  .accordion-filter-bar {
    border-bottom: none !important;
  }
  #refer .owl-stage-outer .owl-stage .active {
    padding-left: 40px !important;
  }
}

@media (min-width: 768px) and (max-width: 991.98px) {
  .bold-title-1 {
    font-size: 28px !important;
    line-height: 40px !important;
  }
  .bold-title-2 {
    font-size: 24px !important;
  }
  .bold-title-3 {
    font-size: 20px !important;
  }
  .bold-title-4 {
    font-size: 18px !important;
  }
  .line-background-svg {
    display: none !important;
  }
  .title-with-icon {
    font-size: 14px !important;
  }
  .why-choose-item h5 {
    font-size: var(--font-base-size) !important;
  }
  .description-lg {
    font-size: var(--font-base-size) !important;
  }
  .description-md {
    font-size: var(--font-sm-size) !important;
  }
  .btn-base {
    font-size: var(--font-xs-size) !important;
  }
  .padding-y-section-1 {
    padding: 60px 0 40px !important;
  }
  .padding-y-section-2 {
    padding: 40px 0 !important;
  }
  .padding-y-section-3 {
    padding: 30px 0 !important;
  }
  .blur-bg {
    gap: 7px !important;
    padding: 8px 10px !important;
  }
  .rh-badge-position-1 {
    bottom: 30px !important;
    left: 25px !important;
  }
  .rh-badge-position-2 {
    top: -20px !important;
    left: -20px !important;
  }
  .rh-badge-slider-1 img {
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    object-fit: cover !important;
    object-position: center !important;
  }
  .step-part .row .col-12 {
    height: 400px !important;
    top: 58px !important;
    margin: 15px 0 !important;
  }
  .step-part .as-curator-steps .col-12 {
    height: auto !important;
    top: 65px !important;
  }
  .how-works-item {
    padding: 30px 20px 20px !important;
  }
  .how-works-item-content {
    padding-right: 50px !important;
  }
  .as-curator-steps-item-content {
    width: 80% !important;
    padding-right: 5px !important;
  }
  .as-curator-steps .col-12 {
    padding: 10px 15px !important;
  }
  .step-side-image {
    width: 280px !important;
    height: 250px !important;
  }
  .music-professional {
    padding: 30px 0 !important;
  }
  .music-professional-image {
    width: 430px !important;
    height: 430px !important;
  }
  .item-testimonials {
    flex: 0 0 42.5% !important;
  }
  .how-work-badge .rh-badge img {
    width: 18px !important;
    height: 18px !important;
  }
  .how-work-badge .rh-badge h6 {
    font-size: 10px !important;
  }
  .how-work-badge .rh-badge:nth-child(2) {
    bottom: 50px !important;
    left: -60px !important;
  }
  .how-work-badge .rh-badge:nth-child(3) {
    bottom: 5px !important;
    left: -40px !important;
  }
  .comma-description {
    font-size: 22px !important;
    line-height: 28px !important;
  }
  .how-it-work-badge {
    top: -20px !important;
    right: -20px !important;
  }
  .line-background-blog-1 {
    top: 0 !important;
    left: 5% !important;
    width: 90px !important;
    height: 140px !important;
  }
  .line-background-blog-2 {
    top: 0px !important;
    right: 5% !important;
    width: 90px !important;
    height: 260px !important;
  }
  .line-background-as-curator-1 {
    left: 9% !important;
  }
  .click-avalible h3 {
    line-height: 21px !important;
    font-size: 15px !important;
  }
}

@media (min-width: 991.98px) and (max-width: 1200px) {
  .bold-title-1 {
    font-size: 35px !important;
    line-height: 50px !important;
  }
  .bold-title-2 {
    font-size: 30px !important;
    line-height: 42px !important;
  }

  .line-background-svg {
    top: -8% !important;
    left: 8% !important;
    width: 60% !important;
    height: 60% !important;
  }
  .line-background-as-curator-2 {
    left: 63% !important;
    top: -83px !important;
  }
  .title-with-icon {
    font-size: 14px !important;
  }
  .why-choose-item h5 {
    font-size: var(--font-base-size) !important;
  }
  .description-lg {
    font-size: var(--font-base-size) !important;
  }
  .description-md {
    font-size: var(--font-sm-size) !important;
  }
  .btn-base {
    font-size: var(--font-sm-size) !important;
  }
  .padding-y-section-2 {
    padding: 40px 0 !important;
  }
  .step-part .row .col-12 {
    margin: 15px 0 !important;
    height: 350px !important;
  }
  .step-part .as-curator-steps .col-12 {
    margin: 15px 0 !important;
    height: auto !important;
  }

  .rh-badge-position-2 {
    top: -20px !important;
    left: -20px !important;
  }
  .rh-badge-slider-1 img {
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    object-fit: cover !important;
    object-position: center !important;
  }
  .how-work-badge .rh-badge:nth-child(2) {
    bottom: 65px !important;
    left: -60px !important;
  }
  .how-work-badge .rh-badge:nth-child(3) {
    bottom: 10px !important;
    left: -40px !important;
  }
  .comma-description {
    font-size: 26px !important;
  }
  .how-it-work-badge {
    top: -20px !important;
    right: -20px !important;
  }
  .blog-recent-row-img {
    width: 168px !important;
    height: 220px !important;
  }
  .bg-contact-submit {
    width: 220px !important;
    height: 190px !important;
    right: -170px !important;
  }
  .card-info h3 {
    line-height: 19px !important;
    font-size: 13px !important;
  }
}

@media (min-width: 1200px) and (max-width: 1400px) {
  .bold-title-1 {
    font-size: 40px !important;
  }
  .bold-title-2 {
    font-size: 34px !important;
  }
  .line-background-svg {
    top: -5% !important;
    left: 12% !important;
    width: 50% !important;
    height: 50% !important;
  }
  .line-background-as-curator-2 {
    top: -20px !important;
  }

  .title-with-icon {
    font-size: 14px !important;
  }
  .why-choose-item h5 {
    font-size: var(--font-base-size) !important;
  }
  .description-lg {
    font-size: var(--font-md-size) !important;
  }
  .description-md {
    font-size: var(--font-sm-size) !important;
  }
  .rh-badge-position-2 {
    top: -70px !important;
    left: -30px !important;
  }
  .how-work-badge .rh-badge:nth-child(2) {
    bottom: 80px !important;
    left: 0 !important;
  }
  .how-work-badge .rh-badge:nth-child(3) {
    bottom: 20px !important;
    left: 20px !important;
  }
  .comma-description {
    font-size: 30px !important;
  }
  .how-it-work-badge {
    top: -60px !important;
    right: -20px !important;
  }
  .blog-recent-row-img {
    width: 254px !important;
  }
  .card-info h3 {
    line-height: 22px !important;
    font-size: 14px !important;
  }
}

@media (max-width: 1200px) {
  .as-curator-steps-item-content {
    padding-right: 0px !important;
  }
  .step-part .as-curator-steps .col-12 {
    padding: 5px 15px 15px !important;
    margin: 15px 0 !important;
  }
  .how-it-work-badge {
    width: 200px !important;
    height: 150px !important;
  }
  .pricing-box {
    height: auto !important;
    width: 100% !important;
  }
}

@media (max-width: 1171px) {
  .newsletter-form {
    width: 100% !important;
  }
}

@media (min-width: 1400px) {
  .line-background-svg {
    top: -5% !important;
    left: 5% !important;
    width: 75% !important;
    height: 60% !important;
  }
  .rh-badge-position-1 {
    left: 100px !important;
  }
}

.card-phone-image {
  position: relative;
  overflow: hidden;
  flex: 1;
  padding: 1rem;
  color: white;
  align-items: center;
  justify-content: center;
  position: relative;
  backdrop-filter: blur(20px);
  background: rgba(0, 0, 0, 0.3);
  transition: all 0.4s ease-in-out;
  flex-direction: column;
  z-index: 1;
}

.card-phone-image::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(8px);
  opacity: 0;
  transition: opacity 0.3s;
  z-index: 1;
}

.card-phone-image.active::before {
  opacity: 1;
}

.info-avalible,
.click-avalible {
  position: relative;
  z-index: 2;
  transition: opacity 0.3s;
}
.click-avalible {
  display: none;
}