:root {
    --color-white: #ffffff;
    --color-bg: #f8fafc;
    --color-black: #1b1b1b;
    --color-blackd: #000000;
    --color-purple: #7f00ff;
    --color-green: #16db65;
    --color-red: #E63946;
    --color-yellow: #FBE134;
    --font-primary: "Aspekta", sans-serif;
    --font-secondary: "Roboto", sans-serif;
    --font-tertiary: "Poppins", sans-serif;
    --font-other: "Work Sans", sans-serif;
    --shadow-shad: 0 0 50px #00000010;
    --shadow-hovershad: 0 0 50px #16db6550;
    --border-lit: 1px solid #00000020;
}

* {
    box-sizing: border-box;
}

body {
    background: var(--color-bg) !important;
}

.typeFilter {
    width: 100%;
    max-width: 440px;
}

.pcatalog {
    width: 100%;
    max-width: 660px;
}

.typeFilter #label p {
    font-size: 20px !important;
    text-align: left;
    text-wrap: nowrap;
}

.typeFilter #label svg {
    display: none;
}

.typeVisible {
    height: auto !important;
}

@media (max-width: 1200px) {
    #container {
        max-width: 800px;
    }

    .typeFilter #label svg {
        display: initial;
    }

    .main-wrapper {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: start;
        max-width: 100%;
        margin-top: 20px;
    }

    .typeFilter {
        width: 100% !important;
        min-width: 0;
        max-width: 800px;
        height: 72px;
        overflow: hidden;
    }

    .sticky {
        position: static;
        width: 100%;
        justify-items: center;
    }

    .sFilter span {
        font-size: 20px;
    }

    .sFilter button {
        font-size: 18px;
    }

    .pCatalog {
        width: 100% !important;
        max-width: 800px !important;
        min-width: 0;
    }
}

@media (max-width: 640px) {
    #heading {
        gap: 8px;
    }

    #heading svg {
        width: 20px;
        height: 20px;
    }

    #heading h1 {
        font-size: 28px !important;
    }

    .typeFilter .types {
        margin-top: 20px;
    }

    .typeFilter #label p {
        font-size: 18px !important;
    }

    .typeFilter .types .font-medium {
        font-size: 18px;
    }

    .typeFilter .types .font-light {
        font-size: 16px;
    }

    .sFilter span {
        font-size: 18px;
    }

    .sFilter button {
        font-size: 16px;
    }

    .pCatalog h3 {
        font-size: 18px;
    }

    .pCatalog .desc {
        font-size: 14px;
    }

    .pCatalog .cta .text-lg {
        font-size: 16px;
    }

    .pCatalog .cta .text-xl {
        font-size: 18px;
    }

    .pCatalog .cta .text-base {
        font-size: 14px;
    }

    #unlistedServiceForm p {
        font-size: 20px;
    }

    #unlistedServiceForm input {
        font-size: 16px;
    }

    #unlistedServiceForm .sendBtn svg {
        width: 30px;
        height: 30px;
    }
}

@media (max-width: 540px) {

    #container {
        margin-top: 30px;
        padding: 0 10px;
    }

    #heading svg {
        width: 16px;
        height: 16px;
    }

    #heading h1 {
        font-size: 24px !important;
    }

    .typeFilter {
        height: 55px;
        padding: 15px;
    }

    .sFilter {
        gap: 8px;
    }

    .sFilter span {
        font-size: 14px;
        width: fit-content;
    }

    .sFilter button {
        font-size: 14px;
        padding: 4px 12px;
    }

    #warrantyNotice p {
        font-size: 12px;
    }

    .pCatalog .details {
        flex-direction: column;
        align-items: start;
        justify-content: start;
        gap: 8px;
    }

    .pCatalog .cta {
        width: 100%;
    }

    .pCatalog .cta>div {
        justify-content: start;
    }

    .pCatalog .cta button {
        width: 100%;
    }

    .pCatalog .cta .quantity-selector {
        width: 100%;
        text-align: center;
        justify-content: center;
    }
}

@media (max-width: 400px) {

    #container {
        padding: 0 10px;
    }

    #heading h1 {
        font-size: 22px !important;
    }

    .typeFilter {
        border-radius: 10px !important;
        height: 52px;
    }

    .typeFilter .w-28 {
        width: 80px !important;
        height: 50px !important;
    }

    .typeFilter #label p {
        font-size: 18px !important;
    }

    .typeFilter #label {
        margin-bottom: 12px;
        padding-bottom: 12px;
    }

    .typeFilter .types .font-medium {
        font-size: 16px;
    }

    .typeFilter .types .font-light {
        font-size: 14px;
    }

    #warrantyNotice svg {
        width: 12px;
        min-width: 12px;
    }

    #warrantyNotice p {
        font-size: 10px;
    }

}