/* Custom Styles */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,700;1,400&family=Open+Sans:wght@300..800&display=swap');
@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css");

/*************
GLOBAL
*************/
:root {
  --bg:#f8f9fa;
  --blue: #444c89;
  --dark-grey:rgb(51,51,51);
  --dark-grey-faded: rgba(51,51,51,0.2);
  --standard: #569bad;
  --gold: #ADA656;
  --whatsapp: #25D366;
}

body {
    background-color: var(--bg);
    font-family: "Open Sans", sans-serif;
    font-optical-sizing: auto;
    font-weight: 300;
    font-style: normal;
    color:#444;
    margin-top: 80px;
    font-variation-settings:
      "wdth" 100;
}

.footer {background-color: var(--dark-grey);}

.flex-list {list-style: none;}
.flex-list li {margin: 0.5rem 0;
  display: flex;
  align-items: flex-start; /* Align icon to the top */
  margin-bottom: 0.5rem; /* Space between list items */}
.flex-list li i.bi-heart-fill {
  flex-shrink: 0; /* Prevent the icon from shrinking */
  margin-right: 0.8rem; /* Space between icon and text */
}
.flex-list li span {
  flex: 1; /* Allow text to take the remaining space */
}

h1, h2, h3, h4, h5, h6 {
  font-family: "Cormorant Garamond", serif;
  font-weight: 400;
  font-style: normal;
  color: var(--blue);
}
h1 {font-size: 2rem;}

.btn-primary {background-color: var(--gold); border-color: var(--gold); color: #fff;}
.btn-primary:hover {background-color: var(--gold); border-color: var(--gold);}

.btn-whatsapp {background-color: var(--whatsapp); border-color: var(--whatsapp); color: #fff;}
.btn-whatsapp:hover {background-color: var(--whatsapp); border-color: var(--whatsapp);}

/* prevent image dragging */
img {
  pointer-events: none;
}

/**********
NAV
**********/
.navbar-nav .nav-link {
  color: var(--blue); /* Default link color */
  transition: color 0.4s ease, background-color 0.4s ease; /* Smooth transition */
  padding: 0.75rem 1rem;
}
.navbar-nav .nav-link:hover {
  background-color: var(--dark-grey-faded); /* Light background on hover */
  border-radius: 5px;
}
.navbar-nav .nav-link.active {
  color: white; /* Active link color */
  background-color: var(--blue); /* Background color for active state */
  border-radius: 5px;
}
.navbar-brand .logo {
  height: 50px;
}

/*********
HOME
**********/
.hero-header {background: linear-gradient(to bottom, var(--blue) 80%, var(--bg)80%); }
.banner {background-color: var(--blue);}
.hero-header h1, .banner h1 {font-size: 3rem;}
.hero-header p, .banner p {font-size: 1.1rem;}

/**********
CUSTOM
***********/
  .card {background-color: var(--dark-grey);}
  .card h5 {font-size: 2rem;}

  .card-gold {background-color: var(--gold);}
  .card-standard {background-color: var(--standard);}

/**********
DESKTOP
***********/
  
  @media (min-width: 768px) {
    .hero-header {
      padding: 4rem 0;

    }
    .hero-header h1 {
      font-size: 4rem;
    }
  }