/* styles */
html{
    scroll-behavior: smooth;
}
body{
    padding: 0;
    margin: 0;
    background-color: black;

    /* Text */
    --font-primary: Montserrat, sans-serif;
    --font-secondary: DM Mono, monospace;

    /* background colors */
    --background-dark: black;
    --background-mid: hsl(0, 0%, 4%);
    --background-light: #1f1f1f;
    --dark-glass-bg: rgba(0, 0, 0, 0.7);

    /* other colors */
    --brand-color: #e85d17;
    --white: white;
    --white-muted: hsla(0, 0%, 100%, 0.7);
    --dark-gray: #666666;

    /* gradient colors */
    --gradient-start: #CC4C0C;
    --gradient-end: #8A38F5;

    /* others */
    --side-padding-main: 200px;
    --header-glass-blur: blur(60px);
    --glass-blur: blur(10px);
    --transition-time: 0.3s;
}
/* Custom */
.intro-hook-text{
    box-sizing: border-box;
    font-family: var(--font-primary);
    font-weight: normal;
    font-size: 40px;
    color: var(--white);
    text-align: center;
}

/* Text fixing */
h1,h2,h3,h4,p{
    margin: 0;
}
/* Magrins */
.mb-8{
    margin-bottom: 8px;
}
.mb-12{
    margin-bottom: 12px;
}
.mb-16{
    margin-bottom: 16px;
}
.mb-24{
    margin-bottom: 24px;
}
.mb-40{
    margin-bottom: 40px;
}
/* Gap spacing */
.gap-6{
    gap: 6px;
}
.gap-16{
    gap: 16px;
}
.gap-24{
    gap: 24px;
}
.gap-16-40{
    gap: 40px 16px;
}

.border-radius-10{
    border-radius: 10px;
}

.text-center{
    text-align: center;
}
/* Flex box classes */
.flex-center{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.flex-row{
    display: flex;
    flex-direction: row;
}

.align-start{
    align-items: start;
}

.flex-column{
    display: flex;
    flex-direction: column;
}

.space-between{
    justify-content: space-between;
}

.horizontal-flex-layout{
    justify-content: space-between;
    align-items: center;
}

.fit-viewport-height{
    height: calc(100dvh - 160px);
}

.center-max-width{
    height: 600px;
    width: 1200px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}

/* Text sizes/styles */
.text-12{
    font-family: var(--font-primary);
    font-weight: normal;
    font-size: 12px;
}
.text-14{
    font-family: var(--font-primary);
    font-weight: 400;
    font-size: 14px;
}
.title-20{
    font-family: var(--font-primary);
    font-weight: bold;
    font-size: 20px;
}
.title-32{
    font-family: var(--font-primary);
    font-weight: bold;
    font-size: 32px;
}
.large-title{
    font-family: var(--font-primary);
    font-size: 60px;
    font-weight: bold;
    color: var(--white);
    line-height: 110%;  
}
.title{
    font-family: var(--font-primary);
    font-size: 40px;
    font-weight: 600;
    color: var(--white);
    line-height: 110%;  
}
.description{
    font-family: var(--font-primary);
    font-size: 16px;
    color: var(--white-muted);
    font-weight: 300;
    line-height: 150%;
}
/* Text colors */
.text-light{
    color: var(--white);
}
.text-green{
    color: #00FF00;
}
.text-muted{
    color: var(--white-muted);
}
.text-dark{
    color: var(--dark-gray);
}
.text-orange{
    color: var(--brand-color);
}

/* Subtitle classes */
.subtitle{
    font-family: var(--font-secondary);
    font-weight: normal;
    font-size: 14px;
}
.subtitle-color{
    color: var(--brand-color);
}
.subtitle-color::before{
    content: "";
    margin-top: 7px;
    margin-right: 14px;
    float: left;
    width: 4px;
    height: 4px;
    border-radius: 40px;
    background-color: currentColor;
}
/* Buttons */
a{
    text-decoration: none;
    color: currentColor;
    transition: var(--transition-time);
}
a:hover{
    color: var(--brand-color);
}
.text-link{
    display: flex;
    flex-direction: row;
    gap: 6px;
    align-items: center;
    font-family: var(--font-primary);
    font-size: 16px;
    color: var(--white);
    font-weight: 500;
}
.text-link svg{
    width: 16px;
    height: auto;
    fill: currentColor;
}
.btn-small{
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    border-radius: 8px;
    text-decoration: none;
    font-family: var(--font-primary);
    font-weight: 400;
    font-size: 12px;
    box-sizing: border-box;
    transition: var(--transition-time);
}
.btn-small svg{
    width: 16px;
    height: 16px;
}
.btn-normal{
    display: flex;
    cursor: pointer;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 6px;
    padding: 12px 16px;
    height: fit-content;
    width: fit-content;
    border-radius: 10px;
    text-decoration: none;
    font-family: var(--font-primary);
    font-weight: 600;
    font-size: 16px;
    box-sizing: border-box;
    transition: var(--transition-time);
}
.btn-normal svg{
    width: 16px;
    height: 16px;
}
.sub-link{
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 6px;
    text-decoration: none;
    font-family: var(--font-primary);
    font-size: 14px;
    color: var(--white);
    fill: var(--dark-gray);
    transition: var(--transition-time);
}
.sub-link svg{
    width: 20px;
    height: auto;
}
.sub-link:hover{
    transform: translateX(4px);
    color: var(--brand-color);
    fill: var(--brand-color);
}

/* Button colors */
.btn-gray{
    background-color: var(--background-light);
    color: var(--white);
    fill: var(--white);
    border: none;
}
.btn-gray:hover{
    color: var(--white);
    filter: brightness(1.4);
}
.btn-white{
    background-color: var(--white);
    color: black;
    fill: black;
    border: none;
}
.btn-white:hover{
    color: black;
    filter: brightness(0.8);
}

.cta-btn-color{
    background-color: #D44F0C;
    color: var(--white);
    fill: var(--white);
}
.cta-btn-color:hover{
    color: var(--white);
    filter: brightness(1.4);
}

/* Lable */
.lable {
    width: fit-content;
    background-color: rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.1);
    backdrop-filter: var(--glass-blur);
    border-radius: 20px;
    display: flex;
    gap: 12px;
    padding: 12px 16px;
    align-items: center;
}
.lable p {
    font-size: 16px;
    font-weight: 500;
    font-family: var(--font-primary);
    color: var(--white);
}
.lable img {
    width: 28px;
    height: auto;
    border-radius: 100px;
}

/* Forms */
.form {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  width: 500px;
}

.email-input-container {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  width: 100%;
}

.form-input, select {
  padding: 12px 14px;
  background-color: var(--background-mid);
  border: 1px solid var(--background-light);
  border-radius: 10px;
  color: var(--dark-gray);
  font-size: 16px;
  font-family: var(--font-primary);
  width: 100%;
  box-sizing: border-box;
  transition: 0.4s;
}

.form-input:hover {
  background-color: var(--background-light);
}

.form-input:focus {
  outline: 2px solid var(--brand-color);
}

textarea{
  padding: 12px 14px;
  background-color: var(--background-mid);
  border: 1px solid var(--background-light);
  border-radius: 10px;
  color: var(--dark-gray);
  font-size: 16px;
  font-family: var(--font-primary);
  width: 100%;
  box-sizing: border-box;
  transition: 0.4s;
  resize:none;
  field-sizing: content;
  min-height: 100px;
}

/* Seperation lines */
.sepline{
    background-color: var(--background-mid);
    height: 1px;
    width: 100%;
}
.vertical-sepline{
    height: 14px;
    width: 1px;
    background-color: var(--background-light);
}
/* Sections */
.section{
    background-color: var(--background-dark);
    padding: 80px var(--side-padding-main);
}

.split-section{
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 60px;
}
.split-section-showcase{
    height: 500px;
    width: 100%;
}
.split-section-showcase img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 10px;
    aspect-ratio: 1;
}
.split-section-content{
    height: 100%;
    width: 100%;
}
/* Intro section */
.height-100-viewport{
    height: 100dvh;
}

.min-height-100-viewport{
    min-height: 100dvh;
}

.bg-img{
    background-image: url();
}
.width-80{
    width: 80%;
}
.width-100{
    width: 100%;
}
.bg-img-section{
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    background-clip: border-box;
}

.bg-img-gradient{
    height: 100%;
    background: linear-gradient(45deg, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0) 68%);
}
.bg-img-text-container{
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    padding: 100px var(--side-padding-main);
    display: flex;
    flex-direction: column;
    align-items: start;
    justify-content: end;
}

.background-darken{
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 60px;
    padding: 40px 100px;
    background-color: rgba(0, 0, 0, 0.8);
}

/* FAQ */
.faq-container{
    padding: 24px;
    border-radius: 10px;
    background-color: var(--background-mid);
    border: 1px solid var(--background-light);
}
.faq-title-container{
    cursor: pointer;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
}
.faq-title-container svg{
    fill: var(--white-muted);
    width: 24px;
    height: auto;
    transition: var(--transition-time);
}
.faq-content{
    opacity: 0;
    max-height: 0;
    transition: var(--transition-time);
    overflow: hidden;
}
.faq-container.active .faq-content{
    margin-top: 16px;
    opacity: 1;
    max-height: 300px;
}
.faq-container.active .faq-title-container svg{
    transform: rotateZ(180deg);
}

/* Image Gallery */
.gallery-img-title{
    opacity: 0;
    position: absolute;
    width: 100%;
    bottom: 0;
    padding: 24px;
    box-sizing: border-box;
    background: linear-gradient(0deg,rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0) 100%);
    color: var(--white);
    z-index: 10;
    transition: var(--transition-time);
}
.gallery-img-container{
    overflow: hidden;
    position: relative;
    height: 500px;
    width: 100%;
    border-radius: 10px;
    border: 1px solid var(--background-light);
}
.gallery-img-container img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: var(--transition-time);
}
.gallery-img-container:hover.gallery-img-container img{
    transform: scale(1.05);
}
.gallery-img-container:hover .gallery-img-title{
    opacity: 1;
}

.flex-column .gallery-img-container{
    height: 800px;
}

/* Glass cards */
.glass-card{
    width: 100%;
    box-sizing: border-box;
    background-color: var(--dark-glass-bg);
    border: 1px solid var(--background-light);
    backdrop-filter: var(--glass-blur);
    border-radius: 10px;
    padding: 24px;
}
.card{
    width: 100%;
    box-sizing: border-box;
    background-color: var(--background-mid);
    border: 1px solid var(--background-light);
    border-radius: 10px;
    padding: 24px;
}
.card img{
    width: 100%;
    object-fit: cover;
}
.card video{
    width: 100%;
    height: auto;
    object-fit: contain;    
}

/* Grids */
.card-grid-3{
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}
.card-grid-2{
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* Custom Gradients */
.showcase-section-gradient{
    position: relative;
    overflow: hidden;
    background-color: transparent;
    border-radius: 0 0 24px 24px;
}
.showcase-section-gradient::after{
    content: "";
    position: absolute;
    border-radius: 50%;
    width: 5000px;
    height: 5000px;
    bottom: -4740px;
    left: 50%;
    transform: translateX(-50%);

    background: radial-gradient(circle, var(--gradient-start) 64%, var(--gradient-end) 70%);
    z-index: -1;
    filter: blur(60px);
}
.showcase-header-gradient{
    position: relative;
    overflow: hidden;
    background-color: transparent;
}
.showcase-header-gradient::after{
    content: "";
    position: absolute;
    border-radius: 50%;
    width: 5000px;
    height: 5000px;
    bottom: -4650px;
    left: 00%;
    transform: translateX(-50%);

    background: radial-gradient(circle, var(--gradient-start) 64%, var(--gradient-end) 70%);
    z-index: -1;
    filter: blur(200px);
}

/* Patreon section */
.patreon-section{
    padding: 40px;
}
.patreon-card{
    border-radius: 10px;
    background-image: url(../assets/img/earth_showcase.jpg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    background-clip: border-box;
}
.patreon-text-content{
    width: 100%;
}
.patreon-logo svg{
    height: 250px;
    width: 100%;
    fill: var(--white);
}

/* Header */
.header{
    width: 100%;
    position: fixed;
    box-sizing: border-box;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding: 16px var(--side-padding-main);
    background-color: var(--dark-glass-bg);
    backdrop-filter: var(--header-glass-blur);
    border-bottom: 1px solid var(--background-light);
    z-index: 100;
}
.header-logo-container{
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 12px;
}
.header-logo-container .header-logo{
    width: 32px;
    height: 32px;
    border-radius: 100px;
}
.header-logo-container .header-text{
    color: var(--white);
    font-family: var(--font-primary);
    font-weight: 600;
    font-size: 16px;
}
.header-left{
    display: flex;
    flex-direction: row;
    align-items: center;
}
.header-right{
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 24px;
}

.header-links-container{
    display: flex;
    flex-direction: row;
    align-items: center;
}
.header-link{
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    padding: 8px 12px;
    font-family: var(--font-primary);
    font-weight: 400;
    font-size: 14px;
    color: var(--white);
    fill: var(--dark-gray);
    transition: var(--transition-time);
}
.header-link svg{
    width:16px;
    height: auto;
}
.header-link:hover{
    color: var(--brand-color);
}

.header-left svg{
    cursor: pointer;
    fill: var(--brand-color);
}

/* Header Dropdown */
.header-dropdown{
    padding: 8px 12px;
}
.header-dropdown-title{
    text-decoration: none;
    display: flex;
    flex-direction: row;
    justify-content: start;
    align-items: center;
    gap: 10px;
    font-family: var(--font-primary);
    font-weight: 400;
    font-size: 14px;
    color: var(--white);
    fill: var(--dark-gray);
    transition: var(--transition-time);
}
.header-dropdown-title svg{
    width: 20px;
    height: auto;
    transition: var(--transition-time);
}
.header-dropdown:hover .header-dropdown-title{
    color: var(--brand-color);
}
.header-dropdown:hover .header-dropdown-title svg{
    transform: rotateZ(-180deg);
}
.dropdown-content{
    position: absolute;
    top: calc(40px + 16px);
    opacity: 0;
    visibility: hidden;
    display: flex;
    flex-direction: column;
    align-items: start;
    gap: 16px;
    padding: 16px 24px 16px 16px;
    background-color: var(--background-dark);
    border: 1px solid var(--background-light);
    border-radius: 10px;
    transform: translateY(-14px);
    transition: var(--transition-time);
}
.header-dropdown:hover .dropdown-content{
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* Mobile Menu */
.mobile-menu{
    height: 100%;
    width: 100%;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    position: fixed;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
    padding: 16px var(--side-padding-main);
    background-color: var(--background-dark);
    z-index: 1000;

    opacity: 0;
    transform: translateX(100dvw);
    transition: var(--transition-time);
}

.mobile-menu .header-dropdown:hover .dropdown-content{
    position: static;
}
.mobile-links-links{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
    width: 100%;
}
.mobile-links-container{
    display: flex;
    flex-direction: column;
    align-items: start;
    width: 100%;
}
.mobile-links-links .btn-small{
    width: 100%;
}
#open_menu_icon{
    display: none;
}

/* Footer */
footer{
    padding: 40px var(--side-padding-main);
    background-color: var(--background-dark);
    border-top: 1px solid var(--background-mid);
}
.footer-container{
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}
.footer-logo-container{
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 12px;
}
.footer-logo-container .header-logo{
    width: 40px;
    height: 40px;
    border-radius: 100px;
}
.footer-logo-container .header-text{
    color: var(--white);
    font-family: var(--font-primary);
    font-weight: 600;
    font-size: 20px;
}
.footer-text-row {
  display: flex;
  gap: 14px;
}
.social-icons {
  display: flex;
  align-items: center;
  gap: 18px;
}
.social-link {
  height: 20px;
  width: auto;
  fill: var(--white);
  transition: 0.4s;
}
.social-link:hover {
  fill: var(--brand-color);
}
.footer-right{
    display: flex;
    flex-direction: row;
}
.footer-item-title{
    color: var(--white);
    font-family: var(--font-primary);
    font-weight: bold;
    font-size: 20px;
}
.footer-links-container{
    display: flex;
    flex-direction: column;
    width: 300px;
    gap: 14px;
}
.footer-bottom{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
}

/* Animating */
.fade {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease-out 0.3s, transform 0.6s ease-out 0.3s;
}

.fade.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Video */
.video-container{
    width: 100%;
    max-height: 100%;
}
.video-container iframe{
    width: 100%;
    max-height: 100%;
    box-sizing: border-box;
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid var(--background-light);
}

/* Feature section */
.features-contents{
    width: 100%;
    position: sticky;
    top: 150px;
    display: flex;
    flex-direction: column;
    align-items: start;
    gap: 24px;
}

.features-section-showcase{
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 60px;
}
.features-section-showcase img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 10px;
    aspect-ratio: 1;
}

.feature-content .description{
    transform: translateY(-14px);
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    transition: var(--transition-time) ease-in-out;
}

.feature-title{
    cursor: pointer;
    color: var(--dark-gray);

    transition: var(--transition-time) ease-in-out;
}

.feature-img{
    opacity: 0;
    transform: translateY(-50px);
    transition: var(--transition-time) ease-in-out;
    scroll-margin-top: 10dvh;
}
.feature-img.active{
    opacity: 1;
    transform: translateY(0);
}

.feature-img-mobile{
    opacity: 0;
    visibility: hidden;
    max-height: 0;
    display: none;
    margin-top: 24px;
    width: 100%;
    height: 300px;
    object-fit: cover;
    border-radius: 10px;
    aspect-ratio: 1;
    transition: var(--transition-time) ease-in-out;
}

.feature-img-mobile.active{
    opacity: 1;
    max-height: 100%;
    visibility: visible;
    transform: translateY(0);
}

.feature-content.active .feature-title{
    color: var(--white);
}
.feature-content.active .description{
    margin-top: 16px;
    transform: translateY(0);
    max-height: 500px;
    opacity: 1;
}

.feature-section{
    display: flex;
    flex-direction: row;
    align-items: start;
    gap: 60px;
}

.zoom-scroll{
    animation: zoom-scroll ease-in-out;
    animation-timeline: scroll();
}
@keyframes zoom-scroll{
    10%{
        background-size: 140%;
    }
    20%{
        background-size: 100%;
    }
}

ul{
    margin: 0;
    padding: 0;
}
li{
    list-style-position: inside;
}
li::marker {
    font-size: 16px;
}
.inquiry-banner{
    position: fixed;
    left: var(--side-padding-main);
    right: var(--side-padding-main);
    top: calc(68px + 16px);
    padding: 16px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    box-sizing: border-box;
    background-color: var(--dark-glass-bg);
    backdrop-filter: var(--glass-blur);
    border: 1px solid var(--background-light);
    border-radius: 10px;
    font-family: var(--font-primary);
    font-size: 16px;
    color: var(--white);
    font-weight: 500;
    z-index: 20;
    transform: translateY(0);
    transition: var(--transition-time);
}
.inquiry-banner.active{
    transform: translateY(-100px);
}