:root {
    --nav: #1B1E25;
    --nav-transparent: #1b1e25a3;

    --nav-light: #282c35;

    --nav-light-hover: #3b4150;

    --surface: #2C3B4D;
    --surface-light: #3a4e66;

    --primary: #22589A;

    --accent: #FFB162;
    --accent-hover: #e7a05a;

    --accent-dark: #A35139;

    --accent-dark-hover: #86432f;

    --text: #F4F1EA;
    --text-dark: #1b1e25;

    --secondary: #bdbcb9;
    --secondary-hover: #9e9d9b;

    --blue-transparent: #1b45797f;
}

/* GLOBAL -------------------------------------------------------------- */

* {
    color: var(--text);
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    scroll-behavior: smooth;
    font-family: 'Poppins', sans-serif;
}

.border-radius1 {
    border-radius: 10px;
    box-shadow:
        0 4px 6px rgba(0, 0, 0, 0.08),
        0 12px 24px rgba(0, 0, 0, 0.18);
}

.wrapper {
    max-width: 1000px;
    margin: 0 auto;
}

.index {
    background: #1C2026;
    background: linear-gradient(180deg,
            rgba(28, 32, 38, 1) 16%,
            rgba(28, 32, 38, 1) 20%,
            rgba(28, 32, 38, 1) 21%,
            rgba(40, 44, 53, 1) 48%,
            rgba(42, 46, 61, 1) 56%,
            rgba(48, 54, 66, 1) 64%,
            rgba(76, 68, 74, 1) 70%,
            rgba(105, 81, 73, 1) 72%,
            rgba(99, 65, 50, 1) 75%,
            rgba(87, 56, 43, 1) 85%);

    min-height: 100vh;
}

.products,
.productsdetail {
    background: #757d82;
    background: radial-gradient(circle, rgba(117, 125, 130, 1) 0%, rgba(54, 71, 89, 1) 40%, rgba(44, 59, 77, 1) 58%, rgba(35, 47, 61, 1) 80%);
}

.masterclasses,
.contact {
    background: #F4F1EA;
    background: radial-gradient(circle, rgba(244, 241, 234, 1) 0%, rgba(189, 188, 185, 1) 31%, rgba(158, 157, 155, 1) 74%);
}

/* FONTS AND HEADINGS -------------------------------------------------------------- */

h2 {
    display: inline;
    color: var(--accent);
    text-transform: uppercase;
    font-weight: 700;
    font-size: 2.2rem;
    border-left: 5px solid var(--accent);
    padding: 0 2rem 0 1rem;
    background-color: var(--blue-transparent);
}

@media (max-width: 768px) {
    h2 {
        font-size: 2rem;
        padding-left: .75rem;

    }
}

h3 {
    display: inline-block;
    align-self: flex-start;

    padding: 4px 10px;

    font-size: 1.5rem;
    font-weight: 700;

    color: white;

    background-color: rgba(163, 82, 57, 0.55);
    border-bottom: 2px solid var(--accent);
}

a {
    color: var(--text);
}

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

body {

    font-family: 'Inter', sans-serif;
}

/* FORM submit Popup -------------------------------------------------------------- */

.popup {
    position: fixed;
    top: 50px;
    right: 20px;

    padding: 16px 20px;
    background: var(--accent-dark);
    color: var(--text);
    border-radius: 8px;

    z-index: 9999;

    animation: popup 4s forwards;
}

@keyframes popup {
    0% {
        opacity: 0;
        transform: translateX(30px);
    }

    10%,
    80% {
        opacity: 1;
        transform: translateX(0);
    }

    100% {
        opacity: 0;
        transform: translateX(30px);
        visibility: hidden;
    }
}

/* ICONS & LISTS -------------------------------------------------------------- */

.icon-style {
    background-color: #24272f;
    border: 2px solid var(--nav-light-hover);
    padding: 5px;
    transition: 0.4s ease;
    border-radius: 8px;
}

.icon-style:hover {
    background-color: var(--nav-transparent);
}

.list-style {
    padding: 8px 12px;
    background-color: #32406078;
    color: var(--text);
    border: 1px solid var(--nav);
    border-radius: 4px;
    align-self: flex-start;
    transition: transform 0.4s ease;
    transition: 0.4s ease;
    font-size: 0.9rem;
    font-weight: 500;
}

.list-inline {
    display: flex;
    flex-direction: column;
    gap: 12px;
    list-style: none;

}

.list-style:hover {
    transform: translateY(-2px);
    background-color: var(--blue-transparent);
}


/* Header ----------------------------------------------------------- */


header {
    position: sticky;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 9999;

    background-color: #13151ae7;
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
}

header .wrapper {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 1rem 0;
    transition: 0.4s ease;
}

header.small .wrapper {
    padding: 0.5rem 2rem;
}

header.small .logo {
    width: 85px;
}

header.small .nav-link {
    font-size: 17px;
}

@media (min-width: 769px) {
    header .wrapper {
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        padding: 10px 1rem;
    }
}

/* Navigation -------------------------------------------------------------- */

.logo {
    width: 120px;
    display: flex;
    background-color: var(--nav-light);
    border-radius: 50%;
    padding: 5px;
    transition: 0.4s ease;
}

.navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.nav-menu {
    list-style: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 80px;
}

/* Links ------------------------------------------------------------------- */

.nav-link {
    display: inline-block;
    padding: 5px 10px;

    background-color: var(--nav-light);
    border-radius: 5px;

    text-decoration: none;
    font-size: 20px;

    transition: 0.4s ease;
}

.nav-link:hover {
    transform: scale(1.05);
    background-color: var(--nav-light-hover);
    color: var(--text);
}

.nav-link2 {
    display: inline-block;
    padding: 5px 10px;

    background-color: var(--accent-dark);
    border-radius: 5px;

    color: var(--text);
    text-decoration: none;
    font-size: 16px;

    transition: 0.4s ease;
}

.nav-link2:hover {
    transform: scale(1.05);
    background-color: var(--accent-dark-hover);
    color: var(--text);
}

.nav-link3 {
    display: inline-block;
    padding: 5px 10px;

    background-color: var(--blue-transparent);
    border: 2px solid var(--surface);
    border-radius: 5px;

    color: var(--text);
    text-decoration: none;
    font-size: 16px;

    transition: 0.4s ease;
}

.nav-link3:hover {
    transform: scale(1.05);
    background-color: var(--primary);
    color: var(--text);
}

/* Hamburger MENU   --------------------------------------------------------------- */

.hamburger {
    display: none;
    cursor: pointer;
}

.bar {
    display: block;
    width: 25px;
    height: 3px;
    margin: 5px 0;

    background-color: var(--secondary);

    transition: all 0.4s ease;
}

.hamburger:hover .bar {
    background: var(--accent);
    transform: scale(1.07);
}


@media (max-width: 768px) {

    header .wrapper {
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        padding: 20px;

    }

    .hamburger {
        display: block;
        margin-left: auto;
    }

    .hamburger.active .bar:nth-child(1) {
        transform: translateY(8px) rotate(45deg);
    }

    .hamburger.active .bar:nth-child(2) {
        opacity: 0;
    }

    .hamburger.active .bar:nth-child(3) {
        transform: translateY(-8px) rotate(-45deg);
    }

    .nav-menu {
        position: absolute;
        top: 100%;
        left: 0;

        width: 100%;

        display: flex;
        flex-direction: column;
        align-items: center;

        gap: 0;
        padding: 10px 0;
        margin: 0;

        background-color: var(--nav-light);

        max-height: 0;
        overflow: hidden;

        opacity: 0;

        transition:
            max-height 0.4s ease,
            opacity 0.4s ease,
            transform 0.4s ease;
    }

    .nav-menu.active {
        max-height: 500px;
        opacity: 1;
        transform: translateY(0);
    }

    .nav-item {
        margin: 15px 0;
    }
}

/* HERO -------------------------------------------------------------- */

.heroimage-section {
    position: relative;
    z-index: 1;

    display: flex;
    flex-direction: column;
    justify-content: center;

    min-height: 410px;

    background-image: url("../img/hero2.png");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;

    overflow: hidden;
}

.heroimage-section::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse at 15% 110%,
            rgba(232, 134, 42, 0.35) 0%,
            transparent 55%),
        linear-gradient(90deg,
            rgba(22, 25, 31, 0.95) 0%,
            rgba(22, 25, 31, 0.75) 55%,
            rgba(22, 25, 31, 0.2) 100%);
    z-index: -1;
}

.heroimage-section::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 120px;
    background: linear-gradient(transparent,
            rgba(22, 25, 31, 0.7));
}

.hero-titles {
    width: 1000px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    animation: omhoog 0.8s cubic-bezier(0.2, 0.7, 0.3, 1) both;
}


@media (max-width: 600px) {
    .hero-titles {
        width: 100%;
        align-items: center;
        justify-content: center;
    }

    .hero-buttons {
        display: flex;
        flex-direction: column;
    }
}

.hero-titles h4 {
    color: #fff8e1;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    font-size: 15px;
}

.hero-buttons {
    margin-top: 10px;
    color: #fff8e1;
    text-transform: uppercase;
    letter-spacing: 1.5px;

    text-shadow:
        0 0 3px #ffef9a,
        0 -1px 6px #ffd54f,
        0 -4px 12px #ff9800,
        0 -8px 20px #ff5722,
        0 -12px 30px #b71c1c;

    animation: fire 1.8s infinite ease-in-out;
}

@keyframes fire {
    0% {
        text-shadow:
            0 0 3px #ffef9a,
            1px -2px 6px #ffd54f,
            -1px -5px 12px #ff9800,
            1px -10px 20px #ff5722,
            -1px -15px 30px #b71c1c;
    }

    50% {
        text-shadow:
            0 0 4px #ffef9a,
            -1px -3px 8px #ffd54f,
            2px -7px 14px #ff9800,
            -2px -12px 24px #ff5722,
            1px -18px 35px #b71c1c;
    }

    100% {
        text-shadow:
            0 0 3px #ffef9a,
            1px -2px 6px #ffd54f,
            -1px -5px 12px #ff9800,
            1px -10px 20px #ff5722,
            -1px -15px 30px #b71c1c;
    }
}

.hero-title {
    font-size: clamp(1.5rem, 2.0rem + 3vw, 4.5rem);
    letter-spacing: 3px;
    text-transform: uppercase;

    color: white;

    display: inline-flex;
    align-self: flex-start;

    padding: 10px 20px;

    background-color: rgba(34, 88, 154, 0.75);
    backdrop-filter: blur(5px);

    border-radius: 8px;
}

.hero-buttons {
    display: flex;
    gap: 20px;
}

.herolist-section {
    padding: 20px 0;
    background: var(--secondary);
}

.herolist-section ul {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;

    list-style: none;

    animation: omhoog 0.8s cubic-bezier(0.2, 0.7, 0.3, 1) both;
}

.herolist-section li {
    display: flex;
    align-items: center;
    gap: 12px;

}

.herolist-section i {
    width: 35px;
    height: 35px;

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


    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 14px;

    box-shadow:
        0 8px 20px rgba(0, 0, 0, .15),
        0 0 20px rgba(255, 120, 0, .08);

}

.herolist-section i img {
    width: 40px;
    height: 40px;

}

@media (max-width: 600px) {


    .herolist-section ul {
        display: flex;
        flex-wrap: wrap;
        gap: 15px;
        margin: 0 5px;

    }

    .herolist-section li {
        font-size: 0.6rem;
    }

    .herolist-section i img {
        width: 30px;
        height: 30px;
    }
}

/* ANIMATIE */

@keyframes omhoog {
    from {
        opacity: 0;
        transform: translateY(24px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}


/* SUBPAGE HERO -------------------------------------------------------------- */

.subpage-hero {
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 250px;
    position: relative;
    overflow: hidden;
    background: var(--nav-light);
    color: var(--creme);
    padding: 64px 0;
    background-size: cover;
    background-position: center;
}

.products .heroimage-section {
    background-image: url(../img/hero3.png);
    min-height: 300px;
}

.subpage-titles {
    animation: omhoog 0.8s cubic-bezier(0.2, 0.7, 0.3, 1) both;
}

.subpage-hero h1 {
    font-size: clamp(1rem, 1.2rem + 3vw, 4.5rem);
}

.subpage-hero::after {
    content: '';
    position: absolute;
    right: -10%;
    bottom: -50%;
    width: 60%;
    aspect-ratio: 1;
    background: radial-gradient(circle, rgba(244, 145, 52, 0.22) 0%, transparent 75%);
    pointer-events: none;
}

.subpage-hero h1,
.subpage-hero h5 {
    margin-bottom: 0.2em;
    align-self: self-start;
}

.subpage-hero h5 {
    font-size: 15px;
}

.subpage-hero p {
    margin-bottom: 0;
    opacity: 0.85;
    font-size: 18px;
}

@media (max-width: 600px) {

    .subpage-hero p {

        font-size: 17px;
    }

    .subpage-titles {
        margin: 0 5px;

    }

    .subpage-hero::after {
        content: '';
        position: absolute;
        right: -20%;
        bottom: 0;
        width: 80%;
        aspect-ratio: 1;
        background: radial-gradient(circle, rgba(244, 145, 52, 0.22) 0%, transparent 75%);
        pointer-events: none;
    }
}

/* Breadcrumb -------------------------------------------------------------- */
.breadcrumb {
    margin: 30px 0 18px 30px;
    gap: 0.75rem;
    font-size: 1rem;
}

.products .breadcrumb a,
.productsdetail .breadcrumb a {
    color: var(--text);
}

.products .breadcrumb span,
.productsdetail .breadcrumb span {
    color: var(--secondary-hover);
}

.breadcrumb a {
    color: var(--nav);
    text-decoration: none;
}

.breadcrumb a:hover {
    color: var(--accent-dark-hover);
}

.breadcrumb span {
    color: var(--nav-light-hover);
}


/* home page about section -------------------------------------------------------------- */

.about-section {
    padding: 30px 0;
    margin: 5px;
}

.about-section .wrapper {
    display: grid;
    gap: 20px;
}

.about-content {
    margin-top: 20px;
    padding: 10px;
    color: var(--text);
    background: var(--blue-transparent);
}

.about-content img {
    width: 100%;
    height: 350px;
    object-fit: cover;
}

.about-text {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.about-text h4 {
    margin-bottom: 15px;
    font-size: 24px;
    text-transform: uppercase;
}

.about-text blockquote {
    padding: 10px;
    background: var(--nav-transparent);
}

.about-text p {
    margin-bottom: 15px;
    font-size: 14.5px;
    line-height: 1.8;
}

.about-text p:last-child {
    margin-bottom: 0;
}

@media (min-width: 768px) {
    .about-section {
        padding: 50px 0;
    }

    .about-section .wrapper {
        grid-template-columns: repeat(2, 1fr);
    }

    .about-section .wrapper>.container:first-child {
        grid-column: 1 / -1;
    }

    .about-text {
        padding-left: 10px;
    }
}

/* home page highlight section -------------------------------------------------------------- */

.highlight-section {
    padding: 50px 0;
    margin: 5px;
    min-height: 350px;
}

.highlight-section .wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.highlight-slideshow {
    display: flex;
    gap: 1rem;

    width: 100%;
    margin: 3rem auto;

    overflow-x: auto;
    scroll-behavior: smooth;
    scroll-snap-type: x mandatory;

    anchor-name: --slideshow;

    scrollbar-width: none;
}

.highlight-slideshow::-webkit-scrollbar {
    display: none;
}

.highlight-box {
    flex: 0 0 20rem;

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

    padding: 10px;

    scroll-snap-align: start;

    background: var(--secondary);
    color: var(--nav);

    transition: background-color .4s ease;
}

.highlight-box:hover {
    background: var(--secondary-hover);
}

.highlight-section img {
    width: 100%;
    max-width: 300px;
    height: 275px;

    object-fit: cover;
    border-radius: 8px;

    transition: transform .4s ease;
}

.highlight-box:hover img {
    transform: scale(1.05);
}

/* Navigation buttons */

.highlight-slideshow::scroll-button(left),
.highlight-slideshow::scroll-button(right) {
    width: 40px;
    height: 40px;

    border: none;
    border-radius: 50%;

    background: var(--accent-dark);
    color: #000;

    font-size: 2rem;
    line-height: 1;

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

    cursor: pointer;

    position: fixed;
    position-anchor: --slideshow;

    z-index: 100;

    transition: background-color .3s ease;
}

.highlight-slideshow::scroll-button(left) {
    content: "‹";
    position-area: left center;
    translate: 40% 0;
}

.highlight-slideshow::scroll-button(right) {
    content: "›";
    position-area: right center;
    translate: -40% 0;
}

.highlight-slideshow::scroll-button(left):hover,
.highlight-slideshow::scroll-button(right):hover {
    background: var(--accent-dark-hover);
}

.highlight-slideshow::scroll-button(left):disabled,
.highlight-slideshow::scroll-button(right):disabled {
    opacity: .5;
}

/* Mobile */

@media (max-width: 500px) {

    .highlight-section {
        padding: 30px 0;
    }

    .highlight-box {
        flex: 0 0 85%;
    }

    .highlight-section img {
        height: 220px;
    }

    .highlight-slideshow::scroll-button(left),
    .highlight-slideshow::scroll-button(right) {
       display: none;
    }


}
/* home page masterclass section -------------------------------------------------------------- */

.masterclass-section {
    max-height: 600px;
    margin: 5px 5px 90px;
    color: var(--text);
}

.masterclass-section .container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 10px;
}

.masterclass-section .container:nth-child(2) {
    margin-top: 20px;
    background-color: var(--nav-transparent);
}

.masterclass-section img {
    display: block;
    width: 100%;
    max-width: 450px;
    object-fit: cover;
}

.masterclass-section .text-box {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 20px;
}

.masterclass-section p {
    font-size: 18px;
    font-weight: 700;
    line-height: 1.5;
}

.masterclass-section ul {
    list-style: none;
    font-size: 18px;
}

.masterclass-section li {
    margin-bottom: 20px;
}

.masterclass-section li:last-child {
    margin-bottom: 0;
}

.masterclass-section a {
    display: inline-block;
    align-self: flex-start;
    padding: 3px 5px;
    font-size: 18px;
    text-transform: uppercase;
}

@media (max-width: 500px) {
    .masterclass-section {
        max-height: none;
    }

    .masterclass-section p,
    .masterclass-section ul,
    .masterclass-section a {
        font-size: 16px;
    }
}

@media (min-width: 1000px) {
    .masterclass-section .container {
        flex-direction: row;
        align-items: center;
        gap: 50px;
    }

    .masterclass-section img,
    .masterclass-section .text-box {
        flex: 1;
    }

    .masterclass-section .text-box {
        padding: 10px 0;
    }

    .masterclass-section p {
        font-size: 20px;
        padding: 10px 0;
    }
}

/* home page newspaper section -------------------------------------------------------------- */

.newspaper-section {
    display: flex;
    flex-direction: column;
    padding: 70px 0;
    color: var(--text);
    background:
        linear-gradient(to bottom,
            transparent 25%,
            rgba(40, 46, 57, 0.1) 60%,
            rgba(40, 46, 57, 0.4) 80%,
            rgba(40, 46, 57, 0.862) 95%,
            #282e39 100%),
        url("../img/hero.png");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.newspaper-section .container {
    width: 100%;
    max-width: 300px;
    padding: 20px 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: var(--nav-transparent);
    transition: 0.4s ease;
}

.newspaper-section form {
    display: flex;
    flex-direction: column;
    gap: 20px;
    width: 100%;
    max-width: 400px;
    margin: 20px 0;
    padding: 0 40px;
}

.newspaper-section .email-field {
    height: 33px;
    padding-left: 5px;
    border-radius: 5px;
    background-color: var(--text);
}

.newspaper-section .submit-button {
    margin-top: 10px;
    font-size: 17px;
    border-radius: 5px;
}

@media (max-width: 500px) {
    .newspaper-section form {
        padding: 0 15px;
    }

    .newspaper-section .container {
        max-width: 100%;
    }
}

@media (min-width: 768px) {
    .newspaper-section .container {
        min-width: 400px;
    }
}

/* footer -------------------------------------------------------------- */

.footer-container {
    background-color: var(--nav-light);
    color: white;
    padding: 30px 0 0;

}

.footer-container img {
    width: 25px;
    height: 25px;
}

.footer-container .wrapper {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 0 5px;
}

.footer-title {
    font-size: 20px;
    background-color: var(--blue-transparent);
    padding: 6px;
}

.footer-about {
    max-width: 350px;
}

.footer-about p {
    margin-top: 5px;
    line-height: 1.4;
    color: var(--secondary);
    font-size: 14px;
}

.footer-contact {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.contact-info {
    display: flex;
    align-items: center;
    gap: 8px;
    height: 40px;
    font-size: 14px;
}

.contact-info a {
    color: white;
    text-decoration: none;
}

.footer-links ul {
    list-style: none;
}

.footer-links li {
    margin: 15px 0;
}

.footer-links a {
    display: inline-block;
    font-size: 15px;
    color: white;
    text-decoration: none;
    transition: 0.4s ease;
    padding: 5px;
    border-bottom: 2px solid var(--nav-light-hover);
}

.footer-links a:hover {
    transform: translateX(5px);
    color: var(--secondary);
}

.footer-socials {
    display: flex;
    flex-direction: row;
    gap: 5px;
}

.footer-socials a {
    align-self: center;
}

.footer-logo {
    width: 90px !important;
    height: auto !important;
}

.footer-socials img {
    width: 35px;
    height: auto;
}

.footer-copyright {
    margin-top: 10px;
    padding: 10px;
    text-align: center;
    font-size: 13px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    color: var(--secondary);
}

@media (min-width: 768px) {

    .footer-container .wrapper {
        flex-direction: row;
        justify-content: space-between;
        align-items: flex-start;
        gap: 40px;
    }

    .footer-logo {
        width: 110px !important;
    }

    .footer-socials img {
        width: 50px;
        height: auto;
    }

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


/* Contact page --------------------------------------------*/


.contactform-section {
    padding: 30px 0;
    min-height: 550px;
}

.contact-text {
    color: var(--nav);
    font-size: 18px;
    margin: 20px 0 20px 5px;
    font-weight: 600;
}

.contact-container {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    gap: 10px;
}

.contact-container>.container {
    position: sticky;
    top: 30px;
    background-color: var(--nav-transparent);
    border: 1px solid var(--nav-light);
    border-radius: 12px;
    padding: 5px;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
}

.contactform-section ul {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 10px;

    padding: 10px;
    margin: 0;
}

.contactform-section li {
    width: fit-content;
    padding: 10px 15px;
    font-size: 15px;

    background: var(--blue-transparent);
    border: 1px solid var(--nav-light-hover);
    border-radius: 8px;

    transition: .3s ease;
}

.contactform-section li:hover {
    border-color: var(--accent);
    transform: translateX(2px);
}

.namefield {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 5px;
}

.contactform-section form {
    width: 100%;
    max-width: 700px;
    background-color: var(--nav-transparent);
    border: 1px solid var(--nav-light);
    padding: 20px;
    border-radius: 12px;
}


.contactform-section input,
.contactform-section textarea {
    color: var(--nav);
    font-size: 13px;
}

.firstname-field,
.lastname-field,
.email-field,
.subject-field,
.submit-button,
.message-field {
    border-radius: 8px;
    background-color: var(--text);
    border: 1px solid rgba(255, 255, 255, 0.12);
    transition: 0.3s ease;
    box-sizing: border-box;
}

.firstname-field,
.lastname-field,
.email-field,
.subject-field {
    height: 35px;
    padding: 0 12px;
}

.message-field {
    height: 130px;
    padding: 12px;
    resize: vertical;
}

.firstname-field:hover,
.lastname-field:hover,
.email-field:hover,
.subject-field:hover,
.message-field:hover {
    border-color: rgba(255, 255, 255, .25);
}

.firstname-field:focus,
.lastname-field:focus,
.email-field:focus,
.subject-field:focus,
.message-field:focus {
    background-color: var(--secondary);
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 10px rgba(58, 255, 61, 0.2);
}

.firstname-field,
.lastname-field,
.email-field,
.subject-field,
.message-field,
.submit-button {
    margin-bottom: 15px;
    width: 100%;
}

.submit-button {
    margin-top: 5px;
    padding: 10px 20px;
    font-size: 15px;
    background-color: var(--accent);
    color: white;

    border: none;
    cursor: pointer;

    height: 35px;
    font-weight: 700;

    box-shadow: 0 6px 16px rgba(0, 0, 0, .2);
}

.submit-button:hover {
    background-color: var(--accent-hover);
    transform: scale(1.02);
}

@media (max-width: 750px) {
    .contact-container {
        flex-direction: column-reverse;
        padding: 10px;
    }

    .contact-container>.container,
    .contact-container form {
        width: 100%;
    }

    .contact-container ul {
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
    }

    .namefield {
        grid-template-columns: 1fr;
        gap: 0;
    }

    .contact-container>.container {
        margin-bottom: 20px;
    }
}

.location-section {
    padding: 80px 0 40px 0;
}

.location-section .wrapper {
    display: flex;
    flex-direction: column;
    gap: 50px;
}

.iframe {
    max-width: 900px;
    width: 90%;
    margin: 0 auto;

    padding: 20px;

    background-color: var(--surface);
    border: 1px solid var(--nav-light);
    border-radius: 12px;
}

iframe {
    display: block;

    width: 100%;
    max-width: 900px;

    height: 300px;

    border: 1px solid var(--nav-light);
    border-radius: 8px;

    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
}

@media (max-width: 750px) {
    .location-section {
        padding: 0 5px 40px;
    }

    .iframe {
        padding: 10px;
    }

    iframe {
        max-width: none;
        height: 350px;
    }
}


/* Product page ------------------------------------------------*/

.product-section {
    padding: 30px 0 70px 0;
}


.product-section .container {
    display: flex;
    margin: 10px 5px;
    background: var(--secondary);

    border-radius: 16px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, .25);
    overflow: hidden;
    text-decoration: none;
    transition: 0.4s ease;

}

.product-section .container:hover {
    background: var(--secondary-hover);
    transition: 0.4s ease;
    transform: translateY(-4px);
    box-shadow: 0 15px 35px rgba(0, 0, 0, .35);

}

.product-section .container:hover img {
    transform: scale(1.03);
}

.product-section button {
    cursor: pointer;
    padding: 5px 10px;
    border-radius: 5px;
    font-weight: 600;
    transition: .4s;
    height: 40px;
    font-size: 17px;
    border: none;
}

.product-section button:nth-child(1) {
    margin: 0 20px 0 0;
}

.product-section img {
    width: 270px;
    height: 300px;
    object-fit: cover;
    transition: .4s ease;

}

.product-price {
    font-size: 1.3rem;
    font-weight: 700;
}


.product-section h2 {
    margin-bottom: 20px;
}

@media(max-width: 500px) {
    .product-section button {
        padding: 5px 10px;
        height: 30px;
        font-size: 14px;
    }
}

.product-section .container-text {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 15px;
    font-size: 15px;

    margin: 0 5px;
    padding: 5px;

    border: 2px solid rgba(255, 255, 255, .15);
    border-radius: 12px;

    background: rgba(255, 255, 255, .03);
}

.product-section p {
    color: var(--nav)
}

.product-section h3 {
    font-size: 21px;
}

.kamado-tab,
.accessories-tab {
    margin: 30px 0;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.kamado-tab {
    display: grid;
}

.accessories-tab {
    display: none;
}

.product-section h2 {
    width: fit-content;
    grid-column: 1 / -1;
}



@media (max-width: 768px) {
    .product-section .container {
        flex-direction: column;
        align-items: center;
        text-align: center;
        margin: 0 10px;
    }

    .product-section .container img {
        width: 100%;
        height: 250px;
    }

    .product-section .container-text {
        margin: 20px 0;
    }
}


@media (max-width: 500px) {

    .kamado-tab,
    .accessories-tab {
        grid-template-columns: 1fr;
    }
}

/* PRODUCT DETAIL PAGE --------------------------------------------*/

.product-detail {
    padding: 40px 0 100px 0;
}

.product-detail .wrapper {
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.product-detail .container {
    display: flex;
    flex-direction: row;

    background: var(--secondary);
    color: var(--nav);

    margin: 0 5px;

}

.product-detail .slideshow-container {
    display: flex;
    flex-direction: column;
    position: sticky;
    top: 120px;
    align-self: flex-start;

}


.image-container {
    position: relative;
    width: 350px;
    height: 350px;
}

.slideshow-image {
    position: absolute;
    width: 100%;
    height: 100%;

    object-fit: cover;
    pointer-events: none;

    opacity: 0;
    transition: opacity .3s ease;
    cursor: pointer;
    border-radius: 8px 0 0 8px;
}

.slideshow-image.active {
    opacity: 1;
    pointer-events: auto;
}

.product-detail .button-container {
    position: absolute;
    inset: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;



    pointer-events: none;
}

#previous-button,
#next-button,
#modal-previous-button,
#modal-next-button {
    width: 35px;
    height: 35px;

    border: none;
    border-radius: 50%;

    font-size: 24px;

    background-color: var(--accent);

    transition: 0.4s ease;
    pointer-events: auto;
}

#previous-button:hover,
#next-button:hover {
    background-color: var(--accent-hover);
}

.product-detail .container-text {
    flex: 1;

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

    padding: 25px;

    border-left: 2px solid var(--nav-light);
}

.product-detail .container-text p {
    line-height: 1.7;
    color: var(--nav)
}

.product-detail h3 {
    align-self: flex-start;

    padding: 8px 14px;

    background-color: rgba(163, 82, 57, .85);

    color: white;

    border-radius: 4px;

    font-size: 1.6rem;
    font-weight: 700;
}

.specification-preview ul {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;

    list-style: none;
    padding: 0;
    margin: 0;
}


.product-detail #specification-button {
    display: inline-block;

    align-self: flex-start;

    padding: 10px 18px;

    border: none;
    border-radius: 6px;

    background-color: var(--accent);

    color: white;
    text-decoration: none;

    cursor: pointer;

    transition: .3s ease;
    font-size: 13px;
}

.product-detail #specification-button:hover {
    background-color: var(--accent-hover);
}

.container-specification {
    color: var(--nav);
    max-height: 0;
    opacity: 0;

    overflow: hidden;

    transition:
        max-height .3s ease,
        opacity .3s ease;
}

.container-specification.open {
    max-height: 700px;
    opacity: 1;
}

.container-specification ul {
    line-height: 1.6;
    margin-top: 10px;
}

.container-specification li,
.container-specification strong {
    color: var(--nav);

}

.product-contact {
    padding-top: 10px;

    border-top: 2px solid var(--nav-light);

    display: flex;
    flex-direction: column;
    gap: 15px;
}

.product-contact .nav-link2 {
    align-self: flex-end;
}


@media (max-width: 900px) {

    .product-detail .container {
        flex-direction: column;
    }

    .product-detail .slideshow-container {
        position: relative;
        top: 0;
        align-self: center;
        width: 100%;
        max-width: 350px;
    }

    .image-container {
        width: 100%;
        height: 350px;
        position: relative;
    }

    .product-detail .container-text {
        border-left: none;
        border-top: 2px solid rgba(255, 255, 255, .08);
    }

}

/* Product detail page Modal--------------------------------------------------------*/

.modal {
    position: fixed;
    inset: 0;

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

    padding: 20px;
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    background: rgba(0, 0, 0, 0.9);
    z-index: 9999;
}

.modal-content {
    width: 95%;
    max-width: 700px;

    display: flex;
    flex-direction: column;
    align-items: center;
}

#modal-image {
    width: 100%;
    max-height: 80vh;
    object-fit: contain;
    border-radius: 4px;
}

.modal-content .button-container {
    display: flex;
    justify-content: space-evenly;
    align-items: center;

    width: 100%;

    padding: 8px 0;

}

.close {
    position: absolute;
    top: 20px;
    right: 30px;

    color: white;
    font-size: 40px;
    cursor: pointer;
}

@media (max-width: 768px) {

    .modal {
        padding: 15px;
    }

    .modal-content {
        width: 100%;
    }

    #modal-image {
        max-height: 70vh;
    }

    .close {
        top: 10px;
        right: 15px;
        font-size: 32px;
    }

}


/* masterclasses page ------------------------------------------------*/

.masterclasses-section {
    padding: 40px 0 70px 0;
}

.masterclasses-section .wrapper {
    display: flex;
    flex-direction: column;
}

.masterclasses-container {
    background-color: var(--nav-transparent);
    box-shadow: 0 4px 20px rgba(0, 0, 0, .1);
    position: relative;
    width: 100%;
    height: 100%;
    margin-top: 30px;
}

.masterclass-slideshow {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;

    opacity: 0;
    visibility: hidden;
    pointer-events: none;

    padding: 15px 10px;

    transition: opacity .3s ease,
        visibility .3s ease;
}

.masterclass-slideshow.active {
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
}

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

}

.masterclass-content .container {
    display: flex;
    flex-direction: row;
}

.masterclass-content p {
    line-height: 1.5;
    margin: 0 5px;
}

.masterclass-content ul {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
    list-style: none;
    margin: 0 5px;
}

.masterclass-content li {
    font-size: 15px;
    font-weight: 600;
    padding: 7px;

}

.masterclass-text {
    display: flex;
    flex-direction: column;

    gap: 15px;
}

.masterclass-content img {
    width: 100%;
    max-width: 400px;
    height: 300px;
    display: block;
    border-radius: 8px;
    object-fit: cover;
}

.masterclasses-section .button-container {
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    padding: 3px 0;
    position: relative;
    top: -25px;
}

#previous-masterclass,
#next-masterclass {
    color: var(-text);
    height: 40px;
    width: 40px;
    font-size: 35px;
    border-radius: 50%;
    background-color: var(--accent-dark);
    transition: 0.4s ease;
    border: none;
}

#previous-masterclass:hover,
#next-masterclass:hover {
    background-color: var(--accent-dark-hover);
}

.masterclass-button {
    display: inline-block;
    align-self: flex-start;

    padding: 10px 20px;
    margin: 30px 5px 0 5px;

    background-color: var(--accent);
    color: white;

    border-radius: 6px;
    text-decoration: none;
    font-size: 15px;

    font-weight: 600;
    text-transform: uppercase;
    transition: background-color 0.4s ease,
        color 0.4s ease;
}

.masterclass-button:hover {
    background-color: var(--accent-hover);
    color: var(--text);

}

@media (max-width: 768px) {


    .masterclasses-section {
        margin: 0 5px;
    }

    .masterclasses-section h2 {
        font-size: 1.9rem;
    }

    .masterclass-content .container {
        flex-direction: column;
        gap: 15px;
    }

    .masterclass-content img {
        width: 100%;
        max-width: 100%;
        height: 200px;
    }

    .masterclass-content ul {
        gap: 10px;
    }

    .masterclass-content li {
        font-size: 14px;
        padding: 6px;
    }

    .masterclass-button {
        width: 100%;
        text-align: center;
        align-self: stretch;
        margin: 30px 5px 0 5px;
    }

    .masterclass-content {
        gap: 15px;
    }

    .masterclass-content h3 {
        font-size: 1.6rem;
    }
}

.registration-form {
    display: none;
}

.registration-form.active {
    display: flex;
    flex-direction: column;

    background-color: var(--nav-transparent);
    padding: 20px;
    margin: 0 0 100px 0;

    box-shadow: 0 4px 20px rgba(0, 0, 0, .1);
}

.registration-form h2 {
    display: inline-block;
    align-self: flex-start;
    margin-bottom: 30px;
}

.registration-form form {
    color: var(--text);
}

.registration-content {
    display: flex;
    gap: 30px;
}

.registration-left,
.registration-right {
    flex: 1;

    display: flex;
    flex-direction: column;
}

.registration-form label {
    margin-bottom: 5px;
    font-weight: 600;
}

.registration-form input,
.registration-form select,
.registration-form textarea {
    color: var(--nav-transparent);
    width: 100%;

    padding: 12px;
    margin-bottom: 15px;

    background-color: var(--secondary);

    border: 1px solid var(--secondary-hover);
    border-radius: 5px;

    box-sizing: border-box;
}

.registration-form input[type="date"] {
    min-width: 0;
    width: 100%;
    max-width: 100%;
}

.registration-form input::placeholder,
.registration-form textarea::placeholder {
    color: var(--nav-transparent);
    opacity: 1;
}

.registration-form input:focus,
.registration-form select:focus,
.registration-form textarea:focus {
    background-color: var(--secondary-hover);
}

.registration-form textarea {
    resize: vertical;
}

.registration-form input[type="submit"] {
    background-color: var(--accent);
    color: var(--text);
    border: none;

    cursor: pointer;
    font-size: 20px;

    transition: .3s ease;
}

.registration-form input[type="submit"]:hover {
    background-color: var(--accent-hover);
}

@media (max-width: 425px) {

    .registration-section {
        margin: 0 5px;
    }

    .registration-form.active {
        padding: 10px;
    }

    .registration-form input,
    .registration-form select,
    .registration-form textarea {
        padding: 10px;
    }

    .registration-form input[type="submit"] {
        font-size: 18px;
    }

    .registration-left,
    .registration-right {
        width: 100%;
        min-width: 0;
    }

    .registration-form input[type="date"] {
        width: 100%;
        min-width: 0;
        max-width: 100%;
        font-size: 16px;
    }

    .registration-content {
        flex-direction: column;
        gap: 20px;
    }

    .registration-section h2 {
        font-size: 1.4rem;
    }

}