@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600&display=swap");
/* VARIABLES */
/* LAYOUT VARIABLES */
:root {
  --content-width: 1280px;
  --gap-global: 24px;
}

/* COLORS VARIABLES*/
:root {
  --color-primary: #ea0029;
  --color-secondary: #061434;
  --color-soft-dark: #3d4154;
  --color-light-turquoise: #dbe7e5;
  --color-light-pink: #f6eef0;
  --color-dark-pink: #d8bcc3;
  --color-light-ocker: #efede5;
  --color-light-green: #dde7db;
  --color-brown: #f4f1ea;
  --color-light-grey: #d9d9d9;
  --color-lighter-grey: #f4f4f4;
  --color-light-purple: #f2eef6;
  --color-white: #ffffff;
}

/* TYPOGRAPHY VARIABLES */
:root {
  --font-family: "Poppins", "Helvetica Neue", "Arial", sans-serif;
  --font-size-small: 14px;
  --font-size-normal: 16px;
  --font-size-medium-small: 18px;
  --font-size-medium: 20px;
  --font-size-large-small: 24px;
  --font-size-large-medium: 32px;
  --font-size-large: 44px;
  --font-size-extra-large: 58px;
  --font-weight-thin: 200;
  --font-weight-normal: 300;
  --font-weight-medium: 400;
  --font-weight-medium-bold: 500;
  --font-weight-bold: 600;
  --line-height: 1.6;
  --line-height-small: 1.2;
  --h1-font-size: var(--font-size-large);
  --h1-line-height: var(--line-height-small);
  --h2-font-size: var(--font-size-large-medium);
  --h2-line-height: var(--line-height-small);
  --h3-font-size: var(--font-size-large-small);
  --h3-line-height: var(--line-height-small);
}

/* TYPOGRAPHY STYLES */
body {
  font-family: var(--font-family);
  font-size: var(--font-size-normal);
  font-weight: var(--font-weight-normal);
  line-height: var(--line-height);
}

h1 {
  font-size: var(--h1-font-size);
  font-weight: var(--font-weight-thin);
  line-height: var(--h1-line-height);
  margin: 0 0 44px;
}

h2 {
  font-size: var(--h2-font-size);
  font-weight: var(--font-weight-thin);
  line-height: var(--h2-line-height);
  margin: var(--gap-global) 0;
}

h3 {
  font-size: var(--h3-font-size);
  font-weight: var(--font-weight-thin);
  line-height: var(--h3-line-height);
  margin: var(--gap-global) 0;
}

/* STRUCTURAL LAYOUT STYLES */
.wide-container {
  margin: 0 auto;
  max-width: Min(calc(100vw - var(--gap-global) * 2.6), var(--content-width));
}

.content-wrapper {
  align-items: flex-start;
  display: flex;
  gap: calc(2 * var(--gap-global));
  margin-top: calc(2.5 * var(--gap-global));
}

.content-wrapper .main-content {
  flex: 1;
}

@media (min-width: 1024px) {
  .content-wrapper {
    gap: calc(4 * var(--gap-global));
    margin-top: calc(4 * var(--gap-global));
  }
}

/* BASE & GENERAL STYLES */
*,
*:before,
*:after {
  box-sizing: border-box;
}

html {
  margin: 0;
  padding: 0;
}

body {
  background-color: var(--color-white);
  color: var(--color-soft-dark);
  margin: 0;
}

body.mobile-menu-open {
  overflow: hidden;
}

p {
  margin: var(--gap-global) 0;
}

a,
a:visited {
  color: var(--color-secondary);
  transition: color 0.2s ease, opacity 0.3s ease, border 0.3s ease;
}

a:hover,
a:visited:hover {
  color: var(--color-primary);
  text-decoration: none;
}

a.chevron-right,
a.chevron-left,
a:visited.chevron-right,
a:visited.chevron-left {
  align-items: center;
  display: inline-flex;
}

a.chevron-right:after,
a:visited.chevron-right:after {
  background-image: url(../assets/chevron-right.svg);
  background-position: 100% 50%;
  content: "";
  display: block;
  height: 16px;
  margin-left: 10px;
  width: 16px;
}

a.chevron-left:before,
a:visited.chevron-left:before {
  background-image: url(../assets/chevron-left.svg);
  background-position: 0 50%;
  content: "";
  display: block;
  height: 16px;
  margin-right: 10px;
  width: 16px;
}

/* SITE HEADER */
.site-header {
  background-color: rgba(255, 255, 255, 0.9);
  border-bottom: 1px solid var(--color-light-grey);
  left: 0;
  padding: 24px 0;
  position: -webkit-sticky;
  position: sticky;
  right: 0;
  top: 0;
  transition: transform 0.35s ease-out;
  z-index: 99;
}

.site-header .wide-container {
  align-items: flex-start;
  display: flex;
  flex-direction: column;
  gap: var(--gap-global);
  min-height: 99px;
}

.site-header .site-header-left {
  flex: 1;
}

.site-header .site-header-right {
  align-items: center;
  display: flex;
  gap: 48px;
  justify-content: space-between;
  width: 100%;
}

.site-header .site-header-right > a {
  text-decoration: none;
}

.site-header .site-header-right .user-loggedin {
  display: none;
}

@media (min-width: 1024px) {
  .site-header .site-header-right .user-loggedin {
    display: flex;
  }
}

@media (min-width: 768px) {
  .site-header .site-header-right {
    justify-content: unset;
    width: auto;
  }
}

.sticky-scroll-menu .site-header {
  transform: translateY(-100%);
}

.sticky-scroll-menu.show-scroll-menu .site-header {
  transform: translateY(0%);
}

@media (min-width: 768px) {
  .site-header {
    padding: 0;
  }
  .site-header .wide-container {
    align-items: center;
    flex-direction: row;
  }
}

.user-loggedin {
  align-items: center;
  font-size: var(--font-size-medium-small);
  line-height: var(--line-height-small);
  text-align: right;
}

.user-loggedin a {
  display: block;
  font-size: var(--font-size-small);
}

.user-loggedin .user-avatar {
  height: 50px;
  margin-left: 20px;
  overflow: hidden;
  width: 50px;
}

.user-loggedin .user-avatar img {
  border-radius: 60px;
  object-fit: cover;
  width: 100%;
  height: 100%;
}

/* SITE FOOTER */
.site-footer {
  padding: calc(2 * var(--gap-global));
}

/* SITE NAVIGATION */
.site-menu {
  background-color: var(--color-lighter-grey);
  height: 100vh;
  padding: 0 calc(1.3 * var(--gap-global));
  position: fixed;
  top: 147px;
  transform: translateX(calc(-100% - 1.3 * var(--gap-global)));
  transition: transform 0.2s cubic-bezier(0.445, 0.05, 0.55, 0.95);
  width: 100%;
  z-index: 100;
}

.site-menu ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
}

.site-menu ul li {
  margin: 0 0 4px;
}

.site-menu ul li.has-submenu > a {
  align-items: center;
  display: flex;
  justify-content: space-between;
}

.site-menu ul li.has-submenu > a.active {
  color: var(--color-primary);
}

.site-menu ul li.has-submenu > a:after {
  content: "";
  background-image: url(../assets/chevron-right.svg);
  background-position: 100% 50%;
  display: block;
  height: 16px;
  margin-left: 10px;
  transition: transform 0.3s ease;
  width: 16px;
}

.site-menu ul li.has-submenu > a.open:after {
  transform: rotate(90deg);
}

.site-menu ul li.has-submenu > a.open + .submenu {
  height: auto;
  margin: 24px 0;
  opacity: 1;
  visibility: visible;
}

.site-menu ul li a {
  border-bottom: 1px solid var(--color-light-grey);
  display: block;
  font-size: var(--font-size-medium);
  font-weight: var(--font-weight-medium-bold);
  padding: 8px 0;
  text-decoration: none;
}

.site-menu ul.submenu {
  border-left: 1px solid var(--color-light-grey);
  display: none;
  height: 0;
  opacity: 0;
  padding-left: 22px;
  transition: all 0.2s ease;
  visibility: hidden;
}

.site-menu ul.submenu a {
  font-weight: var(--font-weight-normal);
  padding: 8px 0;
}

.site-menu ul.submenu a.active {
  font-weight: var(--font-weight-medium-bold);
}

.mobile-menu-open .site-menu {
  transform: translateX(calc(-1.3 * var(--gap-global)));
}

.site-menu .user-loggedin {
  display: flex;
  flex-direction: row-reverse !important;
  justify-content: flex-end;
  margin: var(--gap-global) 0;
  text-align: left;
}

.site-menu .user-loggedin .user-avatar {
  margin-left: 0;
  margin-right: 20px;
}

@media (min-width: 1024px) {
  .site-menu .user-loggedin {
    display: none;
  }
}

@media (min-width: 768px) {
  .site-menu {
    top: 98px;
  }
}

@media (min-width: 1024px) {
  .site-menu {
    background-color: transparent;
    height: auto;
    max-width: unset;
    padding: 0;
    position: relative;
    top: auto;
    transform: none !important;
    width: 240px;
    z-index: 0;
  }
  .site-menu ul > li:first-of-type a {
    padding-top: 0;
  }
  .site-menu ul > li a {
    border-bottom: 1px solid transparent;
  }
  .site-menu ul > li.has-submenu > a:not(.active):hover {
    border-bottom: 1px solid var(--color-light-grey);
  }
  .site-menu ul > li ul.submenu {
    margin-left: 0;
  }
}

/* Mobile menu button */
.nav-toggle {
  align-items: center;
  background-color: transparent;
  border: 0;
  cursor: pointer;
  display: inline-flex;
  z-index: 10;
}

.nav-toggle svg {
  height: 1.5em;
  /* margin-right: 0.5em; */
  vertical-align: bottom;
  width: 1.5em;
}

.nav-toggle svg rect {
  transition: all 0.4s;
}

.has-light-header .nav-toggle svg {
  fill: #fff;
}

@media (min-width: 1024px) {
  .nav-toggle {
    display: none;
  }
}

/* Menu button animation */
.mobile-menu-open .nav-toggle rect:nth-child(1) {
  transform: rotate(45deg) translate(1px, -7px);
  width: 26px;
}

.mobile-menu-open .nav-toggle rect:nth-child(2) {
  opacity: 0;
  transform: translateX(18px);
}

.mobile-menu-open .nav-toggle rect:nth-child(3) {
  transform: rotate(-45deg) translate(-15px, -3px);
  width: 26px;
}

/* BOXES COMPONENT */
.boxes {
  display: flex;
  font-size: var(--font-size-large-small);
  flex-direction: column;
  gap: var(--gap-global);
  margin-bottom: var(--gap-global);
}

.boxes p {
  margin: 0;
}

.boxes.center .box-item {
  align-items: center;
  text-align: center;
}

.boxes.statistics .box-item {
  align-items: center;
  background-color: transparent;
  border: 2px solid #d8bcc3;
  text-align: center;
}

.boxes .box-item {
  background-color: var(--color-lighter-grey);
  display: flex;
  flex-direction: column;
  gap: var(--gap-global);
  padding: var(--gap-global);
  width: 100%;
}

.boxes .box-item.bg-green {
  background-color: var(--color-light-green);
}

.boxes .box-item.bg-turquoise {
  background-color: var(--color-light-turquoise);
}

.boxes .box-item.bg-pink {
  background-color: var(--color-light-pink);
}

.boxes .box-item.bg-ocker {
  background-color: var(--color-light-ocker);
}

.boxes .box-item.bg-purple {
  background-color: var(--color-light-purple);
}

.boxes .tagname {
  font-size: var(--font-size-small);
  letter-spacing: 2px;
  text-transform: uppercase;
}

.boxes .text-small {
  font-size: var(--font-size-medium);
}

.boxes .text-big {
  font-size: var(--font-size-extra-large);
  font-weight: var(--font-weight-thin);
}

@media (min-width: 768px) {
  .boxes {
    flex-direction: row;
  }
}

/* BUTTONS */
.btn,
a.btn {
  background: var(--color-soft-dark);
  border: 0;
  color: var(--color-white);
  display: inline-block;
  font-size: var(--font-size-medium-small);
  font-weight: var(--font-weight-medium);
  line-height: 1;
  max-width: 280px;
  padding: var(--gap-global);
  text-align: center;
  text-decoration: none;
  transition: background 0.3s ease;
  width: 100%;
}

.btn:hover,
a.btn:hover {
  background-color: var(--color-secondary);
  color: var(--color-white);
}

/* CERTIFICATES COMPONENT */
.certificates-list {
  margin-bottom: var(--gap-global);
  width: 100%;
}

.certificates-list tr {
  border-bottom: 1px solid var(--color-light-grey);
  display: flex;
  flex-direction: column;
  margin-top: var(--gap-global);
  padding-bottom: var(--gap-global);
}

.certificates-list tr td {
  display: block;
}

.certificates-list tr td:first-of-type {
  font-weight: var(--font-weight-medium);
}

.certificates-list tr td:last-of-type {
  padding-right: 0;
}

.certificates-list tr td img {
  vertical-align: middle;
}

@media (min-width: 640px) {
  .certificates-list tr {
    display: table-row;
  }
  .certificates-list tr td {
    border-bottom: 1px solid var(--color-light-grey);
    display: table-cell;
    padding: var(--gap-global) var(--gap-global) var(--gap-global) 0;
  }
}

.certificate-item {
  width: 100%;
}

.certificate-item > div {
  border-bottom: 1px solid var(--color-light-grey);
  flex: 1;
  padding: var(--gap-global) var(--gap-global) var(--gap-global) 0;
  white-space: nowrap;
}

.certificate-item > div:nth-child(1) {
  white-space: auto;
}

.certificate-item > div:nth-child(4) {
  flex: 0;
  padding: var(--gap-global) 0;
}

/* ID CARD COMPONENT */
/* NOTIFICATION COMPONENT*/
.notification {
  border-radius: 2px;
  display: flex;
  gap: var(--gap-global);
  margin: 0 0 var(--gap-global);
  padding: calc(var(--gap-global) / 2) var(--gap-global);
}

.notification .text {
  display: block;
}

.notification .icon {
  content: "";
  background-position: center center;
  background-repeat: no-repeat;
  display: block;
  height: 20px;
  margin-top: 4px;
  width: 20px;
  flex-shrink: 0;
}

.notification.notification-info {
  background-color: var(--color-lighter-grey);
}

.notification.notification-info .icon {
  background-image: url(../assets/info.svg);
}

.notification.notification-error {
  background-color: var(--color-light-pink);
}

.notification.notification-error .icon {
  background-image: url(../assets/error.svg);
}

.notification.notification-warning {
  background-color: var(--color-light-purple);
}

.notification.notification-warning .icon {
  background-image: url(../assets/warning.svg);
}

.notification.notification-success {
  background-color: var(--color-light-green);
}

.notification.notification-success .icon {
  background-image: url(../assets/checkmark.svg);
}

/* PROFILE CARD */
.profile-card-header {
  border-top: 1px solid rgba(140, 141, 148, 0.3);
  padding: 20px 0;
}

@media (min-width: 768px) {
  .profile-card-header {
    padding: 27px 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
}

.profile-card-header .card-title {
  margin: 0 0 10px;
}

@media (min-width: 768px) {
  .profile-card-header .card-title {
    margin: 0;
  }
}

.profile-card-header .edit-link {
  color: var(--color-soft-dark);
  font-weight: var(--font-weight-bold);
  align-items: center;
  display: inline-flex;
}

.profile-card-header .edit-link:after {
  content: "";
  width: 23px;
  height: 23px;
  background-image: url(../assets/edit-pen.svg);
  background-position: 0 0;
  background-repeat: no-repeat;
  margin-left: 16px;
  display: block;
}

.profile-card {
  background: var(--color-lighter-grey);
  padding: 30px;
}

@media (min-width: 768px) {
  .profile-card {
    padding: 72px 32px;
  }
}

.profile-card .profile-card-inner {
  display: grid;
}

@media (min-width: 768px) {
  .profile-card .profile-card-inner {
    grid-template-columns: minmax(auto, 320px) 1fr;
  }
}

.profile-card .image-wrapper .profile-card-img {
  max-width: 100%;
  display: block;
}

.profile-card .image-wrapper .profile-card-img:not(:last-child) {
  margin-bottom: 24px;
}

.profile-card .image-wrapper .profile-card-logo {
  max-width: 100%;
  display: block;
}

.profile-card .profile-details .profile-name {
  font-size: 36px;
  line-height: 1.4;
  letter-spacing: -0.02em;
  margin-top: 0;
  margin-bottom: 24px;
}

@media (min-width: 768px) {
  .profile-card .profile-details .profile-name {
    font-size: 44px;
  }

  .profile-card .profile-details {
    padding-top: 20px;
    padding-left: 24px;
  }
}

.profile-card .profile-details .profile-meta {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

.profile-card .profile-details .profile-meta:not(:last-child) {
  margin-bottom: 44px;
}

.profile-card .profile-details .profile-meta li {
  font-size: 18px;
  line-height: 1;
}

.profile-card .profile-details .profile-meta li:not(:last-child) {
  margin-bottom: 24px;
}

.profile-card .profile-details .profile-meta li span {
  font-weight: 400;
}

.profile-card .profile-details .certificates-title {
  font-size: 24px;
  font-weight: 300;
  line-height: 1.5;
  letter-spacing: -0.01em;
  margin: 0 0 23px;
}

.profile-card .profile-details .certificates-list {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

.profile-card .profile-details .certificates-list:not(:last-child) {
  margin-bottom: 22px;
}

.profile-card .profile-details .certificates-list li {
  font-size: 16px;
  font-weight: 400;
  margin-right: 36px;
  margin-bottom: 10px;
  display: inline-block;
}

.profile-card .profile-details .certificates-list li::before {
  content: "";
  width: 15px;
  height: 18px;
  background-image: url("data:image/svg+xml,%3Csvg width='15' height='18' viewBox='0 0 15 18' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M7.99583 0.262341C7.64605 -0.0874468 7.07893 -0.0874469 6.72914 0.262341L5.08073 1.91075H2.78286C2.28819 1.91075 1.88718 2.31176 1.88718 2.80644V5.1043L0.262341 6.72914C-0.0874468 7.07893 -0.0874469 7.64605 0.262341 7.99583L1.88718 9.62067V11.9519C1.88718 12.4465 2.28819 12.8476 2.78286 12.8476H4.00702V17.7392C4.00702 17.9264 4.21479 18.0389 4.37157 17.9366L7.4012 15.9589L10.4308 17.9366C10.5876 18.0389 10.7954 17.9264 10.7954 17.7392V12.8476H11.9754C12.4701 12.8476 12.8711 12.4465 12.8711 11.9519V9.65401L14.496 8.02917C14.8458 7.67938 14.8458 7.11226 14.496 6.76247L12.8711 5.13763V2.80644C12.8711 2.31176 12.4701 1.91075 11.9754 1.91075H9.64424L7.99583 0.262341ZM5.80497 5.80496C6.67064 4.93929 8.08093 4.94605 8.9466 5.81172C9.81227 6.67739 9.81903 8.08768 8.95336 8.95335C8.08769 9.81902 6.6774 9.81226 5.81173 8.94659C4.94606 8.08092 4.9393 6.67063 5.80497 5.80496Z' fill='%23323339'/%3E%3C/svg%3E%0A");
  vertical-align: middle;
  margin-top: -2px;
  margin-right: 7px;
  display: inline-block;
}

.profile-card .profile-details .certificates-expiration {
  font-size: 18px;
  line-height: 1;
  margin: 0;
}

.profile-card .profile-details .certificates-expiration span {
  font-weight: 400;
}

/* PROFILE COMPONENT */
.profile-item {
  border-bottom: 2px solid var(--color-light-grey);
  margin-bottom: calc(2 * var(--gap-global));
}

.profile-item .edit-link {
  align-items: center;
  display: inline-flex;
  font-weight: var(--font-weight-bold);
  margin-bottom: 24px;
}

.profile-item .edit-link:after {
  background-image: url(../assets/edit-pen.svg);
  background-position: 0 0;
  background-repeat: no-repeat;
  content: "";
  display: block;
  height: 23px;
  width: 23px;
  margin-left: 16px;
}

.profile-item-inner {
  display: grid;
  grid-template-areas: "image" "details" "social";
  grid-template-rows: auto auto auto;
  text-align: left;
}

.profile-item-inner .image-wrapper {
  grid-area: image;
}

.profile-item-inner .image-wrapper img {
  margin-bottom: 24px;
  max-width: 264px;
  width: 100%;
}

.profile-item-inner .image-wrapper .edit-image-link {
  align-items: center;
  display: inline-flex;
  font-weight: var(--font-weight-bold);
}

.profile-item-inner .image-wrapper .edit-image-link:before {
  background-image: url(../assets/camera.svg);
  background-position: 0 0;
  background-repeat: no-repeat;
  content: "";
  display: block;
  height: 23px;
  width: 23px;
  margin-right: 16px;
}

.profile-item-inner .social-media {
  grid-area: social;
  margin-top: 24px;
}

.profile-item-inner .social-media .title {
  border-bottom: 1px solid #e5e5e5;
  font-size: var(--font-size-medium);
  padding-bottom: 16px;
}

.profile-item-inner .social-media .social-links {
  display: flex;
  margin: 20px 0 24px;
  gap: 16px;
}

.profile-item-inner .social-media a {
  text-decoration: none;
}

.profile-item-inner .social-media a.facebook:hover {
  color: #1b74e4;
}

.profile-item-inner .social-media a.twitter:hover {
  color: #1d9bf0;
}

.profile-item-inner .social-media a.linkedin:hover {
  color: #0a66c2;
}

.profile-item-inner .social-media a.youtube:hover {
  color: #ff0000;
}

.profile-item-inner .user-details {
  grid-area: details;
  margin-top: 48px;
}

.profile-item-inner .user-details table {
  width: 100%;
  text-align: left;
}

.profile-item-inner .user-details table tr td {
  border-bottom: 1px solid var(--color-light-grey);
  padding: 24px 24px 24px 0;
}

.profile-item-inner .user-details table tr td:first-of-type {
  min-width: 100px;
}

.profile-item-inner .user-details table tr td:last-of-type {
  font-size: var(--font-size-medium-small);
}

.profile-item-inner .user-details table tr:last-of-type td {
  border: 0;
}

.profile-item-inner .user-details table tr:first-of-type td {
  padding-top: 0;
}

.edit-profile-item .edit-image {
  align-items: flex-end;
}

.edit-profile-item .edit-image > .form-field:first-of-type {
  flex: 0;
}

.edit-profile-item .edit-image img {
  vertical-align: bottom;
}

@media (min-width: 768px) {
  .profile-item {
    text-align: right;
  }
  .profile-item-inner {
    grid-template-areas: "image detail" "social details";
    column-gap: 72px;
    grid-template-rows: auto 1fr;
    grid-template-columns: minmax(auto, 260px) 1fr;
  }
  .profile-item-inner .social-media {
    margin-top: 48px;
  }
  .profile-item-inner .user-details {
    grid-row-start: 1;
    grid-row-end: span 2;
    margin: 0;
  }
  .profile-item-inner .user-details table tr td:last-of-type {
    font-size: var(--font-size-medium);
  }
}

/* FORM ELEMENTS */
form {
  margin-bottom: var(--gap-global);
}

form input[type="text"],
form input[type="email"],
form input[type="phone"],
form input[type="url"],
form select {
  align-items: center;
  border: 1px solid var(--color-light-grey);
  border-radius: 2px;
  display: flex;
  font-family: var(--font-family);
  font-size: var(--font-size-medium-small);
  font-weight: var(--font-weight-medium);
  gap: 10px;
  height: 64px;
  padding: 0 16px;
  width: 100%;
}

form input[type="submit"].btn {
  margin-top: var(--gap-global);
  max-width: 100%;
}

form label {
  display: block;
  font-size: var(--font-size-normal);
  margin-bottom: 16px;
}

form select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-image: url(../assets/chevron-down.svg);
  background-position: calc(100% - 16px) 50%;
  background-repeat: no-repeat;
}

form .fields-group {
  align-items: center;
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-bottom: var(--gap-global);
  width: 100%;
}

form .fields-group .form-field {
  width: 100%;
}

@media (min-width: 768px) {
  form .fields-group {
    flex-direction: row;
  }
}