/*!
Theme Name: School;Lab
Theme URI: http://underscores.me/
Author: Romain Cailteux
Author URI: http://underscores.me/
Description: Description
Version: 1.0.0
Tested up to: 8.3
Requires PHP: 8.3
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: school_lab
Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned.

school_lab is based on Underscores https://underscores.me/, (C) 2012-2020 Automattic, Inc.
Underscores is distributed under the terms of the GNU GPL v2 or later.

Normalizing styles have been helped along thanks to the fine work of
Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/
*/

/* ---------------------- 
Reset CSS
---------------------- */
  html, body, div, span, applet, object, iframe,
  h1, h2, h3, h4, h5, h6, p, blockquote, pre,
  a, abbr, acronym, address, big, cite, code,
  del, dfn, em, img, ins, kbd, q, s, samp,
  small, strike, strong, sub, sup, tt, var,
  b, u, i, center,
  dl, dt, dd, ol, ul, li,
  fieldset, form, label, legend,
  table, caption, tbody, tfoot, thead, tr, th, td,
  article, aside, canvas, details, embed, 
  figure, figcaption, footer, header, hgroup, 
  menu, nav, output, ruby, section, summary,
  time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font-family: 'Sharp Sans', sans-serif;
    vertical-align: baseline;
  }
  /* HTML5 display-role reset for older browsers */
  article, aside, details, figcaption, figure, 
  footer, header, hgroup, menu, nav, section {
    display: block;
  }
  body {
    line-height: 1;
  }
  ol, ul {
    list-style: none;
  }
  blockquote, q {
    quotes: none;
  }
  blockquote:before, blockquote:after,
  q:before, q:after {
    content: '';
    content: none;
  }
  table {
    border-collapse: collapse;
    border-spacing: 0;
  }
  em {
    font-style: italic;
  }
  strong {
    font-weight: bold;
  }
  * {
  -webkit-font-smoothing: antialiased;
  text-decoration: none;
  font-family: 'Sharp Sans', sans-serif;
  }
  mark {
    background-color: transparent !important;
  }

/* ---------------------- 
Font Family :  
---------------------- */

  @font-face {
    font-family: Sharp Sans;
    src: local("Sharp Sans Medium"),
         local("SharpSans-Medium"),
         url(assets/font/SharpSansMedium.otf);
    font-weight: 500;
  }
  @font-face {
    font-family: Sharp Sans;
    src: local("Sharp Sans Semi Bold"),
         local("SharpSans-SemiBold"),
         url(assets/font/SharpSansSemibold.otf);
    font-weight: 600;
  }
  @font-face {
    font-family: Sharp Sans;
    src: local("Sharp Sans Bold"),
         local("SharpSans-Bold"),
         url(assets/font/SharpSansBold.otf);
    font-weight: 700;
  }


/* ---------------------- 
Default CSS  
---------------------- */

  body {
    font-family: 'Sharp Sans', sans-serif;
    font-size: 16px;
    line-height: 24px;
    font-weight: 600;
    color: #24201F;
  }

  a {color:inherit;}

  /** ====> Color Style *****/
  .blue {color: #0F0D2D;}
  .black {color:#24201F;}
  .beige {color:#FEFAF2;}
  .low-beige {color: #F6F0E6;}
  .dark-beige {color:#DED7CA;}
  .white {color: #FFFFFF;}
  .green {color: #409E75;}
  .purple {color: #6053FF;}
  .pink {color: #D7A3E5;}
  .red {color: #D92D47;}
  .darkgrey {color: #616161;}
  .redError {color:#B84242;}
  .orangeError {color: #DB5937;}

  /** ====> Background Color Style *****/
  .bg-white {background-color: #FFFFFF;}
  .bg-blue {background-color: #0F0D2D;}
  .bg-black {background-color: #24201F;}
  .bg-beige {background-color: #FEFAF2;}
  .bg-light-grey {background-color: #F5F5F3;}
  .bg-low-beige {background-color: #F6F0E6;}
  .bg-dark-beige {background-color:#DED7CA;}

  /** ====> Typography Style *****/
  h1 {font-size: 68px;line-height: 75px;}
  h2 {font-size: 49px;line-height: 56px;}
  h3 {font-size: 32px;line-height: 40px;}
  .xlarge-text {font-size: 24px;line-height: 32px;}
  .slarge-text {font-size: 22px; line-height: 30px;}
  .xslarge-text {font-size: 21px; line-height: 30px;}
  .large-text {font-size: 20px;line-height: 28px;}
  .medium-text {font-size: 18px;line-height: 26px;}
  .xnormal-text {font-size: 17px;line-height: 25px;}
  .normal-text {font-size: 16px;line-height: 24px;}
  .small-text {font-size: 14px;line-height: 22px;}
  .tiny-text {font-size: 13px;line-height: 17px;}
  .xtiny-text {font-size: 12px;line-height: 16px;}

  /** ====> Font Weight Style *****/  
  .bold {font-weight: 700;}
  .semi-bold {font-weight: 600;}
  .medium {font-weight: 500;}
  .italic {font-style: italic;}

  /** ====> Special Style *****/
  .TT {text-transform: uppercase;}
  .ls-80 {letter-spacing: 0.08em;}
  .nav-text {font-size: 15px;line-height: 23px;}
  .block {display:block;}
  .separator {width:100%;height: 1px;background-color: rgba(15, 13, 45, 0.25);}
  .error-input {box-shadow: rgba(184, 66, 66, 1) 0px 0px 0px 2px inset !important;}
  .alert-input {box-shadow: rgb(219 89 55) 0px 0px 0px 2px inset !important;}

  /** ====> Line Clamp CSS *****/
  .clamp {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .clamp.ln1 {-webkit-line-clamp: 1;}
  .clamp.ln2 {-webkit-line-clamp: 2;}
  .clamp.ln3 {-webkit-line-clamp: 3;}
  .clamp.ln4 {-webkit-line-clamp: 4;}
  .clamp.ln5 {-webkit-line-clamp: 5;}
  .clamp.ln6 {-webkit-line-clamp: 6;}
  .clamp.ln7 {-webkit-line-clamp: 7;}
  .clamp.ln8 {-webkit-line-clamp: 8;}
  .clamp.ln9 {-webkit-line-clamp: 9;}
  .clamp.ln10 {-webkit-line-clamp: 10;}

  .clamp.ln1:hover,
  .clamp.ln2:hover,
  .clamp.ln3:hover,
  .clamp.ln4:hover,
  .clamp.ln5:hover,
  .clamp.ln6:hover,
  .clamp.ln7:hover,
  .clamp.ln8:hover,
  .clamp.ln9:hover {
    -webkit-line-clamp: 10;
  }

  img:not(.logo > img):not(.withText img):not(.info img):not(.compt-multiRow .wrap img):not(.logoList img):not([src$=".svg"]) {
    width: 100%;
  }
  /* Start .buttonGroup */
  .buttonGroup {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
  }
  .buttonGroup > a, .buttonGroup > div {
    position: relative;
    padding: 10px 20px;
    border: 2px solid #24201F;
    border-radius: 100px;
    outline: transparent solid 0px;
    overflow: hidden;
    text-decoration: none;
    white-space: nowrap;
    transition: all 600ms cubic-bezier(0.7, 0, 0.3, 1) 0s;
    cursor: pointer;
  }
  /* Start .textLink */
  a[role=textLink], 
  div[role=textLink],
  span[role=textLink] {
      position: relative;
      display: inline-flex;
      align-items: flex-end;
      gap: 5px;
  }

  a[role=textLink]::before, 
  div[role=textLink]::before,
  span[role=textLink]::before {
      content: '';
      position: absolute;
      width: 100%;
      transform: scaleX(1);
      height: 1px;
      bottom: -1px;
      left: 0;
      background-color: #0F0D2D;
      transform-origin: bottom left;
      transition: transform 600ms cubic-bezier(0.7, 0, 0.3, 1) 0s;
  }

  a[role=textLink]:hover::before, 
  div[role=textLink]:hover::before,
  span[role=textLink]:hover::before {
    transform: scaleX(0);
    transform-origin: bottom right;
    transition: transform 500ms cubic-bezier(0.7, 0, 0.3, 1) 0s;
  }

  a[role=textLink]::after,
  div[role=textLink]::after,
  span[role=textLink]::after {
    content: '';
    position: absolute;
    width: 100%;
    transform: scaleX(0);
    height: 1px;
    bottom: -1px;
    left: 0;
    background-color: #0F0D2D;
    transform-origin: bottom right;
    transition: transform 500ms cubic-bezier(0.7, 0, 0.3, 1) 0s;
  }
  a[role=textLink]:hover::after, 
  div[role=textLink]:hover::after,
  span[role=textLink]:hover::after {
      transform: scaleX(1);
      transform-origin: bottom left;
      transition: transform 600ms cubic-bezier(0.7, 0, 0.3, 1) 0s;
  }

  /* Start color line for .textLink (white) */
  a[role=textLink].white::before, 
  div[role=textLink].white::before,
  span[role=textLink].white::before,
  a[role=textLink].white::after, 
  div[role=textLink].white::after,
  span[role=textLink].white::after
   {background-color: white;}
  
  /* Start color line for .textLink (green) */
  a[role=textLink].green::before, 
  div[role=textLink].green::before,
  span[role=textLink].green::before,
  a[role=textLink].green::after, 
  div[role=textLink].green::after,
  span[role=textLink].green::after
   {background-color: #409E75;}

  /* Start Sticky */
  .sticky01 {
    position: sticky;
    top: 94px;
    transition-property: transform;
    transition-duration: 0.5s;
  }
  .sticky02 {
      position: sticky;
      top: 120px;
      transition-property: transform;
      transition-duration: 0.5s;
  }

  /* Start .infoPopup */
  .infoPopup {
    position: fixed;
    bottom: 20px;
    left: 40px;
    z-index: 9999;
  }
  .infoPopup > .clickPopup {
    position: relative;
    width: fit-content;
    background-color: #2BBF8F;
    color: #24201F;
    padding: 10px 15px;
    margin-top: 5px;
    border-radius: 5px;
    opacity: 1;
    transition: opacity 0.3s ease-in-out;
    font-size: 16px;
    font-weight: 600;
    box-shadow: 0px 0px 13px rgba(36, 32, 31, 0.35);
    white-space: pre-line;
  }
  .error-input {box-shadow: rgba(184, 66, 66, 1) 0px 0px 0px 2px inset !important;}
  .alert-input {box-shadow: rgb(219 89 55) 0px 0px 0px 2px inset !important;}
  .none {display: none;}

/* ---------------------- 
Navigation Style
---------------------- */

  /** ====> Default Style *****/
  .navSticky {
    position: sticky;
    top: 0;
    padding: 40px 40px 0;
    transition-property: transform;
    transition-duration: 0.5s;
    z-index: 10;
  }

  /************************** 
   * Navigation Mobile 
  **************************/
  div[role=menuMob] {
    display: none;
    position: absolute;
    top: calc(100% + 0px);
    left: 0px;
    width: 100%;
    min-width: 320px;
    max-height: calc(-72px + 100vh);
    padding: 0px 0px 32px;
    background: rgba(245, 245, 243, 1);
    transition: visibility 0s ease 250ms, opacity 0s ease 250ms;
    border-top: 1px solid #DED7CA;
    box-shadow: rgba(0, 0, 0, 0.15) 0px 16px 24px;
    overflow: hidden auto;
    z-index: 14;
  }
  div[role=menuMob] .selectDrop > div[role=mobDrop] {
    display: flex;
    align-items: center;
    column-gap: 12px;
    padding: 0px 25px;
    border-bottom: 1px solid #e0e0e0;
    transition: box-shadow 0.1s ease-in-out 0s;
    -webkit-box-align: center;
  }
  div[role=menuMob] .selectDrop > div[role=mobDrop]:hover {
    transition-duration: 100ms;
    background-color: rgba(240, 240, 240, 1);
    cursor: pointer;
  }
  div[role=menuMob] div[role=mobDrop] > button {
      outline: none;
      border: none;
      background: transparent;
      padding: 20px 0px;
      width: 100%;
      text-align: left;
      font-family: inherit;
      color: rgb(22, 20, 12);
      transition: color 0.1s ease-in-out 0s;
  }
  div[role=menuMob] .selectDrop > .panel {
      display: grid;
      transition: grid-template-rows 0.25s ease-in-out 0s;
      grid-template-rows: 0fr;
      padding: 0px;
      transition-duration: 200ms;
      transition-timing-function: cubic-bezier(0.7, 0, 0.3, 1);
      background: rgba(240, 240, 240, 1);
      overflow: hidden;
      opacity: 0;
  }
  div[role=menuMob] .selectDrop > .panel[data-view="true"] {
    grid-template-rows: 1fr;
    padding: 24px;
    opacity: 1;
  }
  div[role=menuMob] .selectDrop > .panel > .innerPanel {
    transition: opacity 100ms cubic-bezier(0.7, 0, 0.3, 1) 0s;
    overflow: hidden;
    opacity: 1;
    visibility: unset;
  }
  div[role=menuMob] .selectDrop > .panel > .innerPanel > .subPanel {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0px;
  }
  div[role=menuMob] a.itemsNav > .secondCard > p:nth-of-type(2) {
      max-width: 320px;
  }
  div[role=menuMob] > .buttonGroup {
    display: flex;
    justify-content: center;
    align-self: inherit;
    flex-direction: row;
    align-items: baseline;
    flex-flow: column wrap;
    gap: 12px;
    width: auto;
    padding: 16px;
    text-align: center;
    -webkit-box-pack: center;
    -webkit-box-align: baseline;
  }
  div[role=menuMob] > .buttonGroup > a {
    position: relative;
    display: inline-block;
    gap: 8px;
    border: 0;
    border-radius: 10px;
    line-height: 24px;
    padding: 10px 20px;
    width: -webkit-fill-available;
    outline: transparent solid 0px;
    outline-offset: 3px;
    overflow: visible;
    text-decoration: none;
    white-space: nowrap;
    transition: outline 70ms cubic-bezier(0, 0, 0.5, 1) 0s;
    cursor: pointer;
  }
  div[role=menuMob] a.itemsNav > div {background-color: rgb(240, 240, 240);}
  div[role=menuMob] a.itemsNav:hover > div {background-color: rgba(233, 232, 230, 1);}

  /************************** 
   * Navigation Desktop 
  **************************/

  nav.pDesk {
    padding: 25px 40px;
    margin: auto;
    background: rgba(245, 245, 243, 1);
    border: 0px solid rgba(36, 32, 31, .25);
    border-radius: 20px;
        -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    transition: transform 0.3s ease;
  }
  nav.pDesk.nav-hidden {
    transform: translateY(-150%);
  }
  nav.pDesk > .container {
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  /* start .logo */
  nav.pDesk > .container > a.logo {
    font-size:13px;
    line-height: 18px;
    max-width: 180px;
  }
  nav.pDesk > .container > a.logo .slogan {}
  /* start .navBtn */
  nav.pDesk > .container > .navBtn {
    display: flex;
    align-items: center;

  }
  nav.pDesk > .container > .navBtn > .separator {
    height:20px;
    width: 1px;
    background-color: #24201F;
    margin: 0 15px;
  }
  nav.pDesk > .container > .navBtn > .searchBar,
  nav.pDesk > .container > .navBtn > .menu {
    display:flex;
    align-items: center;
    cursor: pointer;
  }
  nav.pDesk > .container > .navBtn > .searchBar p,
  nav.pDesk > .container > .navBtn > .menu p {
    font-size:15px;
    font-weight:700;
    letter-spacing: .08em;
  }
  /* État Burger – quand le menu est inactif */
  nav.pDesk > .container > .navBtn > .menu > .burger {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-right: 15px;
    transition: all 0.3s ease;
  }
  nav.pDesk > .container > .navBtn > .menu > .burger span {
      width: 18px;
      height: 2px;
      background: #24201F;
      transition: all 0.3s ease;
  }
  /* État Croix – quand le menu est actif */
  nav.pDesk > .container > .navBtn > .menu.active .burger span:nth-child(1) {transform: translateY(6px) rotate(45deg);}
  nav.pDesk > .container > .navBtn > .menu.active .burger span:nth-child(2) {opacity: 0;}
  nav.pDesk > .container > .navBtn > .menu.active .burger span:nth-child(3) {transform: translateY(-6px) rotate(-45deg);}
  nav.pDesk > .container > .navBtn > .menu.active .burger {margin-right: 15px;}
  /* Media Query Burger | Croix */
  @media (min-width: 1111px) {
    nav.pDesk > .container > .navBtn > .menu.active:hover .burger {
      margin-right: 10px;
    }
    nav.pDesk > .container > .navBtn > .menu.active:hover .burger span:nth-child(1) {
      transform: translateY(6px) rotate(0deg);
    }
    nav.pDesk > .container > .navBtn > .menu.active:hover .burger span:nth-child(3) {
      transform: translateY(-6px) rotate(0deg);
    }
    nav.pDesk > .container > .navBtn > .menu:not(.active):hover .burger {
      gap: 2px;
      margin-right: 10px;
    }
  }
  /* start div[role=menu] */
  nav.pDesk div[role=menu] {
    position: absolute;
    top: calc(100% + 25px);
    transform: translateX(-50%);
    left: 50%;
    display: none;
    width: 100%;
    max-width: 1060px;
    min-width: 320px;
    border-top: 1px solid #DED7CA;
    background: rgba(245, 245, 241, 1);
    box-shadow: rgba(0, 0, 0, 0.15) 0px 16px 24px;
    transition: visibility 0s ease 250ms, opacity 0s ease 250ms;
    z-index: 20;
  }
  nav.pDesk div[role=menu] > .container {
      display: flex;
      justify-content: space-between;
  }
  nav.pDesk div[role=menu] > .container > .wrapper:nth-of-type(1) {
      padding: 22px 44px 25px 32px;
      width: 100%;
  }
  nav.pDesk div[role=menu] > .container > .wrapper:nth-of-type(2) {
      padding: 32px 28px;
      max-width: 207px;
  }
  nav.pDesk div[role=menu] > .container > .wrapper > .wrap {
      display: flex;
      justify-content: space-between;
  }
  /** ====> WrapLeft & WrapRight Content *****/
  nav.pDesk div[role=menu] > .container > .wrapper > .wrap > .wrapLeft {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
  }
  nav.pDesk div[role=menu] > .container > .wrapper > .wrap > .wrapLeft .firstCard{
      padding:16px;
      border-radius: 10px;
      max-width: 313px;
  }
  nav.pDesk div[role=menu] > .container > .wrapper > .wrap > .wrapRight {
      width: 100%;
      max-width: 345px;    
  }
  nav.pDesk div[role=menu] > .container > .wrapper > .wrap > .wrapRight > .container {
      width: inherit;
      max-width: inherit;
  }
  nav.pDesk div[role=menu] > .container > .wrapper > .wrap > .wrapRight .secondCard, 
  .secondCard {
      padding:16px;
      border-radius: 8px;
  }
  nav.pDesk div[role=menu] > .container > .wrapper > .wrapBottom {
      margin-top:32px;
      padding-top: 16px;
      border-top: 1px solid rgba(15, 13, 45, 0.2);
  }
  nav.pDesk div[role=menu] > .container > .wrapper > .wrapCenter {display: block;}
  nav.pDesk div[role=menu] > .container > .wrapper > .wrapCenter > .wrapContent {
      display:flex;
      justify-content: space-between;
  }
  nav.pDesk div[role=menu] > .container > .wrapper > .wrapCenter > .wrapContent > .wLeft,
  nav.pDesk div[role=menu] > .container > .wrapper > .wrapCenter > .wrapContent > .wRight {
      width: 100%;
      max-width: 345px;
  }
  /** ====> Navigation Media *****/
  nav.pDesk div[role=menu] > .container > .wrapper > .wrap > .wrapLeft .firstCard .firstCard-img {
      width:100%;
      height: 180px;
      background-color: lightgrey;
      background-size: cover;
      background-repeat: no-repeat;
      background-position: center center;
  }
  nav.pDesk div[role=menu] > .container > .wrapper > .contactImg {
      width:207px;
      height: 153px;
      background-position: center;
      background-size: cover;
      border-radius: 100px 100px 0 0;
  }
  /** ====> Param Hover [a.itemsNav > div] *****/
  a.itemsNav > div {background-color: rgb(245, 245, 243);}
  a.itemsNav:hover > div {background-color:  rgba(233, 232, 230, 1);}
  a.itemsNav .imgCard {display: none;}
  a.itemsNav:hover .imgCard {display: block;}
  .wrapLeft a.itemsNav:nth-of-type(1):hover ~ a.itemsNav:nth-of-type(2),
  .wrapLeft a.itemsNav:nth-of-type(1):hover ~ a.itemsNav:nth-of-type(3) {
    display: none;
  }
  .wrapLeft a.itemsNav:nth-of-type(3) > div {background-color: white;}
  .wrapLeft a.itemsNav:hover > div {background-color:  rgba(233, 232, 230, 1);}
  /** ====> Media Query *****/
  @media (max-width: 1110px) {
    .navSticky {padding:0;}
    nav.pDesk {border-radius: 0px;}
    nav.pDesk div[role=menu] {display: none !important;}
  }
  @media (max-width: 467px) {
    nav.pDesk {padding: 20px 25px;}
    nav.pDesk > .container > a.logo .slogan {}
    nav.pDesk > .container > .navBtn > .menu.active .burger {margin-right: 0;}
    nav.pDesk > .container > .navBtn > .menu > .burger {margin-right: 0;}
    nav.pDesk > .container > .navBtn > .menu > p {display: none;}
  }

/* ---------------------- 
Intro Vidéo CSS
---------------------- */
  section#intro > .container {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
    margin: 40px auto 0;
    max-width: 870px;
    padding: 0 0 0 0;
  }
  section#intro h1.video {
    font-size: 0;
    color: transparent;
    width: 0;
    height: 0;
  }
  section#intro video {
    object-fit: cover;
    object-position: center;
    max-width: 100%;
    max-height: 100%;
    mix-blend-mode: lighten;
    margin: auto;
  }
  /** ====> Media Query *****/
  @media (max-width: 1110px) {
    section#intro > .container {margin: 40px auto 0;}
  }  

/* ---------------------- 
#header-s1 CSS 
---------------------- */
  section#header-s1 > .container {
    display: flex;
    justify-content: space-between;
    flex-direction: column;
    margin: 60px auto auto;
    max-width: 980px;
    padding: 0 20px;
  }
  section#header-s1 h1 {
    font-size: 0;
    color: transparent;
    width: 0;
    height: 0;
  }
  section#header-s1 > .container > .wrapper {
    display:flex;
    justify-content: space-between;
    align-items: center;
    gap:20px;
  }
  section#header-s1 > .container > .wrapper > .wrapLeft img,
  section#header-s1 > .container > .wrapper > .wrapRight img {
    max-width: 100%;
    max-height: 100%;
    transition-property: transform;
    transition-duration: 0.5s;
  }
  /** ====> Media Query *****/
  @media (max-width: 767px) {
    section#header-s1 > .container > .wrapper {
      flex-direction: column;
      gap:40px;
    }
  }

/* ---------------------- 
#header-s2 CSS 
---------------------- */
  section.compt-header-s2 > .container {
      padding: 0 20px;
  }
  section.compt-header-s2 > .container > .wrapper {
      display: flex;
      justify-content: space-between;
      gap: 25px;
      max-width: 1060px;
      margin: auto;
  }
  section.compt-header-s2 > .container > .wrapper > .heading {
    width: 100%;
    max-width: 710px;
    margin: auto;
    text-align: center;
  }

/* ---------------------- 
innerBlock CSS  
---------------------- */
  section.wrapBlock {
    background-color: white;
    border-radius:40px;
    margin: 0 20px;
  }
  section.wrapBlock.single-article {margin: 40px 20px 0;}

/* ---------------------- 
Component Classic [dbl columns]
---------------------- */
  /* rowReverse */
  section.compt-classic > .container > .wrapper.rowReverse {
    flex-direction: row-reverse;
  }
  /* Start CSS */
  section.compt-classic > .container {padding:0 20px;}
  section.compt-classic > .container > .wrapper {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 25px;
    max-width: 1060px;
    margin: auto;
  }
  section.compt-classic > .container > .wrapper > .wrapText {
      max-width: 540px;
      width: 60%;
  }
  section.compt-classic > .container > .wrapper > .wrapMedia {
      max-width: 432px;
      width: 50%;
  }
  section.compt-classic > .container > .wrapper > .wrapMedia > img {
      max-width: 100%;
      max-height: 100%;
      border-radius: 80px;
      position: sticky;
      top: 94px;
      transition-property: transform;
      transition-duration: 0.5s;

  }
  /** ====> Media Query *****/
  @media (max-width: 980px) {
    section.compt-classic > .container > .wrapper {
        align-items: normal;
    }
  }
  @media (max-width: 767px) {
    section.compt-classic > .container > .wrapper, section.compt-classic > .container > .wrapper.rowReverse {
      flex-direction: column;
      gap: 50px;
    }
    section.compt-classic > .container > .wrapper > .wrapText {
      max-width: none;
      width: auto;
    }
    section.compt-classic > .container > .wrapper > .wrapMedia {
        max-width: none;
        width: auto;
        display: flex;
        flex-direction: column;
    }
  }
  @media (max-width: 570px) {

  }
  @media (max-width: 467px) {
    section.compt-classic > .container > .wrapper > .wrapMedia > img {border-radius: 40px;}
  }
  @media (max-width: 320px) {
    section.compt-classic > .container > .wrapper > .wrapMedia > img {border-radius: 20px;}
  }

/* ---------------------- 
Component numberKey
---------------------- */
  section.compt-numberKey > .container {
    box-sizing: border-box;
    width: 100%;
    padding: 0 20px;
  }
  section.compt-numberKey > .container > .wrapper {
    position: relative;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 40px 140px;
    max-width: 1060px;
    margin: auto;
  }
  section.compt-numberKey .numberKey {max-width: 260px;text-align: center;}
  section.compt-numberKey .numberKey > p.supTitle {
    font-size: 14px;
    line-height: 28px;
    letter-spacing: .08em;
    text-transform: uppercase;
  }
  section.compt-numberKey .numberKey > p.bigText {
    font-size: 47px;
    line-height: 56px;
  }
  section.compt-numberKey .numberKey > p.text {
    font-size: 22px;
    line-height: 30px;
    letter-spacing: -.01em;
  }
  /** ====> Media Query *****/
  @media (max-width: 767px) {
    section.compt-numberKey > .container > .wrapper {gap: 40px;}
  }

/* ---------------------- 
Component numberKey-2
---------------------- */
  section.compt-numberKey-2 > .container {
    box-sizing: border-box;
    width: 100%;
    padding: 0 20px;
  }
  section.compt-numberKey-2 > .container > .wrapper {
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 1060px;
    margin: auto;
  }
  section.compt-numberKey-2 > .container > .wrapper > .title {max-width:450px;}
  section.compt-numberKey-2 > .container > .wrapper > .title p {
    font-size:47px;
    line-height:56px;
  }
  section.compt-numberKey-2 > .container > .wrapper > .wrap {
    display:flex;
    gap:15px;
  }
  section.compt-numberKey-2 .numberKey {
    max-width:260px;
    text-align: center;
  }
  section.compt-numberKey-2 .numberKey > p.supTitle {
    font-size: 14px;
    line-height: 28px;
    text-align: center;
    letter-spacing: .08em;
    text-transform: uppercase;
  }
  section.compt-numberKey-2 .numberKey > p.bigText {
    font-size: 47px;
    line-height: 56px;
    text-align: center;
  }
  section.compt-numberKey-2 .numberKey > p.text {
    font-size: 22px;
    line-height: 30px;
    text-align: center;
  }
  /** ====> Media Query *****/
  @media (max-width: 980px) {
    section.compt-numberKey-2 > .container > .wrapper {
      justify-content: center;
      flex-wrap: wrap;
      gap: 64px;
    }
    section.compt-numberKey-2 > .container > .wrapper > .title {
      max-width: 830px;
      text-align: center;
    }
  }
  @media (max-width: 767px) {
    section.compt-numberKey-2 > .container > .wrapper > .title p {
      font-size: 37px;
      line-height: 46px;
    }
  }
  @media (max-width: 580px) {
    section.compt-numberKey-2 > .container > .wrapper > .wrap {
      gap: 32px;
      flex-wrap: wrap;
      justify-content: center;
    }
  }
  @media (max-width: 467px) {
    section.compt-numberKey-2 > .container > .wrapper > .title p {
      font-size: 32px;
      line-height: 41px;
    }
  }
  @media (max-width: 340px) {
    section.compt-numberKey-2 > .container > .wrapper > .title p {
      font-size: 30px;
      line-height: 39px;
    }
  }
  }
/* ---------------------- 
Component numberKey-3
---------------------- */
  section.compt-numberKey-3 > .container {
    box-sizing: border-box;
    width: 100%;
    padding: 0 20px;
  }
  section.compt-numberKey-3 > .container > .wrapper {
    position: relative;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 40px 140px;
    max-width: 1060px;
    margin: auto;
  }
  section.compt-numberKey-3 .numberKey {
    max-width: 260px;
    text-align: center;
  }
  section.compt-numberKey-3 .numberKey > img {}
  section.compt-numberKey-3 .numberKey > p:nth-of-type(1) {
    font-size: 22px;
    line-height: 30px;
  }

/* ---------------------- 
Component bigQuote
---------------------- */
  section.compt-bigQuote > .container {
    box-sizing: border-box;
    width: 100%;
    padding: 0 20px;
  }
  section.compt-bigQuote > .container > .wrapper {
    position: relative;
    display: flex;
    max-width: 740px;
    margin: auto;
  }
  section.compt-bigQuote > .container > .wrapper > p {
    font-size: 44px;
    line-height: 57px;
    text-align: center;
  }
  /** ====> Media Query *****/
  @media (max-width: 767px) {
    section.compt-bigQuote > .container > .wrapper > p {
      font-size: 34px;
      line-height: 47px;
    }
  }
  @media (max-width: 467px) {
    section.compt-bigQuote > .container > .wrapper > p {
      font-size: 24px;
      line-height: 37px;
    }
  }

/* ---------------------- 
Component multiRow
---------------------- */
  section.compt-multiRow > .container {padding: 0 20px;}
  section.compt-multiRow > .container > .supTitle {
    max-width: 1060px;
    margin: auto;
    margin-bottom: 66px;
    border-bottom: 1px solid rgba(15, 13, 45, 0.25);
  }
  section.compt-multiRow > .container > .supTitle > p {
    margin-bottom: 11px;
  }
  section.compt-multiRow > .container > .wrapper {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
    max-width: 1080px;
    margin: auto;
  }
  section.compt-multiRow > .container > .wrapper > .wrap {
    display: flex;
    max-width: 340px;
    width: 100%;
    border-radius: 20px;
    border:1px solid rgb(36, 32, 31, .2);
  }
  section.compt-multiRow > .container > .wrapper > .wrap > .img{
    width: 100%;
    max-width: 120px;
    background-color: grey;
    border-radius: 19px 0 0 19px;
    background-position: center;
    background-size: cover;
  }
  section.compt-multiRow > .container > .wrapper > .wrap > .content {padding: 23px 23px 16px 25px;}
  section.compt-multiRow > .container > .wrapper > .wrap > .content > p {
  font-size:19px;
  line-height:24px;
  font-weight: 700;
  letter-spacing: -.01em;
  }
  section.compt-multiRow > .container > .wrapper > .wrap > .content > a {
  font-size:15px;
  line-height:24px;
  text-align: right;
  }
  /** ====> Media Query *****/
  @media (max-width: 767px) {
    section.compt-multiRow > .container > .wrapper > .wrap {max-width: none;}
    section.compt-multiRow > .container > .wrapper > .wrap > .content > a {text-align: left;}
  }
  @media (max-width: 467px) {
    section.compt-multiRow > .container > .wrapper > .wrap > .content {padding: 15px;}
  }
  @media (max-width: 360px) {
    section.compt-multiRow > .container > .wrapper > .wrap {
      flex-direction: column;
    }
    section.compt-multiRow > .container > .wrapper > .wrap > .img {
      height: 250px;
      border-radius: 19px 19px 0 0;
      max-width: none;
    }
  }
/* ---------------------- 
Component bigBanner
---------------------- */
  section.bigBanner {
    position: relative;
      max-width: 800px;
      margin: auto;
      padding: 0 20px;
  }
  section.bigBanner > .container {
    background-color: #F5F5F3;
    border-radius: 40px;
  }
  section.bigBanner > .container > .wrapper {
    display: flex;
    justify-content: space-between;
      position: relative;
      padding: 55px 85px;

  }
  section.bigBanner > .container > .wrapper .title {
    font-size:33px;
    line-height:35px;
    max-width: 395px;
  }
  section.bigBanner > .container > .wrapper .wrapLeft > .buttonGroup {
    justify-content: flex-start;
  }
  section.bigBanner > .container > .wrapper .wrapLeft > .buttonGroup > a {
    width: auto;
    text-align: center;
    max-width: 340px;
  }
  section.bigBanner > .container > .wrapper .wrapRight {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 100%;
    max-width: 275px;
  }
  /** ====> Media Query *****/
  @media (max-width: 767px) {
    section.bigBanner > .container > .wrapper {
      padding: 55px;
      align-items: center;
      flex-direction: column-reverse;
      text-align: center;
    }
    section.bigBanner > .container > .wrapper .wrapRight {position: relative;}
    section.bigBanner > .container > .wrapper .title {max-width: none;}
    section.bigBanner > .container > .wrapper .wrapLeft > .buttonGroup {
        justify-content: center;
        width: 100%;
    }
    section.bigBanner > .container > .wrapper .wrapLeft > .buttonGroup > a {
        width: 100%;
        max-width: none;
    }
  }
  @media (max-width: 570px) {
    section.compt-article section.bigBanner {padding: 0;}
    section.bigBanner > .container > .wrapper {padding: 25px;}
  }
  @media (max-width: 467px) {
    section.bigBanner > .container > .wrapper .title {
      font-size: 28px;
      line-height: 30px;
    }
  }

/* ---------------------- 
Component largeBanner-1
---------------------- */
  section.largeBanner-1 {
    position: relative;
    max-width: 1060px;
    margin: auto;
    padding: 0 20px;
  }
  section.largeBanner-1 > .container {
    padding:25px 50px;
    border-radius: 40px;
    background-color: #F5F5F3;
  }
  section.largeBanner-1 > .container > .wrapper {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 30px;
  }
  section.largeBanner-1 > .container > .wrapper > .content {
    display:flex;
    align-items: center;
    gap:25px;
  }
  section.largeBanner-1 > .container > .wrapper > .content > img {max-width:163px;}
  section.largeBanner-1 > .container > .wrapper > .content > .text {max-width: 440px;}
  /** ====> Media Query *****/
  @media (max-width: 980px) {
    section.largeBanner-1 > .container {padding: 25px;}
  }
  @media (max-width: 767px) {
    section.largeBanner-1 > .container {padding: 25px;}
    section.largeBanner-1 > .container > .wrapper {
      flex-wrap: wrap;
    }
    section.largeBanner-1 .buttonGroup,
    section.largeBanner-1 .buttonGroup a {
      width: 100%;
      text-align: center;
    }
  }
  @media (max-width: 570px) {
    section.largeBanner-1 > .container > .wrapper {justify-content: center;}
    section.largeBanner-1 > .container > .wrapper > .content {
      flex-wrap: wrap;
      justify-content: center;
    }
    section.largeBanner-1 > .container > .wrapper > .content > .text {text-align: center;}
  }

/* ---------------------- 
Component largeBanner-2
---------------------- */
  section.largeBanner-2 {
    position: relative;
      max-width: 1060px;
      margin: auto;
      padding: 0 20px;
  }
  section.largeBanner-2 > .container {
    padding:65px 55px;
      border-radius: 40px;
  }
  section.largeBanner-2 > .container > .wrapper {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 30px;
  }
  section.largeBanner-2 > .container > .wrapper > .title {max-width: 285px;}
  /** ====> Media Query *****/
  @media (max-width: 830px) {
    section.largeBanner-2 > .container {
      padding: 55px 45px;
      border-radius: 30px;
    }
    section.largeBanner-2 > .container > .wrapper {flex-direction: column;}
    section.largeBanner-2 > .container > .wrapper > .title {max-width: none;}
  }
  @media (max-width: 830px) {
    section.largeBanner-2 > .container {
      padding: 30px;
      border-radius: 20px;
    }
  }

/* ---------------------- 
Component largeBanner-3
---------------------- */
  section.largeBanner-3 {
    position: relative;
    max-width: 1060px;
    margin: auto;
    padding: 0 20px;
  }
  section.largeBanner-3 > .container {
    padding:25px 50px;
    border-radius: 0 40px 40px 0;
    border-left: 2px solid #24201F;
  }
  section.largeBanner-3 > .container > .wrapper {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 25px;
  }
  section.largeBanner-3 > .container > .wrapper > .img {
    display: flex;
    width: 100%;
    max-width: 163px;
    height: 142px;
    align-items: center;
    justify-content: center;
  }
  section.largeBanner-3 > .container > .wrapper > .content {
    width: 100%;
    max-width:580px;
  }
  section.largeBanner-3 > .container > .wrapper > .content > .supTitle {
    font-size: 14px;
    line-height: 22px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;

  }
  /** ====> Media Query *****/
  @media (max-width: 980px) {
    section.largeBanner-3 > .container {
      padding: 40px 25px;
      border-radius: 20px;
      border-left: 0;
    }
    section.largeBanner-3 > .container > .wrapper {
      align-items: center;
      flex-direction: column;
    }
    section.largeBanner-3 > .container > .wrapper > .content {
      text-align: center;
      max-width: none;
    }
    section.largeBanner-3 > .container > .wrapper > .img {height: auto;margin: auto;}
  }
  @media (max-width: 767px) {
    section.largeBanner-3 .buttonGroup,
    section.largeBanner-3 .buttonGroup a {
      width: 100%;
      text-align: center;
    }
  }
  @media (max-width: 570px) {
    section.largeBanner-3 p.xlarge-text {
      font-size: 20px;
      line-height: 27px;
    }
  }
  @media (max-width: 467px) {
    section.largeBanner-3 > .container {
      padding: 30px 20px;
    }
    section.largeBanner-3 p.xlarge-text {
      font-size: 18px;
      line-height: 25px;
    }
  }
  @media (max-width: 320px) {
    section.largeBanner-3 > .container {
      padding: 25px 15px;
    }
    section.largeBanner-3 p.xlarge-text {
      font-size: 16px;
      line-height: 23px;
    }    
  }

/* ---------------------- 
Component Announcement
---------------------- */
  .compt-announcement {
    text-align:center;
    padding: 0 20px;
  }
  .compt-announcement > img {
    max-width: 100%;
    max-height: 100%;
  }

/* ---------------------- 
Component swiperReviews
---------------------- */
  section.compt-swiperReviews {padding:88px 0;}
  section.compt-swiperReviews > .container > .wrapper {
      position: relative;
      margin: auto;
  }
  section.compt-swiperReviews > .container > .wrapper > .heading {
      text-align: center;
      padding: 0 20px;
  }
  section.compt-swiperReviews > .container > .wrapper > .heading > h2 {
      max-width: 650px;
      margin: auto;
  }
  /** ====> heading *****/
  section.compt-swiperReviews .slideReviews > .heading {
    display: flex;
      justify-content: space-between;
      flex-direction: column;
      gap: 25px;
      max-width: 1060px;
      margin: auto;
      padding: 0 20px;
  }
  section.compt-swiperReviews .slideReviews > .heading > .wrap {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
    flex-wrap: wrap;
  }
  section.compt-swiperReviews .slideReviews > .heading > .wrap > .title {
    display:flex;
    gap:15px;
  }
  section.compt-swiperReviews .slideReviews > .heading > .wrap > .title > img {max-width:76px;}
  section.compt-swiperReviews .slideReviews > .heading > .wrap > .title > .info {
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  section.compt-swiperReviews .slideReviews > .heading > .wrap > .title > .info > .wrap {
    display: flex;
    gap: 10px;
  }
  section.compt-swiperReviews .slideReviews > .heading > .wrap > .title > .info > .wrap > .note {
    font-size: 29px;
    font-weight: 700;
  }
  section.compt-swiperReviews .slideReviews > .heading > .wrap > .title > .info > .text p {font-size: 21px;}
  /** ====> swiper-navigation *****/
  section.compt-swiperReviews .swiper-navigation {
    display: flex;
    gap: 15px;
    align-items: center;
  }
  section.compt-swiperReviews .swiper-navigation > .swiperReviews-button-prev, 
  section.compt-swiperReviews .swiper-navigation > .swiperReviews-button-next {
      min-width: 56px;
      min-height: 56px;
      width: 56px;
      height: 56px;
      border-radius: 100px;
      background-color: rgb(255, 255, 255);
      border: 1px solid rgb(36, 32, 31);
      display: flex;
      justify-content: center;
      align-items: center;
      cursor: pointer;
  }
  section.compt-swiperReviews .swiper-navigation > .swiperReviews-button-prev:hover img {
      transform: translate(-5px, 0px);
      transition: all 600ms cubic-bezier(0.7, 0, 0.3, 1) 0s;
  }
  section.compt-swiperReviews .swiper-navigation > .swiperReviews-button-next:hover img {
      transform: translate(5px, 0px);
      transition: all 600ms cubic-bezier(0.7, 0, 0.3, 1) 0s;
  }
  section.compt-swiperReviews .swiper-navigation > .swiperReviews-button-prev > img, 
  section.compt-swiperReviews .swiper-navigation > .swiperReviews-button-next > img {
      transform: translate(0);
      transition: all 600ms cubic-bezier(0.7, 0, 0.3, 1) 0s;
  }
  section.compt-swiperReviews .swiper-button-disabled {
      opacity: 0.4;
      cursor: auto;
  }
  /** ====> swiper-wrapper *****/
  section.compt-swiperReviews .swiperReviews {
      margin-left: auto;
      margin-right: auto;
      position: relative;
      overflow: hidden;
      list-style: none;
      padding: 0;
      z-index: 1;
      padding-left: 120px;
      padding-right: 60px;
  }
  section.compt-swiperReviews .swiperReviews > .swiper-wrapper {
      position: relative;
      width: 100%;
      height: 100%;
      z-index: 1;
      display: flex;
      transition-property: transform;
      box-sizing: content-box;
      padding: 0 0 10px;
  }
  section.compt-swiperReviews .swiperReviews > .swiper-wrapper > .swiper-slide {
      text-align: left;
      display: flex;
      justify-content: flex-start;
      align-items: flex-start;
      flex-direction: column;
      width: 100%;
      height: fit-content;
      min-width: 350px;
      max-width: 350px;
      background-color: white;
      border-radius: 20px;
      box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16);
      transition: all 600ms cubic-bezier(0.7, 0, 0.3, 1) 0s;
  }
  section.compt-swiperReviews .swiperReviews > .swiper-wrapper > .swiper-slide > .swiper-slide-items {
    color: inherit;
    text-decoration: none;
    padding: 30px 24px;
  }
  /** ====> swiper-slide-items *****/
  section.compt-swiperReviews .swiperReviews .swiper-slide-items > .heading {
    display: flex;
    gap: 10px;
    align-items: center;
  }
  section.compt-swiperReviews .swiperReviews .swiper-slide-items > .heading > .avatar {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 39px;
    height: 39px;
    background-color: #F5F5F3;
    border-radius: 40px;
  }
  section.compt-swiperReviews .swiperReviews .swiper-slide-items > .heading > .avatar > p {
    font-size:21px;
    font-weight: 500;
    font-family: roboto;
  }
  section.compt-swiperReviews .swiperReviews .swiper-slide-items > .heading > .author > p:nth-of-type(1) {
    font-size:16px;
    line-height:normal;
    font-weight: 700;
  }
  section.compt-swiperReviews .swiperReviews .swiper-slide-items > .heading > .author > p:nth-of-type(2) {
    font-size: 14px;
    line-height:normal;
  }
  section.compt-swiperReviews .swiperReviews .swiper-slide-items > .stars > img {width: 108px;}
  /** ====> Media Query *****/
  @media (max-width: 980px) {
    section.compt-swiperReviews .swiperReviews {
      padding-left: 60px;
      padding-right: 30px;
    }
  }
  @media (max-width: 767px) {
    section.compt-swiperReviews .swiperReviews {padding-left: 30px;}    
  }
  @media (max-width: 467px) {
    section.compt-swiperReviews {padding: 88px 0 0;}
    section.compt-swiperReviews .swiperReviews {padding-left: 20px;}
    section.compt-swiperReviews .slideReviews > .heading > .wrap {
      justify-content: center;
    }
    section.compt-swiperReviews .slideReviews > .heading > div {display: none;}
    section.compt-swiperReviews .swiperReviews > .swiper-wrapper > .swiper-slide {min-width: 300px;}
  }

/* ---------------------- 
Component Swiper Testimonial
---------------------- */
  section.compt-testimonial > .container {padding: 0 24px;}
  section.compt-testimonial > .container > .wrapper {
    position: relative;
    max-width: 1070px;
    margin: auto;
  }
  /** ====> start .heading *****/
  section.compt-testimonial > .container > .wrapper > .heading {
      text-align: center;
      max-width: 630px;
      margin: auto;
  }
  /** ====> start .slideTestimonial *****/
  section.compt-testimonial > .container > .wrapper > .slideTestimonial {
    display: flex;
    align-items: center;
    gap: 24px;
  }
  section.compt-testimonial > .container > .wrapper > .slideTestimonial .swiper {
    margin-left: auto;
    margin-right: auto;
    position: relative;
    overflow: hidden;
    list-style: none;
    padding: 0;
    z-index: 1;
    display: block;
    /*****************/
    width: 100%;
    height: auto;
    max-width: 860px;
  }
  section.compt-testimonial > .container > .wrapper > .slideTestimonial .swiper-wrapper {
      position: relative;
      width: 100%;
      height: 100%;
      z-index: 1;
      display: flex;
      transition-property: transform;
      transition-timing-function: var(--swiper-wrapper-transition-timing-function, initial);
      box-sizing: content-box;
  }
  section.compt-testimonial > .container > .wrapper > .slideTestimonial .swiper-slide {
    flex-shrink: 0;
    width: 100%;
    height: 100%;
    position: relative;
    transition-property: transform;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
  }
  section.compt-testimonial > .container > .wrapper > .slideTestimonial .swiper-slide img {
      max-width: 300px;
      width: 35%;}
  /** ====> start .content-slide *****/
  section.compt-testimonial > .container > .wrapper > .slideTestimonial .content-slide {
    max-width:495px;
    width: 100%; }
  section.compt-testimonial > .container > .wrapper > .slideTestimonial .content-slide > a {margin-top: 20px;margin-bottom: 10px;}
  /** ====> start .swiper-button-[...] *****/
  section.compt-testimonial > .container > .wrapper > .slideTestimonial .swiper-button-prev, 
  section.compt-testimonial > .container > .wrapper > .slideTestimonial .swiper-button-next {
    min-width: 56px;
    min-height: 56px;
    width: 56px;
    height: 56px;
    border-radius: 100px;
    background-color: rgb(255, 255, 255);
    border: 1px solid rgb(36, 32, 31);
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
  }
  section.compt-testimonial > .container > .wrapper > .slideTestimonial .swiper-button-prev > img, 
  section.compt-testimonial > .container > .wrapper > .slideTestimonial .swiper-button-next > img {
    transform: translate(0);
    transition: all 600ms cubic-bezier(0.7, 0, 0.3, 1) 0s;
  }
  section.compt-testimonial > .container > .wrapper > .slideTestimonial .swiper-button-prev:hover img {
    transform: translate(-5px, 0px);
    transition: all 600ms cubic-bezier(0.7, 0, 0.3, 1) 0s;
  }
  section.compt-testimonial > .container > .wrapper > .slideTestimonial .swiper-button-next:hover img {
    transform: translate(5px, 0px);
    transition: all 600ms cubic-bezier(0.7, 0, 0.3, 1) 0s;
  }
  /** ====> start .swiper-navigation-mobile *****/
  section.compt-testimonial > .container > .wrapper > .slideTestimonial .swiper-navigation-mobile {
    display: none;
    gap: 15px;
    align-items: center;
  }
  /** ====> start .swiper-pagination *****/
  section.compt-testimonial > .container > .wrapper > .slideTestimonial .swiper-pagination {
    display: inherit;
    gap: 15px;
  }
  section.compt-testimonial > .container > .wrapper > .slideTestimonial .swiper-pagination > .swiper-pagination-bullet {
    border-radius: 100%;
    cursor: pointer;
    height: 4px;
    width: 4px;
    padding: 0px;
    background-color: transparent;
    border: 1px solid rgb(174, 167, 153);
  }
  section.compt-testimonial > .container > .wrapper > .slideTestimonial .swiper-pagination > .swiper-pagination-bullet.swiper-pagination-bullet-active{
    border: none;
    border-radius: 100%;
    cursor: pointer;
    height: 6px;
    width: 6px;
    padding: 0px;
    background-color: rgb(143, 136, 122);
  }
  /** ====> start .swiper-horizontal *****/
  section.compt-testimonial > .container > .wrapper > .slideTestimonial .swiper-horizontal {touch-action: pan-y;}
  /** ====> Media Query *****/
  @media (max-width: 800px) {
    section.compt-testimonial > .container > .wrapper > .slideTestimonial {
        flex-direction: column;
        gap: 48px;
    }
    section.compt-testimonial > .container > .wrapper > .slideTestimonial .swiper-slide {
        flex-direction: column;
        justify-content: center;
    }
    section.compt-testimonial > .container > .wrapper > .slideTestimonial .content-slide {
        max-width: none;
        width: auto;
        text-align: center;
    }
    section.compt-testimonial > .container > .wrapper > .slideTestimonial > .swiper-button-prev, 
    section.compt-testimonial > .container > .wrapper > .slideTestimonial > .swiper-button-next {display: none;}
    section.compt-testimonial > .container > .wrapper > .slideTestimonial .swiper .swiper-slide img {
        max-width: 250px;
        width: auto;
    }
    section.compt-testimonial > .container > .wrapper > .slideTestimonial .swiper-navigation-mobile {display: flex;}
  }
  @media (max-width: 467px) {
    section.compt-testimonial > .container {padding: 0 14px;}
  }

/* ---------------------- 
Component lastBlog
---------------------- */
  section.compt-lastBlog > .container {
    padding: 0 24px;
  }
  section.compt-lastBlog > .container > .supTitle {
    max-width: 1060px;
    margin: auto;
    margin-bottom: 66px;
    border-bottom: 1px solid rgba(36, 32, 31, 0.25);
  }
  section.compt-lastBlog > .container > .supTitle > p {margin-bottom: 11px;}
  section.compt-lastBlog > .container > .wrapper {
    position: relative;
    display: flex;
    justify-content: space-between;
    gap: 25px;
    max-width: 1060px;
    margin: auto;
  }

  section.compt-lastBlog > .container > .wrapper > .wrapLeft {
    position: relative;
    max-width: 410px;
    width: 100%;
  }
  section.compt-lastBlog > .container > .wrapper > .wrapLeft > .cardBlog {background-color: #F6F0E6;}
  section.compt-lastBlog > .container > .wrapper > .wrapLeft > .cardBlog > .thumbnails {
    max-width: 100%;
    height: 247px;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    border-radius: 20px;
  }
  section.compt-lastBlog > .container > .wrapper > .wrapLeft > .cardBlog > .infoBlog {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
  }
  section.compt-lastBlog > .container > .wrapper > .wrapLeft > .cardBlog > .infoBlog > .spotlight {
    padding: 2px 8px;
    background-color: #C3FEB2;
  }
  section.compt-lastBlog > .container > .wrapper > .wrapLeft > .cardBlog > .infoBlog > .metaData {
    display: flex;
    align-items: center;
    gap: 8px;
  }
  section.compt-lastBlog > .container > .wrapper > .wrapLeft > .cardBlog > .titleBlog {
    font-size: 33px;
    line-height: 40px;
  }

  section.compt-lastBlog > .container > .wrapper > .wrapRight {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 40px;
    max-width: 615px;
    width: 100%;
  }
  section.compt-lastBlog > .container > .wrapper > .wrapRight > .cardBlog {
    display: flex;
    align-items: center;
    gap: 25px;
    padding-bottom: 45px;
    border-bottom: 1px solid rgba(36, 32, 31, 0.25);
  }
  section.compt-lastBlog > .container > .wrapper > .wrapRight > .cardBlog > .thumbnails {
    width: 100%;
    max-width: 135px;
    height: 135px;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    border-radius: 20px;
  }
  section.compt-lastBlog > .container > .wrapper > .wrapRight > .cardBlog > .infoBlog {
    max-width: 455px;
    width: 100%;
  }
  section.compt-lastBlog > .container > .wrapper > .wrapRight > .cardBlog > .infoBlog > .metaData {
    display: flex;
    align-items: center;
    gap: 8px;
  }
  /** ====> Media Query *****/
  @media (max-width: 980px) {
    section.compt-lastBlog > .container > .wrapper > .wrapLeft,
    section.compt-lastBlog > .container > .wrapper > .wrapRight {max-width: none;width: 50%;}

    section.compt-lastBlog > .container > .wrapper > .wrapRight > .cardBlog {flex-wrap: wrap;gap: 17px;}
    section.compt-lastBlog > .container > .wrapper > .wrapRight > .cardBlog > .thumbnails {max-width: none;height: 247px;}
    section.compt-lastBlog > .container > .wrapper > .wrapRight > .cardBlog > .infoBlog {max-width: none;}
  }
  @media (max-width: 767px) {
    section.compt-lastBlog > .container > .wrapper {flex-wrap: wrap;gap: 40px;}
    section.compt-lastBlog > .container > .wrapper > .wrapLeft {
      max-width: 615px;
      width: 100%;
      margin: auto;
      padding-bottom: 45px;
      border-bottom: 1px solid rgba(15, 13, 45, 0.25);
    }
    section.compt-lastBlog > .container > .wrapper > .wrapRight {margin: auto;width: 100%;max-width: 615px;}
    section.compt-lastBlog > .container > .wrapper > .wrapRight > .cardBlog > .infoBlog {max-width: none;}
  }
  @media (max-width: 467px) {
    section.compt-lastBlog > .container {padding: 0 20px;}
    section.compt-lastBlog > .container > .wrapper > .wrapLeft > .cardBlog > .titleBlog {font-size: 28px;line-height: 35px;}
  }
  @media (max-width: 320px) {
    section.compt-lastBlog > .container > .wrapper > .wrapLeft > .cardBlog > .titleBlog {font-size: 23px;line-height: 30px;}
  }

/* ---------------------- 
Component listWorkshop
---------------------- */
  section.compt-listWorkshop > .container {padding:0 20px;}
  section.compt-listWorkshop > .container > .supTitle {
    position:relative;
    max-width:820px;
    margin:auto;
    text-align: center;
  }
  section.compt-listWorkshop > .container > .wrapper {
    display: flex;
    gap: 20px;
    position:relative;
    max-width:1060px;
    margin:auto;
  }
  section.compt-listWorkshop a.cardWorkshop {
    width:100%;
    max-width: 250px;
  }
  section.compt-listWorkshop a.cardWorkshop > .head {
    background-color: lightgrey;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    height:188px;
    border-radius: 15px 15px 0 0;
  }
  section.compt-listWorkshop a.cardWorkshop > .content {
    padding: 25px;
    background-color: #F5F5F3;
    border-radius: 0 0 15px 15px;
  }
  /** ====> Media Query *****/
  @media (max-width: 1080px) {
    section.compt-listWorkshop > .container > .wrapper {
      flex-wrap: wrap;
      justify-content: center;
    }
  }
  @media (max-width: 560px) {
    section.compt-listWorkshop > .container > .wrapper {
      flex-wrap: wrap;
      justify-content: center;
    }
    section.compt-listWorkshop a.cardWorkshop {max-width: none;}
  }

/* ---------------------- 
Component mainFeatures
---------------------- */
  section.compt-mainFeatures > .container {padding: 0 20px;}
  section.compt-mainFeatures > .container > .wrapper {
      position: relative;
      display: flex;
      justify-content: space-between;
      gap: 24px;
      max-width: 1060px;
      margin: auto;
  }
  section.compt-mainFeatures > .container > .wrapper > .wrapLeft {
      max-width: 536px;
      width: 100%;
  }
  section.compt-mainFeatures > .container > .wrapper > .wrapRight {
      max-width: 432px;
      width: 100%;
  }
  section.compt-mainFeatures > .container > .wrapper > .wrapRight > .features {
    background-color:white;
    padding: 20px 20px 25px;
    border-bottom: 1px solid rgba(15, 13, 45, .2);
    margin-bottom: 20px;
  }
  section.compt-mainFeatures > .container > .wrapper > .wrapRight > .features:last-child {margin-bottom: 0;}
  /** ====> Media Query *****/  
  @media (max-width: 767px) {
    section.compt-mainFeatures > .container > .wrapper {
      gap: 50px;
      flex-direction: column;
    }
    section.compt-mainFeatures > .container > .wrapper > .wrapLeft,
    section.compt-mainFeatures > .container > .wrapper > .wrapRight {max-width: none;}
  }

/* ---------------------- 
Component mainStep
---------------------- */
  section.compt-mainStep {}

  section.compt-mainStep > .container {
    padding:0 20px;
    max-width: 1090px;
    margin: auto;
  }
  section.compt-mainStep > .container > .heading {
    text-align:center;
    max-width: 750px;
    margin: auto;
  }
  section.compt-mainStep > .container > .heading > p:nth-of-type(2) {
    max-width:640px;
    margin: auto;
  }

  section.compt-mainStep > .container > .wrapper {
    display:flex;
    justify-content: center;
    gap:16px;
  }
  section.compt-mainStep > .container > .wrapper > .wrapStep {
    padding: 35px 16px 30px;
    background-color: white;
    border:1px solid rgba(36, 32, 31, .25);
    width: 100%;
    max-width: 260px;
    border-radius: 10px;
    text-align: center;
    position: relative;
  }
  section.compt-mainStep > .container > .wrapper > .wrapStep:nth-child(even) {background-color: #F5F5F3;border:none;}
  section.compt-mainStep > .container > .wrapper > .wrapStep > .tag {
    padding:2px 24px;
    background-color: #24201F;
    border-radius: 5px;
    position: absolute;
    left: 0;
    right: 0;
    top: -10px;
    width: fit-content;
    margin: auto;
  }
  section.compt-mainStep > .container > .wrapper > .wrapStep > .title {
    font-size:19px;
    line-height: 28px;
    font-weight: 700;
  }
  /** ====> Media Query *****/  
  @media (max-width: 980px) {
    section.compt-mainStep > .container > .wrapper {
      flex-wrap: wrap;
      gap: 32px 16px;
    }
  }
  @media (max-width: 767px) {
    section.compt-mainStep > .container > .wrapper > .wrapStep {max-width: none;}
  }

/* ---------------------- 
Component FAQ DropDown
---------------------- */
  section.compt-faq > .container {
      padding: 0 24px;
  }
  section.compt-faq > .container > .wrapper {
      position: relative;
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;
      gap: 20px;
      max-width: 1060px;
      margin: auto;
  }
  section.compt-faq > .container > .wrapper > .wrapLeft {
      max-width: 360px;
  }

  section.compt-faq > .container > .wrapper > .wrapRight {
      max-width: 615px;
      width: 100%;
  }
  section.compt-faq .faq-selectDrop {
      border-bottom: 1px solid rgba(15, 13, 45, .2);
  }
  section.compt-faq .faq-selectDrop > div[role=faqDrop] {
      display: flex;
      align-items: center;
      column-gap: 12px;
      padding: 0px 24px;
      transition: box-shadow 0.1s ease-in-out 0s;
      -webkit-box-align: center;
  }
  section.compt-faq .faq-selectDrop > div[role=faqDrop]:hover {
      transition-duration: 100ms;
      background: rgba(240, 240, 240, 1);
      cursor: pointer;
  }
  section.compt-faq .faq-selectDrop > div[role=faqDrop] > button {
      outline: none;
      border: none;
      background: transparent;
      padding: 20px 0px;
      width: 100%;
      text-align: left;
      font-family: inherit;
      color: rgb(22, 20, 12);
      transition: color 0.1s ease-in-out 0s;
      cursor: pointer;
  }
  section.compt-faq .faq-selectDrop > .faqPanel {
      display: grid;
      transition: grid-template-rows 0.25s ease-in-out 0s;
      grid-template-rows: 0fr;
      padding: 0px;
      transition-duration: 200ms;
      transition-timing-function: cubic-bezier(0.7, 0, 0.3, 1);
      background: rgba(240, 240, 240, 1);
      overflow: hidden;
      opacity: 0;
  }
  section.compt-faq .faq-selectDrop > .faqPanel[data-view="true"] {
      grid-template-rows: 1fr;
      padding: 24px;
      opacity: 1;
  }
  section.compt-faq .faq-selectDrop > .faqPanel > .innerPanel {
      transition: opacity 100ms cubic-bezier(0.7, 0, 0.3, 1) 0s;
      overflow: hidden;
      opacity: 1;
      visibility: unset;
  }
  section.compt-faq .faq-selectDrop > .faqPanel > .innerPanel > .subPanel {
      display: grid;
      grid-template-columns: 1fr;
      gap: 0px;
  }
  /** ====> Media Query *****/  
  @media (max-width: 1046px) {
    section.compt-faq > .container > .wrapper {gap: 48px;}
    section.compt-faq > .container > .wrapper > .wrapLeft {
        max-width: 510px;
        text-align: center;
        margin: auto;
    }
    section.compt-faq > .container > .wrapper > .wrapRight {
        max-width: 800px;
        margin: auto;
    }
  }
  @media (max-width: 467px) {
    section.compt-faq > .container {padding: 0 14px;}
    section.compt-faq > .container > .wrapper > .wrapLeft > h2 {
        font-size: 37px;
        line-height: 43px;
    }
    section.compt-faq .faq-selectDrop > div[role=faqDrop] {column-gap: 6px;padding: 0px 14px;}
    section.compt-faq .faq-selectDrop > .faqPanel[data-view="true"] {padding: 14px;}

  }

/* ---------------------- 
Component 
=>  .compt-teamList 
=>  .compt-blogList
---------------------- */
  section.compt-teamList > .container {padding: 0 24px;}
  section.compt-teamList > .container > .wrapper {
    position: relative;
    max-width: 1060px;
    margin: auto;
    text-align: center;
  }
  section.compt-blogList > .container > .wrapper {
    position: relative;
    max-width: 1080px;
    margin: auto;
    text-align: center;
  }
  /** ====> Start filter *****/
  section.compt-teamList > .container > .wrapper > .filter,
  section.compt-blogList > .container > .wrapper > .filter {
      display: flex;
      justify-content: center;
      max-width: 700px;
      gap: 16px;
      margin: auto;
      flex-wrap: wrap;
      padding-bottom: 15px;
  }
  section.compt-teamList > .container > .wrapper > .filter > button,
  section.compt-blogList > .container > .wrapper > .filter > button {
      padding: 13px 20px;
      cursor: pointer;
      border-radius: 0;
      opacity: 1;
      background-color: transparent;
      border: 2px solid #24201F;
      /************************/
      font-family: 'Sharp Sans', sans-serif;
      font-size: 16px;
      line-height: 24px;
      font-weight: 600;
      border-radius: 100px;
      color: #24201F;
  }
  section.compt-teamList > .container > .wrapper > .filter > button:hover,
  section.compt-teamList > .container > .wrapper > .filter > button.active,
  section.compt-blogList > .container > .wrapper > .filter > button:hover,
  section.compt-blogList > .container > .wrapper > .filter > button.active {
      background-color: #24201F;
      border: 2px solid #24201F;
      color: white;
  }
  /** ====> Start team list *****/
  section.compt-teamList > .container > .wrapper > .teamList {
      display: flex;
      gap: 35px 0;
      justify-content: center;
      flex-wrap: wrap;
  }
  section.compt-teamList > .container > .wrapper > .teamList > .profil {max-width: 350px;width: 33%}
  section.compt-teamList > .container > .wrapper > .teamList > .profil > .content {
    padding: 24px;
    text-align: left;
  }
  section.compt-teamList > .container > .wrapper > .teamList > .profil > .content > img {
    max-width: 100%;
      max-height: 100%;
      border-radius: 0;
      margin-bottom: 20px;
  }
  section.compt-teamList > .container > .wrapper > .teamList > .profil > .content > .name {
    font-size: 28px;
    line-height: 32px;
  }
  section.compt-teamList > .container > .wrapper > .teamList > .profil > .content > .job {
    font-size: 18px;
    line-height: 26px;
  }
  /** ====> Start blog list *****/
  section.compt-blogList > .container > .wrapper > .blogList {
      display: flex;
      gap: 35px 0;
      justify-content: center;
      flex-wrap: wrap;   
  }
  section.compt-blogList > .container > .wrapper > .blogList > .article {
    max-width: 360px;
    width: 100%;
    background-color: #F5F5F3;
    border-radius: 10px;
  }
  section.compt-blogList > .container > .wrapper > .blogList > .article:hover {background-color: #FFFFFF;}
  section.compt-blogList > .container > .wrapper > .blogList > .article > .infoBlog {
    padding: 24px;
    text-align: left;
  }
  section.compt-blogList > .container > .wrapper > .blogList > .article > .infoBlog > .thumbnails {
    width:100%;
    height: 180px;
    background-color: darkgrey;
    margin-bottom: 30px;
    background-position: center;
    background-size: cover;
  }
  section.compt-blogList > .container > .wrapper > .blogList > .article > .infoBlog > .metaData {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
  }
  section.compt-blogList > .container > .wrapper > .blogList > .article > .infoBlog > img {
    max-width: 100%;
    max-height: 100%;
    border-radius: 0;
    margin-bottom: 20px;
  }
  /** ====> Media Query *****/
  @media (max-width: 980px) {
    section.compt-teamList > .container > .wrapper > .teamList > .profil > .content,
    section.compt-blogList > .container > .wrapper > .blogList > .article > .content {padding: 12px;}
    section.compt-teamList > .container > .wrapper > .teamList > .profil > .content > .name {font-size: 23px;line-height: 27px;}
    section.compt-teamList > .container > .wrapper > .teamList > .profil > .content > .job {font-size: 13px;line-height: 21px;}
  }
  @media (max-width: 767px) {
    section.compt-blogList > .container {padding: 0 14px;}
    section.compt-teamList > .container > .wrapper > .title {text-align: left;}
    section.compt-teamList > .container > .wrapper > .filter,
    section.compt-blogList > .container > .wrapper > .filter {
      justify-content: flex-start;
      flex-wrap: nowrap;
      align-items: center;
      overflow: scroll;
    }
    section.compt-teamList > .container > .wrapper > .filter > button,
    section.compt-blogList > .container > .wrapper > .filter > button {
      white-space: nowrap;
      padding: 5px 10px;
      border-radius: 10px;
    }
    section.compt-teamList > .container > .wrapper > .teamList > .profil {
      max-width:none;
      width: 50%;
    }
    section.compt-blogList > .container > .wrapper > .blogList > .article {max-width: 500px;}
    section.compt-blogList > .container > .wrapper > .blogList > .article > .infoBlog {padding: 20px 14px;}
    section.compt-blogList > .container > .wrapper > .blogList > .article > .infoBlog > .thumbnails {height: 260px;}
  }
  @media (max-width: 570px) {
    section.compt-teamList > .container > .wrapper > .teamList > .profil {width: auto;max-width: 420px;}
    section.compt-teamList > .container > .wrapper > .teamList > .profil > .content {padding: 0;text-align: center;}
    section.compt-teamList > .container > .wrapper > .teamList > .profil > .content > img {margin-bottom: 15px;}
  }
  @media (max-width: 467px) {
    section.compt-teamList > .container {padding: 0 14px;}
    section.compt-blogList > .container > .wrapper > .blogList > .article > .infoBlog > .thumbnails {height: 230px;}

  }

/* ---------------------- 
Component Swiper Blog Style
---------------------- */
  section.compt-swiperBlog > .container {padding: 0;}
  section.compt-swiperBlog > .container > .wrapper {
    position: relative;
    margin: auto;
  }
  /** ====> start .heading *****/
  section.compt-swiperBlog > .container > .wrapper > .heading {
    display: flex;
      justify-content: space-between;
      gap: 24px;
      max-width: 1060px;
      margin: auto;
      padding: 0 24px;
  }
  section.compt-swiperBlog > .container > .wrapper > .heading > .title {
    font-size: 29px;
    line-height: 38px;
    max-width: 390px;
  }
  /** ====> start .swiper-navigation *****/
  section.compt-swiperBlog > .container > .wrapper > .heading > .swiper-navigation {
    display: flex;
      gap: 15px;
      align-items: center;
  }
  section.compt-swiperBlog > .container > .wrapper > .heading > .swiper-navigation > .swiperBlog-button-prev, 
  section.compt-swiperBlog > .container > .wrapper > .heading > .swiper-navigation > .swiperBlog-button-next {
      min-width: 56px;
      min-height: 56px;
      width: 56px;
      height: 56px;
      border-radius: 100px;
      background-color: rgb(255, 255, 255);
      border: 1px solid rgb(36, 32, 31);
      display: flex;
      justify-content: center;
      align-items: center;
      cursor: pointer;
  }
  section.compt-swiperBlog > .container > .wrapper > .heading > .swiper-navigation > .swiperBlog-button-prev > img, 
  section.compt-swiperBlog > .container > .wrapper > .heading > .swiper-navigation > .swiperBlog-button-next > img {
    transform: translate(0);
    transition: all 600ms cubic-bezier(0.7, 0, 0.3, 1) 0s;
  }
  section.compt-swiperBlog > .container > .wrapper > .heading > .swiper-navigation > .swiperBlog-button-prev:hover img{
      transform: translate(-5px, 0px);
      transition: all 600ms cubic-bezier(0.7, 0, 0.3, 1) 0s;
  }
  section.compt-swiperBlog > .container > .wrapper > .heading > .swiper-navigation > .swiperBlog-button-next:hover img {
    transform: translate(5px, 0px);
      transition: all 600ms cubic-bezier(0.7, 0, 0.3, 1) 0s;
  }
  /** ====> start .blogSwiper *****/
  section.compt-swiperBlog > .container > .wrapper > .swiperBlog {
      margin-left: auto;
      margin-right: auto;
      position: relative;
      overflow: hidden;
      list-style: none;
      padding: 0;
      z-index: 1;
      padding-left: 120px;
      padding-right: 60px;
  }
  section.compt-swiperBlog > .container > .wrapper > .swiperBlog > .swiper-wrapper {
      position: relative;
      width: 100%;
      height: 100%;
      z-index: 1;
      display: flex;
      transition-property: transform;
      box-sizing: content-box;
      padding: 0 0 10px;
  }
  section.compt-swiperBlog > .container > .wrapper > .swiperBlog > .swiper-wrapper > .swiper-slide {
      text-align: left;
      display: flex;
      justify-content: flex-start;
      align-items: flex-start;
      flex-direction: column;
      width: 100%;
      height: fit-content;
      min-width: 350px;
      max-width: 350px;
      background-color: white;
      box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16);
      transition: all 600ms cubic-bezier(0.7, 0, 0.3, 1) 0s;
  }
  section.compt-swiperBlog > .container > .wrapper > .swiperBlog > .swiper-wrapper > .swiper-slide:hover {
    border-radius: 10px;
    transform: scale(0.95);
  }
  /** ====> start .swiper-slide-items *****/
  section.compt-swiperBlog .swiper-slide > .swiper-slide-items {
      color: inherit;
      text-decoration: none;
      padding: 26px 24px 30px;
  }
  section.compt-swiperBlog .swiper-slide > .swiper-slide-items > .infoBlog {
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      gap: 8px;
  }
  section.compt-swiperBlog .swiper-slide > .swiper-slide-items > .infoBlog > .metaData {
      display: flex;
      align-items: center;
      gap: 8px;
  }
  section.compt-swiperBlog .swiper-slide > .swiper-slide-items .thumbnails {
      width: 100%;
      height: 300px;
      background-size: cover;
      background-repeat: no-repeat;
      background-position: center;
  }
  section.compt-swiperBlog .swiper-slide > .swiper-slide-items .thumbnails > img {
      width: 100%;
      max-width: 100%;
      max-height: 100%;
  }
  /** ====> start .swiper-button-disabled *****/
  section.compt-swiperBlog .swiper-button-disabled {
      opacity: 0.4;
      cursor: auto;
  }
  /** ====> Media Query *****/
  @media (max-width: 980px) {
    section.compt-swiperBlog > .container > .wrapper > .swiperBlog {padding-left: 60px;padding-right: 30px;}
  }
  @media (max-width: 767px) {
    section.compt-swiperBlog > .container > .wrapper > .heading {
        gap: 48px;
        flex-direction: column;
        align-items: center;
    }
    section.compt-swiperBlog > .container > .wrapper > .heading > .title {text-align: center;}
    section.compt-swiperBlog > .container > .wrapper > .heading > .swiper-navigation {gap: 30px;}
    section.compt-swiperBlog > .container > .wrapper > .swiperBlog {padding-left: 30px;padding-right: 30px;}
  }
  @media (max-width: 467px) {
    section.compt-swiperBlog > .container > .wrapper > .heading {padding: 0 14px;}
    section.compt-swiperBlog > .container > .wrapper > .swiperBlog {
          padding-left: 14px;
          padding-right: 14px;
      }
      section.compt-swiperBlog > .container > .wrapper > .swiperBlog > .swiper-wrapper > .swiper-slide {min-width: 310px;}
  }
  @media (max-width: 320px) {
      section.compt-swiperBlog > .container > .wrapper > .swiperBlog > .swiper-wrapper > .swiper-slide {min-width: 290px;}
  }

/* ---------------------- 
Component Projects Style
---------------------- */
  section.compt-projects > .container {padding: 0 24px;}
  section.compt-projects > .container > .supTitle {
    max-width: 1060px;
    margin: auto;
    text-align: center;
  }
  section.compt-projects > .container > .supTitle > h2 {
    max-width: 850px;
    margin: auto;
  }
  section.compt-projects > .container > .wrapper {
    position: relative;
      display: flex;
      gap: 16px;
      max-width: 1060px;
      margin: auto;
      justify-content: center;
      flex-wrap: wrap;
  }
  section.compt-projects > .container > .wrapper > a.cardServices {
    padding:15px 15px 20px;
    max-width: 310px;
    width:100%;
    background-color: #F5F5F3;
    transition: box-shadow 600ms cubic-bezier(0.7, 0, 0.3, 1) 0s;
  }
  section.compt-projects > .container > .wrapper > a.cardServices > img {
    max-width: 100%;
  }
  section.compt-projects > .container > .wrapper > a.cardServices > .thumbnails {
    width: 100%;
    height: 180px;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
  }
  section.compt-projects > .container > .wrapper > a.cardServices:hover {
    box-shadow: 0px 20px 25px rgba(0, 0, 0, 0.16);
    transition: box-shadow 600ms cubic-bezier(0.7, 0, 0.3, 1) 0s;
  }
  /** ====> Media Query *****/
  @media (max-width:767px) {
    section.compt-projects > .container > .wrapper > a.cardServices {max-width: none;padding: 15px;}
    section.compt-projects > .container > .wrapper > a.cardServices > .thumbnails {height: 390px;}
  }
  @media (max-width: 467px) {
    section.compt-projects > .container {padding: 0 20px;}
    section.compt-projects > .container > .wrapper > a.cardServices > .thumbnails {height: 230px;}
  }

/* ---------------------- 
Component Reviews List
---------------------- */
  /* start .ctrl-reviewsList */
  section.ctrl-reviewsList {}
  section.ctrl-reviewsList > .container {padding: 0 20px;}
  section.ctrl-reviewsList > .container > .wrapper {
    position: relative;
    max-width: 1060px;
    margin: auto;
  }
  section.ctrl-reviewsList > .container > .wrapper > .heading {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  section.ctrl-reviewsList > .container > .wrapper > .heading .filter {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
  }
  section.ctrl-reviewsList > .container > .wrapper > .heading .filter > button {
      padding: 13px 20px;
      cursor: pointer;
      border-radius: 0;
      opacity: 1;
      background-color: transparent;
      border: 2px solid #24201F;
      font-family: 'Sharp Sans', sans-serif;
      font-size: 16px;
      line-height: 24px;
      font-weight: 600;
      border-radius: 100px;
      color: #24201F;
  }
  section.ctrl-reviewsList > .container > .wrapper > .heading .filter > button:hover, 
  section.ctrl-reviewsList > .container > .wrapper > .heading .filter > button.active {
      background-color: #24201F;
      border: 2px solid #24201F;
      color: white;
  }
  section.ctrl-reviewsList > .container > .wrapper > .heading > .about {
    display: flex;
    gap: 15px;
  }
  section.ctrl-reviewsList > .container > .wrapper > .heading > .about > img {max-width: 76px;}
  section.ctrl-reviewsList > .container > .wrapper > .heading > .about > .info {
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  section.ctrl-reviewsList > .container > .wrapper > .heading > .about > .info > .wrap {
    display: flex;
    gap: 10px;
  }
  section.ctrl-reviewsList > .container > .wrapper > .heading > .about > .info > .wrap p {
    font-size: 29px;
    font-weight: 700;
  }
  section.ctrl-reviewsList > .container > .wrapper > .heading > .about > .info > .number {font-size: 21px;}
  /** ====> Media Query *****/
  @media (max-width: 767px) {
    section.ctrl-reviewsList > .container > .wrapper > .heading {
        flex-direction: column-reverse;
        gap: 40px;  
    }
  }
  @media (max-width:467px) {
    section.ctrl-reviewsList > .container > .wrapper > .heading .filter > button {
      white-space: nowrap;
      padding: 5px 10px;
      border-radius: 10px;
      width: 100%;
      text-align: center;
    }
    section.ctrl-reviewsList > .container > .wrapper > .heading .supTitle {text-align: center;}
  }
  /* start .compt-reviewsList */
  section.compt-reviewsList {}
  section.compt-reviewsList > .container {padding: 0 20px;}
  section.compt-reviewsList > .container > .wrapper {
        position: relative;
        max-width: 1090px;
        margin: auto;
  }
  section.compt-reviewsList > .container > .wrapper > .reviewsList {
    column-count: 3;
    column-gap: 16px;
  }
  section.compt-reviewsList > .container > .wrapper > .reviewsList > .reviews {
    text-align: left;
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    flex-direction: column;
    width: 100%;
    height: fit-content;
    background-color: white;
    border-radius: 20px;
    box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16);
    margin-bottom: 16px;
    break-inside: avoid; /* Empêche de couper une carte en deux */
    page-break-inside: avoid; /* Pour les anciens navigateurs */
  }
  section.compt-reviewsList > .container > .wrapper > .reviewsList > .reviews > .wrap {padding: 30px 24px;}
  section.compt-reviewsList .wrap > .heading {
      display: flex;
      gap: 10px;
      align-items: center;
  }
  section.compt-reviewsList .wrap > .heading > .avatar {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 39px;
      height: 39px;
      background-color: #F5F5F3;
      border-radius: 40px;
  }
  section.compt-reviewsList .wrap > .heading > .avatar > p {
      font-size: 21px;
      font-weight: 500;
      font-family: roboto;
  }
  section.compt-reviewsList .wrap > .heading > .author > p:nth-of-type(1) {
      font-size: 16px;
      line-height: normal;
      font-weight: 700;
  }
  /** ====> Media Query *****/
  @media (max-width: 980px) {
    section.compt-reviewsList > .container > .wrapper > .reviewsList {column-count: 2;}
  }
  @media (max-width: 580px) {
    section.compt-reviewsList > .container > .wrapper > .reviewsList {column-count: 1;}
  }

/* ---------------------- 
Component Master FAQ
---------------------- */
  section.compt-masterFaq > .container {padding: 0 20px;}
  section.compt-masterFaq > .container > .wrapper {
    position: relative;
      max-width: 790px;
      margin: auto;
  }
  section.compt-masterFaq > .container > .wrapper > .heading {
    text-align: center;
      max-width: 740px;
      margin: auto;
  }

  section.compt-masterFaq > .container > .wrapper > .link {
    display: flex;
      justify-content: center;
      max-width: 700px;
      gap: 16px;
      margin: auto;
      flex-wrap: wrap;
  }
  section.compt-masterFaq > .container > .wrapper > .link > a {
      padding: 13px 20px;
      cursor: pointer;
      border-radius: 0;
      opacity: 1;
      background-color: transparent;
      border: 2px solid #24201F;
      font-family: 'Sharp Sans', sans-serif;
      font-size: 16px;
      line-height: 24px;
      font-weight: 600;
      border-radius: 100px;
      color: #24201F;
  }
  section.compt-masterFaq > .container > .wrapper > .link > a:hover {
    background-color: #24201F;
    border: 2px solid #24201F;
    color: white;
  }

  section.compt-masterFaq .section-supTitle {
    max-width: 1060px;
    margin: auto;
    padding-top: 88px;
    margin-bottom: 66px;
    border-bottom: 1px solid rgba(15, 13, 45, 0.25);
  }
  section.compt-masterFaq .section-supTitle > p {margin-bottom: 11px;}

  section.compt-masterFaq .faq-selectDrop {
      border-bottom: 1px solid rgba(15, 13, 45, .2);
  }
  section.compt-masterFaq .faq-selectDrop > div[role=faqDrop] {
      display: flex;
      align-items: center;
      column-gap: 12px;
      padding: 0px 24px;
      transition: box-shadow 0.1s ease-in-out 0s;
      -webkit-box-align: center;
  }
  section.compt-masterFaq .faq-selectDrop > div[role=faqDrop] > button {
      outline: none;
      border: none;
      background: transparent;
      padding: 20px 0px;
      width: 100%;
      text-align: left;
      font-family: inherit;
      color: rgb(22, 20, 12);
      transition: color 0.1s ease-in-out 0s;
      cursor: pointer;
  }
  section.compt-masterFaq .faq-selectDrop > div[role=faqDrop]:hover {
      transition-duration: 100ms;
      background: rgba(240, 240, 240, 1);
      cursor: pointer;
  }
  section.compt-masterFaq .faq-selectDrop > .faqPanel {
      display: grid;
      transition: grid-template-rows 0.25s ease-in-out 0s;
      grid-template-rows: 0fr;
      padding: 0px;
      transition-duration: 200ms;
      transition-timing-function: cubic-bezier(0.7, 0, 0.3, 1);
      background: rgba(240, 240, 240, 1);
      overflow: hidden;
      opacity: 0;
  }
  section.compt-masterFaq .faq-selectDrop > .faqPanel[data-view="true"] {
      grid-template-rows: 1fr;
      padding: 24px;
      opacity: 1;
  }
  section.compt-masterFaq .faq-selectDrop > .faqPanel > .innerPanel {
      transition: opacity 100ms cubic-bezier(0.7, 0, 0.3, 1) 0s;
      overflow: hidden;
      opacity: 1;
      visibility: unset;
  }
  section.compt-masterFaq .faq-selectDrop > .faqPanel > .innerPanel > .subPanel {
      display: grid;
      grid-template-columns: 1fr;
      gap: 0px;
  }
  /** ====> Media Query *****/
  @media (max-width: 580px) {
    section.compt-masterFaq .section-supTitle {margin-bottom: 36px;}
  }
  @media (max-width: 467px) {
    section.compt-masterFaq > .container > .wrapper > .heading > h2 {
      font-size: 37px;
      line-height: 43px;
    }
    section.compt-masterFaq > .container > .wrapper > .link > a {
      white-space: nowrap;
      padding: 5px 10px;
      border-radius: 10px;
      width: 100%;
      text-align: center;
    }
    section.compt-masterFaq .faq-selectDrop > div[role=faqDrop] {
      column-gap: 20px;
      padding: 0px 14px;
    }
    section.compt-masterFaq .faq-selectDrop > div[role=faqDrop] p.large-text {
      font-size: 18px;
      line-height: 26px;
    }
    section.compt-masterFaq .faq-selectDrop > .faqPanel[data-view="true"] {padding: 14px;}

  }
  @media (max-width: 320px) {
    section.compt-masterFaq > .container > .wrapper > .heading > h2 {
      font-size: 29px;
      line-height: 35px;
    }
  }

/* ---------------------- 
Component Contact Form Style
---------------------- */
  section.compt-contactForm > .container {padding: 0 24px;}
  section.compt-contactForm > .container > .wrapper {
    position: relative;
    display: flex;
    justify-content: space-between;
    gap: 48px;
    max-width: 1060px;
    margin: auto;
  }
  /** ====> Start WrapLeft *****/
  section.compt-contactForm > .container > .wrapper > .wrapLeft {max-width: 380px;width: 40%;}
  section.compt-contactForm > .container > .wrapper > .wrapLeft > .infoContact > .title {
    font-size: 34px;
    line-height: 41px;
  }
  section.compt-contactForm > .container > .wrapper > .wrapLeft > .infoContact > .subTitle {
      margin: auto;
      padding-bottom: 11px;
      border-bottom: 1px solid rgba(15, 13, 45, 0.25);
  }
  section.compt-contactForm > .container > .wrapper > .wrapLeft > .infoContact > .wrapInfo {
    display: flex;
    gap: 12px;
  }
  /** ====> Start WrapRight *****/
  section.compt-contactForm > .container > .wrapper > .wrapRight {max-width: 590px;width: 60%;}
  section.compt-contactForm > .container > .wrapper > .wrapRight > .subTitle {
      margin: auto;
      padding-bottom: 11px;
      border-bottom: 1px solid rgba(15, 13, 45, 0.25);
  }
  section.compt-contactForm > .container > .wrapper > .wrapRight form {position: relative;}
  section.compt-contactForm > .container > .wrapper > .wrapRight .formGrid {
    display: grid;
    gap: 24px;
    grid-column: span 2;
    grid-template-columns: repeat(2, 1fr);
  }
  section.compt-contactForm > .container > .wrapper > .wrapRight .formField.span1 {grid-column: span 1;}
  section.compt-contactForm > .container > .wrapper > .wrapRight .formField.span2 {grid-column: span 2;}
  section.compt-contactForm > .container > .wrapper > .wrapRight .wrap-formField {position: relative;}
  /** ====> Start WrapRight >>>>> Input | Select | Textarea *****/ 
  section.compt-contactForm > .container > .wrapper > .wrapRight select {padding: 12px 30px 12px 12px !important;}
  section.compt-contactForm > .container > .wrapper > .wrapRight input, 
  section.compt-contactForm > .container > .wrapper > .wrapRight select,
  section.compt-contactForm > .container > .wrapper > .wrapRight textarea {
    position: relative;
    background: rgba(255, 255, 255, 1);
    border-radius: 12px;
    border: none;
    box-shadow: rgba(214, 214, 214, 1) 0px 0px 0px 1px inset;
    font-size: 16px;
    line-height: 24px;
    font-weight: 600;
    min-height: 48px;
    padding: 12px;
    color: rgba(22, 20, 12, 1);
    appearance: none;
    transition: border-color 0.25s ease-in-out 0s, box-shadow 0.1s ease-in-out 0s, background-color 0.25s ease-in-out 0s, color 0.25s ease-in-out 0s, z-index 0.25s ease-in-out 0s;
    width: 100%;
    box-sizing: border-box;
    vertical-align: middle;
    font-family: inherit;
  }
  section.compt-contactForm > .container > .wrapper > .wrapRight select {
    background-repeat: no-repeat;
    background-position: center right 12px;
  }
  section.compt-contactForm > .container > .wrapper > .wrapRight input.submit {
    position: relative;
    background-color: #24201F;
    border: none;
    color: white;
    cursor: pointer;
    width: auto;
    padding: 13px 20px;
    box-shadow: rgba(142, 136, 124, 1) 0px 0px 0px 0px inset;
  }
  /** ====> Start WrapRight >>>>> Input | Select | Textarea : hover *****/
  section.compt-contactForm > .container > .wrapper > .wrapRight input:hover, 
  section.compt-contactForm > .container > .wrapper > .wrapRight select:hover,
  section.compt-contactForm > .container > .wrapper > .wrapRight textarea:hover {
    background-color: rgb(240, 240, 240);
    color: rgb(36, 32, 31);
  }
  section.compt-contactForm > .container > .wrapper > .wrapRight input.submit:hover {
    background-color: #24201F;
    color: white;
    opacity: 0.9;
  }
  /** ====> Start WrapRight >>>>> Input | Select | Textarea : focus-visible *****/
  section.compt-contactForm > .container > .wrapper > .wrapRight input:focus-visible, 
  section.compt-contactForm > .container > .wrapper > .wrapRight select:focus-visible,
  section.compt-contactForm > .container > .wrapper > .wrapRight textarea:focus-visible {
    background-color: rgb(197, 238, 251);
    color: rgb(36, 32, 31);
    box-shadow: rgba(214, 214, 214, 1) 0px 0px 0px 2px inset;
    outline: rgba(143, 136, 122, .3) solid 2px;
    outline-offset: 3px;
  }
  /** ====> Start WrapRight >>>>> Error & Alert Message *****/
  section.compt-contactForm > .container > .wrapper > .wrapRight .errorInput,
  section.compt-contactForm > .container > .wrapper > .wrapRight .alertInput {
    -webkit-box-align: center;
      align-items: center;
      color: rgb(22, 20, 12);
      display: flex;
      gap: 12px;
      position: absolute;
      right: 16px;
      top: 50%;
      transform: translateY(-50%);
  }
  section.compt-contactForm > .container > .wrapper > .wrapRight .errorMessage,
  section.compt-contactForm > .container > .wrapper > .wrapRight .alertMessage {
    display: flex;
    gap:10px;
      padding-left: 0px;
      font-size: 13px;
      font-weight: 500;
      margin-top: 12px;
  }
  /** ====> Media Query *****/
  @media (max-width: 980px) {
    section.compt-contactForm > .container > .wrapper > .wrapRight .formField.span1 {grid-column: span 2;}
  }
  @media (max-width: 767px) {
    section.compt-contactForm > .container > .wrapper {flex-wrap: wrap;}
    section.compt-contactForm > .container > .wrapper > .wrapLeft {max-width: none;width: auto;}
    section.compt-contactForm > .container > .wrapper > .wrapRight {max-width: none; width: 100%;}
  }
  @media (max-width: 467px) {
    section.compt-contactForm > .container {padding: 0 14px;}
    section.compt-contactForm > .container > .wrapper > .wrapLeft > .infoContact > .title {
        font-size: 26px;
        line-height: 33px;
    }
  }

/* ---------------------- 
Component Legal
---------------------- */
  section.compt-legal > .container {padding: 0 20px;}
  section.compt-legal > .container > .wrapper {
      position: relative;
      display: flex;
      justify-content: space-between;
      flex-direction: column;
      max-width: 800px;
      margin: auto;
  }
  section.compt-legal .content h2 {
      font-size: 30px;
      line-height: 38px;
  }

/* ---------------------- 
Cookie Consent Banner Style
---------------------- */
  #cookie-consent-banner {display: none;}
  #cookie-consent-banner .container {
      position: fixed;
      max-width: 490px;
      bottom: 0;
      left: 0;
      right: 0;
      padding: 20px;
      z-index: 999;
  }
  #cookie-consent-banner .container > .wrapper {
      position: relative;
      padding: 25px 20px;
      background-color: #F5F5F3;
      border: 1px solid rgba(36, 32, 31, .25);
      border-radius: 20px;
      box-shadow: 0px 10px 10px rgba(36, 32, 31, 0.16);
  }
  /** ====> start .heading *****/
  #cookie-consent-banner .container > .wrapper > .heading {
      display: flex;
      justify-content: space-between;
      align-items: center;
  }
  #cookie-consent-banner .container > .wrapper > .heading > img {width:150px;}
  #cookie-consent-banner .container > .wrapper > .heading > .btnClose {
    height: auto;
    line-height: 0;
    cursor: pointer;
  }
  #cookie-consent-banner .container > .wrapper > .heading > .btnClose > img {width:14px;}
  /** ====> start .buttonGroup *****/
  #cookie-consent-banner .buttonGroup {flex-wrap: initial;}
  #cookie-consent-banner .buttonGroup > a, 
  #cookie-consent-banner .buttonGroup > div {
      width: 100%;
      text-align: center;
  }
  /** ====> Media Query *****/
  @media (max-width: 467px) {
    #cookie-consent-banner .container {padding: 14px;}
    #cookie-consent-banner .buttonGroup {
      flex-wrap: wrap;
      gap: 8px;
    }
  }

/* ---------------------- 
Campaign Banner Style
---------------------- */
  #campaignBanner {display: none;}
  #campaignBanner.show {display: block;}
  #campaignBanner > .container {
      padding: 18px 20px;
      background-color: #20422D;
      position: relative;
      display: flex;
      align-items: center;
  }
  #campaignBanner > .container > .closeBanner {
    position: absolute;
    right: 45px;
    cursor: pointer;
  }
  #campaignBanner > .container > .wrapper {
    display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 25px;
      max-width: 945px;
      margin: auto;
  }
  #campaignBanner > .container > .wrapper > .banner-logo-mobile {display: none;}
  #campaignBanner > .container > .wrapper > .content {max-width:665px;}
  /** ====> Media Query *****/
  @media (max-width: 1080px) {
    #campaignBanner {
      position: fixed;
      right: 0;
      bottom: 0;
      max-width: 320px;
      margin: 20px;
      z-index: 100;
    }
    #campaignBanner > .container {
      border: 1px solid rgba(36, 32, 31, .25);
      border-radius: 20px;
      box-shadow: 0px 10px 10px rgba(36, 32, 31, 0.16);
      flex-direction: column;
      align-items: center;
      gap:15px;
    }
    #campaignBanner > .container > .closeBanner {
      position: absolute;
      right: 20px;
    }
    #campaignBanner > .container > .wrapper {
      flex-direction: column;
      align-items: flex-start;
    }
    #campaignBanner > .container > .wrapper > .banner-logo-mobile {display: block;}
    #campaignBanner > .container > .wrapper > .banner-logo-desktop {display: none;}
  }
  @media (max-width: 467px) {
    #campaignBanner {margin: 14px;max-width: none;}
  }
/* ---------------------- 
Component Article Header Style
---------------------- */
  section.compt-article-header > .container {padding: 80px 24px 0;}
  section.compt-article-header > .container > .wrapper {
    display: flex;
    justify-content: space-between;
    gap:25px;
    max-width: 1060px;
    margin: auto;
  }
  /** ====> start .wrapCenter *****/
  section.compt-article-header > .container > .wrapper > .wrapCenter {
    width: 100%;
    max-width: 710px;
    margin: auto;
    text-align: center;
  }
  section.compt-article-header > .container > .wrapper > .wrapCenter .buttonGroup {justify-content: center;}
  /** ====> start .wrapSingle *****/
  section.compt-article-header > .container > .wrapper > .wrapSingle {
    width: 100%;
    max-width: 1060px;
    margin: auto;
    text-align: left;
  }
  section.compt-article-header > .container > .wrapper > .wrapSingle > .metaData {
    display: flex;
    align-items: center;
    gap: 8px;
  }
  section.compt-article-header > .container > .wrapper > .wrapSingle > h1 {
    font-size: 46px;
    line-height: 58px;
  }
  section.compt-article-header > .container > .wrapper > .wrapSingle > .wrapContent {
    position: relative;
    overflow: hidden;
  }
  section.compt-article-header > .container > .wrapper > .wrapSingle > .wrapContent > .tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
  }
  section.compt-article-header > .container > .wrapper > .wrapSingle > .wrapContent > .tags > .tag {
    padding: 8px 12px;
    background-color: #EAEBED;
    border-radius: 100px;
    text-wrap: nowrap;
  }
  section.compt-article-header > .container > .wrapper > .wrapSingle > .thumbnails {margin-top: 77px;}
  section.compt-article-header > .container > .wrapper > .wrapSingle > .thumbnails > img {
    width: 100%;
    max-width: 100%;
    max-height: 100%;
  }
  /** ====> start .wrapLeft *****/
  section.compt-article-header > .container > .wrapper > .wrapLeft {
    width: 60%;
    max-width: 585px;
  }
  section.compt-article-header > .container > .wrapper > .wrapLeft > p {max-width: 520px;}  
   /** ====> start .wrapRight *****/ 
  section.compt-article-header > .container > .wrapper > .wrapRight {
    width: 50%;
    max-width: 450px;
  }
  section.compt-article-header > .container > .wrapper > .wrapRight > img {
    max-width: 100%;
    max-height: 100%;
    border-radius:0;
    /** ----- **/
    position: sticky;
    top: 94px;
    transition-property: transform;
    transition-duration: 0.5s;
  }
  /** ====> Media Query *****/
  @media (max-width: 1119px) {
    section.compt-article-header > .container {padding: 58px 24px 0;}
  }
  @media (max-width: 767px) {
    section.compt-article-header > .container > .wrapper {
      flex-direction: column;
      gap: 50px;
    }
    /** ====> start .wrapSingle *****/
    section.compt-article-header > .container > .wrapper > .wrapSingle > .thumbnails {
        margin-top: 40px;
    }
    /** ====> start .wrapLeft & .wrapRight *****/
    section.compt-article-header > .container > .wrapper > .wrapLeft,
    section.compt-article-header > .container > .wrapper > .wrapRight {
      width: auto;
      max-width: none;
    }
    section.compt-article-header > .container > .wrapper > .wrapRight {
      display: flex;
      flex-direction: column;
    }
    section.compt-article-header > .container > .wrapper > .wrapLeft > p {max-width: none;}
  }
  @media (max-width: 467px) {
    section.compt-article-header > .container {padding: 48px 14px 0;}
    /** ====> start .wrapCenter *****/
    section.compt-article-header > .container > .wrapper > .wrapCenter {text-align: left;}
    /** ====> start .wrapSingle *****/
    section.compt-article-header > .container > .wrapper > .wrapSingle > h1 {
      font-size: 32px;
      line-height: 39px;
    }
    section.compt-article-header > .container > .wrapper > .wrapSingle > .wrapContent > .tags {gap: 4px;}
    section.compt-article-header > .container > .wrapper > .wrapSingle > .thumbnails {margin-top: 30px;}
  }

/* ---------------------- 
Component Article Blog Style
---------------------- */
  section.compt-article {
    background-color: white;
    border-radius:0 0 40px 40px;
    margin: 0 20px;
    transition: border-radius 0.2s linear, margin 0.2s linear;
  }
  section.compt-article > .container {padding: 88px 24px 0;}
  section.compt-article > .container > .wrapper {
    position: relative;
    display: flex;
    justify-content: space-between;
    gap: 24px;
    max-width: 1060px;
    margin: auto;
  }
  /** ====> start .wrapCenter *****/
  section.compt-article .wrapCenter {
    width: 100%;
    max-width: 800px;
    margin: auto;
  }
  /** ====> start .contentArticle [Type Bloc] *****/
  section.compt-article .contentArticle h2 {
    font-size: 30px;
    line-height: 38px;
  }
  section.compt-article .contentArticle h3 {
    font-size: 20px;
    line-height: 28px;
  }
  section.compt-article .contentArticle ul {
    margin-left:20px;
    list-style: inside;
    font-weight: 500;
  }
  section.compt-article .contentArticle ul > li {
    font-size: 14px;
    line-height: 22px;
    font-weight: 600;
  }
  section.compt-article .contentArticle ol {
    list-style: auto;
    font-weight: 500;
    list-style-position: inside;
    margin-left: 20px;
  }
  section.compt-article .contentArticle ol > li {
    font-size: 14px;
    line-height: 22px;
    font-weight: 600;
  }
  section.compt-article .contentArticle .sWrap > img {
    width: 100%;
    max-width: 100%;
    max-height: 100%;
  }
  section.compt-article .contentArticle .mWrap {
    display: flex;
    justify-content: center;
    gap: 20px;
  }
  section.compt-article .contentArticle .mWrap > .picture {
    max-width: 390px;
  }
  section.compt-article .contentArticle .mWrap img{
    width: 100%;
      max-width: 100%;
      max-height: 100%;
  }
  /** ====> start blockquote [Type Bloc] *****/
  section.compt-article .contentArticle blockquote {
    padding: 0px 0px 0px 32px;
    border-left: 4px solid #409E75;
    color: #409E75;
  }
  section.compt-article .contentArticle blockquote > p {
      font-weight: 600;
      font-size: 40px;
      line-height: 60px;
  }
  section.compt-article .contentArticle blockquote.pink {border-left: 4px solid #D7A3E5;color: #D7A3E5;}
  section.compt-article .contentArticle blockquote.lightpink {border-left: 4px solid #E0B9E9;color: #E0B9E9;}
  section.compt-article .contentArticle blockquote.green {border-left: 4px solid #2BBF8F;color: #2BBF8F;}
  section.compt-article .contentArticle blockquote.lightgreen {border-left: 4px solid #60CEA8;color: #60CEA8;}
  section.compt-article .contentArticle blockquote.purple {border-left: 4px solid #6053FF;color: #6053FF;}
  section.compt-article .contentArticle blockquote.lightpurple {border-left: 4px solid #AFA7F9;color: #AFA7F9;}
  section.compt-article .contentArticle blockquote.lightblue {border-left: 4px solid #71affc;color: #71affc;}
  /** ====> start special gutenberg **/
  :where(.wp-block-columns.is-layout-flex) {
    gap: 1em !important;
  }
  /** ====> start .summary [Type Bloc] *****/
  section.compt-article .contentArticle .summary {
    padding: 24px;
    background: #F5F5F3;
    border-radius: 10px;
  }
  section.compt-article .contentArticle .summary > .supTitle {margin-bottom: 15px;}
  section.compt-article .contentArticle .summary > .sumList {
    display:flex;
    flex-direction: column;
    gap:4px;
  }
  section.compt-article .contentArticle .summary > .sumList > a {
    text-decoration: underline 1px transparent;
      text-underline-offset: 0.25em;
      transition: all 100ms linear 0s;
  }
  section.compt-article .contentArticle .summary > .sumList > a:hover {
    text-decoration: underline 1px rgba(22, 20, 12, 0.7);
  }
  /** ====> start .buttonGroup [Type Bloc] *****/
  section.compt-article .contentArticle .buttonGroup {justify-content: center;}
  section.compt-article .contentArticle .buttonGroup > a {
    width: 100%;
      text-align: center;
      max-width: 340px;
  }
  /** ====> start .wp-block-embed iframe [iFrame Youtube] **/
  section.compt-article .contentArticle .wp-block-embed__wrapper {display: flex;}
  section.compt-article .contentArticle .wp-block-embed iframe {width:100%;}
  /** ====> Media Query *****/
  @media (max-width: 1110px) {
  section.compt-article {margin: 0;border-radius:0;}
  }
  @media (max-width: 980px) {
    section.compt-article > .container {padding: 68px 24px 0;}
    section.compt-article > .container > .wrapper {
      gap: 48px;
      flex-direction: column-reverse;
    }
    section.compt-article .wrapLeft .profil {
        padding-bottom: 0;
        border-bottom: 0px solid rgba(15, 13, 45, 0.25);
    }
  }
  @media (max-width: 767px) {
    section.compt-article > .container {padding: 44px 24px 0;}
    section.compt-article .contentArticle .mWrap {
        flex-direction: column;
        align-items: center;
    }
    section.compt-article .contentArticle .mWrap > .picture {
      max-width: none;
      width: 100%;
    }
    section.compt-article .contentArticle blockquote {padding: 0px 0px 0px 27px;}
    section.compt-article .contentArticle blockquote > p {
        font-size: 35px;
        line-height: 55px;
    }
  }
  @media (max-width: 467px) {
    section.compt-article > .container {padding: 22px 14px 0;}
    section.compt-article .contentArticle h2 {
        font-size: 25px;
        line-height: 33px;
    }
    section.compt-article .contentArticle h3 {
        font-size: 15px;
        line-height: 23px;
    }
    section.compt-article .contentArticle ul {margin-left: 0px;}
    section.compt-article .contentArticle ul > li {
      font-size: 12px;
      line-height: 20px;
    }
    section.compt-article .contentArticle ol {margin-left: 0px;}
    section.compt-article .contentArticle ol > li {
      font-size: 12px;
      line-height: 20px;
    }
    section.compt-article .contentArticle blockquote {padding: 0px 0px 0px 16px;}
    section.compt-article .contentArticle blockquote > p {
        font-size: 25px;
        line-height: 45px;
    }
    section.compt-article .contentArticle .summary {padding: 14px;}
  }


/* ---------------------- 
searchPopup Style
---------------------- */
  /** ====> start .searchBar *****/
  .searchBar[role="menuButton"] {}
  .searchBar[role="menuButton"] > svg {height: 30px;}
  /** ====> start #search-popup *****/
  #search-popup {
    display: flex;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.8);
    z-index: 9999;
  }
  #search-popup > .container {
    margin: auto;
    width: 100%;
    max-width: 760px;
    border-radius: 15px;
    padding: 20px;
  }
  #search-popup > .container > div:last-child {border-bottom: 0px solid #E4E2DC;}
  /** ====> start .searchBar *****/
  #search-popup > .container > .searchBar > input {
      position: relative;
      background: rgb(255, 255, 255, 1);
      border-radius: 15px 15px 0 0;
      border: none;
      border-bottom: 1px solid #E4E2DC;
      /*box-shadow: rgba(142, 136, 124, 1) 0px 0px 0px 1px inset;*/
      font-size: 16px;
      line-height: 24px;
      font-weight: 600;
      min-height: 48px;
      padding: 18px;
      padding-left: 54px;
      padding-right: 54px;
      color: rgba(22, 20, 12, 1);
      appearance: none;
      transition: border-color 0.25s ease-in-out 0s, box-shadow 0.1s ease-in-out 0s, background-color 0.25s ease-in-out 0s, color 0.25s ease-in-out 0s, z-index 0.25s ease-in-out 0s;
      width: 100%;
      height: 57px;
      box-sizing: border-box;
      vertical-align: middle;
      font-family: inherit;
  }
  #search-popup > .container > .searchBar > input:focus-visible {
    background-color: #e9e8e6;
    color: rgb(22, 20, 12);
    border-bottom: 1px dashed rgb(36, 32, 31);
    outline: rgb(143, 136, 122) solid 0px;
    outline-offset: 0px;
  }
  #search-popup .searchBar {
      position: relative;
      width: 100%;
  }
  #search-popup .searchBar > .search-icon {
      position: absolute;
      left: 18px; /* Même padding que l'input */
      top: 50%;
      transform: translateY(-50%);
      width: 21px;
      height: 21px;
      pointer-events: none;
      margin-right: 15px;
      z-index: 1;
  }
  #search-popup .searchBar > .close-icon {
      position: absolute;
      right: 18px; /* Même padding que l'input */
      top: 50%;
      transform: translateY(-50%);
      width: 21px;
      height: 21px;
      pointer-events: auto; /* Pour permettre le clic sur l'icône de fermeture */
      cursor: pointer;
      z-index: 1;
  }
  /** ====> start .recentSearches *****/
  #search-popup .recentSearches {
    display:flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 18px;
    border-bottom: 1px solid #E4E2DC;
  }
  #search-popup .recentSearches > .wrap {position: relative;}
  #search-popup .recentSearches > .wrap > .itemsRecent {
    display:flex;
    padding-bottom: 12px;
    cursor: pointer;
    opacity: .7;
  }
  #search-popup .recentSearches > .wrap > .itemsRecent:hover {opacity: 1;}
  #search-popup .recentSearches > .wrap > .itemsRecent:last-of-type {padding-bottom: 0;}
  #search-popup .recentSearches > .wrap > .itemsRecent > img {margin-right:10px;}
  #search-popup .recentSearches > .clearRecent {
    cursor:pointer;
    opacity: .5;
  }
  #search-popup .recentSearches > .clearRecent:hover {opacity: 1;}
  /** ====> start .popularSearch *****/
  #search-popup .popularSearch {
    display:flex;
      flex-direction: column;
    padding: 18px;
    border-bottom: 1px solid #E4E2DC;
  }
  #search-popup .popularSearch > .wrap {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
  }
  #search-popup .popularSearch > .wrap > .itemsPopular {
    background-color: #e9e8e6;
    border-radius: 30px;
    border: 1px solid rgb(36, 32, 31, .2);
    cursor:pointer;
  }
  #search-popup .popularSearch > .wrap > .itemsPopular:hover {
    border: 1px solid rgb(36, 32, 31, 1);
  }
  #search-popup .popularSearch > .wrap > .itemsPopular > p {padding:5px 12px;}
  /** ====> start .noResults *****/ 
  #search-popup .noResults {
    display:flex;
    align-items: center;
    flex-direction: column;
    padding: 18px;
    border-bottom: 1px solid #E4E2DC;
  }
  /** ====> start .filterResults *****/
  #search-popup .filterResults {
    display: flex;
    padding: 18px;
    border-bottom: 1px solid #E4E2DC;
    justify-content: space-between;
    align-items: flex-start;
  }
  #search-popup .filterResults > .wrap {
      display: flex;
      flex-wrap: wrap;
      flex-direction: column;
  }
  #search-popup .filterResults > .wrap > .items {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
  }
  #search-popup .filterResults > .wrap > .items > .itemsFilter {
    background-color: #f5f5f3;
    border-radius: 30px;
    border: 1px solid rgb(36, 32, 31, .2);
    cursor:pointer;
  }
  #search-popup .filterResults > .wrap > .items > .itemsFilter.active {background-color: #E9E8E5;}
  #search-popup .filterResults > .wrap > .items > .itemsFilter:hover {border: 1px solid rgb(36, 32, 31, 1);}
  #search-popup .filterResults > .wrap > .items > .itemsFilter > p {padding:5px 12px;}
  #search-popup .filterResults > .clearResults {
    cursor:pointer;
    opacity: .5;
  }
  #search-popup .filterResults > .clearResults:hover {opacity: 1;}
  /** ====> start .searchResults *****/
  #search-popup .searchResults {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 18px;
    border-bottom: 1px solid #E4E2DC;
  }
  #search-popup .searchResults > .cardResults {
    padding: 10px 15px 10px 10px;
    border: 1px solid rgb(36, 32, 21, .2);
    border-radius: 10px;
  }
  #search-popup .searchResults > .cardResults:hover {background-color: #E9E8E5;}
  #search-popup .searchResults > .cardResults > .wrap {
    display: flex;
    align-items: center;
    gap: 15px;
  }
  #search-popup .searchResults > .cardResults > p {
    margin-top: 10px;
    opacity: .6;
  }
  #search-popup .searchResults > .cardResults > .wrap > .results {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: -webkit-fill-available;
  }
  #search-popup .searchResults > .cardResults > .wrap > .results > .info > p:first-of-type {margin-bottom: 8px;}
  /** ====> start .spinner *****/
  #search-popup .spinner {
    display: flex;
    justify-content: center;
    padding: 20px 0;
  }
  #search-popup .spinner img {
      width: 40px;
      height: 40px;
      animation: spin 1s linear infinite;
  }
  @keyframes spin {
      0% { transform: rotate(0deg); }
      100% { transform: rotate(360deg); }
  }
  /** ====> Media Query *****/
  @media (max-width: 467px) {
    #search-popup > .container {padding: 10px;}

    #search-popup .recentSearches,
    #search-popup .popularSearch, 
    #search-popup .filterResults,
    #search-popup .searchResults {padding: 10px;}

    #search-popup .recentSearches,
    #search-popup .filterResults {
      flex-wrap: wrap;
      gap: 10px;
    }
            
    #search-popup .searchResults > .cardResults > .wrap > img {display: none;}
  }

/* ---------------------- 
Footer CSS
---------------------- */
  footer {
    position: relative;
    margin: 0 20px;
    border-radius: 40px 40px 0 0;
    background-color: white;
    transition: border-radius 0.2s linear, margin 0.2s linear;
  }
  footer > .container {
    max-width: 1215px;
    margin: auto;
    padding: 88px 93px 105px;
  }
  footer > .container > .wrapper {
    display: flex;
    justify-content: space-between;
    gap: 30px;
  }
  footer > .container > .wrapper > .wrapRight {
    width: 100%;
    max-width: 980px;
  }
  footer > .container > .wrapper > .wrapRight > .title {
    font-size:47px;
    line-height: 56px;
    max-width: 830px;
  }
  footer > .container > .wrapper > .wrapRight > .title a {
    font-size: inherit;
    line-height: inherit;
    color:#409E75;
  }
  footer > .container > .wrapper > .wrapRight > .wrap {
    display: flex;
    justify-content: space-between;
    gap: 20px;
  }
  footer > .container > .wrapper > .wrapRight > .wrap > .column {    
      width: 100%;
      /*min-width: 285px;*/
      max-width: 285px;
    }
  footer > .container > .wrapper > .wrapRight > .wrap > .column p {letter-spacing: -.01em}
  footer > .container > .legacy {
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;
      gap: 10px;
  }
  footer > .container > .legacy > .legalLink {
      display: flex;
      gap: 10px 40px;
      flex-wrap: wrap;
  }
  footer .line {
    height: 1px;
      background-color: #24201F;
      opacity: 0.2;
  }
  /** ====> Media Query *****/
  @media (max-width: 1280px) {
    footer > .container {padding: 88px 40px;}
  }
  @media (max-width: 1110px) {
    footer {margin: 0;border-radius:0;}
    footer > .container > .wrapper {
      flex-direction: column;
    }
    footer > .container > .wrapper > .wrapRight {max-width: none;}
    footer > .container > .wrapper > .wrapRight > .title {
      max-width: none;
    }
    
  }
  @media (max-width: 980px) {
    footer > .container {padding: 88px 20px;}
    footer > .container > .wrapper > .wrapRight > .wrap {
      justify-content: flex-start;
      flex-wrap: wrap;
    }
    footer > .container > .wrapper > .wrapRight > .wrap > .column {
        padding: 30px;
        max-width: none;
        background: #F5F5F3;
        border-radius: 20px;
    }
  }
  @media (max-width: 767px) {
    footer > .container > .wrapper > .wrapRight > .title {
      font-size: 37px;
      line-height: 46px;
    }
  }
  @media (max-width: 630px) {
    footer > .container > .wrapper > .wrapRight > .wrap > .column {
      max-width: none;
      padding: 30px 20px;
    }
  }
  @media (max-width: 467px) {
    footer > .container > .wrapper > .wrapRight > .title {
        font-size: 27px;
        line-height: 36px;
    }
  }
/* ---------------------- 
Media Query General
---------------------- */
  @media (max-width: 1110px) {
    section.wrapBlock {
      border-radius: 0 !important;
      margin: 0 !important;
    }
  }
  @media (max-width: 980px) {
    h2 {
      font-size: 39px;
      line-height: 46px;
    }
  }
  @media (max-width: 767px) {
    .clamp.ln1, .clamp.ln2, .clamp.ln3, .clamp.ln4, .clamp.ln5, .clamp.ln6, .clamp.ln7, .clamp.ln8, .clamp.ln9 {
      -webkit-line-clamp: 10;
    }
  }
  @media (max-width: 467px) {
    h2 {
      font-size: 26px;
      line-height: 33px;
    }
    h3 {
      font-size: 22px;
      line-height: 30px;
    }
    .slarge-text {
      font-size: 19px;
      line-height: 25px;
    }
    .medium-text {
      font-size: 16px;
      line-height: 24px;
    }
    .tiny-text {
      font-size: 11px;
      line-height: 15px;
    }
    .buttonGroup > a, .buttonGroup > div {
      width: 100%;
      text-align: center;
    }
  }
  @media (max-width: 320px) {
    h2 {
      font-size: 25px;
      line-height: 32px;
    }
  }