@import url('https://fonts.googleapis.com/css2?family=Jost:ital,wght@0,100..900;1,100..900&display=swap');

    :root {
    --primary-color: #F5C842;
    --primary-color-dark: #F5C842;
    --primary-color-light: #FFE08A;
    --secondary-color: #2F2F2F;
    --secondary-color-dark: #5A5A5A;
    --text-muted: #9A9A9A;
    --border-color: #E2E2E2;
    --padding: 50px;
    --margin: 70%;
    --font: 'Jost';
    }

    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }
    body {
      font-family: var(--font), sans-serif !important;
      color: var(--secondary-color);
    }
    h1, h2, h3, h4, p {
        color: var(--secondary-color);
    }

    .angled-header-wrapper {
        background-color: var(--primary-color);
        padding-bottom: 70px;
        margin-bottom: 50px;
        box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
    }

    .announcement {
      background-color: var(--secondary-color);
      padding: 5px;
      text-align: center;
      color: var(--primary-color);
    }
    .header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 10px 15px;
      flex-wrap: wrap;
      width: var(--margin);
      margin: auto;
    }
    .header .logo {
        width: 350px;
        height: 70px;
        background-image: url('https://dehhani.uk/media/uploads/37/1758584428285.png'); /* Logo Light */
        background-repeat: no-repeat;
        background-size: contain;
    }

    .header img.logo {
      max-height: 100px;
    }
    .icons {
      display: flex;
      gap: 30px;
    }
    .icon-section {
      text-align: center;
      font-size: 14px;
    }
    .icon-section a {
        text-decoration: none;
    }
    .icon-section img {
      width: 30px;
      height: 30px;
      margin-bottom: 0px;
    }

    /* Menu */

    .navbar {
        background: var(--primary-color);
        width: var(--margin);
        margin: -120px auto 40px auto; /* pulls it up into the yellow angled area */
        position: relative;
        z-index: 2;
        font-size: 20px;
    }
    .navbar ul,
    .navbar ul ul {
        list-style: none;
        margin: 0;
        padding: 0;
    }

    .navbar ul {
      display: flex;
      flex-wrap: wrap;
      list-style: none;
      z-index: 4;
    }
    .navbar li {
      position: relative;
      z-index: 4;
    }
    .navbar a {
      color: var(--secondary-color);
      text-decoration: none;
      padding: 15px 30px;
      display: block;
      font-weight: 600;
      transition: background-color 0.25s ease, color 0.25s ease, transform 0.2s ease;
    }
    .navbar a:hover {
      background-color: var(--secondary-color);
      color: var(--primary-color-light);
      transform: translateY(-1px);
    }
    .navbar li:hover > ul {
      display: block;
    }
    .navbar ul ul {
      display: none;
      position: absolute;
      background: var(--primary-color);
      top: 100%;
      left: 0;
    }
    .navbar ul ul li a {
        padding: 20px;
        min-width: 250px;
        transition: all 0.3s ease;
    }

    .navbar ul ul li a:hover {
        background-color: var(--secondary-color);
        color: var(--primary-color-light);
    }

    .catalog-wrapper {
        position: relative;
    }

    .catalog-wrapper .dropdown {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        background-color: var(--primary-color);
        z-index: 10;
        min-width: 200px;
    }

    .catalog-wrapper:hover .dropdown {
        display: block;
    }

    .catalog-wrapper input[type="checkbox"]:checked + label + .dropdown {
        display: block;
    }

    .catalog-wrapper label {
        display: block;
        cursor: pointer;
        padding: 15px 30px;
        font-weight: 600;
        color: var(--secondary-color);
        transition: background-color 0.25s ease, color 0.25s ease;
    }

    .catalog-wrapper input[type="checkbox"] {
        display: none;
    }

    .catalog-wrapper input[type="checkbox"]:checked + label {
        background-color: var(--secondary-color);
        color: var(--primary-color-light);
    }

    .catalog-wrapper:hover > label {
        background-color: var(--secondary-color);
        color: var(--primary-color-light);
    }

    /* Banner */

    .banner {
        position: relative;
        height: 450px;
        overflow: hidden;
        width: var(--margin);
        margin: auto;
        margin-bottom: var(--padding);
    }
    .banner-slide {
        position: absolute;
        width: 100%;
        height: 100%;
        background-size: cover;
        background-position: center;
        animation: fade 16s infinite;
    }

    .banner-slide:nth-child(2) {
        animation-delay: 8s;
    }

    @keyframes fade {
        0% { opacity: 1; }
        45% { opacity: 1; }
        50% { opacity: 0; }
        95% { opacity: 0; }
        100% { opacity: 1; }
    }

    .banner-overlay {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        color: white;
        text-align: center;
        background: rgba(0, 0, 0, 0.5);
        padding: 50px;
        border-radius: 8px;
    }

    .banner-overlay h2 {
        color: white;
        font-size: 30px;
    }

    .banner-overlay p {
        margin: 10px 0;
        color: white;
    }


    /* Slideshow */

    .slideshow-container {
        position: relative;
        width: 100%;
        height: 500px;
        overflow: hidden;
        margin: auto;
        margin-top: var(--padding);
    }

    .slides {
        display: flex;
        width: 200%;
        height: 100%;
        animation: slide 20s infinite alternate;
    }

    .slide {
        flex: 1;
        position: relative;
        display: flex;
        justify-content: left;
        align-items: center;
        color: white;
        font-size: 20px;
        font-weight: bold;
        text-align: center;
    }

    .slide img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        position: absolute;
        top: 0;
        left: 0;
        z-index: -1;
        filter: brightness(70%);
        transition: all 0.5s ease;
    }

    .slide:hover img {
        transform: scale(1.05);
        filter: brightness(60%);
    }

    .banner-logo {
        position: absolute;
        top: 10px;
        right: 235px;
        z-index: 2;
    }

    .banner-logo img {
        width: 220px;
        height: auto;
        filter: brightness(100%);
    }

    .slide-content {
        position: relative;
        z-index: 1;
        padding: 170px;
        max-width: 800px;
        color: var(--secondary-color);
        background-color: var(--primary-color);
        text-align: left;
        clip-path: polygon(0 0, 80% 0, 100% 100%, 0% 100%);
    }

    .slide-content h2 {
        color: var(--secondary-color);
    }

    .slide-content p {
        font-size: 16px;
        width: 80%;
        color: var(--secondary-color);
        font-weight: 400;
    }

    .slide button {
        font-family: var(--font), 'Times New Roman', sans-serif !important;
        color: var(--secondary-color);
        margin-top: 20px;
        padding: 10px 30px;
        border: none;
        cursor: pointer;
        font-size: 1rem;
        font-weight: bold;
        background-color: #00000000;
        border: 2px solid var(--secondary-color);
        transition: background-color 0.3s ease, color 0.3s ease, transform 0.2s ease;
    }

    .slide button:hover {
        color: var(--primary-color);
        cursor: pointer;
        background-color: var(--secondary-color);
        transform: scale(1.05);
    }

    @keyframes slide {
        0%, 40% { transform: translateX(0); }
        50.01%, 100% { transform: translateX(-50%); }
    }

    /* Main Section */


    .container {
        margin: 0 auto;
        text-align: left;
        width: var(--margin);
        border-top: 10px solid var(--primary-color);
        margin-top: 100px;
    }

    .flex-container {
        display: flex;
        margin-bottom: var(--padding);
        width: var(--margin);
        box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.195);
    }

    .vertical-line {
        width: 3px;
        background-color: var(--border-color);
    }

    .left-container {
        width: 50%;
        padding: 20px;
        box-sizing: border-box;
    }

    .right-container {
        width: 50%;
        padding: 40px;
        box-sizing: border-box;
    }

    .right-container h1 {
        font-size: x-large;
        font-weight: 800;
    }

    /* Latest Arrival */

    .latest-arrival {
        position: relative;
        width: 100%;
        max-width: 100%;
        height: 250px;
        overflow: hidden;
        margin-top: 50px;
    }

    .latest-arrival img {
        width: 100%;
        transition: all 0.3s ease-in-out;
        filter: brightness(70%);
    }

    .latest-arrival:hover img {
        transform: scale(1.05);
        filter: brightness(60%);
    }

    .latest-arrival-info {
        position: absolute;
        bottom: 20px;
        left: 10px;
        color: white;
        padding: 10px;
        border-radius: 5px;
    }

    .latest-arrival-info h2 {
        font-size: x-large;
        color: white;
        margin-bottom: 20px;
    }

    .latest-arrival-btn {
        font-family: var(--font), 'Times New Roman', sans-serif !important;
        color: white;
        margin-top: 30px;
        padding: 10px 30px;
        border: none;
        cursor: pointer;
        font-size: 1rem;
        font-weight: bold;
        background-color: #00000000;
        border: 1px solid white;
        transition: background-color 0.3s ease, color 0.3s ease, transform 0.2s ease;
        text-decoration: none;
    }

    .latest-arrival-btn:hover {
        color: rgb(0, 0, 0);
        cursor: pointer;
        background-color: #ffffff;
        transform: scale(1.05);
    }

    hr {
        margin: auto;
        width: 100%;
        border: none;
        height: 1px;
        background-color: var(--border-color);
        margin-top: 40px;
    }

    .description, .description p {
        padding: 20px;
        font-size: 20px;
        font-family: var(--font), sans-serif !important;
    }

    .description h2 {
        margin-bottom: 30px;
    }

    .x-item-description-child * {
        font-family: var(--font), sans-serif !important;
    }

    .x-item-description-child i {
        font-family: "Font Awesome 5 Free", "Font Awesome 6 Free" !important; 
    }

    .expandable-section ul {
        list-style-type: none;
        padding-left: 0; 
    }

    .expandable-section ul li {
        position: relative;
        padding-left: 20px; 
    }

    .expandable-section ul li::before {
        content: "";
        position: absolute;
        left: 0;
        top: 50%;
        width: 7px;
        height: 1px; 
        background-color: var(--secondary-color); 
        transform: translateY(-50%);
    }

    .expandable-section {
        margin: 20px;
    }

    .expandable-section input {
        display: none;
    }

    .expandable-section table {
        width: 100%;
    }

    .expandable-section label {
        color: var(--secondary-color);
        padding: 10px;
        display: block;
        cursor: pointer;
        user-select: none;
        position: relative;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .expandable-section label::after {
        content: "\f067"; /* fa-plus */
        font-family: "Font Awesome 5 Free", "Font Awesome 6 Free" !important; 
        font-weight: 900;
    }

    .expandable-section input:checked + label::after {
        content: "\f068"; /* fa-minus */
    }


    .expandable-content {
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.2s ease-out;
        border-top: none;
        padding: 0 10px;
    }

    .expandable-section input:checked ~ .expandable-content {
        max-height: 1200px;
        padding: 10px;
    }

    .right-container h2 {
        text-align: center;
        margin-top: -15px;
        font-weight: 600;
    }

    .container h2 {
        text-align: center;
    }

    .text-container {
        text-align: center;
        margin: 20px 0;
    }

    /* Split Container */

    .full-width-container {
        display: flex;
        width: var(--margin);
        height: 500px;
        margin: auto;   
        margin-top: var(--padding);
        margin-bottom: var(--padding);
    }

    .split-container {
        flex: 1;
        position: relative;
        overflow: hidden;
        display: flex;
        justify-content: center;
        align-items: center;
        text-align: center;
        color: white;
        margin-top: var(--padding);
        margin-bottom: var(--padding);
    }

    .split-container img {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: all 0.5s ease;
        filter: brightness(70%);
    }

    .split-container:hover img {
        transform: scale(1.1);
        filter: brightness(60%);
    }

    .content {
        position: relative;
        z-index: 2;
        padding: 20px;
        border-radius: 10px;
        
    }

    .content h2 {
        font-size: 28px;
        margin-bottom: 10px;
        color: white;
    }

    .content p {
        font-size: 18px;
        margin-bottom: 15px;
        color: white;
    }

    .content button {
        font-family: var(--font), 'Times New Roman', sans-serif !important;
        color: white;
        margin-top: 20px;
        padding: 10px 30px;
        border: none;
        cursor: pointer;
        font-size: 1rem;
        font-weight: bold;
        background-color: #00000000;
        border: 1px solid white;
        transition: background-color 0.3s ease, color 0.3s ease, transform 0.2s ease;
    }

    .content button:hover {
        color: rgb(0, 0, 0);
        cursor: pointer;
        background-color: #ffffff;
        transform: scale(1.05);
    }

    /* review section */

    .review-section {
        text-align: left;
        padding: 20px 40px;
        width: var(--margin);
        margin: auto;
        margin-top: var(--padding);
        margin-bottom: var(--padding);

    }

    .info-sections {
        text-align: left;
        display: flex;
        justify-content: center;
        margin: 10px 0;
    }

    .info-section {
        margin-top: 10px;
        display: flex;
        align-items: flex-start;
        width: 30%;
        padding: 10px;
    }

    .info-icon {
        width: 50px;
        height: 50px;
        margin-right: 10px;
        display: flex;
        justify-content: center;
        align-items: center;
        margin-top: -21px;
    }

    .info-content {
        display: flex;
        flex-direction: column;
        font-family: var(--font), 'Times New Roman', sans-serif !important;
    }

    .info-title {
        margin-bottom: 5px;
    }

    .info-description, .info-description i {
        font-size: 14px;
        color: var(--secondary-color-dark);
        font-family: var(--font), 'Times New Roman', sans-serif !important;
    }
    .circle-plus {
        width: 20px;
        height: 20px;
        background-color: #37a347;
        border-radius: 50%;
        position: relative;
        margin-top: 15px;
    }
    .circle-plus::before,
    .circle-plus::after {
        content: '';
        position: absolute;
        top: 50%;
        left: 50%;
        background-color: white;
    }

    .circle-plus::before {
        width: 60%;
        height: 2px;
        margin-left: -30%;
        margin-top: -1px;
    }

    .circle-plus::after {
        width: 2px;
        height: 60%;
        margin-left: -1px;
        margin-top: -30%;
    }

    .review-text {
        text-align: center;
        padding: 20px;
    }

    /* Marketting Points */

    .marketing-points {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 30px;
        background-color: #fff;
        font-weight: 400;
        width: var(--margin);
        margin: auto;
        margin-bottom: var(--padding);
    }

    .marketing-point {
        text-align: center;
        width: 100%;
    }

    .marketing-point:hover {
        cursor: default;
    }

    .marketing-point-icon {
        font-size: 40px;
        -webkit-animation-duration: 1s;
        animation-duration: 1s;
        -webkit-animation-fill-mode: both;
        animation-fill-mode: both;
        -webkit-animation-timing-function: ease-in-out;
        animation-timing-function: ease-in-out;
        animation-iteration-count: infinite;
        -webkit-animation-iteration-count: infinite;
    }

    .marketing-point-icon:hover {
        animation-name: bounce;
        -moz-animation-name: bounce;
    }

    @keyframes bounce {
        0%, 100%, 20%, 50%, 80% {
            -webkit-transform: translateY(0);
            -ms-transform:     translateY(0);
            transform:         translateY(0)
        }
        40% {
            -webkit-transform: translateY(-10px);
            -ms-transform:     translateY(-10px);
            transform:         translateY(-10px)
        }
        60% {
            -webkit-transform: translateY(-5px);
            -ms-transform:     translateY(-5px);
            transform:         translateY(-5px)
        }
    }

    /* Footer */

    footer {
        background: var(--secondary-color);
        color: white;
        padding: 20px 40px;
        width: 100%;
    }

    footer .container {
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: var(--margin);
        margin: 0 auto;
        border: none;
    }

    .footer-section {
        flex: 1;
        display: flex;
        align-items: center;
        margin-top: 30px;
    }

    .footer-section.left {
        justify-content: flex-start;
    }

    .footer-section.center {
        justify-content: center;
        text-align: center;
    }

    .footer-section.right {
        justify-content: flex-end;
    }

    .footer-logo {
        width: 150px;
        height: 100px;
        background-image: url('https://dehhani.uk/media/uploads/37/1758584439689.png'); /* Logo Dark */
        background-repeat: no-repeat;
        background-size: contain;
    }

    .footer-section p {
        font-size: 0.8rem;
        color: white;
    }

    footer nav {
        display: flex;
        gap: 20px;
    }

    footer nav a {
        text-decoration: none;
        color: white;
        font-size: 0.8rem;
        transition: color 0.3s;
    }

    footer nav a:hover {
        color: #dfdfdf;
    }

    footer .watermark {
        margin-top: 80px;
        text-align: center;
    }

    footer .watermark img {
        height: 35px;
    }

    .handdrawn-underline {
        position: relative;
        display: inline-block;
        color: inherit;
    }

    /* Underline */

    .handdrawn-underline::after {
        content: '';
        position: absolute;
        left: 0;
        bottom: -15px;
        width: 100%;
        height: 25px;
        margin: auto;
        background: url("data:image/svg+xml;utf8,<svg viewBox='0 0 100 6' xmlns='http://www.w3.org/2000/svg'><path d='M0 3 Q 25 6, 50 3 T 100 3' fill='none' stroke='%23F5C842' stroke-width='2'/></svg>") repeat-x;
        background-size: contain;
        pointer-events: none;
    }

    .handdrawn-squiggle {
        position: relative;
        display: inline-block;
        color: inherit;
    }

    .handdrawn-squiggle::after {
        content: '';
        position: absolute;
        bottom: -10px;
        left: 0;
        width: 100%;
        height: 25px;
        background: url("data:image/svg+xml;utf8,<svg viewBox='0 0 300 25' xmlns='http://www.w3.org/2000/svg'><path d='M5 20 Q 25 5, 45 20 T 85 20 T 125 20 T 165 20 T 205 20 T 245 20 T 295 20' fill='none' stroke='%23F5C842' stroke-width='5' stroke-linecap='round'/></svg>") no-repeat;
        background-size: 100% 100%;
        pointer-events: none;
    }

    /* Brands Section */

    .angled-brand-section {
        background-color: var(--primary-color-light);
        clip-path: polygon(0 5%, 100% 0, 100% 95%, 0% 100%);
        padding: 80px 0;
        margin-top: var(--padding);
        margin-bottom: var(--padding);
    }

    .brand-section {
        text-align: center;
        margin-top: var(--padding);
        margin-bottom: var(--padding);
        width: var(--margin);
        margin: auto;
    }

    .brand-section h2 {
        font-size: 32px;
    }

    .brand-section-title {
        font-size: 24px;
        margin-bottom: 40px;
    }

    .brands {
        display: flex;
        justify-content: center;
        gap: 70px;
        margin-top: 40px;
    }

    .brand-logo {
        width: 140px;
        height: auto;
        transition: opacity 0.3s ease, transform 0.3s ease;
    }

    .brand-logo:hover {
        opacity: 1;
        cursor: pointer;
        transform:scale(1.1);
    }


    /* Tabbed Section */

    .opening_times ul li {
        list-style: none;
    }

    .tabbed {
        overflow-x: hidden;
        padding-bottom: 16px;
        margin: auto;
        margin-bottom: var(--padding);
        width: var(--margin);
        border-top: 10px solid var(--primary-color);
        box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.195);
    }

    .tabbed [type="radio"] {
        display: none;
    }

    .tabs {
        display: flex;
        align-items: stretch;
        list-style: none;
        padding: 20px;
        
    }
    .tab > label {
        display: block;
        padding: 12px 20px;
        font-size: 16px; 
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 1px;
        cursor: pointer;	
        transition: all 0.3s;
        border-bottom: 2px solid var(--border-color);
    }
    .tab:hover label {
        color: var(--secondary-color);
        border-bottom: 2px solid var(--primary-color);
    }

    .tab-content {
        text-align: left;
        display: none;
        background: #fff;
        padding: 40px 40px;
    }

    .tab-content i {
        font-family: var(--font), sans-serif !important;
    }

    .tab-content button:hover {
        background-color: #1e49b7;
    }

    .tabbed [type="radio"]:nth-of-type(1):checked ~ .tabs .tab:nth-of-type(1) label,
    .tabbed [type="radio"]:nth-of-type(2):checked ~ .tabs .tab:nth-of-type(2) label,
    .tabbed [type="radio"]:nth-of-type(3):checked ~ .tabs .tab:nth-of-type(3) label,
    .tabbed [type="radio"]:nth-of-type(4):checked ~ .tabs .tab:nth-of-type(4) label,
    .tabbed [type="radio"]:nth-of-type(5):checked ~ .tabs .tab:nth-of-type(5) label {
        color: var(--secondary-color);
        border-bottom: 4px solid var(--primary-color);
        transform: translateY(-5px);
    }

    .tabbed [type="radio"]:nth-of-type(1):checked ~ .tab-content:nth-of-type(1),
    .tabbed [type="radio"]:nth-of-type(2):checked ~ .tab-content:nth-of-type(2),
    .tabbed [type="radio"]:nth-of-type(3):checked ~ .tab-content:nth-of-type(3),
    .tabbed [type="radio"]:nth-of-type(4):checked ~ .tab-content:nth-of-type(4),
    .tabbed [type="radio"]:nth-of-type(5):checked ~ .tab-content:nth-of-type(5) {
        display: block;
    }


    /* Category Section */

    .category-section {
        text-align: center;
        margin-top: var(--padding);
        margin-bottom: var(--padding);
        width: 80%;
        margin: auto;
    }

    .category-section-title {
        font-size: 24px;
        margin-bottom: 40px;
    }

    .categories {
        display: flex;
        justify-content: center;
        gap: 30px;
        margin-top: 40px;
    }

    .category-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .category-label {
        margin-top: 10px;
        font-size: 24px;
        font-weight: 500;
        color: var(--secondary-color);
    }

    .category-img {
        width: 220px;
        height: auto;
        opacity: 0.9;
        transition: opacity 0.3s ease, transform 0.3s ease;
    }

    .category-img:hover {
        opacity: 1;
        cursor: pointer;
        transform:scale(1.1);
    }

    /* Contact us */

    .angled-top-section {
        background-color: var(--primary-color);
        padding: 80px 20px;
        position: relative;
        clip-path: polygon(0 100px, 100% 0, 100% 100%, 0% 100%);
    }

    .angled-content {
        width: var(--margin);
        margin: auto;
        text-align: center;
        margin-top: 50px;
    }

    .angled-content h2 {
        font-size: 32px;
        font-weight: bold;
        margin-bottom: 15px;
        color: var(--secondary-color);
    }

    .angled-content p {
        font-size: 18px;
        margin-bottom: 25px;
        color: var(--secondary-color);
    }


    .btn-light {
        background-color: var(--primary-color);
        color: var(--secondary-color);
        padding: 10px 25px;
        border: none;
        cursor: pointer;
        font-weight: bold;
        transition: all 0.3s ease;
    }

    .btn-light:hover {
        background-color: var(--primary-color-dark);
        transform: scale(1.05);
    }

    .btn-dark {
        background-color: var(--secondary-color);
        color: white;
        padding: 10px 25px;
        border: none;
        cursor: pointer;
        font-weight: bold;
        transition: all 0.3s ease;
    }

    .btn-dark:hover {
        background-color: var(--secondary-color-dark);
        transform: scale(1.05);
    }

    /* Mobile Formatting */

    @media screen and (max-width: 768px) {
        :root {
            --margin: 100%;
        }

        .header {
            padding: 15px 15px;
            flex-direction: column;
            align-items: center;
            justify-content: center;
        }
        .header .logo {
            width: 120px;
        }

        .header img.logo {
            max-height: 60px;
        }
        .icons {
            display: flex;
            gap: 15px;
            justify-content: center;
            align-items: center;
            margin-top: 10px;
        }
        .icon-section {
            text-align: center;
            font-size: 14px;
        }
        .icon-section a {
            text-decoration: none;
        }
        .icon-section img {
            width: 20px;
            height: 20px;
        }

        .hide-mobile {
            display: none;
        }

        .navbar {
             margin: -120px auto 30px auto;
             font-size: 18px;
             width: 100%;
        }

        .navbar ul {
            justify-content: center;
        }

        .navbar a {
            padding: 12px 10px;
            text-align: center;
        }

        .catalog-wrapper label {
            padding: 12px 10px;
            text-align: center;
        }

        .marketing-points {
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 20px;
        }

        .marketing-point {
            text-align: center;
            width: 100%;
            font-size: 14px;
        }

        .marketing-point:hover {
            cursor: default;
        }

        .marketing-point-icon {
            font-size: 30px;
        }

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

        .vertical-line {
            display: none;
        }

        .left-container,
        .right-container {
            width: 100%;
            padding: 20px;
            text-align: center;
        }

        .description, .description p {
            padding: 10px;
        }

        .tabs {
            display: flex;
            list-style: none;
            padding: 10px;
        }
        .tab > label {
            padding: 15px 12px;
            font-size: 13px; 
            letter-spacing: 0.4px;
        }

        .tab-content {
            padding: 20px 20px;
        }

        .slideshow-container {
            width: var(--margin);
            height: 250px;
        }


        .slide {
            justify-content: center;
            align-items: center;
        }

        .slide-content {
            padding: 50px 20px;
            max-width: 600px;
            clip-path: none;
            background-color: #00000000;
            text-align: center;
        }

        .slide-content h2 {
            color: white;
        }

        .slide-content p {
            font-size: 16px;
            width: 80%;
            color: white;
            font-weight: 400;
            margin: auto;
        }

        .slide button {
            color: white;
            background-color: #00000000;
            border: 2px solid white;
        }

        .slide button:hover {
            color: white;
            border: 2px solid rgb(0, 0, 0);
            background-color: black;
        }

        .angled-brand-section {
            padding: 100px 20px;
        }

        .brand-section {
            width: 100%;
            padding: 0 20px;
        }

        .brands {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 20px 70px;
            justify-items: center;
            margin-top: 40px;
padding: 10px;
        }

	.brand-logo {
        width: 120px;
    }

        .categories {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
            gap: 30px 30px;
            justify-items: center;
            margin-top: 40px;
        }

         .category-img {
            width: 200px;
        }

        .angled-content p {
            font-size: 14px;
        }

        footer .container {
            flex-direction: column;
            align-items: center;
            width: 100%;
        }

        .footer-section {
            justify-content: center;
            text-align: center;
            margin-top: 8px;
        }

        .footer-logo {
            width: 110px;
        }

        .footer-section.right nav {
            flex-direction: column;
            align-items: center;
            gap: 4px;
        }

        .review-section {
            text-align: center;
            padding: 20px 10px;
            width: var(--margin);
            margin: auto;
            margin-top: var(--padding);
            margin-bottom: var(--padding);
        }

        .review-section h1 {
            font-size: 24px;
        }

        .info-sections {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 20px;
            margin: 20px 0;
        }

        .info-section {
            display: flex;
            align-items: flex-start;
            width: 100%;
            max-width: 600px;
            padding: 10px;
            box-sizing: border-box;
            text-align: left;
        }

        
    }