:root {
    --gold: rgb(253, 215, 118);
    --dark-blue: #202229;
    --green: #3d5e1f;
    --grey: #eae7e0;  
    --blue: #2a2d35;
    --hover-color: var(--gold);

    --fsz-title-primary: 36px;
    --fsz-title-secondary: 34px;
    --fsz-text: 22px;
    --ls-title: 3px;
    --ls-text: 0.6px;
}

@font-face {
    font-family: Lexend;
    src: './assets/fonts/Lexend.ttf';
}

/* ANIMATIONS */
@keyframes TextSlideUp {
    0% { transform: translateY(200px); }
    100% { transform: translateY(0); }
}
@keyframes appear {
    from {
        opacity: 0;
        transform: translateY(200px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

html {
    scroll-behavior: smooth;
    scroll-padding-top: 80px;
}

li { list-style: none;}
b {color: var(--gold);}

body {
    position: relative;
    font-family: Lexend, sans-serif;
    font-size: var(--fsz-text);
    background-color: var(--blue);
    margin: 0;
    padding: 0;
    overflow-x: hidden;
    -webkit-overflow-x: hidden;
}

header {
    position: fixed;
    top: 0;
    left: 0;
    display: block;
    width: 100%;
    max-height: 100px;
    z-index: 1000;
    padding: 0 120px;
    margin-bottom: 0px;
    padding-top: 16px;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;

    background-color: transparent; 
    border-bottom: 1px solid var(--gold);
    transition: all 0.5s ease-in;

    .container-fluid,
    .navbar-nav {
        gap: 16px;
    }
    .navbar-nav .nav-link {
        transition: all 0.4s ease-in;
        color: var(--grey); 
        text-decoration: underline 1px var(--gold);
        text-underline-offset: 8px;
    }
}
.header-scrolled,
header:has(.show) {
    transition: background-color 0.3s ease;
    background-color: var(--dark-blue);
} 

header .logo {
    display: flex;
    align-items: center;
    gap: 12px;
}

header .logo img {
    height: 72px;
    width: auto;
}

header .logo_title {
    font-size: 1.2rem;
    font-weight: bold;
    color: black;
    text-decoration: none;
}

.navbar-nav {
    display: flex;
    align-items: center;
    gap: 16px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.navbar-nav .nav-link {
    text-decoration: underline 1px var(--gold);
    text-underline-offset: 8px;
    transition: all 0.4s ease-in;
}

.navbar-toggler {
    background: none;
    border: none;
    padding: 8px;
}

.navbar-toggler svg {
    width: 24px;
    height: 24px;
    stroke: black;
}

.header-scrolled {
    background-color: var(--dark-blue);
    transition: background-color 0.3s ease;
}

section {
    margin-bottom: 64px;
    padding: 40px 32px;
    display: flex;
    flex-direction: column;
    align-items: center;
    border-radius: 16px;
    border: 3px solid var(--dark-blue);
    background-color: var(--dark-blue);
    color: var(--grey);
    transition: all 0.4s ease;
    animation-name: appear;
    animation-iteration-count: 1;
    animation-duration: 2s;
    animation-timing-function: ease-in;
    animation-fill-mode: forwards;
}
section>h4 {
    margin-bottom: 24px;
    text-align: center;
    width: 100%;
    font-size: var(--fsz-title-secondary);
    letter-spacing: var(--ls-title);
    border-bottom: 3px solid var(--grey);
    width: 80%;
    padding-bottom: 16px;
}

.leaves li {
    position: relative;
    padding-left: 32px;
    &::after {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 15px;
        height: 11px;
        transform: rotate(25.5deg) skew(45deg) ;
        background-color: var(--gold);
    }
}
.gold-table {
    letter-spacing: var(--ls-text);
    width: 680px;
    padding: 24px;
    border-radius: 16px;
    text-align: center;
    background-color: #202229;
    color: var(--grey);
    border: 3px solid var(--grey);
}

.left {
    align-self: start;    
    text-align: left;     
}
.right {
    align-self: end;
    text-align: right;  
} 

.logo {
    display: flex;
    margin-right: 16px;
    img {
        width: 108px;
        object-fit: contain;
        margin: -24px -28px -0px -24px;
    }
    .logo_title {
        font-size: var(--fsz-title-secondary);
        color: var(--grey);
        padding-bottom: 8px;
        letter-spacing: var(--ls-text);
    }
}

.navbar-toggler {
    outline: none;
    border: none;
    svg {
        transition: all 0.4s ease;
        width: 40px;
        height: 40px;
        stroke: var(--grey);
        background: none;
        outline: none;
        border: none;
    }
}

.header-scrolled .navbar-toggler svg {
    stroke: var(--gold);
}

.hero {
    height: 100vh;
    width: 100vw;
    position: relative;
    overflow: hidden;
    border-radius: 0;
    border: none;
    border-bottom: 3px solid var(--green);
}
.hero__content {
    position: absolute;
    top:  50%;
    left: 50%;
    translate: -50% -50%;
    width: 80%;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    z-index: 10;
    animation-name: TextSlideUp;
    animation-duration: 1.2s;
    animation-timing-function: ease-in;
    animation-fill-mode: forwards;
    color: white;
}
.hero__title {
    font-size: var(--fsz-title-primary);
    margin-bottom: 40px;
    letter-spacing: var(--ls-title);
    text-transform: uppercase;
    width: 60%;
}
.hero__text {
    font-size: var(--fsz-title-secondary);
    letter-spacing: var(--ls-text);
    line-height: 1.7;
}
.hero-vid {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center -4px;
}

.about { text-align: center; }

.features ul {
    margin-top: 24px;
    display: flex;
    flex-direction: column;
    gap: 24px;
    li::after {
        top: 8px;
        left: 7px;
    }
}

.demo-stats {    
    background-color: transparent;
    text-align: center;
}
.demo-stats__list {
    margin-top: 16px;
    padding: 24px 0;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 32px 24px;
}
.demo-stats__list__item {
    min-width: 160px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 16px;
    padding: 20px 16px;
    border-radius: 16px;
    background-color: #202229;
    border: 3px solid var(--grey);
    color: var(--grey);
    letter-spacing: var(--ls-text);
    line-height: 1.2;
    transition: all 0.4s ease;
    .stats__head {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 18px;
        svg {
            width: 64px;
            fill:  var(--grey);
            padding: 8px;
            border-radius: 12px;
        }
    }
    .stats__bottom {
        display: flex; 
        justify-content: center;
        span { font-weight: 600; }
        svg {
            width: 26px;
            margin-top: -6px;
            margin-right: -7px;
        }
    }
}

.benefits {
    display: block;
    padding-top: 0;
    padding-bottom: 16px;
    background-image: url('./assets/img.png');
    background-size: cover;
    background-repeat: no-repeat;
    h4 {
        color: inherit;
        margin-bottom: 40px;
        padding: 32px 0;
        width: 100%;
        background-color: transparent;
    }
}
.benefits__list {
    align-self: start;
    letter-spacing: var(--ls-text);
    margin-top: 180px;
    padding-inline-start: 0px;
    display: flex;
    flex-direction: column;
    gap: 24px;
    li {
        width: fit-content;
        border-radius: 16px;
        background-color: var(--dark-blue);
        border: 3px solid var(--grey);
        padding: 8px 24px 8px 32px;
        &::after {
            top: 18px;
            left: 9px;
        }
    }
}

.our_vision {
    letter-spacing: var(--ls-text);
    color: var(--grey);
    position: relative;
    text-align: center;
    h4 {
        width: 80%;
        color: inherit;
    }
    p {
        padding-left: 40px;
        padding-right: 40px;
        border: none;
        width: 80%;
        text-align: center;
    }
}
.vision-vid {
    position: relative;
    top: 0;
    left: 0;
    width: 70%;
    margin: 24px 0;
    border: 3px solid var(--grey);
    border-radius: 16px;
}

.project_roadmap {
    background-color: transparent;
    background-image: url('./assets/r.png');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: 0 -100px;
    border: none;
    border-top: 3px solid var(--dark-blue);
    border-radius: 0;
    overflow: hidden;
    &>h4 { 
        padding-bottom: 32px; 
        color: var(--grey);
    }
}
.project_roadmap .phases__list {
    gap: 20px;
    margin-top: 24px;
    width: 100%;
    display: flex;
    flex-direction: column;
    padding: 0 0px;
    position: relative;
    margin-bottom: 160px;
}

.phase_item {
    width: 80%;
    max-width: 800px;
    position: relative;
    padding-bottom: 40px;
    padding-top: 24px;
    background-color: #202229;
    color: #eae7e0;
    transition: all 0.4s ease;
    border: 3px solid var(--gold);
    h4 {
        margin-bottom: 24px;
        span {
            color: var(--gold);
        }
    }
    ul  {
        letter-spacing: var(--ls-text);
        line-height: 1.5;
        padding-inline-start: 0;
    }
    li {
        position: relative;
        margin-bottom: 8px;
        &:not(:last-child) {margin-bottom: 16px;}
    }
}
.phase_item:first-child {
    left: 45%;
    top: 0;
}
.phase_item:nth-child(2) {
    top: 280px;
    left: 10%;
}
.phase_item:nth-child(3) {
    top: 280px;
    left: 45%;    
}
.phase_item:nth-child(4) {
    bottom: -180px;
    left: 5%;
}

footer {
    max-width: 100vw;
    max-height: 600px;
    padding: 40px 24px 64px 24px;
    border-top: 3px solid var(--dark-blue);
    color: var(--grey);
    background-image: url('./assets/footer.png');
    background-position: center top;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
    .container {
        padding: 0;
    }
    .footer-items {
        margin-top: 24px;
        display: flex;
        flex-wrap: wrap;
        gap: 24px;
        justify-content: space-between;
    }
    .logo {
        display: none;
        padding-top: 8px;
        width: fit-content;
        height: 100%;
        .logo_title { color: var(--grey); }
    }
    .name {
        position: absolute;
        top: 50%;
        width: 140px;
        right: 160px;
    }
}
.footer__nav {
    letter-spacing: var(--ls-text);
    display: flex;
    gap: 16px;
    flex-direction: column;
    .nav-link {
        transition: all 0.4s ease-in;
        text-decoration: underline 1px var(--gold);
        text-underline-offset: 8px;
    }
}
footer .contacts {
    display: flex;
    gap: 24px;
    align-self: end;
    justify-self: flex-end;
    svg {
        width: 32px;
        fill: var(--grey);
        transition: all 0.4s ease-in;
        &:hover { fill: var(--hover-color); }
    }
    a {
        transition: all 0.4s ease-in;
        color: var(--grey);
        text-decoration: none;
        &:hover {
            color: var(--hover-color);
            text-decoration: underline 2px var(--hover-color);
        }
    }
    .insta { grid-area: insta; }
    .linkedin { grid-area: linkedin; }
    .mail { grid-area: mail; color: var(--gold); }
}

@media(hover:hover) {
    header .navbar-collapse .nav-link:hover, 
    .footer__nav .nav-link:hover,
    .contacts .nav-link:hover {
        color: var(--hover-color);
        text-decoration: underline 2px var(--hover-color);
    }
    .logo:hover .logo_title {color: var(--hover-color);}
    .demo-stats__list__item:hover {
        transform: translate(0, -16px);
    }
    .phase_item:hover {
        transform: translate(0, -16px);
    }
}

@supports (animation-timeline: view()) {
    section {
        animation-timeline: view();
        animation-range: entry 0% cover 32%;
    }
    .project_roadmap {
        animation-range: entry 0% cover 20%;
    }
    @media (max-width: 521px) {
        section { 
            animation-range: entry 0% cover 25%;
        }
    }
}

@media (max-width: 1680px) {
    .phase_item:nth-child(2) {
        top: 240px;
        left: 5%;
    }
}
@media (max-width: 1480px) {
    header {
        padding: 16px 80px 8px 80px;
        .navbar-nav  {
           width: 100%;
           justify-content: right;
        }
    }
    .hero__title { width: 100%; }
    .benefits {
        background-position: 40% top;
        .gold-table { width: 70%; }
    }
    .our_vision p {
        padding-left: 0px;
        padding-right: 0px;
    }
    .project_roadmap {
        background-position: -140px -70px;
    }
    .phase_item:first-child {
        top: 0px;
        left: 40%;
        width: 60%;
    }
    .phase_item:nth-child(2) {
        top: 190px;
        left: 16px;
    }
    .phase_item:nth-child(3) {
        top: 260px;
        left: 32%;    
    }
    .phase_item:nth-child(4) {
        bottom: -200px;
        left: 0%;
    }
}
@media (max-width: 1250px) {
    header {        
        padding: 16px 40px 8px 40px;
    }
    .benefits {
        background-position: 30% top;
    }
    .benefits__list {
        margin-top: 140px;
    }
    .phase_item:nth-child(3) {
        top: 250px;
        left: 30%;    
    }
    footer { background-position: center 70%; }
}
@media (max-width: 1200px) {
    header {
        padding: 16px 8px 0 8px;
        white-space: nowrap;
        .navbar-nav  {
            gap: 8px;
        }
        .logo {
            margin-right: 8px;
            img {
                margin: -24px -28px -0px -40px;
            }
        }
    }
    .hero__content { width: calc(100% - 56px); }
    .hero__text { margin-top: 16px; }
    .benefits {
        background-position: 45% top;
    }
    .benefits__list {
        margin-top: 120px;
        padding-right: 32px;
        li:last-child {
            width: 90%;
        }
    }
    .our_vision {
        padding-bottom: 8px;
        p {
            padding: 0 32px;
            width: 90%;
        }
    }
    .vision-vid { width: 80%; }
    .project_roadmap {
        background-position: -160px -70px;
        margin-bottom: 40px;
        .phases__list {
            margin-bottom: 0;
            gap: 40px;
        }
    }
    .phases__list .phase_item {
        top: 0;
        left: 0;
        width: 80%;
    }
    .phase_item:first-child,
    .phase_item:nth-child(3) {
        align-self: end;
    }
    footer {
        background-position: center 82%;
        padding: 40px 24px 40px 24px; 
    }
}
@media (max-width: 991px) {
    :root {
        --fsz-title-primary: 32px;
        --fsz-title-secondary: 30px;
        --fsz-text: 22px;
    }
    header {
        .container-fluid { position: relative; }
        .navbar-nav  {
            justify-content: start;
            gap: 24px;
        }
        .navbar ul {
            flex-direction: row;
            margin-left: 8px;
        }
        .navbar-toggler {
            position: absolute;
            top: 0;
            right: 0px;
        }
    }
    .hero__content {
        width: calc(100% - 64px);
        .hero__title {
            margin-bottom: 40px;
        }
        .hero__text {
            width: 90%;
            font-size: 28px;
        }
    }
    .features {
        padding-inline-start: 0;
    }
    .demo-stats__list {
        padding: 0 24px;
        grid-template-columns: repeat(2, 1fr);
        gap: 32px 24px;
    }
    .benefits {
        background-position: 10% top;
        .gold-table {  width: 85%; }
    }
    .our_vision {
        p {
            padding: 0 0px;
            width: 100%;
        }
    }
    .vision-vid { width: 100%; }
    .project_roadmap {
        background-position: 55% -40px;
    }
    footer {
        padding-bottom: 16px;
        background-position: center 50%;
        .contacts {
            --icon-width: 28px;
            width: 240px;
            display: grid;
            grid-template-areas: 
            'linkedin insta'
            'mail mail';
            grid-template-columns: 1fr var(--icon-width);
            justify-items: end;
            svg { width: var(--icon-width); }
            .insta {grid-area: insta;}
            .linkedin {grid-area: linkedin;}
            .mail {grid-area: mail;}
        }
        .name { top: 72px; }
    }
}

@media (max-width: 991.98px) {
  .navbar-collapse {
    background-color: var(--dark-blue);
    padding: 16px;
  }

  .navbar-collapse .navbar-nav {
    flex-direction: column;
    align-items: flex-start;
  }

  .navbar-collapse .nav-link {
    width: 100%;
    padding: 8px 0;
  }
}
@media (max-width: 780px) {
    .benefits>h4,
    .our_vision>h4 { padding: 24px 0; }
    .our_vision {padding-top: 8px;}
    .phase_item>h4 { 
        font-size: 26px;
        border-bottom: 2px solid var(--gold);
        margin-bottom: 32px;
        padding-bottom: 16px;
    }
    .benefits__list li:last-child {width: 100%;}
    .project_roadmap {
        background-position: 45% -40px;
    }
    .phases__list {
        margin-bottom: 40px;
        gap: 24px;
    }
    .phases__list .phase_item {
        width: 100%;
    }
}
@media (max-width: 767px) {
    :root {
        --fsz-title-primary: 28px;
        --fsz-title-secondary: 28px;
    }
    section { margin-bottom: 40px; }
    header {
        .navbar-nav  {
            justify-content: start;
            flex-wrap: wrap;
            line-height: 1;
        }
    }
    .hero__content {
        .hero__text {
            font-size: 24px;
        }
    }
    .features {
        padding: 24px 8px; 
        ul 
        {
            margin-top: 16px;
            padding: 0;
        }
    }
    .demo-stats__list { 
        gap: 16px; 
        padding: 0; 
        margin: 0;
    }
    .benefits {
        padding-bottom: 8px;
        .gold-table {width: 100%;}
    }
    .benefits__list {
        margin-top: 80px;
        padding-left: 16px;
    }
    footer .name {
        right: 80px;
    }
}
@media (max-width: 600px) {
    :root {
        --fsz-title-secondary: 24px;
        --fsz-text: 20px;
    }
    .benefits .gold-table {width: 100%;}
    .benefits__list {
        margin-top: 72px;
        padding: 0;
    }
    .project_roadmap {
        background-position: 35% -16px;
        margin-bottom: 40px;
        .phases__list {
            margin-top: 40px;
            gap: 40px;
            h4 {font-size: 22px;}
        }
    }
    .logo {
        img {
            width: 90px;
            margin: -24px -26px 0px -0px;
        }
    }
    footer .name {  right: 40px; }
}

@media (max-width: 521px) {
    section { 
        margin-bottom: 32px; 
    }
    .project_roadmap .phases__list {gap: 16px;}
    footer {
        padding-left: 0;
        .footer__nav {
            width: 100%;
        }
    }
}

@media (max-width: 481px) {
    :root {
        --fsz-title-secondary: 22px;
        --fsz-text: 18px;
    }
    section { 
        margin-bottom: 3px;
        border-radius: 0;
    }
    .features, .demo-stats, .our_vision {margin-bottom: 0;}
    .container, .container-fluid {
        margin: 0; 
        padding: 0;
    }
    header {
        .navbar {
            padding: 8px;
        }
        .navbar-toggler {
            svg {
                width: 30px;
                height: 30px;
            }
        }
    }
    .hero__content {
        .hero__title {
            font-size: 26px;
        }
        .hero__text {
            font-size: 22px;
        }
    }
    .demo-stats__list {
        grid-template-columns: repeat(1, 1fr);
        row-gap: 24px;
        margin-bottom: 0;
    }
    .demo-stats__list__item {
        min-height: 200px;
        .stats__head {font-size: 22px;}
    }
    .benefits {
        border: none;
    }
    .benefits__list {
        margin-top: 24px;
        gap: 16px;
        padding-left: 0px;
        padding-right: 0px;
    } 
    .our_vision p {
        margin-bottom: 0;   
    }
    .project_roadmap {
        background-position: 34% -16px;
        .phases__list {
            ul { gap: 0; }
            h4 { font-size: 20px; }
        }
    }
    footer {
        padding-left: 8px;
        padding-right: 8px;
        padding-top: 16px;
        .footer-items {
            gap: 24px;
            flex-direction: column;
        }
        .footer__nav {
            padding-left: 8px;
            white-space: nowrap;
        }
        .logo {
            margin-top: 44px;
            margin-bottom: 16px;
            img {
                margin-left: -24px;
            }
        }
        .name {  top: 8px; right: 4px; }
        .contacts {
            --icon-width: 26px;
            row-gap: 16px;
            font-size: 20px;
            svg {
                width: var(--icon-width);
                height: var(--icon-width);
            }
        }
    }
}

@media (max-width: 460px) {
    .project_roadmap {
        margin-bottom: 64px;
        background-position: 32% 0px;
        border-bottom: 3px solid var(--dark-blue);
    }
}

@media (max-width: 380px) {
    header {
        .navbar-collapse ul {
            flex-direction: column;
            gap: 16px;
        }
    }
    footer .footer-items {
        gap: 40px;
    }
}

@media (max-width: 321px) {
    :root {
        --fsz-title-primary: 22px;
        --fsz-title-secondary: 20px;
        --fsz-text: 16px;
    }
    header {
        padding-right: 0;
        .navbar {
            padding-top: 4px;
        }
        .navbar-toggler {
            padding: 0;
            margin: 0;
        }
    }
    .hero__content {
        width: calc(100% - 16px);
        .hero__title {
            font-size: 22px;
            margin-bottom: 24px;
        }
        .hero__text {
            margin-top: 0;
            font-size: 20px;
            line-height: 1.3;
        }
    }
    .about, .features, .demo-stats   {
        padding: 32px 8px 16px 8px;
    }
    .demo-stats__list__item {
        .stats__head {
            font-size: 20px;
            svg {width: 56px;}
        }
        .stats__bottom {
            svg {width: 20px; margin-top: -5px;}
        }
    }
    .benefits, .our_vision  {
        padding: 0 8px 8px 8px;
    }
    .project_roadmap {
        padding: 32px 8px 16px 8px;
        &>h4 {line-height: 1.4;}
        .phases__list {
            margin-top: 16px;
        }
        .phase_item {
            h4 {font-size: 18px;}
            padding: 24px 8px;
        }
    }
    footer {
        .contacts {
            margin-left: 16px;
            }
        .logo {
            margin-left: -8px;
        }
        .footer__nav {
            padding-left: 16px;
        }
    }
}

@media (max-width: 240px) {
    .logo {
  
        img {
            width: 70px;
            padding-top: 6px;
            padding-left: 4px;
        }
        .logo_title {
            font-size: 18px;
            margin-left: 8px;
        }
    }
}

@media (max-height: 600px) {
    .hero {
        height: 440px;
    }
    .hero__content {
        margin-top: 40px;
    }
}