* {
    margin: 0; /*Set margin to 0*/
    padding: 0;/*Set padding to 0*/
    box-sizing: border-box;/*Include padding and border in elements width/height*/
    }
    /**/
    body {
    font-family: 'Montserrat', sans-serif;    /*Sets font to Montserrat and sans-serif as a fallback*/
    background: linear-gradient(to left, #1f1f1f, #262626);    /*Background goes from dark to ligh grey*/
    color: #f2f2f2;    /*Text colour as light grey*/
    overflow-x: hidden;     /*Prevent horizontal scrolling*/
    }
    header {
    background: rgba(0, 0, 0, 0.88);/*Black background with around 88% opacity*/
    padding: 23px;/*Adds padding inside header*/
    text-align: center;/*Text within header aligned to centre*/
    position: relative;
    z-index: 999;/*Ensure header appears above most other elements*/
    box-shadow: 0 3px 9px rgba(0, 0, 0, 0.35);/*Add subtle shadow below header*/
    }
    header .o {
    font-size: 2.6rem;/*Set font size of element*/
    font-weight: bold;/*Makes text bold*/
    color: transparent;/*Text colour transparent*/
    background: linear-gradient(to right, #ffa100, #ff9000);/*Yellow to orange background*/
    -webkit-background-clip: text;/*Apply background gradient to text*/
    }
    nav {
    display: flex;/*Layout for the text*/
    justify-content: center;/*Centre items horizontallu*/
    padding: 10px;/*Adds padding inside navigation*/
    gap: 15px;/*Adds gap inside navigation*/
    }
    nav a {
        position: relative;
        color: #dadada;
        font-size: 1.3rem;
        text-transform: uppercase;
        font-weight: 590;
        text-decoration: none;
        padding: 9px 21px;
        border-radius: 9px;
        overflow: hidden;
        transition: color 0.4s ease;
        background: rgba(254, 255, 255, 0.2);
        box-shadow: 0 4px 8px rgba(0, 2, 0, 0.2);
        display: inline-block; 
        width: auto; 
        height: auto;
        line-height: normal;
        white-space: nowrap; 
    }
    
    nav a::before {
    content: "";
    position: absolute;/*position relative to parent anchor*/
    top: 0;/*Pseudo element at top*/
    left: -100%;/*Starting at left edge*/
    width: 100%;/*Set to cover entire anchor*/
    height: 100%;/*Cover the entire anchor*/
    background: linear-gradient(120deg, #ff7700, #ff9000, #ff7700);/*Orange to yellow background*/
    transition: left 0.3s ease;/*Transition left position*/
    }
    nav a:hover::before {
    left: 0; /*On hover cover the anchor tag*/
    }
    nav a:hover {
    color: #fff; /*On hover use white colour*/
    }
    nav a::before {
    border-radius: 9px; /*Apply rounded corners*/
    z-index: -1;/*Behind anchor text*/
    }
    .hero {
    height: 78vh;/*Height to 78% of viewport height*/
    display: flex;/*Flexbox layout*/
    align-items: center;/*Vertically centre content*/
    justify-content: center;/*Horizontally centre content*/
    text-align: center;/*Centre text*/
    position: relative;/*Set position to relative*/
    }
    .hero::before {
    content: "";
    position: absolute;/*Position absoloutley relative to parent */
    top: 0;/*position at top*/
    left: 0;/*position at left*/
    width: 100%; /*Cover entire section*/
    height: 100%;/*Cover entire section*/
    background: rgba(2, 0, 3, 0.4);/*Apply semi-transparent backgronud*/
    }
    .hero-content {
    color: #fff;/*Text colour to white*/
    z-index: 1;/*Ensure content is displayed above others*/
    }
    .hero h2 {
    font-size: 5rem; /*Font size set to 5*/
    font-weight: 890; /*Font weight*/
    text-transform: uppercase; /*Text to uppercase*/
    color: #ff7700;/*Orange colour*/
    }
    .hero p {
    font-size: 1.3rem; /*Font size*/
    margin-top: 22px; /*Apply top margin*/
    }
    .cta {
    display: inline-block;
    padding: 13px 28px;/*Add 13px padding to top and bottom and 28px to left and right*/
    margin-top: 22px;/*Top margin*/
    background: linear-gradient(to right, #ff5a00, #ff7700);/*Linear gradient background from orange to yellowish*/
    color: #fff;/*Text to white*/
    border-radius: 23px;/*Round corners of button*/
    text-decoration: none;
    transition: background 0.4s ease, transform 0.3s ease; /*Transition for background and transform properties*/
    }
    .cta:hover {
    background: linear-gradient(to right, #ff7247, #ff9000); /*On hover change colour*/
    transform: scale(1.00); /*On reset no scaling effect*/
    }
    .featured-products {
    padding: 58px 22px;/*58 padding to top and bottom and 22 to left and right*/
    text-align: center;/*Align text to centre*/
    background-color: #1e1e1e;/*Background colour to a darker gret*/
    }
    .featured-products h2 {
    font-size: 2.3rem; /*Font size*/
    font-weight: 710;/*Font weight*/
    margin-bottom: 38px;/*Add bottom margin to element*/
    color: #ff9000;/*Text to orange*/
    }
    .products {
    display: flex;/*Flexbox layout*/
    flex-wrap: wrap; /*Allow for wrapping to next line*/
    gap: 40px;/*Space between each product*/
    justify-content: center;/*Centre items horizontally*/
    }
    .product {
    background-color: rgba(253, 255, 254, 0.2); /*Semi-transparent background with 20% opacity*/
    backdrop-filter: blur(11px); /*Blur effect on background behind product*/
    padding: 21px;/*Padding inside container*/
    width: 301px;/*set width of product container*/
    border-radius: 14px;/*round corners*/
    box-shadow: 0 5px 14px rgba(0, 0, 2, 0.4); /*Shadow below product*/
    transition: transform 0.4s ease, box-shadow 0.3s ease;/*Transform, transition and box-shadow on hover*/
    }
    .product:hover {
    transform: translateY(-11px); /*On hover move product up by 11px*/
    box-shadow: 0 8px 20px rgba(253, 164, 0, 0.3);/*On hover create shadow with orange light*/
    }
    .product img {
    width: 100%;/*fill container*/
    border-radius: 11px;/*round corners*/
    margin-bottom: 14px;/*add bottom margin to create space below picture for light*/
    transition: transform 0.4s ease;
    }
    .product img:hover {
    transform: scale(1.03); /*On hover make the product 103% original size*/
    }
    .product h3 {
    font-size: 1.6rem; /*Font size of product title*/
    color: #f2f2f2;/*Text colour to grey*/
    }
    
    .nav-item {
        background: transparent !important;
        box-shadow: none !important;
    }
    
    .product p {
    color: #cfcfcf; /*Text colour for description*/
    font-size: 1.1rem;/*Font size */
    margin-top: 11px;/*Add top margin*/
    }
    .price {
    display: block; /*Price as block level element*/
    margin-top: 11px;/*Apply top margin, create space above price*/
    color: #ff9000;/*Text colour of price*/
    font-size: 1.3rem;/*Font size*/
    }
    footer {
    background: #111;/*Background colour to grey*/
    padding: 28px;/*apply padding*/
    color: #888; /*Text colour to light grey*/
    text-align: center;/*Align text to centre*/
    }
    footer a {
    color: #888;/*Text colour to light grey*/
    text-decoration: none;
    }
    footer a:hover {
    color: #ff7700;/*On hover change colour of footer links to orange*/
    }
    @media (max-width: 767px) {
    .hero h2 {
    font-size: 2.4rem;/*For screens <767px wide, set font size to 2.4*/
    }
    .products {
    flex-direction: column;/*Stacking items vertically*/
    }
    }
    .about {
        padding: 60px 20px; /*60 padding top and bottom and 20 for left and right*/
        text-align: center;/*Align text to centre*/
        background: linear-gradient(to right, #1f1f1f, #262626);/*Linear gradient backgronud from dark to light grey*/
        color: #f2f2f2;/*Text colour to grey*/
        }
        .about-content {
        max-width: 800px;/*max width of about content*/
        margin: 0 auto;/*centre content horizontally with auto margin*/
        padding: 20px;/*Add padding*/
        background: rgba(255, 255, 255, 0.2); /*Semi transparent white background with 20% opacity.*/
        border-radius: 15px;/*Round corners*/
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4);/*Add shadow below content*/
        }
        .about h2 {
        font-size: 2.4rem; /*Font size*/
        font-weight: bold; /*Bold text*/
        color: #ffa500;/*Colour to orange*/
        margin-bottom: 20px;/*Apply bottom margin for space below element*/
        }
        .about p {
        font-size: 1.3rem; /*Font size*/
        line-height: 1.5; /*Line height for readability*/
        color: #dadada;/*Colour to grey*/
        margin-bottom: 20px;/*Add bottom margin to create space below element*/
        }
        .about-content p:last-of-type {
        margin-bottom: 0;
        }
        .contact {
        padding: 60px 20px; /*Add 60 padding to top and bottom and 20 to left and right*/
        text-align: center;/*Align text to centre*/
        background: linear-gradient(to right, #1f1f1f, #262626);/* Linear gradient background from dark to light grey*/
        color: #f2f2f2;/*Text colour to grey*/
        }
        .contact-content {
        max-width: 800px; /*Max width of contact content*/
        margin: 0 auto; /*Centre content horizontally with auto margin*/
        padding: 20px; /*Add padding*/
        background: rgba(253, 254, 255, 0.1); /* Light backgrounnd with 10% opacity*/
        border-radius: 15px; /*Round corners*/
        box-shadow: 0 4px 15px rgba(3, 2, 1, 0.3);/*Shadow below content*/
        }
        .contact h2 {
        font-size: 2.4rem; /*Font size*/
        font-weight: bold; /*Bold text*/
        color: #ffa500; /*Text clour*/
        margin-bottom: 20px; /*Apply bottom margin to create space below element*/
        }
        .contact p {
        font-size: 1.3rem; /*Font size*/
        color: #ddd; /*Colour of text*/
        margin-bottom: 30px; /*Add bottom margin to create space below element*/
        }
        .contact-form {
        display: flex; /*Flexbox layout for contact form*/
        flex-direction: column; /*Set direction to column, vertical stacking*/
        gap: 20px; /*Gap between each form element*/
        }
        .contact-form label {
        font-size: 1.1rem; /*Font size*/
        color: #adadad; /*Text colour*/
        }
        .contact-form input,.contact-form textarea {
        width: 100%; /*Fill available space*/
        padding: 12px; /*Add padding*/
        border: 1px solid #525252; /*Border with 1px solid line and grey coloyur*/
        border-radius: 5px; /*Round corners*/
        background: #303030; /*Dark background colour for input areas*/
        color: #f2f2f2;/*Colour inside text area to light grey*/
        font-size: 1.1rem; /*Font size*/
        }
        .contact-form input:focus,.contact-form textarea:focus {
        border-color: #ffa500; /*border colour to orange when focused*/
        outline: none;
        }
        .submit-btn {
        padding: 12px; /*Add padding inside submit button*/
        background: linear-gradient(to right, #ffa500, #ff8c00);/*Background from orange to darker orange*/
        color: #fff;/*White text inside button*/
        font-weight: bold; /*Bold text*/
        border: none;
        border-radius: 25px; /*Round corners of button*/
        cursor: pointer; /*Cursor changed to pointer to indicate clickable button*/
        transition: background 0.3s ease; /*Transition background colour*/
        }
        .submit-btn:hover {
        background: linear-gradient(to right, #ff7f50, #ff6347); /*On hover submit button colour will change to different gradient*/
        }
        .auth-form {
        padding: 60px 20px; /*60 padding to top and bottom and 20 for left and right*/
        background: #161616; /*Dark background colour*/
        color: #f2f2f2;/*Text to light colour*/
        text-align: center; /*Align text to centre*/
        }
        .auth-form-content {
        max-width: 500px; /*max width */
        margin: 0 auto; /*centre form horizontally with auto margins*/
        background: rgba(254, 253, 254, 0.1); /*Semi transparent background with 10% opacity*/
        padding: 30px; /* Add padding*/
        border-radius: 15px; /*Round corners*/
        box-shadow: 0 4px 15px rgba(3, 2, 1, 0.3); /*add shadow below*/
        }
        .auth-form h2 {
        font-size: 2.4rem; /*Font size*/
        font-weight: 690; /*Font weight*/
        margin-bottom: 20px; /*Bottom margin added to create space below element*/
        color: #f1c40f; /*Text colout*/
        }
        .auth-form input {
        width: 100%; /*width of input to fill container*/
        padding: 12px; /*add padding*/
        border-radius: 5px; /*round corners*/
        margin-bottom: 20px; /*add bottom margin to create space below*/
        background: #303030; /*background colour of input to grey*/
        border: 1px solid #525252; /* border with 1px solid line in grey colour*/
        color: #f2f2f2;/*Text colour inside input*/
        }
        .auth-form input[type=checkbox] {
        width: auto;
        padding: 12px; /*add padding*/
        border-radius: 5px; /*round corners*/
        margin-bottom: 20px; /*add bottom margin to create space below*/
        background: #303030; /*background colour of input to grey*/
        border: 1px solid #525252; /* border with 1px solid line in grey colour*/
        color: #f2f2f2;/*Text colour inside input*/
        }
        .auth-form button {
        padding: 12px; /*Padding for spaces*/
        background: linear-gradient(to right, #f39c12, #f1c40f); /*Background from orange to yellow*/
        color: #fff;/*Text colour*/
        font-weight: bold; /*Bold text*/
        }
        nav a.active {
        color: #ffa500; /*Text colour to orange*/
        background: rgba(254, 164, 1, 0.15); /*Background with light orange shade*/
        }
        .auth-buttons {
        margin-left: auto; /*Align buttons to right*/
        display: flex; /*Flexbox layout*/
        gap: 15px; /* Gap between each button*/
        }
        nav {
        display: flex; /*Flexbox layout*/
        justify-content: center; /*Centre navigation items horizontally*/
        padding: 10px; /*Add padding*/
        gap: 15px; /*Gap between each navigation item*/
        align-items: center;/*Vertically align items in centre*/
        }
        header {
        background: rgba(1, 1, 0, 0.85); /*Background with 85% opacity*/
        padding: 20px; /*Add padding inside header*/
        top: 0;/*Position header at top*/
        z-index: 1000; /*Ensure header stays at top*/
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);/*Shadow below header*/
        display: flex; /*flexbox layout*/
        justify-content: space-between; /*space items within header pushing them to edges*/
        align-items: center;/*Align items to centre of header*/
        }
        header .logo {
        width: 120px;
        height: 100px;
        object-fit: cover; /* nsures the image fills the space around */
        }
        nav {
        display: flex; /*Flexbox layout*/
        justify-content: flex-end; /*Align navigation items to right*/
        gap: 20px;/*Gap between each item*/
        margin-right: 120px; /*Margin to right of navigation */
        align-items: center;/*Vertically align items to centre*/
        }
        a:link {
            text-decoration: none;
        }
        a:visited {
            text-decoration: none;
        }
        a:hover {
            text-decoration: none;
        }
        a:active {
            text-decoration: none;
        }
        nav a {
            position: relative;
            color: #ddd; /* Text colour */
            font-size: 1.2rem; /* Font size */
            text-transform: uppercase; /* Into uppercase */
            font-weight: 600; /* Font weight */
            text-decoration: none;
            padding: 10px 20px; /* 10 padding to top and bottom and 20 to left and right */
            border-radius: 10px; /* Round corners */
            overflow: hidden; /* Hide overflow content */
            transition: color 0.3s ease, background 0.3s ease; /* Transition for color and background */
            background: rgba(255, 255, 255, 0.1); /* Background with 10% opacity */
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Shadow around link */
        }
        
        nav a:hover {
            color: #fff; /* White text colour when hovered */
            background: rgba(255, 255, 255, 0.2); /* Slightly darker background on hover */
        }
        
        nav a.active {
            color: #ffa500; /* Text colour to orange */
            background: rgba(254, 164, 1, 0.15); /* Background with light orange shade */
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3); /* Slightly stronger shadow for active state */
        }
        .auth-buttons {
        display: flex; /*flexbox layput*/
        gap: 10px;/*gap between each button*/
        align-items: center;/*vertically align buttons in centre*/
        margin-top: -25px; /*pull buttons upwards with negative margi*/
        }
        .auth-btn {
        color: #fff; /*white text colour*/
        font-size: 1.2rem;/*font size*/
        font-weight: bold;/*font weight*/
        text-decoration: none;
        background: linear-gradient(to right, #ff4500, #ff8c00); /*background from red to orange*/
        padding: 12px 25px; /*12 padding to top and bottom and 25 to left and right*/
        border-radius: 30px;/*round corners*/
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /*add shadow around button*/
        transition: background 0.3s ease, transform 0.3s ease; /*transition for background and trasnformation changes*/
        }
        .auth-btn:hover {
        background: linear-gradient(to right, #ff6347, #ffa500);
        transform: scale(1.05); /*scale button to 105% of original size when hovered*/
        }
        nav a, .auth-btn {
        line-height: 1; /*ensure tight vertical alignment*/
        }
        .basket {
        position: relative; /*basket relative to normal position*/
        margin-left: 20px; /* margin to left*/
        }
        .basket a {
        display: flex;/*flexbox layout*/
        align-items: center;/*align items to centre*/
        color: #fff;/*text colour to white*/
        text-decoration: none;
        }
        .basket img {
        width: 100px; /*imaged width*/
        height: 100px; /*image height*/
        transition: transform 0.3s ease; /*apply transform transition*/
        }
        .basket img:hover {
        transform: scale(1.1); /*image size to 110% original on hover*/
        }
        .cart-count {
        position: absolute;
        top: -5px; /*position above its container*/
        right: -5px; /*position 5 to right of its container*/
        background-color: #ff4500; /*background colour to red*/
        color: #fff; /*white text colour*/
        font-size: 1rem; /*font size*/
        font-weight: bold;/*font weight*/
        padding: 5px 10px; /*5 padding to top and bottom and 10 to left and right*/
        border-radius: 50%;/*round corners*/
        text-align: center;/*align text to centre*/
        min-width: 20px; /*minimum width*/
        min-height: 20px;/*minimum height*/
        line-height: 1; /*adjust line height for proper centring*/
        }
        /* Help Section page */

        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
            background: linear-gradient(to left, #1f1f1f, #262626);
            color: #fff;
        }

        /* Help Section */
        .help {
            text-align: center;
            padding: 50px 20px;
            line-height: 1.6;
        }

        /* Container */
        .container {
            max-width: 1000px;
            margin: 0 auto;
        }

        /* Diamond Layout */
        .diamond-layout {
            display: grid;
            grid-template-columns: 1fr 1fr;
            grid-template-rows: auto auto;
            gap: 39px;
            justify-items: center;
            align-items: center;
            position: relative;
        }

        /* adjust the box separation and sizes */
        #account-box,
        #shipping-box {
            transform: translateY(30px);
            transition: transform 0.3s ease, box-shadow 0.3s ease; /* Smooth transition effect fr hoverings*/
        }

        #account-box:hover,
        #shipping-box:hover {
            transform: translateY(11px);
            box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
        }

        /* refunds section only moves when hovered over ike rest */
        #returns-box {
            grid-column: span 2;
            grid-row: 2;
            transition: transform 0.3s ease, box-shadow 0.3s ease;
        }

        #returns-box:hover {
            transform: translateY(-9px); /* adjust move box sizing */
            box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
        }

        /* change the color of the heading */
        .help h2 {
            color: #ffa500; /* sets the color to orange to meet style for other pages */
        }

        /* Topic Box Styling */
        .topic-box {
            background: rgba(253, 254, 255, 0.1);
            border-radius: 15px;
            box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2);
            padding: 30px;
            text-align: center;
            width: 350px;
            height: 250px;
            transition: transform 0.3s ease, box-shadow 0.3s ease;
            color: #fff !important;
            list-style-type: none;
        }

        /* ensure links inside topic box are white */
        .topic-box a {
            color: #fff !important;
            text-decoration: underline;
        }

        .topic-box a:hover {
            color: #fff !important;
            text-decoration: wavy underline;
        }

        /* contact Us Section */
        .contact-us {
            text-align: center;
            margin-top: 50px;
            padding: 20px;
        }

        .contact-link {
            color: #007bff;
            text-decoration: none;
            font-weight: bold;
        }

        .contact-link:hover {
            text-decoration: underline;
        }

        /* Hidden Content */
        .hidden {
            display: none;
        }


        /* help query page */


        /* General Styles */
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
            background: linear-gradient(to left, #1f1f1f, #262626);
            color: #fff;
            display: flex;
            flex-direction: column;
            min-height: 100vh;
        }

        /* container */
        .container {
            max-width: 1000px;
            margin: 0 auto;
            padding: 20px;
            flex: 1; /* allows the container to grow and push the footer to the bottom of psge*/
        }

        /* Help Section */
        .help {
            text-align: center;
            padding: 50px 20px;
            line-height: 1.6;
        }

        .help h2 {
            color: #ffa500; /* Orange color for headings */
            font-size: 2rem;
            margin-bottom: 20px;
        }

        .help p {
            font-size: 1.1rem;
            color: #ddd;
            max-width: 800px;
            margin: 0 auto;
        }

        /* Contact Us Section */
        .contact-us {
            text-align: center;
            padding: 20px;

            border-radius: 10px;
            margin-top: auto; /* Push the Contact Us section to the bottom */
        }

        .contact-us h3 {
            color: #ffa500;
            font-size: 1.5rem;
            margin-bottom: 10px;
        }

        .contact-link {
            color: #007bff;
            text-decoration: none;
            font-weight: bold;
        }

        .contact-link:hover {
            text-decoration: underline;
        }

        /* footer Positioning */
        footer {
            text-align: center;
            padding: 20px 0;
        }

        /* Responsive Design */
        @media (max-width: 768px) {
            .help h2 {
                font-size: 1.5rem;
            }

            .help p {
                font-size: 1rem;
            }

            .contact-us h3 {
                font-size: 1.2rem;
            }
        }
        /* policy Page css mannnn */
        .policy {
            padding: 50px 20px;
            line-height: 1.6;
            text-align: center;
            color: #fff; /* colour white for texttx */
        }

        .policy .container {
            max-width: 800px;
            margin: 0 auto;
            text-align: center; /* center-align all paras */
        }

        /* yellow headings */
        .policy h1, .policy h2, .policy h3 {
            color: #ffcc00;
            margin-bottom: 20px;
            text-align: center; /* center-align for headings too */
        }

        .policy h1 { font-size: 2rem; }
        .policy h2 { font-size: 1.5rem; margin-top: 30px; }
        .policy h3 { font-size: 1.3rem; margin-top: 20px; }

        /* text and list styling for pagee */
        .policy p, .policy ul {
            font-size: 0.9rem;
            margin-bottom: 20px;
            text-align: center; /* Center-align paragraphs and lists */
        }

        .policy ul {
            padding: 0;
            display: inline-block; /* Keep list centered */
            text-align: left; /* align list items wit the centered block */
        }

        /* links */
        .policy a {
            color: #007bff;
            text-decoration: none;
        }

        .policy a:hover {
            text-decoration: underline;
        }

        /* sections */
        .policy .rights, .policy .security {
            background: #1f1f1f;
            border-radius: 8px;
            padding: 25px;
            margin: 30px auto;
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5);
            max-width: 800px; /* kkeep sections aligned with the container */
        }
        /* policy pges */
        .policy {
            padding: 50px 20px;
            line-height: 1.6;
            text-align: center; /* ceter-align all text */
        }

        .policy .container {
            max-width: 800px; /*naower container for better readability */
            margin: 0 auto;
        }

        .policy h1 {
            color: #ffa500; /*ornge color for the main heading */
            font-size: 2rem; /* Smaller font size */
            margin-bottom: 20px;
        }

        .policy h2 {
            color: #ffa500; /* ornge color for subheadings */
            font-size: 1.5rem; /* Smaller font size */
            margin-top: 30px;
            margin-bottom: 15px;
        }

        .policy h3 {
            color: #ffa500; /* ornge color for sub-subheadings */
            font-size: 1.3rem; /* Smaller font size */
            margin-top: 20px;
            margin-bottom: 10px;
        }

        .policy p {
            font-size: 0.9rem; /* saller font size */
            color: #ddd;
            margin-bottom: 20px;
        }

        .policy ul {
            margin-bottom: 20px;
            padding-left: 20px;
            list-style-position: inside; /* aign bullet points with centered text */
            text-align: left; /* lft-align list items */
            display: inline-block; /* cnter the list itself */
        }

        .policy ul li {
            font-size: 0.9rem; /*smaller font size */
            color: #ddd;
            margin-bottom: 10px;
        }

        .policy a {
            color: #007bff;
            text-decoration: none;
        }

        .policy a:hover {
            text-decoration: underline;
        }


        /* Responsive adjustments */
        @media screen and (max-width: 768px) {
            .policy .container {
                padding: 0 15px;
            }

            .policy h1 { font-size: 1.8rem; }
            .policy h2 { font-size: 1.3rem; }
            .policy p, .policy li { font-size: 0.85rem; }
        }




        @media (max-width: 768px) { /*for smaller screens*/
            .basket {
                margin-left: 10px; /*reduce left margin of basket to 10px.*/
            }
        }
    }



/* Mobile Styles */
@media (max-width: 768px) {
    /* Styles for screens smaller than 768px */
    header .o {
        font-size: 1.5rem;
    }

    nav {
        flex-direction: column;
        gap: 10px;
    }

    nav a {
        font-size: 0.9rem;
        padding: 6px 12px;
    }

    .hero h2 {
        font-size: 2rem;
    }

    .hero p {
        font-size: 0.9rem;
    }

    .cta {
        padding: 8px 16px;
        font-size: 0.9rem;
    }

    .featured-products h2 {
        font-size: 1.5rem;
    }

    .product {
        width: 100%;
        max-width: 250px;
    }

    .product h3 {
        font-size: 1.2rem;
    }

    .product p {
        font-size: 0.9rem;
    }

    .price {
        font-size: 1rem;
    }
}

@media (max-width: 480px) {
    /* Styles for screens smaller than 480px */
    .hero h2 {
        font-size: 1.5rem;
    }

    .hero p {
        font-size: 0.8rem;
    }

    .cta {
        padding: 6px 12px;
        font-size: 0.8rem;
    }

    .featured-products h2 {
        font-size: 1.2rem;
    }

    .product {
        max-width: 200px;
    }

    .product h3 {
        font-size: 1rem;
    }

    .product p {
        font-size: 0.8rem;
    }

    .price {
        font-size: 0.9rem;
    }
}