:root {
  --wedding-brown:  #b0a48b;

  --wedding-blue: #BFCFE6 ;
  --wedding-darkblue: #335D99 ;
  --wedding-grey:rgb(185, 185, 185);


  --wedding-dark: #2A2E35;
  --wedding-ivory: #F9F7F3;
}

/* Typography */
.wedding-title {
  @apply font-heading text-navy tracking-wide;
}

.wedding-subtitle {
  @apply font-body text-grey text-lg;
}

.wedding-body {
  @apply font-body text-grey;
}

/* NAVIGATION BAR */
.navbar-bg {
  @apply bg-white/90 backdrop-blur shadow-md border-b border-greylight;
}

.nav-link {
  @apply text-navy hover:text-navylight transition;
}

.nav-link-disabled {
  @apply text-greylight cursor-not-allowed;
}

.nav-heart {
  @apply h-5 w-5 text-navy inline-block;
}

/* BUTTONS */
.btn-primary {
  @apply bg-navy text-white px-5 py-2 rounded-xl shadow hover:bg-navylight transition;
}

.btn-outline {
  @apply border border-navy text-navy bg-white px-5 py-2 rounded-xl hover:bg-navy hover:text-white transition;
}

/* CARDS */
.card {
  @apply bg-white border border-greylight rounded-2xl shadow p-6;
}

.card-light {
  @apply bg-greypale border border-greylight rounded-2xl shadow p-6;
}

/* INPUTS */
.input-field {
  @apply w-full border border-greylight rounded-xl p-3 bg-white shadow-sm 
         focus:ring-navy focus:border-navy transition;
}

.textarea-field {
  @apply w-full border border-greylight rounded-xl p-3 bg-white shadow-sm 
         h-28 resize-none focus:ring-navy focus:border-navy transition;
}

/* ICONS */
.icon-heart {
  @apply h-5 w-5 text-navy inline-block;
}

/*BBackground Header*/
.bg-header_main {
  background-color: var(--wedding-blue) !important;
}

/*BBackground Header*/
.bg-official_second {
  background-color: var(--wedding-darkblue) !important;
}
 
.bg-official_second:hover {
  background-color: var(--wedding-grey) !important;
  
}

.header_icons {
    color:white;
}


.header_icons:hover {

    color:var(--wedding-darkblue) !important;
}