@import url("https://use.typekit.net/ync6xbo.css");
html{
    scroll-behavior: smooth !important;
}

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: "filson-soft", sans-serif;
    font-weight: 400;
    font-style: normal;
}

body{
    --main-color1: #EE5E57;
    --main-color2: #AC4F4B;
    --main-color3: #F5EFCA;
    --main-color4: #FFF5E8;
    --base-gap: 40px;
    --large-gap: 80px;
    --small-gap: 20px;
    background-color: var(--main-color4);
}

h1, h2, h3, h4, h5{
    font-family: "scotch-display", sans-serif;
    font-weight: 600;
    color: #AC4F4B;
    width: fit-content;
}

h1{
    font-size: 112pt;
    line-height: 95%;
}

h2{
    font-size: 48pt;
}

h3{
    font-size: 32pt;
}

header{
    color: var(--main-color1);
    display: flex;
    width: 100%;
    flex-flow: row nowrap;
    justify-content: space-between;
    align-items: center;
    padding: 120px 160px;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 20;
}

header a{
    color: var(--main-color1);
    text-decoration: none;
    font-size: 18pt;
    transition: .5s ease;
}

.menu ul, .menu-foot ul{
    display: flex;
    flex-flow: row nowrap;
    gap: 40px;
}

.menu ul li, .menu-foot ul li{
    list-style-type: none;
}

.menu ul li a{
    display: block;
    padding: 15px 12px;
    position: relative;
}

.menu ul li a::before{
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 3px;
    background-color: #EE5E57;
    transition: .5s ease;
}

.menu ul li:hover a::before, .menu-foot ul li:hover a::before{
    width: 100%;
}

.main-cta{
    color: var(--main-color4);
    display: block;
    background-color: var(--main-color2);
    padding: 15px 24px;
    width: fit-content;
    border-radius: 17px;
    transition: .5s ease;
    font-size: 18pt;
    text-decoration: none;
}

.main-cta:hover{
    background-color: var(--main-color1);
}

section{
    height: 100vh;
    max-height: 100vh;
    padding: 160px;
    display: flex;
    flex-flow: row nowrap;
}

.hero{
    position: relative;
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
    gap: var(--base-gap);
    overflow: hidden;
    padding: 200px 160px 0 160px;
    color: #EE5E57;
    background-image: url("../Assets/Images/DAYA/background-daya-1.svg");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.two-third{
    max-width: 60%;
    gap: var(--base-gap);
    display: flex;
    flex-flow: column nowrap;
}

.two-third p, .half-about p{
    font-size: 22pt;
}

.hero-img{
    display: flex;
    flex-flow: column nowrap;
    max-height: 100%;
    align-items: center;
    position: relative;
    filter: drop-shadow(5px 5px 18px #ac4e4b70);
}

.hero-dl{
    display: flex;
    flex-flow: row wrap;
    gap: var(--base-gap);
}

.star{
    position: absolute;
    top: 45px;
    left: -65px;
    max-width: 200px;
    animation: rotate 5s linear infinite;
}

@keyframes rotate{
    0%{
        transform: rotate(0deg);
    }
    100%{
        transform: rotate(360deg);
    }
}

.hero-img .mockup{
    display: block;
    width: 100%;
    max-width: 680px;
    object-fit: contain;
    justify-self: flex-start;
}

.fadein{
    opacity: 0;
    animation: FadeIn .5s ease-in-out forwards;
}

@keyframes FadeIn{
    0%{
        transform: translateY(-20px);
        opacity: 0;
    }
    100%{
        transform: translateY(0px);
        opacity: 1;
    }
}

#more{
    flex-flow: row wrap;
    background-color: var(--main-color1);
    background-image: url("../Assets/Images/DAYA/background-daya-3.svg");
    background-size: cover;
    background-position: center;
    align-items: stretch;
    gap: var(--base-gap);
    overflow: hidden;
}
.third{
    width: 100%;
    max-width: calc(33% - 40px);
    display: flex;
    flex-flow: column nowrap;
    justify-content: center;
    align-items: center;
    gap: var(--small-gap);
    text-align: center;
    padding: 40px 60px;
    background-color: var(--main-color1);
    border: 7px solid var(--main-color2);
    border-radius: var(--small-gap);
    max-height: 40%;
    z-index: 10;
}

.third h2, .third p{
    text-align: center;
    width: 100%;
    color: var(--main-color4);
}

.third p{
    font-size: 18pt;
}

.icon-third{
    width: 64px;
    height: 64px;
}

.half{
    max-width: calc(50% - 40px);
    width: 100%;
    position: relative;
    display: flex;
    flex-flow: column wrap;
    justify-content: center;
    max-height: 60%;
}

.second{
    flex-direction: row;
}

.half img{
    width: 100%;
    align-self: flex-start;
}

.half .star{
    left: auto;
    right: 0;
    width: 300px;
    height: 300px;
}

.half p, .half h2{
    color: var(--main-color4);
}

.half p{
    font-size: 22pt;
    margin-right: -20%;
}

footer{
    background-color: var(--main-color2);
    width: 100%;
    display: flex;
    padding: 120px 160px;
    gap: var(--large-gap);
    background-image: url("../Assets/Images/DAYA/background-daya-2.svg");
    background-size: cover;
    background-repeat: no-repeat;
}

footer>a{
    color: var(--main-color4);
}

footer>a:hover{
    color: var(--main-color3);
}

.menu-foot ul{
    flex-direction: column;
}

.menu-foot ul li a{
    font-size: 18pt;
    color: var(--main-color4);
    text-decoration: none;
    position: relative;
}

.menu-foot ul li a::before{
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 3px;
    background-color: var(--main-color4);
    transition: .5s ease;
}

.copy{
    width: 100%;
    height: 45px;
    background-color: var(--main-color1);
    display: flex;
    justify-content: center;
    align-items: center;
    color: var(--main-color4);
}

.copy a{
    color: var(--main-color4);
}

#about{
    padding: 0%;
    overflow: hidden;
}

.half-about{
    max-width: 50%;
    display: flex;
    justify-content: center;
    flex-flow: column wrap;
    color: var(--main-color1);
    gap: var(--base-gap);
}

.half-about p{
    margin-right: 160px;
}