:root{

    --font-family-heading: "SF Pro Display", -apple-system, BlinkMacSystemFont, 
        "Helvetica Neue", Arial, sans-serif;
    --font-family-body: "SF Pro Text", -apple-system, BlinkMacSystemFont, 
        "Helvetica Neue", Arial, sans-serif;
}

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    list-style: none;
    text-decoration: none;
}

body{
    background: #fff;
}

.docintelligence-section {
    width: 100%;
    position: relative;
    padding: 0;
    margin: 0;
    overflow: hidden;
}

.page-width{
    width: 100%;
    max-width: 100%;
    height: auto;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: flex-start;

    .main-wrapper{
        width: 100%;
        display: grid;
        grid-template-columns: 1fr;
        row-gap: 50px;
        justify-content: center;
        padding-bottom: 60px;

        @media screen and (max-width: 768px) {
            padding-bottom: 40px;
        }

        .intelligence_gradient_container{
            width: 100%;
            height: 200px;
            overflow: hidden;
            display: flex;
            justify-content: center;
            position: relative;

            >span{
                display: block;
                width: 100%;
                height: 350px;
                background-image: linear-gradient(108deg, #1e3c72, #2a5298 34%, #4facfe 68%, #00f2fe);
                background-size: 0% 0%;
                background-repeat: no-repeat;
                background-position: top center;
                filter: blur(35px);
                position: absolute;
                top: 0;
                transition: all 1.2s ease-in-out;
                animation: none;
            }

            >span.animate {
                animation: gradient 5s ease-in-out 1 forwards;
            }
        }

        .intelligence_main-heading{
            margin-top: -50px;
            padding: 0 20px;

            @media screen and (max-width: 768px) {
                padding: 0 10px;
            }

            >.intelligence-prefix{
                font-family: var(--font-family-body);
                text-align: center;
                font-size: 2.5em;
                font-weight: 400;
                color: #333;
                margin-bottom: 10px;
                opacity: 0;
                transform: translateY(30px);
                transition: all .4s linear .2s;
            }

            >.intelligence-prefix.showText{
                opacity: 1;
                transform: translateY(0px);
            }

           >h2 {
                font-family: var(--font-family-body);
                text-align: center;
                font-size: 3.8em;
                font-weight: 600;
                opacity: 0;
                transform: translateY(50px);
                transition: all .4s linear;
            }

            >h2.showText{
                opacity: 1;
                transform: translateY(0px);
            }

            .gradient-text {
                background: linear-gradient(108deg, #1e3c72, #2a5298 34%, #4facfe 68%, #00f2fe) !important;
                background-size: 100% 100% !important;
                -webkit-background-clip: text !important;
                -webkit-text-fill-color: transparent !important;
                -moz-background-clip: text !important;
                -moz-text-fill-color: transparent !important;
                background-clip: text !important;
                color: transparent !important;
            }
        }

        .intelligence-image-container{
            display: flex;
            justify-content: center;
            align-items: center;
            margin-top: 40px;
            opacity: 0;
            transform: scale(0.8);
            transition: all .6s ease-out .4s;

            .intelligence-image{
                max-width: 400px;
                width: 100%;
                height: auto;

                @media screen and (max-width: 768px) {
                    max-width: 300px;
                }
            }

            &.showImage{
                opacity: 1;
                transform: scale(1);
            }
        }

        .intelligence-description{
            margin-top: 80px;
            padding: 0 20px;
            text-align: center;
            opacity: 0;
            transform: translateY(30px);
            transition: all .5s ease-out .6s;

            @media screen and (max-width: 768px) {
                padding: 0 15px;
                margin-top: 60px;
            }

            >p{
                font-family: var(--font-family-body);
                font-size: 1.1em;
                line-height: 1.6;
                color: #666;
                max-width: 800px;
                margin: 0 auto;

                @media screen and (max-width: 768px) {
                    font-size: 1em;
                }
            }

            &.showDescription{
                opacity: 1;
                transform: translateY(0px);
            }
        }
    }
}

@keyframes gradient {
    0% {
        background-size: 0% 0%;
    }
    35% {
        background-size: 100% 20%;
    }
    65% {
        background-size: 100% 10%;
    }
    100% {
        background-size: 100% 0%;
    }
}