/*---------------------------------------
  CUSTOM PROPERTIES ( VARIABLES )             
-----------------------------------------*/
:root {
	--white-color: #ffffff;
	--primary-color: #f9c10b;
	--secondary-color: #dc3545;
	--dash-color: #f8faeb;
	--section-bg-color: #f5f5f5;
	--dark-color: #000000;
	--p-color: #717275;
	--card-color: #fef7dc;
	--body-font-family: 'DM Sans', sans-serif;
	--h1-font-size: 60px;
	--h2-font-size: 42px;
	--h3-font-size: 36px;
	--h4-font-size: 32px;
	--h5-font-size: 24px;
	--h6-font-size: 22px;
	--p-font-size: 18px;
	--menu-font-size: 14px;
	--copyright-text-font-size: 16px;
	--font-weight-normal: 400;
	--font-weight-medium: 500;
	--font-weight-bold: 700;

	/* Compatibility vars used by admin JS & templates */
	--text: var(--dark-color);
	--muted: var(--p-color);
}

/*---------------------------------------
  FONT-FACE RULES
-----------------------------------------*/
/* latin */
@font-face {
	font-family: 'DM Sans';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src:
		url(https://fonts.gstatic.com/s/dmsans/v15/rP2Yp2ywxg089UriI5-g4vlH9VoD8Cmcqbu0-K4.woff2)
		format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
		U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
		U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* latin */
@font-face {
	font-family: 'DM Sans';
	font-style: normal;
	font-weight: 500;
	font-display: swap;
	src:
		url(https://fonts.gstatic.com/s/dmsans/v15/rP2Yp2ywxg089UriI5-g4vlH9VoD8Cmcqbu0-K4.woff2)
		format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
		U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
		U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* latin */
@font-face {
	font-family: 'DM Sans';
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src:
		url(https://fonts.gstatic.com/s/dmsans/v15/rP2Yp2ywxg089UriI5-g4vlH9VoD8Cmcqbu0-K4.woff2)
		format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
		U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
		U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

body {
	background: var(--white-color);
	font-family: var(--body-font-family);
}

.container, .container-md, .container-sm {
    max-width: -webkit-fill-available;
}

/*--------------------------------------- 
  Spinner  
-----------------------------------------*/
#loadingSpinner {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.5); /* Semi-transparent background */
	display: none; /* Hidden by default */
	justify-content: center; /* Horizontally center content */
	align-items: center; /* Vertically center content */
	z-index: 9999; /* Ensure it's on top of other content */
}

.spinner-container {
	display: flex;
	flex-direction: column;
	align-items: center; /* Center items vertically */
	text-align: center;
	color: white; /* Make text color white for visibility */
}

.spinner-container .spinner-border {
	width: 2rem; /* Adjust size if necessary */
	height: 2rem; /* Adjust size if necessary */
	border-width: 0.3rem; /* Optional: thicker spinner */
}

/* Specific spinners for edit and image upload */
#spinnerEdit, #spinnerImage {
	display: none; /* Hidden by default */
}

.spinner-overlay {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.5); /* Semi-transparent background */
	display: none; /* Default to hidden */
	justify-content: center;
	align-items: center;
	z-index: 10000; /* Ensure it's on top of other content */
}

/* When active, display the spinner */
.spinner-overlay.active, #spinnerEdit.active, #spinnerImage.active {
	display: flex; /* Show the spinner */
}

/*---------------------------------------
  SENSOR & CANVAS STYLING              
-----------------------------------------*/
canvas {
	max-width: 100%;
	height: auto !important;
}

.sensor-check label {
	margin-right: 1rem;
}

/*---------------------------------------
  Chat button              
-----------------------------------------*/
#floatingButton {
	position: fixed;
	bottom: 20px;
	right: 20px;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 30px;
	cursor: pointer;
	/* box-shadow: 0 2px 10px rgb(243, 33, 33); */ /* yellow shadow */
}

#contactFormPopup {
	display: none;
	position: fixed;
	bottom: 5px;
	right: 5px; /* Adjusted from 0 to 10px for spacing from the right */
	padding: 25px;
	border-radius: 15px;
	background-color: #d4e839;
	box-shadow: 0 0 20px rgba(0, 0, 0, 0.3);
	z-index: 999;
	width: auto; /* Ensure the popup width is determined by content */
	max-width: 400px; /* Optional: Set a maximum width for the popup */
	text-align: center; /* Centers text inside the popup */
}

#contactFormPopup.show {
	display: block;
}

#contactFormPopup .custom-form {
	display: flex;
	flex-direction: column;
	align-items: center; /* Center the form content horizontally */
	justify-content: center; /* Center the form content vertically */
	width: 100%;
}

.custom-form .form-control {
	margin-bottom: 0px; /* Space between form elements */
}

.custom-form .btn {
	margin-bottom: 15px; /* Space between buttons */
}

/*---------------------------------------
  TYPOGRAPHY               
-----------------------------------------*/
h2, h3, h4, h5, h6 {
	color: var(--dark-color);
}

h1, h2, h3, h4, h5, h6 {
	font-weight: var(--font-weight-bold);
	letter-spacing: -1px;
}

h1 {
	font-size: var(--h1-font-size);
	letter-spacing: -2px;
}

h2 {
	font-size: var(--h2-font-size);
	letter-spacing: -2px;
	text-shadow: 0px 0px 10px rgba(255, 255, 0, 0.8);
}

h3 {
	font-size: var(--h3-font-size);
	line-height: inherit;
}

h4 {
	font-size: var(--h4-font-size);
	line-height: inherit;
}

h5 {
	font-size: var(--h5-font-size);
	line-height: normal;
}

h6 {
	font-size: var(--h6-font-size);
}

p {
	color: var(--p-color);
	font-size: var(--p-font-size);
	font-weight: var(--font-weight-normal);
}

ul li {
	color: var(--p-color);
	font-size: var(--p-font-size);
	font-weight: var(--font-weight-normal);
}

a, button {
	touch-action: manipulation;
	transition: all 0.3s;
}

a {
	color: var(--p-color);
	text-decoration: none;
}

a:hover {
	color: var(--primary-color);
}

::selection {
	background: var(--primary-color);
	color: var(--white-color);
}

::-moz-selection {
	background: var(--primary-color);
	color: var(--white-color);
}

.section-hero ::selection, .bg-warning ::selection {
	background: #f9d55c;
}

.section-padding {
	padding-top: 100px;
	padding-bottom: 100px;
}

.custom-border-radius {
	border-radius: 20px;
}

b, strong {
	font-weight: var(--font-weight-bold);
}

.small-title {
	text-transform: uppercase;
}

/*---------------------------------------
  CUSTOM ICON               
-----------------------------------------*/
.custom-icon {
	display: inline-block;
	height: 45px;
	width: 45px;
	line-height: 45px;
	border: 3px solid var(--white-color);
	text-align: center;
	border-radius: 50%;
	font-size: 20px;
	position: relative;
}

.custom-icon::before, .custom-icon::after {
	box-sizing: inherit;
	content: "";
	position: absolute;
	width: 100%;
	height: 100%;
	left: 0;
	top: 0;
	border-radius: 50%;
}

.custom-icon::before {
	border: 3px solid transparent;
}

.custom-icon::after {
	border: 0 solid transparent;
}

.custom-icon:hover {
	border-color: transparent;
}

.custom-icon:hover::before {
	border-top-color: var(--primary-color);
	border-right-color: var(--primary-color);
	border-bottom-color: var(--primary-color);
	transition: border-top-color .15s linear, border-right-color .15s linear
		.1s, border-bottom-color .15s linear .2s;
}

.custom-icon:hover::after {
	border-top: 3px solid var(--primary-color);
	border-left-width: 3px;
	border-right-width: 3px;
	transform: rotate(270deg);
	transition: transform .4s linear 0s, border-left-width 0s linear .35s;
}

.play-icon::before {
	position: relative;
	left: 1px;
}

/*---------------------------------------
  CUSTOM BUTTON                
-----------------------------------------*/
/* General Button Styling */
.btn, .custom-btn {
	background: var(--secondary-color);
	border-radius: 15px;
	color: var(--white-color);
	font-size: 13px; /* Ensure consistent font size */
	font-weight: var(--font-weight-bold);
	vertical-align: inherit;
	padding: 7px 14px; /* Consistent padding */
	letter-spacing: 1px; /* Slight letter spacing */
	cursor: pointer;
	transition: all 0.3s ease; /* Smooth transition for hover */
	border: none; /* Remove default borders */
}

/* Button Hover and Focus Effects */
.btn:hover, .custom-btn:hover {
	background: var(--primary-color);
	color: var(--secondary-color);
	box-shadow: 0 3px 6px rgba(0, 0, 0, 0.3); /* Subtle shadow on hover */
}

.btn:focus, .custom-btn:focus {
	outline: none;
	background: var(--primary-color);
	color: var(--secondary-color);
	box-shadow: 0 3px 6px rgba(0, 0, 0, 0.3);
	/* Enhanced shadow on focus */
}

/* Custom Button for Primary Background Color */
.custom-bg-primary {
	background: var(--primary-color);
	color: var(--white-color);
}

.custom-bg-primary:hover {
	background: var(--white-color);
	color: var(--dark-color);
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Subtle shadow on hover */
}

/* Card Styling */
.card {
	background: var(--card-color);
	border-radius: 20px;
}

/* Dashboard Card Styling */
.card-dash {
	background: var(--dash-color);
	border-radius: 20px;
}

/* Dashboard Card Header */
.card-dash .card-header {
	background-color: var(--dash);
	border-radius: 10px;
}

/*---------------------------------------
  NAVIGATION              
-----------------------------------------*/
.navbar {
	z-index: 9;
	right: 0;
	left: 0;
	padding-top: 0rem;
	padding-bottom: 0rem;
	position: fixed;
}

.navbar-brand {
	font-size: 32px;
	font-weight: var(--font-weight-bold);
	color: var(--secondary-color);
}

.navbar-brand:hover {
	color: var(--secondary-color);
}

.navbar-expand-lg .navbar-nav .nav-link {
	padding-right: 25px;
	padding-left: 25px;
	font-size: 16px;
	font-weight: var(--font-weight-bold);
	color: var(--secondary-color);
}

.navbar-nav .nav-link {
	color: var(--p-color);
	font-size: var(--menu-font-size);
	font-weight: var(--font-weight-medium);
	text-transform: uppercase;
	padding-top: 10px;
	padding-bottom: 10px;
}

.navbar-nav .nav-link.active, .navbar-nav .nav-link:hover,
	.projects-detail-page .navbar-nav .nav-link.active:hover {
	color: var(--primary-color);
}

.projects-detail-page .navbar-nav .nav-link.active {
	color: var(--p-color);
}

.navbar-toggler {
	border: 0;
	padding: 0;
	cursor: pointer;
	margin: 0;
	width: 30px;
	height: 35px;
	outline: none;
}

.navbar-toggler:focus {
	outline: none;
	box-shadow: none;
}

.navbar-toggler[aria-expanded="true"] .navbar-toggler-icon {
	background: transparent;
}

.navbar-toggler[aria-expanded="true"] .navbar-toggler-icon:before,
	.navbar-toggler[aria-expanded="true"] .navbar-toggler-icon:after {
	transition: top 300ms 50ms ease, -webkit-transform 300ms 350ms ease;
	transition: top 300ms 50ms ease, transform 300ms 350ms ease;
	transition: top 300ms 50ms ease, transform 300ms 350ms ease,
		-webkit-transform 300ms 350ms ease;
	top: 0;
}

.navbar-toggler[aria-expanded="true"] .navbar-toggler-icon:before {
	transform: rotate(45deg);
}

.navbar-toggler[aria-expanded="true"] .navbar-toggler-icon:after {
	transform: rotate(-45deg);
}

.navbar-toggler .navbar-toggler-icon {
	background: var(--dark-color);
	transition: background 10ms 300ms ease;
	display: block;
	width: 30px;
	height: 2px;
	position: relative;
}

.navbar-toggler .navbar-toggler-icon:before, .navbar-toggler .navbar-toggler-icon:after
	{
	transition: top 300ms 350ms ease, -webkit-transform 300ms 50ms ease;
	transition: top 300ms 350ms ease, transform 300ms 50ms ease;
	transition: top 300ms 350ms ease, transform 300ms 50ms ease,
		-webkit-transform 300ms 50ms ease;
	position: absolute;
	right: 0;
	left: 0;
	background: var(--primary-color);
	width: 30px;
	height: 2px;
	content: '';
}

.navbar-toggler .navbar-toggler-icon::before {
	top: -8px;
}

.navbar-toggler .navbar-toggler-icon::after {
	top: 8px;
}

.breadcrumb-item.active {
	color: var(--primary-color);
}

/*---------------------------------------
  SITE HEADER               
-----------------------------------------*/
.site-header {
	background-color: var(--primary-color); /* Header background color */
	padding: 10px 0; /* Adjust padding */
}

/*---------------------------------------
  SITE HEADER ICONS               
-----------------------------------------*/
.site-header-icon {
	font-size: 18px;
	vertical-align: middle; /* Align icons properly with text */
}

/* Social Icon Styling */
.social-icon {
	margin: 0;
	padding: 0;
	display: flex; /* Display icons in a row */
	list-style: none;
}

.social-icon li {
	margin: 0 10px; /* Space between social icons */
}

.social-icon-link {
	background: var(--white-color);
	border-radius: 50%;
	font-size: 24px;
	width: 35px;
	height: 35px;
	line-height: 35px;
	color: var(--dark-color);
	text-align: center;
	transition: background-color 0.3s, color 0.3s;
}

.social-icon-link:hover {
	background-color: var(--primary-color);
	color: var(--white-color);
}

/*---------------------------------------
  HERO              
-----------------------------------------*/
.hero {
	position: relative;
	height: calc(100vh - 25px);
}

.section-hero {
	background-image: url('../images/bg_new.avif');
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
	position: relative;
	height: auto;
}

.section-hero::before {
	content: "";
	background: linear-gradient(to bottom, var(--light-color), transparent
		90%);
	position: absolute;
	top: 0;
	right: 0;
	left: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
	opacity: 0.7;
}

.section-hero::after {
	content: "";
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	height: 50px; /* Controls the height of the blurred area */
	background: rgba(255, 255, 255, 0.5);
	/* Semi-transparent background for blending */
	filter: blur(50px); /* Apply blur to the bottom edge */
	pointer-events: none;
	/* Ensures this doesn't interfere with interaction */
}

.section-hero-text {
	position: relative;
}

.carousel {
	padding-right: 0;
	padding-left: 0;
}

.hero-carousel, .carousel-inner, .carousel-item {
	height: 100%;
}

.carousel-image-wrap::before {
	content: "";
	background: linear-gradient(to top, var(--dark-color), transparent 90%);
	position: absolute;
	z-index: 2;
	top: 0;
	right: 0;
	left: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
	opacity: 0.7;
}

.carousel-caption {
	z-index: 9;
	top: 32%;
	bottom: 0;
	left: 0;
	text-align: left;
	width: 50%;
	margin-right: 12px;
	margin-left: 12px;
	padding-bottom: 100px;
}

.carousel-image-wrap {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	width: 100%;
	height: 100%;
	margin-left: auto;
}

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

.carousel-control-next, .carousel-control-prev {
	top: auto;
	bottom: 50px;
	opacity: 1;
}

.carousel-control-prev {
	left: auto;
	right: 70px;
}

.carousel-control-next-icon, .carousel-control-prev-icon {
	width: 70px;
	height: 70px;
}

/*---------------------------------------
  ABOUT              
-----------------------------------------*/
.about-image-wrap {
	border-radius: 20px;
	position: relative;
	overflow: hidden;
}

.about-image-info {
	background: linear-gradient(to top, var(--dark-color), transparent 90%);
	position: absolute;
	bottom: 0;
	right: 0;
	left: 0;
	padding: 40px;
}

.about-image {
	border-radius: 20px;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.about-thumb {
	background: var(--primary-color);
	border-radius: 20px;
	margin-bottom: 24px;
	padding: 40px;
}

/*---------------------------------------
  SERVICES              
-----------------------------------------*/
.services {
	background: var(--section-bg-color);
}

.nav-tabs {
	border-bottom: 0;
}

.nav-tabs .nav-link, .nav-tabs .nav-link span {
	color: var(--p-color);
	display: block;
	text-align: left;
}

.nav-tabs .nav-link {
	border-radius: 0;
	border: 0;
	border-left: 7px solid var(--p-color);
	margin-right: 30px;
	margin-left: 30px;
	margin-bottom: 30px;
	padding: 30px;
	transition: all 0.3s ease-in-out;
}

.nav-tabs .nav-item.show .nav-link, .nav-tabs .nav-link.active,
	.nav-tabs .nav-link:focus, .nav-tabs .nav-link:hover {
	border-left-color: var(--secondary-color);
	background: var(--white-color);
	box-shadow: 0 1rem 3rem rgba(0, 0, 0, .175);
}

.nav-tabs .nav-link.active h3, .nav-tabs .nav-link:focus h3, .nav-tabs .nav-link:hover h3
	{
	color: var(--primary-color);
}

/*---------------------------------------
  PROJECTS              
-----------------------------------------*/
.projects-thumb {
	border-radius: 20px;
	position: relative;
	overflow: hidden;
	margin-bottom: 24px;
	transition: all 0.3s;
	cursor: pointer;
}

.projects-thumb-large {
	min-height: 356px;
}

.projects-thumb:hover {
	background: var(--white-color);
	box-shadow: 0 1rem 3rem rgba(0, 0, 0, .175);
}

.projects-thumb:hover .projects-image {
	transform: scale(1.2);
}

.projects-thumb:hover .projects-title-wrap {
	padding-bottom: 30px;
}

.projects-thumb:hover .custom-btn, .projects-btn-wrap .custom-btn:hover
	{
	background: var(--primary-color);
}

.projects-title-wrap {
	background: linear-gradient(to top, var(--dark-color), transparent 90%);
	position: absolute;
	bottom: 0;
	right: 0;
	left: 0;
	padding: 25px 25px 10px 25px;
	transition: all 0.2s;
}

.projects-small-title {
	color: var(--primary-color);
	text-transform: uppercase;
}

.projects-title {
	color: var(--white-color);
}

.projects-image {
	border-radius: 20px;
	width: 100%;
	height: 400px; /* Keeps aspect ratio */
	transition: all 0.3s ease;
	object-fit: cover;
	/* Ensures images cover the container without distortion */
}

.projects-thumb-large .projects-image {
	object-fit: cover;
	height: 100%;
}

.projects-btn-wrap {
	position: absolute;
	bottom: 25px;
	right: 25px;
}

.projects-btn-wrap .custom-btn {
	font-size: 30px;
	padding: 7.5px 15px;
}

/*---------------------------------------
  Customer Table              
-----------------------------------------*/
.table-responsive {
    border-radius: 15px;
}

/*---------------------------------------
  CONTACT INFO               
-----------------------------------------*/
.contact-thumb {
	position: relative;
	bottom: 140px;
	margin-bottom: -140px;
}

.contact-info {
	border-radius: 20px;
	padding: 10px;
}

.google-map {
	border-radius: 20px;
}

.contact-icon {
	color: var(--primary-color);
	font-size: var(--h4-font-size);
}

/*---------------------------------------
  CONTACT              
-----------------------------------------*/
.contact-container-wrap {
	background-color: var(--primary-color);
	padding-bottom: 10px;
}

.contact-form {
	margin-top: 30px;
	margin-right: 30px;
}

/*---------------------------------------
  CUSTOM FORM
-----------------------------------------*/
/* General Form Control Styling */
.custom-form .form-control, .custom-form .file-label, .custom-form .form-select
	{
	background: gold;
	box-shadow: none;
	border-radius: 15px;
	border: 0;
	border-bottom: 3px solid var(--section-bg-color);
	margin-bottom: 12px;
	padding: 13px 0; /* uniform padding */
	font-size: 14px; /* consistent font size */
	transition: all 1.3s ease;
	outline: none;
	text-align: center; /* Align text to center */
	vertical-align: middle; /* Align text vertically */
}

/* On hover or focus */
.custom-form .form-control:hover, .custom-form .form-select:hover,
	.custom-form .form-control:focus, .custom-form .form-select:focus {
	background: var(--white-color);
	border-color: var(--primary-color); /* Subtle border change on focus */
	box-shadow: 0 3px 6px rgba(0, 0, 0, 0.3); /* soft shadow for focus */
}

/* Styling for the Submit Button */
.custom-form button[type="submit"] {
	background: var(--secondary-color);
	border-radius: 15px;
	color: var(--white-color);
	font-size: 13px; /* Ensure consistent font size */
	font-weight: var(--font-weight-bold);
	vertical-align: inherit;
	/* padding: 7px 14px; */ /* Consistent padding */
	letter-spacing: 1px; /* Slight letter spacing */
	cursor: pointer;
	transition: all 1.3s ease; /* Smooth transition for hover */
	border: none; /* Remove default borders */
}

/* Button hover or focus effects */
.custom-form button[type="submit"]:hover, .custom-form button[type="submit"]:focus
	{
	background: var(--primary-color);
	color: var(--secondary-color);
	box-shadow: 0 3px 6px rgba(0, 0, 0, 0.3); /* Subtle shadow on hover */
}

/* Custom styling for the File Input */
.custom-form .custom-file-input {
	display: none; /* Hide the default file input */
}

/* Custom file selection button */
.custom-form .custom-file-button {
	display: inline-block;
	background: transparent;
	box-shadow: none;
	border-radius: 15px;
	border: 0;
	border-bottom: 3px solid var(--section-bg-color);
	margin-bottom: 24px;
	padding: 13px 0; /* uniform padding */
	font-size: 14px; /* consistent font size */
	transition: all 1.3s ease;
	outline: none;
	text-align: center; /* Align text to center */
	vertical-align: middle; /* Align text vertically */
	cursor: pointer;
}

/* File button hover or focus effects */
.custom-form .custom-file-button:hover, .custom-form .custom-file-button:focus
	{
	background: var(--white-color);
	border-color: var(--primary-color); /* Subtle border change on focus */
	box-shadow: 0 3px 6px rgba(0, 0, 0, 0.3); /* soft shadow for focus */
}

/* Show file name inside the button when file is selected */
.custom-form .file-name {
	display: inline-block;
	margin-left: 10px;
	font-size: 14px;
	color: var(--section-bg-color);
	font-weight: var(--font-weight-bold);
}

/* Styling the label (acting as the button for file input) */
.custom-form .file-label {
	display: inline-block;
	cursor: pointer;
	padding: 13px 0;
	text-align: center;
	font-size: 14px;
	background: transparent;
	border: none;
	border-bottom: 3px solid var(--section-bg-color);
	transition: all 1.3s ease;
	border-radius: 15px;
	vertical-align: middle;
	width: 100%;
	text-transform: uppercase;
}

.custom-form .file-label:hover, .custom-form .file-label:focus {
	background: var(--white-color);
	border-color: var(--primary-color); /* Subtle border change on focus */
	box-shadow: 0 3px 6px rgba(0, 0, 0, 0.3); /* soft shadow for focus */
}

/*---------------------------------------
  SITE FOOTER               
-----------------------------------------*/
.site-footer {
	background: var(--primary-color);
	padding-top: 40px;
	padding-bottom: 20px;
	text-align: center; /* Center content horizontally */
}

.site-footer .copyright-text {
	color: var(--white-color);
	font-size: var(--copyright-text-font-size);
	margin-bottom: 0;
}

.site-footer .container {
	max-width: 1200px; /* Ensures the content does not stretch too wide */
}

/*---------------------------------------
  SOCIAL ICON               
-----------------------------------------*/
.social-icon {
	margin: 0;
	padding: 0;
	display: flex; /* Ensures social icons are aligned in a row */
	justify-content: center; /* Centers the icons */
}

.social-icon li {
	list-style: none;
	margin: 0 5px; /* Adds space between the icons */
}

.social-icon-link {
	background: var(--white-color);
	border-radius: 20px;
	font-size: var(--copyright-text-font-size);
	color: var(--dark-color);
	display: inline-block;
	width: 30px;
	height: 30px;
	line-height: 30px;
	text-align: center;
	transition: background 0.3s, color 0.3s;
	/* Smooth transition for hover effect */
}

.social-icon-link:hover {
	color: var(--secondary-color);
	background: var(--white-color); /* Hover effect */
}

/*---------------------------------------
  RESPONSIVE STYLES               
-----------------------------------------*/
@media screen and (min-width: 1600px) {
	.projects-thumb-large {
		min-height: 416px;
	}
}

@media screen and (max-width: 1280px) {
	.contact svg {
		bottom: 0;
		margin-bottom: 0;
	}
}

@media screen and (max-width: 991px) {
	h1 {
		font-size: 48px;
	}
	h2 {
		font-size: 36px;
	}
	h3 {
		font-size: 32px;
	}
	h4 {
		font-size: 28px;
	}
	h5 {
		font-size: 20px;
	}
	h6 {
		font-size: 18px;
	}
	.section-padding {
		padding-top: 100px;
		padding-bottom: 100px;
	}
	.custom-btn {
		font-size: var(--copyright-text-font-size);
		padding: 8px 16px;
	}
	.navbar-expand-lg .navbar-nav .nav-link {
		padding-left: 0;
	}
	.navbar-nav .nav-link {
		padding-top: 10px;
		padding-bottom: 10px;
	}
	.site-header .social-icon {
		text-align: left;
		margin-top: 10px;
	}
	.carousel-caption {
		width: 100%;
	}
	.about-thumb {
		padding: 30px;
	}
	.about-image {
		height: auto;
		margin-bottom: 24px;
	}
	.contact-container-wrap {
		padding-bottom: 50px;
	}
	.contact-form {
		margin-right: 0;
		margin-top: 80px;
		margin-bottom: 50px;
	}
	.contact-thumb {
		bottom: 0;
		margin-bottom: 0;
	}

	/* Adjust the footer for medium screens */
	.site-footer {
		text-align: center; /* Center footer content */
		padding-top: 30px; /* Adjust padding */
		padding-bottom: 30px; /* Adjust padding */
	}
	.social-icon {
		justify-content: center; /* Ensure icons are centered */
	}
	.social-icon-link {
		width: 35px; /* Make social icons slightly larger */
		height: 35px;
		line-height: 35px;
	}
}

@media screen and (max-width: 480px) {
	h1 {
		font-size: 38px;
	}
	h2 {
		font-size: 32px;
	}
	h3 {
		font-size: 28px;
	}
	h4 {
		font-size: 24px;
	}
	h5 {
		font-size: 20px;
	}
	.contact-icon {
		font-size: 24px;
	}
	.site-header p {
		font-size: 14px;
	}
	.carousel-control-next, .carousel-control-prev {
		bottom: 20px;
	}
	.nav-tabs .nav-link {
		margin-right: 0;
		margin-left: 0;
		padding: 15px;
	}
	.contact-info {
		padding: 30px 25px;
	}
	.site-footer-wrap {
		flex-direction: column; /* Stack elements vertically on small screens */
		align-items: center; /* Center items horizontally */
	}
	.copyright-text {
		padding-bottom: 10px; /* Adjust spacing */
		font-size: 14px; /* Adjust font size */
	}

	/* Center and adjust social icons on mobile */
	.social-icon {
		justify-content: center; /* Center social icons */
		margin-top: 10px; /* Add some space above the icons */
	}
	.social-icon-link {
		width: 30px; /* Slightly smaller icons */
		height: 30px;
		line-height: 30px;
	}
	.site-footer {
		padding-top: 20px; /* Reduce padding on mobile */
		padding-bottom: 20px; /* Reduce padding on mobile */
	}
}

/* -----------------------------
   Admin styles moved from admin.jsp
   -----------------------------*/

/* Admin layout and components */
.admin-shell {
    display: grid;
    grid-template-columns: 240px 1fr;
    min-height: calc(100vh - 70px);
}
.sidebar {
    padding: 28px 16px;
    position: sticky;
    top: 70px;
    height: calc(100vh - 70px);
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.sidebar-label {
    font-family: var(--body-font-family);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .12em;
    color: var(--p-color);
    text-transform: uppercase;
    padding: 16px 12px 6px;
}
.nav-btn {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    border: none;
    background: none;
    color: var(--p-color);
    font-family: var(--body-font-family);
    font-size: 13px;
    border-radius: 8px;
    cursor: pointer;
    transition: all .2s;
    width: 100%;
    text-align: left;
    text-decoration: none;
}
.nav-btn:hover { background: #1e2740; color: var(--primary-color); }
.nav-btn.active { background: rgba(79,142,247,.15); color: #4f8ef7; border-left: 3px solid #4f8ef7; padding-left: 11px; }
.nav-btn .icon { font-size: 16px; width: 20px; text-align: center; }
.main-content { padding: 28px 32px; overflow-x: auto; }
.page-header { font-family: var(--body-font-family); font-size: 26px; font-weight: 800; color: var(--dark-color); margin-bottom: 4px; }
.page-sub { color: var(--p-color); font-size: 12px; margin-bottom: 24px; }
.stats-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 28px; }
.stat-card { border: 1px solid #1e2740; border-radius: 12px; padding: 18px 20px; position: relative; overflow: hidden; }
.stat-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; }
.stat-card.blue::before  { background: linear-gradient(90deg,#4f8ef7,#7c3aed); }
.stat-card.green::before { background: linear-gradient(90deg,#10b981,#06b6d4); }
.stat-card.warn::before  { background: linear-gradient(90deg,#f59e0b,#ef4444); }
.stat-card.purple::before{ background: linear-gradient(90deg,#7c3aed,#ec4899); }
.stat-num { font-family: var(--body-font-family); font-size: 32px; font-weight: 800; line-height: 1; color: var(--dark-color); }
.stat-label { font-size: 11px; color: var(--p-color); margin-top: 4px; letter-spacing: .05em; }
.stat-icon { position: absolute; right: 16px; top: 50%; transform: translateY(-50%); font-size: 28px; opacity: .8; }
.panel { display: none; }
.panel.active { display: block; }
.card { border: 1px solid #1e2740; border-radius: 12px; overflow: hidden; margin-bottom: 20px; }
.card-head { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; border-bottom: 1px solid #1e2740; font-size: 14px; font-weight: 700; color: var(--dark-color); }
.card-body { padding: 20px; }
.card-body.no-padding { padding: 0; }
.search-row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.form-control, .form-select { border: 1px solid #1e2740; border-radius: 8px; color: var(--dark-color); font-size: 13px; padding: 9px 14px; outline: none; transition: border-color .2s; }
.form-control:focus, .form-select:focus { border-color: #4f8ef7; }
.form-control::placeholder { color: var(--p-color); }
.btn { display: inline-flex; align-items: center; gap: 6px; padding: 9px 16px; border-radius: 8px; border: none; font-family: var(--body-font-family); font-size: 12px; font-weight: 500; cursor: pointer; transition: all .2s; text-decoration: none; white-space: nowrap; }
.btn-primary { background: #4f8ef7; color: #fff; }
.btn-primary:hover { background: #3b7de8; }
.btn-success { background: #10b981; color: #fff; }
.btn-success:hover { background: #059669; }
.btn-ghost {color: var(--dark-color); }
.btn-ghost:hover { background: #2e3a55; }
.btn-warn { background: #f59e0b; color: #000; }
.btn-danger { background: #ef4444; color: #fff; }
.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 12px; }
thead th { color: var(--p-color); font-family: var(--body-font-family); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; padding: 10px 14px; text-align: left; border-bottom: 1px solid #1e2740; white-space: nowrap; }
tbody tr { border-bottom: 1px solid #1e2740; transition: background .15s; }
tbody tr:hover { background: rgba(79,142,247,.05); }
tbody td { padding: 10px 14px; color: var(--dark-color); vertical-align: middle; }
tbody td.mono { font-family: monospace; }
.badge { display: inline-block; padding: 3px 9px; border-radius: 20px; font-size: 10px; font-weight: 600; font-family: var(--body-font-family); letter-spacing: .03em; color: inherit;}
.device-list { background: var(--section-bg-color); border: 1px solid #1e2740; border-radius: 8px; max-height: 200px; overflow-y: auto; }
.device-item { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-bottom: 1px solid #1e2740; font-size: 12px; }
.device-item:last-child { border-bottom: none; }
.device-item input[type=checkbox] { accent-color: #4f8ef7; width: 15px; height: 15px; }
.toast-stack { position: fixed; bottom: 24px; right: 24px; z-index: 9999; display: flex; flex-direction: column; gap: 8px; }
.toast { border: 1px solid #1e2740; border-radius: 10px; padding: 12px 18px; font-size: 13px; display: flex; align-items: center; gap: 10px; min-width: 260px; animation: toastIn .3s ease; box-shadow: 0 4px 24px rgba(0,0,0,.4); }
.toast.success { border-left: 3px solid #10b981; }
.toast.error   { border-left: 3px solid #ef4444; }
.toast.info    { border-left: 3px solid #4f8ef7; }
@keyframes toastIn { from { opacity: 0; transform: translateX(20px); } to { opacity: 1; transform: translateX(0); } }
.empty-state { text-align: center; padding: 48px; color: var(--p-color); }
.empty-state .big { font-size: 48px; margin-bottom: 12px; }
.spinner { display: inline-block; width: 16px; height: 16px; border: 2px solid #1e2740; border-top-color: #4f8ef7; border-radius: 50%; animation: spin .7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.confirm-icon { font-size: 48px; text-align: center; margin-bottom: 12px; }
.confirm-text { text-align: center; font-size: 14px; color: var(--p-color); margin-bottom: 6px; }
.confirm-name { text-align: center; font-family: var(--body-font-family); font-size: 16px; font-weight: 700; color: var(--dark-color); }
@media (max-width: 900px) { .admin-shell { grid-template-columns: 1fr; } .sidebar { position: static; height: auto; flex-direction: row; flex-wrap: wrap; } .stats-row { grid-template-columns: 1fr 1fr; } }

/* -----------------------------
   Utility classes to replace inline styles used across JSPs
   -----------------------------*/
.font-3em { font-size: 3em !important; }
.img-full-height { height: 100% !important; }
.full-width { width: 100% !important; }
.d-none { display: none !important; }
.w-140 { width: 140px !important; }
.w-200 { width: 200px !important; }
.text-right { text-align: right !important; }
.opacity-05 { opacity: 0.5 !important; }
.muted-small { color: var(--p-color); font-size: 12px; padding: 10px 0; }
.width-380 { width: 380px !important; }
.max-h-280 { max-height: 280px !important; }
.accent-text { color: #4f8ef7 !important; }
.danger-note { text-align: center; color: #ef4444; font-size: 11px; margin-top: 10px; }
.profile-photo { width: 200px; height: 200px; cursor: pointer; object-fit: cover; }
.disabled-muted { opacity: 0.5; }

/* ensure modal-body padding variants if needed */
.modal-body.p-32-24-16 { padding: 32px 24px 16px; }
/* -----------------------------
   Modal overlay & dialog styles (admin)
   -----------------------------*/
.modal-overlay {
    display: none; /* hidden by default */
    position: fixed;
    inset: 0; /* top/right/bottom/left:0 */
    background: rgba(0,0,0,0.6);
    backdrop-filter: blur(3px);
    z-index: 1200;
    align-items: center;
    justify-content: center;
    padding: 20px;
}
.modal-overlay.open { display: flex; }

.modal-box {
    background: var(--white-color);
    color: var(--dark-color);
    border: 1px solid rgba(0,0,0,0.08);
    border-radius: 12px;
    width: 520px;
    max-width: 100%;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 10px 40px rgba(0,0,0,0.5);
    animation: modalPop .18s ease;
}
.modal-box.wide { width: 720px; }
.modal-box.width-380 { width: 380px; }
@keyframes modalPop { from { transform: translateY(8px); opacity: 0 } to { transform: translateY(0); opacity: 1 } }

.modal-head { padding: 16px 20px; border-bottom: 1px solid rgba(0,0,0,0.06); display:flex; align-items:center; justify-content:space-between; font-weight:700; }
.modal-close { background:none; border:none; font-size:18px; cursor:pointer; }
.modal-body { padding: 20px; }
.modal-foot { padding: 12px 18px; border-top: 1px solid rgba(0,0,0,0.06); display:flex; justify-content:flex-end; gap:10px; }

/* Action menu (three-dot) used in table rows */
.action-wrap { position: relative; display: inline-block; }
.action-menu {
    display: none;
    position: absolute;
    right: 0;
    top: calc(100% + 6px);
    background: var(--white-color);
    color: var(--dark-color);
    border: 1px solid rgba(0,0,0,0.08);
    border-radius: 8px;
    min-width: 180px;
    z-index: 1300;
    box-shadow: 0 8px 32px rgba(0,0,0,0.15);
    overflow: hidden;
}
.action-menu.open { display: block; }
.action-menu button { width: 100%; padding: 10px 12px; border: none; background: transparent; text-align: left; cursor: pointer; color: inherit; display:flex; gap:8px; align-items:center; }
.action-menu button:hover { background: rgba(0,0,0,0.03); }
.action-menu .sep { height:1px; background: rgba(0,0,0,0.06); margin:6px 0; }
.action-menu button.danger { color: var(--secondary-color); }

/* ensure table small buttons look sensible */
.btn-sm { padding: 6px 10px; font-size: 11px; }