/* CSS Document */

/* Custom Button */

        .austin-btn {
            background: linear-gradient(135deg, #ff4e00, #ff9800);
            color: white;
            font-size: 1.3em;
            font-weight: bold;
            border: none;
            border-radius: 50px;
            padding: 0.8em 2em;
            text-transform: uppercase;
            display: inline-flex;
            align-items: center;
            gap: 0.75em;
            box-shadow: 0 4px 15px rgba(255, 78, 0, 0.5);
            transition: all 0.3s ease-in-out;
            position: relative;
            overflow: hidden;
        }

        .austin-btn i {
            font-size: 1.5em;
        }

        /* Hover effect: Add glow & slight scale */
        .austin-btn:hover {
            background: linear-gradient(135deg, #ff6a00, #ffa000);
			color: white;
            box-shadow: 0 6px 20px rgba(255, 78, 0, 0.7);
        }

        /* Active/Pressed effect */
        .austin-btn:active {
            transform: scale(0.95);
            box-shadow: 0 2px 10px rgba(255, 78, 0, 0.6);
        }

        /* Animated light streak */
        .austin-btn::before {
            content: "";
            position: absolute;
            top: 50%;
            left: -100%;
            width: 120%;
            height: 300%;
            background: rgba(255, 255, 255, 0.2);
            transform: skewX(-30deg);
            transition: left 0.5s ease-in-out;
        }

        .austin-btn:hover::before {
            left: 100%;
        }


		.austin-btn-purple {
			background: linear-gradient(135deg, #3E1F42, #6A3178);
			color: white;
			font-size: 1.3em;
			font-weight: bold;
			border: none;
			border-radius: 50px;
			padding: 0.5em 1.75em;
			text-transform: uppercase;
			display: inline-flex;
			align-items: center;
			gap: 0.75em;
			box-shadow: 0 4px 15px rgba(62, 31, 66, 0.5);
			transition: all 0.3s ease-in-out;
			position: relative;
			overflow: hidden;
		}

		.austin-btn-purple i {
			font-size: 1.5em;
		}

		/* Hover effect: Add glow & slight scale */
		.austin-btn-purple:hover {
			background: linear-gradient(135deg, #4A2750, #7B3A85);
			color: white;
			box-shadow: 0 6px 20px rgba(62, 31, 66, 0.7);
		}

		/* Active/Pressed effect */
		.austin-btn-purple:active {
			transform: scale(0.95);
			box-shadow: 0 2px 10px rgba(62, 31, 66, 0.6);
		}

		/* Animated light streak */
		.austin-btn-purple::before {
			content: "";
			position: absolute;
			top: 50%;
			left: -100%;
			width: 120%;
			height: 300%;
			background: rgba(255, 255, 255, 0.2);
			transform: skewX(-30deg);
			transition: left 0.5s ease-in-out;
		}

		.austin-btn-purple:hover::before {
			left: 100%;
		}



		.simple-austin-btn {
				background: linear-gradient(135deg, #ff4e00, #ff9800);
				color: white;
				font-size: 1.2em;
				font-weight: normal;
				border: none;
				border-radius: 50px;
				padding: 0.5em 1.5em;
				display: inline-flex;
				align-items: center;
				gap: 0.5em;
				box-shadow: 0 4px 10px rgba(255, 78, 0, 0.4);
				transition: all 0.3s ease-in-out;
			}

			.simple-austin-btn:hover {
				background: linear-gradient(135deg, #ff6a00, #ffa000);
				color: white;
				box-shadow: 0 6px 15px rgba(255, 78, 0, 0.5);
			}

			.simple-austin-btn:active {
				transform: scale(0.98);
				box-shadow: 0 3px 8px rgba(255, 78, 0, 0.3);
			}

			.simple-austin-btn i {
				font-size: 1.2em;
			}

		.nav-austin-btn {
					background: linear-gradient(135deg, #ff4e00, #ff9800);
					color: white;
					font-size: 0.9em;
					letter-spacing: .5px;
					font-weight: normal;
					border: none;
					border-radius: 50px;
					padding: 0.6em 1.3em;
					margin: 0 5px 0 30px;
					display: inline-flex;
					align-items: center;
					gap: 0.4em;
					box-shadow: 0 3px 8px rgba(255, 78, 0, 0.4);
					transition: all 0.3s ease-in-out;
				}

				.nav-austin-btn:hover {
					background: linear-gradient(135deg, #ff6a00, #ffa000);
					color: white;
					box-shadow: 0 4px 12px rgba(255, 78, 0, 0.5);
				}

				.nav-austin-btn:active {
					transform: scale(0.95);
					box-shadow: 0 2px 6px rgba(255, 78, 0, 0.3);
				}

				.nav-austin-btn i {
					font-size: 1em;
				}

			/* General Accordion Styles */
			#accordion1 .accordion-button {
				background-color: #f8f9fa; /* Light background for accordion buttons */
				color: #333; /* Text color */
				font-weight: bold; /* Make the text bold */
				border: 1px solid #ddd; /* Border to match the background color */
				border-radius: 25px; /* Rounded corners for the accordion button */
				transition: all 0.3s ease; /* Smooth transition for hover effect */
			}

			#accordion1 .accordion-button:hover {
				background-color: #e9ecef; /* Slightly darker background on hover */
			}

			#accordion1 .accordion-button:focus {
				box-shadow: none; /* Remove the focus outline */
			}

			#accordion1 .accordion-item {
				border-radius: 25px; /* Rounded corners for the accordion item */
				margin-bottom: 10px; /* Space between accordion items */
				border: 1px solid #ddd; /* Border for each item */
			}

			/* Accordion Body Styles */
			#accordion1 .accordion-body {
				background-color: #ffffff; /* White background for content */
				color: #333; /* Text color */
				padding: 20px; /* Padding inside the accordion body */
				font-size: 1rem; /* Default font size */
				border-radius: 0 0 25px 25px; /* Rounded corners for the bottom of the accordion */
			}

			/* Specific Heading Styles */
			#accordion1 .accordion-header h2 {
				font-size: 1.2rem; /* Larger font for the header */
				font-weight: bold; /* Bold header text */
				margin-bottom: 0; /* Remove bottom margin */
			}

			/* Custom Styles for Text Links */
			#accordion1 .accordion-body .text-danger {
				font-weight: normal; /* Remove boldness from danger text */
				font-size: 0.9rem; /* Smaller font size for notes */
				line-height: 1.5; /* Better line spacing for notes */
			}

	     .timeline {
            position: relative;
            max-width: 800px;
            margin: 40px auto;
        }
        .timeline::after {
            content: '';
            position: absolute;
            width: 4px;
            background: #E85D53; 
            top: 0;
            bottom: 0;
            left: 50%;
            transform: translateX(-50%);
        }
        .timeline-item-left {
            position: relative;
            width: 50%;
            padding: 20px;
            box-sizing: border-box;
        }
        .timeline-item-left:nth-child(odd) {
            left: 0;
            text-align: right;
        }
        .timeline-item-left:nth-child(even) {
            left: 50%;
            text-align: left;
        }
        .timeline-content {
            background: white;
            padding: 15px;
            border-radius: 8px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
            position: relative;
        }
		.timeline-item-left::before {
			content: '';
			position: absolute;
			width: 20px;
			height: 20px;
			background: #E85D53; 
			border-radius: 50%;
			top: 50%; /* Vertically center the dot on the line */
			left: 100%; /* Horizontally center the dot on the line */
			transform: translate(-50%, -50%); /* Adjust the dot position to align with the center */
			z-index: 1;
		}


	 .timeline-item-right {
            position: relative;
            width: 50%;
            padding: 20px;
            box-sizing: border-box;
        }
        .timeline-item-right:nth-child(odd) {
            left: 0;
            text-align: right;
        }
        .timeline-item-right:nth-child(even) {
            left: 50%;
            text-align: left;
        }
  
		.timeline-item-right::before {
			content: '';
			position: absolute;
			width: 20px;
			height: 20px;
			background: #E85D53; 
			border-radius: 50%;
			top: 50%; /* Vertically center the dot on the line */
			left: 0%; /* Horizontally center the dot on the line */
			transform: translate(-50%, -50%); /* Adjust the dot position to align with the center */
			z-index: 1;
		}

        .year {
            font-size: 1.2rem;
            font-weight: bold;
            color: #E85D53; 
        }