/*#region Hat*/
#hat .section-container {
    max-width: 1440px;
    margin: 0 auto;
    padding: 0 112px
}

@media (max-width:1024px) {
    #hat .section-container {
        padding: 0 16px
    }
}

#hat .section-container-fluid {
    max-width: 1440px;
    margin: 0 auto
}

@media (max-width:1024px) {
    #hat .section-container-fluid {
        padding: 0 16px
    }
}

/*#endregion Hat*/

/*#region Intro*/
#hat-intro {
    height: 90vh;
    background: url("/uploads/12046237/File/deco/custom/assets/custom hats.webp");
    background-repeat: no-repeat;
    background-position: 50%;
    background-size: cover;
    display: flex;
    align-items: center
}

@media only screen and (max-width:1024px) {
    #hat-intro {
        background: transparent;
        height: auto;
        padding: 8px 0 70px
    }
}

@media only screen and (max-width:768px) {
    #hat-intro {
        background: url("/uploads/12046237/File/deco/custom/assets/custom hats.webp");
        padding: 20px 0 70px
    }
}

#hat-intro .intro-box {
    width: 80%;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 24px;
    text-align: center
}

@media screen and (max-width:768px) {
    #hat-intro .intro-box {
        width: 100%
    }
}

#hat-intro .intro-box .title {
    color: #fff;
    font-family: Poppins !important;
    font-size: 48px;
    font-weight: 700;
    line-height: 67.2px
}

@media screen and (max-width:1024px) and (min-width:768px) {
    #hat-intro .intro-box .title {
        color: #353535;
        font-size: 32px;
        font-weight: 700;
        line-height: 44.8px;
        width: 100%
    }
}

@media screen and (max-width:768px) {
    #hat-intro .intro-box .title {
        font-size: 30px;
        line-height: 42px;
        width: 100%
    }
}

#hat-intro .intro-box .desc {
    color: #fff;
    font-family: Poppins !important;
    font-size: 16px;
    font-weight: 400;
    line-height: 25.6px;
    width: 70%;
    margin: 0 auto
}

@media screen and (max-width:1024px) and (min-width:768px) {
    #hat-intro .intro-box .desc {
        color: #353535;
        width: 100%
    }
}

@media screen and (max-width:768px) {
    #hat-intro .intro-box .desc {
        width: 100%
    }
}

#hat-intro .intro-box .btn-box {
    display: flex;
    gap: 16px;
    justify-content: center
}

#hat-intro .intro-box .review {
    height: 25px;
}

@media screen and (max-width:768px) {
    #hat-intro .intro-box .btn-box {
        flex-direction: column;
        margin-top: 8px
    }
}

#hat-intro .intro-box .btn-box .btn {
    width: 232px;
    padding: 15px 0;
    font-size: 20px;
    font-weight: 600;
    line-height: 22px
}

@media screen and (max-width:768px) {
    #hat-intro .intro-box .btn-box .btn {
        line-height: 28px;
        font-weight: 600;
        width: 100%;
        padding: 11px 0
    }
}

#hat-intro .intro-box .ti-widget .ti-header {
    padding: 0;
    align-items: baseline
}

@media screen and (max-width:768px) {
    #hat-intro .intro-box .ti-widget .ti-header .nowrap {
        color: #fff !important
    }

    #hat-intro .intro-box .ti-widget .ti-header strong {
        color: #fff !important;
        font-size: 12px
    }

    #hat-intro .intro-box .ti-widget .ti-header .ti-star {
        width: 13px;
        height: 13px
    }

    #hat-intro .intro-box .ti-widget .ti-header .ti-small-logo img {
        width: 53px
    }
}

@media screen and (min-width:1024px) {

    #hat-intro .intro-box .ti-widget .ti-header .nowrap,
    #hat-intro .intro-box .ti-widget .ti-header strong {
        color: #fff !important
    }
}

/*#endregion*/

/*#region Product*/
#hat-product {
    padding: 100px 0;
    background-color: #f6f9fc
}

@media only screen and (max-width:1024px) {
    #hat-product {
        padding: 50px 0
    }
}

#hat-product .title {
    color: #0d1c2c;
    text-align: center;
    font-family: Poppins !important;
    font-size: 36px;
    font-weight: 600;
    line-height: 50.4px;
    text-transform: capitalize;
    margin-bottom: 12px
}

@media only screen and (max-width:1024px) {
    #hat-product .title {
        font-size: 28px;
        line-height: 39.2px
    }
}

@media only screen and (max-width:768px) {
    #hat-product .title {
        font-size: 30px;
        line-height: 42px
    }
}

#hat-product .subtitle {
    color: #333;
    font-family: Poppins;
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
    text-align: center
}

@media only screen and (max-width:1024px) {
    #hat-product .subtitle {
        margin-bottom: 24px
    }
}

#hat-product .product-box {
    margin: 36px 0;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px
}

@media only screen and (max-width:1024px) {
    #hat-product .product-box {
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
        margin: 0
    }
}

@media only screen and (max-width:768px) {

    #hat-product .product-box .product-box-item:first-child,
    #hat-product .product-box .product-box-item:nth-child(6) {
        grid-column: span 2
    }
}

#hat-product .product-box-item {
    text-decoration: none;
    display: flex;
    padding: 16px 10px 10px;
    flex-direction: column;
    align-items: center;
    gap: 22px;
    border-radius: 4px;
    border: 1px solid #e6e8ea;
    background: #fff;
    box-shadow: 0 5px 15px 0 rgba(0, 0, 0, .1);
    transition: all .3s
}

#hat-product .product-box-item p {
    color: #0b1629;
    font-family: Poppins !important;
    font-size: 24px;
    font-weight: 500;
    line-height: 24px;
    text-align: center
}

@media only screen and (max-width:768px) {
    #hat-product .product-box-item p {
        font-size: 20px
    }
}

#hat-product .product-box-item .photo {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center
}

#hat-product .product-box-item img {
    max-height: 277px;
    max-width: 100%
}

#hat-product .product-box-item:hover {
    box-shadow: 0 5px 15px 0 rgba(2, 41, 107, .39)
}

#hat-product .view-all {
    color: #003ca3;
    font-family: Poppins;
    font-size: 20px;
    font-weight: 500;
    line-height: 32px;
    display: block;
    text-align: center;
    transition: all .3s
}

@media only screen and (max-width:1024px) {
    #hat-product .view-all {
        margin-top: 24px
    }
}

/*#endregion Product*/

/*#region Reviews*/
#hat-reviews {
    background-color: #fff;
    padding: 50px 0
}

#hat-reviews .title {
    color: #1c244b;
    font-family: Poppins !important;
    font-size: 24px;
    font-weight: 700;
    line-height: 35.28px;
    text-align: center;
    margin-bottom: 25px
}

@media only screen and (max-width:768px) {
    #hat-reviews .title {
        font-size: 32px;
        font-weight: 600;
        line-height: 44.8px;
        text-transform: capitalize;
        margin-bottom: 20px
    }
}

#hat-reviews .btn-box {
    margin-top: 33px;
    display: flex;
    justify-content: center;
    gap: 16px
}

@media only screen and (max-width:768px) {
    #hat-reviews .btn-box {
        flex-direction: column
    }
}

#hat-reviews .btn-box .btn {
    width: 273px;
    font-size: 20px;
    font-weight: 600;
    line-height: 22px;
    padding: 15px 0
}

@media only screen and (max-width:1024px) {
    #hat-reviews .btn-box .btn {
        width: 153px;
        font-size: 16px;
        font-weight: 500
    }
}

@media only screen and (max-width:768px) {
    #hat-reviews .btn-box .btn {
        display: none
    }
}

@media only screen and (max-width:1024px) {
    #hat-reviews .ti-widget .ti-controls-line {
        display: block !important
    }

    #hat-reviews .ti-widget .ti-header {
        display: none
    }
}

/*#endregion Reviews*/

/*#region Best Seller*/
#hat-best-seller {
    padding: 70px 0;
    background-color: #fff;
}

@media only screen and (max-width:1024px) {
    #hat-best-seller {
        padding: 50px 0
    }
}

#hat-best-seller .title {
    color: #0d1c2c;
    text-align: center;
    font-family: Poppins !important;
    font-size: 36px;
    font-weight: 600;
    line-height: 50.4px;
    text-transform: capitalize;
    margin-bottom: 12px
}

@media only screen and (max-width:1024px) {
    #hat-best-seller .title {
        font-size: 28px;
        line-height: 39.2px
    }
}

@media only screen and (max-width:768px) {
    #hat-best-seller .title {
        font-size: 30px;
        line-height: 42px
    }
}

#hat-best-seller .subtitle {
    color: #333;
    font-family: Poppins !important;
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
    text-align: center
}

@media only screen and (max-width:768px) {
    #hat-best-seller .subtitle {
        font-size: 17px
    }
}

#hat-best-seller .best-seller-box {
    margin-top: 40px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px
}

@media only screen and (max-width:1024px) {
    #hat-best-seller .best-seller-box {
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
        margin-top: 24px
    }
}

#hat-best-seller .best-seller-box-item {
    border-radius: 4px;
    border: 1px solid #e8e9ea;
    background: #fff;
    box-shadow: 0 2px 4px 0 rgba(13, 16, 45, .1), 0 1px 2px -1px rgba(13, 16, 45, .1);
    padding: 16px;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    text-decoration: none;
    transition: all .3s
}

#hat-best-seller .best-seller-box-item:hover {
    box-shadow: 0 5px 15px 0 rgba(2, 41, 107, .39)
}

@media only screen and (max-width:768px) {
    #hat-best-seller .best-seller-box-item {
        padding: 16px 8px;
        background-color: #fff
    }
}

#hat-best-seller .best-seller-box-item .next {
    color: #0b1629;
    text-align: center;
    font-family: Inter !important;
    font-size: 18px;
    font-weight: 600;
    line-height: 26.64px
}

@media only screen and (min-width:768px) and (max-width:1024px) {
    #hat-best-seller .best-seller-box-item .next {
        font-size: 24px;
        line-height: 24px
    }
}

#hat-best-seller .best-seller-box-item .desc {
    color: #172640;
    text-align: center;
    font-family: Inter !important;
    font-size: 14px;
    font-weight: 400;
    line-height: 20.72px;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    text-overflow: ellipsis;
    white-space: normal;
    max-width: 214px;
    margin: 0 auto
}

@media only screen and (max-width:768px) {
    #hat-best-seller .best-seller-box-item .desc {
        -webkit-line-clamp: 2
    }
}

@media only screen and (min-width:768px) and (max-width:1024px) {
    #hat-best-seller .best-seller-box-item .desc {
        font-size: 13px;
        line-height: 24px
    }
}

#hat-best-seller .best-seller-box-item .btn {
    display: block;
    text-decoration: none;
    display: flex;
    gap: 5px;
    align-items: center;
    justify-content: center;
    padding: 13px 10px;
    border-radius: 4px;
    border: 1px solid #354156;
    background: #354156;
    box-shadow: 0 2px 0 0 rgba(0, 0, 0, .02);
    color: #fff;
    font-family: Poppins !important;
    font-size: 18px;
    font-weight: 500;
    line-height: 22px;
    width: 100%;
    text-align: center;
    transition: all .3s
}

#hat-best-seller .best-seller-box-item .btn:hover {
    border-color: #1c244b;
    background-color: #1c244b
}

@media only screen and (max-width:768px) {
    #hat-best-seller .best-seller-box-item .btn {
        font-size: 14px;
        padding: 11px 15px;
        border: none
    }
}

#hat-best-seller .best-seller-box-item .photo {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    margin: 20px 0 10px;
    width: 100%;
    height: 100%
}

#hat-best-seller .best-seller-box-item .photo img {
    max-width: 100%;
    width: 215px;
    height: 100%;
    object-fit: cover
}

/*#endregion Best Seller*/

/*#region Sample*/
#hat-sample {
    padding: 70px 0;
    background-color: #F6F9FC;
}

@media only screen and (max-width:1024px) {
    #hat-sample {
        padding: 50px 0
    }
}

@media only screen and (max-width:768px) {
    #hat-sample {
        background-color: #f6f9fc
    }
}

#hat-sample .title {
    color: #0d1c2c;
    text-align: center;
    font-family: Poppins !important;
    font-size: 30px;
    font-weight: 600;
    line-height: 42px;
    text-transform: capitalize;
    margin-bottom: 12px
}

@media only screen and (max-width:1024px) {
    #hat-sample .title {
        font-size: 28px;
        line-height: 40px;
        margin-bottom: 14px
    }
}

@media only screen and (max-width:768px) {
    #hat-sample .title {
        font-size: 30px;
        line-height: 42px
    }
}

#hat-sample .subtitle {
    color: #333;
    font-family: Poppins !important;
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
    text-align: center
}

#hat-sample .samples-box {
    margin-top: 32px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(3, 300px);
    gap: 11px
}

@media only screen and (max-width:1024px) {
    #hat-sample .samples-box {
        margin-top: 28px;
        grid-template-rows: repeat(2, 200px)
    }

    #hat-sample .samples-box .photo:first-of-type {
        grid-column: span 2;
        grid-row: span 2
    }

    #hat-sample .samples-box .photo:nth-child(6),
    #hat-sample .samples-box .photo:nth-child(7),
    #hat-sample .samples-box .photo:nth-child(8),
    #hat-sample .samples-box .photo:nth-child(9),
    #hat-sample .samples-box .photo:nth-child(10),
    #hat-sample .samples-box .photo:nth-child(11),
    #hat-sample .samples-box .photo:nth-child(12) {
        display: none
    }
}

@media only screen and (max-width:768px) {
    #hat-sample .samples-box {
        margin-top: 24px;
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: repeat(4, 154px)
    }

    #hat-sample .samples-box .photo:first-of-type {
        grid-column: span 1;
        grid-row: span 1
    }

    #hat-sample .samples-box .photo:nth-child(3) {
        grid-column: span 2;
        grid-row: span 2
    }

    #hat-sample .samples-box .photo:nth-child(3) img {
        object-fit: cover
    }
}

#hat-sample .samples-box .photo {
    box-shadow: 0 1px 2px 0 rgba(13, 16, 45, .1);
    border: 1px solid #e6e8ea;
    border-radius: 8px;
    overflow: hidden
}

#hat-sample .samples-box .photo img {
    width: 100%;
    border-radius: 8px;
    height: 100%;
    object-fit: cover;
    display: block
}

#hat-sample .btn-box {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-top: 32px;
    justify-content: center
}

@media only screen and (max-width:1024px) {
    #hat-sample .btn-box {
        margin-top: 28px
    }
}

@media only screen and (max-width:768px) {
    #hat-sample .btn-box {
        margin-top: 24px;
        justify-content: center;
        flex-direction: column
    }
}

#hat-sample .btn-box .btn {
    text-align: center;
    font-family: Poppins;
    font-size: 20px;
    font-weight: 600;
    line-height: 20px;
    text-decoration: none;
    padding: 15px 44px;
    display: block
}

@media only screen and (max-width:1024px) {
    #hat-sample .btn-box .btn {
        width: 200px;
        font-size: 16px;
        font-weight: 500;
        line-height: 22px;
        padding: 12px 0
    }
}

@media only screen and (max-width:768px) {
    #hat-sample .btn-box .btn {
        width: 100%;
        font-size: 20px;
        line-height: 28px
    }
}

/*#endregion Sample*/

/*#region Service*/
#hat-service {
    padding: 70px 0;
    background-color: #f6f9fc;
    background-color: #fff;
}

@media only screen and (max-width:1024px) {
    #hat-service {
        padding: 50px 0
    }
}

@media only screen and (max-width:768px) {
    #hat-service {
        background-color: #fff
    }
}

#hat-service .service-box {
    display: flex;
    gap: 20px;
    flex-wrap: wrap
}

#hat-service .service-box-item {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 16px;
    border-radius: 4px;
    border: 1px solid #e6e8ea;
    background: #fff;
    box-shadow: 0 2px 4px 0 rgba(13, 16, 45, .1), 0 1px 2px -1px rgba(13, 16, 45, .1);
    width: calc(50% - 10px)
}

@media only screen and (max-width:1024px) {
    #hat-service .service-box-item {
        width: 100%
    }
}

#hat-service .service-box-item-title {
    color: #000;
    font-size: 18px;
    font-weight: 600;
    line-height: 20px
}

@media only screen and (max-width:768px) {
    #hat-service .service-box-item-title {
        font-size: 16px
    }
}

#hat-service .service-box-item-desc {
    color: #000;
    font-size: 14px;
    font-weight: 400;
    line-height: 20px
}

#hat-service .service-box-item ul {
    list-style-position: inside
}

@media only screen and (max-width:1024px) {
    #hat-service .service-box {
        gap: 16px
    }
}

@media only screen and (max-width:768px) {
    #hat-service .service-box .service-box-item {
        box-shadow: 0 9px 26px 0 rgba(0, 0, 0, .05);
        padding: 16px 13px;
        gap: 0;
        background-color: #fff;
        width: 100%
    }

    #hat-service .service-box .service-box-item-title:first-child {
        padding-bottom: 0;
        position: relative;
        padding-right: 40px
    }

    #hat-service .service-box .service-box-item-title:first-child:before {
        content: url(/uploads/12046237/File/deco/home/assets/arrow-down.svg);
        position: absolute;
        top: 50%;
        right: 0;
        transform: translateY(-50%);
        transition: .3s
    }

    #hat-service .service-box .service-box-item-desc {
        max-height: 0;
        overflow: hidden;
        transition: max-height .3s, padding .3s
    }

    #hat-service .service-box .service-box-item .service-box-item-title:not(:first-child) {
        max-height: 0;
        overflow: hidden
    }

    #hat-service .service-box .service-box-item.active .service-box-item-title:first-child {
        padding-bottom: 16px;
        border-bottom: 1px solid #e8e9ea
    }

    #hat-service .service-box .service-box-item.active .service-box-item-title:first-child:before {
        top: 0;
        transform: rotate(-180deg) translateY(0)
    }

    #hat-service .service-box .service-box-item.active .service-box-item-title:not(:first-child) {
        padding-top: 16px;
        max-height: 100vh
    }

    #hat-service .service-box .service-box-item.active .service-box-item-desc {
        padding-top: 16px;
        max-height: 100vh;
        line-height: 18px
    }
}

/*#endregion Service*/

/*#region Faq*/
#hat-faq {
    padding: 70px 0;
    background-color: #F6F9FC;
}

@media only screen and (max-width:1024px) {
    #hat-faq {
        padding: 50px 0;
        background-color: #F6F9FC;
    }
}

@media only screen and (max-width:768px) {
    #hat-faq {
        background-color: #f6f9fc
    }
}

#hat-faq .title {
    color: #1c244b;
    text-align: start;
    font-family: Poppins !important;
    font-size: 30px;
    font-weight: 600;
    line-height: 42px;
    text-transform: capitalize;
    margin-bottom: 24px
}

@media only screen and (max-width:1024px) {
    #hat-faq .title {
        text-align: center;
        color: #213343
    }
}

#hat-faq .faq-box {
    display: flex;
    gap: 61px;
    align-items: center
}

@media only screen and (max-width:1024px) {
    #hat-faq .faq-box {
        flex-direction: column-reverse;
        gap: 50px
    }
}

@media only screen and (max-width:768px) {
    #hat-faq .faq-box {
        gap: 27px
    }
}

#hat-faq .faq-box .photo {
    width: 50%;
    position: relative;
    z-index: 1;
    padding: 35px 24px
}

@media only screen and (max-width:1024px) {
    #hat-faq .faq-box .photo {
        width: 100%;
        padding: 35px 112px
    }
}

@media only screen and (max-width:768px) {
    #hat-faq .faq-box .photo {
        padding: 20px 15px
    }
}

#hat-faq .faq-box .photo img {
    width: 100%
}

#hat-faq .faq-box .photo:after {
    top: 0;
    right: 0
}

#hat-faq .faq-box .photo:after,
#hat-faq .faq-box .photo:before {
    position: absolute;
    content: " ";
    width: 50%;
    height: 80%;
    border-radius: 4px;
    background-color: #ffe4e4;
    z-index: -1
}

#hat-faq .faq-box .photo:before {
    bottom: 0;
    left: 0
}

#hat-faq .faq-box .text {
    width: 50%
}

@media only screen and (max-width:1024px) {
    #hat-faq .faq-box .text {
        width: 100%
    }
}

#hat-faq .faq-box .question {
    display: flex;
    flex-direction: column;
    gap: 16px
}

@media only screen and (max-width:768px) {
    #hat-faq .faq-box .question {
        gap: 10px
    }
}

#hat-faq .faq-box .question-item {
    background: #fff;
    padding: 19px 40px 19px 16px;
    border: 1px solid #e8e9ea;
    position: relative;
    cursor: pointer;
    border-radius: 4px;
    box-shadow: 0 9px 26px 0 rgba(0, 0, 0, .05)
}

#hat-faq .faq-box .question-item:after,
#hat-faq .faq-box .question-item:before {
    content: url(/uploads/12046237/File/deco/cities/assets/minus.svg);
    position: absolute;
    right: 16px;
    top: 19px;
    width: 24px;
    height: 24px;
}

#hat-faq .faq-box .question-item:after {
    transition: all .3s;
    transform: rotate(90deg)
}

@media only screen and (max-width:768px) {
    #hat-faq .faq-box .question-item {
        border-radius: 4px;
        border: 1px solid #e8e9ea;
        background: #fff;
        box-shadow: 0 9px 26px 0 rgba(0, 0, 0, .05);
        padding: 16px 40px 16px 13px
    }

    #hat-faq .faq-box .question-item:after {
        content: url(/uploads/12046237/File/deco/home/assets/arrow-down.svg);
        top: 16px;
        right: 13px;
        transform: rotate(0deg)
    }

    #hat-faq .faq-box .question-item:before {
        content: "";
        top: 16px;
        right: 13px
    }
}

#hat-faq .faq-box .question-item-title {
    color: #1c244b;
    font-family: Poppins !important;
    font-size: 16px;
    font-weight: 400;
    line-height: 25.6px
}

@media only screen and (max-width:768px) {
    #hat-faq .faq-box .question-item-title {
        font-size: 16px;
        line-height: 24px;
        font-weight: 600
    }
}

#hat-faq .faq-box .question-item-desc {
    color: #1c244b;
    font-family: Poppins !important;
    font-size: 14px;
    font-weight: 400;
    line-height: 22px;
    max-height: 0;
    overflow: hidden;
    transition: all .3s;
    padding-top: 0
}

@media only screen and (max-width:768px) {
    #hat-faq .faq-box .question-item-desc {
        font-size: 17px;
        line-height: 24px
    }
}

#hat-faq .faq-box .question-item.active .question-item-desc {
    padding-top: 16px;
    max-height: 100vh
}

#hat-faq .faq-box .question-item.active:after {
    transform: rotate(180deg)
}

@media only screen and (max-width:768px) {
    #hat-faq .faq-box .question-item.active:after {
        transform: rotate(180deg)
    }
}

/*#endregion Faq*/

/*#region Delivery*/
#hat-delivery {
    padding: 24px 0
}

@media only screen and (max-width:768px) {
    #hat-delivery {
        padding: 50px 0
    }
}

#hat-delivery img.top-img {
    max-width: 100%
}

@media only screen and (max-width:768px) {
    #hat-delivery img.top-img {
        display: none
    }
}

#hat-delivery .title {
    text-align: center;
    color: #172640;
    font-family: Poppins !important;
    font-size: 32px;
    font-weight: 600;
    line-height: 51.2px
}

#hat-delivery .delivery-box {
    border-radius: 4px;
    background: #fff;
    box-shadow: 2px 2px 11px 0 rgba(0, 109, 205, .1), 2px 1px 10px -1px rgba(115, 78, 234, .1);
    display: flex;
    justify-content: center;
    gap: 16px;
    padding: 30px 0
}

@media only screen and (min-width:768px) and (max-width:1024px) {
    #hat-delivery .delivery-box {
        transform: translateY(-10px)
    }
}

@media only screen and (max-width:768px) {
    #hat-delivery .delivery-box {
        flex-direction: column;
        box-shadow: none;
        gap: 0;
        padding: 0;
        margin-top: 22px
    }
}

#hat-delivery .delivery-box-item {
    display: flex;
    gap: 16px;
    align-items: center
}

@media only screen and (max-width:768px) {
    #hat-delivery .delivery-box-item {
        padding: 8px 0 14px;
        border-bottom: 1px solid rgba(126, 137, 155, .12156862745098039)
    }
}

#hat-delivery .delivery-box-item .photo {
    width: 48px;
    height: 48px
}

@media only screen and (max-width:768px) {
    #hat-delivery .delivery-box-item .photo {
        width: 80px;
        height: 80px
    }
}

#hat-delivery .delivery-box-item .photo img {
    width: 100%;
    height: 100%
}

@media only screen and (max-width:768px) {
    #hat-delivery .delivery-box-item .text {
        display: flex;
        flex-direction: column;
        gap: 10px
    }
}

#hat-delivery .delivery-box-item .text-title {
    color: #102437;
    font-family: Poppins !important;
    font-size: 16px;
    font-weight: 500;
    line-height: 23.68px;
    letter-spacing: -.32px
}

@media only screen and (max-width:768px) {
    #hat-delivery .delivery-box-item .text-title {
        font-size: 20px;
        line-height: 32px
    }
}

#hat-delivery .delivery-box-item .text-desc {
    color: #555e6d;
    font-family: Poppins !important;
    font-size: 12px;
    font-weight: 500;
    text-decoration: none;
    -webkit-text-decoration: none
}

@media only screen and (max-width:768px) {
    #hat-delivery .delivery-box-item .text-desc {
        font-size: 18px
    }
}

#hat-delivery .delivery-box-item .text-desc span {
    color: #353535
}

#hat-delivery .delivery-box-item .text .num span {
    color: #4475f2
}

@media only screen and (max-width:768px) {
    #hat-delivery .delivery-box-item:last-child {
        border-bottom: none
    }
}

/*#endregion Delivery*/
.category-steps {
    padding: 70px 0;
    background-color: #F6F9FC;
}

@media only screen and (max-width: 1024px) {
    .category-steps {
        padding: 50px 0;

    }
}

.category-steps .content-box {
    display: flex;
    gap: 40px;
    align-items: center;
}

@media only screen and (max-width: 768px) {
    .category-steps .content-box {
        flex-direction: column;
        gap: 15px;
    }
}

.category-steps .content-box-left {
    width: 48%;
}

.category-steps .content-box-left .photo {
    width: 100%;
}

.category-steps .content-box-left .photo img {
    width: 100%;
}

@media only screen and (max-width: 768px) {
    .category-steps .content-box-left .photo img {
        width: max-content;
    }

    .category-steps .content-box-left .photo {
        width: max-content;
        margin: 0 auto;
    }
}

@media only screen and (max-width: 768px) {
    .category-steps .content-box-left {
        width: 100%;
    }
}

.category-steps .content-box-left .section-title {
    color: #213343;
    font-family: Poppins !important;
    font-size: 24px;
    font-style: normal;
    font-weight: 600;
    line-height: 33.6px;
    text-transform: capitalize;
}

.category-steps .content-box-left .section-subtitle {
    color: #333;
    font-family: Poppins !important;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px;
    margin: 12px 0;
}

.category-steps .content-box .steps {
    width: 52%;
}

@media only screen and (max-width: 768px) {
    .category-steps .content-box .steps {
        width: 100%;
    }
}

.category-steps .content-box .steps-item-title {
    display: flex;
    gap: 12px;
    align-items: center;
    cursor: pointer;
}

.category-steps .content-box .steps-item-title p {
    color: #333;
    font-family: Poppins !important;
    font-size: 16px;
    font-style: normal;
    font-weight: 600;
    line-height: 24px;
    text-transform: capitalize;
    position: relative;
    transition: all 0.3s;
    padding-right: 35px;
}

.category-steps .content-box .steps-item-title p::after {
    content: url('data:image/svg+xml;charset=utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"><path d="M3.75 12L20.25 12" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/><path d="M13.5 18.75L20.25 12L13.5 5.25" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>');
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: 0px;
    transition: all 0.3s;
}

.category-steps .content-box .steps-item-title span.number {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    color: #FFF;
    font-family: Poppins !important;
    font-size: 16px;
    font-style: normal;
    font-weight: 600;
    line-height: 24px;
    text-transform: capitalize;
}

.category-steps .content-box .steps-item-content {
    margin: 8px 0;
    padding-left: 70px;
    position: relative;
    height: 0px;
    overflow: hidden;
    transition: all 0.3s;
}

.category-steps .content-box .steps-item-content p,
.category-steps .content-box .steps-item-content li {
    color: #000 !important;
    font-family: Poppins !important;
    font-size: 13px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px;
    list-style: disc;
}

.category-steps .content-box .steps-item-content ul.with-img-list {
    list-style: none !important;

}

.category-steps .content-box .steps-item-content ul.with-img-list li {
    list-style: none !important;
    display: flex;
    align-items: center;
    gap: 8px;
}

.category-steps .content-box .steps-item-content::before {
    content: '';
    position: absolute;
    width: 1px;
    height: 100%;
    background-color: #cccccccc;
    left: 20px;
    top: 0px;
}

.category-steps .content-box .steps-item-content p {
    list-style: disc;
    display: list-item;
}

.category-steps .content-box .steps-item:first-of-type .steps-item-title span {
    background-color: #6A4EE9;
}

.category-steps .content-box .steps-item:nth-child(2) .steps-item-title span {
    background-color: #227DFF;
}

.category-steps .content-box .steps-item:nth-child(3) .steps-item-title span {
    background-color: #FFCB29;
}

.category-steps .content-box .steps-item:nth-child(4) .steps-item-title span {
    background-color: #282527;
}

.category-steps .content-box .steps-item:nth-child(5) .steps-item-title span {
    background-color: #AE5892;
}

.category-steps .content-box .steps-item:nth-child(6) .steps-item-title span {
    background-color: #63c03e;
}

.category-steps .content-box .steps-item.active .steps-item-title p {
    color: #4475F2;
}

.category-steps .content-box .steps-item.active .steps-item-title p::after {
    content: url('data:image/svg+xml;charset=utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"><path d="M3.75 12L20.25 12" stroke="%234475F2" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/><path d="M13.5 18.75L20.25 12L13.5 5.25" stroke="%234475F2" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>');
    transform: translateY(-50%) rotate(45deg);
}

.category-steps .content-box .steps-item.active .steps-item-content {
    height: auto;
}