* {
	font-family: "Poppins", sans-serif;
	font-weight: 500;
}

header {
	padding: 10px 70px;
	border-bottom: 4px solid #03a2e2;
	background: white;
	transition: 0.5s;
}

header.fixed {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	z-index: 1000;

	animation: slideDown 0.3s ease;
}

@keyframes slideDown {
	from {
		transform: translateY(-100%);
	}

	to {
		transform: translateY(0);
	}
}

.desktop-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.desktop-header .img-icon img {
	width: 195px;
}

.desktop-header .header-list ul {
	display: flex;
	gap: 5px;
}

.desktop-header .header-list ul li {
	padding: 5px 15px;
}

.desktop-header .header-list ul .active {
	background-color: whitesmoke;
	border-radius: 25px;
	transition: 0.5s;
	color: #03a2e2;
}


.desktop-header .header-list ul li:hover {
	background-color: whitesmoke;
	border-radius: 25px;	
	transition: 0.5s;
}

.top-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 10px 70px;
	background: linear-gradient(
		to right,
		rgb(255 255 255) 0px,
		rgb(197 237 255) 0px,
		rgb(60 206 255 / 75%) 100%
	);
}

.top-header .contact-info ul,
.top-header .soical-info ul {
	display: flex;
	gap: 15px;
}

.header-list ul li {
	position: relative;
}

.list-dropdown ul li i {
	font-size: 15px;
}
.list-dropdown ul li {
	font-size: 13px;
}

.header-list ul .list-dropdown:hover .header-dropdown {
	display: flex !important;
	transition: 0.5s;
}

.header-list ul .list-dropdown:hover i {
	transform: rotate(180deg);
	transition: 0.5s;
}

.header-dropdown {
	display: none !important;
	transition: 0.5s;
	position: absolute;
	top: 32px;
	flex-direction: column;
	background: white;
	border: 1px solid #dcdcdc;
	border-radius: 10px;
	width: 300px;
	padding: 5px 10px;
}

.sidebar-dropdown {
	display: none !important;
	transition: 0.5s;
	position: absolute;
	top: 0;
	flex-direction: column;
	background: white;
	border: 1px solid #dcdcdc;
	border-radius: 10px;
	width: max-content;
	padding: 5px 10px;
	right: -260px;
	z-index: 6;
}

.list-sidebar {
	position: relative;
}

.sidebar-dropdown {
	display: none !important;
	position: absolute;
	top: 0;
	left: 100%; /* parent ke bilkul right se start hoga */
	flex-direction: column;
	background: white;
	border: 1px solid #dcdcdc;
	border-radius: 10px;
	width: 300px;
	padding: 5px 10px;
	z-index: 6;
}

/* Hover par submenu show */
.list-sidebar:hover > .sidebar-dropdown {
	display: flex !important;
}

.list-dropdown {
	position: relative;
}

.desktop-header .header-list ul li a {
	display: flex;
	gap: 10px;
	align-items: center;
}

.header-dropdown {
	display: none !important;
	position: absolute;
	top: 32px;
	right: 0;
	flex-direction: column;
	background: white;
	border: 1px solid #dcdcdc;
	border-radius: 10px;
	width: 300px;
	padding: 5px 10px;
	z-index: 5;
}

.list-dropdown:hover > .header-dropdown {
	display: flex !important;
}
.list-sidebar {
	position: relative;
}

.sidebar-dropdown {
	position: absolute;
	right: -100%;
	top: 0;
}

.sidebar-dropdown {
	right: calc(50% + 5px);
}

.header-dropdown li {
	padding: 5px 15px 5px 5px !important;
	display: flex;
	gap: 10px;
	align-items: center;
	background-color: transparent;
}

.header-dropdown li i {
	padding: 5px 0px;
	width: 35px;
	border-radius: 7px;
}

.header-dropdown li:hover {
	background-color: #6bd9ff21 !important;
	border-radius: 8px !important;
}

.header-dropdown li:hover i {
	background-color: #03a2e242;

	transition: 0.5s;
}

.header-dropdown .list-sidebar:hover .sidebar-dropdown {
	display: flex !important;
}

.side-bar-button {
	display: none;
}

.side-bar-button button i {
	font-size: 35px;
}

.sidebar-menu {
	position: fixed;
	background-color: #00000054;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	display: flex;
	justify-content: end;
	/* Smooth animation */
	transform: translateX(0);
	opacity: 1;
	transition:
		transform 0.4s ease,
		opacity 0.4s ease;
	z-index: 99999;
}

.sidebar-menu.closed {
	transform: translateX(100%);
	opacity: 0;
	pointer-events: none;
}

.sidebar-menu .menu {
	width: 35%;
	height: 100%;
	background-color: white;
	padding: 15px;
}

.sidebar-menu .menu ul {
	margin-top: 15px;
}
.sidebar-menu .menu ul li a {
	width: 100%;
	padding: 10px 5px;
	display: block;
	border-bottom: 1px solid #d1d1d1;
	font-size: 13px;
}

.sidebar-menu .menu ul li.menu-dropdown a {
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.sidebar-menu .menu ul li.menu-dropdown ul {
	margin: 0px;
}

.sidebar-menu .menu ul li.menu-dropdown:hover .menu-dropdown-list {
	display: block;
}
.menu-dropdown-list {
	display: none;
}

.menu-dropdown:hover i {
	transform: rotate(180deg);
	transition: 0.5s;
}

.menu-dropdown .menu-dropdown-list .side-dropdown:hover i {
	transform: rotate(180deg);
	transition: 0.5s;
}

.side-dropdown:hover .side-menu-dropdown-list {
	display: block;
}

.side-bar-menu-button {
	display: flex;
	justify-content: end;
}

.side-menu-dropdown-list {
	display: none;
}
.side-bar-menu-button i {
	font-size: 30px;
}

@media (max-width: 977px) {
	header,
	.banners {
		padding: 10px 10px !important;
	}

	.our-service,
	.why-choose,
	.process,
	.footer-section,
	.faq,
	.buisness-info, .gallery, .service-list,
	.contact-form , .blog-details {
		padding: 100px 10px !important;
	}
}

@media (max-width: 777px) {
	.header-list {
		display: none;
	}

	.side-bar-button {
		display: block;
	}
	.top-header {
		display: none;
	}
	header {
		padding: 10px 10px;
	}
}



@media (min-width: 777px) {
	.sidebar-menu {
		display: none;
	}
}