@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&display=swap');

/* Keyframes for the swinging effect */
@keyframes swing {
    0% {
        transform: translateY(0); /* Initial position */
    }
    25% {
        transform: translateY(10px); /* Moves 10px down */
    }
    50% {
        transform: translateY(0); /* Back to original position */
    }
    75% {
        transform: translateY(-10px); /* Moves 10px up */
    }
    100% {
        transform: translateY(0); /* Back to original position */
    }
}

* {
    font-family: 'Montserrat', sans-serif;
    font-size:100%;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

p {
    margin-top:12px;
    margin-bottom:12px;
}

ul {
    list-style:none;

    li {
        margin:10px 0px;
        font-size:1.2rem;
    }

    li:before {
        content: "\25A0";
        color: #E6C06C;
        font-weight: bold;
        display: inline-block;
        width: 20px;
        margin-left: 0px;
    }

}

b {
    font-weight: 700;
}

h2 {
    font-size:2.5rem;
    text-align:center;
    margin-bottom:30px;
}

#page {
    position:relative;
    opacity:0;
    transition: opacity 0.3s;
}

#content {
    position:relative;
}

#page #logo img {
    width:100px;
}

#page.root #logo img {
    width:200px;
}

#header {
    position: absolute;
    display:flex;
    top: 0;
    left: 0;
    width: 100%;
    padding: 30px;

    #menu {
        flex:1;
        display:flex;
        justify-content: flex-end;
        gap: 20px;
        text-align:right;
        font-weight:700;

        .menu-item {

            a {
                color:#fff;
                text-decoration: none;
                text-transform: uppercase;
            }

        }

    }

}

#menu-button {
    display:none;
    position:absolute;
    top:10px;
    right:10px;
    cursor:pointer;
}

#frontpage-slideshow-container {
    position:relative;
    height: 100vh;

    #frontpage-slideshow {
        position: relative;
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: center;
        /* align-items: center; */
        overflow: hidden;

        img {
            opacity:0;
            position: absolute;
            max-width: none;
            min-height: 100%;
            min-width: 100%;
            object-fit: cover;
            transition: opacity 1s;
        }

        img.active {
            opacity:1;
        }

    }

    #front-text {
        position:absolute;
        top: 50%;
        left: 50%;
        color:#fff;
        transform: translate(-50%, -50%);
        text-align:center;

        #title {
            font-size:4rem;
            font-weight:700;
            margin-bottom:30px;
        }

        #subtext {
            font-size:2rem;
        }

        #scroll-arrow {
            margin:50px auto 0px auto;
            width:100%;
            text-align:center;
            animation: swing 1.5s linear infinite;

            img {
                width:80px;
                cursor:pointer;
            }

        }

    }

}

.more-button {
    margin:30px 0px;

    a {
        background-color:#DC6747;
        border-radius:8px;
        padding:12px;
        color:#fff;
        text-decoration:none;
    }

    img {
        position:relative;
        top:5px;
    }

}

#root-about-section {
    display:flex;
    margin:30px auto;
    justify-content: center;

    #root-logo {
        display:block;
        width:250px;
    }

}

#root-portfolio {
    margin-top:50px;
    margin-bottom:50px;
    text-align:center;

    h2 {
        margin-bottom:30px;
    }

}

.spotlight-group {
    text-align:center;
}

#spotlight.show {
    z-index:2000000;
}

#heading-container {
    position:relative;
    overflow: hidden;

    #background-image img {
        width: 100%;
        min-height:200px;
        max-height: 300px;
        object-fit: cover;
    }

    h1 {
        font-weigth:700;
        font-size:4rem;
        color:#fff;
        position:absolute;
        top:120px;
        left:50px;
    }

}

.text-container {
    margin:0px auto 0px auto;
    max-width:1200px;
    padding:6px;

    p {
        font-size:1.1rem;
    }

}

#error-message {
    margin:20px 0px;
    padding:10px;
    background-color:#FF7575;
    color:#fff;
    font-size:1.2rem;
}

form {
    margin:30px 0px;

    .form-field {
        margin:20px 0px;
    }

    label {
        display:block;
        margin:10px 0px 4px 0px;
    }

    input[type="password"] {
        padding:8px;
    }

}

button[type="submit"] {
    padding:10px;
    font-size:1.2rem;
    text-transform: uppercase;
    border-radius:10px;
    cursor:pointer;
}

#gallery-container {

    .category {
        margin-bottom:30px;

        .spinner {

            img {
                width:100px;
            }

        }

    }

    button {
        display:block;
        margin:0px auto;
    }

}

.gallery-image {
    position:relative;
    display:inline-block;
    margin:0px 4px 4px 0px;

    .image-button {
        position:absolute;
        cursor:pointer;
    }

    .delete-button {
        top:0px;
        right:0px;
    }

    .rotate-button {
        top:0px;
        left:0px;
    }

    .left-button {
        bottom:4px;
        left:0px;
    }

    .right-button {
        bottom:4px;
        right:0px;
    }

}

#contact-info {
    background-color:#340001;
    padding-top:50px;

    .text-container {
        margin-bottom:0px;
    }

    h2 {
        color:#E6C06C;
        font-size:2.3rem;
        margin-bottom:50px;
        line-height:90%;
        height:55px;
        transition: font-size 0.7s ease;
    }

    #contact-details {
        display:flex;

        div {
            flex:1;
            text-align:center;
            color:#fff;
            margin-bottom:30px;

            img {
                width:64px;
                margin-bottom:10px;
            }

        }

    }

    #whatsapp-chat {
        text-align:center;
        margin-top:10px;

        a {
            font-size:0.7rem;
            color:#fff;
        }

        img#whatsapp-icon {
            position:relative;
            top:8px;
            left:-4px;
            width:24px;
            margin:0px;
        }

    }

}

#sandras-credits {
    font-size:0.7rem;
    color:#fff;
    text-align:center;
    margin-bottom:20px;
}

#contact-logo {
    display:block;
    width:150px;
    margin:0px auto 30px auto;
}

#training-overview, #photo-shoot {
    background-color:#340001;

    .text-container {
        position:relative;
        color:#fff;

        img {
            opacity:0.3;
        }

        h2 {
            text-align:left;
            margin-top:30px;
            color:#E6C06C;
        }

    }
}

#photo-shoot {

    .text-container {

        img#shoot {
            position:absolute;
            right:0px;
            bottom:0px;
        }

        #photoshoot-text {
            position:relative;
            padding:10px;
            z-index:1000000;
        }

    }

}

#training-overview {

    .text-container {

        img#student {
            position:absolute;
            left:0px;
            bottom:0px;
        }

        #training-text {
            position:relative;
            float:right;
            padding:10px;
            z-index:1000000;
        }

    }

}

#root-aroma {
    position:relative;

    img#aroma {
        position:absolute;
        right:0px;
        top:0px;
        opacity:0.3;
    }

    #aroma-text {
        position:relative;
        padding:10px;
        z-index:1000000;

        h2 {
            text-align:left;
            margin-top:30px;
        }

    }

}

#training-body, #aroma-body, #sessions-body {
    padding-bottom:30px;

    p {
        font-size:1.2rem;
    }

    h2 {
        text-align:left;
        margin-top:50px;
        margin-bottom:20px;
    }

    .feature-photo {
        display:block;
        width:30%;
        min-width:150px;
        margin:30px auto;
        border-radius:12px;
    }

}

#login-logout {
    text-align:center;
    margin-top:50px;
    margin-bottom:10px;

    a {
        color:#aaa;
    }

}

.background-image-container {
    position:relative;
    top:-4px;
    background-size: 100% auto;
    background-repeat: repeat-y;
    background-position: top;
}

#background-image-sessions {
    background-image: url('/images/sessions-background.jpg');
}

#background-image-training {
    background-image: url('/images/training-background.jpg');
}

#background-image-aroma {
    background-image: url('/images/aroma-background.jpg');
}