:root {
    --white: #FFF;
    --bg: #0C0C0C;
    --text-grey: #667085;
    --fw-400: font-weight: 400;
    --fw-500: font-weight: 500;
    --fw-600: font-weight: 600;
    --fw-700: font-weight: bold;
  
    --mob-width: 390px;
  }
  
  ::-webkit-scrollbar { 
    display: none; 
    }

    body {
        margin:0;
        overflow-x: hidden;
    
        font-family: Inter;
        background-color: var(--bg);
        color: var(--white);

        background: var(--bg);
        background-image: url(/img/top-waves.svg), url(/img/bottom-waves.svg);
        background-repeat: no-repeat, no-repeat;
        background-position: top center, bottom center;

    }
    
    html {
        overflow-x: hidden;
    }

    p,h1,h2,h3 {
        margin: 0;
        padding: 0;
    }
    
    div {
        -webkit-box-sizing: border-box; 
        -moz-box-sizing: border-box;    
        box-sizing: border-box; 
    }

    /* ==========================================================================
        HEADER SECTION
        ========================================================================== */

        .header {
            margin-bottom: 28px;
        }

        .nav {
            width: 360px;
            margin: 0 auto;
            display: flex;
            flex-direction: row;
            justify-content: center;
            flex-wrap: wrap;
            padding: 20px 0;
            
            gap: 10px;
        }
        
        .logo-section {
            display: flex;
            align-items: center; 
            justify-content: center;
            gap: 20px;

            img {
                width: 66px;
                height: 72px;
            }
        }

        .logo-text {
            font-weight: var(--fw-500);
            font-size: 24px;
            line-height: 30px;
        }

        .nav-links {
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: center;
            gap: 20px;
            padding: 0;
        }

        .nav-link {
            list-style: none;

            a {
                color: var(--white);
                text-decoration: none;
                font-weight: var(--fw-500);
                font-size: 16px;
                line-height: 28px;
            }
        }



/* ==========================================================================
        MAIN SECTION
        ========================================================================== */

        .main {
            width: 360px;
            margin: 0 auto;
            .section {
                margin-bottom: 40px !important;
            }
            
            p {
                color: var(--text-grey);
            }
        }
        .main-about {
            display: flex;
            flex-direction: column;
            text-align: center;
            align-items: center;
            gap: 16px;

        }

        .small-card {
            width: fit-content;
            height: 28px;
            border-radius: 16px;
            background-color: var(--white);
            color: var(--bg);
            padding: 4px 12px;

            font-size: 14px;
            font-weight: var(--fw-500);
            line-height: 20px;
        }

        .about-header {
            font-size: 36px;
            line-height: 44px;
            letter-spacing: -2%;
        }

        .about-text {
            font-size: 20px;
            font-weight: var(--fw-400);
            line-height: 20px;
        }

        .main-values {
            display: flex;
            flex-direction: column;
            text-align: center;
            align-items: center;
            gap: 16px;
        }

        .values-header {
            font-size: 24px;
            line-height: 32px;
            font-weight: var(--fw-600);
            letter-spacing: -2%;
        }

        .values-text {
            font-size: 18px;
            line-height: 28px;
            font-weight: var(--fw-400);
        }

        .values-container {
            display: flex;
            flex-direction: row;
            flex-wrap: wrap;
            gap: 30px;
        }

        .values-box {
            display: flex;
            flex-direction: column;
            gap: 20px;
            align-items: center;

            img {
                width: 48px;
                height: 48px;
            }

            h3 {
                font-size: 20px;
                line-height: 30px;
                font-weight: var(--fw-500);
            }

            p {
                font-size: 18px;
                line-height: 24px;
                font-weight: var(--fw-400);
            }
        }

        .main-newsletter {
            display: flex;
            flex-direction: column;
            text-align: center;
            align-items: center;
            gap: 10px;

        }

        .newsletter-header {
            font-size: 24px;
            line-height: 32px;
            letter-spacing: -2%;

            font-weight: var(--fw-600);
        }

        .newsletter-text {
            font-size: 20px;
            line-height: 30px;
            font-weight: var(--fw-400);
        }

        .form {

            display: flex;
            flex-direction: column;
            gap: 10px;


            input {
                height: 28px;
                width: 340px;
                border-radius: 8px;
                padding: 8px;
                font-size: 16px;
                font-weight: var(--fw-400);
            }
        }

        .privacy-text {
            text-align: left;

            font-size: 14px;
            line-height: 20px;
            font-weight: var(--fw-400);

            a {
                color: var(--text-grey);
            }
        }

        .submit-btn {
            display: block;
            height: 28px;
            background: 
            linear-gradient(90deg, #FFFFD7 0%, #CDD0FD 48%, #FFE7FF 100%);
            border-radius: 8px;
            padding: 10px 0;

            text-decoration: none;
            color: var(--bg);
            font-size: 16px;
            line-height: 24px;
            font-weight: 600;
        }


/* ==========================================================================
        FOOTER SECTION
        ========================================================================== */

        .footer {
            height: 169px;
            width: 360px;

            margin: 0 auto;

            display: flex;
            flex-direction: column;
            gap: 20px;
            align-items: center;
        }

        .line {
            width: 360px;
            height: 1px;
            background: var(--white);
        }

        .rights {
            color: var(--text-grey);

            font-size: 16px;
            line-height: 24px;
            font-weight: var(--fw-400);
        }


        /* ==========================================================================
        DESCTOP SECTION
        ========================================================================== */

        @media screen and (min-width: 1280px) {
            .nav {
                width: 1280px;

                justify-content: space-between;
            }

            .main {
                width: 1280px;
            }

            .section {
                margin-bottom: 200px !important;
            }

            .main-about {
                width: 1024px;

                margin: 0 auto;
            }

            .values-text {
                display: inline-block;
                width: 768px;
                margin-bottom: 50px;
            }

            .values-container {
                display: grid;
                grid-template-columns: repeat(3, 384px);
                grid-template-rows: repeat(2, 178px);
                grid-column-gap: 0px;
                grid-row-gap: 40px;
            }

            #value-box-1 {
                grid-area: 1 / 1 / 2 / 2;
            }

            #value-box-2 {
                grid-area: 1 / 2 / 2 / 3;
            }

            #value-box-3 {
                grid-area: 1 / 3 / 2 / 4;
            }

            #value-box-4 {
                grid-area: 2 / 1 / 3 / 4;
            }

            .form {
                display: grid;
                grid-template-columns: 360px 119px;
                grid-template-rows: 48px 20px;
                grid-column-gap: 20px;
                grid-row-gap: 0px;

                input {
                    grid-area: 1 / 1 / 2 / 2;
                }

                .privacy-text {
                    grid-area: 2 / 1 / 3 / 2;
                }

                .submit-btn {
                    grid-area: 1 / 2 / 2 / 3;
                }
            }

            .footer {
                width: 1280px;

                flex-direction: row;
                flex-wrap: wrap;
                justify-content: space-between;
                margin-bottom: 50px;
                
                .line {
                    width: 1280px;
                }
            }
            
        }