/*
Theme Name: LP Soap
Description: 
Version: 1.0.2
Author: Concepta Team
*/
*{
    padding:0;
    margin:0;

}
body,html{
    overflow-x: hidden;
    background: var(--Color-Biege-light, #F8F5F0);
}
.hidden{
    display: none !important;
}
h1{
    max-width: 570px;
    color: var(--Color-Black-0, #000);

    /* H2 */
    font-family: "DM Sans";
    font-size: 72px;
    font-style: normal;
    font-weight: 700;
    line-height: 95%; /* 68.4px */
    letter-spacing: -1.44px;
    margin-bottom: 24px;
}
a{
    text-decoration: none;
}

p,.main_left_row,.order_left,.original_price,.actual_price,.main_left_bottom{
    max-width: 570px;
    color: #000;

    /* P1 */
    font-family: "DM Sans";
    font-size: 17px;
    font-style: normal;
    font-weight: 400;
    line-height: 140%; /* 23.8px */
    letter-spacing: -0.34px;
}
header{
    display: none;
}
section{
    margin-bottom: 64px;
}
.main{
    display: flex;

}
.main_left{
    max-width: 50%;
    display: flex;
    flex-direction: column;
    flex:1 1 auto;
    background: var(--Color-Stars-active, #EFB95D);
    padding: 32px 83px 40px 64px;
    box-sizing: border-box;
}
.desktop_logo{
    max-width: 128px;
    margin-bottom: 133px;
}
.main_left p{
    margin-bottom: 48px;
}
.main_left_row{
    margin-bottom: 16px;
}
.main_left_row span{
    font-weight: 700;
    color: var(--Color-Red, #DD2C2C);
    margin-right: 6px;
}
.order{
    display: flex;
    align-items: center;
    width: 100%;
    max-width: 322px;
    border-radius: var(--Border-radius-Absolute, 200px);
    background: var(--Color-Black-20, #282828);
    padding: 16px 24px;
    margin-bottom: 26px;
    box-sizing: border-box;
}
.order_left,.actual_price{
    color:#fff;
}
.order_left{
    width: 120px;
    display: flex;
    justify-content: center;
    border-right: 1px solid #3D3A37;
    padding-right: 24px;
    margin-right: 24px;
}
.original_price{
    color: var(--Color-White-60, #817E7B);
    text-decoration: line-through;
    margin-right: 8px;
}
.main_left_center{
    flex:1 1 auto;
}
.main_left_bottom,.order_right{
    display: flex;
    align-items: center;
}
.order_right{
    width: 120px;
    justify-content: center;
}
.main_left_bottom img{
    margin-right: 8px;
}
.main_right{
    width: 50%;
    height: calc(50vw);
    max-height: 830px;
    display: flex;
    align-items: flex-end;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    background-image: url("img/main_soap.webp");
    padding: 40px 32px;
}
.main_right_content{
    display: flex;
    align-items: center;
}
.main_right_item{
    display: flex;
    align-items: center;
    border-radius: var(--Border-radius-Absolute, 200px);
    border: 1px solid var(--Color-White-80, #E2E0DF);
    background: var(--Color-White-100, #FFF);
    color: var(--Color-Black-20, #282828);
    text-align: center;
    /* P3 */
    font-family: "DM Sans";
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 160%; /* 22.4px */
    letter-spacing: -0.28px;
    padding: 8px 16px;
    margin-right: 16px;
}
.main_right_item img{
    margin-right:8px;
}
/*==============fixed==============*/
.product_fixed{
    width: 100%;
    position: fixed;
    bottom:0;
    z-index: 100;
    background-color: #fff;
    display: flex;
    padding: 16px 40px;
    border-radius: 16px 16px 0 0;
    box-sizing: border-box;
}
.fixed_left{
    flex:1 1 auto;
}
.fixed_left .deal_time{
    display: none;
}
.fixed_left h4{
    color: var(--Black-20, #282828);

    /* H8 */
    font-family: "DM Sans";
    font-size: 20px;
    font-style: normal;
    font-weight: 700;
    line-height: 120%; /* 24px */
    letter-spacing: -0.4px;
    margin-bottom: 16px;
}
.fixed_timer{
    display: flex;
    margin-top:16px;
}
.time-section{
    display: flex;
    flex-direction: column;
    margin-right: 48.5px;
}
.hours,.minutes,.seconds{
    color: var(--Black-20, #282828);
    text-align: center;

    /* H6 */
    font-family: "DM Sans";
    font-size: 32px;
    font-style: normal;
    font-weight: 700;
    line-height: 120%; /* 38.4px */
    letter-spacing: -0.64px;
}
.label{
    color: var(--Black-20, #282828);
    text-align: center;

    /* P1 */
    font-family: "DM Sans";
    font-size: 17px;
    font-style: normal;
    font-weight: 400;
    line-height: 140%; /* 23.8px */
    letter-spacing: -0.34px;
}
.product_fixed .h4_title{
    text-align: left;
}
.product_fixed_right{
    display: flex;
    justify-content: center;
    align-items: center;
}
.product_fixed_right_item{
    margin-left: 32px;
}
.product_fixed_right .order{
    width: 100%;
    max-width: 322px;
    min-width: 322px;
    height: 48px;
    color: var(--white-100, #FFF);
    text-align: center;
    /* P1 – Bold */
    font-family: "DM Sans";
    font-size: 17px;
    font-style: normal;
    font-weight: 700;
    line-height: 140%; /* 23.8px */
    letter-spacing: -0.34px;
    text-transform: capitalize;
    display: flex;
    padding: var(--Gap-Small-16, 16px) var(--Gap-Middle-24, 24px);
    justify-content: center;
    align-items: center;
    margin-bottom: 0;
    box-sizing: border-box;
}
/*===========benefits===========*/
.benefits{
    padding: 0 16px;
}
.benefits_top{
    display: flex;
    justify-content: center;
    margin-bottom: 32px;
}
.title{
    color: var(--Color-Black-20, #282828);
    /* H5 */
    font-family: "DM Sans";
    font-size: 40px;
    font-style: normal;
    font-weight: 700;
    line-height: 120%; /* 48px */
    text-transform: uppercase;
    letter-spacing: -0.8px;
}
.benefits_content{
    max-width: 1405px;
    display: grid;
    row-gap: 32px;
    column-gap: 100px;
    grid-template-columns: repeat(4,1fr);
    margin:0 auto;
}
.benefits_item{
    display: flex;
    align-items: center;
    color: var(--Color-Black-20, #282828);
    /* H8 */
    font-family: "DM Sans";
    font-size: 20px;
    font-style: normal;
    font-weight: 700;
    line-height: 120%; /* 24px */
    letter-spacing: -0.4px;
}
.benefits_item img{
    max-width: 48px;
    margin-right: 16px;
}
/*===========info===========*/
.info_row{
    display: flex;
    align-items: center;
    padding: 0 64px;
    margin-bottom: 32px;
}
.info_row:last-child{
    margin-bottom: 0;
}
.info_row .title{
    margin-bottom: 32px;
}
.info_row  .info_content{
    width: 50%;
}
.info_content_1{
    padding: 0 0 0 94px;
}
.info_content_2{
    padding: 0 94px 0 0;
}
.info_img{
    min-width: 50%;
    height: 40vw;
    border-radius: 32px;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    box-sizing: border-box;
}
.info_img img{
    display: none;
}
.info_img_1{
    background-image: url("img/girl_1.webp");
   
}
.info_img_2{
    background-image: url("img/girl_2.webp");
   
}
/*===========discover===========*/
.discover{
    display: flex;

}
.discover_left,.discover_right{
    width: 50%;
}
.discover_left{
    min-height: 830px;
    background: #334C11;
    padding: 64px 30px 64px 64px;
    box-sizing: border-box;
}
.discover_left .title,.discover_left p{
    color:#fff;
}
.discover_left p{
    margin-bottom: 60px;
}
.discover_left .title{
    margin-bottom: 16px;
}
.discover_left_content{
    display: grid;
    row-gap: 32px;
    column-gap: 32px;
    grid-template-columns: repeat(2,1fr);
}
.discover_right{
    min-height: 100%;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    background-image: url("img/soap_img.webp");
}
.discover_right img{
    display: none;
}
.discover_item{
    display: flex;
    align-items: center;
}
.discover_item_left{
    margin-right: 24px;
}
h4{
    color: var(--Color-White-100, #FFF);
    /* H8 */
    font-family: "DM Sans";
    font-size: 20px;
    font-style: normal;
    font-weight: 700;
    line-height: 120%; /* 24px */
    letter-spacing: -0.4px;
    margin-bottom: 8px;
}
.discover_item p{
    margin:0;
}
.discover_left_bottom span{
    display: inline-block;
    color: var(--Color-White-100, #FFF);
    font-family: "DM Sans";
    font-size: 17px;
    font-style: normal;
    font-weight: 400;
    line-height: 140%; /* 23.8px */
    letter-spacing: -0.34px;
    text-decoration: underline;
    margin-top: 32px;
}
.discover_left_bottom span:hover{
    cursor: pointer;
}
.discover_more_text{
    max-height: 0;
    overflow: hidden;
    transition-duration: .5s;
    margin-top: 0;
}
.discover_more_text p{
    margin-bottom: 0 !important;
}
/*===========include===========*/
.include{
    padding: 0 16px;
    margin:120px 0;
}
.include_top{
    display: flex;
    justify-content: center;
    margin-bottom: 64px;
}
.include_content{
    max-width: 1100px;
    display: grid;
    row-gap: 40px;
    column-gap: 40px;
    grid-template-columns: repeat(4,1fr);
    margin:0 auto;
}
.include_item{
    display: flex;
    align-items: center;
}
.include_item_left{
    width: 72px;
    min-width: 72px;
    height: 72px;
    background-color: #A9011C;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 12px;
    margin-right:16px;
    box-sizing: border-box;
}
.include_item_left img{
    width: 100%;
}
.include_item_right{
    color: var(--Color-Black-20, #282828);
    /* H8 */
    font-family: "DM Sans";
    font-size: 20px;
    font-style: normal;
    font-weight: 700;
    line-height: 120%; /* 24px */
    letter-spacing: -0.4px;
}
/*===========deal===========*/
.deal{
    border-top: 1px solid #E2E0DF;
    border-bottom: 1px solid #E2E0DF;
    display: flex;
    align-items: center;
}
.deal_left,.deal_right{
    width: 50%;
}

.deal_left{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.deal_left .title{
    text-align: center;
    margin-bottom: 16px;
}
.deal_right{
    height: calc(50vw);
    max-height: 715px;
    background-position: center;
    background-size: cover;
    background-image: url("img/girl_3.webp");
}
/*===========recommend===========*/
.recommend{
    padding:100px 56px 64px;
    margin-bottom: 0;
}
.recommend_top{
    display: flex;
    justify-content: center;
    text-align: center;
    margin-bottom: 64px;
}
.recommend_top .title{
    max-width: 590px;
}
.recommend_content{
    max-width: 1310px;
    display: grid;
    row-gap: 32px;
    column-gap: 32px;
    grid-template-columns: repeat(3,1fr);
    margin:0 auto;
}
.recommend_item{
    max-width: 416px;
    background-color: #fff;
    border-radius: 16px;
}
.recommend_item_top img{
    width: 100%;
}
.recommend_item_content{
    padding: 24px;
}
.recommend_rate{
    display: flex;
    align-items: center;
    color: var(--Black-20, #282828);
    /* H8 */
    font-family: "DM Sans";
    font-size: 20px;
    font-style: normal;
    font-weight: 700;
    line-height: 120%; /* 24px */
    letter-spacing: -0.4px;
    margin-bottom: 24px;
}
.recommend_rate img{
    margin-left: 8px;
}
.recommend_name{
    color: var(--Black-20, #282828);

    /* H7 */
    font-family: "DM Sans";
    font-size: 24px;
    font-style: normal;
    font-weight: 700;
    line-height: 120%; /* 28.8px */
    letter-spacing: -0.48px;
    margin-bottom: 16px;
}
.recommend hr{
    display: none;
}
/*===========footer===========*/
footer{
    background: var(--Black-0, #000);
    padding: 64px 80px 0;
}
.footer_top{
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-bottom: 56px;
}
.footer_top .title,.footer_top .main_left_row{
    color:#fff;
}
.footer_top .title{
    margin-bottom: 16px;
}
footer .order{
    background-color: #fff;
    color:#000 !important;
}
footer .order_left,footer .actual_price {
    color: var(--Color-Black-20, #282828);
    text-align: center;
    /* P1 – Bold */
    font-family: "DM Sans";
    font-size: 17px;
    font-style: normal;
    font-weight: 700;
    line-height: 140%; /* 23.8px */
    letter-spacing: -0.34px;
}
footer .original_price{
    font-weight: 700;
}
footer .actual_price{
    text-align: right;
}
.footer_bottom{
    display: flex;
    justify-content: center;
    border-top: 1px solid rgba(150, 148, 145, 0.40);
    padding: 64px 0;
}
.footer_bottom a{
    color: var(--White-100, #FFF);
    text-align: right;
    font-family: "DM Sans";
    font-size: 17px;
    font-style: normal;
    font-weight: 400;
    line-height: 160%; /* 27.2px */
    display: inline-block;
    margin: 0 16px;
}
/*===========media===========*/
@media(max-width:1440px){
    .main_left{
        padding: 32px 23px 40px 56px;
    }
    .desktop_logo{
        margin-bottom: 80px;
    }
    h1{
        font-size: 64px;
        font-style: normal;
        font-weight: 700;
        line-height: 95%; /* 60.8px */
        letter-spacing: -1.28px;
        margin-bottom: 32px;
    }
    .main_right{
        height: calc(55vw);
    }
    .title{
        font-size: 32px;
        font-style: normal;
        font-weight: 700;
        line-height: 120%; /* 38.4px */
        letter-spacing: -0.64px;
    }
    .benefits_content{
        column-gap: 28px;
    }
    .benefits_item{
        font-size: 16px;
        font-style: normal;
        font-weight: 700;
        line-height: 150%; /* 24px */
        letter-spacing: -0.32px;
    }
    .info_content_1{
        padding: 0 0 0 32px;
    }
    .info_content_2{
        padding: 0 32px 0 0;
    }
    .discover_left{
        min-height: 875px;
    }
    .discover_left p{
        margin-bottom: 32px;
    }
    .discover_left_content{
        grid-template-columns: repeat(1,1fr);
    }
    .discover_item_right p{
        margin-bottom: 0;
    }
    .discover_left .discover_more_text p{
        margin-bottom: 0 !important;
    }
    .discover_right{
        background-position: center;
        background-size: cover;
        background-repeat: no-repeat;
        background-image: url("img/soap_img_2.webp");
    }
    .include_item_left{
        width: 48px;
        min-width: 48px;
        height: 48px;
        padding: 6px;
    }
    .include_item_left img{
        width: 100%;
    }
    .include_item_right{
        font-size: 16px;
        font-style: normal;
        font-weight: 700;
        line-height: 150%; /* 24px */
        letter-spacing: -0.32px;
    }
    .deal_left .title,footer .title{
        font-size: 40px;
        font-style: normal;
        font-weight: 700;
        line-height: 120%; /* 48px */
        letter-spacing: -0.8px;
    }
    .recommend{
        padding:100px 56px 64px;
    }
}
@media(max-width:1024px){
    header{
        display: flex;
        justify-content: center;
        background: var(--Color-Stars-active, #EFB95D);
        padding: 16px 0 32px;
    }
    header img{
        max-width: 150px;
    }
    .main{
        flex-direction: column;
    }
    .main_left{
        width: 100%;
        max-width: unset;
        order: 2;
        padding: 24px 16px;
    }
    h1{
        max-width: unset;
        font-size: 32px;
        font-style: normal;
        font-weight: 700;
        line-height: 120%; /* 38.4px */
        letter-spacing: -0.64px;
        margin-bottom: 16px;
    }
    .main_left p{
        max-width: unset;
    }
    .main_left_row{
        max-width: unset;
        display: flex;
        justify-content: center;
    }
    .main_left .order{
        margin:0 auto 24px;
    }
    .main_right{
        width: 100%;
        min-height: 405px;
        padding: 24px 16px;
    }
    .desktop_logo{
        display: none;
    }
    .main_left_bottom{
        max-width: unset;
        display: flex;
        justify-content: center;
    }
    .product_fixed{
        flex-direction: column;
        border-radius: 32px 32px var(--Border-radius-Zero, 0px) var(--Border-radius-Zero, 0px);
        padding: 10px 16px 18px;

    }
    .fixed_left{
        display: flex;
        justify-content: center;
        align-items: center;
        margin-bottom: 12px;
    }
    .fixed_left h4{
        display: flex;
        font-size: 14px;
        font-style: normal;
        font-weight: 400;
        line-height: 160%; /* 22.4px */
        letter-spacing: -0.28px;
        margin:0;
    }
    .fixed_left h4::after{
        content:"";
        display: inline-block;
        width: 1px;
        height: 12px;
        background: var(--Color-White-60, #817E7B);
        position: relative;
        top:5px;
        margin:0 16px;
    }
    .deal_time{
        display: inline-block !important;
        color: var(--Black-20, #282828);
        /* P2 – Bold */
        font-family: "DM Sans";
        font-size: 16px;
        font-style: normal;
        font-weight: 700;
        line-height: 150%; /* 24px */
        letter-spacing: -0.32px;
        position: relative;
        top:1px;
    }
    .fixed_timer{
        display: none;
    }
    .product_fixed_right .order{
        min-width: unset;
    }
    .benefits_top{
        justify-content: flex-start;
        margin-bottom: 40px;
    }
    .benefits_content{
        row-gap: 0;
        grid-template-columns: repeat(1,1fr);
    }
    .benefits_item{
        font-size: 20px;
        font-style: normal;
        font-weight: 700;
        line-height: 120%; /* 24px */
        letter-spacing: -0.4px;
        border-bottom: 1px solid #E2E0DF;
        padding-bottom: 24px;
        margin-bottom: 24px;
    }
    .info_row{
        flex-direction: column;
        padding: 0 16px;
        margin-bottom: 64px;
    }
    .info_img{
        width: 100%;
        height: auto;
        background-image: none;
        margin:0 0 24px 0 !important;
        overflow: hidden;
    }
    .info_img img{
        display: inline-block;
        width: 100%;
    }
    .info_content{
        width: 100% !important;
        order: 2;
        padding: 0 !important;
    }
    .info_content .title{
        margin-bottom: 24px;
    }
    .discover{
        flex-direction: column;
    }
    .discover_left{
        width: 100%;
        order: 2;
        padding: 48px 16px;
    }
    .discover_left_content{
        row-gap: 0;
    }
    .discover_item{
        border-bottom: 1px solid #E2E0DF;
        padding-bottom: 24px;
        margin-bottom: 24px;
    }
    .discover_right{
        width: 100%;
        height: auto;
        min-height: unset;
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        background-image: none !important;
    }
    .discover_right img{
        display: inline-block;
        width: 100%;
    }
    .include{
        margin:64px 0;
    }
    .include_top{
        justify-content: flex-start;
        margin-bottom: 40px;
    }
    .include_content{
        row-gap: 0;
        grid-template-columns: repeat(1,1fr);
    }
    .include_item{
        border-bottom: 1px solid #E2E0DF;
        padding-bottom: 16px;
        margin-bottom: 16px;
    }
    .include_item_right{
        font-size: 20px;
        font-style: normal;
        font-weight: 700;
        line-height: 120%; /* 24px */
        letter-spacing: -0.4px;
    }
    .deal{
        border-top: none;
        flex-direction: column;
        padding-bottom: 64px;
        margin-bottom: 0;
    }
    .deal_left{
        width: 100%;
        order: 2;
        padding: 0 16px;
        box-sizing: border-box;
    }
    .deal_left .title,footer .title{
        font-size: 32px;
        font-style: normal;
        font-weight: 700;
        line-height: 120%; /* 38.4px */
        letter-spacing: -0.64px;
    }
    .deal_right{
        width: 100%;
        max-width: 600px;
        height: calc(80vw);
        margin-bottom: 32px;
    }
    .recommend{
        padding: 64px 16px;
    }
    .recommend_top{
        justify-content: flex-start;
        text-align: left;
        margin-bottom: 40px;
    }
    .recommend_content{
        row-gap: 0;
        grid-template-columns: repeat(1,1fr);
    }
    .recommend_item{
        margin:0 auto 40px;
    }
    .recommend_content hr{
        display: inline-block;
        width: 100%;
        height: 1px;
        border: none;
        outline: none;
        background-color: #E2E0DF;
        margin-bottom: 40px;
    }
    .recommend_content hr:last-child{
        margin-bottom: 0;
    }
    .recommend_item_content{
        padding: 32px 16px 24px;
    }
    footer{
        padding: 56px 16px;
    }
    .footer_bottom{
        flex-wrap: wrap;
        padding: 40px 0;
    }
    .footer_bottom a{
        margin-bottom: 16px;
    }
    
    
}
@media(max-width:768px){
    .main_right_content{
        flex-direction: column;
        align-items: start;
    }
    .main_right_content img{
        margin-right: 4px;
    }
    .main_right_item{
        padding: 2px 8px;
        margin-bottom: 8px;
    }
    .footer_bottom{
        justify-content: space-between;
    }
}