/*
* ===================================================
*     CUSTOM CSS CODE BELOW
* ===================================================
*/


@media screen and (max-width: 512px) {
  .row.deals {
    width: 100% !important;
    flex: 100% !important;
    padding: 0 !important;
  }
}

/* -------------- HÄR JOBBAR NINA -------------- */

h1 {
    font-family: psfournier-std !important;
    font-weight: 400;
    font-style: normal;
    color:#2C2A30;
}

.h1 {
    font-family: psfournier-std;
    font-weight: 400;
    font-style: normal;
}

h2 {

    font-family: nautica;
    font-weight: 500;
    font-style: normal;
    color:#CBB1A3;
}

h3 {
    
    font-family:proxima-nova;
    font-size: 22px;
    font-weight:600;
    color: #2C2A30;
}

p {
    font-family: proxima-nova;
    font-weight: 300;
    font-style: normal;
    color:#2C2A30;
}

.producttitle-font-size a {
    
    font-family: proxima-nova;
    font-weight: 400
    font-style:normal;
    color:#2C2A30;
}

.hero-heading{
    color: white!important;
}

@media screen and (max-width: 768px) {
  .hero-heading {
    font-size: 2rem!important;
  }
}

.opacity-7{
    opacity: 1!important;
    color: white!important;
}




/*
Index page
-----------------
*/

.section_element.container {
    padding-top: 3rem;
    padding-bottom: 1rem;
    background-color: #ffffff;
    max-width: 100%;
    padding-left: 0px!important;
    padding-right: 0px!important;
}

/*
Head
-----------------
*/

.top-bar-height {
    min-height: 48px;
}

/*
.text-lg-right {
    text-align: center!important;
}
*/



/*
Single product
-----------------
*/


.navbar-checkout-btn, .product-btn-addcart {
    color: #2C2A30;
    background: #D8BEB0 !important;
    transition: all 0.2s ease-in-out;
}

.product-price {
    
    color:#2C2A30;
    font-family: proxima-nova, sans-serif;
    font-weight: 700;
    font-style: normal;
}

.wishlist-btn.wishlist-add {
    
    width: 100%!important;
    display: inline-block;
    background: #ffffff!important;
    color: #fff;
    border: 2px solid #000000; 
    padding: 10px !important;
    font-family: proxima-nova;
    font-size: 14px!important;
    font-style: bold;
    text-transform: uppercase;
    text-align:center
}
#product #description span,
#product #description p {
    font-size: 14px !important;
}

.home-slider {
    height: 90vh !important;
}    



/* Kontakta oss*/


.qb-custom-wrapper h2

{
    font-weight:500!important;
}



.qbPopup-header p

{
    color:white!important;
    
}

.qbPopup-goal-text p {
    color:white!important;
    
}


---------------------------------------
/*Index page*/

/* Månadens vara */

.row {
  display: flex;
}

.deals {
  background-color: #EFE2D4;
  flex: 50%;
  padding: 0px;
  display: flex; /* Lägg till en flex-container för att centrera innehållet */
  flex-direction: column; /* Visa innehållet i en kolumn */
  justify-content: center; /* Centrera innehållet vertikalt */
  align-items: center; /* Centrera innehållet horisontellt */
}

/* Media Query för att hantera mindre skärmar */
@media screen and (max-width: 512px) {
  .row.deals {
    width: 100% !important;
    flex: 100% !important;
    padding: 0 !important;
  }
}

@media screen and (max-width: 768px) {
  .deals {
    flex: 100% !important;
  }
}

.deals h1 {
    font-size: 4em;
}

.deals h3 {
    padding-top: 80px;
    font-family: nautica;
    font-size: 24px;
}

.deals h6 {
    font-size: 14px;
    font-weight: normal;
}

.deals p {
    font-size: 10px;
    margin-top:100px;
    padding-bottom:20px;
}


/* Collection row */
.row {
  display: flex;
}

.collection {
  flex: 50%;
  padding: 10px;
}

/* Position the button. */
.collection {
  position: relative;
  width: 50%;
}


@media screen and (max-width: 612px) {
  .collection.categories {
    width: 100% !important;
    flex: 100% !important;
    padding: 0 !important;
  }
}

@media screen and (max-width: 768px) {
  .collection {
    flex: 50% !important;
  }
}


/* Styling and placing the button*/
.collection .btn {
  font-family: montserrat;
  font-size: 0.8rem;
  position: absolute;
  top: 90%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  background-color: transparent!important;
  color: white;
  border: none;
  cursor: pointer;
  border-radius: 5px;
  text-decoration: underline;
 
}


/* -------------- HÄR JOBBAR NINA -------------- */

.usp li::before {
    content: '\f00c';
    padding-right: 12px;
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
}

.font-size-2 {
    font-size: 1.5rem;
}
.font-size-16 {
    font-size: 2.2rem;
}
.font-bold {
    font-weight: bold;
}
.color-white {
    color: white !important;
}

.producttitle-font-size {
    font-weight: normal;
}

.secondary-btn {
    background-color: white;
    padding: 0.8rem 2.4rem;
    color: black;
}
.secondary-btn.custom-border {
    border: 1px solid black;
}

.slider-btn {
    position: absolute;
    bottom: 3rem;
    background-color: transparent;
    text-decoration: underline;
    color: white;
    font-weight: bold;
}

.custom-cards {
    overflow-x: hidden;
}
.custom-cards img {
    width: 100%;
    min-height: var(--image-height);
    object-fit: cover;
}
.custom-cards h2 {
    color: white;
}

.custom-cards .img-container {
    max-height: var(--image-height);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.py-large {
    padding-top: 4rem;
    padding-bottom: 4rem;
}

.swiper-container h1 {
    color: white;
    font-weight: lighter;
}

.custom-navbar {
    display: flex;
    max-height: 3rem;
    justify-content: space-between;
    position: relative;
}
.navbar-brand {
    z-index: 1;
    max-width: 100px !important;
}

.nav-item {
    margin-top: auto;
    margin-bottom: auto;
}

hr.gray {
    border-top-color: #414141;
}

.font-psfournier-std {
    font-family: psfournier-std;
}

footer img.logo {
    width: 8rem;
}
footer .contact {
    margin: 0;
}
footer .contact li {
    color: gray;
}
footer .contact li.email::before {
    content: '\f0e0';
    padding-right: 12px;
    font-family: "Font Awesome 5 Free";
}
footer .contact li.phone::before {
    content: '\f095';
    padding-right: 12px;
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
}
.list-icons li {
    float: left;
    margin-right: 1rem;
}

.product-container {
    position: relative;
}
.product-container .product-image {
    background-color: #f6f6f6;
}

.custom-service-icon {
    margin-top: 0rem !important;
    margin-right: 0rem !important;
    margin-bottom: 1rem;
}

.categorylist.custom-category-layout {
    position: relative;
}
.categorylist.custom-category-layout > .category_image {
    display: flex;
    justify-content: center;
    align-items: center;
    max-height: 8rem;
}
.categorylist.custom-category-layout > .category_buttonarea {
    position: absolute;
    left: 1rem;
    bottom: 1rem;
}
.custom-categories {
    display: inline;
}
.category-btn {
    padding: 0.4rem 1.2rem;
    background-color: #F5F3EF;
    margin-right: 0.4rem;
    margin-bottom: 0.4rem;
    display: inline-block;
}
.category-btn > a {
    color: black;
    font-size: 0.9rem;
    font-weight: normal;
}

.products-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    column-gap: 1rem;
}
.wishlist-container {
    position: relative;
}
.wishlist-container > .wishlist-icon {
    position: absolute;
    opacity: 0.8;
    right: 1rem;
    top: 1rem;
    font-size: 1.4rem;
}
.wishlist-remove {
    right: 3px !important;
}

.filter-container {
    grid-row: 1 / 2;
}
.filter-container.open {
    grid-row: 1 / span 2;
}
.filter-container .open-filter {
    background-color: #343434;
    padding: 1rem 1.2rem;
    width: fit-content;
    cursor: pointer;
    border: 1px solid transparent;
    transition: all 200ms ease;
}
.filter-container .open-filter > span,
.filter-container .open-filter > i {
    color: white;
}
.filter-container.open .open-filter {
    background-color: transparent;
    border-color: black;
}
.filter-container.open .open-filter > span,
.filter-container.open .open-filter > i {
    color: black;
}

.filter-container .open-filter > span::before {
    content: '\f1de';
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    margin-right: 1rem;
}
.filter-container.open .open-filter > span::before {
    content: '\f00d';
}

.filter-container .filters-wrapper {
    display: none;
    padding-top: 2rem;
}
.filter-container.open .filters-wrapper {
    display: block;
    animation: fade-in-left 400ms ease;
}

.filter-container .description {
    padding-top: 2rem;
}

.filters-design {
    border: none;
    border-bottom: 1px solid black;
    border-color: black !important;
    background-color: transparent;
    width: 100%;
    padding: 0;
    font-weight: bold;
    text-transform: uppercase;
    margin-bottom: 1rem;
    transition: opacity 200ms linear;
}

.filters-design[data-value="null"] {
    opacity: 0.4;
}

input,
select {
    color: black;
}

@keyframes fade-in-left {
    0% {
        transform: translateX(-1rem);
        opacity: 0;
    }
    100% {
        transform: translateX(0rem);
        opacity: 1;
    }
    
}

@media screen and (max-width: 992px) {
    .products-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}
@media screen and (max-width: 768px) {
    .products-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}
@media screen and (max-width: 512px) {
    .filter-container {
        grid-column: 1 / span 2;
    }
}
@media screen and (min-width: 512px) {
    .custom-product-image-size {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 20rem;
    }
}

.custom-product-image-size .product-swap-image-back {
    top: auto;
}

/* Block building pages */
.qb-custom-wrapper p {
    line-height: 1.4 !important;
}

.faq-block {
    overflow: hidden;
}
.faq-block > div {
    cursor: pointer;
    display: flex;
    align-items: center;
    transition: all 200ms ease;
}
.faq-block > div > i {
    margin-left: 1rem;
    transition: transform 200ms ease;
    -webkit-transition: transform 200ms ease;
}
.faq-block.open > div > i {
    transform: rotate(180deg);
    -webkit-transform: rotate(180deg);
}
.faq-block p {
    max-height: 0;
    transition: all 200ms ease;
    margin: 0 !important;
    opacity: 0;
}
.faq-block.open p {
    max-height: 300px;
    opacity: 1;
    padding-bottom: 3rem;
}
.faq-block h3 {
    font-family: proxima-nova !important;
    font-weight: bold !important;
    margin: 0 !important;
    font-size: 1.3rem !important;
}
.faq-block > div:hover {
    opacity: 0.6;
}

/* Custom code Thea */
.link-with-bg {
    width: fit-content;
    padding: 15px 20px 15px 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    h3 {
        margin-bottom: 0;
    }
}