/* ============================================
   CSS CUSTOM PROPERTIES (VARIABLES)
   ============================================ */
:root {
  /* Color Palette - Blues */
  --dark-blue-1: #0C205F;
  --dark-blue-2: #485787;
  --dark-blue-3: #03113D;
  --light-blue-1: #293C76;

  /* Neutral Colors */
  --white-color: #ffffff;
  --black-color: #000000;
  --card-background-color: #F3F5F8;
  --grey-text-color: #E7F0FFB2;

  /* Form Elements */
  --form-field-border: #BEC5D7;

  /* Effects */
  --border-radius: 24px;
  --box-shadow: 1px 4px 11.8px 3px #EAEAEA;
}


/* ============================================
   GLOBAL RESETS & BASE STYLES
   ============================================ */
*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: "Albert Sans", sans-serif;
  overflow-x: hidden;
}

/* Fonts */

@font-face {
  font-family: "Manrope";
  src: url("../assets/fonts/manrope/Manrope-SemiBold.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}


@font-face {
  font-family: "Albert Sans";
  src: url("../assets/fonts/albert-sans/AlbertSans-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Albert Sans";
  src: url("../assets/fonts/albert-sans/AlbertSans-Medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Albert Sans";
  src: url("../assets/fonts/albert-sans/AlbertSans-SemiBold.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Albert Sans";
  src: url("../assets/fonts/albert-sans/AlbertSans-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Albert Sans";
  src: url("../assets/fonts/albert-sans/AlbertSans-ExtraBold.woff2") format("woff2");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Albert Sans";
  src: url("../assets/fonts/albert-sans/AlbertSans-Black.woff2") format("woff2");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}



main {
  position: relative;
  overflow-x: hidden;
  background: linear-gradient(86.83deg, #03113d -15.43%, #153cb7 130.44%);
}

/* ============================================
   GOOGLE TRANSLATE OVERRIDES
   ============================================ */
/* Hide the Google Translate banner */
.goog-te-banner-frame {
  display: none !important;
}

/* Remove extra top spacing from Google Translate */
body {
  top: 0 !important;
}

/* Hide Google logo and branding */
.goog-logo-link,
.goog-te-gadget span {
  display: none !important;
}

/* Prevent layout shift from translate widget */
.goog-te-gadget {
  height: 0 !important;
  overflow: hidden;
}

.skiptranslate{
  opacity: 0;
}


/* ============================================
   HERO SECTION
   ============================================ */
.hero-gradient {
  background-image:
    linear-gradient(87.43deg,
      rgba(3, 17, 61, 0.92) -15.33%,
      rgba(21, 60, 183, 0.92) 117.85%),
    url("../assets/images/hero_background.jpg");
  background-size: cover;
  /* background-position: center; */
  background-repeat: no-repeat;
}


/* ============================================
   FAQ SECTION - ACCORDION INTERACTIONS
   ============================================ */

/* FAQ Answer Container - Height Animation */
.faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s ease;
}

.faq-answer.active {
  max-height: 300px;
  /* Adjust based on content needs */
}

/* FAQ Icon Container */
.faq-icon {
  transition: all 0.3s ease;
}

/* FAQ Icon SVGs - Base Transition */
.faq-icon svg {
  transition: opacity 0.3s ease, transform 0.3s ease;
}

/* Default State: Minus Icon (Expanded) */
.faq-icon .minus-icon {
  display: block;
  opacity: 1;
  transform: scale(1) rotate(0deg);
}

.faq-icon .plus-icon {
  display: block;
  opacity: 0;
  transform: rotate(90deg);
  position: absolute;
}

/* Collapsed State: Plus Icon */
.faq-item:not(.active) .faq-icon .minus-icon {
  opacity: 0;
  transform: rotate(-90deg);
}

.faq-item:not(.active) .faq-icon .plus-icon {
  opacity: 1;
  transform: scale(1) rotate(0deg);
}


/* ============================================
   UTILITY CLASSES
   ============================================ */

/* Smooth Focus Outline for Accessibility */
*:focus-visible {
  outline: 2px solid var(--dark-blue-1);
  outline-offset: 2px;
}

/* Image Optimization */
img {
  max-width: 100%;
  height: auto;
  display: block;
}


/* Loader */
#contactLoader {
  width: 20px;
  aspect-ratio: 1;
  display: none;
  -webkit-mask: conic-gradient(from 22deg, #0003, #000);
  mask: conic-gradient(from 22deg, #0003, #000);
  animation: load 1s steps(8) infinite;
}

#contactLoader,
#contactLoader:before {
  --_g: linear-gradient(currentColor 0 0) 50%;
  background:
    var(--_g)/34% 8% space no-repeat,
    var(--_g)/8% 34% no-repeat space;
}

#contactLoader:before {
  content: "";
  transform: rotate(45deg);
}

@keyframes load {
  from {
    transform: rotate(0turn);
  }

  to {
    transform: rotate(1turn);
  }
}