/**
Theme Name: Astra Child
Author: Brainstorm Force
Author URI: http://wpastra.com/about/
Description: Astra is the fastest, fully customizable & beautiful theme suitable for blogs, personal portfolios and business websites. It is very lightweight (less than 50KB on frontend) and offers unparalleled speed. Built with SEO in mind, Astra comes with schema.org code integrated so search engines will love your site. Astra offers plenty of sidebar options and widget areas giving you a full control for customizations. Furthermore, we have included special features and templates so feel free to choose any of your favorite page builder plugin to create pages flexibly. Some of the other features: # WooCommerce Ready # Responsive # Compatible with major plugins # Translation Ready # Extendible with premium addons # Regularly updated # Designed, Developed, Maintained & Supported by Brainstorm Force. Looking for a perfect base theme? Look no further. Astra is fast, fully customizable and beautiful theme!
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: astra-child
Template: astra


*/


/* ------- THEME OVERRIDES ------- */
/* ------------------------------- */

#ast-scroll-top {
	display: none !important;
}

.ast-container {
    max-width: 100% !important;
  }

@media (min-width: 922px) {
  .ast-container {
    max-width: 100%;
  }
}

/* ------- LANDING PAGE ------- */
/* ---------------------------- */

header,
footer {
	display: none;
}

button,
button:hover {
	transition-duration: 250ms;
}

.logo-container {
	& .logo.logo--outer {
		top: 15rem;
	}
	
	.logo.logo--words {
		top: 47rem;
	}
	
	.logo.logo--sun {
		top: 22.2rem;
	}
}

/* -------- VARIABLES -------- */
/* --------------------------- */
:root {
  /* Colors */
  --color-black: #2a2a2a;
  --color-white: #fafafa;

  --color-primary: #e0d6c5;
  --color-primary--soft: #f4f0e8;

  --color-brown: #bf5f29;
  --color-yellow: #faae3c;
  --color-red: #e64122;
  --color-green: #0d7769;

  --color-brown--soft: #c19177;
  --color-yellow--soft: #f6cc8d;
  --color-red--soft: #e48371;
  --color-green--soft: #73b0a8;

  /* Shadows */
  --shadow-dark: rgba(0, 0, 0, 0.25);
  --shadow-light: rgba(0, 0, 0, 0.15);

  /* Spacing */
  --spacing-xs: 2.4rem;
  --spacing-s: 4.8rem;
  --spacing-m: 6.4rem;
  --spacing-l: 9.6rem;
  --spacing-xl: 12.8rem;
  --spacing-wrapper: 15rem;

  /* Temporary Variables */
  --color-placeholder: #7a7a7a;
}

@media (max-width: 1280px) {
  :root {
    --spacing-wrapper: 9.6rem;
  }
}

@media (max-width: 1024px) {
  :root {
  }
}

@media (max-width: 900px) {
  :root {
    --spacing-wrapper: 7.2rem;
  }
}

@media (max-width: 768px) {
  :root {
  }
}
@media (max-width: 600px) {
  :root {
    --spacing-wrapper: 6.4rem;
  }
}

@media (max-width: 480px) {
  :root {
    --spacing-wrapper: 2.4rem;
  }
}

/* -------- RESET -------- */
/* ----------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  color-scheme: dark light;
}

* {
  margin: 0;
}

body {
  margin: unset;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

p,
h1,
h2,
h3,
h4,
h5,
h6 {
  overflow-wrap: break-word;
  margin-bottom: 0;
}

p {
  max-width: 75ch;
  text-wrap: pretty;
  -moz-text-wrap: pretty;
  margin-bottom: 1.4rem;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  text-wrap: balance;
}

a,
button {
  text-decoration: none;
}

button,
input,
textarea,
select {
  font: inherit;
}

img,
picture,
svg,
canvas {
  display: block;
  max-inline-size: 100%;
  block-size: auto;
}

input:focus {
  outline: none !important;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

@media (prefers-reduced-motion: no-preference) {
  :has(:target) {
    scroll-behavior: smooth;
    scroll-padding-top: 2.4rem;
  }
}

/* -------- TYPOGRAPHY -------- */
/* ---------------------------- */


body,
p,
a,
li,
button {
  font-family: 'Montserrat', sans-serif;
  font-optical-sizing: auto;
  font-size: 1.5rem;
  font-weight: 500;
  font-style: normal;
  color: var(--color-black);
}

h1,
h2,
h3 {
  font-family: 'Amatic SC';
  font-weight: 700;
  line-height: 1;
  color: var(--color-black);
}

h1 {
  font-size: 7.2rem;

  @media (max-width: 1280px) {
    font-size: 6.6rem;
  }

  @media (max-width: 1024px) {
    font-size: 5.6rem;
  }

  @media (max-width: 768px) {
    font-size: 5.5rem;
  }
}

h2 {
  font-size: 6rem;

  @media (max-width: 1280px) {
    font-size: 5.4rem;
  }

  @media (max-width: 1024px) {
    font-size: 4.8rem;
  }
}

h3 {
  font-size: 4.4rem;
}

/* -------- ANIMATIONS -------- */
/* ---------------------------- */
body {
}
/* Transitions and opacity for fade-in animations. */
.hide45deg {
  transform: translate(4rem, -4rem);
}

.hide90deg {
  transform: translateX(4rem);
}

.hide135deg {
  transform: translate(4rem, 4rem);
}

.hide180deg {
  transform: translateY(4rem);
}

.hide225deg {
  transform: translate(-4rem, 4rem);
}

.hide270deg {
  transform: translateX(-4rem);
}

.hide315deg {
  transform: translate(-4rem, -4rem);
}

.hide45deg,
.hide90deg,
.hide135deg,
.hide180deg,
.hide225deg,
.hide270deg,
.hide315deg {
  opacity: 0;
}

/* -------- BASE -------- */
/* ---------------------- */
html {
  width: 100%;
  font-size: 62.5%;
}

html,
body {
  background: var(--color-primary);
}
section {
  background: var(--color-primary);

  & .bg-green {
    background: var(--color-green);

    & p,
    & h1,
    & h2,
    & h3 {
      color: var(--color-primary);
    }
  }
}

/* -------- UTILITIES -------- */
/* --------------------------- */

.u-has-shadow-dark {
  box-shadow: 0 4px 8px var(--shadow-dark);
}

.u-has-shadow-light {
  box-shadow: 0 4px 8px var(--shadow-light);
}

section.section-container {
  padding-left: var(--spacing-wrapper);
  padding-right: var(--spacing-wrapper);
}



/* Images */

.u-rad-8 {
  border-radius: 8px;
}

/* Typography */

.u-light-text > h2,
.u-light-text > h3,
.u-light-text > p,
.u-light-text {
  color: var(--color-primary);
}

.u-strong-text {
  font-size: 1.8rem;
  font-weight: 700;
}

/* -------- GRIDS -------- */
/* ----------------------- */
.grid {
  display: grid;
}

.grid-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.grid-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.grid-12 {
  grid-template-columns: repeat(12, minmax(0, 1fr));
}

.gc-1 {
  grid-column-start: 1;
}

.gc-2 {
  grid-column-start: 2;
}

.gc-3 {
  grid-column-start: 3;
}

/* -------- BUTTONS -------- */
/* ------------------------- */
a:has(button) {
  display: inline-block;
	text-decoration: none !important;

  @media (max-width: 600px) {
    width: 100%;
  }
}

button {
  padding: 0.8rem 3.2rem;
  border-radius: 50rem;
  border: none;
  font-weight: 600;
  transition-duration: 250ms;
  min-width: 14.4rem;

  @media (max-width: 768px) {
    min-width: 22.4rem;
  }

  @media (max-width: 600px) {
    width: 100%;
  }

  &:hover {
    transform: translatey(-4px);
    cursor: pointer;
  }

  &.btn-solid {
    background-color: var(--color-yellow);
    color: var(--color-black);
    box-shadow: 0 4px 8px var(--shadow-dark);

    &:hover {
      box-shadow: 0 4px 8px 4px var(--shadow-light);
    }
  }

  &.btn-outline {
    background-color: transparent;
    color: var(--color-yellow);
    border: 3px solid var(--color-yellow);
    font-weight: 800;
    letter-spacing: 1px;
  }
}

/* -------- HOME PAGE -------- */
/* --------------------------- */

/* Hero Section */
section.hero {
  margin: var(--spacing-xl) 0;
}

.hero__content,
.hero__logo {
  display: grid;
  place-items: center;
}

.hero__content {
  grid-column-start: 1;

  @media (max-width: 768px) {
    grid-row-start: 2;
    grid-column-start: 1;
    grid-column-end: 3;
    margin-top: var(--spacing-m);
    text-align: center;
  }

  & h1 {
    margin-bottom: 0.8rem;

    @media (min-width: 600px) and (max-width: 768px) {
      font-size: 6.6rem;
    }
  }

  & p {
    max-width: 70%;
    margin-bottom: var(--spacing-s);
    font-weight: 600;

    @media (max-width: 900px) {
      max-width: 100%;
      padding-right: 2.4rem;
    }

    @media (max-width: 768px) {
      padding: 0;
    }
  }
}

.hero__logo {
  grid-column-start: 2;

  @media (max-width: 768px) {
    grid-row-start: 1;
    grid-column-start: 1;
    grid-column-end: 3;
  }

  & img {
    width: 44.6rem;
    justify-self: right;

    @media (max-width: 1280px) {
      width: 38rem;
    }

    @media (max-width: 1024px) {
      width: 36rem;
    }

    @media (max-width: 900px) {
      width: 30rem;
    }

    @media (max-width: 768px) {
      justify-self: center;
      width: 40rem;
    }

    @media (max-width: 600px) {
      width: 30rem;
    }
  }
}

/* Quote Section */
.quote {
  text-align: center;
  margin: var(--spacing-m) auto;

  @media (max-width: 600px) {
    text-align: left;
  }

  & .quotation {
    margin: 0 auto var(--spacing-xs) auto;
  }

  & .signature {
    margin: 0 auto;
    font-size: 1.6rem;
    font-weight: 600;
  }
}


/* About Section */
section.about {
  background: var(--color-green);
  padding-top: var(--spacing-xl);
  padding-bottom: var(--spacing-xl);

  & .about__content {
    grid-column-start: 1;
    grid-column-end: 7;

    @media (max-width: 900px) {
      grid-column-end: 9;
    }

    @media (max-width: 768px) {
      grid-column-end: 13;
    }

    & .about__content--inner {
      transition: 750ms ease;
      padding-right: 2.4rem;

      & .about__content--line {
        width: 36rem;
        margin: 0.8rem 0 var(--spacing-xs) 0;
        border-top: solid 2px var(--color-yellow);

        @media (max-width: 768px) {
          margin: 0.8rem auto var(--spacing-xs) auto;
        }
      }

      & button {
        margin-top: calc(var(--spacing-s) - 1.4rem);
      }
    }
  }

  & .about__image {
    place-content: center;
    text-align: right;
    grid-column-start: 7;
    grid-column-end: 13;

    @media (max-width: 900px) {
      grid-column-start: 9;
    }

    @media (max-width: 768px) {
      grid-row-start: 2;
      grid-column-start: 1;
      text-align: center;
      margin-top: var(--spacing-m);
    }

    & img {
      display: inline-block;

      @media (max-width: 1280px) {
        width: 36rem;
        object-fit: cover;
      }

      @media (max-width: 1024px) {
        width: 30rem;
        object-fit: cover;
      }

      @media (max-width: 768px) {
        width: 40rem;
      }
    }
  }
}

/* Services Section */
section.services {
  padding-top: var(--spacing-xl);
  padding-bottom: var(--spacing-xl);
  text-align: center;

  & h2 {
    /* margin-bottom: var(--spacing-s); */
  }

  & .services__line {
    width: 36rem;
    margin: var(--spacing-xs) auto var(--spacing-s) auto;
    border-top: solid 2px var(--color-green);
  }

  & .services__list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    text-align: center;

    @media (max-width: 768px) {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    & .services__list--service {
      width: 25.6rem;
      margin-bottom: var(--spacing-m);
      transition: 750ms ease;

      @media (max-width: 1280px) {
        width: 24rem;
      }

      @media (max-width: 1024px) {
        width: 20rem;
      }

      @media (max-width: 1024px) {
        width: 20rem;
      }

      @media (max-width: 900px) {
        width: 18rem;
      }

      @media (max-width: 768px) {
        width: 20rem;
      }

      @media (max-width: 600px) {
        /* width: 32rem; */
        width: 100%;
      }
    }

    & img {
      border-radius: 75px;
      margin-bottom: var(--spacing-xs);

      @supports (corner-shape: squircle) {
        corner-shape: squircle;
      }

      @media (max-width: 1024px) {
        border-radius: 70px;
      }

      @media (max-width: 900px) {
        border-radius: 60px;
      }
    }

    & .service-title {
      margin-bottom: 0;
    }

    & #service-1,
    & #service-4 {
      grid-column-start: 1;
    }

    & #service-2,
    & #service-5 {
      justify-self: center;
      grid-column-start: 2;
    }

    & #service-3,
    & #service-6 {
      justify-self: end;
      grid-column-start: 3;
    }

    @media (max-width: 768px) {
      & #service-1,
      & #service-3,
      & #service-5 {
        grid-column-start: 1;
        justify-self: center;
      }
      & #service-2,
      & #service-4,
      & #service-6 {
        grid-column-start: 2;
        justify-self: center;
      }
    }

    @media (max-width: 600px) {
      & #service-1,
      & #service-2,
      & #service-3,
      & #service-4,
      & #service-5,
      & #service-6 {
        grid-column-start: 1;
        grid-column-end: 3;
      }
    }
  }
}

/* Waves Section */
section.waves {
  & .waves__image {
    grid-column-start: 1;
    grid-column-end: 6;
    background-image: url(https://innersolpsychology.com/wp-content/uploads/2026/03/Waves-New.png);
    background-position: center;
    background-size: cover;
    place-content: center;
    padding: var(--spacing-m) var(--spacing-xl) var(--spacing-m)
      var(--spacing-wrapper);

    @media (max-width: 1280px) {
      padding: var(--spacing-xs) var(--spacing-wrapper) var(--spacing-xs)
        var(--spacing-wrapper);
    }

    @media (max-width: 1024px) {
      padding: var(--spacing-xs) var(--spacing-m) var(--spacing-xs)
        var(--spacing-wrapper);
    }

    @media (max-width: 900px) {
      padding: 0 var(--spacing-m) 0 var(--spacing-m);
    }

    @media (max-width: 768px) {
      grid-row-start: 2;
      grid-column-end: 13;
      padding: var(--spacing-m) var(--spacing-wrapper) var(--spacing-m)
        var(--spacing-wrapper);
    }

    & figure.waves__image--wrapper {
      width: 100%;
      aspect-ratio: 2 / 3;

      @media (max-width: 786px) {
        aspect-ratio: 3.5 / 3;
      }

      @media (max-width: 600px) {
        aspect-ratio: 1 / 1;
        border-radius: 60px;
      }
    }

    & img {
      width: 100%;
      height: 100%;
      object-fit: cover;

      @media (max-width: 600px) {
        border-radius: 60px;
      }
    }
  }

  & .waves__content {
    grid-column-start: 6;
    grid-column-end: 13;
    display: flex;
    padding: var(--spacing-xl) var(--spacing-wrapper) var(--spacing-xl)
      var(--spacing-l);

    @media (max-width: 1024px) {
      padding: var(--spacing-m) var(--spacing-wrapper) var(--spacing-m)
        var(--spacing-l);
    }

    @media (max-width: 900px) {
      padding: var(--spacing-s) var(--spacing-wrapper) var(--spacing-s)
        var(--spacing-m);
    }

    @media (max-width: 768px) {
      grid-row-start: 1;
      grid-column-start: 1;
      padding: 0 var(--spacing-wrapper) var(--spacing-s) var(--spacing-m);
    }
  }

  & .waves__content--line {
    width: 36rem;
    margin: 0.8rem 0 var(--spacing-xs) 0;
    border-top: solid 2px var(--color-green);
  }
}
@supports (text-box-trim: trim-both) {
  & .waves__content {
    & h2 {
      text-box-trim: trim-both;
      text-box-edge: cap alphabetic;
    }
  }
}

/* FAQ Section */
section.faq {
  align-items: start;

  & .faq__list {
    grid-column-start: 1;
    grid-column-end: 8;
    position: relative;
    width: 70rem;
    max-width: 100%;
    padding: var(--spacing-xl) 0 var(--spacing-xl) var(--spacing-wrapper);

    @media (max-width: 1280px) {
      grid-column-end: 9;
    }

    @media (max-width: 768px) {
      grid-column-end: 13;
      padding: var(--spacing-xl) var(--spacing-wrapper) var(--spacing-xl)
        var(--spacing-wrapper);
    }

    & .faq__list--question {
      display: flex;
      justify-content: space-between;
      margin-top: 4rem;
      position: relative;

      & .faq-question {
        font-size: 1.6rem;
        font-weight: 600;
      }
      & span {
        max-width: 16px;
      }
      & span svg {
        &:hover {
          cursor: pointer;
        }
      }

      & span svg {
        transform: rotate(0deg);
        transition: transform 250ms ease-in-out;
      }

      & span.rotated svg {
        transform: rotate(45deg);
      }
    }

    & .faq__list--question {
      position: relative;
      transition: 750ms ease;
    }

    & .faq__list--question::before {
      position: absolute;
      top: -1.6rem;
      content: '';
      width: 100%;
      height: 2px;
      background: var(--color-green--soft);
    }

    & .faq__content {
      max-height: 24px;
      /* max-height: calc(var(--collapsed-height) - 2px); */
      overflow: hidden;
      transition: 250ms ease-in-out;
    }

    & .faq__content.large-q {
      max-height: 44px;
    }

    .faq__list--question.expanded .faq__content {
      max-height: 500px;
    }
  }

  & .faq__info {
    padding: var(--spacing-xl) var(--spacing-wrapper) var(--spacing-xl) 0;
    grid-column-start: 9;
    grid-column-end: 13;
    display: flex;
    place-items: center;
    text-align: center !important;
    grid-auto-rows: min-content; /* Each row only as tall as needed */
    /* min-height: 800px; */

    @media (max-width: 768px) {
      display: none;
    }

    & .faq__info--content {
      margin: 0 auto;

      @media (max-width: 1280px) {
        margin-left: 2.4rem;
      }

      & img {
        width: 16rem;
        margin: 0 auto 4.8rem auto;
      }
    }
  }
}

/* Booking Section */
section.booking {
  padding: var(--spacing-xl) var(--spacing-wrapper) var(--spacing-xl)
    var(--spacing-wrapper);
  text-align: center;
  background: var(--color-green);

  & .booking__line {
    width: 36rem;
    margin: 0.8rem auto var(--spacing-xs) auto;
    border-top: solid 2px var(--color-yellow);
  }

  & h2 {
    margin-bottom: var(--spacing-xs);
  }

  & p {
    margin: 0 auto 1.4rem auto;
  }

  & .booking__buttons {
    margin-top: var(--spacing-s);
    display: flex;
    gap: var(--spacing-s);
    justify-content: center;
  }
}

/* Translation Toggle */
[data-lang] {
  display: none;
}

[lang='en'] [data-lang='en'],
[lang='es'] [data-lang='es'] {
  display: block;
}

[lang='en'] span[data-lang='en'],
[lang='en'] a[data-lang='en'],
[lang='es'] span[data-lang='es'],
[lang='es'] a[data-lang='es'] {
  display: inline;
}

/* Buttons for Language Settings */
.language-switcher button {
  padding: 8px 16px;
  border: 2px solid #ccc;
  background: white;
  cursor: pointer;
  transition: all 0.3s;
}

.language-switcher button.lang-active {
  background: #007bff;
  color: white;
  border-color: #007bff;
}

.language-switcher button:hover {
  border-color: #007bff;
}

/* Toggle Switch for Language Settings */

.language-toggle {
  position: fixed;
  top: 8rem;
  right: 3.3rem;
  display: inline-block;
  width: 6.8rem;
  height: 34px;
}

.language-toggle input {
  opacity: 0;
  width: 0;
  height: 0;
}

.toggle-track {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: var(--color-primary--soft);
  border: 2px solid var(--color-yellow);
  border-radius: 36px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 8px 0 7px;
}

.lang-label {
  font-size: 13px;
  font-weight: bold;
  color: #999;
  transition: color 0.3s;
  z-index: 1;
  user-select: none;
}

.lang-label.left {
  margin-left: 2px;
}

.lang-label.right {
  margin-right: 2px;
}

.toggle-slider {
  position: absolute;
  height: 28px;
  width: 28px;
  left: 3px;
  background-color: var(--color-primary--soft);
  border: 2px solid var(--color-yellow);
  border-radius: 50%;
  transition: transform 0.3s;
  box-shadow: 0 2px 4px var(--shadow-dark);
}

/* When checked (ES selected) */
input:checked + .toggle-track .toggle-slider {
  transform: translateX(30px);
}

input:checked + .toggle-track .lang-label.lang-label--right {
  color: #000000;
}

/* When unchecked (EN selected) */
input:not(:checked) + .toggle-track .lang-label.lang-label--left {
  color: #333;
}

/* Focus state for accessibility */
input:focus + .toggle-track {
  box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.1);
}

/* Hover effect */
.toggle-track:hover .toggle-slider {
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}

.container {
  text-align: center;
  width: 560px;
  margin: 0 auto;
}


/* Section Titles DO NOT DISPLAY */
.hide-section-title {
	display: none;
}