body {
    font-family: "Oswald";
    color:#090B25;
    background-color: #F0E1CC;
}

a {
    text-decoration: none;
    color: #090B25;
}

button {
    border-radius: 0;
    border:2px solid #090B25;
}



/*----------------------------HEADER-----------------------------------*/

/* navigation */

nav {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    
    padding: 20px 50px 20px 20px;
}

nav img {
    height: 60px;
}

.nav-links {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;

    width: 30%;
}

.icons-top {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    gap:20px;
}

.icons-top img {
    height: 30px;
}

@media (max-width: 768px) {
    .nav-links {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        width: 50%;
    }


}

/*----------------------------FOOTER-----------------------------------*/


footer {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;

    padding: 40px 5% 40px;
    background-color: #F0E1CC;
    z-index: 100;
}



/*left side*/

.footer-left {
    display: flex;
    flex-direction: row;
    gap:30px;
    
    width: 50%;
}

.footer-left img {
    width: 60%;
    height: auto !important;
    object-fit: contain;
}

.socials {
    display: flex;
    flex-direction: column;
    gap:20px;
    height: 100%;
}


/* right side */

.footer-right {
    display: flex;
    flex-direction: column;
    gap:40px;
    text-align: right;
}

.footer-right a {
    display:flex ;
    flex-direction: column;
    font-weight: 400;
    font-family: 'poppins';
    font-size: 0.8rem;
}

.footer-right h4 {
    font-size: 2rem;
    font-weight: 400;
    text-transform: uppercase;
}

@media (max-width: 768px) {
    
    footer {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: end;
        gap:30px;
    
        margin: 20px 10% 40px 10%;
    }

    .footer-left img {
        width: 100%;
        height: auto !important;
        object-fit: contain;
    }

    .footer-left {
        display: flex;
        flex-direction: row;
        gap:30px;
        
        width: 100%;
    }

    .footer-right {
        display: flex;
        flex-direction: column;
        gap:40px;
        text-align: right;
    }
    
    .footer-right a {
        display:flex ;
        flex-direction: column;
        font-weight: 400;
        font-family: 'poppins';
        font-size: 0.8rem;
    }
    
    .footer-right h4 {
        font-size: 2rem;
        font-weight: 400;
        text-transform: uppercase;
    }


}



/*----------------------------TITLE AND FILTERS-----------------------------------*/

.title-filters {
    margin:0 10%;
}

/* title */

h1 {
    font-size: 4rem;
    font-weight: 400;
    line-height: 1;
    margin-bottom: 20px;;
}

.title-filters {
    display: flex;
    flex-direction: column;
    gap: 13px;
}


/* filters */

.all-filters {
    display: flex;
    flex-wrap: wrap;
    gap:20px;

    width: 100%;
}

.filter {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap:10px;

    padding:3px 10px;
    background-color: #FFF2E0;
    border: 2px solid #090B25;
}

.all-filters img {
    height: 10px;
}

.all-filters p {
    font-size: 1.2rem;
}



/*----------------------------ALL PRODUCTS-----------------------------------*/

.all-products {
    margin:40px 10%;
    display: flex;
    flex-wrap:wrap;
    gap:20px;

}

/* whole card */

.glasses-card {
    display: flex;
    flex-direction:column ;

    width: 30%;

}

@media (max-width: 768px) {
    .glasses-card {
        display: flex;
        flex-direction:column ;
    
        width: 45%;
    
    }
}


/* image with color and heart */

.image-seperate {
    scale: 0.7;
}

.image-color-heart {
    background-color: #FFF2E0;
    border: 2px solid #090B25;
    position: relative;
    padding:20px 10px 50px 10px;

}

.heart {
    height: 35px;
    position: absolute;
    right: 15px;
    bottom: 15px;
}

/*  name and price */

.name-price {
    display: flex;
    flex-direction: row;
    justify-content: space-between;

    font-size: 1.5rem;
}


/*  button load more */

.load {
    margin: 0 10%;
    font-size: 1.5rem;
    border: 2px solid #090B25;
    background-color: #EB4F26;
    color: #FFF2E0;
    margin-bottom: 80px;
}

.load:hover {
    color:#090B25;
    background-color: #F0E1CC;
    cursor: pointer;
}


/*----------------------------SUBSCRIBE BANNER-----------------------------------*/

.subscription {
    background-color: #EB4F26;
    padding: 50px 0;
    margin-bottom: 40px;
    text-align: center;
    border-top: 2px solid #090B25;
    border-bottom: 2px solid #090B25;
}

.subscription h2 {
    font-size: 3rem;
    font-weight: 400;
}

.email-field {
    display: flex;
    flex-direction: row;
    justify-content: center;

    margin: 15px 10%;
}

.email-field p {
    background-color: #F0E1CC;
    padding: 8px 200px 5px 10px;
    color:#838383;
    border: 2px solid #090B25;

}

.email-field button {
    background-color: #F0E1CC;
}

.email-field button:hover {
    color:#090B25;
    background-color: #EB4F26;
    cursor: pointer;
}





/*----------------------------PRODUCT INFO-----------------------------------*/

.back-button img {
    margin-top:40px;
    margin-left:10%;
    height: 30px;
}

.product-info {
    display: flex;
    flex-direction: row;
    gap:30px;

    margin:10px 10% 60px 10%;
}



/* fotookes */

.pictures {
    display: flex;
    flex-direction: column;
    gap:20px;

    width: 50%;

}

@media (max-width: 768px) {
    
    .product-info {
        display: flex;
        flex-direction: column;
        gap:30px;
    
        margin:10px 10% 60px 10%; 
    }
    
    .pictures {
            width: 100%;
        
        }

}

.three-images {
    display: flex;
    flex-direction: row;
    gap:20px;
    height:20%;
}

.three-images img {
    width: 30%;
    object-fit: cover;
}

.pictures img {
    border: 2px solid #090B25;

}

/* detail description */

.detail-description {
    display: flex;
    flex-direction: column;
    gap:40px;

    width: 50%;
}

.detail-description p {
    font-family: 'poppins';
    font-size: 0.9rem;
    margin-top: 10px;
}

.description-bottom h3 {
    font-size: 3rem;
    font-weight: 400;
}

.description-bottom button {
    font-size: 1.3rem;
    background-color: #EB4F26;
    color: #FFF2E0;
}

.description-bottom button:hover {
    color:#090B25;
    background-color: #F0E1CC;
    cursor: pointer;
}

@media (max-width: 768px) {
    
    .detail-description {
        width: 100%;
    }

}

/* de kleurkes */

.yellow {
    background-color: #FFE800;
    height: 30px;
    width: 30px;
    border-radius: 30px;
    margin-top: 10px;
    border:2px solid #090B25;
}

.blue {
    background-color: #C7E9FF;
    height: 30px;
    width: 30px;
    border-radius: 30px;
    margin-top: 10px;
}

.colors {
    display: flex;
    gap:10px;
}


/*----------------------------MORE LIKE THIS SECTION-----------------------------------*/


.more-slider {
    margin: 100px 0 60px 0;
    padding:60px 10%;
    background-color: #FFF2E0;
    border-top: 2px solid #090B25;
    border-bottom: 2px solid #090B25;
}

.more-slider h2 {
    font-size: 3rem;
    font-weight: 400;
}

.all-more {
    display: flex;
    gap:20px;
    margin-top:20px;
}

.all-more img {
    width: 450px;
    border: 2px solid #090B25;

    
}

.all-more p {
    font-size: 2rem;
}

.name-cards {
    text-align: right;
}



/*----------------------------FAQ baby-----------------------------------*/

.faq-main {
    position: relative;
    margin-bottom: 40px;
    border-bottom: 2px solid #090B25;
    height: 100vh;
}

.faq-section {
    position:absolute;
    z-index: 999;
    margin:10%;
}

.faq-text {
    color:#EB4F26;
    display: flex;
    flex-direction: column;
}

.accordion-item {
    padding:10px;
    background-color: #F0E1CC;
    font-size:1.2rem;
    margin-top:10px;
    border: 2px solid #090B25;

}

.cursive {
    font-family: "Playfair Display";
    font-style: italic;
    line-height: 1;
    margin-bottom: 40px;
}


.faq-image {
    display: flex;
    justify-content: end;
    width: 100vw;
    position: relative;
    z-index: 1;
    height: 100vh;
}

.faq-image img {
    width: 70%;
    object-fit: cover;

}


/*---------------------------HOME---------------------------------*/

.home-main {
    position: relative;
    border-bottom: 2px solid #090B25;
    height: 80vh;
}

.home-section {
    position:absolute;
    z-index: 999;
    margin:10% 13%;
}

.home-text {
    color:#EB4F26;
    display: flex;
    flex-direction: column;
}

.home-text h1 {
    font-size:5.7rem;
    line-height: 1;
}

.home-section p {
    width: 35%;
    text-align: end;
    font-family: 'poppins';
    font-size: 0.8rem;
}

.accordion-item {
    padding:10px;
    background-color: #F0E1CC;
    font-size:1.2rem;
    margin-top:10px;
    border: 2px solid #090B25;

}

.cursive {
    font-family: "Playfair Display";
    font-style: italic;
    line-height: 1;
    margin-bottom: 40px;
}


.home-image {
    display: flex;
    justify-content: end;
    width: 100vw;
    position: relative;
}

.home-image img {
    width: 60%;
    object-fit: cover;

}




.home-body {
    background-image: url('../images/background_home.png');
    background-size: 70%; 
    background-repeat: no-repeat; 
    background-position: right top;
}

@media (max-width: 1000px) {

    .home-body {
        background-image: url('../images/background_home.png');
        background-size: 100%; 
        background-repeat: no-repeat; 
        background-position: right top;
    }

}


@media (max-width: 700px) {

    .home-body {
        background-image: none;
    }

}


/*---------------------------BANNER---------------------------------*/

.banner {
    height: 120px;
    padding: 10px 20px 20px 20px;
    background-color: #F0E1CC;
}

.banner ul {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    gap:20px;

    height: 100%;
    padding-inline-start: 0px;

    list-style: none;
}

.banner img {
    height: 100%;
}


@media (max-width: 1300px) {

    .banner li:nth-child(n+7) {
        display: none;
    }

}

@media (max-width: 700px) {

    .banner li:nth-child(n+4) {
        display: none;
    }

}