/* Base Colors and Backgrounds */
#pricing .bg-base-200 {
    --tw-bg-opacity: 1;
    background-color: var(--fallback-b2, oklch(var(--b2) / var(--tw-bg-opacity)));
}

#pricing .bg-base-100 {
    --tw-bg-opacity: 1;
    background-color: #ffffff;
}

#pricing .bg-secondary\/70 {
    background-color: var(--fallback-s, oklch(var(--s) / .7));
}

/* Text Colors and Typography */
#pricing .text-\[10px\] {
    font-size: 10px;
}

#pricing .text-lg {
    font-size: 1.725rem;
    line-height: 1.75rem;
}

#pricing .text-3xl {
    font-size: 1.875rem;
    line-height: 2.25rem;
}

#pricing .text-5xl {
    font-size: 4rem;
    line-height: 40px;
}

#pricing .text-sm {
    font-size: .875rem;
    line-height: 1.25rem;
}

#pricing .text-xs {
    font-size: .75rem;
    line-height: 1rem;
}

#pricing .text-center {
    text-align: center;
}

#pricing .text-base {
    font-size: 1.4rem;
    line-height: 2.5rem;
}

/* Font Weights */
#pricing .font-medium {
    font-weight: 500;
}

#pricing .font-bold {
    font-weight: 700;
}

#pricing .font-semibold {
    font-weight: 600;
}

#pricing .font-extrabold {
    font-weight: 800;
}

#pricing .font-normal {
    font-weight: 400;
}

/* Layout and Spacing */
#pricing .overflow-hidden {
    overflow: hidden;
}

#pricing .py-24 {
    padding-bottom: 6rem;
}

#pricing .py-0\.5 {
    padding-top: .125rem;
    padding-bottom: .125rem;
}

#pricing .px-8 {
    padding-left: 2rem;
    padding-right: 2rem;
}

#pricing .px-1 {
    padding-left: .25rem;
    padding-right: .25rem;
}

#pricing .p-1 {
    padding: .25rem;
}

#pricing .p-8 {
    padding: 2rem;
}

#pricing .mt-20 {
    margin-top: 5rem;
}

#pricing .mt-2 {
    margin-top: .5rem;
}

#pricing .mb-6 {
    margin-bottom: 1.5rem;
}

#pricing .mb-8 {
    margin-bottom: 2rem;
}

#pricing .mb-\[4px\] {
    margin-bottom: 4px;
}

#pricing .gap-2 {
    gap: .5rem;
}

#pricing .gap-4 {
    gap: 1rem;
}

#pricing .gap-5 {
    gap: 1.25rem;
}

#pricing .gap-8 {
    gap: 3rem;
}

/* Flexbox Utilities */
#pricing .flex {
    display: flex;
}

#pricing .flex-col {
    flex-direction: column;
}

#pricing .flex-1 {
    flex: 1 1 0%;
}

#pricing .flex-shrink-0, #pricing .shrink-0 {
    flex-shrink: 0;
}

#pricing .justify-center {
    justify-content: center;
}

#pricing .justify-between {
    justify-content: space-between;
}

#pricing .justify-end {
    justify-content: flex-end;
}

#pricing .items-center {
    align-items: center;
}

/* Sizing */
#pricing .w-full {
    width: 100%;
}

#pricing .w-5 {
    width: 1.25rem;
}

#pricing .w-64 {
    width: 16rem;
}

#pricing .h-full {
    height: 100%;
}

#pricing .h-5 {
    height: 1.25rem;
}

#pricing .h-\[18px\] {
    height: 21px;
}

#pricing .w-\[18px\] {
    width: 21px;
}

/* Borders and Rounding */
#pricing .border {
    border-width: 1px;
}

#pricing .border-base-content\/20 {
    border-color: var(--fallback-bc, oklch(var(--bc) / .2));
}

#pricing .rounded-full {
    border-radius: 9999px;
}

#pricing .rounded-lg {
    border-radius: .5rem;
}

/* Positioning */
#pricing .relative {
    position: relative;
}

#pricing .absolute {
    position: absolute;
}

#pricing .-top-3 {
    top: -.75rem;
}

#pricing .-right-3 {
    right: -.75rem;
}

/* Display and Alignment */
#pricing .inline-flex {
    display: inline-flex;
}

#pricing .whitespace-nowrap {
    white-space: nowrap;
}

#pricing .btn--primary {
    color: #ffffff;
    margin: 26px auto 20px;
    position: relative;
    width: 300px;
    left: 50%;
    margin-left: -150px;
    border-radius: 4rem;
    font-size: 14px;
    padding: 17px;
}

#pricing .btn--black {
    background-color: #000000;
    color: #ffffff;
}

#pricing .btn--black:hover {
    background-color: #363636;
}

/* Join Component */
#pricing .join {
    display: inline-flex;
    align-items: stretch;
    border-radius: var(--rounded-btn, .5rem);
}

#pricing .join .join-item:first-child:not(:last-child), 
#pricing .join :first-child:not(:last-child) .join-item {
    border-start-end-radius: 0;
    border-end-end-radius: 0;
}

#pricing .join :where(.join-item:last-child:not(:first-child)), 
#pricing .join :where(:last-child:not(:first-child) .join-item) {
    border-start-end-radius: inherit;
    border-end-end-radius: inherit;
}

#pricing .join :where(.join-item:first-child:not(:last-child)), 
#pricing .join :where(:first-child:not(:last-child) .join-item) {
    border-end-start-radius: inherit;
    border-start-start-radius: inherit;
}

#pricing .join :where(.join-item) {
    border-start-end-radius: 0;
    border-end-end-radius: 0;
    border-end-start-radius: 0;
    border-start-start-radius: 0;
}

#pricing .join>:where(:not(:first-child)) {
    margin-top: 0;
    margin-bottom: 0;
    margin-inline-start: -1px;
}

/* General Elements Reset */
#pricing blockquote, 
#pricing dd, 
#pricing dl, 
#pricing figure, 
#pricing h1, 
#pricing h2, 
#pricing h3, 
#pricing h4, 
#pricing h5, 
#pricing h6, 
#pricing hr, 
#pricing p, 
#pricing pre {
    margin: 0;
}

#pricing h1, 
#pricing h2, 
#pricing h3, 
#pricing h4, 
#pricing h5, 
#pricing h6 {
    font-size: inherit;
    font-weight: inherit;
}

#pricing menu, 
#pricing ol, 
#pricing ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

#pricing audio, 
#pricing canvas, 
#pricing embed, 
#pricing iframe, 
#pricing img, 
#pricing object, 
#pricing svg, 
#pricing video {
    display: block;
}

#pricing a {
    color: inherit;
    text-decoration: inherit;
}

#pricing .md\:flex-row {
    flex-direction: row;
}

#pricing .lg\:text-5xl {
    font-size: 5rem;
    line-height: 8rem;
}

#pricing .lg\:gap-8 {
    gap: 2rem;
}

#pricing .lg\:text-xl {
    font-size: 2.25rem;
    line-height: 2.75rem;
}

#pricing .opacity-80 {
    opacity: .8;
}

#pricing .transition-transform {
    transition-property: transform;
    transition-timing-function: cubic-bezier(.4,0,.2,1);
    transition-duration: .15s;
}

#pricing .duration-200 {
    transition-duration: .2s;
}

#pricing .fill-primary-content {
    fill: var(--fallback-pc, oklch(var(--pc) / 1));
}

#pricing .space-y-2\.5>:not([hidden])~:not([hidden]) {
    --tw-space-y-reverse: 0;
    margin-top: calc(.625rem * calc(1 - var(--tw-space-y-reverse)));
    margin-bottom: calc(.625rem * var(--tw-space-y-reverse));
}

/* Smartphones (portrait and landscape) */
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {

    #pricing .px-8 {
        padding-left: 0;
        padding-right: 0;
    }

    #pricing .md\:flex-row {
        flex-direction: column;
    }

    #pricing .lg\:text-5xl {
        font-size: 4rem;
    }
}

/* Smartphones (landscape) */
@media only screen and (min-width : 321px) {

}

/* Smartphones (portrait) */
@media only screen and (max-width : 320px) {

}

@media only screen and (min-device-width: 375px) and (max-device-width: 667px) and (orientation : portrait) { 

}

@media only screen and (min-device-width: 375px) and (max-device-width: 667px) and (orientation : landscape) { 

}

@media only screen and (min-device-width: 414px) and (max-device-width: 736px) and (orientation : portrait) { 

}

@media only screen and (min-device-width: 414px) and (max-device-width: 736px) and (orientation : landscape) { 

}

@media only screen and (max-device-width: 640px), only screen and (max-device-width: 667px), only screen and (max-width: 480px){ 

}

@media only screen and (max-device-width: 640px), only screen and (max-device-width: 667px), only screen and (max-width: 480px) and (orientation : portrait){ 

}

@media only screen and (max-device-width: 640px), only screen and (max-device-width: 667px), only screen and (max-width: 480px) and (orientation : landscape){ 

}

/* iPads (portrait and landscape) */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) {

}

/* iPads (landscape) */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) {

}

/* iPads (portrait) */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) {

}

/* Desktops and laptops */
@media only screen and (min-width : 1224px) {

}

/* Large screens */
@media only screen and (min-width : 1824px) {

}

/* iPhone 4 */
@media only screen and (-webkit-min-device-pixel-ratio : 1.5), only screen and (min-device-pixel-ratio : 1.5) {

}

@media only screen and (-webkit-min-device-pixel-ratio: 2) {


}

@media only screen and (-webkit-min-device-pixel-ratio: 2) and (max-width: 1400px) {


}

@media only screen and (-webkit-min-device-pixel-ratio: 2) and (max-width: 600px) {

}
