@tailwind base;
@tailwind components;
@tailwind utilities;

body {
  /* background-color: #888888; */
  background-color: white;
  overflow: scroll;
  
}

.h-72 {
  height: 24em !important
}

.nav-text-props {
  font-size: 14px !important;
  margin-top: 10px !important;
}

.nav-pad-custom {
  top: 50px !important; 
  border-bottom: solid .5px #ccc;
}

.cta-banner {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background: linear-gradient(to right, #d31287, #f79c77);
  color: white;
  padding: 1rem 2rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
  z-index: 1000;
  font-weight: bold;
  font-size: .80rem;
  text-wrap: balance;
}

.img-layout {
  background: url(/app/img/login.webp);
     background-size: cover;  /* Ensures the entire image is visible */
    background-repeat: no-repeat; /* Prevents the image from repeating */
    background-position: center; /* Centers the image within the container */
    width: 100%; /* Sets the width of the container */
    height: auto; /* Adjusts the height automatically */
    aspect-ratio: 1; /* Optional: maintains a square aspect ratio, adjust as needed */
}

/* Media query to hide .img-layout on mobile view */
@media (max-width: 768px) {
  .img-layout {
    display: none; /* Hides the element */
  }
}

/* Media query for tablet view */
@media (min-width: 769px) and (max-width: 1024px) {
  .img-layout {
    /* Add any specific styles for tablet view here */
    display: block; /* Ensure it is displayed */
    height: auto; /* Adjust height as necessary */
    /* You can also adjust the aspect ratio or any other properties if needed */
  }
}

/* Media query for desktop view */
@media (min-width: 1025px) {
  .img-layout {
    display: block; /* Ensure it is displayed */
    /* You can keep or adjust the existing styles for desktop view */
  }
}

/* Close Button (X) */
.cta-close {
  width: 180px !important;
  background: #ffffff;
  border: none;
  font-size: 12px !important;
  border-radius: 150px;
  color: gray;
  cursor: pointer;
  transition: transform 0.3s ease;
}

.cta-close:hover {
  transform: scale(1.2);
}

/* Banner Text */
.cta-text {
  flex-grow: 1;
}

.fwc-400 {
  font-weight: 500 !important;
}

table.dataTable.display tbody td,
table.dataTable thead>tr>th.sorting:before, table.dataTable thead>tr>th.sorting_asc:before, table.dataTable thead>tr>th.sorting_desc:before, table.dataTable thead>tr>th.sorting_asc_disabled:before, table.dataTable thead>tr>th.sorting_desc_disabled:before, table.dataTable thead>tr>td.sorting:before, table.dataTable thead>tr>td.sorting_asc:before, table.dataTable thead>tr>td.sorting_desc:before, table.dataTable thead>tr>td.sorting_asc_disabled:before, table.dataTable thead>tr>td.sorting_desc_disabled:before,
table.dataTable thead>tr>th.sorting:after, table.dataTable thead>tr>th.sorting_asc:after, table.dataTable thead>tr>th.sorting_desc:after, table.dataTable thead>tr>th.sorting_asc_disabled:after, table.dataTable thead>tr>th.sorting_desc_disabled:after, table.dataTable thead>tr>td.sorting:after, table.dataTable thead>tr>td.sorting_asc:after, table.dataTable thead>tr>td.sorting_desc:after, table.dataTable thead>tr>td.sorting_asc_disabled:after, table.dataTable thead>tr>td.sorting_desc_disabled:after {
  content: none !important;
}

table.dataTable thead th, table.dataTable thead td,
table.dataTable.no-footer {
  border: none !important;
}

table.dataTable thead th, table.dataTable tfoot th,
table.dataTable.row-border tbody th, table.dataTable.row-border tbody td, table.dataTable.display tbody th, table.dataTable.display tbody td,
table.dataTable.row-border tbody tr:first-child th, table.dataTable.row-border tbody tr:first-child td, table.dataTable.display tbody tr:first-child th, table.dataTable.display tbody tr:first-child td {
  border: solid .5px #ccc !important;
}

button:focus {
  outline: none !important;
}

:focus-visible {
  outline: none !important;
}

.input-spread {
  width: 100%;
  justify-content: space-between;
}

.primary-background {
  background-color: #F79C78;
}

.primary-border {
  border: 4px solid #F79C78;
  border-radius: 50%;
}

.custom-p {
  padding: .250rem 1rem;
}

.text-sm {
  font-size: .775rem !important;
}

.font-semibold {
  font-weight: 500 !important;
}

.hideSpinBtns[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
}

.showSpinBtns[type="number"]::-webkit-inner-spin-button {
  opacity: 1;
}
.text-primary {
  color: #F79C78;
}
.text-secondary {
  color: #ec4899;
}

.slick-slide > div {
  display: grid;
  place-items: center;
  margin-right: 5px;
  justify-content: center;
}

.slick2 .slick-slide > div {
  display: grid;
  /* place-items: center; */
  justify-content: space-between;
}

.content-container {
  width: 90%;
  margin-right: auto;
  margin-left: auto;
}
/* =================== top bar ================== */
@keyframes topbar-animation {
  from {
    transform: translateY(-100%);
  }
  to {
    transform: translateY(0);
  }
}

.topbar-animation {
  animation: topbar-animation 1s ease-in-out forwards;
}

/* ===================== bubbles ================ */
@keyframes bubble {
  0% {
    transform: translateY(0);
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  70% {
    opacity: 1;
  }
  100% {
    transform: translateY(-80vh);
    opacity: 0;
  }
}

.bubble {
  /* animation: bubble 7s infinite; */
}

@layer utilities {
  .text-balance {
    text-wrap: balance;
  }
}
.page {
  display: none;
}
.active {
  display: block;
}

.mobile-nav-active {
  color: #f79c77;
}