/* SUMMARY
1. GLOBAL
2. LAYOUT
3. SECTION
4. CARD
*/


/*** 1. GLOBAL ***/

/* Reset / Normalize
  ============================= */

/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */html{line-height:1.15;-webkit-text-size-adjust:100%}body{margin:0}main{display:block}h1{font-size:2em;margin:.67em 0}hr{box-sizing:content-box;height:0;overflow:visible}pre{font-family:monospace,monospace;font-size:1em}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace,monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button,input{overflow:visible}button,select{text-transform:none}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:none;padding:0}[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring,button:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:.35em .75em .625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{vertical-align:baseline}textarea{overflow:auto}[type=checkbox],[type=radio]{box-sizing:border-box;padding:0}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}

/* Variables
  ============================= */

  :root {
    --color-primary: #D73953;
    --color-black:  #090909;
    --color-white: #ffffff;
    --color-grey: #a0a0a0;
    --color-light-grey: #f3f3f3;
    --color-dark-grey: #353535;
    --color-red: #cd3e65;
    --color-green: #08805b;
  
    --text-color: var(--color-black);
    --valid-color: var(--color-green);
    --error-color: var(--color-red);
  
    --font-family-base: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    --font-family-title: 'Raleway', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  
    --font-size-small: 1.2rem;
    --font-size-medium: 1.6rem;
    --font-size-large: 1.8rem;
    --font-size-x-large: 2.3rem;
    --font-size-xx-large: 4.8rem;
  
    --font-weight-regular: 400;
    --font-weight-bold: 700;
  
    --line-height-small: 1.2;
    --line-height-base: 1.5;
    --line-height-big: 1.8;
  
    /** SECTION **/
    --section-padding: 5rem 0;
    --section-header-padding: 0 0 3rem;
    --section-header-align: center;
    --section-title-font-size: var(--font-size-xx-large);
    --section-title-font-weight: var(--font-weight-bold);
    --section-title-line-height: var(--line-height-small);
    --section-title-margin: 0;
    --section-title-color: var(--color-black);
    --section-tagline-transform: uppercase;
    --section-tagline-color: var(--color-primary);
    --section-tagline-font-family: var(--font-family-headings);
    --section-tagline-font-weight: var(--font-weight-bold);
    --section-tagline-margin: 0;
    --section-body-padding: 2rem 0 4rem;
    --section-footer-padding: 3rem 0 0;
    --section-footer-align: center;
  
    /** HEADER **/
    --header-padding: 4rem 0 0;
  
    /** FOOTER **/
    --footer-padding: 5rem 0 1rem;
  
    /** NAVBAR **/
    --nav-item-font-family: var(--font-family-headings);
    --nav-item-font-weight: var(--font-weight-bold);
    --nav-item-font-size: var(--font-size-medium);
    --nav-item-letter-spacing: .04rem;
    --nav-item-display: inline-block;
    --nav-item-margin: 0 0 0 2rem;
    --nav-item-link-hover: var(--color-white);
  
    /** BUTTON **/
    --button-display: inline-block;
    --button-padding: 1.5rem 3rem;
    --button-border: var(--color-primary) solid 0.2rem;
    --button-color: var(--color-black);
    --button-text-decoration: none;
    --button-font-size: var(--font-size-large);
    --button-hover-color: var(--color-white);
    --button-hover-text-decoration: none;
    --button-hover-background: var(--color-primary);
  
    /** MOTION **/
    --transition-duration: .3s;
    --transition-cubic-bezier: cubic-bezier(0.17, 0.67, 0, 1.01);
  }
  
  /* Base
      ============================= */
  
  *, *:before, *:after {
    box-sizing: border-box;
  }
  
  html {
  scroll-behavior: smooth;
  font-size: 62.5%;
  }
  
  body {
    color: var(--text-color);
    font-family: var(--font-family-base);
    font-size: var(--font-size-medium);
    font-weight: var(--font-weight-regular);
    line-height: var(--line-height-base);
  }
  
  h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-family-title);
    font-weight: var(--font-weight-bold);
  }
  
  a {
    color: var(--text-color);
    text-decoration: none;
  }
  
  a:visited {
    font-style: italic;
  }
  
  a:hover {
    text-decoration: underline;
  }
  
  a:active {
    background-color: var(--color-light-grey);
  }
  
  .button {
    display: var(--button-display);
    padding: var(--button-padding);
    border: var(--button-border);
    font-size: var(--button-font-size);
    color: var(--button-color);
    text-decoration: var(--button-text-decoration);
    cursor: pointer;
  }
  
  .button:hover {
    color: var(--button-hover-color);
    text-decoration: var(--button-hover-text-decoration);
    background: var(--button-hover-background);
    transition-duration: var(--transition-duration);
    transition-property: color, background-color;
  }
  
  .button-primary {
    color: var(--color-white);
    background: var(--color-primary);
  }
  
  .button-primary:hover {
    color: var(--color-primary);
    background: var(--color-white);
  }
  
  @media screen and (max-width: 480px) {
      html {
          font-size: 57%;
      }
  }

  @media screen and (min-width: 481px) and (max-width: 767px) {
      html {
          font-size: 60%;
      }
  }
  /* Helpers
      ============================= */
  
  .visually-hidden:not(:focus):not(:active) {
    position: absolute !important;
    height: 1px;
    width: 1px;
    overflow: hidden;
    clip: rect(1px, 1px, 1px, 1px);
    white-space: nowrap;
  }

  main img {
      width: 100%;
      height: auto;
  }
  
  /*** 2. LAYOUT ***/
  
  /* Layout
      ============================= */
  
  .container {
    width: 100%;
    max-width: 960px;
    margin-left: auto;
    margin-right: auto;
  }
  
  /* Grid
      ============================= */
  
  ul.row {
    margin: -1rem;
    padding: 0;
    list-style: none;
  }
  
  .row {
    display: flex;
  }
  
  [class*='col-'] {
    margin: 1rem;
  }
  
  .col-1-3 {
    width: calc((100% / 3) - 2rem);
  }
  
  .col-1-2 {
    width: calc((100% / 2) - 2rem);
  }

  @media screen and (max-width: 767px) {
      :root {
        --section-padding: 5rem 1.5rem;
        --section-body-padding: 2rem 0 0;
      }

      ul.row, .row {
          flex-direction: column;
          margin: 0;
      }

      [class^="col-"] {
          margin: 0 0 3rem 0;
      }

      .col-1-3, .col-1-2 {
          width: 100%;
      }
  }
  
  /* Navbar
      ============================= */
  
  .nav {
    margin: 0;
    padding: 0;
    list-style: none;
    text-align: center;
    display: flex;
  }
  
  .nav .nav-item {
    font-family: var(--nav-item-font-family);
    font-weight: var(--nav-item-font-weight);
    font-size: var(--nav-item-font-size);
    letter-spacing: var(--nav-item-letter-spacing);
  }
  
  .nav .nav-item + .nav-item {
    margin: var(--nav-item-margin);
  }
  
  .nav .nav-link {
    display: block;
    padding: 0.5rem 0;
    position: relative;
  }
  
  .nav .nav-link:hover {
    color: var(--nav-item-link-hover);
    text-decoration: none;
  }
  
  .nav .nav-link::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    background-color: var(--color-white);
    width: 0;
    height: 0.2rem;
    transition: var(--transition-duration) var(--transition-cubic-bezier);
  }
  
  .nav .nav-item:hover .nav-link::before {
    background-color: var(--color-primary);
    width: 100%;
  }

  @media screen and (max-width: 767px) {
      :root {
          --nav-item-margin: 0
      }

      .navbar-menu {
          display: none;
          flex: 1;
      }

      .header .nav {
          flex-direction: column;
          overflow: hidden;
          max-height: 0;
          transition: max-height .2s ease-out;
      }
  }
  
  /* Header
      ============================= */
  
  .header {
    padding: var(--header-padding);
    position: relative;
    z-index: 3;
    background: transparent;
  }
  
  .header-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .header .menu-icon{
      cursor: pointer;
      padding: 2.5rem;
      position: relative;
      user-select: none;
      display: none;
  }

  .header .menu-icon .navicon {
      background: var(--color-white);
      display: block;
      width: 2rem;
      height: .2rem;
      position: relative;
      transition: background .2s ease-out;
  }

  .header .menu-icon .navicon::before,
  .header .menu-icon .navicon::after {
      content: "";
      display: block;
      width: 100%;
      height: 100%;
      position: absolute;
      background: var(--color-white);
      transition: all .2s ease-out;
  }
  
  .header .menu-icon .navicon::before {
      top: .7rem;
  }

  .header .menu-icon .navicon::after {
      top: -.7rem;
  }
  
  /* Footer
      ============================= */
  
  .footer {
    --nav-item-font-weight: normal;
    --nav-item-font-size: var(--font-size-small);
    padding: var(--footer-padding);
  }
  
  .footer-copyright {
    margin: 0;
    font-size: var(--font-size-small);
    color: var(--text-color);
  }
  
  .footer ul {
    text-align: right;
  }
  
  .footer-address {
    color: var(--text-color);
  }
  
  .social-link {
    display: block;
  }
  
  .social-link > svg {
    fill: var(--text-color);
  }

  @media screen and (max-width: 767px) {
      :root {
          --footer-padding: 5rem 2rem 1rem;
      }

      .footer .social.nav, .footer .footer-nav {
          text-align: center;
      }

      .social.nav li + li, .footer-nav li + li {
          padding-left: 2rem;
      }
  }
  
  /*** 3. SECTION ***/
  
  /* Section (all styles)
      ============================= */
  
  .section {
    padding: var(--section-padding);
  }
  
  .section-header {
    text-align: var(--section-header-align);
    padding: var(--section-header-padding);
  }
  
  .section-title {
    font-size: var(--section-title-font-size);
    font-weight: var(--section-title-font-weight);
    line-height: var(--section-title-line-height);
    margin: var(--section-title-margin);
    color: var(--section-title-color);
  }
  
  .section-tagline {
    color: var(--section-tagline-color);
    font-family: var(--section-tagline-font-family);
    text-transform: var(--section-tagline-transform);
    font-weight: var(--section-tagline-font-weight);
    margin: var(--section-tagline-margin);
  }
  
  .section-body {
    padding: var(--section-body-padding);
  }
  
  .section-footer {
    padding: var(--section-footer-padding);
    text-align: var(--section-footer-align);
  }
  
  /* Section theming
      ============================= */
  
  [data-section-theme="dark"] {
    --button-color: var(--color-white);
    --text-color: var(--color-white);
    --section-title-color: var(--color-white);
    background: var(--color-black);
  }
  
  /* Section HERO
      ============================= */
  
  .section-hero {
    position: relative;
    margin-top: -8.5rem;
  }
  
  .hero-homepage {
    background-image: url(images/banner-home.jpg);
    background-position: 65% 8rem;
    background-repeat: no-repeat;
    background-size: 90rem auto;
  }
  
  .section-hero .section-body {
    padding: 10rem 4rem;
  }
  
  .section-hero .section-category {
    color: var(--color-white);
    text-transform: uppercase;
  }
  
  .section-hero .section-title {
    margin-bottom: 5rem;
  }
  
  .section-hero .section-inner {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    min-height: 35vh;
  }

  .article-page .section-hero {
      margin-top: -8.5rem;
      padding-top: 5rem;
  }

  @media screen and (max-width: 767px) {
      .section-hero {
          margin: -0.1rem 0;
      }

      .hero-homepage {
          background-position: 85% 0;
      }

      .section-hero .section-body {
          padding: 2rem;
      }
  }
  /* Section Latest news
      ============================= */
  
  .section-latest-news .row {
    flex-direction: row-reverse;
  }

  @media screen and (max-width: 767px) {
      .section-latest-news .row {
          flex-direction: column;
      }
  }
  
  /* Section SERVICES
      ============================= */
  
  .section-services .row {
    flex-wrap: wrap;
  }
  
  /* Section ABOUT US
      ============================= */
  
  .section-about-us [class*='col-'] {
    align-self: center;
  }
  
  /*** 4. CARD ***/
  
  /* Card (all styles)
      ============================= */
  
  .card-category {
    color: var(--color-primary);
  }
  
  /* Card WORK
      ============================= */
  
  .card-work .card-outer {
    position: relative;
    overflow: hidden;
  }
  
  .card-work:hover .card-outer {
    transform: scale(0.95);
  }
  
  .card-work .card-image img {
    height: 30rem;
    width: 100%;
    object-fit: cover;
    vertical-align: bottom;
  }
  
  .card-work:hover .card-image {
    transform: scale(1.2);
    transition: var(--transition-duration) var(--transition-cubic-bezier);
  }
  
  .card-work .card-inner {
    position: absolute;
    top: -0.1rem;
    left: -0.1rem;
    right: -0.1rem;
    bottom: -0.1rem;
    z-index: 1;
    transition: var(--transition-duration) var(--transition-cubic-bezier);
  }
  
  .card-work:hover .card-inner {
    background-color: rgba(0, 0, 0, 0.7);
  }
  
  .card-work .card-title {
    text-align: center;
    margin: 0;
    opacity: 0;
    height: 100%;
    position: relative;
  }
  
  .card-work .card-title a {
    display: block;
    text-decoration: none;
    padding-top: 45%;
  }
  
  .card-work .card-title a::after {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    content: '';
  }
  
  .card-work:hover .card-title {
    opacity: 1;
  }

  @media screen and (max-width: 767px) {
      .card-work .card-inner {
          --text-color: var(--color-white);
          position: relative;
      }

      .card-work .card-title {
          opacity: 1;
      }

      .card-work .card-title a {
          padding: 2rem 1rem 0 1rem;
      }
  }
  
  /* Card SERVICES
      ============================= */
  
  .card-services .card-title {
    margin: 0;
  }
  
  .card-services a {
    display: block;
    padding: 2rem;
    background-color: var(--color-light-grey);
  }
  
  .card-services a:hover {
    color: var(--color-white);
    background: var(--color-primary);
    text-decoration: none;
    transition-duration: 0.3s;
    transition-property: color, background-color;
  }
  
  /* Card TESTIMONIAL
      ============================= */
  
  .card-testimonial {
    text-align: center;
  }
  
  .card-testimonial .card-avatar {
    border-radius: 50%;
    width: 10rem;
    height: 10rem;
  }
  
  .card-testimonial .card-quote cite {
    display: block;
    padding-top: 1rem;
    color: var(--color-primary);
  }
  
  .card-testimonial .card-quote {
    position: relative;
  }
  
  .card-testimonial .card-quote::before {
    content: '\201C';
    position: absolute;
    top: -4.5rem;
    left: -1rem;
    color: #efeded;
    font-size: 10rem;
    z-index: -1;
  }
  
  /*** ARTICLE PAGE ***/
  
  /* Section HERO (article)
      ============================= */
  
  .hero-article {
    background-size: 150rem 100rem;
    background-position: 50% 0;
  }
  
  .hero-article::before {
    content: '';
    background: rgba(0, 0, 0, 0.8);
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    z-index: 0;
  }
  
  .hero-article .section-inner {
    text-align: center;
    align-items: center;
    min-height: 40vh;
  }
  
  .hero-article .section-body {
    position: relative;
    padding: 7rem 0 0;
    z-index: 2;
  }
  
  .main-article {
    padding: 5rem 0;
  }
  
  /* Post
      ============================= */
  
  .post {
    display: flex;
    align-items: baseline;
  }
  
  .post-content {
    width: 100%;
    padding-left: 7rem;
  }
  
  .post-aside {
    order: -1;
    min-width: 20%;
  }
  
  .post img {
    width: 100%;
    height: auto;
  }
  
  .post-content p:first-child {
    font-size: var(--font-size-x-large);
  }
  
  .post-content .img-caption {
    margin: 1rem 0;
    padding: 0 0.5rem;
    font-size: var(--font-size-small);
    color: var(--color-grey);
    text-align: center;
  }
  
  /* Post Meta
      ============================= */
  
  .post-meta-list {
    flex-direction: column;
  }
  
  .post-meta-list strong {
    color: var(--color-primary);
    font-size: 1.3rem;
    font-weight: var(--font-weight-bold);
    text-transform: uppercase;
    letter-spacing: normal;
    display: block;
  }
  
  .post-meta-list [class*='post-meta'] {
    margin-bottom: 1rem;
    padding-bottom: 1rem;
    border-bottom: 0.2rem solid var(--color-light-grey);
  }
  
  .post-meta-list [class*='post-meta']:last-child {
    border: none;
    margin-bottom: 3rem;
  }
  
  /* Tag list
      ============================= */
  
  .tag-list {
    padding: 0;
    list-style: none;
  }
  
  .tag-list li {
    display: inline;
  }
  
  .tag-list li::after {
    content: ", ";
  }
  
  .tag-list li:last-child::after {
    content: "";
  }
  
  /*** FORM ***/
  
  /* Comment section
      ============================= */
  
  .post-comments {
    width: 80%;
    margin: 10rem 0 0 auto;
    padding-left: 7rem;
  }
  
  .post-comments .section-title {
    font-variant: small-caps;
  }
  
  /* Basic form
      ============================= */
  
  form {
    display: flex;
    flex-direction: column;
    padding: 1rem 0;
    margin: 0;
  }
  
  fieldset {
    border: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    padding: 0 0 2rem;
  }
  
  label {
    cursor: pointer;
    display: block;
    white-space: nowrap;
    font-size: 1.4rem;
    padding: 0 0 .5rem;
  }
  
  input[type=text],
  input[type=email],
  textarea {
    position: relative;
    width: 100%;
    padding: 1.2rem;
    line-height: 1;
    border: .1rem solid var(--color-black);
    background-color: var(--color-white);
    box-shadow: none;
    outline: 0;
  }
  
  input[type=text],
  input[type=email] {
    padding-right: 3rem;
  }
  
  input[type=text]:focus,
  input[type=email]:focus,
  textarea:focus {
    border: .1rem solid var(--color-grey);
  }
  
  ::placeholder {
    font-style: italic;
    font-size: var(--font-size-small);
  }
  
  /* Form group
      ============================= */
  
  .form-group {
    padding: 1rem;
    margin: 0;
    background-color: var(--color-white);
  }
  
  .form-group:focus-within {
    background-color: var(--color-light-grey);
    transition: .3s;
  }
  
  /* Form field
      ============================= */
  
  .form-field-container {
    position: relative;
  }
  
  .form-field-icon {
    font-style: normal;
  }
  
  /* Form help
      ============================= */
  
  .form-group .form-help {
    margin: 0;
    line-height: 1.3;
    letter-spacing: .019rem;
    color: var(--color-dark-grey);
    font-size: var(--font-size-small);
    max-height: 0;
    transition: .3s;
    overflow: hidden;
  }
  
  .form-group:focus-within .form-help {
    max-height: 20rem;
    margin: .4rem 0 0;
  }
  
  /* Form error handling
      ============================= */
  
  input:not(:placeholder-shown) ~ .form-field-icon::after {
    height: 100%;
    right: 0;
    pointer-events: none;
    position: absolute;
    top: 0;
    width: 1.3em;
  }
  
  input:required:invalid:not(:focus):not(:placeholder-shown) ~ .form-field-icon::after {
    content: '✘';
    color: var(--error-color);
  }
  
  input:required:valid ~ .form-field-icon::after {
    content: '✔';
    color: var(--valid-color);
  }
  
  input:required:valid ~ .form-help {
    max-height: 0;
  }
  
  input:required:invalid:not(:focus):not(:placeholder-shown),
  textarea:invalid:not(:focus):not(:placeholder-shown) {
    border: 0.1rem solid var(--error-color);
  }
  
  input:required:valid:not(:placeholder-shown),
  textarea:valid:not(:placeholder-shown) {
    border: 0.1rem solid var(--valid-color);
  }
  
  /*** SEARCH FORM ***/
  
  .form-search {
    display: block;
    padding: .5rem 0;
    position: relative;
  }
  
  .form-search .search-button {
    display: inline-block;
    background: transparent;
    border: 0;
    margin: 0;
    padding: 0;
  }
  
  .search-button .search-icon {
    fill: var(--color-white);
    width: 1.5rem;
    height: 1.5rem;
  }
  
  .form-search input[type="search"] {
    display: inline-block;
    color: var(--color-white);
    padding-right: 2rem;
    height: 3rem;
    border: 0;
    outline: none;
    position: absolute;
    width: 0;
    right: 0;
    background: none;
    cursor: pointer;
    z-index: 3;
    transition: width .4s cubic-bezier(0, 0.795, 0, 1);
  }
  
  .form-search input[type="search"]:focus {
    position: relative;
    width: 15rem;
    z-index: 1;
    border-bottom: .1rem solid var(--color-grey);
    padding: 0;
    cursor: text;
    margin: 0 1rem;
  }

  /* menu btn */
  .header .menu-btn {
      display: none;
  }

  .header .menu-btn:checked ~ .navbar-menu {
      display: block;
  }

  .header .menu-btn:checked ~ .navbar-menu .nav {
    max-height: 100%;
    overflow: inherit;
  }

  .header .menu-btn:checked ~ .menu-icon .navicon {
      background: transparent;
  }

  .header .menu-btn:checked ~ .menu-icon .navicon::before {
      transform: rotate(-45deg);
  }

  .header .menu-btn:checked ~ .menu-icon .navicon::after {
      transform: rotate(45deg);
  }

  .header .menu-btn:checked ~ .menu-icon .navicon::before,
  .header .menu-btn:checked ~ .menu-icon .navicon::after {
      top: 0;
  }

  @media screen and (max-width: 767px) {
      :root {
          --header-padding: 2rem 0 0;
      }

      .header {
          background: var(--color-black);
      }

      .header-container {
          flex-wrap: wrap;
          padding: 0 1.5rem;
      }

      .header .menu-icon {
          display: block;
      }
  }

  @media screen and (max-width: 480px) {
      .header-logo {
          flex-basis: 70%;
      }
  }

  @media screen and (min-width: 481px) and (max-width: 767px) {
      .header-logo {
          flex-basis: 79%;
      }
  }