@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Roboto+Flex:opsz,wght@8..144,100..1000&family=Roboto: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 {
  /* Base */
  --white: #FFFFFF;
  --black: #000000;
  --transparent: #00000000;
  --orange-500: #FF9800;
  --green-500: #4CAF50;

  /* Custom Brand */
  --primary: #FF5722;
  --secondary: #8BC34A;
  --child: #E2C69A;
  --price-inductor: #FFAA22;
  --skeleton-placeholder: #E0E0E0;
  --gradient-start: #E91E63;
  --gradient-center: #9C27B0;
  --gradient-end: #2196F3;

  /* Background */
  --bg-canvas: #FFFFFF;
  --bg-surface: #F6F6F6;
  --bg-emphasis: #EFF1F3;
  --bg-muted: #F6F8FA;

  /* Border */
  --border-default: #D0D7DE;
  --border-muted: #E1E4E8;
  --border-emphasis: #C6CED6;

  /* Text */
  --text-primary: #24292F;
  --text-secondary: #57606A;
  --text-muted: #6E7781;
  --text-subtle: #8E99A1;

  /* Accent / Semantic */
  --accent-emphasis: #0969DA;
  --accent-muted: #1C7ED6;
  --success-emphasis: #2EA043;
  --success-muted: #E6F4EA;
  --warning-emphasis: #D29922;
  --warning-muted: #FFF5B1;
  --danger-emphasis: #B31D28;
  --danger-muted: #FFD1D9;
  --done-emphasis: #8250DF;
  --done-muted: #F0E6FF;
  --sponsor-emphasis: #9932CC;
  --sponsor-muted: #FFE4FF;

  /* Selected Icon Color */
  --selected-icon: #C98250DF;
  --unselected-icon: #D521262D;
  --selected-text: #E99852E7;

  /* Interaction States */
  --hover: #F3F4F6;
  --focus-border: #1F6FEB;
}

body {
    background-color: var(--bg-canvas);
    padding: 0px 15vw;
    overflow-x: hidden;
}


/* Start navbar style */
nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px;
    height: 90px;
    border-bottom: 1px solid var(--border-default);
}
.nav-left {
    display: flex;
    align-items: center;
    gap: 8px;
}
.nav-left img {
    width: 50px;
    height: 50px;
}
.nav-left span {
    color: var(--text-primary);
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    font-style: normal;
    font-size: 20px;
}
.nav-middle {
    display: flex;
    align-items: center;
    justify-content: space-around;
    gap: 20px;
    list-style: none;
}
.nav-middle li a {
    color: var(--text-primary);
    text-decoration: none;
}
.nav-middle li a:hover {
    text-decoration: underline;
    text-underline-offset: 5px;
}
.nav-right {
    display: flex;
    align-items: center;
    gap: 10px;
}
.nav-menu {
    cursor: pointer;
    fill: var(--black);
    display: none;
}
/* End navbar style */

/* Start intro section style */
.intro-section {
    width: 100%;
    height: calc(100vh - 90px);
    padding-top: 8%;
    z-index: 10000;
}
.intro-glow {
    position: fixed;
    z-index: -1;
    opacity: .8;
    user-select: none;
    pointer-events: none;
}
.intro-glow .intro-glow-pink{
    position: absolute;
    width: 2700px;
    top: -550px;
    left: -1600px;
}
.intro-glow .intro-glow-sky{
    position: absolute;
    width: 2600px;
    top: -550px;
    right: -2800px;
    opacity: .6;
}
.intro-title-container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.intro-title-container span {
    text-align: center;
}
.intro-title {
    font-size: 50px;
    margin: 0 200px;
    font-weight: 500;
    font-style: normal;
    color: var(--text-primary);
}
.intro-description {
    margin: 0 250px;
    color: var(--text-secondary);
}
.intro-action-container {
    display: flex;
    justify-content: center;
    padding-top: 3%;
}
.intro-app-mockup-container {
    width: 100%;
    padding-top: 3%;
    display: flex;
    justify-content: center;
}
.intro-app-mockup-container img {
    width: 800px;
    user-select: none;
    pointer-events: none;
}
/* End intro section style */


/* Start overview section style */
.overview-section {
    width: 100%;
    background-color: red;
}
/* End overview section style */



/* Responsive design */
@media screen and (max-width: 1670px) {
    body {
        padding: 0px 8vw;
    }
    .intro-title {
        margin: 0 ;
    }
    .intro-description {
        margin: 0 200px;
    }
}
@media screen and (max-width: 1350px) {
    .intro-description {
        margin: 0 100px;
    }
}
@media screen and (max-width: 1000px) {
        body {
        padding: 0px 0vw;
    }
    .intro-title {
        margin: 0 50px;
    }
    .intro-description {
        margin: 0 60px;
    }

    .nav-middle {
        position: absolute;
        top: 100px;
        right: 20px;
        display: none;
        flex-direction: column;
        background-color: var(--bg-emphasis);
        padding: 30px;
        border-radius: 20px;
    }
    .nav-menu {
        display: block;
    }

    .intro-app-mockup-container img {
        margin-top: 30px;
        width: 600px;
    }

    .intro-glow .intro-glow-pink {
        left: -1850px;
    }
    .intro-glow .intro-glow-sky {
        right: -2100px;
    }
}

@media screen and (max-width: 700px) {
    .intro-app-mockup-container img {
        width: 500px;
    }
}

@media screen and (max-width: 530px) {
    .intro-app-mockup-container img {
        width: 400px;
    }
}

@media screen and (max-width: 430px) {
    .intro-app-mockup-container img {
        width: 300px;
    }
}