/*!
Theme Name: SWRL
Theme URI: http://underscores.me/
Author: Aman Garg
Author URI: https://amangarg.co.in/
Description: Description
Version: 1.0.0
Tested up to: 5.4
Requires PHP: 5.6
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: swrl
Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned.

SWRL is based on Underscores https://underscores.me/, (C) 2012-2020 Automattic, Inc.
Underscores is distributed under the terms of the GNU GPL v2 or later.

Normalizing styles have been helped along thanks to the fine work of
Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/
*/

section.product-category {
    margin: 6rem 0 0 0;
}

.product-cart-btn a{
	    padding: 1.2rem 1.6rem 1.2rem 2.5rem;
    border-top-left-radius: 3rem;
    background: rgba(174, 28, 154, 0.188);
    color: #AE1C9A;
    font-size: 1.6rem;
    transition: all 0.4s;
	font-family: "Jost";
}
body, html, p, span, strong, b, div, a{
	font-family: "Inter", sans-serif;
}
.home-cate .product-wrapper {
    background: transparent !important;
    border: none !important;
}
.home-cate .arrival-section .product-wrapper {
    border-radius: 0;
}
.desktop-menu ul li a:hover:before, .desktop-menu ul li a.active:before {
    width: 100%;
}
.product-wrapper .product-info {
    margin-bottom: 50px;
}
.product-sidebar-section .product-wrapper {
    border-radius: 0;
    border: none;
}
/* How its pages styling */
    .attached-section {
        position: relative;
        background: url('<?php echo get_template_directory_uri(); ?>/assets/img/parallax.jpg') center/cover no-repeat;
        padding: 60px 20px 100px;
        color: white;
        display: flex;
        align-items: center;
        justify-content: center;
        text-align: center;
    }

    .overlay {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(255, 144, 181, 0.86);
        z-index: 1;
    }

    .top-content {
        position: relative;
        z-index: 2;
        max-width: 800px;
    }

    .top-content h2 {
        font-size: 32px;
        margin-bottom: 10px;
        color: #fff; 
        display: inline-block;
/*         background: #0a5339; */
    }

    .top-content p {
        font-size: 16px;
        color: #fff; 
        margin: 0;
    }

    .steped-section {
        display: flex;
        flex-wrap: wrap;
        /* justify-content: center; */
        gap: 20px;
        margin-top: -70px;
        padding: 40px 20px;
        position: relative;
        z-index: 2;
    }
    .how-its-container .box{
      padding: 0 !important;
      padding-top: 30px !important;
    }
    .how-its-container .steped-section{
      padding: 0 !important;
      margin: 0 !important;
    }
    .box {
        padding: 15px;
        border-radius: 16px;
        box-shadow: 0 12px 25px rgba(0, 0, 0, 0.01);
        background: #fefefe;
        width: calc(33.333% - 20px);
        transition: transform 0.3s ease;
    }

    .box:hover {
        transform: translateY(-6px);
    }

    .inner-box {
        background: white;
        padding: 25px;
        border-radius: 12px;
        box-shadow: 0px 8px 20px rgba(0, 0, 0, 0.06);
        position: relative;
        text-align: center;
    }

    .step-icon {
        font-size: 2.5rem;
        color: #FF57A0;
        margin-bottom: 15px;
    }

    .step-number {
        position: absolute;
        top: 20px;
        right: 20px;
        background: #000;
        color: #fff;
        border-radius: 50%;
        width: 40px;
        height: 40px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: 600;
        font-size: 1rem;
    }

    .inner-box h3 {
        font-size: 18px;
        margin-bottom: 10px;
    }

    .inner-box p {
        font-size: 14px;
        color: #555;
        line-height: 1.6;
    }
.inner-box {
    background: white;
    padding: 25px;
    border-radius: 12px;
    box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.04); /* lighter shadow */
    position: relative;
    text-align: center;
}

/* Step number style update */
.step-number {
    position: absolute;
    top: 12px;
    right: 16px;
    color: #111;
    font-weight: 700;
    font-size: 48px !important;
    opacity: 0.15;
    background: none;
    width: auto;
    height: auto;
    display: block;
    line-height: 1;
}
.step-icon {
    width: 60px;
    height: 60px;
    line-height: 60px;
    margin: 0 auto 15px;
    border-radius: 50%;
    color: #fff;
    font-size: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1);
}

/* Alag-alag icon backgrounds by box order */
.steped-section .box:nth-child(1) .step-icon {
    background: linear-gradient(135deg, #ff9a9e 0%, #fad0c4 100%);
}

.steped-section .box:nth-child(2) .step-icon {
    background: linear-gradient(135deg, #a18cd1 0%, #fbc2eb 100%);
}

.steped-section .box:nth-child(3) .step-icon {
    background: linear-gradient(135deg, #f6d365 0%, #fda085 100%);
}

.steped-section .box:nth-child(4) .step-icon {
    background: linear-gradient(135deg, #84fab0 0%, #8fd3f4 100%);
}

.steped-section .box:nth-child(5) .step-icon {
    background: linear-gradient(135deg, #cfd9df 0%, #e2ebf0 100%);
}

.steped-section .box:nth-child(6) .step-icon {
    background: linear-gradient(135deg, #fbc2eb 0%, #a6c1ee 100%);
}

    @media (max-width: 1024px) {
        .box {
            width: calc(50% - 20px);
        }
    }

    @media (max-width: 600px) {
        .box {
            width: 100%;
        }
    }