body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    background-color: #b5bfa1;
    background-image: url('/images/pattern.png');
    padding-top: 70px;
    overflow-x: hidden;
}

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

.size-select h2 {
    font-size: 1.5rem;
    margin-bottom: 10px;
    font-family: 'Montserrat', sans-serif;
}

#sizeDropdown {
    padding: 10px 15px;
    font-size: 1rem;
    border: 1px solid #ccc;
    border-radius: 8px;
    background-color: #fff;
    cursor: pointer;
}



.buttons {
    display: flex;
    gap: 10px;
}

.login,
.signup {
    border: none;
    text-decoration: none;
    padding: 8px 15px;
    cursor: pointer;
    font-size: 14px;
}

.login {
    background: transparent;
    border: 0.1px solid #143109;
    border-radius: 5px;
    color: #143109;
    transition: background 0.3s, transform 0.2s;
}

.login:hover {
    background: #143109;
    color: white;
    transform: scale(1.05);
    transition: transform 0.3s ease-in-out;
}

.signup {
    background: #143109;
    transition: background 0.3s, transform 0.2s;
    color: white;
    border-radius: 5px;
}

.hero {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 50px;
    max-width: 1200px;
    margin: auto;


}

.text-content {
    max-width: 500px;
    margin-bottom: 190px;
}

.text-content h1 {
    font-size: 50px;
    color: #143109;
    font-family: 'Brush Script MT', cursive;
}

.text-content p {
    font-size: 16px;
    color: black;
}

.start-designing {
    background: #143109;
    color: white;
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    margin-top: 10px;
    transition: background 0.3s, transform 0.2s;
}

.image-content img {
    width: 400px;
    border-radius: 10px;

}

/* Pick Your Style Section */
.pick-style {
    text-align: center;
    padding: 50px 20px;
    background: white;
}

.pick-style h2 {
    font-size: 28px;
    font-weight: bold;
    color: #143109;
}

.style-container {
    display: flex;
    justify-content: center;
    gap: 30px;
    margin-top: 30px;
    flex-wrap: wrap;
}

.style-box,
.style-box1 {
    width: 250px;
    text-align: center;
}

.style-box img,
.style-box1 img {
    width: 100%;
    border-radius: 10px;
    height: 350px;
    cursor: pointer;
}

.style-box p,
.style-box1 p {
    font-size: 16px;
    font-weight: bold;
    margin-top: 10px;
    color: #143109;
}



.design-steps {
    padding: 50px 0;
}

.steps-container {
    display: flex;
    align-items: center;
    justify-content: center;
    max-width: 1200px;
    margin: auto;
    gap: 50px;
    flex-wrap: wrap;
    background-color: rgb(181, 191, 161, 0.2);
}

.steps-image img {
    width: 100%;
    max-width: 400px;
    border-radius: 10px;
}

.steps-text {
    max-width: 500px;
}

.steps-text h2 {
    font-size: 26px;
    color: #143109;
}

.steps-text ul {
    list-style: none;
    padding: 0;
    font-size: 16px;
    color: black;
}

.steps-text ul li {
    margin: 10px 0;
}


.tshirt-selection {
    text-align: center;
    padding: 50px 0;
    background-color: #fff;
}

.tshirt-selection h2 {
    font-size: 24px;
    font-weight: bold;
    color: #ff6f61;
}

.subtitle {
    font-size: 16px;
    color: #355070;
    margin-bottom: 30px;
}

.tshirt-container {
    display: flex;
    justify-content: center;
    gap: 30px;
    flex-wrap: wrap;
    max-width: 1200px;
    margin: auto;
}

.tshirt-box {
    text-align: center;
    background-color: #F7F8FA;
    padding: 15px;
    border-radius: 10px;
    height: 350px;
    width: 250px;
}

.tshirt-box p {
    color: #ff6f61;
}

.tshirt-box img {
    width: 100%;
    height: 90%;
    border-radius: 10px;
}

.tshirt-title {
    font-size: 16px;
    font-weight: bold;
    color: #355070;
    margin-top: 10px;
}


.tshirt-box:hover,
.style-box:hover,
.style-box1:hover,
.signup:hover,
.start-designing:hover {
    transform: scale(1.05);
    transition: transform 0.3s ease-in-out;
}

.special-offer-section {
    background-color: #143109;
    /* equivalent to Tailwind's yellow-100 */
    padding: 60px 24px;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    flex-direction: row;
    gap: 32px;
}


.special-offer-text {
    flex: 1;
    text-align: center;
}


.special-offer-text h2 {
    font-size: 2rem;
    color: white;
    /* yellow-900 */
    margin-bottom: 16px;
    font-weight: bold;
}

.special-offer-text p {
    font-size: 1.125rem;
    color: white;
    /* yellow-800 */
    margin-bottom: 20px;
}

.shop-btn {
    background-color: #b5bfa1;
    /* yellow-600 */
    color: #143109;
    font-weight: 600;
    padding: 12px 24px;
    border: none;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    transition: background 0.3s;
    cursor: pointer;
}

.shop-btn:hover {
    background-color: #9ebb63;
    /* yellow-700 */
}

.special-offer-image {
    flex: 1;
    text-align: center;
}

.special-offer-image img {
    max-width: 100%;
    justify-self: center;
    width: 100%;
    max-width: 400px;
    border-radius: 8px;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
}

.head {
    background-color: #143109;
    color: white;
    padding: 20px;
    font-weight: bolder;
    text-align: center;
}

/* Main layout */
.productcontainer {
    background-color: white;
    padding-top: 30px;
    display: flex;
    gap: 50px;
}

.sidebar-container {
    width: 320px;
    margin-left: 300px;
}

/* Sidebar */
.filters {
    position: sticky;
    top: 100px;
    width: 100%;
    margin-right: 30px;
    cursor: pointer;
}

.filters h3 {
    font-size: 30px;
    padding-bottom: 20px;
    color: #143109;
    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
    border-bottom: solid #143109 1px;
}

.filters details {
    padding-bottom: 20px;
    padding-top: 20px;
    border-bottom: solid #143109 1px;
}

.filters summary {
    font-size: 20px;
    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
    color: #143109;
    cursor: pointer;
    padding-bottom: 10px;
}

.filters label {
    color: #143109;
    display: block;
    font-size: 15px;
    padding: 7px 0;
}


/* Products */
.products {
    flex: 1;
    margin-right: 200px;
}

.products-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.products-header h2 {
    font-size: 20px;
}

.products-header span {
    color: #888;
    font-weight: normal;
    font-size: 15px;
}

.sort-btn {
    padding: 6px 10px;
    font-size: 14px;
    border: 1px solid #ccc;
    background: white;
    cursor: pointer;
}

/* Product grid */
.product-grid,
.skeleton-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 0fr));
    gap: 10px;
}

/* Product card */
.product-card,
.skeleton-card {
    padding: 2px;
    border-radius: 5px;
    position: relative;
    background: #fff;
}

.product-card img,
.skeleton-img {
    width: 100%;
    aspect-ratio: 4/7;
    height: auto;
    object-fit: cover;
    border-radius: 0%;
    cursor: pointer;
}

.product-card p {
    font-size: 14px;
    margin: 6px 0;
}

.product-card del {
    color: #999;
}

.product-card .discount {
    color: green;
    font-weight: bold;
}

.product-card .fabric {
    font-size: 12px;
    color: #444;
    background: #f0f0f0;
    display: inline-block;
    padding: 2px 6px;
    border-radius: 3px;
}

/* Badge */
.badge {
    position: absolute;
    top: 8px;
    left: 8px;
    background: green;
    color: #fff;
    font-size: 14px;
    font-weight: bolder;
    padding: 3px 6px;
    border-radius: 3px;
}

/* Skeleton animation */
.skeleton {
    background-color: #b5bfa1;
    border-radius: 4px;
    animation: pulse 1.5s infinite ease-in-out;
}

.skeleton-text {
    height: 16px;
    margin-bottom: 8px;
}

/* Width classes (replacing Tailwind w-3/4 etc.) */
.w-75 {
    margin: 6px 0;
    width: 75%;
}
.w-33 {
    width: 33%;
}
.w-25 {
    width: 25%;
}

/* Pulse animation */
@keyframes pulse {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.4;
    }
}

@media (max-width: 1440px) {
    .sidebar-container {
        width: 220px;
        margin-left: 100px;
    }

    .products {
        margin-right: 0;
    }

    .filters {
        top: 90px;
    }

    .filters h3 {
        font-size: 28px;
        padding-bottom: 18px;
    }

    .filters details {
        padding-bottom: 18px;
        padding-top: 18px;
    }

    .filters summary {
        font-size: 18px;
        padding-bottom: 8px;
    }

    .filters label {
        font-size: 13px;
        padding: 5px 0;
    }
}

@media (max-width: 1024px) {
    .product-grid,
    .skeleton-grid {
        grid-template-columns: repeat(auto-fill, minmax(200px, 0fr));
    }

    .badge {
        top: 2px;
        left: 2px;
        font-size: 10px;
    }

    .sidebar-container {
        width: 180px;
        margin-left: 70px;
    }

    .filters {
        top: 90px;
    }

    .filters h3 {
        font-size: 26px;
        padding-bottom: 16px;
    }

    .filters details {
        padding-bottom: 16px;
        padding-top: 16px;
    }

    .filters summary {
        font-size: 16px;
        padding-bottom: 6px;
    }

    .filters label {
        font-size: 11px;
        padding: 5px 0;
    }
}

@media (max-width: 768px) {

    .tshirt-container {
        flex-direction: column;
        align-items: center;
        padding: 20px;
    }

    .hero .start-designing {
        margin-left: 0px;
        margin-top: 0px;
    }

    .text-content {
        margin-bottom: 0;
        width: 90%;
    }

    .text-content p {
        margin-bottom: 10px;
        width: 314px;
        text-align: center;
    }

    .text-content h1 {
        font-size: 40px;
    }

    .hero {
        height: 400px;
    }

    .style-container {
        display: flex;
        justify-content: center;
        gap: 20px;
        /* Adjust gap between images */
        margin-top: 20px;
        flex-wrap: nowrap;
        /* Prevent wrapping of the images */
    }

    .style-box,
    .style-box1 {
        width: 200px;
        /* Adjust width of each image box */
        text-align: center;
    }

    .style-box img,
    .style-box1 img {
        width: 100%;
        /* Make the images fill the box */
        height: auto;
        /* Maintain aspect ratio */
        border-radius: 10px;
    }

    .steps-container {
        display: flex;
        align-items: center;
        justify-content: space-between;
        /* Ensure there is space between the items */
        max-width: 1200px;
        margin: auto;
        gap: 10px;
        flex-wrap: wrap;
        /* Allow wrapping if necessary */
        background-color: rgb(181, 191, 161, 0.2);
    }

    .steps-image {
        flex: 1;
        /* Allow the image to take up equal space */
    }

    .steps-image img {
        width: 100%;
        /* Make the image responsive */
        max-width: 400px;
        /* Set a max width for the image */
        border-radius: 10px;
        margin-bottom: 145px;
    }

    .steps-text {
        flex: 1;
        /* Allow text to take equal space */
        max-width: 500px;
        /* Limit the width of the text */
        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    }

    .steps-text h2 {
        font-size: 30px;
        /* Reduced from 26px */
        color: #143109;
    }

    .steps-text ul {
        list-style: none;
        padding: 0;
        font-size: 14px;
        /* Reduced from 16px */
        color: black;
    }

    .steps-text ul li {
        margin: 8px 0;
        /* Reduced margin for smaller spacing */
    }

    .start-designing {
        margin-left: 100px;
    }

    .bestseller {
        text-align: center;
        margin-top: 50px;
    }

    .bestseller h2 {
        font-size: 24px;
        font-weight: bold;
        color: #355070;
    }

    .sub-heading {
        font-size: 18px;
        color: #355070;
        margin-bottom: 20px;
    }

    .tshirt-box:hover,
    .style-box:hover,
    .style-box1:hover,
    .signup:hover,
    .start-designing:hover {
        transform: scale(1.05);
        transition: transform 0.3s ease-in-out;
    }

    .special-offer-text {
        text-align: left;
    }

    .special-offer-container {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }

    .productcontainer {
        flex-direction: column;
    }

    .product-grid,
    .skeleton-grid {
        padding: 0 30px 0 30px;
        grid-template-columns: repeat(auto-fill, minmax(220px, 0fr));
    }

    .sidebar-container {
        width: 100%;
        margin-left: 0;
        padding: 0 20px 0 20px;
    }

    .filters {
        max-height: 1000px;
        overflow: hidden;
        transition: max-height 0.4s ease;
    }

    .filters.collapsed {
        max-height: 60px;
    }

    /* Show toggle button on mobile */
    .filters-toggle-btn {
        display: block;
        background-color: #00c853;
        color: white;
        border: none;
        padding: 10px 16px;
        font-size: 16px;
        cursor: pointer;
        margin-bottom: 10px;
        border-radius: 4px;
    }
}


@media (max-width: 426px) {
    body {
        font-size: 16px;
        line-height: 1.5;
    }

    .hero {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        padding: 40px 20px;
        text-align: center;
        height: auto;
        background: #b5bfa1;
        background-image: url('/images/pattern.png');
    }

    .hero h1 {
        font-size: 40px;
        margin-bottom: 16px;
    }

    .hero p {
        font-size: 15px;
        margin-bottom: 20px;
        color: #333;
    }

    .hero .image-content {
        display: none;
    }

    .start-designing-wrapper {
        background-color: #f6c087;
        padding: 20px;
        border-radius: 16px;
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
        width: 100%;
        max-width: 300px;
        margin: 20px auto;
        text-align: center;
    }

    .start-designing {
        background-color: #143109;
        color: #ffffff;
        border: none;
        padding: 12px 24px;
        font-size: 16px;
        font-weight: bold;
        border-radius: 8px;
        cursor: pointer;
        width: 100%;
        transition: background-color 0.3s ease;
    }

    .start-designing:hover {
        background-color: #1a3f11;
    }

    .design-steps .steps-container {
        flex-direction: column;
        align-items: center;
        padding: 20px 15px;
    }

    .steps-image {
        display: none;
    }

    .steps-text h2 {
        font-size: 1.4rem;
        text-align: center;
    }

    .step h3 {
        font-size: 1.1rem;
        margin-top: 10px;
    }

    .step p {
        font-size: 0.95rem;
        line-height: 1.4;
    }

    .steps-text button.start-designing {
        margin-top: 20px;
        margin-left: 0px;
    }

    .style-box1 {
        width: 100px;
    }

    .style-box1 p {
        font-size: 10px;
    }

    .container {
        max-width: 1200px;
        margin: 0 auto;
        display: flex;
        flex-direction: column;
        gap: 32px;
    }

    .shop-btn {
        width: 100%;
    }

    .product-grid,
    .skeleton-grid {
        justify-content: center;
        padding: 0 5px 0 5px;
        grid-template-columns: repeat(auto-fill, minmax(170px, 0fr));
        gap: 5px;
    }

    .product-card p {
        font-size: 11px;
    }

    .head {
        font-size: 12px;
    }
}

@media (max-width: 320px) {
    .product-grid,
    .skeleton-grid {
        justify-content: center;
        padding: 0 2px 0 2px;
        grid-template-columns: repeat(auto-fill, minmax(149px, 0fr));
        gap: 2px;
    }

    .head {
        font-size: 10px;
    }
}