/* CSS BY ASHLEY OLESEN */

/* IMPORTED FONTS */
@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Kavoon&display=swap');
/* IMPORTED FONTS ---- */


/* CSS REST */
h1, h2{
    font-family: 'Kavoon';
    color: var(--White);
}

body{
    font-family: "Inter";
}

h1{
    font-size: 3em;
    margin-top: 0;
    margin-bottom: 0px;
    text-align: center;
}

nav h2{
    font-size: 1.5em;
}

h2{
    font-size: 2em;
    padding-left: 10px;
}

h3{
    font-size: 1.5em;
    color: var(--Yellow);
    padding-left: 10px;
}

h4{
    font-size: 1.15em;
}

.div_footer p{
    margin-bottom: 0;
}

.section_header p{
    color: var(--White);
    text-align: center;
    font-style: italic;

}
.section_menu{
    background-color: var(--Yellow);
    padding-bottom: 20px;
}
.section_menu h3{
    color: var(--Dark-gray);
    font-style: italic;
    text-align: center;
    text-transform: uppercase;
    padding-top: 20px;
    padding-bottom: 0px;
    margin-bottom: 10px;
    margin-top: 10px;
}

ul{
    list-style-type: none;
}

.section_menu ul{
    padding: 0;
    margin: 0;
    margin-bottom: 10px;
}

.section_menu li{
    background-color: var(--White);
    padding: 10px;
    margin-bottom: 10px; /* Adds space between each box */
    margin-left:30px;
    margin-right: 30px;
    text-align: center; /* Centers the text */
    color: var(--Lavender);
    font-weight: bold;
    text-transform: uppercase;
}

.section_services h2{
    margin-bottom: 5px;
}
.section_services h3{
    margin: 0;
}

.section_services section{
  align-items: center;
  background-color: var(--White);
  margin: 20px;
  border-radius: 10px;
}

.section_services h4{
    color: var(--Purple);
    padding-left: 20px;
    margin-bottom: 10px;
}

.section_services p{
    padding: 20px;
    padding-top: 0;

}

.section_services img{
    padding-left: 20px;
    padding-top: 10px;
}

.section_why_us{
    background-color: var(--Pink);
}

.div_choose_us {
    display: flex;
    flex-wrap: wrap; /* Allows items to wrap to the next line */
  width: 450px; /* Example width for the container */
}
.div_choose_us div{
  margin: 15px auto;
  border-radius: 10px;

}

.div_box1, .div_box2, .div_box3, .div_box4{
     height: 100px;
 width: 180px;
  display: flex;
  text-align: center;
  align-items: center;
  background-color: lightblue;
  font-weight: bold;
  color: var(--Dark-gray);
}

.div_box1 p, .div_box2 p, .div_box3 p, .div_box4 p{
    text-align: center;
    margin: 0 auto;
}

.div_box1{
    background-color: var(--Teal);
}

.div_box2{
    background-color: var(--Lavender);
}

.div_box3{
    background-color: var(--Yellow);
}

.div_box4{
    background-color: var(--White);
}

.section_pricing table{
    margin: 0 auto;
    background-color: var(--Yellow);
}

.section_pricing h2{
    margin-bottom: 5px;
}

.section_pricing h3{
    margin-top: 5px;
    margin-bottom: 10px;
}

.section_pricing th{
    text-align:center;
    height: 45px;
    font-weight: bold;
    text-transform: uppercase;
}

.section_pricing td{
    background-color: var(--White);
    height: 45px;
    font-weight: bold;
    text-align: center;
}

.section_pricing td:nth-child(odd){
    width: 140px;
}

.section_pricing td:nth-child(even){
    width: 60px;
}

.section_schedule{
    background-color: var(--Pink);
    color: var(--White);
    padding-bottom: 10px;
}

.section_schedule h2{
    padding-top: 10px;
}

.section_schedule p{
    padding-left: 10px;
    margin: 16px 10px;
}

.button_schedule{
  background-color: var(--White);
  color: var(--Dark-gray);
  border: none;
  padding: 15px 30px; 
  border-radius: 10px; 
  font-weight: bold;
  cursor: pointer;
  box-shadow: 3px 5px 3px var(--Dark-gray);
  width: 300px;
  display: block;
  margin: 0 auto;
  text-transform: uppercase;
}

footer{
        padding-top: 30px;
        padding-bottom: 30px;
}

.div_footer{
    display: flex;
    justify-content: space-evenly;   
}
.div_footer p, .div_footer a{
    color: var(--White);
    margin: 5px;

}

/* CSS REST ---- */

/* ROOT VARIABLES */
:root{
--Teal: #4CA7C0;
--Purple: #484FB7;
--Lavender: #6B8FE7;
--Yellow: #E9BB57; 
--Pink:#D9526F;
--Dark-gray:#1E1E1E; 
--White:#ffffff; 
}
/* ROOT VARIABLES ---- */



/* GLOBAL STYLES */
body{
    
    background-color: var(--Lavender);
    margin: 0;
}

div.page_container{
    max-width: 450px;
    justify-content: center;
    margin: 0 auto;
    background-color: var(--Purple);
    padding: 0;
}
/* GLOBAL STYLES ---- */