/* Fonts */
@import url(app.css);
@import url(fonts.css);


body, html {
    display: flex;
    flex-direction: column;
    background-color: #f7931e;
    height: 100%;
    width: 100%;
}

.hero {
    display: flex;
    justify-content: space-between;
    flex-direction: row;
    align-items: center;
    height: 100%;
    width: 100%;
    /* overflow: hidden; */

    @media (max-width: 769px) { /* Desktop */
        align-items: center;
        justify-content: space-between;
        flex-direction: column;
        height: 100%;
        width: 100%;
    }
}

.content-left {
    display: flex;
    justify-content: space-between;
    flex-direction:column;
    padding: 36px;
    align-items: flex-start;
    gap: 20px;
    height: 100vh;

    @media (max-width: 768px) { /* Tablet */
        display: flex;
        justify-content: space-between;
        flex-direction: column;
        align-items: center;
        height: 100vh;
    }
}

.text-container {
    display: flex;
    flex-direction: column;
    margin: 36px 0px 40px 0px;
    height: 100%;
    justify-content: center;
    

    @media (max-width: 768px) { /* Tablet */
        align-items: center;
        text-align: center;
        width: 100%;
        justify-content: space-between;
    }
}


.h1-title {
    font-size: var(--fs-1);
    color: var(--color-black-900);
    font-weight: 400;
    margin: 20px 0px 16px 0px;
    line-height: 100px;

    @media (max-width: 768px) { /* Tablet */
        font-size: 84px;
        line-height: 84px;
        display: flex;
        justify-content: center;
        align-items: center;
        text-align: center;
        width: 100%;
        /* padding: 0px 8px 0px 8px; */
    }
}

.subtitle {
    font-size: var(--fs-2);
    color: var(--color-black-900);
    font-weight: 400;
    font-family: 'Just Another Hand', cursive;
    line-height: 20px;
    margin: 20px 0px 0px 0px;

    @media (max-width: 768px) { /* Tablet */
        align-items: center;
        text-align: center;
    }
}

.tablet-image {
   display: none; 

   @media (max-width: 768px) { /* Tablet */
    display: flex;
    justify-content: center;
    width: 80%;
    height: 100%;
}
}

.button-wrapper {
    display: flex;
    flex-direction: column;
    gap: 24px;
    margin: 20px 0px 0px 0px;
    width: 100%;

    @media (max-width: 768px) { /* Tablet */
        display: flex;
        justify-content: space-between;
        flex-direction: column;
        text-align: center;
        width: 100%;
    }
}

.button-dark {
    padding: 24px;
    font-size: var(--fs-3);
    background: var(--color-black-900);
    color:var(--color-white);
    text-decoration: none;
}

.button-dark:hover {
    background: var(--color-white);
    color: var(--color-black-900);
     box-sizing: inherit;
    transition-property:all;
    transition-duration: 0.6s;
    transition-timing-function:ease-in-out;
}

.banner-cat {
   display: flex;
    justify-content:flex-end;
    align-items: center;
    /* margin:  -60px 0px 320px 0px; */
}

.content-right {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    height: 100vh;
    margin: 0px 24px 0px 0px;
    /* flex-shrink: 0; */

   
    @media (max-width: 768px) { /* Tablet */
        justify-content: center;
        align-items: center;
        height: auto;
    }

    @media (max-width: 480px) { /* Mobile */
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }
}

.content-right img {
    height:100%;
    width: 639px;

    @media (max-width: 768px) { /* Tablet */
        display: none;
        width: 80%;
        height: auto;
    }

    @media (max-width: 480px) { /* Mobile */
       display: none;
    }
}

.footer {
    text-align: left;
    font-weight: 400;
    font-family: 'Just Another Hand', cursive;
    font-size: var(--fs-3);
    padding: 60px 0px 48px 0px;

    @media (max-width: 480px) { /* Mobile */
        text-align: center;
    }
}

#logo {
    cursor: pointer;
}