@font-face {
    font-family: CircularStd;
    src: url("../fonts/CircularStd-Black.woff2");
    font-weight: 900;
}
@font-face {
    font-family: CircularStd;
    src: url("../fonts/CircularStd-Bold.woff2");
    font-weight: 700;
}
@font-face {
    font-family: CircularStd;
    src: url("../fonts/CircularStd-Medium.woff2");
    font-weight: 500;
}
@font-face {
    font-family: CircularStd;
    src: url("../fonts/CircularStd-Book.woff2");
}

@font-face {
    font-family: Cyrene;
    src: url("../fonts/Cyrene-Regular-Advanced.otf");
}

html, body{
    margin: 0;
    padding: 0;
    background-color: #F5F1E8;
    color: #071522;
    font-family: 'CircularStd', sans-serif;
}
.container{
    max-width: 100vw;
    height: 100vh;
    padding: 0 10vw;



}
a{
    color: #071522;
}

header{
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 20px;
}
.logo{
    max-height: 5vh;
    margin: 2vh;
    height: 2.5vh;
}
.menu{
    display: grid;
    grid-template-columns: repeat(3, 5vw);
    align-items: center;
}

.menu-item{
    display: flex;
    justify-content: flex-end;
}

.menu-item a{
    z-index: 1;
    text-align: center;
    font-weight: 500;
    text-decoration: none;
}

.menu-item:hover a{
    font-weight: 900;
}

.menu-dot{
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background-color: #E30713;
    position: relative;
    left: -12px;
    top: 7px;
    opacity: 0;

}

.menu-item:hover .menu-dot{
    font-weight: 700;
    top: -8px;
    opacity: 1;
    transition-duration: .5s;
}
.home{
    height: 90vh;
    display: flex;
    margin: 0 2vh;
    flex-direction: column;
}

.home-decor{
    flex: 1;
    background-image: url("../img/line-7.png");
    background-size: 100% 100%;
    background-repeat: no-repeat;
    margin-bottom: 2vh;
}

#typed{
    font-size: 24pt;
}

.typed-cursor{
    font-size: 24pt;
}

.slider-container {
    max-width: 60vh;
}

.slides {
    display: none;
}

.slides img{
    height: 80vh;
    width: 60vh;
}

.dot {
    cursor: pointer;
    height: 15px;
    width: 15px;
    margin: 0 2px;
    background-color: #CDD3C9;
    border-radius: 50%;
    display: inline-block;
    transition: background-color 0.6s ease;
}

.active, .dot:hover {
    background-color: #E30713;
}

.fade {
    -webkit-animation-name: fade;
    -webkit-animation-duration: 2s;
    animation-name: fade;
    animation-duration: 2s;
}

@-webkit-keyframes fade {
    from {opacity: .4}
    to {opacity: 1}
}

@keyframes fade {
    from {opacity: .4}
    to {opacity: 1}
}

.name-txt{
    font-family: 'Cyrene', 'CircularStd', sans-serif;
    font-size: 9vw;
    text-transform: uppercase;
    letter-spacing: 0.5vw;
    margin: 0;
}

.name-txt:first-of-type{
    -webkit-animation: fade-in-up 1s 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
    animation: fade-in-up 0.5s 1s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}

.name-txt:last-of-type{
    -webkit-animation: fade-in-up 0.5s 2.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
    animation: fade-in-up 0.5s 2.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}

@-webkit-keyframes fade-in-up {
    from {opacity: 0; margin-bottom: 0}
    to {opacity: 1; margin-bottom: 5vh;}
}

@keyframes fade-in-up {
    from {opacity: 0; margin-bottom: 5vh;}
    to {opacity: 1; margin-bottom: 5vh;}
}

@-webkit-keyframes fade-in-up-delayed {
    from {opacity: 0; margin-top: 0; margin-bottom: 5vh;}
    to {opacity: 1; margin-top: -5vh; margin-bottom: 5vh;}
}

@keyframes fade-in-up-delayed {
    from {opacity: 0; margin-top: 0; margin-bottom: 5vh;}
    to {opacity: 1; margin-top: -5vh; margin-bottom: 5vh;}
}

@-webkit-keyframes roll-right {
    from {max-width: 0;}
    to {max-width: 100%;}
}

@keyframes roll-right {
    from {max-width: 0;}
    to {max-width: 100%;}
}


.name-cont{
    display: flex;
    align-items: center;
    margin-left: 0.3vw;
}



.name-cont div {
    min-height: 2vh;
    width: 10vw;
    max-width: 10vw;
    margin: 0 0.5vw 5vh 0.5vw;
    background-image: url("data:image/svg+xml,%3Csvg width='383' height='3' viewBox='0 0 383 3' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cline x1='383' y1='1.5' y2='1.5' stroke='%230C1723' stroke-width='3'/%3E%3C/svg%3E%0A");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center center;
    -webkit-animation: roll-right 1s 1.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
    animation: roll-right 1s 1.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
    overflow: hidden;
}

.txt-cont p {
    font-size: 1.5vw;
    -webkit-animation: fade-in-up-delayed 0.5s 3s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
    animation: fade-in-up-delayed 0.5s 3s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}

.large-txt{
    font-size: 24pt;
}

.mid-txt{
    font-size: 18pt;
}

.thanks{
    display: grid;
    grid-template-columns: auto auto;
    grid-column-gap: 5vw;
    align-items: center;
}


.thank, .you {
    font-size: 100pt;
    text-align: right;
    margin: 0 !important;
}


.signature p{
    font-weight: bold;
    font-size: 9pt; !important;
    text-transform: uppercase;
    letter-spacing: 5px;
    margin: 10px 0 !important;
}

.thanks-container{
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 100px;
}

@media (max-width: 426px) {
    .container {padding: 0 4vw;}
    header {flex-direction: column; align-items: flex-end; }
    .menu {display: flex; flex-direction: column; align-items: flex-end; margin-bottom: 15px;}
    .menu-item {margin: 5px -20px 5px 0;}
    .logo {margin: 2vh 0;}
    .home {margin: 0; height: 80vh;}
    .txt-cont p {font-size: 4.5vw; margin-top: 15px;}
    .name-cont {font-size: 15vw;}
    .name-cont div {width: 14vw; max-width: 14vw; margin: 0 4vw 5vh 4vw}
}