@import url('https://fonts.googleapis.com/css2?family=Overlock&effect=outline');

body {
  font-family: "Overlock", serif
}
.title_div
{
  display: flex;
  align-self: center;
  justify-self: center;

  min-height: 55svh;
  min-width: 96svw;

  margin-top: 10px;

  background-color: #d1efff;
  border-left: 15px solid #79addc;
  border-right: 15px solid #79addc;

  border-radius: 10px;
}

.title_text
{
  align-self: center;
  margin-top: 0px;
  margin-left: 10svw;
  font-size: 5em
}

.title_paragraph
{
  margin-left: 8svw;
  align-self: center;
  font-size: xx-large;
}

.resources_div
{
  display: flex;
  align-self: center;
  justify-self: center;

  min-height: 55svh;
  min-width: 96svw;

  margin-top: 15px;

  background-color: #fff1e9;
  border-left: 15px solid #ffd9c3;
  border-right: 15px solid #ffd9c3;

  border-radius: 10px;

  justify-content: center;

  flex-direction: column;
}

.resources_paragraph
{
  font-size: x-large;
  text-align: center;
}

.resources_box
{
  min-height: 10svh;
  min-width: 50svw;
  max-width: 50svw;
  
  align-self: center;

  background-color: #ffd9c3;

  margin-bottom: 1svh;

  font-size: xx-large;

  font-family: "Overlock", serif;

  border-width: 0;
  
  cursor: pointer;
}

.resources_box:hover
{
  background-color: #ffcaac;
}

.blog_button
{
  min-height: 7.5svh; 
  min-width: 15svw; 
  
  margin-left: 5svw;

  align-self: center;
  
  background-color: #ffcbad;
  
  border: 4px solid rgb(255, 189, 151);

  border-radius: 20px;

  font-family: "Overlock", serif;

  font-size: x-large;

  cursor: pointer;
}

.blog_button:hover
{
  background-color: #ffd5bb;

}

.counseling_div
{
  display: flex;
  align-self: center;
  justify-self: center;

  min-height: 35svh;
  min-width: 75svw;

  margin-top: 15px;

  background-color: #d5f3da;
  border-left: 15px solid #b8ddbe;
  border-right: 15px solid #b8ddbe;

  border-radius: 10px;

  justify-content: center;
  flex-direction: row;
}

.counseling_button
{
  min-height: 7.5svh; 
  min-width: 15svw; 
  
  align-self: center;
  
  background-color: #a5d6ad;
  
  border: 4px solid #83ad89;

  border-radius: 20px;

  font-family: "Overlock", serif;

  font-size: x-large;

  cursor: pointer;
}

.counseling_button:hover
{
  background-color: #b0dfb8;

}

.testimonial_div
{
  display: flex;
  align-self: center;
  justify-self: center;

  min-height: 25svh;
  min-width: 65svw;

  margin-top: 15px;

  background-color: #fffbc8;
  border-left: 15px solid rgb(255, 249, 168);
  border-right: 15px solid rgb(255, 249, 168);

  border-radius: 10px;

  justify-content: center;
  flex-direction: row;
}

.testimonial_button
{
  min-height: 7.5svh; 
  min-width: 15svw; 
  
  margin-left: 10svw;
  align-self: center;
  
  background-color: #eee56a;
  
  border: 4px solid rgb(207, 200, 97);

  border-radius: 20px;

  font-family: "Overlock", serif;

  font-size: x-large;

  cursor: pointer;
}

.testimonial_button:hover
{
  background-color: #fff89a;
}



/*HEADER STYLING*/
.home-page .navbar {
  background: #79addc;
}
/* 🌿 NAVIGATION BAR STYLES */
.navbar {
  width: 100%;
  background: var(--accent-color, #79addc);
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 1rem 3rem;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  position: sticky;
  top: 0;
  z-index: 10;
}
/*  stops items from going off screen */
.nav-list {
  display: flex;
  flex-wrap: wrap;          
  gap: 1rem;                
  list-style: none;
  padding: 0 1rem;
  margin: 0;
}
.nav-logo {
  font-size: 1.5rem;
  font-weight: 600;
  color: white;
  letter-spacing: 1px;
}

.nav-links {
  list-style: none;
  display: flex;
  gap: 1.5rem;
}

.nav-links a {
  text-decoration: none;
  color: white;
  font-weight: 500;
  transition: opacity 0.3s ease;
}

.nav-links a:hover {
  opacity: 0.8;
}

.nav-links a.active {
  border-bottom: 2px solid white;
  padding-bottom: 2px;
}
.page-header {
  width: 100%;
  background: var(--accent-color, #79addc);
  text-align: center;
  padding: 1rem 0;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}


.page-header .navbar {
  background: none; /* remove duplicate color */
  box-shadow: none;
  padding: 0;
}