.nav-bar{
   
    display:flex;
    flex-direction: row;
    flex-wrap: wrap;
    position: sticky;
    top:0px;justify-content: space-around;align-items: center;
    background-color: #00AEEF;
    color:white;
    height:68px;padding: 10px;width:100%;
    font-family:Arial, Helvetica, sans-serif;font-size: 28px;letter-spacing: 2px;
    
}
nav{
    position:sticky;top:0;z-index: 1000;
}
.nav-bar img{
    height:auto;width:50px;border-radius: 50%;
}

html,body{
    margin:0;padding:0;background-color: #00AEEF;
}

html{
    scroll-behavior: smooth;
}
section{
    scroll-margin-top:68px;
}

.nav-bar .a a{
    text-decoration: none;
    color:white;
    transition: all 0.3s ease;
    display: inline-block;
    
}

.nav-bar .a a:hover{
      background-color: #0A0F24; /* dark contrast */
  color: #00FFFF; 
    transform:translateY(-2px);
    border-radius: 32px;
    
}


.hero{
    display:grid;grid-template-columns: repeat(2,50%);gap:20px;
    height:auto;background-color: #00AEEF;color:white;font-size: 3rem;
    letter-spacing: 2px;


}
.hero .writings{
    display:flex;flex-direction: column;flex-wrap: wrap;justify-content: space-between;
    align-items: center;padding:10px;
    max-width: 550px;
}
.hero .image img{
    width:510px;display:block;height:auto;border-radius: 15px;
}
.hero .image{
    width:100%;padding:20px;border-radius: 15px;box-shadow: 0 20px 50px rgba(0,0,0,.25);
}
.hero .writings a{
    text-decoration: none;color:white;display: inline-block;
    transition:all 0.2s ease;background-color: white;color: #00AEEF;
    border-radius: 20px;padding:10px;font-size: 15px;
}
.hero .writings a:hover{
    background-color:#00AEEF;transform: scale(1.1);color:white;
}
.show{animation:fadein 3s linear  forwards;}

@keyframes fadein{
    from{
        opacity:0;
    }
    to{
        opacity:1;
    }
}




.hero .writings .button{
    display: flex;
    justify-content: flex-start;
    gap: 20px;
    margin-top: 30px;
}
.hero .writings .pill{
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 10px 20px;
    border-radius: 999px;
    background: rgba(255,255,255,0.18);
    backdrop-filter: blur(5px);
}


.stats{
    display:flex;flex-direction: row;justify-content: space-evenly;align-items: center;
    padding:10px;gap:10px;   
    color: #1f2937;font-weight: bold;width:100%;
    font-size: 50px;height: fit-content;margin-top:55px;margin-bottom: 65px;
}
.stats .cards{
    background: rgba(255,255,255,0.18);
    backdrop-filter: blur(5px);border-radius: 20px;
    transition:transform 0.2s linear;justify-self: center;
    height: 200px;display: flex;flex-direction: column;justify-content: center;
    align-items: center;
    padding: 18px;
}

.stats .cards:hover{
    transform: translateY(-4px);
}

.hidden
 {
    opacity: 0;
    transform: translate(-100%);   /* move left */
    transition: all 800ms ease;
}

.visible {
    opacity: 1;
    transform: translate(0);       /* back to normal */
}

.features{
    display:grid;grid-template-columns: repeat(3,1fr);gap:20px;
    
    justify-items: center;
    align-items: center;font-size:30px ;font-weight: bold;margin-top: 40px;
}
.features .fea-card{
    border-radius: 20px;margin:20px;background: rgba(255,255,255,0.18);
    backdrop-filter: blur(5px);height:200px;width:300px;justify-self: center;
    align-self:center;transition: transform 0.2s linear;align-items: center;
    justify-content: center;display:flex;padding:15px;
}
.features .fea-card:hover{
    transform:translateY(-4px);
}

.steps{
    display:grid;grid-template-columns: 1fr 1fr;
    gap:10px;
}
.steps .steps-text{
    display:flex;flex-direction: column;align-items: center;justify-content: center;
    background: rgba(255,255,255,0.18);backdrop-filter: blur(5px);border-radius: 20px;
    font-size:35px ;color:white;height:200px;width:200px;align-content: center;gap:20px;
    margin:15px;padding-left: 20px;animation:bounce 4s  0.5s infinite forwards ;
}

.steps .steps-image img{
    height:300px;width:300px;border-radius:20px;margin:15px;animation:bounce 4s  0.5s infinite forwards ;
}

.slide-left{
     opacity: 0;
    transform: translate(-100%);   /* move left */
    transition: all 800ms ease;
}
.slide-right{
    opacity: 0;
    transform: translate(-100%);   /* move left */
    transition: all 800ms ease;

}
.slide-show{
    opacity:1;transform: translate(0);
}

@keyframes bounce{
    0%{
        transform: translateY(0);
    }
    30%{
        transform:translateY(-5px)
    }
    60%{
        transform: translateY(5px);
    }
    100%{
        transform: translateY(0);
    }
}

.testimonial{
    display:none;
}
.testimonial.active{
    display:block;
    text-align: center;margin:40px;color:white;
    font-size: 35px;border-radius: 20px;background: rgba(255,255,255,0.18);backdrop-filter: blur(5px);
    width:fit-content;padding:7px;
}

.before-footer a{
    text-decoration: none;color:white;display: inline-block;
    transition:all 0.2s ease;background-color: white;color: #00AEEF;
    border-radius: 20px;padding:10px;font-size: 15px;transition:transform 0.3s;
}
.before-footer{
    color:white;margin:40px;font-size: 50px;letter-spacing: 3px;

    
}

.before-footer a:hover{
    transform: scale(1.1);background-color: #00AEEF ;color: white;
}

.container{
    display:flex;justify-content: space-evenly;gap:10px;
    font-size: 20px;color:white;
    margin-top:50px;background-color: #0F172A;width:100%;
    padding:60px 20px;width:100%;margin-bottom: 0;position: relative;
    top:80px;
    

}
.container .col{
    display:flex;flex-direction: column;flex-wrap: wrap;
    justify-content: space-between;height:300px;
}