@import url('./fonts.css');

:root {
  --base-width: 1440px;

  --color-background: #F2F2F2;
  --color-border: #D4D4D4;
  --color-text-black: #3E3E3E;

  --color-accent-10: #41B3D3;
  --color-accent-20: #3DA7C7;
  --color-accent-30: #399BBB;
  --color-accent-40: #3490AE;
  --color-accent-50: #3084A2;
  --color-accent-60: #2C7896;
  --color-accent-70: #286C8A;
  --color-accent-80: #23617D;
  --color-accent-90: #1F5571;
  --color-accent-100: #1B4965;

  --color-dark-blue: var(--color-accent-100);
  --color-mid-blue: var(--color-accent-50);
  --color-light-blue: var(--color-accent-10);

  --bs-body-bg: var(--color-background);
  --bs-body-color: var(--color-dark-blue);
  --bs-body-font-size: clamp(14px, 1.111vw, 16px);
  --bs-border-color: var(--color-border);
  --bs-font-sans-serif: "M PLUS 1","Noto Sans",system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue","Liberation Sans",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
  --bs-border-radius: clamp(10px,1.389vw,20px);

  --bs-primary-rgb: 65,179,211;
  --bs-primary-bg-subtle: var(--color-dark-blue);
  --bs-secondary: #fefefe;
  --bs-secondary-rgb: 254,254,254;
}

body {
  display: block;
  width: 100vw;
  min-height: 100vh;
  overflow-x: hidden;
}

menu {
  list-style: none;
  padding: .25em .25em;
  margin: 0;
}

a {
  text-decoration: none;
  color: inherit;
}

.form-control::placeholder {
  color: #A2A2A2;
}

select.form-control {
  padding-right: 2rem;
}

.card {
  --bs-card-border-width: 0;
  overflow: hidden;
}

.btn {
  --bs-btn-font-size: clamp(10px,1.111vw,16px);
  display: inline-flex;
  flex-flow: row;
  align-items: center;
  justify-content: space-between;
  flex: none;
  font-weight: 500;
}

.btn-primary {
  --bs-btn-color: #fff;
  --bs-btn-bg: var(--color-light-blue);
  --bs-btn-border-color: var(--color-light-blue);
  --bs-btn-hover-bg: var(--color-mid-blue);
  --bs-btn-hover-border-color: var(--bs-btn-hover-bg);
  --bs-btn-active-color: var(--bs-btn-color);
  --bs-btn-active-bg: var(--bs-btn-hover-bg);
  --bs-btn-active-border-color: var(--bs-btn-hover-bg);
  --bs-btn-disabled-bg: var(--bs-btn-bg);
  --bs-btn-border-radius: 1.875rem;
  --bs-btn-padding-x: 1.25rem;
  --bs-btn-padding-y: 0.75rem;
}

.btn-secondary {
  --bs-btn-color: var(--color-dark-blue);
  --bs-btn-bg: #fff;
  --bs-btn-border-color: var(--bs-btn-bg);
  --bs-btn-hover-color: var(--color-dark-blue);
  --bs-btn-hover-bg: #F8F8F8;
  --bs-btn-hover-border-color: var(--bs-btn-hover-bg);
  --bs-btn-active-color: var(--bs-btn-color);
  --bs-btn-active-bg: var(--bs-btn-hover-bg);
  --bs-btn-active-border-color: var(--bs-btn-hover-border-color);
  --bs-btn-disabled-bg: var(--bs-btn-bg);
  --bs-btn-border-radius: 1.875rem;
  --bs-btn-padding-x: 1.25rem;
  --bs-btn-padding-y: 0.75rem;
}

.btn-secondary.dropdown-toggle {
  --bs-btn-border-radius: 0.625rem;
}

.btn-outline-secondary {
  --bs-btn-color: var(--color-dark-blue);
  --bs-btn-border-color: var(--color-border);
  --bs-btn-hover-color: var(--bs-btn-color);
  --bs-btn-hover-bg: #F8F8F8;
  --bs-btn-hover-border-color: var(--color-border);
  --bs-btn-active-color: var(--bs-btn-hover-color);
  --bs-btn-active-bg: var(--bs-btn-hover-bg);
  --bs-btn-active-border-color: var(--bs-btn-hover-border-color);
  --bs-btn-border-radius: 1.875rem;
  --bs-btn-padding-x: 1.25rem;
  --bs-btn-padding-y: 0.5rem;
}

.btn .icon {
  --btn-icon-size: clamp(27px,2.222vw,32px);
  display: inline-block;
  width: var(--btn-icon-size);
  height: var(--btn-icon-size);
}

.btn:has(.icon) {
  --bs-btn-padding-x: 0.5rem;
  --bs-btn-padding-y: 0.5rem;
  gap: 2.5rem;
}

.navbar .btn:has(.icon) {
  --bs-btn-padding-x: 0.25rem;
  --bs-btn-padding-y: 0.25rem;
  gap: 1rem;
}

.navbar .btn .icon.flag,
.dropdown-item .icon.flag {
  display: inline-block;
  width: 1.5rem;
  height: 1.5rem;
}

.btn:has(.flag) {
  --bs-btn-padding-y: 0.625rem;
}

.btn .title,
.dropdown-item .title {
  padding: 0 0.75rem;
}

.btn:hover > * {
  opacity: 0.5;
}

.dropdown-menu {
  --bs-dropdown-border-radius: 0.75rem;
}

.dropdown-item {
  display: inline-flex;
  flex-flow: row;
  align-items: center;
  gap: 0.25rem;
}

.navbar.navbar-expand-lg {
  padding: 0.75rem 0.75rem;
}

.navbar.navbar-expand-lg .navbar-toggler {
  --bs-navbar-toggler-padding-y: 0.25rem;
  --bs-navbar-toggler-padding-x: 0.25rem;
  --bs-navbar-toggler-icon-bg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' fill='none' viewBox='0 0 30 30'%3E%3Cpath fill='%23fff' d='M19.431 9.263a.899.899 0 1 1 1.271 1.271l-4.448 4.448 4.45 4.45a.9.9 0 0 1-1.272 1.271l-4.45-4.45-4.449 4.45a.899.899 0 0 1-1.27-1.27l4.449-4.45-4.449-4.449a.9.9 0 0 1 1.271-1.27l4.449 4.447 4.448-4.448Z'/%3E%3C/svg%3E");;
  background-color: var(--color-light-blue);
  border-radius: 50% 50%;
}

.navbar.navbar-expand-lg .navbar-toggler.collapsed {
  --bs-navbar-toggler-icon-bg: url("data:image/svg+xml,%3Csvg width='30' height='30' viewBox='0 0 30 30' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M18 19a1 1 0 1 1 0 2h-6a1 1 0 1 1 0-2h6Zm3-5a1 1 0 1 1 0 2H9a1 1 0 1 1 0-2h12Zm-3-5a1 1 0 1 1 0 2h-6a1 1 0 1 1 0-2h6Z' fill='%23fff'/%3E%3C/svg%3E");
}

.navbar .navbar-content {
  border-radius: 0.4375rem;
  background-color: var(--bs-white);
  box-shadow: 0px 5px 12px 0px rgba(0, 0, 0, 0.09);
  padding: 0.5rem 1.5rem;
}

.navbar-brand > img {
  height: 28px;
}

.navbar.navbar-expand-lg .navbar-nav {
  gap: 1.5rem;
  padding: 3rem 0;
  align-items: center;
}

.navbar.navbar-expand-lg .nav-link {
  --bs-navbar-nav-link-padding-x: 0;
  border-bottom: 2px solid transparent;
  font-size: 18px;
  font-weight: 500;
}

.navbar.navbar-expand-lg .nav-link:hover {
  border-bottom: 2px solid var(--color-light-blue);
}

.nav-actions {
  display: flex;
  flex-flow: column;
  align-items: center;
  gap: 1rem;
  padding-bottom: 1rem;
}

.navbar.navbar-expand-lg .dropdown-toggle::after {
  display: none;
}

@media screen and (min-width: 992px) {
  .navbar.navbar-expand-lg .navbar-nav {
    gap: 1.5rem;
    padding: 0 3rem;
    align-items: flex-start;
  }

  .navbar-brand > img {
    height: 36px;
  }

  .nav-actions {
    flex-flow: row;
    padding-bottom: 0;
  }
}

.site-footer {
  position: relative;
  margin-top: 3rem;
  display: block;
  width: 100vw;
  border-radius: 1.25rem 1.25rem 0 0;
  background-color: var(--bs-white);
}

.site-footer .container {
  position: relative;
}

.site-footer .footer-decor {
  position: relative;
  display: flex;
  flex-flow: column;
  width: 100%;
}

.site-footer .footer-decor .decor-bg {
  position: relative;
  display: block;
  width: 100%;
  border-radius: var(--bs-border-radius) var(--bs-border-radius) 0 0;
}

.site-footer .footer-decor::before,
.site-footer .footer-decor .decor-bg::before,
.site-footer .footer-decor .decor-bg::after {
  content: "";
  position: relative;
  display: block;
  width: 100%;
  height: 60px;
  border-radius: var(--bs-border-radius) var(--bs-border-radius) 0 0;
  background-color: var(--color-dark-blue);
  z-index: 0;
}
.site-footer .footer-decor .decor-bg::before {
  margin-top: -35px;
  background-color: var(--color-light-blue);
  z-index: 1;
}
.site-footer .footer-decor .decor-bg::after {
  margin-top: -35px;
  height: 36px;
  background-color: var(--bs-white);
  z-index: 2;
}

.site-footer .footer-heading {
  display: flex;
  width: 100%;
  flex-flow: column;
  align-items: center;
  gap: 8rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--color-border);
}

.site-footer .footer-heading .footer-logo {
  width: clamp(10rem, 22.222vw, 20rem);
}

.site-footer .footer-heading .footer-logo > img {
  width: 100%;
  height: 100%;
}

.site-footer .footer-message {
  position: absolute;
  top: 4.5rem;
  left: 0;
  width: 100%;
  display: flex;
  flex-flow: row;
  justify-content: center;
}

.site-footer .footer-message .title {
  text-align: center;
  font-weight: 800;
  font-size: clamp(24px,3.472vw,50px);
  line-height: 1.2;
  text-transform: uppercase;
}

.site-footer .footer-content {
  display: flex;
  flex-flow: column;
  margin-bottom: 0.5rem;
}

.site-footer .footer-contact {
  padding: 1rem 0;
}

.site-footer .footer-contact .title {
  font-size: clamp(14px,1.25vw,18px);
  font-weight: 600;
  line-height: 1.5;
}

.site-footer .footer-info {
  padding-left: 2rem;
  font-size: clamp(14px,1.25vw,18px);
  font-weight: 400;
  line-height: 1.5;  
}

.site-footer .footer-info .icon {
  width: 24px;
  height: 24px;
  margin-left: -2rem;
}

.site-footer .footer-links {
  display: flex;
  flex-flow: row;
  gap: 2rem;
}

.site-footer .footer-links .navbar-nav {
  display: flex;
  flex-flow: row;
  gap: 0.5rem;
}

.site-footer .footer-links .navbar-nav .nav-link {
  font-size: clamp(14px,1.25vw,18px);
  font-weight: 500;
}

.site-footer .footer-copyright {
  display: flex;
  width: 100%;
  flex-flow: row;
  justify-content: space-between;
  border-top: 1px solid var(--color-border);
  padding: 1.5rem 0;
  font-size: clamp(12px,1.25vw,18px);
  font-weight: 400;
}

@media screen and (min-width: 992px) {
  .site-footer .footer-decor::before,
  .site-footer .footer-decor .decor-bg::before,
  .site-footer .footer-decor .decor-bg::after {
    height: 80px;
  }
  .site-footer .footer-decor .decor-bg::before {
    margin-top: -30px;
  }
  .site-footer .footer-decor .decor-bg::after {
    margin-top: -30px;
    height: 31px;
  }

  .site-footer .footer-heading {
    flex-flow: row;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding-bottom: 0.5rem;
    border-bottom: none;
  }
  
  .site-footer .footer-content {
    flex-flow: row;
    align-items: flex-end;
    justify-content: space-between;
  }
  .site-footer .footer-message {
    position: relative;
    top: unset;
    left: unset;
    width: 100%;
    justify-content: flex-end;
  }
  .site-footer .footer-message .title {
    text-align: right;
  }
}

.contact-banner {
  display: flex;
  flex-flow: row;
  align-items: center;
  width: 100vw;
  min-height: 14rem;
  background-image: url(../assets/images/banner_bg.png);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}

.contact-banner .banner-content {
  display: flex;
  flex-flow: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  padding: 3rem 1rem;
}

.contact-banner .banner-content > .title {
  font-family: Poppins;
  font-size: clamp(24px,2.778vw,40px);
  font-weight: 700;
}

.contact-banner .banner-content > .message {
  font-size: clamp(8px,1.111vw,16px);
  font-weight: 400;
  line-height: 1.5;
}

.margin-content {
  margin-top: 6rem;
}

@media screen and (min-width: 992px) {
  .contact-banner {
    aspect-ratio: 16/4;
  }

  .margin-content {
    margin-top: 8rem;
  }

  .text-lg-left {
    text-align: left!important;
  }
}

.section-title .title {
  font-size: clamp(24px,2.847vw,41px);
  font-weight: 800;
  line-height: 1;
}

.section-title .subtitle {
  font-size: clamp(12px,1.25vw,18px);
  font-weight: 700;
  line-height: 1;
}

.section-image {
  display: block;
  aspect-ratio: 16/10;
  max-width: 100%;
  flex: none;
}

.section-image > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.bg-transparent {
  background-color: transparent!important;
}

.bg-linkedin {
  background: #195DB4!important;
}

.bg-instagram {
  background-image: url(../assets/images/Instagram_btn_bg.png)!important;
  background-repeat: repeat-y;
  background-size: 100% 1px;
}

.bg-facebook {
  background: #0C60F5!important;
}

.text-justify {
  text-align: justify;
}

.text {
  font-size: inherit;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: -2%;
}

.border-top {
  border-top: var(--bs-border-width) solid var(--bs-border-color);
}

.disabled {
  user-select: none;
  pointer-events: none;
  opacity: 0.4;
}

.job-list .card-img-top {
  margin-bottom: -3rem;
}

.job-list .card-body {
  border-top-left-radius: var(--bs-card-border-radius);
  border-top-right-radius: var(--bs-card-border-radius);
}

.job-list .card-title {
  display: flex;
  flex-flow: row;
  align-items: center;
  justify-content: space-between;
  border-bottom: var(--bs-border-width) solid var(--bs-border-color);
}

.job-list .card-title::after {
  --icon-size: clamp(27px,2.5vw,36px);
  content: "";
  display: block;
  width: var(--icon-size);
  height: var(--icon-size);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' fill='none' viewBox='0 0 32 32'%3E%3Cpath fill='%2341B3D3' d='M32 16c0 8.837-7.163 16-16 16S0 24.837 0 16 7.163 0 16 0s16 7.163 16 16Z'/%3E%3Cpath fill='%23fff' d='M13.2 12.118a1 1 0 0 1 .999-1h6.459a1 1 0 0 1 1 1v6.458a1 1 0 0 1-2 0v-4.2l-7.172 7.17a.89.89 0 0 1-1.257-1.257l7.172-7.172h-4.202a1 1 0 0 1-1-1Z'/%3E%3C/svg%3E%0A");
  background-repeat: no-repeat;
  background-size: cover;
}

.job-list .card:hover .card-title::after {
  opacity: 0.7;
}

.job-list .card-title .title {
  font-size: clamp(14px,1.389vw,20px);
  font-weight: 700;
}

.job-list .no-posts-message {
  display: flex;
  flex-flow: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 16rem;
  font-size: clamp(14px,1.389vw,20px);
  font-weight: 400;
}

@media screen and (min-width: 992px) {
  .job-list .no-posts-message {
    height: 20rem;
  }
}

.job-details .card-title {
  font-size: clamp(14px,1.389vw,20px);
  font-weight: 700;
  line-height: 1;
  border-bottom: var(--bs-border-width) solid var(--bs-border-color);
}

.job-details .card-text > ul {
  padding-left: 1.25rem;
}

.job-overview .list-group {
  --bs-list-group-bg: transparent;
  --bs-list-group-border-color: transparent;
  --bs-list-group-item-padding-x: 0;
}

.job-overview .list-group-item {
  display: grid;
  grid-template-columns: 40% 60%;
}

.job-overview .list-group-item .title {
  font-weight: 600;
}

@media screen and (min-width: 992px) {
  .job-overview .list-group {
    border-bottom: var(--bs-list-group-border-width) solid var(--bs-border-color);
  }
}