/* reset */
*, *::before, *::after {
    box-sizing: border-box;
  }
  * {
    margin: 0;
    padding: 0;
    color: var(--black);
  }
  body {
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
  }
  img, picture, video, canvas, svg {
    display: block;
    max-width: 100%;
  }
  input, button, textarea, select {
    font: inherit;
  }
  p, h1, h2, h3, h4, h5, h6 {
    overflow-wrap: break-word;
  }
  #root, #__next {
    isolation: isolate;
  }
  ul, li {
    list-style: none;
  } 
  a {
    text-decoration: none;
  }
/* variables */
:root {
    --white: #FFFFFF;
    --black: #212927;
    --background: #F3F3F0;
    --color: #8492A7;
    --color2: #C3CCDB;
    --color3: #DFE2E8;
    --maincolor: #7689A8;
    --accent: #E09E1F;
    --grey75: #4A5154;
    --grey50: #869196;
    --grey35: #B9BEC1;
    --grey10: #DCE0E3;
    --font-family-primary: "Urbanist", sans-serif;
    --font-family-secondary: "Roboto", sans-serif; 
    --font-weight-display: 700;
    --font-weight-title: 600;
    --font-weight-subtitle1: 600;
    --font-weight-subtittle2: 300;
    --font-weight-bodydisplay: 500;
    --font-weight-body: 400;
    --font-weight-label: 300;
    --font-size-display: 4.209rem;
    --font-size-title: 3.158rem;
    --font-size-subtitle1: 2.369rem;
    --font-size-subtitle2: 1.777rem;
    --font-size-bodydisplay: 1.333rem;
    --font-size-body: 1rem;
    --font-size-label: 0.875rem;
}
      /* general */
body {
  background-color: var(--background);
}
      /* text */
p {
  font-family: var(--font-family-secondary);
}
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-family-primary);
}
a:hover {
  color: var(--accent);
}
.display {
  font-family: var(--font-family-primary);
  font-weight: var(--font-weight-display);
  font-size: var(--font-size-display);
  line-height: 1;
  letter-spacing: 2%;
  hyphens: auto;
}
.display-especial {
  font-weight: 500;
  color: var(--grey75);
}
.title {
  font-family: var(--font-family-primary);
  font-size: var(--font-size-title);
  font-weight: var(--font-weight-title);
  color: var(--grey75);
}
.Subtitle1 {
  font-family: var(--font-family-primary);
  font-size: var(--font-size-subtitle1);
  font-weight: var(--font-weight-subtitle1);
  line-height: 1.3;
  hyphens: auto;
}
.Subtitle2 {
  font-family: var(--font-family-secondary);
  font-size: var(--font-size-subtitle2);
  font-weight: var(--font-size-subtitle2);
  line-height: 1.3;
  hyphens: auto;
}
.bodydisplay {
  font-family: var(--font-family-secondary);
  font-size: var(--font-size-bodydisplay);
  font-weight: var(--font-weight-bodydisplay);
  hyphens: auto;
}
.body {
  font-family: var(--font-family-secondary);
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-body);
  hyphens: auto;
}
.label {
  font-family: var(--font-family-secondary);
  font-size: var(--font-size-label);
  font-weight: var(--font-weight-label);
  hyphens: auto;
}
.label-cards {
  font-family: var(--font-family-secondary);
  font-size: var(--font-size-label);
  font-weight: var(--font-weight-label);
  color: var(--grey75);
  font-style: italic;
  hyphens: auto;
}
.bold {
  font-weight: 600;
}
.list {
  padding: 0 0 2.125rem 0.5rem;
}
.list li {
  font-family: var(--font-family-secondary);
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-body);
}
.bullet-list {
  padding: 0 0 0 1.313rem;
}
.bullet-list li {
  list-style: disc;
  font-family: var(--font-family-secondary);
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-body);
}
.orderedlist {
  padding: 0 0 0 1.313rem;
}
.orderedlist li {
  list-style: decimal;
  font-family: var(--font-family-secondary);
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-body);
}
.underline1 {
  position: relative;
}
.underline1::after {
  content: '';
  position: absolute;
  bottom: -0.1rem;
  left: -0.5rem;
  right: -0.5rem;
  height: 2rem;
  z-index: -1;
  background-image: url( '/assets/svg/linea-01-az.svg');
  background-repeat: no-repeat;
  background-size: cover;
}
.underline2 {
  position: relative;
}
.underline2::after {
  content: '';
  position: absolute;
  bottom: -0.4rem;
  left: -0.5rem;
  right: -0.5rem;
  height: 1rem;
  z-index: -1;
  background-image: url( '/assets/svg/linea-02-az.svg');
  background-repeat: no-repeat;
  background-size: cover;
}
/* TEXT COLOR */
.c-75grey {
  color: var(--grey75);
}
.c-50grey {
  color: var(--grey50);
}
.c-35grey {
  color: var(--grey35);
}
.c-maincolor {
  color: var(--maincolor);
}
.c-color {
  color: var(--color);
}
.c-accent {
  color: var(--accent);
}
      /* Images */
.img {
  border-radius: 1.5rem;
}
.img100 {
  width: 100%;
  height: auto;
}
.img200 {
  width: auto;
  height: 100%;
}
.img300 {
  object-fit: cover;
  height: 100%;
  width: 100%;
}
.img400 {
  object-fit: cover;
  height: 85%;
  
}
.img-leftcorner {
  position: absolute;
  bottom: 0px;
  right: 0px;
}
.doodle1 {
  width: 10vw;
}
.hero-doodle {
  width: 20vw;
}
.underscore-title {
  width: 2.125rem;
}
.iconandtext {
  display: flex;
  gap: 2.125rem;
  align-items: center;
}
.icon34{
  width: 2.125rem;
}
.icon21{
width: 1.313rem;
}
.line01 {
  width: 100%;
  height: 0.25rem;
  background-color: var(--grey10);
  border-radius: 1rem;
}
.bg-img-why {
  background-image: url(/assets/svg/doodle-02-az.svg), url(/assets/img/background_shape_03.webp);
  background-position: bottom 1rem left 3rem, bottom 2rem left -5rem;
  background-repeat: no-repeat;
  background-size: 5vw, 25vh;
  z-index: -999;
}
#bg-img-cathome {
  background-image: url(/assets/img/background_shape_04.webp);
  background-position: top 3rem right -8rem;
  background-repeat: no-repeat;
  background-size: 15vw;
  z-index: -999;
}
      /* layout */
.container {
  padding: 3.438rem 2.125rem 0 2.125rem;
  margin-bottom: 5.563rem;
  max-width: 1920px;
  margin-inline: auto;
}
.content {
  padding: 14.563rem 0 0 0;
}
.containerheader {
  padding: 9rem 2.125rem 0 2.125rem;
  margin-bottom: 3.438rem;
}
.img-container {
  position: relative;
}
.flexbox0 {
  display: flex;
}
.flexbox1 {
  display: flex;
  gap: 3.5rem;
}
.flexbox1-2 {
  display: flex;
  gap: 1.313rem;
}
.flexbox2 {
  display: flex;
  gap: 1.313rem;
  align-items: center;
}
.flexbox3 {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
}
.flexbox4 {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2.125rem;
}
.flexbox5 {
  display: flex;
  align-items: center;
  justify-content: center;
}
.flexboxdown {
  flex-direction: column;
}
.gallerylayout {
  display: grid;
  gap: 1.25rem;
  grid-auto-rows: minmax(18rem, 0.5fr);
  grid-auto-flow: dense;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr));
}
.gallery-span {
  grid-column: span 2;
}
.auralayout {
  display: grid;
  grid-template-columns: repeat(13, 1fr);
  gap: 1.313rem;
}
.auralayout-normal {
  grid-auto-rows: 1fr;
}
.home-gallery {
  display: grid;
  gap: 1.313rem;
  grid-template-columns: repeat(13, 1fr);
  grid-template-rows: repeat(2, 0.3fr);
  grid-template-areas: 
    "a a a a a b b b b b b b b"
    "a a a a a c c c d d d d d"
}
.herolayout {
  display: grid;
  gap: 1.313rem;
  grid-template-columns: repeat(13, 1fr);
  grid-template-rows: repeat(4, max-content);
  grid-template-areas: 
    "n n n n . . . . . . . i i"
    ". . . . t t t t t t t t b"
    "z z z . . m m m m m m m m"
    "l l l l l l l l l l l l l"
  ;
}
.headerlayout {
  display: grid;
  gap: 1.313rem;
  grid-template-columns: repeat(13, 1fr);
  grid-template-rows: repeat(3, max-content);
  grid-template-areas: 
    "a a a a a a a a . . . p p"
    "d d . . . . . . . . . p p"
    "l l l l l l l l l l l l l"
  ;
}
.fullrow {
  grid-column: span 13;
}
.eights {
  grid-column: span 8;
}
.fives {
  grid-column: span 5;
}
.thirds {
  grid-column: span 3;
}
.twos {
  grid-column: span 2;
}
.ones {
  grid-column: 1;
}
.grid-text-fives {
  grid-column: 2 / 7;
}
.grid-text-thirds {
  grid-column: 2 / 5;
}
.grid-right {
  grid-column-end: -1;
}
.grid-right2 {
  grid-column-end: -2;
}
.grid-left {
  grid-column-start: 2;
}
.twocol {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
}
.conent-center {
  padding: 0 20vw;
}
/* espacing */
.gap8 {
  margin-bottom: 0.5rem;
}
.gap13 {
  margin-bottom: 0.813rem;
}
.gap21 {
  margin-bottom: 1.313rem;
}
.gap34 {
  margin-bottom: 2.125rem;
}
.gap56 {
  margin-bottom: 3.5rem;
}
.gap89 {
  margin-bottom: 5.563rem;
}
.gap144 {
  margin-bottom: 9rem;
}
.space21 {
  margin: 1.313rem 0;
}
.space34 {
  margin: 2.125rem 0;
}
.space56 {
  margin: 3.438rem 0;
}
.space89 {
  margin: 5.563rem 0;
}
.title2-space {
  margin: 9rem 0 5.563rem 0;
}
.bodyspace-34 {
  padding: 0 0 0 2.125rem;
}
/* Buttons */
button {
  background-color: var(--background);
  border: none;
  font-family: var(--font-family-secondary);
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-subtitle1);
}
.primary-button {
  color: var(--white);
  background-color: var(--accent);
  padding: 0.75rem 0.5rem;
  border-radius: 0.55rem;
}
.primary-button:hover {
  opacity: 0.5;
  color: var(--white);
}
.secondary-button {
  padding: 0.75rem 0.5rem;
  background-color: var(--background);
  border: 0.125rem solid var(--black);
  border-radius: 0.5rem;
}
.secondary-button:hover {
  color: var(--accent);
  border-color: var(--accent);
}
      /* nav */
nav {
  position: absolute;
    width: 100%;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    padding: 2.125rem 2.125rem;
}
nav li {
  display: inline-block;
  padding: 0 2rem;
  font-family: var(--font-family-secondary);
  font-size: var(--font-size-label);
  font-weight: var(--font-weight-label);
}
nav li a:hover {
  color: var(--accent);
}
nav a {
  margin-right: auto;
}
.nav-ul-shape {
  border: var(--grey50);
  border-style: solid;
  border-radius: 2rem;
  border-width: 0.125rem;
  padding: 0.813rem;
}
.logo {
  height: 3.5rem;
}
.menu-button {
  display: none;
}
.sidebar {
  position: fixed;
  top: 0;
  right: 0;
  height: 100vh;
  width: 15rem;
  z-index: 999;
  backdrop-filter: blur(5px);
  background-color: rgb(222, 228, 238, .9);
  display: none;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  padding: 1rem 0;
}
.sidebar li{
  display: inline-block;
  padding: 1rem 0;
}
.navli-shape {
  border-color: var(--grey50);
  border-width: 0.25rem;
  border-radius: 25px;
}
/* HeroHome */
.container-hero {
  padding: 8rem 2.125rem 0 2.125rem;
  margin-bottom: 3.438rem;
}
.hero-name {
  grid-area: n;
}
.hero-image {
  grid-area: i;
}
.hero-title {
  grid-area: t;
}
.hero-h1-space1 {
  padding-left: 4rem;
}
.hero-h1-space2 {
  padding-left: 12rem;
}
.hero-info {
  grid-area: b;
  writing-mode: vertical-rl;
  text-orientation: mixed;
}
.hero-value {
  grid-area: z;
}
.hero-site {
  grid-area: m;
  margin-top: auto;
  margin-left: auto;
}
.heroline {
  grid-area: l;
}
#bg-img-hero {
  background-image: url(/assets/img/background_shape_01.webp), url(/assets/img/background_shape_02.webp);
  background-position: top -15rem right -1rem, bottom 2rem left -10rem;
  background-repeat: no-repeat;
  background-size: 60vw, 30vh;
  z-index: -999;
}
/* home gallery */
.hg-01 {
  grid-area: a;
}
.hg-02 {
  grid-area: b;
}
.hg-03 {
  grid-area: c;
}
.hg-04 {
  grid-area: d;
}
/* header */
.header-title {
  grid-area: a;
}
.header-doodle {
  grid-area: d;
}
.header-picture {
  grid-area: p;
}
.header-lines {
  grid-area: l;
}
.lineheader {
  width: 100%;
  height: 0.125rem;
  background-color: var(--grey10);
  border-radius: 1rem;
}
#header-aboutme {
  background-image: url(/assets/img/background_shape_05.webp), url(/assets/img/background_shape_08.webp);
  background-position: top -5rem right 16rem, bottom 4rem left -10rem;
  background-repeat: no-repeat;
  background-size: 30vw, 25vw;
  z-index: -999;
}
#header-contact {
  background-image: url(/assets/img/background_shape_07.webp);
  background-position: top -5rem right 2rem;
  background-repeat: no-repeat;
  background-size: 40vw;
  z-index: -999;
}
#header-portfolio {
  background-image: url(/assets/img/background_shape_06.webp);
  background-position: top -4rem left 25rem;
  background-repeat: no-repeat;
  background-size: 40vw;
  z-index: -999;
}
#header-port01 {
  background-image: url(/assets/img/background_shape_09.webp), url(/assets/img/background_shape_10.webp);
  background-position: top -5rem left -2rem, bottom 5rem right -10rem;
  background-repeat: no-repeat;
  background-size: 25vw, 40vw;
  z-index: -999;
}
#header-port02 {
  background-image: url(/assets/img/background_shape_11.webp);
  background-position: bottom 5rem left 4rem;
  background-repeat: no-repeat;
  background-size: 40vw;
  z-index: -999;
}
/* Cards */
.card-container {
  display: grid;
  gap: 0.813rem;grid-template-columns: 1fr;
  grid-template-rows: 80% 15%;
  height: 100%;
}
.card{
  background-color: var(--white);
  border-radius: 1.5rem;
  padding: 0.813rem;
  width: max(30vw, 25rem);
}
.card-info {
  display: flex;
  flex-wrap: wrap;
  row-gap: 1rem;
  padding: 0 1rem;
}
.card-info-left {
  margin-left: auto;
}
.card-info-left .icon34:hover {
  filter: brightness(0) saturate(100%) invert(79%) sepia(13%) saturate(5113%) hue-rotate(346deg) brightness(92%) contrast(89%);
}
/* CAT */
.cat {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 5.563rem 2.125rem;
}
.cattitle {
  width: 70vw;
}
/* Gallery */
.gallery-item {
  background-color: var(--white);
  padding: 0.813rem;
  display: none;
  border-radius: 1.5rem;
}
.show {
  display: block;
}
.gallery-content {
  height: 100%;
  display: grid;
  gap: 0.813rem;
  grid-template-columns: 1fr;
  grid-template-rows: 80% 15%;
}
.gallery-info {
  grid-row-end: -1;
  text-wrap: wrap;
}
.port-button {
  cursor: pointer;
}
.port-button:hover {
  color: var(--accent);
}
/* footer */
footer {
  margin-top: 3.5rem;
}
.footer-box {
  background-color: var(--grey10);
  border-radius: 1.5rem;
  padding: 1.313rem 2.125rem;
}
.footer-container {
  padding:  2.125rem 2.125rem 0.813rem 2.125rem;
}
.footerflex1 {
  display: flex;
  justify-content: flex-end;
  gap: 5.5rem;
}
.footerflex2 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 2.125rem;
  padding-top: 3.438rem;
}
.footerlogo {
  margin-right: auto;
}
.footerlogo img {
  width: 5.5rem;
}
.a-hover:hover {
 color: var(--accent);
}
.footer-container .icon21:hover {
  filter: brightness(0) saturate(100%) invert(79%) sepia(13%) saturate(5113%) hue-rotate(346deg) brightness(92%) contrast(89%);
}
/* 404 */
.notfound {
  width: auto;
  height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}
/* Media Querries */
@media(max-width: 840px) {
  html {
    font-size: 14px;
  }
  .auralayout {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    gap: 1.313rem;
  }
  .home-gallery {
    grid-template-columns: repeat(8, 1fr);
    grid-template-areas: 
      "a a a b b b b b"
      "a a a c c d d d"
  }
  .herolayout {
    grid-template-columns: repeat(8, 1fr);
    grid-template-areas: 
    "n n n n n . i i"
    "t t t t t t t b"
    "z z z m m m m m"
    "l l l l l l l l"
  ; 
  }
  .headerlayout {
    grid-template-areas: 
      "a a a a a a a a"
      ". . . . . . p p"
      "d d . . . . p p"
      "l l l l l l l l"
    ;
    grid-template-columns: repeat(8, 1fr);
    grid-template-rows: 1fr max-content max-content 0.3fr;
  }
  
  .fullrow {
    grid-column: span 8;
  }
  .eights {
    grid-column: span 8;
  }
  .fives {
    grid-column: span 8;
  }
  .thirds {
    grid-column: span 5;
  }
  .twos {
    grid-column: span 3;
  }
  .grid-text-fives {
    grid-column: span 8;
  }
  .hideonmobile {
    display: none;
  }
  .menu-button {
    display: block;
  }
}
@media(max-width: 700px) {
  .footerflex1 {
    gap: 1.313rem;
  }
  .flexbox1-2 {
    gap: 0.813rem;
  }
}
@media all and (max-width: 480px) {
  .display {
    font-size: var(--font-size-title);
  }
  .title {
    font-size: var(--font-size-subtitle1);
  }
  .Subtitle1 {
    font-size: var(--font-size-subtitle2);
  }
  .Subtitle2 {
    font-size: var(--font-size-bodydisplay);
  }
  .bodydisplay {
    font-size: var(--font-size-body);
    font-weight: var(--font-weight-subtitle1);
  }
  .bg-img-why {
    background-position: bottom 1rem left 3rem, top 10rem left 1rem;
    background-size: 15vw, 25vh;
  }
  .primary-button {
    padding: 0.5rem 0.25rem;
  }
  .secondary-button {
    padding: 0.5rem 0.25rem;
  }
  .sidebar {
    width: 100%;
  }
  .content {
    padding: 5.563rem 0 0 0;
  }
  .container {
    padding: 2.125rem 1.313rem 0 1.313rem;
    margin-bottom: 2.125rem;
  }
  .footer-container {
    padding:  2.125rem 1.313rem 0.813rem 1.313rem;
  }
  .auralayout {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 1.313rem;
  } 
  .home-gallery {
    grid-template-columns: repeat(5, 1fr);
    grid-template-rows: repeat(3, 0.5fr);
    grid-template-areas: 
      "a a b b b"
      "a a c c c"
      "d d d d d"
  }
  .herolayout {
    grid-template-columns: repeat(5, 1fr);
    grid-template-rows: repeat(5, max-content);
    grid-template-areas: 
    "n n n i i"
    "t t t t b"
    "z z z z z"
    "m m m m m"
    "l l l l l"
  ;
  }
  .headerlayout {
    grid-template-areas: 
      "a a a a a"
      ". . . p p"
      "d . . p p"
      "l l l l l"
    ;
    grid-template-columns: repeat(5, 1fr);
    grid-template-rows: 1fr max-content max-content 0.3fr;
  }
  .gallerylayout {
    grid-template-columns: 1fr;
  }
  .gallery-span {
    grid-column: span 1;
  }
  .fullrow {
    grid-column: span 5;
  }
  .eights {
    grid-column: span 5;
  }
  .fives {
    grid-column: span 5;
  }
  .thirds {
    grid-column: span 5;
  }
  .twos {
    grid-column: span 5;
  }
  .grid-text-fives {
    grid-column: span 5;
  }
  .gap8 {
    margin-bottom: 0.313rem;
  }
  .gap13 {
    margin-bottom: 0.5rem;
  }
  .gap21 {
    margin-bottom: 0.813rem;
  }
  .gap34 {
    margin-bottom: 1.313rem;
  }
  .gap56 {
    margin-bottom: 2.125rem;
  }
  .gap89 {
    margin-bottom: 3.5rem;
  }
  .space21 {
    margin: 0.813rem 0;
  }
  .space34 {
    margin: 1.313rem 0;
  }
  .hideonmobile2 {
    display: none;
  }
  .hero-h1-space1 {
    padding-left: 0; 
  }
  .hero-h1-space2 {
    padding-left: 0;
  }
  .card-info {
    padding: 0;
  }
  .cat {
    padding: 3.5rem 1.313rem;
  }
  .doodle1 {
    width: 20vw;
  }
}