/*
	Flexbox - Card layouts
*/


    
  
    .flex-layout{
      display: flex;
      
      justify-content: center;
      flex-wrap: wrap;
      gap: 3%;
      padding: clamp(8%,6%,9%);
      align-items: flex-start;
      align-content: flex-start;
      flex-direction:row;
      /*flex-wrap:wrap;*/
      /*flex-grow:1;*/
      
    }
    .flex-layoutC{
      display: flex;
      
      justify-content: center;
      flex-wrap: wrap;
      gap: 3%;
      padding: clamp(8%,6%,9%);
      align-items: flex-start;
      align-content: flex-end;
      flex-direction:column;
      /*flex-wrap:wrap;*/
      /*flex-grow:1;*/
      
    }
    .flex-container{
      width: min(30%, 90%);
      
      background-color: rgba(10,10,55,1);
      border: 2px solid #4B4C55;
      border-radius: 10px;
      box-shadow: 0 5px 5px rgba(0, 0, 0, 0.1);
      padding: clamp(1%,1.5%,3%);
      /*padding: 2.2vmin;  */
      flex-grow: 1;
      flex-shrink: 1;
    }
    
    fh2{
      font-family:"Xoutfit", sans-serif;
 color: rgba(129,200,233,1);     
      /*font-size : clamp(1rem, 2vw, 3rem);*/
      font-size: calc(1.25em + 1.2vmin);
      line-height: 90%; 
      
    }
    p{
      margin-top: 1px;
       font-family:"Xoutfit", sans-serif;
      font-size: clamp(1em, 1.5em, 3.5em);
      /*font-size: calc(1.95rem + 2.9    vmin);*/
      color:rgba(239, 250, 250,1);
    }
  
  /* Hover Effects */
  
  .liquid-morph-container {
  display: flex;
  justify-content: center;
  align-items: center;
  /*height: 100vh;*/
  background: #001;
}

.liquid-morph-element {
  /* width: 250px; */
  /* height: 100px; */
  background: #0a2342;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  border-radius: 10px;
  overflow: hidden;
  transition: all 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.liquid-morph-element span {
  color: #fff;
  /*font-size: 1.5rem;*/
  position: relative;
  z-index: 2;
}

.liquid-morph-element::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  /*width: 100%;*/
  /*height: 100%;*/
  background: conic-gradient(
    #0ff 0deg, 
    #0a2342 120deg, 
    #0ff 240deg
  );
  transition: all 0.6s ease;
  opacity: 0;
  transform: scale(0);
}

.liquid-morph-element:hover {
  border-radius: 10px;
  transform: rotate(15deg);
}

.liquid-morph-element:hover::before {
  opacity: 0.5;
  transform: scale(2);
}