:root {
    --text-light: #ffffff;
    --text-color:#f8bd61;
    --bg-dark: #061727;
    --orange: #FFB600;
    
  }


  body{
    font-size: 20px !important;
  }


  .margin-20{
    margin: 20px 0px;
  }


.heading-title {
    font-family: "Montserrat", Arial;
    font-size: 20px;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    color: var( --text-light );
  }


  .heading-title-2 {
    font-family: "Montserrat", Arial;
    font-size: 16px;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    color: var( --text-light );
  }


  .heading-title-3 {
    font-family: "Montserrat", Arial;
    font-size: 38px;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    color: var( --text-light );
    line-height: 48px;
  }


  .heading-title-4 {
    font-family: "Montserrat", Arial;
    font-size: 34px;
    font-weight: 700;
    text-transform: uppercase;
    line-height: 1.4em;
    letter-spacing: 0.02em;
    text-shadow: 0px 0px 10px #000000;
    color: var( --text-color );
  }

  .heading-title-5 {
    font-family: "Montserrat", Arial;
    font-size: 34px;
    font-weight: 400;
    text-transform: uppercase;
    line-height: 1.4em;
    letter-spacing: 0.02em;
    
    color: var( --text-color );
  }

  .check-white .fa-check{
    color: var( --text-light ) !important;
  font-size: 20px;
  }

  .bg-light {
    color: #061727 !important;
  }

  .bg-light .heading-title{
    color: #061727 !important;
  }

  .bg-dark{
    background: var(--bg-dark) !important;
    color: var(--text-light)
  }


  .bg-dark .fas{
    color: var(--text-color) !important;
  }

  .bg-dark .text-muted{
    color: var(--text-light) !important;
    text-transform: uppercase !important;
    font-weight: lighter !important;
}

.bg-dark .btn-primary{
    background: var(--orange) !important;
    color: var(--text-light)
  }


  .bg-dark .btn-primary:hover{
    background: var(--bg-dark) !important;
    color: var(--text-light)
  }

  .blue{
    color: var(--bg-dark) !important;
  }


  .font-size-26{
    font-size: 26px !important;
    font-weight: 400 !important;
  }


  .py-5 {
    padding-top: 12rem !important;
    padding-bottom: 12rem !important;
  }




  .flipbox-wrapper {
    perspective: 1000px;
  }

  .flipbox {
    position: relative;
    width: 100%;
    height: 300px;
    transition: transform 0.8s;
    transform-style: preserve-3d;
  }

  .flipbox-inner:hover .flipbox {
    transform: rotateY(180deg);
  }

  .flipbox-front,
  .flipbox-back {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    border: 1px solid #ccc;
    border-radius: 0.5rem;
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }

  .flipbox-front {
    background-color: var(--text-color);
    color: white;
  }

  .flipbox-back {
    background-color: #ffffff;
    color: #333;
    transform: rotateY(180deg);
  } 