/* ==========================================
   Premium Hero Slider CSS
   ========================================== */

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

body{
    font-family:'Poppins',sans-serif;
    background:#070b1d;
}

/*=============================
Hero Section
=============================*/

.hero-slider{
    position:relative;
    width:100%;
    height:900px;
    overflow:hidden;
    background:
        linear-gradient(135deg,#081126 0%,#0b1b4d 25%,#4a148c 70%,#0d47a1 100%);
}

/* Animated Background */

.hero-slider::before{
    content:"";
    position:absolute;
    width:140%;
    height:140%;
    left:-20%;
    top:-20%;
    background:
        radial-gradient(circle,#00d4ff33 0%,transparent 30%),
        radial-gradient(circle,#ff00ff22 0%,transparent 35%),
        radial-gradient(circle,#00ff8855 0%,transparent 30%);
    animation:bgMove 18s linear infinite;
}

@keyframes bgMove{

0%{
transform:rotate(0deg);
}

100%{
transform:rotate(360deg);
}

}

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

.hero-container{

max-width:1400px;

height:900px;

margin:auto;

display:flex;

align-items:center;

justify-content:space-between;

padding:0 80px;

position:relative;

z-index:5;

}

/*=============================
LEFT
=============================*/

.hero-left{

width:55%;

}

.hero-tag{

display:inline-block;

padding:10px 22px;

border-radius:40px;

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

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

color:#fff;

font-size:14px;

margin-bottom:25px;

backdrop-filter:blur(20px);

}

.hero-left h1{

font-size:70px;

line-height:82px;

font-weight:800;

color:#fff;

margin-bottom:25px;

}

.hero-left h1 span{

background:linear-gradient(90deg,#00e5ff,#ff00d4,#00ff9c);

-webkit-background-clip:text;

-webkit-text-fill-color:transparent;

}

.hero-left p{

font-size:18px;

line-height:34px;

color:#dddddd;

max-width:600px;

margin-bottom:45px;

}

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

.hero-buttons{

display:flex;

gap:20px;

}

.btn-primary{

display:inline-flex;

align-items:center;

justify-content:center;

padding:18px 40px;

border-radius:50px;

background:linear-gradient(135deg,#00d2ff,#0066ff);

color:#fff;

font-weight:700;

text-decoration:none;

transition:.4s;

box-shadow:0 20px 40px rgba(0,0,0,.35);

}

.btn-primary:hover{

transform:translateY(-8px);

}

.btn-secondary{

display:inline-flex;

align-items:center;

justify-content:center;

padding:18px 40px;

border-radius:50px;

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

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

backdrop-filter:blur(18px);

color:#fff;

text-decoration:none;

transition:.4s;

}

.btn-secondary:hover{

background:#fff;

color:#111;

}

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

.hero-right{

width:45%;

display:flex;

justify-content:center;

align-items:center;

}

.glass-card{

width:520px;

height:520px;

border-radius:40px;

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

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

backdrop-filter:blur(25px);

display:flex;

align-items:center;

justify-content:center;

box-shadow:0 30px 60px rgba(0,0,0,.4);

animation:floatCard 6s ease-in-out infinite;

}

.hero-image{

max-width:90%;

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

}

@keyframes floatCard{

0%{
transform:translateY(0px);
}

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

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

}

@keyframes rotateImage{

0%{
transform:rotate(-2deg);
}

50%{
transform:rotate(2deg);
}

100%{
transform:rotate(-2deg);
}

}

/*=============================
Floating Circles
=============================*/

.hero-circle{

position:absolute;

border-radius:50%;

filter:blur(35px);

animation:floatCircle 8s ease-in-out infinite alternate;

}

.hero-circle-1{

width:350px;

height:350px;

background:#00d4ff;

top:-80px;

left:-80px;

opacity:.45;

}

.hero-circle-2{

width:450px;

height:450px;

background:#ff00c8;

right:-120px;

top:120px;

opacity:.35;

animation-duration:12s;

}

.hero-circle-3{

width:320px;

height:320px;

background:#00ff99;

bottom:-80px;

left:40%;

opacity:.30;

animation-duration:10s;

}

@keyframes floatCircle{

0%{
transform:translateY(0px) rotate(0deg);
}

100%{
transform:translateY(40px) rotate(20deg);
}

}

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

.hero-next,
.hero-prev{

width:65px;

height:65px;

border-radius:50%;

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

backdrop-filter:blur(15px);

color:#fff;

transition:.4s;

}

.hero-next:hover,
.hero-prev:hover{

background:#00c3ff;

}

.swiper-pagination-bullet{

background:#fff;

opacity:.4;

}

.swiper-pagination-bullet-active{

background:#00d4ff;

opacity:1;

}

/*=============================
Responsive
=============================*/

@media(max-width:991px){

.hero-container{

flex-direction:column;

justify-content:center;

text-align:center;

padding:40px;

}

.hero-left,
.hero-right{

width:100%;

}

.hero-left h1{

font-size:46px;

line-height:56px;

}

.glass-card{

width:360px;

height:360px;

margin-top:40px;

}

.hero-buttons{

justify-content:center;

flex-wrap:wrap;

}

}

@media(max-width:576px){

.hero-slider{

height:auto;

padding:100px 0;

}

.hero-container{

height:auto;

}

.hero-left h1{

font-size:34px;

line-height:44px;

}

.hero-left p{

font-size:16px;

line-height:28px;

}

.glass-card{

width:280px;

height:280px;

}

.btn-primary,
.btn-secondary{

padding:14px 28px;

font-size:14px;

}

}




body{
    font-family:'Poppins',sans-serif;
}