@import url('https://fonts.googleapis.com/css2?family=Raleway:ital,wght@0,100..900;1,100..900&display=swap');
/* @import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css'); */
@import url('https://fonts.googleapis.com/css2?family=League+Spartan:wght@100..900&family=Open+Sans:ital,wght@0,300..800;1,300..800&family=Raleway:ital,wght@0,100..900;1,100..900&display=swap');

:root {
	--first: #E1CBAF;
	--second: #D6AC7A;
	--third: #9A6D43;
	--fourth: #2e1605;
	--fifth: #850001;
	--sixth: #7c5836;
}

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	font-family: "Open Sans", sans-serif;
	font-optical-sizing: auto;
	font-style: normal;
	font-variation-settings:
		"wdth" 100;
	text-decoration: none;
}

body {
	background-color: var(--first);
	overflow-x: hidden;
}

.top-navbar {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 10px 20px;
	background: black;
	height: 30px;
	overflow: hidden
}

.top-navbar-list p {
	color: wheat;
	font-weight: 700;
}

.top-navbar-list a {
	text-decoration: none;
	list-style: none;
	margin: 10px;
	text-transform: capitalize;
	transition: all .3s ease;
	font-weight: 700;
}

.top-navbar i{
	color: wheat;
}

.top-navbar-list a.commercial {
	color: wheat;
	letter-spacing: .5px;
}

.top-navbar-list a.residential {
	color: wheat;
	letter-spacing: .5px;
}

.top-navbar-list a:hover {
	color: white;
}

@media screen and (max-width:408px) {
	.top-navbar {
		padding: 10px 5px
	}

	.top-navbar a {
		font-size: 12px;
		margin: 5px
	}

	.top-navbar-list p {
		font-size: 12px
	}
}

header {
	background-color: var(--second);
	padding: 0 5%;
	box-shadow: 0 10px 20px rgb(0, 0, 0/5%), 0 6px 6px rgb(0, 0, 0/6%);
	height: 80px;
	z-index: 100;
}

header nav {
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content: space-between;
	align-items: center;
}

.logo {
	flex: 2;
	display: flex;
	align-items: center;
	height: 80px;
}

.logo img {
	width: 200px
}

.logo a {
	text-decoration: none;
	text-transform: uppercase;
	font-weight: 800;
}

.bartoggle,
#menubrop {
	display: none;
}

.NavMenu {
	flex: 10;
	list-style: none;
	position: relative;
	display: flex;
	justify-content: end;
}

.NavMenu li {
	display: inline-block;
}

.NavMenu li input {
	display: none;
}

.NavMenu li a {
	display: block;
	padding: 20px 14px;
	font-size: 15px;
	text-decoration: none;
	text-transform: uppercase;
	color: var(--fourth);
	position: relative;
	transition: .5s ease;
}

.NavMenu li a:hover {
	color: var(--fifth);
}

.NavMenu li a label {
	cursor: pointer;
	appearance: none;
	display: block;
	position: relative;
}

.NavMenu li a label::after {
	content: "";
	position: absolute;
	right: 0;
	top: 0;
	font-size: 20px;
}

.NavMenu>li>a label::after {
	right: -15px;
	top: -3px;
}

.NavMenu li ul {
	position: absolute;
	display: flex;
	flex-direction: column;
	background-color: var(--second);
	min-width: 200px;
	border-bottom: 2px solid var(--fourth);
	top: 100%;
	box-shadow: 0 3px 5px rgb(0 0 0/20%);
	transition: all 0.5s;
	-webkit-transition: all 0.5s;
	-moz-transition: all 0.5s;
	-ms-transition: all 0.5s;
	-o-transition: all 0.5s;
	transform: translateY(10px);
	-webkit-transform: translateY(10px);
	-moz-transform: translateY(10px);
	-ms-transform: translateY(10px);
	-o-transform: translateY(10px);
	visibility: hidden;
	opacity: 0;
	z-index: 10000
}

.NavMenu li ul li {
	position: relative;
}

.NavMenu li ul li a {
	color: var(--fourth);
	padding: 8px 10px;
	display: block;
	border-left: 2px solid transparent;
	border-bottom: 1px solid rgba(0, 0, 0, 0.1);
	transition: all 0.5s;
	-webkit-transition: all 0.5s;
	-moz-transition: all 0.5s;
	-ms-transition: all 0.5s;
	-o-transition: all 0.5s;
}

.NavMenu li ul li ul {
	position: absolute;
	left: 100%;
	top: 0;
}

@media(min-width:992px) {
	.NavMenu li ul li a:hover {
		border-left: 2px solid var(--fourth);
	}

	.NavMenu li:hover>ul,
	.NavMenu li ul li:hover>ul {
		visibility: visible;
		opacity: 1;
		transform: translateY(0);
		-webkit-transform: translateY(0);
		-moz-transform: translateY(0);
		-ms-transform: translateY(0);
		-o-transform: translateY(0);
	}
}

@media(max-width:991.98px) {
	header {
		padding: 6px 5%;
	}

	.logo {
		flex: 6;
	}

	.bartoggle {
		display: flex;
		justify-content: center;
		font-size: 30px;
		align-items: center;
		padding: 0 10px;
		cursor: pointer;
		color: var(--fourth)
	}

	.NavMenu {
		width: 500px;
		flex: 12;
		position: fixed;
		flex-direction: column;
		background-color: var(--first);
		left: 0;
		top: 110px;
		height: 100vh;
		z-index: -1;
		padding: 15px 0 50px 0;
		justify-content: start;
		overflow-y: scroll;
		transition: all 0.5s;
		-webkit-transition: all 0.5s;
		-moz-transition: all 0.5s;
		-ms-transition: all 0.5s;
		-o-transition: all 0.5s;
		transform: translateX(-100%);
		-webkit-transform: translateX(-100%);
		-moz-transform: translateX(-100%);
		-ms-transform: translateX(-100%);
		-o-transform: translateX(-100%);
	}

	.NavMenu li ul,
	.NavMenu li ul li ul {
		position: initial;
		left: 0;
		visibility: visible;
		opacity: 1;
		top: 0;
		display: none;
	}

	.NavMenu li a {
		padding: 8px 15px;
		border-bottom: 1px solid var(--fourth);
	}

	.NavMenu li ul li ul {
		background: var(--first);
		position: inherit;
		margin-top: -10px;
	}

	.NavMenu li ul li ul li a {
		font-size: 14px;
		color: var(--fourth);
		font-weight: 400;
		text-transform: initial;
		padding: 7px 15px 7px 30px;
	}

	.NavMenu li a label::after {
		right: 10px;
	}

	.NavMenu li input:checked+ul,
	.NavMenu li ul li input:checked+ul {
		display: flex;
		flex-direction: column;
		margin-bottom: 15px;
	}

	input:checked+.NavMenu {
		transform: translateX(0);
		-webkit-transform: translateX(0);
		-moz-transform: translateX(0);
		-ms-transform: translateX(0);
		-o-transform: translateX(0);
	}

}

@media(max-width:768px) {
	.NavMenu {
		width: 100%;
		z-index: 100;
	}
}

/*  */
@media screen and (min-width:901px) {
	.corousel-mobile {
		display: none;
	}
}

@media screen and (max-width:900px) {
	.corousel-web {
		display: none;
	}
}

.owl-dot.active span {
	background: var(--fourth) !important;
	width: 30px !important;
	height: 5px !important;
}

.owl-dot span {
	height: 5px !important;
	background: var(--second) !important;
}

/* headings */
h2.head1 {
	text-align: center;
	text-transform: capitalize;
	margin-top: 30px;
	font-size: 25px;
	color: var(--third);
	font-weight: 700;
	letter-spacing: 1px;
	width: 90%;
	margin: 30px auto 0;
}

.underline {
	width: 30px;
	height: 4px;
	background: var(--third);
	margin: 15px auto;
}

h3.head2 {
	text-align: center;
	text-transform: capitalize;
	font-size: 15px;
	color: var(--third);
	font-weight: 500;
	letter-spacing: 1px;
	width: 60%;
	margin: 0 auto 30px;
}

@media screen and (max-width:779px) {
	h3.head2 {
		width: 90%;
	}
}

/* principle */

.principle {
	align-content: center;
	min-height: 100vh;
	background-color: #ffecd2;
}

.principle-content {
	display: flex;
	justify-content: space-evenly;
	align-items: center;
	flex-wrap: wrap;
}

.principle-card {
	width: 350px;
	background: var(--second);
	box-shadow: 0 4px 8px rgba(0, 0, 0, .2);
	padding: 20px;
	margin: 50px 0;
	border: 1px solid var(--third);
	transition: .3s ease-in;
}

.principle-card:hover {
	transform: translateY(-10px);
	box-shadow: 3px 6px 10px rgba(0, 0, 0, .3)
}

.principle-img {
	background: var(--third);
	border-radius: 50%;
	padding: 15px;
	display: flex;
	justify-content: center;
	align-items: center;
}

.principle-img img {
	width: 60px;
	height: 60px;
}

.principle-head {
	display: flex;
	justify-content: start;
	align-items: end;
	margin-top: -40px;
	gap: 10px;
	margin-bottom: 15px
}

.principle-head h4.head {
	font-size: 18px;
	letter-spacing: .6px;
	line-height: 24px;
	color: var(--fourth);
	font-family: "Open Sans", sans-serif;
	font-optical-sizing: auto;
	font-weight: 600;
	font-style: normal;
	font-variation-settings:
		"wdth" 100;
}

.principle-card p.para {
	font-size: 15px;
	letter-spacing: .5px;
	line-height: 25px;
	color: var(--fourth);
	font-family: "Open Sans", sans-serif;
	font-optical-sizing: auto;
	font-weight: 400;
	font-style: normal;
	font-variation-settings:
		"wdth" 100;
}

.responsive-links {
	display: flex;
	flex-wrap: wrap;
	font-size: 16px;
	color: var(--third);
	justify-content: center;
}

.responsive-links a {
	color: var(--fourth);
	text-decoration: none;
	margin: 0 5px;
}

.responsive-links .dot {
	margin: 0 5px;
}

@media (max-width: 600px) {
	.responsive-links {
		font-size: 14px;
		text-align: center;
	}

	.responsive-links span,
	.responsive-links a {
		margin: 5px 0;
		display: block;
	}

	.responsive-links .dot {
		display: block;
		align-content: center;
	}
}

/* service */
.service {
	min-height: 100vh;
	display: flex;
	justify-content: center;
	align-items: center;
	background-color: #ffecd2;
	padding-bottom: 50px;
	border-top: solid 5px;
	border-top-color: #9A6D43;
}

.service-content {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	grid-template-rows: repeat(2, 1fr);
	grid-column-gap: 20px;
	grid-row-gap: 20px;
	place-items: center;
}

.service-list {
	width: 350px;
	height: 220px;
	text-align: center;
	padding: 12px;
	color: var(--fourth);
	transition: 2s ease;
	border-radius: 20px;
	background: #D6AC7A;
	box-shadow: inset -5px -5px 5px #564531,
		inset 5px 5px 5px #ffffc3;
}

/* .service-list:hover {
  box-shadow: rgb(46, 22, 5) 0px 10px 20px;
  } */

.service-list .service-img {
	background: var(--first);
	display: inline-block;
	padding: 20px;
	border-radius: 50%;
}

.service-list .service-img img {
	width: 50px;
	height: 50px;
	transition: 2s;
}

.service-list:hover .service-img img {
	transform: rotate(180deg);
}

.service-list .service-details h3 {
	font-size: 18px;
	text-transform: capitalize;
	margin: 10px 0 5px;
	color: var(--fourth);
	font-weight: 600;
	letter-spacing: .5px
}

.service-list .service-details p {
	font-size: 15px;
	font-weight: 400;
	color: var(--fourth);
}

/* form */

.service-form .form {
	background-image: url(../img/form\ bg\ overlay.jpg);
	min-height: 100vh;
	display: flex;
	justify-content: center;
	align-items: center;
	background-position: center;
	background-size: cover;

}

.form-content {
	display: flex;
	justify-content: space-evenly;
	align-items: center;
	gap: 100px;
	flex-wrap: wrap;
	padding: 20px;
}

.form-list img {
	width: 450px;
	height: 450px;
	border-radius: 50%;
}

.form-list form {
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	gap: 10px;
}

.form-list form select {
	padding: 15px;
	width: 360px;
	border-radius: 10px;
	outline: none;
	border: 1px solid black;
	background: whitesmoke;
	font-size: 1em;
}

.form-list form input {
	padding: 15px;
	width: 360px;
	border-radius: 10px;
	outline: none;
	border: 1px solid black;
	background: whitesmoke;
	font-size: 1em;
}

.form-list button {
	padding: 10px;
	width: 200px;
	letter-spacing: 1px;
	border-radius: 10px;
	background: #FDEB46;
	border: 1px solid var(--second);
	margin: 10px 0;
}

/* located */
.located {
	text-align: center;
	margin: 50px 0;
	padding: 40px 20px;
	/* Add padding for better spacing */
}

.located-main {
	display: flex;
	justify-content: space-evenly;
	/* Space between items */
	align-items: stretch;
	/* Ensure equal height among items */
	flex-wrap: wrap;
	/* Wrap items on smaller screens */
	gap: 20px;
	/* Space between items */
}

.counter-item {
	flex: 1;
	/* Allow each item to take equal width */
	max-width: 300px;
	/* Optional: Set a maximum width to avoid excessive stretching */
	font-size: 2rem;
	color: var(--fourth);
	/* Use theme color */
	text-align: center;
	background: var(--second);
	/* White background for counter items */
	border-radius: 10px;
	/* Rounded corners */
	padding: 20px;
	/* Add padding for content spacing */
	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
	/* Subtle shadow for depth */
	transition: transform 0.3s, box-shadow 0.3s;
	/* Smooth hover effect */
	font-weight: 700;
	display: flex;
	/* Use flexbox to center content */
	flex-direction: column;
	/* Stack content vertically */
	justify-content: center;
	/* Center content vertically */
}

.counter-item:hover {
	transform: translateY(-5px);
	/* Lift effect on hover */
	box-shadow: 0 6px 15px rgba(0, 0, 0, 0.2);
	/* Increase shadow on hover */
}

.counter-item p {
	margin-top: 10px;
	font-size: 1.1rem;
	color: var(--sixth);
	/* Darker gray for better readability */
	font-weight: 600;
}

/* Responsive adjustments */
@media (max-width: 768px) {
	.located-main {
		flex-direction: column;
		/* Stack items on smaller screens */
		align-items: center;
		/* Center items */
	}

	.counter-item {
		width: 80%;
		/* Take full width on small screens */
		margin: 10px 0;
		/* Add margin between items */
		max-width: none;
		/* Remove max-width for small screens */
	}
}



/* footer */
footer {
	padding: 50px;
	background: var(--second);

	color: var(--fourth)
}

.footer {
	display: flex;
	justify-content: center;
	align-items: start;
}

.footer-list {
	width: 33%;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	gap: 20px;
}

.footer img {
	width: 200px;
	margin-bottom: 20px;
}

.footer-list h3 {
	font-size: 22px;
	text-transform: capitalize;
	margin-bottom: 20px;
}

.footer-list ul {
	list-style: none;
}

.footer-list ul li {
	margin: 10px 0;
}

.footer-list ul li a {
	text-decoration: none;
	text-transform: capitalize;
	font-size: 17px;
	color: var(--fourth);
	font-weight: 500;
	letter-spacing: .5px
}

footer p.footer-para {
	line-height: 25px;
	font-weight: 400;
}

footer p.copyright {
	text-align: center;
	margin-top: 70px;
	text-transform: capitalize;
	font-weight: 500
}

footer p.copyright a {
	color: var(--fourth);
}

@media screen and (max-width:1130px) {
	.service-content {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		grid-template-rows: repeat(3, 1fr);
		grid-column-gap: 50px;
		grid-row-gap: 50px;
	}
}

@media screen and (max-width:850px) {
	.footer {
		flex-direction: column;
		gap: 30px
	}

	.footer-list {
		width: 90%;
		align-items: start;
	}
}

@media screen and (max-width:740px) {
	.service-content {
		display: grid;
		grid-template-columns: repeat(1, 1fr);
		grid-template-rows: repeat(6, 1fr);
		grid-column-gap: 50px;
		grid-row-gap: 50px;
	}

}

/*  */

.popup-fixed {
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	backdrop-filter: blur(5px);
	z-index: 100;
}

.popup {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	background: var(--third);
	padding: 30px;
	display: block;
	z-index: 10000;
	border-radius: 20px;
	box-shadow: rgba(0, 0, 0, 0.17) 0px -23px 25px 0px inset, rgba(0, 0, 0, 0.15) 0px -36px 30px 0px inset, rgba(0, 0, 0, 0.1) 0px -79px 40px 0px inset, rgba(0, 0, 0, 0.06) 0px 2px 1px, rgba(0, 0, 0, 0.09) 0px 4px 2px, rgba(0, 0, 0, 0.09) 0px 8px 4px, rgba(0, 0, 0, 0.09) 0px 16px 8px, rgba(0, 0, 0, 0.09) 0px 32px 16px;
}

.form-container {
	max-width: 400px;
	width: 100%;
	margin: 40px auto;
}

.pest-control-form {
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.pest-control-form h2 {
	color: #fff;
	margin-bottom: 20px;
	text-align: center;
}

.form-group {
	position: relative;
	margin-bottom: 15px;
}

.form-group i {
	position: absolute;
	top: 50%;
	left: 10px;
	transform: translateY(-50%);
	color: #888;
}

.form-group input,
.form-group select {
	width: 100%;
	padding: 10px 10px 10px 35px;
	border: none;
	border-radius: 5px;
	outline: none;
	box-sizing: border-box;
}

.form-group input:focus,
.form-group select:focus {
	border: 2px solid #888;
}

#submit {
	padding: 10px;
	border: none;
	border-radius: 5px;
	background-color: #555;
	color: #fff;
	font-size: 16px;
	cursor: pointer;
}

#submit:hover {
	background-color: #444;
}

#close {
	position: absolute;
	top: 20px;
	right: 20px;
	background: transparent;
	border: none;
	font-size: 40px;
	color: var(--first)
}

@media (max-width: 600px) {
	.form-container {
		width: 90%;
		padding: 15px;
	}

	.pest-control-form h2 {
		font-size: 18px;
	}

	#submit {
		font-size: 14px;
	}
}

@media screen and (max-width:900px) {
	.popup {
		width: 300px
	}
}





















/* service */
/* .main-service-bg {
	width: 100vw;
	height: 50vh;
} */

.main-service-bg img {
	width: 100vw;
	height: 100%;
}

.service-page-head {
	margin: 50px auto;
	width: 90%;
}

/* mobile */
@media screen and (max-width: 640px) {
	.web {
		display: none;
	}
}

/* Desktop */
@media screen and (min-width: 641px) {
	.phone {
		display: none;
	}
}

.service-page-center {
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
}

.service-page-details {
	max-width: 900px;
	width: 100%;
	padding: 20px;
	box-sizing: border-box;
	text-align: center;
	min-height: 1oovh;
	margin: 50px 0;
}

.service-page-details .title {
	background-color: #6d451b;
	color: #fff;
	display: inline-block;
	padding: 10px 20px;
	border-radius: 8px;
	margin-bottom: 40px;
	font-size: 24px;
	font-weight: 700;
	text-transform: uppercase;
}

.service-page-details .content {
	background: #fff;
	padding: 30px;
	border-radius: 15px;
	box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
	position: relative;

}

.service-page-details .content::before {
	content: '';
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	background: linear-gradient(to right, #ffecd2, #fcb69f);
	border-radius: 15px;
	z-index: -1;
	opacity: 0.5;
}

.service-page-details .image {
	width: 200px;
	height: 200px;
	border-radius: 50%;
	overflow: hidden;
	margin: 0 auto 20px;
	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}

.service-page-details .image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.service-page-details .text {
	font-size: 18px;
	line-height: 1.6;
	margin-bottom: 20px;
}

@media (max-width: 768px) {
	.service-page-details .content {
		padding: 20px;
	}

	.service-page-details .title {
		font-size: 20px;
	}

	.service-page-details .text {
		font-size: 16px;
	}
}

/*  */

.service-page-content i {
	display: none;
}

.service-page-content .container {
	width: 90%;
	max-width: 1200px;
	margin: 0 auto;
	padding: 20px;
}

.service-page-content h1 {
	font-size: 28px;
	color: var(--fourth);
	text-align: center;
	margin-bottom: 40px;
	letter-spacing: 1px;
	;
}

.service-page-content .columns {
	display: flex;
	flex-wrap: wrap;
	gap: 20px;
}

.service-page-content .column {
	flex: 1;
	min-width: 300px;
	background-color: #fff;
	padding: 20px;
	border-radius: 8px;
	box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
	position: relative;
	overflow: hidden;
}

.service-page-content .column::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: linear-gradient(135deg, #f4a261 25%, transparent 25%) -50px 0,
		linear-gradient(225deg, #f4a261 25%, transparent 25%) -50px 0,
		linear-gradient(315deg, #f4a261 25%, transparent 25%),
		linear-gradient(45deg, #f4a261 25%, transparent 25%);
	background-size: 100px 100px;
	z-index: 0;
	opacity: 0.1;
}

.service-page-content .column h2,
.service-page-content .column h3 {
	color: var(--fifth);
	margin-top: 20px;
	display: flex;
	align-items: center;
	position: relative;
	z-index: 1;
	font-size: 18px;
}

.service-page-content .column h2 i,
.service-page-content .column h3 i {
	margin-right: 10px;
}

.service-page-content .column .content {
	position: relative;
	z-index: 1;
}

.service-page-content .column p {
	margin: 10px 20px;
	display: flex;
	font-size: 16px;
	font-weight: 500;
}

.service-page-content .column p i {
	margin-right: 10px;
	color: var(--fourth);
}

.service-page-content .column p strong {
	font-size: 16px;
	margin-right: 10px
}

@media (max-width: 768px) {
	.service-page-content .columns {
		flex-direction: column;
	}

	.service-page-content h2 {
		font-size: 24px;
	}

	.service-page-content .column h2,
	.service-page-content .column h3 {
		font-size: 18px;
	}

	.service-page-content .column p strong {
		font-size: 16px;
	}
}

/*  */

.service-page-cards .container {
	max-width: 1200px;
	width: 100%;
	padding: 20px;
	box-sizing: border-box;
	min-height: 100vh;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
}

.service-page-cards h1 {
	text-align: center;
	color: var(--fourth);
	margin-bottom: 40px;
	font-size: 32px;
	font-weight: bold;
	letter-spacing: 1px;
}

.service-page-cards .cards {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: 20px;
}

.service-page-card {
	background: linear-gradient(145deg, var(--fourth), var(--third));
	color: #fff;
	border-radius: 12px;
	box-shadow: 0 8px 15px rgba(0, 0, 0, 0.3);
	padding: 20px;
	transition: transform 0.3s, box-shadow 0.3s;
	text-align: center;
}

.service-page-card:hover {
	transform: translateY(-10px);
	box-shadow: 0 15px 25px rgba(0, 0, 0, 0.4);
}

.service-page-card h2 {
	font-size: 20px;
	margin-bottom: 15px;
	color: var(--first);
}

.service-page-card p {
	font-size: 14px;
	line-height: 1.6;
	color: white;
}

@media (max-width: 768px) {
	.cards {
		grid-template-columns: 1fr;
	}
}

/*  */


.main-about-bg img {
	width: 100%;
	height: 100%;
}

.about-page {
	width: 85%;
	margin: 50px auto;
}

.about-page h3 {
	text-align: center;
	font-size: 25px;
	margin: 10px 0;
	letter-spacing: 1px;
	color: var(--fourth);
}

.about-page p.about-page-para {
	font-size: 16px;
	letter-spacing: .5px;
	line-height: 23px;
	font-weight: 400;
}

.about-page h4 {
	text-align: center;
	font-size: 22px;
	text-transform: capitalize;
	margin: 20px 0;
	letter-spacing: 1px;
	color: var(--fourth);
}

.about-page .choose-main {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	grid-template-rows: repeat(2, 1fr);
	grid-column-gap: 20px;
	grid-row-gap: 20px;
}

.about-page .choose-main .choose-card {
	padding: 15px;
	width: 300px;
	height: 230px;
	border-radius: 10px;
	background: #2e1605;
	box-shadow: inset -5px -5px 3px #120902,
		inset 5px 5px 3px #4a2308;
}

.about-page .choose-card h5 {
	color: var(--second);
	text-transform: capitalize;
	font-size: 16px;
	margin: 10px 0;
	letter-spacing: 1px;
	font-weight: 600;
}

.about-page .choose-card p.list-about {
	color: var(--second);
	font-size: 14px;
	line-height: 20px;
	letter-spacing: .8px;
	font-weight: 400;
}

.choose {
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
}

.choose-card img {
	width: 50px;
}

@media screen and (max-width:1083px) {
	.about-page .choose-main {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		grid-template-rows: repeat(3, 1fr);
		grid-column-gap: 50px;
		grid-row-gap: 50px;
	}
}

@media screen and (max-width:755px) {
	.about-page .choose-main {
		display: grid;
		grid-template-columns: repeat(1, 1fr);
		grid-template-rows: repeat(6, 1fr);
		grid-column-gap: 50px;
		grid-row-gap: 50px;
	}
}

.contact-page-flex {
	display: flex;
	justify-content: space-evenly;
	align-items: center;
	width: 85%;
	margin: 50px auto;
	background: var(--third);
	padding: 10px;
	border-radius: 30px;
}

.contact-page-details {
	padding: 20px;
	margin: 30px;
	width: 90%;
}

.contact-page-details-list h3 {
	text-transform: capitalize;
	margin: 10px 0;
	color: var(--fourth);
	letter-spacing: .5px;
	font-size: 20px;
}

.contact-page-details-list p {
	letter-spacing: .5px;
	line-height: 20px;
	color: var(--fourth);
	font-weight: 500;
}

.contact-page-form {
	padding: 20px;
	margin: 30px;
	width: 90%;
	box-shadow: rgba(0, 0, 0, 0.17) 0px -23px 25px 0px inset, rgba(0, 0, 0, 0.15) 0px -36px 30px 0px inset, rgba(0, 0, 0, 0.1) 0px -79px 40px 0px inset, rgba(0, 0, 0, 0.06) 0px 2px 1px, rgba(0, 0, 0, 0.09) 0px 4px 2px, rgba(0, 0, 0, 0.09) 0px 8px 4px, rgba(0, 0, 0, 0.09) 0px 16px 8px, rgba(0, 0, 0, 0.09) 0px 32px 16px;
	background: var(--second);
	border-radius: 30px
}

.contact-page-form form .form-part {
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
}

.contact-page-form form .form-part select {
	width: 85%;
	padding: 10px;
	background: transparent;
	border: 2px solid;
	outline: none;
	margin: 10px 0;
	font-size: 16px;
	border-radius: 20px
}

.contact-page-form form .form-part input {
	width: 85%;
	padding: 10px;
	margin: 10px 0;
	border: 2px solid;
	outline: none;
	font-size: 16px;
	background: transparent;
	border-radius: 20px;
}

.contact-page-flex .form-btn {
	display: flex;
	justify-content: center;
	margin: 10px 0;

}

.contact-page-flex .form-btn button {
	padding: 10px;
	letter-spacing: 1px;
	background: var(--fourth);
	border: 2px solid var(--fourth);
	width: 50%;
	border-radius: 10px;
	color: var(--first);
	transition: 1s ease;
}

.contact-page-flex .form-btn button:hover {
	background: transparent;
	color: var(--fourth);
}

.contact-page-form ::placeholder {
	color: var(--fourth);
	font-weight: 500;
}

@media screen and (max-width:900px) {
	.contact-page-flex {
		flex-direction: column-reverse;
	}
}

/*  */

.tabs-main {
	display: flex;
	justify-content: center;
	align-items: start;
	margin-top: 50px;
	min-height: 100vh;
	overflow: auto;
}

.tabs-container {
	max-width: 100%;
	width: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 30px 10px;
	flex-direction: column;
}

.tabs-container nav {
	position: relative;
	height: 50px;
	width: 100%;
	display: flex;
	justify-content: center;
	align-items: center;

}

.tabs-container nav::after {
	content: "";
	background: silver;
	width: 100%;
	height: 1px;
	position: absolute;
	top: 47px;
	filter: blur(0.5px);
}

.tabs-container nav label {
	position: relative;
	display: block;
	height: 100%;
	width: 100%;
	text-align: center;
	line-height: 50px;
	cursor: pointer;
	font-size: 20px;
	letter-spacing: 1px;
	transition: all .3s ease;
}

#residental:checked~nav label .commercial,
#residental:checked~nav label .residental {
	color: violet;
}

.tabs-container input[type='radio'] {
	display: none;
}

.tabs-container nav .slider {
	position: absolute;
	height: 4.5px;
	background-color: violet;
	border-radius: 20px;
	width: 21%;
	z-index: 1;
	left: 14%;
	bottom: 0;
	transition: all .3s ease;
}

#residental:checked~nav .slider {
	left: 64%;
}

#commercial:checked~nav .commercial {
	color: violet;
}

#residental:checked~nav .residental {
	color: violet;
}

.tabs-container section {
	filter: blur(.3px);
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
}

.tabs-container .content {
	display: none;
	margin: 20px 0;
}

#commercial:checked~section .content-1 {
	display: block;
}

#residental:checked~section .content-2 {
	display: block;
}

/* commercial */
.commercial-main {
	width: 100%;
}

.commercial-main img {
	width: 100%;
	height: 100%;
}

.calculator {
	width: 100%;
	margin: 0 auto;
	display: flex;
	justify-content: center;
	align-items: center;
	min-height: 100vh;
	color: #333;
}

.calculator .calculator-contain {
	background: #fff;
	padding: 20px;
	border-radius: 12px;
	box-shadow: 0 12px 24px rgba(0, 0, 0, 0.2);
	width: 90%;
	animation: fadeIn 1s ease-out;
	transition: transform 0.3s, box-shadow 0.3s;
}

.calculator .calculator-contain:hover {
	box-shadow: 0 16px 32px rgba(0, 0, 0, 0.3);
}

.calculator .serviceform {
	display: flex;
	gap: 20px;
}

.calculator h1 {
	font-size: 28px;
	margin-bottom: 20px;
	text-align: center;
	color: #3152F4;
	position: relative;
	padding-bottom: 10px;
}

.calculator h1::after {
	content: "";
	display: block;
	width: 60px;
	height: 4px;
	background: #3152F4;
	border-radius: 2px;
	position: absolute;
	bottom: 0;
	left: 50%;
	transform: translateX(-50%);
}

.calculator .form-group {
	margin-bottom: 20px;
	width: 100%;
}

.calculator label {
	display: block;
	margin-bottom: 8px;
	font-size: 18px;
	color: var(--fourth);
	font-weight: bold;
}

.calculator select,
.calculator input {
	width: 100%;
	padding: 12px 16px;
	border: 2px solid #ddd;
	border-radius: 8px;
	font-size: 16px;
	background: #fafafa;
	background: linear-gradient(#fafafa, #fafafa),
		linear-gradient(to bottom, #fff 1px, transparent 1px) 0 100% no-repeat;
	background-size: 100% 30px, 100% 30px;
	background-position: top left, bottom left;
	background-clip: padding-box, border-box;
	transition: border-color 0.3s, background-color 0.3s;
}

.calculator .pincode {
	margin-bottom: 30px;
}

.calculator select:focus,
.calculator input:focus {
	border-color: var(--fourth);
	background: #fff;
	outline: none;
}

.calculator .btn {
	display: flex;
	justify-content: center;
	gap: 15px;
}

.calculator button,
.book-btn button {
	width: 200px;
	padding: 14px;
	background: linear-gradient(135deg, var(--third), var(--fourth));
	border: none;
	border-radius: 8px;
	color: #fff;
	font-size: 18px;
	cursor: pointer;
	transition: background 0.3s, transform 0.2s;
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.calculator button:hover {
	background: linear-gradient(135deg, var(--fourth), var(--third));
	transform: scale(1.01);
}

.calculator .price {
	font-size: 20px;
	font-weight: bold;
	text-align: center;
	margin-top: 20px;
	color: var(--fourth);
}

.calculator .price span {
	color: var(--third);
}

@keyframes fadeIn {
	from {
		opacity: 0;
		transform: translateY(-20px);
	}

	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@media (max-width: 719px) {
	.calculator {
		width: 90%;
	}

	.calculator .serviceform {
		flex-direction: column;
		gap: 0;
	}
}

@media (max-width: 600px) {
	.calculator .form-container {
		padding: 15px;
	}

	.calculator h1 {
		font-size: 24px;
	}

	.calculator select,
	.calculator button {
		font-size: 14px;
		padding: 10px;
	}

	.calculator .price {
		font-size: 18px;
	}
}

/*  */
.commercial-use p.para {
	width: 80%;
	text-align: center;
	margin: 10px 0 30px;
	font-size: 18px;
	line-height: 22px;
}

.commercial-use {
	width: 90%;
	margin: 30px auto;
	min-height: 100vh;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
}

.commercial-use-main {
	display: flex;
	justify-content: space-evenly;
	align-items: center;
	gap: 50px;
	flex-wrap: wrap;
}

.commercial-use-card {
	width: 300px;
	text-align: center;
	background: linear-gradient(140deg, var(--third), var(--fourth));
	padding: 30px;
	border-radius: 20px;
}

.commercial-use-card h3 {
	font-size: 20px;
	margin: 10px 0;
}

/*  */
.commercial-card-main {
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
}

.commercial-cards {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	padding: 0 40px;
}

.commercial-cards .card {
	background-color: var(--third);
	border-radius: 12px;
	box-shadow: rgba(50, 50, 93, 0.25) 0px 30px 60px -12px inset, rgba(0, 0, 0, 0.3) 0px 18px 36px -18px inset;
	margin: 15px;
	padding: 15px;
	width: 320px;
	transition: transform 0.3s, box-shadow 0.3s;
}

.commercial-cards .card:hover {
	transform: translateY(-10px);
	box-shadow: 0 12px 20px rgba(0, 0, 0, 0.2);
}

.commercial-cards .icon {
	font-size: 50px;
	color: var(--first);
	/* Consistent color for all icons */
	text-align: center;
	margin-bottom: 10px;
}

.commercial-cards .title {
	font-size: 18px;
	font-weight: bold;
	text-align: center;
	margin-bottom: 10px;
	color: var(--fourth);
}

.commercial-cards .description {
	font-size: 15px;
	text-align: center;
	color: var(--fourth);
}

@media (max-width: 768px) {
	.commercial-cards .card {
		width: 45%;
	}
}

@media (max-width: 480px) {
	.commercial-cards .card {
		width: 100%;
	}
}

/*  */
.commercial-brand {
	width: 100%;
	margin: 0 auto;
	border-radius: 20px;
	min-height: 100vh;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
}

.commercial-brand .\34 -slider {
	width: 90%;
}

.commercial-brand .owl-stage {
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 20px;
	border-radius: 20px;
	background: var(--third);
	margin: 30px 0 0 0;
	box-shadow: rgba(0, 0, 0, 0.17) 0px -23px 25px 0px inset, rgba(0, 0, 0, 0.15) 0px -36px 30px 0px inset, rgba(0, 0, 0, 0.1) 0px -79px 40px 0px inset, rgba(0, 0, 0, 0.06) 0px 2px 1px, rgba(0, 0, 0, 0.09) 0px 4px 2px, rgba(0, 0, 0, 0.09) 0px 8px 4px, rgba(0, 0, 0, 0.09) 0px 16px 8px, rgba(0, 0, 0, 0.09) 0px 32px 16px;
}

.commercial-brand .item {
	width: 150px;
	margin: 0 auto;
}

.commercial-brand .item img {
	width: 100%;
	height: 100%;
}

/*  */
.commercial-hygeine-main {
	min-height: 100vh;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
}

.commercial-hygeine {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	padding: 0 20px;
}

.commercial-hygeine .card {
	background-color: var(--third);
	border-radius: 12px;
	box-shadow: rgba(50, 50, 93, 0.25) 0px 30px 60px -12px inset, rgba(0, 0, 0, 0.3) 0px 18px 36px -18px inset;
	margin: 15px;
	padding: 10px;
	width: 320px;
	transition: transform 0.3s, box-shadow 0.3s;
}

.commercial-hygeine .card:hover {
	transform: translateY(-10px);
	box-shadow: 0 12px 20px rgba(0, 0, 0, 0.2);
}

.icon {
	font-size: 60px;
	color: var(--first);
	/* Consistent color for all icons */
	text-align: center;
	margin-bottom: 10px;
}

.commercial-hygeine .title {
	font-size: 20px;
	font-weight: bold;
	text-align: center;
	margin-bottom: 10px;
	color: var(--fourth)
}

.commercial-hygeine .description {
	font-size: 16px;
	text-align: center;
	color: var(--fourth);
}

@media (max-width: 768px) {
	.commercial-hygeine .card {
		width: 45%;
	}
}

@media (max-width: 480px) {
	.commercial-hygeine .card {
		width: 100%;
	}
}

/*  */
.commercial-service {
	width: 100%;
	margin: 0 auto;
	border-radius: 20px;
	min-height: 100vh;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
}

.commercial-service .commercial-brand-carousel {
	width: 90%;
}

.commercial-service .owl-stage {
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 20px;
	border-radius: 20px;
}

.commercial-service .item {
	width: 200px;
	margin: 10px auto;
	text-align: center;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	background: var(--third);
	padding: 20px;
	height: 180px;
	border-radius: 20px;
	box-shadow: rgba(0, 0, 0, 0.35) 0px -50px 36px -28px inset;
}

.commercial-service .item img {
	width: 100px;
	height: 100%;
}

.commercial-service .item h3 {
	text-transform: capitalize;
	margin-top: 20px;
	color: var(--fourth);
}

/*  */
.acoordion-main {
	min-height: 100vh;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
}

h2.extra{
	margin-bottom: 30px;
}

.accordion-container {
	max-width: 800px;
	margin: 0 auto 50px;
/* 	background-color: var(--third); */
	border-radius: 8px;
/* 	box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); */
	overflow: hidden;
}

.accordion-item {
/* 	border-bottom: 1px solid var(--second);
	background: var(--second); */
}

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

.accordion-header {
	width: 100%;
	padding: 15px 20px;
	text-align: left;
	background-color: var(--third);
	color: var(--first);
	border: none;
	outline: none;
	cursor: pointer;
	font-size: 17px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	transition: background-color 0.3s ease;
	text-transform: capitalize;
	margin: 5px 0;
	border-radius: 10px
}

.accordion-header:hover {
	background-color: var(--fourth);
}

.accordion-content {
	max-height: 0;
	overflow: hidden;
	transition: max-height 0.3s ease;
	background-color: var(--second);
	padding: 0 20px;
}

.accordion-content p,
.accordion-content ul,
.accordion-content ol {
	margin: 15px 0;
	font-size: 16px;
}

.accordion-content ul,
.accordion-content ol {
	padding-left: 20px;
}

.accordion-content li{
	margin-top: 10px;
}

.accordion-content ul li {
	list-style-type: disc;
}

.accordion-item.active .accordion-content {
	max-height: 10000px;
	/* Adjust as needed */
	padding: 15px 20px;
}

.accordion-header::after {
	content: '+';
	font-size: 1.2em;
}

.accordion-item.active .accordion-header::after {
	content: '-';
}

/*  */
.service-ded-page {
	min-height: 100vh;
	display: flex;
	justify-content: center;
	align-items: center;
	width: 90%;
	margin: 50px auto;
}

.service-ded-main {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	grid-template-rows: repeat(2, 1fr);
	grid-column-gap: 40px;
	grid-row-gap: 40px;
	place-items: center;
}

.service-ded-cards {
	width: 320px;
	text-align: center;
	background: var(--second);
	height: 380px;
	border-radius: 15px;
	text-decoration: none !important;
	box-shadow: 0 4px 8px rgba(0, 0, 0, .2);
	transition: .3s ease-in;
	border: 1px solid var(--third)
}

.service-ded-cards .img {
	height: 250px;
	background: yellow;
	margin-bottom: 10px;
	border-radius: 15px 15px 0 0;
}

.service-ded-cards .img img {
	width: 100%;
	height: 100%;
	border-radius: 15px 15px 0 0;
}

.service-ded-cards h3 {
	text-transform: capitalize;
	letter-spacing: .8px;
	margin-bottom: 10px;
	padding: 0 10px;
	color: var(--fourth);
	text-decoration: none;
	font-weight: 600;
}

.service-ded-cards p {
	letter-spacing: .5px;
	padding: 0 10px;
	color: var(--fourth);
	font-size: 14px;
}

.service-ded-cards:hover {
	transform: translateY(-10px);
	box-shadow: 3px 7px 10px rgba(0, 0, 0, .3)
}

@media screen and (max-width:1066px) {
	.service-ded-main {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		grid-template-rows: repeat(3, 1fr);
		grid-column-gap: 40px;
		grid-row-gap: 40px;
		place-items: center;
	}
}

@media screen and (max-width:710px) {
	.service-ded-main {
		display: grid;
		grid-template-columns: repeat(1, 1fr);
		grid-template-rows: repeat(6, 1fr);
		grid-column-gap: 40px;
		grid-row-gap: 40px;
		place-items: center;
	}
}

@media screen and (max-width:500px) {
	.form-list img {
		width: 300px;
		height: 300px
	}

	.form-list form select {
		width: 250px;
	}

	.form-list form input {
		width: 250px;
	}

	.form-list form button {
		width: 100px
	}

	.form-content {
		gap: 50px
	}
}



/* whatsapp */
.whatsapp-icon {
	position: fixed;
	bottom: 20px;
	left: 20px;
	background-color: #25D366;
	color: white;
	padding: 15px;
	border-radius: 50%;
	font-size: 24px;
	width: 50px;
	height: 50px;
	display: flex;
	justify-content: center;
	align-items: center;
	z-index: 1000;
	box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2);
}

.whatsapp-icon::before,
.whatsapp-icon::after {
	content: '';
	position: absolute;
	border-radius: 50%;
	z-index: -1;
	animation: pulse-border 2s infinite ease-in-out;
}

.whatsapp-icon::before {
	width: 50px;
	height: 50px;
	border: 3px solid rgba(37, 211, 102, 0.6);
	box-shadow: 0px 0px 15px rgba(37, 211, 102, 0.5);
}

.whatsapp-icon::after {
	width: 50px;
	height: 50px;
	border: 3px solid rgba(37, 211, 102, 0.4);
	box-shadow: 0px 0px 30px rgba(37, 211, 102, 0.3);
	animation-delay: 0.5s;
}

@keyframes pulse-border {
	0% {
		transform: scale(1);
		opacity: 1;
	}
	100% {
		transform: scale(1.5);
		opacity: 0;
	}
}




/* Chatbot Container */
.chatbot-container {
	position: fixed;
	bottom: 20px;
	right: 20px;
	width: 350px;
	height: 70vh;
	background-color: var(--first);
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
	border-radius: 15px;
	overflow: hidden;
	display: none;
	transition: all 0.3s ease;
	z-index: 1001;
}


/* Chatbot Header */
.chatbot-header {
	background-color: var(--third);
	color: var(--first);
	padding: 15px;
	text-align: center;
	position: relative;
	font-size: 20px;
	font-weight: bold;
}

/* Close button */
.chat-close-btn {
	position: absolute;
	right: 15px;
	top: 15px;
	background: none;
	border: none;
	color: var(--first);
	font-size: 25px;
	cursor: pointer;
}

/* Chatbot Body */

.chatbot-body {
	padding: 20px;
	height: calc(70vh - 110px);
	overflow-y: auto;
	display: flex;
	flex-direction: column;
	background: #f9f9f9;
}

/* Custom scrollbar */
.chatbot-body::-webkit-scrollbar {
	width: 8px;
}

.chatbot-body::-webkit-scrollbar-track {
	background: #e0e0e0;
	border-radius: 10px;
}

.chatbot-body::-webkit-scrollbar-thumb {
	background-color: var(--fourth);
	border-radius: 10px;
	border: 2px solid #f9f9f9;
}



/* Chat Message */
.chat-message {
	margin-bottom: 10px;
	padding: 10px;
	border-radius: 15px;
	max-width: 70%;
	position: relative;
	transition: background-color 0.3s ease;
}

/* User message */
.user-message {
	background-color: var(--third);
	color: #fff;
	align-self: flex-end;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
	font-size: 15px;
}

/* Bot message */
.bot-message {
	background-color: var(--first);
	color: var(--fourth);
	align-self: flex-start;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
	font-size: 14px;
}

/* Input area */
.chat-input-area {
	display: flex;
	align-items: center;
	padding: 5px 5px 0;
	height: 48px;
}

/* Chat Input */
.chat-input {
	flex-grow: 1;
	padding: 10px;
	border: 1px solid #ddd;
	border-radius: 20px;
	transition: border 0.3s ease;
}

.chat-input:focus {
	border: 1px solid var(--third);
	outline: none;
}

/* Chat Submit Button */
.chat-submit-btn {
	background-color: var(--fourth);
	color: var(--first);
	border: none;
	padding: 10px 15px;
	cursor: pointer;
	border-radius: 20px;
	margin-left: 10px;
	transition: background-color 0.3s ease, transform 0.3s ease;
}

.chat-submit-btn:hover {
	background-color: var(--third);
	color: #fff;
	transform: scale(1.05);
}

/* Clickable Service List */
.chat-service-list {
	list-style: none;
	padding: 0;
	margin: 10px 0;
}

.chat-service-list li {
	padding: 10px;
	background-color: var(--fourth);
	color: var(--first);
	margin-bottom: 10px;
	border-radius: 10px;
	cursor: pointer;
	text-align: center;
	transition: background-color 0.3s ease, transform 0.3s ease;
}

.chat-service-list li:hover {
	background-color: var(--third);
	transform: scale(1.02);
}

/* Chat icon button */
.chat-open-icon {
	position: fixed;
	bottom: 20px;
	right: 20px;
	background-color: var(--third);
	color: var(--first);
	padding: 10px;
	border-radius: 50%;
	cursor: pointer;
	font-size: 30px;
	width: 50px;
	height: 50px;
	display: flex;
	justify-content: center;
	align-items: center;
	box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
	transition: background-color 0.3s ease, transform 0.3s ease;
	z-index: 1000;
}

.chat-icon:hover {
	background-color: var(--second);
}

/* Responsive for Mobile: Fullscreen */
@media (max-width: 768px) {
	.chatbot-container {
		width: 100vw;
		height: 90vh;
		bottom: 0;
		right: 0;
		border-radius: 0;
	}

	.chatbot-body {
		height: calc(90vh - 110px);
	}
}