/* ========== GOOGLE FONTS ==========*/
@import url('https://fonts.googleapis.com/css2?family=Gemunu+Libre:wght@400;500;600&display=swap');

/* Keyframes - animations */
@keyframes fadeInAnimation {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
     }
}

@keyframes showFromBttm {
    0% {
        bottom: -8rem;
    }
    100% {
        bottom: 0rem;
    }

}

@keyframes showFromBttm2 {
    0% {
        bottom: 0rem;
    }
    100% {
        bottom: 7.9rem;
    }

}

/*===== VARIABLES CSS =====*/

:root {
    --header-height: 3rem;

    /*========== Colors ==========*/
    --title-color: #0B0A0A;
    --text-color: #3d3d3d;
    --text-color-light: #707070;

    --text-color-button:black;
    --text-color-button-hover:black;

    --container-color: #FAFAFA;
    --container-color-alt: #F0EFEF;
    --body-color: #FCFCFC;

    --button-color: rgb(255, 198, 64);
    --button-color-hover:rgb(247, 173, 0);

    --background-section-color: rgb(245, 242, 234);

    --invisible: none;
    --visible: inline-block;

    /*========== Font and typography ==========*/
    --body-font: 'Poppins', sans-serif;
    --h1-font-size: 1.5rem;
    --h2-font-size: 1.25rem;
    --h3-font-size: 1rem;
    --normal-font-size: .938rem;
    --small-font-size: .875rem;
    --smaller-font-size: .813rem;

    /*========== Font weight ==========*/
    --font-medium: 500;
    --font-semi-bold: 600;

    /*========== Margenes ==========*/
    --mb-1: .5rem;
    --mb-2: 1rem;
    --mb-3: 1.5rem;

    /*========== z index ==========*/
    --z-tooltip: 20;
    --z-fixed: 30;
    --z-hidden-fixed: 10;
    --z-normal: 0;
  }

/* ========== Box fix ==========*/
*,::before,::after {
    box-sizing: border-box;
}

a {
    text-decoration: none;
    color: #0B0A0A;
}



/* #region Header */
/* ========== HEADER ==========*/
header {
    /* Position - mobile*/
    position: fixed;
    width: 100%;
    bottom: 0;
    left: 0;
    height: 5rem;
    z-index: 5;
    box-shadow: 5px 5px 5px rgba(21, 19, 46, 0.395);

    /* Font */
    font-family: sans-serif;
    font-size: var(--h2-font-size);
}

header::after {
    content: '';
    display: table;
    clear: both;
}

header div.container {
    /* Position */
    position:fixed;
    width: 100%;
    margin: auto 0;
    z-index: 25;

    /* Background */
    background-color: var(--container-color);

    /* Display of elements inside */
    display: flex;
    padding: 0 2rem 1rem 0rem;
    justify-content: space-between;
    align-items: center;
}

.logo {
    /* Position */
    margin-top: 0.3rem;


    /* Size */
    padding: 1rem 2rem 1rem 2%;

    /* Font */
    color: var(--text-color);
    font-weight: 200;
}

.bookBtn {
    /* Position */
    margin-top: 0.3rem;
    margin-left: 2rem;
    /* Size */
    padding: 1rem 2rem 1rem 2rem;

    /* Border */
    border-radius: 50px 50px 50px 50px;

    /* Background */
    background-color: var(--button-color);

    /* Font */
    color: var(--text-color-button);
    font-weight: 400;

}

.heightclearance {
    height: fit-content;
}

.bookBtn:hover {
    /* Background */
    background-color: var(--button-color-hover);
    box-shadow: 5px 5px 5px rgba(21, 19, 46, 0.795);

    /* Font */
    color: var(--text-color-button-hover);

    /* Cursor */
    cursor: pointer;
    transition: 2s;

}

.menuBtn {
        /* Position */
        margin-top: 0.3rem;

        /* Size */
        padding: 1rem 1rem 1rem 1rem;

        /* Border */
        border-radius: 150%;

        /* Font */
        color: var(--text-color-button);
        font-size: var(--h1-font-size);
        font-weight: 400;
}

.menuBtn:hover {
    /* Background */
    background-color: var(--container-color-alt);
    box-shadow: 5px 5px 5px rgba(21, 19, 46, 0.795);

    /* Font */
    color: var(--text-color-button);
    transition: 2s;
}

/* Tablet version diffrences */
@media screen and (max-width: 969px) {


    .nav {
        /* Position */
        position: fixed;
        width: 100%;
        margin: 0 auto;
        bottom: -8rem;
        left: 0;
        height: 8rem;
        box-shadow: 5px 5px 5px rgba(21, 19, 46, 0.295);

        /* Display of elements inside */
        display: flex;

        /* Background */
        background-color: var(--container-color);
        /* Border */
        border-top: solid #e7dd4d 2px;
        transition: 2s;
    }

    .show_sub {
        animation: showFromBttm ease-in-out 1s;
        animation-iteration-count: 1;
        animation-fill-mode: forwards;
    }

    .hidden {
        animation: showFromBttm ease-in-out 0.5s;
        animation-iteration-count: 1;
        animation-fill-mode: forwards;
    }

    .hidden2 {
        animation: showFromBttm2 ease-in-out 0.5s;
        animation-iteration-count: 1;
        animation-fill-mode: forwards;
    }

    nav ul {
        /* Position */

        width: 100%;

        /* Display of elements inside */
        list-style: none;
        display: flex;
        flex-wrap: wrap;

        justify-content: space-between;
        align-items: center;

        margin: 0 0 0 -5%;
    }

    nav li {

        text-align: center;
        padding: 1rem 0.5rem 1rem 0.5rem;
    }

    nav li:hover {
        background-color: var(--container-color-alt);
        box-shadow: 5px 5px 5px rgba(21, 19, 46, 0.195);
    }

    nav a {
        font-size: 1rem;
        font-weight: 200;
        color: var(--text-color);
        text-decoration: none;
        text-transform: uppercase;
    }

    nav a:hover {
        font-weight: 400;
        color: var(--title-color);


    }

}
/* Mobile version diffrences */
@media screen and (max-width: 550px) {

    header {
        height: 3.8rem;
    }

    header div.container {
        /* Position */
        position:fixed;
        width: 100%;
        margin: 0 auto;
        z-index: 25;

        /* Background */
        background-color: var(--container-color);

        /* Display of elements inside */
        display: flex;
        padding: 0 0.5rem 1rem 0.5rem;
        justify-content: space-between;
        align-items: center;
    }

    .nav {
        /* Position */
        position: fixed;
        width: 100%;
        margin: 0 auto;
        bottom: -8rem;
        left: 0;
        height: 8rem;
        box-shadow: 5px 5px 5px rgba(21, 19, 46, 0.295);

        /* Display of elements inside */
        display: flex;

        /* Background */
        background-color: var(--container-color);
        /* Border */
        border-top: solid #e7dd4d 2px;
    }



    .show_sub {
        animation: showFromBttm ease-in-out 1s;
        animation-iteration-count: 1;
        animation-fill-mode: forwards;
    }

    .hidden {
        animation: showFromBttm ease-in-out 0.5s;
        animation-iteration-count: 1;
        animation-fill-mode: forwards;
    }

    .hidden2 {
        animation: showFromBttm2 ease-in-out 0.5s;
        animation-iteration-count: 1;
        animation-fill-mode: forwards;
    }

    nav ul {
        /* Position */
        width: 100%;

        /* Display of elements inside */
        list-style: none;
        display: flex;
        flex-wrap: wrap;

        justify-content: space-around;
        align-content: center;


    }

    nav li {
        text-align: center;
        flex:30%;
        padding: 1rem 0 1rem 0;
    }

    nav li:hover {
        background-color: var(--container-color-alt);
    }

    nav a {
        font-size: 1rem;
        font-weight: 200;
        color: var(--text-color);
        text-decoration: none;
        text-transform: uppercase;
    }

    nav a:hover {
        font-weight: 400;
        color: var(--title-color);
    }
    .logo {
        /* Position */
        margin-top: 0.3rem;
        margin-right: 5rem;

        /* Size */
        padding: 0.5rem 1rem 0.5rem 0;

        /* Border */
        border-color: var(--text-color);
        border-radius: 5px;

        /* Font */
        font-size: 1rem;
        color: var(--text-color);
        font-weight: 200;
    }

    .bookBtn {
        /* Position */
        margin-top: 0.3rem;

        /* Size */
        padding: 0.5rem 1rem 0.5rem 1rem;

        /* Border */
        border-radius: 50px 50px 50px 50px;

        /* Background */
        background-color: var(--button-color);

        /* Font */
        color: var(--text-color-button);
        font-weight: 400;
        font-size: 1rem;

    }

    .bookBtn:hover {
        /* Background */
        background-color: var(--button-color-hover);
        box-shadow: 5px 5px 5px rgba(21, 19, 46, 0.795);

        /* Font */
        color: var(--text-color-button-hover);

        /* Cursor */
        cursor: pointer;
        transition: 2s;

    }

    .heightclearance {
        height: fit-content;
    }

    .menuBtn {
            /* Position */
            margin-top: 0.3rem;

            /* Size */
            padding: 0.5rem 1rem 0.5rem 1rem;

            /* Border */
            border-radius: 150%;

            /* Font */
            color: var(--text-color-button);
            font-size: var(--h1-font-size);
            font-weight: 400;
    }

    .menuBtn:hover {
        /* Background */
        background-color: var(--container-color-alt);

        /* Font */
        color: var(--text-color-button);
    }

}

/* Desktop differences */
@media screen and (min-width: 968px) {
    header {
        /* Position - desktop */
        top: 0;

        /* Animation */
        animation: fadeInAnimation ease-in-out 1s;
        animation-iteration-count: 1;
        animation-fill-mode: forwards;
    }


    .nav {
        /* Position */
        position: fixed;
        width: 100%;
        margin: 0 auto;
        top: 1rem;
        left: 0%;
        box-shadow: 5px 5px 5px rgba(21, 19, 46, 0.295);

        /* Display of elements inside */
        display: flex;

        /* Background */
        background-color: var(--container-color);

        /* Border */
        border-top: solid #e7dd4d 2px;
        transition: 1s;
    }

    .hidden {
        top: 5.05rem;
    }

    nav ul {
        /* Position */
        width: 100%;

        /* Display of elements inside */
        list-style: none;
        display: inline-flex;
        justify-content: space-around;

        margin: 0 0 0 0;

    }

    nav li {
        padding-top: 1rem;
        padding-bottom: 0.5rem;
        padding-left: 2%;
        padding-right: 2%;
        position: relative;


    }

    nav a {
        font-size: 1rem;
        font-weight: 200;
        color: var(--text-color);
        text-decoration: none;
        text-transform: uppercase;
    }

    nav a:hover {
        font-weight: 400;
        color: var(--title-color);


    }
    nav li::before {
        content: '';
        display: block;
        left: -1px;
        height: 5px;
        background-color: var(--button-color);

        position: absolute;
        top: 0;
        width: 0%;

        transition: all ease-in-out 250ms;
    }

    nav li:hover::before {
        width: 100%;
        padding: 0 2px 0 5px;
        border-radius: 0 0 100% 100%;


    }

}
/* #endregion Header */
/* #region Body */

    /* #region helpClass */
    .test-container {
        gap: 2%;
        background-color: #2196F3;
        padding: 10px;
    }

    .test-item {
        background-color: rgba(199, 146, 146, 0.8);
    }

    .wt-button {
        text-align: center;
        align-self: center;
        margin: 0 auto;

        /* Size */
        padding: 1rem 2rem 1rem 2rem;

        /* Border */
        border-radius: 50px 50px 50px 50px;

        /* Background */
        background-color: var(--button-color);

        /* Font */
        color: var(--text-color-button);
        font-weight: 400;
    }
    .wt-button:hover {
        cursor: pointer;
    }
    body {
        scroll-padding-top: 50px
    }
    /* #endregion helpClass */

    /* #region Blog */
        .first-blogos {
            padding-top: 5%;
        }
        .last-blogos {
            padding-bottom: 20%;
        }
        .blogos-date {
            text-align: right;
            padding-right: 2%;
            color: gray;
        }
        .blog-section {
            max-width: 966px;
            margin: auto;
        }
        .blogos-item1 {
            text-align: center;
            margin: 5% auto;
            text-transform: uppercase;
            font-size: 2rem;
        }
        .blog-item2 {
            width: 100%;
            padding: 0 2%;
        }
        .blogos-item3 {
            font-size: large;
            padding: 0 10%;
            font-weight: bold;
            text-align: justify;
        }
        .blogos-item4 {
            text-align: justify;
            font-size: large;
            padding: 0 2%;
        }

        .blogos-grid-container {
            /* BC Color */
            background-color: var(--container-color);
            /* Padding */
            padding-top: 5%;
            padding-bottom: 5%;
            border-bottom: lightgray solid;
        }
        .blogos-button {
            font-weight: bolder;
            font-size: large;
            text-align: center;
            align-self: center;
            margin: 0 auto;
            width: 30%;

            /* Size */
            padding: 1rem 2rem 1rem 2rem;

            /* Border */
            border-radius: 50px 50px 50px 50px;

            /* Background */
            background-color: var(--button-color);

            /* Font */
            color: var(--text-color-button);
            font-weight: 400;
        }
        .blogos-button:hover {
            color: var(--button-color-hover);
            box-shadow: 5px 5px 5px rgba(21, 19, 46, 0.795);

            cursor: pointer;
            transition: 2s;
        }
    /* #endregion Blog */

    /* Desktop */
    @media screen and (min-width:966px) {
        /* #region universalClass */
        .section-container {
            max-width: 966px;
            margin: auto;

        }
        .image-vertical {
            position: relative;
            height: 90%;
            top: 12%;

            border-radius: 5%;
            box-shadow: 5px 5px 5px rgba(21, 19, 46, 0.395);
        }
        .image-horizontal {
            position: relative;
            height: 100%;
            left: 50%;
            transform: translateX(-50%);

            border-radius: 5%;
            box-shadow: 5px 5px 5px rgba(21, 19, 46, 0.395);
        }

        .carusel-buttons {
            position: relative;
            top: 50%;
            color: var(--button-color);
            z-index: 1;
        }
        .carusel-buttons:hover {
            color: var(--button-color-hover);
            text-shadow: 5px 5px 5px rgba(21, 19, 46, 0.795);

            cursor: pointer;
            transition: 2s;
        }

        .carusel-pagination {
            color: var(--button-color-hover);
        }

        .slide {
            background-color: var(--background-section-color);
            padding: 2%;
        }
        .desktop_hidden {
            display: none;
        }

        /* #endregion universalClass */

        /* #region Hi */
        #introduction {
            background-color: var(--background-section-color);
        }

        .hi-item1 {
            grid-area: photo;
        }
        .hi-item2 {
            margin-top: -30%;
            font-family:sans-serif;
            grid-area: text;
            text-align: center;
        }
        .hi-item3 {
            grid-area: blank;
        }
        .hi-item4 {
            margin-top: -30%;
            grid-area: blank2;
            text-align: center;
            color: #707070;
            font-family:sans-serif;
        }

        .hi-grid-container {
            /* Grid */
            height: 100%;
            display: grid;
            grid-template-areas:

            'blank photo'
            'text photo'
            'blank2 photo';
            gap: 5%;

            grid-template-rows: 40% 15% 30%;
        }
        /* #endregion Hi */

        /* #region Articles */
        #content {
            padding-top: 5%;
        }

        .yhtri {
            text-align: center;
            margin: 2% auto;
            text-transform: uppercase;
            font-size: 2rem;
        }

        .art-item1 {
            grid-area: slide;
            margin: auto;
            width: 80%;

        }
        .art-item2 {
            grid-area: prev;
            margin: 0 auto;
            text-align: center;
        }
        .art-item3 {
            grid-area: next;
            margin: 0 auto;
            text-align: center;
        }
        .art-item4 {
            grid-area: pagination;
            margin: 0 auto;
            text-align: center;
        }

        .art-grid-container {
            /* Grid */
            height: 80%;
            top: 10%;
            display: grid;
            grid-template-areas:
                'prev slide next'
                'pagination pagination pagination';
            gap: 5%;
        }
        .slide-item1 {
            grid-area: title;
            text-align: center;
        }
        .slide-item2 {
            grid-area: photo2;
            margin: 0 auto;
            top: 0%;
        }
        .slide-item3 {
            grid-area: text2;
            text-align: justify;
            font-size: large;
            top: -5%;
        }
        .slide-item4 {
            grid-area: down;
            text-align: center;
            margin: 0 auto;

            /* Size */
            padding: 1rem 2rem 1rem 2rem;

            /* Border */
            border-radius: 50px 50px 50px 50px;

            /* Background */
            background-color: var(--button-color);

            /* Font */
            color: var(--text-color-button);
            font-weight: 400;
        }
        .slide-item4:hover {
            color: var(--button-color-hover);
            box-shadow: 5px 5px 5px rgba(21, 19, 46, 0.795);

            cursor: pointer;
            transition: 2s;
        }
        .slide-container {
            /* Grid */
            width: 68%;
            height: 100%;
            display: grid;
            grid-template-areas:
                'title title'
                'photo2 text2'
                'down down';
            gap: 5%;
            grid-template-columns: 30% 65%;
            grid-template-rows: 10% 70% 10%;
            padding: 2%;

        }
        /* #endregion Articles */

        /* #region Quote */
            .quote-item1 {
                grid-area: quote-text;
                font-size: large;
                text-align: justify;
            }
            .quote-item2 {
                grid-area: quote-title;
                text-align: center;
                margin: 5% auto;
                text-transform: uppercase;
                font-size: 2rem;
            }
            .quote-grid-container {
                /* Grid */
                display: grid;
                grid-template-areas:
                'quote-title'
                'quote-text';
                margin-top: 3%;

                grid-template-rows: 30% 20%;

                /* Look */
                height: 40%;


            }

            .quote2-grid-container {
                /* Grid */
                display: grid;
                grid-template-areas:
                'quote-title'
                'quote-text';
                margin-top: 3%;

                grid-template-rows: 40% 30%;

                /* Look */
                height: 60%;
            }
            .quote3-grid-container {
                /* Grid */
                display: grid;
                grid-template-areas:
                'quote-title'
                'quote-text';
                margin-top: 3%;

                grid-template-rows: 25% 70%;

                /* Look */
                height: 60%;
            }
        /* #endregion Quote */

        /* #region Working Together */

        .wt-item2 {
            grid-area: wt-image;
            height: 105%;
        }
        .wt-item3 {
            grid-area: wt-text;
            font-size: large;
            text-align: justify;
            margin-top:40%
        }

        .wt-grid-container {
            /* Grid */
            display: grid;
            grid-template-areas:
            /* 'wt-title wt-title' */
            'wt-text wt-image';
            padding-top: 3%;
            gap: 5%;

            grid-template-rows: 50%;
            grid-template-columns: 45% 50%;
            height: 150%;
        }
        /* #endregion Working Together */

        /* #region About Me */
        #abtme {
            background-color: var(--background-section-color);
        }

        .abtme-item1 {
            grid-area: abtme-title;
            text-align: center;
        }
        .abtme-item2 {
            grid-area: abtme-image;
            margin: auto;
            height: 80%;
        }
        .abtme-item3 {
            grid-area: abtme-text;
            text-align: justify;
            font-size: large;
        }
        .abtme-item4 {
            grid-area: abtme-text2;
            font-size: large;
        }

        .abtme-grid-container {
            /* Grid */
            height: 120%;
            display: grid;
            grid-template-areas:
            'abtme-title abtme-title'
            'abtme-image abtme-text'
            'abtme-text2 abtme-text2';
            column-gap: 5%;
            row-gap: 0%;

            grid-template-rows: 10% 80%;
        }
        /* #endregion About Me */

        /* #region Testimonials */
        #ts {
            padding-top: 5%;
            padding-bottom: 5%;
        }

        .ts-item1 {
            grid-area: slide;
            margin: auto;
            width: 80%;

        }
        .ts-item2 {
            grid-area: prev;
            margin: 0 auto;
            text-align: center;
        }
        .ts-item3 {
            grid-area: next;
            margin: 0 auto;
            text-align: center;
        }

        .ts-grid-container {
            /* Grid */
            top: 10%;
            display: grid;
            grid-template-areas:
                'prev slide next';
            gap: 5%;

        }
        .ts-slide-item1 {
            grid-area: ts-text1;
            text-align: justify;
            font-size: large;
        }
        .ts-slide-item2 {
            grid-area: ts-author1;
            text-align: right;
            font-weight: bold;
        }
        .ts-slide-item3 {
            grid-area: ts-text2;
            text-align: justify;
            font-size: large;
        }
        .ts-slide-item4 {
            grid-area: ts-author2;
            text-align: right;
            font-weight: bold;
        }
        .ts-slide-container {
            /* Grid */
            width: 68%;
            height: fit-content;
            display: grid;
            grid-template-areas:
                'ts-text1 ts-text2'
                'ts-author1 ts-author2';
            gap: 5%;
            grid-template-columns: 45% 45%;
            grid-template-rows: 70% 15%;
        }
        .inner-slide {
            height: max-content;
            background-color: var(--background-section-color);
            border-radius: 2rem;
            padding: 5%;
        }
        /* #endregion Testimonials */


        /* #region Contact */
        #contact {
            background-color: var(--background-section-color);
        }
        .contact-item1 {
            text-align: center;
        }
        .button-area {
            text-align: left;
        }

        .contact-grid-container {
            padding: 2%;
        }

        input {
            border: 3px solid var(--container-color);
            border-radius: 10px;
            margin-left: 1rem;
        }
        input:hover {
            border: 3px solid var(--button-color-hover);
        }

        textarea {
            border: 3px solid var(--container-color);
            border-radius: 10px;
            width: 100%;
            height: 4rem;
            margin-left: 1rem;
        }

        .email {
            width: 100%;
            padding: 0.5rem 0rem 0.5rem 0.5rem;
        }

        .submitBtn {
            /* Size */
            margin: 1rem 1rem 1rem 1rem;
            padding: 0.5rem 1rem 0.5rem 1rem;

            /* Border */
            border-radius: 50px 50px 50px 50px;
            border-style: none;

            /* Background */
            background-color: var(--button-color);

            /* Font */
            color: var(--text-color-button);
            font-weight: 400;
            cursor: pointer;

            font-size: 1.25rem;
        }

        .submitBtn:hover {
                /* Background */
                background-color: var(--button-color-hover);
                box-shadow: 5px 5px 5px rgba(21, 19, 46, 0.795);

                /* Font */
                color: var(--text-color-button-hover);

                /* Cursor */
                cursor: pointer;
                transition: 2s;
        }

        /* #endregion Contact */

        /* #region Footer */
        #footer {
            background-color: black;
        }

        .footer-item1 {
            grid-area: footer-logo;
            color: white;
        }
        .footer-item2 {
            grid-area: footer-accreditation;
            height: 75%;
            text-align: right;
        }
        .footer-item3 {
            grid-area: footer-socal;
            font-size: 60;
            color: white;
        }
        .footer-item3 i:hover {
            color: rgb(247, 173, 0);;
        }
        .footer-item4 {
            grid-area: footer-sign;
            font-size: large;
            color: white;
        }

        .footer-grid-container {
            /* Grid */
            height: 50%;
            display: grid;
            grid-template-areas:
            'footer-logo footer-accreditation'
            'footer-socal footer-accreditation'
            'footer-sign footer-accreditation';

            gap: 10%;
            grid-template-rows:10% 70% 10%;
            grid-template-columns: 50% 30%;
            padding-top: 5%;
            padding-bottom: 5%;
        }

        #footer a {
            color: white;
        }
        /* #endregion Footer */
    }

    /* Mobile */
    @media screen and (max-width:965px) {
        /* #region universalClass */
        .section-container {
            max-width: 966px;
            margin: auto;
        }
        .image-vertical {
            position: relative;
            height: 100%;
            max-width: 100%;
            object-fit: cover;
        }
        .image-horizontal {
            position: relative;
            height: 100%;
            max-width: 100%;
            object-fit: cover;
            left: 50%;
            transform: translateX(-50%);
        }

        .mobile_hidden {
            display: none;
        }
        /* #endregion universalClass */

        /* #region Hi */
        #introduction {
            background-color: gainsboro;
        }

        .hi-item1 {
            grid-area: photo;
            margin: auto;
        }
        .hi-item2 {
            grid-area: text;
            text-align: center;
            margin: auto;
        }
        .hi-item3 {
            display: none;
        }
        .hi-item4 {
            display: none;;
        }


        .hi-grid-container {
            /* Grid */
            height: 100%;
            display: grid;
            grid-template-areas:
            'photo'
            'text';
            grid-template-rows: 70% 15%;

            gap: 5%;
        }
        /* #endregion Hi */

        /* #region Articles */
        #content {
            padding-top: 5%;
            padding-bottom: 5%;
        }

        .yhtri {
            text-align: center;
            margin: 5% auto;
            text-transform: uppercase;
            font-size: 2rem;
        }

        .art-item1 {
            grid-area: slide;
            margin: 0 auto;
            width: 80%;

        }
        .art-item2 {
            display: none;
        }
        .art-item3 {
            display: none;
        }
        .art-grid-container {
            /* Grid */
                /* 105 */
                /* height: 100%; */

            height: fit-content;
            display: grid;
            grid-template-areas:
                'slide';

        }

        .slide-item1 {
            grid-area: title;
            text-align: center;
        }
        .slide-item2 {
            grid-area: photo2;
            width: 100%;
            top: 0%;
        }
        .slide-item3 {
            grid-area: text2;
            text-align: justify;
            top: -5%;
        }
        .slide-item4 {
            grid-area: down;
            text-align: center;
            margin: 0 auto;

            /* Size */
            padding: 1rem 2rem 1rem 2rem;

            /* Border */
            border-radius: 50px 50px 50px 50px;

            /* Background */
            background-color: var(--button-color);

            /* Font */
            color: var(--text-color-button);
            font-weight: 400;
        }
        .slide-item4:hover {
            color: var(--button-color-hover);
            box-shadow: 5px 5px 5px rgba(21, 19, 46, 0.795);

            cursor: pointer;
            transition: 2s;
        }
        .slide-container {
            /* Grid */
            width: 80%;
            display: grid;
            grid-template-areas:
                'title'
                'photo2'
                'text2'
                'down';


        }
        /* #endregion Articles */

        /* #region Woring with Monika */
        .cwm-item1 {
            grid-area: cwm-title;
            text-align: center;
            margin: 0 auto;
        }
        .cwm-item2 {
            grid-area: cwm-image;
            margin: auto;
        }
        .cwm-item3 {
            grid-area: cwm-text;
        }

        .cwm-grid-container {
            /* Grid */
            height: 200%;
            display: grid;
            grid-template-areas:
            'cwm-title'
            'cwm-image'
            'cwm-text';
            grid-template-rows: 10% 20% 30%;

        }
        /* #endregion Woring with Monika */

        /* #region Quote */
        .quote-item1 {
            grid-area: quote-text;
            font-size: large;
        }
        .quote-item2 {
            grid-area: quote-title;
            text-align: center;
            margin: 5% auto;
            text-transform: uppercase;
            font-size: 2rem;
        }
        .quote-grid-container {
            /* Grid */
            display: grid;
            grid-template-areas:
            'quote-title'
            'quote-text';
            /* Look */
            height: fit-content;
        }
        /* #endregion Quote */

        /* #region Woring Together */
        .wt-item1 {
            grid-area: wt-text0;
        }
        .wt-item2 {
            grid-area: wt-image;
            margin: auto;
            height: 100%;
        }
        .wt-item3 {

            grid-area: wt-text;
            text-align: justify;
        }

        .wt-grid-container {
            /* Grid */
            height: fit-content;
            display: grid;
            grid-template-areas:
            'wt-image'
            'wt-text';


        }
        /* #endregion Woring Together */

        /* #region About Me */

        .abtme-item1 {
            grid-area: abtme-title;
            text-align: center;
        }
        .abtme-item2 {
            grid-area: abtme-image;
            margin: auto;
        }
        .abtme-item3 {
            grid-area: abtme-text;
            font-size: large;
        }
        .abtme-item4 {
            grid-area: abtme-text2;
            font-size: large;
        }

        .abtme-grid-container {
            /* Grid */
            display: grid;
            grid-template-areas:
            'abtme-title'
            'abtme-text'
            'abtme-image';
        }
    /* #endregion About Me */

        /* #region Testimonials */

        #ts {
            height: 120%;
        }

        .ts-item1 {
            grid-area: slide;
            margin: auto;

        }
        .ts-item2 {
            grid-area: prev;
            margin: 0 auto;
            text-align: center;
        }
        .ts-item3 {
            grid-area: next;
            margin: 0 auto;
            text-align: center;
        }

        .ts-grid-container {
            /* Grid */
            top: 10%;
            display: grid;
            grid-template-areas:
                'prev slide next';
            gap: 5%;
            height: 120%;
        }
        .ts-slide-item1 {
            grid-area: ts-text1;
            font-size: large;
        }
        .ts-slide-item2 {
            grid-area: ts-author1;
            text-align: right;
            font-weight: bold;
        }
        .ts-slide-item3 {
            grid-area: ts-text2;
            font-size: large;
        }
        .ts-slide-item4 {
            grid-area: ts-author2;
            text-align: right;
            font-weight: bold;
        }
        .ts-slide-container {
            /* Grid */
            width: 90%;
            height: fit-content;
            display: grid;
            grid-template-areas:
                'ts-text1'
                'ts-author1'
                'ts-text2'
                'ts-author2';
            gap: 20%;
            grid-template-rows: 45% 10% 45% 10%;
            padding: 2%;
        }
        .inner-slide {
            height: max-content;
            background-color: var(--container-color-alt);
            border-radius: 2rem;
            padding: 5%;
        }
        /* #endregion Testimonials */

        /* #region Contact */
                #contact {
                    background-color: var(--container-color-alt);
                }
                .contact-item1 {
                    text-align: center;
                }
                .button-area {
                    text-align: center;
                }

                .contact-grid-container {

                    padding: 2%;
                }

                input {
                    border: 3px solid var(--container-color);
                    border-radius: 10px;
                    margin-left: 1rem;
                }
                input:hover {
                    border: 3px solid var(--button-color-hover);
                }

                textarea {
                    border: 3px solid var(--container-color);
                    border-radius: 10px;
                    width: 90%;
                    height: 4rem;
                    margin-left: 1rem;
                }

                .email {
                    width: 90%;
                    padding: 0.5rem 0rem 0.5rem 0.5rem;
                }

                .submitBtn {
                    /* Size */
                    margin: 1rem 1rem 1rem 1rem;
                    padding: 0.5rem 1rem 0.5rem 1rem;

                    /* Border */
                    border-radius: 50px 50px 50px 50px;
                    border-style: none;

                    /* Background */
                    background-color: var(--button-color);

                    /* Font */
                    color: var(--text-color-button);
                    font-weight: 400;
                    cursor: pointer;

                    font-size: 1.25rem;
                }

                .submitBtn:hover {
                        /* Background */
                        background-color: var(--button-color-hover);
                        box-shadow: 5px 5px 5px rgba(21, 19, 46, 0.795);

                        /* Font */
                        color: var(--text-color-button-hover);

                        /* Cursor */
                        cursor: pointer;
                        transition: 2s;
                }

                /* #endregion Contact */

        /* #region Footer */
        #footer {
            background-color: black;
            margin-bottom: 10%;
        }

        .footer-item1 {
            grid-area: footer-logo;
            color: white;
        }
        .footer-item2 {
            grid-area: footer-accreditation;
        }
        .footer-item3 {
            grid-area: footer-socal;
            font-size: 60;
            color: white;
        }
        .footer-item3 i:hover {
            color: rgb(247, 173, 0);;
        }
        .footer-item4 {
            grid-area: footer-sign;
            font-size: large;
            color: white;
        }
        #footer a {
            color: white;
        }

        .footer-grid-container {
            /* Grid */
            height: fit-content;
            display: grid;
            grid-template-areas:
            'footer-accreditation'
            'footer-logo '
            'footer-socal '
            'footer-sign';

            padding: 2%;
        }
        /* #endregion Footer */
    }


/* #endregion Body */