/* =======================================================
VIBRATIX V2
RESPONSIVE.CSS
======================================================= */

/* =======================================================
LAPTOP
======================================================= */

@media (max-width:1200px){


.architecture-stage{

    min-height:600px;

}


}

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

@media (max-width:992px){


.hero-description{

    max-width:700px;

}

.section-header{

    margin-bottom:4rem;

}

.timeline{

    gap:1.5rem;

}


}

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

@media (max-width:768px){


/* HEADER */

.navbar{

    min-height:70px;

}

.logo-main{

    letter-spacing:4px;

}

/* HERO */

#hero{

    min-height:90vh;

}

.hero-content{

    width:100%;

}

.hero-description{

    font-size:1rem;

}

/* CARDS */

.glass-card{

    padding:2rem;

}

/* ARCHITECTURE */

.architecture-stage{

    min-height:450px;

}

#orbital-system{

    width:95vw;

    height:95vw;

}

/* FORM */

.access-form{

    padding:2rem;

}


}

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

@media (max-width:576px){


/* CONTAINER */

.container{

    width:94%;

}

/* HERO */

.hero-tag{

    font-size:.7rem;

    letter-spacing:1px;

    padding:
    .65rem
    1rem;

}

.hero-description{

    line-height:1.8;

}

/* SECTIONS */

section{

    padding:
    5rem
    0;

}

.section-tag{

    font-size:.7rem;

    padding:
    .65rem
    1rem;

}

/* TIMELINE */

.timeline-item{

    padding:1.5rem;

}

.timeline-item span{

    font-size:1.5rem;

}

/* FOOTER */

footer{

    padding:
    2rem
    0;

}


}

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

@media (max-width:420px){


.hero-actions{

    width:100%;

}

.hero-actions a{

    width:100%;

}

.glass-card{

    padding:1.5rem;

}

.access-form{

    padding:1.5rem;

}


}

/* =======================================================
ULTRAWIDE
======================================================= */

@media (min-width:1800px){


.container{

    width:min(
        1600px,
        90%
    );

}


}