@import url("header.css");
@import url("home.css");
@import url("about.css");
@import url("product.css");
@import url("demo.css");
@import url("footer.css");
@import url("benefits.css");
@import url("contact.css");

@font-face {
    font-family: 'PPPangramSans';
    src: url('../fonts/PPPangramSans-Light.ttf') format('truetype');
    font-weight: 300;
}

@font-face {
    font-family: 'PPPangramSans';
    src: url('../fonts/PPPangramSans-Regular.ttf') format('truetype');
    font-weight: 400;
}

@font-face {
    font-family: 'PPPangramSans';
    src: url('../fonts/PPPangramSans-Medium.ttf') format('truetype');
    font-weight: 500;
}

@font-face {
    font-family: 'PPPangramSans';
    src: url('../fonts/PPPangramSans-Semibold.ttf') format('truetype');
    font-weight: 600;
}

@font-face {
    font-family: 'PPPangramSans';
    src: url('../fonts/PPPangramSans-Bold.ttf') format('truetype');
    font-weight: 700;
}

:root {
    --button: #371BFF;
    --link: #371BFF;
    --cta: #371BFF;
    --highlights: #371BFF;
    --main-background: #ECECF1;
    --hover: #8CB4FF;
    --secondary-background: #8CB4FF;
    --subtle-background: #B6D5FF;
    --section-fills: #B6D5FF;
    --emphasize: #FFA76C;
    --text: #000000;
    --button-text: #FFFFFF;
}

*{
    margin: 0;
    padding: 0;
    font-family: 'PPPangramSans', sans-serif;
    box-sizing: border-box;
    line-height: 150%;
  }

*::before, *::after {
    box-sizing: border-box;
}

html, body {
    margin: 0;
    overflow-x: hidden;
}

body {
    background-color: rgb(255 254 255);
}

/*Check if this is neccesary*/
.wiselook-v1 {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.container {
    position: relative;
    width: 90%;
    height: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 1250px;
}

h1 {
    font-size: 48px;
    line-height: 120%;
    letter-spacing: 1px;
    margin-block: 0;
    color: var(--text);
    text-align: center;
    font-weight: 400;
}

h2 {
    font-size: 36px;
    line-height: 150%;
    letter-spacing: 1px;
    text-align: center;
    width: 100%;
    margin-block: 0px;
    color: var(--text);
    font-weight: 400;
}

h3 {
    font-size: 24px;
    line-height: 150%;
    letter-spacing: 1px;
    text-align: center;
    width: 100%;
    margin-block: 0px;
    color: var(--text);
    font-weight: 300;
}

p {
    margin: 0;
    text-align: justify;
    width: 100%;
    color: var(--text);
    font-size: 18px;
    font-weight: 200;
    letter-spacing: 1px;
}

.demo-button {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    padding: 16px 20px;
    font-size: 18px;
    font-weight: 600;
    text-decoration: none;
    text-align: center;
    color: var(--button-text);
    background: linear-gradient(135deg, var(--button) 0%, var(--hover) 100%);
    border-radius: 9999px; /* pill shape */
    border: none;
    cursor: pointer;
    box-shadow: 0 4px 8px rgba(0,0,0,0.12);
    transition: all 0.25s ease;
  }
  
  .demo-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 12px rgba(0,0,0,0.18);
    background: linear-gradient(135deg, var(--hover) 0%, var(--main-background) 100%);
    color: #fff;
  }
  
  .demo-button:active {
    transform: translateY(0);
    box-shadow: 0 3px 6px rgba(0,0,0,0.12);
  }

.bold-text {
    background-clip: text;
    font-weight: 700;
    color: var(--emphasize);
}

body, html {
    margin: 0;
    padding: 0;
}

@media (max-width: 1200px) {
    h1 {
        font-size: 48px;
        width: 100%;
        text-align: center;
        justify-content: center;
    }
    
    h2 {
        font-size: 36px;
    }
    
    h3 {
        font-size: 24px;
    }
    
    .demo-button {
        height: 70px;
        font-size: 20px;
        max-width: 205px;
    }
}

@media (max-width: 768px) {

    .container {
        width: 95%;
    }
    
    h1 {
      font-size: 24px;
      width: 100%;
      text-align: center;
      justify-content: center;
    }
  
    h2 {
      font-size: 20px;
      letter-spacing: 0px;
    }

    h3 {
        font-size: 18px;
    }

    p {
        font-size: 14px;
    }
  
    .demo-button {
        /* width: 65%; */
        width: 140px;
        height: 50px;
        font-size: 16px;
        padding: 16px 0px;
    }
}


@media (max-width: 389px) {

    .container {
        width: 95%;
    }
    
    h1 {
        font-size: 24px;
    }

    h2 {
        font-size: 20px;
    }

    h3 {
        font-size: 18px;
    }

    p {
        font-size: 16px;
    }
  
    .demo-button {
        width: 65%;
        max-width: 145px;
        height: 50px;
        font-size: 14px;
    }
}