.bg-crimson {
    background-color: #EC1C24;
}

.text-crimson {
    color: #EC1C24;
}

.bg-paleOrange {
    background-color: #f7eadd7e;
}



.text-14 {
    font-size: 14px;
}

.animText {
    color: #EC1C24;
}



.bannerText {
    font-family: 'Poppins', sans-serif;
}



.angleGradient {
    background: linear-gradient(-10deg, #f7eadd7e 60%, #fff 40%);
}



.bg-pink {
    background-color: #f5cac361;
}

.bg-yellow {
    background-color: #ece4af46;
}

.bg-sky {
    background-color: rgba(190, 228, 253, 0.273);
}

.bg-kiss {
    background-color: #daacf44f;
    ;
}

.bg-ash{
    background-color: #f7f7f7;
    border: 2px solid #d1cfcf26;

}

.card-border {
    border-width: 0 0 1px 0;
    border-style: solid;
    border-image: linear-gradient(to right, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.25), rgba(0, 0, 0, 0.1)) 1;
}

/* Responsive */
@media screen and (max-width: 500px) {

    .card-border {
        border-width: 0;
    }

    .shoutinRank{
        font-size: 14px;
    }

    .shoutinRank span{
        font-size: 20px;
    }
}










.swiper-slide {
    height: auto !important;
}

.swiper-content {
    height: 100% !important
}






:root {
    --purple: #CD1B20;
    --violet: rgb(235, 134, 72);
    --pink: rgb(223, 85, 131);
}

@keyframes background-pan {
    from {
        background-position: 0% center;
    }

    to {
        background-position: -200% center;
    }
}

@keyframes scale {

    from,
    to {
        transform: scale(0);
    }

    50% {
        transform: scale(1);
    }
}

@keyframes rotate {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(180deg);
    }
}



.magicText {
    font-size: clamp(2em, 2vw, 4em);
    font-weight: 400;
}

.magicText>.magic {
    display: inline-block;
    position: relative;
}

.magicText>.magic>.magic-star {
    --size: clamp(20px, 1.5vw, 30px);

    animation: scale 700ms ease forwards;
    display: block;
    height: var(--size);
    left: var(--star-left);
    position: absolute;
    top: var(--star-top);
    width: var(--size);
}

.magicText>.magic>.magic-star>svg {
    animation: rotate 1000ms linear infinite;
    display: block;
    opacity: 0.7;
}

.magicText>.magic>.magic-star>svg>path {
    fill: var(--violet);
}

.magicText>.magic>.magic-text {
    animation: background-pan 3s linear infinite;
    background: linear-gradient(to right,
            var(--purple),
            var(--violet),
            var(--pink),
            var(--purple));
    background-size: 200%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    white-space: nowrap;
}









#image {
    max-width: 100%; /* Ensure the image fits within the container */
}
#cropped-result {
    display: block;
    margin-top: 10px;
    width: 100%; /* Make canvas responsive */
    max-width: 410px; /* Set max width to the cropped width */
    height: auto; /* Maintain aspect ratio */
}
.cropper-container {
    width: 100%; /* Ensure container takes full width */
    max-width: 100%; /* Ensure container does not exceed full width */
    margin: auto;
}

/* Media queries for responsive design */
@media (max-width: 768px) {
    .cropper-container {
        max-height: 300px; /* Adjust max height for smaller screens */
    }
}
@media (max-width: 576px) {
    .cropper-container {
        max-height: 200px; /* Adjust max height for extra small screens */
    }
}

#cropButton {
    display: none; /* Hide the crop button by default */
}









  #imageInput[type=file] {
    width: 300px;
    max-width: 100%;
    color: #444;
    padding: 5px;
    background: #fff;
    border-radius: 8px;
    border: 1px solid #555;
  }

  #imageInput[type=file]::file-selector-button {
    margin-right: 20px;
    border: none;
    background: #292b2c;
    padding: 10px 20px;
    border-radius: 50px;
    color: #fff;
    cursor: pointer;
    transition: background .2s ease-in-out;
  }

  #imageInput[type=file]::file-selector-button:hover {
    background: #0d45a5;
  }