/**
 * Smile Identity New Website CSS
 */

 body {
    background-color: #0C2048;
}



 .animate-spin-slower {
    animation: spin 6s linear infinite;
}

.checklist li::before {
    background-image: url(/img/svg/icons/check-icon.svg);
    background-position: center;
    background-repeat: no-repeat;
    content: '';
    display: inline-block;
    vertical-align: middle;
    flex-shrink: 0;
    inline-size: 1.75rem;
    block-size: 1.75rem;
    margin-inline-end: 0.5rem;
}



.grid-circle-bg {
    background-repeat: no-repeat;
    background-image: url(/img/svg/grid-circle.svg);
    background-size: 300px 400px;
    background-position: 75% 200px;
}

.block-circle-bg {
    background-repeat: no-repeat;
    background-image: url(/img/svg/block-circle.svg);
    background-size: 300px 400px;
    background-position: calc(100% + 100px) -150px;
}




.about-hero-bg {
    background-repeat: no-repeat;
    background-image: url(/img/svg/about-block-circle.svg), url(/img/svg/about-grid-circle.svg);
    background-size: 400px 400px,  400px 400px;
    background-position: calc(100% + 200px) 50%, calc(0% - 12rem) calc(100% + 12rem);
}

@media screen and (max-width: 768px) {
    .about-hero-bg {
        background-image: none;
    }

    .home-hero-bg {
        background-image: none;
    }
    
}

@media screen and (max-width: 1440px) {
.about-hero-bg {
    background-repeat: no-repeat;
    background-image: url(/img/svg/about-block-circle.svg), url(/img/svg/about-grid-circle.svg);
    background-size: 325px 400px, 350px 400px;
    background-position: calc(100% + 200px) 50%, calc(0% - 12rem) calc(100% + 12rem);
}
}



.o-highlight {
    background: transparent linear-gradient(90.23deg, #FFD260 -1.03%, #FFB451 92.13%);
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
}

.o-highlight-gold{
    background:  transparent linear-gradient(90.23deg, #FFD260 -1.03%, #ff9100 92.13%);
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
}



/**
 * DEBUGGING
 */
 [href=''],
 [href='#'],
 img:not([alt]),
 a:not([href]),
 .debug {
     outline: 2px dashed red;
     outline-offset: .125rem;
 }