* {
	margin: 0;
    padding: 0;
}

html, body {
    background-color: rgb(19, 7, 30);
    width: 100%;
    font-size: 1em;
    overflow-x: hidden;
}
/*
NAVIGATION BAR
*/
.navbar {
    position: absolute;
    display: flex;
    padding: 10px;
    padding-left: 475px;
    justify-content: space-between;
    width: 100%;
    box-sizing: border-box;
    
    opacity: 0;
    animation: fade-in-4 0.5s 1s ease-out forwards;
}
@keyframes fade-in-4 {
    from {
        opacity: 0;
    }
    to {
        opacity: 1
    }
}
.navbarlinks {
    align-items: center;
    display: flex;
}
.navbar .navbarlinks ul {
    list-style-type: none;
    background: rgb(39, 14, 62);
    padding: 0px;
    margin: 0px;
    display: flex;
    overflow: hidden;
}
.navbar .navbarlinks ul li {
    padding: 0 25px;
}
.navbar .navbarlinks a {
    font-family: "Hammersmith one", serif;
    padding: 15px;
    display: block;
    background-image: linear-gradient(to right, rgb(119, 33, 200), rgb(255, 0, 238));
    background-clip: text;
    color: transparent;
    text-align: center;
    transition: transform 0.7s ease;
}
.navbar .navbarlinks a:hover{
    transform: scale(1.1);
}
/* 
TOP PART
*/

#welcome-top {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    max-width: 960px;
    height: 90vh;
    margin-left: auto;
    margin-right: auto;
}

#welcome-top h1 {
    text-align: center;
    font-family: "Limelight", serif;
    font-size: 85px;
    background: linear-gradient(to bottom, #cccccc 22%, #d6c5c5 24%, #b8b8b8 26%, #b8b8b8 27%, #d9d9d9 40%, #201f1f 78%);
    background-clip: text;
    color: transparent;
    opacity: 0;
    transform: translateY(-100vh);
    animation: h1-welcome-drop 0.8s 0.2s ease-out forwards, 
                    h1-shadow-fade 1.3s 0.5s ease-in forwards;
}
@keyframes h1-welcome-drop {
    from { opacity: 0; transform: translateY(-100vh); }
    to { opacity: 1; transform: translateY(0); }
}
@keyframes h1-shadow-fade {
    from { text-shadow: 0 0 0 transparent; }
    to { text-shadow: 6px 6px 10px rgb(43, 41, 41); }
}

#welcome-top .below-1 {
    text-align: center;
    font-family: "Hammersmith One", serif;
    font-size: 35px;
    background: linear-gradient(to right, rgb(255, 255, 255),rgb(53, 53, 59),rgb(253, 253, 253));
    background-clip: text;
    color: transparent;
    opacity: 0;
    animation: fade-in-1 0.5s 1s ease-out forwards;
}
@keyframes fade-in-1 {
    from { opacity: 0; }
    to { opacity: 1; }
}
#welcome-top .below-2 {
    text-align: center;
    font-family: "Audiowide", serif;
    font-size: 30px;
    background: linear-gradient(to right, rgb(0, 251, 255), rgb(255, 100, 237), rgb(255, 255, 255), rgb(0, 251, 255), rgb(255, 100, 237));
    background-clip: text;
    color: transparent;
    opacity: 0;
    animation: fade-in-2 1s 2s  ease-out forwards, below-2-shadow 0.3s 2.5s  ease-out forwards;
}
@keyframes fade-in-2 {
    from { opacity: 0; }
    to { opacity: 1; }
}
@keyframes below-2-shadow {
    from { text-shadow: none; }
    to { text-shadow: 2px 2px 5px rgb(241, 165, 184); }
}
.indicator-arrows {
    position: absolute;
    top: 83%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.indicator-arrows span {
    display: block;
    width: 50px;
    height: 50px;
    border-bottom: 10px solid rgb(255, 0, 234);
    border-right: 10px solid rgb(255, 0, 234);
    transform: rotate(45deg);
    margin: -10px;
    opacity: 0;
    animation: animate 3s infinite;
    animation-delay: 3s;
}
.indicator-arrows span:nth-child(1) {
    animation-delay: 3.25s;
}
.indicator-arrows span:nth-child(2) {
    animation-delay: 3.5s; 
    border-bottom: 10px solid rgb(5, 255, 243);
    border-right: 10px solid rgb(5, 255, 243);
}
.indicator-arrows span:nth-child(3) {
    animation-delay: 3.75s;
}
@keyframes animate {
    0% {
        opacity: 0;
        transform: rotate(45deg) translate(-20px, -20px);
    }
    50% {
        opacity: 1;
    }
    100% {
        opacity: 0;
        transform: rotate(45deg) translate(20px, 20px);
    }
}
.contact-us-button {

    padding: 20px;
    margin-top: 30px;
    display: block;
    font-family: "Hammersmith One", serif;
    font-size: 45px;
    opacity: 0;
    border: 3px solid transparent;
    border-radius: 25px;
    border-color: #c800ff;

    overflow: hidden;
    justify-content: center;
    align-items: center;
    transform: scale(1.1);
    cursor: pointer;


    animation: fade-in-3 0.6s 3s ease-in forwards, shadowappear 5s 3s ease-in-out infinite;
        transition: text-shadow 0.6s ease, box-shadow 0.6s ease, transform 0.6s ease;
}
.contact-us-button::after {
    content: "";
    background-image: linear-gradient(to bottom, rgb(58, 0, 84), rgb(179, 39, 255), rgb(58, 0, 84));
    z-index: -1;
    position: relative;
    height: 100%;
    width: 100%;
    left: 0;
    top: 0;
    border-radius: 15px;
}
.contact-us-button::before {
    content: "";
    background: linear-gradient(45deg, #641ecd, #8f50ee, #c800ff, #ff00ff, #c800ff, #8f50ee, #641ecd);
    position: absolute;
    top: -2px;
    left: -2px;
    background-size: 600%;
    z-index: -1;
    width: calc(100% + 4px);
    height: calc(100% + 4px);
    filter: blur(8px);
    transition: opacity 0.3s ease-in-out;
    border-radius: 10px;
    opacity: 1;
}
@keyframes gloweffect {
    0% {
        background-position: 0 0;
    }
    50% {
        background-position: 400% 0;
    }
    100% {
        background-position: 0 0;
    }
}
@keyframes fade-in-3 {
    from {
        opacity: 0;
    }
    to {
        opacity: 1
    }
}
@keyframes shadowappear{
    0%, 100% {
        text-shadow: 0px 0px 5px #6600ff,
        0px 0px 5px #6600ff;
    }
    50% {
        text-shadow: 0px 0px 25px #6600ff,
        0px 0px 25px #6600ff;
    }
}
.contact-us-button:hover {
    box-shadow: 3px 3px 15px #f700ff;
    transform: translateY(-5px);
}
.contact-us-button:hover::before {
    opacity: 1;
    animation: gloweffect 20s linear infinite;
}
.contact-us-button:hover:after {
    background: transparent;
}

/* 
ABOUT US BOX
*/

#about-us {
    display: flex;
    overflow: auto;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    margin-top: 250px;
    margin-bottom: 50px;
    margin-left: 100px;
    margin-right: 100px;
    padding: 50px;

    border: 10px solid transparent;
    border-image: linear-gradient(to right, rgb(255, 255, 255),rgb(16, 16, 17),rgb(235, 227, 227));
    border-image-slice: 1;
    opacity: 0;
    transform: translateX(-50%);
    transition: transform 1.5s ease-in-out, opacity 1.5s ease-in-out;
}
#about-us h1 {
    padding: 25px;
    text-align: center;
    font-family: "Audiowide", serif;
    font-size: 52px;
    background: linear-gradient(to bottom, rgb(235, 230, 230),rgb(138, 138, 138));
    background-clip: text;
    color: transparent;
}


.about-us-boxes {
    display: flex;
    flex-flow: row wrap;
    overflow: auto;
    justify-content: space-evenly;

}
@media (max-width: 1000px) {
  .about-us-boxes {
    flex-flow: column nowrap;
    align-items: center;
    justify-content: center;
  }
  .about-us-boxes section {

}
}
#about-us.is-visible {
    opacity: 1;
    transform: translateX(0);
}


.about-us-boxes section {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin: 15px;
    width:33.33%;
    min-width: 1%;
}
.about-us-boxes img {
  border-radius: 50%;
  padding: 20px;

}
.about-us-boxes h2 {
    text-align: center;
    font-family: "Hammersmith One", serif;
    font-size: 45px;
    background: linear-gradient(to right, rgb(0, 251, 255), rgb(255, 100, 237), rgb(255, 255, 255), rgb(0, 251, 255), rgb(255, 100, 237));
    background-clip: text;
    color: transparent;
    padding: 15px;
}
.about-us-boxes p {
    text-align: left;
    font-family: "IBM Plex Sans", sans-serif;
    font-weight: 500;
    font-style: normal;
    font-variation-settings:
    "wdth" 100;
    font-size: 1.4em;
    color: #fff;
    background-clip: text;
}

/*
WHAT CAN WE OFFER BOXES
*/

#offer1 {
    display: flex;
    overflow: hidden;
    flex-direction: row;
    justify-content: space-between;
    gap: 20px;
    align-items: center;
    box-sizing: border-box;
    padding: 50px;
    margin-top: 50px;
    margin-bottom: 50px;
}


.offer1-desc-box, .offer2-desc-box {
    contain: content;
    overflow: hidden;
    width: 50%;
    height: 400px;
    display: flex;
    flex-direction: column;
    padding-top: 5px;
    padding-bottom: 50px;
    padding-left: 50px;
    padding-right: 50px;

    border: 10px solid transparent;
    border-image: linear-gradient(to bottom, rgb(234, 47, 248), rgb(226, 218, 218), rgb(68, 6, 88));
    border-image-slice: 1;
    opacity: 0;
}
@media (max-width: 1260px) {
  .offer1-desc-box, .offer2-desc-box {
    height: 500px;
  }
  .about-us-boxes section {

}
}


.offer1-desc-box {
    transition: transform 0.8s ease-out, opacity 0.7s ease-in-out;
    transform: translateX(-80%);
}
.offer1-desc-box.show {
    opacity: 1;
    transform: translateX(0);
}



.offer2-desc-box {
    transition: transform 0.8s ease-out, opacity 0.7s ease-in-out;
    transition-delay: 1.3s;
    transform: translateX(80%);
}

.offer2-desc-box.show {
    opacity: 1;
    transform: translateX(0);
}

.offer1-desc-box h1, .offer2-desc-box h1 {
    text-align: center;
    font-family: "Hammersmith One", serif;
    font-size: 45px;
    background: linear-gradient(to top, rgb(47, 11, 44), rgb(160, 33, 145), rgb(255, 255, 255), rgb(149, 55, 177), rgb(48, 2, 79));
    background-clip: text;
    color: transparent;
    padding: 15px;
}
.offer1-desc-box h2, .offer2-desc-box h2 {
    text-align: center;
    font-family: "Hammersmith One", serif;
    font-size: 35px;
    background: linear-gradient(to bottom, rgb(255, 0, 247), rgb(255, 100, 237), rgb(156, 8, 255), rgb(0, 251, 255), rgb(255, 100, 237));
    background-clip: text;
    color: transparent;
    padding: 15px;
    text-shadow: 1px 1px 15px rgb(191, 47, 248);
    margin-bottom: 30px;
}
.offer1-desc-box p, .offer2-desc-box p {
    text-align: left;
    font-family: "Rokkitt", serif;
    font-weight: 500;
    font-style: normal;
    font-variation-settings:
    "wdth" 100;
    font-size: 1.4em;
    color: #fff;
    background-clip: text;
    padding: 7px;
    padding-bottom: 55px;
}
.feline-cloud-button {
    background-image: linear-gradient(to bottom, rgb(162, 1, 243), rgb(255, 255, 255), rgb(170, 0, 255));
    padding: 15px;
    margin: 0 auto;
    display: block;
    text-shadow: 2px 2px 4px rgb(234, 47, 248);
    font-size: 25px;
    font-family: "Hammersmith One", serif;
    border: 5px solid transparent;
    border-radius: 5px;
    cursor: pointer;
    transition: box-shadow 0.6s ease, transform 0.6s ease;
}
.feline-cloud-button:hover {
    box-shadow: 10px 10px 15px rgba(156, 8, 255, 0.722);
    transform: translateY(-5px);
}
.website-help-button {
    background-image: linear-gradient(to right, rgb(25, 8, 33), rgb(83, 4, 107), rgb(170, 0, 255));
    padding: 15px;
    margin: 0 auto;
    display: block;
    text-shadow: 1px 1px 2px rgb(38, 3, 61),
    2px 2px 3px rgb(94, 6, 129),
    4px 4px 4px rgb(165, 15, 240);
    font-size: 25px;
    font-family: "Hammersmith One", serif;
    border: 5px solid transparent;
    border-color: rgb(25, 8, 33);
    border-radius: 5px;
    cursor: no-drop;
    transition: box-shadow 0.8s ease;
}
.website-help-button:hover {
    box-shadow: 0px 0px 27px rgba(156, 8, 255, 0.722);
}