@import url('https://fonts.googleapis.com/css2?family=Rubik:ital,wght@0,300..900;1,300..900&display=swap');

:root{
    /*----Typography----*/
    --primaryFont:  "Rubik", sans-serif;

    /*----Colors----*/
    /*Primary----Text*/
  --purple-300-sub-heading: hsl(276, 100%, 81%);
  --purple-600-chat-on-the-left: hsl(276, 55%, 52%);
  --gray-500-chat-on-the-right-paragraph: hsl(270, 7%, 64%);
  --gray-300-placeholder-text: hsl(206, 6%, 79%);
  --purple-950-main-heading: hsl(271, 36%, 24%);

  /*Gradients*/
  --pink-500: hsl(293, 100%, 63%);
  --purple-500: hsl(264, 100%, 61%);

  /*Secondary*/
  --white: hsl(0, 100%, 100%);
  --gray-100-app-background: hsl(270, 20%, 96%);
  --purple-950-submit-button-background: hsl(271, 36%, 24%);
  --pink-400-radio-button-outline: hsl(289, 100%, 72%);
  --leftMessagebox: hsl(272, 46%, 93%);
  --bgColor:  hsla(270, 20%, 96%, 0.589);
  --boxShadow-primary: 0 10px 20px rgba(0,0,0, 0.2);
  --boxShadow-secondary: 0 5px 10px hsla(0, 4%, 27%, 0.11);
}

/*----Reset & Global Style----*/
*, ::after, *::before{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
html, body{
  min-height: 100vh;
}
img{
  max-width: 100%;
  height: auto;
  display: block;
}
body{
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: var(--primaryFont);
  background-color: var(--bgColor);
}
/*----Individual Style----*/
main{
  position: relative;
}
.bg-left{
  position: absolute;
  width: 67%;
  height: 76vh;
  top: 0;
  left: -4rem;
  background: linear-gradient(70deg, var(--purple-500) 30%, var(--pink-500) 120%);
  border-radius: 0 0 17rem 0;
  z-index: -5;
}
.bg-right{
  position: absolute;
  width: 67.5%;
  height: 75vh;
  bottom: 0;
  right: 0;
  background-color: var(--gray-100-app-background);
  border-radius: 17rem 0 0 0;
  z-index: -5;
}
.content-container{ 
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin-block: 4rem;
  gap: 4rem;
}
.mobile{
  background-color: var(--white);
  border-radius: 2rem;
  padding: .5rem; 
  margin-inline: auto;
  max-width: 15.5rem;
  height: auto;
  box-shadow: var(--boxShadow-primary);
  overflow: hidden;
}
.screen{
  background-color: var(--gray-100-app-background);
  border-radius: 1.5rem;  
}
.header-area{
  background: linear-gradient(15deg, var(--purple-500),
   var(--pink-500));
  display: flex;
  align-items: center;
  padding: 1.85rem .75rem 1rem;
  border-radius: 1.5rem 1.5rem .5rem .5rem; 
  gap: .1rem;
  position: relative;
}
.notch{
  background-color: var(--white);
  position: absolute;
  width: calc(60% - .5rem);
  height: 2.75rem;
  bottom: 70%;
  left: 50%;
  transform: translateX(-50%);
  border-radius: 1rem 1rem 1.5rem 1.5rem;
}
.fa-angle-left{
  color: var(--white);
  font-size: .8rem;
}
.header-area p{
  color: var(--white);
  font-size: .7rem;
  font-weight: 500;
  line-height: .7rem;
  margin-inline-start: .3rem;
}
.header-area p span{
  color: var(--purple-300-sub-heading);
  font-weight: normal;
  font-size: .5rem;
  display: block;
} 
.header-area img{
  max-width: 1.5rem;
  border: 1px solid  var(--white);
  border-radius: 50%;
}
.fa-ellipsis-vertical{
  color: var(--white);
  margin-inline-start: auto;
  font-size: .6rem;
}
.text-container{
  padding: .65rem .58rem .75rem;
}
.text-area{
  display: flex;
  flex-direction: column;
  gap: .5rem;
  max-width: 100%;
}
.text-area:nth-child(1),.text-area:nth-child(3){
  align-items: flex-start;
}
.text-area:nth-child(2){
  align-items: flex-end;
  color: var(--gray-500-chat-on-the-right-paragraph);
}
.photo{
  display: flex;
  justify-content: flex-end;
  max-width: 2.5rem;
  gap: .5rem;
  margin-block-start: 1rem;
}
.photo img{
  border-radius: .6rem;
}
.text-box{
  padding: .5rem;
  font-size: .5rem;
  max-width: 60%;  
}
.top-left .text-box, .bottom-left .text-box{
  background-color: var(--leftMessagebox);
  border-radius: .6rem .6rem .6rem .2rem;
  color: var(--purple-600-chat-on-the-left);
}
.middle-right .text-box{
  background-color: var(--white);  
  border-radius: .65rem .65rem .2rem;
  max-width: 63%;
  padding: .5rem .6rem;
  font-size: .5rem;
  box-shadow: var(--boxShadow-secondary);
}
.bottom-left .text-box{
  font-size: .5rem;
  margin-top: .8rem;
  padding: .55rem .55rem;
}
/*Radio Button Box*/
.duration-box{
  background: linear-gradient(10deg,
  var(--purple-500),
  var(--pink-500));
  color: var(--gray-100-app-background);  
  padding: .55rem;
  font-size: .5rem;
  width: 72%;
  border-radius: .6rem .6rem .6rem .2rem;
}
.duration-box label{
  position: relative;
  padding-left: 1.25rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between; 
}
.radio-btn{
  display: none;
}
.checkmark{
  position: absolute;
  left: 0;
  width: .8rem;
  height: .8rem;
  border: 2.2px solid var(--pink-400-radio-button-outline);
  border-radius: 50%;
}
.checkmark::after{
  content:"";
  position: absolute;
  width: .7rem;
  height: .7rem;
  background: var(--pink-500) ;
  border-radius: 50%;
  display: none;
}
.radio-btn:checked+ .checkmark::after{
  display: block;
}
.dollar{
  color: var(--white);
  font-size: .8rem;
  font-weight: 500;
}
.message-field{
  margin-top: 1rem;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
}
form{
  width: 100%;
  position: relative;
}
.input-text{
  padding: .75rem 1rem;
  border-radius: 1.5rem;
  border: transparent;
  width:100%;
  font-size: .5rem;
}
.input-text::placeholder{
  color: var(--gray-300-placeholder-text);
} 
.submit-btn{
  background: none;
  border: none;
  padding: 0;
  position: absolute;
  right: .3rem;
  top: 50%;
  transform: translateY(-50%);
  cursor: pointer;
}
.submit-btn i{
  color: var(--purple-950-main-heading);
  font-size: 1.5rem;
}
/*Bottom Heading*/
.booking{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  gap: 1.5rem;
  padding-inline: 2rem;
  padding-block-end: .5rem;
}
.booking h1{
  color: var(--purple-950-main-heading);
  font-size: 2.5rem;
  font-weight: 500;
}
.booking p{
   color: var(--gray-500-chat-on-the-right-paragraph);
  font-size: 1.01rem;
  line-height: 1.7;
}

/*Tab & Laptop View*/

@media screen and (min-width: 48rem){

main{
  position: initial;
}
.bg-left{
  width: 33.7%;
  height: 88vh;
  border-radius: 0 0 23rem 20rem;
}
.bg-right{
  width: 22.5%;
  height: 86vh;
}
.content-container{ 
  flex-direction: row;
  gap: 7.15rem;
  max-width: 82%;
  margin-inline: auto;
  margin-inline-end: 5rem;
}
.mobile{
  padding: .55rem; 
  margin-inline: 0;
  max-width: 15.5rem;
}
/*Bottom Heading*/
.booking{
  flex-basis: 38.2%;
  align-items: flex-start;
  text-align: left;
  gap: 1.5rem;
  margin-block-start: .5rem;
  padding-inline: 0;
  padding-inline-start: .25rem; 
}
.booking h1{
font-size:  2.5rem;
}
.booking p{
font-size:  1rem;
}
}