/* Override later in the stylesheet */
:root {
    --bs-border-color: #725382; /* New value */
    --bs-body-bg: #1a0e2b;
    --bs-body-font-family: Inter, Arial, sans-serif;
    --bs-body-color:  #fffaf9;
    --bs-modal-color:  #fffaf9;
    --bs-danger: #af4e58;
    --bs-danger-rgb: 175, 78, 88;

/*
Light theme
    --ph-background-primary-color: #fffaf9;
    --ph-background-secondary-color: #f1dacd;
    --bs-body-color:  #110c2e;
*/
/* dark theme*/
    --ph-background-primary-color: #1a0e2b;
    --ph-background-secondary-color: #250d31;
}

.modal {
    --bs-modal-header-border-width: 0px;
}

.btn-close {
    --bs-btn-close-color: #0d022a;
}

.btn-primary {
    --bs-btn-color:hsl(22, 56%, 87%);
    --bs-btn-bg: #0d022a;
    --bs-btn-border-color: #0d022a;
    --bs-btn-hover-color: ;
    --bs-btn-hover-bg: #17194a;
    --bs-btn-hover-border-color: #17194a;
    --bs-btn-focus-shadow-rgb: 49, 132, 253;
    --bs-btn-active-color:  #fffaf9;
    --bs-btn-active-bg: #0d022a;
    --bs-btn-active-border-color: #0d022a;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #674976;
    --bs-btn-disabled-bg: #6d5990;
    --bs-btn-disabled-border-color: #674976;
}


.btn-secondary {
    --bs-btn-color:hsl(22, 56%, 87%);
    --bs-btn-bg: #715583;
    --bs-btn-border-color: #715583;
    --bs-btn-hover-color: ;
    --bs-btn-hover-bg: #896d8d;
    --bs-btn-hover-border-color: #896d8d;
    --bs-btn-focus-shadow-rgb: 49, 132, 253;
    --bs-btn-active-color:  #fffaf9;
    --bs-btn-active-bg: #715583;
    --bs-btn-active-border-color: #715583;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #674976;
    --bs-btn-disabled-bg: #6d5990;
    --bs-btn-disabled-border-color: #674976;
}

@font-face {
    font-family: 'Inter';
    font-style: normal; /* See note below */
    font-weight: 100 900; /* Variable font supports multiple weights */
    src: url('./fonts/Inter-VariableFont_opsz.ttf') format('truetype');
  }

@font-face {
    font-family: 'Inter';
    font-style: italic; /* See note below */
    font-weight: normal;
    src: url('./fonts/Inter-Italic-VariableFont_opsz.ttf') format('truetype');
  }


@font-face {
    font-family: 'Proxima Nova';
    src: url('fonts/proximanova-regular.woff2') format('woff2'),
         url('../fonts/proximanova-regular.woff') format('woff'),
         url('../fonts/proximanova-regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
  }

  @font-face {
    font-family: 'Proxima Nova';
    src: url('fonts/proximanova-bold.woff2') format('woff2'),
         url('fonts/proximanova-bold.woff') format('woff'),
         url('fonts/proximanova-bold.ttf') format('truetype');
    font-weight: bold;
    font-style: normal;
}

body {
    background-color: var(--ph-background-primary-color);
}

.ph-button-primary {
    background-color: #0d022a;
    color: hsl(22, 56%, 87%) !important;
    border: none;
    border-radius: 16px; /* Adjust for desired roundness */
    padding: 1.0rem 1.5rem;  /* Adjust for size */
    font-size: 1.25rem;     /* Adjust for text size */
    cursor: pointer;
    transition: all 0.3s ease;
    text-decoration: none;
    margin-top: 1rem;
    display: inline-block
}


.ph-button-primary:hover {
    background-color: #17194a; /* Slightly darker shade for hover */
    color: #fcf4ee;              /* Change text color on hover */
}

.ph-button-primary:active {
    transform: scale(0.95);   /* Add a "pressed" effect */
}

/* Custom styles */
.hero {
  background: url('images/backgroundv4.webp') no-repeat center center/cover;
  height: 100vh;
  color: #f8edbf;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  text-align: left;
}

/* Media query for mobile devices */
@media (max-width: 768px) {
    .hero {
      background: url('images/backgroundv3mobile.webp') no-repeat center center/cover;
    }
  }

.hero h1 {
    color: #f8edbf;
    text-shadow: 0 0 10px #faebbc50, 0 0 20px #faebbc50, 0 0 30px #faebbc50;
}

.navbar {
background-color: #0d022a !important; /* Overrides default Bootstrap colors */
}

.navbar .nav-link {
color: #f1dacd !important; /* Ensures links remain white */
}

.navbar .navbar-brand {
color: #f1dacd !important; /* Ensures the brand remains white */
}

.navbar {
    position: fixed; /* Fixes navbar to the top */
    width: 100%;     /* Full width */
    z-index: 1000;   /* Ensures it stays on top */
    transform: translateY(-100%); /* Hides the navbar by moving it off-screen */
    transition: transform 0.3s ease; /* Smooth slide-down effect */
}

.navbar.visible {
    transform: translateY(0); /* Brings the navbar back into view */
}

footer p {
    color: #f1dacd !important;
}

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


#features {
    background-color: var(--ph-background-secondary-color);
    text-align: start;
}

#features img {
    width: 4rem;
    height: 4rem;
}

.shrink-on-scroll {
    width: 100%; /* Adjust based on your requirements */
    max-width: 250px; /* Adjust based on your requirements */
    transition: transform 0.5s ease; /* Smooth shrinking effect */
}

.shrink-on-scroll.shrink {
    transform: scale(0.8); /* Shrink to 80% of the original size */
}

.blinking-caret {
    animation: blink 0.5s ease infinite;
  }

  @keyframes blink {
    0%, 100% {
        opacity: 1; /* Fully visible */
    }
    50% {
    opacity: 0; /* Fully invisible */
    }
  }

#about {
    background-color: var(--ph-background-secondary-color);
}

.small-image {
    width: 128px;
}

.carousel-indicators button {
    width: 8px !important;
    height: 8px !important;
    background-color: var(--bs-body-color) !important;
    border: none;
    border-radius: 50%;
    opacity: 0.7;
    transition: opacity 0.3s;
  }

  .carousel-indicators button.active {
    background-color: var(--ph-background-primary-color);
    opacity: 1;
  }

  @keyframes slowZoom {
    0%, 100% {
      transform: scale(1); /* Original size */
      transform-origin: 25% 25%; /* Zoom center 1/4 from top-left corner */
    }
    50% {
      transform: scale(1.2); /* Zoom in slightly */
      transform-origin: 25% 25%; /* Maintain the zoom center */
    }
  }

  .image-container {
    overflow: hidden; /* Ensures the image stays within the container */
    position: relative;
    width: 100%; /* Adjust to your container size */
  }

  .image-container img {
    width: 120%; /* Slightly larger to ensure smooth zooming */
    height: auto;
    animation: slowZoom 35s ease-in-out infinite; /* Slow zoom in and out */
  }

  .footnote {
    font-size: 0.6em; /* Slightly smaller than the main text */
    vertical-align: super; /* Moves the asterisk to a superscript position */
  }

  .footnote-text {
    font-size: 0.9em; /* Slightly smaller text for footnotes */
    margin-top: 5px;
  }



  /* Modal Dialog */
  .modal-fullscreen .modal-content {
    border-radius: 16px;
  }

  .modal-title {
    color: #f8edbf;
  }

  .modal-fullscreen .modal-dialog-slide {
    animation: slideIn 0.4s ease;
  }

  @keyframes slideIn {
    from {
      transform: translateX(100%);
    }
    to {
      transform: translateX(0);
    }
  }

  .modal-body-success {
    text-align: center;
  }

  .form-control:focus {
    border-color: #674976;
    box-shadow: 0 0 8px 4px rgba(103, 73, 118, 0.8); /* Glowing shadow */
  }

  #emailInput::placeholder {
    color: var(--bs-body-color);
    opacity: 0.5; /* Optional: Adjust transparency */
  }