/* =====================================================
FILE NAME:
IndustryAccountInsights-style.css

PREMIUM SAAS INDUSTRY SECTION
FULL MOBILE FRIENDLY CSS
===================================================== */


/* =====================================================
MAIN SECTION
===================================================== */

.IndustryAccountInsights-section{
    position:relative;
    overflow:hidden;

    padding:110px 6%;

    background:
    radial-gradient(circle at top left,
    rgba(0,198,255,0.18) 0%,
    transparent 35%),

    radial-gradient(circle at bottom right,
    rgba(127,92,255,0.18) 0%,
    transparent 35%),

    linear-gradient(
    135deg,
    #071120 0%,
    #0b1728 50%,
    #08111e 100%
    );

    font-family:'Inter',sans-serif;
}


/* =====================================================
BACKGROUND GLOW EFFECTS
===================================================== */

.IndustryAccountInsights-glow{
    position:absolute;
    border-radius:50%;
    filter:blur(100px);
    opacity:0.22;
    pointer-events:none;
}

.IndustryAccountInsights-glowOne{
    width:380px;
    height:380px;
    background:#00c6ff;

    top:-120px;
    left:-120px;
}

.IndustryAccountInsights-glowTwo{
    width:320px;
    height:320px;
    background:#7f5cff;

    right:-100px;
    bottom:-100px;
}


/* =====================================================
CONTAINER
===================================================== */

.IndustryAccountInsights-container{
    position:relative;
    z-index:2;

    width:100%;
    max-width:1450px;

    margin:auto;
}


/* =====================================================
HEADER
===================================================== */

.IndustryAccountInsights-header{
    text-align:center;
    margin-bottom:65px;
}


/* =====================================================
BADGE
===================================================== */

.IndustryAccountInsights-badge{
    display:inline-flex;
    align-items:center;
    justify-content:center;

    padding:10px 22px;

    border-radius:100px;

    background:rgba(255,255,255,0.06);

    border:1px solid rgba(255,255,255,0.08);

    backdrop-filter:blur(12px);

    color:#8fc7ff;

    font-size:13px;
    font-weight:700;

    letter-spacing:1px;

    margin-bottom:24px;
}


/* =====================================================
TITLE
===================================================== */

.IndustryAccountInsights-title{
    color:#ffffff;

    font-size:56px;
    font-weight:800;

    line-height:1.1;

    letter-spacing:-2px;

    margin-bottom:20px;
}


/* =====================================================
SUBTITLE
===================================================== */

.IndustryAccountInsights-subtitle{
    max-width:760px;

    margin:auto;

    color:rgba(255,255,255,0.72);

    font-size:18px;

    line-height:1.8;
}


/* =====================================================
GRID
===================================================== */

.IndustryAccountInsights-grid{
    display:grid;

    grid-template-columns:
    repeat(auto-fit,minmax(260px,1fr));

    gap:18px;

    align-items:start;
}


/* =====================================================
CARD
===================================================== */

.IndustryAccountInsights-card{
    position:relative;

    overflow:hidden;

    padding:22px 20px;

    height:auto;
    min-height:unset;

    border-radius:22px;

    background:rgba(255,255,255,0.05);

    border:1px solid rgba(255,255,255,0.08);

    backdrop-filter:blur(16px);

    transition:
    transform 0.4s ease,
    border-color 0.4s ease,
    box-shadow 0.4s ease,
    background 0.4s ease;
}


/* =====================================================
SHINE EFFECT
===================================================== */

.IndustryAccountInsights-card::before{
    content:'';

    position:absolute;

    top:-120%;
    left:-40%;

    width:180%;
    height:220%;

    background:
    linear-gradient(
    120deg,
    transparent,
    rgba(255,255,255,0.12),
    transparent
    );

    transform:rotate(25deg);

    transition:0.9s ease;
}

.IndustryAccountInsights-card:hover::before{
    top:120%;
}


/* =====================================================
CARD HOVER
===================================================== */

.IndustryAccountInsights-card:hover{
    transform:translateY(-8px);

    border-color:rgba(0,198,255,0.42);

    box-shadow:
    0 14px 35px rgba(0,198,255,0.12),
    0 8px 24px rgba(127,92,255,0.14);
}


/* =====================================================
CARD NUMBER
===================================================== */

.IndustryAccountInsights-cardNumber{
    color:#00c6ff;

    font-size:11px;
    font-weight:700;

    letter-spacing:1.5px;

    margin-bottom:12px;
}


/* =====================================================
CARD TITLE
===================================================== */

.IndustryAccountInsights-cardTitle{
    color:#ffffff;

    font-size:17px;

    line-height:1.45;

    font-weight:650;

    margin:0;

    transition:color 0.4s ease;
}

.IndustryAccountInsights-card:hover
.IndustryAccountInsights-cardTitle{
    color:#9bd4ff;
}


/* =====================================================
SCROLL ANIMATION
===================================================== */

.IndustryAccountInsights-card{
    opacity:0;
    transform:translateY(50px);
}

.IndustryAccountInsights-card.IndustryAccountInsights-visible{
    opacity:1;
    transform:translateY(0);

    transition:
    opacity 0.8s ease,
    transform 0.8s ease;
}


/* =====================================================
LARGE TABLET
===================================================== */

@media(max-width:1200px){

    .IndustryAccountInsights-title{
        font-size:48px;
    }

}


/* =====================================================
TABLET
===================================================== */

@media(max-width:992px){

    .IndustryAccountInsights-section{
        padding:90px 5%;
    }

    .IndustryAccountInsights-title{
        font-size:40px;
    }

    .IndustryAccountInsights-subtitle{
        font-size:16px;
    }

    .IndustryAccountInsights-grid{
        grid-template-columns:
        repeat(auto-fit,minmax(240px,1fr));
    }

    .IndustryAccountInsights-card{
        padding:20px 18px;
        border-radius:20px;
    }

    .IndustryAccountInsights-cardTitle{
        font-size:16px;
    }

}


/* =====================================================
MOBILE
===================================================== */

@media(max-width:768px){

    .IndustryAccountInsights-section{
        padding:75px 5%;
    }

    .IndustryAccountInsights-header{
        margin-bottom:45px;
    }

    .IndustryAccountInsights-title{
        font-size:32px;

        line-height:1.2;

        letter-spacing:-1px;
    }

    .IndustryAccountInsights-subtitle{
        font-size:15px;

        line-height:1.7;
    }

    .IndustryAccountInsights-grid{
        grid-template-columns:1fr;

        gap:14px;
    }

    .IndustryAccountInsights-card{
        padding:18px 16px;

        border-radius:18px;
    }

    .IndustryAccountInsights-cardTitle{
        font-size:15px;

        line-height:1.4;
    }

    .IndustryAccountInsights-cardNumber{
        margin-bottom:10px;
    }

}


/* =====================================================
SMALL MOBILE
===================================================== */

@media(max-width:480px){

    .IndustryAccountInsights-section{
        padding:60px 4%;
    }

    .IndustryAccountInsights-badge{
        font-size:11px;

        padding:8px 18px;
    }

    .IndustryAccountInsights-title{
        font-size:27px;
    }

    .IndustryAccountInsights-subtitle{
        font-size:14px;
    }

    .IndustryAccountInsights-grid{
        gap:12px;
    }

    .IndustryAccountInsights-card{
        padding:16px 15px;

        border-radius:16px;
    }

    .IndustryAccountInsights-cardTitle{
        font-size:14px;

        line-height:1.4;
    }

}


/* =====================================================
EXTRA SMALL DEVICES
===================================================== */

@media(max-width:360px){

    .IndustryAccountInsights-title{
        font-size:24px;
    }

    .IndustryAccountInsights-card{
        padding:15px 14px;
    }

    .IndustryAccountInsights-cardTitle{
        font-size:13.5px;
    }

}