/*==============================
Google Font
==============================*/

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800&display=swap');

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    font-family:'Poppins',sans-serif;
}

body{
    background:#f7f9fc;
    overflow-x:hidden;
}

/*==============================
AI Section
==============================*/

.ai-section{
    position:relative;
    padding:90px 7%;
    overflow:hidden;
    background:linear-gradient(135deg,#ffffff,#f7f9fc,#eef4ff);
}

/*==============================
Animated Grid
==============================*/

.ai-section .bg-grid{
    position:absolute;
    inset:0;

    background-image:
    linear-gradient(rgba(3,68,190,.06) 1px,transparent 1px),
    linear-gradient(90deg,rgba(3,68,190,.06) 1px,transparent 1px);

    background-size:45px 45px;

    animation:gridMove 20s linear infinite;

    z-index:0;
}

@keyframes gridMove{

    from{
        transform:translateY(0);
    }

    to{
        transform:translateY(45px);
    }

}

/*==============================
Floating Blobs
==============================*/

.ai-section .blob{
    position:absolute;
    border-radius:50%;
    filter:blur(70px);
    z-index:0;
}

.ai-section .blob1{

    width:320px;
    height:320px;

    background:#0344be;

    top:-120px;
    right:120px;

    opacity:.12;

    animation:blobOne 8s ease-in-out infinite;

}

.ai-section .blob2{

    width:280px;
    height:280px;

    background:#ec4899;

    left:-80px;
    bottom:-80px;

    opacity:.15;

    animation:blobTwo 10s ease-in-out infinite;

}

@keyframes blobOne{

    0%,100%{
        transform:translateY(0) scale(1);
    }

    50%{
        transform:translateY(40px) scale(1.1);
    }

}

@keyframes blobTwo{

    0%,100%{
        transform:translate(0,0);
    }

    50%{
        transform:translate(35px,-25px);
    }

}

/*==============================
Container
==============================*/

.ai-section .container{
    position:relative;
    z-index:5;
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:70px;

}

.ai-section .left{

    width:48%;

}

.ai-section .right{

    width:52%;

}

/*==============================
AI Logos
==============================*/

.ai-section .logo-row{

    display:flex;
    align-items:center;
    gap:14px;

    margin-bottom:45px;

}

.ai-section .logo{

    width:58px;
    height:58px;

    background:#fff;

    border-radius:50%;

    display:flex;
    align-items:center;
    justify-content:center;

    box-shadow:0 12px 25px rgba(0,0,0,.08);

    animation:floatLogo 4s ease-in-out infinite;
    transition:.35s;

}

.ai-section .logo:nth-child(2){animation-delay:.3s;}
.ai-section .logo:nth-child(3){animation-delay:.6s;}
.ai-section .logo:nth-child(4){animation-delay:.9s;}
.ai-section .logo:nth-child(5){animation-delay:1.2s;}

.ai-section .logo:hover{

    transform:translateY(-8px) scale(1.08);

}

.ai-section .logo img{
    width:50px;
}

.ai-section .arrow{

    font-size:34px;
    font-weight:700;
    color:#393b5b;

    animation:arrowMove 2s infinite;

}

.ai-section .final{

    background:linear-gradient(135deg,#0344be,#ec4899);

}

@keyframes floatLogo{

    0%,100%{
        transform:translateY(0);
    }

    50%{
        transform:translateY(-10px);
    }

}

@keyframes arrowMove{

    0%,100%{
        transform:translateX(0);
    }

    50%{
        transform:translateX(10px);
    }

}

/*==============================
Tag
==============================*/

.ai-section .tag{

    display:inline-block;

    padding:10px 18px;

    border-radius:50px;

    background:rgba(3,68,190,.08);

    color:#0344be;

    font-size:14px;
    font-weight:600;

    margin-bottom:20px;

}

/*==============================
Heading
==============================*/

.ai-section .left h1{

    font-size:64px;
    line-height:1.1;

    color:#222;

    font-weight:800;

    margin-bottom:22px;

}

.ai-section .left h1 span{

    background:linear-gradient(
    90deg,
    #393b5b,
    #4d5085,
    #0344be,
    #ec4899,
    #f6a018);

    background-size:300%;

    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;

    animation:gradientMove 6s linear infinite;

}

@keyframes gradientMove{

    from{
        background-position:0%;
    }

    to{
        background-position:300%;
    }

}

/*==============================
Paragraph
==============================*/

.ai-section .left p{

    font-size:18px;
    color:#667085;

    line-height:1.8;

    margin-bottom:35px;

}

/*==============================
Buttons
==============================*/

.ai-section .buttons{

    display:flex;
    gap:18px;

}

.ai-section .buttons a{

    text-decoration:none;
    font-weight:600;

    transition:.35s;

}

.ai-section .btn1{

    padding:16px 34px;

    border-radius:60px;

    color:#fff;

    background:linear-gradient(
    135deg,
    #0344be,
    #4d5085,
    #ec4899);

    box-shadow:0 18px 35px rgba(3,68,190,.25);

}

.ai-section .btn1:hover{

    transform:translateY(-5px);

}

.ai-section .btn2{

    padding:16px 34px;

    border-radius:60px;

    color:#393b5b;

    border:2px solid #393b5b;

}

.ai-section .btn2:hover{

    background:#393b5b;
    color:#fff;

    transform:translateY(-5px);

}

/*==================================
RIGHT PANEL
==================================*/

.ai-section .right{
    display:flex;
    justify-content:center;
    align-items:center;
}

/* Dashboard */

.ai-section .dashboard{
    position:relative;
    width:520px;
    background:rgba(255,255,255,.78);
    backdrop-filter:blur(25px);

    border:1px solid rgba(255,255,255,.7);
    border-radius:28px;

    padding:25px;

    overflow:hidden;

    box-shadow:
    0 30px 70px rgba(0,0,0,.08);

    animation:dashboardFloat 5s ease-in-out infinite;
}

/* Animated Border */

.ai-section .dashboard::before{

    content:"";

    position:absolute;
    inset:-2px;

    background:linear-gradient(
        90deg,
        #393b5b,
        #4d5085,
        #0344be,
        #ec4899,
        #f6a018,
        #393b5b
    );

    background-size:400%;

    border-radius:30px;

    animation:borderRun 8s linear infinite;

    z-index:-2;

}

.ai-section .dashboard::after{

    content:"";

    position:absolute;
    inset:2px;

    background:#fff;

    border-radius:26px;

    z-index:-1;

}

/*========================*/

.ai-section .topbar{

display:flex;
align-items:center;
gap:12px;

margin-bottom:30px;

}

.ai-section .online{

width:14px;
height:14px;

background:#22c55e;

border-radius:50%;

box-shadow:0 0 18px #22c55e;

animation:pulse 2s infinite;

}

.ai-section .topbar span{

font-size:18px;
font-weight:700;
color:#1e293b;

}

/*========================*/

.ai-section .chat{

display:flex;
flex-direction:column;
gap:18px;

margin-bottom:30px;

}

.ai-section .message{

padding:16px 20px;

border-radius:18px;

font-size:15px;

max-width:85%;

line-height:1.6;

}

.ai-section .user{

margin-left:auto;

background:linear-gradient(
135deg,
#0344be,
#4d5085);

color:#fff;

}

.ai-section .ai{

background:#f4f6fb;

color:#444;

border:1px solid #e6ebf5;

}

/*========================*/

.ai-section .cards{

display:grid;
grid-template-columns:repeat(3,1fr);
gap:15px;

margin-bottom:25px;

}

.ai-section .mini-card{

padding:18px;

border-radius:18px;

background:#f8fbff;

transition:.35s;

border:1px solid #edf2ff;

}

.ai-section .mini-card:hover{

transform:translateY(-8px);

box-shadow:
0 18px 35px rgba(3,68,190,.12);

}

.ai-section .mini-card h4{

font-size:15px;

margin-bottom:15px;

color:#393b5b;

}

/*========================*/

.ai-section .progress{

height:8px;

background:#e9eef8;

border-radius:30px;

overflow:hidden;

}

.ai-section .progress span{

display:block;

height:100%;

width:0;

border-radius:30px;

background:linear-gradient(
90deg,
#0344be,
#ec4899,
#f6a018);

background-size:300%;

animation:

progress 3s forwards,
gradientMove 5s linear infinite;

}

/*========================*/

.ai-section .bottom-box{

display:flex;
gap:12px;

margin-top:20px;

}

.ai-section .bottom-box input{

flex:1;

padding:15px 18px;

border:none;

outline:none;

border-radius:50px;

background:#f5f7fb;

font-size:15px;

}

.ai-section .bottom-box button{

padding:15px 30px;

border:none;

cursor:pointer;

border-radius:50px;

font-weight:600;

color:#fff;

background:linear-gradient(
135deg,
#0344be,
#ec4899);

transition:.35s;

}

.ai-section .bottom-box button:hover{

transform:translateY(-4px);

box-shadow:
0 15px 30px rgba(236,72,153,.25);

}

/*========================*/

@keyframes dashboardFloat{

0%,100%{

transform:translateY(0);

}

50%{

transform:translateY(-14px);

}

}

@keyframes pulse{

0%{

transform:scale(1);

opacity:1;

}

50%{

transform:scale(1.3);

opacity:.6;

}

100%{

transform:scale(1);

opacity:1;

}

}

@keyframes borderRun{

from{

background-position:0%;

}

to{

background-position:400%;

}

}

@keyframes progress{

100%{

width:85%;

}

}

/*==================================
CARD ENTRY ANIMATION
==================================*/

.ai-section .left,
.ai-section .right{
    animation:fadeUp 1s ease;
}

@keyframes fadeUp{

    from{
        opacity:0;
        transform:translateY(50px);
    }

    to{
        opacity:1;
        transform:translateY(0);
    }

}

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

.ai-section .dashboard{
    overflow:hidden;
}

.ai-section .dashboard .shine{

    position:absolute;

    top:0;
    left:-140%;

    width:80px;
    height:100%;

    background:linear-gradient(
        90deg,
        transparent,
        rgba(255,255,255,.65),
        transparent
    );

    transform:skewX(-25deg);

    animation:shineMove 5s linear infinite;

}

@keyframes shineMove{

    0%{
        left:-140%;
    }

    100%{
        left:150%;
    }

}

/*==================================
LOGO GLOW
==================================*/

.ai-section .logo{

    position:relative;

}

.ai-section .logo::before{

    content:"";

    position:absolute;

    inset:-8px;

    border-radius:50%;

    background:radial-gradient(
        rgba(3,68,190,.18),
        transparent
    );

    opacity:0;

    transition:.4s;

}

.ai-section .logo:hover::before{

    opacity:1;
    transform:scale(1.2);

}

/*==================================
BUTTON RIPPLE
==================================*/

.ai-section .btn1,
.ai-section .btn2{

    position:relative;
    overflow:hidden;

}

.ai-section .btn1::before,
.ai-section .btn2::before{

    content:"";

    position:absolute;

    width:0;
    height:0;

    border-radius:50%;

    background:rgba(255,255,255,.25);

    left:50%;
    top:50%;

    transform:translate(-50%,-50%);

    transition:.6s;

}

.ai-section .btn1:hover::before,
.ai-section .btn2:hover::before{

    width:320px;
    height:320px;

}

/*==================================
INPUT EFFECT
==================================*/

.ai-section .bottom-box input{

    transition:.35s;

}

.ai-section .bottom-box input:focus{

    background:#fff;

    box-shadow:
    0 0 0 4px rgba(3,68,190,.08);

}

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

.ai-section .mini-card{

    position:relative;
    overflow:hidden;

}

.ai-section .mini-card::before{

    content:"";

    position:absolute;

    left:-120%;
    top:0;

    width:70px;
    height:100%;

    background:linear-gradient(
        transparent,
        rgba(255,255,255,.7),
        transparent
    );

    transform:skewX(-25deg);

}

.ai-section .mini-card:hover::before{

    animation:cardShine .8s;

}

@keyframes cardShine{

    to{
        left:160%;
    }

}

/*==================================
FLOATING PARTICLES
==================================*/

.ai-section .ai-section::before{

    content:"";

    position:absolute;

    width:8px;
    height:8px;

    border-radius:50%;

    background:#0344be;

    left:8%;
    top:20%;

    box-shadow:
    200px 150px #ec4899,
    420px 60px #0344be,
    600px 250px #f6a018,
    900px 100px #4d5085,
    1050px 300px #0344be;

    opacity:.35;

    animation:particles 12s linear infinite;

}

@keyframes particles{

    from{
        transform:translateY(0);
    }

    to{
        transform:translateY(-60px);
    }

}

/*==================================
HOVER SCALE
==================================*/

.ai-section .dashboard:hover{

    transform:
    translateY(-12px)
    scale(1.02);

}

/*==================================
RESPONSIVE
==================================*/

@media(max-width:1100px){

.ai-section .container{

    flex-direction:column;

    gap:60px;

}

.ai-section .left,
.ai-section .right{

    width:100%;

}

.ai-section .left{

    text-align:center;

}

.ai-section .logo-row{

    justify-content:center;
        gap: 6px;

}

.ai-section .buttons{

    justify-content:center;

}

.ai-section .dashboard{

    width:100%;

    max-width:560px;

}

}

@media(max-width:768px){

    .ai-section .final {
        background: transparent;
    }

.ai-section .ai-section{

    padding:70px 20px;

}

.ai-section .left h1{

    font-size:36px;

}

.ai-section .left p{

    font-size:16px;

}

.ai-section .logo{

    width:50px;
    height:50px;

}

.ai-section .logo img{

    width:46px;

}

.ai-section .cards{

    grid-template-columns:1fr;

}

.ai-section .bottom-box{

    flex-direction:column;

}

.ai-section .bottom-box button{

    width:100%;

}

.ai-section .buttons{

    flex-direction:column;

}

.ai-section .btn1,
.ai-section .btn2{

    width:100%;
    text-align:center;

}

}