body { font-family: "Roboto", sans-serif; font-weight: 300 }
h1,h2,h3,h4,h5,h6 {font-weight: 400}
#heropic { background-image: url("https://ezclix.club/img/ezclixbg.jpg"); object-fit:cover; }
p {font-size:1.2rem;}
p.lead {font-size:1.4rem;}
li {font-size:1.2rem;}



.elegant-color { background-color: #2e2e2e !important }
.elegant-color-dark { background-color: #212121 !important }

.stylish-color { background-color: #4b515d !important}
.stylish-color-dark { background-color: #3e4551 !important}

.unique-color { background-color: #3f729b !important}
.unique-color-dark { background-color: #1c2331 !important}

.special-color {background-color: #37474f !important}
.special-color-dark {background-color: #263238 !important}

.light-blue-text {color: #03a9f4 !important}
.deep-purple-text {    color: #673ab7 !important}
.indigo-text {    color: #3f51b5 !important}
.blue-text {    color: #2196f3 !important}
.cyan-text {    color: #00bcd4 !important}
.teal-text {    color: #009688 !important}
.green-text {    color: #4caf50 !important}
.light-green-text {    color: #8bc34a !important}
.yellow-text {    color: #ffeb3b !important}
.amber-text {    color: #ffc107 !important}
.orange-text {    color: #ff9800 !important}
.deep-orange-text {    color: #ff5722 !important}
.brown-text {    color: #795548 !important}
.blue-grey-text {    color: #607d8b !important}
.grey-text {    color: #9e9e9e !important}

.unique-text { color: #3f729b !important}
.unique-dark-text { color: #1c2331 !important}



.red {    background-color: #ffebee !important}
.purple {    background-color: #f3e5f5 !important}
.blue {    background-color: #e3f2fd !important}
.light-blue {    background-color: #e1f5fe !important}
.green {    background-color: #e8f5e9 !important}
.yellow {    background-color: #fffde7 !important}
.blue-grey {    background-color: #eceff1 !important}


.feature-box {
  border-radius: 15px; /* Rounded corners */
  transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
}

.feature-box:hover {
  transform: translateY(-5px); /* Subtle lift on hover */
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15); /* Enhanced shadow on hover */
}

.list-group-item span {float:right;}

.page-footer {color:#fff; font-size:0.9em;}
.page-footer a {
    color: #03a9f4;
    text-decoration: none;
    cursor: pointer;
    -webkit-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out
}
.page-footer a:hover {
    color: #607d8b;
    text-decoration: none;
    -webkit-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out
}




.btn {
    margin: .375rem;
    color: inherit;
    text-transform: uppercase;
    word-wrap: break-word;
    white-space: normal;
    cursor: pointer;
    border: 0;
    border-radius: .125rem;
    -webkit-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
    box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
    -webkit-transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, -webkit-box-shadow 0.15s ease-in-out;
    transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, -webkit-box-shadow 0.15s ease-in-out;
    transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
    transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out, -webkit-box-shadow 0.15s ease-in-out;
    padding: .84rem 2.14rem;
    font-size: .81rem
}

.btn:hover,
.btn:focus,
.btn:active {
    outline: 0;
    -webkit-box-shadow: 0 5px 11px 0 rgba(0, 0, 0, 0.18), 0 4px 15px 0 rgba(0, 0, 0, 0.15);
    box-shadow: 0 5px 11px 0 rgba(0, 0, 0, 0.18), 0 4px 15px 0 rgba(0, 0, 0, 0.15)
}


.btn-outline-secondary {
    color: #a6c !important;
    background-color: transparent !important;
    border: 2px solid #a6c !important
}

.btn-outline-secondary:hover,
.btn-outline-secondary:focus,
.btn-outline-secondary:active,
.btn-outline-secondary:active:focus,
.btn-outline-secondary.active {
    color: #a6c !important;
    background-color: transparent !important;
    border-color: #a6c !important
}

.card-pricing.popular {
    z-index: 1;
    border: 2px solid #FFAB91;
}
.card-pricing .list-unstyled li {
    padding: .5rem 0;
    color: #6c757d;
}

.card-pricing h2 {
    line-height:1.5rem;
}



/* Ribbon container positioned relative to wrapper */

.ribbon-wrapper-outer {
  position: absolute;
  top: -3px;  /* Move up to extend outside card */
  right: -6px;  /* Move right to extend outside card */
  width: 150px;
  height: 150px;
  overflow: hidden;
  z-index: 10;
  pointer-events: none;  /* Allows clicking through to card */
}

.ribbon-bonus {
  position: absolute;
  top: 23px;
  right: -38px;
  background: #ffd700;
  color: #333;
  padding: 8px 45px;
  transform: rotate(45deg);
  font-weight: bold;
  font-size: 0.85rem;
  text-align: center;
  box-shadow: 0 4px 6px rgba(0,0,0,0.15);
}

/* Left folded corner */
.ribbon-bonus:before {
  content: '';
  position: absolute;
  left: 0;
  top: 100%;
  width: 0;
  height: 0;
  border-left: 6px solid #d4a000;
  border-right: 6px solid transparent;
  border-bottom: 6px solid transparent;
  border-top: 6px solid #d4a000;
}

/* Right folded corner */
.ribbon-bonus:after {
  content: '';
  position: absolute;
  right: 0;
  top: 100%;
  width: 0;
  height: 0;
  border-right: 6px solid #d4a000;
  border-left: 6px solid transparent;
  border-bottom: 6px solid transparent;
  border-top: 6px solid #d4a000;
}

.card-icon {
  position: absolute;
  top: -45px;  /* Half the icon height to overlap */
  left: 50%;
  transform: translateX(-50%);
  background: #fafafa;
  width: 90px;
  height: 90px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}

.card-text2 { font-size:1.1em; text-align-left;}


.badge-corner {
  position: absolute;
  top: -50px;
  left: -50px;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  font-size: 5rem;
  box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}



.bd-callout {
  padding: 1.25rem;
  margin-top: 1.25rem;
  margin-bottom: 1.25rem;
  border: 1px solid #e9ecef;
  border-left-width: 1px;
  border-left-width: .25rem;
  border-radius: .25rem;
  background:#fafafa;

.bd-callout-danger {
  border-start: solid  .25rem #d9534f;
}