/* CSS Document */

.lato-black {
		font-family: "Lato", sans-serif;
		font-weight: 900;
		font-style: normal;
		letter-spacing: 1px;
	}
  
.footer-section {
        width: 100%;
        background-image: radial-gradient(circle at center 65%,
                rgba(28, 31, 97, 0.8) 0%,
                rgba(0, 0, 0, 0.3) 100%);
        background-repeat: no-repeat;
        background-color: #1c1e26;
        color: #f8f9fa;
    }

.dropdown-menu {
  border-radius: 5px;
  /* background-color: rgba(0, 0, 0, 0.35); */
}

/* Target the dropdown item's hover state */
.dropdown-item:hover {
    background-color: rgb(69, 183, 236); /* Change background color */
    color: rgb(250, 248, 248); /* Change text color */
}

	/* offcanvas tweaks */
	.offcanvas .video-container {
		position: relative;
		width: 100%;
		padding-bottom: 56.25%;
		/* 9:16 aspect ratio (adjust if different) */
		height: 0;
		overflow: hidden;
		/* Hide any content that overflows the container */
	}

	.offcanvas .video-container video {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		-o-object-fit: cover;
		   object-fit: cover;
	}

	.offcanvas .picture-container {
		position: relative;
		width: 100%;
		padding-bottom: 56.25%;
		/* 9:16 aspect ratio (adjust if different) */
		height: 0;
		overflow: hidden;
		/* Hide any content that overflows the container */
	}

	.offcanvas .picture-container img {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		-o-object-fit: cover;
		   object-fit: cover;
	}

	.offcanvas-header .btn-close {
		z-index: 10;
		position: relative;
		background-color: white;
	}

	.offcanvas {
		padding: 0;
	}

	.offcanvas form .comments-input {
		background-color: rgb(230, 230, 230, 0.7);
		border: 1px solid #ccc;
		border-radius: 5px;
		height: 20vh;
		padding-left: 5px;
		padding-right: 10px;
		-webkit-box-sizing: border-box;
		        box-sizing: border-box;
		cursor: pointer;
	}

	.offcanvas form .comments-input:focus {
		border: 1px solid #007bff;
		background-color: white;
		outline: none;
		-webkit-box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
		        box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
	}

	.offcanvas form .comments-input:hover {
		border-color: #999;
	}

	.offcanvas .section-details {
		padding-top: 8px;
		padding-bottom: 8px;
		font-size: 1em;
		border-bottom: 2px dotted rgb(0, 0, 0, 0.2);
	}

	.offcanvas-body .nav-tabs {
		font-family: sans-serif;
		font-weight: 600;
		border-bottom-color: #69b6f5;
		/* Color for the inactive tabs' bottom border */

	}

	.offcanvas .nav-tabs .nav-link {
		border-top-left-radius: 5px;
		border-top-right-radius: 5px;
	}

	.offcanvas .nav-tabs .nav-link.active {
		border-color: #69b6f5 #69b6f5 transparent;
	}

	.offcanvas .nav-tabs .nav-link:hover {
		background-color: #69b6f5;
	}
  /* end offcanvas tweaks */

 .style39 {
    background-image: url("../assets/img/background%20stripe.webp");
    background-size: cover; /* Use cover to fill the div */
    background-position: center; /* Center the background image */
    background-repeat: no-repeat;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex; /* Use flexbox */
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center; /* Center horizontally */
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center; /* Center vertically */
    border-radius: 0.5rem; /* Use rem for responsive radius */
    padding: 20px; /* Add some padding to the div */
}

.style39 img {
    max-width: 100%; /* Ensure image doesn't overflow */
    max-height: 100%; /* Ensure image doesn't overflow */
    display: block; /* ensure image is block level */
}

.stylized-toast {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center; /* Vertically center icon and text */
    padding: 12px;
    margin-bottom: 10px; /* Spacing between toasts */
    border-radius: 18px;
    -webkit-box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* Soft shadow */
    position: relative; /* For close button positioning */
	opacity: 1; /* Make toasts fully opaque initially */
    -webkit-transition: opacity 0.5s ease-in-out;
    transition: opacity 0.5s ease-in-out; /* Add opacity transition */
}

.stylized-toast.fade-out-transition {
    opacity: 0;
}

.stylized-toast .toast-icon {
    margin-right: 12px;
    font-size: 1.5em; /* Adjust icon size */
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex; /* Ensure icon is flex for centering */
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
}

.stylized-toast .toast-message {
    -webkit-box-flex: 1;
        -ms-flex-positive: 1;
            flex-grow: 1; /* Allow message to take up remaining space */
}

.stylized-toast .toast-close-button {
    position: absolute;
    top: 50%;
    right: 5px;
    -webkit-transform: translateY(-50%);
            transform: translateY(-50%);
    background: none;
    border: none;
    font-size: 1.2em;
    cursor: pointer;
    opacity: 0.6;
}

.stylized-toast .toast-close-button:hover {
    opacity: 1;
}

/* Toast Variations - Colors based on your image */
.toast-success {
    background-color: #f0fdf4; /* Light green background */
    border: 1px solid #b2f2b2; /* Light green border */
    color: #047857; /* Darker green text */
}
.toast-success .toast-icon { color: #34d399; } /* Green icon color */

.toast-error {
    background-color: #fafae1; /* Light yellow background */
    border: 1px solid #e0c602; /* Light yellow border */
    color: #a16207; /* Darker yellow text */
}
.toast-error .toast-icon { color: #e0c602; } /* Yellow icon color */

.toast-notification {
    background-color: #d7e9f9; /* Light blue background */
    border: 1px solid #1d4dd6; /* Light blue border */
    color: #0f35b0; /* Darker blue text */
}
.toast-notification .toast-icon { color: #0f35b0; } /* Blue icon color */

.toast-failure {
    background-color: #faebec; /* Light red background */
    border: 1px solid #f85555; /* Light red border */
    color: #951616; /* Darker red text */
}
.toast-failure .toast-icon { color: #f85555; } /* Red icon color */

.material-symbols-outlined.fs-6 {
		/* For smaller icons like in the copy button */
		font-size: 1rem;
		/* or 16px, to match btn-sm text better */
	}

.btn-icon .material-symbols-outlined {
		vertical-align: middle;
		font-size: 1.25rem;
		/* Or 20px */
	}

/* 
* {
    outline: 1px solid red !important;
}
*/