/* .select-input {
    background: transparent;
    border: none;
    border-bottom: 1px solid white;
    color: white;
} */
  /*------------------- CUSTOM SELECT INPUT-----------------------*/
  :root {
    --background-gradient: linear-gradient(178deg, #ffff33 10%, #3333ff);
    --gray: #34495e;
    --darkgray: #2c3e50;
}

.select-input {
    /* Reset Select */
    appearance: none;
    outline: 10px red;
    border: 0;
    box-shadow: none;
    /* Personalize */
    flex: 1;
    padding: 0 1em;
    color: #fff;
    background: rgb(40, 40, 92); /*var(--darkgray);*/
    background-image: none;
    cursor: pointer;
  }
  /* Remove IE arrow */
  .select-input::-ms-expand {
    display: none;
  }
  /* Custom Select wrapper */
  .select-input-container {
    position: relative;
    display: flex;
    width: fit-content;
    height: fit-content;
    border-radius: .25em;
    overflow: hidden;
  }
  /* Arrow */
  .select-input-container::after {
    content: '\25BC';
    position: absolute;
    top: 0;
    right: 0;
    padding: 3px;
    background-color: transparent; /*#34495e;*/
    transition: .25s all ease;
    pointer-events: none;
    font-size: 15px;
  }
  /* Transition */
  /* .select-input-container:hover::after {
    color: #f39c12;
  } */


/* ---------- border -------- */ 
.search-input {
    position: relative;
}
.search-input input {
    width: 100%;
    padding: 5px 30px 5px 10px;
    font-size: 16px;
    border-radius: 5px;
    outline: none;
    border: none;
    color: #1c1d30;
}

.light .search-input input:focus,
    .search-input input:focus {
    background-color: #e9e9e9;
}

.light .search-input input {
    border: 2px solid #eee;
    background-color: #eee;
} 

.search-input i {
    position: absolute;
    top: 2px;
    right: 0;
    height: 100%;
    padding: 5px 10px;
    color: #a5a5a5;
    border-right: 1px solid gray;
}
.search-input i:hover {
    color: gray;
    cursor: pointer;
}


/* ---------- border -------- */ 
.top-big-border {
    border-top: 15px solid #e36f1e;
}
.right-big-border {
    border-right: 15px solid #e36f1e;
}


.vertical-stripes {
    background: url('../../assets/images/diagonal_line.svg') center center;
    background-size: 50%;
    width: 45px;
    height: 100%;
}

.bg-image-blend{
    background-image: url('https://marvel-b1-cdn.bc0a.com/f00000000163918/www.care.org/wp-content/uploads/2024/11/RS91944_DSC00452_scr_mobile.webp');
    background-position: top center;
    background-size: cover;
}
.bg-image-blend:before{
    background: linear-gradient(270deg,#fff 0,rgba(255,255,255,.3) 50%),#1c1d30; 
    mix-blend-mode: multiply;
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
    /* z-index: 1; */
}

/* ---------- primary-link -------- */ 
/* .primary-link {
    position: relative;
    width: fit-content;
    font-weight: bold;
    overflow: hidden;
    z-index: 1;
}
.primary-link::before{
    content: '';
    position: absolute;
    z-index: -1;
    bottom: -1px;
    left: 0;
    height: 2px;
    width: 100%;
    background: #e36f1e;
    transition: background 0.3s ease, height 0.3s ease;
}
.primary-link:hover::before {
    background: orange;
    height: 12px;
} */

.primary-link {
    position: relative;
    display: inline-block; /* Ensure it takes width and height correctly */
    width: fit-content;
    font-weight: bold;
    
    box-shadow: inset 0 -2px 0 #e36f1e;
    transition: box-shadow 0.3s ease;
}

.primary-link:hover {
    box-shadow: inset 0 -12px 0 orange; /* Creates the 'hover' effect as a shadow */
}


/* ---------- primary-input -------- */ 
.primary-input{
    border: 2px solid black;
    padding: 5px 10px;
    color: black;
    font-weight: bold;
    font-size: 16px;
}


/* ---------- hbox-img-txt -------- */ 
.hbox-img-txt {
    display: flex;
    gap: 15px;
    width: 100%;
    height: fit-content;
}

/* ---------- vbox-img-txt -------- */ 
.vbox-img-txt{
    position: relative;
    width: 100%;
    margin-bottom: 30px;
}
.vbox-img-txt > .img-container {
    overflow: hidden;
    width: 100%;
    height: auto;
    max-height: 300px;
    margin-bottom: 15px;
}
.vbox-img-txt > .img-container > img {
    object-fit: cover;
    width: 100%;
    height: 100%;
}
.vbox-img-txt > .text-container {
    width:'100%';
    display: flex;
    flex-direction: column;
    gap: 7px;
}
.vbox-img-txt > .text-container > a {
    font-size: 14px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    gap: 7px;
}

/* .vbox-img-txt > .text-container > a.category {
    transition: ease 0.3s;
}
.vbox-img-txt > .text-container > a.category:hover {
    color: #e36f1e;
} */
.vbox-img-txt > .text-container > a > .title{
    font-size: 18px;
    font-weight: bold;
    width: fit-content;
    position: relative;
    text-align: center;
    /* padding: 2px 5px; */
}
/* .vbox-img-txt > .text-container > a > .title::before{
    content: '';
    position: absolute;
    z-index: -1;
    left: 0;
    top: 0;
    height: 100%;
    width: 0;
    transition: ease 0.3s;
}
.vbox-img-txt > .text-container > a > .title:hover::before {
    background: orange;
    width: 100%;
} */
/* .vbox-img-txt > .text-container > a > .author-date {
    font-size: 14px;
} */
.vbox-img-txt > .text-container > a > .read-more {
    width: fit-content;
    position: relative;
    font-weight: bold;
}
.vbox-img-txt > .text-container > a > .read-more::before{
    content: '';
    position: absolute;
    z-index: -1;
    bottom: -1px;
    height: 2px;
    width: 100%;
    background: #e36f1e;
    transition: ease 0.3s;
}
.vbox-img-txt > .text-container > a > .read-more:hover::before {
    background: orange;
    height: 15px;
}




.fixed-background {
    background: url(../../assets/images/vulnerable.jpg) no-repeat center center fixed;
    background-size: cover;
    background-color: rgba(0, 0, 0, 0.5); /* Couche noire semi-transparente */
    background-blend-mode: darken; /* Mélange la couleur et l'image */
    line-height: 1;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    background-position-y: 0!important;
    background-size: cover!important;
    -webkit-background-size: cover!important;
    -moz-background-size: cover!important;
    -o-background-size: cover!important;
}

.transparent-footer {
    background: #ffffffde;
}


.dashed-border-b {
    border-bottom: 1px dashed black;
}