.text-gradient {  
background: linear-gradient(
        to right,
        #F24C60 17%,
        #D180FF 54%,
        #91C7F4 100%
    );
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    text-fill-color: transparent;
    background-size: 500% auto;
    animation: textShine 3s ease-in-out infinite alternate;
}  

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

.p-badge{  
    filter: drop-shadow(10px 10px 30.14px #411028);
}  

/* Moving gradient border */
.moving-gradient-border {
    position: relative;
    border-radius: 12px;
    z-index: 1;
}

/* Blurred gradient glow layer */
.moving-gradient-border::before {
    content: "";
    position: absolute;
    top: -1px;
    left: -1px;
    right: -1px;
    bottom: -1px;
    background: linear-gradient(120deg, #F24C60, #D180FF, #91C7F4);
    background-size: 300% 300%;
    filter: blur(8px);
    opacity: 0.7;
    z-index: -2;
    border-radius: 2.5rem !important;
    animation: moveBorder 6s 
    linear infinite;
}

/* Sharp border mask on top */
.moving-gradient-border::after {
    content: "";
    position: absolute;
    top: -6px;
    left: -6px;
    right: -6px;
    bottom: -6px;
    background: inherit;
    background-size: inherit;
    padding: 6px;   
    border-radius: 2.5rem !important;
    -webkit-mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    z-index: -1;
    animation: moveBorder 6s linear infinite;
}

/* Gradient border animation keyframes (which define the motion) */
@keyframes moveBorder {
    0%   { background-position: 0% 50%; }
    50%  { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* Gradient border hover state default styles */
.hover-gradient-border {
    position: relative;
    padding: 15px 30px;
    color: white;
    border-radius: 12px;
    z-index: 1;
    background: transparent; /* normal state */
    border: 2px solid transparent; /* normal state */
    transition: all 0.3s ease;
}

/* Blurry gradient border - initially hidden */
.hover-gradient-border::before {
    content: "";
    position: absolute;
    top: -4px;    /* spread for blur */
    left: -4px;
    right: -4px;
    bottom: -4px;
    border-radius: 20px;  /* slightly larger for blur */
    background: linear-gradient(120deg, #F24C60, #D180FF, #91C7F4);
    background-size: 300% 300%;
    z-index: -1;
    filter: blur(12px);  /* heavy blur to spread glow */
    opacity: 0; /* hidden by default */
    transition: opacity 0.3s ease;
}

/* Show and animate on hover */
.hover-gradient-border:hover::before {
    opacity: 1;
    animation: moveBorder 6s linear infinite;
}

/* Gradient movement animation */
@keyframes moveBorder {
    0%   { background-position: 0% 50%; }
    50%  { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/************* CAROUSELS *************/
body.finetune .carousel {
    height: auto!important;
}
body:not(.finetune) .carousel {  
    overflow: hidden!important;  
}  
  
body:not(.finetune) .carousel-track {  
    will-change: transform;
    display: flex!important;  
    transition: transform 0.3s ease; 
}  
  
body:not(.finetune) .carousel-slide { 
    flex: 0 0 33.33%;
    box-sizing: border-box;  
}

/* Media Queries */

@media screen and (max-width: 2000px) and (min-width:1800px){
     .content-top-padding{
        padding-top: 18rem !important;
    }
    
}

@media screen and (max-width: 1200px) and (min-width:1024px){
     .content-top-padding{
        padding-top: 4rem !important;
    }
    
      .video-width{
        top: 44% !important;
    }
}

@media screen and (max-width: 1440px) and (min-width:1250px){
    .content-top-padding{
        padding-top: 10rem !important;
    }
   
}

@media screen and (max-width: 950px) and (min-width:801px){
    .cover-block-height{
        min-height: 62.25vw !important;
        max-height: 62.25vw !important;
    }
    
    .content-top-padding{
        padding-top: 6rem !important;
    }
    
    .video-width{
        width:calc(100% + 15%) !important;
    }
}

@media screen and (max-width: 800px) {
    body:not(.finetune) .carousel-slide { flex: 0 0 50%; }
}

@media screen and (max-width: 667px) {
    body:not(.finetune) .carousel-slide { flex: 0 0 100%;}
}

/* Media Queries */

@media (prefers-reduced-motion: reduce) {  
    .creative-scroll {  
        transition: none !important; /* Disable transitions */  
        animation: none !important;  /* Disable animations */  
    } 
}

@media screen and (max-width: 667px) {
    body:not(.finetune) .marquee-inner {
      display: inline-flex;
      gap: 0rem;                  
      animation: scroll 2.5s linear infinite !important; 
    }
    
    .cover-bottom-radius{
      border-radius: 0px 0px 40px 40px !important;
    }

    .footer-top-radius{
      border-radius: 40px 40px 0px 0px !important;
    }
   
}