@import url('https://fonts.googleapis.com/css2?family=K2D:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Karantina:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');


:root {

    /* Primary Color */
    --cl-1: #1C3B6B;
    --cl-2: #2273BC;

    /* Theme Color */
    --tc-1: #E8D8B6;
    --tc-2: #DDDEE3;
    --tc-3: #ABADB9;
    --tc-4: #787B8E;
    --tc-5: #4D4F5C;
    --tc-6: #23242A;
    --tc-7: #1B1C21;
    --tc-8: #141418;
    --tc-9: #0C0D0F;
    --tc-10: #050506;
    --tc-11: #000000;
    --tc-gradient-1: linear-gradient(0deg, var(--tc-6) 0%, var(--tc-7) 100%);
    --tc-gradient-1-r: linear-gradient(0deg, var(--tc-7) 0%, var(--tc-6) 100%);
}



html, body{
    height: 100%;
    width: 100%;
    position: relative;
    font-family: "K2D";
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    overflow: hidden;
}

a, a:active{
    color: inherit;
    text-decoration: none;
    font-style: normal;
}

.video{
    width: 100%;
    height: 100%;
    position: relative;
    mix-blend-mode: difference;
    overflow: hidden;
}

.modal-cta{
    position: fixed;
    top: 50%;
    left: 50%;
    z-index: 10;
    transform: translate(-50%, -50%);
    background-color: var(--tc-1);
    padding: 20px 30px;
    cursor: pointer;
    border: 1px solid var(--cl-1);
}
.modal-cta i{
    margin-left: 10px;
}

.modal{
    box-sizing: border-box;
    display: none;
    background-color: var(--cl-2);
    position: fixed;
    top: 0;
    left: 0;
    z-index: 50;
    height: 100%;
    width: 100%;
    flex-direction: column;
    justify-content: space-between;
    padding: 40px;
    color: var(--tc-1);
}
.modal.active{
    display: block;
    display: flex;
}
.modal .desc{
    font-family: 'K2D';
    font-size: 30px;
    font-weight: 100;
    font-style: italic;
}

.links-wrapper{
    display: flex;
    flex-direction: column;
    gap: 24px;
    justify-content: space-between;
    align-items: center;
    font-size: 20px;
    position:relative;
}
.links-wrapper div:nth-child(1){
    order: 2;
}
.links-wrapper i{
    pointer-events: none;
}
.close-btn{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 50px;
    height: 50px;
    border-radius: 100px;
    border: 1px solid var(--tc-1);
    cursor: pointer;
    order: 1;
}
.social-wrapper{
    display: flex;
    align-items: center;
    gap: 20px;
    order: 3;
}


.coming-soon-1{
    font-family: 'Karantina';
    font-size: 200px;
    position: absolute;
    bottom: -50px;
    left: 50%;
    transform: translate(-50%, 0);
    z-index: 9;
    color: var(--cl-1);
}

.video-bg {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    z-index: -1;
}

.video-bg iframe {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    min-width: 100% !important;
    min-height: 100%  !important;
    width: 500%;
    height: 100%;
    border: 0;
}


.bg-video {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: -1;
}


.hidden {
  display: none !important;
}



/* Text Set 1 Animation Start */
.text-set-1{
    width: 100%;
    position: absolute;
    bottom: 0;
    transform: translateY(100%);
    transition: 
    transform 0.4s linear,
    font-size 0.3s linear;
    text-align: center;
    font-family: 'Karantina';
    font-size: 80px;
    color: var(--cl-2);
    text-wrap: nowrap;
}

.text-set-1.up {
  transform: translateY(40%);
}

.text-set-1.big {
  font-size: 120px;
}

.text-set-1.inter {
  font-family: 'Inter';
  font-size: 60px;
  transition: font-size 0s linear;
}
.text-set-1.charm {
  font-family: 'Charm';
  font-size: 60px;
  transition: font-size 0s linear;
}
.text-set-1.barrio {
  font-family: 'Barrio';
  font-size: 60px;
  transition: font-size 0s linear;
}
/* Text Set 1 Animation End */





/* Text Set 2 Animation Start */
.text-set-2{
    height: 100%;
    width: 100%; 
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.text-set-2 div{
    text-wrap: nowrap;
    font-family: 'Karantina';
    font-size: 160px;
    line-height: 140px;
    color: var(--cl-2);
}

.text-set-2 div:nth-child(even){
    animation: moveLeft 4s linear infinite;
}
.text-set-2 div:nth-child(odd){
    animation: moveRight 4s linear infinite;
}

@keyframes moveLeft{
    from{transform: translateX(0%);}
    to{transform: translateX(-25%);}
}
@keyframes moveRight{
    from{transform: translateX(0%);}
    to{transform: translateX(25%);}
}
/* Text Set 2 Animation End */





/* Text Set 3 Animation Start */
.text-set-3{
    position: absolute;
    font-family: 'Rethink Sans';
    font-size: 40px;
    color: var(--cl-2);
    text-wrap: nowrap;
}
.text-set-3.pos1{
    top: 40px;
    left: 20px;
}
.text-set-3.pos2{
    top: 200px;
    left: 20px;
}
.text-set-3.pos3{
    top: unset;
    left: unset;
    bottom: 200px;
    right: -10px;
}
.text-set-3.pos4{
    top: -20px;
    left: 50%;
    transform: translateX(-50%);
}
/* Text Set 3 Animation End */





/* Text Set 4 Animation Start */
.text-set-4{
    position: absolute;
    top: 50%;
    left: -20px;
    text-wrap: nowrap;
    font-family: 'Lavishly Yours';
    font-size: 120px;
    letter-spacing: 2px;
    word-spacing: 10px;
    color: var(--cl-2);
    transform: translate(0%, -50%);
    animation: moveLeft4 4s linear infinite;
}

@keyframes moveLeft4{
    from{transform: translate(0%, -50%);}
    to{transform: translate(-20%, -50%);}
}
/* Text Set 4 Animation End */





/* Text Set 5 Animation Start */
.text-set-5{
    position: relative;
    height: 100%;
    width: 100%;
    color: var(--cl-2);
    font-family: 'Rethink Sans';
    font-size: 50px;
}
.text-set-5 .wrapper-1{
    position: absolute;
    top: -20px;
    right: -10px;
    display: flex;
    flex-direction: column;
}
.text-set-5 .wrapper-2{
    position: absolute;
    bottom: -20px;
    left: -10px;
    display: flex;
    flex-direction: column-reverse;
}

.text-set-5 .wrapper-1 > div,
.text-set-5 .wrapper-2 > div {
  opacity: 0;
}

.text-set-5 .visible {
  opacity: 1 !important;
}
/* Text Set 5 Animation End */





/* Text Set 6 Animation Start */
.text-set-6{
    height: 200%;
    width: 200%; 
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    transform: rotate(-10deg) translateY(-25%);
}
.text-set-6 div{
    text-wrap: nowrap;
    font-family: 'Karantina';
    font-size: 160px;
    line-height: 140px;
    color: var(--cl-2);
}

.text-set-6 div:nth-child(even){
    animation: moveLeft2 4s linear infinite;
}
.text-set-6 div:nth-child(odd){
    animation: moveRight2 4s linear infinite;
}
@keyframes moveLeft2{
    from{transform: translateX(0%);}
    to{transform: translateX(-20%);}
}
@keyframes moveRight2{
    from{transform: translateX(0%);}
    to{transform: translateX(20%);}
}
/* Text Set 6 Animation End */




/* Tablet */
@media (min-width: 640px) {
    .text-set-1{
        font-size: 220px;
    }
    .text-set-1.up {
        transform: translateY(40%);
    }
    .text-set-1.big {
        font-size: 450px;
    }
    .text-set-1.inter {
        font-size: 200px;
    }
    .text-set-1.charm {
        font-size: 240px;
    }
    .text-set-1.barrio {
        font-size: 240px;
    }



    .text-set-2 div{
        font-size: 330px;
        line-height: 250px;
    }



    .text-set-3{
        font-size: 120px;
    }
    .text-set-3.pos3{
        right: -20px;
    }
    .text-set-3.pos4{
        top: -70px;
    }



    .text-set-4{
        font-size: 200px;
        letter-spacing: 6px;
        word-spacing: 50px;
    }



    .text-set-5{
        font-size: 80px;
    }
    .text-set-5 .wrapper-1{
        top: -40px;
        right: -20px; 
    }
    .text-set-5 .wrapper-2{
        bottom: -40px;
        left: -20px;
    }



    .text-set-6 div{
        font-size: 330px;
        line-height: 250px;
    }


    .links-wrapper{
        flex-direction: row;
    }
    .close-btn{
        order: 2;
    }
}