/*======================================
            CONTAINER
======================================*/

.container{

    width:90%;

    max-width:1200px;

    margin:0 auto;

}

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

section{

    padding:100px 0;

}

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

.section-title{

    text-align:center;

    margin-bottom:60px;

}

.section-title h2{

    font-size:40px;

    margin-bottom:15px;

}

.section-title p{

    max-width:650px;

    margin:0 auto;

    color:var(--text-secondary);

}

/*======================================
            GRID LAYOUT
======================================*/

.skills-grid,
.services-grid,
.projects-grid{

    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:30px;

}

/*======================================
            FLEX LAYOUT
======================================*/

.hero,

.about-container,

.contact-wrapper,

.footer-container,

.nav-container{

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:50px;

}

/*======================================
            UTILITY
======================================*/

.text-center{

    text-align:center;

}

.w-100{

    width:100%;

}

.hidden{

    display:none;

}