@import url("https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap");

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

@font-face {
  font-family: "djr-black";
  src: url("../fonts/FormaDJRDeck-Black-Testing.ttf");
  font-weight: 900;
}

@font-face {
  font-family: "djr-bold";
  src: url("../fonts/FormaDJRDeck-Bold-Testing.ttf");
  font-weight: 700;
}

@font-face {
  font-family: "djr-extrabold";
  src: url("../fonts/FormaDJRDeck-ExtraBold-Testing.ttf");
  font-weight: 800;
}

@font-face {
  font-family: "djr-medium";
  src: url("../fonts/FormaDJRDeck-Medium-Testing.ttf");
  font-weight: 500;
}

@font-face {
  font-family: "djr-regular";
  src: url("../fonts/FormaDJRMicro-Regular.ttf");
  font-weight: 400;
}

@font-face {
  font-family: "djr-light";
  src: url("../fonts/FormaDJRBanner-Light-Testing.ttf");
  font-weight: 300;
}

@layer base {
  .main-heading {
    @apply text-[64px] lg:text-[90px] xl:text-[120px] font-djr-regular text-black leading-[90%];
  }
  .heading {
    @apply leading-[130%] text-[48px] md:text-[64px] lg:text-[90px] xl:text-[120px] !text-white font-djr-regular;
  }
  .sub-heading {
    @apply text-[40px] md:text-[45px] lg:text-[55px] xl:text-[64px] font-djr-regular text-black leading-[110%];
  }
  .collaborate-title {
    @apply text-[40px] xl:text-[48px] font-djr-regular text-black leading-[110%] tracking-tight;
  }
  .nav-item {
    @apply text-base font-djr-regular text-lightgray;
  }

  .paragraph-text {
    @apply text-lg xl:text-xl font-djr-regular text-black leading-[140%];
  }
  .custom-container {
    @apply max-w-[1216px] mx-auto px-4 w-full;
  }
  .custom-container-2 {
    @apply max-w-[1920px] mx-auto  w-full;
  }
  .primary-btn-style {
    @apply bg-lightblack flex justify-center items-center leading-none text-white px-6 py-2 rounded-xl font-djr-bold hover:bg-afterDark transition-colors duration-200 h-[41px] text-lg font-bold w-full md:w-fit text-center;
  }
  .secondary-btn-style {
    @apply bg-white flex justify-center items-center leading-none border-lightblack border text-lightblack px-6 py-2 rounded-xl  font-djr-bold hover:bg-calmWaters transition-colors duration-200 h-[41px] text-lg font-bold w-full md:w-fit text-center;
  }

  .third-btn-style {
    @apply bg-white flex justify-center items-center leading-none border-b border-black text-lightblack pb-1 font-djr-bold text-lg font-bold w-fit text-center;
  }

  .footer-item {
    @apply text-sm font-roboto leading-[140%] text-white;
  }
  .card-decription {
    @apply text-xl xl:text-2xl font-djr-regular text-black;
  }
  .input-text {
    @apply w-full h-full bg-transparent outline-none px-4 text-scarabaeusSacer text-base font-djr-regular placeholder:text-scarabaeusSacer;
  }
  .input-style {
    @apply bg-white h-[48px] rounded-xl border-squant border-2 overflow-hidden hover:border-secondry duration-300 ease-in-out;
  }
  .read-more-btn-style {
    @apply bg-white border-lightblack border text-lightblack px-6 py-2 rounded-xl text-base font-djr-bold transition-colors duration-200 w-fit;
  }
  .pagination-btn {
    @apply w-9 h-9 flex items-center justify-center rounded-lg bg-transparent text-base font-djr-regular text-lightgray hover:bg-[#f5f5f5] transition-all duration-200 ease-in-out;
  }

  .pagination-btn.bg-electricBlue:hover {
    @apply text-lightgray
  }
}

body {
  background: #FEFEFE; /*#f9fafb;*/
}
.language-selector {
  display: inline-block;
  position: relative;
  cursor: pointer;
  user-select: none;
}

.language-selector-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  background-color: white;

  border-radius: 4px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
  margin-top: 5px;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease-out;
  z-index: 1000;
}

.language-selector-dropdown.show {
  max-height: 200px;
  border: solid 1px #404040;
}

.language-option {
  padding: 8px 16px;
  cursor: pointer;
}

.language-option:hover {
  background-color: #f5f5f5;
}

.arrow {
  transform: rotate(0deg);
  transition: transform 0.3s;
}

.arrow.up {
  transform: rotate(-180deg);
}

/* Additional styles for the overlay */
.overlay {
  background-color: rgba(0, 0, 0, 0.3);

  backdrop-filter: blur(2.5px);
}

/* Hide the default calendar icon in Chrome */
input::-webkit-calendar-picker-indicator {
  opacity: 0;
  position: absolute;
  width: 100%;
  height: 100%;
  cursor: pointer;
}

/* Custom calendar icon */
.calendar-icon {
  position: absolute;
  right: 0.75rem;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
}

input[type="date"]::before {
  color: #404040;
  content: attr(placeholder);
  position: absolute;
  font-size: 16px;
}

input[type="date"] {
  color: transparent;
}

input[type="date"]:focus,
input[type="date"]:valid {
  color: #404040;
  font-size: 16px;
}

input[type="date"]:focus::before,
input[type="date"]:valid::before {
  content: "" !important;
}

.selectMenu {
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  background-color: white;

  border-radius: 4px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
  margin-top: 5px;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease-out;
  z-index: 1000;
  overflow: auto;
}

.selectMenu.show {
  max-height: 200px;
  border: solid 1px #404040;
}

.select-option {
  padding: 8px 16px;
  cursor: pointer;
}

.select-option:hover {
  background-color: #f5f5f5;
}

.arrow {
  transform: rotate(0deg);
  transition: transform 0.3s;
}

.arrow.up {
  transform: rotate(-180deg);
}
/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Firefox */
input[type="number"] {
  /*-moz-appearance: textfield;*/
}
.agreecheckbox input[type="checkbox"] {
  position: relative;
  cursor: pointer;
  appearance: none;
}
.agreecheckbox input[type="checkbox"]:before {
  content: "";
  display: block;
  position: absolute;
  width: 24px;
  height: 24px;
  top: 0;
  left: 0;
  border-radius: 8px !important;
}
.agreecheckbox input[type="checkbox"]:checked:after {
  content: "";
  display: block;
  width: 8px;
  height: 14px;
  border: solid #666666;
  border-width: 0 1px 1px 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
  position: absolute;
  top: 1px;
  left: 7px;
  overflow: hidden;
}
.scrollbar-hidden {
  -ms-overflow-style: none; /* Internet Explorer and Edge */
  scrollbar-width: none; /* Firefox */
  overflow-y: auto; /* Enable vertical scrolling */
}

/* For Webkit browsers like Chrome, Safari, and newer versions of Opera */
.scrollbar-hidden::-webkit-scrollbar {
  display: none;
}

.swiper {
  width: 100%;
  height: 100%;
}

.swiper-slide {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
}

.swiper-slide img {
  display: block;
  width: 100%;
}

.swiper-scrollbar {
  bottom: -10px !important;
}

.swiper-horizontal > .swiper-scrollbar,
.swiper-scrollbar.swiper-scrollbar-horizontal {
  position: relative !important;
  z-index: 50;
  height: var(--swiper-scrollbar-size, 4px);
  width: calc(100% - 2 * var(--swiper-scrollbar-sides-offset, 1%));
}

.swiper-scrollbar {
  position: relative !important;
  height: 1px !important;
  /* Thin line */
  background-color: black !important;
  /* Light grey background */
  border-radius: 0 !important;
  /* No rounded corners */
  cursor: pointer;
}

.swiper-scrollbar-drag {
  background-color: #024AD8!important; /*#000 !important;*/
  /* Black drag indicator */
  border-radius: 0 !important;
  /* No rounded corners */
  height: 100%;
  height: 4px !important;
  transition: background-color 0.3s;
  top: -2px !important;
}

.swiper-scrollbar2 {
  bottom: -10px !important;
}

.swiper-horizontal > .swiper-scrollbar,
.swiper-scrollbar.swiper-scrollbar-horizontal {
  position: relative !important;
  z-index: 50;
  height: var(--swiper-scrollbar-size, 4px);
  width: calc(100% - 2 * var(--swiper-scrollbar-sides-offset, 1%));
}

.swiper-scrollbar2 {
  position: relative !important;
  height: 1px !important;
  /* Thin line */
  background-color: black !important;
  /* Light grey background */
  border-radius: 0 !important;
  /* No rounded corners */
  cursor: pointer;
}

.swiper-scrollbar-drag {
  background-color: #024AD8!important; /*#000 !important;*/
  /* Black drag indicator */
  border-radius: 0 !important;
  /* No rounded corners */
  height: 100%;
  height: 4px !important;
  transition: background-color 0.3s;
  top: -3px !important;
}

.pagination-button.bg-methylblue:hover {
  background-color: #016594 !important;
  color: white;
}

.pagination-button[data-page="5"] {
  pointer-events: none;
  background-color: transparent !important;
  color: inherit !important;
  cursor: default !important;
}
/* Form input states */
.input-validation {
  position: relative;
}

.input-text:focus {
  outline: none;
}

/* Writing/Focus state */
.input-text.writing {
  border-color: #0066cc;
}

.input-validation:has(.writing) {
  border-color: #0066cc;
  box-shadow: 0 0 0 2px rgba(0, 102, 204, 0.2);
}

/* Complete/Valid state */
.input-text.complete {
  border-color: #28a745;
}

.input-validation:has(.complete) {
  border-color: #28a745;
}

/* Error state */
.input-text.error {
  border-color: #dc3545;
}

.input-validation:has(.error) {
  /* border-color: #dc3545; */
}

/* File upload styles */
#file-name.complete {
  color: #28a745;
}

#file-name.error {
  color: #dc3545;
}

/* Button states */
button:disabled {
  opacity: 0.5 !important;
  cursor: not-allowed !important;
}

/* Progress indicator styling */
.bg-secondry {
  background-color: #87ceeb !important;
}

/* Form sections transitions */
#step1Section,
#step2Section,
#step3Section {
  transition: opacity 0.3s ease;
}

/* Pulsing animation for focus states */
@keyframes pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(0, 102, 204, 0.4);
  }
  70% {
    box-shadow: 0 0 0 4px rgba(0, 102, 204, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(0, 102, 204, 0);
  }
}

.input-validation:has(.writing) {
  animation: pulse 1.5s infinite;
}