@charset "UTF-8";
/*!
 * Bootstrap  v5.3.2 (https://getbootstrap.com/)
 * Copyright 2011-2023 The Bootstrap Authors
 * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
 */

.paragraph--type--title-h1 {
  margin: 30px 0 75px;
}

.paragraph--type--title-h1 {
  text-align: center;
}

.paragraph--type--title-h1 h1 {
  font-weight: 700;
  font-size: 50px;
  letter-spacing: 0.5px;
}

.paragraph--type--background-image.banner-top {
  height: 23vw;
}

.paragraph--type--background-image.banner-top-page {
  height: 10.26vw;
  margin-bottom: 80px;
}



/* ---------START video with text---------  */

/* Desktop */
  .paragraph--type--video-with-text {
     margin-bottom: 100px;
  }
  .paragraph--type--video-with-text .video-title-wrapper {
    display: flex;
    height: 100%;
    margin-bottom: 20px;
  }
  .paragraph--type--video-with-text .title-icon {
     width: 15px;
     margin-top: 3px;
     background: #e2ba5b;
     padding-right: 15px;
     margin-right: 10px;
  }

  .paragraph--type--video-with-text .video-title {
     margin: 0;
     font-size: 32px;
     font-weight: 700;
     line-height: 1em;
     letter-spacing: 0.5px;
     text-align: left;
     font-family: "Saira", sans-serif;
     padding: 5px 0;
  }


.paragraph--type--video-with-text .video-cover-image {
  cursor: pointer;
  position: relative;
}

.paragraph--type--video-with-text .video-cover-image img {
  width: 100%;
}

.paragraph--type--video-with-text .video-cover-image:after {
  content: url("../images/play-icon.png");
  position: absolute;
  top: 50%; left: 50%; transform: translate(-50%, -50%);
  cursor: pointer;
}

  /* overlay on video */

  .paragraph--type--video-with-text .video-content-wrapper {
    padding-right: 50px;
  }

  .paragraph--type--text-block-with-media .text_b_w_me_media {
    padding-left: 50px;
  }

  /*.paragraph--type--video-with-text .field--name-field-video{*/
  /*  position: relative;*/
  /*}*/
  /*.paragraph--type--video-with-text .field--name-field-video img{*/
  /*  opacity: 0.5;*/
  /*}*/
  /*.paragraph--type--video-with-text .field--name-field-video::before {*/
  /*  content: "";*/
  /*  position: absolute;*/
  /*  background-color: black;*/
  /*  width: 100%;*/
  /*  height: 100%;*/
  /*}*/


/* END Desktop  */




/* ---------END video with text ---------  */

/* ---------START image with text---------  */

  .paragraph--type--image-with-text {
     padding: 100px 0px 0px 0px;
  }
  .paragraph--type--image-with-text .horizontal-title-icon {
    width: 160px;
    height: 10px;
    background: #e2ba5b;
    margin-bottom: 10px;
    margin-top: -25px;
  }
  .paragraph--type--image-with-text .image_with_title {
    font-size: 32px;
    font-weight: 700;
    line-height: 1em;
    letter-spacing: 1px;
  }
  .paragraph--type--image-with-text .sub_title {
    font-size: 27px;
    font-weight: 600;
    line-height: 1em;
    padding-bottom: 20px;
  }

  .paragraph--type--image-with-text .image_with_link a {
    background-color: #2c2c2c;
    color: #fff;
    border: 1px solid;
    padding: 13px 30px;
    border-radius: 4px;
    font-size: 18px;
    font-weight: 600;
    cursor: pointer;
    text-transform: uppercase;
    display: inline-block;
    text-align: center;
    text-decoration: none;
    line-height: 1em;
    letter-spacing: 1px;
    text-wrap: nowrap;
    transition: background-color 0.4s ease 0s, color 0.4s ease 0s;
  }

  .paragraph--type--image-with-text .image_with_link a:hover {
    background-color: transparent;
    color: #2c2c2c;
  }
  .paragraph--type--image-with-text .iwt_image img {
    width: 100%;
  }

  .paragraph--type--image-with-text .iwt_image {
    padding-left: 50px;
  }


/* Tablet */
@media (min-width:768px) and (max-width:1000px){

  .paragraph--type--image-with-text .horizontal-title-icon {
     width: 160px;
     height: 10px;
     background: #e2ba5b;
     margin-bottom: 10px;
     margin-top: 15px;
  }

  .paragraph--type--image-with-text {
    padding: 60px 0px 0px 0px;
  }
}

/* Mobile */
 @media only screen and (max-width: 767px) {

  .paragraph--type--image-with-text .iwt_image {
     order: 1;
     padding-bottom: 20px;
  }
  .paragraph--type--image-with-text .iwt_wrapper {
     order: 2;
  }
  .paragraph--type--image-with-text .horizontal-title-icon {
     width: 160px;
     height: 10px;
     background: #e2ba5b;
     margin-bottom: 10px;
     margin-top: 15px;
  }
  .paragraph--type--image-with-text .image-with-text-layout {
    gap: 10px;
  }
  .paragraph--type--image-with-text {
    padding: 60px 0px 0px 0px;
  }
}
/* END Mobile  */
/* ---------END Image with text ---------  */

/* ---------START background image with text---------  */

.paragraph--type--background-image-with-text {
   padding: 60px 0px;
   position: relative;
   background: url('');
   background-size: cover;
   background-position: center;
   background-repeat: no-repeat;
   width: 100%;
   height: auto;
   margin-top: 80px;
}
.paragraph--type--background-image-with-text::before {
   content: '';
   position: absolute;
   width: 100%;
   height: 100%;
   left: 0;
   top: 0;
   background: linear-gradient(to right, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0));
   background: linear-gradient(to right, rgba(0, 0, 0, 1) 25%, rgba(0, 0, 0, 0.7)  50%, rgba(0, 0, 0, 0) 100%);
   z-index: 1;
}
 .paragraph--type--background-image-with-text .backgroud-image-with-text-wrapper {
   z-index: 2;
}
 .paragraph--type--background-image-with-text .bg_image_title {
   font-family: "Saira", sans-serif;
   font-size: 35px;
   font-weight: 700;
   line-height: 1.2em;
   text-align: left;
   color: #fff;
}
 .paragraph--type--background-image-with-text .bg_image_description {
   font-size: 23px;
   font-weight: 700;
   line-height: 30.55px;
   text-align: left;
   color: #fff;
   padding-bottom: 10px;
}
 .paragraph--type--background-image-with-text .title-wrapper {
  display: flex;
  width: 100%;
  justify-content: flex-start;
  padding-bottom: 14px;
}
 .paragraph--type--background-image-with-text .title-icon {
   width: 15px;
   background: #e2ba5b;
   padding-right: 15px;
   margin-right: 10px;
}
 .paragraph--type--background-image-with-text .bg_link a {
   background-color: #fff;
   color: #2c2c2c;
   border: 1px solid;
   padding: 13px 30px;
   border-radius: 4px;
   font-size: 18px;
   font-weight: 600;
   cursor: pointer;
   text-transform: uppercase;
   display: inline-block;
   text-align: center;
   text-decoration: none;
   line-height: 1em;
   letter-spacing: 1px;
   text-wrap: nowrap;
   transition: background-color 0.4s ease 0s, color 0.4s ease 0s;
}

.paragraph--type--background-image-with-text .bg_link a:hover {
  background: transparent;
  color: #fff;
}

.paragraph--type--background-image-with-text .bg_link .colorbox-media-video {
  background: #a20000;
  color: white;
  padding: 15px 80px;
  border-radius: 4px;
  font-size: 20px;
  font-weight: 500;
  cursor: pointer;
  text-transform: uppercase;
  display: inline-block;
  text-align: center;
  text-decoration: none;
  line-height: 23.5px;
  letter-spacing: 0.1em;
}
 @media only screen and (max-width: 767px) {
   .paragraph--type--background-image-with-text {
     padding: 50px 15px 95px 15px;
  }
   .paragraph--type--background-image-with-text .bg_image_title {
     font-size: 28px;
     font-weight: 700;
     line-height: 28px;
  }
   .paragraph--type--background-image-with-text .bg_image_description {
     font-size: 24px;
     line-height: 24px;
     padding-bottom: 20px;
  }

  .paragraph--type--background-image-with-text {
   margin-top: 40px;
  }
}

@media (min-width:768px) and (max-width:997px){
  .paragraph--type--background-image-with-text {
    margin-top: 50px;
  }
}


/* ---------END background image with text---------  */


.two-column-layout-display{
  height: 100%;
}

.two-column-wrapper{
  text-align: center;
  height: 100%;
  padding-bottom: 60px;
  position: relative;
}

.two-column-layout {
  justify-content: space-around;
}

.two-column-wrapper .media-image img {
  height: 140px;
  width: auto;
  padding-bottom: 20px;
}

.two-column-wrapper .two-column-title {
  font-size: 33px;
  font-weight: 600;
  line-height: 1em;
  padding-bottom: 20px;
}

.two-column-wrapper .two-column-description {
  text-align: center;
}

.two-column-wrapper .two-column-link {
    margin-top: auto;
    position: absolute;
    bottom: 5px;
    left: 50%;
    transform: translateX(-50%);
}

.two-column-wrapper .two-column-link a {
  background-color: #2c2c2c;
  color: #fff;
  border: 1px solid;
  padding: 13px 30px;
  border-radius: 4px;
  font-size: 18px;
  font-weight: 600;
  cursor: pointer;
  text-transform: uppercase;
  display: inline-block;
  text-align: center;
  text-decoration: none;
  line-height: 1em;
  letter-spacing: 1px;
  text-wrap: nowrap;
  transition: background-color 0.4s ease 0s, color 0.4s ease 0s;
}
.two-column-wrapper .two-column-link a:hover {
  background-color: transparent;
  color: #2c2c2c;
}

.two-column-wrapper .two-column-link {
  margin-top: auto;
  position: absolute;
  bottom: 5px;
  left: 50%;
  transform: translateX(-50%);
}

.two-column-layout-display-wrapper {
  padding-top: 80px;
}

@media (min-width: 768px) and (max-width: 1024px) {

  .two-column-layout-display-wrapper {
    padding-top: 60px;
  }
}

/* Mobile Styling */
@media only screen and (max-width: 767px) {
  .two-column-wrapper{
    padding-bottom: 80px;
  }

  .two-column-layout-display{
    padding-top: 40px;
  }

  .two-column-layout-display-wrapper {
    padding-top: 0px;
  }
}


/* ---------START three column layout display---------  */


.three-column-layout_display_wrapper{
    position: relative;
    background: url('');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    width: 100%;
    height: auto;
}

/* This is the overlay effect */
.three-column-layout .three-column-wrapper:hover {
  background: rgba(0, 0, 0, 0.4);
}
.three-column-layout_display_wrapper:before{
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    background-color: rgba(0, 0, 0, 0.7);
    z-index: 1;
}
.three-column-layout_display_wrapper .three-column-wrapper{ /* Make sure content appears on top of the overlay */
    z-index: 2;
}

/* no margin for the row */
.three-column-layout_display_wrapper .three-column-layout{
  margin: 0;
}

/* Initial State */
.three-column-layout .three-column-wrapper {
  position: relative;
  overflow: hidden;
  color: white;
  transition: all 0.3s ease;
  border-right: 1px solid #FFFFFF;
  padding: 0;
  /* height of this element is calculated with a js function */
}

.three-column-layout .three-column-wrapper .paragraph--type--_-column-grid{
  padding-left: 50px;
  padding-right: 50px;
  padding-bottom: 85px;
  padding-top: 35px;
  height: 100%;
}

.three-column-layout .field__item .three-column-txt-wrapper {
  position: relative;
  z-index: 2;
}

/*title*/
.three-column-layout .field__item .three-column-title-wrapper {
  display: flex;
}
.three-column-layout .field__item .three-column-title {
  font-size: 30px;
  font-weight: 700;
  line-height: 1em;
  letter-spacing: 1px;
  padding: 5px 0;
}
.three-column-layout .field__item .title-icon {
  width: 15px;
  height: 39px;
  background: #e2ba5b;
  margin-right: 10px;
}


/*description*/
.three-column-layout .field__item .three-column-description {
  opacity: 0;
  transition: opacity 0.3s ease, visibility 0.3s ease;
  padding-bottom: 15px;
  padding-top: 20px;
}

/*link*/
.three-column-layout .field__item .three-column-link {
  opacity: 0;
  transition: opacity 0.3s ease, visibility 0.3s ease;
  position: absolute;
  bottom: 50px;
  left: 50px;
  z-index: 1;
}
.three-column-layout .field__item .three-column-link a {
  background: #fff;
  color: #2c2c2c;
  border: 1px solid;
  padding: 13px 30px;
  border-radius: 4px;
  font-size: 18px;
  font-weight: 600;
  cursor: pointer;
  text-transform: uppercase;
  display: inline-block;
  text-align: center;
  text-decoration: none;
  line-height: 1em;
  letter-spacing: 1px;
  text-wrap: nowrap;
  transition: background-color 0.4s ease 0s, color 0.4s ease 0s;
}

/*.paragraph paragraph--type--_-column-grid paragraph--view-mode--default:before { */
/*  content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 20px; !* Change la hauteur selon tes besoins *! background: linear-gradient(to bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0)); z-index: 1; }*/


.three-column-layout .field__item .three-column-link a:hover{
  background-color: transparent;
  color: #fff;
}


/* Hover State */
.three-column-layout .field__item:hover .three-column-description {
  opacity: 1;
}
.three-column-layout .field__item:hover .three-column-link {
  opacity: 1;
}
.paragraph.paragraph--type--_-column-grid.paragraph--view-mode--default {
  transition: background 0.4s ease 0s;
  position: relative;
}


.paragraph.paragraph--type--_-column-grid.paragraph--view-mode--default:after {
  background: linear-gradient(to bottom, rgba(0, 0, 0, 1) 11%, rgba(0, 0, 0, 0.3)  40%, rgba(0, 0, 0, 0) 100%);
  position: absolute;
  content: '';
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 0;
}

.paragraph.paragraph--type--_-column-grid.paragraph--view-mode--default:before {
  background-color : #000;
  opacity: 0;
  position: absolute;
  content: '';
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 0;
  transition: opacity 0.4s ease 0s;
}

.paragraph.paragraph--type--_-column-grid.paragraph--view-mode--default:hover:before {
  opacity: 0.8;
}

/* Ensure cards stay in place */
.three-column-layout .field__item:hover {
  transform: none;
}

/*@media only screen and (min-width: 1200px) {*/
/*  .three-column-layout .three-column-wrapper{*/
/*    min-height: 390px;*/
/*  }*/

/*  .three-column-layout .field__item p{*/
/*    max-width: 490px;*/
/*  }*/

/*}*/


/* Mobile Styling */
@media only screen and (max-width: 992px) {

  .three-column-layout .three-column-wrapper {
    height: auto !important;
  }


  .three-column-layout .three-column-wrapper .paragraph--type--_-column-grid>div{
    padding-right: calc(var(--bs-gutter-x)* 0.5);
    padding-left: calc(var(--bs-gutter-x)* 0.5);
    padding-top: 30px;
    padding-bottom: 30px;
  }

  .three-column-layout .field__item .title-icon {
    width: 15px;
    height: 27px;
    background: #e2ba5b;
    margin-right: 8px;
    margin-top: -1px;
  }

  .three-column-layout .three-column-wrapper {
    border-bottom: 1px solid #FFFFFF; /* Border between first and second cards */
  }

  /* Show both title and description by default on mobile */
  .three-column-layout .field__item .three-column-description {
    opacity: 1;
    visibility: visible;
    transition: none;
    margin-top: 15px; /* Add spacing between title and description */
  }

  .three-column-layout .field__item .three-column-link {
    opacity: 1;
    visibility: visible;
    transition: none;
    margin: 0;
    position: unset;
    left: 0;
  }

  .three-column-layout .field__item .three-column-title {
    font-size: 24px;
    font-weight: 700;
    line-height: 24px;
    transition: none;
  }

  .three-column-layout .field__item .three-column-link a {
    font-size: 18px;
    font-weight: 500;
    line-height: 21.15px;
    letter-spacing: 0.1em;
    padding: 15px 30px;
    text-wrap: nowrap;
  }

}

@media only screen and (max-width: 768px) {
  .three-column-layout .three-column-wrapper .paragraph--type--_-column-grid{
    max-width: 540px;
  }
}

@media only screen and (max-width: 576px) {
  .three-column-layout .three-column-wrapper .paragraph--type--_-column-grid{
    max-width: 100%;
  }
}

/* ---------END three column layout display---------  */


/* ---------START CTA component---------  */
.paragraph--type--cta {
  position: relative;
  background: #A20000; /* Background color of the main section */
  color: white;
  padding: 30px 0px 0px 0px; /* Adjust padding as needed */
  margin-bottom: 80px;
}

.cta {
  padding-bottom: 20px; /* Adds space before the triangle */
}

.cta .cta-link .field--name-field-cta-link {
  text-align: end;
}

.cta-triangle {
  position: absolute;
  bottom: -50px; /* Adjust this value to move the triangle up or down */
  left: 0;
  width: 100%;
  height: 0;
  border-left: 75vw solid transparent; /* Full width of the viewport */
  border-right: 25vw solid transparent;
  border-top: 50px solid #A20000; /* Triangle color and height */
  z-index: 1;
}

.ctc-wrapper .cta-title {
  font-size: 32px;
  font-weight: 700;
  line-height: 1;
}

.ctc-wrapper .cta-description {
  font-size: 20px;
  font-weight: 500;
  line-height: 23.5px;
}

.ctc-wrapper .cta-title-wrapper {
  display: flex;
  padding-bottom: 15px;
}

.ctc-wrapper .cta-title-wrapper .title-icon {
   width: 15px;
   background: #e2ba5b;
   margin-right: 10px;
   padding-right: 15px;
}

.cta .cta-link a {
  background-color: #2c2c2c;
  color: white;
  padding: 15px 80px;
  border-radius: 4px;
  font-size: 20px;
  font-weight: 500;
  cursor: pointer;
  text-transform: uppercase;
  display: inline-block;
  text-align: center;
  text-decoration: none;
  line-height: 23.5px;
  letter-spacing: 0.1em;
  text-wrap: nowrap;
}

.cta .cta-link a:hover {
  background-color: #e2ba5b;
  color: #1E1E1E;
}

.cta .cta-link {
  padding-top: 25px;
}
@media (min-width: 768px) and (max-width: 1024px) {
  .cta .cta-link .field--name-field-cta-link {
    text-align: start;
  }
}

@media only screen and (max-width: 767px) {
  .cta .cta-link .field--name-field-cta-link {
    text-align: end;
  }
  .ctc-wrapper .cta-title {
    font-size: 26px;
    font-weight: 700;
    line-height: 26px;
  }

  .ctc-wrapper .cta-title-wrapper .title-icon {
   background: #e2ba5b;
   margin-right: 10px;
   margin-top: 0;
  }

  .ctc-wrapper .cta-description {
    font-size: 14px;
    font-weight: 500;
    line-height: 14px;
  }
  .cta .cta-link {
    padding-top: 5px;
  }
  .cta .cta-link a {
    padding: 15px 40px;
    font-size: 18px;
    cursor: pointer;
    line-height: 20px;
  }
}

/* ---------END CTA component---------  */


/* ---------START three grid layout---------  */
.paragraph-three-grid-layout{
  padding-top: 50px;
  padding-bottom: 20px;
}

/* container of the card */
.paragraph-three-grid-layout .three_cards{
  width: 100%;
  height: auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: 1fr;
  grid-gap: 20px;
  margin: 20px 0;
}

/* cards*/
.paragraph-three-grid-layout .paragraph-three-grid-layout-card{
  text-align: center;
  padding: 30px;
  width: 100%;
  z-index: 2;
  height: 100%;
  display: flex;
  flex-direction: column;
  text-decoration: none;
  cursor: pointer;
  border: 1px solid #cdcdcd;
  padding: 1rem 2rem;
  border-radius: 10px;
}

.paragraph-three-grid-layout .paragraph-three-grid-layout-card:hover {
  text-decoration: none;
}


  /* card title */
.paragraph-three-grid-layout .paragraph-three-grid-layout-card .field--name-field-title{
  font-size: 22px;
  font-weight: 400;
  line-height: 1em;
  padding: 10px 0;
  background: #2437a6;
  color: #fff;
  text-transform: uppercase;
}

.paragraph-three-grid-layout .paragraph-three-grid-layout-card:first-child .field--name-field-title {
  background: #4262d6;
}
.paragraph-three-grid-layout .paragraph-three-grid-layout-card:last-child .field--name-field-title {
  background: #122165;
}

.paragraph-three-grid-layout ul li {
  line-height: 1.3em;
  margin-bottom: 6px;
  font-weight: normal;
}


.paragraph-three-grid-layout .paragraph-three-grid-layout-card h3 {
  font-size: 20px;
  margin-bottom: 1em;
}

.paragraph-three-grid-layout .paragraph-three-grid-layout-card .field--name-field-three-card-description {
  text-align: left;
}


/* image container */
.paragraph-three-grid-layout .paragraph-three-grid-layout-card .field--name-field-media-image{
  padding: 25px 0;
}
.paragraph-three-grid-layout .paragraph-three-grid-layout-card .field--name-field-media-image img{
  width: 120px;
  height: 120px;
  object-fit: contain;
}


/* hover effect on the card */
.paragraph-three-grid-layout .paragraph-three-grid-layout-card {
  color:  var(--bs-body-color);
  transition: background-color 0.2s ease, color 0.2s ease; /* Transition sur les deux propriétés */
}

.paragraph-three-grid-layout .paragraph-three-grid-layout-card:hover {
  background-color: #f2f2f2; /* Couleur de fond au hover */
}

@media only screen and (max-width: 992px) {
  .paragraph-three-grid-layout{
    padding-top: 60px;
    padding-bottom: 40px;
  }
  /* container of the card */
  .paragraph-three-grid-layout .three_cards{
    display: flex;
    flex-direction: column;
  }

  /* cards */
  .paragraph-three-grid-layout .paragraph-three-grid-layout-card:nth-of-type(1), .paragraph-three-grid-layout .paragraph-three-grid-layout-card:nth-of-type(2){
    border-bottom: 1px solid white;

  }

  .paragraph-three-grid-layout .paragraph-three-grid-layout-card{
    height: fit-content;
  }

}
/* ---------END three grid layout---------  */

/* ---------START simple CTA--------- */
.paragraph--type--simple-cta-paragraph{
  margin-top: 20px;
  margin-bottom: 20px;
}
.paragraph--type--simple-cta-paragraph>div{
  border: 1px solid #cdcdcd;
  padding: 1.5rem 2rem;
  border-radius: 10px;
}

.paragraph--type--simple-cta-paragraph .field--name-field-simple-cta-title{
  font-size: 28px;
  font-weight: 700;
  font-family: "Saira", sans-serif;
  line-height: 1;
  margin-top: 20px;
  position: relative;
}

.paragraph--type--simple-cta-paragraph .field--name-field-simple-cta-title:before {
    width: 160px;
    height: 10px;
    background: #e2ba5b;
    top: -17px;
    position: absolute;
    content: "";
  }

.paragraph--type--simple-cta-paragraph .field--name-field-simple-cta-text p{
  padding: 10px 0 24px 0;
  margin: 0;
}

.paragraph--type--simple-cta-paragraph.style2 .field--name-field-simple-cta-text p{
  padding-top: 24px;
  line-height: 1.7em;
}


.paragraph--type--simple-cta-paragraph .field--name-field-simple-cta-link a {
  background-color: #2c2c2c;
  color: #fff;
  border: 1px solid;
  padding: 13px 50px;
  border-radius: 4px;
  font-size: 18px;
  font-weight: 600;
  cursor: pointer;
  text-transform: uppercase;
  display: inline-block;
  text-align: center;
  text-decoration: none;
  line-height: 1em;
  letter-spacing: 1px;
  text-wrap: nowrap;
  transition: background-color 0.4s ease 0s, color 0.4s ease 0s;
}
.paragraph--type--simple-cta-paragraph .field--name-field-simple-cta-link a:hover{
  background-color: transparent;
  color: #2c2c2c;
}
/* ---------END simple CTA---------  */

/* ---------START text with cta block--------- */
.paragraph--type--text-with-cta-block{
  padding-top: 60px;
  padding-bottom: 40px;
}

.paragraph--type--text-with-cta-block .paragraph-container{
  display: flex;
  justify-content: space-between;
}

/* Title */
.paragraph--type--text-with-cta-block .content-container .field--name-field-title{
  font-size: 30px;
  font-weight: 700;
  line-height: 35.25px;
  padding-bottom: 20px;
}

.paragraph--type--text-with-cta-block .content-container .field--name-field-text-with-cta-description ul li::marker{
  font-size: 1.1rem;
}

.paragraph--type--text-with-cta-block .content-container .horizontal-title-icon{
  width: 160px;
  height: 10px;
  background: #e2ba5b;
  margin-bottom: 10px;
  margin-top: -25px;
}

/* cta button container */
.paragraph--type--text-with-cta-block .card-container .paragraph--type--simple-cta-paragraph{
  padding: 0;
}

.paragraph--type--text-with-cta-block .card-container .paragraph--type--simple-cta-paragraph .field--name-field-simple-cta-title{
  font-size: 22px;
}

.paragraph--type--text-with-cta-block .card-container .paragraph--type--simple-cta-paragraph .field--name-field-simple-cta-link a{
  padding: 7px 15px;
}






/* START text with media component */
.paragraph--type--text-block-with-media{
  padding-bottom: 20px;
}

.paragraph--type--text-block-with-media .text_b_w_me_media img{
  width: 100%;
  height: auto;
}

/* if this it's a video */
.paragraph--type--text-block-with-media .field--name-field-media-oembed-video img{
  opacity: 0.5;
}

article.media--type-remote-video .field--name-field-media-oembed-video a.myButton {
  display: none;
}


/* slider paragraph */
.paragraph--type--ept-slick-slider img{
    width: 100%;
    height: 280px;
    object-fit: cover;
}


/* laptop */
@media (max-width: 1400px) {

  .three-column-layout .three-column-wrapper .paragraph--type--_-column-grid {
    padding-left: 20px;
    padding-right: 20px;
    padding-bottom: 60px;
    padding-top: 30px;
  }

  .three-column-layout .field__item .three-column-title {
    font-size: 25px;
  }

  .three-column-layout .field__item .three-column-description {
    padding-top: 10px;
  }

  .three-column-layout .field__item .three-column-link {
    bottom: 30px;
    left: 20px;
  }

  /*.three-column-layout .three-column-wrapper .paragraph--type--_-column-grid {*/
  /*  padding-bottom: 80px;*/
  /*}*/

  /*.three-column-layout .field__item .three-column-link {*/
  /*  bottom: 30px;*/
  /*}*/

  /*.three-column-layout .field__item .three-column-title {*/
  /*  font-size: 26px;*/
  /*}*/

  /*.three-column-layout .field__item .title-icon {*/
  /*  height: 26px;*/
  /*}*/
  /*.three-column-layout .field__item .three-column-description {*/
  /*  font-size: 17px;*/
  /*}*/

}

/* START Footer media queries  */
/* Tablet */
@media (max-width: 1200px) {
  .paragraph--type--title-h1 {
    margin: 20px 0 50px;
  }
  .paragraph--type--video-with-text {
    margin-bottom: 50px;
  }
  .paragraph--type--title-h1 h1 {
    font-size: 45px;
  }

  .paragraph--type--video-with-text .video-content-wrapper {
    padding-right: 20px;
  }

  .paragraph--type--image-with-text .iwt_image {
    padding-left: 20px;
  }


}

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

  .paragraph--type--title-h1 {
    margin: 20px 0 20px;
    font-size: 40px;
  }
  .paragraph--type--video-with-text .video-content-wrapper {
    padding-right: calc(var(--bs-gutter-x) * 0.5);
    order: 2;
  }
  .paragraph--type--video-with-text .video-content-wrapper .video-cover-image {
    max-width: 525px;
    margin: 0 auto;
  }

  .paragraph--type--video-with-text .video-title-wrapper{
    padding-top: 25px;
  }

  .paragraph--type--video-with-text .video-title-wrapper .title-icon{
    margin-top: 0;
  }

  .paragraph--type--title-h1 h1 {
    font-size: 42px;
  }

  .paragraph.paragraph--type--_-column-grid.paragraph--view-mode--default:before {
    opacity: .70;
  }

  .three-column-layout .field__item .three-column-link {
    position: relative;
    z-index: 2;
    bottom: 0;
    left: 0;
  }

  .three-column-layout .three-column-wrapper .paragraph--type--_-column-grid {
    padding: 30px;
  }


  .paragraph--type--image-with-text .iwt_image {
    order: 1;
  }
  .paragraph--type--image-with-text .iwt_wrapper {
    order: 2;
  }

  .paragraph--type--image-with-text .iwt_image {
    padding-left: 0;
  }
}

/* Mobile */
@media only screen and (max-width: 767px) {
  /*.paragraph--type--video-with-text {*/
  /*  padding: 40px 0px 40px 0px;*/
  /*}*/

  /*.paragraph--type--video-with-text .video-content-wrapper {*/
  /*  padding-bottom: 20px;*/
  /*}*/

  /*.paragraph--type--video-with-text .video-content-wrapper .field--name-field-video .field--name-field-media-oembed-video iframe {*/
  /*  width: 369px;*/
  /*  height: 192px;*/
  /*}*/

  /*.paragraph--type--video-with-text .video-title {*/
  /*  font-size: 28px;*/
  /*  line-height: 28px;*/
  /*}*/
  /*.paragraph--type--video-with-text .video_description {*/
  /*  font-size: 16px;*/
  /*  line-height: 20px;*/
  /*}*/
}
/* END Mobile  */

/* =========================================
   1. PROJECT DETAILS BOX (2-Column Layout)
   ========================================= */

.project-details-header .btn-small {
    font-size: 13px;
    padding: 5px 10px;
}

.project-details-header .view-header {
    display: flex;
    justify-content: space-between;
}


/* Main Box Container */
.project-details-header > .view-content {
    border: 3px solid #2c2c2c; 
    border-radius: 8px;
    padding: 25px 30px;
    background-color: #fff;     
    margin-bottom: 60px !important; /* Force space below the box */
}

/* Grid Layout Definition */
.project-details-header .view-content .views-row {
    display: grid;
    /* Col 1: 40% width (min 300px) | Col 2: Remaining space */
    grid-template-columns: minmax(300px, 40%) 1fr; 
    gap: 15px 40px; /* 15px vertical space, 40px gap between Left/Right cols */
    align-items: start;
    width: 100%;
}

/* --- RIGHT COLUMN (Description) --- */
/* We define this first so it locks into place */
.project-details-header .views-field-body {
    grid-column: 2;
    /* Span 10 rows ensures it covers the full height of the left stack */
    grid-row: 1 / span 10; 
    
    /* Styling */
    margin-left: 0; 
    padding-left: 30px;
    border-left: 2px solid #ddd; /* Divider line */
    color: #555;
    min-height: 100%; 
}

/* --- LEFT COLUMN STACK (Metadata) --- */
/* These items will naturally stack on top of each other in Column 1 */

/* 1. ID */
.project-details-header .views-field-nid {
    grid-column: 1;
    /* Removed font-weight: 800 to make the number normal */
    color: #555;
    margin-bottom: 5px;
}

/* 2. Name */
.project-details-header .views-field-title {
    grid-column: 1;
    margin-bottom: 15px; 
}

/* 3. Associated Items (Forum, Ticket, Parent) */
.project-details-header .views-field-field-associated-forum-topic,
.project-details-header .views-field-field-related-project-ticket,
.project-details-header .views-field-field-parent-project {
    grid-column: 1;
    
    /* Separator styling */
    border-top: 1px dashed #eee;
    padding-top: 12px;
    margin-top: 5px;
    width: 100%;
}

/* --- TEXT STYLING --- */

/* Bold Labels (This keeps ID: Name: etc. BOLD) */
.project-details-header .views-label {
    font-weight: 800 !important;
    color: #2c2c2c;
    margin-right: 5px;
    display: inline-block; 
}

/* Blue Link Style (Name Value) */
.project-details-header .views-field-title a {
    color: #0d6efd !important;
    text-decoration: none;
    font-weight: 400; /* Changed from 800 to 400 (Normal) */
    font-size: 1.1em; 
}
.project-details-header .views-field-title a:hover {
    text-decoration: underline;
}


/* =========================================
   2. CREATE PROJECT BUTTON
   ========================================= */

.create-project-btn {
    display: inline-block;
    background-color: #2c2c2c;
    color: #ffffff !important;
    padding: 10px 25px;
    font-weight: bold;
    text-decoration: none !important;
    border-radius: 5px;
    margin-bottom: 20px;
    text-transform: uppercase;
    font-size: 14px;
    transition: background-color 0.3s ease;
    margin-right: 20px;
}

.create-project-btn:hover {
    background-color: #0d6efd;
    color: #ffffff !important;
}

/* Float the Create Project button to the right AND push it down */
.view-project-management-directory .view-header {
    float: right;
    margin-bottom: 0;
    position: relative;
    z-index: 10;
    margin-top: 30px; 
}

/* Clear the float so the filters don't crash into it */
.view-project-management-directory .view-filters {
    clear: both;
    padding-top: 10px;
}


/* =========================================
   3. PROJECT TABLE COLUMNS (Directory)
   ========================================= */

.view-project-management-directory table {
    table-layout: fixed; 
    width: 100%;
}

/* Name Column */
.view-project-management-directory .views-field-title {
    width: 25%;
    min-width: 150px;
}

/* Description Column */
.view-project-management-directory .views-field-body {
    width: 40%;
}

/* Parent Project Column */
.view-project-management-directory .views-field-field-parent-project {
    width: 25%;
}

/* ID Column */
.view-project-management-directory .views-field-nid {
    width: 10%;
    text-align: center;
}

/* --- FIXED: Reorder Buttons (Side-by-Side) below Details --- */

/* 1. Use Flex Wrap instead of Column */
.view-project-dashboard .attachment-after {
    display: flex;
    flex-wrap: wrap; /* Allows items to sit next to each other or break lines */
    gap: 20px;       /* Space between the two buttons */
    align-items: center; /* Aligns buttons vertically */
}

/* 2. Target the Details Box (The First Div) -> Force to Top & Full Width */
.view-project-dashboard .attachment-after > div:first-of-type {
    order: 1;
    width: 100%; /* Forces the box to take the full top row */
}

/* 3. Target the BUTTONS -> Move to Order 2 */
.view-project-dashboard .attachment-after > a.create-project-btn {
    order: 2;
    margin-top: 5px; /* Space between Blue Box and Buttons */
    margin-bottom: 20px;
    width: auto; /* Allows them to sit side-by-side */
}

/* 4. Target any other content (like Tickets) -> Force to Bottom & Full Width */
.view-project-dashboard .attachment-after > div {
    order: 3;
    width: 100%; /* Forces tickets to take a full new row below buttons */
}

/* =========================================
   4. TECHNICAL DETAILS BOX (Fixed for Plain Text)
   ========================================= */

/* 1. The Container */
.technical-details-container > .view-content {
    border: 3px solid #2c2c2c;
    border-radius: 8px;
    padding: 15px 25px;
    background-color: #fff;
    margin-bottom: 60px !important;
    display: block !important; 
}

/* 2. Reset the Grid (Force Block Layout) */
.technical-details-container .view-content .views-row {
    display: block !important;
    grid-template-columns: none !important;
    gap: 0 !important;
    width: 100%;
}

/* 3. Field Styling */
.technical-details-container .views-field {
    width: 100%;
    margin-bottom: 20px; 
}

/* 4. CONTENT FIX (The Magic Part) */
.technical-details-container .field-content {
    /* "normal" stops the browser from doubling up the line breaks */
    white-space: normal !important; 
    
    /* Ensure long words (like URLs or code) still wrap */
    word-wrap: break-word;
    overflow-wrap: break-word;
    
    /* Standard reading spacing */
    line-height: 1.5; 
    color: #333;
    font-family: inherit; /* Matches the rest of the site font */
}

/* 5. Labels */
.technical-details-container .views-label {
    font-weight: 800;
    color: #2c2c2c;
    display: block; 
    margin-bottom: 3px; 
}

/* 6. Remove outer edge gaps */
.technical-details-container .view-content .views-row > div:first-child { margin-top: 0 !important; }
.technical-details-container .view-content .views-row > div:last-child { margin-bottom: 0 !important; }