/* About page title */

.about-page-about {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.about-page-about::before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: -1;

    display: block;
    background-image: url(/assets/restaurantrenders.png);
    background-size:cover;
    width: 100%;
    height: 100%;

    filter: brightness(60%);

    background-repeat: no-repeat;
    background-position: center;
}

.about-page-about h2 {
    color: rgb(255, 255, 255);
    margin-top: 20px;
    text-shadow: 3px 3px 6px rgba(0, 0, 0, 0.3);
}

.about-page-about-text {
    padding: 50px 0 50px 0;
    border-top: 1px solid white;
    border-bottom: 1px solid white;
    margin-bottom: 45px;
}

.about-page-about-subtitle {
    max-width: 800px;
}

.about-page-about-subtitle p{
    color: var(--offwhite);
    font-size: 15px;
}

/* alorah is section */ 

.alorah-is {
    text-align: center;
}
.capital-p {
    font-size: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: var(--offwhite);
    padding: 50px;
}

.capital-p p {
    font-family: 'Rosarivo', sans-serif;
}

.down-triangle {
    padding: 10px;
    margin-top: 10px;
    background-color: gray;
    width: 60px;
    height: 30px;
    clip-path: polygon(50% 100%, 0 0, 100% 0);
    transition: 1s all ease;
}

.down-triangle:hover{
    transform: scale(1.3);
}

.slideshow-section {
    background-color: var(--offwhite);
}

.about-section {
    width: 100%;
    padding: 0px 0px 0px 0px;
    text-align: center;
    min-height: 500px;
    max-height: 500px;
    display: flex;
    flex-direction: row;
    overflow: hidden;
}

.about-section-text {
    /* background-color: white; */
    flex-grow: 1;
    width: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.about-section-text h2 {
    font-size: 55px;
    margin-bottom: 0px;
}

.about-section-text p {
    font-family: 'Rosarivo', sans-serif;
    margin: 40px 40px 0px 40px;
}

.about-section-pic img {
    height: 100%;
    /* width: auto; */
    object-fit: cover;
    float: left;
    display: block;
    position: relative; 
    /* left: 100%; 
    margin-left: -200%; */
    
}

.about-section-subtitle {
    font-size: 15px;
    font-family: 'Rosarivo', sans-serif;
    text-decoration: underline;
    text-underline-offset: 6px;
}

/* about section */

.active-section {
    background-color: var(--warmgray);
    padding-right: 10%;
}

.active-section h2, .active-section p{
    color: black;
}

.active-pic {
    max-width: 315px;
    margin-left: 10%;
    margin-right: 10%;
    /* width: 100%; */
}

/* inspired section */

.inspired-section {
    background-color: var(--deepblue);
}

.inspired-section h2, .inspired-section p{
    color: var(--calmtan);
}

.inspired-pic {
    max-width: 300px;
    overflow: hidden;
}

.inspired-pic2 {
    max-width: 700px;
}

/* warm section */

.warm-section {
    background-color: var(--calmtan);
    padding-right: 10%;
}

.warm-pic {
    margin-left: 10%;
    max-width: 500px;
}

/* smart section */

.smart-section {
    background-color: var(--olivegreen);
}

.smart-section h2, .smart-section p{
    color: var(--calmtan);
}

.smart-text {
    margin-left: 10%;
}

.smart-pic {
    max-width: 450px;
    margin-right: 10%;
}
/* elevated section */

.elevated-section {
    background-color: var(--offwhite);
}

.elevated-section h2, .elevated-section p{
    color: var(--warmbrown);
}

.elevated-pic {
    overflow: hidden;
    min-width: 800px;
}

@media (max-width: 1220px) {
    .about-section {
        flex-direction: column;
        max-height: none;
        padding: 4% 0 4% 0;
        align-items: center;
    }

    .about-section-pic {
        margin: 0;
        padding: 0;
        max-width: 90%;
        min-width: 0;
    }

    .about-section-pic img {
        object-fit: contain;
        width: 100%;
    }

    .about-section-text {
        margin: 0;
    }

    .inspired-section, .smart-section {
        flex-direction: column-reverse;
    }

    .inspired-pic {
        display: none;
    }
}