.landing-footer {
    --bs-footer-text: #241d31;
    --bs-footer-bottom-text: #faf4f6;
    --bs-footer-bottom-bg: #241d31;
    --bs-footer-top-bg: #241d31;
    /* use dark variables as front footer having dark background */
}
.landing-footer .footer-link,
.landing-footer .footer-text {
    color: var(--bs-footer-text);
    opacity: 0.78;
}
.landing-footer .footer-title {
    color: var(--bs-footer-text);
    opacity: 0.92;
}
.landing-footer .footer-bottom-text {
    color: var(--bs-footer-bottom-text);
}
.landing-footer .footer-bottom {
    background-color: var(--bs-footer-bottom-bg);
}
.landing-footer .footer-link {
    transition: all 0.2s ease-in-out;
}
.landing-footer .footer-link:hover {
    opacity: 1;
}
.landing-footer .footer-top {
    padding-block: 3.6875rem 2.4375rem;
    border-top-left-radius: 3.75rem;
    border-top-right-radius: 3.75rem;
}
@media (max-width: 767.98px) {
    .landing-footer .footer-top {
        padding-block: 3rem;
        padding-inline: 0;
    }
}
.landing-footer .footer-top .footer-bg {
    object-position: center;
}
@media (min-width: 992px) {
    .landing-footer .footer-logo-description {
        max-inline-size: 385px;
    }
}
.landing-footer .footer-form {
    max-inline-size: 22.25rem;
}
.landing-footer .footer-form input {
    background-color: transparent;
    color: var(--bs-footer-text);
}
.landing-footer .footer-form input,
.landing-footer .footer-form input:hover:not(:focus):not(:disabled) {
    border-color: #44485e;
}
.landing-footer .footer-form input:focus {
    border-color: var(--bs-primary);
    box-shadow: 0 0.125rem 0.25rem
        color-mix(in srgb, var(--bs-primary) 0.1, #2f3349);
}
.landing-footer .footer-form input::placeholder {
    color: rgba(var(--bs-white-rgb), 0.5);
}
.landing-footer .footer-form label {
    color: #cfcde4;
}



/* The ribbons */

.corner-ribbon{
  width: 200px;
  background: #e43;
  position: absolute;
  top: 25px;
  left: -50px;
  text-align: center;
  line-height: 50px;
  letter-spacing: 1px;
  color: #f0f0f0;
  transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
}

/* Custom styles */


/* The ribbons */

.corner-ribbon{
  width: 200px;
  background: #e43;
  position: absolute;
  top: 25px;
  left: -50px;
  text-align: center;
  line-height: 50px;
  letter-spacing: 1px;
  color: #f0f0f0;
  transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
}

/* Custom styles */

.corner-ribbon.sticky{
  position: fixed;
}

.corner-ribbon.shadow{
  box-shadow: 0 0 3px rgba(0,0,0,.3);
}

.corner-ribbon.bottom-left{
  top: auto;
  bottom: 25px;
  left: 250px;
  transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
}


/* Colors */

.corner-ribbon.white{background: #f0f0f0; color: #555;}
.corner-ribbon.black{background: #333;}
.corner-ribbon.grey{background: #999;}
.corner-ribbon.blue{background: #39d;}
.corner-ribbon.green{background: #2c7;}
.corner-ribbon.turquoise{background: #1b9;}
.corner-ribbon.purple{background: #95b;}
.corner-ribbon.red{background: #e43;}
.corner-ribbon.orange{background: #e82;}
.corner-ribbon.yellow{background: #ec0;}

.parent {
  overflow: hidden; /* required */
  position: relative; /* required  for demo*/
}
/* popular tag */
.popular {
  position: relative;
  border: 1px solid #575757;
  border-bottom: 8px solid #575757;
}

.popular::after {
  content: "Popular";
  position: absolute;
  top: 5px;
  right: -5px;
  z-index: 20;
  display: block;
  font-size: 13px;
  padding: 3px 10px;
  border-radius: 30px;
  border-top-left-radius: 5px;
  background-color: #e82;
  color: rgb(0, 0, 0);
  letter-spacing: 0.5px;
}