:root {
    --page-text-color: #01B4D7;
    --page-secondary-bg: #CCF0F7;
    --page-primary-bg: #EEF0FD;
    --text-light: #3F4751;
    --linear: linear-gradient(to bottom, #797979b5, #000000);
}

.page-text-color {
    color: var(--page-text-color);
}

.page-secondary-bg {
    background-color: var(--page-secondary-bg);
}

.page-primary-bg {
    background: var(--page-primary-bg);
}

.dark-layout {
    background-color: var(--page-text-color);
}

.text-light {
    color: var(--text-light) !important;
}

.button-primary {
    background-color: var(--page-text-color);
    font-family: 'Gilroy' !important;
    border-radius: 100px !important;
}

.button-primary.button-theme {
    background-color: var(--primary-color-600);
}

.button-primary.button-primary-white {
    background-color: var(--white-color);
    color: var(--page-text-color);
}

.button-primary.button-theme:hover {
    background-color: var(--white-color) !important;
    color: var(--page-text-color) !important;
}

.circle-icon,
.border-0 {
    border: none;
}

.rounded-30 {
    border-radius: 30px;
}

.rounded-10 {
    border-radius: 10px;
}

.bg-grey {
    background: #F5F5F7;
}

.text-fade {
    color: var(--page-secondary-bg);
}

.fade-bg {
    background: var(--page-secondary-bg);
}

.circle-list li {
    font-size: 18px;
    position: relative;
    z-index: 1;
    padding: 0 0 0 30px;
}

.circle-list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 22px;
    height: 22px;
    background: url('../images/planet-x-images/list-icon.svg') no-repeat center;
    background-size: contain;
}

.circle-list.text-white li::before {
    filter: brightness(0) invert(1);
}

.text-decoration-underline {
    text-decoration-color: #FB8500 !important;
    text-underline-offset: 6px;
}

.linear-bg {
    background: linear-gradient(to bottom, #000000 0%, #001115 10%, #01B4D7 100%);
}

h2.text-decoration-underline {
    text-decoration-color: #FB8500 !important;
    text-underline-offset: 10px;
}

.animated-img {
    animation: floatUpDown 2s ease-in-out infinite;
}

/* common css end */
.hero-wrapper {
    border-radius: 0px 0 40px 40px;
}

.challenge--main {
    border-radius: 100px;
    box-shadow: rgba(204, 240, 247, 0.9) 1px 1px 5px;
    border: 2px solid #CCF0F7;
}

.solutions-main,
.cta--bg {
    background: linear-gradient(to bottom, #FFFFFF, #BCE0E7);
    border-radius: 20px;
}

.tech--main {
    padding: 20px;
    border: 1px solid #DFDFDF;
    background: #ffffff45;
    border-radius: 10px;
    transition: 0.5s all ease;
}

.tech--main:hover {
    transform: translateY(-15px);
}

.tech--main .tech-icon {
    width: 80px;
    height: 80px;
    border: 2px solid #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 100%;
    margin: auto auto 30px;
    background: #fff;
    transition: 0.5s all ease;
}

@keyframes floatUpDown {
    0% {
        transform: translateY(0px);
    }

    50% {
        transform: translateY(-20px);
        /* thoda upar */
    }

    100% {
        transform: translateY(0px);
        /* wapas neeche */
    }
}

@media only screen and (min-width: 1200px) {

    .challenge--main {
        max-width: 80%;
    }
}

@media only screen and (max-width: 991px) {
    .sticky-column {
        position: static;
    }

    .results-detail {
        border: 1px solid #ccc;
        padding: 20px;
    }

    .hero-wrapper h2.mb-3.text-white.h1 {
        font-size: 22px;
    }
}