/* ============================================================
   CATEGORIES PAGE
============================================================ */

:root {

    --categories-red: #8d151d;

    --categories-red-dark: #6f0e14;

    --categories-gold: #c49754;

    --categories-cream: #fff9f3;

    --categories-cream-dark: #f7ede3;

    --categories-text: #342b28;

    --categories-muted: #746a65;

    --categories-border: #ead7c4;

}


/* ============================================================
   GENERAL
============================================================ */

.categories-main-page {

    width: 100%;

    float: left;

    position: relative;

    background-color: #fffdfb;

    overflow: hidden;

}


.categories-main-page *,
.categories-main-page *::before,
.categories-main-page *::after {

    box-sizing: border-box;

}


.categories-main-page-mirror {

    direction: rtl;

}



/* ============================================================
   HERO
============================================================ */

.categories-hero {

    width: 100%;

    height: 430px;

    position: relative;

    overflow: hidden;

    background-color: #321011;

}


.categories-hero-image {

    width: 100%;

    height: 100%;

    position: absolute;

    left: 0;

    top: 0;

    display: block;

    object-fit: cover;

    object-position: center;

}



/* ============================================================
   HERO OVERLAY
============================================================ */

.categories-hero-overlay {

    position: absolute;

    width: 100%;

    height: 100%;

    left: 0;

    top: 0;


    background:

        linear-gradient(

            90deg,

            rgba(37, 5, 7, 0.90) 0%,

            rgba(54, 6, 9, 0.70) 35%,

            rgba(31, 5, 7, 0.22) 68%,

            rgba(0, 0, 0, 0.05) 100%

        );

}


.categories-main-page-mirror
.categories-hero-overlay {

    background:

        linear-gradient(

            270deg,

            rgba(37, 5, 7, 0.90) 0%,

            rgba(54, 6, 9, 0.70) 35%,

            rgba(31, 5, 7, 0.22) 68%,

            rgba(0, 0, 0, 0.05) 100%

        );

}



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

.categories-hero-container {

    width: 1400px;

    height: 100%;

    margin-left: auto;

    margin-right: auto;

    position: relative;

    z-index: 2;

}



/* ============================================================
   HERO CONTENT
============================================================ */

.categories-hero-content {

    width: 620px;

    position: absolute;

    left: 20px;

    top: 57%;

    transform: translateY(-50%);

}


.categories-main-page-mirror
.categories-hero-content {

    left: auto;

    right: 20px;

    text-align: right;

}



/* ============================================================
   HERO SMALL TEXT
============================================================ */

.categories-hero-small {

    display: block;

    margin-bottom: 12px;

    color: #e5c493;

    font-size: 11px;

    font-weight: bold;

    letter-spacing: 5px;

}



/* ============================================================
   HERO TITLE
============================================================ */

.categories-hero h1 {

    margin: 0 0 16px;

    color: white;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: 55px;

    line-height: 1.08;

    font-weight: normal;

    overflow-wrap: break-word;

}



/* ============================================================
   HERO TEXT
============================================================ */

.categories-hero p {

    width: 535px;

    max-width: 100%;

    margin: 0;

    color:
        rgba(
            255,
            255,
            255,
            0.84
        );

    font-size: 16px;

    line-height: 1.6;

}



/* ============================================================
   CATEGORY AREA
============================================================ */

.categories-page {

    width: 100%;

    float: left;

    position: relative;

    padding:

        55px
        0
        75px;


    background:

        radial-gradient(

            circle at 90% 5%,

            #faeee2 0,

            transparent 330px

        ),

        #fffdfb;


    overflow: hidden;

}



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

.categories-container {

    width: 1400px;

    margin-left: auto;

    margin-right: auto;

    position: relative;

    z-index: 1;

}



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

.categories-section-heading {

    width: 760px;

    max-width: 100%;

    margin:

        0
        auto
        38px;


    text-align: center;

}


.categories-section-small {

    display: block;

    margin-bottom: 8px;

    color: #aa7841;

    font-size: 10px;

    font-weight: bold;

    letter-spacing: 4px;

}


.categories-section-heading h2 {

    margin:

        0
        0
        12px;


    color: var(--categories-red);

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: 39px;

    line-height: 1.15;

    font-weight: normal;

}


.categories-section-heading p {

    margin: 0;

    color: var(--categories-muted);

    font-size: 14px;

    line-height: 1.6;

}



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

.categories-grid {

    width: 100%;

    display: grid;

    grid-template-columns:

        repeat(
            2,
            minmax(0, 1fr)
        );


    gap: 30px;

}



/* ============================================================
   CATEGORY CARD
============================================================ */

.category-card {

    width: 100%;

    min-width: 0;

    position: relative;

    padding-bottom: 32px;

    overflow: hidden;

    background-color: white;

    border:

        1px solid
        var(--categories-border);


    border-radius: 16px;


    box-shadow:

        0 8px 28px
        rgba(
            85,
            55,
            35,
            0.07
        );


    transition:

        transform 0.3s ease,
        box-shadow 0.3s ease;

}


.category-card:hover {

    transform:

        translateY(-5px);


    box-shadow:

        0 16px 38px
        rgba(
            85,
            55,
            35,
            0.12
        );

}



/* ============================================================
   MAIN POSTER
============================================================ */

.category-poster {

    width: 100%;

    height: 330px;

    overflow: hidden;

    background-color: #f1ece7;

}


.category-poster img {

    width: 100%;

    height: 100%;

    display: block;

    object-fit: cover;

    object-position: center;


    transition:

        transform 0.6s ease;

}


.category-card:hover
.category-poster img {

    transform:

        scale(1.03);

}



/* ============================================================
   CIRCLE IMAGES
============================================================ */

.category-circle-images {

    width: 100%;

    height: 78px;

    margin-top: -65px;


    display: flex;

    align-items: flex-start;

    justify-content: center;

    gap: 13px;


    position: relative;

    z-index: 3;

}


.category-circle-image {

    width: 135px;

    height: 135px;

    flex:

        0
        0
        135px;


    padding: 5px;


    overflow: hidden;


    border-radius: 50%;


    background-color: white;


    border:

        2px solid
        #d6a766;


    box-shadow:

        0 5px 18px
        rgba(
            86,
            55,
            34,
            0.13
        );

}


.category-circle-image img {

    width: 100%;

    height: 100%;

    display: block;

    border-radius: 50%;

    object-fit: cover;

    object-position: center;

}



/* ============================================================
   CARD CONTENT
============================================================ */

.category-card-content {

    width: 100%;

    min-width: 0;

    position: relative;

    z-index: 2;


    padding:

        62px
        38px
        0;


    text-align: center;

}



/* ============================================================
   CATEGORY NAME
============================================================ */

.category-card-content h3 {

    margin:

        0
        0
        13px;


    color: #86151b;


    font-family:

        Georgia,
        "Times New Roman",
        serif;


    font-size: 31px;

    line-height: 1.2;

    font-weight: normal;

    overflow-wrap: break-word;

}



/* ============================================================
   DECORATION
============================================================ */

.category-card-decoration {

    width: 220px;

    max-width: 70%;


    margin:

        0
        auto
        18px;


    display: flex;

    align-items: center;

    gap: 11px;

}


.category-card-decoration span {

    flex: 1;

    height: 1px;

    background-color: #d8b37e;

}


.category-card-decoration i {

    color: #b27b39;

    font-size: 17px;

}



/* ============================================================
   DESCRIPTION
============================================================ */

.category-description {

    width: 100%;

    max-width: 570px;


    margin:

        0
        auto
        25px;


    color: #615852;


    font-family:

        Georgia,
        "Times New Roman",
        serif;


    font-size: 16px;

    line-height: 1.65;

    overflow-wrap: break-word;

}



/* ============================================================
   CATEGORY BUTTON
============================================================ */

.category-button {

    width: 255px;

    max-width: 100%;

    min-height: 53px;


    margin:

        0
        auto;


    padding:

        11px
        22px;


    display: flex;

    align-items: center;

    justify-content: center;

    gap: 13px;


    color: white;


    border-radius: 30px;


    background:

        linear-gradient(

            135deg,

            #771218,

            #a21b22

        );


    border:

        1px solid
        #c99c5b;


    box-shadow:

        0 6px 16px
        rgba(
            108,
            17,
            21,
            0.15
        );


    transition:

        transform 0.2s ease,
        box-shadow 0.2s ease,
        background-color 0.2s ease;

}


.category-button span,
.category-button i {

    color: white;

}


.category-button span {

    font-family:

        Georgia,
        "Times New Roman",
        serif;


    font-size: 15px;

}


.category-button:hover {

    color: white;


    transform:

        translateY(-2px);


    box-shadow:

        0 10px 22px
        rgba(
            108,
            17,
            21,
            0.22
        );

}



/* ============================================================
   CORNER DECORATION
============================================================ */

.category-decoration-left,
.category-decoration-right {

    position: absolute;

    bottom: 12px;


    color: #d4aa72;

    font-size: 46px;

    opacity: 0.50;

    pointer-events: none;

}


.category-decoration-left {

    left: 15px;

    transform:

        rotate(-25deg);

}


.category-decoration-right {

    right: 15px;

    transform:

        rotate(205deg);

}



/* ============================================================
   EMPTY
============================================================ */

.categories-empty {

    grid-column:

        1 / -1;


    width: 100%;


    padding:

        65px
        20px;


    text-align: center;


    border:

        1px solid
        var(--categories-border);


    border-radius: 14px;


    background-color: #fff8f2;

}


.categories-empty h3 {

    margin:

        0
        0
        16px;


    color: var(--categories-red);


    font-family:

        Georgia,
        "Times New Roman",
        serif;


    font-size: 25px;

    font-weight: normal;

}


.categories-empty a {

    color: var(--categories-red);

    font-size: 13px;

    font-weight: bold;

}



/* ============================================================
   <= 1570px
   PAGE = 1260
============================================================ */

@media only screen and (max-width: 1570px) {


    .categories-hero-container,
    .categories-container {

        width: 1160px;

    }


    .categories-hero {

        height: 390px;

    }


    .categories-hero-content {

        width: 540px;

        left: 15px;

    }


    .categories-main-page-mirror
    .categories-hero-content {

        left: auto;

        right: 15px;

    }


    .categories-hero h1 {

        font-size: 47px;

    }


    .categories-hero p {

        width: 470px;

        font-size: 14px;

    }


    .categories-grid {

        gap: 25px;

    }


    .category-poster {

        height: 285px;

    }


    .category-circle-images {

        height: 68px;

        margin-top: -57px;

    }


    .category-circle-image {

        width: 118px;

        height: 118px;

        flex-basis: 118px;

    }


    .category-card-content {

        padding:

            54px
            32px
            0;

    }


    .category-card-content h3 {

        font-size: 28px;

    }


    .category-description {

        font-size: 15px;

    }


}



/* ============================================================
   <= 1260px
   PAGE = 900
============================================================ */

@media only screen and (max-width: 1260px) {


    .categories-hero-container,
    .categories-container {

        width: 840px;

    }


    .categories-hero {

        height: 330px;

    }


    .categories-hero-content {

        width: 430px;

        left: 10px;

    }


    .categories-main-page-mirror
    .categories-hero-content {

        right: 10px;

    }


    .categories-hero-small {

        font-size: 9px;

        letter-spacing: 3px;

    }


    .categories-hero h1 {

        font-size: 39px;

        margin-bottom: 12px;

    }


    .categories-hero p {

        width: 390px;

        font-size: 12px;

        line-height: 1.5;

    }


    .categories-page {

        padding:

            45px
            0
            58px;

    }


    .categories-section-heading {

        margin-bottom: 30px;

    }


    .categories-section-heading h2 {

        font-size: 31px;

    }


    .categories-section-heading p {

        font-size: 12px;

    }


    .categories-grid {

        gap: 18px;

    }


    .category-poster {

        height: 220px;

    }


    .category-circle-images {

        height: 55px;

        margin-top: -47px;

        gap: 9px;

    }


    .category-circle-image {

        width: 96px;

        height: 96px;

        flex-basis: 96px;

        padding: 4px;

    }


    .category-card-content {

        padding:

            47px
            22px
            0;

    }


    .category-card-content h3 {

        font-size: 24px;

    }


    .category-description {

        font-size: 13px;

        line-height: 1.55;

    }


    .category-button {

        width: 215px;

        min-height: 47px;

    }


    .category-button span {

        font-size: 13px;

    }


}



/* ============================================================
   <= 900px
   PAGE = 720
============================================================ */

@media only screen and (max-width: 900px) {


    .categories-hero-container,
    .categories-container {

        width: 680px;

    }


    .categories-hero {

        height: 300px;

    }


    .categories-hero-content {

        width: 370px;

    }


    .categories-hero h1 {

        font-size: 34px;

    }


    .categories-hero p {

        width: 340px;

    }


    .categories-grid {

        grid-template-columns: 1fr;

        gap: 28px;

    }


    .category-poster {

        height: 320px;

    }


    .category-circle-images {

        height: 76px;

        margin-top: -64px;

        gap: 14px;

    }


    .category-circle-image {

        width: 132px;

        height: 132px;

        flex-basis: 132px;

    }


    .category-card-content {

        padding:

            61px
            45px
            0;

    }


    .category-card-content h3 {

        font-size: 31px;

    }


    .category-description {

        font-size: 16px;

    }


    .category-button {

        width: 255px;

        min-height: 52px;

    }


    .category-button span {

        font-size: 15px;

    }


}



/* ============================================================
   <= 720px
   MOBILE
============================================================ */

@media only screen and (max-width: 720px) {


    .categories-hero-container,
    .categories-container {

        width: 100%;

        padding-left: 14px;

        padding-right: 14px;

    }



    /* ========================================================
       HERO
    ======================================================== */

    .categories-hero {

        height: 360px;

    }


    .categories-hero-image {

        object-position:

            60%
            center;

    }


    .categories-hero-overlay,
    .categories-main-page-mirror
    .categories-hero-overlay {

        background:

            linear-gradient(

                180deg,

                rgba(33, 4, 6, 0.15) 0%,

                rgba(45, 5, 8, 0.42) 38%,

                rgba(41, 5, 7, 0.92) 100%

            );

    }


    .categories-hero-content,
    .categories-main-page-mirror
    .categories-hero-content {

        width:

            calc(
                100% - 28px
            );


        left: 14px;

        right: auto;


        top: auto;

        bottom: 30px;


        transform: none;


        text-align: left;

    }


    .categories-main-page-mirror
    .categories-hero-content {

        text-align: right;

    }


    .categories-hero h1 {

        font-size: 34px;

    }


    .categories-hero p {

        width: 100%;

        max-width: 450px;

        font-size: 12px;

    }



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

    .categories-page {

        padding:

            36px
            0
            43px;

    }


    .categories-section-heading {

        margin-bottom: 25px;

        padding:

            0
            5px;

    }


    .categories-section-small {

        font-size: 9px;

        letter-spacing: 3px;

    }


    .categories-section-heading h2 {

        font-size: 28px;

    }


    .categories-section-heading p {

        font-size: 12px;

        line-height: 1.5;

    }



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

    .categories-grid {

        gap: 23px;

    }


    .category-card {

        padding-bottom: 25px;

        border-radius: 13px;

    }



    /* ========================================================
       POSTER
    ======================================================== */

    .category-poster {

        width: 100%;

        height: auto;


        aspect-ratio:

            16 / 9;

    }



    /* ========================================================
       CIRCLES
    ======================================================== */

    .category-circle-images {

        height: 60px;

        margin-top: -50px;

        gap: 10px;

    }


    .category-circle-image {

        width: 103px;

        height: 103px;

        flex-basis: 103px;

    }



    /* ========================================================
       CONTENT
    ======================================================== */

    .category-card-content {

        width: 100%;


        padding:

            49px
            18px
            0;

    }


    .category-card-content h3 {

        font-size: 27px;

    }


    .category-card-decoration {

        margin-bottom: 15px;

    }


    .category-description {

        width: 100%;


        margin-bottom: 20px;


        font-size: 14px;

        line-height: 1.55;

    }


    .category-button {

        width: 230px;

        min-height: 48px;

    }


    .category-button span {

        font-size: 14px;

    }



    /* ========================================================
       CORNER DECOR
    ======================================================== */

    .category-decoration-left,
    .category-decoration-right {

        bottom: 7px;

        font-size: 34px;

    }


}



/* ============================================================
   <= 420px
============================================================ */

@media only screen and (max-width: 420px) {


    .categories-hero-container,
    .categories-container {

        padding-left: 10px;

        padding-right: 10px;

    }


    .categories-hero {

        height: 335px;

    }


    .categories-hero-content,
    .categories-main-page-mirror
    .categories-hero-content {

        width:

            calc(
                100% - 20px
            );


        left: 10px;

        bottom: 24px;

    }


    .categories-hero h1 {

        font-size: 30px;

    }


    .categories-hero p {

        font-size: 11px;

    }


    .categories-section-heading h2 {

        font-size: 25px;

    }


    .category-circle-images {

        height: 53px;

        margin-top: -43px;

    }


    .category-circle-image {

        width: 88px;

        height: 88px;

        flex-basis: 88px;

    }


    .category-card-content {

        padding:

            43px
            14px
            0;

    }


    .category-card-content h3 {

        font-size: 24px;

    }


    .category-description {

        font-size: 13px;

    }


    .category-button {

        width: 210px;

        min-height: 46px;

    }


    .category-button span {

        font-size: 13px;

    }


}