/*!********************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[0].use[1]!./node_modules/sass-loader/dist/cjs.js!./assets/scss/theme/templates/page-contact.scss ***!
  \********************************************************************************************************************************************************************/
/**
 * Keep from smallest to biggest, each value is min px breakpoint
 * - by this breakpoints most of utility classes will be generated, also it will
 */
/**
 * Keep from smallest to biggest
 * scaling value should be calculated of (current break point min / next breakpoint min)
 */
/** 
 * use dynamic assign by breakpoints or assign your custom map of 
 */
/**
 * Bootstrap like
 */
/**
 * Tailwind like
 */
/**
 * Directions will be prefixed
 * so if prefix is "m" and providing "t" for top will be mt
 * allowed directions are:
 * ~ t -> top
 * ~ r -> right
 * ~ b -> bottom
 * ~ l -> left
 * ~ x -> left and right
 * ~ y -> top and bottom
 */
/**
 * Gutters value should be keept as an number cause it will be wrapped in val function for negative margins
 */
/**
 * Columns values should contain unit if needed wrap in val to use native calculations
 * - those values are are used for offset
 */
/* EXAMPLE */
/* Font_directory:
 * (
		'class-name-for-family':
 * 		(
 * 			'src': FontFileName.extension, // or map like (FontFileName.extension, FontFileName2.otherExtension)
 * 			'sans-serif': false, //added by default can be disabled
 * 			'params':
 * 			(
 * 				'font-weight': 400,
 * 				'font-style': 'italic',
 * 				'font-stretch': 'condensed',
 * 			)
 * 		)
 * )
 */
/**
 * Pass single numeric value or map with named breakpoints: numeric value
 *
 * If map provided then can be specified default (as "default" or "value" key: numeric value
 */
.pagecontact {
  display: flex;
  margin: 18rem 16rem 35rem 233rem;
}
@media (max-width: 991.98px) {
  .pagecontact {
    margin: 48rem 48rem 48rem 24rem;
    flex-direction: column;
  }
}
@media (max-width: 575.98px) {
  .pagecontact {
    margin: 48rem 24rem 48rem 12rem;
  }
}
.pagecontact__left {
  padding: 64rem 0rem 0rem 16rem;
  display: flex;
  flex-direction: column;
}
@media (max-width: 991.98px) {
  .pagecontact__left {
    padding: 0rem;
  }
}
@media (max-width: 991.98px) {
  * + .pagecontact__right {
    margin-top: 48rem;
  }
}
@media (max-width: 575.98px) {
  * + .pagecontact__right {
    margin-top: 24rem;
  }
}
.pagecontact__content {
  width: 425rem;
}
@media (max-width: 991.98px) {
  .pagecontact__content {
    width: 100%;
  }
}
* + .pagecontact__infos {
  margin-top: 80rem;
}
@media (max-width: 991.98px) {
  * + .pagecontact__infos {
    margin-top: 48rem;
  }
}
@media (max-width: 575.98px) {
  * + .pagecontact__infos {
    margin-top: 24rem;
  }
}
.pagecontact__infos {
  display: flex;
  flex-wrap: wrap;
  width: 582.75rem;
  gap: 50rem 58rem;
}
@media (max-width: 991.98px) {
  .pagecontact__infos {
    width: 100%;
    flex-direction: column;
  }
}
.pagecontact__infos__box {
  flex-shrink: 0;
  width: calc((100% - 58rem) / 2);
  line-height: 1.55;
}
@media (max-width: 991.98px) {
  .pagecontact__infos__box {
    width: 100%;
  }
}
.pagecontact__infos__box a {
  display: block;
  color: #1F2E47;
}
.pagecontact__infos__box a:hover {
  color: #30C4F3;
}
.pagecontact__infos__box .subtitle + * {
  margin-top: 21rem;
}
.pagecontact__infos__socials {
  display: flex;
  gap: 28.7rem;
}
.pagecontact__infos__socials__item svg {
  width: auto;
  height: 20rem;
}
@media (max-width: 991.98px) {
  .pagecontact__infos__socials__item svg {
    height: 40rem;
  }
}
.pagecontact__infos__socials__item svg path {
  fill: #1F2E47;
  transition: fill 0.2s linear;
}
.pagecontact__infos__socials__item:hover svg path {
  fill: #30C4F3;
}
@media (max-width: 991.98px) {
  * + .pagecontact__map {
    margin-top: 48rem;
  }
}
@media (max-width: 575.98px) {
  * + .pagecontact__map {
    margin-top: 24rem;
  }
}
.pagecontact__map {
  width: 986rem;
  height: 796rem;
  transform: translateX(102rem);
  overflow: hidden;
  border-radius: 25rem;
  border-bottom-right-radius: 0rem;
}
@media (max-width: 991.98px) {
  .pagecontact__map {
    transform: none;
    width: 100%;
    height: auto;
    aspect-ratio: 16/9;
  }
}
@media (max-width: 575.98px) {
  .pagecontact__map {
    border-radius: 12rem;
    border-bottom-right-radius: 0rem;
  }
}
.pagecontact__map iframe {
  width: 100%;
  height: 100%;
}
* + .pagecontact__form {
  margin-top: auto;
  padding-top: 29rem;
}
@media (max-width: 991.98px) {
  * + .pagecontact__form {
    padding-top: 48rem;
  }
}
@media (max-width: 575.98px) {
  * + .pagecontact__form {
    padding-top: 24rem;
  }
}
.pagecontact__form__label {
  font-size: calc(18rem * (var(--fontsize) / 100));
  line-height: 1.555;
  color: #1F2E47;
}
* + .pagecontact__form__buttonshow, * + .pagecontact__form__fields {
  margin-top: 18rem;
}
@media (max-width: 575.98px) {
  * + .pagecontact__form__buttonshow, * + .pagecontact__form__fields {
    margin-top: 12rem;
  }
}
.pagecontact__form__buttonshow {
  display: flex;
}
.pagecontact__form__fields form {
  display: flex;
  flex-direction: column;
  gap: 24rem;
  width: 400rem;
  font-size: calc(18rem * (var(--fontsize) / 100));
  line-height: 1.555;
}
@media (max-width: 991.98px) {
  .pagecontact__form__fields form {
    width: 600rem;
  }
}
@media (max-width: 575.98px) {
  .pagecontact__form__fields form {
    width: 100%;
  }
}
.pagecontact__form__fields form input {
  background-color: #ffffff;
  font-size: calc(18rem * (var(--fontsize) / 100));
  line-height: 1.555;
  padding: 12rem 12rem;
  border-radius: 25rem;
  color: #1F2E47;
  width: 100%;
}
.pagecontact__form__fields form input::placeholder {
  font-size: calc(18rem * (var(--fontsize) / 100));
  line-height: 1.555;
  color: #C6C6C6;
}
@media (max-width: 575.98px) {
  .pagecontact__form__fields form input {
    border-radius: 12rem;
  }
}
.pagecontact__form__fields form textarea {
  width: 100%;
  min-height: 52rem;
  display: block;
  background-color: #ffffff;
  font-size: calc(18rem * (var(--fontsize) / 100));
  line-height: 1.555;
  padding: 12rem 12rem;
  border-radius: 25rem;
  color: #1F2E47;
  resize: vertical;
  outline: none;
  border: none;
}
.pagecontact__form__fields form textarea::placeholder {
  font-size: calc(18rem * (var(--fontsize) / 100));
  line-height: 1.555;
  color: #C6C6C6;
}
@media (max-width: 575.98px) {
  .pagecontact__form__fields form textarea {
    border-radius: 12rem;
  }
}