body,
		html {
			margin: 0;
			padding: 0;
			height: 100%;
			background-image: url('../images/background.png');
			background-size: cover; /* Adjust as needed */
                  background-position: center; /* Adjust as needed */
                  background-repeat: no-repeat; /* Prevent image from repeating */
		}

.left_card {
  height: 450px;
  width: 350px;
  margin-top: auto;
  margin-bottom: auto;
  background: #f7b500;
  position: relative;
  display: flex;
  justify-content: center;
  flex-direction: column;
  padding: 10px;
  border-top: 3px solid #000000; /* Top border */
  border-left: 3px solid #000000; /* Left border */
  border-bottom: 3px solid #000000; /* Bottom border */
  border-radius: 25px 0px 0px 25px; /* top-left, top-right, bottom-right, bottom-left */

}

.right_card {
  height: 450px;
  width: 350px;
  margin-top: auto;
  margin-bottom: auto;
  background: #f7b500;
  position: relative;
  display: flex;
  justify-content: center;
  flex-direction: column;
  padding: 10px;
  border-top: 3px solid #000000; /* Top border */
  border-right: 3px solid #000000; /* Left border */
  border-bottom: 3px solid #000000; /* Bottom border */
  border-radius: 0px 25px 25px 0px; /* top-left, top-right, bottom-right, bottom-left */ 
  
}
		
		.description_card {
			height: 450px; /* was 400 */
			width: 325px;
			margin-top: auto;
			margin-bottom: auto;
			background: #18449b;
			color: white;
			position: relative;
			display: flex;
			justify-content: center;
			flex-direction: column;
			padding: 10px;
            border-top: 3px solid #000000; /* Top border */
			border-bottom: 3px solid #000000;
			border-left: 3px solid #000000; /* Top border */
			border-right: 3px solid #000000; /* Top border */
			border-radius: 25px;
            box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);


		}
		
		.pig_logo_container {
			position: absolute;
			height: 170px;
			width: 170px;
			top: -75px;
			border-radius: 50%;
			background: #f7b500;
			padding: 10px; 
			text-align: center;
			border-top: 3px solid #000000; /* Top border */
			border-bottom: 3px solid #f7b500;
			border-left: 3px solid #000000; /* Top border */
			border-right: 3px solid #000000; /* Top border */
		}
		.pig_logo {
			height: 150px;
			width: 150px;
			border-radius: 50%;
    			border: 0px solid white; /* used to be 2px */
		}
            .dp_logo_angle {
                  height: 150px;
                  width: 150px;
                  border-radius: 50%;
                  border: 0px solid white; /* Was Originally 2px */
                  position: absolute;      
                  top: 80; /* was originally 0 */
                  left: -125px; /* Adjust this value to control the distance from the existing logo */
                  transform: rotate(-30deg); /* Adjust the angle as needed */
            }

            .dp_balloon_angle {
                  height: 150px;
                  width: 200px;
                  border-radius: 50%;
                  border: 0px solid white; /* Was Originally 2px */
                  position: absolute;      
                  top: -75; /* was originally 0 */
                  left: 140px; /* Adjust this value to control the distance from the existing logo */
                  opacity: 0; /* Initially hidden */
                  transition: opacity 1s; /* Add a smooth transition effect with a 1-second duration */
                  animation: fadeAnimation 5s infinite alternate; /* Use CSS animations to continuously fade in and out */
            }

            .error_msg {
                  height: 150px;
                  width: 200px;
                  border-radius: 50%;
                  border: 0px solid white; /* Was Originally 2px */
                  position: absolute;      
                  top: 0; /* was originally 0 */
                  left: -150px; /* Adjust this value to control the distance from the existing logo */
            }

            @keyframes fadeAnimation {
                  0% {
                  opacity: 0;
                  }
                  100% {
                  opacity: 1;
                  }
            }

            .overlay {
                  position: absolute; /* To contain the absolute position elements */
                  width: 100%;
                  height: 100%;
             }
           
            .text-overlay {
                      position: absolute;
                      top: -85;
                      left: 157px;
                      width: 100%;
                      height: 100%;
                      display: flex;
                      align-items: center;
                      justify-content: center;
                      color: black; /* Text color */
                      font-size: 20px; /* Adjust the font size */
                      font-weight: bold; /* Adjust the font weight */
                      text-align: center;
                      z-index: 2; /* Place the text on top of the image */
                      opacity: 0; /* Initially hidden */
                      transition: opacity 1s; /* Add a smooth transition effect with a 1-second duration */
                      animation: fadeAnimation 5s infinite alternate; /* Use CSS animations to continuously fade in and out */

             }

             .error-text-overlay {
                      position: absolute;
                      top: -150;
                      left: -223px;
                      width: 100%;
                      height: 100%;
                      display: flex;
                      align-items: center;
                      justify-content: center;
                      color: black; /* Text color */
                      font-size: 20px; /* Adjust the font size */
                      font-weight: bold; /* Adjust the font weight */
                      text-align: center;
                      z-index: 2; /* Place the text on top of the image */

             }

		.form_container {
			margin-top: 100px;

		}
		.login_btn {
			width: 100%;
			background: #18449b !important;
			color: white !important;
		}
		.login_btn:focus {
			box-shadow: none !important;
			outline: 0px !important;
		}
		.login_container {
			padding: 0 2rem;
		}
		.input-group-text {
			background: #18449b !important;
			color: white !important;
			border: 0 !important;
			border-radius: 0.75rem 0 0 0.75rem !important;
		}
		.input_user,
		.input_pass:focus {
			box-shadow: none !important;
			outline: 0px !important;
			border-radius: 0 0.75rem 0.75rem 0 !important;
		}
		.custom-checkbox .custom-control-input:checked~.custom-control-label::before {
			background-color: #c0392b !important;
		}