/* Blank space for readability */
/* Color scheme: Brown #a55518 Light Blue #cddfde Cream #fcf1e9 Peach #e7ccc0 */
/* Font options: marcellus (serif); tajawal (san serif) */

@font-face {
  font-family: "Tajawal";
  src: url(/fonts/Tajawal/Tajawal-Regular.ttf);
}
@font-face {
  font-family: "Marcellus";
  src: url(/fonts/Marcellus/Marcellus-Regular.ttf);
}
* {
    box-sizing: border-box;
    
  /* Basic Body Styling   */
  }
  
  body {
    margin: 0;
    padding: 0;
    font-family: "Tajawal"; 
    color:#221601;
    background-color:#f5ddcc;
        
  }

  h1 {
    padding: .5rem .5rem;
    margin: 3rem .2rem .2rem .2rem;
    text-align: center;
  }


  h2, h3, h4, h5, h6 {
    font-family: "Marcellus", serif;
    font-size: large;
    text-align: center;
    padding: .5rem;
    margin: .5rem;
  }
  .linkintext > a {
    color: rgb(40, 130, 157);
    text-decoration-line: underline;
  }

  h1 > p {
    padding-left: .2rem;
    margin: 0;
    font-family: "Marcellus", serif;
  }

/* General P styling */
p { 
  padding: 1rem;
  margin: 0rem;
  text-align: center;
}
  
/* @media (min-width: 500px) {
    .grid-container { grid-template-columns: repeat(2, 1fr); }
  }

@media (min-width: 900px) {
    .grid-container { grid-template-columns: repeat(3, 1fr); }
  } */

/* Flex container styling  */
  .flexcontainer {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    max-width: 1500px;
    margin: 0 auto;
    /* padding: 1rem; */

  }

/*Logo Styling */
  .logo {
    display: flex;
    order: 2;
    padding: 1rem;
    padding-top: 2rem;
    /* background-color: #f1dac9; */
    max-width: 95%;
    border-radius: 25%
    
  }

  /* Header Styling  */
  .header {
    display: flex;
  }

  .header > .tagline {
    order: 3;
    font-size: 20px;
    padding: 1rem;

  }

  .line{
    display: flex;
    border: .1rem solid #ffffff;
    align-self: center;
    width: 90%;
    margin: auto;
  
  }

/* Navbar Styling */
  .navbar {
    display: flex;
    flex-direction: row;
    width: 100%;
    position: sticky;
    top: 0;
    font-family: "Marcellus", serif;
    overflow: visible;
    background-color: #f5ddcc;
  }

  .navbar #myLinks {
    display: none;
    position: absolute;
    flex-direction: column;
    right: 0;
    padding: 2rem 0rem;
    margin: 0 0 0 60%;
    text-align: right;
    font-family: "Tajawal", sans-serif;
  }
  


  /* Style the hamburger menu */
.navbar a.icon {
  /* background: #f1dac9; */
  display: block;
  position: absolute;
  right: 0;
  top: 0;
}
  
#myLinks > a{
  background-color: rgb(165, 85, 24, .9);
  padding-left: 1rem;
  color: #221601;
  padding: .5rem;
  text-decoration: none;
  font-size: medium;
  display: block;
}

/* Style the active link (or home/logo) */
.navbar > .activenavbar {
  font-size: larger;
  /* background-color: #f1dac9; */
  color: #a55518;
  /* text-shadow: 0 3px 10px rgb(0, 0, 0, .5); */
  
}
/* Tagline Styling */
.tagline {
  order: 3;
  display: inline-block;
}
  .tagline > p  {
      font-size: large;
      padding: 1rem;
  }


/* Services Accordion Styling */
  .OurServices  {
    order: 4;
    padding: .5rem;
    margin: 2rem .5rem .5rem .5rem;
  }


  .acc_container {
    display: flex;
    flex-flow: column;
    justify-content: center;
    align-items: center;

  }

  .accordion {
    background-color: #cddfde;
    box-shadow: 0 5px 15px 0 rgba(0, 0, 0, 0.332);
    cursor: pointer;
    padding: 18px;
    width: 100%;
    border: none;
    outline: none;
    font-family: "Tajawal", sans-serif;
    font-size: large;
    transition: 0.4s;
  }
  
  /* .active, .accordion:hover {
    background-color: #411e28;
    border: 1px solid #ffffff; */


  .panel {
    padding: 1rem;
    background-color: #fcf1e9;
    text-align: center;
    display: none;
    overflow: hidden;
    transition: max-height 0.2s ease-out;}


  .active {
    display: block;

  }

   .moreinfo { 
    background-color: #fcf1e9;
    box-shadow: 0 2px 2px 0 rgba(82, 77, 77, 0.332);
    color: #a55518;
    cursor: pointer;
    border: 2px solid #a55518;
    border-radius: 15px;
    padding: .5rem;
    text-align: center;
    outline: none;
    font-size: small;
    font-family: "Marcellus", serif;
    box-sizing:initial;
  }

  .moreinfo:hover {
    background-color: #a55518;
    color: white;
    border: 2px solid #fcf1e9;
  }

/* Consult Button Styling */
  .ConsultButton {
    order: 5;
    align-self: center;
    text-align: center;
    justify-content: center;
    margin: 1rem;
    /* padding: 1 rem; */

  }

  .consultationbutton{
    background-color: #fcf1e9;
    color: #a55518;
    cursor: pointer;
    border: 2px solid #a55518;
    border-radius: 7px 40px 7px 40px / 7px 50px 25px 50px;
    outline: none;
    font-size: large;
    font-family: "Marcellus", serif;
    text-align: center;
    box-shadow: 0 3px 3px 0 rgba(0, 0, 0, 0.332);
    height: 60px;
    width: 200px;
    margin: .5rem;
  }

  .consultationbutton:hover {
    background-color: #a55518;
    color: white;
    border: 2px solid #fcf1e9;
  }
  

/* About Me styling  */

.sep {
  display: flex;
  flex-direction: column;
  order: 6;
  width: 100%
}

.headshot2 {
  margin: 1rem;
  padding: 1rem;
  max-width: 75%;
  border-radius: 50px;
}


.AboutMe {
    display: flex;
    flex-direction: column;
    justify-items: flex-start;
    align-items: center;
    order: 8;
    margin: 1rem;
  }

.AboutMe h5 {
    display: flex;
    font-size: large;
    margin-top: .5rem; 
}

.believe{
  padding: 1rem;
  text-align: center;
}

.CallMe > p{
  padding: 1rem;

}

.headshot {
  display: flex;
  justify-content: center;
  margin: .3rem;
}

.headshot > img {
  border-radius: 50%;
  max-width: 70%;
  margin: .3rem;
  padding: .5rem;
  background: linear-gradient(130deg, #ffffff, #cddfde);
  box-shadow: 0 5px 15px 0 rgba(0, 0, 0, 0.236);

}

.text {
  margin: 1rem;
}

.text > p {
  font-size: medium;
  text-align: center;
  padding: 1.5rem .5rem;
  background-color: rgb(165, 85, 24, .4);
}
.BookaCall {
  display: flex;
  flex-direction: column;
  order: 9;
}
.CallMe {
  text-align: center;
  margin: 1rem;
  padding: 1rem 0rem;
}

#second {
  margin-top: 2rem;
}



.Intro {
  align-self: center;
  font-size: large;
  justify-self: center;
  text-align: center;
  padding: 1.5rem .5rem 1rem;
  background-color: #cddfde;
  font-weight: 200;
  border-radius: 25px;
  box-shadow: 0 5px 10px 0 rgba(41, 40, 40, 0.5);
  margin-bottom: 1rem;

}


.ReadMore {
  display: flex;
  justify-content: center;
  margin: .5rem;
  padding: .5rem;
}

.readmorebutton {
  background-color: #cddfde;
  cursor: pointer;
  margin: .2rem;
  padding: 1rem .7rem .7rem .7rem;
  text-align: center;
  font-size: 1rem;
  font-family: "Tajawal", sans-serif;
  border-radius: 10px;
  box-shadow: 0 3px 3px 0 rgb(0, 0, 0, .332);
  border: .5px solid #a2dfdc;
}

.readmorebutton:hover {
  background-color: #a55518;
  color: white;
  border: 2px solid #fcf1e9;
}


/* FAQ page Styling */
.FAQ {
    order: 9;
    margin: 1rem;
}

.FAQ >h4 {
    Font-size: larger;
    padding: 1rem;
}
details > summary {
    font-size: larger;
    padding-top: .5rem;
    padding-bottom: .5rem;
}

/* Footer Styling  */

.footer {
    display: flex;
    order: 9;
    width: 100%;
    background-color: #cddfde;
    flex-direction: column;
    justify-content: flex-start;
    flex-wrap: wrap;
  }

#Contact > h7 {
  font-size: medium;
  font-weight: bold;
  padding-bottom: .2rem;
}

.footer > #copyright {
  order: 2;
  align-self: flex-start;
  text-align: center;
}


#Contact {
  order: 1;
  align-self:flex-start;
  flex-basis: 10rem;
  padding: 1rem;
  text-align: left;
}

.contact > a {
  color: black;
}


.contact {
  font-size: large;
}

.filler {
  height: 220px;
}



/* styling for Education and Credentials section on About Me page*/
.EducationExperience {
  display: grid;
  justify-items: center;
  justify-content: center;
  margin: .5rem;
  padding: 1rem .5rem;
  font-size: large;
  max-width: 95%;
  grid-template: repeat(14, auto) / 25% 66% 1fr;
  column-gap: .5rem;
  row-gap: .2rem;
}

#heading1{
  grid-area: 1 / 1 / 2 / 4;

}
#icon1 {
  grid-area: 2 / 1 / 3 / 2;
}

#description1 {
  grid-area: 2 / 2 / 3 / 4;
}

#subd1 {
  grid-area: 3 / 2 / 4 / 4;
}

#icon2 {
  grid-area: 4 / 1 / 5 / 2;
}
#description2{
  grid-area: 4/ 2/ 5 / 4;
}

#subd2 {
  grid-area: 5/ 2 / 6/ 4;
}

#icon3 {
  grid-area: 6 / 1 / 7/ 2;
}
#description3{
  grid-area: 6/ 2/ 7/ 4;
}

#subd3 {
  grid-area: 7/ 2 / 8 / 4;
}

#icon4 {
  grid-area: 8 / 1 / 9/ 2;
}
#description4{
  grid-area: 8/ 2/ 9 / 4;
}
#subd4 {
  grid-area: 9 / 2 / 10 /3;
}

#heading2 {
  grid-area: 10 / 1 / 11 / 4;
}

#icon5 {
  grid-area: 11/ 1 / 12/ 2;
}
#description5{
  grid-area: 11/ 2/ 12 / 3;
}


#icon6 {
  grid-area: 12/ 1 / 13/ 2;
}
#description6{
  grid-area: 12/ 2/ 13/ 3;
}


#icon7 {
  grid-area: 13/ 1 / 14/ 2;
}
#description7{
  grid-area: 13/ 2/ 14/ 3;
}

#icon8 {
  grid-area: 14/ 1 / 15/ 2;
}
#description8{
  grid-area: 14/ 2/ 15/ 3;
  
}

#heading1, #heading2 {
  font-family: "Marcellus", serif;
  font-size: x-large;
  text-shadow: 0 3px 10px rgb(34, 22, 1, .25);
  text-decoration-line: underline;
  margin-bottom: 1rem;
  text-align: center;
}

div[id^="icon"] {
  padding-left: 1rem;
  justify-self: right;

}

div[id^="description"] {
  justify-self: left;
  align-self: center;
  font-weight: bold;
}

div[id^="subd"] {
  font-style: italic;
  font-size: medium;
  justify-self: left;
  margin-bottom: .8rem;
  margin-top: -.3rem;
}

#description5, #description6, #description7, #description8{
  align-self: center;
  justify-self: center;
}

/* Icon Styling in Education and Credentials Section  */
.material-symbols-outlined {
  font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 40;
  color:#a65519;
}



/* Google Calendar Scheduler on Book Consultation Page */
.gcal {
background-color: #ffffff;
max-width: 95%;
margin: 2rem 1rem;
padding: 1rem;
}
/* Our Services Styling */
.tag {
  font-size: medium;
  margin: .2rem;
}

/*Services Page Styling */

.servicesContainer {
  display: flex;
  flex-direction: column;
  padding: 0rem;
  margin: 2rem .5rem .5rem .5rem;
  border-top: 1px solid #a55518;
  border-right: 1px solid #a55518;
  border-left: 1px solid #a55518;
  
}

.serviceButton {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: .5rem .5rem 0rem .5rem;
  border-bottom: 1px solid #a55518;
  font-weight: 600;
  

}

.tabcontent {
  display: none;
  max-width: 400px;
  padding: 0rem 1rem;
  color: black;
  background-color: #ddb496;
  margin-bottom: 2rem;
}


#default {
  display: flex;
  height: 150px;
  width: 100%;
  padding: 1rem;
  background-color: #f5ddcc;
}

.service {
  font-size: medium;
  margin: auto;
  padding: .2rem 0rem;
  text-align: center;
}

.serviceTitle {
  text-align: center;
  padding-top: 1rem;
  font-size: larger;
  font-weight: 500;
  text-decoration-line: underline;
}

.listContainer {
  display: flex;
  text-align: center;
  justify-content: center;
  margin: auto;
  width: 100%;
}

.list {
  display: inline-block;
  font-weight: bold;
  list-style-position: outside;
  list-style-type:square;
  text-align: left;
  margin: 0 0 0 1rem;
  padding: 1rem;
  width: fit-content;
}

.resourceLinks {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-content: center;
  text-wrap: wrap;
}

.resourceLinks > a {
  padding: .5rem;
}

.conditionsTable, th, td {
  border: 1.5px solid;
  justify-content: center;
}

th {
  font-weight: bold;
}

th, td {
  padding: .5rem;
}

.conditionsTable {
  border: 1px solid;
  width: 70%;
  margin: auto;
  border-collapse: collapse;
  text-align: center;

}

#toTop {
  display: inline-block;
  margin: auto;
  
}

.servicesFooter {
  display: flex;
  background-color: #cddfde;
  flex-direction: column-reverse;
  width: 100vw;
  margin-top: 1rem;
}


/* Icon Container Styling */
.icon_container {
  display: flex;
  border: 1.5px solid #a55518;
  justify-content: center;
  align-items: center;
  background-color: #f7f2ee;
  height: 5rem;
  width: 5rem;
  border-radius: 3rem;
  margin: auto;
  padding: .55rem .35rem .3rem .3rem;
}

.icon_container:hover {
  background-color: #a2dfdc;
  border: 2px solid #f7f2ee;
}



/*Service Page styling (for each service offered) */
.service_description {
  order: 2;
  margin:auto;
  padding: 3rem;
  text-align: center;
}

/* Downloadable Document Styling on 'For Providers' Page */
.filecontainer {
  margin: 2rem;
  display: flex;
  flex-direction: column;
  align-items: space-evenly;
}
.download {
  margin: 1rem .5rem 0rem .5rem;
}

.download .icon_container {
  height: 3.2rem;
  width: 3rem;
  border-radius: 10px;

}

.file{
  margin: .5rem;
  text-align: center;
  font-weight: bold;
}

  /* Blank space for readability */
  /* Copyright 2025 Jessie Alexander

Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at

    http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License. */