/* ===================================================
   AXXIS TOPOGRAFIA
   LAYOUT SYSTEM
=================================================== */

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

.container{

    width:100%;
    max-width:1400px;

    margin:0 auto;

    padding-left:60px;
    padding-right:60px;

}

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

section{

    position:relative;
    width:100%;

}

.section{

    padding:120px 0;

}

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

.section-header{

    width:100%;
    max-width:680px;

    margin-bottom:70px;

}

.section-header.center{

    max-width:900px;

    margin:0 auto 70px;

    text-align:center;

}

/* ===================================================
   TAG
=================================================== */

.section-tag{

    display:inline-flex;

    flex-direction:column;

    align-items:flex-start;

    gap:14px;

    margin-bottom:22px;

    color:var(--gold);

    font-size:14px;

    font-weight:600;

    letter-spacing:4px;

    text-transform:uppercase;

}

.section-header.center .section-tag{

    align-items:center;

}

.section-tag::after{

    content:"";

    width:60px;

    height:2px;

    background:var(--gold);

}

/* ===================================================
   TITULO
=================================================== */

.section-header h2{

    color:#fff;

    font-size:clamp(56px,5vw,70px);

    line-height:1.08;

    margin-bottom:24px;

}

.section-header h2 span{

    color:var(--gold);

}

/* ===================================================
   DESCRIÇÃO
=================================================== */

.section-description{

    max-width:650px;

    font-size:18px;

    line-height:1.8;

    color:rgba(255,255,255,.78);

}

.section-header.center .section-description{

    margin:0 auto;

}

/* ===================================================
   BOTÕES
=================================================== */

.section-buttons{

    display:flex;

    gap:18px;

    margin-top:40px;

    flex-wrap:wrap;

}

/* ===================================================
   GRID SYSTEM
=================================================== */

.grid-2{

    display:grid;

    grid-template-columns:repeat(2,minmax(0,1fr));

    gap:35px;

}

.grid-3{

    display:grid;

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

    gap:35px;

}

.grid-4{

    display:grid;

    grid-template-columns:repeat(4,minmax(0,1fr));

    gap:28px;

}

/* ===================================================
   ESPAÇAMENTO ENTRE SEÇÕES
=================================================== */

section + section{

    margin-top:0;

}

/* ===================================================
   RESPONSIVO
=================================================== */

@media (max-width:1200px){

    .container{

        padding-left:50px;
        padding-right:50px;

    }

    .grid-4{

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

    }

}

@media (max-width:992px){

    .container{

        padding-left:35px;
        padding-right:35px;

    }

    .grid-2,
    .grid-3,
    .grid-4{

        grid-template-columns:1fr;

    }

    .section{

        padding:100px 0;

    }

}

@media (max-width:768px){

    .section{

        padding:80px 0;

    }

    .section-header{

        margin-bottom:50px;

    }

    .section-header h2{

        font-size:42px;

    }

    .section-description{

        font-size:17px;

    }

    .section-buttons{

        flex-direction:column;

    }

}