.work-sec .badge {
  float: left;
  margin-right: 10px;
}

@media screen and (min-width: 426px) and (max-width: 767px) {
  .work-sec-scroll .col-12 {
    flex: none;
    margin-right: 10px;
  }
}

@media screen and (max-width: 767px) {
  .work-sec .badge {
    float: none;
  }
}

@media screen and (max-width: 768px) {
  .work-sec-scroll .col-12 {
    flex: none;
    margin-right: 0px;
  }
}

.content-sec {
  margin: 0px 0 !important;
  padding-top: 0;
}

.service-content .content-sec img {
  width: 380px;
}

@media screen and (max-width: 575px) {
  .mar-bot-0 {
    margin-bottom: 0;
  }
}

@media screen and (max-width: 800px) {
  .content-sec h3 {
    font-size: 22px !important;
  }
}

@media screen and (max-width: 575px) {
  content-h3-responsive {
    text-align: center;
  }
}

.free-instagram-cta {
  background-image: url(../images/free-service/free-instagram-cta-mobile.webp);
  background-repeat: no-repeat;
  background-position: left bottom;
  border-radius: 10px;
  padding: 30px 20px 175px 20px;
  background-size: cover;
}

.free-twitter-cta {
  background-image: url(../images/free-service/free-twitter-cta-mobile.webp);
}

@media screen and (min-width: 576px) {
  .free-instagram-cta {
    background-image: url(../images/free-service/free-instagram-cta.webp);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: left center;
    border-radius: 15px;
    padding: 40px 0;
  }

  .free-twitter-cta {
    background-image: url(../images/free-service/free-twitter-cta.webp);
  }
}

.free-instagram-cta p {
  font-size: 20px;
  color: #fff;
  margin-bottom: 0;
}

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

  .free-instagram-cta,
  .free-twitter-cta {
    text-align: center;
  }
}

@media screen and (max-width: 767px) {
  .free-instagram-cta .primary-button {
    padding: 5px 26px !important;
    font-size: 14px;
    width: 90% !important;
  }

  .free-instagram-cta p {
    font-size: 14px;
  }
}

@media screen and (max-width: 340px) {
  .free-instagram-cta .primary-button {
    width: 100% !important;
  }
}

.addEditicons {
  background-color: #3ad695 !important;
}

.addEditicons::after {
  display: none;
}

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

  .content-h3-responsive h3,
  .content-responsive h3 {
    padding: 20px 0 0px 0;
  }
}

@media screen and (min-width: 481px) and (max-width: 530px) {
  .price-display .savePrice {
    display: block;
    padding-top: 27px;
  }
}

.loader-section {
  background-color: #e1f5fe;
  border-radius: 15px;
  padding: 30px 30px;
  margin-top: 30px;
}

.loader-err-section {
  background-color: #ffe7e5;
  padding: 20px 30px;
}

.loader-sus-section {
  background-color: #8bc34a1f;
  padding: 20px 30px;
}

@media screen and (min-width: 576px) {
  .loader-sus-section {
    padding: 20px;
  }
}

@media screen and (max-width: 575px) {
  .loader-section {
    margin-bottom: 25px;
  }
}

.loader-section p {
  margin-bottom: 0;
}

.load-percent {
  font-size: 38px !important;
  color: #000;
  font-weight: bold;
}

.loader-section img {
  text-align: center;
  margin: 0 auto;
  display: block;
  margin-bottom: -4px;
}

.load-content {
  font-size: 14px !important;
}

@media screen and (max-width: 575px) {
  .load-content {
    margin-top: 20px;
    text-align: center;
  }
}

@property --progress-value {
  syntax: '<integer>';
  inherits: false;
  initial-value: 0;
}

@keyframes html-progress {
  to {
    --progress-value: 100;
  }
}

.progress-bar-container {
  position: relative;
}

.progress-bar {
  width: 100px;
  height: 100px;
  border-radius: 50%;

  /* to center the percentage value */
  display: flex;
  justify-content: center;
  align-items: center;
}

.progress-bar::before {
  counter-reset: percentage var(--progress-value);
  content: counter(percentage) '%';
  position: absolute;
  left: 50%;
}

.html {
  background:
    radial-gradient(closest-side, white 0%, transparent 0% 100%),
    conic-gradient(#3ad695 calc(var(--progress-value) * 1%), #c6eafa 0);
  animation: html-progress 10s 1 forwards;
}

@media screen and (min-width: 576px) {
  .html::before {
    animation: html-progress 10s 1 forwards;
    font-size: 32px !important;
    color: #000;
    font-weight: bold;
  }
}


@media screen and (max-width: 575px) {
  .html {
    text-align: center;
    margin: 0 auto;
  }

  .progress-bar::before {
    display: none;
  }
}


.first_loader {
  background: #fbf7eb;
}

.review-panel {
  padding-bottom: 30px;
}


.row .col-md-6:nth-of-type(2) .btn-addcart:hover {
  background-color: #370fb0 !important;
  border-bottom: 7px solid #492d9f !important;
}

@media screen and (min-width: 320px) and (max-width: 475px) {

  .popular-services-list .card p,
  a {
    font-size: 16px;
    font-weight: 500;
  }
}


@media screen and (min-width: 320px) and (max-width: 475px) {
  .custom-accordion-item .accordion-header .accordion-button {
    font-size: 12px;
    /* Adjust font size */
    line-height: 1.5;
    /* Adjust line spacing */
  }

  .custom-accordion-item .accordion-header .accordion-button .selected-value {
    font-size: 12px;
    /* Ensure consistent font size */
    line-height: 1.5;
    /* Adjust line spacing */
  }
}