/*==================================================
TABLET
==================================================*/

@media (max-width:992px){

.container{

    width:92%;

}

/* Header */
@media (max-width:992px){

header .container{

    height:70px;

    display:flex;

    align-items:center;

    justify-content:space-between;

}

.logo{

    flex:1;

    min-width:0;

}

.logo a{

    display:flex;

    align-items:center;

    gap:10px;

}

.logo img{

    width:50px;

    height:auto;

    flex-shrink:0;

}

.logo span{

    font-size:22px;

    white-space:nowrap;

}

.btn-header{

    display:none;

}



}

/* Hero */

.hero{

    min-height:auto;

    padding-top:130px;

    padding-bottom:80px;

}

.hero-container{

    grid-template-columns:1fr;

    gap:50px;

    text-align:center;

}

.hero-buttons{

    justify-content:center;

}

.hero-stats{

    justify-content:center;

}

.hero-right{

    order:-1;

}

.hero h1{

    font-size:52px;

}
.timeline{
	grid-template-columns: repeat(3, 1fr);
	
	gap:20px;
}
.timeline-item {
    position: relative;
     padding: 15px; 
    border-radius: 28px;
    backdrop-filter: blur(16px);
    background: rgba(255,255,255,.05);
    border: 1px solid rgba(255,255,255,.08);
    transition: .4s;
}
}

/*==================================================
MOBILE
==================================================*/

@media (max-width:768px){
nav ul{

    display:flex;

    list-style:none;

    gap:8px;
	
	flex-wrap:wrap;

}
.container{

    width:94%;

}

/* Header */

header .container{

    height:70px;

}

.logo span{

    font-size:24px;

}

.logo img{

    width:55px;

    height:auto;

}

.menu-toggle{

    display:flex;

}

header nav{

    display:none;

}

/* Hero */

.hero{

    padding-top:110px;

    padding-bottom:60px;

}

.hero-container{

    grid-template-columns:1fr;

    gap:40px;

}

.hero h1{

    font-size:38px;

    line-height:1.3;

}

.hero p{

    font-size:16px;

}

.hero-buttons{

    flex-direction:column;

    gap:15px;

}

.hero-buttons a{

    width:100%;

    text-align:center;

}

.hero-stats{

    justify-content:space-between;

    gap:15px;

}

.hero-stats h3{

    font-size:28px;

}

.hero-right img{

    max-width:420px;

    margin:auto;

    display:block;

}
.timeline{
	grid-template-columns: repeat(3, 1fr);
	
	gap:20px;
}
.timeline-item {
    position: relative;
     padding: 10px; 
    border-radius: 28px;
    backdrop-filter: blur(16px);
    background: rgba(255,255,255,.05);
    border: 1px solid rgba(255,255,255,.08);
    transition: .4s;
}

/*==========================================
SERVICES
==========================================*/



.services{

    padding:70px 0;

}

.service-grid{

    grid-template-columns:1fr;

    gap:25px;

}

.service-card{

    padding:30px 25px;

}

.service-card h3{

    font-size:22px;

}

.service-card p{

    font-size:15px;

    line-height:1.7;

}

.menu-toggle{

        display:flex;

        align-items:center;

        justify-content:center;

        width:45px;

        height:45px;

        border:none;

        background:none;

        font-size:30px;

        cursor:pointer;

    }


}


/*==================================================
SMALL MOBILE
==================================================*/

@media (max-width:576px){

.hero h1{

    font-size:32px;

}

.hero p{

    font-size:15px;

}

.hero-stats{

    flex-direction:column;

    align-items:center;

    gap:20px;

}

.badge{

    font-size:14px;

}

.btn-primary,

.btn-secondary{

    padding:16px 20px;

}
.timeline{
	grid-template-columns: repeat(1, 1fr);
	
	gap:20px;
}
.timeline-item {
    position: relative;
     padding: 20px; 
    border-radius: 28px;
    backdrop-filter: blur(16px);
    background: rgba(255,255,255,.05);
    border: 1px solid rgba(255,255,255,.08);
    transition: .4s;
}
}

.active{
	
	display:block;
}