:root {
    --primary-1-dark: #392A58;
    --primary-1: #614E89;
    --default: #333;
    --invert: #ffffff;
    --primary-1-light: #E5DBFB;
    --primary-1-vlight: #EDE6FC;
}
@font-face {
    font-family: "Sora";
    src: url("sora.ttf") format("opentype");
}
*{
    position:relative;
}
body {
    display: flex;
    flex-direction: column; /* Stack sections vertically */
    margin: 0; /* Remove default body margins */
    font-family: 'Sora', sans-serif;
    background: var(--primary-1-dark);
    color: var(--invert);
    width: 100%;
    min-width: 320px;
    font-weight:400;
}

a {
    color: var(--invert);
    text-decoration: none;
}
h1 {
    font-weight: 200;
    font-size: 50px;
}
h2 {
    font-weight: 400;
}
emp {
    font-weight: 700;
}

.section {
    width: 100%; /* Each section takes full width */
    padding: 40px 80px; /* Add some padding to each section */

    box-sizing: border-box;
    min-height:0;
    display:flex;
}
@media screen and (max-width: 500px) {
    .section {
        padding: 20px 15px;
    }

    h1 {
        font-size: 30px;
    }
    
}
/* Convenience styles - adjust as needed */

.container {
    max-width: 960px; /* Limit container width for readability */
    margin: 0 auto; /* Center the container */
    width: 100%;
}

.container.columns {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    flex-wrap:wrap;
}

.float-left {
    float: left;
}
.float-right {  
    float: right;   
    text-align:center;
}
.flex-big {
    flex: 1;
    flex-grow: 2;
    flex-basis: 300px;
}
.flex-small {
    flex-grow:1;
}
.button {
    height: auto;
    width: 100px;
    font-size:20px;
    background-color: var(--invert);
    border-radius: 80.0px;
    margin: auto;
    border: 3.2px solid var(--default);
    box-shadow: inset 1.6px 1.6px 0 white, inset -2.4px -2.4px 0 rgba(0, 0, 0, 0.4);
    filter: drop-shadow(inset 5px 5px 0 black);
    transition: box-shadow 0.2s 0s, transform 0.2s 0s;
    z-index: 2;
    outline: none;
    display:inline-block;
    margin-top: 20px;
    padding: 15px 15px;
}
a div.button{
    color: var(--default);
}


/* _1 */

#logo {
    width: 80%;
    margin: 0 auto;
}

#logo > img {
    width:100%;
}

svg-animate {
    width: 100%;
    display:block;
}


#nav {
    text-align:center;
}
#nav > a {
    margin: 0 20px;
}

#_2 {
    background: var(--primary-1-light);
    color: var(--primary-1-dark)
}
#_2 h2 {
    text-align: center;
}

#_3 {
    background: var(--primary-1-vlight);
    color: var(--primary-1-dark)
}

/* _4 */
#_4 {
    /*border: 1px solid red;*/
    height:fit-content;
}


#_1, #_2, #_3 {
    /*display:none;*/
}
#hand-image {
    background-image: url('hand.png');
    background-size:contain;
    background-repeat: no-repeat;
    aspect-ratio: 2 / 3;
    width:300px;
    background-position: bottom left;
}
#_4 {
    overflow:hidden;
}
#_4_1{
    width:300px;
    position:absolute;
    top:0;
    left:0;
}
#_4_2{
    width:300px;
    position:absolute;
    left:200px;
    bottom: 0;
    margin-bottom:-40px;
}
#_4_3{
    height: 100%;
    width: calc(100% - 500px);
    right:0;
    position:relative;
    float:right;
    font-weight: 200;
    margin-top:15px;
}
#_4_3 li{
    text-align: left;
    margin: 10px 0;
}
@media only screen and (max-width: 950px) {
    #_4_2{
        left:0;
    }
    #_4_3{
        width: calc(100% - 300px);
    }
    #_4{
        min-height: 600px;
    }
}
@media screen and (max-width: 700px) {
    #_4 .container{
        width: 100%;
    }
    #_4_1{
        width: 100%;
        text-align: center;
        position:static;
    }
    #_4_2{
        right:-140px;
        left:auto;
    }
    #_4_3{
        width: 100%;
        position: static;
        float: none;
    }
    #hand-image {
        width: 250px;
    }
    #_4_3 > div > div {
        margin-right:130px;
    }
}
@media screen and (max-width: 330px) {
    #_4_2{  
        display: none;
    }
    #_4_3 > div > div {
        margin-right:0;
    }
}

#_5 {
    background-image: url('bg-1.jpg');
    background-size:cover;
    background-attachment: fixed;
    color: var(--primary-1-dark);
    font-size:90%;
}
#_5 .container{
    flex-wrap:nowrap;
}
#_5_1 {
    flex-basis: 60%;
    order:2;
    flex-shrink: 2;
    margin: 0 20px;
}
#_5_2 {
    flex-basis: 240px;
    width: 240px;
    order:1;
    /*text-align: justify;*/
    flex-shrink: 0;
}
#_5_3 {
    flex-basis: 240px;
    width: 240px;
    order:3;
    /*text-align: justify;*/
    flex-shrink: 0;
}
@media only screen and (max-width: 1050px) {
    #_5 .container{
        flex-wrap:wrap;
    }
    #_5_1 {
        order:1;
        flex-basis: 100%;
        margin-bottom: 20px;
    }
    #_5_2 {
        order:2;
        flex-basis: 40%;
    }
    #_5_3 {
        order:3;
        flex-basis: 40%;
    }
}
@media only screen and (max-width: 700px) {
    #_5 .container{
        flex-wrap:wrap;
    }
    #_5_1 {
        order:1;
        flex-basis: 100%;
        margin-bottom: 20px;
    }
    #_5_2 {
        order:2;
        flex-basis: 100%;
    }
    #_5_3 {
        order:3;
        flex-basis: 100%;
    }
}
#_6 {
    background-image: url('bg-2.jpg');
    background-size:cover;
    background-position: bottom right;
    color: var(--primary-1-dark);
    min-height:250px;
}
#_6 .container{
    width: 100%;
}
#_6_1 {
    float:right;
    position:absolute;
    right:0;
    width: 300px;
    text-align:center;
}
#_6_2 {
    order:1;
    flex-basis: 40%;
    width: calc(100% - 320px);

    display:flex
}
#_6_2 ul {
    align-self:center;
}
#_6_2 li {
    margin: 10px 0;
}
@media only screen and (max-width: 700px) {
    #_6_1 {
        position:static;
        width:100%;
    }
    #_6_2 {
        position:static;
        width: 100%;
        display:block;
    }
}

#_7 {
    font-weight: 300;
}
#privacy-small {
    font-size:80%;
    font-weight:200;
    margin-top: -10px;
}