/*=============================
	root variables
===============================*/
:root {
	--color-primary: #820263;
	--color-secondary: #2C2D3F;
    --color-light: #ffffff;
    --default-text-color: #888;
	/* rgb */
	--color-primary-rgb: 130, 2, 99;
	--color-secondary-rgb: 44, 45, 63;
	/* Dark Theme */
	--navbar-color: #dbdbde;
}

/*=========================
		Global CSS
===========================*/
.ad-fw-600{
    font-weight: 600;
}

/* Brand Color */
.ad-text-primary {
    color: var(--color-primary);
}

.ad-text-secondary{
    color: var(--color-secondary);
}

.ad-text-light{
	color: var(--color-light);
}
/* End Brand Color */

/* Brand Button Color */
.ad-btn-primary {
	background-color: rgba(var(--color-primary-rgb),0.9);
    color: var(--color-light);
	border: var(--color-primary);
    font-weight:600!important;
	display:inline-block;
	margin:0;
}
.ad-btn-primary:active {
	background-color: var(--color-primary)!important;
	color: var(--color-light)!important;
}

.ad-btn-primary:hover {
    background-color: var(--color-primary);
    color: var(--color-light);
}

.ad-btn-secondary {
	background-color: rgba(var(--color-secondary-rgb),0.9);
    color: var(--color-light);
	border: var(--color-secondary);
    font-weight:600!important;
	display:inline-block;
	margin:0;
}
.ad-btn-secondary:active {
	background-color: var(--color-secondary)!important;
	color: var(--color-light)!important;
}

.ad-btn-secondary:hover {
    background-color: var(--color-secondary);
    color: var(--color-light);
}
/* End Brand Button Color */

/* Form Control and select*/
.form-control, .form-select {
	background-color: var(--color-light);
	color: var(--color-secondary);
	border: 1px solid rgba(var(--color-primary-rgb), 0.25);
	font-size: 14px!important;
}

.form-control:focus, .form-select:focus {
	border-color: var(--color-primary);
	box-shadow: 0 0 0 0.2rem rgba(var(--color-primary-rgb), 0.25);
}
/* End Form Control and select */

/*=============================
	General Styles CSS
===============================*/
body {
	overflow-x: hidden;
	position: relative;
    font-family: 'Poppins', sans-serif;
    font-size: 14px;
    line-height: 24px;
    background-color: var(--color-light);
    color: var(--default-text-color);
    font-weight: 400;
    margin: 0;
    padding: 0;
}

/* Main Content Admin / Employee pages */
.main-content {
    margin-left: 220px;
    margin-top: 65px;
    margin-bottom: 20px;
}

/* ++++++++++++++++++
+	Theme Color		+
+++++++++++++++++++++*/

/* Dark Theme */
/* .light-dark{
	background-color: var(--navbar-color)!important;
}

.dark-theme .single-table{
	background-color: var(--navbar-color)!important;
}

.dark-theme, .dark-theme .schedule, .dark-theme .pricing-table, .dark-theme .card{
	background-color: var(--color-secondary)!important;
	color: var(--color-light)!important;
} */
/* 
.dark-theme .top-navbar, .dark-theme .sticky-top, .dark-theme .fixed-top{
	background-color: var(--navbar-color);
}
.dark-theme .ad-text-primary {
	color: var(--color-primary);
}

.dark-theme .ad-text-secondary{
	color: var(--color-light);
}

.dark-theme .ad-text-light{
	color: var(--color-light);
}

.dark-theme .ad-btn-primary {
	background-color: rgba(var(--color-primary-rgb),0.9);
	color: var(--color-light);
	border: var(--color-primary);
	font-weight:600!important;
	display:inline-block;
	margin:0;
}

.dark-theme .ad-btn-primary:active {
	background-color: var(--color-primary)!important;
	color: var(--color-light)!important;
}

.dark-theme .ad-btn-primary:hover {
	background-color: var(--color-primary);
	color: var(--color-light);
}

.dark-theme .ad-btn-secondary {
	background-color: rgba(var(--color-secondary-rgb),0.9);
	color: var(--color-light);
	border: var(--color-secondary);
	font-weight:600!important;
	display:inline-block;
	margin:0;
}

.dark-theme .ad-btn-secondary:active {
	background-color: var(--color-secondary)!important;
	color: var(--color-light)!important;
}

.dark-theme .ad-btn-secondary:hover {
	background-color: var(--color-secondary);
	color: var(--color-light);
}

.dark-theme .form-control, .form-select {
	background-color: var(--color-secondary);
	color: var(--color-light);
	border: 1px solid rgba(var(--color-primary-rgb), 0.25);
	font-size: 14px!important;
}

.dark-theme .form-control:focus, .form-select:focus {
	border-color: var(--color-primary);
	box-shadow: 0 0 0 0.2rem rgba(var(--color-primary-rgb), 0.25);
} */

/* End Dark Theme */
/* ++++++++++++++++++
+	Theme Color		+
+++++++++++++++++++++*/

/*============================================
	Navigation Offcanvas Sidebar Breadcrumb
==============================================*/
.fixed-top{
    margin-left: 220px;
    color: var(--color-secondary);
    height: 60px!important;
    background-color: var(--color-light);
}

.fixed-top .navbar-brand{
    color: #333;
    margin-left: 5px;
}

.customized-offcanvas{
    width: 220px!important;
    background-color: var(--color-secondary);
    color: var(--color-light);
}

/* .customized-offcanvas .offcanvas-body{
    width: 220px!important;
    background-color: var(--color-secondary);
    color: var(--color-light);
} */

.offcanvas-header{
    background-color: var(--color-primary);
    padding: 20px auto 10px auto;
}

.profile-picture img{
    width: 40px!important;
	height: 40px!important;
	border: 1px solid var(--color-light);
	border-radius: 50%;
}
.profile-picture .bi{
	font-size: 30px!important;
}
.username-text{
    font-size: 15px;
	font-weight: 500;
}
.user-role-text{
    font-size: smaller;
}

.sidebar{
    background-color: var(--color-secondary);
    height: calc(100vh);
    padding: 20px 0px 50px!important;
    width: 220px!important;
    position: fixed;
    top: 0;
    left: 0;
}

aside .menu-section{
    margin: 0px 10px 0px 20px;
}

aside .icon{
    margin-right: 10px!important;
}

aside .icon-submenu{
    margin-right: 5px!important;
}

.sidebar .sub-menu{
    background-color: #212427;    
}

.sidebar .sub-menu a{    
    padding: 8px 30px;
}

.sidebar .sub-menu a:hover{
    background-color: var(--color-primary);
}

.user-offcanvas{
    width: 250px!important;
}

.offcanvas-account{
    width: 250px!important;
    background-color: var(--color-secondary);
    color: #fff;
}
.sidebar-right{
    padding: 0px 0px 50px!important;
    width: 250px!important;
    position: fixed;
    right: 0;
}

.customized-offcanvas .offcanvas-body ul li a, .offcanvas-account .offcanvas-body ul li a{
    text-decoration: none;
    color: var(--color-light);
}

.customized-offcanvas .offcanvas-body ul li a:hover, .offcanvas-account .offcanvas-body ul li a:hover{
    background-color: var(--color-primary);
    color: var(--color-light);
}

.customized-offcanvas .offcanvas-body ul li a:focus, .offcanvas-account .offcanvas-body ul li a:focus{    
    color: var(--color-light);
}

#breadcrumb .icon .bi{
	font-size: 30px;
	color: #820263;
}
/*====================================
	End Navigation Offcanvas Sidebar
======================================*/


/* top navbar */
.top-navbar{
    background-color: var(--color-light);
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

.top-navbar .nav-link{
    color: var(--color-secondary);
}

.top-navbar .nav-link:hover{
    color: var(--color-primary);
}
/* end top navbar */



.sticky-top{
    background-color: var(--color-light);
    color: var(--color-secondary);
    padding: 0px 0px;
	box-shadow: 0px 8px 13px -5px #00000054;
}
.sticky-top .navbar-nav .nav-link, .nav-item.dropdown{
    position: relative;
    font-size: 15px;
    font-weight: 500;
    white-space: nowrap;
    color: var(--color-secondary);
    text-decoration: none;
    transition: all 0.4s ease-in;
}

.sticky-top .navbar-nav .nav-link::after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 0;
    width: 100%;
    height: 3px;
    background-color: var(--color-primary);
    transform: scaleX(0);
    transition: transform 0.2s ease;
}

.sticky-top .navbar-nav .nav-link:hover::after {
    transform: scaleX(1);
}

.sticky-top .navbar-nav .nav-link:hover{
    color: var(--color-primary);
}

.sticky-top .navbar-nav .nav-item{
    margin-right: 3px;
}

.sticky-top .navbar-nav .nav-item:last-child{
    margin-right: 0px;
}

.sticky-top .navbar-nav .nav-link.active {
    color: var(--color-primary);
    font-weight: 700;
}

.sticky-top .navbar-nav .nav-item.active:hover {
    color: var(--color-primary);
    border-bottom: none;
}

.sticky-top .nav-item.dropdown:hover{
    cursor: context-menu;
}

.sticky-top .dropdown .dropdown-menu{
    font-size: inherit;
    border-left: 3px solid #820263;
    border-top: 3px solid #820263;
    display: hidden;
    border-radius: 0px;
    transition: border-top 0.2s ease-in-out;
}

.sticky-top .dropdown:hover .dropdown-menu{
    font-size: inherit;
    border-left: 3px solid #820263;
    border-top: 3px solid #820263;
    display: block;
    border-radius: 0px;
    transition: border-top 0.2s ease-in-out;
}

.sticky-top .dropdown-menu .dropdown-item:hover{
    color: var(--color-primary);
}

/* Telugu Christian World */
.sticky-top .dropdown #tcw{
    width: 500px;
    padding: 10px;
}

.sticky-top .dropdown:hover #tcw{
    width: 500px;
    padding: 10px;
}

.sticky-top .dropdown-menu#tcw .dropdown-item:hover{
    background-color: var(--color-primary);
    color: var(--color-light);
}

#tcw .sub-menu a{
    display: block;
    padding-left: 20px;
    line-height: 30px;
    font-weight: initial;
    color: initial;
    text-decoration: none;
    transition: padding-left 0.2s ease-in;
}

#tcw .sub-menu a:hover{
    background-color: var(--color-primary);
    color: var(--color-light);
    padding-left: 25px;
}

.tcw-heading{
    color: var(--default-text-color)
}
/* End Telugu Christian World */

.sticky-top .dropdown-menu:hover{    
    border-top: 3px solid #820263;
}

.sticky-top .bi{
    font-size: 0.8rem;
}

/* Sticky Class Set by jquery*/
.sticky{
    background-color: var(--color-light);
    width: 100%;
	position:fixed;
	z-index:999;
	top:0;
	left:0;
	bottom:initial;
	-webkit-transition:all 0.4s ease;
	-moz-transition:all 0.4s ease;
	transition:all 0.4s ease;
	animation: fadeInDown 0.5s both 0.1s;
	box-shadow:0px 0px 13px #00000054;
}

/* Overide sticky width atribute on fixed-top navbar */
.fixed-top.sticky{
    width: auto;
}

/* Fade-in down animation */
@keyframes fadeInDown {
    0% {
        opacity: 0;
        transform: translateY(-50px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}
/* end sticky-top navbar */







/* Community Mega Menu Styles - Matching Telugu Christian World design */
.community-mega-menu {
    width: 600px;
    padding: 15px;
    border-left: 3px solid var(--color-primary);
    border-top: 3px solid var(--color-primary);
    border-radius: 0px;
    font-size: inherit;
}

.community-column {
    padding: 0 12px;
    border-right: 1px solid rgba(var(--color-primary-rgb), 0.1);
}

.community-column:last-child {
    border-right: none;
}

.community-heading {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--color-secondary);
    margin-bottom: 8px; /* Reduced from 12px */
    padding-bottom: 6px; /* Reduced from 8px */
    border-bottom: 2px solid var(--color-primary);
}

.community-item {
    margin: 3px 0; /* Reduced from 6px */
}

.community-mega-menu .dropdown-item {
    padding: 6px 12px; /* Reduced from 8px 12px */
    margin: 1px 0; /* Reduced from 2px 0 */
    border-radius: 4px;
    transition: all 0.3s ease;
    font-size: 0.9rem; /* Reduced from 0.95rem to be a bit smaller */
    color: #000000;
    font-weight: 400;
    line-height: 26px; /* Reduced from 30px */
}

.community-mega-menu .dropdown-item:hover {
    background-color: var(--color-primary);
    color: #ffffff !important; /* Force white text on hover */
    padding-left: 15px;
}

/* Mobile dropdown headers */
.dropdown-header {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--color-secondary);
    padding: 8px 16px;
    margin-top: 5px;
    background-color: #f8f9fa;
}

/* Ensure proper dropdown positioning */
.navbar-nav .dropdown-menu {
    margin-top: 0;
}

/* Responsive adjustments */
@media (max-width: 991px) {
    .community-mega-menu {
        width: 100%;
    }
    
    .dropdown-menu {
        border: 1px solid rgba(0,0,0,.15);
    }
}

/* Hover effects for main nav item */
.sticky-top .nav-item.dropdown:hover .community-mega-menu {
    display: block;
}

/* Match the exact TCW styling for consistency */
.community-mega-menu .dropdown-item {
    display: block;
    padding-left: 12px;
    line-height: 26px; /* Reduced from 30px */
    font-weight: initial;
    color: initial;
    text-decoration: none;
    transition: padding-left 0.2s ease-in;
}

.community-mega-menu .dropdown-item:hover {
    background-color: var(--color-primary);
    color: #ffffff !important;
    padding-left: 15px;
}









/*====================================
	End Navigation Offcanvas Sidebar
======================================*/


/* Login & Registration Page */
#login-page, #registration-page {
    margin-top: 50px;
}


#login-page .card, #login-page .error{
    width: 335px!important;
}


/* Hero Section */
/* Carousel height customization */


.home-carousel {
    position: relative;
    height: 100vh;
}

.carousel::before, .home-carousel::before {
    position: absolute;
    content: "";
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: #000000;
    opacity: 0.4;
}

.home-carousel img {
    object-fit: cover;
    height: 100%;
    width: 100%;
}


/* Custom carousel caption positioning */
.carousel-caption {
    left: 8%;
    top: 45%;
    transform: translateY(-55%);
    text-align: left;
    width: auto;
    max-width: 100%;
}

.carousel-caption .col-lg-7 .text h1{
    margin-bottom: 30px;
}

.carousel-caption .col-lg-7 .text p{
    margin-bottom: 30px;
}

/* Animation */
.carousel-caption .col-lg-7 .text h1{
    animation: fadeInUp 0.5s ease-in-out 0.5s;
}

.carousel-caption .col-lg-7 .text p{
    animation: fadeInUp 1s ease-in-out 0.5s;
}

.carousel-caption .col-lg-7 .text .button{
    animation: fadeInDown 1.5s ease-in-out 0.5s;
}

@keyframes fadeInUp{0%{opacity:0;transform:translate3d(0,100%,0)}to{opacity:1;transform:none}}.fadeInUp{animation-name:fadeInUp}

@keyframes fadeInDown{0%{opacity:0;transform:translate3d(0,-100%,0)}to{opacity:1;transform:none}}.fadeInDown{animation-name:fadeInDown}
/* End Animation */

/* Remove default opacity */
.carousel-control-prev,
.carousel-control-next {
    opacity: 1; 
    background-color: transparent;
}

/* Customizing the prev/next controls */
.carousel-control-prev, .carousel-control-next {
    background-color: var(--color-primary);
    border-radius: 50%;
    margin: 0px 10px;
    width: 50px;
    height: 50px;
    top: 55%;
    transform: translateY(-45%);
}

/* Custom icons with circular background */
.carousel-control-prev-icon, .carousel-control-next-icon {
    display: none; /* Hide default icons */
}

.carousel-control-prev .custom-icon, .carousel-control-next .custom-icon {
    background-color: var(--color-primary);
    border-radius: 50%;
    padding: 12px 10px;
    color: white;
    width: 50px;
    height: 50px;
    font-size: 24px;
}

.carousel-control-prev .custom-icon:hover, .carousel-control-next .custom-icon:hover {
    background-color: var(--color-secondary);
    color: var(--color-light);
}

.carousel-caption .text h1{
    font-weight: 700;
}

.carousel-caption .text span{
    color: var(--color-primary);
}
/* End Hero Section */

/*=============================
	Start Schedule CSS
===============================*/
.schedule {
	background: #fff;
	margin: 0;
	padding: 0;
	height: 230px;
}
.schedule .schedule-inner {
	position: relative;
	transform: translateY(-50%);
	z-index:9;
}
.schedule .single-schedule {
	position: relative;
	text-align: left;
	z-index:3;
	border-radius:5px;
	background:#820263;
	 -webkit-transition: all .3s ease-out 0s;
    -moz-transition: all .3s ease-out 0s;
    -ms-transition: all .3s ease-out 0s;
    -o-transition: all .3s ease-out 0s;
    transition: all .3s ease-out 0s;
}
.schedule .single-schedule .inner {
	overflow:hidden;
	position: relative;
	padding:30px;
	z-index:2;
}
.schedule .single-schedule:before{
	position: absolute;
    z-index: -1;
    content: '';
    bottom: -10px;
    left: 0;
    right: 0;
    margin: 0 auto;
    width: 80%;
    height: 90%;
    background:#820263;
    opacity: 0;
    filter: blur(10px);
    -webkit-transition: all .3s ease-out 0s;
    -moz-transition: all .3s ease-out 0s;
    -ms-transition: all .3s ease-out 0s;
    -o-transition: all .3s ease-out 0s;
    transition: all .3s ease-out 0s;
}
.schedule .single-schedule:hover:before{
	opacity: 0.8;
}
.schedule .single-schedule:hover{
	transform: translateY(-5px);
}
.schedule .single-schedule .icon i{
	position: absolute;
	font-size: 110px;
	color: #fff;
	 -webkit-transition: all .3s ease-out 0s;
    -moz-transition: all .3s ease-out 0s;
    -ms-transition: all .3s ease-out 0s;
    -o-transition: all .3s ease-out 0s;
    transition: all .3s ease-out 0s;
	z-index:-1;
	visibility:visible;
	opacity:0.2;
	right: -25px;
	bottom: -30px;
}
.schedule .single-schedule span{
	display:block;
	color:#fff;
}
.schedule .single-schedule h4{
	font-size: 20px;
	font-weight:600;
	display:inline-block;
	text-transform:capitalize;
	color:#fff;
	margin-top:13px;
}
.schedule .single-schedule p{
	color:#fff;
	margin-top:22px;
}
.schedule .single-schedule a {
	color: #fff;
	margin-top: 25px;
	font-weight: 500;
	display: inline-block;
	position: relative;
}
.schedule .single-schedule a:before{
	position:absolute;
	content:"";
	left:0;
	bottom:0;
	height:1px;
	width:0%;
	background:#fff;
	-webkit-transition:all 0.4s ease;
	-moz-transition:all 0.4s ease;
	transition:all 0.4s ease;
}
.schedule .single-schedule a:hover:before{
	width:100%;
	width:100%;
}
.schedule .single-schedule a i{
	margin-left:10px;
}
/*=============================
	End Schedule CSS
===============================*/

/*=============================
	Start features CSS
===============================*/
.features{
	padding-top:0;
}
.features .single-features{
	text-align:center;
	position:relative;
	padding:10px 20px;
}
.features .single-features::before {
	position: absolute;
	content: "";
	right: -72px;
	top: 60px;
	width: 118px;
	border-bottom: 3px dotted #820263;
}
.features .single-features.last::before{
	display:none;
}
.features .single-features .single-icon{
	position:relative;
}
.features .single-features .single-icon i{
	font-size:50px;
	color:#820263;
	position:absolute;
	left:50%;
	margin-left:-50px;
	top:0;
	height:100px;
	width:100px;
	line-height:100px;
	text-align:center;
	border:1px solid #dddddd;
	border-radius:100%;
	-webkit-transition:all 0.4s ease;
	-moz-transition:all 0.4s ease;
	transition:all 0.4s ease;
}
.features .single-features:hover .single-icon i{
	background:#820263;
	color:#fff;
	border-color:transparent;
}
.features .single-features h3{
	padding-top: 128px;
	color:#2C2D3F;
	font-weight:600;
	font-size:21px;
}
.features .single-features p {
	margin-top: 20px;
}
/*=============================
	End features CSS
===============================*/

/*=======================
	Start Count Section CSS
=========================*/
.count-section{
	position:relative;
	padding-bottom: 0px;
}
.count-section.section{
	padding:80px 0;
}

.count-section.section.overlay::before{
    position: absolute;
    content: "";
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background: var(--color-primary);
    opacity:0.9;
}
.count-section{
	background:url('../img/img_bg.jpg');
	background-size:cover;
	background-repeat:no-repeat;
}
.count-section .single-count {
	position: relative;
}
.count-section .single-count i {
	position: absolute;
	left: 0;
	font-size: 62px;
	color: #fff;
	height: 70px;
	width: 70px;
	line-height: 67px;
	font-size: 28px;
	text-align: center;
	padding: 0;
	margin: 0;
	border: 2px solid #fff;
	border-radius: 0px;
	top: 50%;
	margin-top: -35px;
	-webkit-transition: all 0.4s ease;
	-moz-transition: all 0.4s ease;
	transition: all 0.4s ease;
	border-radius: 50%;
}
.count-section .single-count:hover i{
	color:#820263;
	background:#fff;
	border-color:transparent;
}
.count-section .single-count .content {
	padding-left: 80px;
}
.count-section .single-count span {
	color: #fff;
	font-weight: 600;
	font-size: 30px;
	position: relative;
	display: block;
	-webkit-transition: all 0.4s ease;
	-moz-transition: all 0.4s ease;
	transition: all 0.4s eas;
	display: block;
}
.count-section .single-count p{
	color:#fff;
	font-size:15px;
	margin-bottom: 0px;
}
/*===================
	End Count Section
=====================*/

/*===================
	Why choose CSS
=====================*/
.why-choose.section{
    padding: 100px 0;
}
.why-choose .hr{
    width: 50px;
    border-bottom: 3px solid var(--color-primary);
    padding-bottom: 10px;
    margin-bottom: 30px;
}
.why-choose .choose-content .nav li {
	margin-bottom: 12px;
}
.why-choose .choose-content .nav li .bi{
	height:15px;
	width:15px;
	line-height:15px;
	text-align:center;
	background:#820263;
	color:#fff;
	font-size:14px;
	border-radius:100%;
	padding-left:2px;
	margin-right:16px;
}

/*=======================
	End Why choose CSS
=========================*/

/*=========================
	Srart service CSS
===========================*/
.services .single-service{
	margin:30px 0;
	position:relative;
	padding-left:70px;
}
.services .single-service i{
	font-size:45px;
	color:#820263;
	position:absolute;
	left:0;
	-webkit-transition:all 0.4s ease;
	-moz-transition:all 0.4s ease;
	transition:all 0.4s ease;
}

.services .single-service h4 a{
	color:#2C2D3F;
	font-size:20px;
	font-weight:600;
	text-decoration: none;
}
.services .single-service h4 a:hover{
	color:#820263;
}
/*=========================
	End service CSS
===========================*/

/*=============================
	Start Pricing Table CSS
===============================*/
.pricing-table{
	background:#f9f9f9;
	position:relative;
}
.pricing-table .single-table {
	background: #fff;
	border:1px solid #ddd;
	text-align: center;
	position: relative;
	overflow: hidden;
	margin: 15px 0;
	padding:45px 35px 30px 35px;
}
/* Table Head */
.pricing-table .single-table .table-head {
	text-align:center;
}
.pricing-table .single-table .icon i{
	font-size:65px;
	color:#820263;
}
.pricing-table .single-table .title {
	font-size: 21px;
	color: #2C2D3F;
	margin-top: 30px;
	margin-bottom: 15px;
}
.pricing-table .single-table .amount {
	font-size:36px;
	font-weight:600;
	color:#820263;
}
.pricing-table .single-table .amount span{
	display:inline-block;
	font-size:14px;
	font-weight:400;
	color:#868686;
	margin-left:8px;
}
/* Table List */
.pricing-table .single-table .table-list {
	padding: 10px 0;
	text-align: left;
	margin-top: 30px;
}
.pricing-table .table-list li {
	position: relative;
	color: #666;
	text-transform: capitalize;
	margin-bottom: 18px;
	padding-right: 32px;
}
.pricing-table .table-list li:last-child{
	margin-bottom:0px;
}

.pricing-table .table-list .bi {
	font-size: 15px;
	text-align: center;
	margin-right: 10px;
	position: absolute;
	right: 0;
	height: 20px;
	width: 20px;
	line-height: 16px;
	text-align: center;
	color: #fff;
	background: #820263;
	border-radius: 100%;
	padding-left: 1px;
	padding-top: 2px;
}
/*=============================
	End Pricing Table CSS
===============================*/

/*=======================
	Start Blog CSS
=========================*/
.blog .single-news {
	background: #fff;
	position: relative;
	-webkit-transition: all 0.4s ease;
	-moz-transition: all 0.4s ease;
	transition: all 0.4s ease;
	box-shadow: 0px 0px 10px #00000014;
}
.blog .single-news img{
	width:100%;
	margin:0;
	padding:0;
	-webkit-transition:all 0.4s ease;
	-moz-transition:all 0.4s ease;
	transition:all 0.4s ease;
}
.blog .single-news .news-head{
	position:relative;
	overflow:hidden;
}
.blog .single-news .news-content {
	text-align: left;
	background: #fff;
	z-index: 99;
	position: relative;
	padding: 30px;
	left: 0;
	z-index: 0;
}
.blog .single-news .news-content:before{
	position:absolute;
	content:"";
	left:0;
	bottom:0;
	height:2px;
	width:0%;
	background:#820263;
	opacity:0;
	visibility:hidden;
	-webkit-transition:all 0.4s ease;
	-moz-transition:all 0.4s ease;
	transition:all 0.4s ease;
}
.blog .single-news:hover .news-content:before{
	opacity:1;
	visibility:visible;
	width:100%;
}
.blog .single-news .news-body h2 {
	font-size: 18px;
	font-weight: 600;
	margin-bottom: 10px;
	line-height: 24px;
}
.blog .single-news .news-body h2 a{
	color:#2C2D3F;
	font-weight: 500;
	text-decoration: none;
}
.blog .single-news .news-body h2 a:hover{
	color:#820263;
}
.blog .single-news .news-content p {
	font-weight: 400;
	text-transform: capitalize;
	font-size: 13px;
	letter-spacing: 0px;
	line-height: 23px;
}
.blog .single-news .news-body .date {
	display: inline-block;
	font-size: 14px;
	margin-bottom: 5px;
	background: #820263;
	color: #fff;
	padding: 4px 15px;
	border-radius: 3px;
	font-size: 14px;
	margin-bottom: 10px;
}
/*===================
	End Blog CSS
=====================*/

/*==========================
	Start Appointment CSS
============================*/
.appointment .form input, .appointment .form select{
	width: 100%;
	height: 50px;
	border: 1px solid #eee;
	text-transform: capitalize;
	padding: 0px 18px;
	color: #555;
	font-size: 14px;
	font-weight:400;
	border-radius:0;
	border-radius: 4px;
}
.appointment .form textarea{
	width: 100%;
	height:200px;
    padding: 18px;
	border:1px solid #eee;
	text-transform:capitalize;
	resize:none;
	border-radius: 4px;
}

.appointment .button .btn{
	font-weight:500;
}
.appointment .button .btn:hover{
	color:#fff;
}
/*==========================
	End Appointment CSS
============================*/

/*==========================
		DataTable CSS
============================*/
/* .btn-group>.btn-secondary.dropdown-toggle-split {
	border-top-right-radius: 4px !important;
	border-bottom-right-radius: 4px !important;
}

.dataTables_filter {
	float: right;
}

.table-hover>tbody>tr:hover {
	background-color: #ccffff;
}

@media only screen and (min-width: 768px) {
	.table {
		table-layout: fixed;
		max-width: 100% !important;
	}
}

.table td:nth-child(2) {
	overflow: hidden;
	text-overflow: ellipsis;
} */

thead tr th {
	background: var(--color-primary);
	color: var(--color-light);
	white-space: nowrap;
}
/* I need to set for some columns */
tbody tr td:last-child {
	white-space: nowrap;
}

tbody tr td.text-wrap-1-5 {
	width: 100px;
}

@media only screen and (max-width: 767px) {

	/* Force table to not be like tables anymore */
	table,
	thead,
	tbody,
	th,
	td,
	tr {
		display: block;
	}

	/* Hide table headers (but not display: none;, for accessibility) */
	thead tr,
	tfoot tr {
		position: absolute;
		top: -9999px;
		left: -9999px;
	}

	td {
		/* Behave  like a "row" */
		border: none;
		border-bottom: 1px solid #eee;
		position: relative;
		padding-left: 50% !important;
	}

	td:before {
		/* Now like a table header */
		position: absolute;
		/* Top/left values mimic padding */
		top: 6px;
		left: 6px;
		width: 45%;
		padding-right: 10px;
		white-space: nowrap;
	}

	.table td:nth-child(1) {
		background: #ccc;
		height: 100%;
		top: 0;
		left: 0;
		font-weight: bold;
	}

	/*
Label the data
*/
	td:nth-of-type(1):before {
		content: "Media";
	}

	td:nth-of-type(2):before {
		content: "Type";
	}

	td:nth-of-type(3):before {
		content: "Title";
	}

	td:nth-of-type(4):before {
		content: "Category";
	}

	td:nth-of-type(5):before {
		content: "Singer";
	}

	td:nth-of-type(6):before {
		content: "Writer";
	}

	td:nth-of-type(7):before {
		content: "Composer";
	}

	td:nth-of-type(8):before {
		content: "Released";
	}

	td:nth-of-type(9):before {
		content: "Action";
	}

	.dataTables_length {
		display: none;
	}
}
/*==========================
	End DataTable CSS
============================*/

/* Footer Section */
.footer{
    position: relative;
    background-color: var(--color-primary);
    color: var(--color-light);
    font-size: 14px;
}

.footer::before{
    position: absolute;
    content: "";
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: #000000;
    opacity: 0.1;    
}

/* Footer top */
.footer .footer-top{
    position: relative;
    padding-top: 80px ;
}

.footer-top .single-footer h2{
    font-size: 20px;
    font-weight: 600;
}

.footer-top .single-footer .hr{
    width: 50px;
    border-bottom: 3px solid white;
    padding-bottom: 10px;
    margin-bottom: 30px;
}

.footer-top .single-footer p{
    padding-block: 8px;    
}

.footer-top .single-footer .social .nav-link{
    padding: 0px;
    padding-right: 20px;
}

.footer-top .single-footer .social .bi{
    font-size: 1rem;
    color: var(--color-light);
    border: 2px solid var(--color-light);
    padding: 0;
    padding-block: 6px;
    padding-inline: 10px;
    border-radius: 50%;
}

.footer-top .single-footer .social .bi:hover{
    color: var(--color-primary);
    border: 2px solid var(--color-light);
    background-color: var(--color-light);
}

.footer-top .single-footer .quick-link .nav-link{
    padding: 0px;
    padding-bottom: 15px;
    transition: padding-left 0.2s ease-in-out;
}

.footer-top .single-footer .quick-link .nav-link:hover{
    padding-left: 5px;
}

/* End footer top section */

/* Footer copyright */
.footer .copyright{
    position: relative;
	height: 60px;
    white-space: wrap;
    background-color: var(--color-primary);
    color: var(--color-light);
    padding-block: 18px ;
    padding-inline: 10px;
}

.footer .copyright .copyright-content a{
    white-space: nowrap;
}
/* End Footer copyright */
/* End Footer Section */

/* Scroll To Top */
.scroll-to-top{
	position: fixed;
	bottom: 20px;
	right: 20px;
	background-color: var(--color-secondary);
	color: var(--color-light);
	padding: 10px 15px;
	border-radius: 50%;
	box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    animation: fadeInUp 0.4s ease-in-out;
	z-index: 999;
}

.scroll-to-top:hover{
	background-color: var(--color-primary);
}

/* End Scroll To Top */


/* for medium screens view */
@media (max-width: 991px){
	
	/* sticky-top navbar */
	.sticky-top .navbar-nav .nav-item:last-child{
		margin-bottom: 20px;
	}

	.sticky-top .navbar-nav .nav-link:hover::after {
		transform: scaleX(0);
	}

	.sticky-top .dropdown .dropdown-menu{
		font-size: inherit;
		border-left: none;
		border-top: none;
		border-radius: 0px;
		padding: 0px;
	}

	.sticky-top .dropdown:hover .dropdown-menu{
		font-size: inherit;
		border-left: none;
		border-top: none;
		border-radius: 0px;
		padding: 0px;
	}
	
	/* Sticky Class Set by jquery*/
	.sticky{
		background-color: var(--color-light);
		width: 100%;
		position:relative;
		z-index:999;
		top:0;
		left:0;
		bottom:initial;
		-webkit-transition:all 0.4s ease;
		-moz-transition:all 0.4s ease;
		transition:all 0.4s ease;
		animation: none;
		box-shadow:0px 0px 13px #00000054;
	}
	/* end sticky-top navbar */

	/*=============================
	Start features CSS
	===============================*/
	.features .single-features::before{
		display:none;
	}
	/*=============================
		End features CSS
	===============================*/

		/* Start Count Section CSS */
	.count-section.section{
		padding:80px 0px 30px 0px;
	}

	.count-section .single-count {
		position: relative;
		margin-bottom: 50px;
	}
		/* End Count Section */
}

/* for small screens view */
@media (max-width: 767px){
    .fixed-top{
        margin-left: 0px;
        color: #333;
        height: 60px!important;
        background-color: var(--color-light);
    }
    .sidebar{
        width: 0px;
        top: 60px;
		height: calc(100vh - 60px);
    }
    .sidebar .nav-link{
        justify-content: center;
    }
    .sub-menu .nav-link{
        padding: 0;
    }
    .sidebar .description{
        display: none;
    }
    .main-content{
        margin-left: 0px;
    }

    /* Carousel height customization */
    .carousel, .home-carousel {
        position: relative;
        height: 400px;
    }    

    /* Custom carousel caption positioning */
    .carousel-caption {
        display: block!important;
        left: 50%;
        top: 50%;
        transform: translate(-45%, -50%);
        text-align: left;
        width: 100%;
        max-width: 100%;
    }

    /* Customizing the prev/next controls */
    .carousel-control-prev, .carousel-control-next {
        display: none;
    }

	/* End Carousel */

	
	/* Start Count Section CSS */
	.count-section.section{
		padding:80px 0px 30px 0px;
	}

	.count-section .single-count {
		position: relative;
		margin-bottom: 50px;
		margin-left: 50px;
		margin-right:60px;
	}

	/* End Count Section */

	/*===================
		Why choose CSS
	=====================*/

	.why-choose .choose-content {		
		margin-left: 70px;
		margin-right:30px;
	}

	.why-choose .choose-content h3 {
		text-align: center;		
		margin-left: -80px;
		margin-right: -30px;;
	}

	.why-choose .choose-content .hr {		
		margin-left: 70px;
		margin-right: auto;;
	}

	/*=======================
		End Why choose CSS
	=========================*/
}



/* COMMON STYLES FOR USER PAGES*/

.button-flex{
	display:flex;
	flex:1;
	justify-content:flex-end;
	align-items:center;
	margin:10px auto;
}

.button-flex a{
	color:#fff;
	text-decoration:none; 
	margin:5px;
}
.button-flex a:hover{
	color:#fff;
}

/*

.search-bar {
    position: relative;
    margin-left: 70%;
    width: 300px;
    padding: 0.5rem;
}

.search-bar input {
    width: 80%;
    padding: 0.5rem;
    box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.2);
    transition: 0.4s ease-in-out;
}

.search-bar input:focus{
  width: 400px;
}
*/
.icon-title-container {
    display: flex;
    align-items: center;
}

.icon-title-container i {
    color: #750259;
    font-size: 80px;
    margin-left: 30px;
}

.icon-title-container strong {
    color: #750259;
    font-weight: bold;
    font-size: 45px;
	line-height:1.5;
}

.active-tab {
    border-bottom: 2px solid rgb(32, 34, 75);
}

/*.btn {
    background-color: #750259;
    color: #fff;
    font-size: 14px;
    font-weight: 400;
    text-align: center;
    text-transform: capitalize;
    text-decoration: none;
}
.btn:hover {
    background-color: #000;
    color: #fff;
}*/


.search-container {
    max-width: 400px;
    margin-left: auto;
    margin-right: 0;
}

.search-input {
    border-left: 0 !important;
}

.search-input:focus {
    box-shadow: none;
    border-color: #ced4da;
}

.input-group-text {
    background-color: transparent;
    border-right: 0;
}

.search-clear {
    border-left: 0;
}

.search-clear:hover {
    background-color: transparent;
}

@media (max-width: 768px) {
    .search-container {
        max-width: 100%;
    }
}

/* COMMON STYLES FOR USER PAGES END*/




/*=======================
 Users - Video And Audio Songs Page
=======================*/
        .audio-card {
            border: none;
            background: none;
            transition: transform 0.6s, box-shadow 0.6s;
        }

        .audio-card img {
            width: 100%;
            height:200px;
            border-radius: 5px;
			object-fit: cover;
        }
		
	
        .audio-title {
            font-weight: bold;
        }

        .audio-card:hover {
            transform: scale(1.05);
            box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
        }

        .audio-info {
            flex-grow: 1;
        }

        .audio-title {
            margin: 0;
            font-size:1.2rem;
			color:#000;
			padding:0px 10px;
			padding-top:10px;
        }
		.uploader {
            margin: 0;
            font-size: 14px;
			color:#000;
			text-align:left;
			padding:5px 10px;
			
        }

        .play-button-container {
            display: flex;
            align-items: center;
            justify-content: flex-start;
            margin-top: 10px;
        }

        .play-button {
            font-size: 30px;
            color: #000000;
            margin-right: 10px;
        }

        .play-button:hover {
            color: #0056b3;
        }

        
		.audio-player{
		display:flex;
		flex:1;
		justify-content:center;
		align-items:center;
		padding:15px 20px;
		
		}
		
		.watch-video-btn {
			background-color:#750259;
			color:#fff;
			text-align:center;
			text-decoration:none;
			padding:5px 8px;
			border-radius:5px;
			font-size:12px;
		}
		.watch-video-btn:hover{
			background-color:#000;
			color:#fff;
		}
		
/*=======================
  Video And Audio songs page end
=======================*/


	/*=======================
      SHORT FILMS AND MOVIES
	=========================*/
	
	.movie-card{
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.2);
    transition: all 0.3s linear;
    overflow: hidden;
	padding:10px;
}

.movie-card img{
	display:block;
	margin:auto;
    width: 100%;
    height:200px;
    border-radius: 5px;
	object-fit: cover;
}

.movie-card h4{
    font-size: 20px;
    font-weight: 700;
    margin: 5px auto;
    color: #000;
    text-align: center;
    text-transform: uppercase;
	padding:5px 10px;

}

.movie-card p{
    font-size: 12px;
    font-weight: 500;
    text-align: left;
    text-transform: capitalize;
}

.movie-card .btn{
    color: #fff;
    font-weight: 400;
    text-align: center;
    text-transform: capitalize;
    text-decoration: none;
	border-radius:5px;
	font-size:14px;
}
.movie-card a{
	text-decoration:none;
}


.movie-card:hover{
    box-shadow: 10px 10px 30px rgba(0, 0, 0, 0.3);
}

.movie-card:hover .movie-card-content{
    transform: translateY(0);
}

	/*===========================
      SHORT FILMS AND MOVIES END
	=============================*/
	
	/*===========================
      MESSAGES- BOOKS AND SPEAKERS
	=============================*/
	.messages-card{
	min-height:350px;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.2);
    transition: all 0.3s linear;
    overflow: hidden;
	padding:15px 10px;
}

.messages-card img{
	display:block;
	margin:auto;
    height:200px;
    width: 100%;
    border-radius: 5px;
	object-fit: cover;
}

.messages-card h4{
    font-size: 16px;
    font-weight: 700;
    margin: 5px auto;
    color: #000;
    text-align: left;
    text-transform: uppercase;
    padding-top:10px;
}


.messages-card p{
    font-size: 12px;
    font-weight: 500;
    text-align: left;
    text-transform: capitalize;
	color:#444;
}

.messages-card .btn{
    color: #fff;
    font-size: 14px;
    font-weight: 400;
    text-align: center;
    text-transform: capitalize;
    text-decoration: none;
	margin : auto ;
	border-radius:5px;
}
.messages-card a{
	text-decoration:none;
}


.messages-card:hover{
    box-shadow: 10px 10px 30px rgba(0, 0, 0, 0.3);
}

.messages-card:hover .movie-card-content{
    transform: translateY(0);
}

	/*==================================
      MESSAGES- BOOKS AND SPEAKERS END
	====================================*/
	
	/*========
       NEWS 
	=========*/
    .news-card {
      border: none;
      color: white;
      position: relative;
      transition: transform 0.6s, box-shadow 0.6s;
      overflow: hidden;
    }

    .news-card:hover {
      transform: scale(1.05);
      box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
    }

    .news-card img {
      width: 100%;
      height: 250px;
      object-fit: cover;
      filter: brightness(60%);
    }

    .news-card-body {
      position: absolute;
      bottom: 15px;
      left: 20px;
      color: white;
    }

    .news-card-date {
      font-size: 1rem;
    }

    .news-card-time {
      font-size: 0.875rem;
    }
	/*========
      NEWS END
	=========*/
	
	/*===============
     LIVE TV SCHEDULE
	=================*/
/* Live TV Schedule Table Styles */
.live-table {
  border-collapse: collapse;
  margin: 10px auto;
  width: 100%; /* Ensure it spans the full width */
  table-layout: fixed; /* Fix column widths, no resizing */
}

.live-table td, .live-table th {
  border: 1px solid #ddd;
  padding: 8px;
  word-wrap: break-word; /* Wrap text inside cells */
  word-break: break-word; /* Prevent overflow by breaking long words */
}

.live-table tr:nth-child(even) {
  background-color: #f2f2f2;
}

.live-table tr:hover {
  background-color: #ddd;
}

.live-table th {
  padding-top: 12px;
  padding-bottom: 12px;
  text-align: center;
  background: #750259;
  color: white;
  text-overflow: ellipsis; /* Truncate long text with ellipsis */
  overflow: hidden; /* Hide overflow text */
}

.live-table a {
  text-decoration: none;
  color: #061161;
}

.live-table-header {
  background-color: #750259;
  color: white;
}

.live-table td, .live-table th {
  vertical-align: middle;
}

.live-table td {
  color: #000;
}

.live-date-picker {
  max-width: 300px;
  margin: 0 auto 20px;
}

.live-time-column {
  width: 30%; /* Fixed width for time column */
}

.live-show-column {
  width: 70%; /* Fixed width for show column */
}

/* Container for table responsiveness */
.live-table-container {
  overflow-x: auto; /* Enable horizontal scrolling if needed */
  -webkit-overflow-scrolling: touch; /* Smooth scrolling on mobile */
  margin-bottom: 20px;
}

/* Media Queries for Small Screens */
@media (max-width: 768px) {
  .live-table th, .live-table td {
    font-size: 12px; /* Reduce font size on smaller screens */
  }

  .live-table th {
    padding: 8px; /* Reduce padding for smaller screens */
  }

  .live-time-column, .live-show-column {
    width: auto; /* Allow columns to adjust based on screen size */
  }
}

@media (max-width: 480px) {
  .live-table th, .live-table td {
    font-size: 10px; /* Even smaller font size for very small screens */
  }

  .live-table th {
    padding: 6px; /* Further reduce padding */
  }
}

    /*====================
    LIVE TV SCHEDULE ENDS
	======================*/
	
	/*===================
       ALL DETAILS PAGES 
	======================*/
	.cover-page img{
      max-height:500px;
	  max-width:100%;
	  padding:15px;
	  border-radius:20px;
	}
	
	.details-container{
	  padding:10px;
	  text-align:left; 
	  text-transform:capitalize;
	  color:#000;
	  line-height:1.8;
    }
	.details-container h2{
		text-transform:uppercase;
		color:#750259;
		font-weight:bold;
	}
	.details-container p{
		font-size:16px;
	}
	.details-container b{
		font-size:18px;
	}
	.details-container a{
		text-decoration:none; 
		color:#fff;
	}
	.details-container button{
		background-color:#750259;
		color:#fff;
	}
	.details-container button:hover{
		background-color:#000;
	}
	
    /*====================
       DETAILS PAGES ENDS
	======================*/
	
	/*====================
          ABOUT US 
	======================*/
	
	
	        .about-hero {
            background: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url('../img/about_us_background.jpg');
            background-size: cover;
            background-position: center;
            color: white;
            padding: 100px 0;
        }
		
		.about-first{
			text-align:center;
		}
		
		.about-first p{
			font-size:15px;
		}
    
        .service-item {
            align-items: center;
            display: flex;
            padding-left: 1rem;
            margin-bottom: 1rem;
        }

        .service-item i {
            margin-right: 8px; 
            color: #750259;
        }

        .service-item p {
            margin: 0;
            font-size: 18px; 
        }
        .segments-container {
            max-width: 100%;
            margin: 0 auto;
        }
		
		.segments-container h1{
			color:#000;
		}
        .segment-item {
            text-align: center;
        }
        .segment-title {
            color: #333;
            font-size: 1.5rem;
            margin-top: 1rem;
        }
        .segment-icon {
            font-size: 3rem;
            color: #750259;
            margin-bottom: 1rem;
        }

        .offer-item {
            padding: 20px;
            border-radius: 15px;
            background-color: #f3e5f5; /* Light purple background */
            margin-bottom: 20px;
            display: flex;
            align-items: center;
            transition: background-color 0.3s;
        }
        .offer-item:hover {
            background-color: #e1bee7; /* Darker shade of purple */
        }
		
		.offer-content{
			color:#000;
		}
		
        .about-icon {
            font-size: 2.5rem;
            color: #6a1b9a; /* Deep purple */
            margin-right: 15px;
        }
        .offer-heading {
            font-size: 38px;
            text-align: center;
            margin-bottom: 30px;
            color: #000;
        }

        .closing-line {
            font-weight: bold;
            text-transform: uppercase;
            background: linear-gradient(90deg, #750259, #750259);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
            padding: 10px;
            display: inline-block;
            font-size: 32px;
        }

        .about-foot {
            display: block;
            margin: 10px auto;
            max-width: 80%;
            margin-bottom: 30px;
        }
		
		
		@media (max-width:660px){
		
		 .about-hero {
			 padding:30px 0 ;
		 }
        .about-first h1{
			text-align:center;
			font-size:30px;
		}
		.about-first p{
			text-align:left;
			font-size:80%;
		}
		
		.segment-title {
            color: #333;
            font-size:0.8rem;
            margin-top: 0.8rem;
        }
		.segment-icon {
            font-size: 2rem;
            color: #750259;
            margin-bottom: 0.8rem;
        }
		
		.offer-heading {
            font-size:28px;
            margin-bottom:40px;
        }
		
		.offer-item {
			flex-direction:column;
			justify-content:center;
			align-items:center;
			padding:10px;
			margin-bottom:10px;
		}
		
		.about-icon {
            font-size: 1 rem;
            color: #6a1b9a; /* Deep purple */
            margin: 20px auto;
        }
		
		.offer-content {
			font-size:85%;
			margin:0px auto;
			text-align:center;
		}
		
		.closing-line{
			font-size:20px;
			text-align:left;
		}
		.about-foot {
            max-width: 100%;
        }

		
		}
		
	/*====================
        ABOUT US ENDS
	======================*/
	
	
	/*====================
          SERVICES
	======================*/
	
       .service-header h2{
            font-size: 45px;
			color:#000;
        }
		
		.timeline-heading h4{
			color:#750259;
		}

        .timeline {
            position: relative;
            padding: 0;
            list-style: none;
        }
		
    
        .timeline:before {
            content: "";
            position: absolute;
            top: 0;
            bottom: 0;
            left: 50%;
            width: 2px;
            margin-left: -1px;
            background-color: #e9ecef;
        }
        .timeline > li {
            position: relative;
            margin-bottom: 50px;
        }
        .timeline > li:before,
        .timeline > li:after {
            content: " ";
            display: table;
        }
        .timeline > li:after {
            clear: both;
        }
        .timeline > li > .timeline-panel {
            float: left;
            position: relative;
            width: 46%;
            padding: 20px;
            border: 1px solid #e9ecef;
            border-radius: 8px;
            box-shadow: 0 1px 6px rgba(0, 0, 0, 0.05);
            background-color: #fff;
        }
        .timeline > li > .timeline-panel:before {
            content: " ";
            display: inline-block;
            position: absolute;
            top: 26px;
            right: -15px;
            border-top: 15px solid transparent;
            border-right: 0 solid #e9ecef;
            border-bottom: 15px solid transparent;
            border-left: 15px solid #e9ecef;
        }
        .timeline > li > .timeline-panel:after {
            content: " ";
            display: inline-block;
            position: absolute;
            top: 27px;
            right: -14px;
            border-top: 14px solid transparent;
            border-right: 0 solid #fff;
            border-bottom: 14px solid transparent;
            border-left: 14px solid #fff;
        }
        .timeline > li > .timeline-badge {
            z-index: 100;
            position: absolute;
            top: 16px;
            left: 50%;
            width: 50px;
            height: 50px;
            margin-left: -25px;
            border-radius: 50%;
            text-align: center;
            font-size: 1.4em;
            line-height: 50px;
            color: #fff;
            background-color: #750259;
        }
        .timeline > li.timeline-inverted > .timeline-panel {
            float: right;
        }
        .timeline > li.timeline-inverted > .timeline-panel:before {
            right: auto;
            left: -15px;
            border-right-width: 15px;
            border-left-width: 0;
        }
        .timeline > li.timeline-inverted > .timeline-panel:after {
            right: auto;
            left: -14px;
            border-right-width: 14px;
            border-left-width: 0;
        }
        @media (max-width: 767px) {
            .timeline-panel {
                width: 100%;
            } 
            .timeline:before {
                display: none;
                border: 0px;
                left: 0px;
            }
            .timeline > li > .timeline-panel {
                width: 100%;
            }
            .timeline > li > .timeline-badge {
                left: 0px;
                margin-left: 0;
            }
            .timeline > li > .timeline-panel {
                float: right;
            }
            .timeline > li > .timeline-panel:before {
                right: auto;
                left: -15px;
                border-right-width: 15px;
                border-left-width: 0;
            }
            .timeline > li > .timeline-panel:after {
                right: auto;
                left: -14px;
                border-right-width: 14px;
                border-left-width: 0;
            }
            .timeline > li.timeline-inverted > .timeline-panel:after {
                border-right-width: 0px;
            }
        }
        .accordion-item {
            border-bottom: 1px solid #ddd;
            border: none;
        }
        .accordion-button {
            color: #333;
            font-size: 18px;
            background-color: #fff;
        }
        .accordion-button:not(.collapsed) {
            background-color: #f1f1f1;
        }
        .accordion-button:focus {
            box-shadow: none;
        }
        .accordion-body {
            font-size: 1em;
            line-height: 1.6;
            color: #000;
        }
        @media screen and (max-width: 600px) {
            .accordion-button {
                font-size: 14px;
            }
            .service-header h2{
                font-size: 35px;
            }
            .timeline-title {
                font-size: 18px;
            }
            .accordion-item p {
                font-size: 12px;
            }
            .accordion-body {
                font-size: 12px;
            }
            .timeline-badge {
                display: none;
                border: 0px;
                width: 100%;
            }

        }
		
	/*====================
         SERVICES END 
	======================*/
	
	
	/*====================
         USER - PRODUCTS  
	======================*/
	.product-card {
      border: 1px solid #ccc;
      border-radius: 8px;
      text-align: left;
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
      padding: 15px;
      margin: 0;
      transition: transform 0.3s ease, box-shadow 0.3s ease;
    }

    .product-card img {
      object-fit: cover;
      max-width: 100%;
      height: 200px;
      border-radius: 4px;
	  display:block;
	  margin:0 auto;
    }

    .product-card p {
      font-weight: 700;
      font-size: 14px;
      margin: 10px 0 2px;
	  color:#000;
    }

    .product-card .price {
      font-size: 16px;
      font-weight: 450;
      color: #000;
    }

    .product-card .original-price {
      color: #666;
      text-decoration: line-through;
      margin-left: 5px;
    }

    .product-card:hover {
      transform: scale(1.05);
      box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2);
      cursor: pointer;
    }

    .product-link, .product-link:hover {
      text-decoration: none;
      color: inherit;
    }

    .btn-add {
      color: #000;
      border: 2px solid #750259;
      margin-top: 10px;
      display: none;
    }

    .btn-add:hover {
      color: #000;
      border: 2px solid #000;
    }

    .product-container {
      padding: 0 30px; 
      margin: 15px auto;
    }

    @media screen and (max-width:600px) {
      .product-card{
        margin: 0;

      }
      .icon-title-container i {
        font-size: 42px;
        margin-left: 10px;
      }
      .icon-title-container strong {
        font-size: 32px;
      }
      .btn-add {
        display: block;
        font-size: 12px;
      }
      .product-card p, .product-card .price, 
      .product-card .original-price {
        font-size: 12px;
      }
    }
	/*====================
      USER - PRODUCTS END  
	======================*/
	
	
	
	/*====================
    USER - PRODUCT DETAILS
	======================*/

    .product-button-group {
      display: flex;
      flex:1;
      justify-content: center;
      align-items: center;
      gap: 10px;
      margin: 10px auto;
    }

    .product-button-group a {
      width:50%;
    }

    .btn-product {
      background-color: #750259;
      color: #fff;
      text-align: center;
      text-decoration: none;
      border: none;
      border-radius: 0;
      width:100%;
      padding:15px;
    }

    .btn-product:hover {
      background-color: #000;
      color: #fff;
    }

    .product-title {
      font-size: 28px;
      font-weight: 700;
      color: #333;
    }

    .product-description p {
      font-size: 16px;
      line-height: 1.5;
      color: #101010;
    }

    .discount-rate {
      color: #000;
      font-weight: 600;
      font-size: 1.1em;
    }

    .rate {
      text-decoration: line-through;
      color: #666;
      margin-left: 8px;
    }
	.product-carousel img {
		max-width:100%;
		height:380px;
	}
	
	.product-carousel{
		background:#fff;
	}


    @media screen and (max-width:600px) {
      .product-description p{
        font-size: 14px;
      }
      .product-button-group {
        position: fixed;
        bottom: 0;
        width: 100%;
        background-color: #750259;
        color: white;
        text-align: center;
        left: 0;
      }
      .btn-product:hover {
        background-color: #750259;
        color: #fff;
      }
      .carousel-inner img {
        max-width: 100%;
        height: 270px;
      }
    }
	
	
	
	/*==========================
     USER - PRODUCT DETAILS END  
	============================*/
	
	/*==========================
         USER - VIEW CART   
	============================*/
  #cart-table {
  border-collapse: collapse;
  margin:5px auto;
  text-align:center;
  padding:5px 30px;
  width:100%;
}

 #cart-table td, th {
  border: 0px;
  padding: 10px 15px;
  font-size:15px;
  color:#000;
}

 #cart-table tr:nth-child(even){background-color: #f2f2f2;}

 #cart-table tr:hover {background-color: #ddd;}

 #cart-table th {
  padding-top: 12px;
  padding-bottom: 12px;
  text-align: center;
  background-color: #750259;
  color: white;
}

	/*==========================
        USER - VIEW CART END  
	============================*/
	
	/*==================
          MATRIMONY 
	====================*/
	
	
	        .highlight {
            color: #750259;
        }
        .form-check-input:checked {
            background-color: #750259;
            border-color: #750259;
        }
        .btn-primary {
            background-color: #750259;
            border-color: #750259;
        }
        .btn-primary:hover {
            background-color: #5a0142;
            border-color: #5a0142;
        }
		
	/* General Styles */
.matrimony-container {
    background-color: #f9f9f9;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
	padding:10px 30px;
	max-width:80%;
	margin:10px auto;
}

.matrimony-title {
    color: #750259;
    text-align: left;
    font-weight: bold;
	margin-bottom:15px;
}

/* Form Elements */
.matrimony-form-label {
    color: #000;
	font-size:14px;
}

 

.matrimony-form-input,
.matrimony-form-select,
.matrimony-form-textarea {
    border: 1px solid #750259;
    border-radius: 5px;
    padding: 10px;
    width: 75%;
}

.matrimony-form-select:focus,
.matrimony-form-input:focus,
.matrimony-form-textarea:focus {
    outline: none;
    box-shadow: 0 0 5px rgba(117, 2, 89, 0.5);
    border-color: #750259;
}

/* Checkboxes and Radio Buttons */
.matrimony-form-check .form-check-input:checked {
    background-color: #750259;
    border-color: #750259;
}

.matrimony-form-check .form-check-label {
    color: #750259;
    font-weight: 500;
}

.form-check-label {
	color:#222;
}

/* Buttons */
.matrimony-btn {
    background-color: #750259;
    color: #fff;
    border: none;
    padding: 10px 20px;
    border-radius: 5px;
    transition: background-color 0.3s ease, box-shadow 0.3s ease;
}

.matrimony-btn:hover {
    background-color: #5a0142;
    box-shadow: 0 4px 8px rgba(117, 2, 89, 0.3);
}

/* Section Headers */
.matrimony-section-header {
    color: #750259;
    font-weight: bold;
	margin : 30px auto;
	margin-bottom:0px;
}

/* File Upload */
.matrimony-file-upload {
    display: block;
    margin-top: 10px;
}

/* Submit Button */
.matrimony-submit-btn {
    background-color: #750259;
    border: none;
    padding: 12px 25px;
    font-size: 16px;
    color: white;
    border-radius: 5px;
    width: 100%;
    margin-top: 20px;
}

.matrimony-submit-btn:hover {
    background-color: #5a0142;
    transition: 0.3s ease-in-out;
}

/* Terms and Conditions */
.matrimony-terms {
    font-size: 14px;
    color: #750259;
}

.matrimony-terms .form-check-label {
    font-weight: normal;
}

	
	
	/*==================
        MATRIMONY END
	====================*/
	
	
	/*==================
        CONTACT 
	====================*/
	
	        .sayamen-contact-container {
            padding: 45px;
            border-radius: 0;
            position: relative;
            max-width: 90%;
            margin: 20px auto;
        }

        .sayamen-row {
            box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
            border-radius: 8px;
            overflow: hidden;
			color:#111;
        }
		
		.sayamen-row h2{
			color:#750259;
			text-align:center;
		}

        .sayamen-form-control {
            background: #fff;
            color: #000;
            font-size: 14px;
            border-radius: 2px;
            border: 1px solid rgba(0, 0, 0, 0.1);
            height: 52px;
        }

        .sayamen-bi {
            font-size: 20px;
        }

        .sayamen-d-flex p {
            padding-left: 18px;
            font-family: Verdana, Geneva, Tahoma, sans-serif;
            font-size: 18px;
        }
		
		.apply-img {
			height:250px;
			max-width:100%;
		}

        @media (max-width: 768px) {
            .sayamen-contact-container {
                padding: 20px;
                width: 100%;
            }
        }

        @media (max-width: 576px) {
            .sayamen-contact-container {
                margin-top: 20px;
            }
            .sayamen-d-flex p {
                font-size: 16px;
            }
        }
	
    /*==================
        CONTACT END 
	====================*/
	
	/*==================
        International
	====================*/
	.international-button-flex {
		display:flex;
		flex:1;
		flex-wrap:wrap;
		justify-content:center;
		align-items:center;
	}
	.international-button-flex a{
		padding:0px 15px;;
		background-color:#750259;
		margin:10px;
		font-size:18px;
	}
   /*==================
     International END
	====================*/
	
	
	 /*==================
     POLIICIES
	====================*/
	
	.policy-hero {
    background-color: #f8f9fa;
    border-bottom: 1px solid #e9ecef;
	color:var(--color-primary);
}

.policy-content {
    line-height: 1.7;
    font-size: 1.05rem;
	color:#000;
}

.policy-content h3, .policy-content h4 {
    margin-top: 2rem;
    margin-bottom: 1rem;
    color: #000;
}

.policy-content ul {
    padding-left: 1.5rem;
}

.policy-content li {
    margin-bottom: 0.5rem;
}

 /*==================
     POLICIES END
	====================*/
	
/* =============================
   DARK SHINY CATEGORIES GRID STYLES - WHITE CONTAINER
   ============================= */

/* =============================
   LIGHTER SHINY CATEGORIES GRID STYLES - WHITE CONTAINER
   ============================= */

.video-categories-grid {
    padding: 20px 0;
    background: #ffffff;
    position: relative;
    overflow: hidden;
}

.categories-section-header {
    text-align: center;
    margin-bottom: 60px;
    position: relative;
    z-index: 2;
}

.categories-section-header h2 {
    font-size: 3rem;
    font-weight: 800;
    color: var(--color-primary);
    margin-bottom: 20px;
    position: relative;
    display: inline-block;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.categories-section-header h2::after {
    content: '';
    position: absolute;
    bottom: -15px;
    left: 50%;
    transform: translateX(-50%);
    width: 100px;
    height: 3px;
    background: linear-gradient(90deg, transparent, var(--color-primary), transparent);
    border-radius: 2px;
}

.categories-section-header p {
    font-size: 1.2rem;
    color: var(--default-text-color);
    max-width: 600px;
    margin: 0 auto;
    line-height: 1.6;
}

.video-category-card-link {
    text-decoration: none;
    display: block;
    height: 100%;
}

.video-category-card {
    background: linear-gradient(135deg, 
        #4d4d5d 0%, 
        #3e3e4e 30%, 
        #353545 70%, 
        #2f2f3a 100%);
    border-radius: 25px;
    padding: 50px 30px;
    box-shadow: 
        0 15px 35px rgba(0, 0, 0, 0.25),
        0 5px 15px rgba(0, 0, 0, 0.15),
        inset 0 1px 0 rgba(255, 255, 255, 0.2),
        inset 0 -1px 0 rgba(0, 0, 0, 0.2);
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    border: 1px solid rgba(255, 255, 255, 0.2);
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
    backdrop-filter: blur(10px);
}

.video-category-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, 
        rgba(117, 2, 89, 0.5) 0%, 
        rgba(44, 45, 63, 0.4) 50%, 
        rgba(130, 2, 99, 0.45) 100%);
    opacity: 0.7;
    transition: opacity 0.4s ease;
}

.video-category-card::after {
    content: '';
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
    background: linear-gradient(135deg, 
        var(--color-primary) 0%, 
        rgba(117, 2, 89, 0.7) 30%, 
        rgba(44, 45, 63, 0.7) 70%, 
        var(--color-secondary) 100%);
    border-radius: 27px;
    z-index: -1;
    opacity: 0.8;
    filter: blur(3px);
}

/* Shine effect overlay */
.video-category-card .shine-overlay {
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, 
        transparent, 
        rgba(255, 255, 255, 0.2), 
        transparent);
    transition: left 0.8s ease;
}

.video-category-card:hover .shine-overlay {
    left: 100%;
}

.video-category-icon {
    text-align: center;
    margin-bottom: 30px;
    position: relative;
    z-index: 2;
}

.video-category-icon::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100px;
    height: 100px;
    background: radial-gradient(circle, 
        rgba(255, 255, 255, 0.2) 0%, 
        rgba(255, 255, 255, 0.1) 50%, 
        transparent 70%);
    border-radius: 50%;
    z-index: -1;
}

.video-category-icon i {
    font-size: 3.5rem;
    background: linear-gradient(135deg, 
        #ffffff 0%, 
        #f5f5f5 30%, 
        #ebebeb 70%, 
        #e0e0e0 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    filter: drop-shadow(0 3px 10px rgba(255, 255, 255, 0.5));
    display: inline-block;
    transition: all 0.4s ease;
}

.video-category-content {
    text-align: center;
    position: relative;
    z-index: 2;
    width: 100%;
}

.video-category-title {
    font-size: 1.6rem;
    font-weight: 700;
    background: linear-gradient(135deg, 
        #ffffff 0%, 
        #f8f8f8 25%, 
        #f0f0f0 50%, 
        #f8f8f8 75%, 
        #ffffff 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-shadow: 
        0 1px 2px rgba(255, 255, 255, 0.6),
        0 2px 6px rgba(255, 255, 255, 0.4);
    margin: 0;
    position: relative;
    display: inline-block;
    letter-spacing: 0.5px;
    line-height: 1.3;
}

.video-category-title::after {
    content: '';
    position: absolute;
    bottom: -8px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, #ffffff, transparent);
    transition: width 0.4s ease;
}

/* Minimal Hover Effects */
.video-category-card:hover {
    transform: translateY(-8px) scale(1.02);
    box-shadow: 
        0 20px 40px rgba(0, 0, 0, 0.3),
        0 8px 20px rgba(0, 0, 0, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.25),
        inset 0 -1px 0 rgba(0, 0, 0, 0.3);
}

.video-category-card:hover .video-category-title::after {
    width: 80%;
}

.video-category-card:hover .video-category-icon i {
    transform: scale(1.1);
    filter: drop-shadow(0 5px 15px rgba(255, 255, 255, 0.7));
}

/* Even lighter gradient themes for cards */
.video-category-card.theme-1::before {
    background: linear-gradient(135deg, 
        rgba(117, 2, 89, 0.55) 0%, 
        rgba(44, 45, 63, 0.45) 50%, 
        rgba(130, 2, 99, 0.5) 100%);
}

.video-category-card.theme-2::before {
    background: linear-gradient(135deg, 
        rgba(44, 45, 63, 0.55) 0%, 
        rgba(117, 2, 89, 0.45) 50%, 
        rgba(44, 45, 63, 0.5) 100%);
}

.video-category-card.theme-3::before {
    background: linear-gradient(135deg, 
        rgba(130, 2, 99, 0.55) 0%, 
        rgba(117, 2, 89, 0.45) 50%, 
        rgba(44, 45, 63, 0.5) 100%);
}

.video-category-card.theme-4::before {
    background: linear-gradient(135deg, 
        rgba(117, 2, 89, 0.5) 0%, 
        rgba(130, 2, 99, 0.55) 50%, 
        rgba(44, 45, 63, 0.45) 100%);
}

.video-category-card.theme-5::before {
    background: linear-gradient(135deg, 
        rgba(44, 45, 63, 0.5) 0%, 
        rgba(130, 2, 99, 0.45) 50%, 
        rgba(117, 2, 89, 0.55) 100%);
}

.video-category-card.theme-6::before {
    background: linear-gradient(135deg, 
        rgba(130, 2, 99, 0.45) 0%, 
        rgba(44, 45, 63, 0.55) 50%, 
        rgba(117, 2, 89, 0.5) 100%);
}

/* Different icon glow effects */
.video-categories-grid .bi-music-note-beamed { 
    background: linear-gradient(135deg, #ffffff, #f5f5f5, #ebebeb);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.video-categories-grid .bi-heart-fill { 
    background: linear-gradient(135deg, #ffffff, #fff0f0, #ffe0e0);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.video-categories-grid .bi-star-fill { 
    background: linear-gradient(135deg, #ffffff, #fffff5, #ffffeb);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.video-categories-grid .bi-bookmark-fill { 
    background: linear-gradient(135deg, #ffffff, #f5faff, #ebf5ff);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.video-categories-grid .bi-flag-fill { 
    background: linear-gradient(135deg, #ffffff, #f5fff5, #ebffeb);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.video-categories-grid .bi-award-fill { 
    background: linear-gradient(135deg, #ffffff, #faf5ff, #f5ebff);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Responsive Design */
@media (max-width: 768px) {
    .video-categories-grid {
        padding: 40px 0;
    }
    
    .categories-section-header h2 {
        font-size: 2.2rem;
    }
    
    .categories-section-header p {
        font-size: 1.1rem;
        padding: 0 20px;
    }
    
    .video-category-card {
        padding: 40px 25px;
        border-radius: 20px;
    }
    
    .video-category-icon i {
        font-size: 3rem;
    }
    
    .video-category-title {
        font-size: 1.4rem;
    }
    
    .video-category-icon::before {
        width: 90px;
        height: 90px;
    }
}

@media (max-width: 576px) {
    .video-categories-grid {
        padding: 30px 0;
    }
    
    .categories-section-header {
        margin-bottom: 40px;
    }
    
    .categories-section-header h2 {
        font-size: 1.8rem;
    }
    
    .categories-section-header p {
        font-size: 1rem;
    }
    
    .video-category-card {
        padding: 35px 20px;
        border-radius: 18px;
    }
    
    .video-category-icon i {
        font-size: 2.5rem;
    }
    
    .video-category-title {
        font-size: 1.2rem;
    }
    
    .video-category-icon::before {
        width: 80px;
        height: 80px;
    }
}

/* Card entrance animation */
@keyframes cardEntrance {
    0% {
        opacity: 0;
        transform: translateY(50px) scale(0.9);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.video-category-card {
    animation: cardEntrance 0.8s ease-out forwards;
    opacity: 0;
}

/* Staggered animation */
.video-categories-grid .col-12:nth-child(1) .video-category-card {
    animation-delay: 0.1s;
}

.video-categories-grid .col-12:nth-child(2) .video-category-card {
    animation-delay: 0.2s;
}

.video-categories-grid .col-12:nth-child(3) .video-category-card {
    animation-delay: 0.3s;
}

.video-categories-grid .col-12:nth-child(4) .video-category-card {
    animation-delay: 0.4s;
}

.video-categories-grid .col-12:nth-child(5) .video-category-card {
    animation-delay: 0.5s;
}

.video-categories-grid .col-12:nth-child(6) .video-category-card {
    animation-delay: 0.6s;
}
	/* =============================
   VIDEO CATEGORIES GRID STYLES END
   ============================= */
/* =============================
   PROFESSIONAL CATEGORIES LIST STYLES
   ============================= */

.professional-categories-container {
    max-width: 1000px;
    margin: 30px auto;
    background: #ffffff;
    border: 1px solid #e0e0e0;
    border-radius: 12px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
    overflow: hidden;
}

.professional-categories-header {
    background: linear-gradient(135deg, var(--color-primary) 0%, #6a1b9a 100%);
    color: white;
    padding: 20px 30px;
    text-align: center;
}

.professional-categories-header h2 {
    margin: 0;
    font-size: 1.5rem;
    font-weight: 600;
    letter-spacing: 0.5px;
}

.professional-categories-list {
    padding: 0;
    margin: 0;
    list-style: none;
}

.category-list-item {
    border-bottom: 1px solid #f0f0f0;
    transition: background-color 0.2s ease;
}

.category-list-item:last-child {
    border-bottom: none;
}

.category-list-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 30px;
    text-decoration: none;
    color: var(--color-secondary);
    font-weight: 500;
    transition: all 0.2s ease;
}

.category-list-link:hover {
    background-color: #f8f9fa;
    color: var(--color-primary);
}

.category-name {
    font-size: 1rem;
    flex: 1;
}

.category-status {
    font-size: 0.85rem;
    color: #6c757d;
    margin-left: 15px;
}

.category-list-item.empty-category .category-name {
    color: #6c757d;
    font-weight: 400;
}

.category-list-item.empty-category .category-status {
    color: #dc3545;
    font-style: italic;
}

.category-arrow {
    color: #adb5bd;
    margin-left: 15px;
    transition: transform 0.2s ease;
}

.category-list-link:hover .category-arrow {
    color: var(--color-primary);
    transform: translateX(3px);
}

/* Mobile responsiveness */
@media (max-width: 768px) {
    .professional-categories-container {
        margin: 20px 15px;
        border-radius: 8px;
    }
    
    .professional-categories-header {
        padding: 18px 20px;
    }
    
    .professional-categories-header h2 {
        font-size: 1.3rem;
    }
    
    .category-list-link {
        padding: 14px 20px;
    }
    
    .category-name {
        font-size: 0.95rem;
    }
    
    .category-status {
        font-size: 0.8rem;
    }
}

@media (max-width: 480px) {
    .professional-categories-container {
        margin: 15px 10px;
    }
    
    .professional-categories-header {
        padding: 15px;
    }
    
    .professional-categories-header h2 {
        font-size: 1.2rem;
    }
    
    .category-list-link {
        padding: 12px 15px;
    }
    
    .category-name {
        font-size: 0.9rem;
    }
}

/* Focus states for accessibility */
.category-list-link:focus {
    outline: 2px solid var(--color-primary);
    outline-offset: -2px;
}

/* Empty state for entire container */
.professional-categories-empty {
    text-align: center;
    padding: 40px 30px;
    color: #6c757d;
    font-style: italic;
}

/* =============================
   PROFESSIONAL CATEGORIES LIST STYLES END
   ============================= */

/* =============================
   SONG LYRICS NEW WITH CK 
   ============================= */

/* Song Lyrics Main Page Styles */
.song-lyrics-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
}

.song-lyrics-header {
    text-align: center;
    margin-bottom: 40px;
    padding: 30px 0;
}

.song-lyrics-icon {
    font-size: 3rem;
    color: #820263; /* Primary color */
    margin-bottom: 15px;
}

.song-lyrics-title {
    font-size: 2.5rem;
    font-weight: bold;
    color: #2C2D3F; /* Secondary color */
    margin-bottom: 10px;
}

/* Search Section */
.song-lyrics-search {
    max-width: 600px;
    margin: 0 auto 30px;
}

.song-lyrics-search-input {
    border-radius: 50px;
    padding: 15px 25px;
    border: 2px solid #e9ecef;
    font-size: 1.1rem;
    transition: all 0.3s ease;
    width: 100%;
}

.song-lyrics-search-input:focus {
    border-color: #820263; /* Primary color */
    box-shadow: 0 0 0 0.3rem rgba(130, 2, 99, 0.25);
    outline: none;
}

/* Tab Styles */
.song-lyrics-tabs {
    display: flex;
    justify-content: center;
    margin-bottom: 30px;
    border-bottom: 2px solid #e9ecef;
}

.song-lyrics-tab {
    padding: 15px 30px;
    background: none;
    border: none;
    border-bottom: 3px solid transparent;
    font-size: 1.1rem;
    font-weight: 600;
    color: #6c757d;
    cursor: pointer;
    transition: all 0.3s ease;
}

.song-lyrics-tab:hover {
    color: #820263;
    border-bottom-color: #820263;
}

.song-lyrics-tab.active {
    color: #820263;
    border-bottom-color: #820263;
}

.song-lyrics-tab-content {
    display: none;
}

.song-lyrics-tab-content.active {
    display: block;
}

/* Alphabet Navigation */
.song-lyrics-alphabet-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
    padding: 20px;
    background: linear-gradient(135deg, #820263 0%, #2C2D3F 100%); /* Primary to secondary */
    border-radius: 15px;
    margin-bottom: 30px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}

.song-lyrics-alphabet-link {
    display: inline-block;
    padding: 10px 15px;
    background: white;
    border: 2px solid transparent;
    border-radius: 8px;
    text-decoration: none;
    color: #495057;
    font-weight: bold;
    font-size: 1.1rem;
    transition: all 0.3s ease;
    min-width: 45px;
    text-align: center;
}

.song-lyrics-alphabet-link:hover {
    background: #9b59b6; /* Purple shade from primary family */
    color: white;
    border-color: #9b59b6;
    transform: translateY(-3px);
    box-shadow: 0 5px 15px rgba(155, 89, 182, 0.3);
    text-decoration: none;
}

/* Telugu Alphabet Navigation Styles */
.telugu-alphabet-nav {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 20px 15px;
}

.telugu-alphabet-row {
    display: flex;
    justify-content: center;
    gap: 8px;
    flex-wrap: wrap;
}

.telugu-alphabet-space {
    width: 30px;
    display: inline-block;
}

/* Letter Sections */
.song-lyrics-letter-section {
    margin-bottom: 50px;
    padding: 20px;
    background: white;
    border-radius: 15px;
    box-shadow: 0 2px 20px rgba(0,0,0,0.1);
}

.song-lyrics-letter-header {
    color: #2C2D3F;
    border-bottom: 3px solid #9b59b6; /* Purple accent from primary family */
    padding-bottom: 15px;
    margin-bottom: 25px;
    font-size: 2rem;
    font-weight: bold;
    text-align: center;
}

/* Song Cards */
.song-lyrics-card {
    background: white;
    border-radius: 15px;
    padding: 25px;
    box-shadow: 0 3px 15px rgba(0,0,0,0.1);
    transition: all 0.3s ease;
    height: 100%;
    text-align: center;
    border: 1px solid #e9ecef;
    position: relative;
    overflow: hidden;
}

.song-lyrics-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, #820263, #9b59b6, #6a0152); /* Primary color shades */
}

.song-lyrics-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 10px 30px rgba(0,0,0,0.2);
}

.song-lyrics-cover {
    width: 140px;
    height: 140px;
    object-fit: cover;
    border-radius: 10px;
    margin: 0 auto 20px;
    border: 3px solid #f8f9fa;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
    transition: transform 0.3s ease;
}

.song-lyrics-card:hover .song-lyrics-cover {
    transform: scale(1.05);
}

.song-lyrics-title-card {
    color: #2C2D3F;
    font-size: 1.3rem;
    font-weight: bold;
    margin-bottom: 8px;
    line-height: 1.3;
}

.song-lyrics-artist {
    color: #7f8c8d;
    font-size: 1rem;
    margin-bottom: 15px;
    font-style: italic;
}

.song-lyrics-category {
    color: #820263; /* Primary color */
    font-size: 0.9rem;
    margin-bottom: 20px;
    font-weight: 500;
}

/* Action Buttons */
.song-lyrics-actions {
    display: flex;
    gap: 10px;
    justify-content: center;
    flex-wrap: wrap;
}

.song-lyrics-btn {
    padding: 10px 20px;
    border-radius: 25px;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.3s ease;
    border: none;
    cursor: pointer;
    font-size: 0.9rem;
}

.song-lyrics-btn-primary {
    background: linear-gradient(135deg, #820263, #9b59b6); /* Primary to purple shade */
    color: white;
}

.song-lyrics-btn-primary:hover {
    background: linear-gradient(135deg, #9b59b6, #8e44ad);
    color: white;
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(155, 89, 182, 0.3);
    text-decoration: none;
}

.song-lyrics-btn-secondary {
    background: linear-gradient(135deg, #2C2D3F, #4a4b6d); /* Secondary to lighter shade */
    color: white;
}

.song-lyrics-btn-secondary:hover {
    background: linear-gradient(135deg, #4a4b6d, #3a3b5a);
    color: white;
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(44, 45, 63, 0.3);
    text-decoration: none;
}

.song-lyrics-btn-outline {
    background: transparent;
    border: 2px solid #820263; /* Primary color */
    color: #820263;
}

.song-lyrics-btn-outline:hover {
    background: #820263;
    color: white;
    transform: translateY(-2px);
    text-decoration: none;
}

/* No Results */
.song-lyrics-no-results {
    text-align: center;
    padding: 60px 20px;
    background: white;
    border-radius: 15px;
    box-shadow: 0 3px 15px rgba(0,0,0,0.1);
}

.song-lyrics-no-results-icon {
    font-size: 4rem;
    color: #bdc3c7;
    margin-bottom: 20px;
}

.song-lyrics-no-results-title {
    color: #7f8c8d;
    font-size: 1.5rem;
    margin-bottom: 10px;
}

.song-lyrics-no-results-text {
    color: #95a5a6;
    font-size: 1.1rem;
}

/* Song Details Page Styles */
.song-lyrics-detail-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
}

.song-lyrics-breadcrumb {
    background: none;
    padding: 0;
    margin-bottom: 30px;
}

.song-lyrics-breadcrumb-item a {
    color: #820263;
    text-decoration: none;
    font-weight: 500;
}

.song-lyrics-breadcrumb-item a:hover {
    color: #9b59b6; /* Purple shade on hover */
    text-decoration: underline;
}

.song-lyrics-detail-cover {
    text-align: center;
    margin-bottom: 30px;
}

.song-lyrics-detail-image {
    max-width: 350px;
    width: 100%;
    border-radius: 15px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.2);
    border: 5px solid white;
}

.song-lyrics-detail-actions {
    display: flex;
    gap: 15px;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 25px;
}

.song-lyrics-detail-btn {
    padding: 12px 25px;
    border-radius: 30px;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.3s ease;
    border: none;
    cursor: pointer;
    font-size: 1rem;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.song-lyrics-detail-btn-lg {
    padding: 15px 35px;
    font-size: 1.1rem;
}

.song-lyrics-detail-info {
    padding: 30px;
    background: white;
    border-radius: 15px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.1);
}

.song-lyrics-detail-title {
    color: #2C2D3F;
    font-size: 2.5rem;
    font-weight: bold;
    margin-bottom: 10px;
    line-height: 1.2;
}

.song-lyrics-detail-artist {
    color: #7f8c8d;
    font-size: 1.4rem;
    margin-bottom: 20px;
    font-style: italic;
}

.song-lyrics-meta {
    display: flex;
    gap: 15px;
    flex-wrap: wrap;
    margin-bottom: 25px;
}

.song-lyrics-meta-badge {
    background: linear-gradient(135deg, #820263, #9b59b6); /* Primary to purple */
    color: white;
    padding: 8px 16px;
    border-radius: 20px;
    font-size: 0.9rem;
    font-weight: 500;
}

.song-lyrics-meta-date {
    color: #95a5a6;
    font-size: 0.9rem;
    display: flex;
    align-items: center;
    gap: 5px;
}

/* Lyrics Content */
.song-lyrics-content {
    margin-top: 30px;
}

.song-lyrics-content-header {
    color: #820263; /* Primary color */
    border-bottom: 3px solid #820263;
    padding-bottom: 15px;
    margin-bottom: 25px;
    font-size: 1.8rem;
    font-weight: bold;
}

.song-lyrics-text {
    background: linear-gradient(135deg, #f8f9fa, #e9ecef);
    padding: 40px;
    border-radius: 15px;
    border-left: 5px solid #9b59b6; /* Purple accent */
    line-height: 1.8;
    font-size: 1.15rem;
    white-space: pre-line;
    box-shadow: inset 0 2px 10px rgba(0,0,0,0.05);
    color: #2c3e50; /* Darker shade for better readability */
}

.song-lyrics-text p {
    margin-bottom: 1.5rem;
    color: #2c3e50; /* Dark gray for lyrics text */
}

.song-lyrics-text strong {
    color: #820263; /* Primary color for emphasis */
}

.song-lyrics-text em {
    color: #9b59b6; /* Purple for italic emphasis */
    font-style: italic;
}

.song-lyrics-text h1, 
.song-lyrics-text h2, 
.song-lyrics-text h3, 
.song-lyrics-text h4, 
.song-lyrics-text h5, 
.song-lyrics-text h6 {
    color: #2C2D3F;
    margin: 1.5rem 0 1rem 0;
}

.song-lyrics-text ul, 
.song-lyrics-text ol {
    color: #2c3e50;
    margin-bottom: 1.5rem;
}

.song-lyrics-text li {
    margin-bottom: 0.5rem;
}

/* Back Navigation */
.song-lyrics-back-nav {
    text-align: center;
    margin-top: 40px;
    padding-top: 30px;
    border-top: 2px solid #ecf0f1;
}

/* Enhanced Song Lyrics Image Styles */
.song-lyrics-detail-image {
    max-width: 100%;
    width: auto;
    height: auto;
    border-radius: 15px;
    box-shadow: 0 15px 40px rgba(0,0,0,0.3);
    border: 8px solid white;
    display: block;
    margin: 0 auto;
}

/* Responsive image container */
.song-lyrics-image-container {
    background: linear-gradient(135deg, #f8f9fa, #e9ecef);
    padding: 30px;
    border-radius: 20px;
    text-align: center;
    box-shadow: inset 0 2px 10px rgba(0,0,0,0.05);
    margin: 20px 0;
}

/* Ensure good readability */
.song-lyrics-image-wrapper {
    display: inline-block;
    max-width: 90%;
    margin: 0 auto;
}

/* Zoom effect on hover for better reading */
.song-lyrics-image-zoom {
    transition: transform 0.3s ease;
    cursor: zoom-in;
}

.song-lyrics-image-zoom:hover {
    transform: scale(1.02);
}

/* Animation Classes */
.song-lyrics-fade-in {
    animation: fadeIn 0.5s ease-in;
}

.song-lyrics-slide-up {
    animation: slideUp 0.5s ease-out;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes slideUp {
    from { 
        opacity: 0;
        transform: translateY(30px);
    }
    to { 
        opacity: 1;
        transform: translateY(0);
    }
}

/* Loading State */
.song-lyrics-loading {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 60px;
}

.song-lyrics-spinner {
    width: 40px;
    height: 40px;
    border: 4px solid #f3f3f3;
    border-top: 4px solid #820263;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Responsive Design */
@media (max-width: 768px) {
    .song-lyrics-container,
    .song-lyrics-detail-container {
        padding: 15px;
    }
    
    .song-lyrics-title {
        font-size: 2rem;
    }
    
    .song-lyrics-alphabet-nav {
        gap: 5px;
        padding: 15px;
    }
    
    .song-lyrics-alphabet-link {
        padding: 8px 12px;
        font-size: 1rem;
        min-width: 40px;
    }
    
    .song-lyrics-card {
        padding: 20px;
    }
    
    .song-lyrics-cover {
        width: 120px;
        height: 120px;
    }
    
    .song-lyrics-detail-title {
        font-size: 2rem;
    }
    
    .song-lyrics-detail-artist {
        font-size: 1.2rem;
    }
    
    .song-lyrics-text {
        padding: 25px;
        font-size: 1rem;
    }
    
    .song-lyrics-detail-actions {
        flex-direction: column;
        align-items: center;
    }
    
    .song-lyrics-detail-btn {
        width: 100%;
        max-width: 250px;
        justify-content: center;
    }
    
    /* Telugu alphabet responsive */
    .telugu-alphabet-nav {
        gap: 8px;
        padding: 15px 10px;
    }
    
    .telugu-alphabet-row {
        gap: 6px;
    }
    
    .telugu-alphabet-space {
        width: 15px;
    }
    
    .song-lyrics-tabs {
        flex-direction: column;
        align-items: center;
    }
    
    .song-lyrics-tab {
        width: 100%;
        max-width: 200px;
        margin-bottom: 10px;
    }
    
    .song-lyrics-detail-image {
        max-width: 95%;
        border-width: 5px;
    }
    
    .song-lyrics-image-container {
        padding: 20px 15px;
    }
}

@media (max-width: 576px) {
    .song-lyrics-letter-header {
        font-size: 1.5rem;
    }
    
    .song-lyrics-title-card {
        font-size: 1.1rem;
    }
    
    .song-lyrics-detail-title {
        font-size: 1.7rem;
    }
    
    .song-lyrics-text {
        padding: 20px;
        font-size: 0.95rem;
    }
    
    .song-lyrics-meta {
        flex-direction: column;
        align-items: flex-start;
    }
    
    /* Telugu alphabet mobile */
    .telugu-alphabet-nav {
        gap: 6px;
        padding: 12px 8px;
    }
    
    .telugu-alphabet-row {
        gap: 4px;
    }
    
    .telugu-alphabet-space {
        width: 10px;
    }
    
    .song-lyrics-alphabet-link {
        padding: 6px 10px;
        font-size: 0.9rem;
        min-width: 35px;
    }
    
    .song-lyrics-detail-image {
        max-width: 100%;
        border-width: 3px;
    }
}

/* =============================
   SONG LYRICS NEW WITH CK END 
   ============================= */
   
   /* =============================
   USER DASHBOARD INDEX PAGE 
   ============================= */
   
   
   /* User Dashboard Card Base Styles */
.user-dashboard-card {
    background: #ffffff;
    border-radius: 12px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.08);
    transition: all 0.3s ease;
    border: 1px solid #e9ecef;
    height: 100%;
    overflow: hidden;
}

.user-dashboard-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
}

/* Card Header Styles */
.user-dashboard-card-header {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    padding: 1rem 1.25rem;
    border-bottom: none;
}

.user-dashboard-card-classifieds .user-dashboard-card-header {
    background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
}

.user-dashboard-card-library .user-dashboard-card-header {
    background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
}

.user-dashboard-card-resources .user-dashboard-card-header {
    background: linear-gradient(135deg, #fa709a 0%, #fee140 100%);
}

.user-dashboard-card-business .user-dashboard-card-header {
    background: linear-gradient(135deg, #a8caba 0%, #5d4157 100%);
}

.user-dashboard-card-prayer .user-dashboard-card-header {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.user-dashboard-card-title {
    font-size: 1.1rem;
    font-weight: 600;
    margin: 0;
    display: flex;
    align-items: center;
}

/* Card Body Styles */
.user-dashboard-card-body {
    padding: 1.5rem;
}

/* Stat Item Styles */
.user-dashboard-stat-item {
    padding: 0.75rem 0;
    transition: transform 0.2s ease;
}

.user-dashboard-stat-item:hover {
    transform: scale(1.05);
}

.user-dashboard-stat-item-large {
    padding: 1.5rem 0;
}

/* Stat Icon Styles */
.user-dashboard-stat-icon {
    font-size: 2rem;
    margin-bottom: 0.75rem;
    display: block;
}

.user-dashboard-stat-icon-large {
    font-size: 3.5rem;
    margin-bottom: 1rem;
    display: block;
    opacity: 0.9;
}

/* Stat Number Styles */
.user-dashboard-stat-number {
    font-size: 1.8rem;
    font-weight: 700;
    margin-bottom: 0.25rem;
    color: #2c3e50;
    line-height: 1.2;
}

.user-dashboard-stat-number-large {
    font-size: 3rem;
    font-weight: 800;
    margin-bottom: 0.5rem;
    color: #2c3e50;
    line-height: 1.2;
}

/* Stat Label Styles */
.user-dashboard-stat-label {
    font-size: 0.8rem;
    color: #6c757d;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.user-dashboard-stat-label-large {
    font-size: 1rem;
    color: #6c757d;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin: 0;
}

/* Stat Color Variants */
.user-dashboard-stat-primary { color: #4facfe !important; }
.user-dashboard-stat-success { color: #43e97b !important; }
.user-dashboard-stat-info { color: #00f2fe !important; }
.user-dashboard-stat-warning { color: #fee140 !important; }
.user-dashboard-stat-danger { color: #667eea !important; }
.user-dashboard-stat-secondary { color: #a8caba !important; }

.user-dashboard-stat-purple { color: #6f42c1 !important; }
.user-dashboard-stat-indigo { color: #6610f2 !important; }
.user-dashboard-stat-teal { color: #20c997 !important; }
.user-dashboard-stat-orange { color: #fd7e14 !important; }
.user-dashboard-stat-brown { color: #8d6e63 !important; }
.user-dashboard-stat-pink { color: #e83e8c !important; }

/* Responsive Adjustments */
@media (max-width: 768px) {
    .user-dashboard-card-body {
        padding: 1rem;
    }
    
    .user-dashboard-stat-icon {
        font-size: 1.5rem;
    }
    
    .user-dashboard-stat-number {
        font-size: 1.5rem;
    }
    
    .user-dashboard-stat-number-large {
        font-size: 2.5rem;
    }
    
    .user-dashboard-stat-icon-large {
        font-size: 3rem;
    }
}

/* Animation for numbers */
.user-dashboard-stat-number,
.user-dashboard-stat-number-large {
    animation: fadeInUp 0.6s ease;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}


/* =============================
   USER DASHBOARD INDEX END  
   ============================= */
   
/* ===== Professional Pending Pages Styles - Improved ===== */

/* Professional Stats Cards - Improved */
.pro-stats-card {
    border: none;
    border-radius: 10px;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.08);
    transition: all 0.3s ease;
    height: 100px;
    display: flex;
    align-items: center;
    margin-bottom: 1rem;
}

.pro-stats-card-primary {
    background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
    color: white;
}

.pro-stats-card-success {
    background: linear-gradient(135deg, #10b981 0%, #34d399 100%);
    color: white;
}

.pro-stats-card-info {
    background: linear-gradient(135deg, #3b82f6 0%, #60a5fa 100%);
    color: white;
}

.pro-stats-card-warning {
    background: linear-gradient(135deg, #f59e0b 0%, #fbbf24 100%);
    color: white;
}

.pro-stats-card-danger {
    background: linear-gradient(135deg, #ef4444 0%, #f87171 100%);
    color: white;
}

.pro-stats-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.12);
}

.pro-stats-card .card-body {
    padding: 1rem;
    width: 100%;
}

.pro-stats-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

.pro-stats-text {
    flex: 1;
}

.pro-stats-number {
    font-size: 1.8rem;
    font-weight: 700;
    line-height: 1;
    margin-bottom: 0.25rem;
}

.pro-stats-label {
    font-size: 0.85rem;
    opacity: 0.9;
    font-weight: 500;
}

.pro-stats-icon {
    font-size: 2rem;
    opacity: 0.9;
    margin-left: 1rem;
}

/* Professional Tables - Enhanced */
.pro-table-container {
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    border: 1px solid #e5e7eb;
}

.pro-table {
    margin-bottom: 0;
    font-size: 0.875rem;
    width: 100%;
}

.pro-table thead th {
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
    color: #374151;
    border: none;
    padding: 12px 16px;
    font-weight: 600;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-bottom: 2px solid #e5e7eb;
}

.pro-table tbody td {
    padding: 14px 16px;
    vertical-align: top;
    border-color: #f8fafc;
    color: #4b5563;
    line-height: 1.4;
}

.pro-table tbody tr {
    transition: all 0.2s ease;
    border-bottom: 1px solid #f3f4f6;
}

.pro-table tbody tr:hover {
    background-color: #f8fafc;
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(0,0,0,0.04);
}

.pro-table tbody tr:last-child {
    border-bottom: none;
}

/* Enhanced Cards */
.pro-main-card {
    border: none;
    border-radius: 12px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
    overflow: hidden;
    margin-bottom: 2rem;
}

.pro-card-header {
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
    color: #374151;
    border-bottom: 1px solid #e5e7eb;
    padding: 1.25rem 1.5rem;
    font-weight: 600;
    font-size: 1.1rem;
}

/* Professional Tabs - Improved */
.pro-nav-tabs {
    border-bottom: 2px solid #e5e7eb;
    margin-bottom: 1.5rem;
}

.pro-nav-tabs .nav-link {
    border: none;
    border-radius: 8px 8px 0 0;
    margin: 0 4px;
    padding: 12px 24px;
    font-weight: 500;
    color: #6b7280;
    background: transparent;
    transition: all 0.3s ease;
    border-bottom: 3px solid transparent;
    font-size: 0.9rem;
}

.pro-nav-tabs .nav-link.active {
    color: #374151;
    background: transparent;
    border-bottom: 3px solid #6366f1;
    font-weight: 600;
}

.pro-nav-tabs .nav-link:hover:not(.active) {
    color: #374151;
    background: #f9fafb;
}

/* Action Buttons - Enhanced */
.pro-action-buttons {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 120px;
}

.pro-action-buttons .btn {
    border-radius: 6px;
    font-weight: 500;
    font-size: 0.8rem;
    padding: 6px 10px;
    transition: all 0.2s ease;
    border: none;
    text-align: center;
}

.pro-action-buttons .btn-success {
    background: linear-gradient(135deg, #10b981 0%, #34d399 100%);
    color: white;
}

.pro-action-buttons .btn-danger {
    background: linear-gradient(135deg, #ef4444 0%, #f87171 100%);
    color: white;
}

.pro-action-buttons .btn-info {
    background: linear-gradient(135deg, #3b82f6 0%, #60a5fa 100%);
    color: white;
}

.pro-action-buttons .btn-secondary {
    background: linear-gradient(135deg, #6b7280 0%, #9ca3af 100%);
    color: white;
}

.pro-action-buttons .btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15);
}

/* Enhanced Image Thumbnails */
.pro-img-thumbnail {
    border-radius: 6px;
    border: 2px solid #fff;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    object-fit: cover;
}

/* Text Previews */
.pro-text-preview {
    max-height: 60px;
    overflow: hidden;
    line-height: 1.4;
    background: #f8fafc;
    padding: 8px 12px;
    border-radius: 6px;
    border-left: 3px solid #6366f1;
    font-size: 0.8rem;
    color: #6b7280;
}

/* Badges */
.pro-badge {
    border-radius: 10px;
    padding: 4px 8px;
    font-weight: 500;
    font-size: 0.75rem;
}

/* Page Header */
.pro-page-header {
    background: #fff;
    padding: 1.5rem 0;
    margin-bottom: 1.5rem;
    border-bottom: 1px solid #e5e7eb;
}

/* Empty States */
.pro-empty-state {
    padding: 3rem 2rem;
    text-align: center;
    color: #6b7280;
}

.pro-empty-state .icon {
    font-size: 3rem;
    margin-bottom: 1rem;
    opacity: 0.5;
}

/* Field Groups */
.pro-field-group {
    margin-bottom: 8px;
}

.pro-field-label {
    font-weight: 600;
    color: #374151;
    font-size: 0.8rem;
    margin-bottom: 2px;
}

.pro-field-value {
    color: #6b7280;
    font-size: 0.85rem;
    line-height: 1.3;
}

/* User Details Button */
.btn-user-details {
    background: linear-gradient(135deg, #8b5cf6 0%, #a78bfa 100%);
    border: none;
    color: white;
    border-radius: 6px;
    padding: 6px 12px;
    font-size: 0.8rem;
    transition: all 0.2s ease;
}

.btn-user-details:hover {
    transform: translateY(-1px);
    box-shadow: 0 3px 8px rgba(139, 92, 246, 0.3);
    color: white;
}

/* Responsive */
@media (max-width: 768px) {
    .pro-stats-card {
        height: 90px;
    }
    
    .pro-stats-number {
        font-size: 1.5rem;
    }
    
    .pro-stats-icon {
        font-size: 1.5rem;
    }
    
    .pro-table-container {
        overflow-x: auto;
    }
    
    .pro-action-buttons {
        flex-direction: row;
        flex-wrap: wrap;
    }
    
    .pro-action-buttons .btn {
        flex: 1;
        min-width: 70px;
    }
}