/* ==========================================================
   Section Layout
   ArianFile UI Kit
   Version: 1.0
========================================================== */


/* ==========================================================
   1. Section
========================================================== */

.af-section{
    position: relative;
    padding: 5rem 0;
}

.af-section-sm{
    padding: 3rem 0;
}

.af-section-lg{
    padding: 7rem 0;
}


/* ==========================================================
   2. Container
========================================================== */

.af-container{
    width:100%;
    max-width:var(--af-container);
    margin-inline:auto;
    padding-inline:1rem;
}

.af-container-fluid{
    width:100%;
    margin-inline:auto;
    padding-inline:1rem;
}


/* ==========================================================
   3. Section Header
========================================================== */

.af-section-header{
    margin-bottom:3rem;
}

.af-section-header:last-child{
    margin-bottom:0;
}


/* ==========================================================
   4. Section Title
========================================================== */

.af-section-title{
    margin:0;
    color:var(--af-heading);
    font-size:clamp(2rem,3vw,2.75rem);
    font-weight:700;
    line-height:1.3;
}


/* ==========================================================
   5. Section Subtitle
========================================================== */

.af-section-subtitle{
    max-width:760px;
    margin-top:1rem;
    color:var(--af-text);
    font-size:1.0625rem;
    line-height:1.9;
}


/* ==========================================================
   6. Text Alignment
========================================================== */

.af-text-center{
    text-align:center;
}

.af-text-right{
    text-align:right;
}

.af-text-left{
    text-align:left;
}


/* ==========================================================
   7. Width Modifiers
========================================================== */

.af-narrow{
    max-width:760px;
    margin-inline:auto;
}

.af-wide{
    max-width:1400px;
    margin-inline:auto;
}


/* ==========================================================
   Responsive
========================================================== */

@media (max-width:1024px){

    .af-section{
        padding:4rem 0;
    }

    .af-section-lg{
        padding:5rem 0;
    }

    .af-section-header{
        margin-bottom:2.5rem;
    }

}


@media (max-width:767px){

    .af-section{
        padding:3rem 0;
    }

    .af-section-sm{
        padding:2rem 0;
    }

    .af-section-lg{
        padding:4rem 0;
    }

    .af-container,
    .af-container-fluid{
        padding-inline:1rem;
    }

    .af-section-header{
        margin-bottom:2rem;
    }

    .af-section-title{
        font-size:clamp(1.6rem,6vw,2.1rem);
    }

    .af-section-subtitle{
        margin-top:.75rem;
        font-size:1rem;
    }

}