@import url('https://fonts.googleapis.com/css2?family=Inter:opsz,wght@14..32,100..900&family=Playfair:opsz,wght@5..1200,300&display=swap');

/* Base
–––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– */
* {
    margin: 0;
    padding: 0;
    color: white;
    list-style: none;
    text-decoration: none;
    box-sizing: border-box;
}

html {
    line-height: 1.5;
    letter-spacing: 0.5px;
    font-size: 16px;
    font-weight: 200;
    scroll-behavior: smooth;
    font-family: 'Inter', Arial, Helvetica, sans-serif;
}

body {
    position: relative;
    background-color: #000615;
}

img {
    max-width: 100%;
    object-fit: cover;
}

h1,
h2 {
    font-weight: 300;
    font-family: 'Playfair', serif;
}

/*  Container
–––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– */
.container {
    padding: 20px;
    margin: 0 auto;
    max-width: 1280px;

    display: grid;
    position: relative;
    z-index: 1;

    container-type: inline-size;
}

@container (min-width: 1280px) {
    
}

/*  Background
–––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– */
#background {
    inset: 0;
    position: fixed;

    width: 100%;
    height: 200vh;
    z-index: -1;

    background-size: contain;
    background-repeat: no-repeat;
    background-position: center -10vw;
    background-image: url('../imagery/background.png');

}

@media (min-width: 400px) {
    #background {
        background-position: center -30vw;
    }
}

@media (min-width: 550px) {
    #background {
        background-position: center -50vw;
    }
}

@media (min-width: 768px) {
    #background {
        background-position: center -70vw;
    }
}

@media (min-width: 1080px) {
    #background {
        background-size: cover;
        background-position: center top;
        background-image: url('../imagery/background-2.png');
    }
}

/*  Second section
–––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– */
#second-section {
    padding-block: 40px;

    text-align: center;

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

    .second-section-title {
        width: 100%;

        line-height: 1;
        letter-spacing: 3px;
        text-transform: uppercase;

        container-type: inline-size;

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

        p {
            font-size: 12px;
        }

        h1 {
            font-size: 40px;
            letter-spacing: 1px;
        }

        h2 {
            font-size: 18px;
            letter-spacing: 4px;
        }
    }

    @container (min-width: 550px) {
        .second-section-title {
            p {
                font-size: 16px;
            }

            h1 {
                font-size: 52px;
            }

            h2 {
                font-size: 22px;
            }
        }
    }

    @container (min-width: 768px) {
        .second-section-title {
            p {
                font-size: 16px;
            }

            h1 {
                font-size: 64px;
            }

            h2 {
                font-size: 28px;
            }
        }
    }

    @container (min-width: 1024px) {
        .second-section-title {
            p {
                font-size: 18px;
            }

            h1 {
                font-size: 72px;
            }

            h2 {
                font-size: 32px;
            }
        }
    }
  
      @container (min-width: 1080px) {
        .second-section-title {
            p {
                font-size: 20px;
            }

            h1 {
                font-size: 80px;
            }

            h2 {
                font-size: 36px;
            }
        }
    }
  
    @container (min-width: 1280px) {
        .second-section-title {
            p {
                font-size: 24px;
            }

            h1 {
                font-size: 96px;
            }

            h2 {
                font-size: 40px;
            }
        }
    }

    .second-section-texts {
        width: 100%;

        line-height: 1.5;
        letter-spacing: 1px;
        text-align: center;

        container-type: inline-size;

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

        p {
            max-width: 350px;
            font-size: 14px;
        }

        a {
            display: block;
            margin: 0 auto;
            max-width: max-content;

            padding-block: 12px;
            padding-inline: 24px;

            font-size: 11px;
            font-weight: 500;
            letter-spacing: 2px;
            text-transform: uppercase;

            border-radius: 8px;
            border: 2px solid white;

            color: skyblue;
            background-color: white;
        }
    }

    @container (min-width: 550px) {
        .second-section-texts {
            p {
                font-size: 16px;
            }

            a {
                font-size: 12px;
            }
        }
    }

    @container (min-width: 768px) {
        .second-section-texts {
            p {
                font-size: 16px;
            }

            a {
                font-size: 13px;
            }
        }
    }

    @container (min-width: 1024px) {
        .second-section-texts {
            p {
                font-size: 18px;
            }

            a {
                font-size: 14px;
            }
        }
    }
}

@media (min-width: 768px) {
    #second-section .second-section-texts p {
        max-width: 400px;
    }
}

@media (min-width: 900px) {
    #second-section {
        padding-block: 80px;
    }
}

@media (min-width: 1024px) {
    #second-section .second-section-texts p {
        max-width: 450px;
    }
}


/*  Third section
–––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– */
#third-section {
    padding-block: 40px;

    .glass-form {
        padding-block: 32px;
        padding-inline: 24px;

        border-radius: 8px;
        container-type: inline-size;

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

        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
        background: rgba(128, 128, 128, 0.13);
        border: 1px solid rgba(128, 128, 128, 0.27);

        form {
            gap: 32px;
            display: flex;
            flex-direction: column;
        }

        form label {
            width: 100%;
            font-size: 12px;
            font-weight: 500;
            letter-spacing: 2px;
            text-transform: uppercase;
        }

        form label input {
            width: 100%;
            font-size: 14px;
            padding-block: 16px;
            letter-spacing: 1.5px;

            border: none;
            border-bottom: 2px solid white;

            color: white;
            background-color: transparent;
        }

        form label input::placeholder {
            color: currentColor;
        }

        form button {
            width: max-content;

            font-size: 12px;
            letter-spacing: 1.5px;
            text-transform: uppercase;

            padding-block: 16px;
            padding-inline: 32px;

            border-radius: 4px;
            border: 2px solid white;

            background-color: transparent;
        }

        p {
            color: gainsboro;
            font-size: 12px;
            letter-spacing: 1px;
            padding-top: 20px;
        }
    }

    @container (min-width: 768px) {
        .glass-form {
            form label {
                font-size: 13px;
            }

            form label input {
                font-size: 15px;
            }

            form button {
                font-size: 13px;
            }

            p {
                font-size: 13px;
            }
        }
    }

    @container (min-width: 1024px) {
        .glass-form {
            form label {
                font-size: 14px;
            }

            form label input {
                font-size: 16px;
            }

            form button {
                font-size: 14px;
            }
        }
    }
}

@media (min-width: 768px) {
    #third-section .glass-form {
        form {
            display: grid;
            grid-template-columns: 1fr 1fr;
            align-items: end;
        }

        p {
            padding-top: 8px;
        }
    }
}

@media (min-width: 1024px) {
    #third-section .glass-form {
        form {
            display: flex;
            flex-direction: row;
        }

        form button {
            min-width: max-content;
        }
    }
}

/*  Fourth section
–––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– */
#fourth-section {
    gap: 20px;
    display: grid;

    padding-block: 40px;

    .glass-card {
        padding: 24px;
        border-radius: 8px;
        container-type: inline-size;

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

        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
        background: rgba(128, 128, 128, 0.13);
        border: 1px solid rgba(128, 128, 128, 0.27);

        svg {
            width: 28px;
            height: 28px;
            padding: 2px;
            border-radius: 4px;
            stroke: gold;
        }

        h3 {
            color: white;
            font-size: 13px;
            letter-spacing: 1px;
            text-transform: uppercase;
        }

        p {
            color: gainsboro;
            font-size: 12px;
            letter-spacing: 1px;
        }
    }

    @container (min-width: 300px) {
        .glass-card h3 {
            font-size: 14px;
        }

        .glass-card p {
            font-size: 13px;
        }
    }
}

@media (min-width: 768px) {
    #fourth-section {
        grid-template-columns: 1fr 1fr;
    }
}

@media (min-width: 1024px) {
    #fourth-section {
        grid-template-columns: 1fr 1fr 1fr;
    }
}

/* Fifth section
–––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– */
#fifth-section {
    gap: 20px;
    display: flex;
    flex-direction: column;

    padding-block: 24px;
    container-type: inline-size;

    .glass-icon {
        padding: 6px;
        border-radius: 4px;

        display: flex;
        align-items: center;
        justify-content: center;

        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
        background: rgba(128, 128, 128, 0.13);
        border: 1px solid rgba(128, 128, 128, 0.27);

        svg {
            width: 20px;
            height: 20px;
            stroke: white;
        }
    }

    div {
        gap: 20px;
        display: flex;
    }

    p {
        font-size: 11px;
        letter-spacing: 1.5px;
    }

    @container (min-width: 768px) {
        #fifth-section p {
            font-size: 12px;
        }
    }

    @container (min-width: 1024px) {
        #fifth-section p {
            font-size: 13px;
        }
    }
}

/*  Divider
–––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– */
.divider {
    width: 1px;
    height: 260px;
}

@media (min-width: 768px) {
    .divider {
        height: 300px;
    }
}

@media (min-width: 1024px) {
    .divider {
        height: 380px;
    }
}

@media (min-width: 1080px) {
    .divider {
        height: 720px;
    }
}