* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

.body {
    justify-content: center;
    align-items: flex-start;
    height: 100vh;
    overflow-x: hidden;
    background: linear-gradient(90deg, rgba(247,218,205,1) 0%, rgba(188,221,242,1) 100%);
    background-size: 100vw 100vh;
    background-attachment: scroll;
}

@font-face {
  font-family: 'Taurus Mono Outline Bold';
  src: url('../fonts/Taurus-Mono-Outline-Bold.woff2') format('woff2'),
       url('../fonts/Taurus-Mono-Outline-Bold.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'Taurus Mono Outline Regular';
  src: url('../fonts/Taurus-Mono-Outline-Regular.woff2') format('woff2'),
       url('../fonts/Taurus-Mono-Outline-Regular.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'Lorem Ipsum';
  src: url('../fonts/LoremIpsum.woff2') format('woff2'),
       url('../fonts/LoremIpsum.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

.landing-body {
    justify-content: center;
    align-items: flex-start;
    height: 100vh;
    overflow-x: hidden;
    background: #f5efec;
}

.configurator-wrapper {
    width: 100%;
    display: flex;
    flex-direction: row;
    background: rgb(247,218,205);
    background: -moz-linear-gradient(90deg, rgba(247,218,205,1) 0%, rgba(188,221,242,1) 100%);
    background: -webkit-linear-gradient(90deg, rgba(247,218,205,1) 0%, rgba(188,221,242,1) 100%);
    background: linear-gradient(90deg, rgba(247,218,205,1) 0%, rgba(188,221,242,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#f7dacd",endColorstr="#bcddf2",GradientType=1);
}

/* Text Preview Section */
.product-preview-container {
    display: flex;
    position: -webkit-sticky; /* For Safari */
    position: sticky;
    top: 10px; /* Stick to the top of the viewport */
    height: calc(100vh - 20px);
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 60%; /* Adjusted for side-by-side layout */
    margin: 20px 10px 0px 10px;
    border-radius: 28px;
    background-image: url('../images/sofa.webp');
    background-size: cover;
    background-position: center;
    z-index: 10; /* Ensure the preview stays above other elements */
}

.product-text-preview {
    width: 100%;
    height: 250px;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    transition: background-color 0.3s ease;
    white-space: pre-wrap;
    word-wrap: break-word;
}

.product-text-preview-mobile-offset {
    transform: translateY(-60px);
}

#preview-text {
    font-family: "Oooh Baby", cursive;
    font-weight: 400;
    font-size: 3rem;
    transition: color 0.3s ease, text-shadow 0.3s ease, font-family 0.3s ease;
    color: #F5EFEC; /* Set the default color to white */
}

/* Configurator Container */
.configurator-container {
    background-color: #ffffff;
    padding: 10px 15px 15px 15px;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
    border-radius: 28px;
    width: 40%; /* Adjusted for side-by-side layout */
    margin: 20px 10px 0px 10px;
    border-top: 10px solid #fff;
    border-bottom: 10px solid #fff;
}

.toggle-group {
    position: absolute;
    top: 66px;
    left: 10px;
    height: 56px;
    width: 172px;
    color: #04283F;
    background-color: white;
    padding: 0px 20px; /* Adjust padding for balanced spacing */
    border-radius: 999px;
    font-family: 'Poppins', sans-serif; /* Apply Poppins font */
    font-weight: 500; /* Use Poppins Medium */
    font-size: 14px; /* Set font size */
    display: flex;
    align-items: center; /* Center vertically with the toggle switch */
    justify-content: left;
    z-index: 100000;
}

.total-group {
    position: absolute;
    top: 66px;
    right: 10px;
    height: 56px;
    width: 175px;
    color: #04283F;
    font-family: 'Poppins', sans-serif; /* Apply Poppins font */
    font-weight: 500; /* Use Poppins Medium */
    font-size: 14px; /* Set font size */
    background-color: white;
    padding: 0px 20px; /* Adjust padding for balanced spacing */
    border-radius: 999px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

h1 {
    font-family: 'Poppins', sans-serif; /* Apply Poppins font */
    font-weight: 500; /* Use Poppins Medium */
    font-size: 28px; /* Set font size */
    text-align: center;
}

h2 {
    font-family: 'Poppins', sans-serif; /* Apply Poppins font */
    font-weight: 500; /* Use Poppins Medium */
    font-size: 24px; /* Set font size */
    text-align: center;
}

h3 {
    font-family: 'Poppins', sans-serif; /* Apply Poppins font */
    font-weight: 700; /* Use Poppins Medium */
    font-size: 18px; /* Set font size */
}

.h1-header {
    color: #04283F;
    padding-bottom: 20px;
    padding-top: 106px;
    padding-left: 10px;
    padding-right: 10px;
}

.h1-header-product {
    color: #04283F;
    padding-bottom: 20px;
    padding-top: 86px;
    padding-left: 10px;
    padding-right: 10px;
}

.h1-header-landing {
    color: #04283F;
    padding-bottom: 0px;
    padding-top: 0px;
    padding-left: 10px;
    padding-right: 10px;
}

.product-header-back {
    color: #fff;
    font-family: 'Poppins', sans-serif;
    font-weight: 400;
    font-size: 16px;
    margin-left: 0px;
    margin-right: auto;
    padding-bottom: 20px;
    padding-top: 106px;
    padding-left: 10px;
    padding-right: 10px;
}

.product-header-back-text {
    color: #04283F;
    font-family: 'Poppins', sans-serif;
    font-weight: 400;
    font-size: 16px;
    text-decoration: none;
}

.product-header-back-text:hover {
    text-decoration: underline;
}

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

.config-options {
    flex: 1;
    padding-bottom: 15px;
}

.option-group {
    margin-bottom: 15px;
}

input[type="file"],
input[type="text"],
input[type="email"],
input[type="tel"], textarea, select {
    width: calc(100% - 10px); /* Adjust width to account for margins */
    margin: 10px 5px; /* Add 5px margin on left and right */
    padding: 10px;
    font-size: 1rem;
    font-family: 'Poppins', sans-serif; /* Apply Poppins font */
    font-weight: 400;
    color: #04283F;
    border-radius: 15px;
    border: 1px solid #04283F;
    background-color: #EDEDED;
    resize: none;
}

input[type="file"]:focus,
input[type="text"]:focus,
input[type="email"]:focus,
input[type="tel"]:focus,
textarea:focus,
select:focus {
    border: 1px solid #04283F;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
    outline: none; /* Remove default outline */
}

.shipping-method-label {
    display: block;
    width: calc(100% - 10px); /* Adjust width to account for margins */
    margin: 10px 5px; /* Add 5px margin on left and right */
    padding: 10px;
    font-size: 1rem;
    font-family: 'Poppins', sans-serif; /* Apply Poppins font */
    font-weight: 400;
    color: #04283F;
    border-radius: 15px;
    border: 1px solid #04283F;
    background-color: #EDEDED;
    resize: none;
}

#foxpost {
    display: block;
    width: calc(100% - 10px); /* Adjust width to account for margins */
    margin: 10px 5px; /* Add 5px margin on left and right */
    padding: 10px;
    font-size: 1rem;
    font-family: 'Poppins', sans-serif; /* Apply Poppins font */
    font-weight: 400;
    color: #04283F;
    border-radius: 15px;
    border: 1px solid #04283F;
    background-color: #fff;
    resize: none;
}

.font-selector {
    display: flex;
    flex-wrap: wrap;
    margin-top: 10px;
    gap: 0px;
    justify-content: space-between;
}

.font-option {
    width: calc(33.33% - 10px); /* Each button occupies roughly one-third of the row */
    margin: 5px;
    padding: 18px;
    background-color: transparent;
    border: 1px solid #04283F;
    border-radius: 15px;
    cursor: pointer;
    font-size: 16px;
    color: #04283F;
    transition: background-color 0.3s, border 0.3s;
    text-align: center;
    box-sizing: border-box; /* Ensure consistent padding and border */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    flex: 1 1 22%; /* 100 / 6 = 16.66% for 6 per row max */
}

@media (max-width: 1640px) {
    .font-option {
        flex: 1 1 30%;
    }
}

@media (min-width: 769px) and (max-width: 1055px) {
    .font-option {
        flex: 1 1 34%;
    }
}

@media (max-width: 424px) {
    .font-option {
        flex: 1 1 40%;
    }
}

@media (max-width: 300px) {
    .font-option {
        flex: 1 1 100%;
    }
}

.font-option:hover {
    background-color: #04283F;
    color: white;
}

.font-option.selected {
    background-color: #04283F;
    color: white;
}


/* General Styling for Color Selector */
.color-selector {
    display: flex;
    flex-wrap: wrap;
    margin-top: 10px;
    gap: 0px; /* Space between colors */
}

.color-option {
    display: flex;
    flex-direction: column;
    align-items: center;
    cursor: pointer;
    margin: 5px;
    flex: 1 1 7%; /* 100 / 6 = 16.66% for 6 per row max */
}

@media (max-width: 2560px) {
    .color-option {
        flex: 1 1 15%;
    }
}

@media (max-width: 1920px) {
    .color-option {
        flex: 1 1 23%;
    }
}

@media (max-width: 1366px) {
    .color-option {
        flex: 1 1 30%;
    }
}

.color-circle {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    border: 2px solid transparent;
    transition: border 0.3s ease;
}

.color-option:hover .color-circle {
    border: 2px solid #04283F;
    outline: 3px solid white; /* Inner border */
    outline-offset: -5px; /* Moves the inner border inside */
}

.color-option.selected .color-circle {
    border: 2px solid #04283F;
    outline: 3px solid white; /* Inner border */
    outline-offset: -5px; /* Moves the inner border inside */
}

.color-option span {
    color: #04283F;
    margin-top: 5px;
    font-size: 0.75rem;
    text-align: center;
    word-wrap: break-word;
}

.custom-item-summary {
    position: relative;
    margin-left: 5px;
    margin-right: 5px;
    padding-top: 25px;
    padding-bottom: 10px;
    font-family: 'Open Sans', sans-serif;
    border-top: 2px solid #d4d4d4;
    border-radius: 0px;
    color: #04283F;
}

.product-summary {
    margin: none;
    padding-top: 25px;
    font-family: 'Open Sans', sans-serif;
    border-top: 2px solid #d4d4d4;
    border-radius: 0px;
    color: #04283F;
}

#order-btn {
    color: #fff;
    cursor: pointer;
    border: none;
    background: linear-gradient(270deg,rgba(18, 67, 98, 1) 0%, rgba(4, 40, 63, 1) 100%);
    height: 56px;
    display: flex; /* Ensure the navbar items are aligned horizontally */
    justify-content: space-between; /* Space out the navbar content */
    align-items: center; /* Vertically center the items */
    position: relative;
    font-family: 'Poppins', sans-serif;
    font-size: 16px;
    text-decoration: none;
    padding: 0px 70px;
    margin: 15px auto 0px auto; /* Center the navbar on the page */
    border-radius: 99px; /* Smoothen corners */
    transition: top 0.3s ease-in-out; /* Smooth transition when hiding/showing */
}

#order-btn::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 99px;
    transition: background 0.3s ease-in-out;
    z-index: 1; /* Position below text */
}

#order-btn:hover::before {
    background-color: #124362;
}

#order-btn .order-btn-label {
    position: relative;
    z-index: 2; /* Keep text above overlay */
}

.order-btn-cart-icon {
    position: relative;
    z-index: 2;
    height: 50%;
    filter: invert(1);
    padding-right: 8px;
    transform: translate(0px, -1px);
}

/* Toggle Switch */
.switch {
    position: relative;
    display: inline-block;
    width: 60px;
    height: 34px;
}

.switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    transition: 0.4s;
    border-radius: 34px;
}

.slider:before {
    position: absolute;
    content: "";
    height: 26px;
    width: 26px;
    left: 4px;
    bottom: 4px;
    background-color: white;
    transition: 0.4s;
    border-radius: 50%;
}

.second-section {
    width: 100%;
    display: flex;
    background-color: white;
}

input:checked + .slider {
    background-color: #04283F;
}

input:checked + .slider:before {
    transform: translateX(26px);
}

span.step-number {
    display: inline-flex; /* Use flex to center content */
    justify-content: center; /* Center horizontally */
    align-items: center; /* Center vertically */
    width: 35px; /* Set fixed width */
    height: 35px; /* Set fixed height to match width */
    background-color: #04283F; /* Background color of the circle */
    color: white; /* Text color */
    border-radius: 50%; /* Make it a circle */
    font-size: 16px; /* Adjust font size as needed */
    margin: 0px 10px 0px 5px; /* Space between the step number and label */
    border: 1px solid transparent; /* Optional: border around the circle */
    text-align: center; /* Center text */
}

span.step-number-white {
    display: inline-flex; /* Use flex to center content */
    justify-content: center; /* Center horizontally */
    align-items: center; /* Center vertically */
    width: 35px; /* Set fixed width */
    height: 35px; /* Set fixed height to match width */
    background-color: white; /* Background color of the circle */
    color: #04283F; /* Text color */
    border-radius: 50%; /* Make it a circle */
    font-size: 16px; /* Adjust font size as needed */
    margin: 0px 10px 0px 0px; /* Space between the step number and label */
    border: 1px solid transparent; /* Optional: border around the circle */
    text-align: center; /* Center text */
}

/* Style the button that is used to open and close the collapsible content */
.collapsible {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: transparent;
    border: 1px solid #04283F;
    border-radius: 15px;
    cursor: pointer;
    font-family: 'Poppins', sans-serif;
    font-weight: 400;
    font-size: 14px;
    color: #04283F;
    height: 70px;
    margin: 10px 5px;
    padding: 18px;
    width: calc(100% - 10px);
    text-align: left;
    outline: none;
    transition: background-color 0.3s, border 0.3s;
}

/* Default arrow state */
.collapsible:after {
    content: ''; /* No text content */
    display: inline-block;
    width: 20px;
    height: 20px;
    background-image: url('../images/collapsible-arrow.png'); /* Default arrow image */
    background-size: cover;
    transform: rotate(90deg); /* Default position */
    transition: transform 0.3s ease, background-image 0.3s ease;
}

/* Hover state: changes the arrow to white */
.collapsible:hover, .collapsible.font-selected {
    background-color: #04283F;
    color: white;
}

.collapsible:hover:after, .collapsible.font-selected:after {
    filter: invert(1) brightness(10); /* Invert and increase brightness by 1000% */
}

/* Active (expanded) state */
.collapsible.active {
    background-color: transparent;
    color: #04283F;
}

.collapsible.active:after {
    content: ''; /* No text content */
    background-image: url('../images/collapsible-arrow.png'); /* Gray arrow when active but not hovered */
    transform: rotate(270deg); /* Rotate the arrow when expanded */
}

/* Active and hovered state: changes arrow to white */
.collapsible.active:hover, .collapsible.active.font-selected {
    background-color: #04283F;
    color: white;
}

.collapsible.active:hover:after, .collapsible.active.font-selected:after {
    filter: invert(1) brightness(10); /* Invert and increase brightness by 1000% */
}


/* Collapsible content: hidden by default */
.content {
    width: calc(100% - 0px);
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.2s ease-out;
}

/* Poppins Font Start */
.poppins-thin {
    font-family: "Poppins", system-ui;
    font-weight: 100;
    font-style: normal;
}

.poppins-extralight {
    font-family: "Poppins", system-ui;
    font-weight: 200;
    font-style: normal;
}

.poppins-light {
    font-family: "Poppins", system-ui;
    font-weight: 300;
    font-style: normal;
}

.poppins-regular {
    font-family: "Poppins", system-ui;
    font-weight: 400;
    font-style: normal;
}

.poppins-medium {
    font-family: "Poppins", system-ui;
    font-weight: 500;
    font-style: normal;
}

.poppins-semibold {
    font-family: "Poppins", system-ui;
    font-weight: 600;
    font-style: normal;
}

.poppins-bold {
    font-family: "Poppins", system-ui;
    font-weight: 700;
    font-style: normal;
}

.poppins-extrabold {
    font-family: "Poppins", system-ui;
    font-weight: 800;
    font-style: normal;
}

.poppins-black {
    font-family: "Poppins", system-ui;
    font-weight: 900;
    font-style: normal;
}

.poppins-thin-italic {
    font-family: "Poppins", system-ui;
    font-weight: 100;
    font-style: italic;
}

.poppins-extralight-italic {
    font-family: "Poppins", system-ui;
    font-weight: 200;
    font-style: italic;
}

.poppins-light-italic {
    font-family: "Poppins", system-ui;
    font-weight: 300;
    font-style: italic;
}

.poppins-regular-italic {
    font-family: "Poppins", system-ui;
    font-weight: 400;
    font-style: italic;
}

.poppins-medium-italic {
    font-family: "Poppins", system-ui;
    font-weight: 500;
    font-style: italic;
}

.poppins-semibold-italic {
    font-family: "Poppins", system-ui;
    font-weight: 600;
    font-style: italic;
}

.poppins-bold-italic {
    font-family: "Poppins", system-ui;
    font-weight: 700;
    font-style: italic;
}

.poppins-extrabold-italic {
    font-family: "Poppins", system-ui;
    font-weight: 800;
    font-style: italic;
}

.poppins-black-italic {
    font-family: "Poppins", system-ui;
    font-weight: 900;
    font-style: italic;
}

/* Responsive Layout for Smaller Screens */
@media (max-width: 768px) {
    #order-btn {
        background-position: center;
    }
    
    .configurator-wrapper {
        flex-direction: column;
    }

    .product-preview-container {
        position: -webkit-sticky; /* For Safari */
        position: sticky;
        top: 0;
        height: 40vh; /* Make sticky height 50% of the viewport */
        width: calc(100% - 20px);
    }

    .configurator-container {
        width: calc(100% - 20px);
        padding-bottom: 20px; /* Prevent overlap with sticky preview */
    }

    /* Adjust the width of the preview text */
    .product-text-preview {
        width: 90%; /* Set width to 90% of the screen size */
    }
    
    .product-text-preview-mobile-offset {
        transform: translateY(-20px);
    }
    #preview-text {
        font-size: 2rem;
    }
}

/* Layout for Desktop Screens */
@media (min-width: 769px) {
    .configurator-wrapper {
        flex-direction: row; /* Align sections side-by-side on larger screens */
    }

    .product-preview-container {
        width: 60%; /* Adjusted preview width to 60% */
    }
    
    .configurator-container {
        width: 40%; /* Decreased configurator width to 40% */
    }
}

.outer-color-buttons {
    display: flex;
    gap: 0px;
    margin-top: 10px;
}

.outer-color-btn {
    flex: 1 1 50%; /* Set each button to occupy 50% of the available space */
    margin: 5px;
    padding: 18px; /* Match the padding of the collapsible button */
    background-color: transparent;
    border: 1px solid #04283F;
    border-radius: 15px;
    cursor: pointer;
    font-family: 'Poppins', sans-serif; /* Apply Poppins font */
    font-weight: 400;
    font-size: 14px;
    color: #04283F;
    transition: background-color 0.3s, border 0.3s;
    text-align: center; /* Center-align the text */
}

.outer-color-btn:hover {
    background-color: #04283F;
    color: white;
}

.outer-color-btn.selected {
    background-color: #04283F;
    color: white;
}

.backboard-style-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 0px;
    margin-top: 10px;
}

.backboard-btn {
    width: calc(50% - 10px); /* Each button takes up half the space */
    margin: 5px;
    padding: 24px 10px;
    background-color: transparent;
    border: 1px solid #04283F;
    border-radius: 15px;
    cursor: pointer;
    font-family: 'Poppins', sans-serif;
    font-weight: 400;
    font-size: 14px;
    color: #04283F;
    text-align: center;
    box-sizing: border-box; /* Ensure consistent padding and border */
    transition: background-color 0.3s, border 0.3s;
    display: flex;
    flex-direction: column; /* Stack text and image vertically */
    align-items: center;
}

.backboard-btn img {
    width: 120px; /* Control the size of the image */
    height: auto;
    margin-top: 10px;
    margin-bottom: 10px;
}

/* Hover and selected state for backboard buttons */
.backboard-btn:hover img,
.backboard-btn.selected img {
    filter: invert(1); /* Invert the colors */
}

.backboard-btn:hover,
.backboard-btn.selected {
    background-color: #04283F;
    color: white;
}

.size-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 0px;
    margin-top: 10px;
}

.size-btn {
    width: calc(50% - 10px); /* Force each button to be exactly 50% width */
    margin: 5px;
    padding: 24px 18px;
    background-color: transparent;
    border: 1px solid #04283F;
    border-radius: 15px;
    cursor: pointer;
    font-family: 'Poppins', sans-serif; /* Apply Poppins font */
    font-weight: 400;
    font-size: 14px;
    color: #04283F;
    transition: background-color 0.3s, border 0.3s;
    text-align: center;
    box-sizing: border-box; /* Ensure consistent padding and border */
}

.size-btn:hover {
    background-color: #04283F;
    color: white;
}

.size-btn.selected {
    background-color: #04283F;
    color: white;
}

/* Customize circular checkboxes */
.checkbox-group label {
    display: flex;
    align-items: center;
    cursor: pointer;
    margin-left: 1px;
    color: #04283F;
    font-family: 'Poppins', sans-serif; /* Apply Poppins font */
    font-weight: 400; /* Use Poppins Regular */
    font-size: 14px; /* Adjust font size as needed */
}


.checkbox-group input[type="checkbox"] {
    appearance: none; /* Remove default checkbox */
    width: 24px; /* Match the collapsible button circle */
    height: 24px; /* Match the collapsible button circle */
    border: 1px solid #04283F; /* Same border color as collapsible circle */
    border-radius: 50%; /* Make it circular */
    outline: none;
    margin: 0px 10px 0px 5px;
    cursor: pointer;
    position: relative;
    background-color: transparent; /* Default background */
}

/* Checkbox checked state */
.checkbox-group input[type="checkbox"]:checked {
    background-color: #04283F; /* Same background color as the collapsible button circle */
}

/* Add a tick inside the circle when checked */
.checkbox-group input[type="checkbox"]:checked::after {
    content: '✓'; /* Unicode tick symbol */
    position: absolute;
    color: white; /* Tick color */
    font-size: 16px; /* Size of the tick */
    font-family: 'Poppins', sans-serif; /* Set static font to Poppins */
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); /* Center the tick */
}

/* From Uiverse.io by adamgiebl */
.uiverse1-button {
  position: relative;
  display: inline-block;
  margin: 15px;
  padding: 15px 30px;
  text-align: center;
  font-size: 18px;
  letter-spacing: 1px;
  text-decoration: none;
  color: #725AC1;
  background: transparent;
  cursor: pointer;
  transition: ease-out 0.5s;
  border: 2px solid #725AC1;
  border-radius: 10px;
  box-shadow: inset 0 0 0 0 #725AC1;
}

.uiverse1-button:hover {
  color: white;
  box-shadow: inset 0 -100px 0 0 #725AC1;
}

.uiverse1-button:active {
  transform: scale(0.9);
}

/* Navigation Bar Styling */
.navbar {
    height: 56px;
    display: flex; /* Ensure the navbar items are aligned horizontally */
    justify-content: space-between; /* Space out the navbar content */
    align-items: center; /* Vertically center the items */
    position: fixed;
    top: 10px; /* Adjusted top spacing */
    left: 0;
    right: 0;
    width: calc(100% - 40px); /* Ensure the navbar fits within the screen */
    max-width: 1265px; /* Prevent the navbar from stretching too wide */
    z-index: 10000;
    font-family: 'Poppins', sans-serif;
    padding: 10px 20px;
    margin: 0 auto; /* Center the navbar on the page */
    border-radius: 50px; /* Smoothen corners */
    backdrop-filter: blur(10px); /* Optional blur effect */
    -webkit-backdrop-filter: blur(10px); /* Safari support */
    box-shadow: 0px 0px 40px rgba(0, 0, 0, 0.4); /* Shadow for depth */
    transition: top 0.3s ease-in-out; /* Smooth transition when hiding/showing */

    /* The gradient background fix */
    background: linear-gradient(90deg, rgba(247,218,205,1) 0%, rgba(188,221,242,1) 100%);
    background-size: 100vw 56px; /* Full viewport width, limited to navbar height */
    background-position: center;
    background-repeat: no-repeat; /* Prevent repetition */
    background-attachment: scroll; /* Allow the gradient to scroll with the page */
}

.navbar-b2b {
    height: 56px;
    display: flex; /* Ensure the navbar items are aligned horizontally */
    justify-content: space-between; /* Space out the navbar content */
    align-items: center; /* Vertically center the items */
    position: fixed;
    top: 10px; /* Adjusted top spacing */
    left: 0;
    right: 0;
    width: calc(100% - 40px); /* Ensure the navbar fits within the screen */
    max-width: 520px; /* Prevent the navbar from stretching too wide */
    z-index: 10000;
    font-family: 'Poppins', sans-serif;
    padding: 10px 20px;
    margin: 0 auto; /* Center the navbar on the page */
    border-radius: 50px; /* Smoothen corners */
    backdrop-filter: blur(10px); /* Optional blur effect */
    -webkit-backdrop-filter: blur(10px); /* Safari support */
    box-shadow: 0px 0px 40px rgba(0, 0, 0, 0.4); /* Shadow for depth */
    transition: top 0.3s ease-in-out; /* Smooth transition when hiding/showing */

    /* The gradient background fix */
    background: linear-gradient(90deg, rgba(247,218,205,1) 0%, rgba(188,221,242,1) 100%);
    background-size: 100vw 56px; /* Full viewport width, limited to navbar height */
    background-position: center;
    background-repeat: no-repeat; /* Prevent repetition */
    background-attachment: scroll; /* Allow the gradient to scroll with the page */
}


.nav-logo {
    flex-shrink: 0; /* Prevent logo from shrinking */
}

.nav-logo a {
    padding-top: 7px;
    color: #fff;
    font-size: 1.5rem;
    text-decoration: none;
    font-weight: bold;
    display: inline-block;
}

.nav-logo-img {
    height: 16px; /* Adjust as needed */
    width: auto; /* Keeps aspect ratio */
    /*filter: invert(1); /* Fully inverts the colors */
}

.nav-links {
    list-style: none;
    display: flex;
    gap: 12px; /* Reduced gap between menu items */
    flex: 1;
    justify-content: flex-end;
    white-space: nowrap; /* Prevent wrapping */
}

.nav-links li a {
    color: #04283F;
    text-decoration: none;
    font-size: 1rem; /* Slightly smaller font size for more space */
    transition: color 0.3s;
    padding: 5px 10px; /* Reduced padding for a more compact look */
    border-radius: 10px;
}

.nav-links li a:hover {
    color: #04283F;
    text-decoration: underline;
}

/* Cart Button Styling */
.cart-btn {
    position: relative;
    background-color: white;
    color: #04283F;
    padding: 8px 16px; /* Adjusted padding */
    margin-left: 16px;
    border: none;
    border-radius: 50px;
    font-size: 1rem;
    text-decoration: none;
    white-space: nowrap; /* Prevent wrapping */
    flex-shrink: 0; /* Ensure it doesn’t shrink */
    transition: background-color 0.3s, color 0.3s;
}

.cart-btn:hover {
    background-color: #f3f3f3;
    color: #04283F;
}

/* Hamburger Menu */
.hamburger {
    display: none;
    flex-direction: column;
    margin-left: 10px;
    gap: 6px;
    cursor: pointer;
}

.hamburger span {
    width: 25px;
    height: 2px;
    background-color: #04283F;
    transition: all 0.3s;
}

.hamburger.active span:nth-child(1) {
    transform: rotate(45deg) translate(6.25px, 6.25px);
}

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

.hamburger.active span:nth-child(3) {
    transform: rotate(-45deg) translate(5px, -5px);
}

/* Mobile styles */
@media (max-width: 1265px) {
    .navbar {
        width: calc(100% - 40px); /* Full width minus padding */
        left: 10px;
        right: 10px;
        border-radius: 100px;
        justify-content: space-between;
    }
    
    .navbar-b2b {
        width: calc(100% - 40px); /* Full width minus padding */
        left: 10px;
        right: 10px;
        border-radius: 100px;
        justify-content: space-between;
    }

    .nav-logo {
        text-align: center;
        flex: 1;
    }

    .hamburger {
        display: flex; /* Make the hamburger menu visible on mobile */
        position: absolute;
        left: 10px;
        top: 50%;
        transform: translateY(-50%);
    }

    .cart-btn {
        position: absolute;
        right: 20px;
        top: 50%;
        transform: translateY(-50%);
    }

    .nav-links {
        display: none; /* Hide nav links initially */
        flex-direction: column;
        position: fixed;
        top: calc(100% + 20px);
        left: 0;
        border-radius: 38px;
        width: 100%;
        height: 65vh;
        background-color: #04283F;
        align-items: center;
        justify-content: center;
        text-align: center;
        z-index: 99;
        transition: top 0.3s ease-in-out;
    }

    .nav-links.active {
        display: flex; /* Show nav links when active */
        top: 65px;
    }

    .nav-links li a {
        color: white;
        font-size: 1.2rem;
        margin: 20px 0;
        text-decoration: none;
        transition: color 0.3s;
    }

    .nav-links li a:hover {
        color: white;
        text-decoration: underline;
    }
}


/* Tablet and Desktop styles */
@media (min-width: 1266px) {
    .navbar {
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 85%; /* Set the width of the navbar to 70% of the screen */
        margin: 0 auto;
    }
    
    .navbar-b2b {
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 70%; /* Set the width of the navbar to 70% of the screen */
        margin: 0 auto;
    }

    .nav-logo {
        flex-shrink: 0;
    }

    .nav-links {
        gap: 10px; /* Reduced the gap between links to bring them closer */
    }

    .cart-btn {
        flex-shrink: 0;
        white-space: nowrap; /* Prevent wrapping */
    }
}

.background-gradient {
    background: rgb(247,218,205);
    background: -moz-linear-gradient(90deg, rgba(247,218,205,1) 0%, rgba(188,221,242,1) 100%);
    background: -webkit-linear-gradient(90deg, rgba(247,218,205,1) 0%, rgba(188,221,242,1) 100%);
    background: linear-gradient(90deg, rgba(247,218,205,1) 0%, rgba(188,221,242,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#f7dacd",endColorstr="#bcddf2",GradientType=1);
}

.background-grain {
    background-image: url("https://www.transparenttextures.com/patterns/otis-redding.png");
    background-size: 50px 50px; /* Adjust size of the image */
    background-repeat: repeat; /* Makes the image repeat */
    filter: invert(1) brightness(20) grayscale(1);
}

/* Footer Styling */
.footer {
    background-color: #04283f;
    // background: rgb(167,71,224);
    // background: -moz-linear-gradient(90deg, rgba(167,71,224,1) 0%, rgba(225,60,60,1) 50%, rgba(255,173,0,1) 100%);
    // background: -webkit-linear-gradient(90deg, rgba(167,71,224,1) 0%, rgba(225,60,60,1) 50%, rgba(255,173,0,1) 100%);
    // background: linear-gradient(90deg, rgba(167,71,224,1) 0%, rgba(225,60,60,1) 50%, rgba(255,173,0,1) 100%);
    // filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#a747e0",endColorstr="#ffad00",GradientType=1);
    padding: 60px 20px 50px 20px;
    margin-top: 100px;
    text-align: center;
    color: white;
    border-top-left-radius: 28px;
    -webkit-border-top-left-radius: 28px;
    border-top-right-radius: 28px;
    -webkit-border-top-left-radius: 28px;
}

.footer-logo {
    margin-bottom: 50px;
}

.footer-logo a {
    color: #fff;
    font-size: 2rem;
    text-decoration: none;
}

.footer-logo-img {
    height: 20px; /* Adjust as needed */
    width: auto; /* Keeps aspect ratio */
    filter: invert(1); /* Fully inverts the colors */
}

.footer-handmade {
    margin-bottom: 50px;
}

.footer-handmade-img {
    height: 60px; /* Adjust as needed */
    width: auto; /* Keeps aspect ratio */
    filter: invert(1); /* Fully inverts the colors */
}


.footer-columns {
    display: flex;
    justify-content: space-around;
    gap: 20px;
    font-family: 'Poppins', sans-serif;
}

.footer-column {
    flex: 1;
}

.footer-column h2 {
    margin-bottom: 10px;
    font-size: 1.2rem;
}

.footer-column a {
    display: block;
    color: white;
    text-decoration: none;
    margin: 10px 0;
    font-size: 0.9rem;
    transition: text-decoration 0.3s ease;
}

.footer-column p {
    display: block;
    color: white;
    text-decoration: none;
    margin: 10px 0;
    font-size: 0.9rem;
    transition: text-decoration 0.3s ease;
}

.footer-column a:hover {
    text-decoration: underline;
}

/* Mobile Footer Styling */
@media (max-width: 768px) {
    .navbar {
        width: calc(100% - 20px); /* Full width minus padding */
        left: 10px;
        right: 10px;
        border-radius: 100px;
        justify-content: space-between;
    }
    
    .navbar-b2b {
        width: calc(100% - 20px); /* Full width minus padding */
        left: 10px;
        right: 10px;
        border-radius: 100px;
        justify-content: space-between;
    }
    
    .toggle-group {
        top: 10px;
    }
    
    .total-group {
        top: 10px;
    }
    
    .footer-columns {
        flex-direction: column;
        align-items: center;
    }

    .footer-column {
        margin-bottom: 20px;
    }
    .footer-column-nonfirst-header {
        margin-top: 50px;
    }
}
/*Small Mobile Styling*/
@media (max-width: 400px) {
    .mobile-toggle-total-groups {
        position: absolute;
        top: 10px;
        width: calc(100% - 20px);
        height: 56px;
        background-color: white;
        border-radius: 999px;
    }
    
    .toggle-group {
        top: 0px;
        left: 0px;
    }
    
    .total-group {
        top: 0px;
        right: 0px;
    }
}

.button-name-label {
    font-size: 1.0em; /* Adjust this size as needed */
    font-weight: bold; /* Optional: make the text bold */
}

.font-button-price-label {
    font-family: 'Poppins', sans-serif;
    font-size: 14px; /* Adjust size as needed */
    font-weight: 400;
    color: #04283F; /* Set to match existing button text color */
}

.font-option:hover .font-button-price-label,
.font-option.selected .font-button-price-label {
    color: white;
}

.order-details {
    font-family: "Poppins", system-ui;
    font-weight: 300;
    font-style: normal;
    font-size: 16px;
    justify-content: left;
}

/* Cart Page Styles */

/* Main container for each cart item */
.cart-item {
    display: flex;
    position: relative;
    align-items: flex-start;
    gap: 40px; /* Space between preview and content */
    margin-bottom: 20px; /* Space between each cart item */
    padding: 15px;
    background-color: white;
    border-radius: 28px;
    width: 100%;
    box-sizing: border-box;
}

#cart-items {
    display: flex;
    flex-direction: column; /* Stack items vertically if there are multiple */
    align-items: center; /* Horizontally center all items */
    justify-content: center; /* Vertically center items within the container */
    width: calc(100% - 20px);
    max-width: 1265px;
    margin: 0 auto;
    box-sizing: border-box;
}

/* Make preview section take 30% of the item width and center content */
.cart-item-preview {
    flex: 0 0 30%; /* Set fixed width to 30% of cart item */
    height: 170px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center; /* Center text horizontally */
    background-color: #04283F;
    border-radius: 18px;
}

/* Cart item content will take the remaining 70% */
.cart-item-content {
    flex: 1; /* Allows the content to take the remaining space */
}

.cart-item-preview-text {
    font-size: 1.5rem;
    white-space: pre-wrap; /* Preserve line breaks in preview text */
    word-wrap: break-word;
    text-align: center; /* Center text inside preview */
    transition: text-shadow 0.3s ease; /* Smooth glow transition */
}

/* Position the remove button to the top-right of each cart item */
.remove-item-btn {
    display: inline-flex; /* Use flex to center content */
    position: absolute;
    top: 15px; /* Align with the top padding of the cart item */
    right: 15px; /* Align with the right padding of the cart item */
    width: 24px; /* Set fixed width */
    height: 24px; /* Set fixed height to match width */
    background-color: white; /* Background color of the circle */
    color: #04283F; /* Text color */
    border: 1px solid transparent; /* Optional: border around the circle */
    border-radius: 50%;
    cursor: pointer;
    font-size: 16px; /* Adjust font size as needed */
    transition: background-color 0.3s, border 0.3s;
    text-align: center; /* Center text */
    justify-content: center; /* Center horizontally */
    align-items: center; /* Center vertically */
}

.remove-item-btn:hover {
    background-color: #04283F;
    color: white;
}

.cart-empty {
    font-family: 'Poppins', sans-serif; /* Apply Poppins font */
    color: #04283F;
    font-size: white;
    text-align: center;
    margin-top: 123px;
    margin-bottom: 163px;
}

/* Apply new columnar layout for cart items on screens larger than 1121px */
@media (min-width: 1121px) {
    .cart-item-columns {
        display: flex;
        gap: 20px;
    }
    .cart-column1, .cart-column2 {
        flex: 1;
    }
}

@media (max-width: 1120px) {
    .cart-item-preview {
        flex: 0 0 40%; /* Set fixed width to 40% of cart item */
        height: 245px;
    }
    .cart-item {
        gap: 40px;
    }
}

@media (max-width: 768px) {
    .cart-item {
        display: flex;
        flex-direction: column;
        gap: 20px;
    }
    .cart-item-preview, .cart-item-content {
        width: 100%;
    }
    .cart-item-preview-text {
        padding-top: 20px;
        padding-bottom: 20px;
    }
    .cart-item-columns {
        display: flex;
        gap: 20px;
    }
    .cart-column1, .cart-column2 {
        flex: 1;
    }
    
    .cart-item-preview {
        width: calc(100% - 39px);
    }
}

@media (max-width: 660px) {
    .cart-item-columns {
        display: flex;
        flex-direction: column;
        gap: 0px;
    }
}

#cart-total {
    color: #04283F;
    font-family: 'Poppins'; sans-serif;
    align-items: center; /* Horizontally center all items */
    justify-content: center; /* Vertically center items within the container */
    width: calc(100% - 20px);
    max-width: 1265px;
    margin: 0 auto;
    box-sizing: border-box;
    border-radius: 28px;
}

.cart-total-columns {
    display: flex;
    position: relative;
    align-items: flex-end;
    justify-content: space-between;
    background-color: white;
    border-radius: 28px;
    width: 100%;
    box-sizing: border-box;
}

.cart-total-column1 {
    flex: 0 0 40%; /* Set fixed width to 30% of cart item */
    display: flex;
    flex-direction: column;
    align-items: left;
    text-align: left;
    justify-content: center;
}

/* Cart item content will take the remaining 70% */
.cart-total-column2 {
    display: flex;
    flex: 1; /* Allows the content to take the remaining space */
    justify-content: flex-end;
    margin-left: 20px;
}

#total-price {
    font-family: 'Poppins', sans-serif; /* Apply Poppins font */
    font-weight: 500; /* Use Poppins Medium */
    font-size: 24px; /* Set font size */
    text-align: left;
}

.cart-total-background {
    width: 50%;
    background-color: white;
    color: #04283F;
    font-family: 'Poppins'; sans-serif;
    align-items: center; /* Horizontally center all items */
    justify-content: center; /* Vertically center items within the container */
    box-sizing: border-box;
    padding: 15px;
    border-radius: 28px;
}

.checkout-forms-background {
    width: 100%;
    background-color: white;
    color: #04283F;
    font-family: 'Poppins'; sans-serif;
    align-items: center; /* Horizontally center all items */
    justify-content: center; /* Vertically center items within the container */
    box-sizing: border-box;
    padding: 15px;
    border-radius: 28px;
}

@media (max-width: 768px) {
    .cart-total-background {
        width: 100%;
    }
}

#place-order-btn {
    color: #fff;
    cursor: pointer;
    border: none;
    height: 56px;
    background: linear-gradient(270deg,rgba(18, 67, 98, 1) 0%, rgba(4, 40, 63, 1) 100%);
    display: flex;
    justify-content: space-between;
    align-items: center; /* Vertically center the items */
    position: relative;
    font-family: 'Poppins', sans-serif;
    font-size: 16px;
    text-decoration: none;
    padding: 0px 50px;
    margin-left: auto;
    border-radius: 99px; /* Smoothen corners */
    transition: top 0.3s ease-in-out, background-color 0.3s ease; /* Smooth transition when hiding/showing */
}

#place-order-btn:hover {
    background-color: #124362;
}

#place-order-btn .place-order-btn-label {
    position: relative;
    z-index: 2; /* Keep text above overlay */
}

#error-message {
    position: absolute;
    bottom: 10px;
    left: 0;
    width: 100%;
    height: 56px;
    background-color: #C48F7F;
    color: white;
    display: none;
    justify-content: center;
    align-items: center;
    text-align: center;
    font-size: 16px;
    z-index: 3;
    border-radius: 999px;
}

.custom-placeholder::placeholder {
    color: #999;        /* Change color */
    font-size: 1em;     /* Adjust font size */
}

/* Container for name fields to align them in a row */
.name-row {
    display: flex;
    gap: 10px; /* Space between Last Name and First Name */
}

/* Adjust width of the name fields to fit side by side */
.name-row input {
    flex: 1;
}

/* Container for name fields to align them in a row */
.zip-row {
    display: flex;
    gap: 10px; /* Space between columns */
}

/* Adjust width of the name fields */
.zip-row input:first-child {
    flex: 0 0 20%; /* Fixed 20% width for the first input */
}

.zip-row input:not(:first-child) {
    flex: 1; /* Remaining space for other inputs */
}

/* Custom class for two-column layout */
.custom-item-form-columns {
    margin-left: 10px;
    margin-right: 10px;
    display: flex;
    flex-wrap: wrap;
    gap: 20px; /* Space between columns */
}

.custom-item-form-column1 {
    flex: 0 0 40%;
    display: flex;
    flex-direction: column;
    gap: 10px;
    background-color: transparent; /* Background of the container */
}

.custom-item-form-column2 {
    flex: 1;
}

.about-us-columns {
    margin-left: 10px;
    margin-right: 10px;
    display: flex;
    flex-wrap: wrap;
    gap: 20px; /* Space between columns */
    padding-bottom: 20px;
    align-items: center;      /* vertical centering */
}

.landing-about-us-columns {
    margin-left: 10px;
    margin-right: 10px;
    display: flex;
    flex-wrap: wrap;
    gap: 20px; /* Space between columns */
    padding-top: 76px;
    align-items: center;      /* vertical centering */
}

.about-us-column1-biggerleft {
    flex: 0 0 60%;
    display: flex;
    flex-direction: column;
    gap: 10px;
    background-color: transparent; /* Background of the container */
    padding: 30px;
}

.about-us-column1-biggerright {
    flex: 0 0 40%;
    display: flex;
    flex-direction: column;
    gap: 10px;
    background-color: transparent; /* Background of the container */
    padding: 30px;
}

.landing-about-us-column1-biggerright {
    flex: 0 0 30%;
    display: flex;
    flex-direction: column;
    gap: 10px;
    background-color: transparent; /* Background of the container */
    padding: 30px;
}

.about-us-column2 {
    flex: 1;
    padding: 30px;
}

@media (max-width: 768px) {
    .about-us-columns {
        flex-direction: column;
    }
    .about-us-column1,
    .about-us-column2 {
        flex: 1 1 100%;
    }
}

.landing-about-us-column2 {
    flex: 1;
    padding: 30px;
}

/* Center all images inside your about-us columns */
.about-us-columns img {
  display: block;
  margin: 0 auto;
}

.landing-about-us-columns img {
  display: block;
  margin: 0 auto;
  width: 80%;
  max-width: 200px;
}

@media (max-width: 768px) {
    .landing-about-us-columns img {
        width: 90%;
    }
}

@media (max-width: 582px) {
    .landing-about-us-columns {
        flex-direction: column;
        gap: 0px;
    }
    .landing-about-us-column1,
    .landing-about-us-column2 {
        flex: 1 1 100%;
    }
}

@media (max-width: 768px) {
  .about-us-columns.reverse > .about-us-column1-biggerright {
    order: 1;
  }
}

.about-us-picture-width-80 {
    width: 80%;
}

.about-us-picture-width-95 {
    width: 95%;
}

@media (max-width: 768px) {
    .about-us-picture-width-80 {
        width: 60%;
    }
    .about-us-picture-width-95 {
        width: 70%;
    }
}

.rotate-left-2 {
    transition: transform 0.3s ease-in-out;
    transform: rotate(0deg);
}

.rotate-left-2:hover {
    transform: rotate(2deg);
}

.rotate-right-2 {
    transition: transform 0.3s ease-in-out;
    transform: rotate(0deg);
}

.rotate-right-2:hover {
    transform: rotate(-2deg);
}

/* Custom class for two-column layout */
.checkout-item-form-columns {
    margin-left: 10px;
    margin-right: 10px;
    display: flex;
    flex-wrap: wrap;
    gap: 20px; /* Space between columns */
}

.checkout-item-form-column1 {
    flex: 0 0 40%;
    display: flex;
    flex-direction: column;
    gap: 10px;
    background-color: transparent; /* Background of the container */
    order: 2;
}

@media (max-width: 1120px) {
    .checkout-item-form-column1 {
        flex: 0 0 100%;
        order: 1;
    }
}

.checkout-item-form-column2 {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 20px;
    order: 1;
}

@media (max-width: 1120px) {
    .checkout-item-form-column2 {
        order: 2;
    }
}

.custom-item-form-column1-step {
    flex: 1;
    background-color: rgba(0, 0, 0, 0.15); /* 15% opacity black */
    backdrop-filter: blur(10px); /* Adjust blur strength as needed */
    height: calc((100% - 20px) / 4); /* Distribute height equally among dividers with gaps */
    border-radius: 28px; /* Optional: for a smooth edge look */
    padding: 18px;
}

.custom-send-button {
    background: linear-gradient(270deg,rgba(18, 67, 98, 1) 0%, rgba(4, 40, 63, 1) 100%);
    color: #fff;
    cursor: pointer;
    border: none;
    height: 56px;
    display: flex; /* Ensure the navbar items are aligned horizontally */
    justify-content: space-between; /* Space out the navbar content */
    align-items: center; /* Vertically center the items */
    position: relative;
    font-family: 'Poppins', sans-serif;
    font-size: 16px;
    text-decoration: none;
    padding: 0px 70px;
    margin: 15px auto 0px auto; /* Center the navbar on the page */
    border-radius: 50px; /* Smoothen corners */
    transition: top 0.3s ease-in-out, background-color 0.3s ease; /* Smooth transition when hiding/showing */
}

.custom-send-button:hover {
    background-color: #124362;
}

.bagel-fat-one-regular {
  font-family: "Bagel Fat One", system-ui;
  font-weight: 400;
  font-style: normal;
}

.rammetto-one-regular {
  font-family: "Rammetto One", sans-serif;
  font-weight: 400;
  font-style: normal;
}

.luckiest-guy-regular {
  font-family: "Luckiest Guy", cursive;
  font-weight: 400;
  font-style: normal;
}

.sansita-swashed-light {
  font-family: "Sansita Swashed", system-ui;
  font-optical-sizing: auto;
  font-weight: 300;
  font-style: normal;
}

@media (max-width: 768px) {
    .custom-item-form-columns {
        flex-direction: column;
    }
    .custom-item-form-column1,
    .custom-item-form-column2 {
        flex: 1 1 100%;
    }
}

.delayed-content {
  opacity: 0;
  transition: opacity 0.3s ease;
}

.visible {
  opacity: 1;
}

.configurator-custom-box {
    background: white;
    border-radius: 28px;
    padding: 30px;
    width: calc(100% - 20px);
    max-width: 800px;
    margin: 50px auto 0px auto;
    box-sizing: border-box;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
}

.configurator-custom-btn {
    color: #fff;
    cursor: pointer;
    border: none;
    background-color: #04283f;
    height: 56px;
    display: flex; /* Ensure the navbar items are aligned horizontally */
    justify-content: space-between; /* Space out the navbar content */
    align-items: center; /* Vertically center the items */
    position: relative;
    font-family: 'Poppins', sans-serif;
    font-size: 16px;
    text-decoration: none;
    padding: 0px 50px;
    margin: 15px auto 0px auto; /* Center the navbar on the page */
    border-radius: 99px; /* Smoothen corners */
    transition: top 0.3s ease-in-out; /* Smooth transition when hiding/showing */
}

.configurator-custom-btn::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 99px;
    transition: background 0.3s ease-in-out;
    z-index: 1; /* Position below text */
}

.configurator-custom-btn:hover::before {
    background-color: #124362;
}

.configurator-custom-btn .configurator-custom-btn-label {
    position: relative;
    z-index: 2; /* Keep text above overlay */
}

.landing-page-header-columns {
    display: flex;
    flex-direction: column; /* Stack columns vertically by default */
    background: linear-gradient(90deg, rgba(247,218,205,1) 0%, rgba(188,221,242,1) 100%);
    background-size: 100vw 100vh;
    background-attachment: scroll;
    border-bottom-left-radius: 28px;
    border-bottom-right-radius: 28px;
    -webkit-border-bottom-left-radius: 28px;
    -webkit-border-bottom-right-radius: 28px;
}

@media (max-width: 768px) {
    .landing-page-header-columns {
        background: white;
        padding-bottom: 55px;
    }
}

.landing-page-header-columns > div:first-child {
    flex: 0 0 60%; /* First column gets 60% width */
  }

  .landing-page-header-columns > div:not(:first-child) {
    flex: 1; /* Remaining columns share the remaining space */
  }

.landing-page-header-column1 {
    display: flex; /* Enables Flexbox for alignment */
    justify-content: center; /* Centers content horizontally */
    align-items: center; /* Centers content vertically */
    flex-direction: column; /* Ensures vertical stacking of children */
    width: 100%; /* Ensures full-width column */
    height: 100vh; /* Makes the column take full viewport height */
    padding: 30px; /* Adjusts inner spacing */
    text-align: center; /* Centers text within the column */
    box-sizing: border-box; /* Includes padding in the element's dimensions */
    order: 1;
}

.landing-page-header-column2 {
    display: flex; /* Enable Flexbox for the column */
    justify-content: center; /* Center the video horizontally */
    align-items: center; /* Center the video vertically */
    width: 100%; /* Full width */
    height: 100vh; /* Full viewport height */
    overflow: hidden; /* Ensure video doesn't overflow the column */
    order: 2;
}

.landing-page-header-column2 .landing-video {
    width: 100%; /* Ensure video takes full width */
    height: 100%; /* Ensure video takes full height */
    object-fit: cover; /* Crop video to fill the column proportionally */
    display: block; /* Removes any inline space */
}

@media (max-width: 768px) {
    .landing-page-header-column1 {
        position: relative;
        order: 2;
        padding: 0px 15px; /* Optional padding for content spacing */
        margin-top: -210px;
        text-align: center;
        z-index: 1000;
    }
    
    .landing-page-header-column2 {
            height: 100vh; /* Ensure full viewport height */
            order: 1;
        }

        .landing-page-header-column2 .landing-video {
            height: 85vh; /* Full height for the video */
            object-fit: cover; /* Ensure it scales proportionally and covers */
            width: 100%; /* Full width for responsiveness */
        }
}

.landing-page-header-text {
    color: #04283f;
    font-size: 42px;
}

@media (max-width: 1120px) {
    .landing-page-header-text {
        font-size: 34px;
    }
}

@media (max-width: 768px) {
    .landing-page-header-text {
        color: white;
        font-size: 28px;
        text-shadow: 0px 0px 20px rgba(0, 0, 0, 1.0);}
    }
}

.landing-page-header-text-gradient {
  position: relative; /* Enables the use of absolutely positioned pseudo-element */
  font-size: 30px;
  font-weight: bold;
  background: linear-gradient(to right, #f1f1e3, #d1dfec);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.landing-page-header-text-gradient::before {
  content: attr(data-text); /* Uses the same text content as the original */
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: -1; /* Places the shadow behind the gradient text */
  color: rgba(0, 0, 0, 1); /* Shadow color */
  text-shadow: 0px 0px 20px rgba(0, 0, 0, 1.0); /* Shadow effect */
}

.landing-page-header-column2 img.landing-image {
    width: 100%; /* Image takes full width in stacked view */
    height: auto; /* Maintains aspect ratio */
    display: block; /* Removes any inline space around the image */
    border-radius: 28px; /* Adjust this value for the desired rounding */
}


@media (min-width: 769px) {
    .landing-page-header-columns {
        flex-direction: row; /* Side-by-side for larger screens */
    }
    
    .landing-page-header-column1,
    .landing-page-header-column2 {
        width: 50%; /* Each column takes up half the width */
    }

    .landing-page-header-column2 img.landing-image {
        width: 100%; /* Adjusts image to fit column's width */
    }
}

.privacy-policy-div {
    margin-left: auto;
    margin-right: auto;
    padding-top: 20px;
    width: calc(100% - 200px);
    font-family: 'Poppins', sans-serif;
    font-size: 1rem;
    color: #04283F;
    line-height: 1.65;
}

@media (max-width: 768px) {
    .privacy-policy-div {
        width: calc(100% - 50px);
    }
}

#cookie-consent-container {
    position: fixed;
    bottom: 20px; /* Adjust for the desired vertical position */
    left: 50%; /* Start at the center of the screen horizontally */
    transform: translateX(-50%); /* Offset by half of its own width to center */
    margin-left: 0; /* Reset any potential conflicting margins */
    margin-right: 0;
    width: calc(100% - 40px);
    background-color: white;
    padding: 20px;
    border-radius: 28px;
    z-index: 100000;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 800px;
    font-family: 'Poppins', sans-serif;
    font-size: 14px;
    color: #04283F;
    text-align: center; /* Centers the text inside the container */
}

#cookie-consent-container.hidden {
    display: none;
}

#cookie-consent-container .button-container {
    display: flex;
    justify-content: center;
    gap: 10px; /* Space between buttons */
    margin-top: 10px;
}

#cookie-consent-container button {
    font-family: 'Poppins', sans-serif;
    padding: 10px 14px;
    border: none;
    background-color: #04283F;
    color: white;
    font-size: 14px;
    cursor: pointer;
    border-radius: 99px;
}

#cookie-consent-container button#reject-cookies {
    background-color: white;
    border: 1px solid #04283F;
    color: #04283F;
}

#cookie-consent-container button:hover {
    opacity: 0.8;
}

#cookie-consent-container button#cookie-settings {
    position: absolute;
    bottom: 20px;
    right: 20px;
    background-color: transparent; /* Ensure no background color */
    border: none; /* Remove border */
    padding: 0; /* Remove padding */
    cursor: pointer;
    outline: none; /* Remove focus outline */
    appearance: none; /* Remove default button styles in browsers */
}

.settings-button img.settings-icon {
    width: 25px; /* Adjust size as needed */
    height: 25px; /* Adjust size as needed */
    display: block; /* Ensure the image takes up the button space */
}

.settings-button:hover img.settings-icon {
    opacity: 0.8; /* Add hover effect for icon */
}

@media (max-width: 768px) {
    #cookie-consent-container {
        width: calc(100% - 20px);
    }
}

#withdraw-consent {
    font-family: 'Poppins', sans-serif;
    font-size: 16px;
    color: #04283F; /* Default link color or any color you prefer */
    background: none;
    border: none;
    padding: 0;
    text-decoration: underline;
    cursor: pointer;
}

#withdraw-consent:hover {
}

.barion-strip {
    display: flex;
    margin: 20px auto; /* Automatically center horizontally */
    padding: 5px 10px;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background-color: white;
    width: fit-content; /* Shrink-wrap the content */
}

.billing-fields {
    display: none; /* Hide initially */
    transition: all 0.3s ease;
}

/* Unique styles for checkout cart items */
.checkout-cart-item-wrapper {
    display: flex;
    flex-direction: column;
    border-radius: 15px;
    padding: 10px;
    background-color: #EDEDED;
    text-align: center; /* Center-align the name */
    margin-bottom: 10px; /* Add spacing between name and preview */
}

.checkout-cart-item-row {
    display: flex;
    justify-content: space-between;
    gap: 10px; /* Optional: Add spacing between elements */
}

.checkout-cart-item-header {
    flex: 1;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-left: 20px;
    padding-top: 10px;
    padding-bottom: 20px;
}

.checkout-cart-item-name {
    font-family: 'Poppins', sans-serif;
    font-size: 1.2rem;
    font-weight: 500;
    margin: 0;
}

.checkout-cart-item-price {
    font-family: 'Poppins', sans-serif;
    font-size: 1.2rem;
    font-weight: 700;
    color: #04283F;
    margin: 0;
}

/* Collapsible Details */
.checkout-collapsible {
    background-color: #fff; /* Button background color */
    color: #04283F; /* Button text color */
    cursor: pointer; /* Pointer cursor for clickability */
    padding: 10px 20px; /* Adjust padding for better spacing */
    width: 100%; /* Full width button */
    text-align: left; /* Left-aligned text */
    border: none; /* Remove default borders */
    border-radius: 15px; /* Unified border radius */
    outline: none; /* Remove focus outline */
    font-size: 1rem; /* Font size for button text */
    font-family: 'Poppins', sans-serif; /* Font family */
    transition: background-color 0.3s ease, color 0.3s ease, margin-bottom 0.3s ease; /* Smooth hover and focus transitions */
    align-self: flex-end; /* Aligns to bottom within the container */
    margin-top: auto; /* Push button to the bottom of its container */
}

.checkout-collapsible:hover {
    background-color: #fff;
}

.checkout-collapsible.active {
    background-color: #fff;
    margin-bottom: 10px;
}

.checkout-collapsible-content {
    max-height: 0;
    text-align: left;
    overflow: hidden;
    background-color: white;
    transition: max-height 0.3s ease-out;
    font-family: 'Poppins', sans-serif;
    font-size: 0.9rem;
    color: #04283F;
    border-bottom-left-radius: 15px;
    border-bottom-right-radius: 15px;
    border-top-left-radius: 15px;
    border-top-right-radius: 15px;
    -webkit-border-bottom-left-radius: 15px;
    -webkit-border-bottom-right-radius: 15px;
    -webkit-border-top-left-radius: 15px;
    -webkit-border-top-left-radius: 15px;
}

.checkout-collapsible-content-inner {
    padding: 10px 20px;
}

.checkout-collapsible-content p {
    margin: 5px 0;
}

/* Make preview section take 30% of the item width and center content */
.checkout-cart-item-preview {
    position: relative;
    flex: 0 0 30%; /* Set fixed width to 30% of cart item */
    height: 196px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center; /* Center text horizontally */
    background-color: #444;
    border-radius: 18px;
}

.checkout-cart-item-preview-text {
    font-size: 1.5rem;
    white-space: pre-wrap; /* Preserve line breaks in preview text */
    word-wrap: break-word;
    text-align: center; /* Center text inside preview */
    transition: text-shadow 0.3s ease; /* Smooth glow transition */
}

@media (max-width: 1120px) {
    .checkout-cart-item-preview {
        flex: 0 0 40%; /* Set fixed width to 40% of cart item */
        height: 271px;
    }
}

@media (max-width: 768px) {
    .checkout-cart-item-preview {
        width: 100%;
    }
    .checkout-cart-item-preview-text {
        padding-top: 20px;
        padding-bottom: 20px;
    }
    .checkout-cart-item-preview {
        width: calc(100% - 39px);
    }
}

.checkout-cart-item-content {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 100%;
    position: relative;
}

.checkout-cart-item-actions {
    margin-top: auto;
    align-self: flex-end;
    display: flex;
    flex-direction: column;
    width: 100%;
}

/* Default arrow state */
.checkout-collapsible-arrow:after {
    content: ''; /* No text content */
    display: inline-block;
    position: absolute;
    right: 20px;
    width: 15px;
    height: 15px;
    background-image: url('../images/collapsible-arrow.png'); /* Default arrow image */
    background-size: cover;
    transform: translateY(5px) rotate(90deg); /* Move arrow down by 2px */
    transition: transform 0.3s ease, background-image 0.3s ease;
}

/* Active (expanded) state */
.checkout-collapsible-arrow.active:after {
    transform: translateY(5px) rotate(270deg); /* Rotate the arrow when expanded */
}

.edit-cart-link {
    font-size: 16px;
    color: #04283F;
    text-decoration: underline;
    cursor: pointer;
}

@media (max-width: 1120px) {
    .edit-cart-link {
        display: flex;
        justify-content: flex-end;
    }
}

/* Collapsible Details */
.checkout-summary-mobile-collapsible {
    display: none;
    background-color: #fff; /* Button background color */
    color: #04283F; /* Button text color */
    cursor: pointer; /* Pointer cursor for clickability */
    padding: 10px 20px; /* Adjust padding for better spacing */
    width: 100%; /* Full width button */
    text-align: left; /* Left-aligned text */
    border: none; /* Remove default borders */
    border-radius: 15px; /* Unified border radius */
    outline: none; /* Remove focus outline */
    font-size: 1rem; /* Font size for button text */
    font-family: 'Poppins', sans-serif; /* Font family */
    transition: background-color 0.3s ease, color 0.3s ease, margin-bottom 0.3s ease; /* Smooth hover and focus transitions */
    align-self: flex-end; /* Aligns to bottom within the container */
    margin-top: auto; /* Push button to the bottom of its container */
}

@media (max-width: 1120px) {
    .checkout-summary-mobile-collapsible {
        display: flex;
        padding: 20px 0px 0px 0px;
        margin-bottom: 10px;
        justify-content: space-between;
        align-items: center;
    }
}

.checkout-summary-mobile-collapsible:hover {
    background-color: #fff;
}

.checkout-summary-mobile-collapsible.active {
    background-color: #fff;
    margin-bottom: 10px;
}

.checkout-summary-mobile-collapsible-content {
    max-height: 0;
    text-align: left;
    overflow: hidden;
    background-color: white;
    transition: max-height 0.3s ease-in-out;
    font-family: 'Poppins', sans-serif;
    font-size: 0.9rem;
    color: #04283F;
    border-bottom-left-radius: 15px;
    border-bottom-right-radius: 15px;
    border-top-left-radius: 15px;
    border-top-right-radius: 15px;
    -webkit-border-bottom-left-radius: 15px;
    -webkit-border-bottom-right-radius: 15px;
    -webkit-border-top-left-radius: 15px;
    -webkit-border-top-left-radius: 15px;
    box-sizing: border-box;
}

.checkout-summary-mobile-collapsible-content.expanded {
    max-height: 9999px; /* Matches the large value in JavaScript */
}

.checkout-summary-mobile-collapsible-content-inner {
    display: none;
    box-sizing: border-box;
}

@media (max-width: 1120px) {
    .checkout-summary-mobile-collapsible-content-inner {
        display: block;
    }
}

.checkout-summary-mobile-collapsible-content p {
    margin: 5px 0;
}

.checkout-summary-mobile-collapsible-arrow:after {
    content: ''; /* No text content */
    display: inline-block;
    position: absolute;
    right: 20px;
    width: 15px;
    height: 15px;
    background-image: url('../images/collapsible-arrow.png'); /* Default arrow image */
    background-size: cover;
    transform: translateY(5px) rotate(90deg); /* Move arrow down by 2px */
    transition: transform 0.3s ease, background-image 0.3s ease;
}

@media (max-width: 1120px) {
    .checkout-summary-mobile-collapsible-arrow:after {
        left: 170px;
        transform: translateY(0px) rotate(90deg); /* Move arrow down by 2px */
    }
}

/* Active (expanded) state */
.checkout-summary-mobile-collapsible-arrow.active:after {
    transform: translateY(5px) rotate(270deg); /* Rotate the arrow when expanded */
}

@media (max-width: 1120px) {
    .checkout-summary-mobile-collapsible-arrow.active:after {
        transform: translateY(0px) rotate(270deg); /* Move arrow down by 2px */
    }
}

@media (max-width: 1120px) {
    .hidden-below-1120 {
        display: none;
    }
}

@media (max-width: 582px) {
    .hidden-below-582 {
        display: none;
    }
}

@media (min-width: 583px) {
    .visible-over-583 {
        display: none;
    }
}

.products-container {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    justify-content: center;
    padding: 0px 20px 60px 20px;
}

.product-item {
    display: block;
    text-decoration: none;
    color: inherit;
    flex: 1 1 300px;
    box-sizing: border-box;
    border-radius: 28px;
    overflow: hidden;
    transition: transform 0.3s ease;
    max-width: 300px;
}

.product-item:hover {
    transform: scale(1.05);
}

.product-image {
    width: 100%;
    height: 300px;
    object-fit: cover;
    border-radius: 28px;
}

.product-info {
    padding: 15px;
    text-align: center;
    background-color: #fff;
    margin-top: -150px;
    padding-top: 165px;
}

.product-name {
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    font-size: 18px;
    color: #04283f;
    margin-bottom: 15px;
}

.product-price {
    font-family: 'Poppins', sans-serif;
    font-weight: 400;
    font-size: 16px;
    color: #04283F;
}

@media (max-width: 768px) {
    .product-item {
        flex: 1 1 45%;
        max-width: 100%;
    }
}

@media (max-width: 480px) {
    .product-item {
        flex: 1 1 100%;
        max-width: 100%;
    }
}

.product-page {
    display: flex;
    flex-direction: row;
    gap: 20px;
    padding: 0px 20px 0px 20px;
    align-items: flex-start;
    justify-content: center;
}

.product-image {
    flex: 0 0 40%; /* Ensures the image container takes up 40% of the width */
    display: block; /* Change from flex to block to prevent vertical centering */
}

.product-image img {
    width: 100%; /* Image scales to fill the container width */
    object-fit: cover; /* Maintains aspect ratio while fitting the height */
    border-radius: 28px;
    display: block; /* Prevents inline alignment issues */
    margin: 0; /* Removes any default margin */
}

.product-details {
    flex: 0 0 60%; /* Ensures the description takes up 60% of the width */
    display: flex;
    flex-direction: column;
    gap: 20px;
    background-color: white;
    padding: 20px;
    border-radius: 28px;
}

.product-details > :nth-child(2) {
    margin-bottom: -20px;
}

.product-page-product-name {
    font-family: 'Poppins', sans-serif; /* Apply Poppins font */
    font-weight: 500; /* Use Poppins Medium */
    font-size: 28px; /* Set font size */
    text-align: center;
    padding-top: 10px;
    color: #04283F;
}

.product-page-product-price {
    font-family: 'Poppins', sans-serif;
    font-size: 1.5rem;
    font-weight: 500;
    color: #04283F;
}

.product-description {
    font-family: 'Poppins', sans-serif;
    font-size: 1rem;
    color: #04283F;
}

.product-page-long-description {
    background-color: white;
    align-items: center; /* Horizontally center all items */
    width: calc(100% - 20px);
    max-width: 1265px;
    margin: 50px auto 20px auto;
    border-radius: 28px;
    padding: 35px;
}

/* Responsive Layout for Mobile Devices */
@media (max-width: 768px) {
    .product-page {
        flex-direction: column;
        padding: 0px 10px 0px 10px;
    }

    .product-image, .product-details {
        width: 100%; /* Full width on mobile */
    }

    .product-image img {
        height: auto; /* Image height adjusts for smaller screens */
    }
}

.price-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px; /* Adjust for spacing between rows */
}

.price-value {
    text-align: right;
    font-weight: bold; /* Optional for emphasis */
}

.order-actions {
    display: flex;
    position: relative;
    align-items: center;
    gap: 15px; /* Space between quantity box and button */
    margin-top: 10px;
    padding-bottom: 10px;
}

.item-quantity {
    display: flex;
    align-items: center;
    border: none;
    border-radius: none;
    overflow: hidden;
    margin-left: auto;
    width: 120px;
    height: 40px;
}

.quantity-section {
    display: flex;
    align-items: center;
    margin-bottom: 20px; /* Space above the quantity section */
    text-align: left;
}

.quantity-section p {
    margin-bottom: 5px; /* Space between the label and the buttons */
    font-size: 16px;
}

.quantity-btn {
    width: 40px;
    height: 100%;
    background-color: #f3f3f3;
    border: none;
    border-radius: 100%;
    cursor: pointer;
    font-size: 20px;
    color: #04283F;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative; /* Enable relative positioning */
}

.quantity-btn:hover {
    background-color: #e0e0e0;
}

.quantity-btn:first-child {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 18px;
    color: #04283F;
    position: relative; /* Enable relative positioning */
}

.quantity-btn:first-child span {
    position: relative; /* Make the text independently positionable */
    top: -0px; /* Move the text up by 2px */
    left: -0px;
}

#item-quantity {
    width: 40px;
    text-align: center;
    border: none;
    outline: none;
    font-size: 16px;
    font-family: 'Poppins', sans-serif;
    color: #04283F;
}

#item-quantity {
    -webkit-appearance: none; /* Removes default arrows in WebKit browsers (Chrome, Safari, etc.) */
    -moz-appearance: textfield; /* Removes default arrows in Firefox */
    appearance: none; /* Ensures compatibility across all browsers */
    width: 40px;
    text-align: center;
    border: none;
    outline: none;
    font-size: 16px;
    color: #04283F;
    line-height: 40px; /* Ensures vertical centering */
    height: 100%; /* Matches the container height */
    background-color: transparent; /* Keeps a clean look */
}

#item-quantity::-webkit-inner-spin-button,
#item-quantity::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0; /* Ensures no extra margin from the spin buttons */
}

#item-quantity::-moz-inner-spin-button,
#item-quantity::-moz-outer-spin-button {
    appearance: none;
    margin: 0; /* Ensures no extra margin from the spin buttons */
}

#item-quantity:hover::-webkit-inner-spin-button,
#item-quantity:hover::-webkit-outer-spin-button,
#item-quantity:focus::-webkit-inner-spin-button,
#item-quantity:focus::-webkit-outer-spin-button {
    display: none; /* Completely hides spin buttons on hover and focus */
}

.cart-item-image {
    width: 100%; /* Fit within container */
    height: auto; /* Maintain aspect ratio */
    max-width: 196px; /* Limit maximum width */
    object-fit: contain; /* Avoid distortion */
    margin: 0 auto; /* Center the image */
    display: block; /* Block-level layout */
    border-radius: 18px;
}

@media (max-width: 1120px) {
    .cart-item-image {
        max-width: 271px; /* Limit maximum width */
    }
}

@media (max-width: 768px) {
    .cart-item-image {
        max-width: 170px; /* Limit maximum width */
    }
}

.checkout-cart-item-image {
    width: 100%; /* Fit within container */
    height: auto; /* Maintain aspect ratio */
    max-width: 130px; /* Limit maximum width */
    object-fit: contain; /* Avoid distortion */
    margin: 0 auto; /* Center the image */
    display: block; /* Block-level layout */
    border-radius: 15px;
}

/* Default padding for all items */
.price-padding {
    padding-top: 0px;
    text-align: left;
    color: #04283F;
}

/* Additional padding for items not named "Egyedi termék" on wider screens */
@media (min-width: 1121px) {
    .price-padding.extra-padding {
        padding-top: 36px; /* 10px base + 26px additional */
    }
}

/* Additional padding for items not named "Egyedi termék" between 769px and 1120px */
@media (min-width: 769px) and (max-width: 1120px) {
    .price-padding.extra-padding {
        padding-top: 62px; /* 10px base + 52px additional */
    }
}

.item-quantity-cart {
    display: flex;
    margin-left: 10px;
    border: none;
    border-radius: none;
    overflow: hidden;
    height: 40px;
}

.quantity-section-cart {
    display: flex;
    align-items: center;
    text-align: left;
}

.quantity-section-cart p {
    margin-bottom: 2px; /* Space between the label and the buttons */
    font-size: 16px;
}

.quantity-btn-cart {
    width: 40px;
    height: 100%;
    background-color: #f3f3f3;
    border: none;
    border-radius: 100%;
    cursor: pointer;
    font-size: 20px;
    color: #04283F;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative; /* Enable relative positioning */
}

.quantity-btn-cart:hover {
    background-color: #e0e0e0;
}

.quantity-btn-cart:first-child {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 18px;
    color: #04283F;
    position: relative; /* Enable relative positioning */
}

.quantity-btn-cart:first-child span {
    position: relative; /* Make the text independently positionable */
    top: -0px; /* Move the text up by 2px */
    left: -0px;
}

[id^="item-quantity-cart-"] {
    width: 40px;
    text-align: center;
    border: none;
    outline: none;
    font-size: 16px;
    font-family: 'Poppins', sans-serif;
    color: #04283F;
}

[id^="item-quantity-cart-"] {
    -webkit-appearance: none; /* Removes default arrows in WebKit browsers (Chrome, Safari, etc.) */
    -moz-appearance: textfield; /* Removes default arrows in Firefox */
    appearance: none; /* Ensures compatibility across all browsers */
    width: 40px;
    text-align: center;
    border: none;
    outline: none;
    font-size: 16px;
    color: #04283F;
    line-height: 40px; /* Ensures vertical centering */
    height: 100%; /* Matches the container height */
    background-color: transparent; /* Keeps a clean look */
}

[id^="item-quantity-cart-"]::-webkit-inner-spin-button,
[id^="item-quantity-cart-"]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0; /* Ensures no extra margin from the spin buttons */
}

[id^="item-quantity-cart-"]::-moz-inner-spin-button,
[id^="item-quantity-cart-"]::-moz-outer-spin-button {
    appearance: none;
    margin: 0; /* Ensures no extra margin from the spin buttons */
}

[id^="item-quantity-cart-"]:hover::-webkit-inner-spin-button,
[id^="item-quantity-cart-"]:hover::-webkit-outer-spin-button,
[id^="item-quantity-cart-"]:focus::-webkit-inner-spin-button,
[id^="item-quantity-cart-"]:focus::-webkit-outer-spin-button {
    display: none; /* Completely hides spin buttons on hover and focus */
}

.cart-quantity-and-price {
    display: flex;
    flex: 1;
    width: 100%;
    gap: 20px;
    margin-top: 5px;
}

@media (max-width: 660px) {
    .cart-quantity-and-price {
        flex-direction: column;
        gap: 10px;
    }
    .cart-total-price {
        text-align: left;
    }
}

.cart-total-price {
    flex: 1;
}

/* Additional padding for items not named "Egyedi termék" on wider screens */
@media (min-width: 1121px) {
    .price-padding.extra-padding {
        padding-top: 26px;
    }
}

/* Additional padding for items not named "Egyedi termék" between 769px and 1120px */
@media (min-width: 769px) and (max-width: 1120px) {
    .price-padding.extra-padding {
        padding-top: 52px;
    }
}

.checkout-quantity-badge {
    position: absolute;
    top: -5px;
    right: -5px;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background-color: white;
    color: #04283F;
    font-size: 14px;
    font-family: 'Poppins', sans-serif;
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: 600;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    z-index: 10;
}

.cart-badge {
    position: absolute;
    top: -4px;
    right: -4px;
    width: 20px;
    height: 20px;
    background-color: #04283F;
    color: white;
    border-radius: 50%;
    font-size: 12px;
    font-weight: 600;
    display: none; /* Hidden initially */
    align-items: center; /* Vertically center */
    justify-content: center; /* Horizontally center */
}

.thank-you-h1 {
    color: #04283F;
    font-family: 'Poppins', sans-serif;
    font-size: 56px;
    padding-bottom: 20px;
    padding-top: 106px;
    padding-left: 20px;
    padding-right: 20px;
}

.thank-you-p {
    color: #fff;
    font-family: 'Poppins', sans-serif;
    font-size: 18px;
    font-weight: 400;
    text-align: center;
    padding-left: 20px;
    padding-right: 20px;
}

.landing-video {
    width: 100%;
    height: auto;
    display: block;
    border-bottom-left-radius: 28px;
    -webkit-border-bottom-left-radius: 28px;
    border-bottom-right-radius: 28px;
    -webkit-border-bottom-right-radius: 28px;
}

@media (max-width: 768px) {
    .landing-video {
        border-bottom-right-radius: 28px;
        -webkit-border-bottom-right-radius: 28px;
    }
}

.landing-page-header-buttons {
    margin-top: 20px;
    display: flex;
    justify-content: center;
    gap: 10px;
}

.landing-page-header-button-primary, .landing-page-header-button-secondary {
    padding: 10px 20px;
    font-family: 'Poppins', sans-serif;
    font-size: 16px;
    font-weight: 400;
    text-decoration: none;
    border-radius: 99px;
    cursor: pointer;
    transition: background-color 0.3s, color 0.3s;
}

.landing-page-header-button-primary {
    background-color: #04283F;
    border: 2px solid transparent;
    color: white;
}

.landing-page-header-button-primary:hover {
    background-color: #124362;
}

.landing-page-header-button-secondary {
    background-color: transparent;
    border: 2px solid #04283F;
    color: #04283F;
}

@media (max-width: 768px) {
    .landing-page-header-button-secondary {
        background-color: white;
        border: 2px solid transparent;
        
    }
}

.landing-page-header-button-secondary:hover {
    background-color: #04283F;
    color: white;
}

.landing-page-products-buttons {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin: 0 10px;
}

.landing-page-products-button-primary {
    padding: 10px 20px;
    margin-bottom: 20px;
    font-family: 'Poppins', sans-serif;
    font-size: 16px;
    font-weight: 400;
    text-decoration: none;
    text-align: center;
    border-radius: 99px;
    cursor: pointer;
    transition: background-color 0.3s, color 0.3s;
}

.landing-page-products-button-primary {
    background-color: #04283F;
    border: 2px solid transparent;
    color: white;
}

.landing-page-products-button-primary:hover {
    background-color: #124362;
}

.landing-page-products-button-secondary {
    padding: 10px 20px;
    margin-bottom: 80px;
    font-family: 'Poppins', sans-serif;
    font-size: 16px;
    font-weight: 400;
    text-decoration: none;
    text-align: center;
    border-radius: 99px;
    cursor: pointer;
    transition: background-color 0.3s, color 0.3s;
}

.landing-page-products-button-secondary {
    background-color: #04283F;
    border: 2px solid transparent;
    color: white;
}

.landing-page-products-button-secondary:hover {
    background-color: #333333;
}

.landing-page-products-button-secondary {
    background-color: transparent;
    border: 2px solid #04283F;
    color: #04283F;
}

.landing-page-products-button-secondary:hover {
    background-color: #04283F;
    color: white;
}

.landing-page-photo-carousel-section {
    padding-top: 60px;
}

.landing-page-photo-carousel {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
    width: 100%; /* Full screen width */
    margin-top: 30px;
    background: white;
    background-size: 100vw 100vh;
    background-attachment: scroll;
}

@media (max-width: 768px) {
    .landing-page-photo-carousel {
        margin-top: 30px;
    }
}

.landing-page-photo-container {
    overflow: hidden;
    width: 100%; /* Full screen width */
}

.landing-page-photos {
    display: flex;
    gap: 30px; /* Space between photos */
    padding: 0 15px; /* Equal left and right padding */
    overflow: hidden; /* Hide overflow for clean edges */
    background: #f5efec;
}

.landing-page-photos img {
    width: calc((100vw - 150px) / 5); /* Adjusted for 5 fully visible photos */
    border-radius: 28px;
    -webkit-border-radius: 28px;
}

@media (max-width: 990px) { /* Show only 3 photos on smaller screens */
    .landing-page-photos {
        gap: 30px; /* Space between photos */
        padding: 0 15px; /* Equal left and right padding */
    }

    .landing-page-photos img {
        width: calc((100vw - 90px) / 3); /* Adjusted for 3 fully visible photos */
    }
}

@media (max-width: 660px) { /* Show only 3 photos on smaller screens */
    .landing-page-photos {
        gap: 30px; /* Space between photos */
        padding: 0 15px; /* Equal left and right padding */
    }

    .landing-page-photos img {
        width: calc((100vw - 60px) / 2); /* Adjusted for 2 fully visible photos */
    }
}

.landing-page-prev-button,
.landing-page-next-button {
    background-color: white;
    color: white;
    border: none;
    padding: 5px;
    width: 40px;
    height: 40px;
    cursor: pointer;
    font-size: 24px;
    z-index: 10;
    border-radius: 999px;
    -webkit-border-radius: 999px;
    background-size: 17px;
    background-repeat: no-repeat;
    background-image: url('../images/collapsible-arrow.png');
    box-shadow: 0 0px 8px rgba(0, 0, 0, 0.6);
}

.landing-page-prev-button {
    position: absolute;
    left: 10px;
    top: 50%;
    background-position: 13px center; /* Move image horizontally (x = 10px) */
    transform: translateY(-50%) rotate(-180deg); /* Rotates the image for the previous button */
}

.landing-page-next-button {
    position: absolute;
    right: 10px;
    top: 50%;
    background-position: 12px center; /* Move image horizontally (x = 10px) */
    transform: translateY(-50%);
}

.landing-page-proofs {
    display: flex;
    flex-wrap: wrap; /* Enable wrapping for smaller screens */
    justify-content: space-between;
    gap: 15px; /* Space between columns */
    margin: 0px auto;
    padding: 0px 15px 80px 15px;
    max-width: 1265px;
    font-family: 'Poppins'; sans-serif;
    color: #04283F;
}

.landing-page-proofs-column {
    flex: 1 1 calc(25% - 20px); /* Four columns with equal width */
    background-color: white; /* Light gray background for visibility */
    border: none;
    padding: 30px 20px;
    text-align: center;
    border-radius: 28px;
}

@media (max-width: 990px) {
    .landing-page-proofs-column {
        flex: 1 1 calc(50% - 15px); /* Two columns per row */
    }
}

/* Responsive styling for screens with max-width 440px */
@media (max-width: 450px) {
    .landing-page-proofs-column {
        flex: 1 1 100%; /* Full width for each column */
    }
}

.landing-page-proofs-column img {
    width: 75px;
}

@media (max-width: 990px) {
    .landing-page-proofs-column img {
        width: 70px;
    }
}

@media (max-width: 450px) {
    .landing-page-proofs-column img {
        width: 70px;
    }
}

@media (max-width: 1300px) and (min-width: 980px) {
    .hidden-between-1300-and-980 {
        display: none;
    }
}

.landing-page-products-section {
    margin-top: 60px;
}

.landing-page-h1 {
    padding: 0 20px;
    margin-bottom: 30px;
    color: #04283f;
}

.landing-page-why-choose-us-center-horizontally {
    display: flex;
    justify-content: center; /* Centers horizontally */
}

.landing-page-why-choose-us {
    background: rgb(247,218,205);
    background: -moz-linear-gradient(90deg, rgba(247,218,205,1) 0%, rgba(188,221,242,1) 100%);
    background: -webkit-linear-gradient(90deg, rgba(247,218,205,1) 0%, rgba(188,221,242,1) 100%);
    background: linear-gradient(90deg, rgba(247,218,205,1) 0%, rgba(188,221,242,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#f7dacd",endColorstr="#bcddf2",GradientType=1);
    border-radius: 28px;
    -webkit-border-radius: 28px;
    padding-top: 60px;
    color: white;
    margin: 0 10px;
    width: 100%;
    max-width: 1265px;
    transition: transform 0.3s ease;
}

.landing-page-why-choose-us:hover {
    transform: scale(1.01);
}

.landing-page-products-container {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    justify-content: center;
    padding: 0px 20px 40px 20px;
}

.landing-page-product-item {
    text-decoration: none;
    color: inherit;
    flex: 1 1 300px;
    box-sizing: border-box;
    border-radius: 28px;
    overflow: hidden;
    transition: transform 0.3s ease;
    max-width: 300px;
}

.landing-page-product-item:hover {
    transform: scale(1.05);
}

@media (max-width: 768px) {
    .landing-page-product-item {
        flex: 1 1 45%;
        max-width: 100%;
    }
}

@media (max-width: 480px) {
    .landing-page-product-item {
        flex: 1 1 100%;
        max-width: 100%;
    }
}

.copyright {
    color: white;
    font-size: 12px;
    padding-top: 20px;
}

/* Style the button that is used to open and close the collapsible content */
.faq-collapsible {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: transparent;
    border: 0px solid #04283F;
    border-radius: 15px;
    cursor: pointer;
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    font-size: 16px;
    color: #04283F;
    height: 70px;
    margin: 5px;
    padding: 18px;
    width: calc(100% - 10px);
    text-align: left;
    outline: none;
    transition: background-color 0.3s, border 0.3s, color 0.3s;
}

/* Collapsible content: hidden by default */
.faq-content {
    width: calc(100% - 0px);
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.2s ease-out;
    color: #04283F;
}

.faq-questions-box {
    background: white;
    border-radius: 28px;
    padding: 15px;
    width: calc(100% - 20px);
    max-width: 800px;
    margin: 0px auto;
    box-sizing: border-box;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
}

.product-image-wrapper {
    width: 100px;
    aspect-ratio: 1 / 1;
    border-radius: 18px;
    border: 2px solid transparent;
    box-sizing: border-box;
    padding: 3px; /* This creates the "gap" */
    background-clip: padding-box;
    cursor: pointer;
    transition: border 0.2s, box-shadow 0.2s;
}

.product-image-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 14px; /* Slightly smaller to fit inside rounded wrapper */
    display: block;
}

.product-image-wrapper:hover,
.product-image-wrapper.selected {
    border: 2px solid #04283F;
    background-color: transparent; /* required to see through the padding gap */
    box-shadow: inset 0 0 0 1000px rgba(255,255,255,0); /* creates transparent inner ring */
}

/* Responsive */
@media (max-width: 1265px) {
    .product-image-wrapper {
        width: 80px;
    }
}

.product-image-overlay-container {
    position: relative;
    width: 100%;
}

.product-image-overlay-container img {
    width: 100%;
    display: block;
    border-radius: 28px;
}

#product-overlay {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
    opacity: 1;
    transition: opacity 0.3s ease;
}

.pt-serif-regular {
  font-family: "PT Serif", serif;
  font-weight: 400;
  font-style: normal;
}

.pt-serif-bold {
  font-family: "PT Serif", serif;
  font-weight: 700;
  font-style: normal;
}

.pt-serif-regular-italic {
  font-family: "PT Serif", serif;
  font-weight: 400;
  font-style: italic;
}

.pt-serif-bold-italic {
  font-family: "PT Serif", serif;
  font-weight: 700;
  font-style: italic;
}

.bestseller-badge {
    position: absolute;
    top: -6px;
    left: 50%;
    transform: translateX(-50%);
    background-color: #04283F;
    color: white;
    padding: 3px 12px;
    border: 1px solid white;
    font-size: 11px;
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    border-radius: 999px;
    -webkit-border-radius: 999px;
    z-index: 9;
}

.product-offer-banner {
    display: flex;
    align-items: center;
    font-family: 'Poppins', sans-serif;
    font-size: 16px;
    color: #04283F;
    background-color: #f7dacd;
    /* background: linear-gradient(90deg, rgba(247,218,205,1) 0%, rgba(188,221,242,1) 100%); To restore gradient background of section */
    padding: 12px 18px;
    border-radius: 18px;
    margin: 0px 2px;
    border: 10px double white;
}

.product-offer-banner-column.image-column {
    width: 30%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.product-offer-banner-column.text-column {
    width: 70%;
    text-align: center;
    display: flex;
    flex-direction: column; /* 🔧 stack children vertically */
    justify-content: center;
    align-items: center;
}

.product-offer-banner-img {
    display: block;
    max-height: 80px;
    max-width: 80px;
    width: auto;
    height: auto;
    object-fit: contain;
}

@media (max-width: 400px) {
    .product-offer-banner-column.image-column {
        width: 30%;
    }

    .product-offer-banner-column.text-column {
        width: 70%;
    }
    .product-offer-banner-img {
        max-width: 60px;
    }
}

@media (max-width: 365px) {
    .product-offer-banner-column.image-column {
        width: 20%;
    }

    .product-offer-banner-column.text-column {
        width: 80%;
    }
    .product-offer-banner-img {
        max-width: 50px;
    }
}

.offer-lead {
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 4px;
}

.offer-details {
    font-size: 16px;
    font-weight: 400;
}

.product-page-product-subname {
    text-align: center;
    margin: 0 auto;
    color: #c48f7f;
    font-size: 18px;
    /* text-shadow: 0px 0px 4px rgba(0, 0, 0, 0.1); */
}

.revolution-image {
    width: 80%;
    max-width: 400px;
    margin: 0 auto;
}

@media (max-width: 440px) {
    .revolution-image {
        width: 95%;
    }
}

.premium-image {
    width: 80%;
    max-width: 130px;
    margin: 0 auto;
}

@media (max-width: 440px) {
    .premium-image {
        width: 95%;
    }
}

.premium-image-configurator {
    max-width: 130px;
    margin: 0 auto;
}

.playwrite-dk-loopet-<uniquifier> {
  font-family: "Playwrite DK Loopet", cursive;
  font-optical-sizing: auto;
  font-weight: <weight>;
  font-style: normal;
}

.parisienne-regular {
  font-family: "Parisienne", cursive;
  font-weight: 400;
  font-style: normal;
}

.oooh-baby-regular {
  font-family: "Oooh Baby", cursive;
  font-weight: 400;
  font-style: normal;
}

.playwrite-cu-<uniquifier> {
  font-family: "Playwrite CU", cursive;
  font-optical-sizing: auto;
  font-weight: <weight>;
  font-style: normal;
}

.neonderthaw-regular {
  font-family: "Neonderthaw", cursive;
  font-weight: 400;
  font-style: normal;
}

.fascinate-regular {
  font-family: "Fascinate", system-ui;
  font-weight: 400;
  font-style: normal;
}

.bungee-outline-regular {
  font-family: "Bungee Outline", sans-serif;
  font-weight: 400;
  font-style: normal;
}

.danfo-<uniquifier> {
  font-family: "Danfo", serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  font-variation-settings:
    "ELSH" 0;
}

.quicksand-<uniquifier> {
  font-family: "Quicksand", sans-serif;
  font-optical-sizing: auto;
  font-weight: <weight>;
  font-style: normal;
}

.rajdhani-light {
  font-family: "Rajdhani", sans-serif;
  font-weight: 300;
  font-style: normal;
}

.rajdhani-regular {
  font-family: "Rajdhani", sans-serif;
  font-weight: 400;
  font-style: normal;
}

.rajdhani-medium {
  font-family: "Rajdhani", sans-serif;
  font-weight: 500;
  font-style: normal;
}

.rajdhani-semibold {
  font-family: "Rajdhani", sans-serif;
  font-weight: 600;
  font-style: normal;
}

.rajdhani-bold {
  font-family: "Rajdhani", sans-serif;
  font-weight: 700;
  font-style: normal;
}

.padyakke-expanded-one-regular {
  font-family: "Padyakke Expanded One", serif;
  font-weight: 400;
  font-style: normal;
}

.indie-flower-regular {
  font-family: "Indie Flower", cursive;
  font-weight: 400;
  font-style: normal;
}

.font-option.font-outline .font-name {
    color: transparent;
    -webkit-text-stroke-width: 0.75px;
    -webkit-text-stroke-color: #04283F;
    transition: background-color 0.3s, border 0.3s;
    text-align: center;
    box-sizing: border-box; /* Ensure consistent padding and border */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.font-option.font-outline:hover .font-name {
    color: transparent;
    -webkit-text-stroke-width: 0.75px;
    -webkit-text-stroke-color: white;
}

.font-option.font-outline.selected .font-name {
    color: transparent;
    -webkit-text-stroke-width: 0.75px;
    -webkit-text-stroke-color: white;
}

.collapsible.font-outline {
    color: transparent;
    -webkit-text-stroke-width: 0.75px;
    -webkit-text-stroke-color: white;
}

.collapsible.font-outline:hover,
.collapsible.font-outline.font-selected {
    color: transparent;
    -webkit-text-stroke-color: white;
}

@media (max-width: 372px) {
    .total-hider {
        display: none;
    }
}

.configurator-cafe {
    background-image: url('../images/landing_variations/cafe_configurator.png');
}

.three-column-image-section {
    display: flex;
    justify-content: space-between;
    gap: 30px;
    padding: 60px 40px;
    background-color: #f5efec;
}

.image-column {
    flex: 1;
    text-align: center;
}

.image-column img {
    width: 100%;
    max-width: 300px;
    height: auto;
}

/* Responsive layout */
@media (max-width: 768px) {
    .three-column-image-section {
        flex-direction: column;
        gap: 60px;
    }
}

.b2b-form {
    justify-content: center;
}

.hover-info-container {
  position: relative;
  display: inline-block;
  margin-left: 10px;
}

.hover-info-icon {
  width: 18px;
  height: 18px;
  cursor: pointer;
  position: relative;
  top: 2px; /* Moves the icon down */
}

.hover-info-tooltip {
  display: block;
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  background-color: white;
  color: #04283F;
  font-family: 'Poppins', sans-serif;
  font-size: 13px;
  padding: 14px 22px 14px 22px;
  border-radius: 15px;
  border: 1px solid #ccc;
  box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.2);
  white-space: nowrap;
  z-index: 10000;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease, top 0.25s ease;
  /* max-width: calc(100% - 20px); */
  max-width: 500px;
  box-sizing: border-box;
  word-wrap: break-word;
  white-space: normal; /* allow wrapping */
  text-align: center;  /* optional for aesthetic */
}

/* Visible state */
.hover-info-tooltip.visible {
  opacity: 1;
  pointer-events: auto;
}

/* Close button (always visible) */
.tooltip-close-btn {
  position: absolute;
  top: 4px;
  right: 6px;
  font-size: 18px;
  color: #04283F;
  font-weight: bold;
  cursor: pointer;
  z-index: 10001;
  line-height: 1;
  padding: 2px 4px;
}

/* Dropdown styles */
.nav-links .dropdown {
    position: relative;
}

.nav-links .dropdown-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: -15px;
    background: white;
    border-radius: 28px;
    box-shadow: 0px 0px 8px rgba(0,0,0,0.15);
    list-style: none;
    padding: 10px 10px;
    min-width: 220px;
    z-index: 1000;
}

.nav-links .dropdown-menu li a {
    display: block;
    padding: 8px 15px;
    color: #04283F;
    text-decoration: none;
    font-size: 0.95rem;
}

.nav-links .dropdown-menu li a:hover {
    background-color: #f3f3f3;
    border-radius: 50px; /* rounded corners */
}

/* Hover for desktop */
@media (min-width: 1266px) {
    .nav-links .dropdown:hover .dropdown-menu {
        display: block;
    }
}

/* Mobile click toggle */
@media (max-width: 1265px) {
    .nav-links .dropdown-menu {
        position: static;
        box-shadow: none;
        background: transparent;
        padding-left: 20px;
    }
    .nav-links .dropdown-menu li a {
        color: white;
    }
}

/* --- Mobile submenu overlay --- */
.mobile-submenu {
  display: none;
  position: fixed;
  top: 65px;
  left: 0;
  right: 0;
  width: calc(100% - 20px);  /* subtract left/right margin */
  height: calc(65vh - 20px); /* subtract top/bottom margin */
  margin: 10px;              /* ← 10px space around background */
  background-color: #04283F;
  border-radius: 38px;
  z-index: 10001;
  padding: 20px;
  box-sizing: border-box;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.mobile-submenu.active {
  display: flex;
  flex-direction: column;
}

.mobile-submenu-header {
  display: flex;
  flex-direction: column;    /* stack back button above title */
  align-items: center;
  gap: 30px;                 /* space between back button and title */
  width: 100%;
  max-width: 520px;
  margin: 0 auto 20px auto;
  color: white;
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  padding-bottom: 15px;           /* space below text before divider */
  position: relative;   /* needed for ::after positioning */
}

.mobile-submenu-header::after {
  content: "";
  display: block;
  width: 50px;             /* divider width */
  height: 1px;             /* divider thickness */
  background-color: white;
  margin-top: 8px;         /* space between text and divider */
}

#mobile-submenu-back {
  position: relative;
  background: white;
  color: #04283F;
  border: 0;
  border-radius: 999px;
  padding: 8px 14px 8px 36px; /* extra left padding for arrow space */
  cursor: pointer;
  font-family: 'Poppins', sans-serif;
  font-size: 1rem;
  display: block;
  margin: 0 auto; /* center horizontally */
}

/* Arrow pseudo-element */
#mobile-submenu-back::before {
  content: "";
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%) scaleX(-1); /* flip horizontally */
  width: 14px;
  height: 14px;
  background: url('../images/collapsible-arrow.png') no-repeat center;
  background-size: contain;
}

.mobile-submenu-header span {
  font-size: 1.2rem;
}

.mobile-submenu-list {
  list-style: none;
  padding: 0;
  margin: 10px 0 0 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.mobile-submenu-list a {
  color: white;
  text-decoration: none;
  font-size: 1.2rem;
  font-family: 'Poppins', sans-serif;
  font-weight: 400;
}

.mobile-submenu-list a:hover {
  text-decoration: underline;
}

/* Desktop: never show overlay */
@media (min-width: 1266px) {
  .mobile-submenu { display: none !important; }
}

@media (min-width: 769px) {
  .mobile-submenu {
      margin: 10px 20px 10px 20px;
      width: calc(100% - 40px);  /* subtract left/right margin */
  }
}

@media (min-width: 769px) {
  .nav-links .dropdown-menu {
    left: -15px;
    top: calc(100% + 12px);
  }

  /* Transparent hover bridge to keep menu open */
  .nav-links .dropdown-menu::before {
    content: "";
    position: absolute;
    top: -20px;  /* extend hit area upward into gap */
    left: 0;
    width: 100%;
    height: 20px;
    background: transparent;
  }
}