/* Header Menu */
			.order-2 {
     		order: 0 !important; 
			}

			.container, .container-fluid, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl {
    		bs-gutter-x: 0rem !important;}

			/* =========================
			   HERO BACKGROUND
			========================= */
			.hero-slider {
			    position: relative;
			    height: 500px;
			    display: flex;
			    justify-content: center;
			    align-items: center;
			    overflow: hidden;

			    background: linear-gradient(270deg, #0d6efd, #dc3545, #0033a0, #ff1744);
			    background-size: 800% 800%;

			    animation: gradientMove 12s ease infinite;
			}

			/* MOVING GRADIENT */
			@keyframes gradientMove {
			    0% {
			        background-position: 0% 50%;
			    }
			    50% {
			        background-position: 100% 50%;
			    }
			    100% {
			        background-position: 0% 50%;
			    }
			}

			/* =========================
			   GLASSMORPHISM BOX
			========================= */
			.hero-content {
			    position: relative;
			    z-index: 2;

			    width: 90%;
			    max-width: 700px;

			    padding: 40px;

			    text-align: center;
			    color: #fff;

			    background: rgba(255, 255, 255, 0.12);

			    border: 1px solid rgba(255,255,255,0.2);

			    border-radius: 20px;

			    backdrop-filter: blur(14px);
			    -webkit-backdrop-filter: blur(14px);

			    box-shadow: 0 8px 32px rgba(0,0,0,0.2);
			}

			/* TITLE */
			.hero-content h1 {
			    font-size: 48px;
			    font-weight: 700;
			    margin-bottom: 15px;
			    font-family: 'Montserrat', sans-serif;
			    color: #e8ecff;
			    text-shadow: 0 2px 10px rgba(0,0,0,0.3);
			}

			/* TEXT */
			.hero-content p {
			    font-size: 18px;
			    line-height: 1.6;
			    margin-bottom: 25px;
			    color: rgba(255,255,255,0.9);
			}

			/* BUTTON */
			.hero-btn {
			    display: inline-block;
			    padding: 12px 24px;

			    background: #fff;
			    color: #0d6efd;

			    border-radius: 50px;

			    font-weight: 600;
			    text-decoration: none !important;

			    transition: 0.3s;
			}

			.hero-btn:hover {
			    background: #0d6efd;
			    color: #fff;
			}

			/* =========================
			   RESPONSIVE
			========================= */
			@media (max-width: 768px) {

			    .hero-content {
			        padding: 25px;
			    }

			    .hero-content h1 {
			        font-size: 30px;
			    }

			    .hero-content p {
			        font-size: 15px;
			    }

			}