body {
    font-family: "Oswald", serif !important;
    line-height: normal;
    letter-spacing: 0.6px;
    color: #12212b;

}

h1,
h2 {
    font-weight: 400;
    letter-spacing: 0.6px;
}

h1 {
    font-size: 40px;
}

.max-w-7xl,
.max-w-6xl,
.max-w-5xl,
.max-w-4xl,
.max-w-3xl,
.max-w-2xl,
.max-w-xl {
    padding-left:20px;
    padding-right:20px;
}

.color2 {
    color: #505655;
}

.color1 {
    color: #12212b;
}

.secondary_btn {
    font-size: 15px;
    letter-spacing: 1px;
    border-radius: 0px;
    font-weight: 400;
    box-shadow: none !important;
}

.font-opensans {
    font-family: "Open Sans";
}

.shadow-custom {
    background-color: rgb(239, 236, 236);
    background-image: linear-gradient(rgba(80, 86, 85, 0.04), rgba(80, 86, 85, 0.04))
}

.shadow1-custom {
    background-color: rgb(37, 37, 37);
    background-image: linear-gradient(rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.04));
}

.bg-custom-light {
    background-color: rgba(18, 33, 43, .04);
}

.cart-count{
    font-family: 'Open Sans';
    position: absolute;
    right: 0;
    top: 0;
    font-size: 12px;
    color: #fff;
    background: #d3002c;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    justify-content: center;
    align-items: center;
    display: flex;
}

.text-customwhite {
    color: rgb(242, 236, 221);
}

.text-customwhite{
    color: rgb(242, 236, 221);
}

[type='checkbox']:checked, [type='radio']:checked{
    --tw-bg-opacity: 1;
    background-color: rgb(217 217 217);
    --tw-text-opacity: 1;
    color: rgb(217 217 217);
}
[type='checkbox']:checked{
    background-image: url('images/checkbox.svg');
    background-size: 70%;
}
[type='radio']:checked{
    background-image: url('images/radio.svg');
    background-size: 70%;
}
@keyframes slideIn {
    from {
        transform: translateY(2rem);
        /* Starting position */
        opacity: 0;
        /* Optional: start with opacity 0 */
    }

    to {
        transform: translateY(0);
        /* End at normal position */
        opacity: 1;
        /* Optional: end with full opacity */
    }
}

.element {
    transform: translateY(2rem);
    /* Initial position */
    opacity: 0;
}

.animate-slideIn {
    animation-name: slideIn;
    animation-duration: 0.6s;
    animation-fill-mode: forwards;
    animation-timing-function: cubic-bezier(0, 0, 0.3, 1);
}

@media (max-width: 640px) {}

@media (max-width: 768px) {
    h1 {
        font-size: 30px;
    }
    h2{
        font-size: 20px;
    }
    p{
        font-size: 16px;
    }
    .py-16{
        padding-top: 2rem;
        padding-bottom: 2rem;
    }
}

@media (max-width: 1024px) {
    

}

@media (max-width: 1280px) {
}

@media (min-width: 1280px) {

    .max-w-7xl {
        padding-left:15px;
        padding-right:15px;
    }
}