/* ----- MAIN BOX ------- */

:root {
	--blue: #792F9C; /*#1abc9c; */
	--indigo: #6610f2;
	--purple: #6f42c1;
	--pink: #e83e8c;
	--red: #e74c3c;
	--orange: #fd7e14;
	--yellow: #f1c40f;
	--green: #2ecc71;
	--teal: #20c997;
	--cyan: #00acc1;
	--white: #fff;
	--gray: #6c757d;
	--gray-dark: #343a40;
	--primary: #1abc9c;
	--secondary: #6c757d;
	--success: #2ecc71;
	--info: #00acc1;
	--warning: #f1c40f;
	--danger: #e74c3c;
	--light: #f8f9fa;
	--dark: #343a40;
	--breakpoint-xs: 0;
	--breakpoint-sm: 576px;
	--breakpoint-md: 768px;
	--breakpoint-lg: 992px;
	--breakpoint-xl: 1200px;
	--font-family-sans-serif: "Open Sans", sans-serif;
	--font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Popins" "Liberation Mono", "Courier New",
		monospace;

	--theam:linear-gradient(160deg,rgba(65, 6, 99, 1) 53%, rgba(199, 94, 42, 1) 36%);
	--theam-child: #FF5500;

	--blue-light: #e47469;
}
* {
	font-family: sans-serif;
}

.main-box {
	background: #f0f0f0;
}

.btn-round {
	border-radius: 50%;
	padding: 5px;
}

input {
	text-transform: uppercase !important;
}

.addBus {
	background: #f0f0f0 !important;
}

.pcoded-content {
	background: #F8E8FF;;
}

.sm-menu {
	border-radius: 5px;
	border: 1px solid #3e3e41;
	box-shadow: 1px 1px 10px #b4b4b4;
	text-align: center;
	margin-top: 10px;
	height: auto;
	padding: 15px;
}
.sm-menu i {
	font-size: 25px;
	color: rgb(84, 84, 84);
}
.sm-menu small {
	color: black;
	font-weight: 500;
}

.cd__main {
	position: relative;
	width: 360px !important;
	height: 720px;
	border: 2px solid #bbb;
}

.navigation-bar {
	position: fixed;
	top: 92%;
	width: 100%;
	background: var(--theam);
	border-radius: 3px;
	min-height: 30px;
	min-width: 200px;
	overflow: hidden;
	box-shadow: 0 15px 25px rgba(0, 0, 0, 0.1);
	z-index: 99999999999;
}
.navigation-bar .list-items {
	list-style: none;
	display: flex;
	position: relative;

	padding-left: 0;
}
.navigation-bar .list-items .item {
	flex: 1 1 0px;
	position: relative;
	z-index: 2;
}
.navigation-bar .list-items .item .link {
	display: inline-block;
	height: 4rem;
	width: 4.5rem;
	line-height: 5.2;
	text-align: center;
	color: #acb8c1;
}
.navigation-bar .list-items .item.active .link {
	color: #ff767d;
}

.navigation-bar .list-items .item.active .link i {
	background-color: var(--blue);
	padding: 10px;
	color: aliceblue;
	border-radius: 50px;
}

.list-items .item .link i {
	font-size: 1.3rem;
	transition: font-size 0.2s linear;
}
.list-items .item.active .link i {
	font-size: 1.4rem;
}

/*GET HELP BUTTON */

.fixed-button {
	top: 86%;
}


/*---------mobile menu header------*/

@media only screen and (max-width: 600px) {
	.pcoded-content{
		margin-top: 2px!important;
	}
	
	*{
		
	}
 /*
	.m-header{
	background-color: #0a335c;
	border-radius: 0 0 15px 15px ;
	
}
*/

.navbar{
	border-radius: 0 0 15px 15px ;
	position: fixed;
}
	
	.navbar-wrapper   {
		margin-top: -10px;
	}	
	.navigation-bar{
		border-radius: 10px 10px 0 0;
	}
	
	.form-control,.custom-select{
		border-radius: 5px;
		border: 1px solid rgba(2, 5, 30, 0.81);
		box-shadow: 1px 1px 10px rgb(193, 193, 193);
		
	}
	
	label{
		color: var(--theam);
	}
	
	.form-row div{
		margin-top: 8px;
	}
	
	.input-group-prepend{
		margin-top: 0!important;
	}
	
	
}

/* ===== MODERN APP MENU GRID STYLES ===== */
.app-menu-wrapper {
    background-color: #f8f9fa;
    border-radius: 16px;
}

.app-section-title {
    font-size: 15px;
    font-weight: 700;
    color: #2c3e50;
    letter-spacing: 0.3px;
}

.badge-light-primary {
    background-color: #eef2ff;
    color: #4f46e5;
    font-weight: 600;
    padding: 5px 10px;
    border-radius: 12px;
}

/* Responsive Grid (3 items per row on mobile) */
.app-grid-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}

/* Individual Grid Card */
.app-grid-item {
    background: #ffffff;
    border-radius: 16px;
    padding: 14px 8px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-decoration: none !important;
    border: 1px solid rgba(0, 0, 0, 0.04);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03);
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.app-grid-item:active {
    transform: scale(0.93);
    background: #f1f5f9;
}

.app-grid-item span {
    font-size: 12px;
    font-weight: 600;
    color: #334155;
    margin-top: 8px;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

/* Colorful App Icons */
.app-icon-box {
    width: 46px;
    height: 46px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    transition: transform 0.2s ease;
}

/* Soft Color Palettes for Icons */
.bg-light-blue   { background-color: #e0f2fe; color: #0284c7; }
.bg-light-green  { background-color: #dcfce7; color: #16a34a; }
.bg-light-orange { background-color: #ffedd5; color: #ea580c; }
.bg-light-purple { background-color: #f3e8ff; color: #9333ea; }
.bg-light-teal   { background-color: #ccfbf1; color: #0d9488; }
.bg-light-yellow { background-color: #fef9c3; color: #ca8a04; }
.bg-light-indigo { background-color: #e0e7ff; color: #4338ca; }
.bg-light-pink   { background-color: #fce7f3; color: #db2777; }
.bg-light-red    { background-color: #fee2e2; color: #dc2626; }
.bg-light-gray   { background-color: #f1f5f9; color: #475569; }

/* ===== MODERN SUPPORT CARD BANNER ===== */
.modern-support-card {
    background: linear-gradient(135deg, #2a085c 0%, #4c1d95 100%);
    border-radius: 20px;
    padding: 16px;
    position: relative;
    overflow: hidden;
    box-shadow: 0 10px 25px rgba(76, 29, 149, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.modern-support-card::before {
    content: '';
    position: absolute;
    top: -30px;
    right: -30px;
    width: 100px;
    height: 100px;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 50%;
}

.support-img-wrapper img {
    width: 65px;
    height: 65px;
    object-fit: cover;
    border-radius: 12px;
    border: 2px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 4px 10px rgba(0,0,0,0.2);
}

.support-tag {
    font-size: 10px;
    font-weight: 800;
    color: #fb923c;
    letter-spacing: 1px;
    display: block;
}

.support-title {
    color: #ffffff;
    font-size: 16px;
    font-weight: 700;
}

.support-sub {
    color: #cbd5e1;
    font-size: 11px;
}

.btn-support-call {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: linear-gradient(135deg, #fc4f00, #ff7426);
    color: #ffffff !important;
    font-size: 12px;
    font-weight: 600;
    padding: 8px 16px;
    border-radius: 25px;
    text-decoration: none !important;
    box-shadow: 0 4px 12px rgba(252, 79, 0, 0.4);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.btn-support-call:active {
    transform: scale(0.95);
}