.Coll > div{
    background: linear-gradient(120deg, #ffffff, #e2d8e4);
    /* width: 8vw !important;  */
    height: auto;
    
    text-align: center;
    line-height: 60px;
    /* font-size: 5vw; */
    flex-grow: 1;
    flex-basis: 15%;
    border-radius: 1em;
    padding-top: 5px;
    box-shadow: 1px 2px 3px 4px rgba(12,12,12,0.2);
    justify-content: center;
    padding-bottom: 2vw;
     margin-bottom:2vw; 
     margin-top: 1vw;
/*         
        margin-left: 3vw !important;
        margin-right: 3vw !important; */
  }


.Col-click{
    /* background-color: rgb(237, 227, 153); */
    border-radius: .3rem;
    background: linear-gradient(270deg, #dcb234, #e08c43);
    color: rgb(127, 26, 26);
    font-weight: 500;
    font-family: 'Kanit', sans-serif;
    padding: 0.5vw;
    margin-bottom: 1vw;
    top: -1vw;
    position: relative;
    
    }
    .Col-click:hover{
      color: rgb(155, 37, 77);
      transform: scale(1.1);
      cursor: pointer;
    }
    
    .Col-description{
    /* background-color: rgb(245, 176, 198); */
    padding-left: 2vw;
    padding-right: 2vw;
    padding-bottom: 0.1vw;
    font-weight: 500;
    font-size: 1.35rem !important;
    
    }
  
    @media(min-width: 1000px){
      .Col-description{
        font-size: 1.1rem !important ;
      }
    }
  
    .titlesCol {
      display: flex;
      font-family: "Kanit", sans-serif;
      font-weight: 600;
      font-style: normal;
      justify-content: center;
      align-items: center;
      font-size: 1.8rem;
      font-stretch: expanded;
      color: black;
      margin-bottom: 2vw;
      margin-top: 1.5vw;
      padding-left: 1vw;
      padding-right: 1vw;
      padding-top: 1vw;
      padding-bottom: 1vw;
      text-align: center !important;
      /* border-bottom: var(--palette-purple) 5px solid; */
      background: linear-gradient(45deg, #83cdd7,#ebf0f1, #b0b264);
      /* background: linear-gradient(45deg, #83cdd7, #b0b264); */
  }




  .ref-titleCOLL {
    color:white !important;
    font-size: 2vw;
    font-family: "OpenSans", sans-serif;
    font-weight: bold;
    font-style: normal;
  
    display: flow-root;
    
    background-color: orange;
    height: fit-content;
    width: fit-content;
    padding-left: 2vw;
    padding-right: 2vw;
  
    border: 2vw solid orange;
    border-radius: 1rem 1rem 1rem 0rem;
  
    position: relative;
    margin-top: 2vw;
    margin-bottom: 2vw;
    margin-left: 0%;
    z-index: 90;
    /* left: 37vw; */
  }


  .Col-ref-container{
    display: block;
    align-items: center;
    width: 100%;
    /* background-color: white; */
    /* border: 20px rgba(255, 255, 255, 0); */
    border-radius: 0rem;
    text-align: center;
    z-index: 80;
    /* box-shadow: 1px 2px 3px 4px rgba(12,12,12,0.2); */
    background: linear-gradient(120deg, #ffffff, #e2d8e4);
    padding: 1vw 2vw;
    }
@media (min-width: 500px) {
        .Coll > div{
        /* margin-left: 3vw !important;
        margin-right: 3vw !important; */
        }
        .ref-titleCOLL{
        left: 5vw;}
       
    }

 .quote-OV{
   font-size: 1.2rem;
   color: black;
   font-family: "OpenSans", sans-serif;
   line-height: 1.9;
   text-align: center;
   font-weight: 500;
   margin-bottom: 0.3vw;
    
 } 
@media (min-width: 1000px) {
    .Coll > div{
    /* margin-left: 8vw !important;
    margin-right: 8vw !important; */
    }
    .ref-titleCOLL{
        left: 5vw;}
}
@media (min-width: 1500px) {
    .Coll > div{
    /* margin-left: 11vw !important;
    margin-right: 11vw !important; */
    }
    .ref-titleCOLL{
        left: 5vw;}
}