/*ROOT START*/
:root {
/*colours start*/
--lemon1:lemonchiffon;
--lemon2: rgb(253, 246, 181);
--sagegreen: #ccd4b5;
--pink: rgb(244, 213, 213);
--pink2: #ffccd5;
--pink1: #fff0f3;
--baby-blue: #C0E5F7;
--dark-grey: rgb(35, 35, 37);
/*colours end*/

/*font start*/
--Default: Limelight, sans-serif;
--nav-blog-text: Poiret One, sans-serif;
--nata:Nata Sans, sans-serif;
/*font end*/
}
/*ROOT END*/

body {
  background-color: var(--dark-grey);
}

/*SECTION HEADING START*/

.heading-section-a {
background-color:  var(--dark-grey);
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
padding: 30px 0;  
margin-top: -1px;
}

.heading-section{
background-color:  var(--dark-grey);
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
padding: 30px 0;  
margin-top: 80px;
}

.section-heading-one {
  font-family: var(--nata);
  font-weight: 300;
  color: var(--pink2);
}

.section-heading-two {
  color: var(--lemon1);
  font-style: italic;
  font-weight: 100;
  margin-top: -10px;
}
/*SECTION HEADING END*/

/****************************************************************/

/*SERVICE BLOCK START*/
.service-wrapper {
  background-color: var(--dark-grey);
  display: grid;
  column-gap: 10px;
  grid-template-columns: repeat(6, 150px);
  justify-content: center;
  margin-top: -1px;
  margin-bottom: 50px;
}

.service-wrapper a {
  text-decoration: none;
  height: 130px;
}

.service-card {
  height: 130px;
  background-color: var(--dark-grey);
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
}

.service-card-img-beauty {
  height: 60px;
  width: 60px;
  margin-top: 10px;
  transition: all ease-in 0.5s;
}

.service-card-img-beauty:hover {
  height: 65px;
  width: 65px;
  margin-top: 10px;
  transition: all ease-out 0.5s;
}

.service-card-title {
  color: rgb(255, 255, 255);
  margin-top: 10px;
  font-family: var(--nav-blog-text);
  letter-spacing: 2px;
  font-size: 15px;
  transition: all ease-in 0.5s;
}

.service-card-title:hover {
  font-size: 17px;
  transition: all ease-out 0.5s;
}

/*SERVICE BLOCK MEDIA QUERY START*/

@media only screen and (max-width: 1000px){
.service-wrapper {
  grid-template-columns: repeat(3, 150px);
}  
}

@media only screen and (max-width: 800px){
.heading-section{
margin-top: 40px;
}
}

@media only screen and (max-width: 540px){
.service-wrapper {
  background-color: var(--dark-grey);
  display: grid;
  column-gap: 40px;
  grid-template-columns: repeat(3, 80px);
  justify-content: center;
  margin-top: -1px;
}

.service-wrapper a {
  text-decoration: none;
  height: 130px;
}

.service-card {
  height: 130px;
  background-color: var(--dark-grey);
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
}

.service-card-img-beauty {
  height: 60px;
  width: 60px;
  margin-top: 10px;
  transition: all ease-in 0.5s;
}

.service-card-title {
  color: rgb(255, 255, 255);
  margin-top: 10px;
  font-family: var(--nav-blog-text);
  letter-spacing: 2px;
  font-size: 10px;
  transition: all ease-in 0.5s;
}
}


@media only screen and (max-width: 540px){
.service-wrapper {
  column-gap: 10px;
}

.service-card-img-beauty {
  height: 50px;
  width: 50px;
  margin-top: 10px;
  transition: all ease-in 0.5s;
}
}


/*SERVICE BLOCK MEDIA QUERY END*/


/*SERVICE BLOCK END*/

/****************************************************************/

/*PREPARE FOR YOUR MAKEUP APPOINTMENT START*/

.makeup-prep-wrapper {
  background-color: var(--dark-grey);
  display: grid;
  grid-template-columns: repeat(4, 250px);
  column-gap: 10px;
  justify-content: center;
  margin-top: -1px;
  margin-bottom: 100px;
}

.prep-stages-wrapper {
  background-color: var(--dark-grey);
  display: flex;
  flex-direction: column;
  padding: 5px 0 20px 0;
}

.prep-stage-img {
height: 120px;
background-color: var(--dark-grey);
display: flex;
justify-content: center;
align-items: center;
}

.prep-img {
  width: width  100px;
  height: 100px;
}

.prep-stage-text {
  flex: 1;
  padding: 10px 10px 0 10px;
  text-align: center;
  background-color: var(--dark-grey);
}

.prep-stage-text-style {
  font-family: var(--nata); 
  color: white;
}

@media only screen and (max-width: 1050px) {
.makeup-prep-wrapper {
  grid-template-columns: repeat(2, 250px);
  column-gap: 100px;
}
.prep-stages-wrapper {
  padding-bottom: 30px;
}
}

@media only screen and (max-width: 620px) {
.makeup-prep-wrapper {
  grid-template-columns: repeat(1, 250px);
  row-gap: 20px;
  padding-top: 20px;
}

.prep-stages-wrapper {
  height: 250px;
  padding-top: 20px;
}
}

/*PREPARE FOR YOUR MAKEUP APPOINTMENT END*/

.text-section {
  display: grid;
  grid-template-columns: repeat(1 ,1fr);
  justify-content: center;
  text-align: center;
  background-color: var(--dark-grey);
  margin-top: -10px;
  margin: -10px 150px 0 150px;
  margin-bottom: 80px;
}

.text-section-style {
  color: white;
  display: flex;
  line-height: 1.5;
  font-size: 15px;
  letter-spacing: 1px;
  font-family: var(--nata);
}

@media only screen and (max-width: 900px) {
.text-section {
  margin: -10px 75px 0 75px;
  margin-bottom: 80px;
}
}

@media only screen and (max-width: 650px) {
.text-section {
  margin: -10px 50px 0 50px;
  margin-bottom: 80px;
}
}

@media only screen and (max-width: 500px) {
.text-section {
  margin: -10px 30px 0 30px;
  margin-bottom: 80px;
}
}