@charset "utf-8";
/*
@import url("https://fonts.googleapis.com/css2?family=Josefin+Sans:wght@100;200;300;400;500;600;700&family=Open+Sans:wght@300;400&display=swap");

*/
@font-face {
  font-family: "Josefin Sans";
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("../fonts/JosefinSans-VariableFont_wght.ttf");
}
@font-face {
  font-family: "Josefin Sans";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/JosefinSans-VariableFont_wght.ttf");
}

:root {
  --height-tb: 50px;
  --bs-body-color: var(--bs-white);
  --bs-font-sans-serif: "Josefin Sans", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  --bs-body-font-weight: 300;
  --bs-info: rgb(176 118 47);
  --bs-info-rgb: 176,118,47;
}
html {
  font-size: 20px;
}
body {
  /*background: linear-gradient(90deg, rgba(0, 0, 0, 1) 0%, rgb(34 62 82) 89%, rgb(56 56 78) 100%);*/
}
/*A new font size for bootstrap*/
.fs-7 {
  font-size: 0.75rem !important
}
/*******************************************************************************/
/*Preloader styles */
#preloader {
  position: fixed;
  background: black;
  display: flex;
  width: 100%;
  height: 100%;
  z-index: 10000;
  justify-content: center;
  align-content: center;
  border: 2px solid black;
  flex-direction: column;
}
.noscroll {
  height: 100%;
  overflow-y: hidden;
}
.cssload-container *, .cssload-container *:before, .cssload-container *:after {
  box-sizing: border-box;
  -o-box-sizing: border-box;
  -ms-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
}
.cssload-container {
  margin: 49px auto;
  width: 70px;
  height: 29px;
}
.cssload-container > div {
  float: left;
  background: rgb(185, 108, 255);
  height: 100%;
  width: 5px;
  margin-right: 1px;
  display: inline-block;
}
.cssload-container .cssload-shaft1 {
  animation-delay: 0.06s;
  -o-animation-delay: 0.06s;
  -ms-animation-delay: 0.06s;
  -webkit-animation-delay: 0.06s;
  -moz-animation-delay: 0.06s;
}
.cssload-container .cssload-shaft2 {
  animation-delay: 0.12s;
  -o-animation-delay: 0.12s;
  -ms-animation-delay: 0.12s;
  -webkit-animation-delay: 0.12s;
  -moz-animation-delay: 0.12s;
}
.cssload-container .cssload-shaft3 {
  animation-delay: 0.17s;
  -o-animation-delay: 0.17s;
  -ms-animation-delay: 0.17s;
  -webkit-animation-delay: 0.17s;
  -moz-animation-delay: 0.17s;
}
.cssload-container .cssload-shaft4 {
  animation-delay: 0.23s;
  -o-animation-delay: 0.23s;
  -ms-animation-delay: 0.23s;
  -webkit-animation-delay: 0.23s;
  -moz-animation-delay: 0.23s;
}
.cssload-container .cssload-shaft5 {
  animation-delay: 0.29s;
  -o-animation-delay: 0.29s;
  -ms-animation-delay: 0.29s;
  -webkit-animation-delay: 0.29s;
  -moz-animation-delay: 0.29s;
}
.cssload-container .cssload-shaft6 {
  animation-delay: 0.35s;
  -o-animation-delay: 0.35s;
  -ms-animation-delay: 0.35s;
  -webkit-animation-delay: 0.35s;
  -moz-animation-delay: 0.35s;
}
.cssload-container .cssload-shaft7 {
  animation-delay: 0.4s;
  -o-animation-delay: 0.4s;
  -ms-animation-delay: 0.4s;
  -webkit-animation-delay: 0.4s;
  -moz-animation-delay: 0.4s;
}
.cssload-container .cssload-shaft8 {
  animation-delay: 0.46s;
  -o-animation-delay: 0.46s;
  -ms-animation-delay: 0.46s;
  -webkit-animation-delay: 0.46s;
  -moz-animation-delay: 0.46s;
}
.cssload-container .cssload-shaft9 {
  animation-delay: 0.52s;
  -o-animation-delay: 0.52s;
  -ms-animation-delay: 0.52s;
  -webkit-animation-delay: 0.52s;
  -moz-animation-delay: 0.52s;
}
.cssload-container .cssload-shaft10 {
  animation-delay: 0.58s;
  -o-animation-delay: 0.58s;
  -ms-animation-delay: 0.58s;
  -webkit-animation-delay: 0.58s;
  -moz-animation-delay: 0.58s;
}
.cssload-container > div {
  animation: cssload-loading 1.73s infinite ease-in-out;
  -o-animation: cssload-loading 1.73s infinite ease-in-out;
  -ms-animation: cssload-loading 1.73s infinite ease-in-out;
  -webkit-animation: cssload-loading 1.73s infinite ease-in-out;
  -moz-animation: cssload-loading 1.73s infinite ease-in-out;
  transform: scaleY(0.05) translateX(-10px);
  -o-transform: scaleY(0.05) translateX(-10px);
  -ms-transform: scaleY(0.05) translateX(-10px);
  -webkit-transform: scaleY(0.05) translateX(-10px);
  -moz-transform: scaleY(0.05) translateX(-10px);
}
@keyframes cssload-loading {
  50% {
    transform: scaleY(1.2) translateX(10px);
    background: rgb(86, 215, 198);
  }
}
@-o-keyframes cssload-loading {
  50% {
    -o-transform: scaleY(1.2) translateX(10px);
    background: rgb(86, 215, 198);
  }
}
@-ms-keyframes cssload-loading {
  50% {
    -ms-transform: scaleY(1.2) translateX(10px);
    background: rgb(86, 215, 198);
  }
}
@-webkit-keyframes cssload-loading {
  50% {
    -webkit-transform: scaleY(1.2) translateX(10px);
    background: rgb(86, 215, 198);
  }
}
@-moz-keyframes cssload-loading {
  50% {
    -moz-transform: scaleY(1.2) translateX(10px);
    background: rgb(86, 215, 198);
  }
}
/***************************************************************/
/*Rotate button effect*/
.btnRot {
  width: fit-content;
}
.btnRot .btn a, .btnRot .btn span {
  color: var(--bs-white);
  text-decoration: none;
  display: block;
  position: relative;
  transition: all 500ms;
}
.btnRot:hover .btn >*  {
  color: black;
  transform: rotateX(180deg);
}
.btnRot .btn {
  transform: rotateX(0deg);
  transition: all 500ms;
}
.btnRot:hover .btn {
  background: var(--bs-warning);
  transform: rotateX(180deg);
}

/************************************************/
/*Sections, animated bottom border */
section {
  position: relative;
  width: 100%;
  padding: 125px  0 !important;
  background: black;
  background-image: linear-gradient(90deg, rgba(0, 0, 0, 1) 0%, rgb(34 62 82) 89%, rgb(56 56 78) 100%);
}
section:after {
  content: '';
  position: absolute;
  bottom: 0;
  display: block;
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg, #0d0e01 0%, #ebff06ab 50%, #03cd1fbd 85%, transparent 100%) 4%;
  animation: borde 5s infinite alternate;
}
@keyframes borde {
  0% {
    width: 0%;
    left: 10%;
    opacity: 0;
  }
  50% {
    opacity: 1;
    left: 0%;
    width: 100%;
  }
  95% {
    opacity: 1;
    left: 90%;
    width: 0%;
  }
  100% {
    width: 0%;
    left: 0;
    opacity: 0;
  }
}
/***************************************/
/*Top bar with contact data*/
#topcontact {
  background: var(--bs-gray-300);
  height: var(--height-tb);
  margin-bottom: 0
}
@media (max-width:768px) {
  #topcontact {
    font-size: 0.8rem;
  }
}
@media (max-width:571px) {
  #topcontact {
    height: 0;
  }
}
#topcontact #social {
  background: var(--bs-warning);
}
#topcontact .skewbar {
  border-left: solid white 2px;
  display: block;
  position: absolute;
  width: var(--height-tb);
  height: var(--height-tb);
  background: var(--bs-warning);
  padding: 0;
  transform-origin: top;
  transform: skewX(316deg);
}
#social a i {
  transition: font-size 200ms;
}
#social a:hover i {
  color: var(--bs-gray-100) !important;
  font-size: 32px;
}
/*********************************************************/
/*Navbar and menu */
.navbar-nav .nav-link{
   color: white;
}
.navbar-nav .nav-item{
 
}
.navbar-nav .nav-item:hover a{
  color: var(--bs-warning);
}
.offcanvas-body{
  position: relative;
}
.mark-spy{
  position: absolute;
  bottom: 10px;
  width: 0px;
  height: 28px;
  border-radius: 12px;
  background: rgba(var(--bs-warning-rgb),0.4);
  transition: all 400ms;
  border-bottom: 2px solid var(--bs-danger);
}
/*********************************************************/
/*Hero section*/
#hero {
  position: relative;
  margin-top: calc(-1 * var(--height-tb));
  background-image: url("../imgs/hero.png"), 
              linear-gradient(90deg, rgba(0, 0, 0, 1) 0%, rgb(34 62 82) 89%, rgb(56 56 78) 100%);
  background-repeat: no-repeat;
  background-position: left bottom;
  background-size: 5%, cover;
  animation: heroBg 800ms ease-in forwards
}
@keyframes heroBg {
  from {
    background-size: 5%, cover;
  }
  to {
    background-size: 50%, cover;
  }
}
#hero .card-title h1 {
  font-size: 4rem;
}
#hero .card-title h3 {
  font-size: 2rem;
}
@media (min-width: 375pc) {
  #hero .card-title h1 {
    font-size: 8rem;
  }
  #hero .card-title h3 {
    font-size: 3rem;
  }
}

/******************** Why *********************************/
/*fix vertical icons alginment*/
.bi::before, [class^="bi-"]::before, [class*=" bi-"]::before {
  vertical-align: -.25em;
}
#why {
  background: url(../imgs/bg-why.jpg) no-repeat top fixed;
  background-size: cover;
}
#why .whyhead{
 background: rgba(var(--bs-white-rgb), 0.1);
}

#why .brightIcon {
  color: var(--bs-danger);
  font-size: 2rem;
  background: var(--bas-dark);
  transition: all 500ms;
}
.whyitem h5{
 color:var(--bs-white);
}
 #why .whyitem:hover {
  border-radius: 5%;
  box-shadow: 0 0 18px 0px inset #dc3545d9 ;
}
 #why .whyitem:hover .brightIcon, #why .whyitem:hover h5{
   color: var(--bs-warning)
 }

/****************How*******************/
#how .brightIcon {
  width: 120px;
  height: 120px;
  font-size: 3rem;
  background: black;
  color: orange;
}

#how  .card:hover h5 {
  color: orange
}

/***************************************/
#pricing .card .card-header {
  background: white;
  padding: 28px 8px 68px 8px;
  clip-path: polygon(0% 0%, 0% 82.5%, 1.69492% 84.3293%, 3.38983% 86.1385%, 5.08475% 87.9078%, 6.77966% 89.6179%, 8.47458% 91.25%, 10.1695% 92.7862%, 11.8644% 94.2098%, 13.5593% 95.505%, 15.2542% 96.6578%, 16.9492% 97.6555%, 18.6441% 98.487%, 20.339% 99.1435%, 22.0339% 99.6176%, 23.7288% 99.9041%, 25.4237% 100%, 27.1186% 99.9041%, 28.8136% 99.6176%, 30.5085% 99.1435%, 32.2034% 98.487%, 33.8983% 97.6555%, 35.5932% 96.6578%, 37.2881% 95.505%, 38.9831% 94.2098%, 40.678% 92.7862%, 42.3729% 91.25%, 44.0678% 89.6179%, 45.7627% 87.9078%, 47.4576% 86.1385%, 49.1525% 84.3293%, 50.8475% 82.5%, 52.5424% 80.6708%, 54.2373% 78.8616%, 55.9322% 77.0922%, 57.6271% 75.3821%, 59.322% 73.75%, 61.017% 72.2138%, 62.7119% 70.7902%, 64.4068% 69.495%, 66.1017% 68.3422%, 67.7966% 67.3446%, 69.4915% 66.513%, 71.1864% 65.8565%, 72.8814% 65.3824%, 74.5763% 65.0959%, 76.2712% 65%, 77.9661% 65.0959%, 79.661% 65.3824%, 81.3559% 65.8565%, 83.0509% 66.513%, 84.7458% 67.3446%, 86.4407% 68.3422%, 88.1356% 69.495%, 89.8305% 70.7902%, 91.5254% 72.2138%, 93.2203% 73.75%, 94.9153% 75.3821%, 96.6102% 77.0922%, 98.3051% 78.8616%, 100% 80.6708%, 100% 0%);
  shape-outside: polygon(0% 0%, 0% 82.5%, 1.69492% 84.3293%, 3.38983% 86.1385%, 5.08475% 87.9078%, 6.77966% 89.6179%, 8.47458% 91.25%, 10.1695% 92.7862%, 11.8644% 94.2098%, 13.5593% 95.505%, 15.2542% 96.6578%, 16.9492% 97.6555%, 18.6441% 98.487%, 20.339% 99.1435%, 22.0339% 99.6176%, 23.7288% 99.9041%, 25.4237% 100%, 27.1186% 99.9041%, 28.8136% 99.6176%, 30.5085% 99.1435%, 32.2034% 98.487%, 33.8983% 97.6555%, 35.5932% 96.6578%, 37.2881% 95.505%, 38.9831% 94.2098%, 40.678% 92.7862%, 42.3729% 91.25%, 44.0678% 89.6179%, 45.7627% 87.9078%, 47.4576% 86.1385%, 49.1525% 84.3293%, 50.8475% 82.5%, 52.5424% 80.6708%, 54.2373% 78.8616%, 55.9322% 77.0922%, 57.6271% 75.3821%, 59.322% 73.75%, 61.017% 72.2138%, 62.7119% 70.7902%, 64.4068% 69.495%, 66.1017% 68.3422%, 67.7966% 67.3446%, 69.4915% 66.513%, 71.1864% 65.8565%, 72.8814% 65.3824%, 74.5763% 65.0959%, 76.2712% 65%, 77.9661% 65.0959%, 79.661% 65.3824%, 81.3559% 65.8565%, 83.0509% 66.513%, 84.7458% 67.3446%, 86.4407% 68.3422%, 88.1356% 69.495%, 89.8305% 70.7902%, 91.5254% 72.2138%, 93.2203% 73.75%, 94.9153% 75.3821%, 96.6102% 77.0922%, 98.3051% 78.8616%, 100% 80.6708%, 100% 0%);
  z-index: 10;
  position: relative
}
#pricing .card .card-header:before {
  content: '';
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: calc(100% - 4px);
  z-index: -1;
  background: var(--bs-gray-500);

  border-radius: inherit;
  padding: 28px 8px;
  clip-path: polygon(0% 0%, 0% 82.5%, 1.69492% 84.3293%, 3.38983% 86.1385%, 5.08475% 87.9078%, 6.77966% 89.6179%, 8.47458% 91.25%, 10.1695% 92.7862%, 11.8644% 94.2098%, 13.5593% 95.505%, 15.2542% 96.6578%, 16.9492% 97.6555%, 18.6441% 98.487%, 20.339% 99.1435%, 22.0339% 99.6176%, 23.7288% 99.9041%, 25.4237% 100%, 27.1186% 99.9041%, 28.8136% 99.6176%, 30.5085% 99.1435%, 32.2034% 98.487%, 33.8983% 97.6555%, 35.5932% 96.6578%, 37.2881% 95.505%, 38.9831% 94.2098%, 40.678% 92.7862%, 42.3729% 91.25%, 44.0678% 89.6179%, 45.7627% 87.9078%, 47.4576% 86.1385%, 49.1525% 84.3293%, 50.8475% 82.5%, 52.5424% 80.6708%, 54.2373% 78.8616%, 55.9322% 77.0922%, 57.6271% 75.3821%, 59.322% 73.75%, 61.017% 72.2138%, 62.7119% 70.7902%, 64.4068% 69.495%, 66.1017% 68.3422%, 67.7966% 67.3446%, 69.4915% 66.513%, 71.1864% 65.8565%, 72.8814% 65.3824%, 74.5763% 65.0959%, 76.2712% 65%, 77.9661% 65.0959%, 79.661% 65.3824%, 81.3559% 65.8565%, 83.0509% 66.513%, 84.7458% 67.3446%, 86.4407% 68.3422%, 88.1356% 69.495%, 89.8305% 70.7902%, 91.5254% 72.2138%, 93.2203% 73.75%, 94.9153% 75.3821%, 96.6102% 77.0922%, 98.3051% 78.8616%, 100% 80.6708%, 100% 0%);
  shape-outside: polygon(0% 0%, 0% 82.5%, 1.69492% 84.3293%, 3.38983% 86.1385%, 5.08475% 87.9078%, 6.77966% 89.6179%, 8.47458% 91.25%, 10.1695% 92.7862%, 11.8644% 94.2098%, 13.5593% 95.505%, 15.2542% 96.6578%, 16.9492% 97.6555%, 18.6441% 98.487%, 20.339% 99.1435%, 22.0339% 99.6176%, 23.7288% 99.9041%, 25.4237% 100%, 27.1186% 99.9041%, 28.8136% 99.6176%, 30.5085% 99.1435%, 32.2034% 98.487%, 33.8983% 97.6555%, 35.5932% 96.6578%, 37.2881% 95.505%, 38.9831% 94.2098%, 40.678% 92.7862%, 42.3729% 91.25%, 44.0678% 89.6179%, 45.7627% 87.9078%, 47.4576% 86.1385%, 49.1525% 84.3293%, 50.8475% 82.5%, 52.5424% 80.6708%, 54.2373% 78.8616%, 55.9322% 77.0922%, 57.6271% 75.3821%, 59.322% 73.75%, 61.017% 72.2138%, 62.7119% 70.7902%, 64.4068% 69.495%, 66.1017% 68.3422%, 67.7966% 67.3446%, 69.4915% 66.513%, 71.1864% 65.8565%, 72.8814% 65.3824%, 74.5763% 65.0959%, 76.2712% 65%, 77.9661% 65.0959%, 79.661% 65.3824%, 81.3559% 65.8565%, 83.0509% 66.513%, 84.7458% 67.3446%, 86.4407% 68.3422%, 88.1356% 69.495%, 89.8305% 70.7902%, 91.5254% 72.2138%, 93.2203% 73.75%, 94.9153% 75.3821%, 96.6102% 77.0922%, 98.3051% 78.8616%, 100% 80.6708%, 100% 0%);
}
.pricing {
  list-style: none;
}
.pricing li {
  position: relative
}
.pricing li:is(.yes, .no):before {
  font-family: "bootstrap-icons";
  position: absolute;
  top: 0px;
  left: -1.5rem;
  width: 16px;
  height: 16px;
}
.pricing .yes:before {
  content: '\f26D';
}
.pricing .no:before {
  content: '\f629';
}
#pricing .card {
  overflow: hidden;
  transition: all 300ms
}
.card.featured:after {
  content: "Top rated";
  font-size: 0.75rem;
  font-weight: 500;
  position: absolute;
  width: auto;
  height: 1.5rem;
  line-height: 1.3rem;
  padding: 4px 45px;
  top: 25px;
  right: -45px;
  color: var(--bs-white);
  text-transform: uppercase;
  background: var(--bs-red);
  z-index: 100;
  transform: rotateZ(45deg)
}
#pricing .card:hover {
  box-shadow: 0px 0px 13px 0px #eced21b5 inset;
  transform: translateY(-4px)
}
/*************************************************************/
/*Faqs styles*/
#faqs .accordion {
  background: transparent;
}
#faqs .accordion-item {
  background: var(--bs-gray-800);
  color: var(--bs-warning);
  border: 0;
  margin-bottom: 1rem
}
#faqs .accordion-button {
  background: transparent;
  padding-left: 3rem;
  border-bottom: 1px solid transparent;
}
#faqs .accordion-button:hover {
  color: var(--bs-warning);
}
#faqs button:not(.collapsed) {
  color: var(--bs-warning);
  border-bottom: 1px solid #00bcd475;
  box-shadow: none;
}
#faqs button:after {
  background: none;
  content: 0;
}
#faqs button:before {
  color: var(--bs-info);
  opacity: 0.6;
  content: '\f119';
  font-family: "bootstrap-icons";
  font-size: 2rem;
  position: absolute;
  width: 2rem;
  height: auot;
  left: 8px;
  background-image: none;
  transform: rotateZ(180deg);
  transition: all 300ms;
}
#faqs button.collapsed:before {
  transform-origin: center;
  transform: rotateZ(0deg)
}
#faqs .accordion-button:focus {
  box-shadow: none;
}

#faqs .card {
  background: var(--bs-secondary);
  border:0;
}
#faqs .card-body {
  padding: 0;
}
#faqs .nav-link {
  background: var(--bs-secondary);
  color: white;
}
#faqs .nav-link:not(.active):hover {
  cursor:pointer;
  box-shadow: 0 0 8px 2px #f4f4f440 inset;
}

#faqs .nav-link:not(.active) {
  background: var(--bs-gray-800);
  color: var(--bs-gray-600);
  
}
#faqs .nav-link.active {
  color: #f2f4f7;
}

@media (min-width: 768px) {
  #faqs .nav {
    width: 75%
  }
}
/*Tabs with faqs*/
#faqs .tab-content {
  position: relative;
  overflow: hidden;
  padding: 0;
}
#faqs .myfade {
  position: relative;
  top: 0;
  left: 0;
  width: 100%;
  display: block;
  opacity: 1;
  transition: all 800ms linear;
  z-index: auto;
}
#faqs .myfade.show {
  opacity: 1;
  z-index: 100;
  transition-delay: 600ms;
}
#faqs .myfade:not(.show) {
  opacity: 0;
  position: absolute;
  z-index: -1
}
/******************games ***************/
#games{
  background: url("../imgs/background2.jpg") no-repeat fixed;
  position: relative;
  z-index:1000;
}
#games h3{
  font-size: 1rem;
}
@media(min:769px){
#games h3{
  font-size: 1.5rem
}
}
#games:before{
  content: '';
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  background: black;
  opacity: 0.4;
  z-index: -1
}
.gameItem {
  position: relative;
  background: var(--bs-dark);
  border-color: var(--bs-gray-600);
  border-radius:0;
}
.gameItem .img:after {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background: transparent;
  background-image: radial-gradient(at 10% 10%, rgb(253 255 221 / 0%) 0%, rgb(253 255 221 / 10%) 65%, rgb(230 255 0 / 50%) 100%);
}
.gameItem:hover {
  cursor: pointer;
}

.gameItem.hover .img:after{
  content: '';

}
.gameItem .over {
  display: none;
  position: absolute;
  width: 100%;
  height: 100%;
  text-align: center;
  top: 0;
  left: 0;
}
.gameItem:hover .over {
  display: flex;
  justify-content: center;
  align-items: center;
}
/************************************************************/
/*Contact*/
 #form_contact .form-control {
  border-color: transparent;
  background-color: var(--bs-gray-800) !important;
}
input:-webkit-autofill {
  box-shadow: 0 0 0px 1000px var(--bs-gray-800) inset !important;
  -webkit-text-fill-color: var(--bs-gray-300);
}
@keyframes faq-img {
  from {
    top: 0;
    opacity: 1;
  }
  to {
    top: 20px;
    opacity: 0.8;
  }
}

#contact{
  background: url("../imgs/background2.jpg") no-repeat fixed;
 
  position: relative;
  z-index: 1000
}
#contact:before{
  content: '';
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  background: black;
  opacity: 0.4;
  z-index: -1
}
#contact .bg-dark{
  background-color: var(--bs-dark);
}
contact img {
  position: relative;
  height: 90%;
  width: 90%;
  animation: faq-img 4s ease-in infinite alternate
}
/***************************************************************************************************/

#staff .card img{
  width: 120px;
  height: 120px;
  margin: 0 auto;
  border-radius: 50%;
}
#staff .card{
    transition: all 800ms;  
 
}
#staff:hover .card{
  background: #0700004a !important;
  opacity: 0.3;
}
#staff .card:hover{
  background: #0700004a !important;
  opacity: 1 !important;
}

/*******************************************************/
footer {
  background: var(--bs-gray-900);
}
.offset-top {
  scroll-margin-top: 102px;
}
/*Fips letters*/
 
.flip-block {
  background: transparent;
  width: 100%;
  height: 100%;
  perspective: 1000px;
  padding: 10px;
}
.flip-block .flip-inner {
  position: relative;
  display: inline-block;
  width: 100%;
  height: 100%;
  top: 0;
  transition: transform 800ms;
  transform-style: preserve-3d;
  align-content: center;
}
#how .card:hover .flip-block  .flip-inner{
  transform: rotateY(180deg);
  backface-visibility: hidden;
}
.flip-block .flip-inner :is(.flip-front, .flip-back) {
  position: absolute;
  width: 100%;
  height: 100%;
  text-align: center;
  backface-visibility: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  
}
.flip-block .flip-inner .flip-back {
  transform: rotateY(180deg);
}

@media(min-width: 578px){
  .flip-block .flip-inner :is(.flip-front, .flip-back) {
  }
}
/*********/
#btn-back-to-top {
position: fixed;
bottom: 0px;
right: 10px;
opacity: 0;
cursor: pointer;  
background: var(--bs-danger);
color: white;  
font-size: 6rempx;
line-height: 2rem;
width: 2rem;
height: 2rem;   
text-align: center;  
border-radius: 50%;  
transition: all 800ms;
  z-index: 1000
}
/************************/
form .invalid-feedback{
  color: var(--bs-warning);
  padding-left: 10px;
}

 #respForm .modal-content{
     box-shadow: 0 0px 10px 0px white;
}