/* ----------------------------------------------------------------
	Custom CSS

	Add all your Custom Styled CSS here for New Styles or
	Overwriting Default Theme Styles for Better Handling Updates
-----------------------------------------------------------------*/

:root {
    --cnvs-themecolor: #FD5D3D;
    --cnvs-themecolor-rgb: 253, 93, 61;
    --cnvs-primary-font: "proxima-nova", sans-serif;
    --cnvs-body-font: "proxima-nova", sans-serif;
    --bs-bg-opacity: 1;
}

.lead {
    font-size: 18px !important;
    font-weight: 400;
}

.include-header{
    display: flex !important;
    height: 100%;
    flex-flow: column;
    justify-content: center;
}
.overflow-visible { overflow: visible !important; }


.gradient-red-yellow,
.h-gradient-red-yellow:hover {
    background-image:  -webkit-linear-gradient(110.78deg, rgb(118, 230, 80) -1.13%, rgb(249, 214, 73) 15.22%, rgb(240, 142, 53) 32.09%, rgb(236, 81, 87) 48.96%, rgb(255, 24, 189) 67.94%, rgb(26, 75, 255) 85.34%) !important;
    background-image: linear-gradient(110.78deg, rgb(118, 230, 80) -1.13%, rgb(249, 214, 73) 15.22%, rgb(240, 142, 53) 32.09%, rgb(236, 81, 87) 48.96%, rgb(255, 24, 189) 67.94%, rgb(26, 75, 255) 85.34%) !important;
}

.emphasis-title h1 {
    font-weight: 600;
}

@media (min-width: 769px) {
    .emphasis-title h1 {
        font-size: 100px !important;

    }

}

@media (max-width: 991.98px) {
    .emphasis-title h1 {
        font-size: calc(5vw + 11.9014px)
    }
}



.button-hero {
    padding: 23px 48px !important;
    background-color: #7b0202 !important;
    font-size: 1rem;
    border-radius: 50px;
    box-shadow: 0px 13px 18px -14px rgba(0,0,0, 0.35);
}

.button.button-reveal.text-end i {
    opacity: 0;
    left: auto;
    right: 32px;
    background-color: transparent;
    transition: all .3s ease !important;
}

.button:hover.button-reveal.text-end i {
    opacity: 1;
    right: 18px;
    transform: translateX(-10px);
}



.countdown {
    --cnvs-countdown-border:	1px dotted var(--bs-dark-rgb);
 }

.countdown-section {
    --bs-text-opacity: 1;
    color: rgba(var(--bs-dark-rgb), var(--bs-text-opacity)) !important;
    background-color: rgba(255, 255, 255, 0.4); /* Semi-transparent white */
    border-radius: 50%; /* Makes the background circular */
    flex-basis: 100px; /* Adjust based on your needs */
    height: 100px; /* Ensure width and height are the same for a perfect circle */
    align-items: center; /* Centers text vertically */
    justify-content: center; /* Centers text horizontally */
    text-align: center; /* Ensures the text is centered if it wraps */
    padding: 20px; /* Optional: Adjusts padding around the text */
    flex-grow: 0;
    margin: 0px 6px;
}

@media (max-width: 991.98px) {
    .countdown-section {
        padding: 20px; /* Optional: Adjusts padding around the text */
        margin: 0px 3px;
    }
}

.countdown-amount {
    --bs-text-opacity: 1;
    color: rgba(var(--bs-dark-rgb), var(--bs-text-opacity)) !important;
    min-width: 50px;
}

.ticker-item {
    color: white !important;
}


/* ----- Subscribe Widget ----- */
#widget-subscribe-form {
    display: block;
    padding: 8px;
    background-color: #FFF;
    border: 1px solid #EEE;
    border-radius: 3px;
    box-shadow: 0 0 30px 4px rgba(0,0,0,0.15);
    transition: box-shadow .4s linear;
}

#widget-subscribe-form:hover { box-shadow: 0 0 42px 4px rgba(0,0,0,.3) !important; }

.input-lg { height: 50px; }


/* ----- Lists ----- */
ul.tc-list {
    font-size: 16px !important;
    font-weight: 400;
    text-align: start;
}

.iconlist > li i:first-child {
    color: rgb(253, 93, 61) !important;
}

.iconlist li {
    font-size: 16px !important;
}

/* ----- Blog Post ----- */
div.blog-text p {
    font-size: 18px;
    font-weight: 300;
}


/* ----- Subscribe Widget ----- */
/* For small devices (landscape phones, less than 576px) */
@media (max-width: 991.98px) {
    .offset-1 {
        margin-left: 0; /* Or a smaller value to fit within the viewport */
    }
}


/* ----- Challenge specific  ----- */
.masonry-thumbs-name {
    position: absolute;
    display: flex;
    top: 290px;
    left: 10px;
    color: white;
    font-size: 24px;
}


/* ----- Science Text Rotator  ----- */
.text-rotator-container {
    width: 100%;
    height: 80px;
    background-color: #F4F4F4; /* Gray background */
    overflow: hidden;
    position: relative;
    padding: 10px;
}

.text-rotator-item {
    position: absolute;
    width: 100%;
    height: 100%; /* Full height of container */
    color: black;
    box-sizing: border-box;
    font-size: 14px;
    transition: top 0.8s ease-in-out, opacity 0.8s ease-in-out;

    /* Center text both horizontally and vertically */
    display: flex;
    justify-content: center; /* Horizontal center */
    align-items: center;     /* Vertical center */
    text-align: center;      /* Center text itself */
}

/* Style links to have no special appearance but change cursor on hover */
.text-rotator-item a {
    color: inherit; /* Use the same color as parent */
    text-decoration: none; /* No underline */
    cursor: pointer; /* Change cursor on hover */
}

/* No hover color change */
.text-rotator-item a:hover,
.text-rotator-item a:visited,
.text-rotator-item a:active {
    color: inherit;
    text-decoration: none;
}

/* Mobile-specific optimizations */
@media screen and (max-width: 768px) {
    .text-rotator-container {
        height: 100px; /* Even more height on mobile */
    }

    .text-rotator-item {
        padding: 20px 25px; /* More padding on mobile */
        font-size: 15px; /* Slightly smaller font for better fit */
    }
}

/* Small mobile screens */
@media screen and (max-width: 480px) {
    .text-rotator-container {
        height: 120px; /* Even more height on very small screens */
    }

    .text-rotator-item {
        padding: 20px 25px;
    }
}