/*  first div style */  
  .front-custom-icon {
    font-size: 52px;
    color: black;
  }
  .back-custom-icon {
    font-size: 52px;
    color: white;
  }
  .flip-box {
    background-color: transparent;
    width: 350px;
    height: 350px;
    perspective: 1000px;
  }

  .flip-box-inner {
    position: relative;
    width: 100%;
    height: 100%;
    text-align: center;
    transition: transform 0.8s;
    transform-style: preserve-3d;

  }

  .flip-box:hover .flip-box-inner {
    transform: rotateY(180deg);
  }

  .flip-box-front, .flip-box-back {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
  }
  .flip-box-front {
    background-color: #F3F6F9;
    color: #627692;
  }

  .flip-box-back {
    background-color: #181123;
    color: white;
    transform: rotateY(180deg);
  }


/*  second div Style  */

  .front-custom-icon {
    font-size: 52px;
    color: black;
  }

  .back-custom-icon {
    font-size: 52px;
    color: white;
  }

  .flip-box {
    background-color: transparent;
    width: 350px;
    height: 350px;
    perspective: 1000px;
  }

  .flip-box-inner {
    position: relative;
    width: 100%;
    height: 100%;
    text-align: center;
    transition: transform 0.8s;
    transform-style: preserve-3d;

  }

  .flip-box:hover .flip-box-inner {
    transform: rotateY(180deg);
  }

  .flip-box-front, .flip-box-back {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
  }

  .flip-box-front {
    background-color: #F3F6F9;
    color: #627692;
  }

  .flip-box-back {
    background-color: #181123;
    color: white;
    transform: rotateY(180deg);
  }
  
  /* third div style  */
  


  .front-custom-icon {
    font-size: 52px;
    color: black;
  }

  .back-custom-icon {
    font-size: 52px;
    color: white;
  }

  .flip-box {
    background-color: transparent;
    width: 350px;
    height: 350px;
    perspective: 1000px;
  }

  .flip-box-inner {
    position: relative;
    width: 100%;
    height: 100%;
    text-align: center;
    transition: transform 0.8s;
    transform-style: preserve-3d;

  }

  .flip-box:hover .flip-box-inner {
    transform: rotateY(180deg);
  }

  .flip-box-front, .flip-box-back {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
  }

  .flip-box-front {
    background-color: #F3F6F9;
    color: #627692;
  }

  .flip-box-back {
    background-color: #181123;
    color: white;
    transform: rotateY(180deg);
  }