/*==================================================
  ICIST-2026 Conference Website
  Premium Glassmorphism CSS
  Part-1
===================================================*/

/*================ GOOGLE FONT =================*/

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

/*================ CSS VARIABLES =================*/

:root{


/*================ RESET =================*/

*{



}

html{

scroll-behavior:smooth;

}

body{



}

/*================ SCROLLBAR =================*/

::-webkit-scrollbar{



}

::-webkit-scrollbar-track{


}

::-webkit-scrollbar-thumb{



}

::-webkit-scrollbar-thumb:hover{

}

/*================ SELECTION =================*/

:selection{

background:
linear-gradient(
-45deg,
#06152e,
#0f172a,
#16213e,
#1f2937);

}

/*================ BACKGROUND =================*/

body::before{

content:"";

position:fixed;

left:0;
top:0;

width:100%;
height:100%;





animation:gradientMove 15s infinite;

z-index:-3;

}

/*================ AURORA =================*/

body::after{

content:"";

position:fixed;

width:600px;
height:600px;

background:#06B6D4;

filter:blur(180px);

opacity:.18;

border-radius:50%;

left:-150px;

top:-120px;

animation:aurora 12s infinite alternate;

z-index:-2;

}

/*================ FLOATING CIRCLES =================*/

.circles{

position:fixed;

width:100%;
height:100%;

left:0;
top:0;

overflow:hidden;

pointer-events:none;

z-index:-1;

}

.circles span{

position:absolute;

display:block;

border-radius:50%;

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

backdrop-filter:blur(8px);

animation:float 18s linear infinite;

bottom:-200px;

}

/* Individual Circles */

.circles span:nth-child(1){

left:5%;

width:70px;
height:70px;

animation-duration:15s;

}

.circles span:nth-child(2){

left:18%;

width:120px;
height:120px;

animation-duration:20s;

animation-delay:2s;

}

.circles span:nth-child(3){

left:38%;

width:55px;
height:55px;

animation-duration:13s;

}

.circles span:nth-child(4){

left:60%;

width:180px;
height:180px;

animation-duration:26s;

}

.circles span:nth-child(5){

left:78%;

width:90px;
height:90px;

animation-duration:19s;

}

.circles span:nth-child(6){

left:90%;

width:140px;
height:140px;

animation-duration:24s;

}

.circles span:nth-child(7){

left:45%;

width:45px;
height:45px;

animation-duration:12s;

}

.circles span:nth-child(8){

left:70%;

width:65px;
height:65px;

animation-duration:17s;

}

/*================ GLASS =================*/

.glass-card{

background:var(--glass);

border:1px solid var(--border);

backdrop-filter:blur(20px);

border-radius:var(--radius);

padding:40px;

box-shadow:var(--shadow);

transition:var(--transition);

position:relative;

overflow:hidden;

}

.glass-card:hover{

transform:translateY(-8px);

box-shadow:

0 25px 60px rgba(0,0,0,.4);

}

/*================ NAVBAR =================*/

.navbar{

padding:18px 0;

transition:.4s;

background:transparent;

}

.navbar.scrolled{

background:rgba(8,18,40,.85);

backdrop-filter:blur(20px);

box-shadow:

0 8px 25px rgba(0,0,0,.25);

}

.navbar-brand{

font-size:34px;

font-weight:700;

color:#fff!important;

letter-spacing:2px;

}

.navbar-brand span{

color:#06B6D4;

}

.nav-link{

color:#fff!important;

margin-left:25px;

font-weight:500;

position:relative;

transition:.3s;

}

.nav-link:hover{

color:#06B6D4!important;

}

.nav-link::after{

content:"";

position:absolute;

left:0;

bottom:-6px;

width:0;

height:2px;

background:#06B6D4;

transition:.4s;

}

.nav-link:hover::after{

width:100%;

}

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

.btn-register{

background:var(--gradient);

color:#fff;

padding:12px 28px;

border-radius:40px;

font-weight:600;

transition:.4s;

box-shadow:0 0 25px rgba(37,99,235,.4);

}

.btn-register:hover{

transform:translateY(-3px);

box-shadow:

0 10px 35px rgba(37,99,235,.6);

color:#fff;

}

/*================ HERO =================*/

.hero{

min-height:100vh;

display:flex;

align-items:center;

padding-top:120px;

position:relative;

}

.hero h4{

color:#06B6D4;

font-weight:600;

margin-bottom:15px;

}

.hero h1{

font-size:70px;

font-weight:800;

line-height:1.1;

margin-bottom:20px;

background:linear-gradient(
90deg,
#ffffff,
#06B6D4,
#8B5CF6);

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

}

.hero h3{

font-size:32px;

font-weight:500;

margin-bottom:20px;

}

.hero p{

font-size:18px;

color:#d5d5d5;

line-height:32px;

}

/*=====================================
        HERO BUTTONS
======================================*/

.hero-buttons{
    margin-top:35px;
    display:flex;
    gap:20px;
    flex-wrap:wrap;
}

.btn-main{

    display:inline-block;
    padding:15px 38px;
    border-radius:50px;

    background:linear-gradient(135deg,#2563EB,#06B6D4);

    color:#fff;

    text-decoration:none;

    font-weight:600;

    transition:.4s;

    box-shadow:0 10px 30px rgba(37,99,235,.35);

}

.btn-main:hover{

transform:translateY(-6px);

box-shadow:0 20px 40px rgba(37,99,235,.5);

color:#fff;

}

.btn-outline{

display:inline-block;

padding:15px 38px;

border-radius:50px;

border:2px solid #06B6D4;

color:#fff;

text-decoration:none;

transition:.4s;

}

.btn-outline:hover{

background:#06B6D4;

color:#fff;

transform:translateY(-6px);

}

/*=====================================
        HERO IMAGE
======================================*/

.hero-image{

text-align:center;

animation:floatHero 5s ease-in-out infinite;

}

.hero-image img{

width:100%;

max-width:520px;

filter:drop-shadow(0 20px 40px rgba(0,0,0,.45));

}

/*=====================================
      COUNTDOWN SECTION
======================================*/

.countdown{


}

.circle{


}

.circle:hover{

transform:translateY(-8px);

box-shadow:0 25px 45px rgba(6,182,212,.45);

}

.circle::before{


);

animation:spin 5s linear infinite;

}

.circle::after{



}

.circle span{



}

.circle small{


}

/*=====================================
        ABOUT SECTION
======================================*/

.about{


}

.about-image{

position:relative;

}

.about-image img{

border-radius:25px;

width:100%;

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

}

.about-content h2{

font-size:48px;

margin-bottom:25px;

font-weight:700;

}

.about-content p{

font-size:18px;

line-height:32px;

color:#d7d7d7;

}

.about-list{

margin-top:30px;

}

.about-list li{

list-style:none;

margin-bottom:15px;

font-size:18px;

}

.about-list li i{

color:#06B6D4;

margin-right:12px;

}

/*=====================================
      THEME CARDS
======================================*/

.theme-card{

padding:40px 30px;

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

border-radius:25px;

backdrop-filter:blur(15px);

transition:.45s;

text-align:center;

height:100%;

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

}

.theme-card:hover{

transform:translateY(-12px);

box-shadow:0 20px 45px rgba(6,182,212,.35);

border-color:#06B6D4;

}

.theme-card i{

font-size:55px;

color:#06B6D4;

margin-bottom:20px;

transition:.4s;

}

.theme-card:hover i{

transform:rotateY(360deg);

color:#8B5CF6;

}

.theme-card h4{

font-size:24px;

margin-bottom:15px;

}

.theme-card p{

font-size:16px;

color:#cfcfcf;

}

/*=====================================
       MOUSE GLOW
======================================*/

.cursor-glow{

position:fixed;

width:220px;

height:220px;

border-radius:50%;

pointer-events:none;

background:radial-gradient(

rgba(6,182,212,.28),

transparent 70%

);

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

z-index:999;

mix-blend-mode:screen;

}

/*=====================================
       RIPPLE EFFECT
======================================*/

.ripple{

position:absolute;

border-radius:50%;

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

transform:scale(0);

animation:ripple .7s linear;

pointer-events:none;

}

/*=====================================
     HOVER EFFECTS
======================================*/

.zoom{

transition:.4s;

}

.zoom:hover{

transform:scale(1.08);

}

.shadow-hover{

transition:.4s;

}

.shadow-hover:hover{

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

}

.glow-hover{

transition:.4s;

}

.glow-hover:hover{

box-shadow:0 0 35px rgba(6,182,212,.5);

}

/*=====================================
      KEYFRAMES
======================================*/

@keyframes spin{

100%{

transform:rotate(360deg);

}

}

@keyframes floatHero{

0%,100%{

transform:translateY(0);

}

50%{

transform:translateY(-18px);

}

}

@keyframes ripple{

to{

transform:scale(4);

opacity:0;

}

}
/*=====================================
        SECTION TITLE
======================================*/

.section{
    padding:100px 0;
    position:relative;
}

.section-title{
    text-align:center;
    margin-bottom:70px;
}

.section-title h2{
    font-size:48px;
    font-weight:700;
    margin-bottom:15px;
    background:linear-gradient(90deg,#ffffff,#06B6D4,#8B5CF6);
    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
}

.section-title p{
    color:#cfd8dc;
    max-width:700px;
    margin:auto;
}

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

.speaker-card{

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

    border-radius:25px;

    overflow:hidden;

    text-align:center;

    transition:.45s;

    backdrop-filter:blur(15px);

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

}

.speaker-card:hover{

transform:translateY(-12px);

box-shadow:0 25px 50px rgba(6,182,212,.35);

}

.speaker-card img{

width:170px;

height:170px;

border-radius:50%;

object-fit:cover;

margin:35px auto 20px;

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

transition:.4s;

}

.speaker-card:hover img{

transform:scale(1.08);

border-color:#06B6D4;

}

.speaker-card h4{

font-size:24px;

margin-bottom:8px;

}

.speaker-card span{

color:#06B6D4;

display:block;

margin-bottom:20px;

}

.social-icons{

display:flex;

justify-content:center;

gap:15px;

padding-bottom:30px;

}

.social-icons a{

width:42px;

height:42px;

border-radius:50%;

display:flex;

justify-content:center;

align-items:center;

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

color:#fff;

transition:.35s;

}

.social-icons a:hover{

background:#06B6D4;

transform:translateY(-5px);

}

/*=====================================
      STATISTICS
======================================*/

.counter-box{

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

padding:45px 20px;

border-radius:20px;

text-align:center;

transition:.4s;

}

.counter-box:hover{

transform:translateY(-10px);

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

}

.counter-box h2{

font-size:55px;

font-weight:700;

color:#06B6D4;

margin-bottom:10px;

}

.counter-box p{

font-size:18px;

}

/*=====================================
        TIMELINE
======================================*/

.timeline{

position:relative;

padding-left:40px;

}

.timeline::before{

content:"";

position:absolute;

left:8px;

top:0;

width:4px;

height:100%;

background:#06B6D4;

}

.timeline-item{

position:relative;

margin-bottom:50px;

padding-left:35px;

}

.timeline-item::before{

content:"";

position:absolute;

left:-3px;

top:6px;

width:20px;

height:20px;

border-radius:50%;

background:#8B5CF6;

box-shadow:0 0 20px rgba(139,92,246,.5);

}

.timeline-item h5{

font-size:22px;

margin-bottom:10px;

}

.timeline-item p{

color:#d0d0d0;

line-height:28px;

}

/*=====================================
        GALLERY
======================================*/

.gallery-item{

overflow:hidden;

border-radius:20px;

position:relative;

}

.gallery-item img{

width:100%;

display:block;

transition:.5s;

}

.gallery-item:hover img{

transform:scale(1.15);

}

.gallery-overlay{

position:absolute;

inset:0;

background:rgba(0,0,0,.55);

display:flex;

justify-content:center;

align-items:center;

opacity:0;

transition:.4s;

}

.gallery-item:hover .gallery-overlay{

opacity:1;

}

.gallery-overlay i{

font-size:34px;

color:#fff;

}

/*=====================================
       SPONSORS
======================================*/

.sponsor-card{

background:#fff;

padding:30px;

border-radius:20px;

display:flex;

justify-content:center;

align-items:center;

height:130px;

transition:.4s;

}

.sponsor-card:hover{

transform:translateY(-8px);

}

.sponsor-card img{

max-width:100%;

max-height:70px;

filter:grayscale(100%);

transition:.4s;

}

.sponsor-card:hover img{

filter:none;

}

/*=====================================
      TESTIMONIAL
======================================*/

.testimonial{

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

padding:35px;

border-radius:25px;

text-align:center;

transition:.4s;

}

.testimonial:hover{

transform:translateY(-10px);

}

.testimonial img{

width:90px;

height:90px;

border-radius:50%;

margin-bottom:20px;

}

.testimonial p{

font-style:italic;

line-height:30px;

color:#d5d5d5;

}

.testimonial h5{

margin-top:20px;

margin-bottom:5px;

}

.stars{

color:#FFD54F;

margin-top:10px;

}

/*=====================================
     EXTRA EFFECTS
======================================*/

.gradient-border{

position:relative;

}

.gradient-border::before{

content:"";

position:absolute;

inset:-2px;

background:linear-gradient(90deg,#2563EB,#06B6D4,#8B5CF6);

border-radius:inherit;

z-index:-1;

filter:blur(8px);

opacity:.7;

}

.text-gradient{

background:linear-gradient(90deg,#06B6D4,#8B5CF6,#ffffff);

-webkit-background-clip:text;

-webkit-text-fill-color:transparent;

}

.hover-lift{

transition:.4s;

}

.hover-lift:hover{

transform:translateY(-10px);

}

.fade-in{

animation:fadeIn 1s ease;

}

@keyframes fadeIn{

from{

opacity:0;

transform:translateY(40px);

}

to{

opacity:1;

transform:translateY(0);

}

}
/*====================================================
                CONTACT SECTION
=====================================================*/

.contact{
    padding:100px 0;
    position:relative;
}

.contact-card{

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

    backdrop-filter:blur(20px);

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

    border-radius:25px;

    padding:40px;

    transition:.4s;

}

.contact-card:hover{

    transform:translateY(-8px);

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

}

.contact-info{

    margin-bottom:30px;

}

.contact-info h3{

    margin-bottom:20px;

    font-size:30px;

    font-weight:700;

}

.contact-info p{

    color:#d7d7d7;

    margin-bottom:12px;

    line-height:28px;

}

.contact-info i{

    color:#06B6D4;

    width:35px;

    font-size:20px;

}

/*====================================================
                CONTACT FORM
=====================================================*/

.contact-form .form-control{

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

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

    color:#fff;

    border-radius:15px;

    padding:15px 20px;

    margin-bottom:20px;

    transition:.3s;

}

.contact-form .form-control::placeholder{

    color:#cfd8dc;

}

.contact-form .form-control:focus{

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

    border-color:#06B6D4;

    color:#fff;

    box-shadow:0 0 20px rgba(6,182,212,.35);

}

.contact-form textarea{

    min-height:180px;

    resize:none;

}

/*====================================================
                    GOOGLE MAP
=====================================================*/

.map-box{

    overflow:hidden;

    border-radius:25px;

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

    margin-top:40px;

    height:420px;

}

.map-box iframe{

    width:100%;

    height:100%;

    border:0;

}

/*====================================================
                    FOOTER
=====================================================*/

footer{

    padding:60px 0 30px;

    background:#08121d;

    border-top:1px solid rgba(255,255,255,.08);

}

.footer-logo{

    font-size:34px;

    font-weight:700;

    color:#fff;

}

.footer-logo span{

    color:#06B6D4;

}

.footer-links{

    list-style:none;

    padding:0;

}

.footer-links li{

    margin-bottom:12px;

}

.footer-links a{

    color:#d5d5d5;

    text-decoration:none;

    transition:.3s;

}

.footer-links a:hover{

    color:#06B6D4;

    padding-left:8px;

}

.footer-social{

    display:flex;

    gap:15px;

}

.footer-social a{

    width:45px;

    height:45px;

    border-radius:50%;

    display:flex;

    justify-content:center;

    align-items:center;

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

    color:#fff;

    transition:.3s;

}

.footer-social a:hover{

    background:#06B6D4;

    transform:translateY(-5px);

}

.copyright{

    margin-top:40px;

    border-top:1px solid rgba(255,255,255,.08);

    padding-top:20px;

    text-align:center;

    color:#bdbdbd;

}

/*====================================================
                BACK TO TOP
=====================================================*/

.back-top{

    position:fixed;

    right:30px;

    bottom:30px;

    width:55px;

    height:55px;

    border-radius:50%;

    background:linear-gradient(135deg,#2563EB,#06B6D4);

    color:#fff;

    display:flex;

    justify-content:center;

    align-items:center;

    cursor:pointer;

    opacity:0;

    visibility:hidden;

    transition:.4s;

    z-index:999;

}

.back-top.show{

    opacity:1;

    visibility:visible;

}

.back-top:hover{

    transform:translateY(-8px);

}

/*====================================================
                    DARK MODE
=====================================================*/

body.dark{

    background:#050b15;

}

body.dark .glass-card,

body.dark .theme-card,

body.dark .speaker-card,

body.dark .contact-card{

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

}

body.dark footer{

    background:#030811;

}

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

@media(max-width:1200px){

.hero h1{

font-size:58px;

}

}

@media(max-width:992px){

.hero{

text-align:center;

padding-top:140px;

}

.hero-image{

margin-top:50px;

}

.section-title h2{

font-size:40px;

}

.countdown{

justify-content:center;

}

}

@media(max-width:768px){

.hero h1{

font-size:44px;

}

.hero h3{

font-size:24px;

}

.section{

padding:80px 0;

}

.circle{

width:95px;

height:95px;

}

.circle span{

font-size:28px;

}

.section-title h2{

font-size:34px;

}

.contact-card{

padding:25px;

}

}

@media(max-width:576px){

.hero h1{

font-size:34px;

}

.hero-buttons{

flex-direction:column;

}

.btn-main,

.btn-outline{

width:100%;

text-align:center;

}

.circle{

width:80px;

height:80px;

}

.circle span{

font-size:22px;

}

.footer-social{

justify-content:center;

}

}

/*====================================================
                EXTRA KEYFRAMES
=====================================================*/

@keyframes gradientMove{

0%{

background-position:0% 50%;

}

50%{

background-position:100% 50%;

}

100%{

background-position:0% 50%;

}

}

@keyframes aurora{

0%{

transform:translate(0,0);

}

50%{

transform:translate(250px,150px);

}

100%{

transform:translate(-120px,250px);

}

}

@keyframes float{

0%{

transform:translateY(0) rotate(0);

opacity:0;

}

20%{

opacity:1;

}

100%{

transform:translateY(-1200px) rotate(720deg);

opacity:0;

}

}

@keyframes pulse{

0%{

transform:scale(1);

}

50%{

transform:scale(1.08);

}

100%{

transform:scale(1);

}

}

@keyframes glow{

0%{

box-shadow:0 0 10px rgba(6,182,212,.25);

}

50%{

box-shadow:0 0 35px rgba(6,182,212,.6);

}

100%{

box-shadow:0 0 10px rgba(6,182,212,.25);

}

}
/*==================================================
        ICIST-2026 Premium CSS
        Part 5 - Final Effects
===================================================*/

/*==============================
        LOADING SCREEN
===============================*/

#loader{

position:fixed;
top:0;
left:0;
width:100%;
height:100vh;

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

background:#07111f;

z-index:99999;

transition:.8s;

}

#loader.hide{

opacity:0;
visibility:hidden;

}

.loader-circle{

width:90px;
height:90px;

border-radius:50%;

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

border-top:6px solid #06B6D4;

animation:loaderSpin 1s linear infinite;

}

@keyframes loaderSpin{

100%{

transform:rotate(360deg);

}

}

/*==============================
      MOUSE SPOTLIGHT
===============================*/

.mouse-light{

position:fixed;

width:350px;
height:350px;

border-radius:50%;

pointer-events:none;

background:

radial-gradient(

rgba(6,182,212,.22),

transparent 70%

);

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

z-index:999;

mix-blend-mode:screen;

transition:.08s linear;

}

/*==============================
        RIPPLE EFFECT
===============================*/

.ripple{

position:absolute;

border-radius:50%;

transform:scale(0);

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

animation:ripple .6s linear;

pointer-events:none;

}

@keyframes ripple{

100%{

transform:scale(4);

opacity:0;

}

}

/*==============================
       CUSTOM CURSOR
===============================*/

.cursor{

position:fixed;

width:18px;
height:18px;

border-radius:50%;

background:#06B6D4;

pointer-events:none;

z-index:99999;

transition:.05s linear;

box-shadow:

0 0 25px #06B6D4;

}

.cursor-outline{

position:fixed;

width:42px;
height:42px;

border:2px solid #06B6D4;

border-radius:50%;

pointer-events:none;

transition:.15s linear;

z-index:99998;

}

/*==============================
        GLASS UTILITIES
===============================*/

.glass{

background:

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

backdrop-filter:blur(20px);

border:1px solid

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

}

.glass-dark{

background:

rgba(15,23,42,.55);

backdrop-filter:blur(20px);

}

/*==============================
      PREMIUM SHADOWS
===============================*/

.shadow-blue{

box-shadow:

0 15px 35px

rgba(37,99,235,.35);

}

.shadow-cyan{

box-shadow:

0 15px 35px

rgba(6,182,212,.35);

}

.shadow-purple{

box-shadow:

0 15px 35px

rgba(139,92,246,.35);

}

/*==============================
      HOVER EFFECTS
===============================*/

.hover-up{

transition:.4s;

}

.hover-up:hover{

transform:

translateY(-12px);

}

.hover-scale{

transition:.4s;

}

.hover-scale:hover{

transform:scale(1.05);

}

.hover-rotate{

transition:.5s;

}

.hover-rotate:hover{

transform:rotate(4deg);

}

/*==============================
       ICON ANIMATION
===============================*/

.icon-spin:hover{

animation:spinIcon .8s;

}

@keyframes spinIcon{

100%{

transform:rotate(360deg);

}

}

/*==============================
       FLOAT ANIMATION
===============================*/

.float{

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

}

@keyframes floating{

0%{

transform:translateY(0);

}

50%{

transform:translateY(-12px);

}

100%{

transform:translateY(0);

}

}

/*==============================
       PULSE GLOW
===============================*/

.pulse{

animation:pulseGlow 2s infinite;

}

@keyframes pulseGlow{

0%{

box-shadow:

0 0 0 rgba(6,182,212,.2);

}

50%{

box-shadow:

0 0 35px rgba(6,182,212,.6);

}

100%{

box-shadow:

0 0 0 rgba(6,182,212,.2);

}

}

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

.btn{

overflow:hidden;

position:relative;

}

.btn::before{

content:"";

position:absolute;

left:50%;

top:50%;

width:0;

height:0;

border-radius:50%;

background:

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

transition:.6s;

transform:

translate(-50%,-50%);

}

.btn:hover::before{

width:350px;

height:350px;

}

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

.badge-glow{

background:

linear-gradient(

135deg,

#2563EB,

#06B6D4);

color:#fff;

padding:8px 18px;

border-radius:50px;

font-weight:600;

animation:pulseGlow 2s infinite;

}

/*==============================
      IMAGE EFFECT
===============================*/

.img-hover{

overflow:hidden;

border-radius:20px;

}

.img-hover img{

transition:.6s;

}

.img-hover:hover img{

transform:scale(1.15);

}

/*==============================
     SECTION DIVIDER
===============================*/

.wave{

position:relative;

height:100px;

overflow:hidden;

}

.wave svg{

position:absolute;

bottom:0;

width:100%;

}

/*==============================
        UTILITIES
===============================*/

.text-gradient{

background:

linear-gradient(

90deg,

#06B6D4,

#8B5CF6,

#ffffff);

-webkit-background-clip:text;

-webkit-text-fill-color:transparent;

}

.rounded-xl{

border-radius:25px;

}

.rounded-circle-xl{

border-radius:50%;

}

.blur{

backdrop-filter:blur(20px);

}

.transition{

transition:.4s;

}

.z-top{

z-index:9999;

position:relative;

}

/*==============================
        SPACING
===============================*/

.py-120{

padding-top:120px;

padding-bottom:120px;

}

.mt-80{

margin-top:80px;

}

.mb-80{

margin-bottom:80px;

}

/*==============================
      FINAL ANIMATION
===============================*/

.fade-up{

opacity:0;

transform:

translateY(60px);

animation:fadeUp 1s forwards;

}

@keyframes fadeUp{

to{

opacity:1;

transform:

translateY(0);

}

}

/*==============================
      END OF FILE
===============================*/