/*
Theme Name: Active Fincraft
Author: Nyambayar Ganbold
Description: Custom handmade theme for activefincraft.mn
Version: 1.0
*/
/*

ROOT

*/
:root {
  --color-dark: #1a1a1a;
  --color-white: #fff;
  --color-light: #ebedf5;
  --color-lighter: #f5f6fa;
  --color-medium: #8a8c99; /*~#999*/
  --color-primary: #0089e5;
  --color-secondary: #5ce55c;

  --padding-smaller: 2.4rem;
  --padding-normal: 3.6rem;
  --padding-larger: 4.8rem;

  --radius-normal: 2.4rem;
  --radius-smaller: 1.2rem;

  --text-larger: 1.8rem;
  --text-normal: 1.6rem;
  --text-smaller: 1.4rem;

  --gap: 2.4rem;
}
::selection {
  background-color: var(--color-primary); /* selection background */
  color: #fff;               /* selection text color */
}
::-moz-selection {
  background-color: var(--color-primary);
  color: #fff;
}
::-webkit-selection {
  background-color: var(--color-primary);
  color: #fff;
}
/*

HTML, BODY

*/
body {
  font-family: "Rubik", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  font-size: var(--text-normal);
  color: var(--color-dark);
  background-color: var(--color-light);
  line-height: 1.2;
}
/*

TAGS

*/
h1,
h2,
h3 {
  font-weight: 500;
  letter-spacing: -0.025em;
  line-height: 1;
  text-wrap: balance;
}
h1 {
  font-size: 7.2rem;
  line-height: 0.8;
}
h2 {
  font-size: 4.8rem;
  line-height: 0.8;
}
img,
svg {
  display: block;
}
a {
  color: inherit;
  text-decoration: inherit;
}
/*

CLASSES

*/
.grid {
  display: grid;
  gap: var(--gap);
}
.grid--c2 {
  grid-template-columns: 1fr 1fr;
}
.grid--c4 {
  grid-template-columns: repeat(4, 1fr);
}
.grid--s2 {
  grid-column: span 2;
}

.section {
  margin-bottom: calc(var(--gap)*4);
}
.section__title {
  margin: 0 auto;
  width: 50%;
  text-align: center;
  margin-bottom: calc(var(--gap)*2);
}
.section__title p {
    font-size: var(--text-larger);
  margin-top: 2.4rem;
  text-wrap: balance;
}

.tile {
  background-color: var(--color-white);
  border-radius: var(--radius-normal);
  padding: var(--padding-normal);
}
.tile--larger {
  padding: var(--padding-larger);
}
.tile--smaller {
  padding: var(--padding-smaller);
}

.button {
  display: inline-flex;
  align-items: center;
  color: var(--color-white);
  height: 4.8rem;
  padding: 0 2.4rem;
  background-color: var(--color-dark);
  font-size: var(--text-smaller);
  border-radius: 2.4rem;
  transition: background-color 200ms ease-out, box-shadow 200ms ease-out;
  text-wrap: nowrap;
}
.button--smaller {
  height: 3.6rem;
  padding: 0 1.8rem;
  border-radius: 1.8rem;
  font-size: 1.2rem;
}
.button:hover {
  background-color: var(--color-primary);
}
.button--hollow {
  background-color: transparent;
  box-shadow: 0 0 0 1px var(--color-dark);
  color: var(--color-dark);
}
.button--hollow:hover {
  box-shadow: 0 0 0 1px transparent;
  background-color: var(--color-primary);
  color: var(--color-white);
}
.button--transparent {
  color: var(--color-dark);
  background-color: transparent;
}
.button--transparent:hover {
  box-shadow: 0 0 0 1px var(--color-dark);
  background-color: transparent;
}
.button--inverted {
  color: var(--color-white);
}
.button--hollow.button--inverted {
  box-shadow: 0 0 0 1px var(--color-white);
}
.button--hollow.button--inverted:hover {
  box-shadow: 0 0 0 1px transparent;
}
.button--disabled {
  color: var(--color-medium);
  background-color: var(--color-light);
}
.button--disabled:hover {
  background-color: var(--color-light);
  cursor: default;
}
/*

ELEMENTS

*/
/* Header */
#wrapper {
    max-width: 1440px;
    margin: 0 auto;
    padding: 0 var(--padding-larger);
}

#header {
    height: 12rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
    font-weight: 500;
}

#header__logo {
    display: block;
}
#header__logo img {
    height: 6rem;
}

#header__menu {
    display: flex;
    gap: var(--gap);
    z-index: 100;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}
#header__menu > li {
    position: relative;
}
#header__menu > li > a {
    display: block;
    padding: 1.2rem 1.8rem;
    transition: color 200ms ease-out;
    display: flex;
    align-items: center;
}
#header__menu > li > a[href="#"] {
    cursor: default;
}
#header__menu > li > a span {
    display: block;
    border: solid var(--color-dark);
    border-width: 0 1.5px 1.5px 0;
    display: inline-block;
    padding: 2px;
    margin-left: 0.6rem;
    transform: rotate(45deg);
    transition: transform 200ms ease-out, border-color 200ms ease-out;
}
#header__menu > li > ul {
    position: absolute;
    left: 0;
    bottom: 0;
    transform: translate(0, 90%);
    visibility: hidden;
    opacity: 0;
    transition: transform 200ms ease-out, opacity 200ms ease-out;
    padding-top: 1.2rem;
    width: 24rem;
    backdrop-filter: blur(12px);
    box-shadow: 1.2rem 1.2rem 2.4rem 0 rgba(0, 0, 0, 0.1);
}
#header__menu > li > ul > li {
    background-color: #ffffff90;
}
#header__menu > li > ul > li > a {
    font-weight: 400;
    display: block;
    padding: 1.2rem 2.4rem;
    text-wrap: balance;
    transition: color 200ms ease-out;
}
#header__menu > li > ul > li:first-child {
    border-radius: 1.2rem 1.2rem 0 0;
}
#header__menu > li > ul > li:last-child {
    border-radius: 0 0 1.2rem 1.2rem;
}
#header__menu > li > ul > li:first-child > a {
    padding-top: 1.8rem;
}
#header__menu > li > ul > li:last-child > a {
    padding-bottom: 1.8rem;
}

#header__menu > li:hover > a {
    color: var(--color-primary);
}
#header__menu > li:hover > a > span {
    transform: rotate(-135deg);
    border-color: var(--color-primary);
}
#header__menu > li:hover > ul {
    transform: translate(0, 100%);
    visibility: visible;
    opacity: 1;
}
#header__menu > li > ul > li:hover a {
    color: var(--color-primary);
}

#header__contact {
    transition: color 200ms ease-out;
}
#header__contact:hover {
    color: var(--color-primary);
}

/* Footer */
#footer {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  background-color: var(--color-dark);
  color: var(--color-white);
  padding-bottom: var(--padding-normal);
}

#footer__wrapper {
  grid-template-columns: 1.5fr 1fr 1fr 1fr 1fr;
}
.footer__column > *:last-child {
  margin-bottom: 0 !important;
}

#footer h3 {
  font-weight: 500;
  margin-bottom: 2.4rem;
}
#footer p,
#footer a {
  font-size: var(--text-smaller);
  color: #999;
  margin-bottom: 1.2rem;
}
#footer a {
  display: block;
  transition: color 200ms ease-out;
  text-wrap: balance;
}
#footer a:hover {
  color: var(--color-white);
}

#footer #footer__logo {
  display: block;
  margin-bottom: 2.4rem;
}
#footer__logo img {
  height: 6rem;
}

#footer__address {
  text-wrap: balance;
}

#footer__copyright {
  opacity: 0.333;
  text-align: center;
  margin-bottom: 0 !important;
  margin-top: 4.8rem;
}

/* Contact */
#contact h2 {
  font-size: 3.6rem;
  margin-bottom: 3.6rem;
}
#contact label {
  display: block;
  font-size: var(--text-smaller);
  margin-bottom: 1.2rem;
}
#contact label span {
  color: red;
}
#contact input,
#contact textarea {
  display: block;
  width: 100%;
  box-sizing: border-box;
  padding: 1.8rem 2.4rem;
  font-size: var(--text-smaller);
  border-radius: 1.2rem;
  outline: 1px solid var(--color-medium);
  border: none;
  /*  */
  font-family: "Rubik", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
}
#contact input:focus,
#contact textarea:focus {
  outline-color: var(--color-primary);
  outline-style: solid;
  outline-width: 2px;
  -webkit-tap-highlight-color: transparent;
}
#contact input::placeholder,
#contact textarea::placeholder {
  color: var(--color-medium);
}
#contact input.error,
#contact textarea.error {
  outline-color: red;
  outline-width: 2px;
}
#contact input:disabled,
#contact textarea:disabled {
  background-color: var(--color-lighter);
  color: var(--color-medium);
}
#contact textarea {
  resize: none;
}
#contact__footer {
  display: flex;
  align-items: center;
  gap: var(--gap);
}
#contact__message {
  font-size: var(--text-smaller);
  line-height: 1;
  text-wrap: balance;
}

#header__hamburger {
    display: none;
    width: 2.4rem;
    height: 2.4rem;
    fill: var(--color-dark);
}

#offcanvas {
    position: fixed;
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
    z-index: 200;
    /*  */
    opacity: 0;
    visibility: hidden;
}
#offcanvas__background {
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
    z-index: 201;
    backdrop-filter: blur(12px);
    /*  */
    opacity: 0;
    visibility: hidden;
}
#offcanvas__panel {
    position: absolute;
    top: 0;
    right: 0;
    height: 100%;
    background-color: var(--color-light);
    box-shadow: 0 0 24px 0 rgba(0, 0, 0, 0.2);
    padding: 2.4rem;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    z-index: 202;
    transform: translate(100%, 0);
}

#offcanvas__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.2rem;
}
#offcanvas__header h2 {
    font-size: 2.4rem;
}
#offcanvas__close {
    width: 1.2rem;
    height: 1.2rem;
    fill: var(--color-dark);
}

#offcanvas__panel > ul > li {
    border-bottom: solid 1px var(--color-medium);
}
#offcanvas__panel > ul > li:last-child {
    border-bottom: none;
}
#offcanvas__panel > ul > li > a {
    display: block;
    font-size: 1.4rem;
    padding: 1.2rem 0;
    font-weight: 450;
}

#offcanvas__panel > ul > li > .offcanvas__flex {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
#offcanvas__panel > ul > li > .offcanvas__flex span {
    margin-top: -2px;
    margin-right: 2px;
    display: block;
    border: solid var(--color-dark);
    border-width: 0 1.5px 1.5px 0;
    display: inline-block;
    padding: 2px;
    margin-left: 0.6rem;
    transform: rotate(45deg);
    transition: transform 200ms ease-out, border-color 200ms ease-out;
}

#offcanvas__panel > ul > li:last-child > a {
    border-bottom: none;
}
#offcanvas__panel > ul > li > ul {
    padding-left: 2.4rem;
    border-top: solid 1px transparent;
    /*  */
    overflow: hidden;
    max-height: 0;
    transition: max-height 500ms ease-out, border-top-color 500ms ease-out;
}
#offcanvas__panel > ul > li > ul > li {
    border-bottom: dashed 1px var(--color-medium);
}
#offcanvas__panel > ul > li > ul > li:last-child {
    border-bottom: none;
}
#offcanvas__panel > ul > li > ul > li > a {
    display: block;
    font-size: 1.2rem;
    padding: 1.2rem 0;
}

#offcanvas__panel > ul > li.open > ul {
    border-top-color: var(--color-medium);
    max-height: 500px;
}
#offcanvas__panel > ul > li.open > .offcanvas__flex span {
    transform: rotate(-135deg);
}

#offcanvas__footer {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}
#offcanvas__logo {
    display: block;
}
#offcanvas__logo img {
    height: 3.6rem;
    margin-bottom: 1.2rem;
}
#offcanvas__address {
    font-size: 1rem;
    line-height: 1;
    margin-bottom: 1.2rem;
    padding-bottom: 1.2rem;
    border-bottom: solid 1px var(--color-medium);
}
#offcanvas__contact {
    font-size: 1.2rem;
    margin-bottom: 1.2rem;
    padding-bottom: 1.2rem;
    border-bottom: solid 1px var(--color-medium);
}
#offcanvas__social {
    font-size: 1.2rem;
    display: flex;
    gap: 1.2rem;
    align-items: center;
}
#offcanvas__social p {
    flex: 1;
    font-size: 1rem;
    text-align: right;
    color: var(--color-medium);
}





/* MEDIA QUERY */
/* 200% = 4K */
@media only screen and (max-width: 3840px) {
    html {
        font-size: 125%;
    }
    #wrapper {
        max-width: 2880px;
    }
}
/* 175% */
@media only screen and (max-width: 3360px) {
    html {
        font-size: 109.375%;
    }
    #wrapper {
        max-width: 2520px;
    }
}
/* 150% */
@media only screen and (max-width: 2880px) {
    html {
        font-size: 93.75%;
    }
    #wrapper {
        max-width: 2160px;
    }
}
/* 125% */
@media only screen and (max-width: 2400px) {
    html {
        font-size: 78.125%;
    }
    #wrapper {
        max-width: 1800px;
    }
}
/* 100% */
@media only screen and (max-width: 1920px) {
    html {
        font-size: 62.5%;
    }
    #wrapper {
        max-width: 1440px;
    }
}
/* 90% */
@media only screen and (max-width: 1728px) {
    html {
        font-size: 56.25%;
    }
    #wrapper {
        max-width: 1296px;
    }
}
/* 80% */
@media only screen and (max-width: 1536px) {
    html {
        font-size: 50%;
    }
    #wrapper {
        max-width: 1152px;
    }
}
/* 70% */
@media only screen and (max-width: 1344px) {
    html {
        font-size: 43.75%;
    }
    #wrapper {
        max-width: 1008px;
    }
}
/* 60% */
@media only screen and (max-width: 1152px) {
    html {
        font-size: 37.5%;
    }
    #wrapper {
        max-width: 864px;
    }
}
/* 50% */
@media only screen and (max-width: 960px) {
    :root {
        --padding-smaller: 2.4rem;
        --padding-normal: 3.6rem;
        --padding-larger: 3.6rem;
        
        --gap: 1.8rem;
        
        --radius-normal: 1.8rem;
        --radius-smaller: 0.9rem;
    }

    html {
        font-size: 62.5%;
    }
    h2 {
        font-size: 3.6rem;
    }
    
    .grid--c2 {
        grid-template-columns: 1fr;
    }
    .grid--c4 {
        grid-template-columns: 1fr 1fr;
    }
    .section {
        margin-bottom: calc(var(--gap)*3);
    }
    .section__title {
        width: 66.666%;
    }
    .section__title p {
        font-size: var(--text-smaller);
    }
    
    #wrapper {
        max-width: 100%;
    }

    #header__hamburger {
        display: block;
    }
    #header__logo img {
        height: 4.8rem;
    }
    #header__menu {
        display: none;
    }
    #header__contact {
        display: none;
    }

    #contact .grid {
        grid-template-columns: 1fr 1fr;
    }

    #footer__wrapper {
        grid-template-columns: 1fr 1fr 1fr;
        grid-template-rows: auto auto;
        row-gap: calc(var(--gap)*1.5);
        column-gap: calc(var(--gap)*2);
    }
    #footer__logo img {
        height: 4.8rem;
    }
    #footer__copyright {
        font-size: 1.2rem !important;
        margin-top: 1.8rem;
    }

    #offcanvas__panel {
        width: 33.333%;
    }
}
/* PHONE */
@media only screen and (max-width: 600px) {
    :root {
        --padding-smaller: 2.4rem;
        --padding-normal: 2.4rem;
        --padding-larger: 2.4rem;

        --radius-normal: 1.2rem;
        --radius-smaller: 0.6rem;
    }

    .grid--c2 {
        grid-template-columns: 1fr;
    }
    .grid--c4 {
        grid-template-columns: 1fr;
    }
    .section__title p {
        margin-top: 1.8rem;
    }
    
    #wrapper {
        padding: 0 16px;
    }
    #header {
        height: 9.6rem;
    }
    
    #contact {
        padding: var(--padding-smaller);
    }
    #contact .grid {
        grid-template-columns: 1fr;
    }
    #contact > div {
        display: block;
    }
    #contact > div > div {
        margin-bottom: 1.2rem;
    }
    #contact > div > div:last-child {
        margin-bottom: 0;
    }
    #contact label {
        margin-bottom: 0.6rem;
    }
    #contact__footer {
        flex-direction: column;
        align-items: flex-start;
        gap: 1.2rem;
    }

    #footer {
        padding-bottom: var(--padding-larger);
    }
    #footer__wrapper {
        grid-template-columns: 1fr 1fr;
    }
    #footer__wrapper .footer__column:nth-child(1) {
        grid-column: span 2;
    }
    #footer__wrapper .footer__column:nth-child(3) {
        display: none;
    }
    #footer__wrapper .footer__column:nth-child(5) {
        grid-column: span 2;
        display: flex;
        gap: var(--gap);
    }
    #footer__wrapper .footer__column:nth-child(5) h3 {
        display: none;
    }
    #footer #footer__logo {
        margin-bottom: 1.8rem;
    }
    #footer__copyright {
        margin-top: 2.4rem;
        text-align: left;
    }
    #footer p, #footer a {
        margin-bottom: 0.6rem;
    }
    #footer h3 {
        margin-bottom: 1.8rem;
    }

    #offcanvas__panel {
        width: 66.666%;
    }
}
/* PHONE LANDSCAPE */
/* @media only screen and (max-width: 960px) and (orientation: landscape) {
    html {
        font-size: 46.875%;
    }
} */