@import url('https://fonts.googleapis.com/css2?family=Birthstone&family=Charm:wght@400;700&family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Lora:ital,wght@0,400..700;1,400..700&family=Merriweather:ital,opsz,wght@0,18..144,300..900;1,18..144,300..900&family=Oleo+Script:wght@400;700&family=Oswald:wght@200..700&family=Playfair+Display:ital,wght@0,400..900;1,400..900&display=swap');

:root {
  --font-default: "Inter";
  --font-headline: "Oswald", sans-serif; 
  --font-ia: "Merriweather";
  --font-hand: "Birthstone";
  --breakpoint-xs: 30rem;
  --spacing: 0.5rem;
  --color-dark: oklch(21.6% 0.006 56.043);
  --color-white: oklch(94.3% 0.029 294.588);
  --color-link: #fe9a00;
  --color-placeholder: #999;
  --color-grey: oklch(70.7% 0.022 261.325);
  --color-ag-white: oklch(94.3% 0.029 294.588);
  --color-ag-grey: oklch(94.3% 0.029 294.588);
  --color-ag-aspect: oklch(37.4% 0.01 67.558);
  --color-ag-link: oklch(96.2% 0.059 95.617);
}

body {
    font-family: 'Inter';
    color: oklch(94.3% 0.029 294.588);
    margin: 0; 
    padding: 0; 
    min-height: 100vh;
}

a {text-decoration: none; color:var(--color-link)}
p {margin-block-start: 0;}
img, svg { max-width: 100%; height:auto;}

/* Helpers */
      .w-full {width: 100%;}
      .w-50 {width:50% !important;}
      .w-max-sm {max-width: 360px;}

      .hidden {display: none;}

      .font-mono {font-family: monospace;}
      .upper { text-transform: uppercase;}

      .row {display: flex;flex-wrap: wrap; gap:1rem; align-items: center;box-sizing: border-box;}
      .gap-sm {gap:0.5rem;}
      .col {flex:1 1 auto;}
      .flex-8 {flex: 8;}
      .flex-7 {flex: 7;}
      .flex-6 {flex: 6;}
      .flex-5 {flex: 5;}
      .flex-4 {flex: 4;}
      .flex-3 {flex: 3;}
      .flex-2 {flex: 2;}
      .align-top {align-items: flex-start;}
      .flex-50p {flex-basis: 50% !important;}

      .th {
        font-weight: 500;
        padding: 0.75rem 0.6rem;
        border-bottom: 1px solid oklch(55.3% 0.013 58.071);
      }
      
      .td {
        font-weight: 300;
        padding: 0.6rem;
        border-bottom: 1px solid oklch(37.4% 0.01 67.558);
      }

      .mt-0 {margin-top: 0 !important;}
      .mt {margin-top: calc(var(--spacing) * 8);} .mt-l {margin-top: calc(var(--spacing) * 10);} .mt-xl {margin-top: calc(var(--spacing) * 12);}
      .mb {margin-bottom: calc(var(--spacing) * 8);} .mb-l {margin-bottom: calc(var(--spacing) * 10);} .mb-xl {margin-bottom: calc(var(--spacing) * 12);}

      .pt-0 {padding-top: 0 !important;}
      .pt-s {padding-top: calc(var(--spacing) * 7) !important;} .pt {padding-top: calc(var(--spacing) * 14) !important;} .pt-l {padding-top: calc(var(--spacing) * 10);} .pt-xl {padding-top: calc(var(--spacing) * 12);}
      .pb {padding-bottom: calc(var(--spacing) * 14);} .pb-l {margin-bottom: calc(var(--spacing) * 10);} .pb-xl {padding-bottom: calc(var(--spacing) * 12);}

      .text-center {text-align: center;}
      .text-right {text-align: right;}
      .text-small {font-size:0.8em !important;}


      .visible-mobile { display: none; }
      .hidden-mobile { display: block; }

      @media (max-width: 768px) {
        .visible-mobile { display: block; }
        .hidden-mobile { display: none; }
      }


 /* Main */               


@keyframes rotateClockwise { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
.horoscopia-img {
  max-width: 240px;
  animation: rotateClockwise 60s linear infinite;
}


h1 {
  font-family: 'Oswald', sans-serif;
  font-size: 3.5rem;
  color: oklch(96.9% 0.016 293.756);
  text-align: center;
  padding: 0;
  margin-top: 1.5rem;
  margin-bottom: 1rem;
}
h1 .span-v1 {
  font-family: 'Merriweather';
  font-size: 1.08em;
  font-weight: 300;
  font-style: italic;
}
h1 span {
  font-family: "Charm";
  font-size: 1.15em;
  letter-spacing: 0px;
}

h2 {
  font-family: 'Oswald', serif;
  font-size: 2.75rem;
  line-height: 1.25em;
  color: oklch(94.3% 0.029 294.588);
  text-align: center;
  margin-top: 0;
  margin-bottom: 0.75rem;
}

h2.headline {
  font-family: 'Lora', serif;
  margin: 0 auto;
  font-weight: 200;
  font-size: 1.6rem;
  color: oklch(94.3% 0.029 294.588);
  text-align: center;
  max-width: 540px;
}
.charm {
  font-family: "charm";
  font-size: 1.1em;
}

h3 {
  font-size: 2rem;
  line-height: 1.25em;
}

h4 {
  font-size: 1.75rem;
  font-family: 'Lora';
  font-weight: 400;
  line-height: 1.25em;
  text-align: center;
}


.bg-main {
  background: linear-gradient(to bottom, oklch(38% 0.189 293.745), oklch(28.3% 0.141 291.089));
}
.bg-stone {
  background-color: oklch(21.6% 0.006 56.043);
}
.bg-3 {
  background-color: oklch(26% 0.15 291.5);
}
.bg-main-rev {
  background: linear-gradient(to top, oklch(38% 0.189 293.745), oklch(28.3% 0.141 291.089));
}



/* FOOTER */

  footer {
    padding: 2rem 0;
    display: flow-root; /* prevents margins from escaping */
    background-color: oklch(38% 0.189 293.745);
  }
  .footer-menu {
    display: block;
    text-align: center;
  }
  .footer-menu .col {
    margin-bottom: 1rem;
  }
  .footer-menu h5 {
    font-size: 1rem;
    margin-block: 0;
    margin: 0;
    padding: 0.5rem;
    font-weight: 300;
    text-align: center;
    box-sizing: border-box;
  }
  .footer-menu a {
    display: block;
    padding: 0.5rem;
    color:var(--color-link);
  }
  .menu-horoscop-azi-zodii {
    display: none;
  }

  .footer-text {
    padding: 0.5rem;
    font-size: 0.85rem;
    line-height: 1.25em;
    max-width: 80%;
    margin: auto;
  }

  .footer-text a {
    display: inline !important;
    padding: 0 !important;
  }

  .copyright {
    margin-top: 2.5rem;
    font-size: 0.75rem;
    line-height: 1.4em;
    padding-bottom: 1rem;
    color: var(--color-white);
    text-align: center;
  }


  @media (min-width: 640px) {
    .footer-menu {
      display: flex;
      justify-content: space-around;
      text-align: left;
    }
    .footer-menu h5 {
      text-align: left;
    }

    .copyright {
      display: flex; 
      justify-content: space-evenly;
    }
  }



.section {
  margin-top:5rem;
  margin-bottom: 5rem;
}

.top-menu {
  display: flex;
  justify-content: center;
  gap: 0.5rem;
} 

.top-menu a {
  font-size: 0.8rem;
  font-weight: 300;
  padding: 0.5rem 0.75rem;
  border-radius: 0.5rem;
  background: linear-gradient(135deg, oklch(91% 0.169 91.605) 0%, oklch(84% 0.189 84.429) 30%, oklch(88% 0.169 91.605) 50%, oklch(84% 0.189 84.429) 70%, oklch(91% 0.169 91.605) 100%);
  text-decoration: none;
  color: var(--color-dark);
}


#formAbonament { max-width: 480px; margin: auto; }
  .input-email, .input-semn {width: 100%; margin-bottom:1rem;}
#formAbonamentEroare {color:red; padding: 0.5rem; text-align: center; }



/* Navigator Zile */

  #navigator-zile {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 1rem;
    padding-bottom: 4rem;
  }

  h3.zi-id {
    font-size:1.75rem;
    line-height: 1.3em;
    margin: 0;
    padding: 0;
  }
  .zi-id span {
    font-size: 0.85em;
    font-weight: 300;
  }

  h3.horoscop-zi-zodie {
      font-size:1.75rem;
      line-height: 1.3em;
      margin: 0;
      padding-bottom: 4rem;
      text-align: center;
  }

  h3.horoscop-zi-zodie span {
    font-size: 0.85em;
    font-weight: 300;
  }

.horoscopul-zilei p {
  font-size: 1.25rem;
  font-weight: 300;
  line-height: 1.25em;
}

#horoscopul-zilei-interpretare {
  align-self: baseline;
  margin-bottom: 1rem;
  padding: 1rem;
  /*border: 1px solid oklch(37.4% 0.01 67.558);*/
  border-radius: 1rem;
  min-width: 320px;
  flex-basis: calc(50% - 0.5rem);
  flex-grow: 1;
  box-sizing: border-box;
}

#horoscopul-zilei-interpretare h3 {
    font-size: 1.75rem;
    line-height: 1.25em;
    margin-bottom: 1rem;
}

#horoscopul-zilei-pozitii-astre {
  min-width: 220px;
  flex-basis: calc(50% - 0.5rem);
  flex-grow: 1;
  padding: 1rem;
  box-sizing: border-box;
}

.glyph {
  font-family: "DejaVu Sans", "Segoe UI Symbol", "Arial Unicode MS", sans-serif;
  font-variant-emoji: text;
}


  .display-options {
    margin-bottom: 1.5rem;
  }
  .display-toggle {
    margin-bottom: 0.5rem;
  }


#HoroscopZiPerZodie {
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* 2 columns by default */
  gap: 1rem; /* space between items */
}


  .harta-astrala-zi {
    padding-bottom: 1rem;
  }

  .casa-semn {
    font-family: monospace;
    font-weight: 500;
    text-align: center;
  }
  .retro {
    font-size: 0.9em;
  }

  .nou {
    color: oklch(80.8% 0.114 19.571);
  }

  .aspect-nou {    
    color: oklch(80.8% 0.114 19.571);
  }
  .aspect-terminat {
    color: oklch(80.8% 0.114 19.571);
    text-decoration: line-through;
  }
  .explicatii {
    font-size:0.75rem;
    padding: 0.6rem;
    margin-top: 1.5rem;
    text-align: left;
  }

  .consimtamant {
    margin-bottom: 1rem;
  }
  .consimtamant label {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem; 
    font-size: 1.15rem;
    cursor: pointer;
  }
  .consimtamant input[type="checkbox"] {
    width: 1.15rem;
    height: 1.15rem;
  }

  #explicatiiCerinteAstrograma {
    display: none;
  }

/* Astrograma */

  #astrograma h4{
    margin:auto;
    max-width: 520px;
  }
  .astrograma-zilei {
    margin-bottom: 2rem;
  }

  form {
      width: 100%;
  }
  input, select, button {
      color: var(--color-dark);
      display: block;
      width: 100%; 
      box-sizing: border-box;
      padding: 0.75rem;
      border: 0;
      border-radius: 0.5rem;
      background-color: var(--color-white);
      font-size: 1.25rem;
      transition: all .2s ease;
      outline: none;
  }
  input[type="checkbox"] {
    width: auto;
  }

  select {
    appearance: none; /* remove default arrow */
    -webkit-appearance: none;
    -moz-appearance: none;
    cursor: pointer;
  }
  select option[disabled][selected] {
    color: var(--color-placeholder); 
  }
  select:invalid {
    color: var(--color-placeholder) /* until a real option is chosen */
  }
  select option {
    color: var(--color-dark);
  }
  .select-wrapper {
    position: relative;
  }

  .select-wrapper::after {
  content: "▼"; /* or use an SVG / icon */
  font-size: 12px;
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none; /* makes sure arrow doesn’t block clicks */
  color: #666;
  cursor: pointer;
}

  button {
    cursor: pointer;
    background-color: var(--color-link);
    /*background: linear-gradient(135deg, oklch(98.7% 0.022 95.277) 0%, oklch(92.4% 0.12 95.746) 55%, oklch(98.7% 0.022 95.277) 100%);*/
    /*background: linear-gradient(135deg, oklch(92.4% 0.12 95.746) 0%, oklch(76.9% 0.188 70.08) 55%, oklch(92.4% 0.12 95.746) 100%);*/
    background: linear-gradient(135deg, oklch(91% 0.169 91.605) 0%, oklch(84% 0.189 84.429) 30%, oklch(88% 0.169 91.605) 50%, oklch(84% 0.189 84.429) 70%, oklch(91% 0.169 91.605) 100%);
  }

  /* Hide arrows */
  input[type=number] { appearance: textfield; }
  input[type=number]::-webkit-outer-spin-button,
  input[type=number]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
  }
 

  input::placeholder {
    color: var(--color-placeholder);
    opacity: 1;      /* optional, default is 0.5 in some browsers */
  }
  input::-webkit-input-placeholder { color: var(--color-placeholder); } input::-moz-placeholder { color: var(--color-placeholder); }

  input:focus {
      outline: none;
      border: 0;
      color: var(--color-dark);
  }  

  .zi-luna-an { display: flex; gap: 0.5rem; flex-wrap: nowrap; padding-bottom: 1rem;}
  .timp-localitate { display: flex; gap: 0.5rem; flex-wrap: nowrap; padding-bottom: 1rem;}

  .input-zi { width: 15%; text-align: center;}
  .input-luna { width: 45%;  }
  .input-an { width: 40%; text-align: center; }

  .timp {display: flex;flex-wrap: nowrap; align-items: center; padding: 0.5rem; width: 40%;border-radius: 0.5rem;background-color: var(--color-white);} 
  .timp span {color: var(--color-dark); font-size:1.25rem; font-weight: 500;}
  .input-ora { padding: 0; font-family: monospace; text-align: center; }
  .input-minut { padding: 0; font-family: monospace; text-align: center; }

  .input-location { height: 100%; }

  #localitate {
    width: 100%;
  }

  .btn-calc-astrograma {width: 100%;padding: 1rem;font-size: 1.25rem;margin-top: 1rem;cursor: pointer;}
  .small-form-info {
    text-align: center;
    padding-top: 0.75rem;
    font-size: 0.85rem;
  }






.container, .container-sm, .container-md {
  margin: 0px auto;
  padding-left: 1rem;
  padding-right: 1rem;
}

/* First breakpoint (like sm) */
    @media (min-width: 640px) {
      .container, .container-sm, .container-md {
        max-width: 540px;
      }
      h1 {
        font-size: 5rem;
      }
      h2.headline {
        font-size:2rem;
      }
      h2 {
        font-size: 3rem;
      }
      
      #HoroscopZiPerZodie {
        grid-template-columns: repeat(3, 1fr); /* 3 columns */
      }
      .horoscop-intro {
        font-size: 1.33rem;
      }
    }

/* Second breakpoint (like md) */
    @media (min-width: 768px) {

      .container, .container-md {
        max-width: 720px;
      }

      h2 {
        font-size: 3.5rem;
      }

      #HoroscopZiPerZodie {
        grid-template-columns: repeat(4, 1fr); /* 4 columns */
      }
    }

/* Third breakpoint (like lg) */
    @media (min-width: 992px) {
      .container {
          max-width: 960px;
      }

      h2 {
        font-size: 4rem;
      }

    }


/* Toggles */

        .toggle {
          display: flex;
          justify-content: center;
          gap: 1rem;
          align-items: center;
          cursor: pointer;
        }

        .toggle-label {
          font-weight: 400;
          font-size: 1em;
          color: oklch(98.7% 0.022 95.277)
        }
        .switch-wrap {
          cursor: pointer;
          background: oklch(26.8% 0.007 34.298);
          padding: 5px;
          width: 2rem;
          height: 1rem;
          border-radius: 1rem;
        }
        .switch-wrap input {
          position: absolute;
          opacity: 0;
          width: 0;
          height: 0;
        }
        .switch {
          height: 100%;
          display: grid;
          grid-template-columns: 0fr 1fr 1fr;
          transition: 0.2s;
        }
        .switch::after {
          content: "";
          border-radius: 50%;
          background: oklch(98.7% 0.022 95.277);
          grid-column: 2;
          /*transition: background 0.2s;*/
        }

        input:checked + .switch {
          grid-template-columns: 1fr 1fr 0fr;
        }
        input:checked + .switch::after {
          background-color: oklch(98.7% 0.022 95.277)
        }






/* Card Effects */

          .card-zodie-wrap {
          perspective: 1000px;
          aspect-ratio: 5 / 7;
          }

          .card-zodie {
          position: relative;
          width: 100%;
          height: 100%;
          transition: transform 0.6s;
          transform-style: preserve-3d;
          }

          .card-zodie.flipped {
          transform: rotateY(180deg);
          }

          .card-zodie-fata,
          .card-zodie-spate {
          position: absolute;
          width: 100%;
          height: 100%;
          backface-visibility: hidden;
          }

          .card-zodie-fata {
            cursor: pointer;
          }

          .card-zodie-fata img {
              border-radius: 0.75rem;
          }

          .card-zodie-spate {
            background-image: url('img/citire-zodie.jpg');
            background-repeat : no-repeat;
            background-size : contain;
            border-radius: 0.75rem;
            transform: rotateY(180deg);
            width: 100%;
            cursor: pointer;
          }

          .btn-reintors-card {
            position: absolute;
            bottom:0px;
            /*left: calc(50% - 18px);*/
            font-size: 1rem;
            font-weight: 200;
            cursor: pointer;
            padding: 2px 0px;
            color:#fff;
            background: transparent;
            border: 0;
            outline: 0;
          }

          .citire-zodie {
              padding: 1.2rem;
              padding-bottom: 1.3rem;
              box-sizing: border-box;
              height: 100%;
              color:#fff;
              display: flex;
              flex-direction: column;
          }

          .horoscop-intro {
            display: flex;
            align-items: center;
            flex-grow: 1;
            text-align: center;
            font-size: 1.15rem;
            line-height: 1.25em;
            font-weight: 500;
          }

          .horoscop-intro span {
            display: block;
            width: 100%;
          }

          .btn-horoscop-zi-zodie {
            display: block;
            padding: 0.5rem;
            color: var(--color-white);
            text-align: center;
            font-size: 0.9rem;
            font-style: italic;
            font-family: 'Inter';
            font-weight: 300;
            transition: all .2s ease;
          }
          .btn-horoscop-zi-zodie:hover {
            transform: scale(1.2);
          }


/* ASTROGRAMA */

    #astrograma p, li {
      font-family: 'Inter';
      font-weight: 300;
      font-size: 1.3rem;
      line-height: 1.25em;
      padding: 0;
      margin: 0;
      padding-bottom: 1.25rem;
    }

    ul.toc {
      list-style: none;
      padding: 0;
      margin-top: 7rem;
      text-align: center;
    }

    #astrograma b {
      font-weight: 700;
    }

    h1.harta-natala {
      text-transform: uppercase;
      font-size: 3rem;
    }      

    .ag-data {
      font-size: 1.25rem;
      font-family: monospace;
      text-align: center;
      padding-top: 1.5rem;
      color: var(--color-grey);
    }

    .ag-zodie-info, .ag-casa-info, .ag-aspect-info {
      padding-top: 1.5rem;
    }

    .ag-hint {
      font-size: 0.9rem;
      padding-top: 1rem;
      text-align: center;
    }

    .row-astrograma {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      align-items: center;
      gap: 3rem;
      padding-top: 4rem;
    }

    .astrograma-zilei {
      flex: 5;
      min-width: 360px;
    }
    .astrograma-formular {
      flex: 5;
      max-width: 400px;
    }

    @font-face {
      font-family: 'Astronomicon';
      src: url('fonts/Astronomicon.ttf') format('truetype');
      font-weight: normal;
      font-style: normal;
    }

    .astro-glyph {
      font-family: 'Astronomicon';
      font-weight: 400; /* for proper display */
    }

    h3.ag-sectiune {
      padding-top: 4rem;
      font-size: 4.25rem;
      line-height: 1em;
      text-align: center;
      font-family: var(--font-hand);

    }

    h3.ag-astru {
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-size: 1.6rem;
      padding: 0.75rem;
      margin-top: 4rem;
      border-top: 1px solid var(--color-white);
      border-bottom: 1px solid var(--color-white);
    }
    h3.ag-astru .txt {
      flex-grow: 2;
      text-align: center;
    }

    h3.ag-casa {
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-size: 1.6rem;
      padding-bottom: 0.75rem;
      margin-top: 3rem;
      border-bottom: 1px solid var(--color-white);
    }

    h3.ag-aspect {
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-size: 1.6rem;
      padding-bottom: 0.75rem;
      margin-top: 3rem;
      border-bottom: 1px solid var(--color-white);
    }
    h3.ag-aspect .astro-glyph {
      font-size: 1.6em;
      padding-right: 0.75rem;
      padding-bottom: 0.25rem;
    }
    p.ag-aspect-li {
      text-align: center;
      font-size: 1.5em !important;
      font-weight: 500 !important;
    }


    /*
    .ag-astru-info p, .ag-zodie-info p {
      text-align: justify;
    }

    .ag-astru-info p:first-of-type, .ag-zodie-info p:first-of-type {
      text-indent: 2em;
    }
    */

    .cuvinte-cheie {
      font-size: 0.9rem !important;
      padding-bottom: 0.75em !important;
      font-family: ''
    }
    .cuvinte-cheie:last-of-type {
      padding-bottom: 1.25em !important;
    }

    .ag-interpretare{
      padding-top: 1.25rem;
      padding-bottom: 2rem;
    }


    
    .btn-genereaza {
      font-size: 1.3rem;
      display: block;
    }


/* ASTRO CHART */

    #astroGraphWrapper {
      position: relative;
      text-align: center;
      max-width: 800px;
      margin: auto;
    }

    #astroGraph {
      width: 100%;
      max-width: 800px;
      margin: auto;
    }
    .symbol {
      font-family: "Segoe UI Symbol", "DejaVu Sans", Arial, sans-serif;
      font-variant-emoji: text;
    }
    .ag-planet-glyph {
      font-family: "Segoe UI Symbol", "DejaVu Sans", Arial, sans-serif;
      font-size: 21px;
      fill: var(--color-ag-white);
      text-anchor: middle;
      dominant-baseline: middle;
      font-variant-emoji: text;
    }
    .ag-sign-glyph {
      font-family: "Segoe UI Symbol", "DejaVu Sans", Arial, sans-serif;
      font-size: 16px;
      fill: var(--color-ag-white);
      text-anchor: middle;
      dominant-baseline: middle;
      font-variant-emoji: text;
    }
    .ag-text-casa {
      font-size: 6px;
      text-anchor: middle;
      dominant-baseline: middle;
      fill:var(--color-white);
    }

    #agPopup {
      position: absolute;
      top:0px;
      left:0px;
      width: 100%;
      height: 100%;
      border-radius: 100%;
      background-color: oklch(28.3% 0.141 291.089);
      text-align: center;
    }
    .ag-has-details {
      cursor: pointer;
      fill: var(--color-ag-link);
    }
    #agPopup.show {
      animation: popin 0.3s ease-out forwards;
      transform-origin: 250px 150px;
    }
    #agPopup.hide {
      animation: popout 0.3s ease-in forwards;
      transform-origin: 250px 150px;
    }

    @keyframes popout {
      0%   { transform: scale(1);   opacity: 1; }
      100% { transform: scale(0.5); opacity: 0; }
    }

    @keyframes popin {
      0%   { transform: scale(0.5); opacity: 0; }
      100% { transform: scale(1);   opacity: 1; }
    }

    #popupContainer {
      display: flex;
      width: 100%;
      height: 100%;
      padding: 15%;
      box-sizing: border-box;
      position: relative;
      cursor: pointer;
    }

    #popupCloseBtn {
      position: absolute;
      top:0px;
      left: 50%;
      transform: translateX(-50%);
      cursor: pointer;
      padding:0.5rem;
      margin: auto;
      font-weight: 400;  
    }

    #popupText {
      display: flex;
      align-items: center;
      justify-content: center;
      flex-direction: column;
      width: 100%;
    }

    #popupText h3{
      font-weight: 200;
      line-height: 1.3em;
    }
    

    #popupText b {
      font-weight: 500;
    }

    #popupText b.casa {
      font-size: 0.8em;
    }

    #popupLink {
      padding: 1rem;
    }



/* Other Pages */
h1.page-title {
  margin: 0px auto 6rem auto;
  text-transform: uppercase;
}
.page-wrap-narrow {
  max-width: 540px;
  padding-left: 1rem;
  padding-right: 1rem;
  margin: 0 auto;
}
.page-wrap-narrow p {
  font-size: 1.25rem;
  line-height: 1.3em;
}