:root {
  /*Main Colors*/
  --bs-primary: #383F51;
  --bs-secondary: #fcf3da;
  --bs-primary-dark: rgb(248,214,124);
  --bs-primary-light:rgb(232,207,141); 
   /* #F2A583; */
  /* Used in ribbons */
  --bs-teritiary: #f8f9fa;

}


body {
  margin: 0;
  background: #000;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  overflow-y: hidden;
}

/* changing background here will change the backgorund for entire project including the animation */
.bg {
  background-color: #ffffff;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25'%3E%3Cdefs%3E%3ClinearGradient id='a' gradientUnits='userSpaceOnUse' x1='0' x2='0' y1='0' y2='100%25' gradientTransform='rotate(240)'%3E%3Cstop offset='0' stop-color='%23ffffff'/%3E%3Cstop offset='1' stop-color='%23424949'/%3E%3C/linearGradient%3E%3Cpattern patternUnits='userSpaceOnUse' id='b' width='540' height='450' x='0' y='0' viewBox='0 0 1080 900'%3E%3Cg fill-opacity='0.1'%3E%3Cpolygon fill='%23444' points='90 150 0 300 180 300'/%3E%3Cpolygon points='90 150 180 0 0 0'/%3E%3Cpolygon fill='%23AAA' points='270 150 360 0 180 0'/%3E%3Cpolygon fill='%23DDD' points='450 150 360 300 540 300'/%3E%3Cpolygon fill='%23999' points='450 150 540 0 360 0'/%3E%3Cpolygon points='630 150 540 300 720 300'/%3E%3Cpolygon fill='%23DDD' points='630 150 720 0 540 0'/%3E%3Cpolygon fill='%23444' points='810 150 720 300 900 300'/%3E%3Cpolygon fill='%23FFF' points='810 150 900 0 720 0'/%3E%3Cpolygon fill='%23DDD' points='990 150 900 300 1080 300'/%3E%3Cpolygon fill='%23444' points='990 150 1080 0 900 0'/%3E%3Cpolygon fill='%23DDD' points='90 450 0 600 180 600'/%3E%3Cpolygon points='90 450 180 300 0 300'/%3E%3Cpolygon fill='%23666' points='270 450 180 600 360 600'/%3E%3Cpolygon fill='%23AAA' points='270 450 360 300 180 300'/%3E%3Cpolygon fill='%23DDD' points='450 450 360 600 540 600'/%3E%3Cpolygon fill='%23999' points='450 450 540 300 360 300'/%3E%3Cpolygon fill='%23999' points='630 450 540 600 720 600'/%3E%3Cpolygon fill='%23FFF' points='630 450 720 300 540 300'/%3E%3Cpolygon points='810 450 720 600 900 600'/%3E%3Cpolygon fill='%23DDD' points='810 450 900 300 720 300'/%3E%3Cpolygon fill='%23AAA' points='990 450 900 600 1080 600'/%3E%3Cpolygon fill='%23444' points='990 450 1080 300 900 300'/%3E%3Cpolygon fill='%23222' points='90 750 0 900 180 900'/%3E%3Cpolygon points='270 750 180 900 360 900'/%3E%3Cpolygon fill='%23DDD' points='270 750 360 600 180 600'/%3E%3Cpolygon points='450 750 540 600 360 600'/%3E%3Cpolygon points='630 750 540 900 720 900'/%3E%3Cpolygon fill='%23444' points='630 750 720 600 540 600'/%3E%3Cpolygon fill='%23AAA' points='810 750 720 900 900 900'/%3E%3Cpolygon fill='%23666' points='810 750 900 600 720 600'/%3E%3Cpolygon fill='%23999' points='990 750 900 900 1080 900'/%3E%3Cpolygon fill='%23999' points='180 0 90 150 270 150'/%3E%3Cpolygon fill='%23444' points='360 0 270 150 450 150'/%3E%3Cpolygon fill='%23FFF' points='540 0 450 150 630 150'/%3E%3Cpolygon points='900 0 810 150 990 150'/%3E%3Cpolygon fill='%23222' points='0 300 -90 450 90 450'/%3E%3Cpolygon fill='%23FFF' points='0 300 90 150 -90 150'/%3E%3Cpolygon fill='%23FFF' points='180 300 90 450 270 450'/%3E%3Cpolygon fill='%23666' points='180 300 270 150 90 150'/%3E%3Cpolygon fill='%23222' points='360 300 270 450 450 450'/%3E%3Cpolygon fill='%23FFF' points='360 300 450 150 270 150'/%3E%3Cpolygon fill='%23444' points='540 300 450 450 630 450'/%3E%3Cpolygon fill='%23222' points='540 300 630 150 450 150'/%3E%3Cpolygon fill='%23AAA' points='720 300 630 450 810 450'/%3E%3Cpolygon fill='%23666' points='720 300 810 150 630 150'/%3E%3Cpolygon fill='%23FFF' points='900 300 810 450 990 450'/%3E%3Cpolygon fill='%23999' points='900 300 990 150 810 150'/%3E%3Cpolygon points='0 600 -90 750 90 750'/%3E%3Cpolygon fill='%23666' points='0 600 90 450 -90 450'/%3E%3Cpolygon fill='%23AAA' points='180 600 90 750 270 750'/%3E%3Cpolygon fill='%23444' points='180 600 270 450 90 450'/%3E%3Cpolygon fill='%23444' points='360 600 270 750 450 750'/%3E%3Cpolygon fill='%23999' points='360 600 450 450 270 450'/%3E%3Cpolygon fill='%23666' points='540 600 630 450 450 450'/%3E%3Cpolygon fill='%23222' points='720 600 630 750 810 750'/%3E%3Cpolygon fill='%23FFF' points='900 600 810 750 990 750'/%3E%3Cpolygon fill='%23222' points='900 600 990 450 810 450'/%3E%3Cpolygon fill='%23DDD' points='0 900 90 750 -90 750'/%3E%3Cpolygon fill='%23444' points='180 900 270 750 90 750'/%3E%3Cpolygon fill='%23FFF' points='360 900 450 750 270 750'/%3E%3Cpolygon fill='%23AAA' points='540 900 630 750 450 750'/%3E%3Cpolygon fill='%23FFF' points='720 900 810 750 630 750'/%3E%3Cpolygon fill='%23222' points='900 900 990 750 810 750'/%3E%3Cpolygon fill='%23222' points='1080 300 990 450 1170 450'/%3E%3Cpolygon fill='%23FFF' points='1080 300 1170 150 990 150'/%3E%3Cpolygon points='1080 600 990 750 1170 750'/%3E%3Cpolygon fill='%23666' points='1080 600 1170 450 990 450'/%3E%3Cpolygon fill='%23DDD' points='1080 900 1170 750 990 750'/%3E%3C/g%3E%3C/pattern%3E%3C/defs%3E%3Crect x='0' y='0' fill='url(%23a)' width='100%25' height='100%25'/%3E%3Crect x='0' y='0' fill='url(%23b)' width='100%25' height='100%25'/%3E%3C/svg%3E");
  background-attachment: fixed;
  background-size: cover;
}

/* end background */

/* for animation styles */
.frame-container {
  position: relative;
  width: 100vw;
  height: 100vh;
}

.frame-container > * {
  display: none;
}

.frame-container > .active {
  display: block;
}
/* for animation styles end */


.full-height {
  height: 100vh;
  width: 100%;
}

svg {
  width: 100%;
  height: 100%;
}

.hidden {
  display: none;
}

 hr {
  border: none;
  border-top: 2px solid rgb(165, 110, 17);
  box-shadow: 0 2px 2px rgb(248, 214, 124);
  margin: 20px 0;
}

#MainTitle {
  font-size: 36px;
  color: #ffffff;
  border-bottom: 2px solid #a26824;
}

#NotesTitle {
  font-size: 18px;
  color: #ffffff;
  border-bottom: 2px solid #a26824"

}

.content {
  font-size: 22px;
  color: #ffffff;
  height:100vh;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: #DAA520 #333;
}


/* scrollbar */
/* Apply custom scrollbar styles to the entire page */
body::-webkit-scrollbar {
  width: 12px;
  /* Width of the scrollbar */
}

body::-webkit-scrollbar-track {
  background: #333;
  /* Background color of the scrollbar track */
}

body::-webkit-scrollbar-thumb {
  background-color: #DAA520;
  /* Gold color for the scrollbar thumb */
  border-radius: 6px;
  /* Rounded corners for the scrollbar thumb */
  border: 3px solid #333;
  /* Border around the scrollbar thumb */
}

/* Apply custom scrollbar styles to specific elements with the class .content */
.content::-webkit-scrollbar {
  width: 12px;
  /* Width of the scrollbar */
}

.content::-webkit-scrollbar-track {
  background: #333;
  /* Background color of the scrollbar track */
}

.content::-webkit-scrollbar-thumb {
  background-color: #DAA520;
  /* Gold color for the scrollbar thumb */
  border-radius: 6px;
  /* Rounded corners for the scrollbar thumb */
  border: 3px solid #333;
  /* Border around the scrollbar thumb */
}

/*End scrollbar */


/*buttons styles */
.btn-buttons {
  --bs-btn-color: #fff;
  --bs-btn-bg: #383F51;
  /* Primary color */
  --bs-btn-border-color: #383F51;
  /* Primary color */
  --bs-btn-hover-color: #323846;
  --bs-btn-hover-bg: #fff;
  /* Slightly darker shade for hover */
  --bs-btn-hover-border-color: #2b303f;
  /* Slightly darker shade for hover */
  --bs-btn-focus-shadow-rgb: 56, 63, 81;
  /* Color for focus shadow */
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #2b303f;
  /* Active background color */
  --bs-btn-active-border-color: #262a35;
  /* Active border color */
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  /* Active shadow */
  color: var(--bs-btn-color);
  background-color: var(--bs-btn-bg);
  border-color: var(--bs-btn-border-color);
  display: inline-block;
  font-weight: 400;
  text-align: center;
  vertical-align: middle;
  user-select: none;
  border: 1px solid transparent;
  padding: 0.375rem 0.75rem;
  font-size: 1rem;
  line-height: 1.5;
  border-radius: 0.25rem;
  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.btn-buttons:hover {
  color: var(--bs-btn-hover-color);
  background-color: var(--bs-btn-hover-bg);
  border-color: var(--bs-btn-hover-border-color);
}

.btn-buttons:focus,
.btn-buttons.focus {
  box-shadow: 0 0 0 0.2rem rgba(var(--bs-btn-focus-shadow-rgb), 0.5);
}

.btn-buttons:active,
.btn-buttons.active,
.show>.btn-buttons.dropdown-toggle {
  color: var(--bs-btn-active-color);
  background-color: var(--bs-btn-active-bg);
  border-color: var(--bs-btn-active-border-color);
  box-shadow: var(--bs-btn-active-shadow);
}


#taxiBtn path,
#picsBtn path,
#metroBtn path,
#contactBtn path,
#settingsBtn path,
#faqBtn path,
#mailBtn path {
  /* fill: #001f3f; Deep Navy Blue */
  /* fill:#483D8B; */
  fill: #383F51;
  /* fill:#3C4F76; */

}

/*Custom Button Size */
 .btn-lg-custom {
  padding: 1rem 1rem;
  font-size: 1.2rem;
}

#nextBtn #path34:hover,
#prevBtn #rect2:hover {
  fill: #5a5959;
  /* Change to hover color */
  cursor: pointer;
}

#nextBtn #path34:active,
#prevBtn #rect2:active {
  fill: #a9a9a9;
  /* Change to active (click) color */
}


.btn-dark {
  font-weight: bold;
  text-align: center;
  border-radius: 6px;
  border: 2px solid rgb(165, 110, 17);
  background-color: rgb(232, 207, 141); 
  color: rgb(165, 110, 17); 
  border-radius: 8px;
  font-size: 24px;
  height:45px;
  width:200px;
}

#btn-dark:hover {
  background-color: #424649; 
  color: rgb(165, 110, 17); 
}


#btn-dark:focus {
  border-color: rgb(248, 214, 124); 
  box-shadow: 0 0 6px rgb(248, 214, 124);
}

.btn-dark-md {
  font-weight: bold;
  text-align: center;
  border-radius: 6px;
  border: 2px solid rgb(165, 110, 17);
  background-color: rgb(232, 207, 141); 
  color: rgb(165, 110, 17); 
  border-radius: 8px;
  font-size: 24px;
  height:50px;
  width:120px;
}

#btn-dark-md:hover {
  background-color:white; 
  color: rgb(165, 110, 17); 
}


#btn-dark-md:focus {
  border-color: rgb(248, 214, 124); 
  box-shadow: 0 0 6px rgb(248, 214, 124);
}

/*end buttons styles */


#highlightPath {
  transition: fill 0.3s, stroke 0.3s;
  /* Smooth transition for fill and stroke */
}

#highlightPath:hover {
  fill: #fff;
  ;
  /* Slightly darker shade for hover */
  stroke: #323846;
  /* Golden yellow stroke for contrast */
  stroke-width: 2;
  /* Increase stroke width for better visibility */
}

#path34,
#rect2 {
  transition: fill 0.3s ease;
  /* Smooth transition for color changes */
}

.card {
  background-color: rgba(56, 63, 81, 0.3) !important;
  border: none !important;
}

/*accordion styles */

.accordion-header {
  background-color: rgba(56, 63, 81, 0.1) !important;
   border: none !important;
   border-bottom: 1px solid #DAA520 !important;
   font-size: 22px;
   font-weight:bold;
}

.accordion-body {
  background-color:  rgb(248, 214, 124) !important;
  color:#424649; 
  
}

.accordion-flush{
  max-height:500px;   /* adjust as needed */
  overflow-y: scroll;    /* enables vertical scrolling */
  padding-right: 10px; /* prevents text overlap with scrollbar */
}

.accordion-button {
  color: #DAA520 !important;
  background-color:  424649 !important;
  text-decoration: none !important;
  font-size: 22px !important;
}

.accordion-button:hover {
  text-decoration: underline !important;
  color: #FFD700 !important;
}

.accordion .accordion-item {
  border: 1px solid #DAA520 !important;
}

.accordion-body {
  border-top: 1px solid #DAA520 !important; 
}

.accordion-header,
.accordion-button,
.accordion ,.accordion-item {
  color: #fff !important;
  font-size: 22px;
  font-weight: bold;
}

/*accordion styles end */



/* Style the popover background to match gold */
.popover {
  /* background-color: rgb(248,214,124); */
  background-color: rgb(12, 12, 12);
  border: 2px solid rgb(165,110,17);
  border-radius: 8px;
}

.popover-header {
  background-color: rgb(232,207,141);
  color: rgb(165,110,17);
  font-weight: bold;
  text-align: center;
  border-bottom: 1px solid rgba(165,110,17,0.3);
  
}

.popover-body {
  padding: 10px;
}

/* Checkbox labels */
.popover-body label {
  display: flex;
  align-items: center;
  padding: 6px 10px;
  cursor: pointer;
  border-radius: 4px;
  color: rgb(165,110,17);
  transition: background-color 0.2s;
}

.popover-body label:hover {
  background-color: rgba(165,110,17,0.1);
}

/* Bigger checkboxes */
.popover-body input[type="checkbox"] {
  margin-right: 10px;
  transform: scale(1.2);
  accent-color: rgb(165,110,17); /* Modern browsers */
}
/*end popover styles */


/*days input control style */
#daysInput {
  width: 120px;
  height: 55px;
  padding: 6px 8px;
  font-size: 24px;
  font-weight: bold;
  text-align: center;
  border-radius: 6px;
  border: 2px solid rgb(165, 110, 17);
  background-color: rgb(232, 207, 141); 
  color: rgb(165, 110, 17); 
  outline: none;
  transition: all 0.2s ease-in-out;
}


#daysInput:hover {
  background-color: #424649; 
}


#daysInput:focus {
  border-color: rgb(248, 214, 124); 
  box-shadow: 0 0 6px rgb(248, 214, 124);
}

/* end days input control style */


/* Form Control styles */
  .form-control {
    flex: 1;
    padding: 8px;
    border: 2px solid rgb(165, 110, 17);
    border-radius: 4px;
    background-color: rgb(248, 214, 124);
    color: #383F51;
  }

 .form-group {
    display: flex;
    align-items: center;
    margin-bottom: 15px;
  }

  .form-group label {
    width: 120px;
    /* color: rgb(165, 110, 17); */
    color:white;
    font-weight: bold;
    margin: 0;
  }
/* End of Form Control styles */



/* Alert box styles*/
  .custom-alert {
    background-color: #383F51;
    color: rgb(248, 214, 124); /* gold text */
    padding: 10px;
    border-radius: 8px;
    width: 100%;
    margin: 5px auto; 
    max-height:500px;
    overflow-y:scroll ;
  }

  .custom-alert .form-group {
    display: flex;
    align-items: center;
    gap: 10px;
  }

  .custom-alert label {
    color: rgb(232, 207, 141); /* light gold label */
    font-size: 22px;
    font-weight: bold;
    font-weight: bold;
    white-space: nowrap;
  }

  .custom-alert input[type="email"] {
    flex: 1;
    padding: 8px;
    border: 2px solid rgb(165, 110, 17);
    border-radius: 4px;
    background-color: rgb(248, 214, 124); /* gold */
    color: #383F51;
  }

  .custom-alert small {
    display: block;
    margin-top: 5px;
    color: rgb(232, 207, 141); /* light gold */
    font-style: italic;
  }

  .custom-alert table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 10px;
    border: 2px solid rgb(248, 214, 124); /* Gold outer border */
}

.custom-alert th, 
.custom-alert td {
    border: 1px solid rgb(248, 214, 124); /* Gold cell borders */
    padding: 8px;
    text-align: left;
    color: rgb(248, 214, 124); /* Gold text */
}

.custom-alert th {
    background-color: transparent; /* Keep navy background visible */
    color: rgb(248, 214, 124); /* Gold text */
    font-weight: bold;
}

.custom-alert h2  {
    color: rgb(248, 214, 124); /* Gold text */
    border-bottom: 3px solid rgb(248, 214, 124); /* Gold underline */
    padding-bottom: 5px; /* Space between text and line */
    display: inline-block; /* Keeps underline only as wide as text */
}

.custom-alert h4  {
    color: rgb(248, 214, 124); /* Gold text */
    border-bottom: 3px solid rgb(248, 214, 124); /* Gold underline */
    padding-bottom: 5px; /* Space between text and line */
    display: inline-block; /* Keeps underline only as wide as text */
}

  #MailContent {
  width:100%;
  justify-content: center;  /* horizontal center */
  align-items: top;      /* vertical center */
  min-height: 100vh;        /* take full viewport height */
}

/* End of Alert box styles*/


/*For Pictures styles */
#PicsContent {
    height:100%;
    width:100%;
    padding: 0 !important;
    margin: 0 !important;
}

/* The container for the image */
#imageContainer {
    height:100%;
    width:100%;
    position: relative;
    
    padding: 0 !important;
    margin: 0 !important;
}

/* #displayedImage {
    height:100%;
    width:100%;
    display: block; 
    object-fit:contain;
    align-items: top; 
    border:2px solid rgb(248, 214, 124); 
    padding: 0 !important;
    margin: 0 !important;
} */

#displayedImage {
    height: 100%;
    width: 100%;
    display: block;
    object-fit: cover; /* fills container, may crop */
    border: 2px solid rgb(248, 214, 124);
}

.frame-container img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 0 !important;
  margin: 0 !important;
}

.frame-container img.active {
  opacity: 1;
}

/* End For Pictures styles */

/* Contact Us styles */
.contact-container {
  height: 450px;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: transparent;
}

.contact-form {
  background:  #383F51;
  padding: 20px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  width: 100%;
  max-width: 600px;
  border-radius: 8px;
} 


  .contact-info p {
    margin: 5px 0;
    color: white;
    font-weight: bold;
    display: flex;
    align-items: center;
    gap: 8px;
  }
  /* End of Contact Us styles */


  /*ribbon */
  .ribbon-list {
  list-style: none;
  padding: 0;
  overflow-y: scroll;
  max-height:300px;
  padding-left: 10px;
}

.ribbon-item {
  position: relative;
  background: var(--bs-primary);
  color: white;
  padding: 0.75rem 1.25rem;
  margin: 1rem 0;
  border-radius: 0 0.5rem 0.5rem 0;
  font-weight: 500;
  transition: all 0.3s ease-in-out;
  width:95%
}

.ribbon-item::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 0.5rem;
  background: var(--bs-primary-dark);
  border-top-left-radius: 0.5rem;
  border-bottom-left-radius: 0.5rem;
  
}

.ribbon-item::after {
  content: '';
  position: absolute;
  right: -1rem;
  top: 50%;
  transform: translateY(-50%);
  width: 0;
  height: 0;
  border-top: 1rem solid transparent;
  border-bottom: 1rem solid transparent;
  border-left: 1rem solid var(--bs-primary);
  transition: border-left-color 0.3s ease-in-out;
}

.ribbon-item:hover {
  background-color: var(--bs-teritiary);
  color: #212529;
  transform: scale(1.03);
}

.ribbon-item:hover::after {
  border-left-color: #212529;
}

.ribbon-item:hover::before {
  background: #212529;  /* <-- left edge color on hover */
}


.ribbon-block {
  position: relative;
  background: var(--bs-primary);
  color: white;
  padding: 1.25rem 2rem 1.25rem 1.5rem;
  /* right padding increased */
  margin: 1.5rem 0;
  border-radius: 0 0.75rem 0.75rem 0;
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.6;
  transition: all 0.3s ease-in-out;
}

.ribbon-block::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 0.5rem;
  background: var(--bs-primary-dark);
  border-top-left-radius: 0.5rem;
  border-bottom-left-radius: 0.5rem;
}

.ribbon-block::after {
  content: '';
  position: absolute;
  right: -0.75rem;
  /* narrower than before */
  top: 50%;
  transform: translateY(-50%);
  width: 0;
  height: 0;
  border-top: 1.25rem solid transparent;
  border-bottom: 1.25rem solid transparent;
  border-left: 0.75rem solid var(--bs-primary);
  /* narrower ribbon tail */
  transition: border-left-color 0.3s ease-in-out;
}

.ribbon-block:hover {
  background-color: var(--bs-teritiary);
  color: #212529;
  transform: scale(1.02);
}

.ribbon-block:hover::after {
  border-left-color: var(--bs-teritiary);
}  
 /*end of ribbon */

 /*alert message box */

 /* Ribbon-styled Bootstrap-like Alert */
.alert-ribbon {
  position: relative;
  background: var(--bs-primary);
  color: white;
  padding: 1rem 1.5rem;
  margin: 1rem 0;
  border-radius: 0.5rem;
  font-weight: 500;
  line-height: 1.4;
  transition: all 0.3s ease-in-out;
}

/* Left colored strip */
.alert-ribbon::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 0.5rem;
  background: var(--bs-primary-dark);
  border-top-left-radius: 0.5rem;
  border-bottom-left-radius: 0.5rem;
}

/* Hover effect */
.alert-ribbon:hover {
  background: var(--bs-teritiary);
  color: #212529;
  transform: scale(1.02);
}

.alert-ribbon:hover::before {
  background: #212529;
}
/*end of alert message box */

/* highlight */

.highlight-quote {
  position: relative;
  font-style: italic;
  background: var(--bs-secondary);
  color: var(--bs-primary);
  padding: 1.5rem 2rem;
  margin: 1.5rem 0;
   border: 5px solid var(--bs-primary-dark); 
  border-radius: 0.5rem;
  /* border-color: var(--bs-primary-dark); */
}

/* Opening quote */
.highlight-quote::before {
  content: "“";
  font-size: 5rem;
  line-height: 1;
  position: absolute;
  left: 15px;
  top: -15px;
  color: #383F51;   /* using your primary color */
  font-weight: bold;
  opacity: 0.2;     /* watermark style */
}

/* Closing quote */
.highlight-quote::after {
  content: "”";
  font-size: 5rem;
  line-height: 1;
  position: absolute;
  right: 15px;
  bottom: -25px;
  color: #383F51;   /* same color for consistency */
  font-weight: bold;
  opacity: 0.2;     /* watermark style */
}

.highlight-noquote {
  position: relative;
  font-style: italic;
  background: var(--bs-secondary);
  color: var(--bs-primary);
  padding: .5rem .5rem;
  /* margin: 1.5rem 0; */
  border: 5px solid var(--bs-primary-dark); 
  border-radius: 1rem;
  /* border-color: var(--bs-primary-dark); */
}


/* end highlight sign */

.highlight-card {
  background: var(--bs-teritiary);
  border: 1px solid var(--bs-primary-light);
  padding: 1.25rem 1.5rem;
  margin: 1.5rem 0;
  border-radius: 0.75rem;
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
  color: #212529;
  font-weight: 500;
}

.highlight-banner {
  background: linear-gradient(90deg, var(--bs-primary-dark), var(--bs-primary));
  color: white;
  padding: 1rem 1.5rem;
  margin: 1.5rem 0;
  font-size: 22px;
  font-weight: 600;
  border-radius: 0.5rem;
  text-align: center;
  letter-spacing: 0.5px;
}

.highlight-underline {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--bs-primary);
  padding-bottom: 0.5rem;
  margin: 1.5rem 0;
  border-bottom: 3px solid var(--bs-primary-dark);
}