@import url('https://fonts.googleapis.com/css2?family=Work+Sans:ital,wght@0,100..900;1,100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Rubik:ital,wght@0,300..900;1,300..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Exo:ital,wght@0,100..900;1,100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Exo+2:ital,wght@0,100..900;1,100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Barlow:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');





/* =============================================================================
   HTML5 CSS Reset Minified - Eric Meyer
   ========================================================================== */
/*
html,body,div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,abbr,address,cite,code,del,dfn,em,img,ins,kbd,q,samp,small,strong,sub,sup,var,b,i,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,figcaption,figure,footer,header,hgroup,menu,nav,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;outline:0;font-size:100%;vertical-align:baseline;background:transparent}
body{line-height:1}
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}
nav ul{list-style:none}
blockquote,q{quotes:none}
blockquote:before,blockquote:after,q:before,q:after{content:none}
a{margin:0;padding:0;font-size:100%;vertical-align:baseline;background:transparent;text-decoration:none}
mark{background-color:#ff9;color:#000;font-style:italic;font-weight:bold}
del{text-decoration:line-through}
abbr[title],dfn[title]{border-bottom:1px dotted;cursor:help}
table{border-collapse:collapse;border-spacing:0}
hr{display:block;height:1px;border:0;border-top:1px solid #ccc;margin:1em 0;padding:0}
input,select{vertical-align:middle}
li{list-style:none}*/

* {
  margin: 0;
  padding: 0;
}

/* =============================================================================
   My CSS
   ========================================================================== */


:root{
  --color1: #ffaf19;
  --color2: #F06144;
  --colorBg: #0c0c0c;
  --colorStroke: #ffaf19;
  --colorTitle: #ffaf19;

  --offWhite: #eeeeee;
  --black: #181617;

  /*--color1: #fdd000;*/
  /*--offWhite: #e22eff;*/

  --scrolltop: 0;
}

body{
  width: 100%;
  overflow-x: hidden;

  /*font-family: "Work Sans", sans-serif;*/
  /*font-family: "Rubik", sans-serif;*/
  /*font-family: "Inter", sans-serif;*/
  /*font-family: "Exo", sans-serif;*/
  font-family: "Exo 2", sans-serif;
  /*font-family: "Barlow", sans-serif;*/

  font-optical-sizing: auto;
  font-weight: <weight>;
  font-style: normal;
  background-color: var(--color1);
  line-height: 1;
}

html{
  scroll-behavior: smooth;
  font-size: calc(.8rem + 0.25vw);
}

#header{
    width:100%;
    height: 100vh;
    position: fixed;
    z-index: 0;
}

.link-offset{
  scroll-margin-top: 5em;
}

#shiro{
    width:100%;
    height: 85vh;
    pointer-events: none;
}

#body{
    width: 100%;
    position: absolute;
    z-index: 10;
    top: 0;
    pointer-events: none;
}

  #particles-js{
    width: 100%;
    height: 100%;
    background-color: var(--colorBg);
    background-image: url('');
    background-size: cover;
    background-position: 50% 50%;
    background-repeat: no-repeat;
  }


  .title{
    position: absolute;
    top: 40%;
    left: 50%;
    color: #ffffff;
    mix-blend-mode: difference;
    pointer-events: none;
    opacity: 1;
    transform: translate(-50%, -100%) scale(1.0);
    transition: transform 1s ease, opacity 1s ease;  
  }

    @starting-style{
      .title{
        opacity: 0;
        transform: translate(-50%, -130%) scale(1.1);
      }
    }

    .title h1{
      font-size: max(5em, 8vw);
      font-family: "Inter", sans-serif;
      font-weight: 900;
    }

  .subtitle{
    position: absolute;
    top: 40%;
    left: 50%;
    transform: translate(-50%, 0);
    width: 80%;
    max-width: 800px;
    text-align: center;
    font-weight: 300;
    opacity: 1;
    transition: transform 2s ease, opacity 2s ease;   
  }


    @starting-style{
      .subtitle{
        opacity: 0;
        transform: translate( -50%, 1em);
      }
    }

  .subtitle h2{
    color: #ffffff;
    font-size: 1.6em;

  }
  .subtitle p{
    font-size: 1em;
    line-height: 1.2;
    margin-top: 2em;
    color: #eeeeee;
    text-shadow: 5px 5px 5px rgb(0 0 0), -5px -5px 4px rgb(0 0 0), 5px 5px 4px rgb(0 0 0), -5px -5px 4px rgb(0 0 0), 5px 5px 4px rgb(0 0 0), -5px -5px 4px rgb(0 0 0);
  }

  .button,
  .subtitle button{
    background-color: #ffffff;
    color: var(--black);
    border-radius: 2em;
    padding: .5em 1.75em;
    font-size: 1em;
    font-weight: 700;
    border: 0;
    outline: 0;
    cursor: pointer;
    display: inline-block;
    text-decoration: none;
    line-height: 1;
    transition: .3s;
  }


  a.contato{
    background-color: #ffffff;
    color: var(--color2);
    border-radius: 2em;
    padding: .5em 1.75em;
    font-size: 1.3em;
    font-weight: 800;
    border: 0;
    outline: 0;
    cursor: pointer;
    display: inline-block;
    text-decoration: none;
    line-height: 1;
    transition: .3s;
  }

  a.contato:hover{
    color: #ffffff;
    background-color: var(--color2);
  }

  .subtitle a.button:hover{
    background-color: var(--color1) !important;
    /*color: var(--black);*/
  }

  .button span{
    display: block;
    font-size: .8em;
    opacity: .65;
    font-weight: 500;
    line-height: 1.5;
  }

  .title,
  .subtitle{
    margin-top: var(--scrolltop);
  }


  #header-tint{
    position: absolute;
    inset: 0 0 0 0;
    content: "";
    background-color: var(--color1);
    /*mix-blend-mode: overlay;*/
    mix-blend-mode: multiply;
    pointer-events: none;
  }

  /* ------------ */

  nav{
    width: 100%;
    background-color: #000000CC;
    position: fixed;
    top: 0;
    z-index: 90;
  }

  nav ul{
    display: flex;
    list-style-type: none;
    gap: 1.5em;
    width: 100%;
    padding: 1em;
    justify-content: center;
    align-items: center;
  }

  nav ul li a{
    color: #888888;
    font-size: .8em;
    font-weight: 600;
    transition: color .5s ease;
    text-decoration: none;
  }

  nav ul li a:hover{
    color: #ffffff;
  }

  nav ul li:first-child a{
    font-family: "Inter", sans-serif;
    color: var(--color1);
    font-weight: 900;
    font-size: 1.1em;
  }

  /* ------------ */

  h1{
    font-weight: 900;
    font-family: "Inter", sans-serif;
  }

  h2{
    font-weight: 400;
    font-family: "Inter", sans-serif;
  }

  .todo{
    font-style: italic;
    opacity: .5;
    font-weight: 400;
    font-size: .7em;
  }

  section{
  }

  section .wrapper p:not(:last-child),
  section .wrapper .column2-3:not(:last-child),
  section .wrapper .column-highlight:not(:last-child),
  section .wrapper ul:not(:last-child){
    margin-bottom: 1em;
  }

    section .column2-3{
      display: grid;
      grid-template-columns: 2fr 1fr;
      gap: 3em;
      align-items: start;
    }

    section .column-highlight{
      border-top: 1px solid var(--colorStroke);
      padding-top: 1.5em;
      margin-top: 5em;
      margin-bottom: 0 !important;
      display: grid;
      grid-template-columns: 1fr 1fr 1fr;
      gap: 3em;
      font-size: 0.9em;


    }

    section .column-highlight ul{
        margin-left: 1.5em;
        display: flex;
        flex-direction: column;
        gap: .35em;
        line-height: 1.2;
        margin-bottom: 0;
    }

  ul li::marker{
    /*color: #ffffff;*/
    font-size: 1.25em;
    line-height: 1rem;
  }

    section .column-highlight h3{
      margin-bottom: 1em;
      color: var(--colorTitle);
    }

  section.box h1{
    font-size: 2em;
  }

  section.box h2{
    font-size: 1.25em;
    color: #ffffff;
    line-height: 1.2;
    max-width: 55%;
  }
  section.box header{
    margin-bottom: 2em;
  }

  section.box p{
    line-height: 1.25;
  }

  section.box img{
    max-width: 100%;
    margin-inline: auto;
    display: block;
  }

  section.box aside{
    /*border: 1px solid #999;*/
    padding: 1.5em;
    font-size: .8em;
    background-color: #ffffff22;
    border-radius: 1em;
  }

  section.box aside h3{
    margin-bottom: .5em;
    color: var(--colorTitle);
  }
  section.box aside ul{
    margin: .75em 0 0 1.5em;
  }

  ul{
    /*list-style-type: none;*/
    margin-left: 1.5em;
  }

  ul li::marker{
    /*color: #ffffff;*/
    font-size: 1.25em;
    line-height: 1rem;
  }

  ul.box-list{
    list-style-type: none;
    margin: 0;
    display: flex;
    gap: 1.25em 1.25em;
    margin-top: .75em;
    margin-bottom: 3em !important;
    flex-wrap: wrap;
  }
  
  ul.box-list li{
    background-color: #ffffff44;
    border-radius: .75em;
    padding: 1em;
    flex: 1 1 20%;
    display: flex;
    gap: .5em;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }

  ul.box-list li span{
    display: block;
    width: 100%;
    text-align: center;
    font-weight: 700;
    font-size: .9em;
  }

  /* ------------ */

  section.box{
    pointer-events: auto;
    width: 90%;
    max-width: 1200px;
    margin-inline: auto;
    padding: 2em 4% 3em 4%;
    box-sizing: border-box;
    margin-bottom: 5em;
    border-radius: 1em;

    h1{
      color: var(--color2);
    }
    & > *{
      color: #1e1c18;
      margin-top: 1em;
    }
  }

  section.theme{
    background-color: var(--color1);
    --colorStroke: #ffffff;
    --colorTitle: #F06144;
    h1{
      color: var(--color2);
    }
    & > *{
      color: #1e1c18;
      margin-top: 1em;
    }
  }
  
  section.dark{
    background-color: #222222;
    h1{
      color: var(--color1);
    }
    & > *{
      color: #ffffff;
    }
  }  

  section.light{
    background-color: var(--offWhite);
    h1{
      color: var(--color2);
    }
    h2{
      color: #666666;
    }
    & > *{
      color: #222222;
    }
  }

  img.icone{
    width: 50px;
    display: inline-block;
    margin-inline: auto;
  }

  /* ------------ */

  .gallery {
    width: 100%;
    margin-bottom: 4em;
    pointer-events: auto;
  }

  .gallery .gallery-wrapper{
    width: 100%;
  }

  .gallery .gallery-item{
    display: inline-flex;
    flex-direction: column;
    gap: .75em;
    color: #ffffff;
    overflow: hidden;
    width: max-content;
    text-decoration: none;
  }

  .gallery .gallery-image{
    border-radius: .75em;
    overflow: hidden;
    background-color: rgba(0, 0, 0, .75);
    width: 550px;
    max-width: 75vw;
    aspect-ratio: 16 / 10;
    position: relative;
  }

  .gallery .gallery-image img {
    position: absolute;
    inset: 0 0 0 0;
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    transition: object-position 6s ease .25s;
    object-position: center top;
  }

  .gallery .swiper-slide-active .gallery-image img {
    object-position: center bottom;
  }

  /* -- */

  .gallery-content{
    font-size: .8em;
    line-height: 1.2;
    margin-left: 0.5em;
  }

  .gallery-title{
    font-weight: 700;
    font-size: 1.2em;
  }


  /* ------ */
  /* ------ */
  /* ------ */


  @media ( width < 600px){
    #shiro {
      height: 75vh;
    }
    section .column2-3{
      display: block;
    }
    section .column-highlight {
      display: block;
      border-top: 0;
      padding-top: 0;
    }
    section .column-highlight > *{
      border-top: 1px solid #ffffff;
      padding-top: 1em;
      margin-top: 3em;
    }
    .title,
    .subtitle {
      top: 30%;
    }
    .gallery .gallery-image{
      aspect-ratio: 6 / 4;
    }

  }

  /* ------ */