/*
|---------------------------------------------------------
| Main Layout                                      1284PX
|---------------------------------------------------------
|
*/

html, body {
    margin: 0;
    padding: 0;
    height: 100%;
}

.body-class {
    display: flex;
    min-width: 320px;
    flex-direction: column;
}

.global-wrapper {
    flex: 1 0 auto;
}

.main-footer {
    flex-shrink: 0;
    padding-bottom: 100px;
}

/*
|---------------------------------------------------------
| Global Styles                                    1284PX
|---------------------------------------------------------
|
*/

.wrapper-full {
    width: 100%;
    margin: 0 auto;
}

.col-full, .col-1 {
    width: 96%;
    max-width: 1284px;
    margin: 0 auto;
}

.col-full-rs-568,
.col-full-rs-396 {
    width: 100%;
    margin: 0 auto;
}

.grid-layout {
    display: grid;
    gap: 36px 2.80%;
}

.margin-top-60 { margin-top: 60px; }
.margin-top-120 { margin-top: 120px; }

.col-2 { grid-template-columns: repeat(2, 1fr);  }
.col-3 { grid-template-columns: repeat(3, 1fr);  }
.col-4 { grid-template-columns: repeat(4, 1fr);  }
.col-6 { grid-template-columns: repeat(6, 1fr);  }

.section-standard {
    padding: 120px 0;
}

.section-last {
    padding: 120px 0 200px;
}

.color-white { color: #fff; }
.color-black { color: #000; }
.color-black-light { color: #3B322D; }
.color-warm-light { color: #FAF3DF; }
.color-main-theme { color: #EF8D4E; }
.color-dark-light { color: #9F9088 }
.color-bg-title { color: #1C1310; }

.bg-color-main { background-color: #070605; }
.bg-color-regular { background-color: #F5EEE4; }
.bg-color-light { background-color: #FAF6ED; }
.bg-color-dark { background-color: #150D0A; }

.fnt-size-12 { font-size: 12px; }
.fnt-size-14 { font-size: 14px; }
.fnt-size-18 { font-size: 18px; }
.fnt-size-20 { font-size: 20px; }
.fnt-size-24 { font-size: 24px; }
.fnt-size-28 { font-size: 28px; }
.fnt-size-32 { font-size: 32px; }

.txt-uppercase { text-transform: uppercase; }

.txt-case-on {
    text-transform: uppercase;
    font-feature-settings: "case" on;
}

.txt-no-deco, .txt-line-hover { text-decoration: none; }
.txt-line-hover:hover { text-decoration: underline; }

.btn-wrapper { 
    margin-top: 60px;
    text-align: center;
 }

.btn-main {
    padding: 10px;
    font-size: 20px;
    color: #fff;
    border-radius: 6px;
    display: inline-block;
    text-decoration: none;
    background-color: #EF8D4E;
    transition: background-color 0.2s linear;
}

.btn-main:hover, .ff-btn-submit:hover {
    background-color: #ec803d;
}

.section-title-div {
    text-align: center;
    max-width: 624px;
    width: 100%;
    margin: 0 auto 40px;
}

.section-title-span { font-size: 32px; }
.section-title-h2 { font-size: 18px; }

.section-line { 
    height: 1px;
    margin: 30px 0;
    background-color: #E3D6C9; 
}

.section-line-dark { 
    height: 1px;
    margin: 30px 0;
    background-color: #53443B; 
}

.img-scale { transition: transform .2s; }
.img-scale:hover { transform: scale(1.1); }

.section-bg-title {
    position: absolute;
    left: -10px;
    top: 0;
    font-size: 256px;
    z-index: 1;
}

/*
|---------------------------------------------------------
| Editor Styles                              1284PX
|---------------------------------------------------------
|
*/

.editor-styles h1 { font-size: 32px; }
.editor-styles h2 { font-size: 28px; }
.editor-styles h3 { font-size: 24px; }
.editor-styles h4 { font-size: 20px; }

/*
|---------------------------------------------------------
| Pagination Styles                                1284PX
|---------------------------------------------------------
|
*/

.pagination-container {
    display: flex;
    justify-content: center;
    align-items: center;
}

.pagination-ui {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
}

.page-numbers {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 12px 18px;
    box-sizing: border-box;
    border-radius: 6px;
    border: 1px solid #E3D6C9;
}

a.page-numbers {
    text-decoration: none;
    color: #312822;
}

.pagination-ui .page-numbers:hover {
    background-color: #E3D6C9;
}

.page-numbers.current {
    background-color: #E3D6C9;
}