p {
     font-family: Helvetica, Sans-Serif;
    font-weight: 500;
    font-style: normal;
    font-size: 100%;
}



.badge {
    width: 100px; /* Reduced from 150px */
    height: 100px; /* Reduced from 150px */
    overflow: hidden;
    position: absolute;
}

.badge::before,
.badge::after {
    position: absolute;
    content: "";
    display: block;
    border: 3px solid #4d4f57 /* Reduced border width */
}

.badge span {
    position: absolute;
    display: block;
    width: 150px; /* Adjusted for smaller size */
    padding: 10px 0; /* Adjusted padding */
    background: linear-gradient(45deg, #ffd700, #ffa500); /* Gold gradient */
    box-shadow: 0 3px 7px rgba(0, 0, 0, 0.1); /* Adjusted shadow */
    color: #fff;
    font: 700 14px/1 "Lato", sans-serif; /* Adjusted font size */
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
    text-transform: uppercase;
    text-align: center;
}

.badge {
    top: -7px; /* Adjusted to fit smaller size */
    right: -7px; /* Adjusted to fit smaller size */
}

.badge::before,
.badge::after {
    border-top-color: transparent;
    border-right-color: transparent;
}

.badge::before {
    top: 0;
    left: 0;
}

.badge::after {
    bottom: 0;
    right: 0;
}

.badge span {
    left: -15px; /* Adjusted for smaller size */
    top: 20px; /* Adjusted for smaller size */
    transform: rotate(45deg);
}





.gold {
    border: 2px solid transparent;
    border-image: linear-gradient(to right, #ffde26, #FFC107, #FFDF00);
    border-image-slice: 1;
    border-radius: 115px; /* Adjust the radius as needed */
    -webkit-mask:  linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
 
}
.glass {
    background: rgba(0, 0, 0, 0.4);
    border-radius: 16px;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(5px);
    text-decoration: none; 
    padding: 10px;
}

@keyframes gradient-animation {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}

/*card desing */
.main-card{
  max-width: 609px; 
}

.card-img-start {
    width: 100%;
    height: 55vw;
    object-fit: cover;
    width:200px;
  
}

@media (min-width: 768px) {
    .card-img-start {
        height: 300px; /* Set a fixed height for larger screens */
        
    }
}

@media (max-width: 576px) {
    .card-img-start {
        height: 80vw; /* Adjust to fit smaal*/
        width: 150px;
    }
}
@media (max-width: 395px) {
  .bd-placeholder-img {
      width: 140px;
  }
}

@media (max-width: 770px) {
    .card-title {
        /* Adjust to fit smaller screens */
        width: 100%;
    }
}








.btn-custom {
    --bs-btn-padding-x: 0.75rem;
    --bs-btn-padding-y: 0.375rem;
    --bs-btn-font-family: Arial, sans-serif; /* Adjust as needed */
    --bs-btn-font-size: 1rem;
    --bs-btn-font-weight: 400;
    --bs-btn-line-height: 1.5;
    --bs-btn-color: #fff;
    --bs-btn-bg: #6528e0;
    --bs-btn-border-width: 1px;
    --bs-btn-border-color: #6528e0;
    --bs-btn-border-radius: 0.375rem;
    --bs-btn-hover-border-color: #7d4ff1;
    --bs-btn-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 1px 1px rgba(0, 0, 0, 0.075);
    --bs-btn-focus-box-shadow: 0 0 0 0.25rem rgba(101, 40, 224, 0.5);
    display: inline-block;
    padding: var(--bs-btn-padding-y) var(--bs-btn-padding-x);
    font-family: var(--bs-btn-font-family);
    font-size: var(--bs-btn-font-size);
    font-weight: var(--bs-btn-font-weight);
    line-height: var(--bs-btn-line-height);
    color: var(--bs-btn-color);
    text-align: center;
    text-decoration: none;
    vertical-align: middle;
    cursor: pointer;
    user-select: none;
    border: var(--bs-btn-border-width) solid var(--bs-btn-border-color);
    border-radius: var(--bs-btn-border-radius);
    background-color: var(--bs-btn-bg);
    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;
}

.btn-custom:hover {
    --bs-btn-bg: #7d4ff1;
    --bs-btn-color: #fff;
    --bs-btn-border-color: #7d4ff1;
}

.btn-custom-teal {
    --bs-btn-padding-x: 0.75rem;
    --bs-btn-padding-y: 0.375rem;
    --bs-btn-font-size: 1rem;
    --bs-btn-font-family: Arial, sans-serif; /* Adjust as needed */
    --bs-btn-color: #fff;
    --bs-btn-bg: #009688;
    --bs-btn-border-radius: 0.375rem;
    --bs-btn-hover-bg: #00796b; /* Darker teal for hover */
    padding: var(--bs-btn-padding-y) var(--bs-btn-padding-x);
    font-size: var(--bs-btn-font-size);
    color: var(--bs-btn-color);
    background-color: var(--bs-btn-bg);
    border: none;
    border-radius: var(--bs-btn-border-radius);
    cursor: pointer;
    transition: background-color 0.15s ease-in-out;
}

.btn-custom-teal:hover {
    background-color: var(--bs-btn-hover-bg);
}

.ribbon1 {
    position: absolute;
    top: -6.1px;
    right: 10px;
}

.ribbon1:after {
    position: absolute;
    content: "";
    width: 0;
    height: 0;
    border-left: 39px solid transparent;
    border-right: 53px solid transparent;
    border-top: 10px solid #F8463F;
}

.ribbon1 span {
    position: relative;
    display: block;
    text-align: center;
    background: #F8463F;
    font-size: 24px;
    line-height: 1;
    padding: 12px 8px 2px;
    border-top-right-radius: 8px;
    width: 90px;
}

.ribbon1 span:before, .ribbon1 span:after {
    position: absolute;
    content: "";
}

.ribbon1 span:before {
    height: 6px;
    width: 6px;
    left: -6px;
    top: 0;
    background: #F8463F;
}

.ribbon1 span:after {
    height: 6px;
    width: 8px;
    left: -8px;
    top: 0;
    border-radius: 8px 8px 0 0;
    background: #C02031;
}

@media (min-width: 500px) {
    .ribbons-wrapper {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
    }
    .ribbon {
        width: 48%;
    }
}

/* Existing styles */