@import "../../source/libs/swiperjs/latest/swiperjs.css";

/* Define Swiper default navigation color */
:root {
  --swiper-navigation-color: black;
  /* You could also set --swiper-theme-color: black; if you want other elements like pagination to be black too */
}

body {
  background-color: #fafafa !important;
  font-family: "Poppins", sans-serif !important;
}

/* Frontpage hero button rounded */
.btn-rounded {
  border-radius: 6px;
  color: #0c0c0d;
  font-size: 16px;
  font-weight: 600;
}

/* Custom Facebook Button Styling */
.facebook-btn {
  color: white !important;
  font-size: 14px;
  font-weight: 500;
}
.facebook-btn span {
  color: white !important;
}

/* Custom Search Input Placeholder Focus */
.main-search-input:focus::placeholder {
  color: #000000;
}

/* Box title in small hero section color override */
.col-span-4.lg\:col-span-2 h2,
[data-boxes="slider"] h2 {
  color: white !important;
}

/* USP Item Hover Animation - Wobble Vertical */
@keyframes wobble-vertical {
  0%,
  100% {
    transform: translateY(0);
  }
  16.65% {
    transform: translateY(8px);
  }
  33.3% {
    transform: translateY(-6px);
  }
  49.95% {
    transform: translateY(4px);
  }
  66.6% {
    transform: translateY(-2px);
  }
  83.25% {
    transform: translateY(1px);
  }
}

.usp-icon-box {
  transform: translateY(0); /* Base state */
}

.usp-item-hover:hover .usp-icon-box {
  animation: wobble-vertical 1s ease-in-out 1;
}

/* Global form element styling */
input[type="text"],
input[type="password"],
input[type="email"],
input[type="number"],
input[type="tel"],
input[type="date"],
input[type="search"],
input[type="url"],
select,
textarea {
  border-radius: 4px;
  transition-property: all;
  transition-duration: 200ms;
  outline: none;
}

input[type="text"]:focus,
input[type="password"]:focus,
input[type="email"]:focus,
input[type="number"]:focus,
input[type="tel"]:focus,
input[type="date"]:focus,
input[type="search"]:focus,
input[type="url"]:focus,
select:focus,
textarea:focus {
  border-color: #60a5fa; /* Tailwind: border-blue-400 */
  box-shadow: 0 0 0 2px #dbeafe; /* Tailwind: ring-2 ring-blue-100 */
}

/* Add custom utility classes below this line */

.btn-primary-gradient {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 1rem 2rem; /* 16px 32px - consistent with original px-8 py-4 */
  font-weight: 500; /* medium */
  color: #ffffff; /* white */
  transition-property: all;
  transition-duration: 300ms;
  transition-timing-function: ease-in-out;
  border-radius: 4px;
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06); /* Tailwind shadow */
  transform: translateY(0);
  background-image: linear-gradient(to right, #004976, #0088cc);
}

.btn-primary-gradient:hover {
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); /* Tailwind shadow-lg */
  background-image: linear-gradient(to right, #00416a, #007ab8);
  transform: translateY(-2px); /* Original hover:-translate-y-0.5, adjusted to -2px for a bit more effect */
}

.btn-primary-gradient:focus {
  outline: none;
  box-shadow: 
    0 0 0 2px #ffffff, /* ring-offset-white (assuming white offset) */
    0 0 0 4px #0067a2, /* ring-2 with #0067a2 and considering offset */
    0 1px 3px 0 rgba(0, 0, 0, 0.1), /* base shadow */
    0 1px 2px 0 rgba(0, 0, 0, 0.06); /* base shadow */
}

.text-clamp-menu {
  font-size: clamp(14px, 0.833vw, 20px);
}

/* Hide default Swiper arrow pseudo-elements when using custom icons */
.swiper-button-prev::after,
.swiper-button-next::after {
  content: "";
}

/* --- Interactive Dot Hover Rings --- */
.interactive-dot-button {
  position: relative;
}

.interactive-dot-button::before,
.interactive-dot-button::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  border-radius: 9999px;
  border-width: 2px;
  border-style: solid;
  transition-property: opacity, transform;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 300ms;
  opacity: 0;
  z-index: -10;
  pointer-events: none;
  transform-origin: center;
}

/* Ring 1 (Inner) - ::before */
.interactive-dot-button::before {
  border-color: #60a5fa;
  transform: scale(1.6);
}

/* Ring 2 (Outer) - ::after */
.interactive-dot-button::after {
  border-color: #93c5fd;
  transform: scale(1.9);
}

/* Hover state on the GROUP */
.interactive-dot-group:hover .interactive-dot-button::before {
  opacity: 0.6;
  transform: scale(1.6);
}

.interactive-dot-group:hover .interactive-dot-button::after {
  opacity: 0.4;
  transform: scale(1.9);
}

.interactive-dot-group:hover .interactive-dot-button {
  transform: scale(1.3);
}

.button-hover-force-blue:hover {
  background-color: #005281 !important;
}

/* Hide reCAPTCHA badge */
.grecaptcha-badge {
    display: none !important;
}

/* Keep these font-faces at the bottom of the file */
/* Poppins Font Declarations */

.font-sans {
  font-family: "Poppins", sans-serif !important;
}

/* Thin */
@font-face {
  font-family: "Poppins";
  src: url("../fonts/poppins-thin.woff2") format("woff2"),
    url("../fonts/poppins-thin.ttf") format("truetype");
  font-weight: 100;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Poppins";
  src: url("../fonts/poppins-thinitalic.woff2") format("woff2"),
    url("../fonts/poppins-thinitalic.ttf") format("truetype");
  font-weight: 100;
  font-style: italic;
  font-display: swap;
}

/* ExtraLight */
@font-face {
  font-family: "Poppins";
  src: url("../fonts/poppins-extralight.woff2") format("woff2"),
    url("../fonts/poppins-extralight.ttf") format("truetype");
  font-weight: 200;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Poppins";
  src: url("../fonts/poppins-extralightitalic.woff2") format("woff2"),
    url("../fonts/poppins-extralightitalic.ttf") format("truetype");
  font-weight: 200;
  font-style: italic;
  font-display: swap;
}

/* Light */
@font-face {
  font-family: "Poppins";
  src: url("../fonts/poppins-light.woff2") format("woff2"),
    url("../fonts/poppins-light.ttf") format("truetype");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Poppins";
  src: url("../fonts/poppins-lightitalic.woff2") format("woff2"),
    url("../fonts/poppins-lightitalic.ttf") format("truetype");
  font-weight: 300;
  font-style: italic;
  font-display: swap;
}

/* Regular */
@font-face {
  font-family: "Poppins";
  src: url("../fonts/poppins-regular.woff2") format("woff2"),
    url("../fonts/poppins-regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Poppins";
  src: url("../fonts/poppins-italic.woff2") format("woff2"),
    url("../fonts/poppins-italic.ttf") format("truetype");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

/* Medium */
@font-face {
  font-family: "Poppins";
  src: url("../fonts/poppins-medium.woff2") format("woff2"),
    url("../fonts/poppins-medium.ttf") format("truetype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Poppins";
  src: url("../fonts/poppins-mediumitalic.woff2") format("woff2"),
    url("../fonts/poppins-mediumitalic.ttf") format("truetype");
  font-weight: 500;
  font-style: italic;
  font-display: swap;
}

/* SemiBold */
@font-face {
  font-family: "Poppins";
  src: url("../fonts/poppins-semibold.woff2") format("woff2"),
    url("../fonts/poppins-semibold.ttf") format("truetype");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Poppins";
  src: url("../fonts/poppins-semibolditalic.woff2") format("woff2"),
    url("../fonts/poppins-semibolditalic.ttf") format("truetype");
  font-weight: 600;
  font-style: italic;
  font-display: swap;
}

/* Bold */
@font-face {
  font-family: "Poppins";
  src: url("../fonts/poppins-bold.woff2") format("woff2"),
    url("../fonts/poppins-bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Poppins";
  src: url("../fonts/poppins-bolditalic.woff2") format("woff2"),
    url("../fonts/poppins-bolditalic.ttf") format("truetype");
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}

/* ExtraBold */
@font-face {
  font-family: "Poppins";
  src: url("../fonts/poppins-extrabold.woff2") format("woff2"),
    url("../fonts/poppins-extrabold.ttf") format("truetype");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Poppins";
  src: url("../fonts/poppins-extrabolditalic.woff2") format("woff2"),
    url("../fonts/poppins-extrabolditalic.ttf") format("truetype");
  font-weight: 800;
  font-style: italic;
  font-display: swap;
}

/* Black */
@font-face {
  font-family: "Poppins";
  src: url("../fonts/poppins-black.woff2") format("woff2"),
    url("../fonts/poppins-black.ttf") format("truetype");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Poppins";
  src: url("../fonts/poppins-blackitalic.woff2") format("woff2"),
    url("../fonts/poppins-blackitalic.ttf") format("truetype");
  font-weight: 900;
  font-style: italic;
  font-display: swap;
}