body {
    background-color: #e6ddcf;
}
/*NAV BAR*/
.h-8 {
    
    height: 150px;
    width: 200px;
  
}

.bg-white {
    background-color: #e6ddcf;

}

.max-w-screen-xl {
    background-color: #e6ddcf;
    display: flex;
    justify-content: space-evenly;
   
    
}

/*NAV BAR BUTTONS*/
.font-medium {
    background-color: #e6ddcf;
    font-family: "Cormorant Garamond", serif;
    font-size: 20pt;
    gap: 100px;

}

.block {
    color: black;
    background-color: #e6ddcf;
}


/*FLOWER*/
.flower {
    display: flex;
    justify-content: center;
    align-items: center;
}

#flowerLogo {
    height: 120px;
}

/* MEET THE DOULA CONTAINER */
.meetDoula{
	
	width: 50%;
	height: 90%;
	display: flex;
	padding-right: 130px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  float: right;

}

.meetDoula h1 {
  font-family: "Cormorant Garamond", serif;
  font-size: 50pt;
  color: #5e483f;
}

.text {
  font-family: "Nunito", sans-serif;
  font-size: 12pt;
  color: #5e483f;
  padding: 10px;
 
  
}

.text span {
  font-family: "Cormorant Garamond", serif;
  font-size: 25pt;
}

/* BUTTON 
button {
  border: solid #bdc3bf 2px;
  color: #bdc3bf;
  width: 200px;
}
  */

/* SLIDESHOW CONTAINER */
.slideshow-container {
	width: 50%;
	height: 90%;
	display: flex;
	justify-content: center;
	align-items: center;

}




.slideImage {
    height: 700px;
    border-radius: 50px;
  
    
}




  * {box-sizing: border-box;}
 
  .mySlides {display: none;}
  img {vertical-align: middle;}
  
  /* Slideshow container */
  .slideshow-container {
    max-width: 1000px;
    position: relative;
    margin: auto;
       
  }
  
  
  .active {
    background-color: #717171;
  }
  
  /* Fading animation */
  .fade {
    animation-name: fade;
    animation-duration: 1.5s;
  }
  
  @keyframes fade {
    from {opacity: .4} 
    to {opacity: 1}
  }
  

  /* On smaller screens, decrease text size */
  @media only screen and (max-width: 300px) {
    .text {font-size: 11px}
  }

/* SLIDESHOW CONTAINER END */

/* FOOOTER START*/

.footerContainer {
  border: #e6ddcf solid 4px;
  height: 110px;
  margin-top: 100px;

}

.icons {
  color:#5e483f ;
  display: flex;
  flex-direction: row;
  gap: 20px;
  margin-left: 2%;
  margin-top: 2%;

}

.quote {
  font-style: italic;
  margin-left: 70%;
  font-family: "Nunito", sans-serif;

}

 /*Media Query for mobile */
 @media only screen  and (max-width: 375px) {
   
 }
 @media only screen  and (max-width: 765px) {

  .pageContent {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }

  /*SLIDESHOW*/
  .slideshow-container {
    order: 2;
    width: 80%;
  }


  /*TEXT */

  .meetDoula h1 {
 
    display: flex;
    align-content: center;
    justify-content: center;
    text-align: center;
  }
  .meetDoula{
    order: 1;
    display: flex;
   width: 100%;
   justify-content: center;
   align-content: center;
   padding-right: 0px;
   
   
  
 
 
   
  }

  .text {
   
    width: 350px;
  
  }


/*FOOTER*/
.footerContainer {
  display: flex;
  flex-direction: column;  
  height: 150%;
  text-align: center;

 }


 /*FOOTER ICONS*/
 .icons {
 display: flex;
 justify-content: center;
padding-left: 30px;
 padding-bottom: 30px ;

 }

 /*QUOTE*/
 .quote {
  margin-left: 5px;  
 
}

.slideImage {

  height: 80% ;
}


 }



/* styles for tablets in general, both portrait and landscape*/
/* your tablet general styles here */
@media screen and (min-width: 766px) and (max-width: 1211px) {

.pageContent {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

/*SLIDESHOW*/
.slideshow-container {
  order: 2;
  width: 80%;
  display: flex;
  justify-content: center;
  align-items: center;
  
padding-left: 70px; 

}






  /*TEXT */
  .meetDoula{
    order: 1;
    display: flex;
    width: 80%;
    justify-content: center;
    align-items: center;
    text-align: center;
 
 
   
  }
    /*FOOTER*/
.footerContainer {
display: flex;
flex-direction: column;  
height: 150%;
text-align: center;
width: 100%;
}


/*FOOTER ICONS*/
.icons {
display: flex;
justify-content: center;
padding-left: 30px;
padding-bottom: 30px ;

}

/*QUOTE*/
.quote {
margin-left: 5px;  

}

}