/* Wrapper for the background image and overlay */
    .bg-image-wrapper {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-image: url('../img/main-bg.jpg'); /* Replace with your image path */
      background-size: cover;
      background-position: center;
      background-repeat: no-repeat;
    }

	.bg-image-wrapper_new {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-image: url('../img/Background.png'); /* Replace with your image path */
		background-size: cover;
		background-position: center;
		background-repeat: no-repeat;
	  }

    /* Black overlay */
    .bg-image-wrapper::before {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: rgba(2,12,48, 0.8); /* Black overlay with 50% opacity */
      z-index: 1;
    }

    /* Content styling to ensure it appears above the overlay */
    .main-content {
      position: relative;
      z-index: 2;
      color: white; /* Adjust text color for readability */
      padding: 20px;
    }
    /* Gradient background: White to Blue */
    .header-gradient {
      background: linear-gradient(90deg, white 40%, #0854BA 70%, black 100%);
    }
    .navbar-nav .nav-link {
      color: white !important;
      font-weight: 500;
    }
    .navbar-nav .btn {
      color: white !important;
      margin-left: 10px;
    }
	/* Custom height for different screen sizes */
	.custom-height {
		height: 500px; /* Default height for larger screens */
	}

  /* Adjust height for mobile screens */
	@media (max-width: 576px) {
		.custom-height {
		  height: auto; /* Allows the content to adjust naturally on mobile */
		}
	}
	/* Card with no fill color and no border */
		.card {
		  background: transparent; /* No background fill */
		  border: none; /* No border */
		  box-shadow: none; /* Optional: remove shadow if you want a completely clean look */
		}		
	/* Card body with gradient background */
		.custom-card-body {
		  background: linear-gradient(to top left, black, blue); /* Gradient background */
		  position: relative;
		  padding: 15px;
		  z-index: 0; /* Keep this in the normal stack */
		  border: none;
		  border-radius: 10%;
		  overflow: hidden;
		  transition: transform 0.5s ease-in-out; /* Add smooth hover transition */
		}

		.custom-card-body:hover {
		  transform: scale(1.02); /* Slight zoom effect on hover */
		  border: 3px solid #6DEBFF;
		  box-shadow: 0 0 15px 5px #6DEBFF; /* Bright shadow for a glowing effect */
		}

		
		/* Image placed at bottom-right corner of the card body */
		.card-image {
		  position: relative;
		  margin-bottom: -35%;
		  right: -35%;
		  width: 250px; /* Scale image to full width */
		  height: auto; /* Maintain aspect ratio */
		  opacity: 0.4; /* Adjust opacity to blend with background */
		  z-index: -1; /* Send image behind text */
		  object-fit: cover; /* Make the image cover the area */
		  background-blend-mode: multiply; /* Blend the image with the background color */
		  border-radius: inherit; /* Matches the card body's border radius */
		}
		.glow-title {
		  position: relative; /* Allow pseudo-element positioning */
		  display: inline-flex;
		  align-items: center;
		}

		.icon-glow {
		  width: 24px; /* Adjust size as needed */
		  height: 24px;
		  margin-right: 5px; /* Space between icon and text */
		  position: relative; /* Ensures glow stays with the icon */
		}

		
		.card-title {
			  margin-bottom: 0.2rem;
			  font-weight:bold;
			}

		.custom-divider {
		  border: 0;
		  border-top: 2px solid #FFA227; /* Yellow line */
		  margin: 0.3rem 0; /* Adjust spacing as needed */
		}
		.card-text {
			color:#6CE8FC;
			font-size:15px;
		}
		.subtitle {
			color:#6CE8FC;
		}

		/* Custom modal dialog sliding in from the right */
		.modal-dialog-slide-in-right {
			transform: translateX(100%);
			transition: transform 0.8s ease-out;
			width: 50%; /* Set width as needed */
			margin: 0;
			position: fixed;
			right: 50px;
			top: 12vh;
			bottom: 10vh;
			display: flex;
			justify-content: center;
			border: 2px solid #1cd5ff;
			border-radius: 15px;
			
		}

		.modal.fade .modal-dialog-slide-in-right {
			transform: translateX(100%);
		}

		.modal.show .modal-dialog-slide-in-right {
			transform: translateX(0);
		}

		/* Apply blur to modal backdrop */
		.modal-backdrop {
			backdrop-filter: blur(8px);  /* Adjust the blur level as needed */
			background-color: rgba(0, 0, 0, 0.8);  /* Dark overlay to enhance the blur */
		}

		/* Dark theme styling for modal */
		.modal-content {
			background-color: rgba(2,12,48, 0.8); /* Black overlay with 50% opacity */
			color: #ffffff;             /* White text */
			border: none;
			box-shadow: 0px 4px 12px rgba(28, 213, 255, 0.8);  /* Shadow for depth */
		}

		/* Dark theme for modal header */
		.modal-header {
			border-bottom: 1px solid #444444;  /* Darker border color */
		}

		.modal-header .close {
			color: #ffffff;  /* White close button */
			opacity: 0.8;
		}

		.modal-header .close:hover {
			opacity: 1;
		}

		/* Dark theme for modal body */
		.modal-body {
			color: #e0e0e0;  /* Light gray text for better readability */
			align-items: center;
		}

		/* Dark theme for form inputs inside modal */
		.modal-body .form-control {
			background-color: #444444;  /* Darker input background */
			color: #ffffff;             /* White text for input */
			border: 1px solid #666666;  /* Border to match dark theme */
		}

		.modal-body .form-control::placeholder {
			color: #bbbbbb;  /* Lighter placeholder text */
		}

		.modal-body .form-control:focus {
			background-color: #333333;  /* Slightly darker background on focus */
			border-color: #888888;      /* Border color change on focus */
			color: #ffffff;
		}

		/* Dark theme for modal buttons */
		.modal-footer .btn-primary, 
		.modal-body button.btn-primary {
			background-color: #5555ff;  /* Custom dark blue button color */
			border-color: #4444cc;
		}

		.modal-footer .btn-primary:hover, 
		.modal-body button.btn-primary:hover {
			background-color: #4444cc;  /* Darker on hover */
			border-color: #3333aa;
		}

		/* Optional: Custom scrollbar styling for dark theme */
		.modal-body::-webkit-scrollbar {
			width: 8px;
		}

		.modal-body::-webkit-scrollbar-thumb {
			background-color: #555555;
			border-radius: 4px;
		}

		.modal-body::-webkit-scrollbar-thumb:hover {
			background-color: #666666;
		}