@import url('https://fonts.googleapis.com/css2?family=Nunito+Sans:ital,opsz,wght@0,6..12,200..1000;1,6..12,200..1000&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Permanent+Marker&display=swap');

.permanent-marker-regular {
  font-family: "Permanent Marker", cursive;
  font-weight: 400;
  font-style: normal;
}


/* ---------- Fluid, balanced typography (all devices) ---------- */
:root {
  --primary-color: #004682 !important;
  --secondary-color: #FFF100 !important;
  /* Body / default text size: fluid with min & max caps */
  --fs-body: clamp(14px, 1.0vw, 18px);

  /* Headings: fluid, scaled; readable on phones & big screens */
  --fs-h1: clamp(28px, 4.5vw, 44px);
  --fs-h2: clamp(24px, 3.5vw, 36px);
  --fs-h3: clamp(20px, 2.6vw, 28px);
  --fs-h4: clamp(18px, 2.1vw, 24px);
  --fs-h5: clamp(17px, 1.8vw, 20px);
  --fs-h6: clamp(16px, 1.5vw, 18px);

  /* Utility sizes for UI bits (prices, meta, badges, etc.) */
  --fs-title: clamp(17px, 1.6vw, 20px);
  --fs-price: clamp(16px, 1.4vw, 18px);
  --fs-meta: clamp(12px, 0.95vw, 14px);

  /* Line-heights for comfort reading */
  --lh-body: 1.55;
  --lh-heading: 1.2;

  /* Optional letter-spacing for small text */
  --ls-meta: 0.02em;

  transition: background-color 0.5s ease, color 0.5s ease;
}

/* Scrollbar customization */
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 4px;
}

::-webkit-scrollbar-thumb {
  background: var(--primary-color);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: #003865; /* Slightly darker shade for hover effect */
}

/* Firefox scrollbar */
* {
  scrollbar-color: var(--primary-color) #f1f1f1;
  scrollbar-width: thin;
}

/* Base text setup */
html {
  /* allow better scaling in nested containers */
  text-size-adjust: 100%;
}

body {
  font-family: "Nunito Sans", sans-serif;
  font-optical-sizing: auto;
  font-weight: 600;
  font-style: normal;
  font-variation-settings:
    "wdth" 100,
    "YTLC" 500;
  letter-spacing: 0;
  font-size: 1rem !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}


/* Make most inline elements follow body size */
p,
span,
li,
a,
label,
small,
button,
input,
textarea,
select {
  font-size: inherit;
  line-height: inherit;
}

/* Headings: sizes + tighter line-height + balanced wrapping */
h1,
h2,
h3,
h4,
h5,
h6 {
  line-height: var(--lh-heading);
  margin-top: 0;
  margin-bottom: 0.5em;
  /* adjust per your design */
  text-wrap: balance;
  /* nicer multi-line titles in modern browsers */
}

h1 {
  font-size: var(--fs-h1);
}

h2 {
  font-size: var(--fs-h2);
}

h3 {
  font-size: var(--fs-h3);
}

h4 {
  font-size: var(--fs-h4);
}

h5 {
  font-size: var(--fs-h5);
}

h6 {
  font-size: var(--fs-h6);
}

/* Utility text sizes you can apply anywhere */
.text-title {
  font-size: var(--fs-title);
  line-height: var(--lh-heading);
}

.text-price {
  font-size: var(--fs-price);
}

.text-meta {
  font-size: var(--fs-meta);
  letter-spacing: var(--ls-meta);
  color: #6c757d;
}

/* Optional: clamp max measure for paragraphs for better readability */
.prose p {
  max-width: 65ch;
  /* ~65 characters per line */
}

/* Buttons & inputs inherit for consistency; tune paddings by size */
.btn,
.form-control,
.form-select {
  font-size: inherit;
  line-height: 1.35;
}

/* If you have long headings inside cards/hero, balance wrap */
.text-balance {
  text-wrap: balance;
}


.nav-link {
  padding: 0 !important;
}



/* Optional: slight adjustments on extremely wide screens */
@media (min-width: 1600px) {

  /* Keep body text from growing too subtle; h* already capped */
  :root {
    --fs-body: clamp(15px, 0.9vw, 18px);
  }
}

/* Optional: accessibility—respect user’s larger default sizes */
@media (prefers-reduced-motion: reduce) {
  * {
    transition: none !important;
  }
}

@media (min-width: 992px) {
  .rounded-lg-0 {
    border-radius: 0 !important;
  }

  .rounded-lg-1 {
    border-radius: var(--bs-border-radius-sm) !important;
  }

  .rounded-lg-2 {
    border-radius: var(--bs-border-radius) !important;
  }

  .rounded-lg-3 {
    border-radius: var(--bs-border-radius-lg) !important;
  }

  .rounded-lg-4 {
    border-radius: var(--bs-border-radius-xl) !important;
  }

  .rounded-lg-5 {
    border-radius: var(--bs-border-radius-xxl) !important;
  }
}


/* Letter-spacing utilities */
.ls-1 {
  letter-spacing: .05rem;
}

.ls-2 {
  letter-spacing: .1rem;
}

.ls-3 {
  letter-spacing: .2rem;
}

.ls-4 {
  letter-spacing: .3rem;
}

.ls-5 {
  letter-spacing: .8rem;
}

.ls-n1 {
  letter-spacing: -.05rem;
}


.fw-580 {
  font-weight: 580 !important;
}




.bg-primary {
  background-color: var(--primary-color) !important;
}

.bg-primary-subtle {
  background-color: #ecebff !important;
}

.bg-primary-subtle-2 {
  background-color: #faf9fd !important;
}

.bg-navbar {
  background-color: #FFF100 !important;
}

.bg-secondary {
  background-color: var(--secondary-color) !important;
}

.bg-secondary-subtle {
  background-color: #fffa9e !important;
}

.bg-secondary-subtle-2 {
  background-color: #fffde0 !important;
}

.text-secondary {
  color: var(--secondary-color) !important;
}

.text-secondary-subtle {
  color: #d6ca00 !important;
}

.border-secondary {
  border-color: var(--secondary-color) !important;
}

.border-secondary-subtle {
  border-color: #fff10038 !important;
}

.text-primary {
  color: var(--primary-color) !important;
}

.text-primary-subtle {
  color: #5F525D !important;
}

.btn-outline-primary {
  color: var(--primary-color) !important;
  border-color: var(--primary-color) !important;
  outline: none !important;
}

.border-primary {
  border-color: var(--primary-color) !important;
}

.border-primary-subtle {
  border-color: #00468238 !important;
}

.border-danger {
  border-color: #D91F00 !important;
}

.btn-outline-primary:hover,
.btn-outline-primary:focus,
.btn-outline-primary:active {
  background-color: var(--primary-color) !important;
  color: #fff !important;
  outline: none !important;
  box-shadow: none !important;
}

.btn-danger {
  background-color: #D91F00 !important;
  border-color: #D91F00 !important;
}

.btn-danger:hover,
.btn-danger:focus,
.btn-danger:active {
  background-color: #e04b4a !important;
  border-color: #e04b4a !important;
}

.btn-outline-danger {
  color: #D91F00 !important;
  border-color: #D91F00 !important;
  outline: none !important;
}

.bg-dark {
  background-color: #000000 !important;
}

.text-dark {
  color: #000000 !important;
}

.btn-dark {
  background-color: #000000 !important;
  border-color: #000000 !important;
  color: #fff !important;
}

.text-muted {
  color: #dddddf !important;
}

.underline-primary {
  text-decoration-color: var(--primary-color) !important;
}

.underline-secondary {
  text-decoration-color: var(--secondary-color) !important;
}

.btn-dark:hover,
.btn-dark:focus,
.btn-dark:active {
  background-color: #333333 !important;
  border-color: #333333 !important;
}

.btn-outline-dark {
  color: #000000 !important;
  border-color: #000000 !important;
  outline: none !important;
}

.btn-outline-dark:hover,
.btn-outline-dark:focus,
.btn-outline-dark:active {
  background-color: #000000 !important;
  color: #fff !important;
  outline: none !important;
  box-shadow: none !important;
}

.btn-outline-danger:hover,
.btn-outline-danger:focus,
.btn-outline-danger:active {
  background-color: #D91F00 !important;
  color: #fff !important;
  outline: none !important;
  box-shadow: none !important;
}

.btn-outline-secondary {
  border-color: var(--secondary-color) !important;
}

.btn-outline-secondary:hover {
  background-color: var(--secondary-color) !important;
  color: #fff !important;
}

.btn-primary {
  background-color: var(--primary-color) !important;
  border-color: var(--primary-color) !important;
}

.btn-secondary {
  background-color: var(--secondary-color) !important;
  border-color: var(--secondary-color) !important;
}

.primary-bg {
  background-color: #004682 !important;
}

.primary-bg-subtle {
  background-color: #0046821c !important;
}

.brown-text {
  color: #604d5c !important;
}

.primary-text {
  color: #004682 !important;
}

.secondary-bg {
  background-color: #FFF100 !important;
}



.secondary-text {
  color: #FFF100 !important;
}


.services-img{
  transition: transform 0.2s ease-in;
  transform-origin: center;
  height:20vh;

}
.services-img:hover{
  transform: scale(1.1);
}


#hero_services {
  background-image: url("../img/bg-heart.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  height: 430px;
}

.footer-logo {
  filter: brightness(0) invert(1);
}


.dropdown:hover>.dropdown-menu {
  display: block;
}

.dropdown>.dropdown-toggle:active {
  pointer-events: none;
}


.dropdown-item:hover,
.dropdown-item:focus {
  background-color: var(--primary-color) !important;
  color: #fff !important;
}


#loader {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #ffffff;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}




.main {
  flex: 1;
}


.bg-hero-text {
  background-color: #004682b4 !important;
}

@media (min-width: 992px) {
  .rounded-lg-end-pill {
    border-top-right-radius: 50rem !important;
    border-bottom-right-radius: 50rem !important;
  }

  .border-lg-0 {
    border: 0 !important;
  }
}