/*STYLESHEET*/

/*COMPONENTS*/

body {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

h2 {
    font-family: 'Josefin Sans', sans-serif;
    font-weight: 600;
    font-size: 48px;
    color: white;
}

h3 {
    font-family: 'Josefin Sans', sans-serif;
    font-weight: 500;
    font-size: 32px;
    margin: 0;
}

h4 {
    font-family: 'Montserrat', sans-serif;
    font-weight: 500;
    font-size: 24px;
    margin: 0;
}

h5 {
    font-family: 'Montserrat', sans-serif;
    font-weight: 500;
    font-size: 16px;
    margin: 0;
}

h6 {
    font-family: 'Montserrat', sans-serif;
    font-weight: 400;
    font-size: 16px;
    margin: 0;
}

p {
    font-family: 'Montserrat', sans-serif;
    font-weight: 300;
}

a {
    font-family: 'Montserrat', sans-serif;
    font-weight: 300;
    color: black;
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

input[type=email] {
    border: 0;
    border-bottom: solid 1px black;
    margin-top: 6vh;
    margin-bottom: 8vh;
    font-size: 14px;
    text-align: center;
    font-family: 'Montserrat', sans-serif;
    font-weight: 300;
    padding: 1vh;
    border-radius: 0;
}

input[type=text] {
    border: 0;
    border-bottom: solid 1px black;
    font-size: 14px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 300;
    width: 100%;
    border-radius: 0;
}

input[type=password] {
    border: 0;
    border-bottom: solid 1px black;
    font-size: 14px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 300;
    width: 100%;
    border-radius: 0;
}

/*CLASSES*/

.button-0 {
    padding: 1.5vh 2vw;
    color: white;
    background-color: rgba(255, 255, 255, 0.2);
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
    display: inline-block;
    border: solid 2px;
    border-radius: 5px;
}

.button-0:hover {
    background-color: rgba(255, 255, 255, 0.6);
    -webkit-backdrop-filter: blur(5px);
    backdrop-filter: blur(5px);
}

.button-1 {
    padding: 1.5vh 2vw;
    margin-bottom: 2vh;
    color: black;
    background-color: white;
    border: solid 1px;
    border-radius: 5px;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: start;
}

.button-1 p {
    margin: 0 !important;
}

.button-1:hover {
    border: solid 1px transparent;
    background-color: #F0F0F0;
}

.button-1:focus {
    border: solid 1px transparent;
    background-color: #F0F0F0;
}

.button-2 {
    padding: 2.5vh 2vw!important;
    margin-bottom: 2vh;
    color: white;
    background-color: black;
    border: none;
    border-radius: 5px;
    text-align: center;
    width: 100%;
    text-decoration: none!important;
}

.button-2:hover {
    background-color: #2B2B2B;
}

a .button-2:hover {
    text-decoration: none;
}

.button-2:focus {
    background-color: #2B2B2B;
}

.space-between {
    display: flex;
    justify-content: space-between;
}

.section-title {
    text-align: center;
    margin-top: 6vh;
    margin-bottom: 1vh;
}

.checkbox-container {
    display: block;
    position: relative;
    padding-left: 35px;
    margin: 2vh 0;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    font-size: 12px;
    font-family: 'Montserrat', sans-serif;

}

.checkbox-container input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
}

.checkmark {
    position: absolute;
    top: 0;
    left: 0;
    height: 17px;
    width: 17px;
    border: solid 1px black;
    border-radius: 2px;
}

.checkbox-container input:checked~.checkmark {
    background-color: black;
}

.checkmark:after {
    position: absolute;
    display: none;
}

.checkbox-container input:checked~.checkmark:after {
    display: block;
}

/*BANNER*/

.banner {
    background-color: black;
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
    width: 100%;
    height: 3vh;
    height: 3svh;
    z-index: 2000;
    min-height: 20px;
}

.banner p {
    font-size: 10px;
    margin: 0;
}

/*NAV*/

nav {
    height: 10vh;
    height: 10svh;
    min-height: 50px;
    background-color: rgba(255, 255, 255, 1);
    filter: drop-shadow(0 -20px 15px);
    z-index: 999;
}

.index-nav {
    background-color: rgba(255, 255, 255, 0.9);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    filter: none;
}

.index-nav .nav-wordmark {
    display: none;
    visibility: hidden;
}

.navbar {
    padding: 0 3vw;
    padding: 0 3svw;
}

.navbar .container-fluid {
    flex-wrap: nowrap;
    padding: 0;
    justify-content: center;
}

.offcanvas {
    width: 30svw !important;
    height: 100vh !important;
    border: none !important;
    filter: drop-shadow(0 0 30px);
    z-index: 2000;
    background-color: white;
}

.nav-menu {
    width: 100%;
}

.navbar-toggler:hover {
    opacity: 0.6;
}

.navbar-toggler:focus {
    box-shadow: none;
}

.navbar-toggler {
    padding: 0;
    border: 0;
}

.navbar-toggler:hover {
    box-shadow: none;
}

.nav-icons {
    width: 100%;
    display: flex;
    justify-content: end;
    gap: 24px;
}

.search-icon:hover {
    opacity: 0.6;
}

.login-icon:hover {
    opacity: 0.6;
}

.bag-icon:hover {
    opacity: 0.6;
}

.search-icon-mobile {
    display: none;
}

.login-icon-mobile {
    display: none;
}

.offcanvas-header {
    height: 10vh;
    height: 10svh;
    background-color: white;
    padding: 0 3vw;
    padding: 0 3svw;
    filter: drop-shadow(0 -20px 15px);
}

.offcanvas-header .btn-close {
    padding: 0;
}

.btn-close {
    background-image: url(assets/icons/close-icon.svg);
    height: 21px;
    width: 21px;
    opacity: initial;
}

.btn-close:focus {
    box-shadow: none;
}

.offcanvas-body {
    height: 90vh;
    height: 90svh;
    padding: 0 3vw;
    padding: 0 3svw;
}

.navbar-nav {
    height: 100%;
}

.nav-link {
    padding: 1vh 0;
    font-weight: 300;
}

.nav-link-title {
    padding: 3vh 0;
    font-weight: 400;
}

.unactive {
    text-decoration: line-through;
}

.unactive:hover {
    text-decoration: line-through;
}

.sidebar-img {
    margin: 3vw 0;
    margin: 3svw 0;
    height: 100%;
    display: flex;
    align-items: end;
}

.sidebar-img img {
    width: 100%;
    max-height: 50vh;
    object-fit: cover;
}

/*HEADER*/

header {
    margin: 0 3vw;
    margin: 0 3svw;
    height: 100%;
}

/*INDEX*/

/*Cover*/

.index-cover {
    height: 90vh;
    height: 90svh;
    padding-bottom: 3vw;
    padding-bottom: 3svw;
    position: relative;
    text-align: center;
}

.index-cover img {
    object-fit: cover;
    height: 100%;
    width: 100%;
}

.index-cover-text {
    position: absolute;
    top: 65%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.index-cover-mobile {
    display: none;
}

/*Products*/

.index-products {
    width: 100%;
    display: flex;
    gap: 3vw;
    gap: 3svw;
    justify-content: space-between;
    ;
}

.index-products a {
    width: 50%;
}

.index-products img {
    width: 100%;
}

.index-product-1 {
    position: relative;
    text-align: center;
    width: 100%;
}

.index-product-1-back {
    position: absolute;
    top: 0;
    left: 10%;
    width: 80%;
    z-index: -1;
}

.index-product-1-front:hover {
    opacity: 0;
    transition: opacity 0.5s ease-in-out;
}

.index-product-2-front:hover {
    opacity: 0;
    transition: opacity 0.5s ease-in-out;
}

.index-product-2-back {
    position: absolute;
    top: 0;
    left: 10%;
    width: 80%;
    z-index: -1;
}

.index-product-1-text {
    position: absolute;
    top: 25%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
}

.index-product-2 {
    position: relative;
    text-align: center;
    width: 100%;
}

.index-product-2-text {
    position: absolute;
    top: 25%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
}

/*About*/

.index-about {
    height: 90vh;
    padding-top: 3vw;
    padding-top: 3svw;
    position: relative;
    text-align: center;
}

.index-about img {
    object-fit: cover;
    height: 100%;
    width: 100%;
}

.index-about-text {
    position: absolute;
    top: 40%;
    left: 50%;
    transform: translate(-50%, -50%);
}

/*CATALOGUE*/

.catalogue .row>* {
    padding: 0;
}

.catalogue-cover {
    height: 40vh;
}

.catalogue-cover img {
    object-fit: cover;
    height: 100%;
    width: 100%;
}

.catalogue-location {
    display: flex;
    justify-content: center;
    gap: 12px;
    font-size: 14px;
}

.catalogue {
    text-align: center;
}

.catalogue a:hover {
    text-decoration: none;
}

.catalogue .row {
    justify-content: space-evenly;
    margin-bottom: 7vh;
}

.catalogue img {
    width: 100%;
}

.catalogue h5 {
    margin-bottom: 2vh;
}

.catalogue h6 {
    font-weight: 300;
}

.catalogue p {
    font-size: 12px;
    margin: 0;
}

.trunk-white {
    position: relative;
    text-align: center;
}

.trunk-white-front:hover {
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
}

.trunk-white-back {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: -1;
    height: 95%;
}

.trunk-black {
    position: relative;
    text-align: center;
}

.trunk-black-front:hover {
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
}

.trunk-black-back {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: -1;
    height: 95%;
}

.trunk-beige {
    position: relative;
    text-align: center;
}

.trunk-beige-front:hover {
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
}

.trunk-beige-back {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: -1;
    height: 95%;
}

.trunks-white {
    position: relative;
    text-align: center;
}

.trunks-white-front:hover {
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
}

.trunks-white-back {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: -1;
    height: 95%;
}

.trunks-black {
    position: relative;
    text-align: center;
}

.trunks-black-front:hover {
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
}

.trunks-black-back {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: -1;
    height: 95%;
}

.trunks-beige {
    position: relative;
    text-align: center;
}

.trunks-beige-front:hover {
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
}

.trunks-beige-back {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: -1;
    height: 95%;
}

/*PRODUCT*/

.product-section {
    display: flex;
}

.product-image-container {
    margin-right: 3svw;
}

.product-image-cover {
    height: 90vh;
    height: 90svh;
    padding: 3vw 0;
    padding: 3svw 0;
}

.product-image-cover img {
    height: 100%;
}

.product-image {
    padding-bottom: 3vw;
    padding-bottom: 3svw;
}

.product-image img {
    width: 100%;
}

.product-text-container {
    width: 100%;
    display: flex;
    justify-content: center;
    height: auto;
}

.product-text {
    display: flex;
    justify-content: center;
    flex-direction: column;
    width: 60%;
    position: sticky;
    top: 0;
    height: 90vh;
    height: 90svh;
}

.product-text-1 {
    border-bottom: solid 1px #C7C7C7;
    padding-bottom: 2vh;
    margin-bottom: 3vh;
}

.product-text-1 p {
    font-size: 14px;
    margin-top: 2vh;
    margin-bottom: 0;
}

.product-text-2 {
    display: flex;
    justify-content: space-between;
}

.product-text-2 a {
    width: 30%;
}

.product-text-2 img {
    width: 100%;
    border-radius: 5px;
}

.product-active {
    border: solid 1px #2B2B2B;
}

.product-out {
    opacity: 0.5;
}

.product-text-3 {
    margin-top: 3vh;
}

.product-text-3 a {
    text-decoration: underline;
    font-size: 12px;
    display: flex;
    justify-content: center;
    margin-bottom: 2vh;
}

.product-column-img {
    display: flex;
    flex-direction: column;
}

/*PAYMENT*/

.payment {
    margin-bottom: 30vh;
}

.payment .row {
    justify-content: space-evenly;
}

.payment-title {
    margin-top: 6vh;
}

.payment-section {
    margin-top: 6vh;
}

.payment-section h5 {
    margin-bottom: 3vh;
}

.payment-section p {
    font-size: 12px;
    margin: 0;
    margin-top: 2vh;
}

.summary {
    background-color: white;
    box-shadow: 0px 0px 20px 0px #F0F0F0;
    margin-top: 6vh;
    padding: 0 2vw;
}

.summary .row {
    --bs-gutter-x: 0;
}

.summary p {
    margin: 0;
    font-size: 12px;
}

.payment-products {
    padding: 2vh 0;
}

.payment-product {
    align-items: center;
}

.payment-product img {
    width: 100%;
}

.payment-product-text {
    padding-left: 2vw;
}

.summary-section {
    align-items: center;
    padding: 2vh 2vw;
    border-top: solid 1px;
}

.summary h6 {
    margin: 1vh 0;
}

.summary h5 {
    margin: 3vh 0;
}

.apply-code {
    text-align: end;
    border-left: solid 1px;
}

.payment-finish {
    margin: 6vh 0;
}

/*LOGIN*/

.login .row {
    justify-content: center;
}

.login .section-title {
    margin-bottom: 6vh;
}

.login p {
    font-size: 12px;
    margin: 0;
    margin-top: 2vh;
}

.login-section {
    margin-bottom: 4vh;
}

.password {
    text-decoration: underline;
}

/*BAG*/

.bag {
    margin-bottom: 30vh;
}

.bag-title h3 {
    text-align: start;
}

.bag-section {
    background-color: white;
    box-shadow: 0px 0px 20px 0px #F0F0F0;
    margin-top: 3vh;
    padding: 3vw;
}

.bag-product {
    display: flex;
    margin: 2svh 0;
    padding: 0;
    align-items: center;
}

.bag h5 {
    text-align: start;
    margin: 0;
    padding: 2vh;
}

.bag p {
    margin: 0;
    font-size: 12px;
}

.bag .row {
    justify-content: space-evenly;
    margin: 0;
}

.bag-img img {
    width: 100%;
}

.bag-product-text {
    padding-left: 2vw;
}

.bag-product-title {
    display: flex;
    justify-content: space-between;
    padding-top: 3vh;
    padding-bottom: 10px;
    gap: 10px;
}

.bag-product-close {
    display: flex;
    justify-content: end;
}

.bag-product-close img {
    height: 15px;
}

.bag-total-section {
    padding: 2vh 0;
    margin-bottom: 2vh;
}

.bag-total-section h5 {
    padding: 0;
}

.subtotal {
    border-bottom: solid 1px black;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/*CONTACT*/

.contact {
    padding: 30vh 0;
    text-align: center;
}

.contact .row {
    justify-content: center;
}


.newsletter {
    align-items: end;
}

.mail {
    width: 100%;
    margin-top: 4vh;
    margin-bottom: 8vh;
}

.social {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

/*FOOTER*/
footer {
    margin-top: auto;
    z-index: 0;
}

.footer-text {
    margin: 4vh 0;
    display: flex;
    gap: 4svw;
    justify-content: center;
    align-items: center;
}

.footer-text a {
    font-size: 12px;
    font-weight: 500 !important;
}

.footer .row {
    justify-content: center;
}

.footer-bar {
    height: 10vh;
    height: 10svh;
    min-height: 60px;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: white;
    filter: drop-shadow(0 2vh 1.5vh)
}

.footer-section {
    margin-top: 6vh;
    margin-bottom: 20vh;
}

.footer-section h5 {
    margin-top: 6vh;
    margin-bottom: 2vh;
}

.footer-section p {
    text-align: justify;
    font-size: 12px !important;
}

.footer-section ul {
    font-size: 12px;
    font-weight: 300;
}

.contact-section {
    display: flex;
    gap: 20px;
    align-items: center;
    margin: 1vh 0;
}

.contact-section p {
    margin: 0;
}

/*ABOUT*/

.about .row {
    display: flex;
    justify-content: center;
    text-align: justify;
}

.about-title {
    text-align: center;
    margin: 6vh 0;
}

.about img {
    width: 100%;
    margin-top: 2vh;
}

.about-section {
    margin-bottom: 20vh;
}

/*MEDIA QUERIES*/

@media (max-width:1400px) {

    /*COMPONENTS*/

    /*CLASSES*/

    /*NAV*/

    .offcanvas {
        width: 40vw !important;
    }

    /*HEADER*/

    /*INDEX*/

    /*CATALOGUE*/

    /*PRODUCT*/

    .product-image-cover {
        height: auto;
    }

    .product-image-cover img {
        height: auto;
        width: 100%;
    }

    .product-text-container {
        width: 50%;
    }

    .product-text {
        width: 100%;
    }

    /*PAYMENT*/

    /*LOGIN*/

    /*BAG*/

    /*CONTACT*/

    /*FOOTER*/


}

@media (max-width:1200px) {

    /*COMPONENTS*/

    /*CLASSES*/

    /*NAV*/

    .offcanvas {
        width: 50vw !important;
    }

    /*HEADER*/

    /*INDEX*/

    /*CATALOGUE*/

    /*PRODUCT*/

    /*PAYMENT*/

    /*LOGIN*/

    /*BAG*/

    /*CONTACT*/

    /*FOOTER*/

}

@media (max-width:992px) {

    /*COMPONENTS*/

    /*CLASSES*/

    /*NAV*/

    .offcanvas {
        width: 60vw !important;
    }

    .nav-wordmark img {
        height: 20px;
    }

    .nav-menu img {
        height: 15px;
    }

    .nav-icons img {
        height: 17px;
    }

    /*HEADER*/

    /*INDEX*/

    .index-products {
        flex-wrap: wrap;
        gap: 6vw;
        gap: 6svw;
    }

    .index-products a {
        width: 100%;
    }

    .index-product-1-text {
        display: block;
    }

    .index-product-2-text {
        display: block;
    }

    /*CATALOGUE*/

    /*PRODUCT*/

    .product-image-cover {
        max-width: none;
    }

    .product-section {
        flex-direction: column;
    }

    .product-overflow {
        overflow: scroll;
    }

    .product-image-container {
        display: flex;
        flex-direction: row;
        gap: 3svw;
        margin: 0;
        width: 288vw;
    }

    .product-image, .product-image-cover {
        height: auto;
        width: 100%;
        padding: 0;
        padding-top: 3vw;
        padding-top: 3svw;
        display: inline-block;
    }

    .product-image, .product-image-cover img {
        width: 100%;
    }

    .product-text-container {
        margin-top: 3vw;
        margin-top: 3svw;
        height: auto;
        width: 100%;
    }

    .product-text {
        width: 80%;
    }

    .product-text {
        position: static;
        justify-content: start;
    }

    /*PAYMENT*/

    .payment-method img {
        height: 20px;
    }

    /*LOGIN*/

    /*BAG*/

    /*CONTACT*/

    /*FOOTER*/


}

@media (max-width:768px) {

    /*COMPONENTS*/

    /*CLASSES*/

    /*NAV*/

    nav {
        height: 8vh;
        height: 8svh;
    }

    .index-nav .nav-wordmark {
        display: block;
        visibility: visible;
    }

    .navbar {
        padding: 0 6vw;
        padding: 0 6svw;
    }

    .nav-icons {
        gap: 15px;
    }

    .offcanvas {
        width: 70vw !important;
    }

    .offcanvas-header {
        height: 8vh;
        height: 8svh;
        padding: 0 6vw;
        padding: 0 6svw;
    }

    .offcanvas-body {
        padding: 0 6vw;
        padding: 0 6svw;
    }

    .sidebar-img {
        margin: 6vw 0;
        margin: 6svw 0;
    }

    /*HEADER*/

    header {
        margin: 0 6vw;
        margin: 0 6svw;
    }

    /*INDEX*/

    .index-cover {
        height: 92vh;
        height: 92svh;
        padding-bottom: 6vw;
        padding-bottom: 6svw;
    }

    .index-cover-text {
        top: 45%;
    }

    .index-cover-desktop {
        display: none;
    }

    .index-cover-mobile {
        display: block;
    }

    .index-about {
        height: 92vh;
        height: 92svh;
        padding-top: 6vw;
        padding-top: 6svw;
    }

    /*CATALOGUE*/

    .catalogue-cover {
        height: 30vh;
        height: 30svh;
        margin-bottom: 2vh;
        margin-bottom: 2svh;
    }

    .catalogue p {
        font-size: 10px;
    }

    /*PRODUCT*/

    .product-image-container {
        display: flex;
        flex-direction: row;
        gap: 6svw;
        margin: 0;
        width: 276vw;
    }

    .product-image, .product-image-cover {
        padding-top: 6vw;
        padding-top: 6svw;
    }

    .product-text {
        width: 100%;
    }

    /*PAYMENT*/

    .summary-section {
        margin: 0 4vw;
    }

    /*LOGIN*/

    /*BAG*/

    .bag {
        padding: 0;
    }

    .bag-section {
        padding: 6vw;
    }

    .bag-product-title {
        flex-direction: column;
    }

    /*CONTACT*/

    /*FOOTER*/
}

@media (max-width:576px) {

    /*COMPONENTS*/

    h2 {
        font-size: 24px;
    }

    h3 {
        font-size: 24px;
    }

    h4 {
        font-size: 20px;
    }

    h5 {
        font-size: 14px;
    }

    h6 {
        font-size: 14px;
    }

    p {
        font-size: 14px;
    }

    a {
        font-size: 14px;
    }

    /*CLASSES*/

    .button-0 {
        padding: 1vh 4vw;
    }

    .button-1 {
        padding: 1vh 4vw;
    }

    .button-2 {
        padding: 1.5vh 4vw;
    }

    /*NAV*/

    .offcanvas {
        width: 100vw !important;
    }

    .search-icon {
        display: none;
    }

    .login-icon {
        display: none;
    }

    .search-icon-mobile {
        display: block;
    }

    .login-icon-mobile {
        display: block;
    }

    /*HEADER*/

    /*INDEX*/

    .mail p {
        font-size: 12px;
    }

    /*CATALOGUE*/

    .catalogue-location a {
        font-size: 10px;
    }

    /*PRODUCT*/

    /*PAYMENT*/

    .payment-method img {
        display: none;
    }

    /*LOGIN*/

    /*BAG*/

    .bag-product-text {
        padding: 0 2vw;
    }

    /*CONTACT*/

    /*FOOTER*/

    .footer-text {
        flex-direction: column;
    }
}