/*

Theme Name: ARTGO Média Base
Description: Template de base Artgo Média, sans partials.
Author: ARTGO Média
Author URI: http://www.artgomedia.com
Version: 2.0

TIPS : Link for convert fonts : https://transfonter.org/
       Link for calculate vw / px : https://web-development.space/tools/px-to-vw/

*/

/****************** FONTS *****************/
@font-face {
  font-family: "Museo Sans";
  src: url("assets/fonts/subset-MuseoSans-500.woff2") format("woff2");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Museo Sans";
  src: url("assets/fonts/subset-MuseoSans-700.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Museo Sans";
  src: url("assets/fonts/subset-MuseoSans-900.woff2") format("woff2");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

/****************** VARIABLES *****************/

:root {
  /* COULEURS */

  --mainColor: #0c1f5f;
  --secondaryColor: #d90000;
  --lightColor: #fff;
  --darkColor: #2f2f2f;
  --greyColor: #f5f5f5;
  --orangeColor: #ff8900;
  --blueColor: #0dd4f2;

  /* TAILLES POLICES */

  /* --fontSizeXxs:; */
  /* --fontSizeXs:; */
  --fontSizeSm: 14px;
  --fontSizeBase: 16px;
  --fontSizeMedium: clamp(18px, 1.042vw, 20px);
  --fontSizeXl: clamp(22px, 1.302vw, 25px);
  --fontSizeXxl: clamp(30px, 2.344vw, 45px);

  /* LINE-HEIGHT */

  /* --lineHeightXs:; */
  /* --lineHeightSm:; */
  --lineHeightBase: 24px;
  --lineHeightMedium: clamp(22px, 1.563vw, 30px);
  --lineHeightXl: clamp(26px, 2.188vw, 42px);
  --lineHeightXxl: clamp(38px, 2.813vw, 45px);

  /* MARGES */

  --gutterSection: clamp(40px, 3.125vw, 60px);
  --gutterBlocks: clamp(30px, 2.083vw, 40px);

  /* TRANSITION */

  /* --transitionSpeed: 0.3s; */
  /* --transitionEffect:; */

  /* FONTS */

  --mainFont: "Museo Sans";
  /* --secondaryFont: ; */
}

/****************** RESET *****************/

html { scroll-behavior: smooth; }

* {
  margin: 0;
  padding: 0;
  border: 0;
  box-sizing: border-box;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
  /* outline: 1px solid red; */
}

a,
a:hover {
  text-decoration: none;
}

img {
  max-width: 100%;
  max-height: 100%;
  width: 100%;
  height: auto;
  display: block;
}

p,
ul,
ol {
  margin: 0;
  padding: 0;
}

ol,
ul {
  list-style: none;
  padding: 0;
}

/****************** GLOBAL *****************/

body {
  position: relative;
  -webkit-font-smoothing: subpixel-antialiased;
  font-family: var(--mainFont);
  font-size: var(--fontSizeBase);
  line-height: var(--lineHeightBase);
  font-weight: normal;
  color: var(--darkColor);
  background-color: var(--lightColor);
}

/* BOXING */

.boxed-xl {
  padding: 0 20px;
  margin: 0 auto;
}

.boxed-base {
  width: 90vw;
  max-width: 1640px;
  margin: 0 auto;
}

.boxed-sm {
  width: 90vw;
  max-width: 1280px;
  margin: 0 auto;
}

section {
  padding: var(--gutterSection) 0;
  margin: 0 20px;
  border-radius: 10px;
}

.home section:first-child {
  padding-top: 0;
}

section > div > :last-child {
  margin-bottom: 0;
}

main section:last-child:is(.section-dark) {
  margin-bottom: var(--gutterSection);
}

.section-dark {
  background-color: var(--mainColor);
}

.section-light {
  background-color: var(--greyColor);
}

main section:last-child:is(.section-light),
main section:last-child:is(.section-dark) {
  margin-bottom: 20px;
}

/* STYLING TEXTS */

strong {
  font-weight: 700;
}

em {
  font-style: italic;
}

.section-dark .content {
  color: var(--lightColor);
}

.content p,
.content ul,
.content ol {
  margin-bottom: var(--fontSizeBase);
}

.content p:last-child {
  margin-bottom: 0;
}

.content ul li,
.content ol li {
  position: relative;
  padding-left: 20px;
  margin-bottom: 10px;
}

.content ul li {
  padding-left: 0px;
  list-style: disc;
  list-style-position: inside;
}

.content ul li::marker {
  color: var(--orangeColor);
}

.content ol {
  counter-reset: item;
}

.content ol li::before {
  position: absolute;
  content: counter(item) ".";
  font-weight: 700;
  counter-increment: item;
  color: var(--secondaryColor);
  left: 0;
}

.content p a,
.content ul a,
.content ol a,
.content a {
  color: var(--mainColor);
}

.section-dark .content p a,
.section-dark .content ul a,
.section-dark .content ol a,
.section-dark .content a {
  color: var(--blueColor);
}

.content p a:hover,
.content ul a:hover,
.content ol a:hover,
.content a:hover {
  text-decoration: underline;
}

.content h3,
.content h2 {
  margin: var(--gutterBlocks) 0;
}

.content sup {
  vertical-align: text-bottom;
  font-size: 14px;
}

/* HEADINGS */

.content_h1 {
  position: relative;
  font-size: var(--fontSizeXxl);
  line-height: var(--lineHeightXxl);
  font-weight: 900;
  color: var(--lightColor);
  text-transform: uppercase;
  text-wrap:balance;
}

.content_h2,
.content h2 {
  position: relative;
  font-size: var(--fontSizeXl);
  line-height: var(--lineHeightXl);
  font-weight: 900;
  margin-left: 0px;
}

.content_h2:before {
  position: absolute;
  top: 0px;
  left: -20px;
  content: "";
  width: 5px;
  border-radius: 2px;
  height: calc(var(--lineHeightXl));
  background: var(--secondaryColor);
  rotate: -10deg;
}

.content h3 {
  position: relative;
  font-size: var(--fontSizeXl);
  line-height: var(--lineHeightXl);
  color: var(--mainColor);
  font-weight: 900;
  margin-left: 0px;
}

/* BUTTONS */

.form-block .gform_wrapper .gform_footer.top_label .artgo_btn,
.artgo_btn {
  display: inline-flex !important;
  align-items: center !important;
  height: 30px !important;
  font-weight: 900 !important;
  font-size: var(--fontSizeBase) !important;
  padding: 0px 18px !important;
  color: var(--lightColor) !important;
  background: var(--secondaryColor) !important;
  border-radius: 15px !important;
  border: 2px solid var(--secondaryColor) !important;
  width: fit-content !important;
  min-block-size: 30px !important;
}

.form-block .gform_wrapper .gform_footer.top_label .artgo_btn:hover,
.artgo_btn:hover {
  background: var(--mainColor) !important;
  border-color: var(--mainColor) !important;
}

.section-dark .artgo_btn:hover,
.artgo_btn.artgo_btn_border_hover:hover {
  border-color: var(--secondaryColor) !important;
  background: var(--mainColor) !important;
}

.artgo_btn.artgo_btn_v2 {
  height: 50px !important;
  padding: 0px 28px !important;
  font-size: var(--fontSizeXl) !important;
  color: var(--mainColor) !important;
  background: var(--blueColor) !important;
  border: 2px solid var(--blueColor) !important;
  border-radius: 25px !important;
}

.artgo_btn.artgo_btn_v2:hover {
  color: var(--lightColor) !important;
  background: var(--secondaryColor) !important;
  border: 2px solid var(--secondaryColor) !important;
}

/****************** HEADER *****************/

/* Header mobile */

#header-mobile {
  display: none;
}

#show-menu {
  display: none;
  background: none;
  cursor: pointer;
}

#close-menu {
  display: none;
  background: none;
  cursor: pointer;
  position: absolute;
  top: 40px;
  right: calc(5vw + 10px);
}

#close-menu:before,
#close-menu:after {
  position: absolute;
  left: 15px;
  top: 0;
  content: " ";
  height: 33px;
  width: 2px;
  background-color: var(--mainColor);
}

#close-menu:before {
  transform: rotate(45deg);
}

#close-menu:after {
  transform: rotate(-45deg);
}

#open-menu {
  display: none;
  background: none;
  cursor: pointer;
}

#open-menu img {
  height: 20px;
  width: 18px;
}

/* Header content */

.header-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 30px 0;
}

.header-content__logo {
  display: inline-block;
}

.header-content__logo img {
  display: block;
  height: 92px;
  width: auto;
  margin: auto;
}

.header-content__menu {
}

.header-content__nav {
  display: flex;
  gap: 1vw;
}

.header-content__nav > li {
  display: flex;
  align-items: center;
  height: 92px;
}

.header-content__nav > li > a {
  display: flex;
  align-items: center;
  height: 30px;
  font-weight: 900;
  color: var(--mainColor);
  padding: 0px 18px;
  position: relative;
}

.header-content__nav > li:not(.menu_highlight) > a:hover:after {
  position: absolute;
  bottom: -2px;
  left: 18px;
  right: 18px;
  content: "";
  height: 2px;
  border-radius: 1px;
  background: var(--secondaryColor);
  rotate: -3deg;
}

.header-content__nav > li.menu_highlight > a {
  color: var(--lightColor);
  background: var(--secondaryColor);
  border-radius: 15px;
}

.header-content__nav > li.menu_highlight > a:hover {
  background: var(--mainColor);
}

/****************** FOOTER *****************/

footer {
  display: flex;
  gap: 20px;
}

footer > * {
  flex: 1;
}

.footer-left {
  display: flex;
  padding: var(--gutterBlocks) 0;
  background: var(--greyColor);
  align-items: center;
  justify-content: center;
  text-align: center;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 20px;
  border-radius: 10px;
}

.footer-left-text {
  width: 100%;
}

.footer-left-text .content {
  max-width: 600px;
  margin: 0 auto;
  padding: 0 20px;
}

.footer-left__logo {
  display: inline-block;
}

.footer-left__logo img {
  display: block;
  height: 135px;
  width: auto;
  margin: auto;
}

.footer-right {
  display: flex;
  padding: var(--gutterBlocks) 0;
  background: var(--mainColor);
  align-items: center;
  justify-content: center;
  text-align: center;
  flex-direction: column;
  flex-wrap: wrap;
  gap: 20px;
  border-radius: 10px;
  color: var(--lightColor);
}

.footer-right .content {
  padding: 0 20px;
}

.footer-right .content a {
  color: var(--lightColor);
}

.footer-right .reseaux {
  display: flex;
  gap: 15px;
}

.footer-right .reseaux a svg {
  height: 20px;
  width: auto;
}

.footer-right .reseaux a svg path {
  fill: var(--lightColor);
}

.footer-right .reseaux a:hover svg path {
  fill: var(--secondaryColor);
}

.footer-bottom {
  display: flex;
  justify-content: center;
  text-align: center;
  padding: 10px 0;
}

.footer-bottom ul {
  display: flex;
  justify-content: center;
  text-align: center;
  color: var(--mainColor);
}

.footer-bottom ul li:after {
  content: "-";
  display: inline-block;
  padding: 0 3px;
}

.footer-bottom ul li:last-child:after {
  display: none;
}

.footer-bottom ul li a {
  color: var(--mainColor);
}

.footer-bottom ul li a:hover {
  text-decoration: underline;
}

/****************** TOP PAGE *****************/

.top_page {
  position: relative;
  height: 230px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  overflow: hidden;
}

.top_page:before {
  content: "";
  position: absolute;
  background-color: var(--mainColor);
  inset: 0;
  opacity: 0.7;
}

.top_page_breadcrumb {
  position: absolute;
  top: 20px;
  text-align: left;
  color: var(--lightColor);
}

.top_page_breadcrumb a {
  color: var(--lightColor);
}

.top_page_breadcrumb a:hover {
  text-decoration: underline;
}

.top_page_breadcrumb .breadcrumb_last {
  color: var(--orangeColor);
}

.top_page-posts__item {
  margin-top:20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.top_page-posts__item .listing-posts__item__cat {
  position: relative;
  bottom: 0px;
  left: 0px;
}

/****************** FIXED RIGHT *****************/

.fixed-right-elements {
  position: fixed;
  z-index: 6500;
  right: 0;
  top: 30vh;
  display: flex;
  flex-direction: column;
}

.fixed-right-elements a {
  display: flex;
  position: relative;
}

.fixed-right-elements a span:first-child {
  position: absolute;
  z-index: 1000;
  left: 10px;
  right: 0;
  background-color: var(--lightColor);
  white-space: nowrap;
  padding: 0px 30px 0px 20px;
  height: 100%;
  display: flex;
  align-items: center;
  border-top-left-radius: 10px;
  border-bottom-left-radius: 10px;
  transition: all 0.4s;
  opacity: 0;
  border: 1px solid var(--mainColor);
  font-size: var(--fontSizeSm);
  color: var(--mainColor);
  text-transform: uppercase;
  font-weight: 700;
}

.fixed-right-elements a:hover span:first-child {
  right: 56px;
  left: unset;
  opacity: 1;
}

.fixed-right-elements a span:last-child {
  position: relative;
  z-index: 2000;
  display: flex;
  width: 66px;
  height: 66px;
  justify-content: center;
  align-items: center;
  text-align: center;
}

.fixed-right-elements a span svg {
  fill: var(--mainColor);
}

.fixed-right-elements a:first-child span:last-child {
  background: var(--orangeColor);
  border-top-left-radius: 10px;
}

.fixed-right-elements a:last-child span:last-child {
  background: var(--blueColor);
  border-bottom-left-radius: 10px;
}

/****************** INNER BLOCKS *****************/

/* Title block */

.title-block {
  position: relative;
  min-height: 73px;
  margin-left: 40px;
  margin-bottom: var(--gutterBlocks);
}

.title-block h2 {
  font-size: var(--fontSizeXl);
  line-height: var(--lineHeightXl);
  font-weight: 900;
  color: var(--mainColor);
}

.section-dark .title-block h2 {
  color: var(--lightColor);
}

.title-block:before {
  position: absolute;
  top: 0px;
  left: -35px;
  content: "";
  width: 10px;
  border-radius: 5px;
  height: calc(var(--lineHeightXl) + var(--lineHeightBase) + 6px);
  background: var(--secondaryColor);
  rotate: -10deg;
}

.title-block:not(:has(.content)) {
  margin-left: 20px;
  min-height: 42px;
}

.title-block:not(:has(.content)):before {
  position: absolute;
  top: 0px;
  left: -15px;
  content: "";
  width: 5px;
  border-radius: 2px;
  height: calc(var(--lineHeightXl));
  background: var(--secondaryColor);
  rotate: -10deg;
}

/* WYSIWYG block */

.text-block {
  display: flex;
  justify-content: center;
  gap: 5vw;
  margin-bottom: var(--gutterBlocks);
}

.text-block__item {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* btn block */

.btn-block {
  text-align: center;
  margin-bottom: var(--gutterBlocks);
}

/* TEXT / IMG BLOCK */

.text-img-block {
  display: flex;
  justify-content: space-between;
  gap: var(--gutterBlocks);
  flex-direction: var(--text-img-block-orientation);
  margin-bottom: var(--gutterBlocks);
}

.text-img-block__text {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: calc(var(--gutterBlocks) / 2);
}

.text-img-block__text_steps {
  margin-bottom: var(--gutterBlocks);
}

.text-img-block__text_step {
  display: flex;
  gap: var(--gutterBlocks);
  padding-bottom: var(--gutterBlocks);
  align-items: center;
}

.text-img-block__text_step:last-child {
  padding-bottom: 0;
}

.text-img-block__text_step span:first-child {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  background-color: var(--blueColor);
  color: var(--mainColor);
  font-size: var(--fontSizeXl);
  line-height: var(--lineHeightXl);
  font-weight: 900;
  width: 60px;
  height: 60px;
  border-radius: 10px;
}

.text-img-block__text_step span:last-child {
  flex : 1;
  font-size: var(--fontSizeXl);
  line-height: var(--lineHeightXl);
  color: var(--mainColor);
  font-weight: 900;
}

.text-img-block__img {
  flex: 1;
}

.text-img-block__img img {
  border-radius: 10px;
  width: 100%;
}

.text-img-block__img .video-block {
  margin: 0 auto 0 auto;
}

.artgo-h3 {
  font-size: var(--fontSizeXl);
  line-height: var(--lineHeightXl);
  color: var(--mainColor);
  font-weight: 900;
}

.section-dark .artgo-h3__blue{
  color: var(--lightColor);
}

.artgo-h3__blue::after {
  content: " ";
}

.artgo-h3__red {
  color: var(--secondaryColor);
}

/* VIDEO BLOCK */

.video-block {
  position: relative;
  aspect-ratio: 16/9;
  margin: 0 auto var(--gutterBlocks);
}

.video-block a,
.video-block iframe {
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
}

.video-block iframe {
  border: 0;
}

.video-block a::before {
  content: "▶";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 100%;
  height: 50px;
  width: 50px;
  background-color: var(--secondaryColor);
  color: var(--lightColor);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
  /* filter: brightness(0.8); */
  transition: 0.3s;
}
.video-block img {
  object-fit: cover;
  height: 100%;
  width: 100%;
  border-radius: 15px;
  filter: brightness(0.5);
  transition: 0.3s;
}
.video-block:hover a::before {
  /* filter: brightness(1); */
  height: 65px;
  width: 65px;
}

.video-block:hover img {
  filter: brightness(1);
}

/* IMAGE BLOCK */

.image-block {
  margin: 0 auto var(--gutterBlocks) auto;
  display: flex;
  gap: var(--gutterBlocks);
  width: 100%;
}

.image-block__item {
  flex: 1;
  display: flex;
  justify-content: center;
  margin: auto;
  border-radius: 10px;
  overflow: hidden;
}

/* GALLERY BLOCK */

.gallery-block {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--gutterBlocks);
  margin-bottom: var(--gutterBlocks);
}

.gallery-block__item {
  position: relative;
  overflow: hidden;
  aspect-ratio: 500 / 300;
  border-radius: 10px;
}

.gallery-block__item--hover {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  background-color: rgba(12, 31, 95, 0.5);
  transition: opacity 0.3s ease;
}

.gallery-block__item--hover img {
  width: 50px;
}

.gallery-block__item:hover .gallery-block__item--hover {
  opacity: 1;
}

.gallery-block__item > img {
  object-fit: cover;
  width: 100%;
  height: 100%;
  /* transition: var(--transitionSpeed); */
}

/* LIGHT BOX */

.sl-wrapper {
  z-index: 9999;
}

.sl-overlay {
  background: var(--mainColor);
  z-index: 9400;
}

.sl-wrapper .sl-close,
.sl-wrapper .sl-navigation button,
.sl-wrapper .sl-counter {
  color: var(--lightColor);
}

.sl-next div,
.sl-prev div {
  background-color: var(--blueColor);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 25px;
  height: 50px;
  width: 50px;
  transition: 0.3s ease;
}

.sl-next div:hover,
.sl-prev div:hover {
  background-color: var(--secondaryColor);
}

/* FORM BLOCK */

.grecaptcha-badge {
  display: none !important;
  visibility: hidden !important;
}

.form-block {
  max-width: 900px;
  margin: auto;
  margin-bottom: var(--gutterBlocks);
  background-color: var(--greyColor);
  color: var(--mainColor);
  padding: var(--gutterSection);
  border-radius: 20px;
}

.form-block .gform_wrapper .gfield_label {
  font-weight: 700 !important;
  color: var(--mainColor);
}

.form-block .gform_wrapper .gfield_required {
  display: inline-block;
  color: var(--mainColor);
}

.form-block .gform_wrapper .ginput_container_email input,
.form-block .gform_wrapper .ginput_container_text input,
.form-block .gform_wrapper .ginput_container_phone input,
.form-block .gform_wrapper .ginput_container_select select,
.form-block .gform_wrapper .ginput_container_textarea textarea {
  background-color: transparent;
  outline: none;
  color: var(--mainColor);
  border: 1px solid var(--mainColor);
  border-radius: 5px;
  padding: 10px 15px !important;
}

.form-block .gform_wrapper .ginput_container_select select {
  padding: 0 15px !important;
  cursor: pointer;
  background-image: url(./assets/images/chevron-down.svg);
}

.form-block .gform_wrapper .ginput_container_select select > * {
  background-color: var(--mainColor);
  color: var(--secondaryColor);
}

.form-block .gform_wrapper .ginput_container_textarea textarea {
  min-block-size: 150px !important;
}

.form-block .gform_wrapper .ginput_container_email input::placeholder,
.form-block .gform_wrapper .ginput_container_text input::placeholder,
.form-block .gform_wrapper .ginput_container_phone input::placeholder,
.form-block
  .gform_wrapper
  .ginput_container_select
  select
  option.gf_placeholder,
.form-block .gform_wrapper .ginput_container_textarea textarea::placeholder {
  opacity: 0.8;
}

.form-block .gform_wrapper .ginput_container_email input:focus,
.form-block .gform_wrapper .ginput_container_text input:focus,
.form-block .gform_wrapper .ginput_container_phone input:focus,
.form-block .gform_wrapper .ginput_container_select select:focus,
.form-block .gform_wrapper .ginput_container_textarea textarea:focus {
  outline: 2px solid var(--greyColor);
}

.form-block .gform_wrapper div.gform_drop_area {
  border: 1px dashed var(--mainColor);
  border-radius: 3px;
  background: transparent;
  color: var(--mainColor);
}

.form-block .gform_wrapper div.gform_drop_area::before {
  color: var(--mainColor);
}

.form-block
  .gform_wrapper
  div.gform_drop_area
  button[type="button"].gform_button_select_files {
  background: var(--mainColor);
  color: var(--lightColor);
  text-transform: uppercase;
  border: 1px solid var(--lightColor);
  padding: 10px 20px;
  border-radius: 2px;
  cursor: pointer;
}

.form-block
  .gform_wrapper
  div.gform_drop_area
  button[type="button"].gform_button_select_files:hover {
  background: var(--lightColor);
  color: var(--mainColor);
}

.form-block .gform_wrapper span.gfield_description,
.form-block .gform_wrapper .ginput_preview span.gfield_fileupload_percent,
.form-block .gform_wrapper .ginput_preview span.gfield_fileupload_filename,
.form-block .gform_wrapper .ginput_preview span.gfield_fileupload_filesize,
.form-block
  .gform_wrapper
  div.ginput_preview
  button.gform_delete_file
  span.dashicons.dashicons-trash:before {
  color: var(--mainColor) !important;
}

.form-block
  .gform_wrapper
  .ginput_preview
  span.gfield_fileupload_progressbar_progress {
  background-color: var(--orangeColor);
}

.grecaptcha-badge {
  display: none !important;
  visibility: hidden !important;
}

.form-block .gform_wrapper .gfield_consent_label {
  color: var(--mainColor);
}

.form-block
  .gform_wrapper
  input[type="checkbox"]:where(
    :not(.gform-theme__disable):not(.gform-theme__disable *):not(
        .gform-theme__disable-framework
      ):not(.gform-theme__disable-framework *)
  )::before {
  color: var(--mainColor);
}

/* SLIDER BLOCK */

.slider-block-wrapper {
  position: relative;
  margin-bottom: var(--gutterBlocks);
}

.slider-block-wrapper .slider-block__controls {
  display: flex;
  justify-content: flex-end;
  gap: 15px;
  margin-bottom: 15px;
}

.slider-block-wrapper
  .slider-block__controls.slider-block__controls_desktop_hidden {
  display: none;
}

.swiper-button-next-custom,
.swiper-button-prev-custom {
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 3px solid transparent;
  background-color: var(--mainColor);
}

.section-dark .swiper-button-next-custom,
.section-dark .swiper-button-prev-custom {
  background-color: var(--greyColor);
}

.swiper-button-next-custom:hover,
.swiper-button-prev-custom:hover {
  background-color: var(--secondaryColor);
}

.slider-block-wrapper .swiper-pagination {
  bottom: calc(var(--gutterBlocks) * -1) !important;
  z-index: 1;
}

.slider-block-wrapper .swiper-pagination-bullet {
  width: 10px;
  height: 10px;
  border-radius: 0;
  background-color: var(--mainColor);
  opacity: 1;
}

.slider-block-wrapper .swiper-pagination-bullet-active {
  background-color: var(--secondaryColor);
}

.slider-block__item {
  padding: 25px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: auto;
  color: var(--darkColor);
  border: 1px solid var(--mainColor);
  border-radius: 10px;
}

.section-dark .slider-block__item {
  background-color: var(--lightColor);
}

.slider-block__item img {
  width: auto;
  max-height: 125px;
  margin: auto;
}

.slider-block__item_titre {
  text-transform: uppercase;
  font-weight: 700;
  color: var(--blueColor);
  margin-top: 10px;
}

.slider-block__item_sous_titre {
  margin-top: 4px;
}

/* GRILLE BLOCK */

.grille-block {
  position: relative;
  margin-bottom: var(--gutterBlocks);
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
}

.grille-block__item {
  border: 2px dashed var(--mainColor);
  border-radius: 10px;
  padding: var(--gutterBlocks);
  display: flex;
  flex-direction: column;
  gap: 20px;
  width: calc(33% - 10px);
}

.section-dark .grille-block__item {
  border: 2px dashed var(--lightColor);
}

.grille-block__item img {
  width: auto;
  max-width: 100%;
  height: 60px;
}

.grille-block__item_titre {
  color: var(--blueColor);
  color: var(--mainColor);
  text-transform: uppercase;
  font-weight: 700;
}

.section-dark .grille-block__item_titre {
  color: var(--blueColor);
}

.grille-block__item_texte {
  color: var(--mainColor);
}

.section-dark .grille-block__item_texte {
  color: var(--lightColor);
}

/* PUSH BLOCK */

.push-block {
  position: relative;
  margin-bottom: var(--gutterBlocks);
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
  border-radius: 10px;
  background-color: var(--greyColor);
  border: 2px solid var(--greyColor);
}

.push-block-left {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  width: calc(25% - 10px);
  padding: var(--gutterBlocks);
  border-top-left-radius: 10px;
  border-bottom-left-radius: 10px;
  overflow: hidden;
}

.push-block-left img {
  max-height: 170px;
  width: auto;
}

.boxed-base .push-block-left,
.boxed-sm .push-block-left {
  background-color: var(--lightColor);
}

.push-block-right {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  width: calc(75% - 10px);
  padding: var(--gutterBlocks);
}

.push-block-right.content {
  font-size: var(--fontSizeMedium);
  line-height: var(--lineHeightMedium);
}

.section-dark .push-block-right.content {
  color: var(--darkColor);
}

.section-light .push-block-left,
.section-light .push-block-right {
  padding-top: 0;
  padding-bottom: 0;
}

/* GRILLE COULEUR BLOCK */

.grille-couleur-block {
  position: relative;
  margin-bottom: var(--gutterBlocks);
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
}

.grille-couleur-block__item {
  border-radius: 10px;
  overflow: hidden;
  display: flex;
  flex-wrap: wrap;
  width: calc(50% - 10px);
}

.grille-couleur-block__item_id_tg {
  flex-direction: row-reverse;
}

.grille-couleur-block__item_dark {
  background-color: var(--mainColor);
  color: var(--lightColor);
}

.grille-couleur-block__item_orange {
  background-color: var(--orangeColor);
  color: var(--darkColor);
}

.grille-couleur-block__item_light {
  background-color: var(--blueColor);
  color: var(--darkColor);
}

.grille-couleur-block__item_default {
  background-color: var(--greyColor);
  color: var(--darkColor);
}

.grille-couleur-block__item_img {
  width: 35%;
}

.grille-couleur-block__item_img img {
  object-fit: cover;
  height: 100%;
  width: 100%;
}

.grille-couleur-block__item_content {
  width: 65%;
  padding: var(--gutterBlocks);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.grille-couleur-block__item_logo img {
  height: 35px;
  width: auto;
}

.grille-couleur-block__item_titre {
  text-transform: uppercase;
  color: var(--mainColor);
  font-weight: 700;
  margin-top: 10px;
}

.grille-couleur-block__item_dark .grille-couleur-block__item_titre,
.section-dark .grille-couleur-block__item_titre {
  color: var(--lightColor);
}

.grille-couleur-block__item_texte {
  margin-top: 10px;
}

.grille-couleur-block__item_auteur {
  margin-top: auto;
}

/* PICTOGRAMMES BLOCK */

.pictogrammes-block {
  position: relative;
  margin-bottom: var(--gutterBlocks);
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
}

.pictogrammes-block-left {
  background-color: var(--blueColor);
  border-radius: 10px;
  overflow: hidden;
  width: calc(50% - 10px);
  padding: var(--gutterBlocks) calc(var(--gutterBlocks) * 1.5);
  height: fit-content;
}

.pictogrammes-block-right {
  background-color: var(--orangeColor);
  border-radius: 10px;
  overflow: hidden;
  width: calc(50% - 10px);
  padding: var(--gutterBlocks) calc(var(--gutterBlocks) * 1.5);
  margin-top: var(--gutterBlocks);
}

.pictogrammes-block-titre {
  font-size: var(--fontSizeXl);
  line-height: var(--lineHeightXl);
  font-weight: 900;
  color: var(--mainColor);
  margin-bottom: 30px;
}

.section-dark .pictogrammes-block .content {
  color: var(--darkColor);
}

.pictogrammes-block-right-el {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  column-gap: 20px;
  row-gap: 10px;
}

.pictogrammes-block-right-el_inner {
  display: flex;
  gap: 20px;
}

.pictogrammes-block-right-el_inner_left {
  width: 35px;
  min-width: 35px;
  max-width: 35px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.pictogrammes-block-right-el_inner_left img {
  max-height: 34px;
}

.pictogrammes-block-right-el_inner_right {
  display: flex;
  align-items: center;
}

/* PARALLAX BLOCK */

.parallax-block {
  position: relative;
  margin-bottom: var(--gutterBlocks);
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: fixed;
  border-radius: 30px 10px;
  overflow: hidden;
}

.boxed-xl .parallax-block {
  margin-left: -20px;
  margin-right: -20px;
}

.parallax-block:before {
  content: "";
  position: absolute;
  z-index: 1000;
  inset: 0;
  background: #0da6f2;
  opacity: 0.6;
}

.parallax-block-top {
  position: relative;
  z-index: 2000;
  color: var(--lightColor);
  margin-bottom: 250px;
  width: 70%;
  background-color: var(--mainColor);
  padding: calc(var(--gutterBlocks) * 1.5) calc(var(--gutterBlocks) * 2);
  border-bottom-right-radius: 100px;
}

.parallax-block-top .title-block h2 {
  color: var(--lightColor);
}

.parallax-block-pictogrammes_push {
  display: flex;
  gap: var(--gutterBlocks);
  flex-wrap: wrap;
}

.parallax-block-pictogrammes_push_inner {
  flex: 1;
  padding: 30px;
  border: 2px dashed #ffffff;
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.parallax-block-pictogrammes_push_img {
}

.parallax-block-pictogrammes_push_img img {
  height: 50px;
  width: auto;
}

.parallax-block-pictogrammes_push_titre {
  text-transform: uppercase;
  font-weight: 900;
}

.parallax-btn-block {
  margin-top: var(--gutterBlocks);
  text-align: center;
}

.parallax-block-bottom {
  position: relative;
  z-index: 2000;
  width: 70%;
  margin-left: 30%;
  background-color: var(--lightColor);
  padding: calc(var(--gutterBlocks) * 1.5) calc(var(--gutterBlocks) * 2);
  border-top-left-radius: 100px;
}

.parallax-block-pictogrammes {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  column-gap: 20px;
  row-gap: 20px;
}

.parallax-block-pictogrammes_inner {
  display: flex;
  gap: 20px;
}

.parallax-block-pictogrammes_img {
  width: 70px;
  min-width: 70px;
  max-width: 70px;
  display: flex;
  align-items: center;
}

.parallax-block-pictogrammes_img img {
  height: 60px;
  width: auto;
}

.parallax-block-pictogrammes_titre {
  display: flex;
  align-items: center;
}

/* PUSH POST BLOCK */

.push-post-block {
  position: relative;
  margin-bottom: var(--gutterBlocks);
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
}

.listing-posts__item {
  width: calc(33% - 10px);
  background-color: var(--greyColor);
  border-radius: 10px;
  overflow: hidden;
  color: var(--mainColor);
}

.listing-posts__item__img {
  position: relative;
}

.listing-posts__item__img img {
  aspect-ratio: 5/4;
}

.listing-posts__item__cat {
  position: absolute;
  bottom: 15px;
  left: 15px;
  display: flex;
  gap: 15px;
}

.listing-posts__item__cat span {
  font-size: var(--fontSizeSm);
  text-transform: uppercase;
  font-weight: 700;
  height: 30px;
  padding: 0 15px;
  border-radius: 15px;
  display: flex;
  align-items: center;
}

.listing-posts__item__meta {
  padding: 10px 20px;
  font-size: var(--fontSizeSm);
  font-style: italic;
}

.listing-posts__item__title {
  padding: 0px 20px;
  font-size: var(--fontSizeXl);
  line-height: 1.3;
  font-weight: 900;
}

.listing-posts__item .content {
  padding: 10px 20px 0px 20px;
  color: var(--darkColor);
}

.listing-posts__item__btn {
  padding: 10px 20px 20px 20px;
  display: flex;
  align-items: center;
}

.listing-posts__item__btn span:first-child {
  font-size: var(--fontSizeMedium);
  line-height: var(--lineHeightMedium);
  font-weight: 900;
  color: var(--secondaryColor);
}

.listing-posts__item__btn span:last-child {
  margin-left: 10px;
  width: 30px;
  height: 30px;
  border-radius: 15px;
  background-color: var(--secondaryColor);
  color: var(--lightColor);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.listing-posts__item__btn span:last-child svg {
  height: 14px;
  width: auto;
}

.listing-posts__item__btn span:last-child svg path {
  fill: var(--lightColor);
}

.listing-posts__item:hover .listing-posts__item__btn span:first-child {
  color: var(--mainColor);
}

.listing-posts__item:hover .listing-posts__item__btn span:last-child {
  background-color: var(--mainColor);
}


/* SOMMAIRE BLOCK */

.sommaire-block {
  margin-bottom: var(--gutterBlocks);
  max-width: 900px;
  margin-left: auto;
  margin-right: auto;
}

ol.sommaire-block-inner {
  padding-left: 0px;
  padding-right: 0px;
  list-style: none;
   counter-reset: item;
}

ol.sommaire-block-inner li {
  margin-bottom: 10px;
  counter-increment: item;
}

ol.sommaire-block-inner li:last-child {
  margin-bottom: 0;
}

ol.sommaire-block-inner li a {
  color: var(--mainColor);
  text-decoration: none;
  font-weight: 700;
}

ol.sommaire-block-inner li a:hover {
  color: var(--secondaryColor);
}

ol.sommaire-block-inner li::before {
  content: counter(item) ". ";
  font-weight: 700;
  margin-right: 10px;
  color: var(--secondaryColor);
}

.ancre_cible {
  scroll-margin-top: 30px;
}

/* PAGE NAVI */

.wp-pagenavi {
  display: flex;
  justify-content: center;
  margin: var(--gutterBlocks) 0;
}

.wp-pagenavi .current,
.wp-pagenavi .page,
.wp-pagenavi .nextpostslink,
.wp-pagenavi .previouspostslink {
  width: 30px;
  height: 30px;
  display: flex;
  justify-content: center;
  align-items: center;
  color: var(--darkColor);
  font-size: var(--fontSizeBase);
}

.wp-pagenavi .pages {
  display: none;
}

.wp-pagenavi .nextpostslink,
.wp-pagenavi .previouspostslink {
  width: auto;
}

.wp-pagenavi span.current {
  border: 1px solid var(--secondaryColor);
  background: none;
  border-radius: 50%;
}

.wp-pagenavi a:hover {
  color: var(--secondaryColor);
}

.wp-pagenavi a,
.wp-pagenavi span {
  text-decoration: none;
  border: none;
  padding: 3px 5px;
  margin: 2px;
}

/* HEADER HOME */

.boxed-xl .header_home {
  margin-left: -20px;
  margin-right: -20px;
}

.header_home {
  position: relative;
  height: 80vh;
  min-height: 550px;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  color: var(--lightColor);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: var(--gutterBlocks);
  border-radius: 10px;
  overflow: hidden;
  padding-bottom: 150px;
}

.header_home:before {
  content: "";
  position: absolute;
  inset: 0;
  background-color: rgba(12, 31, 95, 0.7);
}

.header_home_inner {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: var(--gutterBlocks);
  padding-left: 20px;
  padding-right: 20px;
}

.header_home h1 {
  font-size: var(--fontSizeXxl);
  line-height: var(--lineHeightXxl);
  font-weight: 900;
}

.header_home_top_content {
  font-size: var(--fontSizeMedium);
  font-weight: 700;
  max-width: 900px;
}

.header_home_bottom {
  position: relative;
  z-index: 3000;
  display: flex;
  gap: var(--gutterBlocks);
  margin-top: -150px;
  margin-bottom: var(--gutterBlocks);
}

.header_home_bottom_inner {
  flex: 1;
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

.header_home_bottom_left {
  width: calc(35% - 10px);
  border-radius: 10px;
  overflow: hidden;
}

.header_home_bottom_left img {
  object-fit: cover;
  height: 100%;
}

.header_home_bottom_right {
  background-color: var(--lightColor);
  padding: 30px;
  width: calc(65% - 10px);
  border-radius: 10px;
  overflow: hidden;
}

.header_home_bottom_right .content {
  font-size: var(--fontSizeMedium);
  line-height: var(--lineHeightMedium);
  margin-bottom: 20px;
}

/****************** PAGE CONTACT *****************/

.contact_block {
  display: flex;
  gap: var(--gutterBlocks);
}

.contact_block_left {
  flex: 1;
}

.contact_block_right {
  flex: 1;
}

.ukbc-contact-title {
  font-size: var(--fontSizeXl);
  line-height: var(--lineHeightXl);
  color: var(--mainColor);
  font-weight: 900;
  margin-bottom: 20px;
}

.ukbc-contact-flex {
  display: flex;
  margin-bottom: 30px;
}

.ukbc-contact-flex span:first-child {
  flex-basis: 35px;
  padding-top: 4px;
}

.ukbc-contact-flex span:first-child svg {
  height: auto;
  width: 20px;
}

.contact_block .content a {
  color: var(--darkColor);
}

.contact_block .ukbc-contact-adresse .content a {
  text-decoration: underline;
}

.ukbc-contact-network {
  display: flex;
  gap: 15px;
  margin-bottom: var(--gutterBlocks);
}

.ukbc-contact-network a svg {
  height: 24px;
  width: auto;
}

.ukbc-contact-network a svg path {
  fill: var(--secondaryColor);
}

.ukbc-contact-network a:hover svg path {
  fill: var(--mainColor);
}

/****************** RESPONSIVE *****************/

@media only screen and (max-width: 1380px) {
  /****************** INNER BLOCKS *****************/

  /* PICTOGRAMMES BLOCK */

  .pictogrammes-block-left {
    width: calc(40% - 10px);
  }

  .pictogrammes-block-right {
    width: calc(60% - 10px);
  }

  /* PARALLAX BLOCK */

  .parallax-block-top {
    width: 80%;
  }

  .parallax-block-bottom {
    width: 80%;
    margin-left: 20%;
  }
}

@media only screen and (max-width: 1280px) {
  /****************** INNER BLOCKS *****************/

  /* GRILLE BLOCK */

  .grille-block__item {
    width: calc(50% - 10px);
  }

  .slider-block-wrapper
    .slider-block__controls.slider-block__controls_desktop_hidden {
    display: flex;
  }

  /* GRILLE COULEUR BLOCK */

  .grille-couleur-block__item_img {
    width: 40%;
  }

  .grille-couleur-block__item_content {
    width: 60%;
  }

  /* PICTOGRAMMES BLOCK */

  .pictogrammes-block {
    flex-direction: column;
  }

  .pictogrammes-block-left {
    width: 100%;
    padding: var(--gutterBlocks);
  }

  .pictogrammes-block-right {
    margin-top: 0px;
    width: 100%;
    padding: var(--gutterBlocks);
  }

  /* PARALLAX BLOCK */

  .parallax-block-top {
    width: 90%;
  }

  .parallax-block-bottom {
    width: 90%;
    margin-left: 10%;
  }

  .parallax-block-pictogrammes {
    grid-template-columns: repeat(3, 1fr);
  }

  /* PUSH POST BLOCK */

  .listing-posts__item {
    width: calc(50% - 10px);
  }

  .push-post-block-inner-block .listing-posts__item:last-child {
    display: none;
  }

  /* HEADER HOME */

  .header_home_bottom_inner {
    flex: 1;
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
  }

  .header_home_bottom_left {
    width: 100%;
  }

  .header_home_bottom_left img {
    width: 100%;
    height: 400px;
  }

  .header_home_bottom_right {
    width: 100%;
    padding: 20px;
  }
}

@media only screen and (max-width: 991px) {

  .boxed-sm, 
  .boxed-base {
    max-width: 100%;
  }
  
  .section-light .boxed-base,
  .section-light .boxed-sm,
  .section-dark .boxed-base,
  .section-dark .boxed-sm {
    margin: 0 20px;
    width: calc(90vw - 40px);
    max-width: calc(100% - 40px);
  }

  .section-light .boxed-base:first-child .text-img-block:first-child first-child,
  .section-light .boxed-sm:first-child .text-img-block:first-child first-child,
  .section-dark .boxed-base:first-child .text-img-block:first-child first-child,
  .section-dark .boxed-sm:first-child .text-img-block:first-child first-child {
    margin-top:-20px;
  }

  /****************** HEADER *****************/

  .header-content__logo img {
    display: block;
    height: 50px;
    width: auto;
    margin: auto;
  }

  .header-content__menu {
    display: none;
  }

  #show-menu {
    display: block;
  }

  .burger-icon span {
    display: block;
    width: 35px;
    height: 4px;
    border-radius: 2px;
    background-color: var(--mainColor);
    margin: 6px 0;
  }

  .header-content-active {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    position: fixed;
    z-index: 7000;
    background-color: var(--lightColor);
    inset: 0;
    width: 100%;
    max-width: 100%;
  }

  .header-content-active .header-content__logo img {
    height: 70px;
  }

  .header-content-active .header-content__menu {
    display: block;
  }

  .header-content-active #close-menu {
    display: block;
    width: 32px;
    height: 32px;
  }

  .header-content-active #show-menu {
    display: none;
  }

  .header-content-active .header-content__nav {
    flex-direction: column;
    gap: 20px;
    margin-top: 30px;
  }

  .header-content__nav > li {
    height: auto;
    justify-content: center;
    align-items: center;
  }

  /****************** TOP PAGE *****************/

  .top_page {
    height: auto;
    flex-direction: column;
    padding: 30px;
  }
  
  .top_page_breadcrumb {
    top:0;
    left: 0px;
    width: 100%;
    position: relative;
    margin-bottom: 20px;
  }

  /****************** FIXED RIGHT *****************/

  .fixed-right-elements {
    top: auto;
    bottom: 50px;
  }
  
  .fixed-right-elements a:hover span:first-child {
    left: 10px;
    right: 0;
    opacity: 0;
  }

  /****************** FOOTER *****************/

  footer {
    flex-direction: column;
  }

  .footer-right .content span {
    display: block;
  }

  .footer-right .content span.footer-right-hidden {
    display: none;
  }

  .footer-bottom ul {
    font-size: 10px;
    line-height: 12px;
  }

  /****************** INNER BLOCKS *****************/

  .text-block {
    flex-direction: column;
  }

  /* INNER BLOCKS RESPONSIVE */

  .text-img-block {
    flex-direction: column-reverse;
  }

  .text-img-block__txt,
  .text-img-block__img {
    width: 100%;
  }
  .text-img-block a.artgo_btn {
    margin-left: auto;
    margin-right: auto;
  }

  /* IMAGE BLOCK */

  .image-block {
    flex-direction: column;
  }

  /* PUSH BLOCK */

  .push-block {
    flex-direction: column;
  }

  .push-block-left {
    width: 100%;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    border-bottom-left-radius: 0px;
  }

  .push-block-right {
    padding: 0 var(--gutterBlocks) var(--gutterBlocks) var(--gutterBlocks);
    width: 100%;
  }

  .section-light .push-block-left,
  .section-light .push-block-right {
    padding-left: 0;
    padding-right: 0;
  }

  /* GRILLE COULEUR BLOCK */

  .grille-couleur-block__item {
    flex-direction: column;
    width: 100%;
  }

  .grille-couleur-block__item_id_tg {
    flex-direction: row;
  }

  .grille-couleur-block__item_img {
    width: 100%;
  }

  .grille-couleur-block__item_img img {
    aspect-ratio: 4/2;
  }

  .grille-couleur-block__item_content {
    width: 100%;
  }

  /* PARALLAX BLOCK */

  .parallax-block {
    border-radius: 10px 10px;
    background-image: none !important;
  }

  .parallax-block-top {
    width: 100%;
    border-radius: 0;
    margin-bottom: 0;
    padding: var(--gutterBlocks);
  }

  .parallax-block-bottom {
    margin-top: 0;
    width: 100%;
    margin-left: 0%;
    border-radius: 0;
    padding: var(--gutterBlocks);
  }

  .parallax-block-pictogrammes {
    grid-template-columns: repeat(2, 1fr);
  }

  /* HEADER HOME */

  .header_home_bottom_left img {
    height: 300px;
  }

  .header_home_bottom_inner {
    flex-direction: column-reverse;
  }

  /****************** PAGE CONTACT *****************/

  .contact_block {
    flex-direction: column-reverse;
  }
}

@media only screen and (max-width: 768px) {
  /****************** INNER BLOCKS *****************/

  /* GRILLE BLOCK */

  .grille-block__item {
    width: calc(100%);
  }

  /* PARALLAX BLOCK */
  .parallax-block-pictogrammes_push {
    flex-direction: column;
  }

  .parallax-block-pictogrammes {
    grid-template-columns: repeat(1, 1fr);
  }

  /* PUSH POST BLOCK */

  .push-post-block {
    flex-direction: column;
  }

  .listing-posts__item {
    width: 100%;
  }

  /* HEADER HOME */

  .header_home_bottom {
    flex-direction: column;
  }
}

@media only screen and (max-width: 576px) {
  /* PICTOGRAMMES BLOCK */

  .pictogrammes-block-right-el {
    grid-template-columns: repeat(1, 1fr);
  }
}






.popup_mask {
  background: rgba(255, 255, 255, 0.7);
  position: fixed;
  z-index: 10000;
  inset: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}

.popup__content {
  position: relative;
  width: 100%;
  max-width: 800px;
  background-color: var(--mainColor);
  box-shadow: 0px 0px 30px #2F2F2F80;
  border-radius: 10px;
  opacity: 1;
  padding: 70px 30px;
  color:var(--lightColor);
}

.popup__close {
  position: absolute;
  top: 20px;
  right: 20px;
  width: 32px;
  height: 32px;
  cursor: pointer;
  background-color: transparent;
  border: none;
}

.popup__inner_top {
  text-align: center;
}

.popup__inner_top span {
  display: inline-block;
  position: relative;
  font-size: var(--fontSizeXl);
  line-height: var(--lineHeightXl);
  font-weight: 900;
  margin-left: 0px;
  text-align: center;
}

.popup__inner_top span:before {
  position: absolute;
  top: 0px;
  left: -20px;
  content: "";
  width: 5px;
  border-radius: 2px;
  height: calc(var(--lineHeightXl));
  background: var(--secondaryColor);
  rotate: -10deg;
}

.popup__inner {
  padding-top: 40px;
  display: flex;
  gap: 30px;
}

.popup__inner_left {
  flex: 1;
}

.popup__inner_left_subtext {
  color: #0DD4F2;
  text-transform: uppercase;
  font-weight: 700;
}

.popup__inner_left_subtext_center {
  text-align: center;
}

.popup__inner_right {
  flex: 1;
  position: relative;
}

.popup__inner_right img {
  position: absolute;
  object-fit: cover;
  border-radius: 10px;
}

.popup__inner_bottom {
  padding-top: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
}


@media only screen and (max-width: 992px) {

  .popup__inner {
    flex-direction: column;
  }

  .popup__content {
    margin: 20px;
  }

  .popup__inner_right {
    display: none;
  }

}