:root{
    /* --------Colors------------------ */
    /*------- Primary ------------------*/

    /* -------------Text --------------*/

    --Pale-Violet_sub-heading-at-the-top-of-the-app-UI: hsl(276, 100%, 81%);
    --Moderate-Violet_chat-on-the-left: hsl(276, 55%, 52%);
    --Desaturated-Dark-Violet_chat-on-the-right: hsl(271, 15%, 43%);
    --Grayish-Blue_placeholder-text: hsla(200, 6%, 90%, 0.829);
    --Grayish-Blue_placeholder-text-1: hsla(0, 2%, 92%, 0.521);
    --Very-Dark-Desaturated-Violet_main-heading: hsl(271, 36%, 24%);
    --Dark-Grayish-Violet_paragraph: hsl(270, 7%, 64%);

/* -------------Gradients -----------*/

/* These two colors are the vibrant background colors you see throughout the design and are applied as a linear gradient: */

    --Light-Magenta: hsl(293, 100%, 63%);
    --Light-Violet: hsl(264, 100%, 61%);

    --Family-Rubik-400-500-700:"Rubik";
}
*{
    padding: 0;
    margin: 0;
    font-family: var(--Family-Rubik-400-500-700);
    list-style: none;
}
body{
    background-color: rgba(255, 255, 255, 0.616);
    
    
}

.order{
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: rgba(255, 255, 255, 0.973);
    border-radius: 30px;
    -webkit-border-radius: 30px;
    -moz-border-radius: 30px;
    -ms-border-radius: 30px;
    -o-border-radius: 30px;
}
.container{
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    min-height: 100vh;
    gap: 90px;
    
    
}
.phone{
    width: 310px;
    height: 630.9px;
    background-color: var(--Grayish-Blue_placeholder-text-1);
    border-radius: 30px;
    -webkit-border-radius: 30px;
    -moz-border-radius: 30px;
    -ms-border-radius: 30px;
    -o-border-radius: 30px;
    box-shadow: 1px 3px 13px -1px rgba(20, 19, 19, 0.282);
}
.convi-box{
    
    border: 10px solid rgb(255, 255, 255);
    height: 610.9px;
    border-radius: 30px;
    -webkit-border-radius: 30px;
    -moz-border-radius: 30px;
    -ms-border-radius: 30px;
    -o-border-radius: 30px;
}
.user-box{
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px;
    padding-top: 30px;
    height: 35px;
    background-image:linear-gradient(to right , var(--Light-Violet), var( --Light-Magenta)) ;
    border-radius: 20px;
    -webkit-border-radius: 30px  30px 10px 10px;
    -moz-border-radius: 20px;
    -ms-border-radius: 20px;
    -o-border-radius: 20px;
    position: relative;
}
.user-box::after{
    content: "";
    width: 160px;
    height: 22px;
    top: 0;
    bottom: 0;
    left: 75px;
    background-color: rgb(255, 255, 255);
    position: absolute;
    border-radius: 0 0px 50px 50px;
    -webkit-border-radius: 0 0px 50px 50px;
    -moz-border-radius: 0 0px 50px 50px;
    -ms-border-radius: 0 0px 50px 50px;
    -o-border-radius: 0 0px 50px 50px;
}
.user-box i{
    color: rgb(255, 255, 255);
    font-size: 15px;
    padding: 10px;
    padding-right: 5px;
} 

.profile{
    transform: translateX(-26px);
    -webkit-transform: translateX(-26px);
    -moz-transform: translateX(-26px);
    -ms-transform: translateX(-26px);
    -o-transform: translateX(-26px);
}
.profile img{
    width: 24px;
    height: 24px;
    border-radius: 50%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.793);
}
/*------start userName ----------*/
.userName{
    font-size: 15px;
    color: rgb(255, 255, 255);
    transform: translateX(-45px);
    -webkit-transform: translateX(-45px);
    -moz-transform: translateX(-45px);
    -ms-transform: translateX(-45px);
    -o-transform: translateX(-45px);
}
.userName h3{
    font-size: 15px;
    font-weight: 700;
}
.userName span{
    font-size: 13px;
    font-weight: 400;
    color: var(--Grayish-Blue_placeholder-text);
}
/*------end userName ----------*/
/*---------strat massage-box-1 ------------- */
.massage-box-1{
    padding:5px 10px;
}
.massage-box-1 .massage-1,
.massage-box-1 .massage-2 {
    margin:5px 30px 0 0;
    padding: 10px;
    width: 100%;
    font-size:13px ;
    font-weight: 400;
    color: var(--Moderate-Violet_chat-on-the-left);
    max-width: 200px;
    background-color: var( --Grayish-Blue_placeholder-text);
    border-radius: 20px 20px 20px 5px;
    -webkit-border-radius: 20px 20px 20px 5px;
    -moz-border-radius: 20px 20px 20px 5px;
    -ms-border-radius: 20px 20px 20px 5px;
    -o-border-radius: 20px 20px 20px 5px;

}   
.massage-box-1 .massage-1 p,
.massage-box-1 .massage-2 p{
    padding: 5px;
}
/*---------end  massage-box-1 ------------- */
/*---------start assage-box-2------------- */
.massage-box-2{
    padding:0 10px ;
}
.massage-box-2 .photo-box ul{
    display: flex;
    justify-content:end;
    align-items: center;
    gap: 15px;
    padding: 5px 0;
}
.massage-box-2 .photo-box ul li img{
    width: 40px;
    height: 40px;
    border-radius: 10px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    -ms-border-radius: 10px;
    -o-border-radius: 10px;
}
.massage-box-2 .massage-3,
.massage-box-2 .massage-4{
    margin:0px 19px ;
    padding: 10px;
    width: 100%;
    font-size:13px ;
    font-weight: 400;
    color: var(  --Very-Dark-Desaturated-Violet_main-heading);
    max-width: 200px;
    background-color: rgb(255, 255, 255);
    border-radius: 20px 20px 5px 20px;
    -webkit-border-radius: 20px 20px 5px 20px;
    -moz-border-radius: 20px 20px 5px 20px;
    -ms-border-radius: 20px 20px 5px 20px;
    -o-border-radius: 20px 20px 5px 20px;
    transform: translateX(30px);
    -webkit-transform: translateX(30px);
    -moz-transform: translateX(30px);
    -ms-transform: translateX(30px);
    -o-transform: translateX(30px);
    box-shadow: 1px 10px 23px rgba(214, 212, 212, 0.467);
}
.massage-box-2 .massage-3 p,
.massage-box-2 .massage-4 p{
    padding: 5px;
}
.massage-box-2 .massage-4{
    margin:5px 19px ;
    padding: 10px;
    width: 100%;
    font-size:13px ;
    font-weight: 400;
    color: var( --Very-Dark-Desaturated-Violet_main-headingt);
    max-width: 119px;
    background-color:  rgb(255, 255, 255);
    border-radius: 20px 20px 5px 20px;
    -webkit-border-radius: 20px 20px 5px 20px;
    -moz-border-radius: 20px 20px 5px 20px;
    -ms-border-radius: 20px 20px 5px 20px;
    -o-border-radius: 20px 20px 5px 20px;
    transform: translateX(110px);
    -webkit-transform: translateX(110px);
    -moz-transform: translateX(110px);
    -ms-transform: translateX(110px);
    -o-transform: translateX(110px);
}
/*---------end  massage-box-2------------- */
/*---------end  .massage-box-3 ------------- */

.massage-box-3{
    padding: 10px;
}
.massage-box-3 .massage-5 {
    margin:0 30px 0 0;
    padding: 10px ;
    width: 100%;
    font-size:13px ;
    font-weight: 400;
    color: var(--Moderate-Violet_chat-on-the-left);
    max-width: 200px;
    background-color: var( --Grayish-Blue_placeholder-text);
    border-radius: 20px 20px 20px 5px;
    -webkit-border-radius: 20px 20px 20px 5px;
    -moz-border-radius: 20px 20px 20px 5px;
    -ms-border-radius: 20px 20px 20px 5px;
    -o-border-radius: 20px 20px 20px 5px;

}   
.massage-box-3 .massage-5 p{
    padding: 4px;
}
/*---------end  massage-box-3------------- */
/*---------start  massage-box-4------------- */

.massage-box-4{
    padding:0 10px;
}
.massage-box-4 .box-1{
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.massage-box-4 .box-1 {
    margin:0 30px 5px 0;
    padding: 10px;
    width: 100%;
    font-size:13px ;
    font-weight: 400;
    color: var(--Moderate-Violet_chat-on-the-left);
    max-width: 200px;
    background-image:linear-gradient(to right , var(--Light-Violet), var( --Light-Magenta)) ;
    border-radius: 20px 20px 20px 5px;
    -webkit-border-radius: 20px 20px 20px 5px;
    -moz-border-radius: 20px 20px 20px 5px;
    -ms-border-radius: 20px 20px 20px 5px;
    -o-border-radius: 20px 20px 20px 5px;

}   
.massage-box-4 .box-1 span{
    border: 1px solid rgba(255, 255, 255, 0.708);
    width: 20px;
    height: 20px;
    border-radius: 50%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
}
.massage-box-4 .box-1{
    padding: 5px;
}
.massage-box-4 .box-1 h3{
    font-size: 13px;
    font-weight: 400;
    color: var(--Grayish-Blue_placeholder-text);
}
.massage-box-4 .box-1 h2{
    color:rgb(255, 255, 255) ;
    font-size: 16px;
    padding: 5px;
}
/*---------end  massage-box-4------------- */
/*---------start  massage-box-5------------- */
.massage-box-5{
    padding:5px 10px 0;
    
}
.massage-box-5 .massage-7{
    margin:0 30px 0 0;
    padding: 6px;
    width: 100%;
    font-size:13px ;
    font-weight: 400;
    color: var(--Moderate-Violet_chat-on-the-left);
    max-width: 240px;
    background-color: rgb(255, 255, 255);
    border-radius: 20px;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    -ms-border-radius: 20px;
    -o-border-radius: 20px;
    box-shadow: 1px 10px 23px rgba(214, 212, 212, 0.467);

}  
.massage-box-5 .type-massage{
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.massage-box-5 .type-massage h3{
    font-size: 14px;
    font-weight: 500;
    padding: 5px 0;
    padding-left: 5px;
    color:var( --Dark-Grayish-Violet_paragraph);
}
.massage-box-5 .type-massage i{
    font-size: 23px;
    color: var(--Very-Dark-Desaturated-Violet_main-heading);
}
/*---------end  massage-box-5------------- */
/*---------end  simple-booking------------- */
.simple-booking{
    width: 100%;
    max-width: 450px;
}
.simple-booking h1{
    font-size: 38px;
    font-weight: 500;
    padding-bottom: 30px;
    color: var(--Very-Dark-Desaturated-Violet_main-heading);
}
.simple-booking p{
    line-height: 1.80;
    color: var( --Dark-Grayish-Violet_paragraph);
}
/*---------end  massage-box-5------------- */
/*---------start background-color------------- */
.bg-move{
    width: 438px;
    height: 800px;

}
.bg-move {
    position: absolute;
    top: 0;
    left: -5px; /* Adjust position as necessary */
    width: 300px; /* Adjust width as necessary */
    height: 100vh; /* Cover full viewport height */
    background: linear-gradient(to bottom right, var(--Light-Violet), var(--Light-Magenta));
    border-top-right-radius:0; /* Adjust rounding */
    border-bottom-right-radius: 150px; /* Adjust rounding */
    z-index: -1; /* Send behind other elements */
}

/*---------end  background-color------------- */
.attribution{
    padding: 10px;
    text-align: center;
    color: var(--Light-Magenta);
    font-size: 18px;
    font-weight: 500;

}
.attribution a {
    text-decoration: dashed;

}

/*######start media max-width :767px ######## */

@media (max-width:767px) {
    .container{
        display: flex;
        justify-content: center;
        align-items: center;
        min-height: 100vh;
        margin: 0;
        flex-direction: column;
    }
    .bg-move{
        width: 250px;
        height: 690px;
    }
    .simple-booking{
        text-align: center;
        width: 100%;
        max-width: 300px;
    }
}
/*######e## nd  media max-width :767px ######## */