@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap');

:root {
    /* Colours */
    --rich-black: #010916;
    --gunmetal: #0E2E3B;
    --khaki: #BFAF97;
    --beaver: #B49A89;
    --redwood: #9E6660;
    --redwood-dark: #5F3D3A;
    --white: #FFFFFF;
    --dark-gradient: linear-gradient(90deg,  var(--rich-black), var(--gunmetal) 73%);

    /* Space */
    --space-none: 0; /* 0 */
    --space-s: 0.5rem; /* 8 */
    --space: 1rem; /* 16 */
    --space-xl: 2rem; /* 32 */
    --space-xxxl: 3rem; /* 48 */
    --space-ul: 4rem; /* 64px */ 
    --space-uuul: 5.5rem; /* 88px */
    --space-uuuuul: 10rem; /* 160px */


    /* font sizes */
    --font-size-xs: 0.75rem; /* 12 */
    --font-size-s:0.875rem; /* 14 */
    --font-size: 1rem; /* 16 */
    --font-size-l: 1.125rem; /* 18 */
    --font-size-xl: 1.25rem; /* 20 */
    --font-size-xxl: 1.5rem; /* 24 */
    --font-size-xxxl: 2rem; /* 32 */
    --font-size-xxxxl: 2.5rem; /* 40 */
    --font-size-ul: 3rem; /* 48 */
    --font-size-uul: 3.5rem; /* 56 */


}
html {
    box-sizing: border-box;
    font-family: 'Inter', sans-serif;
}
* {
    box-sizing: border-box;
}
body {
    margin: 0;
    display:grid;
    grid-template-columns: auto repeat(4, 1fr) auto;
    gap:  var(--space-uuuuul) var(--space-xl); 
    font-size: 18px;
    line-height: 1.5;
}
@media (min-width: 1140px) {
    body {
        grid-template-columns: auto repeat(12, minmax(1px, var(--space-ul))) auto;
    }
}

h1, h2 ,h3, h4, h5, h6 {
    color: var(--gunmetal);
    font-weight: 700;
    line-height: 1.2;
}
h1 {
    font-size: var(--font-size-xxxxl) ;
}
h2 {
    font-size: var(--font-size-xxxl);
}

.full-width {
    grid-column: 1 /span 6;
}
.container {
    grid-column:2 / span 4;
    /*margin: var(--space-uuul) 0;*/
    
}
.container__title {
    grid-column: 1 /span 6;
    margin: 0;
    justify-self: center;
}
.container--dark {
    background-color: transparent;
    background-image: var(--dark-gradient);
    color: var(--white);
    padding: var(--space-uuuuul) 0px;
}

.container--dark .container__title {
    color:var(--khaki);
}
.container__detail {
    grid-column: 2 /span 4;
    margin: 0;
    justify-self: center;
}

@media (min-width: 1140px) {
    .full-width {
        grid-column: 1 /span 14;
    }
    .container {
        grid-column: 2 /span 12;
        /*margin: var(--space-uuul) 0;*/
        
    }
    .container__title {
        grid-column: 2 /span 10;
        margin: 0;
        justify-self: center;
    }
    .container__detail {
        grid-column: 2 /span 10;
        margin: 0;
        justify-self: center;
    }
}
.grid {
    display: grid;
    grid-template-columns:  repeat(6, minmax(1px, var(--space-uuuuul)));
    justify-content: center;
    gap: var(--space); 
}

@media (min-width: 1140px) {
    .grid {
        display: grid;
        grid-template-columns:  repeat(12, minmax(1px, var(--space-ul)));
        justify-content: center;
        gap: var(--space-xl); 
    } 
}
.header {
    background-color: transparent;
    background-image: var(--dark-gradient);
    color: #fff;
}
.navigation {
    padding: var(--space-xl) 0px;
    justify-items: center;
}
.navigation a {
    grid-column: 1 /span 6;
}
.logo {
    width: 5rem;
    aspect-ratio: auto;
}
.menu {
    grid-column: 1 /span 6;
    justify-content: center;
    align-items: center;
    display: flex;
    gap:0.5rem;
    list-style: none;
    margin: 0;
    padding: 0;
}
.menu__item {
    color:var(--white);
    text-decoration: none;
    font-size: var(--font-size-l);
    font-weight: 700;
    padding: var(--space) var(--space-s);
}
.menu__item:hover {
    color:var(--beaver);
}
@media (min-width: 600px) {
    .menu {
        gap:1rem;
    }
    .menu__item {
        padding: var(--space);
    }
}
@media (min-width: 1140px) {
    .navigation a {
        justify-items: stat;
        grid-column: 2 /span 2;
    }
    .navigation {
        padding: var(--space-xl) 0px;
    }
    .logo {
        width: 10rem;
        aspect-ratio: auto;
    }
    .menu {
        grid-column: 4 /span 8;
        gap:2rem;
    }
}

.banner {
    align-items:flex-end;
}
.banner img {
    display:none;
    
}
.banner__content {
    grid-column: 2 / span 4;
    display: flex;
    flex-direction: column;
    align-items:flex-start;
    gap: var(--space-xl);
    padding: var(--space-xl) 0 var(--space-ul);
}
.banner__title {
    color:var(--khaki);
    font-size: var(--font-size-uul);
    margin: 0;
}
.banner__text {
    color:var(--white);
    font-size: var(--font-size-xxxl);
    line-height: 1.2;
    margin: 0;
}

@media (min-width: 1140px) {
    .banner img {
        display: block;
    }
    .banner__content {
        grid-column: 2 /span 5;
        justify-content: center;
    }
    .banner__title {
        color:var(--khaki);
        font-size: var(--font-size-uul);
        margin: 0;
    }
    .banner__text {
        color:var(--white);
        font-size: var(--font-size-xxxl);
        line-height: 1.2;
        margin: 0;
    }

}

.button {
    color:var(--white);
    background-color:var(--redwood);
    font-family: 'Inter', sans-serif;
    font-size: var(--font-size-l);
    font-weight: 700;
    text-decoration: none;
    border-radius: var(--space-s);
    border: none;
    padding: var(--space) var(--space-xl);
    /*box-shadow: 0px 5px 10px 0px var(--rich-black);*/
}
.button:hover {
    transform: translate(2px, -2px);
    background-color: var(--redwood-dark);
    box-shadow: 0px 10px 20px 2px var(--rich-black);
}
.button--large {
    padding: var(--space-xl) var(--space-xxxl);
}
.steps {
    grid-column: 2 /span 4;
    grid-template-columns: 1fr;
    margin: 0;
    padding: 0;
}
@media (min-width: 1140px) {
    .steps {
        grid-column: 2 /span 10;
        grid-template-columns: 3fr 3fr 3fr;
        margin: 0;
        padding: 0;
    }
}
.card {
    list-style: none;
    border: 2px solid var(--gunmetal);
    border-radius: var(--space);
    margin: 0;
    padding: var(--space-xl);
}
.card > * {
    margin-top: 0;
} 
.card *:last-child {
    margin-bottom: 0;
}
.card__title {
    font-size: var(--font-size-xxxl);
}
.card__subtitle {
    font-size: var(--font-size-xxl);
    display: block;
}
.pricing {
    grid-column: 2 / span 4;
    display: grid;
    gap: var(--font-size-xl);
    justify-items: start;
}
.pricing__title {
    color: var(--khaki);
    font-size: 4rem;
    line-height: 1.2;
    margin:0;
}
.pricing__amount {
    color: var(--white);
    font-weight: 700;
    font-size: 8rem;
    line-height: 1.2;
    margin:0;
}
.pricing__amount span{
    font-size: 4rem;
}
.pricing__image {
    display: none;
}

@media (min-width: 1140px) {
    .pricing {
        grid-column: 2 / span 6;
    }
    .pricing__image {
        display: block;
        grid-column: 8 / span 4;
        justify-self: center;
        align-self: center;
    }
}

.parallax {
    background-image: url("../images/book-watch.jpg");
    min-height: 800px;
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    margin-top: -160px;
}
.order-form {
    grid-column: 1 / span 6;
    display: flex;
    flex-direction: column;
    gap: var(--space-xl);
}
.order-form__label {
    display: flex;
    flex-direction: column;
    gap: var(--space-s);
    font-size: var(--font-size);
    font-weight: 700;
}
.order-form__input {
    border: 1px solid var(--khaki);
    padding: var(--space);
    width: 100%;
    font-size: var(--font-size-l);
}
@media (min-width: 1140px) {
    .order-form {
        grid-column: 3 / span 8;
    }
}
.faq {
    grid-column: 1 / span 6;
    display: flex;
    flex-direction: column;
    margin: 0;
}
.faq__title {
    font-weight: 700;
    margin-bottom: 8px;
}
.faq__description {
    margin-left: 0;
    margin-bottom: 32px;
}
.faq__description:last-of-type {
    margin-bottom: 0;
}
@media (min-width: 1140px) {
    .faq {
        grid-column: 3 / span 8;
    }
}

.history__title {
    font-size: var(--font-size-uul);
    font-weight: 700;
    color: var(--beaver);
    grid-column: 1 /span 6;
    margin: 0;
    justify-self: center;
}
.history__logo {
    grid-column: 2 / span 4;
    justify-self: center;
}
.history_content {
    grid-column: 1 / span 6;
}

@media (min-width: 1140px) {
    .history__title {
        grid-column: 2 /span 10;
    }
    .history__logo {
        grid-column: 2 / span 3;
    }
    .history_content {
        grid-column: 5 / span 7;
    }
}

.footer {
}
.association {
    display: grid;
    justify-content: center;
    align-items:center;
    gap: var(--space-xl);
}
.association__title {
    color:var(--khaki);
    margin: 0;
    grid-column: 1 /span 6;
    justify-self: center;
}
.association__logo {
    width: 100px;
}
.association__text {
    color:var(--white);
    margin: 0;
    grid-column: 2 /span 4;
    display: flex;
    flex-direction: column;
    gap: var(--space-xl);
    align-items: center;
}
.copyright {
    grid-column: 1 /span 6;
    justify-self: center;
}
@media (min-width: 1140px) {
    .association__title {
        grid-column: 2 /span 10;
    }
    .association__logo {
         width: auto;
        grid-column: 2;
        justify-self:start;
    }
    .association__text { 
        grid-column: 2 /span 10;
        flex-direction: row;
        justify-self:start;
    }
    .copyright {
        grid-column: 2 /span 10;
    }
}