.navbar-brand img {
    max-width: 170px;
    height: auto;
    margin-top: -30px;
    margin-bottom: -55px;
}

.navbar{
    background-color: #FCFCFC;
}

/* Nav Link Specific Styling */
.navbar a {
    color: #25347A; /* Color matching the caro-content */
    padding: 10px 15px;
    text-decoration: none; /* Removes underline from links */
    transition: color 0.3s ease; /* Smooth transition for hover effect */
}

/* Nav Link Hover Effect */
.navbar a:hover {
    color: #0056b3; /* Color change on hover */
}

#inputUsername, #inputPassword {
    max-width: 250px !important;
}

#navBottom{
    background-color: #25347A;
    color: #FCFCFC;
    padding-top: 5px;
    box-shadow: 0 2px 4px rgba(37, 52, 122, 0.5); /* Adds a bottom shadow */
}

body{
    background-color: #F8FAFF;
    
}

body, input, button, .btn, .navbar a {
    font-family: 'Roboto', sans-serif; /* Use a sans-serif font for better readability */
}

/* Apply a heavier weight of Open Sans to buttons and nav links for emphasis */
button, .btn, .navbar a {
    font-weight: 600; /* Medium weight for better visibility */
}

#btnCreate, #btnLogin {
    border: 2px solid #25347A;
}

#btnCreate:hover, #btnLogin:hover {
    border: 2px solid #25347A;
}

.card {
    background-color: #FCFCFC !important; /* White background */
    border: none; /* Removes the default border */
    border-radius: 10px; /* Rounded corners */
    box-shadow: 0 0 10px rgba(37, 52, 122, 0.2);
}

.card .list-group-item {
    border-bottom: none; /* Removes the default border */
    background-color: #FCFCFC; /* White background */
}

.card-title {
    border-bottom: 2px solid #25347A; /* Example: Blue border */
    color: #25347A;
    margin-bottom: 15px;
    background-color: #FCFCFC;
}

.card hr {
    margin-top: 15px;
    margin-bottom: 15px;
}

.card .price {
    align-self: center; /* Vertically center align the price */
    margin-right: 10px; /* Spacing between price and button */
    font-weight: bold; /* Optional: To make the price stand out */
}

.selected-plan {
    border: 2px solid #25347A; /* Example: Blue border */
    box-shadow: 0 0 10px rgba(37, 52, 122, 0.5); /* Updated: Shadow based on the same color as the border */
}

.list-group-flush{
    min-height: 250px;
}

.price {
    font-size: 1.3rem;
}

.card-text {
    font-size: 1.1rem;
    min-height: 60px;
}

.btn {
    background-color: #25347A;
    color: #FCFCFC;
    border: none;
    box-shadow: 0 2px 4px rgba(37, 52, 122, 0.3);
    /*padding: 10 20px;*/
    border-radius: 10px;
}

.btn:hover {
    background-color: #FCFCFC; /* Lighter shade of the button color for hover */
    color: #25347A;
    border: 1px solid #25347A;
    box-shadow: 0 2px 4px rgba(37, 52, 122, 0.8);
}

.btn2 {
    background-color: #FCFCFC;
    color: #25347A;
    border: 1px solid #25347A; /* Example border color */
    box-shadow: 0 2px 4px rgba(37, 52, 122, 0.3);
    padding: 10px 20px;
    border-radius: 10px;
}

.btn2:hover {
    background-color: #25347A; /* Lighter shade of the button color for hover */
    color: #FCFCFC;
    border: 1px solid #25347A;
    box-shadow: 0 2px 4px rgba(37, 52, 122, 0.8);
}

.btn3 {
    background-color: #25347A;
    color: #FCFCFC;
    border: 1px solid #25347A; /* Example border color */
    box-shadow: 0 2px 4px rgba(37, 52, 122, 0.3);
    padding: 10 20px;
    border-radius: 10px;
}

.btn3:hover {
    background-color: #FCFCFC; /* Lighter shade of the button color for hover */
    color: #25347A;
    border: 2px solid #25347A;
    box-shadow: 0 2px 4px rgba(37, 52, 122, 0.8);
}

.btnBlue {
    background-color: #25347A;
    color: #FCFCFC;
    border: 1px solid #25347A; /* Example border color */
    box-shadow: 0 2px 4px rgba(37, 52, 122, 0.3);
    padding: 10 20px;
    border-radius: 10px;
}

.btnWhite {
    background-color: #FCFCFC;
    color: #25347A;
    border: 1px solid #25347A; /* Example border color */
    box-shadow: 0 2px 4px rgba(37, 52, 122, 0.3);
    border-radius: 10px;
    padding: 8px 16px;
}

.btnWhite:hover {
    background-color: #25347A; /* Lighter shade of the button color for hover */
    color: #FCFCFC;
    border: 1px solid #25347A;
    box-shadow: 0 2px 4px rgba(37, 52, 122, 0.8);
}

.btnBlue2 {
    background-color: #25347A;
    color: #FCFCFC;
    border: 1px solid #25347A; /* Example border color */
    box-shadow: 0 2px 4px rgba(37, 52, 122, 0.3);
    border-radius: 10px;
    padding: 8px 16px;
}

.btn2:hover {
    background-color: #25347A; /* Lighter shade of the button color for hover */
    color: #FCFCFC;
    border: 1px solid #25347A;
    box-shadow: 0 2px 4px rgba(37, 52, 122, 0.8);
}

#paymentsParentDiv{
    margin-top: 30px;
    margin-bottom: 25px;
}

#register{
    font-weight: 600;
}

/* Input styling */
.form-control {
    padding: 10px;
    border-radius: 8px;
    border: 2px solid #25347A; /* Example border, adjust as needed */
    background-color: #FCFCFC;
    resize: none; /* Prevent textarea resizing */
    overflow-y: auto; /* Ensures vertical scrollbar appears when text exceeds the height */
}

.form-control2 {
    border: 1px solid #25347A; /* Example border, adjust as needed */
    box-shadow: 0 0 10px rgba(37, 52, 122, 0.3);
    padding: 10px;
    border-radius: 8px;
    background-color: #FCFCFC;
    resize: none; /* Prevent textarea resizing */
    overflow-y: auto; /* Ensures vertical scrollbar appears when text exceeds the height */
}

.yoyoInput{
    margin-bottom: 0px;
    height: 100px;
    box-shadow: 0 2px 4px rgba(37, 52, 122, 0.2);
}

.yoyoInput:focus {
    outline: 2px solid #25347A;
    box-shadow: none;
}

.btnBorder {
    background-color: #FCFCFC;
    color: #25347A;
    border: 2px outset #25347A;
    box-shadow: 0 0 10px rgba(37, 52, 122, 0.5);
}

.btnBorder:hover {
    background-color: #25347A; /* Lighter shade of the button color for hover */
    color: #FCFCFC;
    border: 2px inset #25347A;
    box-shadow: 0 0 10px rgba(37, 52, 122, 0.9);
}

#subscribeAreaDiv{
    margin-top: 30px;
    margin-bottom: 25px;
}

#confirmationContainer {
    white-space: pre-wrap;
  }
  

footer{
    margin-top: 45px !important;
    background-color: #333333;
    color: #FCFCFC;
}

/* Styling for the social media icons and logo */
footer a.text-reset {
    display: inline-block;
    margin: 0 15px; /* Adjust spacing around icons as needed */
    color: #FCFCFC; /* Initial color for icons */
    transition: color 0.3s; /* Smooth transition for color change */
}

/* Ensure the row's items are vertically aligned */
.row.align-items-center {
    align-items: center;
}

/* Hover effect for the icons */
footer a.text-reset:hover {
    color: #0056b3 !important; /* Change to desired hover color */
}

#footerStuff{
    margin-left: 2px;
}

.spinner-border.text-primary {
    border-color: #CBD2D9 !important;
}

.spinner-border.text-primary {
    border-top-color: #25347A !important; /* This will change only the top border color */
}

.planDiv:hover {
    cursor: pointer;
}

.yoyoContainer {
    width: 60%;
}

#chatContent {
    margin-top: 20px;
    margin-bottom: 80px;
    width: 65%;
}

#chatArea {
    height: 200px;
    overflow-y: scroll;
}

.side-padding {
    padding-left: 3%;
    padding-right: 3%;
}

.space-bottom {
    margin-bottom: 40px;
}

.space-bottom2 {
    margin-bottom: 100px;
}


.compact-list .list-group-item {
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;
}

/* Set custom color for checkmark icons within #plan1Features */
#plan1Features .fa-check {
    color: #25347A;
}

#plan2Features .fa-check {
    color: #25347A;
}

#plan3Features .fa-check {
    color: #25347A;
}

.custom-alert {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.2);
    display: none;
    justify-content: center;
    align-items: center;
    z-index: 1000;
  }

.custom-alert-content {
    background-color: #FCFCFC;
    color: #25347A;
    padding: 35px;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    width: 25%;
    text-align: center;
    font-weight: 600;
}

.alert-button {
    width: 80px;
    padding: 8px 16px;
    background-color: #25347A;
    color: #FCFCFC;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    box-shadow: 0 4px 8px rgba(0,0,0,0.3);
}
  
.alert-button:hover {
    background-color: #f06755;
    color: #FCFCFC;
    box-shadow: 0 4px 8px rgba(0,0,0,0.9);
}

.min-height-reg {
    min-height: 600px;
}

.warning {
    background-color: #f06755;
    border: none;
    transition: background-color 0.3s; /* Smooth transition for background color */
    box-shadow: 0 2px 4px rgba(37, 52, 122, 0.3);
    padding: 12px 24px;
    border-radius: 10px;
}

.orangeBtn {
    background-color: #f06755;
    color: #FCFCFC;
    border: 1px solid #f06755; /* Example border color */
}

.space-top-spinner {
    margin-top: 10% !important;
    margin-bottom: 10% !important;
}

.iconContact {
    color: #25347A !important;
}

.cookie-banner {
    background-color: #FCFCFC;
    border-top: 5px solid #25347A !important;
    font-weight: 600 !important;
}
.cookie-link {
    color: #25347A;
}

/* Footer legal links */
.wt a {
    font-size: .85rem;      /* ≈ 13–14 px on default root size */
    font-weight: 400;       /* slightly lighter than the rest of the nav */
    color: #FCFCFC;
    transition: color .3s ease;
}

.wt a:hover,
.wt a:focus {
    color: #25347A;         /* same blue hover as before */
}

.wt a:hover,
.wt a:focus {
    color: #25347A;               /* blue on hover/focus */
}

/* footer copyright */
.wt #copyright {
    font-size: 0.8rem;   /* a touch smaller than body text */
    font-weight: 400;    /* regular weight */
    color: #FCFCFC;      /* same white as the links */
    letter-spacing: 0.2px;
}

footer img {
    height: auto; /*This ensures the aspect ratio is maintained */
    max-width: 150px !important; /* Optional: Limit logo size */
}

@media screen and (max-width: 768px) {
    footer img {
        max-width: 100px !important; /* Optional: Limit logo size */
    }
}

.btn-xl {
  font-size: 1.35rem;
  padding: 0.85rem 1.7rem;
  box-shadow: 0 2px 4px rgba(37, 52, 122, 0.4);
}

.btn-xl:hover {
    background-color: #FCFCFC; /* Lighter shade of the button color for hover */
    color: #25347A;
    border: 1px solid #25347A;
    box-shadow: 0 2px 4px rgba(37, 52, 122, 0.8);
    border: 1px solid #25347A; /* Example border color */   
    border-radius: 10px;
}

.btnNext {
    border: 2px solid #25347A;
}

.btnNext:hover {
    border: 3px solid #25347A;
    box-shadow: 0 2px 4px rgba(37, 52, 122, 0.7);
}

.editable:focus{
    outline: 3px solid #25347A;
    padding: 8px;
    border-radius: 4px;
    background-color: #FCFCFC;
    box-shadow: 0 2px 4px rgba(37, 52, 122, 0.2);
    border: none;
}

.input-focus:focus{
    border: none;
    box-shadow: none;
    outline: 3px solid #25347A;
}

.test-card {
    background-color: #F8FAFF;
    border: none; /* Removes the default border */
    box-shadow: none;
}

.test-options-card {
    background-color: #FCFCFC;
    border: 1px solid #25347A; /* Blue border */
    border-radius: 10px; /* Rounded corners */
    box-shadow: 0 0 10px rgba(37, 52, 122, 0.3);
}

/* Make selected radios use #25347A instead of bootstrap blue */
.test-options-card .form-check-input:checked {
  background-color: #25347A;
  border-color: #25347A;
}

/* Optional: match the focus ring to the same hue */
.test-options-card .form-check-input:focus {
  border-color: #25347A;
  box-shadow: 0 0 0 .25rem rgba(37, 52, 122, 0.25);
}

/* Base track (unchecked) */
.form-switch .form-check-input.xl-toggle {
  background-color: #ccc;
  border-color: #ccc;          /* keep border same as track */
}

/* Track on focus (unchecked) */
.form-switch .form-check-input.xl-toggle:focus {
  box-shadow: 0 0 0 0.2rem rgba(37, 52, 122, 0.25);
  background-color: #ccc;
  border-color: #ccc;
}

/* Track when checked */
.form-switch .form-check-input.xl-toggle:checked {
  background-color: #25347A;
  border-color: #25347A;
}

/* Focus ring */
.form-switch .form-check-input.xl-toggle:focus {
  box-shadow: 0 0 0 0.2rem rgba(37, 52, 122, 0.25);
}

/* Thumb color (Bootstrap draws it with ::before on the input) */
.form-switch .form-check-input.xl-toggle::before {
  background-color: #FCFCFC;
}

/* Thumb on focus */
.form-switch .form-check-input.xl-toggle::before:focus {
  background-color: #25347A;
}

/* Keep thumb white when checked too (optional, explicit) */
.form-switch .form-check-input.xl-toggle:checked::before {
  background-color: #25347A;
}