:root {
    --brand_color: #D1B096;
}

.color_brand {
    color: var(--brand_color);
}

.color_black {
    color: black;
}

.font_PlayfairDisplay {
    font-family: "Playfair Display", serif;
    font-style: normal;
}

.container,
.container-fluid,
.container-lg,
.container-md,
.container-sm,
.container-xl {
    padding: 0%
}

.cursorPointer {
    cursor: pointer
}

@media(max-width: 500px) {
    .m_txt_center {
        text-align: center
    }
}

#HeroSection {
    position: relative;
    overflow: hidden;
    -webkit-background-size: cover;
    background-size: cover;
    background-repeat: repeat repeat !important;
    background-position: center !important;
    background-color: #f3f2ef;
    background: url(../images/bg_Hero.png) white;
    padding: 35px 0px 90px;
}

#HeroSection .container {
    position: relative;
    z-index: 2;
}

[data-title*=Section] {
    padding-top: 35px !important;
    padding-bottom: 35px !important;
    position: relative
}

[data-title*=Upage] {
    padding-top: 0px !important;
    padding-bottom: 10px !important;
}

@media(min-width: 768px) {
    [data-title*=Upage] {
        padding-top: 0 !important;
        padding-bottom: 45px !important
    }
}

@media(min-width: 992px) {
    [data-title*=Upage] {
        padding-top: 45px !important;
        padding-bottom: 100px !important;
    }

    [data-title*=Section] {
        padding-top: 80px !important;
        padding-bottom: 80px !important
    }
}

@media(min-width: 767px) and (max-width:991px) {
    [data-title*=Section] {
        padding-top: 60px !important;
        padding-bottom: 60px !important
    }
}

[data-title*=cf-vimeo-video] .elVideo {
    /* box-shadow: 0 0 20px 0 rgb(0 0 0 / 11%) !important; */
    border-radius: 15px;
}

[data-title*=cf-vimeo-video] .fluid-width-video-wrapper {
    background-color: transparent;
    padding-top: 100%;
    border-radius: 15px;
}

.fluid-width-video-wrapper iframe {
    border-radius: 0px
}

@media(max-width: 500px) {
    [data-title*=Upage] {
        background-size: cover
    }

    [data-title*=cf-vimeo-video] .fluid-width-video-wrapper {
        border: none;
        background-color: #dadada;
        /* padding-top: 56.25%; */
        border-radius: 0px;
    }

    .fluid-width-video-wrapper iframe {
        border-radius: 0px;
    }
}

.txt_uppercase {
    text-transform: uppercase
}

.txt_capitalize {
    text-transform: capitalize
}

.txt_white {
    color: #fff;
}

.txt_grey {
    color: #969696;
}

.txt_lightgrey {
    color: #cfcbc0;
}

@media(max-width: 500px) {
    .m_txt_uppercase {
        text-transform: uppercase
    }

    .m_txt_capitalize {
        text-transform: capitalize
    }

    .m-txt_white {
        color: #fff
    }
}

.elButton span {
    pointer-events: none
}

.elButton i {
    margin-right: 10px
}

@media(max-width: 500px) {
    .elButton {
        font-weight: 400
    }

    .elButtonMain {
        font-weight: 600;
        letter-spacing: 1px
    }

    .elButton i {
        margin-right: 5px
    }
}

ul,
ol {
    margin-top: 0;
    margin-bottom: 10px
}

.elBulletList {
    padding: 0;
    list-style-type: none
}

.elBulletListNew li {
    position: relative;
    padding-bottom: 6px;
    list-style-type: none;
    margin-bottom: 0;
    padding-left: 1.6em
}

.elBulletListNew li i {
    position: absolute;
    top: 0;
    left: 0
}

.elBulletList li:before {
    left: 10px !important;
    position: absolute
}

.elBulletListNew li img {
    position: absolute;
    top: 4px;
    left: 2px;
    width: 20px;
    height: 20px
}

@media(max-width: 500px) {
    .elBulletList {
        padding-left: 0;
        margin-bottom: 0
    }

    .elBulletListNew li {
        margin-bottom: 0;
        padding-left: 33px;
        padding-bottom: 10px;
        font-size: 16px !important;
        line-height: 24px
    }

    .elBulletListNew li i {
        margin-left: -20px
    }

    .elBulletList li:before {
        left: 10px !important
    }

    .elBulletListNew li img {
        top: 1px
    }
}

.iframeBlocker,
.iframeUnmute {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    z-index: 2
}

.video-sound-overlay {
    width: 100%;
    height: 100%;
    background-image: url(../images/play_button.png);
    background-repeat: no-repeat;
    position: absolute;
    left: 0%;
    right: 0%;
    top: 0%;
    bottom: 0%;
    margin: auto;
    background-size: 12%;
    background-position: center
}

@media(max-width: 500px) {
    .video-sound-overlay {
        background-size: 20%;
    }
}

.video-sound-overlay img {
    margin-top: 5px;
    margin-left: 10px;
    animation: pulse 2s infinite;
    animation-timing-function: ease-out
}

.video-sound-overlay img {
    width: 18%;
    padding: 10px;
    position: absolute
}

.video-sound-overlay .play-button {
    position: absolute;
    top: 50%;
    left: 50%;
    margin-left: -100px;
    margin-top: -100px
}

@media(min-width: 700px) {
    .fluid-width-video-wrapper {
        box-shadow: 0 0 20px 0 rgb(233 233 233/8%) !important;
        overflow: hidden;
    }

    .ultv-video__play-icon {
        width: 75px;
    }
}

.ultv-aspect-ratio-16_9 .ultv-video__outer-wrap {
    padding-bottom: 56.25%;
    border-radius: 0
}

.ultv-video__outer-wrap:before {
    opacity: .2
}

.whatsAppButton {
    border-radius: 7px;
    /* background: var(--brand_color); */
    border: 1px solid var(--brand_color);
    padding: 13px 50px 13px 40px;
    display: inline-flex;
    color: #ffffff !important;
    font-size: 22px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    justify-content: center;
    align-items: center;
    position: relative;
}

.whatsAppButton.black {
    background: black;
    color: #fff !important;
}

.whatsAppButton.whiteShadow {
    box-shadow: 0px 4px 19px 0px rgb(239 239 239 / 33%);
}

.whatsAppButton i {
    font-size: 25px;
    line-height: 40px;
    margin-right: 15px;
    pointer-events: none;
}

.whatsAppButton .text {
    display: inline-flex;
    flex-direction: column;
    align-content: center;
    justify-content: center;
    align-items: center;
    pointer-events: none;
}

.whatsAppButton .text .maintitle {
    /* font-family: Poppins; */
    font-size: 25px;
    font-weight: 500;
    line-height: 40px;
    letter-spacing: 0em;
    text-align: center;
}

.whatsAppButton .text .subtitle {
    font-family: Poppins;
    font-size: 18px;
    font-weight: 400;
    line-height: 27px;
    letter-spacing: 0em;
    text-align: center;
}

@media(max-width:500px) {
    .whatsAppButton {
        padding: 3.5vw 5vw;
        display: flex;
        border-radius: 1vw;
    }

    .whatsAppButton.yellow {
        background: #FEDC50;
        color: #242A2E !important;
    }

    .whatsAppButton.whiteShadow {
        box-shadow: 0px 4px 19px 0px rgb(239 239 239 / 33%);
    }

    .whatsAppButton i {
        font-size: 6.5vw;
        line-height: 7.5vw;
        margin-right: 12px;
    }

    .whatsAppButton .text {
        padding-right: 8px;
    }

    .whatsAppButton .text .maintitle {
        font-weight: 600;
        font-size: 4.85vw;
        line-height: 6.5vw;
    }

    .whatsAppButton .text .subtitle {
        font-size: 3.77vw;
        line-height: 5.56vw;
    }
}

#HeroSection_StyleOne {
    position: relative;
    overflow: hidden;
    background: url(https://luxcut.dropletthemes.com/wp-content/uploads/revslider/thairdresser-home-slider/Luxcut-Hairdresser-Home-Banner-Image-002.jpg) white;
    ) white;
    -webkit-background-size: cover;
    background-size: cover;
    background-repeat: repeat repeat !important;
    background-position: center bottom !important;
    padding: 90px 0px 90px;
}

#HeroSection_StyleOne .cover {
    width: 100%;
    height: 100%;
    display: block;
    position: absolute;
    top: 0px;
    left: 0px;
    background: hsl(0deg 0% 0% / 84%);
}

.flowerHerocolor {
    display: inline-block;
    width: 21px;
    margin-top: -9px;
    filter: brightness(0) saturate(100%) invert(77%) sepia(31%) saturate(287%) hue-rotate(344deg) brightness(91%) contrast(85%);
}

#HeroSection_StyleTwo {
    position: relative;
    overflow: hidden;
    background: url(../images/demo/close-up-man-selfcare-products_v1.jpg) white;
    -webkit-background-size: cover;
    background-size: cover;
    background-repeat: repeat repeat !important;
    background-position: center bottom !important;
    padding: 90px 0px 90px;
}

#HeroSection_StyleTwo .cover {
    width: 100%;
    height: 100%;
    display: block;
    position: absolute;
    top: 0px;
    left: 0px;
    background: hsl(0deg 0% 0% / 84%);
    /* background: hsl(31.87deg 75.2% 4.19% / 93%); */
}

.heroCompare {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 80%;
    margin: 75px auto 110px;
}

.heroCompare .left {
    position: relative;
    width: 42%;
}

.heroCompare .left img.incline {
    display: block;
    width: 100%;
    transform: rotate(357deg);
}

.heroCompare .left img.wrong {
    position: absolute;
    display: block;
    width: 53px;
    bottom: -42px;
    left: 50%;
    transform: translate(-24%, 50%) rotate(356deg);
    filter: brightness(0) saturate(100%) invert(37%) sepia(65%) saturate(3227%) hue-rotate(338deg) brightness(83%) contrast(122%);
    opacity: 0.5;
}

.heroCompare .versus {
    width: 16%;
    text-align: center;
    font-size: 82px;
    font-weight: 400;
    color: #fadbab;
    font-family: 'Playfair Display';
    font-style: italic;
}

.heroCompare .right {
    position: relative;
    width: 42%;
}

.heroCompare .right img.incline {
    display: block;
    width: 100%;
    transform: rotate(3deg);
}

.heroCompare .right img.check {
    position: absolute;
    display: block;
    width: 53px;
    bottom: -33px;
    left: 50%;
    transform: translate(-64%, 66%) rotate(4deg);
    filter: brightness(0) saturate(100%) invert(51%) sepia(40%) saturate(844%) hue-rotate(81deg) brightness(123%) contrast(88%);
    opacity: 0.5;
}

#HeroSection_StyleThree {
    position: relative;
    overflow: hidden;
    background: url(../images/demo/close-up-man-selfcare-products.jpg) white;
    -webkit-background-size: cover;
    background-size: cover;
    background-repeat: repeat repeat !important;
    background-position: center !important;
    padding: 90px 0px 90px;
}

#HeroSection_StyleThree .cover {
    width: 100%;
    height: 100%;
    display: block;
    position: absolute;
    top: 0px;
    left: 0px;
    background: hsl(0deg 0% 0% / 67%);
}

.swiper_Frizzy {}

.swiper_Frizzy img {
    display: block;
    width: 100%;
}

#HeroSection_StyleFour {
    position: relative;
    overflow: hidden;
    background: url(../images/demo/top-view-chinese-ink-concept.jpg) white;
    -webkit-background-size: cover;
    background-size: cover;
    background-repeat: repeat repeat !important;
    background-position: center 70% !important;
    padding: 90px 0px 90px;
}

#HeroSection_StyleFour .cover {
    width: 100%;
    height: 100%;
    display: block;
    position: absolute;
    top: 0px;
    left: 0px;
    background: hsl(0deg 0% 0% / 84%);
    background: hsl(0deg 0% 0% / 34%);
}

.swiper_Curl_Perm {}

.swiper_Curl_Perm img {
    display: block;
    width: 100%;
}

#OurExpertise {
    position: relative;
    padding: 100px 0px;
    background: url(../images/bg_Haircare_Products.jpg);
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
}

@media(min-width:800px){
    .ExpertiseVideo {
        width: 50%;
        margin: 60px auto 90px;
    }
}

#BrandAdd {
    position: relative;
    background: black;
    padding: 85px 0px 105px;
}

.brandUsed {
    width: 100%;
    padding: 0px 100px;
    margin: 55px 0px 0px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.brandUsed .list {
    width: 20%;
    position: relative;
    height: 60px;
    display: flex;
    align-content: center;
    justify-content: center;
    align-items: center;
}

.brandUsed .list:before {
    position: absolute;
    bottom: -5px;
    left: 0px;
    content: '';
    height: 70px;
    border-style: solid;
    border-width: 0px 0px 0px 1px;
    border-color: #D1B09680;
    transition: background 0.3s, border 0.3s, border-radius 0.3s, box-shadow 0.3s;
    padding: 0px 0px 0px 0px;
}

.brandUsed .list:last-child:after {
    position: absolute;
    bottom: -12px;
    right: 0px;
    content: '';
    height: 65px;
    border-style: solid;
    border-width: 0px 0px 0px 1px;
    border-color: #D1B09680;
    transition: background 0.3s, border 0.3s, border-radius 0.3s, box-shadow 0.3s;
    padding: 0px 0px 0px 0px;
}

.brandUsed .list img {
    display: block;
    filter: brightness(0) saturate(100%) invert(64%) sepia(20%) saturate(428%) hue-rotate(345deg) brightness(87%) contrast(89%);
}

.brandUsed .list:nth-child(1) img {
    width: 136px;
    max-width: 100%;
    opacity: 0.8;
    transition-duration: 1s;
}

.brandUsed .list:nth-child(2) img {
    width: 165px;
    max-width: 100%;
    opacity: 0.8;
    transition-duration: 1s;
}

.brandUsed .list:nth-child(3) img {
    width: 148px;
    max-width: 100%;
    opacity: 0.8;
    transition-duration: 1s;
}

.brandUsed .list:nth-child(4) img {
    width: 160px;
    max-width: 100%;
    opacity: 0.8;
    transition-duration: 1s;
}

.brandUsed .list:nth-child(5) img {
    width: 126px;
    max-width: 100%;
    opacity: 0.8;
    transition-duration: 1s;
}

#OurExpertise .cover {
    width: 100%;
    height: 100%;
    display: block;
    position: absolute;
    top: 0px;
    left: 0px;
    background: #000000c2;
}

img.serviceLine {
    filter: brightness(0) saturate(100%) invert(77%) sepia(31%) saturate(287%) hue-rotate(344deg) brightness(91%) contrast(85%);
    height: 20px;
    margin: 20px auto 40px;
}

.VolumeStraightening {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    margin: 0px auto 100px;
    gap: 20px;
}

.VolumeStraightening .list {}

.VolumeStraightening .list img {
    display: block;
    width: 100%;
}

.RemodelingFrizzyHair {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    margin: 0px auto 100px;
    gap: 20px;
}

.RemodelingFrizzyHair .list {}

.RemodelingFrizzyHair .list img {
    display: block;
    width: 100%;
}

.CurlPermStyling {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    margin: 0px auto 80px;
    gap: 20px;
}

.CurlPermStyling .list {}

.CurlPermStyling .list img {
    display: block;
    width: 100%;
}

#Celeb {
    position: relative;
    padding: 100px 0px;
    background: url(../images/bg_Celebrity.jpg);
    background-position: center;
    background-size: cover;
    overflow: hidden;
}

#Celeb .cover {}

#Collaboration {
    position: relative;
    padding: 100px 0px 0px;
    background: linear-gradient(0deg, #f6ece2, transparent);
    background: #F4F2F1;
    background: url(../images/bg_Patterned_Wall.jpg);
    background: url(../images/bg_White_Paper_Texture.png);
    background-position: bottom;
    background-size: cover;
    overflow: hidden;
}

#Collaboration .cover {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0px;
    left: 0px;
    background: #e4e3df2b;
    /* filter: blur(16px); */
}

#Collaboration .container-fluid {
    position: relative;
}

.Colla_Japan {
    display: flex;
    font-size: 45px;
    font-weight: 500;
    width: 80%;
    justify-content: center;
    align-items: center;
    margin: 75px auto 20px;
}

.Colla_Japan .right {
    width: 40%;
}

.Colla_Japan .right .text {
    font-size: 45px;
    font-weight: 500;
    font-family: 'Poppins';
    text-transform: uppercase;
    text-align: right;
}

.Colla_Japan .times {
    width: 4%;
    margin: 0px 4%;
}

.Colla_Japan .times img {
    display: block;
    width: 100%;
}

.Colla_Japan .left {
    width: 40%;
}

.Colla_Japan .left .text {
    font-size: 45px;
    font-weight: 500;
    font-family: 'Poppins';
    text-transform: uppercase;
}

.FloatBehindStar {
    position: absolute;
    bottom: -40%;
    left: 50%;
    transform: translateX(-50%);
}

.SixProduct {
    display: flex;
    align-items: flex-end;
    width: 78%;
    margin: 80px auto -22px;
    gap: 2%;
}

.SixProduct .list {
    width: 19%;
}

.SixProduct .list:nth-child(1) {
    width: 11%;
}

.SixProduct .list:nth-child(2) {
    width: 18%;
}

.SixProduct .list:nth-child(3) {
    width: 17%;
}

.SixProduct .list:nth-child(4) {}

.SixProduct .list:nth-child(5) {}

.SixProduct .list:nth-child(6) {
    width: 10%;
}

.SixProduct .list img {
    display: block;
    width: 100%;
}

#Compare {
    position: relative;
    padding: 100px 0px;
    background: url(../images/bg_Compare.jpg);
    background-size: cover;
    background-position: center;
}

#Compare .cover {
    width: 100%;
    height: 100%;
    display: block;
    position: absolute;
    top: 0px;
    left: 0px;
    background: #000000cc;
}

.CompareOthers {
    display: flex;
    justify-content: space-evenly;
    width: 85%;
    margin: 65px auto;
}

.CompareOthers .halfWidth {
    width: 48%;
    /* border: 2.02355px solid #000000; */
    padding: 0px 0px 30px;
}

.CompareOthers .halfWidth.left {
    background: #fff6ee;
}

.CompareOthers .halfWidth.right {
    width: 39%;
    background: #fffffe;
}

.CompareOthers .halfWidth .head {
    color: white;
    background-color: #585858;
    font-weight: 700;
    font-size: 40px;
    line-height: 40px;
    height: 106px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.CompareOthers .halfWidth.left .head {
    color: #d1b096;
    background-color: #d3a480;
    color: #000000;
}

.CompareOthers .halfWidth.left .head img {
    display: block;
    width: 48%;
}

.CompareOthers .halfWidth.right .head {}

.CompareOthers .halfWidth .tick {
    padding: 15px 0px 0px;
}

.CompareOthers .halfWidth .list span {
    position: absolute;
    top: 26px;
    left: 35px;
}

.CompareOthers .halfWidth .tick span {
    background: url(../images/Green-Check.png);
    background-size: cover;
    width: 23px;
    height: 20px;
}

.CompareOthers .halfWidth .cross {
    padding: 15px 0px 0px;
}

.CompareOthers .halfWidth .cross span {
    background: url(../images/Red-Wrong.png);
    background-size: cover;
    width: 21px;
    height: 19px;
}

.CompareOthers .halfWidth .list {
    position: relative;
    border-bottom: 0px;
    border-top: 0px;
    font-weight: 400;
    font-size: 26px;
    line-height: 32px;
    color: #000000;
    padding: 20px 30px 5px 75px;
    text-align: left;
}

#Misconceptions {
    position: relative;
    background: #F3F2F0;
    padding: 100px 0px 0px;
}

.willnotness {
    text-decoration-color: #d1b096;
}

.ConceptClick {
    background: linear-gradient(90deg, #000000 0%, #000000 103.81%);
    position: relative;
    border-radius: 5px 50px 0px 0px;
    margin: 0px auto;
    display: block;
}

.ConceptClick .group {
    padding: 30px 95px 30px 95px;
    text-align: center;
    color: #ffffff;
    cursor: pointer;
}

.ConceptClick .group .tag {
    font-family: 'Poppins';
    font-size: 40px;
    font-weight: 600;
    line-height: 48px;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ConceptClick .group .tag .image {
    position: relative;
    width: 85px;
    height: 48px;
}

.ConceptClick .group .tag img {
    position: absolute;
    top: 0%;
    left: 50%;
    transform: translate(-50%, -19%) rotate(357deg);
    margin: 0px;
    width: 50px;
    filter: brightness(0) saturate(100%) invert(93%) sepia(8%) saturate(2375%) hue-rotate(312deg) brightness(91%) contrast(79%);
}

.ConceptClick .group .title {
    font-family: 'Jost';
    font-size: 30px;
    font-weight: 400;
    line-height: 38px;
    text-align: center;
    padding: 15px 0px 0px;
    color: #acacac;
    margin: 0px auto;
}

.ConceptClick .group .desc {
    width: 1020px;
    margin: 0px auto;
    font-family: Poppins;
    font-size: 28px;
    font-weight: 400;
    line-height: 42px;
    text-align: center;
}

.misconceptAnswer {
    padding: 50px 20px;
    background: #222222;
    width: 100%;
    margin: 0px auto;
    box-shadow: 0px 4px 34.5px 0px hsl(0deg 0% 69.82% / 7%);
    /* border: 3px solid #222222; */
    border-radius: 0px 0px 20px 20px;
    background: linear-gradient(134.77deg, #ffffff 1.51%, #FFFFFF 45.6%, #ffffff 97.8%);
}

.accordion-button::after {
    position: absolute;
    display: inline;
    width: 5.25rem;
    height: 5.25rem;
    /* font-size: 3rem; */
    top: 50%;
    right: 0%;
    transform: translate(-18%, -50%);
    transition: all 0.5s;
}

.accordion-button::after {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' class='bi bi-plus' viewBox='0 0 16 16'%3E%3Cpath d='M8 4a.5.5 0 0 1 .5.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3A.5.5 0 0 1 8 4z'/%3E%3C/svg%3E");
    background-size: cover;
    filter: invert(1);
}

.accordion-button:not(.collapsed)::after {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' class='bi bi-dash' viewBox='0 0 16 16'%3E%3Cpath d='M4 8a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 0 1h-7A.5.5 0 0 1 4 8z'/%3E%3C/svg%3E");
    background-size: cover;
    transform: translate(-18%, -50%);
}

.qualityDrops {
    padding: 30px 0px 0px;
}

.qualityDrops .list {
    position: relative;
    padding: 0px 0px 0px 45px;
    font-size: 24px;
    line-height: 32px;
}

.qualityDrops .list:not(:last-child) {
    margin-bottom: 10px;
}

.qualityDrops .list span {
    position: absolute;
    top: 0px;
    left: 0px;
    background: url(../images/crisis.png);
    background-position: center;
    background-size: cover;
    width: 32px;
    height: 32px;
}

.SandStormFounder {}

.SandStormFounder img {
    border-radius: 450px 450px 0px 0px;
    margin-bottom: -150px;
}

.SandStormFounder .col-inner {
    /*border-radius: 250px 250px 0px 0px;*/
    /*background: var(--brand_color);*/
    /*padding: 25px 45px 0px;*/
}

.FounderDetails {}

.FounderDetails .col-inner {
    padding: 0px 0px 0px 45px;
}

.tenYears {
    font-size: 56px;
}

/* Milestone */
.Milestone {
    margin: 30px 0px 0px;
}

.Milestone .Card {
    display: flex;
    color: black;
    margin-bottom: 20px;
    align-content: center;
}

.Milestone .Card .Year {
    display: block;
    width: 17%;
    margin-right: 10%;
}

.Milestone .Card .Year .title {
    font-size: 19px;
    line-height: 21px;
    padding: 9px 3px;
    font-weight: 400;
    color: white;
    background-color: #242424;
    text-align: center;
    border-radius: 18px 0px;
}

.Milestone .Card .Content {
    width: 73%;
    font-size: 23px;
    line-height: 33px;
    margin: 3px 0px -14px;
}

.Milestone .Card .Content .para {
    margin: 0px auto 7px;
    position: relative;
}

.Milestone .Card .Content .para:before {
    position: absolute;
    content: '';
    top: 16px;
    left: -30px;
    width: 10px;
    height: 2px;
    background: dimgrey;
}

@media(max-width:500px) {
    .Milestone {
        margin: 6vw 4vw 0vw;
    }

    .Milestone .Card {
        margin-bottom: 10px;
        align-items: flex-start;
    }

    .Milestone .Card:last-child {
        margin-bottom: 0px;
    }

    .Milestone .Card .Year {
        width: 22%;
        margin-right: 0px;
    }

    .Milestone .Card .Year .title {
        font-size: 4vw;
        line-height: 5vw;
        padding: 2vw 2vw;
        border-radius: 3vw 0vw;
    }

    .Milestone .Card .Content {
        width: 74%;
        font-size: 4vw;
        line-height: 5vw;
    }

    .Milestone .Card .Content .para {
        margin: 0px auto 10px;
        position: relative;
        padding-left: 32px;
        font-size: 16px;
        line-height: 24px;
    }

    .Milestone .Card:last-child .Content .para {
        margin-bottom: 7px;
    }

    .Milestone .Card .Content .para:before {
        top: 3vw;
        left: 3vw;
    }
}

.Specialized {
    padding: 20px 0px 25px;
}

.Specialized .title {
    font-size: 26px;
    line-height: 34px;
    font-family: 'Playfair Display';
    padding: 0px 0px 15px;
}

.Specialized .Specialist {}

.Specialized .Specialist .item {
    position: relative;
    font-size: 22px;
    padding: 0px 0px 0px 38px;
    margin: 0px 0px 10px;
}

.Specialized .Specialist .item span {
    background: url(../images/checked_black.png);
    position: absolute;
    width: 22px;
    height: 17px;
    background-size: cover;
    top: 7px;
    left: 4px;
    filter: brightness(0) saturate(100%) invert(86%) sepia(22%) saturate(620%) hue-rotate(324deg) brightness(86%) contrast(88%);
    filter: brightness(0) saturate(100%) invert(53%) sepia(16%) saturate(1485%) hue-rotate(344deg) brightness(93%) contrast(99%);
}

#ComfortExperience {
    position: relative;
    padding: 100px 0px;
    background: #161513;
    background: url(../images/bg_Hair_Studio.jpg);
    background-size: cover;
    background-position: bottom;
}

#ComfortExperience .cover {
    width: 100%;
    height: 100%;
    display: block;
    position: absolute;
    top: 0px;
    left: 0px;
    background: #000000ba;
}

.GoodhairStudio {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    width: 92%;
    margin: 70px auto 0px;
    gap: 20px;
}

.GoodhairStudio .list {
    overflow: hidden;
    grid-row: span 1;
    grid-column: span 1;
}

.GoodhairStudio .list:nth-child(1) {}

.GoodhairStudio .list:nth-child(2) {}

.GoodhairStudio .list:nth-child(3) {}

.GoodhairStudio .list:nth-child(4) {}

.GoodhairStudio .list:nth-child(5) {}

.GoodhairStudio .list:nth-child(6) {}

.GoodhairStudio .list:nth-child(7) {}

.GoodhairStudio .list:nth-child(8) {}

.GoodhairStudio .list a {
    position: relative;
    width: 100%;
    height: 100%;
}

.GoodhairStudio img {
    display: block;
    width: 100%;
    height: 100%;
    -webkit-transition: all .6s ease-in-out;
    -moz-transition: all .6s ease-in-out;
    transition: all .6s ease-in-out;
}

.GoodhairStudio .list:hover img {
    transform: scale(1.03);
}

#Guarantee {
    position: relative;
    padding: 100px 0px;
    background: #161513;
    background: url(../images/bg_Guarantee.jpg);
    background-size: cover;
    background-position: center;
}

#Guarantee .innerLine {}

#Guarantee .container {
    position: relative;
}

#Guarantee .container .inner {
    border: 1px solid #706964;
    background: #ffffff26;
    background: hsl(26deg 39% 70% / 75%);
    background: url(../images/bg_Guarantee_Banner.jpg);
    background-position: center 78%;
    background-size: cover;
    padding: 65px 0px 152px;
    border-radius: 32px;
    width: 80%;
    margin: 0px auto;
}

#Guarantee .cover {
    width: 100%;
    height: 100%;
    display: block;
    position: absolute;
    top: 0px;
    left: 0px;
    background: #000000b5;
}

#SandStormStylists {
    position: relative;
    padding: 100px 0px;
    background: #F3F2F0;
}

.HairStylist {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 25px;
    display: flex;
    padding: 0px 100px 0px;
    justify-content: center;
}

.HairStylist .list {
    position: relative;
    width: 20%;
}

.HairStylist .list .image {}

.HairStylist .list .image img {
    display: block;
    width: 100%;
    height: 100%;
}

.HairStylist .list .droplet {
    background: black;
    color: white;
    display: block;
    width: 100%;
    padding: 25px 25px;
    transition: all 0.3s ease-in-out;
}

.HairStylist .list:hover .droplet {
    background: var(--brand_color);
    color: black;
    transition: all 0.3s ease-in-out;
}

.HairStylist .list .droplet .name {
    margin-bottom: 5px;
    font-weight: 600;
    font-size: 22px;
    text-transform: uppercase;
}

.HairStylist .list .droplet .position {
    font-size: 16px;
}

#Appointment {
    position: relative;
    padding: 80px 0px;
    background: url(../images/SANDSTORM_Hair_Salon_Bukit_Indah.jpg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

#Appointment .cover {
    width: 100%;
    height: 100%;
    display: block;
    position: absolute;
    top: 0px;
    left: 0px;
    background: #000000;
    opacity: 0.75;
}

.SandStormLocation {
    color: white;
}

.SandStormLocation .mapLinks {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    align-content: center;
    padding: 0px 0px 30px;
}

.SandStormLocation .mapLinks .google {
    margin-right: 10px;
}

.SandStormLocation .mapLinks .google a {
    color: white;
    display: flex;
    justify-content: center;
    border: 1px solid #174ea6;
    background: #174ea6;
    padding: 7px 17px 7px 10px;
    align-items: center;
    border-radius: 50px;
    margin-right: 10px;
    font-size: 19px;
    line-height: 27px;
    font-weight: 500;
    font-family: 'Poppins';
    gap: 6px;
}

.SandStormLocation .mapLinks .google a img {
    width: 31px;
    margin: 0px;
}

.SandStormLocation .mapLinks .waze {
    margin-right: 10px;
}

.SandStormLocation .mapLinks .waze a {
    color: white;
    display: flex;
    justify-content: center;
    border: 1px solid #33CCFF;
    background: #33CCFF;
    padding: 7px 23px 7px 17px;
    align-items: center;
    border-radius: 50px;
    margin-right: 10px;
    font-size: 19px;
    line-height: 25px;
    font-weight: 500;
    font-family: 'Poppins';
    gap: 8px;
}

.SandStormLocation .mapLinks .waze a img {
    width: 30px;
}

.SandStormLocation .location {
    padding: 0px 0px 5px;
    text-transform: uppercase;
    font-size: 26px;
    font-weight: 500;
    line-height: 32px;
    text-align: left;
    color: #D1B096;
}

.SandStormLocation .company {
    font-size: 18px;
    line-height: 26px;
    margin: 0px 0px 14px;
    color: #ebebeb;
}

.SandStormLocation .address {
    padding: 0px 0px 15px;
    font-size: 20px;
    font-weight: 300;
    line-height: 28px;
    text-align: left;
    color: rgba(255,255,255,.5);
    width: 85%;
}

.SandStormLocation .opening {
    color: #D1B096;
    font-size: 24px;
    font-weight: 500;
    line-height: 28px;
    letter-spacing: 0em;
    text-align: left;
}

.SandStormLocation .weekend {
    padding: 10px 0px 0px;
}

.SandStormLocation .weekend .list {
    font-size: 20px;
    font-weight: 300;
    line-height: 26px;
    letter-spacing: 0em;
    text-align: left;
    display: flex;
    width: 75%;
    padding: 0px 0px 6px;
}

.SandStormLocation .weekend .list .day {
    width: 60%;
}

.SandStormLocation .weekend .list .time {
    width: 40%;
}

#footer {
    background: var(--brand_color);
    padding: 10px 0px;
}