/*==========================================================
Project     : Maxatom Systems Website
File        : style.css
Description : Website Components
==========================================================*/


/*==========================================================
Navigation
==========================================================*/

.mx-navbar{

    width:100%;

    position:fixed;

    top:0;

    left:0;

    z-index:1000;

    background:rgba(7,17,31,.90);

    backdrop-filter:blur(18px);

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

}


.mx-navbar .mx-container{

    display:flex;

    justify-content:space-between;

    align-items:center;

    height:80px;

}


.mx-logo img{

    height:55px;

}


.mx-menu{

    display:flex;

    gap:40px;

    align-items:center;

}


.mx-menu li a{

    color:var(--mx-text);

    font-size:15px;

    font-weight:500;

    transition:var(--mx-transition);

}


.mx-menu li a:hover{

    color:var(--mx-accent);

}


/*==========================================================
Hero
==========================================================*/

.mx-hero{

    min-height:100vh;
    display:flex;
    align-items:center;
    justify-content:center;
    text-align:center;
}


.mx-hero-content{
    max-width:900px;
    margin:auto;
}


.mx-hero-logo{

    width:170px;
    margin:auto;
    margin-bottom:35px;
}


.mx-hero h1{

    font-size:62px;
    letter-spacing:4px;
    margin-bottom:20px;

}


.mx-hero h2{

    font-size:34px;
    color:var(--mx-accent);
    margin-bottom:30px;
    font-weight:600;

}


.mx-hero p{

    font-size:20px;
    max-width:700px;
    margin:auto;
    margin-bottom:45px;
    color:var(--mx-text);

}

/*==========================================================
Card
==========================================================*/

.mx-service-grid{

    display:grid;
    grid-template-columns:repeat(2, minmax(420px, 1fr));
    gap:40px;
    justify-content:center;
    align-items:start;
    margin-top:50px;

}
.mx-card{

    width:calc(100% - 20px);
    margin:10px;

}

/*==========================================================
Buttons
==========================================================*/

.mx-buttons{

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

}


.mx-btn-primary{

    padding:16px 38px;
    border-radius:50px;
    background:var(--mx-primary);
    color:#fff;
    font-weight:600;
    transition:var(--mx-transition);

}


.mx-btn-primary:hover{

    background:var(--mx-primary-hover);
    transform:translateY(-3px);

}


.mx-btn-secondary{

    padding:16px 38px;
    border-radius:50px;
    border:2px solid var(--mx-accent);
    color:var(--mx-accent);
    font-weight:600;
    transition:var(--mx-transition);

}


.mx-btn-secondary:hover{

    background:var(--mx-accent);
    color:#07111F;

}


/*==========================================================
Placeholder Sections
==========================================================*/

.mx-about-preview,
.mx-services,
.mx-products,
.mx-technologies,
.mx-contact{

    min-height:500px;

}


/*==========================================================
Footer
==========================================================*/

.mx-footer{

    padding:50px;
    border-top:1px solid var(--mx-border);
    text-align:center;

}