/*@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,700;1,300;1,400;1,700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Merriweather:wght@400;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Merriweather:wght@700&family=Open+Sans&display=swap');
*/
/*@import url('https://fonts.googleapis.com/css2?family=Merriweather:wght@400;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;600;700&display=swap');
*/

/*@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap');*/

:root {
  --brainy-green: #59BB54;
  --brainy-grey: #393939;
  --brainy-blue: #558a9f;
}

html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}


body {
  color: #555;
  background: whitesmoke;
  /*font-family: -apple-system, BlinkMacSystemFont, "Helvetica", "Arial", sans-serif;*/
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Helvetica Neue', Arial, 'Inter', sans-serif;
  /*font-family: 'Inter', sans-serif;*/
  font-size: 18px;
}

body p {
  line-height: 1.3em;
}

a:link{color:inherit}
a:active{color:inherit}
a:visited{color:inherit;}
a:hover{color:inherit}

a {
  color: white;
}

.align-center {
  text-align: center;
}
.align-right {
  text-align: right;
}
.align-left {
  text-align: left;
}

.video-container {
  height: 300px;
  width: 300px;
  position: relative;
}

.video-container video {
  width: 100%;
  height: 100%;
  position: absolute;
  object-fit: cover;
  z-index: 0;
}

/* Just styling the content of the div, the *magic* in the previous rules */
.video-container .caption {
  z-index: 1;
  position: relative;
  text-align: center;
  color: #dc0000;
  padding: 10px;
}

.wrapper {
  padding-top: 4em;
}

.carousel h1 {
  margin: 0;
  text-shadow: 3px 0 3px #000000a8;
  font-size: 2em;
  color: white;
  font-weight: 500;
  /*font-family: 'Merriweather', serif;*/
}


.content h1 {
  /*font-family: 'Merriweather', serif;*/
  font-size: 1.6em;
}

.post-content h1.post-title {
  font-size: 2em;
  margin-top: 2em;
}

/* 
.carousel h1::after{
  background: #ac8158;
    bottom: -10px;
    content: "";
    height: 2px;
    left: 0;
    position: absolute;
    width: 25%;
} */

.carousel {
  position: relative;
}

.content {
  background: transparent;
  color: #252525;
  max-width: 100%;
  padding-bottom: 0;
}

.content img {
  width: 100%;
  max-width: 100%;
}

.content.post {
  max-width: 1200px;
}

.content strong {
  font-weight: normal;
  color: #023142;
}

.content section {
  max-width: 1024px;
  margin: auto;
}

.content.home section {
  padding: 2em 0;
}

.content section.full {
  max-width: 100%;
  width: 100%;
  position: relative;
}

h1,h2,h3,h4,h5, strong, b {
  font-weight: 600;
}

.content h1,
.content h2,
.content h3 {
  color: black;
  position: relative;
  /*font-size: 40px;*/
  /*font-family: sans-serif;*/
}

.content h1,
.content h2 {
  text-align: center;
}

/* .content h1:after{
    background: #ac8158;
    bottom: -10px;
    content: "";
    height: 3px;
    left: 45%;
    position: absolute;
    width: 10%;

}
.content h2:after{
    background: #ac8158;
    bottom: -10px;
    content: "";
    height: 3px;
    left: 45%;
    position: absolute;
    width: 10%;

}

.content h3:after {
    background: #ac8158;
    bottom: -10px;
    content: "";
    height: 3px;
    left: 0;
    position: absolute;
    width: 30px;

} */

.header {
  background: var(--brainy-grey);
  border: none;
  height: 5em;
}

.header ul {
  bottom: 0;
  width: 100%;
  text-align: left;
  background: var(--brainy-green);
}

.header ul .top {
  border: none;
  height: auto;
  color: white;

}

.header ul li {
  padding: .7em 1em;
  background: var(--brainy-green);
  line-height: 1em;
}

.header ul li:hover {
  background: #2A6527;
}

.header ul li:hover a {
  color: black;
}

.header .parent-subcategories li {
  line-height: 1.4em;
}



.posts {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1em;
}

.posts .post {
  background-color: var(--brainy-green);
  padding: 0;
  border-radius: .5em;
  /*box-shadow: 0px 2px 10px 2px rgba(0, 0, 0, 0.2);*/
}
.posts .post:nth-child(odd) {
  background-color: var(--brainy-blue);
  /*box-shadow: 0px 2px 10px 2px rgba(0, 0, 0, 0.2);*/
}

.posts .post img {
  border-radius: .5em .5em 0 0;
}

.post-page-content-container {
  display: block;
  padding: .5em;
  width: 100%;
  color: white;
  font-size: .8em;
  box-sizing: border-box;
}

.post-page-content-container h2 {
  color: white !important;
  text-decoration: none !important;
}

.posts .post .post-date {
  display: none;
}



.header ul a {
  color: whitesmoke;
  font-weight: normal;
  font-size: 17px;
}

.post-image-container img {
  width: 100%;
  aspect-ratio: 2/1;
}

.header .logo img {
  height: 2.5em;
  margin: .2em;
}

#footer {
  background: var(--brainy-grey);
  color: whitesmoke;
}

#footer a {
  color: #558a9f;
}

.home-overlay-text {
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  text-align: center;
  transform: translateY(-50%);
}

.home-overlay-text h3 {
  color: white;
  font-size: 3em;
  text-shadow: 3px 0 3px #000000a8;
}

.home-overlay-text .home-overlay-button {
  color: white;
  border: 1px solid white;
  background: none;
  font-size: 1.3em;
  display: inline-block;
  padding: 0.5em 2em;
  cursor: pointer;
}

#home-title {
  width: 100%;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
}

#home-title p {
  color: whitesmoke;
  font-size: 1.4em;
}

.green-button {
  background-color: #558a9f;
  color: whitesmoke;
  padding: 0.4em 1.2em;
  border-radius: 30px;
  font-size: 24px;
}

.green-button:visited {
  color: whitesmoke;
}

.header-contact-us {
  position: absolute;
  top: 0;
  right: 0;
}

.header-contact-us a {
    color: #ddd;
    border: 1px solid #ddd;
    border-radius: 1000px;
    padding: .5em 2em;
    display: block;
    font-size: .7em;
    margin: .5em;
}

.page-hero-image img {
  max-width: 100%;
}

.page-q-and-a .accordeon h2 {
  font-size: 1.2em;
  cursor: pointer;
  text-align: left;
  border-top: 1px solid gray;
  padding-top: 1em;
}

.page-q-and-a .accordeon h2:first-child {
  border-top: none;
}

.page-q-and-a .accordeon h2:after {
    content: "";
    display: block;
    width: 1em;
    height: 1em;
    background-image: url(https://brainy.rs/themes/_default/images/down-arrow.svg);
    background-size: cover;
    background-position: center;
    position: absolute;
    right: -1em;
    top: 1em;
    transform: rotate(-90deg);
    transition: transform .2s;
}

.page-q-and-a .accordeon h2.selected:after {
  transform: rotate(0deg);
}

.home-services {
  width: 100%;
  overflow: hidden;
}

.home-service {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  align-items: center;
  background: var(--brainy-green);
  /*align-items: stretch;*/
}

.home-service-image {
  position: relative;
}

.home-service-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: relative;
  display: block !important;
  aspect-ratio: 4/3;
}

.home-service-content {
  text-align: left;
  padding: 1em 10%;

}

.home-service-content .read-more-button {
  text-align: right;
}

a.gray-button {
  color: #eee;
  background: var(--brainy-grey);
  border-radius: 1000px;
  padding: .5em 2em;
  display: inline-block;
}

a.blue-button {
  color: #eee;
  background: var(--brainy-blue);
  border-radius: 1000px;
  padding: .5em 2em;
  display: inline-block;
}

.gray-button:visited{
  color: #ddd;
}

.home-service-content h2 {
  color: black;
}

.home-service-content p {
  color: white;
}

.home-service-content p a {
  color: white;
}

.home-blue-section {
  background: var(--brainy-blue);
  padding: 0 !important;
}

.home-blue-section-container {
  display: grid;
  grid-template-columns: 1fr 2fr;
  align-items: center;
  padding: 0 !important;
}


.home-blue-section-container img {
  display: block;
  position: absolute;
  bottom: 0;
  right: 0;
  max-height: 140%;
  width: auto; /* Maintain aspect ratio */
  max-width: 140%; /* Prevent overflow */

}

.home-blue-section-container h2 {
  text-align: left;
}

.home-blue-section-container div:first-child {
  position: relative;
  height: 100%;
}

.home-blue-section-container div:last-child {
  padding: 1em;
}

.home-blue-section-container p {
  color: white;
}

.home-bottom-green {
  margin-top: 5em !important;
  background: var(--brainy-green);
  padding: 0 !important;
}

.home-bottom-green-container {
  display: flex;
  justify-content: space-between;
  padding: 1em 0 !important;
  align-items: center;
}

.home-bottom-green-container h2 {
  margin: 0;
  padding: 0;
  color: white;
}

.home-bottom-green-container p {
  margin: 0;
  padding: 0;
  color: white;
}

.footer-top {
  display: grid;
  grid-template-columns: 3fr 3fr 2fr;
  column-gap: 1em;
  margin: auto;
  max-width: 1024px;
}

.footer-top h2 {
  color: var(--brainy-green);
}

.footer-top > div {
  text-align: left;
}
/*.footer-top > div:second-child {
  text-align: center;
}
.footer-top > div:last-child {
  text-align: right;
}*/


.posts .post {

}


.home-blog-section {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2em;

}

.home-blog {
  background: var(--brainy-green);
  border-radius: .5em;
  position: relative;
}

.home-blog:nth-child(even) {
  background: var(--brainy-blue);
}

.home-blog img {
  width: 100%;
  aspect-ratio: 2/1;
  object-fit: cover;
  display: block;
  border-radius: .5em .5em 0 0;
}

.home-blog h2 {
  color: white;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  text-align: left;
}

.home-blog .home-blog-content {
  width: 70%;
  padding: 1em;
  box-sizing: border-box;
  color: white;
  font-size: .8em;
}

.home-blog-read-more {
    position: absolute;
    bottom: 1em;
    right: 1em;
    height: 2em;
    
}

.home-blog-read-more img {
  height: 2em;
  aspect-ratio: 1 / 1;
}

.home-schedule-contact-container {
  text-align: center;
  margin-bottom: 3em;
   margin-top: 2em;
}

.home-schedule-contact {
  display: inline-block;
  background: var(--brainy-blue);
  color: white !important;
  padding: .8em 2em;
  border-radius: 1000px;
}

.home-text-top {
  text-align: center;
}

.post-content {
  width: 100%;
  margin-top:  3em;
}

.post-content-text {
  padding: 0 2em;
}

.post-content-text h2 {
  font-weight: normal;
}
































@media screen and (max-width: 1000px) {
  .content.home h1 {
    font-size: 2em;
  }

  .content {
    padding: 0;
  }

  .header {
    height: 3em;
  }
  .wrapper {
    padding-top: 3em;
  }

  .header .menu {
    background: var(--brainy-green);
  }

  .header ul a {
    font-size: 1em;
  }

  #hamburger {
    top: .6em;
    right: .6em;
  }

  #hamburger img {
    height: 1.5em;
  }

  .header-contact-us {
    display: none;
  }

  .home-blog-section {
    grid-template-columns: repeat(1, 1fr);
    padding: .5em;
  }

  .content.home section.home-text-top {
    padding: .5em;
  }
  .content.home section.home-text-mid {
    padding: .5em;
  }

  .home-service {
    grid-template-columns: repeat(1, 1fr);
  }

  .home-blue-section-container {
    grid-template-columns: repeat(1, 1fr);
  }
  .home-blue-section-container > div:nth-child(1) {
    order: 2;
    height: 5em;
  }

  .home-blue-section-container > div:nth-child(2) {
    order: 1;
  }

  .home-bottom-green-container {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    gap: 2em;
    text-align: center;
  }

  .home-blue-section-container img {
        position: absolute;
        right: auto;
        left: -1em;
        width: auto;
        height: 15em;
        max-height: none;
  }

  .carousel h1 {
    position: relative;
    top: 30%;
    left: 0;
    width: 100%;
    font-size: 2em;
    text-align: center;
    color: white;
    transform: translate(0, 0);
    z-index: 3;
  }

  .carousel h1::after {
    content: '';
    display: none;
  }

  .carousel-mobile {
    filter: brightness(0.7);
  }

  .home-overlay-text h3 {
    font-size: 1em;
  }

  /*.carousel h1::after{
    background: #cc6218;
      bottom: -10px;
      content: "";
      height: 5px;
      left: 40%;
      position: absolute;
      width: 20%;
  }*/

  .posts {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
  }

  .footer-top {
    grid-template-columns: repeat(1, 1fr);
  }

  .content.page {
    padding: .5em;
  }

  .page-hero-image {
    display: block;
  }

  .accordeon {
    width: 90%;
  }
  .page-q-and-a .accordeon h2:after {
    top: 50%;
    width: .5em;
  }

  .google-map iframe {
    max-width: 100%;
  }

  .post-content-text {
    padding: .5em;
  }

}