/*======================================
PREMIUM SLIDER
======================================*/

.kg-slider{

    position:relative;

    width:100%;

    overflow:hidden;

    background:
    radial-gradient(circle at top left,#0b4eff22,transparent 40%),
    radial-gradient(circle at right,#00c8ff22,transparent 35%),
    linear-gradient(135deg,#07111f,#091b31,#061018);

}

.kg-slide{

    width:100%;

    min-height:760px;

    display:flex;

    align-items:center;

}

.kg-container{

    width:92%;

    max-width:1400px;

    margin:auto;

    display:grid;

    grid-template-columns:1fr 1fr;

    align-items:center;

    gap:70px;

    padding:70px 0;

}

.kg-left h1,
.kg-left .kg-slide-title{

    font-size:62px;

    line-height:1.15;

    font-weight:700;

    margin:25px 0;

}

.kg-left h1 span,
.kg-left .kg-slide-title span{

    color:#2da5ff;

}

.kg-left p{

    color:#c9d3df;

    line-height:32px;

    font-size:19px;

    max-width:560px;

}

.kg-badge{

    display:inline-flex;

    padding:12px 22px;

    border-radius:50px;

    background:#1b4cff;

    color:white;

    font-weight:600;

    letter-spacing:1px;

}

.kg-buttons{

    display:flex;

    gap:18px;

    margin-top:45px;

}

.kg-btn-primary{

    background:#2d8cff;

    color:#fff;

    padding:18px 36px;

    border-radius:60px;

    font-weight:600;

    transition:.4s;

}

.kg-btn-primary:hover{

    transform:translateY(-6px);

    box-shadow:0 20px 40px rgba(45,140,255,.4);

}

.kg-btn-secondary{

    border:2px solid rgba(255,255,255,.15);

    color:#fff;

    padding:18px 36px;

    border-radius:60px;

    transition:.4s;

}

.kg-btn-secondary:hover{

    background:white;

    color:#08111f;

}

.kg-right{

    display:flex;

    justify-content:center;

}

.kg-right img{
    width:100%;
    max-width:560px;
}

.kg-slide.active .kg-right img{
    animation:
        imageShow 1s forwards,
        kgFloat 5s ease-in-out infinite 1.2s;
}

@keyframes kgFloat{

0%{

transform:translateY(0px);

}

50%{

transform:translateY(-20px);

}

100%{

transform:translateY(0px);

}

}

@media(max-width:991px){

.kg-container{

grid-template-columns:1fr;

text-align:center;

}

.kg-left p{

margin:auto;

}

.kg-buttons{

justify-content:center;

}

.kg-left h1,
.kg-left .kg-slide-title{

font-size:44px;

}

.kg-right{

margin-top:40px;
display: none;
}

}

@media(max-width:576px){

.kg-slide{

min-height:auto;

padding:60px 0;

}

.kg-left h1,
.kg-left .kg-slide-title{

font-size:34px;

}

.kg-left p{

font-size:16px;

line-height:28px;

}

.kg-buttons{

flex-direction:column;

}

.kg-btn-primary,
.kg-btn-secondary{

width:100%;

text-align:center;

}

}

@media (max-width:768px){

    .kg-dots{
        bottom: 50px !important;
    }

    .kg-prev,
    .kg-next{
        display: none !important;
    }

}
/*======================================
PREMIUM SLIDER V2
======================================*/

.kg-slider{
    position:relative;
    overflow:hidden;
}

.kg-slide{
    position:absolute;
    inset:0;
    opacity:0;
    visibility:hidden;
    transition:1s ease;
}

.kg-slide.active{
    position:relative;
    opacity:1;
    visibility:visible;
    z-index:2;
}

.kg-badge, 
.kg-left h1,
.kg-left .kg-slide-title,
.kg-left p, 
.kg-buttons{

    opacity:0;
    transform:translateX(-60px);

}

.kg-slide.active .kg-badge{

    animation:fadeLeft .7s forwards;
    animation-delay:.2s;

}

.kg-slide.active h1,
.kg-slide.active .kg-slide-title{

    animation:fadeLeft .7s forwards;
    animation-delay:.45s;

}

.kg-slide.active p{

    animation:fadeLeft .7s forwards;
    animation-delay:.7s;

}

.kg-slide.active .kg-buttons{

    animation:fadeLeft .7s forwards;
    animation-delay:.95s;

}

@keyframes fadeLeft{

    from{
    
    opacity:0;
    transform:translateX(-60px);
    
    }
    
    to{
    
    opacity:1;
    transform:translateX(0);
    
    }
    
    }
    
    @keyframes imageShow{
    
    from{
    
    opacity:0;
    transform:translateX(100px) scale(1.08);
    
    }
    
    to{
    
    opacity:1;
    transform:translateX(0) scale(1);
    
    }
    
    }

    .kg-right{

        position:relative;
        
        }
        
        .kg-right::before{
        
        content:"";
        
        position:absolute;
        
        width:420px;
        height:420px;
        
        background:#2d8cff;
        
        filter:blur(120px);
        
        opacity:.18;
        
        border-radius:50%;
        
        z-index:0;
        
        }
        
        .kg-right img{
        
        position:relative;
        
        z-index:2;
        
        border-radius:24px;
        
        box-shadow:
        0 35px 70px rgba(0,0,0,.45);
        
        transition:.5s;
        
        }
        
        .kg-right img:hover{
        
        transform:scale(1.03);
        
        }

        .kg-arrow{

            position:absolute;
            
            top:50%;
            
            transform:translateY(-50%);
            
            width:38px;
            
            height:38px;
            
            display:flex;
            
            align-items:center;
            
            justify-content:center;
            
            border-radius:50%;
            
            background:rgba(255,255,255,.08);
            
            backdrop-filter:blur(10px);
            
            color:#fff;
            
            cursor:pointer;
            
            z-index:30;
            
            transition:.35s;
            
            }
            
            .kg-arrow:hover{
            
            background:#2d8cff;
            
            transform:translateY(-50%) scale(1.08);
            
            }
            
            .kg-prev{
            
            left:10px;
            
            }
            
            .kg-next{
            
            right:25px;
            
            }

            .kg-dots{

                position:absolute;
                
                bottom:110px;
                
                left:50%;
                
                transform:translateX(-50%);
                
                display:flex;
                
                gap:12px;
                
                z-index:30;
                
                }
                
                .kg-dots span{
                
                width:12px;
                
                height:12px;
                
                border-radius:50%;
                
                background:#ffffff44;
                
                cursor:pointer;
                
                transition:.4s;
                
                }
                
                .kg-dots span.active{
                
                background:#2d8cff;
                
                width:34px;
                
                border-radius:20px;
                
                }

                .kg-progress{

                    position:absolute;
                    
                    left:0;
                    
                    bottom:0;
                    
                    width:100%;
                    
                    height:4px;
                    
                    background:#ffffff15;
                    
                    z-index:40;
                    
                    overflow:hidden;
                    
                    }

                    .kg-progress{
                        display:none;
                    }
                    
                    .kg-progress span{
                    
                    display:block;
                    
                    height:100%;
                    
                    width:0;
                    
                    background:#2d8cff;
                    
                    }

                    .kg-slider::after{

                        content:"";
                        
                        position:absolute;
                        
                        inset:0;
                        
                        background:
                        
                        radial-gradient(circle,#2d8cff22,transparent 55%);
                        
                        animation:bgMove 10s linear infinite;
                        
                        pointer-events:none;
                        
                        }
                        
                        @keyframes bgMove{
                        
                        0%{
                        
                        transform:translateX(-80px);
                        
                        }
                        
                        50%{
                        
                        transform:translateX(80px);
                        
                        }
                        
                        100%{
                        
                        transform:translateX(-80px);
                        
                        }
                        
                        }