/* ===========================
   Conference Header
=========================== */

.conference-header{

position:relative;
padding:80px 20px;
background:linear-gradient(135deg,#0f172a,#1d4ed8,#0891b2);
overflow:hidden;
text-align:center;


}

/* Animated Background */

.animated-bg{

position:absolute;
width:100%;
height:100%;
left:0;
top:0;
overflow:hidden;

}

.animated-bg::before,
.animated-bg::after{

content:"";
position:absolute;
border-radius:50%;
background:rgba(255,255,255,.08);

}

.animated-bg::before{

width:350px;
height:350px;
left:-80px;
top:-100px;
animation:moveCircle1 12s infinite alternate;

}

.animated-bg::after{

width:250px;
height:250px;
right:-60px;
bottom:-60px;
animation:moveCircle2 10s infinite alternate;

}

/* Card */

.conference-card{

position:relative;
z-index:2;
max-width:900px;
margin:auto;

padding:45px;

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

backdrop-filter:blur(18px);

border-radius:25px;

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

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

animation:cardFade 1.2s;

}

/* Logo */

.logo-box{

margin-bottom:25px;

}

.conference-logo{

width:140px;

animation:logoFloat 4s ease-in-out infinite;

transition:.4s;

}

.conference-logo:hover{

transform:scale(1.1) rotate(6deg);

}

/* Text */

.conference-subtitle{

color:#FFD700;

letter-spacing:6px;

font-weight:bold;

margin-bottom:15px;

}

.conference-title{

font-size:48px;

font-weight:700;

color:#fff;

line-height:1.4;

margin-bottom:10px;

animation:titleGlow 3s infinite;

}

.conference-title span{

color: #00CC66;

}

.conference-code{

color:#ffffff;

font-weight:bold;

margin-bottom:30px;

}

.conference-info p{

font-size:22px;

color:#ffffff;

margin:10px 0;

}

/* Button */

.register-btn{

display:inline-block;

margin-top:30px;

padding:15px 45px;

background:#FFD700;

color:#0f172a;

font-size:20px;

font-weight:bold;

border-radius:50px;

text-decoration:none;

transition:.4s;

box-shadow:0 10px 25px rgba(0,0,0,.3);

}

.register-btn:hover{

background:#fff;

transform:translateY(-5px);

box-shadow:0 15px 35px rgba(0,0,0,.4);

}

/* Floating Logo */

@keyframes logoFloat{

0%{
transform:translateY(0);
}

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

100%{
transform:translateY(0);
}

}

/* Card Animation */

@keyframes cardFade{

from{

opacity:0;

transform:translateY(50px);

}

to{

opacity:1;

transform:translateY(0);

}

}

/* Title Glow */

@keyframes titleGlow{

0%{

text-shadow:0 0 5px #fff;

}

50%{

text-shadow:0 0 25px #FFD700;

}

100%{

text-shadow:0 0 5px #fff;

}

}

/* Background Animation */

@keyframes moveCircle1{

from{

transform:translate(0,0);

}

to{

transform:translate(80px,60px);

}

}

@keyframes moveCircle2{

from{

transform:translate(0,0);

}

to{

transform:translate(-70px,-60px);

}

}

/* Mobile */

@media(max-width:768px){

.conference-card{

padding:25px;

}

.conference-logo{

width:95px;

}

.conference-title{
}

.conference-info p{

font-size:17px;

}

.register-btn{

padding:12px 30px;


font-size:28px;

font-size:16px;

}

}


<!----------time----------time--------------------------->
/*=============================
      MAIN BANNER
==============================*/

.main-banner{

    position:relative;
    padding:100px 20px;
    overflow:hidden;

    background:linear-gradient(135deg,#001F3F,#0056b3,#0b8793);

}

/* Animated Background */

.main-banner::before{

    content:"";

    position:absolute;

    width:700px;
    height:700px;

    border-radius:50%;

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

    left:-200px;
    top:-200px;

    animation:rotate 18s linear infinite;

}

.main-banner::after{

    content:"";

    position:absolute;
width:60px;
height:60px;


    border-radius:50%;

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

    right:-150px;
    bottom:-150px;

    animation:rotateReverse 25s linear infinite;

}

.banner-overlay{

    position:absolute;
    inset:0;
    background:rgba(0,0,0,.25);

}

.counter-content{

    position:relative;
    z-index:10;
    text-align:center;

}

.count-title{

    color:#fff;
    font-size:40px;
    margin-bottom:60px;
    letter-spacing:2px;

}

/* Countdown */

.countdown{

    display:flex;
    justify-content:center;
    gap:35px;
    flex-wrap:wrap;

}

/* Circle */

.circle{

    text-align:center;

    animation:float 4s infinite ease-in-out;

}

.circle:nth-child(2){animation-delay:.3s;}
.circle:nth-child(3){animation-delay:.6s;}
.circle:nth-child(4){animation-delay:.9s;}

.circle-box{

  width:60px;
height:60px;


    border-radius:50%;

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

    position:relative;

    background:#fff;

    box-shadow:
    0 0 30px rgba(255,255,255,.15),
    inset 0 0 25px rgba(0,0,0,.08);

    transition:.4s;

}

.circle-box::before{

    content:"";

    position:absolute;

 width:60px;
height:60px;

    border-radius:50%;

    border:5px solid transparent;

    border-top-color:#00E5FF;
    border-right-color:#FFD54F;

    animation:spin 5s linear infinite;

}

.circle-box:hover{

    transform:scale(1.1);

    box-shadow:
    0 0 40px #00E5FF,
    0 0 80px #00E5FF;

}

.circle-box span{

    font-size:35px;
    font-weight:700;
    color:#0D47A1;

}

.circle h5{

    margin-top:15px;
    color: #FFFFFF;
    font-size:15px;
    text-transform:uppercase;
    letter-spacing:2px;

}

/* Animation */

@keyframes spin{

100%{

transform:rotate(360deg);

}

}

@keyframes rotate{

100%{

transform:rotate(360deg);

}

}

@keyframes rotateReverse{

100%{

transform:rotate(-360deg);

}

}

@keyframes float{

0%,100%{

transform:translateY(0);

}

50%{

transform:translateY(-12px);

}

}

/* Mobile */

@media(max-width:768px){

.count-title{

font-size:28px;

}

.circle-box{

width:60px;
height:60px;


}

.circle-box::before{

width:60px;
height:60px;
}

.circle-box span{

font-size:25px;

}

}